@charset "UTF-8";
.cat-title,
.cat-title-bg-smt {
  background-image: url(../../../story/images/cat-title-bg.jpg);
  color: #062173;
  margin-bottom: 0; }

.sec-lead {
  text-align: center; }
  @media screen and (max-width: 890px) {
    .sec-lead {
      text-align: left; } }

.page-story01 .cat-title,
.page-story01 .cat-title-bg-smt {
  background-image: url(../../../story/01/images/cat-title-bg.jpg); }

.page-story02 .cat-title,
.page-story02 .cat-title-bg-smt {
  background-image: url(../../../story/02/images/cat-title-bg.jpg); }

.page-story03 .cat-title,
.page-story03 .cat-title-bg-smt {
  background-image: url(../../../story/03/images/cat-title-bg.jpg); }

.page-story04 .cat-title,
.page-story04 .cat-title-bg-smt {
  background-image: url(../../../story/04/images/cat-title-bg.jpg); }

.sec-summary {
  background-image: url(../../../story/images/sec-summary-bg.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.750em;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10%; }
  .mac .sec-summary {
    font-family: Garamond, "Times New Roman", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", serif; }
  @media screen and (max-width: 890px) {
    .sec-summary {
      font-size: 1.5em;
      background-position: top left -45px;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.91), -1px -1px 11px #878a8a; } }
  @media screen and (max-width: 640px) {
    .sec-summary {
      padding-left: 14%;
      font-size: 3.5vw;
      padding-top: 0;
      padding-bottom: 0; }
      .sec-summary .container-outliner {
        padding-right: 0px; } }

.sec-story-nav {
  background-color: #C9E3E6; }

.story-nav {
  margin-left: -10px;
  margin-right: -10px; }
  .story-nav a {
    text-decoration: none;
    color: #333; }

.story-nav-item {
  float: left;
  width: 25%;
  padding: 0 10px; }
  @media screen and (max-width: 640px) {
    .story-nav-item {
      width: 50%; }
      .story-nav-item:nth-child(3), .story-nav-item:nth-child(4) {
        margin-top: 15px; } }

.story-nav-item-img {
  position: relative; }
  .story-nav-item-img img {
    display: block;
    width: 100%;
    border-radius: 10px; }
  .story-nav-item-img .img-story {
    display: block;
    position: absolute;
    width: 100%;
    top: 0; }
    .story-nav-item-img .img-story:before, .story-nav-item-img .img-story:after {
      content: '';
      height: 100%;
      width: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      border-radius: 10px; }
    .story-nav-item-img .img-story:before {
      background: rgba(0, 49, 46, 0.25);
      mix-blend-mode: none; }

.story-nav-item-number {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -33px;
  margin-top: -23px;
  display: block;
  width: 66px;
  height: 56px;
  overflow: hidden;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-family: 'Playfair Display SC', serif;
  padding: 10px; }
  @media screen and (max-width: 890px) {
    .story-nav-item-number {
      margin-top: -27px; } }
  .story-nav-item-number i {
    display: block;
    font-style: normal;
    font-size: 26px;
    line-height: 1.0;
    margin-top: -0.1em; }
  .story-nav-item-number:before {
    display: block;
    content: "STORY";
    font-size: 12px;
    line-height: 1.0; }

.story-nav-item-text {
  margin-top: 0.5em;
  position: relative;
  font-family: "Noto Serif Regular";
  text-align: center;
  line-height: 1.3;
  font-size: 1.125em; }
  @media screen and (max-width: 640px) {
    .story-nav-item-text {
      font-size: 1em; } }

.story-nav-item:hover .story-nav-item-text {
  opacity: .7;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s; }

.story-nav-item:hover .story-nav-item-img .img-story:before {
  background: rgba(0, 49, 46, 0.1);
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s; }

.page-story01 .story-nav .story-nav-item01 .story-nav-item-img .img-story:before,
.page-story02 .story-nav .story-nav-item02 .story-nav-item-img .img-story:before,
.page-story03 .story-nav .story-nav-item03 .story-nav-item-img .img-story:before,
.page-story04 .story-nav .story-nav-item04 .story-nav-item-img .img-story:before {
  background: rgba(0, 127, 118, 0.85); }

/*======================================
index
========================================*/
#idx-list .sec-lead {
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 45px;
  margin-bottom: 30px; }
  @media screen and (max-width: 890px) {
    #idx-list .sec-lead {
      padding-bottom: 20px; } }

/*======================================
story03
========================================*/
.page-story03 .sec-lead {
  background-image: url(../../../story/03/images/01-bg.jpg);
  background-position: top left;
  background-repeat: repeat-x; }
  @media screen and (max-width: 890px) {
    .page-story03 .sec-lead {
      background-size: 90px; }
      .page-story03 .sec-lead .sec-lead-img img {
        max-width: 70%; } }

/*======================================
story04
========================================*/
@media screen and (max-width: 890px) {
  .page-story04 .sec-lead {
    text-align: center; } }

.page-story04 .sec-lead:after {
  display: block;
  content: '◆\A◆\A◆\A';
  white-space: pre;
  color: #C9E3E6;
  line-height: 1.2; }

.page-story04 .sec-summary {
  background-image: url(../../../story/04/images/sec-summary-bg.jpg);
  background-position: bottom right;
  padding-left: 0%;
  font-size: 1.500em; }
  @media screen and (max-width: 890px) {
    .page-story04 .sec-summary {
      background-position: top right -15px; } }
  @media screen and (max-width: 640px) {
    .page-story04 .sec-summary {
      padding-left: auto;
      font-size: 3.2vw; }
      .page-story04 .sec-summary .container-outliner {
        padding-right: 5px;
        padding-left: 5px; } }

.page-story04 .panel-catch-note .panel-catch-item-content {
  margin-top: -13%;
  width: 53%; }
  @media screen and (max-width: 890px) {
    .page-story04 .panel-catch-note .panel-catch-item-content {
      width: 90%; } }

.page-story04 .story04-06 .panel-catch-note .panel-catch-item-content > dl {
  padding-right: 20px;
  padding-left: 30px; }
  @media screen and (max-width: 890px) {
    .page-story04 .story04-06 .panel-catch-note .panel-catch-item-content > dl {
      padding: 20px; } }