@charset "UTF-8";
/* CSS Document */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 62.5%; }

body { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 1.4rem; color: #753227; }
@media screen and (min-width: 1366px) { body { overflow: hidden; background-color: aliceblue; } }

p, li, dt, dd { margin: 8px 0; line-height: 1.2; }

a { text-decoration: none; color: #753227; }

h1, h2, h3 { font-family: 'Bigelow Rules', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 300; letter-spacing: 3px; }

h2 { font-size: 4rem; margin: 32px 0; }

h3 { font-size: 3rem; margin: 24px 0; }

h4 { font-weight: 300; font-size: 1.6rem; margin: 8px 0; }

ul { list-style: none; }

.wrapper { display: flex; }

.box { border: 1px solid #bf9100; border-left: none; border-right: none; padding: 16px; }

.kiji .wrapper { justify-content: space-between; }
.kiji h4 { margin: 8px 0; }
.kiji time { font-size: 1.2rem; }

.marker { position: relative; }
.marker::after { content: ''; position: absolute; top: 4px; display: block; width: 100%; height: 14px; background-color: rgba(191, 145, 0, 0.1); z-index: -1; }

.hr { text-align: center; margin: 32px 0; }
.hr::after { content: '\f551'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2rem; color: #bf9100; }

.table { display: grid; grid-template-columns: 150px 1fr; }
.table dt, .table dd { margin: 8px; }

textarea { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }

button:hover { cursor: pointer; }

.btn { border: none; background-color: #bf9100; color: #fff; padding: 4px 8px; }

/*---------------------------------
	Index
---------------------------------*/
.index { text-align: center; }
.index .comment { font-family: 'Bigelow Rules',"serif"; font-size: 6rem; letter-spacing: 2px; margin: 64px 0 80px; }
@media screen and (max-width: 1023px) { .index .comment { font-size: 4rem; } }
.index .bookcover { position: relative; display: flex; justify-content: center; height: 300px; width: 246px; margin: 64px auto; transition: 0.3s; }
@media screen and (max-width: 1023px) { .index .bookcover { height: 180px; } }
.index .bookcover:hover { box-shadow: 0 0 15px #aaadc0; background-color: #aaadc0; transition: 0.3s; }
.index .bookcover img { height: 300px; width: 246px; }
@media screen and (max-width: 1023px) { .index .bookcover img { height: 218px; width: 180px; } }
.index .bookcover h1 { position: relative; top: -60%; left: 3%; font-size: 3rem; font-weight: 300; color: #826414; }
@media screen and (max-width: 1023px) { .index .bookcover h1 { top: -75%; font-size: 2rem; } }

/*--------------------------------- スマホ用メニューボタン
---------------------------------*/
.menubtn { position: fixed; top: 8px; right: 8px; font-family: 'Bigelow Rules',"serif"; font-size: 3rem; font-weight: 500; color: #753227; background-color: #fff; padding: 0; width: 40px; height: 46px; border: none; z-index: 10; }
@media screen and (min-width: 1024px) { .menubtn { display: none; } }
.menubtn span:first-child, .menubtn span:nth-child(2) { position: absolute; right: 0; display: block; width: 30px; height: 3px; border-bottom: 3px solid #753227; margin: 4px; transition: 0.3s; }
.menubtn span:first-child { top: 0; }
.menubtn span:nth-child(2) { top: 8px; }
.menubtn span:nth-child(3) { position: absolute; top: 16px; right: 0; }
.menubtn.active { height: 40px; box-shadow: 0 0 5px #bf9100; transition: 0.3s; }
.menubtn.active span:first-child { transform: rotate(-45deg); top: 14px; right: 1px; transition: 0.3s; }
.menubtn.active span:nth-child(2) { transform: rotate(45deg); top: 14px; right: 1px; transition: 0.3s; }
.menubtn.active span:nth-child(3) { display: none; transition: 0.3s; }

/*--------------------------------- 本の枠
---------------------------------*/
@media screen and (min-width: 1366px) { .book { position: relative; margin: 0 auto; width: 1180px; height: 99vh; }
  .book::before { content: ''; position: absolute; display: inline-block; background: url("../img/book2.png") no-repeat center; background-size: 100% 100%; width: 1180px; height: 99vh; z-index: -1; } }
@media screen and (max-width: 1023px) { .book { display: block; } }
/*--------------------------------- 本の左側
---------------------------------*/
aside { text-align: center; z-index: 9; }
@media screen and (min-width: 1024px) { aside { width: 480px; margin: 0 30px 0 80px; } }
@media screen and (max-width: 1023px) { aside { width: 100%; display: none; position: fixed; top: 0; left: 0; background-color: #fff; height: 100vh; overflow: hidden; }
  aside.active { display: block; } }
aside .grobalnav { border: 2px solid #bf9100; margin-top: 100px; height: calc(100vh - 140px); }
@media screen and (max-width: 1023px) { aside .grobalnav { margin-top: 40px; height: calc(100vh - 70px); } }
aside .grobalnav::before { content: ''; margin-top: -80px; display: block; background: url("../img/kazari.png") center no-repeat; background-size: contain; height: 80px; }
@media screen and (max-width: 1023px) { aside .grobalnav::before { margin-top: -40px; height: 40px; } }
aside .grobalnav > h2 { position: relative; display: inline-block; font-size: 4rem; font-weight: 300; text-align: center; margin: 32px 0 16px; }
@media screen and (max-width: 1023px) { aside .grobalnav > h2 { margin: 16px 0 8px; } }
aside .grobalnav > h2::before, aside .grobalnav > h2::after { content: ''; position: absolute; display: block; width: 100%; }
aside .grobalnav > h2::before { bottom: 0; border-bottom: 1px solid #bf9100; }
aside .grobalnav > h2::after { bottom: -5px; border-bottom: 2px solid #bf9100; }
aside .grobalnav dl { text-align: left; padding: 0 32px 32px; margin-bottom: 32px; height: calc(100vh - 250px); width: 99%; overflow-y: auto; }
@media screen and (max-width: 1023px) { aside .grobalnav dl { padding: 8px; height: calc(100vh - 160px); } }
aside .grobalnav dt { font-family: 'Bigelow Rules',"serif"; font-size: 3rem; letter-spacing: 2px; margin: 16px 0; border-bottom: 1px solid #bf9100; }
@media screen and (max-width: 1023px) { aside .grobalnav dt { margin: 8px 0; } }
aside .grobalnav dd { margin-left: 32px; letter-spacing: 2px; }
aside .grobalnav dd .workslist1 { text-indent: 16px; }
aside .grobalnav dd .workslist2 { display: flex; flex-wrap: wrap; margin-left: 16px; }
aside .grobalnav dd .workslist2 li { padding: 0 8px; }
aside .grobalnav i { display: block; font-size: 2rem; color: #bf9100; text-align: center; margin-top: 32px; }
aside small { font-size: 1rem; }

/*--------------------------------- 本の右側
---------------------------------*/
@media screen and (min-width: 1024px) { main { width: 500px; margin: 40px 60px 0 30px; padding-right: 16px; padding-bottom: 32px; height: calc(100vh - 80px); overflow-y: auto; } }
@media screen and (max-width: 1023px) { main { margin: 8px; margin-bottom: 32px; } }

article h2 { text-align: center; }

.news h3 { margin: 0; }
.news time { margin-right: 32px; }

.story h2 { font-size: 2rem; }
.story p { margin: 32px 0; line-height: 1.8; }

.linklist1 { flex-wrap: wrap; }
.linklist1 li { margin: 8px; }