@charset 'UTF-8';


/*

    Basic

*/

/*  base font  */
html { font-size: 9px;}
body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	color: #333333;
}
@media screen and (min-width: 768px) {
	html { font-size: 10px;}
}

/*  font size  */
body { font-size: 1.5rem;}
h1 { font-size: 2.4rem;}
h2 { font-size: 2.2rem;}
h3 { font-size: 1.8rem;}
h4 { font-size: 1.5rem;}
h5 { font-size: 1.5rem;}
h6 { font-size: 1.5rem;}

/*  anchor  */
a {
	color: #00988d;
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
	transition: all 0.1s linear;
}
a:hover {
	opacity: 0.7;
}

/*  global  */
.global ul,
.global li,
.global dl,
.global dt,
.global dd,
.global p {
	margin: 0;
	list-style: none;
}

/*  body  */
body {
	background-color: #f2f2f2;
}





/*

    Header

*/

/*  header  */
body {
	padding-top: 50px;
}
header.global {
	position: fixed;
	top: 0;
	left: 0;
	height: 50px;
	width: 100%;
	background-color: #ffffff;
	box-sizing: border-box;
}

/*  home  */
header.global a.home {
	display: block;
	width: 180px;
	padding: 8px 7px 0;
	z-index: 5;
	box-sizing: border-box;
}
header.global a.home img {
	width: 180px;
}

/*  sub navigation  */
nav.sub {
	position: fixed;
	top: 5px;
	right: 5px;
	height: 40px;
	display: flex;
	align-items: center;
	z-index: 9;
}
nav.sub a {
	display: block;
	margin: 0 1em;
	color: #108449;
	font-size: 1.2rem;
	text-align: center;
}
nav.sub a i {
	display: block;
	margin-bottom: 0.125em;
	font-size: 1.8rem;
}

/*  navigation  */
nav.global {
	position: fixed;
	top: 50px;
	left: -100%;
	width: calc(100% - 50px);
	height: 100%;
	background-color: #ffffff;
	color: #666666;
	font-size: 1.4rem;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.05);
	overflow: auto;
}
nav.global dl {
	padding-bottom: 50px;
}
nav.global dl dt {
	display: flex;
	align-items: center;
	padding: 2.0em 1.5em 0.5rem;
	color: #999999;
	font-size: 1.1rem;
	font-weight: normal;
}
nav.global dl dt i {
	margin-right: 0.3em;
	font-size: 3.0rem;
}
nav.global dl dt strong {
	display: block;
	font-size: 1.2rem;
	color: #666666;
}
nav.global dl dd {
	margin: 1.5em 0;
}
nav.global dl dd.settings {
	padding: 1.5em 0;
	border-top: 1px #cccccc solid;
}
nav.global dl dd ul li {
	margin: 0.5em 0;
}
nav.global dl dd ul li a {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
	color: inherit;
}
nav.global dl dd ul li a.current {
	border-left: 3px #00988d solid;
}
nav.global dl dd ul li a i {
	display: inline-block;
	color: #00988d;
	width: 1.25em;
	margin-right: 0.5em;
	font-size: 1.6rem;
	text-align: center;
}

/*  wide  */
@media screen and (min-width: 768px) {
	body {
		padding-top: 0;
	}
	header.global {
		width: 270px;
		height: 55px;
	}
	header.global a.home {
		width: 270px;
		padding: 1em 1em 0;
	}
	nav.sub {
		position: absolute;
		height: 45px;
	}
	nav.sub a {
		color: #ffffff;
	}
	nav.sub a.nav {
		display: none;
	}
	nav.global {
		top: 55px;
		left: 0 !important;
		width: 270px;
	}
	nav.global dl dd ul li a {

	}
}

/*  single  */
@media screen and (min-width: 768px) {
	body.single header.global {
		display: none;
	}
}





/*

    Footer

*/

/*  layout  */
footer.global {
	margin-top: 3em;
	padding: 1em;
	border-top: 1px #cccccc solid;
	font-size: 1.3rem;
	color: #999999;
	text-align: right;
}





/*

    Contents

*/

/*  layout  */
main #content {
	padding: 1.75em;
}
@media screen and (min-width: 768px) {
	main {
		padding-left: 270px;
	}
	main #content {
		padding: 2.5em;
	}
	body.single main {
		padding: 0;
	}
	body.single main #content {
		max-width: 720px;
		margin: 0 auto;
	}
}

