@charset "Shift-JIS";



/* リンク設定
------------------------------------------------- */

a:link,
a:visited {
	color: #39CCA8;
	text-decoration: underline;
}

a:hover {
	color: #39CCA8;
	text-decoration: none;
}



/* ボディ
------------------------------------------------- */

body {
	text-align: center;
	background: #FFF;
}



/* ヘッダー
------------------------------------------------- */

#header {
	width: 100%;
	/*height: 130px;*/
	height: 145px;
	/*background:url(../img/common/header/header_bg_line.gif);*/
	margin: 0 auto;
	position: relative;
	
/* 1. グラデーション関数を使って単色に "見せる" */
    background-image: linear-gradient(
        to bottom,              /* 上から下へ向かうグラデーション */
        transparent 0%,         /* 0% の位置から */
        transparent calc(100% - 38px), /* 100% の位置から 30px 上まで、透明 */
        #51C4BB calc(100% - 38px), /* その位置から、指定色（赤）を瞬間的に開始 */
        #51C4BB 100%            /* 100% まで指定色で塗りつぶす */
    );
    
    /* 2. 背景の繰り返しを防ぎ、位置とサイズを指定 */
    background-repeat: no-repeat;
    background-size: 100% 100%; /* ボックス全体に背景を適用 */	
}
#header .inner{
	/*width: 960px;*/
	width: 962px; /*ドロップダウンメニューがメインコンテンツよりボーダー分だけ内側に入ってしまうためメニュー幅を少し広げる*/
	/*height: 130px;*/
	height: 145px;
	margin: 0  auto;
	/*background:url(../img/common/header/header_bg.gif) 515px 42px no-repeat;*/
	position: relative;
}
#header h1{
	/*position: absolute;
	top: 8px;
	right: 110px;*/
	color: #999;
	font-size: 10px;
	font-weight: normal;
}

#header .header-nav01 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 7px 0 2px;
}

#header .rogo{
	position: absolute;
	left: 5px;
	/*top: 12px;*/
	top: 30px;
}

#header .header-nav02 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px 0;
}
#header .size{
	/*position: absolute;
	right: 5px;
	bottom: 70px;*/
}
#header .size dt {
	padding-top:10px;
	line-height: 1;
	float: left;
}
#header .size dd {
	line-height: 1;
	cursor: pointer;
	float: left;
	text-indent:100px;
	overflow:hidden;
}
#header .size dd.small{
	width: 35px;
	height: 35px;
	background:url(../img/common/header/size_s.gif) no-repeat;
}
#header .size dd.middle{
	width: 35px;
	height: 35px;
	background:url(../img/common/header/size_m.gif) no-repeat;
}
#header .size dd.large{
	width: 35px;
	height: 35px;
	background:url(../img/common/header/size_l.gif) no-repeat;
}

#header .size dd:hover,
#header .size dd.current{
	filter: alpha( opacity = 60 );
	opacity: 0.6;
 }

#header .header-nav03 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#header .link{
	/*position: absolute;
	right: 5px;
	top: 65px;*/
}
#header .inner .menu{
	/*width: 960px;*/
	width: 962px; /*ドロップダウンメニューがメインコンテンツよりボーダー分だけ内側に入ってしまうためメニュー幅を少し広げる*/
	/*padding-top: 92px;
	margin: 0 auto;*/
	/*margin: 8px auto 0;*/
    position: absolute;
    bottom: 0;
}
/*#header .inner .menu ul li{
	float: left;
}*/

/* ヘッダーリンク設定 */

#header ul#head_navi li a:link,
#header ul#head_navi li a:visited {
	color: #333;
	text-decoration: none;
}

#header ul#head_navi li a:hover {
	text-decoration: underline;
}



/* ビジュアル・ページタイトル
------------------------------------------------- */

#visual {
	width: 960px;
	margin: 2px auto 20px auto;
	position: relative;
}

#pageTitle {
	width: 960px;
	margin: 2px auto 5px auto;
}



/* コンテンツ
------------------------------------------------- */

#contents {
	width: 960px;
	margin: 0 auto;
	background: #FFF;
	text-align: left;
}

