@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*ナビのところに線を出す*/
#navi .navi-in a:after{position: absolute;/*線の位置を絶対配置に*/content: "";/*文字はなし*/left: 0px;/*線の位置*/bottom: 1px;/*線の位置*/height: 1px;/*線の高さ*/width: 100%;/*幅いっぱいに線を引く*/background: #4EA4D9;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/transition: 0.3s;/*線が0→100%になるまでの秒数*/}
#navi .navi-in a:hover:after{transform: scale(1);/*マウスオーバー後、線を100%出す*/}
.navi-in a { color: #333; font-size: 14px;font-weight:600;}

/*ブログカードを横並びに*/
.new-entry-cards.large-thumb {display: flex;flex-wrap: wrap;}
.new-entry-cards.large-thumb a {width: 33.333%;}
.widget-entry-card-snippet {margin-top: 6px;font-size: 14px;opacity: 0.8;}
.widget-entry-card {margin: 15px 5px;}
.card-title-bold .card-title {font-size: 20px;}

/*ユーティリティ*/

.sidebar{margin-top:200px;}
.eye-catch-wrap {margin-top: 55px;}
.ect-3-columns {margin-top: 50px;}
.date-tags{display:none;}
.entry-content {margin-top: 1em;margin-bottom: 3em;}
.item-label{font-weight:500;}
.shadow {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.google-cal iframe {width:100%;max-width:1200px;height:800px;}
.a-wrap:hover {background-color:#fffaf0;transform: scale(1.01);box-shadow: 2px 2px 6px 0 #f6f6f6;　transform: translateY(-2px);}
/*footer{margin-left: calc(-50vw + 50%);margin-right: calc(-50vw + 50%);}*/
.mincho{font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;}
.fs-w{ font-size:clamp(1.5rem, 2vw + 1rem, 2.25rem);font-weight:700;}
.m-vw{margin-top:7.2vw;}
}#sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio, #sb_instagram .sb_instagram_header .sbi_header_text h3, .sb_instagram_header .sbi_header_text .sbi_bio, .sb_instagram_header .sbi_header_text h3 {
    float: left;
    clear: both;
    width: auto;
    margin: 0 0 0 60px!important;
    padding: 14px!important;
}
/*ヘッダー背景透明化*/
#header-container {background-color: transparent;}

/*ナビゲーションメニュー背景透明化*/
#header-container .navi {background-color: transparent;}
#main {background-color: transparent;}

/*見出し装飾*/
.article h1{position: relative;
	border-bottom: 5px solid #ddd;
	font-size: clamp(1.5rem, 2vw + 1rem, 2.625rem);
    font-weight: 800;
	color: #000;
	padding:20px 30px;}

.article h1:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #27acd9;
	}

.article h2 {
  position: relative;
  color:#8C5C03;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #E8D612;
	border-radius: 10px;border:none;
}

.article h2:before {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 100%;
    height: 100%;
    content: '';
	border: 2px solid #8C5C03;border-radius: 10px;
}

.article h3 {
  position: relative;
  color:#8C5C03;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #E8D612;border-radius: 10px;border:none;
}

.article h3:before {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 100%;
    height: 100%;
    content: '';
	border: 2px solid #8C5C03;border-radius: 10px;
}


.box {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  position: relative;
}
.box .image {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.66667%;
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}
.box .image {
  position: relative;
  z-index: 1;
}
.box .image .inner {
  position: relative;
}
.box .text23 .inner {
  padding: 4em 15%;
  margin-top: 3em;
}
.box .text23 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 63.33333%;
  flex: 0 0 63.33333%;
  max-width: 63.33333%;
  margin-left: -5%;
}
.box .text23 {
  text-shadow: .1em .1em 0 #fff,.2em .2em 0 #fff;
}
.bg-color-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ababab' fill-opacity='0.75' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); }
.block-title {
  font-size: 100%;
  font-weight: 400;
}
.mB30em {
  margin-bottom: 3em !important;
}
.mT70em {
  margin-top: 7em !important;
}
.level3 {
  font-size: 130% !important;
  line-height: 1.6;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1920px!important;}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%;
  padding-right:0px!important;
  padding-left:0px !important;
  margin-right: auto;
  margin-left: auto;
}
/* ---------------------------------------------------------------------
  マウスホバーエフェクト サイドバー
--------------------------------------------------------------------- */
.sidebar h3 {background-color: #E3F9FC;padding: 12px 0 12px 40px;margin: 16px 0;border-radius: 2px;font-size: 1.2rem;}
.cat-label {color: #fff !important; border-radius: 5px;}/*カテゴリ表記の色*/
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {padding: 5px 0;padding-right: 9px;padding-left: 20px;transition: all 1s;font-size:14px;}
.widget_recent_entries ul li a:hover{transform: translate(20px,0px);background-color: #fcfcfc;}
.widget_categories ul li a:hover{transform: translate(20px,0px);}
.widget_recent_entries ul li a::after { position: absolute; content: ""; display: block; width: 10px; height: 10px; background-color: #b7cf72; border-radius: 50%; top: 10px; left: -20px; opacity: 0; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}
.widget_recent_entries ul li a:hover::after { opacity: 1;}
.widget_categories ul li a::after{ position: absolute; content: ""; display: block; width: 10px; height: 10px; background-color: #b7cf72; border-radius: 50%; top: 10px; left: -20px; opacity: 0; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}
.widget_categories ul li a:hover::after{ opacity: 1;}
.img_wrap{
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/* ---------------------------------------------------------------------
  WEB予約右下ボタンエフェクト
--------------------------------------------------------------------- */
.pulse-btn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
	width:80px;
	height:80px;
  border-radius: 50%;
  background-color: #1da1f2;
  box-shadow: 0 0 20px #1da1f2;
  cursor: pointer;
	right:30px;
	bottom:80px;
}
.pulse-btn img {width: 100%;}
.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #1da1f2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}
.pulse-btn::after {animation-delay: 1s;}
@keyframes pulsate {
  0% {transform: scale(1);opacity: 1;}
  100% {transform: scale(2);opacity: 0;}
}

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

/*834px以下*/
@media screen and (max-width: 834px){
.new-entry-cards.large-thumb a {width: 50%;}
.pulse-btn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
	width:70px;
	height:70px;
  border-radius: 50%;
  background-color: #1da1f2;
  box-shadow: 0 0 20px #1da1f2;
  cursor: pointer;
	right:25px;
	top:70px;
}
.pulse-btn img {width: 100%;}
.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #1da1f2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}
.pulse-btn::after {animation-delay: 1s;}
@keyframes pulsate {
  0% {transform: scale(1);opacity: 1;}
  100% {transform: scale(2);opacity: 0;}
}

}

/*480px以下*/
@media screen and (max-width: 480px){
 .new-entry-cards.large-thumb a {width: 100%;}
.logo {text-align: left;}
}