@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Shippori+Mincho+B1&display=swap');

/*

lower-page-base.css

*/

body { text-align: center; font-family: 'EB Garamond', 'Shippori Mincho B1', serif; padding: 60; background: #efefef; letter-spacing: 0.05em;}
body::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; border: #fff 60px solid; z-index: 9999; pointer-events: none;}
a { text-decoration: none; color: #000;}

h1 { position: fixed; top: 30px; transform: translateY(-50%); left: 0; right: 0; font-size: 21px; z-index: 10000;}
h2 { margin: 120px 0 60px;}

@media screen and (max-width:767px) {
body::after { border: #fff 50px solid; border-left: none; border-right: none;}
h1 { top: 25px; right: auto; left: 20px;}
}

/*
------------------------------------------------------------*/
nav ul { position: fixed; top: 30px; transform: translateY(-50%); right: 60px; z-index: 10000;}
nav ul li { display: inline-block; border-radius: 5px; margin: 0 10px;}
nav ul li a { font-size: 16px; letter-spacing: .1em; position: relative;}
nav ul li a::after { content: ''; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #000; transition: all .5s;}
nav ul li a:hover::after,
nav ul li.current a::after{ width: 100%;}

@media screen and (max-width:767px) {
nav ul { position: fixed; top: auto; bottom: 25px; transform: translateY(50%); right: 20px; left: 20px; z-index: 10000; font-size: 0px; letter-spacing: 0;}
nav ul li { position: static; transform: none!important; display: inline-block; margin: 0;}
nav ul li+li { margin-left: 15px;}
nav ul li a { font-size: 14px;}
nav ul li a::after { content: none;}
nav ul li.current { background: #000;}
nav ul li.current a { color: #fff;}
}

/*
------------------------------------------------------------*/
.sns-link { position: fixed; top: 30px; transform: translateY(-50%); left: 60px; z-index: 10005;}
.sns-link li { display: inline-block;}
.sns-link li+li { margin-left: 20px;}
.sns-link li img { width: 20px;}

@media screen and (max-width:767px) {
.sns-link { top: 25px; right: 20px; text-align: right;}
.sns-link li+li { margin-left: 10px;}
}