@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/* ---- base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: "Noto Sans JP", sans-serif; color:#111;}
h1,h2,h3 { margin: 0; line-height: 1.2; }
p { margin: .6rem 0 0; color:#000; line-height: 1.8; }
img{
max-width:100%;
height:auto;
}

.section-contents{
max-width:1080px;
width: 100%;
justify-self: center; /* Gridの子の水平位置 */
}

.sp-only{
display:none;
}

a, button, .swipe-dot { touch-action: manipulation; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* 色 */

.color-orange{
color:#F08300;
}

.bg-gray{
background:#F3F5F6;
}

.bg-orange-gra{
background: linear-gradient(90deg, #F08200 0%, #F7550D 100%);
}



/* 画面単位でスナップ */
html, body {
height: 100%;
scroll-snap-type: y mandatory;
}
.section--snap { scroll-snap-align: start; scroll-snap-stop: always; }

/* ---- 共通セクション ---- */
.section{
position: relative;
height: 100vh;
padding: 0;
overflow: hidden;
}
.section__scroller{ height: 100%; }


.section__sticky {
position: sticky;
top: 0;
height: 100%;

display: flex;
flex-direction: column;
justify-content: center; /* 縦方向中央 */
align-items: center; /* 横方向中央 */

max-width: 1080px; /* 幅を制限して中央寄せ */
margin: 0 auto;
padding: 0 1rem;
}

/* Heroだけは従来の上寄せレイアウト */
#hero .section__sticky {
display: grid;
grid-template-rows: auto auto 1fr;
gap: 24px;
 max-width: 100% !important; /* ←強制的に全幅 */
width: 100%;
margin: 0;
padding: 12vh 0 7vh; /* 上寄せ余白 */
text-align: left;
}

.head { text-align: center; }
.head h2 { font-size: 2.4rem; font-weight:700; position: relative;}
.head h2 span{
font-size: 1.2rem;;
display:block;
padding:5px 0
}

.head h2::after{
content:"";
display:block;
inline-size: clamp(80px, 20%, 130px); /* 線の長さ */
block-size: 4px; /* 線の太さ */
background:#111; /* 色 */
border-radius: 2px;
margin: .55em auto 0;/* 文字との間隔＋中央寄せ */
}
.head p { margin-top: 8px; color:#000; }


.drawer {
display: none;
}

/* ハンバーガーメニュー　input */
.checkbox-hidden {
display: none;
}

label {
position: absolute;
top: 1.3rem;
right: 8.2%;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.hamburger {
z-index: 100;
}

.hamburger span {
display: block;
width: 33px;
height: 2px;
background-color: #F08300;
position: absolute;
transition: transform 0.5s, opacity 0.5s, width 0.3s;
}

.hamburger span:nth-child(1) {
top: 0;
}

.hamburger span:nth-child(2) {
top: 0;
bottom: 0;
margin: auto;
}

.hamburger span:nth-child(3) {
bottom: 0;
}

#navTgl:checked + .hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
background-color: #F08300;
}

#navTgl:checked + .hamburger span:nth-child(2) {
top: 0;
bottom: 0;
margin: auto;
width: 0px;
opacity: 0;
background-color: #F08300;
}

#navTgl:checked + .hamburger span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
background-color: #F08300;
}

.menu {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 100%;
opacity: 0;
z-index: 99;
background: rgba(255, 255, 255, 0.9);
transition: 0.5s ease-in-out;
}

.menu ul {
text-align: center;
margin-top: 20%;
list-style:none;
padding: 0 15px;
}

.menu ul li {
position: relative;
margin-bottom: 15px;
transform: translateX(-200px);
transition: transform 1.3s ease;
}

.menu ul li a{
display:block;
}

.menu ul li:nth-child(2) {
transition-delay: 0.15s;
}

.menu ul li:nth-child(3) {
transition-delay: 0.3s;
}

.menu ul li:nth-child(4) {
transition-delay: 0.45s;
}

