@charset "UTF-8";
.plan {
  border: 1px solid var(--black);
  background-color: #ccc;
  padding: 0 32px 24px;
  margin: 24px 0 48px;
  position: relative;
}

.plan__ttl {
  background-color: var(--black);
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0.2rem;
  text-align: center;
  padding: 6px 24px;
  margin: -1.8rem auto 24px;
  position: relative;
}

.plan__plice {
  font-size: 2.9rem;
  font-weight: normal;
  line-height: 1;
}
.plan__plice * {
  display: inline;
}
.plan__plice img {
  vertical-align: middle;
}
.plan__plice > small {
  display: inline-block;
  font-size: 1.4rem;
}
.plan__plice > small:first-child {
  font-weight: 700;
  margin-bottom: 16px;
}

dl.plans__box {
  margin-top: min(4vw, 28px);
}
dl.plans__box dt {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto 30% auto;
  -ms-grid-columns: auto 30% auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: min(5vw, 32px);
}
dl.plans__box dt::before {
  content: '';
  display: block;
  background-color: var(--black);
  height: 1px;
}
dl.plans__box dt::after {
  content: '';
  display: block;
  background-color: var(--black);
  height: 1px;
}
dl.plans__box dt span {
  background-color: var(--white);
  border: 1px solid var(--black);
  text-align: center;
}
dl.plans__box dd {
  font-size: 1.7rem;
}

.square--list {
  margin-left: 1.6rem;
  list-style-type: none;
  font-size: 1.6rem;
}
.square--list li {
  margin-bottom: clamp(8px, calc(0.357rem + 0.54vw), 16px);
  padding-left: 2.4rem;
}
.square--list li::before {
  content: '■';
  display: inline-block;
  text-indent: -2.4rem;
}
.square--list li > p {
  font-size: 1.6rem;
}

.plan.other {
  border-color: var(--red-hot);
  background-color: #fdeef0;
  font-size: 1.6rem;
  color: var(--red-hot);
}

.plan.platinum {
  grid-area: 1 / 4 / 1 / 1;
  border-color: var(--platinam);
  background-color: var(--platinam-light);
}
.plan.platinum span.marker {
  color: var(--platinam);
}
.plan.platinum .square--list li::before {
  color: var(--platinam);
}
.plan.platinum .plan__plice {
  font-size: 2.4rem;
  color: var(--platinam);
}
.plan.platinum .plan__plice small {
  color: var(--black);
}
.plan.platinum .plan__plice img {
  max-width: clamp(180px, calc(9.278rem + 7.37vw), 290px);
}
.plan.platinum .plan__ttl {
  background-color: var(--platinam);
}
.plan.platinum dl.plans__box dt::before {
  background-color: var(--platinam);
}
.plan.platinum dl.plans__box dt::after {
  background-color: var(--platinam);
}
.plan.platinum dl.plans__box dt span {
  color: var(--platinam);
  border-color: var(--platinam);
}

.plan.gold {
  border-color: var(--gold);
  background-color: var(--gold-light);
}
.plan.gold span.marker {
  color: var(--gold);
}
.plan.gold .square--list li::before {
  color: var(--gold);
}
.plan.gold .plan__plice {
  font-size: 2.4rem;
}
.plan.gold .plan__plice img {
  width: 174px;
}
.plan.gold .plan__ttl {
  background-color: var(--gold);
}
.plan.gold dl.plans__box dt::before {
  background-color: var(--gold);
}
.plan.gold dl.plans__box dt::after {
  background-color: var(--gold);
}
.plan.gold dl.plans__box dt span {
  color: var(--gold);
  border-color: var(--gold);
}

@media (856px >= width) {
  .plan.gold .plan__plice img {
    width: calc((174 / 428) * 100vw);
  }
}
.plan.silver {
  border-color: var(--silver);
  background-color: var(--silver-light);
}
.plan.silver span.marker {
  color: var(--silver);
}
.plan.silver .square--list li::before {
  color: var(--silver);
}
.plan.silver .plan__plice {
  font-size: 2.4rem;
}
.plan.silver .plan__plice img {
  width: 160px;
}
.plan.silver .plan__ttl {
  background-color: var(--silver);
}
.plan.silver dl.plans__box dt::before {
  background-color: var(--silver);
}
.plan.silver dl.plans__box dt::after {
  background-color: var(--silver);
}
.plan.silver dl.plans__box dt span {
  color: var(--silver);
  border-color: var(--silver);
}

