/*
Theme Name:5years-donaition
*/


/*===================================================
lyout
=================================================== */

main {
    padding-top: 76px;
    /* max-width: 1366px; */
    margin: 0 auto;
}

.wrap {
    /* max-width: 1366px; */
    margin: 0 auto;
}

.mv-wrap {
    margin-bottom: 120px;
}

.task-wrap {
    padding: 0 9px;
    margin-bottom: 92px;
}

.need-wrap {
    max-width: 1052px;
    margin: 0 auto 60px;
    padding: 0 9px;
}

.user-voice-wrap {
    max-width: 1052px;
    margin: 0 auto;
    padding: 0 9px;
}

.about-wrap {
    padding-bottom: 8px;
}

.greeting-wrap {
    max-width: 903px;
    margin: 0 auto;
    padding: 40px 9px;
}

.results-wrap {
    max-width: 979px;
    margin: 0 auto 80px;
    padding-top: 60px;
}


/*===================================================
commmon
=================================================== */

.br-sp,
.br-tab {
    display: none;
}


/* ----btn---- */

.btn-mv {
    text-align: center;
    padding: 12px 8px;
    background: rgb(255, 119, 0);
    background: linear-gradient(180deg, rgba(255, 119, 0, 1) 0%, rgba(255, 183, 121, 1) 100%);
    border-radius: 40px;
    width: 420px;
    margin: 0 auto;
    box-shadow: 3px 3px 3px #696969;
}

.btn-mv__link {
    color: #fff;
    font-size: 2.4rem;
}

.btn-mv-textarea {
    text-align: center;
    font-size: 1.2rem;
    margin: 12px 0;
}


/* コンバージョンボタン */

.btn-cv {
    background: rgb(255, 119, 0);
    background: linear-gradient(180deg, rgba(255, 119, 0, 1) 0%, rgba(255, 183, 121, 1) 100%);
    color: #fff;
    border-radius: 4px;
    padding: 8px 0;
    line-height: 1.6;
    box-shadow: 3px 3px 3px #696969;
}

.btn-cv-wrap {
    width: 349px;
    margin: 0 auto;
    text-align: center;
}

.btn-cv-wrap p {
    margin: 12px 0;
    font-size: 1.4rem;
}

.btn-cv h3 {
    font-size: 2.1rem;
}

.btn-cv--bg {
    background: rgb(255, 153, 153);
    background: linear-gradient(0deg, rgba(255, 153, 153, 1) 0%, rgba(255, 70, 76, 1) 100%);
}

.decoration {
    display: block;
    font-size: 1.7rem;
    position: relative;
}

.decoration::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: 5px;
    left: 33%;
    transform: rotate(-20deg);
}

.decoration::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: 5px;
    right: 34.5%;
    transform: rotate(20deg);
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 55px 59.5px 0 59.5px;
    border-color: #50C1E9 transparent transparent transparent;
    margin: 72px auto 54px;
}

.need-bottomtext {
    text-align: center;
    font-size: 2.3rem;
}


/* ----profile-box---- */

.profile-box {
    width: 239px;
    height: 216px;
    background: #50C1E9;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.profile-items {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 52%;
}

.profile-box p {
    color: #fff;
}

.company,
.position {
    font-size: 1.2rem;
}

.position {
    margin: 4px auto -8px;
}

.name {
    font-size: 2.2rem;
}


/* ----headding---- */

.headding {
    text-align: center;
    align-items: center;
}

.headding h2 {
    font-size: 8.2rem;
    color: #09E175;
}

.headding span {
    display: inline-block;
    font-size: 3.2rem;
    margin-right: 20px;
    color: #505050;
}


/*マーカー --------------------------------*/

