/*====================================================
////id |  mv
====================================================*/
#mv {
    position: relative;
}
#mv::after {
    background: url('../img/top/mv-deco.svg') repeat-x center bottom;
    background-size: auto 100%;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        bottom: 0;
        left: 0;
    width: 100%;
    height: min(15vw, 170px);
}
.mv-inner {
    display: grid;
        grid-gap: min(3vw, 20px) min(3vw, 50px);
        place-items: center;
    padding: min(10vw, 100px) 0 min(12vw, 170px);
}
.mv-area {
    background: var(--grd);
    border-radius: .3em .3em 0 .4em;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    padding: .2em .8em .25em .6em;
}
.mv-area-inner {
    display: flex;
        gap: .2em;
}
.mv-area-text {
    display: grid;
    font-size: .55em;
}
.mv-area-text .text-area {
    font-size: .67em;
}
.mv-head {
    line-height: 1.2;
    margin: .2em 0 .2em;
    text-shadow: 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff;
}
.mv-feature-wrapper {
    display: flex;
        gap: 10px;
    font-size: min(3.5vw, 6rem);
    font-weight: 900;
    line-height: 1.05;
}
.mv-feature {
    background: #fff;
    border: solid 2px #C6A82C;
    border-radius: 100%;
    display: flex;
        align-items: center;
        justify-content: center;
    padding: .2em .5em .6em;
    position: relative;
    text-align: center;
    width: 4.5em;
    height: 4.5em;
}
.mv-feature::before {
    background: url('../img/top/mv-feature-deco.svg') no-repeat center bottom / contain;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 2%;
        left: 0;
        right: 0;
        bottom: 0;
    width: 94%;
    height: 94%;
}
.mv-feature > div {
    display: grid;
}
.mv-feature .sub {
    font-size: .45em;
    margin-bottom: .2em;
}
.mv-feature:nth-child(2) .main {
    line-height: .9;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    #mv::after {
        height: 28vw;
    }
    .mv-inner {
        padding: 6vw 0 ;
    }
    .mv-area {
        font-size: min(9vw, 6rem);
    }
    .mv-head {
        font-size: min(11vw, 8rem)
    }
    .mv-feature-wrapper {
        font-size: min(5.8vw, 4.3rem);
    }
    .mv-img {
        width: min(60%, 400px);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .mv-inner {
        align-items: center;
        grid-template-columns: auto min(35vw, 700px);
        justify-content: center;
        max-width: none;
    }
    .mv-area {
        font-size: min(5vw, 8rem);
    }
    .mv-head {
        font-size: min(6.5vw, 11rem)
    }
    .mv-feature-wrapper {
        font-size: min(3.5vw, 6rem);
    }
}

@media (hover: hover) {}

