@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
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,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
   ================================================*/
body {
    font-size:14px;
    //font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    color:#352f25;
    line-height:1.6;
    font-family: 'Kosugi', sans-serif;
}

#contents {
    width:980px;
    margin:0 auto;
}

a {
    color:#f39100;
}
a:hover {
    color:#d98200;
}

h1 {
    font-size:28px;
}

h2 {
    clear:both;
    margin-top:30px;
    margin-bottom:1em;
    font-size:28px;
    color:#655844;
    text-align:center;
}

h2:before {
    position: relative;
    top: 10px;
    content: url('../images/spring_clover.png');
}


h2 span {
    display:block;
    font-size:13px;
    text-decoration:none !important;
    font-weight:bold;
}

h3 {
    margin-bottom:0.25em;
    font-size:18px;
    color:#e65305;
    font-weight:bold;
}

h4 {
    margin-bottom:0.25em;
    font-size:16px;
    font-weight:bold;
}

h5 {
    margin-bottom:0.25em;
    padding-left:25px;
    font-size:16px;
    background:url('../images/bg_arrow_black.png') 0 50% no-repeat;
}

h6 {
    margin-bottom:0.25em;
    padding-left:5px;
    font-size:16px;
}

p {
    margin:0 0 3em 0;
}

img {
    vertical-align:bottom;
}

em {
    font-weight:bold;
}

strong {
    font-weight:bold;
    color:#ff0000;
}

pre {
    margin:1em 0;
    padding:1em;
}

blockquote {
    margin-bottom:1em;
    padding:1em;
    border:1px dotted #9b8462;
    border-left:5px solid #9b8462;
}

ul,ol,dl {
    margin:0 0 1em 0;
}
ul li {
    list-style:disc;
}

ul.none li {
    list-style:none;
}

ul.inline li {
    display: inline;
}

ol li {
    list-style:decimal;
}

dt {
    margin-bottom:0.5em;
    border-bottom:1px dotted #ddd;
}
dd {
    margin-bottom:1em;
}

table {
    width:100%;
    margin-bottom:1em;
    border-collapse:collapse;
    border:1px solid #9b8462;
}
th {
    padding:10px;
    max-height: 20px;
    text-align:center;
    vertical-align:middle;
    border:1px solid #9b8462;
    background:#ede2d5;
}
td {
    padding:10px;
    width: 20vh;
    max-height: 20px;
    text-align:center;
    vertical-align:middle;
    border:1px solid #9b8462;
}

/*================================================
 *  汎用クラス
   ================================================*/
.conL {
    clear:both;
    box-sizing:border-box;
    float:left;
    width:50%;
    padding-right:10px;
}

.conR {
    box-sizing:border-box;
    float:right;
    width:50%;
    padding-left:10px;
}

.name {
    margin-left:2em;
    font-size:13px;
}

.menu {
    overflow:hidden;
    margin-bottom:80px;
    padding:20px;
    border-radius: 10px;
    background:#ede2d5;
}

.menu  div {
    position:relative;
}

.menu .innerL {
    box-sizing:border-box;
    width:50%;
    float:left;
    padding-right:20px;
}

@media screen and (max-width:767px) {
    .menu .innerL {
	padding-right:0;
	padding-bottom:2em;
    }
}


.menu .innerL div {
    position:relative;
    margin-bottom:2em;
}
.menu .innerL div:last-child {
    margin-bottom:0;
}

.menu .innerR {
    box-sizing:border-box;
    width:50%;
    float:right;
    padding-left:20px;
}

@media screen and (max-width:767px) {
    .menu .innerR {
	padding-left:0;
    }
}


.menu .innerR div {
    position:relative;
    margin-bottom:2em;
}
.menu .innerR div:last-child {
    margin-bottom:0;
}

.menu p {
    margin-bottom:0;
}

.menu .price {
    position:absolute;
    top:0;
    right:0;
}

.textC {
    text-align:center;
}

.menu h4:before {
    content:'・';
}

.map {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom:40px;
}

.map iframe,
.map object,
.map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 写真中央寄せ */
.imgC {
    clear:both;
    overflow:hidden;
    margin-bottom:50px;
    text-align:center;
}
.imgC img {
    border-radius:5px;
    margin-bottom:0.5em;
}

/* 写真左寄せ */
.imgL {
    clear:both;
    overflow:hidden;
    margin-bottom:50px;
}
.imgL img {
    float:left;
    margin:0 2em 2em 0;
    border-radius:5px;
}

/* 写真右寄せ */
.imgR {
    clear:both;
    overflow:hidden;
    margin-bottom:50px;
}

.imgR img {
    float:right;
    margin:0 0 2em 2em;
    border-radius:5px;
}

