@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}

html {
	
}
body, table, input, textarea, select, option {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:500;
	color:#222;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
}
a,
a:link {color: #404040;
	text-decoration: none;
}
a:hover {
	opacity: 0.85 ;
	color: rgba(0,0,0,0.3);
}

a:visited {color: #404040;
	
}
a:active {
	color: #404040;
}

.main{
	line-height:2;
	/*max-width:700px;*/
	margin:0 auto;
	text-align:center;
	overflow:hidden;
	font-weight:400;
	}
	main{
    
}
.container{font-size:.9rem; font-weight:500;}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
#container {
    margin: 0 auto;
   
    position: relative;

}
/* CSS Document */

#gHeader{
	width: 199px;
    position: absolute;
    top: 23px;
    right: 25px;
    z-index: 999;}
	.splogo{
		display:none;}

.mainVisual{ margin:0 auto;
             text-align:center;
	         position: relative;
			}

.topV{ max-width:700px;
        position: relative;
		margin:0 auto;
        text-align:center;
		}

	.container {display: flex;flex-wrap: wrap;
}	
		.item{width:50%;}
		.ipk{background-color:#FFE0E1;}
		.ibg{background-color:#E1C3B2;}
		.ibu{background-color:#B7C7E1;}
		.ipr{background-color:#beb8da;}
		
		.topIt{
			position:absolute;
			font-weight:700;
			font-size:2rem;
			transform: rotate( 90deg );
			z-index:99;}
			
		.topIt_pk{top:5%;left:20%;}
		.topIt_bg{top:40%;right:13%;}
		.topIt_bu{top:65%;left:1%;}
		.topIt_pr{top:75%;right:8%;}	

		.pk,.bg,.bu,.pr{max-width:70%;padding:15%;}
		.pk img{border-radius: 0 0 75% 0;}
		.bg img{border-radius: 45% 45% 45% 45%;}
		
		.pr img{border-radius: 0 0 50% 50%;}
		
		.back{background-color:#F2F2F2;}
	.inner{
		position:absolute;
		width:50%;
		left:25%;
		bottom:-100px;
		z-index:99;}
		
		
		.catchCopy{
			margin:0 auto;
			text-align:center;
			max-width:700px;padding-top:100px;padding-bottom:50px;
			line-height:2;
			}
		.ttlTop{font-size:1.5rem;}	
		.pTop{text-align:left;line-height:2.5;}	
#colorBtn{
	width:60px;
     height:300px;
	position:fixed;
	right:5%;
	top:300px;;
	z-index:9999;
	}
	
.colorBnt_1{background-color:#FFE0E1;width:40px;height:40px;border-radius:50% 50% 50% 50%;margin:15px;}		
.colorBnt_2{background-color:#F7DFCF;width:40px;height:40px;border-radius:50% 50% 50% 50%;margin:15px;}
.colorBnt_3{background-color:#A0B5D4;width:40px;height:40px;border-radius:50% 50% 50% 50%;margin:15px;}			
.colorBnt_4{background-color:#A295AF;width:40px;height:40px;border-radius:50% 50% 50% 50%;margin:15px;}	


.st0{fill:none;stroke:#FFFFFF;stroke-width:90;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray: 1500; /*線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */}			
/*-------------------------------------------secen--------------------*/			
			
#secen{background-color:#B7C7E1;}
#secen2{background-color:#FFECED;}
#secen3{background-color:#E1C3B2;}
#secen4{background-color:#beb8da;}

.comTtlBox{margin:0 auto;
	  text-align:center;
	   max-width:700px;
	   position:relative;
	   padding-top:50px;}
	   
.sttl{ display: flex;/*background-color:#0F0;*/
	   }
.ttl{
	width:12%;
	padding-right:10%;
	/*background-color:#CF0;*/
	}
.catchCopy2{width:75%;text-align:left;}
.catchTtl,.catchTtl_r{font-size:3rem;
            font-family:'Ephesis', cursive;
			font-weight:500;}
.catchTtl_r{
	text-align:right;}			
			
#secen2 .ttl{padding-left:10%;padding-right:0%;}
#secen2 .catchCopy2{padding-left:3%;}
#secen4 .ttl{padding-left:10%;padding-right:0%;}
#secen4 .catchCopy2{padding-left:3%;}


.look{position:relative;
height:850px;/* background-color:red;*/padding-top:30px;}

.look_1,.look_2,.look_3,.look_4,.look_5,.look_6,.look2_1,.look2_2,.look2_3,.look2_4,.look2_5,.look2_6,.look2_7,.look3_1,.look3_2,.look3_2,.look3_3,.look3_4,.look3_5,.look3_6,.look3_7,.look4_1,.look4_2,.look4_3,.look4_4,.look4_5,.look4_6{position:absolute;}


.look_1{width:70%; bottom:0;}
.look_2{width:40%; right:-10%;}

.look_3{width:40%; left:35%; transform: rotate( 15deg );}
.look_4{width:37%; bottom:5%; right:0;}
.look_5{width:17%;left:25%;}
.look_6{width:30%; top:34%;left:45%;transform: rotate( -6deg );}

.look2_1{width:40%; bottom:0;}
.look2_2{width:50%; left:28%;top:28%;transform: rotate( 15deg );}
.look2_3{width:50%; bottom:0%; right:0;transform: rotate( -6deg );}
.look2_4{width:30%;left:30%;}
.look2_5{width:19%;right:0%;bottom:30%;transform: rotate( 3deg );}
.look2_6{width:15%;left:40%;bottom:15%;}
.look2_7{width:17%;right:10%;}

.look3_1{width:50%;left:25%;}
.look3_2{width:27%;left:0;top:15%;}
.look3_3{width:40%; right:-8%; transform: rotate( 7deg );top:17%;}
.look3_4{width:50%; right:-10%;top:55%;}
.look3_5{width:45%; left:0;bottom:0%;}
.look3_6{width:20%; right:7%;transform: rotate( 15deg );}
.look3_7{width:17%;bottom:18%;transform: rotate( -90deg );left:10%;}

.look4_1{width:80%; left:0%;bottom:0;}
.look4_2{width:25%; right:0%;}
.look4_3{width:25%;left:0;top:5%;}
.look4_4{width:35%;right:0;top:45%;transform: rotate( -15deg );}
.look4_5{width:35%;right:7%;bottom:0;}
.look4_6{width:17%;left:5%;bottom:20%;}

.goods .container{align-items: center;
}
.item_word{
	text-align:center;}
.stext{
	max-width:80%;
    margin-left:10%;
	margin-right:10%;
   text-align:left;
   padding:20px 0px 50px 0px;
   font-size:.9rem;
  /* background-color:#603;*/
   }
   
/**/
.down{margin-bottom:-35px;}

/*----------------------------------------btn------------------------*/

a.btn--orange {
  color: #fff;
  background-color:#769FBF;
  border-bottom: 5px solid #B7C7E1;
  padding:10px;
  border-radius:20px;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #fA0B5D4;
  border-bottom: 2px solid #B7C7E1;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
.btn_ck{padding:50px;}
#gallery{/*max-width:1200px;margin:0 auto; text-align:center;border:solid 10px #B7C7E1;*/}
.bt{padding-top:100px;padding-bottom:100px;}
/*------------------------------------------window--------------------*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}


	/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter .fLinkList li a {
    padding: 29px;
    display: block;
    color: #666;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    background-color: #e2e2e2;
}
#gFooter .fLinkList li a:hover {
    opacity: 0.7;
}
#gFooter address {
    padding: 35px 5px 56px;
    color: #666;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-family: "Helvetica Neue" , Helvetica , Arial , sans-serif;
    background-color: #D9D9D9;
}

#gFooter{
	
	bottom:0;

	}

/*------------------------------------------------------------
	fadeInUp
------------------------------------------------------------*/
.fadeInUp {
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
    transition: all 2s cubic-bezier(0.18, 1.01, 0.29, 1.04);
}
.fadeInUp.on {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.fadeIn {
	opacity: 0;
	-webkit-transform: translateY(25px);
	transform: translateY(25px);
    transition: all 2s cubic-bezier(0.18, 1.01, 0.29, 1.04);
}
.fadeIn.on {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}




@media all and (max-width: 749px) {
    #gHeader {width: 100px;
   
    top: 10px;
    right: 5px;
      
    }
	.splogo{
		display:block;}
	.pclogo{
		display:none;}
	.catchCopy{padding-left:5%;padding-right:5%;}
	.look{height:600px;}
	.look_2{width:40%; right:0%;}
	.look_3{width:40%; left:23%; transform: rotate( 15deg );}
	
	.look3_3{width:35%; right:0; transform: rotate( 10deg );}
	.look3_7{width:17%;bottom:18%;transform: rotate( -90deg );left:14%;}
	
	.look4_1{width:85%;}
	.look4_3{width:30%;left:5%;top:5%;}
	.look4_4{width:35%;right:0;top:50%;transform: rotate( 15deg );}
	
	
	.goods .container{display:block;}
	.goods .container .item{margin:0 auto; text-align:center;}
	.item_word{padding-top:30px;}
	
	#colorBtn{right:0;}
	.colorBnt_1,.colorBnt_2,.colorBnt_3,.colorBnt_4{width:30px;height:30px;}
			
	.topIt_pk{top:5%;left:20%;}
		.topIt_bg{top:35%;right:2%;}
		.topIt_bu{top:65%;left:0%;}
		.topIt_pr{top:75%;right:4%;}	
		.stext{/*background-color:#0F0;*/
			max-width:100%;
			margin:0;
            padding-left:10px;
			font-size:.8rem;}
			.bt{
				padding-top:50px;
				padding-bottom:50px;
			}	
			
		.ttl{
	width:15%;
	padding-right:5%;
	/*background-color:#CF0;*/
	}
.catchCopy2{width:77%;text-align:left;}
#secen2 .ttl{padding-left:5%;padding-right:0%;}
#secen2 .catchCopy2{padding-left:4%;}
#secen4 .ttl{padding-left:5%;padding-right:0%;}
#secen4 .catchCopy2{padding-left:4%;}
.inner{
		bottom:-60px;
		}
		
		/*.catchCopy{
			padding-top:80px;
			}
*/
	}