@charset "utf-8";
html{
  overflow-x: hidden;
}
.prev{
  width: 9%;
}
h2{
  margin-top: 0;
  padding-top: 15px;
}
.step{
  color: white;
  text-align: center;
  font-weight: bold;
  background-color: #db002b;
  border-radius: 50%;
  width: 60px; height:60px;
  line-height: 60px;
  position: relative;
  top: 0px; left: 8%;
  margin: 0.8em 0;
  font-size: 2em;
  display: inline-block;
}
/*IEだけ微調整*/
@media all and (-ms-high-contrast: none) {
  .step{
    width: 60px; height:55px;
    padding-top: 0.2em;
  }
}
.interview_name{
  display:inline-block;
  vertical-align:1em;
}
.step5_interview{
  left: 0!important;
  width:95%!important;
  padding: 0.2em 0;
  margin-bottom: 0.5em!important;
}
.interview{
  margin-top: 2%!important;
}
.title{
  font-size: 2em;
  font-weight: bold;
  display: inline-block;
  position: relative;
  left: 10%;
}

.comment{
  width: 30%;
  height: auto;
  border: solid 3px #4f221c;
  box-shadow: 2px 2px 4px #828077;
  background: white;
  padding: 0.7em;
  padding-left: 1.5em;
  font-weight: bold;
  font-size: 1.1rem;
  position: relative;
  margin: 0.5em 0;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  margin-left: 10%;
}
.icon{
  width: 14%;
  position: relative;
  right: 3%;
}

/*内容*/
.honbun{
  margin-left: 8%;
  margin-right: 8%;
  font-size: 1.1em;
}
/*--------------------
 主人公の吹き出し（仮）
--------------------*/
.balloon {
  margin-bottom: 2em;
  position: relative;
  }
.balloon:before,.balloon:after {
  clear: both;
  content: "";
  display: block;
  }
.balloon figure {
  width: 100px;
  height: 100px;
  }
.balloon-image-left {
  float: left;
  margin-right: 20px;
  }
.balloon-image-right {
  float: right;
  margin-left: 20px;
  }
.balloon figure img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: solid 3px #8ede9b;
  border-radius: 50%;
  }
.balloon-image-description {
  padding: 5px 0 0;
  font-size: 13px;
  text-align: center;
  }
.balloon-text-right,.balloon-text-left{
  top: 50px;
  position: relative;
  color: white;
  padding: 10px;
  border: 1px solid;
  border-radius: 10px;
  max-width: -webkit-calc(100% - 120px);
  max-width: calc(100% - 120px);
  display: inline-block;
  background: #8ede9b ;
  }
.balloon-text-right {
  border-color: #f2efde ;
  }
.balloon-text-left {
  border-color: #f2efde ;
  }
.balloon-text-right {
  float: left;
  }
.balloon-text-left {
  float: right;
  }
.balloon p {
  margin: 0 0 20px;
  }
.balloon p:last-child {
  margin-bottom: 0;
  }
.balloon-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #f2efde;
  top: 15px;
  left: -20px;
  }
.balloon-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #8ede9b;
  top: 15px;
  left: -19px;
  }
.balloon-text-left:before{
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #f2efde;
top: 15px;
right: -20px;
}
.balloon-text-left:after{
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #8ede9b;
  top: 15px;
  right: -19px;
  }


