@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
    font-family: "Kosugi Maru", serif;
    font-weight: 400;
    font-style: normal;
	-webkit-text-size-adjust: 100%; /* iOSの自動調整を無効化 */

    /* 変数定義 */
    --darkGreen: #008000;
    --green: #00b050;
    --lightGreen: #92d050;
    --darkBrown: #5c473e;
    --brown: #70574C;
    --lightBrown: #a59085;
    --lightOrange: #ffebDd;
    --paleOrange: #fff5eb;
    --changeYellow : #ffff00;
    --changeBlue: #0066ff;
    --commonBorderRadius: 20px;
    --contentsWidth: 80%;
}

@media screen and (max-width:769px) {
    html {
		--contentsWidth: 85%;

        font-size: 14px;
    }
}

body {
    --bodyMargin: 30px;

    position: relative;
}


@media screen and (max-width:769px) {
    body {
        --bodyMargin: 15px;

        max-width: 100%;
    }
}

p {
    margin: 0;
	word-break: break-word;
}

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

p a,
li a,
div a {
	color: #067BC2;
}

button {
	color: #000;
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

rect {pointer-events: all;}

iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: none;
}

figure {
    margin: auto;
    text-align: center;
}

figcaption {
    margin: 10px 0 0 0;
}

select {
	color: #000;
}


video {
	aspect-ratio: 16 / 9;
	width: 100%;
}

.font_red {
    color: red;
}

.ta-center {
	text-align: center;
}

.w100-center {width: 100%; margin: auto;}
.w95-center {width: 95%; margin: auto;}
.w90-center {width: 90%; margin: auto;}
.w85-center {width: 85%; margin: auto;}
.w80-center {width: 80%; margin: auto;}
.w75-center {width: 75%; margin: auto;}
.w70-center {width: 70%; margin: auto;}
.w65-center {width: 65%; margin: auto;}
.w60-center {width: 60%; margin: auto;}
.w55-center {width: 55%; margin: auto;}
.w50-center {width: 50%; margin: auto;}
.w45-center {width: 45%; margin: auto;}
.w40-center {width: 40%; margin: auto;}
.w35-center {width: 35%; margin: auto;}
.w30-center {width: 30%; margin: auto;}
.w25-center {width: 25%; margin: auto;}
.w20-center {width: 20%; margin: auto;}
.w15-center {width: 15%; margin: auto;}
.w10-center {width: 10%; margin: auto;}
.w5-center {width: 5%; margin: auto;}

@media screen and (max-width: 769px) {
    .w100-center, .w95-center, .w90-center, .w85-center, .w80-center, .w75-center, .w70-center, .w65-center, .w60-center, .w55-center, 
	.w50-center, .w45-center, .w40-center, .w35-center, .w30-center, .w25-center, .w20-center, .w15-center, .w10-center, .w5-center {
        width: 100%;
    }
}

/*---------------------------------
    緑枠線の装飾
---------------------------------*/
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: calc(100% - (var(--bodyMargin) * 2));
    height: calc(100% - (var(--bodyMargin) * 2));
    margin: var(--bodyMargin);
    border: 4px solid var(--lightGreen);
    border-radius: var(--commonBorderRadius);
    z-index: -1;
}

.side_border {position: relative;}
.side_border::before {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% - var(--bodyMargin) * 2);
    height: 100%;
    margin: 0 var(--bodyMargin);
    border-left: 4px solid var(--lightGreen);
    border-right: 4px solid var(--lightGreen);
}
.side_border>* {position: relative;}


/*---------------------------------
    header
---------------------------------*/
header {
    display: grid;
    padding: 12px 40px 0 0;
}

header a {
   	color: #000 !important;
}

/*--- h1 ---*/
header h1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: fit-content;
    height: fit-content;
    margin: 5px 25px;
    padding: 1rem 1rem 1rem 1rem;
	font-size: 2rem;
    background-color: #fff;
    z-index: 1;
}
header h1 span {
    color: var(--green);
    font-weight: normal;

    /* ↓縁取り */
    -webkit-text-stroke: 4px #000;
    text-stroke: 4px #000;
    paint-order: stroke;
    /* ↑縁取り */
}

header h1 a {
	text-decoration: none;
}


/*--- header_item ---*/
.header_item {
    position: relative;
    grid-column: 2 / 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    z-index: 4;
}

.header_item div[class*="item"] {
    background-color: var(--lightOrange);
    border-radius: 10px;
    transition: .3s;
}

.header_item img {
    width: 50px;
}


/*--- header_item item1 ---*/
.header_item .item1 {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
}

.header_item .item1 p {
    text-align: center;
}

.button_list {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 5px auto 0;
}

.button_list button {
    width: auto;
    min-width: calc(24px * 1.5);
    aspect-ratio: 1;
    text-align: center;    
    border: none;
    border-radius: 5px;
}
.button_list button:hover {
    opacity: 0.8;
}

/*--- header_item item2 ---*/
.header_item .item2 {
    width: auto;
    height: auto;
    text-align: center;
}

.header_item .item2 a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 10px 5px;
    text-align: center;
	border-radius: inherit;
    transition: .3s;
}

.header_item .item2 a:hover {
    box-shadow: 0px 0px 10px 2px var(--brown);
}

