@charset "UTF-8";
/* CSS Document */

.underline {
  background: linear-gradient(transparent 70%, var(--color_yellow) 70%);
}
.top_main {
  background-color: var(--color_navy);
  position: relative;
  padding-top: min(6vw, 3.75rem);
  padding-bottom: min(6vw, 3.75rem);
  overflow: hidden;
}
.top_main .container {
  position: relative;
  display: grid;
  z-index: 3;
  max-width: 1140px;
}
.top_main .container::before, 
.top_main .container::after {
  content:'';
  position: absolute;
  z-index: 2;
}
.top_main .container::before {
  background-image: url(/wp-content/themes/yomidaore/assets/images/top_main-left.svg);
  background-size: 100%;
  background-position: bottom left;
  background-repeat: no-repeat;
  width: 70%;
  top: 0;
  left: 0;
  transform: translate(-20%, -100%);
  aspect-ratio: 850 / 283;
}
.top_main .container::after {
  background-image: url(/wp-content/themes/yomidaore/assets/images/top_main-right.svg);
  background-size: 100%;
  background-position: top left;
  background-repeat: no-repeat;
  width: 90%;
  bottom: 0;
  right: 0;
  transform: translate(40%, 60%);
  aspect-ratio: 1062 / 372;
}
.top_main-text {
  position: relative;
  z-index: 3;
}
.top_main-japan {
  width: 40%;
  max-width: 270px;
}
.top_main-h1 {
  color: white;
  font-size: min(6.8vw, 3.75rem);
  font-weight: 700;
  text-shadow: 
    2px 2px 2px var(--color_navy),
    2px 2px 0 var(--color_navy),
    -2px -2px 0 var(--color_navy),
    -2px 2px 0 var(--color_navy),
    2px -2px 0 var(--color_navy),
    2px 0 0 var(--color_navy),
    -2px 0 0 var(--color_navy),
    0 2px 0 var(--color_navy),
    0 -2px 0 var(--color_navy);
}
.top_main-h1 span {
  color: var(--color_yellow);
  font-size: min(8.25vw, 4.5rem);
}
.top_main-h2 {
  position: relative;
  font-size: min(4.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  margin: min(3.6vw, 1.875rem) 0;
}
.top_main-h2 small {
  font-size: min(3.84vw, 2rem);
}
.top_main-h2 .top_main-h2--wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.625rem;
}
.top_main-h2 .top_main-h2--wrap::before {
  content:'';
  width: 100%;
  height: 110%;
  position: absolute;
  z-index: 0;
  background-color: white;
  transform: skewX(-10deg);
}
.top_main-h2 .top_main-h2--inner {
  display: inline-block;
  position: relative;
  z-index: 1;
  line-height: 1;
  padding: 0.3125rem 0.9375rem;
  color: var(--color_navy);
}
.top_main-img {
  position: relative;
}
.top_main-illust {
  position: absolute;
  bottom: 0;
  right: -1vw;
  width: min(46vw, 530px);
  z-index: 3;
}

