/*--------------------*/
/* base
/*--------------------*/

li {
    list-style-type: none;
}

img {
    width: 100%;
}

a {
    text-decoration: none;
    color: #000;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
        sans-serif;
    background-color: #fef7f8;
}

/* 基本設定
/*--------------------*/

html {
    font-size: 62.5%;
}

.sp {
    display: none;
}

@media screen and (max-width: 550px) {
    .sp {
        display: block;
    }
}

/* fv
/*--------------------*/

.fv {
    position: relative;
}

.fv__wrap {
    position: absolute;
    top: 17rem;
    right: 6.2vw;
}

@media screen and (max-width: 1024px) {
    .fv__wrap {
        top: 10rem;
    }
}

@media screen and (max-width: 550px) {
    .fv__wrap {
        top: 4rem;
    }
}

@media screen and (max-width: 375px) {
    .fv__wrap {
        top: 8rem;
    }
}

@media screen and (max-width: 550px) {
    .fv__img img {
        height: 30rem;
        object-fit: cover;
        object-position: 60%;
    }
}

.fv__text span {
    font-size: 1.9vw;
    color: #fff;
    background-color: #d70d19;
    letter-spacing: 0.1em;
    font-family: "Noto Sans JP", sans-serif;
    padding: 0.5rem 2rem;
}

@media screen and (max-width: 550px) {
    .fv__text span {
        font-size: 3vw;
        padding: 0.5rem 1.5rem;
    }
}

.fv__title {
    font-size: 3.3vw;
    color: #d70d19;
    position: relative;
    -webkit-text-stroke: 8px #fff;
    font-family: "Zen Maru Gothic", serif;
    font-weight: bolder;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-top: 4rem;
}

@media screen and (max-width: 768px) {
    .fv__title {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 550px) {
    .fv__title {
        font-size: 4.5vw;
    }
}

.fv__title::before {
    white-space: pre;
    content: "遺贈寄付を通じて\Aあなたの想いを\A未来に残すお手伝いを\A介助犬と共に。";
    -webkit-text-stroke: 0;
    position: absolute;
}

.btn {
    background-color: #fff;
    border-radius: 5rem;
    max-width: 28.8vw;
    width: 100%;
    padding: 1.5rem 0;
    font-size: 2.5vw;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    margin-top: 4rem;
}

@media screen and (max-width: 768px) {
    .btn {
        margin-top: 1.5rem;
    }
}

@media screen and (max-width: 550px) {
    .btn {
        padding: 1rem 0;
        font-size: 3.5vw;
        padding: 1rem 0;
        max-width: 35vw;
        width: 100%;
    }
}

.btn a {
    color: #d70d19;
}

/* concept
/*--------------------*/

.concept__inner {
    display: flex;
    max-width: 79.8vw;
    width: 100%;
    margin: 0 auto;
}

.concept__img {
    max-width: 25.6vw;
    width: 100%;
    z-index: 1;
    margin-top: -4rem;
}

@media screen and (max-width: 550px) {
    .concept__img {
        max-width: 24vw;
        margin-top: -3rem;
    }
}

.concept__text {
    margin: 6rem 0 0 4.1vw;
    font-size: 2.2vw;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.4375;
    font-weight: bold;
    color: #605253;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 550px) {
    .concept__text {
        margin: 2rem 0 0 4.1vw;
    }
}

/* case
/*--------------------*/

.case {
    background-image: url("../img/case-bg.png");
    background-size: cover;
    padding: 4rem 2.7vw;
    text-align: center;
    margin-top: 8rem;
}

@media screen and (max-width: 768px) {
    .case {
        padding: 4rem 2.6vw;
    }
}

@media screen and (max-width: 550px) {
    .case {
        padding: 2rem 2.6vw;
        margin-top: 2rem;
    }
}

.case__text {
    color: #d70d19;
    font-size: 2.2vw;

    font-family: "Zen Maru Gothic", serif;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 551px) {
    .case__text {
        /*iOS safariバグ対策の為、PC表示のみ白フチに*/
        -webkit-text-stroke: 7px #fff;
    }
    .case__text::before {
        white-space: pre;
        content: "みなさまの大切な資産の活用方法の1つとして、\A遺贈寄付（相続・生前寄付も含む）という選択肢があることをご存知ですか？";
        -webkit-text-stroke: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }    
}
@media screen and (max-width: 550px) {
    .case__text {
        font-size: 4vw;
    }
    .case__text::before {
        /*
        white-space: pre;
        content: "みなさまの大切な資産の活用方法の1つとして、\A遺贈寄付（相続・生前寄付も含む）\Aという選択肢があることをご存知ですか？";
        */
    }    
}

.case__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 86.8vw;
    width: 100%;
    margin: 4rem auto 0;
    background: #fff;
    border: 5px solid #c00;
    padding: 4rem 0;
}

