@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:#f1eee6;
font-feature-settings: "palt";
}

.mainimage {
   max-width: 1080px; /* 最大幅 */
   min-width: 400px; /* 最小幅 */
   margin-top: 100px;
   margin-left : auto;
   margin-right : auto;
}

.mainimage img { 
	width: 100%;
}



.colortext{
	font-size: 20pt;
	padding-left: 10%;
 	color: #000000;
	text-decoration: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: 500;
	}



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


h5 {
	position: relative;
	text-align: center;
	color: #00b15d;
	margin: 50px 0px 10px 0px;
	font-size: 32px;
	font-family: kremlin-pro-expanded, sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing:-0.02em;
}





.maintext{
	text-align: center;
	font-size: 0.8em;
	margin-bottom: 50px;
	padding-left: 5%;
	padding-right: 5%;
	line-height:200%;
 	color: #146e95;
	text-decoration: none;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-style: 700;
	letter-spacing:-0.02em;
	}

.subtext01{
	text-align: left;
	font-size: 0.7em;
	margin-bottom: 20px;
	line-height:200%;
 	color: #146e95;
	text-decoration: none;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-style: 700;
	letter-spacing:-0.05em;
	white-space: nowrap;
	}


.subtext{
	text-align: left;
	font-size: 0.7em;
	margin-bottom: 20px;
	line-height:200%;
 	color: #146e95;
	text-decoration: none;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-style: 700;
	letter-spacing:-0.05em;
	white-space: nowrap;
	}

.textbox{
	width: 90%
}



.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
  max-width: 1080px; /* 最大幅 */
  margin-left : auto;
  margin-right : auto;
}
.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;
  max-width: 1080px; /* 最大幅 */
  margin-left : auto;
  margin-right : auto;
}
.js-animation2.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


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



.credit{
	white-space: nowrap;
	font-size: 1em;
	text-decoration: none;
 	color: #146e95;
	font-family: jaf-bernina-sans, sans-serif;
	font-weight: 600;
	font-style: normal;
	display: inline-block;
	border-bottom: solid 2px #146e95;
	}



span {
	display: inline-block;
	color: #146e95;
	margin-right : 10px;
}

span2 {
  color: #146e95;
  font-size: 100%;
	
}



.top-box {
    position: relative;
}



.op-start{
		position:absolute;
	    width: 70%;
		left: 15%;
		top: 10%;
}

.ggg{
		position:absolute;
	    width: 28vw;
		max-width: 300px;
		top: 85%;
		left:10%;
	    animation:3s linear infinite rotation1;
	}

.flower{
		position:absolute;
	    width: 15vw;
		max-width: 210px;
		top: 60%;
		left:75%;
	   	}

#timeout{
}

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



.buy{
    position: fixed;
    bottom: 3%;
    right: 5%;
    z-index: 10000;
}




.gifimg img{
  display: block;
  width: 100%;
  max-width: 650px;
  margin:40px auto 20px auto;
}

.footimg {
  margin : 0 auto;
  text-align: center;
}

.footimg img{
  display: block;	
  width: 100%;
  max-width: 650px;
  margin : 0 auto;
}

.bottomspace{
	margin-bottom: 75px;
}

 
/* HSF */

.sample1{
		max-width: 1080px;
		height: 800px;
		position:relative;
	    margin: auto;
	}

.sample2{
		max-width: 1080px;
		height: 780px;
		position:relative;
	    margin: auto;
	}



#roll{
		display:block;
        overflow: hidden;
		max-width: 500px;
        transform: translate3d(0,0,0);
        text-align: center;
        opacity: 1;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px;
		margin-bottom: 70px;
	}

#roll02{
		display:none;
	}


.way{
		position:absolute;
	    width: 20vw;
		max-width: 200px;
		top: 0px;
		left:3%;
	    animation:3s linear infinite rotation1;
	}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
 }

.model01{
		position:absolute;
	    width: 60vw;
		max-width: 530px;
		top: 3%;
		left:5%;
	}

.model02{
		position:absolute;
	    width: 60vw;
		max-width: 530px;
	    top: 48%;
		left:40%;
	}

.model03{
		position:absolute;
	    width: 60vw;
		max-width: 530px;
	    top: 0%;
		left:15%;
	}

.scbin{
		display: block;
		position:relative;
	    width: 90%;
		max-width: 650px;
		margin: 0 auto;
		height: 500px;
	}

.denim{
		display: block;
		position:relative;
	    width: 90%;
		max-width: 650px;
		margin: 0 auto 30px;
		height: 500px;
	}

.swim{
		display: block;
		position:relative;
	    width: 90%;
		max-width: 650px;
		margin: 0 auto;
		height: 500px;
	}

.copy01{
		position:absolute;
	    width: 45vw;
		max-width: 300px;
		top: 26%;
		right:3%;
	}

