/* font */
@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap");

/* -------------------------------------------
 ベース
------------------------------------------- */

html {
 scroll-behavior:smooth;
 scrollbar-gutter:stable;
}

html:has(
    input[id$="-main"]:checked,
    input[id$="-info"]:checked,
    input[id$="-terms"]:checked
  )
  #header,
html:has(input[id$="menu-toggle"]:checked) #header {
 display:none;
}

/* 変数 */
:root {
 --font-base:"LINE Seed JP", sans-serif;
 --font-sub:"LINE Seed JP", sans-serif;
 --font-main-ttl:"LINE Seed JP", sans-serif;
 --font-btn:"LINE Seed JP", sans-serif;
 --c-theme:#000000;
 --c-tnav-item-text:#181d53;
 --c-theme-nav-item-icon-filter:none;
}

/* -------------------------------------------
 base
------------------------------------------- */
.base {
 clip-path:inset(0);
 position:relative;
 max-width:none;
 background:transparent;

 @media (max-width: 428px) {
  padding-bottom:0;
 }

 @media (max-width: 375px) {
  padding-bottom:0;
 }
}
body:has(input[id^="modal-open--"]:checked) .base {
 clip-path:none;
}

/* bg.webp は各ページ固有のため、shop/online の style-common.css で定義 */
.base::before {
 display:block;
 position:fixed;
 top:0;
 left:0;
 z-index:-1;
 width:100%;
 height:100vh;
 height:100dvh;
 content:"";
}

/* -------------------------------------------
 side-wrap
------------------------------------------- */

.side-wrap {
 display:grid;
 align-items:center;
 position:fixed;
 top:0;
 left:0;
 width:100%;

 grid-template-columns:minmax(400px, 1fr) 740px 1fr;
}

.side-wrap__left,
.side-wrap__right {
 height:100vh;
 height:100dvh;
 box-sizing:border-box;

 padding-inline:8%;
 padding-block:8vh;
 @media (max-width: 1000px) {
  height:0;

  padding-block:0;
 }
}

.side-wrap__left {
 height:calc(100dvh - 64px);
 margin-top:64px;
 overflow-y:auto;

 padding-block:1dvh;
 @media screen and (max-width: 428px) {
  height:calc(100dvh - 48px);
  margin-top:48px;
 }
}

.side-wrap__right {
 max-width:62vh;
 margin:auto;

 padding-block:4rem;
}

.side-wrap__left {
 max-width:700px;
}

.side-wrap__left-img,
.side-wrap__right-img {
 display:block;
 height:100%;

 object-fit:contain;
 margin-inline:auto;
}

.side-wrap__left-img {
 height:auto;
}

@media (max-width: 1024px) {
 .side-wrap {
  display:flex;
  position:absolute;
 }
}

/* nav Items Section */
/* チェックボックスを非表示 */
#menu-toggle {
 display:none;
}

/* ハンバーガーメニューボタン */
.hamburger-btn {
 display:none;
 flex-direction:row;
 justify-content:center;
 align-items:center;
 position:fixed;
 right:50%;
 bottom:6px;
 z-index:200;
 transform:translate(50%, 0);
 width:90%;
 height:50px;
 margin:auto;
 border:none;
 border-radius:8px;
 box-shadow:0 2px 8px rgba(0, 0, 0, .15);
 background:#ea5514;
 cursor:pointer;

 gap:6px;
}

.hamburger-btn--deco {
 display:flex;
 flex-direction:column;
 align-items:center;

 gap:4px;
}

.hamburger-btn--deco span {
 display:block;
 width:20px;
 height:3px;
 border-radius:2px;
 background-color:#ffffff;
 transition:all .3s ease;
}

.hamburger-btn-text {
 color:#ffffff;
 font-style:normal;
 font-weight:800;
 font-size:1rem;
 line-height:normal;
 font-family:"Noto Sans JP";

 leading-trim:both;
 text-edge:cap;
}

/* チェックされた時のハンバーガーアイコン */
#menu-toggle:checked ~ .hamburger-btn--deco span:nth-child(1) {
 transform:translateY(9px) rotate(45deg);
}

#menu-toggle:checked ~ .hamburger-btn--deco span:nth-child(2) {
 opacity:0;
}

#menu-toggle:checked ~ .hamburger-btn--deco span:nth-child(3) {
 transform:translateY(-9px) rotate(-45deg);
}

/* body全体でモーダルが開いているかチェック */
body:has(input[id^="modal-open--"]:checked) .hamburger-btn {
 display:none !important;
 visibility:hidden !important;
 opacity:0 !important;

 pointer-events:none !important;
}

/* モーダルが開いている時はheaderも隠す */
body:has(input[id^="modal-open--"]:checked) .header,
body:has(input[id^="modal-open--"]:checked) #header {
 display:none !important;
 visibility:hidden !important;
 opacity:0 !important;

 pointer-events:none !important;
}

/* ナビゲーションコンテナ */

.nav {
 display:flex;
 flex-direction:column;
 align-items:center;
 max-width:450px;
 margin:auto;

 gap:1rem;
}

.nav-section {
 display:flex;
 flex-direction:column;
 width:100%;
 max-width:340px;

 gap:10px;
}