/* 2カラム（スマートフォンでは1カラム) */
.twoCol {
    overflow:hidden;
    margin-bottom:50px;
}
.twoColInner {
    overflow:hidden;
    margin-right:-2%;
}
.twoColInner div {
    width:48%;
    float:left;
    margin-right:2%;
}
.twoColInner div:nth-child(2n+1) {
    clear:both;
}
.twoColInner img {
    width:100%;
    margin-bottom:0.5em;
    border-radius:5px;
}

/* 3カラム（スマートフォンでは1カラム) */
.threeCol {
    overflow:hidden;
    margin-bottom:50px;
}
.threeColInner {
    overflow:hidden;
    margin-right:-3%;
}
.threeColInner div {
    width:31%;
    float:left;
    margin-right:2%;
}
.threeColInner div:nth-child(3n+1) {
    clear:both;
}
.threeColInner img {
    width:100%;
    margin-bottom:0.5em;
    border-radius:5px;
}

/* ボタン（タイプ1） */
.btn01 a {
    display:inline-block;
    padding:10px 10px 10px 40px;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    background:#867254 url('../images/bg_arrow_white.png') 10px 50% no-repeat;
    transition:all 0.2s ease 0s;
}
.btn01 a:hover {
    background:#6d5d45 url('../images/bg_arrow_white.png') 10px 50% no-repeat;
    transition:all 0.2s ease 0s;
}

/* ボタン（タイプ2） */
.btn02 a {
    display:inline-block;
    padding:10px;
    color:#6d5d45;
    text-decoration:none;
    border-radius:5px;
    border:1px solid #6d5d45;
    background:#fff;
    transition:all 0.2s ease 0s;
}
.btn02 a:hover {
    color:#fff;
    background:#6d5d45;
    transition:all 0.2s ease 0s;
}

/*================================================
 *  ヘッダー
   ================================================*/
header {
    position:fixed;
    top:0;
    z-index:100;
    width:100%;
    background-color:rgba(250,255,250,0.8)

}


header h1 {
    padding:5px 0;
}

header h1 a {
    color:#fff;
    text-decoration:none;
}

header h1 a:hover {
    color:#fff465;
}

header .inner {
    position:relative;
    width:980px;
    margin:0 auto;
}

/* グローバルナビゲーション */
header nav.full {
    overflow:hidden;
    position:absolute;
    top:0;
    right:0;
    padding-top:16px;
}
header nav.full ul {
    margin:0 0 0 -10px;
}
header nav.full li {
    position:relative;
    float: left;
    list-style:none;
    margin:0px;
    padding-left:10px;
}

header nav.full li a {
    font-weight:bold;
    color:#909090;
    text-decoration:none;
    display: block; /*クリックできる領域を広げる*/
    padding: 1em 0;
}

header nav.full li a:hover {
    color:#ffa06d;
    text-decoration:underline;;
}

li.address, li.phone_number {
    display: block;
}

li div.Toggle {
    display: none;
}

/*================================================
 *  メイン
   ================================================*/
main {
    width:100%;
}

section {
    margin-bottom:10%;
}

/*================================================
 *  フッター
   ================================================*/
footer {
    clear:both;
    padding:2% 0;
    font-size:11px;
    text-align:center;
}

/*================================================
 *  ページトップへの戻り
   ================================================*/
.totop {
    position:fixed;
    bottom:15px;
    right:15px;
    z-index:999;
}
.totop a {
    display:block;
    text-decoration:none;
}
.totop img {
    background:#867254;
}
.totop img:hover {
    background:#6d5d45;
}

/*================================================
 *  スライドショー
   ================================================*/
.slide {
    overflow:hidden;
    position:relative;
}

.slide nav {
    overflow:hidden;
    position:absolute;
    bottom:0;
    width:100%;
    z-index: 105;
    background-color:rgba(250,255,250,0.8)
}
.slide nav ul {
    margin:0;
}
.slide nav li {
    position:relative;
    float: left;
    list-style:none;
    margin:0px;
    padding:20px 20px;
}

.slide nav li:hover {
    background-color:rgba(200, 255, 200,0.4)
}

.slide nav li a {
    font-weight:bold;
    color:#493349;
    text-decoration:none;
    display: block; /*クリックできる領域を広げる*/
    padding: 1em 0;
}

.slide nav li a:hover {
    color:#338833;
    text-decoration:underline;;
}


