@charset "UTF-8";
/* CSS Document */
:root {
    /*第２階層用*/
    --color-Orange: #f29600;
    --color-DkOrange: #de8a00;
}
form{
    width: 100%;
}
#PageContents{
    z-index: 0;
    font-size: 16px;
    line-height: 125%;
}
#PageContents .WhBGLeft, #PageContents .WhBGRight{
    z-index: 0;
    margin-bottom: 5rem;
}
.LineWork{
    z-index: -10;
}
.WhBGLeft, .WhBGRight{
    margin-top: 3rem;
}
#PageContents h1{
    width: calc( 100vw * ( 1200 / 1440));
    max-width: 1200px;
    margin: 0 auto 2rem;
    font-size: 37px;
    line-height: 125%;
}
#PageContents h1 span{
    border-bottom: solid 2px var(--color-Brown);
}
#PageContents h2{
    margin: 3rem auto 2rem;
    border: none;
    font-size: 28px;
    line-height: 125%;
}
#PageContents h3{
    margin: 2rem auto;
    font-size: 20px;
    line-height: 125%;
}
.BtnArea {
    display: flex;
    justify-content: center;
    width: calc( 100vw * ( 1200 / 1440));
    max-width: 1200px;
    margin: 2rem auto;
    gap:1.5rem;
}
a.BtnBlue {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--color-Blue);
    border-radius: 5rem;
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    padding: 0.5rem 2rem;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
a.BtnOrange{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--color-Orange);
    border-radius: 5rem;
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    padding: 0.5rem 3rem 0.5rem 2rem;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
a.RightArrow{
    padding-right: 3rem;
}
a.LeftArrow{
    padding-left: 3rem;
}
a.BtnBlue.RightArrow::after, a.BtnOrange.RightArrow::after {
    content: "";
    display: block;
    background: url("../images/global/icn_arrow_r_whmask_2025.png") no-repeat center center;
    background-size: 125%;
    border-radius: 50%;
    height: calc( 100% - 0.5rem);
    width: auto;
    aspect-ratio:1/1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.25rem;
}
a.BtnBlue.LeftArrow::after, a.BtnOrange.LeftArrow::after {
    content: "";
    display: block;
    background: url("../images/global/icn_arrow_l_whmask_2025.png") no-repeat center center;
    background-size: 125%;
    border-radius: 50%;
    height: calc( 100% - 0.5rem);
    width: auto;
    aspect-ratio:1/1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.25rem;
}
.LineWork.Bottom{
    display: none;
}
/*マウスオーバー*/
@media (hover: hover) and (pointer: fine) {
    a.BtnBlue:hover{
        background-color: var(--color-DkBlue);
    }
    a.BtnOrange:hover{
        background-color: var(--color-DkOrange);
    }
}
/*スマホ*/
@media screen and (max-width: 767px) {
    #PageContents{
        z-index: 0;
        font-size: 3.88vw;
        line-height: 125%;
    }
    .WhBGLeft, .WhBGRight{
        margin-top: 1.5rem;
    }
    #PageContents h1{
        width: calc( 100vw * ( 312 / 360));
        max-width: calc( 100vw * ( 312 / 360));
        font-size: 170%;
        line-height: 125%;
        margin: 0 auto 1.5rem;
    }
    #PageContents h2{
        margin: 1.5rem auto;
        font-size: 157%;
        line-height: 125%;
        border: none;
    }
    #PageContents h3{
        font-size: 128.5%;
        line-height: 125%;
        text-align: center;
        margin: 1rem auto;
    }
}