@charset "utf-8";
/* CSS Document */

@media (max-width: 1500px) {
  .floating-icon img{
    width: auto;
    height: calc(221 / 1500 * 100vw)
  }
  .tool-wrap .tool-wrap-item li p.imgbox img.size1 {
    object-fit: scale-down;
    height:90px;
  }
  .tool-wrap .tool-wrap-item li p.imgbox img.size2 {
    object-fit: scale-down;
    height:90px;
  }
  .tool-wrap .tool-wrap-item li p.imgbox img.size3 {
    object-fit: scale-down;
    width:90px;
  }
}

@media (max-width: 1500px) {
  .tool-wrap .tool-wrap-item li p.imgbox {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 1350px) {
  .only-maxpc{
    display: none;
  }
  .tool-wrap .tool-wrap-item {
    padding: 40px 50px;
  }
  .tool-wrap .tool-wrap-item li.attention p {
    margin-right: -10px;
  }
  .pre-booking-wrap .inner .discounts .points {
    width: 160px;
    height: 160px;
    font-size: 500%;
  }
  /* .pre-booking-wrap .inner .discounts h3 {
    font-size: 400%;
  }
  .pre-booking-wrap .inner .discounts p {
    font-size: 200%;
  } */
  .pre-booking-wrap .inner .discounts p.bigfonts {
    font-size: 900%;
  }
  .plans .planwrap .planblock .contractspan {
    left: 18%;
    right: 18%;
  }
  .plans .planwrap .planblock {
    padding: 30px 20px 10px;
  }
  .plans .planwrap .options .contractspan {
    left: 24%;
    right: 24%;
  }
}

@media (max-width: 1300px) {
  .only-1300pc{
    display: none;
  }
}

@media (max-width: 1200px) {
  .common-ttl-h2 .ttl-txt .ttl-img {
    max-width: 50px;
  }
  .only-midpc{
    display: none;
  }
  .only-midsp{
    display: block;
  }
  .tool-wrap .tool-wrap-item {
    padding: 40px 40px;
  }
  .tool-wrap .tool-wrap-item li {
    max-width: inherit;
    width: calc(100% / 4 - 10px);
  }
  .tool-wrap .tool-wrap-item li.attention p {
    margin-right: 0px;
  }
  .privacy-wrap .privacy-contents .privacy-txt {
    text-align: left;
  }
  .privacy-wrap .privacy-contents dd{
    text-align: left;
  }
  .privacy-wrap .privacy-contents .privacy-txt br{
    display: none;
  }
  .privacy-wrap .privacy-contents dd br {
    display: none;
  }
  .privacy-wrap .privacy-ttl::after {
    position: absolute;
    right: 12%;
    bottom: 36%;
  }
  .plan-guideline .plansample .samplettl span {
      position: unset;
  }
  .mypage .mypage-wrap .inner {
    padding: 0 30px;
  }
  .mypage .mypage-list {
    margin-right: 30px;
  }
  }

  @media (max-width: 1100px) {
  .header .header-inner {
    flex-direction: column;
  }
  .header .header-inner h1 {
    max-width: 300px;
    padding-top: 5px;
    align-self: flex-start;
  }
  .header .header-inner .nav {
    align-self: flex-end;
  }
    /* .pre-booking-wrap .inner .discounts h3 {
      font-size: 350%;
    }
    .pre-booking-wrap .inner .discounts p {
      font-size: 180%;
    } */
    .plans .planwrap .planblock .contractspan {
      left:18%;
      right:18%;
      font-size:120%;
    }
    .plans .planwrap .options .contractspan {
      left: 22%;
      right: 22%;
    }
    .plans .planwrap .options .contractspan {
      font-size:120%;
    }
  　.start-wrap .mv-menu-wrap li img{
      width: 100%;
      }
  }
  @media (max-width: 1000px) {
    .inner {
      padding: 0 100px;
    }
    .common-ttl-h2 .ttl-txt .ttl-img {
      max-width: 45px;
      margin-left: 20px;
    }
    .tool-wrap .tool-wrap-item li {
      max-width: inherit;
      width: calc(100% / 3 - 10px);
    }
    .planboard .trial .ttlblock {
      padding: 30px 10px;
    }
    .planboard .business .ttlblock {
      padding: 30px 10px;
    }
    .planboard .standard .ttlblock {
      background-color: #FFDD1D;
      padding: 30px 10px;
    }
    .planboard .planprice, .planboard .plantools {
      padding: 30px 10px;
    }
    .plans .planwrap .planblock {
      padding-left:15px;
      padding-right:15px;
    }
    .plans .planwrap .planblock .planname {
      font-size: 200%;
    }
    .plans .planwrap .options .optiontext {
      font-size: 200%;
    }
    .plans .planwrap .planblock .planconts li .planttl {
      font-size:85%;
    }
    .plans .planwrap .planblock .planconts li .planprice {
      font-size:100%;
    }
    .pre-booking-wrap .inner .discounts .points {
      width: 150px;
      height: 150px;
      font-size:480%;
    }
    /* .pre-booking-wrap .inner .discounts h3 {
      font-size: 300%;
    }
    .pre-booking-wrap .inner .discounts p {
      font-size: 160%;
    } */
    .pre-booking-wrap .inner .discounts p.bigfonts {
      font-size: 800%;
    }
    .privacy-wrap .privacy-ttl::after {
      border-right: solid 4px rgb(0, 0, 0);
      border-top: solid 4px rgb(0, 0, 0);
      height: 25px;
      position: absolute;
      right: 10%;
      bottom: 30%;
      width: 25px;
    }
      .start-wrap .mv-menu-wrap li img{
          width: 100%;
      }
      .plans .planwrap .planblock .contractspan {
          left: 14%;
          right: 14%;
      }
      .mypage .mypage-wrap .inner {
        padding: 0 20px;
      }
      .mypage .mypage-list {
        margin-right: 20px;
      }
      .mypage .mypage-list-wrap li a {
        padding: 15px 10px;
        font-size: 18px;
      }
      .mypage .mypage-list-wrap {
        width: 220px;
      }
  }

  @media (max-width: 930px) {
    .mypage .mypage-list {
      margin-right: 10px;
    }
    .mypage .mypage-contents .contract-tab-label {
      font-size: 18px;
      padding-left: 10px;
      padding-right: 10px;
      max-width: 250px;
      width: 100%;
      text-align: center;
  }
    .mypage .mypage-contents .contract-tab-switch:checked+.contract-tab-label {
      font-size: 18px;
    }
    .mypage .mypage-contents .plan-change-form .plan-list li {
      margin: 10px;
      width: 40%;
    }
  }
  @media (max-width: 860px) {
    .plan-wrap {
      padding: 120px 0px;
    }
    .plan-wrap .inner{
      padding: 0 50px;
    }
    .planboard .business .ttlblock {
      padding: 30px 5px;
    }
    /* .pre-booking-wrap .inner .discounts h3 {
      font-size: 250%;
    }
    .pre-booking-wrap .inner .discounts p {
      font-size: 140%;
    } */
    .pre-booking-wrap .inner .discounts p.bigfonts {
      font-size: 600%;
    }
    .mypage .mypage-wrap .inner {
      padding: 0 10px;
    }
    .mypage .mypage-wrap .inner {
      padding: 0 10px;
    }
    .mypage .mypage-contents .contract-tab-label {
      font-size: 18px;
      padding-left: 5px;
      padding-right: 5px;
      max-width: 235px;
  }
  }

  @media (max-width: 768px) {
  /* #heading {
    margin-top: 3rem;
  } */
  .header .header-inner {
    flex-direction: unset;
  }
  .header .header-inner h1 {
    align-self: unset;
  }
  .header .header-inner .nav {
    align-self: unset;
  }
  .header .header-inner .nav {
    display: none;
  }
  .header .header-inner {
      justify-content: flex-start;
  }
  .header .header-inner h1 {
      max-width: 300px
  }
  .header .header-inner .nav-sp {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      color: #fff;
      background-color: #e25000;
      text-align: center;
      width: 100%;
      height: 100vh;
      opacity: 0;
      transition: opacity .3s ease, visibility .3s ease;
      align-items: center;
      display: none;
  }
  .header .header-inner .nav-sp ul {
      margin: 100px auto 0;
      padding: 0;
      width: 100%;
  }
  .header .header-inner .nav-sp ul li {
      list-style-type: none;
      padding: 0;
      width: 100%;
      transition: .4s all;
  }
  .header .header-inner .nav-sp ul li:last-of-type {
      padding-bottom: 0;
  }
  .header .header-inner .nav-sp ul li:hover {
      background: #ddd;
  }
  .header .header-inner .nav-sp ul li a {
      display: block;
      color: #fff;
      padding: .8em 0;
      text-decoration: none;
      margin-top: 2px;
      font-size: 18px;
      font-weight: bold;
  }
  .header .header-inner .nav-sp.active {
      opacity: 1;
      display: block;
  }
  .menu-btn {
      display: block;
      position: fixed;
      z-index: 3;
      right: 30px;
      top: 30px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      text-align: center;
  }
  .menu-btn span {
      display: block;
      position: absolute;
      width: 30px;
      height: 4px;
      left: 6px;
      background: #fff;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
  }
  .menu-btn span:nth-of-type(1) {
      top: 10px;
  }
  .menu-btn span:nth-of-type(2) {
      top: 20px;
  }
  .menu-btn span:nth-of-type(3) {
      top: 30px;
  }
  .menu-btn.active span:nth-child(1) {
      top: 16px;
      left: 6px;
      background: #fff;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  .menu-btn.active span:nth-child(2), .menu-btn.active span:nth-child(3) {
      top: 16px;
      background: #fff;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  h1 {
    font-size: 1.3rem;
  }
  h1.top-ttl {
      font-size: 1.5em;
  }
  .only-pc{
    display:none;
  }
  .only-sp{
    display:block;
  }
  .smart-ttl {
      font-size: 18px;
  }
  .inner {
    padding: 0 50px;
  }
  .sub-ttl-txt {
    padding-top: 0;
    font-size: 18px;
  }
  .start-wrap {
    padding: 80px 0px 60px;
  }
  .start-wrap h2 {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .start-wrap .mv-menu-wrap li {
    margin: 0 5px 0 5px;
  }
  .start-period {
    max-width: 550px;
    padding: 10px;
  }
  .start-period p {
    font-size: 30px;
  }
  .start-period p span {
    font-size: 22px;
  }
  .start p.textbox {
      padding: 30px 15px;
  }
  .feature-wrap {
    padding: 80px 0 60px;
  }
  .feature-wrap {
    padding: 50px 0px 50px;
  }
  .common-ttl-h2 .ttl-txt .ttl-img {
    max-width: 40px;
    margin-left: 15px;
  }
  .feature-attention {
    font-size:80%;
  }
  .tool-wrap {
    background-color: #ffdd1c;
    padding: 80px 0 60px;
  }
  .tool-wrap .tool-wrap-item {
    padding: 20px 20px;
  }
  .tool-wrap .dotbg {
    right:-15px;
  }
  .tool-wrap .tool-wrap-item li.ttl p {
    font-size: 150%;
  }
  .advantages-wrap {
      padding: 50px 0;
  }
  .advantages-wrap ul.merit-lists {
      margin-top: 60px;
  }
  .planboard {
    margin: 40px auto 20px;
  }
  .planboard h3 {
    font-size:26px;
  }
  .plan-wrap {
    padding: 80px 0px;
  }
  .planboard {
    flex-direction: column;
  }
  .planboard .trial, .planboard .standard, .planboard .business{
    width: 100%;
    margin-bottom: 50px;
  }
  .planboard .business{
    margin-bottom: 0;
  }
  .planboard .trial .ttlblock {
    padding: 20px 10px;
  }
  .planboard .ttlblock p.subttl {
    font-size: 25px;
  }
  .planboard .ttlblock p.ttl {
    font-size: 40px;
  }
  .planboard .planprice p.subs {
    font-size: 40px
  }.planboard .planprice p.price {
    font-size: 70px;
  }
  .planboard .plantools .subs {
    font-size: 25px;
  }
  .planboard .plantools .toolnum {
    font-size: 70px;
  }
  .plans .planwrap {
    width: 90%;
    margin: 0 auto 50px;
  }
  .plans .planwrap .planblock {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 50px;
  }
  .plans .planwrap .options {
    margin-top:5px;
  }
  .plan-guideline .smpttl {
      margin-top: 0px;
  }
  .pre-booking-wrap {
    padding: 80px 15px 60px;
    }
  .pre-booking-wrap .inner .discounts {
    padding-left:10px;
    padding-right:10px;
  }
  .pre-booking-wrap .inner .discounts .points {
    width: 130px;
    height: 130px;
    font-size:400%;
  }
  .pre-booking-wrap .inner .discounts .taleft{
    text-align: left;
  }
  /* .pre-booking-wrap .inner .discounts h3 {
    font-size: 250%;
  }
  .pre-booking-wrap .inner .discounts p {
    font-size: 130%;
  } */
  .pre-booking-wrap .inner .discounts p.infos {
    font-size: 180%;
  }
  .pre-booking-wrap .inner .discounts p.bigfonts {
    font-size: 620%;
  }
  .pre-booking-wrap .inner .discounts p span.marker {
    padding: 0;
    display: initial;
  }
  .contact-wrap {
   padding: 80px 15px 60px;
  }
  .company-wrap {
    padding: 80px 15px 60px;
   }
  .company-wrap {
    padding: 80px 15px 60px;
   }
   .privacy-wrap {
    padding: 80px 15px 70px;
  }
  .privacy-wrap .privacy-contents {
    padding: 80px 0;
  }
  .plans .planwrap .planblock .planconts li .planprice {
    font-size: 130%;
  }
  .plans .links {
    margin: 0 auto 30px;
  }
  .privacy-wrap .privacy-contents dt {
    padding-top: 50px;
    padding-bottom: 20px;
  }
  .plan-guideline .plansample .samplettl {
      text-align: left;
  }
  .plan-guideline .plansample .sampletxt {
      padding: 35px 20px 35px;
  }
  .ytb-wrap{
      padding: 50px 0;
  }
  .faq-wrap {
      padding: 80px 0;
  }
  /* .faq .common-ttl-h2 img {
      width: 80%;
  } */
  .faq-tab-wrap {
      margin: 50px 0 0;
  }
  .faq-tab-switch:checked+.faq-tab-label+.faq-tab-content {
      padding: 30px;
  }
  .faq-tab-wrap .Label::before {
      top: calc( 70%);
  }
  .mypage .mypage-contents .progressbar .item {
      font-size: 11px;
      line-height: 1.4;
      padding: 10px 0;
  }
  .mypage .mypage-contents .progressbar .item:not(:last-child)::before,
  .mypage .mypage-contents .progressbar .item:not(:last-child)::after {
      border-width: 25px;
      border-left-width: 12px;
  }
  .mypage .mypage-wrap {
    padding: 30px 0;
  }
  .mypage .mypage-wrap-item {
    flex-direction: column;
  }
  .mypage .mypage-list {
    margin-right: 0;
  } 
  .mypage .mypage-list-wrap {
    width: 100%;
    margin-bottom: 30px;
  }
  .mypage .mypage-list-wrap li a {
    padding: 10px;
    border: none;
    border-bottom: 1px solid rgba(204,200,196,.8);
    font-size: 18px;
  }
  .mypage .mypage-contents .order-wrap h2 {
    font-size: 20px;
  }
  .progressbar {
    margin-bottom: 30px;
  }
  .mypage .mypage-contents .order-wrap .order-wrap-item {
    padding: 20px 0;
    position: relative;
  }
  .mypage .mypage-contents .contract-form {
    padding-top: 20px;
  }
  .mypage .mypage-contents .contract-form > div dt {
    font-size: 16px;
    width: 30%;
  }
  .mypage .mypage-contents .contract-form > div {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .mypage .mypage-contents .order-btn {
    margin-top: 20px !important;
    max-width: 200px;
    margin: 10px auto;
  }
  .mypage .mypage-contents .order-btn .btn{
    font-size: 16px;
    width: 100%;
    padding: 15px 10px;
  }
  .mypage .mypage-contents .order-wrap .order-wrap-item {
    padding-bottom: 0;
  }
  .mypage .mypage-contents .order-wrap .order-plan p {
    text-align: left;
    padding: 15px 5px 0;
    padding-top: 5px;
    font-size: 16px;
  }
  .mypage .mypage-contents .order-wrap .order-form .formgroup {
    padding: 20px 10px;
  }
  .mypage .mypage-contents .order-wrap .order-form dt {
    padding: 10px 5px;
    color: #333;
    font-size: 16px;
  }
  .mypage .mypage-contents .newsletter-cancel-form {
    padding-top: 20px;
  }
  .mypage .mypage-contents .category-ttl h3 {
    margin-bottom: 5px;
    padding-bottom: 5px;
    font-size: 16px;
  }
  .mypage .mypage-contents .order-wrap .order-wrap-category {
    margin-bottom: 20px;
  }
  .mypage .mypage-contents .newsletter-cancel-form .newsletter-wrap-category p {
    font-size: 16px;
    padding: 10px;
  }
  .mypage .mypage-contents .order-wrap .order-tool ul {
    padding: 10px 5px 10px 0;
  }
  .mypage .mypage-contents .order-wrap .order-tool ul li label {
    font-size: 16px;
    padding: 5px 10px;
  } 
  .mypage .mypage-contents .subsc-delete-form {
    padding-top: 20px;
  }
  .mypage .mypage-contents .subsc-delete-form .delete-checkbox {
    margin: 20px auto;
    padding: 15px 10px;
  }
  .mypage .mypage-contents .subsc-delete-form .delete-checkbox li label {
    font-size: 16px;
  }
  .mypage .mypage-contents .order-wrap .order-form dt {
    padding: 5px 5px;
    font-size: 16px;
  }
  .mypage .mypage-contents .order-wrap .order-form dd input[type="text"], input[type="tel"], input[type="email"] {
    padding: 10px 15px;
    font-size: 16px;
  }
  .strat-flow .strat-flow-wrap {
    padding: 30px 0 50px;
  }
  .strat-flow .strat-flow-wrap h2 {
    font-size: 20px;
    padding: 0 10px;
  }
  .strat-flow .strat-flow-item ul > li dl dt {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .strat-flow .strat-flow-item ul > li .flow-num {
    width: 50px;
  }
  .order-flow .order-flow-wrap {
    padding: 0 0 50px;
  }
  .order-flow .order-flow-wrap h2 {
    font-size: 20px;
  }
  .order-flow-item {
    margin: 20px auto;
  }
  .order-flow-item ul > li dl dt {
    font-size: 18px;
  }
  }

  @media (max-width: 750px) {
    .only-750pc{
      display:none;
    }
    .only-750sp{
      display:block;
    }
  }

  @media (max-width: 685px) {
    .feature-wrap .feature-wrap-item li {
      max-width: inherit;
      width: calc(100% / 2 - 10px);
    }
    .feature-wrap .feature-wrap-item li h3 {
      margin-top: 10px;
    }
    .feature-wrap .feature-wrap-item li > p {
      margin-top: 10px;
      text-align: left;
    }
    .tool-wrap .tool-wrap-item li {
      max-width: inherit;
      width: calc(100% / 2 - 10px);
    }
    .tool-wrap .dotbg {
      bottom: -15px;
      /* right: -21px; */
      right:-10px;
    }
    .advantages-wrap ul.merit-lists {
      margin-top: 20px;
      flex-direction: column;
    }
    .advantages-wrap ul.merit-lists li{
      margin-bottom: 20px;
      width: 100%;
    }
    .advantages-wrap ul.merit-lists li .adv-merit-txt{
      padding: 15px;
    }
    .advantages-wrap ul.merit-lists li:last-child{
      margin-bottom: 0;
    }
    .subtexts {
      text-align: left;
    }
    /* .pre-booking-wrap .inner .discounts h3 {
      font-size: 200%;
    }
    .pre-booking-wrap .inner .discounts p {
      font-size: 100%;
    } */
    .pre-booking-wrap .inner .discounts p.infos {
      margin-top: 30px;
    }
  .faq-tab-wrap {
      margin: 20px 0 0;
  }
    .faq-tab-switch:checked+.faq-tab-label+.faq-tab-content {
      padding: 20px 15px;
    }
    .faq-tab-wrap .Label {
      padding: 10px;
      padding-right: 0;
      font-size: 18px;
    }
    .faq-tab-wrap .Label span {
      color: #e25003;
      padding: 7px 14px;
      margin-right: 10px;
      font-size: 20px;
    }
      .faq-tab-wrap .toggle:checked + .Label + .content {
          padding: 10px;
      }
      .faq-tab-wrap .content {
          height: 0;
          margin-bottom: 10px;
          padding: 0 20px;
          overflow: hidden;
          font-size: 18px;
      }
    .banner-wrap {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
      .banner-wrap li {
          width: 100%;
      }
  }

  @media (max-width: 580px) {
    .inner {
      padding: 0 25px;
    }
    .header .header-inner {
      padding: 10px 15px;
    }
      .header .header-inner h1 {
      max-width: 300px
      }
      .menu-btn {
      right: 15px;
      }
    .start-wrap {
      padding: 50px 0px 30px;
    }
    .start-period {
      max-width: 400px;
    }
    .start-period p {
      font-size: 25px;
      line-height: 1.6;
    }
    .start-period p span {
      font-size: 18px;
    }
    .start p.textbox {
      text-align: left;
    }
    .only-minsp{
      display: block;
    }
    .only-minpc{
      display: none;
    }
    .common-ttl-h2 .ttl-txt .ttl-img {
      max-width: 35px;
      margin-left: 12px;
    }
    .common-ttl-h2 .icon-left {
      max-width: 35px;
      margin-right: 10px;
    }
    .common-ttl-h2 .icon-right {
      margin-left: 10px;
      max-width: 30px;
    }
    .feature-wrap .feature-wrap-item {
      margin-top: 30px;
    }
    .ytb-wrap-item li {
      width: calc(100% / 2 - 20px);
    }
    .tool-wrap {
      padding: 50px 0 50px;
    }
    .tool-wrap .dubble {
      margin: 20px auto 0;
  }
    .tool-wrap .tool-wrap-item {
      padding: 20px 10px;
    }
    .tool-wrap .tool-wrap-item li {
      width: calc(100% / 2 - 0px);
    }
    p.tool-attention {
      margin: 30px auto 0;
    }
    .adv-subttl {
      margin: 20px auto;
      max-width: unset;
      width: 100%;
    }
    .adv-txt {
      margin-bottom: 20px;
    }
    .planboard h3 {
      /* font-size:25px; */
      font-size:20px;
    }
    .planboard .ttlblock p.ttl {
      font-size: 40px;
    }
    .planboard .planprice p.subs {
      font-size: 35px;
    }
    .planboard .planprice p.price {
      font-size: 70px;
    }
    .planboard .plantools .toolnum {
      font-size: 70px;
    }
    .subtexts {
      margin: 10px auto 50px;
    }
    .plans .planwrap:last-child {
      margin: 0 auto 20px;
    }
    .plan-wrap {
      padding: 50px 0 50px;
    }
    .plan-wrap .inner {
      padding: 0 25px;
    }
    .plans .planwrap .planblock .contractspan {
      left:10%;
      right:10%;
    }
    .plans .planwrap .planblock .subtext {
      font-size:110%;
    }
    .plans .planwrap .planblock .planname,
    .plans .planwrap .options .optiontext {
      font-size:180%;
    }
    .plans .planwrap .planblock .planconts {
      flex-wrap:wrap;
    }
    .plans .planwrap .planblock .planconts li {
      width:95%;
      margin:0 auto;
    }
    .plans .planwrap .planblock .planconts li .planttl {
      background-color: #7082CC;
      color: #fff;
    }
    .plans .planwrap .options .contractspan {
      left:20%;
      right:20%;
    }
    .plan-guideline .plansample {
      width: 90%;
      max-width: 1000px;
      margin: 20px auto 20px;
    }
    .plans .links a {
      padding: 10px;
      font-size: 170%;
    }
    .plan-guideline .plansample .sampletxt {
      padding: 25px 15px 25px;
      text-align: left;
      font-size: 18px;
    }
    .plan-guideline .plansample .sampletxt span {
      color: #D02608;
      font-size: 25px;
    }
    .plan-guideline .guidelinetxt {
      padding-top: 0px;
      font-size: 18px;
    }
    .faq-wrap {
      padding: 50px 0;
    }
    .pre-booking-wrap .inner .discounts .points {
      width: 100px;
      height: 100px;
      font-size:300%;
      top:-50px;
      left:-20px;
    }
    /* .pre-booking-wrap .inner .discounts h3 {
      font-size: 160%;
    }
    .pre-booking-wrap .inner .discounts p {
      font-size: 75%;
    } */
    .pre-booking-wrap .inner .discounts p.bigfonts {
      font-size: 500%;
    }
    .pre-booking-wrap {
      padding: 50px 0 50px;
      }
    .booking-attention {
      font-size: 100%;
    }
    .contact-wrap {
      padding: 50px 10px 50px;
    }
    .feature-wrap .common-ttl-h2 .ttl-txt {
      line-height: 1.1;
      display: block;
    }
    .feature-wrap .common-ttl-h2 .ttl-txt-6{
      padding-left: 10px;
      padding-bottom: 4px;
      display: contents;
    }
    .contact-wrap p.links a {
      padding: 10px;
      font-size: 170%;
      line-height: 1.6;
    }
    .contact-wrap p.times {
      text-align: left;
      font-size: 100%;
      margin-top: 10px;
    }
    .company-wrap {
      padding: 50px 0 50px;
    }
    .company-wrap .company-address {
      margin-top: 30px;
    }
    .company-wrap .company-link {
      padding-top: 30px;
    }
    .company-wrap .company-link {
      padding-top: 20px;
    }
    .company-wrap .company-link > div {
      flex-direction: column;
      margin-bottom: 10px;
    }
    .company-wrap .company-sns {
      padding-top: 20px;
    }
    .privacy-wrap {
      padding: 50px 0 50px;
    }
    .privacy-wrap .privacy-ttl::after {
      border-right: solid 3px rgb(0, 0, 0);
      border-top: solid 3px rgb(0, 0, 0);    height: 18px;
      position: absolute;
      right: 13%;
      bottom: 36%;
      width: 18px;
    }
    .company-wrap .company-searvice {
      flex-wrap: wrap;
      max-width: 480px;
      width: 100%;
    }
    .company-wrap .company-searvice li {
      max-width: 120px;
      margin: 5px;
    }
    .privacy-wrap .privacy-contents {
      padding: 50px 0;
    }
    .privacy-wrap .privacy-contents .common-ttl-h3 {
      padding-bottom: 10px;
      font-size: 16px;
    }
    .privacy-wrap .privacy-contents .privacy-txt {
      font-size: 15px;
    }
    .privacy-wrap .privacy-contents dt {
      padding-top: 30px;
      padding-bottom: 10px;
      font-size: 16px;
    }
    .privacy-wrap .privacy-contents dd {
      font-size: 15px;
    }
      /* .faq .common-ttl-h2 img {
          width: 45%;
      } */
      .only-sp580{
        display: block;
    }
    .mypage .mypage-contents .contract-tab-label {
      font-size: 16px;
      padding-left: 5px;
      padding-right: 5px;
      max-width: 160px;
      line-height: 1.3;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 7px;
  }
    .mypage .mypage-contents .contract-tab-switch:checked+.contract-tab-label {
      font-size: 16px;
    }
  }

  @media (max-width: 500px) {
    .common-ttl-h2 .ttl-txt {
      text-align: center;
  }
    .start-wrap p.textbox {
      font-size: 18px;
      text-align: left;
    }
    .common-ttl-h2 .ttl-txt .ttl-img {
      max-width: 28px;
        margin-left: 10px;
    }
    .start-period {
      max-width: 350px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox {
      width:150px;
      height:150px;
      display:flex;
      justify-content:center;
      align-items:center;
      background-color:#FFF5BC;
      line-height:1;
      border-radius:50%;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size1 {
      object-fit: scale-down;
      height:80px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size2 {
      object-fit: scale-down;
      height:80px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size3 {
      object-fit: scale-down;
      width:90px;
    }
    .planboard .trial .ttlblock {
      padding: 20px 10px;
    }
    .planboard .ttlblock p.subttl {
      font-size: 18px;
    }
    .planboard .ttlblock p.ttl {
      font-size: 35px;
    }
    .planboard .planprice, .planboard .plantools {
      padding: 20px 10px;
    }
    .planboard .planprice p.subs {
      font-size: 30px;
    }
    .planboard .planprice p.price {
      font-size: 70px;
    }
    .planboard .plantools .subs {
      font-size: 20px;
    }
    .planboard .plantools .toolnum {
      font-size: 70px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox {
      width:130px;
      height:130px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size1 {
      height:65px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size2 {
      height:70px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size3 {
      width:80px;
    }
    .pre-booking-wrap .inner .discounts h3 {
      font-size: 140%;
    }
    .pre-booking-wrap .inner .discounts p {
      font-size: 18px;
      text-align: left;
    }
    .pre-booking-wrap .inner .discounts p span.marker {
      padding:0;
      display: initial;
    }
    .pre-booking-wrap .inner .discounts p.infos {
      text-align: center;
      margin-top: 20px;
    }
    .pre-booking-wrap .inner .discounts p.bigfonts {
      font-size: 400%;
      text-align: center;
      margin: 20px auto 10px;
    }
    .booking-attention {
      font-size: 90%;
    }
    .contact-wrap p.links a {
      padding: 10px 10px;
      font-size: 25px;
      line-height: 1.6;
    }
    .contact-wrap p.times {
      font-size: 16px;
      text-align: left;
      margin-top: 10px;
    }
    .company-wrap .company-searvice li {
      max-width: 90px;
    }
    .privacy-wrap {
      padding: 30px 0 30px;
    }
    .privacy-wrap .privacy-ttl::after {
      border-right: solid 3px rgb(0, 0, 0);
      border-top: solid 3px rgb(0, 0, 0);
      height: 15px;
      position: absolute;
      right: 0%;
      bottom: 36%;
      width: 15px;
    }
    .privacy-wrap .privacy-contents {
      padding-bottom: 0;
    }
    .cs-wrap .inner{
      padding-left: 0;
      padding-right: 0;
    }
    .user .user-wrap {
      padding: 20px 0;
    }
    .user .user-wrap .inner{
      padding: 0 10px;
    }
    .current-status .cs-wrap-item .item-breadcrumb {
      font-size: 12px;
    }
    .current-status .cs-wrap .item-loggingin p {
      font-size: 12px;
    }
    .user .user-wrap dl dt .user-pic {
      width: 65%;
      margin: 0 auto;
    }
    .user .user-wrap dl dd {
      margin-left: 0;
      font-size: 16px;
      line-height: 1.6;
    }
    .user .user-wrap dl dd .user-name {
      font-size: 16px;
    }
    .user .user-wrap dl dd .user-id {
      font-size: 14px;
    }
    .mypage .mypage-wrap {
      padding: 15px 0;
    }
    .mypage .mypage-list-wrap {
      margin-bottom: 15px;
    }
    .mypage .mypage-list-wrap li a {
      font-size: 16px;
    }
    .progressbar {
      margin-bottom: 15px;
    }
    .mypage .mypage-contents .order-wrap h2 {
      font-size: 18px;
    }
    .mypage .mypage-contents .plan-change-form .plan-list {
      margin-top: 20px;
    }
    .change-attention {
      padding-top: 20px;
      text-align: left;
    }
    .mypage .mypage-contents .plan-request-form {
      padding-top: 20px;
    }
    .mypage .mypage-contents .plan-request-form p {
      text-align: left;
    }
    .mypage .mypage-contents .category-ttl h3 {
      margin-bottom: 5px;
      padding-bottom: 5px;
      font-size: 18px;
    }
    .mypage .mypage-contents .order-wrap .order-wrap-category {
      margin-bottom: 20px;
    }
    .mypage .mypage-contents .order-wrap .order-tool ul li label {
      font-size: 16px;
    }
    .mypage .mypage-contents #inputFile {
      padding: 150px 0 50px;
      margin-bottom: 10px;
    }
    .mypage .mypage-contents #dropArea {
      padding: 50px 0 0;
    }
    .mypage .mypage-contents #btnInputFile, .mypage .mypage-contents #btnChangeFile {
      width: 250px;
    }
    .mypage .mypage-contents #btnInputFile span, .mypage .mypage-contents #btnChangeFile span {
      display: table-cell;
      width: 150px;
      height: 70px;
      font-size: 16px;
    }
  }

  @media (max-width: 400px) {
    .header .header-inner h1 {
      max-width: 200px
    }
    .feature-wrap .feature-wrap-item li h3 {
      text-align: left;
    }
    .planboard .ttlblock p.ttl {
      font-size: 30px;
    }
    .planboard .planprice p.price {
      font-size: 50px;
    }
    .planboard .plantools .toolnum {
      font-size: 50px;
    }
    .only-400pc{
      display:none;
    }
    .only-400sp{
      display:block;
    }
    .tool-wrap .tool-wrap-item li p.imgbox {
      width:120px;
      height:120px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size1 {
      height:55px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size2 {
      height:60px;
    }
    .tool-wrap .tool-wrap-item li p.imgbox img.size3 {
      width:70px;
    }
    .pre-booking-wrap .inner .discounts h3 {
      line-height: 1.4;
    }
    .pre-booking-wrap .inner .discounts p.infos {
      font-size: 165%;
    }
    .pre-booking-wrap .inner .discounts p.bigfonts {
      font-size: 300%;
    }
    .pre-booking-wrap .inner .discounts .points {
      width: 90px;
      height: 90px;
      font-size: 280%;
    }
  }