@charset "UTF-8";


/* ===========================
HERO
=========================== */
.hero{
width: 100%;
height:340px;
position: relative;
z-index: 0;
display: flex;
}
.service_head_main{
text-align: center;
background: #19573b;
height: 100%;
color: #fff;
width: 40%;
min-width: 580px;
margin: auto;
padding: 40px 0;
display: grid;
align-items: center;
}
.service_head_left{
width: 30%;
height: 100%;
overflow: hidden;
}
.service_head_right{
width: 30%;
height: 100%;
overflow: hidden;
}
.service_head_left img{
width: 100%;
height:100%;
object-fit: cover;
}
.service_head_right img{
width: 100%;
height:100%;
object-fit: cover;
}

.hero h1{
width: 70%;
margin: 0 auto 30px;
font-size: 1.5rem;
border-bottom: solid 1px #fff;
padding-bottom: 1em;
}
.hero h2{
line-height: 1.1;
font-size: 2.2rem;
}
.hero_button{
display: flex;
justify-content: center;
gap:18px;
margin: 30px auto 0;
}
.hero_button div{
width: 9em;
font-size: 1.1rem;
text-align: center;
background: #fff;
padding: 0.2em 0;
border-radius: 10px;
border: solid 1px #c82127;
color: #000;
}

@media screen and (max-width:1100px){
.service_head_left{
display: none;
}
.service_head_right{
width: 50%;
height: 100%;
overflow: hidden;
}
.hero_button{
gap:10px;
}
.hero_button div{
width: 8em;
font-size: 1.0rem;
}
}

@media screen and (max-width:800px){
.hero{
height:300px;
}
.service_head_main{
text-align: center;
background: #19573b;
height: 100%;
color: #fff;
width: 100%;
min-width: auto;
margin: auto;
padding: 20px 0;
display: grid;
align-items: center;
}
.hero h1{
margin: 0 auto 20px;
padding-bottom: 0.5em;
}
.hero h2{
line-height: 1.1;
font-size: 2.2rem;
}
.service_head_right{
display: none;
}
.hero_button{
margin: 20px auto 0;
}
}
@media screen and (max-width:540px){
.hero{
height:250px;
}
.hero h1 {
margin: 0 auto 0;
padding-bottom: 0.25em;
}
.hero h2{
line-height: 1.1;
font-size: 1.7rem;
}
.hero_button {
margin: 0 auto 0;
}
.hero_button div{
width: auto;
font-size: 90%;
padding: 0.25em 1em;
}
}


/* ===========================
PAGE CONTENTS
=========================== */

#page_contents{
padding-top: 100px;
}

@media screen and (max-width:800px){
#page_contents{
padding-top: 60px;
}
}



/* ===========================
SECTION GENARAL
=========================== */

section{
padding: 50px 0;
position: relative;
}
h2.section_title{
color: #c82127;
text-align: center;
font-size: 2rem
}
.h2_en {
background-color: #c82127;
width: 360px;
color: #fff;
text-align: center;
font-size: 13px;
padding: 0 0;
/* 左右を斜めにカット (左上、右上、右下、左下の順に頂点を指定) */
clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
display: table;
margin: auto;
}
a.link_btn{
display: block;
background: #c82127;
color: #fff;
font-size: 1.2rem;
width: 15em;
margin: auto;
border-radius: 50px;
text-align: center;
padding: 0.25em 0;
text-decoration: none;
}
a.link_btn:hover{
text-decoration: none;
background: #e40008;
}
br.section_title_sp{
display: none;
}
@media screen and (max-width:500px){
h2.section_title{
font-size: 1.6rem;
padding-bottom: 0.25em;
}
.h2_en {
width: 90%;
}
br.section_title_sp{
display: block;
}
}

/* ===========================
SECTION CONCEPT
=========================== */

#service_concept{
text-align: center;
}
#service_concept h2{
padding-bottom: 1em;
font-size: 1.7rem
}
#service_concept .mainpic{
width: 460px;
margin: auto;
aspect-ratio: 4 / 2.5;
overflow: hidden;
border-radius: 10px;
}
#service_concept .mainpic img{
width: 100%;
height: 100%;
object-fit: cover;
}
br.title_sp{
display: none;
}
@media screen and (max-width:700px){
br.title_sp{
display: block;
}
}
@media screen and (max-width:640px){
#service_concept .mainpic{
width: 90%;
}
}
@media screen and (max-width:500px){
#service_concept h2{
font-size: 1.4rem
}
#service_concept p{
text-align: left;
width: 90%;
margin: auto;
}
#service_concept p br{
display: none;
}
}


