/*==================================================================

  styles.css

================================================================== */


/* --------------------------------------------------
  gris-lunaire
-------------------------------------------------- */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:200,200i,300,300i,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');


/* 画像遅延ロード */
img {opacity: 1;transition: opacity 0.3s;}
img[data-src] {opacity: 0;}

/* 文字デフォルト設定 */
.englishText {font: normal 1.1em/38px 'eb_garamond', serif;	}
p{color:#464646;}
.ebgaramond{font-family: 'EB Garamond', serif;}
.cormorantgaramond{font-family: 'Cormorant Garamond', serif;}

p.soldout{text-align: center;margin-top: 20px;margin-bottom: 20px;background: #f9edf5;font:normal 1em/34px times new roman, 'sawarabi_mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'MS PMincho', serif;color: #c1979f;}
p.soldout.soon{background: #fff;color: #be999c;border: dotted 1px #be999c;
  font-family: "Helvetica Neue",Helvetica,Arial,'メイリオ','Meiryo','ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','HiraKakuPro-W3';}
p.soldout100 span{background: #fff;color: #be999c;border-top: dotted 1px #be999c;border-bottom: dotted 1px #be999c;padding:10px;
  font-family: "Helvetica Neue",Helvetica,Arial,'メイリオ','Meiryo','ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','HiraKakuPro-W3';}


#gris-lunaire img {max-width: 100%; height: auto;}


/* タイトル */
#mainTitle{width:100%;}
#mainTitle h1{max-width:990px;display: block;margin: 0 auto;}


/* ローカルナビゲーション */
#lcnv{background: #fbfbfb;padding:20px 0 22px;width:100%;margin-bottom:0px;}
#lcnv ul{display: table;max-width:990px;margin:0 auto;}
#lcnv ul li{display: table-cell;width:25%;font-family: 'Noto Serif JP', serif;font-size:15px;text-align: center;border-left:solid 1px #ddd;line-height: 1;}
#lcnv ul li:first-child{border-left:none;}
#lcnv ul li a{text-decoration:none;display: block;color:#242424;padding: 6px;}
#lcnv ul li a span{font-size:16px;display: block;color:#b2b2b2;padding: 10px 0;}


/* プロローグ画像 */
#prologueImg{width:100%;display: block;text-align: center;overflow: hidden;position: relative;margin:0 auto 25px;background: #262626;}
#prologueImg img{margin:0 auto;}


/* プロローグ */
#prologue{max-width:990px;margin:0 auto 60px;position: relative;}
#prologue p{font-family:'Noto Serif JP', serif;font-size:13px;line-height: 2.6;color:#333;padding: 0px 0 10px;}
.prlgc{font-family:'Noto Serif JP', serif;font-size:14px;line-height: 2.5;color:#333;padding-right: 50%;padding: 20px 0;}
.prlgc img {display: block;}


/* チャプター共通設定 */
.chapterBox{text-align: center;padding-top: 100px;margin-top:100px;border-top:solid 1px #ccc;}
.chapterBox .keisen{width:70px;height:1px;display: block;border-bottom:solid 1px #ccc;margin:60px auto;}
.chapimg{width:250px;height:42px;margin-bottom: 45px;}
.chapterBox h2{font-family: 'Cormorant Garamond', serif;font-size:60px;line-height:1;color:#444;font-style: italic;font-weight: 300;}
.chapterBox h2 img{width:13px;height:13px;vertical-align: middle;margin-left: 7px;margin-right: 7px;}
.chapterBox .kana{font-family:'Noto Serif JP', serif;color:#666;font-size: 18px;display: block;line-height: 2.5;margin-bottom: 45px;padding-top: 5px;letter-spacing: 1px;}
.chapterPrologue{padding-bottom: 40px;}
.chapterPrologue p{font-family: 'Noto Serif JP', serif;font-size:14px;line-height: 2.4;margin-bottom: 25px;text-align: center;color:#666;}


#titleTextBox{background: #f7f7f7;width: 100%;height:360px;border-top:solid 1px #efefef;}
#titleTextBox h2{text-align:center;color: #d4d4d4;padding-top: 60px;font-size: 46px;font-family: 'Cormorant Garamond', serif;letter-spacing: 4px;}
#titleTextBox p{text-align:center;color: #999;padding-top: 10px;padding-bottom: 30px; font-size: 12px;font-family: 'Noto Serif JP', serif;}


.itemBox{max-width:990px;margin: 0 auto;}
.itemUnit{display: flex; flex-wrap: wrap;justify-content: center;text-align: center;}
.item{padding:0 15px 45px;text-align: left;width: 33.33%;}
.item a{text-decoration: none;display: block;}
.item a:hover{opacity:.4;}
.item img{width:100%;height:auto;margin-bottom: 8px;border:solid 1px #efefef;}
.item span.itemTitle img{width:15px;height:15px;margin-left: 5px;position: relative;top:4px;float:none;display: inline-block;}
.item span.itemTitle{font-family: 'Cormorant Garamond', serif;font-weight:300;font-style:italic;display: block;font-size:20px;line-height: 1.2;color:#666;padding-bottom: 8px;}
.item span.itemCatch{display: block;font-size:11px;line-height: 1.4;color:#999;}


/* リーディングエリア */
.basicReadings{background:#f8f8f8;padding: 30px 45px 0;max-width:920px;margin:30px auto 0px;}
.basicReadings .subTitle{font-family: 'Cormorant Garamond', serif;font-weight:200;font-style:italic;font-size:50px;line-height:2;text-align: left;color:#c3c3c3;}
.sec_personalreading p{text-align: left;}
.readingArea .sec_comment { font-size: 14px;line-height: 2;font-family: 'Noto Serif JP', serif;}
.readingArea a.more {width: 100%;height: auto;position: relative;top: -35px;display: block;padding: 60px 0 0;}
.readingArea a.more.act {top: -35px;}
.readingArea a.more span {width: 120px;height: 40px;display: block;margin: 20px auto 0;background: url(../images/more_ez.png) no-repeat left center;background-size: 120px 40px;}
.readingArea a.more.act span {width: 120px;height: 40px;display: block;margin: 20px auto 0;background: url(../images/close_ez.png) no-repeat left center;background-size: 120px 40px;	}


/* ------------------------------------------------------------------
	responsive - added 202105
------------------------------------------------------------------- */
/* ------------------------------------------------------------------
  for Smartphone only  - ~ 767px
-------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  /* プロローグ画像 */
  #prologueImg{height:160px;}

}

/* ------------------------------------------------------------------
  for Smartphone / Portrait-tablets - ~ 992px
------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .pconly{display: none;}
  .sponly{display: block;}

  #gris-lunaire {margin-top: 70px;}


  #lcnv {padding: 10px 0 12px;}


  /* プロローグ */
  #prologue {padding: 0 20px;}


  /* チャプター共通設定 */
  .chapterBox{text-align: center;padding-top: 45px;margin-top:0px;border-top:none;}
  .chapterBox#chapter01{border-top:none;}
  .chapimg{width:150px;height:49px;}
  .chapterBox .keisen{width:50px;height:1px;display: block;border-bottom:solid 1px #ccc;margin:30px auto;}
  .chapterBox h2{font-family: 'Cormorant Garamond', serif;font-size:28px;line-height:1;}
  .chapterBox .kana{font-family: 'Noto Serif JP', serif;color:#232323;font-size: 11px;display: block;line-height: 2.5;margin-bottom: 45px;}
  .chapterPrologue{width:100%;margin:0 auto 20px;}
  .chapterPrologue img{display: none}
  .chapterPrologue img.sponly{display: block;width:100%;height:auto;margin-bottom:0px;}
  .chapterPrologue p{font-size:13.5px;line-height: 1.7;margin-bottom: 0px;text-align: left;color:#666;padding: 20px 20px 0px;}


  .item{width: 50%;}
  .item span.itemTitle {font-size: 16px;}


  /* リーディングエリア */
  .basicReadings {margin-top: 0; padding-left: 20px; padding-right: 20px;}
  .basicReadings .subTitle {margin-bottom: 30px; text-align: center; font-size: 38px; line-height: 1;}

}

/* ------------------------------------------------------------------
  for Portrait-tablets only - 426px ~ 993px
  画像のサイズ感のため 通常（768px ~ 993px）から変更
-------------------------------------------------------------------- */
@media screen and (min-width: 426px) and (max-width: 993px) {
 
  #mainTitle{width:100%;height:462px;display: block;background: url(../images/main_bg.jpg) no-repeat center center;background-size: cover; text-indent: -9999px;}
  #mainTitle h1{display: none;}


  /* プロローグ */
  .prlgc03 {display: flex; flex-wrap: wrap;}
  .prlgc03 img {width: 50%; height: auto;}

}

/* ------------------------------------------------------------------
  for Tablets / Desktop - 993px ~
------------------------------------------------------------------- */
@media print, screen and (min-width: 993px) {
  .sponly{display: none;}
  .pconly{display: block;}
  
  
  #mainTitle{width:100%;height:462px;display: block;background: url(../images/main_bg.jpg) no-repeat center center;background-size: cover; text-indent: -9999px;}
  #mainTitle h1{display: none;}


  /* プロローグ画像 */
  #prologueImg{height:411px;}
  #prologueImg img{max-width: 990px;}
  
  
  /* プロローグ */
  .prlgc01{width:63%;height:auto;display: block;}
  .prlgc03{width:33%;height:auto;display: block;position: absolute;top:-10px;right:0%;}
  .prlgc03 img{width:100%;height:auto;margin-bottom: 20px;}
  .prlgc div{font-size:20px;color:#999;padding-bottom: 20px;}
  .prlgc01 p{margin-bottom: 50px;padding-bottom:60px;background: url(../images/keisenMini.jpg) no-repeat center bottom;background-size: 90px 20px;}
  .prlgc01 p.nobg{margin-bottom: 0px;padding-bottom:0px;background: none}


  /* PC用商品一覧レイアウト */
  .groupLayout{max-width:990px;margin:0 auto;}
  .alignItem_04{display: table;width:100%;margin-left:-15px;margin-right:-15px;}
  .alignItem_04 .gl_Item{display: table-cell;width:25%;padding:15px;box-sizing: border-box}
  .alignItem_04 .gl_Item a{display: block;text-decoration: none;}
  .alignItem_04 .gl_Item a:hover{opacity: 0.4;}
  .alignItem_04 .gl_Item .FS2_thumbnail_container img{width:100%;height:auto;margin-bottom:10px;}
  .alignItem_04 .gl_Item h2.itemGroup {margin-bottom:10px;font-size:13px;color: #7f9eae}
  .alignItem_04 .gl_Item .FS2_ItemShortComment{font-size:11px;display: block;padding-bottom: 45px;}

}