@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.2.1
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

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


/* --- 全体・本文の基本スタイル --- */

/* 1. 全体のベース（背景や基本色） */
body {
    position: relative;
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
    color: #333;
    padding-bottom: 80px;
}

/* 2. 本文エリア（ここを具体的に指定することで反映させます） */

.post_content, 
.main_content, 
.post_content p {
    font-size: 1rem !important; /* 15px 相当 */
    line-height: 2 !important;
	    font-weight: 600 !important;
}

.post_content strong, 
.main_content strong, 
.post_content p  strong{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
}
/* 太字の指定 */
h1, h2, h3, b, strong {
    font-weight: 700;
}

/* ゴシック体のクラス */
.gothic {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
}


/*全体*/
/*#header .l-header__inner {
	display : grid;
	grid-template-columns : repeat(2, 1fr);
	justify-content : space-between;
	grid-gap : var(--w-grid-gap);
	align-items : center;
	height : 80px;
}*/
#header .l-header__inner {
	display : flex;
	height : 80px;
	align-items : center;
	justify-content : center; 
}
header .c-headLogo {
	text-align : center;
	height : 60px;
}
.-img .c-headLogo__link {
	margin : 0;
	padding : 0;
}
header .l-header__tel {
	display : none;
}
header .l-header__adress {
	display : none;
}
header .l-header__sns {
	display : none;
}
/*header .l-header__customBtn {
	margin : 0 10px 0 auto;
	text-align : right;
}*/
header .l-header__customBtn {
	display : flex;
	position : fixed;
	top : 10px;
	left : 10px;
	width : 60px;
	height : 60px;
	border : 1px solid #666;
	border-radius : 4px;
	align-items : center;
	justify-content : center; 
	background : #fff;;
}
i.c-iconBtn__icon {
	font-size : 32px;
}
header .c-iconBtn__icon-menu {
	margin : 0;
	text-align : center;
	font-size : 11px;
	line-height : 16px;
	font-family : sans-serif;
	color : #666;
}
nav#gnav {
	display : none;
}
nav#g2nav {
	display : none;
}
footer#footer {
/*	background : #73B584;*/
		background : #96cacf;
	z-index : 999;
}
#sidenav {
	display : none;
}
#sp_footer {
	position : fixed;
	z-index : 999;
	bottom : 0;
	left : 0;
	right : 0;
	height : 80px;
	display : grid;
	grid-template-columns : repeat(3, 1fr);
	justify-content : center;
	grid-gap : 0;
	align-items : center;
/*	background : #73B584;*/
		background : #96cacf;
	font-family : sans-serif;
}
#sp_footer div {
	text-align : center;
}
#sp_footer a {
	color : #fff;
}
#sp_footer div:not(:nth-child(3n)) {
	border-right: 4px solid #fff;
}
#sp_footer i {
	font-family : fontawesome;
	font-size : 24px;
	color : #fff;
	margin-right : 7px;
}
/*PC*/
@media (min-width:960px) {
body {
	padding-bottom : 0;
}
#header .l-header__inner {
	display : grid;
	grid-template-columns : repeat(4, 1fr);
	justify-content : space-between;
	grid-gap : var(--w-grid-gap);
	align-items : center;
	text-align : center;
	height : 90px;
}
header .c-headLogo {
	display : block;
	height : 60px;
}
header .l-header__tel {
	display : block;
	font-size : 25px;
}
header .l-header__adress {
	display : block;
	font-size : 15px;
}
header .l-header__sns {
	display : block;
	text-align : center;
}
header .l-header__sns a img {
	margin : 0 7px;
	width : 48px;
}

/*ヘッダーナビ*/

