@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------
   ニュースタグの共通設定と色分け
--------------------------------------------------------- */

/* 1. デフォルト（基本）の背景色を設定 */
/* これを入れておけば、特定の色指定がないカテゴリーでもグレーで表示されます */
.news-tag {
    background-color: #999999; /* デフォルトはグレー */
    color: #ffffff;            /* 文字色は白 */
    /* 以下、必要に応じて調整してください */
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* 2. カテゴリーごとの色指定（スラッグに合わせて変更してください） */

/* スラッグが 'news' の場合 */
.news-tag.news {
    background-color: #dfa836; /* オレンジ系の色 */
}

/* スラッグが 'notice' の場合 */
.news-tag.notice {
    background-color: #dfa836;
}

/* スラッグが 'information' の場合 */
.news-tag.information {
    background-color: #dfa836;
}


/* お知らせ詳細ページ：戻るボタンのエリア */
.back-btn-area {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}

ul.column-rct{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 !important;
}

ul.column-rct li.column-rct-left{
	display: inline-block;
	float: left;
	width: 62%;
	height: auto;
	list-style: none;
	vertical-align: top;
	text-align: left;
	margin-bottom: 2%;
}

ul.column-rct li.column-rct-right{
	display: inline-block;
	float: right;
	width: 33%;
	height: auto;	
	list-style: none;
	vertical-align: top;
	text-align: left;
	margin-top: 3%;
	margin-right: 3%;
}

@media screen and (max-width: 768px){
ul.column-rct li.column-rct-left,
ul.column-rct li.column-rct-right{
	float: none;
	width: 100%;
	height: auto;
	margin-right: 0;
}
}

.sidebar{
	float: right;
	width: 20%;
	height: auto;
}

ul.sidebar-list{
	margin-top: 1.3rem;
}

ul.sidebar-list li{
	font-family: "Zen Old Mincho", "Yu Mincho Light", YuMincho, "Yu Mincho", 游明朝体, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho", serif;		
	margin: 1rem 0;
	margin-left: 7px;
    align-items: center;
    display: flex;
}

ul.sidebar-list li::before{
	content: "";
	width: 15px;
    height: 1px;
	margin-right: 15px;
    background-color: #6F6F6F;
}

/* コンテナ幅設定（1080px） */
.container-news-1080 {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px; /* スマホなどで端がくっつかないための余白 */
    box-sizing: border-box;
}
	
.container-news-single {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px; /* スマホなどで端がくっつかないための余白 */
    box-sizing: border-box;
}
	
.main-content{
	float: left;
	width: 78%;
	height: auto;
}

@media screen and (max-width: 768px){
.main-content,
.sidebar{
	float: none!important;
	width: 100%;
	height: auto;
}
}

/* ---------------------------------------------------------
   TOPページ下部 お知らせセクション
--------------------------------------------------------- */


#top-news-section {	
	padding-top: 3rem;
	padding-bottom: 2rem;
	background-color: #FBF4E9;	
}

/* 左右レイアウト（PC用） */
.news-section-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 左側：タイトルエリア */
.news-header-area {
    width: 25%; /* 左側の幅 */
}

.news-main-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: #333;
}

.news-list-link {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: bold;
}

/* リンク左の矢印（＞） */
.news-list-link::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #eb6100; /* アクセントカラー（オレンジ） */
    border-right: 2px solid #eb6100;
    transform: rotate(45deg);
    margin-right: 8px;
    margin-bottom: 2px;
}

/* 右側：記事リストエリア */
.news-list-area {
    width: 70%; /* 右側の幅 */
}

.top-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ddd; /* 一番上の線 */
}

.top-news-list li {
    border-bottom: 1px solid #ddd; /* 各行の下線 */
}

.news-item-link {
    display: flex;
    align-items: center;
    padding: 20px 0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.news-item-link:hover {
    opacity: 0.7;
}

/* 日付とタグのグループ */
.news-meta {
    display: flex;
    align-items: center;
    min-width: 220px; /* 日付+タグエリアの幅確保 */
}

.news-date {
    font-family: 'Josefin Sans', sans-serif; /* 英数字用フォント */
    font-size: 16px;
    margin-right: 20px;
    color: #333;
    width: 90px; /* 日付の位置を揃える */
}

.news-cat-tag {
    background-color: #666; /* タグの背景色（画像に合わせてグレー） */
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    display: inline-block;
    min-width: 80px;
    text-align: center;
	margin-right: 1rem;
}

/* タイトル部分 */
.news-title {
    font-size: 15px;
    line-height: 1.6;
    flex: 1; /* 余った幅いっぱいに広げる */
}

/* ---------------------------------------------------------
   スマホ表示（767px以下）の調整
--------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .news-section-inner {
        display: block; /* 縦積みに変更 */
    }

    .news-header-area {
        width: 100%;
        margin-bottom: 30px;
    }

    .news-list-area {
        width: 100%;
    }

    .news-item-link {
        display: block; /* 中身も縦積みに（必要であれば） */
        padding: 15px 0;
    }

    .news-meta {
        margin-bottom: 8px; /* 日付タグの下に余白 */
    }
    
    .news-date {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------
   ヘッダーロゴ位置の修正
--------------------------------------------------------- */
.header-logo {
    margin-top: 0 !important;    /* 上部の余白を強制的に削除 */
    margin-bottom: 0 !important; /* 下部の余白も削除 */
    padding-top: 0 !important;   /* 内側の上部余白も削除 */
    line-height: 1;              /* 行の高さによる余白を詰める */
}

/* 画像自体の位置調整と、画像下の隙間（ディセンダー）対策 */
.header-logo img {
    display: block;              /* ブロック要素にして隙間をなくす */
    margin: 0;                   /* 画像自体の余白をゼロに */
    vertical-align: bottom;      /* 下揃え */
}

/* リンクタグの余白リセット */
.header-logo a {
    display: block;
    margin: 0;
    padding: 0;
}

section {
    scroll-margin-top: 60px;
}	

p.about-text-center{
	text-align: center!important;
}

.objective{
	text-align: center;
	width: 55%;
	height: auto;
	margin: 3rem auto;
}

#rct-about-end{}

#rct-about-end h2{
	font-size: 28px;
	text-align: center;
}

#rct-about-end h2 span{
	display: block;
	font-size: 14px;
	margin-bottom: 1rem;
	letter-spacing: 2;
}

#message{
	margin-top: 0;
	padding-top: 3rem;
	padding-bottom: 2.5rem;
	background-color: #FBF4E9;
}

#message .column-left img{
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
}

#message ul.column-msg{
    display: flex; 
    margin: 0;
    padding: 0;
    list-style: none;
}

#message ul.column-msg li{
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
    flex-shrink: 0; 
    flex-basis: 50%;
}

#message ul.column-msg li img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

#message h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
}

#message h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;
}

#message .space{
	margin-bottom: 83px;
}

#message p{
	line-height: 1.8;
	text-align: justify;
}

.greeting-sp-ichi02{
	float: left!important;
}

.greeting-sp-ichi01{
	float: right!important;
}

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

.column-left {
    width: 600px; 
    padding: 20px;
}

.column-right {
    width: 510px;
    padding: 20px;
}

.director-name{
	margin-left: auto;
	margin-right: 0;
	width: 185px;
}

#features{
	margin-top: 5rem;
	margin-bottom: 5rem;
	text-align: center;
}

#features h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
}

#features h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;
}

#features p{
	text-align: center;
}

#features img{
	width: 50%;
	margin-top: 0;
	padding-top: 0;
}

#initiative{
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	background-color: #FBF4E9;
}

#initiative p{
	text-align: justify;
}

#initiative img{
	border-radius: 20px;
}

#initiative h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
	margin-bottom: 3rem;
}

#initiative h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;
}

#initiative h4 img{
	text-align: start;
	width: auto;
	height: 120px;
}

#initiative h5{
	text-align: center;
}

/* facility.php -施設案内- */
main.u-facility{}

main.u-facility p{
	text-align: justify;
}


#u-features{
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;		
}

#u-features ul.column-fea{
    display: flex; 
    margin: 0;
    padding: 0;
    list-style: none;
}

#u-features ul.column-fea li{
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
    flex-shrink: 0; 
    flex-basis: 50%;
}

#u-features ul.column-fea li img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

#u-features h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
	margin-bottom: 3rem;	
}

#u-features h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;
}

#u-features p{
	text-align: center;
}

#activity{
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	background-color: #FBF4E9;
}

#activity h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
	margin-bottom: 3rem;		
}

#activity h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;	
}

.card-list-wrapper {
    display: flex;
    justify-content: space-between; /* 要素間に均等な余白を配置 */
    gap: 30px; /* カラム間の隙間を30pxに設定（現代的なFlexboxの書き方） */
}

.card {
    /* 3つの要素が均等な幅になるように設定 */
    flex-grow: 1; /* 均等にスペースを埋める */
    flex-basis: 0; /* flex-growとの組み合わせで均等幅になる */
    /* width: calc( (100% - 60px) / 3);  */ /* 古いブラウザ対応のために固定幅を使う場合 */
    
    background-color: #FFFFFF; /* カード自体の背景色（白） */
    border-radius: 15px; /* カード全体の角丸 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影（立体感を出す） */
    overflow: hidden; /* 角丸からはみ出る画像を隠すために重要 */
}

.card-image {
    line-height: 0; /* 画像の下にできるわずかな隙間を解消 */
}

.card-image img {
    width: 100%;
    height: auto;
    display: block; /* 画像の下の隙間を解消 */
    /* 画像の上部角丸は、親要素の overflow: hidden; で実現される */
}

.card-content {
    padding: 25px; /* テキストの周囲の余白 */
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #F39800!important;
    margin-bottom: 1rem!important;
}

