@charset "UTF-8";

.if{
  text-align: center;
  border-bottom: none;
  font-size: 1.6em;
  padding: 0.7% 9%;
  font-weight: bold;

}
.arrow_box{
    position:relative;
    text-align:center;
    color:#FFFFFF;
    margin: 2%;
    font-weight: 600;
    padding:1.5% 2%;
}
.s2{
  position: relative;
  bottom: 6.5em;

}
.n1_e {
  width:20%;
  height:auto;
  background:#FA629D;
  /*line-height: 70px;*/
  font-size: 0.9em;
  left: 10%;
}
.n1{
  width:20%;
  height:auto;
  background:#FA629D;
  /*line-height: 70px;*/
  font-size: 0.9em;
  left: 10%;
}
.n2{
  background-color: #c38ede;
  width:14%;
  height: auto;
  /*line-height: 40px;*/
  font-size: 0.8em;
  left: 70%;
  top: -100px;
}
.n3{
  background-color: #8ea9de;
  width: 30%;
  height: auto;
  /*line-height: 100px;*/
  font-size: 1.2em;
  left: 45%;
  top: -100px;
}
.n4{
  background-color: #8ed2df;
  width: 27%;
  height: auto;
/*  line-height: 90px;*/
  font-size: 1.0em;
  left: 16%;
  top: -170px;
  z-index: 2;
}

.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_e::after{
  border-top-width:15px;
  border-bottom-width:15px;
  border-left-width:8px;
  border-right-width:8px;
  border-top-color:#FA629D;
  left:64%;
}
.n1::after{
  border-top-width:15px;
  border-bottom-width:15px;
  border-left-width:8px;
  border-right-width:8px;
  border-top-color:#FA629D;
  left:64%;
}
.n2::after{
  border-top-width:15px;
  border-bottom-width:15px;
  border-left-width:8px;
  border-right-width:8px;
  border-top-color:#c38ede;
  left:23%;
}
.n3::after{
  border-top-width:23px;
  border-bottom-width:23px;
  border-left-width:11px;
  border-right-width:11px;
  border-top-color: #8ea9de;
}
.n4::after{
  border-top-width:23px;
  border-bottom-width:23px;
  border-left-width:11px;
  border-right-width:11px;
  border-top-color: #8ed2df;
  left:64%;
}

.ex{
  margin-left: -7%;
  position: relative;
  bottom: 6.5em;
  border-top: solid 1px #534e4d;
}
.triangle {
    background: #fafafa;
    width: 55%;
    height: auto;
    border: #65645d 0.13em solid;
    border-radius: 7px;
    margin: 1.6em;
    padding: 0.5em 0.9em;
    padding-top: 0.8em;
    font-weight: 600;
    font-size: 0.9em;
}
.ep{
  width: 27%;
  position: relative;
  left: 2%;

}
.inline{
  display: inline-block;
  position: relative;
  left: 13%;
  vertical-align: top;
}
.hu,.yo,.mu{
  display: inline-block;
  vertical-align: top;
  position: relative;
  left: 3%;
}
/* ラベル部分 左上に表示 */
.triangle::before {
    content: "";
    top: 0; left: 0;
    border-bottom: 1.3em solid transparent;
    position: absolute;
}
.hi::before{
  border-left: 3.2em solid #8ea9de; /* ラベルの色はここで変更 */
}
.hu::before{
  border-left: 3.2em solid #fa629d; /* ラベルの色はここで変更 */
}
.mi::before{
  border-left: 3.2em solid #8ed2df; /* ラベルの色はここで変更 */
}
.yo::before{
  border-left: 3.2em solid #ffc685; /* ラベルの色はここで変更 */
}
.itu::before{
  border-left: 3.2em solid #76d9cb; /* ラベルの色はここで変更 */
}
.mu::before{
  border-left: 3.2em solid #f0ffa3; /* ラベルの色はここで変更 */
}

.triangle::after {
    content: "";
    display: block;
    top: 2px;
    transform: rotate(-45deg);
    color: #fff; /* 文字色はここで変更 */
    left: 0;
    position: absolute;
    z-index: 1;
}

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

  .triangle {
    width: 50%;
  }
    



}

/*スマホ対応（画面サイズが559px以下の場合ここの記述が適用される）*/
@media screen and (max-width:559px) {
  .s2{
    width: 100%;
    margin: 30px 0 0 0 ;
  }
  .if{
    padding-top: 30px;
  }
  .response_size{
    font-size: 20px;
    padding-bottom: 20px !important;
  }
  .arrow_box{
    font-size: 13px;
    margin-top: 40px;
  }
  .n1{
    width:35%;
    left:5%;
  }
  .n1_e{
    width:35%;
    left:5%;
    top: -45px;
  }
  .n2{
    font-size: 8px;
    width: 17%;
    top: -70px;
    width: 28%;
  }
  .n2::after{
    border-top-width:9px;
    border-bottom-width:15px;
    border-left-width:4px;
    border-right-width:4px;
    left:30%;
  }
  .n3{
    width: 42%;
  }
  .n3::after{
    border-top-width:13px;
    border-bottom-width:13px;
    border-left-width:6px;
    border-right-width:6px;
    left: 90%;
  }
  .n4{
    font-size: 10px;
    width: 45%;
    top: -139px;
  }
  .n4::after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:6px;
    border-right-width:6px;
  }
  .spbox{
  margin-bottom: -30%;
  }
  .ep{
    width: 75%;
  }
  .triangle{
    margin: 1.6em 0;
    width:75%;
    font-size: 13px;
    padding: 1.5em;
    margin-bottom: 80px;
    line-height:180%;
  }
  .lastt{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px 30px 0 30px!important;
  }
  .page3_one{
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    margin-top: 20px;
    margin-left: 18%;
    width: 55%;
    height: auto;
  }
  .hi{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .page3_two{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-left: 18%;
    width: 65%;
    height: auto;
  }
  .hu{
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-left: 8%;
  }
  .page3_three{
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .mi{
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .page3_four{
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;

    order: 6;
    margin-left: 12%;
  }
  .yo{
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    margin-left: 8%;
    order: 7
  }
  .page3_five{
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    margin-left: 5%;
    order: 8;
  }
  .itu{
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    margin-bottom: 0;
    order:9;
  }
}