@charset "UTF-8";
/* CSS Document */

 

p,h1,h2,h3,h4,h5,h6{
	margin-top: 0;
}

img{
	
	vertical-align: bottom;
}

a {
    text-decoration:none; 
}

ul {
	margin:0;
	padding: 0;
}


body{
	background-attachment: fixed;
	margin: 0;
	padding: 0;	
}

h1 {
	position: absolute;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 0.23em;
	top: 38%;
	left:0;
	right: 0;
	font-size: 7vw;
	color: #ffffff;
	font-family: "expressway", sans-serif;
font-weight: 600;
font-style: normal;
	z-index: 7;
}


h2 {
	position: relative;
	text-align: center;
	margin: 30px 0px 70px 0px;
	padding-top: 100px;
	font-size: 15px;
	color: #252525;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
font-weight: 500;
font-style: normal;
	z-index: 7;
}


@media screen and ( max-width : 750px ){
	h2 {
	font-size: 12px;}
}



h3 {
	position: relative;
	text-align: center;
	margin: 30px 0px 25px 0px;
	font-size: 10px;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-style: normal;
}

h4{
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	bottom: 10%;
	margin: auto;
	font-size: 8px;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-style: normal;	
}



h5 {
	position: relative;
	text-align: center;
	color: #000000;
	margin: 20px 0px 20px 0px;
	font-size: 22px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-style: normal;
}





.bigbox{
	display: flex;
	width: 100vw;
	height: 100%; 
	margin-bottom: 10px;
}


.itembox{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	gap: 20px 5%;
}



.item{
	    width: 30%;

}


.item img{
	width: 100%;
}



.foot{
	bottom: 0;
	width: 100vw;
	height: 150px;
	background-color: #0057a7;
	margin-top: 180px;
}

.footlogo{
	padding-top: 20px;
	padding-bottom: 40px;
    margin-left: 3%;
	width: 400px;
}

.footlogo img{
	width: 100%;
}


@media screen and ( max-width : 750px ){
	.footlogo {
	width: 250px;}
}





.maintext{
	position: relative;
	display: block;
	text-align: justify;
	font-size: 14px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	padding-left: 5%;
	padding-right: 5%;
	left: 0;
	right: 0;
	letter-spacing: 0.02em;
	line-height:200%;
 	color: #000000;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 500;
	max-width: 700px;
	}



.js-animation {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.02);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
	transform: scale(1);
  transform: translateY(0px);
}


.js-animation img { 
	width: 100%;
}

.js-animation2 {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.02);
  transition: all 1s;
}
.js-animation2.is-show {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
	transform: scale(1);
  transform: translateY(0px);
}


.js-animation2 img { 
	width: 100%;
}

.js-animation3 {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.02);
  transition: all 1s;
}
.js-animation3.is-show {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
	transform: scale(1);
  transform: translateY(0px);
}


.js-animation3 img { 
	width: 100%;
}




.credit{
	margin: 0 auto;
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.15em;
	line-height:2.5em;
	color: #000000;
	text-decoration: none;
	font-family: "expressway", sans-serif;
font-weight: 200;
font-style: normal;
}


.credit a{
	color: #4b4948;
}

.credit p{
	color: #4b4948;
}

.credit02{
	text-align: center;
	margin: 0 auto;
	font-size: 20px;
	letter-spacing: 0.15em;
	line-height:1.5em;
	color: #000000;
	text-decoration: none;
	font-family: "expressway", sans-serif;
font-weight: 200;
font-style: normal;
	
}


@media screen and ( max-width : 750px ){
	.credit02 {
	font-size: 10px;}
}





span1 {
	display: inline-block;
	color: #000000;
	width: 16em;
}

@media screen and ( max-width : 750px ){
	span1 {
	width: 13em;}
}

span2 {
  border-bottom: solid 1px #000000;
  color: #000000;
  font-size: 100%;
  font-weight: 400;	
}



.bottomlink{
	display: flex;
	display: -webkit-flex;
	top:0;
	right: 0;
	width: 100%;
	margin-right:0px;
	margin-top: 0px;
}

.pretext{
	display: inline-block;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height:1em;
	color: #ffffff;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 600;
	margin: 22px auto;
	border-bottom: solid 2px #ffffff;
	}

