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


/* Introduction */
#intro-column h1, #contents h1 { background: #6CE; }
#intro-column h2 { font-size: 260%; line-height: 1.6; font-weight: bold; text-align: center; padding: 3em 0; }
#intro-column ul { padding-bottom: 2em; display: flex; flex-wrap: wrap; justify-content: space-between; }
#intro-column ul li { font-size: 115%; line-height: 1.3; text-align: center; width: 32%; margin-bottom: 1em; }
#intro-column ul li a { color: #FFF; padding: 1em 0; border-radius: .5em; background: #6CE; display: block; }
#intro-column ul li a:hover { opacity: .8; }
#intro-column p { font-size: 105%; line-height: 1.6; text-align: justify; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  #intro-column h2 { font-size: 180%; line-height: 1.4; padding: 2em 0; }
  #intro-column ul li { font-size: 100%; line-height: 1.3; width: 49%; margin-bottom: .6em; }
}


/* Contents */
#catch-box, #read-box { padding-top: 2em; zoom: 1; overflow: hidden; }
#catch-box:after, #read-box:after { content: ""; clear: both; display: block; }
#catch-box h2 { font-size: 180%; line-height: 1.4; text-align: left; width: 40%; padding: 12% 8% 12% 0; background: url("../images/psychology/balloon.png") no-repeat center right; background-size: 62% ; float: left; }
#catch-box div { width: 42%; float: left; }
#catch-box div img { width: 100%; height: auto; }
#read-box h3 { font-size: 135%; line-height: 1.4; text-align: center; color: #6CE; padding-bottom: 1.2em; }
#read-box #text-box { width: 55%; padding-bottom: 2em; float: left; }
#read-box #text-box p { text-align: justify; padding-bottom: .6em; }
#read-box dl { width: 37%; float: right; }
#read-box dl dt { padding-bottom: .5em; }
#read-box dd strong { font-size: 123%; line-height: 1.3; padding-bottom: .2em; display: block; }
#read-box dl dt img { width: 100%; height: auto; }
#menu-box { padding: .6em 0; border-top: solid 1px #6CE; }
#menu-box ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
#menu-box ul li { text-align: center; width: 32%; margin: 0 .5% 2% .5%; margin-bottom: .6em; }
#menu-box ul li a { color: #4AC; padding: .8em 0; border-radius: .5em; box-shadow: 0 0 0 1px #6CE; display: block; }
#menu-box ul li a:hover { color: #FFF; background: #6CE; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  #contents .column { width: 100%; padding-bottom: 0; }
  #catch-box h2 { font-size: 180%; line-height: 1.4; text-align: center; width: 100%; padding: 0; background: none; float: none; }
  #catch-box div { width: 80%; margin: 1em auto 0 auto; float: none; }
  #read-box h3 { font-size: 135%; line-height: 1.3; text-align: left; padding: 0 3% 3% 3%; }
  #read-box h3 span:before { content: "\A"; white-space: pre; }
  #read-box #text-box { width: 94%; padding: 0 3% 3% 3%; float: none; }
  #read-box dl { width: 100%; padding-bottom: 1em; float: none; }
  #read-box dl dd { padding: 0 3%; }
  #menu-box ul { padding: 0 3%; }
  #menu-box ul li { width: 49%; margin: 0 0 2% 0; }
}