@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
/* index.css */
/*PC first*/
/*##### PC #####*/
/* ------------------------------------------------------------ header */
header{
	margin-bottom:20px;
}
.headerHome{
	width:100%;
	height:470px;
	margin:0 auto;
	background-image:url(../shared/home/bg_header.jpg);
	background-position:center center;
	background-repeat:no-repeat;
}
		.site_ttl{
			width:950px;
			padding:30px 0px;
			margin:0 auto;
		}
		.site_ttl ul{
			display:flex;
			justify-content:space-between;
		}
		.site_ttl ul li{
			font-size:1.05em;
		}
	.headerHome .site_ttl_img{
		width: 470px;
		height: 140px;
		padding: 40px 0px 0px 0;
		margin:0 auto;
	}
	.headerHome .setsumei_txt{
		padding:14px 0px 0px 0;
		margin:0 auto;
		text-align:center;
		line-height:1.8em;
		font-size:1.15em;
	}
		.h_nav_box{
			border-bottom:5px solid #ffaa19;
		}
		.h_nav_box .h_nav{
			width:860px;
			height:90px;
			margin:0 auto 30px auto;
		}
		.h_nav_box .h_nav ul{
			height:95px;
			display:flex;
			justify-content:space-between;
		}
		.h_nav_box .h_nav ul li{}
		
		.h_nav_box .h_nav ul li a{
			display:block;
		}
/* ------------------------------------------------------------ *** */


/* ------------------------------------------------------------ contents */
.contents{
}

    /* --- mainBox --- */
    .contents .mainBox{
		width:940px;
		margin:0 auto;
    }
	
	.guideline_box{
		margin:20px auto;
	}
	.guideline_box .box_inner{
		margin:0 auto 70px auto;
		width:800px;
		text-align:center;
		line-height:2.4em;
	}
	.guideline_box .box_inner p{
		font-size:1.15em;
	}
	.guideline_box .guide_img{
		margin:20px 0 40px 0;
	}

.guideline_select{
    padding: 2em 0;
}

    .guideline_select ul{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5em;
		flex-wrap: wrap;
    }

    .guideline_select ul li{
		margin-bottom: 1em;
	}

        .guideline_select ul li a{
            box-sizing: border-box;
            position: relative;
            font-family: 'Noto Sans JP', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 386px;
            height: 90px;
            border-radius: 45px;
            color: #23467d;
            font-weight: bold;
            line-height: 1.5;
            font-size: 1.28em;
            text-shadow: 0 0 3px #fff,0 0 5px #fff;
            border: 1px solid rgba(255,255,255,0);
            background: rgb(146,198,193);
            background: -moz-linear-gradient(90deg, rgba(146,198,193,1) 0%, rgba(142,223,145,1) 100%);
            background: -webkit-linear-gradient(90deg, rgba(146,198,193,1) 0%, rgba(142,223,145,1) 100%);
            background: linear-gradient(90deg, rgba(146,198,193,1) 0%, rgba(142,223,145,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#92c6c1",endColorstr="#8edf91",GradientType=1);
            transition: .3s all ease;
        }

        .guideline_select ul li a:hover{
            border: 1px solid rgba(255,255,255,1);
            box-shadow: 0 0 10px 1px rgba(0,0,0,0.15);
            filter: contrast(110%);
        }

            .guideline_select ul li a:after{
                font-family: FontAwesome;
                content:"\f105";
                display: inline-block;
                height: 1em;
                line-height: 1;
                font-size: 1.6em;
                font-weight: normal;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0.5em;
                margin: auto;
                text-shadow: none;
                transition: .3s all ease;
                color: rgba(35,70,125,0.8);
            }

            .guideline_select ul li a:hover:after{
                transform: translateX(0.1em);
                color: rgba(35,70,125,1);
            }

	
@media screen and (max-width:480px){
	/*##### SP #####*/
	header {
		height: auto;
		margin-bottom:30px;
	}
	
	.headerHome{
		box-sizing:border-box;
		width:100%;
		height:auto;
		padding:10px 10px 60px 10px;
		background-size:contain;
		background-position:center bottom;
		background-color:#d8e9f3;
	}
		.site_ttl{
			width:auto;
			margin:0 0 30px 0;
			padding:0 40px 0 0;
		}
		.site_ttl ul{
			display:block;
		}
			.site_ttl ul li{
				font-size:3vw;
				line-height:1.4em;
			}
		
		.headerHome .site_ttl_img{
			width: 80%;
			height:auto;
			padding:0;
			margin-bottom:20px;
		}
			.site_ttl_img img,
			.schedule_venue img{
				max-width:100%;
				height:auto;
			}
		.headerHome .setsumei_txt{
			width:85%;
			font-size:4vw;
			padding:0;
			line-height:1.6em;
		}
		
		.contents .mainBox{
			width:auto;
		}
		.guideline_box{
			width:auto;
		}
		.guideline_box .box_inner{
			width:auto;
			padding:0 20px;
			margin:0 auto 40px auto;
		}
		.guideline_box .box_inner p{
			font-size:3.8vw;
			line-height:1.8em;
		}
		
		.guideline_box .box_inner .guide_img{
			width:80%;
			margin:20px auto;
		}
		
		.guideline_box .box_inner .guide_img img{
			max-width:100%;
			height:auto;
		}
		
		.h_nav_box{
			border:none;
			padding:0 10px;
		}
		
		.h_nav_box .h_nav{
			width:auto;
			height:auto;
		}
		
		.h_nav_box .h_nav ul{
			height:auto;
			flex-wrap:wrap;
		}
		
			.h_nav ul li{
				box-sizing:border-box;
				width:33%;
				margin:0;
				padding:0 2px 4px 0;
			}
			
			.h_nav ul li img{
				max-width:100%;
				height:auto;
			}
			
			.h_nav ul li a{
				display:block;
				padding:10px;
				text-align:center;
				border:1px solid #ccc;
				border-radius:4px;
			}
			
    .guideline_select{
        padding: 2em 0 0 0;
    }

        .guideline_select ul{
            flex-direction: column;
            align-items: center;
        }

        .guideline_select ul li{
            margin-bottom: 1em;
        }

            .guideline_select ul li a{
                width: 80vw;
                height: 16vw;
                border-radius: 8vw;
                line-height: 1.3;
                font-size: 1.08em;
            }

                .guideline_select ul li a:after{
                    font-size: 1.2em;
                }
    
        .guideline_select p{
            text-align: left;
        }


}