@media screen and (max-width: 768px) {
    .case__list {
        max-width: inherit;
    }
}

@media screen and (max-width: 550px) {
    .case__list {
        display: block;
        justify-content: center;
        padding: 0 2vw;
        max-width: 35rem;
        width: 100%;
        margin-top: 2rem;
    }
}

.case__item {
    max-width: 28vw;
    width: 100%;
    padding: 0 2vw;
}

@media screen and (max-width: 768px) {
    .case__item {
        max-width: 31vw;
        width: 100%;
        padding: 0 2vw;
    }
}

@media screen and (max-width: 550px) {
    .case__item {
        max-width: inherit;
        padding: 2rem 2.5vw;
    }
}

.case__item:not(:first-child) {
    border-left: 3px solid #d70d19;
}

@media screen and (max-width: 550px) {
    .case__item:not(:first-child) {
        border-left: none;
        border-top: 3px solid #d70d19;
        padding-top: 2rem;
    }
}

.case__label {
    font-weight: bold;
    color: #b5b5b6;
    font-size: 1.6vw;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
}

@media screen and (max-width: 550px) {
    .case__label {
        font-size: 1.8rem;
    }
}

.case__title {
    margin-top: 2rem;
}

.case__title span {
    font-size: 1.9vw;
    color: #fff;
    background-color: #d70d19;
    padding: 0.5rem 4vw;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 550px) {
    .case__title span {
        font-size: 2rem;
        padding: 0.3rem 6vw;
    }
}

.case__icon {
    max-width: 9.1vw;
    width: 100%;
    margin: 2.5rem auto 0;
}

@media screen and (max-width: 550px) {
    .case__icon {
        max-width: 9rem;
        width: 100%;
        margin: 2rem auto 0;
    }
}

.icon2 {
    max-width: 8.3vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .icon2 {
        max-width: 8rem;
    }
}

.icon3 {
    max-width: 7.5vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .icon3 {
        max-width: 8rem;
    }
}

.case__sub--title {
    color: #d70d19;
    font-size: 1.6vw;
    margin-top: 2.5rem;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 900;
}

@media screen and (max-width: 550px) {
    .case__sub--title {
        font-size: 1.8rem;
        margin-top: 1.5rem;
    }
}

.case__description {
    font-size: 1.38vw;
    line-height: 1.5;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 900;
    margin-top: 1.5rem;
    text-align: left;
}

@media screen and (max-width: 550px) {
    .case__description {
        font-size: 1.5rem;
    }
}

/* bequest
/*--------------------*/

.bequest {
    max-width: 92.8vw;
    width: 100%;
    margin: 12rem auto 0;
    padding: 0 2.7vw;
    position: relative;
}

@media screen and (max-width: 768px) {
    .bequest {
        max-width: inherit;
        margin: 6rem auto 0;
        padding: 0 2.6vw;
    }
}

@media screen and (max-width: 550px) {
    .bequest {
        max-width: 35rem;
        width: 100%;
        margin: 4rem auto 0;
    }
}

.bequest::after {
    content: "";
    background: url(../img/bequest-img.png) no-repeat;
    max-width: 20vw;
    width: 100%;
    background-size: cover;
    height: 25vh;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 3vw;
}

