@charset "utf-8";
/*
Theme Name: ベストBike
Description: 
Author: SonicGrow×COSMICGEAR
Version: 1.5
*/
/*-root*/ :root {
  --fnt-base: Arial, noto-sans-cjk-jp, sans-serif;
  --fnt-futura: 'futura', var(--fnt-base);
  --fc-base: #1a1a1a;
  --clr-red: #df0002;
  --clr-org: #f2a80a;
  --clr-ylw: #FFFC45;
  --clr-gry: #747474;
  --clr-em-grn: #00B0B0;
  --bdr-d-gry: #7c7c7c;
  --bdr-gry: #b5b5b5;
  --hvr-clr: var(--clr-red);
  --wall-gry: #f7f7f7;
  --wall-blk: #1D1A19;
  --wall-pink: #F4DCDC;
  --fs-mid16: min(16px, 3.8vw);
  --fs-mid18: min(18px, 4vw);
  --fs-mid20: min(20px, 4.2vw);
  --fs-mid24: min(24px, 4.5vw);
  --head1: clamp(2rem, 1.136rem + 4.32vw, 4.375rem); /*32-70*/
  --head2: min(34px, calc(100vw/15.5));
  --drp-sdw: 0 4px 4px rgba(0, 0, 0, .2);
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .5s var(--easing);
}
/*base=====*/
body {
  font-family: var(--fnt-base);
  font-size: min(3.6vw, 14px);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  color: var(--fc-base);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: 400;
}
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl_c {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.jc_c {
  justify-content: center;
}
.ai_c {
  -ms-align-items: center;
  align-items: center;
}
figure {
  margin-bottom: 0 !important;
}
.fnt-futura {
  font-family: var(--fnt-futura);
  font-weight: 400;
}
#pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: min(80px, 16vw);
  z-index: 5;
  background: rgba(38, 36, 35, .9);
  border-radius: 100vmax;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  overflow: hidden;
  translate: 0 calc(100% + 15px);
  transition: .3s var(--easing);
  cursor: pointer;
}
#pagetop p {
  color: #fff;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: min(12px, 3.2vw);
  font-weight: 600;
}
#pagetop svg {
  width: 1.6em;
  aspect-ratio: 1/0.5483;
  fill: #fafafa;
}
#pagetop {
  visibility: visible;
  opacity: 1;
}
#pagetop.is-view {
  translate: 0 0;
}
#pagetop.is-fit {
  translate: 0 calc(100% + 15px);
}
/*container
========================================================*/
#container {
  width: 100%;
  min-height: 100dvh;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}