.nav .b-goodsCatalogCard {
 padding:0 16px;
}

.nav-item {
 display:flex;
 align-items:center;
 padding:8px 16px;
 border:solid 1px #181d53;
 border-radius:999px;
 background:#ffffff;
 text-decoration:none;
 transition:transform .2s ease,
 box-shadow .2s ease;

 gap:10px;
}

/* ページ内リンククリックでメニューを閉じる */
.nav-item[href^="#"] {
 position:relative;
}

.nav-item[href^="#"]::before {
 position:absolute;
 content:"";

 inset:0;
}

.nav-item[href^="#"]:target ~ #menu-toggle {
 display:none;
}

.nav-item:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, .1);
}

.nav-item__icon {
 display:flex;
 flex-shrink:0;
 justify-content:center;
 align-items:center;
 width:20px;
 height:23px;

 filter:var(--c-theme-nav-item-icon-filter);
}

.nav-item__icon svg {
 width:100%;
 height:100%;
}

.nav-item__text {
 flex:1;
 color:var(--c-theme-nav-item-text);
 font-weight:800;
 font-size:16px;
 line-height:normal;
 font-family:"Noto Sans JP", sans-serif;
}

.schedule-btn,
.schedule-btn--footer {
 display:flex;
 align-items:center;
 padding:8px 30px;
 border-radius:999px;
 background:#e95550;
 text-decoration:none;
 cursor:pointer;
 transition:transform .2s ease,
 box-shadow .2s ease;

 gap:10px;
}

.schedule-btn--footer {
 width:fit-content;
 margin:auto;
}

/* ページ内リンククリックでメニューを閉じる */
.schedule-btn[href^="#"],
.schedule-btn--footer[href^="#"] {
 position:relative;
}

.schedule-btn:hover,
.schedule-btn--footer:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, .1);
}

.schedule-btn__icon,
.schedule-btn--footer__icon {
 display:flex;
 flex-shrink:0;
 justify-content:center;
 align-items:center;
 width:20px;
 height:23px;
}

.schedule-btn__text {
 flex:1;
 color:#ffffff;
 font-weight:700;
 font-size:16px;
 line-height:normal;
}

.social-section {
 display:flex;
 justify-content:center;
 padding:0 16px;

 gap:10px;
 margin-block:0;
}

.social-btn {
 display:flex;
 justify-content:center;
 align-items:center;
 padding:8px 16px;
 border:2px solid #1a1a1a;
 border-radius:1100px;
 background-color:#1a1a1a;
 text-decoration:none;
 cursor:pointer;
 transition:transform .2s ease,
 box-shadow .2s ease;

 gap:6px;
}

.social-btn:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, .1);
}

.social-btn__icon {
 width:14px;
 height:14px;
}

.social-btn__text {
 color:white;
 font-weight:bold;
 font-size:13px;
 line-height:1;
}

.images-section {
 display:flex;
 flex-direction:column;
 align-items:center;
 padding:0 16px;

 gap:8px;
}

.image-container {
 width:100%;
 overflow:hidden;
 border-radius:8px;
 background-color:#e0e0e0;
}

.images-logo {
 max-width:260px;
}

.image-container--large {
 transition:transform .2s ease,
 box-shadow .2s ease;

 aspect-ratio:700 / 200;
}

.image-container--large:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, .1);
}

.image-container--fair {
 box-shadow:0 4px 4px rgba(0, 0, 0, .2);

 aspect-ratio:1560 / 446;
}

.image-container img {
 display:block;
 width:100%;
 max-width:300px;
 height:100%;

 object-fit:cover;
}

.image-placeholder {
 display:flex;
 justify-content:center;
 align-items:center;
 width:100%;
 height:80px;
 border-radius:8px;
 background-color:#999999;
 color:white;
 font-weight:800;
 font-size:24px;
 text-decoration:none;
}

/* オーバーレイ */
.nav-overlay {
 display:none;
}

/* モバイル対応 */
@media (max-width: 1000px) {
 .hamburger-btn {
  display:flex;
 }

 .nav {
  position:fixed;
  top:100%;
  left:0;
  z-index:150;
  width:100%;
  height:100vh;
  padding:140px 0 80px;
  overflow-y:auto;
  background:var(--c-theme);
  transition:top .3s ease;
 }

 /* チェックされた時にメニューを表示 */
 #menu-toggle:checked ~ .nav {
  bottom:0;
 }

 /* オーバーレイ */
 .nav-overlay {
  visibility:hidden;
  opacity:0;
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, .5);
  cursor:pointer;
  transition:opacity .3s ease,
  visibility .3s ease;
 }

 #menu-toggle:checked ~ .nav-overlay {
  display:block;
  visibility:visible;
  opacity:1;
 }

 /* メニューが開いている時はbodyのスクロールを防止 */
 #menu-toggle:checked ~ * {
  overflow:auto;
 }
}

/* 閉じるボタン */
.nav-close-btn {
 display:none;
}

.side-wrap__right {
 position:relative;
}

.side-wrap__right-cmk50th {
 position:absolute;
 top:8%;
 left:10%;
 width:8rem;
}

