@charset "UTF-8";
html {
    -webkit-text-size-adjust: 100%;
}
body.fwn { background-color: #f7e98c;}
body.fwk { background-color: #e8c98b;}
body.ssn { background-color: #ecf9d6;}
body.ssk { background-color: #e8e080;}

pre {
  font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif;
  font-weight: 100;
  white-space: pre-wrap; 
}
h1, h2, h3 {
  font-family: 'Shippori Mincho B1', serif; font-weight: 600;
}
/*pやliはフォント指定してないので*/
.min400 { font-family: 'Shippori Mincho B1', serif; font-weight: 400; }
.gos {
  font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif;}


a { cursor: pointer;}
/*円窓*/
#enSo { width: 100vw; height: 100vh; position: fixed; top: 0;left: 0;
  background-image: url(../images/ensMurasNami.svg); background-size: cover; background-position: center; opacity: 0.8; z-index: 1;}

/*着姿アイコン SSの場合は巾も45vw*/
#kisg, #kisgSS { box-sizing: content-box; position: fixed; top: 6vh; left: -3vw; width: 30vw; height: 45vw; background-color: #280000; border: 1.5vw solid #280000; border-right-width: 2.3vw; box-shadow: -0.8vw 0 0 0.8vw rgba(40,0,0,0.6); opacity: 0.95; z-index: 1; transition: 0.8s; border-radius: 1.2vw;}
#kisgSS { width: 45vw;}
#kisg img, #kisgSS img { height: 100%; border-radius: 0 3vw 3vw 0;}

/*着姿の上「もどる」*/
.backB2 { color: #F5ECA3; font-size: 0.8em; position: absolute; top: 20vw; left: 1.8em; cursor: pointer; text-shadow: 1px 1px 1px #500; }
.backB2 span {content: ""; width: 4em; height: 4em; position: absolute; border: solid 1px #F5ECA3; border-radius: 50% / 50%; top: -1.5em; left: -0.5em; }
/*着姿ボタン #kisgから指定せな↑のimg指定に負けてまう*/
#kisg #kisgBtn, #kisgSS #kisgBtn { width: 4vw; height: 6vw; position: absolute; top:19.5vw; left: 24.5vw;  transition: 1.2s; cursor: pointer;}
#kisgSS #kisgBtn{ left: 39.5vw;}
/*Jsで開閉*/
#kisg.close { left: -27vw;}
#kisgSS.close { left: -41vw;}

/*⭐️着姿PC差分*/
@media screen and ( min-width: 770px) {
#kisg, #kisgSS {width: 20vw; height: 30vw; background-color: #280000; border: 8px solid #280000; border-right-width: 12px; box-shadow: none; border-radius: 12px;}
#kisgSS { height: 20vw;}
#kisg img, #kisgSS img {border-radius: 0 12px 12px 0;}
/*着姿の上「もどる」*/
.backB2 {top: 13vw; left: 3.5em;}
/*着姿ボタン*/
#kisg #kisgBtn { width: 2.4vw; height: 3.6vw; top:14vw; left: 17vw;} 
#kisgSS #kisgBtn{ width: 2vw; height: 3vw; left: 17vw; top: 9vw} 
  /*Jsで開閉*/
#kisg.close, #kisgSS.close { left: -17vw;}
}


main { position: relative; width: 100vw; 
}

/*絵型*/
.egt, .egtBc { position: relative; box-sizing: content-box;
  width: 90vw; height: 90vw;  margin: 18vh auto 30px; padding: 12vw 5vw; background-color: rgba(56,0,0,0.2); border-bottom: 6px solid rgba(255,255,255,0.4); border-top: 6px solid rgba(255,255,255,0.7);
}
.egtBc { position: absolute; top: 0vh; left: -88vw; padding-right: 3vw; margin: 0; transition: 1.5s; }
/*Jsで開閉*/
.egtBc.close { left: 0vw;}

.egt img, .egtBc img {width: 90vw;}
.egt p, .egtBc p { position: absolute; bottom: 12.5vw; right: 6vw; font-size: 0.6em; color: #999;}

/*絵型ボタン */
#egtBtn {width: 6vw; height: 8vw; position: absolute; top:53vw; right: 4vw;  transition: 1.5s; cursor: pointer; z-index: 1;}



/*⭐️ 絵型PC差分*/
@media screen and ( min-width: 770px) {
main > section:first-of-type {display: flex; justify-content: space-evenly; flex-direction: row-reverse; padding: 10vh 4vw 3vh
}
.egt, .egtBc  { position: static; padding: 0; margin: 0; box-sizing: content-box;
  width: 40vw; height: 40vw;  margin: 0; padding: 0; background-color: rgba(56,0,0,0.2); border: 1px solid #500 } 
.egt img, .egtBc img {width: 40vw;}
.egt p, .egtBc p { position: relative; bottom: 2em; left: 1em;}
#egtBtn {display: none} 
}

/*商品タイトル*/
.fTtl { margin: 1em auto; text-align: center; line-height: 1.5em; }
h2 {display: inline;font-size: 1em; color: #721; line-height: 2.8em;}
ruby { display: table-cell; }
rt { font-size: 0.5em; margin-top: -7.1em; display: block;}
h1 { display: inline; font-size: 1.4em; color: #555;}
.akai { font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif; color: #D51122; opacity: 0.8; vertical-align: 10%; }
h1 ruby rt { font-size: 0.4em; margin-top: -4.4em; }

/*商品説明*/
.sset { font-size: 0.8em; line-height: 1.8em; color: #555;  padding: 8vw;}
.sset p { font-size: 0.8em; color: #721; line-height: 1.3em; padding: 1em 0.2em 0;}
/*区切線*/
.senCha { width: 70vw; margin: 1vh auto; border-top: 1px solid rgba(51, 0, 17, 0.8); }
/*価格前にもういちど商品タイトル*/
.fTtl2 { width: 85vw; font-size: 0.85em;}
.fTtl2 h1 {color: #301;}
.fTtl2 p { font-weight: 400; color: #001F64; font-size: 0.8em; line-height: 2.4em;}


/*幅が狭いスマホの場合、改行*/
@media screen and (max-width: 419px) {
.br::before {
        content: "\A";
        white-space: pre; } }

/*価格*/
.prc { position: relative; text-align: center; padding-bottom: 2.5em; margin: 5vh auto;}
.prc p { font-family: 'Shippori Mincho B1', serif;
font-weight: 400; color: #001F64; line-height: 1.2em; }
.prc p:nth-child(1) { font-size: 1em; line-height: 1.5em;}
.prc p:nth-child(2) { color: #110; font-size: 2.4em; }
.prc p:nth-child(3) { font-size: 0.8em; color: #110;}
/*ボタンaをabsoにせなクリックでけん。ベースrelはprc*/
.prc a { position: absolute; left: calc(50vw - 4em); bottom: 0; display: block; width: 8em; padding: 0.3em;  color: #f6f9e8; background-color: #E51; border-radius: 0.9em / 0.8em; box-shadow: 0 0 0.6em rgba(255, 255, 255, 0.8) inset; cursor: pointer; z-index: 1;}

/*生地見本*/

.nuno { width: 82vw; margin: 4vh auto; text-align: center;}
.nuno h3 { color: #D95; font-size: 0.9em;}
.nuno section {width: 80vw; height: 80vw; margin: 32px auto 10px;  position: relative;}
.nuno img {width: 100%; height: 100; padding: 10px; border: 1px solid rgba(51, 0, 17, 0.8); background-color: #fff;}
/*サイズ表記*/
.nuno section pre {position: absolute;bottom: 0; right: 0; margin: 12px 16px; font-size: 0.72em; line-height: 1.1em; color: #FFF; text-align: end; text-shadow: 1px 1px 2px #000;}
.nuno section pre span {font-size: 0.78em;}
.nuno p { color: #001f64; font-size: 0.8em; line-height: 1.4em;}


/*⭐️ 商品タイトル〜生地見本　PC差分*/
@media screen and ( min-width: 770px){
.fTtl { font-size: 1.3em; } 
.sset { font-family: 'Shippori Mincho B1', serif; font-size: 1em; line-height: 2em; width: 60vw; margin: 2em auto 3em; padding: 0
  } 
  .nuno h3 { font-size: 1.4em; line-height: 1.8em}
.nunoBox {display: flex; flex-direction: row-reverse; justify-content: space-around; padding: 4vh 4vw}
.nuno span span section {width: 30vw; height: 30vw; margin: 0 0 1em;  position: relative;} 
}



/*標準寸法*/
.hsnNagi, .hsnKama {width: 100%; margin: 2em auto 2em; padding: 0 3vw;}
.hsnNagi {height: 10em;}
.hsnKama {height: 12em;}
/*薙刀と鎌倉で標準寸法欄の高さが違くて*/

.hsnNagi p, .hsnKama p { font-size: 0.9em; color: #301; line-height: 1.5em; margin: 0.5em; }
.hsnNagi p span, .hsnKama p span { font-size: 0.7em;}

.hsnNagi ul, .hsnKama ul { display: flex; width: 100%;  flex-direction: column; flex-wrap: wrap; padding: 10px 16px; border: 1px dashed #EC3; border-radius: 6px;}
.hsnNagi ul {height: 10em; }
.hsnKama ul {height: 12em; }
/* ↑ここと*/

.hsnNagi li, .hsnKama li { font-size: 0.7em; color: #721; padding: 0.2em; }
.chu p {font-size: 0.6em; color: #721; line-height: 1.5em; margin: 10px;}

/*注釈*/
.chuM { font-size: 0.8em; line-height: 1.6em; color: #777; padding: 8vw; position: relative; margin: 10vh 0;}
.chuT { list-style: none; cursor: pointer; line-height: 2em; position: absolute; z-index: 1;}
.chuT::after {content: ""; width: 0; height: 0; border: transparent 0.7em solid; border-top-color: #BBB; position: relative; top: 0.9em;}

/*⭐️ 標準寸法.注釈　PC差分*/
@media screen and ( min-width: 770px){
  .hsnNagi, .hsnKama {width: 60%; font-size: 1.2em; height: 7em}
  .hsnNagi ul, .hsnKama ul { height: 7em; border: 2px dashed #A12; }
  /*注釈*/
.chuM { font-size: 1em; line-height: 1.8em; color: #777; padding: 8vh 12vw ; margin: 8vh 0;}
}