@charset "UTF-8";

* {
		padding:0;
		margin:0;
		font-size:16px; /* 基準のフォントサイズを16pxとする */
    	 -webkit-text-size-adjust: 100%; /* ブラウザ側での自動調整をなしにする */ 
		/*font-weight: 400;*/
	}

html, body {
		height:100%;
	}

/*!
 * html5doctor.com Reset Stylesheet v1.6.1 (https://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (https://richclarkdesign.com)
 * https://cssreset.com
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, font,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
strong {
font-weight:800;
}
big {
    font-size: larger;
}
img {
  box-sizing:border-box;
}

table {
  border-collapse:collapse;
  border:none;
  border-spacing:0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,main,header {
	display: block;
}

/* Pタグ装飾設定 */
img.slant_box_l {
	transform: rotate(-5deg);
}
img.slant_box_r {
	transform: rotate(5deg);
}
img.shadow_box_black {
	box-shadow:3px 3px 10px #000000;
}
img.shadow_box_gray {
	box-shadow:3px 3px 10px #aaaaaa;
}
img.frame_box_gray {
border:solid 2px #aaaaaa;
}
img.frame_box_black {
border:solid 6px #aaaaaa;
}
img.radius_box {
	        border-radius: 15px;
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
}
img.circle_box {
	        border-radius: 50%;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
}

img {
  box-sizing:border-box;
}
/* LINK設定 */
div.extlinkbox {
float:left;
width:100%;
height:auto;
	text-align: left;
}
div.extlinkbox.dispcenter {
	text-align: center;
}
div.extlinkbox.dispright {
	text-align: right;
}
div.extlinkbox img {
	height: 30px;
	margin: 2px 5px 2px 2px;
}

/* スライダー内LINK */
.slidein {
position: absolute;
	top: 10px;
	left:0;
	padding:0 2%;
	z-index: 10;
	width: 100%;
	box-sizing:border-box;
}

/* -------------------------------------
	パララックス
------------------------------------- */

.parallax {
    background: #ffffff;
    width: 100%;
	-webkit-overflow-scrolling: touch;
}

.parallax-inner {
transition: 0s linear;
height: 120%!important;
}

/* -------------------------------------
	PC用スタイル
------------------------------------- */
/* -------------------------------------
	要素
------------------------------------- */