/* モバイル対応 */
@media (max-width: 1024px) {
 .hamburger-btn {
  display:flex;
 }

 /* side-wrapは非表示 */
 .side-wrap__right {
  display:none;
 }

 /* navをモバイル用に全画面表示 */
 .nav {
  position:fixed;
  top:100%;
  left:0;
  z-index:150;
  width:100%;
  height:100vh;
  padding:16px 0 80px;
  overflow-y:auto;
  background-color:var(--c-theme);
  transition:top .3s ease;
 }

 /* チェックされた時にメニューを表示 */
 #menu-toggle:checked ~ * .nav,
 #menu-toggle:checked ~ .nav {
  top:0;

  padding-inline:1rem;
 }

 /* 閉じるボタンを画面下部に固定 */
 .nav-close-btn {
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  position:fixed;
  bottom:0;
  left:0;
  z-index:151;
  width:100%;
  padding:16px;
  border:none;
  box-shadow:0 -2px 10px rgba(0, 0, 0, .1);
  background-color:var(--c-theme--btn);
  color:#ffffff;
  font-weight:700;
  font-size:18px;
  cursor:pointer;
  transition:opacity .3s ease;

  gap:8px;
  pointer-events:none;
 }

 #menu-toggle:checked ~ * .nav-close-btn,
 #menu-toggle:checked ~ .nav-close-btn {
  opacity:1;

  pointer-events:auto;
 }

 .nav-close-btn::before {
  font-size:28px;
  line-height:1;
  content:"×";
 }

 /* ハンバーガーボタンをメニュー開いている時は隠す */
 #menu-toggle:checked + .hamburger-btn {
  display:none;
 }

 /* bodyのスクロール防止（メニューが開いている時） */
 body:has(#menu-toggle:checked) {
  position:fixed;
  width:100%;
  overflow:hidden;
 }
}

/* -------------------------------------------
 main-container
------------------------------------------- */
main.main-container {
 position:relative;
 z-index:1;
 max-width:740px;
 margin-right:auto;
 margin-left:clamp(400px, 27vw, 40rem);
 padding-bottom:3rem;

 @media (max-width: 1024px) {
  margin:auto;
  padding-top:47px;
 }

 @media (min-width: 1600px) {
  margin:4rem auto 0;
 }
}

main.main-container::before {
 display:block;
 position:fixed;
 top:0;
 left:calc((100% - 740px) / 2);
 z-index:-1;
 width:740px;
 height:100vh;
 height:100dvh;
 background:no-repeat top center/cover url();
 content:"";
}

/* -------------------------------------------
 main-section
------------------------------------------- */

.main-section--padding-bottom {
 padding-bottom:50px;
}

.main-section__inner {
 display:flex;
 flex-direction:column;
 width:95%;
 max-width:700px;
 margin:40px auto;
 background-color:#fffdc9;

 padding-block:24px;
 gap:34px;
}

.main-section__lead {
 display:flex;
 flex-direction:column;

 gap:8px;
}

.main-section__ttl {
 display:flex;
 justify-content:center;
 align-items:center;
 min-height:1.6em;
 color:#358b42;
 font-weight:800;
 font-size:clamp(
 20px,
 calc(20px + (34 - 20) * (100vw - 375px) / (700 - 375)),
 34px
 );
 line-height:1.5;
 font-family:var(--font-main-ttl);
 text-align:center;
}

.main-section__text-box {
 font-weight:350;
 font-size:clamp(
 16px,
 calc(16px + (24 - 16) * (100vw - 375px) / (700 - 375)),
 24px
 );
 line-height:1.3;
 font-family:var(--font-base);
 text-align:center;
}

.main-section__text:not(:last-child) {
 padding-bottom:1em;
}

@media (max-width: 768px) {
 .main-section__ttl {
  max-width:95%;
 }
 .main-section__text-box {
  max-width:95%;
 }

 .main-section__inner {
  padding-block:30px;
 }
}

/* -------------------------------------------
 btn
------------------------------------------- */
.btn {
 display:inline-block;
 position:relative;
 width:12rem;
 border-radius:100rem;
 color:var(--c-main-text);
 font-weight:700;
 line-height:130%;
 text-align:center;
 cursor:pointer;
 transition:transform .2s ease,
 box-shadow .2s ease;

 padding-block:.4rem;
}

.btn:hover {
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, .1);
}

.btn-link {
 background:#f4e417;
}

.btn-link::after {
 display:inline-block;
 position:absolute;
 top:35%;
 right:3%;
 width:18px;
 height:18px;
 margin:-3px 5px 0 0;
 background:url(../images/arrow-right.svg) no-repeat;
 background-size:contain;
 vertical-align:middle;
 content:"";
}

.btn--buy {
 border:solid 1px;
 background:#ffffff;
 color:var(--c-main-text);
}

/* ---  ------------------------------ */
.js-hidden {
 display:none;
}

/* -------------------------------------------
 レスポンシブ対応
------------------------------------------- */

@media (min-width: 769px) {
 .sp {
  display:none;
 }
}

@media (max-width: 768px) {
 .pc {
  display:none;
 }
}