/* CSS Document */

body { padding:0px; margin:0px; letter-spacing:0px; font-size:14px; text-align:center; background-image:url(../img/bg_01.gif); background-repeat:repeat-y;}

ol,ul,li { list-style:none; margin:0px; padding:0px; }

h1,h2,h3,h4,p,table,th,td,dl,dt,dd { margin:0px; padding:0px; }

h1,h2,p { text-align:left;}

p { line-height:1.6em; font-size:18px; color:#484848;}

p a { line-height:1.6em; font-size:18px;}

img { border:none; margin:0px; padding:0px; vertical-align:bottom;}

.clear { clear:both; height:1px; font-size:0px; line-height:1px;}

strong { color:#FF0000;}

.left { float:left;}
.right { float:right;}


a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #000000; }
a:active { color: #000000; }

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


body{
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
 

/*TOP*/

#top-bg { background-image:url(../img/top/bg.gif);
	background-repeat:no-repeat;
	width:100%;
	background-size:cover;
	}
	
#top-bg h1{ font-size:1.5em; color:#FFFFFF; text-align:center; font-weight:normal; padding:20px 0 0 0; } 

#top-bg h2{ font-size:1.5em; color:#FFFFFF; text-align:center; padding:0 0 40px 0; font-weight:normal;}

#top-bg h3{ font-size:1.8em; color:#7f7f7f; text-align:center; padding:60px 0 25px 0; font-weight:bold;}

#top-bg p { margin:0 3%; width:94%}


.link { padding:30px 0 0 0;}
.link, .link ul { width:100%}
.link li{text-align:center; float:left;}
.link li.t {width:32%;}
.link li a { color:#2fbb19; text-decoration:none; font-size:1.8em;}
.link li a:visited { color:#2fbb19}
.link li a:hover { color:#2fbb19}
.link li a:active { color:#2fbb19}

.link li.t2 {width:49%; margin:40px 0 0 0;}

.line { background-color:#FFFFFF; width:1px; height:60px;}

.foot { padding:120px 0 200px 0;}
.foot p { text-align:center;}
.foot p a:link { color:#2fbb19}
.foot p a:visited { color:#2fbb19}
.foot p a:hover { color:#2fbb19}
.foot p a:active { color:#2fbb19}


#top-bg .copy { color:#848484; padding:40px 0 50px; text-align:center; font-size:0.8em;}



/*各店全体*/	

.box { padding:0 0 50px 0;}
p.txt { width:90%; margin:0 5%;}

#kamiomoi h3 { color:#e87198;
text-align:center;
margin:2em auto;
font-size:2.2em;
padding:40px 0 0 0;}

#kamiomoi .box h3 { color:#8ec323;
font-size:2.2em;
font-weight:normal;
line-height:1.5em;
padding:0px;}


#kamiomoi h4 { color:#f496b5;
text-align:center;
margin:35px auto 5px;
font-size:1.8em;}


#hitorishizuka h3 { color:#c7ac70;
text-align:center;
margin:2em auto;
font-size:2.2em;
padding:40px 0 0 0;}

#hitorishizuka .box h3 { color:#8ec323;
font-size:2.2em;
font-weight:normal;
line-height:1.5em;
padding:0px;}


#hitorishizuka h4 { color:#dfc896;
text-align:center;
margin:35px auto 5px;
font-size:1.8em;}




/*メイン*/

#main { position:relative;}

.lead-in { width:90%; margin:0 5%; padding:40px 0; }

#kamiomoi .lead h2 { font-size:16px; line-height:1.5em; color:#e87198; font-weight:normal; display:inline; text-align:left;}
#kamiomoi .lead h3 { font-size:16px; line-height:1.5em; color:#e87198; font-weight:normal; display:inline; text-align:left;}
#kamiomoi .lead { background-image:url(../img/kamiomoi/t_bg.gif); background-repeat:repeat-x;}


#hitorishizuka .lead h2 { font-size:16px; line-height:1.5em; color:#9b7826; font-weight:normal; display:inline; text-align:left;}
#hitorishizuka .lead h3 { font-size:16px; line-height:1.5em; color:#9b7826; font-weight:normal; display:inline; text-align:left;}
#hitorishizuka .lead { background-image:url(../img/hitorishizuka/t_bg.gif); background-repeat:repeat-x;}

#kamiomoi h1 {
	position: absolute;
	text-align: left;
	left: 8%;
	top: 5px;
	font-size:1.2em;
	color:#e87198;
}

#hitorishizuka h1 {
    position: absolute; /* 絶対配置 */
    top: 5px;
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    font-size: 1.2em;
    color: #675950;
    font-weight: bold;
    text-align: center; /* テキストの中央揃え */
    width: 100%; /* 幅を100%に */
}

/*ブログ*/

#blog  { padding:0 0 30px 0;}
.tags { padding:0 0 25px}

.blog-btn { width:30%; margin:25px 35% 40px 35%;}
.blog-btn p { text-align:center; padding:20px;}

.blog-btn p a { text-decoration:none; font-size:24px;}
.blog-btn p a:link { color: #fff; }
.blog-btn p a:visited { color: #fff; }
.blog-btn p a:hover { color: #fff; }
.blog-btn p a:active { color: #fff; }


#kamiomoi #blog { background-color:#fcf5ff;}

#kamiomoi ul.horizontal_scroll li img {  box-shadow: 0 0 12px #d7a1ee; margin:12px 0 0 0;}  


#hitorishizuka #blog { background-color:#ecf6f1;}

#hitorishizuka ul.horizontal_scroll li img {  box-shadow: 0 0 12px #77d8a4; margin:12px 0 0 0;}  



/*横スクロース*/

ul.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex; }

ul.horizontal_scroll li { margin:0 15px;}  

.horizontal_scroll li p { font-size:24px; padding:10px 0;}
.horizontal_scroll li p a { font-size:24px;}

.tags p { text-decoration:none; font-size:24px;}
.tags p a { text-decoration:none; font-size:24px;}
.tags p a:link { color: #fff; }
.tags p a:visited { color: #fff; }
.tags p a:hover { color: #fff; }
.tags p a:active { color: #fff; }

.post_tag {font-size:22px; text-align:left;}

#kamiomoi .post_tag a { text-decoration:none; font-size:22px; text-align:left;}
#kamiomoi .post_tag a:link { color: #d7a1ee; }
#kamiomoi .post_tag a:visited { color: #d7a1ee; }
#kamiomoi .post_tag a:hover { color: #d7a1ee; }
#kamiomoi .post_tag a:active { color: #d7a1ee; }


#hitorishizuka .post_tag a { text-decoration:none; font-size:22px; text-align:left;}
#hitorishizuka .post_tag a:link { color: #77d8a4; }
#hitorishizuka .post_tag a:visited { color: #77d8a4; }
#hitorishizuka .post_tag a:hover { color: #77d8a4; }
#hitorishizuka .post_tag a:active { color: #77d8a4; }



/*タグをまるっこく*/

#kamiomoi .tags p{
background-color:#d7a1ee; /* 背景をブラウンで塗る */

color:#fff; /*文字を白くする */

/*

以下は角丸の指定です。

本来はborder-radiusだけで良いのですが

ブラウザによって表記が一部異なるため

以下のように指定します。

10pxは角丸の半径です。

*/

border-radius: 30px; 

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

float:left;
margin:4px 12px;
padding:10px 21px;
}


#hitorishizuka .tags p{
background-color:#77d8a4; /* 背景をブラウンで塗る */

color:#fff; /*文字を白くする */

/*

以下は角丸の指定です。

本来はborder-radiusだけで良いのですが

ブラウザによって表記が一部異なるため

以下のように指定します。

10pxは角丸の半径です。

*/

border-radius: 30px; 

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

float:left;
margin:4px 12px;
padding:10px 21px;
}



/*記事一覧*/

#kamiomoi .blog-btn
{
background-color:#d7a1ee; /* 背景をブラウンで塗る */

color:#fff; /*文字を白くする */

/*

以下は角丸の指定です。

本来はborder-radiusだけで良いのですが

ブラウザによって表記が一部異なるため

以下のように指定します。

10pxは角丸の半径です。

*/

border-radius: 50px; 

-webkit-border-radius: 50px;

-moz-border-radius: 50px;
}


#hitorishizuka .blog-btn
{
background-color:#77d8a4; /* 背景をブラウンで塗る */

color:#fff; /*文字を白くする */

/*

以下は角丸の指定です。

本来はborder-radiusだけで良いのですが

ブラウザによって表記が一部異なるため

以下のように指定します。

10pxは角丸の半径です。

*/

border-radius: 50px; 

-webkit-border-radius: 50px;

-moz-border-radius: 50px;
}


/*スタッフ*/

#staff { width:98%; margin:0 1%;}
.staff-box-l { float:left; width:50%}
.staff-box-r { float:right; width:50%}
#staff p { text-align:center;}

.katagaki { font-size:22px; padding:0 0 5px 0;}
.namae { font-size:32px;}
.alpha { font-size:16px; color:#787878;}
.inst { padding:10px; text-align:center;}
.inst img { width:7%; }


/*メニュー*/

#menu { padding:0 0 40px 0;}

table{
  width: 80%;
  margin:0 10%;
  border-spacing: 0;
}

#kamiomoi table th{
  border-bottom: solid 2px #f496b5;
  padding: 10px 0;
  font-size:20px;
  color:#484848;
}

#kamiomoi table td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
  font-size:20px;
  color:#484848;
}


#hitorishizuka table th{
  border-bottom: solid 2px #62929f;
  padding: 10px 0;
  font-size:20px;
  color:#484848;
}

#hitorishizuka table td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
  font-size:20px;
  color:#484848;
}


/*ゆとり*/

.yutori{ background-color:#fff8f5; padding:0 0 40px 0;}


/* 追加 グーグルマップ */
.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%;
}


/*フッター*/

.logo { padding:35px 0 18px;}
.fb { padding:30px 0 40px;}
.footer p { text-align:center;
	}

#kamiomoi .footer { background-color:#d3eaa4;
	text-align:center;}
	
	
#kamiomoi .footer a { color:#8ec323; font-weight:bold;
	}
	
#hitorishizuka .footer { background-color:#f4f2ec;
	text-align:center;}
	
#hitorishizuka .footer a { color:#8e887a; font-weight:bold;
	}
	
#hitorishizuka .copy { color:#848484; padding:0 0 500px; text-align:center;}

#kamiomoi .copy { color:#848484; padding:0 0 500px; text-align:center;}


		
/*電話ボタン*/

#fixed_btn
{
  position: fixed;
  bottom: 110px; 
  left: 70%;
  width:28%;
  padding: 6px 10px 20px;
  z-index: 9;
}

/*固定ボトムナビ*/


#kamiomoi #menu-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background-color: #e59dc3;
  border-top: 1px solid #d6cde0;
}
#kamiomoi #menu-bar .icon {
  display: block;
  max-width: 50px;
  margin-left: auto;
  margin-right: auto;
}
#kamiomoi #menu-bar .active {
  background-color: #62929f;
}
#kamiomoi #menu-bar > .link {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 5px;
  border-right: 1px solid #d6cde0;
}
#kamiomoi #menu-bar > .link:last-of-type {
  border-right: none;
}


