@charset "utf-8";

/* 特徴
------------------------------------- */

.wrapMvProduct{
    overflow-x: hidden;
}

#mvProduct{
    padding: 47px calc(( 100% - 1142px ) / 2 ) 52px;
    border-top: solid 1px #808080;
    position: relative;
}

#mvProduct p{
    width: 1142px;
    height: 310px;
    background: url("../img/mv_shi.jpg") no-repeat;
    background-size: cover;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.52;
    padding-left: 64px;
    padding-top: 200px;
}

ul.tabMenu{
    margin: 0 calc(( 100% - 1138px ) / 2 );
    width: 1138px;
    height: 74px;
    border-bottom: solid 2px #cccccc;
    padding: 0　41px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

ul.tabMenu li{
    width: 416px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 35px;
}

ul.tabMenu li.cur{
    position: relative;
    height: 74px;
    border-top: solid 2px #cccccc;
    border-left: solid 2px #cccccc;
    border-right: solid 2px #cccccc;
    
    background: #669eab; /* Old browsers */
    background: -moz-linear-gradient(top, #669eab 1%, #669eab 10%, #669eab 10%, #ffffff 11%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #669eab 1%,#669eab 10%,#669eab 10%,#ffffff 11%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, 80b5ff 1%,#669eab 10%,#669eab 10%,#ffffff 11%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669eab', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    
    padding-top: 21px;
}

ul.tabMenu a li{
    background: #eeeeef;
    color: #888888;
    height: 61px;
    margin-bottom: 13px;
    padding-top: 13px;
}


ul.tabMenu a:hover li{
    background: #dbdcdc;
    color: #231815;
    opacity: 1.0;
    transition: 0.4s;
}


ul.tabMenu a:active li {
    position: relative;
    top: 2px;
    left: 2px;
}

#feature{
    width: 930px;
    margin: 105px calc(( 100% - 930px ) / 2 ) 0px;
    background: #7ac1cc;
    padding: 40px 55px;
}

#feature ul{
    width: 800px;
    height: 142px;
    background: #fff;
    margin: 30px auto;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.02em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.74;
}

#feature ul li.num{
    background: #d1f0e1;
    width: 56px;
    height: 100%;
    text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#feature ul li.txt{
    padding-left: 30px;
}

#feature ul li.txt .small{
    font-size: 12px;
    font-weight: 500;
    margin-left: -10px;
}

#feature ul:nth-child(1) li.num{
    background: #d1f0e1 url("../img/num1.svg") no-repeat;
    background-size: 8px 20px;
    background-position: 50%;
}

#feature ul:nth-child(2) li.num{
    background: #d1f0e1 url("../img/num2.svg") no-repeat;
    background-size: 12.3px 20px;
    background-position: 50%;
}

#feature ul:nth-child(3) li.num{
    background: #d1f0e1 url("../img/num3.svg") no-repeat;
    background-size: 12.14px 20.25px;
    background-position: 50%;
}

#feature ul:nth-child(4) li.num{
    background: #d1f0e1 url("../img/num4.svg") no-repeat;
    background-size: 13.75px 20px;
    background-position: 50%;
}

#feature ul:nth-child(5) li.num{
    background: #d1f0e1 url("../img/num5.svg") no-repeat;
    background-size: 12.2px 20px;
    background-position: 50%;
}

#featureNote{
    width: 930px;
    margin: 20px calc(( 100% - 930px ) / 2 ) 150px;
    font-size: 14px;
    font-weight: 300;
}

/* サービス内容
------------------------------------- */
#serviceContents{
    width: 100%;
    margin: 70px auto 90px;
}

#serviceContents li{
    position: relative;
    width: 880px;
    height: 72px;
    font-size: 26.5px;
    font-weight: 700;
    color: #4c79d6;
    margin: 20px auto 0;
    padding-top: 14px;
    padding-left: 40px;
    display: block;
    border: solid 1px #4c79d6;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.10);
    transition: 0.4s;
}

#serviceContents li.off{
}

#serviceContents li.on{
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: none;
    color: #fff;
}

#serviceContents li#tgl1.on{
    background: #f7ab86;
    border: solid 1px #f7ab86;
}

#serviceContents li#tgl2.on{
    background: #97bad1;
    border: solid 1px #97bad1;
}

#serviceContents li#tgl3.on{
    background: #bf9bb6;
    border: solid 1px #bf9bb6;
}

#serviceContents li#tgl4.on{
    background: #73b5e6;
    border: solid 1px #73b5e6;
}

#serviceContents li.down::before{
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    top: 24px;
    right: 40px;
    background: url("../../assets/img/btnTglDown.svg");
    background-size: cover;
}

#serviceContents li.up::before{
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    top: 24px;
    right: 40px;
    background: url("../../assets/img/btnTglUp.svg");
    background-size: cover;
}

#serviceContents li:hover{
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    color: #fff;
    transition: 0.4s;
    cursor: pointer;
}

#serviceContents li#tgl1:hover{
    background: #f7ab86;
    border: solid 1px #f7ab86;
}

#serviceContents li#tgl2:hover{
    background: #97bad1;
    border: solid 1px #97bad1;
}

#serviceContents li#tgl3:hover{
    background: #bf9bb6;
    border: solid 1px #bf9bb6;
}

