@charset "UTF-8";

:root {
  --main-color1: #B50081;
  --main-color2: #F86ACF;
  --main-color3: #F9F0F3;
  --sub-color: #D13F93;
  --mono-tone1: #F0F0F0;
  --mono-tone2: #676767;
  --mono-tone3: #707070;
  --sub-color2: #FFF8CA;
  --obi-color: #85a928;
  --obi-color-light: #428F36;
}

* {
  box-sizing: border-box;
}

/* BASE =====================================================*/
@media screen and (min-width: 641px) {
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 16px;
    line-height: 1.5em;
  }

  a img:hover,
  a img:active,
  a:hover,
  a:active {
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    opacity: 0.8;
  }

  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    image-rendering: -webkit-optimize-contrast;
  }

  h1 {
    margin: 0;
  }

  /* header =====================================================*/
  #header {
    padding-top: 121px;
  }

  #header.end {
    padding-top: 0;
  }

  #header-inner {
    width: 1024px;
    margin: 0 auto;
  }

  /* #contents =====================================================*/
  .section {
    width: 100%;
    margin: 0 auto;
  }

  .section-inner {
    width: 800px;
    margin-bottom: 80px;
  }

  .outline-box {
    width: 800px;
    margin: 0 auto 80px;
  }

  .outline-box h3 {
    margin: 0 auto 15px;
    color: #fff;
    font-size: 24px;
    line-height: 2.2em;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    background: url(../../../../aeonapp/campaign/mybasket_maruha/img/h3_bg_2410.jpg);
    background-position: center;
  }

  .outline-box h4 {
    margin: 0 auto 15px;
    color: #fff;
    font-size: 24px;
    line-height: 2.2em;
    text-align: center;
    background-color: #b60081;
    border-radius: 4px;
  }

  .outline-box h4 img {
    display: block;
    width: 440px;
    margin: 0 auto;
  }

  .outline-box p {
    font-size: 20px;
    line-height: 1.7em;
    text-align: left;
  }

  .outline-box p em {
    color: #b50081;
    font-weight: bold;
    font-style: normal;
  }

  .outline-box.is01 {
    margin-top: 80px;
  }

  .outline-box.is02 p {
    width: fit-content;
    margin: 0 auto;
    font-size: 30px;
    font-weight: bold;
  }

  .outline-box.is02 span {
    font-size: 1.6rem;
    text-align: center;
    display: block;
  }

  .outline-box.is03 p {
    text-align: center;
  }

  .list {
    width: 100%;
    margin: 0 auto;
  }

  .list02 li {
    font-size: 20px;
    line-height: 1.7em;
    text-indent: -1em;
    padding-left: 1.1em;
  }

  .list li {
    font-size: 20px;
    line-height: 1.7em;
    padding-left: 1em;
    text-indent: -1em;
  }
  .outline-box.is09 .list li {
    padding-left: 0;
    text-indent: 0;
  }

  ul.download {
    width: 492px;
    margin: 0 auto;
  }

  ul.download:after {
    content: "";
    display: block;
    clear: both;
  }

  ul.download li {
    width: 214px;
    float: left;
  }

  ul.download li:last-child {
    width: 266px;
    float: right;
  }

  ul.download li a {
    display: block;
  }

  .txt-bold {
    font-weight: bold;
    padding-top: 0.6em;
  }

  .txt-boldred {
    font-weight: bold;
    color: red;
  }

  .download01 {
    display: flex;
    width: 546px;
    margin: 0 auto;
    -moz-column-gap: 30px;
    column-gap: 30px;
    margin-bottom: 20px;
    justify-content: space-evenly;
  }

  .outline-box a {
    word-break: break-all;
  }

  /* #outline =====================================================*/
  #contact-box a {
    color: #b80061;
    text-decoration: underline;
  }

  #contact-box a:hover {
    text-decoration: none;
  }

  #contact-box .pc.isTel {
    display: inline !important;
  }

  .section h2 {
    margin: 0 auto 20px;
    text-align: center;
    font-size: 28px;
    color: #b50081;
  }

  /* #banner =====================================================*/
  .banner {
    padding-top: 80px;
    padding-bottom: 60px;
  }

  /* #detail =====================================================*/
  #detail p {
    width: 380px;
    margin: 0 auto;
  }

  #detail p a {
    display: block;
  }

  #detail p:after {
    content: "";
    display: block;
    padding-top: 60px;
  }

  /* parts =====================================================*/
  .footblank {
    margin-left: 0.5rem;
    width: 1.6rem;
    vertical-align: middle;
  }

  #js-button img {
    width: 56px;
    height: 56px;
  }

  a[href^="tel:"] {
    pointer-events: none;
  }

  .color-red {
    color: #b50081;
  }

  .contactList {
    display: flex;
    align-items: flex-start;
    font-size: 13px;
  }

  .contactList>dt {
    font-size: 16px;
    flex-shrink: 0;
    padding: 1em;
    border: 1px solid #231815;
  }

  .contactList>dd {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 0 1.2em;
  }

  .contactList>dd .tel {
    font-size: 16px;
    line-height: 1.6;
  }

  .mb-8 {
    margin-bottom: 8px;
  }

  .mb-16 {
    margin-bottom: 16px;
  }

  .mb-24 {
    width: fit-content;
  }

  .mb-24 li {
    font-size: 16px;
  }

  .font-red {
    color: rgb(255, 45, 45);
  }

  .font-underline {
    text-decoration: underline;
  }

  .end_text p {
    font-size: 20px;
  }

  .pc {
    display: block;
  }

  .sp {
    display: none;
  }
}

