@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500&display=swap");
/*******************************
LAYOUT
*******************************/
.pane-content {
  max-width: 100%;
  font-size: 14px;
}
.pane-content a {
  text-decoration: none;
}
#secret-story {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  min-width: 1050px; }
  @media screen and (max-width: 640px) {
    #secret-story {
      min-width: auto;
      margin-top: -65px;
      padding-top: 65px; } }
  #secret-story * {
    box-sizing: border-box; }
  #secret-story img {
    max-width: 100%;
    height: auto; }
  @media screen and (max-width: 640px) {
    #secret-story h2 {
      width: auto; } }
  #secret-story a {
    transition: opacity .2s; }
    #secret-story a:hover {
      text-decoration: none;
      opacity: .8; }
  #secret-story .tLeft {
    text-align: left; }

.m-pc-hidden {
  display: none; }
  @media screen and (max-width: 640px) {
    .m-pc-hidden {
      display: block; } }

.m-sp-hidden {
  display: block; }
  @media screen and (max-width: 640px) {
    .m-sp-hidden {
      display: none; } }

/*-- 2021.10.26 Add：MG --*/
br.m-pc-hidden {
  display: none; }
  @media screen and (max-width: 640px) {
    br.m-pc-hidden {
      display: inline; } }

br.m-sp-hidden {
  display: inline; }
  @media screen and (max-width: 640px) {
    br.m-sp-hidden {
      display: none; } }

/*-- 2021.10.26 Add：MG - end --*/
.m-wrapper {
  max-width: 1030px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 640px) {
    .m-wrapper {
      max-width: 91.25%; } }
  .m-wrapper--narrow {
    max-width: 865px; }
    @media screen and (max-width: 640px) {
      .m-wrapper--narrow {
        max-width: 91.25%; } }

.l-header {
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e3e6ec;
  /*-- 2021.11.11 Add：MG --*/
  /*-- 2021.11.11 Add：MG - end --*/ }
  @media screen and (max-width: 640px) {
    .l-header {
      height: auto;
      padding: 2% 33%; } }
  .l-header img {
    width: 328px;
    height: auto; }

