/* 共通 */
.u-ff-normal {
  font-family: HiraginoSans-W3;
}
.u-ff-bold {
  font-family: HiraginoSans-W6;
}
.u-fc-normal {
  color: #0b322c;
}
.u-fc-primary {
  color: #00998a;
}
.u-fc-secondary {
  color: #ffffff;
}
.u-fc-pale {
  color: #4f6f6a;
}
.u-fs-14 {
  font-size: 14px;
}
.u-fs-16 {
  font-size: 16px;
}
.u-fs-18 {
  font-size: 18px;
}
.u-fs-20 {
  font-size: 20px;
}
.u-fs-24 {
  font-size: 24px;
}
.u-mt-12 {
  margin-top: 12px;
}
.u-mt-16 {
  margin-top: 16px;
}
.u-mt-24 {
  margin-top: 24px;
}
.u-mt-32 {
  margin-top: 32px;
}
.u-mt-40 {
  margin-top: 40px;
}
.u-mt-44 {
  margin-top: 44px;
}
.u-mt-48 {
  margin-top: 48px;
}
.u-mt-60 {
  margin-top: 60px;
}
.u-mr-16 {
  margin-right: 16px;
}
.u-mr-36 {
  margin-right: 36px;
}
.u-mb-12 {
  margin-bottom: 12px;
}
.u-mb-16 {
  margin-bottom: 16px;
}
.u-mb-20 {
  margin-bottom: 20px;
}
.u-mb-30 {
  margin-bottom: 30px;
}
.u-mb-40 {
  margin-bottom: 40px;
}
.u-mb-60 {
  margin-bottom: 60px;
}
.u-mb-80 {
  margin-bottom: 80px;
}
.u-mb-90 {
  margin-bottom: 90px;
}
.u-mb-120 {
  margin-bottom: 120px;
}
.u-pt-60 {
  padding-top: 60px;
}

.u-pt-64 {
  padding-top: 64px;
}

.u-pt-80 {
  padding-top: 80px;
}
.u-pb-40 {
  padding-bottom: 40px;
}
.u-pb-80 {
  padding-bottom: 80px;
}
.u-br {
  border-right: solid 1px #deeaea;
}

.p-tutorial_container {
  min-width: 980px;
  max-width: 1440px;
  margin: 0 auto;
}

