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

/************************************
** 基本設定（PC表示：1024px以上）
************************************/
body{background:#ffffff url(images/bg-main.png) center top no-repeat;}


.wrap {
width: 100%;
margin: 0 auto;
}

#content{ 
	margin-top:-5px;
	margin-bottom: 0;
}
#content-in{margin:0 auto;}
#content::after{ display:none;}

#main{ padding:0;margin-bottom:0; border:none;}

/*　余白を設定する　*/
/* HOME */
.home .page .inner,
.page-id-237 .page .inner{
	max-width:1100px;
	margin:0 auto;
	padding:0 29px
}

/* 固定ﾍﾟｰｼﾞ */
.page:not(.home, .page-id-237) #main{
	width:1100px;
	margin:0 auto;
	padding: 10px 29px 0 29px
}


/*投稿日を非表示にする*/
.page .post-date {
  display: none;
}

/*更新日を非表示にする*/
.page .post-update{
  display: none;
}

/*snsを非表示にする*/
.page .sns-follow,
.page .author-info{
    display: none;
}

/* PC表示時の画像設定 */
.pc-img { display: inline !important;}
.tab-img { display: none !important;}
.tab-smt { display: none !important;}
.smt-img { display: none !important;}

/************************************
** clearfix
************************************/
.clearfix {
  *zoom: 1; /* IE6-7対応 */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Cocoonテーマ用の追加 */
.cf::after {
  content: "";
  display: table;
  clear: both;
}

/************************************
** margin / padding
************************************/
.mt10{ margin-top:10px;}
.mt30{ margin-top:30px!important;}
.mt50{ margin-top:50px;}
.mt100{ margin-top:100px!important;}
.mt-100{ margin-top:-100px!important;}


.mb0{ margin-bottom:0px!important;}
.mb15{ margin-bottom:15px;}
.mb30{ margin-bottom:30px!important;}
.mb40{ margin-bottom:40px!important;}
.mb50{ margin-bottom:50px!important;}
.mb100{ margin-bottom:100px!important;}


.mr0{margin-right:0!important;}
.mr10{margin-right:10px!important;}
.mr40{margin-right:40px!important;}

.ml80{margin-left:80px!important;}

.pt10{ padding-top:10px;}
.pt100{ padding-top:100px;}

.pb30{ padding-bottom:30px;}

/************************************
** Font
************************************/
.fss{font-size:60%;}
.fs{font-size:80%!important;}
.fm{font-size:120%;}
.fl{font-size:140%;}
.fll{font-size:180%;}
.fbig{ font-size:250%;}

.bold{ font-weight:bold; }
.uline{ text-decoration:underline;}
.line{ border-bottom:1px solid #a2a2a2; padding-bottom:7px;}
.marker-blue{
  background: linear-gradient(transparent 60%, #c2e5fb 60%);
  font-weight: bold;
  display: inline;
}
.marker-y {
    background: linear-gradient(transparent 30%, #fff871 30%, #fff871 85%, transparent 85%);
    display: inline;
    padding: 0 2px;
}

.marker {
    background: linear-gradient(transparent calc(100% - 20px), #fff35c 20px);
}	



.underline {
  display: inline-block; /* 必須 */
  padding-bottom: 10px;  /* 文字と線の間に余白 */
  border-bottom: 2px solid #ffffff; /* アンダーラインの代わり */
}
.border-dotte{ border-bottom:4px dotted #c6c2b2; padding-bottom:5px;}


.red{ color:#e02051;}
.white{ color:#ffffff!important;}
.green{ color:#009b4a;}
.orange{color:#f18200!important;}
.blue{color: #154e9f;}
.brown{color:#522e16;}
.yellow{color:#ffe55f;}

.mincho{font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}

.center{ text-align:center!important;}
.right{ text-align:right!important;}
.left{ text-align:left!important;}


/* スマホの時だけ改行させるクラス */
.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}

/************************************
** タイトルスタイル
************************************/
h1.entry-title,
h1.archive-title{
  position: relative;
	text-align:center;
	font-size:1.6em;
	font-weight:bold;
	margin-bottom:80px;
}
h1.entry-title::before,
h1.archive-title::before{
  content: '';
  width: 60px;
  height: 5px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
bottom: -20px;
  background-color: #009b4a;
	border-radius:10px;
}
.archive-title span { display:none;}


.article h2 {
  background-color: transparent!important;
}

.article h2.ti02 {
background-color:#009b4a!important;
	color: white;
  text-align: center;
  font-weight: bold;
  font-size: 2.5vw; /* 画面幅に応じて文字サイズ可変 */
  padding: 1em;
  position: relative;
  box-sizing: border-box;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 影を追加 */
}

/* 黄色強調部分 */
.article h2.ti02 span {
  color: #ffeb3b; /* 黄色 */
	font-size:1.4em;
}

/* 下の三角 */
.article h2.ti02::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
border-top: 15px solid #009b4a; /* 三角は左側の薄い青に合わせる */
}

/* スマホなど小さい画面では文字を大きく */
@media (max-width: 600px) {
h1.entry-title,
	h1.archive-title{padding-top:20px;margin-bottom:60px;}	
	
.article h2.ti02 {
    font-size: 5vw;
    padding: 0.8em;
  }
}


.article h3{ border:none;padding:0;}

.ti03-wrap {
  text-align: center;
}


.article h2.ti03 {
border-bottom:2px solid #78cda0!important;
padding-bottom:10px;
display:inline-block;
	font-size:1.6em;
}

/************************************
** ヘッダー基本設定
************************************/
/* ヘッダー全体の設定 */
header { 
    margin: 0 auto 0 auto;
}

/* ヘッダー内側コンテナ（幅制限） */
#header-in { 
    max-width: 1200px; 
    margin: 0 auto;
}

/* ヘッダーコンテナ（背景・高さ・配置） */
.header-container { 
    margin: 0 auto;
    background-color: transparent;
    position: relative;
height:85px;}



/* ロゴ配置・スタイル */
.logo { 
    position: absolute;
    top: 10px;
    text-align: left !important;
}

.logo img {
    max-height: 70px !important;
} 

/* ヘッダーナビゲーション配置 */
.header-container-in .navi-in { 
    position: absolute;
    right: 0px; 
top: 15px; 
}

/* ヘッダーメニューラベルスタイル */
.header-container-in.hlt-top-menu .navi-in .item-label { 
    font-size: 0.8em !important; 
    text-align: center;
	font-weight:bold;
	color:#222;
}

/************************************
** ヘッダーメニューの基本構造
************************************/
/* ヘッダーナビを透明背景・青いシャドー付きに */

#menu-h-menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* メニュー項目の基本スタイル */
#menu-h-menu li {
    width: 120px; 
    height: 50px;
    text-align: center;
    line-height: 2 !important; 
padding:15px 5px 0 5px;
    position: relative;
	    display: flex;
    align-items: center;
	justify-content: center; /* 水平方向の中央揃え */

}

/* 区切り線をliの右側に追加 */
#menu-h-menu li:not(:nth-last-child(1)):not(:nth-last-child(2))::after {
/*    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
	height: 30px; 
    border-right: 1px solid #ccc; /* 区切り線の色 */
}

/* メニューリンクのスタイル */
#menu-h-menu li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 0;
    font-size: 16px !important;
    position: relative;
    transition: color 0.3s ease;
    background-color: transparent;
	width: 100%; /* 親要素の幅いっぱいに */
    height: 100%; /* 親要素の高さいっぱいに */
}


/* サブキャプションの色設定 */
.sub-caption { 
    color: #00a051;
}

/************************************
** 特別なヘッダーメニュー項目（CTA等）
************************************/
/* オンライン予約（menu-item-15） */
#menu-h-menu #menu-item-15{ width:230px;margin-right:10px; padding:0px 0 0 0;}
#menu-h-menu #menu-item-15 a {background-image: url('images/bt-soudan.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px; /* テキストを非表示 */
    overflow: hidden;
    display: block;
    width: 230px; 
    height: 60px;
	min-height:100%;
}

/************************************
** 固定ヘッダー
************************************/
/* 固定ヘッダーの基本設定 */
.fixed-header { 
    height: 85px; 
    background-color: #ffffff !important;
    width: 100% !important;
}

/* 固定ヘッダー内のメニュー項目幅調整 */
.fixed-header #menu-h-menu li {
    width: 120px;
}


/* 固定ヘッダーのナビゲーション背景 */
.fixed-header #nav {
    background-color: #ffffff; 
    padding-bottom: 0 !important;
}

/* 固定ヘッダー内のナビゲーション配置 */
.fixed-header #navi .navi-in {
    position: absolute;
    right: 0;
    top: 15px;
	box-shadow: none;
    border: none;
}

/* 固定ヘッダー内のロゴ配置調整 */
.fixed-header .logo { 
    position: absolute;
    top: 10px;
    left: 0; 
}

/* 固定ヘッダー内のロゴサイズ調整 */
.fixed-header .cl-slim .logo-header img { 
    max-height: 60px;
}

/* 固定ヘッダー内のメニューリンク色調整 */
.fixed-header #menu-h-menu .navi-in a {
    color: #012351; 
    background-color: transparent;
}

/* 固定ヘッダー内のメニューホバー効果 */
.fixed-header #menu-h-menu li a:hover {
    opacity: 0.6;
} 

/* 固定ヘッダーのサブメニュー非表示 */
.fixed-header .h-submenu { 
    display: none;
}

/* 固定ヘッダーのサブメニュー画像調整 */
.fixed-header .h-submenu img.pc-img { 
    max-width: 95%;
} 

/* 固定ヘッダーのサブメニュー項目調整 */
.fixed-header .header-container-in.hlt-top-menu .h-submenu li { 
    padding-top: 10px;
}

.fixed-header .header-container-in.hlt-top-menu .h-submenu li::marker {
    display: none;
}

/* 固定ヘッダー内のメニューラベルスタイル */
.fixed-header .header-container-in.hlt-top-menu .navi-in .item-label { 
    font-size: 11px; 
    color: #222; 
    font-weight: bold;
}

/************************************
** footer
************************************/
.footer{ margin-top:0;}
#navi-footer-in li a{ background-color:none;}

/************************************
** HOME
************************************/
.home .article{ margin-bottom:0;}
.home .entry-content{ max-width:100%;}

.home section{ padding:0px 0 30px 0;}

.home #content{
	max-width:100%;
	margin:0 auto;
	padding:0;
}

