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

//  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;
}






/*---------------------------
slider slick------------
---------------------------*/

.mv-Body{
	position:relative;}

.hero-ttl{
	position: absolute;
	width: 40vw;
	top: 50%;
	transform: translateY(-50%);
	right:4%; 
	z-index: 100; img{}}

.hero-ttl2{position:absolute; width: 20vw;bottom:-8%; left:7%; z-index: 100; img{}}

.star-1{position:absolute; width: 20vw;bottom:-8%; right:0%; z-index: 100; img{}}
.star-2{position:absolute; width: 20vw;bottom:-8%; left:3%; z-index: 100; img{}}

.hero-bg{
	position:absolute; 
	bottom:0%; 
	left:0%; 
	z-index: 99; 
	  width: 100%;
	
	img{
		display: block;
	  width: 100%;
	  height: auto;
	  object-fit: cover;}}

/*
.marquee {
    position:absolute; bottom:-3%; left:0; z-index: 10;
    
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  gap: 1rem;
   font-size: clamp(8rem,8vw,18rem)!important;
    font-family: ftH;
    line-height: 0.8;
    color: #fff; 
    mix-blend-mode: overlay;
    opacity: 0.3;}

.marquee-inner {padding-right: 50px;animation: marquee 20s linear infinite;}
@keyframes marquee {0%   { translate: 0; }100% { translate: calc(-100% - 1rem); }}
*/

/**/
.slick-List{
	z-index: 0; 
	width:100%;
	height:53vw; }

.slick-List li{
	width: 100%; 
	height:53vw; 
	position: relative;
	
	img{ width: 100%; height: 100%; object-fit: cover; } }


/*----------*/
@media screen and (max-width: 959px){
.hero-ttl{width: 200px;right:4%; top:55%;transform: translateY(-50%);right:4%; }
.hero-ttl2{position:absolute; width: 20vw;bottom:-8%; left:7%; z-index: 100; img{}}

.slick-List{height:50vh; }
.slick-List li{height:50vh;  }
}


/**/
.wave {overflow: hidden;width: 100%;}
.wave-canvas {display: block;height: 100px;width: 100%;}

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

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


/*---------------------------
/*top-about
---------------------------*/
.top-about{position: relative; height: 100%; background-color: var(--clr-lightblue)}

/*---*/
.top-about__Body {
	height: 70vw;
	
	h2{
		margin-bottom: 5vw;
		text-align: center;}
	
	p{text-align: center; line-height: 2;}
	
	.top-about__Img{
		width: 100%;

    .about-img1{
        position: absolute;
        bottom:45%;
        right:0%;
        width: 20vw;
		img{}}
		
	.about-img2{
        position: absolute;
        bottom:-5%;
        right:20%;
        width: 30vw;
		img{}}
		
	.about-img3{
        position: absolute;
        bottom:25%;
        left:15%;
        width: 15vw;
		img{}}
		
	.about-img4{
        position: absolute;
        top:35%;
        left:15%;
        width: 10vw;
		img{}} } }


/**/

.horizontal-Text{
  display: flex;
  overflow: hidden;
    margin: 0 calc(50% - 50vw);
    width: 99.2vw;
    
    .horizontal-text-tx{
    display: inline-block;
    font-size: 20vw;
    font-weight: 800;
        line-height: 1;
    white-space: nowrap;
    margin-right: 11.5vw; } }

.horizontal-Text2{
  display: flex;
  overflow: hidden;
    
    .horizontal-text-tx2{
    display: inline-block;
    font-size: 20vw;
    font-weight: 800;
        line-height: 1;
    white-space: nowrap;
    margin-right: 11.5vw; } }

.clr-tx1{
    color: var(--clr-lightblue);
    text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF; }


/**/
@media screen and (max-width: 959px){
    .horizontal-Text{
  display: flex;
  overflow: hidden;
    margin: 0 calc(50% - 50vw);
    width: 98vw;
    
    .horizontal-text-tx{
    display: inline-block;
    font-size: 20vw;
    font-weight: 800;
        line-height: 1;
    white-space: nowrap;
    margin-right: 11.5vw; } }
}


/**/
@media screen and (max-width: 959px){
.top-about__Body {height: 100%;
	
h2{margin-bottom: 5vw;}
p{text-align: left; line-height: 2;}
	
.top-about__Img{
	margin-top: 32px;
		width: 100%;
		text-align: center;
	


    .about-img1{
		position: relative;
		display: inline-block;
		text-align: center;
        top:0;
		right:0;
        bottom:0;
        left:0;
        width: 28vw;
		img{}}
		
	.about-img2{
        position: relative;
		display: inline-block;
		text-align: center;
        top:0;
		right:0;
        bottom:0;
        left:0;
        width: 28vw;
		img{}}
		
	.about-img3{
        position: relative;
		display: inline-block;
		text-align: center;
        top:0;
		right:0;
        bottom:0;
        left:0;
        width: 28vw;
		img{}}
		
	.about-img4{
        display: none;
		img{}} } }
}






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

/*top-activity

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

/**/

.wrapper {
    overflow: hidden;
	
    position: relative;
    height: 100vh; }

.container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
}


