@charset "utf-8";

main {
    flex: 1;
    width: 100%;
    margin-inline: auto;
    color: var(--clr_blk);
}
main:not(:has(#short_mv)) {
    padding-top: 70px;
}
main img {
    image-rendering: -webkit-optimize-contrast;
}


/* short common -------------------------------- */
/* variable */
:root {
    --clr_blk: #4e4e4e;
    --clr_blu: #0066b4;
    --clr_blu_br: #316bf1;
}

/* webView */
body.webView header,
body.webView footer,
body.webView main .webView {
    display: none!important;
    opacity: 0;
}

/* display */
.pc_only { display: block!important; }
.sp_only { display: none!important; }
.disp_b { display: block!important; }
.disp_n { display: none!important; }
.disp_ib { display: inline-block!important; }

/* margin, padding */
.mt0 { margin-top: 0!important; }
.mt5 { margin-top: 5px!important; }
.mt10 { margin-top: 10px!important; }
.mt15 { margin-top: 15px!important; }
.mt20 { margin-top: 20px!important; }
.mt30 { margin-top: 30px!important; }
.mt40 { margin-top: 40px!important; }
.mt50 { margin-top: 50px!important; }
.mt60 { margin-top: 60px!important; }
.mb0 { margin-bottom: 0!important; }
.mb5 { margin-bottom: 5px!important; }
.mb10 { margin-bottom: 10px!important; }
.mb15 { margin-bottom: 15px!important; }
.mb20 { margin-bottom: 20px!important; }
.mb30 { margin-bottom: 30px!important; }
.mb40 { margin-bottom: 40px!important; }
.mb50 { margin-bottom: 50px!important; }
.mb60 { margin-bottom: 60px!important; }

/* background */
.bg_wht { background: #fff!important; }
.bg_blu { background: #edf7ff!important; }
.bg_none { background: none!important; }

/* text */
.ta_c { text-align: center; }
.ta_r { text-align: right; }
.ft_bld { font-weight: bold; }
.ft_nor { font-weight: normal; }
.fs_90p { font-size: 90%; }
.fs_120p { font-size: 120%; }
.fs_130p { font-size: 130%; }
.fs_140p { font-size: 140%; }
.fs_150p { font-size: 150%; }
.clr_blk { color: var(--clr_blk)!important; }
.clr_red { color: #f00;  }
.clr_orn { color: #f70; }
.clr_blu { color: var(--clr_blu); }
.clr_blu_lt { color: var(--clr_blu_br); }

/* indent */
.indent1,
.indent1s {
    text-indent: -1em;
    padding-left: 1em;
}
.indent2,
.indent2s {
    text-indent: -2em;
    padding-left: 2em;
}
.indent1s,
.indent2s {
    font-size: min(calc(24vw / 768* 100), 12px);
}

/* link */
.ico_no {
    padding-right: 0;
    background: none;
}
.ico_modal:after {
    display: inline-block;
    content: "";
    width: 16px;
    height: 16px;
    margin: 0 3px;
    background: url("../img/ico_modal.svg") no-repeat right center;
    background-size: cover;
    vertical-align: middle;
}


/* short contents -------------------------------- */
#contents a {
    color: var(--clr_blu);
    text-decoration: none;
}
#contents section {
    padding: 30px calc((100% - 600px) / 2);
}
#contents section:nth-of-type(2n) {
    background: #edf7ff;
}
#contents p,
#contents li {
    overflow-wrap: anywhere;
    word-break: normal;
}
#contents p {
    font-size: min(calc(28vw / 768* 100), 14px);
    line-height: 1.8;
}
#contents p + p,
#contents ul + p {
    margin-top: 20px;
}
#contents p + ul {
    margin-top: 10px;
}
#contents strong {
    font-weight: bold;    
}

/* head */
#contents h1#short_mv picture,
#contents h1#short_mv source,
#contents h1#short_mv img {
    display: block;
    width: 100%;
}
#contents h2 {
    margin: 0 0 15px;
    padding: 8px 8px 3px;
    font-size: min(calc(60vw / 768* 100), 30px);
    font-weight: bold;
    color: var(--clr_blu);
    text-align: center;
    line-height: 1.4;
}
#contents h3 {
    margin: 0 0 35px;
    font-size: min(calc(44vw / 768* 100), 22px);
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.6;
}
#contents h3:after {
    display: block;
    content: "";
    width: 40px;
    height: 3px;
    margin: 12px auto 0;
    background: var(--clr_blu);
}

/* picture */
span.pic {
    display: block;
    margin-bottom: 20px;
}
main span.pic img {
    width: revert-layer;
    height: auto;
    object-fit: contain;
}

/* box */
.box_wht {
    padding: 25px 20px;
    border-radius: 10px;
    background: #fff;
}
.box_blu {
    padding: 25px 20px;
    border-radius: 10px;
    background: #ebf7ff;
}

/* button */
#contents a.btn_blu {
    display: grid;
    grid-template-columns: 1fr 30px;
    place-items: center;
    grid-gap: 10px;
    width: 315px;
    min-height: 65px;
    margin-inline: auto;
    padding: 5px 20px 5px 45px;
    border-radius: 50px;
    background: var(--clr_blu_br) url("../img/ico_round.svg") no-repeat right 20px center;
    font-size: min(calc(32vw / 768* 100), 16px);
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}
#contents p:has(.deco_slash) + p:has(a.btn_blu),
#contents p:has(.deco_slash) + p.pc_only:has(a.btn_blu) + p.sp_only:has(a.btn_blu) { margin-top: -5px; }

