@charset "utf-8";

/* TITLE */
#toppage h3 { position: relative; text-align: center; margin-bottom: 80px;}
#toppage h3 span.en {
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 148px; line-height: 148px;
    font-weight: 500;
    color:rgba(0,57,167,0.20);
    letter-spacing: 15px;
    text-indent:15px;
}
#toppage h3 b {
    position: absolute; top:7px; left: 0; right: 0; bottom:0;
    font-size: 35px; line-height: 148px;
    font-weight: 800;
    color: #0039a7;
}
@media only screen and (max-width:468px){
    #toppage h3 { margin-bottom: 25px;}
    #toppage h3 span.en {
        font-size:85px; line-height: 85px;
        letter-spacing: 7px;
        text-indent:7px;
    }
    #toppage h3 b {font-size:22px; line-height: 85px;}
}
@media only screen and (max-width:320px){
    #toppage h3 span.en  { letter-spacing: 5px;}
}


/* MODAL */
.movie { width: 100%; aspect-ratio: 16 / 9;}
.movie iframe { width: 100%; height: 100%;}
.modal_box {
	display: none;
	position: fixed; top: 0; left: 0;
	width: 100vw; height: 100vh;
	background:rgba(0,0,0,0.50);
    z-index:999999;
}
.modal_box .modal_contents {
	position:absolute; top: 0; left: 0; right: 0; bottom: 0;
	margin: auto; padding: 30px;
	width:90%; max-width:1000px; height:auto; aspect-ratio: 16 / 9;
	background: #fff;
    box-sizing: border-box;
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.20);
	border-radius: 3px;
	z-index: 1000;
}
.modal_box .modal-close {
    cursor: pointer;
    display: block; border: none;
    position: absolute; top:-50px; right:-50px;
    width: 50px !important; height: 50px !important;
    text-indent: -9999px;
}
.modal_box .modal-close::before,
.modal_box .modal-close::after {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left:0; right: 0; bottom: 0;
    margin:auto;
    width: 50px; height: 2px;
    background: #fff;
    transition: all 0.3s ease-out;
}
.modal_box .modal-close::before { transform:rotate(-45deg);}
.modal_box .modal-close::after {transform:rotate(45deg);}
@media only screen and (min-width:768px){
    .modal_box .modal-close:hover::before { transform:rotate(45deg);}
    .modal_box .modal-close:hover::after {transform:rotate(-45deg);}
}
@media only screen and (max-width:768px){
    .modal_box .modal-close { top:-60px; right:0;}
}


#contact .modal_box .modal_contents { padding: 30px 40px; max-width: 700px; height: 200px;}
#contact .modal_box .come { text-align: center; padding: 30px 0; font-size: 150%;}
#contact .modal_box .come .btn_box p a {padding: 30px 0; font-size: 150%;}
@media only screen and (max-width:768px){
    #contact .modal_box .modal_contents { padding: 30px 20px; height: 300px;}
    #contact .modal_box .come { padding: 30px 0; font-size: 100%;}
    #contact .modal_box .btn_box { flex-direction: column; justify-content: center; gap:10px;}
    #contact .modal_box .btn_box p { width: 100%;}
    #contact .modal_box .btn_box p a { font-size: 100%;}
}