#contents:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


/* パンくずリスト */
#bread {
	background:url(../img/common/main/bread_bg.gif) no-repeat;
	margin-bottom: 15px;
	height:27px;
}
#bread ul{
	font-size: 13px;
	text-indent:10px;
}
#bread ul li{
	line-height:24px;
	float:left;
	color: #FF9900;
}
#bread a{
	height:24px;
	padding-right: 20px;
	color: #FF9900;
	text-decoration:none;
	background:url(../img/common/main/bread_next.gif) no-repeat center right;
}
	

#bread a:hover{
	text-decoration:underline;
}

#bread li {
	margin-right: 5px;
}



/* メイン
------------------------------------------------- */

#main_1 {
	width: 960px;
}
#main_2 {
	width: 740px;
	float: right;
}



/* メインコンテンツの共通設定
------------------------------------------------- */

.std {
	width: 700px;
	margin: 0 0 30px 10px;
}

.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb65 { margin-bottom: 65px; }
.mb70 { margin-bottom: 70px; }


/* 左寄せリンク */

.linkLeft {
	text-align: left;
}

.linkLeft a {
	padding-left: 23px;
	background: url(../img/common/parts/icon_01.gif) 0 center no-repeat;
}


/* 右寄せリンク */

.linkRight {
	text-align: right;
	margin-right: 10px;
}

.linkRight a {
	padding-left: 23px;
	background: url(../img/common/parts/icon_01.gif) 0 center no-repeat;
}


/* オブジェクト寄せ */

.floatLeft {
	margin-right: 20px;
	float: left;
}

.floatRight {
	margin-left: 10px;
	float: right;
}
.floatRight_footer {
	float: right;
}


/* ページトップボタン */

.pageTop{
	text-align: right;
	padding-top:30px;
	padding-bottom:10px;
}
.pageTop a{
	background:url(../img/common/parts/page_top.gif) no-repeat 0 5px;	
	padding-left: 20px;
}

/* 見出し
------------------------------------------------- */

h2 {
	margin-bottom: 20px;
}
h2 .balloon{
	margin-bottom: 0;
}

h2.h2_01 {
	width: 715px;
	background: url(../img/common/main/h2_s.gif) no-repeat;
	color: #51C4BB;
	padding-top: 3px;
	font-size: 18px;
	padding-left: 25px;
	min-height:36px;
	line-height:2.0;
}
h2.h2_02 {
	background: url(../img/common/main/h2_L.gif) no-repeat;
	color: #5DC8BF;
	line-height: 39px;
	font-size: 1.7em;
	padding-left: 27px;
}
h3 {
	margin-bottom: 10px;
}

h3.h3_01 {
	width: 740px;
	height: 26px;
	background: url(../img/common/main/h3_s.gif) no-repeat;
	color: #FFF;
	padding-top: 2px;
	font-size: 14px;
	margin-top:20px;
	text-indent: 25px;
}
h4 {
	background: url(../img/place_details/h4_1.gif) no-repeat 0 4px;
	text-indent: 25px;
	font-size:15px;
	color: #5DC8BF;
	padding-bottom:10px;
	margin-top:10px;
}


/* サイド
------------------------------------------------- */

#side {
	width: 180px;
	float: left;
	margin-bottom: 20px;
}
#side dl{
	margin-bottom: 10px;
}
#side .top{
	height: 30px;
	background:url(../img/common/side/side_top.jpg);
	font-size: 16px;
	font-weight:bold;
	padding-top: 41px;
	text-align:center;
}
#side dd a{
	height: 22px;
	background: url(../img/common/side/side_off.jpg);
	display: block;
	padding: 23px 0 0 35px;
	text-decoration:none;
	color:#000000; 
}
#side dd a:hover{
	background: url(../img/common/side/side_on.jpg);
	color:#888; 
}
#side .on a{
	background: url(../img/common/side/side_on.jpg);
	color:#888; 
}
#side dd:last-child a{
	height: 31px;
	background: url(../img/common/side/side_bottom_off.jpg);
	display: block;
	padding: 20px 0 0 35px;
	text-decoration:none;
	color:#000000; 
}
#side dd:last-child a:hover{
	background: url(../img/common/side/side_bottom_on.jpg);
	color:#888; 
}
#side dd.on:last-child a{
	background: url(../img/common/side/side_bottom_on.jpg);
	color:#888; 
}