@media screen and (max-width: 640px) {

  /* BASE =====================================================*/
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 16px;
    line-height: 1.6em;
  }

  a img:hover,
  a img:active,
  a:hover,
  a:active {
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    opacity: 0.8;
  }

  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    image-rendering: -webkit-optimize-contrast;
    margin-bottom: 5%;
  }

  h1 {
    margin: 0;
  }

  /* header =====================================================*/
  #header {
    padding-top: 17.467vw;
    margin-bottom: 4.534%;
  }

  #header.end {
    padding-top: 0;
  }

  #header-inner {
    width: 100%;
  }

  /* #contents =====================================================*/
  .section {
    width: 100%;
  }

  .section-inner {
    width: 100%;
    margin-bottom: 25px;
  }

  .outline-box {
    width: 90%;
    margin: 0 auto 40px;
  }

  .outline-box h3 {
    margin: 0 auto 5.195%;
    font-size: 18px;
    line-height: 2em;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    letter-spacing: 0.1em;
    background: url(../../../../aeonapp/campaign/mybasket_maruha/img/h3_bg_2410.jpg);
  }

  .outline-box h4 {
    margin: 0 auto 5.195%;
    color: #FFF;
    font-size: 18px;
    line-height: 2em;
    text-align: center;
    background-color: #b60081;
    border-radius: 4px;
  }

  .outline-box a {
    word-break: break-all;
  }

  .outline-box.is01 {
    margin-top: 40px;
  }

  .outline-box.is02 p {
    width: fit-content;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
  }

  .outline-box.is02 span {
    font-size: 80%;
    text-align: center;
    display: block;
    margin-top: 10px;
    line-height: 1.25;
  }
  
  .outline-box.is09 .list li {
    padding-left: 0;
    text-indent: 0;
  }

  .list {
    width: 100%;
    margin: 0 auto;
  }

  .list02 li {
    font-size: 16px;
    line-height: 1.5em;
    text-indent: -1em;
    padding-left: 1.1em;
    padding-bottom: 0.6em;
  }

  .list li {
    font-size: 1.6rem;
    line-height: 1.5em;
    padding-left: 1em;
    text-indent: -1em;
  }

  ul.download {
    width: 82.134%;
    margin: 0 auto;
  }

  ul.download:after {
    content: "";
    display: block;
    clear: both;
  }

  ul.download li {
    width: 43.507%;
    float: left;
  }

  ul.download li:last-child {
    width: 54.221%;
    float: right;
  }

  ul.download li a {
    display: block;
  }

  .txt-bold {
    font-weight: bold;
    line-height: 1.5em;
    padding-top: 0.5em;
  }

  .txt-boldred {
    font-weight: bold;
    color: red;
  }

  .download01 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    -moz-column-gap: 20px;
    column-gap: 20px;
    padding-bottom: 20px;
  }

  .tex_16 {
    font-size: 16px;
    line-height: 1.5em;
  }

  .outline-box01 h3 {
    margin-bottom: 5.195%;
  }

  /* #outline =====================================================*/
  #contact-box a {
    color: #b60081;
    text-decoration: underline;
  }

  .outline-box a {
    color: #b60081;
    text-decoration: underline;
  }

  .section h2 {
    margin: 0 auto 5%;
    text-align: center;
    font-size: 16px;
    color: #b50081;
  }

  /* #detail ================
  /* #banner =====================================================*/
  .banner {
    padding: 1em 0;
  }

  /*=====================================*/
  #detail p {
    width: 70.668%;
    margin: 0 auto;
  }

  #detail p a {
    display: block;
  }

  #detail p:after {
    content: "";
    display: block;
    padding-top: 5%;
  }

  /* parts =====================================================*/
  .footblank {
    margin-left: 0.5rem;
    width: 1.6rem !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }

  #js-button img {
    width: 44px;
    height: 44px;
  }

  .color-red {
    color: #b50081;
  }

  .contactList {
    display: flex;
    align-items: flex-start;
    font-size: 13px;
  }

  .contactList>dt {
    font-size: 10px;
    flex-shrink: 0;
    padding: 1em;
    border: 1px solid #231815;
  }

  .contactList>dd {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 0 1.5em;
  }

  .contactList>dd .tel {
    font-size: 16px;
    line-height: 1.6;
  }

  .section h2.appdownload_text {
    font-size: 18px;
  }

  .mb-8 {
    margin-bottom: 8px;
  }

  .mb-16 {
    margin-bottom: 16px;
  }

  .mb-24 {
    margin-bottom: 24px;
  }

  .font-red {
    color: rgb(255, 45, 45);
  }

  .font-underline {
    text-decoration: underline;
  }

  a[href^="tel:"] {
    pointer-events: auto;
    padding-left: 1em;
  }

  a.sp[href^="tel:"] {
    padding-left: 2em;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

/* 共通CSS  */
sup {
  vertical-align: super !important;
  font-size: 50% !important;
}