@charset "UTF-8";
.pc {display: none;}
.sp {display: inherit;}

/**************************** header ********************************/
header {
position: relative;
width:100%;
height:auto;
background: white;
z-index: 999999999;
}

header .triangle1 {
position: absolute;
top:0;
left:0;
width:800px;
height:100px;
background: url("../img/triangle_1.svg") left top / contain no-repeat;
z-index: -1;
}

header .triangle2 {
position: absolute;
top:0;
right:0;
width:90px;
height:390px;
background: url("../img/triangle_2.svg") right top / contain no-repeat;
z-index: 100;
}

.header_logo {
width:200px;
height:80px;
background: rgba(25,70,135,0.0);
margin-top:0;
margin-left:0%;
}

.header_logo img {
height:43px;
margin-top:18px;
margin-left:10%;
}

.header_menu {
position: absolute;
top:0;
right:10%;
writing-mode:vertical-lr;
}

.header_menu li {
height:4em;
padding-top:80px;
padding-bottom: 15px;
margin-left:3em;
font-weight: 400;
font-size: 13px;
border-bottom:solid 1px rgb(25,70,135);
}

.header_menu li:hover {
background: url("../img/menu_bg.svg") center top / 21px no-repeat;
}

.header_menu li a {display: block;}
.header_menu li a:link {}
.header_menu li a:visited {}
.header_menu li a:hover {color: rgba(25,70,135,1.0); opacity: 1; transition: all 0.5s ease;}

#nav_btn {
position: fixed;
top:28px;
right:7%;
width:25px;
height:25px;
z-index: 9999999999;
background: url("../img/navi_btn.svg") 0 0 / 25px no-repeat;
animation: nav_btn 0.6s steps(10) forwards;
}
@keyframes nav_btn {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px -250px; }
}

#nav_btn.active {
animation: nav_btn_active 0.6s steps(14) forwards;
}
@keyframes nav_btn_active {
  0% { background-position: 0px -250px; }
  100% { background-position: 0px -600px; }
}

#global_menu {
display: none;
position: fixed;
width:100%;
height:100%;
top:0;
left:0;
background: rgba(25,70,135,0.9);
z-index: 10010;
}
#global_menu.active {
display: block;
}

.global_menu_box {
letter-spacing: -0.5em;
}

.global_menu_box_1st {
width:100%;
height:80px;
margin: 0 auto;
letter-spacing: normal;
}

.global_menu_box_2nd {
width:calc(100% - 30px);
margin: 0 15px;
letter-spacing: -0.5em;
text-align: center;
}

.global_menu_box_2nd ul li {
display: inline-block;
width:calc(50% - 30px);
margin: 5px;
padding:10px;
background: white;
color: rgb(25,70,135);
cursor: pointer;
letter-spacing: normal;
transition: 0.3s;
font-weight: 700;
}

.global_menu_wide {
display: inline-block;
width:calc(100% - 30px) !important;
margin: 5px;
padding:10px;
cursor: pointer;
letter-spacing: normal;
transition: 0.3s;
}

.global_menu_tel {
display: inline-block;
width:calc(100% - 30px) !important;
margin: 5px;
padding:10px;
cursor: pointer;
letter-spacing: normal;
transition: 0.3s;
}

.global_menu_box_2nd ul li:hover, .global_menu_wide:hover, .global_menu_tel:hover {
background: rgba(0,150,250,1.0);
color: white;
}


/**************************** KEYVISUAL ********************************/
.keyvisual {
position: relative;
width:100%;
height:88vw;
margin-top:0px;
}

/*
.keyvisual::before {
position: absolute;
top:-1px;
left:0;
content:"";
width:100%;
height:10vw;
background: url("../img/KV_top.svg") top left / 101% no-repeat;
z-index: 9999;
}*/

.keyvisual::after {
position: absolute;
bottom:-1px;
left:0;
content:"";
width:100%;
height:10vw;
background: url("../img/KV_bottom.svg") top left / 101% no-repeat;
}

.main_copy1, .main_copy2, .main_copy3 {
position: relative;
width:100%;
height:88vw;
}

.main_copy1 {background: url("../../img/index_kv2.jpg") center center / cover no-repeat;}
.main_copy2 {background: url("../../img/index_kv2B.jpg") center center / cover no-repeat;}
.main_copy3 {background: url("../../img/index_kv2C.jpg") top center / cover no-repeat;}

.keyvisual_halftone {
position: absolute;
top:0;
left:0;
width:100vw;
height:88vw;
background: url("../img/bg_halftone3.png") left top / 4px repeat;
}

.main_copy1 h1, .main_copy2 h1, .main_copy3 h1 {
position: absolute;
top:calc((88vw - 5em) / 2);
left:8%;
color:white;
}