@media screen and (max-width: 768px) {
    .bequest::after {
        background-size: contain;
        top: 0;
        right: 3vw;
    }
}

@media screen and (max-width: 550px) {
    .bequest::after {
        background-size: contain;
        top: 10%;
        right:3vw;
        height: 15vh;
        max-width: 10rem;
    }
}

.bequest__title {
    max-width: 58vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .bequest__title {
        max-width: 35rem;
        width: 100%;
    }
}

.bequest__sub {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 900;
    margin-top: 1.5rem;
    font-size: 2.7vw;
    color: #d70d19;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 550px) {
    .bequest__sub {
        margin-top: 8rem;
        font-size: 2rem;
    }
}

.bequest__text {
    font-size: 1.6vw;
    letter-spacing: 0.05em;
    color: #1e1e1e;
    line-height: 1.45;
    margin-top: 2rem;
    font-weight: bold;
    font-family: "Zen Maru Gothic", serif;
}

@media screen and (max-width: 550px) {
    .bequest__text {
        font-size: 1.5rem;
        margin-top: 1.5rem;
    }
}

/* donation
/*--------------------*/

.donation {
    margin-top: 12rem;
    padding: 12rem 2.7vw 12rem;
    background-color: #fef3f4;
}

@media screen and (max-width: 768px) {
    .donation {
        margin-top: 6rem;
        padding: 6rem 2.6vw 6rem;
    }
}

@media screen and (max-width: 550px) {
    .donation {
        margin-top: 4rem;
        padding: 4rem 2.6vw 4rem;
    }
}

.donation__inner {
    max-width: 86.8vw;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .donation__inner {
        max-width: inherit;
    }
}

@media screen and (max-width: 550px) {
    .donation__inner {
        max-width: 35rem;
        width: 100%;
    }
}

.donation__title {
    max-width: 59vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .donation__title {
        max-width: 35rem;
        width: 100%;
    }
}

.donation__text {
    font-size: 1.9vw;
    letter-spacing: 0.05em;
    color: #1e1e1e;
    font-weight: bold;
    font-family: "Zen Maru Gothic", serif;
    line-height: 1.3;
}

@media screen and (max-width: 550px) {
    .donation__text {
        font-size: 1.5rem;
    }
}

.donation__text span {
    font-size: 1.38vw;
}

@media screen and (max-width: 550px) {
    .donation__text span {
        font-size: 1.4rem;
    }
}

.donation__wrap {
    margin-top: 6rem;
    background-color: #fff;
    padding: 6rem 3vw;
}

@media screen and (max-width: 768px) {
    .donation__wrap {
        margin-top: 4rem;
        padding: 3rem 4vw;
    }
}

@media screen and (max-width: 550px) {
    .donation__wrap {
        margin-top: 3rem;
        padding: 2rem 1rem;
    }
}

.donation__sub {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-size: 2.7vw;
    color: #d70d19;
    letter-spacing: 0.05em;
    text-align: center;
}

@media screen and (max-width: 550px) {
    .donation__sub {
        font-size: 2rem;
    }
}

.donation__list {
    display: flex;
    margin-top: 6rem;
}

@media screen and (max-width: 768px) {
    .donation__list {
        margin-top: 4rem;
    }
}

@media screen and (max-width: 550px) {
    .donation__list {
        display: block;
        margin-top: 3rem;
    }
}

.donation__item {
    font-size: 1.8vw;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    color: #565656;
    letter-spacing: 0.05em;
    margin-top: 2rem;
}

@media screen and (max-width: 550px) {
    .donation__item {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }
}

@media screen and (max-width: 428px) {
    .donation__item {
        font-size: 1.2rem;
    }
}

.donation__item--text:not(:first-child) {
    margin-top: 3.5rem;
}

@media screen and (max-width: 768px) {
    .donation__item--text:not(:first-child) {
        margin-top: 2rem;
    }
}

.donation__item--text {
    display: flex;
    align-items: center;
}

.donation__item--text span {
    font-size: 3vw;
    color: #d70d19;
}

@media screen and (max-width: 550px) {
    .donation__item--text span {
        font-size: 2rem;
    }
}

