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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*フォント指定、文字間詰め*/
body {
font-family: 'Kosugi Maru', sans-serif;
font-feature-settings: "palt" 1;
}

/************************************************
ヘッダーレイアウト
************************************************/

/*キャッチコピー、連絡先エリア*/
.ow01-shop-info {
width:100%;
background:#fff;
}
@media screen and (min-width: 1024px){
.ow01-shop-info {
position: sticky;
z-index: 999;
top: 0;
}
}
@media screen and (max-width: 1023px){
.ow01-shop-info {
margin: 74px 0 0 0;
}
}

.ow01-shop-info-in {
max-width: 1256px;
margin: 0 auto;
font-size: 0.8em;
text-align: center;
padding:0 0.5em;
}
.ow01-shop-info-in span {
font-weight: bold;
font-size: 1.5em;
}
@media screen and (min-width: 1024px){
.ow01-shop-info-in {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.ow01-shop-info-in br {
display:none;
}
.ow01-shop-info-in a {
text-decoration:none;
color:#000;
}
}

@media screen and (max-width: 1023px){
/*キャッチコピーをページトップに固定*/
.ow01-shop-info-copy {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: #fff;
width: 100%;
}
/*連絡先エリア制御*/
.ow01-shop-info-in {
background: #eee;
}
/*電話番号をボタン表示*/
.ow01-shop-info-in a {
background: gold;
color: #000;
text-decoration: none;
border-radius: 8px;
line-height: 1.8em;
box-shadow: 0 3px 3px 0 rgb(100 100 100 / 30%);
display: block;
height: 30px;
line-height: 30px;
width: 80%;
margin: 0 auto;
}
}

/*ヘッダーロゴ、ナビエリアpcは固定*/
#header-container {
position: sticky;
top: 30px; /*店舗情報エリア分下げる、本来は38pxだけど、隙間回避のために30で設定*/
width: 100%;
z-index: 999;
box-shadow: 0 2px 3px 0 rgb(100 100 100 / 30%);
}
/*1023px以下で非表示*/
@media screen and (max-width: 1023px){
#header-container{
display:none;
}
}

/*ヘッダーエリアの高さ調整*/
.navi-in>ul li {
height: 45px;
line-height: 45px;
}

/*ロゴとグローバルナビの余白*/
.header-container-in {
padding: 6px 1em;
}

/*ヘッダーロゴの大きさ調整*/
.header-container-in.hlt-top-menu .logo-header img {
/*max-height: 45px;*/
}

/*ヘッダーロゴ横の店舗名
.header-container span.site-name-text:after {
content: "ベリー那覇店";
position: relative;
top: 0.8em;
right: 1.8em;
font-size: 14px;
font-weight: bold;
}
*/
/*スマホ用店舗名
li.logo-menu-button.menu-button:after {
content: "ベリー那覇店";
position: relative;
top: .55em;
right: 1.4em;
font-size: 12px;
font-weight: bold;
}
*/

/*pcグローバルナビを太字*/
.menu-header {
font-weight:bold;
}

/*pcグローバルナビの左右感覚調整*/
#navi .navi-in>ul>li>a {
padding: 0 1em;
}

/*pcグローバルナビ色付きボタン（アイテム番号は状況に合わせて変更する）*/
#menu-item-122 {
background: #ffd700;
border-radius: 4px;
box-shadow: 0 2px 3px 0 rgb(100 100 100 / 30%);
}

#menu-item-12 .item-label {
color: #333;
}

/*pcグローバルナビ用インスタボタン*/
#menu-item-812 i {
color: #fff;
padding: 6px;
border-radius: 20px;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}

/*pc用ヘッダーナビ下向き矢印*/
/*矢印の大きさ*/
.navi-in .has-icon {
font-size: 20px;
right: 0
}
/*矢印の形状変更*/
.fa-angle-down:before {
content: "\f0d7" !important;
}
/*ヘッダーナビサブメニューのシャドウ*/
.navi-in>ul .sub-menu {
border-radius: 4px;
box-shadow: 0 2px 3px 0 rgb(100 100 100 / 30%);
}