/*  title  */
main h1 {
	padding: 0.5em 1.5em;
	background: rgb(0,152,141);
	background: linear-gradient(90deg, rgba(0,152,141,1) 0%, rgba(0,124,61,1) 100%);
	color: #ffffff;
}
main p#c_lead {
	margin: 0;
	padding: 0.5em 1.5em;
	font-size: 2.4rem;
	background-color: #e6e6e6;
}
main p#c_lead span {
	display: block;
	font-size: 1.5rem;
}

/*  message  */
main p.success,
main p.failure {
	margin: 0 0 2em;
	padding: 1em;
}
main p.success {
	background-color: #e9ffd6;
	border: 1px #669933 solid;
	color: #669933;
}
main p.failure {
	border: 1px #FF6666 solid;
	background-color: #ffdddd;
	color: #FF6666;
}

/*  bread crumbs  */
main nav.breadcrumbs {
	margin-top: -1em;
	padding: 0 0 1em;
}
main nav.breadcrumbs ol {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #666666;
}
main nav.breadcrumbs ol li {
	display: inline;
	margin: 0;
	font-size: 1.3rem;
}
main nav.breadcrumbs ol li:before {
	content: '\03e';
	margin: 0 0.25em;
}
main nav.breadcrumbs ol li:first-child:before {
	content: none;
}
main nav.breadcrumbs ol li a {
	color: inherit;
}
@media screen and (min-width: 768px) {
	main nav.breadcrumbs {
		text-align: left;
	}
}

/*  container  */
div.container {
	margin-bottom: 4.5em;
	padding: 0.5em 1em;
	background-color: #ffffff;
	border-radius: 0.5em;
}
div.container.group {
	margin-bottom: 1.5em;
}
@media screen and (min-width: 768px) {
	div.container {
		padding: 1em 1.75em;
	}
}

/*  headings  */
main h2 {
	margin: 0.5em 0;
}
main h2 a {
	margin-left: 2em;
	font-size: 1.3rem;
	font-weight: normal;
}
main h3 {
	margin: 0.5em 0;
}

/*  text  */
main strong {
	background: linear-gradient(transparent 60%, #ffff00 0%);
}

/*  hr  */
main hr {
	margin: 3em 0;
	border-color: #dddddd;
}

/*  list  */
main ul.list {
	border: 1px #dddddd solid;
}
main ul.list li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	padding: 0.5em;
}
main ul.list li:nth-child(odd) {
	background-color: #f9f9f9;
}
main ul.list li.title {
	background-color: #00988d;
	color: #ffffff;
}

/*  table  */
main table {
	border: #eeeeee 1px solid;
}
main table th,
main table td {
	border: none;
	border-left: #eeeeee 1px solid;
	border-right: #eeeeee 1px solid;
}
main table th {
	background-color: #00988d;
	color: #ffffff;
}
main table tr:nth-child(odd) td {
	background-color: #f9f9f9;
}
main table th a {
	color: #00cbbc;
	font-size: smaller;
}
main table th a.current {
	color: #ffffff;
}
div.table table {
	width: 100%;
}
@media screen and (max-width: 767px) {
	div.table {
		width: 100%;
		overflow: auto;
	}
	div.table table {
		width: auto;
	}
	div.table table th,
	div.table table td {
		white-space: nowrap;
	}
}

/*  pager  */
main nav.pager {
	text-align: center;
}
main nav.pager a {
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0.25em;
	background-color: #eeeeee;
	color: #333333;
}
main nav.pager a.current {
	background-color: #00988d;
	color: #ffffff;
}

/*  button  */
a.button,
button,
input[type=submit],
input[type=reset] {
	display: inline-block;
	padding: 0.5em 2em;
	border: none;
	border-radius: 0.3em;
	background-color: #00988d;
	border: 2px #00988d solid;
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
}
a.button.light,
button.light,
input[type=submit].light,
input[type=reset].light {
	background-color: #ffffff;
	color: #00988d;
}
a.button.large,
button.large,
input[type=submit].large,
input[type=reset].large {
	font-size: 1.8rem;
}
a.button.small,
button.small,
input[type=submit].small,
input[type=reset].small {
	padding: 0.25em 1em;
	font-size: 1.3rem;
}
a.button.x-small,
button.x-small,
input[type=submit].x-small,
input[type=reset].x-small {
	padding: 0 1em;
	font-weight: normal;
	font-size: 1.1rem;
}

/*  bookmark  */
a.bookmark {
	display: inline-block;
	padding: 0.125em 1em;
	border: 1px #999999 solid;
	background-color: #ffffff;
	color: #999999;
	border-radius: 3px;
	cursor: pointer;
}
a.bookmark.bookmarked {
	border-color: #00988d;
	color: #00988d;
}

