@charset "UTF-8";
.titlebox{
  width: 12%;
}
.info{
  font-size: 0.45em;
  display: inline-block;
  width: 43%;
}
.mark{
  width: 8%;
  vertical-align: middle;
  margin-right: 0.4em;
}
.smaller{
  margin-right: 0.6em;
  margin-bottom: 0.6em;
}
.question{
  background: #8ed2df;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  width: 3.7%; height: 2.5%;
  margin: 3%;
  margin-left: 8%;
  display: inline-block;
}
.pink{
  background: #ff8595;
  margin-top: 0;
  vertical-align: top;
}
.option{
  font-size: 1.4em;
  display: inline-block;
  width: 70%;
}
.activity{
  padding-inline-start: 0px;
}
.active {
  list-style-type: none;
  counter-increment: number;
  font-weight: bold;
  font-size: 1.1em;
}

.active::before{
  content: counter(number) ".";
  margin-right: 0.6em;
  color: #db002b;
  font-weight: bold;
}
.list{
  width: 80%;
}

.gray{
  background: #deddd4;
  display: inline-block;
  vertical-align: top;
  width: 28%;
  height: auto;
  padding: 2%;
  margin: 0.3em 0;
}
.place{
  width: 20%;
}

.where{
  width: 13%;
  margin-right: 0.2em;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0.5em;
}
.ka{
  width: 20%;
}
.spot{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
}

.yellow{
  border: solid 2px #393939;
  background: #fed154;
  border-radius: 50%;
  color: #393939;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  width: 30%;
  padding: 5% 0;
  display: inline-block;
}
.kira{
  width: 31%;
}
.nihongo{
  width: 23%;
  padding: 2.8% 0%;
}
.japan{
  display: inline-block;
  vertical-align: text-bottom;
  font-size: 1.2em;
}
.sheep{
  display: inline-block;
  font-size: 1.5em;
  margin: 0 0.8em;
}
.fff{
  margin-left: 0.2em;
}
.ja{
  font-size: 0.4em;
}
.p{
  margin-top: 0.3em;
  margin-left: 0.6em;
  font-weight: bold;
}
.hutoji{
  margin-left: 0.8em;
}
.komoji{
  font-size: 0.6em;
}
.kuroi{
  font-size: 0.75em;
}
.bar{
  width: 50%;
  display: inline-block;
}
.shadow{
  background: white;
  box-shadow: 10px 10px #76d9cb;
  padding: 0.8em 1em;
  font-size: 0.8em;
  display: inline-block;
  vertical-align: top;
  width: 43%;
  margin-top: 4%;
}
.instance{
  background: #fed154;
  color: white;
  font-weight: bold;
  text-align: center;
  width: 13%;
  padding: 0.5% 0;
  margin-top: 2%;
  display: inline-block;
  margin-right: 0.5em;
}
.extitle{
  font-weight: bold;
  display: inline-block;
  font-size: 1.0em;
  text-align: right;
}
.consult{
  margin-bottom: 1%;
  border: solid 3px #fed154;
  padding: 2% 3%;
  width: 98%;
  list-style-position:inside;
}
.naiyou{
  list-style-type: disc;
}
.ipal{
  width: 43%;
}
.ititle{
  margin-left: 0.8em;
}
.kyousitu{
  font-size: 1.2em;
  font-weight:bold;
}

.nigyou{
  vertical-align: middle;
}
.cstitle{
  font-weight: bold;
  margin-bottom: 0.2em;
}
.casep{
  font-size: 0.7em;
}
.csoneimg{
  width: 25%;
  display: inline-block;
}
.case{
  width: 55%;
  display: inline-block;
  margin-left: 3%;
  vertical-align: bottom;
}
.large{
  font-size: 1.5em;
  margin: 0.1em;
}
.caramu{
  width: 100%;
}
.over{
  width: 60%;
}
.image20{
  width: 3%;
  position: relative;
  left: 42%;
}
.subaru{
  font-size: 0.75em;
  left: 0;
  width: 95%;
}
.leo{
  font-size: 1.4em;
}
/*iphone5だけ*/
@media screen and (max-width:320px) {
  .option{
    width: 230px;
  }
}

/*タブレット対応（画面サイズが959px以下の場合ここの記述が適用される）*/
@media screen and (max-width:959px) {

.titlebox {
  width: 20%;
}
.question{
  width: 6.5%;
}
}
/*スマホ対応（画面サイズが559px以下の場合ここの記述が適用される）*/
@media screen and (max-width:559px) {
  .eyecatch{
    margin-bottom: 20px;
  }
  .titlebox{
    width: 35%;
    padding: 5px;
  }
  .info{
    display: block;
    width: 80%;
    margin: 20px 0;
  }
  .option{
    font-size: 13px;
    line-height: 180%;
    margin-top: 20px;
  }
  .question{
    font-size: 15px;
    vertical-align: top;
    padding: 5px 7px;
    margin-top: 20px;
    width: 3.5%
  }
  .gray{
    display: block;
    width: 70%;
    margin: 20px 0;
    padding: 20px;
  }
  .yellow, .fa-angle-right:before {
    display: none;
  }
  .ka{
    width: 18px;
    margin:0.4em 0 0.7em 0;
  }
  .spot{
    margin: 4px;
  }
  .page18_minusmargin{
    padding-top:0;
  }
  .p{
    margin-left: 0;
  }
  .bar{
    width: 90%;
  }
  .shadow{
    width: 70%;
    padding: 20px;
    margin-bottom: 30px;
  }
  .zuru{
    width: 83%;
    margin: 20px 0 30px 0;
  }
  .csoneimg {
    display: block;
    width: 80%;
    margin: 20px 0 70px 0;
  }
  .case{
    width: 76%;
  }
  .page18_flex{
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .order_two{
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order:0;
  }
  .order_one{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order:1;
  }
  .order_three{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .order_four{
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .order_six{
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .order_five{
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .active{
    margin: 20px 0;
    width: 83%;
    line-height: 180%;
  }
  ul{
    padding-inline-start: 20px;
  }
  .instance {
    width: 25%;
  }
  .consult {
    width: 90%;
  }
  .aipal{
    padding-right: 15%;
  }
}