@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

html{
	
}



body{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 600;
	line-height:200%;
	font-size:clamp(18px, 2.3vw, 20px);
	line-height:1.8em;
	margin:0;
	background:#fff;
}


#main{
	margin:0;	
}



.fw-400{
	font-weight:600;
	font-size:clamp(18px, 2.3vw, 20px);
	line-height:1.8em;
}


.wrap{
	width:100%;
}

:root {
	--black:#2c2a2a;
	--blue: #00009c;
	--blue2:#00007d;
	--yellow:#ffff6a;
	--gray:#f5f5f5;
	--radius:30px;
	--content-width:1280px;
	--content-width-s:960px;
	
	--wide: 1440px;
    --middle: 960px;
}




.svg-icon{
	display: none;
}

#breadcrumb,
.tagline,
.fdt-logo .footer-bottom-logo{
	display:none;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
	align-content
}


.e_font{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}

.blue_t{
	color:var(--blue);
}

.white_t{
	color:#fff;
}
.yellow_t{
	color:var(--yellow);
}

.btn_fade{
	transition:0.2s;
}

.btn_fade:hover{
	opacity:0.5;
}


.small{
	font-size:80%;
}

.red{
	color:var(--red);
}


p{
	margin-top:1em;
	line-height:2em;
}

.big{
	font-size:150%;
}

.text_center{
	text-align:center;
}


img.responsive{
	width:100%;
}


img.square{
	aspect-ratio:1 / 1;
	object-fit:cover;
}

hr{
	border:none;
	padding:40px 0;
}

#content{
	margin-top:0;
}

.text_center{
	text-align:center;
}
@media all and (max-width: 782px) {
	
	.text_center.sp_text_left{
		text-align:left;
	}
}




.text_right{
	text-align:right;
}


.e_font{
	font-family: "anton", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/*----------------------
 * scroll_view
 * ----------------------*/

.scroll_view{
	opacity:0;
	transition:0.5s;
	filter: blur(8px);
}
.scroll_view.view{
	opacity:1;
	filter: blur(0);
}





@media all and (min-width: 1024px) {
	.sp{
		display:none;
	}
	.pc{
		display:block;
	}
}

@media all and (max-width: 1023px) {
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
	
}

/*--------------------------
 * loding
 * -----------------------*/
#loding{
	background:#fff;
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	z-index:1000;
	
	animation: loding_logo_back 1s forwards;
	animation-delay: 0.5s;
}


#loding #loding_logo{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#loding #loding_logo .inner{
	position:relative;
}


#loding #loding_logo svg{
	fill:#00009c;
	
	animation: loding_logo_svg 1s forwards;
	animation-delay: 0.5s;
}


