@charset "utf-8";
/* 「マイクラ」レスポンシブCSS */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/tyo/common/font/NotoSansJP-900.woff2) format('woff2');
}
/*★ リセット ★*/
.main div:not([class])::after {
  content: none;
}
.main a:not([class*="searchMod"]) {
  text-decoration: none;
  color: inherit;
}
.main .is-em {
  font-weight: bold;
}
#footer, #topbuttonApp, #searchArea {
  position: relative;
  z-index: 1;
}
#footer {
  background: #fff;
  padding-top: 40px;
}
#footer .footer {
  margin-top: 0 !important;
}
.breadcrumb__inner {
  width: min(100%, 1024px);
  margin: auto;
  letter-spacing: 0 !important;
}
.is-device-pc :is(#breadcrumbArea, .breadcrumb__contents) {
  height: auto;
  min-height: 28px;
  overflow: auto;
}
.is-device-sp :is(#breadcrumbArea, .breadcrumb__contents) {
  overflow-x: scroll;
}
.is-device-pc .breadcrumb {
  width: auto;
  margin: 0;
  overflow: hidden;
}
.goTop__link {
  display: none;
}
.goTop__img--sp {
  --gobtn-size: min((130vw / 7.5), 80px);
  width: var(--gobtn-size);
  height: var(--gobtn-size);
}
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
  position: relative;
  overflow: hidden;
}
:root {
  --default-max-height: 100lvh;
  --default-color-main: #000;
  --default-font-size-pc-val: 16;
  --default-font-size-pc: 16px;
  --default-font-size-sp: calc(28vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-width-sp-val: 710;
  --default-width-pc-val: 992;
  --default-width-sp: (710vw / 7.5);
  --default-width-pc: 992px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-width2: min(100%, var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-bg-setting: no-repeat center center / cover;
  --default-icon-arw-r: url(../images/icon_arrow_right.svg);
  --default-icon-blank: url(../images/icon_blank.svg);
  --default-hover-speed: .3s;
  --default-hover-opacity: .5;
  --default-hover-transition-opacity: opacity var(--default-hover-speed);
}
.main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--default-font-size);
  color: var(--default-color-main);
  line-height: calc(34 / var(--default-font-size-sp-val));
  padding-bottom: 0 !important;
}
.is-inline-block {
  display: inline-block;
}
.is-indent-1, .section [class*="notes--item"] {
  text-indent: -1em;
  padding-left: 1em;
}
.section__inner, .contents__wrapper {
  width: var(--default-width);
  margin: auto;
  position: relative;
}
.main .base-button {
  margin-top: var(--base-btn-yohaku-ue);
  .base-button__link {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    justify-content: center;
    align-items: center;
    gap: min((50vw / 7.5), 53px);
    border-radius: 500px;
    --base-btn-bg-gradient-direction: to bottom;
    --base-btn-bg-gradient-color-a: #18a86b;
    --base-btn-bg-gradient-color-b: #2fb383;
    background: var(--base-btn-bg, linear-gradient(var(--base-btn-bg-gradient-direction), var(--base-btn-bg-gradient-color-a) 0%, var(--base-btn-bg-gradient-color-b) 100%));
    width: max-content;
    min-height: min((66vw / 7.5), 46px);
    margin: auto;
    font-size: min((24vw / 7.5), 16px);
    line-height: 1.2;
    color: var(--base-btn-fc, #fff);
    font-weight: bold;
    position: relative;
    padding: .75em min((20vw / 7.5), 20px) .85em;
    box-shadow: 0px min((4vw / 7.5), 4px) 0px 0px rgba(0, 0, 0, 0.4);
    .is-bg-blue & {
      --base-btn-bg-gradient-direction: to right;
      --base-btn-bg-gradient-color-a: #736efe;
      --base-btn-bg-gradient-color-b: #3fd6c3;
    }
    &::before, &::after {
      content: "";
      width: 1.25em;
    }
    &::after {
      height: 1.25em;
      mask-image: var(--btn-icon, var(--default-icon-arw-r));
      mask-repeat: no-repeat;
      mask-size: cover;
      background: currentColor;
      position: absolute;
      right: 1em;
    }
    &[target="_blank"] {
      --btn-icon: var(--default-icon-blank);
    }
    &[href^="#"]::after {
      transform: rotate(90deg);
    }
  }
}
.main .base-text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .3em;
}
@media(width < 681px) {
  .is-dsp-pc {
    display: none !important;
  }
}
@media(width >=681px) {
  .is-dsp-sp {
    display: none !important;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
}
/*mv*/
.mv {
  .mv__inner {
    position: relative;
    height: var(--mv-size-h);
    background: var(--mv-bg) no-repeat center top / var(--mv-bg-size, cover);
    overflow: hidden;
  }
  .mv__logo, .mv__logo--picture, .mv__logo--image {
    width: 100%;
    height: 100%;
  }
  .mv__logo--image {
    object-fit: contain;
    display: block;
  }
  @media(width < 861px) {
    --mv-size-h: calc((1300vw/ 7.5));
    --mv-bg: url("../images/mv_bg_sp.webp");
  }
  @media(width >=861px) {
    --mv-size-h: 960px;
    --mv-bg: url("../images/mv_bg_pc.webp");
    --mv-bg-size: 1920px;
    @media(width <=1120px) {
      --mv-size-h: calc((960vw/ 11.2));
      --mv-bg-size: calc((1920vw/ 11.2));
    }
    @media(width >1920px) {
      position: relative;
      overflow: hidden;
      &::before {
        content: "";
        display: block;
        background: var(--mv-bg) no-repeat center center / 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        filter: blur(6px);
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section*/
.section__title {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sec-ttl-mb);
}
.section__title--image {
  width: auto;
  height: var(--sec-ttl-size-h);
  object-fit: contain;
}
.section {
  --tokuten-bg: url("../images/cpn_bg_sp.webp");
  --real-bg: url("../images/real_bg_sp.webp");
  --special-bg: url("../images/special_bg_sp.webp");
  @media(width >=861px) {
    --tokuten-bg: url("../images/cpn_bg_pc.webp");
    --real-bg: url("../images/real_bg_pc.webp");
    --special-bg: url("../images/special_bg_pc.webp");
  }
}
/*section-navi*/
.section-navi {
  background: linear-gradient(to bottom, #82b119 0%, #a2de1a 100%);
}
.section-navi:not(:first-child) {
  margin-top: min((37vw / 7.5), 37px);
}
.section-navi__lineup {
  display: grid;
  grid-auto-flow: column;
  margin: 0 auto;
  max-width: 960px;
  --sec-nav-border-c: rgba(9, 73, 50, .5);
  --sec-nav-border-w: 1px;
  --sec-nav-border: var(--sec-nav-border-w) solid var(--sec-nav-border-c);
  border-left: var(--sec-nav-border);
  border-right: var(--sec-nav-border);
  gap: var(--sec-nav-border-w);
}
.section-navi__lineup--item {
  position: relative;
  &:not(:first-child) {
    &::before {
      content: "";
      display: block;
      width: var(--sec-nav-border-w);
      height: 100%;
      background: var(--sec-nav-border-c);
      position: absolute;
      left: 0;
      transform: translateX(-100%);
    }
  }
  &.is-tokuten {
    --sec-nav-img-w: min((167vw / 7.5), 94px);
  }
  &.is-special {
    --sec-nav-img-w: min((147vw / 7.5), 82px);
  }
  &.is-real {
    --sec-nav-img-w: min((180vw / 7.5), 100px);
  }
  &.is-product {
    --sec-nav-img-w: min((84vw / 7.5), 47px);
  }
  @media(width >=681px) {
    &.is-tokuten {
      --sec-nav-img-w: min((170vw / 9.6), 170px);
    }
    &.is-special {
      --sec-nav-img-w: min((157vw / 9.6), 157px);
    }
    &.is-real {
      --sec-nav-img-w: min((226vw / 9.6), 226px);
    }
    &.is-product {
      --sec-nav-img-w: min((112vw / 9.6), 112px);
    }
  }
}
.section-navi__lineup--item--link {
  display: grid;
  justify-items: center;
  align-content: center;
  grid-template-rows: 1fr max-content;
  height: 100%;
  min-height: min((170vw / 7.5), 110px);
  padding: min((6vw / 7.5), 6px) 0;
  &::after {
    content: "";
    width: min((22vw / 7.5), 22px);
    height: min((14vw / 7.5), 14px);
    background: url("../images/navi_icon_arrow.svg") no-repeat center center / contain;
  }
  picture.base-picture {
    align-self: center;
  }
  .base-picture__image {
    width: var(--sec-nav-img-w);
    height: auto;
  }
}
/*close*/
#close {
  background: var(--tokuten-bg) no-repeat center center / cover;
  padding: min((43vw / 7.5), 60px) 0 min((65vw / 7.5), 67px);
  text-shadow: 0px 2px 2px #fff;
  text-align: center;
  font-weight: bold;
  .close-text {
    font-size: min((28vw / 7.5), 16px);
    strong {
      font-size: min((36vw / 7.5), 24px);
      display: block;
      margin-bottom: .5em;
    }
  }
  .link-read-text {
    font-size: min((30vw / 7.5), 20px);
    margin: 0 0 min((30vw / 7.5), 20px);
  }
  .link__contents {
    margin-top: min((100vw / 7.5), 80px);
    &:not(:has([class*="banner"])) {
      display: none;
    }
  }
  .reco-banner__list {
    display: grid;
    grid-template-columns: var(--bnr-col, repeat(2, 1fr));
    gap: var(--bnr-gap, min((20vw / 7.5), 15px));
    max-width: var(--bnr-mw, min((540vw / 7.5), 400px));
    margin: auto;
    @media(width >=861px) {
      --bnr-col: repeat(4, 1fr);
      --bnr-gap: 15px;
      --bnr-mw: 680px;
    }
  }
  .reco-banner__link {
    display: block;
  }
}
/*tokuten*/
#tokuten {
  --sec-ttl-size-h: min((84vw / 7.5), 58px);
  --sec-ttl-mb: min((54vw / 7.5), 52px);
  background: var(--tokuten-bg) no-repeat center top / cover;
  padding: 70px 0 130px;
  .tokuten_01 {
    --tokuten-img-h: min((285vw / 7.5), 143px);
  }
}
.tokuten {
  text-align: center;
  width: min((680vw / 7.5), 800px);
  margin: 0 auto;
  padding: min((80vw / 7.5), 47px) min((30vw / 7.5), 50px) min((128vw / 7.5), 35px);
  box-shadow: min((10vw / 7.5), 10px) min((10vw / 7.5), 10px) rgba(5, 5, 5, 0.73);
  background: rgba(249, 250, 250, 0.615);
  --base-btn-yohaku-ue: min((50vw / 7.5), 45px);
}
.tokuten_title {
  margin-bottom: min((28vw / 7.5), 27px);
}
.tokuten_title_image {
  height: min((46vw / 7.5), 36px);
}
.tokuten_text {
  font-size: min((26vw / 7.5), 22px);
  line-height: 1.2;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: .5px;
}
.tokuten_image {
  &:not(:first-child) {
    margin-top: min((50vw / 7.5), 30px);
    @media(width >=861px) {
      margin-top: 16px;
    }
  }
  width: auto;
  height: var(--tokuten-img-h);
}
.tokuten_note_title {
  font-size: min((28vw / 7.5), 20px);
  font-weight: bold;
  margin: min((100vw / 7.5), 33px) 0 min((46vw / 7.5), 18px);
}
.tokuten_01 ~ [class*="tokuten"] {
  background-size: 10px 4px;
  background-image: linear-gradient(to right, #6491b3 4px, transparent 4px);
  background-repeat: repeat-x;
  background-position: left top;
  padding-top: min((50vw / 7.5), 47px);
  margin-top: min((63vw / 7.5), 48px);
}
.tokuten_02 {
  font-size: min((22vw / 7.5), 14px);
}
.tokuten_note_list {
  position: relative;
  padding-left: 1.1em;
  text-align: left;
  font-weight: 500;
}
.tokuten_note_list::before {
  content: "";
  display: block;
  width: .8em;
  height: .8em;
  background: #000;
  position: absolute;
  left: 0px;
  top: .4em;
  bottom: 0;
}
.tokuten_note_text {
  text-align: left;
  margin-top: .5em;
  font-weight: 500;
}
.tokuten_more {
  display: grid;
  gap: min((28vw / 7.5), 33px);
  align-items: center;
  justify-items: center;
  font-size: min((22vw / 7.5), 18px);
  line-height: calc(29 / 22);
  text-align: left;
  font-weight: bold;
  margin-top: min((28vw / 7.5), 38px);
  @media(width >=861px) {
    grid-template-columns: max-content 1fr;
  }
  ~ .base-button {
    --base-btn-yohaku-ue: min((40vw / 7.5), 33px);
  }
}
.tokuten_more__image {
  width: auto;
  height: var(--tokuten-more-img-h);
  order: -1;
}
/*special*/
#special {
  --sec-ttl-size-h: min((76vw / 7.5), 63px);
  --sec-ttl-mb: min((62vw / 7.5), 62px);
  background: var(--special-bg) no-repeat center top / cover;
  padding: min((110vw / 7.5), 122px) 0 min((169vw / 7.5), 95px);
  .tokuten_01 .tokuten_text {
    font-size: min((26vw / 7.5), 20px);
    --yohaku: .15em;
    .is-pr-half {
      margin-right: var(--yohaku);
      + .is-inline-block {
        margin-left: var(--yohaku);
      }
    }
  }
  .tokuten_02 {
    --tokuten-more-img-h: min((219vw / 7.5), 165px);
  }
}
/*real*/
#real {
  --sec-ttl-size-h: min((78vw / 7.5), 67px);
  --sec-ttl-mb: min((51vw / 7.5), 39px);
  background: var(--real-bg) no-repeat center top / cover;
  padding: min((58vw / 7.5), 55px) 0 min((107vw / 7.5), 97px);
}
.real__detail {
  width: var(--real-img-w, min((720vw / 7.5), 720px));
  margin: auto;
  @media(width >=861px) {
    --real-img-w: min(100%, 961px);
    --real-img-h: calc((593 / 961) * 100%); /* 画像FIX後数値調整*/
  }
  .real__detail--image {
    width: 100%;
    padding-top: var(--real-img-h, calc((1805 / 720) * 100%)); /* 画像FIX後数値調整*/
    position: relative;
  }
  .real__detail--image--text {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/*banner*/
.banner__lineup {
  width: min((692vw / 7.5), 960px);
  margin: auto;
  display: grid;
  gap: var(--gap, min((59vw / 7.5), 59px));
  &:not(:first-child) {
    margin-top: min((167vw / 7.5), 63px)
  }
  @media(width >=861px) {
    --gap: 12px;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--gap)) / 2));
    justify-content: center;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  padding-bottom: min((50vw / 7.5), 60px);
  @media (width >=741px) {
    padding: 64px 0;
    background: url("../images/search_bg_pc.webp") no-repeat center top / var(--default-bg-width-pc);
  }
}
/*
@media (min-width:741px) {
}
@media only screen and (orientation: landscape) and (max-width: 828px), only screen and (max-width: 740px) {
  #searchArea .rn-searchMod__formSection {
    padding-bottom: min((100vw / 7.5), 100px);
  }
}
#pageApp.is-device-tab ~ #searchArea {
  padding-bottom: min((86vw / 7.5), 86px);
}*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .main .base-text-link {
    &:hover {
      text-decoration: none;
    }
  }
  .main .base-button__link {
    .base-button:not(.is-bg-blue) & {
      transition: background var(--default-hover-speed), color var(--default-hover-speed);
      &:hover {
        --base-btn-bg: #fff;
        --base-btn-fc: #23ad75;
      }
    }
    .is-bg-blue & {
      transition-property: --base-btn-bg-gradient-color-a, --base-btn-bg-gradient-color-b;
      transition-duration: var(--default-hover-speed);
      &:hover {
        --base-btn-bg-gradient-color-a: #3fd6c3;
        --base-btn-bg-gradient-color-b: #736efe;
      }
    }
  }
  .section-navi__lineup--item--link {
    &:hover {
      background: linear-gradient(to bottom, #c1dfc4 0%, #deecdd 100%)
    }
  }
  .banner__lineup--item--link {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
  .reco-banner__item {
    background: #fff;
  }
  .reco-banner__link {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: .7;
    }
  }
}
@property --base-btn-bg-gradient-color-a {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --base-btn-bg-gradient-color-b {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}