@media screen and (min-width: 1366px) {/* 1366px以上～デスクトップUI */
    :root {
        --main-margin-horizontal: 80px;
        --h1-fontsize: 110px;
        --h1-caption-size: 20px;
        --h1-caption-hight: 29px;
        --h2-margin-top: 200px;
        --h2-fontsize: 54px;
        --h2-linehight: 68px;
        --h2-caption-size: 16px;
        --h2-caption-hight: 24px;
        --h3-fontsize: 30px;
        --h3-linehight: 44px;
        --main-fontsize: 18px;
        --main-linehight: 36px;
        --navi-index-pos: absolute;
        --navi-index-margin-top: 0;
        --navi-index-font-size: 16px;
        --navi-index-line-height: 24px;
        --navi-index-line-gap: 15px;
        --navi-index-link-mark-scale: 1;
        --navi-index-link-mark-left: 10px;
    }
    .sp {
        display: none;
    }
    .sp-hidden {
        display: block;
    }
}
@media screen and (max-width: 1366px) {/* 767px～1366pxでタブレットUI */
    :root {
        --main-margin-horizontal: calc(10vw - 50px);
        --h1-fontsize: calc(10vw - 30px);
        --h1-caption-size: calc(0.67vw + 10.88px);
        --h1-caption-hight: calc(0.83vw + 17.6px);
        --h2-margin-top: calc(16.7vw - 28.05px);
        --h2-fontsize: calc(4vw - 0.7px);
        --h2-linehight: calc(4.51vw + 6.43px);
        --h2-caption-size: calc(0.67vw + 6.88px);
        --h2-caption-hight: calc(1.17vw + 8.03px);
        --h3-fontsize: calc(2vw + 2.63px);
        --h3-linehight: calc(3vw + 2.95px);
        --main-fontsize: calc(0.67vw + 8.87px);
        --main-linehight: calc(1.3vw + 17.8px);
        --navi-index-pos: absolute;
        --navi-index-margin-top: 0;
        --navi-index-font-size: 15px;
        --navi-index-line-height: calc(0.68vw + 14.88px);
        --navi-index-line-gap: calc(0.83vw + 3.6px);
        --navi-index-link-mark-scale: 0.9;
        --navi-index-link-mark-left: calc(0.83vw - 1.4px);
    }
    .sp {
        display: none;
    }
    .sp-hidden {
        display: block;
    }
}
@media screen and (max-width: 767px) {/* 767px以下でスマホUI */
    :root {
        --main-margin-horizontal: 20px;
        --h1-fontsize: 48px;
        --h1-caption-size: 16px;
        --h1-caption-hight: 24px;
        --h2-margin-top: 100px;
        --h2-fontsize: 30px;
        --h2-linehight: 41px;
        --h2-caption-size: 12px;
        --h2-caption-hight: 17px;
        --h3-fontsize: 18px;
        --h3-linehight: 26px;
        --main-fontsize: 14px;
        --main-linehight: 28px;
        --navi-index-pos: relative;
        --navi-index-margin-top: 31px;
        --navi-index-font-size: 14px;
        --navi-index-line-height: 20px;
        --navi-index-line-gap: 10px;
        --navi-index-link-mark-scale: 0.8;
        --navi-index-link-mark-left: 5px;
    }
    .sp {
        display: block;
    }
    .sp-hidden {
        display: none;
    }
}
main .contents {
    padding: 0 var(--main-margin-horizontal);
    padding-bottom: 200px;
    font-size: var(--main-fontsize);
    line-height: var(--main-linehight);
}
header {
    height: 220px;
}
main .contents h1 {
    margin:0;
    font-size: var(--h1-fontsize);
    line-height: var(--h1-fontsize);
    color: #7F7F7F;
    padding: 0 0 20px 0;
    text-transform: uppercase;
    font-weight: 600;
}

main .contents p {
    font-size: var(--main-fontsize);
    line-height: var(--main-linehight);
    margin: 0;
}

main .contents h1 + p {
    font-size: var(--h1-caption-size);
    line-height: var(--h1-caption-hight);
    font-weight: bold;
}

main .contents h2 {
    margin: 0;
    margin-top: var(--h2-margin-top);
    font-size: var(--h2-fontsize);
    line-height: var(--h2-linehight);
    font-weight: 600;
}

main .contents h3 {
    font-size: var(--h3-fontsize);
    line-height: var(--h3-linehight);
}

main .contents u {
    text-underline-offset: 4px;
}
main .contents h2 + p {
    position: relative;
    font-size: var(--h2-caption-size);
    line-height: var(--h2-caption-hight);
    color:var(--main-color-black);
    font-weight: bold;
    margin-bottom: 50px;
}

main .contents .navigation-index {
    width: 280px;
    padding: 20px 30px 30px 30px;
    background-color: white;
    box-shadow: 0 3px 16px rgba(0,0,0,0.05);
    position: var(--navi-index-pos);
    top: 0;
    right: var(--main-margin-horizontal);
    margin-top: var(--navi-index-margin-top);
}
main .contents .navigation-index .navigation-index-header {
    height: 19px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #817F7F;
}
main .contents .navigation-index .navigation-index-header::before {
    content: "";
    display: block;
    width: 165px;
    border-bottom: solid 1px #817F7F;
    margin-right: 10.5px;
}
main .contents .navigation-index .navigation-index-header::after {
    content: "INDEX";
    display: block;
    font-size: calc(var(--navi-index-font-size) - 2px);
    font-weight: bold;
}
main .contents .navigation-index a {
    display: block;
    font-size: var(--navi-index-font-size);
    line-height: 24px;
    font-weight: bold;
    color: black;
}
main .contents .navigation-index a + a {
    margin-top: var(--navi-index-line-gap);
}
main .contents .navigation-index a:hover {
    color: var(--main-color-blue);
}
main .contents .navigation-index a::after {
    content: "";
    display: inline-block;
    margin-right: 10px;
    margin-left: var(--navi-index-link-mark-left);
    margin-bottom: 3px;
    width: 20px;
    height: 20px;
    background-color: var(--main-color-black);
    mask-image: url("../img/link_icon.png");
    mask-size: 7px 8px;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: middle;
    scale: var(--navi-index-link-mark-scale)
}
main .contents .navigation-index a:hover::after {
    border-radius: 10px;
    background-color: var(--main-color-blue);
    background-image: url("../img/link_icon.png");
    background-size: 7px 8px;
    background-position: 7.3px center;
    background-repeat: no-repeat;
    mask: none;
}

main::after {
    content: "";
    display: inline-block;
    position:absolute;
    width: 563px;
    height: 524px;
    left: 50%;
    bottom: -200px;
    transform: rotate(-15deg);
    z-index: -1;
    background-image: url("../img/TOP_LING.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
@media screen and (max-width: 1050px) {/* 1050px以下でデザイン切替 */
    main::after {
        width: calc(100px + 40%);
        height: calc(100px + 40vw);
        bottom: -20vw;
    }
}