@charset "utf-8";




.modal-open {
  padding-right: 0px !important;
  overflow: auto;
}
.modal {
  padding-right: 0px !important;
}






.br::before {
  content: "\A";
  white-space: pre;
}



.pattern {
  color:#FF0000;
}







/*
.list ul li{
 width:100px;
 height:100px;
 margin: 5px;
 border: solid 1px #000;
 list-style:none;
}
*/


.log{
  height:1em;
}



.list {
  position: relative; 
  overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */
}

.list ol {
  position: relative;
  left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
  float: left;
}

.list ol li {
  position: relative;
  left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
  float: left;
  list-style: none; /* 項目にぼっちを出したくない場合はこれを設定（今回はあんまり関係ないですが） */
}



#trash {
    background-color: transparent;
    color:#a9a9a9;
}



#jquery-ui-sortable {
    list-style-type: none;
    margin: 10;
    padding: 0;
    width: 90%;
}


#jquery-ui-sortable li {
    float: left;
    margin: 10px;
    margin-bottom:40px;
    padding: 20px 0px 0px 0px;
    font-size: 15px;
    font-weight: bold;
    cursor: move;
    width: 25%;
    height: 80px;
    text-align: center;
}


.takeoff, .land{
    border:1px #e45726 solid;
    background: #fdf4f1;
}







.stop { color:red; }



ol.sortable{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  /*border: solid 1px #F6A38B;*/
}

ol.sortable li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}


/*ol.sortable li:before{*/
.ui-state-default:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -10px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 5%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*.ui-state-default {
    counter-increment: list;
}*/





/*
.modal-dialog-size {
    width: 80%;
    height:60%;
    position: absolute;
    left: 10%;
    top: 10%;
    transform: translate(-50%, -50%);
}
*/

.modal-dialog-size {
    max-width: inherit;
    width: 96%;
    /*margin-left: 15px;*/
}


.pbox{
  display:-webkit-flex;
  display: flex;
  flex-wrap: wrap;
  border: solid 0px black;
  padding: 5px;
  width:100%;
}
.cbox{
  border: solid 1px black;
  vertical-align: middle;
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin:5px;
  cursor: pointer;
}
.boxA{
  background-color: dodgerblue;
}
.boxB{
  background-color: lawngreen;
}



/* 上向き矢印 */