.card-text {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* ====================================
 * レスポンシブ対応（モバイル向け）
 * ==================================== */
@media (max-width: 768px) {
    .card-list-wrapper {
        flex-direction: column; /* 縦に積み重ねる */
        gap: 20px; /* 縦積みになったときのカード間の余白 */
    }
    
    /* カードは幅いっぱいに広がる (flex-grow: 1, flex-basis: 0 の設定によりwidth: 100%は不要) */
}


/* ====================================
 * #schedule セクション全体の設定
 * ==================================== */
#schedule {
    padding: 60px 0;
    background-color: #FFFFFF; /* 背景色（必要に応じて） */
}

/* コンテナ設定（コンテンツの最大幅と中央寄せ） */
#schedule .container {
    max-width: 1100px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ====================================
 * 2カラムレイアウト（Flexbox）
 * ==================================== */
.schedule-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 50px; /* 左右のカラム間の余白 */
}

.timeline-column {
    width: 30%; /* 左右均等幅 */
}

/* ====================================
 * タイムラインアイテムの設定
 * ==================================== */
.timeline-item {
    /* ベースカラー */
    --base-bg-color: #F9FDFF;
    --base-border-color: #A1D7E9; /* 主要な青色 */
    --base-text-color: #3B92B1;
    --time-text-color: #A1D7E9;

    /* レイアウト */
    position: relative;
    padding: 20px 40px 20px 40px;
    margin-bottom: 33px; /* アイテム間の余白 */
    
    /* デザイン */
    background-color: var(--base-bg-color);
    border: 2px dotted var(--base-border-color);
    border-radius: 50px; /* カプセル型にするための大きな角丸 */
    text-align: start;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 矢印（要素間の区切り） */
.timeline-item::after {
    content: "▼"; /* 矢印の記号 */
    position: absolute;
    bottom: -23px; /* アイテムの下側に配置 */
    left: 50%;
    transform: translateX(-50%);
    color: var(--base-border-color);
    font-size: 16px;
    line-height: 1;
}

.sankaku{
	margin-top: 2rem;
}

.sankaku::before {
    content: "▼"; /* 矢印の記号 */
    position: absolute;
	top: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--base-border-color);
    font-size: 16px;
    line-height: 1;
}



/* 最後のアイテムの矢印は非表示にする */
.timeline-item:last-child::after {
    display: none;
}

/* 時間ラベルのスタイル */
.time-label {
	font-size: 18px;
    display: inline;
    font-weight: bold;
    color: var(--time-text-color);
    margin-right: 18px;
	letter-spacing: 2px;
}

/* 活動テキストのスタイル */
.activity-text {
	font-size: 18px;
    display: inline;
    color: var(--base-text-color);
    font-weight: bold;
    margin: 0;
}

.activity-text span{
	display: block;
	text-align: end;
	font-size: 14px;
}

/* 黄色いハイライトアイテムの設定 (昼食) */
.timeline-item.highlight {
    --highlight-bg-color: #f7f0da; /* 黄色っぽい背景色 */
    --highlight-border-color: #C9B68C; /* 昼食アイテムの枠線色 */
    
    background-color: var(--highlight-bg-color);
    border-color: var(--highlight-border-color);
}
.timeline-item.highlight .time-label,
.timeline-item.highlight .activity-text {
    color: #4a4a4a; /* ハイライトアイテムの文字色 */
}
.timeline-item.highlight::after {
    color: var(--highlight-border-color); /* 昼食アイテムの矢印色 */
}

/* ====================================
 * レスポンシブ対応（モバイル向け）
 * ==================================== */
@media (max-width: 768px) {
    .schedule-wrapper {
        flex-direction: column; /* 縦に積み重ねる */
        gap: 0; /* 縦積みになったら左右のカラム間の余白は不要 */
    }

    .timeline-column {
        width: 100%; /* 幅いっぱいに広げる */
        /* 右側のカラムと左側のカラムの間に余白を作る */
        margin-bottom: 0;
		margin-top: -1.5rem;
    }
}

#schedule .schedule-bottom{
	margin-top: 2rem;
    /* ベースカラー */
    --base-bg-color: #F9FDFF;
    --base-border-color: #A1D7E9; /* 主要な青色 */
    --base-text-color: #3B92B1;
    --time-text-color: #A1D7E9;

    /* レイアウト */
    position: relative;
    padding: 10px 40px 10px 40px;
    margin-bottom: 33px; /* アイテム間の余白 */
    
    /* デザイン */
    background-color: var(--base-bg-color);
    border: 2px dotted var(--base-border-color);
    border-radius: 5px; /* カプセル型にするための大きな角丸 */
    text-align: start;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);	
	
}

#schedule .schedule-bottom h2{
	margin-bottom: 0.25rem;
	color: #3B92B1;
}

#schedule .schedule-bottom p{
	line-height: 2;
}



/* ====================================
 * #event セクション全体の設定
 * ==================================== */
#event {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
    background-color: #FBF4E9; /* 背景色（必要に応じて） */
}

#event h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
	margin-bottom: 3rem;		
}

#event h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;	
}


/* コンテナ設定 */
#event .container {
    max-width: 1100px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

/* セクションタイトル（必要に応じて） */
#event .section-title {
    text-align: center;
    margin-bottom: 40px;
}

/* ====================================
 * 2カラムレイアウト（Flexbox）
 * ==================================== */
.event-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 50px; /* 左右のカラム間の余白 */
}

.event-list {
    width: 50%; /* 左右均等幅 */
    margin: 0;
    padding: 0;
    list-style: none; /* リストマークを削除 */
}

/* ====================================
 * イベントアイテム（行）の設定
 * ==================================== */
.event-item {
    display: flex;
    padding: 15px 0; /* 行の上下の余白 */
    /* 画像にあるような点線（破線）の区切り線 */
    border-bottom: 1px dashed #cccccc; 
}

/* リストの最後の要素は区切り線を非表示にする */
.event-list .event-item:last-child {
    border-bottom: none;
}

/* 月の部分（左寄せ） */
.event-item .month {
    flex-shrink: 0; /* 幅を固定し、縮まないようにする */
    width: 100px; /* 月の部分の幅 */
    font-weight: bold;
    color: #333333;
    font-size: 16px;
}

/* イベント活動の部分（右側） */
.event-item .activity {
    flex-grow: 1; /* 残りのスペースを埋める */
    color: #666666;
    font-size: 16px;
    line-height: 1.5;
}

/* ====================================
 * レスポンシブ対応（モバイル向け）
 * ==================================== */
@media (max-width: 768px) {
    .event-wrapper {
        flex-direction: column; /* 縦に積み重ねる */
        gap: 0; /* 縦積みになったら左右のカラム間の余白は不要 */
    }

    .event-list {
        width: 100%; /* 幅いっぱいに広げる */
        /* 右側のリストと左側のリストの間に余白を作る */
        margin-bottom: 0px; 
    }
}


/* ====================================
 * #u-about セクション全体の設定
 * ==================================== */
#u-about {
    padding: 30px 0; /* 上下の余白 */
    background-color: #FFFFFF;
}

/* コンテナ設定（コンテンツの最大幅と中央寄せ） */
#u-about .container {
    max-width: 1200px; /* ここでは汎用的に1200pxを使用（必要に応じて調整） */
    margin: 0 auto;
    padding: 0 10px;
}

/* ====================================
 * 3カラムレイアウト（Flexbox）
 * ==================================== */
.facility-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* アイテム間のわずかな余白 */
}

/* ====================================
 * 各施設アイテムの設定
 * ==================================== */
.facility-item {
    flex-grow: 1; /* 均等な幅 */
    flex-basis: 0; 
    position: relative;
    overflow: hidden; /* 画像がはみ出ないように */
}

/* 画像コンテナ */
.item-image {
    line-height: 0; /* 画像の下の隙間を解消 */
}

.item-image img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像を縦横比を保ちつつコンテナを埋める設定（もしあれば） */
    /* object-fit: cover; */ 
}

/* タイトル（オレンジ色のカプセル部分） */
.item-title {
    position: absolute;
    top: 0;
    left: 0; /* デフォルトは左寄せ */
    z-index: 10;
    
    background-color: #FF9900; /* オレンジ色 */
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 20px;
    
    /* 角丸カプセル型 */
    border-bottom-right-radius: 15px; /* 右下の角だけを丸める */
}

/* タイトルの配置調整（ふれあいホール：中央寄せ） */
.item-title-center {
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* タイトルの配置調整（浴室：右寄せ） */
.item-title-right {
    left: auto;
    right: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0; /* 右寄せなので、右下の角丸は不要 */
}

/* ====================================
 * レスポンシブ対応（モバイル向け）
 * ==================================== */
@media (max-width: 768px) {
    .facility-wrapper {
        flex-direction: column; /* 縦に積み重ねる */
        gap: 20px; /* 縦積みになったときのアイテム間の余白 */
    }

    /* 縦積みになったら、タイトルの配置をすべて左寄せに戻す */
    .item-title {
        left: 0;
        right: auto;
        transform: none;
        border-radius: 0;
        border-bottom-right-radius: 15px;
    }
}

/* ====================================
 * #main-about セクション全体の設定
 * ==================================== */
#main-about {
    padding: 60px 0;
    background-color: #FFFFFF;
}

/* コンテナ設定（コンテンツの最大幅と中央寄せ） */
#main-about .container {
    max-width: 1200px; /* ここでは1200pxを使用 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ====================================
 * 2カラムレイアウト（Flexbox）
 * ==================================== */
.about-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上端を揃える */
    gap: 40px; /* 左右のカラム間の余白 */
}

.info-column {
    /* 施設情報カラムの幅（例：40%） */
    flex-basis: 50%; 
    flex-grow: 1;
}

.map-column {
    /* 地図カラムの幅（例：60%） */
    flex-basis: 50%; 
    flex-grow: 1;
}