/*--------------------
 吹き出しを作る
--------------------*/
.balloon1,
.balloon2,
.balloon3,
.balloon4,
.balloon5{
  margin-bottom: 2em;
  position: relative;
  }

  .balloon1:before,.balloon1:after,
  .balloon2:before,.balloon2:after,
  .balloon3:before,.balloon3:after,
  .balloon4:before,.balloon4:after,
  .balloon5:before,.balloon5:after {
  clear: both;
  content: "";
  display: block;
  }

  .balloon1 figure,
  .balloon2 figure,
  .balloon3 figure,
  .balloon4 figure,
  .balloon5 figure {
  width: 100px;
  height: 100px;
  }

  .balloon1-image-left,
  .balloon2-image-left,
  .balloon3-image-left,
  .balloon4-image-left,
  .balloon5-image-left {
  float: left;
  margin-right: 20px;
  }

  .balloon1-image-right,
  .balloon2-image-right,
  .balloon3-image-right,
  .balloon4-image-right,
  .balloon5-image-right{
  float: right;
  margin-left: 20px;
  }

  .balloon1 figure img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: solid 3px #ffdbff;
  border-radius: 50%;
  }

  .balloon2 figure img {
    width: 100%;
    height: 100%;
    margin: 0;
    border: solid 3px #d6ffd6;
    border-radius: 50%;
    }

    .balloon3 figure img {
      width: 100%;
      height: 100%;
      margin: 0;
      border: solid 3px #d6ffff;
      border-radius: 50%;
      }

      .balloon4 figure img {
        width: 100%;
        height: 100%;
        margin: 0;
        border: solid 3px #ffffd6;
        border-radius: 50%;
        }

        .balloon5 figure img {
          width: 100%;
          height: 100%;
          margin: 0;
          border: solid 3px #ffeddb;
          border-radius: 50%;
          }

  .balloon1-image-description,
  .balloon2-image-description,
  .balloon3-image-description,
  .balloon4-image-description,
  .balloon5-image-description {
  padding: 5px 0 0;
  font-size: 13px;
  text-align: center;
  }

  .balloon1-text-right,.balloon1-text-left {
   top: 50px;/*後から付け加えた。画像と位置をそろえるため。*/
   position: relative;
   padding: 10px;
   border: 1px solid;
   border-radius: 10px;
   max-width: -webkit-calc(100% - 120px);
   max-width: calc(100% - 120px);
   display: inline-block;
   background: #ffdbff ;
   }

  .balloon2-text-right,.balloon2-text-left{
    top: 50px;
    position: relative;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
    max-width: -webkit-calc(100% - 120px);
    max-width: calc(100% - 120px);
    display: inline-block;
    background: #d6ffd6 ;
    }

  .balloon3-text-right,.balloon3-text-left {
   top: 50px;
   position: relative;
   padding: 10px;
   border: 1px solid;
   border-radius: 10px;
   max-width: -webkit-calc(100% - 120px);
   max-width: calc(100% - 120px);
   display: inline-block;
   background: #d6ffff ;
   }

  .balloon4-text-right,.balloon4-text-left {
    top: 50px;
    position: relative;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
    max-width: -webkit-calc(100% - 120px);
    max-width: calc(100% - 120px);
    display: inline-block;
    background: #ffffd6  ;
    }

    .balloon5-text-right,.balloon5-text-left {
      top: 50px;
      position: relative;
      padding: 10px;
      border: 1px solid;
      border-radius: 10px;
      max-width: -webkit-calc(100% - 120px);
      max-width: calc(100% - 120px);
      display: inline-block;
      background: #ffeddb ;
      }

    .balloon1-text-right,
    .balloon2-text-right,
    .balloon3-text-right,
    .balloon4-text-right,
    .balloon5-text-right {
    border-color: #ffffff ;
    }
    .balloon1-text-left,
    .balloon2-text-left,
    .balloon3-text-left,
    .balloon4-text-left,
    .balloon5-text-left {
    border-color: #ffffff ;
    }

  .balloon1-text-right,
  .balloon2-text-right,
  .balloon3-text-right,
  .balloon4-text-right,
  .balloon5-text-right{
  float: left;
  }
  .balloon1-text-left,
  .balloon2-text-left,
  .balloon3-text-left,
  .balloon4-text-left,
  .balloon5-text-left {
  float: right;
  }
  .balloon1 p,
  .balloon2 p,
  .balloon3 p,
  .balloon4 p,
  .balloon5 p {
  margin: 0 0 20px;
  }

  .balloon1 p:last-child,
  .balloon2 p:last-child,
  .balloon3 p:last-child,
  .balloon4 p:last-child,
  .balloon5 p:last-child {
  margin-bottom: 0;
  }

  /* 三角部分 */
  .balloon1-text-right:before,
  .balloon2-text-right:before,
  .balloon3-text-right:before,
  .balloon4-text-right:before,
  .balloon5-text-right:before{
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #ffffff;
  top: 15px;
  left: -20px;
  }

  .balloon1-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #ffdbff;
  top: 15px;
  left: -19px;
  }

  .balloon2-text-right:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #d6ffd6;
    top: 15px;
    left: -19px;
    }

   .balloon3-text-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #d6ffff;
      top: 15px;
      left: -19px;
   }

   .balloon4-text-right:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #ffffd6;
    top: 15px;
    left: -19px;
    }

    .balloon5-text-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #ffeddb;
      top: 15px;
      left: -19px;
   }


  .balloon1-text-left:before,
  .balloon2-text-left:before,
  .balloon3-text-left:before,
  .balloon4-text-left:before,
  .balloon5-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #ffffff;
  top: 15px;
  right: -20px;
  }


  .balloon1-text-left:after{
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #ffdbff;
  top: 15px;
  right: -19px;
  }

  .balloon2-text-left:after{
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #d6ffd6;
    top: 15px;
    right: -19px;
    }

  .balloon3-text-left:after{
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #d6ffff;
    top: 15px;
    right: -19px;
    }

  .balloon4-text-left:after{
    position: absolute;
    content: '';
    border: 10px sold transparent;
    border-left: 10px solid #ffffd6;
    top: 15px;
    right: -19px;
    }

    .balloon5-text-left:after{
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid #ffeddb;
      top: 15px;
      right: -19px;
      }


