@charset "utf-8";
/* CSS Document */

.w1200 {
	width: 1200px;
	margin:auto;
	position: relative;
	}
.sp{
    display: none;
}

.service_head {
	width: 450px;
	margin:auto;
	text-align: center;
}

h2{
	font-size:2rem;
	position: relative;
	display:inline-block;
	height:100px;
		}

h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 30px;/*線の上下位置*/
  display: inline-block;
  width: 450px;/*線の長さ*/
  height: 0.5px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #2b2b2b;/*線の色*/
  }

span.letter_lower {
	font-size: 1.5rem;
	font-family:'Cabin';
	letter-spacing: 5px;
	color:#666;
	}

.service_button {
	text-align:center;
	margin-top:70px;
}

.service_button ul{
	list-style: none;
	display:flex;
	justify-content:start;
	flex-wrap:wrap;
	    padding-inline-start: 0;
}

.service_button a{
	margin: 10px 5px;
}
.service_button li{
	width: 225px;
	padding:15px 0 15px;
	text-decoration: none;
  transition: .4s;
	color: #fff;
}
.service_button a:nth-child(1) li{
	background-color: #f2a000;
}
.service_button a:nth-child(2) li{
	background-color: #006e7b;
}
.service_button a:nth-child(3) li{
	background-color: #cec900;
}
.service_button a:nth-child(4) li{
	background-color: #ea7071;
}
.service_button a:nth-child(5) li{
	background-color: #92689a;
}
.service_button a:nth-child(6) li{
	background-color: #b02e48;
}
.service_button a:nth-child(7) li{
	background-color: #38ac3c;
}
.service_button a:nth-child(8) li{
	background-color: #22aea2;
}
.service_button a:nth-child(9) li{
	background-color: #2270a2;
}

.service_button li:hover {
   background: #2b2b2b;
	color:#FFF;
 }

hr {
	width: 70%;
	height: 1px;
	background-color: #c9c9c9;
	border:none;
	margin-top:50px;
}

.use_wrap{
    position: relative;
    width: 90%;
    padding: 4rem 4rem 4rem 33%;
    margin: 28rem 0 0 auto;
    background: rgba(0,117,197,0.10) url("../img/top/bg_text02.png") no-repeat bottom right;
    background-size: 100%,700px;
}
/*--------文字右パターン---------------------------------------------------------------------------------------*/
.ser01{
	margin-top:295px;
	background-image: url("../image/service/servicepage/img1.png");
	background-size: cover;
}
.text_left{
	position: absolute;
	width: 455px;
	background-color: #fff;
	padding:60px 40px;
	z-index: 1;
	bottom:170px;
}
.ser_img{
	position: absolute;
	bottom:215px;
	right:0px;
}

.w1200-2 {
	width: 1200px;
	margin:auto;
	position: relative;
	height:630px;
	}
/*---------文字右パターン--------------------------------------------------------------------------------------*/
.ser02{
	margin-top:295px;
	background-image: url("../image/service/servicepage/img2.png");
	background-size: cover;
}
.text_right{
	position: absolute;
	width: 455px;
	right:0;
	background-color:#FFF;
	padding:60px 40px;
	z-index: 1;
	bottom:120px;
}
.ser_img2{
	position: absolute;
	bottom:170px;
	left:0px;
}


/*------------------------------------------------------------------------------------------------------------*/
.s_contents{
	background-color: #2b2b2b;
	width: 190px;
	height:190px;
	margin:10px 50px 0;
	border-radius: 18px;
}
.content_flex{
	position: relative;
	justify-content: flex-start;
	display: flex;
	flex-wrap: wrap;
	bottom:69px;
}

.content_flex.s1 .s_contents{
	background-color: #f2a000;
}
.content_flex.s2 .s_contents{
	background-color: #006e7b;
}
.content_flex.s3 .s_contents{
	background-color: #cec900;
}
.content_flex.s4 .s_contents{
	background-color: #ea7071;
}
.content_flex.s5 .s_contents{
	background-color: #92689a;
}
.content_flex.s6 .s_contents{
	background-color: #b02e48;
}
.content_flex.s7 .s_contents{
	background-color: #38ac3c;
}
.content_flex.s8 .s_contents{
	background-color: #22aea2;
}
.content_flex.s9 .s_contents{
	background-color: #2270a2;
}
.contetnt_box{
	position: relative;
}
.t_contents{
	position: relative;
	top:500px;
	font-size:20px;
	margin:0 50px;
}
.t_contents span{
	font-size:30px;
}
.s_contents img{
	margin:5px auto 0;
}
.s_contents p{
	margin:0;
	text-align: center;
	font-size: 16px;
	color:white;
}
.s_titile span{
	font-size: 45px;
	font-family:'Cabin', sans-serif;
}
.s_titile p{
	font-size:20px;
	font-family: 'Noto Sans CJK JP', sans-serif;
}
.flow{
	margin-bottom:60px;
	margin-top:55px;

}

