/*
Theme Name: LogicTRIBE
Theme URI: https://logictribe.net/
Description: LogicTRIBE（AIブログ記事作成ツール）のコーポレート／ランディングページ用テーマ。トップページはランディングページ、投稿は「お知らせ」として使います。
Author: DeltaTRIBE
Version: 1.14.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: logictribe
*/

html{scroll-behavior:smooth;scroll-padding-top:80px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{margin:0;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#141413;background:#faf9f5;}
h1,h2,h3{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;}
a{color:#00857c;}
a:hover{color:#00a99d;}
.illus{display:block;width:100%;height:auto;}
.section{padding-block:96px;}
@media (max-width:700px){.section{padding-block:60px;}}
.section-inner{max-width:1180px;margin:0 auto;padding-inline:24px;}
.section-head{max-width:660px;margin-bottom:48px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:0.1em;color:#00857c;margin-bottom:12px;}
.eyebrow::before{content:"";width:22px;height:2px;background:#00a99d;display:inline-block;}
.h2{font-size:clamp(23px,3.1vw,33px);font-weight:900;line-height:1.4;margin:0;letter-spacing:0.01em;}
.lead{font-size:14.5px;line-height:1.9;color:#5a564b;margin:14px 0 0;}
#features .card h3,#how .card h3{border-bottom:1px solid #00a99d;padding-bottom:12px;}
#how .card h3{margin-bottom:2px;}
.card{background:#ffffff;border:1px solid #e4e1d8;border-radius:18px;padding:26px;box-shadow:0 1px 2px rgba(20,20,19,0.04),0 8px 24px rgba(20,20,19,0.05);transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,20,19,0.10);}
.illus-panel{background:#e3f3f1;border-radius:20px;padding:26px;display:flex;align-items:center;justify-content:center;}
@media (max-width:900px){#how .card span{font-size:60px !important;}}
.pict-tile{width:56px;height:56px;border-radius:16px;background:#e3f3f1;display:flex;align-items:center;justify-content:center;flex:none;}
.pict-tile svg{width:34px;height:34px;}
.sec-tile.warm{background:#fbe9e3;}
.sec-tile{width:72px;height:72px;border-radius:20px;background:#e3f3f1;display:flex;align-items:center;justify-content:center;flex:none;}
@media (max-width:560px){.sec-tile{width:60px;height:60px;border-radius:16px;}.sec-tile svg{width:34px;height:34px;}}
.icon-tile{width:44px;height:44px;border-radius:12px;background:#e3f3f1;color:#00857c;display:flex;align-items:center;justify-content:center;flex:none;}
/* margin-left:auto eats the free space before space-between can share
   it out, so the bar reads logo ... nav buttons. */
.nav-links{display:flex;gap:30px;align-items:center;margin-left:auto;}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;}
/* Eight section anchors had grown wider than the space between the logo and
   the CTA. They live in one dropdown now; 料金 stays out because pricing is
   the highest-intent click on the page and should never cost a hover. */
.nav-group{position:relative;}
.nav-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;margin:0;border:0;background:none;font-family:inherit;font-size:14px;font-weight:600;color:#141413;cursor:pointer;}
.nav-toggle:hover{color:#00857c;}
.nav-caret{transition:transform .18s ease;}
.nav-sub{position:absolute;top:100%;left:-14px;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;}
.nav-sub-inner{display:flex;flex-direction:column;min-width:196px;padding:8px;background:#ffffff;border:1px solid #e9e6db;border-radius:14px;box-shadow:0 18px 34px rgba(20,20,19,0.12);}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub,.nav-group.is-open .nav-sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav-group:hover .nav-caret,.nav-group:focus-within .nav-caret,.nav-group.is-open .nav-caret{transform:rotate(180deg);}
.nav-sub a{min-height:42px;padding-inline:12px;border-radius:9px;font-size:14px;font-weight:600;color:#141413;white-space:nowrap;}
.nav-sub a:hover{background:#f4faf9;color:#00857c;}
.footer-link{text-decoration:none;}
.header-actions{display:flex;align-items:center;gap:10px;}
/* Partner colours, as specified: cream fill, orange rule, grey label.
   7.0:1 at rest and 4.6:1 on hover. */
.btn-partner{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:#fce8b6;color:#4d4d4d;border:1.5px solid #f7931e;border-radius:999px;font-weight:700;font-size:14px;padding:11px 20px;text-decoration:none;transition:background .16s ease;}
.btn-partner:hover{background:#fbb03b;color:#4d4d4d;}
/* Below the nav breakpoint the header has no room for a third control, so
   the same link rides in the burger panel instead. */
.nav-links .nav-partner{display:none;}
.nav-burger{display:none;}
@media (max-width:1020px){
  .nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;flex:none;padding:0;border:1px solid #d5d0c2;border-radius:12px;background:#ffffff;cursor:pointer;}
  .nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#141413;transition:transform .2s ease,opacity .2s ease;}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px 24px 12px;background:#ffffff;border-bottom:1px solid #e9e6db;box-shadow:0 18px 32px rgba(20,20,19,0.10);}
  .nav-links.is-open{display:flex;}
  .nav-links a{min-height:52px;border-bottom:1px solid #f1eee5;}
  .nav-links > a:last-child{border-bottom:none;}
  .btn-partner{display:none;}
  .nav-links .nav-partner{display:inline-flex;color:#96610a;font-weight:700;font-size:14px;}
  .nav-group{position:static;}
  .nav-toggle{display:none;}
  .nav-sub{position:static;padding-top:0;opacity:1;visibility:visible;transform:none;transition:none;}
  .nav-sub-inner{min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}
  .nav-sub a{min-height:52px;padding-inline:0;border-radius:0;border-bottom:1px solid #f1eee5;}
}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid-3{grid-template-columns:1fr;}}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr;}}
.pricing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
@media (max-width:1100px){.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.pricing-grid{grid-template-columns:1fr;}}
.two-col{display:flex;gap:56px;align-items:center;}
@media (max-width:940px){.two-col{flex-direction:column;align-items:stretch;gap:36px;}}
.reasons-illus{width:min(100%,620px);margin-inline:auto;}
/* 選ばれる理由：見出しまわりの調整（Illustrator入稿版に合わせる） */
#reasons .h2{font-size:clamp(23px,3.1vw,34px);}
@media (min-width:941px){
  #reasons{padding-top:72px;}
  #reasons .eyebrow{margin-bottom:27px;}
  #reasons .h2{line-height:1.594;}
  #reasons .lead{margin-top:23px;}
}
.reasons-list{margin-top:22px;}
@media (min-width:941px){#reasons .reasons-list{margin-top:33.5px;}}
@media (min-width:1240px){#reasons .lead{width:600px;}}
@media (min-width:941px){
  #reasons{position:relative;}
  #reasons .two-col > div:first-child{position:relative;z-index:1;}
  .reasons-illus{position:absolute;right:0;top:50%;transform:translateY(-50%);width:48.9%;max-width:none;margin:0;z-index:0;pointer-events:none;}
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}
@media (max-width:480px){.cta-row{flex-direction:column;align-items:stretch;}}
.btn-primary,.btn-secondary,.btn-light,.btn-ghost-light,.to-top{text-decoration:none;}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#00a99d;color:#ffffff;font-weight:700;padding:16px 32px;border-radius:999px;font-size:15px;white-space:nowrap;box-shadow:0 10px 24px rgba(0,133,124,0.3);transition:background .16s ease,transform .16s ease;}
.btn-primary:hover{background:#00857c;color:#ffffff;transform:translateY(-2px);}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#141413;font-weight:700;padding:16px 32px;border-radius:999px;font-size:15px;white-space:nowrap;border:1.5px solid #cfcabb;transition:border-color .16s ease,color .16s ease;}
.btn-secondary:hover{border-color:#00a99d;color:#00857c;}
.btn-light{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#ffffff;color:#00594f;font-weight:700;padding:16px 32px;border-radius:999px;font-size:15px;white-space:nowrap;transition:transform .16s ease,background .16s ease;}
.btn-light:hover{background:#dff5f1;color:#00594f;transform:translateY(-2px);}
.btn-ghost-light{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#ffffff;font-weight:700;padding:16px 32px;border-radius:999px;font-size:15px;white-space:nowrap;border:1.5px solid rgba(255,255,255,0.45);transition:border-color .16s ease,background .16s ease;}
.btn-ghost-light:hover{border-color:#ffffff;background:rgba(255,255,255,0.1);color:#ffffff;}
.logo-img{height:34px;width:auto;display:block;transition:height .25s ease;}
.logo-link{display:flex;align-items:center;min-height:44px;text-decoration:none;}
.site-header .logo-link{margin-right:auto;}
.footer-link{display:inline-flex;align-items:center;min-height:44px;color:#5a564b;font-size:15px;}
.legal-link{display:inline-flex;align-items:center;min-height:44px;color:#5a564b;font-size:15px;text-decoration:none;}
.legal-link:hover{color:#00857c;text-decoration:underline;}
@media (max-width:560px){.logo-img{height:25px;}.header-cta{padding:11px 16px;font-size:13px;}}
.problem-grid{display:grid;grid-template-columns:50% 1fr;align-items:center;}
.problem-illus{display:flex;justify-content:center;align-items:center;min-width:0;padding:0 24px;box-sizing:border-box;}
.problem-illus img{width:min(100%,560px);height:auto;display:block;}
.problem-copy{display:flex;justify-content:flex-start;padding:0 24px 0 40px;}
.problem-copy-inner{width:100%;max-width:526px;}
@media (max-width:940px){
  .problem-grid{grid-template-columns:1fr;gap:32px;}
  .problem-illus{justify-content:center;padding:0 24px;box-sizing:border-box;}
  .problem-illus img{width:100%;}
  .problem-copy{padding:0 24px;}
  .problem-copy-inner{max-width:none;}
}
.hero-grid{display:grid;grid-template-columns:50% 1fr;align-items:center;}
.hero-copy{display:flex;justify-content:flex-end;padding:0 40px 0 24px;}
.hero-copy-inner{width:100%;max-width:526px;}
.hero-illus{width:100%;min-width:0;box-sizing:border-box;}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-copy{justify-content:flex-start;padding:0 24px;}
  .hero-copy-inner{max-width:none;}
  .hero-illus{padding:0 24px;}
}
.site-header .section-inner{padding-block:14px;transition:padding-block .25s ease;}
.site-header.is-compact .section-inner{padding-block:6px;}
.site-header.is-compact .logo-img{height:28px;}
@media (max-width:560px){.site-header.is-compact .logo-img{height:22px;}}
.header-cta{padding:12px 24px;font-size:14px;}
@media (max-width:560px){.header-cta{padding:13px 16px;font-size:13px;}}
/* the burger is a fourth thing in a row that only just fitted three, so the
   narrowest phones get tighter gutters and a smaller pill */
@media (max-width:400px){
  .site-header .section-inner{padding-inline:16px;gap:10px;}
  .logo-img{height:22px;}
  .header-actions{gap:8px;}
  .header-cta{padding:11px 12px;font-size:12px;}
}
.site-header{backdrop-filter:blur(10px);border-bottom:1px solid rgba(186,212,221,0.35);transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease;}
.to-top{position:fixed;right:24px;bottom:24px;z-index:70;width:52px;height:52px;border-radius:50%;background:#00a99d;color:#ffffff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,133,124,0.32);transition:opacity .25s ease,transform .25s ease,background-color .16s ease;}
.to-top:hover{background:#00857c;color:#ffffff;}
@media (max-width:560px){.to-top{right:16px;bottom:16px;width:48px;height:48px;}}
.hero-section{margin-top:-73px;padding-top:132px;padding-bottom:68px;background-color:#eaf3f8;}
.hero-bg{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:0;pointer-events:none;will-change:transform;background-image:linear-gradient(100deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.8) 32%,rgba(255,255,255,0.32) 58%,rgba(255,255,255,0.04) 100%),url(assets/img/hero.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;}
.hero-grid{position:relative;z-index:1;}
@media (max-width:940px){.hero-bg{background-image:linear-gradient(180deg,rgba(255,255,255,0.93) 0%,rgba(255,255,255,0.8) 48%,rgba(255,255,255,0.42) 100%),url(assets/img/hero.jpg);}}
/* the shorter desktop padding is tuned for the two-column hero; once it
   stacks at 940px the illustration sits directly above the stat strip and
   needs the original room back */
@media (max-width:940px){.hero-section{padding-top:125px;padding-bottom:104px;}}
.cta-section{padding-block:88px;}
@media (max-width:700px){.cta-section{padding-block:60px;}}
.hero-badge-row{margin-bottom:32px;}
.hero-badge-row span{font-size:14px;}
.hero-title{font-size:clamp(26px,3.6vw,47.5px);font-weight:900;line-height:1.4;margin:0 0 28px;letter-spacing:0.01em;color:#0d2b28;}
@media (max-width:940px){
  /* 1cqw is one per cent of .hero-copy-inner, so the heading is measured
     against the column it actually sits in rather than the viewport — the
     two differ wherever the page is framed or scaled, and a viewport-based
     size was overflowing there and wrapping 「も、」「る。」 onto their own
     line. Both lines are ten full-width characters, which measure 10.10x
     the font size in this face, so 9.6cqw fills about 97% of the column. */
  .hero-copy-inner{container-type:inline-size;}
  .hero-title{text-align:center;font-size:min(9.6cqw,40px);}
  .hero-badge-row{text-align:center;}
  .hero-chips{justify-content:center;}
  /* the headline is the one thing a phone screen should land on, so it
     gets more room above and below than the desktop layout needs */
  .hero-badge-row{margin-bottom:44px;}
  .hero-title{margin-bottom:36px;}
  /* the pill only reads as centred once its text stops wrapping, and its
     side padding is a fixed 36px whatever the column does */
  .hero-badge-row span{font-size:clamp(10px,calc((100cqw - 36px) / 21.9),14px);}
}
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:760px){.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat-item{padding:24px 16px;text-align:center;border-right:1px solid #eceae1;}
.stat-item:last-child{border-right:none;}
@media (max-width:760px){.stat-item:nth-child(2n){border-right:none;}.stat-item:nth-child(-n+2){border-bottom:1px solid #eceae1;}}
.stat-num{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:44px;color:#00857c;line-height:1.2;padding-bottom:12px;border-bottom:1px solid #00a99d;}
.stat-num span{margin-left:10px;color:#5a564b;}
.mock-frame{border:1px solid #e4e1d8;border-radius:18px;overflow:hidden;background:#ffffff;box-shadow:0 1px 2px rgba(20,20,19,0.04),0 14px 36px rgba(20,20,19,0.08);}
.mock-bar{display:flex;gap:6px;padding:13px 18px;background:#f1efe7;border-bottom:1px solid #e4e1d8;}
.mock-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.mock-body{background:#f4f2ea;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#8a8579;padding:60px 24px;text-align:center;}
.plan-card{background:#ffffff;border:1px solid #e4e1d8;border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;gap:18px;transition:transform .18s ease,box-shadow .18s ease;}
.plan-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,20,19,0.1);}
#pricing .section-head .lead{margin-top:28px;}
.nowrap-pc{white-space:nowrap;}
@media (max-width:560px){.nowrap-pc{white-space:normal;}}
.br-pc{display:inline;}
@media (max-width:900px){.br-pc{display:none;}}
.br-md{display:inline;}
@media (max-width:640px){.br-md{display:none;}}
#pricing .plan-card a{text-decoration:none;}
#pricing .plan-card > div:first-child{padding-bottom:14px;border-bottom:1px solid #e4e1d8;}
#pricing .plan-card.rb1 > div:first-child{border-bottom-color:#b8372c;}
#pricing .plan-card.rb2 > div:first-child{border-bottom-color:#a9620f;}
#pricing .plan-card.rb3 > div:first-child{border-bottom-color:#8a6b00;}
#pricing .plan-card.rb4 > div:first-child{border-bottom-color:#16714b;}
#pricing .plan-card.rb5 > div:first-child{border-bottom-color:#1b4f96;}
.plan-card.enterprise{background:#e3f3f1;border-color:#bfe6e0;}
.plan-card.rb1{background:#ffffff;border-color:#f0cbc7;}
.plan-card.rb1 .plan-price{color:#b8372c;}
.plan-card.rb1 .btn-secondary{background:#fdeeed;border-color:#b8372c;color:#b8372c;}
.plan-card.rb1 .btn-secondary:hover{background:#b8372c;border-color:#b8372c;color:#ffffff;}
.plan-card.rb1 .btn-primary{background:#b8372c;box-shadow:0 10px 24px #b8372c4d;}
.plan-card.rb1 .btn-primary:hover{background:#93281f;}
.plan-card.rb2{background:#ffffff;border-color:#f2d7b6;}
.plan-card.rb2 .plan-price{color:#a9620f;}
.plan-card.rb2 .btn-secondary{background:#fdf2e6;border-color:#a9620f;color:#a9620f;}
.plan-card.rb2 .btn-secondary:hover{background:#a9620f;border-color:#a9620f;color:#ffffff;}
.plan-card.rb2 .btn-primary{background:#a9620f;box-shadow:0 10px 24px #a9620f4d;}
.plan-card.rb2 .btn-primary:hover{background:#8a4e09;}
.plan-card.rb3{background:#ffffff;border-color:#ecdfa6;}
.plan-card.rb3 .plan-price{color:#8a6b00;}
.plan-card.rb3 .btn-secondary{background:#fdf8e0;border-color:#8a6b00;color:#8a6b00;}
.plan-card.rb3 .btn-secondary:hover{background:#8a6b00;border-color:#8a6b00;color:#ffffff;}
.plan-card.rb3 .btn-primary{background:#8a6b00;box-shadow:0 10px 24px #8a6b004d;}
.plan-card.rb3 .btn-primary:hover{background:#6f5600;}
.plan-card.rb4{background:#ffffff;border-color:#bfe0cd;}
.plan-card.rb4 .plan-price{color:#16714b;}
.plan-card.rb4 .btn-secondary{background:#e9f6ef;border-color:#16714b;color:#16714b;}
.plan-card.rb4 .btn-secondary:hover{background:#16714b;border-color:#16714b;color:#ffffff;}
.plan-card.rb4 .btn-primary{background:#16714b;box-shadow:0 10px 24px #16714b4d;}
.plan-card.rb4 .btn-primary:hover{background:#0f5a3b;}
.plan-card.rb5{background:#eaf1fb;border-color:#c3d6ef;}
.plan-card.rb5 .plan-price{color:#1b4f96;margin-top:13px;}
.plan-card.rb5 .btn-secondary{background:#eaf1fb;border-color:#1b4f96;color:#1b4f96;}
.plan-card.rb5 .btn-secondary:hover{background:#1b4f96;border-color:#1b4f96;color:#ffffff;}
.plan-price{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:27px;color:#00857c;}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:13.5px;color:#3f3c34;}
.plan-list li{display:flex;gap:9px;align-items:flex-start;}
.faq-item{border-bottom:1px solid #e4e1d8;}
.faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item p{margin:0 0 24px;color:#5a564b;font-size:14.5px;line-height:1.9;}
.list-row{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #e4e1d8;}
.list-row:last-child{border-bottom:none;}
/* A full-bleed photograph behind a section, cropped from its centre, with
   a wash over the side the copy sits on. The picture is an <img> rather
   than a CSS background so it can be swapped from the canvas. */
.photo-band{position:relative;overflow:hidden;}
.photo-band > .photo-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
/* A drawn backdrop rather than a photograph. Its shapes are anchored to the
   artboard's edges, so it is stretched to the band instead of cropped to it:
   cover would eat 200px off each side of a 1425-wide drawing in a 1000-wide
   band and take the outer lobes with it. */
.photo-band > .photo-band-art{object-fit:fill;}
/* The rule between two bands runs the content column's width, not the full
   bleed: it borrows .section-inner's own box so it stays aligned with the
   cards under it at every width. #e4e1d8 is the card border. */
.band-rule{position:absolute;top:0;left:0;right:0;}
.band-rule > .section-inner > div{border-top:1px solid #e4e1d8;}
.photo-band > .photo-band-veil{position:absolute;inset:0;background:linear-gradient(90deg,#eaf3f8 0%,#eaf3f8 36%,rgba(234,243,248,0.7) 42%,rgba(234,243,248,0.25) 50%,rgba(234,243,248,0.02) 60%,rgba(234,243,248,0) 68%);}
.photo-band > .section-inner{position:relative;}
/* Lock the picture's vertical scale: it is drawn at the band's height and
   as wide as its own ratio demands, and the band clips the sides. Cover
   would switch to cropping top and bottom the moment the band grew wider
   than the picture's ratio, which is what moved the framing about. */
.photo-band-lock > .photo-band-img{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:none;object-fit:fill;}
/* The reseller hero. On a phone the office photograph has no room to sit
   beside the copy, so a portrait shot takes over: the picture holds a white
   panel from 19% of its height down, and the copy starts inside it. The
   panel was extended to 1800px tall so it covers any phone-sized band and
   never shows a seam against the section colour. */
.hero-band{padding-block:72px;}
.hero-band > .photo-band-pic{position:absolute;inset:0;display:block;}
.hero-band > .photo-band-pic > .photo-band-img{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:none;object-fit:fill;}
@media (max-width:640px){
  .hero-band{padding-top:190px;padding-bottom:56px;}
  .hero-band > .photo-band-pic > .photo-band-img{position:static;width:100%;height:100%;object-fit:cover;object-position:center top;}
  .hero-band > .photo-band-veil{display:none;}
  .hero-band .page-lead{margin-top:36px;}
}
/* On a phone the page title fills the same column the copy does: five
   full-width characters measure 5.05x the font size in this face, so
   100cqw / 5.05 sets it. 1cqw is one per cent of .section-inner, which is
   the column itself — the viewport would be wrong wherever the page is
   framed or scaled. Above phone widths five characters at that size become
   absurd, so the rule stops there. */
@media (max-width:480px){
  .hero-band > .section-inner{container-type:inline-size;}
  .hero-band h1{text-align:center;font-size:19.8cqw;line-height:1.3;}
}
/* A heading that keeps to one line on a phone by sizing itself to its
   column. Put the character count in --chars on the heading and the host
   class on the element that defines the column; the 1.04 is slack, so a
   font that measures a little wider than expected still fits. */
@media (max-width:480px){
  .h2-fit-host{container-type:inline-size;}
  .h2-fit{font-size:calc(100cqw / (var(--chars,13) * 1.04));}
}
/* Narrow screens have no empty right half to reveal, and the copy runs the
   full width, so the wash covers nearly all of it. */
@media (max-width:900px){
  .photo-band > .photo-band-veil{background:linear-gradient(90deg,#eaf3f8 0%,rgba(234,243,248,0.97) 52%,rgba(234,243,248,0.78) 100%);}
}
.table-scroll{overflow-x:auto;border:1px solid #e4e1d8;border-radius:18px;background:#ffffff;box-shadow:0 1px 2px rgba(20,20,19,0.04),0 10px 30px rgba(20,20,19,0.05);}
/* Scoped to the comparison table it was written for: as a bare `table`
   rule the 860px floor also reached article tables in WordPress, where
   it pushed them past the text column and off the side of a phone. */
.table-scroll table{border-collapse:collapse;width:100%;min-width:860px;}
.table-scroll thead th{text-align:left;font-family:"Zen Kaku Gothic New",sans-serif;font-size:14px;font-weight:700;color:#141413;padding:18px;background:#f4f2ea;border-bottom:2px solid #e4e1d8;white-space:nowrap;}
.table-scroll thead th.col-lt{background:#00857c;color:#ffffff;}
.table-scroll tbody th{text-align:left;font-weight:600;color:#5a564b;font-size:13px;padding:16px 18px;white-space:nowrap;vertical-align:top;border-top:1px solid #eceae1;background:#faf9f5;}
.table-scroll tbody td{font-size:13px;color:#4b473d;padding:16px 18px;border-top:1px solid #eceae1;vertical-align:top;line-height:1.8;}
.table-scroll tbody td.col-lt{background:#fffdea;color:#333333;}
.table-scroll tbody tr:first-child th,.table-scroll tbody tr:first-child td{border-top:none;}
.table-note{margin-top:14px;font-size:12px;color:#8a8579;line-height:1.85;}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,0.82);border:1px solid #c3dedb;color:#0a5f57;font-size:12.5px;font-weight:600;}

/* ---- states the landing page used to drive from its runtime ---------- */
.site-wrap{width:100%;background:#faf9f5;position:relative;}
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;}
.site-header{position:sticky;top:0;z-index:60;background-color:rgba(255,255,255,0.5);box-shadow:none;border-bottom-color:rgba(255,255,255,0.4);}
.site-header.is-compact{background-color:#ffffff;box-shadow:0 4px 18px rgba(20,20,19,0.08);border-bottom-color:rgba(186,212,221,0.55);}
.to-top{opacity:0;visibility:hidden;transform:translateY(12px);}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}

/* ---- news ------------------------------------------------------------ */
.news-list{list-style:none;margin:0;padding:0;border-top:1px solid #e4e1d8;}
.news-item{border-bottom:1px solid #e4e1d8;}
.news-item > a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:20px 4px;text-decoration:none;color:#141413;transition:background-color .16s ease;}
.news-item > a:hover{background:#f4faf9;color:#00857c;}
.news-date{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;font-weight:700;font-size:13px;color:#5a564b;letter-spacing:0.04em;flex:none;min-width:92px;}
.news-cat{font-size:11.5px;font-weight:700;color:#00594f;background:#e3f3f1;border-radius:999px;padding:5px 12px;flex:none;}
.news-title{font-size:15px;font-weight:600;line-height:1.7;flex:1 1 320px;min-width:0;}
.news-more{margin-top:32px;}
.news-empty{font-size:14.5px;color:#5a564b;padding:24px 4px;}

/* ---- company profile -------------------------------------------------- */
.profile-list{margin:0;border-top:1px solid #e4e1d8;}
.profile-list > div{display:flex;flex-wrap:wrap;gap:2px 28px;padding:18px 4px;border-bottom:1px solid #e4e1d8;}
.profile-list dt{flex:none;width:200px;font-size:14px;font-weight:700;line-height:1.9;color:#141413;}
.profile-list dd{flex:1 1 320px;min-width:0;margin:0;font-size:14.5px;line-height:1.9;color:#2f2c26;}
.profile-list dd ol{margin:0;padding-left:1.4em;}
.profile-list dd li + li{margin-top:.4em;}
@media (max-width:640px){.profile-list dt{width:100%;font-size:13px;color:#5a564b;}}

/* ---- numbered steps / marked lists, used by the reseller page --------- */
/* The step number reads as a numeral on the same line as the step's name,
   not as a badge above it, so the four cards line up across the row however
   long each name runs. */
.step-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #00a99d;}
.step-head .card-title{margin:0;flex:1 1 auto;min-width:0;}
.step-num{flex:none;font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;font-weight:900;font-size:34px;line-height:1;letter-spacing:0.02em;color:#00a99d;}
@media (max-width:1100px){.step-num{font-size:30px;}}
.card-title{font-size:16px;font-weight:700;line-height:1.6;margin:0 0 10px;}
.card-text{font-size:14px;line-height:1.9;color:#5a564b;margin:0;}
/* A card title that is separated from its body by a rule, the way the
   step cards are. */
.card-title-rule{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #00a99d;}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.check-list li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.9;color:#2f2c26;}
.check-list li::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;background:#e3f3f1;}
.check-list li::after{content:"";position:absolute;left:5px;top:14px;width:8px;height:4px;border-left:2px solid #00857c;border-bottom:2px solid #00857c;transform:rotate(-45deg);}
.fine-print{font-size:13px;line-height:1.9;color:#5a564b;margin:28px 0 0;}
.page-lead{font-size:15px;line-height:1.95;color:#2f2c26;margin:18px 0 0;max-width:62ch;}
/* The CTA block sits in a shrink-to-fit column, so its width is set by the
   widest line in it — the heading. The button row then fills that width and
   the two buttons split it evenly, instead of tapering to a point. */
@media (max-width:900px){.photo-band-pc > .photo-band-img{display:none;}}
.cta-block{width:fit-content;max-width:100%;margin-inline:auto;}
.cta-row-equal{width:100%;}
.cta-row-equal > a{flex:1 1 0;min-width:0;box-sizing:border-box;}
.cta-row-equal > .btn-light{border:1.5px solid transparent;}
.cta-row-sub{margin-top:22px;font-size:13.5px;color:rgba(255,255,255,0.82);}
.cta-row-sub a{color:#ffffff;font-weight:700;}

/* ---- blog ------------------------------------------------------------ */
/* お知らせ is a dated one-line list; the blog is the SEO surface, so its
   archive is a card grid with the thumbnail and the opening lines — the two
   things that decide whether a search visitor clicks a second article. */
.blog-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.blog-grid{grid-template-columns:1fr;gap:20px;}}
.blog-card{display:flex;background:#ffffff;border:1px solid #e4e1d8;border-radius:18px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,20,19,0.1);}
.blog-card > a{display:flex;flex-direction:column;width:100%;text-decoration:none;color:#141413;}
.blog-thumb{aspect-ratio:16/9;background:#eaf3f8;overflow:hidden;}
.blog-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.blog-thumb-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;font-weight:900;font-size:15px;letter-spacing:0.12em;color:#9ec6d4;}
.blog-card-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 20px 24px;}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.blog-card-title{font-size:16px;font-weight:700;line-height:1.65;}
.blog-card:hover .blog-card-title{color:#00857c;}
.blog-card-excerpt{font-size:13.5px;line-height:1.85;color:#5a564b;}
.blog-intro{margin-bottom:40px;}

/* ---- breadcrumb + inner pages ---------------------------------------- */
/* The landing page keeps the warm ivory; everything else is a reading page
   and gets white, so the teal breadcrumb bar reads as the divider between
   the header and the content. */
body:not(.home) .site-wrap{background:#ffffff;}
/* ...but the footer keeps the site's ivory, so the reading area ends on a
   visible colour change rather than running into the footer. */
body:not(.home) .site-wrap > footer{background:#faf9f5;}
.breadcrumb{background:#8fe2d8;border-bottom:1px solid #6fd3c7;}
.breadcrumb .section-inner{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding-block:0;}
.breadcrumb span,.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;line-height:1.5;}
.breadcrumb{color:#0d2b28;}
.breadcrumb a{color:#00594f;text-decoration:none;font-weight:600;}
.breadcrumb a:hover{color:#00332c;text-decoration:underline;}
.breadcrumb .sep{color:#2f7f74;}
.breadcrumb .current{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:560px){.breadcrumb .current{font-size:12.5px;}}

/* ---- article / static page ------------------------------------------- */
.page-hero{padding-block:72px 0;}
/* A post with a featured image opens on it: the image sits flush under the
   breadcrumb bar, above the date, and measures exactly the text column so the
   article reads as one block rather than a picture with a page beneath it. */
.page-hero.has-cover{padding-top:0;}
.entry-cover{margin:0 0 36px;}
.entry-cover img{display:block;width:100%;height:auto;border-radius:0 0 14px 14px;}
.entry{max-width:840px;margin:0 auto;padding:0 24px 96px;}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;}
.entry-title{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;font-size:clamp(24px,3vw,30px);font-weight:700;line-height:1.5;margin:0 0 28px;letter-spacing:0.01em;}
.entry-body{font-size:15.5px;line-height:1.95;color:#2f2c26;}
.entry-body > * + *{margin-top:1.4em;}
.entry-body h2{font-size:21px;font-weight:700;line-height:1.6;margin-top:2.2em;padding-bottom:12px;border-bottom:1px solid #00a99d;}
.entry-body h3{font-size:18px;font-weight:700;line-height:1.6;margin-top:1.9em;}
.entry-body img{max-width:100%;height:auto;border-radius:12px;}
.entry-body ul,.entry-body ol{padding-left:1.4em;}
.entry-body li + li{margin-top:.5em;}
/* The table of contents LogicTRIBE writes at the top of every article reads
   as ordinary body copy without a frame around it. */
.entry-body .logictribe-toc{padding:22px 26px;border:1px solid #d5d0c2;border-radius:16px;}
.entry-body .logictribe-toc strong{display:block;font-size:15px;line-height:1.6;}
.entry-body .logictribe-toc ul{margin:12px 0 0;padding-left:1.35em;}
.entry-body .logictribe-toc li + li{margin-top:.55em;}
.entry-body blockquote{margin-inline:0;padding:16px 20px;background:#ffffff;border-left:3px solid #00a99d;border-radius:0 12px 12px 0;}
.entry-body code{background:#f1efe7;border-radius:5px;padding:2px 6px;font-size:.92em;}
.entry-body pre{background:#141413;color:#f4f2ea;padding:18px 20px;border-radius:12px;overflow-x:auto;}
.entry-body pre code{background:none;padding:0;color:inherit;}
/* Article tables come from the generator as plain <table> markup of unknown
   width. They size to the text column and wrap; the scroll box is the escape
   hatch for a table with too many columns to ever fit, so that one scrolls
   inside its own frame instead of pushing the whole page sideways. */
.entry-body .table-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.entry-body table{width:100%;border-collapse:collapse;font-size:14.5px;}
.entry-body .table-scroll-x table{min-width:calc(var(--cols,2) * 140px);}
.entry-body .table-scroll-x:focus-visible{outline:2px solid #00a99d;outline-offset:3px;}
.entry-body th,.entry-body td{border:1px solid #e4e1d8;padding:12px 14px;text-align:left;vertical-align:top;overflow-wrap:anywhere;}
.entry-body th{background:#f4f2ea;font-weight:700;}
/* A table now shares the article column exactly, so it never breaks out;
   when it still cannot fit, it scrolls inside its own box. */
@media (max-width:560px){
  .entry-body table{font-size:13.5px;}
  .entry-body th,.entry-body td{padding:10px 11px;}
  .entry-body th{white-space:normal;}
}
.entry-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;max-width:840px;margin:0 auto 96px;padding:0 24px;}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid #e4e1d8;background:#ffffff;color:#141413;text-decoration:none;font-size:14px;font-weight:600;}
.pagination .page-numbers.current{background:#00857c;border-color:#00857c;color:#ffffff;}
.pagination .page-numbers:hover{border-color:#00a99d;color:#00857c;}
.pagination .page-numbers.current:hover{color:#ffffff;}


/* ---------------------------------------------------------------- */
/* Site-wide notice banner (theme-only: edited in the Customizer,    */
/* so it exists here and not in the artboard).                       */
/* ---------------------------------------------------------------- */
.site-notice{position:relative;z-index:70;padding:10px 20px;font-size:13.5px;line-height:1.7;font-weight:600}
.site-notice__inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;text-align:center}
.site-notice__text{white-space:pre-wrap}
.site-notice__link{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.site-notice__link:hover{opacity:.75}
.site-notice--maintenance{background:#fef3c7;color:#78350f;border-bottom:1px solid #fcd34d}
.site-notice--incident{background:#fee2e2;color:#7f1d1d;border-bottom:1px solid #fca5a5}
.site-notice--info{background:#d1fae5;color:#064e3b;border-bottom:1px solid #6ee7b7}
@media (max-width:640px){.site-notice{padding:9px 16px;font-size:12.5px}}