@charset "UTF-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		10;
	dw-num-cols-tablet:		17;
	dw-num-cols-desktop:	20;
	dw-gutter-percentage:	10;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */
@font-face {
	font-family: '02うつくし明朝体';
	src: url('UtsukushiFONT.otf')
}
@font-face　{
	font-family: '02うつくし明朝体';
	src: url('UtsukushiFONT.otf') format("OpenType");
}
@font-face {
	font-family: '機械彫刻用標準書体 M';
	src: url('KikaiChokokuJIS-Md.otf')
}
@font-face　{
	font-family: '機械彫刻用標準書体 M';
	src: url('KikaiChokokuJIS-Md.otf') format("OpenType");
}
@font-face {
	font-family: 'M+ 2p light';
	src: url('mplus-2p-light.ttf')
}
@font-face　{
	font-family: 'M+ 2p light';
	src: url('mplus-2p-light.ttf') format("TrueType");
}
@font-face {
	font-family: 'M+ 2p regular';
	src: url('mplus-2p-regular.ttf')
}
@font-face　{
	font-family: 'M+ 2p regular';
	src: url('mplus-2p-regular.ttf') format("TrueType");
}

/* --- パンくずリスト --- */
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}
.breadcrumb li {
	display: inline;/*横に並ぶように*/
	list-style: none;
	font-size: 14px;
}
.breadcrumb li:after {
	/* >を表示*/
	content: '>';
	padding: 0 0.2em;
	color: #555;
}
.breadcrumb li:last-child:after {
	content: '';
}
.breadcrumb li a {
	text-decoration: none;
}
.breadcrumb li:first-child a:before {
	/*家アイコン*/
	font-family: "Font Awesome 5 Free";
	content: "\f015";
	font-weight: 900;
	font-size: 1.1em;
}
.breadcrumb li a:hover {
	text-decoration: underline;
}

/* --- トップに戻るボタン --- */
#page_top{
	width: 90px;
	height: 90px;
	position: fixed;
	right: 10px;
	bottom: 50px;
	opacity: 0.6;
	z-index: 2;
}
#page_top a{
	position: relative;
	display: block;
	width: 90px;
	height: 90px;
	text-decoration: none;
}
#page_top a::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f102";
	font-size: 25px;
	color: #666;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -40px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
#page_top a::after{
	content: "PAGE TOP";
	font-size: 13px;
	color: #fff;
	position: absolute;
	top: 45px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	color: #555555;
}

/* --- 新着情報テーブル --- */
div.update {
	width: 100%; /* 新着情報エリアの幅 */
	font-size: 90%;
}
/* --- 見出し --- */
div.update h2 {
	margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
	font-size: 120%;
}

/* --- 新着リスト --- */
div.update dl {
	width: 100%; /* 新着リストの幅 */
	margin: 0;
	border-top: 1px #c0c0c0 dotted; /* 新着リストの上境界線 */
}

/* --- 日付エリア --- */
div.update dt {
	width: 6.7em; /* 日付エリアの幅 */
	float: left;
	padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
	line-height: 120%;
}