.menu ul li a {
font-size:6vw;
color: #fff;
}

#navTgl:checked ~ .menu {
left: 0;
opacity: 1;
}

#navTgl:checked ~ .menu li {
transform: translateX(0px);
}



/* ---- #hire（カード内3枚スライド） ---- */
.stage{
position: relative;
display: grid;
grid-template-columns: 40px 1fr;
align-items: center;
gap: 20px;
height: auto;
width:100%;
}
.rail{ position: relative; height: 60%; margin-left: 4px; }
.rail__line{ position:absolute; left:10px; top:0; width:2px; height:100%; background:#1112; }
.rail__dot{ position:absolute; left:5px; width:12px; height:12px; border-radius:999px; background:#111; transition:transform .35s ease; transform:translateY(var(--dotY,0px)); }

.card{
position: relative;
height: clamp(420px, 70%, 680px);
min-height: 420px;
background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden; display:grid; place-items:center;
padding: clamp(16px, 2.5vw, 28px);
border:none!important;
}
.slides{ position:relative; width:100%; height:100%; z-index:1; }
.slide{
position:absolute; inset:0;
display:grid; grid-template-columns:1.1fr .9fr; gap:min(4vw,40px);
align-items:center;
padding: clamp(8px, 2vw, 16px);
opacity:0; transform:translateY(16px);
transition: opacity .35s ease, transform .35s ease;
}
.slide.is-active{ opacity:1; transform:none; }
.slide__vis{ width:min(360px,80%); height:320px; border-radius:16px; justify-self:center; }

.chip{ display:inline-block; margin:.5rem 0 1rem; padding:.2em 1.4em; background:#ff7a00; color:#fff; border-radius:999px; font-weight:700; font-size:.9rem; vertical-align: 4px;}

.slide h3{ font-weight:700; font-size: 1.6rem; display:inline-block;margin-right:15px; }

@media (max-width: 768px){
.stage{ grid-template-columns: 32px 1fr; }
.rail{ height: 56%; }
.slide__vis{ width:100%; height:200px;position: relative; }
}

.panel-bg{ background:#F3F5F6; border-radius:40px; }

/* ---- #swipe（縦連動で横スライド） ---- */
#swipe .section__sticky{ grid-template-rows: auto 1fr auto; } /* 真ん中を1frにして潰れ防止 */
.swipe-stage{
position: relative; min-height:500px; overflow:hidden;
/*border-radius:16px;*/ /*box-shadow:0 10px 30px rgba(0,0,0,.08);*/
padding: clamp(12px, 2vw, 20px);
width:100%;
}
.swipe-track{
position:absolute; inset:0; height:100%;
display:flex; gap: clamp(16px, 3vw, 32px);
padding: clamp(8px, 2vw, 16px);
transition: transform .45s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.swipe-pane{
flex:0 0 100%;
display:grid; grid-template-columns:1.1fr .9fr; gap:min(4vw,40px);
align-items:center; min-height:0;
}
.swipe-vis{ height: auto; border-radius:16px;text-align:center;}
.label{ display:inline-block; margin:.5rem 0 1rem; padding:.35em .8em; background:#ff7a00; color:#fff; border-radius:999px; font-weight:700; font-size:.9rem; }
.btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.btn{ padding:.7em 1.1em; border-radius:999px; background:#ffd9a8; color:#7a3f00; font-weight:700; text-decoration:none; }
.btn.-accent{ background:#ffb44a; color:#fff; }

@media (max-width: 768px){
.swipe-pane{ grid-template-columns:1fr;
gap:0;}
.swipe-vis{ height:auto; }
}

/* --- swipe nav dots --- */
.swipe-nav{
display:inline-grid; justify-content:center; gap:10px;
padding-top:16px;
position:absolute;
top:50%;
left:-2%;
}
.swipe-dot{
width:8px; height:8px; border-radius:999px;
background:#FFF;
cursor:pointer; transition: transform .2s ease, background .2s ease;
border:solid 1px #F38D00;
-webkit-appearance: none;
appearance: none;
padding:0;
}
.swipe-dot:is(:hover,:focus-visible){ transform: scale(1.15); outline:none; }
.swipe-dot[aria-selected="true"]{ background:#F38D00; box-shadow:none; }
@media (max-width:768px){
.swipe-nav{ gap:8px; padding-top:0px; }
.swipe-dot{ width:9px; height:9px; }
}

/* ===== HERO（オレンジ面＋スマホ動画） ===== */

#hero .section__sticky{
max-width:100%;
padding: 12vh 1vw 7vh;
}

.hero-card{
position: relative;
border-radius: 28px;
height: 74vh;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
overflow: hidden;
padding: clamp(18px, 2.8vw, 28px);
background:
url("../img/fv-bg.png") no-repeat center bottom / contain,
linear-gradient(90deg, #F7550D 0%, #F08200 100%);
max-width: 95vw;
width: 100vw;
}
.hero-grid{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: min(4vw, 40px);
align-items:center;
height:100%;
margin:0 auto;
max-width:1080px;
}
.hero-copy{ color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.12); }
.hero-copy .lead{ opacity:.95; margin-bottom:.6rem; font-weight:600; }

.hero-copy p.lead {color:#FFF;}

.hero-copy h1{ font-size: clamp(28px, 4.2vw, 48px); letter-spacing:.06em; line-height:1.25; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px 12px; margin:50px 0 18px; }
.hero-badges img{
display:block;
width:40%;
}
.hero-badge{
display:inline-flex; align-items:center; gap:.5rem;
padding:.45rem .85rem; border-radius:999px;
background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
font-weight:700;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-btn{
padding:.85rem 2.25rem; border-radius:999px; font-weight:800; text-decoration:none;
display:inline-flex; align-items:center; gap:.5rem;
}
.hero-btn.-light,.hero-btn.-ghost{ background:#FFF; color:#F39A30; border:solid 2px #F39A30;box-shadow:0 8px 20px rgba(33,58,155,.35);}
.hero-btn.-light:hover{ background:#ffe9d4; }
.hero-btn.-indigo{
color:#fff; background: linear-gradient(180deg,#344bd8, #213a9b);
box-shadow:0 8px 20px rgba(33,58,155,.35);
border:solid 2px #FFF;
}
.hero-btn.-indigo:hover{ filter:brightness(1.05); }

.fv-main{
max-width: 40vh;
height: auto;
position: absolute;
bottom: 0;
left: 50%;
z-index: 1;
}
/* ---- スマホモック（画像不要／CSSだけ） ---- */

.phone-mask{
width: min(90vw, 263px);
aspect-ratio: 410 / 620;
position: relative;
-webkit-mask-image: url("../mv/fv-mv-mask.png"); /* ←今の白黒PNG */
mask-image: url("../mv/fv-mv-mask.png");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center;  mask-position: center;
-webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
.phone-mask > img{
width:100%; height:100%; object-fit: cover; display:block;
}


.phone-mask2 {
width: 170px;
aspect-ratio: 9/18.5;
border-radius: 28px; /* 角丸を指定 */
overflow: hidden;/* はみ出しを隠す */
}

.phone-mask2 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.phone-wrap{
justify-self:end;
position:relative;
width:min(260px, 40vw);
aspect-ratio: 9 / 18.5;/* iPhone系比率 */
/*transform: rotate(8deg);
filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));*/
}
/* 画面（動画をクリップ） */
.phone-screen{
position:absolute;
inset:4.5% 0%;
overflow:hidden;
}

/* 動画要素（ミュート自動再生・ループ・iOS対応 playsinline） */
.phone-video{
width:100%; height:100%; object-fit:cover; display:block;
}

/* 背景の薄いS字ハイライト（雰囲気） */
.hero-card::after{
content:""; position:absolute; inset:-10% -20% auto -20%;
aspect-ratio:2.2/1;
background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
transform: rotate(-8deg);
opacity:.6; pointer-events:none;
}

/* お知らせ帯（既存に合わせて見た目調整。任意） */
.notice{
background:#fff; border:2px solid #F08300; color:#000;
border-radius:12px; padding:.6rem .9rem; font-size:.95rem;
display:flex; align-items:center; justify-content:space-between; gap:8px;
margin-top:10px;
}
.notice .badge{color:#F08300;}
.notice .date{ color:#8c8c8c; }

/* ===== Global fixed nav ===== */
:root { --navH: 72px; }

.site-nav{
position: fixed; top: 0; left: 0; right: 0; height: var(--navH);
z-index: 99; display: flex; align-items: center;
background:#FFF;
border: 1px solid #eceff4;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
padding: 8px 0;
pointer-events: none; /* バー以外はクリック不可にしないため内側で復活 */
}
.site-nav__container{
max-width: 1100px; margin: 0 auto;
width: 100%;
pointer-events: auto; /* クリック可に戻す */
}
.site-nav__bar{
display:flex; align-items:center; justify-content:space-between; gap:12px;
/*background: rgba(255,255,255,.92);*/
padding: 10px 14px;
backdrop-filter: blur(6px);
transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.site-nav.is-scrolled .site-nav__bar{
background: rgba(255,255,255,.88);
box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.site-nav__logo img{ height: 26px; display:block; }
.site-nav__actions{ display:flex; align-items:center; gap:10px; }

/* 既存の .hero-btn を流用。小さめサイズ */
.hero-btn.-sm{ padding:.55rem .95rem; font-size:.95rem; }
.hero-btn.-ghost:hover{ background:#fff7ea; }
.hero-btn.-orange{background:linear-gradient(90deg, #F08200 0%, #F7550D 100%);
color:#FFF;
}

/* コンテンツがナビの下に潜らないようにスペーサー */
.nav-spacer{ height: var(--navH); }

/* 小さめデバイス */
@media (max-width: 575.98px){
:root { --navH: 64px; }
.site-nav__bar{ padding:8px 10px; }
.site-nav__actions{ gap:8px; }
.hero-btn.-sm{ padding:.5rem .8rem; font-size:.9rem; }
.site-nav__logo img{ height:22px; }
}

/* ===== problem ===== */

#problem h3{
font-size:1.4rem;
margin-bottom:24px;
position: relative;
}

#problem h3::after {
content: "";
position: absolute;
left: 0;
bottom: -12px;/* 文字との距離調整 */
width: 60%;
height: 2px;
background-color: #333; /* 線の色 */
}

#problem .problem-box-l,#problem .problem-box-r{
padding:30px 30px 20px;
background:#FFF;
border-radius:20px;
}

#problem .problem-box-r{
margin-top:40px;
}

#problem ul li{
padding:5px 0;
}

#problem ul {
list-style: none;
padding-left: 2.6em;/* 余白を作る */
}
#problem ul li {
position: relative;
margin: .4em 0;
}
#problem ul li::before {
content: "";
position: absolute;
left: -26px; /* テキストの左 */
top: .5em;/* ベースラインに合わせて微調整 */
width: 20px;/* 好きなサイズ */
height: 20px;
background: url("../img/check-mark.jpg") no-repeat center / contain;
}

#problem img.problem-bottom-img{
transform: translateX(76%);
width: 35%;
margin:0 auto;
margin-top:-90px;
}

/* ===== assignment ===== */

#assignment{
background: url(../img/fv-bg.png) no-repeat center bottom / contain, linear-gradient(90deg, #F08200 0%, #F7550D 100%);
}

#assignment .head{
position: relative;
}

#assignment .head img.assignment-relative{
max-width: 156px;
position: absolute;
top: 7%;
left: -48%;
}

#assignment .head p{
color:#FFF;
font-size:1.8rem;
}

#assignment p{
color:#FFF;
text-align:center;
}

#assignment .head img{
max-width:400px;
}


/* ===== concept ===== */

#concept .head h2::after{
background:#F08300;
}

#concept h3{
color:#FFF;
display:inline-block;
padding:5px 15px;
font-size:1.4rem;
}

/* ===== hire ===== */

#hire .section__sticky{
max-width:980px;
}

#hire .head h2::after{
background:#F08300;
}

#hire h4{
font-size:1.2rem;
}