/* main */
.home #main-image{ 
	min-height:450px;
}	

.home #main-image p{
    margin: 0 auto;
	max-width:1200px;
	text-align:center;
}

/* トップページはタイトル非表示とする */
.home .entry-title{ display: none;}
.home .entry-content,
.home .entry-title{ margin-top:0!important;}

/* sec00 */
.sec00 {
  /* ベース色とライン色（必要ならここだけ変えればOK） */
  --base: #dee551;
  --line: #d8df30;

  /* ストライプ角度と太さ */
  --angle: 45deg;     /* 右上がり（画像同様） */
  --line-w: 2px;      /* 線の太さ */
  --gap-w: 10px;      /* 線～線の間隔（見た目に合わせて調整） */

  background-color: var(--base); /* フォールバック */
  background-image: repeating-linear-gradient(
    var(--angle),
    var(--line) 0 var(--line-w),
    transparent var(--line-w) calc(var(--line-w) + var(--gap-w))
  );
min-height:190px;
}
.home section.sec00{ margin-bottom:0!important; padding-top:12px;padding-bottom:10px;}

/* -------------------------
   スマホ（768px以下）
------------------------- */
@media screen and (max-width: 768px) {
	.sec00 {min-height:170px;}	
}


/* sec01 */
.sec01{ background-color:#fcfaf8;}

/* sec02 */
.sec02-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border: 4px solid #009944;
            border-radius: 30px;
            padding: 50px;
            font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
            line-height: 1.8;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        }

        .sec02-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 40px;
            border-bottom: 3px solid #009944;
            padding-bottom: 20px;
			padding-left:30px;
        }

        .sec02-header-label {
            background-color: #009944;
            color: white;
            padding: 20px 30px;
            font-size: 32px;
            font-weight: bold;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sec02-header-title {
            font-size: 28px;
            font-weight: bold;
            color: #009944;
            line-height: 1.5;
        }

        .sec02-content-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 40px;
        }

    .sec02-before-section,
        .sec02-after-section {
            position: relative;
            text-align: center;
padding-top:20px;
        }

        .sec02-section-badge {
            display: inline-block;
            padding: 5px 60px;
            border-radius: 30px;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 30px;
            position: relative;
        }

        .sec02-section-badge::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }

        .sec02-before-section .sec02-section-badge {
            background-color: #d0d0d0;
            color: #333;
        }

        .sec02-before-section .sec02-section-badge::after {
            border-top: 10px solid #d0d0d0;
        }

        .sec02-after-section {
            background-color: #fffacd;
            border-radius: 20px;
            padding: 20px 30px 30px 30px;
        }

        .sec02-after-section .sec02-section-badge {
            background-color: #f5a623;
            color: white;
        }

        .sec02-after-section .sec02-section-badge::after {
            border-top: 10px solid #f5a623;
        }

        .sec02-text-content {
            font-size: 16px;
            line-height: 2;
            margin-bottom: 30px;
text-align:left;
        }

        .sec02-highlight-green {
            color: #009944;
            font-weight: bold;
        }

        .sec02-illustration {
            text-align: center;
            margin-top: 20px;
        }

        .sec02-illustration img {
            max-width: 100%;
            height: auto;
        }

        /* レスポンシブ対応 */
        @media (max-width: 968px) {
            .sec02-container {
                padding: 30px 20px;
            }

            .sec02-header {
                flex-direction: column;
                align-items: flex-start;
				padding-left:0;
            }

            .sec02-header-label {
                font-size: 24px;
                padding: 15px 25px;
            }

            .sec02-header-title {
                font-size: 22px;
            }

            .sec02-content-wrapper {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .sec02-text-content {
                font-size: 15px;
            }

            .sec02-section-badge {
                font-size: 20px;
                padding: 10px 40px;
            }
        }

        @media (max-width: 480px) {
            .sec02-container {
                padding: 20px 15px;
                border-width: 3px;
            }

            .sec02-header-label {
                font-size: 20px;
                padding: 12px 20px;
            }

            .sec02-header-title {
                font-size: 18px;
            }

            .sec02-text-content {
                font-size: 14px;
                line-height: 1.8;
            }

            .sec02-section-badge {
                font-size: 18px;
                padding: 8px 30px;
            }

            .sec02-after-section {
                padding: 20px;
            }
}

/** sec03 **/
.sec03 {
            background: linear-gradient(180deg, #009b4a 0%, #009b4a 65%, #ffffff 65%, #ffffff 100%);
            padding: 60px 20px 80px!important;
            font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
        }

        .sec03-inner {
            max-width: 1200px;
            margin: 0 auto;
        }

        .sec03-bubble {
            background-color: #f4e96d;
            border-radius: 50px;
            padding: 20px 50px;
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 40px;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        .sec03-bubble::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid #f4e96d;
        }

        .sec03-title {
            text-align: center;
            color: white;
            margin-bottom: 15px;
        }

        .sec03-title h2 {
            font-size: 32px;
            font-weight: bold;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .sec03-subtitle {
            text-align: center;
            color: #f4e96d;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .sec03-note {
            text-align: center;
            color: white;
            font-size: 14px;
            margin-bottom: 50px;
        }

        .sec03-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .sec03-card {
            background: white;
            border-radius: 20px;
            padding: 40px 30px 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            min-height: 500px;
        }

        .sec03-card-header {
            text-align: center;
            padding: 5px 50px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 30px;
            display: inline-block;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .sec03-card.male .sec03-card-header {
            background-color: #1e88e5;
        }

        .sec03-card.female .sec03-card-header {
            background-color: #ef6c5d;
        }

        .sec03-ranking {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
        }

        .sec03-ranking-item {
            display: flex;
            align-items: center;
            margin-bottom: 25px!important;
            gap: 15px;
			font-size:14px;
        }

        .sec03-ranking-number {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
        }

        .sec03-ranking-item:nth-child(1) .sec03-ranking-number {
            border-color: #009b4a;
            color: #009b4a;
        }
.sec03-ranking-item:nth-child(1){color: #009b4a;}

        .sec03-ranking-item:nth-child(2) .sec03-ranking-number,
        .sec03-ranking-item:nth-child(3) .sec03-ranking-number {
            border-color: #ff9800;
            color: #ff9800;
}

.sec03-ranking-item:nth-child(2),
.sec03-ranking-item:nth-child(3){color: #ff9800;}

.sec03-ranking-text {
            font-size: 18px;
            font-weight: bold;
            line-height: 1.6;
}

        .sec03-card-image {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 200px;
            height: auto;
            pointer-events: none;
        }

        .sec03-card-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* レスポンシブ対応 */
        @media (max-width: 968px) {
            .sec03 {
                padding: 40px 15px 60px;
            }

            .sec03-bubble {
                font-size: 18px;
                padding: 15px 30px;
            }

            .sec03-title h2 {
                font-size: 26px;
            }

            .sec03-subtitle {
                font-size: 20px;
            }

            .sec03-cards {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .sec03-card {
                padding: 30px 20px 0;
                min-height: 450px;
            }

            .sec03-card-header {
                font-size: 24px;
                padding: 12px 25px;
            }

            .sec03-ranking-text {
                font-size: 16px;
            }

            .sec03-card-image {
                width: 160px;
                right: 20%;
                transform: translateX(50%);
            }
        .sec03-card-image img {
            width: 90%;
            height: auto;
            display: block;
        }			
}



        @media (max-width: 480px) {
            .sec03-bubble {
                font-size: 16px;
                padding: 12px 20px;
                border-radius: 30px;
            }

            .sec03-title h2 {
                font-size: 22px;
            }

            .sec03-subtitle {
                font-size: 18px;
            }

            .sec03-note {
                font-size: 12px;
            }

            .sec03-card {
                min-height: 420px;
				        padding-bottom: 250px;
            }

            .sec03-card-header {
                font-size: 22px;
            }

            .sec03-ranking-number {
                width: 45px;
                height: 45px;
                font-size: 13px;
            }

            .sec03-ranking-text {
                font-size: 15px;
            }

            .sec03-card-image {
                width: 140px;
                right: 50%;
                transform: translateX(50%);	
            }
}

/** sec04 **/
.sec04 {
  background: #fff;
  padding: 60px 20px;
  text-align: center;
}

.sec04 .inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sec04 h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 40px;
  line-height: 1.6;
}

.sec04 .orange {
  color: #ff8000;
  font-weight: bold;
}

/* 吹き出し「もし」 */
.balloon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;                  /* 吹き出しの大きさ */
  height: 60px;
  background: #fff;             /* 背景は白 */
  border: 2px solid #f18200;    /* オレンジ枠 */
  border-radius: 50%;           /* 円形にする */
  color: #f18200;               /* 文字色オレンジ */
  font-weight: bold;
  font-size: 1.1rem;
  position: relative;
  margin-right: 10px;
  vertical-align: middle;
}

/* 下向きのしっぽ */
.balloon::after {
  content: "";
  position: absolute;
  right: -8px;                 /* 円の右端から少し外へ */
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 8px; /* 左向き三角形を反転して右へ */
  border-style: solid;
  border-color: transparent transparent transparent #f18200;
}
/* 問題ボックス全体 */
.problem-box {
  background: #efefef;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  border-radius: 8px;
}

/* チェックリスト */
.problem-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 18px;
}

.problem-list li {
  background: #fff url("images/icon-chk.jpg") no-repeat 22px center;
  background-size: 30px auto;
  border: 2px solid #0ca34a;
  padding: 18px 24px 18px 78px;
  font-weight: 600;
  line-height: 1.8;
  color: #2b2b2b;
	text-align:left;
}


.note {
  margin-top: 40px;
  font-size: 1rem;
  line-height: 1.8;
}

.orange-bold {
  color: #ff8000;
  font-weight: bold;
  margin: 20px 0;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .problem-box {
    padding: 24px 16px;
  }
	.problem-box ul{ padding-left:0;}
  .problem-list li {
    background-position: 16px center;
    background-size: 24px auto;
    padding: 14px 16px 14px 56px;
    font-size: 0.95rem;
  }
}

/** sec05  **/
.sec05{ background-color:#fbfce9;}

.sec05 {
  background: #f7f7f7;
  padding: 56px 20px;
}

.sec05 .inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 2カラム配置（⑦除く） */
.benefit-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
.benefit-grid .full{ grid-column:1 / -1; }

/* カード共通 */
.sec05card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0, 155, 74, 0.1);
  overflow: hidden;
	padding:15px;
}

/* 見出し帯 */
.sec05card .head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0ca34a;
  color: #fff;
  padding: 14px 18px;
}

.sec05card .head h3 {
	font-size:1.2em;
  line-height: 1.5;
  font-weight: 700;
	margin-bottom:0!important;
}

.sec05card .head .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0ca34a;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* 内容：左画像・右テキスト（統一） */
.sec05card .content {
  display: grid;
grid-template-columns: 70% 30%;
gap: 18px;
  padding: 18px;
  align-items: center;
}

.sec05card .text{ order:1; }   /* 左 */
.sec05card .thumb{ order:2; }  /* 右 */
.sec05card .thumb img{ width:90%; height:auto; display:block; }

/* ⑦（full）は同じ比率でOK */
.sec05card.full .content{ grid-template-columns: 80% 20%; }

.sec05card .thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.sec05card.full .thumb img { width:160px;height:150px;}


.sec05card .text p {
  margin: 0;
  line-height: 1.8;
  color: #333;
}


/* モバイル時は全て縦並び */
@media (max-width: 768px) {
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 18px;
	  padding-left:0!important
  }

  .sec05card .content,
  .sec05card.full .content {
    grid-template-columns: 1fr; /* 全カード縦並び */
  }

  .sec05card .thumb,
  .sec05card.full .thumb {
    order: 1;
    text-align: center;
  }

  .sec05card .thumb img,
  .sec05card.full .thumb img {
    max-width: 240px;
    margin: 0 auto 12px;
  }

  .sec05card .text,
  .sec05card.full .text {
    order: 2;
  }
}


/*  お問い合わせ  ブロック */
.contact-block {
  background: #009b4a;
  padding: 30px 20px!important;
padding-top:30px;
}

.contact-block .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
background-color:#ffffff;
	border-radius:10px;
	padding-top:20px 30px!important;
}


