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


/* Introduction */
#intro-column h1, #contents h1 { background: #ED7B86; }
#intro-column h2 { font-size: 240%; line-height: 1.4; font-weight: bold; text-align: center; padding: 3em 0; }
#intro-column h3 { font-size: 180%; line-height: 1.2; text-align: center; color: #ED7B86; padding-bottom: .6em; }
#button-box { padding-bottom: 3em; display: flex; flex-wrap: wrap; justify-content: space-between; }
#button-box dl { width: 28%; padding: 2%; position: relative; }
#button-box dl dt { width: 40%; position: absolute; top: -10%; right: 0; z-index: 100; }
#button-box dl dd { text-align: center; color: #B1D070; }
#button-box dl img { width: 100%; height: auto; }
#button-box dl a:hover { opacity: .8; }
@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 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: 0 4% 5% 4%; }
  #button-box dl#btn1 { margin: 0 25%; }
  #button-box dl#btn2, #button-box dl#btn3 { margin-top: -7%; }
  #button-box dl dt { top: -15%; }
  #button-box dl#btn2 dt { left: 0; }
}

#visual-box { width: 100%; max-width: 700px; margin: 0 auto 2em auto; position: relative; }
#visual-box h2 { font-size: 200%; line-height: 1.2; text-align: center; padding: .6em 0 1em 0; }
#visual-box h3 { width: 60%; position: absolute; top: 50%; left: 0; }
#visual-box #photo { width: 85%; margin-left: 15%;}
#visual-box dl { color: #FFF; width: 85%; margin-left: 15%; background: rgba(235,125,135,0.8); position: absolute; bottom: 0; }
#visual-box dl dt { padding: 1% 1.5% 0 1.5%; }
#visual-box dl dt strong { font-size: 115%; line-height: 1.3; padding-right: .5em; }
#visual-box dl dd { font-size: 80%; text-align: justify; padding: 0 1.5% 1% 1.5%; }
#photo img, #visual-box h3 img { width: 100%; height: auto; }

#read-box { width: 94%; max-width: 700px; margin: 0 auto 1em auto; zoom: 1; overflow: hidden; }
#read-box:after { content: ""; clear: both; display: block; }
#step-box { width: 52%; float: left; }
#step-box h1 { width: 100%; height: 55px; margin-bottom: 1em; position: relative; }
#step-box h1 img { width: auto; height: 100%; }
#step-box h1:after { content: ""; width: 100%; height: 1px; background: #ED7B86; display: block; position: absolute; bottom: 15px; }
#step-box dl { width: 100%; padding-bottom: 1.5em; display: flex; align-items: center; position: relative; }
#step-box dl:after { content: ""; margin-left: -10px; border: solid transparent; border-top-color: #999; border-width: 10px; position: absolute; bottom: -.2em; left: 50%; }
#step-box dl#grade4:after { border: none; }
#step-box dl dt { width: auto; height: 55px; padding-right: .5em; }
#step-box dl dt img { width: auto; height: 100%; }
#step-box dl dd { font-size: 93%; line-height: 1.3; text-align: justify; }
#comment-box { width: 40%; padding-top: 1em; float: right; }
#comment-box p { text-align: justify; padding-bottom: .6em; }
#menu-box { width: 94%; max-width: 700px; margin: 0 auto; padding: 1em 0; }
#menu-box ul { display: flex; justify-content: center; }
#menu-box ul li { text-align: center; width: 20%; margin: 0 5%; }
#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) {
  #visual-box h2 { font-size: 180%; line-height: 1.2; padding-bottom: .4em; }
  #visual-box h3 { width: 96%; padding-bottom: .6em; position: relative; top: 0; left: 2%; }
  #visual-box #photo { width: 100%; margin-left: 0; }
  #visual-box dl { color: #333; width: 100%; margin-left: 0; background: none; position: relative; }
  #visual-box dl dt { padding: 2% 3% 0 3%; }
  #visual-box dl dd { font-size: 93%; padding: 0 3% 0 3%; }
  #step-box, #comment-box { width: 100%; float: none; }
  #step-box h1 { width: 100%; height: auto; }
  #step-box h1 img { width: 100%; height: auto; }
  #step-box dl { padding-bottom: 2.5em; justify-content: space-between; }
  #step-box dl:after { bottom: 0; left: 17.5%; }
  #step-box dl dt { width: 25%; margin: 0 5%; height: auto; }
  #step-box dl dt img { width: 100%; height: auto; }
  #step-box dl dd { font-size: 105%; line-height: 1.4; width: 60%; margin-right: 5%; }
  #menu-box ul { padding-bottom: 1em; }
  #menu-box ul li { width: auto; margin: 0 3%; }
}