@charset 'utf-8';

html, body {width:100%;	height: 100%; font-family: 'Noto Sans JP', sans-serif; font-weight:700; color: #FFF;}
html{scroll-behavior: smooth;}
body{text-align: center; margin: 0; padding: 0; font-size: 14px; line-height: 26px;}
ul{padding: 0; margin: 0;}
li{list-style-type: none;}
img{-webkit-backface-visibility: hidden;}
.clearfix::after {content: ""; display: block; clear: both;}
.pc{ display: block;}
.sp{ display: none;}

/* PC COMMON */
#wrapper {max-width: 100%; margin: 0 auto;}
p{margin: 0; padding: 0;}
h1{width: 881px; margin: 0; padding: 80px 0 40px;}
h2{font-size: 64px; line-height: 64px; position: absolute; top: 180px; z-index: 5000; padding: 0; width: 100%;}
h3{font-size: 148px; line-height: 148px; opacity: 0.5; padding: 0; margin: 0;}
#problem1, #feature, #service, #member{ padding: 180px 0px; position: relative;}

/* PC globalNavi */
#globalNavi ul {display: flex; flex-flow: row; justify-content: space-around; list-style-type: none; margin: 0 auto; padding: 6px 0; width: 90%;}
#globalNavi a {display: block; text-decoration: none;}
.fixed {position: fixed; top: 0; padding: 0; width: 100%; z-index: 1000;}
ul.kotei {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.gnav{float:left;}
.global-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; padding-top: 40px; background: url(../img/bg_header_inner_sp.jpg) no-repeat; background-size: cover; transition: all .6s; z-index: 200; overflow-y: auto;}
.global-nav__item a:hover{ opacity: 0.5;}
.header { position: fixed; top: 20px; left: 0; width: 100%; height: 40px; z-index: 10000;}
.hamburger {position: absolute; top: 0; left: 0; width: 90px; height: 60px; cursor: pointer; z-index: 300;}
.global-nav__list {margin: 50px auto 30px; padding: 0; list-style: none; width: 275px; text-align: left;}
.global-nav__item {padding: 0 14px;}
.global-nav__item a {display: block; padding: 20px 0; text-decoration: none;}
.hamburger__line {position: absolute; left: 11px; width: 60px; height: 5px; background: #fff; transition: all .6s;}
.hamburger__line--1 {top: 12px;}
.hamburger__line--2 {top: 24px;}
.hamburger__line--3 {top: 36px;}
.black-bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background: #FFF; opacity: 0; visibility: hidden; transition: all .6s; cursor: pointer;}
.nav-open .global-nav {right: 0;}
.nav-open .black-bg {opacity: .8; visibility: visible;}
.nav-open .hamburger__line--1 {transform: rotate(45deg); top: 20px;}
.nav-open .hamburger__line--2 {width: 0; left: 50%;}
.nav-open .hamburger__line--3 {transform: rotate(-45deg); top: 20px;}
.fadein {opacity : 0; transform : translate(0, 100px); transition : all 800ms;}
.fadein.scrollin {opacity : 1; transform : translate(0, 0);}
#btn-contact_sp{width: 275px; margin: auto;}
.feature-nav{ width: 110px;}
.service-nav{width: 155px;}
.member-nav{width: 155px;}
.gnav-01 img{width: 96px;}
.gnav-02 img{width: 135px;}
.gnav-03 img{width: 135px;}

/* PC HEADER */
.site-header{background: url(../img/bg_header.jpg) no-repeat; background-size: cover; display: flex; height: 170px; position: absolute; justify-content: space-between; width: 100%;}
.site-header.fixed{position: fixed; top: 0; z-index: 6000;}
#btn-contact{margin-top: -60px; margin-right: 20px; width: 329px;}
#btn-contact img{width: 279px;}
.site-logo{width: 579px; padding-top: 33px; padding-left: 30px; float: left;}
.site-logo img{width: 579px;}
.gnav__menu li{float: right; padding-top: 40px; margin-left: 20px;}

/* PC MAIN */
#main{background: url(../img/bg_main.jpg) no-repeat top center; background-size: cover; text-align: left; /*height:100vh;*/ height: 910px;}
.main-box{width: 90%; margin: auto;}
.mv-read{width: 620px; font-size: 34px; line-height: 50px;}
.mv-txt{width: 620px; font-size: 24px; line-height: 40px; padding-top: 20px;}

/* PC PROBLEM */
#problem{background:url(../img/bg_problem.jpg) repeat-x top center; margin-top: 170px;}
#problem1{background:url(../img/bg_problem1.jpg) no-repeat bottom center;background-size: 100%; }
#problem2{background:#FFF url(../img/bg_problem2.png) no-repeat bottom center; padding: 160px 0px 80px;background-size: 556px;}
#problem h3{color: #13455F; text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF,  0-2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;}
.problem-txt{font-size: 24px; line-height: 36px; padding-top: 100px;}
.problem-txt2{font-size: 71px; line-height: 105px;font-weight: 300;}
.problem-block{width: 1125px; margin:40px auto;}
.problem-block li, .problem-block2 li{background: url(../img/bg_fukidashi.png) no-repeat top/100%; width: 185px; color: #13455F; font-size: 24px; line-height: 30px; float: left; margin-right: 50px;}
.problem-block li.problem1{padding:60px 0 0; height: 102px;}
.problem-block li.problem2{padding:50px 0 0; height: 112px;}
.problem-block li.problem3{padding:32px 0 0; height: 127px;}
.problem-block li:last-child{margin-right: 0;}
#problem2-box{width: 1260px; margin: 70px auto;}
#problem2-box li{border: 5px solid #F22C08; width: 270px; float: left; color: #F22C08; font-size: 24px; line-height: 36px; margin-right: 15px; padding: 30px 10px;}
#problem2-box li:last-child{margin-right: 0;}
.problem2-txt{font-size: 60px; color:#F22C08; line-height: 80px;}
.problem2-txt2{font-size: 35px; color:#F22C08; line-height: 52px;}

/* PC FEATURE */
#feature{background:#728A1C url(../img/bg_feature.png) no-repeat bottom center; background-size: cover;}
#feature h3{color: #728A1C; text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF,  0-2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;}
.feature-block{margin: 0 4%; width: 96%;  padding: 5% 0;}
.feature-block li{font-size: 24px; line-height: 36px; width: 30%; float: left; text-align: left; margin-right: 30px;}
.feature-block li:last-child{margin-right: 0px;}
.feature1{background:url(../img/01.png) no-repeat left 0px top 0px;}
.feature2{background:url(../img/02.png) no-repeat left 0px top 0px;}
.feature3{background:url(../img/03.png) no-repeat left 0px top 0px;}
.feature4{background:url(../img/04.png) no-repeat left 0px top 0px;}
.feature5{background:url(../img/05.png) no-repeat left 0px top 0px;}
.feature1,.feature2,.feature3,.feature4,.feature5{background-size: 56px;}
.feature-txt{border-left:#FFF 2px solid; margin-left: 70px; padding-left: 30px;}
.feature-block2{margin: 0 10%; width: 90%;}
.feature-block2 li{font-size: 24px; line-height: 36px; width: 40%; float: left; text-align: left; margin-right: 30px;}
.feature-block2 li:last-child{margin-right: 0px;}

/* PC SERVICE */
#service{ background: #FFF; color: #13455F;}
#service h3{color: #FFF; text-shadow:2px 2px 0 #13455F, -2px -2px 0 #13455F, -2px 2px 0 #13455F, 2px -2px 0 #13455F, 0px 2px 0 #13455F,  0-2px 0 #13455F, -2px 0 0 #13455F, 2px 0 0 #13455F;}
#service h4{font-size: 50px; border-radius: 60px; background:#13455F; color: #FFF; width: 962px; height: 120px; margin: auto; line-height: 120px; margin-top: 80px;}
.service-box-top{margin: auto; width: 1345px;  padding: 0px 0 100px;}
.service-box{margin: auto; background:no-repeat bottom/100% url(../img/service_line.png); padding: 40px 0 20px;}
.service-box:last-child{background: none;}
.service-txt{font-size: 26px; line-height: 90px; padding-top: 80px; background: url(../img/bg_service01.png) no-repeat bottom center; width: 623px; color: #FFFFFF; text-align: left; padding-left: 20px; float: left;}
.service-txt2{font-size: 26px; line-height: 90px; padding-top: 80px; background: url(../img/bg_service02.png) no-repeat bottom center; background-position-y: 70px; width: 625px; color: #FFFFFF; text-align: left; padding-left: 20px; float: right;}
.service-img01{width: 1200px; margin: auto; padding: 100px 0;}
.service-img02{width: 1200px; margin: auto; padding: 100px 0 0;}
.service-img01 img{width: 100%;}
.service-img02 img{width: 100%;}
#service-point{ width: 1370px; height: 500px; background: url(../img/bg_service.png) no-repeat bottom center; background-size: 1370px; margin: 0 auto 100px;}
#service-point li{ width: 406px; float: left; padding-top: 180px; margin-right: 70px;}
#service-point li:last-child{ margin-right: 0px;}
.service-subttl{color: #13455F; font-size: 32px; line-height: 32px; text-align: center;}
.service-free{color: #F22C08; font-size: 24px;}
.service-list{color: #13455F; font-size: 24px; line-height: 36px; text-align: left; margin-top: 30px; padding-left: 40px;}

/* PC MEMBER */
#member{background: #13455F; color: #FFF;}
#member h2{}
#member h3{color: #13455F; text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF,  0-2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;}
.member-block{background:no-repeat bottom/100% url(../img/member_line.png); padding: 40px 0 20px;}
.member-block-bottom{padding: 40px 0 0px;}
.member-box-top{ width: 1370px; text-align: left; margin: 60px auto 60px;}
.member-box-bottom{ width: 1370px; text-align: left; margin: 40px auto 0px;}
.member-box{width: 1370px; text-align: left; margin: 0px auto 60px;}
.member-fl{width: 423px; height: 40%; float: left;}
.member-fr{width: 890px; float: right;}
.member-fl2{width: 423px; height: 40%; float: right;}
.member-fr2{width: 890px; float: left;}
.member-name{font-size: 32px; padding-top: 20px;}
.member-txt{font-size: 16px; line-height: 30px; padding-top: 30px;}

/* PC FOOTER */
footer{ position: relative;}
.copy{background: #13455F; color: #ffffff; font-size: 16px; padding: 60px;}
#pagetop{width: 220px; height:59px; position: absolute; top:30px; right: 30px;}
#ft-logo{padding: 60px; width: 609px; margin: auto;}

/*************　画面幅が1370pxまでの時 *************/
@media screen and (max-width:1370px){
/* PC MAIN */
h1{width: 600px;}
#main{ background: url(../img/bg_main.jpg) no-repeat top center; background-size: cover; /*height:100vh;*/ height: 800px; width:100vw; text-align: left;}
.main-box{width: 95%; margin: auto;}
.mv-read{width: 60%; font-size: 34px; line-height: 50px;}
.mv-txt{width: 60%; font-size: 24px; line-height: 40px; padding-top: 20px;}

/* PC HEADER */
.site-header{height: 170px; width: 100%;}
#btn-contact{margin-top: -60px; margin-right: 30px; width: 279px;}
#btn-contact img{width: 279px;}
.gnav{display: none;}
.site-logo{width: 579px; text-align: left; padding-top: 33px; padding-left: 30px;}
.site-logo img{width: 579px;}
.gnav__menu li{float: right; padding-top: 40px; margin-left: 20px;}
#problem{ background:url(../img/bg_problem.jpg) repeat-x top center; margin-top: 170px;}
#problem1{ background:url(../img/bg_problem1.jpg) no-repeat bottom center;background-size: 100%; }
#problem2{background:#FFF url(../img/bg_problem2.png) no-repeat bottom center; padding: 160px 0px 80px;background-size: 556px;}
#problem2-box{width: 90%; margin: 70px auto;}
#problem2-box li{border: 5px solid #F22C08; width: 20%; float: left; color: #F22C08; font-size: 24px; line-height: 36px; margin-right: 0.5%; padding: 30px 10px; height:auto;}

/* PC SERVICE */
#service h4{width: 962px; height: 120px; margin: auto; line-height: 120px; margin-top: 80px;}
.service-box-top{margin: auto; width: 100%;}
.service-txt{font-size: 26px; line-height: 90px; padding-top: 80px; background: url(../img/bg_service01.png) no-repeat bottom center; width: 623px; color: #FFFFFF; text-align: left; padding-left: 40px; float: none; margin: auto;}
.service-txt2{font-size: 26px; line-height: 90px; padding-top: 80px; background: url(../img/bg_service02.png) no-repeat bottom center; width: 625px; color: #FFFFFF; text-align: left; padding-left: 40px; float: none; margin: auto;}
.service-img01{width: 90%; margin: auto; padding: 100px 0;}
.service-img02{width: 90%; margin: auto; padding: 100px 0 0;}

/* PC MEMBER */
.member-box-top{ width: 90%; text-align: left; margin: 40px auto 60px;}
.member-box-bottom{ width: 90%; text-align: left; margin: 40px auto 0px;}
.member-box{width: 90%; text-align: left; margin: 0px auto 60px;}
.member-fl{width: 40%; height: 40%; float: left;}
.member-fr{width: 56%; float: right;}
.member-fl2{width: 40%; height: 40%; float: right;}
.member-fr2{width: 56%; float: left;}
}

/*************　画面幅が1200pxまでの時 *************/
@media screen and (max-width:1200px){
/* PC MAIN */
.main-box{width: 96%;}
#service h4{width: 700px; height: 100px; margin: auto; line-height: 100px; margin-top: 80px; font-size: 35px;}

/* PC PROBLEM */
.problem-block{ width: 90%; margin:40px auto;}
.problem-block li{width: 19%; color: #13455F; font-size: 24px; line-height: 30px; float: left; margin-right: 1%;}
.problem-block li.problem1{padding:60px 0 30px;}
.problem-block li.problem2{padding:50px 0 20px;}
.problem-block li.problem3{padding:35px 0 10px;}
.problem-block li:last-child{margin-right: 0;}
.problem2-txt {font-size: 40px; line-height: 60px; width: 90%; margin: 0 auto;}
#ft-logo{width: 40%; margin: auto;}
}

/*************　画面幅が960pxまでの時 *************/
@media screen and (max-width:960px){
.problem-block li{width: 19%; color: #13455F; font-size: 18px; line-height: 20px; float: left; margin-right: 1%;}
.problem-block li.problem1{padding:50px 0 0px;}
.problem-block li.problem2{padding:40px 0 0px;}
.problem-block li.problem3{padding:25px 0 0px;}
.problem-block{ width: 90%; margin:20px auto;}
.problem-txt2{font-size: 64px; line-height: 80px;}
}

/*************　画面幅が640pxまでの時 *************/
@media screen and (max-width:768px){

/* SP COMMON */
.sp{display: block;}
.pc{display: none;}
h1{width: 90%; margin: 0 auto; padding: 140px 0 40px;}
h2{font-size: 30px; line-height: 20px; top: 112px; }
h3{font-size: 72px; line-height: 100px;}
img{width: 100%;}

/* SP HEADER */
.site-header{background: url(../img/bg_header_sp.jpg) no-repeat; background-size: cover; display: flex; height: 93px; position: absolute; justify-content: space-between; width: 100%;}
.site-header.fixed{position: fixed; top: 0; z-index: 6000;}
#btn-contact{margin-top: 0; margin-right: 0; right: 0px; top:15px; position: absolute; width: 244px;}
#btn-contact img{width: 220px;}
.site-logo{width:200px; text-align: left; padding-top: 33px; padding-left: 10px;}
.site-logo img{width: 300px;}
.gnav__menu li{float: right; padding-top: 40px; margin-left: 20px;}

/* SP MAIN */
#main{ background: url(../img/bg_main_sp.jpg) no-repeat top center; background-size: cover; text-align: left; /*height:100vh;*/ height: 812px;}
.main-box{ margin: auto;height:100vh;width:100vw;}
.mv-read{width: 89.33%; font-size: 20px; text-align: left; line-height: 30px; margin: auto;}
.mv-txt{width: 89.33%; font-size: 16px; text-align: left; line-height: 24px; padding-top: 20px; margin: auto;}
#problem1, #feature, #service, #member{ padding: 93px 0px; position: relative;}

/* SP PROBLEM */
#problem{ background: none; background-size: 100%; margin-top: 93px;}
#problem1{ background:#13455F url(../img/bg_problem_sp.jpg) no-repeat bottom center;background-size: 100%; }
#problem2{background: url(../img/bg_problem2_sp.jpg) no-repeat top center; background-size: 100%; padding: 18% 0 15%; background-size: 100%;}
.problem-txt{font-size: 16px; line-height: 24px; padding-top: 20px; width: 90%; margin:auto;}
.problem-txt2{font-size: 32px; line-height: 48px; font-weight: 300; padding-top: 10px;}
.problem-block{width: 90%; margin:5% auto 0;}
.problem-block li{width: 33%; color: #13455F; font-size: 14px; line-height: 18px; float: left; margin-right: 0.5%; height: auto;}
.problem-block li.problem1, .problem-block2 li.problem1{padding:40px 0; height: auto;}
.problem-block li.problem2, .problem-block2 li.problem2{padding:30px 0; height: auto;}
.problem-block li.problem3, .problem-block2 li.problem3{padding:25px 0; height: auto;}
.problem-block li:last-child{margin-right: 0;}
.problem-block2{width: 90%; margin:0 auto 5%;}
.problem-block2 li{width: 33%; color: #13455F; font-size: 14px; line-height: 18px; float: left; margin-right: 0.5%; height: auto;}
.problem-block2 li:last-child{margin-right: 0;}
#problem2-box{width: 100%; margin: 10% auto; background: none;}
#problem2-box li{ border: 5px solid #F22C08; width: 85%; float: none; font-size: 16px; line-height: 24px; margin-right: 0px; padding:20px 10px; height: auto; margin:10px auto;}
#problem2-box li:last-child{ margin: 10px auto; }
.problem2-txt{font-size: 20px; line-height: 26px;}
.problem2-txt2{font-size: 20px; line-height: 30px;}

/* SP FEATURE */
#feature{background-size: 1000px;}
.feature-block{ margin: 0 4%; width: 90%; padding: 5% 0 0;}
.feature-block2{ margin: 0 4%; width: 90%; padding: 0% 0;}
.feature-block li, .feature-block2 li{font-size: 16px; line-height: 24px; width: 100%; float: none; margin-right: 0px; margin-bottom: 5%;}
.feature1,.feature2,.feature3,.feature4,.feature5{ background-size: 36px;}
.feature-txt{border-left:#FFF 2px solid; margin-left: 45px; padding-left: 20px;}

/* SP SERVICE */
#service h4{font-size: 18px; width: 90%; line-height: 60px; margin-top: 40px; height: auto;}
.service-box-top{margin: auto; padding: 40px 0 20px; width: 80%;}
.service-box, .service-box2{margin: auto; background:no-repeat bottom/100% url(../img/service_line.png); padding: 40px 0 20px;}
.service-txt{font-size: 16px; line-height: 37px; padding-top: 80px; background: url(../img/bg_service01.png) no-repeat top center; width: 100%; padding-left: 40px; float: none;}
.service-txt2{font-size: 16px; line-height: 37px; padding-top: 80px; background: url(../img/bg_service02.png) no-repeat top center; width: 100%; padding-left: 40px; float: none;}
.service-img01{width: 70%; margin: auto; padding:0;}
.service-img02{width: 90%; margin: auto; padding: 0;}
#service-point{ width: 100%; height: auto; margin: auto; background: url(../img/bg_service.png) no-repeat bottom center; background-size: 1370px;}
#service-point li{ width: 100%; float: none; padding-top: 180px; margin-right: 0px;}
#service-point li:last-child{ margin-right: 0px;}
.service-subttl{color: #13455F; font-size: 24px; line-height: 32px; text-align: center;}
.service-free{color: #F22C08; font-size: 20px;}
.service-list{font-size: 16px; line-height:24px; text-align: left; margin-top: 30px; padding-left: 40px;}
.service-box img{width: 100%;}
.service-box2 img{width: 80%;}

/* SP MEMBER */
.member-block{background:no-repeat bottom/100% url(../img/member_line.png); padding: 40px 0 20px;}
.member-box-top{width: 90%; margin: 0px auto 30px;}
.member-box-bottom{width: 90%; margin: 30px auto 0px;}
.member-box{width: 90%; margin: 0px auto 30px;}
.member-fl{width: 100%; height: auto; float: none;}
.member-fr{width: 100%; float: none;}
.member-fl2{width: 100%; height: auto; float: none;}
.member-fr2{width: 100%; float: none;}
.member-name{font-size: 32px; padding-top: 30px;}
.member-txt{font-size: 16px; line-height: 30px; padding-top: 30px;}

/* SP FOOTER */
footer{position: relative;}
.copy{line-height: 20px; padding: 20px;font-size: 12px;}
#ft-logo{width: 80%; padding: 10% 0; margin: auto;}
#pagetop{width: 220px; height:60px; position: relative; bottom:0px; right: 0px; top:0; padding-bottom: 10%; margin: auto;}
}