@charset "utf-8";
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

body{font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka"; text-align: center; margin: 0 auto; padding: 50px 5vw; box-sizing: border-box; max-width: 767px; }
h1{ margin: 0 0 60px 0; }
body.index-page { margin: 0 auto; padding: 5vw 5vw 50px 5vw; background: #faee82; }
body.index-page h1 { margin: 0; padding: 0; background: #faee82; }
body.index-page h1 img { margin: 0; vertical-align: top; }

.story { text-align: center; }
figure { display: block; margin: 0 auto; margin-bottom: 50px; }
figure.last-cut { margin-bottom: 0; }
img { width: 100%; height: auto; vertical-align: top; }
.button-box { display: block; margin: 0 auto; padding: 5vw; }
.button { display: block; font-size: 24px; font-weight: bold; padding: 1.0em 0; position: relative; background: #fff; color: #297b00; border-radius: 5px; text-decoration: none; margin-bottom: 0.5em; }
.button-box.color01 { background: #e3b2b8; }
.button-box.color02 { background: #ad8cbb; }
.button-box.color03 { background: #d3cbc8; }

.button:before { content:url('../img/arrow.svg'); width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); }
.button.next:before { right: 20px; }
.button.prev:before { left: 20px; transform: translateY(-50%) rotate(180deg); }

.index { margin: 0 0 8vw 0; padding: 3vw; list-style: none; background: #fff; border-radius: 12px; }
.index li { margin-bottom: 3vw; }
.index li a { display: block; padding: 10px; position: relative; border-radius: 8px; text-decoration: none; transition: all 0.3s; }
.index li a:hover { opacity: 0.7; }
.index li a span { position: absolute; right: 0.6em; top: 0.6em; display: inline-block; letter-spacing: 0.05em; font-size: 4.0vw; padding: 0.45em 44px 0.35em 1.5em; line-height: 1.0; border-radius: 50px; color: #333; font-weight: normal; background: #fff; }
.index li a span:after { content: url('../img/icon-book.svg'); position: absolute; right: 5px; top: 50%; transform: translateY(-50%) scale(0.6); }
.index li:first-child { font-size: 20px; padding-bottom: 0.3em; }
.index li:first-child,
.index li:last-child { margin-bottom: 0; }
.index li:nth-child(2) a { background: #f9f4b1; }
.index li:nth-child(3) a { background: #e3b9bb; }
.index li:nth-child(4) a { background: #bfaacf; }

.moredetail .title { max-width: 597px; margin: 0 auto; margin-bottom: 4vw; width: 100%; box-sizing: border-box; padding: 3vw 4vw; background: #bfa3c5; border-radius: 100px; position: relative; }
.moredetail .title:before { content: ""; border: solid 2.5vw transparent; border-top: solid 2.5vw #bfa3c5; position: absolute; left: 50%; top: 99.9%; transform: translateX(-50%); }
.moredetail a { font-size: 3.5vw; display: block; color: #333; font-weight: bold; text-decoration: none; margin-bottom: 0; padding: 0; transition: all 0.3s; }
.moredetail a:hover { opacity: 0.7; }
.moredetail a em { font-style: normal; }
.moredetail a img { width: 100%; height: auto; margin: 0; padding: 0; }
.moredetail p{ padding: 0; margin: 0; }

@media(max-width: 399px){
	.moredetail .title { padding: 15px 15px 5px 15px; }
	.moredetail .title img { width: 100%; }
}

@media(min-width:768px){
	.index { margin: 0 0 50px 0; padding: 15px; }
	.index li { margin-bottom: 15px; }
	.index li a span { font-size: 26px; padding: 0.45em 44px 0.35em 1.5em; line-height: 1.0; border-radius: 50px; color: #333; font-weight: normal; background: #fff; }
	.index li a span:after { content: url('../img/icon-book.svg'); position: absolute; right: 5px; top: 50%; transform: translateY(-50%) scale(0.6); }
	.button-box{ padding: 15px; }
	.moredetail .title { margin-bottom: 35px; padding: 20px 40px; }
	.moredetail .title:before { border: solid 20px transparent; border-top: solid 20px #bfa3c5; }
	.moredetail a { font-size: 26px; }
}