/* --- 右：オレンジボタン --- */
.contact-btn {
  flex: 1;
  text-align: center;
	margin-bottom:20px;
}

.btn-orange {
  display: inline-block;
  background: linear-gradient(90deg, #ffa22e, #ff7a00);
  color: #fff;
  font-weight: bold;
  font-size: 1.4em;              /* ←フォント大きめ */
  padding: 18px 50px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #ffffff;     /* ←白い境界線 */
  box-shadow: 0 0 15px rgba(149, 149, 149, 0.7); /* ←光彩外側 (#959595 70%) */
  transition: 0.3s ease;
  letter-spacing: 0.05em;
}

.btn-orange .arrow {
  margin-left: 35px!important;
	color: #ffffff;
font-size: 0.7em!important;
  vertical-align: middle;
}

.btn-orange:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* --- 左：お問い合わせボタン --- */
.tel-box {
  text-align: center;        /* 中央寄せ */
  margin: 20px auto;
}
.tel-box .tel-img {
  max-width: 100%;           /* 親要素の幅を超えない */
  height: auto;              /* 縦横比を維持 */
  display: inline-block;     /* 余計な余白を防ぐ */
}

/* --- スマホ（縦並び） --- */
@media (max-width: 768px) {
  .contact-block .inner {
    flex-direction: column;
    gap: 20px;
  }
  .tel-number {
    font-size: 1.6rem;
  }
 .btn-orange {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;

    display: flex;              
    justify-content: center;
    align-items: center;
    gap: 6px;   
    border-radius: 50px;
    box-sizing: border-box;
  }

  .btn-orange .arrow {
    margin-left: 20px;
    font-size: 0.8em;
  }
.tel-box{margin: 20px auto 10px auto;}

}

/** sec06 **/
.article h2.title-dot {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  width: 100%;
  display: block!important;
  margin: 0 auto!important;	
}
/* ▼ 全体を黄色マーカー */
.title-dot .marker {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.title-dot .marker:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background: #f7e86a;
  z-index: -1;
}
/* ▼ 「違い」だけ上に丸2つ */
.title-dot .dot {
  position: relative;
  color: #009c3a;
}
.title-dot .dot:before {
  content: "••";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: #009c3a;
  letter-spacing: 6px;
}

.table-scroll__hint {
  display: none;
  font-size: 12px;
  color: #666;
  margin: 0 0 4px;
}

.compare-table{
  max-width:960px;
  margin:0 auto 30px auto;
  border-collapse:collapse;
  width:100%;
  font-size:14px;
}
/* rows & cells */
.compare-row{
  display:flex;
}
.compare-cell{
  padding:16px 18px;
  box-sizing:border-box;
  line-height:1.6;
}
/* column width (PC) */
.compare-cell--item{ width:20%; }
.compare-cell--internal,
.compare-cell--external{ width:40%; }

/* header */
.compare-row--head .compare-cell{
  font-weight:bold;
  text-align:center;
  color:#fff;
}
.compare-row--head .compare-cell--item{ background:#009c4b; margin-bottom:3px;}
.compare-row--head .compare-cell--internal{ background:#b6b6b6; margin:0 4px 3px 4px; }
.compare-row--head .compare-cell--external{ background:#009c4b;}

/* body: left column */
.compare-body .compare-cell--item{
  background:#009c4b;
  color:#fff;
  font-weight:bold;
  border-bottom:2px solid #fff;
  text-align:center;
}
/* body: center column */
.compare-body .compare-cell--internal{
  background:#e6e6e6;
  border-bottom:2px solid #fff;
  margin:0 5px;
}
/* body: right column */
.compare-body .compare-cell--external{
  background:#fff;
  border-bottom:10px solid #009c4b;
  border-left:10px solid #009c4b;
  border-right:10px solid #009c4b;
  color:#f18200;
  font-weight:bold;
}

.orange{
  color:#f18200;
}

/* PCではSPタブを非表示 */
.compare-tabs,
.compare-sp-view {
  display: none;
}



 /* ---------- responsive ---------- */

/* スマホ・タブレットで表示 */
@media (max-width: 1024px) {
  .table-scroll__hint {
    display: block;
  }
}

@media (max-width:768px){
.title-dot .marker:after {
    height: 4px;
  }
  
  .title-dot .dot:before {
    top: -12px;
  }

  /* PCテーブルを非表示 */
  .compare-table {
    display: none;
  }

  /* タブ表示 */
  .compare-tabs {
    display: flex;
    margin-bottom: 20px;
  }

  .compare-tabs .tab-btn {
    flex: 1;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #009c4b;
    background: #fff;
    color: #009c4b;
    cursor: pointer;
  }

  .compare-tabs .tab-btn.active {
    background: #009c4b;
    color: #fff;
    font-weight: bold;
  }

  /* SPビュー表示 */
  .compare-sp-view {
    display: none;
  }

  .compare-sp-view.active {
    display: block;
  }
  /* SPアイテム */
  .sp-item {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 6px;
  }

.compare-sp-syagai .sp-item { color:#f18200;}
	
  .sp-item h4 {
    font-size: 14px;
    color: #009c4b;
    margin-bottom: 6px;
    font-weight: bold;
  }

  .sp-item p {
    font-size: 14px;
    line-height: 1.6;
	  margin-bottom:0;
  }
}
	
/*---  sec07   -----*/
/* 全体コンテナ */
.consult-list {
  max-width: 960px;
  margin: 30px auto;
  padding: 0 16px;
}

/* 各行 */
.consult-item {
  display: flex;
  align-items: center;
  background: #fff7a8;       /* 薄い黄色 */
  border-radius: 10px;     
  padding: 14px 22px;
  margin-bottom: 14px;
}

/* 左側「相談／01」 */
.consult-label {
  margin: 0 20px 0 0!important;
  white-space: nowrap;
  font-weight: 700;
  color: #009944;            /* 緑 */
  font-size: 1.4rem;
}

.consult-tag {
  margin-right: 2px;
}

.consult-num {
  font-size: 2.2rem;
  font-style: italic;
}

/* 右側テキスト */
.consult-text {
  margin: 0!important;
  color: #333;
  font-size: 1.4rem;
  line-height: 1.6;
  flex: 1;
	font-weight:bold;
}

/* ------- レスポンシブ ------- */
@media (max-width: 640px) {
  .consult-item {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 18px;
  }

  .consult-label {
    margin: 0 0 6px;
    font-size: 1.2rem;
  }

  .consult-num {
    font-size: 1.6rem;
  }

  .consult-text {
    font-size: 1.3rem;
  }
}

/*--- sec08  ---*/
.sec08{ background-color:#fbfce9; padding-top:30px!important;margin-bottom:0;} 

.feature-item {
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 3px 3px #dff2e8;
	position: relative;
}

.feature-item06{ margin-bottom:50px;}

/* 背景画像を右上に配置 */
.feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 340px;
  background-size: cover;
  background-position: center;
  border-radius: 0 8px 0 0;
  z-index: 1;
}

/* 各アイテムごとに背景画像を指定 */
.feature-item01::before {
  background-image: url(images/img-soudan01.jpg);
}

.feature-item02::before {
  background-image: url(images/img-soudan02.jpg);
}

.feature-item03::before {
  background-image: url(images/img-soudan03.jpg)
}

.feature-item04::before {
  background-image: url(images/img-soudan04.jpg);
}

.feature-item05::before {
  background-image: url(images/img-soudan05.jpg);
}

.feature-item06::before {
  background-image: url(images/img-soudan06.jpg);
}

.feature-content {
  flex: 1;
  padding: 20px 50px;
  padding-right: 370px; /* 右側に画像分の余白を確保 */
  position: relative;
  z-index: 2;
}

.feature-number {
  font-size: 14px;
  color: #009c4b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
}

.feature-number .num {
  font-size: 48px;
  font-weight: 700;
  margin-left: 0;
}

.feature-number::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #009c4b;
}

.feature-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 15px!important;
  color: #b4431d;
}


.feature-text {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
	margin-bottom:0!important;
}

.feature-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  z-index: 1;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 8px 8px 0;
}

/* オプションボックス */
.option-box {
  background: #fff;
  border-radius: 8px;
  padding: 30px 40px;
  margin-top: 30px;
}

.option-title {
  background: #009c4b;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 15px 25px;
  margin: -30px -40px 25px -40px;
  border-radius: 8px 8px 0 0;
}

.option-content {
  display: flex;
  gap: 50px;
  margin-bottom: 15px;
}

.option-list {
  flex: 1;
  list-style: none;
  padding: 0;
}

.option-list li {
  font-size: 14px;
  line-height: 2;
  color: #333;
}

.option-note {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .sec08 {
    padding: 40px 0;
  }
	

  .feature-item {
    flex-direction: column;
    margin-bottom: 15px;
	     padding-bottom: 220px; /* 画像分のスペースを確保 */
 
  }
/* スマホ時は下中央に配置 */
  .feature-item::before {
    display: block;
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
    height: 200px;
    border-radius: 8px;
  }
 
  .feature-content {
    padding: 30px 20px;
    padding-right: 20px; /* 右余白をリセット */
  }

  .feature-number .num {
    font-size: 36px;
  }

  .feature-title {
    font-size: 20px;
  }

  .feature-image {
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
  }

  .feature-image img {
    border-radius: 0;
  }

  .option-box {
    padding: 25px 20px;
  }

  .option-title {
    font-size: 16px;
    padding: 12px 20px;
    margin: -25px -20px 20px -20px;
  }

  .option-content {
    flex-direction: column;
    gap: 0;
  }

  .option-list li {
    font-size: 13px;
  }
}

 .soudan-option {
            background-color: #f5f5f5;
            padding: 0 20px 20px 20px;
        }

.article h2.soudan-option__header {
            background-color: #009b4a!important;
            color: #ffffff;
            padding: 20px 30px;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
display:inline-block
        }

        .soudan-option__content {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #f5f5f5;
            padding: 0 20px;
        }

        .soudan-option__list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 60px;
            margin-bottom: 30px;
        }

        .soudan-option__item {
            font-size: 16px;
            color: #333;
font-weight:bold;
        }

        .soudan-option__item::before {
            content: "・";
            margin-right: 0.3em;
        }

        .soudan-option__note {
            font-size: 14px;
            color: #333;
            margin-top: 20px;
        }

        /* レスポンシブ対応 */
        @media screen and (max-width: 768px) {
            .soudan-option {
                padding: 30px 15px;
            }

            .soudan-option__header {
                font-size: 18px;
                padding: 15px 20px;
                margin-bottom: 20px;
            }

            .soudan-option__content {
                padding: 0 10px;
            }

            .soudan-option__list {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .soudan-option__item {
                font-size: 14px;
            }

            .soudan-option__note {
                font-size: 13px;
                margin-top: 15px;
            }
        }

        @media screen and (max-width: 480px) {
            .soudan-option__header {
                font-size: 16px;
                padding: 12px 15px;
            }

            .soudan-option__item {
                font-size: 13px;
            }

            .soudan-option__note {
                font-size: 12px;
            }
}


/**** sec09 ****/
.sec09 { background-color:#e1f8ec!important;padding:50px 0!important;}
.sec09 h2{
	font-size:1.6em;
	color: #009b4a;
	text-align:center;}

.sec09-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.sec09-card {
    width: calc(50% - 20px); /* 左右2カラム */
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
    padding:20px 20px 40px 20px;
	  background-color:#ffffff;
  }

  /* ▼ 奇数で余る「最後の1枚」は中央寄せ＆1カラムに */
  .sec09-card:last-child:nth-child(odd) {
    width: 70%;                  /* 幅少し広め（調整可）*/
    margin-left: auto;
    margin-right: auto;          /* 中央寄せ */
}

.sec09-message{ background-color:#fbfce9; padding:20px;}

.sec09-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0px;
  flex-wrap: wrap;
	margin-bottom:20px;
}

.sec09-imgname img {
  max-width: 100%;
  width: 500px;
  height: auto;
}

.sec09-photo img {
  width: 260px;
  height: auto;
  object-fit: contain;
}

/* プロフィール */
.sec09-profile {
  margin-top: 0px;
	margin-bottom:10px;
}

.sec09-profile p {
  line-height: 1.8;
  margin-bottom: 15px;
	font-size:0.9em;
}

/* メッセージ */
.message-title {
color: #009944;
font-weight: bold;
font-size: 1em!important;
padding-left:0!important;
margin-bottom: 0!important;
border:none!important;
}

.sec09-message p {
  line-height: 1.8;
  margin-bottom: 15px;
	font-size:0.9em;
}

/* read more ボタン */
.btn-readmore {
  display: inline-block;
  padding: 8px 18px;
  background: #009944;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

.btn-right {
  float: right;
}

.sec09-hidden {
  max-height: 123px;           
  overflow: hidden;
  transition: max-height .5s ease;
  position: relative;
margin-bottom:20px;
}

/* 開いた状態 */
.sec09-hidden.open {
  max-height: 3000px; /* 大きめでOK */
}

.sec09-card p{ margin-bottom:0;}

.sec09-message p{ font-size:0.9em;}


  /* 奇数で余った最後のカード */
  .sec09-card:last-child:nth-child(odd) {
    width: 60%;                 /* 好みで変更可 */
    margin-left: auto;
    margin-right: auto;
    background: #fffebb;        /* 背景色 */
    border: 2px solid #009b4a;  /* 枠線 */
    padding: 40px;
  }

  /* 写真も中央寄せに */
  .sec09-card:last-child:nth-child(odd) .sec09-photo {
    text-align: center;
    width: 100%;
  }

  .sec09-card:last-child:nth-child(odd) .sec09-photo img {
    margin: 0 auto;
    display: inline-block;
  }

  /* 名前画像も中央 */
  .sec09-card:last-child:nth-child(odd) .sec09-imgname {
    text-align: center;
    width: 100%;
  }

  .sec09-card:last-child:nth-child(odd) .sec09-imgname img {
    margin: 0 auto;
    display: inline-block;
  }





/* ▼ スマホは従来どおり1カラム */
@media screen and (max-width: 768px) {
  .sec09-content {
    display: block;
  }
  .sec09-card,
  .sec09-card:last-child:nth-child(odd){
    width: 100%;
	  padding:20px;
  }
}

  .sec09-photo img {
    width: 200px;
    margin-top: 10px;
  }

  .btn-right {
    float: none;
    display: inline-block;
    margin-left: auto;
  }
}

/** sec10 **/
.green-bubble-list{
list-style: none;
padding: 30px 40px;
background-color: #fbfce9!important;
border-radius: 8px;
}

.green-bubble-list li {
  position: relative;
  padding-left: 50px;
  margin-bottom: 16px!important;
  line-height: 1.7;
}

/* 番号バッジ（丸吹き出し）*/
.green-bubble-list li::before {
  counter-increment: bubble-counter;
  content: counter(bubble-counter);
  position: absolute;
  left: 0;
  top: 4px;
  background: #009b4a;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}


/* 吹き出しの三角（after） */
.green-bubble-list li::after {
  content: "";
  position: absolute;
  left: 20px;   /* 丸の右下 → 微調整OK */
  top: 25px;
  width: 0;
  height: 0;
  border-right: 8px solid #009b4a;  /* 緑色 */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
transform:rotate(340deg);
}

.price-info {
  background: #f7f9f7;
  padding: 20px 20px 60px;
}

.price-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.price-box {
  background: #fff;
  border: 2px solid #009b4a;
  border-radius: 12px;
  padding: 30px 30px 25px;
  margin-bottom: 30px;
}

.price-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #009b4a;
  margin-bottom: 50px;
}


.article h3.price-box-title {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
background-color: #ff821e!important;
 color: #fff!important;
}

.price-main {
  font-size: 18px;
  margin-bottom: 15px;
}

.price-strong {
  font-size: 22px;
  font-weight: 700;
  color: #009b4a;
}

.price-list {
  padding-left: 20px;
  margin-bottom: 15px;
}

.price-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.price-note {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* カウンターをリセット */
.green-bubble-list {
  counter-reset: bubble-counter;
	background-color:#fbfce9;
	padding:30px 20px;
}
.green-bubble-list li::marker{ content:"";}
ul.green-bubble-list { list-style-type: none!important; }


.campaign-header {
color:#fff;
padding: 30px 40px;
text-align: center;
font-size: 28px;
font-weight: bold;
letter-spacing: 0.05em;
position: relative;
background-color:#ff821e;
}

.campaign-header::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: #ff7e3e;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.campaign-content {
            padding: 80px 40px 0px;
            text-align: center;
}

.campaign-deadline {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 40px;
            letter-spacing: 0.05em;
            background-color: #fbfce9;
            padding: 20px 40px;
            display: inline-block;
}

.campaign-deadline .highlight {
            color: #d63031;
}

.campaign-description {
            font-size: 14px;
            color: #333;
            line-height: 2;
            letter-spacing: 0.05em;
}

.campaign-description p {margin-bottom:0!important;}

@media screen and (max-width: 768px) {
            .campaign-header {
                padding: 20px 20px;
                font-size: 20px;
            }

            .campaign-header::after {
                height: 20px;
                bottom: -20px;
            }

            .campaign-content {
                padding: 50px 20px 40px;
            }

            .campaign-deadline {
                font-size: 22px;
                margin-bottom: 30px;
                padding: 15px 20px;
            }

            .campaign-description {
                font-size: 15px;
                line-height: 1.8;
            }
 .price-title {
    font-size: 22px;
  }

  .price-box {
    padding: 20px;
  }

  .price-strong {
    font-size: 20px;
  }
 


}

        @media screen and (max-width: 480px) {
            .campaign-header {
                font-size: 18px;
                padding: 18px 15px;
            }

            .campaign-header::after {
                height: 15px;
                bottom: -15px;
            }

            .campaign-deadline {
                font-size: 20px;
                padding: 12px 15px;
            }

            .campaign-description {
                font-size: 14px;
            }
}


/**  sec11  **/
.sec11{ background-color:#e1f9ec; padding:50px 0!important; margin-bottom:0!important;}

/* PC：左右画像＋中央テキスト */
.sec11-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.sec11-text{ 
  padding: 0 10px;  /* 左右10pxずつ余白 */
	text-align:center;
}


.sec11-img {
  flex: 0 0 25%;
  text-align: center;
}

.sec11-img img {
  max-width: 100%;
  height: auto;
}

.sec11-text {
  flex: 0 0 50%;
  text-align: center;
}

/* -------------------------
   スマホ（768px以下）
------------------------- */
@media screen and (max-width: 768px) {

  .sec11-flex {
    flex-direction: column;
    text-align: center;
  }

  .sec11-img {
    flex: none;
    width: 70%;
    margin-bottom: 20px;
  }

  .sec11-text {
    width: 100%;
  }
}


/************************************
** お問い合わせ
************************************/
 .box_con {
          max-width: 1100px;
          margin: 0  auto;
        }
        @media only screen and (max-width: 768px) {
          .box_con {
            width: 95%!important;
          }
        }
        .box_con form {
          width: 100%;
        }
        .box_con form table {
          width: 100%;
        }
        .box_con form table tr {
          position: relative;
        }
        .box_con form table tr:after {
          content: "";
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
          height: 1px;
        }

        .box_con form table tr th {
          width: 30%;
          font-weight: normal;
          padding: 1em .5em;
          box-sizing: border-box;
          text-align:left;
        }

        .submit-button {
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            margin: 30px auto 0;
            background-color: #e4eeef;
            cursor: pointer;
            border: 1px solid #e4eeef;
            color: #000;
            text-align: center;
            text-decoration: none;
            line-height: 1.5;
            outline: none;
            transition: all .5s;
            padding: 20px 100px;
        }
         
        .submit-button:hover {
            background: #cae1e3;
            color: #000;
            border: 1px solid #cae1e3;
        }

        .boxBtn{
            position:relative;
            height: 50px;
            text-align:center;
        }

        .box_con input[type=submit]{
            width:50%;
        }
         
        @media only screen and (max-width: 768px) {
          .box_con form table tr th {
             width: 100%;
            display: block;
            background: #f5f6f7;
            padding: .8em 1.5em;
			vertical-align: top;  
          }
        }
        .box_con form table tr th span {
          border-radius: 6px;
          margin-right: 8px;
          padding-top: 3px;
          padding-bottom: 3px;
          width: 48px;
          display: inline-block;
          text-align: center;
          background: #cd6f55;
          color: #fff;
          font-size: 14px;	
        }
        .box_con form table tr th span.optional {background-color:#0e5b99;}

        .box_con form table tr td {
          padding: 1em .5em;
          box-sizing: border-box;
        }
        @media only screen and (max-width: 768px) {
          .box_con form table tr td {
            padding: 1.5em .5em;
            display: block;
            width: 100%;
            text-align:center;
          }
          .box_con form table tr td.koumoku{ padding-left:20px;text-align:left;}	
        }
        .box_con form table tr .box_br {
          display: block;
        }

        .box_con form table tr .radio02-input + label {
           margin-right: 20px;
          position: relative;
        }
        .box_con form table tr input, .box_con form table tr textarea {
          padding: .5em;
          box-sizing: border-box;
        }
        .box_con form table tr textarea {
          width:100%!important;
          height:100px!important;
        }
        
        .table01 {
            width: 100%;
            border-collapse: collapse;
        }
.reservation-datetime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.reservation-datetime select,
.reservation-datetime input[type="time"] {
  max-width: 200px;
  width: 100%;
}

/************************************
** ハラスメント研修
************************************/
.page-id-237 .article{ margin-bottom:0;}
.page-id-237 .entry-content{ max-width:100%;}
.page-id-237 .post-date{display:none;}


.page-id-237 section{ padding:0px 0 30px 0;}

.page-id-237 #content{
	max-width:100%;
	margin:0 auto;
	padding:0;
}

/* ページ全体のオーバーフロー制御 */
.page-id-237 #content,
.page-id-237 #main {
    max-width: 100%;
    overflow-x: hidden;
}


/* main */
.page-id-237 #main-image{ 
	min-height:450px;
}	

.page-id-237 #main-image p{
    margin: 0 auto;
	max-width:1200px;
	text-align:center;
}

/* ハラスメント研修ページはタイトル非表示とする */
.page-id-237 .entry-title{ display: none;}
.page-id-237 .entry-content,
.page-id-237 .entry-title{ margin-top:0!important;}


/*------------------------------
 harassment-sec00(無限ループ)
------------------------------*/
 .harassment-sec00{
width: 100%;
overflow: hidden;
background: #dee44e;
position: relative;
margin-bottom:20px;
padding:10px 0!important;
}

.loop_wrap {
display: flex;
width: 200%; /* 2つの画像を並べるため */
/*  height: 120px;*/
animation: slide 30s linear infinite;
}

.loop_wrap img {
            width: 50%; /* 各画像が全体の50%を占める */
            height: 100%;
            object-fit: contain;
            flex-shrink: 0;
            background: white;
}

        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%); /* 一つの画像分だけ移動 */
            }
        }


        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .loop_wrap {
                animation-duration: 20s; /* モバイルでは少し速く */
            }
        }

        @media (max-width: 480px) {
            .loop_wrap {
                animation-duration: 15s; /* さらに速く */
            }
			.loop_wrap img {
            width: 100%; /* 各画像が全体の50%を占める */
			}
        }


