@charset "utf-8";

/* CSS Document */

body{
  background: url("../img/bg_uplight.png") no-repeat top center, url("../img/bg_base.jpg") repeat center;
  color: #2E3437;
}
:root{
  --frame-bg: #3971e0; /* 加工枠の背景色 */
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  /* background-color: #dad2cb; */
}

/* ==========================================================================
   共通：左右線つき inner（枠）
   - About / Contact など同じ構造で使う
   ========================================================================== */
.layout-inner{
  max-width: 950px;
  margin: 0 auto;
  border-left: 1px solid #c6beb9;
  border-right: 1px solid #c6beb9;
  box-sizing: border-box;
}
.section-about .layout-inner,
.section-contact .layout-inner{
  /* ※左右の細縦線をとぎらさないために、前後のセクションとの間隔をmarginではなくpaddingであける */
  padding: 50px 30px 130px;
}

/* ==========================================================================
   ヘッダ
   ========================================================================== */
.header{
  width: 100%;
  height: auto;
}
.header-inner{
  padding: 30px 0;
  text-align: center; /* 中央揃えの基準を作る */
}
.site-logo-link{
  display: inline-block;
  line-height: 0;
}
.site-logo{
  display: block;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   メニュー
   ========================================================================== */
.menu-bar{
  position: relative;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 50px;
  border-top: 1px solid #c2b9b9;
  border-bottom: 1px solid #c2b9b9;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-30px);
  transition: none;
}
.menu-logo{
  display: none;
  margin-top: 15px;
  opacity: 0;
  transform: translateY(-10px);
}
.menu-logo img{
  height: 48px;
}
/* メニューリスト */
.menu-bar ul{
  position: absolute;
  bottom: 7px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-bar li a{
  color: #333;
  text-decoration: none;
  padding-bottom: 4px;
}
.menu-bar li a:hover{
  border-bottom: 1px solid #333;
}
.menu-bar.fixed{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* padding-top: 10px; */
}
.menu-bar.fixed .menu-logo{
  display: block;
}
/* 準備中メニュー（ノーリンク） */
.menu-bar li.is-disabled{
  padding-bottom: 4px;
  color: #a5a1a1;
  cursor: default;
  opacity: 0.7;
}
.menu-bar li.is-disabled:hover{
  border-bottom: none;
}

/* ==========================================================================
   スキップリンク
   ========================================================================== */
.skip-link{
  position: absolute;
  top: auto;
  left: -9999px;
}
.skip-link:focus{
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 10px 12px;
  background: #fff;
}

/* ==========================================================================
   h1～h3
   ========================================================================== */
h1{
  color: #333;
  margin-left: 10px;
  margin-bottom: 70px;
}
h2{
  color: #333;
  margin: 50px 0;
}
h3{
  color: #333;
  margin-top: 0;
  margin-bottom: 20px;
}

/* ==========================================================================
   HERO (PC) - current HTML class (hyphen)
   ========================================================================== */
.hero{
  width: 100%;
}
.hero-inner{
  max-width: 1050px;
  height: 600px;
  margin: 0 auto;
}
/* layout-innerで左右線を持ってるので、hero-sub-innerは中身の基準だけ */
.hero-sub-inner{
  position: relative;
  height: 600px;
  overflow: hidden; /* SPマスクでも使うのでON推奨 */
}

/* ---------------------------
   Photo
   --------------------------- */
.hero-photo{
  position: relative;
}
.hero-photo img{
  display: block;
  width: 650px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 90px;
}
/* Credit (PC) */
/* 写真を基準にする */
.hero-photo{
  position: relative;
}

/* クレジット */
/* =========================
   Hero Photo Credit（追加）
   - 画像の右端に揃えて
   - 画像の下に表示
   ========================= */



/* リンク */
.hero-photo-credit a{
  color: #464543;
  text-decoration: none;
}

/* ---------------------------
   Catch (PC)
   - in : 本文字
   - out: 鏡文字
   --------------------------- */
/* 共通（in/out 両方） */
.hero-catch-in-left,
.hero-catch-in-right,
.hero-catch-out-left,
.hero-catch-out-right{
  position: absolute;
  top: 0;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
/* 本文字（黒） */
.hero-catch-in-left,
.hero-catch-in-right{
  color: #222;
}
/* LEFT */
.hero-catch-in-left{
  left: 11px;
  margin-top: 56px;
}
/* 鏡文字 共通 */
.hero-catch-out-left,
.hero-catch-out-right{
  opacity: 0; /* 非表示から始める */
}
/* 鏡文字 LEFT */
.hero-catch-out-left{
  left: -46px;
  margin-top: 60px;
  display: inline-block;
  color: #c6beb9;
  opacity: 0.5;
  transform: rotateY(180deg);
}
/* OUTは最初は非表示（JSが出す） */
/* RIGHT */
.hero-catch-in-right{
  right: 8px;
  margin-top: 50px;
}
/* 鏡文字 RIGHT */
.hero-catch-out-right{
  right: -52px;
  margin-top: 50px;
  display: inline-block;
  color: #c6beb9;
  opacity: 0.5;
  transform: rotateY(180deg);
}

/* ==========================================================================
   section: about
   ========================================================================== */
.about-lead{
  margin-top: 50px;
}
/* =========================================================
   About：services（線＋ボックス）
   ========================================================= */
.about-services{
  position: relative;
  display: grid;
  gap: 40px;
  margin: 100px 0;
  padding-left: 70px;
}
/* ------------------------- ボックス本体 ------------------------- */
.service-box{
  position: relative;
  padding: 25px 50px;
  border: 1px solid #111;
  background: rgba(255,255,255,0);
}
/* サービス本文の段落 */
.service-box p{
  margin: 0 0 1em;
}
/* 最後の締め文（余白を詰めたい時） */
.service-note{
  margin-bottom: 0;
}
/* 箇条書き（●） */
.service-points{
  margin: 0.7em 0 0.9em;
  padding: 0;
  list-style: none; /* デフォルトの黒丸を消す */
}
.service-points li{
  position: relative;
  margin: 0.35em 0;
  padding-left: 1.8em;
}
.service-points li::before{
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
}
/* ------------------------- ボックス内の挿絵 ------------------------- */
.service-webcreation-image,
.service-printdesign-image{
  position: relative;
  width: clamp(140px, 30%, 260px);
  margin: 35px auto;
}
/* 画像本体 */
.service-webcreation-image img,
.service-printdesign-image img{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.6;                 /* GSAPで出現 */
  transform: translateY(200px); /* 下からフェード用の初期位置 */
}
/* ------------------------- 光（ぼわっと光る） ------------------------- */
.service-glow{
  position: absolute;
  left: 50%;
  top: 55%; /* 中心より下 */
  width: 60%; /* 絵の60%あたりで光る */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.55); /* 初期ちいさめ */
  pointer-events: none;
  /* 黄〜オレンジのにじんだ色で光を再現 */
  background: radial-gradient(
    circle,
    rgba(255,230,150,1) 0%,
    rgba(255,170,60,1) 20%,
    rgba(255,130,151,0.8) 65%,
    rgba(255,100,0,0.4) 80%,
    rgba(255,100,0,0) 90%
  );
  /* はじめ大幅にぼかす */
  filter: blur(52px);
  /* 重なりを自然に */
  mix-blend-mode: screen;
}

/* ==========================================================================
   Information Tabs & Panels
   - タブ切り替えUI
   - currentタブとパネルの視覚的なつながり
   ========================================================================== */
/* =========================
   Tabs
   ========================= */
.information_tabs{
  width: 100%;
  margin: 0 auto 6px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
/* タブボタン共通 */
.info-tab{
  position: relative;
  width: 150px;
  padding: 8px 0;
  border: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: pointer;
  color: #ffffff;
  text-shadow:
    0 1px 1px rgba(27,38,58,0.85),
    0 2px 6px rgba(27,38,58,0.60),
    0 6px 16px rgba(27,38,58,0.45);
  background: transparent;
  overflow: hidden;
  transition: filter 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
/* タブ背景 */
.information_tabs #info-tab-guide{
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6)),
    url("../img/tab_bg-1.jpg") no-repeat center / cover;
}
.information_tabs #info-tab-use{
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6)),
    url("../img/tab_bg-2.jpg") no-repeat center / cover;
}
.information_tabs #info-tab-price{
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6)),
    url("../img/tab_bg-3.jpg") no-repeat center / cover;
}
/* テキスト最前面 */
.info-tab > *{
  position: relative;
  z-index: 2;
}
.info-tab.current{
  height: 40px;
  transform: translateY(6px);
}
.info-tab:not(.current):hover{
  filter: brightness(1.2);
}

