@charset "utf-8";

.cf:after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0;
}

/*pc
-------------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	#navArea .inner > ul {
		display: none;
	}
	
}

/*sphone
-------------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	body {
		background-position: right -150px bottom 30px;
		background-size: auto 180px;
	}
	.pc, table.pc {
		display: none;
	}
	.sp {
		display: inline;
	}
	table.sp {
		display: table;
	}
	#bodyArea {
    width: 100%;
		font-size: 16px;
		line-height: 32px;
		overflow: hidden;
	}
	#bodyArea #contentsLeft ul, #bodyArea #contentsLeft, #bodyArea #contentsRight {
    width: 100% !important;
		float: none !important;
	}
	#bodyArea #contentsTopWrap, #bodyArea #footArea, #bodyArea #contentsWrap {
    padding: 0 20px;
	}
	#contentsWrap {
	}
	img {
		max-width: 100%;
		height: auto;
	}

	/*header
	-------------------------------------------------------*/
	#bodyArea #headArea {
		margin-bottom: 0px;
	}
	#bodyArea #headArea p {
		padding: 20px 0 0 0;
		font-size: 0.5rem;
		line-height: 10px;
	}
	#bodyArea #headArea * {
		text-align: center;
	}
	#bodyArea #headArea h1 {
		margin-top: 10px;
    padding: 0;
	}
	#bodyArea #headArea h1 a {
    padding: 0;
		display: block;
	}
	#bodyArea #headArea #headBanner {
		left: 20px;
		top: 20px;
	}
	#bodyArea #gmenuArea {
		display: none;
		visibility: hidden;
	}
	#bodyArea #headArea #headRight, #bodyArea #headArea #headRight ul * {
    width: 100% !important;
    float: none !important;
	}
	#bodyArea #headRight {
		padding-bottom: 20px;
	}
	#bodyArea #headArea #headRight ul li {
		background-position: left 20px top 0px !important;
		min-height: 40px;
    padding-left: 60px !important;
	}
	#bodyArea #headArea #headRight h2 {
		height: 60px;
		font-size: 12px;
		line-height: 18px;
	}
	#bodyArea #headArea #headRight li {
		border-bottom: #412900 1px solid;
		padding-bottom: 15px;
	}
	#bodyArea #headArea #headRight li:nth-of-type(n+2) {
		margin-top: 15px;
	}
	#bodyArea #headArea #headRight li a {
		font-weight: bold;
		display: block;
	}
	#bodyArea #headArea #headRight li * {
		text-align: left !important;
	}
	#bodyArea #headArea #headRight ul #phone {
		font-family: -apple-system, BlinkMacSystemFont, "メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
		font-weight: bold;
	}
	#bodyArea #headArea #headRight ul #phone a {
    font-size: 28px;
		line-height: 30px;
	}
	#bodyArea #headArea #headRight ul #phone span {
    font-size: 14px;
		line-height: 20px;
	}
	#bodyArea #headArea #headRight ul #mail {
    font-size: 14px;
		line-height: 20px;
	}
	
	#navArea * {
		box-sizing: border-box;
	}
	
	/*menu
	-------------------------------------------------------*/
	#navArea nav {
		display: block;
		position: fixed;
    right: -80%;
		top: 0;
		width: 80%;
		height: 100%;
		background: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 3;
		opacity: 0;
	}
	#navArea.open nav {
		right: 0;
		opacity: 1;
	}
	#navArea nav .inner {
		margin-top: 80px;
	}
	#navArea nav .inner > ul {
		border-bottom: #412900 1px solid;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#navArea nav .inner > ul li {
		position: relative;
		margin: 0;
		border-top: #412900 1px solid;
	}
	#navArea nav .inner > ul li a {
		display: block;
		color: #412900;
		padding: 15px 20px;
		font-size: 16px;		
		text-decoration: none;
		transition-duration: 0.2s;
	}
	#navArea nav .inner > ul li a:hover {
		background: #412900;
		color: #ffffff;
	}
	#navArea nav .inner > ul li * {
		font-size: 120%;
		font-weight: bold;
		text-align: left !important;
	}
  #navArea nav .inner > ul > li.dd > * > a {
    pointer-events: none;
		position: relative;
  }
  #navArea nav .inner > ul > li.dd > * > a:hover {
    width: 0px;
  }
	#navArea .sub {
		display: none;
	}
	#navArea .menu {
		background: #faf7ea;
	}
  #navArea .menu li a::before {
    top: 3px;
  }
	#navArea nav .inner > ul > li > div > a::before {
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		font-family: FontAwesome;
		content: "\f107";
		display: block;
		position: absolute;
		right: 10px;
		top: 15px;
	}
	#navArea nav .inner > ul > li.dd > div.open > a::before {
		transform: rotate(180deg);
	}
	.toggle_btn {
		display: block;
		background-color: #412900;
		position: fixed;
		top: 5px;
		right: 5px;
		width: 50px;
		height: 50px;
		border-radius: 5px;
		box-sizing: border-box;
		transition: all .5s;
		cursor: pointer;
		z-index: 3;
	}
	.toggle_btn span {
		display: block;
		position: absolute;
		left: 10px;
		width: 30px;
		height: 2px;
		background-color: #ffffff;
		border-radius: 4px;
		transition: all .5s;
	}
	.toggle_btn span:nth-child(1) {
		top: 14px;
	}
	.toggle_btn span:nth-child(2) {
		top: 24px;
	}
	.toggle_btn span:nth-child(3) {
		bottom: 14px;
	}
	.open .toggle_btn span {
		background-color: #ffffff;
	}
	.open .toggle_btn span:nth-child(1) {
		-webkit-transform: translateY(10px) rotate(-315deg);
		transform: translateY(10px) rotate(-315deg);
	}
	.open .toggle_btn span:nth-child(2) {
		opacity: 0;
	}
	.open .toggle_btn span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(315deg);
		transform: translateY(-10px) rotate(315deg);
	}
	
	#mask {
		display: none;
		transition: all .5s;
	}
	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.3;
		z-index: 2;
		cursor: pointer;
	}

	/*footer
	-------------------------------------------------------*/
	#btnTop {
		position: fixed;
		right: 5px;
		bottom: 5px;
		z-index: 10;
	}
	#btnTop a {
		background: #412900;
		color: #ffffff;
		width: 50px;
		height: 50px;
		padding: 5px 0;
		text-decoration: none;
		text-align: center;
		border-radius: 50%;
		box-sizing: border-box;
		display: block;
	}
	#btnTop a::before {
		font-family: FontAwesome;
		content: "\f106";
		font-size: 20px;
		line-height: 18px;
		display: block;
	}
	#btnTop a::after {
		font-family: Arial, Helvetica, "sans-serif";
		content: "TOP";
		font-size: 13px;
		line-height: 18px;
		display: block;
	}
	#btnTop a img {
		display: none;
	}

	#bodyArea #footArea * {
		text-align: center;
	}
	#bodyArea #footArea ul {
    padding: 20px 0;
	}
	#bodyArea #footArea ul li {
    float: none;
    width: 100%;
	}
	#bodyArea #footArea ul li:nth-of-type(n+2) {
		margin-top: 10px;
	}
	#bodyArea #footArea address {
    padding-top: 200px;
	}
	#bodyArea #btnTop {
    width: 55px;
    height: 55px;
	}
	#bodyArea #btnTop {
    right: 0px;
    bottom: 0px;
	}
	#bodyArea #btnTop img {
		width: 100%;
		height: auto;
	}
	
	/*photo
	-------------------------------------------------------*/
	#bodyArea #slideArea {
		padding-top: 0px;
	}
	#bodyArea #contentsWrap #contentsLeft #slideArea {
		width: 100vw;
		margin-left: -20px;
	}
	#bodyArea #slideArea img {
		width: 100%;
		height: auto;
	}
	#bodyArea #carouselArea {
    margin-bottom: 0px;
		border-radius: 0px;
	}
	#bodyArea #carouselArea h2 {
		padding: 10px 0;
		text-align: center;
	}
	#bodyArea #carouselArea #slider-prev {
    left: 0px;
	}
	#bodyArea #carouselArea #slider-next {
    right: 0px;
	}
	#bodyArea #carouselArea #slider-prev, #bodyArea #carouselArea #slider-next {
    top: inherit;
		bottom: 9px;
	}
	
	/*contentsLeft
	-------------------------------------------------------*/
	#bodyArea #contentsWrap #contentsLeft {
		font-size: 16px;
		line-height: 32px;
	}
	#bodyArea #contentsWrap #contentsLeft h1 {
		font-weight: 600;
	}
	#bodyArea #contentsTopWrap #contentsLeft ul li {
    float: none;
    margin: 0;
	}
	#bodyArea #contentsTopWrap #contentsLeft ul li:nth-of-type(n+2) {
		margin-top: 10px;
	}
	#bodyArea #contentsTopWrap #contentsLeft ul li img {
	}
	
	/*contentsRight
	-------------------------------------------------------*/
	#bodyArea #contentsRight #newsArea {
		background-image: url(../images/bac_topnews_sp.png);
		height: inherit;
    margin: 30px 0;
		border-radius: 5px;
	}
	#bodyArea #contentsRight #newsArea dl dt, #bodyArea #contentsRight #newsArea dl dt span {
		font-size: 14px;
		line-height: 20px;
	}
	#bodyArea #contentsRight #newsArea dl dt:nth-of-type(n+2) {
		margin-top: 10px;
	}
	#bodyArea #contentsRight #newsArea dl dd {
		font-size: 16px;
	}
	#bodyArea #contentsRight #newsArea p {
    padding: 10px;
	}
	#bodyArea #contentsRight .bannerArea {
		text-align: center;
	}
	#bodyArea #contentsRight .bannerArea li {
    margin: 0;
	}
	#bodyArea #contentsRight .bannerArea li:nth-of-type(n+2) {
		margin-top: 10px;
	}
	#bodyArea #contentsRight #localMenu, #bodyArea #topMenu {
		overflow: visible !important;
	}
	#bodyArea #contentsRight #localMenu li a, #bodyArea #topMenu li a {
		background: #ffffff;
		padding: 15px 20px;
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		text-decoration: none;
		border-radius: 5px;
		display: block;
	}
	#bodyArea #contentsRight #localMenu li a::before, #bodyArea #topMenu li a::before {
		font-family: FontAwesome;
		content: "\f105";
		padding-right: 10px;
		display: inline-block;
	}
	#bodyArea #contentsRight #localMenu li a img, #bodyArea #topMenu li a img {
		display: none;
	}
	
	/*page
	-------------------------------------------------------*/
	#bodyArea #contentsWrap #contentsLeft #breadcrumb {
		background: #d9d0ae;
    width: 100vw;
		margin-bottom: 30px;
    margin-left: -20px;
    padding: 5px 20px;
		font-size: 12px;
		line-height: 16px;
    text-align: left;
	}
	#bodyArea #contentsWrap #contentsLeft > h2 {
		margin-top: 30px;
	}
	#bodyArea #contentsWrap #contentsLeft h2 {
		font-size: 18px;
		font-weight: 600;
	}
	#contentsLeft .title.sp {
		display: block;
	}
	#bodyArea .wrapMenu {
		background: #d9d0ae;
		width: 100vw;
		margin-top: 30px;
		margin-left: -20px;
		padding: 30px 20px;
		box-sizing: border-box;
	}
	#bodyArea .wrapMenu h2 {
		font-size: 18px;
		text-align: center;
		display: block;
	}
	#bodyArea #contentsRight #localMenu {
		margin: 20px 0 0 0;
	}
	#bodyArea #contentsWrap #contentsLeft ul {
		margin-left: 0px;
	}
	#bodyArea #contentsWrap #contentsLeft ul li {
    margin: 0 0 5px 20px;
	}
	#bodyArea #contentsWrap #contentsLeft ul.photoList li {
    width: 100%;
		box-sizing: border-box;
	}
	#bodyArea #contentsWrap #contentsLeft ul.photoList li img {
    width: 100%;
    height: auto;
	}
	#bodyArea #contentsWrap #contentsLeft .photoSingle {
    float: none;
    width: 100%;
    margin-right: 0px;
	}
	#bodyArea #contentsWrap #contentsLeft #historyTable td img {
    width: 80%;
    height: auto;
		padding: 0 10%;
		float: none !important;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea h2 span.title {
		border: none;
    background: none;
		color: #4a330b;
    padding: 0px;
		font-size: 22px;
		font-weight: bold;
		text-align: left;
    border-radius: 0px;
		float: none;
		display: block;
    overflow: visible;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea table, #bodyArea #contentsWrap #contentsLeft table {
    width: 100% !important;
    margin-bottom: 0px;
	}
	#bodyArea #contentsWrap #contentsLeft table th, #bodyArea #contentsWrap #contentsLeft table td, #bodyArea #contentsWrap #contentsLeft table td span {
    width: 100% !important;
		display: inline-block;
		box-sizing: border-box;
	}
	#bodyArea #contentsWrap #contentsLeft table.table {
    margin-bottom: 10px;
	}
	#bodyArea #contentsWrap #contentsLeft table.table th, #bodyArea #contentsWrap #contentsLeft table.table td, #bodyArea #contentsWrap #contentsLeft table.table td span {
    width: auto !important;
		display: table-cell;
	}
	#bodyArea #contentsWrap #contentsLeft table th {
		margin-bottom: 0px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	#bodyArea #contentsWrap #contentsLeft table td {
		margin-bottom: 0px !important;
		padding: 20px 10px !important;
	}
	#bodyArea #contentsWrap #contentsLeft table td span {
		margin-top: 5px;
		padding-right: 5px;
	}
	#bodyArea #contentsWrap #contentsLeft table td input[type="radio"], #bodyArea #contentsWrap #contentsLeft table td input[type="radio"] + span {
		margin-top: 0px;
		display: inline;
	}
	#bodyArea #contentsWrap #contentsLeft table input, #bodyArea #contentsWrap #contentsLeft table textarea {
		padding: 10px;
		box-sizing: border-box;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea > * {
    width: 100% !important;
		float: none !important;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea h2 {
		margin: 0 0 20px 0;
		padding: 0;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea h2 img {
		width: 100%;
    height: auto;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea #mapArea {
		margin: 0 0 20px 0;
	}
	#bodyArea #contentsWrap #contentsLeft #detailArea #mapArea iframe {
		width: 100%;
	}
	#bodyArea #contentsWrap #contentsLeft #newsList {
		padding: 0px;
	}
	#bodyArea #contentsWrap #contentsLeft div.newsphotoRight {
    width: 100%;
    margin: 0 0 20px 0;
		padding: 20px;
		box-sizing: border-box;
		text-align: center;
	}
	#bodyArea #contentsWrap #contentsLeft div.newsphotoRight img {
    width: 100%;
		height: auto;
	}
	#bodyArea #contentsWrap #contentsLeft div.newsphotoRight img:nth-of-type(n+2) {
		margin-top: 10px;
	}
	#bodyArea #contentsWrap #contentsLeft div.newsphotoRight p {
		text-align: left;
	}
	#bodyArea ul.pageNav01, #bodyArea ul.pageNav01 * {
		box-sizing: border-box;
	}
	#bodyArea ul.pageNav01 {
		clear: both;
		padding: 0px;
		padding-top: 20px;
		text-align: left;
	}
	#bodyArea ul.pageNav01::after {
	}
	#bodyArea ul.pageNav01 li {
		width: 14%;
		margin: 10px 3% 0 3% !important;
		float: left;
		display: block;
	}
	#bodyArea ul.pageNav01 li span,
	#bodyArea ul.pageNav01 li a {
		width: 100%;
		line-height: 30px;
		padding: 0px 5px;
		text-align: center;
	}
	
	#bodyArea #contentsWrap #contentsLeft ul.pdfList {
    margin-left: 0px;
		padding-left: 10px;
		box-sizing: border-box;
	}
	#bodyArea #contentsWrap #contentsLeft ul.pdfList li {
		width: 100%;
		box-sizing: border-box;
	}
	#bodyArea #contentsWrap #contentsLeft table input {
		border: #888888 1px solid;
    max-width: 100%;
		border-radius: 3px;
	}
	#bodyArea #contentsWrap #contentsLeft table textarea {
		border: #888888 1px solid;
    width: 100%;
		border-radius: 3px;
	}
	#bodyArea #contentsWrap #contentsLeft table td input:nth-child(n+2) {
		margin-top: 10px;
	}
	input[type="submit"],
	input[type="button"] {
		border-radius: 0;
		-webkit-box-sizing: content-box;
		-webkit-appearance: button;
		appearance: button;
		border: none;
		box-sizing: border-box;
		cursor: pointer;
	}
	input[type="submit"]::-webkit-search-decoration,
	input[type="button"]::-webkit-search-decoration {
		display: none;
	}
	input[type="submit"]::focus,
	input[type="button"]::focus {
		outline-offset: -2px;
	}
	.btnSubmit {
		padding-top: 10px;
		padding-bottom: 30px;
    border-bottom: #cbc29a 1px solid;
	}
	.btnSubmit input {
		background: #aa0000;
		color: #ffffff;
		font-size: 18px;
		border-radius: 5px;
	}
	#bodyArea #contentsWrap #contentsLeft table#outLineTable th {
		border-bottom: none;
		padding-top: 20px;
	}
	#bodyArea #contentsWrap #contentsLeft table#outLineTable td {
		padding-top: 0px !important;
	}
	#bodyArea #contentsWrap #contentsLeft dl#houtoAccess * {
		max-width: 100%;
	}
	#bodyArea #contentsWrap #contentsLeft dl#houtoAccess dt {
		font-size: 15px;
		line-height: 30px;
	}
	#bodyArea #contentsWrap #contentsLeft table#recruitList th {
    margin-bottom: 0px;
		padding: 0px 10px;
    border-bottom: none;
	}
	#bodyArea #contentsWrap #contentsLeft table#recruitList td {
		margin-bottom: 20px !important;
		padding-top: 10px !important;
	}
	#bodyArea #contentsWrap #contentsLeft .recruitCatch {
    font-size: 18px;
		text-align: center;
	}
	#bodyArea #contentsWrap #contentsLeft .recruitContact {
		padding: 15px;
    font-size: 18px;
		text-align: center;
	}
	#bodyArea #contentsWrap #contentsLeft .recruitContact a {
		padding-top: 5px;
		font-weight: bold;
		display: inline-block;
	}
	.align-right {
		font-size: 14px;
	}
	.img {
		width: 100%;
		height: auto;
	}
	.point {
		font-size: 120%;
	}

	/*gmap
	-------------------------------------------------------*/
	.ggmap {
		margin-top: 30px;
		padding-bottom: 76.25%;
		padding-top: 30px;
		height: 0;
		position: relative;
		overflow: hidden;
	} 
	.ggmap iframe,
	.ggmap object,
	.ggmap embed {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/*online
	-------------------------------------------------------*/
	#flow > li > .note, #flow > li .note.wide {
		width: 100%;
	}
	#flow > li img {
		width: 100%;
		height: auto;
	}
	#flow > li h3 {
		font-size: 18px;
	}
	#flow > li > .note p {
		margin-left: 0px;
	}
	#flow > li > .img {
		width: 100%;
		margin: 20px auto 0 auto;
	}
	#flow > li > .img, #flow > li .column3 img {
		width: 200px;
	}
	#flow > li .column3 {
		width: 100%;
		flex-direction: column;
	}
	#flow > li .column3 > * {
		width: 100%;
	}
	#flow > li .column3 > *:not(:nth-of-type(3n+1)) {
    margin-left: 0%;
	}

}