/**************************************************
* ホームページ用CSS
* Cocoon Child Theme カスタムスタイル
***************************************************/

/**************************************************
* 基本設定・共通スタイル
***************************************************/
/* 基本テキストカラー */
body {
  color: #2e2930;
}

/* 固定ページ */
.entry-content{
margin-top: 0;
}

/* ドロップダウンメニュー */
.dropdown-menu {
  padding: 1em 1.5em 1em !important;
}

.dropdown-item {
  padding: 0.75em !important;
  border-bottom: 1px solid #2e2930 !important;
}

.footer-bottom-section {
  padding: 1.5em 0!important;
}

/* ページボタン */
.btn-box{
display: flex;
justify-content: center;
width: 100%;
}
.p-btn{
display: flex;
align-items: center;
justify-content: center;
border-radius: 90px;
color: #1F77D7 !important;
background-color: #fff;
border: 1px solid #9DA7BD;
width: fit-content;
font-size: 17px;
font-weight: bold;
line-height: 1.5;
position: relative;
text-align: center;
text-decoration: none;
padding: 1rem 5rem;
transition: .5s ease;
}
.p-btn span{
position: relative;
padding-right: 20px;
}
.p-btn span::before{
content: "";
position: absolute;
right: 5px;
top: calc(50% - 7px);
width: 7px;
height: 13px;
background: url(../../image/p-arrow.png) center / cover no-repeat;
}
.p-btn:hover{
text-decoration: none;
opacity: 0.8;
}

/**************************************************
* ヘッダーセクション
***************************************************/
.navbar{
/*position: fixed !important;
transition: top .5s ease !important;
width: 100%;
z-index: 9999 !important;*/
background: #fff !important;
box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.6);
}
/* メインタイトル */
.header-container {
  width: 90%;
  margin: 0 auto !important;
  padding: 3vh 0 !important;
}
.header-section h1 {
  font-size:0.85rem !important;
  text-align: center;
  background-color: #1F77D7 !important;
  color: #fff !important;
  padding: 0.5em 0 !important;
  line-height: 1.25em !important;
  margin-bottom: 1.5em !important;
}
.header-section h2 {
  font-size: 2.3rem !important;
  line-height: 1.75em !important;
  letter-spacing: 0.1em !important;
  line-height: 2em !important;
  font-weight: bold !important;
}
.header-section h2 span {
  font-size: 3rem !important;
  color: #1F77D7 !important;
}

.navbar-brand {
  color: #1F77D7 !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
}
.header-btn {
  background-color: #1F77D7 !important;
  border-color: #1F77D7 !important;
}
.header-description {
  font-size: 1rem !important;
  line-height: 1.75em !important;
  letter-spacing: 0.1em !important;
}

/*追記*/
.header-section{
background: #fff;
}
.navbar-nav a.nav-link{
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.navbar-expand-lg .navbar-collapse{
justify-content: space-between !important;
}
.navbar-toggler:focus {
outline: none !important;
box-shadow: none !important;
}

/**************************************************
* ニュースセクション
***************************************************/
.holiday-section {
  padding: 100px 0 !important;
  background-color: #E3F1FC !important;
}
  .holiday-section h2,
  .profile-section h2 {
  color: #1F77D7 !important;
  font-size: 2.5rem !important;
  font-weight: bold !important;
  line-height: 1em !important;
}
.holiday-section h2 span,
.profile-section h2 span {
  display: block;
  color: #666 !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.2em !important;
}

.news {
  padding: 2em;
}

/* ニュース項目 */
.news dl {
  padding: 0.75em 0;
  border-bottom: 1px solid #dedede !important;
}

/* ニュースリンク */
.news dl a {
  text-decoration: none;
  color: #2e2930 !important;
}
.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 1em;
}
.contact-info .tel {
  font-size: 1.5rem !important;
  font-weight: bold !important;
}

/**************************************************
* コンセプトセクション
***************************************************/
.concept-section {
  padding: 80px 0 !important;
  background:url(../../image/shop3.png) no-repeat right bottom !important;
  background-size: 100% !important;
}
.concept-section.bg_top {
background:url(../../image/shop2.png) no-repeat 80% bottom !important;
background-size: 420px !important;
}
.concept-section p {
  margin-bottom: 1em!important;
}
/* セクションタイトル */
.concept-section h2{
  text-align: center;
  font-size: 2rem !important;
  line-height: 2em !important;
  font-weight: bold !important;
}