#denchen .modal_box .modal_contents { 
    padding: 0 !important;
    width: 94%; height: auto; max-width:1100px; aspect-ratio: 1100 / 600;
    background: url("../images/bg_blue1.webp") no-repeat;
    background-size: cover;
}
#denchen .modal_box .modal_contents .denchan_cont  {
    padding: 90px 70px  !important;
    background:url("../images/character2.webp") no-repeat 105% center;
    box-sizing: border-box;
}
#denchen .modal_box .modal_contents .mid { font-size: 66px; color: #fff; font-weight: 800; letter-spacing: -1px;}
#denchen .modal_box .modal_contents .come { margin:40px 0; font-size: 20px; color: #fff; font-weight: 800;}
#denchen .modal_box .modal_contents .profile {
    max-width: 500px;
    display: flex; flex-direction: column; gap:15px;
}
#denchen .modal_box .modal_contents .profile dl {
    display: flex;
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#denchen .modal_box .modal_contents .profile dl dt {
    position: relative;
    padding:5px 20px 5px 10px;
    width: 160px;
    text-align: center;
    font-size:16px;
    font-weight: 800;
    line-height: 200%;
    color:#fff;
    background: url("../images/bg_darkblue1.webp") no-repeat;
    background-size: cover;
}
#denchen .modal_box .modal_contents .profile dl dt::before {
    display: block; clear: both; content:"";
    position: absolute; top:0; right: -1px;
    width:auto; height:100%; aspect-ratio: 176 / 294;
    background: url("../images/bg_slash2.webp") no-repeat;
    background-size: 100% 100%;
}
#denchen .modal_box .modal_contents .profile dl dd {
    padding: 5px 10px;
    width: calc(100% - 160px);
    font-size: 17px;
    font-weight: 800;
    line-height: 200%;
    color:#0039a7;
}
#denchen .modal_box .modal_contents .close {
    cursor: pointer;
    position: absolute; bottom: -10px; left: 0; right: 0;
    margin: 35px auto 40px;
    padding: 0 5px;
    width: 140px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(90deg, #3361b9, #0039a7);
    border-radius: 50px;
}
#denchen .modal_box .modal_contents .close span {
    display:block;
    line-height: 36px;
    background:url("../images/close.webp") no-repeat 93% center;
}
@media only screen and (max-width:768px){
    #denchen .modal_box .modal_contents { max-width:380px; min-width: 330px; aspect-ratio: 343 / 575;}
    #denchen .modal_box .modal_contents .denchan_cont { padding: 40px 20px 80px !important;  background-size: 250px auto; background-position:140% 80%;}
    #denchen .modal_box .modal_contents .mid { font-size:42px; line-height: 120%; letter-spacing: -1px;}
    #denchen .modal_box .modal_contents .come {  margin: 30px 0; font-size:14px; letter-spacing: -1px; line-height: 140%;}
    #denchen .modal_box .modal_contents .profile { max-width:165px; gap:10px;}
    #denchen .modal_box .modal_contents .profile dl {
        display:block;
        background:none;
        box-shadow:none;
    }
    #denchen .modal_box .modal_contents .profile dl dt {
        padding: 0 5px;
        width: 95px;
        font-size:12px;
        color:#fff;
        background:url("../images/dencyan_tag.webp") no-repeat;
        background-size: 100% auto;
    }
    #denchen .modal_box .modal_contents .profile dl dt::before { display: none;}
    #denchen .modal_box .modal_contents .profile dl dd {
        padding: 3px 10px;
        width:100%;
        font-size: 14px;
        line-height: 150%;
        background: #fff;
    }
    #denchen .modal_box .modal-close {
         top:20px; right:20px;
    }
}
@media only screen and (max-width:468px){
    #denchen .modal_box .modal_contents .denchan_cont {background-position:165% 80%;}
}



/*======================================================
  TOP
*======================================================*/
/* ABOUT --------------------------------------------------------------------------------*/
#toppage .about { position: relative;}
#toppage .about .tit {
    position: relative;
    padding: 90px 0 290px;
    background: url("../images/bg_darkblue1.webp") no-repeat;
    background-size: 100% 100%;
}
#toppage .about .tit::before {
    position: absolute; bottom: -1px; left: 0;
    display: block; clear: both; content:"";
    width: 100%; height: auto; aspect-ratio: 300 / 39;
    background: url("../images/white.svg") no-repeat center top;
    background-size: 101%  auto;
}
#toppage .about .tit h2 {
    font-size: 42px; line-height: 78px;
    font-weight: 800;
    color: #fff;
    text-align: center;
}
#toppage .about .tit h2 b {
    font-size:125%;
    color: #f0f050;
}
#toppage .about .pic {
    position: absolute; top:280px; left: 0; right: 0;
    margin: auto;
    width: 100%; max-width: 922px; height: auto; aspect-ratio: 922 / 365;
}
#toppage .about .come {
    position: relative;
    padding: 130px 0 85px; 
    font-size: 26px; line-height: 180%;
    font-weight: 800;
    color: #0039a7;
    text-align: center;
}
#toppage .about .come span { position: relative; z-index: 999;}
#toppage .about .come::before {
    position: absolute; bottom: 130px; left: 0; right: 0;
    display: block; clear: both; content:"";
    margin: auto;
    width: 100%; height: auto; max-width:1412px; aspect-ratio: 1412 / 308;
    background: url("../images/about_bg_pc.webp") no-repeat bottom center;
}
@media only screen and (max-width:1010px){
    #toppage .about .tit .tbsp { display: block;}
    #toppage .about .pic { top: 360px;}
    #toppage .about .come::before { background-size: 110% auto !important;}
}
@media only screen and (max-width:768px){
    #toppage .about .pic { top: 360px;}
    #toppage .about .tit h2 span { font-size:85%;}
}
@media only screen and (max-width:568px){
    #toppage .about .tit { padding-bottom: 200px;}
    #toppage .about .tit h2 { font-size:30px; line-height: 50px;}
    #toppage .about .tit h2 b { font-size:125%;}
    #toppage .about .tit h2 span { font-size:75%;}
    #toppage .about .pic { top:280px;}
}
@media only screen and (max-width:468px){
    #toppage .about { overflow: hidden;}
    #toppage .about .tit {
        position: relative;
        padding: 45px 0 200px;
        background: url("../images/bg_darkblue1.webp") no-repeat;
        background-size: 100% 100%;
    }
    #toppage .about .tit h2 { font-size: 22px; line-height: 40px;}
    #toppage .about .tit span { font-size:85%;}
    #toppage .about .pic { top:180px; left:-7.5%; width: 115%;}
    #toppage .about .come {
        padding: 35px 0 40px; 
        font-size: 100%;
        line-height: 180%;
    }
    #toppage .about .come::before {
        top: 80px;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 442 / 300;
        background: url("../images/about_bg_sp.webp") no-repeat -20px top;
        background-size: auto;
        background-size: 110% !important;
  }
}