/* ====================================
 * 施設情報リスト（dl）の設定
 * ==================================== */
.facility-data {
    margin: 0;
    padding: 0;
}

/* 項目名（dt）と値（dd）の横並び設定 */
.facility-data dt,
.facility-data dd {
    padding: 12px 15px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* 項目名（dt）のスタイル */
.facility-data dt {
    /* 画像にあるような左側のグレーの背景色 */
    background-color: #F8F8F8; 
    font-weight: bold;
    color: #333;
    width: 25%; /* dtの幅 */
    float: left; /* ddと並べるためにフロートを使用 */
    box-sizing: border-box;
    /* 左右の項目が交互に色が変わるようにしたい場合は、:nth-child(odd)などを使用 */
}

.facility-data dt.gyou{
	height: 68px;
	padding-top: 22px;
	padding-bottom: 22px;
}


/* 値（dd）のスタイル */
.facility-data dd {
    color: #666;
    overflow: hidden; /* floatのdtの横に配置 */
    border-bottom: 1px solid #EEEEEE; /* 区切り線 */
}

/* 最後のddの区切り線を消す */
.facility-data dd:last-of-type {
    border-bottom: none;
}

/* dtとddの区切り（行）全体の設定 */
.facility-data dt:nth-of-type(odd),
.facility-data dd:nth-of-type(odd) {
    /* 奇数行の背景色を設定したい場合はここに記述 */
}

/* ====================================
 * 地図コンテナの設定
 * ==================================== */
.map-container {
    position: relative;
    /* 地図のアスペクト比を維持するためのハック（例：高さ400px） */
    padding-top: 250px; /* 縦のサイズ */
    height: 0; 
    overflow: hidden;
    border-radius: 8px; /* 地図に角丸を適用 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
}

/* ====================================
 * レスポンシブ対応（モバイル向け）
 * ==================================== */
@media (max-width: 768px) {
    .about-wrapper {
        flex-direction: column; /* 縦に積み重ねる（地図が上、情報が下） */
        gap: 30px; 
    }

    .info-column,
    .map-column {
        flex-basis: auto;
        width: 100%;
    }
    
    /* 縦積みになったら、dtとddを縦に並べる（スマホ向け） */
    .facility-data dt {
        float: none; 
        width: 100%;
    }
    .facility-data dd {
        padding-top: 5px; /* dtの下にddが来るので少し余白を調整 */
    }
    
    /* 地図のアスペクト比をスマホで調整 */
    .map-container {
        padding-top: 60%; /* 縦長になりすぎないよう調整 */
    }
}

main.u-about p{
	text-align: justify;
}

#main-summary .facility-name p{
	line-height: 1.8;
}

#u-about h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
	margin-bottom: 3rem;		
}

#u-about h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;	
}

.u-about h4{
	font-family: ten-mincho-text,serif;
	font-size: 18px;
	text-align: center;
	line-height: 2;
}


/* about.php - 法人概要ページ */
#main-summary {
    padding: 60px 0 20px 0; /* 上下の余白 */
}

#main-summary .container {
    max-width: 890px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

.static-content {
    text-align: center;
    padding-bottom: 40px;
}

.static-content hr {
    height: 1px; /* hrの高さを設定 */
    border: none; /* デフォルトの境界線を無効化 */
    border-top: 1px solid #DBD3C4; /* 上側の境界線を使って色と太さを指定 */
    margin: 30px auto; /* 上下の余白と中央寄せ（必要に応じて） */
    width: 100%; /* 幅の設定 */
}

.vision-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #333;
	text-align: center;
}
.vision-text {
	text-align: justify;
    font-size: 15px;
    color: #666;
    margin-top: 1rem;
	line-height: 1.8;
}

.summary-wrapper {
    /* 縦に並べるため、Flexboxを縦方向にするか、Flexbox自体を削除 */
    display: flex; /* Flexboxは維持しつつ */
    flex-direction: column; /* 縦並びに変更 */
    gap: 50px; /* 法人概要と沿革の間の縦の余白 */
    padding-top: 20px;
}

#company-about .summary-column {
    width: 80%!important; /* 幅を100%にする */
}



.summary-column {
    width: 100%; /* 幅を100%にする */
}

.column-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 5px;
    color: #333;
	text-align: center;
}

.column-title h2{
	letter-spacing: 2px;
}

.corporate-data {
    margin: 0;
    padding: 0;
    font-size: 15px;
}
.corporate-data dt,
.corporate-data dd {
    display: inline-block; /* 縦並びの定義リストに変更 */
    margin: 0;
    padding: 5px 0;
    line-height: 1.6;
}

.corporate-data dt {
    font-weight: bold;
    color: #333;
    padding-top: 15px; /* 項目名の上部に余白 */
    background-color: #EEEEEE; /* 項目名の背景色（左カラムを意識した淡い色） */
}

.corporate-data dd {
    color: #666;
    border-bottom: 1px solid #EEEEEE;
}
.corporate-data dd:last-of-type {
    border-bottom: none;
}

.history-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #DBD3C4;
    border-bottom: 1px solid #DBD3C4;	
}

.history-item {
    display: flex; /* 年月とイベント内容は引き続き横並び */
    padding: 10px 0;
    border-bottom: 1px solid #DBD3C4;
    font-size: 15px;
    line-height: 1.6;
	padding-top: 12px;
	padding-bottom: 12px;
}

.history-item .company-about-list {
    flex-shrink: 0;
    width: 140px; /* 年月の幅は維持 */
    font-weight: bold;
    color: #333;
    margin-right: 15px;
	text-align: center;
}

.history-item .year-month {
    flex-shrink: 0;
    width: 200px; /* 年月の幅は維持 */
    font-weight: bold;
    color: #333;
    margin-right: 15px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.history-item .event {
    flex-grow: 1;
    color: #666;
}

.history-item .event-history{
    flex-grow: 1;
    color: #666;
	padding-top: 12px;
	padding-bottom: 12px;
}

.history-list .history-item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    /* 法人概要のリストは既に縦並びにしたため調整不要 */
    
    /* 沿革のリストも縦並びにする */
    .history-item {
        flex-direction: column;
    }
    .history-item .year-month {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* information.page - 情報公開ページ - */
#document-list {
    padding: 60px 0; /* 上下の余白 */
    background-color: #FFFFFF; /* セクション自体の背景（必要に応じて） */
}

#document-list .container {
    max-width: 800px; /* テーブルが適切に見える幅に調整 */
    margin: 0 auto;
    padding: 0 20px;
}

.document-table {
    width: 100%;
    border-collapse: collapse; /* セル間の境界線を重ねる */
    color: #565656; /* 全体の文字色を白に */
}

/* 行とセルの共通スタイル */
.document-table tr {
    /* 画像のセパレータ線は、セルの上下境界線で実現 */
    border-bottom: 1px solid #DBD3C4; 
}

.document-table tr:first-child {
    border-top: 1px solid #DBD3C4; 
}

.document-table tr:last-child {
    border-bottom: 1px solid #DBD3C4; 
}

/* 見出しセル (左側の「概要」「令和X年度」) */
.document-table th {
    padding: 15px 20px;
    vertical-align: top; /* 縦方向の配置を上端に */
    width: 150px; /* 幅を固定 */
    text-align: left;
    font-size: 15px;
    font-weight: normal;
}

/* データセル (右側の書類名) */
.document-table td {
    padding: 15px 20px;
    vertical-align: middle;
    text-align: left;
    font-size: 15px;
}

.document-table a {
    /* リンクの色をテキストと同じ色（白）に設定 */
    color: inherit; 
    
    /* 下線を付ける (text-decoration: underline;) */
    text-decoration: underline; 
    
    /* ホバー時の装飾（例：色を変える、下線を消すなど） */
    transition: color 0.2s ease;
}

.document-table a:hover {
    color: #CCCCCC; /* ホバー時は薄いグレーに */
    text-decoration: underline;
}

@media (max-width: 600px) {
    .document-table {
        font-size: 14px;
        display: block; /* テーブルをブロック要素にして、スマホでスクロール可能にしたり、レイアウトを変更する準備 */
    }

    .document-table tr {
        display: flex; /* 行をFlexコンテナにする */
        flex-direction: column; /* 項目名と書類名を縦に並べる */
        padding: 0;
    }
    
    .document-table th {
        width: 100%; /* 幅いっぱい */
        text-align: center;
        padding-bottom: 5px;
        border-bottom: 1px solid #666666;
    }

    .document-table td {
        width: 100%; /* 幅いっぱい */
        text-align: center;
        padding: 10px 15px;
    }
    
    /* rowspanを適用したthに対応するため、flex-direction: column;では一部調整が必要です。
       簡略化のため、ここではthとtdが縦に並ぶシンプルな表示にしています。
       より厳密にrowspanを再現する場合は、リスト形式でマークアップを再構築する必要があります。
    */
}

/* contact.php　- お問い合わせ - */
#contact-form {
    padding: 60px 0;
    color: #6E6965; /* デフォルトの文字色を白に */
}

#contact-form .container {
    max-width: 780px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
	border: solid 1px #707070;
	border-radius: 5px;
}

.tel-label {
    font-size: 14px;
    margin-bottom: 5px;
}

.tel-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 5px;
}

/* 電話アイコンのサイズ調整（img/phone-icon.svg は適切なものに置き換えてください） */
.phone-icon {
    width: 30px; 
    height: 30px;
    margin-right: 10px;
    /* アイコンの色が黒の場合は、CSSフィルタで白に変換することが多いです
    filter: invert(100%); 
	 */
}

.reception-time {
    font-size: 14px;
}

.note-area {
    margin-bottom: 30px;
}

.note-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.required-note {
    font-size: 14px;
    color: #E60012; /* 赤色の「必須項目です」 */
    font-weight: normal;
}

