@charset "utf-8";

p.oedo {
  color: #2f4c7c;
}

strong.oedo {
  background:linear-gradient(transparent 60%, #fbd44b 60%);
}

.btn_oedo {
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 0 0.5em;
	padding: 0.5rem 1rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	transition: 0.5s;
}
.btn_oedo:hover {
	color: #fff;
	background: #27acd9;
}
.btn_oedo:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor:not-allowed;
}

ol.testwrap {
padding: 0 1em;
}

ol.testwrap li{
line-height: 1.8em;
letter-spacing: 0.05em;
}

.is-hidden {
  display: none;
}

a.mondai-btn {
  display: block;
  background: #fbd44b;
  color: #2f4c7c;
  text-align: center;
  min-width: 250px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 20px auto;
  padding: 1rem 2rem;
  border-radius: 10px;
  border: 3px solid #2f4c7c;
  box-shadow: 5px 5px #2f4c7c;
  transition: 0.3s ease-in-out;
}

a.mondai-btn:hover {
  box-shadow: none;
  transform: translate(5px, 5px);
}


/*========= ローディング画面のためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
  top:0;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:#999;
    /*動き*/
  transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center; 
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
#openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 50px;
    height:50px;
}
  
/*×に変化*/  
#openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

#openbtn1 span:nth-of-type(1) {
  top:15px; 
}

#openbtn1 span:nth-of-type(2) {
  top:23px;
}

#openbtn1 span:nth-of-type(3) {
  top:31px;
}

#openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

#openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

#openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}