@charset "UTF-8";
html {
    -webkit-text-size-adjust: 100%;
}
body { background-color: #E6FCF5;}
h1, h2, h3 {
  font-family: 'Shippori Mincho B1', serif; font-weight: 600; color: #001F64;}
pre, p, ul {
  font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif;
  font-weight: 100;
  white-space: pre-wrap; 
}

 pre { padding: 0.2em; font-size: 0.64em; color: #666;line-height: 1.9em;}

form {  font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif;
  font-weight: 400;}

/*フォント指定変える時*/
.min400, .min600, .min800 { font-family: 'Shippori Mincho B1', serif; }
.min400 { font-weight: 400;}
.min600 { font-weight: 600;}
.min800 { font-weight: 800;}

.gos, .gos600 {
  font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif;}
.gos { font-weight: 100;}
.gos600 { font-weight: 600;}

#enSo {
  height: 100vh; width: 100vw; background-image: url(../images/enSoNamiSenMid.svg); z-index: 1;
  background-size: cover;
  background-position: center bottom; position: fixed;}
#bcBtn { position: fixed; right: 0; width: 4em; height: 6em; writing-mode: vertical-rl; color: #128; font-size: 0.5em; text-align: center;
background-image: url(../images/hikiteShiroKon2.svg); padding: 1em; margin: 1em; z-index: 3; cursor: pointer;}

/*仕事場風景写真*/
main article { position: relative; padding: 14vw 4vw 8vw;  background-repeat: no-repeat; background-position:4vw 0; background-size: 96vw;}
main article:first-of-type { background-image: url(../images/snpo/michin2.jpg); padding: 30vw 4vw 8vw;}
main article:nth-of-type(2) { background-image: url(../images/snpo/patn.jpg);}
main article:nth-of-type(3) { background-image: url(../images/snpo/hrym.jpg)}
main article:nth-of-type(4) { background-image: url(../images/snpo/makiKi2.jpg)}
main article:nth-of-type(5) { background-image: url(../images/snpo/nuno.jpg)}
main article:nth-of-type(6) { background-image: url(../images/snpo/iron2.jpg)}

/*タイトル*/
header h1, main article h1 {font-size: 0.8em; margin: 0.8vh 0.2vh 0.4vh; }
.senAi {width: 36vw; height: 1px; margin-bottom: 1em; background-color: #001F64; opacity: 0.8; }

/*入力・採寸　アタマ書き*/
.atmgk { display: flex; width: 100%; justify-content: space-around; margin-top: 1em;}
.atmgk p { display: inline-block; position: relative; width: 10em; height: 2.4em; text-align: center; line-height: 2.1em; font-size: 0.8em; font-weight: 600;  color: #FFF; background-color: #FA2; border: #FA2 1px solid; border-radius: 10px; box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.8) inset; cursor: pointer; z-index: 1}
.atmgk + h3 { text-align: center; width: 80vw; margin: 0.8em auto 1em; font-size: 0.7em; line-height: 1.5em;}

/*お盆*/
/*スペースの確保・位置ぎめ*/
.bonZa { position: relative; width: 100vw; left: -4vw; margin: 0.8em auto 0; }
.bonZa.Za1 { height: 16em;}
.bonZa.Za2 { height: 14em;}

.cmBon, .skBon, .adBon {position: absolute; top: 0; left: 8vw; z-index: 2;
width: 84vw;   padding: 0.8em 0.7em 0.7em ;
border: 3px #A12 solid; border-radius: 0.5em;
background-color: #fcffec; 
box-shadow: 11px -2px 0 2px rgba(247, 221, 156, 0.7),
12px -3px 0 2px rgba(245, 236, 163, 0.7) inset; transition: 1.2s;
}
.skBon { top: 1em; left: -82vw;
}
.adBon { z-index: 1;}
.cmBon.kakre { left: -77vw;} 
.skBon.izl { left: 4vw;} 
.adBon.kakre { left: -72vw;}

.cmBon.fixTop, .skBon.fixTop {
  position: fixed;
}
.adBon.fixTop { position: fixed; left: 11vw; top: 68vw}
.adBon.fixTop.kakre { left: -72vw;} 

/*くじら尺での入力はこちら*/
.syakKochi { display: block; position: absolute; top: 5%; right: -3.8em; color: #FFF; 
  text-shadow: 1px 2px 3px #A12;
text-align: left; font-size: 0.6em; line-height: 1.2em;
}
.syakKochi.kakre {display: none;}

/*持ち手　右はスライドボタン*/
.motsutkHi, .motsutkMi-cm, .motsutkMi-sk, .motsutkMi-ad {
width: 6px; height: 5.8em; padding: 2em 0; position: absolute; top: calc(50% - 2.9em); left: 4px; 
}
.motsutkMi-cm, .motsutkMi-sk, .motsutkMi-ad {
left: calc(100% + 5px); cursor: pointer;}
/*文字案内にもかぶせる*/
.motsutkMi-sk {
 height: 8.8em; padding: 5em 0 2em; top: calc(50% - 5.9em); z-index: 2;
}



/*ショルダータイトル「寸法」　レジェンドに当たるとこ*/
form div:first-of-type { position: absolute; top: 0.6em; left: 1.8em; font-weight: 600; color: #D95; font-size: 0.6em;}


/*入力お盆*/
table {width: 100%; text-align: center; font-size: 0.8em}
.adBon table { width: auto; margin-left: auto;}
/*🌙名前と服種選択欄*/
.onamae { border-bottom: 1px solid #D95}
.onamae tr:first-of-type td { padding: 0.5em; font-size: 0.9em; color: #001F64; text-align: end;}
.onamae tr:last-of-type td { text-align: center;}
select { color: #f2ffda; background: linear-gradient(to bottom, #500, #A12); padding: 0.2em; margin: 0.4em auto 0.8em;
border-left: 1px solid #110; border-top: 1px solid #110; border-radius: 2px; 
}
option { background-color: #f7e98c; color: #128; font-family: 'Shippori Mincho B1', serif; font-weight: 600; text-align: end;}

caption input { margin-left: 0.5em; margin-right: 1em; width: 8em}
.chuSnde { font-size: 0.6em; color: #721; text-align: left; margin-top: 0.6em; line-height: 1.3em; }
table th {padding-top: 0.5em; font-size: 0.9em; color: #001F64;}
td {font-size: 0.85em; color: #128; 
}
/*尺寸分に変換表示*/
.syakst td {
  font-size: 0.7em; color: #777; line-height: 1em;
}

input, textarea { font-size: 1.05em; text-align: right; border-left: 1px solid #7CD; border-top: 1px solid #7CD; border-radius: 4px;background-color: #FFF;
} 
input[type="number"] { width: 3.3em; padding: 0 0.2em; margin: 0.2em; 
 -moz-appearance:textfield;}
input::placeholder { color: #7CD;}
input:focus { background-color: #fce3ff; border-left: 2px solid #FA2; border-top: 1px solid #FA2;
}
textarea { text-align: left; width: 100%; margin: 0.3em 0; padding-left: 0.4em;}
textarea::placeholder {color: #128;font-size: 0.8em;}



.kosim {position: relative;}
.sankak {display: inline-block; width: 2em; height: 0.7em; position: absolute; bottom: -0.7em; left: calc(50% - 1em)}

.bonZa fieldset { width: 90%; background-color: #F7DD9C; margin: 0.5em 0 0 auto; padding-bottom: 0.3em}
legend { margin: 0 1em 0 auto; font-size: 0.6em; color: #A12}
/*文末注*/
.chuKet {
  font-size: 0.6em; color: #666; text-align: end; margin-top: 0.6em; line-height: 1.3em;
}
/*お盆　住所*/
.adBon th {text-align: end; font-family:  "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif; font-weight: 600; font-size: 0.8em; padding: 0.3em 0.4em 0.3em 0;}

.adBon tr:nth-of-type(3) th { font-size: 0.6em;}
.adBon tr td {text-align: left; padding-left: 0.5em;}
.adBon tr td input { width: 15em; text-align: left; padding-left: 0.5em;}
.adBon tr:nth-of-type(1)  td input
{ width: 7em}
.adBon tr:nth-of-type(4)  td input
{ width: 10em}
.adBon tr td.chu { color: #A12; font-size: 0.6em; text-align: center}
/*送信確認ボタン*/
input[type="submit"] { display: block; margin: 0.5em auto 0; font-size: 0.7em;  width: 14em; height: 2em; text-align: center;
color: #A12; background-color: #FA2; border: #ffce80 2px solid;border-radius: 0.4em; box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.9) inset; cursor: pointer;}

/*測るやり方はせやな3つあるは 総論*/
.seyana1 { font-size: 0.8em; color: #A12; line-height: 1.6em; padding-left: 3em; margin: 0.5em 0 1em;
}
.seyana1 span { color: #001F64; font-size: 0.92em }

.hakarikata fieldset {
  background-color: #FFF; width: 80vw; margin: 1em 0;
  border: 2px solid #2177BC; border-radius: 0.5em;  
}
.hakarikata fieldset:first-of-type {
  margin-left: 6vw;
}
.hakarikata fieldset:nth-of-type(2) {
  margin-left: 12vw;
}
.hakarikata fieldset:last-of-type {
  margin-left: 3vw;
}
.hakarikata fieldset legend {margin-left: calc(40vw - 5em); color: #F82; font-size: 0.8em;
}
.hakarikata fieldset:last-of-type legend {
  margin-left: calc(40vw - 6em);
}
.hakarikata fieldset pre {
  font-size: 0.7em; line-height: 1.4em; margin: 0; padding: 0.5em 1em;
}
/*🌙ボタン*/
/*ボタン裏は位置サイズ、ボタンに合わせる。fontSize0.6掛けなあかん。めんどくさ*/
.button-ura {position: relative;  width: 6em; height: 0.84em; margin: 0 auto 0.2em; }
.hakarikata fieldset button { position: absolute; display: block; margin: 0 auto 0.5em; font-size: 0.6em;  width: 10em; height: 1.4em; line-height: 0.2em;
color: #E20; background-color: #FA2; border: #ffce80 2px solid;border-radius: 0.4em; box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.9) inset; cursor: pointer; z-index: 1;
}
.hakarikata fieldset button span { color: #fff;
}

/*来店採寸*/
.raiten { width: 80vw; position: relative; top: -7vw; left: 12vw; z-index: -1; background-color: #fcf7cc; border: dotted #FA2 2.4px; padding: 0.9em 0.5em 0.5em 0.8em; }
.raiten p { font-size: 0.62em; color: #721; line-height: 1.7em;}
.raiten p span:first-of-type { font-size: 1.1em;} 
.raiten p span:nth-of-type(2) {color: #D95;}

/*採寸説明*/
/*ボタンでリンクできはったときにお盆の影に隠れんように*/
#yali-ura1, #yali-ura2 { position: absolute; top: -80vw;}
.yalikata {
  padding-left: 8vw; padding-right: 6vw;
}
.yalikata img{  width: 34vw; padding: 0.5em 0.1em;}
.yalikata > img:nth-of-type(1)  { margin-left: 3vw; float: right;}
.yalikata > img:nth-of-type(2) { margin-right: 5vw; float: left;}
.yalikata pre span.gos600 { font-size: 1.1em; color: #280000;}
.yalikata pre:last-of-type::after { content: ""; clear: both;}

/*採寸説明1　身幅の図*/
.efb-ura {height: 80vw}
.egtflexBox { display: flex; flex-direction: column; width: 27vw; margin-left: 0.8em; float: right}
.egtflexBox img {width: 26vw;}

/*お仕立ての流れ*/
/*流れ図*/
.senAi.nagare { margin-bottom: 0.3em;}
.nagareBox { display: flex; justify-content: space-between; align-items: flex-start;}
.nagareBox ul { line-height: 1em; flex-shrink: 0; width: 35vw; text-align: center; margin-right: 6vw;}
.nagareBox ul li { width: 100%; padding: 0.3em; line-height: 1.2em; }
.nagareBox ul li { position: relative; font-size: 0.6em; color: #128; border: #F82 2px solid; border-radius: 5px; box-shadow: 0 0 12px 2px rgba(255, 170, 34, 0.9) inset;}

.nagareBox ul li span.min400 { font-size: 0.9em; color: #111;}
/*三角矢印*/
.nagareBox ul li:not(:last-child)::after { content: ""; display: block; height: 0; width: 0; padding: 0; border: 0.8em solid transparent; border-top-color: #FA2; position: absolute; bottom: -2em; left: calc(17.5vw - 0.8em); }

.nagareBox ul li:nth-child(1) { color: #004FD0; background-color: #F82; border: #F82 solid 2px; border-radius: 6px; box-shadow: 0 0 14px 4px rgba(255, 255, 255, 0.9) inset;}

.nagareBox pre { margin-top: 1em;}



footer { background-color: #001F64; text-align: center; position: relative
}
footer img {width: 12vw; display: inline-block; margin-top: 1em
}
footer p { font-family:  'Shippori Mincho B1', serif; font-weight: 400; color: #fff7c2; font-size: 0.7em; line-height: 1.5em; padding: 0.5em 0 5em;
}
footer div{ position: absolute; font-size: 0.6em; color: #bbb; top: 0.3em; left: 0.6em ;cursor: pointer; z-index: 1}
footer div::before { content: "";display: inline-block; height: 0; width: 0; border: 0.4em solid transparent; border-right-color: #bbb; margin-right: 0.4em; }

/*未完*/
.mikan { width: 80vw; margin: auto; text-align: center; line-height: 1.4em; padding: 0.5em 1em; border: 3px solid #D13; border-radius: 0.5em; color: #D13; white-space: pre-wrap}

.mikan span { font-size: 0.7em}