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

/************************************
** Baseコード
************************************/
@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');
.header-container,.navi {background-color: rgb(255,255,255,0);}
.main, .sidebar {background-color: rgb(255,255,255,0);}
.footer {background-color: #5A2200;color:#fcfcfc;}
.main {padding:0px 29px 20px 29px ;border:none!important;}
.navi-footer-in a {color: #fff;text-decoration: none;display: block;font-size: 14px;transition: all 0.3s ease-in-out;}
.date-tags {display:none;}
.full-w {margin-left: calc(-50vw + 50%);margin-right: calc(-50vw + 50%);}
.mincho{font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;}
.shadow {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.fs-f{ font-size:clamp(1.5rem, 2vw + 1rem, 2.25rem);font-weight:700;}
.fsw-12{font-size:0.7rem;}
.m-vw{margin-top:7.2vw;}

input[type='submit'] {
    -webkit-appearance: none;
    border: 1px solid #ddd;
    background-color: #0095d9;
    color: #ebf8f4;
	width: 30%;
}
[type=reset]:not(:disabled){padding:10px;}
.eye-catch-wrap {display: flex;margin-top: 20px;}
.eye-catch img {display:none;}
/************************************
** 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 {font-family: 'Bellefair', serif;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;}
.article h2::before {position: absolute;top: 5px;left: 0;content: url(https://hairspa-carina.jp/wp/wp-content/uploads/2022/12/htag.png);}
.article h2:after {position: absolute;content: " ";display: block;border-bottom: solid 5px #5a2200;bottom: -3px;width: 20%;}
.article h3 {border-left: 7px solid #5a2200;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;}
/************************************
** table関係の設定
************************************/
.tdpad td{padding:10px 0px 10px 25px!important;}
#menu table th,table td {border: none;padding: 2px;}
#menu table td .fs {font-size:0.7rem;color:#696969;}
#menu table tr:nth-of-type(2n+1) {background-color:transparent;}
#menu .tableline{background-color:transparent;border-bottom: 1px dotted #a9a9a9;}
#menu .tableline th,.tableline td{background-color:transparent;border-bottom: 1px dotted #a9a9a9;padding:10px 0px 10px 25px!important;;border-left:none;border-right:none;}
.pinkbk {background-color:#ffc0cb;}
/************************************
** ヘッドナビ部分
************************************/
#navi .navi-in a{color:#5a2200;font-size:1rem;}
#navi .navi-in a:hover {background-color: #edd4b5;transition: all 0.3s ease-in-out;color: #d99066;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-19 #navi li:nth-child(2) a {background: #edd4b5;font-weight:600;}
.page-id-21 #navi li:nth-child(3) a {background: #edd4b5;font-weight:600;}
.page-id-25 #navi li:nth-child(4) a {background: #edd4b5;font-weight:600;}
.page-id-23 #navi li:nth-child(5) a {background: #edd4b5;font-weight:600;}
.page-id-29 #navi li:nth-child(6) a {background: #edd4b5;font-weight:600;}
.page-id-27 #navi li:nth-child(7) a {background: #edd4b5;font-weight:600;}

/************************************
** サイドバーの設定
************************************/
.no-scrollable-sidebar .sidebar {height: 100%;margin-top: 210px;}
.sidebar h3 {background-color: #e8d2b0;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;}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
.page-id-25 h2 {font-family: 'Bellefair', serif;position: relative;padding: 30px 0 12px 10px;border-bottom: 2px dotted #5a2200;font-size: 1rem!important;border-left:none;border-right:none;border-top:none;background-color:transparent;}
.page-id-25 h2::before {display:none;}
.page-id-25 h2:after {display:none;}
.fc-toolbar-chunk{width:100px;}
  /*必要ならばここにコードを書く*/
}