/* =========================
   Panels（Outer Frame）
   ========================= */
.information_box_item{
  position: relative;
  width: 100%;
  min-height: 640px;
  --panel-bg: url("../img/panel_guide.jpg");
  background:
    linear-gradient(
      to top,
      rgba(255,255,255,1),
      rgba(255,255,255,.9),
      rgba(255,255,255,.8),
      rgba(57,75,87,.7)
    ),
    var(--panel-bg) no-repeat center / cover;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}
.information_box_item[hidden]{
  display: none;
}
/* パネル別背景指定 */
#info-panel-guide{
  --panel-bg: url("../img/panel_guide.jpg");
}
#info-panel-use{
  --panel-bg: url("../img/panel_use.jpg");
}
#info-panel-price{
  --panel-bg: url("../img/panel_price.jpg");
}
/* guideのみ縦方向固定 */
#info-panel-guide{
  background:
    linear-gradient(
      to bottom,
      rgba(57,75,87,.7) 0%,
      rgba(255,255,255,.9) 35%,
      rgba(255,255,255,1) 65%
    ),
    var(--panel-bg) no-repeat center top / 100% auto;
}

/* =========================
   Panels Content（Inner）
   ========================= */
.information_box_inner{
  width: 90%;
  margin: 0 auto;
  padding: 44px 46px 70px;
  background: rgb(255, 255, 255, 0.2);
  border: none;
  box-shadow: none;
  color: #1b263a;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.information_box_item.active .information_box_inner{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Tab & Panel Connection Effect
   ========================= */
.info-tab.current::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 12px;
  background: rgba(255,255,255,0.7);
  filter: blur(10px);
  pointer-events: none;
}

