@charset "utf-8";

#mainvisual {
/*    aspect-ratio: 1200 / 944;*/
    height: 944px;
    padding-block: 120px 260px;
}

#mainvisual::before {
    background: url(../images/top/bg_mainvisual.svg) no-repeat center top;
    aspect-ratio: 1200 / 942;
}

#mainvisual::after {
    aspect-ratio: 1200 / 664;
}

#mainvisual + * {
    margin-top: -260px;
}

@media (min-width: 1201px) {
    #mainvisual {
        height: calc(944 / 1201 * 100vw);
        padding-block: calc(120 / 1201 * 100vw) calc(260 / 1201 * 100vw);
    }

    #mainvisual + * {
        margin-top: calc(-260 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #mainvisual {
        height: calc(944 / 1199 * 100vw);
        padding-block: calc(120 / 1199 * 100vw) calc(260 / 1199 * 100vw);
    }

    #mainvisual + * {
        margin-top: calc(-260 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #mainvisual {
/*        aspect-ratio: 375 / 385;*/
        height: calc(385 / 375 * 100vw);
        padding-block: calc(64 / 375 * 100vw) calc(82 / 375 * 100vw);
    }

    #mainvisual::before {
        background-image: url(../images/top/bg_mainvisual_sp.svg);
        aspect-ratio: 375 / 385;
    }

    #mainvisual::after {
        aspect-ratio: 375 / 296;
    }

	#mainvisual + * {
        margin-top: calc(-82 / 375 * 100vw);
    }
}

section:not(:first-of-type) {
    background-color: #ffffff;
    padding-block: 20px 130px;
    position: relative;
}

section:not(:first-of-type)::before {
    background-color: #ffffff;
    mask-image: url(../images/top/bg_section.svg);
    mask-repeat: no-repeat;
    mask-position: center bottom;
    mask-size: 100% auto;
    content: "";
    width: 100%;
    aspect-ratio: 1200 / 88;
    position: absolute;
    top: -84px;
    left: 0;
}

section > .sectionInner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 50px;
}

section .backgroundBox {
    background-color: #cccccc;
    border-radius: 30px;
    padding: 65px 60px 70px;
}

section .backgroundBox.-colorGreen {
    background-color: #c7f9bd;
}

section .backgroundBox.-colorYellow {
    background-color: #fff06c;
}

section .backgroundBox.-colorLightBlue {
    background-color: #c1e8f8;
}

section .backgroundBox + .backgroundBox {
    margin-top: 60px;
}

@media (min-width: 1201px) {
    section:not(:first-of-type) {
        padding-block: calc(20 / 1201 * 100vw) calc(130 / 1201 * 100vw);
    }

    section:not(:first-of-type)::before {
        top: calc(-84 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    section:not(:first-of-type) {
        padding-block: calc(20 / 1199 * 100vw) calc(130 / 1199 * 100vw);
    }

    section:not(:first-of-type)::before {
        top: calc(-84 / 1199 * 100vw);
    }

    section > .sectionInner {
        padding-inline: calc(50 / 1199 * 100vw);
    }

    section .backgroundBox {
        border-radius: calc(30 / 1199 * 100vw);
        padding: calc(65 / 1199 * 100vw) calc(60 / 1199 * 100vw) calc(70 / 1199 * 100vw);
    }

    section .backgroundBox + .backgroundBox {
        margin-top: calc(60 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    section:not(:first-of-type) {
        padding-block: calc(40 / 375 * 100vw) calc(78 / 375 * 100vw);
    }

    section:not(:first-of-type):before {
        top: calc(-26 / 375 * 100vw);
    }

    section > .sectionInner {
        padding-inline: calc(10 / 375 * 100vw);
    }

    section .backgroundBox {
        border-radius: calc(20 / 375 * 100vw);
        padding: calc(35 / 375 * 100vw) calc(18 / 375 * 100vw);
    }

    section .backgroundBox + .backgroundBox {
        margin-top: calc(62 / 375 * 100vw);
    }
}

section .sectionHeading,
#contact .sectionHeading {
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 48px;
    position: relative;
}

section .sectionHeading::after {
    background-color: #000000;
    content: "";
    width: 45px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

section .sectionHeading > h2,
#contact .sectionHeading > h2 {
    font-size: 6rem;
    font-family: sictake-karami, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.05em;
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
}

section .sectionHeading > .subText,
#contact .sectionHeading > .subText {
    font-size: 2.4rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 20px;
    width: 100%;
    transform: scaleX(1);
}

section .linkButton {
    width: fit-content;
    margin: 20px auto 0;
    transform: scaleX(0.88);
    transform-origin: center;
}

section .linkButton > a {
    color: #ffffff;
    background-color: #55ac6f;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(20px * 1.136);
    width: max-content;
    padding: 14px calc(32px * 1.136);
    border-radius: 30px;
    font-size: 1.4rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    position: relative;
}

section .linkButton > a:hover {
    text-decoration: none;
}

section .linkButton > a::after {
    background-color: #ffffff;
	mask-image: url(../images/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
    content: "";
    width: calc(12px * 1.136);
    height: 12px;
    position: relative;
    flex: 0 0 auto;
}

@media (min-width: 768px) and (max-width: 1199px) {
    section .sectionHeading,
    #contact .sectionHeading {
        padding-bottom: calc(40 / 1199 * 100vw);
        margin-bottom: calc(48 / 1199 * 100vw);
    }
    
    section .sectionHeading::after {
        width: calc(45 / 1199 * 100vw);
        height: calc(1 / 1199 * 100vw);
    }
    
    section .sectionHeading > h2,
    #contact .sectionHeading > h2 {
        line-height: 1;
    }
    
    section .sectionHeading > .subText,
    #contact .sectionHeading > .subText {
        margin-top: calc(20 / 1199 * 100vw);
    }

    section .linkButton {
        margin: calc(20 / 1199 * 100vw) auto 0;
    }

    section .linkButton > a {
        gap: calc((20 * 1.136) / 1199 * 100vw);
        padding: calc(16 / 1199 * 100vw) calc((32 * 1.136) / 1199 * 100vw);
        border-radius: calc(30 / 1199 * 100vw);
    }

    section .linkButton > a::after {
        width: calc((12 * 1.136) / 1199 * 100vw);
        height: calc(12 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    section .sectionHeading,
    #contact .sectionHeading {
        padding-bottom: calc(32 / 375 * 100vw);
        margin-bottom: calc(32 / 375 * 100vw);
    }

    section .sectionHeading::after {
        width: calc(45 / 375 * 100vw);
        height: calc(1 / 375 * 100vw);
    }

    section .sectionHeading > h2,
    #contact .sectionHeading > h2 {
        font-size: 4.5rem;
    }

    section .sectionHeading > .subText,
    #contact .sectionHeading > .subText {
        font-size: 2.1rem;
        margin-top: calc(16 / 375 * 100vw);
    }

    section .linkButton {
        margin: calc(20 / 375 * 100vw) auto 0;
    }

    section .linkButton > a {
        gap: calc((12 * 1.136) / 375 * 100vw);
        padding:  calc(14 / 375 * 100vw) calc((22 * 1.136) / 375 * 100vw);
        border-radius: calc(25 / 375 * 100vw);
        font-size: 1.4rem;
    }

    section .linkButton > a::after {
        width: calc((12 * 1.136) / 375 * 100vw);
        height: calc(12 / 375 * 100vw);
    }
}