.donation__mail {
    font-size: 1.9vw;
    letter-spacing: 0.05em;
    color: #1e1e1e;
    margin-top: 6rem;
    font-weight: bold;
    font-family: "Zen Maru Gothic", serif;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .donation__mail {
        margin-top: 4rem;
    }
}

@media screen and (max-width: 550px) {
    .donation__mail {
        margin-top: 2rem;
        font-size: 1.4rem;
        line-height: 1.5;
    }
}

.donation__name {
    font-size: 1.9vw;
    letter-spacing: 0.05em;
    color: #1e1e1e;
    margin-top: 2rem;
    font-weight: bold;
    font-family: "Zen Maru Gothic", serif;
    line-height: 2;
    display: flex;
    justify-content: right;
}

@media screen and (max-width: 550px) {
    .donation__name {
        margin-top: 1rem;
        font-size: 1.2rem;
        line-height: 1.5;
    }
}

/* kaijoken
/*--------------------*/

.kaijoken__img {
    max-width: 93vw;
    width: 100%;
}

.kaijoken__wrap {
    max-width: 92.8vw;
    width: 100%;
    margin: 10rem auto 0;
    padding: 0 2.7vw;
}

@media screen and (max-width: 768px) {
    .kaijoken__wrap {
        max-width: inherit;
        margin: 6rem auto 0;
        padding: 0 2.6vw;
    }
}

@media screen and (max-width: 550px) {
    .kaijoken__wrap {
        max-width: 35rem;
        width: 100%;
        margin: 4rem auto 0;
        padding: 0 2.6vw;
    }
}

.kaijoken__title {
    max-width: 55vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .kaijoken__title {
        max-width: 35rem;
        width: 100%;
    }
}

.kaijoken__sub {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-size: 2.2vw;
    color: #d70d19;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-top: 4rem;
}

@media screen and (max-width: 550px) {
    .kaijoken__sub {
        font-size: 1.8rem;
        margin-top: 2rem;
    }
}

.kaijoken__text {
    font-size: 1.6vw;
    letter-spacing: 0.15em;
    color: #565656;
    line-height: 1.45;
    margin-top: 2rem;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 550px) {
    .kaijoken__text {
        font-size: 1.6rem;
        line-height: 1.3;
        margin-top: 2rem;
    }
}

.kaijoken__sub--text {
    font-size: 1.38vw;
    letter-spacing: 0.15em;
    color: #565656;
    line-height: 1.45;
    margin-top: 2rem;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 550px) {
    .kaijoken__sub--text {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }
}

.kaijoken__main {
    margin-top: 4rem;
}

@media screen and (max-width: 550px) {
    .kaijoken__main {
        margin-top: 2rem;
    }
}

/* about
/*--------------------*/

.about {
    max-width: 92.8vw;
    width: 100%;
    margin: 12rem auto 10rem;
    padding: 0 2.7vw;
}

@media screen and (max-width: 768px) {
    .about {
        max-width: inherit;
        margin: 8rem auto 0;
        padding: 0 2.6vw 4rem;
    }
}

@media screen and (max-width: 550px) {
    .about {
        max-width: 35rem;
        width: 100%;
        margin: 6rem auto 0;
    }
}

.about__box {
    display: flex;
}

@media screen and (max-width: 550px) {
    .about__box {
        display: block;
    }
}

.about__text {
    font-size: 1.6vw;
    letter-spacing: 0.15em;
    color: #565656;
    line-height: 1.45;
    margin-top: 4rem;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 550px) {
    .about__text {
        font-size: 1.5rem;
        line-height: 1.4;
        margin-top: 2rem;
    }
}

.about__img {
    max-width: 22.9vw;
    width: 100%;
    margin: 10rem 0 0 auto;
}

@media screen and (max-width: 550px) {
    .about__img {
        max-width: 15rem;
        width: 100%;
        margin: 2rem 0 0 auto;
    }
}

.about__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2vw;
    margin-top: 4rem;
    grid-template-rows: auto;
}

