@charset "UTF-8";

html,
body {
  background-color: white;
  color: var(--font-color);
  font-size: var(--font-size-base);
  margin: 0;
  font-family: "Hiragino Sans-W4", "Hiragino Sans-W6", "Hiragino Sans-W7",
    "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans",
    "Liberation Sans", "Arial,sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  /* font-family: "-apple-system","Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial,sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
}

a {
  text-decoration: none;
  color: var(--link-font-color);
  cursor: pointer;
}

.main {
  margin-top: var(--navbar-height);
}

.container {
  padding: var(--spacing-xl) var(--spacing-xxl);

  @media screen and (max-width: 1024px) {
    padding: var(--spacing-xl) var(--spacing-xl);
  }

  @media screen and (max-width: 480px) {
    padding: var(--spacing-xl) var(--spacing-md);
  }
}

.font-xxs {
  font-size: var(--font-size-xxs);
}

.font-xs {
  font-size: var(--font-size-xs);
}

.font-sm {
  font-size: var(--font-size-sm);
}

.font-md {
  font-size: var(--font-size-md);
}

.font-lg {
  font-size: var(--font-size-lg);
}

.font-xl {
  font-size: var(--font-size-xl);
}

.font-xxl {
  font-size: var(--font-size-xxl);
}

.font-xxxl {
  font-size: var(--font-size-xxxl);
}

.button-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-color);
  border-radius: var(--corner-md-duplicate);
  color: var(--btn-font-color);
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  height: 40px;
  font-weight: bold;
  border: solid var(--btn-color);
  /* cursor: pointer; */
}

.button-link:hover {
  background-color: var(--btn-hover-color);
  color: var(--btn-hover-font-color);
  border-color: var(--btn-hover-border-color);
  border: solid;
}

.button-large {
  width: 380px;
}

.button-medium {
  width: 320px;
}

.text {
  line-height: 32px;
  letter-spacing: 1.6px;
}

.text-center {
  text-align: center;
}

@media screen and (max-width: 480px) {
  .text-sp-start {
    text-align: start !important;
  }
}

.d-none {
  display: none !important;
}

@media screen and (max-width: 480px) {
  .d-sp-none {
    display: none !important;
  }
}

@media screen and (min-width: 481px) {
  .d-pc-none {
    display: none !important;
  }
}

.bg-black {
  background-color: rgba(0, 0, 0, 1) !important;
}

.d-flex {
  display: flex;
}

.course-schedule {
  margin: 2rem 0;
  display: block;
  width: 100%;

  .course-plan {
    padding: 0.5rem 0 0.25rem 0;
    display: flex;
    border-top: var(--border-property);

    .course-plan-title {
      display: flex;
      gap: var(--spacing-xs);
      padding: 0 var(--spacing-xs);
      justify-content: space-between;

      .course-plan-text {
        flex: 1;
      }

      .button-link {
        width: 4rem;
        height: 1.5rem;
      }
    }

    .course-plan-list {
      width: 100%;

      .course-plan-title {
        padding-top: 0.5rem;
      }

      .course-plan-title:first-child {
        padding-top: 0;
      }
    }
  }
}

/* @font-face {
    font-family: "Hiragino Sans-W4";
    src: url("https://anima-uploads.s3.amazonaws.com/projects/618a02296486cfcbad9d81ee/fonts/yfileshalf.otf") format("opentype");
}

@font-face {
    font-family: "Hiragino Sans-W6";
    src: url("https://anima-uploads.s3.amazonaws.com/projects/637f67d57f018e2142ae3ee8/fonts/notosansjp-regular.otf") format("opentype");
}

@font-face {
    font-family: "Hiragino Sans-W7";
    src: url("https://anima-uploads.s3.amazonaws.com/projects/64e83570f1b61250aab16b72/fonts/hirakinojiao-ko-std-w6.otf") format("opentype");
} */

.external-link-group {
  width: 100%;
  justify-content: start;
  display: flex;
  flex-wrap: wrap;
  padding: var(--spacing-md) 0 var(--spacing-xl) 0;
  margin: 0 auto;

  .external-link {
    flex: 0 0 auto;
  }
}

