@charset "utf-8";

.mobile{
display: none;
}

/*--------------------more--------------------*/

div.more{
display: flex;
align-items: start;
gap: 30px;
justify-content: center
}

a.more{
display: block;
width: 300px;
margin-top: 40px;
height: 56px;
background: #009460;
color: #fff;
line-height: 56px;
justify-content: center;
border-radius: 5px;
display: flex;
align-items: center;
letter-spacing: 0.05em
}

img.more{
width: 20px;
margin-left: 30px
}

h3.more{
text-align: center
}

h3.more small{
font-size:11px;
margin-bottom: 2px;
display: block;
}

/*--------------------nav--------------------*/

nav.nav{
display: none
}

/*--------------------header--------------------*/

header.header{
width: 100%;
height: 800px;
position: relative
}

img.header{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center
}

article.header{
width: 1000px;
position: absolute;
top:60%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff
}

h1.header{
font-size:44px;
margin-bottom: 30px
}

h2.header{
font-size:28px;
line-height: 1.5;
margin-bottom: 20px
}

h3.header{
padding: 4px 15px;
width: max-content;
font-size:44px;
color: #000;
background: #fff;
margin-bottom: 10px
}

h4.header{
padding: 4px 15px;
width: max-content;
font-size:38px;
color: #000;
background: #fff;
margin-bottom: 30px
}

h4.header span{
color: #ff0000
}

a.header{
width: max-content;
padding: 15px 40px;
background: #009460;
color: #fff;
display: block;
border-radius: 5px;
font-size:15px
}

/*--------------------menu--------------------*/

menu.menu{
width: 100%;
position: fixed;
top:0px;
left: 0px;
height: 80px;
display: flex;
align-items: center;
z-index: 9
}

li.menu_inner{
width: 1040px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between
}

a.menu_logo{
width: 200px
}

div.menu_right{
width: 800px;
display: flex;
align-items: center;
justify-content: right
}

a.menu{
color: #fff;
margin-left: 40px
}

/*--------------------about--------------------*/

section#about{
background: #f7fef6;
padding: 60px calc((100% - 900px) / 2);
display: flex;
align-items: start;
justify-content: space-between
}

article.about{
width: 400px;
}

div.about_image{
width: 450px;
}

h2.section{
font-size:54px;
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 600;
font-style: normal;
color: #009460;
margin-bottom: 20px
}

h2.section:after{
content: "";
width: 70px;
height: 4px;
background: #009460;
display: block;
margin-top: 10px
}

h3.section{
color:#444;
font-size:20px;
letter-spacing: 0.05em;
margin-bottom: 40px;
}

h1.about{
font-size:25px;
color:#444;
letter-spacing: 0.05em;
margin-bottom: 40px
}

h5.about{
font-size:14px;
line-height: 1.8;
text-align: justify;
font-weight: 500
}

p.about_image_main{
width: 100%;
aspect-ratio: 3/ 2;
background: #fff
}

p.about_image_sub{
width: 60%;
aspect-ratio: 16 / 9;
background: #dcdcdc;
position: relative;
left: 50px;
top:-20px
}

/*--------------------services--------------------*/

section#services{
padding: 60px 0px
}

.center{
text-align: center
}

h2.center:after{
content: "";
width: 70px;
height: 4px;
background: #009460;
display: block;
margin: 10px auto 0px auto
}

h3.maintenance{
font-size:15px;
margin-bottom: 40px;
line-height: 1.6;
font-weight: 500
}

div.services,div.services_page{
width: 1040px;
margin: 0px auto;
display: flex;
gap: 0px;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap
}

div.services_page{
flex-wrap: nowrap
}

article.services{
width: 345px;
text-align: center;
letter-spacing: 0.05em;
margin-bottom: 20px
}

img.service_icon{
width: 90px;
margin: 0px auto 20px auto
}

h3.service{
color: #009460;
font-size:24px;
margin-bottom: 5px
}

h4.service{
color: #009460;
font-size:13px;
margin-bottom: 15px
}

h5.service{
color: #444;
font-size:13px;
line-height: 1.4;
font-weight: 500;
}

/*--------------------Achievements--------------------*/

section#achievements{
padding: 60px 0px;
background: #f7fef6;
}

div.achievements{
width: 1040px;
margin: 0px auto;
overflow-x: scroll;
display: flex;
padding-bottom: 20px;
}

article.achievements{
width: 260px;
flex-shrink: 0;
margin-right: 20px
}

p.achievements{
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: 15px;
border-radius: 10px;
overflow: hidden
}

