@charset "utf-8";
/*!
 * service CSS
 * ---------------------------------------------
 * 下層ページのcss
 * 
 */

/*===================================
	service__menu	
=====================================*/

.service__menu {
    border-bottom: solid 6px;
    font-size: 0;
}
.service__menu li {
    display: inline-block;
	vertical-align: top;
    width: 188px;
    margin-right: 10px;
    text-align: center;
    font-size: 16px;
}
.service__menu li:nth-last-of-type(1) {
    margin-right: 0;
}
.service__menu a {
    display: block;
    height: 60px;
    padding-top: 20px;
    line-height: 1.2;
    border-radius: 5px 5px 0 0;
    border-bottom: solid 2px #fff;
    background: #f0eee8;
    transition: .7s;
}
.service__menu li.current a {
    color: #fff !important;
    pointer-events: none;
}
.pc .service__menu a:hover {
    opacity: .7;
}
.confidentialDocuments .service__menu,
.confidentialDocuments .service__menu li.current a {
    border-bottom-color: #408ff0;
}
.businessPaper .service__menu,
.businessPaper .service__menu li.current a {
    border-bottom-color: #13b5b1;
}
.cardboard .service__menu,
.cardboard .service__menu li.current a {
    border-bottom-color: #e0990f;
}
.schoolRegion .service__menu,
.schoolRegion .service__menu li.current a {
    border-bottom-color: #8fc32c;
}
.atHome .service__menu,
.atHome .service__menu li.current a {
    border-bottom-color: #fd8391;
}
.service__menu li:nth-of-type(1) a {
    color: #408ff0;
}
.service__menu li:nth-of-type(2) a {
    color: #13b5b1;
}
.service__menu li:nth-of-type(3) a {
    color: #e0990f;
}
.service__menu li:nth-of-type(4) a {
    color: #8fc32c;
}
.service__menu li:nth-of-type(5) a {
    color: #fd8391;
}
.confidentialDocuments .service__menu li.current a {
    background: #408ff0;
}
.businessPaper .service__menu li.current a {
    background: #13b5b1;
}
.cardboard .service__menu li.current a {
    background: #e0990f;
}
.schoolRegion .service__menu li.current a {
    background: #8fc32c;
}
.atHome .service__menu li.current a {
    background: #fd8391;
}

/*===================================
	content header	
=====================================*/

.content > header {
    height: 400px;
    padding: 50px 0 0 386px;
    background: no-repeat 0 50%;
}
.content > header h2 {
    margin-right: -40px;
    font-size: 50px;
    line-height: 1.4;
}
.content > header h2 span {
    display: block;
    margin-bottom: 0.4em;
    padding-left: 3px;
    font-size: 14px;
    line-height: 1;
}
.content > header p {
    margin-top: 1em;
    font-size: 20px;
    line-height: 1.8;
}
.confidentialDocuments .content > header {
    background-image: url(../images/service/illust01.png);
}
.businessPaper .content > header {
    background-image: url(../images/service/illust02.png);
}
.cardboard .content > header {
    background-image: url(../images/service/illust03.png);
}
.schoolRegion .content > header {
    background-image: url(../images/service/illust04.png);
}
.atHome .content > header {
    background-image: url(../images/service/illust05.png);
}
.confidentialDocuments .content > header h2 {
    color: #408ff0;
}
.businessPaper .content > header h2 {
     color: #13b5b1;
}
.cardboard .content > header h2 {
    color: #e0990f;
}
.schoolRegion .content > header h2 {
    color: #8fc32c;
}
.atHome .content > header h2 {
    color: #fd8391;
    font-size: 48px;
}

/*===================================
	content
=====================================*/

.content {
    margin-bottom: 148px;
    padding: 40px;
    background: #f7f5f1 url(../images/base/bg_page.jpg) repeat 50% 50%;
}

/*===================================
	list__faq
=====================================*/

