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

/* ===================================================================
 Reset
=================================================================== */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
 margin: 0; padding: 0; border: 0; font-weight: normal; font-size: 100%; vertical-align:baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, header, footer, aside, figure, figcaption, nav, section { display:block; }
figure {padding: 0; margin: 0 0 1em 0;}
html { scroll-behavior:smooth; }
body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
table { border-collapse: collapse; border-spacing: 0;}

/* Layout
=================================================================== */
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
*, :before, :after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit;}

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium");}
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold;}

body { background:#fff; padding:0; margin:0 auto; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; color:#1F1211; font-size:16px; line-height:1.5; letter-spacing: 0.05em;}
.wrap {overflow: hidden;}

/* Chrome でのみフォントを太めに表示する */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  * { text-shadow: transparent 0 0 0, rgba(0, 0, 0, .7) 0 0 0 !important;}
}

@media only screen and (min-width: 960px) { 
    .tel { pointer-events:none}
}

p { margin:0 0 1em; padding:0; line-height: 1.7;}
img { max-width:100%; height: auto; margin:0; padding:0; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle;}

ul,ol { list-style-type:none;}

.alignleft { display:inline; float:left; margin-right:1.5em;}
.alignright { display:inline; float:right; margin-left:1.5em;}
.aligncenter { clear:both; display:block; margin-left:auto; margin-right:auto; text-align: center;}

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