.pretext a{
	text-decoration: none;
}





.moviestyle{
	margin: 0 auto;
	padding-bottom: 120px;
	width: 90vw;
	max-width: 700px;
}



/* ハロサン用追加 */



.photo01{
	width: 40%;
	max-width: 400px;
	margin: 80px auto 0px;	
}

@media screen and ( max-width : 750px ){
	.photo01{
		position: relative;
		width: 80%;
		z-index: 10;
	}
}


.photo01 img{
	width: 100%
}

.photo00{
	width: 40%;
	max-width: 400px;
	margin: 120PX auto 0px;	
	padding-top: 40px;
}

@media screen and ( max-width : 750px ){
	.photo00{
		position: relative;
		width: 80%;
		z-index: 10;
	}
}


.photo00 img{
	width: 100%
}



.photo02{
	position: relative;
	width: 80%;
	max-width: 600px;
	margin: 0 auto;	
	padding-top: 60vh;
	padding-bottom: 200px;
	z-index: 10;
}

.photo02 img{
	width: 100%
}

@media screen and ( max-width : 750px ){
	.photo02{
	padding-top: 50vh;
	}

}

.photo02_2{
	position: relative;
	width: 90%;
	max-width: 600px;
	margin: 0 auto;	
	z-index: 10;
}

.photo02_2 img{
	width: 100%
}

.photo03{
	width: 100%;
	max-width: 600px;
	margin: 20PX auto;	
}

.photo03 img{
	width: 100%
}

.intro01{
	width: 100%;
}

.intro01 img{
	width: 100%
}

.fade-img-box {
 width: 100%;
 height: 1000px;
 margin: 0 auto;
 position:relative;
}

.fade-img-box img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}


.fade-img-box02 {
 width: 90%;
 height: 600px;
 margin: 0 auto;
 position:relative;
}

.fade-img-box02 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

.fade-img-box03 {
 width: 90%;
 height: 600px;
 margin: 0 auto;
 position:relative;
}

.fade-img-box03 img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}





.layout{
		position: absolute;
		top:30px;
		display: flex;
   		flex-wrap: wrap;
		text-align: center;
		margin: 0 auto;
		max-width: 750px;
}

.layout02{
		position: absolute;
		top:95px;
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 auto;
		max-width: 750px;
}

.itemall{
	width: 100vw;
	margin-top: 10px;
	margin-bottom: 20px;
}

.parent_box {
  width: 100vw;
  max-width: 750px;
  display: flex;
	margin: 20px auto;
}

.side_image{
	width: 30vw;
}

.side_image img{
	width: 100%;
}

.side_text_box{
	width: 70vw;
}


.note{
	position: relative;
	width: 100vw;
	height: auto;
	max-width: 600px;
	margin: 10px auto 0px;	
	padding-bottom: 250px;
}

.pr{
	position: relative;
	width: 100vw;
	height: 520px;
	max-width: 600px;
	margin: 0px auto 0px;	
	padding-bottom: 0px;
}

