/*

Theme Name: bodyclick
Theme URI: http://4d109.com
Author: AMOAMO

*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
@import url('https://fonts.googleapis.com/css?family=Oswald');

/* リセット
================================================== */

* {margin: 0; padding: 0;}
.pc_no{display:none;}

*::after,
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box;	box-sizing: border-box;}


ul{padding: 0; margin: 0;}
li{padding: 0; margin: 0; list-style-type:none;}
img{border:none;}


/* リンク・マージン
================================================== */

a:link{color: #666; text-decoration: none;}
a:visited{color: #666; text-decoration: none;}
a:active{color: #666; text-decoration: none;}
a:hover{color: #000; text-decoration: none;}
a:hover *{filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}


/* 画像のみ中央 */

img.center_title{
	display: block;
 	margin-left: auto;
 	margin-right: auto;
}


.txt_center{text-align:center;}
.w-txt_center{text-align:center;}
.txt_left{text-align:left!important;}

.fl_left{float: left;}
.fl_right{float: right;}
.clear{clear: both;}
.fc_bold{ font-weight: bold; }

.br:before {
	content: "\A" ;
	white-space: pre ;
}
.ls5{letter-spacing: 0.5em;}


/* メイン
================================================== */

body {
	font-family: -apple-system, Arial, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	color: #333;
	font-size: 15px;
	line-height: 1.7em;
}
/* スライドWP
================================================== */
#top_wp{
	width: 100%;	
	max-width: 1100px;	
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
img.logo{
	position:absolute;
	z-index:100;
	top: 250px;
	width: 300px;
}
.text {
	float:right;
	width: 500px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
}
.text p{
	margin: 30px;
	font-size: 18px;
	letter-spacing: 0.1em;
	line-height: 1.8em;
}
img.topimg{
	float:left;
	width:400px;
}
/* スライド
================================================== */
.slider_css {
	float:right;
	width:950px;
  height: 570px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.slider_css ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider_css ul li {
  background-size: cover;
  width: 100%;
  height: 570px;
  position: absolute;
  top: 0;
  left: 0;
  animation-iteration-count: infinite;
  animation-duration: 24s;
}
.slider_css ul li:nth-child(1) {
  background-image: url("images/topimg01.jpg");
  animation-name: slider-zoomin;
  animation-delay: -3s;
}
.slider_css ul li:nth-child(2) {
  background-image: url("images/topimg02.jpg");
  animation-name: slider-zoomout;
  opacity: 0;
  animation-delay: 5s;
}
.slider_css ul li:nth-child(3) {
  background-image: url("images/topimg03.jpg");
  animation-name: slider-zoomin;
  opacity: 0;
  animation-delay: 13s;
}

.slider_css ul li img {
  width: 130%;
}
@media screen and (max-width: 767px) {
  .slider_css {
	float:none;
	width:auto;
    height: 300px;
  }
  .slider_css ul li {
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 480px) {
  .slider_css {
    height: 200px;
  }
}

@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20.83% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  20.83% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* TOPページ
================================================== */

#page_wp{
	background: url("images/side_logo.png") no-repeat right 3% top 15%;
	background-attachment: fixed;
}
.contents_reverse{
	position: relative;
	overflow: hidden;
	margin: 5% 0 3%;
	padding: 0;
}
.contents_reverse:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 55%;
	margin: 2% -10% 0;
	background: #ededed;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	z-index: -1;
}
.contents_reverse:after {
	content: '';
	position: absolute;
	top: 20%;
	left: 0;
	width: 120%;
	height: 30%;
	margin: 0 -10% 0;
	background: #eef281;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	transform: rotate(7deg);
	z-index: -2;
}
.contents_double{
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 10px 0;
}
.contents_double:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 75%;
	margin: 2% -10% 0;
	background: #434343;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	z-index: -1;
}
.contents_double:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 75%;
	margin: 2% -10% 0;
	background: #eef281;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	z-index: -2;
}
.contents_inner {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	max-width: 850px;
	height: 100%;
	margin: 0 auto;
	padding: 150px 10px 120px;
	color: #fff;
	text-align: center;
}
.contents_wap{
	clear: both;
	width:90%;
	max-width:1050px;
	margin: 0 auto;
	padding: 40px 0 20px;
}
h2.top_title{
	font-family: 'Oswald', sans-serif;
	text-align:center;
	font-size: 38px;
	font-weight: 400;
	margin-bottom: 20px;
}
.top_l{
	float:left;
	width: 490px;
	margin-top: 50px;
}
.top_r{
	float:right;
	width: 490px;
	margin-top: 50px;
}
.top_l h3,
.top_r h3{
	font-size: 18px;
	margin-bottom: 20px;
	letter-spacing: 0.2em;
	color: #999;
}
dl.about dt {
	float:left;
	clear:left;
	width: 5.5em;
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
dl.about dd {
	padding-left: 6em;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}
dl.about dd ul li{
	list-style-type: decimal;
	line-height: 1.5em;
	margin-bottom: 5px;
	margin-left: 19px;
}

dl.list {
	margin: 50px 20px 0;
	text-align:left;
	font-size: 15px;
}
dl.list dt {
	float:left;
	clear:left;
	width:8em;
	margin-bottom: 13px;
	padding-bottom: 13px;
	padding-left: 10px;
}
dl.list dd {
	padding-left: 8.5em;
	margin-bottom: 13px;
	padding-bottom: 13px;
	border-bottom: 1px solid rgba(51,51,51,1);
    box-shadow: 0 1px 0 rgba(85,85,85,1);

}
dl.list dd a{color: #fff;}
dl.list dd a:hover{	color:#eef281;}
.square_btn{
	margin-top: 20px;
    position: relative;
    display: inline-block;
    padding: 0.5em 2em;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: .4s;
  }

.square_btn:hover {
    background: #eef281;
    color: #000!important;
}

/*　店舗案内
================================================== */
.back_gry{
	clear:both;
	margin: 50px auto;
	padding: 50px 0;
	position:relative;
	overflow: hidden;
}
.back_gry:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #eee;
	z-index:-1;
}
p.s_title{
	font-size: 18px;
	margin-bottom: 20px;
	letter-spacing: 0.05em;
	text-align:center;
	font-weight:bold;
	color: #999;
}
.tenpo{
	display:inline-block;
	width:47%;
	margin:1.5% 1%;
	padding: 30px;
	background: #fbfbfb;
	vertical-align:top;
}
.tenpo img{
	width:100%;
}
.title_bx {
	position:relative;
	margin-top: 10px;
}
.title_bx a {
	display:block;
	position:absolute;
	line-height:1;
	width:100px;
	right: 0;
	bottom:3px;
	text-align:center;
	background:#fff;
	font-size:14px;
	padding:6px 0;
	color:#63aac8;
	border: 1px solid #6eb5d3;
	letter-spacing: 0.05em;
	transition: .4s;
}
.title_bx a:hover {
	background:#6eb5d3;
	color:#fff;
}
.tenpo h4{
	font-size: 18px;
	margin-bottom: 5px;
}
.tenpo ul li{
	letter-spacing: 0.05em;
}
.tenpo ul li.tel{
	background: url("images/tel_icon") no-repeat left top;
	background-size: 18px;
	padding: 0 0 3px 22px;
	display:inline;
	margin-right: 15px;
}
.tenpo ul li.time{
	background: url("images/time_icon") no-repeat left top;
	background-size: 18px;
	padding: 0 0 3px 22px;
	display:inline;
}
.t_map{
	width: 100%;
	height: 250px;
	margin-top: 15px;
}
.t_map iframe{
	width: 100%;
	height: 100%;
}
.pillow_l{
	width:500px;
	float:left;
	text-align:center;
}
.pillow_l h2{
	font-size: 26px;
	margin-bottom: 15px;
}
.pillow_l p{
	text-align:left;
	line-height: 1.7em;
}
.pillow_l img{
	margin-bottom: 10px;
	width:100%;
}
.pillow_r{
	width:500px;
	float:right;
}
.pillow_r img{
	margin-top: 40px;
	width:100%;
}
.blue_btn{
	margin: 30px 10px 0;
    position: relative;
    display: inline-block;
    padding: 0.5em 2em;
    text-decoration: none;
	border: 1px solid #6eb5d3;
    color: #63aac8!important;
    background: #fff;
    transition: .4s;
  }

.blue_btn:hover {
    background:#6eb5d3;
    color: #fff!important;
}
/*　フッター
================================================== */
.footer{
	color: #333;
	text-align:center;
	padding: 0 0 20px;
	font-size: 10px;
}

/*　IEブラウザ用 */

.clearfix:after{
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix{
  min-height: 1px;
}


* html .clearfix{
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}




/*　以下ブログテーマのスタイル
================================================== */
.contents_bk{
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.contents_bk:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 60%;
	margin: 0 -10% 0;
	background: #ededed;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	z-index: -1;
}
.contents_bk:after {
	content: '';
	position: absolute;
	top: 30%;
	left: 0;
	width: 120%;
	height: 25%;
	margin: 0 -10% 0;
	background: #eef281;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	transform: rotate(7deg);
	z-index: -2;
}
#page_head{
	clear: both;
	width:90%;
	max-width:1050px;
	margin: 30px auto 0;
}
.contentspage_wap{
	clear: both;
	width:90%;
	max-width:1050px;
	margin: 0 auto;
	padding: 30px 0 150px;
}
img.news_logo{
	width: 300px;
}
#page_content {
	float: left;
	width: 730px;
	margin-top:30px;
}

#page_content p{
	margin-bottom: 15px;
}

#sidebar{
	float: right;
	width: 230px;
	margin-top:30px;
}

h3.widget_title{
	background:linear-gradient(#fafafa,#f7f6f5);
	border-radius: 3px 3px 0 0 / 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0 / 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0 / 3px 3px 0 0;
	padding: 7px 15px;
	font-size: 14px;
	border-top: 1px solid #eee;
		border-right: 1px solid #eee;
		border-left: 1px solid #eee;	
}
#sidebar .widget-area ul{
	margin-bottom: 1em;
	border: 1px solid #eee;	
	border-radius:  0 0 3px 3px / 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px / 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px / 0 0 3px 3px;
	padding: 1em;
	background:#fff;
}
#sidebar .widget-area ul li{
	margin-bottom: 0.5em;
}
#sidebar .widget-area ul li a{
  	line-height: 1.4em;
	position: relative;
	padding-left: 15px;
	font-size: 13px;
}
#sidebar .widget-area ul li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;        /*top right bottom を透明化 */ 
	border-left: 5px solid #999;
}