@keyframes loding_logo_svg {
	from {fill:#00009c; margin-top:0;}
	to {fill:#fff; margin-top:-50px;}
}


@keyframes loding_logo_back {
	from {background:#fff; opacity:1; z-index:1000;}
	to {background:#00009c; opacity:0; z-index:-1000;}
}



/*------------------------------------
 * section.content
 -----------------------------------*/

article.content_wide{
	max-width:var(--wide);
	width:95%;
	margin:5em auto;
	padding:0;
}

article.content_middle{
	max-width:var(--middle);
	width:100%;
	margin:10em auto;
}

article.content_wide .inner{
	padding-bottom:150px;
}


article.content_wide .inner:last-child{
	padding-bottom:0;
}

@media all and (max-width: 1366px) {
	article.content_wide,
	article.content_middle{
		width:calc(100% - 5em - 5em);
		margin:5em auto;
	}
}


@media all and (max-width: 1024px) {
	article.content_wide,
	article.content_middle{
		width:calc(100% - 40px);
	}
}

@media all and (max-width: 782px) {
	article.content_wide .inner{
		padding-bottom:50px;
	}
}


/*------------------------------------
 * table1
 -----------------------------------*/
.table1{
	margin:1em 0;
}
.table1 table{
	text-align:left;
}
.table1 table th{
	width:200px;
}
@media all and (max-width: 767px) {
	.table1 td,
	.table1 th{
		display:block;
	}
	.table1 table th{
		width:100%;
	}
	
	.table1 table th{
		background:var(--cocoon-xxx-thin-color);
	}
	.table1 table tr:nth-of-type(2n+1){
		background:none;
	}
}



/*------------------------------------
 * btn_p
 -----------------------------------*/

.btn_p{
	margin-top:1em;
	margin-bottom:1em;
}
.btn_p a{
	text-decoration:none;
	padding:14px 25px 14px 30px;
	border-radius:30px;
	transition:0.2s;
	font-size:clamp(18px, 2.3vw, 20px);
	
}

.btn_p svg{
	width:28px;
	height:15px;
	margin-left:15px;
	transition:0.2s;
}
.btn_p a span{
	position:relative;
}
.btn_p a span:after{
	display:block;
	content:"";
	width:34px;
	height:34px;
	border-radius:50%;
	
	position:absolute;
	right:-65px;
	top:50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.btn_p a:hover{
	padding-right:14px;
}
.btn_p a:hover svg{
	margin-left:45px;
}


/*yellow_border*/
.btn_p.yellow_border a{
	border:var(--yellow) solid 1px;
}



/*blue_btn*/
.btn_p.blue_btn a{
	background:var(--blue);
}
.btn_p.blue_btn a span:after{
	border:var(--yellow) solid 1px;
}
.btn_p.blue_btn a{
	color:var(--yellow);
}
.btn_p.blue_btn svg{
	fill:var(--yellow);
}

.btn_p.blue_btn a:hover{
	background:var(--yellow);
	color:var(--blue);
}

.btn_p.blue_btn a:hover svg{
	margin-left:45px;
	fill:var(--blue);
}

.btn_p.blue_btn a:hover span:after{
	border-color:var(--blue);
}



/*yellow_btn*/
.btn_p.yellow_btn a{
	background:var(--yellow);
}
.btn_p.yellow_btn a span:after{
	border:var(--blue) solid 1px;
}
.btn_p.yellow_btn a{
	color:var(--blue);
}
.btn_p.yellow_btn svg{
	fill:var(--blue);
}

.btn_p.yellow_btn a:hover{
	background:var(--blue);
	color:var(--yellow);
}

.btn_p.yellow_btn a:hover svg{
	margin-left:45px;
	fill:var(--yellow);
}
.btn_p.yellow_btn a:hover span:after{
	border-color:var(--yellow);
}



.btn_p a:hover span:after{
	border-color:var(--blue);
}


/*small_btn*/
.btn_p.small_btn a{
	padding-left:0;	
}

.btn_p.small_btn a:hover{
	background:var(--blue);
	color:var(--yellow);
}

.btn_p.small_btn a:hover svg{
	fill:var(--yellow);
}

.btn_p.small_btn a:hover span:after{
	border-color:var(--yellow);
}



/*-----------------------------------
 * form
 * ---------------------------------*/
input[type=submit]{
	font-size:clamp(26px, 2.3vw, 26px);
	width:80%;
	margin:0 10%;
	text-align:center;
	border:var(--blue) solid 1px;
	border-radius:40px;
	background:var(--blue);
	color:var(--yellow);
	font-weight:900;
	transition:0.2s;
}

input[type=submit]:hover{
	background:var(--yellow);
	color:var(--blue);
}



/*------------------------------------
 * h
 -----------------------------------*/

h2.small_h2{
	font-size:clamp(60px, 2.3vw, 60px);
	font-family: "anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom:1em;
}


h2.section_h2{
	font-weight:900;
	font-size:clamp(16px, 2.3vw, 24px);
	padding-bottom:1em;
	
	background:none;
}

.article h2{
	padding:0;
}

h2.section_h2 span{
	display:block;
	font-size:clamp(150px, 2.3vw, 150px);
	line-height:1em;
}


h2.big{
	font-size:clamp(25px, 2.3vw, 60px);
	line-height:1.2em;
	font-weight:900;
}

h3.section_h3{
	padding:0;
	border:none;
	margin-top:2em;
	margin-bottom:1em;
	font-size:clamp(18px, 2.3vw, 24px);
}


h4.section_h4{
	padding:0;
	border:none;
	font-size:clamp(20px, 2.3vw, 50px);
	font-weight:900;
}


@media all and (max-width: 782px) {
	
	h2.section_h2 span{
		font-size:clamp(70px, 2.3vw, 80px);
	}
}





/*--------------------------
 * gray_box 
 * -----------------------*/
.gray_box {
	background:var(--gray);
}



/*--------------------------
 * radius_box 
 * -----------------------*/
.radius_box {
	border-radius:1em;
}




/*--------------------------
 * padding_box 
 * -----------------------*/
.padding_box {
	padding:2em;
}


@media all and (max-width: 1023px) {
	.padding_box {
		padding:1em;
	}
}





/*--------------------------
 * yellow_box
 * -----------------------*/
.yellow_box{
	background:var(--yellow);
}


/*--------------------------
 * blue_box
 * -----------------------*/
.blue_box{
	background:var(--blue);
	color:#fff;
	padding-bottom:1px;
}


/*--------------------------
 * white_box
 * -----------------------*/
.white_box{
	background:#fff;
	color:var(--blue);
}



/*--------------------------
 * border_box
 * -----------------------*/
.border_box{
	border:var(--gray) solid 1px;
}


/*-------------------------
 * .flex_box
 * ----------------------*/
.flex_box{
	display:flex;
	justify-content: space-between;
	gap:1em;
}

.flex_box .box{
	width:100%;
}

.flex_box.flex_2,
.flex_box.flex_3,
.flex_box.flex_4{
	flex-wrap: wrap;
	justify-content: flex-start;
}

.flex_box.flex_2 .box{
	width:calc((100% - 1em) / 2);
}

.flex_box.flex_3 .box{
	width:calc((100% - 1em - 1em) / 3);
}

.flex_box.flex_4 .box{
	width:calc((100% - 1em - 1em - 1em) / 4);
}




@media all and (max-width: 782px) {
	.flex_box.sp_colmn{
		flex-flow: column;
	}
	

	.flex_box.flex_2 .box,
	.flex_box.flex_3 .box,
	.flex_box.flex_1_sp .box{
		width:100%;		
	}
	.flex_box.flex_2_sp .box,
	.flex_box.flex_4 .box{
		width:calc((100% - 1em) / 2);
	}
	
}





/*-------------------------
 * .grid_box
 * ----------------------*/

.grid_box{
	display:grid;
}

.grid_box.grid_3{
	grid-template-columns: 1fr 1fr 1fr;
}






/*-------------------------
 * .notes_box
 * ----------------------*/
.notes_box{
	font-size:80%;
}

.notes_box p:first-child{
	margin-top:0;
}



/*-------------------------
 * table_box
 * ------------------------*/
.table_box table{
	border:none;
    width: 100%;
    font-size: 120%;
    text-align: left;
	
	font-size:1em;
}
.table_box table tr{
	background:none;
}
.table_box table th{
	background:none;
	width:200px;
}

.table_box table th,
.table_box table td{
	border:none;
	border-bottom:var(--blue) solid 1px;
}

.table_box table iframe{
	width:100%;
	height:400px;
}

@media all and (max-width: 782px) {
	.table_box table th,
	.table_box table td{
		display:block;
	}
	
	.table_box table th{
		font-size:110%;
		width:100%;
	}
	.table_box table td{
		border:none;
		padding-bottom:3em;
	}
	

	.table_box table iframe{
		width:100%;
		height:auto;
		aspect-ratio:4 / 3;
	}
}



/*--------------------------
 * wrapper 
 * -----------------------*/
#wrapper{
	padding:0;
}
#wrapper.index .blue_box{
	padding-top:1px;
}

/*---------------------------
 * topic_box
 * ------------------------*/

.topic_box{
	margin-top:40px;
	
	margin-bottom:160px;
}
.topic_box a{
	color:var(--blue);
	text-decoration:none;
}

.topic_box .box:nth-of-type(2){
	margin-top:-80px;
}

.topic_box .box:nth-of-type(3){
	margin-top:-180px;
}



.topic_box .date_box{
	margin-top:-1.5em;
	/*position:relative;*/
	margin-left:10px;
	margin-right:10px;
}

.topic_box .date_box .label{
	position:absolute;
	top:0;
	left:0;
}

.topic_box .date,
.topic_box .title{
	margin:0;
}

.topic_box .title{
	margin-top:0.5em;
	line-height:1.8em;
	height:3.6em;
	overflow:hidden;
	transition:3s;
	width:0;
}


.scroll_view.view .topic_box .date span,
.scroll_view.view .topic_box .title span{
	background:var(--yellow);
}

.scroll_view.view .topic_box .date,
.scroll_view.view .topic_box .title{
	width:100%;
}

.topic_box .date span{
	font-size:smaller;
}


.topic_box .thum_p{
	/*margin:10px;*/
	position:relative;
	overflow:hidden;
	z-index:-2;
	aspect-ratio:4 / 3;
}



.topic_box .thum_p img{
	aspect-ratio:4 / 3;
	object-fit:cover;
	transition:0.2s;
	width:100%;
	height:100%;
}

.box .scroll_view .thum_p:after{
	background:var(--blue);
	display:block;
	content:"";
	width:100%;
	height:100%;
	
	position:absolute;
	top:0;
	left:0;
	transition:1s;
}


.box .scroll_view.view .thum_p:after{
	width:0;
}

.topic_box a:hover .thum_p img{
	transform:scale(1.2,1.2);
	filter: grayscale(100%);
}




@media all and (max-width: 782px) {
	
	.topic_box .box:nth-of-type(2){
		margin-top:0;
	}

	.topic_box .box:nth-of-type(3){
		margin-top:0;
	}
	

}



/*--------------------------
 * label_ 
 * -----------------------*/
.label{
	color:var(--black);
	padding:0 1em;
	margin-right:1em;
}

.label_news,
.label_NEWS{
	background:#ffff6a;	
}

.label_media,
.label_MEDIA{
	background:#6afdff;	
}


.label_event,
.label_EVENT{
	background:#ff6ade;	
}







/*--------------------------
 * card 
 * -----------------------*/

.card{
	position:relative;
}


@media all and (max-width: 782px) {
	.card{
	}
	.card a{
		display:flex;
		gap:10px;
	}
	
	.card .date_box{
		margin-top:0;
		flex:1;
	}
	
	.card .thum_p{
		margin:0;
	}
	
	.card .thum_p{
		width:150px;
	}
}




/*-------------------------
 * contact_box
 * -----------------------*/

.contact_box .content{
	max-width:640px;
	width:100%;
	margin:5em auto;
}

.contact_box .content .box{
	width:100%;
	height:calc(250px - 10px -　10px);
	text-align:center;
	background:var(--orange);
	padding:10px;
	border-radius:1em;
	margin-bottom:2em;
}

.contact_box .content .box:last-child{
	margin-bottom:0;
}

.contact_box .content .box a{
	background:var(--orange);
	color:#fff;
	width:100%;
	height:100%;
	display:block;
	border:#fff solid 1px;
	text-decoration:none;
	border-radius:1em;
	font-weight:600;
	padding:1em;
	position:relative;
}

.contact_box .content .box a span{
	display:block;
	line-height:1em;
}

.contact_box .content .box a span.text{
	padding-bottom:1em;
}

.contact_box .content .box a span.tel{
	font-size:clamp(50px, 4vw, 80px);
	padding-bottom:0.2em;
}

.contact_box .content .box a span.mail{
	font-size:clamp(24px, 3vw, 40px);
}



.contact_box .content .box.mail{
	transition:.2s;
}

.contact_box .content .box.mail:hover{
	opacity:0.5;
}


@media all and (max-width: 767px) {
	.contact_box .content{
		width:90%;
	}
	.contact_box .content .box{
		margin-bottom:1em;
	}
}





/*--------------------------
 * header-container
 * -----------------------*/

.mobile-header-menu-buttons{
	display:none;
}


#header-container{
	width:100%;
}
#header-container #header-container-in{
	width:100%;
}
.header-container-in.hlt-top-menu .navi{
	background:none;
}


.header-container-in.hlt-top-menu.hlt-tm-small .logo-header,
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header img{
	height:100%;
	max-height:106px;
}



#header-in .logo a{
	padding:0;
	margin:0;
	text-align:left;
}

