*{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #232323;
	box-sizing: border-box;
	word-break: break-all;
	font-size: 14px;
	line-height: 1.6em;
	letter-spacing: 0.1em;
	text-align: justify;
}

/*  noto sans

	light: 300;
	regular: 400;
	midium: 500;
	bold: 600;
					*/

.din{
	font-family: din-condensed, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
}

span, a, strong{
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
}

.sp, .menu-btn{ display: none; }
.wrap{ width: 900px; margin: 0 auto; }

.linkwrap{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.totop{
	display: table;
	position: fixed;
	width: 70px;
    bottom: 26px;
    right: 30px;
	z-index: 98;
}
.totop img{ width: 100%; }
.body-wrap{ overflow: hidden; }

header{ background: #232323; padding: 28px 0 20px; position: relative;}
header .inner{
	max-width: 1140px;
	min-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
header .logo{ display: table; width: 230px; }
header .logo img{width: 100%;}
header nav{ display: flex; align-items: flex-end; }
header nav ul{ display: flex; }
header nav ul li{
	color: #fff;
	font-weight: 500;
	padding: 0 .5em;
	position: relative;
	height: 46px;
	display: flex;
	align-items: flex-end;
}
header nav ul li:before{
	content: '';
	width: 13px;
	height: 12px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	transition: .3s;
}
header nav ul li:nth-of-type(1):before{ background-image: url(../images/common/icon-gnav01.png); }
header nav ul li:nth-of-type(2):before{ background-image: url(../images/common/icon-gnav02.png); }
header nav ul li:nth-of-type(3):before{ background-image: url(../images/common/icon-gnav03.png); }
header nav ul li:nth-of-type(4):before{ background-image: url(../images/common/icon-gnav04.png); }
header nav ul li:nth-of-type(5):before{ background-image: url(../images/common/icon-gnav07.png); }
header nav ul li:nth-of-type(6):before{ background-image: url(../images/common/icon-gnav05.png); }
header nav ul li:nth-of-type(7):before{ background-image: url(../images/common/icon-gnav06.png); }
header nav ul li:nth-of-type(1):hover:before{ background-image: url(../images/common/icon-gnav01-on.png); }
header nav ul li:nth-of-type(2):hover:before{ background-image: url(../images/common/icon-gnav02-on.png); }
header nav ul li:nth-of-type(3):hover:before{ background-image: url(../images/common/icon-gnav03-on.png); }
header nav ul li:nth-of-type(4):hover:before{ background-image: url(../images/common/icon-gnav04-on.png); }
header nav ul li:nth-of-type(5):hover:before{ background-image: url(../images/common/icon-gnav07-on.png); }
header nav ul li:nth-of-type(6):hover:before{ background-image: url(../images/common/icon-gnav05-on.png); }
header nav ul li:nth-of-type(7):hover:before{ background-image: url(../images/common/icon-gnav06-on.png); }
header nav ul li:not(:last-of-type):after{
	content: '';
	width: 1px;
	height: 1em;
	background: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
}
header nav ul li span{ padding: 0 .5em; position: relative; z-index: 0; }
header nav ul li span:before{
	content: '';
	width: 0%;
	height: 100%;
	background: #6c89a1;
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s;
	z-index: -1;
}
header nav ul li:nth-of-type(1) span:before,
header nav ul li:nth-of-type(4) span:before,
header nav ul li:nth-of-type(7) span:before{ background: #a8da31; }
header nav ul li:nth-of-type(3) span:before,
header nav ul li:nth-of-type(6) span:before{ background: #c17891; }
header nav ul li:hover span:before{ width: 100%; }
header nav .tel{
	font-size: 30px;
    width: 152px;
    height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #c8c8c8;
	color: #000;
	margin-left: 10px;
}

.fixed-menu{
	width: 100%;
	background: #232323;
	position: fixed;
	top: -60px;
	left: 0;
	z-index: 100;
	transition: .6s;
}

.mv .click{
	width: 90px;
    position: absolute;
    top: 60px;
    right: 21.5555px;
    z-index: 49;
    transition: .3s;
	color: #FFF;
	font-size: 20px;
}


.fixed-menu.active{ top: 0; }
.fixed-menu .inner{
	max-width: 1150px;
	height: 60px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fixed-menu .inner .logo{ width: 230px; display: table; }

.fixed-menu .inner .right{ display: flex; align-items:  center; }
.fixed-menu .inner .right ul{ display: flex; justify-content: flex-end; }
.fixed-menu .inner .right ul li{ color: #fff; font-size: 13px; font-weight: 500; padding: 0 1em; }
.fixed-menu .inner .right ul li:not(:last-of-type){ border-right: solid 1px; }
.fixed-menu .inner .right ul li a{ transition: .3s; }
.fixed-menu .inner .right ul li a:hover{ color: #6c89a1; }
.fixed-menu .inner .right .two-btn{ display: flex; }
.fixed-menu .inner .right .two-btn a{
	background: #c8c8c8;
	width: 110px;
	height: 30px;
	display: flex; 
	justify-content: center;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
}
.fixed-menu .inner .right .two-btn a.din{ font-size: 17px; margin-left: 7px; }

.arrow-btn{
	padding: 8px 25px;
	/*color: #fff;*/
	font-size: 14px;
	border-bottom: solid 1px;
	border-left: solid 1px;
	position: relative;
	display: table;
	font-weight: 600;
}
.arrow-btn.white{ color: #fff; }
.arrow-btn.din{ font-size: 16px; font-weight: 400; }
.arrow-btn:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 12px 12px 0;
	border-color: transparent #000 transparent transparent;
	position: absolute;
	top: 0;
	right: 0;
	transition: .3s;
}
.arrow-btn.white:after{ border-color: transparent #fff transparent transparent; }
.arrow-btn:hover:after{ transform: translate(4px, -4px); }



.container .arrow-btn{
	padding: .8em 3em;
	color: #000;
	font-size: 14px;
	border-bottom: solid 1px;
	border-left: solid 1px;
	position: relative;
	display: table;
	font-weight: 600;
}
.container .arrow-btn.din{ font-size: 16px; font-weight: 400; }
.container .arrow-btn:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 12px 12px 0;
	border-color: transparent #000 transparent transparent;
	position: absolute;
	top: 0;
	right: 0;
	transition: .3s;
}
.container .arrow-btn:hover:after{ transform: translate(4px, -4px); }

.treat-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 680px;
	margin: 0 auto;
}
.treat-list li{ width: 120px; height: 120px; position: relative; margin-bottom: 30px; transition: .3s; }
.treat-list li:hover{ opacity: .6; }
.treat-list li:nth-of-type(1),
.treat-list li:nth-of-type(4),
.treat-list li:nth-of-type(7),
.treat-list li:nth-of-type(10){ background: #c0beb6; }
.treat-list li:nth-of-type(2),
.treat-list li:nth-of-type(5),
.treat-list li:nth-of-type(8),
.treat-list li:nth-of-type(11){ background: #c0b599; }
.treat-list li:nth-of-type(3),
.treat-list li:nth-of-type(6),
.treat-list li:nth-of-type(12),
.treat-list li:nth-of-type(9){ background: #dddcdc; }
.treat-list li img{ display: block; width: 58px; margin: 27px auto 14px; }
.treat-list li p{ font-size: 12px; font-weight: 500; text-align: center; }
.treat-list li:nth-of-type(1) p,
.treat-list li:nth-of-type(4) p,
.treat-list li:nth-of-type(7) p,
.treat-list li:nth-of-type(10) p{ color: #000; }

footer{ background: #232323; }
footer .copy{ color: #fff; text-align: center; font-size: 10px; padding: 20px 0; }
footer section{background: #232323;}
footer .sitemap{ width: 1000px; margin: 80px auto 0px; display: flex; justify-content: space-between; padding: 40px 0 10px;}
footer .sitemap dl dt{ font-size: 12px; font-weight: 700; border-bottom: solid 1px; padding-bottom: 6px; margin-bottom: 10px; color: #fff;}
footer .sitemap dl dt.mt{margin-top: 15px;}
footer .sitemap dl dd > ul li{ font-size: 12px; letter-spacing: 0; color: #fff;}
footer .sitemap dl dd > ul > li.parent{ width: 240px; }
footer .sitemap dl dd > ul > li.parent > a{ font-weight: 500; }
footer .sitemap dl dd > ul > li.parent + .parent{ margin-top: 1em; }
footer .sitemap dl dd > ul > li.parent > ul{ text-align: left; }
footer .sitemap dl dd > ul > li.parent > ul li{ display: inline-block; letter-spacing: 0; white-space: nowrap; margin-right: .5em; }
footer .sitemap dl dd > ul > li.parent > ul li:last-of-type{ margin-right: 0; }



@media(max-width: 768px){
	*{ font-size: 3.2vw; }

	.pc{ display: none !important; }
	.sp{ display: block; }

	.wrap{ width: 100%; padding-left: 4vw; padding-right: 4vw; }

	.arrow-btn{ font-size: 3.4666vw; padding: 2vw 4vw; letter-spacing: 0; white-space: nowrap; }
	.arrow-btn:after{ border-width: 0 2.8vw 2.8vw 0; }

	header{ padding: 3.333vw 0 2.933vw; }
	header .inner{ min-width: 0; padding: 0 4vw; }
	header nav{
		width: 100%;
		height: 100%;
		background: #000;
		position: fixed;
		top: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		transition: .3s;
		z-index: 999;
		display: block;
	}
	header nav.active{ opacity: 1; visibility: visible; }
	header nav .sp-logo{ width: 47.2vw; margin: 3.333vw 0 0 4vw; }
	header nav ul{ flex-wrap: wrap; margin-left: 12vw; margin-top: 18.666vw; }
	header nav ul li{
		width: 100%;
		height: auto;
		font-size: 4.5333vw;
		padding-left: 10.6666vw;
		margin: 5.66666vw 0;
	}
	header nav ul li:before{
		width: 5.2vw;
		height: 5.333vw;
		left: 0;
    	top: 1.8vw;
    	transform: none;
    }
    header nav ul li:not(:last-of-type):after{ content: none; }
	header .logo{ width: 47.2vw; }

	.treat-list{ width: 66.6666vw; margin: 0; justify-content: left; }
	.treat-list li{ width: 21.3333vw; height: 21.3333vw; margin-bottom: 1.33335vw; }
	.treat-list li:not(:nth-of-type(3n)){ margin-right: 1.33335vw; }
	.treat-list li img{ width: 8.8666vw; margin: 5.5vw auto 2vw; }
	.treat-list li p{ font-size: 2.6666vw; }

	.menu-btn{
		position: fixed;
		top: 1vw;
		right: 2vw;
		z-index: 10000;
		display: table;
		background: #000;
		padding: 3vw 2vw;
	}
	.menu-btn .inner{
		width: 8.0533vw;
		height: 8.404vw;
		background-image: url(../images/common/btn-menu.png);
		background-repeat: no-repeat;
		background-size: contain;
		transition: .3s;
	}
/*
	.no-webp .menu-btn .inner{
		background-image: url(../images/common/btn-menu.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
*/
	.menu-btn.active .inner{ background-image: url(../images/common/btn-close.png); }
/*	.no-webp .menu-btn.active .inner{ background-image: url(../images/common/btn-close.png); }*/

	.float-btn{
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
	}
	.float-btn li{
		width: 50%;
		height: 16vw;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3.7333vw;
		color: #000;
		font-weight: 500;
	}
	.float-btn li:nth-of-type(1){ background: #c0b599; border-top: solid 1.3333vw #cfc3a1; }
	.float-btn li:nth-of-type(2){ background: #dddcdc; border-top: solid 1.3333vw #e9e8e8; }
	.float-btn li span{ position: relative; padding-left: 9vw; }
	.float-btn li span:before{
		content: '';
		width: 8vw;
		height: 6.266vw;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
	}
	.float-btn li:nth-of-type(1) span:before{ background-image: url(../images/common/icon-float01.png); }
	.float-btn li:nth-of-type(2) span:before{ background-image: url(../images/common/icon-float02.png); }

	footer{ margin-bottom: 16vw; }
	footer .copy{ font-size: 2.6666vw; padding: 4vw 0; }
	footer .sitemap{ width: 100%; flex-wrap: wrap; padding-left: 5.3333vw; padding-right: 5.3333vw; margin-top: 0vw; margin-bottom: 0vw; padding-top: 20px;}
	footer .sitemap dl{ width: 100%; }
	footer .sitemap dl dt{ font-weight: 500; font-size: 3.2vw; text-align: center; padding-bottom: 2vw; margin-bottom: 2vw; }
	footer .sitemap dl dt.mt{margin-top: 0px;}
	footer .sitemap dl dd{ display: none; }
}


            .container .table01{
                width: 100%;
            }
            .container .table01 th{
                width: 30%;
            }
            .container .table01 td{
                color: #333;
                background: #fff;
                border-bottom: 1px solid #333;
            }

            .arrow-btn:hover:after{ transform: translate(4px, -4px); }










.container .arrow-btn i {
    color: #f901d3;
    margin-right: 15px;
}

.harf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.harf_box.width50 {
    width: 50%;
}

.harf_box.width50 img {
    max-width: 100%;
}

.container .mrgn-cntr {margin:0 auto;}