@charset "utf-8";

/* ========BASIC======== */
*{margin:0;
  padding:0;
  font-size:16px;
/*  font-family:Verdana, Helvetica, sans-serif; */
/* font-family:arial narrow,sans-serif;   */
/*  font-family:Meiryo;  */
  color:#333;
  line-height:20px;
  letter-spacing:1px;
  }
br      {letter-spacing:normal;}
a       {color:#FF0000;
		 text-decoration:none;}
a:hover {color:#FF0000;
		 text-decoration:none;} //マウスを乗せたときの色
img     {border:0px;}

body {text-align:center;}

p{
          text-indent: 1em;
}

/*
 CSS for the main interaction
*/
/*
.accordion > input[name="collapse"] {
        display: none;
      }
      
      .accordion label,
      .accordion .content{
        max-width: 620px;
        margin: 0 auto;
       }
      
      
      .accordion .content {
        background: #fff;
        overflow: hidden;
        height: 0;
        transition: 0.5s;
        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
      }
      
      .accordion > input[name="collapse"]:checked ~ .content {
        transition: height 0.5s;
      }
      
      .accordion label {
        display: block;  
      }
      
      @media only screen and (min-width: 620px){
      
      .accordion > input[name="collapse"]:checked ~ .content {
        height: auto;  
      }
      
      }
      
      .accordion {
        margin-bottom: 1em;
      }
      
      .accordion > input[name="collapse"]:checked ~ .content {
        border-top: 0;
        transition: 0.3s;
      }
      
      .accordion .handle {
        margin: 0;
        font-size: 16px;
        
      }
      
      .accordion label {
        color: #fff;
        cursor: pointer;
        font-weight: bold;
        font-size: 20px;
        padding: 20px;
        background: black; 
        user-select: none;
      }
      
      .accordion label:hover,
      .accordion label:focus {
        background: #252525;
      }
      
      .accordion .handle label:before {
        font-family: FontAwesome;
        content: ">";   
        display: inline-block; 
        margin-right: 10px;
        font-size: 1em;
        line-height: 1.556em;
        vertical-align: middle;
        transition: 0.4s;

      }
      
      .accordion > input[name="collapse"]:checked ~ .handle label:before {
          transform: rotate(90deg);
          transform-origin: center;
          transition: 0.4s;
      }
      */


      .accordion {
        margin: 2em 0;
      }
      .accordion__summary {
        display: block;
        background: #000080; /* 見出しの背景色 */
        color:white;
        font-size: 30px;
        font-weight: bold;
        position: relative;
        list-style: none; /* 矢印を消す */
        cursor: pointer;
        padding: 15px 38px 15px 15px;
      }

      /* ホバー時のスタイル */
      .accordion__summary:hover {
        cursor: pointer; /* カーソルを指マークに */
        background-color: lightblue;
        color:#000080;
      }
      .accordion__summary::-webkit-details-marker {
        display: none;
      }
      .accordion__summary::after {
        content: "+";
        font-size: 1.4em; /* 記号のサイズ */
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
      .accordion[open] .accordion__summary::after {
        content: "−";
      }
      .accordion__detail {
        padding: 4px 10px;
        margin: 10px 0;
        background-color: whitesmoke;
        transition: 0.3s;
      }
      .accordion__text {
        margin: 0;
      }


/* ========TEMPLAE FRAMEWORK======== */

div#wrapper  {
              width:900px;
              text-align:left;
              padding:10px;
              /*border-left:1px solid #333;
              border-right:1px solid #333;*/
              }

div#header   {text-align:left;}
/*div#contents  {clear:both;
	          text-align:left;
	          padding-top:12px;}
#footr   {width:700px;height:30px;}

/* ========HEADER CUSTOMIZE======== */
div#header h1 {
               border:black;
               margin-left:50px;
               text-align:left;
               font-size:250%;
               line-height:250%;
    /*background-color:#7CFC00;*/
    padding:0em;
}

/* ========MENU CUSTOMIZE======== */

 
#navigation { float:left;
              margin-left: 0;
              width:150px;
}

