@charset "UTF-8";
/*
    Template: swell
    Theme Name: s_more-site
    Theme URI: 
    Description: 子テーマ
    Version: 1.0.0
    Author: 合同会社Ｍｏｒｅｉｓｍ
    Author URI: https://moreism.net/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 固定連絡ボタンのコンテナ */
.fixed-contact-buttons {
    display: none;
}

@media (min-width: 992px) {
    .fixed-contact-buttons {
        position: fixed;
        top: 60%; 
        right: 0; 
        transform: translateY(-50%);
        z-index: 1000;
        
        display: flex;
        flex-direction: column; 
        gap: 10px; 
    }
}

/* 各ボタンの共通スタイル */
.contact-button {
    display: block;
    width: 100px;
    padding: 15px 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 10px 0px 0px 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
}

.contact-button:hover {
    opacity: 0.85;
}

/* ★ Font Awesomeのアイコン調整 */
.contact-button i { /* iタグ（Font Awesomeアイコン）をターゲット */
    display: inline-block;
    font-size: 18px; /* アイコンを少し大きく */
    margin-bottom: 5px;
}

.contact-button .text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
}


/* 個別カラー */

/* 電話ボタン */
.tel-button {
    background-color: #e54d4d;
}

/* LINEボタン */
.line-button {
    background-color: #00b900;
}

/* Instagramボタン (グラデーション) */
.insta-button {
    background-image: linear-gradient(
        45deg, 
        #f09433 0%, 
        #e6683c 25%, 
        #dc2743 50%, 
        #cc2366 75%, 
        #bc1888 100%
    );
}




.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}








/*=====================================
  ドット区切り線のスタイル
======================================*/


/* 区切り線コンテナのスタイル */
.divider-dot-container {
    /* 丸を中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 10px;
    margin-bottom: 30px;
}

/* 各丸（ドット）のスタイル */
.dot {
    /* サイズ調整のための変数 */
    --dot-size: 10px; /* ★丸の大きさを調整（初期値: 10px） */
    --dot-spacing: 10px; /* ★丸と丸の間隔を調整（初期値: 20px） */

    /* 丸の基本設定 */
    display: block;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%; /* 完全な丸にする */
    

    background-color: #8B4513;
    
    /* 間隔の適用 */
    margin-left: var(--dot-spacing);
    margin-right: var(--dot-spacing);
    
    /* レスポンシブ対応のための縮小設定 */
    flex-shrink: 0; /* 画面が狭くなっても丸を潰さない */
}

/* 最初の要素と最後の要素の余白を調整し、配置を整える */
.dot:first-child {
    margin-left: 0;
}

.dot:last-child {
    margin-right: 0;
}


/*=====================================
  レスポンシブなサイズ調整（オプション）
======================================*/

/* 画面幅が狭い場合（例: スマートフォン）の調整 */
@media (max-width: 600px) {
    .dot {
        /* スマートフォンでの丸のサイズを小さくする */
        --dot-size: 8px; 
        /* スマートフォンでの間隔を狭くする */
        --dot-spacing: 5px;
    }
}


















/* ヘッダー文字大きく*/
#header #gnav .menu-item .ttl {
/* フォントを大きく /
font-size : 15px;
/ 更に太字にする */
font-weight: bold;
}
.ttl {
/* フォントを大きく /
font-size : px16;
/ 更に太字にする */
font-weight: bold;
}

/* 全見出し要素と指定クラスにフォントと色を適用 */
h1, h2, h3, h4, h5, h6, .heading-font {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #333;
} 


/* ================================== */
/* PC・タブレット（769px以上）の設定 - 優先度強化 */
/* ================================== */
body h2 {
    /* PCでのH2フォントサイズ - !importantで強制適用 */
    font-size: 38px !important; 

    color: #1a1a1a !important; 
}

body h3 {
    /* PCでのH3フォントサイズ - !importantで強制適用 */
    font-size: 27px !important;
    /* PCでのH3カラー */
    color: #333333 !important;
}

/* ================================== */
/* スマートフォン（768px以下）の設定 - 優先度強化 */
/* ================================== */
@media (max-width: 768px) {
    /* H2の設定 */
    body h2 {
        /* スマホでのH2フォントサイズ - !importantで強制適用 */
        font-size: 24px !important;
        /* スマホでのH2カラー */
        color: #333333 !important; 
    }

    /* H3の設定 */
    body h3 {
        /* スマホでのH3フォントサイズ - !importantで強制適用 */
        font-size: 20px !important;
        /* スマホでのH3カラー */
        color: #333333 !important; 
    }
}


/* wp-block-coverの角丸設定 */
.wp-block-cover.alignwide.is-light {
    /* 角丸を50ピクセルに設定 */
    border-radius: 50px !important;
    /* はみ出たコンテンツを非表示にする（角丸を正しく表示させるため） */
    overflow: hidden; 
}

/* ================================== */
/* ページトップボタンの位置調整 */
/* ================================== */

/* 1. PC・タブレット（769px以上）：右下隅に固定 */
.c-fixBtn {
    position: fixed !important;
    
    /* PC/タブレット共通の初期位置 */
    right: 20px !important;
    bottom: 20px !important;
    
    /* 重なり順（最前面） */
    z-index: 1000 !important; 
    
    /* 余計なスペースを除去 */
    margin: 0 !important;
}

/* 2. 中間デバイス（992px以下）：位置を微調整 */
@media (max-width: 992px) {
    .c-fixBtn {
        right: 15px !important;
        bottom: 15px !important;
    }
}

/* 3. スマートフォン（768px以下）：フッターボタンを避けて上へ移動 */
@media (max-width: 768px) {
    .c-fixBtn {
        /* フッターボタンの上（約70px）に配置 */
        right: 10px !important;
        bottom: 70px !important;
        
        /* フッターボタンより奥（重なり順を少し下げる） */
        z-index: 999 !important; 
    }
}

/* 4. タブレット縦向き（481pxから768px）：必要に応じてここで上書き調整 */
@media (min-width: 481px) and (max-width: 768px) {
    /* 必要なければこのブロックは削除してください。 */
    /* 例: PCに近い配置に戻す場合
    .c-fixBtn {
        right: 15px !important;
        bottom: 15px !important;
    }
    */
}