@charset "UTF-8";
#page_title {
  background-image: url(../images01/owners_voice/mv_bg_pc.jpg); }

.page_content .main_txt {
  font-size: 14px;
  line-height: 1.8em;
  text-align: center; }
  @media screen and (max-width: 1400px) {
    .page_content .main_txt {
      font-size: 1vw; } }
  @media screen and (max-width: 768px) {
    .page_content .main_txt {
      font-size: 2.7vw; } }
.page_content .title_box {
  padding-bottom: 320px; }
  @media screen and (max-width: 1400px) {
    .page_content .title_box {
      padding-bottom: 22.9vw; } }
  @media screen and (max-width: 768px) {
    .page_content .title_box {
      padding-bottom: 50vw; } }
  .page_content .title_box h2 {
    font-size: 16px;
    text-align: center;
    font-weight: normal; }
    @media screen and (max-width: 1400px) {
      .page_content .title_box h2 {
        font-size: 1.1vw; } }
    @media screen and (max-width: 768px) {
      .page_content .title_box h2 {
        font-size: 2.7vw; } }
  .page_content .title_box .title_txt {
    font-size: 23px;
    text-align: center;
    line-height: 1.8em;
    margin-top: 0.5em;
    letter-spacing: 0.1em; }
    @media screen and (max-width: 1400px) {
      .page_content .title_box .title_txt {
        font-size: 1.6vw; } }
    @media screen and (max-width: 768px) {
      .page_content .title_box .title_txt {
        font-size: 3.5vw; } }
  .page_content .title_box .day {
    font-size: 13px;
    text-align: center;
    margin-top: 1em; }
    @media screen and (max-width: 1400px) {
      .page_content .title_box .day {
        font-size: 0.9vw; } }
    @media screen and (max-width: 768px) {
      .page_content .title_box .day {
        font-size: 2.4vw; } }
.page_content .main_pho_box {
  position: relative;
  width: 100%;
  height: 0; }
  .page_content .main_pho_box .main_pho {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px; }
    @media screen and (max-width: 1400px) {
      .page_content .main_pho_box .main_pho {
        width: 71.4vw; } }
    @media screen and (max-width: 768px) {
      .page_content .main_pho_box .main_pho {
        width: 80%; } }
.page_content .bg01 {
  background-color: #f9f5f2;
  padding-top: 370px;
  padding-bottom: 170px; }
  @media screen and (max-width: 1400px) {
    .page_content .bg01 {
      padding-top: 26.4vw;
      padding-bottom: 12.1vw; } }
  @media screen and (max-width: 768px) {
    .page_content .bg01 {
      padding-top: 48.7vw;
      padding-bottom: 20vw; } }