html,body {
  min-width: 1130px;
  background: #c1e4fe;
	background: -webkit-linear-gradient(top, #c1e4fe, #64ace3 100%);
	background: -moz-linear-gradient(top, #c1e4fe, #64ace3 100%);
	background: -o-linear-gradient(top, #c1e4fe, #64ace3 100%);
	background: -ms-linear-gradient(top, #c1e4fe, #64ace3 100%);
	background: linear-gradient(top, #c1e4fe, #64ace3 100%);
	background-attachment:fixed;
	height: auto;
  color: #131331;
  font-family:"游ゴシック Medium","Yu Gothic Medium", "游ゴシック体",YuGothic,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',helvetica, arial,Meiryo,"メイリオ", Osaka,'MS PGothic',"Meiryo UI","ＭＳ Ｐゴシック", sans-serif;
  -webkit-text-size-adjust: none;
	min-width: 0;
	width: auto;
	height: auto;
	position: static;
	/*overflow: auto;*/

}

textarea,
input {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", YuGothic, "Yu Gothic", 游ゴシック体, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

iframe,
img {
  vertical-align: top;
}

ul {
  list-style: none;
}

small {
  font-size: 80%;
}

a {
  color: #d04589;
}

a:hover {
  color: #d04589;
  text-decoration: none;
}

sup {
  vertical-align: top;
  font-size: 65%;
}
sub {
  vertical-align: sub;
  font-size: 65%;
}

iframe {
  max-width: 100%;
}

/*h1, */h2, h3, h4, h5 {
  font-weight: normal;
}


h1 {
    font-family: 'Roboto Condensed', sans-serif;
	font-size: 220%;
	text-align: center;
	color:#303652;
	display: inline-block;
	margin: 60px auto 30px;
	font-weight: 700;
}

h1 img {
   padding: 20px 10px 0 0;
}

h1 img.flip-horizontal {
    transform: scale(-1, 1);
	filter: FlipH; /* for IE */
    -ms-filter: "FlipH";/* for IE */
}

h1 font {
	font-size: 60%;
	display: block;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding-top: 15px;
}
/*
h1 font span {
	font-weight: bold;
}
*/
h2 {
	display: block;
	float: left; /*Box幅がテキストに追従させるために*/
	/*width:386px;*/
	background: url(img/title_left.png) no-repeat left top;
	text-decoration: none;
	padding: 0 0 0 30px;    /*右の背景とかぶらないように*/
	width: auto;
	position: relative;
	left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
	min-width: 250px;

}

h2 font {
	display: block;
	background: url(img/title_right.png) no-repeat right top;
	padding: 0 30px 0 0;/*右の背景とかぶらないように*/
	font-weight: bold;
    font-size: 120%;
    color: #131331;
	line-height: 55px;
	position: relative;
    right: -10px;
}


.titlebk {
	position: relative;
  left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
  float: left;
}

.titlebk_box {
	position: relative; 
  overflow: hidden;
	margin-bottom: 50px;
}

.left {
	float: left;
}

.right {
	float:right;
}


p {
	padding:1em 0 0.8em;
	line-height:1.4em;
   text-justify: inter-ideograph; /* 両端揃えの種類 */
}

.button {
  display: inline-block;
  width: auto;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  background: url(img/woodskin2.gif) repeat;
  color: #fff;
  line-height: 50px;
  font-size: 120%;
  margin: 10px auto;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
  box-shadow:2px 2px 2px rgba(0,0,0, 0.3);
}

#contents a.button p {
	text-align: center;
	/*padding: 13px 110px 0 20px;*/
	padding: 15px;
  position: relative;/*相対配置*/
}

#contents a.button p img {
	padding: 4px 0px 0 10px;
	width: 28%;/*30%;*/
}

/*#contents a.button p:after{
  position: absolute;
  content: '';
  top: 50%;
  right:20px;
  display: block;
  width: 25%;
  height: 50px;
  background-image: url(img/arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  }*/

/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#contents a.button p:after :not(:target){
  right:0px;
  width: 15%;
  }
}*/

.button:hover{
  color: #fff;
	background: url(img/woodskin.gif) repeat;
}

.txt_small {
	font-size: 90%;
	padding: 0.5em 0;
}

.txt_large {
	font-size: 140%;
}

.txt_title {
	font-size: 110%;
	font-weight: bold;
	line-height: 1.5em;
}
.att {
	color: #b10358;
	font-weight: bold;
}

.sm_ttl{
	color: #b10358;
	font-weight:600;
	padding: 0 0 0.8em;
	font-size: 110%;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.pb30 {
	padding-bottom: 30px;
}

.flag {
	display: inline-block;
    position: relative;
    /*height: 40px;*//*高さ*/
    line-height: 28px;/*高さ*/
    vertical-align: middle;
    text-align: center;
    padding: .3em;/*文字の左右の余白*/
    background: #89024e;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
	margin-right: 10px;
	box-shadow:3px 3px 3px rgba(0,0,0,0.3);
}


.flag font {
  display: block;
  padding: .1em 1em;
  border: 1px dashed rgba(255,255,255,0.6);
}

.lines-on-sides {
    display: flex;
    align-items: center;
    text-align: center;
	margin: 0 auto;
}

.lines-on-sides:before {
    margin-right: 2em;
}

.lines-on-sides:before, .lines-on-sides:after {
    border-top: double 10px;
    content: "";
    display: inline;
    flex-grow: 1;
	margin-left: 2em;
}

/* -------------------------------------
	全体
------------------------------------- */

.center {
  box-sizing: border-box;
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  clear: both;
}

.inner {
	margin: 0 auto 80px;
	width: 95%;
}

#contents {
	max-width: 1130px;
	margin: 0 auto;
	text-align: center;
}


/* ヘッダー
------------------------------------- */

header[role="banner"]  {
	background: url(img/woodskin.gif) repeat;
	width: 100%;
	margin: 0 auto;
	height: auto;
	box-shadow:3px 3px 3px 3px rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 20;
	color: #fff;
	padding: 0 30px 15px;
	display:table;
box-sizing:border-box;
}

header[role="banner"] .shoplogo a ,footer[role="contentinfo"] .inner p.logo a {
	color: #00c7ca;
	font-family: 'Pacifico', cursive;
	font-size: 3.5vw;
	font-style: italic;
	text-decoration: none;
}

header[role="banner"] .header-main {
	width: 40%;
	display:table-cell;
}

header[role="banner"] .header-main p {
	padding: 1em 0 0;
}

/* Navigation
------------------------------------- */

header[role="banner"] nav {
	display:table-cell;
	vertical-align:middle;
}

header[role="banner"] nav ul {
	width:  100%;
	display: table;
}

header[role="banner"] nav li {
	padding:15px 5% 0 0;
	display:table-cell;
}
header[role="banner"] nav li:first-child {
display:none;
}

header[role="banner"] nav li a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}

header[role="banner"] nav li a img {
	display: block;
	padding-top: 5px;
	opacity: 0;
}

header[role="banner"] nav li a:hover img {
opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);	/* IE lt 8 */
-ms-filter: "alpha(opacity=100)"; /* IE 8 */
}
 
header[role="banner"] nav li a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

header[role="banner"] nav li a.active img {
	opacity: 1;
}

/* メインビジュアル
------------------------------------- */
#mainvisual {
position: relative;
	z-index: 10;
	margin-bottom: 60px;
}

#mainvisual .slideWrap div[id] {
  text-align: center;
}

