@charset "UTF-8";
/* CSS Document */

/* icomoon */
@font-face {
  font-family: 'icomoon';
  src:  url('https://d2j57bp7wdztc7.cloudfront.net/pages/web_font/icomoon.eot?md06yz');
  src:  url('https://d2j57bp7wdztc7.cloudfront.net/pages/web_font/icomoon.eot?md06yz#iefix') format('embedded-opentype'),
url('https://d2j57bp7wdztc7.cloudfront.net/pages/web_font/icomoon.ttf?md06yz') format('truetype'),
url('https://d2j57bp7wdztc7.cloudfront.net/pages/web_font/icomoon.woff?md06yz') format('woff'),
url('../svg/icomoon7719.svg?md06yz#icomoon') format('svg');
  font-weight: normal;font-style: normal;}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
.icon-location:before {content: "\f060";}
.icon-triangle-down:before {content: "\f05b";}
.icon-triangle-left:before {content: "\f044";}
.icon-triangle-right:before {content: "\f05a";}
.icon-triangle-up:before {content: "\f0aa";}

html {-webkit-text-size-adjust: none;  -webkit-font-smoothing: aliased; margin:0;font-size: 62.5%;font-family: 'Sawarabi Mincho', sans-serif;}
body {margin: 0 auto; width:100%; padding: 0;font-size: 1.8rem;background:#fff; line-height: 160%;color:#333;}
section, article, header, footer, div{ width: 100%; margin:0 auto; padding:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

ul{margin:0; padding:0; list-style-type:none;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;}
p{margin:16px 0; padding:0;line-height: 160%;} 
.ms-font{font-size:1.5rem; line-height: 140%;}
.ss-font{font-size:1.3rem; line-height: 140%;}
.ll-font{font-size:24px;}
a{text-decoration:none;display:block;}
a:link{text-decoration:none;display:block;}
a:hover{text-decoration:none;}
a:hover img{opacity: 0.8;}
a:visited{text-decoration:none;}
a.in{display: inline; text-decoration: underline; color: white;}
a.in-b{display: inline; text-decoration: underline; color:#333;}
hr{margin:40px 0;}
img{ width:100%; height:auto; display:block; margin:0; padding:0; border:0px; border-radius: 10px;}
.clearfix:after { /*floatの解除*/
display:block;clear:both;height:0px;visibility:hidden;content:".";}
.clearfix {min-height: 1px; }
* html .clearfix {height: 1px; height: auto; overflow: hidden;}

.clear{clear: both;}
.clear_r{clear:right;}
.center{margin-left:auto;margin-right:auto;}
.relative{position:relative;}
.float_l{float: left;}
.float_r{float:right;}

H1{font-size:2.4rem; line-height:150%; font-weight:normal;}
H2{font-size:2.6rem;line-height:150%; font-weight:normal; }

/*header*/
header{ background:#000; color:#FFF; width:100%; height:144px; position:relative;}

.new_menu{color:#FFF; width:100%;line-height: 120%!important; margin-top:8px; display: table; table-layout: fixed; height: 60px;}
.new_menu li{ font-size:12.7px; display: table-cell;width:16%; text-align: center; position: relative;}
.new_menu li a{display: block;}
.new_menu img{width:50px!important; height:auto; margin:0 auto; margin-bottom: 5px;}
.new_menu li img a{width:50px!important; height:auto; margin:0 auto; margin-bottom: 5px;}
.new_menu a{color: #fff;}
.new_menu li:hover > a{background: #000;color: #e0dc62;}
.new_menu li:hover .dropdown-content li{visibility: visible;height: 200%;}

.dropdown-content{list-style: none;position: absolute;visibility: collapse; width:200%;top: 100%;margin: 0 0; padding: 0;z-index: 300;}
.dropdown-content li{width: 200%!important;display: block; color: #fff;-moz-transition: .2s;-webkit-transition: .2s; -o-transition: .2s;-ms-transition: .2s;transition: .2s;line-height: 40px;}
.dropdown-content li.zurasu{left:-100%;}
.dropdown-content li:nth-child(even) a{padding: 13px 15px;background: #696969;text-align: center; font-size: 16px!important;}
.dropdown-content li:nth-child(odd) a{padding: 13px 15px;background: #333333;text-align: center;font-size: 16px!important;}
.dropdown-content li:first-child{ margin-top: 0;}

header H1{font-size:12px; margin:4px 0 0 20px;}
.logo{width:40%; max-width:180px; margin: 0 0 0 5px; padding-top: 8px;}
.bt-lang{ color:#FFF; font-size:12px; position:absolute; width:50%; top:16px; right:10px;}
.bt-lang th{width:49%; height:30px; line-height:30px; }
.bt-lang th.eng{ border: none; }
.bt-lang th.ag{ border-left: 1px #fff solid; }
.bt-lang a{ color:#FFF;}
.bt-lang th.eng a{ background:#960d4b; letter-spacing:0.1em; font-size: 120%;}
.bt-lang span{font-size:18px;vertical-align:-3px;}
.bt-lang a:hover{background:DimGray;} 
.bt-lang th.eng a:hover{background:#B32F65;} 

a.ky, a.lean_more{background:#987D10;} 
a.tk{background:DarkSlateGray}
a.os{background:#716E28;}
a.bk{background:black;}
a.option_1{background:#999933;}
a.option_2{background:#669966;}

/*header for PC*/
@media screen and (min-width: 960px) {
header{height:84px;}
.newmenu{width:380px; position:absolute; top:0; right:360px; margin-top:0; font-size:12px;}
.new_menu li{width:60px;}
.new_menu img{width:60px; height:auto; margin:0 auto 8px; }
.dropdown-content{margin: 5px 0 0;}
.bt-lang{ color:#FFF; font-size:12px; position:absolute; width:300px; top:20px; right:10px;}
	.logo{width:100%; margin-left:20px;}}


.comment{background-color:DarkSlateGray;padding:10px; margin: 0;}
.comment p{margin: 0; font-size: 2rem; color:#fff; line-height: 120%; text-align: center; }


/*基本のパディング*/
.inner{padding:20px;padding-bottom: 50px; }
.page-in{ margin-top: 40px; background: rgba(255,255,255,0.83); padding:15px 25px; -webkit-border-radius: 12px; -moz-border-radius: 12px;border-radius: 12px;}

@media screen and (min-width:760px) {
.inner{padding: 20px 5%; max-width:1600px;}
.page-in{padding:25px 50px;}}

/*左右に振り分け*/
.wrapper{width:100%; padding:8px 0; margin: 30px auto;}
.wrapper img{margin:16px 0; }
.wrapper ol{margin: 0; padding: 0; padding-left: 20px;}
.wrapper p.ss-font{margin:10px 0; line-height:100%; }

@media screen and (min-width:960px)  {
.wrapper{width:800px;}
.wrapper .left.hrf-tab{float:left; width:48%;}
.wrapper .right.hrf-tab{float:right; width:48%; margin-left:4%;}
}
@media screen and (min-width:1280px)  {	
.wrapper{width:100%;}
.wrapper .left{float:left; width:48%;}
.wrapper .left.small{width:40%;}
.wrapper .right{float:right; width:48%; margin-left:4%;}
.wrapper .right.large{width: 56%;}
}

#t-main {width:100%;height:auto;position: relative; background: #000;}
#t-main img.main-ph{width: 100%;height: auto; border-radius:0;}
#t-main img.badge-top{width:110px; height:auto; position:absolute; top:-30%; left:0; right:0; bottom:0;margin:auto; }
#t-main p.over-mid{width:90%; text-align:center; color:#FFF; font-size:20px; text-shadow:2px 2px 5px #000; line-height:110%; position:absolute; top:50%; left:0; right:0; bottom:0;margin:auto;}

#t-main100 {width:100%;height:auto;position: relative; background: #000;}
#t-main100 img.main-ph{width: 100%;height: auto; border-radius:0;}
#t-main100 img.badge-top{width:110px; height:auto; position:absolute; top:-30%; left:0; right:0; bottom:0;margin:auto; }

@media screen and (min-width:600px) {
#t-main {height:500px; max-width:1400px; overflow: hidden; }	
#t-main img.main-ph {position: absolute; width: auto; height: auto;min-width: 100%;min-height: 100%;left: 50%;top: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
#t-main p{top: 40%; line-height:130%;}
#t-main img.badge-top{width:160px; height:auto; }
#t-main img.left{top:20px; left:20px; margin:0;}
}
@media screen and (min-width: 960px) {
#t-main p.over-mid{font-size:28px;}}

#t-main100 {width:100%;height:auto;position: relative; background: #000;}
#t-main100 img.main-ph{width: 100%;height: auto; border-radius:0;}

img.badge{width:70px; height:auto; position:absolute; bottom:10px; left:10px; margin:0;}
@media screen and (min-width:960px)  {img.badge{width:110px; bottom:18px; left:18px;}}

#t-expect{margin-top:16px;max-width: 1200px;}
#t-expect .wrapper a{color:#FFF; }
#t-expect .award{background:#1B2C0C; border-radius: 10px;padding:4px 12px; margin-bottom: 16px;}
#t-expect .award .mark{width: 100px; height: auto; float: left; margin: 6px 10px 0 0; }
#t-expect .award p{font-size:1.6rem;}


.tea-bg{ background:url(../jpg/japanesetea.jpg) repeat;}
.bg-cream{background-color:antiquewhite;}
.kimono-bg{ background:url(../png/bg-teacher.png) repeat;}
.shodo-bg{background: url(../jpg/bg-calligraph.jpg) repeat;}
.furoshiki-bg{background: url(../jpg/bg-cloth.jpg) repeat;}
.origami-bg{background: url(../jpg/bg-origami.jpg) repeat;}
.dark-gr-bg{ color: #FFF; background: url(../png/contents-bg-2.png) repeat;}
.dark-gr-bg a{color: #fff; text-decoration: underline;}

.wrap-tbl .wrap-cell{width:100%;}
.video{position: relative; padding-top: 56.25%; width:100%;}
.video iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important; }
@media screen and (min-width: 960px) {
.wrap-tbl{display: table;width:100%;}
.wrap-tbl .wrap-cell{display: table-cell;width:50%; padding: 0 1%; vertical-align:top;overflow:hidden;}
}

#t-2nd{padding-top: 40px; position: relative;}
img.tripadvisor{width:110px; height:auto; position:absolute; top: -50px;left:0; right:0; margin:auto; }
p.tripad{width: auto; margin: 0 auto; text-align: center; padding-bottom: 30px;}

#t-3rd{color: #FFF; background: url(../png/contents-bg.png) repeat;}
img.goto{width: 100%; max-width: 700px; margin: 40px auto 10px auto; border-radius: 0;}
p.kakomi{border: dotted 1px #666; padding: 20px; display: inline-block;}
br.pc{display: none;}
br.mo{display:inline;}
a.access{color:#541C3A; border: 1px dashed #541C3A; width: auto; display: inline-block; padding: 5px 16px; margin: 14px 0;}
.access-btn{width: 90%;  text-align: center;}
.access-btn a{display: inline-block; background:#111; padding: 20px 40px; color:#fff; font-size: 120%; width: auto; text-align: center;margin:12px auto 30px auto;border-radius: 6px;}
img.garden{width: 100%; paddin: 0;}
@media screen and (min-width:760px) {br.pc{display:inline;} br.mo{display: none;}
}
@media screen and (min-width: 960px) {
#t-2nd .t2-text{float:right; width: 45%; margin: 0; padding: 0;}
#t-2nd h1{margin-top:0;} 
img.garden{width: 760px; margin-right: 16px; margin-bottom: 16px; float: left;}
.big{float: left; width: 50%; margin:0 40px 20px 0; }
}

#subscribe .wrapper{ border-top:#666 dashed 1px; margin-top:16px;}
#subscribe ol{margin: 10px 0 10px 26px; padding: 0; }
#subscribe ol li{margin:10px 0; }

#subscribe ul.learn-bt li{ float:left; margin-right:3%; width:30%; }
#subscribe ul.learn-bt li a{color:#FFF; font-size:15px; text-align:center;padding:6px 0; border-radius: 12px;}
ul.learn-bt_new li{ width:100%; margin-top: 16px; }
ul.learn-bt_new li a{color:#FFF; font-size:2.3rem; text-align:center;padding:14px 0; border-radius: 10px;}

#description{padding: 25px 0;}

ul.photo-3{ width:100%; } 
ul.photo-3 li{ width:100%; padding:0; margin:0; margin-bottom:16px;}
@media screen and (min-width: 960px) {ul.photo-3 li{ width:32%; padding-right: 1%; float:left;} ul.photo-3 img{border-radius: 0;}}
	
.simple-title{background:#333; color: #fff; width:100%; padding:10px 20px; height:auto; font-size:16px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;  border-radius: 10px; margin-top:30px;}
.obo{ padding: 10px; padding-bottom:20px; border:2px #333 solid; text-align: center; color: #333; border-radius: 6px; margin:30px 0;}

ul.bt_locations li{ width:80%; margin: 16px auto 0 auto; }
ul.bt_locations li a{color:#FFF; font-size:2.3rem; text-align:center; line-height:110%; padding:18px 10px; border-radius: 10px; text-decoration: none;}

/*review*/
#reviews h2{margin:0; padding:0; line-height:110%;}
.review-pic{ width:70px; height:auto;}
.review-star{width: calc(100% - 70px);}
.review-star img{ width:140px; height:auto;}
@media screen and (min-width:760px) {
#reviews .left{ width: calc(100% - 350px);}
#reviews .right{width:250px; margin-left:10px;}
}

/*topics*/
.topics{ display:none; margin: 10px auto 0 auto; padding:50px; background:#FFF;}
.topics p{ font-size:11px;}
.topics p.titles{ color:#693; font-size:13px; font-weight:bold;}
@media screen and (min-width:760px) {.topics{ display:block;}}

/*booking*/
#booking-fixed {position: fixed; bottom:0; right:0; width:100%; height:80px;  z-index:2000;}
#booking-fixed a{width:100%; height:100%;color:#FFF; font-size:17px; text-align:center; padding-top:16px;line-height:110%;}
#booking-fixed a.ky{float:left; width:33%;} 
#booking-fixed a.tk{float:left; width:34%;}
#booking-fixed a.os{float:right;width:33%; }
#booking-fixed a:hover{background:#990707;} 
#booking-fixed .ss{font-size:13px;} #booking-fixed em{font-size:14px;}
#booking-fixed a.current_p{float:left; width:33%; background:#990707;}
#booking-fixed a.current_p:hover{background: #cc0000!important;}
#booking-fixed a.option_1{float:left;width:34%;} #booking-fixed a.option_2{float:right;width:33%;}
#booking-fixed a.option_1:hover,#booking-fixed a.option_2:hover{background: #993333;}
@media screen and (min-width: 960px) {#booking-fixed{width:500px;}}

/*contact*/
#contact-fixed {position: fixed; bottom:0; right:0; width:100%; height:80px;  z-index:2000; background:maroon;color:#FFF; font-size:15px; text-align:center; padding:16px;line-height:130%;}
@media screen and (min-width: 960px) {#contact-fixed{width:500px;}}

/*HOME-page*/
#home-page { color: #FFF; background: url(../png/contents-bg.png) repeat;}
#home-page H1{line-height:110%; margin:16px 0;}
#home-page H2{margin: 16px 0; line-height:130%;}
#home-page H3{margin: 30px 0;}
#home-page a.more-bt{text-align:center;display: inline-block; padding: 12px 20px; border-radius: 6px;margin-bottom: 10px;color: darkred; background:#DED7C3;}
#home-page a.more-bt:hover{text-decoration:underline;}

/*GROUP-page*/
#group-page { background:#FFF; color:#333;}
#group-page .wrapper{padding: 10px 0;}
#group-page .wrapper a{ padding: 10px; border:1px #666 solid; text-align: center; color: #333; -webkit-border-radius: 6px; -moz-border-radius: 6px;border-radius: 6px; }


/*RECRUIT-page*/
#recruit-page { background:#FFF; color:#333;}
table.kyujin td{ border-bottom:1px solid #666; padding:10px;} table.kyujin th{ border-bottom:1px solid #666;}
.re-title{text-align:center; font-size:20px;}

	
/*OLD about-page*/
.gold {color: #B29700;}
#abot-2nd {background:#000; text-align:center; margin:0;padding:16px 60px; }
#about-2nd h2{text-align:center;}
#about-3rd ul{ width:100%; color:#FFF; max-width:1200px; margin:0 auto; padding:0;}
#about-3rd li{ width:100%; padding:0; margin:0 16px 16px 0; float:left;}
#about-3rd h3{color:#FFF;}
#about-3rd{background:#000; margin:0;padding:16px 60px; color:#FFF;}
#about-3rd img{width:100%;}
#about-3rd .tx{width:100%; line-height:200%; padding-top:16px;}
.gold {color: #B29700;}



/*footer*/
footer { background: #000; color: #FFF;padding:30px;position: relative; text-align:left;}
footer H2{line-height:130%}
footer p{ padding:0;line-height:110%; font-size: 1.4rem;}
footer span{padding-right:12px;}
.map-wrapper{text-align:center; color:#FFF; max-width:1600px;}
.map-wrapper a{display: inline-block; color:#FFF;}
.map-txt{margin-bottom: 16px;}
.map-txt p{font-size: 1.8rem;}
.map iframe {width: 100%; height:360px;}
p.dot-line{border-bottom:1px dotted #FFF;font-size: 2.2rem;}
footer a.blog{padding:2px 5px; color:#FFF; border:1px solid #FFF; text-align:center; display:inline;}

@media screen and (min-width:760px) {
footer br{display:none;}} 

@media screen and (min-width: 960px) {
p.dot-line{display: inline-block; margin: 0 16px;}
}

/*ABOUT access-page*/
#access{background:#FFF; }
#access H1{ font-size:3rem;line-height:110%; margin:30px 0; text-align:center;}
.ab-title{position: relative;}
.ab-title p{position:absolute; top:10px; left: 36px; font-size: 3rem;}
.ab-title p.wh{color:#FFF; text-shadow: 2px 2px 5px #000;}
#access .map-wrapper{ color:#333;}
#access .map-wrapper a{color:#333;}
#access .map-txt{color:#333;}
#access p.dot-line{border-bottom:1px dotted #333;}
@media screen and (min-width:760px) {#access H1{ font-size:24px;}.ab-title p{font-size: 24px;}}


/*for iPad*/
@media screen and (min-width:760px) {
/*電話番号リンク無効*/
a[href^="tel:"] {pointer-events: none;}
}


/*　for PC*/
@media screen and (min-width: 960px) {
#description img.fl{float:right; width: 50%; padding: 10px; padding-top: 0;}
.img-float{float:right; margin:0 0 16px 20px; width: 50%; max-width:500px;} 
.height_adjust{margin-top: 50px;}	
}