@charset "UTF-8";

/* GSAPが動くまでKV要素を隠す（チラ見え防止） */
.js-gsap-preload .main_ttl,
.js-gsap-preload .ayumu,
.js-gsap-preload .book,
.js-gsap-preload .hand,
.js-gsap-preload .main_btn,
.js-gsap-preload .main_title_sub,
.js-gsap-preload .bookList li,
.js-gsap-preload .cmn_arrow {
  visibility: hidden;
}

/* PC */
@media (min-width: 668px){
  .bookStack{
    width: 100%;
    max-width: 220px;
   transform: translateX(-8%);
  }
}

/* ★縮小はラッパーを追加してそこに掛ける */
.bookStack__inner {
  width: 100%;
  height: 100%;
  transform: scale(0.9);
  transform-origin: center;
}

/* 2枚を重ねる */
.bookStack__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  /* “束”っぽく見せる基本 */
  border-radius: 10px;
  will-change: transform, opacity, filter;
}

/* 奥の本 */
.bookStack__img.is-a {
  transform: translate(10px, 10px) scale(0.985);
  opacity: .55;
  filter: saturate(.9) brightness(.95);
  z-index: 1;
  animation: bookFrontA 4s ease-in-out infinite;
}

/* 手前の本（左上） */
.bookStack__img.is-b {
  transform: translate(-10px, -10px) scale(1);
  opacity: 1;
  filter: saturate(1) brightness(1);
  z-index: 2;
  animation: bookFrontB 4s ease-in-out infinite;
}

/* Aが前に出る時間帯 */
@keyframes bookFrontA {
  0% {
    transform: translate(-10px, -10px) scale(1);
    opacity: 1;
    filter: saturate(1) brightness(1);
    z-index: 2;
  }

  45% {
    transform: translate(-10px, -10px) scale(1);
    opacity: 1;
    filter: saturate(1) brightness(1);
    z-index: 2;
  }

  50% {
    transform: translate(10px, 10px) scale(.985);
    opacity: .55;
    filter: saturate(.9) brightness(.95);
    z-index: 1;
  }

  100% {
    transform: translate(10px, 10px) scale(.985);
    opacity: .55;
    filter: saturate(.9) brightness(.95);
    z-index: 1;
  }
}

/* Bが前に出る時間帯 */
@keyframes bookFrontB {
  0% {
    transform: translate(10px, 10px) scale(.985);
    opacity: .55;
    filter: saturate(.9) brightness(.95);
    z-index: 1;
  }

  49% {
    transform: translate(10px, 10px) scale(.985);
    opacity: .55;
    filter: saturate(.9) brightness(.95);
    z-index: 1;
  }

  50% {
    transform: translate(-10px, -10px) scale(1);
    opacity: 1;
    filter: saturate(1) brightness(1);
    z-index: 2;
  }

  95% {
    transform: translate(-10px, -10px) scale(1);
    opacity: 1;
    filter: saturate(1) brightness(1);
    z-index: 2;
  }

  100% {
    transform: translate(10px, 10px) scale(.985);
    opacity: .55;
    filter: saturate(.9) brightness(.95);
    z-index: 1;
  }
}

/*PC設定*/
/*-----------------------------------------------------------*/
/*PS/SP表示・非表示*/
.pc {
  display: block;
}

.sp {
  display: none;
}

/*-----------------------------------------------------------*/
/*画像*/
img {
  width: auto;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/*-----------------------------------------*/
body {
  overflow-x: hidden;
  background: #0c263c;
  font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);
  line-height: 1.4em;
  color: #0c263c;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  text-align: center;
  animation: bodyFadeIn 4s ease-out 0s 1 normal;
  -webkit-animation: bodyFadeIn 5s ease 0s 1 normal;
}

/*-----------------------------------------*/
/*メインエリア*/
main {
 position: relative;
  width: 100%;
  height: auto;                
  aspect-ratio: 1800 / 598;     /* ★これで高さが幅に連動する */
  background: #000 url("../../_image/main_bg.png") no-repeat center / cover;
  overflow: hidden;
   max-height: 430px;   /* ★ これを追加 */
}
/*メインエリアの画像*/
main picture{
  position: absolute;
  top: 0;
}

.pc .inner{
 max-width: 1240px;
  margin: 0 auto;
  position: relative; /* ★これを追加 */
  height: 100%;       /* ★mainの高さ（比率）に追従 */
}
main picture{
  position: absolute;
  top: 0;
}
main picture img{
  display:block;
  width:100%;
  height:auto;
}

