@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap&family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

html{scroll-behavior:smooth}

/* ----------------------------------------------------
	基本設定
---------------------------------------------------- */
/*
	reset
------------------------------ */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}


/*
	表示設定
------------------------------ */

.pc{display: none;}
@media screen and (min-width:768px) {
	.sp{display: none;}
	.pc{display: inline-block;}
}

*{box-sizing: border-box;}
html {font-size: 10px;}
body {background-color: #fff;color: #1d1d1d;}
body,input,select,textarea{font-family:"Noto Serif JP",serif;font-size:1.4rem;line-height:1.7;letter-spacing:.08em}
a { color: #1d1d1d;text-decoration: none; }
a:hover { opacity: .7; }

img{width: 100%;height: auto;}

.stl-zomincho{
	font-family: 'Zen Old Mincho', serif;
}
/*
	note
------------------------------ */
ul.note li,p.note,span.note{margin-left:1em;text-indent:-1em;font-size:1.4rem}
ul.note li::before{content:"※"}

/* ----------------------------------------------------
	pagetop
---------------------------------------------------- */
.pageTop a{background:rgba(77,50,29,.8);width:64px;height:64px;border-radius:0px;display:flex;justify-content:center;align-items:center;position:fixed;right:0px;bottom:0px;z-index:10}
.pageTop a img{width:16px;height:auto}

@media screen and (min-width: 768px) { .pageTop a{border-radius:6px;right:10px;bottom:60px;z-index:99} }
/* ----------------------------------------------------
	Footer
---------------------------------------------------- */
#footer{
	position: relative;
	color: #fff;
	z-index: 2;
}
#footer .lyt-foot{
	padding: 0;
}
#footer .lyt-bnr{
	max-width: 320px;
	margin: auto;
}
#footer .lyt-bnr a{
	position: relative;
	display: block;
	color: #FFF;
	width: 100%;
	padding: 1em 2em 1em 1.2em;
	border: 1px solid #fff;
	background-color: black
}
#footer .lyt-bnr a:hover { 
	opacity: 1; 
	text-decoration: none;
	color: #D9CA9C;
	border: 1px solid #D9CA9C;
	transition: all 0.475s;
}

#footer .lyt-bnr a::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1em;
	width: 8px;
	height: 8px;
	margin: auto;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#footer .lyt-bnr a:hover::before { 
	right: .5em;
	border-color: #D9CA9C;
	transition: all 0.475s;
}
#footer .lyt-foot ul{
	width: 100%;
	margin: auto;
}
#footer ul li{
	position: relative;
    font-size: 1.4rem;
	line-height: 1.7;
    border-bottom: 1px solid #e1dbd0;
}
#footer ul li a{
	position: relative;
	display: block;
	color: #fff;
	padding: 1.6em 2.1em 1.3em 1.2em;
}
#footer ul li a::before{
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 18px;
	width: 12px;
	height: 12px;
	border-top: 1px solid #e1dbd0;
	border-right: 1px solid #e1dbd0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all .8s;
}
#footer ul.logo li a{
	position: relative;
	display: block;
	max-width: 160px;
	margin: auto;
	padding: 1.6em 0 1.3em;
}
#footer ul.logo li a::before{ display: none;}
#footer small{
    text-align: left;
    display: block;
    width: 100%;
	height: 64px;
	color: #fff;
    font-size: 1rem;
	padding: 3% 30px 0 2em;
}

@media screen and (min-width: 768px) {
	#footer .lyt-foot{padding: 2.5vw 0;border-bottom: 1px solid #e1dbd0;}
	#footer .lyt-foot ul{max-width: 1200px;width: 96%;display: flex;justify-content: center;}
	#footer ul li{
		position: relative;
		padding: .3em 2em;
		line-height: 1;
		border: none;
	}
	#footer ul li a{
		position: static;
		display: inline;
		padding: 0;
	}
	#footer ul.logo li{padding: 0 2em;}
	#footer ul.logo li a{
		display: block;
		max-width: 200px;
		padding: 0;
	}
	#footer ul li a::before{display: none;}
	#footer ul li::before,
	#footer ul li::after{
		content: "";
		position: absolute;
		width: 1px;
		height: 1.5rem;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	#footer ul li + li::before,
	#footer ul li:first-child::before{
		left: 0;
		border-left: 1px solid #fff;
	}
	#footer ul li:last-child::after{
		right: 0;
		border-right: 1px solid #fff;
	}
	#footer ul.logo li::before,#footer ul.logo li::after{display: none;}
	#footer small{ text-align: center; height: auto; padding: 1.5em 0;}
}
/* ----------------------------------------------------
	pagetop
---------------------------------------------------- */
.pageTop a {
	background: rgba(15, 30, 46, 0.8);
	width: 30px;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10;
	animation: fadetop 2s ease 0s 1 normal;
    -webkit-animation: fadetop 2s ease 0s 1 normal;
}
@keyframes fadetop {0% {opacity: 0}100% {opacity: 1}}
/*古いブラウザ用*/
@-webkit-keyframes fadetop {0% {opacity: 0} 100% {opacity: 1}}

.pageTop a img {
	width: 16px;
	height: auto;
}


@media screen and (min-width: 768px) {.pageTop a {width: 64px;right: 10px;bottom: 20px;	border-radius: 4px;}}

/* ----------------------------------------------------
	fadeIn
---------------------------------------------------- */


.box-lyt-program02 > figure.fadeIn{filter: blur(0);}
.fadeBlock.fadeIn{opacity:1;}

/*
	パターン1：透明度が変化
------------------------------ */
.fadeBlock{opacity:0;transition:all 1s}
.fadeBlock.fadeIn{opacity:1}
/*
	パターン2：下から
------------------------------ */
.fadeBottom{transform:translateY(100px)}
.fadeBottom.fadeIn{transform:translateY(0)}
/*
	パターン3：右から
------------------------------ */
.fadeRight{transform:translateX(100px)}
.fadeRight.fadeIn{transform:translateX(0)}

/*
	パターン4：左から
------------------------------ */
.fadeLeft{transform:translateX(-100px)}
.fadeLeft.fadeIn{transform:translateX(0)}

/*
	fadeUp
------------------------------ */
.fadeUp{animation-name:fadeUpAnime;animation-duration:3s;animation-fill-mode:forwards;opacity:0}
@keyframes fadeUpAnime{from{opacity:0}to{opacity:1}}
.delay01{animation-delay:0.25s}.delay02{animation-delay:0.5s}.delay03{animation-delay:0.75s}
