@import 'plan.css?20250503';

#about main #reason {
    margin-top:var(--section-space);    
}
#about main #reason > h1 {
    background:var(--color-pink);
    color:var(--color-white);
    font-size:1.8em;
    line-height:1;
    padding:30px 80px;
    border-radius:100px;
    width:fit-content;
    display:flex;
    align-items: center;
    gap:20px;
    margin-inline:auto;
}
#about main #reason > h1::before {
    content:'';
    width:6px;
    height:30px;
    border-left:solid 2px var(--color-white);
    border-right:solid 2px var(--color-white);
    transform: rotate(-15deg);
}
#about main #reason > h1::after {
    content:'';
    width:6px;
    height:30px;
    border-left:solid 2px var(--color-white);
    border-right:solid 2px var(--color-white);
    transform: rotate(15deg);
}

#about main #reason .reason-select {
    margin-top:40px;
}
#about main #reason .reason-select a {
    display:flex;
    flex-direction: column;
    border-radius:var(--radius);
    overflow:hidden;
    color:var(--color-black);
    height:100%;
}
#about main #reason .reason-select a:hover {
    translate:0 -5px;
    opacity:0.8;
}
#about main #reason .reason-select a h2 {
    color:var(--color-white);
    text-align:center;
    padding:0 10px 10px 10px;
    line-height:1;
    font-size:1.4em;
}
#about main #reason .reason-select a h2 strong {
    color:var(--color-white);
    font-size:1.4em;
    top:3px;
}
#about main #reason .reason-select a div {
    margin-top:0;
    padding:var(--padding);
    flex:1;
    display:flex;
    flex-direction: column;
}
#about main #reason .reason-select a div h3 {
    text-align:center;
    flex:1;
    display:flex;
    align-items: center;
    justify-content: center;
}
#about main #reason .reason-select a figure {
    margin-top:0;
}
#about main #reason .reason-select li i {
    position:absolute;
    top:calc(100% - 20px);
    left:50%;
    translate:-50% 0;
    font-size:3em;
    margin:0;
    transition:var(--transition);
}
#about main #reason .reason-select li:hover i {
    translate:-50% -5px;
    opacity:0.8;
}

#about main #reason .reason-select li:nth-of-type(1) a {
    border:solid 2px var(--color-blue);
}
#about main #reason .reason-select li:nth-of-type(1) a h2 {
    background:var(--color-blue);
}
#about main #reason .reason-select li:nth-of-type(1) a div h3 ,
#about main #reason .reason-select li:nth-of-type(1) i {
    color:var(--color-blue);
}

#about main #reason .reason-select li:nth-of-type(2) a {
    border:solid 2px var(--color-enji);
}
#about main #reason .reason-select li:nth-of-type(2) a h2 {
    background:var(--color-enji);
}
#about main #reason .reason-select li:nth-of-type(2) a div h3 ,
#about main #reason .reason-select li:nth-of-type(2) i {
    color:var(--color-pink);
}

#about main #reason .reason-select li:nth-of-type(3) a {
    border:solid 2px var(--color-orange);
}
#about main #reason .reason-select li:nth-of-type(3) a h2 {
    background:var(--color-orange);
}
#about main #reason .reason-select li:nth-of-type(3) a div h3 ,
#about main #reason .reason-select li:nth-of-type(3) i {
    color:var(--color-orange);
}


/* indexと共通 */
#reason > div > article + article {
    padding-top:var(--section-space);
}
#reason article h2:first-of-type + * {
    margin-top:30px;
}
#reason h2 em {
    display:block;
    background:var(--color-pink);
    color:var(--color-white);
    font-style:normal;
    font-size:0.6em;
    line-height:1;
    padding:5px 40px;
    border-radius:100px;
    margin:60px auto 20px auto;
    width:fit-content;
}
#reason .reason-1 h3 {
    display:flex;
}
#reason .reason-1 h3 div {
    background:var(--color-red);
    color:var(--color-white);
    line-height:1;
    padding:10px 60px;
    border-radius:100px;
    width:fit-content;
    display:flex;
    align-items: center;
}
#reason .reason-1 h3 strong {
    color:var(--color-yellow);
    font-size:1.3em;
}
#reason .reason-1 h3::before ,
#reason .reason-1 h3::after {
    content:'';
    flex:1;
    height:30px;
    border-top:solid 1px var(--color-gray);
    translate:0 calc(50% + 10px);
}
#reason .reason-1 h3::before {
    border-left:solid 1px var(--color-gray);
}
#reason .reason-1 h3::after {
    border-right:solid 1px var(--color-gray);
}
#reason .reason-1 ol {
    gap:80px;
    margin-top:30px;
}
#reason .reason-1 ol li {
    font-size:1.2em;
}
#reason .reason-1 ol li figure {
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius:var(--radius);
    margin-bottom:20px;
    overflow:visible;
}
#reason .reason-1 ol li figure img {
    object-fit: contain;
    width:auto;
    height:60%;
}
#reason .reason-1 ol li:nth-of-type(1) figure {
    background:var(--color-blue);
}
#reason .reason-1 ol li:nth-of-type(2) figure {
    background:var(--color-purple);
}
#reason .reason-1 ol li:nth-of-type(3) figure {
    background:var(--color-green);
}
#reason .reason-1 ol li:not(:last-of-type) figure::after {
    content:'';
    width:60px;
    height:100%;
    position:absolute;
    left:calc(100% + 10px);
    top:0;
    background:url(../_img/about/arrow_1.svg) center / contain no-repeat;
}
#reason .reason-1 picture {
    display:block;
    margin-top:60px;
}