/* ===========================
SECTION PROBLEM
=========================== */
#service_problem{
background: rgba(0,0,0,0.05);
position: relative;
}
#service_problem .arrow{
width: 22px;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: -12px;
z-index: 1;
}
#service_problem h4{
text-align: center;
color: #c82127;
font-size: 1.7rem;
padding-bottom: 1em;
}
.problem_wrap{
width: 90%;
max-width: 800px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.problem_pic{
width: 48%;
margin-bottom: 2%;
aspect-ratio: 4 / 2.5;
overflow: visible;
  position: relative;
}
.problem_pic img{
width: 100%;
height: 100%;
object-fit: cover;
  display: block;
border-radius: 10px;
}
.problem_text {
position: absolute;
top: 18%;
left: -4%;
transform: rotate(-6deg);
z-index: 3;
display: inline-block;
font-size: 1.2em;
}
.line {
font-weight: bold;
line-height: 1.5;
padding: 2.5px 18px;
white-space: nowrap;
background: #fff;
display: table;
}
.line2 {
background: #fff;
margin-left: 40px; /* 2行目のX位置を調整 */
margin-top:-1px;
}
.problem_recommend{
text-align: center;
display: table;
margin: 1em auto;
position: relative;
font-size: 1.3em;
}
.problem_recommend br{
display: none;
}
.problem_recommend span{
border-bottom: solid 1px #c82127;
padding-bottom: 5px;
}
.problem_recommend img{
width: 2em;
vertical-align: middle;
margin-right: 5px;
}
.problem_foot{
display: flex;
justify-content: center;
margin: 40px auto;
width: 90%;
max-width: 800px;
align-items: center;
gap:25px;
}
.problem_foot p{
background: #fff;
border-radius: 10px;
text-align: center;
display: table;
padding: 1em 1.5em;
color: #c82127;
font-weight: bold;
}
.checklist li{
color: #19573b;
line-height: 1.2;
font-weight: bold;
list-style-type: none;
display: flex;
align-items: center;
}
.checklist li span{
color: #c82127;
font-size: 1.8em;
vertical-align: middle;
}
.hippo{
display: flex;
align-items: center;
}
.hippo p{
}
.hippo .illust{
width: 100px;
}


@media screen and (max-width:800px){
.problem_foot{
display: grid;
align-content: center;
}
}

@media screen and (max-width:640px){
.problem_pic{
width: 100%;
margin-bottom: 2%;
aspect-ratio: 4 / 2.5;
overflow: visible;
position: relative;
}
.problem_text {
font-size: 5vw;
}
.problem_pic:nth-child(2) .problem_text,
.problem_pic:nth-child(4) .problem_text{
top: 56%;
}
}
@media screen and (max-width:500px){
#service_problem h4{
font-size: 1.4rem;
}
.problem_recommend {
line-height: 1.8;
}
.problem_recommend span{
border-bottom: solid 2px #c82127;
padding-bottom: 2px;
}
.problem_recommend img {
width: 2em;
vertical-align: middle;
margin-right: 5px;
display: block;
margin: auto;
}
.problem_recommend br{
display: block;
}
.checklist{
border: solid 2px #19573b;
border-radius: 8px;
padding: 1em;
}
.checklist li{
font-size: 1.1rem;
padding-bottom: 1em;
}
.checklist li:last-child{
padding-bottom: 0;
}
.checklist li span{
display: none;
}
}


/* ===========================
SECTION STRENGTHS
=========================== */
#service_strengths .h2_en{
margin-bottom: 50px;
}