/* 長方形 */
.arrow_up {
	font-size: 22px;
	position: relative;
	width: 0.6em;
	height: 0.8em;
	background-color: #39a9d6;
  margin-top:-86%;
  margin-left:43%;
}
/* 三角 */
.arrow_up::before {
	position: absolute;
	top: -0.6em;
	left: -0.5em;
	width: 0;
	height: 0;
	content: "";
	border-bottom: 0.8em solid #39a9d6;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}

/* 下向き矢印 */
/* 長方形 */
.arrow_down {
	font-size: 22px;
	position: relative;
	width: 0.6em;
	height: 0.8em;
	background-color: #39a9d6;
  margin-top:32%;
  margin-left:43%;
}
/* 三角 */
.arrow_down::before {
	position: absolute;
	top: 0.6em;
	left: -0.5em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.8em solid #39a9d6;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}

/* 左向き矢印 */
/* 長方形 */
.arrow_left {
	font-size: 22px;
	position: relative;
	width: 0.8em;
	height: 0.6em;
	background-color: #39a9d6;
  margin-top:-55%;
  margin-left:14%;
}
/* 三角 */
.arrow_left::before {
	position: absolute;
	top: -0.5em;
	left: -0.6em;
	width: 0;
	height: 0;
	content: "";
	border-bottom: 0.8em solid transparent;
	border-top: 0.8em solid transparent;
	border-right: 0.8em solid #39a9d6;
}

/* 右向き矢印 */
/* 長方形 */
.arrow_right {
	font-size: 22px;
	position: relative;
	width: 0.8em;
	height: 0.6em;
	background-color: #39a9d6;
  margin-top:-14%;
  margin-left:70%;
}
/* 三角 */
.arrow_right::before {
	position: absolute;
	top: -0.5em;
	left: 0.6em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.8em solid transparent;
	border-left: 0.8em solid #39a9d6;
	border-bottom: 0.8em solid transparent;
}


/* 上下向き矢印 */

/* 長方形 */
.arrow_height {
	font-size: 22px;
	position: relative;
	width: 0.6em;
	height: 1.2em;
	background-color: #39a9d6;
  margin-top:-59%;
  margin-left:14%;
}

/* 三角 */
.arrow_height::before {
	position: absolute;
	top: -0.79em;
	left: -0.5em;
	width: 0;
	height: 0;
	content: "";
	border-bottom: 0.8em solid #39a9d6;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}

/* 三角 */
.arrow_height::after {
	position: absolute;
	top: 0.8em;
	left: -0.5em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.8em solid #39a9d6;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}



/* 右上に曲がった矢印 */

.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow_yaw_up::before {
    top: -68px;
    left: -20px;
    box-sizing: border-box;
    width: 50px;
    height: 34px;
    border: 18px solid transparent;
    border-left: 19px solid #39a9d6;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.arrow_yaw_up::after {
    top: -36px;
    left: -56px;
    border: 0 solid transparent;
    border-left: 8px solid #39a9d6;
    border-radius: 0 0 0 40px;
    width: 42px;
    height: 34px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* 右下に曲がった矢印 */
.arrow_yaw_down::before {
    top: 52px;
    left: -90px;
    box-sizing: border-box;
    width: 50px;
    height: 34px;
    border: 18px solid transparent;
    border-left: 19px solid #39a9d6;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.arrow_yaw_down::after {
    top: 26px;
    left: -42px;
    border: 0 solid transparent;
    border-top: 8px solid #39a9d6;
    border-radius: 40px 0 0;
    width: 42px;
    height: 34px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}


/* 一時停止 */

/* 円 */
.pause {
	top: -98px;
	left: 2px;
	font-size: 38px;
	position: relative;
	width: 1.0em;
	height: 1.0em;
	border: 0.1em solid #39a9d6;
	border-radius: 100%;
}
/* マーク */
.pause::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -6px;
	width: 1.8em;
	height: 0.7em;
	background:
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.35em 0.2em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.65em 0.2em;
	background-size: 0.15em 0.75em;
	background-repeat: no-repeat;
}










/*  大きな矢印  */

/* 長方形 */
.arrow_up2 {
	font-size: 42px;
	position: relative;
	width: 0.6em;
	height: 0.8em;
	background-color: #39a9d6;
  margin-top:6%;
  margin-left:6%;
}
/* 三角 */
.arrow_up2::before {
	position: absolute;
	top: -0.6em;
	left: -0.5em;
	width: 0;
	height: 0;
	content: "";
	border-bottom: 0.8em solid #39a9d6;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}

/* 長方形 */
.arrow_down2 {
	font-size: 42px;
	position: relative;
	width: 0.6em;
	height: 0.8em;
	background-color: #39a9d6;
  margin-top:32%;
  margin-left:-6%;
}
/* 三角 */
.arrow_down2::before {
	position: absolute;
	top: 0.6em;
	left: -0.5em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.8em solid #39a9d6;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
}




/* 右下に曲がった矢印 */

.arrow2{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow2::before,
.arrow2::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow_yaw_right2::before {
    top: -10px;
    left: 396px;
    box-sizing: border-box;
    width: 64px;
    height: 10px;
    border: 30px solid transparent;
    border-left: 32px solid #39a9d6;
    -webkit-transform: rotate(65deg);
    transform: rotate(65deg);
}
.arrow_yaw_right2::after {
    top: -110px;
    left: 328px;
    border: 0 solid transparent;
    border-left: 16px solid #39a9d6;
    border-radius: 0 0 0 80px;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(155deg);
    transform: rotate(155deg);
}


/* 左下に曲がった矢印 */

.arrow_yaw_left2::before {
    top: -10px;
    left: 20px;
    box-sizing: border-box;
    width: 64px;
    height: 10px;
    border: 30px solid transparent;
    border-left: 32px solid #39a9d6;
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
}
.arrow_yaw_left2::after {
    top: -112px;
    left: 70px;
    border: 0 solid transparent;
    border-left: 16px solid #39a9d6;
    border-radius: 80px 0 0 0;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}











/* スライダー */

.range_pitch, .range_alt {
    -webkit-transform:rotate(-90deg);
           -moz-transform:rotate(-90deg);
             -o-transform:rotate(-90deg);
                transform:rotate(-90deg);
    width:200px;
    margin-top:46%;
}

input[type=range]::-webkit-slider-thumb {
  border-radius: 100%;
  background-color: white;
  border: 18px solid #1976D2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
input[type=range]::-moz-range-thumb {
  border-radius: 100%;
  background-color: white;
  border: 18px solid #1976D2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
input[type=range]::-ms-thumb {
  border-radius: 100%;
  background-color: white;
  border: 18px solid #1976D2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}


.score_pitch, .score_alt {
    font-size:2.0em;
    margin-top:64%;
    width:86px;
}

.input {
  inline-block;
  border:0px solid;
  margin-left:4%;
}

.input2 {
  inline-block;
  border:0px solid;
  margin-left:0%;
}


.input3 {
  inline-block;
  border:0px solid;
  margin-top:8%;
  margin-left:0%;
}


 .input4 {
   inline-block;
   border:0px solid;
   padding-top:14%;
 }



  .score_roll, .score_yaw {
    font-size:2.0em;
    margin-top:64%;
    width:86px;
  }

  .range_roll {
    width:250px;
    margin-top:20%;
    margin-left:44%;
  }

  .range_yaw {
    width:360px;
    margin-top:20%;
    margin-left:10%;
  }


 .input2_roll {
   inline-block;
   border:0px solid;
   margin-left:40%;
   margin-top:0%;
 }


 .input2_yaw {
   inline-block;
   border:0px solid;
   margin-left:40%;
   margin-top:-1.0em;
 }





/* 長方形 */
.arrow_left2 {
	font-size: 42px;
	position: relative;
	width: 0.8em;
	height: 0.6em;
	background-color: #39a9d6;
  margin-top:8%;
  margin-left:16%;
}
/* 三角 */
.arrow_left2::before {
	position: absolute;
	top: -0.5em;
	left: -0.6em;
	width: 0;
	height: 0;
	content: "";
	border-bottom: 0.8em solid transparent;
	border-top: 0.8em solid transparent;
	border-right: 0.8em solid #39a9d6;
}

/* 長方形 */
.arrow_right2 {
	font-size: 42px;
	position: relative;
	width: 0.8em;
	height: 0.6em;
	background-color: #39a9d6;
  margin-top:8%;
  margin-left:50%;
}
/* 三角 */
.arrow_right2::before {
	position: absolute;
	top: -0.5em;
	left: 0.6em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.8em solid transparent;
	border-left: 0.8em solid #39a9d6;
	border-bottom: 0.8em solid transparent;
}




 .stepperInput {
    display: flex;
    margin-top:1.5em;
    margin-left:6.0em;
  }

  .stepperInput__input {
    border-left: 0;
    border-right: 0;
    width: 60px;
    text-align: center;
  }

  #button0 {
    cursor: pointer;
    padding: 0px 15px;
    color: #FFFFFF;
    background-color: #4EBBE4;
    font-size: 30px;
    border: 1px solid #16A2D7;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  #button1 {
    cursor: pointer;
    padding: 0px 15px;
    color: #FFFFFF;
    background-color: #4EBBE4;
    font-size: 30px;
    border: 1px solid #16A2D7;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }


  .button--addOnLeft {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .button--addOnRight {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  #range_pause {
    border: 1px solid #D7DBDD;
    padding: 0 10px;
    border-radius: 0;
    box-shadow: none;
  }









.flame04 {
    margin: 2em auto;
    padding: 1em;
    width: 80%;
    border: 1px solid #a9a9a9;
    background-color: #fff;
    box-shadow: 1.5px 1.5px 2px #696969;
    border-radius:6px;
}











@media screen and (min-width:375px) and (max-width:767px) {

  /*  大きな矢印  */

  /* 長方形 */
  .arrow_up2 {
	  font-size: 42px;
	  position: relative;
	  width: 0.6em;
	  height: 0.8em;
	  background-color: #39a9d6;
    margin-top:7%;
    margin-left:8%;
  }
  /* 三角 */
  .arrow_up2::before {
	  position: absolute;
	  top: -0.6em;
	  left: -0.5em;
	  width: 0;
	  height: 0;
	  content: "";
	  border-bottom: 0.8em solid #39a9d6;
  	border-left: 0.8em solid transparent;
  	border-right: 0.8em solid transparent;
  }

  /* 長方形 */
  .arrow_down2 {
  	font-size: 42px;
  	position: relative;
  	width: 0.6em;
  	height: 0.8em;
  	background-color: #39a9d6;
    margin-top:32%;
    margin-left:-6%;
  }
  /* 三角 */
  .arrow_down2::before {
  	position: absolute;
  	top: 0.6em;
  	left: -0.5em;
	  width: 0;
	  height: 0;
  	content: "";
  	border-top: 0.8em solid #39a9d6;
  	border-left: 0.8em solid transparent;
  	border-right: 0.8em solid transparent;
  }



  /* 長方形 */
  .arrow_left2 {
	  font-size: 42px;
	  position: relative;
	  width: 0.8em;
	  height: 0.6em;
	  background-color: #39a9d6;
    margin-top:8%;
    margin-left:16%;
  }
  /* 三角 */
  .arrow_left2::before {
	  position: absolute;
	  top: -0.5em;
	  left: -0.6em;
	  width: 0;
	  height: 0;
	  content: "";
	  border-bottom: 0.8em solid transparent;
	  border-top: 0.8em solid transparent;
	  border-right: 0.8em solid #39a9d6;
  }

  /* 長方形 */
  .arrow_right2 {
	  font-size: 42px;
	  position: relative;
	  width: 0.8em;
	  height: 0.6em;
	  background-color: #39a9d6;
    margin-top:-7%;
    margin-left:70%;
  }
  /* 三角 */
  .arrow_right2::before {
	  position: absolute;
	  top: -0.5em;
	  left: 0.6em;
	  width: 0;
	  height: 0;
	  content: "";
	  border-top: 0.8em solid transparent;
	  border-left: 0.8em solid #39a9d6;
	  border-bottom: 0.8em solid transparent;
  }



  .arrow_yaw_right2::before {
    top: 10px;
    left: 256px;
    box-sizing: border-box;
    width: 64px;
    height: 10px;
    border: 30px solid transparent;
    border-left: 32px solid #39a9d6;
    -webkit-transform: rotate(65deg);
    transform: rotate(65deg);
  }
  .arrow_yaw_right2::after {
    top: -90px;
    left: 188px;
    border: 0 solid transparent;
    border-left: 16px solid #39a9d6;
    border-radius: 0 0 0 80px;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(155deg);
    transform: rotate(155deg);
  }


  /* 左下に曲がった矢印 */

  .arrow_yaw_left2::before {
    top: 10px;
    left:8px;
    box-sizing: border-box;
    width: 64px;
    height: 10px;
    border: 30px solid transparent;
    border-left: 32px solid #39a9d6;
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
  }
  .arrow_yaw_left2::after {
    top: -92px;
    left: 60px;
    border: 0 solid transparent;
    border-left: 14px solid #39a9d6;
    border-radius: 80px 0 0 0;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }





  /* スライダー */

  .range_pitch, .range_alt {
    -webkit-transform:rotate(-90deg);
           -moz-transform:rotate(-90deg);
             -o-transform:rotate(-90deg);
                transform:rotate(-90deg);
    width:160px;
    margin-top:42%;
    
  }

  .score_pitch, .score_alt {
    font-size:2.0em;
    margin-top:38%;
    width:80px;
  }

  .input {
    inline-block;
    border:0px solid;
    margin-left:0%;
  }

  .input2 {
    inline-block;
    border:0px solid;
    margin-left:0%;
  }


  .input3 {
    inline-block;
    border:0px solid;
    margin-left:0%;
  }


  .input4 {
    inline-block;
    border:0px solid;
    margin-left:-10%;
  }




  .score_roll, .score_yaw {
    font-size:2.0em;
    margin-top:38%;
    width:80px;
  }

  .range_roll {
    width:250px;
    margin-top:20%;
    margin-left:26%;
  }

  .range_yaw {
    width:330px;
    margin-top:20%;
    margin-left:1.5em;
  }


 .input2_roll {
   inline-block;
   border:0px solid;
   margin-left:40%;
 }

 .input2_yaw {
   inline-block;
   border:0px solid;
   margin-left:40%;
   margin-top:2%;
 }









}




@media screen and (min-width:320px) and (max-width:376px) {

  /*  大きな矢印  */

  /* 長方形 */
  .arrow_up2 {
	  font-size: 42px;
	  position: relative;
	  width: 0.6em;
	  height: 0.8em;
	  background-color: #39a9d6;
    margin-top:7%;
    margin-left:8%;
  }
  /* 三角 */
  .arrow_up2::before {
	  position: absolute;
	  top: -0.6em;
	  left: -0.5em;
	  width: 0;
	  height: 0;
	  content: "";
	  border-bottom: 0.8em solid #39a9d6;
  	border-left: 0.8em solid transparent;
  	border-right: 0.8em solid transparent;
  }

  /* 長方形 */
  .arrow_down2 {
  	font-size: 42px;
  	position: relative;
  	width: 0.6em;
  	height: 0.8em;
  	background-color: #39a9d6;
    margin-top:32%;
    margin-left:-8%;
  }
  /* 三角 */
  .arrow_down2::before {
  	position: absolute;
  	top: 0.6em;
  	left: -0.5em;
	  width: 0;
	  height: 0;
  	content: "";
  	border-top: 0.8em solid #39a9d6;
  	border-left: 0.8em solid transparent;
  	border-right: 0.8em solid transparent;
  }



  /* スライダー */

  .range_pitch, .range_alt {
    -webkit-transform:rotate(-90deg);
           -moz-transform:rotate(-90deg);
             -o-transform:rotate(-90deg);
                transform:rotate(-90deg);
    width:160px;
    margin-top:42%;
    
  }

  .score_pitch, .score_alt {
    font-size:2.0em;
    margin-top:38%;
    width:80px;
  }

  .input {
    inline-block;
    border:0px solid;
    margin-left:0%;
 }

 .input2 {
   inline-block;
   border:0px solid;
   margin-left:-4%;
 }


 .input3 {
   inline-block;
   border:0px solid;
   margin-top:-2%;
   margin-left:0%;
 }

 .input4 {
   inline-block;
   border:0px solid;
   margin-left:-8%;
 }




  .score_roll, .score_yaw {
    font-size:2.0em;
    margin-top:32%;
    width:80px;
  }


  .range_roll {
    width:250px;
    margin-top:20%;
    margin-left:17%;
  }

  .range_yaw {
    width:300px;
    margin-top:20%;
    margin-left:1.5em;
  }

 .input2_roll {
   inline-block;
   border:0px solid;
   margin-left:40%;
 }


 .input2_yaw {
   inline-block;
   border:0px solid;
   margin-left:40%;
   margin-top:-4%;
 }



/* 長方形 */
.arrow_left2 {
	font-size: 42px;
	position: relative;
	width: 0.8em;
	height: 0.6em;
	background-color: #39a9d6;
  margin-top:8%;
  margin-left:16%;
}
/* 三角 */
.arrow_left2::before {
	position: absolute;
	top: -0.5em;
	left: -0.6em;
	width: 0;
	height: 0;
	content: "";
	border-bottom: 0.8em solid transparent;
	border-top: 0.8em solid transparent;
	border-right: 0.8em solid #39a9d6;
}

/* 長方形 */
.arrow_right2 {
	font-size: 42px;
	position: relative;
	width: 0.8em;
	height: 0.6em;
	background-color: #39a9d6;
  margin-top:-8%;
  margin-left:70%;
}
/* 三角 */
.arrow_right2::before {
	position: absolute;
	top: -0.5em;
	left: 0.6em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.8em solid transparent;
	border-left: 0.8em solid #39a9d6;
	border-bottom: 0.8em solid transparent;
}




/* 右下に曲がった矢印 */

.arrow2{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow2::before,
.arrow2::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow_yaw_right2::before {
    top: 10px;
    left: 256px;
    box-sizing: border-box;
    width: 64px;
    height: 10px;
    border: 30px solid transparent;
    border-left: 32px solid #39a9d6;
    -webkit-transform: rotate(65deg);
    transform: rotate(65deg);
}
.arrow_yaw_right2::after {
    top: -90px;
    left: 188px;
    border: 0 solid transparent;
    border-left: 16px solid #39a9d6;
    border-radius: 0 0 0 80px;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(155deg);
    transform: rotate(155deg);
}


/* 左下に曲がった矢印 */

.arrow_yaw_left2::before {
    top: 10px;
    left:8px;
    box-sizing: border-box;
    width: 64px;
    height: 10px;
    border: 30px solid transparent;
    border-left: 32px solid #39a9d6;
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
}
.arrow_yaw_left2::after {
    top: -92px;
    left: 60px;
    border: 0 solid transparent;
    border-left: 14px solid #39a9d6;
    border-radius: 80px 0 0 0;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}