@charset "UTF-8";
/* CSS Document */
@media (max-device-width: 768px) {
  a,
  input,
  select,
  textarea,
  button,
  a object,
  a > span,
  a img,
  *:before,
  *:after,
  button span {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /*-----header-----*/
  #header {
    width: 100%;
    height: auto;
    background: #0e3962;
  }
  header .head-logo {
    width: 38%;
    height: auto;
    margin: 0 auto 0 0;
    padding: 2% 0 1%;
  }

  /*-----共通-----*/
  .inner {
    width: 94%;
    margin: 0 auto;
    /*background:#52BC70;*/
  }

  /*-----top-----*/
  .top-img {
    width: 100%;
    min-width: 100%;
    height: auto;
    margin: 0 auto;
    background: url(../img/sp/sp_main_img.jpg) no-repeat;
    background-size: contain;
    position: relative;
  }
  h2.top {
    width: 41%;
    height: auto;
    margin: 0 auto 0 31%;
    padding-top: 6.5%;
    padding-bottom: 7%;
    /*background: #F68183;*/
    float: none;
  }
  .main-link {
    width: 23%;
    margin: 0 auto 0 1%;
    float: none;
    position: absolute;
    top: 6.5%;
    right: 3.5%;
  }
  .main-link a:hover img {
    opacity: 1;
  }

  .privilege {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 1%;
    padding-bottom: 1%;
    float: none;
  }
  .member {
    background: url(../img/sp/sp_member_bg.jpg) repeat;
  }
  .friends {
    background: url(../img/sp/sp_friends_bg.jpg) repeat;
  }
  .privilege_box {
    width: 98%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 2%;
    border: 1px solid #ffffff;
    border-radius: 8px;
    position: static;
  }
  .privilege_box h4 {
    width: 65%;
    height: auto;
    /*margin: 4% auto 1% 5%;*/
    /*float: left;*/
    margin: 0 auto 4%;
  }
  .privilege_box img.picL {
    width: 25%;
    height: auto;
    /*margin: 5% 0 0 2%;*/
    /*float: left;*/
    /*background: #9FC7E0;*/
    margin: 2% auto;
  }
  .privilege_box img.picR {
    width: 25%;
    height: auto;
    /*margin: 6% 2% 0 auto;*/
    /*float: right;*/
    /*background: #9FC7E0;*/
    margin: 2% auto;
  }
  .privilege_box .text {
    width: 98%;
    height: auto;
    text-align: center;
    /*float: left;*/
    /*background: #9C9C9C;*/
    margin: 2% auto 0;
  }
  .member-t {
    /*margin: 2% auto 6% 0;*/
    /*font-size: 4.5vw;*/
    line-height: 1.5;
    color: #333333;
    margin: 2% auto 3%;
  }
  .member-t p.copy {
    margin: 0 auto 10px;
    font-size: 4.5vw;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
  }
  .member-t span.strong {
    display: inline;
    font-size: 4.5vw;
    font-weight: bold;
    line-height: 1.4;
    color: #cf1739;
    text-shadow: 1px 0px 0px #fff, 0px 1px 0px #fff, -1px 0px 0px #fff,
      0px -1px 0px #fff;
  }
  .member-t span.text-narrow {
    display: inline-block;
    font-size: 3.5vw;
    transform: scale(0.92, 1);
    transform-origin: top left;
    margin-right: -2%;
  }
  .member-t span.space1 {
    margin-left: 1.1rem;
  }
  .member-t span.space2 {
    margin-left: 0.1rem;
  }

  .member-t ul {
    width: 100%;
    margin: 0 auto 3%;
  }
  .member-t ul li {
    width: 100%;
    margin: 0 auto 0;
    font-size: 4vw;
    font-weight: bold;
    letter-spacing: 1px;
  }

  .friends-t {
    /*margin: 2% auto 4% 2%;*/
    font-size: 3.8vw;
    letter-spacing: 3;
    color: #fff;
    margin: 2% auto 0;
    padding-bottom: 3%;
  }
  .friends-t span {
    font-size: 5vw;
    font-weight: bold;
    line-height: 1.5;
    color: #fabe00;
    letter-spacing: 4;
  }

  /*-----ご紹介方法-----*/
  .introduction {
    width: 100%;
    min-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 5%;
    background: #faf0f2;
  }
  .introduction h2 {
    width: 100%;
    height: auto;
    margin: 0 auto 40px;
    padding: 10% 0px 10%;
    font-size: 6vw;
    text-align: center;
    color: #0e3962;
    vertical-align: middle;
    border-bottom: 3px solid #0e3962;
    background: #fff;
  }
  .introduction h2 img {
    width: 7%;
    height: auto;
    margin-right: 4%;
    vertical-align: middle;
  }
  p.step_arrow {
    width: 10%;
    margin: 5% auto;
  }
  .introduction table {
    width: 96%;
    height: auto;
    margin: 2% auto;
    padding: 4% 0;
    background: rgba(255, 255, 255, 0.7);
    border-collapse: collapse;
    text-align: left;
    line-height: 1.5;
    border-radius: 10px;
  }
  .introduction table th {
    width: 18%;
    height: auto;
    padding-top: 8.4%;
    font-size: 3.2vw;
    font-weight: bold;
    text-align: center;
    color: #fff;
    vertical-align: top;
    background: url(../img/sp/sp_step_bg.png) no-repeat;
    background-size: 80%;
    background-position: 45% 3.5vw;
  }
  .introduction table th span {
    font-size: 4vw;
    line-height: 1;
  }

  .introduction table td {
    width: 82%;
    padding: 5% 2% 5%;
    font-size: 4vw;
    line-height: 1.5;
    text-align: left;
    vertical-align: middle;
  }
  .introduction table td p {
    margin-bottom: 2%;
    font-size: 4.5vw;
    font-weight: bold;
    text-align: left;
    color: #cf1739;
  }

  /*-----注釈-----*/
  .caution {
    width: 100%;
    min-width: 100%;
    height: auto;
    margin: 10% auto 0;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    /*background: #85CCE0;*/
  }
  .caution-inner {
    width: 90%;
    height: auto;
    margin: 10% auto 0;
    font-size: 4vw;
    line-height: 1.7em;
    text-align: left;
    color: #43464b;
    /*background: #ECE7B5;*/
  }
  span.red {
    color: #cf1739;
  }
  p.btn580 {
    width: 100%;
    height: auto;
    margin: 7% auto 0;
    padding-bottom: 15%;
  }
  .form-btn {
    width: 100%;
    height: auto;
    margin: 0 auto 2%;
    padding: 3.5% 0;
    font-size: 1.2em;
    font-weight: normal;
    color: #fff;
    text-align: center;
    border-radius: 30px; /* CSS3草案 */
    -webkit-border-radius: 30px; /* Safari,Google Chrome用 */
    -moz-border-radius: 30px; /* Firefox用 */
    position: relative;
    display: inline-block;
    background-size: 1% 1.5%;
    background: url(../img/icon_arrow_right--white.png) no-repeat;
    right: 0;
    top: 50%;
    opacity: 1;
    background: #ce1739;
  }
  .form-btn::after {
    content: "";
    display: block;
    width: 5%;
    height: 6%;
    background-size: 5% 6%;
    width: 0.7rem;
    height: 1.1rem;
    background-size: 0.7rem 1.1rem;
    position: absolute;
    right: 3%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0.5;
  }

  .form-btn:hover::after {
    right: 3%;
    opacity: 1;
  }

  /*-----使い方提案-----*/
  .suggest {
    width: 100%;
    min-width: 100%;
    height: auto;
    padding-bottom: 20%;
  }
  .suggest h2 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 10% 0px 10%;
    font-size: 6vw;
    text-align: center;
    color: #0e3962;
    vertical-align: middle;
    border-bottom: 3px solid #0e3962;
    background: #fff;
  }
  .suggest h2 img {
    width: 7%;
    height: auto;
    margin-right: 4%;
    vertical-align: middle;
  }
  .suggest p.txt {
    width: 90%;
    margin: 10% auto 7%;
    font-size: 4.5vw;
    text-align: center;
    color: #333333;
  }
  p.plan1 {
    width: 96%;
    margin: 10% auto 4%;
    font-size: 4.5vw;
    font-weight: bold;
    color: #0aa5dd;
    text-align: left;
  }
  p.plan2 {
    width: 96%;
    margin: 10% auto 4%;
    font-size: 4.5vw;
    font-weight: bold;
    color: #79c708;
    text-align: left;
  }
  p.plan3 {
    width: 96%;
    margin: 10% auto 4%;
    font-size: 4.5vw;
    font-weight: bold;
    color: #708de9;
    text-align: left;
  }
  /*img.plan{ width: 100%; height: auto; margin: 0 auto;}	*/
  p.plan1 {
    width: 50%;
    margin: 10% auto 4%;
  }
  p.plan2 {
    width: 50%;
    margin: 10% auto 4%;
  }
  p.plan3 {
    width: 50%;
    margin: 10% auto 4%;
  }

  article.p-article-scene--color1 {
    background: #c8e6f0;
  }
  article.p-article-scene--color2 {
    background: #eff7e0;
  }
  article.p-article-scene--color7 {
    /*background: #ebf2fc;*/
    background: #f7e7e4;
  }
  article.p-article-scene__layout,
  .p-article-scene__layout__tr,
  .p-article-scene__layout__td {
    display: block;
    vertical-align: bottom;
  }

  /*img部分*/
  .p-article-scene__pict {
    width: auto;
  }
  .p-article-scene__pict__inner {
    padding: 20px 20px 10px 20px;
  }

  /*text部分*/
  .p-article-scene__detail {
    width: auto;
  }
  .p-article-scene__detail__inner {
    padding: 0 20px 20px 20px;
    text-align: center;
  }

  /*タイトル部分*/
  .p-article-scene__title {
    font-size: 24px;
    font-size: 2.4rem;
    text-align: center;
  }
  span.u-txtBreak--sp {
    display: block !important;
  }
  span.p-article-scene__title__tax {
    font-size: 12px;
    font-size: 1.2rem;
  }

  /*リード部分*/
  .p-article-scene__lead {
    font-size: 12px;
    font-size: 1.2rem;
    padding: 0.6em 0 1em 0;
  }

  /*価格部分*/
  .p-article-scene__value,
  .p-article-scene__value__tr,
  .p-article-scene__value__td {
    display: block;
    width: auto;
    vertical-align: bottom;
  }

  /*価格部分左*/
  .p-article-scene--plan .p-article-scene__value__td {
    padding: 1em;
  }
  .p-article-scene__value__td--fee {
  }
  .p-article-scene__value__type2 li:nth-child(1),
  .p-article-scene__value__type2 li:nth-child(2) {
    margin-bottom: 0;
  }

  ul.sns__list > li {
    font-size: 9px;
    font-size: 0.9rem;
  }
  span.p-article-scene--plan .p-article-scene__value__txt {
    line-height: 1.32;
  }
  span.p-article-scene__value__txt {
    font-size: 10px;
    font-size: 1rem;
  }
  span.p-article-scene__value__txt--val {
    padding-top: 0;
  }
  span.p-article-scene__value__txt > strong {
    font-size: 18px;
    font-weight: bold;
  }
  span.p-article-scene__value__txt > small {
    font-size: 12px;
    font-size: 1.2rem;
  }

  /*価格部分 = */
  .p-article-scene__value__td--equal.type2 {
    width: auto;
  }
  .p-article-scene__value__td--equal {
    width: auto;
    font-size: 18px;
    font-size: 1.8rem;
    padding: 0.2em 0;
    text-align: center;
  }
  .p-article-scene--plan .p-article-scene__value__td {
    padding: 1em;
  }
  span.u-hidden--pc-tablet {
    display: block;
  }
  span.u-hidden--sp {
    display: none;
  }

  span.p-article-scene__title__value {
    display: inline;
  }

  /*車イメージ*/
  .imgbox {
    width: 100%;
    margin: 8% auto 0;
    background: #ffffff;
    border-radius: 5px;
  }
  .imgbox img.car1,
  .imgbox img.car2,
  .imgbox img.car3 {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .imgbox img.car1 {
    padding-bottom: 3%;
    padding-top: 3%;
  }
  .imgbox img.car2 {
    padding-bottom: 3%;
    padding-top: 3%;
  }
  .imgbox img.car3 {
    padding: 3%px 0;
  }

  /*-----フッター-----*/
  footer {
    width: 100%;
    padding-top: 10%;
    background: #fff;
    border-top: 1px solid #d9d9d9;
  }

  ul.footernavi {
    width: 90%;
    margin: 0 auto 10%;
  }
  ul.footernavi li {
    display: inline;
    float: left;
  }
  ul.footernavi li a,
  ul.footernavi li a:visited {
    color: #43464b;
  }
  ul.footernavi li.logo {
    width: 65%;
    height: auto;
    margin-left: 0;
    margin-right: 35%;
    margin-bottom: 3%;
    text-decoration: none;
    float: left;
  }
  ul.footernavi li.navi {
    margin-top: 2%;
    margin-right: 6%;
    font-size: 1.2em;
    color: #43464b;
    text-decoration: none;
  }

  .copyright {
    width: 100%;
    height: auto;
    padding: 20px 0;
    /* box-shadow */
    box-shadow: 0 0 1% 1% #dfdfdf;
    -moz-box-shadow: 0 0 1% 1% #dfdfdf;
    -webkit-box-shadow: 0 0 1% 1% #dfdfdf;
  }
  .copyright p {
    font-size: 1em;
    color: #43464b;
    text-align: right;
  }

  /* 20260113追加 */
  .notice {
    padding: 1.5rem 0;
  }
  .notice dt {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
  }
  .notice dd {
    font-size: 1.3rem;
  }
  .notice dd .note {
    font-size: 1.1rem;
  }
}