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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/**/
/* -- TEST -- 
#target {
  width: 100%;
}

#target.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
 -- TEST -- */
body {
overflow: visible;
overflow-x: hidden;
}
/* 背景透過 */
.header-container, .main, .sidebar, .footer {
background-color: transparent;}
#header-in{display:none;}
/*  */
.wrapper1 {max-width: 350px;margin: 0 auto;}
/* 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;}
.scrollable-mobile-buttons{margin-top: 0;}
/*ハンバーガーメニューの文字を消す*/
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/11/burger03.png);padding-top:15px;padding-left:5px;}
/* 開いたメニューの調整 */
.menu-content {max-width: 30%;}
.menu-drawer a {color: #b99192;}
.menu-close-button {font-size: 1.6em;color: #b99192;}
/* 戻るボタン */
.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:clip;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;}
/*  */
/*  */
/* トップ背景動画S */
/* main-beforeで動画制御 */
/* .mobile-header-menu-buttons{z-index:10;} */
/*  */
/* video */
.video-box {
position: relative;
overflow: clip;
width: 100%;
height: 300vh;
z-index: -2;
}
.video {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
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: 1050px;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: clip;
}
.img_size01{width:150px;}
.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: 100%;height: 500vh;}.overlay::after {height:500vh}}
@media screen and (max-width:1600px) {.video{width: 100%;height: 500vh;}.overlay::after {height: 500vh;}}
@media screen and (max-width:1024px) {.video{width: 100%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:840px) {.video{width: 100%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:640px) {.video{min-width: 150%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:430px) {.video{min-width: 150%;}.video-box {height: 250vh;}.overlay::after {height: 250vh;}}
@media screen and (max-width:375px) {.video{min-width: 200%;}.video-box {height: 300vh;}.overlay::after {height: 300vh;}}
/* トップ背景動画E */
/*  */
/*  */
.floating-banner1 {
position: fixed;
top: 1.5%;
right: 0;
/* transform: translateX(-50%); */
background-color: transparent;
color: white;
padding: 1px 0px 0px 0px;
font-size: 20pt;
width: 110px;
height: auto;
/* writing-mode: vertical-rl; */
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: 5px;
z-index: 1000;
}
.floating-banner1 a{color:white;text-decoration:none;}
/*   */
/*  */
.header1{
transition: transform 0.1s 0.1s;
}
.header1.hidden {
transform: translateY(-55px);
}
.resv01{
font-size: 9pt;
line-height:12px;
margin-top:3px;
text-align:right;
letter-spacing:0.1em;
background-color:transparent;
color:white;
padding:4px 3px 2px 3px;
border-radius:5px;
border:#fff 1px solid;
top: 0;
bottom: 0;
margin: 0;
margin-bottom: 10px;
}
a.resv01 {color:white;}
/*  */
/*  */
/*  */
/*  */
/*----------------------------
scroll_up .m_fixed ｜下から上へ出現
----------------------------*/
.scroll_up1 {transition: 2.5s ease-in-out;transform: translateY(30px);opacity: 0;}
.scroll_up1.on {transform: translateY(0);opacity: 1.0;position: fixed;top: 0;}

/*----------------------------
scroll_up ｜下から上へ出現
translateY(0px)のpxで調整
0で普通にフェードイン
----------------------------*/
.scroll_up {transition: 2.5s ease-in-out;transform: translateY(0px);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メニュー スクロール制御 */
.fade1 {opacity: 1;transition: opacity 0.8s ease; /* アニメーション速度 */}
h1.fade1 {padding-top:10%;padding-bottom:0%;}/* ロゴ位置調整 */
.article h1 {color: #b79490;font-size: 22pt;font-family: "Sawarabi Mincho", sans-serif;position: relative;padding: 1.5rem;text-align: center;font-weight: normal;}
.article h1 span.h1sub {color: #b99192;font-size: 16pt;display: block;padding-top:15px;}
.article h1:before {position: absolute;bottom: -10px;left: calc(50% - 30px);width: 60px;height: 2px;content: '';border-radius: 3px;background: #b99192;}
.article h1::after {
position: absolute;
bottom: .7em;
left:50%;
z-index: -1;
color: #dfdfde;
font-size: 1.5em;
line-height: 1;
content: attr(data-word);
pointer-events: none;
}
/* center set */
.centers{text-align:left;}
/* ct1 */
.ct1{font-size:1.3em;font-weight:800;color:#b99192 /* #5b3d39 */;}
.shopcs{text-align:center;position: relative;z-index: 1;}
.shopcs::before {content: "RILUA";text-align:center;position: absolute;top: 0;font-size: 100px;font-weight: bold;font-style: italic;color: rgba(0, 0, 0, 0.1);pointer-events: none;white-space: nowrap;z-index: -1;}
/* h2 */
.article h2 {background-color:transparent;position: relative;color: #b99192;display: inline-block;margin: 20px 25px 20px 0px;padding-left:0px;text-shadow: 0 0 0px 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;}
*/
.article h2 span.sub1 {
display: flex;
align-items: center;
color: #b99192;
font-size: .70em;
font-weight:bold;
}
.article h2 span.sub1::before {
content: '';
display: inline-block;
margin-right: 2px;
width: 20px;
height: 1px;
font-weight:normal;
background-color: #b99192;
}
.article h2 span.sub1::after {
content: '';
display: inline-block;
margin-left: 2px;
width: 20px;
height: 0px;
background-color: #b99192;
font-weight:normal;
}
/* h3 メニュー */
.article h3 {border:none;color: #b99192;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 #b99192, 0px 0px 4px #b99192, 0 0 0.5px #b99192;}
.article h3:after {border-bottom: 2px dotted #b99192;content: '';position: absolute;bottom: 0px;left: 0px;width: 100%;}
/* h4 */
.article h4 {color: #b79490;border-top: 2px solid #b99192;border-bottom: 2px solid #b99192;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: #b99192;}
.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: #b99192;}
.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: #b99192;border: 1px solid #b99192;background-color: transparent;}
/*  */
/* Marker */
.underline-before {
background: linear-gradient(rgb(221 170 170), rgb(221 170 170)) 0 100%/0 2px no-repeat;
/*左から、カラー（始点と終点それぞれ同じものを指定）、position / サイズ横縦 繰り返しの有無 */
transition: background 3s;
/*トランジションの設定。下線を引く動きをアニメーションにするのに必要 */
text-decoration: none;
/*テキストの装飾の設定 */
	font-weight:bold;
}
/*
.markerap2 {
font-weight:bold;
background: -webkit-linear-gradient(left, rgb(221 170 170) 60%, transparent 60%);
background: -moz-linear-gradient(left, rgb(221 170 170) 60%, transparent 60%);
background: linear-gradient(left, rgb(221 170 170) 60%, transparent 60%);
background-repeat: no-repeat;
background-size: 200% 2px; 
background-position: 100% .8em;
transition: 3s;
}
.markerap2.is-active{background-position: 0% .5em;}
*/
.underline-after {
	background-size: 100% 2px;
  /* 変化後のスタイル。横サイズを0から100%に変えることで指定の文字列に下線を引く */
}
/* 吹き出し */
.speech-icon img, .speech-icon amp-img {border: 0px solid rgb(185 145 146);}
.sbs-flat:not(.not-nested-style) .speech-balloon {font-size: 0.8em;}
/* */
/* リストカラー */
.article ul li, .article ol li {
color: #b79490;
}
/* */
/* */
/* Testimonial */
/* */
.wptww-testimonials-slidelist.design-1, .wptww-testimonials-list.design-1{margin:0 auto;max-width: 480px;}
.wptww-testimonials-slidelist.design-2, .wptww-testimonials-list.design-2{margin:0 auto;max-width: 480px;}
/* h4 */
.wptww-testimonial-content h4 {
width:110px;
height:100px;
background-image:url(https://ranatul.com/wp-content/uploads/2025/12/chat03.png);
background-size: 80px 80px;
background-repeat:no-repeat;
background-position:50% 0%;
text-align:center;
border:none;
/*display:flexで中央配置*/
display:flex;
align-items:center;
justify-content:center;
font-weight:normal;
font-size: 9pt !important;
/* letter-spacing:-1px; */
}
.wptww-testimonials-text em::before {margin-right: 0;}
.wpcolumn, .wpcolumns, .wptww-testimonials-list *, .wptww-testimonials-slidelist *, .wptww-testimonials-slide-widget *{font-style:normal;}
.wptww-testimonials-slidelist .slick-dots li.slick-active button {background: #b99192 !important;}
.wptww-testimonials-slidelist .slick-dots li button {border: 1px solid #b99192;}
.wptww-testimonials-text em::before, .wptww-testimonials-text em::after{content: "";}
/*
.ranatulvoice1 h4{margin:0 auto;}
.wptww-testimonial-content h4::before{}
.wptww-testimonial-content h4::after {
}
*/

.wptww-testimonials-list .wptww-testimonials-text p, .wptww-testimonials-slidelist .wptww-testimonials-text p, .wptww-testimonials-slide-widget .wptww-testimonials-text p{text-align:left;padding:15px 15px 2px 15px;}
/*  */
.wptww-testimonials-slidelist button.slick-next, .wptww-testimonials-slidelist button.slick-next:hover, .wptww-testimonials-slidelist button.slick-next:focus {
background: url(//ranatul.com/wp-content/uploads/2025/12/arrowright1.png) 0 0 no-repeat !important;
background-size: 38px 38px !important;
background-color: transparent !important;
}
.wptww-testimonials-slidelist button.slick-prev, .wptww-testimonials-slidelist button.slick-prev:hover, .wptww-testimonials-slidelist button.slick-prev:focus {
background: url(//ranatul.com/wp-content/uploads/2025/12/arrowleft1.png) 0 0 no-repeat !important;
background-size: 38px 38px !important;
background-color: transparent !important;
}
.wptww-testimonials-slidelist button.slick-arrow {width: 38px;height: 38px;}
#wptww-testimonials-slidelist-1 .slick-list {background: transparent;}
#wptww-testimonials-slidelist-2 .slick-list {background: #fff;border-radius: 20px;}
/*  */
#wptww-testimonials-slidelist-1 .wptww-testimonial-content h4{display:none;}
#wptww-testimonials-slidelist-2 .wptww-testimonial-content h4{border-bottom:5px #f3f3f3 solid;margin-bottom:10px;}
/*  */
.voice_ba1{display: table;text-align: left;margin-left: auto;margin-right: auto;}
.voice_ba2{background:#e3d4d4;margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw);padding:25px 0px;}
.voice_ba3{text-align:center;font-size: 16pt;color:#fff;}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
.copyright {width: 100%;}
/*  */
.footer {display: none;}
/*  */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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: 40%;}

}