#mainvisual #mainSlider {
    max-width: 792px;
    aspect-ratio: 792 / 514;
    margin: 0 auto 42px;
    position: relative;
}

#mainvisual #mainSlider .slideItem {
    aspect-ratio: 792 / 514;
/*    clip-path: ellipse(50% 50% at center);*/
    clip-path: shape(from 51.75% 100%,curve by 48.25% -46.32% with 38.81% 0%/48.25% -25.54%,smooth to 51.21% 0% with 92.45% 0%,hline by -7.82%,curve to 0% 52.81% with 11.86% 0%/0% 35.93%,curve by 43.94% 47.19% with 0% 30.74%/14.83% 47.19%,hline by 7.82%,close);
    overflow: hidden;
}

@media (min-width: 1201px) {
    #mainvisual #mainSlider {
        max-width: calc(792 / 1201 * 100vw);
        margin: 0 auto calc(42 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #mainvisual #mainSlider {
        max-width: calc(792 / 1199 * 100vw);
        margin: 0 auto calc(42 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #mainvisual #mainSlider {
        max-width: calc(350 / 375 * 100vw);
        aspect-ratio: 350 / 226;
        margin: 0 auto calc(5 / 375 * 100vw);
    }
}

#overview {
    padding-top: 100px;
    padding-bottom: 230px;
    margin-inline: auto;
    position: relative;
    z-index: 5;
}

#overview::after {
    background: url(../images/top/bg_splash.svg) no-repeat center center;
    background-size: 100% auto;
    content: "";
    width: 100%;
    aspect-ratio: 1200 / 396;
    position: absolute;
    bottom: -150px;
    left: 0;
    z-index: 5;
}

#overview p {
    font-weight: 600;
    line-height: calc(30 / 16);
    text-align: center;
    letter-spacing: 0.075em;
}

#overview p + p {
    margin-top: 2em;
}

#overview p:last-of-type {
    margin-top: 2em;
    font-size: 2.6rem;
    line-height: calc(30 / 26);
}

#overview .overviewImage {
    display: flex;
    flex-direction: column;
    position: absolute;
}

#overview .overviewImage img {
    width: auto;
    height: 100%;
}

#overview .overviewImage.imagePosRight {
    gap: 66px;
    align-items: flex-end;
    right: 30px;
    top: -43px;
}

#overview .overviewImage.imagePosRight > li {
    height: 212px;
}

#overview .overviewImage.imagePosRight > li:nth-child(2) {
    height: 239px;
}

#overview .overviewImage.imagePosLeft {
    gap: 101px;
    align-items: flex-end;
    left: 2px;
    top: 0;
}

#overview .overviewImage.imagePosLeft > li {
    height: 208px;
}

#overview .overviewImage.imagePosLeft > li:nth-child(2) {
    height: 226px;
}

@media (min-width: 1201px) {
    #overview {
        padding-top: calc(100 / 1201 * 100vw);
        padding-bottom: calc(230 / 1201 * 100vw);
    }
    
    #overview::after {
        bottom: calc(-150 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #overview {
        padding-top: calc(100 / 1199 * 100vw);
        padding-bottom: calc(230 / 1199 * 100vw);
    }

    #overview::after {
        bottom: calc(-150 / 1199 * 100vw);
    }

    #overview .overviewImage.imagePosRight {
        gap: calc(66 / 1199 * 100vw);
        align-items: flex-end;
        right: calc(30 / 1199 * 100vw);
        top: calc(-43 / 1199 * 100vw);
    }

    #overview .overviewImage.imagePosRight > li {
        height: calc(212 / 1199 * 100vw);
    }

    #overview .overviewImage.imagePosRight > li:nth-child(2) {
        height: calc(239 / 1199 * 100vw);
    }

    #overview .overviewImage.imagePosLeft {
        gap: calc(101 / 1199 * 100vw);
        align-items: center;
        left: calc(2 / 1199 * 100vw);
    }

    #overview .overviewImage.imagePosLeft > li {
        height: calc(208 / 1199 * 100vw);
    }

    #overview .overviewImage.imagePosLeft > li:nth-child(2) {
        height: calc(226 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #overview {
        padding-top: calc(68 / 375 * 100vw);
        padding-bottom: calc(88 / 375 * 100vw);
    }

    #overview::after {
        bottom: calc(-45 / 375 * 100vw);
    }

    #overview .overviewInner {
        max-width: none;
    }

    #overview p {
        line-height: calc(26 / 16);
    }
    
    #overview p:last-of-type {
        margin-top: 1em;
        font-size: 2.2rem;
        line-height: calc(32 / 22);
    }

    #overview .overviewImage {
        flex-direction: row;
        justify-content: center;
        position: relative;
    }

    #overview .overviewImage.imagePosRight {
        gap: calc(25 / 375 * 100vw);
        align-items: center;
        right: auto;
        top: 0;
        margin-top: calc(40 / 375 * 100vw);
    }

    #overview .overviewImage.imagePosRight > li {
        height: calc(129 / 375 * 100vw);
    }

    #overview .overviewImage.imagePosRight > li:nth-child(2) {
        height: calc(123 / 375 * 100vw);
    }

    #overview .overviewImage.imagePosLeft {
        gap: calc(21 / 375 * 100vw);
        left: auto;
        top: 0;
        margin-top: calc(24 / 375 * 100vw);
    }

    #overview .overviewImage.imagePosLeft > li {
        height: calc(124 / 375 * 100vw);
    }

    #overview .overviewImage.imagePosLeft > li:nth-child(2) {
        height: calc(131 / 375 * 100vw);
    }
}

