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

/*******************************************************************************
** 目次 (Table of Contents)
** 1. 全体基本設定（全体的なレイアウトや余白など）
** 2. ヘッダー（ロゴや上部メニュー）
** 3. メインコンテンツ（記事の見出しやタイトル）
** 4. サイドバー・フッター前ウィジェット（横のメニュー領域等）
** 5. フッター（一番下の領域）
** 6. 特定の機能・プラグイン（マスク、インスタ、お問い合わせ、カレンダー等）
** 7. 便利ツール（微調整用の余白や文字サイズなど）
*******************************************************************************/

/************************************
** 1. 全体基本設定
************************************/

/* 特定のページ（ID 1711）での画像表示設定 */
.page-id-1711 #_sidebar figure.wp-block-image.display-none-img {
    display: block !important;
}

/* 一時的に画像を隠すための設定 */
.wp-block-image.display-none-img {
    display: none;
}

/* サイト名のリンク余白をリセット */
.site-name-text-link {
    padding: 0px;
}

/* 記事内の装飾なしスタイル */
.article .no-style {
    margin: 0;
    padding: 0;
    background: none;
}

/* 画像の余白をなくす */
figure {
    margin: 0;
    line-height: 0;
}

/* Google マップをスマホ等できれいに表示するための設定 */
.gmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 125px;
    height: 0;
    overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/************************************
** 新カラムレイアウト
************************************/

.column {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.column__item {
    box-sizing: border-box;
}

/* 通常カラム数 */
.column--1>.column__item {
    flex: 0 0 100%;
}

.column--2>.column__item {
    flex: 0 0 50%;
}

.column--3>.column__item {
    flex: 0 0 calc(100% / 3);
}

.column--4>.column__item {
    flex: 0 0 25%;
}

/* 480px以下（sm）でのカラム数 */
@media (max-width: 480px) {
    .column--sm-1>.column__item {
        flex-basis: 100%;
    }

    .column--sm-2>.column__item {
        flex-basis: 50%;
    }

    .column--sm-3>.column__item {
        flex-basis: calc(100% / 3);
    }

    .column--sm-4>.column__item {
        flex-basis: 25%;
    }
}


/************************************
** 4. サイドバー・フッター前共通ウィジェット
** ※サイドバーとフッター前に配置する共通パーツの共通設定です
************************************/

/* --- 全体レイアウト --- */

/* #_footer-before の最後の子要素が中央寄せにならないおまじない */
.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    /* max-width: var(--wp--style--global--content-size); */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#sidebar {
    padding: 0;
}

#custom_html-24 {
    margin: 0 16px;
}

/* ウィジェット全体を横並び（フレックスボックス）にする */
#_sidebar,
#_footer-before {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin: 0 16px;
}

#_footer-before {
    max-width: 1030px;
    margin: 0 auto;
    justify-content: flex-start;
    /* 追加 */
}

#_footer-before p {
    line-height: 1;
}

/* 各セクション（カード単位）の設定 */
#_sidebar .stk-sidebar-widget {
    flex: 0 0 100%;
    box-sizing: border-box;
}

#_footer-before .stk-footer-before-widget {
    flex: 0 0 calc((100% - 32px) / 3);
    box-sizing: border-box;
}

/* 各メニュー項目の下の余白 */
#_sidebar .stk-sidebar-widget li,
#_footer-before .stk-footer-before-widget li {
    margin-bottom: 10px;
}

/* ブラウザの幅が1023px以下（タブレットなど）の時の設定 */
@media screen and (max-width: 1023px) {
    #_sidebar .stk-sidebar-widget {
        flex: 0 0 calc((100% - 32px) / 3);
    }
}

/* ブラウザの幅が767px以下（スマホなど）の時の設定 */
@media screen and (max-width: 767px) {

    #_sidebar .stk-sidebar-widget,
    #_footer-before .stk-footer-before-widget {
        flex: 0 0 100%;
    }
}

/* --- デザイン設定 --- */

