@charset "utf-8";
/* CSS Document */

@media screen and (max-width:736px) {
	html, body {
		min-width: 0;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust : 100%;
	}
	
	img {
		max-width: 100% !important;
		height: auto;
	}
	
	.sp_only {
		display: inherit;
	}

	.inner {
		box-sizing: border-box;
	    max-width: 100%;
	    margin: 0 auto;
	}
	
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(255,255,255,0.8);
		padding: 2em;
		box-sizing: border-box;
		align-items: center;
		z-index: 10;
	}
	
	header h1 {width: 50%;}
	
	header nav {display: none;}
	
	
	/*-----------------------------
	
	top
	
	------------------------------*/
	#main-visual {
		display: none;
	}
	
	#sp-main-visual {
		height: 530px;
		padding-top: 8em;
		margin-bottom: 5em;
	}	

	#sp-main-visual	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	h2.ttl {
	    font-size: 4rem;
    }	
	
	.top-gallery ul li {width: 50%;}
	.top-gallery ul li a {
	    display: block;
	    padding: 2em;
	}
		
	.top-gallery ul li img {
	    width: 100%;
	    height: 93px;
	}
	
	.top-gallery ul {
		border-top: 1px solid #a7a7a7;
		border-left: 1px solid #a7a7a7;
	}
	
	.top-gallery ul li:nth-of-type(3n) a {border-right: 1px solid #a7a7a7;}
	.top-gallery ul li:nth-last-child(-n+3) a {border-bottom: 1px solid #a7a7a7;}	
	
	.top-gallery ul li h3 {
		font-size: 1.3rem;
		line-height: 2;
		padding-top: 1em;
		font-weight: bold;
	}	
	
	.btn {
	    width: 80%;
	    margin: 0 auto;
	    text-align: center;
	}
	
	.btn a {
	    font-size: 2rem;
	    padding: .6em 0;
	}
	
	.top-news {margin-bottom: 0;}
	
	.top-news ul li {width: 100%;}	
		
	.top-about:before {
	    content: "";
	    width: 100%;
	    height: 140px;
	    background: #fff;
	    position: absolute;
	    top: 0%;
	    left: 0;
	}
	
	.top-about h2 {text-align: center !important;}
	
	.top-about {
		background: url("../images/page/top/about-main.jpg") no-repeat top 20% right #f5f2ec;
		background-size: 100%;
		background-color: #f5f2ec;
		text-align: left;
		padding: 5em 2em;
		position: relative;
	}	
	
	.top-about-info {
		width: 100%;
		background-color: #fff;
		padding: 3em;
		margin-top: 20em;
		box-sizing: border-box;
	}
	
	.top-about-info p {
		font-size: 1.3rem;
		line-height: 2.4;
		margin-bottom: 3em;
	}	
	
	
	/*-----------------------------
	
	footer
	
	------------------------------*/
	
	ul.footer-bar {}
	
	ul.footer-bar  li {
		width: 100%;
	}
	
	footer {
		background: url("../images/common/footer-bg.png") no-repeat center;
		background-size: cover;
		padding: 15em 0 10em;
	}
	
	
	.f-gallery {
		box-sizing: border-box;
	    max-width: 90%;
	    margin: 0 auto;
		text-align: center;
		padding: 2em;
		box-sizing: border-box;
		background-color: #535d60;
		color: #fff;
		position: relative;
	}
	
	.f-img {
		position: absolute;
		top: -30%;
		left: 2%;
		width: 30%;
		
	} 
	
	.f-gallery h2 {
		font-size: 1.8rem;
		margin-bottom: 1em;
		letter-spacing: .1em;
	}
	
	.f-gallery ul li {
		width: 33.333%;
	}
	
	.f-gallery p a {
		display: block;
		background: #fff;
		color: #333;
		font-weight: bold;
		padding: 1em;
		line-height: 2;
		font-size: 1.3rem;
	}
	
	.f-gallery p a:hover {
		color: #fff !important;
		background-color: #a58a00;
	}
	
	ul.footer-nav {
	    max-width: 80%;
	    margin: 2em auto 0;
		justify-content: flex-end;
	}
	
	ul.footer-nav li {
		margin-left: 2em;
	}
	
	ul.footer-nav li a {
		font-weight: bold;
		color: #fff !important;
	}
	
	ul.footer-nav li a:hover {text-decoration: underline !important;}
	
	p.copyright {
		font-size: 1.2rem;
		text-align: center;
		padding: 2em 0;
		background-color: #f5f2ec;
	}

	/*-----------------------------
	
	page-visual
	
	------------------------------*/
	
	#page-visual {
		padding-top: 10em;
		align-items: center;
	}
	
	#page-visual h2 {
		width: 100%;
		text-align: center;
	}
	
	.page-img {width: 100%;}
	
	/*-----------------------------
	
	about
	
	------------------------------*/
	
	.about-main {margin-bottom: 3em;}
	
	.about-comment {
		background-color: #fff;
		padding: 4em;
		box-sizing: border-box;
		margin-bottom: 8em;
	}
	
	.about-comment p {
		font-size: 1.3rem;
		margin-bottom: 1em;
		line-height: 2.4;
	}
	
	.about-comment h3 {
		font-size: 1.8rem;
		font-weight: bold;
		text-align: right;
	}
	
	h3.ttl-access {
		font-family: "Impact";
	    text-align: center;
	    font-size: 3rem;
	    color: #606060;
	    letter-spacing: .1em;
	    margin-bottom: 1em;
	}
	
	p.txt-access {
		font-size: 1.6rem;
	}
	
	.access-map {
		width: 80%;
		margin: 0 auto 5em;
	}
	
	.access-map iframe {
		width: 100%;
		height: 300px;
		margin: 0 auto;
	}

	/*-----------------------------
	
	gallery
	
	------------------------------*/
	
	.page-contnets {
	    padding: 10em 0 4em;
	    background-color: #f5f2ec;
	}

	.gallery-btn {
	    width: 100px;
	    margin: 0 auto;
	    text-align: center;
	    font-size: 1.2rem;
	    padding: 0.4em 0;
	}

	.sibgle-gallery-img {
		width: 80%;
		margin: 0 auto 5em;
		text-align: center;
	}
	
	.single-nav {margin-bottom: 5em;}
	.page_left,
	.page_right {
		width: 100%;
		text-align: center;
	}
	
	.single-nav .page_center {
		width: 80%;
		margin: 3em auto;
	}
		
	.single-nav .page_center a {
		width: 100%;
		box-sizing: border-box;
	}
	
	h3.ttl01 {
		width: 90%;
		margin: 0 auto 1em;
	    font-size: 1.8rem;
	    line-height: 2;
	    padding-bottom: 1em;
	     border-bottom: 1px solid #2d2d2d;
	}	
	
	h3.ttl01 span {
    	border-bottom: none;
    	padding: 0;
	}
	
	ul.others-list {
	    padding: 0 2em;
	    margin-bottom: 2em;
	}
	
	ul.others-list li {
	    width: 48%;
	    margin-bottom: 3em;
	    text-align: center;
	}
	
	.others-img img {
	    width: 100%;
	    height: 122px;
	    object-fit: contain;
	    box-shadow: 5px 5px 3px rgb(0 0 0 / 40%);
	}
	
	.top-new {
		background: url("../images/page/top/new-bg.jpg") no-repeat;
		background-size: cover;
		padding: 5em 0;
	}
		
	ul.slide li {
	    width: 48%;
	}

	ul.slide li h3 {
	    font-size: 1.3rem;
	}
	
	/*-----------------------------
	
	news
	
	------------------------------*/
	
	.news-area dl dt {
		width: 40%;
		margin-bottom: .5em;
	}
	
	.news-area dl dd {
		width: 100%;
		text-align: left;
		line-height: 2;
	}

	.news-area dl dd h1 {
		font-size: 2rem;
		font-weight: bold;
		line-height: 2;
	}

	.news-single {
		width: 96%;
		margin: 0 auto 5em;
	}

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

	お問い合わせ

	--------------------------------------*/
	table.formTable th,
	table.formTable td {
		width: 100% !important;
		display: block;
	}
	
	table.formTable th {
		background-color: #f1f1f1;
	}
	
	.mwform-radio-field {
		width: 100%;
		display: block;
		margin: 5px 0 !important;
	}
	
	table.formTable td .cont_inputb {
		width: 43%;
		margin: .5em 0;
	}
	
	#submit input,
	#submit input.backbtn {width: 80%;}



}