.service_strengths_thread{
width: 90%;
max-width: 1000px;
margin: auto;
padding-bottom: 40px;
margin-bottom: 50px;
border-bottom: solid 1px rgba(0,0,0,0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.service_strengths_thread:last-child{
border-bottom:none;
padding-bottom: 0;
margin-bottom: 0;
}
.service_strengths_text{
width: 68%;
}
.service_strengths_pic{
width: 30%;
}
.service_strengths_title{
height: 3em;
display: flex;
align-items: center;
position: relative;
}
.service_strengths_title .title_en{
position: absolute;
right: 0;
top: -2rem;
color: #e9e3d0;
font-size: 2.8rem;
letter-spacing: 0.04em;
mix-blend-mode: multiply;
z-index: 1;
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 50, "wght" 300;
}
.service_strengths_title::before {
content: "";
position: absolute;
height: 2em;
width: 100%;
margin: auto;
background: #f4f0e9; /* ベージュ */
clip-path: polygon(
3% 0%,      /* 左上 */
100% 0%,    /* 右上 */
97% 100%,   /* 右下 */
0% 100%     /* 左下 */
);
z-index: -1;
}
.service_strengths_text h3{
font-size: 1.3rem;
color: #19573b;
position: relative;
z-index: 2;
display: flex;
align-items: center;
padding-left: 1.5em;
}
.service_strengths_text h3 span.copy{
line-height: 1.2;
}
.service_strengths_text h3 span.number{
font-size: 4rem;
padding-right: 15px;
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 700;
font-style: normal;
}

.service_strengths_text h3 span.marker{
position: relative;
z-index: 0;
margin: 0 2px;
}
.service_strengths_text h3 span.marker::before{
content: "";
position: absolute;
bottom: -4px;
z-index: -1;
background-color: #FFF900;
height: 8px;
width: 100%;
}
.service_strengths_contents{
padding-top: 20px;
padding-left: 96px;
}
.service_strengths_text p{
padding-bottom: 0;
line-height: 1.65;
}
br.setvice_strengths_sp{
display: none;
}
.service_strengths_logo{
padding-top: 1em;
width: 100%;
max-width: 320px;
}
.service_kakomi{
border: solid 1px rgba(0,0,0,0.5);
margin-top: 1em;
padding:0.75em 1em;
font-size: 95%;
}
.service_kakomi span{
color: #bcbcbc;
}
.service_strengths_contents .checklist{
padding-top: 1em;
}
.service_strengths_pic_sp{
display: none;
}

@media screen and (max-width:1000px){
.service_strengths_contents{
padding-left: 0;
}
.service_strengths_text h3 {
padding-left: 1.0em;
}
}

@media screen and (max-width:800px){
.service_strengths_text{
width: 100%;
}
.service_strengths_pic{
display: none;
}
.service_strengths_contents{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.service_strengths_exp{
width: 63%;
}
.service_strengths_pic_sp{
display: block;
width: 34%;
}
}
@media screen and (max-width:640px){
.service_strengths_exp{
width: 100%;
margin-bottom: 1em;
}
.service_strengths_pic_sp{
width: 100%;
}
.service_strengths_pic_sp img{
width: 100%;
height: auto;
}
}
@media screen and (max-width:500px){
.service_strengths_text h3{
font-size: 1.15rem;
padding-left: 0;
}
.service_strengths_text h3 span.number{
font-size: 3.5rem;
padding-right: 8px;
}
.service_strengths_title .title_en{
right: 0;
top: -1.5rem;
color: #e9e3d0;
font-size: 2.2rem;
letter-spacing: 0.04em;
}
br.setvice_strengths_sp{
display: block;
}
.service_strengths_text h3 span.marker::before{
content: "";
position: absolute;
bottom: 0;
z-index: -1;
background-color: #FFF900;
height: 5px;
}
.service_strengths_contents .checklist{
margin-top: 1em;
}
.service_strengths_contents .checklist li{
font-size: 1rem;
}
.service_kakomi{
font-size: 90%;
}
}


/* ===========================
SECTION CHOOSE
=========================== */
#service_choose{
background: rgba(0,0,0,0.05);
position: relative;
}
#service_choose .arrow{
width: 22px;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: -12px;
z-index: 1;
}
.service_choose_wrap{
text-align: center;
width: 90%;
max-width: 800px;
margin: auto;
}
#service_choose h2{
color: #c82127;
font-size: 1.7rem;
padding-bottom: 1em;
}
.service_choose_pics{
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.service_choose_pic{
width: 24.5%;
}
.hippo_choose{
display: flex;
align-items: center;
margin: 30px auto;
width: 345px;
}
.hippo_choose p{
background: #fff;
border-radius: 10px;
text-align: center;
display: table;
padding: 1em 1.5em;
color: #c82127;
font-weight: bold;
}
.hippo_choose .illust{
width: 100px;
}
br.kakomi_list{
display: none;
}
@media screen and (max-width:640px){
.service_choose_pic{
width: 49%;
margin-bottom: 2%;
}
#service_choose .service_kakomi{
text-align: left;
line-height: 1.8;
}
br.kakomi_list{
display: block;
}
}
@media screen and (max-width:500px){
#service_choose h2{
font-size: 1.4rem;
}
}