/* TROUBLE ----------------------------------------*/
#toppage .trouble .cont1 {
    position: relative;
    padding:85px 0 620px;
    text-align: center;
    background:url("../images/bg_lightblue1.webp") no-repeat center center;
    background-size: cover;
}
#toppage .trouble .cont1 .obi {
    display: inline-block;
    margin: 0 auto 40px;
    padding: 0 20px 0 40px;
    font-size: 42px;
    font-weight: 800;
    line-height: 78px;
    color: #f0f050;
    text-align: center;
    background-image: linear-gradient(90deg, #3361b9, #0039a7);
}
#toppage .trouble .cont1  h3 {
    margin-bottom:45px;
    font-size: 51px;
    color:  #0039a7;
    font-weight: 800;
}
#toppage .trouble .cont1 h3 span { position: relative; line-height: 100%;}
#toppage .trouble .cont1 h3 b {
    position:relative; top: 0;
    display: inline;
    font-size: 140%;
    line-height: normal;
}
#toppage .trouble .cont1 h3 b::before {
    display: block; clear: both; content:"";
    position: absolute; top:0; left: 0; right: 0;
    margin: auto;
    width: 12px; height: 12px;
    background: #009ce1;
    border-radius:12px;
}
#toppage .trouble .cont1 h3 span::before,
#toppage .trouble .cont1 h3 span::after {
    display: block; clear: both; content:"";
    position: absolute; top:-20px; 
    margin: auto 0;
    width: 100px; height:auto; aspect-ratio: 100 / 163;
    background-size: 100% auto !important;
}
#toppage .trouble .cont1  h3 span::before {
    left: -100px;
    background: url("../images/trouble_fukidasi_l.webp") no-repeat;
}
#toppage .trouble .cont1  h3 span::after {
    right:-300px;
    background: url("../images/trouble_fukidasi_r.webp") no-repeat;
}
#toppage .trouble .beforeafter {
    position: absolute; bottom: -130px; left: 0; right: 0;
    margin: auto;
    width: 96%;
    max-width: 1170px;
    display: flex; gap:35px;
}
#toppage .trouble .beforeafter ul { 
    width:33.3%;
    background: #f0f050;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .trouble .beforeafter ul li {
    position: relative;
    padding:0 0 20px;
}
#toppage .trouble .beforeafter ul li:nth-child(1) { padding-bottom: 50px; background: #fff;}
#toppage .trouble .beforeafter ul li:nth-child(2) { padding-top:60px;}
#toppage .trouble .beforeafter ul li:nth-child(1)::before {
    display: block; clear: both; content:"";
    position: absolute; bottom: -91px; left: 0; right: 0; z-index: 99;
    margin: auto;
    width: 100%; max-width: 251px; height: auto; aspect-ratio: 251 / 118;
    background:url("../images/trouble_beforeafter.webp") no-repeat;
    background-size: 100% auto;
}
#toppage .trouble .beforeafter ul li:nth-child(2) { 
    background-image: linear-gradient(53deg, #f7f7a7, #f0f050);
}
#toppage .trouble .beforeafter ul li:nth-child(2) img {
    margin-bottom: 10px;
    position: relative; z-index: 99; line-height: 160%;
} 
#toppage .trouble .beforeafter ul li span { 
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #0039a7;
    text-align: center;
    line-height: 180%;
}
@media only screen and (max-width:1030px){
    #toppage .trouble .beforeafter { gap:20px;}
    #toppage .trouble .beforeafter ul li span { font-size: 18px;}
}
@media only screen and (max-width:868px){
    #toppage .trouble .cont1 .beforeafter { position: static;flex-direction: column;}
    #toppage .trouble .beforeafter ul { margin: auto; width: 315px;}
    #toppage .trouble .beforeafter ul li span { font-size: 19px;}
}
@media only screen and (max-width:768px){
    #toppage .trouble .cont1 { padding-bottom: 80px;}
}
@media only screen and (max-width:468px){
    #toppage .trouble .cont1 {
        padding:35px 0 55px;
        background:url("../images/bg_lightblue2.webp") no-repeat center top;
        background-size: cover;
    }
    #toppage .trouble .cont1 .obi {
        margin: 0 auto 20px;
        padding: 0 10px 0 20px;
        font-size: 18px;
        line-height: 33px;
    }
    #toppage .trouble .cont1  h3 {
        margin-bottom:27px;
        font-size:25px;
    }
    #toppage .trouble .cont1 h3 span { position: relative; line-height: 100%;}
    #toppage .trouble .cont1 h3 b {
        position:relative; top: 0;
        display: inline;
        font-size: 140%;
        line-height: normal;
    }
    #toppage .trouble .cont1 h3 b::before {
        width: 5.5px; height: 5.5px;
    }
    #toppage .trouble .cont1 h3 span::before,
    #toppage .trouble .cont1 h3 span::after {
        top:0; width: 57px; height:auto; aspect-ratio: 57 / 93;
    }
    #toppage .trouble .cont1  h3 span::before { left: -70px;}
    #toppage .trouble .cont1  h3 span::after {right: -70px;}
    #toppage .trouble .cont1 .beforeafter { gap:30px;}
}
@media only screen and (max-width:320px){
    #toppage .trouble .cont1  h3 span::before { left: -50px; }
    #toppage .trouble .cont1  h3 span::after { right:-50px; }
    #toppage .trouble .beforeafter ul { margin: auto; width:96%;}
    #toppage .trouble .beforeafter ul li span { font-size: 17px;}
}



