@charset "utf-8";

/************************************** import **************************************/
/* common css */
@import url("../common/common.css");

/* component css */
@import url("../common/component.css");

/* component css */
@import url("../common/layout.css");


body { min-width: auto; }

/************************************** main **************************************/
.sec-width {width:1000px}

@media(max-width:1000px) {
    .sec-width {width:100%; padding:0 15px}
}

@media(max-width: 500px) {
    .sec-width {padding: 0 10px;}
}

.tit-area {text-align: center; padding:90px 0;}
.tit-area .sub-tit { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.6px; background: -webkit-linear-gradient(45deg, #37eaff, #642eff 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;word-break: keep-all;  }
.tit-area .sub-tit br { display: none; }
.tit-area .main-tit { padding-top:20px; font-size: 3.5rem; font-weight: 600; word-break: keep-all; }
.tit-area .main-tit br { display: none; }
.tit-area .info-txt {color:#4e57c9; font-size:1.4rem; font-weight:600; padding-top:40px;}
.tit-area .info-txt > .material-icons {padding-right:5px}
.tit-area .info-txt br {display:none;}


@media(max-width:768px) {
    .tit-area .main-tit {font-size:2.7rem;}
    .tit-area .sub-tit {font-size:1.3rem}
    .tit-area .info-txt {font-size:1.3rem; padding-top:20px}
}

@media(max-width:500px) {
    .tit-area .main-tit{font-size:2.2rem; padding-top:10px;}
    .tit-area .sub-tit {font-size:1.2rem;}
    .tit-area .info-txt br {display:block;}
}

.content-area { padding-bottom:80px}
.content-area .content-box {float:left; width:calc(50% - 18px); margin-right:35px; position:relative;text-align: center;border:1px solid #b3b6c9; border-bottom-right-radius: 30px; cursor:pointer; transition: box-shadow .3s ease; background:#fff;}
.content-area .content-box .left-box, 
.content-area .content-box .right-box {padding:50px}
.content-area .content-box .select-check {display:none;}
.content-area .content-box:hover {box-shadow: 0 0 20px 0px rgba(0,0,0,0.08);}
.content-area .content-box.select {border:5px solid transparent; border-bottom-right-radius: 30px; background-image:-webkit-linear-gradient(#ffffff, #ffffff), -webkit-linear-gradient(45deg, #37eaff, #642eff 110%); border-image-slice: 1; background-origin: border-box; background-clip: content-box, border-box;}
.content-area .content-box:last-child {margin-right:0}
.content-area .content-box .select-check {display:none;}
.content-area .content-box.select .select-check {display:block; background:#fff; width:55px; height:55px; color:#fff; background:linear-gradient(45deg, #37eaff, #642eff 110%); border-radius: 50%; position:absolute; top:-30px; left:50%; transform: translateX(-50%); padding-top:7px;border:6px solid #fff;}
.content-area .content-box.select .select-check  > .material-icons {font-size:3rem;}
.content-area .content-box .ico-img {margin-bottom:50px}
.content-area .content-box .ico-img > img {width:106px; height:106px;}
.content-area .content-box .box-tit {font-size:1.9rem; font-weight:600; padding-bottom:20px}
.content-area .content-box .box-sub {font-size:1.5rem; font-weight:500; line-height:24px}

.section.edit-home .btn-wrap {text-align: center;}
.section.edit-home .btn-wrap button { position: relative; padding: 15px 70px; transition: padding .2s ease; min-width:inherit; font-size: 2rem; font-weight: 600; height:55px; border-radius: 30px;}
.section.edit-home .btn-wrap button .material-icons { font-size:2.5rem; position: absolute; top: 14px; right:60px; opacity: 0; transition: opacity .2s, right .2s; }
.section.edit-home .btn-wrap button:hover { padding: 15px 90px 15px 70px;  }
.section.edit-home .btn-wrap button:hover .material-icons { right: 50px; opacity: 1; }


@media(max-width:1000px) {
    .tit-area {padding:60px 0;}
    .content-area .content-box {margin-right:20px; width:calc(50% - 10px)}
    .content-area .content-box .left-box, .content-area .content-box .right-box{padding:50px 25px}
    .content-area .content-box .box-sub {font-size:1.4rem;}
    .content-area {padding-bottom:60px;}
}

@media(max-width:768px) {
    .tit-area {padding:45px 0;}
    .content-area .content-box .left-box, .content-area .content-box .right-box{padding:35px 20px}
    .content-area .content-box .ico-img {margin-bottom:30px;}
    .content-area .content-box .ico-img > img {width:90px; height:91px;}
    .content-area .content-box .box-tit {font-size:1.7rem}
    .content-area {padding-bottom:45px;}
    .section.edit-home .btn-wrap {margin-bottom:45px}
    .section.edit-home .btn-wrap button {height:45px; font-size:1.7rem; padding:8px 60px;}
    .section.edit-home .btn-wrap button:hover {padding: 8px 75px 8px 60px;}
    .section.edit-home .btn-wrap button .material-icons {font-size:2.2rem; top:12px; right:50px}
    .section.edit-home .btn-wrap button:hover .material-icons {right:40px}
}

@media(max-width:650px) {
    .content-area .content-box {float:none; width:100%; margin-right:0; margin-bottom:30px} 
    .content-area .content-box .left-box, .content-area .content-box .right-box {padding:35px 20px}
    .content-area .content-box:last-child {margin-bottom:0}
    
}

@media(max-width:500px) {    
    .content-area .content-box .left-box, .content-area .content-box .right-box {padding:20px;}
    .content-area .content-box .box-tit {padding-bottom:15px; font-size:1.6rem;}
    .content-area .content-box .ico-img > img {width:80px; height:81px;}
    .content-area .content-box.select .select-check {width:45px; height:45px; top:-26px; border:5px solid #fff;}
    .content-area .content-box.select .select-check > .material-icons {font-size:2.3rem}
    .content-area .content-box .box-sub br {display:none;}
}