.copy02{
		position:absolute;
	    width: 36vw;
		max-width: 240px;
	    top: 70%;
		left:5%;
	}

.copy03{
		position:absolute;
	    width: 13.5vw;
		max-width: 100px;
	    top: 20%;
		right:8%;
	}

.yashi{
		position:absolute;
	    width: 50vw;
		max-width: 400px;
	    bottom: 0%;
		right:0%;
	}

.sonota{
		position:absolute;
	    width: 45vw;
		max-width: 250px;
	    top: 85%;
		left:10%;
	}

.textsetup{
		position:absolute;
	    top: 55%;
		left:7%;
	}

.textscb{
	position: relative;
	left:7%;
	margin-bottom: 10px;
	}


.creditbox{
	position:absolute;
	top: 78%;
	left:7%;
}


.creditboxscb{
	position: relative;
	left:7%;
}


.itemtitle{
	display: block;
	position: relative;
	max-width: 500px;
	margin-top: 60px;
	margin-bottom: 15px;
}

.home{
		position:absolute;
	    width: 55vw;
		max-width: 400px;
	    bottom: 0%;
		right:3%;
	}

.sing{
		position:absolute;
	    width: 40vw;
		max-width: 300px;
	    bottom: -45%;
		right:-3%;
	}

#timeout{
}




@keyframes change-img-anim {
	0%{ opacity: 0;}
	10%{ opacity: 1;}
	90%{ opacity: 1;}
	100%{ opacity: 0;}
}


.fade-img00 {
  position:relative;
  width: 100%;
  margin-left: auto;
}

.fade-img00 img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit:cover;
}


.fade-img {
  position:relative;
  width: 100%;
  margin-left: auto;
}

.fade-img img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit:cover;
}


.fade-img02 {
  position:relative;
  width: 100%;
  margin-left: auto;
}

.fade-img02 img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit:cover;
}


.fade-img03 {
  position:relative;
  width: 100%;
  margin-right: auto;
 margin-top: 0%;
}

.fade-img03 img {
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
  object-fit:cover;
}

.fade-img04 {
  position:relative;
  width: 100%;
  margin-right: auto;
 margin-top: 0%;
}

.fade-img04 img {
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
  object-fit:cover;
}

.fade-img05 {
  position:relative;
  width: 100%;
  margin-right: auto;
 margin-top: 0%;
}

.fade-img05 img {
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
  object-fit:cover;
}

/* ここまで */



/* SP */


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

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



/* PC */

@media screen and ( min-width : 750px ){
.maintext{
	font-size: 1em;
	line-height:200%;
 	color: #146e95;
	text-decoration: none;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-style: 700;
	}
	

.mainimage {
   max-width: 700px; /* 最大幅 */
   margin-top: 100px;
   margin-left : auto;
   margin-right : auto;
}

.mainimage img { 
	width: 100%;
}
	
.op-start{
		position:absolute;
	    width: 35%;
		max-width: 500px;
		left: 60%;
		top: 10%;
}	

.ggg{
		position:absolute;
	    width: 35vw;
		max-width: 200px;
		top: 70%;
		left:7%;
	    animation:3s linear infinite rotation1;
	}	
	
.flower{
		position:absolute;
	    width: 15vw;
		max-width: 120px;
		top: 60%;
		left:80%;
	   	}

	
	
.sample1{
		height: 1600px;
	}
	
.sample2{
		height: 1470px;
	}
	
h5 {
	position: relative;
	text-align: center;
	color: #00b15d;
	margin: 150px 0px 40px 0px;
	font-size: 32px;
	font-family: kremlin-pro-expanded, sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing:-0.02em;
}

.copy01{
		top: 15%;
		right:10%;
	}
	
.creditbox{
	top: 70%;
	}
	
.copy03{
		right:12%;
	}
	
.textsetup{
	    top: 58%;
		left:7%;
	}
	
.sonota{
	    top: 75%;
		left: 6%;
		
	}
	
.scbin{
	height: 850px;
	}
	
.denim{
		height: 850px;
		margin-bottom: 50px;
	}

.swim{
		height: 850px;
	}	


.subtext{
	text-align: center;
	}
	
.creditboxscb{
	position: relative;
	text-align: center;
	left:none;
}
	
.home{
		right:-10%;
	}	

.sing{
		right:70%;
	}
	
#roll{
		display:none;
	}
	
#roll02{
		display:block;
        overflow: hidden;
		max-width: 900px;
        transform: translate3d(0,0,0);
        text-align: center;
        opacity: 1;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px;
		margin-bottom: 70px;
	}
	


.footimg img{
  display: block;	
  width: 100%;
  max-width: 400px;
  margin : 200px auto 100px;
}	





}