@media screen and (max-width: 550px) {
    .about__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem 0;
        margin-top: 4rem;
        position: relative;
        z-index: 1;
    }
}

.about__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

@media screen and (max-width: 550px) {
    .about__item {
        grid-template-rows: inherit;
        grid-row: inherit;
    }
}

.about__item--wrap {
    max-width: 28vw;
    width: 100%;
    background: #fff;
    border: 3px solid #d70d19;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    .about__item--wrap {
        max-width: inherit;
    }
}

.subtitle {
    background-color: #d70d19;
    color: #fff;
    font-weight: bold;
    font-size: 1.9vw;
    padding: 1rem 0;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 550px) {
    .subtitle {
        font-size: 2rem;
    }
}

.about__item--title {
    max-width: 14vw;
    width: 100%;
    margin: 0 auto -1rem;
}

@media screen and (max-width: 768px) {
    .about__item--title {
        max-width: 20vw;
        margin: 0 auto -1rem;
    }
}

@media screen and (max-width: 550px) {
    .about__item--title {
        max-width: 15rem;
        margin: 0 auto -1rem;
        z-index: -1;
    }
}

.title2 {
    max-width: 10vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .title2 {
        max-width: 16vw;
    }
}

@media screen and (max-width: 550px) {
    .title2 {
        max-width: 11rem;
    }
}

.title3 {
    max-width: 13vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .title3 {
        max-width: 19vw;
    }
}

@media screen and (max-width: 550px) {
    .title3 {
        max-width: 14rem;
    }
}

.about__item--img {
    width: 100%;
    height: auto;
}

.about__item--main {
    font-size: 1.25vw;
    color: #e60012;
    font-weight: bold;
    margin-top: 2rem;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 550px) {
    .about__item--main {
        font-size: 1.4rem;
        margin-top: 1rem;
    }
}

.about__item--text {
    font-size: 0.9vw;
    line-height: 1.6;
    text-align: left;
    margin-top: 1.5rem;
    padding: 0 1.5rem 2rem;
}

@media screen and (max-width: 550px) {
    .about__item--text {
        font-size: 1.2rem;
        line-height: 1.5;
        margin-top: 1rem;
    }
}

/* activity
/*--------------------*/

.activity {
    background-color: #fff;
}

.activity__inner {
    max-width: 92.8vw;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 2.7vw;
}

@media screen and (max-width: 768px) {
    .activity__inner {
        max-width: inherit;
        padding: 4rem 2.6vw;
    }
}

@media screen and (max-width: 550px) {
    .activity__inner {
        max-width: 35rem;
        width: 100%;
    }
}

.activity__box {
    display: flex;
}

@media screen and (max-width: 550px) {
    .activity__box {
        display: block;
    }
}

.activity__title {
    margin-top: 4rem;
}

@media screen and (max-width: 550px) {
    .activity__title {
        margin-top: 0;
    }
}

.activity__illast {
    margin-left: 2.7vw;
}

@media screen and (max-width: 550px) {
    .activity__illast {
        margin-left: auto;
        max-width: 15rem;
        width: 100%;
    }
}

.activity__list {
    margin-top: 4rem;
}

@media screen and (max-width: 768px) {
    .activity__list {
        margin-top: 2rem;
    }
}

.activity__item {
    display: flex;
    align-items: center;
    gap: 2vw;
}

@media screen and (max-width: 550px) {
    .activity__item {
        display: block;
        gap: 0;
    }

    .a__item {
        display: flex;
        flex-direction: column-reverse;
    }
}

.activity__item:not(:first-child) {
    margin-top: 6rem;
}

@media screen and (max-width: 768px) {
    .activity__item:not(:first-child) {
        margin-top: 4rem;
    }
}

.activity__img {
    max-width: 39.5vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .activity__img {
        max-width: inherit;
    }
}

.activity__area {
    max-width: 45vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .activity__area {
        max-width: inherit;
        margin-top: 1.5rem;
    }
}

.activity__item--title {
    font-size: 2.7vw;
    color: #e60012;
    font-weight: bold;
    letter-spacing: 0.15em;
}