/* header */
.l-header_left {
  margin-right: auto;
  margin-left: 60px;
}
.l-header_right {
  margin-left: auto;
  margin-right: 60px;
}
.p-tutorial-header {
  height: 70px;
}
.p-tutorial-header__text {
  font-size: 10px;
  font-family: HiraKakuPro-W6;
  line-height: 1.7;
  color: #0b322c;
}
.p-tutorial-header__logo {
  width: 211px;
  height: 30px;
  margin-top: 10px;
}
.p-tutorial-header__logo__text {
  width: 120px;
  height: 30px;
  background-image: url("data:image/svg+xml;utf-8,<svg width='120' height='30' viewBox='0 0 440 110' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_225_13)'><g clip-path='url(%23clip1_225_13)'><path fill-rule='evenodd' clip-rule='evenodd' d='M183.15 20C165.32 20 150.86 34.46 150.86 52.29C150.86 70.12 165.32 84.58 183.15 84.58C200.98 84.58 215.44 70.12 215.44 52.29C215.44 34.46 200.98 20 183.15 20ZM183.15 69.54C173.62 69.54 165.9 61.82 165.9 52.29C165.9 42.76 173.62 35.04 183.15 35.04C192.68 35.04 200.4 42.76 200.4 52.29C200.4 61.82 192.68 69.54 183.15 69.54ZM354.89 43.8C354.43 40.28 352.86 35.88 350.21 32.4C344.11 24.37 334.41 19.43 323.88 20.08C307.43 21.09 294.76 35.31 294.85 52.21H294.87C294.87 59.5 297.31 66.84 302.34 72.85C312.86 85.44 332.55 87.51 346.67 79.83C350.02 78.01 352.28 75.69 352.67 72.8C353.06 69.91 352.15 67.69 350.19 66.05C347.61 63.89 343.41 63.81 340.05 65.72C336.5 67.75 330.23 70.1 322.94 68.56C316.31 67.16 313.74 63.61 313.16 62.06C312.43 60.11 313.26 58.36 315.28 58.36H345.35C348.46 58.36 351.36 57.62 353.25 55.42C355.14 53.22 355.41 47.86 354.88 43.81L354.89 43.8ZM314.79 46.36C312.83 46.36 311.86 44.3 312.73 42.55C314.72 38.48 319.22 35.21 325.81 35.21C332.4 35.21 336.67 37.92 338.83 42.56C339.65 44.33 338.71 46.36 336.76 46.36H314.79ZM416.59 20.82C412.9 19.08 408.49 20.71 406.57 24.32L393.92 48.18C393 49.91 390.52 49.92 389.58 48.2L376.64 24.27C374.7 20.68 370.27 19.08 366.6 20.85C362.68 22.74 361.16 27.5 363.21 31.28L382.55 67.04C382.98 67.84 382.99 68.8 382.56 69.6L367.42 98.14C365.51 101.74 366.63 106.31 370.14 108.39C373.89 110.61 378.68 109.23 380.7 105.43L391.89 84.33L400.42 68.25L420.05 31.23C422.07 27.43 420.52 22.68 416.58 20.82H416.59ZM267.24 76.72C267.24 80.9 270.63 84.29 274.81 84.29C278.99 84.29 282.38 80.9 282.38 76.72V48.39C282.38 32.78 269.68 20.08 254.07 20.08C238.46 20.08 225.76 32.78 225.76 48.39V76.72C225.76 80.9 229.15 84.29 233.33 84.29C237.51 84.29 240.9 80.9 240.9 76.72V48.39C240.9 41.13 246.81 35.22 254.07 35.22C261.33 35.22 267.24 41.13 267.24 48.39V76.72ZM99.41 25.57C103.77 22.02 109.34 19.93 115.4 20.04L115.41 20.06C128.94 20.31 139.58 31.8 139.58 45.34V76.73C139.58 81.16 135.78 84.7 131.26 84.27C127.32 83.89 124.43 80.36 124.43 76.4V44.69C124.43 39.04 119.47 34.53 113.68 35.27C108.89 35.89 105.43 40.19 105.43 45.02V76.72C105.43 77.25 105.38 77.76 105.28 78.25C104.58 81.7 101.52 84.3 97.86 84.3C94.2 84.3 91.15 81.7 90.44 78.25C90.34 77.75 90.29 77.24 90.29 76.72V44.69C90.29 39.04 85.33 34.53 79.54 35.27C74.75 35.89 71.29 40.19 71.29 45.02V76.72C71.29 81.15 67.49 84.69 62.97 84.26C59.03 83.88 56.14 80.35 56.14 76.39V45.32C56.14 31.79 66.78 20.3 80.31 20.04C86.37 19.93 91.95 22.03 96.29 25.57C97.2 26.31 98.5 26.31 99.41 25.57Z' fill='black'/><path d='M18.6 84.25C28.8725 84.25 37.2 75.9225 37.2 65.65C37.2 55.3775 28.8725 47.05 18.6 47.05C8.3275 47.05 0 55.3775 0 65.65C0 75.9225 8.3275 84.25 18.6 84.25Z' fill='%2300BD9E'/></g></g><defs><clipPath id='clip0_225_13'><rect width='440' height='90' fill='white' transform='translate(0 20)'/></clipPath><clipPath id='clip1_225_13'><rect width='439.37' height='89.46' fill='white' transform='translate(0 20)'/></clipPath></defs></svg>");
  background-repeat: no-repeat;
  text-indent: -9999px;
  margin-top: 2px;
  display: inline-block;
}
.p-tutorial-header__menu {
  width: 112px;
  height: 42px;
  border-radius: 4px;
  padding: 12px 24px;
  line-height: 70px;
}
.p-tutorial-header__menu.--primary {
  border: solid 1px #00998a;
  color: #00998a;
}
.p-tutorial-header__menu.--secondary {
  border: solid 2px #00998a;
  background-color: #00998a;
  color: #ffffff;
}

/* main */
.p-background {
  width: auto;
  /*height: 490px;*/
}
.p-background.normal {
  background: top / 100% 490px url("../img/tutorial/background-normal.png") no-repeat;
}
.p-background.miler {
  background: top / 100% 490px url("../img/tutorial/background-miler.png") no-repeat;
}
.p-background.--secondary {

  background: #f6fbfb;
}

/* top */
.p-tutorial-top {
  width: 832px;
  height: 500px;
}

.p-tutorial-top_img {
  width: 832px;
  height: 500px;
  object-fit: contain;
}

.p-tutorial-paragraph_img {
  width: 300px;
  height: 16px;
  background: center / contain url("../img/tutorial/title.png") no-repeat;
}

.p-tutorial-text {
  width: 832px;
  line-height: 2.13;
}

.p-tutorial_change_img {
  width: 664px;
  height: 357px;
  background: center / contain url("../img/tutorial/image-pc.png") no-repeat;
  object-fit: contain;
}

.p-tutorial_change_mile_img {
  width: 664px;
  height: 1011px;
  background: center / contain url("../img/tutorial/image-miler-pc.png") no-repeat;
  object-fit: contain;
  margin-top: 56px;
}
.p-tutorial_choose_img {
  width: 430px;
  height: 210px;
  background: center / contain url("../img/tutorial/illustration-10.png") no-repeat;
}
.p-tutorial-btn {
  height: 56px;
  line-height: 56px;
  padding: 18px 32px;
  border-radius: 28px;
  background-color: #00998a;
}

.p-tutorial_change_img--secondary {
  width: 664px;
  height: 182px;
  background: center / contain url("../img/tutorial/image.png") no-repeat;
  object-fit: contain;
}