/* =========================
   Panel Typography
   ========================= */
.information_box_inner h3{
  margin: 0 0 14px;
}
.information_box_inner p{
  margin: 0 0 16px;
}
.information_box_inner dl{
  margin-top: 8px;
}
.information_box_inner dl dt{
  margin: 18px 0 8px;
}
.information_box_inner dl dd{
  margin: 0 0 7px;
}
.information_box_inner ul{
  margin: 0;
  padding-left: 1.2em;
}
.information_box_inner li{
  margin-bottom: 10px;
}

/* ==========================================================================
   Ordering Guide
   ========================================================================== */
/* =========================
   Notice Balloon
   - 吹き出し
   ========================= */
.guide_notice{
  --notice-pad-x: 20px;
  --notice-pad-y: 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(60%, 42rem);
  margin: 0 0 28px;
  padding: var(--notice-pad-y) var(--notice-pad-x);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  opacity: 0;
  transform: translateY(40px);
}
.guide_notice::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255,255,255,.72);
}
.guide_notice::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  z-index: -1;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 11px solid rgba(0,0,0,.10);
}
@media (max-width: 900px){
  .guide_notice{
    width: 100%;
    max-width: 100%;
  }
}

/* =========================
   Step Title Decorative Line
   - 見出し下ライン（横線＋斜線）
   ========================= */
