@charset "utf-8";
/*
:root {
	--white: #fff;
	--black: #000;
	--gray1: #333;
	--gray2: #666;
	--gray3: #999;
	--gray4: #ccc;
	--gray5: #e6e6e6;
	--gray6: #f2f2f2;
	--blue1: #7dccf3;
	--blue2: #0080cb;
}
*/
/* ------------------------------------------------ */
.guide {
}
/* ------------------------------------------------ */
.guide-top {
	position: relative;
	text-align: center;
	margin-bottom: 40px;
}
/* ------------------------------------------------ */
.guide-link {
	background-color: var(--white);
	border-radius: 10px;
	padding: 20px;
}
.guide-link ul {
}
.guide-link ul li {
	padding: 15px 20px;
}
@media screen and (min-width: 768px) {
	.guide-link ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0px;
		align-items: stretch;
		justify-content: center;
	}
	.guide-link ul li {
		box-sizing: border-box;
		flex: 0 0 calc(50% - 3px);
	}
}
@media screen and (max-width: 767px) {

}
.guide-link ul li a {
	display: block;
	position: relative;
	color: var(--black);
	border-bottom: 2px solid var(--black);
}
.guide-link ul li a span b::before {
	content: "";
	position: absolute;
	z-index: 2;
	right: -2px;
	bottom: -2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 0px 0px 22px;
	border-color: transparent transparent transparent var(--black);
	transition: all 0.2s linear;
}
.guide-link ul li a:hover {
	color: var(--blue3);
	border-bottom: 2px solid var(--blue4);
}
.guide-link ul li a:hover span b::before {
	border-color: transparent transparent transparent var(--blue4);
}
.guide-link ul li a span {
	display: block;
	position: relative;
	line-height: 1em;
}
.guide-link ul li a span::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%2315a8bf" d="M50,0L50,50L0,50L0,0L50,0ZM25,10.526C21.721,10.526 19.059,13.188 19.059,16.466C19.059,19.745 21.721,22.407 25,22.407C28.279,22.407 30.941,19.745 30.941,16.466C30.941,13.188 28.279,10.526 25,10.526ZM40.653,15.526C37.95,15.526 35.755,17.72 35.755,20.423C35.755,23.126 37.95,25.321 40.653,25.321C43.356,25.321 45.55,23.126 45.55,20.423C45.55,17.72 43.356,15.526 40.653,15.526ZM34.109,31.58L34.106,31.58L34.106,39L47.199,39L47.199,31.58L47.197,31.58L47.199,31.45C47.199,28.747 44.266,26.553 40.653,26.553C37.04,26.553 34.106,28.747 34.106,31.45L34.109,31.58ZM3.002,31.58L3,31.58L3,39L16.092,39L16.092,31.58L16.09,31.58L16.092,31.45C16.092,28.747 13.159,26.553 9.546,26.553C5.933,26.553 3,28.747 3,31.45L3.002,31.58ZM9.546,15.526C6.843,15.526 4.649,17.72 4.649,20.423C4.649,23.126 6.843,25.321 9.546,25.321C12.249,25.321 14.444,23.126 14.444,20.423C14.444,17.72 12.249,15.526 9.546,15.526ZM17.062,30L17.059,30L17.059,39L32.941,39L32.941,30L32.938,30L32.941,29.842C32.941,26.564 29.383,23.902 25,23.902C20.617,23.902 17.059,26.564 17.059,29.842L17.062,30Z"/></svg>');
	background-repeat: no-repeat;
	background-position: center top;
	border-radius: 4px;
}
.guide-link ul li a span b {
	display: block;
	position: relative;
	font-size: 20px;
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 700;
	line-height: 1em;
	padding: 10px 10px 10px 50px;
}
/* ------------------------------------------------ */
.guidepost {
}
/* ------------------------------------------------ */
.guidepost-top {
	position: relative;
	margin-bottom: 40px;
}
.guidepost-top p {
	position: relative;
	color: var(--white);
	font-weight: 500;
	text-align: center;
	background-color: var(--blue2);
	border-radius: 10px;
	padding: 10px;
}
.guidepost-top p::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 6px 0px 6px;
	border-color: var(--blue2) transparent transparent transparent;
}
/* ------------------------------------------------ */
.guidepost-btm {
	text-align: center;
	border-radius: 10px;
	padding: 20px 10px;
}
.guidepost-btm p {
	display: inline-block;
	position: relative;
	color: var(--blue5);
	font-size: 20px;
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 700;
	padding: 0px 20px;
}
.guidepost-btm p::before,
.guidepost-btm p::after {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0px;
	width: 2px;
	height: 100%;
	background-color: var(--blue5);
}
.guidepost-btm p::before {
	left: 0px;
	transform: rotate(-20deg);
}
.guidepost-btm p::after {
	right: 0px;
	transform: rotate(20deg);
}
.guidepost-btm .link {
	padding: 10px 10px;
}
/* ------------------------------------------------ */
.guidepost-bloc {
	background-color: var(--white);
	border: 2px solid var(--black);
	margin-bottom: 40px;
	border-radius: 10px;
	overflow: hidden;
}
.guidepost-bloc h3 {
	position: relative;
	line-height: 1em;
	text-align: center;
	margin-bottom: 0px;
	padding: 45px 5px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	background-size: cover;
}
.guidepost-bloc#guide1-1 h3 {background-image: url("./img/guide/title1.webp");}
.guidepost-bloc#guide1-2 h3 {background-image: url("./img/guide/title2.webp");}
.guidepost-bloc#guide1-3 h3 {background-image: url("./img/guide/title3.webp");}
.guidepost-bloc#guide1-matome h3 {background-image: url("./img/guide/title4.webp");}
.guidepost-bloc h3::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
}
.guidepost-bloc h3 span {
	display: block;
	position: relative;
	z-index: 2;
}
.guidepost-bloc h3 span em {
	display: inline-block;
	width: 44px;
	height: 44px
	font-size: 30px;
	font-weight: 700;
	line-height: 44px;
	vertical-align: middle;
	color: var(--white);
	background-color: var(--blue2);
	border-radius: 100%;
}
.guidepost-bloc h3 span b {
	display: inline-block;
	font-size: 30px;
	font-size: clamp(28px, 3vw, 30px);
	font-weight: 700;
	line-height: 1em;
	vertical-align: middle;
	padding: 0px 10px;
}
@media screen and (max-width:479px) {
	.guidepost-bloc h3 {
		padding: 35px 5px;
	}
	.guidepost-bloc h3 span em {
		width: 36px;
		height: 36px
		font-size: 20px;
		line-height: 36px;
	}
	.guidepost-bloc h3 span b {
		display: block;
		padding: 10px 10px 0px 10px;
	}
}
.guidepost-inner {
	box-sizing: border-box;
	padding: 15px;
}
@media screen and (max-width:479px) {
	.guidepost-inner {
		padding: 10px;
	}
}
.guidepost-box {
	margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
	.guidepost-inner {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-spacing: 0px;
	}
	.guidepost-box {
		display: table-cell;
		vertical-align: top;
		box-sizing: border-box;
		padding: 10px 10px;
	}
	.guidepost-box:first-child {
	border-right: 1px dashed var(--gray3);
	}
}
@media screen and (max-width: 767px) {
	.guidepost-box {
		margin-bottom: 40px;
	}
}
.guidepost-box h4 {
	position: relative;
	color: var(--white);
	font-size: 24px;
	font-size: clamp(20px, 2.4vw, 24px);
	font-weight: 700;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 20px;
	padding: 10px 10px;
}
.guidepost-box:first-child h4 {
	background-color: var(--blue1);
}
.guidepost-box:last-child h4 {
	background-color: var(--blue3);
}
.guidepost-box h4::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 150px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	opacity: .4;
}
.guidepost-box:first-child h4::after {
	background-image: url("./img/guide/kobetsu.webp");
}
.guidepost-box:last-child h4::after {
	background-image: url("./img/guide/shudan.webp");
}
.guidepost-box dl {
	margin-bottom: 20px;
}
.guidepost-box dl:last-child {
	margin-bottom: 0px;
}
.guidepost-box dl dt {
	color: var(--btn2);
	font-size: 20px;
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 700;
	line-height: 1em;
	border-bottom: 2px solid var(--black);
	padding: 10px 10px;
}
.guidepost-box dl dd {
	padding: 10px 10px;
}
.guidepost-box dl dd ul {
}
.guidepost-box dl dd ul li {
}
.guidepost-box dl dd ul li b {
	display: block;
	position: relative;
	color: var(--blue2);
	font-size: 1.1em;
	padding: 0px 0px 0px 15px;
}
.guidepost-box dl dd ul li b::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: var(--blue4);
	border-radius: 10px;

}
.guidepost-box dl dd ul li span {
	display: block;
	padding: 0px 0px 10px 5px;
}