.p-flex-container {
  width: 670px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.p-tutorial-frame {
  position: relative;
  width: 196px;
  height: 284px;
  border: solid 1px #ffffff;
  border-radius: 100px 100px 0 0;
  background: center / 194px 282px #ffffff ;
  margin-right: 38px;
  margin-bottom: 66px;
}
.p-tutorial-frame:nth-child(3n) {
  margin-right: 0;
}

.p-tutorial-frame:nth-last-child(-n+3) {
  margin-bottom: 0;
}

.p-tutorial-frame-img {
  position: absolute;
  top: -32px;
  width: 140px;
  height: 140px;
  left: calc(50% - 70px);
}

.p-tutorial-frame_txt {
  margin-top: 122px;
  line-height: 1.29;
}

.p-turorial-frame_box {
  height: 48px;
  width: 98px;
  margin-top: 2px;
}
.p-turorial-frame_box_text {
  margin-bottom: 10px;
}
.p-coin-icon {
  width: 18px;
  height: 18px;
  background: center / contain url("../img/tutorial/money.png") no-repeat;
}
.p-coin-text {
  min-width: 24px;
}
.p-recommend-frame {
  width: 261px;
  height: 420px;
  margin-right: 16px;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 2.14;
  color: #0b322c;
}
.p-recommend-frame:last-child {
  margin-right: 0;
}
.p-recommend-frame_img {
  width: 261px;
  height: 280px;
  object-fit: contain;
}
.l-number-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.l-number-img.number01 {
  background: center / contain url("../img/tutorial/no-1.png") no-repeat;
}
.l-number-img.number02 {
  background: center / contain url("../img/tutorial/no-2.png") no-repeat;
}

/* どこまで行けるか */
/* inputの矢印削除 */
.p-tutorial-mile_search input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.p-tutorial-mile_search input[type="number"] {
  -moz-appearance:textfield;
}

.p-tutorial-mile_select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 324px;
  height: 56px;
  padding: 0 14px;
  border-radius: 4px;
  border: solid 2px #7d9894;
  color: #4f6f6a;
}
.p-tutorial-mile_select {
  background: right 14px center / 24px 24px url("../img/tutorial/expand-more.png") no-repeat;
}
.p-tutorial-mile_point {
  position: relative;
}
.p-tutorial-mile_number {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 292px;
  height: 52px;
  padding: 0 14px;
  border-radius: 4px;
  border: solid 2px #7d9894;
  color: #0b322c;
  background-color: #ffffff;
}

.p-tutorial-mile_number:not(:focus) {
  z-index: 1;
  color: transparent;
  background-color: #ffffff;
}
.p-tutorial-mile_number:focus {
  z-index: 3;
  color: #0b322c;
}

.p-tutorial-mile_number_value {
  width: 90%;
  position: absolute;
  background: transparent;
  display: inline-block;
  pointer-events: none;
  top: calc(50% - 7px);
  left: 16px;
  z-index: 2;
}

.p-tutorial-mile_unit {
  position: absolute;
  width: 19px;
  height: 22px;
  font-size: 16px;
  font-family: HiraKakuProN-W6;
  color: #0b322c;
  top: 20px;
  right: 16px;
  z-index: 5;
}

.p-tutorial-mile_number::placeholder {
  color: #4f6f6a;
}
.p-tutorial-mile_btn_frame {
  width: 400px;
  position: relative;
}
.p-tutorial-mile_btn {
  position: relative;
  height: 56px;
  width: 316px;
  line-height: 23px;
  padding: 18px 32px;
  border-radius: 28px;
  background-color: #deeaea;
  color: #4f6f6a;
  outline: #ffffff 1px solid;
}
.p-tutorial-mile_btn.is-active {
  background-color: #00998a;
  color: #ffffff;
}

.p-tutorial-mile_btn_icon {
  position: absolute;
  top: -38px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: center / 90px 90px url("../img/tutorial/image-airplane.png") no-repeat;
  object-fit: contain;
  pointer-events: none;
}

.p-place-name {
  margin-bottom: 24px;
}

.p-place-img {
  width: 540px;
  height: 360px;
}

.p-place-img.place01 {
  background: center / contain url("../img/tutorial/place_okinawa.png") no-repeat;
}
.p-place-img.place02 {
  background: center / contain url("../img/tutorial/place_korea.png") no-repeat;
}
.p-place-img.place03 {
  background: center / contain  url("../img/tutorial/place_hawaii.png") no-repeat;
}

.p-contact {
  align-items: center;
  background-color: #f6fbfb;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
  padding: 32px 24px;
  row-gap: 12px;
  width: 720px;
}

.p-contact__text {
  color: #0b322c;
  font-family: HiraginoSans-W3;
  font-size: 16px;
  line-height: 2.125;
  text-align: center;
}

.p-contact__button {
  align-items: center;
  border: 1px solid #00998a;
  border-radius: 16px;
  box-sizing: border-box;
  color: #00998a;
  display: flex;
  font-size: 14px;
  font-weight: bold;
  height: 32px;
  justify-content: center;
  padding-right: 16px;
  padding-left: 16px;
}