.guide_step_head .guide_step_title{
  --leftLine: 58px;
  --gap: 12px;
  --y: 9px;
  --slashLen: 22px;
  --slashDeg: 35deg;
  position: relative;
  display: inline-block;
  padding-bottom: 22px;
}
.guide_step_head .guide_step_title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--y);
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    #111 0 var(--leftLine),
    transparent var(--leftLine) calc(var(--leftLine) + var(--gap)),
    #111 calc(var(--leftLine) + var(--gap)) 100%
  );
}
.guide_step_head .guide_step_title::before{
  content: "";
  position: absolute;
  left: var(--leftLine);
  bottom: var(--y);
  width: var(--slashLen);
  height: 1px;
  background: #111;
  transform-origin: left center;
  transform: rotate(var(--slashDeg));
}

/* =========================
   Ordering Guide - 3 Steps
   ========================= */
.guide_step{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 18px 18px;
  background: rgba(255,255,255,.82);
  transition: transform .3s ease, box-shadow .3s ease;
}
.guide_step_head{
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.guide_step_num{
  margin: 0;
}
.guide_step_title{
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 22px;
}

/* =========================
   Card Decorative Line
   - カード見出し用
   ========================= */
.card-title{
  position: relative;
  display: inline-block;
  padding-bottom: 24px;
}
.card-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    #111 0 60px,
    transparent 60px 78px,
    #111 78px 100%
  );
}
.card-title::before{
  content: "";
  position: absolute;
  left: 60px;
  bottom: 12px;
  width: 2px;
  height: 1px;
  background: #111;
  transform-origin: left center;
  transform: rotate(35deg);
}

/* =========================
   3 Steps Body
   ========================= */
.guide_step_body{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.guide_step_illust{
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.guide_step_illust img{
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}
.guide_step_text{
  margin: 0;
  opacity: .9;
}

/* =========================
   Guide Details（details/summary）
   ========================= */
.guide_details{
  margin-top: 40px;
}
.guide_details > summary{
  list-style: none;
}
.guide_details > summary::-webkit-details-marker{
  display: none;
}
.guide_details_btn{
  --cta-pad: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--cta-pad);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: padding .26s ease;
}
.guide_details_btn:hover{
  background: #f5f5f5;
}
.guide_details_btn::after{
  content: "▾";
  line-height: 1;
  opacity: .75;
  transform: translateY(-1px);
  transition: transform .2s ease;
}
.guide_details[open] .guide_details_btn::after{
  transform: rotate(180deg);
}
.guide_details_panel{
  margin-top: 12px;
  padding: 50px 20px;
  border-radius: 0 0 14px 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}

/* =========================
   Guide Section
   ========================= */
.guide_group{
  margin-bottom: 60px;
}
.guide_heading{
  margin-bottom: 18px;
}
.guide_list{
  list-style: disc;
  padding-left: 1.2em;
}
.guide_list li{
  margin-bottom: 14px;
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */
.pricing_subtitle{
  position: relative;
  margin-top: 40px;
  margin-bottom: 16px;
}
.pricing_list{
  margin-bottom: 20px;
}
.pricing_list dt{
  margin-top: 20px;
}
.pricing_list dd{
  margin-left: 0;
  margin-top: 6px;
  opacity: .9;
}
.pricing_note{
  margin-top: 8px;
  opacity: .9;
}

/* ==========================================================================
   section: contact
   ========================================================================== */
/* --- ▼ セクションタイトル ---  */
.contact-title-text{
  display: inline-block;
  margin-left: -10px;
  color: var(--theme-red);
}
/* ▼ SERVICE セクションタイトルのテキストロゴ */
.contact-title-text .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px);
}
/* --- ▲ セクションタイトル ---  */
.contact_contents{
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center;     /* 上下中央 */
  margin-bottom: 80px;
}
.contact-box{
  width: 80%;
}
.contact-lead{
  margin-bottom: 80px;
}
.contact-lead-sub{
  margin-top: 25px;
  margin-bottom: 50px;
}
.contact-box input,
.contact-box textarea{
  width: 100%;
  padding: 8px 10px;
  margin-top: 23px;
  margin-bottom: 23px;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
}
.contact-box input{
  height: 65px;
}
.contact-box textarea{
  height: 153px;
}
/* 送信ボタン */
.contact-submit{
  display: block;
  width: 35vw;
  height: 80px;
  margin: 0 auto 0;
  border: none;
  background: #333;
  cursor: pointer;
  color: #fff;
}
/* メール送信用対策 */
.contact-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* メッセージ表示用 */
.contact-status{
  margin-top: 10px;
  min-height: 1.5em;
}
.contact-status--info{
  color: #555;
}
.contact-status--success{
  color: #1a7f3b;
}
.contact-status--error{
  color: #b00020;
}