/*  form  */
form {
	margin: 1em 0;
}
form dl dt {
	font-weight: normal;
	color: #666666;
}
form dl dd {
	margin: 0.25em 0 1.25em;
}
form dl dd input[type=text],
form dl dd input[type=password],
form dl dd input[type=email],
form dl dd select,
form dl dd textarea {
	width: 100%;
}
form p {
	margin: 1.5em 0;
}
form dl dd input.phone {
	max-width: 15em;
}

/*  large form  */
@media screen and (min-width: 768px) {
	form.large dl {
		display: flex;
		flex-wrap: wrap;
		border: 1px #dddddd solid;
	}
	form.large dl dt,
	form.large dl dd {
		margin: 0;
		padding: 1em;
		box-sizing: border-box;
	}
	form.large dl dt:nth-of-type(odd),
	form.large dl dd:nth-of-type(odd) {
		background-color: #f9f9f9;
	}
	form.large dl dt {
		width: 30%;
	}
	form.large dl dd {
		width: 70%;
	}
}

/*  confirm and information  */
main form.confirm dl,
main dl.information {
	border: 1px #dddddd solid;
}
main form.confirm dl dt,
main dl.information dt {
	padding: 0.5em;
	background-color: #eeeeee;
}
main form.confirm dl dd,
main dl.information dd {
	padding: 0.5em;
	margin: 0;
	min-height: 1em;
}

/*  back  */
main p.back {
	margin: 3em 0;
	padding-top: 1.5em;
	border-top: 1px #cccccc solid;
}
main p.back a,
main a.back {
	display: inline-block;
	padding: 0.1em 1.5em;
	background-color: #ffffff;
	border: 2px #00988d solid;
	color: #00988d;
	font-size: 1.5rem;
	border-radius: 0.3em;
}

/*  label  */
main span.label {
	display: inline-block;
	padding: 0 0.25em;
	background: rgb(0,152,141);
	background: linear-gradient(90deg, rgba(0,152,141,1) 0%, rgba(0,124,61,1) 100%);
	color: #ffffff;
	font-size: 1.1rem;
	border-radius: 3px;
}

/*  badge  */
span.badge {
	display: inline-block;
	min-width: 1.5em;
	height: 1.5em;
	background-color: #ff0000;
	color: #ffffff;
	border-radius: 0.75em;
	text-align: center;
	line-height: 1.5;
	letter-spacing: -0.1em;
	font-size: 10px;
	vertical-align: super;
}

/*  supple  */
main div.supple {
	margin: 1em 0;
	padding: 0 1em;
	border: 1px #00988d solid;
	background-color: #e5f4f3;
}

/*  destinations  */
main dl.destinations dd {
	padding: 0.5em;
	border: 1px #dddddd solid;
}
main dl.destinations dd[class] {
	padding: 0;
	background: none;
	border: none;

}

/*  article-index  */
main ul.article-index li {
	margin: 0;
	list-style: none;
}
main ul.article-index li h3 {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
	background: rgb(0,152,141);
	background: linear-gradient(90deg, rgba(0,152,141,1) 0%, rgba(0,124,61,1) 100%);
	color: #ffffff;
	border-radius: 5px;
	cursor: pointer;
}
main ul.article-index li h3 i {
	margin-right: 0.5em;
}
main ul.article-index li div.articles {
	display: none;
	padding-bottom: 1em;
}
main ul.article-index li div.articles p {
	margin: 0;
	color: #666666;
	font-size: smaller;
}
main ul.article-index li div.articles ul {
	margin: 0;
	list-style: none;
}
main ul.article-index li div.articles ul li {
	display: flex;
	align-items: center;
	margin: 1em 0;
	line-height: 1.25;
}
main ul.article-index li div.articles ul li:before {
	content: '';
	width: 8px;
	height: 8px;
	margin-right: 0.5em;
	border-top: 1px #666666 solid;
	border-right: 1px #666666 solid;
	transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
	main ul.article-index {
		display: flex;
		flex-wrap: wrap;
	}
	main ul.article-index li {
		width: 30%;
		margin-right: 3%;
	}
	main ul.article-index ul {
		display: block;
	}
	main ul.article-index ul li {
		width: auto;
		margin-right: 0;
	}
}