.top_nayami {
  padding-top: min(10vw, 6.25rem);
}
.top_nayami .container {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.top_nayami-h2 {
  display: inline-block;
  margin: 0 auto 2rem;
  border-bottom: 4px solid var(--color_blue);
  font-size: min(5.5vw, 2rem);
}
.top_nayami-h2 span {
  background-image: radial-gradient(circle at center, var(--color_orange) 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.375rem;
  padding-top: 2px;
}
.top_nayami-img {
  width: 50%;
  max-width: 260px;
  aspect-ratio: 260 / 177;
  margin: 0 auto;
}
.top_nayami-h3 {
  font-size: min(3.84vw, 2rem);
}
.top_nayami-h3 span {
  display: block;
  font-size: min(6.2vw, 2.75rem);
  margin-top: 0.3125rem;
}

.top_mokuteki-comment {
  background-color: var(--color_blue);
  color: white;
  text-align: center;
  border-radius: min(3.6vw, 1.875rem);
  position: relative;
  padding: min(3.6vw, 1.875rem) 0;
  width: 94%;
  margin: 0 auto;
  transform: translateY(50%);
}
.top_mokuteki-comment::after {
  content:'';
  width: 1rem;
  border-top: 1rem solid var(--color_blue);
  border-left: .8rem solid transparent;
  border-right: .8rem solid transparent;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}
.top_mokuteki-comment-title {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  font-size: min(5.2vw, 1.5rem);
  font-weight: 700;
  margin-bottom: min(3vw, 1.875rem);
}
.top_mokuteki-comment-title::before, 
.top_mokuteki-comment-title::after {
  content:'';
  position: absolute;
  width: 2px;
  height: 2.75rem;
  top: 0.3125rem;
  background-color: white;
}
.top_mokuteki-comment-title::before {
  left: -1.5rem;
  transform: rotate(-30deg);
}
.top_mokuteki-comment-title::after {
  right: -1.5rem;
  transform: rotate(30deg);
}
.top_mokuteki-comment-text {
  padding: 0 1.25rem;
  margin: 0 auto;
}
.top_mokuteki-wrapper {
  background-color: var(--color_light-sky);
  padding: 9rem min(5.4vw, 2.8125rem) min(7vw, 3.75rem) min(5.4vw, 2.8125rem);
}
.top_mokuteki-items {
  display: grid;
  gap: min(5vw, 1.25rem);
}
.top_mokuteki-items.double {
  margin-bottom: min(5vw, 1.25rem);
}
.top_mokuteki-inner {
  position: relative;
  background-color: white;
  padding: min(6vw, 1.875rem);
  border-radius: min(3vw, 0.9375rem);
}
.top_mokuteki-num {
  font-family: var(--font_eng);
  color: white;
  width: min(12vw, 3.4375rem);
  height: min(12vw, 3.4375rem);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color_blue);
  position: absolute;
  top: -0.9375rem;
  left: -0.9375rem;
  border-radius: 100%;
  gap: 2px;
  padding-top: 4px;
}
.top_mokuteki-num small {
  font-size: min(1.8vw, 0.75rem);
  line-height: 1;
}
.top_mokuteki-num span {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  display: block;
}
.top_mokuteki-title {
  text-align: center;
  font-size: min(5vw, 1.25rem);
  font-weight: 700;
  color: var(--color_navy);
  padding-bottom: 0.625rem;
  margin-bottom: 0.9375rem;
  border-bottom: 1px solid var(--color_sky);
}

.top_toukibo {
  padding-top: min(10vw, 6.25rem);
  padding-bottom: min(10vw, 6.25rem);
}
.top_toukibo-head {
  text-align: center;
  font-size: min(7vw, 2rem);
  font-weight: 700;
  margin-bottom: min(7vw, 3.125rem);
}
.top_toukibo-wrap {
  border: 1px solid var(--color_blue);
  border-radius: min(3vw, 0.9375rem);
  margin: 0 auto;
  overflow: hidden;
  max-width: 1100px;
}
.top_toukibo-wrap:not(:last-child) {
  margin-bottom: min(4vw, 2.5rem);
}
.top_toukibo-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  background-color: var(--color_blue);
  color: white;
  font-size: min(5vw, 1.5rem);
  padding: min(2.5vw, 0.9375rem) 1.25rem;
  gap: 0.625rem;
}
.top_toukibo-title img {
  width: 1.875rem;
}
.top_toukibo-text {
  background-color: white;
  padding: min(5vw, 1.875rem);
}
.top_toukibo-text.d-grid {
  gap: 0.9375rem;
}
.top_toukibo-label {
  font-weight: 700;
  font-size: min(5vw, 1.25rem);
  background-color: var(--color_sky);
  text-align: center;
  padding: 0.3125rem;
  border-radius: 2rem;
  margin-bottom: min(5vw, 1.25rem);
  position: relative;
}
.top_toukibo-text p {
  position: relative;
}
.top_toukibo-list {
  border-radius: 0.625rem;
  position: relative;
  background-color: var(--color_light-sky);
  padding: min(5vw, 1.875rem);
}
.top_toukibo-list::before {
  content:'';
  width: 100%;
  height: 100%;
  border-radius: 0.625rem;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  background-color: var(--color_light-sky);
}
.top_toukibo-list:first-child {
  background-image: url("/wp-content/themes/yomidaore/assets/images/top_toukibo-list-bg01.jpg");
  background-size: cover;
}
.top_toukibo-list:nth-child(2) {
  background-image: url("/wp-content/themes/yomidaore/assets/images/top_toukibo-list-bg02.jpg");
  background-size: cover;
}
.top_toukibo-list:last-child {
  background-image: url("/wp-content/themes/yomidaore/assets/images/top_toukibo-list-bg03.jpg");
  background-size: cover;
}

