@charset "UTF-8";
/* CSS Document */


/* Introduction */
#intro-column h1, #contents h1 { background: #B1D070; }
#intro-column h2 { font-size: 240%; line-height: 1.4; font-weight: bold; text-align: center; padding: 2.5em 0; }
#intro-column h3 { font-size: 180%; line-height: 1.2; text-align: center; color: #B1D070; }
#button-box { padding: 4em 0 3em 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
#button-box dl { width: 22%; }
#button-box dl dt { padding-bottom: .5em; position: relative; }
#button-box dl dt strong { width: 50%; height: auto; display: block; position: absolute; top: -25%; }
#button-box dl#btn3 dt strong, #button-box dl#btn4 dt strong { right: 0; }
#button-box dl dt img { width: 100%; height: auto; }
#button-box dl dt a:hover { opacity: .8; }
#button-box dl dd { text-align: center; color: #B1D070; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  #intro-column h2 { font-size: 180%; line-height: 1.4; padding: 1em 0; }
  #intro-column h2 span:before { content: "\A"; white-space: pre; }
  #intro-column h3 { font-size: 135%; line-height: 1.2; }
  #button-box { padding: 1em 0 1em 0; }
  #button-box dl { width: 42%; padding: 10% 4% 5% 4%; }
  #button-box dl#btn1 dt strong, #button-box dl#btn3 dt strong { left: 0; }
  #button-box dl#btn2 dt strong, #button-box dl#btn4 dt strong { right: 0; }
}


#read-box { width: 100%; max-width: 700px; margin: 1em auto; padding: 8em 0; position: relative; }
#read-box h2 { font-size: 200%; line-height: 1.2; padding: .2em 0 .3em 0; border-top: solid 1px #77bb33; border-bottom: solid 1px #77bb33; }
#graph { width: auto; height: 100%; position: absolute; top: 0; right: 0; }
#graph img { width: auto; height: 100%; }

#message { width: 94%; max-width: 700px; margin: 0 auto; padding-bottom: 2em; zoom: 1; overflow: hidden; }
#message:after { content: ""; clear: both; display: block; }
#message .txt-box { width: 60%; float: right; }
#message .txt-box h1 { font-size: 135%; line-height: 1.4; font-weight: bold; padding-bottom: .6em; }
#message .txt-box p { text-align: justify; padding-bottom: .6em; }
#message dl { width: 35%; float: left; }
#message dl dt { padding-bottom: .4em; }
#message dl dt img { width: 100%; height: auto; }
#message dl dd { font-size: 85%; line-height: 1.3; }
#message dl dd strong { font-size: 123%; line-height: 1.3; font-weight: normal; padding-bottom: .3em; display: block; }
#message .arrow-box { padding: 1em 0; clear: both; }
#message h2 { font-size: 135%; line-height: 1.2; text-align: center; color: #7B3; padding: .5em 0; background: #E4F1D6; position: relative; }
#message h2:after { content: ""; margin-left: -20px; border: solid transparent; border-top-color: #E4F1D6; border-width: 20px; position: absolute; bottom: -1.8em; left: 50%; }

.act-box { width: 94%; max-width: 700px; margin: 0 auto; padding-bottom: 2em; }
.act-box h1 { font-size: 123%; line-height: 1.2; text-align: left; padding: .4em 0 .5em 0; border-top: solid 1px #F60; border-bottom: solid 1px #F60; }
.act-box h1 span { font-size: 85%; line-height: 1.2; padding-left: .5em; }
.act-box dl { padding: 1em 0 2em 0; position: relative; }
.act-box dl dt { width: 30%; height: auto; position: absolute; top: -1em; right: 2%; }
.act-box dl dt img { width: 100%; height: auto; }
.act-box dl.illust dd { width: 60%; min-height: 10em; }
.act-box dl dd p { line-height: 1.8; text-align: justify; }

#menu-box { width: 94%; max-width: 700px; margin: 0 auto; padding: 1em 0; border-top: solid 1px #B1D070; }
#menu-box ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
#menu-box ul li { width: 18%; height: auto; }
#menu-box ul li img { width: 100%; height: auto; }
#menu-box ul li a:hover { opacity: .8; }

@media only screen and (max-width: 680px) and (orientation: portrait) {
  #read-box { margin: 0 0 1em 0; padding: 0; }
  #read-box h2 { font-size: 180%; line-height: 1.4; text-align: center; padding: .8em 0; border: none; }
  #graph { width: 90%; height: auto; margin: 0 auto; position: relative; }
  #graph img { width: 100%; height: auto; }
  #message .txt-box { width: 100%; float: none; }
  #message dl { width: 100%; float: none; }
  #message dl dd { padding-left: 6.5em; position: relative; }
  #message dl dd#name5 { padding-left: 8em; }
  #message dl dd strong { position: absolute; top: .5em; left: 0; }
  .act-box h1 { font-size: 123%; line-height: 1.2; text-align: center; }
  .act-box h1 span { padding-left: 0; }
  .act-box h1 span:before { content: "\A"; white-space: pre; }
  .act-box dl { padding: 1em 0 1em 0; }
  .act-box dl dt { width: 60%; margin: 0 auto 1em auto; position: relative; top: 0; right: 0; }
  .act-box dl.illust dd { width: 100%; min-height: auto; }
  #menu-box ul li { width: 24%; height: auto; }
}