@charset "utf-8";
html {font-size: 62.5%; padding:0; margin:0;}
body {padding:0; margin:0;}
.sp {display:none;}
.Red {color: #FF0004;}
.clear {clear:both;}
.SML{font-size: 70%;}
.bold{font-size: 110%; font-weight: bold;}
#SANAI_wrap a{color: #000; text-decoration: none; text-align: center;}
#SANAI_wrap a img:hover{opacity: 0.8;}
#SANAI_wrap {
	clear: both;
	width:100%;
	padding: 0;
	margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #555555;	
	background-color: #f4e8e3;
}

.gradient {
  width: 100%;
  height: 150px;
  background: linear-gradient(45deg, #fbf8f6 0%, #f4e8e3 100%);
}

/*item-----------------------*/

.main {width: 100%; margin:0 auto 0; padding: 1% 0 9%;  position: relative; background-image: url("../images/bg.png");background-size:  cover; /*height: 430px;*/ }
.wave_box{width: 100%; margin: -5% auto;}
.ttl{width: 100%; margin: 0 auto;}
.BG_01{width: 80%; margin: 1% auto 0; position: relative; z-index: 10;}
/*.bg1{width: 100%; margin: 0 auto;}*/

.item_wrap{width:100%; max-width: 1000px; margin: 0 auto; padding: 0 0 5%;background: linear-gradient(45deg, #faf8f5 0%, #faf8f5 100%);}

.item_wrap2{width:100%; max-width: 1000px; margin: 0 auto; padding: 0 0 5%; background: linear-gradient(45deg, #faf8f5 0%, #faf8f5 50%, #faf8f5 100%);}

.item_box{	width: 80%;/* margin: 15% auto 0;*//*	display:flex; flex-wrap:wrap; justify-content: space-between;*/ position: absolute; top: 20%; left: 5%;}
/*.item1{	width: 13%;	margin: 0 auto;	box-sizing: border-box;}*/

.wave_box2{width: 100%; margin: -8% auto; position: relative; z-index: 1000;}
.wave_box2 img{padding: 0;}
.txt_wrap {width: 100%; margin:0 auto 0; position: relative; /*background-image: url("../images/bg_wave.png");background-size:  cover; height: 450px;*/ }
.txt_wrap2 {width: 100%; margin:0 auto 0; position: relative; background: linear-gradient(180deg, #faf8f5 0%, #faf8f5 50%, #faf8f5 100%); /*background-image: url("../images/bg_bubble.png");background-size:  cover; height: 550px;*/ }
.txt_box{width: 80%; margin: 0 auto; padding: 5% 0; text-align: center; font-size: 1.8rem; line-height: 1.9em; color: #3b261d;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
.txt_box2{width: 80%; margin: 0 auto; padding: 18% 0 5%; text-align: center; font-size: 1.8rem; line-height: 2em;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
.BG_02{width: 100%; margin: -8% auto; position: relative; z-index: 10;}

.cp_txt{width: 50%; margin: 5% auto 5%; padding: 4% 2% 4%; text-align: center; font-size: 1.8rem; line-height: 2em; color: #3b261d; border: 2px solid #3b261d; background-color: #fff; box-sizing: border-box;}
.att{width: 100%; margin: 2% auto 0; padding: 0; text-align: center; font-size: 1.3rem; line-height: 1.6em; color: #3b261d;}

.loop_wrap {
  display: flex;
  width: 100vw;
  /*height: 550px;*/
  overflow: hidden;
	 max-width: 1000px;
	position: absolute;
    margin: 11% auto 0;
}

.loop_wrap img {width: auto; height: 100%;}

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

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop_wrap img:first-child {animation: loop 60s -30s linear infinite;}
.loop_wrap img:last-child {animation: loop2 60s linear infinite;}

/* General button style (reset) */
.btn {
	border: none;
	font-family: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	letter-spacing: 1px;
	font-weight: 600;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	display: block;
}


/* Button 1 */
.btn-1 {
	width: 55%;
    margin: 5% auto 0;
	padding: 12px 0px; 
	border: 2px solid #3b261d;
    font-size: 1.8rem;
    color: #fff;
	letter-spacing: 0.1em; 
	font-weight: bold;
	background-color: #3b261d;
	border-radius: 3px;
	text-decoration: none;
}

.btn-1:hover {
	color: #3b261d;
	background-color: #fff;
	border: 2px solid #3b261d;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	text-decoration: none;
}

@media only screen and (max-width: 950px) {
	#SANAI_wrap {width: 100%; padding: 0 0 2%; margin: 0 0 -7%}
	#SANAI_wrap .main {width: 100%; margin:0 auto 8%; }
	.pc {display:none;}
	.sp {display:block;}	


/*item-----------------------*/	
	.item_wrap{width:100%; margin: 0 auto; padding: 0 0 5%;}
	
	.ttl{width: 100%; margin: 4% auto 5%;}
	.loop_wrap {width: 100vw; height: auto; margin: 15% auto 0;}
	.loop_wrap img {width: auto; height: 100%;}
	
	.BG_01{width: 90%; margin: auto; position: relative; z-index: 10;}
	
	.wave_box2{width: 100%; margin: -17% auto; position: relative; z-index: 1000;}
	.txt_wrap {width: 100%; margin:0 auto 0; /*background-image: url("../images/bg_wave.png");background-size:  cover; height: 100vw;*/ }
	.txt_wrap2 {width: 100%; margin:0 auto 0; /*background-image: url("../images/bg_bubble.png");background-size:  cover; height: 100vw;*/ }
	.txt_box{width: 95%; margin: 0 auto 0; padding: 2% 0 10%; font-size: 15px; line-height: 1.7em;}
	.txt_box2{width: 95%; margin: 5% auto 0; padding: 28% 0 10%; font-size: 15px; line-height: 1.9em;}
	
	.cp_txt{width: 90%; margin: 5% auto 5%; padding: 6% 2% 7%; text-align: center; font-size: 15px; line-height: 1.6em;}
	.att{margin: 2% auto 0; padding: 0; text-align: center; font-size: 10px; line-height: 1.6em; }
	
	.btn-1 {width: 75%; margin: 5% auto 0; padding: 10px 0px; font-size: 15px;}

}