@charset "UTF-8";
html {
    -webkit-text-size-adjust: 100%;
}

p, pre {
  font-family: "游ゴシック","ヒラギノ角ゴ ProN","メイリオ","MS Pゴシック",sans-serif;
  font-size: 1.1em;
  color: #555;
  line-height: 2em;
}
pre {white-space: pre-wrap;}

a { cursor: pointer; position: relative; z-index: 1; 
}

.senCha { width: 60vw; height: 1px; margin: 0 auto; background-color: #301; opacity: 0.8;}
.senCha.M { width: 60vw; height: 1px; margin: 6vh auto 5vh; background-color: #301; opacity: 0.8;}

#enSo, .bgpic {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  position: fixed; top: 0; left: 0;
}
#enSo { background-image: url(../images/enSoNamiSenY.svg); z-index: 1; background-position: center center;
}
.bgpic {background-position: center bottom; z-index: -1;
}
  
/*背景キーフレームアニメ*/
.bgpic { animation: syoji 2.4s cubic-bezier(0.8, 0, 0.7,1.0) infinite alternate;}
@keyframes syoji {
  0% { filter: saturate(0%);
  }
  60% { filter: saturate(0%);
  }
  100% {filter: saturate(100%);
    opacity: 0.2;
  }
} 

.test1, .test2, .test3 {
  width: 30vw; height: 12vw;margin: auto; background-color: #ed0000; opacity: 0.9;
}
.test2 { background-color: #e20a1a;}
.test3 { background-color: #e2164c;}



header { display: flex; flex-direction: column; justify-content: space-around; padding: 6vh 0;
  height: 100vh;
  text-align: center;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 600;
  color: #001F64;
}
#makiKS { 
  width: 20vw;
  margin: 0 auto;
}
header h3 {
  font-size: 0.8em;
  line-height: 3em;
}
header h1 {
  color: #2F0000;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 2em;
}
/*今期の紹介*/
.akif {width: 30vw; margin: 0.5vw auto ;
}
header h2 a {
  font-size: 1em;line-height: 1.6em; color: var(--afcha);}

/*ニュース*/
.news { z-index: 1;}
.news div { margin-bottom: 2vh;
}
.news h5 { line-height: 1.5em; font-size: 0.8em;
}
.news h5 a { color: #2C2;
}
.news pre {  font-family: 'Shippori Mincho B1', serif; font-size: 0.8em; line-height: 1.3em; list-style: none; cursor: pointer; color: #001F64; }


/*ナビ　まずsp用*/

/*サイドナビ　z:2で着姿より上に*/
.nav { position: fixed; top: 0; left: -11em; background: linear-gradient(to left, #e6d18b 0%, #e4cc84 25%, #deba6f 100%) ; opacity: 0.95;
font-family: 'Shippori Mincho B1', serif; font-weight: 600; text-align: left; border-right:1px solid #F5ECA3; border-bottom:1px solid #F5ECA3;  box-shadow: 1px -1px 1px 2px rgba(172, 87, 71, 0.9);
  border-bottom-right-radius: 4px; z-index: 2; transition: 0.7s;
}
.nav.chijim { transform: translateX(-1em); transition: 0.3s; }
.nav.hirak { left: 0;}

/*目盛・高さulに合わせる*/
.memori { height: 21em; position: absolute; top: 1px; right: 0;}
nav div { width: 1px; height: 21em; position: absolute; top: 0; opacity: 0.9;}
nav div:first-of-type {
  right: 0.9em; background: url(../images/takesj1.svg) repeat-y;
}
nav div:nth-of-type(2) {
 right: 0.75em; background: url(../images/takesj2.svg) repeat-y;
}
nav div:nth-of-type(3) {
 right: 3em; background: url(../images/takesj3.svg) repeat-y;
}
/*サイドナビ 引き手*/
.sideB { width: 1.9em; height: 4.1em; position: absolute; top:10em; right: 0; padding: 1em 0.5em 1em 0; cursor: pointer; z-index: 2;}

/*大きさはulで決定　マージン分も忘れずに*/
.nav ul { display: flex; flex-direction: column; justify-content: space-around;
  width: 10em; height: 20em; margin:0.5em 1.5em; line-height: 1em;
}
.akif-nav { width: 2em; opacity: 0.7;}
.nav ul li { position: relative; }
.nav ul li a { color: #2F0000; font-size: 1.0em;}
.Season {font-size: 1.3em; line-height: 1.6em; color: #D51122;}
.nav ul li a span:last-child { font-size: 0.75em; line-height: 1.8em;}
/*三角印*/
.nav ul li a span:last-child::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 0.8em; border: 0.5em solid transparent; border-left-color: #E20; vertical-align: -0.1em}
/*グレー表記*/
.nav li:nth-of-type(3) a { color: #EEC;}
.nav li:nth-of-type(3) a span:last-child::after {border-left-color: transparent;}


/*🌙やっとメイン*/
/*親div*/
main > div { width: 100vw; max-width: 1280px; margin: 0 auto 12vh; padding: 6vh 0 8vh;
}
/*背景色とマージン（背景フォト高さ）*/
#afTop { background-color: #721;}
#FWnagi { background-color: #f7e98c; margin-bottom: 5vh}
#FWkama { background-color: #e8c98b}
#SSnagi { background-color: #F6F9E8; margin-bottom: 5vh}
#SSnagiK { background-color: #ecf9d6}
#SSkama { background-color: #d4cf8c; margin-bottom: 5vh}
#SSkamaK { background-color: #e8e080; margin-bottom: 0}

/*説明セクションでパディング*/
.FSs { padding: 0 9vw 30px; position: relative;
}
.m-photo { width: 75%; margin: 20px auto;
}

/*タイトル*/
.FSs h1, .FSs h2, .FSs h3 {
 font-family: 'Shippori Mincho B1', serif; 
} 
.FSs h1 {
  font-weight: 400;
  color: #A12;
  font-size: 3.2em;
  line-height: 0.8em;
}
/*ショルダー「アフリカキモノ」*/
.FSs h2 { font-size: 2em; line-height: 0.8em; color: #077; margin-bottom: 0.5em;
}
.FSs h2 { font-weight: 600;}
/*よみがな　emって前の指定を1としとるんかなあほPC*/
.FSs h1 span { font-size: 0.5em; padding: 0 0.6em;
}
.FSs h3 { font-size: 1.3em; color: #184; line-height: 2em; margin-bottom: 1em;}
FSs p {}

/*秋冬ロゴマーク*/
.akif-ar { width: 10em; margin-bottom: 0.5em}
/*Topアフリカキモノの説明*/

#afTop h1 { color: #fcf7cc; text-align: center; line-height: 1.2em; font-size: 2.2em; font-weight: 600}
#afTop h2 { font-size: 1.6em; color: #75d983; margin-top: 1.2em; line-height: 0.5em; }
#afTop h2 span {font-size: 0.6em}

#afTop pre { font-family: 'Shippori Mincho B1', serif; font-weight: 400;  color: #fff; line-height: 1.6em}
#afTop {padding-bottom: 0;}
#afTop .FSs { padding-bottom: 15px;}

/*着姿ボックス レイアウト上のスペース確保 　rel*/
.kBox { position: relative; width: 74vw; height: 111vw; margin: auto;}
.ss .kBox { width: 64vw; height: 64vw;}
/*着姿・全体で移動　ボックスと同寸*/
.kisgt {position: absolute; width: 74vw; height: 111vw;}
.ss .kisgt { width: 64vw; height: 64vw;}
/*引き手*/
.kisgt img:first-of-type { width: 8vw; height: 12vw; position: absolute; top: 47vw; left: -6vw; cursor: pointer; z-index: 1;}
.ss .kisgt img:first-of-type { width: 10vw; height: 15vw; position: absolute; top: 20vw; left: -8.5vw; cursor: pointer; z-index: 1;}
/*イラスト*/
.kisgt img:last-of-type { width: 100%; height: 100%; position: absolute;}

/*縁どり*/
.kisgt div { position: absolute; width: 12px; height: 200vh; background-color: rgba(47, 0, 0, 0.8); border-left: 2px solid #FFF; box-shadow: 2px 0px 5px rgba(47, 0, 0, 0.8);  top: -75vh; left: -28vw; z-index: 1; display: none}
.kisgt.anime div { display: block}


.kisgt.anime { animation: hirk 0.8s cubic-bezier(0.5, 0, 1.0,1.0) forwards;}
@keyframes hirk {
  0% { transform: translateX(0vw);  
  }
  50% {  opacity: 1;   
  }
  100% {  transform: translateX(72vw);
     opacity: 0;
  }
}



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

/*開閉タイトル「もっと見る」*/
.btnUra {position: relative;}
.mttBtn1, .mttBtn2 { position: absolute; z-index: 1; top: 0; left: 4vw; list-style: none;  font-size: 1.1em; color: #301; font-family: 'Shippori Mincho B1', serif; font-weight: 400; cursor: pointer;}
/*サマリabsoにしたんでその分のバッファ*/
.baf {height: 6vh;}

.mtt1-1, .mtt1-2, .mtt2-1, .mtt2-2 {display:none}
.mtt1-1.mise, .mtt1-2.mise, .mtt2-1.mise, .mtt2-2.mise {display:block}

/*⭐️ PC用差分*/
@media screen and ( min-width: 770px) {
main pre {font-family: 'Shippori Mincho B1', serif}  

/*afTop(全体説明)*/  
.m-photo { width: 55%; float: right; margin: 2vw 4vw ;
  } 
.FSs::after { clear: both; content: ""; display: block;
  } 
#afTop h1 {position: absolute; top: 0.5em;
 }
#afTop h2 {position: absolute; top: 1.5em}
#afTop pre {position: absolute; top: 5em; width: calc(82vw * 0.45 - 8vw)}


/*⭐️ 服ごとの説明
セクションごとにabsoでレイアウト基準は親div*/
.fw {position: relative
  }
.fw section {position: relative}
.fw .FSs:first-of-type {position: absolute; top: 5vw; left: 50vw
  }  
.fw .kBox,  .fw .kisgt { width: 40vw; height: 60vw;}
.fw .kBox { margin: 0 5vw 8vw
  }
.fw .fTtl { position: absolute; bottom: 0; left: 48.5vw; width: 50vw; text-align: left; font-size: 1.2em}  
.fw pre {font-size: 0.95em; font-weight: 600; line-height: 1.4em
  }
.senCha.M { display: none
  }
  /*春夏*/
/*説明*/
.ssTop h2 {position: absolute; top: 0.8em}
.ssTop h1 {position: absolute; top: 1.5em}
.ssTop h3 {position: absolute; top: 5.7em}
.ssTop pre {position: absolute; top: 10em; width: calc(82vw * 0.45 - 8vw); font-size: 1em; line-height: 1.6em; font-weight: 600}

/*着姿*/
#SSnagi, #SSkama { margin-bottom: 1vh}
.ss {display: flex; justify-content: space-between; padding: 6vw }
.ss .kBox, .ss .kisgt { width: 26vw; height: 26vw;
  } 
.mtt1-1, .mtt1-2, .mtt2-1, .mtt2-2 {display:block}
.btnUra, .mttBtn1, .mttBtn2, .baf {
    display: none}
  
  /*引き手*/
.kisgt img:first-of-type { width: 4vw; height: 6vw; top: 27vw; left: -3vw;}
.ss .kisgt img:first-of-type { width: 2vw; height: 3vw; top: 12vw; left: -1.5vw;}
.kisgt.anime { animation: hirk 1.4s cubic-bezier(0.5, 0, 1.0,1.0) forwards;}
  @keyframes hirk {
  0% { transform: translateX(0vw);   
  }
  50% {  opacity: 1;  
  }
  100% {  transform: translateX(100vw);
     opacity: 0;}
}
  }
/*PC差分ここまで*/



footer {text-align: center; position: relative; margin-bottom: 1em
}
footer img {width: 12vw; display: inline-block; margin-top: 1.5em}

footer p { color: #2F0000; white-space: pre-wrap; font-family:  'Shippori Mincho B1', serif; font-weight: 600; line-height: 1.5em; padding: 0.3em 0;}



/*⭐️ PC用差分　*/
@media screen and ( min-width: 770px) {
}


/*スマホ用*/
@media screen and (max-width: 640px) {
    body {
        font-size: 0.8em;
    }
}
/*スマホで見たときのキャッチコピーの改行位置
だだだだ<span class="br">特集</span>のように使う*/
@media screen and (max-width: 359px) {
    .br::before {
        content: "\A";
        white-space: pre;
    }
}
/*色玉
  黒鳶　#301  濃藍　#001F64 
　紙色（白百合）　#F6F9E8　　
*/

/*フォント指定

    font-family: 'Shippori Mincho B1', serif;
 400 600

  font-family: 'Yusei Magic', sans-serif;
*/