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;	background-color: rgb(254, 245, 240);max-width:1200px;margin:0 auto;}
html,*{font-family: 'Vollkorn', serif;}

* {-webkit-box-sizing: border-box; box-sizing: border-box;}

a,a:visited,a:hover,a:active {text-decoration: none; color: inherit; background-color:transparent;}

input { display: none;}

/* border-left-color: rgb(104, 45, 0); */
/* ヘッダー */
.header{ height: auto; width: 100%; z-index: 5000; transition: 1s; text-align: center; background-color: #2c6d169f;}
#header.invert{ background-color: rgba(57, 23, 2, 0.763); transition: .3s; color:rgb(255, 255, 255);}
ul li{ font-weight: 500; font-size: 20px; list-style: none; margin: 1% 6% 1% 0;	position:relative; border: 2px solid transparent;
	display: inline-block; text-decoration: none; outline: none; transition: all .5s; padding: 1% 2%  0.7% 2%; z-index: 2000; right: 0; top: 0;}
#header{ transition: 1s; position: sticky; position: -webkit-sticky; right: 0; top: 0; z-index: 500;}
.hi{ position: relative; height: 500px; background-image: url(./img/hg.jpg); background-repeat: no-repeat; background-size: cover; opacity: .7; background-position: center;}
@media screen and (max-width:660px){.h1{ height: 100vh;}}
.header-img{ position: absolute; top: 5%; left: 0; width: 33%;}
@media screen and (max-width:660px){.header-img{ left: 5px; top: 5%; width: 60%;}}
@media screen and (max-width:700px){.li-in{display: none;	}}
.header li:last-child{margin-right: 0;}
.li-in:before,.li-in:after,.li-in span:before,.li-in span:after{
  position: absolute; z-index: .5; content: ''; width: 0; height: 0; border: 2px solid transparent; transition: all .5s; visibility: hidden; box-sizing: content-box;}
.li-in:before{ top: -2px; left: -2px; border-left-color: rgba(16, 55, 8, .7);}
.li-in:after{ bottom: -2px; right: -2px; border-right-color: rgba(16, 55, 8, .7);}
.li-in span:before{ bottom: -2px; left: -2px; border-bottom-color: rgba(16, 55, 8, .7);}
.li-in span:after{ top: -2px; right: -2px; border-top-color: rgba(16, 55, 8, .7);}
.li-in:hover { color: rgba(255, 255, 255, 0.808); background-color: rgba(16, 55, 8, .7); transition-duration:2.5s;
	transition-property:background-color;}
.li-in:hover:before,.li-in:hover:after { height: 100%; visibility: visible;}
.li-in:hover span:before,.li-in:hover span:after { width: 100%; visibility: visible;}

.scli-in:before,.scli-in:after,.scli-in span:before,.scli-in span:after{
  position: absolute; z-index: .5; content: ''; width: 0; height: 0; border: 2px solid transparent; transition: all .5s; visibility: hidden; box-sizing: content-box;}
.scli-in:before{ top: -2px; left: -2px; border-left-color: rgb(255, 255, 255);}
.scli-in:after{ bottom: -2px; right: -2px; border-right-color: rgb(255, 255, 255);}
.scli-in span:before{ bottom: -2px; left: -2px; border-bottom-color: rgb(255, 255, 255);}
.scli-in span:after{ top: -2px; right: -2px; border-top-color: rgb(255, 255, 255);}
.scli-in:hover { color: rgba(0, 0, 0, 0.808); background-color: rgb(255, 255, 255); transition-duration:2.5s;
	transition-property:background-color;}
.scli-in:hover:before,.scli-in:hover:after { height: 100%; visibility: visible;}
.scli-in:hover span:before,.scli-in:hover span:after { width: 100%; visibility: visible;}


/* ページトップボタン */
#page_top{ width: 130px;	height: 60px;	position: fixed; right: 0; bottom: 50px;background: #ff4d009c;
	z-index: 10; opacity: .8; transition-duration:.5s; color: #fff;}
#page_top a{font-family:'Vollkorn', serif; position: relative; display: block; width: 50px; height: 50px;
	text-decoration: none; padding: 17px 0 0 20px; font-size: 25px;}
#page_top:hover{content: ''; color: rgb(0, 0, 0); background-color: #ff4d00e9; opacity: 0.9;
	transition-duration:.5s; box-shadow: 1.4px 1.4px  10px rgb(0, 0, 0); color: #fff;}
#page_top a::before{content: ''; font-size: 25px; color: rgb(147, 78, 53);	position: absolute; width: 25px;
height: 25px; top: -5px; bottom: 0; right: 0; left: 0;margin: auto; text-align: center;}