nav#gnav {
	display : block;
	text-align : center;
	/*background : #A7ECAE;*/
	background : #73B584;
	height : 42px;
}
nav#gnav ul li {
	display : inline;
	margin : 0 40px;
	font-size : 18px;
	line-height : 42px;
}
nav#gnav ul li a {
	color : #fff;
}
nav#g2nav {
    display: block;
    text-align: center;
    background: #85cdd4;
    height: 80px;

    /* --- 追加：バーの下にうっすら影をつける --- */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    
    /* 影を下のエリア（メインタイトル）にしっかり重ねるための設定 */
    position: relative; 
    z-index: 10; 
}
nav#g2nav ul li {
	display : inline;
	margin : 0 40px;
	color : #fff;
	font-size : 20px;
	line-height : 80px;
}
nav#g2nav ul li a {
    color : #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    font-weight: 600 !important;
    
    /* 追加：右下に3px、ボヤけ0のくっきりした影 */
    /* 数値の意味：右へのズレ 下へのズレ ボヤけ具合 色 */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15); 
    
    /* 滑らかな変化用（ホバー時用） */
    transition: all 0.3s ease;
}

/* ホバー時に影を少し強くする（お好みで追加してください） */
nav#g2nav ul li a:hover {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25);
    opacity: 1 !important; /* 透けないようにする */
}



footer#footer {
	/*background : #73B584;*/
	background : #96cacf;
	z-index : 999;
}
#sidenav {
	display : block;
	z-index : 999;
}
#sidenav a {
	display : block;
	width : 60px;
	position : fixed;
	right : 0;
	background : url(images/sidenav.png);
}
#sidenav a#reserve {
	top : calc(50vh - 150px);
	height : 150px;
}
#sidenav a#access {
	top : calc(50vh - 1px);
	height : 163px;
	background-position : 0 -150px;
}
#sp_footer {
	display : none;
}
}
@media (min-width:1320px){
}

.custom-txt-width{
	font-size:16px;
	text-align:left;
}

