@charset "UTF-8";/* CSS変数の宣言 */
/* テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */

body{
	background-color:var(--headerBackgroundColor);}

#bg_header_and_main{
	background-color:rgba(36,107,179,0.25);/*#246BB3*/
	background-image:url(../images/bg_main.png), url(../images/bg_water_firework.webp), url(../images/bg_main_base.jpg);
	background-position:center top, center top, center top;
	background-repeat:repeat-y, no-repeat, repeat;
	background-size:auto auto, cover, auto auto;
	padding-bottom:2.0rem;}

/*明朝の時*/
p{font-size:113%;}
[class^="list-design"] .list-txt{font-size:113%;}

/*スライド下方に表示されるドットマーク*/
.splide__pagination__page.is-active{
	border:1px solid #B3B3B3;}/*#262626とのコントラスト比7.21(AAA)*/

#main-title{
	background-color:var(--headerBackgroundColor);
	background-image:url(../images/ico_boat.png), url(../images/bg_h1_wave.png);
	background-position:right 50px bottom 10px, left center;
	background-size:100px auto, cover;
	background-repeat:no-repeat, no-repeat;}/* background-size:幅x高さ */

#bg_main_ctt{
	width:100%;
	max-width:1280px;
	margin:0 auto;
	background-color:#FFF;}

/*ヘッダーメニュー*/
.bg-color{
	background:#246BB3;}/*青*/

#contents-menu ul li{
	width:auto;
	padding:2px;}

#contents-menu ul li a{
	border:none;
	border-right:1px solid rgba(244,233,216,0.5);
	border-bottom:1px solid rgba(244,233,216,0.5);}/*#E0E9D8(244,233,216):くすんだ薄い緑*/

#contents-menu ul li a:hover, #contents-menu ul li a:active{
	text-decoration:underline;
	background-color:#143D66;/*#143D66(20,61,102):濃い青*/
	opacity:1;}

@media(min-width:576px){
	#contents-menu ul li{
		width:auto;
		margin-right:0.25em;
		margin-left:0.25em;}

	/*スライド*/
	.splide__slide img.img-smp{display:none;}}

@media(max-width:575.9px){
	.splide__slide img{
		min-height:250px;}

	.splide__slide img.img-pc{display:none;}}


.img-visible > .intro-container > .intro-img img{
	width:100%;
	max-width:none;/*初期値*/}

@media(min-width:1000px){
	.img-visible > .intro-container > .intro-txt{
		width:66%;}
	.img-visible > .intro-container > .intro-img{
		width:34%;
		padding-bottom:0;}}


@media(min-width:576px){
	#intro > hr{
		width:calc(100% - 2.0em);
		margin-left:auto;
		margin-right:auto;}}

h3, [class^="list-design"] h3{
	width:calc(100% - 4.0rem);
	vertical-align:bottom;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2.0rem;
	padding:0;
	font-weight:700;
	background:transparent url(../images/bg_h3_ashiato_mimi.png) left bottom 0.5em repeat-x;
	background-size:auto 16px; /* 幅x高さ */}

h3::before{
	content:"　";
	width:65px;
	height:65px;
	background:transparent url(../images/ico_h3_mimi-chan_r.png) left 50% no-repeat;
	background-size:contain;
	display:inline-block;
	transform: translateY(-0.4em); /* 上下方向の位置を微調整する */}

@media(max-width:575.9px){
	#intro > .intro-container{
		padding-right:1.0rem;
		padding-left:1.0rem;}

	h3, [class^="list-design"] h3{
		background:transparent url(../images/bg_h3_ashiato_mimi.png) left bottom repeat-x;
		background-size:auto 16px; /* 幅x高さ */}}


/*===== 戸田市について調べよう =====*/
section#sec_about_toda-city{}

section#sec_about_toda-city > h3{
	background:transparent url(../images/bg_h3_search_blue.png) left bottom 0.5em repeat-x;
	background-size:auto 26px; /* 幅x高さ */}

@media(max-width:575.9px){
	section#sec_about_toda-city > h3{
		background:transparent url(../images/bg_h3_search_blue.png) left bottom repeat-x;
		background-size:auto 26px; /* 幅x高さ */}}

section#sec_about_toda-city h4{
	background-color:#EEE;}

section#sec_about_toda-city .item{
	border-width:2px;}

section#sec_about_toda-city.list-design3 .item > div img{
	display:block;}

@media(max-width: 575.9px){
	section#sec_about_toda-city .item{
		width:calc(100% - 2rem);
		margin-right:auto;
		margin-left:auto;}

	section#sec_about_toda-city.list-design3 .item > div img{
		border-radius:0;}}