#hire .slide-3 img{
position: absolute;
top: 17%;
max-width: 423px;
z-index: 1;
}

#hire .slide-3 li span{
color:#666;
}

/* ===== hire ===== */

#separate-cta .separate-cta-box{
padding:40px;
background:#FFF;
border-radius:20px;
}

.separate-cta-btn-wapper a{
display:block;
}

#separate-cta .separate-cta-logo img{
max-width:80%;
}

.separate-cta-catch{
display: inline-block; /* 擬似要素を左右に並べるため */
font-weight: 700;
font-size: 1.2rem;
color:#666;
text-align:center;
}

/* 左右の斜線（＼ ／） */
.separate-cta-catch::before,
.separate-cta-catch::after{
content:"";
display:inline-block;
width: clamp(18px, 4vw, 25px);
height: 3px;
background:#666; /* 線の色 */
border-radius: 2px;
vertical-align: middle;
margin: 0;
transform-origin: center;
}
.separate-cta-catch::before{ transform: rotate(60deg); } /* ＼ */
.separate-cta-catch::after { transform: rotate(-60deg); } /* ／ */

/* 強調色（オレンジ） */
.separate-cta-catch .accent{ color:#F08200; font-size:1.3rem;}

.separate-cta-02 {
font-weight:700;
}

.separate-cta-02 p{
padding:0;
margin:0;
}

.separate-cta-02 p.separate-cta-p02{
font-size:1.2rem;
}

#separate-cta .separate-cta-02{
background:#FCE4CD;
padding:40px 40px 0;
}

