@charset "utf-8";

.mobile{
display: none!important;
}

*{
font-size:15px;
letter-spacing: 0.02em
}

:root {
--main-width: 1320px;
--blue: #003b83;
--blue-dark: #002457;
--green: #2ca14b;
--orange: #ef6c00;
--white: #ffffff;
}

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

nav.nav{
display: none;
}

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

menu.menu{
width: 100%;
position: fixed;
top:0px;
left: 0px;
background: #fff;
z-index: 10
}

ul.menu{
width: var(--main-width);
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between
}

li.menu_logo{
width: 260px
}

li.menu{
display: flex;
align-items: center;
}

a.menu{
width: max-content;
height: 94px;
padding: 0px 15px;
text-align: center;
padding-top: 20px
}

a.menu.is-current{
border-bottom: 4px solid var(--blue)
}

a.menu span,a.menu_contact span,a.menu_estimate span{
display: block;
font-size: 11px;
margin-top: 10px;
text-align: center
}

a.menu_tel{
background: #f7f8f9
}

p.menu_tel{
font-size: 120%;
display: flex;
align-items: center;
gap: 5px;
}

p.menu_tel:before{
content: "";
width: 22px;
height: 22px;
background: url(../img/menu/tel.png) no-repeat center;
background-size: cover
}

a.menu_contact{
background: var(--blue);
color: #fff;
height: 94px;
padding: 0px 10px;
padding-top: 20px
}

a.menu_estimate{
background: var(--orange);
color: #fff;
height: 94px;
padding: 0px 10px;
padding-top: 20px
}

img.menu_icon{
width: 26px;
margin: 0px auto;
}

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


header.header{
margin-top: 90px;
}

ul.header{
width: 100%;
display: flex;
align-items: start
}

li.header_left{
width: 30%;
min-width: 430px;
background: #042869;
display: flex;
align-items: center;
height: 640px
}

article.header_left{
color: #fff;
padding-left: 60px;
}

h1.header{
width: 90%;
font-size: 52px;
line-height: 1.2;
transform: skewX(-7deg);
white-space: nowrap;
margin-bottom: 30px
}

p.header{
font-size: 17px;
line-height: 1.8;
margin-bottom: 20px
}

a.header{
display: block;
font-size: 14px;
text-decoration: underline;
line-height: 1.8;
color: #fff;
margin-bottom: 30px
}

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

li.header_right{
width: 70%;
height: 640px;
background: url(../img/header/header_back.webp?v=20260806) no-repeat center left;
background-size:cover
}

ul.header_icon{
width: 400px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}

li.header_icon{
text-align: center;
border-right: solid 0.5px #fff;
padding: 0px 15px
}

li.header_icon:nth-of-type(3){
border-right: none;
}

img.header_icon{
width: 50px;
margin: 0px auto 10px auto;
}

h3.header{
font-size: 14px
}

h3.header small{
display: block;
font-size:11px;
}

/*--------------------products--------------------*/

section#products{
padding: 60px 0px 0px 0px
}

p.section{
color: var(--blue);
font-weight: 700;
text-align: center;
font-size: 13px;
margin-bottom: 5px
}

h2.section{
font-size: 32px;
text-align: center;
margin-bottom: 10px
}

h4.section{
text-align: center;
font-weight: 500;
margin-bottom: 40px
}

div.section_flex{
width: var(--main-width);
margin: 0px auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

a.products{
display: block;
border-radius: 10px;
overflow: hidden
}

a.products:hover{
opacity: 0.5;
transition: 0.2s
}

a.blue{
border:solid 1px var(--blue);
}

a.green{
border:solid 1px var(--green);
}

a.orange{
border:solid 1px var(--orange);
}

a.black{
border:solid 1px var(--black);
}

div.products_image{
aspect-ratio: 5.2 / 4;
background: #efefef;
position: relative
}

div.products_image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom
}

article.products{
width: 100%;
position: absolute;
padding: 15px 0px 0px 15px;
top:0px;
left: 0px
}

article.products p{
width: 100%;
text-align: left;
color: #fff
}

h4.products{
color: #fff;
font-size: 22px;
line-height: 1.3
}

footer.products{
padding: 15px
}

p.products{
margin-bottom: 20px;
font-size: 13px;
height: 60px;
}

p.products_more{
width: max-content;
padding: 2px 20px 2px 10px;
display: flex;
align-items: center;
gap: 20px;
font-size: 13px;
border-radius: 3px
}

p.products_more:after{
content: "→";
font-weight: 500
}