/*===== 戸田市　文化財めぐり =====*/
section#sec_bunkazai-meguri{}

section#sec_bunkazai-meguri > h3{
	background:transparent url(../images/bg_h3_machinami_blue_h50.png) left 50% repeat-x;
	background-size:auto auto; /* 幅x高さ */}

section#sec_bunkazai-meguri h3::before{
	content:"　";
	width:75px;
	width:2.5em;
	height:65px;
	background:transparent url(../images/ico_h3_haniwa.png) left bottom no-repeat;
	background-size:contain;
	display:inline-block;
	transform: translateY(-0.4em); /* 上下方向の位置を微調整する */}

@media(max-width:575.9px){
section#sec_bunkazai-meguri > h3{
	background:transparent url(../images/bg_h3_machinami_blue_h50.png) left bottom repeat-x;
	background-size:auto 50%; /* 幅x高さ */}}

/*---↓クリッカブルマップの設定　ここから↓---*/
.areaMapWrap, .areaMapWrap-touchscreen{
	width:calc(100% - 3.0rem);
  background: url(../images/map_bunkazai-meguri.jpg) left top no-repeat;
  background-size: 100% auto;
	margin-right:auto;
	margin-left:auto;}

.areaMap01, img[usemap]{
	display:block;
  width: 100%;
  height: auto;}

.areaMapWrap{display:none;}

/* PCなど、マウスホバーができる環境のみ適用 */
@media(hover:hover){
	.areaMapWrap{display:block;}
	.areaMapWrap-touchscreen{display:none;}}


@media(max-width:575.9px){
	.areaMapWrap, .areaMapWrap-touchscreen{display:none;}}
/*---↑クリッカブルマップの設定　ここまで↑---*/


/*各コースへの大きなリンクボタン（※タブレット以上は非表示）*/
@media(min-width:576px){
	section#sec_bunkazai-meguri .contents-wrap.routes{
		display:none;}}

/*※以下、タブレットより小さいデバイスで表示される各コースへのリンク*/
/*リンクを表す矢印*/
section#sec_bunkazai-meguri .item a:hover,
section#sec_bunkazai-meguri .item a:active{
	opacity:1;}

section#sec_bunkazai-meguri[class^="list-design1"] .item a:hover div::before img{
	opacity:1;}

/*場所を示す星マークの画像部分*/
section#sec_bunkazai-meguri[class^="list-design1"] .item div::before{
	content:url(../images/spacer.gif);
	position:absolute;
	display:block;
	right:0.2em;
	bottom:0.8em;
	width:114px;
	height:64px;
	z-index:500;}

section#sec_bunkazai-meguri .item a:hover div::before > img,
section#sec_bunkazai-meguri .item a:active div::before > img,
section#sec_bunkazai-meguri .item a:hover,
section#sec_bunkazai-meguri .item a:active,
section#sec_bunkazai-meguri[class^="list-design1"] .item div::before{
	opacity:1;
	z-index:100;}


/*--- 01.美女木コース ---*/
section#sec_bunkazai-meguri .item#course-bijyogi:hover{
	border-color:#c2185b;/*ワインレッド*/}

section#sec_bunkazai-meguri .item#course-bijyogi:hover p{
	background-color:rgba(194,24,91,0.7);/*ワインレッド*/
	text-shadow:1px 1px 2px #AC1552, -1px -1px 2px #AC1552, -1px 1px 2px #AC1552, 1px -1px 2px #AC1552, 0px 1px 2px #AC1552, 0 -1px 2px #AC1552, -1px 0 2px #AC1552, 1px 0 2px #AC1552;/*#AC1552はコントラスト比AAA*/}

/*地図アイコン*/
section#sec_bunkazai-meguri[class^="list-design1"] .item#course-bijyogi div::before{
	background:transparent url(../images/ico_area_bijyogi.png) center bottom no-repeat;
	background-size:contain;}

/*--- 02.笹目・早瀬コース ---*/
section#sec_bunkazai-meguri .item#course-sasame:hover{
	border-color:#795548;/*茶*/}

section#sec_bunkazai-meguri .item#course-sasame:hover p{
	background-color:rgba(121,85,72,0.7);/*茶#795548*/
	text-shadow:1px 1px 2px #735045, -1px -1px 2px #735045, -1px 1px 2px #735045, 1px -1px 2px #735045, 0px 1px 2px #735045, 0 -1px 2px #735045, -1px 0 2px #735045, 1px 0 2px #735045;}/*#735045はコントラスト比AAA*/