.required-mark {
    color: #E60012; /* 赤色の「※」 */
    margin-right: 3px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

/* ラベル (項目名) */
.contact-form-body label {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 8px;
}

/* 入力フィールド (text, tel, email) */
.contact-form-body input[type="text"],
.contact-form-body input[type="tel"],
.contact-form-body input[type="email"], /* ← これを追加 */
.contact-form-body textarea {
    width: 100%;
    padding: 10px 15px;
    font-size: 15px;
    background-color: #FAF9F7;
    border: none;
    border: 1px solid #B2B2B2; 
    box-sizing: border-box;
    outline: none;
	border-radius: 5px;
}

.address-fields {
    display: flex;
    gap: 20px;
}
.zip-field {
    display: flex;
    align-items: center;
    width: 150px; /* 郵便番号フィールドの幅 */
}
.zip-field label {
    font-size: 18px;
    font-weight: normal;
    margin-right: 5px;
    margin-bottom: 0;
}
.zip-input {
    flex-grow: 1;
}
/* 住所入力欄の枠（spanタグ）を横幅いっぱいに広げる */
.address-fields .wpcf7-form-control-wrap {
    flex-grow: 1;
    width: 100%; /* これがないと中のinputが広がらない場合があります */
}

/* お問い合わせ内容（テキストエリア）の余白を強制的に修正 */
.contact-form-body textarea.wpcf7-form-control {
    padding: 10px 15px !important; /* !importantで優先順位を高くして48pxを打ち消す */
}

.address-input {
    width: 100%;
}

/* Contact Form 7 が自動挿入する不要な改行（brタグ）を非表示にする */
.form-group br {
    display: none;
}

.contact-form-body textarea {
    resize: vertical; /* 縦方向のみリサイズ可能 */
    border: 1px solid #B2B2B2;
}

.requirement-group .checkbox-options {
    display: flex;
    gap: 30px;
}

.checkbox-label {
    font-weight: normal;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    /* チェックボックス自体のスタイルをカンプに合わせて調整する場合、
       別途appearance: none;などを使ってカスタムデザインにする必要がありますが、
       ここでは標準のままにします。 */
}

.policy-acceptance-area {
    color: #000000; /* 文字色を黒に戻す */
    padding: 20px 30px;
    margin-top: 40px;
    text-align: center;
}

.policy-text {
    font-size: 14px;
    margin-bottom: 15px;
}
/* プライバシーポリシーのリンク */
.policy-link {
    color: #E60012; /* 赤色のリンク色 */
    text-decoration: none; /* 下線を消す */
    font-weight: normal;
}
.policy-link:hover {
    text-decoration: underline;
}

.policy-checkbox-label {
    font-size: 15px;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-area {
    text-align: center;
    padding-top: 30px;
}

.submit-button {
    width: 300px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF; /* 文字色を白に */
    /* ボタンの色（画像にあるような赤みを帯びたピンク） */
    background-color: #E8888F; 
    
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.submit-button:hover {
    background-color: #D3757A; /* ホバーで少し暗くする */
}

@media (max-width: 500px) {
    .tel-number-wrapper {
        font-size: 24px;
    }
    .phone-icon {
        width: 24px;
        height: 24px;
    }
    
    .address-fields {
        flex-direction: column; /* 住所の郵便番号と住所入力を縦に並べる */
        gap: 15px;
    }
    .zip-field {
        width: 100%;
    }
    
    .requirement-group .checkbox-options {
        flex-direction: column; /* チェックボックスを縦に並べる */
        gap: 10px;
    }

    .submit-button {
        width: 100%; /* ボタンを幅いっぱいに広げる */
    }
}

/* news-list.php お知らせ一覧 */
#all-news {
    padding: 60px 0;
    background-color: #FFFFFF;
}

#all-news .container {
    max-width: 950px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

.news-list {
    margin: 0;
    padding: 0;
    list-style: none; /* リストマークを削除 */
}

.news-item {
    display: flex; /* Flexboxで日付、タグ、タイトルを横に並べる */
    align-items: center; /* 縦方向の中央揃え */
    padding: 15px 0;
    border-bottom: 1px solid #EEEEEE; /* 薄いグレーの区切り線 */
    font-size: 15px;
    color: #4a4a4a;
}

/* 最後の要素の下線は非表示 */
.news-list .news-item:last-child {
    border-bottom: none;
}

.news-date {
    flex-shrink: 0; /* 縮まないように固定 */
    width: 100px; /* 日付部分の幅を固定 */
    font-size: 15px;
    margin-right: 2px;
    color: #666666;
}

/* タグ（お知らせ / イベント） */
.news-tag {
    flex-shrink: 0; /* 縮まないように固定 */
    display: inline-block;
    padding: 4px 10px;
    margin-right: 20px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
}

/* お知らせタグの色 */
.news-tag.announcement {
    background-color: #999999; /* グレー */
}

/* イベントタグの色 */
.news-tag.event {
    background-color: #A96262; /* 赤茶色/ワインレッド */
}

/* タイトル */
.news-title {
    flex-grow: 1; /* 残りのスペースを埋める */
    line-height: 1.5;
    /* リンクにする場合は以下を適用 */
    /* text-decoration: none; */
    /* color: inherit; */
}

@media (max-width: 600px) {
    .news-item {
        flex-direction: column; /* 縦に積み重ねる */
        align-items: flex-start; /* 左寄せにする */
        padding: 10px 0;
    }

    .news-date {
        width: auto;
        margin-right: 15px;
        margin-bottom: 5px; /* 日付の下に余白 */
        font-size: 14px;
    }

    .news-tag {
        margin-right: 10px;
        margin-bottom: 5px;
        font-size: 11px;
    }
    
    .news-title {
        width: 100%; /* タイトルを幅いっぱいに広げる */
        font-size: 15px;
    }
}


/* footer */
#foot{
	background-color: #F8F5F0;
}

#foot .c-footer{
	width: 100%;
	height: auto;
	overflow: hidden;
	background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
	background-attachment: inherit;
	background-position: top;
	padding-top: 30px;
}

#foot .w70-size{
	width: 180px;
}

#foot .w50-size{
	width: 150px;
}

#foot .w30-size{
	width: 100px;
}

.footer-flex-container {
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	gap: 40px;
}

.flex-item:nth-child(1) {
	 -webkit-order: 1;
	order: 1;
	width: 269px;
	height: auto;
	margin-right: 2%;
}

.flex-item:nth-child(1) img{
	width: 100%;
}

.flex-item:nth-child(2) {
	 -webkit-order: 2;
	order: 2;
	width: 450px;
	height: auto;
}

.flex-item:nth-child(3) {
	 -webkit-order: 3;
	order: 3;
    margin-left: auto;
	position: relative;
	top: 0;
	right: 0;
}

.footer-menu-flex-container {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	gap: 30px;
}

.footer-menu-flex-container > div {
}

.footer-menu-flex-container > div a {
	display: block;
    font-weight: 600;
    font-style: normal;
	font-size: 12px;
	color: #808080;
	margin: 0 auto 0.3rem auto;
	padding: 0;
}

.footer-menu-flex-container > div a h3 {
    font-weight: 600;
    font-style: normal;
	font-size: 12px;
	color: #808080;
	margin: 0 auto 0.3rem auto;
	padding: 0;
}

.footer-info{
	text-align: center;
	border: solid 1px #9A9A9A;
	padding: 2px auto;
}

.footer-info p{
	font-size: 14px;
    font-weight: 600;
    font-style: normal;
	padding: 6px 35px;
	margin: 1px auto 1px auto;
}

.footer-contact a{
	text-align: center;
}

.footer-contact a h2{
    font-weight: 400;	
	font-size: 20px;
	color: #3C3C3C;
}

.footer-contact a h2 span{
    font-weight: 400;	
	font-size: 16px;
	color: #3C3C3C;
}

.footer-bottom-flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	margin-top: 0.3rem;
}

.f-b-flex-item{
	font-size: 11px;
	color: #808080;
    font-weight: 200;
    font-style: normal;	
}

.f-b-flex-item p{
	margin-top: 0;
	padding-top: 0;
}

.f-b-flex-item a{
	margin-top: 0;
	padding-top: 0;
	margin-right: 1rem;	
}

.f-b-flex-item:nth-child(1) {
	margin-top: 0;
	padding-top: 0;
	margin-right: auto;
}

.f-b-flex-item:nth-child(2) {
	margin-top: 0;
	padding-top: 0;
	margin-left: auto;
}

.c-footer hr{
    height: 1px;
    background-color: #DDDDDD;
    width: 100%;
    border: none;
	margin: 1rem 0 0 0;
	padding: 0;
}

/* Parts */
.more-button {
    /* サイズとレイアウト */
    display: inline-block; /* インライン要素をブロック要素のように扱ってサイズを指定可能にする */
    padding: 15px 20px; /* 内側の余白 */
    min-width: 200px; /* ボタンの最小幅 */
    text-align: center; /* テキストを中央寄せ */

    /* 背景と境界線 */
    background-color: #FFFFFF; /* 通常時の背景色（白） */
    border: 2px solid #C9B68C; /* 境界線の太さと色 */
    border-radius: 50px; /* 角丸の大きさ（非常に大きくして楕円形にする） */

    /* テキストのスタイル */
    color: #4A4A4A; /* 通常時の文字色（暗めのグレー） */
    font-size: 16px; /* フォントサイズ */
    text-decoration: none; /* リンクの下線を消す */
    font-weight: bold; /* フォントの太さ */

    /* ホバー時の変化を滑らかにする（オプション） */
    transition: all 0.3s ease;
}