p.blue{
border:solid 1px var(--blue);
color: var(--blue);
}

p.green{
border:solid 1px var(--green);
color: var(--green);
}

p.orange{
border:solid 1px var(--orange);
color: var(--orange);
}

p.black{
border:solid 1px var(--black);
color: var(--black);
}

/*--------------------flow--------------------*/

section#flow{
padding: 60px 0px 60px 0px
}

div.flow{
padding: 20px;
background: #efefef;
border-radius: 10px;
position: relative;
}

div.flow:after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(../img/icon/turn-triangle_icon-icons.com_53852.png) no-repeat center;
background-size: cover;
right: -20px;
top:50%;
transform: translateY(-50%)
}

div.flow:last-of-type:after{
content: "";
background:none
}

ul.flow{
display: flex;
gap: 10px;
align-items: start
}

li.flow_no{
width: 50px
}

p.flow_no{
width: 50px;
height: 50px;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
}

p.flow_no span{
color: #fff;
font-size: 18px
}

p.flow_blue{
background: var(--blue);
}

p.flow_green{
background: var(--green);
}

p.flow_orange{
background: var(--orange);
}

p.flow_black{
background: var(--black);
}

h3.flow{
color: var(--blue);
font-size: 19px;
font-weight: 700;
margin-bottom: 5px
}

p.flow{
margin-bottom: 20px;
font-size: 13px;
line-height: 1.6
}

p.flow_image{
aspect-ratio: 16 / 6;
background: #fff;
border-radius: 6px
}

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

/*--------------------quality--------------------*/

section#quality{
padding: 30px 0px;
background: #efefef url(../img/quality/quality.jpg) no-repeat right center;
background-size: 30%;
padding-left: max(20px, calc((100% - var(--main-width)) / 2));
display: flex;
align-items: center;
gap: 40px
}

section#quality p.section,section#quality h2.section,section#quality h4.section{
text-align: left
}

section#quality h4.section{
margin-bottom: 0px;
font-size: 14px;
line-height: 1.8
}

div.quality{
display: flex;
gap: 5px
}

article.quality{
background: #fff;
border-radius: 5px;
padding: 20px 20px;
text-align: center
}

img.quality_icon{
width: 40px;
margin: 0px auto 15px auto
}

h3.quality{
color: var(--blue);
font-weight: 700
}

/*--------------------order_flow--------------------*/

section#order_flow{
padding: 30px 0px
}

ul.order_flow{
width: var(--main-width);
margin: 0px auto;
display: flex;
align-items:end;
gap: 30px
}

li.order_flow_left{
width: 65%
}

li.order_flow_right{
width: 35%
}

ul.order_flow_flow{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;

}

ul.order_flow_flow li{
padding: 15px;
text-align: center;
border:solid 2px #dcdcdc;
border-radius: 10px;
position: relative
}

ul.order_flow_flow li:after{
content: "";
position: absolute;
width: 18px;
height: 18px;
background: url(../img/icon/turn-triangle_icon-icons.com_53852.png) no-repeat center;
background-size: cover;
right: -20px;
top:50%;
transform: translateY(-50%)
}

ul.order_flow_flow li:last-of-type:after{
background: none;
width: 0px;
height: 0px;
}

p.order_flow_no{
font-size: 18px;
margin-bottom: 5px;
font-weight: 700
}

h3.order_flow{
font-size: 18px;
margin-bottom: 10px;
font-weight: 700
}

p.order_flow{
font-size: 12px;
font-weight: 600;
line-height: 1.6
}

.f-blue{
color: var(--blue);
}

.f-green{
color: var(--green);
}

article.order_flow_right{
background: var(--blue);
padding: 20px;
border-radius: 10px;
text-align: center;
color: #fff
}

h3.order_flow_right{
font-size: 20px;
margin-bottom: 10px
}

p.order_flow_right{
font-size: 13px;
line-height: 1.8;
margin-bottom: 20px
}

div.order_flow_right{
width: 100%;
display: flex;
align-items: center;
gap: 10px
}

div.order_flow_right a{
padding: 8px 10px;
color: #fff;
font-size: 13px;
border-radius: 3px
}

a.mail{
width: 40%;
border:solid 1px #fff;
display: flex;
align-items: center
}

a.mail:before{
content: "";
width: 18px;
height: 18px;
background: url(../img/menu/mail.png) no-repeat center;
background-size: 100%;
margin-right: 10px
}

a.mail:after{
content: "→";
transform: scale(1.5, 1);
font-size: 15px;
margin: 0px 0px 0px auto;
font-weight: 200
}