#about {
    color: #ffffff;
    background-color: #0375be;
    padding-top: 68px;
    padding-bottom: 195px;
    text-align: center;
}

#about::before {
    background-color: #0375be;
}

#about::after {
    background: url(../images/top/bg_splash02.svg) no-repeat center center;
    background-size: 100% auto;
    content: "";
    width: 100%;
    aspect-ratio: 1200 / 396;
    position: absolute;
    bottom: -115px;
    left: 0;
    z-index: 5;
}

#about .sectionHeading::after {
    background-color: #ffffff;
}

#about .sectionHeading > h2 {
    letter-spacing: 0;
}

#about p {
    font-weight: 600;
}

#about p + p {
    margin-top: 2em;
}

#about .supportItem {
    display: grid;
    grid-template-columns: calc(84px * 1.136) 1fr;
    grid-template-rows: max-content max-content;
    gap: 20px calc(26px * 1.136);
    width: fit-content;
    margin: 40px auto 20px;
    transform: scaleX(0.88);
}

#about .supportItem .supportLogo {
    grid-row: 1 / -1;
    transform: scaleY(0.88);
    transform-origin: left;
}

#about .supportItem .supportText {
    grid-column: 2;
    align-self: flex-end;
    text-align: left;
/*    width: fit-content;*/
    transform: scaleX(1);
}

#about .supportItem .supportButton {
    grid-column: 2;
    align-self: flex-start;
    transform: scaleX(1);
    transform-origin: left;
    margin: 0;
}

#about .linkButton {
    width: fit-content;
    margin: 20px auto 0;
    transform: scaleX(0.88);
    transform-origin: center;
}

#about .linkButton > a {
    color: #ffffff;
    background-color: #55ac6f;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(20px * 1.136);
    width: max-content;
    padding: 14px calc(32px * 1.136);
    border-radius: 30px;
    font-size: 1.4rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    position: relative;
}

#about .linkButton > a:hover {
    text-decoration: none;
}

#about .linkButton > a::after {
    background-color: #ffffff;
	mask-image: url(../images/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
    content: "";
    width: calc(12px * 1.136);
    height: 12px;
    position: relative;
    flex: 0 0 auto;
}

#about #imageSlider {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

#about #imageSlider .swiper-wrapper {
    transition-timing-function: linear;
    align-items: center;
}

#about #imageSlider .slideItem {
    padding-inline: 15px;
}

@media (min-width: 1201px) {
    #about {
        padding-top: calc(68 / 1201 * 100vw);
        padding-bottom: calc(195 / 1201 * 100vw);
    }

    #about::after {
        bottom: calc(-115 / 1201 * 100vw);
    }

    #about #imageSlider .slideItem {
        padding-inline: calc(15 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #about {
        padding-top: calc(68 / 1199 * 100vw);
        padding-bottom: calc(195 / 1199 * 100vw);
    }

    #about::after {
        bottom: calc(-115 / 1199 * 100vw);
    }

    #about .supportItem {
        grid-template-columns: calc((84 / 1199 * 100vw) * 1.136) 1fr;
        gap: 20px calc((26 / 1199 * 100vw) * 1.136);
        margin: calc(40 / 1199 * 100vw) auto calc(20 / 1199 * 100vw);
    }

    #about .linkButton {
        margin: calc(20 / 1199 * 100vw) auto 0;
    }

    #about .linkButton > a {
        gap: calc((20 * 1.136) / 1199 * 100vw);
        padding: calc(16 / 1199 * 100vw) calc((32 * 1.136) / 1199 * 100vw);
        border-radius: calc(30 / 1199 * 100vw);
    }

    #about .linkButton > a::after {
        width: calc((12 * 1.136) / 1199 * 100vw);
        height: calc(12 / 1199 * 100vw);
    }

    #about #imageSlider {
        margin-top: calc(40 / 1199 * 100vw);
    }

    #about #imageSlider .slideItem {
        padding-inline: calc(15 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #about {
        padding-top: calc(42 / 375 * 100vw);
        padding-bottom: calc(80 / 375 * 100vw);
    }

    #about::after {
        bottom: calc(-38 / 375 * 100vw);
    }

    #about .supportItem {
        display: grid;
        grid-template-columns: calc((82 / 375 * 100vw) * 1.136) 1fr;
        grid-template-rows: max-content max-content;
        gap: calc(82 / 375 * 100vw) calc((26 / 375 * 100vw) * 1.136);
        width: fit-content;
        gap: calc(16 / 375 * 100vw);
        margin: calc(40 / 375 * 100vw) auto calc(20 / 375 * 100vw);
        transform: scaleX(0.88);
    }

    #about .supportItem .supportLogo {
        grid-row: 1;
        transform-origin: left bottom;
    }

    #about .supportItem .supportButton {
        grid-column: 1 / -1;
    }

    #about .linkButton {
        margin: calc(20 / 375 * 100vw) auto 0;
    }

    #about .linkButton > a {
        gap: calc((12 * 1.136) / 375 * 100vw);
        padding:  calc(14 / 375 * 100vw) calc((22 * 1.136) / 375 * 100vw);
        border-radius: calc(25 / 375 * 100vw);
        font-size: 1.4rem;
    }

    #about .linkButton > a::after {
        width: calc((12 * 1.136) / 375 * 100vw);
        height: calc(12 / 375 * 100vw);
    }

    #about #imageSlider .slideItem {
        padding-inline: calc(8 / 375 * 100vw);
    }
}

#schedule {
    background-color: #c1e8f8;
    padding-top: 45px;
}

#schedule::before {
    background-color: #c1e8f8;
}

#schedule .sectionHeading > h2 {
    letter-spacing: 0;
}