.more-button:hover {
    /* ホバー時の背景色 */
    background-color: #C9B68C;

    /* ホバー時の文字色 */
    color: #FFFFFF;

    /* 境界線は維持または背景色と同じにするとより自然です */
    border-color: #C9B68C;
}


/* Parts */
.more-button-welfare {
    /* サイズとレイアウト */
	margin-top: 1rem;
    display: inline-block; /* インライン要素をブロック要素のように扱ってサイズを指定可能にする */
    padding: 10px 10px 12px 10px; /* 内側の余白 */
    min-width: 200px; /* ボタンの最小幅 */
    text-align: center; /* テキストを中央寄せ */

    /* 背景と境界線 */
    background-color: #FFFFFF; /* 通常時の背景色（白） */
    border: 2px solid #C9B68C; /* 境界線の太さと色 */
    border-radius: 50px; /* 角丸の大きさ（非常に大きくして楕円形にする） */

    /* テキストのスタイル */
    color: #4A4A4A!important; /* 通常時の文字色（暗めのグレー） */
    font-size: 16px; /* フォントサイズ */
    text-decoration: none; /* リンクの下線を消す */
    font-weight: bold; /* フォントの太さ */

    /* ホバー時の変化を滑らかにする（オプション） */
    transition: all 0.3s ease;
	text-shadow: none!important;
}

.more-button-welfare:hover {
    /* ホバー時の背景色 */
    background-color: #C9B68C;

    /* ホバー時の文字色 */
    color: #FFFFFF!important;

    /* 境界線は維持または背景色と同じにするとより自然です */
    border-color: #C9B68C;
}

#top-messeage{
	background-color: none;
}

/* hero */
#hero{}

.hero-anchor{position: relative;}

.slider {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
} 
.slick-img img {
  width: 100%;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.10); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.hero-catch{
	position: absolute;
	top: 25%;
	left: 2%;
	width: 220px;
	height: auto;
}

.hero-catch img{
	width: 100%;
	height: auto;	
}

main.top{}

main.top p{
	font-size: 18px;
	line-height: 1.8;
}

main.top h1{
	margin-top: 5rem;
	margin-bottom: 5rem;
	text-align: center;
	color: #F39800;
    font-size: 38px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.15em; 
}
	
main.top h2{
	font-size: 20px;
	color: #565656;
}

main.top h2 span{
	display: block;
	font-size: 11px;
	color: #F39800;
}

main.top h3{
	font-size: 38px;
	color: #565656;
	margin-top: 0.5rem;
	margin-bottom: 1.25rem;
}

#top-messeage{
    position: relative; 
    min-height: 500px; 
    overflow: hidden;
	padding-bottom: 2.5%;
}

#top-messeage .messeage-text{
	width: 48%;
}

#top-messeage .message-image {
    position: absolute; 
    top: 5%;
    right: -2px; 
	width: 50vw;
    z-index: 10; 
    max-height: 650px;
}

@media screen and (max-width: 1100px){
#top-messeage .message-image {
	max-width: 480px;
}
}

#top-messeage .message-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
    border-top-left-radius: 30px; 
    border-bottom-left-radius: 30px; 
}

#top-about{
	margin-top: 2rem;
}

#top-about .about-whopper{
    position: relative; 
    min-height: 500px; 
    overflow: hidden;	
}

#top-about .about-image {
    position: absolute; 
    top: 0;
    left: -5px; 
	width: 45vw;
    z-index: 10; 
    max-height: 650px;
}

@media screen and (max-width: 1100px){
#top-messeage .about-image {
	max-width: 480px;
}
}

#top-about .about-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
    border-top-right-radius: 30px; 
    border-bottom-right-radius: 30px; 
}

#top-about .about-point{
	margin-top: 0;
    position: relative; 
	height: 100%;
    min-height: 500px; 
    overflow: hidden; 	
}

#top-about .about-text{
    position: absolute; 
    top: 0%;
    right: 0; 
	width: 50%;
    z-index: 10; 
}

#top-news{
	padding-top: 3rem;
	padding-bottom: 2rem;
	background-color: #FBF4E9;
}

#recruit-banner{
	background-color: #F8F5F0;
}

/*  recruit-php 採用情報ページ */
#hero-rct .interview-wrapper,
#hero-rct .interview-wrapper-left {
	position: absolute;
	top: 40%;
    width: 550px;
    margin: 0 auto; /* 中央寄せ（必要なければ削除） */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#hero-rct .interview-wrapper {
	right: 10%;
}

#hero-rct .interview-wrapper-left{
	left: 10%;	
}

#hero-rct .interview-chal{
	width: 300px;
	height: auto;
	margin-bottom: 2.5rem;
}

#hero-rct .message {
    text-align: left; 
    font-weight: 600; 
    font-size: 32px; /* サイズは親要素とのバランスを見て調整 */
    line-height: 1.4;
	margin-bottom: 1rem;
}

#hero-rct .message-line1,
#hero-rct .message-line2 {
    display: inline-block;
    padding: 7px 20px 7px 10px; /* テキスト周りの余白 */
    margin-bottom: 12px; /* 行間の調整 */
    box-sizing: border-box;
    color: #333333; /* 文字色を黒（または濃い色）に */
    background-color: #FFFFFF;
}

@media (max-width: 600px) {
    #hero-rct .message {
        font-size: 28px; /* スマホでサイズを小さくする */
        line-height: 1.5;
    }
    
    #hero-rct .message-line1,
    #hero-rct .message-line2 {
        padding: 4px 8px;
    }
}

#hero-rct .interview-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none; /* 下線を消す */
    color: inherit; /* 親の色を継承 */
    transition: opacity 0.3s ease;
}

#hero-rct .interview-badge {
    /* 画像に近い赤ピンク色 */
    background-color: #CD6669; 
    color: #FFFFFF;
    
    /* フレックスボックスで内部の要素を横並び・中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 文字と線の間隔 */
    
    /* サイズと角丸 */
    padding: 12px 30px; /* 内側の余白 */
    border-radius: 50px; /* カプセル型にする */
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.05em;
    
    /* バッジ部分が縮まないようにする */
    flex-shrink: 0;
}

/* 職種と入職年のテキスト */
#hero-rct .badge-job,
#hero-rct .badge-year {
    line-height: 1;
}

#hero-rct .badge-separator {
    display: block;
    width: 1px;
    height: 20px; /* 線の高さ */
    background-color: #FFFFFF;
}

#hero-rct .interview-text {
    font-size: 16px;
    font-weight: bold;
	padding: 10px 25px 10px 25px;
	border-radius: 15px;
    color: #000000;
    display: flex;
    align-items: center;
	background-color:rgba(255,255,255,0.65);
	border: solid 0.5px #000000;
}

#hero-rct .interview-text .arrow {
    margin-left: 10px;
    font-family: monospace; /* 記号の形を整えるため */
    font-weight: normal;
	color: #000000;
}

main.rct-top{}

main.rct-top p{
	font-size: 18px;
	line-height: 1.8;
}

main.rct-top h2{
	font-size: 18px;
	color: #565656;	
}

main.rct-top h2 span{
	display: block;
	font-size: 11px;
	color: #F39800;
}

main.rct-top h3{
	font-size: 28px;
	color: #565656;
	margin-top: 0.5rem;
	margin-bottom: 1.25rem;
}

#rct-fellow{
	margin-top: 4.5rem;
	margin-bottom: 3.5rem;
}

#rct-fellow .rct-top-1st-cont{
	width: 520px;
	height: auto;
}

#rct-messeage{
	background-color:rgba(238,134,143,0.08);
    position: relative; 
    min-height: 500px; 
    overflow: hidden;
	padding-bottom: 2.5%;
}

#rct-messeage .messeage-text{
	width: 48%;
}

#rct-messeage .message-image {
    position: absolute; 
    top: 5%;
    right: -2px; 
	width: 50vw;
    z-index: 10; 
    max-height: 650px;
}

@media screen and (max-width: 1100px){
#rct-messeage .message-image {
	max-width: 480px;
}
}

#rct-messeage .message-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
    border-top-left-radius: 30px; 
    border-bottom-left-radius: 30px; 
}

@media screen and (max-width: 1100px){
#rct-messeage .about-image {
	max-width: 480px;
}
}

#rct-about{
	margin-top: 2rem;
	background-color:rgba(238,134,143,0.08);
}

#rct-about .about-whopper{
    position: relative; 
    min-height: 500px; 
    overflow: hidden;	
}

#rct-about .about-image {
    position: absolute; 
    top: 0;
    left: -5px; 
	width: 45vw;
    z-index: 10; 
    max-height: 650px;
}

#rct-about .about-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
    border-top-right-radius: 30px; 
    border-bottom-right-radius: 30px; 
}

#rct-about .about-point{
	margin-top: 0;
    position: relative; 
	height: 100%;
    min-height: 500px; 
    overflow: hidden; 	
}

#rct-about .about-text{
    position: absolute; 
    top: 8%;
    right: 0; 
	width: 50%;
    z-index: 10; 
}

#rct-interview-top{
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: #FFFBD9;
}

#rct-interview-top h3{
	text-align: center;
}

#rct-interview-top p{
	text-align: center;
	margin-bottom: 2rem;
}

#rct-interview-top ul.rct-int-list {
    display: flex;
    list-style: none; 
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    
    /* ▼▼ 修正箇所ここから ▼▼ */
    /* 両端揃え（space-between）をやめて、隙間（gap）で管理する */
    justify-content: center; /* 全体を中央寄せ（または flex-start で左寄せ） */
    gap: 20px 30px;          /* 縦の間隔 20px、横の間隔 30px（※お好みで調整） */
    /* ▲▲ 修正箇所ここまで ▲▲ */
}

#rct-interview-top li.staff-card-wrapper {
	align-self: flex-start;
    width: 270px;
    position: relative; /* 子要素の絶対配置の基準 */
    border-radius: 20px; /* 画像の角丸を再現 */
    overflow: hidden; /* 角丸からはみ出る要素を隠す */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 影を付けて浮いているように見せる */
}