.bg-gray {
  background-color: #edeff3; }

.m-label {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Fraunces", serif;
  letter-spacing: 0.1em;
  background-color: #131313;
  position: absolute; }

.m-btn__more {
  width: 550px;
  max-width: 90%;
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #000;
  margin: 115px auto 0;
  padding-right: 20px;
  position: relative;
  cursor: pointer;
  transition: opacity .2s; }
  @media screen and (max-width: 640px) {
    .m-btn__more {
      height: 60px;
      margin: 50px auto 0;
      padding-right: 60px; }
      .m-btn__more img {
        width: 50%; } }
  .m-btn__more:hover {
    text-decoration: none;
    opacity: .8; }
  .m-btn__more--arrow {
    width: 78px;
    height: 100%;
    border-left: 1px solid #fff;
    position: absolute;
    right: 0;
    top: 0; }
    @media screen and (max-width: 640px) {
      .m-btn__more--arrow {
        width: 60px; } }
    .m-btn__more--arrow::after {
      content: '';
      width: 8px;
      height: 8px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: translate(-50%, -50%) rotate(135deg);
      position: absolute;
      right: 32px;
      top: 50%; }
      @media screen and (max-width: 640px) {
        .m-btn__more--arrow::after {
          right: 20px; } }

.m-title1 {
  padding: 0 0 75px;
  margin-bottom: -20px;
  top: -20px;
  text-align: center;
  position: relative; }
  @media screen and (max-width: 640px) {
    .m-title1 {
      padding-bottom: 55px; } }
  .m-title1:before {
    content: '';
    position: absolute;
    top: 50px;
    left: 50%;
    width: 1px;
    height: 60px;
    background: #111;
    animation: border 1.5s infinite; }
    @media screen and (max-width: 640px) {
      .m-title1:before {
        height: 40px;
        animation: border-sp 1.5s infinite; } }
  .m-title1--mtno {
    margin-top: 0;
    top: 0; }

@keyframes border {
  0% {
    height: 0; }
  100% {
    height: 60px; } }
@keyframes border-sp {
  0% {
    height: 0; }
  100% {
    height: 40px; } }
img.img-border {
  border: 1px solid #dbdbdb; }

/*******************************
SLIDER
*******************************/
.m-slider {
  max-width: 100%;
  text-align: center;
  background-color: #111;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }
  .m-slider__main {
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
    position: relative; }
    .m-slider__main::after {
      content: '';
      display: block;
      background: url(../img/bg_dotted_wht.png), linear-gradient(180deg, #000 0%, #111 100%);
      width: 100%;
      height: 150px;
      opacity: 0.8;
      position: absolute;
      bottom: 0; }
      @media screen and (max-width: 640px) {
        .m-slider__main::after {
          display: none; } }
    .m-slider__main img {
      width: 100%; }
  .m-slider__thum {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    /*-- 2021.11.18 Add：MG --*/
    /*-- 2021.11.18 Add：MG - end --*/ }
    @media screen and (max-width: 640px) {
      .m-slider__thum {
        /*bottom: 21vw;*/
        bottom: 0;
        height: 47.5vw; } }
    .m-slider__thum a {
      color: #222;
      text-decoration: none; }
      #secret-story .m-slider__thum a:hover {
        text-decoration: none;
        opacity: 1; }
      #secret-story .m-slider__thum a:focus {
        text-decoration: none; }
    .m-slider__thum__item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /*padding: 35px 20px 20px 35px;*/
      padding: 20px 20px 20px 35px;
      margin: 0 10px;
      height: 100%;
      background-color: #fff;
      transition: opacity .2s; }
      @media screen and (max-width: 640px) {
        .m-slider__thum__item {
          /*padding: 10px 10px 10px 20px;*/
          padding: 15px 10px 15px 20px;
          margin: 0 10px 0 0; } }
      .m-slider__thum__item:hover {
        /*opacity: 0.8;*/
        cursor: pointer; }
      .m-slider__thum__item .m-label {
        top: 0;
        left: 0; }
        @media screen and (max-width: 640px) {
          .m-slider__thum__item .m-label {
            display: none; } }
      @media screen and (max-width: 640px) {
        .m-slider__thum__item__image {
          width: 22%; } }
      .m-slider__thum__item__content {
        letter-spacing: 0.06em;
        text-align: left;
        padding-top: 10px; }
        @media screen and (max-width: 640px) {
          .m-slider__thum__item__content {
            padding-top: 0;
            width: 76%; } }
        .m-slider__thum__item__content__title {
          font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
          font-feature-settings: 'palt';
          /*@include fz(27);*/
          font-size: 23px;
          font-size: 1.4375rem;
          font-weight: 600;
          line-height: 1; }
          @media screen and (max-width: 640px) {
            .m-slider__thum__item__content__title {
              font-size: 4vw; } }
        .m-slider__thum__item__content__text {
          font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
          font-feature-settings: 'palt';
          font-weight: 600;
          margin-top: 10px; }
          @media screen and (max-width: 640px) {
            .m-slider__thum__item__content__text {
              /*
               font-size: 3.9vw;
               transform: scale(0.8);
              */
              font-size: 3.12vw;
              line-height: 1.4;
              transform-origin: 0 0;
              width: 100%;
              padding-top: 0;
              margin-top: 8px;
              max-height: 5.6em;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical; } }
    @media screen and (max-width: 640px) {
      .m-slider__thum.m-wrapper {
        max-width: 100%;
        padding-left: 7%; } }
    @media screen and (max-width: 640px) {
      .m-slider__thum .slick-list {
        padding-right: 10%; } }
    .m-slider__thum .slick-slide {
      /*opacity: 0.8;*/
      padding: 0; }
      .m-slider__thum .slick-slide .m-slider__thum__item {
        opacity: 0.8;
        transition: opacity .2s, background 0.2s; }
        .m-slider__thum .slick-slide .m-slider__thum__item:hover {
          opacity: 1; }
    .m-slider__thum .slick-current {
      /*opacity: 1;*/ }
      .m-slider__thum .slick-current .m-slider__thum__item {
        opacity: 1;
        transition: opacity .2s, background 0.2s;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
        .m-slider__thum .slick-current .m-slider__thum__item:hover {
          background-color: #f3f3f3; }

.slick-arrow {
  width: 45px;
  height: 45px;
  font-size: 0;
  background: #2a2a2a;
  background: linear-gradient(180deg, #2a2a2a 0%, #494949 100%);
  border: none;
  outline: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; }
  @media screen and (max-width: 640px) {
    .slick-arrow {
      top: auto;
      /*bottom: -21vw;*/
      bottom: 0;
      transform: none; } }
  .slick-arrow:hover {
    cursor: pointer; }
  .slick-arrow::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%; }
  .slick-arrow.slick-prev {
    left: -12px; }
    @media screen and (max-width: 640px) {
      .slick-arrow.slick-prev {
        left: auto;
        right: 47px; } }
    .slick-arrow.slick-prev::after {
      transform: translate(-50%, -50%) rotate(225deg); }
  .slick-arrow.slick-next {
    right: -12px; }
    @media screen and (max-width: 640px) {
      .slick-arrow.slick-next {
        right: 0; } }

/*******************************
CONCEPT
*******************************/
.concept {
  padding-top: 135px;
  padding-bottom: 143px;
  background-image: url(../img/bg_gray.png);
  background-size: 50px 50px; }
  @media screen and (max-width: 640px) {
    .concept {
      padding-top: 60px;
      padding-bottom: 60px; } }
  .concept__wrap {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 640px) {
      .concept__wrap {
        flex-flow: column;
        align-items: center; } }
  .concept__image {
    width: 255px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-right: 1px solid #131313;
    padding-right: 10px; }
    @media screen and (max-width: 640px) {
      .concept__image {
        justify-content: center;
        padding-right: 0;
        border-right: none; } }
    .concept__image > img {
      margin-top: 17px; }
      @media screen and (max-width: 640px) {
        .concept__image > img {
          width: 125px;
          margin-top: 0;
          margin-right: 20px; } }
    @media screen and (max-width: 640px) {
      .concept__image h2 {
        border-left: 1px solid #131313;
        padding-left: 10px; }
        .concept__image h2 img {
          width: 11px; } }
  .concept__content {
    width: calc(100% - 300px);
    max-width: 100%;
    font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
    font-feature-settings: 'palt';
    font-weight: 600; }
    @media screen and (max-width: 640px) {
      .concept__content {
        width: 100%;
        text-align: center;
        padding-top: 30px; } }
    .concept__content__title {
      width: auto;
      font-size: 25px;
      font-size: 1.5625rem;
      letter-spacing: 0.07em;
      line-height: 1;
      font-feature-settings: "palt";
      font-weight: bold; }
      @media screen and (max-width: 640px) {
        .concept__content__title {
          font-size: 20px;
          font-size: 1.25rem;
          line-height: 1.6842105263; } }
      .concept__content__title .comma {
        color: #909499; }
      .concept__content__title--img {
        width: auto;
        padding: 0;
        margin: 0; }
    .concept__content__text {
      font-size: 18px;
      font-size: 1.125rem;
      letter-spacing: 0.09em;
      line-height: 2.2777777778;
      font-feature-settings: "palt";
      padding-top: 22px; }
      @media screen and (max-width: 640px) {
        .concept__content__text {
          font-size: 16px;
          font-size: 1rem;
          line-height: 2.2857142857;
          padding-top: 15px; } }

/*******************************
stories
*******************************/
.stories {
  background-image: url(../img/bg_white.png);
  background-size: 50px 50px;
  padding-bottom: 90px; }
  @media screen and (max-width: 640px) {
    .stories {
      padding-bottom: 60px; }
      .stories .m-title1 img {
        width: 43%; }
      .stories .m-title1::before {
        top: 45%; } }
  .stories__wrap {
    display: flex;
    flex-wrap: wrap;
    /*flex-flow:row-reverse;*/
    flex-wrap: wrap; }
    @media screen and (max-width: 640px) {
      .stories__wrap {
        /*flex-flow: column-reverse;*/
        flex-flow: column;
        align-items: center; } }
  .stories__item {
    width: 323px;
    margin-right: 30px;
    margin-top: 35px;
    padding-top: 35px;
    /*padding-top: 70px;*/
    position: relative; }
    @media screen and (max-width: 640px) {
      .stories__item {
        max-width: 91.25%;
        text-align: center;
        margin-right: 0; } }
    .stories__item:nth-of-type(-n+3) {
      margin-top: 0; }
    .stories__item:nth-of-type(3n) {
      margin-right: 0; }
    .stories__item__new {
      position: absolute;
      top: 23px;
      left: -12px;
      z-index: 1; }
    .stories__item__image {
      display: flex;
      flex-flow: column;
      position: relative; }
      .stories__item__image::after {
        content: '';
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        font-size: 18px;
        font-size: 1.125rem;
        /*
        color: #111;
        background-color: #fff;
        */
        color: #fff;
        background-color: #111;
        background-image: url(../img/arrow_wh.png);
        background-size: 18px 13px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        right: -1px;
        bottom: 0; }
      .stories__item__image img {
        transition: opacity 0.5s; }
        .stories__item__image img.hover {
          /*display: none;*/
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0; }
      .stories__item__image:hover {
        opacity: 1 !important; }
        .stories__item__image:hover img.hover {
          /*display: block;*/
          opacity: 1; }
        .stories__item__image:hover img:not(.hover) {
          /*display: none;*/
          opacity: 0; }
        @media screen and (max-width: 640px) {
          .stories__item__image:hover img.hover {
            opacity: 0;
            display: none; }
          .stories__item__image:hover img:not(.hover) {
            opacity: 1; } }
      .stories__item__image .m-label {
        bottom: 0;
        left: 0; }
    .stories__item__title {
      font-size: 20px;
      font-size: 1.25rem;
      font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
      font-feature-settings: 'palt';
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1;
      padding-top: 23px; }
      @media screen and (max-width: 640px) {
        .stories__item__title {
          font-size: 18px;
          font-size: 1.125rem; } }
    .stories__item__caption {
      font-size: 18px;
      font-size: 1.125rem;
      font-feature-settings: 'palt';
      font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
      /*font-weight: 600;*/
      font-weight: 500;
      letter-spacing: 0.05em;
      /*@include lineheight(20,52);*/
      line-height: 2.4;
      font-feature-settings: "palt";
      white-space: nowrap;
      margin-top: 23px; }
      @media screen and (max-width: 640px) {
        .stories__item__caption {
          font-size: 16px;
          font-size: 1rem;
          line-height: 2.8; } }
      .stories__item__caption .marker {
        background-color: #edeff3;
        padding: 10px 15px; }

/*******************************
ARTICLE
*******************************/
.article__mv {
  background-color: #111;
  text-align: center; }
  .article__mv__inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative; }
  .article__mv .m-slider__thum {
    width: 1030px;
    bottom: -40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: none; }
    @media screen and (max-width: 640px) {
      .article__mv .m-slider__thum {
        width: 96%;
        bottom: -80px;
        margin-right: 0;
        height: auto; } }
    .article__mv .m-slider__thum__item {
      width: 100%;
      height: 90px;
      opacity: 1;
      cursor: auto;
      margin: 0;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      padding: 20px 20px 20px 35px; }
      @media screen and (max-width: 640px) {
        .article__mv .m-slider__thum__item {
          width: 100%;
          height: auto;
          padding: 20px; } }
      .article__mv .m-slider__thum__item__content {
        display: flex;
        align-items: center;
        padding-top: 0; }
        @media screen and (max-width: 640px) {
          .article__mv .m-slider__thum__item__content {
            flex-flow: column;
            align-items: flex-start;
            width: auto; } }
        .article__mv .m-slider__thum__item__content__title {
          font-size: 25px; }
        .article__mv .m-slider__thum__item__content__text {
          font-size: 16px;
          padding-top: 0;
          padding-left: 80px;
          position: relative;
          margin-top: 0; }
          @media screen and (max-width: 640px) {
            .article__mv .m-slider__thum__item__content__text {
              width: 100%;
              font-size: 13px;
              line-height: 1.5;
              transform: none;
              padding-left: 0;
              padding-top: 10px; } }
          .article__mv .m-slider__thum__item__content__text::before {
            content: '';
            display: block;
            width: 65px;
            height: 1px;
            background-color: #131313;
            position: absolute;
            top: 50%;
            left: 0; }
            @media screen and (max-width: 640px) {
              .article__mv .m-slider__thum__item__content__text::before {
                display: none; } }
      .article__mv .m-slider__thum__item .m-label {
        top: -15px; }

.intro {
  padding-top: 100px;
  padding-bottom: 120px;
  background-image: url(../img/bg_gray.png);
  background-size: 50px 50px;
  /*-- 2021.11.09 Add：MG --*/
  /*-- 2021.11.09 Add：MG - end --*/ }
  @media screen and (max-width: 640px) {
    .intro {
      padding-bottom: 60px; } }
  .intro__text {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 2.3529411765;
    letter-spacing: 0.05em;
    font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
    font-feature-settings: "palt";
    font-weight: 600; }
    @media screen and (max-width: 640px) {
      .intro__text {
        font-size: 15px;
        font-size: 0.9375rem;
        /*text-align: center;*/ } }
    .intro__text small {
      line-height: 1.7;
      padding-top: 0.5em;
      font-weight: 100;
      display: inline-block; }
  .intro__notes {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 2.3529411765;
    letter-spacing: 0.05em;
    font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
    font-feature-settings: "palt";
    font-weight: 600;
    display: table; }
    @media screen and (max-width: 640px) {
      .intro__notes {
        font-size: 15px;
        font-size: 0.9375rem; } }
    .intro__notes dl {
      display: table-row;
      font-size: smaller;
      line-height: 1.7;
      font-weight: 100; }
      .intro__notes dl dt {
        display: table-cell;
        padding-top: 0.8em;
        padding-right: 0.5em;
        white-space: nowrap; }
      .intro__notes dl dd {
        display: table-cell;
        padding-top: 0.8em; }

.story {
  background-image: url(../img/bg_white.png);
  background-size: 50px 50px;
  /*-- 2021.10.26 Add：MG --*/
  /*-- 2021.10.26 Add：MG - end --*/
  /*-- 2021.10.26 Add：MG --*/
  /*-- 2021.10.26 Add：MG - end --*/ }
  .story .m-wrapper {
    padding: 0 80px 60px; }
    @media screen and (max-width: 640px) {
      .story .m-wrapper {
        padding: 0 20px 60px; } }
  .story .bg-white {
    background-color: #fff; }
  @media screen and (max-width: 640px) {
    .story .m-title1 img {
      width: 35%; }
    .story .m-title1::before {
      top: 45%; } }
  .story__border {
    display: block;
    margin: 90px 0 0 0;
    padding: 0;
    border: none;
    border-top: 1px #444444 solid; }
    @media screen and (max-width: 640px) {
      .story__border {
        margin: 30px 0px 0px 0px; } }
  .story__image {
    text-align: center;
    padding-top: 70px; }
    @media screen and (max-width: 640px) {
      .story__image {
        padding-top: 30px; } }
  .story__title {
    width: auto;
    font-size: 30px;
    font-size: 1.875rem;
    /*@include lineheight(60,70);*/
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
    font-feature-settings: 'palt';
    font-weight: 600;
    padding: 0;
    margin: 0;
    padding-top: 90px; }
    @media screen and (max-width: 640px) {
      .story__title {
        font-size: 25px;
        font-size: 1.5625rem;
        padding-top: 30px; } }
  .story__text {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 2.0588235294;
    letter-spacing: 0.03em;
    font-weight: 400;
    padding-top: 50px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    @media screen and (max-width: 640px) {
      .story__text {
        font-size: 15px;
        font-size: 0.9375rem;
        padding-top: 20px; } }
  .story__imgText {
    display: flex;
    justify-content: space-between;
    padding-top: 90px; }
    @media screen and (max-width: 640px) {
      .story__imgText {
        flex-flow: column-reverse;
        padding-top: 30px; } }
    @media screen and (max-width: 640px) {
      .story__imgText--sp--reverse {
        flex-flow: column; } }
    .story__imgText--reverse {
      flex-flow: row-reverse; }
      @media screen and (max-width: 640px) {
        .story__imgText--reverse {
          flex-flow: column; } }
    @media screen and (max-width: 640px) {
      .story__imgText > .story__imgText__text {
        padding-top: 0; } }
    .story__imgText__image {
      width: 300px;
      padding-top: 20px; }
      @media screen and (max-width: 640px) {
        .story__imgText__image {
          width: 50%;
          margin-left: auto;
          margin-right: auto; } }
    .story__imgText__text {
      width: 495px; }
      @media screen and (max-width: 640px) {
        .story__imgText__text {
          width: 100%;
          padding-top: 30px; } }
      .story__imgText__text .story__title {
        padding-top: 0; }
  .story__col {
    display: flex;
    flex-wrap: wrap;
    padding-top: 40px; }
    @media screen and (max-width: 640px) {
      .story__col {
        justify-content: center;
        padding-top: 0; } }
    .story__col__caption {
      color: #3b4043;
      font-size: 15px;
      font-size: 0.9375rem;
      line-height: 1.4666666667;
      letter-spacing: 0.03em;
      padding-top: 10px; }
      @media screen and (max-width: 640px) {
        .story__col__caption {
          font-size: 13px;
          font-size: 0.8125rem; } }
    .story__col--arrow {
      position: relative; }
      .story__col--arrow::after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15.5px 0 15.5px 13px;
        border-color: transparent transparent transparent #707070;
        top: 50%;
        transform: translateY(-50%);
        position: absolute; }
    .story__col--col2 {
      width: 410px;
      padding-top: 30px;
      margin-right: 45px; }
      @media screen and (max-width: 640px) {
        .story__col--col2 {
          width: 45%;
          margin-right: 0; } }
      .story__col--col2:nth-of-type(even) {
        margin-right: 0; }
        @media screen and (max-width: 640px) {
          .story__col--col2:nth-of-type(even) {
            margin-left: auto; } }
      .story__col--col2.story__col--arrow::after {
        right: -15%; }
      .story__col--col2.story__col--arrow:nth-of-type(2n)::after {
        display: none; }
    .story__col--col3 {
      width: 270px;
      padding-top: 30px;
      margin-right: 25px; }
      @media screen and (max-width: 640px) {
        .story__col--col3 {
          width: 70%;
          margin-right: 0; } }
      .story__col--col3:nth-of-type(3n) {
        margin-right: 0; }
      .story__col--col3.story__col--arrow::after {
        right: -20px; }
        @media screen and (max-width: 640px) {
          .story__col--col3.story__col--arrow::after {
            top: auto;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%) rotate(90deg); } }
      .story__col--col3.story__col--arrow:nth-of-type(3n)::after {
        display: none; }
  .story__col-title {
    padding-top: 70px;
    margin-bottom: -15px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600; }
    @media screen and (max-width: 640px) {
      .story__col-title {
        padding-top: 30px;
        font-size: 16px;
        line-height: 1.5;
        text-align: center; } }
  .story__col-title + .story__col {
    padding-top: 0; }
  .story__attention {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.03em;
    text-align: right;
    padding-top: 15px; }
    @media screen and (max-width: 640px) {
      .story__attention {
        font-size: 11px;
        font-size: 0.6875rem; } }
  .story__comment {
    border: 1px solid #040000;
    margin-top: 150px;
    background-color: #fff; }
    @media screen and (max-width: 640px) {
      .story__comment {
        margin-top: 100px; } }
    @media screen and (max-width: 640px) {
      .story__comment-wrapper.m-wrapper {
        padding: 0 0 60px; } }
    .story__comment-title {
      text-align: center;
      margin-top: -60px; }
      .story__comment-title--en, .story__comment-title--ja {
        display: inline-block;
        padding: 0 20px; }
      @media screen and (max-width: 640px) {
        .story__comment-title--en img {
          width: 120px; } }
      .story__comment-title--ja {
        font-size: 40px;
        font-size: 2.5rem;
        font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
        font-weight: 700;
        font-feature-settings: 'palt';
        letter-spacing: 0.06em;
        padding-top: 25px;
        background-color: #fff; }
        @media screen and (max-width: 640px) {
          .story__comment-title--ja {
            font-size: 28px;
            font-size: 1.75rem;
            line-height: 1.4;
            padding-top: 15px; } }
    .story__comment-inner {
      padding: 45px 120px; }
      @media screen and (max-width: 640px) {
        .story__comment-inner {
          padding: 0 20px 20px; } }
    .story__comment-parson {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      /*align-items: center;*/
      align-items: flex-start;
      padding: 25px 0;
      /*--2021.10.26 Add：MG --*/
      /*--2021.10.26 Add：MG - end --*/ }
      .story__comment-parson:nth-of-type(even) {
        flex-flow: row-reverse; }
      .story__comment-parson:not(:last-of-type) {
        border-bottom: 1px solid #f3f3f3; }
      .story__comment-parson.reverse {
        flex-flow: row-reverse; }
      .story__comment-parson.reverse:nth-of-type(even) {
        flex-flow: row; }
      .story__comment-parson--image {
        flex: 0 0 130px;
        margin-top: 0.5em; }
        @media screen and (max-width: 640px) {
          .story__comment-parson--image {
            flex-basis: 80px; } }
      .story__comment-parson--text {
        width: calc(100% - 150px);
        padding: 0 20px; }
        @media screen and (max-width: 640px) {
          .story__comment-parson--text {
            width: calc(100% - 90px);
            padding: 0; } }
        .story__comment-parson--text p {
          letter-spacing: 0.03em; }
          .story__comment-parson--text p:not(.name) {
            font-size: 19px;
            font-size: 1.1875rem;
            font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
            font-weight: 500;
            font-feature-settings: 'palt';
            line-height: 2; }
            @media screen and (max-width: 640px) {
              .story__comment-parson--text p:not(.name) {
                font-size: .9rem;
                line-height: 1.8;
                padding-bottom: .3em; } }
          .story__comment-parson--text p.name {
            color: #939ca6;
            font-size: 13px;
            font-size: 0.8125rem;
            font-weight: bold;
            text-align: right; }
            @media screen and (max-width: 640px) {
              .story__comment-parson--text p.name {
                font-size: 12px;
                font-size: 0.75rem; } }

/*******************************
product_link
*******************************/
/*-- 2021.11.15 Add：MG --*/
.product_link.m-wrapper {
  padding: 20px 80px 80px; }
  @media screen and (max-width: 640px) {
    .product_link.m-wrapper {
      padding: 0 0 60px; } }
.product_link__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 70px;
  background-color: #fff;
  position: relative;
  /*
  border: solid 1px #111;
  min-height: 120px;
  @include fz(28);
  */
  border: solid 2px #111;
  font-size: 22px;
  font-size: 1.375rem;
  width: 600px;
  margin: 0 auto;
  color: #111111;
  font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
  font-feature-settings: 'palt';
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.5; }
  @media screen and (max-width: 640px) {
    .product_link__btn {
      font-size: 16px;
      font-size: 1rem;
      line-height: 1.5;
      padding: 10px 40px;
      min-height: 60px;
      width: auto; } }
  .product_link__btn::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 50px; }
    @media screen and (max-width: 640px) {
      .product_link__btn::after {
        width: 10px;
        height: 10px;
        right: 20px; } }
#secret-story .product_link__btn {
  transition: all 0.3s; }
  #secret-story .product_link__btn:hover {
    color: #111111;
    background-color: #f3f3f3; }
  #secret-story .product_link__btn:focus {
    color: #111111;
    text-decoration: none; }
.product_link__btn + .product_link__btn {
  margin-top: 20px; }

/*-- 2021.11.15 Add：MG - end --*/
/*******************************
PAGER
*******************************/
.pager {
  padding: 70px 0;
  background-image: url(../img/bg_gray.png);
  background-size: 50px 50px; }
  @media screen and (max-width: 640px) {
    .pager {
      padding: 30px 0; } }
  .pager__wrap {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 640px) {
      .pager__wrap {
        flex-wrap: wrap; } }
    .pager__wrap li {
      width: calc(100% / 3); }
      @media screen and (max-width: 640px) {
        .pager__wrap li {
          width: 50%; }
          .pager__wrap li:nth-of-type(2) {
            width: 100%;
            order: -1;
            border-bottom: 1px solid #595959; } }
      .pager__wrap li:not(:last-child) {
        border-right: 1px solid #595959; }
        @media screen and (max-width: 640px) {
          .pager__wrap li:not(:last-child) {
            border-right: none; } }
      @media screen and (max-width: 640px) {
        .pager__wrap li:first-of-type {
          border-right: 1px solid #595959; } }
  .pager__link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height: 120px;
    background-color: #111; }
    @media screen and (max-width: 640px) {
      .pager__link {
        height: 80px;
        padding: 0 20px;
        text-align: center; } }
    @media screen and (max-width: 640px) {
      .pager__link img {
        transform: scale(0.8); } }
    .pager__link p {
      color: #fff;
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 1.4285714286;
      letter-spacing: 0.05em;
      font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
      font-weight: 300;
      font-feature-settings: 'palt';
      padding-top: 12px; }
      @media screen and (max-width: 640px) {
        .pager__link p {
          font-size: 12px;
          font-size: 0.75rem;
          line-height: 1.3333333333;
          padding-top: 5px; } }
    .pager__link--prev, .pager__link--next {
      position: relative; }
      .pager__link--prev::after, .pager__link--next::after {
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: translateY(-50%) rotate(225deg);
        position: absolute;
        top: 50%; }
    .pager__link--prev {
      position: relative; }
      .pager__link--prev::after {
        left: 50px; }
        @media screen and (max-width: 640px) {
          .pager__link--prev::after {
            left: 10px; } }
    .pager__link--next::after {
      right: 50px;
      transform: translateY(-50%) rotate(45deg); }
      @media screen and (max-width: 640px) {
        .pager__link--next::after {
          right: 10px; } }
    .pager__link--none {
      pointer-events: none; }
      .pager__link--none *, .pager__link--none::after {
        opacity: 0.6; }

/*******************************
ANOTHER
*******************************/
.another {
  padding-top: 90px;
  padding-bottom: 90px;
  background-image: url(../img/bg_white.png);
  background-size: 50px 50px; }
  @media screen and (max-width: 640px) {
    .another {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media screen and (max-width: 640px) {
    .another .m-title1 img {
      width: 85%; }
    .another .m-title1::before {
      top: 45%; } }
  .another__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media screen and (max-width: 640px) {
      .another__wrap {
        flex-flow: column;
        align-items: center; } }
  .another__item {
    width: 500px;
    padding-top: 35px;
    position: relative; }
    @media screen and (max-width: 640px) {
      .another__item {
        width: 100%;
        text-align: center; } }
    .another__item__image {
      display: flex;
      flex-flow: column;
      position: relative; }
      .another__item__image::after {
        content: '';
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        font-size: 18px;
        font-size: 1.125rem;
        /*
         color: #111;
         background-color: #fff;
        */
        color: #fff;
        background-color: #111;
        background-image: url(../img/arrow_wh.png);
        background-size: 18px 13px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        right: -1px;
        bottom: 0; }
      .another__item__image .m-label {
        bottom: 0;
        left: 0; }
    .another__item__title {
      font-size: 22px;
      font-size: 1.375rem;
      font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
      font-feature-settings: 'palt';
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1;
      padding-top: 25px; }
      @media screen and (max-width: 640px) {
        .another__item__title {
          font-size: 18px;
          font-size: 1.125rem; } }
    .another__item__caption {
      font-size: 20px;
      font-size: 1.25rem;
      font-family: "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W6", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", serif;
      font-feature-settings: 'palt';
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 2.4;
      font-feature-settings: "palt";
      margin-top: 23px; }
      @media screen and (max-width: 640px) {
        .another__item__caption {
          font-size: 16px;
          font-size: 1rem;
          margin-top: 15px; } }
      .another__item__caption .marker {
        background-color: #edeff3;
        padding: 8px 15px; }

/*******************************
OTHER STORIES
*******************************/
/*-- 2021.11.12 Add：MG --*/
.otherStories {
  padding-top: 90px;
  padding-bottom: 90px;
  background-image: url(../img/bg_white.png);
  background-size: 50px 50px; }
  @media screen and (max-width: 640px) {
    .otherStories {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media screen and (max-width: 640px) {
    .otherStories .m-title1 img {
      width: 85%; }
    .otherStories .m-title1::before {
      top: 45%; } }

/*-- 2021.11.12 Add：MG - end --*/
/*******************************
ANIMATION
*******************************/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

/* fadeInDown */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 7%, 0);
    transform: translate3d(0, 7%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

/* fadeIn */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

/*-- 2021.11.19 Add：MG --*/
/*******************************
share｜#sp_navi調整
*******************************/
@media screen and (max-width: 640px) {
  #sp_navi {
    right: calc(-100% - 10px); } }

/*******************************
プリント表示
*******************************/
@media print {
  .wow {
    opacity: 1 !important;
    visibility: visible !important; } }
/*--2021.11.19 Add：MG - end --*/