@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-color: #fff;
}




h3 {
	position: relative;
	text-align: center;
	margin: 10px 0px 0px 0px;
	font-size: 25px;
	color: #000;
	font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-style: normal;
}

@media screen and ( max-width : 750px ){
	
h3 {
	position: relative;
	text-align: center;
	margin: 10px 0px 0px 0px;
	font-size: 15px;
	color: #000;
	font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-style: normal;
}
}


h4{
	position: static;
	text-align: center;
	margin: 15px 0px 55px 0px;
	font-size: 14px;
	color: #000;
	font-family: "garamond-premier-pro", 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;
    margin: 0 auto;
	width: 350px;

}

.footlogo img{
	width: 100%;
}





.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;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


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

.js-animation2 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation2.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


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

.js-animation3 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation3.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


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







.creditbox{
	padding-top: 20px;
	margin-bottom: 80px;
	margin-left: auto;
	margin-right: auto;
	width: 90vw;
}


.credit{
	margin: 0 auto;
	text-align: left;
	font-size: 11px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #000;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-style: normal;
	
}

.credit a{
	color: #000;
}

.credit p{
	color: #000;
}

.credit2{
	margin: 0 auto;
	text-align: left;
	font-size: 11px;
	letter-spacing: 0em;
	line-height:2.5em;
	color: #446C9A;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-style: normal;
	
}

.credit2 a{
	color: #446C9A;
}

.credit2 p{
	color: #446C9A;
}


span {
	
}

span02 {
	display: inline-block;
	line-height:1em;
	border-bottom: solid 1px #000;
	
}

span3 {
}



.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: 65%;
	max-width: 500px;
	margin: 120px auto 20px;	
}

.photo01 img{
	width: 100%
}

.photo02{
	width: 90%;
	max-width: 600px;
	margin: 100px auto 20px;	
}

@media screen and ( max-width : 750px ){
.photo02{
	width: 90%;
	max-width: 600px;
	margin: 100px auto 10px;
	}
}

.photo02 img{
	width: 100%
}

.photo03{
	width: 40%;
	max-width: 500px;
	margin: 150PX auto 20px;	
}

.photo03 img{
	width: 100%
}


@media screen and ( max-width : 750px ){
.photo03{
	width: 100%;
	max-width: 500px;
	margin: 30PX auto 30px;	
}
}


.intro01{
	width: 90%;
	max-width: 600px;
	margin: 70PX auto 50PX;	
}

.intro01 img{
	width: 100%
}

.fade-img-box {
 width: 90%;
 height: 600px;
 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{
	display: flex;
	width: 100%;
	margin: 0 auto;
}


.contents_box{
	position: absolute;
	display:block;
	width: 100%;
}





.mordalicon img{
	width: 100%;
}

.overflow{
	overflow:hidden;
	}


/* ホリディ追加*/



.top-box {
    position: relative;
	width: 100vw;
	height: 80vh;
}


.se-box {
    position: relative;
	width: 100vw;
	height: 50vh;
}


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

.se-box {
	height: 40vh;
}
}







.snsbox{
	display: block;
	margin: 50px auto;
}


.sns{
	text-align: center;
	font-size: 1em;
	letter-spacing: 0.1em;
	line-height:2.2em;
	padding-left: 5%;
	padding-bottom: 0px;
	text-decoration: none;
 	color: #000;
	font-family: jaf-bernina-sans, sans-serif;
	font-weight: 600;
	font-style: normal;
	}

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


/* FCLOOK追加*/


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

.topimage2 {
  position: static;
  height: 57vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image:url("../images/legacy_23aw_look_03_36.jpg");
}

.topimage3 {
  position: static;
  height: 50vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image:url("../images/legacy_23aw_look_03_35.jpg");
}




.title{
		position:absolute;
		display: block;
		text-align: center;
	    width: 60vw;
		max-width: 500px;
		top: 20%;
		left:0;
		right: 0;
}

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

.title2{
		position:absolute;
		display: block;
		text-align: center;
	    width: 40vw;
		max-width: 450px;
		top: 20%;
   		right: 0;
 		left: 0;
  		margin: 0 auto;
}