.js-marker {
    /* display: inline-block; */
    position: relative;
    background-image: linear-gradient(90deg, #ffff66, #ffff66);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 40%;
    transition: all 1s ease-in-out;
    font-weight: 500;
}

.js-marker.inview {
    background-size: 100% 40%;
}


/*===================================================
main
=================================================== */


/* ----header---- */

.headder-wrap {
    position: fixed;
    background: #fff;
    width: 100%;
    border-bottom: solid 1px #dcdcdc;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    justify-content: space-between;
}

.headder-logo__img {
    width: 122px;
}

.menu-btn-wrap {
    display: flex;
    gap: 24px;
}

.menu-btn {
    width: 180px;
    background: rgb(0, 170, 60);
    background: linear-gradient(180deg, rgba(0, 170, 60, 1) 0%, rgba(9, 225, 117, 0.9224732129179797) 100%);
    text-align: center;
    padding: 8px 0;
    border-radius: 20px;
    color: #fff;
    box-shadow: 3px 3px 3px #696969;
    font-size: 1.7rem;
}

.menu-btn--cv {
    background: rgb(255, 119, 0);
    background: linear-gradient(180deg, rgba(255, 119, 0, 1) 0%, rgba(255, 183, 121, 1) 100%);
}


/* ----mv---- */

.mv-wrap {
    position: relative;
}

.mv--tab,
.mv--sp {
    display: none;
}

.mv-sample {
    width: 100%;
    height: 657px;
    background-color: grey;
}

.mv-inner {
    width: 461px;
    padding: 18px 24px;
    position: absolute;
    bottom: 60px;
    left: 60px;
    background: #fff;
    box-shadow: 3px 3px 3px #696969;
}

.mv-inner__img {
    width: 162px;
}

.mv-inner__textarea {
    width: 229px;
    font-size: 1.6rem;
}

.mv-inner__ly {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
    justify-content: center;
}


/* ----task---- */

.task-icon {
    width: 160px;
    margin: 0 auto 40PX;
    display: block;
}

.task-headding {
    font-size: 2.3rem;
    text-align: center;
    width: 876px;
    margin: 0 auto 48px;
    border-bottom: solid 2px #F7F7F7;
    padding-bottom: 24px;
    line-height: 1.7;
}

.task-headding h2 {
    margin-bottom: 48px;
}

.task-headding h3 {
    margin: 0 auto;
}

.task-headding h2 {
    color: 48px;
}

.task-size {
    font-size: 2rem;
}

.task-voice__item {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

.task-voice__item:nth-child(1) {
    margin-bottom: 24px;
}

.task-voice__item:nth-child(2) {
    margin-bottom: 48px;
}

.task-voice__icon {
    width: 76px;
}

.task-voice__text-1 {
    font-size: 1.9rem;
    font-weight: 400;
}

.task-voice__text-2 {
    font-size: 1.2rem;
    text-align: end;
}

.task-textarea {
    max-width: 903px;
    margin: 0 auto;
    padding: 0 9px;
    display: flex;
    justify-content: space-between;
}

.task-textarea__headding {
    border-left: solid 4px #287DBE;
    padding: 4px 0 4px 12px;
    font-size: 2.6rem;
}

.task-text {
    margin-top: 24px;
    font-size: 1.7rem;
}

.task-box {
    width: 185px;
    height: 185px;
    background: #dcdcdc;
}

.graph {
    text-align: end;
}

.graph p {
    font-size: 1.3rem;
}

.graph:nth-child(1) {
    margin: 12px 0;
}


/* ----need---- */

.need-headding {
    background: #287DBE;
    color: #fff;
    padding: 12px 0;
    font-size: 2.1rem;
    text-align: center;
    margin-bottom: 36px;
}

.need-container {
    display: flex;
    gap: 24px;
}

.need-item {
    width: 33%;
    border: solid 1px #dcdcdc;
}

.need-item__headding {
    background: #97D5EC;
    color: #fff;
    padding: 8px 0;
    font-size: 2.1rem;
}

.need-item__headding h3 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.need-item__headding--num {
    font-size: 4rem;
    padding-left: 16px;
}

.need-item__headding--title {
    font-size: 2.2rem;
    font-weight: 200;
    line-height: 1.3;
}

.need-item p {
    font-size: 1.6rem;
    padding: 6px;
}


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

.about-headding {
    background: rgb(16, 63, 158);
    background: linear-gradient(90deg, rgba(16, 63, 158, 1) 0%, rgba(107, 151, 242, 1) 100%);
    color: #fff;
    text-align: center;
    padding: 48px 0;
    font-size: 2.3rem;
    line-height: 1;
}

.about-headding span {
    font-size: 2rem;
}

.abot-toptext {
    text-align: center;
    margin: 80px auto 94px;
    font-size: 2.2rem;
}

.about-container {
    width: 1000px;
    margin: 0 auto;
    background: #F7F7F7;
    position: relative;
}

.about-container-headding {
    background: #287DBE;
    color: #fff;
    text-align: center;
    width: 600px;
    font-size: 2rem;
    padding: 8px 24px;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
}

.about-itemarea {
    padding: 48px 0;
    margin: 88px 0 60px;
}

.about-item {
    max-width: 906px;
    margin: 0 auto;
    padding: 40px 9px;
}

.about-item:nth-child(1) {
    border-bottom: solid 2px #fff;
}

.about-item-headding {
    background: #287DBE;
    color: #fff;
    padding: 4px 12px;
    font-size: 1.8rem;
    width: 380px;
    margin-bottom: 24px;
}

.about-item-textarea {
    font-size: 1.6rem;
}

.about-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-img {
    width: 320px;
    height: 180px;
    background: #fff;
}


/* aboutグラフ */

.about-grapharea {
    margin-bottom: 48px;
}

.about-graph-headding {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 36px;
    position: relative;
}

.about-graph-headding::after {
    content: '';
    width: 110px;
    height: 2.5px;
    display: inline-block;
    background-color: #707070;
    position: absolute;
    bottom: -10px;
    left: calc(50% - 55px)
}

.about-grapharea-inner {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.about-graph-item {
    text-align: center;
}

.about-graph-item p {
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.graph-img {
    width: 364px;
    height: 250px;
    /* background: #dcdcdc; */
}


/* ----user-voice----- */

.user-voice-wrap {
    padding-bottom: 10px;
}


/* ----greeting---- */

.greeting {
    background: #fff;
}

.greeting-headding {
    background: #dcdcdc;
    padding: 4px 12px;
    color: #fff;
    width: 240px;
    font-size: 1.4rem;
    margin: 0 0 12px 12px;
}

.greeting-title {
    font-size: 1.9rem;
    color: #FF7700;
}

.greeting-headding span {
    margin: 0;
}

.greeting-content {
    display: flex;
    align-items: center;
}

.greeting-content--top {
    margin: 34px 0;
    gap: 20px;
    position: relative;
}

.greeting-content--bottom {
    justify-content: space-between;
    margin: 40px 0;
}

.content-imgarea {
    z-index: 1;
}

.content-textarea {
    font-size: 1.6rem;
}

.greeting p {
    line-height: 2;
    letter-spacing: 0;
}

.content-img--1 {
    width: 180px;
    margin-top: 24px;
}

.content-img--2 {
    width: 400px;
}

.content-img--3 {
    width: 380px;
}

.content-img--4 {
    width: 360px;
}


/* ----results---- */

.results-imgarea {
    display: flex;
    gap: 24px;
    margin: 0 0 46px;
}

.results-imgarea--center {
    justify-content: center;
}

.results-img {
    width: calc(25% - 24px);
    border: solid 1px #dcdcdc;
    box-shadow: 3px 3px 3px #696969;
}

.results-textarea {
    text-align: center;
    font-size: 1.7rem;
    margin: 30px 0;
    padding: 0 9px;
}

.media-img {
    box-shadow: 3px 3px 3px #696969;
}

.results-bottom-headding {
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.6;
    margin-bottom: 32px;
}

.results-bottom-item {
    margin-bottom: 100px;
}

.results-bottom-textarea {
    font-size: 1.6rem;
    max-width: 783px;
    margin: 40px auto 40px;
    text-align: center;
}

.results-bottom-img {
    width: 1052px;
    height: 289px;
    background: #dcdcdc;
    margin: 0 auto;
}

.media-item {
    width: calc(25% - 24px);
    text-align: center;
}

.media-item P {
    background: #20a4af;
    color: #FFF;
    font-size: 1.7rem;
    padding: 4px 0;
    margin-bottom: 8px;
    box-shadow: 3px 3px 3px #696969;
}


/* ----milionsLife----- */

.ml-wrap {
    max-width: 754px;
    margin: 0 auto;
}

.ml-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
}

.ml-unit {
    width: calc(50% - 24px);
    border: solid 1px #dcccdc;
    box-shadow: 3px 3px 3px #696969;
}

.unit-headding {
    background: #97D5EC;
    color: #fff;
    font-size: 1.5rem;
    padding: 8px 12px;
}


/* .unit-img {
    height: 181px;
    background: #dcdcdc;
} */

.unit-text-area {
    font-size: 1.4rem;
    padding: 24px;
    background: #fff;
}

.unit-link {
    text-align: end;
}

.unit-link span {
    border-bottom: solid 1px #dcdcdc;
}

.ml-logo {
    margin: 40px auto 24px;
    width: 300px;
}

.ml-bottom-textarea {
    flex-direction: column;
    font-size: 1.7rem;
    padding: 0 20px;
    text-align: center;
    margin: 40px 0;
}


/* ----register---- */

.register-wrap {
    margin-bottom: 120px;
}

.register-img {
    width: 553px;
    display: block;
    margin: 72px auto 24px;
}

.register-textarea {
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 60px;
}

.btn-cv--fs {
    font-size: 1.3rem;
}

.btn--register {
    font-size: 1.3rem;
    display: block;
}

.btn-cv--bg-reg {
    background: rgb(0, 170, 60);
    background: linear-gradient(180deg, rgba(0, 170, 60, 1) 0%, rgba(9, 225, 117, 0.9224732129179797) 100%);
}

.ccc {
    color: #fff;
    background: #FF963B;
    text-align: center;
    padding: 24px 0;
    font-size: 2.2rem;
}


/* ----support---- */

.support-unit {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    margin-top: 80px;
}

.support-unit--reverse {
    flex-direction: row-reverse;
}

.s-unit-textarea {
    width: 475px;
}

.s-unit-headding {
    background-color: #4A9FFF;
    color: #fff;
    font-size: 1.9rem;
    padding: 4px 12px;
    margin-bottom: 40px;
    width: 415px;
}

.s-unit-headding--sp {
    display: none;
}

.s-unit-img {
    width: 470px;
    height: 337px;
    background: #dcdcdc;
}

.s-unit-text {
    font-size: 1.7rem;
}


/* ----please----*/

.please-wrap {
    position: relative;
    margin: 180px 0;
}

.please-imgarea {
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.please-textarea {
    text-align: center;
    font-size: 2rem;
}

.please-textarea p {
    line-height: 2.5;
}


/* ----back---- */

.back-headding {
    text-align: center;
    font-size: 2.3rem;
    line-height: 1.6;
}

.back-imagarea {
    width: 760px;
    margin: 60px auto;
}

.test-img {
    margin-bottom: -3px;
}


/* ----donaition----- */

.donaition {
    background: #F7F7F7;
    padding: 40px 0;
}

.donaition-aside {
    font-size: 1.5rem;
    margin-top: 12px;
}

.donaition__wrap {
    max-width: 1052px;
    margin: 0 auto;
    padding: 0 9px;
}


/*tabの形状*/

.tab {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    justify-content: center;
}

.tab__items {
    background: #fff;
}


/* .tab li a {
    padding: 25px;
} */

.tab li {
    padding: 10px;
    width: 30%;
    background: #E3E3E3;
    text-align: center;
    border-radius: 4px 4px 0 0;
    color: #989898;
}


/*liにactiveクラスがついた時の形状*/

.tab li.active {
    background: #fff;
    color: #505050;
}

.tab li p {
    font-size: 0.5em;
    font-weight: 500;
}

.monthly {
    border-top: solid 4px #f85d62;
}

.konkai {
    border-top: solid 4px #ff9f15;
}

.others {
    border-top: solid 4px #814bb0;
}


/*エリアの表示非表示と形状*/

.area {
    display: none;
    /*はじめは非表示*/
    opacity: 0;
    /*透過0*/
    padding: 50px 20px;
}

.area__wrap {
    text-align: center;
}

.area__wrap h2 {
    font-size: 3rem;
}


/*areaにis-activeというクラスがついた時の形状*/

.area.is-active {
    display: block;
    /*表示*/
    animation-name: displayAnime;
    /*ふわっと表示させるためのアニメーション*/
    animation-duration: .7s;
    animation-fill-mode: forwards;
}

.payment__inner {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.payment {
    max-width: 903px;
    background: #f5f5f5;
    padding: 72px 24px;
    border-radius: 4px;
    margin: 0 auto;
}

.payment__aside {
    font-size: 1.7rem;
    margin-bottom: 24px;
}

.payment__items {
    padding: 24px;
    /* width: calc(50% - 45px); */
    border-radius: 4px;
}

.payment__heading {
    color: #fff;
    font-weight: 500;
    background-color: #20a4af;
    font-size: 2rem;
    width: 276px;
    text-align: center;
}

.payment__content {
    margin: 18px 0;
}

.visa {
    width: 100px;
    vertical-align: super;
}

.master {
    width: 80px;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.others-text {
    width: 90%;
    margin: 0 auto 42px;
    font-size: 1.7rem;
}

.donaition-img-area {
    margin: 40px 0 80px;
}

.donaition-img {
    width: 120px;
    margin-bottom: 24px;
}

.price {
    color: #fffafa;
    width: 276px;
    margin: 0 auto;
    border-radius: 35px;
    line-height: 1.7;
    font-weight: 500;
    font-size: 1.8rem;
}

.monthly-bg {
    background: #f85d62;
}

.monthly-color {
    color: #f85d62;
}

.konkai-bg {
    background: #ff9f15;
}

.konkai-color {
    color: #ff9f15;
}

.izou-bg {
    background: #814bb0;
}

.izou-color {
    color: #814bb0;
}

.houzin {
    margin-top: 60px;
    padding-top: 60px;
    border-top: dashed 1px #dcdcdc;
}

.houzin-color {
    color: #003F71;
}

.houzin-bg {
    background: #003F71;
}


/* ----can---- */

.can {
    background: #fff;
}

.can-wrap {
    max-width: 936px;
    margin: 60px auto 0;
    text-align: initial;
    padding: 24px 9px 36px;
}

.can-headding {
    font-size: 1.7rem;
    font-weight: 400;
    text-align: center;
    margin: 28px 0 48px;
}

.can-headding p {
    position: relative;
}

.can-headding p::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #FF7700;
    position: absolute;
    left: 46%;
    bottom: -12px;
}

.can-container {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.c-unit {
    width: calc(33% - 24px);
}

.c-unit-headding {
    font-size: 1.7rem;
    text-align: center;
}

.c-unit-img {
    width: 100%;
    /* height: 148px;
    background: #dcdcdc; */
    margin: 12px 0 4px;
}

.c-unit-img--margin {
    margin: 24px 0 13px;
}

.c-unit-headding span {
    background: #09E175;
    color: #fff;
    font-size: 2rem;
    padding: 2px 8px;
    margin-right: 12px;
}

.c-unit-textarea {
    font-size: 1.5rem;
    line-height: 1.2;
}


/* ----donor---- */

.donor {
    background: #F7F7F7;
    padding: 110px 0 70px;
}

.donor-wrap {
    max-width: 1052px;
    margin: 60px auto;
    position: relative;
    background: #fff;
    padding: 120px 9px 40px;
    margin: 0 auto;
}

.donor-headding {
    font-size: 1.8rem;
    width: 432px;
    background: #4A9FFF;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    margin: auto;
}

.donor-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px
}

.donor-item--2 {
    margin-top: 60px;
    flex-direction: row-reverse;
}

.donor-img {
    width: 158px;
    padding-top: 34px;
}

.donor-imgarea {
    position: relative;
    width: 338px;
    z-index: 1;
}

.donor-text-area {
    font-size: 1.7rem;
}

.donor-text-headding {
    font-size: 2rem;
    margin-bottom: 24px;
}


/*question
=================================================== */

.question-wrap {
    padding: 0 8px;
    width: 748px;
    margin: 0 auto;
}

.acco-inner {
    display: flex;
    align-items: center;
    padding: 12px;
}

.acco-inner p {
    font-size: 1.7rem;
}

.question {
    background: #F2F2F2;
    padding: 48px 12px 96px;
}

.question-heading h3 {
    border-bottom: solid 1px #dcdcdc;
    display: inline-block;
    margin-bottom: 48px;
    font-size: 2.2rem
}

.question-list {
    font-size: 1.4rem;
    background: #FFFCD7;
    padding: 4px 16px;
    margin-top: 12px;
}


/*アコーディオン全体*/

.accordion-area {
    list-style: none;
    width: 100%;
    margin: 0 auto 60px;
}

.accordion-area li {
    margin: 10px 0;
}


/*アコーディオンタイトル*/

.title {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 1rem;
    padding: 3% 3% 3% 0;
    transition: all .5s ease;
    font-size: 1.7rem;
}


/*　closeというクラスがついたら形状変化　*/

.title.close::before {
    transform: rotate(45deg);
}

.title.close::after {
    transform: rotate(-45deg);
}


/*アコーディオンで現れるエリア*/

.box {
    display: none;
    background: #fffafa;
    border-radius: 4px;
}

.icon {
    vertical-align: middle;
    padding: 8px 12px;
    color: #fffafa;
    border-radius: 4px;
    font-size: 1.4em;
    margin-right: 12px;
    font-weight: 600;
    font-size: 1.9rem;
}

.icon--q {
    background: #8AC9F7;
}

.icon--a {
    background: #EF6480;
}


/* footer ----------------------------------------------*/

footer {
    background: #426075;
}

.footer-wrap {
    text-align: center;
    padding-top: 48px;
}

.footer-logo__img {
    width: 160px;
}

.footer-menu__item {
    margin: 12px 0;
    color: #8AC9F7;
    font-size: 0.8em;
}

.footer__copy {
    font-size: 0.4em;
    color: #fff;
    padding: 12px 0;
}


/*===================================================
responsive
=================================================== */


/* ----タブレット---- */

@media (max-width:1024px) {
    /*common
	=================================================== */
    .br-pc {
        display: none;
    }
    .br-tab {
        display: block
    }
    /*main
	=================================================== */
    /* ----mv---- */
    .mv-wrap {
        margin-bottom: 88px;
    }
    .mv--tab {
        display: block;
    }
    .mv--pc {
        display: none;
    }
    .mv-inner {
        width: 100%;
        padding: 24px 9px;
        position: initial;
    }
    /* ----task---- */
    .task-headding {
        width: 598px;
        font-size: 2.2rem
    }
    .task-size {
        font-size: 1.5rem;
    }
    .task-textarea {
        flex-flow: column;
    }
    .task-textarea__img {
        display: flex;
        justify-content: space-evenly;
        margin: 24px 0 0;
    }
    .graph:nth-child(1),
    .graph:nth-child(2) {
        margin: 0;
    }
    /* ----need---- */
    .need-wrap {
        margin-bottom: 36px;
    }
    .need-item__headding--title {
        font-size: 1.9rem;
    }
    .triangle {
        border-width: 33px 42.5px 0 42.5px;
        margin: 58px auto;
    }
    /* ----about----- */
    .abot-toptext {
        margin-top: 36px;
        font-size: 2.3rem;
    }
    .about-container {
        width: 100%;
    }
    .about-item-inner {
        flex-direction: column;
    }
    .about-container-headding {
        width: 100%;
    }
    .about-item-textarea {
        width: 380px;
    }
    .graph-img {
        width: 330px;
        margin: 0 auto;
    }
    /* ----greeting---- */
    .greeting-content--top {
        flex-flow: column-reverse;
    }
    .content-img--1 {
        width: 212px;
    }
    .profile-box--greeting {
        right: 13%;
    }
    .greeting-content--bottom {
        position: relative;
        margin-bottom: 100px;
    }
    .greeting-content--reverse {
        flex-flow: row-reverse;
        margin-bottom: 40px;
    }
    .content-textarea--1,
    .content-textarea--2,
    .content-textarea--3 {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 9px;
        top: 128px;
    }
    .content-img--2 {
        width: 520px;
    }
    .content-img--3 {
        width: 500px;
    }
    .content-img--4 {
        width: 480px;
    }
    .content-textarea--1,
    .content-textarea--3 {
        right: 0;
        z-index: 2;
    }
    .content-textarea--2 {
        left: 0;
        z-index: 2;
    }
    /* ----results---- */
    .results-imgarea {
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
    }
    .results-img {
        width: calc(50% - 32px);
    }
    .results-textarea {
        margin: 40px 0 60px
    }
    .results-imgarea {
        margin-bottom: 64px;
    }
    .results-bottom-textarea {
        padding: 0 9px;
    }
    .results-bottom-img {
        width: 100%;
    }
    .media-item {
        width: calc(33% - 24px);
    }
    /* ----support---- */
    .support-unit:nth-child(1) {
        margin-top: 40px;
    }
    .support-unit {
        max-width: 900px;
        display: block;
        position: relative;
        padding: 0 18px;
        margin: 160px auto 0;
    }
    .s-unit-headding {
        margin-bottom: 20px;
    }
    .s-unit-textarea {
        position: absolute;
        top: 40%;
        right: 18px;
    }
    .s-unit-text {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 9px;
        border-radius: 4px;
    }
    /* ----please---- */
    .please-wrap {
        margin-top: 220px;
    }
    /* ----donor----- */
    .donor-wrap {
        width: 85%;
    }
    .donor-item {
        flex-direction: column;
    }
    .donor-img {
        width: 182px;
    }
}


/* ----スマホ---- */

@media screen and (max-width:599px) {
    /*lyout
	=================================================== */
    main {
        padding-top: 50px;
    }
    /*commmon
	=================================================== */
    .br-sp {
        display: block;
    }
    .br-tab {
        display: none;
    }
    .br-sp-tab {
        display: none;
    }
    .btn-mv {
        width: 100%;
    }
    .headding {
        line-height: 1;
    }
    .headding span {
        margin: 0;
        line-height: 1.4;
    }
    .btn-cv-wrap--payment {
        width: 100%;
    }
    /*main
	=================================================== */
    /* ----header---- */
    .headder-wrap {
        padding: 4px 8px;
    }
    .headder-logo__img {
        width: 79px;
    }
    .menu-btn-wrap {
        gap: 8px;
    }
    .menu-btn {
        font-size: 1.5em;
        width: 130px;
        padding: 4px 0;
    }
    /* ----mv---- */
    .mv--tab {
        display: none;
    }
    .mv--sp {
        display: block;
    }
    .mv-sample {
        height: 360px;
    }
    /* ----task---- */
    .task-headding {
        width: 310px;
        font-size: 1.3rem;
    }
    .task-size {
        font-size: 1.2rem;
    }
    .task-voice__text-1 {
        font-size: 1.6rem;
    }
    .task-textarea {
        padding: 0;
        font-size: 1.6rem;
    }
    .task-textarea__headding {
        font-size: 2rem;
    }
    .task-box {
        width: 150px;
        height: 150px;
    }
    .graph {
        text-align: center;
    }
    /* ----need---- */
    .need-wrap {
        margin-bottom: 24px;
    }
    .need-headding {
        font-size: 1.4rem;
        margin-bottom: 46px;
    }
    .need-container {
        flex-direction: column;
        gap: 46px;
    }
    .need-item {
        width: 320px;
        margin: 0 auto;
    }
    .need-bottomtext {
        font-size: 1.6rem;
    }
    /* ----about---- */
    .about-headding {
        font-size: 1.7rem;
    }
    .about-headding span {
        font-size: 1.3rem;
    }
    .abot-toptext {
        font-size: 1.4rem;
        margin-top: 24px;
        margin-bottom: 36px;
    }
    .about-item-textarea {
        padding: 0 9px;
        margin-bottom: 12px;
    }
    .about-item-headding {
        text-align: center;
    }
    .about-grapharea-inner {
        flex-direction: column;
    }
    .about-img {
        width: 100%;
    }
    /* ----greeting----- */
    .profile-box--greeting {
        right: 0;
    }
    .content-img--1 {
        width: 166px;
        margin-right: 170px;
    }
    .greeting-headding {
        font-size: 1.5rem;
        padding: 9px;
        text-align: start;
    }
    .greeting-headding span {
        display: block;
        margin-left: 24px;
    }
    .greeting p {
        line-height: 1.7;
    }
    .content-textarea--1,
    .content-textarea--2,
    .content-textarea--3 {
        position: initial;
    }
    .greeting-content--bottom {
        flex-flow: column;
        margin: 20px 0;
    }
    .greeting-content--reverse {
        flex-flow: column-reverse;
    }
    .content-img--2,
    .content-img--3,
    .content-img--4 {
        width: 100%;
    }
    /* ----results---- */
    .results-img {
        width: 300px;
    }
    .results-textarea {
        margin: 30px 0 40px;
    }
    .results-imgarea {
        margin-bottom: 46px;
    }
    .results-bottom-headding {
        font-size: 1.5rem;
    }
    .ml-unit {
        width: 310px;
    }
    .ml-bottom-textarea {
        padding: 0 9px;
    }
    .register-img {
        width: 90%;
    }
    .media-item {
        width: calc(50% - 24px);
    }
    /* ----support----- */
    .s-unit-headding--sp {
        display: block;
    }
    .s-unit-headding--pc {
        display: none;
    }
    .support-unit {
        padding: 0 9px;
        margin: 0 0 76px;
    }
    .support-unit:nth-child(1) {
        margin-top: 60px;
    }
    .s-unit-img,
    .s-unit-textarea,
    .s-unit-headding {
        width: 100%;
    }
    .s-unit-headding {
        text-align: center;
    }
    .s-unit-textarea {
        position: initial;
    }
    .s-unit-text {
        padding: 8px 0;
    }
    /* ----please---- */
    .please-wrap {
        margin: 120px 0;
    }
    .please-textarea {
        font-size: 1.9rem;
        padding: 0 9px;
    }
    .please-textarea p {
        line-height: 2;
    }
    .please-imgarea {
        width: 90%;
    }
    /* ----back---- */
    .back-headding {
        font-size: 1.5rem;
        padding: 0 9px;
    }
    .back-imagarea {
        width: 360px;
    }
    /* ----donaition----- */
    .donaition__wrap {
        padding: 0;
    }
    .area {
        padding: 50px 8px;
    }
    .tab li {
        padding: 4px;
    }
    .payment {
        padding: 72px 8px;
    }
    .payment__inner {
        flex-direction: column;
    }
    .payment__items {
        padding: 0;
        margin: 40px auto 0;
    }
    .can-container {
        flex-direction: column;
    }
    .c-unit {
        width: 100%;
        margin: 12px 0;
    }
    /* ----donor---- */
    .donor-wrap {
        width: 97%;
    }
    .donor-headding {
        width: 300px;
        font-size: 1.5rem;
    }
    .donor-img {
        width: 172px;
    }
    .donor-text-headding {
        font-size: 2.1rem;
    }
    .question-wrap {
        width: 100%;
        padding: 0;
    }
}