/* --- 本文エリア --- */
div.update dd {
	margin: 0;
	padding: 7px 3px 6px 6.6em; /* 本文エリアのパディング（上右下左） */
	border-bottom: 1px #c0c0c0 dotted; /* 本文エリア下境界線 */
	line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearFix {
	min-height: 1px;
}
/* --- 新着情報テーブル　ここまで --- */

/* --- Google Map　レスポンシブ --- */
.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* --- Google Map　レスポンシブ　ここまで --- */
body {
	font-family: 'M+ 2p light';
	color: #6d7260;
	font-size: 16px;
	line-height: 1.3em;
}
body::before {
  background:url(images/background_t_400_10.jpg) no-repeat left top;
  background-position: center 150px;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  content: "";
  z-index: -1;
} 
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 90.1727%;
	padding-left: 0.4136%;
	padding-right: 0.4136%;
}
#headder {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: '機械彫刻用標準書体 M';
}
#top-message {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 10px;
}
.message {
	margin: 80px 0 50px;
	color: #889D84;
	line-height: 2em;
	font-family: '02うつくし明朝体';
	text-align: center;
}
.side-logo {
	margin-bottom: 20px;
	margin-bottom: 30px;
	text-align: center;
}
.top-background {
	background: ;
	background-repeat: no-repeat;
	background-position: center;
}
#mobile-menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: '機械彫刻用標準書体 M';
	margin-bottom: 80px;
}
/* --- モバイルメニュー --- */
#submenu {
	width: 100%;
}
#submenu li{
	float: left;
	width: 50%;
	margin: 0;
	padding: 5px 0;
	list-style: none;
}
#submenu a{
	display: block;
	text-decoration: none;
	font-size: 16px;
	margin-top: 20px;
}
.my-arrow {
	color: #FFAC5C;
}
/* --- ここまで --- */
#news {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}
#newguest-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#newguest-message {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.point3 {
	line-height: 1.7em;
	margin: 10px 5px;
	font-family: 'M+ 2p regular';
}
#character-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#character_1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#character_2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#character_3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#recommend-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#recommend {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.osusume-list {
	border: solid 2px #ffb03f;
	position: relative;
	text-align: center;
	padding-top: 1em;
}
.o-t {
	border-bottom: solid 2px;
	font-family: 'M+ 2p regular';
}
.o-t:before {
	font-family: "Font Awesome 5 Free";
	content: "\f15c";
	font-weight: 900;
	margin-right: 5px;
}
.osusume {
	list-style: none;
	padding-bottom: 10px;
}
.osusume li {
	line-height: 1;
	padding: 0.8em 0.5em;
	border-bottom: dotted 1px;
	text-align: left;
	width: 90%;
}
.osusume li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f058";
	font-weight: 900;
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #FF3300; /*アイコン色*/
}
#promise-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#promise_1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#promise_2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#promise_3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#promise_4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#promise_5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#promise_6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#staff-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#staff {
	clear: both;
	float: left;
	margin-left: 0;
	width: 29.3577%;
	display: block;
}
#service-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#service-cut {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#service-gross {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#service-color {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#service-spa {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#service-perm {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#pricelist {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#voice-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#voice-1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#voice-2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#voice-3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#reserve-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#reserve-1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#reserve-1 p {
	line-height: 1.5em;
}
#reserve-2 {
	clear: both;
	float: left;
	margin-left: 10.0917%;
	width: 79.8165%;
	display: block;
	text-align: center;
	margin-bottom: 30px;
}
#reserve-3 {
	clear: both;
	float: left;
	margin-left: 10.0917%;
	width: 79.8165%;
	display: block;
	text-align: center;
	margin-bottom: 30px;
}
#reserve-4 {
	clear: both;
	float: left;
	margin-left: 10.0917%;
	width: 79.8165%;
	display: block;
	text-align: center;
	margin-bottom: 30px;
}
#shop-title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#shop-access {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#shop-info {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 10px;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
a:link {
	color: #3FABE1;
	text-decoration:none;
}
a:visited {
	color: #E872A8;
	text-decoration: none;
}
a:hover {
	color: #D9961F;
	text-decoration:underline; 
}
a:active {
	color: #94CB4A;
	text-decoration: underline;
}
.h2-title {
	color: #565b48;
	font-family: 'M+ 2p regular';
	border-bottom: double 3px #a7d6ff;
	margin-top: 30px;
	font-size: 18px;
}
.h3-title {
	color: #565b48;
	font-family: 'M+ 2p regular';
	border-bottom: solid 2px #ffb03f;
	font-size: 16px;
}
.h2-icon {
	color: #ffc778;
	font-size: 1.2em;
}
.h3-icon{
	color: #DC9EB9;
	font-size: 1.2em;
}
.h4-title {
	font-family: 'M+ 2p regular';
	text-align: center;
	color: #fff;
	background: #ffb03f;/*背景色*/
	box-shadow: 0px 0px 0px 5px #ffb03f;
	border: dashed 1px #F6E3C8;
	padding: 0.2em 0.5em;
	font-size: 16px;
}
.promise_photo {
	text-align: center;	
}
.promise_photo img {
	width: 100px;
	height: auto;
}
.reserve-bottan {
	text-align: center;
	padding: 0.3em 1em;
	text-decoration: none;
	color: #67c5ff;
	border: solid 2px #67c5ff;
	border-radius: 3px;
	transition: .4s;
	background: #fff;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

.reserve-bottan:hover {
	background: #67c5ff;
	color: #fff;
}
.reserve-bottan:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}
.reserve-bottan a,
.reserve-bottan a:visited,
.reserve-bottan a:hover,
.reserve-bottan a:active {
	color: inherit;
}
table.salon_info {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.salon_info th {
	width: 20%;
	padding-left: 10px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	background: rgba( 238, 250, 209, 0.4 );
}
table.salon_info td {
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: rgba( 255, 255, 255, 0.8 );
}
#staff_2 {
	clear: none;
	float: left;
	margin-left: 0.9174%;
	width: 100%;
	display: block;
}
#staff_3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#staff_2 h4 {
	margin: 0;
	padding: 0;
}
table.type04 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.type04 th {
	width: 30%;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}