/* ハンバーガー */

@media screen and (min-width:701px){.han{ display: none;}}
.hamburger { display : block; position: fixed; z-index: 5000; right: 13px; top : 12px; width: 42px;  height: 42px; cursor: pointer; text-align: center;}
.hamburger span { display : block; position: absolute; width: 30px; height: 2px ; left: 6px; background: rgb(104, 45, 0);; -webkit-transition: 0.3s ease-in-out;
   -moz-transition   : 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.hamburger span:nth-child(1) { top: 10px;}
.hamburger span:nth-child(2) { top: 20px;}
.hamburger span:nth-child(3) { top: 30px;}

/* ナビ開いてる時のボタン */

.hamburger.active span{ background :rgb(0, 0, 0);}
.hamburger.active span:nth-child(1) { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); transform: translateY(6px);}
.hamburger.active span:nth-child(2) { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); transform: translateY(-4px);}  
.hamburger.active span:nth-child(3) { -webkit-transform: translateY(-14px); -moz-transform: translateY(-14px); transform: translateY(-14px);}

nav.globalMenuSp { position: fixed; z-index: 4000; top: 0; right: 0; background: rgba(255, 255, 255, 0.9); text-align: center; width: 60%; opacity: 0; height:100vh; visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;}

nav.globalMenuSp ul { margin: 0 auto; padding: 0; width: 100%;}
nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; transition: .4s all; font-size: 25px; margin-bottom: 5%;}
nav.globalMenuSp ul li:first-child{margin-top: 7%;}
nav.globalMenuSp ul li:last-child { padding-bottom: 0;}
nav.globalMenuSp ul li:hover{ background :rgba(255, 255, 255);}
nav.globalMenuSp ul li a { display: block; color: rgb(104, 45, 0); padding:10px 0; text-decoration :none; margin: 0;}
nav.globalMenuSp ul li a:hover{color: rgba(255, 255, 255, 0.776); background-color:rgb(104, 45, 0,.7); transition: .6s;}
.globalMenuSp li{margin: 0%;}

/* このクラスを、jQueryで付与・削除する */

nav.globalMenuSp.active { opacity: 100; visibility:visible;}

/* メイン */

.main{margin-top: 8%; text-align: center;}
.main h1{display: inline-block;	text-decoration: none; border-bottom: 3px solid rgb(255, 187, 60); font-size: 24px;}
.main h2{margin-top:70px;font-size:24px;}
.pro-setumei{margin:2% auto 10%;line-height: 40px;font-size: 20px;width:80%;}



@media screen and (max-width:700px){
	.main h1{ font-size: 4vw;}
}



/* menu一覧 */
.m-i{width: 30vw; display: inline-block; margin-bottom: 8%;}
.menu-itiran{ display:flex;}
.main2{ margin: 2% 7%; line-height: 30px; font-size: 24px;}
.menu-setumei{ margin: 0 0 5% 5%; font-size: 20px; line-height: 30px;}
.main3{ background-color: transparent; min-height:35vh; background-attachment: fixed; background-size: cover; background-position: center; background-image: url(./img/20220224_140539.jpg);}


@media screen and (max-width:700px){
	.profile{ font-size: 3.5vw;}
	.menu-itiran{ display:block;}
	.m-i{width: 100%;margin:0 auto;}
	.menu-setumei{ margin:3% auto 10%;width:100%;}
}


/* マップ */
.map{width: 100%; height: 400px;}


/* フッター */

footer{text-align: center; line-height: 3em; height: 80px;}
.ft h1{ padding-top: 9%; font-size: 24px;}
.ft a{display: inline-block;}
.ft h2{text-decoration: underline; text-decoration-color: rgb(255, 187, 60); font-size: 24px;margin-top:5%;}
.ft p{ font-size: 20px;margin-top:2%;}
.ft{background-image: url(./img/22814871_s.jpg); background-position: top center; background-repeat: no-repeat; background-size: 100%; opacity: .8;background-size:cover;}
.last{padding-bottom:10%;}

@media screen and (max-width:600px){
	.ft h1{font-size: 20px;}
	.ft h2{font-size: 20px;margin-top:1%;}
	.ft p{ font-size: 18px;margin-top:1%;}
	footer{text-align: center; line-height: 3em; height: 60px;}
}

@media screen and (max-width:600px){
	.ft h1{font-size: 16px;}
	.ft h2{font-size: 16px;margin-top:0%;}
	.ft p{ font-size: 14px;margin-top:0%;}
}