/* バナー
------------------------------------------------- */
#bnr{
	width: 174px;
	float: left;
	
}
#bnr img{
	padding-bottom: 10px;
}

/* フッター
------------------------------------------------- */

#footer {
	width: 100%;
	height: 185px;
	margin:0 auto;
	background: url(../img/common/footer/footer_bg_line.gif) repeat-x;
	text-align: right;
}
#footer .inner{
	width: 960px;
	height: 165px;
	margin:0 auto;
	padding-top:20px;
	position: relative;
	background: url(../img/common/footer/footer_bg.gif) no-repeat 0 1px;
}
#footer .inner .leftArea{
	position: absolute;
	top: 22px;
	left: 55px;
	text-align:left;
}
#footer .inner .leftArea .name a{
	color:#39CCA8;
	font-size: 15px;
	text-decoration:underline;
}
#footer .inner .leftArea .name a:hover{
	color:#39CCA8;
	font-size: 15px;
	text-decoration: none;
}
#footer .inner ul li a{
	text-decoration: underline;
}
#footer .inner ul li a:hover{
	text-decoration: none;
}
#footer .inner ul li{
	padding-bottom: 10px;
}

#footer p {
	padding-right: 20px;
	color: #000;
}
#footer p.name{
	font-size:15px;
}

#footer p.footCopy {
	width: 350px;
	font-size: 11px;
	position: absolute;
	top: 163px;
	left:300px;
	color:#FFF;
	margin: 0 auto;
}


/* フッターリンク設定 */

#footer a:link,
#footer a:visited {
	color: #000;
	text-decoration: none;
}

#footer a:hover {
	color: #000;
	text-decoration: underline;
}


/* ヘッダー　サイトアップポップアップコンテンツ追加
------------------------------------------------- */
/* モーダル全体のコンテナ設定 */
#header .modal-container {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* 他の要素の上に表示 */

    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* スムーズなアニメーション */
}

/* モーダルが表示されている状態 */
#header .modal-container.is-active {
    opacity: 1;
    visibility: visible;
}

/* オーバーレイ（モーダルの背景の暗い部分） */
#header .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
}

/* モーダルコンテンツの箱 */
#header .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 画面中央に配置 */
    background-color: #fff;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    max-width: 800px;
    width: 90%;
}

/* 閉じるボタンのスタイリング */
#header .modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}

/* その他、サイトマップのリストなどの基本スタイル */
#header .sitemap-list {
    list-style: none;
}

/*#header .sitemap-list li a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 1px dashed #eee;
}*/


#header .sitemap-btn p#open-sitemap-modal {
    /*background: #39CCA8;*/
	background: #51C4BB;
    border: none;
    color: #FFFFFF;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
	padding: 2px 8px;
	opacity: 1.0;
	transition: opacity 0.3s ease;
    cursor: pointer;
}
#header .sitemap-btn p#open-sitemap-modal:hover {
    /* ご要望通り、不透明度を 0.6 に変更 */
    opacity: 0.6;
}

/*サイトマップ*/
.sitemap-container {
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭くなったら折り返す */
    gap: 30px; /* カラム間の横の余白 */
}
.sitemap-col-left {
    flex: 1;
    min-width: 300px; 
}
.sitemap-col-right {
    flex: 1;
    min-width: 300px;
}

/* モバイル対応: 画面幅が小さい場合は1カラムにする */
@media (max-width: 768px) {
    .sitemap-container {
        flex-direction: column;
        gap: 0; 
    }
    .sitemap-col-left,
    .sitemap-col-right {
        flex: 1 1 100%; /* 全幅を使う */
        min-width: 100%;
    }
    /* 左右のカラムが縦に並んだとき、区切りを付ける */
    .sitemap-col-right {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #E0E0E0;
    }
}