#navigation ul { 
        margin: 0; 
        padding :0; 
        list-style-type : none; 
}
#navigation li { 
        display : inline; 
        padding :0; margin:0; 
}
#navigation a {
        display:block; 
        border:2px dotted #aac;
        font-size:14pt;
        font-weight:bold;
        padding:0.1em 0 0.1em 0.5em;
        text-decoration:none;
        color:#557;width:8em; 
        margin:4px
        0px;height:1.5em;
}
#navigation a:hover {
        display:block; 
        border:2px dotted #aca;
        font-size:14pt;
        font-weight:bold;
        padding:0.1em 0 0.1em 0.5em;
        text-decoration:none;
        color:#FFFFFF;
/*        background-color:#7CFC00; */
        background-color:#000080; 
        width:8em;
        margin:4px
        0px;height:1.5em;
}




#contents {margin-left: 180px;
          }
             

/* ========CONTENTS CUSTOMIZE======== */
div#contents h2 {font-size: 30px;
                 text-align:left;
                 line-height:50px;
                 color:#FFFFFF;
                 background-color:#000080;
                 padding-left:15px;
                 }
                 
div#contents h3 {text-align:left;
                 font-size:20px;
                 margin:10;
                 text-decoration: underline;
                 }
                 
div#contents p  {text-align:left;margin: 5px 0 20px 10px;}


div#contents dl {margin:5px 0 20px 10px;}
div#contents dt {font-weight:bold;}
div#contents dd {margin:5px 0 12px 10px;}

div#contents a  {color:#FF0000;
		    text-decoration:none;}

div#contents th {color:#FF0000; font-weight:bold; text-align:left;}/*{border: 2px #808080 solid;}}*/


div#contents ul{
	/* liを横並び＆ブレットを*/
	list-style-type: disc;
	text-align: left;
	margin-left:30px;
	margin-top: 15px;
}
div#contents ul li {
	/* liを横並び＆ブレットを*/
	list-style-type: disc;
	text-align: left;
	margin-bottom: 10px;
}



div#contents ol{
	/* liを横並び＆ブレットを*/
	list-style-type: decimal;
	text-align: left;
	margin-left:30px;
	margin-top: 15px;
}
div#contents ol li {
	/* liを横並び＆ブレットを*/
	list-style-type: decimal;
	text-align: left;
	margin-bottom: 10px;
}



#contents_study {margin-left: 180px;
          }
             

/* ========CONTENTS CUSTOMIZE======== */
div#contents_study h2 {font-size: 30px;
                 text-align:left;
                 line-height:40px;
                 background-color:#7CFC00;
                 padding-left:5px;
                 }

div#contents_study h3 {font-size: 15px;
                 text-align:left;
                 line-height:40px;
                 padding-left:5px;
                 }

div#contents_study ul{
	/* liを横並び＆ブレットを*/
      font-size:200%;
/*	list-style-type: disc;*/
/*	text-align: left;*/
	margin-left:30px;
	margin-top: 15px;
}

div#contents_study ul li {
	/* liを横並び＆ブレットを*/
      font-size:30px;
/*	list-style-type: disc;*/
/*	text-align: left;*/
/*	margin-bottom: 10px;*/
}



div#contents_study ol{
	/* liを横並び＆ブレットを*/
	list-style-type: decimal;
	text-align: left;
	margin-left:30px;
	margin-top: 15px;
}
div#contents_study ol li {
	/* liを横並び＆ブレットを*/
	list-style-type: decimal;
	text-align: left;
	margin-bottom: 10px;
}

.inline-block{
      display: inline-block;      /* インラインブロック要素にする */
      background-color:  #ccc;    /* 背景色指定 */
      padding:  20px;             /* 余白指定 */
      height: 100px;              /* 高さ指定 */
}

.social-icon-menu li {
  display: inline-block;
}





ul.over{
  list-style:none;   
  display:flex;
  justify-content:space-around;
  margin: 0;
  padding: 0;
}
.over li{
  list-style:none; 
  background: #FFF;
}
.over img{
  width: 80%;
  height: auto;
  display: block;
  opacity: 1;
  transition: .3s;
}
.over li:hover img{
  list-style: none;   
  opacity: 0.5;
}