@charset "utf-8";

/* WEBフォントの設定 */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/*
@font-face {
  font-family: 'MyWebFont';
  src: url('font/PixelMplus12-Regular.woff') format('woff'),
       url('font/PixelMplus12-Regular.ttf') format('truetype');
}
*/

button, input, select, textarea {
  font-family : inherit;
  font-size : 80%;
  box-sizing:border-box;border:none;
}

/*
.Text {
  font-family:'MyWebFont';
  font-size:  20px;
}
*/
.Text {
  font-family: 'DotGothic16', sans-serif;
  font-size : 100%;
}

/* ラジオボタン[▷]の設定 */
input[type=radio] {
  display: none; /* 標準スタイル */
}
.label {
  position: relative; /* ボックスの位置を指定する */
  padding: 0 0 0 42px; /* ボックス内側の余白を指定する */
  font-size : 120%;
}
.label:after, .label:before {
  position: absolute; /* ボックスの位置を指定する */
  display: block; /* ブロックレベル要素化する */
  top: 50%; /* 上部から配置の基準位置を決める */
}
.label:after {
  margin-top: -20px; /* チェック枠の位置 */
  width: 16px; /* ボックスの横幅を指定する */
  height: 16px; /* ボックスの高さを指定する */
}
.label:before {
  margin-top: -15px; /* チェックマークの位置 */
  margin-left: 10px; /* チェックマークの位置 */
  width: 16px; /* ボックスの横幅を指定する */
  height: 16px; /* ボックスの高さを指定する */
  opacity: 0; /* 要素を透過指定する */
  content: '\025b7';
  animation: blink 1.4s infinite;
}
input[type=radio]:checked + .label:before {
  opacity: 1; /* 要素を表示する */
  font-size : 100%;
}


/* 黒板 */
.blackboard {
  position: relative;
  margin: 0 auto 1.5rem;
  padding: 0.6rem 1rem;
  font-size : 100%;
  /* font-size:  20px; */
  color: #fff;
  border: 2px solid #000;
  border-radius: 5px;
  box-shadow: 0 0 0 4px #fff inset;
  background-color: #000000;
  display: inline-block;
  text-align:left;
}
.blackboard.answer p {
  margin-left: 1.7rem;
}

.blackboard .blink-before {
  font-size : 100%;
}
.blackboard a {
  text-decoration: none;
  color: #fff;
}
.blackboard .blink-before::before {
  content: '\025b7';
  position: absolute;
  left: 1rem;
  animation: blink 1.4s infinite;
}
.blackboard p:last-of-type {
  margin-bottom: 0;
}
/* 回り込み */
.float-n {
  float: none;
}
/* 回り込み解除 */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  clear: both;
  content: "";
  display: block;
}

body {
  background-color: #000000;
  font-family: 'DotGothic16', sans-serif;
  text-align: center;
}

header {
  background: #ffffff;
}

/* 共通 */
.other-text {
  font-weight: bold;
}
.other {
  font-weight: bold;
  font-size : 100%;
  color: #fff;
}
.heads-up {
  font-weight: normal;
  font-size : 80%;
  color: #fff;
}

dl {
  padding: 20 20px;
  display: block;
}

dt {
  display: inline-block;
  width: 60%;
  margin-top: 30px;
  font-weight: bold;
  border-bottom: solid 3px #3aab6d;
}

dd {
  margin-top: 10px;
  font-size : 100%;
  margin-inline-start: 0px;
}

a {
  color: #fff;
  text-decoration: none;
}

input[type="button"] {
  position: relative;
  margin: 0 auto 1.5rem;
  padding: 0.6rem 1rem;
  font-size : 100%;
  color: #fff;
  border: 2px solid #000;
  border-radius: 5px;
  box-shadow: 0 0 0 4px #fff inset;
  background-color: #000000;
  display: inline-block;
}

input[type="button"]:hover {
  background: #d6d6d6;
  cursor: pointer;
}

input[type="submit"] {
  font-family:'MyWebFont';
  position: relative;
  margin: 0 auto 1.5rem;
  padding: 0.6rem 1rem;
  font-size : 100%;
  color: #fff;
  border: 2px solid #000;
  border-radius: 5px;
  box-shadow: 0 0 0 4px #fff inset;
  background-color: #000000;
  display: inline-block;
}

input[type="submit"]:hover {
  font-family:'MyWebFont';
  background: #d6d6d6;
  cursor: pointer;
}

