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

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html{ -webkit-text-size-adjust: 100%; height: 100%;}
body{ height:100%; letter-spacing:1px; animation: fadeIn 1.5s ease 0s 1 normal; -webkit-animation: fadeIn 1.5s ease 0s 1 normal; /*font-family: "Zen Maru Gothic", serif;*/}

.first-view{ position: relative;}
.first-view figure{ width: 100%; height: 100vh; filter: brightness(.75);}
.first-view img{ width: 100%; height: 100%; object-fit: cover;}

.first-view .inner{ position: absolute; right: 150px; top: 200px; z-index: 5; width: 100%; max-width: 700px; padding: 30px;}
.first-view .inner h1{ font-size: 50px; color: #fff; font-weight: 600; line-height: 1.6}
.first-view .inner p{ font-size: 16px; color: #fff; line-height: 1.6}

header{ width: 100%; background: rgba(255, 255, 255, .5); padding:10px 0; position:absolute; top:0;}

.head-logo{ max-width:1140px; width: 100%;  padding: 0 20px; margin: 0 auto; display: flex; align-items: end;}

.head-logo h1{ font-size:14px; color: #630;}
.head-logo p{ color: #630;}


.has-padding{ padding: 80px 0;}
.has-padding-bottom{ padding-bottom: 80px;}
.has-padding-top{ padding-top: 80px;}
.has-bg{ background: #f8f1e3; padding: 60px 0;}


.sec-head{ width: 100%; padding: 20px; margin-bottom: 30px;}
.sec-head > h2{ font-size: 24px; color: #633328; font-weight: 600; text-align: center; border-bottom: 1px dotted #666; padding-bottom: 20px;}
.sec-head > h2 span{ display: block; font-size: 12px; margin-top: 5px;}
.sec-head > p{ text-align: center; font-size: 14px; margin-top: 15px; line-height: 1.4;}
.sec-head > h3{ margin-top: 30px; text-align: center; font-size: 16px;}
.sec-head > h3 span{ font-size: 12px; display: block; line-height: 1.4; margin-top: 10px;}

.has-img { display: flex; flex-wrap: wrap;}
.img-left { width: 40%; position: relative;}
.img-left > figure{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f2f2f2; width: 100%;}
.img-left > figure img{ width: 100%; height: 100%; object-fit: cover;}

.img-text { width: 60%; padding: 30px 30px 30px 60px; min-height: 300px;}

.img-text h2{ color: #633328; font-size: 20px; font-weight: 600; border-bottom: 1px dotted#333; line-height: 1.4; margin-bottom: 10px;}

.img-text > p{ line-height: 1.6; font-size: 14px;}
/**/
.flexi-wrap { width: 100%; margin-bottom: 40px; overflow: hidden; padding-bottom: 5px;}
/*逆*/
.reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse;}

.reverse .img-left { width: 40%; position: relative;}
.reverse .img-text { width: 60%; padding: 30px 60px 30px 0;}
.reverse .img-left > figure{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.reverse .img-left > figure img{ width: 100%; height: 100%; object-fit: cover;}

.wrapper{ width: 100%; max-width: 1140px; margin: 0 auto;}
.others{ columns: 2; width: 100%; padding: 30px 0; }

.others dl dt{ font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.others dl dd{ line-height: 1.4; font-size: 14px; margin-bottom: 10px;}

.product{ width: 100%; overflow:hidden; margin-bottom:50px;}
.product-box{ overflow:hidden; width:100%; background:url(images/7fd0g3jpie.jpg) repeat; display: flex;}
.product ul{ display: flex; flex-wrap: wrap;}
.product li{ width: calc(100% / 4 - 15px); margin-right: 15px; font-size: 12px; margin-bottom: 10px; padding-bottom: 40px;}
.product li img{ width: 100%; height: 100%; object-fit: cover; margin-bottom: 5px;}
.product li span{ line-height: 1.3;}

.inner{ margin-top: 20px;}
.button{ background: #006837; display: inline-block; margin-top: 10px; border-radius: 6px; box-shadow: 5px 5px #ccc; transition: .3s;}

.button:hover { box-shadow: unset; transform: translateY(4px);}
.button a{ color: #fff; padding: 15px 20px; display: block;}

.has-link{ font-size: 14px; color: #fff;}
.has-link::after{ content: ''; display: inline-block; width: 15px; height: 15px; background-image: url("images/hib7hqjv0d.png"); background-repeat: no-repeat; background-size: contain; margin-left: 5px;}

.spec{ padding:10px 0;}
.spec p{ font-size: 14px; line-height:1.5; color: #333;}

.product-left{ width: 35%; padding-top:30px;}
.product-right{ width: 65%; padding: 30px;}

.product-left figure{ width: 90%; margin: 30px auto 0; position: relative; overflow: hidden; height: 0; padding-top: 65%;}
.product-left figure img { position: absolute; top: 0; left: 0; transition: all 0.4s ease-out 0.1s; -webkit-transition: all 0.4s ease-out 0.1s; width: 100%; height: 100%; object-fit: contain;}


.product-right h2{ font-size: 20px; color: #555; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dotted #333; font-weight: bold;}
.product-right li{ font-size: 14px; color: #333; line-height: 1.5; margin-bottom: 10px;}
.pro-thum{ margin-top: 30px;}
.pro-thum ul{ display: flex; flex-wrap: wrap;}
.pro-thum li{ width: calc(100% / 4 - 10px); margin-right:10px;}

.pro-thum ul li figure{ width: 100%; position: relative; overflow: hidden; height: 0; padding-top: 67%; background: #fff;}
.pro-thum ul li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}



.kaku{ background:url(images/fx8ykvbevi.jpg) no-repeat 0 0.5em; width:100%; overflow:hidden; padding-left:20px;}

.product-bg{ width: 100%; overflow:hidden; clear:both; margin-bottom:100px;}

.product-title h2{ border-bottom: 1px dotted #333; padding-bottom:20px; margin-bottom:40px; color:#333; font-size:30px; text-align:center; overflow:hidden;}
.product-title h2 span{ font-size:12px; color:#666; display:block;}
.product-title h3{ font-size:20px; color:#333; text-align:left; margin-bottom:20px;}
.product-title h3 span{ font-size:14px; color:#666;}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
フッター
–––––––––––––––––––––––––––––––––––––––––––––––––– */

footer::after{ content: ""; display: block; clear: both;}

footer{ width: 100%; background: #f8f1e3; padding: 50px 0; position: relative; margin-top: 100px;}
.footer-inner{ max-width: 1140px; width: 100%; margin: 0 auto; overflow:visible; position: relative;}
.footer-left{ width: 50%; float: left; margin-bottom: 50px;}
.footer-left h2{ font-size: 20px; font-weight: bold; line-height: 1.4; color: #633328;}
.footer-left h2 span{ font-size: 14px;}


.footer-left p span a:hover{ background: #006837; }
.footer-left p{ color: #603813; font-size: 14px; line-height: 1.4; margin-bottom: 5px;}
.footer-left p span a{ display: inline-block; padding: 5px; background: #006837; color: #fff; font-size: 12px; transition: 0.5s;}

.footer-left p span a:hover { background: #633328; }

/*.footer-right{ width: 50%; float: right; margin-bottom: 50px;}*/
.footer-right{ max-width: 400px; width: 100%; float: right; margin-bottom: 50px;}
.footer-right li{ width: 50%; float: left; padding: 5px;}
.footer-right li a{ width: 100%; transition: 0.5s;}
.footer-right li a:hover{ opacity: .7;}
.footer-right li a img{ width: 100%;}

.copyright{ width: 100%; clear: both; background: #603813; position: absolute; bottom: 0; left: 0; text-align:center; font-size: 12px; text-align: center; padding: 15px;}
.copyright p{ color: #fff;}


.page-top{ position: absolute; right: 0; top: -100px; width: 200px; height: auto;}
.page-top a{ display: block; width: 100%; height: auto; text-align: center;}

/*フッターナビここまで*/


/**/

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
max-width: 1024px;
max-width: 934px;
max-width: 782px;
max-width: 600px;
max-width: 480px;

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
タブレット用　1400pxまで
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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


}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
タブレット用　1280pxまで
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

.product-bg {
  width: 100%;
  overflow: hidden;
  clear: both;
  max-width: 1000px;
  margin: 0 auto 100px;
}
}

@media only screen and (max-width: 1230px){
  .wrapper{ max-width: 100%; padding: 0 20px;}

}
@media only screen and (max-width: 1130px){ 

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
フッター
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{ width: 100%; position: relative;}
.footer-inner{ max-width: 1100px; width: 100%; padding: 0 15px;}
.footer-left{ width: 50%; float: left;}
.footer-left h2{ font-size: 20px; font-weight: bold; line-height: 1.4; color: #633328;}
.footer-left h2 span{ font-size: 14px;}

.footer-left p{ font-size: 14px; line-height: 1.4;}
.copyright{ width: 100%; clear: both; background: #603813; position: absolute; bottom: 0; left: 0; text-align:center; font-size: 12px; text-align: center; padding: 15px;}
.copyright p{ color: #fff;}



}

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


}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
タブレット用　991pxまで(934pxの方が良い？)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

.first-view .inner { position: absolute; right: 0; top: 200px; z-index: 5; width: 100%; max-width: 700px; padding: 30px;}

.footer-inner {
    max-width: 1100px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
  }


}

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

.footer-inner {
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  }

}

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

.footer-right { max-width: 500px; width: 100%; display: flex; flex-wrap: wrap; float: none; margin: 0 auto 50px;}
.footer-left{ max-width: 500px; width: 100%; float: none; margin: 0 auto 50px; text-align: center;}


}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
スマホ用　644pxまで
–––––––––––––––––––––––––––––––––––––––––––––––––– */


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

.has-padding-bottom { padding-bottom: 30px;}
  
.first-view .inner{ right: 0;}
.first-view .inner h1{ font-size: 26px; margin-bottom: 20px;}

  
.sec-head{ padding: 0; margin-bottom: 30px;}

.img-left { width: 100%; position: relative; padding: 0;}
.img-text { width: 100%; padding: 30px 10px; min-height: auto;}

.reverse .img-left > figure,
.img-left > figure { position: static; transform: translate(0); background: none; width: 100%;}

.reverse { display: flex; flex-wrap: wrap; flex-direction: row;}
.reverse .img-left { width: 100%; position: relative; padding: 0;}
.reverse .img-text { width: 100%; padding: 30px 10px;}


.product-title{ width: 100%;}

.product-bg { width: 100%; overflow: hidden; clear: both; margin-bottom: 100px;}

.product-box { overflow: hidden; width: 100%; background: url(images/7fd0g3jpie.jpg) repeat; display: flex; flex-wrap: wrap;}
.product-left { width: 100%; margin: 0; padding: 30px 0; }
.product-left a img{ margin: 0 auto;}

.product-right { width: 100%; padding: 20px;}

.product{ width: 100%; padding: 0;}
.product ul{ display: flex; flex-wrap: wrap;}
.product li{ width: 100%; margin-right: 0;}
.product li:nth-child(even){ margin-right: 0;}

.product li a img{ margin-bottom: 6px;}


.pro-thum li { width: calc(100% / 2 - 10px); margin-right: 20px; margin-bottom: 20px;}
.pro-thum li:nth-child(even){ margin-right: 0;}
.pro-thum li img{ width: 100%; height: 100%; object-fit: cover;}

.others{ columns: 1; width: 100%; padding: 30px 0; margin-bottom: 50px;}
.others > dl{ margin-bottom: 30px;}
.others dl dd { line-height: 1.4; font-size: 13px; margin-bottom: 10px;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
フッター
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{ width: 100%; background: #f8f1e3; padding: 20px 0; position: relative; }
.footer-inner{ width: 100%; padding: 10px;}
.footer-left{ width: 100%; float: none; margin-bottom: 50px;}
.footer-left h2{ font-size: 20px; font-weight: bold; line-height: 1.4; color: #633328;}
.footer-left h2 span{ font-size: 14px;}

.footer-right { width: 100%; float: none; margin-bottom: 20px;}
.footer-right ul{ display: flex; flex-wrap: wrap;}
.footer-right li { width: 50%; float: left; padding: 3px;}

.copyright{ width: 100%; clear: both; background: #603813; position: absolute; bottom: 0; left: 0; text-align:center; font-size: 12px; text-align: center; padding: 10px;}
.copyright p{ color: #fff; font-size: 12px;}

/*.page-top{ position: absolute; right: 0; top: -50px; width: 120px; height: auto;}
.page-top a{ display: block; width: 100%; height: auto; text-align: center;}*/



}