.top_detail {
  position: relative;
  background-color: var(--color_light-sky);
  background-image: url("/wp-content/themes/yomidaore/assets/images/top_detail-bg.png");
  background-size: 100%;
  background-repeat: repeat;
  padding: min(16vw, 10rem) 0 min(10vw, 6.25rem);
}
.top_detail::before {
  content: '';
  width: min(30vw, 18.75rem);
  height: min(6vw, 3.75rem);
  background-color: white;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.top_detail-h2 {
  color: var(--color_blue);
  font-size: min(6vw, 2rem);
  text-align: center;
  font-weight: 700;
  margin-bottom: min(6vw, 3.75rem);
}
.top_detail-h2 .text-big {
  font-size: min(7.2vw, 2.25rem);
  display: inline-block;
}
.top_detail-title {
  background-color: var(--color_blue);
  font-size: min(4.2vw, 1.75rem);
  font-weight: 700;
  color: white;
  border-top-left-radius: 0.9375rem;
  border-top-right-radius: 0.9375rem;
  padding: 0.625rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.top_detail-wrapper {
  background-color: var(--color_blue);
  display: grid;
  gap: 1px;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 3.75rem;
}
.top_detail-inner {
  position: relative;
  padding-top: min(10vw, 3.125rem);
  padding-bottom: min(10vw, 3.125rem);
}
.top_detail-inner::before {
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: white;
}
.top_detail-inner:first-child {
  background-image: url("/wp-content/themes/yomidaore/assets/images/top_detail-inner-bg01.jpg");
  background-size: cover;
}
.top_detail-inner:last-child {
  background-image: url("/wp-content/themes/yomidaore/assets/images/top_detail-inner-bg02.jpg");
  background-size: cover;
}
.top_detail-h3 {
  font-size: min(6vw, 1.75rem);
  font-weight: 700;
  text-align: center;
  position: relative;
  margin-bottom: min(3vw, 1.875rem);
}
.top_detail-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0.9375rem 1.25rem;
  max-width: 280px;
  border-radius: 5rem;
  position: relative;
  margin: 0 auto;
}
.top_detail-btn i, 
.top_detail-btn span {
  margin-left: auto;
  font-weight: 700;
}
.top_detail-btn i {
  -webkit-text-stroke: 1px;
}
.top_detail-more {
  background-color: var(--color_sky);
  border-radius: 0.9375rem;
  padding: min(3vw, 1.875rem) min(4.5vw, 2.8125rem);
  display: grid;
  flex-wrap: wrap;
  align-items: center;
  gap: min(3vw, 1.875rem);
  margin: 0 auto;
  max-width: 1100px;
}
.top_detail-more p {
  margin-bottom: min(3vw, 1.875rem);
}
.top_detail-conditions {
  font-weight: 700;
}
.top_detail-conditions .badge {
  display: inline-block;
  background-color: var(--color_navy);
  margin-right: 0.3125rem;
  font-size: 1rem;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 996;
}
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 997;
}
.modal .bi-x-lg {
  color: white;
  position: fixed;
  top: 10vh;
  right: 8vw;
  transform: translate(50%, 50%);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.5rem;
  background: var(--color_navy);
  border-radius: 1.875rem;
  z-index: 999;
}
.modal-inner {
  position: absolute;
  top: 10vh;
  left: 5vw;
  width: 90vw;
  height: 80vh;
  overflow-y: scroll;
  z-index: 998;
  background-color: var(--color_light-sky);
  border-radius: min(3vw, 1.875rem);
}
.modal-inner:not(.active) {
  display: none;
}
.modal-inner--box {
  max-width: 1366px;
  margin: 0 auto;
  padding:  min(4.5vw, 2.8125rem) min(6vw, 3.75rem);
}
.modal-h2 {
  font-size: min(5.5vw, 2rem);
  font-weight: 700;
  margin: 0 auto;
  text-align: center;
}
.modal-h2 span {
  display: inline-block;
  padding: 0.625rem min(3vw, 1.875rem);
  border-bottom: 1px solid var(--color_blue);
}
.modal-h3 {
  margin: min(4vw, 2.5rem) 0 min(2vw, 1.25rem);
  border-left: 0.3125rem solid var(--color_blue);
  padding: 0.3125rem 0.9375rem;
  font-size: min(4.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color_navy);
}
.modal-list {
  display: grid;
  margin-bottom: 0.625rem;
  gap: 0.625rem;
}
.modal-list .badge {
  background-color: var(--color_blue);
  font-size: 1rem;
  font-weight: normal;
  display: inline-block;
  margin-right: 0.9375rem;
}

