@charset "UTF-8";

/* リセットCSS*/
html, body, div, span, figure, img, fieldset,
a, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, small, strong, dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:none ;outline:none; font-size:1em;}
header,hgroup,nav,article,section,figure,footer{display:block;}
ol, ul{list-style:none;}


/* メディアクエリ */
@media screen and (min-width:800px) { }/*タブレットから縦*/
@media screen and (min-width:768px){ } /*スマホ横から*/
@media screen and (max-width:480px){ }/*スマホ縦から*/


/* Google Webフォントの読み込み */

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
font-family:Lato, "Noto Sans JP",'Open Sans', sans-serif, Lato,  "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic";
width:100%;
background:none;
margin-top:0;
}

/* ヘッダー */
header img{
   width:100%;
   margin:auto;
   padding:0;
   background-size:contain;/* 縦横比は保持して拝啓領域に収まる最大サイズになるよう背景画像を拡大縮小 */
   background-position:50% 50%;/* 中央に配置 */
   }


nav{
   text-align:center;
   margin-left:auto; 
   margin-right:auto
   }

/* コンテンツ */
section{
   width:100%;
   overflow:hidden;
   clear:both;  
   }

section article{
  padding:3% 3% 0% 3%;
  }

section article a{
  padding-right:3%;
  overflow:hidden;
  }
  
article{
  clear:both;
  }
 

h1{
 padding:15px 0px 0px 15px;
 margin:0px;
 color:cornflowerblue; 
 font-size:2em;
 border-bottom: 1px solid dimgray;
 }

.touroku
{
 font-size:1.2em;
 }
 
h2{
 font-size:1.7em; 
 padding:10px;
 margin:10px;
 }
 
.question{
  position: relative;
  padding: 0.6em;
  background: aliceblue;
  color:dimgray ;
  }

.question:first-letter {
font-size: 1.7em;
color: cornflowerblue;
}


.question:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid aliceblue;
width: 0;
height: 0;
}

.answer{
  position: relative;
  padding: 0.6em;
  background: bisque;
  color: dimgray;
}
  
.answer:first-letter {
font-size: 1.7em;
color: red;
}

.answer:after {
position: absolute;
content: '';
top: 100%;
right: 30px;
border: 15px solid transparent;
border-top: 15px solid bisque;
width: 0;
height: 0;
}

.check{
background: linear-gradient(transparent 50%, #a7d6ff 50%);
}


.under{
background: linear-gradient(transparent 50%, #ffff00 100%);
}


h3{
 font-size:1.5em; 
 color: #00008b; 
 padding:0px 10px 10px 10px; 
 margin-bottom:10px;
 border-bottom: 1px solid #00008b;
 border-left:solid 5px #00008b; 
 border-bottom:solid 1px #00008b; 
 }

h4{
 font-size:1.2em;
 font-weight:bold;
 }
 
p, ul {
   font-size:1.2em;
   line-height:normal; 
   margin:2%;
   }

.red{
  color:#990000;
 }
 
a{
  color:blue;
 }
 
a:hover{
 color:red
}

.tuzuki a {
	text-decoration: none ;
}

/* メニュー */

#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    font-size:14px;
    text-align:left;
    height: 100%;
    padding: 6px 6px 6px 10px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
}

#ham-menu ul{ font-size:1.2em;
   line-height:110%;  margin:2%; }

#ham-menu li {padding-bottom:6px;}

#ham-menu  a { text-decoration: none ; }

#ansMSG1  a { text-decoration: none ; }
#ansMSG2  a { text-decoration: none ; }
#ansMSG3  a { text-decoration: none ; }
#ansMSG4  a { text-decoration: none ; }
#ansMSG5  a { text-decoration: none ; }

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #fff; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 80px; /*アイコン（フォント）サイズ*/
    height: 80px; /*アイコン縦高さ*/
    line-height: 80px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 80px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

/* コラム設定 */
.multicolumnbox {
   -moz-olumns-width: 30em;
   -webkit-columns-width: 30em;
    column-width: 30em; 
    column-rule: dashed dimgray 1px;
    column-gap: 40px;
}

.singlecolumnbox {
   -moz-olumns-width: 100em;
   -webkit-columns-width: 100em;
    column-width: 100em; 
}

/* キャプション付き画像全体を囲むボックスの装飾 */
figure {
    display: inline-block;   /* インラインブロック化 */
    margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */

}
/* 画像に対する装飾 */
figure img {
    display: block;          /* 余計な余白が出ないようにする */
    margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
/* キャプションに対する装飾 */
figcaption {
    text-align: center;      /* 中身をセンタリング */
}

/* 理解度チェック */
.checktest {
  padding:10px;
  background-color:#e0e0e0;
}

.checktest label {
  display: inline-block;
  text-align:justify ;
}

/* メニュー */
.title{
position: relative;
padding: 0.5em;
background: cornflowerblue;
color: white;
}

.title:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

.logo{
 display:inline-block;
 width: 65px;
 hight: 30px;
 }

.reed{
font-size:0.6em;
color: white
}	

.aboutus{
border-bottom: double 5px cornflowerblue;
color: dimgray;
}

.koumoku{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.0;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.koumoku:before {
content: '●';
color: white;
margin-right: 8px;
}

.Qnum {
font-size: 2em;
color: cornflowerblue;
}

.koumoku-a:first-letter {
font-size: 2em;
color: red;
}

.qa-box {
color: dimgray;/*文字色*/
border: solid 3px cornflowerblue;/*線色*/
padding: 0.0em;/*文字周りの余白*/
margin:0.5em;/*外周りの余白*/
border-radius: 0.5em;/*角丸*/
}

.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: orange;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 4px orange;
    border-radius: 3px;
	font-size:0.8em;
	width:auto;
}
.square_btn:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
    border-bottom: none;
}