.page_content .story_section {
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 1400px) {
    .page_content .story_section {
      max-width: none;
      width: 71.4vw; } }
  @media screen and (max-width: 768px) {
    .page_content .story_section {
      max-width: none;
      width: 80%;
      display: block; } }
  .page_content .story_section .txt_box {
    width: 45%; }
    @media screen and (max-width: 768px) {
      .page_content .story_section .txt_box {
        width: 100%; } }
    .page_content .story_section .txt_box.long_txt {
      width: 100%; }
      @media screen and (max-width: 768px) {
        .page_content .story_section .txt_box.long_txt {
          width: 100%; } }
    .page_content .story_section .txt_box h3 {
      font-size: 15px;
      font-weight: 500;
      line-height: 2em;
      font-family: "Zen Kaku Gothic New", sans-serif; }
      @media screen and (max-width: 1400px) {
        .page_content .story_section .txt_box h3 {
          font-size: 1.1vw; } }
      @media screen and (max-width: 768px) {
        .page_content .story_section .txt_box h3 {
          font-size: 3.2vw;
          text-align: center; } }
    .page_content .story_section .txt_box .txt01 {
      display: block;
      border-top: 1px solid #c2bfbe;
      margin-top: 15px;
      padding-top: 20px;
      font-size: 14px;
      line-height: 2.1em; }
      @media screen and (max-width: 1400px) {
        .page_content .story_section .txt_box .txt01 {
          margin-top: 1.1vw;
          padding-top: 1.4vw;
          font-size: 1vw; } }
      @media screen and (max-width: 768px) {
        .page_content .story_section .txt_box .txt01 {
          font-size: 2.9vw;
          margin-top: 2.7vw;
          padding-top: 4vw;
          line-height: 1.8em; } }
  .page_content .story_section .pho01 {
    width: 45%; }
    @media screen and (max-width: 768px) {
      .page_content .story_section .pho01 {
        width: 100%;
        margin-top: 16.7vw; } }
  .page_content .story_section .pho_box02 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px; }
    @media screen and (max-width: 1400px) {
      .page_content .story_section .pho_box02 {
        margin-top: 8.6vw; } }
    @media screen and (max-width: 768px) {
      .page_content .story_section .pho_box02 {
        display: none; } }
  .page_content .story_section + .story_section {
    margin-top: 130px; }
    @media screen and (max-width: 1400px) {
      .page_content .story_section + .story_section {
        margin-top: 9.3vw; } }
    @media screen and (max-width: 768px) {
      .page_content .story_section + .story_section {
        margin-top: 16vw; } }
  .page_content .story_section.reverse .txt_box {
    order: 2; }
  .page_content .story_section.reverse .pho01 {
    order: 1; }
  .page_content .story_section.reverse .pho_box01 {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 130px auto 0; }
    @media screen and (max-width: 1400px) {
      .page_content .story_section.reverse .pho_box01 {
        margin: 9.3vw auto 0; } }
    @media screen and (max-width: 768px) {
      .page_content .story_section.reverse .pho_box01 {
        margin: 16vw auto 0; } }
    .page_content .story_section.reverse .pho_box01 .pho02 {
      width: 20%; }
      @media screen and (max-width: 768px) {
        .page_content .story_section.reverse .pho_box01 .pho02 {
          width: 41.7%;
          order: 2; } }
    .page_content .story_section.reverse .pho_box01 .pho03 {
      width: 53%; }
      @media screen and (max-width: 768px) {
        .page_content .story_section.reverse .pho_box01 .pho03 {
          width: 100%;
          order: 1;
          margin-bottom: 4.3vw; } }
    .page_content .story_section.reverse .pho_box01 .pho04 {
      width: 20%; }
      @media screen and (max-width: 768px) {
        .page_content .story_section.reverse .pho_box01 .pho04 {
          width: 53.3%;
          order: 3; } }
  .page_content .story_section.straight {
    display: block; }
    .page_content .story_section.straight .txt_box {
      width: 100%; }
    .page_content .story_section.straight .pho01 {
      width: 100%;
      margin-top: 130px; }
      @media screen and (max-width: 1400px) {
        .page_content .story_section.straight .pho01 {
          margin-top: 9.3vw; } }
      @media screen and (max-width: 768px) {
        .page_content .story_section.straight .pho01 {
          margin-top: 16vw; } }
.page_content .bottom_box {
  padding-top: 120px; }
  @media screen and (max-width: 1400px) {
    .page_content .bottom_box {
      padding-top: 8.6vw; } }
  @media screen and (max-width: 768px) {
    .page_content .bottom_box {
      padding-top: 22.7vw; } }
  .page_content .bottom_box .bottom_title {
    font-size: 14px;
    text-align: center;
    font-weight: normal; }
    @media screen and (max-width: 1400px) {
      .page_content .bottom_box .bottom_title {
        font-size: 1vw; } }
    @media screen and (max-width: 768px) {
      .page_content .bottom_box .bottom_title {
        font-size: 3.1vw; } }
