/* Parts
========================================================================== */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/Lato-700.woff") format("woff"), url("../webfonts/Lato-700.woff2") format("woff2");
  font-display: swap;
}

.title {
  font-size: var(--font-3xl);
  line-height: 4.5rem;
  color: var(--text-color);
  font-family: "Lato";
  font-weight: 700;
}

.read {
  padding-bottom: 6rem;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: var(--space-xs);
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

fieldset {
  margin-bottom: var(--space-xl);
}

.page-title {
  background-color: #f8f7f3;
}
.page-title__main {
  text-align: center;
  padding: 4rem;
}

.price {
  padding: var(--space-xs);

  & .red {
    font-size: 110%;
  }
}

.page_top {
  position: fixed;
  bottom: 85px;
  right: 10px;
  width: 45px;
  height: 45px;

  & i {
    font-size: var(--font-2xl);
    font-weight: 700;
  }
}

.page-end-box {
  & .card {
    border: 0.3rem solid var(--text-color);

    & .card-header {
      text-align: center;
      font-weight: 400;
      font-size: 2.5rem;
      background: var(--text-color);
      color: #fff;
    }

    & .card-body {
      padding: var(--space-lg);

      & a + a {
        margin-left: 0;
        margin-top: var(--space-sm);
      }

      & p {
        margin-bottom: 0;
      }

      & .more,
      & .more:visited {
        line-height: 4.5rem;
        font-size: var(--font-2xl);
        padding: 0 2.5rem;
        font-weight: 400;
      }
    }

    &::before {
      display: none;
    }
  }
}

.main-breadcrumb {
  padding: var(--space-sm);

  & .breadcrumb {
    background: none;
    padding: 0;
    font-size: 1.3rem;
    line-height: 2.4rem;
    margin-bottom: 0;

    & a {
      color: #3B4043;
    }
  }
}

/* contents
========================================================================== */
#point h3 {
  line-height: 4rem;

  & .circle {
    margin-right: var(--space-xs);
  }
}

#lineup {
  & ul {
    display: flex;
    flex-wrap: wrap;

    & li {
      width: 25%;
      padding: 0 var(--space-sm);
    }
  }

  & .card {
    position: relative;

    & .card-body {
      padding: 0.25rem;
    }

    & .card-title {
      margin-bottom: 0;

      & h3 {
        padding: var(--space-xs);
        margin-bottom: 0;
        line-height: 2.5rem;
      }
    }

    & .circle {
      width: 5rem;
      height: 5rem;
      background-color: #F40E08;
      border-color: #F40E08;
      font-weight: 700;
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
      z-index: 1;
    }

    & .detail {
      display: none;
      border-radius: var(--radius-sm);
      z-index: 10;
    }

    &:hover .detail {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      padding: var(--space-md) var(--space-xs);
      background: #333;
      opacity: 0.9;

      & .more-box {
        padding: 0.25em;

        & .more + .more {
          margin-top: var(--space-sm);
        }
      }
    }
  }
}

.example-box .main-box ul li {
  margin-bottom: var(--space-xl);

  & .card {
    margin: 0;
  }

  & a .card-text {
    font-size: var(--font-md);
    line-height: 2.5rem;
    display: none;
  }

  & a:hover .card-text {
    display: block;
  }
}

.example-box .columns {
  column-count: 4;
  column-gap: var(--space-md);
  column-fill: auto;
  display: flex;

  & .pin {
    display: inline-block;
    background: #FEFEFE;
    border: 1px solid #f6f6f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin: 0 2px var(--space-md);
    padding: var(--space-xs);
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
    transition: all 0.2s ease;
    width: 23%;

    & .pc {
      position: relative;

      & p {
        font-size: var(--font-sm);
        line-height: 2rem;
        margin-bottom: 0;
      }
    }

    & > a {
      display: none;
    }

    & img {
      width: 100%;
      margin-bottom: var(--space-xs);
    }

    & > p {
      border-top: 1px dotted #f6f6f6;
      padding: var(--space-sm) var(--space-xs) var(--space-xs);
      font-size: var(--font-sm);
      line-height: 1.4rem;
      margin-bottom: 0;
    }

    & .detail {
      display: none;
      border-radius: var(--radius-sm);
      z-index: 10;

      & p {
        font-size: 0.8rem;
        line-height: 1.4rem;
        color: #fff;
        margin-bottom: var(--space-sm);
      }

      & .more-box {
        margin-top: var(--space-sm);

        & .more,
        & .more:visited,
        & .more:hover {
          font-size: var(--font-md);
          border-radius: var(--radius-sm);
          padding: var(--space-sm);
          line-height: 1.5rem;
          opacity: 1;
        }
      }
    }

    &:hover > p {
      opacity: 0.2;
    }

    &:hover .detail {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      padding: var(--space-sm);
      background: #333;
      opacity: 0.9;
    }
  }
}