.top_feature {
  background-color: var(--color_navy);
  padding-top: min(15vw, 6.25rem);
  padding-bottom: min(15vw, 6.25rem);
}
.top_feature-h2 {
  color: white;
  text-align: center;
  font-size: min(4vw, 2rem);
  font-weight: 700;
  margin-bottom: min(4vw, 2.5rem);
}
.top_feature-h2 span {
  font-size: min(5vw, 2.25rem);
  display: block;
}
.top_feature-items {
  display: grid;
  gap: 0.9375rem;
  margin-bottom: min(6vw, 3.75rem);
}
.top_feature-item {
  background-color: white;
  border-radius: 0.9375rem;
  overflow: hidden;
}
.top_feature-title {
  background-color: var(--color_sky);
  font-size: min(3vw, 1.75rem);
  font-weight: bold;
  text-align: center;
  padding: 0.9375rem 0.3125rem;
}
.top_feature-title small {
  font-size: min(3vw, 1.125rem);
  display: block;
}
.top_feature-text {
  text-align: center;
  padding: min(3vw, 1.875rem) 0.625rem;
  font-weight: 700;
  font-size: min(3vw, 1.5rem);
}
.top_feature-text .text-big {
  font-size: min(5vw, 2rem);
}

.top_flow {
  background-color: var(--color_light-navy);
  padding-top: min(15vw, 6.25rem);
  padding-bottom: min(15vw, 6.25rem);
}
.top_flow .h2-title::before {
  content: 'FLOW';
}
.top_flow-wrapper {
  margin: 0 auto;
  max-width: 1100px;
}
.top_flow-tabs {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  gap: 0.3125rem;
  position: relative;
  border-bottom: 0.3125rem solid var(--color_blue);
  min-height: min(20vw, 5.625rem);
}
.tabSwitch {
  font-size: min(4vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 0.1875rem #0037591A;
  transition: all .3s ease;
  border-top-left-radius: min(2vw, 0.9375rem);
  border-top-right-radius: min(2vw, 0.9375rem);
}
.tabSwitch.active {
  padding: min(3vw, 1.25rem) min(1.5vw, 0.625rem);
  color: white;
}
.tabSwitch.active:first-of-type {
  background-color: #0E63A0;
}
.tabSwitch.active:last-of-type {
  background-color: #97D1FB;
}
.tabSwitch:not(.active) {
  padding: min(1.5vw, 0.625rem);
  color: var(--color_navy);
  background-color: white;
}
.tabSwitch:not(.active):first-of-type span {
  color: #0E63A0;
}
.tabSwitch:not(.active):last-of-type span {
  color: #97D1FB;
}
.top_flow-panels {
  display: grid;
  background-color: white;
  padding: min(6vw, 3.75rem);
  box-shadow: 0 0 0.1875rem #0037591A;
}
.tabPanel {
  display: none;
}
.tabPanel.active {
  display: grid;
  gap: 1.875rem;
}
.top_flow-inner {
  position: relative;
}
.top_flow-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color_navy);
  text-align: center;
}
.top_flow-icon {
  width: 100%;
  margin: min(2vw, 0.9375rem) auto;
  max-width: 130px;
}
.top_flow-inner:not(:last-of-type)::after {
  position: absolute;
  color: var(--color_blue);
  font-size: min(4vw, 1.875rem);
  line-height: 1;
}