#rct-interview-top .staff-photo {
    width: 100%;
    /* 写真の縦横比を固定する場合、padding-topで調整 */
}

#rct-interview-top .staff-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* 親要素で角丸を設定済みのため、画像自体には角丸は不要 */
}

#rct-interview-top .staff-message {
    position: absolute;
    top: auto; /* 垂直方向は下部からの相対位置で調整 */
    bottom: 50px; /* タグの上辺よりも少し上に配置 */
    left: -6.5%;
    padding: 0 15px; /* 左右の余白 */
    font-size: 15px; 
    font-weight: bold;
    line-height: 1.5;
    color: #333333; /* 文字色を黒に */
}

#rct-interview-top .message-line {
    display: block;
    padding: 3px 8px; /* テキストの上下左右の余白 */
    margin-bottom: 5px; /* 行間の余白 */
    background-color: #FFFFFF; /* 白い背景色 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); /* 影を付けて少し浮き上がらせる */
    /* 1行目を短くするために、inline-blockを使うこともできますが、
       ここではシンプルにブロック要素としています。 */
    width: fit-content; /* テキスト幅に背景を合わせる */
}

#rct-interview-top .staff-tag {
    position: absolute;
    bottom: 10px; /* 下端からの位置 */
	right: 0;
    
    /* 画像にあるような薄い水色/シアンの背景 */
    background-color: #92C6D1; 
    color: #FFFFFF;
    
    display: flex;
    align-items: center;
    gap: 10px; /* 要素間の隙間 */
    
    padding: 8px 20px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

#rct-interview-top .tag-separator {
    font-weight: normal;
}

.interview-button-wrapper {
    /* ボタンを中央に配置したい場合は、以下の設定を追加 */
    /* text-align: center; */
    margin-top: 40px; /* 上部の余白（必要に応じて調整） */
}

.button-text{
	color: #FFFFFF;
}


.interview-button {
    /* 必須: 幅と表示形式の設定 */
    display: flex;
    justify-content: space-between; /* テキストとアイコンを左右に分ける */
    align-items: center;
    width: 273px; /* 指定された横幅 */
    margin: 0 auto; /* 中央寄せにしたい場合 */

    /* デザインの基本 */
    background-color: #050047; /* 濃紺の背景色 (画像からの近似色) */
    color: #FFFFFF; /* 白い文字色 */
    text-decoration: none;
    
    /* サイズと角丸 */
    padding: 15px 30px; /* 上下左右のパディング */
    border-radius: 50px; /* 大きな角丸（カプセル型） */
    
    /* フォント設定 */
    font-size: 20px;
    font-weight: bold;
    
    transition: background-color 0.3s ease;
}

/* ホバー時の効果（例: 少し色を薄くする） */
.interview-button:hover {
    background-color: #1a1a6a; 
}

.button-icon {
    /* 矢印を白い丸で囲む */
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 32px; /* 丸のサイズ */
    height: 32px;
    border-radius: 50%; /* 完全な丸 */
    background-color: #FFFFFF; /* 白い丸の背景 */
    
    /* 矢印自体の色とサイズ */
    color: #050047; /* 濃紺の矢印 */
    font-size: 20px;
    font-weight: normal; /* 矢印は細くする */
    line-height: 1;
}

/* 矢印の配置微調整 */
.button-icon > span {
    transform: translateX(1px); /* 矢印を中央に微調整 */
}



/* ====================================
 * #rct-news セクション全体の設定
 * ==================================== */
#rct-news {
    padding: 60px 0;
    color: #333333;
    font-family: sans-serif;
}

/* コンテナ設定（コンテンツの最大幅と中央寄せ） */
#rct-news .container {
    max-width: 950px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ====================================
 * セクションタイトル
 * ==================================== */
#rct-news .section-title {
    /* 左上の濃い文字色と大きなフォントを再現 */
    font-size: 28px;
    font-weight: bold;
    color: #333333; /* 背景が黒のため、白文字に */
	margin-bottom: 0;
	padding-bottom: 0;
    display: inline-block; /* 線をテキスト幅に合わせる */
}

.news-header {
    display: flex;
    justify-content: flex-end; /* 右端に配置 */
    /* タイトルとリスト本体の間に配置されるため、余白を調整 */
    padding-bottom: 10px; 
}

.view-all-link {
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.view-all-arrow {
    font-family: monospace;
    font-size: 12px;
    margin-right: 5px;
    opacity: 0.7;
}

/* ====================================
 * ニュースリストの設定
 * ==================================== */
.news-list {
    margin: 0;
    padding: 0;
    list-style: none; /* リストマークを削除 */
}

.news-item {
    display: flex; /* Flexboxで日付、タグ、タイトルを横に並べる */
    align-items: center; /* 縦方向の中央揃え */
    padding: 18px 0;
    border-top: 1px solid #333333; /* 細いグレーの区切り線（リスト上端にも線が入るようにtopで設定） */
    font-size: 15px;
    color: #333333;
}

/* 最後の要素の下線（リスト下端にも線が必要な場合はここで border-bottom を設定） */
.news-list .news-item:last-child {
    border-bottom: 1px solid #333333;
}


/* ====================================
 * 各要素のスタイル
 * ==================================== */

/* 日付 */
.news-date {
    flex-shrink: 0; 
    width: 70px; /* 日付部分の幅を固定 */
    font-size: 15px;
    margin-right: 20px;
    color: #AAAAAA; /* 少し薄い色 */
}

/* タグ（正規職員 / 事務局） */
.news-tag {
    flex-shrink: 0; 
    display: inline-block;
    padding: 3px 10px;
    margin-right: 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF; /* タグ内の文字は黒 */
}

/* 正規職員タグの色 */
.news-tag.full-time {
    background-color: #E8888F; /* 薄い赤/ピンク */
}

/* 事務局タグの色 */
.news-tag.office {
    background-color: #AAAAAA; /* グレー */
}

/* タイトル */
.news-title {
    flex-grow: 1; 
    line-height: 1.5;
}

/* ====================================
 * レスポンシブ対応（モバイル向け）
 * ==================================== */
@media (max-width: 600px) {
    .news-item {
        flex-direction: column; 
        align-items: flex-start; 
        padding: 15px 0;
    }

    .news-date {
        width: auto;
        margin-right: 15px;
        margin-bottom: 5px; 
        font-size: 14px;
    }

    .news-tag {
        margin-right: 10px;
        margin-bottom: 5px;
        font-size: 12px;
    }
    
    .news-title {
        width: 100%; 
        font-size: 15px;
    }
}

/* ====================================
 * #rct-entry-top セクション全体の設定
 * ==================================== */
#rct-entry-top {
    color: #333333;
	margin-bottom: 2rem;
}

#rct-entry-top h2{
	font-size: 28px;
}

.entry-container {
    max-width: 950px; /* 2つの横並びパーツ+隙間を考慮した幅 */
    margin: 0 auto;
    text-align: center;
	background-color: #EBFAFF;
	border-radius: 10px;
    padding: 35px 0 80px 0;
}

/* タイトル */
.entry-caption {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    color:  #333333;
}

/* ====================================
 * 横並びの連絡先パーツ (お問い合わせ/電話)
 * ==================================== */
.contact-info-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px; /* パーツ間の隙間 */
    margin-bottom: 25px; /* エントリーボタンとの間隔 */
}

/* お問い合わせボタンと電話情報の共通スタイル */
.contact-button {
    width: 400px; /* 指定された幅を適用 */
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    color: #333333;
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

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

/* お問い合わせボタン (aタグ) */
.contact-email {
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    text-decoration: none;
}

/* 電話情報 (divタグ) */
.contact-tel {
    flex-direction: column;
    justify-content: center;
    padding: 10px 20px;
}

.contact-tel .tel-number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 3px;
    line-height: 1.2;
}

.contact-tel .tel-time {
    font-size: 14px;
    color: #666666;
}

/* ====================================
 * エントリーボタン (オレンジ色)
 * ==================================== */
.entry-button-area {
    padding-top: 20px;
}

.entry-button {
    /* 幅と中央寄せ */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    width: 400px; /* 横並びパーツに合わせた幅 */
    text-decoration: none;

    /* デザイン */
    background-color: #F7941D; /* 鮮やかなオレンジ色 */
    color: #FFFFFF;
    padding: 20px 40px;
    border-radius: 10px;
    
    /* フォントとアイコン */
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.entry-button:hover {
    background-color: #e58711;
}

/* アイコン（ここでは飛行機記号✈︎を使用） */
.entry-icon {
    font-size: 28px;
    margin-right: 15px;
    line-height: 1;
    transform: rotate(45deg); /* 飛行機マークを回転 */
}

/* ====================================
 * レスポンシブ対応
 * ==================================== */
@media (max-width: 880px) {
    .contact-info-wrapper {
        flex-direction: column; /* 横並びを縦並びにする */
        gap: 15px;
    }
    
    .contact-button,
    .entry-button {
        width: 100%; /* スマホでは幅いっぱいに広げる */
        max-width: 400px; /* 最大幅を維持 */
        margin: 0 auto;
    }
}

.footer-rct-banner{
	text-align: center;
	margin: 0 auto;
	width: 220px;
	height: auto;
}


/* skill-up.php スキルアップページ */
#skill-up {
    padding: 20px 0 80px 0;
    font-family: sans-serif;
    color: #333333;
}

/* コンテナ設定（コンテンツの最大幅と中央寄せ） */
#skill-up .container {
    max-width: 1020px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

#skill-up .skill-back{
	background-color: rgba(255,219,159,0.12);
	padding: 30px;
}

#skill-up .lead-area {
    text-align: center;
    margin-bottom: 60px;
}

