@charset "UTF-8";
/* 目次===============================
【１】FS専用normalize
【２】Foundation/Utility  - :root変数、ベーススタイル、余白・表示制御
【３】Layout/Responsive  - コンテナ / グリッド / ラッパー
【４】Components  - トップメニューバー / バーガーメニュー / フッター
================================ */

/* ===============================
【１】FS専用 normalize
    - form要素リセット、FS独自の初期化
================================ */
.fs-preview-header{
  z-index: 10000!important;
  position: sticky;
}
#fs_preview_header{
  z-index: 10000!important;
  position: sticky;

}

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5{ line-height: unset;}
html{
  scrollbar-gutter: stable;
}

img, video, svg {
  max-width: 100%;
  display: block;
  height: auto;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
}

a, a:visited, a:hover { color: inherit; text-decoration: none; }

address {
  font-style: normal;
  font-weight: inherit;
}

video:focus,
video:focus-visible {
  outline: none;
}
video::-moz-focus-inner { border: 0; }

#fs-page-error-container{ grid-column: 1 / -1; }


/* ===============================
【２】Base/Foundation
    - :root 変数（色・余白・フォント・ブレークポイント）
    - ベーススタイル（html, body, h系, p, ul/ol, a, img）
    - Utility（margin/padding helper、.u-hide, .u-flex 等）
================================ */

:root {
  /* Breakpoints */
  --bp-sm: 520px;  /* smartphone */
  --bp-md: 769px;  /* tablet */
  --bp-lg: 960px;  /* desktop */

  /* max-width */
  --li-max-full: 100%;
  --li-max-menu: 1200px;
  --li-max-brand: 1160px;
  --li-max-inner: 1090px;

  --li-width-sidebar: 300px;  /* サブメニュー */
  --li-width-gap: 20px;       /* 余白 */
  --li-width-main: calc(var(--li-max-inner) - var(--li-width-sidebar) - var(--li-width-gap)); /* 下層メイン */
  
  /* Brand Color */
  --li-color-main: #000000;
  --li-color-main-font: #000000;
  --li-color-sub-font: #333333;
  --li-color-bg: #ffffff;
  --li-color-base1: #CCCCCC;
  --li-color-base2: #F8F8F8;

  --li-color-accent: #583C27;
  --li-color-surface: #fff;
  --li-color-border: #222222;

  --li-color-sub1: #A74535;
  --li-color-sub1-font: #ffffff;
  --li-color-sub2: #583C27;
  --li-color-sub2-font: #ffffff;

  --li-color-chocone-main: #69E0DC;
  --li-color-chocone-sub: #E4FDFC;
  --li-color-karari-main: #FFEE9C;
  --li-color-karari-sub: #FFFAE3;

  /* Typography */
  --li-font-base: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --li-font-mincho: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --li-font-eng: "Lusitana", serif;
  --li-font-num: Roboto, ui-monospace, sans-serif;
  --li-font-heading: 'Noto Serif JP', serif;

  /* Spacing */
  --li-space-0: 0;         /* 0 */
  --li-space-4: 0.4rem;   /* 4px */
  --li-space-8: 0.8rem;    /* 8px */
  --li-space-12: 1.2rem;    /* 12px */
  --li-space-16: 1.6rem;      /* 16px */
  --li-space-20: 2rem;      /* 20px */
  --li-space-24: 2.4rem;    /* 24px */
  --li-space-32: 3.2rem;      /* 32px */
  --li-space-40: 4rem;      /* 40px */
  --li-space-48: 4.8rem;      /* 48px */
  --li-space-64: 6.4rem;      /* 64px */
  --li-space-96: 9.6rem;      /* 96px */
  --li-space-128: 12.8rem;      /* 128px */
  --li-space-160: 16rem;      /* 160px */
  --li-space-200: 20rem;      /* 200px */

  /* Border radius */
  --li-radius-1: 0.4rem;   /* 4px */
  --li-radius-2: 0.8rem;    /* 8px */
  --li-radius-3: 1.6rem;     /* 16px */
  --li-radius-4: 3.2rem;     /* 32px */
  --li-radius-full: 9999px; /* circle */

  /* shadow, animation, etc */
  --li-shadow-soft: 0 0px 8px rgba(0,0,0,0.15);
  --li-transition-fast: 150ms;
  --li-transition-base: 300ms;
  --li-ease: cubic-bezier(.2,0,.2,1);
}