#toppage .trouble .cont2 {
    padding: 250px 0 135px;
    background: url("../images/bg_blue2.webp") no-repeat top center;
    background-size: cover !important;
}
#toppage .trouble .cont2 .intro {
    position: relative;
    margin: auto;
    max-width: 872px;
}
#toppage .trouble .cont2 .intro::before,
#toppage .trouble .cont2 .intro::after {
    display: block; clear: both; content:"";
    width: 501px; height:auto;  aspect-ratio: 501 / 560;
    position: absolute; top:-30px; 
    background-size: 100% auto !important;
}
#toppage .trouble .cont2 .intro::before {
    left:-345px;
    background:url( "../images/trouble_bg1_pc.webp")no-repeat;
}
#toppage .trouble .cont2 .intro::after { 
    right:-345px;
    background:url( "../images/trouble_bg2_pc.webp")no-repeat;
}
#toppage .trouble .cont2 .intro h4 { text-align: center;}
#toppage .trouble .cont2 .intro h4 span {
    display: block;
    margin-bottom: 30px;
    padding-bottom: 15px;
    text-align: center;
    font-size: 42px;
    line-height: 200%;
    color: #fff;
    font-weight: 800;
    background: url("../images/trouble_wave.webp") no-repeat bottom center;
}
#toppage .trouble .cont2 .intro h4 b {
    margin-bottom: 40px;
    display: block;
    font-size: 74px;
    font-weight: 800;
    line-height: 120%;
    color: #f0f050;
}
#toppage .trouble .cont2 .intro .come {
    margin-bottom: 70px;
    text-align: center;
    font-size: 31px;
    line-height: 200%;
    color: #fff;
    font-weight: 800;
}
#toppage .trouble .check {
    margin: auto; width: 86%; max-width:1000px;
    display: flex; flex-direction: column; gap:25px; letter-spacing: -2.6px;
}
#toppage .trouble .check p {
    display: flex;
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .trouble .check p span:nth-child(1) {
    padding: 35px 10px 35px 110px;
    width: calc(100% - 250px);
    font-size: 34px;
    font-weight: 800;
    line-height: 120%;
    color:#0039a7;
    background: url("../images/check.webp") no-repeat 24px center;
}
#toppage .trouble .check p span:nth-child(2) {
    position: relative;
    padding:15px 0 0 20px;
    width: 320px;
    text-align: center;
    font-weight: 800;
    line-height: 230%;
    background: url("../images/bg_darkblue1.webp") no-repeat;
    background-size: cover;
}
#toppage .trouble .check p span:nth-child(2)::before {
    display: block; clear: both; content:"";
    position: absolute; top:0; left: -1px;
    width:auto; height:100%; aspect-ratio: 174 / 294;
    background: url("../images/bg_slash.webp") no-repeat;
    background-size: 100% auto;
}
#toppage .trouble .check p span:nth-child(2) small {
    display: block;
    font-size: 22px;
    color: #fff;
}
#toppage .trouble .check p span:nth-child(2) b {
    font-size: 42px;
    color: #f0f050;
}
@media only screen and (max-width:1085px){
    #toppage .trouble .check p span:nth-child(2) { padding:40px 0 0 40px;}
}
@media only screen and (max-width:1000px){
    #toppage .trouble .cont2 .intro::before,
    #toppage .trouble .cont2 .intro::after { width: 300px; top:100px;}
    #toppage .trouble .cont2 .intro::before { left:-80px; }
    #toppage .trouble .cont2 .intro::after { right:-80px; }
}
@media only screen and (max-width:900px){
    #toppage .trouble .check p span:nth-child(2) { padding:60px 0 0 60px;}
}
@media only screen and (max-width:768px){
    #toppage .trouble .cont2 {
        background: url("../images/bg_blue4.webp") no-repeat;
    }
    #toppage .trouble .cont2 { padding: 80px 0 ;}
    #toppage .trouble .cont2 .intro::before {
        width: 100%; height:auto; aspect-ratio: 787 / 787;
        position: absolute; top:700px; left:0; right: 0; 
        background:url( "../images/trouble_bg_sp.webp")no-repeat top center;
        background-size: 110% auto;
    }
    #toppage .trouble .cont2 .intro::after { display: none}
    #toppage .trouble .cont2 .intro .come { padding-bottom:500px; }
    #toppage .trouble .check p { flex-direction: column;}
    #toppage .trouble .check p span:nth-child(1) { width: 100%;}
    #toppage .trouble .check p span:nth-child(2)::before { display: none;}
    #toppage .trouble .check p span:nth-child(2) {
        display: flex; flex-direction: row; justify-content: center; gap:10px;
        padding: 20px; width: 100%;
        text-align: center;
    }
}
@media only screen and (max-width:468px){
    #toppage .trouble .cont2 {
        padding: 50px 0 55px;
    }
    #toppage .trouble .cont2 .intro h4 span {
        margin:0 auto 20px;
        padding-bottom: 10px;
        width: 350px;
        font-size:21px;
        line-height: 200%;
        background-size: 140% auto;
    }
    #toppage .trouble .cont2 .intro h4 b {
        margin-bottom: 40px;
        font-size: 41px;
        line-height: 120%;
    }
    #toppage .trouble .cont2 .intro .come {
        padding-bottom:220px;
        font-size: 16px;
    }
    #toppage .trouble .cont2 .intro::before { top: 400px;}
    #toppage .trouble .check{ position: relative; z-index: 99;}
    #toppage .trouble .check p {
        flex-direction: column;
    }
    #toppage .trouble .check p span:nth-child(1) {
        padding:15px 0 15px 80px;
        font-size: 24px;
        background-size: 42px auto;
        background-position: 16px center;
    }
    #toppage .trouble .check p span:nth-child(2)::before { display: none;}
    #toppage .trouble .check p span:nth-child(2) {
        display: flex; flex-direction: row; justify-content: center; gap:10px;
        padding: 20px; width: 100%;
        text-align: center;
    }
    #toppage .trouble .check p span:nth-child(2) small {
        font-size:21px;
    }
    #toppage .trouble .check p span:nth-child(2) b {
        font-size: 32px;
    }
}
@media only screen and (max-width:375px){
    #toppage .trouble .cont2 .intro .come {
        font-size: 15px;
    }
    #toppage .trouble .check p span:nth-child(1) {
        letter-spacing: -1px;
    }
}
@media only screen and (max-width:320px){
    #toppage .trouble .cont2 .intro h4 span {
        width: 300px;
        font-size:18px;
    }
    #toppage .trouble .cont2 .intro h4 b {
        font-size:36px;
    }
    #toppage .trouble .cont2 .intro .come {
        padding-bottom:160px;
        font-size: 13px;
    }
    #toppage .trouble .cont2 .intro::before {
        top: 350px;
    }
    #toppage .trouble .check p span:nth-child(1) {
        font-size: 20px;
    }
    #toppage .trouble .check p span:nth-child(2) small {
        font-size:18px;
    }
    #toppage .trouble .check p span:nth-child(2) b {
        font-size: 28px;
    }
}