.main_copy1 h1 .big, .main_copy2 h1 .big, .main_copy3 h1 .big {
font-family: 'Roboto Condensed', sans-serif;
font-size: 350%;
font-weight: 700;
}

.main_copy1 h1 .small, .main_copy2 h1 .small, .main_copy3 h1 .small {
font-size: 110%;
padding-right: 8%;
}


/**************************** Sections ********************************/
section {
}

.section_inner {
width:calc(80% + 20px);
margin-left:calc(10% - 10px);
margin-right:calc(10% - 10px);
padding-top:30px;
}

.title {
width:100%;
}
.title .mid {font-family: 'Roboto Condensed', sans-serif;
font-size: 250%;
font-weight: 700;
letter-spacing: 1px;
line-height: 1em;}
.title .bot {font-size: 100%; padding-top:5px; letter-spacing: normal;}


/**************************** Buttons ********************************/
.btn_blue {
display: block;
width:180px;
height:40px;
margin-left:calc((100% - 180px) / 2);
background: rgb(25,70,135);
border-radius: 20px;
text-align: center;
letter-spacing: normal;
line-height: 3.2em;
font-weight: 700;
color:white !important;
margin-top:30px;
}

.btn_white {
display: block;
width:180px;
height:40px;
margin-left:calc((100% - 180px) / 2);
background: white;
border-radius: 20px;
text-align: center;
letter-spacing: normal;
line-height: 3.2em;
font-weight: 700;
margin-top:30px;
}

.btn_gray {
isplay: block;
width:180px;
height:40px;
margin-left:calc((100% - 180px) / 2);
background: rgb(238,238,238);
border-radius: 20px;
text-align: center;
letter-spacing: normal;
line-height: 3.2em;
font-weight: 700;
margin-top:30px;
}


/**************************** PRODUCTS ********************************/
.dia_inner {
margin-top:0px;
width:calc(80% + 20px);
margin-left:calc(10% - 10px);
margin-right:calc(10% - 10px);
}

.dia_inner .title {
padding-top:30px;
}

.products {
display: flex;
flex-wrap: wrap;
width:100%;
align-items: flex-start;
}

.products .child {
width:100%;
margin:30px 0px 0;
color:white;
}

.products .child h4 {
font-weight: 700;
padding:1em 0;
}


/**************************** COMPANY ********************************/
.company {
display: flex;
flex-wrap: wrap;
margin:30px 0 0;
}

.company_left {
width:100%;
margin-right:0px;
}

.company_right {
width:100%;
text-align: justify;
margin-top:20px;
}

/**************************** WORKS ********************************/
.works_inner {
display: flex;
flex-wrap: wrap;
width:100%;
}

.works_inner .box {
width:calc(100% - 2px);
margin:30px 0px 0px;
border:solid 1px #ccc;
background: white;
}

.works_inner .box .title {
font-weight: 700;
color:rgb(25,70,135);
padding:10px;
}

.works_inner .box .body {
padding:10px;
}


/**************************** footer ********************************/
footer {
position: relative;
width:100%;
background: rgba(25,70,135,1.0);
}

footer .inner {
position: relative;
width:100%;
padding-top:30px;
padding-bottom: 50px;
}

.footer_logo {
width:200px;
margin-left:8%;
}

.footer_eng {
margin-left:8%;
color: white;
font-size: 80%;
}

.footer_text {
margin-left:8%;
margin-top:1em;
}

.footer_menu {
position: absolute;
top:0;
right:10%;
writing-mode:vertical-lr;
color:white;
}

.footer_menu li {
height:4em;
padding-top:110px;
padding-bottom: 15px;
margin-left:3em;
font-weight: 400;
font-size: 15px;
border-bottom:solid 1px rgb(255,255,255);
}

.footer_menu li:hover {
background: url("../img/menu_bg_fot.svg") center top / 21px no-repeat;
}

footer .copyright {
width:84%;
padding:25px 8%;
background: rgba(88,88,88,1.0);
color:white;
font-size: 60%;
}

footer .btn_contact {}

footer .btn_top {}


/**************************** 2nd Floor COMPANY ********************************/
.keyvisual_2nd {
}

.keyvisual_2nd::after {
}

.bg_white_2nd {background: white; padding:50px 0;}
.bg_blue_2nd {background: rgb(25,70,135); padding:50px 0;}
.bg_gray_2nd {background: rgb(238,238,238); padding:50px 0;}
.bg_dark_2nd {background: rgb(222,222,222); padding:50px 0;}

.inner_2nd {
padding-top:10px;
}

