/* //////////////////////// 共有 ////////////////////////////// */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html{
scroll-behavior: smooth;
}

body{
font-size:16px;
font-family:'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic, 'MS PGothic', Osaka, arial, sans-serif;
color:#333;
line-height:1.5;
text-align: justify;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

h1{
font-size:36px;
font-weight:300;
text-align:center;
padding-top:50px;
margin-bottom:50px;
}

h2{
font-size:24px;
font-weight:300;
margin-bottom:30px;
}

h3{
fotn-size:20px;
font-weight:600;
margin-bottom:15px;
}


p{
margin-bottom:2em;
}

.wrap{
margin:0 auto;
max-width:1000px;
}

ol{
margin-left:1.5em;
}

ol li{
margin-bottom:15px;
}

.anchor{
position:relative;
top:-220px;
}


/* 項目を隠す場合 */
.hidden-box{
display:none;
}

/* ヘッダー */
header{
width:100%;
height:141px;
padding:20px 0px 16px;
background:#fff;
position:fixed;
top: 0;
left: 0;
border-bottom:1px solid #ccc;
z-index:999;
}

.header-box{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
justify-content: space-between;
align-items: center;
padding:0 0 23px;
}

.site-logo{
}

/* お問合せボタン */
.contact-button li{
list-style:none;
}

.contact-button li a{
background:url("../images/contact-icon.png") no-repeat #307cd5;
background-size: 18%;
background-position:35px 9px;
color:#fff;
padding:12px 30px 12px 80px;
text-decoration:none;
vertical-align:middle;
margin-left:20px;
}

/* メニュー */
.menu-content {
margin-bottom: 0;
z-index: 1;
width:100%;
}
.menu-content ul {
list-style:none;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content: space-between;
}
.menu-content ul li {
}

.menu-content ul li a {
    position: relative;
    display: inline-block;
    padding: 0;
    color: #333;
    vertical-align: middle;
    text-decoration: none;
    font-size: 16px;
}

.menu-content ul li a::before, .menu-content ul li a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
        left: 5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition:all .3s ease;
-webkit-transition:all .3s ease;
opacity:0;
}


.menu-content ul li a:hover::before, .menu-content ul li a:hover::after{
bottom:-32px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #307ce5;
    border-right: 2px solid #307ce5;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition:all .3s ease;
-webkit-transition:all .3s ease;
opacity:1;
}


.menu-content ul li a:hover {
color:#307ce5;
}



/* スマホ時のみ表示 */
.sp-navi{
display:none;
}

/* メニューオープン用のチェックボックスを非表示にする */
#menu-btn-check {
display: none;
}

/* メインコンテンツ */
.main-content{
margin-top:141px; /* headerの高さに合わせる */
}

/* 注意 */
.attention-corona{
border:1px solid #ccc;
padding:20px;
text-align:center;
margin-bottom:50px;
}

.attention-corona h3{
font-size:16px;
}

.attention-corona p{
margin:0;
font-size:14px;
}

/* お問い合わせバナー */
dl.contact-banner {
list-style:none;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
align-items: center;
background:#666;
margin-top:50px;
}

dl.contact-banner dt{
width:33%;
color:#fff;
font-weight:600;
font-size:18px;
text-align:center;
}

dl.contact-banner dd{
width:67%;
border:1px solid #666;
background:#fff;
padding:20px;
font-size:14px;
}

dl.contact-banner dd .tel{
font-size:24px;
font-weigt:bold;
}

dl.contact-banner dd .mail{
font-size:24px;
font-weigt:bold;
}

/* /////////////////// トップページ  //////////////////////////// */
/* -- キービジュアル -- */
#keyv {
width: 100%;
height: 550px;
min-width: 1000px;
overflow: hidden;
font-weight: 400;
text-align: center;
position: relative;
background: center center no-repeat;
background-size: cover;
}
#keyv .caroufredsel_wrapper > div {
height: 550px !important;
}

#carousel li {
height: 550px;
position: relative;
overflow: hidden;
float: left;
}

