@charset "utf-8";
/* CSS Document */
@media all {
	h1,
	h2,
	h3,
	h4,
	h5,
	th{
		margin: 0;
		font-weight: normal;
	}
	body {
		margin: 0;
		font-family: "Sawarabi Mincho", serif;
		font-weight: 400;
		font-style: normal;
	}
	.h2sub {
		font-family: "Sawarabi Gothic", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
	p,
	ul,
	ol,
	li,
	dl,
	dt,
	dd{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	iframe{
		border: 0;
	}
	a {
		text-decoration: none;
		transition: .3s;
		color: #000;
	}
	a:hover,
	button:hover {
		opacity: .7;
	}
	a.prevlink,
	button.nextlink{
		display: block;
		width: 200px;
		margin: 0 auto;
		font-size: 1.2rem;
		line-height: 1;
		padding: 1em;
		text-align: center;
		background: #fff;
		border: solid 1px #000;
		position: relative;
	}
	a.prevlink:hover,
	button.nextlink:hover{
		background: #eee;
	}
	a.prevlink::before,
	button.nextlink::before{
		position: absolute;
		content: "";
		top: 50%;
		width: 32px;
		height: 4px;
		transform: translateY(-50%);
		background: url("/common/images/linkarrow.png") no-repeat;
		background-size: contain;
		transition: .3s;
	}
	a.prevlink::before{
		left: -16px;
	}
	button.nextlink::before{
		right: -16px;
		transform: translateY(-50%) scale(-1, 1);
	}
	a.prevlink:hover::before{
		left: -26px;
	}
	button.nextlink:hover::before{
		right: -26px;
	}
	img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	*{
		box-sizing: border-box;
	}
	
	main{
		padding-top: 70px;
	}
	header{
		position: fixed;
		width: 100%;
		height: 70px;
		background: #fff;
		z-index: 1;
	}
	header h1{
		display: block;
		position: absolute;
		top: 50%;
		left: 50px;
		transform: translateY(-50%);
		width: 160px;
	}
	header h1 a{
		display: block;
	}
	header #mainmenu{
		position: absolute;
		top: 50%;
		right: 40px;
		transform: translateY(-50%);
	}
	header #mainmenu nav ul{
		width: fit-content;
		display: flex;
	}
	header #mainmenu nav ul li a{
		display: block;
		font-size: 1rem;
		padding: 0 0 0 2em;
	}

	#pathnav{
		padding: 10px 40px;
	}
	#pathnav li{
		display: inline-block;
	}
	#pathnav li a{
		display: block;
		font-size: 0.9rem;
		line-height: 1;
		margin-right: 1.5em;
		position: relative;
		color: #555;
		text-decoration: underline;
	}
	#pathnav li a::after{
		position: absolute;
		content: "＞";
		top: 0;
		right: -1.5em;
	}
	
	#pagetabs{
		padding: 40px 40px;
	}
	#pagetabs ul.list{
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		display: flex;
	}
	#pagetabs ul.list li{
		width: calc(100% / 3);
	}
	#pagetabs ul.list li span,
	#pagetabs ul.list li a{
		display: block;
		font-size: 1.2rem;
		padding: 1em;
		text-align: center;
	}
	#pagetabs ul.list li span{
		color: #aaa;
		border: solid #aaa;
		border-width: 1px 0 1px 0;
	}
	#pagetabs ul.list li a{
		border: solid #000 1px;
	}
	#pagetabs ul.list li a:hover{
		background: #eee;
	}
	
	footer{
		padding: 40px 40px 20px;
		position: relative;
	}
	footer section{
		display: flex;
	}
	footer section .leftbox{
		width: 40%;
	}
	footer section .rightbox{
		width: 60%;
	}
	footer section .leftbox a.logo{
		display: block;
		width: 160px;
		margin-bottom: 20px;
	}
	footer section .leftbox .tel{
		font-size: 1rem;
	}
	footer section .rightbox ul{
		width: fit-content;
		display: flex;
		margin: 0 0 0 auto;
	}
	footer section .rightbox ul li a{
		display: block;
		font-size: 1rem;
		padding: 0 0 0 2em;
	}
	#copyright{
		position: absolute;
		font-size: 0.8rem;
		bottom: 20px;
		right: 40px;
		color: #777;
	}
	
}

@media screen and (max-width: 768px){
	html{
		font-size: 13px;
	}
	
/*ドロワーメニュー*/
	header h1{
		left: 20px;
		z-index: 1;
	}
	header #mainmenu{
		top: 0;
		right: 0;
		transform: translateY(0);
		width: 100%;
		height: 70px;
	}
	header #mainmenu nav{
		display: none;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background: rgba(255,255,255,0.9);
		left: 0;
		overflow-y: scroll;
		text-align: center;
	}
	header #mainmenu nav ul{
		display: block;
		margin: 70px auto 20px;
		width: 100%;
	}
	header #mainmenu nav ul li{
		margin: 0 auto;
		text-align: center;
		border-bottom: 1px solid #565656;
	}
	header #mainmenu nav ul li:first-child{
		border-top: 1px solid #565656;
	}
	header #mainmenu nav ul li a{
		display: block;
		font-size: 1.4rem;
		padding: 20px 10px; box-sizing: border-box;
	}
	#mainmenu nav .box{
		padding: 20px 0 40px;
		border-bottom: solid 1px #565656;
	}
	#mainmenu nav .box .company-name{
		font-size: 2rem;
		margin-bottom: 0.5em;
	}
	#mainmenu nav .box .address{
		font-size: 1.2rem;
		margin-bottom: 0.5em;
	}
	#mainmenu nav .box .tel{
		font-size: 1.5rem;
		line-height: 2;
	}
/*ドロワーメニュー開閉ボタン*/
	#nav_toggle{
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 25px;
		right: 20px;
		z-index: 100;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: #000;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:8px;
	}
	#nav_toggle span:nth-child(3){
		top:16px;
	}
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
			top: 12px;
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 12px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}

	#pathnav{
		padding: 10px 20px;
	}
	
	#pagetabs{
		padding: 20px 20px;
	}
	#pagetabs ul.list li span,
	#pagetabs ul.list li a{
		font-size: 0.9rem;
		padding: 1em 0.5em;
	}
	
	footer{
		padding: 20px 20px 60px;
		position: relative;
	}
	footer section{
		flex-direction: column;
	}
	footer section .leftbox,
	footer section .rightbox{
		width: 100%;
	}
	footer section .leftbox a.logo{
		margin: 0 auto 20px;
	}
	footer section .leftbox .tel{
		text-align: center;
		margin-bottom: 20px;
	}
	footer section .rightbox ul{
		flex-wrap: wrap;
		margin: 0 auto;
		border-top: solid 1px #777;
	}
	footer section .rightbox ul li{
		width: 100%;
		border-bottom: solid 1px #777;
	}
	footer section .rightbox ul li a{
		padding: 1em 0;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	#copyright{
		bottom: 10px;
		right: 0;
		width: 100%;
		text-align: center;
	}
	
	.pd{display: none;}
	.pc{display: none;}
	.pdpc{display: none;}
	
}

@media screen and (min-width: 769px) and (max-width: 1024px){
	html{
		font-size: 13px;
	}
	
	#mainmenu nav .box{
		display: none;
	}
	
	.sp{display: none;}
	.pc{display: none;}

}

@media screen and (min-width: 1025px), print{
	html{
		font-size: 13px;
	}

	#mainmenu nav .box{
		display: none;
	}
	
	.sp{display: none;}
	.pd{display: none;}
	.sppd{display: none;}

}