/**/
@media (max-width: 959px) { 
.wrapper {position: relative;height: auto; }

.container {
  position: relative;
  display: block;
  align-items: center;
  height: auto;
}}



/**/
.section {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: min(100vw,1400px);
  height: 100%;
	padding: 0 4rem;
}

/**/
@media (max-width: 959px) { 
.section {
	padding: 0 0rem;
    position: relative;
	  flex-shrink: 0;
	  display: block;
	  align-items: center;
	  width: 100%;
	 height: auto;}   
}




/*panel-1
-----------------------------*/
.panel-1 {position: relative;width: 100%;height: 100%;}

/**/

.panel-1__Body {
	width: 100%;
	padding: 14rem 4rem 4rem 0rem;

	.panel-1__img1{width: 40vw; img{width: 100%;}}
    
    .panel-1__Tx{
		position: relative;
		width: calc(100% - 43vw);
		padding-top: 8vw;
		
		h2{margin-bottom: 0px; margin-left: -10px;}
		
		span{
        display: block;
        color: var(--clr-blue); }
    
   		p{margin-top: 40px; }
	
		.panel-1__img2{
			width: 23vw; 
			position: absolute;
			right:-5%;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1; img{}} } }


/**/
@media (max-width: 959px) {
.panel-1 {position: relative;width: 100%;height: auto; margin-bottom: 32px;}

.panel-1__Body {width: 100%;padding: 0rem;
.panel-1__img1{width: 100%; img{width: 100%;}}
.panel-1__Tx{width: 100%;padding-top: 10px;
h2{margin-bottom: 0px; margin-left: 0px;}
span{display: block; color: var(--clr-blue); }
p{margin-top: 10px; }
.panel-1__img2{width: 30vw; right:0%;} } }  
    
}




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

/*top-Message

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

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

        .top-Message__Main{
            text-align: center; img{ border-radius: 20px; width: 100%;}}}
    
    
    .top-Message__Tx{
        position: relative;
        width: 55%;
	
        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;}}}
	
	
		figure{position: absolute; right:0; bottom:-150px; img{width: 180px;}}
	
	
	} }


/**/
@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;}}}
	
figure{position: absolute; right:0; bottom:-30px; img{width: min(100px,15vw);}}	
	
	
	}
    }}





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

/*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: 48px;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:60px;
			
	        li{
				display: flex;
				align-items: center; /*上下*/
				justify-content: center;/*中央*/
				/*width : calc((100% / 4) - 30px); */
				text-align: center; 
				line-height: 1.4;
			
				a{display: block;text-decoration: underline; transition: 0.25s;}}}
    } }

.col1{flex-basis: 100%;}
.col2{flex-basis: calc(45% - 30px);}
.col4{flex-basis: calc(23% - 30px);}


.top-Sponcor__Box-List a:hover{text-decoration: none;}


/**/
@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: 24px;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:30px;
li{width : calc((100% / 2) - 10px); text-align: center;}}} }  
	
.col1{flex-basis: calc(45% - 10px);}
.col2{flex-basis: calc(45% - 10px);}
.col4{flex-basis: calc(45% - 10px);}
    
}
    
    









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

/*top-Contact

---------------------------*/
    
.top-Contact{position: relative;}

/*---*/
.top-Contact__Form {
	position: relative;
    margin: 0 auto;
    max-width: 786px;
    
    .top-Contact__Ttl{
        text-align: center;
        margin-bottom: 80px;
    
    h3{margin-bottom: 24px;
        text-align: center;
        font-weight: 700;}
    
        p{text-align: center;}} }

/**/
@media screen and (max-width: 768px){
.top-Contact__Form {
.top-Contact__Ttl{text-align: left;margin-bottom: 32px;
h3{margin-bottom: 16px;text-align: left;}
p{text-align: left;}} }
}



/*home-Form
---------------------------*/	
.top-Contact__Form{

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


/**/
.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: 600;
	font-size: 1.4rem;
}

.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: $clr-sub;
  border-radius: 50%;
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 16px;
}

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

input:checked + .radioBtn::before {
  border: 1px solid $clr-sub;
}


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

.checkBox {
  font-weight: 600;
	font-size: 1.4rem;
}

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

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

.checkBox::after {
  background-color: $clr-sub;
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 11px;
}

input:checked + .checkBox::before { border: 1px solid $clr-sub;}

input:checked + .checkBox::after {
  opacity: 1;
    border: 1px solid $clr-sub;
}


.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: 10px;}

}




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

	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 {
  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%;}
}


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

/*thanks

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

.header-Thanks{
	padding: 2rem 0 0 0; 
	width : 100% ; 
	/*background: rgba(255, 255, 255, 1);*/
	z-index: 101;

	position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%); 

	h1{
    text-align: center;
	
		a{
			display: block; 
			max-width:140px; 
			margin:0 auto; 
			text-align: center; 
			img{text-align: center}} } }

.thanks{
	position: relative;
	margin:0 auto ;
	padding:10vw 2rem ;
	max-width: 1280px;
	text-align: center;
	
	h2{margin-bottom: 10px;text-align: center;}
	p{margin-bottom: 10px;text-align: center;}
	a{text-align: center; margin: 32px auto 0;}
}