.slideInner {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.slideInner li {
    position:absolute;
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
    list-style:none;
}
.slideInner li img {
    max-width:100%;
}

/*================================================
 *  タブレット向けデザイン
   ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
    header h1 {
	margin-left:10px;
    }

    header .inner {
	width:100%;
    }

    header li.phone_number {
	//position:relative;
	//padding:0 0 10px 0;
	display: none;
    }

    #contents {
	box-sizing:border-box;
	width:100%;
	padding:0 10px;
    }
}

/*================================================
 *  スマートフォン向けデザイン
   ================================================*/
@media screen and (max-width:767px) {

    header button {
	display: block;
    }

    li.address, li.phone_number {
	//position:relative;
	//padding:0 0 10px 0;
	display: none;
    }

    li div.Toggle {
	//position:relative;
	//padding:0 0 10px 0;
	display: block;
    }
    
    .slide nav {
	//position:relative;
	//padding:0 0 10px 0;
	display: none;
    }

    h2 {
	margin-top:30px;
    }

    .conL {
	float:none;
	width:100%;
	padding-right:0;
    }

    .conR {
	float:none;
	width:100%;
	padding-left:0;
    }

    .menu {
	margin-bottom:40px;
    }

    .menu .innerL,
    .menu .innerR {
	float:none;
	width:100%;
    }

    .imgC {
	margin-bottom:30px;
    }
    .imgC img {
	max-width:100%;
    }

    .imgL {
	margin-bottom:30px;
    }
    .imgL img {
	display:block;
	float:none;
	max-width:100%;
	margin:0 auto 1em auto;
    }

    .imgR {
	margin-bottom:30px;
    }
    .imgR img {
	display:block;
	float:none;
	max-width:100%;
	margin:0 auto 1em auto;
    }

    .twoCol {
	margin-right:0;
	margin-bottom:30px;
    }
    .twoColInner {
	margin-right:0;
    }
    .twoColInner div {
	float:none;
	width:100%;
    }

    .twoColInner div img {
	float:none;
	height:280px;
    }

    .threeCol {
	margin-bottom:30px;
    }

    .threeColInner {
	margin-right:0;
    }
    .threeColInner div {
	float:none;
	width:100%;
    }
}


/*ナビメニューのスタイルを指定*/
header nav.mobileMenu{
    position: fixed; /*表示位置を固定*/
    z-index: 2; /*重ね順を変更*/
    color: #000; /*文字色を黒にする*/
    text-align: right; /*テキストを中央揃え*/
    left:0;
    top:0;
    bottom:0;
    width: 100%; /*全幅表示*/
    transform: translateX(100%); /*ナビを上に隠す*/
    transition: all 0.4s; /*アニメーションの時間を指定*/
}

header nav.mobileMenu ul{
    background: rgba(250,255,250,0.9);
    width: 100%;
    padding: 0;
}

header nav.mobileMenu ul li{
    font-size: 1.1em;
    list-style-type: none;
    padding-right: 2em;
    width: 100%;
    border-bottom: 1px solid #CCC;
}

header nav.mobileMenu ul li:last-child{
    text-align: center;
    font-size: 1em;
    padding: 2em;
    background:#ede2d5;
    left:0;
}

header nav.mobileMenu ul li:last-child a{
    padding: 0;
    display: inline;
}

header nav.mobileMenu ul li a{
    display: block; /*クリックできる領域を広げる*/
    color: #000;
    padding: 1em 0;
}

    /*トグルボタンが押されたときに付与するクラス*/
    header nav.mobileMenu.active{
	transform: translateX(0%);
    }

    /*トグルボタンが押されたときに付与するクラス*/
    header nav.mobileMenu.active{
	transform: translateX(0%);
    }
    /*トグルボタンのスタイルを指定*/
    .Toggle {
	display: block;
	position: fixed;    /* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 12px;
	width: 42px;
	height: 42px;
	cursor: pointer;
	z-index: 3;
    }

    .Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #000;
	-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
	-moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
	transition: .35s ease-in-out;			/*変化の速度を指定*/
	left: 6px;
    }

    .Toggle span:nth-child(1) {
	top: 9px;
    }

    .Toggle span:nth-child(2) {
	top: 18px;
    }

    .Toggle span:nth-child(3) {
	top: 27px;
    }

    /* 最初のspanをマイナス45度に */
    .Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-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);
    }

.price ul li { list-style-type:none; background-image:none; padding-left:0; }
.price ul {
    padding: 0.5em 0;
    border: none;
}

.price ul li{
    position:relative;
    padding: 0.3em 0 0.3em 2em;
    line-height: 1.5;
    font-size: 1.1em;
    text-align: left;
}


.price ul li:after,
.price ul li:before {
    content:''; 
    position:absolute; 
    top: 7px;
    left: 11px;
    height: 18px;
    width:4px; 
    background:#f39100;
    border-radius:10px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

.price ul li:after {
    top: 14px;
    left: 3px;
    height: 10px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}