a.cvr {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
a.udl{
  color: var(--clr-red);
  text-decoration: underline;
}
.wrapper {
  width: min(1440px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
}
.inner {
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
}
.inner.wid {
  width: min(1380px, 100%);
}
.fw-b {
  font-weight: 600;
}
.fc-red {
  color: var(--clr-red);
}
.main-logo_wrap {
  width: 100%;
  display: grid;
  grid-template-columns: 26% auto;
  -ms-align-items: center;
  align-items: center;
  gap: 3%;
  aspect-ratio: 1/0.2414;
}
/*hum
=====================================*/
#hum-btn {
  position: fixed;
  top: 0;
  right: 0;
  width: min(60px, 15vw);
  aspect-ratio: 1;
  display: none;
  z-index: calc(infinity);
  cursor: pointer;
}
#hum-btn button {
  width: 60%;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  -webkit-transition: background var(--transit);
  -o-transition: background var(--transit);
  transition: background var(--transit);
}
#hum-btn button::before, #hum-btn button::after {
  content: "";
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  background: #fff;
  -webkit-transition: transform var(--transit);
  -o-transition: transform var(--transit);
  transition: transform var(--transit);
  transform-origin: center;
}
#hum-btn button::before {
  top: -10px;
}
#hum-btn button::after {
  bottom: -10px;
}
#hum-btn.chg-clr, #hum-btn.open, #container.under #hum-btn {
  background: var(--clr-red);
}
#hum-btn.open button {
  background: none;
}
#hum-btn.open button::before, #hum-btn.open button::after {
  top: calc(50% - 2px);
}
#hum-btn.open button::before {
  transform: rotate(-45deg);
}
#hum-btn.open button::after {
  transform: rotate(45deg);
}
#l-nav {
  position: fixed;
  width: min(390px, 100%);
  height: 100dvh;
  top: 0;
  right: 0;
  background: var(--wall-blk);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  translate: 100% 0;
  -webkit-transition: all var(--transit);
  -o-transition: all var(--transit);
  transition: all var(--transit);
  overflow-y: scroll;
}
#l-nav.is-view {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.l-nav_inner {
  width: 100%;
  min-height: 100%;
  padding: min(80px, 18vw) min(40px, 5vw) min(50px, 5vw);
  color: #FFF;
}
.l-nav_menu > li {
  border-bottom: 2px solid #262423;
}
.l-nav_menu > li a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: min(18px, 3vw) 8px;
  gap: 10px;
  -ms-align-items: flex-end;
  align-items: flex-end;
}
.l-nav_menu > li a .ja {
  font-weight: 600;
  font-size: min(20px, calc(100vw/15));
}
.l-nav_menu > li a .en {
  color: var(--clr-red);
  font-size: min(12px, 3.2vw);
}
.l-nav-button {
  margin-top: min(40px, 10vw);
}
/*header
=====================================*/
header {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all var(--transit);
}
.head-inner {
  padding: min(10px, 3vw) min(50px, 4vw);
  height: 80px;
  display: grid;
  grid-template-columns: min(225px, 20vw) auto;
  gap: min(20px, 5vw);
  -ms-align-items: center;
  align-items: center;
}
.head-nav {
  display: grid;
  grid-template-columns: auto min(320px, 25vw);
  justify-content: end;
  -ms-align-items: center;
  align-items: center;
  gap: min(40px, 4vw);
  font-weight: 600;
}
.g-nav {
  gap: min(20px, 3vw);
}
.g-nav a {
  color: var(--nav-txtclr);
  transition: color var(--transit);
}
/*head slide button*/
.head-button-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--clr-red);
  border-radius: 10px;
}
/* 背景スライド用 */
.js-slide-wall {
  background: linear-gradient(to right, #fff 50%, var(--clr-red) 50%);
}
.js-slide-wall::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--clr-red) 50%, #fff 50%);
  transition: transform 0.6s ease;
}
.js-slide-wall.hvr-join::after {
  transform: translateX(50%);
}
.js-slide-wall.hvr-login::after {
  transform: translateX(-50%);
}
/* ボタン共通 */
.head-button-set a {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  height: 60px;
  font-size: clamp(0.875rem, 0.431rem + 0.93vw, 1.125rem);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--clr-red), 50%, #fff 50%);
  background-size: 200% 100%;
  transition: background .6s ease;
  transform-origin: left center;
}
.head-button-set.hvr-join a.login {
  background-position: left -100% center;
}
.head-button-set.hvr-join a.join {
  background-position: left center;
}
.head-button-set a.join, .head-button-set.hvr-login a.login {
  background-position: 100% center;
}
.head-button-set a.login, .head-button-set.hvr-login a.join {
  background-position: left center;
}
@media(hover) {
  .g-nav a:hover {
    color: var(--hvr-clr);
  }
}
/*キックボード用head*/
.container-kick #hum-btn.chg-clr,
.container-kick #hum-btn.open,
#container.under.container-kick #hum-btn{
  background: var(--clr-em-grn);
}
.nav-kick .l-nav_menu > li a .en {
  color: var(--clr-em-grn);
}
.nav-kick .round-button > *{
  background: var(--clr-em-grn);
  border: 2px solid var(--clr-em-grn);
}
/*index header*/
#index-header {
  --nav-txtclr: #fff;
  position: absolute;
}
#index-header.fixed, #under-header {
  position: fixed;
  background: #fff;
  border-bottom: 2px solid var(--bdr-gry);
}
#index-header .logo svg {
  fill: #fff;
}
#index-header.fixed .logo svg, #under-header .logo svg {
  fill: #000;
}
#index-header.fixed {
  --nav-txtclr: var(--fc-base);
}
/*main
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
main {
  flex: 1;
  position: relative;
}
.in-text {
  line-height: calc(30/14);
}
/*title setting*/
.sec-title .sub {
  color: var(--clr-red);
  padding-left: 2.4286em;
}
.sec-title.grn .sub {
  color: var(--clr-em-grn);
}
.sec-title .sub::before {
  content: "";
  width: 1.7857em;
  aspect-ratio: 1/0.4;
  background: url("images/icon/squ-title.svg") no-repeat center/cover;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
.sec-title.grn .sub::before {
  background-image: url("images/icon/squ-title_grn.svg");
}
.sec-title .title {
  font-size: var(--head2);
  font-weight: 600;
  line-height: calc(48/38);
  margin-top: 10px;
}
.box-title {
  font-size: var(--fs-mid24);
  font-weight: 600;
  line-height: calc(34/24);
}
.box-title.rect {
  padding-left: min(20px, 8vw);
}
.box-title.rect::before {
  content: "";
  width: min(10px, 4vw);
  aspect-ratio: 1;
  background: var(--clr-red);
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
.rect-title {
  padding-left: 1.5em;
}
.rect-title::before {
  content: "";
  width: 1em;
  aspect-ratio: 1;
  background: var(--clr-red);
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
/*button seting*/
.button-wrap{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:10px;
}
.round-button {
  width: min(320px, 100%);
}
.round-button > * {
  color: var(--btn-txt);
  background: var(--btn-bkg);
  height: min(60px, 14vw);
  border-radius: 100vmax;
  overflow: hidden;
  border: 2px solid var(--clr-red);
  display: grid;
  place-content: center;
  font-size: var(--fs-mid18);
  font-weight: 600;
}
.round-button > *::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--btn-txt);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform var(--transit);
}
.round-button > * > * {
  z-index: 1;
}
.round-button.red {
  --btn-txt: #fff;
  --btn-bkg: var(--clr-red);
}
.round-button.lr-wht {
  --btn-txt: var(--clr-red);
  --btn-bkg: #fff;
}
.round-button.grn {
  --btn-txt: #fff;
  --btn-bkg: var(--clr-em-grn);
}
.round-button.grn a {
  border-color: var(--clr-em-grn);
}
.rect-button {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-start;
}
.rect-button.cnt {
  justify-content: center;
}
.rect-button a {
  display: grid;
  place-content: center;
  padding: min(18px, 3vw) min(40px, 5vw) min(18px, 3vw) min(60px, 8vw);
  border: 2px solid var(--clr-red);
  border-radius: 10px;
  color: var(--clr-red);
  overflow: hidden;
  transition: color var(--transit);
  background: #fff;
}
.rect-button a::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--clr-red);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform var(--transit);
}
.rect-button.grn a{
  color: var(--clr-em-grn);
  border-color: var(--clr-em-grn);
}
.rect-button.grn a::before{
  background-color: var(--clr-em-grn);
}
.rect-button a span {
  padding-right: min(40px, 14vw);
  font-size: var(--fs-mid18);
  font-weight: 600;
  line-height: calc(26/18);
}
.rect-button svg {
  fill: currentColor;
  width: min(20px, 5vw);
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
.arrow-link a {
  display: block;
  padding-right: 2.2em;
  font-size: var(--fs-mid18);
  font-weight: 600;
  text-align: right;
  transition: color var(--transit);
}
.arrow-link a::after {
  content: "";
  width: 1.111em;
  aspect-ratio: 1;
  background: url("images/icon/button-arrow.svg") no-repeat center/cover;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  transition: translate var(--transit);
}
.arrow-link.grn a::after {
  background-image: url("images/icon/button-arrow_grn.svg");
}
.regist-button-set {
  display: grid;
  grid-template-columns: auto;
  gap: min(20px, 5vw);
}
.regist-button-set.cnt {
  justify-items: center;
}
.regist-button-set.clm-end {
  justify-items: end;
}
@media(hover) {
  .round-button:hover > * {
    color: var(--btn-bkg);
  }
  .round-button:hover > *::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }
  .rect-button a:hover {
    color: #fff;
  }
  .rect-button a:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }
  .arrow-link a:hover {
    color: var(--clr-red);
  }
  .arrow-link a:hover::after {
    translate: 25% -50%;
  }
    .form-button-wrap input:hover{
    color: var(--clr-red);
    background: #fff;
}
    .download-btn a:hover{
        color: var(--clr-red);
        background: #fff; 
    }
}
.palla-wrapper {
  width: 100%;
  aspect-ratio: 1/0.2778;
  overflow: hidden;
  margin-top: min(120px, 12vw);
}
.palla-wrapper picture {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
/*hero
============================*/
#hero {
  height: var(--hero-height);
  overflow: hidden;
}
/*index hero*/
.hero-main {
  --hero-height: 800px;
}
.hero-slider-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.hero-slider-wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("images/wall/dot_cover.png");
  z-index: 1;
  opacity: .5;
}
.hero-slider {
  height: 100%;
}
.hero-slide-item img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.hero-feature_wrap {
  height: 100%;
  color: #fff;
  z-index: 1;
  gap: min(20px, 5vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.hero-title {
  font-size: var(--head1);
  font-weight: 600;
  line-height: calc(82/70);
  text-shadow: 0 2px 8px rgba(6, 30, 57, .3);
}
.hero-text {
  font-size: var(--fs-mid16);
  font-weight: 600;
  line-height: calc(32/16);
  text-shadow: 0 2px 2px rgba(6, 30, 57, 1);
}
.hero-text span {
  display: inline-block;
}
.hero-reserve-area {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, .1);
  border-radius: min(20px, 8vw);
  border: 1px solid rgba(255, 255, 255, .5);
  padding: min(15px, 3vw) min(25px, 6vw);
  box-shadow: var(--drp-sdw);
  display: grid;
  place-items: center;
  gap: 10px;
}
.hero-reserve-area .in-title {
  font-size: var(--fs-mid20);
  font-weight: 600;
  padding-left: 1.25em;
  padding-right: 1.25em;
}
.hero-reserve-area .in-title::before, .hero-reserve-area .in-title::after {
  content: "";
  width: .85em;
  aspect-ratio: 1/.75;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background: var(--clr-ylw);
}
.hero-reserve-area .in-title::before {
  left: 0;
}
.hero-reserve-area .in-title::after {
  right: 0;
}
.hero-reserve-area .button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(20px, 4vw);
}
.hero-reserve-area .button a {
  background: var(--clr-red);
  border-radius: 100vmax;
  padding: 5px min(40px, 6vw);
  height: 53px;
  overflow: hidden;
  color: #fff;
  display: grid;
  grid-template-columns: 1.2778em auto;
  font-size: var(--fs-mid18);
  gap: .5em;
  font-weight: 600;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--clr-red);
  transition: all var(--transit);
}
.hero-reserve-area .button a svg {
  fill: currentColor;
}
.hero-news_wrap {
  width: 100%;
  position: absolute;
  bottom: min(40px, 3vw);
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  justify-content: flex-end;
  color: #fff;
}
.hero-news-slider {
  width: min(830px, 100%);
  overflow: hidden;
  background: rgba(26, 26, 26, .5);
  border-radius: 100vmax;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: var(--drp-sdw);
}
.news-slide-item {
  padding: min(20px, 4vw) min(60px, 6vw);
}
.news-slide-item dl {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  gap: min(20px, 4vw);
  -ms-align-items: center;
  align-items: center;
}
.news-slide-item {
  overflow: hidden;
}
.news-slide-item .date {
  border-right: 1px solid currentColor;
  width: 12em;
}
.news-slide-item .date p {
  font-size: var(--fs-mid24);
  font-weight: 600;
}
.news-slide-item .title {
  width: calc(100% - 12em);
}
.news-slide-item .title a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap; /* 追加 */
}
.news-button-next {
  position: absolute;
  right: min(20px, 3vw);
  top: 50%;
  width: 1.5em;
  aspect-ratio: 1;
  translate: 0 -50%;
  z-index: 1;
}
.news-button-next::after {
  content: "";
  width: 50%;
  aspect-ratio: 1;
  border: 1px solid;
  border-color: rgba(255, 255, 255, .5) rgba(255, 255, 255, .5) transparent transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: 45deg;
}
@media(hover) {
  .hero-reserve-area .button a:hover {
    color: var(--clr-red);
    background: #fff;
  }
}
/*#index content
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.index-contents {
  margin-top: min(25px, 8vw);
}
ul.att-list > li {
  padding-left: 1em;
  line-height: calc(30/14);
}
ul.att-list > li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
ul.dot-list > li {
  padding-left: 1em;
}
ul.dot-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
/*grid list/grid box*/
/*
.grid-detail-list > li
,.grid-detail-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  -ms-align-items: center;
  align-items: center;
}
*/
.grid-detail-list > li, .grid-detail-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -ms-align-items: center;
  align-items: center;
  gap: min(20px, 3vw) 0;
}
.grid-detail-list li:nth-child(odd) .sec-title, .grid-detail-item .sec-title {
  grid-area: 1 / 1 / 2 / 2;
}
.grid-detail-list li:nth-child(odd) .detail-box, .grid-detail-item .detail-box {
  grid-area: 2 / 1 / 3 / 2;
}
.grid-detail-list li:nth-child(odd) .thumb-box, .grid-detail-item .thumb-box {
  grid-area: 1 / 2 / 3 / 3;
}
.grid-detail-list li:nth-child(even) .sec-title {
  grid-area: 1 / 2 / 2 / 3;
}
.grid-detail-list li:nth-child(even) .detail-box {
  grid-area: 2 / 2 / 3 / 3;
}
.grid-detail-list li:nth-child(even) .thumb-box {
  grid-area: 1 / 1 / 3 / 2;
}
.grid-detail-list > li:not(:first-child) {
  margin-top: min(100px, 10vw);
}
.grid-detail-list li .detail-box, .grid-detail-item .detail-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap: min(25px, 4vw);
  align-items: center;
}
.grid-detail-list li .thumb-box, .grid-detail-item .thumb-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.grid-detail-list li .thumb-box figure, .grid-detail-item .thumb-box figure {
  width: min(480px, calc(100% - min(60px, 4vw)));
  aspect-ratio: 1/0.7917;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.grid-detail-list li:nth-child(odd) .thumb-box, .grid-detail-item .thumb-box {
  -ms-align-items: flex-end;
  align-items: flex-end;
}
.grid-detail-list li .detail-box .att-list {
  font-size: .85em;
  padding-top: .5em;
}
.grid-detail-list li .comment{
  width: 100%;
}
/*index banner ++++++++++++++++++++*/
.index-banner-box {
  width: min(550px, calc(100vw - min(60px, 20vw)));
  margin-left: auto;
  margin-right: auto;
}
.banner-slide-item {
  border: 1px solid var(--bdr-d-gry);
}
.banner-slide-item figure {
  width: 100%;
  aspect-ratio: 1/0.3455;
}
.banner-slide-item figure img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.index-banner-box .banner-pagination {
  bottom: 0 !important;
  margin-top: min(20px, 4vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: min(10px, 3vw) min(20px, 3vw);
}
.index-banner-box .banner-pagination span {
  margin: 0 !important;
}
.banner-pagination .swiper-pagination-bullet {
  opacity: 1;
  background: var(--bdr-gry);
}
.banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--clr-red);
}
.bnr-navigation {
  width: calc(100vw - min(80px, 6vw));
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-start;
}
.bnr-navigation button {
  pointer-events: all;
  width: min(30px, 10vw);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 100vmax;
  position: relative;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16));
}
.bnr-navigation button::after {
  content: "";
  width: 20%;
  aspect-ratio: 1;
  border: 2px solid;
  border-color: var(--clr-red) var(--clr-red) transparent transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: 45deg;
  border-radius: 2px;
}
.bnr-button-next {
  margin-left: auto;
}
.bnr-button-next::after {
  translate: -55% -50%;
}
.bnr-button-prev::after {
  scale: -1 -1;
  translate: -40% -50%;
}
/*index about  ++++++++++++++++++++*/
.index-about-blc {
  margin-top: min(150px, 15vw);
}
.index-about__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.938rem, -0.199rem + 5.68vw, 4.063rem); /*15-65*/
}
.index-about_title {
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: min(40px, 5vw);
}
.index-about__howto {
  margin-top: min(80px, 10vw);
  border: 1px solid var(--bdr-gry);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.index-about__howto > li {
  padding: min(40px, 5vw);
}
.index-about__howto > li:not(:first-child) {
  border-left: 1px solid var(--bdr-gry);
}
.index-about__howto > li .thumb {
  width: 64%;
  margin-left: auto;
  margin-right: auto;
  margin-top: min(40px, 5vw);
}
.index-about__howto > li .link-area {
  margin-top: min(30px, 3vw);
  -ms-align-items: flex-end;
  align-items: flex-end;
  gap: 10px;
}
/*index service  ++++++++++++++++++++*/
.index-service-blc {
  margin-top: min(120px, 12vw);
}
/*index news++++++++++++++++++++*/
.index-news-blc {
  margin-top: min(120px, 12vw);
  background: var(--wall-gry);
  padding-bottom: min(120px, 15vw);
}
.index-news-box {
  padding-top: min(120px, 10vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: min(20px, 5vw);
}
.index-news-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(20px, 4vw);
  margin-top: min(40px, 8vw);
}
article.acv_post {
  background: #fff;
}
article.acv_post .post-date {
  color: var(--clr-red);
}
.index-news-box .arrow-link {
  margin-left: auto;
}
.index-news-list article.acv_post{
  padding: min(20px, 4vw) min(20px, 3vw);
}
.index-news-list.news-kick article.acv_post .post-date {
  color: var(--clr-em-grn);
}
.index-news-list article.acv_post .post-date{
  margin-left: auto;
  font-size: min(12px, 3.2vw);
}
.index-news-list article.acv_post .post-title{
  margin-top: 5px;
  line-height: calc(30/14);
}
/*footer
=====================================*/
footer {
  background: var(--wall-blk);
  color: #fff;
}
/*INFO*/
.foot-info-area {
  overflow: hidden;
  padding-top: min(100px, 10vw);
  padding-bottom: min(100px, 10vw);
}
.foot-info-area .pala-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  overflow: hidden;
  translate: -50% -50%;
  height: 120%;
}
.foot-info-area .pala-img img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.foot-info-area .pala-img::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, .65);
  top: 0;
  left: 0;
}
.foot-info-inner {
  display: grid;
  grid-template-columns: min(155px, 25vw) auto;
  overflow: hidden;
  color: #fff;
  gap: min(60px, 5vw);
  -ms-align-items: center;
  align-items: center;
}
.foot-info-inner .comment .in-text {
  margin-top: min(25px, 5vw);
}
.foot-info-inner .comment .att-list {
  font-size: .85em;
  padding-top: .5em;
}
/*SNS*/
.foot-social-area {
  justify-content: flex-end;
  padding-top: min(50px, 10vw);
  padding-bottom: min(40px, 8vw);
}
.foot-social-area dl, .foot-social-area dd {
  -ms-align-items: center;
  align-items: center;
}
.foot-social-area dl {
  gap: min(80px, 8vw);
}
.foot-social-area dt {
  font-size: var(--fs-mid20);
}
.foot-social-area dd {
  gap: min(40px, 4vw);
}
.foot-social-area dd a {
  width: min(42px, 8vw);
}
/*NAV*/
.foot-nav-area {
  padding-top: min(40px, 8vw);
  padding-bottom: min(50px, 10vw);
  display: grid;
  grid-template-columns: min(330px, 38%) auto;
  gap: min(20px, 5vw);
  -ms-align-items: flex-end;
  align-items: flex-end;
}
.foot-nav-area::before {
  content: "";
  width: calc(100% - min(100px, 8vw));
  height: 2px;
  position: absolute;
  background: #262423;
  top: 0;
  left: 50%;
  translate: -50% 0;
}
.foot-nav_about .logo {
  width: 100%;
}
.foot-nav_about .logo svg {
  fill: #fff;
}
.foot-nav_about .comment {
  margin-top: min(30px, 6vw);
}
.foot-nav_about .comment p {
  line-height: calc(30/14);
}
.foot-nav_link {
  display: grid;
  grid-template-columns: auto;
}
.foot-contents-nav {
  justify-content: flex-end;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: min(40px, 8vw);
  gap: min(15px, 3vw) 0;
}
.foot-contents-nav li a {
  transition: color .3s var(--easing);
}
.foot-contents-nav li:not(:last-child) a {
  padding-right: 1em;
}
.foot-contents-nav li:not(:first-child) a {
  padding-left: 1em;
  border-left: 1px solid #fff;
}
@media(hover) {
  .foot-contents-nav li a:hover {
    color: var(--hvr-clr);
  }
}
footer p.copy {
  padding: 20px;
  text-align: center;
  font-size: .875em;
  background: #262423;
}
.grecaptcha-badge { visibility: hidden; }