@charset "utf-8";

/*----------------------------------------------------------------
 global styles
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 inside #contents
----------------------------------------------------------------*/
/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
#contents .section{}


/* heading
-----------------------------------------------------*/
#contents h1,
#contents h2,
#contents h3,
#contents h4,
#contents h5,
#contents h6{
	font-size			: 2rem;
}

/* list
-----------------------------------------------------*/
#contents .text>dl{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	align-items			: center;
	margin				: 0 0 2rem 0;
}
#contents .text>dl dt img{ border-radius: 10px; }
#contents .text>dl dd{ margin: 1.5rem 0 0 0; }
#contents .text>dl dd strong{
	display				: inline-block;
	margin				: 0 0 1.5rem 0;
	line-height			: 1.36;
}
@media screen and (min-width: 768px) and (max-width: 1050px){
#contents .text>dl{ margin: 0 0 2rem 0; }
#contents .text>dl dt,
#contents .text>dl dd{ flex: 1; }
#contents .text>dl dd{ padding: 0 0 0 1.5rem; }
}
@media screen and (min-width: 1050px) {
#contents .text>dl dd{ padding: 0 0 0 3rem; }
}

/* table
-----------------------------------------------------*/
#contents table{
	border-top		: 1px dashed #000;
	width			: 710px;
	margin			: 0 0 1rem 0;
}
#contents table thead th{
	padding			: 0.8rem 0;
	background		: #eb9800;
}

#contents table tbody th,
#contents table tbody td{
	border-bottom		: 1px dashed #000;
	padding				: 1rem 0;
	vertical-align		: top;
}
#contents table tbody th{
	min-width			: 5em;
	padding				: 1rem 1rem 1rem 0;
}
#contents table tbody td{ padding: 1rem 0; }
#contents table tbody td[rowspan]{ vertical-align: middle; }


/* block elements
-----------------------------------------------------*/
#contents .text>p{ margin: 0 0 1.5em 0; }
#contents .text>p:last-child{ margin-bottom: 0; }



/* inline elements
-----------------------------------------------------*/
#contents strong{
	font-size			: 1.8rem;
	font-weight			: 400;
}
@media screen and (min-width: 768px) {
#contents strong{ font-size: 2.2rem; }
}

#contents small{
	display				: block;
	font-size			: 1.2rem;
	line-height			: 1.5;
}
#contents em{
	padding				: 0 0.2rem;
	box-shadow			: 0 -0.8rem 0 #ffff00 inset;
	line-height			: 1.4;
}


/*-----------------------------------------------------
 class
-----------------------------------------------------*/
/* row
-----------------------------------------------------*/
#contents .container>.row{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: column;
	margin				: 2.5rem 0 4rem 0;
}
#contents .container>.row:last-child{ margin: 2.5rem 0 0 0; }
#contents .container>.row>h2{
	margin				: 0 0 2.5rem 0;
	border-top			: 5px solid #95bc00;
	padding				: 1.2rem 0 0 0;
	font-size			: 2.2rem;
}
#contents .container>.row>.text{
	width: 100%;
}
@media screen and (min-width: 768px) {
#contents .container>.row{
	flex-direction		: row;
	align-items: flex-start;
	margin				: 4rem 0 10rem 0;
}
#contents .container>.row:last-child{ margin: 4rem 0 10rem 0; }
#contents .container>.row>h2{
	width				: 20rem;
	margin				: 0 5rem 0 0;
}
#contents .container>.row>.text{ flex: 3; }
}

/* responsive-table
-----------------------------------------------------*/
#contents .responsive-table table{ width:710px; }
@media screen and (max-width: 768px) {
#contents .responsive-table{
	width				: 100vw;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling	: touch;
	overflow			: auto;
	white-space			: nowrap;
	cursor				: pointer;
}
}
@media screen and (min-width: 768px) and (max-width: 1050px) {
#contents .responsive-table table{ width:auto!important; }
}

/* horizontal-table
-----------------------------------------------------*/
#contents table.horizontal-table{ border-top: none; }
#contents table.horizontal-table th,
#contents table.horizontal-table td{
	padding				: 0.8rem 0;
	text-align			: center;
	vertical-align		: middle;
}
#contents table.horizontal-table thead th{
	width				: 100px;
	border-left			: 2px solid #f6f3e4;
}

/* class
-----------------------------------------------------*/
#contents .class{
	margin				: 0 0 1.5rem 0;
	background			: #FFF;
}
#contents .class:last-child{ margin: 0; }
#contents .class .row{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: column-reverse;
	padding				: 1rem 2rem 2rem 1rem;
}
#contents .class .row dl{
	flex				: 2;
	padding				: 2rem 0 0 0;
}
#contents .class .row dl dt{
	margin				: 0 2rem 2rem 2rem;
	text-align			: center;
}
#contents .class .row .image{ text-align: center; }
#contents .class .row p{ margin: 1rem 0 0 0; }
#contents .class .row .button{
	display				: block;
	padding				: 0.4rem 0;
	background			: #95bc00;
	border				: 2px solid #95bc00;
	border-radius		: 0.5rem;
	text-align			: center;
	text-decoration		: none;
	color				: #FFF;
}
#contents .class .row .button:hover{
	background			: #FFF;
	color				: #95bc00;
}
@media screen and (min-width: 768px) {
#contents .class{ margin: 0 0 3rem 0; }
#contents .class:last-child{ margin: 0 0 5rem 0; }
#contents .class .row{
	flex-direction		: row-reverse;
	padding				: 1rem 2rem 3rem 1rem;
}
#contents .class .row .image{
	flex				: 1;
	margin				: 0 2rem 0 0;
}
#contents .class .row dl{
	flex				: 2;
	padding				: 2rem 0 0 0;
}
#contents .class .row dl dt{
	margin				: 0 0 2rem 0;
	text-align			: left;
}
#contents .class .row .button{
	padding				: 1.2rem 0;
	font-size			: 1.8rem;
}
}
@media screen and (min-width: 1050px) {
#contents .class .row .image{ margin: 0 1rem 0 0; }
}

/* responsive-map
-----------------------------------------------------*/
#contents .responsive-map{ margin: 0 0 1.5rem 0; }
#contents .responsive-map iframe{ width: 100%; }

@media screen and (max-width: 768px) {
#contents .responsive-map{
	height				: 0;
	overflow			: hidden;
	padding-top			: 150%;
	position			: relative;
}
#contents .responsive-map iframe{
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 100%;
}
}


/* caution
-----------------------------------------------------*/
#contents .caution{ border: 0.5rem solid #ff0000; }

#contents .caution>.row{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	align-items			: center;
	padding				: 1.2rem 1.8rem;
	color				: #ff0000;
}
#contents .caution>.row .image{
	flex				: 1;
	margin				: 0 1.8rem 0 0;
}
#contents .caution>.row dl{ flex: 2; }
#contents .caution>.row dt{ font-weight: bold; }

@media screen and (min-width: 768px) {
#contents .caution>.row dl{ flex: 6; }
}