/*------------------------------
 harassment-sec01
------------------------------*/
.harassment-sec01 { 
  background-color: #fbfaf8; 
  padding-top: 30px !important;
  margin-bottom: 0;
  padding-bottom: 50px;
} 

.case-item {
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 3px 3px #dff2e8;
  position: relative;
}

/* 背景画像を右上に配置 */
.case-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 340px;
  background-size: cover;
  background-position: center;
  border-radius: 0 8px 0 0;
  z-index: 1;
}

/* 各アイテムごとに背景画像を指定 */
.case-item01::before {
  background-image: url(images/img-case01.png);
}

.case-item02::before {
  background-image: url(images/img-case02.png);
}

.case-item03::before {
  background-image: url(images/img-case03.png);
}

.case-item04::before {
  background-image: url(images/img-case04.png);
}

.case-content {
  flex: 1;
  padding: 20px 50px;
  padding-right: 370px; /* 右側に画像分の余白を確保 */
  position: relative;
  z-index: 2;
}

.case-number {
  font-size: 14px;
  color: #009c4b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
}

.case-number .num {
  font-size: 48px;
  font-weight: 700;
  margin-left: 0;
}

.case-number::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #009c4b;
}

.case-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 15px !important;
  color: #b4431d;
}

.case-title .uline-yellow {
  background: linear-gradient(transparent 60%, #fff100 60%);
  font-weight: 700;
}

.case-text {
  font-size: 14px;
  line-height: 1.8;
  color: #222;
  margin-bottom: 0 !important;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .harassment-sec01 {
    padding: 40px 0;
  }

  .case-item {
    flex-direction: column;
    margin-bottom: 15px;
    padding-bottom: 220px; /* 画像分のスペースを確保 */
  }

  /* スマホ時は下中央に配置 */
  .case-item::before {
    display: block;
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
    height: 200px;
    border-radius: 8px;
  }
 
  .case-content {
    padding: 30px 20px;
    padding-right: 20px; /* 右余白をリセット */
  }

  .case-number .num {
    font-size: 36px;
  }

  .case-title {
    font-size: 20px;
  }
}

/*------------------------------
 harassment-sec02
------------------------------*/
.harassment-sec02{ padding:50px 0!important;}

.example-box{
  margin-top:40px;
}

.example-item{
  border:3px solid #00a651;
  border-radius:16px;
  background:#fff;
  padding:28px;
  margin-bottom:32px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.example-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
}
.example-head h3{ margin-bottom:0!important;}

.example-label{
  background:#00a651;
  color:#fff;
  padding:10px 16px;
  font-weight:bold;
  font-size:1.2rem;
}

.example-title{
  font-size:1.4rem;
  font-weight:bold;
  color:#00a651;
}

.example-head-line{
  height:2px;
  background:#00a651;
  margin:0 0 20px;
}

.example-content{
  display:flex;
  gap:24px;
}

.example-text{
  flex:1 1 55%;
  line-height:1.8;
}

.example-image{
  flex:1 1 40%;
  text-align:right;
}

.example-image img{
  width:100%;
  height:auto;
}

/* SP */
@media(max-width:768px){
  .example-content{
    flex-direction:column;
  }
  .example-image{
    text-align:center;
  }
}


/*------------------------------
 harassment-sec03
------------------------------*/
.harassment-sec03{ 
	background-color:#009b4a;
	padding:0!important;
	text-align:center;
	margin-bottom:0;
}
.harassment-sec03 .inner{ 
    max-width: 1200px;
    margin: 0 auto;
	position:relative;
	padding-top: 80px!important; /* 吹き出し分の余白を追加 */
}

/* ===== 背景の人物画像 ===== */
.harassment-sec03 .inner::before,
.harassment-sec03 .inner::after{
    content:"";
    position:absolute;
    background-size:contain;
    background-repeat:no-repeat;
    width:180px;
    height:260px;
    z-index:1;
}

/* 左画像（男性） */
.harassment-sec03 .inner::before{
    background-image:url("images/img-men02.png");
left:-10px;
    bottom:0px;
}

/* 右画像（女性） */
.harassment-sec03 .inner::after{
background-image:url("images/img-woman02.png");
right:-30px;
bottom:0px;
}

.harassment-sec03 p{ color:#fff;} 
.harassment-sec03 .sec03-bubble{ 
    position:absolute;
    top:60px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 50px;
    background:#fff100;
    border-radius:40px;
    font-weight:bold;	

}

.harassment-sec03 .sec03-title{
    padding-top:60px;
}

/* 吹き出しの三角形 */
.harassment-sec03 .sec03-bubble::after {
	content: "";
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff100;
}

.harassment-sec03 .sec03-title{ padding-top}
.harassment-sec03 .sec03-title h2 {
	color: #fff;
	font-size: 24px;
	line-height: 1.8;
	margin-bottom: 30px;
}
/* レスポンシブ */
@media (max-width: 1024px) {
	.harassment-sec03 .inner {
		padding-bottom: 110px!important;
	}
}
/* レスポンシブ */
@media (max-width: 768px) {
	.harassment-sec03 .inner {
		padding-top: 100px;
		padding-bottom: 120px!important;
	}

	.harassment-sec03 .sec03-bubble {
		font-size: 16px;
		padding: 12px 10px;
		white-space: normal;
		max-width: 100%;
	}
	
.harassment-sec03 .sec03-title h2 {
		font-size: 20px;
padding:20px 10px;
	}
.harassment-sec03 .inner::before{
left:0;
bottom:-20px;
width:100px!important;
height:180px;
}
.harassment-sec03 .inner::after{
width:100px!important;
right:0;
top:0;
height:180px;
}
.harassment-sec03 .sec03-title{padding-top:100px;}	
}

/*------------------------------
 harassment-sec04
------------------------------*/
.harassment-sec04{ 
	background-color:#fbfce9;
	padding: 50px 10px!important;
	margin-bottom:0px;
}

.harassment-sec04 .inner {
  max-width: 1100px;
  margin: 0 auto;
}

.haras-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

/* 1100pxに3つ入る幅 */
.haras-card {
  flex: 0 0 calc((100% - 60px) / 3);
  background: #fff;
  border: 4px solid #e2f4eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}

.haras-header {
  background: #009b4a;
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.haras-header h3{font-size:1em; margin-bottom:0!important;}

.haras-number {
  width: 42px;
  height: 42px;
  background: #fff;
  color: #009b4a;
  font-size: 1.2rem;
  border-radius: 50%;
  font-weight: 700;
  display: flex;
  align-items:center;
  justify-content:center;
}

.haras-body {
  padding: 18px;
  font-size: 0.95rem;
  line-height: 1.8;
}

.haras-highlight {
  color:#f08300;
  font-weight:700;
  border-bottom: 2px solid #f08300;
}

.haras-img {
  text-align:center;
  margin-top:20px;
}

.haras-img img {
  max-width:130px;
}

@media(max-width:960px){
  .haras-card {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}

@media(max-width:640px){
  .haras-card {
    flex: 0 0 100%;
  }
}

/*------------------------------
 harassment-sec05
------------------------------*/
.harassment-sec05 {
  background: #dff6e8;
  padding: 50px 10px!important;
}

.harassment-sec05 .inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* タイトル */
.article h2.hv-title {
  text-align: center;font-size:2em!important;
  margin-bottom: 32px;
  color: #009b4a;
  font-weight: 700;
}

/* カード */
.hv-card {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  padding: 32px 40px 36px;
	max-width:800px;
	margin:0 auto;
}

/* ヘッダー部分 */
.hv-card-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* アバター画像 */
.hv-avatar img {
  width: 120px;
  height: 120px;
}

/* 見出し */
.hv-main-copy {
  font-size: 1.2rem;
  font-weight: 700;margin:0px!important;
}

.hv-name {
  margin: 0!important;
  font-size: 0.95rem;
  font-weight: 700;
}

/* 仕切り線 */
.hv-divider {
  border-bottom: 1px solid #e3e3e3;
  margin: 20px 0 24px;
}

/* 本文ボックス */
.hv-body {
  background: #fffbe9;
  padding: 24px 22px;
  border-radius: 4px;
  line-height: 1.9;
  font-size: 0.95rem;
}

.hv-body p + p {
  margin-top: 1em;
}

/* 強調 */
.hv-em {
  color: #009b4a;
  font-weight: 700;
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  .hv-card {
    padding: 24px 20px 28px;
  }
}

@media (max-width: 640px) {
  .hv-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hv-avatar img {
    width: 90px;
    height: 90px;
  }

  .hv-main-copy {
    font-size: 1rem;
  }

  .hv-body {
    padding: 18px 16px;
    font-size: 0.9rem;
  }
}


/*------------------------------
 harassment-sec06
------------------------------*/
.harassment-sec06 {
  padding: 50px 0;
  background: #ffffff;
}

.harassment-sec06 .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

.sec06-item {
  background: #fff5be;
  border-radius: 30px;
  padding: 30px 40px;
  margin: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* 左：テキストエリア */
.sec06-text {
  flex: 1 1 65%;
}
.sec06-text p{margin-bottom:0!important;}
.sec06-head{
  display:flex;
  align-items:center;
  gap:30px;
  margin-bottom:18px;
  padding-bottom:8px;
  border-bottom:2px solid #009b4a; /* ←緑ライン残す！ */
}

.sec06-label{
  margin:0!important;
  font-weight:700;
  color:#009b4a;
  white-space:nowrap;
}

.sec06-label-number{
font-size:1.4em!important;
margin-left:5px!important;
font-style:italic;
}

.sec06-text h3{
  margin:0;
  font-size:1.4rem;
  font-weight:700;
  line-height:1.5;
}


.sec06-highlight {
  color: #f26c23;
  font-weight: 700;
}

/* 右：画像エリア */
.sec06-image {
  flex: 0 0 28%;
}

.sec06-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* レスポンシブ */
@media screen and (max-width: 900px) {
  .sec06-item {
    flex-direction: column;
    padding: 20px 18px;
  }

  .sec06-text {
    flex-basis: auto;
  }

  .sec06-image {
    width: 70%;
    max-width: 280px;
    margin: 10px auto 0;
  }

  .sec06-text h3 {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 600px) {
  .harassment-sec06 {
    padding: 35px 0;
  }

  .sec06-item {
    border-radius: 18px;
  }

  .sec06-image {
    width: 80%;
  }
}

/*------------------------------
  sec07 講師紹介 / 
------------------------------*/

/* 共通 */
.harassment-sec07 .inner,
.harassment-sec08 .inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

/*------------------------------
  sec07 講師紹介 / sec08 研修内容
------------------------------*/
.harassment-sec07{
  padding: 50px 0 50px!important;
	  background: linear-gradient(
      to bottom,
      #009b4a 0%,
      #009b4a 70%,
      #ffffff 30%,
      #ffffff 100%
  );
}


.sec07-heading{
  text-align: center;
font-size: 2em!important;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 30px;
}

/* 白いプロフィールカード */
.sec07-profile-card{
background: url("images/bg-profile.jpg") center center/cover no-repeat;
  padding: 30px 40px 35px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 上段：テキスト＋人物写真 */
.sec07-top{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}

.sec07-info{
  flex: 1;
	border-left:5px #009b4a solid;
	padding-left:20px;
	
}

.sec07-position{
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.8;
	font-weight:bold;
}

.sec07-name{
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.sec07-name-main{
  font-size: 1.5rem;
  margin-right: 8px;
}

.sec07-name-kana{
  font-size: 0.95rem;
}

.sec07-photo img{
  display: block;
  max-width: 160px;
  height: auto;
}

/* 仕切り線 */
.sec07-separator{
  margin: 20px 0 22px;
  border-bottom: 1px solid #cccccc;
}

/* 下段：教室写真＋プロフィール文 */
.sec07-bottom{
  display: flex;
  gap: 25px;
  background: rgba(255,255,255,0.4);
  padding: 20px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}

.sec07-room-photo{
  flex: 0 0 34%;
}

.sec07-room-photo img{
  width: 100%;
  height: auto;
  display: block;
}

.sec07-profile-text{
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.9;
}

.sec07-profile-text p{
  margin: 0 0 8px;
}

/*------------------------------
  sec08 研修内容
------------------------------*/
.harassment-sec08{
  padding: 70px 0 80px;
  background: #ffffff;
}
.sec08-lead{ text-align:center;}


/* 2カラム → スマホ1カラム */
.plan-cards {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* カード基本スタイル */
.plan-card {
  flex: 1;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.plan-basic{background: #009b4a;}
.plan-advanced{background: #dee44e;}

/* ヘッダー色違い */
.plan-head {
  text-align: center;
  padding: 22px 18px 18px;
}

.plan-basic .plan-head {
  background: #009b4a;
  color: #ffffff;
}

.plan-advanced .plan-head {
  background: #dee44e;
  color: #006b24;
}

.plan-basic .plan-title,
.plan-advanced .plan-title{
  font-size: 1.4rem;
  font-weight: 700;
	margin-bottom:10px;
}

.plan-advanced .plan-title{ color:#000;}

.plan-sub {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.plan-advanced .plan-sub{ color:#000; margin-bottom:10px;}

.plan-price,
.plan-body,
.plan-list,
.plan-timeschedule {
  background:#ffffff!important;
	margin:0 10px 10px;
}

/* 料金ボックス */
.plan-price {
  text-align: center;
  background: #ffffff;
margin:0 10px 0!important;
  padding: 18px 16px 16px;
  border-top: 2px solid #e3e3e3;
  border-bottom: 2px solid #e3e3e3;
}
.plan-price p{margin-bottom:0;}

.plan-time {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.plan-price-main {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #009b4a;
}

.plan-advanced .plan-price-main {
  color: #009b4a; /* 画像に合わせてそのままグリーン系 */
}

.plan-price-note {
  margin: 0;
  font-size: 0.9rem;
}

/* 本文（スケジュール） */
.plan-body {
  padding: 18px 16px 20px;
}

/* タイムスケジュール見出し */
.plan-timeschedule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff7ec;
  border-radius: 4px;
  padding: 6px 10px 6px 0;
  margin-left:0;	 
  margin-bottom: 12px;
}

.plan-timeschedule-icon {
  font-size: 1.1rem;
  color: #f7941d;
}

.plan-timeschedule-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f7941d;
}

/* リスト */
.plan-list {
  list-style: none;  
  padding-left: 0;
  margin: 0;
font-size:0.8em;
  line-height: 1.9;
}

.plan-list li {
  margin-bottom: 2px;
  color: #333;
  display: flex;
}

.plan-list .time {
  color: #009b4a;
  font-weight: 700;
  margin-right: 8px;
  white-space: nowrap;
}

/* 下部写真（基本プランのみ使用） */
.plan-photo {
  margin: 0;
  border-top: 6px solid #009b4a;
}

.plan-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* レスポンシブ */
@media screen and (max-width: 900px) {
  .plan-cards {
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  .harassment-sec08 {
    padding: 45px 0 60px;
  }
  .plan-head {
    padding: 18px 14px 14px;
  }
  .plan-title {
    font-size: 1.2rem;
  }
}

/*------------------------------
  レスポンシブ調整
------------------------------*/
@media screen and (max-width: 900px){

  .sec07-profile-card{
    padding: 25px 20px 30px;
  }

  .sec07-top{
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .sec07-photo img{
    max-width: 140px;
    margin-left: auto;
    margin-right: auto;
  }

  .sec07-bottom{
    flex-direction: column;
  }

  .sec08-plans{
    flex-direction: column;
  }
}

@media screen and (max-width: 600px){
  .harassment-sec07{
    padding: 45px 0 55px;
  }
  .harassment-sec08{
    padding: 50px 0 60px;
  }
  .sec07-heading,
  .sec08-heading{
    font-size: 1.4rem;
  }
}

/*------------------------------
  harassment-sec09
------------------------------*/
.harassment-sec09{ background-color:#e1f9ec; padding:50px 0!important; margin-bottom:0!important;}

/* PC：左右画像＋中央テキスト */
.harassment-sec09-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
gap: 50px; /* 代わりに必要な余白は gap でつける */
margin-top: 20px;
margin-right:0;
}

.harassment-sec09-text{ 
	text-align:center;
}


.harassment-sec09-img {
  flex: 0 0 20%;
  text-align: center;
}

.harassment-sec09-img img {
  max-width: 100%;
  height: auto;
}

.harassment-sec09-text {
  flex: 0 0 50%;
  text-align: center;
	font-size:0.85em;
}

/* -------------------------
   スマホ（768px以下）
------------------------- */
@media screen and (max-width: 768px) {

  .harassment-sec09-flex {
    flex-direction: column;
    text-align: center;
  }

  .harassment-sec09-img {
    flex: none;
    width: 70%;
    margin-bottom: 20px;
  }

  .harassment-sec09-text {
    width: 100%;
  }
}




/************************************
**　投稿ページ
************************************/
.entry-content{max-width:1100px; margin:0 auto;}


/* 記事全体 */
.blog-post {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
  color: #333;
}

/* タイトル */
.blog-title {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 8px;
  color: #2c3e50;
}

/* メタ情報 */
.blog-meta {
  font-size: 0.85em;
  color: #777;
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

/* セクション見出し */
h2.post-head {
 padding: 1rem 2rem;
  border-bottom: 3px solid #c89433;
  background: #f4f4f4!important;
}

/* 段落 */
.blog-section p {
  margin-bottom: 16px;
}

/* リスト */
.blog-section ul {
  margin: 16px 0;
  padding-left: 20px;
}

.blog-section li {
  margin-bottom: 12px;
}

/* リスト内の強調 */
.blog-section li strong {
  color: #2c3e50;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .blog-post {
    padding: 16px;
  }

  .blog-title {
    font-size: 1.5em;
  }

  .section-heading {
    font-size: 1.2em;
  }
}



/************************************
**　投稿カテゴリページ
************************************/
/* カードを3カラムにする */
.list {
	max-width:1100px;
	margin:0 auto;
	
}

/* 各カード全体 */
.entry-card-wrap {
  display: block;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}

/* ホバー効果 */
.entry-card-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* 画像部分 */
.entry-card-thumb {
  position: relative;
  overflow: hidden;
}

.entry-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.1);
}

/* カテゴリラベル */
.entry-card-thumb .cat-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #009b4a;
  color: #fff;
  font-size: 0.75em;
  padding: 4px 8px;
  border-radius: 4px;
}

/* コンテンツ部分 */
.entry-card-content {
  padding: 16px;
}

/* タイトル */
.entry-card-title {
  font-size: 1.1em;
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.4;
}

/* スニペット */
.entry-card-snippet {
  font-size: 0.9em;
  color: #555;
  margin: 0 0 12px;
}

/* メタ情報 */
.entry-card-meta {
  font-size: 0.8em;
  color: #888;
  display: flex;
  justify-content: space-between;
}

/* 日付アイコンとテキスト */
.entry-card-meta .fa {
  margin-right: 4px;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .list {
    grid-template-columns: 1fr;
  }
}

/************************************
**　レスポンシブ対応 (1100px以下 - タブレット横向き)
************************************/
@media screen and (max-width: 1100px) {
.home .page .inner,
.page-id-237 .page .inner{
	width:100%;
	margin:0 auto;
	padding:0 10px;	
}
	
.page:not(.home) #main
.page-id-237 .page:not(.home) #main{
	width:100%;
	margin:0 auto;
}		

	
	
/************************************
** ヘッダー
************************************/
/* ヘッダーコンテナの幅・配置調整 */
    #header-container-in { 
        width: 100%; 
        position: relative; 
        padding-top: 70px !important;
    }
    
    /* ヘッダーコンテナの余白調整 */
    #header-container {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    
    /* ロゴ位置調整 */
    .logo {
        position: absolute;
        top: 0px;
        left: 0;
    }
	
/* メニューサイズ調整 */
#menu-h-menu li{ width: 100px!important; }
#menu-h-menu li#menu-item-13{ width: 180px!important; }
	
    /* 固定ヘッダーナビゲーション位置調整 */
	.fixed-header #navi .navi-in {
        position: absolute;
        left: 50px !important;
        top: 10px;
    }
    
    /* 固定ヘッダーメニューラベルサイズ調整 */
    .fixed-header .header-container-in.hlt-top-menu .navi-in .item-label { 
        font-size: 0.8em !important;
    }
    
    /* 固定ヘッダーロゴ位置調整 */
    .fixed-header .logo { 
        position: absolute;
        top: 10px;
        left: 0; 
    }
    
    /* 固定ヘッダーサブメニュー配置調整 */
    .fixed-header .h-submenu {
        width: 340px;
        position: absolute;
        top: -10px;
        left: 750px;
        margin-top: 0 !important;
    }
    
    /* 固定ヘッダーサブメニュー項目幅調整 */
    .fixed-header .h-submenu li { 
        max-width: 120px;
    }
}

/************************************
** タブレット表示（841px以上1023px以下）
************************************/
@media screen and (min-width: 841px) and (max-width: 1023px) {
	 .fixed-header #menu-h-menu li {
        width: 70px!important; /* 幅を狭く */
        padding: 10px 2px 0 2px;
    }
    
    .fixed-header #menu-h-menu li#menu-item-13 {
        width: 100px; /* 特別項目も調整 */
    }	
	
    /* タブレット用画像切り替え */
    .pc-img { display: none !important;}
    .tab-img { display: inline !important;}
    .tab-smt { display: inline !important;}
    .smt-img { display: none !important;}
}

/********************************************************************
** レスポンシブ対応 (1023px以下 - タブレット縦向き・モバイル切り替え)
*********************************************************************/

/************************************
** ヘッダー
************************************/
@media screen and (max-width: 1023px) {
    /* ヘッダーをモバイルメニューに切り替え */
	body{ background:none;}	
	
    #header-container {
        padding-top: 15px;
        padding-bottom: 0px;
        display: none; /* モバイルメニューに切り替え */
    }
    
    /* 固定ヘッダーナビゲーション位置調整 */
    .fixed-header #navi .navi-in {
        position: absolute;
        left: 230px !important;
        top: 10px;
    }
 .alignright, 
 .alignleft {
    float: none !important;
    display: block;
    margin: 10px auto;
  }
  
  img.alignright, 
  img.alignleft {
    display: block;
    margin: 10px auto;
  } 
}

/************************************
** スマートフォン表示（1023px以下）
************************************/
@media screen and (max-width: 1023px) {

/************************************
**　画像切り替え 	
************************************/	
.pc-img { display: none !important;}
.tab-img { display: none !important;}
.tab-smt { display: inline !important;}
.smt-img { display: inline !important;}
    
/* メインビジュアル調整 */
#main-image .smt-img { display: inline !important;}
#main-image .tab-img { display: none !important;}



/************************************
** モバイルメニューボタン調整
************************************/
.mobile-menu-buttons{ min-height:60px;}	
.mobile-menu-buttons .menu-caption{ display:none;}	
	
/* モバイルロゴ */
.mobile-menu-buttons .logo-menu-button {
position: absolute;
left: 10px;
top: 7px;
width: 200px;
}	

/* Cocoonのモバイルメニューボタン */
.mobile-menu-buttons .navi-menu-button{
        position: absolute;
        right: 0px;
        top: 15px;
}
.mobile-menu-buttons .menu-icon .fa-bars::before{ font-size:1.4em!important;color:#222;}	
/************************************
** スマホ用メニューボタン横並び
************************************/
/* サブメニューを横並びに */
    .h-submenu {
        display: flex !important;
        position: absolute;
        top: 5px;
		right:65px;
		width: auto !important;
           margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
        gap: 5px;
    }
	.h-submenu li{max-width:50px;}
	
/************************************
** marker非表示
************************************/
/* リストマーカーを非表示 */
li::marker {
  content: ""!important;
}

/************************************
** main
************************************/	
/* main */
.home #main-image,
.page-id-237 #main-image{ 
	background: transparent url(images/bg-main-smt.jpg) center top no-repeat;
	min-height:700px;
}		
}

/************************************
** スマートフォン表示（840px以下）
************************************/
@media screen and (max-width: 840px) {

/************************************
**　画像切り替え 	
************************************/	
.pc-img { display: none !important;}
.tab-img { display: none !important;}
.tab-smt { display: inline !important;}
.smt-img { display: inline !important;}	

/************************************
** 			TOP
************************************/	
.home #main-image,
.page-id-237 #main-image{ 
width: 100%;
background: #ffffff url(images/bg-main-smt.jpg) center top no-repeat;
min-height:1200px;
}
	
.home #main-image p,
.page-id-237 #main-image p{ 
	width:100%; 
	padding-left: 0px;
	padding-top:20px;
}	
.home #main-image p img,
.page-id-237 #main-image p img{
        margin: 0px auto;
        width: 100%;
}
}

/************************************
** スマートフォン表示（640px以下）
************************************/
@media screen and (max-width: 640px) {

/************************************
** モバイルメニューボタン調整
************************************/
/* Cocoonのモバイルメニューボタン */
.menu-button {
        position: absolute;
        right: 100px;
        top: 5px;
        width: 120px;
}

/* ヘッダーボタンのセレクター修正 */
#menu-h-menu #menu-item-13 a {
        background-image: url('images/h-reserve-smt.png'); /* スマホ用画像があれば */
}
/************************************
** main
************************************/	
.home #main-image,
.page-id-237 #main-image{ 
background-size:contain;
min-height:550px;
}	
}
/************************************
** 小型スマートフォン対応（480px以下）
************************************/
@media screen and (max-width: 480px) {
.home #main-image,
.page-id-237 #main-image{ 
background-size:contain;
min-height:650px;
}	
}
@media screen and (max-width: 390px) {
.home #main-image,
.page-id-237 #main-image{ 
min-height:550px;
}
}

@media screen and (max-width: 320px) {
.home #main-image,
.page-id-237 #main-image{ 
min-height:500px;
}	
.h-submenu {
        right: 50px;
}
}


/************************************
** googlemap
************************************/
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/************************************
** youtubeレスポンシブ
************************************/
.youtube iframe {
	width: 100%;
	height: 100%;
}
/*!動画の最大幅を指定する*/
.video-container{
   max-width: 100%; 
  margin: 30px 0;
}
	
/************************************
** アイキャッチ
************************************/
.page .eye-catch-wrap { /*アイキャッチ*/ display: none; }
.eye-catch-wrap{ display:block;}

/* シングルページのアイキャッチを左に表示 */
.single .eye-catch {
  float: right;
  width: 30%;
  margin-left: 20px;
  margin-bottom: 20px;
}

/* アイキャッチ内の画像を調整 */
.single .eye-catch img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

/* タブレット幅 (～1024px) */
@media screen and (max-width: 1024px) {
  .single .eye-catch {
    width: 200px;
    margin-left: 15px;
  }
}

/* スマホ幅 (～768px) */
@media screen and (max-width: 768px) {
  .single .eye-catch {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
  }
}