/*========= レイアウトのためのCSS ===============*/

  body {
    font-family: 'Yu Gothic UI','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
    font-size: 120%;
    margin: 0;
    padding: 0;
  }
  
  .box{
    padding: 20px;
    margin:20px;
    background: #666;
    color: #fff;
    box-sizing:border-box;
  }




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

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

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

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
from {
  opacity: 0;
transform: translateY(100px);
}

to {
  opacity: 1;
transform: translateY(0);
}
}


  /* --------------------------------------------------
    幅1300px以上のスタイル指定 ここから
  -------------------------------------------------- */
  @media screen and (min-width: 1300px) {
  /* Loading背景画面設定　*/
  #splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#2472ab;
  text-align:center;
  color:#fff;
  }
  
  /* Loading画像中央配置　*/
  #splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  
  /* Loading アイコンの大きさ設定　*/
  #splash_logo img {
  width:900px;
  }
  
  /* fadeUpをするアイコンの動き */
  
  .fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  
  to {
    opacity: 1;
  transform: translateY(0);
  }
  }
}




/*========= レイアウトのためのCSS ===============*/

h1{
  font-size:2rem;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
}

h2 {
  font-size: 60px;
  color: #ffffed;
  text-align: center
}
@media screen and (max-width: 440px) {
   h2 {
    font-size: 40px;
    color: #ffffed;
    text-align: center
  }
}

h3 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  margin-left: 5%;
  margin-right: 5%;
  color: #494949;/*文字色*/
  background: #ffffff;/*背景色*/
  border-left: solid 7px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  text-align: left;
}

h4 {
  position: relative;
  padding-left: 4em;
}

h4 span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 2rem;
  color: #e3f5d8;
  background: #22ac38;
}

h4 span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #22ac38;
}



small{
  background:#333;
  color:#fff;
  display: block;
  text-align: center;
  padding:20px;
}


section{
  padding:5%;
}

section:nth-child(2n){
  background:#f3f3f3; 
}


* {
  margin:0; padding:0;
}



/*==========横並びのためのcss========*/
.flex{
  display: flex;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .flex {
    display: block;
    text-align: center;
  }
}


/*========= テキストの位置のためのcss ===============*/
p{margin-top:5px;
  line-height: 2.0;}

.sample{text-align: center;}

.sample-1{text-align: left;
  margin-left: 11%;
  margin-right: 8%;
  }

.sample-2{text-align: left;
  margin-left: 5%;
  margin-right: 5%;}

.sample-3{text-align:left}

.sample-4{text-align: left;
  margin-left: 15%;
  margin-right: 8%;
  }

.sample-5{text-align: left;
  margin-left: 22%;
  margin-right: 52%;
  }

.sample-6{text-align: right;
    margin-left: 0%;
    margin-right: 22%;
    }





/*==========テキスト下線のためのcss*============*/
.under {
  background: linear-gradient(transparent 70%, #fcf456 70%);
}
.under-1 {
  background: linear-gradient(transparent 70%, #8eff90 70%);
}



.main-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  background: url('../images/header.jpg') top center / cover no-repeat;
}






/*========クイズ====*/
.radio-input input {
	display: none;
  }
  
  .radio-input {
	display: flex;
	flex-direction: column;
	padding: 25px;
	background: #e4ffee;
	color: #000;
	border-radius: 10px;
	width: 50%;
	margin:0 auto;
  }
  
  .info {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
  
  .question {
	color: rgb(49, 49, 49);
	font-size: 1.3rem;
	line-height: 1.4rem;
	font-weight: 800;
	margin-bottom: 10px;
  }
  
  .radio-input  label {
	display: flex;
	background-color: #e4ffee;
	padding: 14px;
	margin: 8px 0 0 0;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	border: 1px solid rgba(187, 187, 187, 0.164);
	color: #000;
	transition: .3s ease;
  }
  
  .radio-input  label:hover {
	background-color: rgba(24, 24, 24, 0.13);
	border: 1px solid #bbb;
  }
  
  .result {
	margin-top: 10px;
	font-weight: 600;
	font-size: 12px;
	display: none;
	transition: display .4s ease;
  }
  
  .result.success {
	font-size: 15px;
	color: green;
  }
  
  .result.error {
	font-size: 15px;
	color: red;
  }
  
  .radio-input input:checked + label {
	border-color: red;
	color: red;
  }
  
  .radio-input input[value="value-2"]:checked + label {
	border-color: rgb(22, 245, 22);
	color: rgb(16, 184, 16);
  }
  
  .radio-input:has(input[value="value-2"]:checked) .result.success {
	display: flex;
  }
  
  .radio-input:has(input:not([value="value-2"]):checked ) .result.error {
	display: flex;
  }