#schedule .scheduleText {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    width: 113%;
    transform: scaleX(0.88);
    font-size: 2.4rem;
    line-height: calc(34 / 24);
    font-weight: 600;
    text-align: center;
}

@media (min-width: 1201px) {
    #schedule {
        padding-top: calc(45 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #schedule {
        padding-top: calc(45 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #schedule {
        padding-top: calc(30 / 375 * 100vw);
    }

    #schedule .scheduleText {
        flex-direction: column;
        gap: 0;
    }
}

#blog .columnBox {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0 70px;
}

#blog .columnBox .columnBody {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
}

#blog .columnBox .columnBottom {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: flex-end;
}

#blog .columnBox .columnBottom > *:first-child {
    margin-top: 0!important;
}

#blog .columnBox .columnBottom > *:last-child {
    margin-bottom: 0!important;
}

#blog .sectionHeading {
    text-align: left;
    padding-bottom: 0;
}

#blog .sectionHeading::after {
    display: none;
}

#blog .cards {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    position: relative;
}

#blog .cards .card {
    width: calc((100% - 30px * 2) / 3);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#blog .cards .card .cardImage {
    background-color: #ffffff;
    width: 100%;
    aspect-ratio: 220 / 153;
    border-radius: 10px;
    overflow: hidden;
}

#blog .cards .card .cardImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#blog .cards .card .cardTitle {
    font-size: 1.8rem;
    line-height: calc(22 / 18);
}

#blog .cards .card .cardBottom {
    display: flex;
    gap: 30px;
    position: relative;
}

#blog .cards .card .cardBottom > * {
    width: fit-content;
}

#blog .cards .card .cardDate {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
}

#blog .cards .card .cardCategory {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
    position: relative;
}

#blog .cards .card .cardCategory::before {
    background-color: #040000;
    content: "";
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
}

#blog .linkButton {
    max-width: 170px;
    margin-inline: 0;
    transform-origin: left;
}

/*#blog .linkButton > a {
    color: #ffffff;
    background-color: #55ac6f;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(16px * 1.136);
    padding: 14px calc(32px * 1.136);
    border-radius: 24px;
    font-size: 1.4rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    font-style: normal;
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
    position: relative;
}

#blog .linkButton > a:hover {
    text-decoration: none;
}

#blog .linkButton > a::after {
    background-color: #ffffff;
	mask-image: url(../images/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
    content: "";
    width: calc(12px * 1.136);
    aspect-ratio: 1 / 1;
    position: relative;
}
*/
@media (min-width: 768px) and (max-width: 1199px) {
    #blog .columnBox {
        grid-template-columns: calc(190 / 1199 * 100vw) 1fr;
        gap: 0 calc(70 / 1199 * 100vw);
    }

    #blog .cards {
        gap: calc(30 / 1199 * 100vw);
    }
    
    #blog .cards .card {
        width: calc(((100% - (30 / 1199 * 100vw) * 2) / 3) * 1.136);
        gap: calc(18 / 1199 * 100vw);
    }

    #blog .cards .card .cardImage {
        border-radius: calc(10 / 1199 * 100vw);
    }

    #blog .cards .card .cardBottom {
        gap: calc(30 / 1199 * 100vw);
    }

    #blog .cards .card .cardCategory::before {
        width: calc(1 / 1199 * 100vw);
        height: calc(15 / 1199 * 100vw);
        left: calc(-15 / 1199 * 100vw);
    }

    #blog .linkButton {
        max-width: calc(170 / 1199 * 100vw);
    }
/*
    #blog .linkButton > a {
        gap: calc((16 / 1199 * 100vw) * 1.136);
        padding: calc(14 / 1199 * 100vw) calc((32 / 1199 * 100vw) * 1.136);
        border-radius: calc(24 / 1199 * 100vw);
    }

    #blog .linkButton > a::after {
        width: calc((12 / 1199 * 100vw) * 1.136);
    }*/
}

@media (max-width: 767px) {
    #blog .columnBox {
        grid-template-columns: 1fr;
        gap: calc(30 / 375 * 100vw);
    }

    #blog .columnBox .columnBody {
        grid-column: unset;
        grid-row: unset;
    }

    #blog .columnBox .columnBottom {
        grid-column: unset;
        grid-row: unset;
        align-self: flex-end;
    }

    #blog .sectionHeading {
        text-align: center;
        padding-bottom: calc(36 / 375 * 100vw);
        margin-bottom: 0;
    }

    #blog .sectionHeading::after {
        display: block;
    }

    #blog .cards {
        flex-direction: column;
        justify-content: flex-start;
        gap: calc(40 / 375 * 100vw);
    }

    #blog .cards .card {
        width: 100%;
        gap: calc(16 / 375 * 100vw);
    }

    #blog .cards .card .cardImage {
        display: none;
    }

    #blog .cards .card .cardTitle {
        font-size: 1.8rem;
        line-height: calc(22 / 18);
    }

    #blog .cards .card .cardBottom {
        display: flex;
        gap: calc((30 / 375 * 100vw) * 1.136);
        position: relative;
    }

    #blog .cards .card .cardCategory::before {
        width: calc(1 / 375 * 100vw);
        height: calc(15 / 375 * 100vw);
        left: calc(-15 / 375 * 100vw);
    }

    #blog .linkButton {
        max-width: calc(170 / 375 * 100vw);
        margin-inline: auto;
        transform-origin: center;
    }
    
/*    #blog .linkButton > a {
        gap: calc((16 / 375 * 100vw) * 1.136);
        padding: calc(14 / 375 * 100vw) calc((32 / 375 * 100vw) * 1.136);
        border-radius: calc(24 / 375 * 100vw);
    }

    #blog .linkButton > a::after {
        width: calc((12 / 375 * 100vw) * 1.136);
    }*/
}

#picture {
    margin-top: 96px;
}

#picture .columnBox {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0 70px;
}

#picture .columnBox .columnBody {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    position: relative;
}

#picture .columnBox .columnBody::before {
    background: url(../images/top/image_picture.webp) no-repeat center center;
    background-size: 100% auto;
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 732 / 264;
    margin-block: -120px 20px;
    position: relative;
}

#picture .columnBox .columnBottom {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: flex-end;
}

