@charset "utf-8";

/*--------------------------------------------------------
　共通style
--------------------------------------------------------*/
#story_2 .scn_set {
  background: #fefce8;
}

/* 本文ページ：左右端の黄色ストライプ帯（原寸31px） */
#story_2 #scn03,
#story_2 #scn04,
#story_2 #scn05,
#story_2 #scn06,
#story_2 #scn07 {
  background:
    url(/book/focal/inashiki/images/column/bg01.png) no-repeat left top / 31px 100%,
    url(/book/focal/inashiki/images/column/bg02.png) no-repeat right 44px top / 31px 100%,
    #fefce8;
}

#story_2 .shoulder_img {
  position: absolute;
  width: 19.81%;
  max-width: 280px;
  top: 0;
  right: 98px;
  z-index: 1;
}

#story_2 .main_area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  width: 83%;
  margin: 0 auto;
  max-width: 151.5vh;
}

#story_2 .main_area p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #083b55;
  font-weight: 500;
}

#story_2 .left_area {
  position: relative;
  width: 36.7%;
  margin-top: 20.31vh;
  margin-right: 4%;
  box-sizing: border-box;
}

#story_2 .left_area .title_01 {
  position: relative;
  width: 98.6%;
  margin: 0;
}

#story_2 .left_area .text_01 {
  margin-top: 38px;
}

#story_2 .left_area .text_01 p {
  font-size: 14px;
  line-height: 1.85;
  font-weight: 600;
}

#story_2 .right_area {
  width: 59.3%;
}

/* 写真ブロックの上端位置（誌面の実測値をvhで指定） */
#story_2 .right_area>div {
  position: relative;
  width: 100%;
  margin-top: 16.15vh;
}

#story_2 .right_area .img_01 img {
  vertical-align: bottom;
}

/*--------------------------------------------------------
　個別style
--------------------------------------------------------*/
/* ▼ FV */
#story_2 #scn01 {
  opacity: 1;
  z-index: 501;
  background:
    url(/book/focal/inashiki/images/column/fv_bg01.png) no-repeat left top / 282px 100%,
    url(/book/focal/inashiki/images/column/fv_bg02.png) no-repeat right 44px top / 282px 100%,
    #fefce8;
}

#story_2 #scn01 .main_title {
  width: 63.33%;
  max-width: 893px;
  position: absolute;
  top: 17.45%;
    left: calc(50% - 44px);
    transform: translateX(-50%);
}

/* ▼ リード文 */
#story_2 #scn02 {
  background: #093a56;
}

#story_2 #scn02 .main_text {
  width: 49.5%;
  position: absolute;
  display: block;
  top: 49.8%;
  left: 48.23%;
  transform: translate(-50%, -50%);
}

#story_2 #scn02 .main_text>p {
  color: #fff;
}

#story_2 #scn02 .main_text .main_text_item {
  font-size: 20px;
  line-height: 2;
}

#story_2 #scn02 .main_text .credit_text {
  margin-top: 2.5em;
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

/* ▼ 本文ページ：写真ブロック */
#story_2 #scn03 .right_area>div {
  margin-top: 16.15vh;
}

#story_2 #scn03 .img_01 {
  width: 97.4%;
  margin-left: 1.04%;
}

#story_2 #scn04 .right_area>div {
  margin-top: 14.32vh;
}

#story_2 #scn04 .img_01 {
  width: 97.69%;
  margin-left: -1.56%;
}

#story_2 #scn05 .right_area>div {
  margin-top: 17.45vh;
}

#story_2 #scn05 .img_01 {
  width: 93.63%;
  margin-left: 2.78%;
}
#story_2 #scn05 .left_area {
    position: relative;
    width: 36.7%;
    margin-top: 14.31vh;
    margin-right: 4%;
    box-sizing: border-box;
}
#story_2 #scn06 .right_area>div {
  margin-top: 19.79vh;
}

#story_2 #scn06 .img_01 {
  width: 90.58%;
  margin-left: 3.94%;
}

#story_2 #scn07 .right_area>div {
  margin-top: 21.35vh;
}

#story_2 #scn07 .img_01 {
  width: 82.03%;
  margin-left: 6.55%;
}


#story_2 #scn08 {
  background: #fefce8;
}

/* 中央の白帯：高さは中身（タイトル・本文・ボタン）に追従 */
#story_2 #scn08 .closing_box {
  position: absolute;
  left: 0;
  top: 24.35%;
  width: 100%;
  padding: 0 44px 46px 0;   /* 右44px＝ナビ幅ぶん、中央を誌面と揃える */
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  z-index: 0;
}

#story_2 #scn08 .main_area {
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 1;
}

#story_2 #scn08 .main_inner {
  position: relative;
  width: 100%;
}

/* タイトル・ボタンは誌面の原寸（px）で固定 */
#story_2 #scn08 .titel_img {
  width: 319px;
  max-width: 30%;
  margin: -34px auto 0;
}

#story_2 #scn08 .text_01 {
  width: 62%;
  margin: 32px auto 0;
}

#story_2 #scn08 .text_01 p {
  font-size: 18px;
  line-height: 1.83;
  font-weight: 600;
  text-align: center;
}

#story_2 #scn08 .btn {
  width: 552px;
  max-width: 52%;
  margin: 40px auto 0;
}

#story_2 #scn08 .main_inner>div.img_01 {
  position: absolute;
  width: 15.89%;
  top: 17.97%;
  left: 8.37%;
  z-index: 1;
}

#story_2 #scn08 .main_inner>div.img_02 {
  position: absolute;
  width: 20.92%;
  top: 19.53%;
  left: 65.82%;
  z-index: 1;
}

/* ▼ 締めページ：画面幅が狭まると本文（18px固定）に対して左右の写真が相対的に
   内側へ寄るため、段階的に外側へ逃がす */
@media screen and (max-width: 1340px) {
  #story_2 #scn08 .main_inner>div.img_01 {
    left: 7%;
  }

  #story_2 #scn08 .main_inner>div.img_02 {
    left: 66.8%;
  }
}

@media screen and (max-width: 1280px) {
  #story_2 #scn08 .main_inner>div.img_01 {
    left: 2.5%;
  }

  #story_2 #scn08 .main_inner>div.img_02 {
    left: 71.4%;
  }
}

@media screen and (max-width: 1080px) {
  #story_2 #scn08 .main_inner>div.img_01 {
    left: 2%;
  }

  #story_2 #scn08 .main_inner>div.img_02 {
    left: 71.5%;
  }
}