.prcopy{
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.prcopy img{
	width: 100%
}

.hello{
	position: absolute;
	right: 40px;
	top:370px;
	width: 200px;
}

.hello img{
	width: 100%
}


.sweatbase{
	position: relative;
	width: 100vw;
	height: 500px;
	max-width: 600px;
	margin: 50px auto 0px;	
	padding-bottom: 0px;
}

.sweat{
	position: absolute;
	top:0;
	left:0;
	right: 0;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;	
}

.sweat img{
	width: 100%
}

.sweaticon{
	position: absolute;
	top:50px;
	right: 20px;
	width: 130px;
	margin: 0 auto;	
	animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}



.bgcolor01{
	position: relative;
    top: 0;
    left: 50%;
    display: block;
    width: 100vw;
    height: 1980px;
    background: #91B6B5;
    margin-left: -50vw;
	z-index: 1;
}








.contents{
	width: 100vw;
	margin: 300px  auto 0;
}


@media screen and ( max-width : 750px ){
	.contents {
	}
}


.contents_box{
	position: relative;
	display:block;
	left:0;
	right: 0;
	width: 100vw;
	margin: 150px auto 0;
	padding: 0 0;
	background-color: #fff;
	z-index: 10;
}





.overflow{
	overflow:hidden;	
	}


/* ホリディ追加*/



.top-box {
	position: relative;
	width: 100vw;
	height: 100vh;
	z-index: 6;
}


.kao_icon{
	 width: 100%;
	 display: flex;
	justify-content: space-between;
	list-style-type:none;
}





.snsbox{
	display: block;
	padding-right: 5%;
	padding-bottom: 10%; 
	text-align: right;
	z-index: 10;
}


.sns{
	text-align: right;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height:2.2em;
	padding-bottom: 0px;
	text-decoration: none;
 	color: #000;
	font-family: canada-type-gibson, sans-serif;
    font-weight: 400;
	font-style: normal;
	}

@media screen and ( max-width : 750px ){
	.sns {
		font-size: 15px;}
}


.logo{
	width: 90vw;
	max-width: 300px;
	margin: 0 auto;
}


/* FCLOOK追加*/



/*このクラスが付与されると表示する*/

.title{
		position:absolute;
		display: block;
		text-align: center;
	    width: 30vw;
		max-width: 300px;
		top: 70%;
		right: 0;
		left: 0;
		margin: 0 auto;
		z-index: 7;
}

@media screen and ( max-width : 750px ){
	.title {
	width: 70vw;
	max-width: 400px;	
	top: 10%;
	right: 2%;}
}

.titlelogo{
		position:fixed;
		display: block;
		text-align: center;
	    width: 100vw;
		max-width: 540px;
		top: 0%;
		margin:0 auto;
		left:0;
		right: 0;
		z-index: 200;
}

 /*スクロール*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
    display: block;
	position:absolute;
	left:90%;
	bottom:100px;
    /*全体の高さ*/
	height:50px;
	z-index: 41;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	 left:-15px;
  	top: -25px;
    /*テキストの形状*/
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 500;
	color: #fff;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

 /*スクロール*/


 /*H追加*/

.styling01 {
 width: 100%;
 min-height: 200px;
 margin: 40px auto;
 position:relative;
}

.styling01::before {
    content: "";
	display: block;
	 padding-top: 60%;
}

@media screen and ( max-width : 750px ){
	.styling01 {
	height: 650px;
	margin: 30px auto 0;}
}

.styling02 {
 width: 100%;
 min-height: 200px;
 position:relative;
}

.styling02::before {
    content: "";
	display: block;
	 padding-top: 40%;
}

@media screen and ( max-width : 750px ){
	.styling02 {
	margin: 0px auto 0px;}
	.styling02::before {
    content: "";
	display: block;
	 padding-top: 0%;
}
}



.styling03 {
 width: 100%;
 min-height: 200px;
 margin-top: 250px;
 position:relative;
}

.styling03::before {
    content: "";
	display: block;
	 padding-top: 40%;
}

@media screen and ( max-width : 750px ){
	.styling03 {
	margin: 0px auto 0;}
	.styling03::before {
    content: "";
	display: block;
	 padding-top: 50%;
}
}


.styling04 {
 width: 100%;
 min-height: 200px;
 position:relative;
}

.styling04::before {
    content: "";
	display: block;
	 padding-top: 45%;
}

@media screen and ( max-width : 750px ){
	.styling04 {
	margin: 0px auto 0;}
	.styling04::before {
	 padding-top: 150%;
}
}


.styling05 {
 width: 100%;
  min-height: 200px;
 margin-top: 50px;
 position:relative;
}

.styling05::before {
    content: "";
	display: block;
	 padding-top: 120%;
}



@media screen and ( max-width : 750px ){
	.styling05 {
	margin: 40px auto 0;}
	.styling05::before {
    content: "";
	display: block;
	 padding-top: 220%;
}
}


.styling06 {
 width: 100%;
  min-height: 200px;
 position:relative;
}

.styling06::before {
    content: "";
	display: block;
	 padding-top: 40%;
}



@media screen and ( max-width : 750px ){
	.styling06 {
	margin: 0px auto 0;}
	.styling06::before {
    content: "";
	display: block;
	 padding-top: 140%;
}
}



.styling07 {
 width: 100%;
  min-height: 200px;
 position:relative;
 margin-top: 100px;
}

.styling07::before {
    content: "";
	display: block;
	 padding-top: 30%;
}

@media screen and ( max-width : 750px ){
	.styling07 {
	margin: 100px auto 100px;}
	.styling07::before {
    content: "";
	display: block;
	padding-top: 70%;

}
}






.stylingend {
 width: 100%;
 min-height: 200px;
 position:relative;
}

.stylingend::before {
    content: "";
	display: block;
	 padding-top: 35%;
}

@media screen and ( max-width : 750px ){
	.stylingend {
	margin: 100px auto 0;}
	.stylingend::before {
	 padding-top: 70%;
}
}





.ph01{
	position: absolute;
	width: 45%;
	max-width: 650px;
	left: 10%;
	top: 0%;
}

@media screen and ( max-width : 750px ){
	.ph01 {
	width: 60%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;}
}

.ph02{
	position: absolute;
	width: 28%;
	right: 10%;
	top: 10%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
	.ph02 {
	top: 60%;	
	right: 0%;	
	width: 47%; }
}

.ph03{
	position: absolute;
	width: 25%;
	max-width: 400px;
	right: 12%;
	top: 60%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
	.ph03 {
	right: 3%;	
	width: 45%;
	top: 90%;}
}

.ph04{
	position: absolute;
	width: 30%;
	left: 15%;
	top: 0%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
	.ph04 {
	width: 30%;
	left: 10%;	
	top: 0%;}
}



.ph05{
	position: absolute;
	width: 45%;
	right: 25%;
	top: 0%;
	z-index: 3;
}

@media screen and ( max-width : 750px ){
	.ph05 {
	display: block;
	align-items: none;
    clear: none;
	width: 50%;
	right: 35%; 
	top: 40%;}
}


.photo05{
	width: 70%;
}

@media screen and ( max-width : 750px ){
	.photo05 {
	width: 100%;
	}
}


.ph06{
	position: absolute;
	width: 50%;
	right: 0;
	top: 0%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
.ph06{
	width: 78%;
}
}



.ph07{
	position: absolute;
	width: 25%;
	left: 15%;
	top: 40%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
.ph07{
	width: 35%;
}
}


.ph08{
	position: absolute;
	width: 30%;
	left: 15%;
	top: 50%;
}

@media screen and ( max-width : 750px ){
.ph08{
	width: 50%;
	left: 8%;
	top: 48%;
}
}

.ph20{
	position: absolute;
	width: 15%;
	left: 55%;
	top: 65%;
}

@media screen and ( max-width : 750px ){
.ph20{
	width: 30%;
	left: 55%;
	top: 73%;
	z-index: 10;
}
}


.ph08_2{
	position: absolute;
	width: 25%;
	right: 10%;
	top: 0%;
}

@media screen and ( max-width : 750px ){
.ph08_2{
	width: 65%;
	left: 5%;
	top: 55%;
}
}



.ph09{
	position: absolute;
	width: 20%;
	left: 75%;
	top: 45%;
	z-index: 10;
}



@media screen and ( max-width : 750px ){
.ph09{
	width: 30%;
	left: 65%;
	top: 50%;
}
}

.ph10{
	position: absolute;
	width: 30px;
	right: 5%;
	top: 65%;
	z-index: 10;
	
}

@media screen and ( max-width : 750px ){
.ph10{
	width: 20px;
}
}

.ph10_2{
	width: 40%;
	text-align: center;
	left: 0;
	right: 0;
	margin:70px auto;
	z-index: 10;
	
}

@media screen and ( max-width : 750px ){
.ph10_2{
	width: 60%;
	margin:40px auto;
}
}

.ph11{
	position: absolute;
	width: 25%;
	top: 0;
	right: 22%;
	z-index: 10;
	
}

@media screen and ( max-width : 750px ){
.ph11{
	top: 50%;
	width: 45%;
}
}




.ph12{
	position: absolute;
	width: 35%;
	left: 20%;
	top: 0%;
	z-index: 12;
}

@media screen and ( max-width : 750px ){
.ph12{
	width: 60%;
	left: 20%;
	top: 38%;
}
}

.ph13{
	position: absolute;
	width: 17%;
	right: 4%;
	top: 20%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
.ph13{
	position: absolute;
	width: 35%;
	right: 0%;
	top: 5%;
}
}


.ph14{
	position: absolute;
	width: 35%;
	left: 20%;
	top: 0%;
	z-index: 12;
}

@media screen and ( max-width : 750px ){
.ph14{
	width: 70%;
	left: 15%;
	top: 25%;
}
}

.ph15{
	position: absolute;
	width: 17%;
	right: 4%;
	top: 20%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
.ph15{
	position: absolute;
	width: 35%;
	right: 0%;
	left:0;
	margin: 0 auto;
	top: 0%;
	;
}
}


.video01{
	position: absolute;
	width: 20%;
	right: 12%;
	top: 42%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
	.video01 {
	top: 45%;	
	width: 40%;}
}


.video02{
	position: absolute;
	width: 25%;
	top: 0;
	left: 20%;
	z-index: 10;
	
}

@media screen and ( max-width : 750px ){
	.video02 {
	top: 0%;
	left: 0%;
	width: 35%;}
}






.endlogo{
	position: absolute;
	width: 20%;
	left: 0;
	right: 0;
	margin: auto;
	top: 30%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
	.endlogo{
		width: 45%;
		top: 27%;
	}
}


.phend{
	position: absolute;
	width: 100%;
	right: 0;
	left: 0;
	margin: auto;
	top: 0%;
}








.creditbox01{
	position: absolute;
	top: 0%;
	right: 5%;	
	z-index: 10;
	white-space: nowrap;
	width: 200px;
}

@media screen and ( max-width : 750px ){
.creditbox01{
	right: 3%;
	top: 10%;
}
}




.creditbox02{
	position: absolute;
	right: 5%;
	bottom: 0%;
	z-index: 10;
}

@media screen and ( max-width : 750px ){
.creditbox02{
	padding-top: 20px;
	padding-left: 0px;
	bottom: 0%;
}
}

.creditbox03{
	position: absolute;
	left: 20%;
	bottom: 2%;
}

@media screen and ( max-width : 750px ){
.creditbox03{
	left: 5%;
}
}




.endcredit_image{
	position: relative;
	width: 100vw;
	height: 300px;
}

@media screen and ( max-width : 750px ){
	.endcredit_image {
	height: 200px;}
}

.endcredit_bg{
	position: absolute;
	width: 100%;
	height: 300px;
	z-index: 4;
}

.endcredit_bg img{
  width: 100%; /* 全画面表示 */
  height: 100%;
  object-fit: cover;
  
}

.endcredit_box{
	position: absolute;
	width: 200px;
	right: 8%;
	padding-top: 100px;
	z-index: 20;
	
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }





/* retreat追加 */

.top_flex{
	display: flex;
}

.swiper-container{
	width: 50%;
}

@media screen and ( max-width : 750px ){
.swiper-container{
	width: 100%;
}
}



.slide-img img{
  position: static;
  height: 100vh; /* 全画面表示 */
  object-fit: cover;
}

.sidemenu{
  position:fixed;
  display: block;
  width: 250px;
  height: 100vh;
  top:0;
  left: 0;
  z-index: 30;
  transition: 1s;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
	
}


.homelook{
  position:absolute;
  display: block;
  width: 40%;
  max-width: 800px;	
  top:30vh;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 28;
}

@media screen and ( max-width : 750px ){

.homelook{
  position:absolute;
  display: block;
  width: 65%;
  max-width: 800px;	
  top:40vh;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 28;
}
}

.titletext{
  position:absolute;
  display: block;
  text-align: center;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	font-family: "nort", sans-serif;
	font-weight: 400;
	font-style: normal;
  letter-spacing: -0.02em;
  line-height: 0.8em;
  top:65vh;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 28;
}

@media screen and ( max-width : 750px ){
	.titletext{
	font-size: 18px;
  top:55vh;
}	
}



.flex02{
	 width: 100%;
	 display: flex;
	flex-wrap: wrap;
	gap: 0% 0%;
	margin-top: 80px;
	list-style-type:none;
}

.flex03{
	margin-top: 250px;
	 width: 100%;
	 display: flex;
	flex-wrap: wrap;
	gap: 0% 0%;
	list-style-type:none;
}

@media screen and ( max-width : 750px ){
	.flex03{
	margin:140px auto 0;
	 width: 55%;
	 display: flex;
	flex-wrap: wrap;
	gap: 0% 0%;
	list-style-type:none;
}
}

.flex04{
	margin-top: 100px;
	 width: 100%;
	 display: flex;
	flex-wrap: wrap;
	gap: 0% 0%;
	list-style-type:none;
}

.flex-item {
  width: 50%;
}

.flex-item02 {
  width: 33.33333%;
}

.flex-item03 {
  width: 33.33333%;
}

@media screen and ( max-width : 750px ){
	.flex-item03{
	width: 100%;
		padding: 30px;
}
}

.flex-text {
  width: 40%;
}

@media screen and ( max-width : 750px ){
	.flex-text {
  width: 46%;
}
}


.flexcredit{
	position: absolute;
	left:0;
	right: 0;
	top:60%;
	margin: auto;
	 width: 35%;
	 display: flex;
	flex-wrap: wrap;
	gap: 0% 20%;
	list-style-type:none;
	z-index: 5;
}

@media screen and ( max-width : 750px ){
.flexcredit{

	 width: 46%;
	gap: 0% 8%;
}
}

.container {
	position: relative;
	width: 100%;
	height: 300px;
}

.image00 {
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 8s infinite;
}

.image00:nth-of-type(1) {
	animation-delay: 0s;
}
.image00:nth-of-type(2) {
	animation-delay: 4s;
}






.mordalicon{
	position: fixed;
	display: block;
	text-align: center;
	top:40px;
 	left:2%;
	width: 50px;
	z-index: 200;
	/*デフォルトで非表示にする*/
	transition: 1s;
  opacity: 0;
  visibility: hidden;
   }

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}