/* 全画面 */
.all-area2 img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

@media (max-width: 1300px) {
.all-area2 img {
width: auto;
height: 100%;
}
}

.all-area2 .content-area{
width:1000px;
margin:0 auto;
}

.all-area2 h2{
font-size:40px;
color:#fff;
text-align:left;
text-shadow: 0 0  8px #000;
position: relative;
top:220px;
line-height:1.5em;
}

/* 全画面 */
.all-area1 img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

@media (max-width: 1300px) {
.all-area1 img {
width: auto;
height: 100%;
}
}

.all-area1 .content-area{
width:1000px;
margin:0 auto;
}

.all-area1 span{
font-size:26px;
background:#fff;
padding:8px 16px;
color:#333;
text-align:left;
position: relative;
top:185px;
}

.all-area1 h2{
font-size:40px;
color:#fff;
text-align:left;
text-shadow: 0 0  8px #000;
position: relative;
top:200px;
margin-bottom:0;
}

.all-area1 p{
font-size:23px;
color:#fff;
text-align:left;
text-shadow: 0 0  8px #000;
position: relative;
top:210px;
}

/* 二画面 */
#carousel li.half-area {
background-color: #eee;
}

.half-area-box{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
.half-area-box div {
width: 50%;
}

.half-area img {
width:auto;
height:100%;
object-fit:cover;
object-position:50% 50%;
}

@media (min-width: 1300px) {
.half-area img {
width: 100%;
height: auto;
}
}

.half-area .content-area{
padding:0 80px;
}

.half-area h2{
font-size:24px;
text-align:left;
line-height:1.5em;
}

.half-area p{
font-size:18px;
}

/* 前へ＆次へ */
#keyv .prev,
#keyv .next {
width: 50px;
height: 100%;
position: absolute;
top: 0;
background: center center no-repeat;
z-index: 1;
cursor: pointer;
}

#keyv .prev {
left: 0;
background-image: url("../images/kv_prev.png");
}
#keyv .next {
right: 0;
background-image: url("../images/kv_next.png");
}

