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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 背景透過 */
.header-container, .main, .sidebar, .footer {
background-color: transparent;}
#header-in{display:none;}
/* top main none */

.page-id-2 .content {display: none;}
/* 日付非表示 */
.date-tags{display:none;}
/* モバイルヘッダーボタン */
.mobile-header-menu-buttons {display: flex;bottom: auto;top: 0;}
.header-container-in.hlt-top-menu,#navi-in{display:none;}
.mobile-header-menu-buttons {box-shadow:none;background-color:transparent;position:top;z-index:1;}
.menu-content, .search-edit, input[type="text"] {background-color:transparent;}
.mobile-menu-buttons .menu-button > a {display:none;}
/*ハンバーガーメニューの文字を消す*/
span.navi-menu-caption.menu-caption {display: none;}
span.navi-menu-icon {font-size: 1.6em;}
span.search-menu-icon.menu-icon {font-size: 1.2em;padding-top: 8px;}
.logo-menu-button {font-size: 1.4em;letter-spacing:8px;}
.logo-menu-button.menu-button > a{font-weight:500;/* display:none; */}
/*検索の文字を消す*/
span.search-menu-caption.menu-caption {display: none;}
span.search-menu-icon {font-size: 1.2em;color: #aaa;}
.search-menu-button.menu-button {display:none;}
/* ハンバーガ */
.mobile-menu-buttons .menu-button {height: 70px;}
.fa-bars:before {font-size:1.8em;color:#b38f91;font-weight:600;content:"";content:url(https://ranatul.com/wp-content/uploads/2025/09/burger00.png);padding-top:15px;padding-left:5px;}
/* 開いたメニューの調整 */
.menu-content {max-width: 30%;}
.menu-drawer a {color: #b79490;}
.menu-close-button {font-size: 1.6em;color: #b79490;}
/* 戻るボタン */
.go-to-top-button {
background-color:transparent;
content:url(https://ranatul.com/wp-content/uploads/2025/09/toparrow00.png);}

#navi-menu-input:checked ~ #navi-menu-content{overflow:hidden;background-color:#eaeae8;opacity:.9;}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{display: none;}
/*フロント固定ページの投稿日を非表示*/
/*フロント固定ページの更新日を非表示*/
.page-id-2 .article-header .date-tags {display: none;}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{display: none;}
/*  */
/*  */
/* トップ背景動画 */
/* main-beforeで動画制御 */
.mobile-header-menu-buttons{z-index:10;}
/*  */
/*  */
/* video */
.video-box {
position: relative;
overflow: hidden;
width: 100%;
height: 300vh;
z-index: -2;
}
.video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0.7;
/*  */
}
/* overlay */
.overlay::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300vh;
content: "";
background: rgba(0, 0, 0, 0.6);
}
/*  */
/* text */
.text-box {
position: absolute;
/* TOP位置調整 */
top: 800px;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
}
.hero {position: relative;color:#fff;margin-top:-50px;}
h1 {
font-family: Roboto;
font-size: 60px;
font-weight: bold;
line-height: 1.2;
padding: 0 50px;
text-align: center;
color: #fff;
}
@media screen and (min-width:1920px) {.video {width: 200%;height: 600vh;}}
@media screen and (max-width:1600px) {.video{min-width: 200%;}}
@media screen and (max-width:1024px) {.video{min-width: 250%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:840px) {.video{min-width: 250%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:640px) {.video{min-width: 400%;left: 20%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:430px) {.video{min-width: 450%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
/*  */
/*  */
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {transition: 2.5s ease-in-out;transform: translateY(30px);opacity: 0;}
.scroll_up.on {transform: translateY(0);opacity: 1.0;}
/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {-webkit-transition: 2.5s ease-in-out;-moz-transition: 2.5s ease-in-out;-o-transition: 2.5s ease-in-out;transition: 2.5s ease-in-out;transform: translateX(-40px);opacity: 0;filter: alpha(opacity=0);-moz-opacity: 0;}
.scroll_left.on {opacity: 1.0;filter: alpha(opacity=100);-moz-opacity: 1.0;transform: translateX(0);}
/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {-webkit-transition: 2.5s ease-in-out;-moz-transition: 2.5s ease-in-out;-o-transition: 2.5s ease-in-out;transition: 2.5s ease-in-out;transform: translateX(40px);opacity: 0;filter: alpha(opacity=0);-moz-opacity: 0;}
.scroll_right.on {opacity: 1.0;filter: alpha(opacity=100);-moz-opacity: 1.0;transform: translateX(0);}
/*  */
/*  */
/* h1メニュー */
.article h1 {color: #b79490;font-size: 24pt;font-family: "Sawarabi Mincho", sans-serif;position: relative;padding: 1.5rem;text-align: center;font-weight: normal;}
.article h1 span.h1sub {color: #b79490;font-size: 16pt;display: block;padding-top:15px;}
.article h1:before {position: absolute;bottom: -10px;left: calc(50% - 30px);width: 60px;height: 5px;content: '';border-radius: 3px;background: #b79490;}
/* h2 */
.article h2 {background-color:transparent;position: relative;color: #b79490;display: inline-block;margin: 20px 25px;padding-left:35px;text-shadow: 0 0 4px white;}
.article h2::before {content: "";position: absolute;background-image:url(//ranatul.com/wp-content/uploads/2025/09/h2mark01.png);width: 50px;height: 50px;top: 50%;left: 0%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);z-index: -1;}
/* h3 メニュー */
.article h3 {border:none;color: #b79490;padding: 10px 10px 10px 60px;position: relative;}
.article h3:before {content: '＊*';color: #fff;display: inline-block;font-size: 30px;font-weight: bold;position: absolute;top: 0px;left: 0px;transform: rotate(20deg);-moz-transform: rotate(20deg);-webkit-transform: rotate(20deg);-o-transform: rotate(20deg);text-shadow: 0px 0px 6px #b79490, 0px 0px 4px #b79490, 0 0 0.5px #b79490;}
.article h3:after {border-bottom: 2px dotted #b79490;content: '';position: absolute;bottom: 0px;left: 0px;width: 100%;}
/* h4 */
.article h4 {color: #b79490;border-top: 2px solid #b79490;border-bottom: 2px solid #b79490;background-color: transparent;}
/* h5 */
.article h5 {color: #b79490;border-bottom: 2px solid #d7c4c1;}
/*  */
/*  */
/* ご予約ボタン　YellowをRanatulカラーに */
.btn-yellow, .btn-wrap.btn-wrap-yellow > a {background-color: #b79490;}
/*  */
/*  */
/*---SNSボタンを丸くする---*/
#main .button-caption {display: none;}
/*SNSシェアボタン*/
.sns-share-message{font-weight: bold;color: #875d5b;}
.sns-share-buttons {flex-wrap: nowrap;justify-content: center;}
.sns-share-buttons a {border-radius: 50%;font-size: 20px;margin: 0 10px;}
#main .sns-share a {width: 40px;height: 40px;}
/*SNSフォローボタン*/
.sns-follow-message{font-weight: bold;color: #875d5b;}
.sns-follow-buttons {justify-content: center;}
.sns-follow-buttons a {border-radius: 50%;font-size: 20px;margin: 0 10px;}
#main .sns-follow a {width: 40px;height: 40px;}
.sns-buttons a {background-color: #f1f1ef;}
/* SNSカラー */
.sns-buttons a {
color: #b79490;
border: 1px solid #b79490;
background-color: transparent;}
/*  */
/*  */
.copyright {width: 100%;}
/*  */
/*  */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/* 開いたメニューの調整 */
.menu-content {max-width: 40%;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/* 開いたメニューの調整 */
.menu-content {max-width: 50%;}

}