@charset "utf-8";
/* reset */
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,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}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}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}
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');

@font-face {
	font-family: 'Utsukushi';
	src: url("/font/UtsukushiFONT.otf");
}

html{ scroll-behavior: smooth; height: calc(100% - 90px); }
*, *:before, *:after { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; font-feature-settings: "palt" 1; }
@media screen and (max-width:900px) {
	html { height: calc(100% - 70px); }
}

.mgt0{ margin-top: 0 !important; } .mgt10{ margin-top: 10px !important; } .mgt20{ margin-top: 20px !important; } .mgt60{ margin-top: 60px !important; } .mgt80{ margin-top: 80px !important; } .mgt100{ margin-top: 100px !important; } .mgt120{ margin-top: 120px !important; }
.mgb0{ margin-bottom: 0 !important; } .mgb10{ margin-bottom: 10px !important; } .mgb20{ margin-bottom: 20px !important; } .mgb30{ margin-bottom: 30px !important; } .mgb40{ margin-bottom: 40px !important; } .mgb50{ margin-bottom: 50px !important; } .mgb60{ margin-bottom: 60px !important; } .mgb70{ margin-bottom: 70px !important; } .mgb80{ margin-bottom: 80px !important; }
.pdt0{ padding-top: 0 !important; } .pdt10{ padding-top: 10px !important; } .pdt20{ padding-top: 20px !important; } .pdt30{ padding-top: 30px !important; } .pdt40{ padding-top: 40px !important; } .pdt50{ padding-top: 50px !important; } .pdt60{ padding-top: 60px !important; } .pdt70{ padding-top: 70px !important; }
.pdb0{ padding-bottom: 0 !important; } .pdb10{ padding-bottom: 10px !important; } .pdb20{ padding-bottom: 20px !important; } .pdb30{ padding-bottom: 30px !important; } .pdb40{ padding-bottom: 40px !important; } .pdb50{ padding-bottom: 50px !important; } .pdb60{ padding-bottom: 60px !important; }
.pdl10{ padding-left: 10px !important; } .pdl20{ padding-left: 20px !important; } .pdl30{ padding-left: 30px !important; }