/*  categories (未使用?)  */
main ul.categories {
	display: flex;
	flex-wrap: wrap;
}
main ul.categories li {
	width: 33.3%;
	margin: 0;
	padding: 1em;
	list-style: none;
	box-sizing: border-box;
}
main ul.categories li a {
	display: block;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
main ul.categories li a i {
	margin-right: 0.75em;
	font-size: larger;
}

/*  articles  */
main ul.articles {
	margin: 0.25em 0;
}
main ul.articles li {
	margin: 0;
	padding: 0.75em 0;
	list-style: none;
}
main ul.articles li a {
	display: block;
	color: inherit;
}
main ul.articles li a span.labels {
	margin: 0 1em;
}

/*  article  */
main article {
	margin: 1em 0;
}

/*  imagetext  */
main article div.imagetext p {
	margin-top: 0.25em;
}
@media screen and (min-width: 768px) {
	main article div.imagetext {
		overflow: hidden;
	}
	main article div.imagetext p {
		margin-top: 0;
	}
	main article div.imagetext.left img {
		float: left;
		max-width: 50%;
		margin: 0 1em 1em 0;
	}
	main article div.imagetext.right img {
		float: right;
		max-width: 50%;
		margin: 0 0 1em 1em;
	}
}

/*  be item center  */
main article div.be-item.center {
	text-align: center;
}
main article div.be-item.left {
	text-align: left;
}
main article div.be-item.right {
	text-align: right;
}

/*  topmenu  */
nav.topmenu {
	margin-bottom: 4em;
}
nav.topmenu ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1em;
}
nav.topmenu ul li {
	width: 50%;
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
	list-style: none;
}
nav.topmenu ul li a {
	display: flex;
	align-items: center;
	padding: 1em;
	background-color: #ffffff;
	border-radius: 0.3em;
	color: inherit;
}
nav.topmenu ul li a i {
	margin-right: 0.4em;
	font-size: 4.0rem;
	color: #00988d;
	vertical-align: top;
}
@media screen and (min-width: 768px) {
	nav.topmenu ul li {
		width: 25%;
	}
}

/*  calendars  */
div.calendars table {
	width: 100%;
	table-layout: fixed;
}
div.calendars table td {
	font-size: 1.3rem;
	text-align: center;
	vertical-align: top;
}
div.calendars table td span {
	font-size: 2.1rem;
}
@media screen and (min-width: 768px) {
	div.calendars {
		display: flex;
		align-items: flex-start;
		gap: 2em;
	}
}

/*  faq  */
dl.faq {

}
dl.faq dt {
	display: flex;
	margin-bottom: 1em;
	cursor: pointer;
}
dl.faq dt:before {
	content: 'Q';
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	background-color: #25a69c;
	color: #ffffff;
	border-radius: 99px;
}
dl.faq dd {
	display: none;
	margin: 1em 0;
	padding: 0.1em 1em;
	background-color: #f2f2f2;
	border-radius: 5px;
}

/*  contact  */
article.contact {
	margin: 1em 0 1em 3em;
	padding: 1em;
	background-color: #f2f2f2;
	border-radius: 5px;
}
article.contact.reply {
	margin: 1em 3em 1em 0;
	background-color: #e5f4f3;
}
article.contact span.notes {
	color: #666666;
	font-size: smaller;
}
article.contact p {
	margin: 0;
}




/*

    Modal window

*/

/*  base  */
#modal-base {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	background-color: rgba(0,0,0,0.8);
	z-index: 99999;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	#modal-base {
		padding: 3em;
	}
}

/*  header  */
#modal-base #modal-header {
	padding: 0.5em 1em;
	background-color: #cccccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
}
#modal-base #modal-header p {
	float: left;
	margin: 0;
}
#modal-base #modal-header a {
	display: block;
	float: right;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	cursor: pointer;
}
#modal-base #modal-header a::before,
#modal-base #modal-header a::after {
	content: '';
	position: absolute;
	right: 0;
	width: 1.5em;
	height: 2px;
	background-color: #999999;
}
#modal-base #modal-header a::before { top: 1.5em; transform: translateY(-0.75em) rotate(45deg);}
#modal-base #modal-header a::after  { top: 0; transform: translateY(0.75em) rotate(-45deg);}

/*  body  */
#modal-base #modal-body {
	height: 85%;
	padding: 1em;
	background-color: #ffffff;
	overflow: auto;
}





/*

    Password

*/

/*  styles  */
span.password-switcher {
	position: relative;
	width: 100%;
	margin-bottom: 0.25em;
}
span.password-switcher input[type=text],
span.password-switcher input[type=password] {
	padding-right: 1.75em;
	margin-bottom: 0;
}
span.password-switcher span.switch {
	position: absolute;
	right: 0;
	top: 0;
	width: 1em;
	padding: 0 0.5em;
	color: #666666;
	cursor: pointer;
}
span.password-switcher span.switch:after {
	content: 'visibility';
	font-family: 'Material Icons';
}
span.password-switcher span.switch.visible:after {
	content: 'visibility_off';
}