#skill-up .main-title {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #444444; /* タイトル全体の濃い色 */
}

#skill-up .main-title span {
    color: #C06060; /* 赤系のアクセントカラー */
}

#skill-up .lead-text {
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: #555555;
}

#skill-up .skill-item {
    display: flex;
    align-items: flex-start; /* 上端を揃える */
    margin-bottom: 60px;
    gap: 50px; /* テキストと画像の間隔 */
}

#skill-up .text-content {
    flex: 1; /* 残りのスペースを埋める */
}

#skill-up .image-content {
    flex: 0 0 45%; /* 画像エリアの幅を約45%に固定 */
    border-radius: 10px;
    overflow: hidden;
}

#skill-up .item-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

#skill-up .skill-item.reverse-layout {
    flex-direction: row-reverse;
}

#skill-up .item-number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
    display: inline-block;
	color: #333333;
	text-shadow: none;	
}

#skill-up .item-subtitle {
    font-size: 18px;
    color: #000000;
    margin-top: -5px; /* item-number に近づける */
    margin-bottom: 20px;
	text-shadow: none;	
}

#skill-up .item-description {
	color: #000000;
    font-size: 15px;
    line-height: 1.7;
	text-shadow: none;	
}

#skill-up .sub-title-small {
    display: block;
    font-weight: bold;
	color: #000000;
    margin-top: 15px;
    margin-bottom: 5px;
	text-shadow: none;	
}


/* ====================================
 * レスポンシブ対応
 * ==================================== */
@media (max-width: 800px) {
    #skill-up .skill-item,
    #skill-up.skill-item.reverse-layout {
        flex-direction: column; /* 縦に積み重ねる */
        gap: 30px;
    }
    
    #skill-up .image-content {
        flex: auto; /* 幅固定を解除 */
        width: 100%;
    }

    #skill-up .main-title {
        font-size: 26px;
    }
}

/* welfare.php 福利厚生 */
#welfare {
    padding: 20px 0 80px 0;
    font-family: sans-serif;
    color: #333333;
}

#welfare .container {
    max-width: 1020px; /* 指定された最大幅 */
    margin: 0 auto;
    padding: 0 20px;
}

#welfare .welf-back {
	background-color: rgba(255,219,159,0.12);
	padding: 30px;
}

#welfare .lead-area {
    text-align: center;
    margin-bottom: 60px;
}

#welfare .main-title {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #444444; 
}

#welfare .main-title span {
    color: #C06060; /* 赤系のアクセントカラー */
}

#welfare .lead-text {
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: #555555;
}

#welfare .welfare-item {
    display: flex;
    align-items: flex-start; 
    margin-bottom: 60px;
    gap: 50px; 
}

#welfare .welfare-item.reverse-layout {
    flex-direction: row-reverse;
}

#welfare .text-content {
    flex: 1; 
}

#welfare .image-content {
    flex: 0 0 45%; 
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#welfare .item-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

#welfare .welf-item-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
    color: #444444;
	text-shadow: none;
}

#welfare .item-list {
    list-style: none;
    color: #444444;
    padding: 0;
    margin: 0;
	text-shadow: none;
}

#welfare .item-list li {
    font-size: 15px;
    line-height: 1.8;
    position: relative;
    padding-left: 15px;
}

#welfare .item-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em; 
    width: 6px;
    height: 6px;
    background-color: #333333;
    transform: translateY(-50%);
}

#welfare .detail-box {
    background-color:rgba(255,219,159,0.12);
    border-radius: 15px;
    padding: 40px;
    margin-top: 40px;
}

#welfare .welf-system-whopper{
	background-color: #FFFFFF;
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
}

#welfare .detail-title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: #444444;
}

#welfare .detail-title span {
	margin-top: 0.3rem;
	display: block;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
}

@media (max-width: 768px) {
#welfare .detail-title span {
	text-align: start;	
    padding-left: 1em;      /* 2行目以降の開始位置（全体のインデント） */
    text-indent: -1em;      /* 1行目だけを左に引き戻す */	
}
}

#welfare .detail-content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

#welfare .detail-column {
    flex: 1;
}

#welfare .welf-column-title {
    font-size: 20px;
    font-weight: bold;
	text-align: center;
    color: #C06060; /* 赤系のアクセントカラー */
    margin-bottom: 15px;
    border-left: 4px solid #C06060;
    border-right: 4px solid #C06060;
    padding-left: 10px;
	padding-right: 10px;
	margin: 0 auto 15px auto;
	width: 200px;
}

#welfare .detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#welfare .detail-list li {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px;
}

#welfare .detail-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em; 
    width: 6px;
    height: 6px;
    background-color: #333333;
    transform: translateY(-50%);
}

/* ====================================
 * レスポンシブ対応
 * ==================================== */
@media (max-width: 800px) {
    #welfare .welfare-item,
    #welfare .welfare-item.reverse-layout {
        flex-direction: column; 
        gap: 30px;
    }
    
    #welfare .image-content {
        flex: auto;
        width: 100%;
    }
    
    #welfare .detail-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    #welfare .main-title {
        font-size: 26px;
    }
	
	#welfare .main-title span {
		display: block;
		margin-top: 1rem;
	}	
}

/* ====================================
 * #description セクション設定
 * ==================================== */
#description {
    padding: 60px 0;
    background-color: #FFFFFF; /* 背景は白 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#description .container {
    width: 950px; /* 指定された横幅 */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 各質問ブロックの余白 */
.interview-qa {
    margin-bottom: 40px;
}

/* 質問タイトル (Q.) */
.interview-qa .question {
    font-size: 22px;
    font-weight: bold;
    color: #D66B74; /* 画像に基づいたピンク系の色 */
    margin-bottom: 15px;
    line-height: 1.4;
}

/* 回答テキスト */
.interview-qa .answer {
    font-size: 18px;
    line-height: 1.8; /* 読みやすい行間 */
    color: #333333;
    margin: 0;
}

/* ====================================
 * レスポンシブ対応 (必要に応じて)
 * ==================================== */
@media (max-width: 950px) {
    #description .container {
        width: 100%;
    }
    .interview-qa .question {
        font-size: 19px;
    }
    .interview-qa .answer {
        font-size: 17px;
    }
}


#policy h2{
	width: 100%;
	border-bottom: solid 1px #000000;
}

#policy p{
	margin-bottom: 3rem;
}

#policy p.policy-text-note{
  font-size: 16px;
  margin-left: auto;      /* その箱を画面左右中央に配置 */
  margin-right: auto;     /* 〃 */
  text-align: left;       /* 箱の中の文字は左揃え（重要） */
  padding-left: 1.2em;    /* 全体を右に1文字分ずらす */
  text-indent: -1.2em;    /* 1行目だけを左に1文字分戻す */
  /* スマホではみ出さないための保険 */
  max-width: 100%; 
  width: fit-content;
  width: -webkit-fit-content; /* 古いSafari用 */
  display: block;
  margin: 20px auto;
}

#security h2{
	width: 100%;
	border-bottom: solid 1px #000000;
}

#security p {
    line-height: 1.8;
    color: #333;
	text-align: start!important;
}

#security p.text-note{
  font-size: 16px;
  margin-left: 0;    /* その箱を画面左右中央に配置 */
  margin-right: auto;     /* 〃 */
  text-align: left!important;       /* 箱の中の文字は左揃え（重要） */
  padding-left: 1.55em;    /* 全体を右に1文字分ずらす */
  text-indent: -1.55em;    /* 1行目だけを左に1文字分戻す */
  /* スマホではみ出さないための保険 */
  max-width: 100%; 
  width: fit-content;
  width: -webkit-fit-content; /* 古いSafari用 */
  display: block;
  margin: 20px 0 0 0;
}

#security p.sub-text-note{
	margin-bottom: 2rem;
}

#security .indent-line {
    display: block;        /* ブロック要素にして、paddingを有効にする */
    padding-left: 1.2em;   /* 1.2文字分、左側を空ける（お好みで調整） */
    font-size: 0.95em;     /* 補足文のように少し小さくする場合（任意） */
}


#rct-under-about{
	margin-top: 2rem;
	background-color: #FBF4E9;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

#rct-under-about .about-whopper{
    position: relative; 
    min-height: 500px; 
    overflow: hidden;	
}

#rct-under-about .about-image {
    position: absolute; 
    top: 0;
    left: -5px; 
	width: 45vw;
    z-index: 10; 
    max-height: 650px;
}

#rct-under-about .about-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
    border-top-right-radius: 30px; 
    border-bottom-right-radius: 30px; 
}

#rct-under-about .about-point{
	margin-top: 0;
    position: relative; 
	height: 100%;
    min-height: 700px; 
    overflow: hidden; 
}

#rct-under-about .about-text{
    position: absolute; 
    top: 0%;
    right: 0; 
	width: 50%;
    z-index: 10; 
}



/* ====================================
 * #job-description 全体設定
 * ==================================== */
#job-description {
    padding: 60px 0;
    background-color: #FFFFFF;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#job-description .container {
    width: 950px; /* 指定の横幅 */
    margin: 0 auto;
}

/* ------------------------------------
 * ナビゲーションボタン
 * ------------------------------------ */
.job-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 280px;
    padding: 15px 25px;
    background-color: #00005d; /* 濃紺 */
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    transition: opacity 0.3s;
}

.nav-btn:visited {
	color: #FFFFFF;
}

.nav-btn:hover {
    opacity: 0.8;
}

.nav-btn .arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #FFFFFF;
    border-radius: 50%;
    position: relative;
}

.nav-btn .arrow::after {
    content: ">";
    color: #00005d;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

/* ------------------------------------
 * セクションタイトル
 * ------------------------------------ */
.job-section {
    margin-bottom: 80px;
}

.section-title {
    text-align: center;
    color: #d66b74; /* ピンク系の文字色 */
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
}

/* ------------------------------------
 * ジョブカードグリッド
 * ------------------------------------ */
.job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 30px 20px;
}