p.achievements img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

h3.achievements{
font-size:16px;
color: #444;
display: flex;
align-items: center;
margin-bottom: 15px
}

span.achievements{
background: #000;
font-size:10px;
color: #fff;
margin-left: 10px;
padding: 2px 10px;
border-radius: 3px
}

p.achievements_date{
font-size:11px;
margin-left: 10px;
}

h5.achievements{
font-size:12px;
line-height: 1.6;
font-weight: 500
}

/*--------------------faq--------------------*/

section#faq{
padding: 60px 0px;
background: #009460
}

section#faq h2.section{
color: #fff;
}

section#faq h2.section:after{
background: #fff;
}

section#faq h3.section{
color:#fff;
}

div.faq{
width: 800px;
margin: 0px auto
}

article.faq {
width: 100%;
text-align: left;
color: rgb(102, 102, 102);
margin: 0px auto 15px;
padding: 10px;
background: rgb(255, 255, 255);
border-radius: 15px;
}

article.faq:hover{
cursor: pointer
}

h3.faq {
font-size: 14px;
font-weight: 600;
position: relative;
padding: 18px 10px;
display: flex;
align-items: center;
}

span.faq {
font-size: 200%;
vertical-align: middle;
margin-right: 15px;
color: #009460;
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 400;
}

h3.faq::after {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: url(../img/faq/plus.png) center center / cover no-repeat;
transition: transform 0.3s ease-in-out;
}

h4.faq {
font-size: 15px;
font-weight: 500;
line-height: 1.8;
text-align: justify;
display: none;
padding: 10px 10px 10px 60px;
border-top: 1px solid rgb(239, 239, 239);
}

/*--------------------footer--------------------*/

footer.footer{
background: #fff;
padding: 40px 0px;
text-align: center;
border-top:solid 1px #efefef
}

img.footer_logo{
width: 260px;
margin: 0px auto 30px auto;
}

iframe.map{
width: 100%;
height: 300px
}

h3.address{
color: #444;
line-height: 1.4;
margin-bottom: 30px
}

div.footer{
display: flex;
align-items: start;
gap: 30px;
justify-content: center;
margin: 0px auto 30px auto;
}

p.footer{
width: max-content;
background: #444;
font-size:16px;
color: #fff;
padding: 5px 20px 
}

p.footer a{
color: #fff;
text-decoration: underline
}

p.footer a:hover{
text-decoration: none
}

div.footer_link{
display: flex;
align-items: center;
justify-content: center;
gap:30px;
margin-bottom: 40px
}

a.footer_link{
color: #444;
display: flex;
align-items: center;
justify-content: center
}

a.footer_link:hover{
text-decoration: underline
}

a.footer_link:after{
content: "";
width: 1px;
height: 20px;
background: #444;
margin-left: 30px
}

div.footer_link a.footer_link:last-child:after{
content: "";
background:none;
}

/*--------------------breadcrumb--------------------*/

ol.contents {
width: 1040px;
margin: 0px auto;
font-size: 13px;
border-bottom: solid 1px #dcdcdc;
padding-top: 20px;
padding-bottom: 20px;

}

