@charset "UTF-8";
/*** reset ***/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ul, ol { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; cursor:pointer; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
figure img { vertical-align:bottom; }
* { box-sizing: border-box; }
html { font-size: 62.5%; }
body { width: 100%; -webkit-text-size-adjust: 100%; width: 100%; }

/*** common ***/
body { color:#231815; font-size: clamp(1.4rem, 1.3vw, 1.6rem); line-height:1.65; background: #fff; scroll-behavior: smooth;}
a { text-decoration: none; outline: none; color:#36404A; transition: all 0.4s;}
a:hover { transition: all 0.4s;}
*:hover { transition: all 0.4s;}
figure img, div img {max-width: 100%; vertical-align: bottom;}
@keyframes ripple { 0% {box-shadow: 0 0 0 0 #CDDC2C;} 70% {box-shadow: 0 0 0 15px rgb(0 0 0 / 0%);} 100% {box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);}}
@keyframes Grad { 0%{background-position:50% 0%} 50%{background-position:50% 100%}100%{background-position:50% 0%}}
.brPC { display:block!important; }
.brSP { display:none!important; }
@media screen and (max-width: 1080px) {
    .brPC { display:none!important; }
    .brSP { display:block;!important; }
}

/*** font ***/
body { font-family: "Roboto", "Noto Sans JP", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Ms Pgothic", sans-serif; font-feature-settings: "palt"; letter-spacing: 0.115em; font-weight: 400; font-style: normal; color: #231815}
.calm { color:#75A9DB; }
.warm { color:#F18E38; }
.passion { color:#E83E3A; }

/*** animation ***/
.js-split-text .char { display: inline-block; opacity: 0;  visibility: hidden;}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}

/*** button ***/
.primary { padding:12px 30px; color:#CDDC2C!important; background:#231815; border-radius: 50vw; max-width: 400px; min-width: 100px; box-shadow: 0 0 15px rgba(0,0,0,0.08);}
.primary:hover { background-position: right center; background-size: 200% auto; -webkit-animation: pulse 2s infinite; animation: ripple 1.5s infinite; color: #CDDC2C;}
.primary.ghost { color:#231815!important; border:3px solid #231815; background:transparent;}
.secondary { padding:12px 30px; color:#231815!important; border: 3px solid #231815; background:#CDDC2C; border-radius: 50vw; display:flex; justify-content: center; max-width: 400px; min-width: 100px;}
.secondary:hover {  background-position: right center; background-size: 200% auto; -webkit-animation: pulse 2s infinite; animation: ripple 1.5s infinite;}
.cta-wrap {display: flex; gap: 0 40px; padding: 40px 0; align-items: center; justify-content: center;}
.text-link-btn-arrow { display: inline-flex; align-items: center; text-decoration: none; color: #071421; font-weight: 500; position: relative; transition: 0.3s;}
.text-link-btn-arrow::after { content: ''; display: inline-block; width: 20px; height: 1px; background-color: #071421; margin-left: 10px; position: relative; transition: width 0.3s ease; /* 長さが変わるアニメーション */}
.text-link-btn-arrow::before { content: ''; position: absolute; right: 0; width: 6px; height: 6px; border-top: 1px solid #071421; border-right: 1px solid #071421; transform: rotate(45deg); transition: transform 0.3s ease, right 0.3s ease;}
.text-link-btn-arrow:hover::after { width: 40px;}
.text-link-btn-arrow:hover::before { right: -20px;}

/*** layout ***/
section { min-height: 60vh; display:flex; align-items: center; justify-content:start; width:100%; }
.section-inner { width: 100%; max-width: 1600px; padding: 120px 60px; margin:0 auto; }
.section-inner h2 { font-size: clamp(2.4rem, 3.2vw, 4rem); font-weight:900; margin-bottom:1em; }

.cta-btn-wrap { display:flex; justify-content:end; padding:30px 0; }
.cta-btn-wrap .primary { padding:15px 80px; }

@media screen and (max-width: 640px) {
    section { min-height: auto;}
    .section-inner { padding: 60px 24px; margin:0 auto; }
}

/*** contact ***/
.contact .section-body .contact-body .contact-cta-wrap { display:flex; gap: 0 60px; margin: 30px 0; }
.contact .section-body .contact-body .contact-cta-wrap .cta-box { background:#FFF; width: 100%; padding:30px; border: solid 5px #231815; box-shadow: 12px 12px 0px rgba(205,220,44,1);  }
.contact .section-body .contact-body .contact-cta-wrap .cta-box h3 { font-size: clamp(2rem, 4vw, 4.2rem); line-height:1.2; margin-bottom:40px; position: relative;}
.contact .section-body .contact-body .contact-cta-wrap .cta-box h3 small { font-size:clamp(1.4rem, 2vw, 2rem); color:#CDDC2C; }
.contact .section-body .contact-body .contact-cta-wrap .cta-box h3:after { content: ""; position: absolute; left: 80%; bottom: 0; width: 60px; height: 37.5px;  background: url(https://2021159.fs1.hubspotusercontent-na2.net/hubfs/2021159/3d1/icon_arrow-R.svg) no-repeat left center; background-size: contain; opacity: 1; transition: all 1.2s ease;}
.contact .section-body .contact-body .contact-cta-wrap .cta-box:hover h3::after {left: 110%; transform: translateX(-100%) scale(0.5); opacity: 0;}
.contact .section-body .contact-body .contact-cta-wrap .cta-box p.lead-text {font-size: 1.8rem;}

@media screen and (max-width: 820px) {
    .contact .section-body .contact-body .contact-cta-wrap { flex-direction: column; gap: 40px 0;}
    .contact .section-body .contact-body .contact-cta-wrap .cta-box { width: calc(100% - 12px); }
}

@media screen and (max-width: 640px) {
    .contact .section-body .contact-body .contact-cta-wrap .cta-box h3:after { width: 30px; height: 18px;}
}

/* contact nochange-color */
.contact.pages { background: #231815;}
.contact.pages h2 { color:#FFF;}
.contact.pages .contact-lead { color:#FFF;}