#picture .columnBox .columnBottom > *:first-child {
    margin-top: 0!important;
}

#picture .columnBox .columnBottom > *:last-child {
    margin-bottom: 0!important;
}

#picture .sectionHeading {
    text-align: left;
    padding-bottom: 0;
}

#picture .sectionHeading::after {
    display: none;
}

#picture .leadText {
    width: 100%;
    transform: scaleX(1);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

#picture .cards {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-top: 28px;
    position: relative;
}

#picture .cards .card {
    width: calc((100% - 30px * 2) / 3);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#picture .cards .card .cardImage {
    background-color: #ffffff;
    width: 100%;
    aspect-ratio: 220 / 153;
    border-radius: 10px;
    overflow: hidden;
}

#picture .cards .card .cardImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#picture .cards .card .cardTitle {
    font-size: 1.8rem;
    line-height: calc(22 / 18);
}

#picture .cards .card .cardBottom {
    position: relative;
}

#picture .cards .card .cardDate {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
}

#picture .linkButton {
    max-width: 170px;
    margin-inline: 0;
    transform-origin: left;
}

/*#picture .linkButton > a {
    color: #ffffff;
    background-color: #55ac6f;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(16px * 1.136);
    padding: 14px calc(32px * 1.136);
    border-radius: 24px;
    font-size: 1.4rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    font-style: normal;
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
    position: relative;
}

#picture .linkButton > a:hover {
    text-decoration: none;
}

#picture .linkButton > a::after {
    background-color: #ffffff;
    mask-image: url(../images/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
    content: "";
    width: calc(12px * 1.136);
    aspect-ratio: 1 / 1;
    position: relative;
}*/

@media (min-width: 768px) and (max-width: 1199px) {
    #picture {
        margin-top: calc(96 / 1199 * 100vw);
    }

    #picture .columnBox {
        grid-template-columns: calc(190 / 1199 * 100vw) 1fr;
        gap: 0 calc(70 / 1199 * 100vw);
    }

    #picture .columnBox .columnBody::before {
        margin-block: calc(-120 / 1199 * 100vw) calc(20 / 1199 * 100vw);
    }

    #picture .cards {
        gap: calc(30 / 1199 * 100vw);
        margin-top: calc(28 / 1199 * 100vw);
    }

    #picture .cards .card {
        width: calc((100% - (30 / 1199 * 100vw) * 2) / 3);
        gap: calc(18 / 1199 * 100vw);
    }

    #picture .cards .card .cardImage {
        border-radius: calc(10 / 1199 * 100vw);
    }

    #picture .linkButton {
        max-width: calc(170 / 1199 * 100vw);
    }

/*    #picture .linkButton > a {
        gap: calc((16 / 1199 * 100vw) * 1.136);
        padding: calc(14 / 1199 * 100vw) calc((32 / 1199 * 100vw) * 1.136);
        border-radius: calc(24 / 1199 * 100vw);
    }

    #picture .linkButton > a::after {
        width: calc((12 / 1199 * 100vw) * 1.136);
    }*/
}

@media (max-width: 767px) {
    #picture {
        margin-top: calc(90 / 375 * 100vw);
        padding-top: calc(112 / 375 * 100vw);
    }

    #picture .columnBox {
        grid-template-columns: 1fr;
        gap: calc(35 / 375 * 100vw);
    }

    #picture .columnBox .columnBody {
        grid-column: unset;
        grid-row: unset;
        position: relative;
    }

    #picture .columnBox .columnBody::before {
        background-image: url(../images/top/image_picture_sp.webp);
        width: calc(292 / 375 * 100vw);
        aspect-ratio: 292 / 148;
        margin-block: 0;
        position: absolute;
        top: calc(-410 / 375 * 100vw);
        right: calc(-20 / 375 * 100vw);
    }

    #picture .columnBox .columnBottom {
        grid-column: unset;
        grid-row: unset;
    }

    #picture .sectionHeading {
        text-align: left;
        padding-bottom: 0;
        margin-bottom: calc(18 / 375 * 100vw);
    }

    #picture .cards {
        flex-direction: column;
        justify-content: flex-start;
        gap: calc(30 / 375 * 100vw);
        margin-top: calc(40 / 375 * 100vw);
    }

    #picture .cards .card {
        width: calc(220 / 375 * 100vw);
        gap: calc(14 / 375 * 100vw);
    }

    #picture .cards .card:nth-child(even) {
        align-self: flex-end;
    }

    #picture .cards .card .cardImage {
        border-radius: calc(10 / 375 * 100vw);
    }

    #picture .cards .card .cardBody {
        margin-top: calc(10 / 375 * 100vw);
    }

    #picture .cards .card .cardBottom {
        position: relative;
    }

    #picture .cards .card .cardDate {
        font-size: 1.6rem;
        line-height: calc(22 / 16);
    }

    #picture .linkButton {
        max-width: calc(170 / 375 * 100vw);
        margin-inline: auto;
        transform-origin: center;
    }
    
/*    #picture .linkButton > a {
        gap: calc((16 / 375 * 100vw) * 1.136);
        padding: calc(14 / 375 * 100vw) calc((32 / 375 * 100vw) * 1.136);
        border-radius: calc(24 / 375 * 100vw);
    }

    #picture .linkButton > a::after {
        width: calc((12 / 375 * 100vw) * 1.136);
    }*/
}

#recruit {
    position: relative;
}

#recruit .columnBox {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0 70px;
}

#recruit .columnBox .columnHead {
}

#recruit .columnBox .columnHead::after {
    background: url(../images/top/image_recruit.svg) no-repeat center center;
    background-size: 100% auto;
    content: "";
    position: absolute;
    top: 402px;
    left: 41px;
    width: 286px;
    aspect-ratio: 286 / 248;
}

#recruit .columnBox .columnBody {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
}

#recruit .columnBox .columnBody > *:first-child {
    margin-top: 0!important;
}

#recruit .sectionHeading {
    text-align: left;
    padding-bottom: 0;
}

#recruit .sectionHeading::after {
    display: none;
}

#recruit .sectionHeading > h2 {
    font-size: 5rem;
}

#recruit .leadText {
    width: 100%;
    transform: scaleX(1);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

#recruit dl {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 30px 30px 10px;
    margin-bottom: 28px;
    border-bottom: 3px dotted #000000;
}