#reason :is(.reason-2, .reason-3) h3 {
    color:var(--color-pink);
}
#reason :is(.reason-2, .reason-3) figure + div h3 + p {
    margin-top:40px;
}
#reason :is(.reason-2, .reason-3) .grid h3 {
    font-size:1.6em;
}
#reason :is(.reason-2, .reason-3) .grid figure + h3 {
    margin-top:20px;
}
#reason :is(.reason-2, .reason-3) .grid figure + h3 + p {
    margin-top:10px;
}

.plan-list-mini {
    margin-top:40px;
}


/* about専用で上書き */
#about main #reason > div > article h2 {
    text-align:left;
}
#about main #reason > div > article h2 em {
    margin-left:0;
    margin-top:0;
    font-size:0.8em;
    padding:10px 90px;
}

#about main #reason .reason-1 {
    margin-top:var(--section-space);
}
#about main #reason .reason-1 h2 ,
#about main #reason .reason-1 h3 ,
#about main #reason .reason-1 h2 strong {
    color:var(--color-blue);
}
#about main #reason .reason-1 h2 em {
    background:var(--color-blue);
}

#about main #reason .reason-2 h2 ,
#about main #reason .reason-2 h3 ,
#about main #reason .reason-2 h2 strong {
    color:var(--color-enji);
}
#about main #reason .reason-2 h2 em {
    background:var(--color-enji);
}

#about main #reason .reason-3 h2 ,
#about main #reason .reason-3 h3 ,
#about main #reason .reason-3 h2 strong {
    color:var(--color-orange);
}
#about main #reason .reason-3 h2 em {
    background:var(--color-orange);
}

#about main #reason .reason-3 #villa {
    border:solid 2px var(--color-orange);
    padding:calc(var(--padding) * 2);
    border-radius:var(--radius);
    margin-top:40px;
}
#about main #reason .reason-3 #villa > div {
    display: flex;
    flex-direction: column;
}
#about main #reason .reason-3 #villa h3 + p {
    flex:1;
}
#about main #reason .reason-3 #villa .buttons {
    justify-content: flex-start;
    margin-top:10px;
}
#about main #reason .reason-3 #villa .button {
    width:100%;
}

@media (min-width : 521px) {
    #about main #reason .reason-1 ol {
        gap:30px;
    }
    #about main #reason .reason-1 ol li {
        display:flex;
        align-items: center;
        gap:10px;
        font-size:1em;
    }
    #about main #reason .reason-1 ol li figure {
        margin-bottom:0;
        flex:2;
        border-radius:var(--radius-inner);
    }
    #about main #reason .reason-1 ol li figure img {
        height:70%;
    }
    #about main #reason .reason-1 ol li span {
        flex:3;
    }
    #about main #reason .reason-1 ol li:not(:last-of-type)::after {
        content:'';
        width:10px;
        height:100%;
        position:absolute;
        left:calc(100% + 10px);
        top:0;
        background:url(../_img/about/arrow_2.svg) center / contain no-repeat;
    }
    #about main #reason .reason-1 ol li:not(:last-of-type) figure::after {
        display:none;
    }
}

@media (max-width : 820px) {
    #about main #reason .reason-3 #villa {
        padding:var(--padding);
        flex-direction:column;
		width:100%;
    }
}
@media (max-width : 720px) {
    #about main #reason > h1 {
        padding:20px 40px;
        line-height:1.2;
    }
}
@media (max-width : 520px) {
    #reason h2 em {
        font-size:0.8em;
        padding:10px 40px;
    }
    #reason .reason-1 h3 div {
        padding:10px 20px;
        font-size:0.9em;
        flex-direction: column;
    }
    #reason .reason-1 h3::before ,
    #reason .reason-1 h3::after {
        translate:0 calc(50% + 20px);
    }
    #reason .reason-1 ol {
        gap:30px;
    }
    #reason .reason-1 ol li:not(:last-of-type) figure::after {
        left:calc(100% + 5px);
        width:20px;
    }
    #reason .reason-1 ol li {
        font-size:0.9em;
        line-height:1.2;
    }
    #reason .reason-1 ol li figure {
        margin-bottom:10px;
    }
    #reason .reason-1 ol li figure img {
        height:80%;
    }
    #reason .reason-2 .grid article {
        padding-bottom:20px;
    }

    #about main #reason > h1 {
        font-size:1.6em;
        padding:20px 20px;
    }
}