/*--- 文字サイズ変更 ---*/
.font_change button[class*="font_"] {
    background-color: var(--darkGreen);
    color: #fff;
}
.font_change #font_l {font-size: 24px;}
.font_change #font_m {font-size: 20px;}
.font_change #font_s {font-size: 16px;}

/*--- 色変更 ---*/
.color_change .color_yellow {
    background-color: #000 !important;
    color: var(--changeYellow) !important;
    border: 3px solid #000 !important;
}
.color_change .color_blue {
    background-color: var(--changeYellow) !important;
    color: var(--changeBlue) !important;
    border: 3px solid var(--changeBlue) !important;
}

/*--- 音声読上げ ---*/


/*--- 言語設定 ---*/
.lang_change select {
	display: block;
	background-color: transparent;
	border: none;
	outline: none;
	text-align: center;
	text-decoration: underline;
	cursor: pointer;
}
.lang_change select:hover {text-decoration: none}


/*--- 検索フォーム ---*/
.search_box {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.search_box form {
    display: flex;
    justify-content: flex-end;
    min-width: 40%;
    border: 3px solid var(--darkGreen);
    border-radius: 5px;
}

.search_box input[type="text"]{
    width:100%;
    padding: 8px;
    border: none;
    border-radius: 5px 0 0 5px;
    overflow: hidden;

}

.search_box input[type="submit"] {
    background-color: var(--darkGreen);
    color: #ffffff;
    border: none;
    border: 0 5px 5px 0;
    padding: 3px 10px;
    transition: .3s;
    cursor: pointer;
}
.search_box input[type="submit"]:hover {
    opacity: 0.8;
}

/* 準備中 */
.preparation {
	position: relative;
    display: block;
	padding: 0 10px 5px;
    border-radius: inherit;
}

.preparation::after {
	content: "準備中";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: gray;
	color: #fff;
	opacity: 0.8;
	align-content: center;
	border-radius: inherit;
}


@media screen and (max-width: 769px) {
	header {
		margin: 0 0 10px;
        padding: 12px 20px 0 0;
	}

	header h1 {
        margin: 0 0 0 10px;
        padding: 5px 10px 10px 5px;
        font-size: 1.5rem;
    }

    .header_item img {
        width: 40px;
    }

    .header_item .font_change {display: none;}
    .header_item .color_change {display: none;}
    .header_item .voice_read {display: none;}
    .header_item .contact {display: none;}
    .header_item .faq {display: none;}
    .search_box {display: none;}
}

/*---------------------------------
    nav
---------------------------------*/
nav a {color: #000 !important;}

.nav_list {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 var(--bodyMargin);
    text-align: center;
}

.nav_list>li {
    position: relative;
    width: 100%;
}

.nav_list .nav_btn {
	display: block;
    width: 100%;
    min-height: 3.0rem;
    padding: 5px 0 10px;
    cursor: pointer;

    /* button要素にする場合の処理 */
    background-color: transparent;
    border: none;

}

.nav_list_list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 20px 25px;
    background-color: #fff;
    border-radius: 15px;
    text-align: left;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
    z-index: 1;

    display: none; /* 最初は非表示にしておく */
}

.nav_list>li.is_active .nav_list_list {display: block;}

.nav_list_list li + li {
    margin-top: 1.2rem;
}

.nav_list_list a {
    text-decoration: underline;
    transition: .3s;
}

.nav_list_list a:hover {text-decoration: none;}

@media screen and (max-width: 769px) {
    .nav_list {
        flex-wrap: wrap;
        width: 85%;
        margin: auto;
    }

    .nav_list>li {
        width: calc(100% / 2);
    }

    .nav_list .nav_btn {
		min-height: 60px;
		margin: auto;
        padding: 10px 0;
    }

    .nav_list>li:nth-child(2) {
        border-right: 1px solid var(--brown);
        border-bottom: 1px solid var(--brown);
    }
    .nav_list>li:nth-child(3) {
        border-left: 1px solid var(--brown);
        border-bottom: 1px solid var(--brown);
    }
    .nav_list>li:nth-child(4) {
        border-right: 1px solid var(--brown);
        border-top: 1px solid var(--brown);
    }
    .nav_list>li:nth-child(5) {
        border-left: 1px solid var(--brown);
        border-top: 1px solid var(--brown);
    }
}

@media screen and (max-width: 600px) {
	.nav_list_list {padding: 20px 15px;}

	.nav_list_list li + li {
    	margin-top: 0.8rem;
	}
}


/*---------------------------------
    ボタン
---------------------------------*/
/*--- ページ内リンクボタン ---*/
.internallink_list {
    --gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px var(--gap);
    width: 80%;
    margin: 60px auto;
    padding: 0;
}

/* ボタン本体    */
.internallink_btn {
    position: relative;
    top: 0;
    width: calc((100% - var(--gap) * 3) / 3);
    border: 2px solid var(--brown);
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    align-content: center;
    transition: .3s;
}

/* 影の部分 */
.internallink_btn::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--lightBrown);
    outline: 2px solid var(--brown);
    border-radius: 10px;
    z-index: -1;
    transition: .3s;
}