#recruit dl:first-of-type {
    margin-top: 36px;
}

#recruit dl > dt {
    width: 120px;
    flex: 0 0 auto;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 600;
}

#recruit dl > dt span {
    transform: scaleX(0.88);
    letter-spacing: 0.05em;
}

#recruit dl > dd {
    flex: 1;
}

#recruit dl > dd > *:first-child {
    margin-top: 0!important;
}

#recruit dl > dd > *:last-child {
    margin-bottom: 0!important;
}

#recruit dl > dd > p + p {
    margin-top: 1em;
}

#recruit .itemTitle {
    display: flex;
    align-items: baseline;
    gap: calc(6px * 1.136);
    width: 113.6%;
    transform: scaleX(0.88);
    transform-origin: left;
    margin-block: 24px 12px;
    position: relative;
}

#recruit .itemTitle::before {
    background-color: #55ac6f;
    content: "";
    width: calc(10px * 1.136);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
}

#recruit .itemTitle.type02::before {
    background-color: #fff06c;
}

#recruit .itemTitle.type03::before {
    order: -1;
}

#recruit .itemTitle.type03::after {
    background-color: #fff06c;
    content: "";
    width: calc(10px * 1.136);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
    order: -1;
}

#recruit .textList > li {
    display: flex;
    align-items: baseline;
    gap: calc(6px * 1.136);
    width: 113.6%;
    transform: scaleX(0.88);
    transform-origin: left;
    position: relative;
}

#recruit .textList > li::before {
    background-color: #55ac6f;
    content: "";
    width: calc(10px * 1.136);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
}

#recruit .notice {
    width: 113.6%;
    transform: scaleX(0.88);
    transform-origin: left;
    padding-left: calc(16px * 1.136);
    margin-top: 12px;
    position: relative;
}

#recruit img {
    width: auto;
    max-width: 100%;
    margin-block: 1em;
}

#recruit table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    transform: scaleX(0.88);
    transform-origin: left;
    width: 113.6%;
    letter-spacing: 0.05em;
}

#recruit table thead th {
    color: #ffffff;
    background-color: #55ac6f;
    padding: 15px 20px;
    text-align: center;
    vertical-align: middle;
    width: 50%;
}

#recruit table tbody th,
#recruit table tbody td {
    background-color: #ffffff;
    padding: 15px 20px;
    vertical-align: middle;
}

#recruit table tbody th {
    text-align: center;
}

#recruit table.table02 thead th {
    color: #000000;
    background-color: #fff06c;
}

#recruit .linkButton {
    margin-block: 14px 28px;
    margin-inline: 0;
    transform-origin: left;
}

@media (min-width: 768px) and (max-width: 1199px) {
    #recruit .columnBox {
        grid-template-columns: calc(240 / 1199 * 100vw) 1fr;
        gap: 0 calc(70 / 1199 * 100vw);
    }

    #recruit .columnBox .columnHead::after {
        top: calc(402 / 1199 * 100vw);
        left: calc(41 / 1199 * 100vw);
        width: calc(286 / 1199 * 100vw);
    }

    #recruit dl {
        gap: calc(10 / 1199 * 100vw);
        padding: 0 calc(30 / 1199 * 100vw) calc(30 / 1199 * 100vw) calc(10 / 1199 * 100vw);
        margin-bottom: calc(28 / 1199 * 100vw);
        border-bottom-width: calc(3 / 1199 * 100vw);
    }

    #recruit dl:first-of-type {
        margin-top: calc(36 / 1199 * 100vw);
    }

    #recruit dl > dt {
        width: calc(120 / 1199 * 100vw);
    }

    #recruit .itemTitle {
        gap: calc((6 * 1.136) / 1199 * 100vw);
        margin-block: calc(24 / 1199 * 100vw) calc(12 / 1199 * 100vw);
    }

    #recruit .itemTitle::before {
        width: calc((10 * 1.136) / 1199 * 100vw);
    }

    #recruit .itemTitle.type03::after {
        width: calc((10 * 1.136) / 1199 * 100vw);
    }

    #recruit .textList > li {
        gap: calc((6 * 1.136) / 1199 * 100vw);
    }

    #recruit .textList > li::before {
        width: calc((10 * 1.136) / 1199 * 100vw);
    }

    #recruit .notice {
        padding-left: calc((16 * 1.136) / 1199 * 100vw);
        margin-top: calc(12 / 1199 * 100vw);
    }

    #recruit table {
        border-spacing: calc(2 / 1199 * 100vw);
    }

    #recruit table thead th {
        padding: calc(15 / 1199 * 100vw) calc(20 / 1199 * 100vw);
    }

    #recruit table tbody th,
    #recruit table tbody td {
        padding: calc(15 / 1199 * 100vw) calc(20 / 1199 * 100vw);
    }

    #recruit .linkButton {
        margin-block: calc(14 / 1199 * 100vw) calc(28 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #recruit .columnBox {
        grid-template-columns: 1fr;
        gap: calc(42 / 375 * 100vw);
    }

    #recruit .columnBox .columnHead::after {
        top: calc(98 / 375 * 100vw);
        left: auto;
        right: calc(10 / 375 * 100vw);
        width: calc(158 / 375 * 100vw);
    }

    #recruit .columnBox .columnBody {
        grid-column: unset;
        grid-row: unset;
    }

    #recruit dl {
        flex-direction: column;
        align-items: stretch;
        gap: calc(12 / 375 * 100vw);
        padding: calc(20 / 375 * 100vw) calc(6 / 375 * 100vw) 0;
        margin-top: calc(16 / 375 * 100vw);
        margin-bottom: 0;
        border-top: calc(3 / 375 * 100vw) dotted #000000;
        border-bottom: none;
    }

    #recruit dl:first-of-type {
        margin-top: 0;
    }

    #recruit dl > dt {
        width: 100%;
    }

    #recruit dl > dt span {
        font-size: 1.4rem;
    }

    #recruit dl > dd {
        font-size: 1.4rem;
    }

    #recruit .itemTitle {
        gap: calc((6 * 1.136) / 375 * 100vw);
        margin-block: calc(28 / 375 * 100vw) calc(14 / 375 * 100vw);
    }

    #recruit .itemTitle::before {
        width: calc((10 * 1.136) / 375 * 100vw);
    }

    #recruit .itemTitle.type03::after {
        width: calc((10 * 1.136) / 375 * 100vw);
    }

    #recruit .textList > li {
        gap: calc((6 * 1.136) / 375 * 100vw);
    }

    #recruit .textList > li::before {
        width: calc((10 * 1.136) / 375 * 100vw);
    }

    #recruit .notice {
        padding-left: calc((16 * 1.136) / 375 * 100vw);
        margin-top: calc(12 / 375 * 100vw);
    }

    #recruit table {
        border-spacing: calc(2 / 375 * 100vw);
    }

    #recruit table thead th {
        padding: calc(10 / 375 * 100vw) calc(10 / 375 * 100vw);
        width: auto;
    }

    #recruit table tbody th {
        padding: calc(8 / 375 * 100vw);
    }

    #recruit table tbody td {
        padding: calc(8 / 375 * 100vw) calc(12 / 375 * 100vw);
    }

    #recruit table tbody th {
        text-align: center;
    }

    #recruit table.table02 tbody th {
        font-weight: 400;
        text-align: left;
        padding: calc(8 / 375 * 100vw) calc(12 / 375 * 100vw);
    }

    #recruit .linkButton {
        margin-block: calc(12 / 375 * 100vw) calc(24 / 375 * 100vw);
        margin-inline: auto;
        transform-origin: center;
    }
}