/*--------------------
 吹き出し
--------------------*/

.hukidashi {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 150px;
  max-width: 50%; /*--100%→50％へ--*/
  color: #555;
  font-size: 16px;
  text-align: center;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 10px; /*--丸みをつけるため--*/
}

.hukidashi2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 150px;
  max-width: 50%; /*--100%→50％へ--*/
  color: #555;
  font-size: 16px;
  text-align: center;
  background: #ff7f7f;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 10px; /*--丸みをつけるため--*/
}

.hukidashi:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 13px solid #FFF;
  z-index: 2;
}

.hukidashi2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 13px solid #ff7f7f;
  z-index: 2;
}

.hukidashi:after,.hukidashi2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

.hukidashi p,.hukidashi2 p {
  margin: 0;
  padding: 0;
}


/*--------------------
 ボックス
--------------------*/
.box p,.box2 p{
  margin: 0;
  padding: 0;
}

.box {
  position: relative;
  top: -30px;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 150px;
  max-width: 50%; /*--100%→50％へ--*/
  color: #555;
  font-size: 16px;
  text-align: center;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 10px; /*--丸みをつけるため--*/
  margin-bottom: -1.1em;
}

.box2 {
  position: relative;
  top: -30px;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 150px;
  max-width: 50%; /*--100%→50％へ--*/
  color: #555;
  font-size: 16px;
  text-align: center;
  background: #ff7f7f;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 10px; /*--丸みをつけるため--*/
  margin-bottom: -1.1em;
}


.arrow_box{
  position:relative;
  text-align:center;
  color:#FFFFFF;
  margin: 2%;
  font-weight: normal;
}

.arrow_box:after{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  margin-left: -15px;
  top:100%;
  border-color: rgba(250, 98, 157, 0);
}