#mainvisual .slideWrap div[id] img + img {
  display: none;
}

#mainvisual .slider {
	height: 350px!important;
	width:  100%;
	overflow: hidden;
}

#mainvisual .slider img {
	width: auto;
    display:block;
	top: 0!important;
  right: 0!important;
  bottom: 0!important;
  left: 0!important;
  max-width: 100%!important;
  margin: auto!important;
	position: absolute;
}

#mainvisual .topcopy {
	width:  100%;
	position: absolute;
	top:60px;
	text-align: center;
	color: #FFF;
}

#mainvisual span {
  display: block;
}

.line-1 {
  font-family: Arial, Helvetica, 'sans-serif';
  text-transform: uppercase;
  font-size: 18px;
  margin: 0;
}

.line-2 {
  font-family: Arial, Helvetica, 'sans-serif';
font-size: 28px;
	padding-top: 30px;
    text-shadow: 2px 2px 2px #444;
}

.line-3 {
  font-family: 'Pacifico', cursive;
  font-size: 60px;
  transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
	font-weight: normal;
	font-style: italic;
	letter-spacing: 2px;
}

/* メッセージ部分共通
------------------------------------- */

#contents .image
{
	float: left;
	margin-right: 50px;
	width: 44.7%;
	padding-bottom: 40px;
}

#contents .image img
{
	width: 100%;
}

#contents .image img.half
{
	width: 48%;
}


#contents .text {
	overflow: hidden;
	text-align: left;
	padding-bottom: 40px;
	
}


/* テーブル部分共通
------------------------------------- */
.price table,.course table,.tour table,.access table,.shop table {
	border-top:double #222541;
	border-bottom:double #222541;
	margin: 40px auto;
	padding: 0;
	text-align: left;
	font-size: 90%;
	line-height: 1.3em;
}

.price th,.course th,.tour th,.access th,.shop th {
	padding: 10px 0 10px 20px;
	width: 30%;
	align: left;
font-weight:normal;
}

.price td,.course td,.tour td,.access td,.shop td {
	align: left;
	vertical-align: middle;
	padding: 10px 0 10px 0px;
}

table tr.dott {
	border-bottom: dotted 1px #222541;
	width: auto;
}

.price table,.course table,.shop table {
	width: 90%;
	margin:40px auto;
}

.tour table,.access table {
	width: auto;
}

/* IMGMENU
------------------------------------- */

#contents .imgmenu {
	padding-bottom: 0px; /*position分の高さ調整*/
}

#contents .imgmenu .clearfix {
	width: 95%;
	margin: 0 auto;
}

#contents .imgmenu div.left,#contents .imgmenu div.right {
	width: 48%;
	position: relative;
}

#contents .imgmenu a {
	text-decoration: none;
	width:80%;
	padding: 43% 5% 7%;
	box-sizing: border-box;
	background-size: cover;
	display: block;
	/*height: 330px;*/
	width: 100%;
}

#contents .imgmenu div.left a {
	background: url(img/menu01.jpg) no-repeat top;
}

#contents .imgmenu div.right a {
	background: url(img/menu02.jpg) no-repeat top;
}


#contents .imgmenu a p {
	padding: 5px 10px;
	font-weight: bold;
	font-size: 1.5vw;
	color: #131331;
	text-decoration: none;
	background-image: url(img/title_center.png);
	background-position: top;
	background-repeat: repeat-y;
	background-size: contain;
}

#contents .imgmenu a img {
	width: 100%;
}
#contents .imgmenu a img:first-child {
	vertical-align: bottom;
}

#contents .imgmenu p.menutxt {
	text-align: left;
}

#contents .imgmenu a,#contents .imgmenu a:visited {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}

#contents .imgmenu a:hover {
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.2s linear;
}

/* -------------------------------------
	Schedule
------------------------------------- */

#contents .schedule {
	margin-top:-100px;
}

#contents .schedule h1 {
	position: relative;
	top:160px;
z-index: 21;
}

#contents .schedule .bk_top {
	position: relative;
	z-index: 20;
		margin: 0;
	padding: 0;	
	width: 100%;
}

#contents .schedule .bkimg {
	background: url(img/schedule_bk_mdl.png) repeat;
width:  100%;
	padding: 40px 0 20px;
}
#contents .calender_body {
	line-height: 2;
	text-align: center;
	max-width: 960px;
	margin: 30px auto 0;
}

#contents .calender_body p {
	text-align: left;
}

/* カレンダー 専用
------------------------------------- */
#contents .area-cal .section-body {
  display: flex;
}
#contents .section-body div.area-cal {
margin: 0 auto 0 auto;
}
#contents .area-calinfo .section-body {
  display: flex;
}

#contents .calender_body .section-body {
display: flex;
text-align: left;
}

.section-body .calendar div {
max-width:100%;
width:auto;
margin: 5px 5px 5px 5px;
}

