@charset "UTF-8";
:root {
  /* 色 */
  --color-main: #e63d30;
  --color-font-main: #000;
  --color-font-reverse: #fff;
  --color-font-sub: #333333;
  --color-font-inactive: #bcbcbc;
  --color-bg-main: #fbebe9;
  --color-bg-sub: #6b6b6b;
  --color-border: #bcbcbc;
  --color-date: #3c5a6b;
  --color-tag-link: #c8d2d5;
  --color-bg-main-new: rgb(240 244 246);
  --color-separate: #cbd5da;
  --color-newsroom: #eff2f4;
  --color-pager-hover: #003347;
  --color-bg-detail: #f4f3f0;
  --color-bg-detail: #f4f3f0;
  --color-border-detail: #cdc2be;
  --color-bg-main: rgba(209, 204, 189, 0.2);
}
#mainArea {
  font-family: "Noto Sans JP", "ヒラギノ角ゴシック Pro",
    "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic,
    "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  color: var(--color-font-main);
  line-height: 1.8;
  font-weight: 400;
  background-color: var(--color-font-reverse);
}
#mainArea * {
  box-sizing: border-box;
}
img, a {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (min-width: 770px) {
  /*=========================
▼▼共通▼▼
===========================*/
  #mainArea {
    font-size: var(--font-16);
  }
  .pc_none {
    display: none;
  }
  .auto {
    max-width: 1140px;
    width: 90%;
    margin: 0 auto;
  }
  .h1_title {
    font-size: 25px;
    line-height: 1.2;
    color: var(--color-font-sub);
    margin-bottom: var(--font-20);
    font-weight: 600;
  }
  .h2_title {
    font-size: 25px;
    line-height: 1.2;
    color: var(--color-font-sub);
    margin-bottom: var(--font-20);
    font-weight: 600;
  }
  .h3_title {
    font-size: var(--font-18);
    line-height: 1.4;
    color: var(--color-font-sub);
    font-weight: 600;
  }
  .date {
    font-size: var(--font-15);
    line-height: 1.2;
    color: var(--color-date);
    margin-bottom: var(--font-10);
    font-weight: 600;
  }
  .tag_list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .tag_list li {
    font-size: var(--font-13);
    text-decoration: underline var(--color-tag-link);
    text-underline-offset: 4px;
  }
  .tag_list li:hover {
    text-decoration: underline var(--color-main) 2px;
  }
  .link_btn {
    text-align: right;
  }
  .link_btn .right_arrow_icon {
    position: relative;
    font-size: 16px;
  }
  .link_btn .right_arrow_icon:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .link_btn .right_arrow_icon::after {
    content: "";
    display: block;
    width: 8px;
    height: 14px;
    background-image: url(../img/index/right_arrow.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 117px;
    transform: translateY(-50%);
  }
  .link_btn_02 {
    width: 44%;
    max-width: 447px;
    min-width: 280px;
    margin: 0 auto;
  }
  #mainArea .link_btn_02 .right_arrow_icon {
    position: relative;
    border: 1px solid var(--color-separate);
    border-radius: 100px;
    margin: 0 auto;
    padding: calc(var(--font-14) + 2px) 4% calc(var(--font-14) + 1px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
  }
  #mainArea .link_btn_02.link_relation_btn .right_arrow_icon {
    border-color: #003349;
    background-color: #003349;
    color: #fff;
  }


  #mainArea .link_btn_02 .right_arrow_icon::after {
    content: "";
    display: block;
    width: 8px;
    height: 14px;
    background-image: url(../img/index/right_arrow.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
  }
  #mainArea .link_btn_02.link_relation_btn .right_arrow_icon::after {
    background-image: url(../img/index/right_arrow_hover.png);
  }


  #mainArea .link_btn_02 .right_arrow_icon:hover {
    background: #E63D30;
    border-color: #E63D30;
    color: var(--color-font-reverse);
  }
  #mainArea .link_btn_02.link_relation_btn .right_arrow_icon:hover {
    background: #E63D30;
    border-color: #E63D30;
  }

  #mainArea .link_btn_02 .right_arrow_icon:hover::after {
    background-image: url(../img/index/right_arrow_hover.png);
  }
  .list_img {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .list_link .image {
    transform: scale(1);
    transition: all 0.3s;
  }
  .list_link:hover .image {
    transform: scale(1.1);
  }
  .list_link:hover .h3_title {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .column_nav_list ul li a::before {
    content: "";
    width: calc(100% - min(calc(40vw* .076), 40px));
    height: 2px;
    background-color: transparent;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -3px;
    transition: all 0.3s;
  }
  .column_nav_list ul li:first-of-type a::before {
    width: calc(100% - min(calc(20vw* .076), 20px));
    left: calc(50% - min(calc(10vw* .076), 10px));
  }
  .column_nav_list ul li:last-of-type a::before {
    width: calc(100% - min(calc(20vw* .076), 20px));
    right: calc(50% - min(calc(10vw* .076), 10px));
  }
  .column_nav_list ul li a:hover::before {
    background-color: var(--color-main);
  }
  /*=========================
▲▲共通▲▲
===========================*/
  /*=========================
  ▼▼コラムトップページ▼▼
  ===========================*/
  #conts_main {
    .main_title_block {
      width: 100%;
      border-bottom: 1px solid #cbd5da;
    }
    .main_title_block .auto {
      display: flex;
      max-width: 1000px;
      width: 80%;
      padding: var(--font-27) 0 var(--font-26);
      align-items: center;
      justify-content: space-between;
    }
    .main_title_left {
      display: flex;
      align-items: center;
      gap: 6%;
      width: 38%;
    }
    .column_nav_list {
      width: 48%;
    }
    .page_title {
      width: 60%;
      margin: 0;
      max-width: 287px;
    }
    .message {
      margin: 6px 0 0 0;
      width: 48%;
      max-width: 215px;
    }
    .column_nav_list ul {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .column_nav_list ul li {
      font-size: var(--font-14);
      line-height: 1.2;
    }
    .column_nav_list ul a {
      position: relative;
      padding: 2px min(calc(20vw* .076), 20px);
    }
    .column_nav_list ul a.inactive {
      pointer-events: none;
      color: var(--color-font-inactive);
    }

    .column_nav_list ul li:first-of-type a {
      padding-left: 0;
    }
    .column_nav_list ul li:last-of-type a {
      padding-right: 0;
    }
    .column_nav_list ul li:not(:last-of-type) a::after {
      content: "";
      width: 1px;
      height: 100%;
      display: block;
      background-color: var(--color-tag-link);
      position: absolute;
      right: -3%;
      top: 0;
    }
  }
  #conts_main_swiper {
    margin: 0 auto calc(var(--font-75) - 4px);
























    /* slider */
    .swiper {
      position: relative;
    }
    .swiper-slide {
      position: relative;
    }
    .swiper-nav {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .slider_block {
      width: 100%;
      border-bottom: 1px solid var(--color-separate);
      height: auto;
    }
    .swiper-container {
      width: 100%;
    }
    .swiper-slide {
      padding: var(--font-30) 3% var(--font-70);
      border-right: 1px solid var(--color-separate);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .swiper-slide-next,
    .swiper-slide-prev {
      height: 100%;
    }
    .swiper-slide::after {
      content: "";
      display: block;
      width: 2%;
      height: var(--font-100);
      background-color: var(--color-font-reverse);
      position: absolute;
      right: -1%;
      top: min(calc(166vw* .079), 166px);
      pointer-events: none;
    }
    .swiper-slide .list_img {
      margin-bottom: var(--font-19);
    }
    .swiper-slide .image {
      width: 100%;
    }
    .swiper-slide .h3_title {
      line-height: 1.8;
      margin-bottom: var(--font-27);
      font-size: var(--font-19);
    }
    .swiper-slide .tag_list {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .swiper-button-next,
    .swiper-button-prev {
      width: var(--font-50);
      height: var(--font-50);
      top: min(calc(212vw* .079), 212px);
      outline: none;
    }
    .swiper-button-next {
      left: auto;
      right: 16.5%;
    }
    .swiper-button-prev {
      left: 16.5%;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .swiper-button-next:after {
      background-image: url(../img/index/right_pager.png);
    }
    .swiper-button-prev:after {
      background-image: url(../img/index/left_pager.png);
    }
    .swiper-pagination {
      bottom: var(--font-24);
    }
    .swiper-pagination-bullet {
      width: 26px;
      height: 4px;
      margin: 0 8px;
      border-radius: 0;
    }
    .swiper-pagination-bullet-active {
      background-color: var(--color-main);
    }
  }
  /* /slider */
  .popular_box {
    margin-bottom: calc(var(--font-74) - 6px);

    .tag_list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: min(1vw, 10px);
      margin-bottom: var(--font-36);
    }
    .tag_list li {
      text-decoration: none;
    }
    .tag_list li a {
      font-size: 16px;
      border: 1px solid var(--color-border);
      border-radius: 17px;
      padding: 6px 12px 7px;
      line-height: 1.4;
    }
    .tag_list li a:hover {
      background-color: var(--color-main);
      color: var(--color-font-reverse);
      border: 1px solid var(--color-main);
    }
  }
  .recommend_block {
    margin-bottom: var(--font-85);
    .recommend_list {
      display: flex;
      gap: 22.5px;
    }
    .recommend_list>li {
      width: calc(100% / 3);
      max-width: 365px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .recommend_list .list_img {
      margin-bottom: calc(var(--font-19) - 5px);
    }
    .recommend_img {
      width: 100%;
      max-width: 365px;
      margin: 0 auto;
    }
    .h3_title {
      margin-bottom: calc(var(--font-14) - 4px);
      font-size: 18px;
    }
    .tag_list {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .new_box {
    margin-bottom: var(--font-85);

    .main_new_article {
      position: relative;
      padding: calc(var(--font-79) - 18px) 4% calc(var(--font-79)) 51%;
      background-color: var(--color-bg-main-new);
      margin-bottom: var(--font-50);

      .h3_title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: var(--font-22);
      }
      .list_img {
        position: absolute;
        top: calc(var(--font-50) - 5px);
        left: 7%;
        width: 40%;
        max-width: 461px;
        margin: 0 auto;
      }
      .text {
        font-size: var(--font-15);
        margin-bottom: var(--font-32);
      }
      .tag_list {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .new_article_list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: min(2.8vw, 44px) min(2vw, 28px);
      margin-bottom: var(--font-43);
    }
    .new_article_list li .list_img {
      margin-bottom: var(--font-10);
    }
    .new_article_list li {
      width: 1fr 1fr 1fr 1fr;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .new_article_list li .img {
      width: 100%;
      margin: 0 auto;
    }
    .new_article_list .h3_title {
      margin-bottom: calc(var(--font-10) - 6px);
      font-size: 18px;
    }
  }
  .feature_box {
    margin-bottom: var(--font-80);
    .feature_list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2vw 2%;
    }
    .feature_list li {
      width: 100%;
      max-width: 365px;
    }
    .feature_list li .h3_title {
      font-size: var(--font-19);
    }
    .feature_list li .img {
      width: 100%;
      margin-bottom: var(--font-10);
    }
  }
  .itoki_story_box {
    margin-bottom: 120px;
    margin-top: 120px;
    padding: var(--font-110) 0;
    background-color: var(--color-bg-main);












































    .img_box {
      width: 100%;
      margin: 0 auto calc(var(--font-40) - 3px);

      .img_eng {
        width: 35%;
        max-width: 392px;
        margin: 0 auto var(--font-18);
      }
      .img_jp {
        margin: 0 auto;
        width: 26%;
        max-width: 262px;
      }
    }

    .text_box {
      width: 100%;
      max-width: 658px;
      text-align: center;
      margin: 0 auto;

      .text:not(:last-of-type) {
        margin-bottom: var(--font-22);
      }
      .text {
        font-size: 16px;
      }
    }

  }
  .itoki_box {
    padding-bottom: calc(var(--font-100) - 22px);
    border-bottom: 1px solid var(--color-separate);
    margin-bottom: calc(var(--font-44) + 13px);
  }
  .img_area {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    .img_left {
      width: 55%;
      max-width: 550px;
    }
    .img_center {
      width: 18%;
      max-width: 192px;
      position: absolute;
      top: var(--font-150);
      left: 60%;
    }
    .img_right {
      width: 19%;
      max-width: 192px;
      position: absolute;
      top: var(--font-34);
      right: 0;
    }
  }
  .tag_search_box {
    margin-bottom: var(--font-85);

    .tag_box {
      margin-bottom: calc(var(--font-35) - 8px);

      .h3_title {
        font-size: var(--font-18);
        margin-bottom: var(--font-4);
      }
      .tag_list {
        display: flex;
        flex-wrap: wrap;
        gap: 2%;
      }
      .tag_list li {
        font-size: 16px;
      }
    }
  }
  .newsroom_box {
    border: 1px solid var(--color-tag-link);
    margin-bottom: var(--font-77);
    padding-bottom: var(--font-40);

    .h2_title {
      background-color: var(--color-newsroom);
      padding: calc(var(--font-32) - 10px) 2% var(--font-30);
      margin-bottom: 0;
      font-size: max(24px, var(--font-25));
    }
    .news_list {
      padding: var(--font-45) 2% var(--font-34);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 1%;
    }
    .news_list li .list_img {
      margin-bottom: var(--font-8);
    }
    .news_list li .h3_title {
      font-size: 15px;
    }
  }
  #mainArea .c-btn {
    display: flex;
  }

  /*=========================
  ▲▲コラムトップページ▲▲
  ===========================*/
  @media screen and (max-width: 1023px) {
    /*=========================
  ▼▼コラムトップページ▼▼
  ===========================*/
    #conts_main {
      .main_title_block .auto {
        flex-direction: column;
      }
      .main_title_left {
        width: 50%;
        margin: 0 auto 20px;
        gap: 10px;
      }
      .column_nav_list {
        width: 100%;
      }
      .message {
        margin: 0;
        width: 48%;
        max-width: 191px;
        min-width: 150px;
      }
      .column_nav_list ul {
        justify-content: center;
        gap: 0;
      }
      .column_nav_list ul li a {
        position: relative;
        padding: 0 16px;
        width: fit-content;
      }
      .column_nav_list ul li:not(:last-of-type) a::after {
        content: "";
        width: 1px;
        height: 100%;
        display: block;
        background-color: var(--color-tag-link);
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .column_nav_list ul li a:hover::before,
    .column_nav_list ul li a.active::before {
      background-color: var(--color-main);
    }
    /*=========================
  ▲▲コラムトップページ▲▲
  ===========================*/
  }
}
@media screen and (min-width: 1024px) {
  .column_nav_list li a {
    padding: 2px 0;
  }
}