@charset "utf-8";

/* font */
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
</style>
/* reset */
* { padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
section, article { display: block; }
/* base */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { word-wrap : break-word; overflow-wrap : break-word; font-kerning: normal; -webkit-font-kerning: normal; font-size: 16px; font-family: 'Noto Serif JP', Helvetica Neue, helvetica, YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", serif; text-align: center; letter-spacing: 0.03em; margin: 0px; box-sizing: border-box; background-color: #FFF; color: #000; padding: 0em; line-height: 2em; }
img { vertical-align: bottom; height: auto; width: 100%; }
::selection { background: #333333; color: #FFF; }
::-moz-selection { background: #333333; }
/* link */
a:link, a:visited, a:active { color: #333333; text-decoration: none; }
a:hover { color: #333333; text-decoration: none; opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
/* clear */
.clear { clear: both; }
.cbox { zoom: 100%; }
.cbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }
/* options */
.r { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.rl { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.fa.fa-arrow-right { font-size: 1em; vertical-align: middle; }
/* youtube */
.youtube { position: relative; width: 100%; padding-top: 56.25%; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }
/* wrapper */
#wrapper { width: 100%; min-width: 1000px; margin-left: auto; margin-right: auto; text-align: left; font-weight: 700; position: relative; }

/* contents */
#contents { padding: 5% 5% 0 5%; display: flex; flex-direction: row-reverse; justify-content: space-between; font-family: 'Noto Serif JP', serif; }
#contents h1 { position: fixed; width: 4.5em; z-index: 9999; }
#contents p.kuzuri { margin-left: 15%; }
#contents nav ul { position: fixed; padding: 0;}
#contents nav li { writing-mode: vertical-lr; font-size: 2.5em; line-height: 1.5em; letter-spacing: 0.15em; border-top: solid; border-width: 2px; }
#contents nav li+li { border-bottom: solid; border-width: 2px; }
#contents a { display: block; padding: 0.6em 0 0.5em 0; }

/* footer */
#footer { padding: 0 5% 5% 5%; font-size:0.8em; line-height:1.8em; text-align: left; }


/* media screen */
@media screen and (max-width: 1024px) {
body { font-size: 12px; }
#contents { padding: 5% 5% 0 5%; display: flex; flex-direction: row-reverse; justify-content: space-between; font-family: 'Noto Serif JP', serif; }
#contents h1 { position: fixed; width: 5em; z-index: 9999; }
#contents p.kuzuri { margin-left: 15%; }
#contents nav ul { position: fixed; }
#contents nav li { writing-mode: vertical-lr; font-size: 2.5em; line-height: 1.5em; letter-spacing: 0.15em; border-top: solid; border-width: 2px; }
#contents nav li+li { border-bottom: solid; border-width: 2px; }
#contents a { display: block; padding: 0.6em 0 0.5em 0; }

/* footer */
#footer { padding: 0 5% 5% 5%; font-size:0.8em; line-height:1.8em; text-align: left; }
}

/* SP */
@media screen and (max-width: 600px) {
body { font-size: 12px; }
#wrapper { min-width: 0px; min-height: 100vh; min-height: -webkit-fill-available; width:100%; display: grid; justify-items: center; align-items: center; }
#contents { padding: 7%; position: relative; font-family: 'Noto Serif JP', serif; }
#contents h1 { position: static; width: 25em; z-index: 9999; }
#contents p.kuzuri { margin-bottom: 5em; margin-left: auto; margin-right: -10%; }
#contents nav { position: absolute; left: 0; right: 0; bottom: 2em; }
#contents nav ul { margin-top: 2em; position: static; display: flex; flex-wrap: wrap; justify-content: center; }
#contents nav li { writing-mode: horizontal-tb; font-size: 2.2em; line-height: 1em; letter-spacing: 0.15em; border-top: none; border-left: solid; border-width: 2px; }
#contents nav li+li { border-bottom: none; border-right: solid; border-width: 2px; }
#contents a { display: block; padding: 0; padding: 0 0.5em 0 0.6em; }
#footer { text-align: center; }
}

@media screen and (max-width: 374px) {
body { font-size: 11px; }
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
body { font-size: 11px; }
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
body { font-size: 12px; }
}
@media screen and (min-width: 1281px) and (max-width: 1300px) {
body { font-size: 12.18px; }
}
@media screen and (min-width: 1301px) and (max-width: 1325px) {
body { font-size: 12.36px; }
}
@media screen and (min-width: 1326px) and (max-width: 1350px) {
body { font-size: 12.54px; }
}
@media screen and (min-width: 1351px) and (max-width: 1375px) {
body { font-size: 12.72px; }
}
@media screen and (min-width: 1376px) and (max-width: 1400px) {
body { font-size: 12.9px; }
}
@media screen and (min-width: 1401px) and (max-width: 1425px) {
body { font-size: 13.08px; }
}
@media screen and (min-width: 1426px) and (max-width: 1450px) {
body { font-size: 13.26px; }
}
@media screen and (min-width: 1451px) and (max-width: 1475px) {
body { font-size: 13.44px; }
}
@media screen and (min-width: 1476px) and (max-width: 1500px) {
body { font-size: 13.62px; }
}
@media screen and (min-width: 1501px) and (max-width: 1525px) {
body { font-size: 13.8px; }
}
@media screen and (min-width: 1526px) and (max-width: 1550px) {
body { font-size: 13.98px; }
}
@media screen and (min-width: 1551px) and (max-width: 1575px) {
body { font-size: 14.16px; }
}
@media screen and (min-width: 1576px) and (max-width: 1600px) {
body { font-size: 14.34px; }
}
@media screen and (min-width: 1601px) and (max-width: 1625px) {
body { font-size: 14.52px; }
}
@media screen and (min-width: 1626px) and (max-width: 1650px) {
body { font-size: 14.7px; }
}
@media screen and (min-width: 1651px) and (max-width: 1675px) {
body { font-size: 14.88px; }
}
@media screen and (min-width: 1676px) and (max-width: 1700px) {
body { font-size: 15px; }
}