.section-body .qooop-calendar0 div {
max-width:100%;
width:auto;
margin: 5px 5px 5px 5px;
}

.section-body .qooop-calendar1 div {
max-width:100%;
width:auto;
margin: 5px 5px 5px 5px;
}

div.calendar-info {
float:left;
padding-left:30px;
padding-top:10px;
}

.calendar-info span.sp1 {
    background: #ffcdcd;
}

.calendar-info span.sp2 {
    background: #d3f9d3;
}

.calendar-info span.sp3 {
    background: #fbfdbc;
}

.calendar-info span {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    width: 38px;
    height: 18px;
    border: 1px solid #ccc;
}

:root .calendar-info font {
	width: auto\0/;
	display: inline-block\0/;
}

:root #contents .calender_body p {
	width: 100%\0/;
	display: block\0/;
}

/* -------------------------------------
	NEWS & TRIPS
------------------------------------- */

/* -start- news ,flowに適用*/
#contents .news ul.group,
#contents .flow ul.group {
    zoom: 1;
	width: 100%;
	display: block;
	margin: 0 ;
	
}

#contents .news ul li,
#contents .flow ul li {
    float: left;
	width: 31.8%;
	margin-right:2.2%;
box-sizing:border-box;
}

#contents .news ul li {
	background:rgba(255,255,255,0.3);
	display:inline-block;
}

#contents .news ul li:nth-child(3n),
#contents .news ul li:nth-child(6n),
#contents .news ul li:nth-child(9n),
#contents .flow ul li:nth-child(3n),
#contents .flow ul li:nth-child(6n),
#contents .flow ul li:nth-child(9n){
  margin-right: 0;
}

/*#contents .news ul li .image{
	width: 100%;
	padding-bottom: 0;
}*/

#contents .news ul li .image{
    float: none;
    margin: 0;
    width: auto;
    padding: 0;
}

#contents .news ul li img,
#contents .flow ul li img
{
	width: 100%;
}
/* -end- news ,flowに適用*/

#contents .news ul li span.text p {
    text-align: left;
	padding: 20px;
}


/* Contact
------------------------------------- */

#contents .contact {
	padding-bottom: 60px;
}

#contents .contact_body{
margin: 30px 30px 0;
}

#contents .contact .area-form {
  box-sizing: border-box;
}

#contents .contact table.formTable {
  width: 100%;
  margin: 20px auto 10px;
}

#contents .contact table.formTable th {
  width: 210px;
  text-align: left;
  vertical-align: top;
  padding: 7px 0 13px;
  font-weight: normal;
}

#contents .contact table.formTable th .required {
  margin-left: 10px;
  padding: 0 3px;
  background: #e11818;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}


:root #contents .contact table.formTable td {
	width: 70%\0/;
	display: block\0/;
	padding: 0 0 5px\0/;
	}

#contents .contact table.formTable td {
  padding: 0 0 20px;
	text-align: left;}

#contents .contact table.formTable td input[type="text"] {
  box-sizing: border-box;
  width: 70%;
  padding: 5px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 16px;
color:#333;
}

#contents .contact table.formTable td input[type="checkbox"] {
	margin: 0 10px 0 15px;
}

#contents .contact table.formTable td input[type="checkbox"]:first-child{
	margin: 0 10px 0 0px;
}

#contents .contact table.formTable td textarea {
  vertical-align: top;
  box-sizing: border-box;
  width: 95%;
  height: 150px;
  margin: 0;
  padding: 5px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 16px;
}

#contents .contact .radioList {
  padding-top: 7px;
  margin-bottom: -5px;
}

#contents .contact .radioList:after {
  content: "";
  display: block;
  clear: both;
}

#contents .contact .radioList li {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

#contents .contact .txt_small {
  text-align: left;
  line-height: 1.3em;
  padding-top: 30px;
}

#contents .contact input{
  border-style: none;
  padding: 0 100px 0 20px;
	width: 100%;
	background: none;
	color: #FFF;
/*font-size:100%;*/
}

#contents .contact p.btn {
	position: relative;
	width: 50%;
	margin: 0 auto;
	max-width: 350px;
	padding: 0;
	}

#contents .contact p.btn img {
	height: 28%;/*30%;*/
	position: absolute;
	top:18px;/*20px;*/
	right:30px;
}

/* -------------------------------------
	Footer
------------------------------------- */

.wrapper {
	min-height: 100%;
 
  /* フッタの高さと等しいネガティブマージン */
  /* また最後の子要素の潜在的なマージンとしても機能 */
  margin-bottom: -100px;
}

footer[role="contentinfo"] {
	background:url(img/woodskin.gif) repeat;
	padding: 30px 0 0;
	text-align: center;
	position: relative;
	/*border-top: 10px solid rgba(56,33,23,0.7);*/
}

footer[role="contentinfo"] p {
	text-align: center;
}
footer[role="contentinfo"] a {
		color: #00c7ca;
	}

