@charset "utf-8";

@media screen and (max-width : 767px){
	
	.pc {
		display: none;
	}

	header {
		width: 100%;
		height: 60px;
		background: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 1000;
	}
	
	header h1 {
		width: 173px;
		position: absolute;
		top: 7px;
		left: 13px;
	}
	
	header h1 img {
		width: 173px;
		height: auto;
	}
	
	header > div:not(#hamburger) {
		display: none;
	}
	
	header #hamburger {
		width: 35px;
		height: 35px;
		background: #e1d0b3;
		border-radius: 4px;
		position: absolute;
		top: 12.5px;
		right: 15px;
	}
	
	header #hamburger.white {
		background: #fff;
	}
	
	header #hamburger ul li {
		width: 26px;
		height: 2px;
		background: #fff;
		position: absolute;
		right: 4.5px;
		transition: all 0.5s ease-out;
	}
	
	header #hamburger ul li.line01 {
		top: 9.5px;
	}
	
	header #hamburger ul li.line02 {
		top: 16.5px;
	}
	
	header #hamburger ul li.line03 {
		top: 23.5px;
	}
	
	header #hamburger ul li.lineclick01 {
		top: 16.5px;
		transform: rotate(405deg);
		background: #e1d0b3;
	}

	header #hamburger ul li.lineclick02 {
		opacity: 0;
	}

	header #hamburger ul li.lineclick03 {
		top: 16.5px;
		transform: rotate(-405deg);
		background: #e1d0b3;
	}
	
	#gNav {
		width: 100%;
		height: calc(100% - 60px);
		background: rgba(102,102,102,0.8);
		position: fixed;
		top: 60px;
		left: 0px;
		z-index: 1000;
		overflow-y: auto;
		transform: translateX(100vw);
	}
	
	#gNav.open {
		transform: translateX(0px);
		transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	
	#gNav .onNav {
		width: 100%;
		padding: 0px 0px 0px 100px;
		box-sizing: border-box;
	}
	
	#gNav div:not(.onNav) {
		display: none;
	}
	
	#gNav .onNav h1 {
		display: none;
	}
	
	#gNav .onNav ul.mainNav {
		border-top: #e1d0b3 1px solid;
	}
	
	#gNav .onNav ul.mainNav li {
		min-height: 60px;
		border-bottom: #e1d0b3 1px solid;
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
		line-height: 1.4;
	}
	
	#gNav .onNav ul.mainNav li a {
		display: block;
		min-height: 60px;
		padding: 8px 0px 0px 0px;
		box-sizing: border-box;
		background: #fff;
		color: #34312b;
	}
	
	#gNav .onNav ul.mainNav li a span {
		display: block;
		font-size: 1.2rem;
		font-weight: normal;
		color: #462e09;
	}
	
	#gNav .onNav p {
		border-bottom: #fff 1px solid;
		font-size: 1.8rem;
		line-height: 50px;
	}
	
	#gNav .onNav p a {
		display: block;
		padding: 5px 7px;
		background: #f9ad49 url("../img/header_member.svg") no-repeat 13px 50% / 20px 15px;
		color: #7d6542;
	}
	
	#gNav .onNav p a:hover {
		color: #7d6542;
		opacity: 0.6;
	}
	
	#gNav .onNav p a span {
		display: block;
		padding: 0px 0px 0px 33px;
		border: 1px #fff solid;
	}
	
	#gNav .onNav ul.subNav li {
		font-size: 1.8rem;
		line-height: 60px;
	}
	
	#gNav .onNav ul.subNav li:not(:last-of-type) {
		border-bottom: #fff 1px solid;
	}
	
	#gNav .onNav ul.subNav li a {
		display: block;
		padding: 0px 0px 0px 40px;
		color: #7d6542;
	}
	
	#gNav .onNav ul.subNav li:nth-of-type(1) a {
		background: #e5cfbc url("../img/header_contact.svg") no-repeat 13px 50% / 20px 18px;
	}
	
	#gNav .onNav ul.subNav li:nth-of-type(2) a {
		background: #e5cfbc url("../img/header_sitemap.svg") no-repeat 13px 50% / 20px 18px;
	}
	
	#gNav .onNav ul.subNav li:nth-of-type(3) a {
		background: #e5cfbc url("../img/header_en.svg") no-repeat 13px 50% / 20px 20px;
	}
	
	#topicPath {
		margin: 60px 0px 0px 0px;
		background: #ebf996;
	}
	
	#topicPath ul {
		padding: 12px 18px;
	}
	
	#topicPath ul li {
		display: inline;
		font-size: 1.6rem;
		line-height: 1.4;
		color: #333;
	}
	
	#topicPath ul li:not(:last-of-type)::after {
		content: " >";
		margin: 0px 7px 0px 5px;
		font-size: 1.6rem;
	}
	
	#topicPath ul li a {
		color: #333;
	}
	
	#topicPath ul li a:hover {
		color: #999;
	}
	
	.chikara {
		margin: 40px 0px 0px 0px;
	}
	
	.chikara.under {
		margin: 75px 0px 60px 0px;
	}
	
	.chikara > a {
		display: block;
		background: #98cae0;
	}
	
	.chikara > a:hover {
		opacity: 0.7;
	}
	
	.chikara > a figure img {
		width: 100%;
		height: auto;
	}
	
	.chikara > a > div {
		width: 297px;
		margin: 30px auto 0px auto;
		padding: 0px 0px 30px 0px;
	}
	
	.chikara > a > div h1 {
		margin: 50px 0px 0px 0px;
		background: none;
		font-size: 2.1rem;
		color: #000;
		text-align: left;
	}

	.chikara > a > div > p {
		margin: 10px 0px 0px 0px;
		padding: 5px 0px;
		background: #5e410d;
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
		color: #fff;
	}
	
	.topLink {
		margin: 40px 0px 0px 0px;
		background: #fcf5e8;
	}
	
	.topLink.under {
		margin: 75px 0px 60px 0px;
	}
	
	.topLink.side {
		margin: 40px 0px 60px 0px;
	}
	
	.topLink ul li {
		padding: 7.5px;
		line-height: 1.4;
	}
	
	.topLink ul li.num01,
	.topLink ul li.num02,
	.topLink ul li.num03,
	.topLink ul li.num04,
	.topLink ul li.num10 {
		padding: 7.5px;
	}
	
	.topLink ul li.num05,
	.topLink ul li.num06,
	.topLink ul li.num07,
	.topLink ul li.num08 {
		padding: 15px;
	}
	
	.topLink ul li:not(:last-of-type) {
		border-bottom: #decdb0 1px solid;
	}
	
	.topLink ul li a {
		margin: 0px auto;
	}
	
	.topLink ul li a:hover {
		opacity: 0.7;
	}
	
	.topLink ul li.num01 a,
	.topLink ul li.num02 a,
	.topLink ul li.num03 a,
	.topLink ul li.num04 a,
	.topLink ul li.num10 a {
		display: flex;
		align-content: center;
		align-items: center;
		max-width: 300px;
	}
	
	.topLink ul li.num05 a,
	.topLink ul li.num06 a,
	.topLink ul li.num07 a,
	.topLink ul li.num08 a {
		display: block;
		max-width: 240px;
		position: relative;
	}
	
	.topLink ul li.num01 a figure,
	.topLink ul li.num02 a figure,
	.topLink ul li.num03 a figure,
	.topLink ul li.num04 a figure,
	.topLink ul li.num10 a figure {
		width: 88px;
	}
	
	.topLink ul li a figure img {
		width: 100%;
		height: auto;
	}
	
	.topLink ul li.num01 a div,
	.topLink ul li.num02 a div,
	.topLink ul li.num03 a div,
	.topLink ul li.num04 a div,
	.topLink ul li.num10 a div {
		margin: 0px 0px 0px 17px;
	}
	
	.topLink ul li.num01 a div p,
	.topLink ul li.num10 a div p {
		font-size: 1.4rem;
		color: #000;
	}
	
	.topLink ul li.num02 a div p,
	.topLink ul li.num03 a div p,
	.topLink ul li.num04 a div p {
		font-size: 1.4rem;
		color: #755e3c;
	}
	
	.topLink ul li.num01 a div h2 {
		font-size: 1.8rem;
		color: #e40012;
	}
	
	.topLink ul li.num02 a div h2,
	.topLink ul li.num03 a div h2,
	.topLink ul li.num04 a div h2 {
		font-size: 1.8rem;
		font-weight: 500;
		color: #000;
	}
	
	.topLink ul li.num06 a div {
		position: absolute;
		top: 15px;
		left: 20px;
	}
	
	.topLink ul li.num06 a div p {
		font-size: 1.4rem;
		font-weight: bold;
		color: #118441;
	}
	
	.topLink ul li.num06 a div h2 {
		font-size: 1.8rem;
		font-weight: 500;
		color: #000;
	}
	
	.topLink ul li.num07 a div {
		width: 100%;
		position: absolute;
		top: 80px;
		left: 0px;
		text-align: center;
	}
	
	.topLink ul li.num07 a div p {
		font-size: 1.4rem;
		color: #755e3c;
	}
	
	.topLink ul li.num07 a div h2 {
		font-size: 1.6rem;
		font-weight: 500;
		color: #000;
	}
	
	.topLink ul li.num08 a div {
		position: absolute;
		top: 20px;
		left: 20px;
	}
	
	.topLink ul li.num08 a div p {
		font-size: 1.4rem;
		color: #755e3c;
	}
	
	.topLink ul li.num08 a div h2 {
		font-size: 1.8rem;
		font-weight: 500;
		color: #000;
	}
	
	.topLink.side ul li.num10 a div h2 {
		font-size: 1.8rem;
		font-weight: bold;
		color: #000;
	}
	
	footer {
		background: linear-gradient(to right, #d6e1f1 18%, #d6e7e3 44%, #d8e9d9 64%, #dee9ca 86%);
	}
	
	footer nav {
		padding: 0px 0px 30px 0px;
	}
	
	footer nav dl:not(:first-of-type) {
		margin: 30px 0px 0px 0px;
		border-top: #fff 1px solid;
	}
	
	footer nav dl dt {
		padding: 20px 15px;
		border-bottom: #fff 1px solid;
		font-size: 1.8rem;
		font-weight: bold;
	}
	
	footer nav dl dt span {
		display: inline-block;
		margin: 0px 0px 0px 20px;
		font-size: 1.2rem;
		color: #755e3c;
	}
	
	footer nav dl dd ul {
		padding: 20px 0px 0px 0px;
	}
	
	footer nav dl dd ul li {
		margin: 0px 15px;
		padding: 10px 0px;
		font-size: 1.4rem;
		line-height: 1.4;
	}
	
	footer > div {
		background: #c3e173;
	}
	
	footer > div > div {
		margin: 0px auto;
		padding: 40px 15px;
		position: relative;
	}
	
	footer > div > div ul li {
		font-size: 1.4rem;
	}
	
	footer > div > div ul li:not(:first-of-type) {
		margin: 10px 0px 0px 0px;
	}
	
	footer > div > div p.copy {
		margin: 20px 0px 0px 0px;
		font-size: 1.4rem;
	}
	
	footer > div > div p.pageTop {
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
		position: fixed;
		bottom: 20px;
		right: 12.5px;
		z-index: 1000;
	}
	
	footer > div > div p.pageTop a {
		display: block;
		width: 50px;
		height: 50px;
		background: url("../img/totop.svg") no-repeat 0px 0px;
		color: #fff;
	}
	
	footer > div > div p.pageTop a:hover {
		opacity: 0.7;
	}
}