#separate-cta .separate-cta-02 img{
max-width:70%;
}

#separate-cta .separate-cta-02 h3{
margin-bottom:15px;
}


.pop{
position: relative;
display: inline-block;
padding: .35em .6em;
line-height: 1.2;
}

/* 左右の斜め線（＼ ／） */
.pop::before,
.pop::after{
content:"";
position: absolute;
top: -10px;
width: 10px; height: 3px;
background: currentColor;
border-radius: 2px;
}
.pop::before{ left: 37%; transform: rotate(-128deg); } /* ＼ */
.pop::after { right:37%; transform: rotate( 128deg); } /* ／ */

/* 真ん中の縦線 */
.pop__rays{
position: absolute;
left: 50%;
top: -16px;
width: 0; height: 0;
transform: translateX(-50%);
}
.pop__rays::before{
content:"";
position: absolute;
width: 3px; height: 12px;
background: currentColor;
border-radius: 2px;
}

/* 小さめ端末でバランス調整 */
@media (max-width: 480px){
.pop::before, .pop::after{ top:-9px; width:18px; }
.pop__rays::before{ height:12px; top:2px; }
}

/* ===== swipe ===== */

#swipe .head h2::after{
background:#F08300;
}

#swipe h3{
font-weight:700;
}

#swipe .pane03 img{
max-width: 38vh;
}