#header-in .logo a span{
	width:100%;
}

#header-in .logo a span img{
	max-height:106px;
	max-width:200px;
}
#header{
	width:20%;
	max-width:260px;
}

.logo-header{
	position:fixed;
	top:10px;
	left:30px;
	z-index:2;
}
.logo-header a{
	transition:0.2s;
}

.logo-header a:hover{
	opacity:0.5;
}

@media all and (max-width: 1023px) {
	.logo-menu-button.menu-button{
		display:none;
	}
	#header-container #header-container-in{
		padding:0;
	}
	.logo{
		position:fixed;
		top:0;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index:1;
	}
	
	.header-container-in.hlt-top-menu.hlt-tm-small .logo-header{
		max-height:50px;
		z-index:100;
	}
	
	#header-in .logo a span img{
		max-height:50px;
		padding:5px;
	}
	
}



/*----------------------------
 * menu_box
 * --------------------------*/


h1.logo {
	display:none;
}
#menu_box{
	position:fixed;
	top:0;
	left:0;
	z-index:100;
}
#menu_box h1 {
	background:var(--blue);
	padding:20px;
	transition:0.2s;
}



#menu_box h1 svg{
	fill:#fff;
}
#menu_box #menu_btn {
	position:fixed;
	top:0;
	right:0;
	background:var(--blue);
	padding:27px 20px;
	width:100px;
	height:100px;
	cursor:pointer;
	transition:0.2s;
}
#menu_box #menu_btn p{
	position:relative;
	margin:0;
	width:60px;
	height:46px;
}