.pc .main_ttl{
  width: 50%;      /* ← 画像幅を% */
  left: 5%;        /* ← 位置も% */
  top: 1%;
  z-index: 6;
}

.pc .book,.pc .ayumu,.pc .hand{
  width: 85%;      /* ← 画像幅を% */
  z-index: 6;
}


/*フッターのバナーエリアの画像*/
.bnrBox{
  display: flex;
  justify-content: center;

  background: #000 url("../../_image/main_bg.png") no-repeat center/80% auto;
 max-height: auto;   /* ★ これを追加 */
  margin-top: 42px;
}
.bnrBox picture {
  position: relative;
  top: auto;
}

/*歩の手*/
.hand {
  z-index: 3;
}

/*歩*/
.ayumu {
  z-index: 2;
}

/*本*/
.book {
  z-index: 4;
}

/*ページタイトル*/
.main_ttl {
  z-index: 6;
}

/*続々刊行中*/
.pc .main_title_sub {
  display: block;
  position: absolute;
  width: 24%;
  top: 38%;
  left: 14%;
  z-index: 1;
}

/*気になる書影をタップ*/
.main_btn {
  max-width:1124px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.main_btn img {
  width: 55%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*-----------------------------------------*/
/*キービジュアル下の書籍*/
.bookList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:1124px;
  margin: 0 auto;
  transform: translateY(-5%);
}

.bookList li {
  width: 16.66%;
  padding: 1%;
}


/* liの中で縮める */
.bookSize{
  padding: 4px 0 0;
  width: 100%;
}


/*スクロール用黄色矢印*/
.cmn_arrow {
  width: 36%;
}

.bookList li a{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2つ目（書影）を中央 */
.bookList li a .bookSize{
  margin-top: auto;
  margin-bottom: auto;
}

/* 3つ目（矢印）を下 */
.bookList li a .cmn_arrow{
  margin-top: auto;
}

/*-----------------------------------------*/
/*書籍レイアウト*/
/*-----------------------------------------*/
.bookBox {
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  margin: 0 auto 24px;
}

/* TOP（透過pngなら、透けた所は親背景が見える） */
.bookBox::before {
  content: "";
  display: block;
  background: var(--top) center top / 100% 100% no-repeat;
  aspect-ratio: var(--topAR);
  /* ★高さを自動計算 */
}

/* BTM */
.bookBox::after {
  content: "";
  display: block;
  background: var(--btm) center bottom / 100% 100% no-repeat;
  aspect-ratio: var(--btmAR);
  /* ★高さを自動計算 */
}

/* CNTは“中央部分だけ”に敷く（TOP/BTMの透過には被らない） */
.bookBox__cnt {
  margin-top: -1px;
  margin-bottom: 0;
  background: 
  /*url("../../_image/bg01_point.png") right -6% top -20% / 200px auto no-repeat,*/
  var(--cnt) left top / 100% auto repeat-y;
  padding: 20px;
}

/* 667px以下 */
@media (max-width: 667px) {
  .bookBox__cnt {
    padding: 0;
  }
}

/* early（例：top 1000x62 / btm 1000x32） */
.bookBox.odd {
  --cnt: url("../../_image/bg01_cnt@2x.png");
  --top: url("../../_image/bg01_top@2x.png");
  --btm: url("../../_image/bg01_btm@2x.png");
  --topAR: 1438 / 10;
  --btmAR: 1438 / 10;
}

/* mid（サイズ違いなら、その画像の実寸で） */
.bookBox.even {
  --cnt: url("../../_image/bg02_cnt@2x.png");
  --top: url("../../_image/bg02_top@2x.png");
  --btm: url("../../_image/bg02_btm@2x.png");
  --topAR: 1438 / 10;
  --btmAR: 1438 / 10;
}


/*タイトル*/
strong {
  display: block;
  background: url("../../_image/cmn_line.png") no-repeat center bottom/100% auto;
  margin: 0 auto;
  padding: 8px 4px 16px;
  font-size: clamp(1.75rem, 1.252rem + 2.49vw, 3rem);
  line-height: 1.2;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.03em;
  text-align: left;

}

/*タイトルの小文字*/
i {
  display: inline-block;
  font-size: clamp(1rem, 0.701rem + 1.49vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-style: normal;
}
i.strongi {
  display: block;
  margin-top: 2px;
}

/*テキスト*/
p {
  padding: 8px;
  font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1.125rem);
  line-height: 1.6;
  text-align: left;
  font-weight: 700;
}

/*注意書き*/
blockquote {
  display: inline-block;
  width: auto;
  background: #27455c;
  margin: 16px auto 0;
  padding: 6px;
  font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1.125rem);
  color: #FFF;
  line-height: 1.24;
  letter-spacing: 0;
  text-align: left;
}

/*書籍とテキストレイアウト*/
.bookBox dl {
  display: flex;
  flex-wrap: wrap;
  width: 96%;
  margin: 0 auto;
}

/*書籍レイアウト*/
.bookBox dl dt {
  width: 24%;
  margin: 0 auto 0;

}
.bookBox dl dt img {
  margin: 0 auto 4px;
}

/*テキストレイアウト*/
.bookBox dl dd {
  position: relative;
  width: 76%;
  margin: 0 auto;
  padding: 24px;
  text-align: left;

}

/*部署とカテゴリー*/
.bookBox dl h2 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: left;
  width: 100%;
  background: url("../../_image/cmn_line.png") no-repeat center/100% auto;
  padding: 0 0 0 12px;
}