/*地図アイコン*/
section#sec_bunkazai-meguri[class^="list-design1"] .item#course-sasame div::before{
	background:transparent url(../images/ico_area_sasame.png) center bottom no-repeat;
	background-size:contain;}

/*--- 03.新曽コース ---*/
section#sec_bunkazai-meguri .item#course-niizo:hover{
	border-color:#355622;/*緑*/}
section#sec_bunkazai-meguri .item#course-niizo:hover p{
	background-color:rgba(53,86,34,0.7);/*緑*/
	text-shadow:1px 1px 2px #355622, -1px -1px 2px #355622, -1px 1px 2px #355622, 1px -1px 2px #355622, 0px 1px 2px #355622, 0 -1px 2px #355622, -1px 0 2px #355622, 1px 0 2px #355622;}

/*地図アイコン*/
section#sec_bunkazai-meguri[class^="list-design1"] .item#course-niizo div::before{
	background:transparent url(../images/ico_area_niizo.png) center bottom no-repeat;
	background-size:contain;}

/*--- 04.上戸田コース ---*/
section#sec_bunkazai-meguri .item#course-kamitoda:hover{
	border-color:#993F02;/*赤茶*/}
section#sec_bunkazai-meguri .item#course-kamitoda:hover p{
	background-color:rgba(153,63,2,0.7);/*赤茶*/
	text-shadow:1px 1px 2px #923C02, -1px -1px 2px #923C02, -1px 1px 2px #923C02, 1px -1px 2px #923C02, 0px 1px 2px #923C02, 0 -1px 2px #923C02, -1px 0 2px #923C02, 1px 0 2px #923C02;}/*#923C02はコントラスト比AAA*/

/*地図アイコン*/
section#sec_bunkazai-meguri[class^="list-design1"] .item#course-kamitoda div::before{
	background:transparent url(../images/ico_area_kamitoda.png) center bottom no-repeat;
	background-size:contain;}

/*--- 05.下戸田コース ---*/
section#sec_bunkazai-meguri .item#course-shimotoda:hover{
	border-color:#6c6f2d;/*くすんだ緑*/}

section#sec_bunkazai-meguri .item#course-shimotoda:hover p{
	background-color:rgba(108,111,45,0.7);
	text-shadow:1px 1px 2px #575B25, -1px -1px 2px #575B25, -1px 1px 2px #575B25, 1px -1px 2px #575B25, 0px 1px 2px #575B25, 0 -1px 2px #575B25, -1px 0 2px #575B25, 1px 0 2px #575B25;}

/*地図アイコン*/
section#sec_bunkazai-meguri[class^="list-design1"] .item#course-shimotoda div::before{
	background:transparent url(../images/ico_area_shimotoda.png) center bottom no-repeat;
	background-size:contain;}



/*===== 広報でたどる戸田のあゆみ =====*/
section#sec_kouhou-ayumi{}

section#sec_kouhou-ayumi h3::before{
	width:65px;
	height:65px;
	background:transparent url(../images/ico_h3_mimi-chan_chumoku.png) left 50% no-repeat;
	background-size:contain;
	display:inline-block;
	transform: translateY(-5px); /* 上下方向の位置を微調整する */
	transform: translateY(-0.4em);}

section#sec_kouhou-ayumi h4{
	font-size:1.5rem;
	text-align:center;
	padding-right:0;
	padding-left:0;}

section#sec_kouhou-ayumi h4::before, section#sec_kouhou-ayumi h4::after{
	content:"―";
	padding-right:1em;
	padding-left:1em;}

section#sec_kouhou-ayumi .item a:hover p,
section#sec_kouhou-ayumi .item a:active p{
	opacity:1;}

/*以下に繰り返すflex要素は、横並びでコンテンツの高さ（タイトルの背景部分の高さ）を合わせるためのものです*/
section#sec_kouhou-ayumi .contents-wrap.wrap01 .item{
	display: flex;
	flex-direction: column; /* 直下の要素を縦積みに */}

section#sec_kouhou-ayumi .contents-wrap.wrap01 .item a.item-inner{
	flex-grow: 1; /* 比率を指定 */

	display: flex;
	flex-direction: column; /* 直下の要素を縦積みに */}

section#sec_kouhou-ayumi .contents-wrap.wrap01 .item a.item-inner > div{
	display:flex;}

section#sec_kouhou-ayumi .contents-wrap.wrap01 .item p{
	letter-spacing:normal;
	font-feature-settings:"palt"; /* プロポーショナルメトリクスを有効化 */
	padding:0 1.5rem;}



/* セクション共通スタイル（調べよう、文化財めぐり、広報でたどる戸田のあゆみ） */
section#sec_bunkazai-meguri .item,
section#sec_kouhou-ayumi .item{
	border-width:2px;
	border:2px solid var(--borderColor);}