#hitorishizuka #menu-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background-color: #62929f;
  border-top: 1px solid #d6cde0;
}
#hitorishizuka #menu-bar .icon {
  display: block;
  max-width: 50px;
  margin-left: auto;
  margin-right: auto;
}
#hitorishizuka #menu-bar .active {
  background-color: #e59dc3;
}
#hitorishizuka #menu-bar > .link {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 5px;
  border-right: 1px solid #d6cde0;
}
#hitorishizuka #menu-bar > .link:last-of-type {
  border-right: none;
}


#top-bg #menu-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background-color: #e59dc3;
  border-top: 1px solid #d6cde0;
}
#top-bg #menu-bar .icon {
  display: block;
  max-width: 50px;
  margin-left: auto;
  margin-right: auto;
}
#top-bg #menu-bar .active {
  background-color: #62929f;
}
#top-bg #menu-bar > .link {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 5px;
  border-right: 1px solid #d6cde0;
}
#top-bg #menu-bar > .link:last-of-type {
  border-right: none;
}


/* スライドする要素 */
.content {
  width: 300px;
  height: 300px;
}
.content:nth-child(1) {
  width: 300px;
  height: 300px;
}
.content:nth-child(2) {
  width: 300px;
  height: 300px;
}
.content:nth-child(3) {
  width: 300px;
  height: 300px;
}
.content:nth-child(4) {
  width: 300px;
  height: 300px;
}

.content:nth-child(5) {
  width: 300px;
  height: 300px;
}

.content:nth-child(6) {
  width: 300px;
  height: 300px;
}

.content:nth-child(7) {
  width: 300px;
  height: 300px;
}

.content:nth-child(8) {
  width: 300px;
  height: 300px;
}

/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 300px;
 /* margin-bottom: 100px;*/
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 45s infinite linear 1s both;
  animation: loop-slide 45s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}