/* ナビバーのスタイル */
header {
  .header {
    z-index: 1000;
    height: inherit;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    box-shadow: 1px 1px 10px gray;

    nav {
      height: var(--navbar-height);
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-xl);
      margin: 0 2.5%;
    }

    .site-logo {
      flex: 1;
      max-width: 320px;
      align-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    input#nav-menu-is-display {
      display: none;
    }

    .hamburger {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0.5rem;
      padding: 0.25rem;
      cursor: pointer;

      img {
        width: 100%;
      }
    }

    /* SP版 メニュー表示 */
    /* 720px以下 もしくは ホバー不可（タッチ操作）の場合 */
    @media screen and (max-width: 720px), (hover: none) {
      nav {
        margin: 0 var(--spacing-md) 0 var(--spacing-xs);
      }

      .nav-container {
        display: flex;
        justify-content: end;
        position: fixed;
        top: var(--navbar-height);
        right: -100%;
        width: 100%;
        height: 100vh;
        transition: 0.5s all;
      }

      .nav-container:has(input#nav-menu-is-display:checked) {
        right: 0;
        transition: 0.5s all;
      }

      .nav-menu {
        width: 85%;
        height: fit-content;
        background-color: var(--navbar-sp-color);
        padding: var(--spacing-md);

        .nav-menu-controller {
          text-align: right;
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

          li {
            line-height: 3rem;
          }
        }

        a {
          color: var(--footer-font-color);
        }
      }

      .nav-menu > ul > li {
        border-top: 1px solid var(--footer-border-color);
      }

      .nav-menu > ul > li:first-child {
        border-top: 0;
      }

      .nav-menu > ul > li > ul > li a::before {
        content: ">";
        display: inline-block;
        width: 1.25rem;
      }

      /* 言語選択 */
      .nav-menu > ul > li.select-language {
        border-top: 0;
      }

      .nav-menu > ul > li.select-language > .nav-link {
        display: none;
      }

      .nav-menu > ul > li.select-language > ul {
        display: flex;
        /*言語選択を改行*/
        flex-wrap: wrap;
      }

      .nav-menu > ul > li.select-language > ul > li {
        margin-top: var(--spacing-md);
        margin-right: var(--spacing-md);
      }

      .nav-menu > ul > li.select-language > ul > li a {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--corner-md-duplicate);
        font-weight: bold;
        border: solid 1px var(--btn-font-color);
        padding: 0 var(--spacing-md);
      }

      .nav-menu > ul > li.select-language > ul > li a.active {
        background-color: var(--btn-hover-color);
        color: var(--btn-hover-font-color);
        border: solid 1px var(--btn-hover-border-color);
      }

      .nav-menu > ul > li.select-language > ul > li a::before {
        content: "";
        width: 0;
      }

      /* 各モデルコースは表示しない */
      .nav-menu > ul > li > .nav-link[href$="#recommend-model-course"] ~ ul {
        display: none;
      }
    }

    /* PC版 メニュー表示 */
    /* 721px以上 かつ ホバー可能（マウス操作）の場合 */
    @media screen and (min-width: 721px) and (hover) {
      .nav-menu-open,
      .nav-menu-close {
        display: none;
      }

      .nav-menu,
      .nav-menu ul {
        height: 100%;
      }

      .nav-menu > ul li,
      .nav-menu > ul li img {
        vertical-align: middle;
      }

      .nav-menu > ul {
        display: flex;
        margin: 0;
        padding: 0;
        width: 80%;
        text-align: center;
      }

      .nav-menu > ul > li {
        margin: 0.25rem 0.75rem;
      }

      .nav-menu ul > li {
        display: block;
        text-wrap: nowrap;
        position: relative;
      }

      .nav-menu ul > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
      }

      .nav-menu ul > li:hover > a {
        color: var(--title-font-color);
      }

      .nav-menu > ul > li > ul {
        display: none;
        background-color: white;
      }

      .nav-menu > ul > li:hover > ul {
        display: table;
        position: absolute;
        top: 100%;
        right: 0;
        border-top: 4px solid green;
        width: 100%;
        padding: 0 1rem;
        margin: 0 -1rem;
      }

      .nav-menu > ul > li > ul > li {
        height: 3.5rem;
        border-top: rgba(230, 230, 230, 1) solid 1px;
      }

      .nav-menu > ul > li > ul > li:first-child {
        border-top: 0;
      }
    }
  }
}

@media screen and (min-width: 721px) and (hover) {
  /* Safari */
  header .header .nav-menu > ul > li:not(.select-language):hover > ul {
    left: 0;
    margin: 0 -200px;
  }
}