.mv-wapper{
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.phone-frame {
width: 165px;
height: 390px;
position: relative;
}

.phone-frame video {
position: absolute;
top: 0;
left: 6%;
width: 100%;
height: 100%;
object-fit: cover;
}

.phone-frame .phone-frame-p1{
background:#F08300;
border:solid 1px #F08300;
border-radius:50px;
padding:4px 0;
color:#FFF;
margin-top:20px;
}

.phone-frame .phone-frame-p2{
background:#FFF;
border:solid 1px #F08300;
border-radius:50px;
padding:2px 0;
color:#F08300;
margin-top:20px;
}

/* ===== comparison ===== */

#comparison .head h2::after{
background:#F08300;
}


/* ===== faq ===== */

#faq .head h2::after{
background:#F08300;
}
/* 土台 */
.faq { border-top:1px solid #e5e5e5; }
.faq__item { border-bottom:1px solid #e5e5e5; }

/* 行（質問） */
.faq__item > summary{
display:flex; align-items:flex-start; gap:16px;
list-style:none; cursor:pointer; padding:18px 0;
}
.faq__item > summary::-webkit-details-marker{ display:none; }

/* 左の大きい Q */
.faq__q{
flex:0 0 36px;
font-weight:800; font-size:2.2rem; line-height:1; color:#111;
text-align:center;
}

/* 質問テキスト */
.faq__title{ flex:1; font-size:1.3rem; line-height:1.6; color:#111; }

/* 右端の＋（開いたら－） */
.faq__plus{ flex:0 0 20px; width:20px; height:20px; position:relative; margin-left:8px; }
.faq__plus::before,
.faq__plus::after{
content:""; position:absolute; left:0; right:0; top:50%;
height:2px; background:#111; transform:translateY(-50%);
}
.faq__plus::after{ transform:translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__plus::after{ opacity:0; }

/* アコーディオン本体：height をアニメーション */
.faq__content{
overflow:hidden;
height: auto;/* JSで 0 ⇄ px に切り替える */
transition: height .28s ease;
}
.faq__answer{
color:#666; font-size:1rem; line-height:1.8;
padding: 0 0 18px 52px;/* 左はQの幅とのバランスで調整 */
}

.faq__answer a{
color:#2C4CFF;
}

/* 低速回線/酔いやすい方向け */
@media (prefers-reduced-motion: reduce){
.faq__content{ transition: none; }
}

/* ===== contact ===== */


#contact .section__sticky{
padding: 10vh 0;
}

#contact h3{
color:#FFF;
font-size:2.2rem;
}

.contact-catch{
display: inline-block; /* 擬似要素を左右に並べるため */
font-weight: 700;
font-size: 1.2rem;
color:#FFF;
text-align:center;
}

/* 左右の斜線（＼ ／） */
.contact-catch::before,
.contact-catch::after{
content:"";
display:inline-block;
width: clamp(18px, 4vw, 25px);
height: 3px;
background:#FFF; /* 線の色 */
border-radius: 2px;
vertical-align: middle;
margin: 0;
transform-origin: center;
}
.contact-catch::before{ transform: rotate(60deg); } /* ＼ */
.contact-catch::after { transform: rotate(-60deg); } /* ／ */


.contact-box{
background:#FCE5CC;
border-radius:20px;
padding:20px 20px 35px;
font-weight:700;
position: relative;
}

#contact .contact-box h3{
font-size:1.3rem;
color:#000;
margin-bottom: 7px;
}

#contact .contact-box p{
margin:0;
padding:0;
}

