/* =========================================================================================
Home
=========================================================================================*/
#toppage h3 {
    display: flex; flex-direction: column; align-items: center; gap:20px;
    text-align: center;
}
#toppage h3 b,
#toppage h3 small { position: relative;}
#toppage h3 small {
    padding: 5px 40px;
    font-size:187.5%;
    background: #fff;
    border: 2px solid #404040;
    border-bottom: 6px solid #404040;
    border-radius: 30px;
}
#toppage h3 small::before {
    position: absolute; left: 0; right: 0; bottom:-19px;
    display: block; clear: both; content:"";
    margin: auto;
    width: 23px; height: 19px;
    background: url("../images/common/kazari_fukidasi.png")
}
#toppage h3 b {
    padding: 0 40px 25px;
    font-size: 287.5%;
    font-weight: 700;
}
#toppage h3 b::before {
    position: absolute; left: 0; right: 0; bottom:0;
    display: block; clear: both; content:"";
    margin: auto;
    width:100%; height: 10px;
    background: #FFE960;
}
#toppage h4 {
    padding: 5px;
    font-size:187.5%;
    text-align: center;
    background: #fff;
    border: 2px solid #404040;
    border-bottom: 6px solid #404040;
    border-radius: 30px;
}
#toppage .catch { font-size: 187.5%; text-align: center;}
@media only screen and (max-width:768px){
    #toppage h3 small { font-size:150%;}
    #toppage h3 b { font-size: 250%; }   
    #toppage h4 { font-size:150%;}
    #toppage .catch { font-size:150%;}
}
@media only screen and (max-width:468px){
    #toppage h3 small { padding: 5px 20px; font-size:87.5%;}
    #toppage h3 b { padding: 0 0 20px; font-size: 187%;}
    #toppage h4 { padding: 5px 20px; font-size:125%;}
    #toppage .catch { font-size:125%;}
}

/* Mainimg */
#toppage .mainimg {
    background: url("../images/common/mainimg_bg.jpg") no-repeat;
    background-position: center bottom;
    background-size:cover;
}
#toppage .mainimg .inner {
    background: url("../images/common/mainimg_illust.png") no-repeat;
    background-position:right center;
    background-size:auto 100%;
}
#toppage .mainimg .inner img { width: 48%; max-width: 574px; height:  auto;}
@media only screen and (max-width:768px){
    #toppage .mainimg .inner { background-size:auto 90%;}
}
@media only screen and (max-width:468px){
    #toppage .mainimg .inner img { width: 70%; height:  auto;}
    #toppage .mainimg .inner { padding-bottom: 330px; background-position: right bottom; background-size:90% auto;}
}


/* About  */
#toppage .about {background: linear-gradient(#FFF794, #ffffff);}
#toppage .about .inner::before,
#toppage .about .inner::after {
    position: absolute;
    display: block; clear: both; content:"";
    background-size: 100% auto !important;
}
#toppage .about .inner::before {
    top:0; left:0;
    width: 99px; height: 99px;
    background:url("../images/common/kazari_01.png") no-repeat;
}
#toppage .about .inner::after {
    top:100px; right: 0;
    width: 79px; height: 105px;
    background:url("../images/common/kazari_02.png") no-repeat;
}
#toppage .about .box { display: flex; align-items: center; gap:40px;}
#toppage .about .box .photo {width: 40%;}
#toppage .about .box .come {width: calc(60% - 40px); padding-top: 12%;}
@media only screen and (max-width:768px){
    #toppage .about .inner::before {
        top:0; left:0;
        width: 60px; height: 60px;
    }
    #toppage .about .inner::after {
        top: inherit; bottom: 0;
        width: 50px; height:70px;
        background:url("../images/common/kazari_02.png") no-repeat;
    }
}
@media only screen and (max-width:468px){
    #toppage .about .box { flex-direction: column;}
    #toppage .about .box .photo,
    #toppage .about .box .come { width: 100%; padding-top: 0;}
}