@media screen and (max-width: 550px) {
    .activity__item--title {
        font-size: 2rem;
        text-align: center;
    }
}

.activity__item--text {
    font-size: 1.2vw;
    letter-spacing: 0.15em;
    color: #565656;
    line-height: 1.5;
    margin-top: 2rem;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 550px) {
    .activity__item--text {
        font-size: 1.3rem;
        margin-top: 1rem;
        line-height: 1.4;
        letter-spacing: 0.1em;
    }
}

/* summary
/*--------------------*/

.summary {
    max-width: 92.8vw;
    width: 100%;
    margin: 8rem auto 0;
    padding: 0 2.7vw;
}

@media screen and (max-width: 768px) {
    .summary {
        max-width: inherit;
        margin: 6rem auto 0;
        padding: 0 2.6vw;
    }
}

@media screen and (max-width: 550px) {
    .summary {
        max-width: 35rem;
        width: 100%;
    }
}

.summary__wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

@media screen and (max-width: 550px) {
    .summary__wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 4rem 0;
    }
}

.summary__box {
    max-width: 41.6vw;
    width: 100%;
    background-color: #fff;
    border: 5px solid #e60012;
}

@media screen and (max-width: 768px) {
    .summary__box {
        max-width: inherit;
    }
}

.flow__title {
    font-size: 2.7vw;
    color: #fff;
    background-color: #e60012;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    padding: 2.2rem 0;
    text-align: center;
    letter-spacing: 0.15em;
}

@media screen and (max-width: 550px) {
    .flow__title {
        font-size: 2.4rem;
        padding: 1.8rem 0;
    }
}

.flow__text {
    padding: 2rem 2vw 0;
    font-size: 1.38vw;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.4;
}

@media screen and (max-width: 550px) {
    .flow__text {
        font-size: 1.4rem;
    }
}

.flow__list {
    padding: 2rem 2vw 0;
}

.flow__item {
    background-color: #fff9de;
    padding: 1rem 1.38vw;
    display: flex;
    align-items: center;
}

.flow__item:not(:first-child) {
    margin-top: 6.5rem;
    position: relative;
}

@media screen and (max-width: 768px) {
    .flow__item:not(:first-child) {
        margin-top: 4rem;
    }
}

.flow__item:nth-child(1n + 3)::after {
    content: "";
    background: url(../img/arrow.png) no-repeat;
    background-size: contain;
    max-width: 3.3vw;
    width: 100%;
    height: 2.5vh;
    display: inline-block;
    position: absolute;
    top: -80%;
    left: 50%;
    transform: translate(-50%);
}

@media screen and (max-width: 768px) {
    .flow__item:nth-child(1n + 3)::after {
        top: -60%;
    }
}

@media screen and (max-width: 550px) {
    .flow__item:nth-child(1n + 3)::after {
        max-width: 2rem;
    }
}

.item1 {
    position: relative;
}

.item1::after {
    content: "";
    background: url(../img/arrow.png) no-repeat;
    background-size: contain;
    max-width: 3.3vw;
    width: 100%;
    height: 2.5vh;
    display: inline-block;
    position: absolute;
    bottom: -70%;
    left: 50%;
    transform: translate(-50%);
}

@media screen and (max-width: 768px) {
    .item1::after {
        bottom: -80%;
    }
}

@media screen and (max-width: 550px) {
    .item1::after {
        max-width: 2rem;
    }
}

.flow__detail {
    font-size: 1.5vw;
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.4;
}

@media screen and (max-width: 550px) {
    .flow__detail {
        font-size: 1.4rem;
    }
}

.logo {
    font-size: 2.5vw;
    color: #e60012;
    font-weight: bold;
    font-family: inter;
    margin-right: 1vw;
}

@media screen and (max-width: 550px) {
    .logo {
        font-size: 1.8rem;
    }
}

.small {
    font-size: 1.1vw;
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 550px) {
    .small {
        font-size: 1rem;
    }
}

