@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Shippori+Mincho+B1:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

@import url(./ress.min.css);

:root {
  --ff_zenkaku: "Zen Kaku Gothic New", sans-serif;
  --ff_shipporiB1: "Shippori Mincho B1", serif;
  --ff_bellefair: "Bellefair", serif;
  --zIndex_modal: 200;
  --zIndex_header: 100;
  --zIndex_def: 0;
  --c_formBorder: #888;
  --c_required: #E83959;
}

html {
  font-size: 62.5%;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", sans-serif;
  font-weight: 400;
  color: #000;
  background: #f4f4f4;
  line-height: normal;
  vertical-align: baseline;

  scroll-behavior: smooth;

  @media not (width <= 768px) {
    scroll-padding-top: 70px;
  }
  @media screen and (width <= 768px) {
    scroll-padding-top: 44px;
  }
}
body { font-size: 1.6rem;}

a { color: #2293ff; text-decoration: none;}
/* a:not([class]):hover, a:not([class]):active { text-decoration: underline;} */

img { max-width: 100%; vertical-align: bottom;}
ul { list-style: none;}
fieldset { border: none;}
select, label { cursor: pointer;}
address { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
em { font-weight: 700; font-style: normal;}
p { line-height: 1.75;}


/* ===========================================
  layout
===========================================*/
.ly_page {
  overflow-x: hidden;

  @media not (width <= 768px) {
    padding-top: 70px;
  }
  @media screen and (width <= 768px) {
    padding-top: 44px;
  }
  &.ly_page__top {
    padding-top: 0;
  }
}
.ly_content {
  @media not (width <= 768px) {
    max-width: 1280px;
    margin-inline: auto;
    padding-left: 40px;
    padding-right: 40px;

    &.ly_content__900 {
      max-width: 980px;
    }
    &.ly_content__800 {
      max-width: 880px;
    }
    &.ly_content__700 {
      max-width: 780px;
    }
  }
  @media screen and (width <= 768px) {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ===========================================
  element
===========================================*/
.el_headlineLv01 {
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 80px auto;
  text-align: center;
  font-weight: 400;
  font-size: 2.4rem;

  &::before {
    content: attr(title);
    font-family: var(--ff_bellefair);
    font-size: 6.4rem;
  }
  @media screen and (width <= 768px) {
    margin: 40px auto;
    font-size: 1.6rem;

    &::before {
      font-size: 3.2rem;
    }
  }
}
.el_headlineLv02 {
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 40px auto;
  text-align: center;
  font-weight: 400;
  font-size: 1.8rem;

  &::before {
    content: attr(title);
    font-family: var(--ff_bellefair);
    font-size: 4.0rem;
  }
  @media screen and (width <= 768px) {
    margin-bottom: 30px;
    font-size: 1.5rem;

    &::before {
      font-size: 2.4rem;
    }
  }
}
.el_headlineLv03 {
  display: grid;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  font-family: var(--ff_shipporiB1);
  font-weight: 500;
  font-size: 3.2rem;

  @media screen and (width <= 768px) {
    margin-bottom: 30px;
    font-size: 2.2rem;
  }
}
.el_copy {
  font-size: 1.2rem;
}
.el_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25em 2em;
  line-height: 1.2;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to right, #0097DB, #0065DB);
  border-radius: 2em;
  transition: transform .2s;

  &.el_btn__gray { background: #888;}
  &.el_btn__black { background: #000;}

  &:hover {
    filter: contrast(120%);
    transform: scale(1.05);
  }
}
.el_note {
  font-size: 1.6rem;
  font-weight: 400;

  @media screen and (width <= 768px) {
    font-size: 1.3rem;
  }
}
.el_divider {
  margin: 100px 0;
  border: none;
  border-bottom: 1px solid #A5A5A5;

  @media screen and (width <= 768px) {
    margin: 60px auto;
  }
}
/* form */
.el_formControl {
  display: inline-flex;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  background: #fff;
  border: 1px solid var(--c_formBorder);
  border-radius: 5px;

  @media not (width <= 768px) {
    min-height: 50px;
    font-size: 1.8rem;
  }
  @media screen and (width <= 768px) {
    min-height: 44px;
  }

  &.el_formControl__full {
    display: flex;
    width: 100%;
  }
  select& {
    padding-right: 40px;
    background-image: url(/img/arw_select.svg);
    background-repeat: no-repeat;
    background-position: center right 10px;
  }
  textarea& {
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.75;
    vertical-align: bottom;
  }
  &.el_formControl_hideSpin {
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance:textfield;
    }
  }
  &:required,
  &.is_required {
    border-color: var(--c_required);
  }
  &:valid,
  .is_valid {
    border-color: var(--c_formBorder);
  }
}
.el_formBtn {
  display: inline-flex;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  background: linear-gradient(to right, #0097DB, #0065DB);
  border-radius: 5px;
  color: #fff;
  
  @media not (width <= 768px) {
    min-height: 50px;
    font-size: 1.8rem;
  }
  @media screen and (width <= 768px) {
    min-height: 44px;
  }
}
.el_formRadio {
  display: inline-flex;

  @media not (width <= 768px) {
    font-size: 1.8rem;
  }

  & input {
    visibility: hidden;
    width: 0; height: 0;
    position: absolute;
  }
  & label {
    position: relative;
    padding-left: 30px;

    &::before {
      display: inline-block; content: '';
      width: 1.35em; aspect-ratio: 1;
      background: #fff;
      border: 1px solid var(--c_formBorder);
      border-radius: 50%;
      position: absolute;
      left: 0; top: .1em;
    }
  }
  & input.is_required + label::before,
  :required + label::before {
    border-color: var(--c_required);
  }
  & input.is_valid + label::before,
  :valid + label::before {
    border-color: var(--c_formBorder);
  }
  :checked + label::before {
    border-width: 0.5em;
    border-color: #006BE9;
  }
}
.el_formCheck {
  display: inline-flex;

  @media not (width <= 768px) {
    font-size: 1.8rem;
  }

  & input {
    visibility: hidden;
    width: 0; height: 0;
    position: absolute;
  }
  & label {
    position: relative;
    padding-left: 30px;

    &::before {
      display: inline-block; content: '';
      width: 1.35em; aspect-ratio: 1;
      background: #fff;
      border: 1px solid var(--c_formBorder);
      border-radius: 3px;
      position: absolute;
      left: 0; top: .1em;
    }
    &::after {
      display: none; content: '';
      width: .5em; aspect-ratio: 1.2;
      border: solid #fff;
      border-width: 0 0 2px 2px;
      position: absolute;
      top: 0.5em; left: 0.45em;
      transform: rotate(-45deg);
    }
  }
  & input.is_required + label::before,
  :required + label::before {
    border-color: var(--c_required);
  }
  & input.is_valid + label::before,
  :valid + label::before {
    border-color: var(--c_formBorder);
  }
  :checked + label {
    &::before {
      border: none;
      background: #006BE9;
    }
    &::after {
      display: block;
    }
  }
}
.el_formPlainText {
  @media not (width <= 768px) {
    font-size: 1.8rem;
  }
}
.el_formPlainTextarea {
  padding: 1em;
  border: 1px solid var(--c_formBorder);
  border-radius: 5px;
  line-height: 1.75;

  @media not (width <= 768px) {
    font-size: 1.8rem;
  }
}
.el_formRequired {
  margin-left: 5px;
  padding: 0px 4px;
  background: var(--c_required);
  border-radius: 3px;
  color: #fff;
  line-height: 1.2;
  font-weight: 500;
  font-size: .8em;
}
.el_formNote {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

/* ===========================================
  block
===========================================*/
.bl_header {
  display: flex;
  align-items: center;
  background: #fff;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--zIndex_header);

  .bl_header_logo {
    height: inherit;
    margin-right: auto;
    
    & a {
      display: flex;
      align-items: center;
      height: inherit;
      padding: 0 20px;
      background: #fff;
    }
    & img {
      height: 50px;
    }
    @media screen and (width <= 768px) {
      & a {
        padding: 0 10px;
      }
      & img {
        height: 36px;
      }
    }
  }

  @media not (width <= 768px) {
    height: 70px;
    padding-right: 20px;
  }
  @media screen and (width <= 768px) {
    height: 54px;
    padding-right: 5px;
  }

  .el_btn {
    white-space: nowrap;
    padding: .8em 1.3em;

    @media not (width <= 768px) {
      font-size: 1.5rem;
    }
    @media screen and (width <= 768px) {
      font-size: 1.3rem;
    }
    @media screen and (768px < width < 1024px) {
      flex-direction: column;
      font-size: 1.3rem;
    }
  }
  .bl_header_menuBtn {
    @media not (width <= 768px) {
      display: none;
    }
    @media screen and (width <= 768px) {
      display: block;
      aspect-ratio: 1;
      height: 44px;
      margin-left: 10px;
      background: #f4f4f4;
      border-radius: 50%;
      position: relative;

      &::before,
      &::after {
        display: block; content: '';
        width: 16px; height: 1px;
        margin: auto;
        background: #444;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        transition: transform .2s;
      }
      &::before {
        transform: translateY(-3px);
      }
      &::after {
        transform: translateY(3px);
      }
      &.bl_header_menuBtn__opened {
        &::before {
          transform: rotate(-45deg);
        }
        &::after {
          transform: rotate(45deg);
        }

      }
    }
  }
  &.bl_header__top {
    background: none;

    .bl_gnav > li {
      border-color: #fff;
    }
    .bl_gnav_link {
      color: #fff;
    }

    &::before {
      display: block; content: '';
      height: 160px;
      background: linear-gradient(#00000066, #00000000);
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: -1;
    }
    @media screen and (width <= 768px) {
      &:not(:has(.bl_gnav_wrapper__hidden)) {
        background: #fff;

        .bl_gnav > li {
          border-color: #000;
        }
        .bl_gnav_link {
          color: #000;
        }
        &::before {
          display: none;
        }
      }
    }
  }
}
.bl_gnav_wrapper {
  @media screen and (width <= 768px) {
    background: #fff;
    position: fixed;
    top: 44px; bottom: 0; left: 0; right: 0;
    overflow: auto;
    transition: opacity .5s;
    z-index: var(--zIndex_header);
    
    &.bl_gnav_wrapper__hidden {
      opacity: 0;
      pointer-events: none;
    }
  }
}
.bl_gnav {
  .bl_gnav_link {
    display: grid;
    color: #000;
    font-size: 1.2rem;
    text-align: center;

    &::before {
      content: attr(title);
      font-size: 1.5rem;
      font-weight: bold;
    }
  }

  @media not (width <= 768px) {
    display: flex;

    & > li {
      display: flex;
      border-left: 1px solid #000;
    }
    .bl_gnav_link {
      padding: 0 30px;
      position: relative;

      &::after {
        display: block; content: '';
        height: 2px;
        margin: auto;
        background: #ccc;
        position: absolute;
        bottom: -10px; left: 0; right: 0;
        transform: scaleX(0);
        transition: transform .2s;
      }
      &:hover::after {
        transform: scaleX(1);
      }
    }
  }
  @media screen and (768px < width < 1024px) {
    .bl_gnav_link {
      padding: 0 10px;

      &::before {
        font-size: 1.35rem;
      }
    }
  }
  @media screen and (width <= 768px) {
    margin: 0 20px 60px;

    & > li {
      border-bottom: 1px solid #a5a5a5;
    }
    .bl_gnav_link {
      padding: 20px;
    }
  }
}
.bl_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 10px;

  @media screen and (width <= 768px) {
    padding: 20px 10px;
  }
}
.bl_formTable {
  .bl_formTable_row {
    &:nth-child(n+2) {
      border-top: 1px solid #A5A5A5;
    }
  }
  & dt {
    font-weight: 500;
  }
  & dd {
    word-break: break-all;
  }
  @media not (width <= 768px) {
    .bl_formTable_row {
      display: grid;
      gap: 30px;
      grid-template-columns: 220px 1fr;

      &.bl_formTable_row__col1 {
        grid-template-columns: 1fr;

        & dt {
          padding-bottom: 0;
        }
        & dd {
          padding-top: 0;
        }
      }
    }
    & dt {
      padding-top: 40px;
      padding-bottom: 40px;
      font-size: 1.8rem;
    }
    & dd {
      display: grid;
      align-items: center;
      padding-top: 30px;
      padding-bottom: 30px;
      font-size: 1.8rem;
    }
  }
  @media screen and (width <= 768px) {
    & dt {
      padding-top: 20px;
      padding-bottom: 10px;
    }
    & dd {
      padding-bottom: 20px;
    }
  }
}
.bl_btnUnit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  @media not (width <= 768px) {
    margin: 60px auto;
    gap: 30px;
  }
  @media screen and (width <= 768px) {
    margin: 40px auto;
    gap: 20px 10px;
  }
}
.bl_formRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 30px;

  &.bl_formRow__name {
    flex-wrap: nowrap;

    @media not (width <= 768px) {
      gap: 10px;
    }
    @media screen and (width <= 768px) {
      gap: 5px;
    }
  }
}
.bl_formErrorList {
  display: grid;
  gap: .75rem;
  margin-top: 10px;
  color: var(--c_required);
  line-height: 1.4;
  font-weight: 500;

  > li {
    padding-left: 1em;
    position: relative;

    &::before {
      display: inline-block; content: '※';
      position: absolute;
      left: 0;
    }
  }
}
.bl_alertList {
  display: grid;
  gap: .75rem;
  padding: 1em;
  background: #faedf0;
  border: 1px solid var(--c_required);
  border-radius: 5px;
  color: #860d23;
  line-height: 1.4;
  font-weight: 500;

  @media not (width <= 768px) {
    font-size: 1.8rem;
  }

  > li {
    padding-left: 1em;
    position: relative;

    &::before {
      display: inline-block; content: '※';
      position: absolute;
      left: 0;
    }
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
}
.bl_table {
  border-top: 1px solid #A5A5A5;
  margin: auto;

  & th, & td {
    border-bottom: 1px solid #A5A5A5;
    vertical-align: top;
    text-align: left;
  }
  & th {
    padding: 45px 25px;
    font-size: 2rem;
    font-weight: 400;
    white-space: nowrap;

    @media screen and (width <= 768px) {
      padding: 25px 20px;
      font-size: 1.5rem;
    }
  }
  & td {
    padding: 38px 25px 38px 0;
    font-size: 2.8rem;
    font-weight: 500;

    @media screen and (width <= 768px) {
      padding: 20px 20px 20px 0;
      font-size: 2.2rem;
    }
  }
}
.bl_location {
  padding: 60px 40px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;

  @media screen and (width <= 1024px) {
    flex-direction: column;
    gap: 50px;
  }

  @media screen and (width <= 768px) {
    padding: 30px 15px;
  }
  
  .bl_location_inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
    max-width: 800px;

    @media screen and (width <= 1024px) {
      margin: auto;
    }

    @media screen and (width <= 768px) {
      grid-template-columns: none;
      gap: 20px;
    }
  }

  .bl_location_map iframe {
    width: 100%;
    aspect-ratio: 4/3;

    @media screen and (width <= 768px) {
      aspect-ratio: 16/9;
    }
  }
  .bl_location_ttl {
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 500;

    @media screen and (width <= 768px) {
      margin-bottom: 20px;
      font-size: 1.7rem;
    }
  }
  .bl_location_info {
    display: grid;
    gap: 1em;

    @media screen and (width <= 768px) {
      font-size: 1.4rem;
    }
  }
}

/* ===========================================
  unique
===========================================*/
/* un_mv */
.un_mv {
}
.un_mv_txt {
  padding: calc(5dvh + 30px) 5vw;
  background: linear-gradient(#00000000, #00000088);
  color: #fff;
  font-size: 3.6dvw;
  font-family: var(--ff_shipporiB1);
  text-shadow: 0 0 10px #00000088;
  text-align: center;
  position: absolute;
  left: 0; right: 0; bottom: 0;

  @media (orientation: portrait) {
    padding: calc(5dvh + 40px) 5vw;
    font-size: 6dvw;
  }
  &.un_mv_txt__left {
    text-align: left;
  }
}
.un_un_mv_ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.un_mv_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.un_mv_slide {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #333;
  overflow: hidden;

  &.un_mv_slide__01 {
    .un_mv_txt {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 4.6dvw;
      background: none;
      top: 0;
      @media (orientation: portrait) {
        font-size: 8dvw;
      }
    }
  }
  &.un_mv_slide__02 {
    .un_mv_video video {
      @media (orientation: portrait) {
        object-position: 15%;
      }
    }
  }
  &.un_mv_slide__07 {
    .un_mv_txt {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: none;
      top: 0;
    }
    .un_mv_txt_line01,
    .un_mv_txt_line02 {
      opacity: 0;
    }
  }
  &.un_mv_slide__08 {
    .un_mv_txt {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: none;
      top: 0;
    }
    .un_mv_txt_line01,
    .un_mv_txt_line02 {
      opacity: 0;
    }
  }
}
@keyframes slide_zoomUp {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}
@keyframes slide08_txt {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.swiper-slide-active {
  .un_un_mv_ph img {
    animation: slide_zoomUp linear alternate infinite;
    animation-duration: 10s;
  }
  .un_mv_slide.un_mv_slide__07 {
     .un_mv_txt_line01 {
      animation: slide08_txt forwards;
      animation-delay: 5s;
      animation-duration: 1.2s;
    }
     .un_mv_txt_line02 {
      animation: slide08_txt forwards;
      animation-delay: 6s;
      animation-duration: 1.2s;
    }
  }
  .un_mv_slide.un_mv_slide__08 {
     .un_mv_txt_line01 {
      animation: slide08_txt forwards;
      animation-delay: 5s;
      animation-duration: 1.2s;
    }
     .un_mv_txt_line02 {
      animation: slide08_txt forwards;
      animation-delay: 6s;
      animation-duration: 1.2s;
    }
  }
}
.swiper-scroll {
  display: grid;
  width: 80px;
  margin: auto;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;

  & img {
    width: 20px;
    margin: auto;
  }
}
.swiper-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: auto;
  padding: 5px 10px;
  background: #00000033;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 10;

  & img {
    display: block;
    width: 20px;
    margin: auto;
  }
}

.swiper_mv {
  width: 100%;
  height: 100dvh;
}
/* un_topAboutKENEI */
.un_topAboutKENEI {
  padding-top: 1px;
}
.un_topAboutKENEI_inner {
  margin: auto;

  @media not (width <= 768px) {
    display: flex;
    justify-content: center;
    max-width: 1500px;

    .un_topAboutKENEI_ph {
      width: 50%;
    }
    .un_topAboutKENEI_body {
      width: 50%;
      min-width: 500px;
    }
  }
}
.un_topAboutKENEI_ph {
  object-fit: cover;

  @media screen and (width <= 768px) {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}
.un_topAboutKENEI_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: #fff;

  @media not (width <= 768px) {
    padding: 7%;

    .el_btn {
      margin-top: 80px;
    }
  }
  @media screen and (width <= 768px) {
    padding: 20px 20px 40px;

    .el_btn {
      margin-top: 40px;
      margin-inline: auto;
    }
  }
}
.un_topAboutKENEI_cath {
  margin-bottom: 1em;
  font-family: var(--ff_shipporiB1);
  line-height: 1.5;
  
  @media not (width <= 768px) {
    font-size: 3rem;
  }
  @media screen and (width <= 768px) {
    font-size: 2.2rem;
  }
}
.un_topAboutKENEI_txt {
  & p {
    margin-top: 1em;
  }
  @media not (width <= 768px) {
    font-size: 2rem;

  }
}
/* un_thanksSection */
.un_thanksSection {
  background: #fff;

  @media not (width <= 768px) {
    padding-block: 60px;
  }
  @media screen and (width <= 768px) {
    padding-block: 30px;
  }
}
.un_thanksMsg {
  display: grid;
  gap: 1em;
}
.un_tel {
  display: table;
  margin: 40px auto 0;
  border: 1px solid #a5a5a5;

  .un_tel_hl {
    font-weight: 500;
  }
  .un_tel_num {
    margin: 10px 0;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.2;
  }
  & table {
    font-size: 1.4rem;

    & th {
      font-weight: 400;
      text-align-last: left;
    }
  }
  @media not (width <= 768px) {
    padding: 30px 50px;

    .el_btn {
      display: none;
    }
  }
  @media screen and (width <= 768px) {
    margin-top: 30px;
    padding: 20px 30px;

    .el_btn {
      display: table;
      margin-top: 20px;
      margin-inline: auto;
      font-size: 1.4rem;
      padding-block: .75em;
    }
  }
}
/* un_topProducts */
.un_topProducts {
  padding: 40px 0 110px;

  @media screen and (width <= 768px) {
    padding: 1px 0 40px;
  }
}
.un_topProducts_item {
  margin-bottom: 110px;

  @media screen and (width <= 768px) {
    margin-bottom: 60px;
  }
}
.un_topProducts_img img {
  display: table;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.un_topProductsList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3%;
  max-width: 1200px;
  margin: auto;
  padding: 0 40px;

  @media screen and (width <= 768px) {
    grid-template-columns: 1fr;
    /* row-gap: 50px; */
    padding: 0 15px;
  }

  .un_topProductsList_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 20px;

    @media screen and (width <= 768px) {
      grid-template-columns: 30fr 70fr;
      grid-template-rows: auto;
      grid-row: auto;
      gap: 0 15px;

      &:nth-of-type(n+2) {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #A5A5A5;
      }
    }
  }
  .un_topProductsList_ph {
    width: 100%;
    aspect-ratio: 1;

    @media screen and (width <= 768px) {
      grid-row: span 1;
    }
  }
  .un_topProductsList_hl {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
  
    &::before {
      display: block;
      content: attr(title);
      font-size: 2.4rem;

    }
    @media screen and (width <= 768px) {
      display: flex;
      flex-direction: column;
      justify-content: center;

      &::before {
        font-size: 2.1rem;
      }
    }
  }
  .un_topProductsList_catch {
    font-family: var(--ff_shipporiB1);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.4;

    @media screen and (width <= 768px) {
      grid-column: 2;
      grid-column: span 2;
      margin-top: 20px;
      font-size: 1.9rem;
    }
  }
  .un_topProductsList_txt {
    font-size: 1.4rem;

    @media screen and (width <= 768px) {
      grid-column: span 2;
      margin-top: 10px;
    }
  }
}
.un_topProducts_cv {
  margin-top: 40px;
  text-align: center;
}
/* un_message */
.un_message {
  padding: 1px 20px 100px;
  background: #fff;

  .un_message_txt {
    display: grid;
    gap: 1em;
    max-width: 900px;
    margin: auto;
    padding-block: 40px;
    border: 0 solid #A5A5A5;
    border-width: 1px 0;
    font-family: var(--ff_shipporiB1);
    font-size: 1.8rem;
  }
  .un_message_from {
    font-size: 2rem;
    text-align: right;
  }
  @media screen and (width <= 768px) {
    .un_message_txt {
      padding-block: 20px;
      font-size: 1.5rem;
    }
    .un_message_from {
      font-size: 1.7rem;
    }
  }
}
/* un_businesshours */
.un_businesshours {
  padding: 1px 20px 100px;
  background: #fff;
}
/* un_topPit */
.un_topPit {
  padding-top: 1px;
}

/* ===========================================
  helper
===========================================*/
.hp_hide { display: none !important;}
.hp_showSP {
  @media not (width <= 768px) { display: none !important; }
}
.hp_showPC {
  @media screen and (width <= 768px) { display: none !important; }
}
.hp_scrollStop {
  overflow: hidden;
}
.hp_fz_small {
  font-size: .8em !important;
}
.hp_fwb {
  font-weight: 700 !important;
}

/* ===========================================
  swiper
===========================================*/
.swiper-pagination-bullet-active {
  background: #0082af;
}