ol, ul {
  list-style: none
}
html {
  font-size: 62.5%;
  -ms-overflow-style: -ms-autohiding-scrollbar
}

.lazyload, .lazyloading {
  opacity: 0;
  visibility: hidden
}
.lazyloaded {
  opacity: 1;
  visibility: visible
}
@-webkit-keyframes fadeIn {
  0% {
    visibility: hidden;
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fadeIn {
  0% {
    visibility: hidden;
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes visualFadeIn {
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes visualFadeIn {
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@-webkit-keyframes borderAnimation {
  0% {
    width: 0
  }
  100% {
    width: 250px
  }
}
@keyframes borderAnimation {
  0% {
    width: 0
  }
  100% {
    width: 250px
  }
}
@media only screen and (max-width:767px) {
  @-webkit-keyframes borderAnimation {
    0% {
      width: 0
    }
    100% {
      width: calc(250 / 750 * 100vw * (700 / 741))
    }
  }
  @keyframes borderAnimation {
    0% {
      width: 0
    }
    100% {
      width: calc(250 / 750 * 100vw * (700 / 741))
    }
  }
}
.p-area-outline {
  padding-top: 104px;
  background: #5bc3f4
}
.p-area-outline__headline {
  color: #f3e65b;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center
}
.p-area-outline__text {
  margin-top: 25px;
  color: #fff;
  text-align: center
}
.p-area-outline__image {
  position: relative;
  width: 600px;
  height: 600px;
/*  width: 741px;
  height: 741px;*/
  margin: 56px auto 0;
  background: url(../image/en01.png) center/contain no-repeat;
}
@media screen and (max-width:1300px) {
  .p-area-outline__image {
    width: auto;
    height: calc(741 / 750 * 40vw * (700 / 741));
    margin-right: calc(20% - 20vw);
    margin-left: calc(20% - 20vw);
}
	img.logojdl {
	width: 20%!important;
	height: auto!important;
}
 }

img.logojdl {
	width: 40%;
	height: auto;
}
.p-area-outline__image.aos-animate .p-area-outline__icon li {
  -webkit-animation: visualFadeIn 1s cubic-bezier(.76, 0, .24, 1) forwards;
  animation: visualFadeIn 1s cubic-bezier(.76, 0, .24, 1) forwards
}
.p-area-outline__image.aos-animate .p-area-outline__icon li::before {
  -webkit-animation: borderAnimation 1.2s 2.8s linear both;
  animation: borderAnimation 1.2s 2.8s linear both
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(1) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(2) {
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(3) {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(4) {
  -webkit-animation-delay: 1.55s;
  animation-delay: 1.55s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(5) {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(6) {
  -webkit-animation-delay: 1.85s;
  animation-delay: 1.85s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(7) {
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(8) {
  -webkit-animation-delay: 1.85s;
  animation-delay: 1.85s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(9) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}
.p-area-outline__image.aos-animate .p-area-outline__icon li:nth-child(10) {
  -webkit-animation-delay: 2.15s;
  animation-delay: 2.15s
}
.p-area-outline__image > img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}
.p-area-outline__icon li {
  opacity: 0;
  position: absolute;
  color: #555;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  -webkit-transform: scale(.8);
  transform: scale(.8)
}
/*.p-area-outline__icon li::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 4px;
  background-image: linear-gradient(to right, #d3f1ff, #d3f1ff 4px, transparent 4px, transparent 12px);
  background-size: 12px 4px;
  background-repeat: repeat-x
}*/
.p-area-outline__icon li:nth-child(1)::before, .p-area-outline__icon li:nth-child(2)::before, .p-area-outline__icon li:nth-child(3)::before, .p-area-outline__icon li:nth-child(4)::before, .p-area-outline__icon li:nth-child(5)::before {
  background-position: right top;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%
}
.p-area-outline__icon li:nth-child(10)::before, .p-area-outline__icon li:nth-child(6)::before, .p-area-outline__icon li:nth-child(7)::before, .p-area-outline__icon li:nth-child(8)::before, .p-area-outline__icon li:nth-child(9)::before {
  background-position: left top;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%
}
.p-area-outline__icon li:nth-child(1) {
  top: calc(50% - 350px);
  left: calc(50% + 10px);
}
.p-area-outline__icon li:nth-child(1)::before {
  right: 55%;
	  -webkit-transform: translateY(-90%) rotate(-90deg);
  transform: translateY(-90%) rotate(-90deg);
/*  -webkit-transform: translateY(-50%) rotate(-56deg);
  transform: translateY(-50%) rotate(-56deg);*/
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(1) {
  top: calc(50% - 23vh);
  left: calc(50% - 1vw);
}
.p-area-outline__icon li:nth-child(1) img {
	width: 50%;
	height: auto;
}
}
/* ------------------------------- */
.p-area-outline__icon li:nth-child(2) {
  top: calc(50% - 200px);
  left: calc(50% + 140px)
}
.p-area-outline__icon li:nth-child(2)::before {
  right: 55%;
  -webkit-transform: translateY(-50%) rotate(-40deg);
  transform: translateY(-50%) rotate(-40deg)
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(2) {
  top: calc(50% - 12vh);
  left: calc(50% + 6vw);
}
.p-area-outline__icon li:nth-child(2) img {
	width: 50%;
	height: auto;
}
}	
/* ------------------------------- */
	
.p-area-outline__icon li:nth-child(3) {
  top: calc(50% - 10px);
  left: calc(50% + 140px)
}
.p-area-outline__icon li:nth-child(3)::before {
  right: 50%;
  -webkit-transform: translateY(-50%) rotate(7deg);
  transform: translateY(-50%) rotate(7deg)
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(3) {
  top: calc(50% - 1vh);
  left: calc(50% + 4vw);
}
.p-area-outline__icon li:nth-child(3) img {
	width: 50%;
	height: auto;
}
}	
/* ------------------------------- */
	
.p-area-outline__icon li:nth-child(4) {
  top: calc(50% + 140px);
  left: calc(50% + 30px);
}
.p-area-outline__icon li:nth-child(4)::before {
  right: 30%;
  -webkit-transform: translateY(-50%) rotate(50deg);
  transform: translateY(-50%) rotate(50deg)
/*  -webkit-transform: translateY(-50%) rotate(27deg);
  transform: translateY(-50%) rotate(27deg)*/
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(4) {
  top: calc(50% + 11vh);
  left: calc(50% - 1vw);
}
.p-area-outline__icon li:nth-child(4) img {
	width: 50%;
	height: auto;
}
}	
/* ------------------------------- */
.p-area-outline__icon li:nth-child(5) {
  top: calc(50% + 140px);
  left: calc(50% - 180px)
}
.p-area-outline__icon li:nth-child(5)::before {
  right: 50%;
  -webkit-transform: translateY(-50%) rotate(120deg);
  transform: translateY(-50%) rotate(120deg)
/*  -webkit-transform: translateY(-50%) rotate(62deg);
  transform: translateY(-50%) rotate(62deg)*/
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(5) {
  top: calc(50% + 11vh);
  left: calc(50% - 15vw);
}
.p-area-outline__icon li:nth-child(5) img {
	width: 50%;
	height: auto;
}
}

/* ------------------------------- */
.p-area-outline__icon li:nth-child(6) {
  top: calc(50% - 10px);
  left: calc(50% - 310px)
}
.p-area-outline__icon li:nth-child(6)::before {
  left: 50%;
  -webkit-transform: translateY(-50%) rotate(-7deg);
  transform: translateY(-50%) rotate(-7deg);
/*  -webkit-transform: translateY(-50%) rotate(-84deg);
  transform: translateY(-50%) rotate(-84deg);*/
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(6) {
  top: calc(50% - 1vh);
  left: calc(50% - 22vw);
}
.p-area-outline__icon li:nth-child(6) img {
	width: 50%;
	height: auto;
}
}

/* ------------------------------- */
.p-area-outline__icon li:nth-child(7) {
  top: calc(50% - 200px);
  left: calc(50% - 310px)
}
.p-area-outline__icon li:nth-child(7)::before {
  left: 50%;
  -webkit-transform: translateY(-50%) rotate(+40deg);
  transform: translateY(-50%) rotate(+40deg);
/*  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);*/
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(7) {
  top: calc(50% - 12vh);
  left: calc(50% - 20vw);
}
.p-area-outline__icon li:nth-child(7) img {
	width: 50%;
	height: auto;
}
}	
/* ------------------------------- */

.p-area-outline__icon li:nth-child(8) {
  top: calc(50% - 350px);
  left: calc(50% - 202px)
}
.p-area-outline__icon li:nth-child(8)::before {
  left: 50%;
  -webkit-transform: translateY(-50%) rotate(-11deg);
  transform: translateY(-50%) rotate(-11deg)
}
@media screen and (max-width:1300px) {
.p-area-outline__icon li:nth-child(8) {
  top: calc(50% - 23vh);
  left: calc(50% - 18vw);
}
.p-area-outline__icon li:nth-child(8) img {
	width: 50%;
	height: auto;
}
.p-area-outline__icon li span {
	font-size: 1.2vw;
  }
}



.p-area-outline__icon li:nth-child(9) {
  top: calc(50% - 138px);
  left: calc(50% - 350px)
}
.p-area-outline__icon li:nth-child(9)::before {
  left: 50%;
  -webkit-transform: translateY(-50%) rotate(18deg);
  transform: translateY(-50%) rotate(18deg)
}
.p-area-outline__icon li:nth-child(10) {
  top: calc(50% - 248px);
  left: calc(50% - 238px)
}
.p-area-outline__icon li:nth-child(10)::before {
  left: 50%;
  -webkit-transform: translateY(-50%) rotate(47deg);
  transform: translateY(-50%) rotate(47deg)
}
.p-area-outline__icon li img {
  position: relative
}
.p-area-outline__icon li span {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  white-space: nowrap;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}
.p-area-outline__headline-sub {
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center
}
.p-area-outline__headline-sub img {
  vertical-align: -.03em
}

/* ------------------------------- */
@media only screen and (max-width:767px) {
  .p-area-outline {
    padding-top: 80px
  }
  .p-area-outline__headline {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    font-size: 2.9rem
  }
  .p-area-outline__headline svg {
    width: 132px;
    height: 30px
  }
  .p-area-outline__text {
    margin-top: 12px
  }
  .p-area-outline__image {
    width: auto;
    height: calc(741 / 750 * 70vw * (700 / 741));
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw)
  }
  .p-area-outline__image > img {
    width: calc(291 / 750 * 100vw * (700 / 741))
  }
  .p-area-outline__icon li {
    font-size: calc(22 / 750 * 100vw * (700 / 741))
  }
.p-area-outline__icon li span {
	font-size: 1.8vw;
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(1) {
    top: calc(50% - calc(226 / 750 * 100vw * (700 / 741)));
    left: calc(50% + calc(72 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(1) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(2) {
    top: calc(50% - calc(100 / 750 * 100vw * (700 / 741)));
    left: calc(50% + calc(150 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(2) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(3) {
    top: calc(50% + calc(30 / 750 * 100vw * (700 / 741)));
    left: calc(50% + calc(150 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(3) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(4) {
    top: calc(50% + calc(140 / 750 * 100vw * (700 / 741)));
    left: calc(50% + calc(70 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(4) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(5) {
    top: calc(50% + calc(140 / 750 * 100vw * (700 / 741)));
    left: calc(50% - calc(100 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(5) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(6) {
    top: calc(50% + calc(30 / 750 * 100vw * (700 / 741)));
    left: calc(50% - calc(220 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(6) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(7) {
    top: calc(50% - calc(100 / 750 * 100vw * (700 / 741)));
    left: calc(50% - calc(220 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(7) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
/* ------------------------------- */
  .p-area-outline__icon li:nth-child(8) {
    top: calc(50% - calc(226 / 750 * 100vw * (700 / 741)));
    left: calc(50% - calc(172 / 750 * 100vw * (700 / 741)))
  }
  .p-area-outline__icon li:nth-child(8) img {
    width: calc(93 / 750 * 100vw * (700 / 741))
  }
}