#contact .contact-box .pop{
margin-top:20px;
}

.contact-box a{
position: absolute;
left: 20px;
}

/* contact */

.contact-form{
background:#FFF;
padding:20px;
border-radius:20px;
}

#contact .contact-form h3{
color:#000;
font-size: 1.6rem;
font-weight: 700;
}

.contact-form span{
font-size:0.8rem;
}

.contact-form p.contact-30{
background:#FF8400;
color:#FFF;
border-radius:50px;
display: inline-block;
padding: 0 20px;
margin-bottom:20px;
}

.wpcf7-spinner{
display:block!important;
}

.form-area{
width: 100%;
margin: 0 auto;
}
.form-area p{
color:#000;
margin-top:10px;
font-size:0.8rem;
}

.form-area input,.form-area textarea,.form-area select{
width:100%;
padding:5px;
border-radius:5px;
background:#ECECEC;
border:none;
}

.form-area input[type="submit"]{
width:60%;
color:#FFF;
border-radius:100px;
box-shadow:none;
text-align:center;
font-size:1rem;
-webkit-appearance: none; /* iOSボタン初期化 */
appearance: none;
display: flex;
justify-content: center;
align-items: center;
}

.form-area p span.req{
background: #1B2F45;
font-size: 0.8rem;
padding: 5px 10px;
border-radius: 3px;
color: #FFF;
margin-left: 10px;
}

