@charset "UTF-8";

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

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

/*#######################################################

共通パーツ

########################################################*/

/*
*
*  表示/非表示｜デフォルトスタイルをキャンセル
*
*/

/*---------- 横スクロールバーが出ないように ----------*/
#content {
    overflow: hidden;
}

/*---------- 本文（メインカラム）背景を透過 ----------*/
/* .main{
  background: transparent;
} */

/*---------- メインカラム（content）の上部余白をキャンセル ----------*/
#content,
#main {
    margin-top: 0;
    padding-top: 0;
}

/*---------- フロントページ/固定ページでページタイトル/アイキャッチを非表示 ----------*/
.home .entry-title,
.page .entry-title,
.home .eye-catch,
.page .eye-catch {
    display: none;
}

/*----------aタグの装飾をキャンセル ----------*/
a {
    text-decoration: none;
}

/*
*
*  配置
*
*/

/*---------- 「p」タグを縦中央に配置 ----------*/
.p-center {
    display: flex;
    align-items: center;
}

.inlineblock {
    display: inline-block;
}

/*---------- 水平方向に整列 ----------*/
.d-flex {
    display: flex;
}

/*---------- align-items ----------*/
.a-item_end {
    align-items: end;
}

/*---------- margin ----------*/
.m-top_70 {
    margin-top: 70px;
}

.m-top_-30 {
    margin-top: -30px;
}

.m-bottom_0 {
    margin-bottom: 0 !important;
}

.m-bottom_05rem {
    margin-bottom: 0.5rem !important;
}

.m-bottom_1rem {
    margin-bottom: 1rem !important;
}

.m-bottom_70 {
    margin-bottom: 70px !important;
}

.m-center {
    margin: 0 auto;
}

/*---------- padding ----------*/
.p-top-bottom {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.p-left_1rem {
    padding-left: 1rem;
}

.p-left_2rem {
    padding-left: 2rem;
}

.p-all_1rem {
    padding: 1rem;
}

/*---------- 固定 ----------*/
.bg-fixed {
    background-attachment: fixed;
}

/*---------- 横幅拡大 ----------*/
.width-expansion {
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

/*---------- 縦書き ----------*/
.tategaki {
    writing-mode: vertical-rl;
    align-items: center;
}

/*
*
*  サイズ
*
*/

/*---------- width ----------*/
.w-fit {
    width: fit-content;
}

/*----------フォントサイズ ----------*/
.f-24 {
    font-size: 24px;
}

/*
*
*   見出し
*
*/

/*---------- h2 ----------*/
.article h2.pri {
    background: none;
    font-size: 2rem;
}

.article h2.sub {
    transform: skew(-15deg);
    color: #fff;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
    background-image: -webkit-gradient(linear, left top, right top, from(#008081), to(#68e0cf));
    background-image: -webkit-linear-gradient(left, #008081 0%, #68e0cf 100%);
    background-image: linear-gradient(to right, #008081 0%, #68e0cf 100%);
}

/*---------- h3 ----------*/
.article h3.sub {
    position: relative;
    border: none;
    border-bottom: 4px solid #9e9e9e;
    transform: skew(-15deg);
}

.article h3.sub::after {
    position: absolute;
    content: "";
    bottom: -7px;
    left: 0;
    width: 20%;
    height: 7px;
    background: #fc8383;
    transform: skew(-15deg);
}

/*---------- h4 ----------*/
.article h4.sub {
    position: relative;
    border: none;
    display: inline-block;
}

.article h4.sub::before {
    position: absolute;
    content: "";
    bottom: 7px;
    left: 0;
    width: 100%;
    height: 10px;
    background: #b6b6b6;
    transform: skew(-15deg);
    z-index: -1;
}

/*---------- h5 ----------*/
.article h5.sub {
    position: relative;
    padding-left: 2rem;
    border: none;
}

.article h5.sub::before {
    position: absolute;
    left: 0;
    content: '\f101';
    top: calc(50% - .5em);
    font-family: 'Font Awesome 5 Free';
    line-height: 1;
    color: #eb6100;
}

/*
*
*   グーグルマップを16：9で表示
*
*/
/*---------- GoogleMapを16:9でレスポンシブ ----------*/
.g-map-size iframe {
    aspect-ratio: 16/9;
    width: 100%;
}

/*#######################################################

ヘッダー

########################################################*/

/*
*
*　グローバルメニュー
*
*/

/*---------- グローバルナビの装飾をキャンセル｜影を追加 ----------*/
#navi .navi-in a {
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/*=================================================
グローバルナビにマウスホバーアクションを追加
==================================================*/
#navi .navi-in a::after {
    position: absolute;
    bottom: 10px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
	background: rgba(255, 103, 102, 1);
	transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}

/*---------- リンクホバー時の背景色変化をキャンセル ----------*/
#navi .navi-in a:hover {
    background: none;
}

/*---------- リンクホバー時に下線をアニメーションで表示 ----------*/
#navi .navi-in a:hover::after {
    transform: scale(1, 1);
}

/*#######################################################

メインコンテンツ

########################################################*/

/*
*
*   フロントページ
*
*/

/*=================================================
メインビジュアル
==================================================*/

/*----------  背景を画面幅いっぱいに拡大----------*/
/* .frontpage_mainvisual {
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
} */

.frontpage_mainvisual_content {
    background-image: url(https://kuroiwakasuga.com/wp-content/uploads/2022/09/IMG_TopView-BG.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.frontpage_mainvisual_content  img {
    height: 100%;
}


/*
*
*   メインビジュアル
*
*/

.single .article-header {
    position: relative;
}

/*---------- アイキャッチを画面幅まで拡大 ----------*/
/* .home .eye-catch-wrap {
    margin: 0 calc(50% - 50vw);
}

.single .entry-title {
    position: absolute;
    bottom: 10%;
    left: 50%;
    color: #fff;
} */

/*#######################################################

フッター

########################################################*/

/*---------- フッター背景 ----------*/
/* .footer {
    background-image: url(https://kuroiwakasuga.com/wp-content/uploads/2021/07/150333.png);
    background-position: center;
} */

/*---------- フッター装飾 ----------*/
/* .footer-bottom-logo .logo-image {
	max-width: 100%;
} */

/*
*
*   モバイルスライドインメニュー
*
*/

/*---------- 下から上へスライド表示 ----------*/
.mobile-footer-menu-buttons .navi-menu-content {
    top: auto;
    bottom: 0;
    transform: translateY(105%);/* 画面外へ隠す */
    width: auto;/* メニューの幅 */
    min-width: 200px;/* メニューの幅（最小） */
    height: auto;/* メニューの高さ */
    background: rgba(255, 255, 255, 1);/* 背景色 */
    border-radius: 5px;
    text-align: left;
}

/*---------- メニュー項目の装飾 ----------*/
.mobile-footer-menu-buttons .menu-drawer a {
    border-bottom: solid 1px rgba(50, 50, 50, 0.2); 
    padding-top: 1rem;
    font-weight: bold;
}

/*---------- トップへ戻るボタン ----------*/
.go-to-top {
    right: 0;
    bottom: 0;
}

.go-to-top-button {
	width: 150px;
    height: auto;
}





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