/* 見出し（H3）のデザイン */
.stk-sidebar-widget h3,
.stk-footer-before-widget h3 {
    border: none !important;
    /* リセット用 */
    position: relative;
    padding: 12px;
    margin: 16px 0;
    text-align: center;
    background-color: #fcbfe8;
    color: #333;
}

.stk-footer-before-widget h3 {
    background-color: #4b53bc;
    color: #fff;
}

/* 見出しの下の三角形（吹き出し風） */
.stk-sidebar-widget h3:before,
.stk-footer-before-widget h3:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -11px;
    border: 10px solid transparent;
    border-top: 10px solid #fcbfe8;
}

.stk-footer-before-widget h3:before {
    border-top: 10px solid #4b53bc;
}


/* リスト（箇条書き）の設定 */
.stk-sidebar-widget ul,
.stk-footer-before-widget ul {
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
}

/* リンクボタンのデザイン */
.stk-sidebar-widget li a,
.stk-footer-before-widget li a {
    display: block;
    color: #333;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid #ABCD05;
    margin: 0 4% 10px;
    padding: 5px 0px 7px 12px;
    background-image: linear-gradient(#eef5cd 1px, transparent 0), linear-gradient(90deg, #eef5cd 1px, transparent 0);
    background-size: 10px 10px;
}

/* リンクボタンの先頭アイコン（矢印） */
.stk-sidebar-widget li a:before,
.stk-footer-before-widget li a:before {
    color: #ABCD05;
    font-family: FontAwesome;
    content: "\f061";
    padding-right: 5px;
}

/* リンクボタンにマウスを乗せた時 */
.stk-sidebar-widget li a:hover,
.stk-footer-before-widget li a:hover {
    background-color: #f4f9f0;
    transition: 0.3s;
}


/************************************
** 2. ヘッダー（ロゴや上部メニュー）
************************************/

/* ロゴ画像全体の余白 */
.logo-image {
    padding: 15px 0;
}

/* サイト名のテキストリンク設定（Cocoon用） */
.site-name-text-link {
    padding: 0px;
}

/* スマホ時（480px以下）のロゴ調整 */
@media screen and (max-width: 480px) {
    .logo-image {
        padding: 5px 10px 0;
    }

    /* 元の画像を隠し、背景として別のロゴを表示するテクニック */
    .logo>a img {
        visibility: hidden;
    }

    .logo>a .site-name-text {
        display: inline-block;
        max-width: 100%;
        height: 28vw;
        max-height: 135px;
        background: url(/wp-content/uploads/2018/11/logo.jpg) no-repeat;
        background-size: contain;
    }
}


/************************************
** 3. メインコンテンツ
************************************/

/* 記事の見出し（H2）の装飾 */
.article h2 {
    position: relative;
    font-size: 26px;
    padding: 0.8em 0 0.8em 1.85em;
    background-color: #e5f0b4;
    /* 黄緑色の背景 */
    margin: 1em 0;
}

/* 見出しの左側のアイコン（四角） */
.article h2:before {
    font-family: FontAwesome;
    content: "\f0c8";
    position: absolute;
    left: 0.5em;
    color: #fff;
}

/* スマホ時の見出しサイズ調整 */
@media screen and (max-width: 480px) {
    .article h2 {
        font-size: 20px;
    }
}

/* 小見出し（H3）の装飾 */
.article h3 {
    border-left: 6px solid #ABCD05;
    /* 左側の太線 */
    border-bottom: 1px solid #ABCD05;
    /* 下線 */
    padding: 6px 0 6px 12px;
    margin: 1em 0;
}

/* 記事タイトル（H1）の豪華な装飾 */
.article h1 {
    position: relative;
    padding: 12px 0;
    text-align: center;
    font-size: 30px;
    border-top: solid 3px #ABCD05;
    border-bottom: solid 3px #ABCD05;
    box-sizing: border-box;
}

/* タイトル下の三角形（吹き出し風） */
.article h1:before {
    content: "";
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin-left: -13px;
    border: 10px solid transparent;
    border-top: 10px solid #FFF;
    z-index: 2;
}

.article h1:after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #ABCD05;
    z-index: 1;
}

