@charset "UTF-8";
/* =========================================================================
 foundationレイヤー
========================================================================= */
/* =========================================================================
   image-path
========================================================================= */
/* =========================================================================
   font-size
========================================================================= */
/* =========================================================================
   font-family
========================================================================= */
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
@import url(//fonts.googleapis.com/css?family=Oswald:500,600,700);
/* =========================================================================
   color - default
========================================================================= */
@import url("//fonts.googleapis.com/css?family=Ubuntu:400,700");
@import url("//fonts.googleapis.com/earlyaccess/notosansjapanese.css");
/* =========================================================================
   color - project
========================================================================= */
@-ms-viewport {
  width: device-width; }
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar; }

*,
*::before,
*::after {
  box-sizing: inherit; }

* {
  box-sizing: inherit;
  line-height: 1.5; }

#wrap {
  background-image: none; }

#header_outer {
  margin-bottom: 0; }

#contents {
  width: auto;
  padding: 0; }

#sub {
  display: none; }

#breadcrumbs {
  float: none;
  width: 900px;
  margin: 0 auto; }

#footer, #ftMenu {
  display: none; }

#addMenu {
  display: none; }

main {
  box-sizing: border-box;
  clear: both;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #000; }
  @media (max-width: 767px) {
    main {
      margin-bottom: 4rem; } }
  main h1, main h2, main h3, main h4, main h5, main h6 {
    font-weight: bold;
    font-feature-settings: "palt";
    letter-spacing: 0; }
  main em {
    font-style: normal; }
  main p {
    margin: 0; }
  main ol, main ul {
    list-style: none;
    list-style-type: none; }
  main img {
    max-width: 100%;
    width: auto;
    vertical-align: bottom; }

div, th, td, p, ul, ol, dl, dt, dd, img, form, h1, h2, h3, h4, h5, hr {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  word-break: normal; }

input, textarea {
  margin: 0;
  padding: 1px 2px;
  font-size: 100%; }

table {
  border-collapse: collapse;
  font-size: 100%; }

th, td {
  border-collapse: collapse; }

ul {
  list-style-type: none; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  line-height: 120%;
  word-wrap: break-word; }

/* ===== 基本設定 ===== */
/* 基本リンク色 */
a:link {
  color: #333; }

a:visited {
  color: #333; }

a:hover {
  color: #333; }

a:active {
  color: #333; }

/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

/*\*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/**/
.last {
  margin: 0; }

/* =========================================================================
   Projectレイヤー
========================================================================= */
.u-mt-9 {
  margin-top: 5rem !important; }
  @media (max-width: 767px) {
    .u-mt-9 {
      margin-top: 1rem !important; } }

/* main
=================================== */
.hero {
  margin-bottom: 2rem;
  text-align: center;
  background-color: #0055A2;
  background: url(/contents/autobox/out_images/hero_bg.png) 0 0 repeat-x; }
  @media (max-width: 959px) {
    .hero {
      margin-bottom: 1rem; } }
  @media (max-width: 575px) {
    .hero img {
      width: 100%; } }

.autoBox {
  text-align: center; }
  .autoBox h1 img {
    width: auto;
    margin-bottom: 1rem; }
    @media (max-width: 575px) {
      .autoBox h1 img {
        width: 100%; } }
  .autoBox__about {
    margin-bottom: 2rem;
    background: -moz-linear-gradient(top, #D9F3FF, #FFF);
    background: -webkit-linear-gradient(top, #D9F3FF, #FFF);
    background: linear-gradient(to bottom, #D9F3FF, #FFF); }
    .autoBox__about img {
      width: 100%; }
    .autoBox__about__title {
      padding: 1rem .5rem .5rem;
      background-color: #0055A2;
      color: #fff;
      font-size: 1.5rem;
      text-align: center;
      margin-bottom: 2rem; }
      @media (max-width: 575px) {
        .autoBox__about__title {
          font-size: 1rem; } }
      .autoBox__about__title span {
        color: #FFD804;
        font-size: 2.375rem; }
        @media (max-width: 575px) {
          .autoBox__about__title span {
            font-size: 1.25rem; } }
      .autoBox__about__title br {
        line-height: 1.3; }
    .autoBox__about__subTitle {
      color: #0055A2;
      font-size: 1.75rem;
      text-align: center;
      font-weight: bold;
      margin-bottom: 1rem; }
      @media (max-width: 575px) {
        .autoBox__about__subTitle {
          font-size: 1.5rem; } }
      .autoBox__about__subTitle span {
        background: linear-gradient(transparent 70%, #FFD804 70%); }
    .autoBox__about__lead {
      color: #0055A2;
      font-size: 1.3125rem;
      text-align: center;
      font-weight: bold;
      margin-bottom: 2rem; }
      @media (max-width: 575px) {
        .autoBox__about__lead {
          font-size: 1rem; } }
      .autoBox__about__lead em {
        font-size: 1.875rem; }
        @media (max-width: 575px) {
          .autoBox__about__lead em {
            font-size: 1.25rem; } }
    .autoBox__about__img {
      padding: 0 3rem 2rem; }
    @media (max-width: 575px) {
      .autoBox__about__step {
        padding: 0 1.5rem; } }
  .autoBox__detail {
    padding: 3rem 0;
    background: #fffae4; }
    @media (max-width: 575px) {
      .autoBox__detail {
        padding-top: 1.5rem; } }
    .autoBox__detail h2 {
      margin-bottom: 2rem;
      font-size: 2.25rem;
      text-align: center;
      color: #FF0000; }
      @media (max-width: 575px) {
        .autoBox__detail h2 {
          margin-bottom: 1rem;
          font-size: 1.25rem; } }
    .autoBox__detail h3 {
      width: 60%;
      padding: 1rem 2rem .5rem;
      margin: 0 20%;
      display: inline-block;
      color: #fff;
      font-size: 2.25rem;
      text-align: center;
      background: #FF0000;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem; }
      @media (max-width: 959px) {
        .autoBox__detail h3 {
          width: 70%;
          margin: 0 15%;
          font-size: 1.875rem; } }
      @media (max-width: 767px) {
        .autoBox__detail h3 {
          font-size: 1.5rem; } }
      @media (max-width: 575px) {
        .autoBox__detail h3 {
          width: 80%;
          font-size: 1.125rem;
          padding: .7rem 0 .5rem;
          margin: 0 10%; } }
    .autoBox__detail__example {
      position: relative;
      margin-bottom: 6rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media (max-width: 575px) {
        .autoBox__detail__example {
          margin-bottom: 4rem; } }
      .autoBox__detail__example:after {
        content: "";
        position: absolute;
        left: calc( 50% - 4rem);
        bottom: -4rem;
        border-top: 2.2rem solid #FF0000;
        border-right: 4rem solid transparent;
        border-left: 4rem solid transparent; }
        @media (max-width: 575px) {
          .autoBox__detail__example:after {
            left: calc( 50% - 3rem);
            bottom: -3rem;
            border-top: 1.5rem solid #FF0000;
            border-right: 3rem solid transparent;
            border-left: 3rem solid transparent; } }
      .autoBox__detail__example li {
        width: 48%;
        overflow: hidden;
        text-align: center;
        background: #fff;
        border-radius: 1rem; }
        @media (max-width: 575px) {
          .autoBox__detail__example li {
            width: 49%; } }
        .autoBox__detail__example li p {
          padding: 1rem;
          color: #fff;
          font-size: 1.3125rem;
          font-weight: bolder;
          text-align: center;
          background: #0055A2; }
          @media (max-width: 575px) {
            .autoBox__detail__example li p {
              padding: .5rem 0;
              font-size: 0.75rem; } }
    .autoBox__detail__support {
      overflow: hidden;
      text-align: center;
      background: #fff;
      border: 2px solid #FF0000;
      border-bottom-width: 10px;
      border-radius: 1rem; }
      @media (max-width: 575px) {
        .autoBox__detail__support img {
          width: 100%; } }
      .autoBox__detail__support__img {
        margin: 1.5rem; }
      .autoBox__detail__support p {
        margin: 0 2rem;
        font-size: 1.125rem;
        font-weight: bolder;
        text-align: left; }
        @media (max-width: 575px) {
          .autoBox__detail__support p {
            margin: 0 1rem;
            font-size: 0.875rem;
            margin-bottom: 1rem; } }
  .autoBox__course {
    padding: 1.5rem 0 0; }
    @media (max-width: 575px) {
      .autoBox__course {
        padding-bottom: 1rem; } }
    .autoBox__course__ttl {
      padding: 1rem .5rem .75rem;
      margin: 0 auto 1.5rem;
      color: #FF0000;
      font-size: 1.75rem;
      text-align: center;
      border-radius: 4rem;
      background: #FFD804; }
      @media (max-width: 575px) {
        .autoBox__course__ttl {
          font-size: 1rem; } }
    .autoBox__course__block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 .25rem;
      margin-bottom: .5rem; }
      @media (max-width: 767px) {
        .autoBox__course__block {
          display: block; } }
      .autoBox__course__block h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        min-height: 74px;
        padding: .5rem;
        margin-bottom: .5rem;
        color: #fff;
        font-size: 1.25rem;
        text-align: center;
        background: #0055A2;
        line-height: 1.2; }
        @media (max-width: 959px) {
          .autoBox__course__block h3 {
            flex-grow: 1;
            font-size: 1rem; } }
        @media (max-width: 767px) {
          .autoBox__course__block h3 {
            flex-grow: 0;
            min-height: 0; } }
        @media (max-width: 575px) {
          .autoBox__course__block h3 {
            font-size: 1rem; } }
        .autoBox__course__block h3 * {
          line-height: 1; }
      .autoBox__course__block__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%; }
        @media (max-width: 767px) {
          .autoBox__course__block__body {
            -ms-flex-wrap: wrap;
            flex-wrap: wrap; } }
    .autoBox__course__box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: 100%;
      border: 1px solid #ddd;
      padding: .5rem;
      margin: 0 .25rem .5rem; }
      @media (max-width: 767px) {
        .autoBox__course__box {
          max-width: 100%;
          margin: 0 .25rem 1rem; } }
      .autoBox__course__box h4 {
        margin-bottom: .5rem;
        font-size: 1.125rem;
        line-height: 1.2; }
        @media (max-width: 959px) {
          .autoBox__course__box h4 {
            flex-basis: 58px;
            font-size: 1rem; } }
      .autoBox__course__box__head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        @media (max-width: 767px) {
          .autoBox__course__box__head {
            display: block; } }
        .autoBox__course__box__head > :last-child {
          margin-top: auto; }
      @media (max-width: 959px) {
        .autoBox__course__box__foot {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; } }
      @media (max-width: 767px) {
        .autoBox__course__box__foot {
          display: block;
          height: auto; } }
    .autoBox__course__txt {
      flex-grow: 2;
      margin-bottom: 1rem; }
      @media (max-width: 959px) {
        .autoBox__course__txt {
          flex-grow: 0; } }
    .autoBox__course__img {
      text-align: center;
      margin-bottom: 1rem;
      padding-top: 1rem; }
    .autoBox__course__volume {
      margin-bottom: .5rem; }
    .autoBox__course__badge {
      margin-bottom: .25rem; }
      .autoBox__course__badge__shipping {
        display: inline-block;
        padding: 0 .5rem;
        margin-right: .5rem;
        margin-bottom: .25rem;
        border: solid #F10000 1px;
        border-radius: 1rem;
        color: #F10000;
        font-size: 0.875rem;
        font-weight: bold; }
      .autoBox__course__badge__discount {
        display: inline-block;
        border-radius: 1rem;
        background: #FF0000;
        padding: 0 .5rem;
        margin-bottom: .25rem;
        color: #fff;
        font-size: 0.875rem;
        font-weight: bold; }
    .autoBox__course__price {
      text-align: right;
      font-weight: 500; }
      .autoBox__course__price[data-type="sale"] {
        color: #E60012; }
      .autoBox__course__price span {
        font-family: 'Open Sans';
        font-size: 2rem;
        font-weight: bold; }
  .autoBox__note {
    padding: 2rem 0;
    margin-bottom: 2rem;
    background: #F5F5F5; }
    @media (max-width: 767px) {
      .autoBox__note {
        padding: 1rem 0;
        margin-bottom: 1rem; } }
    .autoBox__note h2 {
      padding: 1.5rem 1rem;
      font-size: 1.5rem;
      color: #fff;
      text-align: center;
      background: #FF0000; }
      @media (max-width: 575px) {
        .autoBox__note h2 {
          padding: 1rem 0;
          font-size: 0.875rem; } }
    .autoBox__note__box {
      padding: 2rem;
      border: 2px solid #CCC;
      background: #fff; }
      @media (max-width: 575px) {
        .autoBox__note__box {
          height: 14rem;
          padding: 1rem;
          font-size: 0.75rem;
          overflow-y: scroll; } }
      .autoBox__note__box h4 {
        margin-top: 2rem;
        margin-bottom: .2rem; }
        @media (max-width: 575px) {
          .autoBox__note__box h4 {
            margin-top: 1rem; } }
      .autoBox__note__box > h4:first-of-type {
        margin-top: .5rem; }
      .autoBox__note__box .apology {
        color: #FF0000; }
    .autoBox__note__caution {
      margin-top: 1rem;
      color: #FF0000;
      font-weight: bolder;
      text-align: center;
      font-size: 0.875rem; }
  .autoBox__subscription {
    /* grayout 20190125 */
    /* grayout 20190125 */ }
    .autoBox__subscription__btnBox {
      padding: 0 2rem;
      margin-bottom: 5rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media (max-width: 959px) {
        .autoBox__subscription__btnBox {
          padding: 0;
          font-size: 1rem; } }
    .autoBox__subscription__btn {
      width: 49%;
      position: relative;
      margin-bottom: 2rem; }
      @media (max-width: 575px) {
        .autoBox__subscription__btn {
          width: 100%;
          margin-bottom: 1rem; } }
      .autoBox__subscription__btn .amb {
        padding-left: 2rem; }
        .autoBox__subscription__btn .amb:before {
          position: absolute;
          top: 1.8rem;
          left: 1rem; }
          @media (max-width: 959px) {
            .autoBox__subscription__btn .amb:before {
              top: 1.5rem;
              left: .5rem; } }
          @media (max-width: 575px) {
            .autoBox__subscription__btn .amb:before {
              top: 1.2rem;
              left: .3rem; } }
    .autoBox__subscription__btn_wide {
      width: 100%; }
    .autoBox__subscription__lead {
      font-size: 1.75rem;
      font-weight: bold;
      color: #FF0000;
      text-align: center;
      margin-bottom: 3rem; }
      @media (max-width: 575px) {
        .autoBox__subscription__lead {
          font-size: 1rem; } }
      .autoBox__subscription__lead span {
        background: linear-gradient(transparent 70%, #FFD804 70%); }
    .autoBox__subscription h3 {
      margin-bottom: 2rem;
      text-align: center; }
    .autoBox__subscription h4 {
      margin-bottom: 1rem;
      font-size: 1.5rem;
      text-align: center; }
      @media (max-width: 575px) {
        .autoBox__subscription h4 {
          margin-bottom: .5rem;
          font-size: 1rem; } }
    .autoBox__subscription .c-btn[data-type*="middle"] {
      padding: .7rem 1.5rem .5rem 1rem;
      max-width: 100%;
      font-size: 1.25rem;
      background-position: right .5rem center; }
      @media (max-width: 959px) {
        .autoBox__subscription .c-btn[data-type*="middle"] {
          font-size: 1rem; } }
      @media (max-width: 575px) {
        .autoBox__subscription .c-btn[data-type*="middle"] {
          font-size: 0.875rem; } }
    .autoBox__subscription .c-btn[data-type*="large"] {
      padding: 1.3rem 1.5rem 1.4rem;
      max-width: 100%; }
      @media (max-width: 959px) {
        .autoBox__subscription .c-btn[data-type*="large"] {
          font-size: 1.25rem; } }
      @media (max-width: 575px) {
        .autoBox__subscription .c-btn[data-type*="large"] {
          padding: .7rem 1.5rem .5rem 1rem;
          font-size: 0.875rem; } }
    .autoBox__subscription .c-container {
      position: relative; }
      .autoBox__subscription .c-container .mask {
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;
        align-items: center;
        color: #fff; }
        .autoBox__subscription .c-container .mask p {
          width: 100%;
          font-size: 1.125rem;
          font-weight: bolder; }
  .autoBox__pay {
    padding: 2rem 0;
    background: #fffae4; }
    .autoBox__pay__title {
      position: relative;
      width: 95%;
      padding: 1rem 1rem 1rem 8rem;
      margin: 0 0 1rem 5%;
      background: #fff;
      border: 1px solid #FF0000;
      border-radius: 4rem; }
      @media (max-width: 767px) {
        .autoBox__pay__title {
          padding: 1rem 1rem 1rem 6rem; } }
      @media (max-width: 575px) {
        .autoBox__pay__title {
          width: 100%;
          padding: .5rem .5rem .5rem 3.8rem;
          margin: 0 0 1.5rem 0; } }
      .autoBox__pay__title:before {
        content: "";
        width: 10rem;
        height: 10rem;
        position: absolute;
        top: -1.5rem;
        left: -4rem;
        background: url(/contents/autobox/out_images/subscription_txt.png) center center no-repeat;
        background-size: contain; }
        @media (max-width: 959px) {
          .autoBox__pay__title:before {
            width: 8rem;
            height: 8rem;
            left: -2rem; } }
        @media (max-width: 575px) {
          .autoBox__pay__title:before {
            width: 5rem;
            height: 5rem;
            top: -1rem;
            left: -1rem; } }
      .autoBox__pay__title h2 {
        font-size: 2.25rem;
        color: #FF0000; }
        @media (max-width: 959px) {
          .autoBox__pay__title h2 {
            font-size: 1.5rem; } }
        @media (max-width: 575px) {
          .autoBox__pay__title h2 {
            font-size: 1rem; } }
      .autoBox__pay__title p {
        font-size: 1.125rem;
        font-weight: bolder; }
        @media (max-width: 959px) {
          .autoBox__pay__title p {
            font-size: 1rem; } }
        @media (max-width: 575px) {
          .autoBox__pay__title p {
            font-size: .6875rem; } }
    .autoBox__pay__detail {
      padding: 1.5rem;
      position: relative;
      background: #fff;
      border-radius: 1rem; }
      .autoBox__pay__detail img {
        width: auto; }
        @media (min-width: 768px) {
          .autoBox__pay__detail img {
            width: 100%;
            padding: 0px; } }
    .autoBox__pay__lead {
      margin-bottom: 1rem;
      font-size: 0.875rem;
      font-weight: bolder; }
      @media (min-width: 768px) {
        .autoBox__pay__lead {
          width: 62%;
          position: absolute;
          top: 1rem;
          right: 1.5rem; } }
      @media (min-width: 960px) {
        .autoBox__pay__lead {
          top: 3rem;
          font-size: 1rem; } }
  .autoBox__faq__title {
    padding: 1rem .5rem;
    font-size: 1.75rem;
    text-align: center;
    color: #fff;
    background-color: #0055A2;
    margin-bottom: 2rem; }
  .autoBox__faq__box {
    margin-bottom: 5rem; }
  .autoBox__faq__boxHead {
    display: flex;
    align-items: center;
    padding-right: 3rem;
    border: 1px solid #E5E5E5;
    background: url(/contents/autobox/out_images/ico_plus.png) no-repeat right 1rem center/1.5rem; }
    .autoBox__faq__boxHead:before {
      content: url(/contents/autobox/out_images/ico_q.png);
      padding: 1rem 1.2rem .75rem;
      margin-right: 1rem;
      background-color: #0055A2; }
    .autoBox__faq__boxHead.is-active {
      background-image: url(/contents/autobox/out_images/ico_minus.png); }
  .autoBox__faq__boxBody {
    display: flex;
    align-items: center;
    padding: .5rem 1rem .5rem 0; }
    .autoBox__faq__boxBody:before {
      content: url(/contents/autobox/out_images/ico_a.png);
      padding: 1.5rem 1.4rem 1rem;
      margin-right: 1rem; }
      @media (max-width: 575px) {
        .autoBox__faq__boxBody:before {
          margin-right: .5rem; } }

.btnAnker {
  padding: 2rem;
  text-align: center; }
  @media (max-width: 575px) {
    .btnAnker {
      padding: 1rem; } }

.c-btn[data-type*="down"] {
  background-image: url(/contents/autobox/out_images/arrow_down.png);
  background-size: 1rem; }

/* owabi
=================================== */
.apologize {
  background: #fff;
  border: solid #FF0000 2px;
  padding: 1rem;
  margin-bottom: 2rem; }
  @media (max-width: 767px) {
    .apologize {
      margin-bottom: .5rem; } }
  .apologize h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: bolder; }
  .apologize p {
    margin-bottom: .75rem; }
  .apologize strong {
    color: #FF0000;
    text-decoration: underline;
    pointer-events: none; }

.gray_out {
  position: relative;
  display: inline-block;
  pointer-events: none; }
  .gray_out:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px; }

/*# sourceMappingURL=style.css.map */