#menu_box #menu_btn p span{
	display:block;
	background:#fff;
	width:100%;
	height:6px;
	transition:0.2s;
}

#menu_btn p span:nth-child(1){
	position:absolute;
	top:0;
	left:0;
}

#menu_btn p span:nth-child(2){
	position:absolute;
	top:20px;
	left:0;
}

#menu_btn p span:nth-child(3){
	position:absolute;
	bottom:0;
	left:0;
}



#menu_box #menu_btn:hover{
	background:var(--yellow);
}


#menu_box #menu_btn:hover p span{
	background:var(--blue);
}


#menu_box .link_box{
	height:100vh;
	width:600px;
	position:fixed;
	top:0;
	right:0;
	background: rgba(0, 0, 156, 0.8);
	
	padding:160px 40px;
	display:none;
}

#menu_box .link_box ul{
	margin:0;
	padding:0;
}

#menu_box .link_box ul li{
	list-style:none;
	padding:0;
	margin:0;
}

#menu_box .link_box ul li a{
	display:block;
	color:#fff;
	text-decoration:none;
	padding:20px;
	transition:0.2s;
	line-height:1em;
}

#menu_box .link_box ul li a:hover{
	color:var(--yellow);
}


#menu_box .link_box ul.main_menu li a{
	font-size: clamp(50px, 2.3vw, 50px);
    font-family: "anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 0.8em;
}