.n1::after{
  border-top-width:15px;
  border-bottom-width:15px;
  border-left-width:8px;
  border-right-width:8px;
  border-top-color:#feb25e;
  left:75%;
}
.n2::after{
  border-top-width:23px;
  border-bottom-width:23px;
  border-left-width:11px;
  border-right-width:11px;
  border-top-color: #fa629d;
  left:18%;
}
.n3::after{
  border-top-width:15px;
  border-bottom-width:15px;
  border-left-width:8px;
  border-right-width:8px;
  border-top-color:#c38ede;
  left:80%;
}
.n4::after{
  border-top-width:23px;
  border-bottom-width:23px;
  border-left-width:11px;
  border-right-width:11px;
  border-top-color: #8ede9b;
  left:64%;
}
.n5::after{
  border-top-width:23px;
  border-bottom-width:23px;
  border-left-width:11px;
  border-right-width:11px;
  border-top-color: #8ed2df;
  left:23%;
}
.n6::after{
  border-top-width:23px;
  border-bottom-width:23px;
  border-left-width:11px;
  border-right-width:11px;
  border-top-color: #fed154;
  left:34%;
}
.n1{
  background:#feb25e;
  width:20%;
  height:80px;
  line-height: 80px;
  font-size: 1.1em;
  left: 8%;
  top: 40px;
}
.n2{
  background-color: #fa629d;
  width: 20%;
  height: 90px;
  line-height: 90px;
  font-size: 1.1em;
  left: 32%;
  top: -100px;
  z-index: 2;
}
.n3{
  background-color: #c38ede;
  width:25%;
  height: 80px;
  line-height: 80px;
  font-size: 1.1em;
  left: 57%;
  top: -200px;
}
/*.n4{
  background-color: #8ede9b;
  width: 20%;
  height: 80px;
  line-height: 80px;
  font-size: 1.1em;
  left: 38%;
  top: -190px;
}*/
.n5{
  background-color: #8ed2df;
  width: 25%;
  height: 80px;
  line-height: 80px;
  font-size: 1.1em;
  left: 18%;
  top: -160px;
  z-index: 2;
  margin-bottom: -17em; /*--次の題名との距離を縮めるため--*/
}
.n6{
  background-color: #fed154;
  width: 25%;
  height: 90px;
  line-height: 90px;
  font-size: 1.1em;
  left: 50%;
  top: 0px;
  z-index: 2;
}

.point {
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
font-weight: bold;
position: relative;
left: 7%;
font-size: 1.3em;
width: 82%;
}

.point .pointlist {
line-height: 180%;
padding: 0.5em 0.2em;
list-style-type: none!important;/*ポチ消す*/
}

.point .pointlist:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #db002b; /*アイコン色*/
}

.balloon5 {
  width: 90%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #76d9cb;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #76d9cb;
  color: white;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #76d9cb;
}

.says p {
  margin: 0;
  padding: 0;
}
.sample{
  font-size: 1.5em;
}

.picture{
  width: 88%;
}
.image{
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  display: inline-block;
  vertical-align: top;
  width: 40%;
}
.special{
  margin-left: 7%;
}
.bold{
  position: relative;
  left: 9%;
  font-weight: bold;
  width: 80%;
}
.explanation{
  width: 100%;
  max-width: 100%;
  height: auto;
}


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

}
/*スマホ対応（画面サイズが559px以下の場合ここの記述が適用される）*/
@media screen and (max-width:559px) {
  .step{
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    vertical-align: top;
    margin: 0;
  }
  .title{
    font-size: 22px;
    width: 65%;
  }
  .comment{
    margin: 30px 0 0 0 ;
    width: auto;
  }
  .comment p{
    font-size: 13px;
  }
  .step5_responsive{
    padding: 0px 30px;
  }
  .point{
    font-size: 14px;
    width: 72%;
  }
  .pointlist{
    margin: 10px 0;
  }
  .breadcrumb {
    margin-bottom: 20px!important;
  }
  .mini_responsive{
    font-size: 10px;
  }
  .balloon5{
    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;
  }
  .faceicon{
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    width: 35px!important;
  }
  .chatting{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
  }
  .says{
    margin: 0;
  }
  .sample{
    font-size: 20px;
  }
  .honbun{
    font-size: 13px;
    line-height: 200%;
  }
  .jupiter{
    width: 40px!important;
    margin-right: 10px!important;
  }
  .leo{
    width: 69%!important;
    font-size: 20px!important;
  }
  .subaru{
    padding: 17px!important;
  }
  .gemini{
    font-size: 13px!important;
    padding-top: 10px;
  }
  .image{
    display: block;
    width: 80%;
  }
  .page11_special{
    margin:9%;
  }
  .responsive_title{
    font-size: 14px;
  }
  .page12_tatoeba{
    width: 30%!important;
    margin: 15px 0!important;
  }
  .bold{
    width: 85%;
    margin: 40px 0;
    font-size: 13px;
  }
  .explanation{
    width: 95%;
    max-width: 95%;
    height: auto;
  }
  .lightbox {
    margin-top: 150px;
  }
  .look {
    line-height: 35px;
    height: 35px;
    font-size: 16px;
  }
}