/* RECOMEND -------------------------------------*/
#toppage .recomend {}
#toppage .recomend .obi {
    position: relative;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #0039a7;
    line-height: 80px;
    text-align: center;
    background: linear-gradient(to right, #f7f7a7, #f0f050, #f0f050);
}
#toppage .recomend .obi::before {
    position: absolute; left: 0; right: 0; bottom:-15px; z-index: 99;
    display: block; clear: both; content:"";
    margin: auto;
    width: 0; height: 0;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 15px solid #f0f050;
    border-bottom: 0;
}
#toppage .recomend .tit {
    position: relative;
    padding: 82px 0;
    background: url("../images/bg_darkblue1.webp") no-repeat;
    background-size: 100% 100%;
}
#toppage .recomend .tit::before {
    position: absolute; bottom: -1px; left: 0;
    display: block; clear: both; content:"";
    width: 100%; height: auto; aspect-ratio: 300 / 39;
    background: url("../images/white.svg") no-repeat center top;
    background-size: 101%  auto;
}
#toppage .recomend .tit h3 { position: relative; margin: auto; width: 70%; max-width: 487px;}
#toppage .recomend .tit h3::before,
#toppage .recomend .tit h3::after {
    position: absolute;
    display: block; clear: both; content:"";
}
#toppage .recomend .tit h3::before {
    bottom:-90px; right: -250px;
    width: 275px; height: auto; aspect-ratio: 275 / 427;
    background: url("../images/character1.webp") no-repeat;
    background-size: 100% auto;
}
#toppage .recomend .tit h3::after {
    top:27px; right: -370px;
    width: 174px; height: auto; aspect-ratio: 174 / 101;
    background: url("../images/recomend_fukidasi.webp") no-repeat;
    background-size: 100% auto;
}
#toppage .recomend .den_pop {
    position: absolute; bottom: -50px; right: -340px;
    display: block;
    text-align: left;
    font-size: 15px;
    color: #0039a7;
    line-height:130%;
}
#toppage .recomend .den_pop a {
    display: block;
    margin-top: 5px;
    padding: 3px 13px;
    color: #fff;
    font-size: 11px;
    background: #009ce1;
    border-radius: 50px;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .recomend .come {
    padding: 75px 0 100px;
    font-size: 50px;
    font-weight: 800;
    color: #0039a7;
    text-align: center;
    line-height: 150%;
    background:url("../images/recomend_bg_pc.webp") no-repeat top center;
}
#toppage .recomend .come b { font-size: 130%; letter-spacing: -2px;}
#toppage .recomend .come img {
    display: inline-block;
    position: relative; top: -10px;
    width: 100%; max-width: 260px; height: auto; aspect-ratio: 163 / 89;
}
@media only screen and (min-width:768px){
    #toppage .recomend .den_pop a:hover { background: #1f3b8f; text-decoration: none;}
}
@media only screen and (max-width:1180px){
    #toppage .recomend .obi { font-size:30px;}
    #toppage .recomend .tit h3 { max-width:350px;}
    #toppage .recomend .tit h3::before { bottom:-90px; right:-150px; width:180px; }
    #toppage .recomend .tit h3::after { top:27px; right: -240px; width: 120px; }
    #toppage .recomend .den_pop { bottom: -80px; right: -250px;}
}
@media only screen and (max-width:768px){
    #toppage .recomend .tit { padding: 30px 0 260px;}
    #toppage .recomend .tit h3::before { bottom:-300px; right:inherit; left:-30px; width:180px; }
    #toppage .recomend .tit h3::after { top:inherit; bottom:-120px; right:0; width: 130px; }
    #toppage .recomend .den_pop { bottom: -200px; right: 0; color: #fff;}
    #toppage .recomend .come { 
        padding: 70px 0 50px;
        font-size: 25px;
        background:url("../images/recomend_bg_sp.webp") no-repeat top center;
        background-size: 494px auto;
    }
    #toppage .recomend .come b { font-size: 130%;}
    #toppage .recomend .come img { max-width: 161px;}
}
@media only screen and (max-width:468px){
    #toppage .recomend .obi {
        font-size: 21px;
        line-height: 42px;
    }
}
@media only screen and (max-width:375px){
    #toppage .recomend .tit h3::before { left:-40px;}
}
@media only screen and (max-width:320px){
    #toppage .recomend .obi { font-size:18px;}
    #toppage .recomend .tit h3::before { left:-50px;}
    #toppage .recomend .tit h3::after { right: -20px;}
    #toppage .recomend .den_pop { right: -20px;}
    #toppage .recomend .come b { font-size: 120%;}
}