/*タグ画像を少し小さく*/
.bookBox dl h2 picture {
  width: 26%;
  margin: 0 8px 0 0;
}

/*購入はこちらボタン*/
.btn {
  width: 96%;
  margin: 0 auto 12px;
}

/*購入はこちらボタン*/
.ttl_book_sub {
  position: absolute;
  max-width: 16%;
  top: -1%;
  right: -1%;
  z-index: 3;
}


.bookStack{
  position: relative;
  width: min(340px, 92vw);  /* スマホ用 */
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  transform: translateX(-4%);
}


/*-----------------------------------------*/
/*フッター*/
/*-----------------------------------------*/
/*バナーレイアウト*/
.bnrBox {
  padding: 16px 0 10px;
}

.bnrBox a {
  display: block;
  height: auto;
  width: 300px;
  color: #ffeb00;
}

/*バナー下テキスト*/
.bnrBox span {
  display: block;
  margin-top: 4px;
  text-shadow: 1px 1px 2px black;
}

/*著作権表時*/
footer {
  font-size: 10px;
  color: #FFF;
}




/*-----------------------------------------*/
/*fade-in設定*/
@keyframes bodyFadeIn {
  0% {
    visibility: hidden;
    opacity: 0;
  }

  100% {
    visibility: visible;
    opacity: 1;
  }
}

