@charset "UTF-8";
/*----------------------------------------------
 formatting styles
----------------------------------------------*/
html {
	font-size: 62.5%;
}
* {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: Verdana,"Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 1.3em;
	line-height: 1.6;
	background-color: #FFF7FA;
	color: #333333;
}
a {
	color: #005DB0;
}
a:visited {
	color: #0076BD;
}
a:hover {
	color: #E33250;
}
img {
	border-style: none;
	vertical-align: middle;
}
@media screen and (min-width: 768px) {
	a:hover {
		color: #E33250;
	}
}
@media screen and (max-width: 767px) {
	body {
		font-size: 1.4em;
		-webkit-text-size-adjust: 100%;
	}
	.fixed {
		position: fixed;
		width: 100%;
		height: 100%;
	}
	a:active {
		color: #E33250;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}
/*----------------------------------------------
 clearfix
----------------------------------------------*/
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

/* ----------------------------------------------
container
----------------------------------------------*/
#container {
	width: 100%;
}

/* ----------------------------------------------
header
----------------------------------------------*/
#header {
	width: 100%;
	background-image: url(../img/header-back.gif);
	background-position: center top;
	background-repeat: repeat-x;
	position: relative;
}
#header2 {
	width: 960px;
	height: 151px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-image: url("../img/header-back2.svg");
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 1;
}
#logo {
	height: 63px;
	display: flex;
	align-items: flex-end;
}
#logo a {
	display: inline-block;
}
#top {
	width: 240px;
	position: absolute;
	top: -2px;
	left: 310px;
}
#header2 [type="checkbox"],
#header2 label {
	display: none;
}
#header2 ul {
	width: 960px;
	height: 84px;
	padding-top: 4px;
	display: block;
	list-style-type: none;
}
#header2 li {
  width: 100px;
	height: 56px;
	float: left;
	display: block;
}
li#headerMenu00 {
	display: none;
}
li#headerMenu01 {
  width: 80px;
	padding-top: 17px;
}
li#headerMenu02 {
	padding-top: 17px;
	margin-left: 20px;
}
li#headerMenu03 {
	padding-top: 10px;
	margin-left: 20px;
}
li#headerMenu04 {
  padding-top: 10px;
	margin-left: 225px;
}
li#headerMenu05 {
	padding-top: 13px;
	margin-left: 15px;
}
li#headerMenu06 {
  width: 80px;
  padding-top: 13px;
	margin-left: 13px;
}
li#headerMenu07 {
  width: 90px;
	padding-top: 17px;
  margin-left: 15px;
}
#header2 li a {
  width: 100%;
	height: 56px;
	display: block;
	background-position: 0px 60px;
	background-repeat: no-repeat;
}
#header2 li a .text {
	display: none;
}
li#headerMenu01 a {
	background-image: url(../img/btn_menu01_over.gif);
}
li#headerMenu02 a {
	background-image: url(../img/btn_menu02_over.gif);
}
li#headerMenu03 a {
	background-image: url(../img/btn_menu03_over.gif);
}
li#headerMenu04 a {
	background-image: url(../img/btn_menu04_over.gif);
}
li#headerMenu05 a {
	background-image: url(../img/btn_menu05_over.gif);
}
li#headerMenu06 a {
	background-image: url(../img/btn_menu06_over.png);
}
li#headerMenu07 a {
	background-image: url(../img/btn_menu07_over.png);
}
#header h1 {
	width: 960px;
	position: relative;
	z-index: 0;
	margin-top: -18px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