/* CASE ----------------------------------------*/
#toppage .case .slide_cont { position: relative;}
#toppage .case .list {
    margin: auto;
    width: 100%; width: 840px !important;
    max-width:none;
}
#toppage .case .list .slick-list { overflow:visible;}
#toppage .case .box {
    position: relative;
    margin: 0 20px;
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .case .box .pic img { aspect-ratio: 400 / 198; object-fit: cover;}
#toppage .case .box .cont {
    display: flex; flex-direction:column; gap:32px;
    padding:25px 20px;
    color:#fff;
    background: url("../images/bg_darkblue1.webp") no-repeat;
    background-size: 100% 100%;
}
#toppage .case .box h4 { font-size:22px; letter-spacing: -1px; font-weight:700; line-height:180%;}
#toppage .case .box .come b { font-size:106%; font-weight:700;}
#toppage .case .box .come p {
    display: flex; flex-wrap: wrap;
    font-size: 75%; font-weight: 500; line-height: 180%;
}
#toppage .case .box .come p span:nth-child(1) { width: 65px;}
#toppage .case .box .come p span:nth-child(2) { width: calc(100% - 65px);}
@media only screen and (max-width:468px){
    #toppage .case { overflow-x: hidden; overflow-y: inherit;}
    #toppage .case .list { margin:0 auto 35px; width: 300px !important; height: 630px;}
    #toppage .case .box { margin: 0 10px;}
    #toppage .case .box h4 br { display: none;}
    #toppage .case .box .cont { height: 450px;}
}



/* VIDEO --------------------------------------*/
#toppage .video { padding:185px 0 150px;}
#toppage .video .pic { 
    margin: auto; width: 82%; max-width: 760px;
    border-radius: 5px;
}
@media only screen and (max-width:468px){
    #toppage .video { padding:40px 0 65px;}
}