#member {
    background-color: #cedebd;
}

#member::before {
    background-color: #cedebd;
}

#member .cards {
    display: flex;
    justify-content: flex-start;
    gap: 25px 40px;
    flex-wrap: wrap;
    max-width: 680px;
    margin: 40px auto 70px;
    padding-bottom: 94px;
    position: relative;
}

#member .cards::after {
    background: url(../images/common/bg_wave.svg) no-repeat center center;
    background-size: 100% 100%;
    content: "";
    width: 300px;
    aspect-ratio: 300 / 33;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#member .cards .card {
    width: calc((100% - 40px * 2) / 3);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#member .cards .card .cardImage {
    background-color: #ffffff;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
}

#member .cards .card .cardImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#member .cards .card .cardBody {
    padding-inline: 10px;
}

#member .cards .card .cardCopy {
    font-size: 1.6rem;
}

#member .cards .card .cardRuby {
    font-size: 1.2rem;
}

#member .cards .card .cardName {
    font-size: 2.2rem;
}

@media (min-width: 768px) and (max-width: 1199px) {
    #member .cards {
        gap: calc(25 / 1199 * 100vw) calc(40 / 1199 * 100vw);
        max-width: calc(680 / 1199 * 100vw);
        margin: calc(40 / 1199 * 100vw) auto calc(70 / 1199 * 100vw);
        padding-bottom: calc(94 / 1199 * 100vw);
    }

    #member .cards::after {
        width: calc(300 / 1199 * 100vw);
    }

    #member .cards .card {
        width: calc((100% - (40 / 1199 * 100vw) * 2) / 3);
        gap: calc(24 / 1199 * 100vw);
    }

    #member .cards .card .cardImage {
        border-radius: calc(10 / 1199 * 100vw);
    }

    #member .cards .card .cardBody {
        padding-inline: calc(10 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #member .cards {
        gap: calc(20 / 375 * 100vw) calc(30 / 375 * 100vw);
        max-width: none;
        margin: calc(50 / 375 * 100vw) auto calc(40 / 375 * 100vw);
        padding-inline: calc(12 / 375 * 100vw);
        padding-bottom: calc(60 / 375 * 100vw);
        position: relative;
    }

    #member .cards::after {
        width: calc(150 / 375 * 100vw);
        aspect-ratio: 150 / 20;
        position: absolute;
    }

    #member .cards .card {
        width: calc((100% - 30 / 375 * 100vw) / 2);
        gap: calc(12 / 375 * 100vw);
    }

    #member .cards .card .cardBody {
        padding-inline: calc(10 / 375 * 100vw);
    }

    #member .cards .card .cardCopy {
        font-size: 1.4rem;
    }

    #member .cards .card .cardName {
        font-size: 1.8rem;
    }
}

#activities .activitiesList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: fit-content;
    margin: 50px auto 0;
    transform: scaleX(0.88);
}

#activities .activitiesList > li {
    display: flex;
    align-items: baseline;
    gap: calc(10px * 1.136);
}

#activities .activitiesList > li span {
    width: 113.6%;
    letter-spacing: 0.025em;
}

#activities .activitiesList > li .date {
    width: calc(104px * 1.136);
    padding-right: calc(9px * 1.136);
    position: relative;
    flex: 0 0 auto;
}

#activities .activitiesList > li .date::after {
    background-color: #000000;
    content: "";
    width: calc(9px * 1.136);
    height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

@media (min-width: 768px) and (max-width: 1199px) {
    #activities .activitiesList {
        gap: calc(12 / 1199 * 100vw);
        margin: calc(50 / 1199 * 100vw) auto 0;
    }

    #activities .activitiesList > li {
        gap: calc((10 * 1.136) / 1199 * 100vw);
    }

    #activities .activitiesList > li .date {
        width: calc((104 * 1.136) / 1199 * 100vw);
        padding-right: calc((9 * 1.136) / 1199 * 100vw);
    }

    #activities .activitiesList > li .date::after {
        width: calc((9 * 1.136) / 1199 * 100vw);
        height: calc(1 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #activities .activitiesList {
        gap: calc(16 / 375 * 100vw);
        width: 113.6%;
        margin: calc(40 / 375 * 100vw) auto 0;
        padding-inline: calc((20 * 1.136) / 375 * 100vw) calc((8 * 1.136) / 375 * 100vw);
        transform-origin: left;
    }

    #activities .activitiesList > li {
        gap: calc((10 * 1.136) / 375 * 100vw);
    }

    #activities .activitiesList > li span {
        font-size: 1.4rem;
    }

    #activities .activitiesList > li .date {
        width: calc((90 * 1.136) / 375 * 100vw);
        padding-right: calc((8 * 1.136) / 375 * 100vw);
    }

    #activities .activitiesList > li .date::after {
        width: calc((8 * 1.136) / 375 * 100vw);
        height: calc(1 / 375 * 100vw);
    }
}

