@charset "UTF-8";
/*!
Theme Name: sample02
Version: 1.0
*/
/**
 * mixins and functions
 * @version 1.0
 */
.fadeInDown {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  visibility: visible !important; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
/*!
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  font-family: "ヒラギノ角ゴ Std", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.6rem;
  color: #000;
  line-height: 1.8;
  letter-spacing: 0; }
  @media screen and (max-width: 750px) {
    body {
      font-size: 14px; } }

a {
  color: #222;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  a img:hover {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -ms-filter: alpha(opacity=75); }

img {
  max-width: 100%;
  height: auto;
  vertical-align: top; }

ul {
  list-style: none; }

/*
pc:pcのみ
tb:tbのみ
sp:spのみ
pctb:pcとtb
tbsp:tbとsp
*/
@media screen and (max-width: 750px) {
  .pc {
    display: none; }

  .tb {
    display: none; }

  .sp {
    display: block; }

  .pctb {
    display: none; }

  .tbsp {
    display: block; } }
@media screen and (min-width: 751px) and (max-width: 999px) {
  .pc {
    display: block; }

  .tb {
    display: block; }

  .sp {
    display: none; }

  .pctb {
    display: block; }

  .tbsp {
    display: block; } }
@media screen and (min-width: 1000px) {
  .pc {
    display: block; }

  .tb {
    display: none; }

  .sp {
    display: none; }

  .pctb {
    display: block; }

  .tbsp {
    display: none; } }
@media screen and (min-width: 1000px) {
  a[href^="tel:"] {
    pointer-events: none; } }
@-webkit-keyframes btnBar {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  25% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    background-color: #39b54a; }
  26% {
    background-color: transparent; }
  27% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  40% {
    background-color: #39b54a; }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@keyframes btnBar {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  25% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    background-color: #39b54a; }
  26% {
    background-color: transparent; }
  27% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  40% {
    background-color: #39b54a; }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
.wrapper {
  width: 100%; }
  @media screen and (min-width: 1000px) {
    .wrapper {
      padding-left: 15vw; } }
  @media screen and (min-width: 751px) and (max-width: 999px) {
    .wrapper {
      padding-top: 60px; } }
  @media screen and (max-width: 750px) {
    .wrapper {
      padding-top: 60px; } }

.smile {
  background-image: url(/_var/goo-n/campaign/sundrug2112/img/bg.png);
  background-size: cover;
  width: 100%;
  min-width: 1000px;
  padding-bottom: 90px;
  /*　mv　*/
  /*　キャンペーン概要　*/
  /*　プレゼント内容　*/
  /*　応募方法　*/
  /*　対象商品　*/
  /*　キャンペーン概要　*/ }
  @media screen and (max-width: 750px) {
    .smile {
      width: 100%;
      min-width: 100%;
      overflow-x: hidden; } }
  .smile .smile-box, .smile .lead, .smile .present, .smile .howto, .smile .goods, .smile .gaiyo {
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    width: 1000px;
    border: 8px solid #F3C543;
    position: relative; }
    @media screen and (max-width: 750px) {
      .smile .smile-box, .smile .lead, .smile .present, .smile .howto, .smile .goods, .smile .gaiyo {
        width: 100%;
        border: 6px solid #F3C543; } }
    .smile .smile-box:before, .smile .lead:before, .smile .present:before, .smile .howto:before, .smile .goods:before, .smile .gaiyo:before {
      content: '';
      display: inline-block;
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      border: 2px dashed #F0E12B;
      position: absolute;
      top: -5px;
      left: -5px;
      border-radius: 30px;
      z-index: 0; }
      @media screen and (max-width: 750px) {
        .smile .smile-box:before, .smile .lead:before, .smile .present:before, .smile .howto:before, .smile .goods:before, .smile .gaiyo:before {
          display: none; } }
    .smile .smile-box-inr {
      position: relative;
      z-index: 5; }
  .smile .smile-ttl, .smile .lead h2, .smile .present h2, .smile .howto h2, .smile .goods h2, .smile .gaiyo h2 {
    position: absolute;
    top: -50px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    @media screen and (max-width: 750px) {
      .smile .smile-ttl, .smile .lead h2, .smile .present h2, .smile .howto h2, .smile .goods h2, .smile .gaiyo h2 {
        top: -35px; } }
  .smile .header {
    margin: 0 auto;
    width: 1000px;
    padding: 50px 0 100px; }
    @media screen and (max-width: 750px) {
      .smile .header {
        width: 100%;
        padding: 40px 0 60px; }
        .smile .header img {
          width: 100%; } }
  .smile .lead {
    margin-bottom: 140px; }
    @media screen and (max-width: 750px) {
      .smile .lead {
        margin-bottom: 80px; } }
    .smile .lead .smile-box-inr {
      padding: 80px 20px 50px;
      text-align: center;
      z-index: 5; }
      @media screen and (max-width: 750px) {
        .smile .lead .smile-box-inr {
          padding: 40px 15px 30px 15px; } }
      @media screen and (max-width: 750px) {
        .smile .lead .smile-box-inr p {
          text-align: left; } }
    .smile .lead h2 {
      left: 50%; }
      @media screen and (max-width: 750px) {
        .smile .lead h2 {
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          top: -35px;
          width: 278px; } }
    .smile .lead .l-ttl02 {
      padding: 20px 0 30px; }
      @media screen and (max-width: 750px) {
        .smile .lead .l-ttl02 {
          padding: 20px 0 20px; } }
    .smile .lead .btn {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      max-width: 770px;
      margin: 40px auto 0; }
      @media screen and (max-width: 750px) {
        .smile .lead .btn {
          margin: 20px auto 0;
          display: block;
          width: 90%; } }
      @media screen and (max-width: 750px) {
        .smile .lead .btn li:nth-of-type(1) {
          margin: 0px auto 15px; } }
    .smile .lead--01 {
      position: absolute;
      top: -40px;
      left: 30px;
      z-index: 1; }
    .smile .lead--02 {
      position: absolute;
      top: -40px;
      right: -65px;
      z-index: 1; }
  .smile .present {
    margin-bottom: 130px; }
    @media screen and (max-width: 750px) {
      .smile .present {
        margin-bottom: 80px; } }
    .smile .present .smile-box-inr {
      padding: 90px 40px 40px 40px; }
      @media screen and (max-width: 750px) {
        .smile .present .smile-box-inr {
          padding: 70px 15px 30px 15px; } }
    .smile .present h2 {
      left: 40px;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
      @media screen and (max-width: 750px) {
        .smile .present h2 {
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          top: -35px;
          width: 278px; } }
    .smile .present-layout .l-item {
      border-radius: 26px; }
      .smile .present-layout .l-item:nth-of-type(1) {
        background-color: #FFEDED;
        border: 2px dotted #D83882;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
        padding: 20px; }
        @media screen and (max-width: 750px) {
          .smile .present-layout .l-item:nth-of-type(1) {
            padding: 50px 20px 20px 20px; } }
        .smile .present-layout .l-item:nth-of-type(1) .l-img {
          width: 38%; }
        .smile .present-layout .l-item:nth-of-type(1) .l-desc {
          width: 59%;
          position: relative;
          padding-top: 70px; }
        .smile .present-layout .l-item:nth-of-type(1) .l-voice {
          position: absolute;
          top: -10px;
          left: 43%; }
        .smile .present-layout .l-item:nth-of-type(1) .l-ttl {
          font-size: 25px;
          color: #D83882;
          padding-bottom: 20px;
          font-weight: bold; }
        @media screen and (max-width: 750px) {
          .smile .present-layout .l-item:nth-of-type(1) {
            display: block; }
            .smile .present-layout .l-item:nth-of-type(1) .l-img {
              width: 100%; }
              .smile .present-layout .l-item:nth-of-type(1) .l-img img {
                margin: 0 auto; }
            .smile .present-layout .l-item:nth-of-type(1) .l-desc {
              width: 100%;
              padding-top: 20px; }
            .smile .present-layout .l-item:nth-of-type(1) .l-voice {
              position: absolute;
              top: -20px;
              left: 25px;
              max-width: 175px; }
            .smile .present-layout .l-item:nth-of-type(1) .l-ttl {
              font-size: 17px;
              padding-bottom: 15px; } }
      .smile .present-layout .l-item:nth-of-type(2) {
        background-color: #FFFAEB;
        border: 2px dotted #2A9843;
        padding: 70px 30px 30px 30px;
        position: relative; }
        .smile .present-layout .l-item:nth-of-type(2) .l-voice {
          position: absolute;
          top: -50px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
        .smile .present-layout .l-item:nth-of-type(2) .l-box {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between; }
          .smile .present-layout .l-item:nth-of-type(2) .l-box li {
            width: calc(98% / 2); }
            @media screen and (max-width: 750px) {
              .smile .present-layout .l-item:nth-of-type(2) .l-box li:nth-of-type(2) {
                padding-top: 50px;
                position: relative; }
                .smile .present-layout .l-item:nth-of-type(2) .l-box li:nth-of-type(2):before {
                  content: '・・・・・・・・・・・・・・・・・・・・・';
                  display: inline-block;
                  color: #88BD43;
                  position: absolute;
                  top: 15px;
                  left: 50%;
                  -webkit-transform: translateX(-50%);
                          transform: translateX(-50%);
                  font-size: 12px; } }
        .smile .present-layout .l-item:nth-of-type(2) .box-ttl {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          padding-bottom: 15px; }
          .smile .present-layout .l-item:nth-of-type(2) .box-ttl .num {
            width: 40px; }
          .smile .present-layout .l-item:nth-of-type(2) .box-ttl .num-ttl {
            width: calc(100% - 40px);
            color: #88BD43;
            font-size: 20px;
            font-weight: bold;
            line-height: 1.5;
            letter-spacing: -0.02em; }
        .smile .present-layout .l-item:nth-of-type(2) .num-txt {
          padding-left: 40px; }
        .smile .present-layout .l-item:nth-of-type(2) .num-img {
          padding: 15px 0 0 40px;
          text-align: right; }
        .smile .present-layout .l-item:nth-of-type(2) .l-ttl {
          color: #E95F24;
          font-size: 32px;
          text-align: center;
          padding-bottom: 25px; }
        .smile .present-layout .l-item:nth-of-type(2) .l-img {
          padding-bottom: 15px; }
        @media screen and (max-width: 750px) {
          .smile .present-layout .l-item:nth-of-type(2) {
            padding: 50px 10px 30px 10px; }
            .smile .present-layout .l-item:nth-of-type(2) .l-voice {
              top: -20px;
              left: 25px;
              max-width: 175px;
              -webkit-transform: translateX(0);
                      transform: translateX(0); }
            .smile .present-layout .l-item:nth-of-type(2) .l-img {
              text-align: center; }
              .smile .present-layout .l-item:nth-of-type(2) .l-img img {
                margin: 0 auto; }
            .smile .present-layout .l-item:nth-of-type(2) .l-ttl {
              font-size: 20px;
              padding-bottom: 10px; }
            .smile .present-layout .l-item:nth-of-type(2) .l-desc {
              padding: 0 10px; }
            .smile .present-layout .l-item:nth-of-type(2) .l-box {
              display: block; }
              .smile .present-layout .l-item:nth-of-type(2) .l-box li {
                width: 100%; }
            .smile .present-layout .l-item:nth-of-type(2) .box-ttl .num {
              width: 40px; }
            .smile .present-layout .l-item:nth-of-type(2) .box-ttl .num-ttl {
              width: 100%;
              font-size: 17px;
              letter-spacing: 0; }
            .smile .present-layout .l-item:nth-of-type(2) .num-txt {
              padding-left: 0px; }
            .smile .present-layout .l-item:nth-of-type(2) .num-img {
              padding: 15px 0 0 0px;
              text-align: center; }
              .smile .present-layout .l-item:nth-of-type(2) .num-img img {
                margin: 0 auto; } }
      .smile .present-layout .l-item:nth-of-type(3) {
        background-color: #EBFBFF;
        border: 2px dotted #31A2D2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
        padding: 55px 50px 30px 50px; }
        .smile .present-layout .l-item:nth-of-type(3) .l-img {
          width: 38%; }
        .smile .present-layout .l-item:nth-of-type(3) .l-desc {
          width: 58%;
          position: relative; }
        .smile .present-layout .l-item:nth-of-type(3) .l-voice {
          position: absolute;
          top: -50px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
        .smile .present-layout .l-item:nth-of-type(3) .l-ttl {
          font-size: 27px;
          color: #31A2D2;
          padding-bottom: 20px; }
        .smile .present-layout .l-item:nth-of-type(3) .l-btm {
          font-size: 13px;
          padding-top: 30px; }
        @media screen and (max-width: 750px) {
          .smile .present-layout .l-item:nth-of-type(3) {
            padding: 55px 20px 30px 20px;
            display: block; }
            .smile .present-layout .l-item:nth-of-type(3) .l-img {
              width: 100%;
              text-align: center;
              padding-bottom: 20px; }
            .smile .present-layout .l-item:nth-of-type(3) .l-desc {
              width: 100%; }
            .smile .present-layout .l-item:nth-of-type(3) .l-voice {
              top: -20px;
              left: 25px;
              max-width: 175px;
              -webkit-transform: translateX(0);
                      transform: translateX(0); }
            .smile .present-layout .l-item:nth-of-type(3) .l-ttl {
              font-size: 17px; }
            .smile .present-layout .l-item:nth-of-type(3) .l-btm {
              font-size: 12px;
              padding-top: 10px; } }
      .smile .present-layout .l-item:nth-of-type(n + 2) {
        margin-top: 90px; }
        @media screen and (max-width: 750px) {
          .smile .present-layout .l-item:nth-of-type(n + 2) {
            margin-top: 60px; } }
  .smile .howto {
    margin-bottom: 125px; }
    @media screen and (max-width: 750px) {
      .smile .howto {
        margin-bottom: 80px; } }
    .smile .howto .smile-box-inr {
      padding: 85px 30px 60px 30px; }
      @media screen and (max-width: 750px) {
        .smile .howto .smile-box-inr {
          padding: 60px 15px 40px 15px; } }
    @media screen and (max-width: 750px) {
      .smile .howto h2 {
        width: 205px; } }
    .smile .howto h3 {
      text-align: center;
      padding-bottom: 30px; }
      .smile .howto h3 img {
        margin: 0 auto; }
        @media screen and (max-width: 750px) {
          .smile .howto h3 img {
            width: 80%; } }
    .smile .howto h4 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 30px;
      font-family: 'Zen Maru Gothic', sans-serif; }
      .smile .howto h4 span {
        display: inline-block; }
        .smile .howto h4 span:first-child {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-line-pack: center;
              align-content: center;
          width: 42px; }
        .smile .howto h4 span:nth-of-type(2) {
          width: calc(100% - 42px); }
      @media screen and (max-width: 750px) {
        .smile .howto h4 {
          font-size: 20px;
          padding-bottom: 10px; }
          .smile .howto h4 span:first-child {
            width: 39px; }
          .smile .howto h4 span:nth-of-type(2) {
            width: calc(100% - 39px); } }
    .smile .howto .howto-main-grid {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-top: 40px;
      color: #333333; }
      @media screen and (max-width: 750px) {
        .smile .howto .howto-main-grid {
          display: block;
          margin-top: 0; } }
      .smile .howto .howto-main-grid > li {
        width: 48%;
        border-radius: 26px;
        padding: 45px 20px; }
        .smile .howto .howto-main-grid > li#web {
          background-color: #FFFEEB;
          border: 2px dotted #E98624; }
          .smile .howto .howto-main-grid > li#web h4 {
            color: #E98624; }
          .smile .howto .howto-main-grid > li#web .howtop_web_box-ttl {
            text-align: center;
            font-size: 30px;
            font-family: 'Zen Maru Gothic', sans-serif;
            padding-bottom: 10px;
            color: #333333;
            margin-top: 50px; }
          .smile .howto .howto-main-grid > li#web .howtop_web_box-txt {
            font-size: 14px;
            color: #333333; }
        .smile .howto .howto-main-grid > li#yuso {
          background-color: #F1FFF3;
          border: 2px dotted #2A9B63; }
          .smile .howto .howto-main-grid > li#yuso h4 {
            color: #2A9B63; }
          .smile .howto .howto-main-grid > li#yuso h5 {
            color: #2A9B63;
            font-size: 22px;
            font-family: 'Zen Maru Gothic', sans-serif;
            padding-bottom: 5px; }
          .smile .howto .howto-main-grid > li#yuso .btn {
            text-align: center;
            padding: 35px 0; }
          .smile .howto .howto-main-grid > li#yuso .mb30 {
            margin-bottom: 30px; }
        @media screen and (max-width: 750px) {
          .smile .howto .howto-main-grid > li {
            width: 100%;
            padding: 35px 15px 30px; }
            .smile .howto .howto-main-grid > li:nth-of-type(2) {
              margin-top: 40px; }
            .smile .howto .howto-main-grid > li#web .howtop_web_box-ttl {
              padding-top: 50px; } }
    @media screen and (max-width: 750px) and (max-width: 750px) {
      .smile .howto .howto-main-grid > li#web .howtop_web_box-ttl {
        padding-top: 0px; } }
        @media screen and (max-width: 750px) {
            .smile .howto .howto-main-grid > li#yuso {
              background-color: #F1FFF3;
              border: 2px dotted #2A9B63; }
              .smile .howto .howto-main-grid > li#yuso h4 {
                color: #2A9B63; }
              .smile .howto .howto-main-grid > li#yuso h5 {
                color: #2A9B63;
                font-size: 22px;
                font-family: 'Zen Maru Gothic', sans-serif;
                padding-bottom: 5px; }
              .smile .howto .howto-main-grid > li#yuso .btn {
                padding: 30px 0 25px; } }
    .smile .howto ol {
      padding-top: 40px;
      list-style: none; }
      .smile .howto ol p {
        padding-left: 45px; }
        @media screen and (max-width: 750px) {
          .smile .howto ol p {
            padding-left: 0; } }
      .smile .howto ol li:nth-of-type(n + 2) {
        padding-top: 20px; }
      @media screen and (max-width: 750px) {
        .smile .howto ol {
          padding-top: 20px; }
          .smile .howto ol li:nth-of-type(n + 2) {
            padding-top: 30px; } }
    .smile .howto .txt01 {
      font-size: 14px;
      padding-top: 20px; }
    .smile .howto .howtop_web_box .l-item {
      margin-top: 20px;
      border-radius: 10px;
      background-color: #fff;
      text-align: center;
      padding: 20px 15px; }
      .smile .howto .howtop_web_box .l-item h5 {
        padding-bottom: 20px; }
        @media screen and (max-width: 750px) {
          .smile .howto .howtop_web_box .l-item h5 {
            font-size: 22px;
            font-family: 'Zen Maru Gothic', sans-serif; } }
        .smile .howto .howtop_web_box .l-item h5 .howtop_txt01 {
          color: #EC3870; }
        .smile .howto .howtop_web_box .l-item h5 .howtop_txt02 {
          color: #004389; }
        .smile .howto .howtop_web_box .l-item h5 img {
          margin: 0 auto; }
      .smile .howto .howtop_web_box .l-item .l-btn {
        padding: 15px 0; }
      .smile .howto .howtop_web_box .l-item .t-bold {
        color: #2B2B2B; }
      .smile .howto .howtop_web_box .l-item .txt-btm {
        display: inline-block;
        text-align: left;
        font-size: 13px; }
      .smile .howto .howtop_web_box .l-item:nth-of-type(1) {
        border: 2px solid #EC3870; }
      .smile .howto .howtop_web_box .l-item:nth-of-type(2) {
        border: 2px solid #004389; }
    @media screen and (max-width: 750px) {
      .smile .howto .howtop_web_box .l-item {
        padding: 20px 20px; }
        .smile .howto .howtop_web_box .l-item .l-btn {
          padding: 15px 0 5px; }
        .smile .howto .howtop_web_box .l-item .t-bold {
          color: #2B2B2B; }
        .smile .howto .howtop_web_box .l-item .txt-btm {
          display: inline-block;
          text-align: left;
          font-size: 13px; }
        .smile .howto .howtop_web_box .l-item:nth-of-type(1) {
          border: 2px solid #EC3870; }
        .smile .howto .howtop_web_box .l-item:nth-of-type(2) {
          border: 2px solid #004389; } }
  .smile .receipt {
    margin-top: 50px; }
    .smile .receipt h3 {
      color: #888888;
      font-size: 32px;
      font-family: 'Zen Maru Gothic', sans-serif;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .smile .receipt h3 img {
        padding-right: 10px;
        margin: 0; }
        @media screen and (max-width: 750px) {
          .smile .receipt h3 img {
            width: 10%; } }
    .smile .receipt .receipt_top {
      text-align: center;
      padding-bottom: 40px; }
    .smile .receipt .disc {
      max-width: 850px;
      margin: 0 auto 50px; }
      .smile .receipt .disc li {
        padding-left: 16px;
        list-style: none;
        position: relative; }
        .smile .receipt .disc li:before {
          content: '・';
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0; }
    .smile .receipt .receipt_img {
      text-align: center; }
    .smile .receipt .ex {
      margin: 40px auto 0;
      padding: 20px 40px 50px 40px;
      width: 700px;
      background-color: #F4F4F4;
      border-radius: 10px;
      color: #333333;
      max-width: 100%; }
      .smile .receipt .ex dt {
        padding-bottom: 20px;
        color: #888888;
        font-size: 32px;
        font-family: 'Zen Maru Gothic', sans-serif;
        text-align: center; }
      .smile .receipt .ex .disc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-bottom: 30px; }
        .smile .receipt .ex .disc li {
          width: 50%;
          font-weight: bold; }
      .smile .receipt .ex p {
        font-size: 14px; }
    @media screen and (max-width: 750px) {
      .smile .receipt {
        margin-top: 40px; }
        .smile .receipt h3 {
          font-size: 23px; }
          .smile .receipt h3 img {
            padding-right: 8px;
            margin: 0; }
        .smile .receipt .receipt_top {
          text-align: left;
          padding-bottom: 20px; }
        .smile .receipt .disc {
          margin: 0 auto 30px; }
          .smile .receipt .disc li {
            padding-left: 16px;
            list-style: none;
            position: relative; }
            .smile .receipt .disc li:before {
              content: '・';
              display: inline-block;
              position: absolute;
              top: 0;
              left: 0; }
        .smile .receipt .receipt_img {
          text-align: center; }
        .smile .receipt .ex {
          margin: 30px auto 0;
          padding: 20px 20px 20px 20px;
          width: 100%; }
          .smile .receipt .ex dt {
            padding-bottom: 10px;
            font-size: 26px; }
          .smile .receipt .ex .disc {
            display: block;
            margin-bottom: 20px; }
            .smile .receipt .ex .disc li {
              width: 100%; } }
  .smile .goods {
    margin-bottom: 125px; }
    @media screen and (max-width: 750px) {
      .smile .goods {
        margin-bottom: 80px; } }
    .smile .goods .smile-box-inr {
      padding: 60px 30px 30px 30px;
      text-align: center; }
      @media screen and (max-width: 750px) {
        .smile .goods .smile-box-inr {
          padding: 60px 20px 30px 20px; } }
    @media screen and (max-width: 750px) {
      .smile .goods h2 {
        width: 205px; } }
    .smile .goods h3 {
      padding-bottom: 20px; }
      @media screen and (max-width: 750px) {
        .smile .goods h3 {
          padding-bottom: 10px; }
          .smile .goods h3 img {
            max-width: 220px; } }
    @media screen and (max-width: 750px) {
      .smile .goods h4 {
        padding-bottom: 10px; } }
    .smile .goods .txt-area {
      font-size: 13px;
      display: inline-block;
      text-align: left;
      padding-top: 10px; }
      @media screen and (max-width: 750px) {
        .smile .goods .txt-area {
          padding-top: 20px;
          font-size: 12px; } }
  .smile .t-align {
    margin-left: 1.0em;
    text-indent: -1.0em; }
    @media screen and (max-width: 750px) {
      .smile .t-align {
        margin-left: 0;
        text-indent: 0; } }
  .smile .gaiyo {
    color: #333333;
    position: relative; }
    .smile .gaiyo .smile-box-inr {
      padding: 100px 60px 50px 60px;
      max-height: 700px;
      overflow-y: scroll; }
      @media screen and (max-width: 750px) {
        .smile .gaiyo .smile-box-inr {
          padding: 75px 20px 50px 20px;
          max-height: 530px; } }
    .smile .gaiyo h2 {
      z-index: 10; }
      @media screen and (max-width: 750px) {
        .smile .gaiyo h2 {
          width: 307px; } }
    .smile .gaiyo-list {
      margin-top: 60px; }
      @media screen and (max-width: 750px) {
        .smile .gaiyo-list {
          margin-top: 30px; } }
      .smile .gaiyo-list .l-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
        .smile .gaiyo-list .l-item:nth-of-type(n + 2) {
          margin-top: 40px; }
        @media screen and (max-width: 750px) {
          .smile .gaiyo-list .l-item {
            display: block; }
            .smile .gaiyo-list .l-item:nth-of-type(n + 2) {
              margin-top: 25px; } }
      .smile .gaiyo-list .l-ttl {
        color: #fbc400;
        font-size: 120%;
        font-weight: bold;
        margin: 0 20px 0px 0;
        padding-right: 20px;
        width: 200px;
        border-right: 3px #fbc400 solid;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
      .smile .gaiyo-list .l-txt {
        width: calc( 100% - 240px); }
      .smile .gaiyo-list .l-min {
        font-size: 13px; }
      .smile .gaiyo-list .mb10 {
        margin-bottom: 10px; }
      .smile .gaiyo-list .mb30 {
        margin-bottom: 30px; }
      @media screen and (max-width: 750px) {
        .smile .gaiyo-list .l-ttl {
          font-size: 16px;
          margin: 0 0px 10px 0;
          padding: 0 0 5px 0;
          width: 100%;
          border-right: none;
          border-bottom: 1px solid #F1DD40; }
        .smile .gaiyo-list .l-txt {
          width: 100%; }
        .smile .gaiyo-list .l-min {
          font-size: 13px; }
        .smile .gaiyo-list .mb10 {
          margin-bottom: 10px; }
        .smile .gaiyo-list .mb30 {
          margin-bottom: 30px; } }
    .smile .gaiyo .prize-list li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .smile .gaiyo .prize-list li:nth-of-type(n + 2) {
        margin-top: 20px; }
    .smile .gaiyo .prize-list .prize-ttl {
      width: 60px; }
    .smile .gaiyo .prize-list .prize-txt {
      width: calc(100% - 60px); }
    @media screen and (max-width: 750px) {
      .smile .gaiyo .prize-list li {
        display: block; }
        .smile .gaiyo .prize-list li:nth-of-type(n + 2) {
          margin-top: 20px; }
      .smile .gaiyo .prize-list .prize-ttl {
        width: 100%;
        font-weight: bold; }
      .smile .gaiyo .prize-list .prize-txt {
        width: 100%; } }

.txt_small {
  font-size: 14px; }
  @media screen and (max-width: 750px) {
    .txt_small {
      font-size: 12px; } }