@charset "utf-8";

html {
    scroll-behavior: smooth;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* overflow: hidden; */
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    color: var(--black);
    background: #F8FCFF;
}

.pcnone {
    display: none;
}
@media screen and (max-width: 576px) {
    .spnone {
        display: none;
    }
    .pcnone {
        display: block;
    }
}

/* ---------------------------------------------------------------------------------- */
/* position */
/* ---------------------------------------------------------------------------------- */
.relative {
    position: relative !important;
}
.absolute {
    position: absolute !important;
}
iframe {
    border: 0;
    vertical-align: bottom;
}

/* ---------------------------------------------------------------------------------- */
/* upper */
/* ---------------------------------------------------------------------------------- */
.box {
    max-width: calc(1000px + 4.8rem);
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    margin: 0 auto;
    position: relative;
}
.full {
    width: 100%;
}
.tel {
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .box {
        padding-left: 2.0rem;
        padding-right: 2.0rem;
    }
    .tel {
        pointer-events: inherit;
    }
}

/* ---------------------------------------------------------------------------------- */
/* column */
/* ---------------------------------------------------------------------------------- */
.flex {display: flex;}
.rev {flex-direction: row-reverse;}
.jcc {justify-content: center;}
.jcs {justify-content: space-between;}
.jce {justify-content: flex-end;}
.aic {align-items: center;}
.ais {align-items: flex-start;}
.aie {align-items: flex-end;}
.fwrap {flex-wrap: wrap;}
.block {display: block;}
.iblock {display: inline-block;}
.wfit {width: fit-content;}
.contents {display: contents;}

/* ---------------------------------------------------------------------------------- */
/* margin,padding */
/* ---------------------------------------------------------------------------------- */
.pt36 {padding-top: 3.6rem;}
.pt96 {padding-top: 9.6rem;}
.pb36 {padding-bottom: 3.6rem;}
.pb64 {padding-bottom: 6.4rem;}
.pb96 {padding-bottom: 9.6rem;}
.mt36 {margin-top: 3.6rem;}
.mb8 {margin-bottom: 0.8rem;}
.mb18 {margin-bottom: 1.8rem;}
.mb24 {margin-bottom: 2.4rem;}
.mb32 {margin-bottom: 3.2rem;}
.mb36 {margin-bottom: 3.6rem;}
.mb48 {margin-bottom: 4.8rem;}
.mb64 {margin-bottom: 6.4rem;}
.mb80 {margin-bottom: 8.0rem;}
.mb96 {margin-bottom: 9.6rem;}
.mb100 {margin-bottom: 10rem;}
.mb120 {margin-bottom: 12rem;}
.mb200 {margin-bottom: 20rem;}
@media screen and (max-width: 768px) {
    .pt96 {padding-top: 6.4rem;}
    .pb96 {padding-bottom: 6.4rem;}
    .mb24 {margin-bottom: 1.6rem;}
    .mb32 {margin-bottom: 2rem;}
    .mb48 {margin-bottom: 3.6rem;}
    .mb80 {margin-bottom: 5rem;}
    .mb96 {margin-bottom: 6.4rem;}
    .mb100 {margin-bottom: 7rem;}
    .mb200 {margin-bottom: 10rem;}
}

/* ---------------------------------------------------------------------------------- */
/* text */
/* ---------------------------------------------------------------------------------- */
.google-sans {
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "ROND" 0;
}
.m-plus {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}
p,
a,
ul,
li,
div {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.7;
}

.fs24 {font-size: clamp(18px, 2.5vw, 21px);}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw900 {font-weight: 900;}


/* 文字揃え */
.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}

