@charset "UTF-8";

/*
Theme Name: 「ポテリ」
Description: 伊豆高原ペンション「ポテリ」さまのWebサイトです。
*/

/**********************************************************************************


	reset
	
	
***********************************************************************************/
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, 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;
}
body { line-height: 1; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	text-decoration: none;
}
ins, mark {
    background-color: #ff9;
    color: #000;
}
ins { text-decoration: none; }
mark {
    font-style: italic;
    font-weight: bold;
}
del { text-decoration: line-through; }
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th { text-align: left; }
hr {
    display: block;
    height: 1px;
    border: 0;  
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
input, select { vertical-align:middle; }
input, textarea {
	margin: 0;
	padding: 0;
}
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    max-width: 100%;
	height: auto;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/***----- clearfix -----***/
.clearfix, div, ul, dl, ol { zoom: 1; }
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/***----- ie11対策 -----***/
main { display: block; }



/**********************************************************************************


	初期設定
	
	
***********************************************************************************/
html { font-size: 62.5%;/*10px*/ }
body {
    font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    -webkit-text-size-adjust: none;
    line-height: 1.6;
    letter-spacing: .05em;
    color: var(--black);
    overflow-x: hidden;
}



/**********************************************************************************


	CSS変数を定義
	
	
***********************************************************************************/
:root {
	--black: #374234;
    --key-color: #50b12f;
    --dark-green: #1c5845;
	--pink: #f5628c;
	--gray: #c2c4c1;
    --shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --title-font: 'M PLUS Rounded 1c', sans-serif;
    --title-gothic: 'GenEiLatin-Separate', sans-serif;
    --title-mincho: 'Noto Serif JP', serif;
}


/**********************************************************************************


	見出し
	
	
***********************************************************************************/
h1, h2, h3, h4 {
	font-family: var(--title-font);
	font-weight: 700;
	line-height: 1.2;
	color: var(--key-color);
}
h1 { font-size: 4.0rem; }
h2 { font-size: 3.2rem; }
h3 { font-size: 2.8rem; }
h4 { font-size: 2.4rem; }


/***----- 見出し装飾 -----***/
.section-title__large {
	font-size: 4rem;
	color: var(--black);
	text-align: center;
	margin-bottom: 64px;
}
.section-title__large::after {
	content: attr(data-eng);
	display: block;
	font-size: 2.4rem;
	font-family: var(--title-mincho);
	color: var(--key-color);
	margin-top: 5px;
}
.section-title__medium {
	padding-left: 35px;
	padding-bottom: 10px;
	border-bottom: 5px dotted var(--gray);
	margin-bottom: 32px;
	background: url(common/icon_leaf.png) left top no-repeat;
	background-size: 27px 42px;
}
h3.section-title__medium {
	padding-left: 35px;
	padding-bottom: 10px;
	border-bottom: 5px dotted var(--gray);
	margin-bottom: 32px;
	background: url(common/icon_leaf.png) left top no-repeat;
	background-size: 25px 38px;
}


/** media Queries
===================================================================================*/
@media screen and (max-width: 800px) {

h1 { font-size: 3.6rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2.0rem; }

/***----- 見出し装飾 -----***/
.section-title__large {
	font-size: 3.6rem;
	margin-bottom: 56px;
}
.section-title__medium {
	padding-left: 35px;
	padding-bottom: 10px;
	border-bottom: 5px dotted var(--gray);
	margin-bottom: 24px;
	background: url(common/icon_leaf.png) left top no-repeat;
	background-size: 25px 38px
}
}

/** media Queries
===================================================================================*/
@media screen and (max-width: 480px) {

h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.8rem; }

.section-title__large {
	font-size: 3.2rem;
	margin-bottom: 56px;
}
.section-title__large::after {
	font-size: 2rem;
}
.section-title__medium {
	padding-left: 30px;
	padding-bottom: 10px;
	border-bottom: 5px dotted var(--gray);
	margin-bottom: 24px;
	background: url(common/icon_leaf.png) left top no-repeat;
	background-size: 20px 31px;
}
h3.section-title__medium {
	padding-left: 25px;
	padding-bottom: 10px;
	border-bottom: 5px dotted var(--gray);
	margin-bottom: 24px;
	background: url(common/icon_leaf.png) left top no-repeat;
	background-size: 17px 26px;
}
}



/**********************************************************************************


	header (mobile first)

	
***********************************************************************************/
.header {
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	background: url(common/bg_header.png) left bottom repeat-x #fff;
}
.header .logo { width: 200px; }
.header-nav {
	width: 100%;
	height: 110px;
	position: relative;
}
.drawer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: 110px;
	padding: 0 1em;
}

/*** ナビゲーション部分 ***/
.menu li { }
.menu li a {
	display: block;
	padding: 1.15em;
	border-bottom: 1px dotted #333;
	color: var(--key-color);
	text-decoration: none;
}
.nav-phone {
	display: block;
	padding: 1.15em;
	border-bottom: 1px dotted #333;
}
.nav-phone img { vertical-align: middle; }

.menu ul li a:hover { 
	background-color: var(--key-color);
	color: #fff;
}
.menu {
	text-align: center;
	background-color: rgba(255,255,255,.9);
	transition: .5s ease;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	/*border-top: 1px solid #fff;*/
}

