@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Zen+Maru+Gothic&display=swap');

/* 全体に適用する */
* {margin: 0;padding: 0;box-sizing: border-box;font-weight: normal;border:0; outline:0; text-decoration:none; list-style:none; overflow-wrap:break-word; word-wrap:break-word;}
::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {border-radius:5px;}
::-webkit-scrollbar-thumb {background-color:#f5f5f5;border-radius: 5px;}
::selection{color:rgba(255,255,255,1); background:rgba(0,4,26,0.1);}
*::before, *::after{position:absolute; content:'';}
:root {--color: #849d84; --white: #ffffff; --black: #888;}
/* 基本設定 */
body {background-color: var(--white);text-align: left;line-height: 1.9;letter-spacing: 0.1em;font-size: 13px;font-family:"EB Garamond", "Zen Maru Gothic", serif;color: var(--white);}
body::before {position: fixed;display: block;content: '';top: 0;left: 0;width: 100%;height: 100vh;z-index: -99;background:linear-gradient(135deg, rgba(239, 211, 208, .55) 20%, rgba(176, 196, 222, .55)) fixed , url("img/bg.jpg") center no-repeat;background-size:cover;filter: blur(3px);}
/* リンク */
a {color: var(--white);transition: .5s all;cursor:help;}
a:hover{color: transparent;text-shadow: 0px 0px 4px #fff;opacity:.2;}
a:visited{opacity:.9;}
section > section:a{border-bottom: 1px dotted var(--white);}
/* 文字の装飾 */
mark{color: var(--white);padding:0.15em; background:rgba(100, 117, 139, 0.55);}
strong{font-weight:600; color:rgba(208, 87, 107, 0.95);font-size: 1em;background:rgba(255, 255, 255, 0.55);}
del{text-decoration: line-through;}
b{margin-bottom: 0.5em;border-bottom: 1px dotted var(--white); font-size: 1.1em;margin-right:0.2em;}

h4{margin:1em auto; font-size:1.2em;}
h5{margin:1em 1.5em 0 1em; font-size:1.2em;}
section h3{position:relative;margin:5em auto 2em; padding-bottom:-5em;text-align:center; width:200px; border-bottom:dotted 1px rgba(255,255,255,0.85);}
section h3::before, section h3::after{left:50%; transform:translateX(-50%); border-radius:50%;}
section h3::before{top:-0.7em; width:3em; height:3em; border:dotted 1px rgba(255,255,255,0.85);}
section h3::after{top:-1.6em; width:0.25em; height:0.25em; background:rgba(255,255,255,0.85);}
.right {text-align: right;}
.left {text-align: left;}
.center {text-align: center;}
/* ページ上部固定タイトル */
#site-title{position: fixed;top: -13%;right: -1%;z-index:-10;}
#site-title h1 span,#site-title h2 span {position: relative;font-family: var(--ja-font);color: var(--white);}
#site-title h1 span:nth-of-type(1) {padding: 0 0.2em;font-size: 1.8em;right: -1.3em;}
#site-title h1 span:nth-of-type(2) {bottom: -0.1em;padding-right: 0.5em;right: -2.3em;}
#site-title h1 span:nth-of-type(3) {bottom: -4.6em;writing-mode: vertical-rl;font-size: 1.5em;}
#site-titlE{position: fixed;bottom: 1%;left: 20%;z-index:-7;}
#site-titlE h2 span {position: relative;font-family: var(--ja-font);color:rgba(255, 255, 255, .8);padding: 0 0.2em;font-size: 1.6em;left: -2.3em;bottom:-0.5em;}

/* ヘッダー */
header {position: relative;min-height: 90vh;}
header #img{margin: 15vh auto 3em;width: 80%;max-width: 430px;height: 320px;clip-path: polygon(30% 0, 87% 17%, 100% 98%, 30% 84%, 15% 65%, 0 44%);background: linear-gradient(rgba(255, 255, 255, .2)),url("img/bg.jpg") top no-repeat;background-size:170%;z-index:-9;}
header .headerBox {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.box {margin: 1.5em auto;padding:2px 5px;width: 50%;max-width:280px;background:rgba(0, 0, 0,0.2);margin-top:-200px;}
/* ナビゲーション */
nav {margin: 3em auto 2em;text-align: center;max-width:300px;}
/* メインコンテンツ */
main {margin:0 auto;padding-bottom:20%;width:100%;background:rgba(0, 0, 0,0.2);z-index:10;}
article{margin:0 auto; padding-top:100px;position:relative;  text-align:center;width: 95%;max-width: 800px; }
section, section::before{border:solid 1px rgba(255,255,255,0.9);}
section{position:relative; margin:2.5em auto; padding:15px; text-align:justify; width:90%; max-width:750px;}
section::before{top:50%; left:50%; bottom:50%; right:50%; transform:translate(-50%, -50%); width:calc(102% + 1em); height:calc(102% + 1em); clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%); pointer-events:none;}
section > div{margin:50px auto;padding:10px;width:95%; max-width:650px;}
/* リスト */
section ul {margin: 1em auto;list-style-type: none;}
section li {margin: 0.5em auto;}
section li a {display: inline-block;padding: 0.2em 0.5em;background-color: rgba(0, 0, 0, 0.2);}
ul .yoko{list-style-type: none;}
ul.yoko li {margin-right: 0.5em;display: inline-block;}
ul.yoko li a {padding: 0.1em 0.4em;background-color: rgba(0, 0, 0, 0.2);color: #fff;}
/* figure */
h6{font-size:.9em;margin-bottom:0.2em; border-bottom:solid 1px rgba(255, 255, 255, 0.65);}
figure, .icon, figcaption{display:inline-block; vertical-align:top;padding:0.5em 0 1em;}
figure{margin:1em 3px 0.5em; padding:5px auto 8px; width:100%; max-width:300px; height:110px; background-color:rgba(0, 0, 0, 0.08);}
.icon{margin:2px;margin-left:10px;width:60px; height:90px; border-radius:50%;}/* icon image *項目を増やす場合は以下をコピペのうえ、#の名前をひとつずつ変更してHTMLのid名と揃えてください */
#long01_1{background:url('stories/img/01.jade.jpg') center/cover;filter:invert(.08);}
#long01_2{background:url('stories/img/01.snk.jpg') center/cover;filter:invert(.05);}
#long01_3{background:url('stories/img/01.asa.jpg') center/cover;filter:invert(.05);}
#long01_4{background:url('stories/img/01.kaiu.jpg') center/cover;filter:invert(.05);}
#long01_5{background:url('stories/img/01.spima.jpg') center/cover;filter:invert(.05);}
#long01_6{background:url('stories/img/01.sph.jpg') center/cover;filter:invert(.05);}
#long02_1{background:url('stories/img/02.slncstr.jpg') center/cover;filter:invert(.05);}
#long02_2{background:url('stories/img/02.sfhv.jpg') center/cover;filter:invert(.08);}
#long04_1{background:url('stories/img/04.manysp.jpg') center/cover;filter:invert(.1);}
#long05_1{background:url('stories/img/05.souvenir.jpg') center/cover;filter:invert(.05);}
#long05_2{background:url('stories/img/05.blessing.jpg') center/cover;filter:invert(.05);}
#longE_1{background:url('stories/img/e_sc.jpg') center/cover;filter:invert(.05);}
#longE_2{background:url('stories/img/e_zartlich.jpg') center/cover;filter:invert(.05);}
#longE_3{background:url('stories/img/e_aeka.jpg') center/cover;filter:invert(.05);}
#longE_4{background:url('stories/img/e_mdrm.jpg') center/cover;filter:invert(.05);}
#longE_5{background:url('stories/img/e_unsk.jpg') center/cover;filter:invert(.08);}
figcaption{margin-left:0.7em; padding:0 5px 1em 10px; text-align:justify; width:205px; height:93px; border-left:double 4px rgba(255, 255, 255, 0.5);}
figcaption{margin-bottom:20px;}
figcaption p{font-size:0.8em;}
/* form */
details{margin:1em 0 12% 0;}
form, form::before{border:solid 1px rgba(255, 255, 255,0.45);}
form{position:relative; margin:3.5em auto; padding:1.5em; text-align:center; width:100%; max-width:400px; clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);}
form::before, form::after{z-index:-10; top:50%; left:50%; transform:translate(-50%, -50%);}
form::before{width:calc(100% - 7.5px); height:calc(100% - 7.5px); border:solid 1px rgba(255, 255, 255, 0.45);}
form::after{width:150px; height:240px; opacity:0.5;}
input, textarea{display:block; list-style-type: none;margin:1em auto; padding:0.5em; width:90%; max-width:350px; background:transparent;color:rgba(255, 255, 255, 0.45);}
input[type=text], textarea{color:rgba(255, 255, 255, 0.8);border-bottom:dotted 1px rgba(255, 255, 255, 0.5);}
input[type=button]{display: inline-block;width:25%;color:rgba(255, 255, 255, 0.5);background:rgba(0, 0, 0, .08);}
textarea{position:relative; height:12.5em;}
summary:hover, input[type=submit]:hover{color:rgba(255, 255, 255,0.5); transition:0.3s;}

/* ハンバーガーメニュー */
#NavToggle {display: block;position: fixed;top: 5%;left: 3%;z-index: 30;width: 30px;height: 20px;}
#NavToggle div {position: relative;}
#NavToggle span {position: absolute;width: 100%;height: 3px;left: 0;background: #fff;border-radius: 10px;transition: 0.5s ease-in-out;}
#NavToggle span:nth-child(1) {top: 0px;}
#NavToggle span:nth-child(2) {top: 10px;}
#NavToggle span:nth-child(3) {top: 20px;}
.open #NavToggle span:nth-child(1) {top: 12px;transform: rotate(135deg);}
.open #NavToggle span:nth-child(2) {background-color: transparent;}
.open #NavToggle span:nth-child(3) {top: 12px;transform: rotate(-135deg);}
menu {position: fixed;z-index: 25;display: none;top: 0;left: 0;width: 100%;min-height: 100vh;background-color: rgba(0, 0, 0, 0.45);text-align:center;}
menu .img {position: relative;margin: 10vh auto 0em;padding: 0.5em;background:url("img/title.png") no-repeat center;background-size:80%;width:250px;height:250px;text-align:center;filter: brightness(0) invert(1);}
menu ul {margin: 3vh auto 0em;padding:0em;width: 45%;height: auto;position: relative;}
menu li{position: relative;display: inline-block;margin-right: 1em;}
.box_m::before, .box_m::after {position: absolute;display: block;content: '';width: 50px;height: 20px;}
.box_m::before {top: -20px;left: -20px;border-top: thin solid var(--white);border-left: thin solid var(--white);}
.box_m::after {bottom: -20px;right: -20px;border-bottom: thin solid var(--white);border-right: thin solid var(--white);}
menu ul li a{font-size:1.3em;color: #fff;display: inline-block;margin: 0.5em;}
/* 横幅768px以下で読み込む */
@media screen and (max-width: 768px) {
body {font-size: 14px;}
#sitetitle{position: absolute;top:25%;left:45%;z-index:8;font-size: 1.2em;color: var(--black);writing-mode: vertical-rl;-ms-writing-mode: tb-rl;-webkit-writing-mode: vertical-rl;background: linear-gradient(rgba(255, 255, 255, 1));padding:3px 2px;font-weight: bold;}
/*斜線*/
#site-title span:not(h1 span) {order: -1;content: '';display: block;position: relative;width: 3px;height: 180px;top:-90px;right: -130px;border-left: var(--white) solid 2px;box-sizing: border-box;transform: rotate(45deg) translateX(100px);}
/* ◇*/
nav::before {order: -1;content: '';display: block;position: relative;margin:10px;height: 50px;bottom:240px;left: -40px;transform: rotate(45deg);width: 60px;height: 60px;border: 8px solid #fff; opacity:.7;}
/*水玉*/
nav::after {margin:10px; content: '';display: block;position: relative;width: 180px;height: 120px;left:-60px;bottom:250px;background-image: radial-gradient(rgba(255, 255, 255, .55) 30%, transparent 33%),radial-gradient(rgba(255, 255, 255, .55) 30%, transparent 33%);background-size: 12px 12px;}
}
/* 横幅1024px以上で読み込む */
@media screen and (min-width: 768px) {
body {font-size: 15px;}
#sitetitle{position: absolute;top:23%;left:49%;letter-spacing: 0.5em;z-index:8;text-align:center;font-size: 1.2em;color: var(--black);writing-mode: vertical-rl;-ms-writing-mode: tb-rl;-webkit-writing-mode: vertical-rl;background: linear-gradient(rgba(255, 255, 255, 1));padding:0px;font-weight: bold;}
/*斜線*/
#site-title span:not(h1 span) {content: '';display: block;position: relative;width: 3px;height:210px;top:-90px;right: -145px;border-left: var(--white) solid 3px;box-sizing: border-box;transform: rotate(45deg) translateX(100px);z-index:-1;}
/* ◇*/
nav::before {order: -1;content: '';display: block;position: relative;height: 50px;bottom:250px;left: -80px;transform: rotate(45deg);width: 70px;height: 70px;border: 8px solid #fff; opacity:.7;}
/*水玉*/
nav::after {content: '';display: block;position: relative;width: 165px;height: 135px;left:-60px;bottom:260px;background-image: radial-gradient(rgba(255, 255, 255, .45) 30%, transparent 33%),radial-gradient(rgba(255, 255, 255, .45) 30%, transparent 33%);background-size: 15px 15px;}
/* カラム */
.half{position:relative; display:inline-block; vertical-align:top; margin:2% auto 2%; padding-left:15px; width:48%; border-right:dotted 1px rgba(255, 255, 255, 0.9);}
.half:last-of-type{margin-right:0; padding-left:25px; border:none;}
.half::before, .half::after{right:-0.2em; width:3px; height:3px; background:rgba(255, 255, 255, 0.9); border-radius:50%;}
.half::before{top:-1em;}
.half::after{bottom:-1em;}
.half:last-of-type::before, .half:last-of-type::after{display:none;}
}