footer[role="contentinfo"] .pagetop {
	position: absolute;
	top:-60px;
	right: 0;
z-index:200;
}

footer[role="contentinfo"] .inner {
	max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 0;
	position:relative;
	width: 95%;
}

footer[role="contentinfo"] .inner ul {
	margin: 0 auto 20px;
	text-align: center;
	width: auto;
}

footer[role="contentinfo"] .inner ul li{
display: inline-block;
  margin-left: 10px;
}

footer[role="contentinfo"] .inner ul li a {
	color: #fff;
	text-decoration: none;
	margin: 0 10px 10px 10px;
}

footer[role="contentinfo"] .inner ul li:before {
    content: "|";
    padding-right: 15px;
	color: #fff;
}
footer[role="contentinfo"] .inner ul li:first-child:before {
  content: none;
}

footer[role="contentinfo"] .inner p {
	color: #00c7ca;
}


footer[role="contentinfo"] .inner p.logo a:hover{
	opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}


/* -------------------------------------
	Page01,Page02
------------------------------------- */


/* FLOW
------------------------------------- */
#contents .flow ul li {
	text-align: left;
	padding-top: 30px;
}

#contents .flow ul li img {
/*	padding-bottom: 30px;*/
margin-bottom:30px;
}

#contents .flow li .image {
	width: 100%;
	padding-bottom: 0;
}

#contents .flow .image p {
	position: absolute;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 150%;
	letter-spacing: 2px;
	padding: 15px 0 0 18px;
z-index:15;
}

#contents .flow .image p span {
	display: block;
	font-size: 220%;
	padding-top: 5px;
	margin-left: -2px;
	
}


/* REASON,VOICE,COURSE
------------------------------------- */

.reason ul li,
.voice ul li{
	clear: both;
	text-align: left;
	width: 90%;
	margin: 0 auto;
}
.reason ul li span.image,
.voice ul li span.image{
    float: left;
    margin-right: 50px;
	padding-bottom: 50px;
	}

.reason ul li span.text,
.voice ul li span.text{
    overflow: hidden;
    text-align: left;
}

.reason ul li span.text .sm_ttl,
.voice ul li span.text .sm_ttl{
	font-size: 110%;
}

.reason .button {
	padding: 10px;
}

/* VOICE
------------------------------------- */
.voice .text p {
	padding-top: 0;
}


/* COURSE
------------------------------------- */

.course .flag {
    background: #440660;
}

.course table {
	width: 100%;
	margin: 40px 0;
}
.course .corselist,.tour .tourlist{
	clear: both;
	text-align: left;
	width: 100%;
	margin: 100px auto 0;
}

.course  div span.image{
    float: left;
    margin-right: 50px;
	padding-bottom: 50px;
	}

.course div span.text{
    overflow: hidden;
    text-align: left;
}

.course .sm_ttl,
.tour .sm_ttl {
	color: #222541;
	font-size: 130%;
}


/* TOUR
------------------------------------- */

.tour .tourlist .flag{
	background: #232388;
	float: left;
	margin-right: 20px;
	margin-top: 5px;
}

.tour .tourlist .title_box {
	width: 100%;
	margin-bottom: 45px;
}

.tour .image {
	width: auto;
}

.tour .image div {
	margin-top: 20px;
}

.tour table{
	width: auto;
	margin: 40px 0;
}

.tour table.others,.tour table.others tr,.tour table.others td ,.tour table.others th{
	border:#222541 1px solid;
	margin: 0 auto;
}

.tour table.others {
	width: 95%;
}

.tour table.others th {
	background: rgba(35,35,136,0.5);
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-size: 120%;
}

.tour table.others td{
	background: rgba(255,255,255,0.3);
	padding: 10px;
}

.tour table.others .point{
	width: 65%;
}

.tour table.others .date{
	width: 35%;
}

#contents .access .text .txt_title{
	font-size: 100%;
}

#contents .access .text {
	padding-left: 10px;
}

#contents .access table tr:last-child{
/*	border-top:double;*/
border-bottom:double;
}

#contents .access table {
	border-bottom:none;
}

#contents .access .image {
	width: 60%;
}

#contents .shop .shoplogo {
	font-family: 'Pacifico', cursive;
	text-align: left;
	font-size: 240%;
	font-style: italic;
}

#contents .shop ul {
	margin: 0 auto;
	width: 90%;
}
#contents .shop li.left {
	padding: 25px 10px 0 0 ;
}

#contents .shop table {
	margin: 20px auto 40px;
}

#contents .staff .staff_in {
	margin-bottom: 60px;
}

#contents .staff p.inner {
	text-align: center;
}

#contents .staff .image {
	width: 275px;
}

#contents .staff .flag {
	background: #7b0024;
}

#contents .staff .name {
	font-size: 130%;
	padding: 15px 0 0;
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
  /* -------------------------------------
	タブレット用スタイル
------------------------------------- */
body {
    min-width: 0;
	  width: auto;
	  overflow: auto;
  }
	
