/*===============================================//

//  style.css //

//===============================================*/


/*color  ------------------*/
:root {
	--clr-main: #484848;	
	--clr-sub:#FFC000;
	--clr-yel:#FFC000;
	--clr-blue: #77A6AE;
	--clr-lightblue: #C4DBDF;
	--clr-wh: #fff;
	--clr-gry: #f6fdf4;
}



/*---------------------------
bana_Entry
---------------------------*/
.bana_Entry{
	width: 58px;
	position: fixed;
    right:14px;
    top: 30%;
    transform: translateY(-50%);
	z-index: 100; img{}}

/*----------*/
@media screen and (max-width: 959px){.bana_Entry{right:8px;}}
@media screen and (max-width: 600px){.bana_Entry{display: none;}}


/* ***********************************************************
* #sp-Entry
* *********************************************************** */
.sp-Entry {display:none;}


@media screen and (max-width: 600px){
.sp-Entry {
	display:inherit;
	position: fixed;
	height: auto;
	z-index:999;
	width:100%; }
	
/**/
.sp-Entry-Btn{
	padding: 1.6rem;
    background-color: #FF4400;
	width:100%;
	
	position: fixed;
	z-index: 10001;
	bottom:0;
	left:0; }

.sp-Entry-Btn a{
    display: block;
    color: #fff;
	line-height:1;
	text-align:center;
	letter-spacing: 0.1em;
	font-feature-settings : "palt"; }
}


/*---------------------------
hero-ttl
---------------------------*/

.hero-ttl-Body{
	width: min(600px,30vw);
	position:absolute;
    top:53%;
    left:50%;
    transform: translate(-50%,-50%);
	z-index: 100; img{}}


.hero-ttl{
	position: relative;
	width: 100%; img{}}

.hero-ttl2{
    position:absolute; 
    width: min(320px,20vw);
    top:0%; 
    right:-30%; z-index: 100; img{}}






/*----------*/
@media screen and (max-width: 959px){
.hero-ttl-Body{width: min(340px,90vw);}
.hero-ttl{ width: 100%;}
.hero-ttl2{width: 140px;top:5%;  right:-15%;}
}



/*///////////////////////////////////

//top
////////////////////////////////////*/


/*---------------------------
/*top-about
---------------------------*/
.intro{position: relative; margin-top: 20px;}


/**/
.intro-badge{
    position:absolute; 
    top:0px;
    left:50%;
    transform: translate(-50%,-50%);
    width:80%;

    li{
	width: 25%; 
	img{ width: 100%; height: 100%;} } }

/**/
.intro__Body {
    margin: 100px auto 0;
    max-width: 810px;
	
	h2{
		margin-bottom: 3vw;
		text-align: center;}
    
    h3{
        color:var(--clr-yel);
		margin-bottom: 3vw;
		text-align: center;}
	
	p{ line-height: 2; text-align: center;} }
    

/**/
    .intro__Img-1{
        position: absolute;
        bottom:0%;
        left:0%;
        
		img{width: 12vw;}}
		
	.intro__Img-2{
        position: absolute;
        bottom:0%;
        right:0%;
		img{width: 10vw;}} 

.coming{
    padding-top: 80px;
    text-align: center;}



/**/
@media screen and (max-width: 959px){
.intro{position: relative; margin-top: 10px; }

.intro-badge{
    position:absolute; 
    top:0px;
    left:50%;
    transform: translate(-50%,-50%);
    width:95%;

    li{
	width: 25%; 
	img{ width: 100%; height: 100%;} } }

.intro__Body {margin: 40px auto 0;	/*padding-bottom: 10vw;*/
h2{}
h3{}
p{} }
}
    
    
@media screen and (max-width:600px){
.intro__Body {margin: 40px auto 0;	/*padding-bottom: 10vw;*/
h2{}
h3{}
p{text-align: left;} }
    
}
    
    


/**/
@media screen and (max-width: 959px){
.coming{
    padding-top: 40px;padding-bottom: 40px;}

    

.intro__Img-1{
        position: absolute;
        bottom:0%;
        left:3%;
        
		img{width: min(100px,14vw);}}
		
	.intro__Img-2{
        position: absolute;
        bottom:0%;
        right:3%;
		img{width: min(100px,12vw);}} 
}



/*---------------------------

/*common mudule

---------------------------*/

.section-line{width: 80vw; margin: 0 auto;text-align: center; img{text-align: center;}}