.contact-tel-area{
background:#ECECEC;
padding:30px;
margin-top:80px;
}

.contact-tel-area h3{
font-size:1.5rem;
color:#1B2F45;
}

.contact-tel-area h4{
font-size:1.8rem;
color:#1B2F45;
}

.contact-tel-area h4 i{
font-size: 1.5rem;
vertical-align: bottom;
}


.contact-tel-area p{
font-size:0.85rem;
margin: 0;
}


/* ===== footer ===== */

footer {
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 0;
width: 100%;
background: #000;
padding: 30px 0 20px;

/* ▼ 初期は下に隠す */
transform: translate3d(0, 100%, 0);
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: transform 320ms ease, opacity 320ms ease;
}

/* .visivisi が付いたら下からニュッと出す */
footer.visivisi {
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: auto;
}

/* 端末設定でアニメーションを減らす */
@media (prefers-reduced-motion: reduce) {
footer {
transition: none;
}
}


footer img{
height:26px;
}

footer ul{
padding:0;
list-style:none;
margin-top:5px;
}

footer ul li{
margin-top:0px;
margin-bottom:4px;

}

footer ul li a{
font-size:0.8rem;
border-left:solid 1px #FFF;
color:#FFF;
padding-left:15px;
text-decoration:none;
}

.copyright{
color:#FFF;
font-size:0.7rem;
}


.bottom-btn {
display: none;
width:100%;
position: fixed;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: opacity 0.4s ease;
pointer-events: none;
z-index:2;
}

.bottom-btn a{
font-size: 3.4vw;
display: block;
text-align:center;
}

.bottom-btn .col-6{
padding:0 3px;
}

.bottom-btn.is-show {
display: block;
opacity: 1;
pointer-events: auto;
}


@media (min-width: 768px) {
.bottom-btn {
display: none !important;
}
}

/* ##########################
 media queries
############################# */

@media (max-width: 1199px){
.swipe-nav{
display: flex;
position: static;
}
#contact h3{
font-size:2rem;
}
}

@media (max-width: 991px){
.fv-main{
left:43vw;
max-width:30vh;
}
#assignment .head img.assignment-relative{
left:3%;
max-width:140px;
}
.mb-lg-down-3 {
margin-bottom: 2rem !important;
}
.separate-cta-btn-wapper a.-ghost{
margin-bottom:30px;
}
.contact-box img{
max-width:63%;
}
.contact-box a{
position:static;
}
.swipe-vis img{
width:50vh;
}
#swipe .pane03 img{
width: 26vh;
}
}

