@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');
body{max-width:1000px;width:100%;margin:0 auto;padding:0 0 30vh;font-family:"M PLUS 1","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",verdana,Osaka,sans-serif;font-optical-sizing:auto;font-size:14px;font-weight:400;line-height:200%;color:#333;}
h1,h2,h3,h4,p,span{margin:0;padding:0;font-size:14px;font-weight:400;}
img{max-width:100%;}
section{margin:0;padding:0;}
ul{list-style-type:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;}
li{display:inline-block;text-align:center;vertical-align:top;}
li img{max-width:90%;}
li span{display:block;line-height:150%;font-size:14px;}

h1{background-image:url(./img/info/title.gif);aspect-ratio:2500/667;background-repeat:no-repeat;background-size:contain;}

#zoom{position:absolute;overflow:hidden;width:200px;height:200px;top:0;left:0;z-index:100;background-color:#fff;border:2px solid #fff;border-radius:50%;pointer-events:none;display:none;}
#zoom div{position:relative;width:100%;height:100%;}
#zoom div img{position:absolute;max-width:1024px;width:1024px;height:802px;top:0;left:0;}

#header{margin-bottom:10px;}
#header p span{display:inline-block;width:60%;vertical-align:top;}
#header p span#handmade{display:inline-block;width:40%;background-image:url(./img/info/tenui.jpg);aspect-ratio:1200/368;background-repeat:no-repeat;background-size:contain;background-position:center;}
#header p span a{color:#ff1493;}

span.tejun_girl{display:block;width:100%;background-image:url(./img/info/tejun_girl.JPG);aspect-ratio:600/293;background-repeat:no-repeat;background-size:contain;background-position:center;}

#main{position:relative;top:0;background-color:#fff;}
#side{position:absolute;top:0;right:0;width:40%;z-index:102;}
#select{position:relative;z-index:101;overflow:auto;}

#side div{border:dotted #333;padding:10px 20px;margin:10px auto;background-color:#fff;}
#side div p.total{border-top:2px #333 solid;margin-top:8px;padding:5px 0;}
#side button{appearance:none;width:100%;padding:8px 5px 14px;font-size:16px;margin:10px auto;color:#333;}
#side button.sbmt{background-color:#ffb6c1;}
#side button span{display:inline-block;animation:waitZ 2s linear infinite;}
@keyframes waitZ{from{transform:rotateZ(0deg);} to{transform:rotateZ(360deg);}}

#preview{position:relative;padding:0 20px;height:500px;width:55%;}
#preview span{display:block;position:absolute;top:0;left:0;width:100%;aspect-ratio:1024/802;background-repeat:no-repeat;background-size:contain;}
#preview span#noselect{background-image:url(./img/preview/base1.png);}

#step3{padding-bottom:100px;}

#step1 img.menu{width:228px;cursor:pointer;padding-top:20px;opacity:0.85;}
#step2 img.menu{width:228px;cursor:pointer;padding-top:20px;opacity:0.85;}
#step3 img.menu{width:319px;cursor:pointer;padding-top:20px;opacity:0.85;}

#step1 .select,
#step2 .select,
#step2 .select ul.color,
#step3 .select,
#step3 .select ul.color{display:none;}

#step1 .select li,
#step2 .select li,
#step3 .select li{cursor:pointer;background:rgba(255,255,255,0.85);}

#step1 .select li{width:15%;}
#step1 .select li.selected{color:#f00;}
#step1 .select li span.img{display:inline-block;width:calc(100% - 10px);padding:5px;border:none;aspect-ratio:1/1;background-repeat:no-repeat;background-size:100%;}

#step2 .select ul.place{margin-bottom:10px;}
#step2 .select ul.place li{text-align:left;padding-left:5px;width:10%;}
#step2 .select ul.place li.selected{color:#f00;}

#step2 .select ul.color li{width:7%;}
#step2 .select ul.color li.rivet{width:14%;}
#step2 .select ul.color li span{display:inline-block;width:calc(100% - 10px);padding:5px;border:none;aspect-ratio:1/1;background-repeat:no-repeat;background-size:100%;}
#step2 .select ul.color li.selected span{padding:3px;border:solid 2px #f00;}

#step3 .select ul.item{margin-bottom:10px;}
#step3 .select ul.item li{text-align:left;;padding-left:5px;width:22%;}
#step3 .select ul.item li.selected{color:#f00;}
#step3 .select ul.color li{width:14%;}
#step3 .select ul.color li span{display:inline-block;width:calc(100% - 10px);padding:5px;border:none;aspect-ratio:1/1;background-repeat:no-repeat;background-size:100%;}
#step3 .select ul.color li.selected span{padding:3px;border:solid 2px #f00;}

#main #side{display:block;}
#main #side p.detail span{padding-left:0.5em;}
#main #side p.detail span.select_label_req:empty::after{color:#999;content:'必須　未選択';}

#select #side{display:none;}

#gotopage{margin:10px 0 20px;text-align:center;}
#gotopage a{display:inline-block;padding:0.5em 1.5em;margin-left:3em;text-decoration:none;color:#333;border:1px solid #333;border-radius:8px;font-size:18px;}
#inquiry{margin:20px 0;}
#inquiry p{padding:0 0 20px;}
#inquiry #item_id{font-size:18px;width:16em;padding:10px 15px;border-radius:8px;border:2px solid #ddd;box-sizing:border-box;appearance:none;-webkit-appearance:none;}
#inquiry button{border-radius:8px;margin:0 0.5em;padding:10px 25px;color:#333;border:1px solid #999;font-size:16px;appearance:none;-webkit-appearance:none;}

section.mobile{display:none;}

@media screen and (max-width:1199px){
  body{max-width:98vw;width:98%;font-size:14px;line-height:180%;padding:0 1% 30vh;}
  h1,h2,h3,h4,p,span{font-size:14px;}
  #header p span,#header p span#handmade{display:block;width:auto;padding:0 1em;}
  #header p img{display:block;width:auto;}
  #preview{height:auto;aspect-ratio:1/1;}
  #step2 .select ul.place li{width:15%;}
  #step3 .select ul.item li{width:30%;}
  #side button{font-size:16px;}
}
@media screen and (max-width:639px){
  h1,h2,h3,h4,p,span{font-size:14px;}
  #preview{position:relative;padding:0 5%;width:90%;height:auto;aspect-ratio:512/450;}
	#main #side{display:none;}
	#select #side{display:block;}
	section.mobile{display:block;}
  #side{position:relative;top:0;right:0;width:100%;padding-bottom:100px}
	#step3{padding-bottom:30px;}
  #step1 img.menu{width:171px;}
  #step2 img.menu{width:171px;}
  #step3 img.menu{width:237px;}
	#step1 .select,#step2 .select,#step3 .select{background:rgba(255,255,255,0.85);}
  #step1 .select li{width:22%;background:transparent;}
  #step1 .select li span.text{font-size:13px;line-height:130%;}
  #step2 .select ul.place li{width:auto;font-size:13px;letter-spacing:-0.2px;line-height:130%;margin-left:3px;}
  #step3 .select ul.item li{width:auto;font-size:13px;line-height:130%;}
  #side button{font-size:16px;}
	#zoom{width:0;.height:0;border:none;}

	#gotopage a{margin-left:0;}
	#inquiry p{width:90%;margin:0 auto;}
	#inquiry #item_id{display:block;width:80%;margin:0 auto 10px;}
	#inquiry button{display:block;width:80%;padding:10px 0;margin:0 auto 10px;}
	
}