.guidepost-matome {
	background-color: var(--btn1);
}
.guidepost-matome h3 {
}
.guidepost-matome-table {
	padding: 15px;
}
@media screen and (max-width:479px) {
	.guidepost-matome-table {
		padding: 5px;
	}
}
.guidepost-matome-table-top {
}
.guidepost-matome-table-list {
}
@media screen and (min-width: 768px) {
	.guidepost-matome-table-top {
		text-align: center;
/*
		background-color: var(--white);
		border: 2px solid var(--black);
*/
		border-bottom: none;
	}
	.guidepost-matome-table-list {
/*
		background-color: var(--white);
		border: 2px solid var(--black);
*/
	}
}
@media screen and (max-width: 767px) {
	.guidepost-matome-table-top {
		display: none;
	}
}
.guidepost-matome-table ul {
}
.guidepost-matome-table ul li {
	font-weight: 500;
	line-height: 1.4em;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.guidepost-matome-table ul {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-spacing: 2px 1px;
	}
	.guidepost-matome-table ul li {
		display: table-cell;
		vertical-align: middle;
	border-radius: 2px;
/*
		border-right: 2px solid var(--black);
*/
	}
	.guidepost-matome-table ul li:first-child {
		width: 20%;
	}
	.guidepost-matome-table ul li:last-child {
		border-right: none;
	}
	.guidepost-matome-table-top ul li {
		color: var(--white);
		font-size: 20px;
		font-size: clamp(18px, 2vw, 20px);
		font-weight: 700;
		padding: 10px 0px;
	}
	.guidepost-matome-table-top ul li:nth-child(1) {
		background-color: var(--gray3);
	}
	.guidepost-matome-table-top ul li:nth-child(2) {
		background-color: var(--blue1);
	}
	.guidepost-matome-table-top ul li:nth-child(3) {
		background-color: var(--blue3);
	}
	.guidepost-matome-table-list ul {
/*
		border-bottom: 1px solid var(--black);
*/
	}
	.guidepost-matome-table-list ul:last-child {
		border-bottom: none;
	}
	.guidepost-matome-table-list ul li {
		background-color: var(--white);
	}
}
@media screen and (max-width: 767px) {
	.guidepost-matome-table-list ul {
		background-color: var(--white);
		border: 2px solid var(--black);
		border-radius: 10px;
		margin-bottom: 5px;
	}
	.guidepost-matome-table-list ul li {
	}
	.guidepost-matome-table ul li:nth-child(1) {
		border-bottom: 1px solid var(--black);
	}
	.guidepost-matome-table ul li:nth-child(2) {
		border-bottom: 1px dashed var(--black);
	}
}
.guidepost-matome-table ul li h4 {
	text-align: center;
	padding: 5px;
}
@media screen and (min-width: 768px) {
	.guidepost-matome-table ul li h4 {
		color: var(--blue2);
		font-size: 18px;
		font-weight: 700;
		line-height: 1em;
		padding: 10px 5px;
	}
}
@media screen and (max-width: 767px) {
	.guidepost-matome-table ul li h4 {
		color: var(--blue2);
		font-size: 20px;
		font-size: clamp(18px, 2vw, 20px);
		font-weight: 700;
		padding: 10px 5px;
	}
}
.guidepost-matome-table ul li dl {
}
.guidepost-matome-table ul li dl dt {
		padding: 5px;
}
.guidepost-matome-table ul li dl dd {
		padding: 10px;
}
@media screen and (min-width: 768px) {
	.guidepost-matome-table ul li dl dt {
		display: none;
	}
	.guidepost-matome-table ul li dl dt {
		padding: 5px;
	}
	.guidepost-matome-table ul li dl dd {
		padding: 15px;
	}
}
@media screen and (max-width: 767px) {
	.guidepost-matome-table ul li dl {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-spacing: 0px;
	}
	.guidepost-matome-table ul li dl dt {
		display: table-cell;
		width: 80px;
		vertical-align: middle;
	}
	.guidepost-matome-table ul li dl dd {
		display: table-cell;
		vertical-align: middle;
	}
}
.guidepost-matome-table ul li dl dt b {
	display: inline-block;
	color: var(--white);
	line-height: 1em;
	padding: 10px 10px;
}
.guidepost-matome-table ul li:nth-child(2) dl dt b {
	background-color: var(--blue1);
}
.guidepost-matome-table ul li:nth-child(3) dl dt b {
	background-color: var(--blue3);
}






/* ------------------------------------------------ */