.flow_flex{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	text-align: center;
	margin-top:85px;
}
.flow_box p{
		padding:20px;
	text-align: left;
	color:white;
	font-weight: 400;
	font-size:14px;
}
.flow_box2 p{
		padding:20px;
	text-align: left;
	color:white;
	font-weight: 400;
	font-size:14px;
}
.flow_box2{
	width: 296px;
	height:560px;
	background-color:#3c3c3c;
}
.flow_box{
	width: 296px;
	height:560px;
	background-color:#505050;
}
.flow_box span{
	font-size:25px;
		color:white;
	margin-top:20px;
}
.flow_box2 span{
	font-size:25px;
		color:white;
	margin-top:20px;
}
.flow_title{
	margin-top:20px;
}
.flow_box2 span{
	font-family:'Cabin', sans-serif;
	font-family: 'Noto Sans CJK JP', sans-serif;
}
.flow_box span{
	font-family:'Cabin', sans-serif;
	font-family: 'Noto Sans CJK JP', sans-serif;
}
.line{
		border-top:#c9c9c9 1.5px solid;
}




.background {
	position:relative;
	top:-500px;
	right:40%;
	z-index:1
}

.service_number {
	font-family:'Cabin';
	font-size:2rem;
	letter-spacing: 7px;
}
.service_title {
	font-family:'Cabin';
	font-size:2.3rem;
	letter-spacing: 7px;
}

h3 {
	font-size:2rem;
}
.service_left{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.bg1{
	background-image: url("../image/service/servicepage/img1.png");
}




@media screen and (max-width:1024px){
.w1200 {
    width: auto;
}
    .mt200{
        margin-top: 200px;
    }
.service_button ul {
    justify-content: space-around;
    width: 900px;
    margin: 0 auto;
}
.service_button li {
    width: 225px;
}
.w1200-2 {
    width: auto;
}

.ser01 {
    margin-top: 135px;
}.ser02 {
    margin-top: 95px;
}
    .ser02{
        background-image: url("../image/service/servicepage/img1.png");
    }
    .s_titile{
        padding: 0 20px;
    }
.flow_flex {
    justify-content: center;
}
.flow_box {
    width: 396px;
    margin: 5px;
}
.flow_box2 {
    width: 396px;
    margin: 5px;
}
    .flow_box img,.flow_box2 img{
        width:100%;
    }
}


@media screen and (max-width:768px){
mt200 {
    margin-top: 100px;
}
.service_button ul {
    justify-content: space-around;
    width: 720px;
    margin: 0 auto;
}
.s_contents {
    margin: 10px 20px 0;
}
.ser_img {
    position: relative;
    bottom: 0px;
}
.text_left {
    position: relative;
    width: auto;
    bottom: 0px;
    }
.t_contents {
    top: 0px;
    margin: 0 50px 10px;
}
.content_flex {
    justify-content: center;
    bottom: 0px;
}
.text_right {
    position: relative;
    width: auto;
    bottom: 0px;
}
.ser_img2 {
    position: relative;
    bottom: 0px;
}
    .ser_img img, .ser_img2 img{
        width:100%;
    }
.w1200-2 {
    height: auto;
}
.flow_box {
    width: 346px;
}
.flow_box2 {
    width: 346px;
}
}



@media screen and (max-width:600px){
    .ser01{
        background: none;
    }
    .ser02{
        background: none;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
.service_button ul {
    justify-content: space-around;
    width: auto;
	margin: 0 3px 0;
}
	.service_button{
		margin-top: 20px;
	}
	.mt200{
		margin-top:100px;
	}
.service_button li {
    width: 135px;
    padding: 5px;
    margin: 5px;
}
    .service_button ul::after{
        content:"";
        width:147px;
    }
.service_number {
    font-size: 1.3rem;
    letter-spacing: 7px;
}
.service_title {
    font-size: 1.5rem;
    letter-spacing: 7px;
}
.text_left {
    padding: 10px 15px;
}
.text_right {
    padding: 10px 15px;
}
h3{
    font-size: 1.5rem;
}
.s_contents {
    width:30%;
    height:auto;
    margin: 10px 2.5px 0;
    padding-bottom: 10px;
}
.s_contents p {
    font-size: 13px;
}
.t_contents span {
    font-size: 20px;
}
.t_contents {
    text-align: center;
}
.flow_box img, .flow_box2 img {
    height:160px;
    object-fit: cover;
}
.flow_box,.flow_box2 {
    height: auto;
}
}

.service_number.s1{
	color: #f2a000;
	font-size: 4rem;
}
.service_number.s2{
	color: #006e7b;
	font-size: 4rem;
}
.service_number.s3{
	color: #cec900;
	font-size: 4rem;
}
.service_number.s4{
	color: #ea7071;
	font-size: 4rem;
}
.service_number.s5{
	color: #92689a;
	font-size: 4rem;
}
.service_number.s6{
	color: #b02e48;
	font-size: 4rem;
}
.service_number.s7{
	color: #38ac3c;
	font-size: 4rem;
}
.service_number.s8{
	color: #22aea2;
	font-size: 4rem;
}
.service_number.s9{
	color: #2270a2;
	font-size: 4rem;
}