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

/**************************** 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:220px;
height:22px;
background: rgba(25,70,135,0.0);
margin-top:0px;
margin-left:5%;
padding-top:40px;
}

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

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

.header_menu li:hover {
background: url("../img/menu_bg.svg") center -5px / 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;}

@media screen and (min-width:1000px) and (max-width:1199px) {
header .triangle1 { width:600px; height:75px;}
header .triangle2 { width:75px; height:330px;}
.header_menu { top:0; right:15%;}
.header_menu li { height:4em; padding-top:50px; padding-bottom: 15px; margin-left:3em;}
.header_menu li:hover { background: url("../img/menu_bg.svg") center -20px / 21px no-repeat;}
}

@media screen and (min-width:768px) and (max-width:999px) {
header .triangle1 { width:600px; height:75px;}
header .triangle2 { width:75px; height:330px;}
.header_menu { top:0; right:15%;}
.header_menu li { height:4em; padding-top:40px; padding-bottom: 15px; margin-left:3em;}
.header_menu li:hover { background: url("../img/menu_bg.svg") center -30px / 21px no-repeat;}
}


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

.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:40vw;
}

.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:40vw;
background: url("../img/bg_halftone3.png") left top / 4px repeat;
}

.main_copy1 h1, .main_copy2 h1, .main_copy3 h1 {
position: absolute;
top:calc((40vw - 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: 450%;
font-weight: 700;
}

.main_copy1 h1 .small, .main_copy2 h1 .small, .main_copy3 h1 .small {
font-size: 120%;
}


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

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

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

.dia_inner .title .mid {
padding-top:20px;
}

/**************************** Buttons ********************************/
.btn_blue {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(25,70,135);
border-radius: 25px;
text-align: center;
padding-top:15px;
padding-bottom:15px;
font-weight: 700;
color:white !important;
}

.btn_white {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: white;
border-radius: 25px;
text-align: center;
padding-top:15px;
padding-bottom:15px;
font-weight: 700;
}

.btn_gray {
isplay: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(238,238,238);
border-radius: 25px;
text-align: center;
padding-top:15px;
padding-bottom:15px;
font-weight: 700;
}


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

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

.products .child {
width:calc((100% - 60px) / 3);
margin:60px 10px;
color:white;
}

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


/**************************** COMPANY ********************************/
.company {
display: flex;
flex-wrap: wrap;
width:100%;
align-items: flex-start;
margin:60px 0;
}

.company_left {
width:calc(50% - 40px);
margin-right:40px;
}

.company_right {
width:50%;
text-align: justify;
}

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

.works_inner .box {
width:calc((100% - 66px) / 3);
margin:60px 10px;
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:80px;
padding-bottom: 80px;
}

.footer_logo {
width:220px;
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: 80%;
}

footer .btn_contact {
position: fixed;
bottom:90px;
right:0;
background: rgb(12,181,155);
color:white;
font-weight: 700;
writing-mode:vertical-lr;
padding:30px 15px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
letter-spacing: 0.1em;
}

footer .btn_top {
position: fixed;
bottom:20px;
right:0;
background: rgb(12,181,155);
color:white;
font-weight: 700;
padding:15px 18px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
letter-spacing: 0.1em;
}


/**************************** 2nd Floor common ********************************/
.keyvisual_2nd {
position: relative;
width:100%;
height:10vw;
margin-top:40px;
background: rgb(222,222,222);
}

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

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

.inner_2nd {
}

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

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

.flex_left {
width:1em;
background: url("../img/bg_halftone.png") right top / 2px repeat;
opacity: 0.4;
margin-right:5em;
margin-left:calc(100% - 51em);
}

.flex_right {
width:45em;
}

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

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

.flex_right .table_right {
width:35em;
padding-bottom:8px;
margin-bottom:8px;
border-bottom:solid 1px rgb(200,200,200);
}

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

@media screen and (max-width:1024px) {

.flex_left_photo {
width:calc(100% - 40em);
background:url("../../img/index_kv5.jpg") left top / cover no-repeat;
opacity: 0.5;
margin-right:4em;
margin-left:0;
}

.flex_left {
width:1em;
background: url("../img/bg_halftone.png") right top / 2px repeat;
opacity: 0.4;
margin-right:4em;
margin-left:calc(100% - 41em);
}

.flex_right {
width:36em;
}

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

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

.flex_right .table_right {
width:28em;
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:90%;
margin-top: 50px;
margin-left:0;
margin-right:10%;
align-items:stretch;
}

.flex_left_products {
width:1em;
background: url("../img/bg_halftone.png") right top / 2px repeat;
opacity: 0.4;
margin-right:5em;
margin-left:calc(100% - 61em);
}

.flex_right_products {
width:55em;
}

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

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

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

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

.flow_table {
width: 100%;
}

.flow_table td {
}

.flow_table .tate {
width: 1em;
height: 10em;
padding:1em 0.5em 1em 0.9em;
writing-mode:vertical-rl;
border: solid 1px #CCC;
background: rgb(248,248,248);
}

.flow_table img {
width:10px;
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 {}

@media screen and (max-width:1024px) {

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

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

.flow_table img {
margin-right:0.2em;
}

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


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

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

.flex_left_wp {
width:60%;
}

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

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

.flex_right_wp {
width:calc(40% - 10em);
}

.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;
}