/* Job */
#toppage .job .inner { display: flex; flex-direction: column; gap:80px;}
#toppage .job .inner::before{
    position: absolute;
    display: block; clear: both; content:"";
    top:100px; left:0;
    width: 204px; height: 490px;
    background:url("../images/common/illust_02.png") no-repeat;
    background-size: 100% auto !important;
}
#toppage .job .job_list {
    position: relative;
    display: flex; flex-direction: column; gap:40px;
}
#toppage .job .job_list::before,
#toppage .job .job_list::after {
    position: absolute;
    display: block; clear: both; content:"";
    background-size: 100% auto !important;
}
#toppage .job .job_list::before {
    bottom:-150px; left: -100px;
    width: 204px; height: 490px;
    background:url("../images/common/kazari_04.png") no-repeat;
}
#toppage .job .job_list::after {
    top:100px; right: -100px;
    width: 204px; height: 463px;
    background:url("../images/common/kazari_03.png") no-repeat;
}
#toppage .job .job_list .box {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap:40px;
    margin: auto;
    max-width: 800px;
    background: rgba(255,255,255,0.60);
}
#toppage .job .job_list .photo { width: 30%;}
#toppage .job .job_list .photo img { width:100%; height: auto;}
#toppage .job .job_list .cont { width: calc(100% - 30% - 40px);}
#toppage .job .job_list .mid { margin-bottom: 10px; font-size: 125%; font-weight: 700;}
#toppage .job .katuyaku {
    position: relative;
    display: flex; flex-direction: column; gap:50px;
    padding:60px 5% 30px;
    background:rgba(255,233,96,0.20);
}
#toppage .job .katuyaku h4 {
    position: absolute; top: -30px; left: 0; right: 0;
    margin: auto; max-width: 300px;
}
#toppage .job .katuyaku_list { 
    display: flex; flex-wrap: wrap; justify-content: center; gap:10px;
}
#toppage .job .katuyaku_list p {
    padding: 5px 15px;
    line-height: 130%;
    background: #fff;
    border-radius: 10px;
}
@media only screen and (max-width:868px){
    #toppage .job .inner::before {
        top:100px; left:0;
        width: 150px; height: 200px;
    }
}
@media only screen and (max-width:768px){
    #toppage .job .inner::before {
        top:100px; left:-50px;
        width: 150px; height: 200px;
    }
    #toppage .job .catch { font-size: 150%;}
    #toppage .job .job_list { flex-direction: column;}
    #toppage .job .job_list::before {
        bottom:-100px; left:0;
        width: 100px; height: 240px;
    }
    #toppage .job .job_list::after {
        top:100px; right: 0;
        width: 100px; height:240px;
    }
    #toppage .job .job_list .box {
        width:100%;
    }
}
@media only screen and (max-width:468px){
    #toppage .job .inner { gap:50px;}
    #toppage .job .inner::before {
        top:20px; left:-20px;
        width: 100px; height:150px;
    }
    #toppage .job .catch { font-size: 125%;}
    #toppage .job .job_list { gap:60px;}
    #toppage .job .job_list .box { flex-direction: column; gap:0;}
    #toppage .job .job_list .photo { margin: auto; width: 100%; max-width: 150px;}
    #toppage .job .job_list .cont { width: 100%;}
    #toppage .job .job_list .mid { text-align: center; margin-top: 20px;}
    #toppage .job .katuyaku { margin-top: 60px;}
    #toppage .job .katuyaku_list p { width: 100%;}
}



/* Voice */
#toppage .voice { background:url("../images/common/bg_line.jpg");}
#toppage .voice .inner { display: flex; flex-direction: column; gap:80px;}
#toppage .voice .inner::before {
    position: absolute;
    display: block; clear: both; content:"";
    top:-90px; right: -50px;
    width:368px; height:350px;
    background:url("../images/common/illust_03.png") no-repeat;
    background-size: 100% auto !important;
}
#toppage .voice h3 { font-size: 187.5%;}
#toppage .voice .btn { margin-top:0;}
@media only screen and (max-width:968px){
    #toppage .voice .inner::before {
        top:-50px; right: -20px;
        width:200px; height:200px;
    }
}
@media only screen and (max-width:868px){
    #toppage .voice .inner::before {top:0;}
}
@media only screen and (max-width:768px){
    #toppage .voice .inner { gap:60px;}
}
@media only screen and (max-width:468px){
    #toppage .voice .inner::before { width: 150px; height: 150px; top:80px; right: -40px;}
}   