.internallink_btn a {
    display: block;
    padding: 20px 15px;
    text-decoration: underline;
	color: #000;
}
/* ホバー時の動き */
.internallink_btn a:hover {text-decoration: none;}
.internallink_btn:hover {top: 5px;}
.internallink_btn:hover::after {top: 0;}


/* 「Ｖ」の部分 */
.internallink_btn span {
    position: relative;
    top: -4px;
    display: inline-block;
    width: 10px;
    margin: 0 0 0 1rem;
    aspect-ratio: 1;
    border-right: 2px solid var(--darkBrown);
    border-bottom: 2px solid var(--darkBrown);
    transform: rotate(45deg);
}

@media screen and (max-width: 1025px) {
    .internallink_list {
        --gap: 10px;
        width: 90%;
        gap: 15px var(--gap);
    }
}

@media screen and (max-width: 769px) {
    .internallink_list {
        display: none;
    }

    .internallink_btn {
        width: calc((100% - var(--gap) * 2) / 2);
    }
 
    .internallink_btn a{
        padding: 10px 15px;
    }

    .internallink_btn a{
        padding: 10px 15px;
    }
}

@media screen and (max-width: 426px) {
    .internallink_btn {
        width: 100%;
    }
}


/*--- リンクボタン ---*/
/*
    .indetail_btn：詳しくはこちらボタン
    .seemore_btn：もっと見るボタン
    .pdf_btn：PDFリンクボタン
    .movie_btn：動画リンクボタン
    .biglink_btn：大きいリンクボタン
-------------------------------------------------*/
/* リンクボタンの共通装飾 */
div[class$="_btn"] a {
    position: relative;
    display: block;
    width: fit-content;
    padding: 5px 15px;
    border-radius: 50px;
    text-decoration: underline;
    color: #000;
}
/* ホバー */
div[class$="_btn"] a:hover {text-decoration: none;}

/* 個別設定 */
div.indetail_btn a {border: 2px solid var(--darkGreen); background-color: #fff;}
div.seemore_btn a {border: none; background-color: none; color: var(--darkBrown);}
div.pdf_btn a {border: 2px solid var(--darkGreen); background-color: #fff; padding: 5px 15px 5px 43px;}
div.movie_btn a {border: 2px solid var(--darkGreen); background-color: #fff; padding: 5px 15px 5px 43px;}
div.biglink_btn a {border: 2px solid var(--darkGreen); background-color: #fff; padding: 15px 30px; margin: 40px auto 0;}


/* 「＞」の部分 */
.indetail_btn a::after, 
.seemore_btn a::after,
.biglink_btn a::after {
    content: "";
    display: inline-block;
    width: 10px;
    aspect-ratio: 1;
    margin: 0 0 0 0.5rem;
    transform: rotate(45deg);
}
/* 色の設定 */
.indetail_btn a::after {border-top: 2px solid var(--darkGreen); border-right: 2px solid var(--darkGreen);}
.seemore_btn a::after {border-top: 2px solid var(--darkBrown); border-right: 2px solid var(--darkBrown);}
.biglink_btn a::after {border-top: 2px solid var(--darkGreen); border-right: 2px solid var(--darkGreen);}


/* アイコン表示設定 */
.pdf_btn a::before,
.movie_btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
	transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 22px;
    aspect-ratio: 1;
    margin: 0 0.5rem 0 0;
}
.pdf_btn a::before {background-image: url(../img/icon_pdf.png);}
.movie_btn a::before {background-image: url(../img/icon_movie.svg);}

/* 横並びの場合 */
.link_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px;
}

/* biglink_btnでpdf_btnの場合 */
.biglink_btn.pdf_btn a {
	padding: 15px 25px 15px 45px;
}
.biglink_btn.pdf_btn a::after {
	display: none;
}

@media screen and (max-width: 426px) {
    .link_container {
        margin: 10px 0;
    }
}

/*---------------------------------
    アイコン
---------------------------------*/
/*--- 外部リンクマーク ---*/
.icon_externallink::after {
    content: "";
    background-image: url(../img/icon_externallink.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 0.8rem;
    aspect-ratio: 1;
    margin-left: 0.5rem;
}

/*--- NEWマーク ---*/
.icon_new::after {
    content: "NEW";
    display: inline-block;
    width: fit-content;
    margin-left: 0.5rem;
    padding: 2px 10px;
    text-align: center;
    align-content: center;
    font-size: 1rem;
    font-weight: normal;
    color: #fff;
    background-color: #ff0066;
    border-radius: 5px;
}

/*---------------------------------
    タブの開閉設定
---------------------------------*/
.tab_content {display: none;}
.tab_content.is_active {display: block;}


/*---------------------------------
    重要なお知らせ
---------------------------------*/
/* 大枠 */
.news_wrapper {
    display: grid;
    justify-content: start;
    grid-template-columns: 10rem 1fr;
    gap: 20px;
    width: 70%;
    margin: 0 auto 40px;
    padding: 15px 20px;
    background-color: var(--paleOrange);
    border-radius: 15px;
}


/* 見出し */
.news_wrapper h2 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    height: 100%;
    margin: auto;
    padding: 0 20px 0 0;
    align-content: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: normal;
    border-right: 3px solid var(--brown);
}

.news_wrapper h2 img {
	width: 50px;
}


/* タブボタン */
.news_wrapper .tabs_container {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: 15px 0 0;
}

.news_wrapper .tab_btn {
    padding: 5px 15px;
    background-color: #fff;
    border: 2px solid var(--darkGreen);
    border-radius: 5px;
    color: var(--darkGreen);
}
.news_wrapper .tab_btn:hover {
    text-decoration: underline;
}
.news_wrapper .tab_btn.is_active {
    background-color: var(--darkGreen);
    color: #fff;
}


/* タブの中身 */
.news_wrapper .tab_content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}


/* お知らせの内容 */
.news_list > li {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 250px;
    grid-template-rows: max-content max-content max-content 1fr;
	gap: 0 15px;
    padding: 15px;
    line-height: 1.5rem;
}

.news_list > li + li {
    border-top: 3px solid var(--brown);
}

#news .news_list > li:nth-of-type(n+4) {
 	display: none;
}