table.type04 td {
	width: 100%;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}
.voice {
	margin-top: 20px;
	border: solid 2px #F90;
}
.voice-qu {
	border-bottom: solid 1px #666;
	font-weight: 400;
	margin: 20px 20px 10px;
}
.voice-an {
	margin: 0 30px;
}
.cyl {
	font-family: '02うつくし明朝体';
	font-size: 25px;
	color: #F6C;
	margin-bottom: 40px;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}
.chara-title {
	text-align: center;
	border-bottom: solid 1px;
	font-family: 'M+ 2p regular';
}
.chara-photo {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	margin-right: 10px;
}
.chara-text {
}
.profile {
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 10px;
}
.yamada {
	font-family: 'M+ 2p regular';
}
.salon-photo {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 20px;
}
.salon-photo p {
	width: 24%;
	height: auto;
}
.menu-photo {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 10px 0;
}
.menu-photo figure {
	width: 32%;
	height: auto;
}
.menu-image {
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}
.fig {
	text-align: center;
	font-size: 0.8em;
}
.color-text {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
	border: solid 3px #95ccff;
}
.color-text .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #95ccff;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.color-text p {
    margin: 0; 
    padding: 0;
}
.important {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
	border: solid 3px #95ccff;
	margin-top: 50px;
}
.important .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #95ccff;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.important p {
    margin: ; 
    padding: ;
}
.menu-title {
	color: #516032;
	font-weight:400;
	border-bottom: solid 2px #ffb03f;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}
.menu-name {
	font-family: 'M+ 2p regular';
	display: block;
	float: left;
	margin-bottom: 5px;
	font-size: 16px;
}
.title-price {
	font-family: 'M+ 2p regular';
	margin-bottom: 0;
	margin-right: 1px;
	font-size: 14px;
}
.detail-bottan {
	position: relative;
	display: inline-block;
	font-family: '機械彫刻用標準書体 M';
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #fff;
	background: #ffb03f;
	border: solid 2px #ffb03f;
	border-radius: 3px;
	transition: .6s;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.detail-bottan:hover {
	background: #fff;
	color: #ffb03f;
	border: solid 2px #ffb03f;
}
.detail-bottan:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}
.detail-bottan a,
.detail-bottan a:visited,
.detail-bottan a:hover,
.detail-bottan a:active {
	color: inherit;
}
.menu-list-bottan {
	position: relative;
	display: inline-block;
	font-family: '機械彫刻用標準書体 M';
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #fff;
	background: #F9F;
	border: solid 2px #F9F;
	border-radius: 3px;
	transition: .6s;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.menu-list-bottan:hover {
	background: #fff;
	color: #F9F;
	border: solid 2px #F9F;
}
.menu-list-bottan:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}
.menu-list-bottan a,
.menu-list-bottan a:visited,
.menu-list-bottan a:hover,
.menu-list-bottan a:active {
	color: inherit;
}
.mo-copy {
	text-align: center;
	margin: 70px 0;
	font-size: 0.9em;
}
.box-shadow {
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}
.drop-shadow {
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}
#menu-top {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 10px;
}
#menu-list_1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_7 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_8 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_9 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_10 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu-list_11 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
table.type09 {
	border-collapse: collapse;
	line-height: 1.5;
	margin-bottom: 10px;
}
table.type09 thead th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #495B0A;
	text-align: right;
	white-space: nowrap;
	padding: 0 0 0 5px;
}
table.type09 tbody th {
	width: 90%;
	vertical-align: text-bottom;
	border-bottom: 1px solid #ccc;
	text-align: left;
	padding: 10px 0 10px 10px;;
	background: rgba(250, 253, 241, 0.7);
	font-size: 14px;
}
table.type09 td {
	width: 10%;
	padding: 10px 0 10px 5px;
	vertical-align: text-bottom;
	border-bottom: 1px solid #ccc;
	text-align: right;
}
.taxin {
	font-size: 0.9em;
}
.time {
	font-size: 0.9em;
}
table.type09 thead th.th01 {
	text-align: left;
	padding-left: 10px;
}
.sub-explan {
	font-size: 0.9em;
}
.list-subtext {
	margin: 50px 0 20px;;
}
.color-text ul {
	margin: 10px 0;
	padding: 0 0 0 20px;
}
.color-text ul li {
	list-style: circle;
}
.notice-text {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
	border: solid 3px #ffb03f;
}
.notice-text .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffb03f;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.notice-text p {
    margin: 10px 0; 
    padding: 0;
}
.notice-text ul li {
	list-style: circle;
}
.menu-list-title h1 {
	font-family: 'M+ 2p regular';
	font-weight: lighter;
	background: linear-gradient(transparent 70%, #baddff 70%);
	font-size: 21px;
}
.menu-list-title span {
	font-weight: 300;
	font-size:16px;
}
.menu-h1-icon {
	margin-right: 5px;
	color: #ffc778;
}
.list-info {
	margin-top: 100px;
}
/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 92.5026%;
	padding-left: 0.2486%;
	padding-right: 0.2486%;
}
body {
	font-size:16px;
}
body::before {
  background:url(images/background_t_560_10.jpg) no-repeat left top;
  background-position: center 220px;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  content: "";
  z-index: -1;
}
#headder {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#top-message {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
	margin-top: 20px;
}
.message {
	
}
.side-logo {
	margin-top: 30px;
	margin-bottom: 40px;
}
#mobile-menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
}
#submenu li{
	width: 33.3%;
}
#news {
	clear: both;
	float: left;
	margin-left: 17.7419%;
	width: 76.344%;
	display: block;
	margin-bottom: 40px;
}
#newguest-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#newguest-message {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
.point3 {
	margin: 10px 20px;
}
#character-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#character_1 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#character_2 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#character_3 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#recommend-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#recommend {
	clear: both;
	float: left;
	margin-left: 17.7419%;
	width: 64.5161%;
	display: block;
}
#promise-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#promise_1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 46.7741%;
	display: block;
}
#promise_2 {
	clear: none;
	float: left;
	margin-left: 6.4516%;
	width: 46.7741%;
	display: block;
}
#promise_3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 46.7741%;
	display: block;
}
#promise_4 {
	clear: none;
	float: left;
	margin-left: 6.4516%;
	width: 46.7741%;
	display: block;
}
#promise_5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 46.7741%;
	display: block;
}
#promise_6 {
	clear: none;
	float: left;
	margin-left: 6.4516%;
	width: 46.7741%;
	display: block;
}
#staff-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#staff {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 23.1182%;
	display: block;
}
#service-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#service-cut {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#service-gross {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#service-color {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#service-spa {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#service-perm {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#pricelist {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 46.7741%;
	display: block;
}
#voice-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#voice-1 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#voice-2 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#voice-3 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#reserve-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#reserve-1 {
	clear: both;
	float: left;
	margin-left: 11.8279%;
	width: 76.344%;
	display: block;
	margin-bottom: 30px;
}
#reserve-2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 29.0322%;
	display: block;
}
#reserve-3 {
	clear: none;
	float: left;
	margin-left: 6.4516%;
	width: 29.0322%;
	display: block;
}
#reserve-4 {
	clear: none;
	float: left;
	margin-left: 6.4516%;
	width: 29.0322%;
	display: block;
}
#shop-title {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#shop-access {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#shop-info {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
	margin-top: 20px;

}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#staff_2{
	clear: none;
	float: left;
	margin-left: 6.4516%;
	width: 88.172%;
	display: block;
}
#staff_3{
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
table.type04 th {
	width: 20%;
}
.h2-title {
	font-size: 20px;
	margin-top: 50px;
}
.h3-title {
	font-size: 18px;
}
.h4-title {
	font-size: 17px;
}
.menu-name {
	font-size: 18px;
}
.title-price {
	font-size: 16px;
	margin-right: 10px;
}
.voice {
	margin: 50px 30px;
}
.voice_photo {
	text-align: center;
}
.chara-photo {
	width: 150px;
	height: 150px;
}
.chara-text {
	padding-left: 140px;
}
.profile {
	width: 180px;
	height: auto;
	margin-right: 30px;
}
.color-text p {
    margin: 10px 0; 
    padding: 0 10px;
}
#menu-top {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
	margin-top: 20px;
}
#menu-list_1 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_2 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_3 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_4 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_5 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_6 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_7 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_8 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_9 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_10 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
#menu-list_11 {
	clear: both;
	float: left;
	margin-left: 5.9139%;
	width: 88.172%;
	display: block;
}
table.type09 thead th {
	padding: 0 15px;
}
table.type09 tbody th {
	padding: 15px 0 15px 15px;;
	font-size: 1em;
	width: 50%;
}
table.type09 td {
	padding: 15px;
}
.taxin {
	font-size: 0.9em;
}
.time {
	font-size: 1em;
}
table.type09 thead th.th01 {
	text-align: left;
	padding-left: 15px;
}
.menu-table {
	padding-top: 10px;
}
.list-text {
	padding: 0px 20px 0 20px;
	line-height: 1.5em;
}
.color-text ul {
	margin: 10px 10px;
	padding: 0 20px;;
}
.color-text ul li {
	padding: 5px 0;
}
.notice-text {
    padding: 20px 30px;
	line-height: 1.5em;
}
.menu-list-title h1 {
	font-size: 27px;
	width: 70%;
}
.menu-list-title h1 {
	font-size: 21px;
}
.menu-list-title span {
	font-weight: 300;
	font-size: 16px;
	margin-left: 15px;
}
.soto {
	width: 250px;
	height: auto;
	float: left;
	margin-right: 20px;
}
}
/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 89.5909%;
	max-width: 1232px;
	padding-left: 0.2045%;
	padding-right: 0.2045%;
	margin: auto;
}
#headder {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#top-message {
	clear: both;
	float: left;
	margin-left: 5.0228%;
	width: 89.9543%;
	display: block;
	margin-top: 120px;
}
.message {
	margin-top: 120px;
}
.side-logo {
	margin-top: 80px;
	margin-bottom: 120px;
}
#mobile-menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#news {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#newguest-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#newguest-message {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#character-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#character_1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 29.6803%;
	display: block;
}
#character_2 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 29.6803%;
	display: block;
}
#character_3 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 29.6803%;
	display: block;
}
#recommend-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#recommend {
	clear: both;
	float: left;
	margin-left: 25.1141%;
	width: 49.7716%;
	display: block;
}
#promise-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#promise_1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 29.6803%;
	display: block;
}
#promise_2 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 29.6803%;
	display: block;
}
#promise_3 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 29.6803%;
	display: block;
}
#promise_4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 29.6803%;
	display: block;
}
#promise_5 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 29.6803%;
	display: block;
}
#promise_6 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 29.6803%;
	display: block;
}
#staff-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#staff {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 19.6347%;
	display: block;
}
#service-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#service-cut {
	clear: both;
	float: left;
	margin-left: 0;
	width: 44.7488%;
	display: block;
}
#service-gross {
	clear: none;
	float: left;
	margin-left: 10.5022%;
	width: 44.7488%;
	display: block;
}
#service-color {
	clear: both;
	float: left;
	margin-left: 0;
	width: 44.7488%;
	display: block;
}
#service-spa {
	clear: none;
	float: left;
	margin-left: 10.5022%;
	width: 44.7488%;
	display: block;
}
#service-perm {
	clear: none;
	float: left;
	margin-left: 10.5022%;
	width: 44.7488%;
	display: block;
	margin-top: 50px;
}
#pricelist {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#voice-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#voice-1 {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#voice-2 {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#voice-3 {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#reserve-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#reserve-1 {
	clear: both;
	float: left;
	margin-left: 20.0913%;
	width: 59.8173%;
	display: block;
}
#reserve-2 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 19.6347%;
	display: block;
}
#reserve-3 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 19.6347%;
	display: block;
}
#reserve-4 {
	clear: none;
	float: left;
	margin-left: 5.4794%;
	width: 19.6347%;
	display: block;
}
#shop-title {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
#shop-access {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#shop-info {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
	margin-bottom: 50px;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#staff_2 {
	clear: none;
	float: left;
	margin-left: 10.5022%;
	width: 79.9086%;
	display: block;
}
#staff_3 {
	clear: both;
	float: left;
	margin-left: 10.0456%;
	width: 79.9086%;
	display: block;
}
.footer-background {
	background: url(images/back_foot.jpg);
}
#footer p {
	text-align: center;
}
#footer-menu {
	text-align: center;
	font-family: '機械彫刻用標準書体 M';
}
#footer-menu li {
	list-style: none;
	display: inline;
	border-right:1px solid #5A710D;
	padding-right:6px;
	margin-left:6px;
	font-size:13px;
}
#footer-menu li:first-child{
	border-left:1px solid #5A710D;
	padding-left:6px;
}
.ham, .footer-bottan {
	display: none;
}
.ham-icon {
	font-size: 1.2em;
	margin-right: 5px;
}
#headder {
	background: url(images/back_head.jpg);
	z-index: 2;
	font-size: 14px;
	position: fixed;
	top: 0;
	left: 0;
	font-weight: 500;
}
.important {
	width: 80%;
	margin: 80px auto;
}
.h2-title {
	margin-top: 80px;
}
.chara-photo {
	float: none;
	text-align: center;
	width: 100%	
}
.chara-photo img {
	width: 200px;
	height: auto;
	
}
.chara-text {
	padding: 70px 0 20px;
	margin: 0;
}
.voice {
	margin: 50px 0px;
}
.voice_photo {
	float: left;
	margin: 20px 0px;
	text-align: left
}
.voice_photo img {
	width: 500px;
	height: auto;
}
.voice-text {
	margin: 20px 20px;
	padding-left: 500px;
}
.voice-qu {
	border-bottom: solid 1px #666;
	font-weight: 400;
	margin: 20px 0 10px;
}
.voice-an {
	margin: 0 15px;
}
.mo-copy {
	display: none;
}
#menu-top {
	clear: both;
	float: left;
	margin-left: 5.0228%;
	width: 79.9086%;
	display: block;
	margin-top: 130px;
}
#menu-list_1 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_2 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_3 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_4 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_5 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_6 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_7 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_8 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_9 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_10 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
#menu-list_11 {
	clear: both;
	float: left;
	margin-left: 15.0684%;
	width: 69.863%;
	display: block;
}
table.type09 thead th {
	padding: 0 20px;
}
table.type09 tbody th {
	padding: 15px 0 15px 20px;;
}
table.type09 td {
	padding: 15px 20px;
}
.taxin {
	font-size: 0.9em;
}
.time {
	font-size: 1em;
}
table.type09 thead th.th01 {
	text-align: left;
	padding-left: 20px;
}
.menu-list-title h1 {
	width: 70%;
	font-size: 29px;
}
.menu-list-title span {
	font-weight: 300;
	font-size: 20px;
	margin-left:20px;
}
.soto {
	width: 450px;
}
}