/* サイトマップ全体 (複数の ul.sitemap-list 間) の余白 */
.sitemap-list + .sitemap-list {
    margin-top: 20px; /* 縦の余白を詰める */
    padding-top: 20px;
    /*border-top: 1px solid #E0E0E0;*/
}
.sitemap-list {
    /* デフォルトのリストスタイルをリセット */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 親リスト項目 (階層1)*/
.sitemap-list > li {
    margin-bottom: 0; 
}
.sitemap-list > li > a {
    display: block;
    position: relative;
    padding: 8px 10px; 
    padding-right: 30px; 
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #51C4BB;
    border-radius: 3px; 
    margin-bottom: 2px; 
    text-decoration: none;
    transition: background-color 0.2s;
    text-align: left;
}
.sitemap-list > li > a:hover {
    /*background-color: #43A097;*/
    background-color: #8DD8D2;
    color: #fff;
}
/* 親項目のアイコン (右向きの矢印) */
.sitemap-list > li > a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px; 
    width: 6px; 
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}


.sitemap-list > li > span.-nolink {
    display: block;
    position: relative;
    padding: 8px 10px; 
    padding-right: 30px; 
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #51C4BB;
    border-radius: 3px; 
    margin-bottom: 2px; 
    text-decoration: none;
    text-align: left;
}


/* 子リスト (階層2) のスタイル */
.sitemap-list .sub-list {
    list-style: none;
    margin: 0; 
    background-color: rgba(81, 196, 187, 0.05);
}
/* 階層2の li 要素から背景色とpaddingを削除 */
.sitemap-list .sub-list li {
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
	border-bottom: 1px dotted #51C4BB;
}
/* 子リストの a 要素の基本スタイル */
.sitemap-list .sub-list li a {
    display: block;
    position: relative;
    padding: 10px 20px 10px 15px; 
    font-size: 1em;
    color: #333;
    transition: color 0.2s;
    text-align: left;
	text-decoration: none;
	font-weight: bold;
}

/* 子リストの a 要素ホバー時の色変更 */
.sitemap-list .sub-list li a:hover {
    color: #51C4BB; 
}

/* 子リストのアイコン (右向きの矢印) - 基準色 (#51C4BB) */
.sitemap-list .sub-list li a::after {
    content: ''; 
    position: absolute;
    top: 50%;
    right: 12px;
    width: 5px; 
    height: 5px;
    
    border-top: 1px solid #51C4BB;
    border-right: 1px solid #51C4BB;
    
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.2s;
}

/* 3階層目のアイコンを基準色を薄くした色に変更 (孫項目) */
.sitemap-list .sub-list .sub-list li a::after {
    border-top: 1px solid #79D1C9;
    border-right: 1px solid #79D1C9;
}

/* さらなる深さの階層 (階層3) がある場合 */
/* 3階層目のリスト全体 */
.sitemap-list .sub-list .sub-list {
    padding-left: 15px; 
    background-color: rgba(81, 196, 187, 0.03); /* さらにうっすら */
}

/* 3階層目のアイコンの微調整 */
.sitemap-list .sub-list .sub-list li a::before {
    /* 以前のハイフンやドットのコードを削除し、矢印で統一 */
    content: none;
}
/* 孫階層のリンクは親の矢印を継承
.sitemap-list .sub-list .sub-list li a::after {
    // スタイルは上記のセレクタで定義済み
}
*/





/* ヘッダー　スケジュールボタン追加
------------------------------------------------- */
#header .schedule-btn a {
    /*background: #39CCA8;*/
	background: #51C4BB;
    border: none;
    color: #FFFFFF;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
	padding: 2px 8px;
	opacity: 1.0;
	transition: opacity 0.3s ease;
	text-decoration: none;
}
#header .schedule-btn a:hover {
    /* ご要望通り、不透明度を 0.6 に変更 */
    opacity: 0.6;
}