@media screen and (min-width: 768px) {
	#header2 li a:hover {
		background-position: 0px 0px;
	}
	#header2 li a:hover img {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	#header {
		background-image: none;
		padding-bottom: 30px;
	}
	#header2 {
		width: auto;
		height: 76px;
		padding-right: 70px;
		padding-right: calc((100% - 132px) / 2);
		background: url(../img/header-bg-sp.png) center bottom no-repeat;
		background-size: 100% auto;
		display: flex;
	}
	#header2:after {
		content: '';
		z-index: 0;
		position: absolute;
		right: 50%;
		top: 100%;
		width: 100%;
	}
	#header2:before {
		content: '';
		position: fixed;
		z-index: 10;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		transform: scale(0);
		transform-origin: right top;
		transition-duration: .3s;
	}
	.fixed #header2:before {
		transform: scale(1);
	}
	#logo {
		padding: 0 8px;
		height: 100%;
		flex: 0 1 auto;
		align-items: center;
	}
	#top {
		position: static;
		flex: 0 0 auto;
		width: auto;
		margin: 0 auto;
	}
	#header2 [type="checkbox"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		margin: 0;
		padding: 0;
		border: none;
		background-color: transparent;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		opacity: 0;
		display: block;
	}
	#header2 label {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: fixed;
		z-index: 20;
		right: 0;
		top: 0;
		margin: 8px 8px 0 auto;
		width: 50px;
		height: 50px;
		font-size: 10px;
		text-align: center;
		background-color: #fff;
		border: 1px solid #e1d2b3;
		border-radius: 5px;
		color: #8c6239;
		font-weight: bold;
		cursor: pointer;
	}
	#header2 label:before {
		content: '';
		position: absolute;
		top: 8px;
		left: 9px;
		width: 32px;
		height: 2px;
		background-color: #e33250;
		transition-duration: .3s;
	}
	#header2 label:after {
		content: '';
		position: absolute;
		top: 26px;
		left: 9px;
		width: 32px;
		height: 2px;
		background-color: #e33250;
		transition-duration: .3s;
	}
	#header2 label span {
		display: block;
		padding-bottom: 0.2em;
	}
	#header2 label span:before {
		content: '';
		position: absolute;
		top: 17px;
		left: 9px;
		width: 32px;
		height: 2px;
		background-color: #e33250;
		transition-duration: .3s;
	}
	#header2 :checked + label:before {
		top: 17px;
		transform: rotate(-45deg)
	}
	#header2 :checked + label:after {
		top: 17px;
		transform: rotate(45deg)
	}
	#header2 :checked + label span:before {
		background-color: transparent;
	}
	#header2 ul {
		width: 100%;
		height: calc(100% - 60px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		position: fixed;
		z-index: 20;
		right: 0;
		top: 60px;
		padding: 0 30px 30px;
		transform: scale(0);
		transform-origin: right top;
		transition-duration: .3s;
		box-sizing: border-box;
	}
	#header2 :checked ~ ul {
		transform: scale(1);
	}
	#header2 li {
		width: auto;
		height: auto;
		display: list-item;
		float: none;
		padding: 0;
		font-size: 1.5rem;
    margin-left: 0;
	}
	#header2 li + li {
		border-top: 1px solid #e1d2b3;
	}
	#header2 li a {
		width: auto;
		height: auto;
		background: url(../img/arrow.png) right 8px center no-repeat;
		background-size: 25px;
		padding: 22px 34px 22px 20px;
		color: #603813;
		text-decoration: none;
		transition-duration: 0.3s;
	}
	#header2 li a:active {
		opacity: 0.7;
	}
	#header2 li a .text {
		display: block;
	}
	#header2 li a img {
		display: none;
	}
	#header h1 {
		width: auto;
		height: 167px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: url(../img/title-bg.jpg) center bottom no-repeat;
		background-size: cover;
		position: relative;
		padding: 27px 4.27% 0;
	}
	#header h1:after {
		content: '';
		position: absolute;
		right: 0;
		bottom: -33px;
		background: url(../img/title-chair.png) right bottom no-repeat;
		background-size: 100% auto;
		width: 46.4%;
		max-width: 174px;
		padding-top: 54.34%;
	}
	#header h1 img {
		flex: 0 0 auto;
	}
}
/* ----------------------------------------------
wrapper
----------------------------------------------*/
#wrapper {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 50px;
}
.contactbox {
	--pink: #E3314E;
	--orange: #E97C00;
	width: 980px;
	margin: 80px auto 0;
	padding: 32px 10px;
	background-color: #fff;
	background-image: url(../img/line.svg), url(../img/line.svg);
	background-repeat: no-repeat;
	background-position: center top 5px, center bottom 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	font-weight: bold;
	box-sizing: border-box;
}
.contactbox .btn {
	flex: 0 0 auto;
	height: 100px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--pink) url(../img/arrow-next02.svg) no-repeat right 15px center;
	background-size: 1.5em auto;
	padding: 0 calc(30px + 1.5em) 0 calc(15px + 0.75em);
	color: #fff;
	font-size: 2.8rem;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
	text-decoration: none;
	transition-duration: 0.3s;
}
.contactbox .telbox {
	text-align: center;
	font-size: 3.2rem;
}
.contactbox .telbox p {
	width: fit-content;
	position: relative;
	padding: 0 1em;
	color: var(--orange);
	font-size: 1.8rem;
	line-height: 1.2;
}
.contactbox .telbox p::before {
	content: "";
	height: 1.9182em;
	width: 0.1778em;
	background-color: var(--orange);
	position: absolute;
	bottom: -2px;
	left: 0;
	rotate: -30deg;
}
.contactbox .telbox p::after {
	content: "";
	height: 1.9182em;
	width: 0.1778em;
	background-color: var(--orange);
	position: absolute;
	bottom: -2px;
	right: 0;
	rotate: 30deg;
}
.contactbox .telbox p span {
	display: block;
}
.contactbox .telbox a {
	display: inline-block;
	background: url(../img/icon-tel.png) no-repeat left center;
	background-size: auto 1em;
	padding-left: 1.4em;
	text-decoration: none;
	pointer-events: none;
	color: #555;
	font-weight: normal;
}
@media screen and (min-width: 768px) {
	.contactbox .btn:hover {
		opacity: 0.7;
	}
}
@media screen and (max-width: 767px) {
	#wrapper {
		width: auto;
	}
	.contactbox {
		display: block;
		margin-top: 48px;
		width: auto;
		padding: 28px 10px 15px;
		border-radius: 0;
	}
	.contactbox .btn {
		width: 100%;
		margin: 0 auto;
		padding: 0 calc(10px + 1.25em) 0 1.25em;
		height: 80px;
		background-size: 1.25em auto;
		background-position: right 10px center;
		font-size: 2.4rem;
		box-sizing: inherit;
	}
	.contactbox .telbox {
		margin-top: 25px;
	}
	.contactbox .telbox p {
		margin: 0 auto 5px;
		font-size: 1.8rem;
		line-height: 1.3;
	}
	.contactbox .telbox p span {
		display: block;
	}
	.contactbox .telbox a {
		pointer-events: auto;
	}
}