h2.newstop_title{
	font-size: 16px;
	margin-bottom: 50px;
	letter-spacing: 0.03em;
}
h2.newstop_title span{
	font-family: 'Oswald', sans-serif;
	font-size: 32px;
	font-weight: 400;
	margin-right: 15px;
}
/*　お知らせ
================================================== */

ul li.news_list{
	margin-bottom: 1em;
}
ul li.news_list p.news_title a {
  position: relative;
  display: block;
  padding: 7px 25px 10px 10px;
  border-bottom: 1px solid #ccc;
	font-size: 16px;
	margin:0!important;
}

ul li.news_list p.news_title a::after {
  position: absolute;
  top: 50%;
  right: 15px;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ar_cnt{
	clear: both;
}

.ar_cnt .date{
	margin:2px 0 3px!important;
	padding-left: 10px;
	font-size: 13px;
}
  
.tag{
	margin: 0 1em;
	padding: 0.3em 0.7em;
	font-size: 12px;
	color:#fff;
	background: #434343;
}

h3.news_title{
	text-shadow: 0 0 5px white;
	border-left: solid 7px #eef281;
	background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 3px,#eee 3px, #eee 5px);
	background: repeating-linear-gradient(-45deg, #fff, #fff 3px,#eee 3px, #eee 5px);
	margin-bottom: 10px;
	padding: 10px 15px 10px;
	font-size: 18px;
	border-radius: 0 3px 3px 0;
}

.column_in{
	clear:both;
	padding: 10px 0 50px;
}
.column_in p{
	margin: 5px 10px 20px;
}
.column_in h3{
	letter-spacing: 0.05em;
	padding: 0.5em 1em;
	background:linear-gradient(#fafafa,#f7f6f5);
	font-size: 16px;
	font-weight:normal;
	margin: 40px 0 10px;
}
.column_in h4{
	border-left: solid 5px #e62334;
	padding: 0 1em;
	margin: 15px 10px 10px;
	font-size: 16px;
}

img[class*="wp-image-"],
img[class*="attachment-"] {
    max-width: 100%;
    height: auto;
}

img.aligncenter {
	clear: both;
	display: block;
	margin: 10px auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 7px 7px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 7px 7px 0;
	display: inline;
}

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


/* ページネーション
================================================== */

ul.post_navigation{
	clear:both;
	width: 500px;
	text-align: center;
	margin: 20px auto;
	padding-top: 20px;
	font-size: 14px;
}

ul.post_navigation li{
	margin: 5px;
	display: inline-block;
		letter-spacing: 0.05em;
}

ul.post_navigation li.left a{
	padding: 0.7em 2em 0.7em 3em;
	text-decoration: none;
	border: 1px solid #434343;
	background:url("images/arw_l.png") #434343 no-repeat left 1.5em center;
	background-size: 13px auto;
	color: #fff!important;
	 -webkit-transition: .3s;
	transition: .3s;
}

ul.post_navigation li.right a{
	padding: 0.7em 3em 0.7em 2em;
	text-decoration: none;
	border: 1px solid #434343;
	background:url("images/arw_r.png") #434343 no-repeat right 1.5em center;
	background-size: 13px auto;
	color: #fff!important;
	 -webkit-transition: .3s;
	transition: .3s;

}

ul.post_navigation li.center a{
	padding: 0.7em 2em 0.7em 2em;
	text-decoration: none;
	border: 1px solid #434343;
	color: #434343!important;
	 -webkit-transition: .3s;
	transition: .3s;
}

ul.post_navigation li.center a:hover{
	background: #434343;
	color: #eef281!important;
	border: 1px solid #434343;
	text-decoration: none;
}

ul.post_navigation li.left a:hover{	
	background:url("images/arw_l_y.png") #434343 no-repeat left 1.5em center;
	background-size: 13px auto;
	color: #eef281!important;
}

ul.post_navigation li.right a:hover{
	background:url("images/arw_r_y.png") #434343 no-repeat right 1.5em center;
	background-size: 13px auto;
	color: #eef281!important;
}