.flow__sub--text {
    padding: 4rem 2vw 4rem;
    font-size: 1.25vw;
    line-height: 1.66;
    color: #565656;
    font-weight: bold;
}

@media screen and (max-width: 550px) {
    .flow__sub--text {
        padding: 2rem 2vw 2rem;
        font-size: 1.2rem;
    }
}

.qa__title {
    font-size: 2.7vw;
    color: #fff;
    background-color: #e60012;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    padding: 2.2rem 0;
    text-align: center;
    letter-spacing: 0.15em;
}

@media screen and (max-width: 550px) {
    .qa__title {
        font-size: 2.4rem;
        padding: 1.8rem 0;
    }
}

.qa__list {
    padding: 3rem 2vw;
}

@media screen and (max-width: 768px) {
    .qa__list {
        padding: 2rem 2vw;
    }
}

.qa__item:not(:first-child) {
    margin-top: 3rem;
}

@media screen and (max-width: 768px) {
    .qa__item:not(:first-child) {
        margin-top: 2rem;
    }
}

.qa__item:first-child {
    border-bottom: 3px solid #d70d19;
    padding-bottom: 3rem;
}

@media screen and (max-width: 768px) {
    .qa__item:first-child {
        padding-bottom: 2rem;
    }
}

.q__box {
    display: flex;
}

.q__logo {
    background-color: #d70d19;
    color: #fff;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.2vw;
    max-width: 5rem;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 5rem;
    padding: 0.5rem 0 1rem;
}

@media screen and (max-width: 768px) {
    .q__logo {
        font-size: 1.8vw;
        max-width: 4rem;
        height: 4rem;
    }
}

@media screen and (max-width: 550px) {
    .q__logo {
        font-size: 1.8rem;
    }
}

.q__text {
    font-size: 1.38vw;
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    margin-left: 1.7vw;
}

@media screen and (max-width: 550px) {
    .q__text {
        font-size: 1.4rem;
        margin-left: 1.7vw;
    }
}

.a__box {
    margin-top: 4rem;
    display: flex;
}

@media screen and (max-width: 768px) {
    .a__box {
        margin-top: 2rem;
    }
}

.a__logo {
    background-color: #fcc80e;
    color: #fff;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.2vw;
    max-width: 5rem;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 5rem;
    padding: 0.5rem 0 1rem;
}

@media screen and (max-width: 768px) {
    .a__logo {
        font-size: 1.8vw;
        max-width: 4rem;
        height: 4rem;
    }
}

@media screen and (max-width: 550px) {
    .a__logo {
        font-size: 1.8rem;
    }
}

.a__text {
    font-size: 1.38vw;
    color: #565656;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    margin-left: 1.7vw;
}

@media screen and (max-width: 550px) {
    .a__text {
        font-size: 1.4rem;
    }
}

.qa__illast {
    padding: 4rem 2.4vw 4rem;
}

@media screen and (max-width: 768px) {
    .qa__illast {
        padding: 2rem 2vw 2rem;
    }
}

@media screen and (max-width: 550px) {
    .qa__illast {
        max-width: 20rem;
        width: 100%;
        margin: 0 auto;
    }
}

/* contact
/*--------------------*/

.contact {
    max-width: 92.8vw;
    width: 100%;
    margin: 8rem auto 0;
    padding: 0 2.7vw;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .contact {
        max-width: inherit;
        margin: 6rem auto 0;
        padding: 0 2.6vw;
    }
}

@media screen and (max-width: 550px) {
    .contact {
        max-width: 35rem;
        width: 100%;
    }
}

.contact__title {
    background-color: #d60000;
    color: #fff;
    font-size: 3.3vw;
    font-weight: bold;
    padding: 1.7rem 0;
    letter-spacing: 0.15em;
}

@media screen and (max-width: 550px) {
    .contact__title {
        font-size: 2.2rem;
        padding: 1.7rem 0;
    }
}

.contact__box {
    padding: 3rem 0;
    display: flex;
    gap: 2vw;
}

@media screen and (max-width: 550px) {
    .contact__box {
        padding: 2rem 0;
        gap: 2rem 0;
        display: block;
    }
}