/*-- ページャー --*/
.pager {
text-align: center;
padding: 10px;
position: absolute;
left: 0;
bottom: 0;
width:100%;
z-index: 2;
}
.pager a {
border: 3px solid #fff;
background-color: #fff;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
margin-left: 20px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.pager a:first-child {
margin-left: 0;
}
.pager a:hover,
.pager a.selected {
border-color: #307ce5;
background-color: #307ce5;
}
.pager a span {
display: none;
}


/* NEWS */
.top-news{
padding:70px 0;
}

.top-news h2{
text-align:center;
font-size:40px;
font-weight:300;
line-height:1em;
margin-bottom:40px;
}

.top-news h2 span{
font-size:16px;
line-height:2em;
}

.top-news dl{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.top-news dt{
width:15%;
}

.top-news dd{
border-left: 1px solid #ccc;
width:85%;
padding-left:20px;
}

.top-news dd ul{
list-style:none;
}

.top-news dd a{
color:#307ce5;
}

/* BUSINESS */

.top-business{
padding:70px 0;
background:#eee;
}

.top-business h2{
text-align:center;
font-size:40px;
font-weight:300;
line-height:1em;
margin-bottom:40px;
}

.top-business h2 span{
font-size:16px;
line-height:2em;
}

.top-business p{
margin-bottom:40px;
text-align:center;
}

.top-business-intro{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.top-business-intro div{
width:33.3%;
background:#efefef;
position:relative;
}

.top-business-intro h3{
width:100%;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color:#fff;
}

.top-business-intro div img{
object-fit:cover;
width:100%;
height:400px;
}


.top-business-menu {
max-width: 1000px;
margin: auto;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.top-business-menu li {
width: 33.3%;
height: 390px;
position: relative;
overflow: hidden;
}

.top-business-menu li *:not(img) {
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.top-business-menu li img {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
width:100%;
}

.top-business-menu li:after,
.top-business-menu li a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

/*-- ホバー --*/
.top-business-menu li:after {
content: '';
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-opacity: 0;
opacity: 0;
z-index: 1;
}
.top-business-menu li a {
display: block;
z-index: 1;
color: #FFF;
z-index: 2;
text-decoration:none;
}

.top-business-menu li h3 {
text-transform: uppercase;
-webkit-text-transform: uppercase;
font-size: 24px;
font-weight: 300;
text-align: center;
position: relative;
top: 110px;
-webkit-transform: translateY(55px);
transform: translateY(55px);
-webkit-text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
}

.top-business-menu li p {
font-size:15px;
width: 100%;
padding: 0 20px;
-webkit-opacity: 0;
opacity: 0;
position: absolute;
top: 185px;
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
.top-business-menu li:hover:after {
-webkit-opacity: 1;
opacity: 1;
position: absolute;
}
.top-business-menu li a:hover > * {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-opacity: 1;
opacity: 1;
}

/* ////////////////////// 固定ページ ///////////////////////////// */
.page-ttl{
position:relative;
margin-bottom:70px;
background:#000;
height:200px;
padding:0;
}

.page-ttl h1{
color:#fff !important;
text-shadow: 0 0  8px #000;
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}

.page-ttl img{
width:100%;
height:200px;
object-fit:cover;
filter: opacity(70%);
}

.second-page{
margin-bottom:70px;
}


/* ////////////////////// 強み・提供価値 ///////////////////////////// */
.story-midashi{
color:#307ce5; 
text-align:center
}

/* ////////////////////// サービス・商品 ///////////////////////////// */
.product-wrap{
margin-bottom:70px;
padding-bottom:70px;
border-bottom:1px solid #ccc;
}

.product-wrap-last{
margin-bottom:70px;
}

.product-ttl{
max-width: 1000px;
margin: auto;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
background:#eee;
margin-bottom:50px;
align-items: center;
}

.product-ttl div{
width:50%;
}

.product-ttl div:nth-child(1){
padding:0 50px;
}

.product-ttl div:nth-child(1) h2{
font-size:28px;
}

.product-ttl div:nth-child(1) p{
margin:0;
font-size:18px;
}

.product-ttl div:nth-child(2){
padding:0;
height:300px;
}

.product-ttl div:nth-child(2) img{
width:100%;
height:300px;
object-fit:cover;
}

ul.product-menu{
list-style:none;
max-width: 1000px;
margin-bottom:50px ;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content:center;
}

ul.product-menu li a {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #333;
    vertical-align: middle;
    text-decoration: none;
    font-size: 16px;
}

ul.product-menu li a::before, ul.product-menu li a::after{
    display:none;
    position: absolute;
    top: 0;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

ul.product-menu li a::after{
    left: 5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
}

ul.product-menu li:nth-child(2){
margin:0 100px;
}

/* ペーパークッション封筒 */
.paper-cushion-wrap{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
}

.paper-cushion-text{
width:45%;
margin-right:5%;
}


.paper-cushion-explain{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content:space-between;
width:50%;
}

.paper-cushion-explain div{
width:49%;
text-align:center;
margin-bottom:10px;
font-size:14px;
}

.paper-cushion-explain div:nth-child(1){
margin-bottom:20px;
}

.paper-cushion-explain div:nth-child(2){
margin-bottom:20px;
}

.paper-cushion-explain div:nth-child(5){
margin-bottom:0;
}

.paper-cushion-explain div:nth-child(6){
margin-bottom:0;
}


.paper-cushion-explain div img{
width:100%;
margin-bottom:3px;
}



/* 折れない傘のポイント */
.umbrella-point1{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin-bottom:50px;
}

.umbrella-point1-explain h3{
font-size:18px;
font-weight:300;
}

.umbrella-point1-explain{
width:30%;
margin-right:5%;
}

.umbrella-point{
border: 1px solid #307ce5;
color:#307ce5;
padding:8px 10px;
font-weight:bold;
font-size:13px;
line-height:4em;
}


.umbrella-point1-explain ul{
list-style:none;
}

.umbrella-point1-explain ul li{
font-size:16px;
margin-bottom:10px;
}

.umbrella-point1-explain ul li span{
background:#307ce5;
color:#fff;
padding:5px 8px;
margin-right:5px;
}


.umbrella-point1-image{
width:65%;
}

.umbrella-point1-image img{
width:100%;
}

.umbrella-point-other{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.umbrella-point-other div{
width:30%;
font-size:14px;
}

.umbrella-point-other div:nth-child(2){
margin:0 5%;
}

.umbrella-point-other h3{
font-size:18px;
font-weight:300;
margin-bottom:10px;
}

.umbrella-point-other img{
width:100%;
}

.umbrella-point-other p{
margin-top:10px;
}




/* ////////////////////////// お問合せフォーム ////////////////////////////// */

.form{
border:1px solid #ccc;
padding:50px;
}

.form-attention{
font-size:13px;
}

.contact-form{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
border:1px solid #ccc;
border-bottom:none;
margin-top:30px;
}

.contact-form dt{
width:30%;
padding:20px 0;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
background:#eee;
padding:20px;
}

.contact-form dd{
width:70%;
padding: 20px 0; 
border-bottom:1px solid #ccc;
padding:20px;
}


.hissu{
padding:3px 8px 4px;
background:#f00;
color:#fff;
font-size:12px;
font-weight:bold;
margin-right:5px;
position:relative;
top:-1px;
line-height:1em;
}

select{
font-size:16px;
color:#333;
border:1px solid #ccc;
padding:5px;
}

.contact-form dd input[type="text"], .contact-form dd input[type="tel"], .contact-form dd input[type="email"]{
width:100%;
height:30px;
border:1px solid #ccc;
padding:5px;
font-size:16px;
}

.contact-form dd.form-tel input[type="text"]{
width:100px;
}

.contact-form dd textarea{
width:100%;
border:1px solid #ccc;
padding:5px;
font-size:16px;
}

.form-button{
text-align:center;
margin-top:25px;
}

.form-button input[type="submit"]{
padding:10px;
width:200px;
background:#307ce5;
color:#fff;
font-size:16px;
font-weight:bold;
border-radius:0;
border:0;
margin-top:5px;
}

/* MW WP Form */
.mw_wp_form_input .input-hidden{
display:none;
}

/* 確認画面で非表示にするもの */
.mw_wp_form_confirm .confirm-hidden{
display:none;
}




/* ////////////////////// 会社概要 ///////////////////////////// */

.company{
margin-bottom:50px;
}
.company dl{ 
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
}

.company dl:nth-child(1){ 
}

.company dl dt{
width:15%;
border-bottom:1px solid #ccc;
padding:15px 0px;
}

.company dl dd{
width:85%;
border-bottom:1px solid #ccc;
padding:15px 0px;
}

.company-ayumi{
margin-top:50px;
}

/* ////////////////////// 個人情報保護方針 ///////////////////////////// */
ol.privacy{
margin-left:1.5em;
}

ol.privacy li{
margin-bottom:1em;
}

/* /////////////////////////////// フッター ///////////////////////////////// */
footer{
padding:30px 0;
background:#111;
color:#fff;
font-size:12px;
}

.footer-box{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content: space-between;
}

.footer-menu{

}

.footer-menu ul{
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
}

.footer-menu li{
margin-right:30px;
}

footer li a{
color:#fff;
text-decoration:none;
}


@media screen and ( max-width:800px )
{
body{
font-size:14px;
}

h1{
font-size:24px;
}

h2{
font-size:18px;
margin-bottom:20px;
}

h3{
font-size:16px;
font-weight:normal;
margin-bottom:20px;
}

h4{
font-size:15px;
margin-bottom:12px;
}

.anchor{
position:relative;
top:-100px;
}

input[type="textbox"]{
    -webkit-appearance: none;
}

input[type="submit"]{
    -webkit-appearance: none;
}

input[type="button"]{
    -webkit-appearance: none;
}

.wrap{
padding:0 20px;
width:100%;
}

/* ヘッダ */
header{
height:70px;
padding:20px 0px 20px;
}

.header-box{
width:100%;
}
.site-logo{
padding-left:50px;
}
.site-logo img{
width:200px;
}

.contact-button{
}

.contact-button li a{
padding:20px;
font-size:0;
width:50px;
height:50px;
background-size: 75%;
background-position:50% 50%;
}




/* スマホ時のみ表示 */
.sp-navi{
display:inherit;
}

/* メニューコンテンツ */
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: -100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background:#fff;
transition: all .3s ease-in;/*アニメーション設定*/
padding:0;
padding-top:60px;
}

.menu-content ul {
display:block;
}
.menu-content ul li {
border-bottom: solid 1px #ccc;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size:14px;
box-sizing: border-box;
color:#666;
text-decoration: none;
padding: 9px 15px 10px 15px;
position: relative;
}

/* ホバー時の下矢印を非表示 */
.menu-content ul li a::before, .menu-content ul li a::after{
display:none;
}
.menu-content ul li a::after{
display:none;
}
.menu-content ul li a:hover::after {
display:none;
}

/* メニューボタン */
.menu-btn {
position: fixed;
top: 15px;
left: 10px;
display: flex;
height: 50px;
width: 50px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #fff;
}

/* メニュークローズ時の三本線 */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 2px;
width: 30px;
background-color: #333;
position: absolute;
 transition:.2s;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}

/* メニューオープン時の三本線 */
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
transition:.2s;
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
transition:.2s;
}

#menu-btn-check:checked ~ .menu-content {
left: 0;/*メニューを画面内へ*/
}

/* メインコンテンツ */
.main-content{
margin-top:70px;
}

/* 注意 */
.attention-corona{
margin-bottom:30px;
}

.attention-corona h3{
font-size:14px;
}

.attention-corona p{
font-size:12px;
}


/* お問い合わせバナー */
dl.contact-banner {
margin-top:30px;
}

dl.contact-banner dt{
width:100%;
font-size:16px;
}

dl.contact-banner dd{
width:100%;
font-size:13px;
}

dl.contact-banner dd .tel{
font-size:20px;
display:block;
}

dl.contact-banner dd .mail{
font-size:18px;
}



/* /////////////////// トップページ  //////////////////////////// */
/* -- キービジュアル -- */
#keyv {
min-width:auto;
height: 350px;
}

#keyv .caroufredsel_wrapper > div {
height: 350px !important;
}

#carousel li {
height: 350px;
}

/* 全画面 */
.all-area1 .content-area{
width:100%;
padding:0 40px;
}

.all-area1 img{
left:20%;
}

.all-area1 span{
font-size:18px;
padding:8px 16px;
top:110px;
}

.all-area1 h2{
font-size:24px;
text-shadow: 0 0  8px #000;
top:120px;
margin-bottom:0;
}

.all-area1 p{
font-size:16px;
top:135px;
width:100%;
}

.all-area2 .content-area{
width:100%;
padding:0 40px;
}

.all-area2 h2{
font-size:26px;
top:135px;
}


/* 二画面 */
.half-area-box div {
width: 100%;
}

.half-area .content-area{
padding:20px 40px;
}

.half-area h2{
font-size:16px;
line-height:1.5em;
margin-bottom:10px;
}

.half-area p{
font-size:14px;
}

.half-area img {
width:100%;
height:150px;
object-fit:cover;
object-position:50% 50%;
}

/* 前へ＆次へ */
#keyv .prev,
#keyv .next {
width: 30px;
}

/* NEWS */
.top-news{
padding:30px 0;
}

.top-news h2{
font-size:30px;
margin-bottom:20px;
}

.top-news h2 span{
font-size:12px;
}

.top-news dt{
width:100%;
}

.top-news dd{
border-left:0;
width:100%;
padding-left:0;
}

.top-news dd ul li span{
display:block;
margin-right:0;
}

/* BUSINESS */
.top-business{
padding:30px 0;
}

.top-business h2{
font-size:30px;
margin-bottom:20px;
}

.top-business h2 span{
font-size:12px;
}

.top-business-menu li {
width: 100%;
height: 250px;
}

.top-business-menu li *:not(img) {
-webkit-transition: none;
transition: none;
}

.top-business-menu li:after,
.top-business-menu li a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

/*-- ホバー --*/
.top-business-menu li:after {
background-color: rgba(0, 0, 0, 0);
-webkit-transition: none;
transition: none;
}

.top-business-menu li h3 {
font-size:24px;
top: 110px;
-webkit-transform: none;
transform: none;
}


.top-business-menu li p {
display:none;
}


/* ////////////////////// 固定ページ ///////////////////////////// */
.page-ttl{
margin-bottom:30px;
height:150px;
}

.page-ttl img{
width:100%;
height:150px;
object-fit:cover;
filter: opacity(70%);
}

.second-page{
margin-bottom:30px;
}

/* ////////////////////// 強み・提供価値 ///////////////////////////// */
.story-midashi span{
display:block;
}

/* ////////////////////// サービス・商品 ///////////////////////////// */
.product-wrap{
margin-bottom:30px;
padding-bottom:30px;
}

.product-wrap-last{
margin-bottom:30px;
}

.product-ttl div{
width:100%;
}

.product-ttl {
margin-bottom:30px;
}

.product-ttl div:nth-child(1) {
padding:20px;
}

.product-ttl div:nth-child(1) h2{
font-size:20px;
}

.product-ttl div:nth-child(1) p{
font-size:16px;
}

.product-ttl div:nth-child(2){
    height:auto;
    }

.product-ttl div:nth-child(2) img{
width:100%;
height:150px;
object-fit:cover;
}

ul.product-menu{
margin-bottom:0px;
}

ul.product-menu li{
width:100%;
margin-bottom:10px;
}

ul.product-menu li a {
    padding: 0 0 0 16px;
    font-size: 15px;
}

ul.product-menu li a::before, ul.product-menu li a::after{
    bottom: 2;
    left: 0;
    right:auto;
}

ul.product-menu li a::after{
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

ul.product-menu li:nth-child(2){
margin:0;
margin-bottom:10px;
}

.paper-cushion-text{
width:100%;
margin:0;
}

.paper-cushion-explain{
width:100%;
margin:0;
}

.paper-cushion-explain div{
width:49%;
}

.umbrella-point1{
margin-bottom:30px;
}

.umbrella-point1 h3{
font-size:16px;
}

.umbrella-point1-image{
width:100%;
margin-right:0;
}

.umbrella-point1-image img{
width:100%;
}

.umbrella-point1-explain{
width:100%;
}

.umbrella-point{
padding:4px 5px;
font-size:12px;
line-height:3em;
}


.umbrella-point1-explain ul{
list-style:none;
}

.umbrella-point1-explain ul li{
font-size:14px;
margin-bottom:10px;
}

.umbrella-point-other{
display:flex;
}

.umbrella-point-other div{
width:100%;
}

.umbrella-point-other div:nth-child(2){
margin:0;
}

.umbrella-point-other h3{
font-size:16px;
margin-bottom:10px;
}



/* ////////////////////////// お問合せフォーム ////////////////////////////// */

.input-attention div{
width:100%;
}

.input-attention div:nth-child(2){
margin-left:0;
}

.contact-form dt{
width:100%;
padding:10px;
}

.contact-form dd{
width:100%;
padding:10px;
}

.contact-form dd input[type="text"], .contact-form dd input[type="tel"], .contact-form dd input[type="email"]{
font-size:16px;
}

.contact-form dd.form-tel input[type="text"]{
width:25%;
}

/* /////////////////////////////// フッター ///////////////////////////////// */
footer{
padding:20px 0;
}

.footer-menu{
margin-bottom:20px;
width:100%;
}

.copyright{
text-align:center;
width:100%;
}
}