img {
    max-width: 100%;
    height: auto;
  }
	
html,body {
/*		height: 100%;*/
	}
	
.wrap {
	width: auto;
	font-size: 95%;
	height: 100%;
}
	

.inner {
	width: 95%;
	margin: 30px auto 60px
	}

h1 {
	margin: 20px auto 30px;
	font-size:210%;
	}
	
header[role="banner"]  {
	display: block;
	padding: 10px 0;
	}
	
header[role="banner"] .header-main {
	display: block;	
	width: 90%;
	margin: 0 auto;
	}

header[role="banner"] .header-main a {
	font-size: 220%;
	}
	
header[role="banner"] .logo li.shoplogo:not(:target) {
	font-size:80%; /* IE10,IE11 */
}

header[role="banner"] nav {
	display: table;
    width: 90%;
    table-layout: fixed;
	margin: 0 auto;
}
	
header[role="banner"] nav ul {
	text-align: center;
	display: table;
	width: 100%;
	margin: 0 auto;
	}
	
header[role="banner"] nav ul li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	float: none;
	}
	
header[role="banner"] nav ul li:last-child {
	padding-right: 0;
	}
	
header[role="banner"] nav li a.active img {
    margin: 0 auto;
}

#contents .image {
    margin-right: 20px;
}
	
#contents .text {
    padding-bottom: 20px;
}
	
#contents .message p {
	padding-top: 0;
	padding-bottom: 0;
	}
	
#contents .imgmenu a p {
	font-size: 2vw;
	bottom: 110px;
	}
	
#contents .imgmenu {
    margin-bottom: -110px;
}

.calender_body {
	margin: 0 auto;
	text-align: center;
	width: 70%;
	}
	
.section-body .calendar {
		margin: 0 auto;
		text-align: center!important;
	}
	
#contents .schedule h1 {
    top: 170px;
}
	
#contents .schedule .bkimg p {
    padding-top:30px;
}
	
#contents .calender_body p,
	#contents .calender_body li
	{
		line-height: 2;
	}
	
#contents .calender_body a.button p {
	text-align: center;
	padding: 7px 20px 0 20px;
}
	
/*#contents a.button p:after {
	top: 45%;
	width: 22%;
	}*/
	
#contents .calender_body a.button p img {
	padding: 10px 0 0 10px;
}
	
#contents .news ul.group {
    zoom: 1;
	display: block;
	margin: 0 auto;
}	
#contents .news ul li {
	width: 49%;
    margin: 0 2% 20px 0;
}

#contents .news ul li:nth-child(2n),
#contents .news ul li:nth-child(4n),
#contents .news ul li:nth-child(8n){
  margin-right: 0;
}

#contents .news ul li .image {
	width: 100%;
	padding-bottom: 0;
	}
#contents div.calendar div {
		float:none;
	}

#contents .contact_body {
	width: 90%;
	margin: 0 auto;
	}

#contents .contact p {
	width: 100%;/*60%;*/
}
	
footer[role="contentinfo"] p {
		padding-top: 10px;
	}
	
footer[role="contentinfo"] .inner .pagetop {
		top:-90px;
	}

#contents .flow ul li {
	padding-top: 0;
	}

.course .corselist, .tour .tourlist {
	margin: 60px auto 0;
	}
	
#contents .course table,#contents .tour table {
	margin-top: 0;
}

.tour th {
	padding-left:0;
	}
	
#contents .tour p.text {
		padding: 0 0 20px;
	}
	
#contents .image img.half {
    width: 80%;
	float: none;
	padding-bottom: 20px;
}
	
#contents .access .image {
	width: 100%;
	}
	
#contents .access .image img {
	width: 80%;
	}
	
#contents .access table {
	width: 80%;	
	}
	
#contents .shop .left {
	float: none;
	display: block;
	text-align: left;
	}
	
	#contents .staff p.inner {
		padding: 0;
	}
}

@media only screen and (max-width: 640px) {
  /* -------------------------------------
	スマホ用スタイル
------------------------------------- */
	
	
  /* 要素
------------------------------------- */
html {
		  -webkit-overflow-scrolling: touch;
	}
	
body {
    min-width: 0;
	  width: auto;
	  overflow: auto;
  }
img {
    max-width: 100%;
    height: auto;
  }
	
h2 {
		padding-bottom: 20px;
		margin-bottom: 0px;
	}
	
.pageTop {
    font-size: 12px;
  }
	
.titlebk_box {
    margin-bottom: 0px;
}

/* 全体
------------------------------------- */

#wrap {
	position:relative;
	z-index: 100;
}
#wrap main {
	width: 100%;
	margin: 0px auto 50px;
}
.wrap {
	width: auto;
	font-size: 80%;
	height: 100%;
}
	
.inner {
	width: 95%;
	margin: 30px auto 30px;
	}