/* ==========================================================================
   footer
   ========================================================================== */
.footer-inner{
  height: auto;
  padding: 50px 0;
}
.footer-inner dl dt{
  float: left;
  width: 80px;
}
.footer-inner dl dd{
  margin-left: 80px;
}
.footer-inner_flex_box{
  height: 100px;
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 10px 40px;
  border-top: #c6beb9 solid 1px;
}
.footer-inner_flex_box_child1{
  width: 50%;
  border-right: #c6beb9 solid 1px;
  /* padding-right: 200px; */
}
.footer-inner_flex_box_child2{
  padding-top: 15px;
}
.footer-link{
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-link:hover{
  color: #fff;
  text-decoration: none;
}
/* フッタを基準点に、サイン配置 */
.footer{
  position: relative;
  overflow: visible;
}
.footer-inner_flex_box_child1{
  position: relative;
}
.footer-inner_flex_box_child1 img{
  position: absolute;
  top: -70px;
  left: -50px;
  z-index: 5;
  width: clamp(180px, 30vw, 260px);
  height: auto;
  transform: rotate(-5deg);
  pointer-events: none;
}

/* ==========================================================================
   footer 最下部
   ========================================================================== */
footer{
  position: fixed;
  bottom: 0%;
  z-index: 5;
  width: 100%;
  padding: 10px 0;
  background: #1a1a1a;
  color: rgb(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* ==========================================================================
   アンカーリンク時のリンク位置調整 (base)
   ※ヘッダに被らないよう　SP側にも設定あり
   ========================================================================== */
#about{
  scroll-margin-top: 120px;
}
#contact{
  scroll-margin-top: 90px;
}

/* ==========================================================================
   アクセシビリティ用ユーティリティ
   ========================================================================== */
.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   プライバシーポリシー（フォーム内）
   ========================================================================== */
.form-privacy{
  margin: 18px 0 10px;
}
/* 白枠：幅は親に合わせ、文章は左 */
.form-privacy .privacy-box{
  padding: 16px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  text-align: left;
}
/* h3全体に center が当たっているので、ここで戻す */
.form-privacy .privacy-title{
  margin: 0 0 10px;
}
/* 本文 */
.form-privacy .privacy-inner{
  color: #2E3437; /* body色に合わせる */
}
.form-privacy .privacy-inner p{
  margin: 0 0 10px;
}
.form-privacy .privacy-inner p:last-child{
  margin-bottom: 0;
}
/* 同意チェック：左寄せで */
.form-privacy-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  cursor: pointer;
}
/* チェックボックス：濃いオレンジ + 白チェック（accent-color） */
.form-privacy input[type="checkbox"]{
  width: 28px;
  height: 28px;
  accent-color: #05922f;
  cursor: pointer;
}

/* ==========================================================================
   スパム対策チェック用
   ========================================================================== */
/* フォームを基準にする */
.cf-turnstile{
  transform-origin: left bottom;
  margin-bottom: 30px;
}