/*** OPEN時の動き ***/
.menu.open {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/*** トグルボタンのスタイルを指定 ***/
.Toggle {
    display: block;
    position: absolute;
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
	right: 20px;
}
.Toggle span {
    display: block;
    position: absolute;
    width: 50px;
    border-bottom: solid 4px var(--key-color);
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
	border-radius: 4px;
}
.Toggle span:nth-child(1) { top: 5px; } 
.Toggle span:nth-child(2) { top: 18px; }
.Toggle span:nth-child(3) { top: 32px; }
 
.Toggle.active span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/*** 2番目と3番目のspanを45度に ***/
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


/** media Queries
===================================================================================*/
@media only screen and (min-width: 1025px) {

.header__inner { 
	width: 1200px; 
	padding: 0;
	margin: 0 auto; 
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header .logo { width: 100%; } 
.header-nav { 
	display: flex; 
	background-color: transparent;
}
.menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	background-color: transparent;
	/*margin-top:0;*/
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.main-menu { order: 2; }
.sub-menu { order: 1; margin-bottom: 5px; margin-top: -49px; }
.menu li a {
	text-decoration: none;
	font-size: 1.6rem;
	line-height: 1.4;
	color: #489f2a !important;
	text-shadow: 0px 0px 4px rgba(72,159,42,.225);
	border-bottom: none;
	position: relative;
	transition: all 0.3s ease-in-out;	
}
.menu li a:hover { color: var(--black) !important;positio:absolute; top: -3px; }

.menu li.nav-news a { color: #fff !important; text-shadow: 0px 0px 10px #326e1d; }
.menu li.nav-gallery a { color: #fff !important; text-shadow: 0px 0px 10px #0c241d; }
.menu a span {
	display: block;
	font-size: 1.2rem;
}
.nav-news,
.nav-gallery {
	padding: .4em 1em;
	margin-right: .25em;
}
.nav-news { background: var(--key-color); }
.nav-gallery { background: var(--dark-green); margin-right: 0; }

.nav-phone {
	border-bottom: none;
	margin-top: 5px;
}

.menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
.menu ul li a {
	padding: 0 15px;
	border-bottom: none;
}
.menu ul li a:hover {
	background-color:transparent;
}
.Toggle{ display: none; }

}


/** media Queries
===================================================================================*/
@media only screen and (min-width: 1024px) {

.fixed__link-menu {
	width: 65px;
	position: fixed;
	z-index: 99;
	top: 120px;
	right: 0;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.fixed__link-menu { display: none; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.header .logo { width: 40%; }
.header-nav { height: 65px;  }
.drawer{ height: 65px; }
.movie{ margin-top: 65px !important; }

}



/**********************************************************************************


	.movie


***********************************************************************************/
.movie {
	position: relative;
	width: 100%;
	min-width: 1200px;
	height: auto;
	background:url(../movie/top.jpg) no-repeat center;
	background-size: cover;
	margin-top: 110px;
}
.movie::before {
	content: "";
	display: block;
	padding-top: 41.25%; 
}
.movie__inner {
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}
.movie video {
	width: 100%;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (orientation:portrait) {

.movie {
	  /*height: 100vh;*/
	  background: url(movie/top.jpg) no-repeat center;
	  background-size: cover;
}
.movie::before {
	content: "";
	display: block;
	padding-top: 41.25%; 
}
/*.movie video { display: none; }*/
  
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.movie {
	width: 100%;
	min-width: 100%;
	margin-top: 110px;
}
}



/**********************************************************************************


	mainVisual/mainTitle
	
	
***********************************************************************************/
.main-visual {
	position: relative;
	min-width: 1200px;
	height: 480px;
	max-height: 480px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 110px;
}
.railway .main-visual {
    background: url("railway/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.kids .main-visual {
    background: url("kids/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.facilities .main-visual {
    background: url("facilities/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.cuisine .main-visual {
    background: url("cuisine/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.price .main-visual {
    background: url("price/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.access .main-visual {
    background: url("access/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.news .main-visual {
    background: url("news/main-visual.jpg") no-repeat center center;
	background-size: cover;
}
.gallery .main-visual {
    background: url("gallery/main-visual.jpg") no-repeat center center;
	background-size: cover;
}

.page-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    color: #fff;
    font-size: 3.6rem;
   	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.8);
	text-align: center;
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.main-visual {
	width: 100%;
	min-width: 100%;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.railway .main-visual {
    background: url("railway/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.kids .main-visual {
    background: url("kids/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.facilities .main-visual {
    background: url("facilities/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.cuisine .main-visual {
    background: url("cuisine/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.price .main-visual {
    background: url("price/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.access .main-visual {
    background: url("access/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.news .main-visual {
    background: url("news/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
.gallery .main-visual {
    background: url("gallery/main-visual_sp.jpg") no-repeat center center;
	background-size: cover;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.main-visual { max-height: 400px; }
.page-title { font-size: 3.2rem; }

}



/**********************************************************************************


	main


***********************************************************************************/
.main {
	width: 100%;
	margin: 0 auto;
}
.container,
.container-s,
.container-l {
	margin: 0 auto;
}

.py-l { padding: 120px 0; }
.py-s { padding: 60px 0; }
.py-m { padding: 80px 0; }

/***----- 特定の要素だけ横幅100%にする -----***/
.full-width { 
	width:100vw; 
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.wood {	background: url(common/bg_white-wood.jpg) center center repeat; }

.green { position: relative; }
.green::before {
	content: "";
 	position: absolute;
 	z-index: 1;
 	top: -30px;
	left: 0;
	width: 360px;
	height: 383px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 360px 383px;
}
.green::after {
	content: "";
 	position: absolute;
 	z-index: 1;
 	top: -30px;
	right: 0;
	width: 360px;
	height: 383px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 360px 383px;
}
.stripe { position: relative; }
.stripe::before {
	content: "";
 	position: absolute;
 	z-index: 1;
 	top: 0;
	width: 100%;
	height: 15px;
	background: url(images/bg_stripe.png);
	backgrouund-repeat: repeat-x;
}
.leaves { position: relative; }
.leaves::before {
	content: "";
 	position: absolute;
 	z-index: 1;
 	top: -45px;
 	left: 50%;
    transform: translateX(-50%);
	width: 667px;
	height: 96px;
	background: url(common/bg_leaves.png);
	backgrouund-repeat: no-repeat;
}

/***----- 枠 -----***/
.notes {
	padding: 2em;
	background-color: #fff;
	background-image:
		repeating-linear-gradient( 0deg, rgba(80, 177, 47, .055) 0px 8px, transparent 8px 16px),
		repeating-linear-gradient( 90deg, rgba(80, 177, 47, .055) 0px 8px, transparent 8px 16px);
	border-top: 3px solid var(--key-color);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;;
}

/***----- dlテーブル -----***/
dl.table {
	background-color: rgba(80,177,47,.1);
	border: 1px solid #c2c4c1;
	border-top: none;
}
dl.table dt {
	width: calc( 250 / 1120 * 100% );
	padding: 1em;
	border-top: 1px solid var(--gray);
	float: left;
	font-weight:normal;
	margin: 0;
	border-left:0 !important;
}

dl.table dd {
	background-color: #fff;
	margin: 0 0 0 calc( 250 / 1120 * 100% );
	padding: 1em 1em;
	border-top: 1px solid var(--gray);
	border-left: 3px solid var(--key-color);
}

.marker { background: linear-gradient(transparent 70%, #f5dadf 70%); }
.bg_green { background-color: var(--pale-green); }
.bg_yellow { background: url(common/bg_yellow.png) repeat; }

.indent {
	padding-left: 1em;
	text-indent: -1em;
}
.bnr__plan img {
	box-shadow: var(--shadow);
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.main,
.container,
.container-s,
.container-l {
	width: 100%;
	min-width: 100%;
}
.py-l { padding: 120px 20px; }
.py-s { padding: 60px 20px; }
.py-m { padding: 80px 20px; }

.bnr__plan { width: 100%; }

.green::before {
	width: 280px;
	height: 298px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 280px 298px;
}
.green::after {
	width: 280px;
	height: 298px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 280px 298px;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 992px) {

.py-l { padding: 100px 20px; }
.py-s { padding: 40px 20px; }
.py-m { padding: 60px 20px; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.green::before {
	width: 260px;
	height: 277px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 260px 277px;
}
.green::after {
	width: 260px;
	height: 277px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 260px 277px;
}

dl.table dt {
	width: 100%;
	background-color: rgba(80,177,47,.1);
	border-top: 1px solid #c2c4c1;
	border-bottom: 3px solid var(--key-color);
	margin: 0 0 1em;
}

dl.table dd {
	margin: 0 0 0 ;
	border-left: 0px;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.green::before {
	width: 240px;
	height: 255px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 240px 255px;
}
.green::after {
	width: 240px;
	height: 255px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 240px 255px;
}

.leaves::before {
 	top: -45px;
 	left: 50%;
    transform: translateX(-50%);
	width: 550px;
	height: 79px;
	background: url(common/bg_leaves.png);
	background-size: 550px 79px;
	backgrouund-repeat: no-repeat;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 576px) {

.green::before {
	width: 220px;
	height: 234px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 220px 234px;
}
.green::after {
	width: 220px;
	height: 234px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 220px 234px;
}

.leaves::before {
 	top: -40px;
 	left: 50%;
    transform: translateX(-50%);
	width: 480px;
	height: 69px;
	background: url(common/bg_leaves.png);
	background-size: 480px 69px;
	backgrouund-repeat: no-repeat;
}
}



/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.green::before {
	width: 180px;
	height: 192px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 180px 192px;
}
.green::after {
	width: 180px;
	height: 192px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 180px 192px;
}

.leaves::before {
 	top: -40px;
 	left: 50%;
    transform: translateX(-50%);
	width: 400px;
	height: 58px;
	background: url(common/bg_leaves.png);
	background-size: 400px 58px;
	backgrouund-repeat: no-repeat;
}
.notes {
	padding: 1.5em;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 376px) {

.green::before {
	width: 140px;
	height: 149px;
	background: url(common/green-L.png);
	backgrouund-repeat: no-repeat;
	background-size: 140px 149px;
}
.green::after {
	width: 140px;
	height: 149px;
	background: url(common/green-R.png);
	backgrouund-repeat: no-repeat;
	background-size: 140px 149px;
}

.leaves::before {
 	top: -30px;
 	left: 50%;
    transform: translateX(-50%);
	width: 350px;
	height: 50px;
	background: url(common/bg_leaves.png);
	background-size: 350px 50px;
	backgrouund-repeat: no-repeat;
}
}

a.anchor {
    display: block;
    position: relative;
    top: -500px;
    visibility: hidden;
}

/**********************************************************************************


	1. トップページ / home


***********************************************************************************/

/***----- ご挨拶 -----***/
.greeting { }
.greeting__item {
	display: flex;
	justify-content: space-between;
}
.greeting__image { width: calc( 560 / 1120 * 100% ); }
.greeting__desc { 
	width: calc( ( 1120 - 560 - 32 ) / 1120 * 100% );
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.greeting__title { 
	font-size: 4rem;
	margin-bottom: 32px; 
}
.greeting__desc p { margin-bottom: .5em; }

/***----- 新着情報 -----***/
.topics-area { 
	width: 90%;
	margin: 0 auto;
	margin-top: 56px;
}
.topics { }
.topics__list { 
	display: flex;
	justify-content: space-between;
	margin: 30px 0;
} 
.topics__item { 
	width: calc( ( 100% - 32px ) / 3 );
	background-color: #fff;
	box-shadow: var(--shadow);
}
.topics-detail { 
	display: flex;
    flex-direction: column;
	padding: 1em 1em 1.5em 1em;
}
.topics-title { 
	order: 2;
	color: var(--dark-green);
	font-family: var(--font-gothic);
	font-size: 1.6rem;
	font-weight: normal;
}
.topics-date { 
	order: 1;
	font-size: 1.4rem;
	color: var(--key-color);
	margin-bottom: .5em;
}

.appeal { }
.appeal__list {
    display: flex;
    justify-content: space-between;
}
.appeal__item { width: calc( ( 100% - 48px ) / 3 ); }
_:-ms-lang(x)::-ms-backdrop, .appeal__item img { 
	width: calc( 1120 / 3 * 100% );
}
.appeal__image { }
.appeal__desc { text-align: center; }
.appeal__title {
	font-size: 3.2rem;
	margin-bottom: 12px;
}

.bnr_long-stay {
	width: calc( 1120 / 1120 * 100% );
	margin: 64px auto 0;
}

.sns-contents { display: flex; }
.diary { 
	width: 540px;
	margin-right: 4rem;
    padding: 2.75rem;
    position: relative;
}
.diary__item {
	display: flex;
	flex-wrap: wrap;
}
.diary__date { 
	width: 30%;
	padding-bottom: .7em;
	border-bottom: 1px dashed rgba(0,0,0,.5);
	margin-bottom: .7em;
}
.diary__date { 
	color: var(--dark-green);
	font-weight: bold;
}
.diary__caption { 
	width: 70%;
	padding-bottom: .7em;
	border-bottom: 1px dashed rgba(0,0,0,.5);
	margin-bottom: .7em;
}
.diary__caption a { color: var(--black); }
.diary__caption a:hover { color: var(--dark-green); }
.instagram { width: 540px; }

.bnr__area {
	width: 1000px;
	margin: 64px auto 0;
}
.bnr__area ul {
    display: flex;
    justify-content: space-around;
}
.bnr__area ul li { width: calc( ( 100% - 32px ) / 3 ); }
.bnr__area ul li img {
	border-radius: 3px;
	box-shadow: var(--shadow);
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.greeting__item {
	width: 95%;
	margin: 0 auto;
}

.appeal__title  { font-size: 2.8rem; }

.bnr__area {
	width: 100%;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 992px) {



}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.greeting__title { 
	font-size: 3.6rem;
	margin-bottom: 28px; 
}
.greeting__item {
	display: flex;
	flex-direction: column;
}
.greeting__image,
.greeting__desc { 
	width: 100%;
}
.greeting__image {
	display: block;
	text-align: center;
}
.greeting__image img { width: 80%; }
.greeting__desc { margin-bottom: 32px; }

.appeal__title { font-size: 2.4rem; }

.diary__item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.diary__date { 
	width: 100%;
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}
.diary__date { 
	color: var(--dark-green);
	font-weight: bold;
}
.diary__caption { 
	width: 100%;
	padding-bottom: .7em;
	border-bottom: 1px dashed rgba(0,0,0,.5);
	margin-bottom: .7em;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 768px) {



}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.topics__list { 
	display: flex;
	flex-direction: column;
} 
.topics__item { 
	width: 100%;
	margin-bottom: 32px;
}
.topics__item:last-of-type { margin-bottom: 0; }

.appeal__list {
    display: flex;
    flex-direction: column;
}
.appeal__item { 
	width: 80%; 
	margin: 0 auto 64px;
}
.appeal__item:last-of-type { margin-bottom: 0; }

.sns-contents { 
	display: flex;
	flex-direction: column;
}
.diary { 
	width: 100%;
	margin-bottom: 64px;
}
.instagram { width: 100%; }

.bnr__area ul {
    display: flex;
    flex-direction: column;	
}
.bnr__area ul li { 
	width: 100%;
	text-align: center;
	margin-bottom: 24px;
}
.bnr__area ul li:last-of-type { margin-bottom: 0; }

}



/** media Queries
===================================================================================*/
@media only screen and (max-width: 576px) {


}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.greeting__title { 
	font-size: 3.2rem;
	margin-bottom: 24px; 
}
.appeal { padding-bottom: 0; }
.appeal__list {
    display: flex;
    flex-direction: column;
}
.appeal__title  { font-size: 2.4rem; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 376px) {

.greeting__title { 
	font-size: 2.8rem;
	margin-bottom: 20px; 
}
.appeal__title  { font-size: 2.2rem; }

}



/**********************************************************************************


	2. 庭園鉄道“ポテリ鉄道” / railway


***********************************************************************************/
.railway-lead h2 br.sp { display: none; }
.railway-lead__item {
	background: url(railway/bg_railway-lead.png) right center no-repeat;
	background-size: 720px 553px;
}
.railway-lead__txt { width: calc( 480 / 1120 * 100% ); }
.railway-lead__txt p { 
	text-shadow: 1px 2px 2px #fff;
	margin-bottom: .5em;
}
.railway-lead__youtube {
	margin-top: 32px;
}
.railway-lead__youtube::after {
	content: "";
	display: block;
	clear: both;
}
.railway-lead__youtube--item:first-of-type {
	float:left;
    width: 49%;
}
.railway-lead__youtube--item:nth-of-type(2) {
	float:right;
    width: 49%;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/***----- アコーディオンパネル -----***/
.railway-record__lead {
	margin: -32px 0 64px;
	text-align: center;
}
.railway-record__lead .br-sp { display: none; }
.railway-record__list {}
.railway-record__item { 
	width: 100%;
	margin-bottom: 24px;
}
.record-accordion {
	width: 100%;
	height: auto;
	font-size: 1.8rem;
	font-family: var(--font-gothic);
	text-align: left;
	cursor: pointer;
	padding: 1.7rem 5rem 1.6rem 3rem;
	border: none;
	outline: none;
	transition: 0.4s;
	border-radius: 5px;
	position: relative;
	background-color: rgba(245,98,140,.4);
}
.record-accordion.active, .record-accordion:hover { background-color: rgba(245,98,140,.6); }

.record-accordion::after {
	font-family: 'Material Icons';
	content: 'add'; /* + */
	font-size: 1.8rem;
	position: absolute;
	top: 2rem;
	right: 2rem;
}
.record-accordion.active::after {
	font-family: 'Material Icons';
	content: "remove"; /* - */
}
.record-panel {
	width: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	background-color: #f4f4f4;
	border-radius: 0 0 5px 5px;
}
.record-panel_inner { 
	padding: 3rem 4rem 3rem 4rem;
	position: relative;
}
.record-block:not(:last-of-type) { margin-bottom: 48px; }
.record-block__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.record-block__photo { width: calc( 200 / 1040 * 100% ); }
.record-block__txt { width: calc( 808 / 1040 * 100% ); }
.record-block__title {
	font-size: 2rem;
	padding-bottom: .5em;
	border-bottom: 3px dotted var(--gray);
	margin-bottom: 1em;
}
/***----- 1つのブロック内がテキストだけのとき -----***/
.record-block__txt.sentence { width: 100%; }

/***----- 1つのブロック内に写真が2列複数行あるとき -----***/
.record-block__photo.gallery { width: calc( 402 / 1040 * 100% ); }
.record-block__txt.gallery { width: calc( 606 / 1040 * 100% ); }
.record-block__gallery {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.record-block__thumb { 
	width: calc( 200 / 402 * 100% );
	margin-bottom: 2px;
}

/***----- 1つのブロック内に写真が3列複数行あるとき -----***/
.record-block__txt.gallery3 { width: 100%; }
.record-block__photo.gallery3 { 
	width: calc( 604 / 1040 * 100% );
	margin-bottom: 16px;
}
.record-block__thumb.gallery3 { 
	width: calc( 200 / 604 * 100% );
	margin-bottom: 8px;
}

/***----- 動画があるとき -----***/
.record-block__photo.record-movie { width: calc( 402 / 1040 * 100% ); }
.record-block__txt.record-movie { width: calc( 608 / 1040 * 100% ); }

/***----- 費用内訳テーブル -----***/
.cost-breakdown__title {
	font-size: 1.8rem;
	margin-bottom: .5em;
}
.cost { width: 100%; }
.cost-title {
	background-color: var(--key-color);
	border: solid 1px var(--gray);
	color: #fff;
	padding: 1em;
}
.cost-item {
	border: solid 1px var(--gray);
	padding: 1em;
}
.cost-item.money { text-align: right; }
.cost-detail:last-of-type { border-bottom: solid 1px var(--gray); }
.cost-detail:last-of-type .cost-title { background-color: var(--dark-green); }

.cost-notes { margin: .5em 0 1em; }

.vehicle { margin-top: 1em; }
.vehicle__item { margin-bottom: 1.5em; }
.vehicle__name { 
	margin-bottom: .75em; 
}

.record-block__txt dl dd { margin-bottom: .5em; }

.f-size18 { font-size: 1.8rem; }
.f-size14 { font-size: 1.4rem; }

/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.railway-lead__item {
	width: 95%;
	margin: 0 auto;
	background: url(railway/bg_railway-lead-light.png) right top no-repeat;
	background-size: 660px 507px;
}
.railway-lead__txt { width: calc( 560 / 1120 * 100% ); }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.railway-lead h2 br.sp { display: inline-block; }
.railway-lead__item {
	width: 95%;
	margin: 0 auto;
	background: url(railway/bg_railway-lead-light.png) top center no-repeat;
	background-size: 660px 507px;
}
.railway-lead__txt { width: 100%; }

.record-block__photo { width: calc( 280 / 1040 * 100% ); }
.record-block__txt { width: calc( 728 / 1040 * 100% ); }

.cost-title,
.cost-item {
	border-bottom: none;
    display: block;
    width: 100%;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 768px) {

.record-panel_inner { 
	padding: 3rem 2rem 3rem 2rem;
	position: relative;
}
.record-block__item {
	width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 32px
}
.record-block__photo { 
	width: 100%;
	margin-bottom: 16px;
}
.record-block__txt { width: 100%; }

/***----- 1つのブロック内に写真が2列複数行あるとき -----***/
.record-block__photo.gallery { width: 562px; }
.record-block__txt.gallery { width: 100%; }
.record-block__thumb { 
	width: calc( 280 / 562 * 100% );
	margin-bottom: 2px;
}

/***----- 1つのブロック内に写真が3列複数行あるとき -----***/
.record-block__txt.gallery3 { width: 100%; }
.record-block__photo.gallery3 { 
	width: 100%;
	margin-bottom: 16px;
}

/***----- 動画があるとき -----***/
.record-block__photo.record-movie { width: 562px; }
.record-block__txt.record-movie { width: 100%; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.railway-lead__item {
	width: 95%;
	margin: 0 auto;
	background: url(railway/bg_railway-lead-light.png) top center no-repeat;
	background-size: 560px 430px;
}
/***----- 1つのブロック内に写真が2列複数行あるとき -----***/
.record-block__photo.gallery { width: 100%; }
.record-block__txt.gallery { width: 100%; }
.record-block__thumb { 
	width: calc( ( 100% - 2px ) / 2 );
	margin-bottom: 2px;
}
/***----- 動画があるとき -----***/
.record-block__photo.record-movie { width: 100%; }
.record-block__txt.record-movie { width: 100%; }

.railway-lead__youtube--item:first-of-type,
.railway-lead__youtube--item:nth-of-type(2) {
	float:none;
    width: 100%;
}
.railway-lead__youtube--item:first-of-type { margin-bottom: 24px; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 576px) {

.railway-lead__item {
	width: 95%;
	margin: 0 auto;
	background: url(railway/bg_railway-lead-light.png) top center no-repeat;
	background-size: 480px 369px;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.railway-lead__item {
	width: 95%;
	margin: 0 auto;
	background: url(railway/bg_railway-lead-light.png) top center no-repeat;
	background-size: 380px 292px;
}

.railway-record__lead .br-sp { display: inline-block; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 376px) {

.railway-lead__item {
	width: 95%;
	margin: 0 auto;
	background: url(railway/bg_railway-lead-light.png) top center no-repeat;
	background-size: 280px 215px;
}
}



/**********************************************************************************


	3. キッズ大歓迎 / kids


***********************************************************************************/
.for-kids h2.section-title__large br.sp { display: none; }
.for-kids__item {
	background: url(kids/bg_for-kids.png) right center no-repeat;
}
.for-kids__txt { width: calc( 680 / 1120 * 100% ); }
.for-kids__txt p { 
	text-shadow: 1px 2px 2px #fff;
	margin-bottom: 1em;
}
.for-kids__photo {
	width: calc( 690 / 1120 * 100% );
	margin: 32px 0 0 32px;
	display: flex;
    justify-content: space-between;
}
.for-kids__photo01 { width: calc( 430 / 690 * 100% ); }
.for-kids__photo02 { 
	width: calc( 250 / 690 * 100% );
	margin-top: 150px;
}
.free-to-use { margin-top: 32px; }
.free-to-use__item:first-of-type { margin-bottom: .5em; }

.babies__item {
    display: flex;
    justify-content: space-between;
}
.babies__txt { width: calc( 630 / 1120 * 100% );
    display: flex;
    flex-direction: column;
    justify-content: center;  
}
.babies__photo { width: calc( ( 1120 - 630 - 32 ) / 1120 * 100% ); }
.babies-notes li {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: .5em;
}

.medical-facilities__list { border: 1px solid var(--gray); }
.medical-facilities__item {
	display: flex;
	border-bottom: 1px solid var(--gray);
}
.medical-facilities__item:first-of-type { 
	background-color: var(--dark-green);
	color: #fff;
}
.medical-facilities__item:last-of-type { border-bottom: none; }

.medical-service,
.medical-facilities__name,
.medical-facilities__tel,
.medical-facilities__address,
.medical-facilities__duration {
	padding: 1em;
	border-right: 1px solid var(--gray);
}
.medical-service { 
	width: calc( 190 / 1120 * 100% );
	background-color: var(--key-color);
	color: #fff;
}
.medical-facilities__item:first-of-type .medical-service { 
	background-color: var(--dark-green);
	color: #fff;
}
.medical-facilities__name { 
	width: calc( 300 / 1120 * 100% );
	background-color: rgba(80, 177, 47, .2);
}
.medical-facilities__item:first-of-type .medical-facilities__name { 
	background-color: var(--dark-green);
	color: #fff;
}
.medical-facilities__tel { width: calc( 180 / 1120 * 100% ); }
.medical-facilities__address { width: calc( 300 / 1120 * 100% ); }
.medical-facilities__duration { 
	width: calc( 150 / 1120 * 100% );
	border-right: none;
}
.medical-notes { margin-top: .5em; }


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.for-kids__item {
	width: 90%;
	margin: 0 auto;
}
.for-kids__photo02 { 
	width: calc( 250 / 690 * 100% );
	margin-top: 120px;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 992px) {

.babies__item {
    display: flex;
    flex-direction: column;
}
.babies__txt { 
	width: 100%;
	margin-bottom: 32px;
}
.babies__photo { 
	width: 80%;
	margin: 0 auto;
}
}



/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.for-kids__item {
	background: url(kids/bg_for-kids-light.png) center bottom no-repeat;
	background-size: 560px 430px;
	padding-bottom: 50px;
}
.for-kids__photo {
	width: 80%;
	margin: 50px auto 0;
}
.for-kids__photo01,
.for-kids__photo02 { 
	width: calc( ( 100% - 10px ) / 2 );
}
.for-kids__photo02 { margin-top: 0; }
.for-kids__txt { width: 100%; }

.medical-facilities__item:first-of-type { display: none; }
.medical-facilities__item {
	display: flex;
	flex-direction: column;
}
.medical-service,
.medical-facilities__name,
.medical-facilities__tel,
.medical-facilities__address,
.medical-facilities__duration {
	width: 100%;
	border-right: none;
}
.medical-service { background: var(--key-color); }
.medical-facilities__name { background: rgba(80, 177, 47, .2); }
.medical-facilities__tel { padding-bottom: .5em; }
.medical-facilities__address { padding: 0 1em; }
.medical-facilities__duration { padding-top: .5em; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.for-kids__item {
	background: url(kids/bg_for-kids-light.png) center bottom no-repeat;
	background-size: 460px 353px;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.for-kids h2.section-title__large br.sp { display: inline-block; }
.for-kids__item {
	background: url(kids/bg_for-kids-light.png) center bottom no-repeat;
	background-size: 360px 276px;
}
.for-kids__photo { width: 100%; }
.babies__photo { width: 100%; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 376px) {

.for-kids__item {
	background: url(kids/bg_for-kids-light.png) center bottom no-repeat;
	background-size: 320px 246px;
}
}



/**********************************************************************************


	4. お部屋・館内 / facilities


***********************************************************************************/
.room__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
}
.room__item:nth-of-type(2n) {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.room__photo { width: calc( 692 / 1120 * 100% ); }
.room__photo img { border-radius: 5px; }
.room__txt { 
	width: calc( ( 1120 - 32 - 692 ) / 1120 * 100% );
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.wa-you__thumb img  { border-radius: 5px; }
.room__txt .wa-you__thumb {
	width: 80%;
	margin: 32px auto 0;
	display: flex;
    justify-content: space-between;
}
.room__photo .wa-you__thumb { display: none; }

.wa-you__thumb--item { width: calc( ( 100% - 4px ) / 2 ); }
.steam {
    display: flex;
    justify-content: space-between;
}
.steam-image { width: 45%; border-radius: 5px; }
.steam-desc { width: 52.5%; }

.bath__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
}
.bath__item:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.bath__photo { width: calc( 692 / 1120 * 100% ); }
.bath__photo img { border-radius: 5px; }
.bath__txt { 
	width: calc( ( 1120 - 32 - 692 ) / 1120 * 100% );
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.bath__txt .bath01__thumb { 
	width: 100%;
	margin: 32px auto 0;
	display: flex;
    justify-content: space-between;
}
.bath__photo .bath01__thumb { display: none; }
.bath__txt .bath01__thumb img,
.bath__photo .bath01__thumb img {
	border-radius: 5px;
}
.bath01__thumb--item { width: calc( ( 100% - 8px ) / 3 ); }

.bath__txt .bath02__thumb {
	width: 70%;
	margin: 32px auto 0;
	display: flex;
    justify-content: space-between;
}
.bath__photo .bath02__thumb { display: none; }
.bath02__thumb--item { width: calc( ( 100% - 4px ) / 2 ); }
.bath__txt .bath02__thumb img,
.bath__photo .bath02__thumb img {
	border-radius: 5px;
}

.goods { margin-bottom: 96px; }
.goods__item {
    display: flex;
    justify-content: space-between;
}
.goods__txt { width: calc( 630 / 1120 * 100% ); }
.goods__photo { 
	width: calc( ( 1120 - 630 - 32 ) / 1120 * 100% );
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.goods-notes { margin-top: 24px; }
.goods-notes p {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: .5em;
}

.experience__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
}
.experience__txt { 
	width: calc( 560 / 1120 * 100% );
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.experience__photo { width: calc( ( 1120 - 560 - 32 ) / 1120 * 100% ); }
.experience-sample {
	width: calc( 960 / 1120 * 100% );
	margin: 64px auto 0;
    display: flex;
    justify-content: space-between;
}
.experience-sample__txt { 
	width: calc( 540 / 960 * 100% );
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.experience-sample__photo { width: calc( ( 960 - 540 ) / 1120 * 100% ); }


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.bath__txt .bath01__thumb { 
	width: 70%;
	margin: 24px auto 0;
	display: flex;
    justify-content: space-between;
}
.bath__txt .bath02__thumb {
	width: 50%;
	margin: 24px auto 0;
	display: flex;
    justify-content: space-between;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 992px) {

.bath__item,
.bath__item:nth-of-type(2) {
    display: flex;
	flex-direction: column-reverse;
	width: 95%;
	margin: 0 auto 64px;
}
.bath__photo,
.bath__txt { 
	width: 100%;
}
.bath__txt { margin-bottom: 32px; }
.bath__txt .bath01__thumb { display: none; }
.bath__photo .bath01__thumb { 
	width: 50%;
	margin: 5px auto 0;
	display: flex;
    justify-content: space-between; 
}
.bath__txt .bath02__thumb { display: none; }
.bath__photo .bath02__thumb { 
	width: 40%;
	margin: 5px auto 0;
	display: flex;
    justify-content: space-between; 
}
}




/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.room__item,
.room__item:nth-of-type(2n) {
    display: flex;
	flex-direction: column-reverse;
	width: 95%;
	margin: 0 auto 64px;
}
.room__photo,
.room__txt { 
	width: 100%;
}
.room__txt { margin-bottom: 32px; }
.room__photo .wa-you__thumb {
	width: 30%;
	margin: 5px auto 0;
	display: flex;
    justify-content: space-between;
}
.room__txt .wa-you__thumb { display: none; }
.steam {
	width: 100%;
    display: flex;
    flex-direction: column-reverse;
}
.steam-image,
.steam-desc { 
	width: 100%;
}
.steam-desc { margin-bottom: 32px; }

.goods__item {
    display: flex;
    flex-direction: column;
}
.goods__txt { 
	width: 100%;
	margin-bottom: 32px;
}
.goods__photo { 
	width: 80%;
	margin: 0 auto;
}

.experience__item {
    display: flex;
	flex-direction: column-reverse; 
}
.experience__txt { 
	width: 100%;
	margin-bottom: 32px;
}
.experience__txt h2 br { display: none; }
.experience__photo { 
	width: 80%;
	margin: 0 auto;
}
.experience-sample { width: 100%; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.experience-sample {
    display: flex;
    flex-direction: column;
}
.experience-sample__txt { 
	width: 100%;
	margin-bottom: 32px; 
}
.experience-sample__photo { 
	width: 70%;
	margin: 0 auto;
}
}



/**********************************************************************************


	5. 料理案内 / cuisine


***********************************************************************************/
.cuisine-lead__item {
	display: flex;
	justify-content: space-between;
}
.cuisine-lead__txt { width: calc( ( 960 - 560 - 32 ) / 960 * 100% ); }
.cuisine-lead__txt p { margin-bottom: .5em; }
.cuisine-lead__title { margin-bottom: 32px; }
.cuisine-lead__photo { width: calc( 560 / 960 * 100% ); }
.cuisine-lead__photo img { border-radius: 5px; }

.course-standard {
	width: calc( 960 / 1120 * 100% );
	margin: 0 auto 64px;
}
.course-standard__txt { margin-top: 32px; }
.standard__photo img { border-radius: 5px; }
.standard__thumb {
	display: flex;
    justify-content: space-between;
    margin-top: 4px;
}
.standard__thumb--item { width: calc( ( 100% - 24px ) / 7 ); }

/***----- 基本 -----***/
.course-detail {
	display: flex;
	justify-content: space-between;
	margin-bottom: 64px;
}
.course-detail:last-of-type { margin-bottom: 0; }
.course-detail.kinmedai {
	display: flex;
	flex-direction: row-reverse;
}
.course-detail__photo { width: calc( 630 / 1120 * 100% ); }
.course-detail__photo img { border-radius: 5px; }
.course-detail__txt { 
	width: calc( ( 1120 - 32 - 630 ) / 1120 * 100% );
	position: relative;
}

/***----- 伊勢海老 -----***/
.course-detail__txt .course-detail__thumb--iseebi {
	width: 60%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.course-detail__thumb--iseebi .course-detail__thumb--item { width: calc( ( 100% - 4px ) / 2 ); }
.course-detail__photo .course-detail__thumb--iseebi { display: none; }
.course-detail__thumb--iseebi img { border-radius: 5px; }


/***----- 金目鯛 -----***/
.course-detail__txt .course-detail__thumb--kinmedai {
	width: 60%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.course-detail__thumb--kinmedai .course-detail__thumb--item { width: calc( ( 100% - 4px ) / 2 ); }
.course-detail__photo .course-detail__thumb--kinmedai { display: none; }
.course-detail__thumb--kinmedai img { border-radius: 5px; }

/***----- キッズ -----***/
.course-detail__txt .course-detail__thumb--kids {
	width: 90%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.course-detail__photo .course-detail__thumb--kids { display: none; }
.course-detail__thumb--kids .course-detail__thumb--item { width: calc( ( 100% - 8px ) / 3 ); }
.course-detail__thumb--kids img { border-radius: 5px; }

/***----- お米 -----***/
.rice { 
	width: calc( 960 / 1120 * 100% );
	margin: 0 auto 64px;
	display: flex;
	justify-content: space-between;
}
.rice__photo { width: calc( ( 1120 - 32 - 630 ) / 1120 * 100% ); }
.rice__photo img { border-radius: 5px; }
.rice__txt { width: calc( 630 / 1120 * 100% ); }

/***----- 朝食 -----***/
.course-detail.breakfast {
	display: flex;
	flex-direction: row-reverse;
}
/***----- ケーキ -----***/
.cake .course-detail__txt,
.breakfast .course-detail__txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/***----- BBQ -----***/
.course-detail__txt .course-detail__thumb--bbq {
	width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.course-detail__photo .course-detail__thumb--bbq { display: none; }
.course-detail__thumb--bbq .course-detail__thumb--item { width: calc( ( 100% - 6px ) / 4 ); }
.course-detail__thumb--bbq img { border-radius: 5px; }

.bbq__lead { 
	text-align: center;
	margin-top: -32px;
	margin-bottom: 64px;
}
.bbq .section-title__large br.sp { display: none; }

.bbq-notes { 
	display: flex;
	justify-content: space-between;
	margin-bottom: 64px;
}
.bbq-notes__photo {	width: calc( 630 / 1120 * 100% ); }
.bbq-notes__txt {
	width: calc( ( 1120 - 630 - 32 ) / 1120 * 100% );
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bbq-notes__photo img { border-radius: 5px; }
.bbq__summary {
	width: 100%;
    border-top: 1px solid var(--gray);
    border-right: 1px solid var(--gray);
    border-spacing: 0;
    margin-bottom: .5em;
}
.bbq__summary td:first-of-type { 
	width: calc( 220 / 1120 * 100% );
	background-color: rgba(80, 177, 47, .2);
	text-align: left;
}
.bbq__summary td:nth-of-type(2),
.bbq__summary td:nth-of-type(3),
.bbq__summary td:nth-of-type(4) { 
	width: calc( 300 / 1120 * 100% );
	background-color: #fff;
}
.bbq__summary th, .bbq__summary td {
    border-bottom: 1px solid var(--gray);
    border-left: 1px solid var(--gray);
    padding: .75em 1em;
}
.bbq__summary th { 
	background-color: var(--key-color); 
	color: #fff;
	text-align: left;
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.cuisine-lead__item { width: 95%; margin: 0 auto; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 992px) {

.course-detail {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}
.course-detail.kinmedai {
	display: flex;
	flex-direction: column-reverse;
}
.course-detail__photo { width: calc( 960 / 1120 * 100% ); }
.course-detail__txt { 
	width: calc( 960 / 1120 * 100% );
	margin-bottom: 32px; 
}
/***----- 伊勢海老 -----***/
.course-detail__photo .course-detail__thumb--iseebi {
	width: 50%;
    position: statics;
	margin: 5px auto 0;
    display: flex;
    justify-content: space-between;
}
.course-detail__thumb--iseebi .course-detail__thumb--item { width: calc( ( 100% - 4px ) / 2 ); }
.course-detail__txt .course-detail__thumb--iseebi { display: none; }

/***----- 金目鯛 -----***/
.course-detail__photo .course-detail__thumb--kinmedai {
	width: 50%;
    position: statics;
	margin: 5px auto 0;
    display: flex;
    justify-content: space-between;
}
.course-detail__thumb--kinmedai .course-detail__thumb--item { width: calc( ( 100% - 4px ) / 2 ); }
.course-detail__txt .course-detail__thumb--kinmedai { display: none; }

/***----- キッズ -----***/
.course-detail__photo .course-detail__thumb--kids {
	width: 60%;
    position: statics;
	margin: 5px auto 0;
    display: flex;
    justify-content: space-between;
}
.course-detail__txt .course-detail__thumb--kids { display: none; }
.course-detail__thumb--kids .course-detail__thumb--item { width: calc( ( 100% - 8px ) / 3 ); }

.course-detail.breakfast {
	display: flex;
	flex-direction: column-reverse;
}

/***----- BBQ -----***/
.course-detail__photo .course-detail__thumb--bbq {
	width: 70%;
    position: statics;
	margin: 5px auto 0;
    display: flex;
    justify-content: space-between;
}
.course-detail__txt .course-detail__thumb--bbq { display: none; }
.course-detail__thumb--bbq .course-detail__thumb--item { width: calc( ( 100% - 8px ) / 4 ); }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.cuisine-lead__item {
	display: flex;
	flex-direction: column;
}
.cuisine-lead__txt,
.cuisine-lead__photo { 
	width: 90%;
	margin: 0 auto;
}
.cuisine-lead__txt { margin-bottom: 32px; }

.bbq__summary { width: 100%; border:none; }
.bbq__summary thead { display: none;}
.bbq__summary td:first-of-type,
.bbq__summary td:nth-of-type(2),
.bbq__summary td:nth-of-type(3),
.bbq__summary td:nth-of-type(4) { 
	width: 100%;
}
.bbq__summary tr {
    border-top: 1px solid var(--gray);
    display: block;
    margin-bottom: 20px;
}
.bbq__summary td {
    border-right: 1px solid var(--gray);
    border-bottom: none;
    display: block;
    padding: 0 0 .5em;
}
.bbq__summary td p { padding: .75em 1em; }

/* tdのデザイン */
.bbq__summary td:nth-of-type(1) { 
	background-color: var(--key-color); 
	color: #fff; 
	padding: .75em 1em;
}
.bbq__summary td:last-child { border-bottom: 1px solid var(--gray);}
     
/*td:beforeのデザイン*/
.bbq__summary td:before {
    background-color: rgba(80, 177, 47, .2);
    display: block;
    padding: .75em 1em;
    margin-bottom: .5em;
}
 
/* contentでタイトルを追加 */
.bbq__summary td:nth-of-type(2):before { content: "大人（小学生以上）"; }
.bbq__summary td:nth-of-type(3):before { content: "幼児セット"; }
.bbq__summary td:nth-of-type(4):before { content: "幼児食事なし"; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 768px) {


}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.rice { 
	width: 90%;
	margin: 0 auto 64px;
	display: flex;
	flex-direction: column;
}
.rice__photo,
.rice__txt { width: 100%; }
.rice__txt { margin-bottom: 32px; }

.bbq-notes { 
	display: flex;
	flex-direction: column;
}
.bbq-notes__photo,
.bbq-notes__txt {
	width: 100%;
}
.bbq-notes__txt { margin-bottom: 32px; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.course-standard { width: 100%; }

.course-detail,
.course-detail__photo,
.course-detail__txt { 
	width: 100%;
}
.rice { 
	width: 95%;
}
.bbq .section-title__large br.sp { display: inline-block; }

}



/**********************************************************************************


	6. ご予約料金・団体貸切 / price


***********************************************************************************/
.price-notes { margin: .5em 0 64px; }
.price-notes p {
    padding-left: 1em;
    text-indent: -1em;
}

.cancel-policy { margin-top: 64px; }
.cancel__list { 
	display: flex;
	border: 1px solid var(--gray);
}
.cancel__item {
	width: calc( 100% / 5 );
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--gray);
}
.cancel__item:last-of-type { border-right: 0; }
.cancel__days,
.cancel__price {
	padding: 1em;
}
.cancel__days { 
	background-color: rgba(80,177,47,.1);
	border-bottom: 3px solid var(--key-color); 
}
.cancel-notes { margin-top: .5em; }
.cancel-notes p {
    padding-left: 1em;
    text-indent: -1em;
}

.training-camp__item { 
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.training-camp__txt { width: calc( 630 / 1120 * 100% ); }
.training-camp__photo { width: calc( ( 1120 - 630 - 32 ) / 1120 * 100% ); }
.training-camp__info {
	margin: 32px auto 0;
}
.training-camp__info p:first-of-type { margin-bottom: 16px; }
.training-camp__info img { box-shadow: var(--shadow); }
.training-camp__info.sp {
	display: none;
}



/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.cancel__list { 
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gray);
}
.cancel__item {
	width: 100%;
    display: flex;
    flex-direction: column;
    border-right: none;
}
.cancel__days { 
	background-color: rgba(80,177,47,.1);
	border-top: 1px solid var(--gray);
	border-bottom: 3px solid var(--key-color); 
}
.cancel__item:first-of-type .cancel__days { border-top: none; }

.training-camp__info {
	display: none;
}
.training-camp__info.sp {
	display: inline-block;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.training-camp__item { 
	display: flex;
	flex-direction: column;
}
.training-camp__txt { 
	width: 100%;
	margin-bottom: 32px;
}
.training-camp__photo { 
	width: 100%;
	margin: 0 auto;
}
}

/**********************************************************************************


	7. アクセス&周辺 / access


***********************************************************************************/
.gmap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;/*比率をお好みで*/
}
.gmap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.access-info { margin-top: 16px; }
.access-info__title {
	font-size: 1.8rem;
	margin-bottom: 4px;
}
.check-br { display: none; }

.sightseeing-spot__lead {
	text-align: center;
	margin: -32px 0 64px;
}
.sightseeing-spot__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.sightseeing-spot__item {
	width: calc( ( 100% - 32px ) / 2 );
	background-color: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-radius: 0 0 3px 3px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	position: relative;
}
.sightseeing-spot__item figure { margin-bottom: 80px; }
.sightseeing-spot__image { border-radius: 3px 3px 0 0; }
.sightseeing-spot__detail { padding: 32px; }
.sightseeing-spot__name {
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--key-color);
	margin-bottom: 8px;
}
a .sightseeing-spot__txt { color: var(--black); }
a:hover .sightseeing-spot__txt { 
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 5px;
}

.go-website { 
	position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 768px) {

.sightseeing-spot__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.sightseeing-spot__item {
	width: 100%;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.check-br { display: inline-block; }
.slash_sp { display: none; }

}



/**********************************************************************************


	8. 新着情報 / news


***********************************************************************************/
.news__list { 
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
} 
.news__item { 
	width: calc( ( 100% - 64px ) / 3 );
	background-color: #fff;
	box-shadow: var(--shadow);
	margin-bottom: 64px;
}
.news-detail { 
	display: flex;
    flex-direction: column;
	padding: 1em 1em 1.5em 1em;
}
.news-title { 
	order: 2;
	color: var(--dark-green);
	font-family: var(--font-gothic);
	font-size: 1.6rem;
	font-weight: normal;
}
.news-date { 
	order: 1;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--key-color);
	margin-bottom: .5em;
}


.news-single .news__item { 
	width: 100%;
	margin-bottom: 0;
}
.news-single .news-detail { 
	display: flex;
    flex-direction: column;
	padding: 1.5em;
}
.news-single .news-title { 
	order: 2;
	color: var(--dark-green);
	font-family: var(--font-gothic);
	font-size: 1.6rem;
	font-weight: normal;
	padding-bottom: 1em;
	border-bottom: 3px dotted #ccc;
	margin-bottom: 1em;
}
.news-box { order: 3; }


/** media Queries
===================================================================================*/
@media only screen and (max-width: 768px) {

.news__item { 
	width: calc( ( 100% - 32px ) / 2 );
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 576px) {

.news__item { width: 100%; }
.news__item:last-of-type { margin-bottom: 0; }

}



/**********************************************************************************


	9. フォトギャラリー / gallery


***********************************************************************************/
.gallery__list {
    display: flex;
    flex-wrap: wrap;
}
.gallery__item {
	width: calc( ( 100% - 40px ) / 5 );
	margin-right: 10px;
	margin-bottom: 30px;
}
.gallery__item:nth-of-type(5n) { margin-right: 0; }

.gallery__item::after {
	content: attr(title);
	display: block;
	color: #777;
	text-align: center;
	margin-top: .5em;
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.gallery__item {
	width: calc( ( 100% - 20px ) / 3 );
	margin-right: 10px;
	margin-bottom: 30px;
}
.gallery__item:nth-of-type(5n) { margin-right: 10px; }
.gallery__item:nth-of-type(3n) { margin-right: 0; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.gallery__item {
	width: calc( ( 100% - 10px ) / 2 );
	margin-right: 10px;
	margin-bottom: 30px;
}
.gallery__item:nth-of-type(3n) { margin-right: 10px; }
.gallery__item:nth-of-type(2n) { margin-right: 0; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.gallery__item {
	width: 100%;
	margin-right: 0;
	margin-bottom: 30px;
}
.gallery__item:nth-of-type(3n) { margin-right: 0; }
.gallery__item:nth-of-type(2n) { margin-right: 0; }

}



/**********************************************************************************


	footer


***********************************************************************************/
footer { 
	min-width: 1200px;
	position: relative;
	background-color: rgba(80,177,47,.3);
}
.footer__inner { 
	width: 1120px; 
	padding: 80px 0; 
	margin: 0 auto;
}
.footer-nav { margin-bottom: 40px; }
.footer-nav__list {
	display: flex;
	justify-content: center;
}
.footer-nav__list li {
	font-size: 1.4rem;
	margin-right: 2em;
	position: relative;
}
.footer-nav__list li:last-of-type { margin-right: 0; }
.footer-nav__list li a {
	text-decoration: none;
	color: var(--black);
}
.footer-nav__list li a:hover {
	text-decoration: underline;
}
.footer-info__area {
	width: calc( 1000 / 1120 * 100% );
	display: flex;
	margin: 0 auto;
}
.footer-info { width: calc( ( 1000 - 540 ) / 1000 * 100% ); }
.footer-bnr__plan { 
	width: calc( 540 / 1000 * 100% );
	margin-top: auto; 
}

.footer-info br.sp { display: none; }
.footer-info span.sp { display: inline-block; }
.font-14 { font-size: 1.4rem; }
.footer-logo { margin-bottom: .5em; }
.copy {
	width: 100%;
	min-width: 1200px;
	height: 30px;
	line-height: 30px;
	font-size: 1.2rem;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	text-align: center;
	color: #fff;
	background-color: var(--dark-green);
}
.liberty img { margin-right: 5px; vertical-align: middle; }

/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

footer { 
	min-width: 100%;
	min-height: 100%; 
}
.footer__inner { 
	width: 100%;
	min-width: 100%;
	padding: 64px 15px;
}
.footer-nav { display: none; }
.footer-info { width: 100%; }
.copy { 
	width: 100%;
	min-width: 100%;
}
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.footer__inner { 
	padding:  32px 0 56px; 
	margin: 0 auto;
}
.footer-info__area {
	display: flex;
	flex-direction: column;
}
.footer-info { 
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footer-bnr__plan { 
	width: 100%;
	margin-top: 32px; 
}
.footer-logo { margin-bottom: 24px; }

}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

footer { min-height: 100%; }

.footer-info { 
	width: 100%;
	padding: 0 20px;
}
.footer-info br.sp { display: block; }
.footer-info span.sp { display: none; }

}



/**********************************************************************************


	buttons


***********************************************************************************/
.button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

/***----- 詳細を見るボタン -----***/
.button.go-detail {
	width: 180px;
	height: 44px;
	line-height: 44px;
	margin: 24px auto 0;
}
.button.go-detail a {
	display: block;
	text-align: center;
	color: var(--key-color);
	text-decoration: none;
	background-color: #fff;
	border-radius: 22px;
	box-shadow: 0 0 0 1px var(--key-color);
}
.button.go-detail a:hover { 
	background-color: var(--key-color);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(80,177,47,.3);
}

/***----- プラン一覧を見るボタン -----***/
.btn_go-plan { 
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 64px;
}
.button.go-plan {
	width: 360px;
	height: 54px;
	line-height: 54px;
}
.button.go-plan a {
	display: block;
	text-align: center;
	color: var(--key-color);
	text-decoration: none;
	background-color: #fff;
	border-radius: 27px;
	box-shadow: 0 0 0 1px var(--key-color);
}
.button.go-plan a:hover { 
	background-color: var(--key-color);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(80,177,47,.3);
}

/***----- 外部サイトに行く -----***/
.button.go-website {
	width: 180px;
	height: 44px;
	line-height: 44px;
	margin: 0 auto;
}
a .button.go-website  {
	display: block;
	text-align: center;
	color: var(--key-color);
	text-decoration: none;
	background-color: #fff;
	border-radius: 22px;
	box-shadow: 0 0 0 1px var(--key-color);
}
a .button.go-website:hover  { 
	background-color: var(--key-color);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(80,177,47,.3);
}


/** media Queries
===================================================================================*/
@media only screen and (max-width: 376px) {

.button.go-plan { width: 90%; }

}



/**********************************************************************************


	※ pagetopに戻る
	
	
***********************************************************************************/
#page-top {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 10px;
	font-size: 86%;
	z-index: 99999;
}
#page-top a {
	width: 69px;
	height: 50px;
    display: block;
    white-space: nowrap;
  	text-indent: 100%;	
    overflow: hidden;
    background: url(common/btn_pagetop.png);
}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

#page-top {
	bottom: 15px;
	right: 5px;
}
}


/**********************************************************************************


	改行
	
	
***********************************************************************************/
.pc { display: inline-block !important; }
.sp-1024,
.sp-992,
.sp-800,
.sp-768,
.sp-640,
.sp-576,
.sp-480,
.sp-376 {
	display: none;
}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 1024px) {

.pc { display: none !important; }
.sp-992,
.sp-800,
.sp-768,
.sp-640,
.sp-576,
.sp-480,
.sp-376 {
	display: none;
}
.sp-1024 { display: inline-block; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 992px) {

.pc { display: none; }
.sp-1024,
.sp-800,
.sp-768,
.sp-640,
.sp-576,
.sp-480,
.sp-376 {
	display: none;
}
.sp-992 { display: inline-block !important; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 800px) {

.pc { display: none; }
.sp-1024,
.sp-992,
.sp-768,
.sp-640,
.sp-576,
.sp-480,
.sp-376 {
	display: none;
}
.sp-800 { display: inline-block !important; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 768px) {

.pc { display: none; }
.sp-1024,
.sp-992,
.sp-800,
.sp-640,
.sp-576,
.sp-480,
.sp-376 {
	display: none;
}
.sp-768 { display: inline-block !important; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 640px) {

.pc { display: none ; }
.sp-1024,
.sp-992,
.sp-800,
.sp-768,
.sp-576,
.sp-480,
.sp-376 {
	display: none;
}
.sp-640 { display: inline-block !important; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 576px) {

.pc { display: none; }
.sp-1024,
.sp-992,
.sp-800,
.sp-768,
.sp-640,
.sp-480,
.sp-376 {
	display: none;
}
.sp-576 { display: inline-block !important; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 480px) {

.pc { display: none; }
.sp-1024,
.sp-992,
.sp-800,
.sp-768,
.sp-640,
.sp-576,
.sp-376 {
	display: none;
}
.sp-480 { display: inline-block !important; }

}

/** media Queries
===================================================================================*/
@media only screen and (max-width: 376px) {

.pc { display: none; }
.sp-1024,
.sp-992,
.sp-800,
.sp-768,
.sp-640,
.sp-576,
.sp-480 {
	display: none;
}
.sp-376 { display: inline-block !important; }

}


/**********************************************************************************


	google material icons
	
	
***********************************************************************************/
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 32px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-moz-font-feature-settings: 'liga';
	-moz-osx-font-smoothing: grayscale;
	display: inline-flex;
	vertical-align: middle;
}

/*** attachment
***********************************************************************************/
.mt05 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt55 { margin-top: 55px; }
.mt60 { margin-top: 60px; }
.mt65 { margin-top: 65px; }
.mt70 { margin-top: 70px; }
.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb65 { margin-bottom: 65px; }
.mb70 { margin-bottom: 70px; }
.mb100 { margin-bottom: 100px; }

.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }





.kanri{
	text-align: right;
	font-size:11px;	
	    padding: 1.5em;
}
.kanri a{
	text-align: right;
	font-size:11px;	
	color: #1D1D1D;
}
.pNav{
	font-size:11px;	
	    padding: 1.5em;
}

.pNav a{
	color: #1D1D1D;
}
