@charset "UTF-8";
/* CSS Document */
/*common*/
body{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.sp {display: block;}
.pc {display: none;}

/*footer*/
#footer{
background:#333;
display: block;
text-align: center;
padding:20px;
}
#footer .flex{
max-width: 1000px;
width: 100%;
margin: auto;
padding: 10px 15px;
}
#footer img{
max-width: 250px;
width: 60%;
}
#footer small{
color:#fff;	
}

/*contents*/
section .cont_wrap{
max-width: 1000px;
width: 100%;
margin: auto;
padding: 25px 15px;
}
section h2 span{
font-size: 16px;
color: #aaa;
margin-right: 20px;
}
section h2 {
font-size: 26px;
margin-bottom: 10px;
}
section h3 {
font-weight: bold;
}

/*MV*//*header*/
#header h1 img{
position: relative;
top:20px;
width: 60%;
max-width: 250px;
}

.MV{
background: url("../images/MV.jpg") no-repeat  center top;
background-size:cover;
text-align: center;
width: 100vw;
height: 610px;
position: relative;
margin-bottom: 10%;
}
.MV h2{
font-family: 'Josefin Sans', sans-serif;
font-family: 'Jost', sans-serif;
font-size: 35px;
color: #fff;
}
.MV p{
margin-top: 10px;
color: #fff;
}
.MV .mv_item{
position: absolute;
bottom: -7%;
}
.MV .mv_item img{
width: 90%;
}

/*News*/
.news{
border-bottom: 1px solid #e6e6e6;
}
.news_table{width: 100%;}
.news_table td, .news_table th {
display: block;
width: 100%;
vertical-align: top;
}
.news_table td {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 10px;
padding-bottom: 10px;
}
.news_table th {
font-weight: normal;
}
.news_table a {
color: #333;
text-decoration: underline;
}
.news_table a:hover {
color: #333;
}

/*Products*/
.products_wrap div{
margin-top: 20px;
}
.products_wrap h3{
font-weight: bold;
}

/*solutions*/
.solutions{
background: #2c2c2c;
color: #fff;
}
.solutions h2{
color: #fff;
}
.solutions .flex img{
margin-bottom: 15px;
}
.solutions .flex h3{
font-size: 20px;
color: #fff;
font-weight: normal;
}
.solutions .flex p{
margin-top: 15px;
color: #fff;
}
.solutions_wrap div{
margin-top: 20px;
}
.solutions_wrap h4{
font-weight: bold;
color: #fff;
vertical-align: middle;
}
.solutions_wrap span img{
padding: 10px 15px 10px 0;
vertical-align: middle;
}
.solutions_wrap p{
color: #fff;
}

/*about*/
.about{
background: #f2f2f2;
}
.about_table{width: 100%;margin-bottom: 35px;}
.about_table td, .about_table th {
display: block;
width: 100%;
vertical-align: top;
}
.about_table td {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 10px;
padding-bottom: 10px;
}
.about_table th {
font-weight: bold;
}
.global_wrap div{
margin-top: 20px;
}
.global_wrap h4{
font-weight: bold;
}


/*nav*/
/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
position: fixed;
top: 15px;
right: 3%;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 101;
background: rgba(0,0,0,0.5);
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1px;
width: 30%;
background: #fff;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line::before,
.menu-btn-line::after {
content: "";
height: 1px;
width: 100%;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: inherit;
transition: inherit;
}
.menu-btn-line::before{
top: -5px;
}
.menu-btn-line::after{
top: 5px;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}
.open .menu-btn {
border-color: #fff
}
.open .menu-btn-line{
background-color: transparent;
}
.open .menu-btn-line::before,
.open .menu-btn-line::after {
top: 0;
background: #fff
}
.open .menu-btn-line::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .menu-btn-line::after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/*開いたメニュー*/
.menu {
position: fixed;
display: flex;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(1,1,1,.9);
-webkit-transition: all .5s;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 100;
}
.menu ul {
transform: translateY(30%);
padding: 0;
list-style-type: none
}
.menu li {
width: 100%;
height: 70px;
text-align: center;
}
.menu li a {
display: block;
font-size: 1.2rem;
line-height: 120%;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s;
transition: all .2s;
}
.menu li a:hover {
transform: translateX(5px);
-webkit-transition: all .2s;
transition: all .2s;
}
.menu li span,.menu_pc li span {
display: block;
font-size: 13px;
color: #fff;
}