/*cmn__List
-----------------------------*/
.cmn__List{
    gap:38px;

    li{
	width : calc((100% / 3) - 27px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.25s;
        
        a{display: block; transition: 0.25s;
        
        figure{
        position: relative;
		aspect-ratio: 2/1;
        overflow: hidden;
        background-color: #F5F5F5;
            
            
        .icon-Play{ 
            position:absolute;
            width: min(10vw,80px);
            z-index: 1;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);}
		
		.cmn__Img{ 
            transition: 0.25s;
			width: 100%;
			height: 100%;
			object-fit: cover; } 
            }
        
        .cmn__Tx{ 
            padding: 2.4rem 1.6rem;
            h3{ text-align: center;}
            p{text-align: center; margin-top: 0px;}}
        
        
        } }}

.cmn-Btn{max-width: 560px; margin: 5vw auto 0; a{display: block;}}


.cmn__List li:hover {box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);}
.cmn__List a:hover .cmn__Img{transform:scale(1.1,1.1); z-index: 0;}


/**/
@media (max-width: 959px) { 
 .cmn__List{gap:10px;
li{width : calc((100% / 2) - 5px);
a{display: block; transition: 0.25s; 
     
.icon-Play{ width: 15vw;}
.cmn__Img{ }
.cmn__Tx{ padding: 1.2rem 1.6rem;
h3{ text-align: center;}
p{text-align: center; margin-top: 0px;}}}}}
}





/*---------------------------

/*coment

---------------------------*/
.coment {
}

/**/

.coment__Body{
    position: relative;
    background-color: #fff;
    padding: 4rem 0; }

.coment-bg{ 
    width: min(560px,40vw);
    position:absolute;
    z-index: 0;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%); 
    mix-blend-mode:multiply;
    img{mix-blend-mode:multiply;}}

.coment__List{
    display: inline-block;
		
		.coment__Wrap{
			
			figure{width: 100px;}
			
			.coment__Tx{width: calc(100% - 100px);
	
				h3{ line-height: 1.4;}
				p{margin-top: 10px;}} }}

#slider3{margin-top: 32px;}


/**/
@media (max-width: 959px) { 
.coment__Body{padding: 2rem 0; }
	
.coment__List{
li{a{padding: 1.6rem; 
.coment__Wrap{figure{width: 30px!important; .cmn__Img{width: 30px!important;}}
.coment__Tx{width: calc(100% - 35px);
h3{ line-height: 1.2;}
p{}} }}}}
}




/*---------------------------

/*.lineup

---------------------------*/
.lineup{position: relative; height: 100%;}

.lineup__Body {}


/**/
@media (max-width: 959px) { 
}





/*---------------------------

/*howto

---------------------------*/
.howto{position: relative; height: 100%;}

.howto__Body {}

.bg-wh {
    margin: 0 auto;
    width: 95%;
    background-color: #fff; 
    border-radius: 20px;}

/**/