.list__faq {
    line-height: 1.8;
}
.list__faq > dt,.list__faq > dd {
    position: relative;
    background: #fff;
}
.list__faq > dt {
    padding: 20px 19px 24px 62px;
    border-radius: 5px 5px 0 0;
    font-size: 20px;
    font-weight: 500;
}
.list__faq > dd {
    margin-bottom: 20px;
    padding: 0 19px 26px 62px;
    border-radius: 0 0 5px 5px;
}
.list__faq > dt:before,.list__faq > dd:before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    left: 19px;
    width: 33px;
    height: 34px;
    padding-top: 5px;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}
.list__faq > dt:before {
    content: "Q";
    top: 23px;
}
.list__faq > dd:before {
    top: 5px;
    content: "A";
    background: #c9c9c9;
}


.list__faq a:hover {
    text-decoration: underline
}
.list__faq .btn {
    margin-top: 1em;
    text-align: right;
}
.list__faq .btn a {
    font-size: 14px;
}
.list__faq .btn a + a {
    margin-left: 20px;
}
.list__faq .btn a:hover {
    text-decoration: none;
}

.box {
    margin-top: 1.5em;
    padding: 15px 20px;
    border: dashed 1px #ccc;
}
.box dt {
    margin-bottom: 0.5em;
    color: #7d7d7d;
}
.box dd {
    margin-bottom: 0.5em;
}
.note {
    margin-top: 1em;
    font-size: 87.5%;
}

.mfp-iframe-holder .mfp-content {
    max-width: 720px;
}

.confidentialDocuments .list__faq > dt{
    color: #408ff0;
}
.businessPaper .list__faq > dt {
    color: #13b5b1;
}
.cardboard .list__faq > dt {
    color: #e0990f;
}
.schoolRegion .list__faq > dt {
    color: #8fc32c;
}
.atHome .list__faq > dt {
    color: #fd8391;
}
.confidentialDocuments .list__faq > dt:before,
.confidentialDocuments .list__faq .btn a {
    background: #408ff0;
}
.businessPaper .list__faq > dt:before,
.businessPaper .list__faq .btn a {
    background: #13b5b1;
}
.cardboard .list__faq > dt:before,
.cardboard .list__faq .btn a {
    background: #e0990f;
}
.schoolRegion .list__faq > dt:before,
.schoolRegion .list__faq .btn a {
    background: #8fc32c;
}
.atHome .list__faq > dt:before,
.atHome .list__faq .btn a {
    background: #fd8391;
}



/************************************************************************************
smaller than 660px
*************************************************************************************/
@media screen and (max-width: 660px) {
	
	
	/*===================================
        service__menu	
    =====================================*/

    .service__menu {
        margin: 0 0 0 1px;
    }
    .service__menu li {
        width: 126px;
        margin-right: 2px;
        font-size: 18px;
    }
    .service__menu a {
        height: 68px;
        padding-top: 12px;
    }
	
	/*===================================
	    content header	
    =====================================*/

    .content > header {
        height: auto;
        padding: 375px 0 1em;
        background-position: 50% 0;
    }
    .content > header h2,.atHome .content > header h2 {
        margin: 0 -30px;
        font-size: 52px;
        text-align: center;
    }
    .content > header h2 span {
        display: block;
        margin-bottom: 0.4em;
        padding: 0;
        font-size: 14px;
        line-height: 1;
    }
    .content > header p {
        margin-top: 1em;
        font-size: 24px;
    }
    
    
    /*===================================
        content
    =====================================*/

    .content {
        margin: 0 -30px 60px;
        padding: 40px 30px;
    }
    
    /*===================================
        list__faq
    =====================================*/

    .list__faq > dt {
        padding-top: 18px;
        font-size: 24px;
    }
    .list__faq > dd {
        margin-bottom: 30px;
        padding-bottom: 40px;
        font-size: 18px;
    }
	
    .list__faq .btn {
        text-align: left;
    }
    .list__faq .btn a {
        font-size: 18px;
}
	
}