/* ====================
  foundation (tokens)
==================== */
:root {
    /* core colors */
    --c-text: #323739;
    --c-bg: #F8F7F3;
    --c-white: #fff;
    --c-line: #C7C7C7;
    --c-shadow: #00000029;
    --c-accent: #E8706E;
    --c-muted: #767A89;
    --c-brand: #2FB721;
    --c-chip: #EAE5D9;
    --c-cream: #FFEEA5;/* Aboutセクション背景 */
    --c-dot: #F1EFE7;/* ドット背景 */
    --c-ink: #111;/* フォーム枠線等 */
    --c-neutral: #A0A0A0;/* グレーボタン */
    --c-before: #6CB0DA;/* タグ：Before */
    --c-after: #F09495;/* タグ：After */
    --c-cta-yellow: #FFD857;/* CTA内の強調 */

    /* spacing (8px grid) */
    --sp-0: 0;
    --sp-1: 8px;
    --sp-2: 12px;
    --sp-3: 16px;
    --sp-4: 20px;
    --sp-5: 24px;
    --sp-6: 28px;
    --sp-7: 32px;
    --sp-8: 36px;
    --sp-9: 40px;
    --sp-10: 48px;
    --sp-11: 56px;
    --sp-12: 60px;
    --sp-13: 64px;
    --sp-14: 72px;
    --sp-15: 96px;
    
    /* type scale */
    --fz-xs: 12px;
    --fz-sm: 14px;
    --fz-md: 16px;
    --fz-lg: 18px;
    --fz-xl: 20px;
    --fz-2xl: 24px;
    --fz-3xl: 28px;
    --fz-4xl: 32px;
}
/* ====================
  base
==================== */
body {
    font-size: var(--fz-md);
    line-height: 1.7;
    color: var(--c-text);
    font-family: "Noto Sans JP", "Rubik", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--c-white);
    font-weight: 500;
}
@media (max-width:767px) {
    body {
        font-size: var(--fz-lg);
    }
}
/* prefers reduced motion */
@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* ====================
  utilities