ol li{
display:inline-block;
list-style: none;
vertical-align: middle
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

ol li a {
text-decoration: none;
color: #000;
font-weight: 500;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

/*--------------------contents--------------------*/

article.message{
width: 800px;
margin: 0px auto
}

h6.message{
font-size: 15px;
line-height: 2.4;
font-weight: 500;
margin-bottom: 40px
}

h3.message{
justify-content: right;
display: flex;
align-items: center;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;
letter-spacing: 0.05em
}

h3.message span{
font-size:12px;
margin-right: 20px
}

img.message{
width: 160px
}

/*--------------------contact--------------------*/

div.contact{
width: 900px;
margin: 0px auto 20px auto;
}

h5.contact{
font-size:15px;
line-height: 1.6;
font-weight: 500;
text-align: center;
margin-bottom: 40px
}

ul.contact{
width: 100%;
font-size:15px;
display: table;
table-layout: fixed
}

ul.contact li{
display: table-cell;
vertical-align: middle
}

ul.contact:last-of-type{
margin-bottom: 40px;
}

li.contact_left{
width: 220px;
}

span.contact_left{
font-size:13px;
background: #999;
color:#fff;
padding: 7px 12px 7px 12px;
margin-left: 10px;
}

li.contact_right{
border-bottom: solid 1px #dcdcdc;
padding: 20px 0px 20px 0px;
font-weight: 500
}

select {
-webkit-appearance: none;
border: none;
outline: none;
background: transparent;
color: #666;
font-size:15px;
padding: 5px 10px 5px 0px;
}

input[type="text"],input[type="tel"],input[type="email"]{
width: 100%;
height: 40px;
border:none;
border-radius: 0;
outline: none;
background: none;
font-size:15px;
}

textarea{
width: 100%;
height: 200px;
border:solid 1px #dcdcdc;
padding: 15px
}

div.check{
width: 300px;
margin: 0px auto;
font-size:16px;
font-weight: 100;
margin-bottom: 40px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

input[type="checkbox"]{
width: 100%;
height: 100%;
border:none;
box-shadow: none;
border-radius: 0px;
}

a.checkbox{
text-decoration: underline;
color: #000
}

a.checkbox:hover{
text-decoration: none;
}

input[type="submit"],input[type="button"]{
width: 300px;
height: 56px;
display: block;
margin: 0px auto;
background: #009460;
-webkit-appearance: none;
border:none;
color:#fff;
border-radius: 5px;
font-weight: 600
}

input[type="submit"]{
margin-bottom: 20px
}

input[type="button"]{
background: #666;
}

input[type="submit"]:hover,input[type="button"]:hover{
cursor: pointer;
opacity: 0.7;
}

/*--------------------trouble--------------------*/

section#trouble{
padding: 60px;
background: url(../img/maintenance/32182660_m.jpg) no-repeat center top;
background-size: 100%;
position: relative;
color: #fff
}

section#trouble::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
z-index: 1;
pointer-events: none;
}

ul.trouble{
width: 1040px;
margin: 0px auto;
display: flex;
align-items: start;
position: relative;
z-index: 1;
}

li.trouble_left{
width: 60%;
}

li.trouble_right{
width: 40%;
}

h2.trouble{
text-align: center;
font-size:28px;
margin-bottom: 30px
}

h2.trouble small{
display: block;
margin-bottom: 20px
}

h3.trouble{
font-size:20px;
margin-bottom: 20px;
display: flex;
align-items: center
}

h3.trouble:before{
content: "";
width: 26px;
height: 26px;
background: url(../img/maintenance/mark_check_illust_1104.png) no-repeat center;
background-size: 100%;
margin-right: 10px
}

/*--------------------trouble--------------------*/

section#solution{
padding: 60px 0px;
background: #efefef
}

h2.solution{
text-align: center;
color: #009460;
font-size:30px;
letter-spacing: 0.02em;
margin-bottom: 40px
}

h2.solution small{
display: block;
margin-bottom: 15px
}

div.solution{
width: 900px;
margin: 0px auto;
display: flex;
align-items: start;
justify-content: space-between;
flex-wrap: wrap
}

article.solution{
padding: 0px 26px 26px 26px;
border-radius: 15px;
box-shadow: 5px 5px 5px #999;
width: 430px;
background: #fff;
margin-bottom: 30px
}

p.solution{
font-size: 34px;
position: relative;
top:-17px;
width: max-content;
margin: 0px auto;
text-align: center;
color: #009460;
transform: skewX(-10deg)
}

h2.solution{
font-size: 28px;
}

p.solution_image{
aspect-ratio: 3 / 2;
margin-bottom: 20px
}

img.solution_image{
width: 100%;
height: 100%;
object-fit: cover
}

h4.solution{
font-size:14px;
line-height: 1.5;
font-weight: 500;
text-align: justify
}

/*--------------------case--------------------*/

section#case{
padding: 60px 0px;
background: #fff
}

div.case{
width: 700px;
margin: 0px auto;
}

article.case{
border-bottom: solid 1px #009460;
padding-bottom: 20px;
margin-bottom: 20px;
display: flex;
align-items: center
}

p.case_image{
width: 200px;
aspect-ratio: 3 / 2;
background: #dcdcdc
}

div.case_right{
width: 500px;
padding-left: 20px
}

p.case_date{
color: #009460;
font-size:16px;
margin-bottom: 10px
}

h3.case{
font-size:22px;
color: #444;
line-height: 1.2;
margin-bottom: 15px
}

h4.case{
font-size:14px;
color: #444;
line-height: 1.6;
font-weight: 500
}

/*--------------------privacy--------------------*/

div.contents{
width: 1040px;
margin: 0px auto
}

article.contents{
width: 100%;
margin-bottom: 50px;
}

h3.contents{
font-size:14px;
font-weight: 600;
margin-bottom: 40px;
}

h4.contents{
font-size: 12px;
font-weight: 400;
line-height: 2.0
}