@charset "UTF-8";
/* CSS Document */

html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
	font-size:110%;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    text-align:justify;
}
a:hover {
    opacity: 0.6;
}
h1 {
    font-size:140%;
    font-weight:600;
?}
h2 {
    font-size:90%;
    font-weight:600;
    color:#4b2d2b;
}
h3 {
    font-size:80%;
}
.content {
   display: block;
 }
.br-sp {
	display:block; 
}
.br-pc {
	display:none;
} 
.head_img {
    width:1000px;
    height:auto;
    margin:0 auto;
}
.head_img img {
    width:100%;
    height:auto;
}
.wrap_1 {
    width:1000px;
    height:auto;
    overflow:hidden;
    margin:0 auto 50px;
}
.wrap_2 {
    width:1000px;
    height:auto;
    overflow:hidden;
    margin:0 auto 50px;
}
.wrap_3 {
    width:1000px;
    height:auto;
    overflow:hidden;
}
.wrap_4 {
    width:100%;
    height:auto;
    overflow:hidden;
    background-color:#f7f7f7;
    padding:20px 0;
}
.block_1 {
    width:328px;
    height:auto;
    padding:10px;
    box-sizing:border-box;
    background-color:#8e292d;
    float:left;
}
.block_2 {
    width:328px;
    height:auto;
    padding:10px;
    box-sizing:border-box;
    background-color:#00679a;
    float:left;
    margin:0 8px;
}
.block_3 {
    width:328px;
    height:auto;
    padding:10px;
    box-sizing:border-box;
    background-color:#00558e;
    float:left;
}
.block_ttl {
    font-weight:600;
    width:100%;
    height:80px;
    margin-bottom:30px;
    color:#fff;
    text-align:center;
}
.block_txt {
    font-size:80%;
    width:95%;
    height:250px;
    margin:0 auto 30px;
    color:#fff;
}
.block_pic {
    width:100%;
    height:auto;
    border:2px solid #fe98ae;
    box-sizing:border-box;
}
.block_pic img {
    width:100%;
    height:auto;
}
.ttl_box {
    width:100%;
    height:40px;
    border-bottom:3px solid #660000;
    margin-bottom:30px;
}
.ttl_box_half {
    width:99%;
    height:40px;
    border-bottom:3px solid #660000;
    margin-bottom:30px;
}
.three_block {
    width:33.3%;
    float:left;
    overflow:hidden;
}
.four_block {
    width:25%;
    float:left;
    overflow:hidden;
    text-align:center;
}
.four_block img {
    width:95%;
    border:2px solid #eee;
}
.logo {
    width:100%;
    text-align:center;
}
.logo img {
    width:70%;
}
.logo_txt {
    width:80%;
    margin:0 auto;
    text-align:center;
}
.catalog {
    width:100%;
    text-align:center;
    margin:10px 0;
}
.catalog img {
    width:50%;
        border:2px solid #eee;
}
.img_box {
    width:100%;
}
.img_box img {
    width:100%;
}
.two_block {
    width:50%;
    height:auto;
    float:left;
    overflow:hidden;
}
.two_block_2 {
    width:100%;
    height:auto;
    float:left;
    overflow:hidden;
}
.product_box {
    width:90%;
    height:135px;
    margin:0 auto 30px;
    border:1px solid #dcdcdc;
    overflow:hidden;
    box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), -1px 1px 10px 0px rgba(10,10,10,0.02);   
    box-sizing:border-box;
    background-color:#fff;
    position:relative;
}

.product_img {
    width:20%;
    position:absolute;
    top:20%;
    left:2%;
}
.product_img img {
    width:100%;
}
.product_txt {
    width:65%;
    position:absolute;
    top:5%;
    left:22%; 
}
.product_txt p {
    font-size:80%;
}
.product_bt {
    width:15%;
    position:absolute;
    top:5%;
    right:2%; 
    text-align:center;
}
.product_bt img {
    width:100%;
}

.fa-arrow-circle-right {
    font-size:200% !important;
    color:#a9a9a9;
}


@media screen and (max-width: 812px) {
.br-sp {
	display:none; 
}
.br-pc {
	display:block; 
}
   .head_img {
    width:100%;
}
    .wrap_1 {
    width:100%;
    margin:0 auto 50px;
    }
    .wrap_2 {
    width:95%;
    }
.wrap_3 {
width:100%;
}
.block_ttl {
    height:auto;
}
.block_txt {
    width:100%;
    height:auto;
}
.block_1 {
    width:100%;
    height:auto;
    float:none;
}
.block_2 {
    width:100%;
    height:auto;
    float:none;
    margin:0;
}
.block_3 {
    width:100%;
    height:auto;
    float:none;
}
.ttl_box {
    height:auto;
}
.three_block {
    width:100%;
    float:none;
}
.logo img {
    width:50%;
}
.logo_txt {
    width:100%;
}
.two_block {
    width:100%;
    float:none;
}
.two_block_2 {
    width:100%;
    float:none;
}
.four_block {
    width:100%;
    float:none;
    margin-bottom:30px;
}
.four_block img {
    width:60%;
}
}

.top-image-area{
width: 100%;
height: 60px;

}

.btn4{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
}

.btn4::before {
content: '';
position: absolute;
bottom: -2px;
left: 0px;
width: 100%;
height: 2px;
background: #000208;
display: block;
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
.btn4:hover::before {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1)
}

.btn2{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
border-bottom: 2px solid #000208;

}

ul {
overflow:hidden;
list-style:none;
margin: 0 auto;
z-index: 20;
}

ul li {
display: inline-block;
padding: 26px 10px 20px 10px;
}

ul li:hover {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1)
}

header{
z-index: 0;
height: 0px;
position: absolute;
top: 0px;
width: 100%;
text-align: center;
z-index: 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}