a.btn_blu:after {
    display: block;
    content: "";
    width: 30px;
    height: 30px;
    background: url("../img/ico_arr_blu.svg") no-repeat calc(50% + 1px) center;
    filter: hue-rotate(-5deg) brightness(1.05) saturate(1.05) contrast(2);
}
a.btn_blu[target="_blank"]:after {
    background-image: url("../img/ico_exlink_blu.svg");
    background-position: center center;
}

/* link_txt */
#contents .link_txt {
    color: var(--clr_blu);
    text-decoration: underline;
    vertical-align: baseline;
}
a.link_txt:after {
    display: inline-block;
    content: "";
    width: 8px;
    height: 12px;
    margin-left: 6px;
    background: url("../img/ico_arr_blu.svg") no-repeat right center;
    vertical-align: middle;
}
a.link_txt[target="_blank"]:after {
    display: none;
}

/* notice */
#contents .notice {
    font-size: min(calc(36vw / 768* 100), 18px);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
}
.notice strong,
.marker {
    display: inline;
    padding: 0 3px;
    background: linear-gradient(transparent 50%, #fffab4 50%);
    color: #f70;
}

/* deco_slash */
.deco_slash {
    display: inline-grid;
    grid-template-columns: 1em 1fr 1em;
    grid-template-rows: auto;
    margin-inline: auto;
    line-height: 1.4;
    color: #ff640c;
}
.deco_slash:before,
.deco_slash:after {
    display: block;
    content: "";
    align-self: flex-end;
    width: 2px;
    height: 1.2em;
    margin-left: 6px;
    border-radius: 2px;
    background-color: currentColor;
    transform: rotate(-30deg) translateY(-3px);
    will-change: transform;
    overflow: hidden;
}
.deco_slash:after {
    transform: rotate(30deg) translateY(-3px);
}

/* checklist */
ul.checklist li {
    position: relative;
    padding: 10px 0 13px 25px;
    background: url("../img/ico_check.svg") no-repeat left 11px;
    font-size: min(calc(30vw / 768* 100), 15px);
    font-weight: bold;
}
ul.checklist li:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background-image: linear-gradient(to left, transparent 0%, transparent 50%, #c6c6c6 50%, #c6c6c6 100%);
    background-size: 9px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
}
ul.checklist li:last-of-type:before {
    display: none;
}
ul.checklist li:has(.etc) {
    display: grid;
    grid-template-columns: 1fr 2em;
    place-items: end start;
    grid-gap: 5px;
}
ul.checklist li .etc {
    justify-self: end;
    font-size: 90%;
    font-weight: normal;
}


/* accordion -------------------------------- */
.acc_area .acc_open {
    position: relative;
    cursor: pointer;
    transition-duration: 0.15s;
}
.acc_area .acc_open:hover {
    opacity: var(--main-hover-opacity);
}
.acc_area .acc_open:before,
.acc_area .acc_open:after {
    display: block;
    content: "";
    position: absolute;
    background: var(--clr_blu);
}
.acc_area .acc_open:before {
    transform: rotate(90deg);
}
.acc_area.open .acc_open:before {
    display: none;
}
.acc_area:not(.open) .acc_inner {
    display: none;
}


/* modal -------------------------------- */
body:has(.modal.active) {
    position: fixed;
    height: 100vh;
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal.active {
    display: block;
}
.modal .modal_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    z-index: 100;
    cursor: pointer;
}
.modal .modal_content {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 50px 15px 20px;
    background: #fff;
    width: auto;
    min-width: 360px;
    max-width: 850px;
    min-height: 300px;
    z-index: 1001;
}
.modal .modal_inner {
    max-height: 600px;
    padding: 10px;
    overflow-y: auto;
}
#contents .modal .modal_close {
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
}
#contents .modal_close a {
    color: var(--clr_blk);
    text-decoration: underline;
}
.modal_close .ico_close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    background: var(--clr_blu);
}
.modal_open:hover,
.modal_close .ico_close:hover { opacity: var(--main-hover-opacity); }
.modal_open {
    cursor: pointer;
}
.modal_close .ico_close:after {
    display: block;
    content: "\00D7";
    font-size: min(calc(50vw / 768* 100), 25px);
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}


/* tab -------------------------------- */
.tab_area .tab_open {
    cursor: pointer;
}
.tab_area .tab {
    display: none;
}
.tab_area .tab.active {
    display: block;
}


/* fixed_cta -------------------------------- */
#contents .fixed_cta {
    position: fixed;
    z-index: 10;
}
#contents .fixed_cta.fadein_cta {
    display: none;
}


/* media query -------------------------------- */
@media (max-width: 980px) {
    main img { width: 100%; }
    main:not(:has(#short_mv)) { padding-top: 10%; }

    /* common */
    .pc_only { display: none!important; }
    .sp_only { display: block!important; }
    .sp_ta_l { text-align: left; }

    /* short contents */
    #contents section { padding: 6%; }
    body.webView #contents section {
        padding-top: 8%;
        padding-bottom: 8%;
    }
    #contents h2 { margin-bottom: 2%; }
    .box_wht,
    .box_blu { padding: 5% 6%; }
    #contents a.btn_blu { width: 100%; }
    span.pic { margin-bottom: 5%; }

    ul.checklist { padding: 0 6%; }
    .box_wht ul.checklist,
    .box_blu ul.checklist { padding: 0; }

    /* accordion */
    .acc_area .acc_open:hover { opacity: 1; }

    /* modal */
    .modal .modal_content { 
        width: 80%;
        min-width: auto;
    }
    .modal .modal_inner { max-height: 500px; }

    /* fixed_cta */
    #contents .fixed_cta {
        right: 10px;
        bottom: 10px;
    }
}