@media screen and (max-width: 480px) {
    .article h1 {
        font-size: 20px;
    }
}

/* 記事一覧（カード）の余白調整 */
.entry-card-content,
.related-entry-card-content {
    padding-bottom: 0;
}

/************************************
** 6-1. 営業日カレンダー (Biz Calendar)
************************************/

.widget.widget_bizcalendar {
    margin-bottom: 1em;
}

#biz_calendar {
    max-width: 100% !important;
    font-family: sans-serif;
    line-height: 1.3;
}

#biz_calendar table.bizcal {
    border: 2px #eaeaea solid !important;
}

/* 休日の背景色（赤系） */
#biz_calendar p span.boxholiday,
#biz_calendar table.bizcal .holiday {
    background-color: #ef857d !important;
    color: #ffffff !important;
}

/* カレンダー内のテキスト色など */
#biz_calendar table.bizcal th {
    background-color: #eaeaea !important;
    font-weight: normal;
}

#biz_calendar table.bizcal th:first-child {
    color: #ef857d !important;
}

/* 日曜日 */
#biz_calendar table.bizcal th:nth-last-of-type(1) {
    color: #0075c2 !important;
}

/* 土曜日 */


@media screen and (max-width: 767px) {
    #biz_calendar {
        margin: 0 10px 0 !important;
    }
}

/************************************
** アイキャッチカテゴリラベル
************************************/
.cat-label {
    display: none;
}

/************************************
** ボタン
************************************/
.btn-shiro {
    color: #2196f3;
    background-color: #fff;
    border: 2px solid #2196f3;
}

.btn-shiro:hover {
    background-color: #2196f3;
}

/************************************
** 6-2. SNS関連（インスタ・Twitter・FB）
************************************/

/* インスタグラムボタン（グラデーション背景） */
.insta_btn3,
.fl_inst .insta {
    color: #FFF;
    border-radius: 14px;
    display: block;
    width: 70px;
    height: 70px;
    text-align: center;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%);
    overflow: hidden;
    position: relative;
}

/* アイコンサイズ調整 */
.insta_btn3 .fa-instagram,
.fl_inst .fa-instagram {
    font-size: 50px;
    line-height: 70px;
    position: relative;
    z-index: 2;
}

/* Twitterボタン */
.fl_tw .twicon {
    border-radius: 14px;
    display: inline-block;
    width: 70px;
    height: 70px;
    font-size: 50px;
    line-height: 73px;
    color: #FFF;
    background: #1da1f3;
}

/* Facebookボタン */
.fl_fb .fbicon {
    border-radius: 14px;
    display: inline-block;
    width: 70px;
    height: 70px;
    font-size: 50px;
    line-height: 70px;
    color: #FFF;
    background: #4966a0;
}

/************************************
** navi
************************************/
#navi p {
    margin: 0;
    line-height: 1.3;
}

.bd-left {
    border-left: 8px solid #6db233;
    padding-left: 8px;
}

.mk-box {
    float: right;
    width: 660px;
    font-weight: bold;
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
}

.mk-h {
    width: 255px;
    float: right;
}

.mk-t {
    width: 400px;
    float: left;
}

.fl-l {
    float: left
}

.fl-r {
    float: right
}


/************************************
** お知らせ表示
************************************/
div.whatsnew {
    font-size: 15px !important;
}

/************************************
** 送信ボタン
************************************/
input.sub-btn {
    background: #2196f3;
    color: #fff;
    font-size: 18px;
    border-radius: 4px !important;
    font-weight: bold;
    border: 2px solid #2196f3;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

/* 送信ボタンホバー */
input.sub-btn:hover {
    background: #fff;
    color: #2196f3;
}

/************************************
** 見出し
************************************/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    margin: 1em 0 1em;
}

.article h2 {
    position: relative;
    font-size: 26px;
    padding: 0.8em 0 0.8em 1.85em;
    background-color: #e5f0b4;
}

