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

/************************************
** 子テーマ用のスタイルを書く
************************************/
:root {--main-color: #d6eaea;}
.date-tags{display:none;}
.opa9{opacity: 90%;}
.f-vw{font-size:clamp(1.5rem, 2vw + 1rem, 2.625rem);font-weight:800;}
.entry-title,.f-tw{font-size: clamp(18px, 1.8vw, 32px);font-family: "Libre Baskerville", serif;font-weight: 700;font-style: normal;color:#ccc;}
.m-vw{margin-top:7.2vw!important}
.shadow {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.full-width {width: 100vw;margin: 0 calc(50% - 50vw); }
.p-content__body[data-overDirection~="full"] {width: 100vw;margin: 0 calc(50% - 50vw);}
.pc_view{display: block;}
.sp_view{display: none;}
.date-tags {display:none;}
.main{background: transparent;}
.footer {margin: 0 calc(50% - 50vw); padding: 5em calc(50vw - 50%);}
#header-container{margin:0 calc(50% - 50vw); padding: 1.3em calc(50vw - 50%);}
.slant-bg {width: 100%;padding: 150px 0;clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);background-color: #faecd0;}
.slant-bg p {width: 65%;margin: 0 auto;}
.text-main{color:#ea9886;}
#sb_instagram .sb_instagram_header h3, .sb_instagram_header h3{border:none!important;}
.ewd-ufaq-faqs a{color:#000;}
.ewd-ufaq-faqs a:hover{color:red;}

 /************************************
** Hタグの装飾
************************************/
.article h1{margin:0 calc(50% - 50vw); padding: 1.3em calc(50vw - 50%); text-align: center;font-size:clamp(1.5rem, 2vw + 1rem, 2.625rem);font-weight:800;color:#fff;position: relative;}
.parallax-window {min-height: 200px;background: transparent;}
.parallax-slider {top: 0;left: 0;}
.article h2 {position: relative;padding: 30px 0 12px 120px;border-bottom: 2px dotted #5a2200;font-size: 2rem;border-left:none;border-right:none;border-top:none;background-color:transparent;color:#646464;}
.article h2::before {content: "";position: absolute;top: 0px;left: 0;background-image: url(https://ro-col.com/wp-content/uploads/2025/06/mark.png);background-size: contain;background-repeat: no-repeat;width: 70px;height: 70px;}
.article h2:after {position: absolute;content: " ";display: block;border-bottom: solid 5px #d6eaea;bottom: -3px;width: 20%;}
.article h3 {border-left: 7px solid #afeeee;border-right: 1px solid #edd4b5;border-top: 1px solid #edd4b5;border-bottom: 1px solid #edd4b5; font-size: 25px;padding: 12px 20px;}
#coupon .article h1{margin: 0 calc(50% - 50vw);padding: 0.3rem;text-align: left;font-size: 20px!important;font-weight: 800;color: #fff;}

/************************************
** サイドバー関係の設定
************************************/
.sidebar{background-color:#ffffff00;}
.no-scrollable-sidebar .sidebar {height: 100%;margin-top: 20px;}
.sidebar h3 {background-color: #CCC7C2;padding: 12px 0 12px 40px;margin: 5px 0;border-radius: 5px;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: #CCC7C2; 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: #CCC7C2; 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;}
/************************************
** table関係の設定
************************************/
.tdpad td{padding:10px 0px 10px 25px!important;}
table tr:nth-of-type(2n+1) {background-color:transparent;}
table th,table td {border: none;padding: 2px;}
table td .fs {font-size:0.7rem;color:#696969;}
.tableline{background-color:transparent;border-bottom: 1px dotted #a9a9a9;}
.tableline th,.tableline td{background-color:transparent;border-bottom: 2px dotted #a9a9a9;padding:10px 0px 10px 25px!important;;border-left:none;border-right:none;}
.tbl-r02 th {background: var(--main-color);border: solid 1px #ccc;color: #000;padding: 10px;width:30%}
.tbl-r02 td {border: solid 1px #ccc;padding: 10px;}

/************************************
****　エントリーカードインデックス
************************************/
.ect-vertical-card .entry-card-wrap .entry-card-content{padding:3px;margin:0;display:flex;flex-direction:column;height:100%;background-color: #ffffff;}
a.entry-card-wrap.a-wrap.border-element.cf{padding:0 0 .5em;border-radius:6px;width:33%;margin-bottom:1em}
a.entry-card-wrap.a-wrap{transition:all .1s}
a.entry-card-wrap.a-wrap:hover{transform:translateY(-1px);transition:all .1s;background-color:#fff}
figure.entry-card-thumb.card-thumb.e-card-thumb{max-height:200px;border-radius:6px 6px 0 0/ 6px 6px 0 0;overflow:hidden;display:flex;justify-content:center;align-items:center}
.e-card-thumb .cat-label{margin-top:.3em;margin-left:.3em}
.cat-label{background-color:#004f9d!important}
h2.entry-card-title.card-title.e-card-title{font-size:18px;color:#7b7b7b;font-weight:700;text-align:center;line-height:1.5rem;margin-top:.5em;margin-bottom:1rem;padding:0 .3em}
.entry-card-snippet.card-snippet.e-card-snippet{font-size:14px;color:#7b7b7b;text-align:center;border-top:3px dotted silver;line-height:1.8em;padding-top:.6em;margin-left:2em;margin-right:2em;margin-bottom:1em;max-height:20em}
.eye-catch .cat-label,.cat-label{font-size:.7em;padding:0 .5em;opacity:.85;background-color:#f5f5f5;color:#696969}
div.admin-pv{display:none}

 /************************************
**　トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示
************************************/
.new-entry-cards.a-wrap{display:flexbox}
.widget-entry-cards.card-large-image .a-wrap{border:solid 1px #ccc;border-radius:20px;width:24%;text-align:left;padding:0;margin:1px;height:400px}
.widget-entry-cards:not(.large-thumb-on) .card-title{font-size:16px;color:#7b7b7b;font-weight:700;text-align:center;line-height:1.5rem;margin-top:.5em;margin-bottom:1rem;padding:0 .3em}
.widget-entry-card-snippet{font-size:12px;color:#7b7b7b;text-align:center;border-top:3px dotted silver;line-height:1.5em;padding-top:.6em;margin-left:2em;margin-right:2em;margin-bottom:1em;max-height:20em}
.widget-entry-cards.card-large-image figure img{width:100%;display:block;border-radius:20px 20px 0 0;object-fit:cover}
.widget-entry-card-thumb{margin-top:0!important}
.eye-catch .cat-label,.cat-label{font-size:.7em;padding:0 .5em;margin-left:5px;opacity:.85;background-color:#f5f5f5;color:#696969}
div.admin-pv{display:none}
.new-entry-card-date{display:block;color:#a3a1a1;text-align:right;margin-right:15px}
.widget-entry-card-update-date{display:none}
.widget-entry-card-date{display:block;position:absolute;right:0;font-size:18px}
.widget-entry-card-date::before{font-family:"Font Awesome 5 Free";content:"\f017";font-weight:400;padding-right:0;font-size:14px}

 /************************************
**　ステップバーデザイン
************************************/
.step-wrap3 { counter-reset: count; margin: 2em 0; position: relative; }
.step-content3 { padding: 1.3em 0 .3em 1em; margin: 0 0 1em 1em; position: relative; border-top: solid 2px #ddd; }
.step-content3::before { content: ""; display: block; position: absolute; bottom: 0; left: -10px; border-style: solid; border-width: 17px 8px 0 8px; border-color: #ddd transparent transparent transparent; }
.step-content3::after { content: ""; display: block; height: calc(100% - 36px); border-left: dashed 4px #ddd; position: absolute; top: 16px; left: -4px; }
.step-label3 { padding: 3px 20px 3px 15px; color: #fff; font-weight: bold; position: absolute; top: -18px; left: -20px; background: #6ab5a5; border-radius: 20px; z-index: 1; }
.step-label3::after { counter-increment: count; content: counter(count); position: relative; left: .3em; }
.step-title3 { font-weight: bold; font-size: 120%; }
.step-body3 { margin-top: .5em; padding: 0 0 1em; }
.step-wrap3 > :last-child { box-shadow: 5px 7px 0 -5px #ddd; }
.step-wrap3 > :last-child::before, .step-wrap3 > :last-of-type::after { display: none; }

/************************************
** ボタン類のデザイン
************************************/
input[type="reset"]{
	width: 100%;font-size: 15px;color: #000;display: inline-block;padding: 10px 0px;text-align: center;border-radius: 10px;text-decoration: none;cursor: pointer;transition: background-color 1s;border:none;}
input[type="reset"]:hover{background-color:#ea9886;}

/************************************
** サイドLINE告知用
************************************/
.pulse-btn{animation:pulse-btn 5s infinite ease-in-out .8s alternate;background:url(https://ro-col.com/wp-content/uploads/2025/07/LINE-_baner-rocol_03.png) no-repeat center center / 200px auto;display:inline-block;transition:1.5s ease-in-out;position:fixed;bottom:120px;right:5px;z-index:10000;width:200px;height:500px;cursor:pointer}
.pulse-btn img{width:100%}

/************************************
** ヘッドナビ部分
************************************/
#navi .navi-in a{color:#696969;font-size:1rem;}
#navi .navi-in a:hover {background-color: var(--main-color);transition: all 0.3s ease-in-out;color:  #fff;font-weight:600;}
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #5a2200;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}
#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
.navi-in > ul .sub-menu a {padding-left: 16px;padding-right: 16px;font-size:12px!important;}

/*ヘッダーの現在のページに色を付ける指定*/
.page-id-59 #navi li:nth-child(2) a {background: var(--main-color);font-weight:600;color:#fff;}
.page-id-53 #navi li:nth-child(3) a {background: var(--main-color);font-weight:600;color:#fff;}
.page-id-98 #navi li:nth-child(4) a {background: var(--main-color);font-weight:600;color:#fff;}
.page-id-130 #navi li:nth-child(5) a {background: var(--main-color);font-weight:600;color:#fff;}
.page-id-22 #navi li:nth-child(6) a {background: var(--main-color);font-weight:600;color:#fff;}
.page-id-122 #navi li:nth-child(7) a {background: var(--main-color);font-weight:600;color:#fff;}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .article h2::before {top:18px;width: 40px;height: 40px;}
  .article h2 {position: relative;padding: 30px 0 12px 60px;border-bottom: 2px dotted #5a2200;font-size: 1.5rem;border-left:none;border-right:none;border-top:none;background-color:transparent;color:#646464;}
   .last td:last-child {border-bottom: solid 1px #ccc; width: 100%;}
  .tbl-r02 {width: 100%;}
  .tbl-r02 th {background-color: #afeeee;border-bottom: none;display: block;width: 100%;color:#000;}
  .tbl-r02 th,.tbl-r02 td {border-bottom: none;display: block;width: 100%;}
  .tbl-r02 td {text-align:right;}
  .pulse-btn｛display:none;｝
  .veu_3prArea_image {margin-bottom:10px;}
  .logo-header img {margin-top: 50px;}
  /*スライドインメニューのカスタム*/
.menu-content {background: #aed2f8;border-bottom: 1px solid;max-width: 98%;} 
.mobile-menu-buttons {line-height: 2;}
.menu-drawer a {color: #fff;}
.menu-drawer li {border-bottom: 2px dotted #000;}
}
@media screen and (min-width: 480px){
#sb_instagram .sb_instagram_header h3, .sb_instagram_header h3{border:none!important;}
}