/* タイトル内の強調文字 */
.concept-section h2 span {
  font-size: 1.5em !important;
  font-weight: bold;
  color: #1F77D7 !important;
}
/* ポイント説明ボックス */
.concept-section .point {
  font-size: 0.9rem !important;
  padding: 0rem 0 0rem 1.5em;
  border-left: 3px solid #1F77D7;
  line-height: 1.5em !important;
}
.concept-section .text {
  padding: 0 3em !important;
}

/*追記*/
.concept-section .container .fix{
position: sticky !important;
top: 0;
}
.concept-section .container .img_vh{
height: 100vh;
}
.concept-section .container img{
height: 100%;
}


/**************************************************
* メニューセクション
***************************************************/
.menu-section {
  padding: 80px 0 !important;
  background :url(../../image/top_bg.png) repeat-y center !important;
  background-size: cover !important;
}

.menu-section h2  {
  font-size: 2.5rem !important;
  font-weight: bold !important;
  line-height: 1em !important;
}

.menu-section h2 span {
  display: block;
  color: #666 !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.2em !important;
}

.menu-table-container {
  width: 80%;
  margin: 0 auto;
}

/* 事例 */
.menu-panel{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 2%;
}

.menu-panel .panel-list{
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
text-decoration: none;
transition: .5s;
margin: 0 0 40px;
background: #fff;
border-radius: 9px;
overflow: hidden;
box-shadow: 4px 4px 16px rgba(0, 0, 0, .07);
}

.menu-panel h4{
font-size: 100%;
text-align: center;
line-height: 1.5;
padding: 20px;
margin: 0;
}

.menu-panel h4 .icon{
display: inline-block;
font-size: 110%;
color: #1F77D7;
margin: 0 0 5px;
width: 100%;
}

.menu-panel h4 .icon span{
font-size: 130%;
vertical-align: sub;
margin-right: 3px;
font-weight: bold;
}

.menu-box{
display: flex;
flex-direction: column;
padding: 45px 80px 45px 60px;
background: #fff;
border-radius: 9px;
box-shadow: 4px 4px 16px rgba(0, 0, 0, .07);
width: 100%;
}

