@charset "UTF-8";
/*
Roc Grotesk Wide Thin
無：800&900

Zen Kaku Gothic New
無：200&600
*/
::selection {
  background: #2263af;
  color: #000; }

/*
=================================================
	フッター
=================================================
*/
footer {
  position: relative;
  z-index: 1;
  background: #2263af;
  padding: 0 60px 20px;
  margin: 0 auto 0;
  color: #ffffff;
  /*
  -------------------------------------------------
  	Instagram（半円＋アーチ文字）
  	背景は敷かず、背後の#h-oの方眼背景が透けて見える状態にする
  -------------------------------------------------
  */
  /*
  -------------------------------------------------
  	フィードグリッド（ダミー10枚・将来実投稿に差し替え予定）
  	footerの背景色(青)がgapから透けて見えることで、グリッド線として機能する
  -------------------------------------------------
  */
  /*
  -------------------------------------------------
  	会社情報（青背景。footer自体の背景をそのまま使用）
  -------------------------------------------------
  */ }
  @media screen and (max-width: 768px) {
    footer {
      padding: 0 20px 20px; } }
 
  footer .footer-insta {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 200px;
    margin: 0 -60px; }
    @media screen and (max-width: 768px) {
      footer .footer-insta {
        margin: 0 -20px; } }
    @media screen and (max-width: 480px) {
      footer .footer-insta {
        height: 150px; } }
  footer .footer-insta-link {
    position: relative;
    display: block;
    width: 150px;
    height: 75px; }
    @media screen and (max-width: 480px) {
      footer .footer-insta-link {
        width: 118px;
        height: 59px; } }
    footer .footer-insta-link:hover .footer-insta-dome img {
      opacity: 0.75; }
  footer .footer-insta-arch {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: block;
    width: 180px;
    height: auto;
    overflow: visible; }
    @media screen and (max-width: 480px) {
      footer .footer-insta-arch {
        width: 142px; } }
  footer .footer-insta-arch-txt {
    font-family: din-2014, sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.5625rem;
    fill: #2263af;
    letter-spacing: 0.02em; }
  footer .footer-insta-dome {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 75px 75px 0 0;
    background-color: #2263af; }
    @media screen and (max-width: 480px) {
      footer .footer-insta-dome {
        border-radius: 59px 59px 0 0; } }
    footer .footer-insta-dome img {
      width: 34px;
      height: 34px;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      margin-top: 10px; }
      @media screen and (max-width: 480px) {
        footer .footer-insta-dome img {
          width: 27px;
          height: 27px; } }
  footer .footer-feed {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin: 6px -54px 0; }
    @media screen and (max-width: 768px) {
      footer .footer-feed {
        grid-template-columns: repeat(4, 1fr);
        margin: 6px -14px 0; }
        footer .footer-feed li:nth-child(n+9) {
          display: none; } }
    @media screen and (max-width: 480px) {
      footer .footer-feed {
        grid-template-columns: repeat(3, 1fr); }
        footer .footer-feed li:nth-child(n+7) {
          display: none; } }
    footer .footer-feed li {
      overflow: hidden; }
    footer .footer-feed img {
      display: block;
      width: 100%;
      height: auto; }
  footer .footer-brand {
    text-align: center;
    padding-top: 80px; }
    @media screen and (max-width: 768px) {
      footer .footer-brand {
        padding-top: 50px; } }
  footer .footer-brand-logo {
    display: inline-block;
    width: 230px;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    @media screen and (max-width: 480px) {
      footer .footer-brand-logo {
        width: 170px; } }
    footer .footer-brand-logo:hover {
      opacity: 0.75; }
    footer .footer-brand-logo img {
      display: block;
      width: 100%;
      height: auto; }
  footer .footer-brand-info {
    margin-top: 34px;
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-size: 0.8125rem;
    line-height: 2;
    letter-spacing: 0.03em; }
    footer .footer-brand-info span {
      font-size: 1.375rem;
      font-weight: 300; }
  footer .footer-brand-list {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    margin-top: 44px; }
    @media screen and (max-width: 480px) {
      footer .footer-brand-list {
        column-gap: 24px; } }
    footer .footer-brand-list a {
      display: block;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
      footer .footer-brand-list a:hover {
        opacity: 0.75; }
    footer .footer-brand-list img {
      display: block;
      height: 44px;
      width: auto; }
      @media screen and (max-width: 480px) {
        footer .footer-brand-list img {
          height: 34px; } }
  footer #copylight {
    text-align: center;
    font-size: 0.625rem;
    font-family: din-2014, sans-serif;
    font-weight: 600;
    margin-top: 60px; }
    @media screen and (max-width: 768px) {
      footer #copylight {
        margin-top: 40px; } }

/*
=================================================
	共通部分
=================================================
*/
html {
  overflow-x: hidden; }

body {
  font-family: source-han-sans-cjk-ja, sans-serif;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  width: 100%;
  overflow-x: hidden;
  background-color: white; }
  body img {
    max-width: 100%;
    height: auto; }

/*
=================================================
テキストリンク ホバーアニメーション（全ページ共通）
=================================================
*/
a {
  color: inherit;
  text-decoration: none; }
  a.is-hover .js-hover-block:not(.js-hover-block-clone) .js-hover-char {
    transform: translate3d(0, -120%, 0); }
  a.is-hover .js-hover-block-clone .js-hover-char {
    transform: translate3d(0, 0, 0); }

.js-hover-txt {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom; }
  .js-hover-txt.is-reset .js-hover-char {
    transition: none !important; }

.js-hover-block {
  display: block;
  grid-column: 1 / 2;
  grid-row: 1 / 2; }

.js-hover-char {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

.js-hover-block-clone .js-hover-char {
  transform: translate3d(0, 110%, 0); }

.js-hover-char:nth-child(1) {
  transition-delay: 0ms; }

.js-hover-char:nth-child(2) {
  transition-delay: 25ms; }

.js-hover-char:nth-child(3) {
  transition-delay: 50ms; }

.js-hover-char:nth-child(4) {
  transition-delay: 75ms; }

.js-hover-char:nth-child(5) {
  transition-delay: 100ms; }

.js-hover-char:nth-child(6) {
  transition-delay: 125ms; }

.js-hover-char:nth-child(7) {
  transition-delay: 150ms; }

.js-hover-char:nth-child(8) {
  transition-delay: 175ms; }

.js-hover-char:nth-child(9) {
  transition-delay: 200ms; }

.js-hover-char:nth-child(10) {
  transition-delay: 225ms; }

.js-hover-char:nth-child(11) {
  transition-delay: 250ms; }

.js-hover-char:nth-child(12) {
  transition-delay: 275ms; }

.js-hover-char:nth-child(13) {
  transition-delay: 300ms; }

.js-hover-char:nth-child(14) {
  transition-delay: 325ms; }

.js-hover-char:nth-child(15) {
  transition-delay: 350ms; }

.js-hover-char:nth-child(16) {
  transition-delay: 375ms; }

.js-hover-char:nth-child(17) {
  transition-delay: 400ms; }

.js-hover-char:nth-child(18) {
  transition-delay: 425ms; }

.js-hover-char:nth-child(19) {
  transition-delay: 450ms; }

.js-hover-char:nth-child(20) {
  transition-delay: 475ms; }

.js-hover-char:nth-child(21) {
  transition-delay: 500ms; }

.js-hover-char:nth-child(22) {
  transition-delay: 525ms; }

.js-hover-char:nth-child(23) {
  transition-delay: 550ms; }

.js-hover-char:nth-child(24) {
  transition-delay: 575ms; }

.js-hover-char:nth-child(25) {
  transition-delay: 600ms; }

.js-hover-char:nth-child(26) {
  transition-delay: 625ms; }

.js-hover-char:nth-child(27) {
  transition-delay: 650ms; }

.js-hover-char:nth-child(28) {
  transition-delay: 675ms; }

.js-hover-char:nth-child(29) {
  transition-delay: 700ms; }

.js-hover-char:nth-child(30) {
  transition-delay: 725ms; }

.js-hover-char:nth-child(31) {
  transition-delay: 750ms; }

.js-hover-char:nth-child(32) {
  transition-delay: 775ms; }

.js-hover-char:nth-child(33) {
  transition-delay: 800ms; }

.js-hover-char:nth-child(34) {
  transition-delay: 825ms; }

.js-hover-char:nth-child(35) {
  transition-delay: 850ms; }

.js-hover-char:nth-child(36) {
  transition-delay: 875ms; }

.js-hover-char:nth-child(37) {
  transition-delay: 900ms; }

.js-hover-char:nth-child(38) {
  transition-delay: 925ms; }

.js-hover-char:nth-child(39) {
  transition-delay: 950ms; }

.js-hover-char:nth-child(40) {
  transition-delay: 975ms; }

/*
=================================================
	ヘッダー（スクロール後に中央出現する固定ヘッダー）
	※ ヒーロー(.mv/.mv-logo/.mv-navi)はトップページ専用のため
	  top.scss 側に記述する。この .l-header は全ページ共通。
=================================================
*/
.l-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 2rem;
  z-index: 30;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  align-items: center;
  column-gap: 2.4rem;
  padding: 10px 30px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -1.2rem, 0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.6s;
  /*
  -------------------------------------------------
  	ハンバーガーボタン（480px以下のみ表示）
  	・2本線。開くと中央に寄りながら回転して×になる
  	・メニュー展開中も白い箱（.l-header）はそのまま残す方針のため、
  	  ロゴ・線ともに色は変えない
  -------------------------------------------------
  */ }
  @media screen and (max-width: 480px) {
    .l-header {
      width: 80%;
      justify-content: space-between;
      column-gap: 0;
      padding: 10px 20px; } }
  .l-header-logo {
    display: block;
    width: 70px; }
    .l-header-logo img {
      width: 100%;
      height: auto; }
  .l-header-navi-list {
    display: flex;
    align-items: center;
    column-gap: 1.2rem; }
  @media screen and (max-width: 480px) {
    .l-header-navi-item--hide-sm {
      display: none; } }
  @media screen and (max-width: 480px) {
    .l-header-navi {
      display: none; } }
  .l-header a {
    color: #000;
    font-family: din-2014, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    display: block; }
  .l-header-menu-btn {
    display: none; }
    @media screen and (max-width: 480px) {
      .l-header-menu-btn {
        display: block;
        position: relative;
        width: 1.6rem;
        height: 0.9rem;
        z-index: 2;
        cursor: pointer; } }
    .l-header-menu-btn-bar {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
      margin-top: -0.5px;
      background-color: #2263af;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
      .l-header-menu-btn-bar:nth-child(1) {
        transform: translate3d(0, -0.25rem, 0) rotate(0deg); }
      .l-header-menu-btn-bar:nth-child(2) {
        transform: translate3d(0, 0.25rem, 0) rotate(0deg); }

body.is-menu-open {
  overflow: hidden; }
  body.is-menu-open .l-header-menu-btn-bar:nth-child(1) {
    transform: translate3d(0, 0, 0) rotate(45deg); }
  body.is-menu-open .l-header-menu-btn-bar:nth-child(2) {
    transform: translate3d(0, 0, 0) rotate(-45deg); }
  body.is-menu-open .online-btn {
    transform: translate3d(0, 150%, 0);
    pointer-events: none; }

/*
=================================================
	フルスクリーンメニュー（480px以下・ハンバーガーで開閉）
	・青一色の面が上から下へ拭き下ろされるように出現し、
	  そのあと項目が下から少しずつ遅れて立ち上がる
	  （出方は.mv-navi-itemのstagger、イージングは全体で統一の$ease_expo_out）
	・閉じる時は項目が先に消え、面が上へ引き上がって畳まれる
=================================================
*/
.fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: 4rem;
  padding: 10rem 2.4rem 6rem;
  background-color: rgba(34, 99, 175, 0.95);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.7s; }
  .fullscreen-menu-list {
    display: grid;
    row-gap: 1rem;
    justify-items: center; }
  .fullscreen-menu-item, .fullscreen-menu-sns {
    opacity: 0;
    transform: translate3d(0, 1.6rem, 0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .fullscreen-menu a {
    color: #ffffff;
    font-family: din-2014, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    display: block; }
  .fullscreen-menu-insta {
    display: block;
    width: 2.8rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .fullscreen-menu-insta img {
      display: block;
      width: 100%;
      height: auto; }
    .fullscreen-menu-insta:hover {
      transform: scale(1.12);
      opacity: 0.7; }

body.is-menu-open .fullscreen-menu {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item,
  body.is-menu-open .fullscreen-menu .fullscreen-menu-sns {
    opacity: 1;
    transform: translate3d(0, 0, 0); }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item:nth-of-type(1) {
    transition-delay: 0.25s; }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item:nth-of-type(2) {
    transition-delay: 0.3s; }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item:nth-of-type(3) {
    transition-delay: 0.35s; }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item:nth-of-type(4) {
    transition-delay: 0.4s; }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item:nth-of-type(5) {
    transition-delay: 0.45s; }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-item:nth-of-type(6) {
    transition-delay: 0.5s; }
  body.is-menu-open .fullscreen-menu .fullscreen-menu-sns {
    transition-delay: 0.55s; }

body.is-hero-out .l-header {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

/*
=================================================
	オンラインストア固定ボタン（全ページ共通・常時表示）
	・その場でゆっくり回転し続け、hoverで停止／hover解除で再開
	・下スクロール中は隠れ、上スクロール中は画面下からせり上がって表示
	  （初期表示時は表示された状態からスタート）
=================================================
*/
.online-btn {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 40;
  display: block;
  width: 8rem;
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @media screen and (max-width: 480px) {
    .online-btn {
      right: 1.4rem;
      bottom: 1.4rem;
      width: 5.3rem; } }
  .online-btn-rotate {
    display: block;
    animation: online-btn-spin 16s linear infinite;
    animation-play-state: running; }
  .online-btn img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .online-btn:hover .online-btn-rotate {
    animation-play-state: paused; }
  .online-btn:hover img {
    transform: scale(0.88); }
  .online-btn.is-hide {
    transform: translate3d(0, 150%, 0);
    pointer-events: none; }

@keyframes online-btn-spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
/*
=================================================
	リンクボタン
=================================================
*/
/*
=================================================
	スクロールインでふわっとフェード（全ページ共通の汎用アニメーション）
	.js-fade-up クラスを要素に付けるだけで動作する。common/js/script.js側で
	IntersectionObserver（+ MutationObserver）を使い、画面にある程度入った
	要素へ自動で.is-inviewを付与する仕組みになっている。
	・動きは.mv-inner（リロード時にヒーローがふわっと現れる動き）と同じ、
	  opacityだけのフェード（transformでのスライドは無し）
	・要素ごとに時間差を付けたい場合は、HTML側でインラインstyleに
	  --fade-delay: .2s のようにCSS変数を指定する（例: How to useの4項目）
	・一度表示されたら元には戻らない（要素はunobserveされる）
	・JS側は新たに追加された要素・後から付与されたクラスにも自動対応する
	  ため、他の箇所で使う場合もclassを付けるだけでよい
=================================================
*/
.js-fade-up {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--fade-delay, 0s);
  will-change: opacity; }
  .js-fade-up.is-inview {
    opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js-fade-up {
    opacity: 1;
    transition: none; } }