.job-card {
    display: block;
    text-decoration: none;
    transition: transform 0.3s;
}

.job-card:not(.inactive):hover {
    transform: translateY(-5px);
}

.card-inner {
    position: relative;
    border: 4px solid #e8888f; /* ピンクの枠線 */
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
}

.job-img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.job-label {
    background-color: #e8888f; /* ピンク背景 */
    color: #FFFFFF;
    text-align: left;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 18px;
}

/* ------------------------------------
 * 募集停止中のスタイル (inactive)
 * ------------------------------------ */
.job-card.inactive {
    cursor: default;
}

.job-card.inactive .card-inner {
    border-color: #8a5a5d; /* 少し暗めの枠線 */
}

.job-card.inactive .job-label {
    background-color: #8a5a5d;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /* ラベル以外の部分を覆う */
    background-color: rgba(0, 0, 0, 0.6); /* 暗い半透明 */
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    z-index: 10;
}

/* ------------------------------------
 * レスポンシブ (スマホ向け)
 * ------------------------------------ */
@media (max-width: 950px) {
    #job-description .container {
        width: 95%;
        padding: 0 auto;
    }
    .job-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    }
}

/* ====================================
 * #rct-description 全体設定
 * ==================================== */
#rct-description {
    padding: 40px 0 80px 0;
    background-color: #FFFFFF;
    color: #333333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#rct-description .container {
    max-width: 980px; /* 指定の横幅 */
    margin: 0 auto;
    padding: 0 20px;
}

#rct-description .main-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    border-left: 8px solid #f7941d;
    padding-left: 15px;
}

/* ------------------------------------
 * 募集要項テーブル
 * ------------------------------------ */
.requirements-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    margin-bottom: 60px;
}

.requirements-table th {
    width: 200px;
    background-color: #f7941d; /* オレンジ背景 */
    color: #FFFFFF;
    padding: 20px;
    text-align: left;
    vertical-align: middle;
    font-weight: bold;
    border-bottom: 1px solid #FFFFFF; /* 行間の区切りを白に */
}

.requirements-table td {
    padding: 20px;
    border-bottom: 1px solid #ddd;
	border-right: 1px solid #dddddd;
    line-height: 1.8;
}

.requirements-table .note {
    display: block;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* ------------------------------------
 * 求める人物像
 * ------------------------------------ */
.target-profile {
    margin-top: 40px;
}

.profile-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.profile-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.profile-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.profile-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.profile-footer {
    line-height: 1.8;
    color: #333;
    font-weight: bold;
}

/* ------------------------------------
 * レスポンシブ対応
 * ------------------------------------ */
@media (max-width: 768px) {
    .requirements-table th,
    .requirements-table td {
        display: block;
        width: 100%;
    }
    
    .requirements-table th {
        padding: 10px 20px;
    }
}

/* ------------------------------------
 * 写真スライド
 * ------------------------------------ */
.mt-down-100 { margin-top: -80px !important; }
.mb-down-80 { margin-bottom: -40px !important; }

.wrap {
  overflow: hidden;
  display: flex; /* 2つのulを横に並べる */
  align-items: center;
  height: 340px;
  margin-bottom: 100px;
}

.slideshow {
  display: flex;
  list-style: none; /* リスト記号を消す */
  padding: 0;
  margin: 0;
  /* infinite linear でループ速度を一定に維持 */
  animation: loop-slide 100s infinite linear;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    /* リスト1つ分の幅（100%）だけ左に移動させる */
    transform: translateX(-100%);
  }
}

/* ホバー時に両方のulが同時に止まるように設定 */
.wrap:hover .slideshow {
  animation-play-state: paused;
}

/* コンテンツ間の余白 */
.content-hover {
  transition: all 0.2s;
  margin-right: 20px;
  flex-shrink: 0; /* 画像が潰れないように固定 */
  width: 220px;
  border-radius: 5px;
}

/* --- 以下、既存のスタイル --- */
.content-hover:hover {
  transform: translateY(-10px);
  border-radius: 0 10%;
  opacity: 0.8;
  cursor: pointer;
}

.rotate-04 img {
	transform: rotate(-2deg);
	border-radius: 2px!important;
}

.rotate-dw04 img {
	transform: rotate(2deg);
	border-radius: 2px!important;
}

/* admissions - 入所について */
main.u-admissions{}

main.u-admissions h2{
	font-size: 21px;
	margin-top: 0;
	padding-bottom: 0.3rem;
	border-bottom: solid 1px #545454;
}

main.u-admissions h3{
	font-size: 18px;
	letter-spacing: 3px;
	color: #565656;
	text-align: center;
	margin-bottom: 3rem;		
}

main.u-admissions h3 span{
	display: block;
	font-size: 11px;
	color: #F39800;
	letter-spacing: 1px;
	padding-top: 0.5rem;	
}

main.u-admissions p{
	text-align: justify;
}

#admissions-about{
	padding-top: 2.5rem;
	padding-bottom: 1.5rem;	
	background-color: #FBF4E9;
}

#admissions-flow {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.flow-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.flow-title span {
  display: block;
  font-size: 0.9rem;
  color: #F39800;
  font-weight: normal;
}
.flow-intro {
  text-align: center!important;
  margin-bottom: 40px;
}

/* リスト本体 */
.admissions-step-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  counter-reset: flow-step;
  max-width: 800px; /* 1080px内でも読みやすい幅に絞る */
}

.admissions-step-list li {
  position: relative;
  padding-left: 60px; /* 数字部分のスペース */
  padding-bottom: 40px;
}

/* 縦線 */
.admissions-step-list li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background-color: #F39800;
  opacity: 0.3;
}
.admissions-step-list li:last-child::after {
  display: none;
}

/* ステップ数字 */
.admissions-step-list li::before {
  counter-increment: flow-step;
  content: counter(flow-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  background-color: #F39800;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* コンテンツボックス */
.step-box {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eee;
}
.step-box h4 {
  margin: 0 0 10px 0;
  color: #F39800;
  font-size: 1.2rem;
}
.step-box p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.95rem;
}

.flow-note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 20px;
  
  /* ▼ここから下を変更・追加 */
  display: table;         /* 文字量に合わせた幅の箱にする */
  margin-left: auto;      /* その箱を画面左右中央に配置 */
  margin-right: auto;     /* 〃 */
  
  text-align: left;       /* 箱の中の文字は左揃え（重要） */
  padding-left: 1.2em;    /* 全体を右に1文字分ずらす */
  text-indent: -1.2em;    /* 1行目だけを左に1文字分戻す */
  
  /* スマホではみ出さないための保険 */
  max-width: 95%; 
	
  width: fit-content;
  width: -webkit-fit-content; /* 古いSafari用 */
  
  /* ▼その箱を画面中央に配置 */
  display: block;
  margin: 20px auto;	
}


/* 電話番号のリンク色（スマホ用） */
.step-box a {
  color: #F39800;
  text-decoration: underline;
}

#admissions-person{
	padding-top: 2.5rem;
	padding-bottom: 1.5rem;	
	background-color: #FBF4E9;	
}

/* 番号（1, 2, 3）とその横の文章を制御 */
.adm__whopper p {
    display: flex;             /* 横並びにする */
    align-items: flex-start;  /* 上端で揃える */
    margin-bottom: 15px;      /* 段落間の余白 */
    line-height: 1.6;
}

/* 番号部分（span）の固定幅を指定 */
.adm__whopper p span {
    flex: 0 0 2.5em;          /* 番号エリアの幅を「2.5文字分」に固定 */
    flex-shrink: 0;           /* 幅が狭まらないように固定 */
    display: inline-block;
}


p.admissions-person-text{
	text-align: center!important;
}

#admissions-price{
	padding-top: 2rem;
}

/* --- 募集要項カードの修正 --- */

/* 画像部分を囲むラッパー */
.job-img-wrapper {
    position: relative; /* オーバーレイの基準位置にする */
    width: 100%;
    line-height: 0;     /* 画像下の隙間を消す */
}

/* オーバーレイのスタイル修正 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親要素(画像ラッパー)と同じ高さにする */
    /* 元の height: calc(100% - 40px); は不要になるので上書きされます */
    
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    z-index: 10;
}

/* スキルアップ */
.nurse-header {
  background-color: #55a848;
  color: #ffffff;
  text-align: center;
  padding: 4px 0;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 25px;
}

.nurse-header-all {
  background-color: rgba(255,219,159,0.12);
  color: #3CA637;
  text-align: center;
  padding: 4px 0;
  border: solid 1px #55a848;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 25px;
}

.nurse-list {
  padding: 0;
  margin: 0 0 0 10px; /* 左に少し余白 */
}

.nurse-item {
  display: flex;       /* 丸と文字を横並びにする */
  align-items: baseline; /* 文字のベースラインで揃える */
  margin-bottom: 5px; /* 行間 */
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  width: 100%;         /* 幅を確保 */
  box-sizing: border-box;
}

.nurse-item::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #55a848;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;      /* 丸が潰れないように固定 */
  transform: translateY(2px);
}

/* 情報公開 */
.fiscal{
    color: #565656; /* 全体の文字色を白に */
	text-align: center;
	margin: auto;
}

.fiscal h2{
	font-size: 20px;
	font-weight: 400;
}

.fiscal h2::before,
.fiscal h2::after {
  content: " ー "; /* ここに追加したい文字を記述 */
}

.fiscal p{
	font-size: 16px;
}

.fiscal-link{
	text-align: center;
	width: 300px;
	height: auto;
	margin: auto;
}

.fiscal-link img{
	width: 100%;
	height: auto;
}