/* How to  */
#toppage .howto .inner { display: flex; flex-direction: column; gap:80px;}
#toppage .howto .inner::before,
#toppage .howto .inner::after {
    position: absolute;
    display: block; clear: both; content:"";
    background-size: 100% auto !important;
}
#toppage .howto .inner::before {
    top:-80px; left: -50px;
    width: 175px; height: 402px;
    background:url("../images/common/illust_04.png") no-repeat;
}
#toppage .howto .inner::after {
    top:100px; right: 0;
    width: 75px; height: 72px;
    background:url("../images/common/kazari_05.png") no-repeat;
}
#toppage .howto .howto_list { display: flex; flex-direction: column; gap:60px;}
#toppage .howto .box { display: flex; flex-direction: column; gap:20px;}
#toppage .howto .box h4 {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 250px;
    font-size: 125%;
    
}
#toppage .howto .box h4::before {
    position: absolute; top: -20px; left: 20px;
    display: block; clear: both; content:"";
    width: 50px; height: 50px;
    background: url("../images/point.png") no-repeat;
    background-size: auto 100%;
    transform: rotate(-20deg);
}
#toppage .howto .howto_list .zu { text-align: center;}
#toppage .howto .howto_list .zu img { margin: auto; width: 100%; max-width: 1000px; height: auto;}
@media only screen and (max-width:1200px){
    #toppage .howto .box:nth-child(1)::before { bottom: -80px; left:-60px; }
    #toppage .howto .box:nth-child(2)::before { bottom: -80px; right: -40px; }
}
@media only screen and (max-width:768px){
    #toppage .howto .inner::before {
        top:60px; left:-30px;
        width: 100px; height:230px;
    }
}
@media only screen and (max-width:468px){
    #toppage .howto .inner { gap:50px;}
    #toppage .howto .js-scrollable-wrap { white-space: nowrap;}
    #toppage .howto .js-scrollable {
        word-break: break-all;
        table-layout: fixed;
        display: block;
        overflow: scroll;
    }
    #toppage .howto .howto_list .zu img { width: auto; max-width: inherit; height: 550px !important;}
}



/* Answer  */
#toppage .answer { background: #FFF794;}
#toppage .answer .inner { display: flex; flex-direction: column; gap:60px;}
#toppage .answer .inner::after,
#toppage .answer .inner::before {
    position: absolute; bottom: 0;
    display: block; clear: both; content:"";
    width: 202px; height: 204px;
    background-size: 100% auto !important;
}
#toppage .answer .inner::after {
    left: 0;
    background: url("../images/common/illust_06.png") no-repeat;
}
#toppage .answer .inner::before {
    right: 0;
    background: url("../images/common/illust_07.png") no-repeat;
}
#toppage .answer h3 { font-size: 187.5%;}
#toppage .answer .answer_list {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap:60px 60px;
    margin: auto; max-width: 1000px;
}
#toppage .answer .box { display: flex; flex-direction: column; gap:20px; width: calc(50% - 30px);}
#toppage .answer .box h4 {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 280px;
    font-size: 125%;
}
#toppage .answer .box .come { text-align: left;}
@media only screen and (max-width:768px){
    #toppage .answer .inner { padding-bottom: 230px;}
}
@media only screen and (max-width:468px){
    #toppage .answer .inner { gap:50px; padding-bottom: 100px;}
    #toppage .answer .inner::after,
    #toppage .answer .inner::before { width: 100px; height: 100px; }
    #toppage .answer .answer_list { flex-direction: column; padding: 0;}
    #toppage .answer .box { width:100%;}
    #toppage .answer .come { width: 100%; font-size: 100%; text-align: left;}
    #toppage .answer .come br { display: none;}
}



/* Know  */
#toppage .know .inner { display: flex; flex-direction: column; gap:80px;}
#toppage .know .inner::before {
    position: absolute; left: 0; bottom: 0;
    display: block; clear: both; content:"";
    width:288px; height:233px;
    background: url("../images/common/illust_05.png") no-repeat;
    background-size: 100% auto !important;
}
#toppage .know .come {
    margin: auto;
    width: 80%;
    font-size: 125%;
}
@media only screen and (max-width:1200px){
    #toppage .know .inner { padding-bottom: 250px;}
}
@media only screen and (max-width:468px){
    #toppage .know .inner { gap:50px; padding-bottom: 100px;}
    #toppage .know .inner::before { width: 130px; height: 100px; }
    #toppage .know .come { width: 100%; font-size: 100%; text-align: left;}
    #toppage .know .come br { display: none;}
}



/* Banner  */
#toppage .banner { margin: auto; width: 100%; padding: 40px; padding-left: 300px; background: #f6f6f6; border-radius: 30px;}
#toppage .banner .banner_list { display: flex; flex-wrap: wrap; gap:20px;}
#toppage .banner .banner_list p {
    width:calc(25% - 15px);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
#toppage .banner .banner_list p img { width: 100%; height: auto;}
@media only screen and (max-width:1200px){
    #toppage .banner { padding: 40px;}
}
@media only screen and (max-width:468px){
    #toppage .banner { padding: 20px;}
    #toppage .banner .banner_list p { width:calc(50% - 20px);}
}