@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%}}
html { scroll-behavior: smooth;}
.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;}


/*** contact page ***/
.contact-page { max-width:640px; padding: 80px 24px; margin:0 auto; height:auto; box-sizing:border-box; }
.contact-lead { font-size: font-size:clamp(1.4rem, 1vw, 1.8rem); margin-bottom: 40px;}

@media screen and (max-width: 620px) {
  .contact-page { padding: 60px 24px 40px 24px; }
}

/* form format */
.contact-page .hs-form-field { margin-bottom:15px; }
.contact-page .hs-form-field input, .contact-page .hs-form-field textarea { width:100%; padding:8px; font-size: 1.6rem; border: 1px solid #DADCDE;} 
.contact-page .hs-form-field textarea { height: 8em;} 
.contact-page .hs-form-field select { width:100%; padding:10px; font-size: 1.6rem; border: 1px solid #DADCDE;}
.contact-page .hs-form-field input[type=checkbox], .contact-page .hs-form-field input[type=radio] { width:20px; height: 20px; border: 1px solid #DADCDE;}
.contact-page .hs-form-field label span { color:#071421; font-size:1.6rem; font-weight:700; }
.contact-page .hs-form-field label .hs-form-required { color:#ff9da2; font-size:1.4rem; font-weight:700; }
div.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field > legend { font-size:1.3rem; color:#6A727A; }
div.hs-richtext.hs-main-font-element > div, .hs-richtext.hs-main-font-element {font-size:1.4rem; margin-bottom: 10px;}
div.hs-richtext.hs-main-font-element > div a, .hs-richtext.hs-main-font-element a { color:#009dad;}
div.hs_submit.hs-submit > div.actions > input[type=submit] { font-size:1.8rem; padding: 10px 40px; margin:30px auto; background:#231815; color:#CDDC2C; box-shadow:0 0 10px rgba(0, 0, 0, 0.15); cursor:pointer; }
.hs-error-msg {font-size: 1.3rem; color: #CC0000;}
.no-list.hs-error-msgs a { color: #009dad; font-size:1.3rem; text-decoration: underline;}
.no-list.hs-error-msgs li label { color: #CC0000; font-size:1.3rem;}

@media screen and (max-width: 620px) {
    .contact-page .hs-form-field { margin-bottom:10px; }
    .contact-page .hs-form-field label span { color:#071421; font-size:1.4rem; }
    div.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field > legend { font-size:1.2rem; color:#6A727A; }
}