==================== */
.inner {
    padding-left: 30px;
    padding-right: 30px;
}
@media (min-width:768px) {
    .inner {
        padding-left: 30px;
        padding-right: 30px;
        max-width: 1200px;
        margin: 0 auto;
    }
    .hidden-pc {
        display: none;
    }
}
/* ====================
  headings
==================== */
.heading {
    text-align: center;
    font-family: "Rubik", sans-serif;
}
.heading__en {
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 3.8px;
}
.heading__ja {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.12px;
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-7);
}
@media (min-width:768px) {
    .heading__en {
        font-size: 100px;
    }
    .heading__ja {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: var(--sp-10);
    }
}
/* ====================
  buttons
==================== */
.button {
    letter-spacing: .48px;
    padding: var(--sp-3) var(--sp-4);
    display: inline-block;
    border-radius: 50px;
    font-size: .9rem;
    min-width: 150px;
    text-align: center;
    transition: opacity .2s ease;
}
.button:hover {
    opacity: .7;
}
.header__button_form a {
    display: inline-block;
}
.header__button_form {
    background: var(--c-muted);
    color: var(--c-white);
    align-items: center;
    padding: 18px 32px;
    width: auto;
}
.header__button_line {
    background: var(--c-brand);
    color: var(--c-white);
    padding: 18px 32px;
}
.mv__button-link {
    background: var(--c-accent);
    color: var(--c-white);
    padding: var(--sp-3) var(--sp-10);
    transition: all .2s ease;
}
.mv__button-link:hover {
    background: var(--c-white);
    color: var(--c-accent);
    border: 1px solid var(--c-accent);
}
/* ====================
  header
==================== */
.header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}
.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) 22px;
}
.header__logo {
    margin-right: var(--sp-2);
}
.header__logo a img {
    width: 236px;
    display: block;
}
.header__nav {
    display: none;
}
.header.is-scrolled .header__inner {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
.header__link {
    font-weight: 700;
    letter-spacing: .48px;
    transition: color .3s, opacity .3s;
}
.header__link:hover {
    opacity: .6;
}
.header__open {
    margin-top: 3px;
}
@media (min-width:768px) {
    .header {
        top: 24px;
    }
    .header__inner {
        padding-left: 28px;
        padding-right: 20px;
        margin: 30px auto 0;
        font-size: .9rem;
        width: 95%;
        max-width: 1200px;
        box-shadow: 0 3px 9px var(--c-shadow);
        background: var(--c-white);
        top: min(20px, 5.556vw);
        border-radius: 100px;
    }
    .header__open {
        display: none;
    }
    .header__nav {
        display: flex;
        align-items: center;
        gap: 18px;
    }
}
.header-contact_icon svg {
    height: 24px;
    width: auto;
    align-items: center;
    fill: #fff;
}
.drawer-content__menu {
    text-align: right;
    display: flex;
    flex-direction: column;
}
/* drawer */
.drawer-icon {
    width: 36px;
    height: 21px;
    position: relative;
    z-index: 2002;
    background: var(--c-text);
    padding: 28px;
    border-radius: 100px;
}
.drawer-icon__bar {
    position: absolute;
    top: 18px;
    left: 12px;
    width: 32px;
    height: 3px;
    border-radius: 6px;
    background: var(--c-white);
    transition: top .3s linear, transform .3s linear;
}
.drawer-icon__bar:nth-of-type(2) {
    top: 26px;
}
.drawer-icon__bar:nth-of-type(3) {
    top: 34px;
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(1) {
    top: 26px;
    transform: rotate(30deg);
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(2) {
    display: none;
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(3) {
    top: 26px;
    transform: rotate(-30deg);
}
.drawer-content {
    width: 460px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background: var(--c-chip);
    z-index: 2000;
    padding: 150px 40px 40px;
    transform: translateX(100%);
    transition: transform .3s linear;
}
.drawer-content.is-checked {
    transform: translateX(0);
}
.drawer-content__link {
    display: block;
    padding: 14px 0;
    text-align: right;
    font-weight: 700;
    letter-spacing: .1;
}
.drawer-content__button-list {
    text-align: right;
    display: inline-block;
}
.drawer-content__button-list a {
    margin-top: 24px;
}
body.is-drawer-open {
    overflow: hidden;
}
/* ====================
  mv
==================== */
.mv {
    margin: 0 auto;
    background: var(--c-bg);
    position: relative;
}
.mv__inner {
    align-items: center;
    padding-top: 160px;
}
.mv__content {
    text-align: center;
}
.mv__image-sp {
    bottom: 0;
    object-fit: cover;
    object-position: top;
    width: 100%;
}
.mv__lead {
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 4rem;
    margin-bottom: var(--sp-3);
    padding-left: 24px;
}
.mv__description {
    font-size: 1rem;
    margin-bottom: var(--sp-12);
}
.mv__image-right,
.mv__image-left {
    display: none;
}
@media (min-width:768px) {
    .mv__image-sp {
        display: none;
    }
    .mv__image-right,
    .mv__image-left {
        display: block;
    }
    .mv__inner {
        padding: 110px 30px 109px;
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        height: 700px;
    }
    .mv__content {
        margin-top: 100px;
        width: 30%;
        position: absolute;
        z-index: 1;
    }
    .mv__image-right {
        position: absolute;
        width: 36%;
        bottom: 0;
        right: 0;
        max-height: 600px;
        min-height: 550px;
        object-fit: cover;
        object-position: top left;
    }
    .mv__image-left {
        position: absolute;
        width: 36%;
        bottom: 0;
        left: 0;
        max-height: 600px;
        min-height: 550px;
        object-fit: cover;
        object-position: top right;
    }
}
/* ====================
  about (top)
==================== */
.about {
    position: relative;
    padding: var(--sp-14) 0;
}
@media (min-width:768px) {
    .about {
        padding: var(--sp-15) 0 var(--sp-15);
    }
}
.about__title {
    text-align: center;
    margin-bottom: var(--sp-7);
}
.about__title span {
    font-weight: 700;
}
.about__title span:nth-of-type(1) {
    font-size: 1.3rem;
}
.about__title span:nth-of-type(2) {
    font-size: 1.4rem;
}
.about__image {
    text-align: center;
    width: 100%;
    margin-bottom: var(--sp-8);
}
.about__content {
    text-align: center;
    display: flex;
    flex-direction: column;
}
.about__image img {
    width: 320px;
}
.about__textbox {
    max-width: 380px;
    margin: 0 auto;
}
.about__text {
    font-weight: 500;
    line-height: 1.8;
    font-size: 1rem;
    text-align: left;
    margin-bottom: var(--sp-8);
}
.about__button a {
    margin-top: var(--sp-2);
    background: var(--c-text);
    color: var(--c-white);
    margin: 0 auto;
}
@media (min-width:768px) {
    .about__title span:nth-of-type(1) {
        font-size: 1.8rem;
    }
    .about__title span:nth-of-type(2) {
        font-size: 1.9rem;
    }
    .about__content {
        justify-content: center;
        flex-direction: row;
        align-items: center;
        gap: 40px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .about__image img {
        width: 360px;
    }
    .about__textbox {
        text-align-last: left;
        max-width: 600px;
    }
    .about__button {
        margin-top: var(--sp-3);
    }
}
/* ====================
  recommend
==================== */
.recommend {
    padding: var(--sp-10) 0;
    background: var(--c-bg);
    background-image:
        radial-gradient(circle, var(--c-dot) 2.5px, transparent 2.5px),
        radial-gradient(circle, var(--c-dot) 2.5px, transparent 2.5px);
    background-position: 0 10px, 7px 24px;
    background-size: 14px 28px;
}
.recommend__heading {
    display: flex;
    gap: 16px;
    margin-bottom: var(--sp-7);
    text-align: left;
}
.recommend__heading-title {
    font-size: 1.5rem;
    font-weight: 700;
}
.recommend__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.recommend__card {
    display: flex;
    align-items: center;
    background: var(--c-white);
    padding: 18px 30px;
    width: 100%;
    border: 2px solid var(--c-text);
    border-radius: 15px;
}
.recommend__text p {
    font-size: .9rem;
    line-height: 1.5;
    font-weight: 500;
}
.recommend__icon {
    width: 24%;
    margin-right: 16px;
    max-width: 72px;
}
@media (min-width:768px) {
    .recommend__grid {
        justify-content: space-between;
    }
    .recommend__card {
        flex: 0 0 calc(33.333% - 16px);
        min-width: 30%;
        margin: 0;
    }
    .recommend__icon {
        width: 84px;
    }
}
/* ====================
  service（SP=中央 / TB=左 / PC=左）
==================== */
.service {
    padding: var(--sp-15) 0 var(--sp-15);
}
.service__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 30px;
}
.service__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin: 0 auto;
}
.service__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.service__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 16px;
}
.service__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.service__item-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 12px;
}
.service__item-text {
    line-height: 1.6;
    font-size: 1rem;
    text-align: center;
}
/* tablet: 横並び・左寄せ */
@media (min-width:768px) and (max-width:1023px) {
    .service__card {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        max-width: 680px;
        text-align: left;
    }
    .service__thumb {
        flex: 0 0 45%;
        aspect-ratio: 4/3;
    }
    .service__item-text {
        flex: 1 1 auto;
        text-align: left;
    }
}
/* pc: 3列 */
@media (min-width:1024px) {
    .service__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 40px;
        justify-items: center;
    }
    .service__card {
        flex-direction: column;
        align-items: flex-start;
        max-width: 320px;
        text-align: left;
    }
    .service__item-title,
    .service__item-text {
        text-align: left;
    }
    .service__thumb {
        width: 100%;
    }
}
/* ====================
  voice (slider)
==================== */
@media (min-width:768px) {
    .voice {
        padding: 40px 0 20px;
    }
}
.voice__inner {
    margin: 0 30px;
}
@media (min-width:768px) {
    .voice__heading {
        text-align: left;
    }
    .voice__inner {
        margin-left: 100px;
    }
}
.voice .slick-track {
    display: flex;
    gap: 24px;
}
.voice .slick-slide {
    height: auto;
}
.voice .slick-list {
    overflow: hidden;
    margin: 0 -24px;
}
.voice .slick-prev,
.voice .slick-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-white);
    background-image: url(../img/arrow-icon.png);
    background-size: 100% auto;
    z-index: 1;
}
.voice .slick-prev {
    left: -24px;
    transform: rotate(3.142rad);
}
.voice .slick-next {
    right: -24px;
}
.slick-prev:before,
.slick-next:before {
    content: none;
}
.voice-card {
    background: var(--c-white);
    color: var(--c-text);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .1);
}
.voice-card__head {
    display: flex;
    align-items: center;
    background: var(--c-chip);
    padding: var(--sp-3) 18px;
}
.voice-card__avatar {
    aspect-ratio: 1/1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--c-white);
    border: 1px solid rgba(0, 0, 0, .1);
    margin-right: 16px;
}
.voice-card__who {
    margin: 0;
    font-size: var(--fz-md);
    font-weight: 300;
}