.footer {
  max-width: 500px;
  text-align: center;
  margin: 0 auto;
  padding: 10px 30px;
}

.footer p {
  display: inline-block;
  text-align: left;
}

.form-item{
  width: 0px;
  position: relative;
  margin: 0 auto;
  text-align: left;
  line-height: 2ex;
/*↓不要 
  border: solid 1px #ccc;
  width: 330px;
  left: 100px;
*/
}

.input-container{
  display: inline-block;
  position: relative;
  width: 200px;
  left: -80px;
  /* margin: -10px; */
}

.input-container.left{
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-10%);
  width: 50px;
}

.input-container.center{
  position: absolute;
  left: 0px;
  /* width: 130px; */
  top: 100%;
  transform: translateY(-10%);
}

.input-container.TOPleft{
  position: absolute;
  width: 130px;
  left: 20px;
  top: 50%;
  /* transform: translateY(-10%); */
}

.input-container.TOPright{
  position: absolute;
  width: 130px;
  left: 170px;
  top: 50%;
  /* transform: translateY(-10%); */
}




/*************************
  以下、スライダー用の記述
**************************/

/*GLOBALS*/
*{margin:0; padding:0; list-style:none;}
a{text-decoration:none; color:#666;}
a:hover{color:#1bc1a3;}
/* body, hmtl{background: #ecf0f1; font-family: 'Anton', sans-serif;} */

#wrapper{
  width:620px;
  margin:50px auto;
  height:300px;
  position:relative;
  color:#fff;
  text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;  
}

#slider-wrap{
  width:620px;
  height:300px;
  position:relative;
  overflow:hidden;
}

#slider img{
  width: 620px;
  height: 300px;
}

@media screen and (max-width: 768px){
 #wrapper{
  width:320px;
  height: 180px;
 }
 #slider-wrap{
  width:320px;
 }
 #slider img{
  width: 320px;
  height: 180px;
}

}
@media screen and (max-width: 320px){
  #wrapper{
    height:150px;
   }
  #slider-wrap{
    width: 280px;
    margin-left: 20px;
  }
  #slider img{
    width: 280px;
    height: 150px;
  }
}



#slider-wrap ul#slider{
  width:100%;
  height:100%;
  
  position:absolute;
  top:0;
  left:0;   
}

#slider-wrap ul#slider li{
  float:left;
  position:relative;
  width:620px;
  height:200px; 
}

@media screen and (max-width: 768px){
  #slider-wrap ul#slider li{
    width:320px;
    height: 180px;
  }
}

@media screen and (max-width: 320px){
  #slider-wrap ul#slider li{
    width:280px;
    height:150px; 
  }
}

#slider-wrap ul#slider li > div{
  position:absolute;
  top:20px;
  left:35px;  
}

#slider-wrap ul#slider li > div h3{
  font-size:36px;
  text-transform:uppercase; 
}

#slider-wrap ul#slider li > div span{
  font-family: Neucha, Arial, sans serif;
  font-size:21px;
}

#slider-wrap ul#slider li i{
  text-align:center;
  line-height:400px;
  display:block;
  width:100%;
  font-size:90px; 
}

/*btns*/
.btns{
  position:absolute;
  width:50px;
  height:60px;
  top:50%;
  margin-top:-25px;
  line-height:57px;
  text-align:center;
  cursor:pointer; 
  background:rgba(0,0,0,0.1);
  z-index:100;

  -webkit-user-select: none;  
  -moz-user-select: none; 
  -khtml-user-select: none; 
  -ms-user-select: none;
  
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.btns:hover{
  background:rgba(0,0,0,0.3); 
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
  top: 30px; 
  right:35px; 
  width:auto;
  position:absolute;
  display: none;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}

/*bar*/
#pagination-wrap{
  min-width:20px;
  margin-top:350px;
  margin-left: auto; 
  margin-right: auto;
  height:15px;
  position:relative;
  text-align:center;
}

#pagination-wrap ul {
  width:100%;
}

#pagination-wrap ul li{
  margin: 0 4px;
  display: inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  opacity:0.5;
  position:relative;
  top:0;
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
  opacity:1;
  box-shadow:rgba(0,0,0,0.1) 1px 1px 0px; 
}

/*Header*/
/* h1, h2{text-shadow:none; text-align:center;}
h1{ color: #666; text-transform:uppercase;  font-size:36px;}
h2{ color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px;}  */

/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
  -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  -o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  transition: all 0.3s cubic-bezier(1,.01,.32,1); 
}