/*モバイルヘッダー*/
/*スマホ用ヘッダー：キャッチコピー分下げ*/
@media screen and (max-width: 1023px){
.mobile-header-menu-buttons {
top: 20px;
}
}
/*モバイルロゴ大きさ制御*/
.logo-menu-button img {
max-height: 40px;
}
/*メニューボタンを中央配置*/
.menu-button {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
/*モバイルロゴ位置制御*/
.logo-menu-button {
justify-content: flex-start !important;
padding:0 0.5em;
}
/*モバイルメニュー閉じるボタン位置調整*/
.menu-close-button {
margin-top: 23px;
}
/*モバイルメニュー背景*/
.navi-menu-content {
background: #91cfd4;
opacity: 0.9 !important;
font-weight: bold;
}
/*モバイルメニューリストの装飾*/
.menu-drawer {
padding: 0 !important;
border-bottom: 1px solid #fff;
margin-bottom: 2em;
}
.menu-drawer a {
border-top: solid 1px #fff;
padding: 12px 6px;
}
ul.sub-menu {
margin: 0;
}

/************************************************
投稿設定
************************************************/

.content {
margin-top: 0;
}

.main {
padding-top: 0;
border: 0;
}
@media screen and (max-width: 834px){
.main,.sidebar {
padding: 0 0.5em 16px !important;
}
}

.entry-content {
margin-top: 0;
}

@media screen and (max-width: 480px){
.entry-title {
padding: 0 !important;
}
}

/*トップページ*/
/*記事タイトル非表示*/
.home .article-header {
display: none;
}
.page .date-tags {
display: none;
}

/*固定ページタイトル*/
.page .entry-header {
margin: 0 0 2em 0;
}

/************************************************
各種部品の設定
************************************************/

/*見出し*/
/*
.article h2 {
padding: 0.6em;
border-radius: 4px;
}

.article h2 {
position: relative;
font-size: 36px;
text-align: center;
margin-bottom: 36px!important;
padding: 10px!important;
line-height: 150%;
padding: 25px;
border-radius: 2px;
background:none;
}

.article h2:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 25%;
height: 8px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

@media screen and (max-width: 480px){
.article h2 {
font-size: 28px;
margin: 28px 0!important;
}
}

.article h3 {
text-align: center;
border:none;
font-size: 32px;
margin-bottom: 32px!important;
padding: 0!important;
line-height: 150%;
}

.article h3:before {
font-family: "Font Awesome 5 Free";
content: "\f578";
color: #e4007f;
margin-right: 10px;
font-size: 32px;
}

@media screen and (max-width: 480px){
.article h3 {
font-size: 24px;
margin: 24px 0!important;
}
}
*/

/*tableスマホ用の文字大きさ*/
@media screen and (max-width: 834px) {
table th, table td {
font-size: 1em;
}
}

/*トップページ正方形バナーレイアウト*/
.s43-bnr-group .wp-block-group__inner-container {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.s43-bnr-group .wp-block-image {
padding: 5px;
margin: 0;
width: calc(100% / 4);
line-height: 0;
height: auto;
}

@media screen and (max-width: 834px){
.s43-bnr-group .wp-block-image {
padding: 3px;
width: calc(100% / 2);
}
}

/*横幅いっぱい画像*/
.ow01-img-wide {
margin: 0 calc((100% - 100vw)/2)!important;
/*width: 100vw;*/
height: auto;
text-align:center;
}

.ow01-img-wide img {
/*max-width: 2000px !important;*/
width: 100% !important;
height: 480px;
/*height: 100vh;*/
object-fit: cover;
}

/*834px以下*/
@media screen and (max-width: 834px){
.ow01-img-wide img {
min-width: 100% !important;
width: 100vw !important;
max-height: 100%;
height: 70vw;
object-fit: cover;
}
}

/*背景横幅いっぱい*/
.ow01-back-wide {
margin: 0 calc((100% - 100vw) / 2)!important;
padding: 2em 10px !important;
width: auto !important;
}

.ow01-back-wide > p,
.ow01-back-wide > div,
.ow01-back-wide > h2,
.ow01-back-wide > h3 {
margin-left: auto;
margin-right: auto;
max-width: 1142px;
}

/*youtube埋め込み用*/
.s43-youtube {
position: relative;
/*height: 0;*/
/*padding: 30px 0 56.25%;*/
overflow: hidden;
}

.s43-youtube .video-container {
max-width:100%;
}

.video-container .video {
margin-top: 0;
}

.video-container, .instagram-container, .facebook-container {
margin: 0; 
}

.s43-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*ページ上部全ページ表示お知らせエリア設定*/
.content-top {
margin: 0;
}

.widget-content-top,
.widget_custom_html {
margin: 0!important;
}

.content-top .common-icon-box {
margin: 0;
}

.s43-page-top-news:empty {
padding: 0;
}

.s43-page-top-news {
padding: 0.5em;
}

/*新着情報ラージバナー設定*/
.ow01-entry-card-flex-42 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*バナーの横幅*/
.ow01-entry-card-flex-42.widget-entry-cards.card-large-image .a-wrap {
width: calc(99% / 4);
}
@media screen and (max-width: 834px){
.ow01-entry-card-flex-42.widget-entry-cards.card-large-image .a-wrap {
width: calc(99% / 2);
}
}
/*バナー内テキスト表示*/
.widget-entry-cards.large-thumb-on .card-content {
max-height: 80%;
}
@media screen and (max-width: 480px){
.ow01-entry-card-flex-42 .new-entry-card-content {
font-size: 0.7em;
}
}

.ow01-sns-button i {
margin-right: 0.3em;
}

.s43-menu-gaiyo .wp-block-columns {
border-bottom: solid 1px #ccc;
padding-bottom: 2em;
}

.badge, .ref, .reffer, .sankou, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey {
font-size: 16px;
padding:3px 5px;
line-height: 2em;
}

@media screen and (max-width: 480px){
.wp-block-media-text .wp-block-media-text__content {
padding: 1em 0 0!important;
}
}

/* 予約ボタンフローティング */
.s43-yoyaku-float {
position: fixed;
z-index: 999;
bottom: 0;
border-radius: 4px;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .5);
}

/* タイトル上フローティング */
#custom_html-3 {
position: sticky;
z-index: 999;
top: 5em;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .5);
}

/* cat県民not found非表示 */
.category-5 .posts-not-found {
display: none;
}

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

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

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

/*Bogo横並び*/
.bogo-language-switcher{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	font-size: small;
}
.bogo-language-switcher li+li{
	margin-left:10px;

}