@media screen and ( max-width : 750px ){
.title2{
		position:absolute;
		display: block;
		text-align: center;
	    width: 70vw;
		max-width: 450px;
		top: 20%;
   		right: 0;
 		left: 0;
  		margin: 0 auto;
}
}


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

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

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
    /*線の形状*/
	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;
	}
}

 /*スクロール*/



.itemlist{
	width:  100%;
	margin: 0 auto;
}

.linklist{
	width:  50%;
	max-width: 300px; /* 最大幅 */
	margin: 40px  auto 0;
}

.item_icon{
	 width: 100%;
	 display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0% 0px;
	list-style-type:none;
	 /*コレ*/border-right: 0px solid #333;
	/*コレ*/border-top: 1px solid #333;
}

.linkflex{
	 width: 80vw;
	 display: flex;
	/*コレ*/justify-content: space-between;
	flex-wrap: wrap;
	gap: 0% 10px;
	list-style-type:none;
	margin: 0 auto;
}


@media screen and ( max-width : 750px ){
.linkflex{
	 width: 90vw;
}
}



.flex-item {
	/*コレ*/border: 1px solid #333;
	/*コレ*/border-top: none;
    /*コレ*/border-right: none;
  width: 49.7%;
}


.spmenu{
	display: none;
	position: fixed;
	left: 0;
	bottom:0;
	width: 100%;
	height: 90px;
	text-align: center;
	box-sizing: border-box;
	z-index: 999;/*最前面へ*/
	background-color: #fff;
	/*デフォルトで非表示にする*/
	transition: 1s;
  opacity: 0;
  visibility: hidden;
	
}

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


.bottomlink{
	display: flex;
	display: -webkit-flex;
	top:0;
	right: 0;
	width: 100%;
	margin-right:0px;
	margin-top: 6px;
	padding-left: 0%;
	padding-right: 0%;
	padding-bottom: 10px;
	gap: 0px 0%;
}



.linkimg{
	width: 25%;
	padding:0px 0px;
}

.linkimg img{
	width: 100%;
}


.SP_only{
	display: block;
}

.PC_only{
	display: none;
}

@media screen and ( min-width : 767px ){
	.SP_only{
	display: none;
}
.PC_only{
	display: block;
}
	
}





/* SP */ 


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

		body{

}

.spmenu{
	display: block;
}
	
.contents{
	display: flex;
	width: 100%;
	padding-left:0px;
	padding-right:0px;
}


.contents_box{
	position: absolute;
	display:block;	
}

.topimage2 {
	height: 40vh; /* 全画面表示 */
  }
	
	
.flex-item4 {
  width: 100%;
}
	

.title{
		margin:0 auto;
}
	


	
}


/* SS23追加 */


.kaolist{
	width:  100%;
	margin: 0 auto;
}

.kao_icon{
	 width: 100%;
	 display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0% 0%;
	list-style-type:none;
}

.flex-item3 {
  width: 60%;
}

.flex-item3 img{
	width: 100%;
}

@media screen and ( max-width : 750px ){
.flex-item3 {
  width: 100%;
}
}
	
	
.flex-item4 {
  width: 40%;
}

.flex-item4 img{
	width: 100%;
}

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

.flex-item2 {
  width: 100%;
}



.flex-item2 img{
	width: 100%;
}







/* PC */

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


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

.top-box {
    position: relative;
	height: 100vh;
}
	
.title{
		top: 15%;
		left:10%;
		right:0;
}
	
.titlelogo{
		position:fixed;
		display: block;
		text-align: center;
	    width: 250px;
		top: 30px;
		margin:0 0;
		left:30px;
		
}
	
.photo02{
	width: 90%;
}

	
.topimage {
  height: 100vh; /* 全画面表示 */
	background-image:url("../images/legacy_23aw_look_03_23.jpg");
}
	
.item_icon{
	 width: 100%;
	 display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0% 0px;
	list-style-type:none;
	 /*コレ*/border-right: 1px solid #333;
	/*コレ*/border-top: 1px solid #333;
}
	
	
.flex-item {
   /*コレ*/border: 1px solid #333;
	/*コレ*/border-top: none;
    /*コレ*/border-right: none;
  width : 33.23% ; /* 未対応ブラウザ用フォールバック */
}
	
	


	
	

	
}