/* SERVICE --------------------------------------*/
#toppage .service {
    position: relative;
    padding:80px 0 250px;
    background:url("../images/bg_blue2.webp") no-repeat;
    background-size: cover;
}
#toppage .service h3 { margin-bottom: 55px;}
#toppage .service h3 span.en { color:rgba(255,255,255,0.30);}
#toppage .service h3 b { color: #fff;}
#toppage .service .come {
    margin-bottom: 85px;
    font-size: 51px;
    font-weight: 800;
    color: #fff;
    line-height: 220%;
    text-align: center;
}
#toppage .service .come span {
    padding: 10px 25px;
    line-height: 80px;
    background-image: linear-gradient(90deg, #3361b9, #0039a7);
}
#toppage .service .come span.rp { padding-right: 10px !important;}
#toppage .service .come b { color: #ece761;}
#toppage .service .tool { position: relative;}
#toppage .service .list {
    display: flex; flex-wrap: wrap; justify-content: center; gap:30px 30px;
    margin: auto;
    width:96%; max-width: 1075px;
}
#toppage .service .box { 
    position: relative;
    width:calc(33.3% - 20px);
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .service .box h4 {
    position: relative;
    padding: 15px;
    font-size: 175%;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
}
#toppage .service .box h4::before {
    position: absolute; left: 0; right: 0; bottom:-15px;
    display: block; clear: both; content:"";
    margin: auto;
    width: 0; height: 0;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 15px solid #fff;
    border-bottom: 0;
}
#toppage .service .box:nth-child(1) h4 {background: linear-gradient(to right, #a0df61, #78d21e);}
#toppage .service .box:nth-child(2) h4 {background: linear-gradient(to right, #c388c3, #aa55aa);}
#toppage .service .box:nth-child(3) h4 {background: linear-gradient(to right, #4cbaea, #039de1);}
#toppage .service .box:nth-child(1) h4::before { border-top-color: #8cd83f;}
#toppage .service .box:nth-child(2) h4::before { border-top-color: #b76fb7;}
#toppage .service .box:nth-child(3) h4::before { border-top-color: #24aae5;}
#toppage .service .box .cont {
    display: flex; flex-direction:column; gap:25px;
    padding: 35px 10px 35px;
}
#toppage .service .box .bana img { margin: auto; max-width: 170px;}
#toppage .service .box h5 {
    color: #1f3b8f;
    text-align: center;
    font-size:21px;
    font-weight: 800;
    line-height: 180%;
}
#toppage .service .character {
    position:absolute; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 507px; height: auto; aspect-ratio: 507 / 203;
}
#toppage .service .character .img1 {
    position: absolute; top:0; left: 0;
    width: 100%; height: auto; max-width: 308px; aspect-ratio: 308 / 110;
}
#toppage .service .character .img1_sp { display: none;}
#toppage .service .character .img2 {
    position: absolute; right: 0; bottom: 0;
    width: 100%; height: auto; max-width: 231px; aspect-ratio: 231 / 203;
}
@media only screen and (max-width:1220px){
    #toppage .service .box h5 { font-size:125%;}
}
@media only screen and (max-width:1000px){
    #toppage .service .box { width:calc(50% - 30px);}
}
@media only screen and (max-width:768px){
    #toppage .service { padding:50px 0 190px;}
    #toppage .service h3 { margin-bottom:53px;}
    #toppage .service .come { margin-bottom: 53px; font-size: 25px; line-height: 220%;}
    #toppage .service .come span { padding: 5px 20px; line-height: 38px;}
    #toppage .service .come span.rp { padding-right: 5px !important;}
}
@media only screen and (max-width:768px){
    #toppage .service h3 { margin-bottom: 40px;}
    #toppage .service .list { flex-direction: column; width: 82%;}
    #toppage .service .box { width:100%;}
    #toppage .service .box h4 { padding: 10px 15px; font-size: 162.5%;}
    #toppage .service .box .cont { padding: 20px 20px 35px;}
    #toppage .service .box .bana img { max-width: 150px;}
    #toppage .service .box h5 { font-size:130%;}
}
@media only screen and (max-width:507px){
    #toppage .service .character {
        position:absolute; left: 0; right: 0; bottom: 0;
        margin: auto;
        width: 321px; height: auto; aspect-ratio: 321 / 170;
    }
    #toppage .service .character .img1 { display: none;}
    #toppage .service .character .img1_sp {
        display: block;
        position: absolute; top:0; left: 0;
        width: 100%; height: auto; max-width: 166px; aspect-ratio: 166 / 100;
    }
    #toppage .service .character .img2 {
        position: absolute; right: 0; bottom: 0;
        width: 100%; height: auto; max-width: 177px; aspect-ratio: 177 / 150;
    }
}
@media only screen and (max-width:468px){
    #toppage .service { padding:25px 0 190px;}
    #toppage .service .tool h4 { font-size: 150%;}
    #toppage .service .box h5 { font-size:20px;}
}
@media only screen and (max-width:375px){
    #toppage .service .box .cont { padding: 20px 0 35px;}
    #toppage .service .character { width: 310px;  }
}
@media only screen and (max-width:320px){
    #toppage .service .come { ont-size: 24px;}
    #toppage .service .come span { padding: 5px 15px;}
    #toppage .service .come span.rp { padding-right: 5px !important;}
    #toppage .service .box h5 { font-size:100%;}
    #toppage .service .character { width: 265px;  }
    #toppage .service .character .img1_sp { max-width: 126px; }
    #toppage .service .character .img2 { max-width: 157px;}
}