/* フッターのスタイル */
footer {
  width: 100%;
  background-color: var(--footer-color);
  color: var(--footer-font-color);

  .footer {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: var(--container-max-width);
    justify-content: space-between;
    gap: var(--spacing-xl);
    text-wrap: nowrap;

    .company-info,
    .site-map {
      flex: 1 0 0%;
    }

    .company-info {
      flex-grow: 6;
      max-width: 100%;

      .site-logo {
        width: 100%;
        max-width: 400px;
        padding-bottom: 1.5rem;

        img {
          width: 100%;
        }
      }

      .company-name,
      .company-contact {
        padding-bottom: 1rem;
      }

      .company-contact {
        display: flex;
      }

      .company-contact::before {
        display: block;
        width: 2em;
        text-align: center;
      }
    }

    .site-map {
      flex-grow: 4;
      max-width: 100%;

      ul {
        padding: 0;
        margin: 0;
        list-style: none;

        li {
          line-height: 3rem;
        }
      }

      a {
        color: var(--footer-font-color);
      }
    }

    .site-map > ul > li {
      border-top: 1px solid var(--footer-border-color);
    }

    .site-map > ul > li:first-child {
      border-top: 0;
    }

    .site-map > ul > li > ul > li a::before {
      content: ">";
      display: inline-block;
      width: 1.25rem;
    }

    @media screen and (max-width: 480px) {
      flex-wrap: column;
      /* display: block; */
      text-wrap: wrap;

      .company-info {
        display: contents;
      }

      .company-detail,
      .site-map,
      .external-link-group {
        width: 100%;
      }

      .company-detail {
        order: 1;
      }

      .site-map {
        order: 2;
      }

      .external-link-group {
        order: 3;
      }
    }
  }

  .copyright {
    text-align: right;

    .copyright-text {
      padding-right: 1rem;
      padding-bottom: 1.5rem;
    }
  }
}

.fw-normal {
  font-weight: normal;
}

.fw-400 {
  font-weight: 400;
}

.font-bold {
  font-weight: 750;
}

/* アイコン */
.icon-airplane-takeoff::before {
  content: url(img/icon-airplane-takeoff.svg);
  vertical-align: middle;
}

.icon-airplane-landing::before {
  content: url(img/icon-airplane-landing.svg);
  vertical-align: middle;
}

.icon-next::before {
  content: url(img/icon-next.svg);
  vertical-align: middle;
}

.icon-bus::before {
  content: url(img/icon-bus.svg);
  vertical-align: middle;
}

.icon-ribbon::before {
  content: url(img/icon-ribbon.svg);
  vertical-align: middle;
}

.icon-food::before {
  content: url(img/icon-food.svg);
  vertical-align: middle;
}

.icon-hotel::before {
  content: url(img/icon-hotel.svg);
  vertical-align: middle;
}

.icon-pin::before {
  content: url(img/icon-pin.svg);
  vertical-align: middle;
}

.icon-phone::before {
  content: url(img/icon-phone.svg);
  vertical-align: middle;
}

.icon-mail::before {
  content: url(img/icon-mail.svg);
  vertical-align: middle;
}

.icon-book::before {
  content: url(img/icon-book.svg);
  vertical-align: middle;
}

.icon-green-book::before {
  content: url(img/icon-green-book.svg);
  vertical-align: middle;
}

.icon-copy-after::after {
  content: url(img/icon-copy.svg);
  vertical-align: middle;
}

a:hover .button-link .icon-copy-after::after {
  content: url(img/icon-green-copy.svg);
}

.icon-select-language::after {
  content: url(img/icon-language.svg);
  vertical-align: middle;
}

li:hover .icon-select-language::after {
  content: url(img/icon-green-language.svg);
}

.img-zoom-wrapper {
  line-height: 0;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.img-zoom-wrapper img {
  transition: var(--img-zoom-transition) all;
  width: 100%;
}

.img-zoom-wrapper img:hover {
  transition: var(--img-zoom-transition) all;
  transform: var(--img-zoom-transform);
}

.img-zoom-wrapper.img-zoom-rounded {
  border-radius: 24px;
}

.img-zoom-wrapper.img-zoom-sm-rounded {
  border-radius: 8px;
}

@media screen and (max-width: 480px) {
  .img-zoom-wrapper img:hover {
    transform: scale(1, 1);
  }
}

.any-position-break > span {
  display: inline-block;
}

/* タブ切り替え */
.tab-container {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.tab-container .tab-label {
  border: solid 2px var(--btn-color);
  color: var(--btn-hover-font-color);
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  width: 9rem;
  cursor: pointer;
  text-align: center;
}

.tab-container .tab-content {
  width: 100%;
  display: none;
  margin-top: var(--spacing-md);
}

.tab-container .tab-description {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* アクティブなタブ */
.tab-container .tab-switch:checked + .tab-label {
  background: var(--btn-color);
  color: var(--btn-font-color);
}

.tab-container .tab-switch:checked + .tab-label + .tab-content {
  display: block;
}

/* ラジオボタン非表示 */
.tab-container .tab-switch {
  display: none;
}

.text-link {
  color: var(--text-link-font-color);
}

.link-underline {
  text-decoration: underline;
}