@charset "UTF-8";
/* CSS Document */

/* =============================
  基本カラー・余白設定
============================= */

:root {
--gray:#e5e5e5;
--text:#222;
--space-lg:100px;
--space-md:70px;
--space-sm:50px;
}

html {scroll-behavior:smooth;}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

img{
max-width:100%;
display:block;
}

/* 本文フォント */

body{
font-family:"Yu Mincho","游明朝","Hiragino Mincho ProN",serif;
line-height:2.0;
color:var(--text);
background:#fff;
}

a:hover{opacity:.6;}

/* =============================
  HEROエリア
============================= */

.hero{
position:relative;
min-height:760px;
padding-top:70px;
background:#fff;
overflow:hidden;
}

/* 下半分グレー背景 */

.hero-gray{
position:absolute;
bottom:20px;
width:100%;
height:calc(60% - 40px);
background:var(--gray);
z-index:1;
}

/* 下半分グレー背景 */
.hero-gray_requ{
position:absolute;
bottom:60px;
width:100%;
height:calc(50% - 150px);
background:var(--gray);
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:0 16px;
}

.hero-image-wrap{
position:relative;
max-width:1040px;
width:100%;
}

.hero-image-wrap img{
width:100%;
border-radius:18px;
}

/* ABILITYタイトル */

.hero-image-wrap h1{
position:absolute;
right:0px;
bottom:-20px;
font-family:"Playfair Display",serif;
font-weight:300;
letter-spacing:.22em;
font-size:clamp(40px,6vw,80px);
color:#fff;
opacity:.4;
}

.hero-text{
margin-top:40px;
max-width:720px;
position:relative;
z-index:3;
margin-bottom:70px;
text-align:left;
}

.font-number{
font-family:"Oswald"!important;
font-weight:300;
margin-right:.5em;
}

/* =============================
  ABILITY目次
============================= */

.intro-links{padding:0;}

.intro-inner{
max-width:640px;
margin:auto;
display:flex;
align-items:flex-start;
}

.intro-title{
width:150px;
font-family:"Playfair Display",serif;
letter-spacing:.1em;
font-size:19px;
padding-top:6px;
}

.anchor-links{
width:100%;
padding:.5em 1em;
border-left:1px solid #333;
}

.anchor-links a{
text-decoration:underline;
color:#000;
font-family:"Playfair Display",serif;
letter-spacing:.08em;
}

/* =============================
  セクション
============================= */

.section{
padding:var(--space-md) 20px;
}

.section-inner{
max-width:900px;
margin:auto;
}


.section h3{
font-size:20px;
margin:60px 0 20px;
text-align:center;
scroll-margin-top:500px;
}

.section p{
font-size:16px;
line-height:2;
margin-bottom:40px;
}


/* リクエストstyle
------------------------------------------------------------*/
.requ-inner {
    max-width: 640px;
    margin: auto;
}
.requ {margin: 2em 0 2em 0;}

#requ h3 {
  font-size: 1.8em;
  font-family: 'Noto Serif Display', serif;
  font-weight: 450;
  line-height: 0;
  margin: 0em 0em 1.3em;
}

#requ h4 {
  font-size: 1.3em;
  font-family: 'Noto Serif Display', serif;
  font-weight: 450;
  line-height: 1.2;
  margin: 0;
  padding: 0.6em 0 1em 0;
}
#requ h5 {
  font-weight: normal;
}


/* =============================
  画像＋帯
============================= */

.image-wrap{
position:relative;
margin-bottom:58px;
}

.band-wrap{
position:absolute;
left:20px;
bottom:-30px;
display:inline-block;
width:auto;
overflow:hidden;
}

.bg-band{
position:absolute;
inset:0;
background:var(--gray);
opacity:0;
transition:opacity .3s ease;
z-index:1;
}

.green-band{
position:absolute;
inset:0;
clip-path:inset(0 100% 0 0);
z-index:2;
}

.band-text{
position:relative;
z-index:3;
color:#fff;
padding:16px 28px;
font-size:30px;
white-space:nowrap;
letter-spacing:.15em;
clip-path:inset(0 100% 0 0);
font-weight:300;
}

.green-band.wipe-in,
.band-text.wipe-in{
animation:wipeIn .35s forwards cubic-bezier(.25,.8,.25,1);
}

@keyframes wipeIn{
from{clip-path:inset(0 100% 0 0);}
to{clip-path:inset(0 0 0 0);}
}

/* =============================
  ボタン
============================= */

.btn-flat-border{
display:block;
text-align:center;
width:180px;
max-width:90%;
padding:.3em 1em;
text-decoration:none;
color:#555;
border:1px solid #555;
border-radius:40px;
transition:.4s;
margin:3em auto;
}

.btn-flat-border:hover{
background:#555;
color:#fff;
}

/* HOMEリンク */

.home-btn{
text-align:center;
font-family:"Playfair Display",serif;
letter-spacing:.1em;
text-decoration:none;
display:block;
width:200px;
height:30px;
margin:0 auto;
color:#000;
}

.home-btn:hover{
color:#000;
text-decoration:underline;
opacity:1;
}

/* =============================
  フッター
============================= */

footer{
position:relative;
background:#fff;
color:#000;
padding:2em;
text-align:center;
border-top:1px solid #ccc;
margin:1em 2em 0;
}

.footer-copy{
font-size:12px;
letter-spacing:.08em;
opacity:.7;
text-align:right;
}

/* =============================
  トップへ戻る
============================= */

.to-top{
position:fixed;
right:50px;
bottom:120px;
width:52px;
height:52px;
border-radius:50%;
border:1px solid #444;
color:#444;
display:flex;
align-items:center;
justify-content:center;
font-family:"Oswald","sans-serif";
font-size:18px;
text-decoration:none;
opacity:0;
pointer-events:none;
transform:translateY(20px);
transition:.4s ease;
}

.to-top:hover{
background:#000;
color:#fff;
}

.to-top.show{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

/* デバッグ背景（削除しない） */

.bg1{background-color:aqua;}
.bg2{background-color:bisque;}
.bg_g{background-color: #f8f8f8;} 

/* =============================
  PC / SP切替
============================= */

.pc{display:block!important;}
.sp{display:none!important;}

@media only screen and (max-width:768px){

.pc{display:none!important;}
.sp{display:block!important;}

.hero{
min-height:auto;
padding-top:40px;
}

.hero-gray{
height:55%;
bottom:0;
}

.hero-text{
margin-top:28px;
margin-bottom:40px;
font-size:14px;
line-height:1.9;
}

.hero-image-wrap h1{
right:12px;
bottom:-10px;
font-size:clamp(26px,9vw,42px);
}

.section{
padding:50px 16px;
}

.section h3{
margin:40px 0 16px;
font-size:18px;
line-height:1.6;
}

.section p{
font-size:15px;
}

.band-wrap{
left:0!important;
bottom:-22px!important;
width:400px;
min-width:240px;
max-width:65%;
}

.band-text{
font-size:18px;
padding:10px 16px;
letter-spacing:0;
}

.image-wrap{
margin-bottom:40px;
}

.footer-copy{
text-align:center;
}

.to-top{
right:18px;
bottom:90px;
width:44px;
height:44px;
font-size:16px;
}

.home-btn{
margin-top:30px;
}

/* ABILITY目次SP */

.intro-inner{
flex-direction:column;
align-items:center;
margin-top:2em;
padding:2em;
}

.intro-title{
width:auto;
font-size:17px;
text-align:center;
}

.anchor-links{
border-left:none;
padding:0;
display:flex;
flex-direction:column;
}

.anchor-links a{
font-size:15px;
}

}