@charset "UTF-8";
/* CSS Document */
/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;

font-family: 'Pacifico', cursive;
*/

img{width:100%;}

/*メイン画像*/
#main{margin:0 auto; max-width:1200px;}
.pc{display:block;}
.sp{display:none;}

/*メインテキスト*/
#info-{width:100%; padding:10% 0 10% 0; font-family: 'Noto Sans JP', sans-serif;}
#info- p{font-size:14px; line-height:25px;}

/*LP*/
#lp{display:block; text-align:center; font-family: 'Noto Sans JP', sans-serif;}


/*コーデ*/
#contents{display:block; padding:5% 0 0; overflow:hidden; clear:both;}
.itemtext{ font-family: 'Noto Sans JP', sans-serif; font-size:14px; line-height:28px; clear:both; margin-bottom:10%;}
.code{clear:both; width:80%; margin:0 auto 3% auto; clear:both;}
.code h6{text-align:left; font-size:18px; margin:5% 0 2%; font-weight:700; letter-spacing:5px;}
.code a{padding:3% 0; display:block; border-bottom:1px solid #000; text-align:left; color:#000; font-size:12px;}
.code a b{float:right; font-weight:bold; background-color:#000; color:#fff; padding:1% 2%; font-size:80%;}
.material-icons{vertical-align:middle;}

.con_title{width:100%;}
.con_title h3{font-size:20px; margin:0 auto 3%; font-weight:700; position:relative; padding-bottom:1em; width:40%;}
.con_title h3:after{content:''; position:absolute; left:0; bottom:0; width:100%; height:7px;}

.con-left{position:relative; height:800px; overflow:hidden; margin:5%;}
.circle-1{width:500px; height:500px; border-radius:50%; position:absolute; top:0; left:70px; z-index:1;}
.iteminfo{width:100%; overflow:hidden; margin:0 auto; position:absolute; top:0px; left:0; z-index:2;}
.left-left{width:40%; float:left; padding-left:10%; margin-bottom:5%;}
.left-right{width:60%; float:left;}
.left-right > .text1{width:55%; float:left; text-align:left; margin-top:10%;}
.left-right > .hira{width:45%; float:left; padding:5% 10% 0 0; margin-bottom:8%;}
.left-right > .text2{width:100%; clear:both; padding:5% 15% 10% 0;}

.con-right{position:relative; height:800px; overflow:hidden; margin:5%;}
.circle-2{width:500px; height:500px; border-radius:50%; position:absolute; top:0; left:300px; z-index:1;}
.right-left{width:40%; float:right; padding-right:5%; margin-bottom:5%;}
.right-right{width:60%; float:right;}
.right-right > .text1{width:55%; float:left; text-align:left; margin-top:10%;}
.right-right > .hira{width:45%; float:left; padding:5% 0 0 10%; margin-bottom:8%;}
.right-right > .text2{width:100%; clear:both; padding:5% 0 10% 15%;}

.itemname{margin-bottom:5%; font-size:16px; font-family: 'Noto Serif JP', serif; line-height:25px; font-weight:500;}
.itemtext1{font-family: 'Kosugi Maru', sans-serif; font-size:12px; line-height:23px;}
.itemcopy{margin-bottom:5%; font-size:18px; font-family: 'Noto Serif JP', serif; border-bottom:1px solid #000; padding-bottom:2%; font-weight:500;}

.con1{background-color:#d0cea2;}
.con2{background-color:#a4c49b;}
.con3{background-color:#e3c7a6;}

.stripe1:after{background:repeating-linear-gradient(-45deg, #d0cea2, #d0cea2 2px, white 2px, white 4px);}
.stripe2:after{background:repeating-linear-gradient(-45deg, #a4c49b, #a4c49b 2px, white 2px, white 4px);}
.stripe3:after{background:repeating-linear-gradient(-45deg, #e3c7a6, #e3c7a6 2px, white 2px, white 4px);}

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

	
/*メイン画像*/
.pc{display:none;}
.sp{display:block;}

/*メインテキスト*/
#info-{padding:20% 0 20% 0; font-family: 'Noto Sans JP', sans-serif;}

	
/*コーデ*/
#contents{display:block; padding:10% 0; font-family: 'Noto Sans JP', sans-serif;}
.itemtext{margin:10% 0; font-size:13px;}
.code{width:100%;}
.code a{padding:5% 0; font-size:11px; line-height:20px;}
.code a b{float:right; font-weight:bold; background-color:#000; color:#fff; padding:1% 2%; font-size:70%;}
.code h6{font-size:13px; margin:5% 0 2%; letter-spacing:2px;}
	
.con_title{font-size:15px; margin-bottom:20%;}
.con_title h3{font-size:15px; width:80%;}
	
.con-left{height:1110px; margin:0;}
.circle-1{width:330px; height:330px; top:0; left:0}
.left-left{width:60%; float:none; padding:0 12% 0 28%; margin-bottom:15%;}
.left-right{width:100%; float:none;}
.left-right > .text1{width:60%; float:left; margin-top:0; font-size:13px;}
.left-right > .hira{width:40%; float:left; padding:0;}
.left-right > .text2{width:100%; padding:10% 0 5% 0; font-size:15px;}

.con-right{height:1110px; margin:0;}
.circle-2{width:330px; height:330px; top:0; left:0}
.right-left{width:60%; float:none; padding:0 12% 0 28%; margin-bottom:15%;}
.right-right{width:100%; float:none;}
.right-right > .text1{width:60%; float:left; margin-top:0; font-size:13px;}
.right-right > .hira{width:40%; float:left; padding:0;}
.right-right > .text2{width:100%; padding:10% 0 5% 0; font-size:15px;}
	
.itemname{margin-bottom:5%; font-size:14px; font-family: 'Noto Serif JP', serif;}
.itemtext1{font-family: 'Kosugi Maru', sans-serif; font-size:12px; line-height:23px;}
.itemcopy{margin-bottom:5%; font-size:18px; font-family: 'Noto Serif JP', serif; border-bottom:1px solid #000; padding-bottom:2%; }
	
}