@media screen and ( max-width : 750px ){
	.mordalicon{
		width: 30px;
		left:1%;
	}
}



.mordalicon img{
	width: 100%;
}


.bluebox{
	position: absolute;
	display: block;
	right:0%;
	top:0;
	bottom: 0;
	z-index: 5;
	width: 25%;
	background-color: #bfd7e1;
	
}

@media screen and ( max-width : 750px ){
	.bluebox{
		width: 35%;
	}
}






/* SP */ 


@media screen and ( max-width : 750px ){

	


.contents_box{
	position: relative;
	display:block;
	width: 100vw;
	padding: 0 0;
}
	
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: none !important; }
.sp { display: block !important; }

	
}


/*FC24SS*/

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 205.83333333vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 48.58299595vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}


#videosp-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#videosp {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 56.25vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 177.77777vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}



.maintitle01{
	width: 92%;
	max-width: 600px;
	margin: 0 auto 50px;	
}

.maintitle01 img{
	width: 100%
}





/* PC */

@media screen and ( min-width : 750px ){


	
.itemall{
	width: 600px;
	margin-top: 30px;
	margin-bottom: 20px;
}
	
.sweatbase{
	height: 700px;
}
	
	
.slide-img img{
  height: 100vh; /* 全画面表示 */
}

	
.titlelogo{
		position:fixed;
		display: block;
		text-align: center;
	    width: 250px;
		top: 30px;
		margin:0 0;
		left:30px;
		
}

.photo03{
	width: 90%;
}	
	
	
}


/* credit追加 */

.modal-content {
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  padding-bottom: 20px;
}
.modal-content .modal-img{
  padding-bottom: 20px;
}

.sliderbox2{
	position: relative;
	height: 760px;
}

@media screen and ( max-width : 750px ){
.sliderbox2{
	height: 550px;
}
}



.scrolll{
  display: flex;
  /*要素の高さを指定*/
  height: 270px;
  /*上下方向にはみ出した要素ををスクロールさせる*/
  overflow-y:hidden;	
  overflow-x: scroll;
 
  
}

@media screen and ( min-width : 767px ){
.scrolll{
  height: 400px; 
}
}

@media screen and ( max-width : 767px ){
 .scrolll{
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
	}	
	/*スクロールバー非表示（Chrome・Safari）*/
.scrolll::-webkit-scrollbar{
  display:none;
}
}

.slide-box {
  height: auto;
  flex: 0 0 40%;
  margin: auto 1% auto auto;
}



.topimage {
  position: relative; 
  height: 100vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image:url("../images/fc_24ss_top_pc_01.jpg");
   }


@media screen and ( max-width : 750px ){

.topimage {
  background-image:url("../images/spbg.jpg");
}

}