/* グローバルメニュー　画面サイズが768px以上の場合に適用 */

.title h1 {
	font-weight: normal;
	font-size: 20px;
	text-align: right;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
	font-family: '02うつくし明朝体';
	color: #475647;
}
.title {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}
.head-bottan {
	display: inline-block;
	padding: 0.4em 0.5em;
	text-decoration: none;
	color: #fff;
	border: solid 3px #FF99CC;
	border-radius: 3px;
	transition: .5s;
	background: #FF99CC;
	margin: 15px 20px 0 40px;
	height: 20px;
	width: 120px;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

.head-bottan:hover {
	background: #fff;
	color: #FF99CC;
}
.head-bottan:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}
.head-bottan a,
.head-bottan a:visited,
.head-bottan a:hover,
.head-bottan a:active {
  color: inherit;
}

.logo a {
	display: table;
	width: 87px;
	height: 87px;
	text-align: center;
	font-weight: normal;
	font-size: 16px;
	text-decoration: none;
	color: #475647;
	
}
.logo span {
	display: table-cell;
	vertical-align: middle;
}
.logo {
	float: left;
	padding: 5px 0 0 30px;
	margin: 0;
}
.logo a:hover {
	color: #aebfae;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
}
.logo small a, 
.logo small a:visited, 
.logo small a:active {
  color: inherit;
}
.inner {
	display: block;
}
.head-icon {
	font-size: 1.2em;
	margin-right: 5px;
}
#menu-box {
	width: 100%;
}
.global-menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
}
.global-menu li{
	display: block;
	float: left;
	width: 12%;
}
.global-menu li a {
	display: block;
	margin-bottom: 0;
	padding: 1px 0 4px;
	color: #475647;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
	border-right: solid 1px #CCC;
}
.global-menu li:last-child a{
	border-right: none;
}
.global-menu li a:hover {
	color: #aebfae;
}
.upperlist {
	position: relative;
}
.secondlist {
	position: absolute;
	background: url(images/back_head_480.jpg);
}
.secondlist li {
	width: 100%;
}
.secondlist li a {
	border-right: none;
	filter: drop-shadow(0 0 rgba(0,0,0,0.2));
	padding: 10px 0;
	border-bottom: solid 1px #CCC;
}
.upperlist ul {
	opacity: 0;
	visibility: hidden;
	transition: .5s;
	top: 50%;
}
.upperlist:hover ul {
	opacity: 1;
	visibility: visible;
	top: 100%;
}
.underline1 {
	display: inline-block;
	padding-bottom: 4px;
	position: relative;
}
.underline1::after {
	background-color: #FF0033;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline1:hover:after {
	width: 100%;
}
.underline2 {
	display: inline-block;
	padding-bottom: 4px;
	position: relative;
}
.underline2::after {
	background-color: #FF9900;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline2:hover:after {
  width: 100%;
}
.underline3 {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline3::after {
	background-color: #FFFF00;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline3:hover:after {
  width: 100%;
}
.underline4 {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline4::after {
	background-color: #33FF00;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline4:hover:after {
  width: 100%;
}
.underline5 {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline5::after {
	background-color: #00FFFF;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline5:hover:after {
  width: 100%;
}
.underline6 {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline6::after {
	background-color: #0066FF;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline6:hover:after {
  width: 100%;
}
.underline7 {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline7::after {
	background-color: #9933FF;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline7:hover:after {
  width: 100%;
}
.underline8 {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline8::after {
	background-color: #FF66CC;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	-webkit-transition: .4s all;
	transition: .4s all;
	width: 0;
}
.underline8:hover:after {
  width: 100%;
}


/* 画面サイズが768px以下の場合に適用 */
@media only screen and (max-width: 768px) {

#headder {
	top: 0;
	left: 0;
	right: 0;
}
.headder-background {
	background: url(images/back_head_480.jpg);
}
.logo {
	padding: 10px 0 0 0;
}
.title {
	padding-top: 20px;
}
.head-bottan {
	display:none;
}
#menu-box {
	display: none;
}
#footer {
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	height: 60px;
	background: url(images/back_foot_480.jpg);
}
#footer p {
	display: none;
}
/* モバイルフッターメニュー */

/* ボタンパーツ */

.ham {
	position: relative;
	width: 30px;
	height: 30px;
	cursor: pointer;
	float: left;
	margin-top: 10px;
	left: 30px;
}
.ham_line {
	position: absolute;
	left: 7px;
	width: 30px;
	height: 2px;
	background-color: #666;
	transition: all 0.3s;
}
.ham_line1 {
	top: 3px;
}
.ham_line2 {
	top: 15px;
}
.ham_line3 {
	top: 27px;
}
.ham-icon {
	font-size: 1.5em;
	margin-right: 10px;
}

.clicked .ham_line1 {
	transform: rotate(45deg);
	top: 16px;
}
.clicked .ham_line2 {
	width: 0px;
}
.clicked .ham_line3 {
	transform: rotate(-45deg);
	top: 16px;
}

/* ボタンパーツ　ここまで */

.mof-menu {
	position: fixed;
	width: 300px;
	left: -350px;
	transition: all 0.4s;
	bottom: 60px;
	background: rgba(102,102,102,0.95);
	box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.29);
}
#footer-menu {
	margin: 0;
	padding: 0;
}
#footer-menu li {
	border-bottom: solid #fff 1px;
	list-style: none;
	font-family: '機械彫刻用標準書体 M';
	padding: 18px;
	padding-left: 40px;
	font-size: 15px;
}
#footer-menu li a {
	text-decoration: none;
	color: #fff;
}

