@charset "utf-8";

.pc{
display: none!important;
}

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

:root {
--main-width: 100%;
--blue: #081e45;
--blue-dark: #002457;
--green: #2ca14b;
--orange: #ef6c00;
--white: #ffffff;
}

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

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

ul.menu{
width: var(--main-width);
margin: 0px auto;
position: absolute;
top:50%;
transform: translateY(-50%)
}

li.menu_logo{
display: none
}

li.menu{
display: block;
}

a.menu{
width: 100%;
display: block;
padding: 10px 0px;
text-align: center;
font-size: 16px;
border-bottom: solid 1px #efefef
}

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

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

a.menu_tel{
display: block;
margin-top: 20px;
background: #f7f8f9;
border-radius: 5px
}

p.menu_tel{
font-size: 120%;
justify-content: center;
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{
display: block;
background: var(--blue);
color: #fff;
padding: 10px 0px
}

a.menu_estimate{
display: block;
background: var(--orange);
color: #fff;
padding: 10px 0px
}

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

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

nav.nav{
width: 100%;
height: 60px;
top:0px;
background: #fff;
position: fixed;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 5%
}

a.nav_logo{
width: 60%;
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
position: absolute;
width: 46px;
height: 20px;
top:17px;
right:15px;
}

a.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: var(--blue);
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}

a.menu-trigger span:nth-of-type(2) {
width: 80%;
right: 0px;
top: 9px;
}

a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(9px) rotate(-45deg);
transform: translateY(9px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-9px) rotate(45deg);
transform: translateY(-9px) rotate(45deg);
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

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

ul.header{
width: 100%;
display: block;
background: #002F77;
background: linear-gradient(90deg,rgba(0, 47, 119, 1) 0%, rgba(6, 31, 64, 1) 100%);
padding-top: 100px
}

li.header_left{
width: 100%;
}

article.header_left{
color: #fff;
}

div.header_left{
aspect-ratio: 2 / 3;
background: url(../img/header/top_mobile.webp?v=20260806) no-repeat center;
background-size: cover;
overflow: hidden
}

h1.header{
font-size: 36px;
line-height: 1.3;
transform: skewX(-7deg);
white-space: nowrap;
margin-bottom: 30px;
padding-left: 5%;
}

p.header{
font-size: 15px;
line-height: 1.8;
margin-bottom: 30px;
padding-left: 5%
}

a.header{
width: max-content;
display: block;
padding: 0px 15px;
border-radius: 20px;
height: 40px;
background: #fff;
margin-left: 5%;
margin-bottom: 30px;
color: #000;
font-size: 12px;
line-height: 40px;
display: flex;
align-items: center;
gap: 10px
}

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

li.header_right{
display: none
}

ul.header_icon{
width: 100%;
margin: 0px auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 40px 0px
}

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: 32px;
margin: 0px auto 10px auto;
}

h3.header{
font-size: 14px
}

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

/*--------------------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: 28px;
text-align: center;
margin-bottom: 10px
}

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

div.section_flex{
width: var(--main-width);
width: 90%;
margin: 0px auto
}

a.products{
display: block;
border-radius: 10px;
overflow: hidden;
position: relative;
margin-bottom: 20px
}

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
}

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{
width: 100%;
padding: 15px;
position: absolute;
bottom: 0px
}

p.products{
display: none
}

p.products_more{
width: 100%;
padding: 8px 0px 8px 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
font-size: 14px;
border-radius: 3px;
color: #fff;
border: solid 1px #fff;
letter-spacing: 1px;
background: rgba(0,0,0,0.4)
}

p.products_more:after{
content: "→";
transform: scale(1.5, 1);
font-weight: 300;
font-size: 18px
}

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

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

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

div.flow:after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(../img/icon/under.png) no-repeat center;
background-size: cover;
left: 50%;
transform: translateX(-50%);
bottom: -30px;
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:#fff;
}

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

div.quality{
width: 90%;
margin: 0px auto;
overflow-x: scroll;
display: flex;
gap:10px;
padding-bottom: 30px;
}

article.quality{
min-width: 135px;
background: #fff;
border-radius: 5px;
padding: 20px 20px;
text-align: center;
flex-shrink: 0;
border:solid 1px var(--blue);
}

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 0px 0px;
background: #efefef;
margin-bottom: 30px
}

ul.order_flow{
width:90%;
margin: 0px auto;
}

li.order_flow_left{
width: 100%
}

li.order_flow_right{
width: 100%
}

ul.order_flow_flow{
width: 100%;
}

ul.order_flow_flow li{
padding: 15px;
text-align: center;
background: #fff;
border-radius: 10px;
margin-bottom: 20px;
position: relative
}

ul.order_flow_flow li:after{
content: "";
position: absolute;
width: 18px;
height: 18px;
background: url(../img/icon/under.png) no-repeat center;
background-size: cover;
left: 50%;
transform: translateX(-50%);
bottom: -20px;
}

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%;

}

div.order_flow_right a{
padding: 15px 15px;
color: #fff;
font-size: 14px;
border-radius: 3px
}

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

a.mail:before{
content: "";
width: 22px;
height: 22px;
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: 100%;
background: var(--orange);
border:solid 1px var(--orange);
display: flex;
align-items: center
}

a.stock:before{
content: "";
width: 22px;
height: 22px;
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);
padding-top: 30px;
margin-top: 30px;
background: #fff
}

ul.about li{
display: block
}

li.about_left{
width: 90%;
margin: 0px auto;
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: 90%;
margin: 0px auto
}

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 30px;
background: #fff;
color: var(--blue);
border-radius: 3px;
display: flex;
gap: 30px;
align-items: center;
border:solid 1px 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{
padding-bottom: 30px
}

ul.contact{
width: 90%;
padding: 30px 0px;
margin: 0px auto;
border-radius: 10px;
background: var(--blue);
}

li.contact_left{
width: 90%;
margin: 0px auto
}

li.contact_left h2{
font-size: 24px
}

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

h6.contact{
font-size: 15px;
font-weight: 500;
color: #fff;
margin-bottom: 20px
}

li.contact_center{
display: none;
}

li.contact_right{
width: 100%;
}

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: 90%;
margin: 0px auto;
display: block;
color: #fff;
height: 54px;
padding-left: 20px;
border-radius: 3px;
line-height: 54px;
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;
border:solid 1px #fff;
margin-bottom: 20px;
}

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: 30px 0px 40px 0px;
color: #fff
}

ul.footer{
width: 84%;
margin: 0px auto 30px auto;
}

ul.footer li{
display: block;
border-bottom: solid 0.2px #fff;
padding: 20px 0px 10px 0px
}

p.footer{
margin-bottom: 10px;
font-size: 15px;
}

li.footer{
width: 100%;
}

li.footer div{
display: none
}

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

h3.footer{
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}

h3.footer:after{
content: "";
width: 14px;
height: 14px;
background: url(../img/footer/icon_22-1.webp) no-repeat center;
background-size: cover;
transition: transform 0.4s ease;
}

h3.footer.is-open:after{
transform: rotate(90deg);
}

h3.footer + div{
display: none;
}

h3.footer + div a.footer{
display: block;
}

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
}