.howto__List{
    gap:38px;

    li{
	width : calc((100% / 3) - 27px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #FFE400;
    background-color: #FFFDEA;
   display:flex;flex-direction:column;
        
        h3{
            text-align: center;
            padding: 1.2rem;
            background-color: #FFE400;}
        
        div{
            padding: 2.4rem;
            text-align: center;
        
            figure{
            position: relative;
            text-align: center;
            margin-bottom: 2.4rem;

            img{ 
                display: inline-block;flex-grow:1;
                align-items: center; /*上下*/}}

            p{text-align: center; margin-bottom: 2.4rem;}
            a{text-align: center;}
        
        
        } }}









/**/
@media (max-width: 1200px) { 
.bg-wh {
    margin: 0 auto;
    width: 100%;
    background-color: #fff; 
    border-radius: 10px;}

.howto__List{gap:20px;
li{width : 100%;border-radius: 10px;border: 2px solid #FFE400;
h3{padding: 1.2rem;}
 div{padding: 1.6rem
figure{margin-bottom: 1.6rem;
img{ display: inline-block;flex-grow:1;align-items: center; /*上下*/}}
p{text-align: center; margin-bottom: 1.6rem;}
a{text-align: center;}} }}

.howto__img-height{padding: 16px 0;}
}





/*---------------------------

/*apply

---------------------------*/
.apply{position: relative; height: 100%;}

.apply__Body {}

/**/

.apply__List{
    gap:38px;

    li{
	width : calc((100% / 3) - 27px);
    background-color: #fff;
    border-radius: 10px;
    border: 3px solid #FFE400;
    background-color: #FFFDEA;
        
        h3{
            position: relative;
            text-align: center;
            padding: 2.8rem;
            background-color: #FFE400;
            
            span{
                position: absolute;
                left:50%;
                transform: translateX(-50%);
                top:-30px;
                width: 60px;
                text-align: center;
                display: block;
            }}
        
        div{
            padding: 2.4rem;
            text-align: center;
        
            figure{
            text-align: center;

            img{ text-align: center;}}

            p{margin-top: 2.4rem;}
        
        
        } }}

/**/
@media (max-width: 1200px) { 
    
.apply__List{gap:32px;

li{width : 100%;border-radius: 10px;border: 2px solid #FFE400;
h3{padding: 2.8rem;
span{top:-20px;width: 48px;}}
        
div{padding: 1.6rem;
figure{text-align: center;img{ text-align: center; width: 24vw;}}
p{margin-top: 1.6rem;} } }}    


}


/*apply-yoko
-----------------------------*/
.apply-yoko {
	max-width: 960px;
	margin: 0 auto;
}

/**/

.apply-yoko__List{
	
	h3{
		text-align: center;
		margin-top: 24px;
		margin-bottom: 24px;
		color:var(--clr-yel);}
	
	p{
		margin-top: 10px;
		padding-left:1em;
		text-indent:-1em;}

	.apply-yoko__List-dl{
		margin-bottom: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #C9C6AB;

		dt{width : 200px;}
		dd{width : calc(100% - 200px);} }}


.apply-yoko__inner{
	position: relative;
	margin:0 auto ;
	padding:0;
	max-width: 680px; }


/**/
@media (max-width: 959px) { 
.apply-yoko__List-dl{margin-bottom: 8px;padding-bottom: 8px;
dt{width : 100%;}
dd{width : 100%; }
}
}



/**/

.apply-yoko__Sns{
    max-width: 600px;
    margin: 0 auto;

    li{margin-bottom: 24px;
        h3{margin-bottom: 10px;}
    }}


.modaal-btn{width: 49%;}

.modaal-css{margin: 0 auto;  text-align: center; img{text-align: center;}}


/*---------------------------

/*top-Message

---------------------------*/
.top-Message{position: relative; background-color: var(--clr-lightblue);}

/*---*/
.top-Message__Body {
    
    .top-Message__img{
        position: relative;
        margin-bottom: 40px;
        width: 50%;
	
        h3{
            position: absolute;
            z-index: 1;
            top:-4vw;
            left:3vw;
            width: 10vw; img{}}

        .top-Message__Main{
            text-align: center; img{width: 100%;}}}
    
    
    .top-Message__Tx{
        margin-top: 10vw;
        position: relative;
        width: 45%;
	
        p{margin-bottom: 32px;}

        .top-Message__Name{
            width: 160px;
            
            .top-Message__Name-1{
                 margin-bottom: 0px;
                text-align: center;}
            
            .top-Message__Name-2{
                text-align: center;
                
                span{display: block; margin-top: 0px; color: var(--clr-blue); text-align: center;}}}} }


/**/
@media screen and (max-width: 959px){
.top-Message__Body {
.top-Message__img{margin-bottom: 16px; width: 100%;
h3{top:-4vw;left:3vw;width: min(120px,20vw); img{}}
.top-Message__Main{text-align: center; img{width: 100%;}}}
.top-Message__Tx{width: 100%; margin-top: 0vw;
p{ width: 100%;  margin-bottom: 16px;}
.top-Message__Name{width: 100%;
.top-Message__Name-1{margin-bottom: 0px;text-align: center;}
.top-Message__Name-2{text-align: center;
span{display: block; margin-top: 0px; color: var(--clr-blue); text-align: center;}}}}
    }}



    
    
/*---------------------------

/*top-Sponcor

---------------------------*/
    
.top-Sponcor{position: relative; background-color: var(--clr-lightblue);}

/*---*/
.top-Sponcor__Body {
    
    h3{margin-bottom: 40px;text-align: center;font-weight: 700;}
    
    
    .top-Sponcor__Box{
        position: relative;
        margin-bottom: 40px;
        width: 100%;
        background-color: #fff;
        border-radius: 20px;
        padding: 4.8rem;
        text-align: center;
        
        h4{margin-bottom: 24px;text-align: center; display: inline-block;}
        
        .top-Sponcor__Box-Price{
            width: 100%;
            background-color: #FFF1C4;
            border-radius: 20px;
            padding: 3.2rem;
	        border: 5px solid #FFC200; 
            text-align: center;
            
            h4{margin-bottom: 10px;text-align: center; font-weight: 700; b{}}
            .top-Sponcor__Box-Num{margin-bottom: 0px; text-align: center; b{}}
            p{text-align: center;} }
        
        
        .top-Sponcor__Box-Tx{
            margin-top: 32px;
            text-align: center;
            
            p{text-align: center;}}
    
        .top-Sponcor__Box-List{
            width: 100%;
            gap:10px;
	        li{width : calc((100% / 4) - 10px); text-align: center;}}
    } }





/**/
@media screen and (max-width: 959px){
/*---*/
.top-Sponcor__Body {
h3{margin-bottom: 20px;text-align: center;}
.top-Sponcor__Box{margin-bottom: 16px;width: 100%;border-radius: 10px;padding: 2rem;
h4{margin-bottom: 16px;text-align: center; display: inline-block;}
.top-Sponcor__Box-Price{border-radius: 10px;padding: 1.6rem;border: 3px solid #FFC200; 
            
h4{margin-bottom: 10px;text-align: center; font-weight: 700; b{}}
.top-Sponcor__Box-Num{margin-bottom: 0px; text-align: center; b{}}
p{text-align: center;} }
        
.top-Sponcor__Box-Tx{margin-top: 16px;}
.top-Sponcor__Box-List{width: 100%;gap:10px;
li{width : calc((100% / 2) - 10px); text-align: center;}}} }    
    
}
    
    



/*---------------------------

/*judge

---------------------------*/
.judge {}
  
/**/
.judge__Body {
	width : 100%;
    border-radius: 10px;
    border: 3px solid #FFE400;
    background-color: #FFFDEA;

        
        h3{
            position: relative;
            text-align: center;
            background-color:#FFE400;
            padding: 1.6rem;

            span{display: block;text-align: center;}

            figure{
                position: absolute;
                top: 50%;
                transform: translateY(-50%); 
                right:10px;
                width: 15vw;}
        }
        
        .judge__Tx{
            padding: 4rem;
            text-align: center;
            
            h4{margin-bottom: 2.4rem; text-align: center; color: #FFBB00; font-weight: 500;}
            figure{margin-bottom:2.4rem; text-align: center;}
        
            .gMap{width: 100%; height: 480px; iframe{width: 100%; height: 100%;}}} 
}
    



/**/
@media screen and (max-width: 959px){

.judge__Body {border: 2px solid #FFE400;

 h3{
    padding: 1.6rem;

    figure{
            position: absolute;
            top: -10%;
            transform: translateY(-50%); 
            right:10px;
            width: 20vw; }
}
.judge__Tx{padding: 2.4rem;
h4{margin-bottom: 1.6rem; text-align: center; color: var(--clr-yel)}
figure{margin-bottom:1.6rem; text-align: center;}
.gMap{width: 100%; height: 300px; iframe{width: 100%; height: 100%;}}} 
}  
    
}





/*---------------------------

/*people

---------------------------*/

.people{}


/**/
.people__Body {}

.people__List{
	padding: 0 2rem;
    gap:38px;

    li{
	width : calc((100% / 3) - 27px);
    overflow: hidden;
        
        figure{
        position: relative;
		aspect-ratio: 3/2;
        overflow: hidden;

        img{ 
    		border-radius: 10px;
			width: 100%;
			height: 100%;
			object-fit: cover; } }
        
        .people__Tx{ 
            h3{ margin-top: 10px; text-align: center;}
            span{display: block; text-align: center; margin-top: 10px;}}} }


/**/
@media (max-width: 959px) { 
 .people__List{gap:16px; padding: 0 0rem;
li{width : calc((100% / 2) - 8px);
figure{aspect-ratio: 3/2;
img{  } }
 .people__Tx{ 
h3{ text-align: center;}
span{display: block; text-align: center; margin-top: 10px;}}}}
}




/*---------------------------

/*schedule

---------------------------*/
.schedule {}
  
/**/
.schedule__Body {
	width : 100%;
}
    



/**/
@media screen and (max-width: 959px){
    
}



/*---------------------------

/*rules

---------------------------*/
.rules {padding: 0 2rem;}
  
/**/
.rules__Body {
	width : 100%;
    border-radius: 10px;
    border: 3px solid #FFE400;
    background-color: #FFFDEA;
	padding: 4rem;

	p{margin-bottom: 2.4rem; padding-left:1em;text-indent:-1em; &:last-child{margin-bottom: 0rem;}}} 
    



/**/
@media screen and (max-width: 959px){

.rules {padding: 0 0rem;}
  
/**/
.rules__Body {border: 2px solid #FFE400;padding: 1.6rem;
p{margin-bottom: 1.6rem; padding-left:1em;text-indent:-1em; &:last-child{margin-bottom: 0rem;}}} 
}








/*---------------------------

/*sub-cmn__Body

---------------------------*/
    
.sub-cmn__Body{position: relative; 
	
	figure{
		position: relative;
		aspect-ratio: 3/2; 
		
		h2{
		width: min(300px,100%);
        position: absolute;
		bottom:0%;
		left:50%;
		transform: translateX(-50%);
			
        background-color: #fff;
        border-top-left-radius: 20px;
  		border-top-right-radius: 20px;
        padding: 2.4rem 1.6rem;
		text-align: center;
		
			span{
				display: block;
				margin-top: 0px;
				text-align: center;}}
		
			.icon-Play{ 
				position:absolute;
				z-index: 1;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);}

			Img{ 
					border-top-left-radius: 20px;
					border-top-right-radius: 20px;
					width: 100%;
					height: 100%;
					object-fit: cover; } }
	

        .sub-cmn__Tx{
            width: 100%;
            border-bottom-left-radius: 20px;
  			border-bottom-right-radius: 20px;
            padding: 4rem;
			
            p{margin-bottom: 24px;} }
		}


/*shop-List
---------------------------*/
.shop-List{
    position: relative; 
    width: 100%;
    margin: 0 auto 24px;
	

    li{
        &:last-child{border-bottom: none;}

        .shop-List__name,.shop-List__adrs,.shop-List__map{
            line-height: 1.4;}
    
        a{display: inline-block; margin: 0 0.2rem;}}
		}


.grid-container {
    display: grid; /* グリッドレイアウトを有効にする */
    grid-template-columns: 1.2fr 1.7fr 0.48fr; /* カラムの比率を設定 */
    border-bottom: 1px solid #DDDDDD;
    padding: 1.6rem;
    gap: 5px; /* カラム間のスペースを設定 */
    width: 100%;}




/**/
@media screen and (max-width: 959px){
/*---*/
.sub-cmn__Body{
figure{
h2{border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 1.6rem 1.6rem 0rem 1.6rem;}
img{ border-top-left-radius: 10px;border-top-right-radius: 10px;} }

.sub-cmn__Tx{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding: 2.4rem;
p{} }}

.icon-Play{ width: 20vw;}

/**/
.shop-List{margin: 0 auto 10px; padding: 0.4rem;
li{.shop-List__name,.shop-List__adrs,.shop-List__map{
line-height: 1.4;}}}

.grid-container {
    grid-template-columns: repeat(1, 1fr); /* 2列表示 */
    gap: 10px; /* カラム間のスペースを設定 */   }
}



/*---------------------------

/*sub-cmn__Body2

---------------------------*/
    
.sub-cmn__Body2{
    position: relative; 
    background-color: #fff; 
    padding: 1.6rem;
    border-radius: 20px;
	
	figure{
		position: relative;
        
            iframe{width: 100%;height: 100%;margin: 0 auto!important;}
            blockquote{margin: 0 auto!important;width: 100%;height: 100%;}
		
			.icon-Play{ 
				position:absolute;
				z-index: 1;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);}

			.sub-cmn__Img{ 
					border-top-left-radius: 20px;
					border-top-right-radius: 20px;
					width: 100%;
					height: 100%;
					object-fit: cover; } }
	

        .sub-cmn__Tx{
        margin-top: 24px;
            width: 100%;
            padding: 0 1.6rem;
            
            h2{margin-bottom: 24px;
                span{display: block;margin-top: 0px;}}
			
            p{} }
		}

.aspect1{aspect-ratio: 16/9; }
.instagram-media{margin-inline: auto !important;min-width: auto !important;max-width: 324px!important;height: 600px!important;}
.tiktok-embed{margin-inline: auto !important;min-width: auto !important;}

/**/

@media screen and (max-width: 768px){
.instagram-media{margin-inline: auto !important;min-width: auto !important;aspect-ratio: 9/16;}
}



/**/
.entry-Area{position: relative; margin: 8rem 0 4rem;}

.entry-Area__Wrap{
    position: relative; 
    max-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 3.2rem;
	
    h3{
        text-align: center;
        margin-bottom: 16px;}

    input{margin-bottom: 24px;}

    a{margin-top: 24px; max-width: 480px; margin: 0 auto;}
    button{margin-top: 24px; max-width: 480px; margin: 0 auto;}


		}


/**/
@media screen and (max-width: 959px){
    
}



/**/
.coment-Sub{position: relative; margin: 8rem 0 4rem;}

.coment-Sub__List{
    position: relative; 
    max-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
	

    li{
        text-align: center;;
        padding: 1.6rem;
        border-bottom: 1px solid #DDDDDD;
        &:last-child{border-bottom: none;}
        
        span{display: block;margin-top: 0px;}}
		}


/**/
@media screen and (max-width: 959px){
.coment-Sub{position: relative; margin: 4rem 0 4rem;}

.coment-Sub__List{
    position: relative; 
    max-width: 680px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
	

    li{
        padding: 1.6rem;
        border-bottom: 1px solid #DDDDDD;
        &:last-child{border-bottom: none;}
        
        span{display: block;margin-top: 0px;}}
		}
    
}




/**/
.top-Contact__Form{
    background-color: #fff;
    border-radius: 10px;
    padding: 8rem;

	dl{margin-bottom: 40px; 
		dt{margin: 16px 0 8px; color:$clr-main; }
		dd{ }} }

.top-Contact__Ttl{
    p{
        margin-bottom: 60px;
        text-align: center;}
}


.pp-scroll {
    height: 240px;
    margin-bottom: 20px;
    padding: 3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    border: #dddddd 1px solid;

    h4{color: #EC5962;}
    p{margin-top: 1rem; padding-left:1em; text-indent:-1em; line-height: 1.8!important;}
}

/**/
@media screen and (max-width: 959px){
.top-Contact__Form{
    background-color: #fff;
    border-radius: 10px;
    padding: 4rem 2rem;

	dl{margin-bottom: 24px; 
		dt{margin: 16px 0 8px; color:$clr-main; }
		dd{ }} }

.top-Contact__Ttl{
    p{
        margin-bottom: 24px;
        text-align: center;}}

.pp-scroll {
    height: 240px;
    margin-bottom: 10px;
    padding: 1rem;

    h4{color: #EC5962;}
    p{margin-top: 1rem; padding-left:1em; text-indent:-1em; line-height: 1.8!important;}
}

}





/**/
.radio-check-btn{
li{margin-top:0px; 
p{} } }

/**/
.check-box-btn{
li{margin-right:16px; 
p{} } }

/**/
.form-2clm{
li{ font-weight: 600; margin-right: 32px;
p{} } }


/**/
.icon-required{
	display: inline-block;
	margin-right: 8px;
	padding: 4px 6px;
	background-color: #F37070;
	text-align: center; 
	font-size: 12px;
	line-height: 12px;
	color:#fff; 
	border-radius: 3px;
    font-weight: 400!important;}



/**/
label {
  position: relative;
  cursor: pointer;
  padding-left: 36px;}

/*radio----------*/

.radioBtn {
  font-weight: 500;
	font-size: 1.6rem;
}

.radioBtn::before,
.radioBtn::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 10px;}

.radioBtn::before {
  background-color: #fff;
  border: 1px solid #DBDBDB;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  left: 10px;
}

.radioBtn::after {
  background-color: var(--clr-yel);
  border-radius: 50%;
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 16px;
}

input:checked + .radioBtn::after {
  opacity: 1;
}

input:checked + .radioBtn::before {
  border: 1px solid var(--clr-yel);
}


/*checkBox----------*/

.checkBox {
  font-weight: 500;
	font-size: 1.8rem;
}

.checkBox::before,
.checkBox::after {
  content: "";
  display: block; 
  position: absolute;
  transform: translateY(-50%);
  top: 55%;}

.checkBox::before {
  background-color: #fff;
  border: 1px solid #DBDBDB;
  width: 20px;
  height: 20px;
  left: 5px;
}

.checkBox::after {
  background-color: var(--clr-yel);
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 11px;
}

input:checked + .checkBox::before { border: 1px solid var(--clr-yel);}

input:checked + .checkBox::after {
  opacity: 1;
    border: 1px solid var(--clr-yel);
}


.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}


@media screen and (max-width: 600px){
.step-Body__Form{margin:0px auto 18px;
.radio-check{margin-bottom: 24px;li{margin-top:8px; } }
dl{margin-bottom: 18px; 
dt{margin-bottom: 4px;  }
dd{ }} }

label {padding-left: 30px;}
label::before,
label::after {top: 10px;}
	
.checkBox::before,
.checkBox::after {top: 14px;}

}




/*! #######################################################################

	input

####################################################################### */

input[type=text],
input[type=password],
textarea,
select{
  background: #fff;
  padding: 1.6rem;
  font-size:1.4rem;
  border:1px solid #DBDBDB;
  transition:border-color .1s linear;
  outline: none; 
	border-radius: 5px!important; 
	overflow: hidden;
color:$clr-main;
}

input[type=password].fit-size {
    width: 100%;
    box-sizing: border-box; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
  background: #fff!important;
  border:solid 1px $clr-sub!important;
  padding: 1.6rem; 
	border-radius: 5px;
    box-shadow: 0px 0px 0px 2px rgba(255, 194, 0, 1); }

/**/
input[type=text]:focus.error-msg,
input[type=password]:focus.error-msg,
textarea:focus.error-msg{
  background: #FDF2F2!important;
  border:solid 1px #EC5962!important;
  padding: 1rem; 
	border-radius: 5px; 
    box-shadow: 0px 0px 0px 0px rgba(255, 194, 0, 1); }

::placeholder {
  color: #A5A5A5;
	font-family:'Noto Sans JP', sans-serif!important; 
	font-weight: 400;
}



input[type=text].ss-size{width:20px;}
input[type=text].s-size{width:60px;}
input[type=text].m-size{width:240px;}
input[type=text].l-size{width:70%;}
input[type=text].ll-size{width:780px;}
input[type=text].fit-size{width:100%;box-sizing:border-box;}
label{margin-right: 10px;}
input[type=text],
input[type=password],
input[type=submit],
input[type=button],
textarea,
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  appearance:none;
  border-radius: 0; }

