@charset "utf-8";

/* ===================================================
   ブレークポイント設定
   SP:       〜 480px
   タブレット: 481px 〜 1024px
   PC:       1025px 〜
=================================================== */

/* ------------------基本レイアウト------------------ */
html {
   scroll-behavior: smooth;
}
body {
   font-family: "Zen Kaku Gothic New", "游ゴシック", "ヒラギノ角ゴ ProN", "メイリオ", "MS Pゴシック", sans-serif;
   line-height: 2;
   letter-spacing: 0.05em;
   color: #333;
   background: #f2f2f2;
}

/* ===================================================
   ヘッダー・ナビ（PC）
=================================================== */
header {
   z-index: 100;
   position: fixed;
   top: 0;
   right: 0;
   width: 120px;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.container {
   width: 100%;
}
h1 .logo {
   width: 70px;
   height: auto;
   padding-top: 20px;
   padding-left: 20px;
}
.hero_header h1 {
   position: absolute;
   top: 40px;
   left: 40px;
   z-index: 50;
   font-size: 28px;
   font-weight: bold;
   color: #FFF;
   text-align: left;
}
/* PC・タブレットでは改行を非表示 */
.h1-br {
   display: none;
}

/* ナビ（PC） */
.global-nav {
   z-index: 20;
   position: fixed;
   top: 0;
   right: 0;
   width: 100px;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.global-nav__list {
   writing-mode: vertical-rl;
   display: flex;
   gap: 56px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.global-nav__item {
   position: relative;
   display: flex;
   justify-content: center;
}
.global-nav__item:not(:last-child)::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -28px;
   width: 30px;
   height: 1px;
   background: #222;
   transform: translateX(-50%);
}
.global-nav__item a {
   text-decoration: none;
   color: #333;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 0.08em;
}
nav ul li a:hover {
   color: #D1D1D1;
   transition: 0.5s;
}
.hamburger,
.black-bg {
   display: none;
}

/* ===================================================
   ヒーロー
=================================================== */
.hero_header {
   position: relative;
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 28px;
   overflow: hidden;
}
.hero_header img {
   margin-bottom: 120px;
}
#slider {
   width: 100%;
   height: 100vh;
   position: relative;
   z-index: 1;
}
.slider img {
   animation: zoomUp 10s ease-out forwards;
}
@keyframes zoomUp {
   from { transform: scale(1); }
   to   { transform: scale(1.08); }
}

/* ===================================================
   メイン・共通
=================================================== */
main {
   width: 1100px;
   margin: 0 auto 60px;
}
article {
   width: 100%;
   min-height: 500px;
   margin-top: 100px;
   padding: 0 30px 30px;
}
h2 {
   text-align: center;
   text-transform: capitalize;
   font-size: 26px;
   font-weight: bold;
   padding: 30px 0 0 10px;
   margin-bottom: 40px;
}
ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
a {
   color: #000;
   text-decoration: none;
}
a:hover {
   color: #4E4C4C;
}
.flex {
   display: flex;
}

/* ===================================================
   フッター
=================================================== */
.footer {
   z-index: 100;
   position: fixed;
   left: 24px;
   bottom: 24px;
}
.copyright {
   writing-mode: vertical-rl;
   margin: 0;
   font-size: 14px;
   font-weight: bold;
}

/* ===================================================
   ユーティリティ
=================================================== */
@media (min-width: 768px) {
   .md-flex {
      display: flex;
   }
   .md-justify-between {
      justify-content: space-between;
   }
}

/* ===================================================
   スクロールダウン
=================================================== */
.container_05 {
   height: 100px;
}
.scrollbar-text_05 {
   display: inline-block;
   position: absolute;
   bottom: 0;
   padding: 10px 10px 110px;
   color: #000;
   font-size: 14px;
   font-family: "Poppins", serif;
   line-height: 1;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   writing-mode: vertical-lr;
   left: 50%;
   transform: translateX(-50%);
}
.scrollbar_05 {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 1px;
}
.scrollbar_05::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 1px;
   height: 100px;
   background: #000;
   animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes liner {
   0%   { transform: scale(1, 0); transform-origin: 0 0; }
   30%  { transform: scale(1, 1); transform-origin: 0 0; }
   70%  { transform: scale(1, 1); transform-origin: 0 100%; }
   100% { transform: scale(1, 0); transform-origin: 0 100%; }
}

/* ===================================================
   ページトップ
=================================================== */
.pagetop {
   height: 50px;
   width: 50px;
   position: fixed;
   right: 30px;
   bottom: 30px;
   backdrop-filter: blur(60px);
   border: solid 1px #000;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
}
.pagetop__arrow {
   height: 10px;
   width: 10px;
   border-top: 2px solid #000;
   border-right: 2px solid #000;
   transform: translateY(20%) rotate(-45deg);
}

/* ===================================================
   プロフィール
=================================================== */
dl {
   width: 100%;
}
dt {
   width: 25%;
   float: left;
   text-align: center;
   font-weight: 500;
   color: #373737;
}
dd {
   width: 74%;
   float: right;
   text-indent: 1rem;
}
dt, dd {
   padding: 30px 0;
   border-top: 1px solid #D1D1D1;
}
dt:last-of-type,
dd:last-of-type {
   border-bottom: 1px solid #D1D1D1;
}

/* アコーディオン */
.accordion-box {
   position: relative;
}
.accordion-box label {
   height: 140px;
   cursor: pointer;
   text-align: center;
   font-size: 12px;
   position: absolute;
   bottom: 0;
   width: 100%;
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 90%);
}
.accordion-box input:checked + label {
   background: inherit;
}
.accordion-box label:after {
   content: "続きをよむ";
   letter-spacing: .05em;
   line-height: 2.5rem;
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translate(-50%, 0);
   color: #000;
   background-color: #ECECEC;
   width: 18.75rem;
   border-radius: 20px;
}
.accordion-box label:before {
   content: "↓";
   font-weight: 700;
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translate(-140px, 0);
   background-color: #fff;
   z-index: 1;
   border-radius: 100%;
   width: 20px;
   height: 20px;
   line-height: 20px;
}
.accordion-box input {
   display: none;
}
.accordion-box .accordion-container {
   overflow: hidden;
   height: 400px;
   transition: all 0.1s;
}
.accordion-box input:checked + label:after {
   content: "閉じる";
}
.accordion-box input:checked + label:before {
   content: "↑";
}
.accordion-box input:checked ~ .accordion-container {
   height: auto;
   padding-bottom: 80px;
   transition: all 0.1s;
}