/* 縦書き */
.wmrl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* ---------------------------------------------------------------------------------- */
/* color */
/* ---------------------------------------------------------------------------------- */
:root {
    --black: rgba(51, 51, 51);
    --pink: rgba(248, 218, 228);
    --yellow: rgba(255, 255, 204);
    --purple: rgba(205, 201, 227);
    --orange: rgba(255, 239, 213);
    --blue: rgba(197, 235, 250);
    --red: rgba(255, 227, 227);
    --brown: rgba(236, 232, 225);
    --green: rgba(219, 240, 211);
    --gray: rgba(208, 222, 221);
    --charcoal: rgba(248, 217, 196); 
    --light-green: rgb(196, 248, 213); 
}
.black {color: var(--black);}
.pink {background-color: var(--pink);}
.yellow {background-color: var(--yellow);}
.purple {background-color: var(--purple);}
.orange {background-color: var(--orange);}
.blue {background-color: var(--blue);}
.red {background-color: var(--red);}
.brown {background-color: var(--brown);}
.green {background-color: var(--green);}
.gray {background-color: var(--gray);}
.charcoal {background-color: var(--charcoal);}
.light-green {background-color: var(--light-green);}
.white {color: #fff;}

/* ---------------------------------------------------------------------------------- */
/* header */
/* ---------------------------------------------------------------------------------- */
/* キービジュアル */
.header-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eef8ff 0%, #cdeaf9 55%, #bfe4f7 100%);
    container-type: inline-size;
}
/* 空エリア（コピー＋装飾） */
.header-visual__sky {
    position: relative;
    width: 100%;
    padding-top: 25%;
}
.header-visual__deco {
    position: absolute;
    display: block;
    max-width: none;
}
/* 太陽 */
.header-visual__sun {
    top: 20%;
    left: 3%;
    width: 6%;
    z-index: 4;
    animation: sun-spin 18s linear infinite;
}
@keyframes sun-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* 虹 */
.header-visual__rainbow {
    top: 70%;
    left: 0%;
    width: 42%;
    z-index: 2;
}
/* 雲 */
.header-visual__cloud--l {
    top: 18%;
    left: -10%;
    width: 38%;
    z-index: 1;
}
.header-visual__cloud--r {
    top: 50%;
    right: -10%;
    width: 50%;
    z-index: 1;
}
/* 鳥 */
.header-visual__bird--1,
.header-visual__bird--2,
.header-visual__bird--3 {
    animation-name: bird-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.header-visual__bird--1 {
    top: 60%;
    right: 17%;
    width: 3%;
    z-index: 5;
    animation-duration: 3.2s;
    animation-delay: 0s;
}
.header-visual__bird--2 {
    top: 70%;
    right: 12%;
    width: 3%;
    z-index: 5;
    animation-duration: 3.6s;
    animation-delay: -1.1s;
}
.header-visual__bird--3 {
    top: 80%;
    right: 6%;
    width: 3%;
    z-index: 5;
    animation-duration: 2.8s;
    animation-delay: -2s;
}
@keyframes bird-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(1%, -30%) rotate(4deg);
    }
    50% {
        transform: translate(0, -55%) rotate(0deg);
    }
    75% {
        transform: translate(-1%, -30%) rotate(-4deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .header-visual__bird--1,
    .header-visual__bird--2,
    .header-visual__bird--3,
    .header-visual__car,
    .header-visual__sun {
        animation: none;
    }
}
/* コピー */
.header-visual__copy {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    padding: 0 9%;
    z-index: 7;
    text-align: center;
    color: #232584;
    line-height: 1.4;
}
.header-visual__catch {
    font-size: clamp(21px, 3.4cqw, 32px);
    letter-spacing: 0.04em;
    margin-bottom: 0.3em;
    -webkit-text-stroke:5px white;
    paint-order:stroke fill;
}
.header-visual__title {
    font-size: clamp(32px, 9.4cqw, 54px);
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin-bottom: 0.2em;
    white-space: nowrap;
    -webkit-text-stroke:10px white;
    paint-order:stroke fill;
}
.header-visual__sub {
    font-size: clamp(18px, 3cqw, 28px);
    color: #569d45;
    letter-spacing: 0.02em;
    margin-bottom: 0.35em;
    -webkit-text-stroke:5px white;
    paint-order:stroke fill;
}
/* 街並み(奥) */
.header-visual__city {
    display: block;
    width: 100%;
    position: relative;
    z-index: 7;
    bottom: -20px;
}
/* 手前の道・緑地エリア */
.header-visual__ground {
    position: relative;
    width: 100%;
}
.header-visual__road {
    display: block;
    width: 100%;
    bottom: 0;
    position: relative;
    z-index: 2;
}
.header-visual__town {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
}
.header-visual__car {
    position: absolute;
    z-index: 3;
    animation-name: bird-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.header-visual__car--1 { bottom: 70%; left: 33%;   width: 4%; animation-duration: 7s; animation-delay: 0s; }
.header-visual__car--2 { bottom: 69%; left: 52%; width: 4%; animation-duration: 7.6s; animation-delay: -2s; }
.header-visual__car--3 { bottom: 70%; left: 70%; width: 3%; animation-duration: 6.6s; animation-delay: -4s; }
.header-visual__car--4 { bottom: 70%; right: 18%;   width: 3%; animation-duration: 8s; animation-delay: -3s; }

@media screen and (max-width: 768px) {
    header .box {
        padding: 0;
    }
    .header-visual__sky {
        padding-top: 35%;
    }
    .header-visual__copy {
        top: 30%;
    }
}
@media screen and (max-width: 576px) {
    .header-visual__sky {
        padding-top: 50%;
    }
    .header-visual__city {
        bottom: -30px;
    }
    .header-visual__rainbow {
        top: inherit;
    }
    .header-visual__cloud--l {
        width: 48%;
    }
    .header-visual__bird--1 {
    top: 90%;
    }
    .header-visual__bird--2 {
        top: 100%;
    }
    .header-visual__bird--3 {
        top: 100%;
    }
}

/* ---------------------------------------------------------------------------------- */
/* footer */
/* ---------------------------------------------------------------------------------- */
footer {
    background: #232584;
}
.footer__copy {
    font-size: 10px
}

/* TOPへ戻る */
.pagetop {
    position: fixed;
    right: 2.4rem;
    bottom: 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: #232584;
    box-shadow: 0 4px 10px rgba(35, 37, 132, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.3s ease;
    z-index: 100;
}
.pagetop.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pagetop:hover {
    background: #3739a8;
}
.pagetop__arrow {
    width: 0.8em;
    height: 0.8em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: 0.3em;
}
.pagetop__text {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1;
}
@media screen and (max-width: 768px) {
    .pagetop {
        right: 1.6rem;
        bottom: 1.6rem;
        width: 4.8rem;
        height: 4.8rem;
    }
}