#menu_box .link_box ul.main_menu li a span{
	display: block;
    font-size: clamp(16px, 2.3vw, 24px);
    font-weight: bold;
	font-family:"Noto Sans JP", sans-serif;
}


#menu_box ul,
#menu_box .address_box{
	/*display:none;*/
}


#menu_box .link_box .flex_box{
	flex-flow:column;
}

@media all and (max-width: 1024px) {
	#menu_box h1 svg{
		width:150px;
		height:75px;
	}
}


@media all and (max-width: 782px) {
	
	#menu_box h1{
		padding:10px;
	}
	
	#menu_box h1 svg{
		width:100px;
		height:50px;
	}
	
	#menu_box #menu_btn{
		zoom:0.5;
	}
	
	#menu_box .link_box{
		width:100%;
		padding:80px 20px;
	}
	
	
	#menu_box .link_box ul li a{
		padding:10px 20px;
	}
}





/*------------------------
 * container
 * ----------------------*/
#container{
	
}


/*-------------------------
 * movie
 ------------------------*/




/* wrap */
#main_img{
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
}
.hero {
  position: relative;
}

/* video */

.video-box {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
.video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 101%;
	min-height: 101%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width:none;
	z-index:-1;
}

/* overlay */

.overlay::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
}

/* text */

.text-box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}



#mask{
	margin:0;
	width:100%;
}
#mask svg,
#mask img{
	margin:0;
	width:100%;
}

@media all and (max-width: 782px) {
	#mask{
		padding-top:50px;
	}
	
	#mask:before{
		display:block;
		content:"";
		background:var(--blue);
		width:100%;
		height:50px;
		
		margin-top:-50px;
	}
}

/*------------------------
 * wrapper
 * -------------------
#wrapper.index{
	margin-top:80vh;
}
--*/

/*-------------------------
 * .content-in
 * ----------------------*/
.content-in{
	display:block;
	width:100%;
}






/*--------------------------
 * main
 * ------------------------*/
#main{
	width:100%;
	padding:0;
	border:none;
}

#main header h1{
	padding:5em 10%;
}

@media (max-width: 1023px) {

	#main header h1{
		padding:10%;
	}
}




/*-----------------
 * slider-container
 * --------------------*/