#footer-menu li:last-child {
	border-bottom: none;
}
.clicked .mof-menu {
	left: 0px;
}
.footer-bottan {
	display: flex;
	justify-content: center;
	margin-left: 100px;
	margin-right: 30px;
}
.res-bottan i {
	display: block;
	font-size: 26px;
}
.res-bottan a span {
	display: block;
	font-size: 12px;
}
.res-bottan {
	display: inline-block;
	width: 25%;
	padding: 8px 0 0;
	color: #666;
	transition: .4s;
	text-align: center;
}
.res-bottan:hover {
	color: #CCC;
}
.res-bottan a{
	text-decoration: none;
	color: inherit;
}
.res-bottan a:visited,
.res-bottan a:active {
  color: inherit;
}
.fo-icon {
	font-size: 1.2em;
	margin-right: 5px;
}
/* モバイルフッターメニュー　ここまで */

}

/* 画面サイズが480px以下の場合に適用 */
@media only screen and (max-width: 480px) {

#footer {
	height: 55px;
}
.mof-menu {
	width: 220px;
	left: -250px;
	bottom: 55px;
}
.title h1 {
	font-size:14px;
	margin-left: 5px;
	margin-top: 5px;
}
.logo a {
    width: 65px;
	height: auto;
}
.logo {
	padding: 15px 0 0px 0px;
}
.logo small {
	font-size: 9px;
}
.footer-bottan {
	margin:0 0 0 60px;
}
.res-bottan i {
	font-size: 23px;
}
.res-bottan a span {
	display: block;
	font-size: 11px;
}
.ham {
	left: 10px;
}
#footer-menu li {
	padding-left: 20px;
}
#reserve-1 p {
	padding: 0 10px 10px;
}
}

/* Googleカレンダー */
.cal_wrapper {
	max-width: 800px; /* 最大幅 */
	min-width: 300px; /* 最小幅 */
	margin: 2.0833% auto;
	margin-top: 50px;
}
 
.googlecal {
	position: relative;
	padding-bottom: 100%; /* 縦横比 */
	height: 0;
	overflow: hidden;
}
.googlecal iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
 
@media only screen and (min-width: 600px) {
  /* 画面幅が600px以上の場合の縦横比の指定 */
.googlecal {
	padding-bottom: 75%;
}
}