.voice-card__who strong{
    font-weight: 500;
}
.voice-card__tags {
    list-style: none;
    padding: 0;
    margin: var(--sp-3) 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tag {
    display: flex;
    align-items: left;
    flex-direction: column;
    gap: 2px;
    padding: 0 28px;
    border-radius: 10px;
    font-size: var(--fz-sm);
    line-height: 1.6;
}
.tag span {
    display: inline-block;
    color: var(--c-white);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--fz-xs);
}
.tag--before {
    color: var(--c-before);
}
.tag--before span {
    background: var(--c-before);
    width: 60px;
    text-align: center;
}
.tag--after {
    color: var(--c-after);
}
.tag--after span {
    background: var(--c-after);
    width: 60px;
    text-align: center;
}
.voice-card__text {
    border-top: 2px dashed var(--c-line);
    padding-top: var(--sp-3);
    font-size: 1rem;
    margin: 0 28px var(--sp-5);
}
@media (max-width:1023.98px) {
    .voice-card__text {
        font-size: 14px;
    }
}
/* ====================
  chairman
==================== */
.chairman {
    max-width: 800px;
    margin: 64px 14px;
}
.chairman__inner {
    background: var(--c-bg);
    padding: var(--sp-10) var(--sp-4);
    margin: 0 auto;
    border-radius: 16px;
    align-items: center;
}
.chairman__textbox {
    margin-right: 0;
}
@media (min-width:768px) {
    .chairman {
        max-width: 900px;
        margin: 64px auto;
    }
    .chairman__inner {
        display: flex;
        padding: var(--sp-10) 100px;
        flex-direction: row-reverse;
    }
    .chairman__textbox {
        margin-right: 48px;
    }
}
.chairman__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: var(--sp-3);
    text-align: center;
}
.chairman__title span{
    font-weight: 700;
}