.top_bk {
		height:200px;	
	}
	
h1 {
	margin: 20px auto 20px;
	letter-spacing: 0.05em;
	font-size: 165%;
	width: 100%;
	text-align: center;
	}
	
h1 img {
		padding-top: 10px;
	width: 13%;
	}
	
.flag {
    margin-top: 20px;
}
	
#contents section p,#contents section li {
	font-size: 98%;
	line-height: 1.5em;
	text-align: left;
	}

#contents section .button p {
	font-size: 80%;
	line-height: 1.5em;
	text-align: left;
	}

.reason ul li, .voice ul li {
    width: 100%;
}
	
#contents .image {
	float: none;
	margin: 0 auto;
    width: 100%;
	padding-bottom: 20px;
	clear: both;
	}
	
#contents .message {
	padding-bottom: 0;
	}

header[role="banner"]  {
	display: block;
	padding: 10px 0 0;
	}
	
header[role="banner"] .header-main:after {
    content: "";
    display: block;
    clear: both;
  }

header[role="banner"]  .header-main {
	display: block;	
	width: 90%;
	margin: 0 auto;
	}

header[role="banner"]  .header-main a {
	font-size: 220%;
	}
	
header[role="banner"] .logo p {
		padding:10px 0 0;
	}


header[role="banner"] .shoplogo a {
    /*margin-bottom: 7px;*/
    font-size:200%;
	  display: block;
  }
	
header[role="banner"] .shoplogo img {
    width: 40px;
	text-align: left;
	padding: 5px 0 10px;
    display: block;
    float: left;
  }


header[role="banner"] nav {
	display: table;
    width: 95%;
    table-layout: fixed;
	margin: 10px auto 0;
}
	
header[role="banner"] nav li {
	text-align: center;
	padding: 0px 2% 10px 2%;
	}
	
header[role="banner"] nav li a {
		font-size: 100%;
		line-height: 0.2em;
	}
	
header[role="banner"] nav li a img {
		display: none;
	}

#mainvisual {
    margin-bottom: 30px;
	}
	
#mainvisual img {
	height: auto;
	}
	
#mainvisual .slider {
		height: 180px!important;
	}
	
#mainvisual .topcopy {
		top:30px;
	}

#mainvisual .line-2 {
	font-size: 20px;
	padding-top: 15px;
	}
	
#mainvisual .line-3 {
	font-size: 30px;
	}
/* LINK設定 */
#mainvisual div.extlinkbox {
float:left;
width:100%;
height:auto;
	text-align: left;
}
#mainvisual div.extlinkbox.dispcenter {
	text-align: center;
}
#mainvisual div.extlinkbox.dispright {
	text-align: right;
}
#mainvisual div.extlinkbox img {
	height: 30px;
	margin: 2px 5px 2px 2px;
}

/* スライダー内LINK */
.slidein {
position: absolute;
	top: 10px;
	left:0;
	padding:0 2%;
	z-index: 10;
	width: 100%;
	box-sizing:border-box;
}



#contents .imgmenu div.left,
#contents .imgmenu div.right{
	float: none;
	width: 100%;
	position: relative;
	margin-top: -140px;
	}
	
#contents .imgmenu a{
    margin: 50% auto 0;
	}
		
#contents .imgmenu a p {
	text-align: center;
	font-size: 80%;
	width: 80%;
    margin: 0 auto;
    padding: 3px 0;
	}
	
#contents .imgmenu a img {
		width: 80%;
	}

#contents .schedule {
    margin-top: -130px;
}
	
#contents .schedule h1 {
	top:130px;
	}
	
#contents .schedule .bkimg {
		padding: 40px 20px 20px;
		width: 100%;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	
#contents .schedule .bkimg p.titletxt{
		margin-top: 30px;
	}


/* カレンダー 専用
------------------------------------- */

#contents .section-body .calendar {
		margin: 0 auto;
	}
#contents .section-body .calendar div {
	float: none;
	margin: 0 auto 20px;
	width: 	100%;
	}

.center.calender_body {
	margin: 30px auto;
	width: 90%;
	}
.calendar table.calendar {
    width: 100%;
}

div.calendar-info {
float:left;
padding-left:7px;
padding-top:10px;
font-size:12px;
}

#contents .schedule .calendar-info li {
		line-height:2em;
	}

.area-cal p {
font-size:12px;
}

.calendar-info span {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 12px;
    border: 1px solid #ccc;
}

#contents .calender_body a.button p {
	padding: 15px 20px 0 10px;
	font-size:16px;
}

#contents .calender_body a.button p:after {
    background:url(img/arrow.png) no-repeat 0 2px;
	background-size:contain;
	content:" ";
    display:inline-block;
    height:20px;
	vertical-align:middle;
}
	
#contents .news ul.group {
    zoom: 1;
	display: block;
	margin: 0 auto;
/*padding:0;*/
}	

#contents .news ul li{
		width: 100%;
	    margin-bottom: 20px;
	}
	
