@charset "utf-8";
/* CSS Document */
/*
Theme Name: meguru
Theme URI: https://megu-kotu.com
Author: zizi by Egg design office
Author URI: https://web8-egg.com
*/
*{ -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;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

:root{
  --base-color: #876a4d;
  --bg-pink: #fff3f3;
}

::after, ::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

p{ font-size: 16px; line-height: 1.4; margin-bottom: 15px; color: var(--base-color);}

.set{ position: relative; z-index: 7;}
.right-img{ position: absolute; right: 20px; top: -80px; width: 200px;}
.left-img{ position: absolute; left: 20px; top: -80px; width: 200px;}

.right-img img{ width: 100%;}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
共通
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blog-wrapper{ max-width: 1000px; width: 100%; padding: 0 15px; margin: 0 auto; overflow: hidden;}
.wrapper{ max-width: 1280px; width: 100%; padding: 0 15px; margin: 0 auto; overflow: hidden;}
.container{ width: 100%; padding: 0 15px; margin: 0 auto; overflow: hidden;}
.blog-wrapper > h1{ font-size: 18px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px dotted #876a4d; margin-bottom: 15px; color: #876a4d;}
.blog-wrapper .blog-body > h1{ font-size: 18px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px dotted #876a4d; margin-bottom: 15px; color: #876a4d;}
.has-padding{ padding: 80px 0;}
.has-padding-bottom{ padding-bottom: 80px;}
.has-padding-top{ padding-top: 80px;}
.has-pad-half{ padding: 40px 0;}
.has-padding-up,
.has-padding-low{ padding: 80px 0;}


.has-padding-low::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 16px;
  background: url("images/wave-pink.png") repeat-x;
  z-index: -1;
}

.has-padding-up::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 16px;
  background: url("images/wave-white.png") repeat-x;
  z-index: -1;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
マーカー
–––––––––––––––––––––––––––––––––––––––––––––––––– */
strong{ font-weight: bold;}
.marker-y{ background: linear-gradient(transparent 60%, #ffff66 60%); font-weight: 500;}
.tape{ width: 164px; height: 24px; position: absolute; right: -80px; top: -30px;; transform:skew(15deg,15deg);}

.icon-1{ width: 70px; margin: 0 auto 20px;}
.icon-1 img{ width: 100%;}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ヘッダー ロゴカラー　#ed6d35
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{ width: 100%; height: 100px; padding-top: 20px; display: flex;}

.logo-area{ max-width: 320px; padding-left: 30px; width: 100%;}
.logo-area figure{ float: left; width: 80px;}
.logo-area img{ width: 100%; height: auto;}
.logo-text{ width: calc( 100% - 90px); float: left; padding-left: 10px;}

.logo-text span{ font-size: 12px; color: var(--base-color);}
.logo-text h1,
.logo-text p{ font-size: 22px; color: #ff8f8f; font-weight: 600; margin-bottom: 0; margin-top: 5px; /*line-height: inherit; line-height: 1.3;*/}
.logo-text .en{ font-size: 14px; color: #ff8f8f; display: none;}

nav{ width: calc(100% - 380px); padding-top: 15px;}
nav ul{ display: flex;}
nav li{ position: relative;}
nav li a{ color: #ff8f8f; display: block; width: 100%; height: auto; padding: 10px 12px; text-align: center; font-weight: 600; transition: .6s;}
nav li a:hover{ color: #f9ecee;}
nav li::after {
  content: "";
  display: block;
  width: 2px;
  height: 20px;
  background-color: #f9ecee;
  position: absolute;
  right: -1px;
  top: calc((100% - 20px) / 2);
}
nav li:last-child::after { content: none;}
.current{ color: #f00;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ナビゲーション（スマホ）
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hamburger{ display : none; position: fixed; z-index : 999; right : 13px; top : 12px; width : 42px; height: 42px; cursor: pointer; text-align: center; background: rgba( 255,255,255,.6); }
nav.globalMenuSp{ display: none;}

.login-nav{ display: block;}

.bg-1{ background: #fff3f3;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
top画像
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.swiper-wrap,
.topimg { width: 100%; max-height: calc(100vh - 300px); height: 100%; overflow: hidden; position: relative; z-index: 10;}
.topimg::after{ content: ''; background: url("images/wave-white.png") repeat-x; display: block; height: 16px; width: 100%; position: absolute; top: 0; left: 0; z-index: 999;}
.topimg figure{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%;}
.topimg img{ width: 100%;}
.topimg h1{ position: absolute; left: 50%; top: 45%; transform:translate(-50%); z-index: 5; text-shadow: 3px 3px 3px var(--base-color); font-size: 60px; color: #fff; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 600; width: 80%;text-align: center;}
.topimg p{ position: absolute; left: 50%; top: 60%; transform:translate(-50%); z-index: 6; text-shadow: 3px 3px 3px var(--base-color); text-align: center; font-size: 50px; color: #fff; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 600; width: 90%;}

.swiper{ height:80vh; /*z-index: -1 !important;*/}
.swiper-slide{ width: 100%;}
.swiper-slide img{ width: 100%; height: 100%; object-fit: cover;}

.swiper-button-next,
.swiper-button-prev { top: 35% !important;}

.content-heading{ text-align: center; margin-bottom: 40px;}
.content-heading h2 span{ font-size: 16px; text-align: center; display: block; margin-bottom: 10px; line-height: 1.3;}
.content-heading h2{ color: #ff8f8f; font-size: 32px; text-align: center; font-weight: 700; margin-bottom: 5px; position: relative; font-family: 'Zen Maru Gothic', sans-serif;}
.content-heading > p{ width: 85%; margin: 15px auto 0; text-align: left;}

.sub-top{ width: 100%; height: 200px; overflow: hidden; position: relative; background: url("images/wave-white.png") repeat-x #fac0ce;}
.sub-top h1{ position: absolute; left: 50%; top: 45%; transform:translate(-50%,-50%); margin: auto; z-index: 5; width: 100%; text-align: center; font-size: 30px; color: #fff;}
.sub-top p{ position: absolute; left: 50%; top: 65%; transform:translate(-50%,-50%); margin: auto; z-index: 6; width: 100%; text-align: center; font-size: 18px; color: #fff;}

h2{ color: #ff8f8f; font-size: 36px; text-align: center; font-weight: 700; margin-bottom: 5px; font-family: 'Zen Maru Gothic', sans-serif;}
.en-tit { position: relative; display: inline-block; padding: 5px 15px 0; font-size: 16px; color: #ff8f8f;}

.en-tit::before { left: 0;}
.en-tit::before { content: ''; position: absolute; top: 65%; display: inline-block; width: 8px; height: 1px; background-color: #ff8f8f;}
.en-tit::after { right: 0;}
.en-tit::after { content: ''; position: absolute; top: 65%; display: inline-block; width: 8px; height: 1px; background-color: #ff8f8f;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––　
　パンくずリスト
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/*.page-id-8 #breadcrumb{ display: none;}*/
#breadcrumb{ max-width: 90%; margin:10px auto; clear: both; overflow: hidden; line-height: 1.4;}
#breadcrumb li{ font-size: 12px; float: left; margin-right: 3px; color: #333;}
#breadcrumb li a{ font-size: 12px; float: left; margin-right: 3px; color: #777;}
#breadcrumb li::after{ content: '→'; display: inline; padding-right: 3px;}
#breadcrumb li:last-child{ margin-right: 0;}
#breadcrumb li:last-child:after { content : none;}

.small-date{ font-size: 14px; color: var(--base-color); margin-bottom: 10px; display: block; padding: 0 0 5px;}
.icatch{ width: 100%; height: auto; margin: 0 auto 20px;}
.icatch img{ width: 100%; height: auto;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
アバウト
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.about-area{ width: 100%;}
.greeting-area{ width: 100%; display: flex; flex-wrap: wrap;}
.greeting-text{ width: 50%; padding-left: 50px;}
.greeting-text > h3{ font-size: 20px; color: var(--base-color); font-weight: 600; margin-bottom: 15px;} 

.about-wrapper{ width: 100%; margin: 0 auto; position: relative;}
.about-inner-img{ width: 50%; height: auto;}
.about-inner-img img{ width: 100%;}
.about-inner-text{ width: 50%; position: absolute; left: 40%; background: #fff; padding: 50px; box-shadow: 5px 5px 3px var(--base-color); border-radius: 14px; bottom: 10%;}

.about-area figure{ width: 35%; float: left;}
.about-text{ width: 100%; max-width: 1000px; margin: 0 auto;}
.about-text > h3,
.about-inner-text > h3{ font-size: 20px; color: var(--base-color); margin-bottom: 10px; font-weight: 600;}

.members-text{ width: 100%; max-width: 800px; margin: 0 auto;}

.greeting-area figure{ width: 50%;}
.greeting-area figure img{ width: 100%; height: auto;}

.activity-area{ width: 100%; max-width: 1140px; padding: 0 15px; margin: 0 auto; overflow: hidden;}
.activity-list ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.activity-list li{ width: 32%; margin-bottom: 15px;}
.activity-list li h3{ color: #004aa0; font-size: 18px; font-weight: 800; margin-bottom: 10px;}
.banner{ width: 800px; height: 250px; margin: 50px auto; overflow: hidden;}

.initiatives-list ul{ display: flex; flex-wrap: wrap;  justify-content: space-between; counter-reset: number 0;}
.initiatives-list ul li{ width: calc( 50% - 15px); margin-bottom: 30px;}
.initiatives-list ul li figure{ width: 100%; height: 250px; overflow: hidden; margin-bottom: 15px;}
.initiatives-list li h3{ font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #004aa0; line-height: 1.4; position: relative; padding-left: 60px; padding-top: 10px;}
.initiatives-list li h3:before { counter-increment: number 1; content: counter(number) " "; color: #fff; font-size: 40px; display: block; position: absolute; top: 0; left: 0; background: #83c46d; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 1.2;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
会社概要
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.overview{ width: 100%; background: var(--bg-pink); padding: 80px; max-width: 1200px; margin: 0 auto 50px;}/*#f9ecee*/
.overview table{ width: 100%; max-width: 1000px; margin: 0 auto;}
.overview dl { display: flex; flex-wrap: wrap;}
.overview dt { width: 20%; border-bottom: 2px solid var(--base-color); padding: 20px 0 20px 10px; color: var(--base-color); line-height: 1.4;}
.overview dd { width: 80%; border-bottom: 1px solid var(--base-color); padding: 20px 0 20px 20px; color: var(--base-color); line-height: 1.4;}

.sign{ text-align: right; font-weight: 600; font-size: 14px;}

.map-area{ max-width: 1200px; width: 100%; margin: 0 auto;}
.map-area iframe{ width: 100%;}



/* ––––––––––––––––––––––––––––––––––––––––––––––––––
商品　ショッピング
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* トップ　item-area*/
.item-area{ width: 90%; margin: 0 auto; padding: 20px 60px; position: relative;}
.en-tit{ font-size: 16px; position: absolute; right: 50%; top: 40px; color: #a7d28d; font-weight: bold; z-index: 6;}
.item-area h2{ margin-bottom: 30px; font-weight: bold; padding-bottom: 15px;}
.item-area h2 span{ display: block; font-size: 16px; margin-top: 10px; font-weight: 600;}
.shopping-area { width: 100%; overflow: hidden; margin-bottom: 50px;}
.shopping-area ul { width: 100%; display: flex; flex-wrap: wrap;}
.shopping-area li { width: 33.33334%; margin-bottom: 50px;}

.shopping-area{ width: 100%; overflow: hidden; margin-bottom: 50px;}
.shopping-area ul{ width: 100%; display: flex; flex-wrap: wrap; float: left;}
.shopping-area li{ width: 25%; margin-bottom: 70px;}
.shopping-area li .proimg{ width: 90%; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; box-shadow: 3px 3px 3px #ccc;}
.shopping-area li .proimg img{ width: 100%; /*border-radius: 6px;*/}
.shopping-area li .pro-data{ width: 90%; margin: 0 auto;}
.shopping-area li .pro-data h2{ color: var(--base-color); font-size: 16px; margin-bottom: 10px; font-weight: bold; border-bottom: 1px solid var(--base-color); position: relative; padding-bottom: 10px; text-align: left;}
.shopping-area li .pro-data h2::before{ content : ''; position: absolute; left: 0; bottom: -3px; width: 5px; height: 5px; background: #560101; border-radius: 50%; display: none;} 
.shopping-area li .pro-data h2::after{ content : ''; position: absolute; right: 0; bottom: -3px; width: 5px; height: 5px; background: #560101; border-radius: 50%; display: none;} 

.shop-list-area{ width: 200px; height: 50px; border-radius: 6px; margin: 0 auto 40px; border: 1px solid #333; padding: 12px 15px 5px;}/*display: flex;  justify-content: space-between;*/ 
.shop-list-area a{ width: 100%; height: 100%; display: block; transition: .6s;}
.shop-list-area a:hover{ opacity: .6;}
.list-icon-img{ width: 25px; height: 25px; float: left;}
.list-icon-img img{ width: 100%;}
.shop-list-area a > p{ font-weight: 600; float: right;}

.tax{ font-size: 12px;}
.pro-data p{ color: var(--base-color); margin-bottom: 5px; line-height: 1.4;}

.cart-btn{ width: 200px; text-align: center; border: 1px solid var(--base-color); border-radius: 30px; margin: 20px auto 0;  overflow: hidden;}
.cart-btn a{ display: block; color: var(--base-color); width: 100%; height: 100%; padding: 10px; transition: .6s;}
.cart-btn a:hover{ background: #fff;}

.contents-inner{ background: #f2f2f2; padding: 30px 0 50px;}

.cat-banner-area{ width: 100%;}
.cat-banner-area > ul{ display: flex; justify-content: center;}
.cat-banner-area > ul li{ width: calc( 100% - 20px);}
.cat-banner-area > ul li a{ display: block; width: 100%; height: auto; position: relative;}
.cat-banner-area > ul li a img{ width: 100%; height: auto;}
.cat-banner-area > ul li a h2{ position: absolute; bottom: 50px; left: 0; right: 0;}

.cat-banner{ max-width: 600px; margin: 0 auto; width: 100%;}
.cat-banner a{ display: block; width: 100%; height: 100%;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
商品詳細ページ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.datail-area{ width: 100%; display: flex; flex-wrap: wrap;}
.datail-img{ width: 60%;}
.datail-text{ width: 40%; padding-left: 30px;}
.datail-text > h2{ font-size: 24px; color: var(--base-color); padding: 5px 0; margin-bottom: 10px; text-align: left;}
.datail-text > p,
.datail-content > p,
.int-capa > p{ color: var(--base-color);}
.fotorama__caption__wrap { background-color: #fff !important; background-color: rgba(255,255,255,.6) !important; padding: 5px 10px; width: 100%;}
.fotorama__thumb-border { border-color: var(--base-color) !important;}

.cartin_btn button {
  vertical-align: middle;
  border: none;
  color: #FFF;
  background: #b48d30;
  padding: 0 12px;
  font-size: 12px;
  width: 100%;
  max-width: 165px;
  line-height: 30px;
  cursor: pointer;
}
.cartin .quantity {
  padding: 0 10px 0 0;
  width: 150px;
  float: left;
  text-align: right;
  color: #fff;
}

.woo-content-single-product .button {
  width: calc(50% - 8px);
  min-width: auto;
  margin: 0;
}
.button {
  background: #ff8f8f !important;
  color: #fff !important;
}

/*製品のこだわり*/
.product-area{ width: 100%; max-width: 1000px; padding: 0 15px; margin: 0 auto;}
.product-area ul{ display: flex; flex-wrap: wrap; counter-reset: my-counter 0; border-top: 1px solid var(--base-color); border-bottom: 1px solid var(--base-color); padding: 30px;}
.product-area ul li{ width: 100%; line-height: 1.5; counter-increment: pro-counter; font-size: 20px; font-weight: 600; color: var(--base-color);  font-family: 'Zen Maru Gothic', sans-serif; margin-bottom: 15px;}
 .product-area ul li::before {
  content: counter(pro-counter);
  margin-right: 10px;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: var(--bg-pink);
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 30px;
  font-weight: 600;
}



/* ––––––––––––––––––––––––––––––––––––––––––––––––––
FAQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.faq-area{ width: 100%; max-width: 1000px; margin: 0 auto;}
.faq-area dl{ width: 100%; border-bottom: 1px dotted var(--base-color); margin-bottom: 50px; margin-top: 50px;}
.faq-area dt{ width: 100%; font-weight: 600; color: var(--base-color); padding-bottom: 10px; line-height: 1.4; border-bottom: 1px dotted var(--base-color); margin-bottom: 10px;}
.faq-area dd{ width: 100%; font-size: 14px; line-height: 1.8; margin-bottom: 30px;}

.faq-area dt::before {
  content: 'Q';
  display: inline-block;
  margin-right: 20px;
  width: 40px;
  height: 40px;
  background: var(--bg-pink);
  color: var(--base-color);
  font-size: 26px;
  text-align: center;
  border-radius: 50%;
  font-weight: 600;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
お客様の声
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.line-container{ width: 80%; margin: 30px auto;}
.chat-area { height: 80vh; background: #8db4e5; overflow-y: scroll; padding: 30px;}

.talk-area{ width: 100%; max-width: 1000px; margin: 0 auto;}
.talk-q{ width: 100%; margin-bottom: 20px; position: relative;}
.talk-q::before { content: ''; display: inline-block; background: url("images/voice-icon.png") no-repeat; background-size: auto; width: 60px; height: 60px; background-size: 60px; position: absolute; top: -20px; left: 0;}
.talk-a{ width: 100%; margin-bottom: 20px;}
/*.talk-q figura{ width: 60px; height: 60px; margin-right: -50px; float: left;}*/

.says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 80px;
  padding: 10px;
  max-width: 350px;
  border-radius: 12px;
  background: #fff;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: -4px; 
  left: -18px;
  border: 8px solid transparent;
  border-right: 18px solid #fff;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.says p { margin: 0; padding: 0; color: #333; font-size: 14px;}
/* ライン　右側*/
.talk-a{ margin: 10px 0; text-align: right;}

.talk-a p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 350px;
  border-radius: 12px;
  background: #30e852;
  font-size: 14px;
  color: #333;
}

.talk-a p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}


@media only screen and (max-width: 644px){
.talk-area .container { width: 100%; margin: 30px auto; }
}

.page-top{ margin: 0 auto 50px; width: 120px;}
.page-top::before{ content: ''; display: block; width: 18px; height: 18px; margin: 0 auto; border-top: 4px solid #ff8f8f; border-left: 4px solid #ff8f8f; transform: rotate(45deg);}

.page-top a{ font-size: 14px; display: block; text-align: center; color: #ff8f8f; font-weight: 600;}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ボタン
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.btn{ width: 250px; height: 50px; border-radius: 30px; border: 2px solid #ff8f8f; margin: 0 auto; overflow: hidden;}/*background: #83c46d;*/
.btn a{ display: block; width: 100%; height: 100%; text-align: center; padding-top: 16px; font-weight: bold; color: #ff8f8f; transition: .6s; position: relative;}
.btn a:hover{ background-color: #ff8f8f; color: #fff;}
.btn a::after { 
  position: absolute; 
  top: 55%; 
  left: 2em; 
  content: '';
  margin-top: -7px;
  border: 7px solid transparent;
  border-top-width: 7px;
  border-bottom-width: 7px;
  border-left-color: transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #ff8f8f;
  transition: all .6s;
}
.btn a:hover::after { 
  position: absolute; 
  top: 55%; 
  left: 2em; 
  content: '';
  margin-top: -7px;
  border: 7px solid transparent;
  border-top-width: 7px;
  border-bottom-width: 7px;
  border-left-color: transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #fff;
  transition: all .6s;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
トピックス
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news-list ul { border-top: var(--base-color) 1px dotted;}
.news-list ul li { border-bottom: var(--base-color) 1px dotted; padding: 5px 10px;}

.news-list ul li a{ display: block; padding: 10px 20px; font-size: 14px; overflow: hidden; line-height: 30px; color: var(--base-color);}
.news-list ul li a { transition: .6s;}
.news-list ul li a:hover { background: #f9ecee;}
.news-list ul li span { display: block;}
.news-list ul li .date { float: left; width: 130px; margin-left: 30px;}
.news-tit{ width: 100%; padding-left: 180px;}

.news-list ul li .kiji { margin-left: 150px;}

.about-text .btn,
.news-list .btn{ margin: 50px auto;}

.blog-area h2{ line-height: 1.4; text-align: left; margin-bottom: 15px; border-bottom: 3px solid #83c46d; padding-bottom: 5px;}
.blog-area .date{ width: 100%; margin: 10px 0 30px; display: block;}

/*ページネーション*/
.post__pagination{ margin-bottom: 30px; overflow:hidden; display: flex; justify-content: space-between; border-top: 1px dotted #876a4d; border-bottom: 1px dotted #876a4d; padding: 15px 0;}
.post__pagination__left,
.post__pagination__right{ width: 48%;}
.post__pagination__right{ text-align: right;}
.post__pagination__left{ float: left;}
.post__pagination__left > a,
.post__pagination__right > a{ display: block; position: relative;}
.post__pagination__left__text,
.post__pagination__right__text{ color: #876a4d; font-size: 12px;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ページネーション
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pagenation{ margin: 1em 0; clear:both; width: 100%;}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
    margin: 0;
}
.pagenation li{
    float: left;
    margin-left: 3px;
}
.pagenation li:first-child {
    margin-left: 0;
}

.pagenation li.active {
    background-color: #ccc;
    border-radius: 3px;
    color: #FFF;
    padding: 10px 20px;
    border: 1px solid #ccc;
	font-size: 14px;
}

.pagenation li.prev a,
.pagenation li.next a { padding: 10px 20px;}

.pagenation li a {
    border-radius: 3px;
    color: #333;
    display: block;
    padding: 10px 20px;
    border: 1px solid #ccc;
	font-size: 14px;
}

.pagenation li a:hover{
    background-color: #000;
	border: 1px solid #000;
    color: #FFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}

.coupon-wrap{ width: 90%; margin: 50px auto 0;}
.coupon input#coupon_code{ width: 250px !important;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
連絡先
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact-area{ width: 100%;}
.contact-area ul{ display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}
.contact-area li{ width: 50%; position: relative;}
/*.contact-area li:before{ content: ""; position: absolute; width: 1px; height: 24px; top: 50%; left: 0; margin-top:  -12px;}*/
.contact-area li:last-child:after{ content: ""; position: absolute; width: 1px; height: 80px; top: 50%; left: 0; margin-top:  -12px; background: #333;}
/*.contact-area li:last-child{ border-left: 1px solid #ccc;}*/
.contact-area li:last-child .btn{ margin: 0 auto;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
お問合せ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-fome{ max-width: 600px; width: 90%; margin: 80px auto 30px; text-align: center; padding: 30px; border-radius: 10px;}

.detail { display: flex; flex-wrap: wrap; margin: 70px -2% 0;}
.detail .item { width: 46%; margin: 2%; border: 2px solid #ddd; padding: 45px 40px; border-radius: 8px; box-sizing: border-box; text-align: center;}
.detail .item .title { display: flex; align-items: center; margin-bottom: 20px;}
.detail .item .title .num {
  flex-shrink: 0;
  width: 55px;
  height: 55px;
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  background-color: var(--bg-pink);
  color: var(--base-color);
  font-weight: 600;
  border-radius: 50%;
}
.detail .item .title .num span { font-size: 16px;}
.detail .item .title p:not([class]) { font-weight: 700; font-size: 22px; text-align: left;}
.detail-text{ width: 100%; text-align: left;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
お問合せ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul.list{ display: flex; flex-wrap: wrap; margin-top: 20px;}
ul.list li{ width: calc(100% / 3 - 20px); padding: 10px; border-bottom: 1px dotted #333; margin-bottom: 10px; margin-right: 30px;}
ul.list li:nth-child(3n){ margin-right: 0;}
.sec-tit{ width: 100%;}
.sec-tit h2{ text-align: center;}

.cate-tit{ width: 100%; max-width: 1140px; margin: 0 auto 20px;}
.cate-tit h2{ text-align: center; font-weight: 600; font-family: Noto Serif CJK JP; margin-bottom: 50px;}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
フォーム　ここから
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.reserve-table{ max-width: 1000px; width: 100%; clear: both; margin: 0 auto;}
.single-eve-table{ width: 100%; clear: both; margin: 0 auto;}
.reserve-table table,
.single-eve-table table{ width: 100%; overflow: hidden; background: #fff;}
.reserve-table table th,
.single-eve-table table th{ padding:10px; border: 1px solid #ccc; width: 35%; vertical-align: middle;}
.reserve-table table td,
.single-eve-table table td{ text-align: center; padding: 10px; border: 1px solid #ccc;}


.event-table{ width: 100%;}

.tel{ background: url(images/tel-icon2.png) no-repeat 0 0.2em; padding-left: 10px; font-size: 30px;}
.tel > span{ font-size: 16px;}


/* お問合せ*/
.reserve-table table th{ background: none; width: 30%; color: var(--base-color);}
/*input[type="checkbox"],
input[type="radio"] ,*/
textarea{ 
	margin: 0; 
	padding: 0; 
	background: none; 
	border: none; 
	border-radius: 0; 
	outline: none; 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	appearance: none;
}

input[type="text"],
input[type="email"],
textarea{ 
	/*background-color: #f0f3f5;*/
	background: none;
	width: 100%;
	border: 1px solid #999 !important;
    padding: 15px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{ background: #c2edf4;}

.wpcf7-list-item-label{ margin-right: 10px;}
.wpcf7-checkbox{ padding-top: 0; padding-left: 5px;}
.recruit .wpcf7-form-control-wrap{ padding: 0; display: block;}
.wpcf7-form-control-wrap{ padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}

/* チェックボックス*/
/*.f-clear{ float: none !important;}*/
.confirm-box{ width: 300px; padding: 50px 0 !important; margin: 0 auto; text-align: center; float: none !important;}

.label_check_item .wpcf7-exclusive-checkbox{ padding: 0;}

.label_check_item {
	float: left;
	padding: 20px 0;
	text-align: left;
}

.label_check_item .label span {
  display: inline-block;
  padding-top: 0;
}
.label_check_item label input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.label_check_item label input[type="checkbox"] + span::before,
.label_check_item label input[type="checkbox"] + span::after { 
	position: absolute; 
	top: 0; 
	left: 0; 
	display: inline-block; 
	content: ''; 
	box-sizing: border-box;
}
.label_check_item label input[type="checkbox"] + span::before { 
	z-index: 0; 
	background-color: transparent; 
	width: 20px; 
	height: 20px; 
	border: 2px #333 solid; 
	border-radius: 5px;
}
.label_check_item label input[type="checkbox"] + span::after{ z-index: 1; margin: 5px 8px; width: 6px; height: 9px;}
.label_check_item label input[type="checkbox"]:checked + span::before {
  background-color: var(--main-color);
}
.label_check_item label input[type="checkbox"]:checked + span::after {
  border: 2px solid #333;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.basic-form .input {
  width: 100%;
  height: 60px;
  padding: 15px 26px;
  font-size: 14px;
  border: none;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.basic-form .textarea {
  width: 100%;
  padding: 16px 28px;
  font-size: 14px;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

textarea { resize: vertical !important;}

span.wpcf7-list-item { margin: 0 0 10px 0 !important; width: 50%;}
.wpcf7-free-text{ margin-top: 10px;}
/*Radioのみ*/
/*input[type=radio] {display: none;}*/
input[type=radio] {display: inline-block; transform: scale(1.5);}
.label_list_item { float: left; position: relative; padding: 20px 5px; }
.recruit .label_list_item { float: left; position: relative; padding: 20px 5px; width: 150px;}
.wpcf7-checkbox .first,
.wpcf7-radio .first,
.wpcf7-checkbox .last,
.wpcf7-radio .last{ padding-left: 0; position: relative; padding: 5px 0;}

.wpcf7-checkbox .last{ width: 100%;}

/*.wpcf7-radio{ padding-left: 0;}*/
.page-id-121 label span { display: inline; font-size: 14px; padding-left: 0; line-height: 1.3; position: relative;}
label span { display: inline; font-size: 14px; padding-left: 25px; line-height: 1.3; position: relative;}

label input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
label input[type="radio"] + span::before {
  position: absolute;
  display: inline-block;
  content: '';
  box-sizing: border-box;
  border-radius: 20px;
}
label input[type="radio"] + span::before {
  z-index: 0;
  top: 0;
  left: 0;
  background-color: transparent;
  width: 20px;
  height: 20px;
  border: 2px #f35b93 solid;
}
label input[type="radio"]:checked + span::before {
  border-width: 6px;
}

.wpcf7 select{ width: 100%; height: 50px; padding: 15px 26px; font-size: 14px; border: 1px solid #ccc;}

/* 送信ボタン*/

input.sub-btn{ 
	width: 300px;
	height: 60px;
	color:  var(--base-color);
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	background: none;
	border: 3px solid  var(--base-color);
	border-radius: 30px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	-webkit-appearance: none;
}
.btn-cnt input.sub-btn:first-child{ margin-right: 20px; margin-bottom: 20px;}
/* 送信ボタンホバー */
input.sub-btn:hover{ background: var(--bg-pink); color: #333;}

.btn-cnt{ text-align:center;}
.btn-cnt input.sub-btn:first-child{ margin-right: 20px; margin-bottom: 20px;}
/*お問合せ　ここまで*/

.wpcf7-list-item { display: block;}

/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid { background: #ffb6c1; }
.wpcf7 span.wpcf7-not-valid-tip {font-size: 80%;}
.wpcf7 .wpcf7-response-output {margin: 10px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.wpcf7 .wpcf7-validation-errors {color: #b94a48; background-color: #f2dede; border: 1px solid #eed3d7;}
.wpcf7 .wpcf7-mail-sent-ok {color: #3a87ad; background-color: #d9edf7; border: 1px solid #bce8f1;}

.table-contactform7 th{ width: 28%;}
.table-contactform7 th{ font-weight: bold; line-height: 1.5; vertical-align: top;}
.table-contactform7 th span{ float: left; margin-right: 10px; font-size: 14px;}
/*.table-contactform7 input{ padding: 5px 0 5px 5px; float: left; width: 100%;}*/

.table-contactform7 textarea{ width: 100% !important; padding: 10px;}
.address-100 input{ max-width: 100% !important;}
.message-100 textarea{ width: 100%;}

.text-xs-center{ width: 350px; margin: 0 auto;}

.btn-success:hover { color: #fff; background-color: #003f10; border-color: #003f10;}
.form-btn:focus,
.form-btn:hover,
.sub-btn:hover { text-decoration: none; cursor: pointer;}

.small-t{ font-size: 12px !important;}

/* お問合せここまで*/

.recaptcha{ padding: 20px; width: 100%; text-align: center;}
.recaptcha p .fas{ margin-right: 3px;}
.recaptcha p a{ color: blue;}

/* reCAPTCHAバッジを消す */
/*.grecaptcha-badge { visibility: hidden; }*/

/* お問合せここまで*/

.blog-wrapper{ max-width: 1100px; width: 100%; overflow: hidden; margin: 0 auto; display: flex;}
.blog-body{ width: 65%; margin-bottom: 30px;}
.blog-body > h2{ color: #ff8f8f; font-size: 22px; text-align: left; font-weight: 600; margin-bottom: 5px; font-family: 'Zen Maru Gothic', sans-serif; border-bottom: solid 1px #ddd; padding-bottom: 10px;}
.blog-date{ width: 100%; font-size: 14px; background: var(--bg-pink); padding: 10px; margin-bottom: 20px;}
.blog-date time{ color: var(--base-color);}
.blog-body ul{ display: flex; flex-wrap: wrap; width: 100%;}

.icatch-area { width: 100%; clear: both; position: relative; margin-bottom: 30px;}
.i-img { width: 100%; margin: 0 auto; background: #f8f8f9; padding: 20px;}
.i-img img { margin: 0 auto;}

#sidebar{ width: 35%; padding: 0 15px 0 50px;}
#sidebar h2{ font-size: 18px; font-weight: bold; line-height: 1.5; margin-bottom: 15px; padding-bottom: 5px; border-bottom: solid 2px #ddd; position: relative; text-align: left;}
#sidebar li{ width: 100%; margin-bottom: 15px; line-height: 1.6; border-bottom: 1px dotted #ccc; padding-bottom: 10px;}
#sidebar li a{ display: block; width: 100%; height: 100%; color: #333; font-weight: bold; position: relative; padding-left: 25px; transition: 0.5s; font-size: 14px;}
#sidebar li a::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #006699;
  border-right: solid 2px #006699;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sidebar li a:hover{ color: #dc143c;}
#sidebar .banner{ width: 100%; height: auto;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
柔軟コンテンツ用
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.i-catch{ width: 100%; height: auto;}
.i-catch img{ width: 100%; height: auto;}

.blog-body > .post__pagination{ margin-top: 50px !important;}


.flexi-wrap{ width: 100%; clear: both; margin-bottom: 5px; overflow: hidden; padding-bottom: 5px;}
.flexi-nowrap{ width: 100%; clear: both; margin-bottom: 0; overflow: hidden; padding-bottom: 5px;}
/*テキストエリア*/
.flexi-1text{ width: 100%; clear: both; padding: 5px 10px;}
.flexi-1text p{ margin-bottom: 10px;}

.flexi-1text > h2{ font-size: 26px; text-align: left; font-weight: 600; font-family: 'Zen Maru Gothic', sans-serif; margin: 15px 0;}

/*製作事例、環境報告内のみ　h3*/
.flexi-1text > h3{ color: #ff8f8f; font-weight: bold; font-size: 16px; padding-left: 5px; margin-bottom: 10px; line-height: 1.4;}

/*画像+下テキスト　２カラム用*/
.flexi-row{ margin-right: -10px; margin-left: -10px;}/*マージン相殺*/
.flexi-2col{ width: 50%; float: left; padding: 0 10px;}
.flexi-2col img{ width: 100%; margin-bottom: 10px;}

/*画像+横テキスト*/
.flexi-img{ width: 50%; float: left; padding: 0 10px;}
.flexi-img img{ width: 100%; height: auto;}
.flexi-text{ width: 50%; float: left; padding: 0 10px;}

/*画像2枚のみ*/
.flexi-img2{ width: 50%; float: left;}

/*テキストエリア*/
/*.flexi-1text{ width: 100%; clear: both; padding: 5px 10px;}*/

/*ギャラリー*/
.flexi-gall{ width: 100%;}
ul.g-gall{ display: flex; flex-wrap: wrap; width: 100%;}
ul.g-gall li{ width: 33.3333334%; padding: 0 5px; margin-bottom: 10px;}
ul.g-gall li.two-col{ width: 50%; padding: 0 5px; margin-bottom: 10px;}
ul.g-gall li.three-col{ width: 33.3333334%; padding: 0 5px; margin-bottom: 10px;}
ul.g-gall li.four-col{ width: 25%; padding: 0 5px; margin-bottom: 10px;}

ul.g-gall li.two-col img,
ul.g-gall li.three-col img,
ul.g-gall li.four-col img{ width: 100%; height: auto;}

/*　大画像1+下テキスト*/
.flexi-bimg{ width: 100%; margin: 10px auto; background: #f2f2f2;}
.flexi-bimg img{ margin: 0 auto;}
.flexi-bimgtext{ width: 100%; padding: 5px 10px;}

/*　上テキスト+下画像1*/
.flexi-uptext{ width: 100%; padding: 5px 0;}
.flexi-uptext p{ margin: 0 !important;}
.flexi-dwimg{ width: 100%; margin: 5px auto; background: #f2f2f2;}
.flexi-bimg img{ width: 100%; height: auto; margin: 0 auto;}


.flexi-rowtext{ width: 100%; padding: 0 10px; clear: both;}

.flexi-2col p,
.flexi-rowtext p{ padding: 0 5px;}

/*　画像3枚横並び+下テキスト*/
.flexi-3img{ width: 100%; display:flex; flex-wrap: wrap; padding: 0; clear: both; margin-bottom: 10px;}
.flexi-3img img{ width: calc( (100% / 3) - 10px); height: auto; margin-right: 10px;}

.flexi-4img{ width: 100%; padding: 0; display: flex;}
.flexi-4img ul{ display: flex; flex-wrap: wrap; width: 100%; overflow: hidden; margin-bottom: 10px;}

.flexi-4img ul li {
	width: 50%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 0;
    padding-top: 33%;
}

.flexi-4img ul li img {
    width: 100%;
	height: auto;
    transition: all 0.4s ease-out 0.1s;
    -webkit-transition: all 0.4s ease-out 0.1s;
    position: absolute;
    top: 0;
    left: 0;
	padding: 10px 5px;
}

.flexi-dwimg img{ margin: 0 auto; width: 100%; height: auto;}

.col-red{ color: #dc143c !important; font-weight: 600;}
.col-red:hover{ opacity: .6;}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
プライバシーポリシー
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.privacy{ width: 100%; max-width: 1140px; padding: 0 15px; margin: 0 auto;}
.privacy h2{ margin-bottom: 30px; border-bottom: 1px solid #333; padding-bottom: 5px; line-height: 1.4;}
.privacy dt{ font-size: 20px; font-weight: 600; color: #333; background: #f2f2f2; padding: 20px 10px; margin-bottom: 15px; line-height: 1.3;}
.privacy dd{ margin-bottom: 30px; font-size: 16px; color: var(--base-color); line-height: 1.6;}
.privacy dd > p{ color: var(--base-color);}
.privacy h3{ color: var(--base-color); font-size: 16px; margin-bottom: 5px;}

.terms-area{ width: 100%; max-width: 1140px; padding: 0 15px; margin: 0 auto;}
.woocommerce-terms-and-conditions{ background: #fff;}
.terms-area h2{ font-size: 20px; margin-bottom: 20px; border-bottom: none; padding-bottom: 5px; line-height: 1.4;}
.terms-area dt{ font-size: 16px; font-weight: 600; color: var(--base-color); background: none; padding: 10px; margin-bottom: 10px; line-height: 1.3; border-bottom: 1px solid var(--base-color);}
.terms-area dd{ margin-bottom: 30px; font-size: 14px; color: var(--base-color); line-height: 1.6; padding-left: 10px;}
.terms-area p{ color: var(--base-color); font-size: 14px;}
.terms-area h3{ color: var(--base-color); font-size: 16px; margin-bottom: 5px;}
.terms-area dd > ul{ padding-left: 10px;}
.terms-area dd > ul li{ font-size: 14px; line-height: 1.4; margin-bottom: 15px; color: var(--base-color);}
.terms-area dd > ul li > ul{ padding-left: 20px; margin-top: 15px;}
.terms-area dd li{ font-size: 14px;}
p.last-text{ text-align: right; font-size: 14px; font-weight: 600;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
フッター
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{ width:100%; /*padding: 40px 0 0;*/ background: var(--bg-pink); position: relative;}

.footer-inner{ display: flex; width: 90%; padding: 40px 15px; margin:0 auto;}
.footer-inner > .logo-area { max-width: 100%; padding-left: 30px; width: 30%;}

.guide{ width: 70%;}
.guide > ul{ display: flex; justify-content: space-between;}
.guide > ul li{ width: 48%;}
.guide > ul li h3{ font-weight: 600; color: var(--base-color); margin-bottom: 10px; border-bottom: 1px dotted var(--base-color); padding-bottom: 5px;}
/* コピーライト　*/
#copyright {
  /*position: absolute;
  bottom: 0;*/
  background: #ff8f8f;
  padding: 15px 5px;
  color: #fff;
  text-align: center;
  width: 100%;
  font-size: 12px;
}


/* ------------------------------------------------------------------------------------------------------------------------

/* 1253px以下

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1253px){

.item-area { width: 90%; margin: 0 auto; padding: 20px 0;}



}


/* ------------------------------------------------------------------------------------------------------------------------

/* 1180px以下

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1179px){

nav.globalMenuSp { position: fixed; z-index : 900; top  : 0; right : 0; background: rgba(0,0,0,.6); text-align: center; transform: translateX(100%); transition: all 0.6s; width: 60%; height: 100vh; padding-top: 80px;}

.login-nav{ display: none !important;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ナビゲーション（スマホ）
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hamburger { display : block; position: fixed; z-index : 999; right : 13px; top : 12px; width : 42px; height: 42px; cursor: pointer; text-align: center; background: rgba( 255,255,255,.6); }
.hamburger span { display : block; position: absolute; width : 30px; height : 2px;  left : 6px; background : #555; -webkit-transition: 0.3s ease-in-out; -moz-transition   : 0.3s ease-in-out; transition : 0.3s ease-in-out;}
.hamburger span:nth-child(1) { top : 10px; }
.hamburger span:nth-child(2) { top : 20px;}
.hamburger span:nth-child(3) { top : 30px;}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) { 
  top : 20px;
  left : 6px;
  -webkit-transform : rotate(-45deg);
  -moz-transform : rotate(-45deg);
  transform : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) { top : 20px; -webkit-transform: rotate(45deg); -moz-transform : rotate(45deg); transform : rotate(45deg);}

nav.globalMenuSp { 
	display: block;
	position : fixed;
	z-index: 990;
	top: 0;
	right: 0;
	background: var(--base-color);
	text-align: center;
	transform: translateX(100%);
	transition: all 0.6s;
	width: 50%;
	height: 100vh;
	padding-top: 10px;
	padding-bottom: 50px;
	overflow-y: scroll;
}

nav.globalMenuSp ul { padding: 0; width: 100%; display: flex; flex-wrap: wrap; margin-top: 50px;}

nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; border-bottom: 1px solid #fff;}
nav.globalMenuSp ul li a{ width: 100%; display: block; height: auto;}
nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none;}
nav.globalMenuSp ul li:hover{ background :#ddd;}

nav.globalMenuSp ul li a{ display: flex; color: #fff; padding: 15px 5px 15px 25px; text-align: left; align-items: center;}
nav.globalMenuSp ul li a figure{ width: 40px; height: 40px; margin-right: 20px; overflow: hidden; border-radius: 50%;}
nav.globalMenuSp ul li a figure img{ width: 100%; height: 100%; object-fit: cover;}

/*ログインナビ*/
.login-nav-sp{ width: 400px; padding: 10px; display: flex; justify-content: normal;}



/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active { transform: translateX(0%);}

.wrapper{ max-width: 1140px; width: 100%; padding: 0 20px;}

.pc{ display: none;}
	
.fat-nav__wrapper{ width: 100%; height: 100%; display:block; table-layout: fixed; margin: 0 auto;}
header{ width:100%;}
nav li a { display: none;}
nav li::after{ display: none;}

.item-area { width: 90%; margin: 0 auto; padding: 20px 0; position: relative;}

.map-area{ max-width: 90%; width: 100%; margin: 0 auto;}
.faq-area { max-width: 90%; margin: 0 auto; padding: 0 20px;}

/*フッター*/
.footer-inner{ width: 100%; display: flex; flex-wrap: wrap; padding: 40px 15px; margin: 0 auto;justify-content: center; padding-bottom: 30px;}


}
/* ------------------------------------------------------------------------------------------------------------------------

/* 960px以下

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1110px){
nav{ display: none;}
.globalMenuSp{ display: block;}
.cat-banner {
  width: 100%;
  margin: 0 auto;
  max-width: 600px;
  padding: 0 30px;
}
/*フッター*/
.footer-inner{ width: 100%; display: flex; flex-wrap: wrap; padding: 40px 15px; margin: 0 auto;justify-content: center; padding-bottom: 30px;}
.guide{ width: 100%;}

.footer-inner > .logo-area { padding-left: 0; width: 350px; margin: 30px auto;}



}

@media only screen and (max-width: 959px){
	
header{ width:100%;}
.logo-area { width: 100%; float: none; overflow: hidden;}
nav{ display: none;}
/*nav { width: 100%; float: none; padding-top: 5px;}
nav ul { display: flex; justify-content: center;}*/
nav li a { /*width: 100%; height: 100%;*/ padding: 15px; text-align: center;}
.footer-inner{ max-width: 1140px; width: 100%; padding: 50px 15px; margin: 0 auto;}
.has-padding { padding: 60px 0;}

.topimg{ width: 100%;  max-height: 400px; height: 100%;}
.topimg h1{ font-size: 18px;}
.topimg p { position: absolute; left: 50%; top: 40%; font-size: 36px;}

.banner { width: 100%; max-width: 600px; height: auto; margin: 50px auto 0; overflow: hidden;}
.map-area{ max-width: 900px; width: 100%; margin: 0 auto;}
.map-area iframe{ width: 100%;}

/*ブログ*/
.news-list ul li .date { float: none; width: 130px; margin-left: 0;}
.news-tit { width: 100%; padding-left: 0;}
.wp-block-gallery{ display: flex; flex-wrap: wrap;}
.wp-block-image{ margin-bottom: 15px;}

.blog-wrapper{ max-width: 90%; margin: 0 auto;}
.blog-body{ width: 100%; margin: 0 auto; float: none;}
#sidebar { width: 100%; float: none; padding: 20px;  margin: 0 auto; background: var(--bg-pink);}



}



/* ------------------------------------------------------------------------------------------------------------------------

/* 幅644px以下

------------------------------------------------------------------------------------------------------------------------ */

@media only screen and (max-width: 644px){
.hamburger{ display:block;}

nav{ display: none;}
.woocommerce nav{ display: block;}

.globalMenuSp{ display: block;}
header{ width: 100%; height: auto; margin-bottom: 0; overflow: hidden;}

.logo-area{ width: 100%; max-width: 300px; float: none; margin: 0 0 10px 0; padding-left: 20px;}
.logo-area figure{ width: 80px;}
.logo-area figure img{ width: 100%; height: auto;}

/*スマホナビ*/
nav.globalMenuSp{ width: 80%;}
nav.globalMenuSp ul li a{ display: flex; color: #fff; padding: 15px 15px 15px 20px; text-decoration: none; text-align: left;}
nav.globalMenuSp ul li ul li a{ padding-left: 50px; display: block; width: 100%; height: auto;}
/*スマホナビここまで*/

.topimg{ width: 100%; max-height: 400px; height: 100%;}
.topimg h1{ font-size: 24px;  width: 80%; text-align: center; top: 40%;}
.topimg p { position: absolute; left: 50%; top: 50%; font-size: 24px; width: 90%; text-align: center;}

.has-padding { padding: 60px 0;}

.sub-top { max-height: 150px;}
.sub-top h1 { font-size : 18px; }
.sub-top p { font-size : 16px; }

.wrapper { width: auto; margin: 0 auto; padding: 0 20px;}

.has-padding { padding: 40px 0;}
.has-padding-up, .has-padding-low { padding: 40px 0;}

/*article,
section{ width: 90%; clear:both; overflow:hidden; min-height: 500px; margin: auto;}*/

h2 { font-size: 24px; font-weight: 700;}
.en-tit { padding: 10px 1.5em 0;}

.greeting figure { width: 100%; float: none; margin-bottom: 20px;}
.about-text,
.text { width: 100%; float: none; padding-left: 0;}

.activity-list ul { display: flex; flex-wrap: wrap;}
.activity-list li { width: 100%;}
.banner { width: 100%; height: auto; margin: 20px auto 0;}

.about-area figure,
.activity-list li figure,
.initiatives-list ul li figure { width: 100%; height: 220px; overflow: hidden; margin-bottom: 15px;}
.initiatives-list ul li{ width: 100%; margin-bottom: 30px;}
.initiatives-list li h3 { font-size: 18px; padding-left: 40px; padding-top: 5px;}
.initiatives-list li h3::before { font-size: 24px; width: 30px; height: 30px;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
共通
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pro-data p{ font-size: 14px;}
.content-heading h2 { font-size: 24px;}
.shopping-area{ margin-bottom: 0;}

.about-inner-text{ top: 0; bottom: 0; padding: 20px; width: 70%; left: 30%;}
  
.right-img { position: absolute; right: 10px; top: -40px; width: 100px;}
.item-area{ padding: 10px;}
.shopping-area li { width: 50%; margin-bottom: 40px;}
.cart-btn { width: 150px;}

/*ショップページ*/
.about-inner-img { width: 100%; height: auto; border-radius: 10px; overflow: hidden;}
.about-inner-text{ position: static; width: 100%; border-radius: 0; box-shadow: none; margin-bottom: 0; padding: 20px 0;}
.about-inner-text > p{ font-size: 14px;}
.overview{ padding: 20px;}
.overview dt { width: 100%; font-weight: 600; font-size: 16px; padding: 20px 0 10px 10px;}
.overview dd { width: 100%; padding: 10px 0 10px 10px; font-size: 14px; border: none;}

.greeting-area figure { width: 100%; margin-bottom: 15px;}
.greeting-text { width: 100%; padding-left: 0;}

/*map*/
.map-area{ max-width: 90%; width: 100%; margin: 0 auto;}
.map-area iframe{ width: 100%;}

.faq-area { max-width: 90%; margin: 0 auto; padding: 0 20px;}
.blog-wrapper { max-width: 90%; flex-wrap: wrap;}

.reserve-table table th,
.reserve-table table td{ display: block; width: 100%; border: none;}
.reserve-table table th{ border-bottom: 1px dotted var(--base-color); text-align: left;}

/*お客様の声*/
.chat-area { padding: 30px 20px;}
.line-container{ width: 90%;}
.talk-q::before{ width: 50px; height: 50px; background-size: 50px; top: -20px; left: -10px;}
.says{ margin: 0 0 0 60px;}

.coupon-wrap{ width: 100%; margin: 50px auto 0;}
.coupon{ display: flex; flex-wrap: wrap;}
.coupon input#coupon_code{ width: 100% !important; margin-bottom: 10px; height: 40px;}
.coupon .button{ width: 100% !important; margin-top: 10px; margin-bottom: 10px;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ニュース
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news-list ul li{ border-bottom: #ccc 1px solid; padding: 5px 0;}
.news-list ul li a { padding: 0; line-height: 2;}
.news-list ul li .date { float: none; width: 100%; margin-left: 0; text-decoration: none;}
.news-list ul li .kiji { margin-left: 0;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
柔軟コンテンツ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*画像+横テキスト*/
.blog-body { width: 100%; float: none;}
.flexi-img{ width: 100%; float: none; margin-bottom: 10px;}
.flexi-text{ width: 100%; float: none; padding: 0 10px;}
.video-flex{ display: flex; flex-wrap: wrap;}

.main-box{ width: 100%; padding: 20px 10px;}

.content span{ display: block;}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
フッター
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{ width: 100%; padding: 20px 0 0; text-align: center; position: relative;}
.footer-inner{ display: flex; flex-wrap: wrap; margin-bottom: 0; justify-content: center; padding-bottom: 30px;}

.footer-inner .logo-area{ max-width: 320px; width: 100%; float: none; margin: 0 auto; padding-left: 0;}
.logo-area .logo-wrapper{ display: flex; margin-bottom: 10px;}
.footer-inner .logo-area figure{ float: left; width: 80px;}
.footer-inner .logo-area img{ width: 100%; height: auto;}
.footer-inner .logo-text{ width: calc( 100% - 80px); float: left; padding-left: 10px; text-align: left;}

.footer-inner .logo-text span{ font-size: 14px;}
.footer-inner .logo-text p{ font-size: 24px; margin-bottom: 0; /*line-height: inherit;*/ line-height: 1.3;}
.footer-inner .guide{ width: 100%;}
.footer-inner .guide > ul{ flex-wrap: wrap;}
.footer-inner .guide > ul li{ width: 100%; text-align: left; margin-bottom: 15px;}

.add { margin-left: 0; width: 100%; border-top: 1px dotted var(--base-color); border-bottom: 1px dotted var(--base-color); padding: 15px 0 0; overflow: hidden;}





}