section#sec_bunkazai-meguri .item p,
section#sec_kouhou-ayumi.list-design1.angle-circle .item p,
section#sec_bunkazai-meguri .item img,
section#sec_kouhou-ayumi.list-design1.angle-circle .item img{
	border-radius:0;/*リセット（初期値）*/}



/*テキストだけのリンク（サムネ無し）*/
.list-design5 a{
	color:var(--accentColor);
	background-color:rgba(242,212,12,0.3);/*(242,212,12)＝#F2D40C(こどもサイトバナーの黄色)*/
	border:2px solid var(--borderColor);}

.list-design5 a.arrow::before, .list-design5 a.arrow::after{
	background-color:var(--accentColor);}

.list-design5 a:hover, .list-design5 a:active{
	color:white;
	text-decoration:underline;
	background-color:rgba(var(--accentColorRGB),0.95);}

.list-design5 a.arrow:hover::before, .list-design5 a.arrow:hover::after,
.list-design5 a.arrow:active::before, .list-design5 a.arrow:active::after{
	background-color:white;}


section#sec_bunkazai-meguri .item p,
section#sec_kouhou-ayumi .item p{
	text-shadow:1px 1px 2px var(--accentColor), -1px -1px 2px var(--accentColor), -1px 1px 2px var(--accentColor), 1px -1px 2px var(--accentColor), 0px 1px 2px var(--accentColor), 0 -1px 2px var(--accentColor), -1px 0 2px var(--accentColor), 1px 0 2px var(--accentColor);/*#AC1552はコントラスト比AAA*/}/*共通*/



/*↓↓↓サムネイル付きのリンクの矢印↓↓↓*/
section#sec_bunkazai-meguri .item.arrow,
section#sec_kouhou-ayumi .item.arrow{
	position:relative;}

.item.arrow::before,
.item.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0.5em;
  width: 15px;
  height: 4px;
  border-radius: 9999px;
  background-color: #FFF;
  transform-origin: calc(100% - 2px) 50%;
}

.item.arrow::before{
	z-index:100;}/*ここがないと裏側にまわる*/
/*↑↑↑サムネイル付きのリンクの矢印↑↑↑*/


/*↓↓↓テキストのみのリンク↓↓↓*/
section#sec_bunkazai-meguri .inner-ul,
section#sec_kouhou-ayumi .inner-ul{
	padding-bottom:0;
	margin-bottom:0;}

section#sec_bunkazai-meguri ul.contents-wrap a.arrow,
section#sec_kouhou-ayumi ul.contents-wrap a.arrow{
	position:relative;
	padding-right:1.5em;}

@media(min-width: 999px){
section#sec_bunkazai-meguri [class^="list-design"].outer-left > .contents-wrap,
section#sec_kouhou-ayumi [class^="list-design"].outer-left > .contents-wrap{
	width:62%;
	padding:0;
	margin-left:auto;
	margin-right:auto;}}



/*===== お知らせ =====*/
#news a:link, #news a:visited{
	background-color:rgba(242,212,12,0.3);}

#news a:hover, #news a:active{
	color:#fff;
	opacity:1;
	background-color:var(--accentColor);}

/*===== 外部リンク =====*/
#external-link a:not(.bnr)::after{
	display:none;}

#external-link ul{
	margin-right:auto;
	margin-left:auto;}

section#external-link ul li{
	padding:4px;
	border:1px solid #767676;
	margin-bottom:5px;
	margin-right:5px;
	max-width:244px;}


section#external-link ul li:hover,section#external-link ul li:active{
	background-color:var(--accentColor);}

section#external-link ul li a:hover,section#external-link ul li a:active{
	opacity:1;}

section#external-link ul li img{
	width:100%;
	display:block;
	background-color:#FFF;}

section#external-link ul li img.no-border{
	border:none;}



/*===== フッターエリア =====*/
footer{
	color:white;
	background-color:var(--borderColor);
	background-image:url(../images/bg_footer_wave.png);
	background-position:left top -20px;
	background-size:cover;
	background-repeat:no-repeat;
	margin-top:0;}

footer a{
	color:white;
	padding:0.2em;}

footer nav#footer-links a:hover,
footer nav#footer-links a:active{
	color:white;
	text-decoration:underline;
	opacity:1;}

#footer-links ul li::before,
#footer-links ul li:last-child::after{
	background:rgba(244,233,216,0.5);}/*#E0E9D8(244,233,216):くすんだ薄い緑*/

button#sns-btn img:hover, button#sns-btn img:active{
	opacity:0.8;}