/*
Theme Name: うたかた株式会社
Description: 僕たち二人の物語
Version: 1.0
*/
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,
body { margin:0; padding:0; }
body { margin:0; font-family:sans-serif; line-height:1.8; color:#222; background:#fff; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.site-header { height:65px; display:flex; align-items:center; position:fixed; width:100%; z-index:100; background:rgba(255,255,255,0); transition:background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; }
.site-header.is-scrolled,
.site-header:has(.header-nav-area.is-open) { background:rgba(255,255,255,0.92); box-shadow:0 2px 12px rgba(0,0,0,0.06); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.header-logo { display:flex; align-items:center; gap:10px; padding-left:20px; flex-shrink:0; }
.header-logo a { display:block; flex-shrink:0; }
.header-logo img { width:260px; display:block; }
.site-title { margin:0; font-size:11px; font-weight:normal; line-height:1.2; color:#333; white-space:nowrap; }
.header-nav-area { flex:1; display:flex; justify-content:flex-end; padding:0 16px; }
.global-nav { display:flex; flex-direction:column; align-items:flex-end; gap:0;
font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;font-feature-settings:"palt"; letter-spacing:0.03em; line-height:1.8; font-weight:400; }
.main-menu,
.sub-menu { display:flex; align-items:center; margin:0; padding:0; list-style:none; }
.main-menu { gap:17px; line-height:1; }
.sub-menu { gap:12px; line-height:1; margin-top:6px; }
.main-menu a { font-size:13px; font-weight:bold; line-height:1; color:#333; }
.sub-menu a { font-size:10px; font-weight:normal; line-height:1; color:#333; }
.sub-menu li { display:flex; align-items:center; gap:6px; }
.sub-menu li::before { content:""; display:block; width:0; height:0; border-left:5px solid #ccc; border-top:3px solid transparent; border-bottom:3px solid transparent; }
.main-menu a:hover,
.sub-menu a:hover { opacity:0.7; }
.header-button { width:116px; height:40px; display:flex; align-items:center; justify-content:center; background:transparent; color:#3c375a; font-size:13px; font-weight:normal; line-height:1; white-space:nowrap; border:1px solid #3c375a; margin-right:10px }
.header-button:hover { opacity:0.85; }

.first-view { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; justify-content:center; align-items:center; }
.first-view-inner { position:relative; z-index:10; width:450px; height:auto; }
@media (max-width: 768px) {
  .first-view { align-items:start; width:100%; margin:0; padding:0; }
  .first-view-inner { margin-top:80px; }
  .first-view-inner picture { display:block; }
  .first-view-inner img { width:100%; height:auto; object-fit:cover; object-position:center center; display:block; }
}
@media (max-width: 450px) {
  .first-view-inner img { width:90%; margin:0 auto; }
}




/* Parallax layers — each fills .first-view; JS translates them on scroll. */
.fv-bg { position:absolute; inset:0; pointer-events:none; will-change:transform; background-repeat:no-repeat; }
/* z-index: back (1) → front (6). Mirrors the original background shorthand order. */
.fv-bg--sky        { background-image:url(images/bg02.png);      background-position:50% 0;      background-size:cover; z-index:1; }
.fv-bg--trees-back { background-image:url(images/left03.png);  background-position:20% 70%;    z-index:2; }
.fv-bg--moon       { background-image:url(images/left01.png);  background-position:10% 80%;    z-index:3; }
.fv-bg--castle     { background-image:url(images/left02.png);  background-position:0% 100%;    z-index:4; }
.fv-bg--trees-mid  { background-image:url(images/right02.png); background-position:80% 80%;    z-index:5; }
.fv-bg--trees-near { background-image:url(images/right01.png); background-position:100% 100%;  z-index:6; }
.fv-bg--kumo-left  { background-image:url(images/kumo.png);    background-position:0% 0%;      background-repeat:repeat-x; z-index:8; animation:kumo-drift 10s linear infinite; }
@keyframes kumo-drift {
  from { background-position-x:0; }
  to   { background-position-x:574px; } /* = kumo.png の自然幅。タイル1個分ぴったり動かしてシームレスにする */
}
.fv-scroll { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; z-index:20; pointer-events:none; font-size:10px; font-weight:bold; letter-spacing:0.2em; color:#f2e9dd; }
.fv-scroll-line { display:block; position:relative; width:1px; height:50px; background:rgba(242,233,221,0.4); overflow:hidden; }
.fv-scroll-line::before { content:""; position:absolute; top:0; left:0; width:100%; height:50%; background:#f2e9dd; animation:fv-scroll-pulse 1.8s cubic-bezier(0.65,0,0.35,1) infinite; }
@keyframes fv-scroll-pulse { 0% { transform:translateY(-100%); } 100% { transform:translateY(200%); } }

/* ===== ページ読込時のローディング → 刀切り演出 ===== */
.page-intro { position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; animation:pi-vanish 0s linear 2.4s forwards; animation-play-state:paused; }
.page-intro.is-ready { animation-play-state:running; }
.page-intro-half { position:absolute; inset:0; background:url(images/opening_bg.png) center/cover no-repeat; will-change:transform,opacity; animation-play-state:paused; }
.page-intro-half--tl { clip-path:polygon(0 0, 100% 0, 0 100%); animation:pi-half-tl 1.5s cubic-bezier(0.45,0,0.2,1) 0.7s forwards; animation-play-state:paused; }
.page-intro-half--br { clip-path:polygon(100% 0, 100% 100%, 0 100%); animation:pi-half-br 1.5s cubic-bezier(0.45,0,0.2,1) 0.7s forwards; animation-play-state:paused; }
.page-intro.is-ready .page-intro-half--tl,
.page-intro.is-ready .page-intro-half--br { animation-play-state:running; }
.page-intro-loader { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity 0.5s ease; }
.page-intro.is-ready .page-intro-loader { opacity:0; pointer-events:none; }
.page-intro-spinner { width:42px; height:42px; border:2px solid rgba(200,169,108,0.25); border-top-color:#c8a96c; border-radius:50%; animation:pi-spin 0.9s linear infinite; }
.page-intro-loading-text { margin:0; color:#c8a96c; font-size:11px; font-weight:bold; letter-spacing:0.35em; }
@keyframes pi-spin { to { transform:rotate(360deg); } }
@keyframes pi-half-tl {
  0%   { transform:translate(0,0); opacity:1; }
  100% { transform:translate(-80vw,-80vh); opacity:0; }
}
@keyframes pi-half-br {
  0%   { transform:translate(0,0); opacity:1; }
  100% { transform:translate(80vw,80vh); opacity:0; }
}
@keyframes pi-vanish { to { visibility:hidden; } }
@media (max-width: 450px) {
  .fv-bg--trees-back { background-image:url(images/left03.png);  background-position:0px 70%;     z-index:2; }
  .fv-bg--moon       { background-image:url(images/left01.png);  background-position:-50px 80%;   z-index:3; }
  .fv-bg--castle     { background-image:url(images/left02.png);  background-position:-100px 100%; z-index:4; }
  .fv-bg--trees-mid  { background-image:url(images/right02.png); background-position:60% 80%;     z-index:5; }
  .fv-bg--trees-near { background-image:url(images/right01.png); background-position:20% 100%;    z-index:6; }
}





.section-inner { max-width:1080px; width:calc(100% - 40px); margin:0 auto; }
.section-label { margin:0 0 14px; font-size:14px; font-weight:bold; color:#777; letter-spacing:0.12em;   font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;font-feature-settings:"palt";
}

.section-inner h2 {   font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;font-feature-settings:"palt"; letter-spacing:0.03em; line-height:1.8; font-weight:400;}
 }
.section-lead { max-width:720px; margin:0 auto 38px; font-size:16px; line-height:2; }


.opening-section { background:url(images/opening_bg.png) no-repeat 50% 0; background-size:cover; padding:80px 0; text-align:center; }
.opening-section .section-label { color:#c8a96c; }
.opening-section h2 { margin:0 0 0px; font-size:36px; color:#ffffff; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; letter-spacing:0.03em; line-height:1.8; font-weight:400; }
.opening-section .section-lead { color:#cfd2e4; margin:10px 0 30px 0; }
.opening-section ul { display:flex; gap:24px; margin:0; padding:0; list-style:none; text-align:center; }
.opening-section li { flex:1; position:relative; padding:24px; border-radius:0; background:transparent; }
.opening-section li::before { content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(#c8a96c,#c8a96c) top 14px left 14px / 26px 1px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) top 14px left 14px / 1px 26px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) top 14px right 14px / 26px 1px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) top 14px right 14px / 1px 26px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) bottom 14px left 14px / 26px 1px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) bottom 14px left 14px / 1px 26px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) bottom 14px right 14px / 26px 1px no-repeat,
    linear-gradient(#c8a96c,#c8a96c) bottom 14px right 14px / 1px 26px no-repeat,
    url(images/opening_li_bg.png) center/cover no-repeat,
    #f1e8d2;
  filter:url(#washi-torn);
}
.opening-section li > * { position:relative; z-index:1; }
.opening-section li img { width:120px; height:auto; display:block; margin:0 auto; border-radius:0; }
.opening-section li h3 { position:relative; margin:0 0 4px; padding-bottom:24px; font-size:22px; color:#1a2342; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; letter-spacing:0.06em; line-height:1.5; font-weight:500; }
.opening-section li h3::after  { content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:90px; height:1px; background:#c8a96c; }
.opening-section li h3::before { content:""; position:absolute; left:50%; bottom:5px; width:7px; height:7px; background:#c8a96c; transform:translateX(-50%) rotate(45deg); z-index:1; }
.opening-section li p { margin:0; font-size:14px; line-height:1.95; color:#1a2342; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; }
.opening-section .opening-tags { display:block; margin-top:22px; padding-top:16px; font-size:11px; letter-spacing:0.08em; color:#5a527a; border-top:1px solid rgba(200,169,108,0.4); }

@media (max-width: 768px) {
  /* Opening：スマホでは2列グリッド */
  .opening-section ul { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; width:100%; margin:0; padding:0; list-style:none; }
  .opening-section li { margin:0; padding:20px 14px; }
  .opening-section li img { width:90px; height:auto; display:block; margin:0 auto; }
  .opening-section li h3 { margin:0 0 4px; padding-bottom:20px; font-size:16px; line-height:1.5; }
  .opening-section li h3::after { width:60px; bottom:6px; }
  .opening-section li h3::before { width:6px; height:6px; bottom:3px; }
  .opening-section li p { margin:0; font-size:12px; line-height:1.9; }
}

/* ===== メンバー（我らの布陣）セクション ===== */

.member-section .section-label { margin:0 0 14px; }
.member-section h2 { margin:0 0 20px; font-size:36px; line-height:1.5; }
.member-section .section-lead { margin:0 0 40px; font-size:16px; line-height:2; }
.member-section { padding:80px 0; background:url(images/member_bg.png); text-align:center; }
.member-section .section-inner { max-width:1080px; margin:0 auto; padding:0; }
.member-section .section-label { color:#c8a96c; }
.member-section h2 { font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; font-size:36px; margin:0 0 ; font-weight:400; letter-spacing:0.05em; }
.member-list { display:flex; flex-direction:column; gap:24px; margin:0; padding:0; list-style:none; text-align:left; }
.member-card { display:grid; grid-template-columns:180px 1fr; gap:32px; padding:24px; background:#ffffff; border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,0.05); }
.member-card-photo { width:160px; height:160px;  margin:0 auto; }
.member-card-photo img { width:160px; height:160px; border-radius:100% }
.member-card-info { display:flex; flex-direction:column; }
.member-card-name { margin:0 0 0; padding-bottom:14px; border-bottom:1px solid #e5e7ee; line-height:1.4; }
.member-card-name-jp { font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-size:22px; font-weight:500; color:#1a2342; letter-spacing:0.06em; margin-right:16px; }
.member-card-name-en { font-family:Georgia,"Times New Roman",serif; font-size:14px; color:#7a8094; letter-spacing:0.04em; }
.member-card-fields { display:grid; grid-template-columns:90px 1fr; column-gap:0px; row-gap:0; margin:0; }
.member-card-fields dt,
.member-card-fields dd { margin:0; padding:10px 0; border-bottom:1px solid #e5e7ee; font-size:14px; line-height:1.7; }
.member-card-fields dt { color:#1a2342; font-weight:bold; }
.member-card-fields dd { color:#3a3f55; }
.member-card-link { align-self:flex-end; margin-top:14px; font-size:13px; color:#3c5d99; text-decoration:none; letter-spacing:0.05em; }
.member-card-link span { font-size:10px; margin-left:4px; }
.member-card-link:hover { opacity:0.7; }
@media (max-width: 768px) {
  .member-section { padding:60px 0; }
  .member-section h2 { font-size:24px; margin:0 0 32px; }
  .member-card { grid-template-columns:1fr; gap:20px; padding:20px; }
  .member-card-photo img { }
  .member-card-name { text-align:center; }
  .member-card-name-jp { font-size:18px; display:block; margin-bottom:4px; margin-right:0; }
  .member-card-name-en { font-size:12px; }
  .member-card-fields { grid-template-columns:80px 1fr; column-gap:16px; }
  .member-card-fields dt,
  .member-card-fields dd { padding:10px 0; font-size:13px; }
}

.body-section { position:relative; padding:120px 0 100px; background:#f1e8d2 url(images/bg.png) center/cover fixed; overflow:hidden; }
.body-section .section-inner { display:flex; align-items:flex-start; justify-content:center; gap:90px; position:relative; z-index:2; }
.body-vertical { flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding-top:10px; }
.body-vertical-text { writing-mode:vertical-rl; margin:0; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; font-size:34px; color:#1a2342; letter-spacing:0.18em; line-height:1.95; font-weight:500; }
.body-vertical-line { display:block; width:1px; height:60px; background:#c8a96c; margin-top:30px; }
.body-seal { display:inline-block; writing-mode:vertical-rl; margin-top:16px; padding:10px 7px; width:100px }
.body-content { flex:0 1 480px; padding-top:０; }
.body-content p { margin:0 0 28px; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; font-size:16px; color:#000; line-height:2; letter-spacing:0.06em; }
.body-content p:last-child { margin-bottom:0; }
.body-watermark { position:absolute; left:0; right:0; bottom:60px; margin:0; text-align:center; font-family:Georgia,"Times New Roman",serif; font-size:60px; color:rgba(200,169,108,0.28); line-height:1.25; letter-spacing:0.02em; font-style:italic; font-weight:400; pointer-events:none; z-index:1; }
@media (max-width: 768px) {
  .body-seal { margin-bottom:20px; }
  .body-section .section-inner { display:block; }
  .body-section .section-inner > img { width:100%; height:260px; margin-bottom:28px; }
  .body-section .section-inner > div > p { font-size:15px; line-height:1.9; }
  .body-section .section-inner > div > p.body-vertical-text { font-size:24px; }

}

.service-section { padding:80px 0; background:#ffffff; }
.service-section .section-inner { max-width:1080px; margin:0 auto; padding:0 20px; }
.service-section .section-label { margin:0 0 14px; }
.service-section h2 { margin:0 0 20px; font-size:36px; line-height:1.5; }
.service-section .section-lead { margin:0 0 40px; font-size:16px; line-height:2; }
.service-section dl { display:grid; grid-template-columns:240px 1fr; margin:0; border-top:1px solid #dddddd; border-left:1px solid #dddddd; overflow:hidden; }
.service-section dt,
.service-section dd { margin:0; padding:16px 18px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; }
.service-section dt { font-weight:bold; background:#fff; color:#c8a96c; }
.service-section dd { background:#fff; line-height:2; }






footer { padding:5px 10px; background:#000e1f; color:#fff; text-align:center; }
footer p { margin:0; }
footer small { font-size:12px; }
footer address { font-size:12px; text-style:normal; color:#fff }

.works-section { padding:80px 0; background:#f7f7f7; text-align:center; }
.works-section h2 { margin:0 0 20px; font-size:36px; line-height:1.5; }
.works-section .section-lead { max-width:780px; margin:0 auto 40px; font-size:16px; line-height:2; }
.works-section ul { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:0; padding:0; list-style:none; text-align:left; }
.works-section li { background:#ffffff; border-radius:20px; overflow:hidden; }
.works-section li img { width:100%; height:220px; object-fit:cover; display:block; }
.works-section li h3 { margin:24px 24px 12px; font-size:20px; line-height:1.5; }
.works-section li p { margin:0 24px 28px; font-size:15px; line-height:1.9; }
.flow-section { padding:80px 0; background:#ffffff; text-align:center; }
.flow-section h2 { margin:0 0 20px; font-size:36px; line-height:1.5; }
.flow-section .section-lead { max-width:780px; margin:0 auto 40px; font-size:16px; line-height:2; }
.flow-section ol { display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; margin:0; padding:0; list-style:none; counter-reset:flow-number; text-align:left; }
.flow-section li { position:relative; padding:32px 24px 28px; background:#f7f7f7; border-radius:20px; counter-increment:flow-number; }
.flow-section li::before { content:counter(flow-number, decimal-leading-zero); display:block; margin:0 0 20px; font-size:32px; font-weight:bold; line-height:1; color:#cccccc; }
.flow-section li h3 { margin:0 0 14px; font-size:18px; line-height:1.5; }
.flow-section li p { margin:0; font-size:14px; line-height:1.9; }
.price-section { padding:80px 0; background:#f7f7f7; text-align:center; }
.price-section h2 { margin:0 0 20px; font-size:36px; line-height:1.5; }
.price-section .section-lead { max-width:780px; margin:0 auto 40px; font-size:16px; line-height:2; }
.price-section ul { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:0 0 24px; padding:0; list-style:none; text-align:left; }
.price-section li { padding:36px 28px; background:#ffffff; border-radius:20px; }
.price-section li h3 { margin:0 0 24px; font-size:18px; line-height:1.5; text-align:center; }
.price-section .price { margin:0 0 10px; text-align:center; line-height:1.2; }
.price-section .price strong { font-size:30px; line-height:1; }
.price-section .price span { font-size:14px; font-weight:bold; }
.price-section li small { display:block; text-align:center; font-size:12px; line-height:1.8; color:#666666; }
.price-section li p { margin:0 0 18px; font-size:15px; line-height:1.9; }
.price-section li p:last-child { margin-bottom:0; }
.price-section .section-inner > p:last-child { margin:0; }
.price-section .section-inner > p:last-child small { font-size:12px; line-height:1.8; color:#666666; }


.cta-section { padding:80px 0; background:url(images/cta_bg.png) no-repeat 50% 100%; color:#ffffff; text-align:center; }
.cta-section .section-label { color:#c8a96c; }
.cta-section h2 { margin:0 0 20px; font-size:36px; line-height:1.5; }
.cta-section .section-lead { max-width:780px; margin:0 auto 36px; font-size:16px; line-height:2; color:#cfd2e4; }
.cta-section a { display:inline-block; width:100%; padding:18px 36px; color:#222222; font-size:16px; font-weight:normal; text-decoration:none;
font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif; font-feature-settings:"palt"; letter-spacing:0.06em;
color:#fff; border:1px solid #fff }
.cta-section a:hover { opacity:0.8; }
.cta-section small { display:block; margin:20px 0 0; font-size:12px; line-height:1.8; color:#cccccc; }

/* ===== 第13章：レスポンシブ対応 修正版 ===== */
@media (max-width: 768px) {
  .section-inner { width:calc(100% - 32px); max-width:none; margin:0 auto; }
  .opening-section,
  .service-section,
  .works-section,
  .flow-section,
  .price-section,
  .cta-section,
  .body-section { padding-top:48px; padding-bottom:48px; }
  .opening-section h2,
  .service-section h2,
  .works-section h2,
  .flow-section h2,
  .price-section h2,
  .cta-section h2,
  .body-section h2 { font-size:28px; line-height:1.5; }
  .section-lead { margin-bottom:32px; font-size:15px; line-height:1.9; }
  /* Header */
  .site-header { height:auto; padding:14px 0; }
  .site-header .section-inner { display:block; }
  .site-title { margin:0 0 10px; text-align:center; }
  .site-title img { max-height:36px; }
  .site-nav ul { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 16px; margin:0; padding:0; }
  .site-nav a { font-size:11px; }

  /* Service */
  .service-section .section-inner { padding-left:0; padding-right:0; }
  .service-section dl { display:block; width:100%; }
  .service-section dt,
  .service-section dd { width:100%; margin:0; padding:18px 20px; border-right:1px solid #dddddd; }
  /* Works */
  .works-section ul { display:grid; grid-template-columns:1fr; gap:20px; width:100%; margin:0; padding:0; }
  .works-section li img { height:220px; }
  /* Flow */
  .flow-section ol { display:grid; grid-template-columns:1fr; gap:20px; width:100%; margin:0; padding:0; }
  .flow-section li { padding:28px 24px; }
  /* Price */
  .price-section ul { display:grid; grid-template-columns:1fr; gap:20px; width:100%; margin:0 0 24px; padding:0; }
  .price-section li { padding:32px 24px; }

}
/* ========================================
   第14章：スマホ用ハンバーガーメニュー
   ======================================== */
/* PCではハンバーガーボタンを非表示 */
.menu-toggle { display:none; }
/* PC用：header-nav-areaの中でナビとボタンを横並びにする */
.header-nav-area { display:flex; align-items:center; margin-left:auto; padding:0; }
.header-nav-area .global-nav { margin-right:30px; }
.header-nav-area .header-button { display:flex; justify-content:center; align-items:center; }
/* スマホ表示 */
@media (max-width: 768px) {
  .site-header { z-index:1000; display:flex; align-items:center; justify-content:space-between; height:65px; padding:0 16px; box-sizing:border-box; }
  .header-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; padding-left:0; }
  .header-logo a { display:block; line-height:1; }
  .header-logo img { width:150px; height:auto; display:block; }
  .site-title { margin:0; font-size:12px; line-height:1.2; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0; border:none; border-radius:8px; background:transparent; cursor:pointer; flex-shrink:0; }
  .menu-toggle span { display:block; width:22px; height:2px; margin:0 auto; background:#333333; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease; }
  .menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity:0; }
  .menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .header-nav-area { display:none; position:absolute; top:65px; left:0; width:100%; padding:0 16px 20px; box-sizing:border-box; background:#f7f7f7; z-index:1001; box-shadow:0 8px 20px rgba(0, 0, 0, 0.08); }
  .header-nav-area.is-open { display:block; }
  .header-nav-area .global-nav { margin-right:0; }
  .main-menu,
  .sub-menu { display:block; width:100%; margin:0; padding:0; }
  .main-menu li,
  .sub-menu li { display:block; border-bottom:1px solid #e3e3e3; }
  .main-menu a,
  .sub-menu a { display:block; padding:22px 0; font-size:13px; font-weight:500; line-height:1.5; text-align:center; }
  .sub-menu { margin-top:0; }
  .sub-menu li { gap:0; }
  .sub-menu li::before { display:none; }
  .header-nav-area .header-button { width:100%; max-width:none; height:56px; margin-top:20px; font-size:14px; }
}
/* 固定ページ */
.page-main { padding-top:60px; padding-bottom:60px; }
.page-content { max-width:800px; margin:0 auto; }
.page-title { margin-bottom:32px; font-size:32px; line-height:1.5; text-align:center; }
.page-body { font-size:16px; line-height:1.9; }
.page-body h2 { margin-top:48px; margin-bottom:20px; padding-bottom:12px; font-size:24px; line-height:1.5; border-bottom:1px solid #ddd; }
.page-body h3 { margin-top:36px; margin-bottom:16px; font-size:20px; line-height:1.5; }
.page-body p { margin-bottom:20px; }
.page-body ul,
.page-body ol { margin-bottom:24px; }
.page-body li { margin-bottom:8px; }
.page-body table { width:100%; margin-top:24px; margin-bottom:24px; border-collapse:collapse; }
.page-body th,
.page-body td { padding:14px 16px; border:1px solid #ddd; text-align:left; vertical-align:top; }
.page-body th { width:30%; background:#F7F7F7; font-weight:700; }


/*--------------------------------------------------------------------------------
 *
 * 問い合わせフォーム
 *
--------------------------------------------------------------------------------*/
dl.form{ width:100%; margin:30px auto 0 auto; }
dl.form dt,dl.form dd { padding:30px 0; }
dl.form dt { clear:left; float:left; width:33%; font-size:14px; border-top:1px solid #ccc; }
dl.form dt:first-child { border-top:0; }
dl.form dd { margin-left:33%; border-top:1px solid #ccc; }
dl.form dt:first-child,
dl.form dt:first-child + dd { border-top:0; }

@media screen and (max-width:768px){
   dl.form{ width:100%; }
   dl.form dt,dl.form dd { padding:0; }
   dl.form dt { clear:both; float:none; width:100%; font-size:14px; border-top:1px solid #ccc; padding:20px 0 10px 0; }
   dl.form dd { margin-left:0%; border-top:none; padding-bottom:20px; }
}

/* ------------------------------プレースホルダーの色・サイズ指定------------------------------　*/
input::-webkit-input-placeholder { color:#999999; font-size:14px; }
input:-moz-placeholder { color:#999999; font-size:14px; }
textarea::-webkit-input-placeholder { color:#999999; font-size:14px; }
textarea:-moz-placeholder { color:#999999; font-size:14px; }

/* ------------------------------コンタクトフォーム７------------------------------　*/
div.wpcf7 { display:block; width:100%; margin:0 auto!important; box-shadow:none; background:transparent; }
div.wpcf7 p { padding:0; margin:0; line-height:2; }
div.wpcf7 input, .wpcf7 textarea , .wpcf7 select { width:100%; border:1px solid #dce5eb; padding:20px; font-size:16px; border-radius:2px; background:#f1f5f7; }
div.wpcf7 textarea { height:215px; }
div.wpcf7 select { height:60px; padding:15px; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border:1px solid #009de1; }
.wpcf7-captchac { border:1px solid #ccc; }
span.wpcf7-list-item { margin:0!important; }

@media screen and (max-width:768px){
   div.wpcf7 { width:100%; }
   div.wpcf7 p { margin:0; }
   div.wpcf7 input, .wpcf7 textarea , .wpcf7 select { padding:10px; }
}

/* ------------------------------エラー個所をわかりやすく表示------------------------------　*/
.wpcf7 .wpcf7-not-valid { background:#ffb6c1; }
.wpcf7 span.wpcf7-not-valid-tip { font-size:80%; }
.wpcf7 .wpcf7-response-output {margin:10px 0 0; padding:8px 35px 8px 14px; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px; -moz-border-radius:4px; border-radius:4px; }
.wpcf7 .wpcf7-validation-errors { color:#B94A48; background-color:#F2DEDE; border:1px solid #EED3D7;}
.wpcf7 .wpcf7-mail-sent-ok { color:#3A87AD; background-color:#D9EDF7; border:1px solid #BCE8F1;}
/* 必須赤色表示 */
.wpcf7 .required { color: #000000;}
/* 任意緑色表示 */
.wpcf7 .any{ color: #080;}
select { background:#ffffff; border:1px solid #cccccc; border-radius:3px; color:#0C2245; font-size:14px; height:40px; line-height:30px; text-align:left; text-indent:5px; vertical-align:middle; width:100%; }
.hissu{ background:#cd4a38; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-weight:bold; border-radius:3px; font-size:10px; }
.nini{ background:#777777; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-weight:bold; border-radius:3px; font-size:10px; }

/* ------------------------------送信ボタン------------------------------　*/
div.wpcf7 input[type="submit"] {  }
div.wpcf7 input.wpcf7-submit { -webkit-appearance:none; margin:0 auto; background:none; display:block; font-size:16px; width:100%; height:100px; margin:0 auto; border:2px solid #fff!important; border-radius:5px; color:#fff; background:linear-gradient(-135deg , #b9872d, #70471a); }
div.wpcf7 input.wpcf7-submit:hover { opacity:0.8; transition:.3s ease; }

/* ------------------------------チェックボックスのデザイン------------------------------　*/
input[type=checkbox] { display:none; }
.wpcf7-list-item  { padding:10px 0; }
.wpcf7-list-item-label { position:relative; padding:0 20px 0 45px; top:0px; }
.wpcf7-list-item-label:hover:after { border-color:#dce5eb; }
.wpcf7-list-item-label:after,  .wpcf7-list-item-label:before { position:absolute; content:""; display:block; top:50%; }
.wpcf7-list-item-label:after { left:0px; margin-top:-20px; width:36px; height:36px; border:1px solid #dce5eb; border-radius:3px; background:#f1f5f7; z-index:997; }
.wpcf7-list-item-label:before { left:15px; margin-top:-9px; width:5px; height:9px; border-right:3px solid #c1272d; border-bottom:3px solid #c1272d; transform:rotate(45deg); opacity:0; z-index:998; }
input[type=checkbox]:checked + .wpcf7-list-item-label:before { opacity:1; }

input[type=radio] { display:none; }
input[type=radio] + .wpcf7-list-item-label:after { border-radius:100%!important }
input[type=radio] + .wpcf7-list-item-label:before { border:none; width:10px; height:10px; border-radius:5px; background:#102942; left:14px; margin-top:-6px; }
input[type=radio]:checked + .wpcf7-list-item-label:before { opacity:1; }

@media screen and (max-width:768px){
   .wpcf7-list-item  { padding:10px 0; }
}