/* ===========================
SECTION SERVICE MENU
=========================== */

#service_menu{}
.service_menu_wrap{
width: 90%;
max-width: 1000px;
margin: 50px auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.service_menu_box{
width: 48%;
position: relative;
background: rgba(0,0,0,0.05);
padding: 15px 50px;
margin-bottom: 3%;
}
p.service_menu_number{
position: absolute;
left: 15px;
top: -20px;
font-size: 4.5rem;
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 700;
font-style: normal;
color: #c82127;
}
.service_menu_box h3{
text-align: center;
color: #c82127;
font-size: 1.5rem;
}
.service_menu_pic{
margin: 1em 0;
}

@media screen and (max-width:1000px){
.service_menu_box{
padding: 15px 20px;
}
}

@media screen and (max-width:640px){
.service_menu_box{
width: 100%;
padding: 15px 30px;
margin-bottom: 5%;
}
.service_menu_pic img{
width: 100%;
}
}
@media screen and (max-width:500px){
.service_menu_box{
padding: 15px 15px;
}
p.service_menu_number{
font-size: 3.5rem;
top: -12px;
}
}


/* ===========================
SECTION AREA
=========================== */
#service_area{}

.tama_map{
width: 100%;
max-width: 900px;
margin: 0 auto 60px;
}
.service_area_pics{
width: 90%;
max-width: 900px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.service_area_box{
width: 32%;
}
.service_area_box h4{
padding: 0.5em 0;
}
.service_area_box h4 .nishitama{
color: #40a016;
padding-right: 0.25em;
}
.service_area_box h4 .higashimurayama{
color: #eb4806;
padding-right: 0.25em;
}
.service_area_box h4 .akishima{
color: #25adc7;
padding-right: 0.25em;
}
.service_area_box p{
font-size: 90%;
}
@media screen and (max-width:500px){
.service_area_pics{
width: 80%;
}
.service_area_box{
width: 100%;
}
}



/* ===========================
SECTION FLEET
=========================== */
#service_fleet{}

.service_fleet_wrap{
width: 90%;
max-width: 900px;
margin: 30px auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.service_fleet_box{
text-align: center;
width: 32%;
}
.service_fleet_box h4{
padding: 0.5em 0 0.25em;
}
.service_fleet_box p{
font-size: 85%;
font-feature-settings: "palt";
}

@media screen and (max-width:500px){
.service_fleet_wrap{
width: 80%;
}
.service_fleet_box{
width: 100%;
}
}


/* ===========================
SECTION CONTACT
=========================== */

#service_contact{
background: rgba(0,0,0,0.05);
position: relative;
}

#service_contact .problem_foot p{
padding: 2em 1.5em;
}
.service_form{
background: #fff;
width: 90%;
max-width: 900px;
margin: auto;
padding: 30px 20px;
border-radius: 15px;
}
.form_wrap{
width: 100%;
max-width: 500px;
margin: auto;
}
.form_wrap h3{
text-align: center;
padding-bottom: 1em;
color: #c82127;
}
.form_wrap dt p{
padding-bottom: 0.25em;
font-size: 90%;
}
.form_wrap dd{
padding-bottom: 1em;
}
.form_wrap input[type="text"],
.form_wrap input[type="tel"],
.form_wrap input[type="email"],
.form_wrap textarea{
width: 100%;
padding: 0.5em;
border: solid 1px rgba(0,0,0,0.3);
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
.contact_notice {
width: 100%;
padding: 10px;
border: solid 1px rgba(0, 0, 0, 0.3);
height: 15em;
overflow-y: scroll;
margin: 25px 0;
font-size: 90%;
}
p.form_radio{
padding-top: 1em;
}

input[type="submit"]{
display: block;
background: #c82127;
border: 0;
box-shadow: none;
color: #fff;
font-size: 1.2rem;
width: 15em;
margin: auto;
border-radius: 50px;
text-align: center;
padding: 0.25em 0;
text-decoration: none;
cursor: pointer;
}

input[type="submit"]:hover{
background: #e40008;
}

input[type="submit"][disabled]{
 pointer-events: none;
}

@media screen and (max-width:500px){
.service_form{
padding: 25px 20px;
}

}