@charset "UTF-8";
/* ===========================================================
   template-13-split — SP（0〜768px）
   ★参考サイトと同じく、SPは「この1本のメディアクエリの中に全部」書く。
     PCとSPを完全分離する世代の作り。ここを分割しない
   =========================================================== */

@media screen and (max-width: 768px) {

  .pc { display: none; }

  .btn a { font-size: 14px; font-size: 1.4rem; line-height: 56px; }
  .btn a::before { top: 45%; left: -22px; width: 49px; height: 7px; }

  /* header ---------------------------------------------- */
  #top-head {
    width: 100%; clear: both; margin: 0 auto;
    padding: 12px 0 0 4%;
    height: 60px; line-height: 1; z-index: 999;
    background: #fff;
  }
  #logo-head { position: absolute; top: 0; left: 0; }
  #logo-head .logo { width: 120px; }

  #global-nav { display: none !important; }
  #sub-nav { display: none; }

  /* SPドロワー ------------------------------------------- */
  .hamburger {
    background: #fff; display: block;
    width: 50px; height: 50px;
    position: fixed; top: 0; right: 0; z-index: 10000;
    padding: 13px; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .hamburger__icon { position: relative; margin-top: 12px; margin-bottom: 0; }
  .hamburger__icon,
  .hamburger__icon::before,
  .hamburger__icon::after {
    display: block; width: 24px; height: 2px;
    background-color: var(--c-main);
    transition-property: background-color, transform;
    transition-duration: 0.4s;
  }
  .hamburger__icon::before, .hamburger__icon::after { position: absolute; content: ""; }
  .hamburger__icon::before { top: -7px; }
  .hamburger__icon::after  { top: 7px; }
  .hamburger.active .hamburger__icon { background-color: transparent; width: 0; }
  .hamburger.active .hamburger__icon::before,
  .hamburger.active .hamburger__icon::after { background-color: #fff; }
  .hamburger.active .hamburger__icon::before { transform: translateY(7px) rotate(45deg); }
  .hamburger.active .hamburger__icon::after  { transform: translateY(-7px) rotate(-45deg); }

  #sp-global-nav {
    display: none;
    top: 0; left: 0; z-index: 9999; position: fixed;
    width: 100%; height: 100%;
    background: var(--c-main);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0 0;
  }
  /* ★開くときはアニメーションを一切かけない（opacity:1 で即出す）。
     フェードは閉じるときだけ。
     理由：opacity 0→1 のアニメーションは、時計が止まる環境（背景タブ等）で
     開始フレームの 0 のまま固定され、メニューが出ない事故になる。
     閉じる側は止まっても400ms後に display:none になるので安全 */
  #sp-global-nav.is-open { display: block; opacity: 1; }
  #sp-global-nav.is-open.is-closing { animation: drawerOut .4s ease forwards; }
  @keyframes drawerOut { from { opacity: 1 } to { opacity: 0 } }
  @media (prefers-reduced-motion: reduce) {
    #sp-global-nav.is-open.is-closing { animation: none !important; }
  }
  #sp-global-nav .nav-wrapper { width: 100%; height: 100%; }
  #sp-global-nav .home img { width: 140px; padding-left: 4%; }
  #sp-global-nav .menu { width: 100%; clear: both; padding: 24px 0 0 0; }
  #sp-global-nav .menu > li {
    display: block; width: 100%;
    border-bottom: 1px solid var(--c-sub);
    background: url(../images/icon-arrow-w.svg) no-repeat 96% 50%;
    background-size: 40px;
  }
  #sp-global-nav .menu > li a {
    font-size: 15px; font-size: 1.5rem;
    width: 100%; font-weight: 700; color: #fff;
    line-height: 1.9; letter-spacing: 0.2em;
    display: block; text-align: left; padding: 8px 4%;
  }
  #sp-global-nav .menu > li a span { display: block; font-family: var(--font-en); font-size: 9px; font-size: 0.9rem; }
  #sp-global-nav .head-cta { margin-top: 24px; }
  #sp-global-nav .head-cta.is-second { margin-top: 10px; }
  #sp-global-nav .head-cta a {
    width: 80%; margin: 0 auto; text-align: center;
    font-weight: 700; font-size: 14px; font-size: 1.4rem;
    color: #fff; display: block; padding: 0.8em 0;
    border: 1px solid #fff;
    background: url(../images/icon-cart.svg) no-repeat 8% 50%;
  }
  #sp-global-nav .sp-sub-nav { width: 100%; margin: 0 auto; text-align: center; padding: 24px 0 40px; }
  #sp-global-nav .sp-sub-nav li { display: inline-block; padding: 0 10px; }
  #sp-global-nav .sp-sub-nav li img { width: 28px; }

  /* FV ---------------------------------------------------- */
  #mv { width: 80%; height: 680px; }
  #mv .mv-photo-wrap { right: 0; }        /* SPは右余白なし */
  #mv .mv-photo { height: 460px; }
  #mv .mv-copy { top: 90px; left: -52px; }
  #mv .mv-lead { font-size: 16px; font-size: 1.6rem; }
  #mv .mv-lead .layer-clip { width: 52px; height: 20px; }   /* ★窓が52pxに縮む＝ほぼ全部が白文字 */
  #mv .mv-lead .layer-clip span { width: 300px; }
  #mv .mv-display {
    font-size: 48px; font-size: 4.8rem;
    letter-spacing: 0.03em; margin-top: 60px;
  }
  #mv .mv-display .layer-base, #mv .mv-display .layer-clip { width: 300px; }
  #mv .mv-display .layer-clip { width: 52px; height: 300px; }
  #mv .mv-display .layer-clip .t { width: 300px; }
  #mv .mv-sub {
    font-size: 14px; font-size: 1.4rem;
    padding: 330px 8% 0 4%;
    line-height: 1.6;
  }
  .scroll { display: none; }

  /* お知らせ ---------------------------------------------- */
  .news { width: 100%; padding-bottom: 40px; top: -32px; position: relative; display: block; }
  .news .news-ttl { width: 90%; margin: 0 auto; padding: 32px 0 48px; }
  .news .news-ttl h2 { font-size: 20px; font-size: 2rem; }
  .news .news-ttl .more { margin: 16px auto 0; }
  .news .news-list { width: 80%; padding: 12px 4% 0; margin: -30px auto 0; }
  .news .news-list li { padding: 0.6em 0; line-height: 1.6; }
  .news .news-list li span {
    padding-right: 0; display: block;
    color: var(--c-main); font-size: 12px; font-size: 1.2rem;
  }

  /* メッセージ -------------------------------------------- */
  #message { display: block; background-size: auto 60px; padding-top: 50px; }
  .message-img { width: 100%; margin-top: 0; padding-top: 250px; }
  .message-img span { background-position: 45% 50%; }
  .message-inner { width: 100%; position: static; padding: 24px 4% 40px; }
  .message-inner h2 { font-size: 24px; font-size: 2.4rem; margin-bottom: 1.4em; line-height: 1.6; }

  /* 目的別メニュー ---------------------------------------- */
  #purpose { padding: 24px 4% 18px; margin-top: 0; }
  #purpose ul { width: 100%; }
  #purpose li { width: 100%; margin: 0 0 16px; }
  #purpose li a { padding: 16px 4% 16px 64px; font-size: 16px; font-size: 1.6rem; line-height: 1.3; }
  #purpose .p01 a { background-position: 24px 50%; background-size: 30px; }
  #purpose .p02 a,
  #purpose .p03 a,
  #purpose .p04 a { background-position: 24px 50%; background-size: 32px; }

  /* 特集A / B --------------------------------------------- */
  #feature-a { background-position: 96% 30px; background-size: 180px; padding: 100px 0 120px; }
  #feature-a::after { top: 200px; right: 0; width: 50%; height: 220px; }
  .feature-a-img { position: static; width: 90%; margin-left: 0; }
  .feature-a-txt { max-width: none; padding: 40px 4% 0; }
  .feature-a-txt .ttl-en { font-size: 40px; font-size: 4rem; white-space: normal; }
  .feature-a-txt .txt { max-width: none; }
  .feature-a-txt .btn { width: 90%; margin: 40px auto 0; }

  #feature-b { background-position: 96% 40px; background-size: 200px; padding: 120px 0 80px; }
  #feature-b::after { top: 200px; right: 0; left: auto; width: 50%; height: 220px; }
  .feature-b-img { position: static; width: 90%; margin-right: 0; }
  .feature-b-txt { max-width: none; padding: 40px 4% 0; }
  .feature-b-txt .ttl-en { font-size: 40px; font-size: 4rem; white-space: normal; }
  .feature-b-txt .txt { max-width: none; }
  .feature-b-txt .btn { width: 90%; margin: 40px auto 0; }

  .ttl-ja { margin-bottom: 24px; padding: 18px 0 18px 32px; }
  .lead-ja { font-size: 18px; font-size: 1.8rem; margin-bottom: 24px; }

  /* 実績カード -------------------------------------------- */
  #works { width: 100%; padding: 0 0 80px 0; }
  #works::before { background-size: 50%; }
  #works::after { background-size: 50%; background-position: right bottom; right: 0; }
  .works-inner { width: 100%; clear: both; padding: 0 4%; }
  .works-inner .ttl-en { font-size: 32px; font-size: 3.2rem; }
  .works-inner .ttl-ja-c { font-size: 16px; font-size: 1.6rem; margin-bottom: 32px; }
  .works-inner ul { margin: 32px 0; display: block; font-size: 0; }
  .works-inner ul li { width: 48%; display: inline-block; padding-bottom: 32px; vertical-align: top; }
  .works-inner ul li:nth-child(2n) { margin-left: 4%; }
  .works-inner .w-img img { width: 100%; height: 160px; }
  .works-inner .w-place { font-size: 12px; font-size: 1.2rem; padding: 0.2em 0.8em; }
  .works-inner h3 { font-size: 16px; font-size: 1.6rem; padding: 0 20px; }
  .works-inner .btn { width: 90%; }

  /* サービス ---------------------------------------------- */
  #service { padding: 0; }
  #service::after { display: none; }
  .service-inner { width: 100%; clear: both; display: block; }
  .service-box {
    width: 100%; padding-top: 24px; padding-bottom: 80px;
    background-position: 96% 0; background-size: 30%;
  }
  .service-box.is-second { background-position: 96% 0; background-size: 30%; margin-top: 0; margin-left: 0; }
  .service-img { position: static; width: 60%; margin: 0 auto; }
  .service-txt { padding: 0 4%; }
  .service-txt .ttl-en { font-size: 30px; font-size: 3rem; margin-top: -10px; }
  .service-txt .ttl-ja { margin-bottom: 20px; padding: 10px 0 10px 32px; }
  .service-txt .btn { width: 90%; margin: 40px auto 0; }
  .service-box.is-second .service-txt .btn { margin-top: 40px; }

  /* 帯 → ABOUT -------------------------------------------- */
  .band { height: 200px; background-position: 32% 0; }
  #about { width: 96%; padding: 0; }
  #about::before { width: 100%; }
  #about::after { display: none; }
  .about-inner { width: 100%; clear: both; }
  .about-txt { width: 100%; padding: 0 4% 32px; top: -15px; }
  .about-txt .ttl-en { font-size: 40px; font-size: 4rem; }
  .about-txt .ttl-ja { margin-bottom: 32px; padding: 10px 0 10px 32px; }
  .about-txt .lead-ja { font-size: 20px; font-size: 2rem; margin-bottom: 32px; }
  .about-img { position: static; width: 90%; }
  .about-img img { width: 100%; max-width: none; }
  .about-img .name-box { width: 80%; padding: 16px 6%; bottom: 30px; right: -25%; }
  .about-img .name-box::before { background-position: 60% 0; background-size: 70px; }
  .about-img .name-box p { font-size: 14px; font-size: 1.4rem; }
  .about-img .name-box .name { font-size: 20px; font-size: 2rem; }

  /* ギャラリー -------------------------------------------- */
  #gallery { padding: 80px 4% 200px; }
  .gallery-inner { width: 100%; clear: both; }
  .gallery-inner .ttl-en {
    font-size: 24px; font-size: 2.4rem;
    background-size: 34px; padding-top: 48px; margin-bottom: 40px;
  }
  .gallery-inner .ttl-en::before { width: 160px; }
  .gallery-inner .more { position: static; margin: 24px auto 32px; }
  .gallery-grid { flex-wrap: wrap; justify-content: space-between; }
  .gallery-grid li { width: 32%; margin-bottom: 2%; }
  .gallery-grid img { height: 100px; }

  /* CONTACT ----------------------------------------------- */
  #contact { background-size: cover; padding: 100px 4% 80px; }
  #contact::before { top: -150px; }
  #contact .ttl-en { font-size: 48px; font-size: 4.8rem; margin-top: -130px; }
  #contact .ttl-ja-c { margin-bottom: 20px; }
  #contact .txt { font-size: 14px; font-size: 1.4rem; margin-bottom: 24px; line-height: 2.0; }
  .contact-inner { width: 100%; clear: both; display: block; }
  .contact-inner .contact-box { width: 100%; padding: 40px 4% 16px; }
  .contact-inner .contact-box h3 { font-size: 17px; font-size: 1.7rem; letter-spacing: 0.1em; margin-bottom: 32px; }
  .tel-box { margin-bottom: 12px; }
  .tel-box .tel a { font-size: 34px; font-size: 3.4rem; background-size: 26px; letter-spacing: 0; }
  .mail-box .btn { width: 100%; }
  .mail-box .btn a { background-position: 8% 50%; padding-left: 1em; }

  /* ACCESS ------------------------------------------------ */
  #access { display: block; height: auto; }
  .gmap-inner { width: 100%; height: auto; }
  .gmap { position: relative; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; }
  .gmap img, .gmap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .access-txt { width: 100%; height: auto; padding: 56px 4% 24px; }
  .access-txt .ttl-en { font-size: 28px; font-size: 2.8rem; }
  .access-txt .ttl-en span { padding: 0 0 0 32px; margin-left: 12px; }
  .access-txt p { line-height: 1.6; }
  .access-txt dl { margin-top: 24px; }
  .access-txt dl dt { line-height: 1.8; }
  .access-txt dl dd { font-size: 13px; font-size: 1.3rem; margin-bottom: 24px; line-height: 1.6; }

  /* footer ------------------------------------------------ */
  .side-sns { display: none !important; }
  #pagetop { height: 80px; }
  #pagetop a { height: 80px; padding-top: 36px; }
  footer { padding: 56px 4% 64px; }
  footer::before { width: 24%; }
  .f-inner { width: 100%; clear: both; display: block; }
  .f-inner h1 { width: 100%; text-align: center; margin-bottom: 48px; }
  .f-inner h1 img { width: 50%; }
  .f-info { margin-top: 0; padding-left: 16px; }
  .f-info h2 { margin-bottom: 16px; }
  .f-info.f-a { width: 96%; padding-right: 0; margin-left: 4%; margin-bottom: 40px; }
  .f-info.f-b { width: 96%; margin-left: 4%; }
  .f-bnr { width: 80%; margin: 48px auto 0; text-align: center; }
  .f-bnr img { width: 100%; }
  .f-sns { padding: 40px 0 0; }
  .f-copy { font-size: 12px; font-size: 1.2rem; top: auto; bottom: 10px; left: 4px; }
}