@charset "utf-8";

/* # =================================================================
   # here in hambuger menu
   # ================================================================= */
.js_spMenu ul li:nth-of-type(4) {
    background-color: #ccc;
}

/* # =================================================================
   # Base
   # ================================================================= */
hr {
    background-color: #FFF;
    height: 6px;
    border: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding: 58px;
}


@media (min-width: 601px) {
    html {
        overflow-x: hidden;
        scroll-padding: 80px;
    }
}

/* title詳細設定 */

#download h2 {
    font-size: calc(25 * 100vw / 375);
    font-weight: 500;
    letter-spacing: .05em;
    color: #fff;
}

@media (min-width: 601px) {
    #download h2 {
        font-size: calc(65 * 100vw / 1200);
        letter-spacing: .02em;
        color: var(--c-black);
    }
}

@media (min-width: 1201px) {
    #download h2 {
        font-size: 65px;
    }
}

#download h3 {
    margin-bottom: calc(10 * 100vw / 375);
    font-size: calc(15 * 100vw / 375);
    font-weight: 500;
    letter-spacing: .05em;
    color: #000;
}

@media (min-width: 601px) {
    #download h3 {
        margin-bottom: calc(20 * 100vw / 1200);
        font-size: calc(35 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    #download h3 {
        margin-bottom: 40px;
        font-size: 35px;
    }
}

@media (min-width: 601px) {
    #download h4 {
        font-weight: 500;
        color: #000;
        font-size: calc(22 * 100vw / 1200);
        /* word-break: keep-all; */
    }
}

@media (min-width: 1201px) {
    #download h4 {
        font-size: 22px;
    }
}

/* # =================================================================
   # Layout
   # ================================================================= */

.ly_inner {
    padding-inline: 4.5333333333vw;
}

.ly_innerOver {
    width: 100vw;
    max-width: initial;
    margin-inline: calc(50% - 50vw);
}

.ly_dl_section {
    padding-top: calc(20 * 100vw / 375);
}

@media (min-width: 601px) {
    .ly_dl_section {
        padding-top: calc(40 * 100vw / 1200);
    }

    .ly_inner {
        max-width: min(100vw, 1200px);
        margin-inline: auto;
        padding-inline: min(3.6666666667vw, 44px);
    }
}

@media (min-width: 1201px) {
    .ly_dl_section {
        padding-top: 40px
    }
}

/* # =================================================================
   # Block Module
   # ================================================================= */


.bl_dl_box {
    margin-bottom: calc(20 * 100vw / 375);
}