.center-box{
width:100%;
}
.width-mm{
			    max-width:100%;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width:960px) {
	.custom-txt-width,
	.w-m{
		line-height:2em;
		    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
	text-align:center;
	}
.width-mm{
			    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
}
	/* ギャラリーの幅を制限して中央寄せにする */

.custom-gallery-width {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.center-box{
	    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.width-720{
		    max-width: 720px;
}
}


/* スマホ時のみロゴを少し小さくする設定 */
@media (max-width: 959px) {
    header .c-headLogo {
        height: 52px !important; /* 60pxから45pxに縮小 */
    }
    header .c-headLogo img {
        height: 100% !important;
        width: auto !important;
    }
}
	    /* アイコンを入れている枠の余白を調整 */
	.swell-block-box-menu__link{
		padding-left:8px!important;
		padding-right:8px!important;
	}
    .swell-block-boxMenu__figure,
	swell-block-box-menu__text{
        padding: 4px !important; /* デフォルトより小さく（お好みで5pxなどに） */
    }

    /* メニュー全体の上下の余白も詰めたい場合 */
    .swell-block-boxMenu__link {
        padding-top: 15px !important;
        padding-bottom: 10px !important;
    }
/* ボックスメニュー　スマホ（600px以下）の時だけアイコンサイズを小さく上書きする */
@media (max-width: 600px) {
    .swell-block-boxMenu__icon {
        /* ここでサイズを強制指定します（5rem = 5em相当） */
        font-size: 5rem !important;
    }

}




/* スマホ（959px以下）のスライドキャプション位置の微調整 */
@media (max-width: 959px) {
.p-mainVisual__textLayer {
        /* 中央寄せを完全に無効化 */
        display: block !important;
        height: auto !important; /* 高さを自動（中身の分だけ）にする */
        top: auto !important;
        
        /* 下からの位置を指定（ここでお好みの高さに調整） */
        bottom: 30px !important; 
        
        /* 横幅の設定 */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        padding: 0 15px !important;
        z-index: 10 !important; /* 前面に出るように念のため追加 */
    }

    /* 文字の後ろに半透明の黒ボックスを作る */
    .p-mainVisual__slideTitle, 
    .p-mainVisual__slideText {
        background-color: rgba(0, 0, 0, 0.5) !important; /* 黒の50%透明 */
        color: #fff !important; /* 文字を白にする */
        display: inline-block !important; /* 文字の長さに背景を合わせる */
        padding: 5px 10px !important; /* ボックス内の余白 */
        text-shadow: none !important; /* 影を消して読みやすくする */
        margin-bottom: 5px !important;
    }

    /* タイトルのフォントサイズ調整 */
    .p-mainVisual__slideTitle {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* 説明文のフォントサイズ調整 */
    .p-mainVisual__slideText {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
}

/* カラムブロックの下余白を一括設定 */

/* スマホ (デフォルト) */
.wp-block-columns {
    margin-bottom: 32px !important;
}

/* タブレット (600px以上) */
@media (min-width: 600px) {
    .wp-block-columns {
        margin-bottom: 48px !important;
    }
}

/* PC (960px以上) */
@media (min-width: 960px) {
    .wp-block-columns {
        margin-bottom: 100px !important;
    }
}

/* --- 見出し2（h2）のスタイル --- */

/* --- 見出し2 (H2)：文字幅に合わせた下線 ＋ 中央揃え --- */

h2.wp-block-heading {
    display: table !important;       /* ① 文字の幅に合わせる */
    margin-left: auto !important;    /* ② 中央寄せ（左） */
    margin-right: auto !important;   /* ③ 中央寄せ（右） */
    
    color: #336 !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 1.2 !important;

    /* 下線の指定 */
    border-bottom: 3px solid #96CACF !important; /* ④ 水色 3px の線 */
    
    /* 余白の調整（線との距離を詰め、上下を空ける） */
   /* padding-top: 80px !important;  */  /* 上の余白 */
    padding-bottom: 10px !important; /* 文字と線の間の隙間 */
    padding-left: 10px !important;   /* 線の端に少しゆとりを持たせる */
    padding-right: 10px !important;
    
    font-size: 1.5rem !important;    /* スマホ版サイズ */
}

/* 2. PC (960px以上) での調整 */
@media (min-width: 960px) {
    h2.wp-block-heading {
        font-size: 2rem !important;  /* PC版は大きく */
        /*padding-top: 100px !important;*/ /* PC版はさらにゆったりと */
    }
}

/* --- H2セクションスタイル：カバー写真上の「文字の後ろに帯」を整える --- */

.post_content h2.is-style-section_ttl {
    /* 1. 共通の「文字幅の下線」設定をリセット */
    display: block !important;          /* table指定を解除 */
    margin: 0 !important;               /* 中央寄せマージンを解除 */
    border-bottom: none !important;     /* 水色の下線を消す */
    width: 100% !important;
    
    /* 2. 見た目の調整 */
    color: #fff !important;             /* 文字色を白に */
    padding: 10px 0 !important;         /* 上下の大きな余白(80px等)を10pxに上書き */
    position: relative;
    background: transparent !important;
    z-index: 1;
}

/* 文字の後ろの帯（擬似要素） */
.post_content h2.is-style-section_ttl::before {
    content: "";
    position: absolute;
    top: 65%;                           /* 帯の位置を少し下げて微調整 */
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 14px;                       /* 帯の太さを少し太めに */
    background-color: #DAECED !important; /* 指定の帯の色 */
    z-index: -1;
    opacity: 0.7;                       /* 帯を少し透かすと背景写真と馴染みます */
}



/* --- 見出し3（h3）のスタイル --- */

/* 1. スマホ・タブレット（共通の基本設定） */
h3.wp-block-heading {
    /* システム標準のゴシック体を指定（Mac/Win/iPhone/Android対応） */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    
    font-size: 1.1rem; /* スマホサイズ：h2より少し小さめ、または同等に調整 */
    font-weight: 700;
    color: #444;
    margin-bottom: 1.5rem;
    padding: 16px 0;
    border-bottom: 1px solid #96CACF !important;
}


/* --- 見出し4（h4）のスタイル --- */

/* 1. スマホ・タブレット（共通の基本設定） */

h4.wp-block-heading {
    /* システム標準のゴシック体を指定（Mac/Win/iPhone/Android対応） */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    
    font-size: 1rem; /* スマホサイズ：h2より少し小さめ、または同等に調整 */
    font-weight: 700;
    color: #333;
    margin: 1.5rem 0;
    padding:0.2em 0;
background:#E4E4E4;
text-align:center;
}




/* 2. PC (960px以上) での変更点 */
@media (min-width: 960px) {
    h34.wp-block-heading {
        font-size: 1rem; /* PCで少し大きくする */
        margin-bottom: 2rem;
    }
}

/* --- YouTube動画の中央配置カスタム --- */

/* 1. スマホ (デフォルト) */
.youtube-center {
    width: 100% !important; /* スマホでは左右いっぱい */
    max-width: 100% !important;
    margin-top: 40px !important; /* 上下のマージン */
    margin-bottom: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. タブレット (600px以上) */
@media (min-width: 600px) {
    .youtube-center {
        width: 80% !important; /* 少し幅を絞る */
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }
}

/* 3. PC (960px以上) */
@media (min-width: 960px) {
    .youtube-center {
        width: 60% !important; /* 全体の60%にする */
        margin-top: 100px !important; /* 大きなマージン */
        margin-bottom: 100px !important;
    }
}

/* --- SWELLボタン (btn_bold) 完成版 --- */

/* 1. ボーダーを太くする */
.btn_bold.is-style-btn_line a {
    border-width: 2px !important;
}

/* 2. スマホ・基本設定（モバイルファースト） */
.btn_bold {
    width: 100% !important; /* 外枠は常に100%広げて中央配置の土台にする */
    display: flex !important;
    justify-content: center !important;
    margin: 32px auto !important; /* 前後の余白 */
}

.btn_bold a {
    /* ボタン本体の幅（スマホ） */
    width: 90% !important; 
    max-width: 100% !important;
    
    /* フォント設定 */
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    font-weight: 700;
	padding:24px 0;
}

/* 3. タブレット (600px以上) */
@media (min-width: 600px) {
    .btn_bold a {
        width: 80% !important; /* ボタン本体の幅を80%に */
        font-size: 1.1rem;
    }
}

/* 4. PC (960px以上) */
@media (min-width: 960px) {
    .btn_bold a {
        width: 50% !important; /* ★ここでボタン本体がPCで50%になります */
        font-size: 1.2rem;
    }
}


/* 1. スマホ (デフォルト) */

.sub_menu .swell-block-box-menu__inner .swell-block-box-menu__item {
    border: 2px solid #97CACE!important;
}

/* 3. タブレット (600px以上) */
@media (min-width: 600px) {
}
/* 4. PC (960px以上) */
@media (min-width: 960px) {
}



/* 1. サイト全体の画像・カバーに角丸と影をつける */
.wp-block-image img, 
.wp-block-gallery img, 
.wp-block-cover {
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden;
}

/* 2. 【完全版】no-styleがついた要素は、装飾も「大きな余白」もすべてリセットする */
.no-style, 
.no-style.wp-block-columns, /* カラムの大きな余白をリセット */
.no-style.wp-block-column, 
.no-style img, 
.no-style .wp-block-image img, 
.no-style .wp-block-cover,
.no-style.wp-block-heading,
.no-style.wp-block-heading::before,
.no-style.wp-block-heading::after {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    
    /* ★ここがポイント：以前設定した 5rem(80px) の余白を 0 に上書きします */
    margin-bottom: 0 !important; 
    margin-top: 0 !important;
    
    content: none !important;
    overflow: visible !important;
}

/* --- MOREボタン (.is-style-more_btn) の共通スタイル --- */

/* 1. 基本設定（スマホ・タブレット共通） */
.is-style-more_btn a {
    background: transparent !important; /* 背景を透明に */
    border: 1px solid #73B584 !important; /* 薄いグリーンの細い線（1px） */
    color: #444 !important; /* 濃いグレーの文字 */
    border-radius: 40px !important; /* SWELL標準の丸みを維持 */
    font-weight: 700 !important;
    transition: all 0.3s ease; /* ホバー時の動きを滑らかに */
    width: 90% !important; /* スマホでは広めに */
    max-width: 320px; /* 広がりすぎないよう上限を設定 */
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center;
		    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
}

/* 右側の矢印アイコンの色もグリーンに合わせる */
.is-style-more_btn a::after {
    color: #73B584 !important;
}

/* 2. ホバー時（マウスを乗せた時）の動き */
.is-style-more_btn a:hover {
    background: #f1f8f1 !important; /* ほんのり薄い緑を背景に敷く */
    border-color: #73B584 !important;
    color: #333 !important;
    opacity: 1 !important; /* 透けないようにする */
}

/* 3. PC (960px以上) での調整 */
@media (min-width: 960px) {
    .is-style-more_btn a {
        width: auto !important; /* PCでは文字の長さに合わせる */
        min-width: 400px; /* 短すぎないよう最小幅を設定 */
        padding: 12px 40px !important;

    }
}

/* --- 記事一覧の抜粋（本文要約）の調整 --- */

/* 1. 全デバイス共通設定 */
.p-postList__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* ★ここで表示したい「行数」を指定（例：3行） */
    overflow: hidden;
    line-height: 1.6;
    color: #666; /* 少し薄めのグレーにしてタイトルを引き立たせる */
    font-size: 0.9rem; /* 本文より一回り小さく */
}

/* 2. スマホ (デフォルト) */
@media (max-width: 599px) {
    .p-postList__excerpt {
        -webkit-line-clamp: 2; /* スマホでは画面が狭いので「2行」に絞る */
        font-size: 0.85rem;
    }
}

/* 3. PC (960px以上) */
@media (min-width: 960px) {
    .p-postList__excerpt {
        -webkit-line-clamp: 3; /* PCでは余裕があるので「3行」見せる */
    }
}

/* --- 記事一覧：タイトルのカスタマイズ --- */

/* 1. 基本設定（スマホ・タブレット共通） */
.p-postList__title {
    /* フォント：ゴシック体・太字を指定 */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    font-weight:600 !important;
    color: #52a9b2 !important; /* ★ */

    /* 上下のボーダー：サイトカラーのグリーン（#73B584） */
    border-top: 1px solid #73B584 !important;
    border-bottom: 1px solid #73B584 !important;

    /* 余白と表示形式の調整 */
    padding: 8px 0 !important;
    margin-bottom: 12px !important;
    display: inline-block !important; /* 文字の長さに合わせてボーダーを引く（横いっぱいにしたい場合は block に変更） */
    line-height: 1.4 !important;
}

/* スマホでのサイズ指定 */
.p-postList__title {
    font-size: 0.95rem !important; /* 現状より一回り大きく */
}

/* 2. PC (960px以上) での調整 */
@media (min-width: 960px) {
    .p-postList__title {
        font-size: 1.05rem !important; /* PCではさらに存在感を出す */
        padding: 10px 0 !important;
        margin-bottom: 15px !important;
    }
}

/* --- サイドバー：記事タイトルをスッキリさせる --- */

.l-sidebar .p-postList__title {
    /* 1. 文字を小さく、色を落ち着いたグレーに */
    font-size: 0.85rem !important; 
    color: #444 !important; /* 濃いグレー */
    font-weight: 600 !important;

    /* 2. ボーダーを極薄にして主張を抑える */
    border-top: 1px solid #eee !important; 
    border-bottom: 1px solid #eee !important;

    /* 3. パディングをギュッと狭くしてコンパクトに */
    padding: 3px 0 !important; 
    margin-bottom: 8px !important;

    /* 4. 矢印アイコンなど余計な装飾があればリセット（念のため） */
    display: block !important; /* サイドバーでは横幅いっぱいに線を引くのが一般的 */
}


/* --- 投稿ページ：タイトルエリアの装飾 --- */

/* 1. 基本設定（スマホ・タブレット共通） */
.single .p-articleHead {
    /* 上下のボーダー：サイトカラーのグリーン */
    border-top: 1px solid #73B584 !important;
    border-bottom: 1px solid #73B584 !important;

    /* 内側の余白：上下にゆとりを持たせる */
    padding: 20px 0 !important;

    /* 外側の余白：本文との距離 */
    margin-top: 20px !important;
    margin-bottom: 30px !important;

    /* 背景を少しだけ明るくしたい場合は以下を有効に（お好みで） */
    /* background-color: #f9fdf9; */
}

/* タイトル自体の調整 */
.single .c-postTitle__ttl {
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    font-size: 1.3rem !important; /* スマホでのサイズ */
}

/* カテゴリー・日付エリアの調整 */
.single .p-articleMetas {
    margin-top: 5px !important;
}

/* 2. PC (960px以上) での調整 */
@media (min-width: 960px) {
    .single .p-articleHead {
        padding: 30px 0 !important; /* PCではさらにゆったりと */
        margin-bottom: 45px !important;
    }

    .single .c-postTitle__ttl {
        font-size: 1.8rem !important; /* PCで一回り大きく */
    }
}


/* --- 投稿ページ：フッターエリアの調整 --- */

/* 1. 記事の終わりを示すグレーの線（濃くする） */
.p-articleFoot {
    border-top: 2px solid #ccc !important; /* 1pxから2pxへ、色も少し濃いグレーに */
    margin-top: 60px !important; /* 本文との間にしっかり余白を取る */
    padding-top: 30px !important;
}

/* 2. 下部のカテゴリー・タグバッジを非表示にする */
.p-articleFoot .p-articleMetas {
    display: none !important;
}


/* 1. 前後の記事ナビ（クラス名を .p-pnLinks に修正） */
.p-pnLinks,
.p-pnLinks *,
.p-pnLinks__title {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    font-weight: 400 !important;
}

/* ナビタイトルの微調整 */
.p-pnLinks__title {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #444 !important;
}

/* 2. サイト内の主な「リンク・ボタン」要素をゴシックにする */
/* 記事一覧タイトル、ウィジェット内のリンク、ボタン、カテゴリー表示など */
.p-postList__title,
.c-widget__title,
.p-articleMetas,
.c-btn,
.p-breadcrumb, /* パンくずリスト */
.p-footerMenu /* フッターメニュー */ {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
}

/* 3. 本文中のリンクもゴシックにする（もしお好みであれば追加してください） */
/* .post_content a {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
} */

/* 4. PCサイズでのナビタイトル調整 */
@media (min-width: 960px) {
    .p-pnLinks__title {
        font-size: 0.9rem !important;
    }
}

/* --- 固定ページ：H1タイトルの調整 --- */

/* 1. 基本設定（スマホ・タブレット共通） */
.c-pageTitle {
    text-align: center !important; /* スマホ・PC共に中央揃え */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    
    /* スマホでのフォントサイズ（現状より少し大きく調整） */
    font-size: 1.2rem !important; 
}

/* 2. PC (960px以上) での調整 */
@media (min-width: 960px) {
    .c-pageTitle {
        /* PCでさらに大きく、存在感を出す */
        font-size: 2.5rem !important; 
        
        /* タイトルの上下の余白を少し広げてバランスを取る場合 */
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* --- ボックスメニュー：ホバーカスタマイズ --- */

/* 1. 基本設定（動きを滑らかにする） */
.swell-block-boxMenu__item a {
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* 2. マウスホバー時のアクション */
.swell-block-boxMenu__item a:hover {
    /* 背景をブランドカラーに合わせた薄いグリーンに */
    background-color: #f1f8f1 !important; 
    
    /* 枠線も少し濃いグリーンにして強調 */
    border-color: #73B584 !important;
    
    /* SWELL標準の「少し透明になる」動きを打ち消して色をハッキリ見せる */
    opacity: 1 !important;
}

/* 3. ボックス内の文字やアイコンが浮かないよう調整 */
.swell-block-boxMenu__item a:hover .swell-block-boxMenu__label,
.swell-block-boxMenu__item a:hover .swell-block-boxMenu__icon {
    color: #333 !important; /* 文字色は落ち着いたグレーのまま維持 */
}

/* --- ステップ部分カスタマイズ（no-styleとの競合を解消） --- */

/* 「no-style」と「step_column」の両方がついている要素への指定 */
.step_column.no-style {
    background: #FFF8EA !important; /* 背景の薄い黄色を復活 */
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px dotted #336 !important; /* 下の点線を復活 */
    margin-bottom: 2rem !important; /* 余白は狭い設定を維持 */
    
    /* no-styleの基本方針に従い、影や角丸はなしのままにします */
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* PCサイズでの余白調整も同様に指定 */
@media (min-width: 960px) {
    .step_column.no-style {
        margin-bottom: 2.5rem !important;
    }
}

/* --- ホームページ：新着ブログ一覧のレイアウト修正 --- */

/* 1. 【全体】リストの幅を絞って中央寄せ（赤枠の範囲を調整） */
.home .p-postList {
    max-width: 54rem !important; /* ① 全体の幅を約860pxに絞る */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 5rem !important;
}

/* 2. PC版（960px以上）の個別レイアウト調整 */
@media (min-width: 960px) {

    /* リストアイテムの構造を整理 */
    .home .p-postList__item > a {
        display: flex !important;
        align-items: flex-start !important; /* 画像とテキストの頭を揃えて読みやすく */
    }

    /* サムネイルエリア */
    .home .p-postList__thumb {
        width: 13rem !important;    /* ② サムネイルを10remから13rem（約208px）に拡大 */
        flex: 0 0 13rem !important; /* 幅を完全に固定 */
        margin-right: 0 !important;
    }

    /* テキストエリア（body） */
    .home .p-postList__body {
        flex: 1 !important;
        min-width: 0 !important;    /* ④ これが重要！本文が右にはみ出すのを防ぎます */
        padding-left: 2rem !important; /* 画像とテキストの間に余裕を持たせる */
    }

    /* タイトルの罫線調整 */
    .home .p-postList__title {
        display: block !important;  /* ③ タイトルが短くても右端までエリアを広げる */
        width: 100% !important;
        border-bottom: 1px solid #eee !important; /* 下に罫線を追加（色はお好みで） */
        padding-bottom: 0.6rem !important;
        margin-bottom: 0.8rem !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
    }

    /* 本文（抜粋文）の調整 */
    .home .p-postList__excerpt {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: #666 !important;
        /* 長すぎる場合に2行で収める（はみ出し防止の予備策） */
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important; 
        overflow: hidden !important;
    }

    /* 日付・メタ情報 */
    .home .p-postList__meta {
        font-size: 0.8rem !important;
        margin-top: 0.5rem !important;
    }
}

/* スマホメニュー：ヘッダー（ピンク）を水色に変更 */
.c-widget__title.-spmenu {
    background: #85cdd4 !important; /* ナビバーと同じ水色 */
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
}

/* メニュー全体の背景色 */
.p-spMenu__inner {
    background-color: #fcfdfd !important; /* 真っ白より少し柔らかな色 */
}

/* メニュー項目（リンク）の調整 */
.c-spnav.c-listMenu > li > a {
    color: #336 !important; /* サイト共通の濃紺 */
    font-weight: 500 !important;
    padding: 1.2rem 1rem !important;
    border-bottom: 1px solid #eef4f4 !important; /* 薄い水色の線 */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* --- スマホメニュー：右側の矢印をCSSで描画 --- */
.c-spnav.c-listMenu > li > a::after {
    content: ""; /* 文字ではなく、空の要素を作る */
    display: block;
    width: 8px;   /* 矢印のサイズ */
    height: 8px;  /* 矢印のサイズ */
    border-top: 2px solid #96CACF;  /* サイト共通の水色 */
    border-right: 2px solid #96CACF;
    transform: rotate(45deg);       /* 45度回転させて「>」の形にする */
    margin-right: 5px;              /* 右端の余白調整 */
}

/* メニュー項目自体の微調整（矢印との位置関係） */
.c-spnav.c-listMenu > li > a {
    padding-right: 1.5rem !important; /* 矢印が右端に寄りすぎないように */
}

/* スマホメニュー：左側の山マーク（>）を非表示にする */
.c-spnav.c-listMenu > li > a::before {
    display: none !important;
}

.u-fz-16 {
    font-size: 28px!important;
}



/* --- Googleマップ：モバイルファースト設計 --- */

/* 1. スマホ版（ベーススタイル） */
.google-map-container {
    width: 100% !important;
    padding: 0 15px;                /* スマホで画面端にピッタリくっつかないよう余白を追加 */
    margin-left: auto !important;
    margin-right: auto !important;  /* 中央寄せ */
    margin-top: 2.5rem !important;  /* スマホ版の上の余白 */
    margin-bottom: 3.5rem !important; /* スマホ版の下の余白 */
}

.google-map-container iframe {
    width: 100% !important;
    height: 300px !important;       /* スマホ版の高さ */
    border-radius: 8px;             /* 角丸 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ほんのり影 */
}

/* 2. PC版 (960px以上) */
@media (min-width: 960px) {
    .google-map-container {
        max-width: 900px;           /* 指定の900pxに制限 */
        padding: 0;                 /* PCでは横幅が固定されるのでpaddingは不要 */
        margin-top: 4rem !important; /* PC版：さらにゆったりした余白 */
        margin-bottom: 5rem !important;
    }

    .google-map-container iframe {
        height: 450px !important;   /* PC版：大きな地図で表示 */
    }
}

/* --- 会社概要：information専用スタイル（位置調整版） --- */

/* 1. スマホ版 */
.information.swell-block-dl {
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 3rem !important;
}

.information.swell-block-dl .swell-block-dl__dt {
    color: #96CACF !important;
    font-weight: 700 !important;
    font-size: 0.95rem;
    padding-bottom: 5px !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.information.swell-block-dl .swell-block-dl__dt::after {
    content: none !important;
}

/* DD内の余計な余白（pタグなど）を消して整列 */
.information.swell-block-dl .swell-block-dl__dd {
    margin-left: 0 !important;
    margin-bottom: 30px !important; 
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    width: 100% !important;
}

/* DDの中に入ってしまうpタグのマージンをリセット */
.information.swell-block-dl .swell-block-dl__dd p {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. PC版（960px以上） */
@media (min-width: 960px) {
    .information.swell-block-dl {
        max-width: 850px;
        margin: 40px auto !important;
        border-top: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }

    .information.swell-block-dl .swell-block-dl__dt,
    .information.swell-block-dl .swell-block-dl__dd {
        display: flex !important;
        align-items: center !important; /* 上下の中央に揃える */
        min-height: 70px;               /* 左右の高さがズレないよう最小高さを確保 */
        border-top: 1px solid #ddd !important;
        margin-bottom: 0 !important;
    }

    .information.swell-block-dl .swell-block-dl__dt {
        border-bottom: none !important;
        width: 28% !important;
        padding: 15px !important;
    }

    .information.swell-block-dl .swell-block-dl__dd {
        width: 72% !important;
        padding: 15px !important;
    }

    /* 最初の項目の上線を除去 */
    .information.swell-block-dl .swell-block-dl__dt:first-of-type,
    .information.swell-block-dl .swell-block-dl__dd:first-of-type {
        border-top: none !important;
    }
}


/* -------------------------------------------
 * カスタマイズ予約ボタン
 * ------------------------------------------- */

/* ボタン全体の基本設定（スマホ版をベースに記述） */
.custom-reserve-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    padding: 12px 24px;
    width: fit-content;
    max-width: 100%;
    
    /* グラデーション設定 */
    background: #f1e767;
    background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
    background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
    
    /* 見た目の装飾 */
    color: #212529 !important; /* 文字色 */
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    border-radius: 50px; /* 優しい角丸 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 薄い影 */
    transition: all 0.3s ease;
}

/* アイコンのサイズと余白 */
.custom-reserve-btn .btn-icon {
    width: 24px;
    height: auto;
    margin-right: 8px;
}

/* テキストの調整 */
.custom-reserve-btn .btn-text {
    line-height: 1.4;
    text-align: center;
}

/* スマホ用の改行設定 */
.sp-only {
    display: block;
}

/* ホバー（マウスを乗せた時）の動作 */
.custom-reserve-btn:hover {
    /* グラデーションを反転させて膨らみを強調 */
    background: -webkit-linear-gradient(bottom, #f1e767 0%, #feb645 100%);
    background: linear-gradient(to top, #f1e767 0%, #feb645 100%);
    
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* 影を少し強く */
    transform: translateY(-2px); /* 少し浮く動き */
}

/* -------------------------------------------
 * PC版の設定（960px以上）
 * ------------------------------------------- */
@media screen and (min-width: 960px) {
    .custom-reserve-btn {
        padding: 22px 60px; /* サイズを大きく（スマホの約1.5倍〜） */
        font-size: 20px;    /* 文字も大きく */
        border-radius: 60px;
    }

    .custom-reserve-btn .btn-icon {
        width: 36px; /* アイコンも拡大 */
        margin-right: 15px;
    }

    .sp-only {
        display: none; /* PCでは改行しない */
    }
}