@media (min-width:768px) {
    .chairman__title {
        text-align: left;
    }
}
.chairman__text {
    font-size: .9rem;
}
.chairman__title span {
    font-size: 1.3rem;
    margin-right: 24px;
}
.chairman__img {
    margin: 0 auto var(--sp-6);
    text-align: center;
}
.chairman__img img {
    width: 60%;
    max-width: 250px;
    height: auto;
}

.chairma__button {
    text-align: center;
}

.chairma__button a{
    letter-spacing: .48px;
    padding: var(--sp-3) var(--sp-4);
    display: inline-block;
    border-radius: 50px;
    font-size: .9rem;
    min-width: 150px;
    text-align: center;
    transition: opacity .2s ease;
    background: var(--c-ink);
    color: var(--c-white);
    margin-top: 21px;
}

@media (min-width:768px) {
    .chairman__img img {
        width: 550px;
    }
    .chairma__button {
    text-align: left;
}
    
}


/* ====================
  cta
==================== */
.cta {
    background: var(--c-bg);
    background-image:
        radial-gradient(circle, var(--c-dot) 2.5px, transparent 2.5px),
        radial-gradient(circle, var(--c-dot) 2.5px, transparent 2.5px);
    background-position: 0 10px, 7px 24px;
    background-size: 14px 28px;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 60px 0;
}
.cta__button_inner {
    display: grid;
    gap: 16px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    max-width: 1080px;
}
@media (min-width:768px) {
    .cta {
        padding: 100px 0;
    }
    .cta__button_inner {
        gap: 24px;
        justify-content: space-around;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
}
.cta__button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    box-shadow: 0 3px 6px var(--c-shadow);
    border-radius: 20px;
    color: var(--c-white);
    max-width: 600px;
    min-width: 50%;
    padding: 24px 38px;
}
@media (min-width:768px) {
    .cta__button {
        max-width: 680px;
        padding: 32px;
        min-height: 140px;
    }
}
.form-icon {
    width: 40px;
    margin-bottom: 12px;
    fill: #fff;
}
.cta__button__form1 {
    background: #56b52c;
}
.cta__button__form2 {
    background: #E8706E;
}
.cta__button__form3,
.cta__button__form4 {
    background: #767A89;
}
.cta__button__title {
    margin: 0 0 8px;
    line-height: 1.4;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
}
.cta__button__text {
    margin: 0;
    line-height: 1.6;
    font-weight: normal;
    font-size: .9rem;
    text-align: center;
    margin-top: 4px;
}
/* ====================
  footer
==================== */
.footer {
    background: var(--c-text);
    text-align: center;
    height: 360px;
    padding: 120px 12px 0;
}
.footer__logo {
    width: 60%;
    text-align: center;
    margin: 0 auto 120px;
}
.footer__logo a img {
    width: 360px;
}
.footer__logo:hover {
    opacity: .5;
}
.footer__copyright {
    color: #f5f5f5;
    font-size: var(--fz-xs);
    line-height: 1;
    letter-spacing: .96px;
    margin-bottom: var(--sp-3);
}
/* ========================================
  下層：mv-sub
======================================== */
.mv-sub {
    background: var(--c-bg);
    height: 350px;
}
.mv-sub__inner {
    text-align: center;
    padding-top: 150px;
}
.mv-sub__content {
    font-family: "Rubik", sans-serif;
}
.mv-sub__en {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 3.8px;
}
.mv-sub__ja {
    font-size: 1.2rem;
    margin-top: var(--sp-3);
    font-weight: 700;
}
@media (min-width:768px) {
    .mv-sub {
        height: 450px;
    }
    .mv-sub__inner {
        padding-top: 220px;
    }
    .mv-sub__en {
        font-size: 100px;
    }
}
/* ========================================
  下層：ABOUT（lead）
======================================== */
.about-lead {
    position: relative;
    overflow: visible;
    isolation: isolate;
    padding: var(--sp-15) 24px;
    text-align: center;
    z-index: -10;
}
.about-lead__inner {
    padding: 24px;
}
.about-lead__textbox {
    position: relative;
    z-index: 1;
    max-width: 28rem;
    margin: 0 auto;
}
.about-lead__textbox p {
    font-size: 1.1rem;
    margin-bottom: var(--sp-7);
    line-height: 2.2rem;
    text-align: left;
}
.about-lead__textbox br {
    display: none;
}
/* bg */
.about-lead::before,
.about-lead::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    opacity: .3;
}
.about-lead::before {
    background-image: url("../img/about-left-img.png");
    left: -100px;
    top: 0;
}
.about-lead::after {
    background-image: url("../img/about-right-img.png");
    right: -100px;
    top: 220px;
}
/* question */
.about-lead__question {
    margin-bottom: var(--sp-12);
}
.about-lead__question__inner {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}
.about-lead__question__textbox {
    margin-top: var(--sp-7);
    margin-bottom: 64px;
    text-align: left;
}
.about-lead__question__title {
    margin: var(--sp-7) 0 var(--sp-5);
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 700;
    text-align: left;
}
.purple {
    padding: 0 4px;
    margin-right: 4px;
    font-weight: 700;
    background: linear-gradient(transparent 60%, #cdb3d9 50%);
}
.about-lead__question__image-pc {
    display: none;
}
.about-lead__question__image-sp {
    width: 80%;
}
@media (min-width:768px) {
    .about-lead__textbox br {
        display: block;
    }
    .about-lead__question__inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 210px;
    }
    .about-lead__question__title,
    .about-lead__question__textbox {
        text-align: left;
    }
    .about-lead__question__image {
        width: 40%;
        margin-left: 62px;
    }
    .about-lead__question__image-pc {
        display: block;
        min-width: 450px;
    }
    .about-lead__question__image-sp {
        display: none;
    }
}
@media (min-width:1200px) {
    .about-lead {
        max-width: 1360px;
        margin: 0 auto;
    }
    .about-lead__textbox {
        max-width: 60%;
    }
    .about-lead__textbox p {
        line-height: 2.8rem;
        text-align: center;
    }
    .about-lead::before,
    .about-lead::after {
        width: 300px;
        height: 400px;
        opacity: 1;
    }
    .about-lead::after {
        right: -100px;
        top: 120px;
    }
}
/* ========================================
  下層：ABOUT セクション
======================================== */
.about-section {
    background: var(--c-cream);
    position: relative;
    margin-top: 100px;
}
.about-section::before {
    content: "";
    position: absolute;
    background-image: url("../img/about-bg.png");
    width: 100%;
    height: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    top: -40px;
}
@media (min-width:768px) {
    .about-section::before {
        height: 110px;
        top: -110px;
    }
}
.about-section__inner {
    text-align: center;
    padding: var(--sp-6);
}
.about-section__title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 3rem;
}
@media (min-width:768px) {
    .about-section__title {
        font-size: 1.6rem;
    }
}
.about-section__image {
    margin: var(--sp-9) 0;
    width: 100%;
}
@media (min-width:768px) {
    .about-section__image {
        max-width: 650px;
        margin: var(--sp-13) auto;
    }
}
.about-section__textbox {
    font-size: 1rem;
    line-height: 2;
    text-align: left;
}
.about-section__textbox br {
    display: none;
}
/* flow */
.about-section__flow {
    margin: var(--sp-12) 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    padding-left: 0;
}
.about-section__flow-item {
    background: var(--c-white);
    padding: 22px 52px 42px;
    text-align: center;
    border-radius: 60px;
    position: relative;
}
.about-section__flow-img-sp {
    width: 200px;
    margin: var(--sp-4) auto;
}
.about-section__flow-img-pc {
    display: none;
}
.about-section__flow-num {
    color: var(--c-accent);
}
.about-section__flow-jp {
    font-weight: 600;
    font-size: 1.6rem;
}
.about-section__flow-title {
    padding-bottom: var(--sp-3);
    border-bottom: 1px dashed var(--c-line);
}
.about-section__flow-text {
    text-align: left;
    margin-top: var(--sp-3);
    line-height: 1.8;
}
@media (min-width:768px) {
    .about-section__textbox br {
        display: block;
    }
    .about-section__textbox {
        font-size: 1rem;
        line-height: 2;
        text-align: center;
    }
    .about-section__flow-img-sp {
        display: none;
    }
    .about-section__flow-item {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 42px 72px;
        text-align: left;
    }
    .about-section__flow-img-pc {
        display: block;
        width: 20%;
        min-width: 200px;
        flex: 0 0 auto;
    }
    .about-section__flow-content {
        flex: 1 1 auto;
    }
    .about-section__flow-title {
        display: flex;
        align-items: center;
        gap: 16px;
    }
}
/* ====================
  私たちのアプローチ
==================== */
.about-approach {
    padding: 60px 0;
    width: 100%;
}
.about-approach__inner {
    text-align: center;
}
.about-approach__title p {
    font-size: 1.8rem;
    margin-bottom: 32px;
    font-weight: 800;
}
.approach-list {
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}
.approach-item {
    background-color: #F8F7F3;
    border-radius: 16px;
    padding: 32px 42px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    max-width: 400px;
}
.approach-item-text {
    font-size: 1rem;
    margin: 0 auto;
}
.approach-item-img img {
    display: block;
    margin: 16px auto;
    width: 70%;
    text-align: center;
}
.approach-item-title {
    font-weight: 600;
    font-size: 1.4rem;
}
@media (min-width:768px) {
    .approach-list {
        display: flex;
    }
    .approach-item {
        text-align: center;
    }
    .approach-row {
        display: flex;
        gap: 4px;
    }
}
.approach-item-arrow {
    width: 20px;
    height: auto;
    flex: 0 0 auto;
    transform: rotate(90deg);
}
@media (min-width:768px) {
    .approach-item-arrow {
        transform: none;
        width: 16px;
    }
}
/* 最後のメッセージ部分（誤字互換: .aboutーend / 正: .about-end） */
.aboutーend,
.about-end {
    position: relative;
    background: var(--c-white);
    padding-bottom: 100px;
    margin: 0 auto;
}
.end-border {
    border: 13px solid #EAEAEB;
    border-radius: 69px;
    padding-top: 42px;
    padding-bottom: 60px;
    margin: 32px auto;
}
.end-text {
    color: #323739;
    text-align: center;
    font-size: 1rem;
}
.end-img {
    inset: 0;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: auto;
    bottom: 0;
    width: 230px;
}
/* 左右の人物を配置 */
.end-img--left {
    left: 0;
    right: auto;
}
.end-img--right {
    right: 0;
    left: auto;
}
@media (min-width:768px) {
    .end-border {
        padding-top: 62px;
        padding-bottom: 62px;
    }
    .end-img {
        width: 400px;
    }
}
/* ========================================
  contact（最小・整理版）
======================================== */
.contact {
    padding: var(--sp-8) 0;
}
.contact-heading__en {
    font-size: 3rem;
}
@media (min-width:768px) {
    .contact {
        padding: var(--sp-8) 0;
    }
    .contact-heading__en {
        font-size: 5rem;
    }
}
/* ====== フォーム全体 ====== */
.contact__form {
    margin: 80px 0;
}
@media (min-width:768px) {
    .contact__form {
        margin-top: 50px;
        max-width: 612px;
        margin-inline: auto;
    }
}
.contact__fields {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 42px;
}
.contact__button {
    margin-top: 29px;
    text-align: center;
}
@media (min-width:768px) {
    .contact__button {
        margin-top: 38px;
    }
}
/* ====== ボタン ====== */
.button--form {
    background-color: #323739;
    color: #fff;
    border: 2px solid #323739;
    transition: all .3s ease;
}
.button--form:hover {
    background-color: #A0A0A0;
    color: #323739;
}
/* ====== 各フォーム項目 ====== */
@media (min-width:768px) {
    .form-field {
        display: flex;
        gap: 32px;
        align-items: flex-start;
    }
}
/* ラベル＋必須バッジ */
.form-field__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.form-field__label {
    font-weight: 700;
    line-height: 1.4375;
    flex: 0 0 auto;
}
.form-field__tag {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 2px;
    background: var(--c-accent);
    color: var(--c-white);
    padding: 6px 8px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.98px;
}
.form-field__tag.is-option {
    background: var(--c-muted);
}
/* PCで折れにくく */
@media (min-width:768px) {
    .form-field__head {
        min-width: 180px;
        justify-content: flex-end;
        margin: auto 0;
    }
}
/* 入力エリア */
.form-field__item {
    margin-top: 15px;
    flex-grow: 1;
}
@media (min-width:768px) {
    .form-field__item {
        margin-top: 0;
    }
}
/* 入力UI */
.form-text,
.form-select,
.form-textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid var(--c-text);
    background: var(--c-white);
    transition: border-color .3s;
    padding: 8px;
}
.form-text {
    padding: 12px 13px 11px;
}
.form-select {
    appearance: none;
    font-weight: 700;
    padding: 12px 43px 11px 13px;
    background: url(../img/select-arrow.png) no-repeat right 14px center/13px;
}
/* ====== CF7整形 ====== */
.wpcf7-form p {
    margin: 0;
}
.wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
}
.wpcf7-list-item:last-child {
    margin-right: 0;
}
/* ラジオの右側余白（.form-radio 使ってる場合のみ有効） */
.form-radio input[type="radio"] {
    margin-right: 6px;
}
/* バリデーション表示 */
.wpcf7-not-valid-tip {
    margin-top: 6px;
    display: block;
}
/* 自動挿入の <br> を抑止 */
.wpcf7 br {
    display: none;
}
/* ====================
  animations (deduped)
==================== */
.fade-in {
    opacity: 0;
    transition: opacity 1s;
}
.fade-in.is-in-view {
    opacity: 1;
}
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s, transform 1s;
}
.fade-in-up.is-in-view {
    opacity: 1;
    transform: none;
}
.fade-in-down {
    opacity: 0;
    transform: translateY(-24px);
    transition: opacity 1s, transform 1s;
}
.fade-in-down.is-in-view {
    opacity: 1;
    transform: none;
}
/* （任意）段階表示：親に .stagger を付ける */
.stagger>* {
    transition-delay: .02s;
}
.stagger>*:nth-child(2) {
    transition-delay: .08s;
}
.stagger>*:nth-child(3) {
    transition-delay: .14s;
}
.stagger>*:nth-child(4) {
    transition-delay: .20s;
}
.stagger>*:nth-child(5) {
    transition-delay: .26s;
}
.stagger>*:nth-child(6) {
    transition-delay: .32s;
}