#contact {
    max-width: 996px;
    padding-inline: 50px;
    margin-inline: auto;
}

#contact .columnBox {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0 70px;
}

#contact .columnBox .columnBody {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
}

#contact .sectionHeading {
    text-align: left;
    padding-bottom: 0;
}

#contact .sectionHeading::after {
    display: none;
}

#contact p {
    transform: scaleX(0.88);
    transform-origin: left;
    width: 113.6%;
    letter-spacing: 0.025em;
}

#contact .formItem {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 0 10px 18px;
    margin-bottom: 15px;
    border-bottom: 3px dotted #000000;
}

#contact .formItem:first-of-type {
    margin-top: 36px;
}

#contact .formItem > dt {
    width: 160px;
    flex: 0 0 auto;
}

#contact .formItem > dt span {
    transform: scaleX(0.88);
    letter-spacing: 0.025em;
}

#contact .formItem > dt span.iconRequired {
    color: #ffffff;
    background-color: #55ac6f;
    padding: 5px 7px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    transform: scaleX(1);
}

#contact .formItem > dd {
    flex: 1;
}

#contact .formItem input[type="text"],
#contact .formItem input[type="email"],
#contact .formItem textarea {
    width: 100%;
    padding: 7px 15px;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 1.6rem;
}

#contact .formSubmit {
    width: fit-content;
    min-width: 300px;
    margin: 50px auto 0;
    position: relative;
}

#contact .formSubmit input[type="submit"] {
    color: #ffffff;
    background-color: #55ac6f;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 113.6%;
    padding: 14px calc(80px * 1.136);
    border-radius: 30px;
    border: none;
    font-size: 1.8rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2em;
    position: relative;
    transform: scaleX(0.88);
    transform-origin: left;
}

#contact .formSubmit input[type="submit"]:hover {
    opacity: 0.7;
}

#contact .formSubmit::after {
    background-color: #ffffff;
	mask-image: url(../images/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
}

span.wpcf7-spinner {
    display: none;
}

.wpcf7-form.invalid .wpcf7-response-output {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
    #contact {
        max-width: calc(996 / 1199 * 100vw);
        padding-inline: calc(50 / 1199 * 100vw);
    }

    #contact .columnBox {
        grid-template-columns: calc(190 / 1199 * 100vw) 1fr;
        gap: 0 calc(70 / 1199 * 100vw);
    }

    #contact .formItem {
        gap: calc(20 / 1199 * 100vw);
        padding: 0 calc(10 / 1199 * 100vw) calc(18 / 1199 * 100vw);
        margin-bottom: calc(15 / 1199 * 100vw);
        border-bottom-width: calc(3 / 1199 * 100vw);
    }

    #contact .formItem:first-of-type {
        margin-top: calc(36 / 1199 * 100vw);
    }

    #contact .formItem > dt {
        width: calc(160 / 1199 * 100vw);
    }

    #contact .formItem > dt span.iconRequired {
        padding: calc(5 / 1199 * 100vw) calc(7 / 1199 * 100vw);
        border-radius: calc(10 / 1199 * 100vw);
    }

    #contact .formItem input[type="text"],
    #contact .formItem input[type="email"],
    #contact .formItem textarea {
        padding: calc(7 / 1199 * 100vw) calc(15 / 1199 * 100vw);
        border-radius: calc(5 / 1199 * 100vw);
    }

    #contact .formSubmit {
        min-width: calc(300 / 1199 * 100vw);
        margin: calc(50 / 1199 * 100vw) auto 0;
    }

    #contact .formSubmit input[type="submit"] {
        padding: calc(14 / 1199 * 100vw) calc((80 * 1.136) / 1199 * 100vw);
        border-radius: calc(30 / 1199 * 100vw);
    }

    #contact .formSubmit::after {
        width: calc(12 / 1199 * 100vw);
        height: calc(12 / 1199 * 100vw);
        right: calc(62 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
    #contact {
        padding-inline: 0;
        margin-bottom: calc(72 / 375 * 100vw);
    }

    #contact .columnBox {
        grid-template-columns: 1fr;
        gap: calc(36 / 375 * 100vw);
    }

    #contact .columnBox .columnHead > *:first-child {
        margin-top: 0!important;
    }

    #contact .columnBox .columnHead > *:last-child {
        margin-bottom: 0!important;
    }

    #contact .columnBox .columnBody {
        grid-column: unset;
        grid-row: unset;
    }

    #contact .formItem {
        flex-direction: column;
        align-items: stretch;
        gap: calc(6 / 375 * 100vw);
        padding: 0 0 calc(20 / 375 * 100vw) calc(5 / 375 * 100vw);
        margin-bottom: calc(20 / 375 * 100vw);
        border-bottom-width: calc(3 / 375 * 100vw);
    }

    #contact .formItem:first-of-type {
        margin-top: calc(40 / 375 * 100vw);
    }

    #contact .formItem > dt {
        width: 100%;
        flex: 0 0 auto;
    }

    #contact .formItem > dt span.iconRequired {
        padding: calc(5 / 375 * 100vw) calc(7 / 375 * 100vw);
        border-radius: calc(10 / 375 * 100vw);
        font-size: 1rem;
        text-align: center;
    }

    #contact .formItem > dd {
        flex: 1;
    }

    #contact .formItem input[type="text"],
    #contact .formItem input[type="email"],
    #contact .formItem textarea {
        padding: calc(7 / 375 * 100vw) calc(15 / 375 * 100vw);
        border-radius: calc(5 / 375 * 100vw);
    }

    #contact .formSubmit {
        min-width: calc(300 / 375 * 100vw);
        margin: calc(25 / 375 * 100vw) auto 0;
    }
    
    #contact .formSubmit input[type="submit"] {
        padding: calc(20 / 375 * 100vw) calc((80 * 1.136) / 375 * 100vw);
        border-radius: calc(30 / 375 * 100vw);
        font-size: 1.4rem;
        letter-spacing: 0.025em;
    }

    #contact .formSubmit::after {
        width: calc(12 / 375 * 100vw);
        height: calc(12 / 375 * 100vw);
        right: calc(62 / 375 * 100vw);
    }
}