.scene-box .card {
  & h3.card-title {
    text-align: center;
    margin-bottom: 0;
    line-height: 2.5rem;
  }

  & .card-text {
    margin: var(--space-xs);
  }
}

.pickup-box .main-box ul li {
  padding-bottom: var(--space-lg);

  & a:hover {
    color: var(--border-color);
  }

  & h3 {
    padding: var(--space-xs) 0;
    background: none;
    border-bottom: none;
    line-height: 3rem;
    margin-bottom: 0;
  }
}

.column-box ul {
  margin-bottom: var(--space-xl);
}

.strength-box {
  & .card .card-body {
    display: inline-block;
    padding: var(--space-lg);
  }

  & .card ol li {
    font-size: var(--font-xl);
    font-weight: 700;
    padding-left: 5rem;

    &:nth-child(1) {
      background-image: url("../img/common/strength1.webp");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    &:nth-child(2) {
      background-image: url("../img/common/strength2.webp");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    &:nth-child(3) {
      background-image: url("../img/common/strength3.webp");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-position: 0 center;
    }
  }

  & ul li h3 {
    font-size: var(--font-md);
    line-height: 3rem;

    & .circle {
      background: #57C0C8;
      border-color: #57C0C8;
      margin-right: var(--space-xs);
      width: 3rem;
      height: 3rem;
    }
  }

  & ul li + li {
    margin-top: var(--space-lg);
  }
}

/* header
========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 99;

  & .pagetop {
    background: #565656;
  }

  & .pagetop--wrap {
    display: flex;
    justify-content: space-between;

    & h1 {
      font-size: 1.3rem;
      line-height: 3rem;
      color: #fff;
      font-weight: 400;
    }

    & p {
      font-size: 1.3rem;
      line-height: 3rem;
      color: #fff;
      font-weight: 400;
      margin-bottom: 0rem;
    }

    & .page-header-subtitle {
      font-size: 1.0rem;
    }
  }

  & .pagetop--right {
    display: flex !important;

    & li {
      padding-left: var(--space-lg);
      font-size: 1.3rem;
      line-height: 3rem;

      & a {
        color: #fff;

        &:hover {
          color: var(--border-color);
        }

        & i {
          padding-right: var(--space-xs);
        }

        &.more.btn-detail,
        &.more.btn-detail:visited {
          line-height: 1rem;
          padding: 0.4rem 0.1rem;
          background: #eee;
          border-radius: 0.2rem;
        }

        &.more.btn-detail::before,
        &.more.btn-detail:visited::before {
          display: none;
        }
      }

      &:hover .more.btn-detail,
      &:hover .more.btn-detail:visited {
        padding-bottom: 0.8rem;
        border-bottom: none;
        border-radius: 0.2rem 0.2rem 0 0;
      }
    }
  }

  & .header {
    border-bottom: 0.5rem solid var(--border-color);
    background: #fff;
  }

  & .header__main {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
  }

  & .header__main__nomal {
    justify-content: space-between;
  }

  & .header__main--left {
    width: 23rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    & img {
      width: auto;
      height: 80px;
    }
  }

  & .header__main--center {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;

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

  & .header__main--right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    & .header-contact {
      align-items: center;
      display: flex;

      & .tel {
        width: 20rem;
        vertical-align: middle;
      }

      & .more-box {
        width: 12rem;

        & .more {
          color: #fff;
          background: #F38F00;
          border-radius: 5px;
          padding: 0;
          width: 100%;
          border: 2px solid var(--loud-color);

          &:hover {
            color: #fff;
            background: #F40D07;
          }

          &::after {
            display: none;
          }
        }

        &.btn-repeat {
          width: 10rem !important;
          margin-right: var(--space-sm);

          & .more,
          & .more:visited {
            color: #fff;
            font-weight: 700;
            border: 2px solid #12A73B;
            background: #12A73B;
            border-radius: 0.3rem;

            & i {
              padding: 0 var(--space-xs) 0 0;
            }

            &:hover {
              background: #008000;
            }

            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
}

/* header-info
========================================================================== */
.header-info-box {
  background: #f8f7f3;
  color: #DE2C0C;
  font-size: var(--font-md);
  padding: var(--space-sm) 0;
  text-align: center;
  font-weight: 700;

  & p {
    margin-bottom: 0;
  }
}

.dropdown {
  position: relative;
  display: inline-block;

  &:hover .dropdown-content {
    display: block;
  }

  & .dropbtn {
    cursor: pointer;
    /*background-color: #3e8e41;*/
  }

  & .dropdown-container {
    position: relative;
  }

  & .dropdown-content {
    display: none;
    position: absolute;
    background-color: #FDF3E5;
    min-width: 100%;
    width: 290px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    left: -105%;
    padding: var(--space-md);

    &:before {
      content: "";
      position: absolute;
      top: -25px;
      left: 50%;
      margin-left: -15px;
      border: 15px solid transparent;
      border-bottom: 15px solid #FDF3E5;
    }

    & li + li {
      margin-top: 0.8rem;
    }

    & a:hover {
      background-color: #fff;
      border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
      box-sizing: border-box;
      color: var(--loud-color);
      /*opacity: 0.6;*/
    }

    & .btn_3 {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      border: 1px solid #ccc;
      border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
      background-color: #fff;
      display: block;
      font-size: 1.3rem;
      padding: var(--space-xs);
      color: var(--text-color);
      font-weight: 700;
      line-height: 3.5rem;
      position: relative;
      transition: all 300ms ease-in-out;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }

    & a:hover .btn_3 {
      border: 1px solid var(--loud-color);
      border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
      box-sizing: border-box;
      color: var(--loud-color);
    }
  }
}

.page-onepoint .sub-menu .dropdown-content,
.page-naire .sub-menu .dropdown-content {
  left: -20%;
}

.main-nav-sp .sp_h1 {
  line-height: 3rem !important;
  color: #fff !important;
  padding: 0 8px !important;
  background: #565656 !important;
  border-bottom: 1px solid var(--border-color) !important;
  text-align: center !important;

  & h1 {
    font-size: 1.1rem !important;
    font-weight: normal !important;
  }
}

/* footer
========================================================================== */
.footer {
  border-top: 7px solid var(--border-color);
  padding-top: 4.5rem;
  background: var(--grey-card);

  & .copyright {
    border-top: 1px solid var(--border-color);
    background: #565656;
    text-align: center;
    padding: var(--space-xs) 0;

    & p {
      font-size: var(--font-md);
      color: #fff;
      margin-bottom: 0;
    }
  }
}

.footer__menu {
  margin-bottom: 4.5rem;

  & .container {
    max-width: 105rem;
  }

  & .list-menu {
    border-right: 1px solid var(--border-color);
    padding: 0 var(--space-xl);

    & h3 {
      font-size: var(--font-lg);
      line-height: 2.8rem;
      color: #333333;
      margin-bottom: var(--space-md);
    }

    & ul li a {
      font-size: var(--font-md);
      color: #1f1f1f;
      line-height: 2.5rem;
      transition: all 300ms ease-in-out;

      &:hover {
        color: var(--border-color);
      }
    }

    &:last-child {
      border: none;
    }
  }
}

.footer__list {
  border-top: 1px solid var(--border-color);
  background: #fff;

  & .container {
    padding: 0 var(--space-xl);
  }

  & .footer__list-contents {
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;

    & .items {
      border-left: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      width: 20%;

      & a {
        font-size: var(--font-md);
        line-height: 2.4rem;
        padding: var(--space-xs);
        display: flex;
        align-items: center;
        font-weight: 700;
        vertical-align: middle;
        color: #333;

        & img {
          margin-right: var(--space-md);
          max-width: 5rem;
          height: auto;
        }
      }

      &:hover {
        background: #565656;

        & a {
          color: #fff;
        }
      }
    }
  }
}

/* sidebar-blog
========================================================================== */
.sideblogContent {
  padding-bottom: var(--space-xl);

  & dt {
    padding: var(--space-sm);
    border: 1px var(--border-color) solid;
    border-left: 7px var(--border-color) solid;
    margin-bottom: var(--space-sm);
    font-size: var(--font-2xl);
  }

  & dl ul {
    padding-left: var(--space-sm);

    & li {
      width: 100%;
      display: block;
      padding: var(--space-sm) 0;
    }
  }

  & .badge {
    color: #fff;
    background-color: var(--link-color);
    margin-left: var(--space-xs);
  }

  & div {
    margin-bottom: var(--space-lg);
    text-align: center;
  }

  & .list-group-item.active {
    background: #f6f6f6;
    color: var(--text-color);
    border-color: var(--border-color);
    margin-bottom: 0;
  }
}

.sidebar {
  margin-bottom: var(--space-xl);

  & h3 {
    font-size: var(--font-2xl);
    color: #fff;
    line-height: 2.4rem;
    padding: var(--space-md) var(--space-md);
    background-color: #37beec;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-size: auto 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & .bl_accordionTitle {
    background-color: #fcfcfc;
    padding: var(--space-sm);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    color: var(--link-color);

    &::before {
      content: "";
      width: 5px;
      height: 5px;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      position: absolute;
      top: 35%;
      transform: rotate(45deg);
      right: 20px;
      transition: 0.3s;
    }

    &.active::before {
      transform: rotate(225deg);
      top: 45%;
    }

    &:hover::before,
    &.active::before {
      border-right: 2px solid #249caa;
      border-bottom: 2px solid #249caa;
    }

    &:hover,
    &.active {
      background-color: #bde1e5;
      color: #249caa;
      font-weight: bold;
    }
  }
}

/* Index
========================================================================== */
/* NOTE: 以下の .example-box / .scene-box / .pickup-box は上の /* contents */ セクションの同名ルールを
 * Index ページ用に部分的に上書きする。ルール定義順による cascade で後勝ち（later wins）を維持。 */
.example-box .main-box ul li {
  margin-bottom: var(--space-xl);

  & .card {
    margin: 0;
  }

  & a .card-text {
    font-size: var(--font-md);
    line-height: 2.5rem;
    display: none;
  }

  & a:hover .card-text {
    display: block;
  }
}

.example-box .columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;

  & .pin {
    display: inline-block;
    background: #FEFEFE;
    border: 1px solid #f6f6f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin: 0 2px var(--space-md);
    break-inside: avoid;
    padding: var(--space-xs);
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
    transition: all 0.2s ease;
    width: 22%;

    & .pc {
      position: relative;
    }

    & > a {
      display: none;
    }

    & img {
      width: 100%;
      margin-bottom: var(--space-xs);
    }

    & > p {
      border-top: 1px dotted #f6f6f6;
      padding: var(--space-sm) var(--space-xs) var(--space-xs);
      font-size: var(--font-md);
      line-height: 2rem;
      margin-bottom: 0;
    }

    & .detail {
      display: none;
      border-radius: var(--radius-sm);
      z-index: 10;

      & p {
        font-size: var(--font-md);
        line-height: 2.5rem;
        color: #fff;
        margin-bottom: var(--space-sm);
      }

      & .more-box {
        margin-top: var(--space-sm);

        & .more,
        & .more:visited,
        & .more:hover {
          font-size: var(--font-md);
          border-radius: var(--radius-sm);
          padding: var(--space-xs);
          line-height: 1.5rem;
          opacity: 1;

          &::after {
            font-size: var(--font-xs);
          }
        }
      }
    }

    &:hover > p {
      opacity: 0.2;
    }

    &:hover .detail {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      padding: var(--space-sm);
      background: #333;
      opacity: 0.9;
    }
  }
}

.scene-box .main-box {
  max-width: 85.5rem;

  & ul li + li {
    padding-top: var(--space-lg);
  }
}

.pickup-box .main-box ul li {
  padding-bottom: var(--space-lg);

  & a:hover {
    color: var(--border-color);
  }

  & h3 {
    padding: var(--space-xs) 0;
    background: none;
    border-bottom: none;
    line-height: 3rem;
    margin-bottom: 0;
  }
}

.top-orerguide-box ul {
  display: flex;

  & li {
    flex: 25%;

    & dl {
      padding: var(--space-sm);
      padding-right: 0;
      text-align: left;
      display: flex;
      align-items: center;

      & dt {
        margin-right: 0.8rem;
      }

      & dd {
        font-weight: bolder;

        &:after {
          font-family: "Font Awesome 5 Pro";
          content: "\f054";
          display: inline-block;
          padding-left: var(--space-xs);
          font-size: var(--font-md);
          color: #F7C045;
        }
      }

      &.top-orerguide-step {
        background: #F7C045;
        position: relative;
        height: 70px;
        width: 90%;
        border-radius: 2px;

        &::after {
          content: "";
          position: absolute;
          right: -30px;
          border-left: 15px solid;
          border-top: 35px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 35px solid transparent;
          color: #F7C045;
        }

        &:hover {
          background: var(--border-color);

          &::after {
            color: var(--border-color);
          }
        }

        & dd {
          font-size: var(--font-xl);
          color: #333;
          line-height: var(--lh-tight);

          & span {
            color: #fff;
            font-size: var(--font-md);
          }

          &::after {
            content: none;
          }
        }
      }
    }
  }
}