/* ===================================================
   ワークス
=================================================== */
h3 {
   color: #4E4C4C;
   font-weight: bold;
   margin-bottom: 40px;
   text-align: center;
}
.title-03 {
   display: flex;
   align-items: center;
}
.title-03:before,
.title-03:after {
   content: "";
   height: 1px;
   flex-grow: 1;
   background-color: #666;
}
.title-03:before { margin-right: 1rem; }
.title-03:after  { margin-left: 1rem; }

.wrapper {
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 70px;
}
figure {
   width: 320px;
   margin-bottom: 40px;
}
figure img {
   width: 320px;
   height: 250px;
   object-fit: cover;
   transition: .3s ease-in-out;
}
figure:hover img {
   filter: brightness(80%);
}
figcaption {
   font-size: 14px;
   margin-top: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.slick-slide img {
   height: 20vw;
   max-height: 350px;
   min-height: 200px;
   margin-bottom: 20px;
   border-radius: 2px;
}
.slick-slide {
   transition: 0.3s ease-in-out;
   transform: scale(.75);
}
.is--active {
   transform: scale(1);
}

/* ===================================================
   コンタクト
=================================================== */
.button-23 a {
   font-size: 16px;
   letter-spacing: 0.1em;
   font-weight: bold;
   background-color: #fff;
   display: block;
   position: relative;
   box-sizing: border-box;
   max-width: 300px;
   text-align: center;
   padding: 20px 64px;
   margin: 24px;
   margin-inline: auto;
   text-decoration: none;
   cursor: pointer;
   z-index: 999;
   transition: all 0.3s;
}
.button-23 a::after {
   content: "";
   position: absolute;
   top: 50%;
   right: -30px;
   width: 60px;
   height: 1px;
   background: #333;
   transition: all 0.3s ease;
}
.button-23 a:hover::after {
   animation: OutIn-Line 700ms;
   transition: all 0.3s;
}
@keyframes OutIn-Line {
   0%    { transform: scale3d(1,1,1); transform-origin: 100% 0; }
   50%   { transform: scale3d(0,1,1); transform-origin: 100% 0; }
   50.1% { transform: scale3d(0,1,1); transform-origin: 0 0; }
   100%  { transform: scale3d(1,1,1); transform-origin: 0 0; }
}

/* フォームテーブル */
form table {
   width: 100%;
   border-collapse: collapse;
}
form th {
   width: 20%;
   font-weight: bold;
   vertical-align: top;
}
form td {
   width: 80%;
}
form th, form td {
   padding: 30px 0;
}
input[type="text"]  { background-color: #FFF; }
input[type="email"] { background-color: #FFF; width: 35rem; }
textarea {
   width: 90%;
   height: 8rem;
   background-color: #FFF;
   resize: none;
}
input[type="submit"] {
   padding: 10px 80px;
   background-color: #FFF;
   color: #000;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   border-radius: 50px;
   display: inline-block;
   margin: 4px 2px;
   cursor: pointer;
}
input[type="submit"]:hover {
   background-color: #ACACAC;
   transition: 0.5s;
}
form p {
   text-align: center;
   margin-top: 30px;
}


/* ===================================================
   タブレット対応（481px〜1024px）
   ※ ナビはハンバーガーに切り替え
=================================================== */
@media screen and (min-width: 481px) and (max-width: 1024px) {
   /* --- 全体レイアウト --- */
   body, main {
      width: 100%;
   }
   main {
      width: 100%;
      padding: 0 24px;
      box-sizing: border-box;
      margin-bottom: 40px;
   }

   /* --- ヒーロータイトル --- */
   .hero_header h1 {
      font-size: 22px;
      top: 40px;
      left: 20px;
   }

   /* --- ヘッダー：PC同様に右側縦型のまま --- */
   /* header はPC基本スタイルをそのまま使用 */

   /* --- ナビ：縦書き右側からハンバーガーへ --- */
   .global-nav {
      position: fixed;
      right: -200px;   /* 隠す */
      top: 0;
      width: 160px;
      height: 100vh;
      padding-top: 60px;
      background-color: rgba(255,255,255,0.92);
      backdrop-filter: blur(10px);
      transition: all .4s;
      z-index: 200;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
   }
   .global-nav__list {
      writing-mode: horizontal-tb;
      flex-direction: column;
      gap: 32px;
      text-align: center;
   }
   .global-nav__item::after {
      display: none;
   }
   .global-nav__item a {
      font-size: 14px;
   }

   /* ハンバーガー：右上固定 */
   .hamburger {
      display: block;
      position: fixed;
      right: 16px;
      top: 16px;
      width: 40px;
      height: 30px;
      cursor: pointer;
      z-index: 300;
   }
   .hamburger__line {
      position: absolute;
      left: 11px;
      width: 20px;
      height: 2px;
      background-color: #666;
      transition: all .4s;
   }
   .hamburger__line--1 { top: 6px; }
   .hamburger__line--2 { top: 14px; }
   .hamburger__line--3 { top: 22px; }

   .black-bg {
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      background-color: transparent;
      opacity: 0;
      visibility: hidden;
      transition: all .4s;
      cursor: pointer;
   }

   /* nav-open 時 */
   .nav-open .global-nav  { right: 0; }
   .nav-open .black-bg    { opacity: .6; visibility: visible; }
   .nav-open .hamburger__line--1 { transform: rotate(45deg);  top: 14px; }
   .nav-open .hamburger__line--2 { width: 0; left: 50%; }
   .nav-open .hamburger__line--3 { transform: rotate(-45deg); top: 14px; }

   /* --- フッター --- */
   .footer {
      left: 16px;
      bottom: 16px;
   }

   /* --- アーティクル --- */
   article {
      margin-top: 60px;
      padding: 0 16px 24px;
      min-height: unset;
   }

   /* --- Works グリッド：2列 --- */
   .wrapper {
      justify-content: center;
      gap: 24px;
   }
   figure {
      width: calc(50% - 16px);
      min-width: 200px;
      max-width: 340px;
      margin-bottom: 24px;
   }
   figure img {
      width: 100%;
      height: 200px;
   }

   /* --- フォーム --- */
   input[type="email"] {
      width: 100%;
      max-width: 28rem;
   }
   textarea {
      width: 95%;
   }

   /* --- スライダー --- */
   .slick-slide img {
      height: 26vw;
      min-height: 160px;
   }
}


/* ===================================================
   スマホ対応（〜480px）
=================================================== */
@media screen and (max-width: 480px) {
   body {
      font-size: 14px;
   }
   body, .container, main {
      width: 100%;
   }
   .container {
      flex-direction: column;
   }
   h1 .logo {
      text-align: left;
      width: 45px;
      height: auto;
      padding-top: 5px;
      padding-left: 10px;
   }
   h2 {
      font-size: 22px;
   }

   /* --- ヒーロー全体：縦並びに変更 --- */
   .hero_header {
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      height: auto;
   }

   /* --- h1：absoluteをやめて通常フローへ --- */
   .hero_header h1 {
      position: static;
      color: #888;
      font-size: 24px;
      text-align: center;
      padding: 40px 16px 20px;
      line-height: 1.6;
      z-index: auto;
   }

   /* --- SP用改行クラス --- */
   .h1-br {
      display: inline;
   }

   /* --- スライダー：幅100%・高さ60vw相当 --- */
   #slider {
      width: 100%;
      height: 60vw;
      min-height: 200px;
      max-height: 360px;
   }
   #slider .slider img {
      width: 100%;
      height: 60vw;
      min-height: 200px;
      max-height: 360px;
      object-fit: cover;
   }

   /* --- ナビ --- */
   .global-nav {
      position: fixed;
      right: -200px;
      top: 0;
      width: 150px;
      height: 100vh;
      padding-top: 60px;
      background-color: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      transition: all .6s;
      z-index: 200;
      overflow-y: auto;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
   }
   .global-nav__list {
      writing-mode: horizontal-tb;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
   }
   .global-nav__item {
      text-align: center;
      border-bottom: 1px solid #eee !important;
      padding-bottom: 10px;
   }
   .global-nav__item::after {
      display: none;
   }
   .global-nav__item a {
      display: block;
      padding: 8px 0;
      writing-mode: horizontal-tb;
      color: #ACACAC;
      font-size: 14px;
   }

   /* ハンバーガー：右上固定 */
   .hamburger {
      display: block;
      position: fixed;
      right: 12px;
      top: 12px;
      width: 40px;
      height: 30px;
      cursor: pointer;
      z-index: 300;
   }
   .hamburger__line {
      position: absolute;
      left: 11px;
      width: 20px;
      height: 2px;
      background-color: #666;
      transition: all .6s;
   }
   .hamburger__line--1 { top: 6px; }
   .hamburger__line--2 { top: 14px; }
   .hamburger__line--3 { top: 22px; }

   .black-bg {
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      background-color: transparent;
      opacity: 0;
      visibility: hidden;
      transition: all .6s;
      cursor: pointer;
   }

   /* nav-open 時 */
   .nav-open .global-nav  { right: 0; }
   .nav-open .black-bg    { opacity: .8; visibility: visible; }
   .nav-open .hamburger__line--1 { transform: rotate(45deg);  top: 14px; }
   .nav-open .hamburger__line--2 { width: 0; left: 50%; }
   .nav-open .hamburger__line--3 { transform: rotate(-45deg); top: 14px; }

   /* --- フッター：画面下部・横向き・中央揃え --- */
   .footer {
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      padding: 10px 0;
      background-color: rgba(242,242,242,0.9);
   }
   .copyright {
      writing-mode: horizontal-tb;   /* 縦書き → 横書きに */
      display: block;
      text-align: center;
      font-size: 12px;
   }

   /* --- アーティクル --- */
   article {
      margin-top: 40px;
      padding: 0 12px 20px;
      min-height: unset;
   }

   /* --- プロフィール --- */
   dt, dd {
      width: 100%;
      float: none;
      text-align: center;
   }
   dt {
      background-color: #F9F9F9;
      padding: 10px 0;
      font-weight: normal;
      color: #4E4C4C;
   }
   dd {
      text-indent: 0;
      padding: 20px 0;
   }
   dt:last-of-type {
      border-bottom: none;
   }

   /* --- Works --- */
   .wrapper {
      justify-content: center;
   }
   figure {
      width: 300px;
      margin-bottom: 24px;
   }
   figure img {
      max-width: 100%;
      width: 100%;
      height: auto;
   }
   figcaption {
      font-size: 13px;
   }

   /* --- コンタクトボタン --- */
   .button-23 a {
      padding: 16px 40px;
   }

   /* --- フォーム --- */
   form th, form td {
      display: block;
      width: 100%;
      border-bottom: none;
      text-align: center;
   }
   form th { padding: 10px 0; }
   form td { padding: 20px 0; }
   form table { border-bottom: 1px solid #D1D1D1; }
   form tr:nth-child(odd),
   form tr:nth-child(even) { background-color: #FFF; }
   form th { background-color: #F9F9F9; }
   input[type="text"],
   input[type="email"],
   textarea { width: 90%; }

   /* --- スライダー --- */
   .slick-slide img {
      height: 40vw;
      min-height: 120px;
   }

   /* --- mainの幅 --- */
   main {
      width: 100%;
      padding: 0;
      box-sizing: border-box;
      margin-bottom: 30px;
   }
}