/* ヘッダー　グローバルメニュー　画像からcssテキストに変更、プルダウンリスト化
------------------------------------------------- */
/* --- 1. グローバルナビゲーション全体 --- */
.global-nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 2. 各ボタン (li.nav-button) の設定 --- */
.nav-button {
    width: 192px;
    height: 38px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    
    /* 背景色と境界線 */
    background-color: #51C4BB;
    border-right: 1px solid #A3D8D0;
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-button:first-child {
	border-left: 1px solid #A3D8D0;
}

/* --- テキストのスタイル --- */
.nav-button-text {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* --- 3. ホバーエフェクトと三角形 --- */
.nav-button:hover {
    background-color: #74D0C9;
}

/* 【角の小さな三角形の再現】 */
.nav-button::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent #A3D8D0 transparent transparent;
}
.nav-button:hover::after {
    border-color: transparent #C1E7E3 transparent transparent;
}


/* ======================================= */
/* --- 4. ドロップダウンメニュー共通設定 --- */
/* ======================================= */

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    
    background-color: #51C4BB;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    
    /* 初期状態: 非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-weight: bold;
}

/* --- 【修正・統合箇所】PCホバーとモバイルタップの両方で表示 --- */
/* PCホバー (.nav-button:hover) と JSクラス (.is-open) の両方でメニューを表示 */
.dropdown-menu.is-open,
.nav-button.has-dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
}


/* ドロップダウン内の項目（<li>）の設定 */
.dropdown-menu .dropdown-item {
    list-style: none;
	border-bottom: 2px solid #A3D8D0;
}
.dropdown-menu .dropdown-item.parent-item > a {
	font-size: 14px;
}

.dropdown-menu .dropdown-item.parent-item > a.-long {
	font-size: 12px;
	letter-spacing: 0;
	padding: 10px 15px !important;
}

/* 子階層のリストマークとパディング */
.dropdown-menu .dropdown-item .child-menu li {
	border-top: 1px dotted #FFF;
	position: relative;
    padding-left: 15px;
}
.dropdown-menu .dropdown-item .child-menu li::before {
    content: '-';
    color: #FFF;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: bold;
}

/* ドロップダウン内の親・子すべてのリンク（<a>）の設定 */
.dropdown-menu a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease;
	position: relative;
    padding-right: 20px;
}

/* ドロップダウン内のホバーエフェクト */
.dropdown-menu a:hover {
    /*background-color: #389489;*/
}

/* リンクの右側の矢印 (::after) */
.dropdown-menu a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s, right 0.2s;
}

/* ホバー時に矢印を表示 */
.dropdown-menu a:hover::after {
    opacity: 1;
    right: 10px;
}

/* ======================================= */
/* --- 5. 親子階層（字下げ）のスタイリング --- */
/* ======================================= */

/* 子階層のリスト（.child-menu）の設定 */
.child-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 子階層のリンク（<a>）の設定 */
.child-menu a {
    /* 背景色を少し変えて親項目と区別 */
    background-color: rgba(255, 255, 255, 0.2);
}


/* ======================================= */
/* --- 6. メディアクエリによるPC/モバイルの切り替え --- */
/* ======================================= */

/* PCサイズ (例: 769px以上) では、従来のホバー制御を維持 */
@media screen and (min-width: 769px) {
    
    /* PCではホバーで表示（JSの .is-open を無効化） */
    .dropdown-menu.is-open {
        opacity: 0;
        visibility: hidden;
    }
}

/* モバイルサイズ (例: 768px以下) では、ホバー制御を無効化 */
@media screen and (max-width: 768px) {
    
    /* 【重要】モバイルではCSSのホバーを完全に無効にする (JSのis-openに切り替える) */
    .nav-button.has-dropdown:hover > .dropdown-menu {
        /* CSSの優先度が高いため、!importantで確実に無効化 */
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* フッター　バナーエリア
------------------------------------------------- */
#footerBnrArea {
    padding-top: 40px;
    padding-bottom: 40px;
	
}
#footerBnrArea .inner {
	width: auto;
    max-width: 960px;
    margin: 0 auto;
}
#footerBnrArea ul.footerBnrlistItems {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 38px;
	opacity: 1;
    transition: opacity 0.3s ease;
}

#footerBnrArea ul.footerBnrlistItems li a:hover {
	opacity: .7;
    transition: opacity 0.3s ease;
}