/* ベース */
/* html { font-size: 100%; scroll-behavior: smooth; } */
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
  font-family: var(--li-font-base);
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--li-color-main-font);
  background: var(--li-color-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.is-mincho { font-family: var(--li-font-mincho); }
.is-eng { font-family: var(--li-font-eng); }
.is-num { font-family: var(--li-font-num); }

/* レスポンシブ表示制御 */
.is-pc { display: none; }
.is-sp { display: block; }
@media (min-width: 769px) {
  .is-pc { display: block; }
  .is-sp { display: none; }
}

/* Hover / Focus */
@media (hover: hover) and (pointer: fine) {
  .hover-dark, .hover-light {
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: border-color .3s ease;
  }
  .hover-dark::after,
  .hover-light::after{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .hover-dark::after{background: rgb(0, 0, 0, 0.15);}
  .hover-light::after{background: rgb(255, 255, 255, 0.5);}
  .hover-dark:hover::after,
  .hover-light:hover::after{
    opacity: 1;
  } 

  .hover-opacity{ opacity: 1;}
  .hover-opacity:hover{ opacity: 0.7; }
  .hover-opacity img { transition: opacity .3s; }
  .hover-opacity:hover img { opacity: 0.7; }

}

/* img */
.imgmax {
  display: block;
  height: auto;
  width: 100%;
}

.cont-flex__imglink{
  display: block;
  overflow: hidden;
    /* border-radius: 10px; */
}
.scale-img-hover{
  width: 100%;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (hover:hover) and (pointer:fine){
  .scale-img-hover:hover{
    transform: scale(1.05);
    transition: all .3s ease;
  }
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* 余白 */
.mt-s { margin-top: var(--li-space-8); }
.mt-m { margin-top: var(--li-space-24); }
.mt-cont-m { margin-top: var(--li-space-32); }
.mt-l { margin-top: var(--li-space-48); }
.mt-cont-section{ margin-top: var(--li-space-96); }
.mt-section { margin-top: var(--li-space-128); }
.mt-max { margin-top: var(--li-space-160); }
.mb-s { margin-bottom: var(--li-space-8); }
.mb-m { margin-bottom: var(--li-space-24); }
.mb-l { margin-bottom: var(--li-space-48); }

@media (min-width: 769px) {
  .mt-s { margin-top: var(--li-space-12); }
  .mt-m { margin-top: var(--li-space-32); }
  .mt-cont-m { margin-top: var(--li-space-40); }
  .mt-l { margin-top: var(--li-space-64); }
  .mt-cont-section { margin-top: var(--li-space-128); }
  .mt-section { margin-top: var(--li-space-160); }
  .mt-max { margin-top: var(--li-space-200); }
  .mb-s { margin-bottom: var(--li-space-12); }
  .mb-m { margin-bottom: var(--li-space-32); }
  .mb-l { margin-bottom: var(--li-space-64); }
}

/* テキスト */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-underline{
  text-decoration: underline;
  color: inherit;
}

.fw-bold { font-weight: 700; }
.hide { display: none !important; }
[hidden] { display:none !important; }

.bg-white{background-color: var(--li-color-bg);}
.bg-gray{background-color: var(--li-color-base1);}
.bg-offwhite{background-color: var(--li-color-base2);}

/* 装飾 */
.-ic-caret-down-b{
  background: url(../img/ic-caret-down.svg) no-repeat right center / 10px 13px;
  padding-right: var(--li-space-24);
}
.-ic-caret-down-w{
  background: url(../img/ic-caret-down-w.svg) no-repeat right bottom / 10px 22px;
  padding-right: var(--li-space-20);
}
.-ic-caret-right-b{
  background: url(../img/ic-caret-right-b.svg) no-repeat right center / 13px 10px;
  padding-right: var(--li-space-24);
}
.-ic-angle-right{
  background: url(../img/ic-angle-right.svg) no-repeat right center / 13px 10px;
  padding-right: var(--li-space-24);
}
.-ic-arrow-right{
  background: url(../img/ic-arrow-right.svg) no-repeat right center / 15px 13px;
  padding-right: var(--li-space-24);
}
.-ic-link{
  background: url(../img/ic-link.svg) no-repeat right center / 15px 13px;
  padding-right: var(--li-space-20);
}
.-ic-mark{
  background: url(../img/ic-mark.svg) no-repeat right center / 15px 15px;
  padding-right: var(--li-space-24);
}
.img-colorfade {
  filter: grayscale(100%) contrast(120%) brightness(90%);
  transition: filter 0.6s ease;
}
.img-colorfade.is-active {
  filter: none;
}


/* ===============================
【３】Layout
    - .l-container / .l-wrapper
    - グリッド、カラムレイアウト
    - レスポンシブブレークポイントでの変化
================================ */

.container       { max-width: var(--li-max-brand); margin-inline: auto; padding-inline: var(--li-space-16); width: 100%;}
.container--menu { max-width: var(--li-max-menu); margin-inline: auto; padding-inline: var(--li-space-16); width: 100%; }
.container--global-menu { max-width: var(--li-max-menu); margin-inline: auto; padding-inline: var(--li-space-16) var(--li-space-8); width: 100%; }
.container--inner,
.container--full { max-width: var(--li-max-full); margin-inline: auto; padding-inline: var(--li-space-0); width: 100%; }

@media (min-width: 769px) {
  .menu_upper > .container--global-menu,
  .menu__title > .container--global-menu { padding-inline: var(--li-space-40) var(--li-space-20); }
  .container--inner{ max-width: var(--li-max-inner); margin-inline: auto; padding-inline: var(--li-space-16) var(--li-space-8); width: 100%; }
}
/* グリッドレイアウト */
.grid { display: grid; width: 100%; }

/* 列数 */
.grid-col2 { grid-template-columns: repeat(2, 1fr); }
.grid-col3 { grid-template-columns: repeat(3, 1fr); }
.grid-col4 { grid-template-columns: repeat(4, 1fr); }

/* 余白 */
.gap-s { gap: var(--li-space-8); }
.gap-m { gap: var(--li-space-24); }
.gap-l { gap: var(--li-space-48); }

.flex { display: flex; }

/* 折り返しあり */
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}
.flex-between{
  display: flex;
  justify-content: space-between;
}
/* 上下中央揃え */
.flex-center { 
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===============================
  ブランドカラー背景色
================================ */
.bg-color,
.category__bg-color{
  width: 100%;
  padding: 80px 0 96px;
}

.bg-color,
.header__bg-color,
.category__bg-color{
  position: relative;
  isolation: isolate;
  background: var(--bg-color);
  color: var(--li-color-main-font);
}
.bg-color::before,
.header__bg-color::before,
.category__bg-color[data-theme="karari"]::before {
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: var(--bg-paper, url("../img/bg-washi-tile.png")) repeat;
  background-size: 1000px 1000px; /* タイルサイズ指定 */
  opacity: 0.3;
  mix-blend-mode: multiply;
}
.bg-color[data-theme="chocone"]::before,
.header__bg-color[data-theme="chocone"]::before,
.category__bg-color[data-theme="chocone"]::before {
  background: none;
}
@media (min-width: 769px) {
.bg-color {padding: 128px 0 160px;}
}

/* ========== テーマCSS（data-theme切替） ========== */
.bg-color[data-theme="no3"] {
  --bg-color: #E2FFCE;
  --bg-paper: url("../img/bg-washi-gray-tile.png")
}
.bg-color[data-theme="none"] {
  --bg-color: var(--li-color-base2);
  --bg-paper: noneurl("../img/bg-washi-gray-tile.png")
}
*[data-theme="karari"] {
  --bg-color: #FDF6E4;
  --bg-paper: url("../img/bg-washi-tile.png");
  --fv-color: #FDF6E4;
  --fv-btn: #fffefa;
  --sidebar-color: #AFA78B;
  --features-color: var(--li-color-karari-sub); 
}
*[data-theme="chocone"] {
  --bg-color: #E4FDFC;
  --bg-paper: url("../img/bg-washi-gray-tile.png");
  --fv-color: var(--li-color-chocone-main);
  /* --fv-btn: #f6fefe; */
  --fv-btn: var(--li-color-chocone-sub);;
  --sidebar-color: var(--li-color-chocone-main);
  --features-color: var(--li-color-chocone-sub);
}
*[data-theme="lilionte"] {
  --bg-color: var(--li-color-base1);
  --bg-paper: url("../img/bg-washi-gray-tile.png");
  --fv-color: var(--li-color-base1);
  --fv-btn: var(--li-color-base1);;
  --sidebar-color: var(--li-color-main);
  --features-color: var(--li-color-base2);
}

/* ===============================
【４】Components（共通部品）
    - ヘッダー/ナビゲーション
    - バーガーメニュー
    - フッター
    - 共通ボタン、カード、フォームUI など
================================ */

/* ===============================
  共通ヘッダー/ナビゲーション
================================ */
header {
  position: fixed;
  top: env(safe-area-inset-top, 0); /* iOS対応 */
  left: 0;
  right: 0;
  z-index: 100;
}
.header__wrapper {
  position: fixed;
  height: fit-content;
  z-index: 100;
  inset: 0 0 auto 0;
  transform: translateY(0);
  opacity: 1;
  transition: 
    transform var(--li-transition-base) var(--li-ease),
    opacity var(--li-transition-base) var(--li-ease);
  will-change: transform, opacity;
  background-color: #ffffff90;
}
.header__wrapper.is-hide {
  transform: translateY(-100%);
  opacity: 0;
}
/* 透明＋白UI */
.header__wrapper.is-fv{
  background: transparent;
  color: #fff;
}
.header__wrapper.is-fv img {
  filter: brightness(0) invert(1); /* ロゴ/アイコンを白化 */
}
/* Solid状態（白背景＋黒UI） */
.header__wrapper.is-solid{
  background: #ffffff80;
  color: #000;
}
.header__wrapper.is-solid img {
  filter: none;
}
/* ヘッドライン */
.header__news {
  margin-bottom: var(--li-space-8);
  border-bottom: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
}
.swiper-slide{
  font-size: 12px;
  transition: opacity .3s;
}
.news-ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.news-ticker .swiper-wrapper {
  align-items: center;
}
.news-ticker .swiper-slide {
  width: auto;
  padding-inline: 16px 50vw;
  white-space: nowrap;
}

.news-ticker a { display: inline-block; }
.news-ticker a:hover { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .news-ticker { animation: none !important; }
}

/* Solid状態（白背景＋黒UI） */
.header__wrapper.is-fv .header__news{
  border-bottom-color: #fff;
}

.header__grid {
  grid-template-columns: auto 1fr auto;
  align-items: end;
  padding: 0 var(--li-space-16) 0.8rem
}
.header__logo {
  grid-column: 1;
  justify-self: start;
  width: auto;
  max-width: 142px;
}
.header__logo img {
  display: block;
  width: auto;
}
.header__actions{
  width: auto;
  max-width: 90px;  
  grid-column: 3;
  margin-bottom: 4px;
}

.header__actions-list{
  display:flex;
  align-items: flex-end;
  gap: 8px;
  margin:0; padding:0; list-style:none;
}
.header__actions-item{
  min-width: 45px;
  text-align:center;
}

.header__action{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 8px;
  padding:0;
  background:none;
  border:0;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
}
.header__action svg{
  display:block;
  width: 28px;
  height:auto;
}
.header__action-label{
  display:block;
  font-size:10px;
  line-height:1;
  margin-top: 2px;
}
.header__action--cart .header__action-label,
.header__action--menu .header__action-label,
.header__action--close .header__action-label{
  margin-top: 0 !important;
}
.header__action--close .header__action-label{ margin-top: 4px }
.header__action--menu img{
  width: auto;
  height: 29px;
  margin: auto;
}
.header__action--close img{
  margin: auto;
  height: 25px;
}
/* .header__action--cart { color: #fff; } */
.header__action--close,
.header__action--menu {
  background: none;
  border: none;
  padding: 0;
  line-height: unset;
  color: inherit;
  cursor: pointer;
  outline: none;
  text-align: center;
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;
}
.header__menu_tojiru{
  display: grid;
  grid-template-columns: 45px;
  justify-content: end;
  position: fixed;
  top: 37px;
  right: min(50px, 5%);
  z-index: 10000;
}

.bar{
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .header__action--menu:hover .bar--mid{
    transform: translateX(-1px) scaleX(.88);
  }
  .header__action--menu:hover .bar--bot{
    transform: translateX(-2px) scaleX(.76);
  }
}
@media (prefers-reduced-motion: reduce){
  .bar{ transition: none; }
}




/* ===============================
  共通ハンバーガーメニュー設定
================================ */
.menu__position{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: fit-content;
  z-index: 1000;
}
.menu_upper{
  padding-top: 107px;
  padding-bottom: 20px;
}
.hm__form form span{
  display: grid;
  grid-template-columns: auto 50px;
  border: 1px solid #ccc;
  background-color: #D9D9D9;
}
.hm__form input{
  height: 60px;
  padding-left: 30px;
  background-color: #D9D9D9;
}
.hm__form form button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: #D9D9D9;
  width: 50px;
  height: 60px;
}
.hm__form .fs-p-searchForm__button::before{ content: ""; }

.gnav__tags{gap: 10px;}

.menu {
  border-top: 1px solid #ddd;
}
a.menu__title,
button.menu__title {
  width: 100%;
  height: 6.4rem;
  color: #000!important;
  text-align: left;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-inline: unset;
}
a.menu__title::after,
button.menu__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #000;
}
.menu__text{
  display: flex;
  align-items: center;
  gap: var(--li-space-8);
  font-size: 1.6rem;
}
.menu__eng{ font-size: 1.28rem; }
.menu__item {
  height: var(--li-space-48);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}

.menu__item a {
  position: relative;
  display: inline-block;
  line-height: var(--li-space-20);
  color: var(--li-color-main-font);
  padding-left: unset;
  opacity: 1;
  transition: 0.3s;
  isolation: isolate;
}
.menu__item a::before{
  content:"";
  position:absolute; top:50%; left:0.16rem;
  width: 10px; height: 10px;
  transform: translate(-6px,-50%) scale(.92);
  opacity: 0;
  background: currentColor;
  -webkit-mask: url("../img/ic-caret-right-b.svg") no-repeat center / contain;
          mask: url("../img/ic-caret-right-b.svg") no-repeat center / contain;
  transition: transform .35s ease, opacity .25s ease;
  z-index: 1;
}
.menu__item small{ font-size: 70%; }
@media (min-width: 769px) {
  .menu__item small{ font-size: 80%; }
}

@media (hover:hover) and (pointer:fine){
  .menu__gridimg{
    max-width: var(--li-max-menu);
    margin-inline: auto;
    padding-inline: var(--li-space-16);
    width: 100%;
  }
  .menu__item a {padding-left: var(--li-space-24);}

  /* Hover/Focus 表示 */
  .menu__item a:hover,
  .menu__item a:focus-visible{
    opacity: 0.7;
  }
  .menu__item a:hover::before,
  .menu__item a:focus-visible::before{
    transform: translate(0,-50%) scale(1);
    opacity: 1;
  }
}
.menu__item:first-child{ margin-top: 0.8rem; }

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .menu__item a, .menu__item a::before, .menu__item a::after{ transition:none !important; }
}

.menu__gridimg{
  display: grid;
  grid-template-columns: auto;
}
.menu__images {
  margin: 1.6rem auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 8px 7px;
  max-width: 430px;
}
.menu__images a {
  position: relative;
  overflow: hidden;
  display: block;
}
.menu__images a:nth-child(1) {
  grid-row: 1 / span 2; 
}
.menu__images a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu__icon {
  display: inline-block;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  pointer-events: none;
}
.menu__submenu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
}
.menu__submenu_img{
  padding-inline: var(--li-space-16) var(--li-space-8); 
}