body { width:100%; height:100%; font-size:16px; letter-spacing: 0; color:#333; line-height: 1.8; background-color:#fefefe; margin:auto; text-align: center; font-weight: 100 !important; font-family: YakuHanMP_Noto, 'Utsukushi', "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; }
@media screen and (max-width:900px) {
	body { font-size:13px; background-image: none; }
}


.nosp{ display: block!important; }
.forsp{ display: none!important; }
img.auto{ width:100%; vertical-align: bottom !important; /*image-rendering:auto !important;*/ image-rendering: -webkit-optimize-contrast; }
.gothic_font { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", YakuHanJP, "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif; }
.mincho_font { font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif !important; }
svg { font-size:0 !important; vertical-align: bottom; }
svg > path { font-size:0 !important; }
@media screen and (max-width:900px) {
	body { width:100%; font-size:13px; padding-bottom:0; }
	img.auto{ width:100%; }
	img.auto.forsp{ width:100%; }
	.nosp{ display: none!important; }
	.forsp{ display: inline-block!important; }
} 


header { width:100%; margin:auto; position:fixed; top:0; height:100px; background-color:rgba(255,255,255,0.9); z-index: 10000; }
header a { color:#333; }
header div#g_nav { width:100%; max-width:1000px; margin:auto; justify-content: space-between; display:flex; height:100px; align-items: center; }
header div#g_nav h1 { width:16%; font-size:24px; padding-left:1em; font-weight: normal; letter-spacing: 5px; position:relative; }
header div#g_nav h1::before { content:""; position: absolute; top:50%; transform: translateY(-50%); left:0; width:30px; height:30px; background-image: url("/img/logo_header.png"); background-repeat: no-repeat; background-size: contain; background-position: center; }
header div#g_nav nav { display: flex; width:84%; align-items: center; justify-content: flex-end; }
header div#g_nav ul { display: flex; align-items: center; justify-content: center; gap:3%; }
/*header div#g_nav ul#g_menu { width:84%; } #g_snsありの場合 */
header div#g_nav ul#g_menu { width:90%; }
header div#g_nav ul#g_menu li.pc_none { display: none; }
header div#g_nav ul#g_menu li { font-size:15px; }
header div#g_nav ul#g_menu li a { transition: all 0.5s ease-in-out; position:relative; }
header div#g_nav ul#g_menu li a::after { content: ""; position:absolute; width:90%; left:5%; bottom:-5px; height:1px; background-color:#8bcb81; transition: all 0.5s ease-in-out; transform:scale(0,1); transform-origin: top center; }
header div#g_nav ul#g_menu li.current a { color:#8bcb81; }
header div#g_nav ul#g_menu li a:hover { color:#8bcb81; }
header div#g_nav ul#g_menu li a:hover::after { transform: scale(1,1); }
header div#g_nav ul#g_menu li.sp_limited { display: none; }
header div#g_nav ul#g_sns { width:15%; margin-left:1%; gap:8%; display: none; }
header div#g_nav ul#g_sns li img.auto { width:20px; vertical-align: middle !important; transform: translateY(-10%); }
header div#g_nav div#sp_logo { display: none; }
@media screen and (max-width:900px) {
	header { height:70px; }
	header div#g_nav { display: block; height:70px; }
	header div#g_nav h1 { width:94%; display: inline-block; left:3%; margin:auto; text-align:center; font-size:18px; height:70px; line-height: 70px; }
	header div#g_nav h1::before { content:""; position: absolute; top:50%; left:50%; transform: translate(-300%,-50%);  width:24px; height:24px; background-image: url("/img/logo_header.png"); background-repeat: no-repeat; background-size: contain; background-position: center; }
	header div#g_nav nav { opacity: 0; width:100%; height: 100%; background-color:#fefefe; flex-direction: column; position: fixed; top:0; left:100%; transition:all ease 0.5s; z-index: -1; justify-content: flex-start; }
	header div#g_nav nav.active { left:0; opacity: 1; z-index: 10000; }
	header div#g_nav ul#g_menu { width:84%; flex-direction: column; margin-bottom:30px; }
	header div#g_nav ul#g_menu li { width:100%; letter-spacing: 1px; border-bottom: solid 1px #ddd; }
	header div#g_nav ul#g_menu li.pc_none { display: block; }
	header div#g_nav ul#g_menu li a { width:100%; padding:10px 0; display: block;  }
	header div#g_nav ul#g_menu li a::after { display: none; }
	/*header div#g_nav ul#g_menu li:nth-of-type(2n) { }*/
	header div#g_nav ul#g_menu li.sp_limited { display: block; }
	header div#g_nav ul#g_sns { width:60%; gap:8%; }
	header div#g_nav ul#g_sns li img.auto { width:22px; }
	header div#g_nav div#sp_logo { display: block; width:60%; max-width:200px; margin:60px auto 20px; }
}

footer { width:100%; padding:60px 0; background-color:#f1f1f1; margin:auto; background-image: url("/img/texture04.png"); background-size: contain; }
footer h2 { font-size:24px; font-weight: 100; letter-spacing: 0.4em; display: inline-block; position:relative; margin-bottom:10px; padding-left:50px; }
footer h2::before { content:""; position: absolute; top:50%; transform: translateY(-50%); left:-1px; width:30px; height:30px; background-image: url("/img/logo_header.png"); background-repeat: no-repeat; background-size: contain; background-position: center; }
footer p#footer_address { font-size:14px; letter-spacing: 1px; }
footer div#footer_contact { display: flex; justify-content: center; gap:2em; }
footer div#footer_contact p { font-size:20px; }
footer div#footer_contact p > span { font-size:14px; }
footer p#footer_time { font-size:14px; }
footer > small { font-size:12px; letter-spacing: 0; }
footer ul#footer_sns { display: flex; justify-content: center; gap:12px; margin-top:20px; margin-bottom:30px; display: none; }
footer ul#footer_sns li { width:24px; height: auto; }
div#footer_nav { display: flex; justify-content: center; gap:2em; margin-top:30px; margin-bottom:20px; }
div#footer_nav div p { font-size:13px; }
div#footer_nav div p a { color:#333; letter-spacing: 0; transition: all 0.5s ease-in-out; position:relative; }
div#footer_nav div p a::after { content: ""; position:absolute; width:90%; left:5%; bottom:-5px; height:1px; background-color:#8bcb81; transition: all 0.5s ease-in-out; transform:scale(0,1); transform-origin: top center; }
div#footer_nav div p a:hover { color:#8bcb81; }
div#footer_nav div p a:hover::after { transform: scale(1,1); }
@media screen and (max-width:900px) {
	footer { padding:50px 0; }
	footer h2 { font-size:18px; padding-left:36px; }
	footer h2::before { width:24px; height:24px; }
	footer p#footer_address { font-size:12px; }
	footer div#footer_contact { flex-direction: column; gap:0; padding-top:10px; padding-bottom:5px; }
	footer div#footer_contact p { font-size:18px; line-height: 1.4; }
	footer div#footer_contact p > span { font-size:12px; }
	footer p#footer_time { font-size:13px; }
	footer > small { font-size:9px; letter-spacing: 0; }
	footer ul#footer_sns li { width:20px; }
	div#footer_nav { flex-direction: column; gap:0; }
	div#footer_nav div p { font-size:12px; line-height: 2.1; }
}



/* ハンバーガーメニュー */
#g_button { display: none; }
@media screen and (max-width:900px) {
	#g_button { display: block; position:fixed; right:10px; top:13px; background:none; border:none; padding-left:0; padding-right:0; z-index:20000; }
	#g_button:hover { cursor: pointer; }
	#navbtn { position: relative;  width: 50px; height:40px; }
	#navbtn span { display: inline-block; transition: all .4s; position: absolute; left: 20%; height: 2px; border-radius: 5px; background: #020202; width: 60%; }
	#navbtn span:nth-of-type(1) { top:10px; }
	#navbtn span:nth-of-type(2) { top:20px; }
	#navbtn span:nth-of-type(3) { top:30px; }
	#navbtn:hover { cursor: pointer; }
	#navbtn:hover span { background-color:#020202; cursor: pointer; }
	#navbtn.active span:nth-of-type(1) { top: 13px; left: 8px; transform: translateY(6px) rotate(-45deg); width: 70%; }
	#navbtn.active span:nth-of-type(2){ transform: scale(0,1); transform-origin: center right; width:0; }
	#navbtn.active span:nth-of-type(3){ top: 38px; left: 8px; transform: translateY(-18px) rotate(45deg); width: 70%; }
}



.scroll_up { opacity: 100%; position:relative; transform: translateY(30px); animation:scrollDown 0.8s ease-in-out forwards; }
.scroll_up.up_effect { animation:scrollUp 0.8s ease-in-out forwards; }
@keyframes scrollUp {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity:100%; transform: translateY(0); }
}
@keyframes scrollDown {
	0% { opacity: 100%; transform: translateY(0); }
	100% { opacity:0; transform: translateY(30px); }
}