@keyframes horizontal-animation {
  from {
	  transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.slider-container {
	display: flex;
	overflow: hidden;
	padding-bottom:80px;
}

.slider-wrapper {
	display: flex;
	animation: horizontal-animation 60s linear infinite;
	align-items: center;
}

.slide {
	width: 400px;
	margin-right: 40px;
}

.slide img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	object-fit:cover;
}

.slider-container .slide.type1 img{
	aspect-ratio:1 / 1;
}

.slider-container .slide.type2 img{
	aspect-ratio:3 / 4;
}
.slider-container .slide.type3{
	zoom:0.7;
}
.slider-container .slide.type3 img{
	aspect-ratio:3 / 4;
	margin-bottom:20%;
}

.slider-container .slide.type5{
	zoom:0.7;
}
.slider-container .slide.type5 img{
	aspect-ratio:9 / 16;
	margin-bottom:20%;
}




@media (hover: hover) {
	.slider-container:hover .slider-wrapper {
		animation-play-state: paused;
	}
}



@media all and (max-width: 782px) {
	.slider-container{
		zoom:0.5;
	}
}





/*----------------------
 * svg_back_box
 * ------------------

.svg_back_box{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:160px;
}
.svg_back {
	position:relative;
	background:var(--blue);
}
.svg_back svg{
	width:100%;
	height:auto;
	height:160px;
}

.svg_back .svg_p{
	margin:0;
}

.svg_back .svg1{
	fill:#eb3f3f;
	height:160px;
}



.svg_back .svg2{
	fill:#fff;
	position: absolute;
    top: 20px;
    left: 0;
	width:100%;
}

.svg_back .svg2{
}

--*/



/*----------------------
 * text_loop
 * -----------------*/
.text_loop{
	overflow: hidden;
	position: relative;
	width: 100%;
	margin-inline: auto;
	opacity:0.2;
}
.loop {
	animation: loop 80s linear infinite;
	width: 100%;
	font-family: "anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:16vw;
	line-height:16vw;
	margin:0;
	padding-top:100px;
	padding-bottom:100px;
	
	background: linear-gradient(5deg, #79deda 0%, #a2b9e5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}
.loop2{
	position: absolute;
	top: 0; left: 0;
	animation: loop 80s -40s linear infinite;
	
	word-break: break-all;
}

@keyframes loop {
	0%{
		transform: translateX(100%);
	}
	100%{
		transform: translateX(-100%);
	}
}


@media all and (max-width: 782px) {
	.loop{
		padding-top:50px;
		padding-bottom:50px;
	}
}





/*-------------------------
 * index_white_box
 * ------------------------*/

.index_white_box{
	position:relative;
	padding-bottom:180px;
}

.index_white_box .content_wide{
	margin:0 auto;
	z-index:10;
	position:relative;
}

.index_white_box .content_wide .service{
	padding-top:200px;
}

@media all and (max-width: 782px) {

	.index_white_box .content_wide .service{
		padding-top:100px;
	}
}






/*-------------------------
 * service
 * ------------------------*/

.cover_line{
	background:url("https://test.jill-logos.jp/syunan-sports/wordpress/cover_line.svg") top center no-repeat;
	background-size:auto;
}

.service .header_box{
	aspect-ratio:5 / 2;
	width:100%;
	height:auto;
	position:relative;
}

.service .service_box {
	margin-bottom:40px;
}

.service .service_box:last-child{
	margin-bottom:0;
}
.service .service_box .header_box .text_box{
	position:absolute;
	bottom:20px;
	left:20px;
	width:calc(100% - 20px - 20px);
}

.service .glove .header_box{
	background:url("https://test.jill-logos.jp/syunan-sports/wordpress/wp-content/uploads/img_wide_store_1.webp") center no-repeat;
	background-size:cover;
}

.service .on .header_box{
	background:url("https://test.jill-logos.jp/syunan-sports/wordpress/wp-content/uploads/img_wide_store_2.webp") center no-repeat;
	background-size:cover;
}

.service .header_box h3 span,
.service .header_box .text_p span{
	background:var(--blue);
	color:#fff;
	padding:0.2em 0.5em;
}

.service .header_box h3{
	margin-bottom:1em;
}
.service .header_box h3 span{
	font-size:clamp(18px, 2.3vw, 30px);
	font-weight:900;
}

.service .header_box .text_p {
	margin-top:0.5em;
}


.service .flex_box{
	position:relative;
	padding:40px;
}

.service .flex_box:before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:240px;
	background:var(--blue);
}

.service .flex_box .box{
	/*border:#fff solid 1px;*/
	background:var(--blue);
	color:#fff;
}
.service .flex_box .thum_p{
	margin:0;
}

.service .flex_box .text_box{
	padding:20px;
}

.service .flex_box h4{
	font-size:clamp(18px, 2.3vw, 30px);
	font-weight:900;
}

@media all and (max-width: 782px) {
	.service .service_box{
		width: calc(100% + 40px);
    	margin-left: -20px;
	}
	.service .header_box{
		aspect-ratio:1 / 2;
	}
	
	.service .flex_box{
		padding:20px;
	}
	.service .header_box .text_p{
		font-size:80%;
	}
}


/*-------------------------
 * concept
 * ------------------------*/
.concept {
	position:relative;
	padding-bottom:1em;
}
.concept .thum_p{
	margin:0;
	padding:0 100px;
}

.concept .grid_box{
	grid-template-columns: 1fr 1fr ;
}
.move_text .move_text{
	/*margin-top:-200px;
	position: absolute;
    bottom: 20%;*/
	flex:1;
	margin-top:-150px;
}

.move_text .txt {
    display: flex;
    overflow: hidden;
}


.move_text .txt p {
    color: var(--blue);
    font-weight: bold;
    margin: 0;
	line-height:1em;
	/*font-size:clamp(120px, 8vw, 250px);*/
	font-size:14rem;
	font-family: "anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	
	transform: translateY(2em);
}


.move_text.view .txt p{
    transform: translateY(2em);
    animation: textanimation 0.5s forwards;
}



/* 1文字目 */
.move_text .txt p:nth-child(1) {
    animation-delay: 1.2s
}
/* 2文字目 */
.move_text .txt p:nth-child(2) {
    animation-delay: 1.4s
}
/* 3文字目 */
.move_text .txt p:nth-child(3) {
    animation-delay: 1.6s
}
/* 4文字目 */
.move_text .txt p:nth-child(4) {
    animation-delay: 1.8s
}
/* 5文字目 */
.move_text .txt p:nth-child(5) {
    animation-delay: 2s
}
/* 6文字目 */
.move_text .txt p:nth-child(6) {
    animation-delay: 2.2s
}
/* 7文字目 */
.move_text .txt p:nth-child(7) {
    animation-delay: 2.4s
}
/* 8文字目 */
.move_text .txt p:nth-child(8) {
    animation-delay: 2.6s
}
/* 9文字目 */
.move_text .txt p:nth-child(9) {
    animation-delay: 2.8s
}
/* 10文字目 */
.move_text .txt p:nth-child(10) {
    animation-delay: 3s
}
/* 11文字目 */
.move_text .txt p:nth-child(11) {
    animation-delay: 3.2s
}
/* 12文字目 */
.move_text .txt p:nth-child(12) {
    animation-delay: 3.4s
}
/* 13文字目 */
.move_text .txt p:nth-child(13) {
    animation-delay: 3.6s
}
/* 14文字目 */
.move_text .txt p:nth-child(14) {
    animation-delay: 3.8s
}


@keyframes textanimation {
    0% {
        transform: translateY(2em);
    }

    100% {
        transform: translateY(0);
    }
}


.concept .text_box{
	/*width:500px;*/
	margin-left:auto;
	/*margin-top:-250px;*/
	padding-left:20px;
}





@media all and (max-width: 1366px) {
	.concept .txt p{
		font-size:13vw;
	}
}


@media all and (max-width: 782px) {
	.concept{
		padding-bottom:0;
	}
	.concept .thum_p{
		padding:0;
		width:calc(100% + 40px);
		margin-left:-20px;
	}
	
	.concept .grid_box{
		display:block;
	}
	.move_text .txt p{
		font-size:22vw;
	}
	
	.concept .move_text{
		margin-top:-50px;
	}
	.concept .text_box{
		padding-left:0;
	}
}


/*-------------------------
 * store
 * ------------------------*/

.store .flex_box{
	gap:0;
	padding-top:40px;
	padding-bottom:40px;
}

.store .flex_box.flex_3 .box{
	width:calc((100%) / 3);
	/*margin-top:100px;*/
}
/*
.store .flex_box.flex_3 .box:nth-child(2),
.store .flex_box.flex_3 .box:nth-child(5){
	margin-top:70px;
}
*/
.store .flex_box.flex_3 .box .thum_p{
	margin:0;
}

.store .map iframe{
	width:100%;
	height:450px;
}

@media all and (max-width: 782px) {
	
	/*.store .flex_box.flex_3 .box{
		margin-top:0;
	}*/
	
	.store .map{
		width:calc(100% + 40px);
		margin-left:-20px;
	}
	
	.store .map iframe{
		aspect-ratio:4 / 3;
		height:auto;
	}
}



/*-------------------------
 * brand
 * ------------------------*/


.brand_list{
	max-width: 960px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 0;
}


.brand_list ul {
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    place-items: center;
}

.brand_list ul.pickup li {
    width: 20%;
	padding: 0;
    list-style: none;
}

.brand_list ul li a {
    display: block;
    line-height: 0;
    padding: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 10px;
}
.brand_list ul li a img {
    border-radius: 50%;
}


.brand_list ul {
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    place-items: center;
}
.brand_list ul li {
    width: calc(100% / 7);
    padding: 0;
    list-style: none;
}


@media all and (max-width: 782px) {
	.brand_list{
		padding:40px 0;
		width:100%;
	}
	.brand_list ul.pickup li{
		width:calc(100% / 3);
	}
	
	.brand_list ul li{
		width:calc(100% / 4);
	}
}


/*-------------------------
 * news
 * ------------------------*/

.news .box:first-child{
	width:300px;
}

@media all and (min-width: 783px) {
	.news .section_h2 span{
		font-size:clamp(90px, 2.3vw, 90px);
	}
}

.news ul.news_list{
	margin:0;
	padding:0;
}

.news ul.news_list li{
	margin:0;
	padding:0;
	list-style:none;
	border-bottom:#fff solid 1px;
	padding-bottom:40px;
	margin-bottom:40px;
}

.news ul.news_list li a{
	display:block;
	text-decoration:none;
	color:#fff;
}

.news ul.news_list li a p{
	margin:0;
}

.news ul.news_list li a .date{
	font-size:smaller;
}






/*-------------------------
 * company
 * ------------------------*/

.company .flex_box .box:first-child{
	padding:0 5%;
}
.company .flex_box .box:first-child .thum_p{
	margin:0;
}

.company .flex_box .box:first-child .thum_p:first-child img{
	aspect-ratio: 3 / 4;
	object-fit:cover;
	width:70%;
}


.company .flex_box .box:first-child .thum_p:last-child{
	width:45%;
	float:right;
	margin-top:-200px;
	
	position:relative;
}

.company .flex_box .box:last-child .sub_menu{
	margin:0;
	padding:0;
}


.company .flex_box .box:last-child .sub_menu li{
	margin:0;
	padding:0;
	list-style:none;
}


.company .flex_box .box:last-child .sub_menu li a{
	display:block;
}

.company .flex_box .box:last-child .sub_menu li p{
	margin:0;
	margin-bottom:10px;
}







/*----------------------
 * footer
 * ------------------*/

#footer{
	padding:20px;
	margin:0;
	position:relative;
	z-index:10;
	background:var(--blue2);
	color:#fff;
}

#footer #footer_logo svg{
	fill:#fff;
}
#footer .footer-bottom.fdt-up-and-down .footer-bottom-content .navi-footer-in > ul{
	justify-content:flex-start;
}


