@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

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

.article img{max-width:100%;border-radius:5px}

/* メニュー料金 */
.menu1{background:#eaf2f2;padding:15px;border-radius:5px}
.menu1 ul{list-style:none;padding:0}
.menu1 li{background:#fff;margin:10px 0;padding:10px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.2)}

/* 連絡ボタン */
.contact-buttons,.review-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}

.contact-btn,.review-btn{
flex:1;
text-align:center;
padding:10px;
font-size:16px;
font-weight:bold;
border-radius:8px;
text-decoration:none;
transition:.5s
}

.contact-btn{color:#fff}
.contact-btn.line{background:#008000}
.contact-btn.tel{background:#800000}

.review-btn{color:#000}
.review-btn.view{background:#33ccff}
.review-btn.write{background:#ffd700}

.contact-btn:hover,.review-btn:hover{opacity:.7;color:inherit}

/* 固定ページ投稿更新日を非表示 */
.page .date-tags{display:none}

/* 見出し */
.article h1{font-size:28px;margin:0;padding:0;border:none}

.article h2,.article h3,.article h4{
margin:0;
padding:10px 0;
border:none;
color:inherit;
background:inherit
}

.article h2{font-size:24px}
.article h3{font-size:21px}
.article h4{font-size:18px}

.article p{margin:0;padding:10px 0;color:inherit;background:inherit}

.f18b{font-size:18px;font-weight:bold}

/* グローバルナビ */
#navi,#navi-footer{font-weight:bold}

#navi .navi-in a:hover,
#navi-footer a:hover,
.menu-drawer a:hover{
background:#FFF0F5;
color:#DE3838
}

/* ヘッダー・ナビ下線 */
.header,.navi{border-bottom:1px solid #BDC0BA}

/* ナビ状態 */
.navi-in .current-menu-item a,
.navi-in a:hover{border-bottom:2px solid #DE3838}

/* bar */
.redbar,.grnbar,.orgbar,.blubar,.ylwbar{
border-width:1px;
border-style:solid
}

.redbar{border-color:#F9CEDE}
.grnbar{border-color:#CAE3BF}
.orgbar{border-color:#FFDEAD}
.blubar{border-color:#B0E0E6}
.ylwbar{border-color:#EBE5C6}

/* box */
.redbox,.grnbox,.orgbox,.blubox,.ylwbox{
border-radius:5px;
margin:0 0 10px;
padding:5px 5px 0
}

.redbox{color:#641923;background:#F9EFF1}
.grnbox{color:#004E2D;background:#F0FFF0}
.orgbox{color:#5D2917;background:#FFF5EE}
.blubox{color:#3A4861;background:#F0F8FF}
.ylwbox{color:#5C4138;background:#FFFDE6}

.nonbox{border:none;margin:0;padding:0;background:none}

/* border box */
.redbrd{
border:2px solid #E0A4AF;
border-radius:5px;
margin:0 0 10px;
padding:5px 5px 0
}

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

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

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