@media (856px >= width) {
  .plan.silver .plan__plice img {
    width: calc((160 / 428) * 100vw);
  }
}
.plan.bronze {
  border-color: var(--bronze);
  background-color: var(--bronze-light);
}
.plan.bronze span.marker {
  color: var(--bronze);
}
.plan.bronze .square--list li::before {
  color: var(--bronze);
}
.plan.bronze .plan__plice {
  font-size: 2.4rem;
}
.plan.bronze .plan__plice img {
  width: 160px;
}
.plan.bronze .plan__ttl {
  background-color: var(--bronze);
}
.plan.bronze dl.plans__box dt::before {
  background-color: var(--bronze);
}
.plan.bronze dl.plans__box dt::after {
  background-color: var(--bronze);
}
.plan.bronze dl.plans__box dt span {
  color: var(--bronze);
  border-color: var(--bronze);
}

@media (856px >= width) {
  .plan.bronze .plan__plice img {
    width: calc((160 / 428) * 100vw);
  }
}
.other span.marker {
  color: var(--red-hot);
}
.other .square--list li::before {
  color: var(--red-hot);
}
.other .plan__plice > span {
  color: var(--red-hot);
}
.other .plan__ttl {
  background-color: var(--white);
  border: 1px solid var(--red-hot);
  font-size: 1.6rem;
  color: var(--red-hot);
}
.other dl.plans__box dt::before {
  background-color: var(--red-hot);
}
.other dl.plans__box dt::after {
  background-color: var(--red-hot);
}
.other dl.plans__box dt span {
  color: var(--red-hot);
  border-color: var(--red-hot);
}

.plan.furusato {
  padding: 0;
  border-color: var(--blue);
  background-color: #e5f3fa;
}
.plan.furusato .gridbox.col2 {
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-template-columns: auto 60%;
  -ms-grid-columns: auto 60%;
}
.plan.furusato .grid__item {
  padding: 48px 24px 24px 24px;
}
.plan.furusato .grid__item:nth-child(3) {
  grid-area: 2 / 1 / 2 / 3;
  padding: 24px;
  text-align: center;
}
.plan.furusato .grid__item:last-child {
  background-color: var(--white);
}
.plan.furusato span.marker {
  color: var(--blue);
}
.plan.furusato .square--list li::before {
  color: var(--blue);
}
.plan.furusato .plan__plice > span {
  color: var(--blue);
}
.plan.furusato .plan__plice img {
  max-width: 218px;
}
.plan.furusato .plan__ttl {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  background-color: var(--blue);
  display: inline-block;
  text-align: left;
}
.plan.furusato dl.plans__box dt::before {
  background-color: var(--blue);
}
.plan.furusato dl.plans__box dt::after {
  background-color: var(--blue);
}
.plan.furusato dl.plans__box dt span {
  color: var(--blue);
  border-color: var(--blue);
}

@media (856px >= width) {
  .plan.furusato .grid__item {
    padding: 24px;
  }
  
  .plan.furusato .gridbox.col2 {
    display: block !important;
  }
  .plan.furusato .gridbox.col2 .grid__item:nth-child(1) p {
    text-align: center;
  }
  .plan.furusato .plan__ttl {
    width: 100%;
    position: initial;
    margin-bottom: 0;
  }
}
html[lang="en"] .plan__plice small:last-child {
  display: block;
}

.contactbox {
  background-image: var(--gradation-foodteth);
  color: var(--white);
  font-size: 1.6rem;
  margin: 6% 2% 0;
  padding: 24px;
}
.contactbox a {
  color: var(--white);
}

.ttl--contact {
  border-bottom: 1px solid #fff;
  font-size: 1.8rem;
  padding: 6px;
  margin: 0 0 16px;
}

@media (856px < width) {
  .plans {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(3, 31%);
    -ms-grid-columns: repeat(3, 31%);
    column-gap: 3%;
    justify-content: space-between;
    margin-bottom: 32px;
  }

  .global-premire .square--list {
    column-count: 2;
    column-gap: 2rem;
    width: fit-content;
  }
  .global-premire .plan__plice > small:first-child {
    display: inline-block;
  }

  .plan__ttl {
    max-width: 80%;
  }
}
@media (856px >= width) {
  .plans.inner--min {
    width: 100%;
  }
}
dl.dl-col2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 40px;
  margin-bottom: 32px;
}
dl.dl-col2 dt {
  flex-shrink: 0;
}

@media (856px >= width) {
  dl.dl-col2 {
    flex-direction: column;
  }
}