a.stock{
width: 60%;
background: var(--orange);
border:solid 1px var(--orange);
display: flex;
align-items: center
}

a.stock:before{
content: "";
width: 18px;
height: 18px;
background: url(../img/menu/estimate.png) no-repeat center;
background-size: 100%;
margin-right: 10px
}

a.stock:after{
content: "→";
transform: scale(1.5, 1);
font-size: 15px;
margin: 0px 0px 0px auto;
font-weight: 200
}

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

ul.about{
width: var(--main-width);
margin: 30px auto 0px auto;
display:table;
table-layout: fixed;
background: #efefef
}

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

li.about_left{
width: 360px;
aspect-ratio: 16 / 9;
background: url(../img/about/about-rebuilt-products.jpg) no-repeat center;
background-size: cover
}

li.about_center{
padding: 20px;
}

li.about_right{
width: 360px
}



li.about_center p,li.about_center h2{
text-align: left
}

li.about_center h2{
color: var(--blue);
}

h6.about{
font-size: 14px;
font-weight: 500;
line-height: 1.8;
margin-bottom: 20px
}

a.about{
width: max-content;
padding: 10px 20px;
background: #fff;
color: var(--blue);
display: flex;
gap: 30px;
align-items: center;
box-shadow: 2px 2px 0px var(--blue)
}

a.about:after{
content: "→";
transform: scale(1.5, 1);
font-size: 15px;
margin: 0px 0px 0px auto;
font-weight: 200;
}

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

div#contact{
border-top:solid 1px var(--blue);
}

ul.contact{
display: flex;
align-items: center
}

li.contact_left{
width: calc(max(20px, calc((100% - var(--main-width)) / 2)) + 470px);
padding-left: max(20px, calc((100% - var(--main-width)) / 2));
background: var(--blue);
padding-top:30px;
padding-bottom: 30px
}

li.contact_left h2{
white-space: nowrap;
}

li.contact_left p,li.contact_left h2{
color: #fff;
text-align: left
}

h6.contact{
font-size: 14px;
font-weight: 500;
color: #fff
}

li.contact_center{
width: 450px;
display: flex;
align-items: center;
justify-content: center;
}

li.contact_right{
width: 400px;
}

a.contact_tel{
color: var(--blue);
font-size:32px;
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px
}

a.contact_tel:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/menu/tel.png) no-repeat center;
background-size: cover
}

p.time{
color: var(--blue);
padding-left: 30px;
margin-bottom: 20px
}

a.contact_fax{
font-size:20px;
color: var(--blue);
display: flex;
align-items: center;
gap:10px
}

a.contact_fax:before{
content: "";
width: 32px;
height: 32px;
background: url(../img/menu/fax.png) no-repeat center;
background-size: cover
}

a.contact_mail,a.contact_confirmation{
width: 100%;
display: block;
color: #fff;
height: 48px;
padding-left: 20px;
border-radius: 3px;
line-height: 48px;
display: flex;
align-items: center;
gap: 10px
}

a.contact_mail:after,a.contact_confirmation:after{
content: "→";
transform: scale(1.5, 1);
font-size: 15px;
font-weight: 200;
margin-left: 20px
}

a.contact_mail{
background: var(--blue);
margin-bottom: 5px
}

a.contact_mail:before{
content: "";
width: 22px;
height: 22px;
background: url(../img/menu/mail.png) no-repeat center;
background-size: cover
}

a.contact_confirmation{
background: var(--orange);
}

a.contact_confirmation:before{
content: "";
width: 22px;
height: 22px;
background: url(../img/menu/estimate.png) no-repeat center;
background-size: cover
}

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

footer.footer{
background: #081e45;
padding: 60px 0px;
color: #fff
}

ul.footer{
width: var(--main-width);
margin: 0px auto;
display: table;
table-layout: fixed;
margin-bottom: 40px
}

ul.footer li{
display: table-cell;
vertical-align: top
}

li.footer_left{
width: 340px;
}

li.footer{
width: calc((var(--main-width) - 340px) / 4);
padding: 0px 30px;
border-right: solid 0.4px #fff
}

li.footer:last-of-type{

border-right: none
}

img.footer_logo{
width: 260px;
margin-bottom: 20px
}

h3.footer{
margin-bottom: 10px
}

a.footer{
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
margin-bottom: 10px
}

a.footer:before{
content: "・"
}

p.copy{
text-align: center;
font-size: 13px;
font-weight: 500
}