.menu-box h3{
font-size: 135%;
padding: 0 0 20px;
margin: 0 0 40px;
border-bottom: solid 1px #c6c6c6;
width: 100%;
}
.menu-box h3 span{
font-size: 110%;
margin-right: 5px;
color: #1F77D7;
}
.menu-top-col{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.menu-top-col .left{
width: 32%;
}
.menu-top-col .right{
width: 64%;
}
.menu-top-col .right .text-col{
display: flex;
align-items: flex-start;
justify-content: flex-start;
border-bottom: 1px solid #dadada;
padding-bottom: 1em;
}
.menu-top-col .right .text-col p.r-title{
font-size: 18px;
font-weight: bold;
width: 15%;
}
.menu-top-col .right .text-col p.r-text{
font-size: 15px;
font-weight: normal;
color: #4f4f4f;
margin: 0;
width: 85%;
}
.menu-btm-col{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin: 40px 0 0;
width: 100%;
}
.menu-btm-col .menu-list{
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #000;
width: 48%;
border-bottom: 1px solid #dadada;
}
.menu-btm-col .menu-list.max{
width: 100%;

}
.menu-btm-col .menu-list .title{
font-size: 15px;
font-weight: bold;
text-align: center;
padding: 8px 0;
margin-right: 10px;
color: #fff;
background: #1F77D7;
border-radius: 3px;
width: 100%;
max-width: 120px;
}

@media screen and (max-width : 1200px){
.menu-top-col .right .text-col p.r-text{
padding-left: 10px;
}
}
@media screen and (max-width : 767px){
.menu-box{
padding: 25px;
}
.menu-panel{
grid-template-columns: 1fr;
}
.menu-panel .panel-list{
margin: 0 0 20px;
}
.menu-btm-col .menu-list{
width: 100%;
}
.menu-top-col .left,
.menu-top-col .right{
width: 100% !important;
}
.menu-top-col .right{
margin: 20px 0 0;
}
.menu-top-col .right .text-col p.r-title{
width: 40%;
}
.menu-top-col .right .text-col p.r-text{
width: 60%;
}
.menu-btm-col .menu-list,
.menu-btm-col .menu-list .title{
font-size: 13px;
}
}

/**************************************************
* チームセクション
***************************************************/
.profile-section {
  padding: 80px 0 !important;
  background: #fff;
}
.profile-section h4 {
  font-size: 1.25rem !important;
  font-weight: bold !important;
  /*line-height: 1em !important;*/
  color: #1F77D7 !important;
  text-align: center;
  margin-bottom: 3rem;
}
.profile-section h3 {
  font-size: 2rem !important;
  font-weight: bold !important;
  line-height: 1.35em !important;
  text-align: center;
  letter-spacing: 0.15em !important;
  margin-bottom: 1em!important;
}
.profile-section h3 span {
  font-size: 0.5em !important;
  display: block;
}
.profile-section .text p {
  font-size: 1rem !important;
  line-height: 1.75em !important;
  letter-spacing: 0.1em !important;
}

/*追記*/
.profile-section .text p span{
font-weight: bold;
font-size: 150%;
color: #1F77D7;
display: inline-block;
width: 100%;
margin: 0 0 10px;
}
.profile-section .text p.title{
font-weight: bold !important;
font-size: 150% !important;
line-height: 1.5 !important;
margin: 0 0 40px;
}

/**************************************************
* ブログセクション
***************************************************/
.blog-section {
  padding: 80px 0 !important;
  background-color: #E3F1FC !important;
}
.blog-section h2 {
  font-size: 3rem !important;
  line-height: 1.5em !important;
  text-align: center;
  margin-bottom: 3rem;
}

/* ブログカテゴリ */
.blog-section .h6 {
  color: #1F77D7 !important;
}

/* ブログ画像 */
.blog-section img {
  margin-bottom: 0.5rem !important;
}

/* 投稿日 */
.blog-section .date {
  font-size: 0.9rem !important;
}

.blog-section .col-md-4{
margin: 0 0 40px !important;
}

/* 投稿一覧スタイル */
.blog-list .row{
margin-top: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}

.blog-left{
width: 70% !important;
}

.blog-right{
width: 30% !important;
}

.blog-right .sidebar{
width: 100% !important;
}

.date-tags{
text-align: left;
}

.pager-post-navi a.next-post,
.pager-post-navi a.prev-post{
text-decoration: none !important;
}

/**************************************************
* 店舗情報セクション
***************************************************/
.shop-info-section {
  background-color: #fff !important;
}

/* サブタイトル */
.shop-info-section .h6 {
  color: #2e2930 !important;
}

/* 電話番号 */
.shop-info-section .tel {
  color: #1F77D7 !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
}

/* プライマリ背景 */
.shop-info-section .bg-primary {
  background-color: #1F77D7 !important;
  color: #fff !important;
}

/* セカンダリテキスト */
.shop-info-section .text-secondary-light {
  color: #2e2930 !important;
  line-height: 1.75em !important;
}

/* ボーダー */
.shop-info-section .border-bottom {
  border-bottom: 1px solid #2e2930 !important;
}

/* 日付表示 */
.shop-info-section .date {
  display: flex;
  align-items: center;
  padding-bottom: 1em !important;
}

/* アイコン */
.shop-info-section .fas {
  background: #1F77D7 !important;
  color: #fff !important;
  padding: 1em !important;
  border-radius: 50%;
  margin-right: 1em !important;
}

/* パディング調整 */
.shop-info-section .pb-16 {
  padding-bottom: 3rem !important;
}

/**************************************************
* フッターセクション
***************************************************/
.footer-bottom-section {
  background-color: #1F77D7  !important;
  color: #fff !important;
}

.footer-bottom-section p {
  color: #fff !important;
  margin-bottom: 0!important;
}

.footer-logo {
  color: #1F77D7 !important;
  margin-bottom: 0 !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  line-height: 1em !important;
}

/**************************************************
* レスポンシブデザイン（スマートフォン対応）
***************************************************/


@media (max-width: 767px) {
  .mb-16 {
    margin-bottom: 0!important;
  }
  /* ヘッダーセクション */

  .header-section h2 {
    font-size: 1.5rem!important;
    line-height: 1.75em!important;
    text-align: center;
  }
  .header-section h2 span {
    font-size: 1.2em!important;
  }
  .header-section h1 {
    font-size: 0.9rem!important;
  }
  .header-description {
    margin-bottom: 0!important;
  }
  header .btn {
    width: 100%;
  }
  header .py-10 {
    padding: 1em 1em!important;
  }
  .navbar-light .navbar-toggler {
    border: none!important;
  }
  .navbar-brand {
    font-size: 1.4rem !important;
  }
  .navbar>.container{
  padding: 0 !important;
  }
  .dropdown-menu {
    border: none!important;
    padding: 0 0 1em!important;
  }

  /* ページボタン */
  .p-btn{
  font-size: 13px;
  min-width: 255px;
  padding: 15px 15px 16px;
  margin: 0 auto;
  }
  .p-btn span{
  padding-right: 15px;
  }
  .p-btn span::before {
  width: 6px;
  height: 10px;
  top: calc(50% - 6px);
  }

  .news {
    width: 90%;
  }
  .news dl {
    padding: 0.5em 0!important;
  }
  .holiday-section {
    padding: 50px 0!important;
  }
  .holiday-section h2, .profile-section h2 {
    font-size: 1.75rem!important;
    line-height: 1em!important;
    margin-bottom: 0.5em!important;
  }
  .holiday-section h2 span, .profile-section h2 span {
    font-size: 0.8em!important;
  }

  /* コンセプトセクション */
  .concept-section.bg_top,
  .concept-section {
    padding: 50px 0 100%!important;
    background-size: 60%!important;
  }
  .concept-section h2 {
    font-size: 1.5rem!important;
    line-height: 1.75em!important;
  }
  .concept-section h2 span {
    font-size: 1.2em!important;
  }
  .concept-section .text {
    padding: 0 1em!important;
  }
  .concept-section .point {
    font-size: 1rem!important;
    padding: 0 0 0 1rem;
  }
  .concept-section .point span {
    font-size: 1.35em!important;
  }

  /* メニューセクション */
  .menu-section {
    padding: 50px 0!important;
  }
  .menu-section h2 {
    font-size: 1.5rem!important;
    margin-bottom: 2rem;
    text-align: center;
  }
  .menu-section .menu-category {
    text-align: center;
    padding: 1em 0!important;
    font-size: 1.75rem!important;
  }
  .menu-table-container {
    width: 100%;
  }

  .menu-table-container td {
    padding: 10px 10px !important;
    display: block !important;
  }

  .menu-category {
    display: block!important;
    width: 100%!important;
  }
  .menu-category br {
    display: none;
  }
  .menu-section td {
    padding: 15px!important;
  }
  .salon-menu, .menu-price {

    display: inline-block !important;
    vertical-align: middle !important;
  }
  .salon-menu {
    width: 70% !important;
  }
  .menu-price {
    width: 30% !important;
    text-align: right!important;
  }
  .menu-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .profile-section {
    padding: 50px 0!important;
  }
  .profile-section .text {
    padding: 0 1em!important;
  }

  /* ブログセクション */
  .blog-section {
    padding: 50px 0!important;
  }
  .blog-section h2 {
    font-size: 1.5rem!important;
    margin-bottom: 3vh!important;
  }
  .blog-section .mb-24 {
    margin-bottom: 0!important;
  }

  /* ショップ情報セクション */
  .shop-info-section .tel {
    font-size: 1.2rem!important;
  }
  .shop-info-section .mt-10 {
    margin-top: 0.5em!important;
  }
  .shop-info-section .shop-name {
    text-align: center;
  }
  .shop-info-section .mb-20 {
    margin-bottom: 1em!important;
  }
  .shop-info-section .mb-12 {
    margin-bottom: 0.5em!important;
  }
}