@media (max-width: 767px){
.pc-only{
display:none;
}
.sp-only{
display:block;
}
.drawer {
display: block;
}
.bottom-btn .hero-btn.-ghost{
box-shadow:none;
}
.site-nav.-hidden { display: none !important; }

#assignment .section__sticky{
padding: 9vh 0;
}
#hero .section__sticky{
padding: 11vh 1vw 7vh;
}
.section-contents .d-flex{
display: block !important;
}
.fw-semibold{
display: block;
}
.hero-copy{
text-align:center;
}
.notice{
margin-top:0;
}
.hero-grid{
display:block;
}
.phone-wrap{
justify-self: auto;
margin-left:auto;
}
.hero-ctas{
display:none;
}
.hero-badges{
position: absolute;
z-index: 2;
justify-content: end;
bottom:0;
right: 20px;
}
.fv-main{
left:20px;
}
.hero-copy .lead{
margin:0;
}
.phone-frame .phone-frame-p1,.phone-frame .phone-frame-p2{
font-size:2.6vw;
margin-top:5px;
}
#assignment .col-md-7{
margin-top:-30px;
}
#assignment .col-md-7 img{
max-width:80%;
margin:0 auto;
}
.head h2::after{
inline-size:42%;
block-size:3px;
}
#problem .sp-problem-container{
padding-left:0!important;
padding-right:0!important;
}
#problem .row.sp-margin-0{
margin-left:0!important;
margin-right:0!important;
}
#problem .row.sp-margin-0 .col-lg-5{
padding-left:0!important;
padding-right:0!important;
}
#problem .problem-bottom-bg{
position:absolute;
bottom:-18px;
left:0;
width:100%;
z-index: 1;
}
#problem .section__sticky{
margin-top:50px;
justify-content: start;
padding:0;
}
#problem .problem-box-l{
border-radius: 0 20px 20px 0;
}
#problem .problem-box-r{
margin-top:10px;
margin-right:0;
margin-left:auto;
border-radius: 20px 0 0 20px;
}
#problem .problem-box-l, #problem .problem-box-r{
padding: 20px 20px 10px;
width:85%;
}
#problem img.problem-bottom-img{
position:static;
margin-top:-10px;
transform: translateX(-15%);
width: 70vw;
}
#assignment .head img{
max-width:88%;
}
.slide{
display:block;
}
.slide img{
max-width:50%;
display:block;
margin:0 auto;
}
.slide__vis{
height:auto;
}
.slide ul{
padding-left:15px;
}
.card{
width:90%;
height:370px;
min-height:auto;
}
#hire .slide-3 img{
position: static;
max-width: 75%;
}
.swipe-vis{
width:85%;
margin:0 auto;
}
#contact .d-md-block > div{
width:55%;
}
#contact footer .d-md-block .sp-left{
width:35%;
}
#swipe .section__sticky{
justify-content:start;
margin-top:25px;
}
#swipe h3{
margin-top:-60px;
}
.swipe-nav{
margin-top:-30px;
}
.faq__item > summary{
padding: 12px 0;
}
.sp-right ul{
margin-bottom:5px;
}
.phone-mask2{
width: 22vw;
border-radius:4vw;
}
footer img{
height:4vw;
margin-top: 10px;
}
footer ul li{
display:inline;
}
footer ul li a{
font-size:2.4vw;
border:none;
}
footer{
padding: 10px 0;
}

p,li,.faq__answer{
font-size:3.6vw;
line-height: 1.5;
}
.hero-copy h1{
font-size:7vw;
line-height: 1.8;
}
#contact h3{
font-size:7vw;
}
.head h2{
font-size:6vw;
}
.lead,.slide h3 {
font-size:5vw;
}
#hire h4,#concept h3{
font-size:4.6vw;
}
.chip,.contact-catch {
font-size:3vw;
}
.head h2 span,.faq__title{
font-size:4vw;
}
.head h2 span{
font-size:3vw;
}
#problem h3,#swipe h3,#assignment .head p{
font-size:4.6vw;
}
#assignment .head p{
line-height:1;
}
.copyright{
font-size:2.4vw;
}
}

@media (max-width: 644px){
.phone-mask {
width: 42vw;
border-radius:6vw;
}
}

@media (max-width: 574px){
.hero-card {
height: 66vh;
}
.phone-frame{
width: 30vw;
height: 73vw;
margin-top: 0px;
}
.phone-mask2 {
width: 30vw;
border-radius: 6vw;
}
#problem ul li{
padding:1px 0;
}
#problem ul li::before{
top: .15em;
}
.swipe-pane{
align-items:start;
margin-top:10px;
}
}

.section--snap {
touch-action: pan-y;/* 通常の縦スクロール */
}

#hire, #swipe {
touch-action: none;
}

html, body {
height: 100%;
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden; /* 横は隠す */
/* overflow-y は殺さない */
}

.section {
height: 100vh;/* fallback */
height: -webkit-fill-available; /* 古いiOS */
height: 100svh; /* 新しいブラウザ */
}

.section--snap:focus { outline: none; }