/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.4rem; line-height:1.6em; margin:0 auto; font-weight:500; text-align:left;}
.center{ text-align:center;}
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

header,h1.title,footer .sns_nav h2,footer .right_box ul,#top .sec1 h2,#top .mainimage h1,#top .sec3 h2,.more_btn{ font-family: 'Montserrat', sans-serif;}




/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 21;
	border:1px solid #fff;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	background:#D69A00;
	}
header #menubtn{display:none;}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #fff;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
.header_wrap{ width:100%; background:#D69A00; padding:40px 0 10px 0;}
header { width:1080px; max-width:95%; margin:0 auto; font-weight:700;}
header .logo{ width:139px; padding:10px; }
header .nav_wrap{ width:1080px; max-width:100%; display:flex; justify-content: space-between; flex-wrap:wrap}
header ul.nav { width:560px; max-width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:bottom;}
header ul.nav li{font-size:1.6rem; line-height:1.2em; text-align:center;  color:#000; padding:10px; margin-left:15px;}
header .sns_nav{ width:560px; margin-top:20px; max-width:100%; display:flex; justify-content:right; flex-wrap:wrap; align-items:flex-end;}

header h2{ font-size:1.6rem; line-height:1.2em; color:#fff; padding:0 10px; margin-left:5px;}
header .sns_nav ul{ display:flex; justify-content: left; flex-wrap:wrap;}
header .sns_nav ul li{ width:40px; margin-left:10px;}



#navi_toggle{ width:260px; max-width:100%; display:none; background:#D69A00; padding:60px 20px 30px 30px; position:absolute; right:0; top:0; z-index:2; text-align:center;}
#navi_toggle ul.s_nav{ margin:20px 0 0 10px;}
#navi_toggle ul.s_nav li{font-size:1.6rem; line-height:1.2em; text-align:left;  color:#000; padding:10px 12px 10px 12px;}
#navi_toggle .sns_nav h2{ margin-top:20px;}
#navi_toggle .sns_nav ul{ margin-top:10px;}

/*フッター*/
#footer_wrap { width:100%; max-width:100%; margin:0 auto; padding:80px 0 20px; background:#D69A00;}
footer{ width:1000px; max-width:90%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left; }
footer .left_box{ width:300px; max-width:100%; padding:0; margin:0;}
footer .left_box h1.logo{  width:119px; margin-bottom:30px;}
footer .left_box h2{ margin:20px 0 5px; font-size:1.4rem; line-height:1.2em; font-weight:700;}
footer .left_box p{line-height:1.4em; }
footer .left_box p.text{ font-weight:700; margin:40px 0;}
footer .left_box .tel{ font-size:1.4rem;  padding-left:20px; position:relative; margin-top:10px;}

footer .sns_nav h2{ font-size:1.6rem; line-height:1.2em; color:#fff; margin-bottom:5px;}
footer .sns_nav ul{ display:flex; justify-content: left; flex-wrap:wrap;}
footer .sns_nav ul li{ width:40px; margin-right:10px;}

footer .right_box{ width:300px; max-width:100%; font-size:1.6rem; line-height:1.2em; padding:0; }
footer .right_box ul{ margin:100px 0 30px;}
footer .right_box ul li{ text-align:left; padding:10px 25px;}

footer p.copy { width:100%; text-align:center; margin:50px auto 50px; font-size:1.6rem; line-height:1.2em;}






/*共通*/

h1.title{ font-size:3.4rem; line-height:1.2em; letter-spacing:0.02em; margin:100px auto 60px;}
.contents{ width:1080px; max-width:95%; margin:0 auto;}
.fade{
	animation-name:fade;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity: 0;
	}


.fadeUp .up{
	animation-name:fadeUptext;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
	}
@keyframes fade{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadein{
  from {
    opacity: 0;
	transform: translateY(10px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

@keyframes fadeUptext{
  from {
    opacity: 0;
  transform: translateY(50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

@keyframes slidein {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}



@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/*トップページ*/

#top .sec1 .mainimage{ width:100%; padding-top:51.5%; background:url(../images/top_image1.jpg) no-repeat; background-size:cover; position:relative;}
#top .sec1 .mainimage h1{ font-size:3.4vw; color:#DEBD2C; line-height:1.2em; position:absolute; right:18%; top:50%; transform:translateY(-1em); text-align:left;}
#top .sec1 .mainimage p{ font-size:1.2rem; line-height:1.2em; color:#fff; position:absolute; bottom:10px; right:10px;}

#top .sec1 .features{ width:1080px; max-width:100%; margin:30px auto; display:flex; justify-content: space-between; flex-wrap:wrap;}
#top .sec1 .features div{ width:330px; max-width:33%; padding:10px; display: flex; flex-direction: column; flex: 1 auto auto;}
#top .sec1 .features h2{ font-size:2.4rem; line-height:1.2em; text-align:center; margin-bottom:30px; flex-grow: 1;}
#top .sec1 .features h2 span{ display:block; width:56px; border-radius: 28px; -webkit-border-radius: 28px; -moz-border-radius: 28px; background:#D69A00; font-size:2rem; line-height:56px; margin:30px auto;}

#top .sec2{ background:#EEEFEF; padding:40px 0 70px;}
#top .sec2 .news_wrap{ width:910px; max-width:90%; margin:0 auto; padding:10px 50px 50px 50px; background:#fff;}
#top .sec2 .news_contents{
	width:790px;
	max-width:100%;
	margin:0 auto;
    position: relative;
    padding:30px 0;
}

#top .sec2 .news_contents::before {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 10px; 
    transform: skew(-40deg);
    background-image: repeating-linear-gradient(90deg, transparent 0 4px, #D69A00 4px 8px);
    content: '';
}


#top .sec2 .news_contents::after {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 10px;
    transform: skew(-40deg);
    background-image: repeating-linear-gradient(90deg, transparent 0 4px, #D69A00 4px 8px);
    content: '';
}

#top .sec3 .m_image{ width:100%;}
#top .sec3 h1.title{ margin-top:100px;}
#top .sec3 h2{ font-size:2.4rem; line-height:1.4em; letter-spacing:0.02em; text-align:left;}
#top .sec3 .features{ margin:40px auto; padding:40px 0; display:flex; justify-content:center; flex-wrap:wrap; position:relative;}

#top .sec3 .features::before {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 10px;
    transform: skew(-40deg);
    background-image: repeating-linear-gradient(90deg, transparent 0 4px, #D69A00 4px 8px);
    content: '';
}


#top .sec3 .features::after {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 10px;
    transform: skew(-40deg);
    background-image: repeating-linear-gradient(90deg, transparent 0 4px, #D69A00 4px 8px);
    content: '';
}

#top .sec3 .features div{ width:250px; padding:10px; margin-bottom:20px;}
#top .sec3 .features div:first-child{ width:220px;}
#top .sec3 .features div h3{ font-size:1.8rem; line-height:1.2em; margin-bottom:15px; text-align:left;}
#top .sec3 .features div h3 span{ font-size:1.4rem;}
#top .sec3 .features div{}
#top .sec3 ul.item{ width:100%; display:flex; justify-content:center; flex-wrap:wrap; align-items: stretch; padding:20px;}
#top .sec3 ul.item:last-child{ align-items:center;}
#top .sec3 ul.item li{ width:260px; max-width:25%; display: flex; flex-direction: column; flex: 1 0 auto;}
#top .sec3 ul.item li div{ width:235px; max-width:100%; text-align:center; display: flex; align-items: flex-end; justify-content: center;}
#top .sec3 ul.item li p{ width:240px; max-width:100%; margin:10px auto; font-size:1.6rem; line-height:1.2em; text-align:left; flex-grow:1; }
#top .sec3 ul.item li p span{ font-size:1.2rem;}
#top .sec3 ul.item:nth-child(2n){ background:#F7F7F7;}

#top .sec3 ul.item li.tast{ width:760px; max-width:75%;}
#top .sec3 ul.item li.tast img{ width:665px; margin:auto;}
#top .sec4 p{ width:1080px; max-width:95%; margin:80px auto; text-align:left;}
#top .sec4 .buy_btn{ width:250px; margin:40px auto; font-size:2.4rem; line-height:1.2em; padding:20px; background:#D69A00; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }


#top .sec4,#top .sec5,#top .sec6 { padding-top:50px;}
#top .sec6{ background:#F9FAFA; padding-bottom:80px;}
#top .sec6 .contents{ width:900px;}
#top .sec6 h2{ font-size:1.8rem; line-height:1.2em; margin-bottom:10px;}
#top .sec6 p{ text-align:center;}

.more_btn{
	width:180px;
  position: relative;
  padding: 0 50px 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
	font-size:1.6rem;
	margin:0 0 0 auto;
}

.more_btn::before{
    content: '';
  position: absolute;
    bottom:0px;
    right:0;
    width: 40px;
    height: 1px;
  background:#333;
    transition: all .3s;
}

.more_btn::after{
    content: '';
  position: absolute;
    bottom:5px;
    right:0;
    width: 15px;
    height:1px;
  background:#333;
    transform: rotate(35deg);
    transition: all .3s;
}

.more_btn:hover::before{
    right:-15px;
}

.more_btn:hover::after{
    right:-15px;
}



.gmap {
position: relative;
width:900px;
max-width:100%;
padding-bottom:32%;
height: 0;
overflow: hidden;
margin:60px auto 30px;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 
.slider-thumbnail{ margin:30px 0;}
.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  padding:5px;
  box-sizing:border-box;
  
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.swiper {
  max-width: 100%;
  width: 1200px;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}




#shop { padding-bottom:100px;}
#shop h1.title{ font-weight:bold;}
#shop dl { width:780px; max-width:95%; margin:100px auto 50px; font-size:1.6rem; line-height:1.4em; text-align:left; display:flex; justify-content:left; flex-wrap:wrap;}
#shop dl dt{ width:170px; padding:15px 30px 15px 50px; border-bottom:1px dotted #666;}
#shop dl dd{ width:calc(100% - 170px); padding:15px 30px;  border-bottom:1px dotted #666;}
#shop dl dt:last-of-type,#shop dl dd:last-of-type{ border-bottom:none;}



#privacy {  font-size:1.4rem; line-height:1.6em; text-align:left; width:960px; max-width:95%; margin:0 auto;}
#privacy h2{ max-width:100%;  text-align:left; font-size:2rem; line-height:1.4em; margin:30px auto 15px; padding:0 0 5px 10px; border-bottom:1px solid rgba(204,204,204,1);}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; text-align:left; margin:20px auto 5px; text-indent:-1em; margin-left:1em;}
#privacy p{ max-width:100%; padding:5px 20px;}
#privacy p.date{ text-align:right;}
#privacy ul { margin:10px 20px;}
#privacy ul li{ text-indent:-1em; margin-left:1em; line-height:1.4em; padding-bottom:5px;}
#privacy section{ margin-bottom:30px;}
#privacy dl { display:flex; justify-content: space-between; flex-wrap:wrap; width:600px; margin:10px 20px;}
#privacy dl dt{ width:200px;}
#privacy dl dd{ width:400px;}

#contact{ max-width:100%;}
#contact .contents,#thanks .contents{ width:660px; max-width:90%; margin:0 auto;}
#contact p{ font-size:1.4em; line-height:2em; }

#thanks h2{ font-size:2em; line-height:1.4em; margin:30px auto; text-align:left;}



#recruit .contents{ width:960px; max-width:90%; margin:0 auto;}
#recruit ul.rec_navi{ width:910px; max-width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; margin:100px auto 150px;}
#recruit ul.rec_navi li{ width:260px; background:#184886; color:#fff; padding:20px 10px; margin:0 10px 10px 10px;  font-size:2rem; font-weight:bold; letter-spacing:0.1em; line-height:1.2em; box-shadow:3px 3px 5px rgba(0,0,0,0.6);}
#recruit ul.rec_navi li:hover{ background:#0096CC; transition:0.5s;}
#recruit ul.rec_navi li.active{background:#0096CC; }
#recruit .rec1 .sec2{ text-align:left; width:740px; max-width:100%; margin:0 auto;}
#recruit .rec1 .sec2 ul li{ font-size:1.6rem; line-height:1.6em; margin-bottom:10px;}
#recruit h3{ font-size:1.6rem; line-height:1.2em; margin:30px auto 10px 0; border:1px solid #000; padding:5px 10px; display:inline-block;}
#recruit .rec2 .voice{ display:flex; justify-content:center; flex-wrap:wrap;}
#recruit .rec2 .voice .photo{ width:377px; max-width:100%; margin:10px auto;;}
#recruit .rec2 .voice .photo p{ padding-left:10px;}
#recruit .rec2 .voice .text{ width: calc(100% - 437px);  margin:20px;}
#recruit .rec2 .voice .text p{ line-height:2em; margin-bottom:20px;}
#recruit .rec3 p{ line-height:1.8em;}
#recruit .rec3 .sec2{ width:740px; max-width:100%; margin:0 auto;}






@media screen and (max-width: 1080px){
#top .sec3 .features div,#top .sec3 .features div:first-child{ width:50%; padding:10px;}
	
	
}


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

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

}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
header .nav_wrap{ display:none;}
.header_wrap{ padding:40px 0 40px 0;}
header #menubtn{ display:block;}


#top .sec1 .mainimage{ width:100%; padding-top:70%; background:url(../images/top_image1.jpg) no-repeat center ; background-size:cover; position:relative;}
#top .sec1 .mainimage h1{ font-size:5vw; right:30px;}
#top .sec1 .features{ justify-content:center; }
#top .sec1 .features div{ width:330px; max-width:100%; padding:10px; display: block;}
#top .sec1 .features h2{ font-size:2.4rem; line-height:1.2em; text-align:center; margin-bottom:30px;}
#top .sec1 .features h2 span{ display:block; width:56px; border-radius: 28px; -webkit-border-radius: 28px; -moz-border-radius: 28px; background:#D69A00; font-size:2rem; line-height:56px; margin:30px auto;}


#top .sec3 ul.item{ width:100%; margin:0 auto; }
#top .sec3 ul.item li{ width:260px; max-width:50%;}
#top .sec3 ul.item li div{ margin:0 auto;}

#top .sec3 ul.item li.tast{ width:760px; max-width:100%;}

.slider-thumbnail{ margin:10px 0;}
.slider-thumbnail .swiper-slide {
  padding:2px;
}

}





/*600以下 */
@media screen and (max-width: 600px){

#top .sec3 .features div,#top .sec3 .features div:first-child{ width:100%; padding:10px;}
#top .sec3 .features div h3{ border-bottom:1px dotted #999999; padding-bottom:5px;}




}

/*560以下 */
@media screen and (max-width: 560px){




/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	
.spno2{ display:none;}
#top .sec1 .mainimage h1{ font-size:2rem; right:5%;}
#top .sec3 ul.item li{ width:260px; max-width:100%;}


}

/*320以下*/
@media screen and (max-width: 320px){
#top .sec1 .mainimage{background:url(../images/top_image1.jpg) no-repeat right ; background-size:cover; position:relative;}


}