@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #def2ef;
	color: #977975;
	height: 60px;
}

.logo-menu-button.menu-button{
	background-image: url(https://www.megumino-s.com/wp-content/uploads/2025/01/header_bg_sp.jpg);
	background-repeat: repeat-x; /*水平方向繰り返し*/
    background-size: auto;
	height: 60px;
}

.mobile-menu-buttons{
	background: #def2ef;
}

[class*=bc-brand-color] .instagram-button {
--cocoon-sns-color: #E1306C;
}
/* H1 H2 H3 設定 */
.article-header h1{
	background-image:url(https://www.megumino-s.com/wp-content/uploads/2025/01/h1_bg.png);
	padding:10px 5px 10px 20px;
	border-bottom: 1px dashed #977975;
}
.article h2{
	background-image:url(https://www.megumino-s.com/wp-content/uploads/2025/01/maru.png);
	background-repeat:no-repeat;
	background-position:center center;
	text-align:center;
	margin-bottom: 0;
	line-height:140px;
	background-color: #ffffff00;
	color:#94c0b9;
}
.archive-header h1{
	background-image:url(https://www.megumino-s.com/wp-content/uploads/2025/01/h1_bg.png);
	padding:10px 5px 10px 20px;
	border-bottom: 1px dashed #977975;
}

#shop_single h3{
	color: #fff;
	background-color:#88c2b9;
	padding: 10px;
	margin: 10px 0;
	font-family: "Yusei Magic", serif;
	font-weight: normal;
	text-align: center;
}
.page_coupon_info{
	background-color: #eeece9;
	width: ;
	padding: 10px 20px;
}
.gosyousai{
	display: block;
	width: 144px; /* 画像の幅に合わせるか、固定値を設定 */
	margin: auto 0 0 auto;
}
/************************************
** 店舗シングルページギャラリー用
************************************/

.gallery .images {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  height: 0
}

.gallery .images>div, .gallery .images>span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%
}

.gallery .images>div {
  opacity: 0;
  background: center no-repeat;
  background-size: cover;
  border-radius: 3px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .4);
  -webkit-transition: all .88s ease;
  transition: all .88s ease
}

.gallery .images>div.active {
  opacity: 1
}

.gallery .images>span {
  cursor: pointer;
  width: 50px;
  color: #fff;
  text-shadow: 0 0 5px #000;
  font-size: 50px;
  height: 100%;
  line-height: 44px
}

.gallery .images>span.right {
  left: 100%;
  margin-left: -38px
}

.gallery .images>span.left {
  padding-left: 10px
}

.gallery .images>span:before {
  margin-top: -25px;
  top: 50%;
  position: absolute;
  bottom: 0
}

.gallery .images>span.left:before {
  content: "\00AB"
}

.gallery .images>span.right:before {
  content: "\00BB"
}

.gallery .thumbs {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  text-align: center;
  cursor: pointer
}

.gallery .thumbs>div {
  box-sizing: border-box;
  background: center no-repeat;
  background-size: cover;
  display: inline-block;
  position: relative;
  margin: 4px;
  border: 3px solid transparent;
  width: 100px;
  height: 100px;
  cursor: pointer;
  -webkit-transition: all .88s ease;
  transition: all .88s ease
}

@media (max-width:768px) {
  .gallery .thumbs>div {
    width: 65px;
    height: 65px
  }
}

.gallery .thumbs>div:before {
  content: '';
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 0 5px 5px;
  position: absolute;
  left: 45px;
  top: -8px;
  -webkit-transition: all .88s ease;
  transition: all .88s ease
}

@media (max-width:768px) {
  .gallery .thumbs>div:before {
    left: 25px
  }
}

.gallery .thumbs>div.active {
  border-color: silver
}

.gallery .thumbs>div.active:before {
  border-bottom-color: silver
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}