@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------------------------------
 ***                                                              headerArea
----------------------------------------------------------------------------*/
#headerArea{display: block;}
#headerAreaInner{max-width: 950px; margin: 0 auto; padding: 1em 0 0.5em;}

/*----------------------------------------------------------------------------
***                                                                  mainSec
----------------------------------------------------------------------------*/
.sectionInner{max-width: 950px; padding: 4em 1em; margin: 0em auto;}

#clientTtlBox{background: linear-gradient(45deg, #00a1c9, #008db0); position: relative;}
#clientTtlBox:before,
#clientTtlBox:after{content: ""; display: block; width: 100%; height:1px; background: #fff; position:absolute;}
#clientTtlBox:before{top: 3px;}
#clientTtlBox:after{bottom: 3px;}
#clientTtlBox .clientTtl{color: #fff; line-height: 1.2;}
#clientTtlBox .clientName{margin-right: 1em;}
#clientTtlBoxInner{max-width:950px; margin: 0 auto; padding: 0.7em 0;}

/*----------------------------------------------------------------------------
 ***                                                              mainView
----------------------------------------------------------------------------*/
#mainView{background:url(/biz/supportclub/images/title05.jpg) no-repeat center top 0em; margin: 1em auto; width: 950px; height: 421px; padding: 65px 0;}
#mainView .mainViewInner{background-color: rgba(255,255,255,0.9); height: 100%; position: relative;}
#mainView .mainViewInner .titleBox{position: relative;}
#mainView .mainViewInner .titleBox .title-h3{text-align: center; padding-top: 18px;}
#mainView .mainViewInner .titleBox .usagi{position: absolute; bottom: 0; right: 40px;}

#mainView .reasonBox .reasonUl{margin-top: 2em; font-size: 63%;}
#mainView .reasonBox .reasonLi{padding: 0 1em; position: relative; width: 30%; max-width: 180px; min-height: 98px; margin: 0 2em;}
#mainView .reasonBox .reasonLi:before,
#mainView .reasonBox .reasonLi:after{content:""; display: block; width: 39px; height: 97px;position: absolute; top:50%; transform: translateY(-50%);background-size: cover; background-repeat: no-repeat; background-position: center center; }
#mainView .reasonBox .reasonLi:before{ background-image: url(/biz/supportclub/images/title03_1.png);left: 0;}
#mainView .reasonBox .reasonLi:after{ background-image: url(/biz/supportclub/images/title03_2.png);right: 0;}
#mainView .reasonBox .reasonDl{}
#mainView .reasonBox .reasonDt{color: #ed1e79; font-size: 130%; text-align: center; margin-bottom: 0.8em;}
#mainView .reasonBox .reasonDd{font-weight: bold; text-align: center;}
#mainView .reasonBox .reasonDd .reasonTxt{color: #ed1e79; text-align: center; font-size: 120%;}
#mainView .reasonBox .reasonDd .highlight{font-size: 300%;}
#mainView .reasonBox .reasonDd .komeTxt{font-size: 90%; color: #333; font-weight: normal; text-align: center;}


/*----------------------------------------------------------------------------
 ***                                                          contentsArea
----------------------------------------------------------------------------*/
#contentsArea{width: 950px; margin: 0 auto ;display: flex;}

/*----------------------------------------------------------------------------
 ***                                                               mainSec
----------------------------------------------------------------------------*/
#mainSec{width: 735px;}