select{width: 100%;}
select.s-size{width: 25%;}
select.m-size{width: 240px;}
textarea{width:100%; height: 150px; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}

:-moz-any(select):before {
  background-color: #fff; /* this is necessary for overcome the caret default browser */
  pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events  */
  z-index: 1; /* this is necessary for overcome the pseudo element */ }

select{
  background:#fff url(../images/common/icon_arrow.svg) no-repeat 97%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	font-family:'Noto Sans JP', sans-serif!important; }

select::-ms-expand{
  display:none; }

select:focus{
  background:#fff url(../images/common/icon_arrow.svg) no-repeat 97%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	color:#121212;}

.complete{
  background:#ededed!important;
  border:solid 1px #d1d1d1!important; }

.form-title{
  /*margin-bottom:15px;*/
  padding-left:10px;
  font-size:16px;
  color: #777 ;
  min-width: 174px;
  display: inline-block; }

.btnbox{
	margin:100px auto 0; 
	width: 100%; 
	text-align: center;
	
	input{
	margin:0 auto;
		border-radius: 5px;
	font-family:'Noto Sans JP', sans-serif!important;}

    button{
	margin:0 auto;
		border-radius: 5px;
	font-family:'Noto Sans JP', sans-serif!important;}
}


/**/

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
font-family:'Noto Sans JP', sans-serif!important;
}


input[type=submit]{
	outline: none; }

/*
input[type=submit].btn,
input[type=button].btn {
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	
	margin:0 auto;
	padding:1rem 3rem;
	width:90%;
	height:auto;
	font-size: 1.8rem;
	text-align: left;
	color: #fff !important;
	background: $clr-main;
	border-radius: 0px;
	border: none;
	text-align: center;
	text-decoration: none;
	line-height: 2;
	will-change: transition;
	overflow: hidden; 
	border-radius: 100px;}

input[type=submit].btn:hover,
input[type=button].btn:hover { background: #ffb400; border-radius: 100px;}*/


@media screen and (max-width: 600px){
.btnbox{margin:50px auto 0; width: 100%; text-align: center; button{margin:0 auto;}}
input[type=text].m-size{width:100%;}
input[type=text].l-size{width:100%;}
}