.article h2:before {
    font-family: FontAwesome;
    content: "\f0c8";
    position: absolute;
    left: 0.5em;
    color: #fff;
}

@media screen and (max-width: 480px) {
    .article h2 {
        font-size: 20px;
    }
}

.article h3 {
    border-left: 6px solid #ABCD05;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #ABCD05;
    padding: 6px 0 6px 12px;
}

/************************************
** 記事タイトル
************************************/

.article h1 {
    position: relative;
    padding: 12px 0;
    text-align: center;
    font-size: 30px;
    border-top: solid 3px #ABCD05;
    border-bottom: solid 3px #ABCD05;
    box-sizing: border-box;
}

.article h1:before {
    content: "";
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin-left: -13px;
    border: 10px solid transparent;
    border-top: 10px solid #FFF;
    z-index: 2;
}

.article h1:after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #ABCD05;
    z-index: 1;
}

@media screen and (max-width: 480px) {
    .article h1 {
        font-size: 20px;
    }
}

.entry-title {
    margin: 0;
    padding: 0;
}

.home.page .entry-title {
    display: none;
}

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

.go-to-top-button {
    width: 70px;
    height: 70px;
    font-size: 26px;
}

/************************************
** コンテンツ横の余白制御
************************************/
@media screen and (max-width: 1030px) {

    .main,
    .sidebar,
    .sidebar-left .main,
    .sidebar-left .sidebar {
        margin: 0;
    }
}

main.main {
    padding-top: 0;
}

/************************************
** サイドバー・その他
************************************/

.sidebar {
    padding: 0 5px;
    border: none;
    border-radius: 0;
}

.widget {
    margin-bottom: 20px;
}

/************************************
** パンくず
************************************/
.breadcrumb {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    border-top: solid 1px #ABCD05;
    border-bottom: solid 1px #ABCD05;
}

/************************************
** main
************************************/
.main {
    border: none;
    border-radius: 0;
}

/************************************
** content
************************************/
.content {
    margin-top: 5px;
    letter-spacing: 0.8px;
}

/************************************
** 5. フッター
************************************/

/* フッター本体のスタイル */
.footer table {
    font-size: 14px;
}

.footer table th,
.footer table td {
    border: 3px solid #4e454a;
    padding: 3px 6px;
    background: #4e454a;
}

.footer table th {
    background: #fff;
    color: #4e454a;
}

.footer table td {
    background: #4e454a;
    color: #fff;
}

.footer-center,
.footer-right {
    display: none;
}

/************************************
** 6-3. その他プラグイン
************************************/

/* スライダー（Metaslider）の調整 */
@media screen and (min-width: 481px) {
    .metaslider .flexslider {
        margin: 0 !important;
    }
}

/* お問い合わせフォーム（Contact Form 7） */
.cf7mls_next.action-button {
    background-color: #2196f3 !important;
    color: #fff;
}

.cf7mls_back.action-button {
    background-color: #ccc !important;
    color: #fff;
}

.cf7-customize th {
    background: #f7f7f7;
    text-align: left;
}

/************************************
** スライダー
************************************/
@media screen and (min-width: 481px) {
    .metaslider .flex-control-nav {
        bottom: 10px !important;
    }

    .metaslider .flexslider {
        margin: 0 !important;
    }
}

/************************************
** 青ボタン
************************************/
.btn-l,
.ranking-item-link-buttons a,
.btn-wrap.btn-wrap-l>a {
    margin: 0 1em;
}

/************************************
** 6-4. レイアウト補助 (Columnbox / Flexbox)
** ※画像や文章を横に並べる際に使用する設定です
************************************/

/* PC・スマホ共通の枠組み */
.columnbox,
.flexbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* 割合（幅）の設定例 */
@media screen and (min-width: 481px) {

    .pc-cb3,
    .fb3-pc {
        width: 33.33%;
    }

    /* 3カラム（3つ並び） */
    .pc-cb2,
    .fb2-pc {
        width: 50%;
    }

    /* 2カラム（2つ並び） */
    .pc-cb1,
    .fb1-pc {
        width: 100%;
    }

    /* 1カラム（縦並び） */
}