.top_price {
  padding-top: min(15vw, 6.25rem);
  padding-bottom: min(15vw, 6.25rem);
}
.top_price .h2-title::before {
  content: 'PRICE';
}
.top_price-wrapper {
  display: grid;
  gap: min(3vw, 1.875rem);
}
.top_price-head {
  background-color: var(--color_sky);
  padding: min(5vw, 1.25rem) 0.625rem;
  text-align: center;
  border-top-left-radius: 0.9375rem;
  border-top-right-radius: 0.9375rem;
}
.top_price-head-h3 {
  font-size: min(3vw, 1.75rem);
}
.top_price-text {
  background-color: var(--color_light-sky);
}
.top_price-text > div {
  padding: min(4vw, 1.875rem) min(3vw, 1.25rem);
  border-top: 1px solid var(--color_sky);
  display: flex;
  align-items: center;
}
.top_price-text > div.col-7 {
  padding-right: 0;
}
.top_price-text > div.col-5 {
  padding-left: 0;
}
.top_price-text .text-navy {
  font-weight: 700;
  justify-content: end;
}
.top_price-text .text-big {
  font-size: min(8vw, 2.5rem);
  line-height: 0;
}
.top_price-text small {
  display: inline-block;
  margin-top: min(2vw, 0.625rem);
}

.top_news {
  background-color: var(--color_light-navy);
  padding-top: min(10vw, 6.25rem);
  padding-bottom: min(10vw, 6.25rem);
}
.top_news .h2-title::before {
  content: 'NEWS';
}
.top_news-wrapper {
  margin: 0 auto;
  max-width: 1100px;
}


@media screen and (min-width:481px) and (max-width: 767px) {
  .container, .container-sm {
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .top_main-illust {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
  }
  .top_main .container::before {
    width: 120%;
    transform: translate(-20%, -90%);
  }
  .top_main .container::after {
    width: 120%;
    transform: translate(10%, 60%);
  }
  .top_nayami-img {
    margin-bottom: 1.875rem;
  }
  .top_detail-more--img {
    max-width: 160px;
    margin-top: -3.125rem;
  }
  .tabPanel.active {
    gap: 3.125rem;
  }
  .top_flow-inner {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-areas:
    "icon title"
    "icon text";
    column-gap: 0.9375rem;
  }
  .top_flow-inner:not(:last-of-type)::after {
    content: '▼';
    bottom: -0.625rem;
    left: 10%;
    transform: translate(-50%, 100%);
  }
  .top_flow-title {
    text-align: left;
    grid-area: title;
    order: 2;
  }
  .top_flow-icon {
    margin: 0;
    grid-area: icon;
    order: 1;
  }
  .top_flow-text {
    grid-area: text;
    order: 3;
  }
}


@media (min-width: 768px) {
  .top_main-bg {
    width: 60%;
    position: absolute;
    bottom: 1.25rem;
    right: 0;
    transform: translateX(35%);
    max-width: 640px;
    z-index: 1;
  }
  .top_main-feature {
    width: min(54vw, 520px);
  }
  .top_mokuteki-comment-title::after {
    top: 0;
  }
  .top_mokuteki-items.double {
    grid-template-columns: repeat(2, 1fr);
  }
  .top_mokuteki-items.triple {
    grid-template-columns: repeat(3, 1fr);
  }
  .top_toukibo-text.d-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .top_detail-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .top_detail-more {
    grid-template-columns: min(20%, 180px) auto;
  }
  .modal-list {
    grid-template-columns: 150px auto;
  }
  .top_feature-items {
    grid-template-columns: repeat(3, 1fr);
  }
  .tabPanel.active {
    grid-template-columns: repeat(4, 1fr);
  }
  .top_flow-inner:not(:last-of-type)::after {
    content:'▶︎';
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
  }
  .top_price-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .top_price-inner:first-child {
    display: grid;
    grid-template-rows: auto 2fr;
  }
}
@media screen and (min-width: 992px) {
    .top_nayami-img {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-100%);
    }
  }