/* FAQ --------------------------------------*/
#toppage .faq {
    padding: 120px 0 125px;
}
#toppage .faq .faq_list { margin: auto; width: 90%; max-width: 1050px;}
#toppage .faq .tab { display: flex; flex-wrap: wrap;}
#toppage .faq .tab li {
    cursor: pointer;
    width: 33.3%;
    font-size: 25px;
    font-weight: 700;
    line-height: 65px;
    text-align: center;
    color: #0039a7;
}
#toppage .faq .tab li + li { border-left: 3px solid #d9f0fb;}
#toppage .faq .tab li.active {
    color: #fff;
    background-image: linear-gradient(90deg, #3361b9, #0039a7);
}
#toppage .faq .cont {
    position: relative;
    display: flex; flex-direction: column; gap:20px;
    padding: 50px;
    background:rgba(0,156,225,0.15);
}
#toppage .faq .disnon { display: none;}
#toppage .faq h4 {
    font-size: 22px;
    font-weight: 800;
    color: #0039a7;
}
#toppage .faq dl + h4 { margin-top: 10px;}
#toppage .faq dl dt {
    position: relative;
    min-height: 60px;
    padding: 12px 75px 10px;
    color: #0039a7;
    font-size: 22px;
    font-weight: 700;
    background: #fff url("../images/faq_q.webp") no-repeat 15px 15px;    
}
#toppage .faq dl dt::before {
    cursor: pointer;
    display: block; clear: both; content:"";
    position: absolute; top: 0; bottom: 0; right: 20px;
    margin: auto;
    width: 35px; height: 36px;
    background: url("../images/pull_btn.webp") no-repeat left top;
    background-size: auto 100% !important;
}
#toppage .faq dl dt.active::before {
    background-position: right top;
}
#toppage .faq dl dd { display: none; background:#fff; }
#toppage .faq dl dd .come { padding: 0 30px 30px; }
#toppage .faq .more-btn {
    cursor: pointer;
    width: 100%; height: 25px;
    text-indent: -9999px;
    background: url("../images/faq_more.webp") no-repeat center center;
    border: none;
}
@media only screen and (min-width:768px){
    #toppage .faq .tab li:hover { opacity: 0.7;}
}
@media only screen and (max-width:468px){
    #toppage .faq { padding: 60px 0;}
    #toppage .faq h3 { margin-bottom: 40px;}
    #toppage .faq .tab li { font-size: 14px; line-height: 43px;}
    #toppage .faq h4 { font-size: 18px; line-height: 100%;}
    #toppage .faq .cont { padding: 15px 15px 20px;}
    #toppage .faq dl dt { min-height:40px; padding: 7px 45px; font-size: 100%; background-size: 23px auto;}
    #toppage .faq dl dt::before { right: 15px; width: 25px; height: 25px;}
}
@media only screen and (max-width:320px){
    #toppage .faq .tab li { font-size:12px;}
}



/* CONTACT --------------------------------------*/
#toppage .contact {
    padding: 0 0 135px; 
    background: url("../images/bg_darkblue2.webp") no-repeat;
    background-size: cover;
}
#toppage .contact .fome_head img { isplay: block; width: 100%; height: auto; image-rendering: smoothe !important;}
#toppage .contact .fome_head .mid span { display: block; margin: auto; width: 90%; text-indent: -9999px; background-size: 100% auto !important;}
#toppage .contact .fome_head .mid span { max-width: 818px; aspect-ratio: 818 / 460; background:url("../images/download_tit_pc.webp") no-repeat; background-size: 100% auto !important;}
#toppage .contact span { position: relative;}
#toppage .contact #satori__creative_container {
    margin: auto; padding: 20px;
    width: 100%; max-width: 1100px;
    background: #fff;
}
@media only screen and (max-width:468px){
    #toppage .contact { padding: 0 0 80px; }
    #toppage .contact .fome_head .mid span { max-width: 786px; aspect-ratio: 786 / 614; background:url("../images/download_tit_sp.webp") no-repeat;}
}