.contact__info {
    max-width: 40vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .contact__info {
        max-width: inherit;
    }
}

@media screen and (max-width: 550px) {
    .contact__info {
        padding-bottom: 2rem;
    }
}

.info__text {
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    font-size: 2.2vw;
}

@media screen and (max-width: 550px) {
    .info__text {
        font-size: 1.6rem;
    }
}

.info__title {
    font-size: 4.1vw;
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    margin-top: 3rem;
}

@media screen and (max-width: 768px) {
    .info__title {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 550px) {
    .info__title {
        font-size: 3.2rem;
        margin-top: 1.5rem;
    }
}

.donate__button {
    background-color: #d60000;
    color: #fff;
    font-size: 2.7vw;
    padding: 1.7rem 0;
    margin-top: 3rem;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.15em;
    max-width: 40vw;
    width: 100%;
    display: inline-block;
}
.donate__button_y {
    background-color: #fcc80e;
    color: #d60000;
    font-size: 2.7vw;
    padding: 1.7rem 0;
    margin-top: 3rem;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.15em;
    max-width: 40vw;
    width: 100%;
    display: inline-block;
}
@media screen and (max-width: 768px) {
    .donate__button,
    .donate__button_y{
        margin-top: 2rem;
    }
}

@media screen and (max-width: 550px) {
    .donate__button,
    .donate__button{
        font-size: 2.2rem;
        margin-top: 2rem;
        max-width: 35rem;
        padding: 1.4rem 0;
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 550px) {
    .contact__btn {
        display: none;
    }
}

.contact__btn2 {
    display: none;
}

@media screen and (max-width: 550px) {
    .contact__btn2 {
        display: block;
    }
}

.donate__button span,
.donate__button_y span{
    font-size: 3.5vw;
    margin-left: 2vw;
}

.contact__phone {
    padding-left: 2vw;
    border-left: 3px solid #d70d19;
    max-width: 45vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .contact__phone {
        max-width: inherit;
    }
}

@media screen and (max-width: 550px) {
    .contact__phone {
        border-left: none;
        padding-top: 2rem;
        border-top: 3px solid #d70d19;
        padding-left: 0;
    }
}

.phone__address {
    color: #565656;
    font-size: 1.9vw;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    text-align: left;
    line-height: 1.4;
}

@media screen and (max-width: 550px) {
    .phone__address {
        font-size: 1.6rem;
    }
}

.phone__box {
    display: flex;
    margin-top: 2.5rem;
}

@media screen and (max-width: 550px) {
    .phone__box {
        margin-top: 2rem;
    }
}

.phone__text {
    font-size: 1.6vw;
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    margin-top: 2rem;
    text-align: left;
}

@media screen and (max-width: 550px) {
    .phone__text {
        font-size: 1.6rem;
        margin-top: 2rem;
    }
}

.phone__icon {
    margin-right: 1rem;
    max-width: 3vw;
    width: 100%;
}

@media screen and (max-width: 550px) {
    .phone__icon {
        max-width: 5vw;
        width: 100%;
    }
}

.phone__number,
.phone__number a{
    font-size: 2.5vw;
    color: #d70d19;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    .phone__number {
        font-size: 2.3vw;
    }
}

@media screen and (max-width: 550px) {
    .phone__number {
        font-size: 1.8rem;
    }
}

.phone__sub--text {
    font-size: 1.38vw;
    color: #605253;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    text-align: left;
    margin-top: 1rem;
}

@media screen and (max-width: 550px) {
    .phone__sub--text {
        font-size: 1.4rem;
    }
}

.phone__img {
   /* margin: -7rem 0 0 1.6vw;*/
    margin: 0rem 0 0 1.6vw;
    max-width: 17vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .phone__img {
        /*margin: -5rem 0 0 1.6vw;*/
        margin: 0rem 0 0 1.6vw;
        max-width: 17vw;
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .phone__img {
        /*margin: -2rem 0 0 auto;*/
        margin: 0rem 0 0 auto;
        max-width: 13rem;
        width: 100%;
    }
}