#serviceContents li#tgl4:hover{
    background: #73b5e6;
    border: solid 1px #73b5e6;
}


#serviceContents .boxService{
    width: 100%;
    margin: 0 auto;
    padding: 0 calc(( 100% - 1100px ) / 2 ) 65px;
    text-align: left;
}

#serviceContents #service1{
    background: #FEE6DC;
    display: none;
}

#serviceContents #service2{
    background: #D8E4EC;
    display: none;
}

#serviceContents #service3{
    background: #E6D8E2;
    display: none;
}

#serviceContents #service4{
    background: #CAE2F4;
    display: none;
}

#serviceContents .boxService p.boxClose{
    width: 100%;
    margin-top: 65px;
    padding-right: 30px;
    text-align: right;
}

#serviceContents .boxService span.close{
    position: relative;
    margin-top: 65px;
    margin-bottom: 0;
    color: #005dcf;
    font-size: 20px;
    font-weight: 400;
}

#serviceContents .boxService span.close::after{
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    top: 3px;
    right: -26px;
    background: url("../../assets/img/btnTglDown.svg");
    background-size: cover;
    transform: rotate(180deg);
}

#serviceContents .boxService span.close:hover{
    border-bottom: solid 1px #005dcf;
    cursor: pointer;
}


/* サービス内容　各ブロックの内容
------------------------------------- */

/* ===== Service1 =====*/

#serviceContents #service1 .boxLead{
    width: 100%;
    height: 275px;
    background: url("../img/iconService1.svg") no-repeat;
    background-size: 139px 93px;
    background-position: 870px 91px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;
    padding-left: 110px;
    padding-top: 74px;
}

#serviceContents #service1 .box{
    position: relative;
    width: 100%;
    height: 2235px;
    background: url("../img/bgService1box.png") no-repeat;
    background-size: 100%;
    margin-bottom: 55px;
}

#serviceContents #service1 .box h3,
#serviceContents #service1 .box p{
    position: absolute;
}

#serviceContents #service1 .box h3{
    color: #000;
    top: 57px;
    left: 72px;
    font-size: 30px;
    font-weight: 700;    
}

#serviceContents #service1 .box p:nth-child(2){
    color: #231815;
    top: 178px;
    left: 523px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.47;
}

#serviceContents #service1 .box p:nth-child(3){
    color: #231815;
    top: 1146px;
    left: 415px;
    font-size: 26px;
    font-weight: 400;    
    line-height: 1.69;
}

#serviceContents #service1 .box p:nth-child(4){
    color: #231815;
    bottom: 296px;
    left: 304px;
    font-size: 20px;
    font-weight: 300;    
    line-height: 1.5;
}

/* ===== Service2 =====*/

#serviceContents #service2 .boxLead{
    width: 100%;
    height: 275px;
    background: url("../img/iconService2.svg") no-repeat;
    background-size: 175px 114px;
    background-position: 820px 80px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;
    padding-left: 110px;
    padding-top: 88px;
}

#serviceContents #service2 .box{
    position: relative;
    width: 100%;
    height: 731px;
    background: url("../img/bgService2box.png") no-repeat;
    background-size: 100%;
}

#serviceContents #service2 .box p{
    position: absolute;
    color: #231815;
    top: 575px;
    left: 300px;
    font-size: 20px;
    font-weight: 300;
}
    
/* ===== Service3 =====*/

#serviceContents #service3 .boxLead{
    width: 100%;
    height: 275px;
    background: url("../img/iconService3.svg") no-repeat;
    background-size: 167px 114px;
    background-position: 820px 80px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;
    padding-left: 110px;
    padding-top: 71px;
}

#serviceContents #service3 .box{
    position: relative;
    width: 100%;
    height: 1233px;
    background: url("../img/bgService3box.png?20231025") no-repeat;
    background-size: 100%;
    margin-bottom: 10px;
}

#serviceContents #service3 .box h2{
    position: absolute;
    font-size: 25px;
    color: #00418F;
    left: 321px;
}

#serviceContents #service3 .box h2:nth-child(1){
    top: 105px;
}

#serviceContents #service3 .box h2:nth-child(2){
    top: 664px;
}

#serviceContents #service3 .box h2::before{
    position: absolute;
    content: "■";
    color: #458EE6;
    left: -32px;
}

/* ===== Service4 =====*/

#serviceContents #service4 .boxLead{
    width: 100%;
    height: 275px;
    background: url("../img/iconService4.svg") no-repeat;
    background-size: 125px 124px;
    background-position: 850px 82px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;
    padding-left: 110px;
    padding-top: 71px;
}

#serviceContents #service4 .box{
    position: relative;
    width: 100%;
    height: 1441px;
    background: url("../img/bgService4box.png") no-repeat;
    background-size: 100%;
    margin-bottom: 55px;
}

/* SideBtn
------------------------------------- */
#bannerMov{
	position: fixed;
	width:217px;
	height: 175px;
	right: 0px;
	bottom: 72px;
    z-index: 5;
}

#bannerMov p{
    width: 100%;
    height: 100%;
    background: url("../img/btnMov.png") no-repeat;
	background-size: 100%;
}

#bannerMov a:hover{
    opacity: 0.65;
    transition: 0.4s;
}

#bannerMov a:active{
    position: relative;
    top: 0;
    left: 4px;
    transition: 0s;
}