@charset "UTF-8";
/* ============================================================
   CCA Theme - Front Page Stylesheet
   - PC基準のデザインをベースにタブレット/スマホ対応
   - 色: 黒 #000 / 白 #FFF / 薄グレー #777 / 濃グレー #191919 / グリーン #6A9070
   ============================================================ */


/* ============================================================
   Reset / Base
   ============================================================ */
*, *::before, *::after {
box-sizing:border-box;
}

html {
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body {
margin:0;
padding:0;
background-color:#000000;
color:#FFFFFF;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
line-height:1.8;
letter-spacing:0.02em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

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

a {
color:inherit;
text-decoration:none;
transition:opacity 0.3s ease;
}

ul, ol {
list-style:none;
margin:0;
padding:0;
}

button {
background:none;
border:0;
padding:0;
margin:0;
color:inherit;
font:inherit;
cursor:pointer;
}

h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
}

sup {
font-size:0.6em;
vertical-align:super;
}


/* ============================================================
   Utility
   ============================================================ */
.green {
color:#6A9070;
}

.colon {
color:#6A9070;
display:inline-block;
transform:translateY(-0.05em);
}



/* ============================================================
   Buttons
   ============================================================ */
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:16px;
padding:13px 40px;
font-size:20px;
font-weight:400;
border-radius:999px;
background-color:transparent;
color:#FFFFFF;
transition:background-color 0.3s ease, color 0.3s ease;
width:260px;
text-align:center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media screen and (max-width:757px) {
.btn {
padding:12px 20px;
min-width:100%;
font-size:18px;
}
}

.btn:hover {
background-color:#FFFFFF;
color:#000000;
opacity:1;
}

.btn--apply {
background-color:#FFFFFF;
color:#000000;
border-color:#FFFFFF;
}



.btn__label {
display:inline-block;
}

.btn__arrow {
display:inline-block;
font-size:14px;
line-height:1;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #6A9070;   /* 塗りたい色 */
    transform: translateX(-101%); /* 左側に隠しておく */
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: -1;
}

.btn:hover::before,
.btn:focus-visible::before {
    transform: translateX(0);   /* ホバーで右端まで満ちる */
}

.btn:hover,
.btn:focus-visible {
    color: #FFFFFF;
}

.btn--apply:hover,
.btn--apply:focus-visible {
    color: #FFFFFF;
}


/* ============================================================
   Scroll lock when modal / menu open
   ============================================================ */
body.no-scroll {
overflow:hidden;
}


/* ============================================================
   Fade-in on scroll
   ============================================================ */
.fade-in {
opacity:0;
transform:translateY(20px);
transition:opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
opacity:1;
transform:translateY(0);
}