a.btn { position: relative; margin: 0; padding: 20px 1.2em 19px 0; font-size: 16px; line-height: 1; color: #590022; text-decoration: underline;}
a.btn:after { position: absolute; right: 0; top: 40%; content: "→"; color:#590022;}

a.btn1 { position: relative; width: 260px; max-width: 90%; margin: 0 auto; padding: 20px 0 19px 0; font-size: 16px; background:#1F1211; color: #FFF; text-align: center; line-height: 1; display: block; text-decoration: none; border-radius: 50vh;}
a.btn1:after { position: absolute; right: 30px; top: 40%; content: "→"; color: #fff;}

a,
a:visited { text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s; color: #1F1211;}
a:focus { }
a:hover,
a:active { opacity:0.85; filter: alpha(opacity=85);}

.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center;}
.RtoL { -webkit-flex-direction: row-reverse; flex-direction: row-reverse;}

/* ===================================================================
 Header
=================================================================== */
#site-head { position:relative; width:100%; padding:10px 20px; text-align: center; height:80px; background:#E3DFDB; z-index: 999999;}
#site-head #head-area { width:100%; margin: 0 auto;}
#site-head #head-area #head-logo { width:446px; height: 55px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center;}
#site-head #head-area #head { float: right; width: calc(100% - 330px); margin: 0 auto;}

@media screen and (max-width:959px){
    #site-head #head-area #head-logo { width:calc(100% - 120px);}
    #site-head { height:60px; padding:2px 0 0 0;}
}

/*--------------------------------------------------------------
 Navigation
--------------------------------------------------------------*/
#head-menu { width:460px; position: absolute; right:130px; top:30px; margin:0 auto; padding:0; z-index: 999999;}
#head-menu:after { content:" "; display:block; clear:both;}
#head-menu ul { position: relative; width: 100%; height: 50px; margin: 0 auto;}
#head-menu ul li { font-size: 16px; float: left; position: relative; width: auto; margin: 0 0.8em; line-height: 1.2;}
#head-menu ul li a { position: relative; display: inline-block; color: #1F1211; text-decoration: none; padding: 0 3px 3px 3px;}
#head-menu ul li:first-child a { padding-left:25px; background: url("../images/nav_top.png") no-repeat left top; background-size: 21px 16px;}
#head-menu ul li a:hover { color: #777; -webkit-transition: all .5s; transition: all .5s;}
#head-menu ul li a::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 3px; background: #F7D622; transform: scale(0, 1); transform-origin: center top; transition: transform .3s;}
#head-menu ul li a:hover::after { transform: scale(1, 1);}


@media screen and (max-width:959px){
    #head-menu { display: none;}
}

#head-nav { width: 100%; margin:0 auto; padding:0;}
#head-nav ul { width: 100%; margin:0 auto; list-style-type:none;}
#head-nav ul li{}
#head-nav ul li a{ display:block; margin:0 auto; padding:15px 2px; background-color:rgba(31,18,17,0.9); border-bottom: 1px solid #E3DFDB; color: #fff; text-decoration: none; text-align: center;}
#head-nav ul li a:hover { color: #fff; opacity:1; filter: alpha(opacity=100); background-color:rgba(31,18,17,1);}

@media screen and (min-width:960px){
    #head-nav ul li:nth-child(-n+4) { display: none;}
}

#head .head-bt { position: absolute; width: 100px; right:80px; top:6px; margin:0 auto; padding:0; z-index:999999;}
#head .head-bt a { float: left; height: 70px; text-align: center; line-height: 1.2; display: block;}
#head .head-bt a:hover{ opacity:0.8; filter: alpha(opacity=80);}
#head .head-bt .nav-mail a{ width:80px; padding:8px 0 0 0; font-size:12px; letter-spacing: 0.05em; color: #201211;}
#head .head-bt .nav-mail a i { padding-bottom: 1px; font-size: 40px; color: #F7D622; text-shadow: transparent 0 0 0, rgba(247, 214, 34, .7) 0 0 0 !important;}

@media screen and (max-width:959px){
    #head .head-bt { width: 40px; right:70px; top:10px;}
    #head .head-bt a { height: 40px;}
    #head .head-bt .nav-mail br,
    #head .head-bt .nav-mail span{display: none;}
    #head .head-bt .nav-mail a{ margin:0; height: 40px; width: 40px; padding:5px 0 0 0; border-radius: 50%;}
}

/*--------------------------------
 Header navi
----------------------------------*/
#site-head .hidden_box { width: 300px; position: absolute; top:18px; right:0; margin: 0; padding: 0; z-index: 22222;}
#site-head .hidden_box label { padding: 0; width:40px; height: 40px; position: absolute; top:0; right:40px; font-weight: bold; cursor :pointer; transition: .8s; background: url("../images/menu_open.png") no-repeat 0 0; background-size: 40px 40px;}
#site-head .hidden_box label span { width: 40px; height: 40px;}
#site-head .hidden_box label:before {}
#site-head .hidden_box label:hover { background: url("../images/menu_hover.png") no-repeat 0 0; background-size: 40px 40px;}
#site-head .hidden_box input:checked ~ label { background: url("../images/menu_close.png") no-repeat 0 0; background-size: 40px 40px;}
#site-head .hidden_box input { display: none;}
#site-head .hidden_box .hidden_show { width: 300px; height: 0; padding:0; overflow: hidden; opacity: 0; transition: 0.8s; margin-top: 62px;}
#site-head .hidden_box input:checked ~ .hidden_show { padding: 0; height: auto; opacity: 1;}

@media screen and (max-width:959px){
    #site-head .hidden_box { top:15px;}
    #site-head .hidden_box label { right:20px;}
    #site-head .hidden_box .hidden_show { margin-top: 45px;}
}

@media screen and (max-width:720px){
    #site-head .hidden_box { width: 100%;}
    #site-head .hidden_box .hidden_show { width: 100%;}
}

/* パンくずリスト
=================================================================== */
.pankuzu-area { clear:both; width:100%; margin:0 auto; padding:0; }
.pankuzu { width:94%; max-width: 1400px; margin:0 auto; padding:5px 0; font-size:13px; }
.pankuzu-area:after,
.pankuzu:after { content:" "; display:block; clear:both;}
.pankuzu a { text-decoration: underline; position: relative; margin-right: 20px; color: #B19358;}
.pankuzu a::before { position:absolute; content:''; width:6px; height:6px; border-top:solid 2px #555; border-right:solid 2px #555;
-webkit-transform:rotate(45deg); transform:rotate(45deg); top:50%; right:-12px; margin-top:-3px;}

@media only screen and (max-width: 959px) { 
	.pankuzu-area {max-width: 94%;}
}

/* ===================================================================
 main
=================================================================== */
#main { }
#main section { }

/*--------------------------------------------------------------
 Accordion
--------------------------------------------------------------*/
.acc dt {background: #DDD; padding: 10px; margin-top: 10px;}
.acc dt:hover{ color: #999; cursor: pointer;}
.acc dt:after{ float: right; content: "＝";}
.acc dt.open:after{ content: "×";}
.acc dd{ background: #eee; padding: 10px;}
.acc dt.open{ font-size: 26px; text-align: center;}

/*--------------------------------------------------------------
 全文を見る
--------------------------------------------------------------*/
.grad-wrap { position: relative;}
.grad-wrap + .grad-wrap { margin-top: 40px;}
.grad-btn { z-index: 2; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; margin: auto; padding: .5em 0; border-radius: 2px; background: #DCF2F5; color: #51BDCF; font-size: 16px; text-align: center; cursor: pointer; transition: .2s ease;}
.grad-btn::before { content: "▼ 全文表示"}
.grad-item { position: relative; overflow: hidden; height: 120px; /*隠した状態の高さ*/}
.grad-item::before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; /*グラデーションで隠す高さ*/ content: "";
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);}
.grad-trigger { display: none; /*チェックボックスは常に非表示*/}
.grad-trigger:checked ~ .grad-btn::before { content: "▲ 閉じる" /*チェックされていたら、文言を変更する*/}
.grad-trigger:checked ~ .grad-item { height: auto; /*チェックされていたら、高さを戻す*/}
.grad-trigger:checked ~ .grad-item::before { display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/}


/*--------------------------------------------------------------
 Tables
--------------------------------------------------------------*/
#main table { width:100%; margin-bottom: 1em; }
#main table th, .post table td  { padding:10px; text-align:left; border:1px solid #CCC; }
#main table th { background:#EEE;  }
#main table td { }

@media only screen and (max-width:640px) { 
	#main table { margin:0 -10px;}
	#main table tr { display:block; margin-bottom:10px;}
	#main table th { display:block; width:100%;}
	#main table td { display:list-item; width:90%; margin-left:10%; border:none;}
}

/*--------------------------------------------------------------
 List
--------------------------------------------------------------*/
#main .post ul { list-style-type:none; margin:0 0 1em 0; padding:0;}
#main .post ul li { padding:0 0 0 1em; background: url("../images/ico_list.png") no-repeat 0.3em 0.6em;}
#main .post ul li > ul { margin-bottom:0; margin-left:1.5em;}

#main .post ol { list-style-type:decimal; margin:0 0 0 1.5em; padding:0;}
#main .post ol li > ol { margin-bottom:0; margin-left:1.5em;}

/*--------------------------------------------------------------
 Dl List
--------------------------------------------------------------*/
dl.list-dl { clear:both; width:100%; text-align:left; border-bottom:1px solid #AAA; line-height: 1.2;}
dl.list-dl dt { padding:14px 0 7px 10px; clear:left; float:left; width:10em; border-top:1px solid #AAA; color:#777;}
dl.list-dl dd { padding:14px 0 7px 10px; margin-left:10em; border-top:1px solid #AAA;}
dl.list-dl:after,dl.list-dl dt:after,dl.list-dl dd:after { content:" "; display:block; clear:both;}

@media only screen and (max-width: 640px) {
	dl.list-dl dt { clear: both; float: none; width: 100%; padding-bottom: 5px;}
	dl.list-dl dd { margin-left:0; border-top:none;}
}

/* ===================================================================
 FOOTER
=================================================================== */
#site-foot { clear: both; text-align: center; background:#E3DFDB;} 
#site-foot:after { content:" "; display:block; clear:both;}
.foot { width: 94%; max-width: 1400px; margin: 0 auto; padding: 40px 0 0 0;}
.foot-add { width: 100%; font-size:15px; text-align: center;}
.foot-add h1 { font-size: 19px;}
.foot-add img.logo { width: 140px; margin-bottom: 10px;}
.foot-add a.tel { color:#1F1211; text-decoration: none;}
.foot-nav { width: 100%; line-height: 1.6; padding-top: 30px; border-top: 1px solid #9E8E85;}
.foot-nav ul { margin-bottom: 1em;}
.foot-nav ul li{ display: inline-block;}
.foot-nav ul li a { font-size:15px; margin-right:0.8em; color:#1F1211; padding-left: 1.4em;}
.foot-nav a i { font-size:15px; }

@media only screen and (max-width: 960px) { 
	.foot-add { width: 100%; float: none; text-align: center;}
    .foot-nav { width: 100%; float: none; margin: 0 auto;}
    .foot-nav ul li a { margin-right: 0; padding-left: 0.7em;}
    .foot-nav ul li{ width: 31%;}
    .foot-nav ul li.child a{ margin-left: 0;}
}

@media only screen and (max-width: 600px) { 
    .foot-nav ul li{ width: 49%;}
    .foot-nav ul li a { font-size:15px;}
    .foot-nav ul li.child a{ font-size:14px;}
}

/* copyright */
.copyright { clear: both; width:100%; height: 120px; text-align:center; font-size:12px; padding:90px 0 0 0; color: #FFF; background: url("../images/foot_bg.png") no-repeat center bottom;}
.copyright a { color:#FFF; text-decoration:none;}
.copyright a:hover { color:#FFF; text-decoration:underline;}

/* ページ先頭へ -----------------*/
#pagetop { position:fixed; bottom:6px; right:6px;}
#pagetop a { width:50px; height:50px; background-color:rgba(130,38,78,0.9); border-radius: 50%; line-height: 50px; font-size:25px; color:#fff; text-align:center; text-decoration:none; display:block;}
#pagetop a:hover { text-decoration:none; color:#fff; }