.page_content .voice_box {
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 65px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 1400px) {
    .page_content .voice_box {
      max-width: none;
      width: 71.4vw;
      margin-top: 4.6vw; } }
  @media screen and (max-width: 768px) {
    .page_content .voice_box {
      display: block;
      width: 86.7%;
      margin-top: 11.3vw; } }
  .page_content .voice_box .voice_block {
    width: 48%;
    background-color: #f9f5f2; }
    @media screen and (max-width: 768px) {
      .page_content .voice_box .voice_block {
        width: 100%; } }
    @media screen and (max-width: 768px) {
      .page_content .voice_box .voice_block:nth-child(n+2) {
        margin-top: 10.7vw; } }
    .page_content .voice_box .voice_block:nth-child(n+3) {
      margin-top: 80px; }
      @media screen and (max-width: 1400px) {
        .page_content .voice_box .voice_block:nth-child(n+3) {
          margin-top: 5.7vw; } }
      @media screen and (max-width: 768px) {
        .page_content .voice_box .voice_block:nth-child(n+3) {
          margin-top: 10.7vw; } }
    .page_content .voice_box .voice_block a {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .page_content .voice_box .voice_block a .pho01 {
        width: 50%;
        overflow: hidden; }
        .page_content .voice_box .voice_block a .pho01 img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition-property: transform;
          transition-duration: 0.5s;
          transition-timing-function: ease-in-out;
          transform: scale(1); }
      .page_content .voice_box .voice_block a .txt_block {
        width: 50%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center; }
        .page_content .voice_box .voice_block a .txt_block .no {
          font-size: 16px;
          position: absolute;
          top: 0.5em;
          right: 0.5em; }
          @media screen and (max-width: 1400px) {
            .page_content .voice_box .voice_block a .txt_block .no {
              font-size: 1.1vw; } }
          @media screen and (max-width: 768px) {
            .page_content .voice_box .voice_block a .txt_block .no {
              font-size: 2.8vw; } }
        .page_content .voice_box .voice_block a .txt_block .link_txt {
          font-size: 15px;
          line-height: 1.8em;
          padding-left: 1em; }
          @media screen and (max-width: 1400px) {
            .page_content .voice_box .voice_block a .txt_block .link_txt {
              font-size: 1.1vw; } }
          @media screen and (max-width: 768px) {
            .page_content .voice_box .voice_block a .txt_block .link_txt {
              font-size: 2.7vw;
              letter-spacing: 0; } }
        .page_content .voice_box .voice_block a .txt_block .readmore {
          position: absolute;
          bottom: 12px;
          right: 60px;
          font-size: 16px;
          text-align: right; }
          @media screen and (max-width: 1400px) {
            .page_content .voice_box .voice_block a .txt_block .readmore {
              bottom: 0.9vw;
              right: 4.3vw;
              font-size: 1.1vw; } }
          @media screen and (max-width: 768px) {
            .page_content .voice_box .voice_block a .txt_block .readmore {
              bottom: 3.5vw;
              right: 10.9vw;
              font-size: 2.7vw; } }
        .page_content .voice_box .voice_block a .txt_block .arrow {
          position: absolute;
          width: 7px;
          right: 14px;
          bottom: 18px; }
          @media screen and (max-width: 1400px) {
            .page_content .voice_box .voice_block a .txt_block .arrow {
              width: 0.5vw;
              right: 1vw;
              bottom: 1.3vw; } }
          @media screen and (max-width: 768px) {
            .page_content .voice_box .voice_block a .txt_block .arrow {
              width: 1.2vw;
              right: 2.7vw;
              bottom: 4.3vw; } }
          .page_content .voice_box .voice_block a .txt_block .arrow::before {
            content: '';
            position: absolute;
            width: 35px;
            height: 1px;
            background-color: #000;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            opacity: 1;
            transition-property: width;
            transition-duration: 0.5s;
            transition-timing-function: ease-in-out; }
            @media screen and (max-width: 1400px) {
              .page_content .voice_box .voice_block a .txt_block .arrow::before {
                width: 2.5vw; } }
            @media screen and (max-width: 768px) {
              .page_content .voice_box .voice_block a .txt_block .arrow::before {
                width: 6.7vw; } }
      .page_content .voice_box .voice_block a:hover .pho01 img {
        transform: scale(1.05); }
      .page_content .voice_box .voice_block a:hover .txt_block .arrow::before {
        width: 0; }

/*---------------------------
アニメーション用CSS
-----------------------------*/