@media screen and (max-width: 667px) {

  /*SP設定*/
  /*-----------------------------------------------------------*/
  /*PS/SP表示・非表示*/
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  /*-----------------------------------------*/
  /*メインエリア*/
  main {
    position: relative;
    width: 100%;
    height: auto;
    background: url("../../_image/main_bg_sp.png") no-repeat center/100% auto;
    z-index: 2;
    overflow: hidden;
     padding-top: calc(100% / 1000 * 589);
  }




  /*メインエリアの画像*/
  main picture {
    position: absolute;
    top: 0;
  }

  /*フッターのバナーエリアの画像*/
  main.bnrBox picture {
    position: relative;
    top: auto;
  }

  /*歩の手*/
  .hand {
    z-index: 3;
  }

  /*歩*/
  .ayumu {
    z-index: 2;
  }

  /*本*/
  .book {
    z-index: 4;
  }

  /*ページタイトル*/
  .main_ttl {
    z-index: 6;
  }

  /*続々刊行中*/
  .main_title_sub {
    display: block;
    position: absolute;
    width: 46%;
    top: 10px;
    right: -10px;
    z-index: 1;
  }



  /*気になる書影をタップ*/
.main_btn {
  max-width:1124px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.main_btn img {
  width: 88%;
  height: auto;
  display: block;
  margin: 0 auto;
}

  /*キービジュアル下の書籍*/
  .bookList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 94%;
    margin: 0 auto;
  transform: translateY(-2.5%);
  }

  .bookList li {
    width: 33.333%;
    padding: 1%;
  }

  /*本のサイズ設定*/
  .bookSize {
    padding: 4px 0 0;
  }




  /*スクロール用黄色矢印*/
  .cmn_arrow {
    width: 55%;
  }

  /*-----------------------------------------*/
  /*書籍レイアウト*/
  /*-----------------------------------------*/
  .bookBox {
    display: flex;
    flex-direction: column;
    width: 96%;
    margin: 0 auto 24px;
  }

  /* TOP（透過pngなら、透けた所は親背景が見える） */
  .bookBox::before {
    content: "";
    display: block;
    background: var(--top) center top / 100% 100% no-repeat;
    aspect-ratio: var(--topAR);
    /* ★高さを自動計算 */
  }

  /* BTM */
  .bookBox::after {
    content: "";
    display: block;
    background: var(--btm) center bottom / 100% 100% no-repeat;
    aspect-ratio: var(--btmAR);
    /* ★高さを自動計算 */
  }

  /* CNTは“中央部分だけ”に敷く（TOP/BTMの透過には被らない） */
  .bookBox__cnt {
    background: var(--cnt) left top / 200% auto repeat-y;
    padding: 20px;
  }

  /* 667px以下 */
  @media (max-width: 667px) {
    .bookBox__cnt {
      padding: 0;
    }
  }

  /* early（例：top 1000x62 / btm 1000x32） */
  .bookBox.odd {
    --cnt: url("../../_image/bg01_cnt@2x.png");
    --top: url("../../_image/bg01_top@2x.png");
    --btm: url("../../_image/bg01_btm@2x.png");
    --topAR: 1000 / 10;
    --btmAR: 1000 / 10;
  }

  /* mid（サイズ違いなら、その画像の実寸で） */
  .bookBox.even {
    --cnt: url("../../_image/bg02_cnt@2x.png");
    --top: url("../../_image/bg02_top@2x.png");
    --btm: url("../../_image/bg02_btm@2x.png");
    --topAR: 1000 / 10;
    /* ←例：midが750幅で書き出しなら */
    --btmAR: 1000 / 10;
  }


  /*タイトル*/
  strong {
    display: block;
    background: url("../../_image/cmn_line.png") no-repeat center bottom/100% auto;
    margin: 0 auto;
    padding: 4px 0 8px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.03em;
    text-align: left;

  }

  /*タイトルの小文字*/
  i {
    display: inline-block;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-style: normal;
  }

  /*テキスト*/
  p {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    font-weight: 700;
  }

  /*注意書き*/
  blockquote {
    display: block;
    width: 90%;
    background: #27455c;
    margin: 16px auto 0;
    padding: 6px;
    font-size: 13px;
    color: #FFF;
    line-height: 1.24;
    letter-spacing: 0;
    text-align: left;
  }

  /*書籍とテキストレイアウト*/
  .bookBox dl {
    display: flex;
    flex-wrap: wrap;
    width: 86%;
    margin: 0 auto;
  }

  /*書籍レイアウト*/
  .bookBox dl dt {
    width: 84%;
    margin: 24px auto 12px;

  }

  /*テキストレイアウト*/
  .bookBox dl dd {
    width: 96%;
    margin: 0 auto 12px;
    text-align: left;
    padding: 0;

  }



  /*部署とカテゴリー*/
  .bookBox dl h2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: left;
    width: 100%;
    background: url("../../_image/cmn_line.png") no-repeat center/100% auto;
    padding: 0;
  }

  /*タグ画像を少し小さく*/
  .bookBox dl h2 picture {
    width: 50%;
    margin: 0 8px 0 0;
  }

  /*購入はこちらボタン*/
  .btn {
    width: 100%;
    margin: 0 auto 12px;
  }

  /*購入はこちらボタン*/
.ttl_book_sub {
  position: absolute;
  max-width: 22%;
  top: -6.5%;
  right: -7.5%;
  z-index: 3;
}

  /*-----------------------------------------*/
  /*フッター*/
  /*-----------------------------------------*/
  /*バナーレイアウト*/
  .bnrBox{
    padding: 16px 0 10px;
  }

.bnrBox{


  background: #000 url("../../_image/main_bg.png") no-repeat center/170% auto;

}

  .bnrBox a {
    display: block;
    height: auto;
    width: 70%;
    color: #ffeb00;
  }

  /*バナー下テキスト*/
  .bnrBox span {
    display: block;
    margin-top: 4px;
    text-shadow: 1px 1px 2px black;
  }

  /*著作権表時*/
  footer {
    font-size: 10px;
  }


  /*-----------------------------------------*/
  /*YOUTUBEレスポンシブ*/
  .mov {
    position: relative;
    max-width: 96%;
    margin: -12px auto 60px;
    padding: 0;
  }

  .youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    box-sizing: border-box;
  }

  .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

}

/*ddの幅を調整*/
  @media (max-width: 880px) and (min-width: 820px) {
  .bookBox dl dd.ex {
    margin: 0 auto 12px;
    text-align: left;
    padding: 24px 0 24px 6%;
  }
}
  @media (max-width: 800px) and (min-width: 667px) {
  .bookBox dl dd.ex {
    margin: 0 auto 12px;
    text-align: left;
    padding: 24px 0 24px 10%;
  }
}