.btn-pdf1{margin: 2em auto; text-align: center;}
.btn-pdf2{margin: 0 auto 1em; text-align: center;}
.kometext{color: #333333; font-size: 13px; line-height: 1.3;}
#mainSec .section{border-bottom:dashed #b7b7b7 2px;}
#mainSec .section:last-child {border-bottom: none;}
/*----------------------------------------------------------------------------
 ***                                                              introSec
----------------------------------------------------------------------------*/
#introSec{margin-bottom: 1em;}
#introSec .gaiyouBox{background-color: #e6f6fa ; position: relative; margin-bottom: 1em;}
#introSec .gaiyouBox::before{content: ""; background-color: #00a1c9; left: 0; width: 12px; height: 100%; position: absolute;}
#introSec .gaiyouBox .gaiyouBoxInner{padding: 1em 0 1em 2em;}
#introSec .gaiyouBox .gaiyouBoxInner .title-h4{color: #006b85; font-size: 22px;}
#introSec .gaiyouBox .gaiyouBoxInner .text{font-size: 14px; font-weight: 500;}

/*----------------------------------------------------------------------------
 ***                                                              pointSec
----------------------------------------------------------------------------*/
#pointSec{}
#pointSec .title-h4{margin: 2em 0 0;}
#pointSec .pointSecInner{background-color: #fffff2; padding: 52px;}
#pointSec .pointBox{margin-top: 2em;}
#pointSec .pointBox .point{margin-top: 1em;}
#pointSec .pointBox .point .pointTitle{display: flex; border-bottom: solid #009eb8;}
#pointSec .pointBox .point .pointTitle .title-h5{font-size: 21px; margin: 5px 0 0 10px;}
#pointSec .pointBox .point .textBox{display: flex;margin-top: 0.5em;}
#pointSec .pointBox .point .textBox .text{ width: 442px;}
#pointSec .pointBox .point.point1 .textBox .text{ width: initial;}
#pointSec .pointBox .point .textBox .textImg{margin-left: 16px;}
#pointSec .pointBox .point .tableBox{margin-top: 1.5em;}

/*----------------------------------------------------------------------------
 ***                                                              flowSec
----------------------------------------------------------------------------*/
#flowSec{}
#flowSec .title-h4{margin: 2em 0 0;}
#flowSec .flowSecInner{}
#flowSec .flowBox{margin-bottom: 3em;}
#flowSec .flowBox .flowListItem{display: flex; background:#f2f2f2; margin-bottom: 1em;}
#flowSec .flowBox .flowListItem .leftBox{background:#c1e9f3; width: 81px; display: flex; align-items: center;}
#flowSec .flowBox .flowListItem .leftBox .number{margin: auto; color: #00a1c9; font-size: 17px; font-weight: bold;}
#flowSec .flowBox .flowListItem .rightBox{margin: 1em; display: flex;}
#flowSec .flowBox .flowListItem .rightBox .main{width: 470px;}
#flowSec .flowBox .flowListItem .rightBox .main .text{margin-right: 1em; font-size: 15px;}

#flowSec .flowBox .flowListItem.listItem1 .btnBox{display: flex;}
#flowSec .flowBox .flowListItem.listItem1 .btnBox .btn{margin-right: 10px;}
#flowSec .flowBox .flowListItem.listItem1 .rightBox{display: initial;}
#flowSec .flowBox .flowListItem.listItem1 .rightBox{width: 620px;}
#flowSec .flowBox .flowListItem.listItem2 .rightBox .main .btn-pdf2{margin-bottom: 0;}
#flowSec .flowBox .flowListItem.listItem5 .leftBox{background: #fccde0;}
#flowSec .flowBox .flowListItem.listItem5 .leftBox .number{color: #e3007f;}
/*----------------------------------------------------------------------------
 ***                                                              rightSec
----------------------------------------------------------------------------*/
#rightSec{width: 200px;margin-left: 15px;}
#rightSec .rightSecInner{position: sticky; top: 1em;}
#rightSec .navBox{border:solid #82d0e4 2px; padding: 13px; margin-top: 0.5em;}
#rightSec .navBox .nav{background: url(/biz/supportclub/images/icon_nav.png) no-repeat left 0px; font-size: 14px; padding-bottom: 7px; padding-left: 19px; margin-bottom: 5px; color: #009dc1;}
#rightSec .navBox .nav.link{background: url(/biz/supportclub/images/icon_link.png) no-repeat left 0px;}
#rightSec .navBox .nav:last-child{padding-bottom: 0;}
#rightSec .btn{margin: 0.5em 0;}

#rightSec .pdfBox{border-top: dotted #b7b7b7 3px;}
#rightSec .pdfBox .pdfTitle{text-align: center; color: #4d4d4d; font-size: 14px; font-weight: bold;margin-bottom: 0;}
#rightSec .pdfBox .btn{margin: 0;}
#rightSec .serviceBox{border-top: dotted #b7b7b7 3px;}
#rightSec .serviceBox .serviceTitle{color: #ed1e79; text-align: center;font-size: 15px; font-weight: bold;}
#rightSec .serviceBox .brandBox{display: flex; flex-wrap: wrap;}
#rightSec .serviceBox .brandBox .brand{margin:0 5px 3px 0;}
#rightSec .serviceBox .brandBox .brand:nth-of-type(3n){margin-right: 0;}
/*----------------------------------------------------------------------------
 ***                                                              footerArea
----------------------------------------------------------------------------*/
#copy{background: #595757; padding: 0.5em;}
#copy p{margin: 0; padding: 0; color: #fff;}