.flex {
display: flex;
flex-wrap: wrap;
width:80%;
margin-top: 50px;
margin-left:10%;
margin-right:10%;
align-items:stretch;
}

.flex_left_photo {
display: none;
}

.flex_left {
display: none;
}

.flex_right {
width:100%;
}

.flex_right .table {
display: flex;
flex-wrap: wrap;
align-items:stretch;
}

.flex_right .table_left {
width:7em;
padding-bottom:8px;
margin-bottom:8px;
border-bottom:solid 1px rgb(222,222,222);
font-weight: 600;
}

.flex_right .table_right {
width:calc(100% - 7em);
padding-bottom:8px;
margin-bottom:8px;
border-bottom:solid 1px rgb(222,222,222);
}

.flex_right .table_right iframe {
width:calc(100% - 2px);
margin:20px 0;
border:solid 1px rgb(200,200,200);
}


/**************************** 2nd Floor PRODUCTS ********************************/

.flex_products {
display: flex;
flex-wrap: wrap;
width:80%;
margin-top: 50px;
margin-left:10%;
margin-right:10%;
align-items:stretch;
}

.flex_left_products {
display: none;
}

.flex_right_products {
width:100%;
}

.flex_right_products .title {
width:calc(100% - 0em);
padding:20px 0 20px 0;
text-align: center;
font-weight: 700;
color:white;
background: rgb(25,70,135);
}

.products_flex {
display: flex;
flex-wrap: wrap;
width:calc(100% + 0px);
margin-left:0px;
}

.products_flex .child {
width:calc(100% - 0px);
margin:20px 0 10px 0;
}

.flex_products .title {
width:calc(100% - 0em);
padding:20px 0 20px 0em;
background: rgb(25,70,135);
color:white;
font-weight: 700;
}

.flow_table {
width: 110%;
margin-left:-5%;
overflow: hidden;
background: rgb(245,245,245);
border: solid 1px #CCC;
}

.flow_table td {
}

.flow_table .tate {
width: 1em;
height: 10em;
padding:1em 0em 1em 0em;
writing-mode:vertical-rl;
}

.flow_table .tate:first-child {
padding-left:5px;
}

.flow_table img {
width:8px;
vertical-align: middle;
margin-top:2em;
margin-right:0.5em;
}

.flex_left_order {
width:calc(100% - 50em);
background: url("../../products/orderflow.jpg") right top / contain no-repeat;
opacity: 0.5;
margin-right:5em;
margin-left:0;
}

.order_button {
width:calc(9em + 70px);
padding:15px 35px;
background: rgb(12,181,155);
font-weight: 700;
color:white !important;
border-radius: 8px;
}

.otoiawase {
text-align: center;
}


/**************************** 2nd Floor WordPress ********************************/

.flex_wp {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width:84%;
margin-top: 50px;
margin-left:8%;
margin-right:8%;
}

.flex_left_wp {
width:100%;
}

.flex_left_wp img {
width:100%;
margin-bottom:1em;
}

.flex_center_wp {
width:100%;
height:1em;
background: url("../img/bg_halftone.png") right top / 2px repeat;
opacity: 0.4;
margin-top:3em;
margin-bottom:5em;
}

.flex_right_wp {
width:100%;
}

.blog_title {
font-size: 150%;
font-weight: 700;
margin-bottom:1em;
}

.blog_date {
margin:0 0 1em 0;
}

.blog_tag {
margin:1em 0;
padding:1em 0;
border-top: solid 1px rgb(25,70,135);
border-bottom: solid 1px rgb(25,70,135);
color:rgb(125,125,125)
}

.blog_tag li::before {
font-family: "FontAwesome", "Font Awesome 5 Free";
content: '\f02b';
margin-right:0.5em;
}

.go_prev {
float: left;
display:block;
margin-top:20px;
padding:10px 20px;
background-color:rgb(25,70,135);
color:white;
cursor: pointer;
}

.go_next {
float: right;
display:block;
margin-top:20px;
padding:10px 20px;
background-color:rgb(25,70,135);
color:white;
cursor: pointer;
}

.go_prev:hover, .go_next:hover {
}

.flex_right_wp .widget_box {
margin-bottom:20px;
}

.flex_right_wp .widget_title {
width:calc(100% - 40px);
padding: 15px 20px;
background: rgb(25,70,135);
color: white;
margin-bottom:1em;
}

.flex_right_wp ul {
width:calc(100% - 0px);
}

.flex_right_wp ul li {
margin-left: 1em;
padding-bottom:5px;
list-style: disc !important;
}

.blog_thumbnail img {
width:100%;
height:auto !important;
}

.blog_article {
padding:30px;
background: white;
margin-bottom: 30px;
}