@charset "UTF-8";

/* sub visual */
#visual{position:relative; padding:10.3rem 2rem 11.7rem; font-size:15px;}
#visual::before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; z-index:-2; animation: visualZoomOut 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
#visual::after{content:""; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1;}
#visual[data-visual="01"]::before{ background-image:url("../../../images/site/sub/visual01.jpg");}
#visual[data-visual="02"]::before{ background-image:url("../../../images/site/sub/visual02.jpg");}
#visual[data-visual="03"]::before{ background-image:url("../../../images/site/sub/visual03.jpg");}
@keyframes visualZoomOut {
    0% { filter: brightness(0.8); }
    100% { filter: brightness(1); }
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}
#visual .inner{max-width:1440px; margin:0 auto;}
#visual .navi{display:flex; align-items: center; margin-bottom:2.5rem; animation: fadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) both;}
#visual .navi > li + li{position:relative; padding-left:2.6rem;}
#visual .navi > li + li::before{content:""; display:block; position:absolute; left:1rem; top:50%; width:0.6rem; height:0.6rem; border-right:1px solid #ccc; border-bottom:1px solid #ccc; transform:rotate(-45deg) translateY(-50%); color:#ccc;}
#visual .navi > li > a{display:inline-block; vertical-align: middle; color:#ccc; text-decoration: underline; text-underline-offset: 3px;}
#visual .navi > li.home > a{width:2.4rem; height:2.4rem; background:url("../../../images/site/sub/ico_home.svg") no-repeat 50% 50% / cover;}
#visual .visual_top{display:flex; align-items: center; justify-content: space-between; flex-wrap:wrap; animation: fadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) 0.15s both;}
#visual .title{color:#fff; font-size:6rem; line-height:1.2;}
#visual .share{display:inline-flex; gap:0.8rem; margin-left:2rem;}
#visual .share > li{position:relative;}
#visual .share > li > a{display:block; width:4.8rem; height:4.8rem; border-radius: 50%; background-color: rgba(0, 0, 0, 0.60); background-repeat: no-repeat; background-position:50% 50%; background-size:cover;}
#visual .share > li > .print{background-image:url("../../../images/site/sub/ico_print.svg");}
#visual .share > li > .sns_btn{background-image:url("../../../images/site/sub/ico_share.svg");}
#visual .share > li .sns_list{display:none; gap:0.8rem; position:absolute; top:calc(100% + 1rem); right:0; padding:2rem; border-radius: 0.4rem; background:#000; z-index: 2;}
#visual .share > li .sns_list.on{display:flex;}
#visual .share > li .sns_list::before{content:""; display:block; position:absolute; bottom:100%; right:2rem; border-bottom:0.6rem solid #222; border-left:0.6rem solid rgba(0,0,0,0); border-right:0.6rem solid rgba(0,0,0,0);}
#visual .share > li .sns_list > li a{display:block; width:3rem; height:3rem; background:#ddd;}
#visual .page_tab{position:absolute; left:50%; bottom:0; width:100%; background:rgba(0,0,0,0.6); transform: translateX(-50%); z-index: 1;}
#visual .page_tab .tab_select{display:none; position:relative; padding:16px 20px; color:#fff; font-size:15px;}
#visual .page_tab .tab_select::after{content:""; display:block; position:absolute; right:20px; top:50%; transform: translateY(-50%) rotate(45deg); width:10px; height:10px; border-bottom:2px solid #fff; border-right:2px solid #fff; transition: all .35s;}
#visual .page_tab.on .tab_select::after{transform: translateY(-50%) rotate(225deg);}
#visual .page_tab ul{display:flex; justify-content: center; gap:2rem;}
#visual .page_tab ul > li > a{display:block; position:relative; padding:1.6rem 2rem; color:#aaa; font-size:1.8rem; font-weight:600; line-height:1.4; text-align: center; transition: all .35s;}
#visual .page_tab ul > li > a::after{content:""; display:block; position:absolute; left:0; bottom:0; width:0.4rem; height:1.4rem; width:0; height:2px; background:#fff; transition: all .35s;}
#visual .page_tab ul > li.active > a{color:#fff;}
#visual .page_tab ul > li.active > a::after{width:100%;}    
#visual .page_tab ul > li > a:hover{color:#fff;}
#visual .page_tab ul > li > a:hover::after{width:100%;}

@media screen and (max-width:1024px) {
    #visual .page_tab ul{gap:1.2rem;}
}
@media screen and (max-width:768px) {
    #visual{padding:40px 20px 81px;}
    #visual .title{font-size:38px;}
    #visual .share > li > .print{display:none;}

    #visual .page_tab .tab_select{display:block;}
    #visual .page_tab ul{display:none; flex-wrap:wrap; gap:0; position:absolute; top:100%; width:100%; padding:8px 20px 12px; background:#fff; border-radius: 1rem; box-shadow: 2px 2px 4px rgba(0,0,0,0.2);}
    #visual .page_tab.on ul{display:flex;}
    #visual .page_tab ul > li{width:100%;}
    #visual .page_tab ul > li + li{border-top:1px solid #eee;}
    #visual .page_tab ul > li > a{padding:12px 8px; color:#151515; font-size:15px; text-align: left;}
    #visual .page_tab ul > li.active > a{color:#B62B5B;}
    #visual .page_tab ul > li > a::after{background:#B62B5B;}
}
@media screen and (max-width:414px) {
    #visual .title{font-size:36px;}
}

[data-list] > li{position:relative; padding-left:1.2rem;}
[data-list] > li::before{display:block; position:absolute; left:0;}
[data-list="dot"] > li::before{content:""; top:1.2rem; width:2px; height:2px; border-radius:50%; background:#222;}
[data-list="def"] > li{padding-left:1.6rem;}
[data-list="def"] > li::before{content:"※"; top:0rem;}

.pc{display:block;}
.tablet{display:none;}
.mo{display:none;}

@media screen and (max-width:1024px) {
    .pc{display:none;}
    .tablet{display:block;}
    .mo{display:none;}
}
@media screen and (max-width:540px) {
    .tablet{display:none;}
    .mo{display:block;}
}

.nothing{display:flex; align-items: center; justify-content: center; flex-direction: column; min-height:50rem; padding:4rem; text-align: center; background:#f9f9f9; border-radius: 1.2rem;}
.nothing h2{margin-bottom:0.8rem; font-size:2.8rem;}
.nothing h2::before{content:""; display:block; width:14rem; height:8rem; margin:0 auto 4rem; background:url("../../../images/site/sub/ready.png") no-repeat 50% 50% / cover;}
.nothing p{font-size:1.8rem; font-weight:500;}

.h3_title{margin-top:11rem; margin-bottom:4rem; font-size:4rem; line-height:1;}
.h3_title:first-child{margin-top:7rem;}

@media screen and (max-width:1024px) {
    .h3_title{margin-top:8rem; margin-bottom:24px; font-size:32px;}
    .h3_title:first-child{margin-top:4rem;}
}
@media screen and (max-width:768px) {
    .h3_title{margin-top:6rem; font-size:26px;}
    .h3_title:first-child{margin-top:2rem;}
}

.point1{color:#B62B5B !important;}

.gray_box{padding:2rem; border-radius:1.6rem; background:#F8FAFC; }
.gray_box [data-list]{font-size:1.8rem; font-weight:500;}
.gray_box [data-list] > li + li{margin-top:1.2rem;}

@media screen and (max-width:768px) {
    .gray_box [data-list]{font-size:14px;}
}