/* 見出し */
.news_list .title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 0 0 5px;
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
}

/* タグ表示 */
.news_list .title .tag {
    display: inline-block;
    margin: 2px 0;
    padding: 2px 10px;
    font-weight: normal;
    color: #fff;
    background-color: var(--darkGreen);
    border-radius: 5px;
}

/* 更新日 */
.news_list .updatedate {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: right;
	margin: auto 0;
}

/* 内容 */
.news_list .text {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin: 0 0 10px;
	line-height: 1.2rem
}

/* リンクボタン */
.news_list .link_container {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin: 0;
}

/* サムネイル */
.news_list .thumbnail {
    grid-column: 2 / 3;
    grid-row: 2 / 5;
}

.news_list .thumbnail img {
    display: block;
    /* aspect-ratio: 16 / 9; */
    object-fit: contain;
}

/* リンクリスト */
.news_list .link_list {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    margin: 10px 0 10px 1.2rem;
    list-style: disc;
}

.news_list .link_list li + li {
    margin: 5px 0 0 0;
}

.news_list .link_list a {
    text-decoration: underline;
}
.news_list .link_list a:hover {
    text-decoration: none;
}

/* もっと見るボタンの位置設定 */
.news_wrapper .seemore_btn {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    margin: 0 auto;
}

@media screen and (max-width: 1025px) {
    .news_wrapper {
        width: 85%;
    }
}