@media screen and (max-width: 480px) {

    .sp-cb1,
    .fb1-sp {
        width: 100%;
    }

    /* スマホでは基本1列 */
}

/************************************
** Contact Form 7
************************************/

.cf7mls_next.action-button,
.cf7mls_back.action-button,
.fieldset-cf7mls .wpcf7-form-control.wpcf7-cf7mls_preview_step {
    margin: 30px 2% 0 !important;
    width: 46%;
    font-size: 16px;
    letter-spacing: 0.8px;
}

.cf7mls_next.action-button {
    background-color: #2196f3 !important;
}

.cf7mls_back.action-button {
    background-color: #ccc !important;
}

fieldset {
    border: none;
}

ul.cf7mls_progress_bar {
    margin: 30px 0 0;
    padding: 0;
}

.cf7mls_progress_bar li:before {
    background: #ccc !important;
}

.cf7mls_progress_bar li.active:before,
.cf7mls_progress_bar li.active:after {
    background: #2196f3 !important;
}

div.fieldset-cf7mls-wrapper {
    padding: 0;
    margin: 0;
}

div.fieldset-cf7mls-wrapper .cf7mls_current_fs {
    padding: 0;
    border: none;
}

input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

table.cf7-customize p {
    margin: 0
}

table.cf7-customize p.m10-t {
    margin-top: 10px;
}

table.cf7-customize p.m5-b {
    margin-bottom: 5px;
}

table.cf7-customize td,
table.cf7-customize th {
    border-color: #d7d7d7;
    padding: 15px;
}

table.cf7-customize th {
    text-align: left;
    background: #f7f7f7;
}

table.cf7-customize td {
    background: #fff;
}

@media screen and (max-width: 480px) {

    table.cf7-customize th,
    table.cf7-customize td {
        display: block;
        width: 100%;
        border: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/************************************
** カレンダー
************************************/
.xo-event-calendar .month-event,
.xo-event-calendar .month-event-space {
    display: none;
}

.xo-event-calendar table.xo-month .month-dayname td div {
    padding: 1px !important;
    text-align: center !important;
    font-size: 14px !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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) {

    /*必要ならばここにコードを書く*/
    .br::before {
        content: "\A";
        white-space: pre;
    }
}

/************************************
** 文字装飾
************************************/
.img-w70 img {
    max-width: 70%;
}

.img-w80 img {
    max-width: 80%;
}

.img-w85 img {
    max-width: 85%;
}

.img-w90 img {
    max-width: 90%;
}

.blank-box.bb-green {
    border-color: #ABCD05
}

/************************************
** 7. 便利ツール (Utility Classes)
** ※クラス名を指定することで、微調整が可能です
** 使い方例: class="m10-t"（上に10pxの余白を追加）
************************************/

/* --- 余白 (Margin) --- */
body .m-auto {
    margin: auto;
}

body .m0 {
    margin: 0;
}

body .m10-t {
    margin-top: 10px;
}

body .m20-t {
    margin-top: 20px;
}

body .m30-t {
    margin-top: 30px;
}

body .m10-b {
    margin-bottom: 10px;
}

body .m20-b {
    margin-bottom: 20px;
}

body .m30-b {
    margin-bottom: 30px;
}

/* --- 内側の余白 (Padding) --- */
body .p0 {
    padding: 0;
}

body .p10 {
    padding: 10px;
}

body .p20 {
    padding: 20px;
}

/* --- 横幅 (Width) --- */
body .w50 {
    width: 50%;
}

body .w100 {
    width: 100%;
}

/* --- 文字サイズ (Font Size) --- */
body .fs80 {
    font-size: 80%;
}

body .fs120 {
    font-size: 120%;
}

body .fs150 {
    font-size: 150%;
}

/* --- 配置 (Alignment) --- */
body .al-c {
    text-align: center;
}

body .al-r {
    text-align: right;
}

body .al-l {
    text-align: left;
}