body{font-family: 'Noto Serif JP', serif;font-size:17px; font-weight:400; line-height:1.8; color:#1A1A1A; text-align:center; letter-spacing:2px;font-feature-settings: "palt";}
@media screen and (max-width: 768px) {
body{font-size:15px;line-height:1.5; letter-spacing:1px; }
}
.site_logo img{position:fixed; top:14px; left:20px; z-index:3}
.global_inner{max-width:1300px; margin:0 auto; position:relative;padding: 0 20px;}
h1,h2,h3,h4,h5,h6{line-height:1;}
h2{font-size:120px; font-weight:500; margin-bottom:80px;font-family: 'Noto Sans JP', sans-serif; }



img{width:100%; height:auto;}
a img{transition:0.4s all;}
a img:hover{transform: scale(1.10);transition:0.4s all; letter-spacing:2px;}
a img.no-zoom:hover{transform: scale(1.0);}


@media screen and (max-width: 768px) {
.global_inner{width:94%;padding: 0 3%; overflow:hidden; }
h2{font-size:60px; margin-bottom:40px; }
}

/*====================
翻訳メニューを右上固定
=====================*/
.language {position: absolute;right: 260px;top: 11px;display: flex;align-items: center;}
.language img{width:25px; }
.gtranslate_wrapper{display:flex;flex-wrap: wrap; width:100px;}
.gtranslate_wrapper a:nth-child(1){margin-bottom:2px;}
.gtranslate_wrapper a:nth-child(2){margin-bottom:2px;}
.gtranslate_wrapper a:nth-child(3){margin-bottom:2px;}
.gtranslate_wrapper a:nth-child(4){}
.gtranslate_wrapper a:nth-child(5){ order:6}
.gtranslate_wrapper a:nth-child(5) img{ border:solid 1px #CCC;}
.gtranslate_wrapper a:nth-child(6) img{ border:solid 1px #CCC;}
@media screen and (max-width: 768px) {
.gtranslate_wrapper a:nth-child(1),.gtranslate_wrapper a:nth-child(2){margin-bottom:2px;}
.gtranslate_wrapper{display:flex;flex-wrap: wrap; width:100px;}
.language{right:160px; top:14px;}
.language img{width:24px;}
.gt-current-lang img{transform: scale(1.0);}
}

/*====================
翻訳メニューを右上固定
=====================*/
#google_translate_element {
  padding: 1px;
  border-radius: 3px;
  font-size:15px;
  border:solid 1px #000;
}

#google_translate_element select {
  background: #fff;
  border: none;
  padding: 2px;
  font-size: 14px;
  border-radius: 3px;
}
.goog-te-gadget-simple{display:flex !important; border:none !important; padding-bottom:0 !important;}
.VIpgJd-ZVi9od-xl07Ob-lTBxed span{font-size:13px; letter-spacing:0;}
header ul.sub-menu li a.VIpgJd-ZVi9od-xl07Ob-lTBxed{margin-left:2px;}
header ul.sub-menu li a.VIpgJd-ZVi9od-xl07Ob-lTBxed img{height:1px;}


header ul.sub-menu li .goog-te-gadget-simple img{margin-left:3px; margin-top:2px;}

/*====================
ハンバーガーメニュー
=====================*/
header{height:60px; background-color:#FFF; position:fixed;/*box-shadow: 0 8px 10px -9px #888;*/ width:100%; z-index:3;}
header .logo{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
header .logo img{height:40px; width:auto;transition:0.4s all;}
header .logo img:hover{transform: scale(1.0); opacity:0.8;transition:0.4s all;}

header ul.sub-menu{position:absolute; right:40px; top:18px; display:flex;align-items: center;}
header ul.sub-menu li a{font-size:26px; display:block; margin-left:15px; color:#4a4a4a;}
header ul.sub-menu li a img{height:24px; width:auto; padding-top:3px; margin-left:20px;}

nav {display: block;  position: fixed;  top: 0;  left: -300px;  bottom: 0;  width: 300px;	background-color:#e5e5e5;  	-webkit-overflow-scrolling: touch;  transition: all 0.5s;  z-index: 102;  opacity: 0;}
.open nav {  left: 0;  opacity: 1;  top:0px;  width:25%;box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.08);}
nav .inner {
	height: 100vh;
	display:flex;
	align-items: center;
	width: 100%;
	overflow: auto;


}
nav .inner .box{width: 100%;}
nav .inner .box .item{padding-left: 0px;}
nav .inner .box .item ul{margin-bottom:20px; }
nav .inner .box .item ul li{line-height: 1.3; font-size:16px; display: block;  overflow: hidden;   z-index:0;position: relative;    text-align: left;}
nav .inner .box .item ul li:last-child{border:none;}

nav .inner .box .item ul li:before{content:'';width: 12px;height: 0.5px;background-color: #000;display:  block;position: absolute;top: 50%;left: 5px;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);}
nav .inner .box .item ul li a{ display:block;padding-left:40px; padding-top:15px; padding-bottom:15px; color:#4a4a4a; 
position: relative;	overflow: hidden;    transition: ease .2s; border-bottom:solid 1px #4a4a4a;}
nav .inner .box .item ul li a span{position: relative;	z-index: 3;	}


nav .inner .box .item ul li a:hover{ transition: all 0.3s;}
nav .inner .box .item ul li a:before { 	content: '';position: absolute;top: 0;left: 0;z-index: 2;background:#d3cdc6;width: 100%;height: 100%;transition: transform .5s cubic-bezier(0.8, 0, 0.2, 1) 0s;transform: scale(0, 1);	transform-origin: right top;}

nav .inner .box .item ul li a:hover:before{	transform-origin:left top;	transform:scale(1, 1); z-index:-1;}

nav .inner .box .item ul li.title{font-size:18px;font-family: 'Noto Serif JP', serif;   }
nav .inner .box .item ul li.title span{display:block; margin-top:5px;font-family: "Oswald", sans-serif;letter-spacing:0px; font-size:13px; font-weight:300; margin-bottom:5px; }
nav .inner .box .item ul li.title:before{content:none;}
nav .inner .box .item ul li.title a:after{font-size:14px; display:block; font-weight:normal;z-index: 3; padding-left:3px; position:relative;}
nav .inner .box .item ul li:last-child{margin-bottom:0px;}


.arrow {
  position: absolute;
  display: inline-block;
  top:25px;
  right:40px; z-index:2;
  
}

.arrow::before {
  content: '';
  width: 12px;
  height: 12px;
  border-top: solid 1px #4a4a4a;
  border-right: solid 1px #4a4a4a;
  position: absolute;
  right: 10px;
  top: 14px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1300px){
.open nav {  width:35%;}
}

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

header .logo{left:85px;}

.open nav{width:100%;}
nav {right: -220px;    width: 220px;  }
nav .inner {
	margin: 0px;
	height:auto;
	padding-top:60px;
} 
nav .inner .box{width:90%; margin:0 auto;}
nav .inner .box .item ul{padding-bottom:10px; margin-bottom:0px; padding-top:0px;}
nav .inner .box .item ul li.title{font-size:16px;}
nav .inner .box .item ul li.title span{font-size:12px;}
nav .inner .box .item ul li a{padding-top:10px; padding-bottom:10px; padding-left:20px;}

nav br.pc{display:none;} 
header ul.sub-menu{right:10px;top: 20px;}
header ul.sub-menu li a{margin-left:5px;}
header ul.sub-menu li a img{margin-left:0px;}
}


/*============
ハンバーガーメニューのトグル
=============*/
.toggle_btn {  display: block;  position: fixed;  top: 20px;  left: 30px;  width: 30px;  height: 30px;  transition: all .5s;  cursor: pointer;  z-index: 103;}
.toggle_btn:before{content:"MENU"; position:absolute; top:-1px; right:-40px; font-size:13px; color:#4a4a4a;font-family: "Oswald", sans-serif;letter-spacing:1px;}
.toggle_btn p{font-size:12px;}
.toggle_btn span {  display: block;  position: absolute;  left: 0;  width: 30px;  height: 2px;  background-color: #4a4a4a;  border-radius: 4px;  transition: all .5s;}
.toggle_btn span:nth-child(1) {  top: 4px;}
.toggle_btn span:nth-child(2) {  top: 10px;}
.toggle_btn span:nth-child(3) {  top: 16px;}
.open .toggle_btn span {  background-color: #4a4a4a;}
.open .toggle_btn span:nth-child(1) {  -webkit-transform: translateY(10px) rotate(-315deg);  transform: translateY(10px) rotate(-315deg);top: 0px;}
.open .toggle_btn span:nth-child(2) {  opacity: 0;}
.open .toggle_btn span:nth-child(3) {  -webkit-transform: translateY(-10px) rotate(315deg);  transform: translateY(-10px) rotate(315deg);top: 20px;}

@media screen and (max-width: 768px) {
.toggle_btn{top:30px; left:20px;}
.toggle_btn:before{top:-20px; right:0px; }

}
/*============
ハンバーガーメニューのマスク
=============*/
#mask {display: none;  transition: all .5s;}
.open #mask {  display: block;  position: fixed;  top: 0;  right: 0;  width: 100%;  height: 100%;  /*background: #000;*/  opacity: .8;  z-index: 101; }



/*==========================
トップ：ラインアップ
=========================*/
.top_lineup{ padding:80px 0; font-family: 'Noto Sans JP', sans-serif; }
.top_lineup h2{margin-bottom:60px; }
.top_lineup h3{ background:#FFF;    position: relative; padding-bottom:10px; padding-top:5px; font-size:15px;}
.top_lineup h3 span{font-size:17px;}
.top_lineup .box{position:relative; display:flex; width:90%; margin-bottom:60px;}
.top_lineup .box.box2{margin-left:auto;justify-content: flex-end;margin-bottom:150px;}

.top_lineup .box .item{width:25%; }
.top_lineup .box .item h3 span{font-size:70%; display:block; margin-bottom:5px; letter-spacing:1px;}
.top_lineup .box .item img{width:60%;margin-bottom:15px;transition:0.2s all;}
.top_lineup .box .item:hover img{transform: scale(1.10);transition:0.6s all; }

.top_lineup .box .item a{display:block;}



.top_lineup .navi{letter-spacing:5px;}
.top_lineup .navi ul{display:flex;justify-content: center; margin-bottom:20px;}
.top_lineup .navi ul li{margin-left:20px; margin-right:20px;}
.top_lineup .navi ul li img{width:80px;}



@media screen and (max-width: 1400px) {
.top_lineup .box{width:1200px;}
}

@media screen and (max-width: 1300px) {
.top_lineup .box{width:1100px;}
}


s
@media screen and (max-width: 1200px) {
.top_lineup .box{width:1000px;}
}


@media screen and (max-width: 1100px) {
.top_lineup .box{width:900px;}
}



@media screen and (max-width: 1000px) {
.top_lineup .box{width:800px;}
}


@media screen and (max-width: 900px) {
.top_lineup .box{width:700px;}
}


@media screen and (max-width: 768px) {
.top_lineup{ padding:40px 0; width:100%; }
.top_lineup h2{margin-bottom:40px;}
.top_lineup .box{ height:auto; width:100%; display:flex;flex-wrap: wrap; margin-bottom:40px;}
.top_lineup .box .item{width:50%; position:static; margin-bottom:20px;}
.top_lineup .box .item img{ width:100px;}
.top_lineup .box .item:nth-child(5){ width:100%}
.top_lineup .box .item:nth-child(5) img{width:120px;}
.top_lineup .navi{ padding:0 0px;}
}
/*=======  下からフェードアップ（ラインナップ用）  =======*/
.fadeup_lineup {opacity: 0;}
.fadeup_lineup.isShow {  opacity: 1;animation: fadeup_lineup 1.0s ease 0.1s 1 normal backwards;}
@keyframes fadeup_lineup {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/*=======  メインビジュアル  =======*/
.kv{ position:relative;width: 100%;height: 100%; overflow: hidden;}
.kv video {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);width: 100vw;height: 100vh;object-fit: cover; }
.kv img{position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);width: 25vw;}
.kv img.kv_logo01{animation: kv_logo01 4.0s ease 2.0s 1 normal backwards; opacity:0;}
.kv img.kv_logo02{animation: kv_logo02 10.0s ease 20.0s 1 normal forwards; opacity:0;}
.kv .text{position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);width: 20vw;writing-mode:vertical-rl; display:flex;    flex-direction: column;align-items: flex-start;    justify-content: center; font-weight:normal; letter-spacing:5px; font-size:20px;font-family: "Zen Old Mincho", serif;}
.kv .text div{margin-left:8px; margin-right:8px; color:#FFF;opacity:0;}
.kv .text div:nth-child(1){animation:kv_text 13s linear 6s 1 normal backwards;}
.kv .text div:nth-child(2){animation:kv_text 11.5s linear 7.5s 1 normal backwards;}
.kv .text div:nth-child(3){animation:kv_text 10s linear 9.0s 1 normal backwards;}
.kv .text div:nth-child(4){animation:kv_text 8.5s linear 10.5s 1 normal backwards;}
.kv .text div:nth-child(5){animation:kv_text 7s linear 12.0s 1 normal backwards;}
.kv .text div:nth-child(6){animation:kv_text 5.5s linear 13.5s 1 normal backwards;}



@keyframes kv_logo01 {
0% {
    opacity: 0;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}
@keyframes kv_logo02 {
0% {
    opacity: 0;
}
10% {
    opacity: 1;
}
100% {
    opacity: 1;
}
}


@keyframes kv_text {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px);
  }
  90% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}



@media screen and (max-width: 768px) {
.kv{ padding-top:60px;}
}
/*==========================
トップ：バナーエリア
=========================*/
.top_banner{ padding:0; margin-left:30px; margin-right:30px;}
.swiper-wrapper{height:auto;}
.top_banner .swiper{height:auto; overflow:hidden;}
.top_banner img{height:auto; width:100%;  }
/*.top_banner img{height:calc(100vh - 60px); width:auto; aspect-ratio: 16 / 9; object-fit:cover; }*/
.top_banner .swiper img:hover{transform: scale(1.0);}
@media screen and (max-width: 768px) {
.top_banner{ padding:0;margin-left:15px; margin-right:15px;}
.top_banner .swiper{height:auto; }
.top_banner .swiper img{height:auto;     }
.top_banner .swiper-wrapper{height:auto;}
}

/*==========================
トップ：ニュース
=========================*/
.top_news_list{padding-top:60px; padding-bottom:100px;font-family: 'Noto Sans JP', sans-serif; font-weight:300; }
.top_news_list h2{line-height:1;}
.top_news_list .box{display:flex;justify-content: space-between; text-align:left;}
.top_news_list .box .item{width:49%;border-left:solid 1px #000; padding-left:20px;}
.top_news_list .box .item h3{font-size:60px; line-height:1; display:flex;align-items: flex-end; margin-bottom:20px; font-weight:500;}
.top_news_list .box .item h3 span{font-size:36px; margin-left:20px; white-space:nowrap;}
.top_news_list .box .item h3 .more{display: inline-block; background:#894810; color:#FFF; margin-left:20px; padding:8px 20px;font-family: "Oswald", sans-serif;letter-spacing:1px;}
.top_news_list .box .item h3 .more span{font-size:30%;margin-left:0px; font-size:14px; font-weight:normal;}
.top_news_list .box .item dl{display:flex;margin-bottom:5px;}
.top_news_list .box .item dl dt{min-width: 140px; font-weight:normal; font-weight:300;}
.top_news_list .box .item dl dt:after{content:"｜"}
.top_news_list .box .item a:hover dl dt{text-decoration:underline;}
.top_news_list .box .item a:hover dl dd{text-decoration:underline;}

@media screen and (max-width: 768px) {
.top_news_list .box{flex-direction: column;}
.top_news_list .box .item{width:100%; margin-bottom:20px; padding-left:10px;}
.top_news_list .box .item h3{justify-content: space-between;font-size:30px; white-space:normal; letter-spacing:0.5px; }
.top_news_list .box .item h3 span{margin-right: auto; font-size:20px; margin-left:10px;}
}

/*==========================
トップ：特別なチョコレート
=========================*/
.top_special{ background:#EFEEE8; font-family: 'Noto Serif JP', serif; text-align:left; padding-bottom:100px; margin-left:30px; margin-right:30px; margin-bottom:30px;}
.top_special .box1{display:flex;justify-content: space-between;align-items: flex-end; margin-bottom:140px;}
.top_special .box1 h3{font-size:6.6cqw; line-height:1.4; margin-bottom:40px;}
.top_special .box1 .photo{width:43%;}
.top_special .box1 .text_area{width:48%;container-type: inline-size;}
.top_special .box1 .text_area .material{display:flex; margin-bottom:40px;}
.top_special .box1 .text_area .material h4{font-size:16px;font-family: 'Noto Sans JP', sans-serif; }
.top_special .box1 .text_area .material .item .number{font-size:100px; line-height:1; margin-right:80px; font-weight:400;font-style: normal;font-family: "EB Garamond", serif;}
.top_special .box1 .text_area .material .item:nth-child(2) .number{margin-right:0;}
.top_special .box1 .text_area .material .number span{font-size:24px;}
.top_special .more{background:#894810; color:#FFF; width:fit-content; font-family: "Oswald", sans-serif;letter-spacing:1px; font-size:12px; margin-top:40px;}
.top_special .more a{padding:5px 20px;    display: block;}
.top_special .box2{display:flex;justify-content: space-between;}
.top_special .box2 .text_area{width:70%;}
.top_special .box2 .text_area h3{margin-bottom:40px; margin-top:-20px;}
.top_special .box2 .photo{width:25%; margin-top:-40px;}

.top_special .made_in_hokkaido{
	background-size: 50% auto;
	background-image: url(/wp_masale/wp-content/themes/masale/assets/image/top_special_bg2.png);
	background-repeat: no-repeat;
	background-position: left center; padding-top:40px;
}
.top_special .made_in_hokkaido .box3{display:flex;justify-content: space-between;align-items: flex-end;}
.top_special .made_in_hokkaido .box3 .item{width:55%;container-type: inline-size;}
.top_special .made_in_hokkaido .box3 .item:nth-child(2){width:40%;}
.top_special .made_in_hokkaido .box3 .item .photo{margin-bottom:40px;}
.top_special .made_in_hokkaido .box3 .item .copy{font-size:max(24px, 1.8vw); margin-bottom:20px;}
.top_special .made_in_hokkaido .box3 .item h3{font-size:70px; line-height:1; text-align:center;font-family: "EB Garamond", serif;}
.top_special .made_in_hokkaido .box3 .item h3 span{font-family: "Zen Old Mincho", serif;}

@media screen and (max-width: 1000px) {
.top_special .made_in_hokkaido .box3 .item h3{font-size:50px; }
.top_special .made_in_hokkaido .box3 .item h3 span{display:block; margin-top:10px;}
.top_special .made_in_hokkaido .box3 .item .copy{}
}

@media screen and (max-width: 768px) {
.top_special{margin-left:15px; margin-right:15px;margin-bottom:15px;}
.top_special .box1{flex-direction: column-reverse;margin-bottom:40px;}
.top_special .box1 .photo{width:100%; margin-top:40px;}
.top_special .box1 .text_area{width:100%;}
.top_special .box1 h3{font-size:26px;}
.top_special .more{margin-left:auto;}
.top_special .box1 .text_area .material{justify-content: center;}
.top_special .box1 .text_area .material h4{text-align:center;}
.top_special .box1 .text_area .material .item .number{font-size:80px; line-height:1; margin-right:30px;margin-left:30px;}
.top_special .box2{flex-direction: column;}
.top_special .box2 .photo{width:50%; margin:0 auto;}
.top_special .box2 .text_area h3{margin-top:40px; text-align:center; margin-top:20px;}
.top_special .box2 .text_area h3 span{display:inline-block; margin-top:30px;}
.top_special .box2 .text_area{width:100%;}
.top_special .made_in_hokkaido{background:none;}
.top_special .made_in_hokkaido .box3{flex-direction: column;}
.top_special .made_in_hokkaido .box3 .item{width:100%;}
.top_special .made_in_hokkaido .box3 .item:nth-child(2){width:100%;}
.top_special .made_in_hokkaido .box3 .item .photo{margin-top:40px;}

}

/*==========================
トップ：ABOUT US
=========================*/
.top_aboutus{ position:relative;font-family: 'Noto Serif JP', serif; height:100vh;}
.top_aboutus img{height:100vh; object-fit:cover;}
.top_aboutus .box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/*background: rgba(137,72,16,0.2);*/display:flex;flex-direction: column;justify-content: space-between; padding:60px;color:#FFF;aspect-ratio: 1; height:80%;max-height: 750px;font-size:18px;}
.top_aboutus .box h2{}
.top_aboutus .box .copy{font-size:30px; margin-bottom:5%; margin-top:auto;}
.top_aboutus .more{background:#894810; color:#FFF; width:fit-content; font-family: "Oswald", sans-serif;letter-spacing:1px; font-size:12px; margin-top:80px; margin-left:auto; margin-right:auto;}
.top_aboutus .more a{display:block;padding:5px 20px;}

@media screen and (max-width: 768px) {
.top_aboutus{height:430px; overflow:hidden;}
.top_aboutus .box{aspect-ratio: 16 / 9;width: 90%;    padding: 5% 3%; height:auto; font-size:13px;}
.top_aboutus .box h2{margin-bottom:20px;}
.top_aboutus .box .copy{margin-top:20px; font-size:20px;}
.top_aboutus img{height:100%; }
.top_aboutus .more{margin-top:40px; }
}

/*==========================
トップ：RECRUIT
=========================*/
.top_recruit{ padding-top:160px; padding-bottom:200px; text-align:left;}
.top_recruit h2{text-align:center;}
.top_recruit .box{display:flex;justify-content: space-between;}
.top_recruit .box .photo{width:40%;}
.top_recruit .box .photo img{height: 100%; max-height:300px;    object-fit: cover;}
.top_recruit .box .text_area{width:55%;}
.top_recruit .box .text_area h3{font-size:26px; border-bottom:solid 1px #000; padding-bottom:20px; margin-bottom:20px;}
.top_recruit .box .text_area .text{font-family: 'Noto Sans JP', sans-serif; font-weight:300; text-align:justify;}
.top_recruit .more{background:#894810; color:#FFF; width:fit-content; font-family: "Oswald", sans-serif;letter-spacing:1px; font-size:12px; margin-top:80px; }
.top_recruit .more a{display:block;padding:5px 20px;}

@media screen and (max-width: 768px) {
.top_recruit{ padding-top:40px; padding-bottom:40px;}
.top_recruit .box{flex-direction: column-reverse;}
.top_recruit .box .photo{width:100%; margin-top:20px;}
.top_recruit .box .text_area{width:100%;}
.top_recruit .more{margin-top:40px; margin-left:auto;}
}

/*==========================
私たちについて
=========================*/
.aboutus{overflow: hidden;}
.aboutus .head{position:relative;}
.aboutus .head img{height: 100%;    object-fit: cover;}
.aboutus .head h1{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/*background: rgba(137,72,16,0.1);*/display:flex;flex-direction: column;justify-content: space-between; padding:3%;color:#FFF;aspect-ratio: 1;height: 80%;font-size:120px; display:flex;justify-content: center;align-items: center;font-family: 'Noto Sans JP', sans-serif; font-weight:500;}
.aboutus .promise{ text-align:left; padding-top:60px; margin-bottom:80px;}
.aboutus .promise .box{display:flex;justify-content: space-between;align-items: center; margin-bottom:60px;}
.aboutus .promise .box .copy{width:50%;container-type: inline-size;}
.aboutus .promise .box .copy .text{ letter-spacing:7px; font-size:6.8cqw;}
.aboutus .promise .box .text_area{width:50%;font-family: 'Noto Sans JP', sans-serif; font-weight:300;}
.aboutus .promise .box .text_area h2{font-size:40px; font-weight:bold; margin-bottom:20px;}
.aboutus .promise .box .text_area ul li{border-bottom:solid 1px #000; display: inline-block; margin-bottom:5px; font-size:15.5px;}

.aboutus .history .box{display:flex; margin-bottom:80px;}
.aboutus .history .box .photo{width:30%;}
.aboutus .history .box .item{display:flex;}
.aboutus .history .box .item .year{width:150px;}
.aboutus .history .box .item .text_area{ position:relative; text-align:left;}
.aboutus .history .box .item .text_area dt{font-size:16px;font-family: "Oswald", sans-serif; letter-spacing:0px;}
.aboutus .history .box .item .text_area dd{	white-space: nowrap; font-size:16px;}
.aboutus .history .box .item .text_area .text1{ height:415px;}
.aboutus .history .box .item .text_area .text1 dl{display:flex; position:absolute;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(1){left:-100px; top:0px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(2){left:-100px; top:28px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(3){left:-100px; top:56px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(4){left:-95px; top:84px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(5){left:-90px; top:112px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(6){left:-80px; top:142px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(7){left:-70px; top:170px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(8){left:-55px; top:198px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(9){left:-40px; top:227px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(10){left:-30px; top:256px;}
.aboutus .history .box .item .text_area .text1 dl:nth-child(11){left:-20px; top:285px;}
.aboutus .history .box .item .text_area .text1 dl dt{margin-right:40px;font-weight: 400;}
.aboutus .history .box .item .text_area .text2{margin-left:40px;}

.aboutus .message{ margin-bottom:200px;}
.aboutus .message .box{display:flex;justify-content: flex-end; text-align:left; max-width:1300px; margin-left:auto; position:relative; }
.aboutus .message .box:before{position:absolute; left:-120px; content:"message";writing-mode: vertical-rl;font-family: 'Noto Sans JP', sans-serif; font-size:80px; font-weight:500;}
/*.aboutus .message .box h2{writing-mode: vertical-rl; margin-right:60px; }*/
.aboutus .message .box h3{font-size:4.6cqw; line-height:1.3;margin-bottom:40px;}
.aboutus .message .box .item{}
.aboutus .message .box .text_area{ width:65%; margin-right:60px; line-height:2.4; text-align:justify; padding-left:30px;container-type: inline-size;}
.aboutus .message .box .text_area .text{font-size:1.9cqw;}
.aboutus .message .box .text_area .name{margin-top:60px; display:flex;align-items: center;justify-content: flex-end;white-space: nowrap;font-size: 2.1cqw;}
.aboutus .message .box .text_area .name img{width:80px; margin-right:40px;}
.aboutus .message .box .text_area .name span{font-size:4.0cqw; margin-left:20px;margin-right:20px; padding-bottom:5px;}
.aboutus .message .box .photo{ width:30%; }

.aboutus .quality{text-align:left; margin-bottom:140px;}
.aboutus .quality .box{display:flex;justify-content: space-between;position:relative; min-height:300px; margin-bottom:60px;}
.aboutus .quality .box:first-of-type{align-items: flex-end;}
.aboutus .quality .box:first-of-type .photo img{margin-top:100px; max-height:600px;}
.aboutus .quality .box .item{width:60%;position:relative;height:100%;}
.aboutus .quality .box .item h3{font-size:26px; margin-bottom:20px; line-height:inherit;}
.aboutus .quality .box .item .text{ margin-bottom:40px;font-size:16px; text-align:justify;}
.aboutus .quality .box .item .text:last-child{margin-bottom:0;}
.aboutus .quality .box .photo{width:35%;height:auto;}
.aboutus .quality .box .photo img{height:100%; object-fit:cover; max-height:400px;}
.aboutus .quality .box .photo h2{ text-align:right; margin-bottom:80px; font-size:80px; letter-spacing:0px;}
.aboutus .quality .box .photo h2 span{display:block; font-size:34px;}
.aboutus .quality .box img.map_hokkaidovvv{position:absolute; left:0; top:-30%; width:50%;}
.aboutus .quality .box img.map_hokkaido{width: 100%; margin-bottom:80px;}


.aboutus .overview .logo{margin-bottom:60px;}
.aboutus .overview .logo img{width:120px;}
.aboutus .overview table{font-family: 'Noto Sans JP', sans-serif; font-weight:300; font-size:15px; margin-bottom:0px;}
.aboutus .overview .copy{font-size:30px; margin-top:150px; margin-bottom:50px;}

@media screen and (max-width: 768px) {
.aboutus .head{overflow: hidden;}
.aboutus .head h1{font-size:60px;}
.aboutus .promise{ padding-top:40px; margin-bottom:40px;}
.aboutus .promise .box{flex-direction: column;}
.aboutus .promise .box .copy{width:100%; font-size:26px;}
.aboutus .promise .box .text_area{width:100%; margin-top:40px;}
.aboutus .promise .box .text_area ul li{padding-bottom:5px;padding-top:0px;}

.aboutus .history .box{}

.aboutus .history .box .photo{width: 15%;}
.aboutus .history .box .item{width:85%;}
.aboutus .history .box .item .year{display:none;}
.aboutus .history .box .item .text_area {width:96%; margin-left:auto; margin-right:auto;}
.aboutus .history .box .item .text_area .text1 dl{position:static;}
.aboutus .history .box .item .text_area dd{	white-space: normal;}
.aboutus .history .box .item .text_area .text1{height:auto;}
.aboutus .history .box .item .text_area .text1 dl{margin-bottom:5px; padding-bottom:5px; border-bottom:solid 1px #CCC;}
.aboutus .history .box .item .text_area .text1 dl dt{margin-right:20px;font-size:14px;}
.aboutus .history .box .item .text_area .text1 dl dd{padding-right:20px; font-size:14px;}
.aboutus .history .box .item .text_area .text2{margin-left:0; margin-top:20px;}
.aboutus .message{margin-bottom:60px;}
.aboutus .message .box{flex-wrap: wrap;justify-content: space-between;width:94%;padding: 0 3%; margin-left:auto; margin-right:auto;}
.aboutus .message .box h2{order: 1; margin-right:20px;}
.aboutus .message .box h3{margin-bottom:20px; font-size:30px;}
.aboutus .message .box .text_area{order: 3; width:100%; margin-top:40px; margin-right:0;    padding-left: 0px;}
.aboutus .message .box .photo{width:50%; margin-left:auto; margin-right:auto;}
.aboutus .message .box .text_area .name{flex-direction: column; margin-top:20px;}
.aboutus .message .box .text_area .name img{margin-right:0;}
.aboutus .message .box .text_area .name span{line-height:1; margin-left:0; margin-right:0; font-size:150%;}
.aboutus .message .box .text_area .text{font-size:inherit;}

.aboutus .quality{margin-top:40px; margin-bottom:40px;}
.aboutus .quality .box{flex-direction: column;}
.aboutus .quality .box:first-of-type .photo img{margin-top:0px;}
.aboutus .quality .box .item{width:100%; text-align:center;margin-bottom:40px;}
.aboutus .quality .box .photo{width:100%;}
.aboutus .quality .box .photo h2{text-align:left; margin-bottom:40px; font-size:50px; }
.aboutus .quality .box .photo h2 span{font-size:30px;}
.aboutus .quality .box .item h3{text-align:left;font-size:24px; }
.aboutus .quality .box img.map_hokkaido{width:60%; margin-top:40px;margin-bottom:40px; margin-left:auto; margin-right:auto;}
.aboutus .quality .box .text{text-align:left;}
.aboutus .overview .copy{font-size:18px;margin-top:30px; margin-bottom:30px;}
}


/*==========================
特別なチョコレート
=========================*/
.special{background:#EFEEE8; padding-bottom:80px;}
.special h1{display:flex;align-items: center;justify-content: center; letter-spacing:5px; font-size:30px; }
.special h2{font-family: 'Noto Serif JP', serif; font-weight:normal; font-size:max(28px, 1.4vw); line-height:1.6; margin-bottom:40px;}
.special h3{ font-size:17px; font-family: 'Noto Sans JP', sans-serif; margin-bottom:30px;}
.special h3.taste{font-size:24px;}
.special h1 img{width:100%; }
.special .box{border-top:solid 1px #000; margin-top:60px; padding-top:60px;}
.special .box .text{margin-bottom:60px; }
.special .box .number{font-size:160px; margin-bottom:40px; line-height:1;font-family: "Zen Old Mincho", serif; font-weight:500;}
.special .box .number span{display:block; font-size:18px; margin-top:10px;}
.special .box .name{font-size:16px; margin-bottom:40px; border:solid 1px #000; padding:5px 30px; display:inline-block;font-family: 'Noto Sans JP', sans-serif; font-weight:300;}
.special .introduction{}
.special .introduction .box{display:flex;justify-content: space-between;}
.special .introduction .box .item{width:55%; text-align:left;}
.special .introduction .box .photo{width:40%;}
.special .box .col1 .photo{margin-bottom:40px;}
.special .box .col2{display:flex;justify-content: space-between;}
.special .box .col2.center{align-items: center;}
.special .box .col2 .item{width:48%; text-align:left;}
.special .box .col2 .item img.small{width:50%;}
.special .box .notice{color:#894810;font-family: 'Noto Sans JP', sans-serif; font-size:20px;}
.special .box .notice dl{display:flex; margin-top:10px;}
.special .box .notice dl dt{width:30px;}
.special .box .notice dl dt img{width:20px;}
.special .box .product_name_en{font-family: "Oswald", sans-serif;letter-spacing:1px; font-size:18px; margin-top:20px;}
.special .box .product_name{font-size:24px;}
.special .box .text_foot{font-size:20px;}
@media screen and (max-width: 768px) {
.special{padding-top:60px;}
.special h1 img{margin-right:0; margin-bottom:20px;}
.special h2{margin-bottom:20px;font-size:18px; text-align:left;}
.special h3{margin-bottom:20px}
.special .box{margin-top:40px; padding-top:40px;}
.special .introduction .box{flex-direction: column; }
.special .introduction .box .item{width:100%; }
.special .introduction .box .photo{width:100%;}

.special .box .col2{flex-direction: column; }
.special .box .col2 .item{width:100%; margin-bottom:40px;}
.special .box .col2 .item:last-child{margin-bottom:0;}
.special .box .col2 .item img.small{margin-bottom:20px; max-width:180px;}
.special .box .text{margin-bottom:40px;text-align:left; }
.special .box .notice{font-size:16px;}
.special .box .number{font-size:120px; margin-bottom:20px;}
.special .box .text:last-child{margin-bottom:0;}
.special h3.taste{font-size:18px;}
.special .box .text_foot{font-size:14px;}
}

/*==========================
おすすめラインナップ
=========================*/
.recommend{background:#EFEEE8;padding-bottom:80px;}
.recommend .head{ background:url(/wp_masale/wp-content/themes/masale/assets/image/recommend_head.png) no-repeat; height:100vh; background-position:right;background-size: 45% auto; display:flex;align-items: center; margin-bottom:80px;}
.recommend .head .box{width:50%; display:flex;align-items: center;}
.recommend .head .box .item{width:100%; text-align:left; }
.recommend .head .box .item h1{margin-bottom:40px;}
.recommend .reccomend_item{display:flex;justify-content: space-between;}
.recommend .reccomend_item h2{ font-family: 'Noto Serif JP', serif; font-weight:normal; font-size:60px; margin-bottom:40px;}
.recommend .reccomend_item h4{ font-family: 'Noto Sans JP', sans-serif;margin-bottom:10px;font-weight:500; display:flex; line-height:1.5; }
.recommend .reccomend_item h4 span{white-space:pre;}
.recommend .reccomend_item .photo{width:25%;}
.recommend .reccomend_item .text_area{width:70%; text-align:left;}
.recommend .reccomend_item .text_area .copy{font-size:24px; border-bottom:solid 1px #894810; margin-bottom:20px;}
.recommend .reccomend_item .text_area h3{font-family: 'Noto Sans JP', sans-serif;margin-bottom:20px; font-weight:bold; font-size:20px;}
.recommend .reccomend_item .text_area .text{margin-bottom:40px; font-size:16px;}

.recommend .reccomend_lineup{margin-top:40px;}
.recommend h3.lineup{background:#894810; padding:10px; color:#FFF;font-family: 'Noto Sans JP', sans-serif; margin-bottom:20px; text-align:center; margin-top:40px;}

.recommend .reccomend_lineup .box{display:flex;flex-wrap: wrap;}
.recommend .reccomend_lineup .box .item{width:32%; margin-right:2%; margin-bottom:40px;text-align:left;}
.recommend .reccomend_lineup .box .item:nth-child(3n){margin-right:0;}
.recommend .reccomend_lineup .box .item .photo{margin-bottom:10px;}
.recommend .reccomend_lineup .box .item .name_en{font-family: "Oswald", sans-serif;letter-spacing:1px; /*font-size:18px;*/ font-size: 80%;}
.recommend .reccomend_lineup .box .item .name{/*font-size:26px;*/}
.recommend .reccomend_lineup .box .item .name span{/*font-size:60%;*/}
.recommend .reccomend_lineup .box .item .price{/*font-size:20px;*/ font-size: 18px;margin-bottom: 10px;line-height: 1.0;}
.recommend .reccomend_lineup .box .item .price span{font-size:12px/*70%*/;margin-right: 5px;}
.recommend .reccomend_lineup .box .item .price img{width:30px;}
.recommend .reccomend_lineup .box .item .waku{border:solid 1px #000; padding:15px 10px 10px 10px; text-align:center;}

.recommend .reccomend_lineup .box .item .triangle{ line-height:1; margin-bottom:10px;}
.recommend .reccomend_lineup .box .item .triangle:before{content:"";display: inline-block;  width: 10px;  height: 15px;  background: #CBDCE7;  clip-path: polygon(0 0, 0 100%, 100% 50%); margin-right:5px;}
  .recommend .reccomend_lineup .box .item .triangle:after{content:"";display: inline-block;  width: 10px;  height: 15px;  background: #CBDCE7;  clip-path: polygon(100% 0, 0 50%, 100% 100%);margin-left:5px;}

.recommend .reccomend_lineup .box.col2{justify-content: space-between;}
.recommend .reccomend_lineup .box.col2 .item{margin-right:0;}
.recommend .reccomend_lineup .box.col2 .item:nth-child(1){width:65%;}
.recommend .reccomend_lineup .box.col2 .item:nth-child(2){width:32%;}



.recommend img.link_online{width:auto; margin-top:60px; margin-bottom:100px;}

.recommend .foot{text-align:left; margin-top:80px; border-top:solid 1px #000; padding-top:60px;}
.recommend .foot .box{display:flex;flex;justify-content: space-between;}
.recommend .foot .box .navi{width:20%;}
.recommend .foot .box .navi ul{display:flex;}
.recommend .foot .box .navi ul li{margin-right:40px;}
.recommend .foot .box .navi ul li img{width:80px;}
.recommend .foot .box .text{width:70%;}
.recommend .foot .copy{font-size:max(30px, 1.6vw);margin-top:80px;}

@media screen and (max-width: 768px) {
.recommend{padding-top:60px;}
.recommend .head {height:auto;background-size: 35% auto;}
.recommend .head .box{width:63%;}
.recommend .head .box .item h1{padding-top:40px;}
.recommend .reccomend_item h2{font-size:30px;}
.recommend .reccomend_item{flex-direction: column-reverse;}
.recommend .reccomend_item .photo{width:100%; margin-bottom:20px;}
.recommend .reccomend_item .text_area{width:100%; }
.recommend .reccomend_item .text_area h3{line-height:1.6;}
.recommend .reccomend_item .text_area .copy{padding-bottom:10px; font-size:20px;}
.recommend .reccomend_lineup .box .item{width:100%; margin-right:0;}
.recommend .reccomend_lineup .box .item:last-child{margin-bottom:0;}
.recommend .reccomend_lineup .box .item .name{font-size:20px;}
.recommend .reccomend_lineup .box .item .name_en{font-size:14px;}
.recommend .reccomend_lineup .box.col2{flex-direction: column;}
.recommend .reccomend_lineup .box.col2 .item:nth-child(1){width:100%;}
.recommend .reccomend_lineup .box.col2 .item:nth-child(2){width:100%;}
.recommend img.link_online{width:100%; margin-top:60px; margin-bottom:60px;}
.recommend .foot .box{flex-direction: column;}
.recommend .foot .box .navi{width:100%;}
.recommend .foot .box .text{width:100%;}
.recommend .foot .box .navi ul{justify-content: center; margin-bottom:20px;}
.recommend .foot .box .navi ul li{margin-left:20px; margin-right:20px;}
.recommend .foot .box .text{line-height:1.6;}
.recommend .foot .copy{font-size:20px;}
}
/*==========================
店舗情報
=========================*/
.access{}
.access .head{ margin-bottom:80px;}
.access .head h1{font-size:120px; padding-top:150px; padding-bottom:60px;font-family: 'Noto Sans JP', sans-serif;}
.access .head .copy{font-size:40px; margin-bottom:40px;}
.access iframe{border-radius:25px; margin-bottom:100px;}
.access .shop_info .box{display:flex;justify-content: space-between; margin-bottom:100px;}
.access .shop_info .box:nth-child(){margin-bottom:20px;}
.access .shop_info .box:nth-child(5) .text_area .info img{position:absolute; right:5%; top:0px;width: 40%;}
.access .shop_info .box:nth-child(6){align-items: flex-end;}
.access .shop_info .box .photo{width:40%;}
.access .shop_info .box .photo img{height:500px; object-fit:cover;}
.access .shop_info .box .text_area{width:55%; text-align:left; padding-right:5%;}
.access .shop_info .box .text_area h2{display:flex;align-items: center;font-family: 'Noto Serif JP', serif; font-weight:normal; font-size:40px; line-height:1.1; margin-bottom:40px;}
.access .shop_info .box .text_area h2 span{font-size:40%; margin-left:20px; line-height:1.5;}
.access .shop_info .box .text_area .copy{font-size:22px; margin-bottom:20px;}
.access .shop_info .box .text_area .text{margin-bottom:40px;}
.access .shop_info .box .text_area .info{font-family: 'Noto Sans JP', sans-serif; font-weight:300; font-size:90%; position:relative;}

.access .service .head{position:relative; margin-bottom:60px;}
.access .service .head img{width:50%; min-width:400px;}
.access .service .head h2{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); color:#FFF;}
.access .service .copy{margin-bottom:40px;font-size:30px;}
.access .service .text{margin-bottom:40px;}
.access .service .notice{margin-bottom:60px;font-family: 'Noto Sans JP', sans-serif; font-weight:300;}
.access .service h3{margin-bottom:20px; font-size:16px;font-family: 'Noto Sans JP', sans-serif;}

@media screen and (max-width: 768px) {
.access iframe{margin-bottom:60px;}
.access .head h1{font-size:40px; padding-top:140px; padding-bottom:60px;}
.access .head .copy{font-size:30px;}
.access .shop_info{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; }
.access .shop_info .box{flex-direction: column-reverse;}
.access .shop_info .box .photo{width:100%; margin-top:20px;}
.access .shop_info .box .text_area{width:100%;  padding-right:0%;}
.access .shop_info .box .text_area h2{flex-direction: column;}
.access .shop_info .box .text_area h2 span{margin-top:5px;}

.access .service .head{margin-bottom:40px;}
.access .service .head img{width:300px;    min-width: 300px;}
.access .service .text{text-align:left;}
.access .service .copy{font-size:22px;}
.access .shop_info .box .text_area h2{font-size:40px;}
.access .shop_info .box .photo img{height:300px;}
}


/*==========================
商品ラインナップ
=========================*/
.products{ text-align:left;}
.products .navi{width:100%; font-family: 'Noto Sans JP', sans-serif; position:fixed;top: 60px; left: 0; background:#FFF; text-align:center; padding:30px 0; z-index: 1;}
.products .navi ul{display:flex;align-items: center;justify-content: space-between; width:90%; margin-left:auto; margin-right:auto;}
.products .navi ul li{width:8%; margin-left:15px; margin-right:15px; font-size:12px; letter-spacing:0; line-height:1.6;}
.products .navi ul li span{display:block; font-size:10px;}
.products .navi ul li img{margin-bottom:10px; width:70%;transition:0.2s all;}
.products .navi ul li:hover img{transform: scale(1.15);transition:0.2s all;}
.products h1{padding-top:300px; margin-bottom:80px;font-family: 'Noto Sans JP', sans-serif; font-size:60px; font-weight:bold; text-align:center;}
.products .head{height:500px; display:flex; margin-bottom:80px;}
.products .head .photo{width:55%; margin-right:20px;}
.products .head .photo img{height:100%; object-fit:cover;}
.products .head .text_area{width:40%;display:flex;flex-direction: column;}
.products .head .text_area .products_name{display:flex;}
.products .head .text_area .products_name h2{font-size:16px;transform: rotate(90deg);transform-origin: left 10px; margin-left:100px;}
.products .head .text_area .products_name h2 span{font-size:34px; display:block; margin-bottom:10px;width: 300px;}
.products .head .text_area .products_name .icon{width:100px;margin-left: -240px;}
.products .head .text_area .text{margin-top:auto;padding-left: 50px;padding-right: 50px;}

.products .box{display:flex; flex-wrap: wrap;}
.products .box .item{width:32%; margin-right:2%; margin-bottom:20px; line-height:1.6;}
.products .box .item:nth-child(3n){margin-right:0;}
.products .box .item .photo{margin-bottom:10px; position:relative;}
.products .box .item .photo .prize{position:absolute; left:20px; bottom:0; width:30%;}
.products .box .item .photo .limited{position:absolute; left:0px; top:20px; width:40%;}
.products .box .item .photo .limited li{color:#FFF; padding:5px 10px; width:fit-content;font-family: 'Noto Sans JP', sans-serif; font-size:12px; margin-bottom:3px; white-space:nowrap; line-height:1; min-width:140px;text-align:left; /*text-align:center;*/}
.products .box .item .photo .limited li.spring{ background:/*#FF7DCA*/;}
.products .box .item .photo .limited li.summer{ background:/*#39b54a*/;}
.products .box .item .photo .limited li.autumn{ background:/*#f15a24*/;}
.products .box .item .photo .limited li.winter{ background:/*#29abe2*/;}
.products .box .item .photo .limited li.coconosusukino{ background:#000;}
.products .box .item .photo .limited li.shinchitose{ background:#000;}
.products .box .item .photo .limited li.summer_honten{ background:#000;}
.products .box .item .photo .limited li.honten{ background:#000;}
.products .box .item .photo .limited li.daimaru{ background:#000;}
.products .box .item .photo .limited li.mitsukoshi{ background:#000;}
.products .box .item .photo .limited li.handling{ background:#000;}
.products .box .item .photo .limited li.onlineshop{ background:#000;}
.products .box .item .photo .limited li.regular{ background:#000;}
.products .box .item .photo .limited li.chocolat{ background:#000;}
.products .box .item .photo .limited li.tea{ background:#000;}
.products .box .item .photo .limited li.coffee{ background:#000;}
.products .box .item .photo .limited li.softdrink{ background:#000;}




.products .box .item .name_en{font-family: "Oswald", sans-serif;letter-spacing:1px;font-size:80%; letter-spacing:0;}
.products .box .item .name{margin-bottom:3px;}
.products .box .item .explanation{font-size:70%;overflow: hidden;  display: -webkit-box;  text-overflow: ellipsis;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; margin-bottom:5px;}
.products .box .item .price_wrap{display:flex;flex-wrap: wrap;}
.products .box .item .price{ display:flex;align-items: center; font-size:18px;  margin-bottom:10px;line-height:1.0;}
.products .box .item .price > div{display:flex;align-items: flex-end;}
.products .box .item .price span{font-size:12px; margin-right:5px; max-width:150px;line-height:1.2;}
.products .box .item .price img{width:30px;}
.products .box .item .products_content{font-size:13px;margin-top: -5px;}
.products .box .item .notice{	font-size: 13px;	color: #930; display:block; margin-top:-5px;}


@media screen and (max-width: 768px) {
.products h1{font-size:40px; margin-bottom:40px;}
.products .navi{padding-top:15px;transition: transform 0.3s; height:240px;}
.products .navi.hidden {transform: translateY(-280px);}
.products .navi ul{flex-wrap: wrap;justify-content: flex-start;width:95%; margin-left:auto; margin-right:auto;}
.products .navi ul li{width:19%;    margin-left: 0.5%;    margin-right: 0.5%; font-size:9.5px; margin-bottom:10px;}
.products .navi ul li span{display:none;}
.products .head{flex-direction: column-reverse;width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; height:auto;  }
.products .head .photo{width:100%; margin-right:0;}
.products .head .text_area{width:100%;}
.products .head .text_area .products_name{justify-content: space-between;align-items: flex-start;}
.products .head .text_area .products_name h2{transform:rotate(0deg); margin-left:0; width:calc(100% - 120px);}
.products .head .text_area .products_name h2 span{font-size:26px;}
.products .head .text_area .text{padding-left:0; padding-right:0; margin-bottom:20px;}
.products .head .text_area .products_name .icon{margin-left:0; margin-top:-20px;}
.products .box .item{width:100%;}
.products .box .item .price{font-size:16px;}
.products .box .item .price span{font-size:10px;}
.products .box .item .name{font-size:90%;}
.products .box .item .name_en{font-size:70%;}
}

@media screen and (max-width: 768px) {
.products .navi{padding-top:15px;transition: transform 0.3s; height:340px;}
.products .navi.hidden {transform: translateY(-340px);}
.products h1{padding-top:400px; }
}
@media screen and (max-width: 600px) {
.products .navi{padding-top:15px;transition: transform 0.3s; height:300px;}
.products .navi.hidden {transform: translateY(-300px);}
.products h1{padding-top:360px; }
}
@media screen and (max-width: 500px) {
.products .navi{padding-top:15px;transition: transform 0.3s; height:260px;}
.products .navi.hidden {transform: translateY(-300px);}
.products h1{padding-top:320px; }
}



@media screen and (max-width: 375px) {
.products .navi{height:240px;}
.products .navi.hidden {transform: translateY(-280px);}
.products h1{padding-top:300px; }
}

/*==============================
もっと見る
==============================*/
.more{transition:0.2s all;}
.more:hover{transform: scale(1.15);transition:0.2s all; letter-spacing:2px;}

/*========================
モーダルウィンドウ
=========================*/
dialog {
    background: #fff;
    border: #333 1px solid;
    border-radius: 10px;
    box-shadow: 0 0 10px #666;
    color: #333;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    width: fit-content;
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    transition: background .5s ease-in-out;
}
dialog.show {
    opacity: 1;
}
dialog.show::backdrop {
    background: rgba(0, 0, 0, 0.8);
}
dialog .dialog-inner {
    padding: 10px;
	background:#EDF5FD;
	color:#0E42A5;
	line-height:2;
}
dialog .dialog-inner img{    height: 80vh; width:auto;}
button.dialog :hover {
    background: #333;
    color: #fff;
}
button.dialog-close{ position:absolute;top:15px; right:25px; font-size:30px; outline:none; opacity: .75; z-index:1;}
button.dialog-close:hover{ opacity: 1;}
.dialog-open:hover{cursor:pointer;}


@media screen and (max-width: 768px) {
dialog .dialog-inner img {
    height: auto;
    width: 100%;
}
}





/*=======  その他ページのヘッダー  =======*/
.other_head{height:500px;    text-align: left; position:relative; margin-bottom:40px;}
.other_head img{height:100%; width:70%; object-fit:cover; position:absolute; left:0; top:0;object-position: right bottom;}
.other_head img.logo{ width:8%; min-width:120px; height:auto; right:15%; left:unset;top:160px;}
.other_head h1{position:absolute; left:2%; top:200px; z-index:1;color:#FFF; margin-left:40px;}
.other_head h1 span{font-size:max(3.8vw,40px); display:block; margin-bottom:20px; margin-left:-20px;}



@media screen and (max-width: 768px) {
.other_head{height:300px; margin-bottom:0;}
.other_head img{height:100%; width:70%;  }
.other_head img.logo{top:100px;min-width:80px; right:3%;}
.other_head h1{top:90px; margin-left:0;}
.other_head h1 span{margin-left:0; margin-bottom:10px;font-size:max(4vw,30px);}
}



/*=======  ニュース  =======*/
.news{font-family: 'Noto Sans JP', sans-serif;  font-weight:300;text-align:left;}
.news.list .box{display:flex;flex-wrap: wrap;}
.news.list .box .item{width:32%; margin-right:2%; margin-bottom:20px;}
.news.list .box .item:nth-child(3n){margin-right:0;}
.news .box .photo{border-radius:20px; overflow:hidden; margin-bottom:10px;}
.news.list .box .item .photo img{transition:0.2s all;aspect-ratio: 1 / 1; object-fit:cover;}
.news.list .box .item:hover .photo img{transform: scale(1.15);transition:0.2s all;}
.news .box .item .date{margin-bottom:5px;}

.news.detail{} .box{}
.news.detail dl{display:flex; margin-bottom:20px; margin-top:20px;}
.news.detail dt{width:130px;}
.news.detail h3{font-size:20px; margin-bottom:10px; margin-top:40px; font-weight:bold;}



/*=======  ページャー  =======*/
.pagenation{display:flex;justify-content: center;margin-bottom:100px; margin-top:100px;}
.pagenation .item{width:10%; margin:20px 0px; text-align:center;}
.pagenation .item a{color:#000;}
.pagenation .item:last-child{text-align:right;}
.pagenation .item > div{display:flex; font-size:13px; margin-bottom:20px;}
.pagenation .item:last-child > div{flex-direction: row-reverse;}
.pagenation .item .date{ margin-bottom:0px;}
.pagenation .item .title{border-bottom:none; padding-bottom:0px;}
.pagenation .item .title a{color:#000; font-size:17px;}

.arrow-left,.arrow-right {position: relative;display: inline-block;padding: 10px;}
.arrow-left::before, .arrow-right::before {  content: '';  width: 20px;  height: 20px;  border-top: solid 2px #000;  border-right: solid 2px #000;  position: absolute;  left: 0px;  top: 1px;}

.arrow-left::before{ transform: rotate(-135deg);}
.arrow-right::before {  transform: rotate(45deg);}

@media screen and (max-width: 768px) {
.page-detail .title{margin-bottom:40px;}
.pagenation{margin-bottom:40px;}
}

/*=======  よくあるご質問  =======*/
.faq{font-family: 'Noto Sans JP', sans-serif;  font-weight:300;text-align:left;}
.faq .box{display:flex;flex-wrap: wrap;justify-content: space-between;}
.faq .box .item{width:48%;margin-bottom:40px; border-bottom:solid 2px #000; padding-bottom:30px;}
.faq .box .item .question{ position:relative; padding-left:50px; margin-bottom:30px;}
.faq .box .item .question:before{content:"Q"; font-size:50px; position:absolute; top:-15px; left:0px; line-height:1;}
.faq .box .item .answer{ position:relative; padding-left:50px;}
.faq .box .item .answer:before{content:"A"; font-size:50px; position:absolute; top:0; left:5px; line-height:1;}

@media screen and (max-width: 768px) {
.faq .box{flex-direction: column;}
.faq .box .item{width:100%;margin-bottom:40px;  padding-bottom:30px;}
.faq .box .item:first-of-type{ padding-top:20px;}
}


/*=======  お客様の声  =======*/
.voice{font-family: 'Noto Sans JP', sans-serif; font-weight:300; text-align:left;}
.voice .box{display:flex;flex-wrap: wrap;justify-content: space-between;}
.voice .box .item{width:48%;margin-bottom:40px; border-bottom:solid 2px #000; padding-bottom:30px;}
.voice .box .item h2{ font-size:26px; font-weight:normal; margin-bottom:40px;}


@media screen and (max-width: 768px) {
.voice .box{flex-direction: column;}
.voice .box .item{width:100%;margin-bottom:40px;  padding-bottom:30px;}
.voice .box .item h2{font-size:22px; margin-bottom:20px;}
}




/*=======  部品  ======*/
.text_brown{color:#894810;}
.text_arange{color:#F15A24;}
.noto_sans{font-family: 'Noto Sans JP', sans-serif; font-weight:500;}
.p-0{padding:0px !important;}
.mt25{margin-top:25px !important;}
.mb50{margin-bottom:50px !important;}
.pt45{padding-top:45px !important;}
.pb50{padding-bottom:50px !important;}
.text-left{text-align:left;}
.bg-white{background-color:#FFF;}
.bg-blue{background-color:#EFFBFF;}
.bg-light-gray{background-color:#f8f8f8; }
.btn-more{
	min-width: 300px;
	width:fit-content;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.btn-more a{display:block;color: #fff;background: #AB9A86;transition-duration: .3s; text-align:center; padding:15px; }
.btn-more a:hover{color: #fff;background: #a4c1d7;transition-duration: .3s;}	
.btn-more-small a{display:block;color: #fff;background: #AB9A86;transition-duration: .3s; text-align:center; padding:5px 0px; }
.btn-more-small a:hover{color: #fff;background: #a4c1d7;transition-duration: .3s;}	


a .btn-more{display:block;color: #fff;background: #AB9A86;transition-duration: .3s; text-align:center; padding:15px; }
a:hover .btn-more{color: #fff;background: #a4c1d7;transition-duration: .3s;}	


.blue{color:#00a8ca; }	
.red{color:red; }	
.photo-center{text-align:center; margin:0 auto; margin-bottom:40px;}


table {width:100%;}
table th, table td{padding:10px;border-top:solid 1px #CCC; line-height:1.8;}
table tr:first-child th, table tr:first-child td{border-top:none;}
table th{background-color:#f8f8f8; width:25%; text-align:center;vertical-align: middle; font-weight:normal;}
.img100{width:100%; height:auto;}


@media screen and (max-width: 768px) {
table td:first-child{ font-weight:bold; padding-bottom:5px;}
table td:last-child{border-top:none;padding-top:0;}
}


/*=======  フォーム  ======*/
.contact{ text-align:left;font-family: 'Noto Sans JP', sans-serif; font-weight:300;}
.contact .notice{ border-bottom:solid 1px #000; padding-bottom:20px; margin-bottom:20px;}
.contact .notice .box{display:flex;align-items: center;}
.contact .notice h2{font-size:22px; width:240px; white-space:nowrap; margin-right:20px; font-weight:normal; margin-bottom:0;}
.contact .notice .item{width:auto;}
.contact .flex{display:flex;align-items: center;}
.contact .item{  width: 100%;
  outline: none;display:flex;align-items: center; margin-bottom:20px;

}
.contact .item .title{display:flex;    align-items: center; width:240px; white-space:nowrap; margin-right:20px;}
.contact .item .must{width:70px; margin-right:20px; height:30px;}
.contact .item .must.on{border-radius:10px; color:#FFF; background:#754c24; padding:3px 5px; text-align:center; font-size:14px;}

.contact textarea{ width: calc( 100% - 240px );
  border: 1px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
    padding: 8px;
	display:flex;}
.contact textarea:focus {
  border-color: #00a8ca;
  box-shadow: 0 0 8px 0 #00a8ca;
}

.contact .item span{padding:0 5px; white-space:nowrap;}
.contact .item span.error{color:#C00;}
.contact .item label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; margin-right:20px;}
.contact .item label:hover{cursor:pointer;}

input[type="text"],input[type="email"] {
  width: calc( 100% - 240px );
  border: 1px solid #aaa;
  border-radius: 4px;
  margin-bottom: 0px;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="text"]:focus {
  border-color: #00a8ca;
  box-shadow: 0 0 8px 0 #00a8ca;
}


.contact input[type=submit],.contact button[type=submit]{background: #754c24; color:#FFF; width:300px; text-align:center; margin-left:auto; margin-right:auto; padding:10px;transition:0.2s all; border-radius:10px; }
.contact input[type=submit]:hover,,.contact button[type=submit]:hover{transform: scale(1.05);transition:0.2s all;}
.contact ul.btn{flex-direction: column; margin-top:40px; margin-bottom:40px;}
.contact ul.btn li.back{margin-bottom:20px;}
.contact ul.btn li.back button[type=submit] {width:200px;}

.w60px{width:60px !important;}

@media screen and (max-width: 768px) {
.contact .notice .box{flex-direction: column;align-items: flex-start;}
.contact .notice h2{margin-bottom:20px;}
.contact .item{flex-direction: column;align-items: self-start;}
.contact .item .title{margin-bottom:10px;flex-direction: column-reverse;align-items: self-start;}
.contact .item .must{margin-top:5px;}
.contact .item .must.off{display:none;}
.contact .flex span{ padding:0;}
input[type="text"], input[type="email"]{margin-left:0px;width: auto;width: 100%;}
.contact .item label{margin-right:10px;}
.contact textarea{ width: 100%;}


.form{width:100%;}
.form .item{display:block;}
.form .item span{margin-bottom:10px; margin-right:0px;    display: inline-block;}
.inputWithIcon i{line-height:1.2;}
table th, table td{width:100% !important; display:block !important; text-align:left;}
.btn-more{
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.photo-center{margin-bottom:20px;}
.img100-sp{width:100%; height:auto;}
}


/*==============================
ページトップ
==============================*/

#page_top {position: fixed;bottom: 30px;left: calc(100vw - 100px); display:none; z-index:1;}
#page_top a {background-color: #999;color: #fff;text-align: center;	text-decoration: none;font-size: 24px;padding-top: 6px;	padding-right: 15px;padding-bottom: 10px;padding-left: 15px;}
#page_top a:hover {background-color: #666;text-decoration: none;}

@media screen and (max-width: 768px) {
#page_top {bottom: calc(100vh - 95vh);left:auto; right:20px; }
#page_top a{}
}



/*=======  サイトマップ  =======*/


/*=======  フッター  ====*/
footer{padding-top:100px;  font-size:12px; text-align:center;font-family: "Oswald", sans-serif;letter-spacing:1px; }
footer .box{display:flex;justify-content: space-between;width:700px; margin:0 auto;}
footer .box .logo{width:17%;}
footer .box .navi{width:74%; text-align:left;}
footer .box .navi ul{display:flex;align-items: center; margin-bottom:10px; }
footer .box .navi ul li{margin-right:25px;}
footer .box .navi ul li.sns{margin-left:7px; margin-right:7px;}
footer .box .navi ul li i{font-size:30px;}
footer .box .navi ul li img{width:50px;}
footer .box .navi .address{letter-spacing:0px;}
footer .box .navi .address span{font-size:160%; }
.copyright{text-align:center;font-family: "Oswald", sans-serif; font-size:11px;letter-spacing:1px; margin-top:40px; margin-bottom:40px;letter-spacing:0px;}


@media screen and (max-width: 768px) {
footer{margin-bottom:0px; text-align:center;}
footer .box{width:100%;flex-direction: column;flex-wrap: wrap;}
footer .box .logo{width:30%; margin-left:auto; margin-right:auto;margin-bottom:20px;}
footer .box .navi{width:100%; }
footer .box .navi ul{justify-content: center;flex-wrap: wrap;}
footer .box .navi ul li{margin-left:5%; margin-right:5%; width:40%; text-align:center; margin-bottom:20px;}
footer .box .navi ul li:nth-child(1){text-align:right;}
footer .box .navi ul li:nth-child(2){text-align:left;}
footer .box .navi ul li.sns{width:10%;}
footer .box .navi .address{text-align:center;}
}


/*=======  下からフェードアップ（ラインナップ用）  =======*/
.fadeup_lineup {opacity: 0;}
.fadeup_lineup.isShow {  opacity: 1;animation: fadeup_lineup 1.0s ease 0.1s 1 normal backwards;}
@keyframes fadeup_lineup {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}



/*=======  下からフェードアップ  =======*/
.fadeup {opacity: 0;}
.fadeup.isShow {  opacity: 1;animation: fadeUp 1.0s ease 0.5s 1 normal backwards;}
.delay01{animation-delay: 0.1s !important;}
@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


/*=======  左からからフェードイン  =======*/
.fadein_from_left{opacity: 0;}
.fadein_from_left.isShow {  opacity: 1;animation:  fadein_from_left 1.0s ease 0.5s 1 normal backwards;}

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

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*=======  右からからフェードイン  =======*/
.fadein_from_right{opacity: 0;}
.fadein_from_right.isShow {   opacity: 1;animation:  fadein_from_right 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*=======  上からからフェードイン  =======*/
.fadein_from_top{opacity: 0;}
.fadein_from_top.isShow {   opacity: 1;animation:  fadein_from_top 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_top {
  0% {
    opacity: 0;
    transform: translateY(-500px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@media screen and (max-width: 768px) {
.pc{display:none !important;}
}

@media screen and (min-width: 769px) {
.sp{display:none !important;} 
}