#footer .navi-footer-in > .menu-footer li{
	border:none;
}
#footer .navi-footer-in > .menu-footer li a{
	color:#fff;
	font-size:clamp(20px, 2.3vw, 20px);
}

#footer .navi-footer-in > .menu-footer li a:hover{
	background:var(--yellow);
	color:#000;
}

#footer .copyright{
	text-align:left;
}

#footer .sns{
	margin:0;
	padding:0;
}


#footer #footer_flex{
	display:flex;
	justify-content: space-between;
}
#footer .sns {
	width:230px;
}
#footer .sns li{
	list-style:none;
}
#footer .sns li img{
	width:40px;
	padding-right:10px;
}

#footer .sns li a{
	color:#fff;
	display:block;
	font-size:80%;
	text-decoration:none;
	padding:10px;
}

@media all and (max-width: 1024px) {
	
	#footer #footer_flex{
		flex-flow: column-reverse;
	}
	
	#footer .sns li a{
		font-size:100%;
	}
	#footer .sns {
		width:100%;
	}
}


@media all and (max-width: 782px) {
	#footer #footer_logo{
		text-align:center;
	}
	
	#footer .footer-bottom.fdt-up-and-down .footer-bottom-content .navi-footer-in > ul{
		flex-flow:column;
	}
	
	.navi-footer-in > .menu-footer li.menu-item{
		width:100%;
		text-align:left;
	}
	
	#footer .copyright{
		font-size:smaller;
	}
}