#contents .news ul li:last-child {
		width: 100%;
	    margin-bottom: 0px;
	}
	
#contents .news .image {
		width: 100%;
		padding-bottom: 0;
	}
	
#contents .news ul li span.text {
	padding: 5%;
	width: 90%;
	}
	
#contents .contact table.formTable th,
#contents .contact table.formTable td {
	width: 100%;
	display: block;
	padding: 0 0 5px;
	}

#contents .contact table.formTable tr, #contents .contact table.formTable tbody, #contents .contact table.formTable th, #contents .contact table.formTable td {
    display: block;
  }
	
#contents .contact table.formTable th {
    width: auto;
    padding: 0 0 5px;
  }
	
#contents .contact table.formTable td input[type="text"] {
		width: 100%;
	}
	
#contents .contact input[type="button" i] {
	width: 100%;
	padding-top: 15px;
	}


	
table.formTable td input[type="text"] {
    width: 100%;
  }
	
#contents .contact_body {
    margin:0 auto;
}
	
#contents .contact p.btn {
	margin: 0 auto;
	text-align: center;
	width: 90%;
	font-size: 78%;
	}
	
#contents .contact p.btn img {
    right: 20px;
    top: 20px;
    height: 25%;
}
		
#contents .contact {
		padding: 20px 0;
	}
	
#contents .contact table.formTable td textarea {
	width: 100%;
	}
	
.button {
    /*width:80%;*/
    font-size: 120%;
    margin-bottom: 20px;
}
	
.lines-on-sides:before  {
	margin-left: 0;
    margin-right: 0.3em;
}
	
.lines-on-sides:after {
    margin-left: 1em;
}
	

	
footer[role="contentinfo"] {
	padding: 0;
	height: auto;
	}
	
footer[role="contentinfo"] .inner {
		width: 95%;/*90%;*/
		position: static;
	}
	
footer[role="contentinfo"] .inner p.shopinfo span {
		line-height: 1.4em;
	display:  block;
	}

footer[role="contentinfo"] .inner p.logo {
		padding-bottom: 0;
	font-size: 130%;
	}	
	
footer[role="contentinfo"] .inner p.logo img {
		width: 15%;
		margin-top: -5px;
	}
	
footer[role="contentinfo"] .inner p.logo a {
	font-size:150%;
	}

footer[role="contentinfo"] .inner .pagetop img {
		width: 75%;
	}
	
footer[role="contentinfo"] .inner .pagetop {
    bottom: 10px;
    right: 5px;
}

footer[role="contentinfo"] .inner {
		width: 100%;
	}
	
	
header[role="banner"] nav,footer[role="contentinfo"] .inner ul{
	margin: 0;
	width: 100%;
	}
	
header[role="banner"] nav {
		margin-top: 10px;
	}
header[role="banner"] nav ul li,footer[role="contentinfo"] .inner ul li {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #c9af9d;
	padding: 8px;
}
	
header[role="banner"] nav ul li:last-child {
		border-bottom: none;
	}
	
header[role="banner"] nav ul li:before,footer[role="contentinfo"] .inner ul li:before  {
		content:none;
	}
	
#contents .flow ul li {
	display: block;
	width: 100%;
	margin: 0 auto;
	float: none;
	}
	
#contents .news ul li:nth-child(3n), #contents .news ul li:nth-child(6n), #contents .news ul li:nth-child(9n), #contents .flow ul li:nth-child(3n), #contents .flow ul li:nth-child(6n), #contents .flow ul li:nth-child(9n) {
	margin: 0 auto;
	}
	
.price table, .course table, .shop table {
    margin: 0 auto;
	width: 100%;
}

.price th, .course th, .tour th, .access th, .shop th {
    padding: 10px 0 10px 5px;
    width: 30%;
    align: left;
}
	
.reason .button {
    padding: 5px 5px 0px;
}

	
ul.group .text {
		padding-top: 20px;
	}

.course .corselist, .tour .tourlist {
    margin: 0px auto 0;
}

.course table, .shop table {
    margin: 0 auto 30px;
}

.tour p.text {
	display: block;
	width: 100%;
	padding-bottom: 0;
}
	
.tour .tourlist .flag {
	float: none;
}
	
.tour .tourlist .title_box {
    width: 100%;
    margin-bottom: 5px;
}
	
.tour table {
    width: 100%;
    margin: 0 0 20px;
}

#contents .access table {
    border-bottom: none;
	width: 100%;
}
	
#contents .shop table {
    margin: 20px auto 40px;
	width: 100%;
}
	
#contents .shop li.left {
    padding: 0px 10px 0 0;
	font-size: 80%;
	width: 100%;
}
	
#contents .shop .shoplogo {
	font-size: 190%;	
	}

#contents .staff p.inner {
    margin: 0 auto;
}
	
#contents .staff .staff_in {
    margin-bottom: 0px;
}
	
}