@media (min-width: 601px) {
    .bl_dl_box {
        margin-bottom: calc(70 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    .bl_dl_box {
        margin-bottom: 70px;
    }
}

.bl_dl_inner {
    margin-bottom: calc(5 * 100vw / 375);
}

@media (min-width: 601px) {
    .bl_dl_inner {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: min(3.333333333333333vw, 40px);
        margin-bottom: calc(30 * 100vw / 1025);
        gap: 0 min(2.916667vw, 35px);
    }
}

@media (min-width: 1025px) {
    .bl_dl_inner {
        margin-bottom: calc(20 * 100vw / 1200);
    }

    .bl_dl_inner.bl_dl_inner__unflex {
        flex-direction: column;
    }
}

@media (min-width: 1201px) {
    .bl_dl_inner {
        margin-bottom: 20px;
    }
}

.bl_dl_cols2 li:nth-of-type(2) {
    margin-top: max(2.6666666vw, 10px);
}

.bl_dl_cols3 li:nth-of-type(2) {
    margin-top: max(2.6666666vw, 10px);
}

.bl_dl_cols3 li:nth-of-type(3) {
    margin-top: max(2.6666666vw, 10px);
}


@media (min-width: 601px) {
    .bl_dl_innerBox {
        display: flex;
        gap: 0 calc(12 * 100vw / 1200);
    }

    .bl_dl_innerBox.bl_dl_cols1 li {
        width: calc(850 * 100vw / 1200);
    }

    .bl_dl_innerBox.bl_dl_cols2 li {
        width: calc(419 * 100vw / 1200);
    }

    .bl_dl_innerBox.bl_dl_cols3 li {
        width: calc(275 * 100vw / 1200);
    }

    .bl_dl_cols2 li:nth-of-type(2) {
        margin-top: 0;
    }

    .bl_dl_cols3 li:nth-of-type(2) {
        margin-top: 0;
    }

    .bl_dl_cols3 li:nth-of-type(3) {
        margin-top: 0;
    }
}

/* @media (min-width: 801px) {
    .bl_dl_innerBox.bl_dl_cols1 li {
        width: calc(900 * 100vw / 1200);
    }

    .bl_dl_innerBox.bl_dl_cols2 li {
        width: calc(444 * 100vw / 1200);
    }

    .bl_dl_innerBox.bl_dl_cols3 li {
        width: calc(292 * 100vw / 1200);
    }
} */

@media (min-width: 1201px) {
    .bl_dl_innerBox {
        gap: 0 12px;
    }

    .bl_dl_innerBox.bl_dl_cols1 li {
        width: 850px;
    }

    .bl_dl_innerBox.bl_dl_cols2 li {
        width: 419px;
    }

    .bl_dl_innerBox.bl_dl_cols3 li {
        width: 275px;
    }

}

@media (min-width: 601px) {
    .bl_dl_innerBox_lyPc:first-of-type {
        margin-bottom: calc(30 * 100vw / 1025);
    }
}

@media (min-width: 1025px) {
    .bl_dl_innerBox_lyPc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 50%;
    }

    .bl_dl_innerBox_lyPc:first-of-type {
        margin-bottom: 0;
    }

    .bl_dl_innerBox_lyPc li {
        width: calc(340 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    .bl_dl_innerBox_lyPc li {
        width: 340px;
    }
}


.bl_dl_inner li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(40 * 100vw / 375);
    border: 1px solid #CDCDCD;
    background-color: #fff;
    border-radius: 432px;
    /* margin-top: min(1.666666666666667vw,20px); */
}

.bl_dl_inner li a {
    display: block;
    text-decoration: none;
    font-size: min(4vw, 15px);
    line-height: 1.2;
    letter-spacing: min(0.266666666666667vw, -1px);
    color: var(--c-black);
}

@media (min-width: 601px) {
    .bl_dl_inner li {
        height: max(4.8828vw, 40px);
        /* border-radius: 432px; */
    }

    .un_dl_rika .bl_dl_inner li {
        border: 1px solid var(--c-green-light);
    }

    .un_dl_seikatsu .bl_dl_inner li {
        border: 1px solid var(--c-orange);
    }

    .un_dl_sansu .bl_dl_inner li {
        border: 1px solid var(--c-blue);
    }

    .un_dl_hoken .bl_dl_inner li {
        border: 1px solid var(--c-purple);
    }

    .un_dl_etc .bl_dl_inner li {
        border: 1px solid #9A9A9A;
    }

    .bl_dl_inner li a {
        font-size: clamp(13px, 1.5vw, 18px);
        letter-spacing: 0;
    }
}

@media (min-width: 1201px) {
    .bl_dl_inner li {
        height: 50px;
    }

    .bl_dl_inner li a {
        font-size: 18px;
    }
}

.bl_dl_inner li a.un_dl_word:before {
    background-image: url(../images/download/img-dl-word.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bl_dl_inner li a.un_dl_excel:before {
    background-image: url(../images/download/img-dl-excel.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bl_dl_inner li a.un_dl_pdf:before {
    background-image: url(../images/download/img-dl-pdf.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bl_dl_inner li a.un_dl_zip:before {
    background-image: url(../images/download/img-dl-zip.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bl_dl_inner li a.un_dl_web:before {
    background-image: url(../images/download/img-dl-web.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bl_dl_inner li a:before {
    display: inline-block;
    margin-right: 10px;
    width: calc(15 * 100vw / 375);
    height: calc(19 * 100vw / 375);
    vertical-align: middle;
    content: "";
}

@media (min-width: 601px) {
    .bl_dl_inner li a:before {
        width: calc(24 * 100vw / 1200);
        height: calc(30 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    .bl_dl_inner li a:before {
        width: 24px;
        height: 30px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .bl_dl_inner li:hover a {
        opacity: var(--hover-opacity);
    }
}

@media (min-width: 601px) {
    .bl_download_footer {
        padding-top: 35px;
        padding-bottom: 35px;
    }
}

/* # =================================================================
   # Element Module
   # ================================================================= */

.el_dl_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(50 * 100vw / 375);
}

.el_dl_ttl.el_dl_ttl__rika {
    margin-top: calc(30 * 100vw / 375);
    background-color: var(--c-green-light);
}

.el_dl_ttl.el_dl_ttl__seikatsu {
    background-color: var(--c-orange);
}

.el_dl_ttl.el_dl_ttl__hoken {
    background-color: var(--c-purple);
}

.el_dl_ttl.el_dl_ttl__sansu {
    background-color: var(--c-blue);
}

.el_dl_ttl.el_dl_ttl__etc {
    background-color: var(--c-grey-soft);
}

@media (min-width: 601px) {
    .el_dl_ttl {
        height: calc(176 * 100vw / 1200);
        align-items: flex-end;
        background-color: transparent !important;
    }

    .el_dl_ttl.el_dl_ttl__rika {
        margin-top: 0;
    }
}

@media (min-width: 1201px) {
    .el_dl_ttl {
        height: 176px;
    }
}

@media (min-width: 601px) {
    .el_dl_btn {
        width: calc(200 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    .el_dl_btn {
        width: 200px;
    }
}

/* # =================================================================
   # Unique
   # ================================================================= */


/* MV */
.un_dl_kv {
    position: relative;
    padding-top: calc(16 * 100vw / 375);
    width: 100%;
    height: calc(190 * 100vw / 375);
    background-image: url(../images/download/img-dl-kvSp.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

@media (min-width: 601px) {
    .un_dl_kv {
        padding-top: calc(59 * 100vw / 1200);
        height: calc(350 * 100vw / 1200);
        background-image: url(../images/download/img-dl-kv.png);
    }
}

@media (min-width: 1201px) {
    .un_dl_kv {
        padding-top: 59px;
        width: 100%;
        height: 350px;
    }
}

.un_dl_kv h1 {
    font-size: calc(30 * 100vw / 375);
    color: var(--c-black);
    text-align: center;
    font-weight: 500;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    word-break: keep-all;
}

@media (min-width: 601px) {
    .un_dl_kv h1 {
        font-size: calc(80 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    .un_dl_kv h1 {
        font-size: 80px;
    }
}

.un_dl_kv_link {
    padding-top: calc(25 * 100vw / 375);
}

@media (min-width: 601px) {
    .un_dl_kv_link {
        display: flex;
        gap: 0 calc(30 * 100vw / 1200);
        justify-content: center;
        padding-top: calc(40 * 100vw / 1200);
    }
}

@media (min-width: 1201px) {
    .un_dl_kv_link {
        padding-top: 40px;
        gap: 0 30px;
    }
}

.un_dl_kv_linkInner {
    display: flex;
    justify-content: center;
    gap: 0 calc(22 * 100vw / 375);
}

.un_dl_kv_linkInner:first-of-type {
    margin-bottom: calc(10 * 100vw / 375);
}

@media (min-width: 601px) {
    .un_dl_kv_linkInner {
        gap: 0 calc(30 * 100vw / 1200);
    }

    .un_dl_kv_linkInner:first-of-type {
        margin-bottom: 0;
    }
}

@media (min-width: 1201px) {
    .un_dl_kv_linkInner {
        gap: 0 30px;
    }
}

.un_dl_rika,
.un_dl_seikatsu,
.un_dl_sansu,
.un_dl_hoken,
.un_dl_etc {
    position: relative;
}

/* rika */

.un_dl_rika {
    background-color: #E4F2CC;
}

/* seikatsu */
.un_dl_seikatsu {
    background-color: #FFECCF;
}

/* sansu */
.un_dl_sansu {
    background-color: #D4ECFA;
}

/* hoken */
.un_dl_hoken {
    background-color: #E9DDEC;
}

/* etc */
.un_dl_etc {
    background-color: #E6E6E6;
}

/* 装飾アイコン */

.un_dl_dots_blue,
.un_dl_dots_pink,
.un_dl_dots_green {
    position: absolute;
    width: 72px;
    height: 55px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
}

.un_dl_dots_blue {
    background-image: url(../../common/images/img-common-dots-blue.svg);
}

.un_dl_dots_pink {
    background-image: url(../../common/images/img-common-dots-pink.svg);
}

.un_dl_dots_green {
    background-image: url(../../common/images/img-common-dots-green.svg);
}

@media (min-width: 601px) {

    .un_dl_dots_blue,
    .un_dl_dots_pink,
    .un_dl_dots_green {
        width: calc(133 * 100vw / 1200);
        height: calc(100 * 100vw / 1200);
        z-index: 2;
    }
}

@media (min-width: 1201px) {

    .un_dl_dots_blue,
    .un_dl_dots_pink,
    .un_dl_dots_green {
        width: 133px;
        height: 100px;
    }
}

/* kv */
.un_dl_kv .un_dl_dots_blue {
    top: 36%;
    left: 89%;
}

.un_dl_kv .un_dl_dots_pink {
    top: 20%;
    left: 5%;
}

.un_dl_bg_01 {
    position: absolute;
    top: -168px;
    left: -259px;
}

.un_dl_bg_02 {
    position: absolute;
    top: 664px;
    right: -268px;
}

.un_dl_bg_03 {
    position: absolute;
    top: 1239px;
    left: -259px;
}

.un_dl_bg_04 {
    position: absolute;
    top: -23px;
    right: -268px;
}

.un_dl_bg_05 {
    position: absolute;
    top: 568px;
    left: -259px;
}

.un_dl_bg_06 {
    position: absolute;
    top: 1239px;
    right: -268px;
}

.un_dl_bg_07 {
    position: absolute;
    top: 1061px;
    left: -259px;
}

.un_dl_bg_08 {
    position: absolute;
    top: 801px;
    left: -259px;
}

.un_dl_footerLine {
    height: 5px;
    background-color: #FFCC00;
}


/* # =================================================================
   # Helper
   # ================================================================= */

@media (min-width: 601px) {
    .hp_sm_w187{
        width: min(15.58333333vw, 187px);
    }
}

@media (min-width: 1025px) {
    .hp_lg_w66 {
        width: min(5.8vw, 66px) !important;
    }

    .hp_lg_w77 {
        width: min(6.41666vw, 77px) !important;
    }

    .hp_lg_tar {
        text-align: right !important;
    }
}

@media (max-width: 600.98px) {
    .hp_lesssm_h50 {
        height: max(13.333333vw, 50px) !important;
    }

    .hp_lesssm_mt10 {
        margin-top: max(2.6666666vw, 10px);
    }
}