@media screen and (max-width: 769px) {
    .news_wrapper {
        width: 85%;
        justify-content: center;
        grid-template-columns: 100%;
        margin: 0 auto 20px;
    }

    .news_wrapper h2 {
        grid-row: 1 / 2;
        padding: 0;
        border-right: none;
    }

    .news_wrapper .tabs_container {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding: 0 20px;
    }

    .news_wrapper .tab_content {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .news_wrapper .seemore_btn {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    .news_list li {
        grid-template-columns: 1fr 200ox;
    }
}

@media screen and (max-width: 600px) {
    .news_wrapper {
        padding: 15px;
    }

    .news_wrapper .tabs_container {
        padding: 0 10px;
    }

    .news_list > li {
		grid-template-columns: 1fr;
        padding: 10px;
    }

	.news_list .title {
        grid-column: 1 / 2;
    	grid-row: 1 / 2;
	}

    .news_list .updatedate {
        grid-column: 1 / 2;
    	grid-row: 2 / 3;
        text-align: left;
	}

    .news_list .text {
        grid-column: 1 / 2;
    	grid-row: 3 / 4;
	}

	.news_list .link_container {
        grid-column: 1 / 2;
    	grid-row: 4 / 5;
        margin: 0 0 10px;
	}

    .news_list .thumbnail {
    	grid-column: 1 / 2;
    	grid-row: 5 / 6;
	}

	.news_list .link_list {
        grid-column: 1 / 2;
    	grid-row: 6 / 7;
	}


}

/*---------------------------------
    動線案内
---------------------------------*/
.roadguide {
    position: relative;
    margin: 150px auto 0;
    padding: 0 0 150px;
    background-color: var(--paleOrange);
}

.roadguide_content {
    width: 60%;
    margin: auto;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1025px) {
    .roadguide_content {
        width: 80%;
    }
}

/* タブの装飾 */
.roadguide .tabs_container,
.in_progress_content .tabs_container {
    display: flex;
    align-items: center;
    margin: auto;
    font-size: 1.2rem;
}

.roadguide_content .tab_btn,
.in_progress_content .tab_btn {
    padding: 10px 20px;
    background-color: #fff;
    border: 2px solid var(--darkBrown);
    border-radius: 5px 5px 0 0;
    color: var(--darkBrown);
	font-size: 1.2rem;
}

/* グレーアウト用 */
.roadguide_content .tab_btn_inactive {
    padding: 10px 20px;
    background-color: gray;
    border: 2px solid gray;
    border-radius: 5px 5px 0 0;
    color: #fff;
}

.roadguide_content .tab_btn.is_active,
.in_progress_content .tab_btn.is_active {
    background-color: var(--darkBrown);
    color: #fff;
}

/* タブの中身 */
.roadguide .tab_content {
	position: relative;
    margin: auto;
    border: 2px solid var(--darkBrown);
    background-color: #fff;
}

.roadguide .tab_content > img {
    width: 100%;
    height: auto;
}

/* 地図画像 */
.roadguide_content iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

@media screen and (max-width: 600px) {
    .roadguide_content .tab_btn,
    .in_progress_content .tab_btn {
        width: 50%;
        padding: 5px 0;
        font-size: 1rem;
    }
}

/*---------------------------------
    地図画像のの凡例
---------------------------------*/
.map-exp {
	display: grid;
	justify-content: space-between;
    margin: 10px 25px;
}

.map-exp ul {
    grid-column: 1 / 2;
    margin: 10px 0;
    list-style: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 10px 20px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.map-exp ul>* {
    font-size: 0.75em;
    font-weight: 700;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
}

.map-exp .link_btn {
    grid-column: 2 / 3;
	grid-row: 1 / 3;
}

.map-exp .note_text {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

.map-exp small {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    display: block;
}

.map-exp ul img  {
	width: 18px;
	height: 18px;
}

@media (max-width: 768px) {
    .map-exp ul {
        gap: 8px 15px;
        margin: 13px 0 3px;
    }

    .map-exp ul img {
        width: 16px;
        height: 16px;
    }

    .map-exp ul>* {
        gap: 6px;
        font-size: 0.625rem;
    }

    .map-exp small {
        font-size: 0.625rem;
    }
}

/*---------------------------------
    動線案内（リスト表示部分）
---------------------------------*/
.roadguide_list {
	--gap: 20px;

    display: flex;
	flex-wrap: wrap;
    gap: var(--gap);
	width: 60%;
    margin: 20px auto 50px;
}

.roadguide_list li {
	display: block;
	width: calc((100% - var(--gap)) / 2);
	padding: 15px 30px;
	align-content: center;
	text-align: center;
	text-decoration: underline;
	font-size: 1rem;
	background-color: #ffff;
	border: 2px solid var(--brown);
	border-radius: 50px;
	cursor: pointer;
}
.roadguide_list li:hover {
	text-decoration: none;
}

/*.roadguide_list li a {
    display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto 1fr;
    gap: 10px 15px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: .3s;
} 

.roadguide_list li a:hover {
    box-shadow: 0px 0px 10px 2px var(--brown);
} 

.roadguide_list li .title {
	grid-area: title;
    grid-column: 2 / 3;
	grid-row: 1 / 2
}

.roadguide_list li .thumbnail {
	grid-area: thumbnail;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.roadguide_list li .thumbnail img {
    width: 100%;
    height: auto;
}

.roadguide_list li .explanation {
	grid-area: explanation;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    color: gray;
} */

.roadguide h3 {
    margin: 20px 0 0;
}
.roadguide h3 p, .roadguide h3 img {
    background-color: var(--paleOrange);
}

@media screen and (max-width: 1025px) {
	.roadguide_list {
		--gap: 15px;
		width: 80%;
	}
}

@media screen and (max-width: 600px) {
	.roadguide_list li {
		width: 100%;
	}

	/*.roadguide_list li .title {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}

	.roadguide_list li .thumbnail {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}

	.roadguide_list li .explanation {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}*/
}


/*---------------------------------
    工事情報
---------------------------------*/
.construction {
    margin: 0;
    background-color: #fff;
}

/*---------------------------------
    定点ライブカメラ
---------------------------------*/
.live_camera {
    margin: auto;
    text-align: center;
}
.live_camera div {
    width: 60%;
    margin: auto;
}

.live_camera div p {
    text-align: right;
    color: var(--darkBrown);
    margin: 5px 0;
}

.live_camera iframe {
	aspect-ratio: 16 / 9;
}

@media screen and (max-width: 1025px) {
    .live_camera div {
        width: 80%;
    }
}

/*---------------------------------
    実施中の工事
---------------------------------*/
.in_progress {
    margin: 60px auto;
}

.in_progress_content {
    width: 60%;
    margin: auto;
}

@media screen and (max-width: 1025px) {
    .in_progress_content {
        width: 80%;
    }
}

/* タブの装飾 */
/* .in_progress_content .tabs_container {
    display: flex;
    align-items: center;
    margin: auto;
    font-size: 1.2rem;
}

.in_progress_content .tab_btn {
    padding: 10px 20px;
    background-color: #fff;
    border: 2px solid var(--darkBrown);
    border-radius: 5px 5px 0 0;
    color: var(--darkBrown);
}

.in_progress_content .tab_btn.is_active {
    background-color: var(--darkBrown);
    color: #fff;
} */

/* タブの中身 */
.in_progress_content .tab_content {
	position: relative;
    margin: auto;
    border: 2px solid var(--darkBrown);
    background-color: #fff;
}

.in_progress_content .tab_content > img {
    width: 100%;
    height: auto;
}

.in_progress_btn {
	position: absolute;
	display: block;
	width: 5.5%;
	height: 5.5%;
	border-radius: 50px;
	transition: .3s;
}
.in_progress_btn:hover {
	background-color: #fff;
	opacity: 0.2;
}

/* 定点カメラ */
.camera_1 {
	position: absolute;
	width: 14.3%;
    left: 1.6%;
    top: 65%;
	color: #fff;
	background-color: #06B07B;
	padding: 5px;
	border-radius: 50px;
	text-align: center;
}

.camera_1 a {
	display: block;
	width: 100%;
	padding: 5px;
	color: #fff;
	font-size: 0.8rem;
	text-decoration: none;
}
.camera_1 a:hover {
	text-decoration: underline;
}

/*---------------------------------
    h4_contentsの設定
---------------------------------*/
.h4_contents {
    width: var(--contentsWidth);
    margin: 10px auto 40px;
    padding: 40px;
    background-color: var(--paleOrange);
    border-radius: 10px;
}

@media screen and (max-width:769px) {
    .h4_contents {
		padding: 15px;
    }
}

/*---------------------------------
    工事の進捗
---------------------------------*/
.construction_progress {
    background-color: var(--paleOrange);
    border-radius: 10px;
}

.construction_progress_list {
    margin: 40px 0 0;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 10px;

}

.construction_progress_list li {
    display: grid;
    align-items: start;
    grid-template-columns: 25% 1fr;
    grid-template-rows: auto 1fr;
    gap: 15px 20px;
    padding: 15px;
}

.construction_progress_list li + li {
    border-top: 3px solid var(--darkBrown);
}

.construction_progress_list .thumbnail {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.construction_progress_list .thumbnail img {
    width: 100%;
    height: auto;
}

.construction_progress_list .info {
    grid-column: 2 / 3;
}

.construction_progress_list .title {
    font-size: 1.2rem;
    font-weight: bold;
}

.construction_progress_list .link {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0 0 0 auto;
}

.construction_progress_list .indetail_btn a {
    width: fit-content;
    margin: auto;
}

@media screen and (max-width: 600px) {
	.construction_progress_list li {
		grid-template-columns: none;
		grod-template-rows: none;
		gap: 0;
		padding: 15px 0;
    }

	.construction_progress_list .thumbnail {
		grid-column: 1 / 2;
    	grid-row: 1 / 2;
	}

	.construction_progress_list .info {
    	grid-column: 1 / 2;
		grid-row: 2 / 3
	}

	.construction_progress_list .link {
    	grid-column: 1 / 2;
    	grid-row: 3 / 4;
    	margin: 10px auto 0;
	}
}

/*---------------------------------
    通路閉鎖・交通規制のお知らせ、通路閉鎖・交通規制のお知らせ
---------------------------------*/
.close_list {
    --gap: 15px;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap);
}

.close_list li {
    width: calc((100% - var(--gap) * 2) / 3);
    background-color: #fff;
    border-radius: 10px;
    transition: .5s;
}
.close_list li:hover {
    box-shadow: 0px 0px 10px 2px var(--brown);
}

.close_list li a {
    display: block;
    padding: 15px;
    text-decoration: none;
	color: #000;
}

.close_list .titles {
    display: grid;
    justify-content: start;
}

/* 番号 */
.number {
    display: inline-block;
    aspect-ratio: 1;
    width: 2rem;
    margin: 0 0.5rem 0 0;
    text-align: center;
    align-content: center;
    color: #fff;
    border-radius: 50px;
}

.close_list .number {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    font-size: 1.5rem;
}
.passage .number {background-color: #06B07B;}
.equipment .number {background-color: #016FBC;}

/* 番号の連番設定 */
/*.close_list {counter-reset: number 0;}
.close_list .number::before {
    counter-increment: number 1;
    content: counter(number) "";
}*/

/* 見出し */
.close_info .title {
    grid-column: 2 / 3;
}

/* 日付 */
.close_info .date {
    display: block;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
   font-size: 0.8rem;
}

/*--- ピクトグラム ---*/
.pictogram {
    margin: 1rem 10px 0;
	border-radius: 5px;
	overflow: hidden;
}

.pictogram p {
	margin: 0;
    padding: 15px 20px 5px;
    font-size: 1.3rem;
    font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #fff;
}

.passage .pictogram p {background-color: #06B07B;}
.equipment .pictogram p {background-color: #016FBC;}

.pictogram img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1025px) {
    .close_list li {
        width: calc((100% - 20px) / 2);
    }
}

@media screen and (max-width: 769px) {
    .pictogram {
        margin: 1rem 0 0;
    }

    .pictogram p {
        padding: 12px 12px 0;
        font-size: 1.0rem;
    }


    ul .close_list {
        gap: 0;
    }

    .close_list li a {
        margin: 15px;
        padding: 0;
    }
}

@media screen and (max-width: 600px) {
    .close_list li {
        width: 100%;
    }
}


/*---------------------------------
    トップへ戻るボタン
---------------------------------*/
.page_top {
    right: 60px;
    width: 80px;
    aspect-ratio: 1;
    text-align: center;
    background-color: var(--green);
    border-radius: 50%;
    color: #fff;
    z-index: 2;
}

.page_top a {
    display: block;
    height: 100%;
    align-content: center;
    color: #fff;
    transition: .3s;
}
.page_top a:hover {
    opacity: 0.8;
}

/* 「Ｖ」の部分 */
.page_top span {
    display: block;
    width: 10px;
    aspect-ratio: 1;
    margin: auto;
    text-align: center;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
}

@media screen and (max-width: 769px) {
    .page_top {
        width: 60px;
    }
}

/*---------------------------------
    footer
---------------------------------*/
footer {
    position: relative;
    bottom: -15px;
    left: 0px;
    width: calc(100% - var(--bodyMargin) * 2);
    margin: auto;
    background-color: #e7f5d7;
    border-radius: 0 0 var(--commonBorderRadius) var(--commonBorderRadius);
    border: 4px solid var(--lightGreen);
    border-top: none;
}

/* footer::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid var(--lightGreen);
    border-top: none;
    border-radius: 0 0 var(--commonBorderRadius) var(--commonBorderRadius);
} */

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

/* footer_container */
.footer_container {
    display: flex;
    gap: 20px;
    padding: 20px;
}


/* フッターメニュー */
.footer_list {
    padding: 20px 40px;
    column-count: 3;
}

.footer_list li {
    margin: 15px 0;
}
.footer_list>li:first-child {
	margin-top: 0;
}

.footer_list_list li::before {
    content: "・";
    color: var(--green);
    font-weight: bold;
}


/* お問合せ先 */
.contact_info {
    width: fit-content;
    padding: 15px 20px;
    border-radius: 10px;
    background-color: #fff;
}

.contact_info .tel {
    margin: 10px 0 0;
}

.contact_info .tel img {
	width: 18px;
}


/* YouTube */
.youtube_link {
	width: fit-content;
    margin: 20px;
    text-align: right;
}

.youtube_link a {
    display: block;
	width: 100%;
}

.youtube_link img {
	width: 100px;
}


/* 右下イラスト */
.footer_img01 {
    position: absolute;
    right: 20px;
    bottom: -32px;
}

.footer_img01 > img {
	width: 300px;
}


/* copyright */
.copyright {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translate(-50%);
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 1025px) {
    .footer_list {
        column-count: 2;
    }
    .copyright {
        bottom: -40px;
    }
}

@media screen and (max-width: 769px) {
    .footer_container {
        margin: 20px 20px 0;
    }

    .footer_list {
        padding: 20px;
    }

    .youtube_link {
        margin: 15px 0 0 0;
        text-align: left;
    }

    .footer_img01 {
        right: 12px;
        bottom: -25px;
    }
    .footer_img01 > img {
        width: 220px;
    }
}

@media screen and (max-width: 600px) {
    .footer_container {
        flex-direction: column;
        gap: 10px;
        margin: 20px 10px 0;
    }

    .footer_list {
        column-count: 1;
        padding: 0;
    }

    .footer_img01 {
        bottom: -22px;
    }

    .footer_img01 > img {
        width: 200px;
    }

    .copyright {
        bottom: -60px;
    }
}

/*---------------------------------
    スクロール設定
---------------------------------*/
.scroll_wrapper {
    overflow: hidden;
    height: 100%;
}

.scroll_wrapper .scroll_content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 慣性スクロールを追加 */
}

/*---------------------------------
    動線案内のポップアップ
---------------------------------*/
.roadguide_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: none;
    width: fit-content;
    margin: auto;
    background-color: #fff;
    border: 2px solid var(--darkBrown);
    border-radius: 15px;

}

/* 閉じるボタン */
.roadguide_popup .popup_close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    aspect-ratio: 1;
    margin: auto;
    padding: 0;
    background-color: var(--darkBrown);
    border: 2px solid #fff;
    border-radius: 50%;
    text-align: center;
}

.roadguide_popup .popup_close::before {
    content: "";
    background-image: url(../img/icon_close.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 100%;
}

/* ポップアップのタイトル */
.roadguide_popup .title {
    padding: 15px 20px;
    background-color: var(--darkBrown);
    border-radius: 15px 15px 0 0;
    color: #fff;
}

/* メニュー画面 */
.roadguide_menu {
    border-radius: inherit;
}

.roadguide_menu_list {
	width: 40vw;
    max-height: 80vh;
    cursor: pointer;
}

.roadguide_menu_list li {
    margin: 0 20px;
    padding: 20px 0 0;
}

.roadguide_menu_list li + li {
    border-top: 5px dotted var(--darkBrown);
}

/* サムネイル */
.roadguide_menu_list .thumbnail,
.roadguide_menu_content .thumbnail {
    display: block;
	width: 50%;
    margin: 20px auto;
    padding: 0;
    text-align: center;
}

.roadguide_menu_list .thumbnail img,
.roadguide_menu_content .thumbnail img {
    width: 100%;
	height: auto;
    /* max-height: 300px; */
    max-width: 100%;
}

/* 単体画面 */
.roadguide_menu_content {
    display: none;
    background-color: #fff;
    border-radius: inherit;
}

.roadguide_menu_content .scroll_content {
	width: 40vw;
    max-height: 80vh;
    padding: 20px;
    overflow-y: auto;
}

/* 戻るボタン */
.back_btn {
    margin: 10px 20px 0;
    padding: 7px 20px;
    color: var(--darkBrown);
    background-color: #fff;
    border: 2px solid var(--darkBrown);
    border-radius: 50px;
}

.back_btn::before {
    content: "";
    display: inline-block;
    width: 10px;
    aspect-ratio: 1;
    margin: 0 0.5rem 0 0;
    transform: rotate(45deg);
    border-left: 2px solid var(--darkBrown);
    border-bottom: 2px solid var(--darkBrown);
}

@media screen and (max-width: 1025px) {
	.roadguide_menu_list,
	.roadguide_menu_content .scroll_content {
		width: 60vw;
	}
}

@media screen and (max-width: 769px) {
	.roadguide_menu_list,
	.roadguide_menu_content .scroll_content {
		width: 70vw;
	}
}

@media screen and (max-width: 600px) {
	.roadguide_menu_list,
	.roadguide_menu_content .scroll_content {
		width: 85vw;
	}

	.roadguide_menu_list .thumbnail,
	.roadguide_menu_content .thumbnail {
		width: 85%;
	}
}

/*---------------------------------
    ハンバーガーメニュー
---------------------------------*/
.hamburger_wrapper {
    --opacity: 1;
    --rotate: 0;
    --translate: 10px;

    display: none;
    align-items: center;
    gap: 10px;
    width: fit-content;
    aspect-ratio: 1 / 0.6;
    place-items: center;
    padding: 12px 10px;
    background-color: var(--lightOrange);
}

.hamburger_wrapper span {
    display: flex;
    width: 40px;
    height: 4px;
    border-radius: 50px;
    background-color: var(--brown);
    display: block;
    grid-area: 1 / 1 / -1 / -1;
    transition: opacity .3s ease, rotate .3s ease, translate .3s ease;
}

.hamburger_wrapper span:nth-child(1) {
    translate: 0 calc(var(--translate)* -1);
    rotate: calc(var(--rotate)* -1);
}
.hamburger_wrapper span:nth-child(2) {
    translate: 0 0;
    opacity: var(--opacity);
}
.hamburger_wrapper span:nth-child(3) {
    translate: 0 var(--translate);
    rotate: var(--rotate);
}

.hamburger_contents {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 80px 20px 20px;
    background-color: #fff;
    z-index: 3;
    overflow: auto;
	opacity: 0;
	transition: .5s;
}

.hamburger_contents nav {
    display: block;
}

.hamburger_contents .nav_list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.hamburger_contents .nav_list>li {
    border-bottom: 2px solid var(--brown);
}

.hamburger_contents .nav_list .nav_btn {
    padding: 20px 10px;
    text-align: left;
}

.hamburger_contents .nav_list button {
    display: flex;
    align-items: center;
}

.hamburger_contents .nav_btn {
    padding: 0 0 15px;
}

.hamburger_contents .nav_list button::after {
    content: "";
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 10px;
    margin: 0 0 0 1rem;
    aspect-ratio: 1;
    border-right: 2px solid var(--darkBrown);
    border-bottom: 2px solid var(--darkBrown);
    rotate: 45deg;
}

.hamburger_contents .nav_list_list {
    position: relative;
    left: 0;
    transform: translateX(0);
	display: none;
    margin: 0 0 15px;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    text-indent: 1rem;
}

.hamburger_contents .header_item {
    margin: 20px 10px 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.hamburger_contents .header_item div[class*="item"] {
    display: flex;
}

.hamburger_contents .search_box {
    display: block;
    margin: 20px 10px;
}

.hamburger_contents .search_box form {
    width: 100%;
}

/* メニューを開いているときの設定 */
body.menu_open {
    position: fixed;
}

header.menu_open h1 {
    z-index: 4;
}

header.menu_open>.header_item {
    position: fixed;
    right: 20px;
}

header.menu_open .hamburger_wrapper {
    --opacity: 0;
    --rotate: 135deg;
    --translate: 0;
}

header.menu_open .hamburger_contents {
	opacity: 1;
	pointer-events: all;
}

header.menu_open .hamburger_contents .nav_list_list {
    display: none;
}

header.menu_open .hamburger_contents .nav_list_list.is_open {
    display: block;
}



@media screen and (max-width: 769px) {
    .header_item div.hamburger_wrapper {display: grid;}

	.hamburger_contents {
		display: block;
		pointer-events: none;
	}
}

/*---------------------------------
    スマホ表示切替
---------------------------------*/
.pc_disp {display: block;} /* PCの場合のみ表示 */
.sp_disp {display: none;} /* スマホの場合のみ表示 */

@media screen and (max-width: 769px) {
    .pc_disp {display: none;}
    .sp_disp {display: block;}
}

/*---------------------------------
    色変更設定
---------------------------------*/
/*--- 黒背景、黄文字 ---*/
html body.yellow, 
html body.yellow *,
html body.yellow *::before,
html body.yellow *::after {
    background-color: #000 !important;
    color: var(--changeYellow) !important;
    border-color: var(--changeYellow) !important;
}

html body.yellow a,
html body.yellow button {
    border: 2px solid var(--changeYellow);
}

/*--- 黄背景、青文字 ---*/
html body.blue, 
html body.blue *,
html body.blue button {
    background-color: var(--changeYellow) !important;
    color: var(--changeBlue) !important;
    border-color: var(--changeBlue) !important;
}

html body.blue a,
html body.blue button {
    border: 2px solid var(--changeBlue);
}

/*---------------------------------
    更新日
---------------------------------*/
.update_date-top {
	width: 70%;
	margin: 40px auto 5px;
	text-align: right;
}

@media screen and (max-width: 1025px) {
    .update_date-top {
        width: 85%;
    }
}

@media screen and (max-width: 768px) {
    .update_date-top {
        margin: 20px auto 5px;
    }
}