/* ----------------------------------------------
footoer
----------------------------------------------*/
#footer {
	width: 100%;
	background-color: #FCE1E1;
}
#footer2 {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 23px;
	padding-bottom: 45px;
}
#footerLeft {
	width: 545px;
	padding-top: 6px;
	float: left;
	padding-left: 9px;
}
#footerLeft a {
	color: #333333;
	text-decoration: none;
}
#footerLeft ul {
	list-style-type: none;
}
#footerLeft li,
#footerLinkLeft {
	display: block;
	padding-left: 11px;
	padding-bottom: 18px;
	background-image: url(../img/footer-linklist.gif);
	background-position: 0px 4px;
	background-repeat: no-repeat;
	line-height: 130%;
}
#footerLinkLeft {
	width: 110px;
	float: left;
}
#footerLinkCenter {
	width: 210px;
	float: left;
}
#footerLinkRight {
	width: 170px;
	float: left;
}
#footerRight {
	width: 375px;
	padding-top: 2px;
	padding-left: 22px;
	position: relative;
	float: right;
	border-left: 2px solid #FFFFFF;
}
#footerRight .address span {
	display: inline-block;
}
#pageTop {
	width: 51px;
	height: 51px;
	position: absolute;
	top: -9px;
	right: 6px;
}
#pageTop a {
	width: 51px;
	height: 51px;
	display: block;
	background-image: url(../img/btn_pagetop_over.gif);
	background-position: 0px 60px;
	background-repeat: no-repeat;
}
#companyName {
	font-size: 110%;
	padding-bottom: 3px;
}
#companyName a {
	color: #000000;
	text-decoration: underline;
}
#copyRight {
	font-size: 85%;
	padding-top: 43px;
	color: #666666;
	padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
	#footerLeft a:hover {
		color: #E33250;
		text-decoration: underline;
	}
	#pageTop a:hover {
		background-position: 0px 0px;
	}
	#pageTop a:hover img {
		display: none;
	}
	#companyName a:hover {
		color: #E33250;
		text-decoration: none;
	}
}
@media screen and (max-width: 767px) {
	#footer2 {
		width: auto;
	}
	#footerLeft {
		display: none;
	}
	#footerRight {
		float: none;
		width: auto;
		border-left: none;
		padding: 2px 14px 0;
		font-size: 1.3rem;
	}
	#pageTop a {
		position: fixed;
		right: 6px;
		bottom: 6px;
		width: 40px;
		height: 40px;
		background-image: none;
	}
	#pageTop a:active img {
		opacity: 0.7;
	}
	#companyName {
		font-size: 1.5rem;
	}
	#companyName a:active {
		color: #E33250;
		text-decoration: none;
	}
	#copyRight {
		padding-bottom: 5px;
		text-align: center;
		font-size: 1.1rem;
		line-height: 1.3;
	}
}