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


/* Introduction */
#intro-column .column { padding: 2em 0 0 0; }
#intro-column h1, #contents h1 { background: #FA5; }
#left-box { width: 55%; float: left; }
#intro-column h2 { font-size: 185%; line-height: 1.4; font-weight: bold; padding: 1.2em 0 2.2em 0; }
#diagram { width: 40%; float: right; }
#diagram img { width: 100%; height: auto; }
#intro-column h3 { font-size: 180%; line-height: 1.3; text-align: center; padding: 1.2em 0 .4em 0; border-bottom: solid 1px #FA5; clear: both; }
#intro-column h4 { width: 60%; margin: 0 auto; padding: .4em 0; }
#intro-column h4 img { width: 100%; height: auto; }
.approach-box { width: 94%; max-width: 700px; margin: 0 auto; padding: 2em 0 3em 0; border-top: solid 1px #FA5; position: relative; }
.approach-box:before { content: ""; margin-left: -15px; border: solid transparent; border-top-color: #FA5; border-width: 15px; position: absolute; top: 0; left: 50%; }
.approach-box:after { content: ""; margin-left: -15px; border: solid transparent; border-top-color: #FFF; border-width: 15px; position: absolute; top: -2px; left: 50%; }
.approach-box h1 { font-size: 150%; line-height: 1.2; font-weight: bold; padding-bottom: .6em; display: flex; align-items: center; }
.approach-box h1 strong { width: 20%; height: auto; padding-right: .5em; }
.approach-box h1 strong img { width: 100%; height: auto; }
.approach-box p { text-align: justify; }
.approach-box dl { padding: 1em 0; }
.approach-box dl dt { font-size: 105%; font-weight: bold; color: #FA5; }
.approach-box dl dd ul { display: flex; flex-wrap: wrap; }
.approach-box dl dd ul li { padding: .2em .8em 0 0; }
.approach-box dl dd ul li span { color: #FA5; }
.approach-box p.commlink { font-size: 115%; line-height: 1.3; font-weight: bold; text-align: center; }
.approach-box p.commlink a { color: #FFF; width: 20em; margin: 0 auto; padding: .6em 0; border-radius: 2em; background: #FA5; display: block; }
.approach-box p.commlink a:hover { opacity: .8; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  #intro-column .column { padding-top: 0; }
  #left-box { width: 100%; float: none; }
  #diagram { width: 80%; margin: 0 auto; padding-top: 1em; float: none; }
  #intro-column h2 { font-size: 180%; line-height: 1.2; text-align: center; padding: 1em 0; }
  #intro-column h3 { font-size: 135%; line-height: 1.3; }
  #intro-column h4 { width: 90%; }
  .approach-box { padding-bottom: 2em; }
  .approach-box h1 { font-size: 123%; line-height: 1.2; }
  .approach-box h1 strong { width: 30%; }
  .approach-box p.commlink a { width: 16em; }
}


/* Contents */
#catch-box, #read-box { padding-top: 2em; zoom: 1; overflow: hidden; }
#catch-box:after, #read-box:after { content: ""; clear: both; display: block; }
#title-box { width: 48%; padding-top: 8em; float: left; }
#lecture-title { font-size: 115%; line-height: 1.2; text-align: center; padding-top: .5em; }
#lecture-title span { color: #FA5; padding: 0 .3em; }
#catch-box h2 { font-size: 165%; line-height: 1.4; text-align: left; width: 40%; padding: 12% 8% 12% 0; background: url("../images/communication/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: #FA5; 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 dl dt img { width: 100%; height: auto; }
#read-box dd { font-size: 93%; line-height: 1.4; }
#read-box dd strong { font-size: 105%; line-height: 1.3; font-weight: normal; padding-bottom: .2em; display: block; }
#read-box dd strong span { font-size: 135%; padding-right: .3em; }
#read-box dd em { display: block; }
#menu-box { padding-top: 1em; border-top: solid 1px #FA5; }
#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) {
  #contents .column { width: 100%; padding-bottom: 0; }
  #lecture-title { padding-top: 2em; }
  #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%; }
  #read-box dd em { display: inline; }
  #read-box dd em:before { content: "｜"; }
  #menu-box ul { padding-bottom: 1em; }
  #menu-box ul li { width: auto; margin: 0 3%; }
}