/*====================================================
////id |  introduction
====================================================*/
.introduction-inner {
	padding: min(12vw, 120px) 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .introduction-text {
        font-size: min(4.5vw, 2.2rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .introduction-text {
        font-size: min(2.6vw, 2.6rem);
    }
}
@media screen and (min-width:769px) and (max-width:960px) {
    .introduction-text {
        font-size: min(3.6vw, 2.6rem);
    }
}


@media (hover: hover) {}

/*====================================================
////id |  about
====================================================*/
.about-head-deco {
    position: absolute;
        top: -3em;
        left: -2em;
}
.about-head {
    text-shadow: .05em .05em 0 rgba(0, 0, 0, .5);
}
.about-head .no {
    display: inline-block;
    font-size: 2em;
    line-height: 1;
    margin-top: -.2em;
}
.about-text {
    padding: min(6vw, 60px) 0;
}
.about-text .no {
    font-size: 1.5em;
    line-height: 1;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    #about {
        padding-top: min(10vw, 50px);
    }
    .about-head-wrapper {
        padding: min(5vw, 25px) 5vw;
    }
    .about-head {
        font-size: min(8vw, 4rem);
    }
    .about-text {
        font-size: min(4.2vw, 1.8rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .about-head-wrapper {
        padding: min(5vw, 40px) 5vw;
    }
    .about-head-deco {
        top: -2.5em;
        left: 0;
    }
    .about-head {
        font-size: min(5vw, 5.2rem);
    }
    .about-text {
        font-size: min(2.6vw, 2rem);
    }
}
@media print, screen and (min-width: 1200px) {
    #about {
        padding-top: 0;
    }
    .about-head-deco {
        top: -1.6em;
        left: -100px;
    }
}

@media (hover: hover) {}

/*====================================================
////id |  comparison
====================================================*/
.comparison {
    padding: min(5vw, 30px) min(3vw, 45px);
}
.comparison-wrapper {
    display: grid;
        grid-gap: min(7.5vw, 30px) min(1.5vw, 10px);
}
.comparison-item {
    background: #fff;
    border: solid 1px;
}
.comparison-item dt {
    display: flex;
        align-items: center;
        justify-content: center;
    min-height: 65px;
}
.comparison-item dd {
    padding: 0 min(3.5vw, 20px);
}
.comparison-item dd ul {
    border-bottom: solid 1px var(--gray);
    display: flex;
        align-items: center;
        justify-content: space-between;
    min-height: 65px;
}
.comparison-item dd ul:last-child {
    border-bottom: none;
}
.comparison-item dd ul .no {
    display: inline-block;
    font-size: 1.75em;
    line-height: 1;
    margin-top: -.4em;
}
.comparison-item dd ul:first-child .no {
    font-size: 1.4em;
}

.comparison-other {
    overflow-x: scroll;
    padding-bottom: 5px;
}
.comparison-other-inner {
    display: flex;
        gap: min(1.5vw, 10px);
    padding-right: 1px;
}
.comparison-item-other {
    border-color: var(--gray);
    flex: 1;
}
.comparison-item-other dt {
    background: var(--gray);
    font-size: min(5vw, 2.2rem);
}
.comparison-item-other dd .title {
    font-size: min(3.6vw, 1.6rem);
}
.comparison-item-other dd .data {
    font-size: min(3.8vw, 1.7rem);
}

.comparison-item-rinpha {
    border-color: var(--black);
}
.comparison-item-rinpha dt {
    background: var(--black);
    font-size: min(5vw, 2.7rem);
}
.comparison-item-rinpha dd .title {
    font-size: min(4vw, 2rem);
}
.comparison-item-rinpha dd .data {
    font-size: min(4.4vw, 2.1rem);
}
.comparison-item-rinpha dd ul .no {
    vertical-align: -.05em;
}
.comparison-item-rinpha dd ul:nth-child(n + 2) .data {
    color: var(--red);
}

.comparison-arrow {
    color: #fff;
    display: flex;
        align-items: center;
        justify-content: center;
    font-size: min(5vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: .2em;
    position: relative;
    text-shadow: 0 0 2px var(--blue),  0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue), 0 0 2px var(--blue);
    height: 1.8em;
}
.comparison-arrow::before {
    background: linear-gradient(to bottom, #DBEEF8, #83BEE0);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
    width: min(100%, 7.5em);
    height: 100%;
    z-index: -1;
}
.comparison-other_data {
    display: grid;
        align-items: flex-start;
        grid-gap: min(7vw, 30px) min(4vw, 45px);
}
.comparison-rinpha-phase {
    display: grid;
        grid-gap: min(1.5vw, 10px);
    margin-bottom: 50px;
}
.comparison-rinpha-phase .data-balloonBox {
    margin: auto;
    position: absolute;
        top: calc(100% + .3em);
        left: 0;
        right: 0;
}
.comparison-rinpha-phase .data-balloon {
    background: #fff;
    border: solid var(--d_gray);
    border-width: 1px 3px 3px 1px;
    border-radius: .5em;
    line-height: 1.4;
    padding: .5em 1em;
    position: relative;
    white-space: nowrap;
}
.comparison-rinpha-phase .data-balloon::before,
.comparison-rinpha-phase .data-balloon::after {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        right: 30%;
    width: .6em;
    height: 1em;
}
.comparison-rinpha-phase .data-balloon::before {
    background: var(--d_gray);
    bottom: 100%;
    z-index: -1;
}
.comparison-rinpha-phase .data-balloon::after {
    background: #fff;
    bottom: calc(100% - 2px);
}
.comparison-rinpha-phase .data-balloon .no {
    font-size: 1.4em;
}
.comparison-rinpha-phase .data-balloon .attention {
    font-size: min(2.5vw, 1rem);
    font-weight: 400;
    margin: auto;
    position: absolute;
        top: calc(100% + .3em);
        right: 0;
}
.structure-item-wrapper {
    display: grid;
        grid-gap: min(1.5vw, 10px);
    padding-bottom: min(6vw, 30px);
    position: relative;
}
.structure-item-wrapper::after {
    background: url('../img/illust/illust-2.webp') no-repeat top right / contain;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: calc(100% - 60px);
        right: -15px;
    width: 45%;
    height: min(20vw, 150px);
}
.structure-item {
    background: #F9FDFF;
    border: solid 2px #83BEE0;
    border-radius: min(3vw, 20px);
    padding: min(4vw, 25px) min(4vw, 20px);
}
.structure-item dl {
    display: flex;
        align-items: center;
        flex-direction: column;
    width: 100%;
}
.structure-item dt {
    border-bottom: solid 1px;
    margin-bottom: .8em;
}
.structure-item dd {
    font-size: min(3.6vw, 1.6rem);
    text-align: center;
}
.structure-item dd p {
    line-height: 1.6;
}
.structure-item dd .big {
    display: inline-block;
    line-height: 1;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .comparison-other-inner {
        width: 700px;
    }
    .comparison-item dt,
    .comparison-item dd ul {
        min-height: 50px;
    }
    .comparison-arrow {
        margin-top: 15px;
    }
    .comparison-item-rinpha {
        margin: auto;
        width: min(100%, 500px);
    }
    .structure-item-wrapper {
        padding-bottom: min(8vw, 40px);
    }
    .structure-item-wrapper::after {
        height: min(20vw, 100px);
        right: calc((min(3vw, 45px) + 4vw) * -1);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .comparison-text {
        font-size: 1.8rem;
    }
    .comparison-wrapper {
        grid-template-columns: auto 1fr;
    }
    .comparison-other {
        order: 2;
    }
    .comparison-other-inner {
        width: min(80vw, 800px);
    }
    .comparison-rinpha,
    .comparison-arrow ,
    .comparison-item-rinpha {
        width: min(33vw, 340px);
    }
    .comparison-other_data {
        grid-template-columns: auto 1fr;
    }
    .comparison-rinpha-phase .data-balloon {
        font-size: 1.4rem;
    }
}

@media screen and (min-width:769px) and (max-width:960px) {
    .comparison-other-inner {
        width: 700px;
    }
    .comparison-rinpha,
    .comparison-arrow ,
    .comparison-item-rinpha {
        width: 300px;
    }
    .comparison-other_data {
        grid-template-columns: 1fr;
    }
    .comparison-rinpha-phase {
        grid-template-columns: 300px 300px;
    }

}

@media print, screen and (min-width: 1330px) {
    .comparison-other {
        overflow-x: visible;
    }
    .comparison-other-inner {
        width: 100%;
    }
    .comparison-rinpha-phase .data-balloonBox {
        display: flex;
            align-items: center;
        top: 0;
        left: calc(100% + min(2vw, 20px) + .5em);
        right: auto;
        bottom: 0;
    }
    .comparison-rinpha-phase .data-balloon {
        font-size: 1.8rem;
    }
    .comparison-rinpha-phase .data-balloon::before,
    .comparison-rinpha-phase .data-balloon::after {
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        top: 0;
        bottom: 0;
        width: 1em;
        height: .6em;
    }
    .comparison-rinpha-phase .data-balloon::before {
        right: 100%;
    }
    .comparison-rinpha-phase .data-balloon::after {
        right: calc(100% - 2px);
    }

    .structure-item-wrapper {
        grid-template-columns: 1fr 1fr;
    }

}

@media (hover: hover) {}

/*====================================================
////id |  feature
====================================================*/
.feature-item-wrapper {
    display: grid;
        grid-gap: min(2vw, 15px) min(3vw, 40px);
}
.feature-item {
    background: #fff;
    border: solid 2px var(--green);
}
.feature-item .icon {
    border-radius: 100%;
    margin: calc(min(10vw, 50px) * -1) auto 0;
    padding: 5px;
    position: relative;
    width: min(20vw, 100px);
    height: min(20vw, 100px);
}
.feature-item .icon::before {
    background: #fff;
    border-radius: 100%;
    border: solid 2px var(--green);
    box-sizing: border-box;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
}
.feature-item .icon::after {
    background: #fff;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 50%;
        left: -2px;
    width: calc(100% + 4px);
    height: 52%;
}
.feature-item .icon > div {
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.feature-item dl {
    padding: 0 min(3vw, 50px) min(5vw, 40px);
}
.feature-item dt {
    display: flex;
        align-items: center;
        justify-content: center;
    margin-bottom: .3em;
    min-height: 3em;
    text-align: center;
    position: relative;
}
.feature-item dt::after {
    border-bottom: solid 2px var(--green);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    width: 2em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .feature-item {
        margin-top: min(10vw, 50px);
    }
    .feature-item dt {
        font-size: min(5vw, 3rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .feature-item-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    .feature-item dt {
        font-size: min(3vw, 3.6rem);
    }
    .feature-item.show:nth-child(2) {
        animation-delay: .3s;
    }
}

@media (hover: hover) {}

/*====================================================
////id |  rule
====================================================*/
.rule-head-wrapper {
    background: #36513B;
}
.rule-head-deco {
    position: absolute;
        top: -2em;
        left: -2em;
}
.rule-sub_head {
    font-size: min(3.5vw, 3.2rem);
}
.rule-head {
    text-shadow: .05em .05em 0 rgba(0, 0, 0, .5);
}
.rule-item-wrapper {
    display: grid;
        grid-gap: min(5vw, 20px);
        place-items: center;
}
.rule-item {
    display: flex;
        align-items: center;
        flex-direction: column;
}
.rule-item dt {
    border-bottom: solid 1px;
    line-height: 1.3;
    margin-bottom: .5em;
}
.rule-item dt .no {
    font-size: 1.5em;
    line-height: 1;
}
.rule-text {
    background: var(--w_green);
    border: solid 2px var(--green);
    border-radius: min(5vw, 20px);
    display: inline-block;
    margin-top: min(7vw, 50px);
    padding: 1em;
    width: min(100%, 670px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .rule-head-wrapper {
        padding: min(5vw, 25px) 5vw;
    }
    .rule-head {
        font-size: min(6vw, 4rem);
    }
    .rule-item dt {
        font-size: min(4vw, 2rem);
    }
    .rule-item dd {
        font-size: min(4.6vw, 2.4rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .rule-head-wrapper {
        padding: min(3vw, 30px) 5vw;
    }
    .rule-head {
        font-size: min(5vw, 5.2rem);
    }
    .rule-item dt {
        font-size: 2.0rem;
    }
    .rule-item dd {
        font-size: 2.4rem;
    }
}
@media print, screen and (min-width: 1200px) {
    .rule-head-deco {
        top: -1.6em;
        left: -100px;
    }
}


@media (hover: hover) {}

/*====================================================
////id |  flow
====================================================*/
.flow-head {
    text-shadow: .05em .05em 0 rgba(0, 0, 0, .5);
}
.flow-head-wrapper {
    padding: min(3vw, 30px) 5vw;
}
.flow-head {
    font-size: min(5vw, 5.2rem);
}
.flow-item {
    border-bottom: solid 1px var(--d_gray);
    display: grid;
        grid-template-columns: min(18vw, 140px) 1fr;    
    line-height: 1.6;
    overflow: hidden;
}
.flow-item:last-child {
    border-bottom: none;
}
.flow-item-no {
    color: #fff;
    display: flex;
        align-items: center;
        justify-content: center;
    position: relative;
    text-shadow: .05em .05em 0 rgba(0, 0, 0, .5);
}
.flow-item-no::before {
    content: '';
    display: block;
    opacity: .4;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
}
.flow-item-no::after {
    background: #fff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 0;
        right: -1px;
        bottom: 0;
    width: min(2vw, 18px);
    height: min(4vw, 36px);
}
.flow-item-no span {
    position: relative;
}
.flow-item-text {
    padding: min(4vw, 25px) 0 min(4vw, 25px) min(5vw, 45px);
}
.flow-item dt {
    font-size: min(5vw, 3rem);
}

.flow-item:nth-child(1) .flow-item-no::before { background: #4EACF3;}
.flow-item:nth-child(1) dt { color: #4EACF3;}
.flow-item:nth-child(2) .flow-item-no::before { background: #55B8D6;}
.flow-item:nth-child(2) dt { color: #55B8D6;}
.flow-item:nth-child(3) .flow-item-no::before { background: #5BC3B8;}
.flow-item:nth-child(3) dt { color: #5BC3B8;}
.flow-item:nth-child(4) .flow-item-no::before { background: #61CE9A;}
.flow-item:nth-child(4) dt { color: #61CE9A;}
.flow-item:nth-child(5) .flow-item-no::before { background: #68DA7D;}
.flow-item:nth-child(5) dt { color: #68DA7D;}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .flow-head {
        font-size: min(8vw, 4rem);
    }
    .flow-item-no {
        font-size: min(9.2vw, 4rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .flow-head-wrapper {
        padding: min(3vw, 40px) 5vw;
    }
    .flow-head {
        font-size: min(5vw, 5.2rem);
    }
    .flow-item-no {
        font-size: 6rem;
    }
}

@media (hover: hover) {}