/* ========================================
  プロフィールページ
======================================== */

.profile-inner {
    max-width: 960px;
    margin: 60px auto;
}

.profile-inner p {
    padding-top: 24px;
    padding-bottom: 24px;
}

.profile-inner h1 {
    line-height: 1.5;
    border-radius: 40px;
}
.profile-inner h1, h2,h3,h4,h5 {
    line-height: 1.5;
    margin-top: 24px;
    margin-bottom: 24px;
}
.profile-inner h3 {

}

/* Snow Monkey Blocks を使っている時の内側も確実に寄せる */
.profile-wrapper .smb-container,
.profile-wrapper .smb-section,
.profile-wrapper .smb-box,
.profile-wrapper .smb-box__body,
.profile-wrapper .smb-items{
  padding: 32px !important;
}

/* Gutenbergのコアレイアウトも寄せる（横並び等） */
.profile-wrapper .wp-block-group,
.profile-wrapper .wp-block-columns,
.profile-wrapper .wp-block-cover{
  padding-left: var(--pad);
  padding-right: var(--pad);
  box-sizing: border-box;
}

/* はみ出しやすい .alignwide / .alignfull を内側に収める */
.profile-wrapper .alignwide,
.profile-wrapper .alignfull{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* 変更しやすいブランド色 */
:root { --brand: #e87470; }

/* Gutenberg見出し共通の当たり */
.wp-block-heading { line-height: 1.35; }

/* 1) 下線（アクセント） */
.is-style-underbar{ position:relative; padding-bottom:.4rem; }
.is-style-underbar::after{
  content:""; position:absolute; left:0; bottom:0;
  width:4.5em; height:4px; background:var(--brand);
  border-radius:2px;
}
/* H3以下は少し細め＆短め */
h3.is-style-underbar::after{ width:3.5em; height:3px; }
h4.is-style-underbar::after{ width:3em; height:2px; }

/* 2) 左ボーダー */
.is-style-leftbar{
  border-left:6px solid var(--brand);
  padding-left:.8rem;
}

/* 3) 文字色アクセント */
.is-style-accent{ color:var(--brand); }

/* 4) 背景ベタ塗り（帯） */
.is-style-band{
  background:var(--brand); 
  color:#fff;
  padding:.4rem .8rem; 
  border-radius:.4rem;
}

/* 5) マーカー風（下地だけ塗る） */
.is-style-marker{
  background: linear-gradient(transparent 60%, var(--brand));
  padding:.1rem .2rem;
}

/* 6) ピル型ラベル（小見出しに◎） */
.is-style-pill{
  display:inline-block; 
  font-size:90%;
  background:#F8F7F3; 
  padding:.25rem .7rem; 
  border-radius:999px;
  border:1px solid var(--brand);
}