.menu__gridimg {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
  padding-inline: 0;
}

.menu__title[aria-expanded="true"] + .menu__gridimg,
.menu__title[aria-expanded="true"] + .menu__submenu {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
}

.contact-block {
  padding: var(--li-space-16);
  background: #f8f8f8;
  font-size: 1.6rem;
  line-height: 1;
}
.contact-block p{
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
  margin:40px 0 20px; 
}
.contact__grid{
  display: grid;
  max-width: 400px;
  gap: 1.6rem;
  margin: auto;
  grid-template-columns: auto;
}
.contact__grid-block{
  background-color: #ffffff;
  text-align: center;
  max-width: max(100%, 400px);
  border: 1px solid #000;
  padding: 2.4rem 1rem;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.contact_txt{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2rem;
}
.contact_tell{
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 4.8rem;
}
.contact__grid-block small{
  font-size: 1.2rem;
  font-weight: 500;
}

/* ===============================
  共通ハンバーガーメニューアニメーション
================================ */

/* メニュー開中はページのスクロールを止める */
body.is-menu-open { overflow: hidden; }

#global-nav.menu__position{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fff;
  height: 100dvh;
  width: 80%;
  transform: translateX(125%);
  transition: transform .6s ease, opacity .5s ease;
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 開いた状態 */
#global-nav.menu__position.is-open{
  transform: translateX(25%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

@media (min-width: 400px) {
  .menu__eng{ font-size: 1.6rem; }
  a.menu__title,
  button.menu__title {
    font-weight: 700;
    font-size: 2.2rem;
  }
}
@media (min-width: 769px) {
  #global-nav.menu__position{ width: 50%; transform: translateX(200%); }
  #global-nav.menu__position.is-open{ transform: translateX(100%); }

  .menu__text{ font-size: 1.8rem; gap: var(--li-space-16); }
  .menu__images { height: 198px; }
}

/* 共通ボタン設定 */
.btn {
  font-family: var(--li-font-base);
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.6;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: auto;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, font-weight 0.3s, border-color 0.3s;
  text-decoration: none;
}

.btn-lg {
  height: 7.2rem;          /* 72px */
  padding: 2.3rem 5rem; /* 23px 50px */
  border: 0.1rem solid #000; /* 1px */
  position: relative;
}
.btn-md {
  height: 5.6rem;          /* 56px */
  padding: 0.7rem 5rem; /* 7px 50px */
  position: relative;
}
.btn-sm {
  height: 4rem;          /* 40px */
  padding: 0 0.8rem;
  position: relative;
  transition: opacity .3s;
}
.btn-ss{
  font-size: unset;
  height: 1.6rem;
  padding: 0 0.4rem;
  position: relative;
  transition: opacity .3s;
}
.btn-sm::after{
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000000;
  transform: scale(1, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: 1;
}
.btn-ss::after{
  position: absolute;
  bottom: 0;
  right: 20px;
  content: '';
  width: calc(100% - 20px);
  height: 1px;
  background: #000000;
  transform: scale(1, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: 1;
}

/* .btn-sm .-ic-arrow-right:hover { margin-left: 4px; } */
.btn-ss:hover,.btn-sm:hover { opacity: 0.7; }
.btn-ss:hover::after, .btn-sm:hover::after { transform: scale(0, 1); }




/* 背景色反転 */
.hover-anim2 {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  background-color: #fff;
  color: #000000;
  transition: background-color .3s ease-in-out;
}
.hover-anim2:hover {
   background-color: #333; 
  }
.hover-anim2 span{
  filter: none;
  transition: filter .4s ease;
}
.hover-anim2:hover span{
  filter: brightness(0) invert(1);    
}

.btn-radius{
  height: 7.5rem;
  padding: 0.2rem 3.2rem;
  border: 0.1rem solid #000;
  background-color: var(--li-color-base1);
  border-radius: 34px;
}

/* メニュータブボタン */
.btn-tab {
  line-height: 3rem;
  height: 3.2rem;
  padding: 0 1.2rem;
  border: 0.1rem solid #000;
  width: fit-content;
  background-color: #fff;
  border-radius: 2rem;
  text-align: center;
  transition: .3s;
  font-size: 1.4rem;
}
.btn-tab:hover {
  background-color: var(--li-color-base1);
}

/* ===============================
  セクション見出し
================================ */
.top__sectitle{
  font-size: 1.6rem;
  font-weight: 700;
}
.sec__title_eng{
  font-family: var(--li-font-eng);
  font-weight: 700;
  font-size: 4rem;
  letter-spacing: 0.05em;
  white-space: wrap;
}
@media (min-width: 769px) {
.sec__title_eng{font-size: 6rem;}
}
.sec__title_jp{
  display: block;
}

/* ===============================
  リリオンテブランドメッセージ
================================ */
.intro{
  display:grid;
  grid-template-columns:1fr;
  align-items: start;
  gap: var(--li-space-48);
  margin-top: 48px;
}
.intro__header{
  max-width: 270px;
  margin: auto;
}
.intro__media{
  justify-self: end;
  text-align: end;
}
.intro__figure{
  position: relative;
  display: inline-block;
  width: 78%;
  height: auto;
} 

.intro__body{
  margin-top: 160px;
  margin-inline: auto;
}
.intro__copy{
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.8;
  padding: 0 var(--li-space-16);
  text-align: center;
}
.intro__copy::before{
  content: "";
  position: absolute;
  top: 300px;
  left: -20%;
  width: 250px;
  height: 250px;
  background: url(../img/lilionte_brandimg_bg.png) no-repeat center/cover;
  z-index: -1;
}

.intro__cta{
  margin-top: var(--li-space-64);
  text-align: center;
}

@media (min-width: 769px) {
  .intro__body{
    margin-top: 128px;  
  }
  .intro__header{
    max-width: 334px;
    margin: unset;
  }
  .intro__figure{
    width: 100%;
  }
  .intro__copy{
    font-size: 1.75rem;
    padding: unset;
    padding-top: 200px;
  }
  .intro__copy::before{
    left: 15%;
    width: 350px;
  }
}
@media (min-width: 1020px) {
  .intro__copy::before{ left: 24%; }
}
.intro__clip{
  position: relative;
  overflow: hidden;
  aspect-ratio: 400 / 555;
  width: 100%;
}
.intro__clip > img {
  width: 100%;
  height: 105%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}
intro.is-inview .intro__clip > img {
  animation: introFloatUp 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes introFloatUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-28px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro.is-inview .intro__clip > img {
    animation: none;
    transform: translateY(-16px);
  }
}



/* ===============================
  ナビゲーションカード
================================ */
.navcards{
  flex-direction: column;
  max-width: 960px;
  width: 100%;
  margin-inline: auto;
}
.navcard{
  max-width: 500px;
  width: 100%;
  align-self: flex-start;
}
.navcard__img{
  overflow: hidden;
  display: block;
  width: 100%;
  margin: auto;
}
.navcard__body{
  margin:1rem auto 0;
}
.navcard__title{
  font-weight:700;
  font-size: 1.8rem;
  letter-spacing:.05em;
}
@media (min-width: 520px) {
  .navcards{ flex-direction: row; }
  .navcard{ width: 32%; }
  .navcard__title{ font-size:1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .navcard{ transition: none; }
}

/* ===============================
  共用ページング（スワイプ／ドットタブ）
================================ */
.cardsPager{ position: relative; }
.cardsPager__list{
  margin: 0;
  padding: 0;
}
.cardsPager__list{ display: block; }
@media (min-width: 769px){
  .cardsPager__list{ display: grid; }
}

/* 中身のカードの共通CSS */
.cardsPager .c-card{
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: #fff;
}
.cardsPager .c-card__thumb img{ display:block; width:100%; height:auto; }

/* ページネーション */
.cardsPager .cardsPager__pagination.swiper-pagination{
  position: static !important;
  inset: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: min(30%, 200px);
  padding-top: 3.2rem;
  min-height: 3.2rem;
  z-index: 1;
  margin: auto;
}
.cardsPager .swiper-pagination-bullet{
  width: auto;
  flex: 1 1 0;
  height: 3px;
  margin: 0 !important;
  background: #d9d9d9;
  opacity: 1 !important;
  transform: translateZ(0);
  cursor: pointer;
  transition: background-color .25s, transform .25s;
}

.cardsPager .swiper-pagination-bullet-active{
  background: #333;
  transform: scaleY(1.15);
}


/* ===============================
  フッター
================================ */
/* フッターSNS */
.ft-social{
  margin-top: var(--li-space-96);
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  align-items: center;
}
.ft-bg{
  position: relative;
  width: 100%;
  background-color: var(--li-color-base2);
  padding-top: calc(54px / 2);
}
.ft-bg::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: calc(-1 * 54px / 2); /* 上にせり上げる量 */
  height: calc(54px / 2);     /* 覆う高さ = SNSの半分 */
  background: var(--li-color-base2);
  z-index: -1;
}

.ft-link-grid{
  grid-template-columns: 1fr;
  gap: 9.6rem;
}
#global-footer-nav .menu__text{ gap: var(--li-space-24); }
#global-footer-nav button.menu__title { font-size: 2.2rem; }
#global-footer-nav .menu{ border: none; }
#global-footer-nav .menu__images{ display: none; }

.ft-brand{
  order: 1;
  width: 100%;
  max-width: 400px;
  justify-self:center;
}
.ft-brand img{
  margin: auto;
  max-width: min(230px, 80%);
}
.ft-nav{
  order: 2;
  width: 100%;
  max-width: 768px;
}
.ft-brand__addr{
  margin-top: 8rem;
}
.ft-brand__addr + .ft-brand__addr{
  margin-top: 3rem;
}
.ft-brand__addr p{margin:0;}
.ft-contact__cta{text-align:center;}
.ft-contact__cta .btn-skew{background-color: #fff;}
.ft-contact__cta .btn-lg{
  height: 5.6rem;
  padding: 2.3rem 4rem;
}

.addr__head {
  display: flex;
}
.addr__head::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
  margin-right: 5px;
  margin-top: 11px;
}
@media screen and (min-width: 769px) {
  .addr__head::before {
    margin-right: 10px;
    margin-top: 9px;
  }
}
.addr__postal{letter-spacing:.04em}
.addr__street{margin-top:0.24rem}
.addr__box{
  margin-top: 3rem;
  padding-left: var(--li-space-16);
}
.addr__meta{
  display:grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  margin: 8px 0 8px 8px;
  font-size: 1.6rem;
}
.addr__row{display:contents}
.addr__meta dt{
  color:#666;
  min-width:5.5em;
  font-weight:600;
}
.addr__meta dd{
  margin:0;
}
.addr__tell{font-size: 2.4rem;}
.addr__meta a{
  color:inherit;
  text-underline-offset: .15em;
}

@media (min-width: 769px) {
  .ft-link-grid{
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
  .ft-nav{ max-width: 500px; }
  .ft-brand{ justify-self:end; }
  .ft-brand img{ margin: 0 auto; max-width: 300px;}
  #global-footer-nav .menu__text{ gap: var(--li-space-12); }
  #global-footer-nav button.menu__title { font-size: 1.8rem; }
}

@media (min-width: 1029px) {
  .ft-link-grid{ gap: 9.6rem; }
  #global-footer-nav .menu__text{ gap: var(--li-space-24); }
  #global-footer-nav button.menu__title { font-size: 2.2rem; }
}

.ft-legal__nav{ margin-bottom: 12px; }
.ft-legal__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  gap: 1.6rem;
}
.ft-social__link{
  display: block;
  width: 100%;
  margin: auto;
  background-color: var(--li-color-bg);
}
.ft-social__link img{
  max-height: 50px;
  padding: 12px 6px;
  margin-inline: auto;
}
.ft-cta,
.ft-social__link img,
.ft-legal__item a{ opacity: 1; transition: .3s;}
.ft-cta:hover,
.ft-social__link img:hover,
.ft-legal__item a:hover{ opacity: 0.7;}

.copyright{
  display: block;
  padding: 26px 0px;
  font-size: 1.2rem;
  line-height: 175%;
  color: #625e54;
  margin-bottom: 0;
  margin-left: auto;
  text-align: center;
}
@media (min-width: 769px) {
  .ft-legal__list{ justify-content: start; gap: 2rem;}
  .copyright{ text-align: left; }
}

.pagetop-area{
  text-align: end;
}

.pagetop-btn {
  width: 30px;
  height: 30px;
  position: relative;
  background: #FFF;
  color: #fff;
  border-radius: 50%;
  border: 1px solid #000;
  background-image:url("../img/ic-arrow-up.svg"); 
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
}


.footer__pagetop {
  position: relative;
  width: 75px;
  margin-inline: auto 40px;
}
.footer__pagetop button {
  --line-h: 130px;
  --s: 1; 
  position: relative;
  border: none;
  background: none;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 130px;
  font-size: 1.6rem;
  letter-spacing: .12em;
  padding-right: 1.6rem;
  cursor: pointer;
  text-align: left;
  color: #333;
  transition: color .25s cubic-bezier(0,0.55,0.45,1);
}
.footer__pagetop button::before {
  content:"";
  position:absolute;
  right:0;
  bottom:-1em;
  width:1px;
  height:var(--line-h);
  background:#aeaeae;
  transform-origin:top center;
  transform:scaleY(var(--s));
  transition:transform .35s ease-in-out;
}
.footer__pagetop button::after {
  content: "";
  position: absolute;
  right: -11px;
  bottom: calc(100% - 44px);
  width: 23px;
  height: 23px;
  border-top: 1px solid #aeaeae;
  transform: rotate(-45deg);
}
.footer__pagetop button:hover{
  --s:.7;
  color:rgba(51,51,51,.5);
}