@charset "UTF-8";
/* CSS Document */
html {
  font-size: clamp(14px, 1.563vw, 16px);
  font-family: ibm-plex-sans-jp, sans-serif;
  font-weight: 400; }

.swgM {
  font-family: sweet-sans-pro, sans-serif;
  font-style: normal !important;
  font-weight: 900 !important; }

.bold {
  font-weight: 600 !important; }

.bold2 {
  font-weight: 800 !important; }

.thin {
  font-weight: 200 !important; }

.red {
  color: red; }

/*
20px -- 1.25rem
16px -- 1rem
14px -- 0.875rem
12px -- 0.75rem
*/
.baseWidth {
  width: 90%;
  max-width: 816px;
  margin-left: auto;
  margin-right: auto; }

.f30 {
  font-size: 1.875rem !important; }

.f28 {
  font-size: 1.75rem !important; }

.f24 {
  font-size: 1.5rem !important; }

.f22 {
  font-size: 1.375rem !important; }

.f20 {
  font-size: 1.25rem !important; }

.f16 {
  font-size: 1rem !important; }

.f14 {
  font-size: 0.875rem !important; }

.f12 {
  font-size: 0.75rem !important; }

.smDisp {
  display: block; }
  @media screen and (min-width: 640px) {
    .smDisp {
      display: none; } }

.smDispR {
  display: block; }
  @media screen and (max-width: 639px) {
    .smDispR {
      display: none; } }

.spDisp {
  display: block; }
  @media screen and (min-width: 1024px) {
    .spDisp {
      display: none; } }

.pcDisp {
  display: none; }
  @media screen and (min-width: 1024px) {
    .pcDisp {
      display: block; } }

.spDispI {
  display: inline-block; }
  @media screen and (min-width: 1024px) {
    .spDispI {
      display: none; } }

.pcDispI {
  display: none; }
  @media screen and (min-width: 1024px) {
    .pcDispI {
      display: inline-block; } }

.flexCenterMiddle {
  display: flex;
  justify-content: center;
  align-items: center; }

.flexMiddle {
  display: flex;
  align-items: center; }

input::placeholder, textarea::placeholder {
  color: #BBB;
  font-weight: 300; }

#headerArea {
  height: 120px;
  padding: 0 25px;
  background: #FFF;
  z-index: 1; }
  @media screen and (max-width: 1023px) {
    #headerArea {
      height: 12vw;
      padding: 0 2.5vw; } }
  @media screen and (max-width: 639px) {
    #headerArea {
      height: 15vw;
      padding: 0 2.5vw; } }
  #headerArea .area01 {
    flex: 0 0 294px;
    height: 120px; }
    @media screen and (max-width: 1023px) {
      #headerArea .area01 {
        flex: 0 0 30vw;
        height: 12vw; } }
    @media screen and (max-width: 639px) {
      #headerArea .area01 {
        flex: 0 0 45vw;
        height: 15vw; } }
  #headerArea .area03 {
    flex: 1 1 auto; }
  #headerArea .area02 {
    flex: 0 0 76px;
    height: 120px; }
    @media screen and (max-width: 1023px) {
      #headerArea .area02 {
        flex: 0 0 7.5vw;
        height: 12vw; } }
    @media screen and (max-width: 639px) {
      #headerArea .area02 {
        flex: 0 0 10.75vw;
        height: 15vw; } }
  #headerArea .closeMenuParts {
    display: none;
    color: #0ca39c; }

#footer {
  background: #FFF;
  width: 100%;
  font-size: 1rem;
  padding-top: 2rem; }
  #footer a:link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit; }
  #footer a:visited {
    color: inherit;
    text-decoration: none;
    font-weight: inherit; }
  #footer a:hover {
    color: inherit;
    text-decoration: underline;
    font-weight: inherit; }
  #footer a:active {
    color: inherit;
    text-decoration: none;
    font-weight: inherit; }
  #footer .area03 {
    width: 30%;
    max-width: 184px;
    margin: 0 auto;
    padding: 3rem 0 2rem 0; }
  #footer .area04 {
    width: 100%;
    margin: 0 auto;
    background: #0ca39c;
    color: #FFF;
    text-align: center;
    padding: 2rem 0; }
    #footer .area04 .div01 {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      line-height: 2rem;
      font-size: 0.875rem; }
    #footer .area04 .copyright {
      padding: 2rem 0 0 0;
      font-size: 0.75rem;
      color: #DDD; }

a > *:hover {
  opacity: 0.6; }

a:link {
  color: #BF4D4F;
  text-decoration: underline;
  font-weight: inherit; }

a:visited {
  color: #BF4D4F;
  text-decoration: underline;
  font-weight: inherit; }

a.basicA:link {
  color: #BF4D4F;
  text-decoration: underline;
  font-weight: inherit; }

a.basicA:visited {
  color: #BF4D4F;
  text-decoration: underline;
  font-weight: inherit; }

a.basicA:hover {
  color: inherit;
  text-decoration: none;
  font-weight: inherit; }

a.basicA:active {
  color: inherit;
  text-decoration: none;
  font-weight: inherit; }

a.btn01:link {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit; }

a.btn01:visited {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit; }

a.btn01:hover {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit;
  opacity: 0.5; }

a.btn01:active {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit; }

a.btn02:link {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit; }

a.btn02:visited {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit; }

a.btn02:hover {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit;
  opacity: 0.5; }

a.btn02:active {
  color: #FFF;
  text-decoration: none;
  font-weight: inherit; }

#contentsW .h1AreaW {
  margin-top: 2rem; }
  #contentsW .h1AreaW .h1Area {
    background: url(/img/logoSukashi.png) no-repeat center center/contain;
    padding: 2.5rem 0; }

#contentsW > div {
  width: 100%;
  margin: 0 auto; }

.h1AreaW h1 {
  font-size: 1.4rem;
  font-weight: 600; }

.h1AreaSmpW h1 {
  margin-top: 4rem;
  font-size: 1.4rem;
  font-weight: 600; }

.area01W {
  background-color: #FFFFFF; }

.area02W {
  background-color: #fffae0; }

.area03W {
  background-color: #FFFFFF; }

.area04W {
  background-color: #fffae0; }

.area05W {
  background-color: #FFFFFF; }

.area06W {
  background-color: #fffae0; }

.pageIndex .index-button {
  text-align: center;
  margin-left: auto;
  margin-right: auto; }
  .pageIndex .index-button a {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .pageIndex .index-button a:link {
    color: #FFF;
    text-decoration: none;
    font-weight: bold; }
  .pageIndex .index-button a:visited {
    color: #FFF;
    text-decoration: none;
    font-weight: bold; }
  .pageIndex .index-button a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold; }
  .pageIndex .index-button a:active {
    color: #FFF;
    text-decoration: none;
    font-weight: bold; }
.pageIndex .index-button.book-cover {
  max-width: 400px;
  width: 80%; }
.pageIndex .keyVisual {
  background: url(/img/topBg.jpg) no-repeat center center/cover;
  padding: 3rem 0; }
  .pageIndex .keyVisual .div01 {
    display: flex;
    align-items: center; }
    .pageIndex .keyVisual .div01 p {
      font-size: 2rem;
      line-height: 1.5em;
      text-align: center;
      color: #FFF;
      text-shadow: 0 0 10px #0ca39c, 0 0 10px #0ca39c, 0 0 10px #0ca39c;
      margin: 0 auto; }
      @media screen and (max-width: 1023px) {
        .pageIndex .keyVisual .div01 p {
          font-size: clamp(20px, 1.4vw, 28px); } }
  .pageIndex .keyVisual .div02 .p01 {
    color: #FFF;
    line-height: 1.5em;
    padding-top: 2rem; }
.pageIndex .area01W {
  width: 100%;
  padding: 3rem 0; }
  .pageIndex .area01W .area01W1_1 {
    width: 85%;
    max-width: 720px;
    margin: 0 auto; }
  .pageIndex .area01W .area01W2 {
    margin-top: 1rem; }
  .pageIndex .area01W h2 {
    color: #59C9B8;
    position: relative;
    margin: 0 auto;
    font-weight: 800;
    text-align: center; }
  .pageIndex .area01W h2 + p {
    width: 100%;
    text-align: center; }
  .pageIndex .area01W .div01 {
    width: 80%;
    margin: 0 auto;
    max-width: 444px;
    padding: 4rem 0; }
  .pageIndex .area01W .div02 {
    width: 85%;
    margin: 0 auto;
    line-height: 1.8;
    max-width: 702px; }
    .pageIndex .area01W .div02 p {
      padding-bottom: 1rem; }
  .pageIndex .area01W .div03 {
    width: 80%;
    margin: 0 auto;
    max-width: 574px;
    padding: 2.5rem 0; }
  .pageIndex .area01W .newsArea > div {
    border-bottom: 1px solid #AAA;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between; }
    .pageIndex .area01W .newsArea > div > div:nth-of-type(1) {
      flex: 0 0 8rem; }
    .pageIndex .area01W .newsArea > div > div:nth-of-type(2) {
      flex: 1 1 auto; }
.pageIndex .area02W {
  padding: 2rem 0; }
  .pageIndex .area02W h2 {
    color: #59C9B8;
    position: relative;
    margin: 0 auto;
    text-align: center;
    font-weight: 800; }
  .pageIndex .area02W h2 + p {
    width: 100%;
    text-align: center; }
  .pageIndex .area02W .area02W1_1 {
    width: 85%;
    max-width: 720px;
    margin: 0 auto; }
  .pageIndex .area02W .area02W2 {
    margin-top: 2rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between; }
    @media screen and (max-width: 639px) {
      .pageIndex .area02W .area02W2 {
        margin-top: 2rem;
        flex-flow: row wrap;
        justify-content: center; } }
    .pageIndex .area02W .area02W2 > div {
      flex: 0 0 30%;
      background: #FFF;
      border-radius: .5rem; }
      @media screen and (max-width: 639px) {
        .pageIndex .area02W .area02W2 > div {
          flex: 0 0 80%;
          margin-bottom: 1rem; } }
      .pageIndex .area02W .area02W2 > div > a {
        position: relative;
        display: block;
        padding-bottom: 100%;
        border: 4px solid ＄してColor01;
        border-radius: .5rem; }
        @media screen and (max-width: 639px) {
          .pageIndex .area02W .area02W2 > div > a {
            padding-bottom: 60%; } }
        .pageIndex .area02W .area02W2 > div > a > div {
          color: #000;
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          font-weight: 800;
          padding: .5rem;
          /*-webkit-text-stroke: 1px #FFF;
          text-stroke: 1px #FFF;*/
          text-shadow: 0 0 10px #FFF,0 0 10px #FFF,0 0 10px #FFF; }
    .pageIndex .area02W .area02W2 > div:nth-of-type(1) {
      background: url(/img/index/img01.jpg) no-repeat center center/cover; }
    .pageIndex .area02W .area02W2 > div:nth-of-type(2) {
      background: url(/img/index/img02.jpg) no-repeat center center/cover; }
    .pageIndex .area02W .area02W2 > div:nth-of-type(3) {
      background: url(/img/index/img03.jpg) no-repeat center center/cover; }
.pageIndex .area03W {
  width: 100%; }
  .pageIndex .area03W .area03W1_1 {
    width: 85%;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 4rem; }
  .pageIndex .area03W .area03W2 {
    margin-top: 2rem;
    margin-bottom: 4rem; }
  .pageIndex .area03W h2 {
    color: #59C9B8;
    position: relative;
    margin: 0 auto;
    font-weight: 800;
    text-align: center; }
  .pageIndex .area03W h2 + p {
    width: 100%;
    text-align: center; }
  .pageIndex .area03W .div01 {
    width: 80%;
    margin: 0 auto;
    max-width: 444px;
    padding: 4rem 0; }
  .pageIndex .area03W .div02 {
    width: 85%;
    margin: 0 auto;
    line-height: 1.8;
    max-width: 702px; }
    .pageIndex .area03W .div02 p {
      padding-bottom: 1rem; }
  .pageIndex .area03W .div03 {
    width: 80%;
    margin: 0 auto;
    max-width: 574px;
    padding: 2.5rem 0; }
.pageIndex .area04W {
  padding: 2rem 0; }
  .pageIndex .area04W .area04 {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between; }
    .pageIndex .area04W .area04 > div {
      flex: 0 0 30%; }
.pageIndex .area06W {
  width: 100%; }
  .pageIndex .area06W .area06W1_1 {
    width: 85%;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 4rem; }
  .pageIndex .area06W .area06W2 {
    margin-top: 2rem;
    padding-bottom: 4rem; }
  .pageIndex .area06W h2 {
    color: #59C9B8;
    position: relative;
    margin: 0 auto;
    font-weight: 800;
    text-align: center; }
  .pageIndex .area06W h2 + p {
    width: 100%;
    text-align: center; }
  .pageIndex .area06W .div01 {
    width: 80%;
    margin: 0 auto;
    max-width: 444px;
    padding: 4rem 0; }
  .pageIndex .area06W .div02 {
    width: 85%;
    margin: 0 auto;
    line-height: 1.8;
    max-width: 702px; }
    .pageIndex .area06W .div02 p {
      padding-bottom: 1rem; }
  .pageIndex .area06W .div03 {
    width: 80%;
    margin: 0 auto;
    max-width: 574px;
    padding: 2.5rem 0; }

.pageBasic {
  width: 90%;
  max-width: 816px;
  margin: 5rem auto 0 auto;
  padding: 0 0 2rem 0; }
  .pageBasic > h2 {
    color: #0ca39c;
    font-weight: 800;
    font-size: 2rem;
    text-align: center; }
  .pageBasic .area00 {
    margin-top: 4rem;
    border: 1px solid #1E2F7D;
    border-radius: 0.625rem;
    padding: 3rem 0; }
    @media screen and (max-width: 767px) {
      .pageBasic .area00 {
        padding: 2rem 0 3rem 0; } }
    .pageBasic .area00 h2 {
      color: #0ca39c;
      position: relative;
      padding-left: 5rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area00 h2 {
          padding-left: 3rem; } }
    .pageBasic .area00 h2:before {
      background: #E5D566;
      width: 4rem;
      height: 1px;
      position: absolute;
      content: '';
      left: 1px;
      top: .5rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area00 h2:before {
          width: 2.5rem; } }
    .pageBasic .area00 .div01 {
      line-height: 1.8;
      padding: 0 3rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area00 .div01 {
          padding: .5rem 1.5rem 0 1.5rem; } }
      .pageBasic .area00 .div01 p:not(:last-child) {
        padding-bottom: 1rem; }
    .pageBasic .area00 p.p01 {
      padding: 0 3rem;
      text-align: right; }
      @media screen and (max-width: 767px) {
        .pageBasic .area00 p.p01 {
          padding: 0 1.5rem; } }
    .pageBasic .area00 dl {
      padding: 0 3rem; }
      .pageBasic .area00 dl dt {
        border-bottom: dashed #666 1px;
        font-weight: bold;
        padding: 0 .5rem;
        color: #999999; }
      .pageBasic .area00 dl dd {
        padding: .5rem .5rem 1rem .5rem; }
    .pageBasic .area00 ol {
      margin-left: 1.5rem; }
      .pageBasic .area00 ol li {
        list-style: disc; }
  .pageBasic .imageDiv01 {
    width: 80%;
    max-width: 600px;
    margin: 2rem auto; }
  .pageBasic .area01 {
    width: 100%;
    background: #DBE0EE;
    position: relative;
    margin-top: 5rem;
    padding: 3rem 3rem 2rem 3rem; }
    @media screen and (max-width: 767px) {
      .pageBasic .area01 {
        padding: 3rem 1.5rem 2rem 1.5rem; } }
    .pageBasic .area01 > div:nth-of-type(3) {
      margin-top: 2rem; }
      @media screen and (min-width: 768px) {
        .pageBasic .area01 > div:nth-of-type(3) {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between; } }
      .pageBasic .area01 > div:nth-of-type(3) > div {
        margin-bottom: 1.5rem; }
        @media screen and (min-width: 768px) {
          .pageBasic .area01 > div:nth-of-type(3) > div {
            flex: 0 0 31%;
            margin-bottom: 0; } }
      .pageBasic .area01 > div:nth-of-type(3) > div:nth-of-type(1) {
        flex: 0 0 40%;
        background: #0ca39c;
        color: #FFF;
        text-align: center;
        border-radius: 1rem;
        padding: 1rem .5rem; }
        .pageBasic .area01 > div:nth-of-type(3) > div:nth-of-type(1) img {
          width: 100%; }
      .pageBasic .area01 > div:nth-of-type(3) > div:nth-of-type(2) {
        flex: 0 0 10%; }
        .pageBasic .area01 > div:nth-of-type(3) > div:nth-of-type(2) p {
          color: #0ca39c;
          font-size: 3rem; }
      .pageBasic .area01 > div:nth-of-type(3) > div:nth-of-type(3) {
        flex: 0 0 40%; }
        .pageBasic .area01 > div:nth-of-type(3) > div:nth-of-type(3) > a {
          display: block;
          background: #0ca39c;
          color: #FFF;
          text-align: center;
          border-radius: 1rem;
          padding: 1rem .5rem;
          width: 100%; }
    .pageBasic .area01 > div:nth-of-type(4) {
      line-height: 1.8;
      margin-top: 2rem; }
  .pageBasic .area02 {
    margin-top: 4rem;
    border: 1px solid #1E2F7D;
    border-radius: 0.625rem;
    padding: 3rem 0 1rem 0; }
    .pageBasic .area02 h2 {
      color: #0ca39c;
      position: relative;
      padding-left: 5rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area02 h2 {
          padding-left: 3rem; } }
    .pageBasic .area02 h2:before {
      background: #E5D566;
      width: 4rem;
      height: 1px;
      position: absolute;
      content: '';
      left: 1px;
      top: .5rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area02 h2:before {
          width: 2.5rem; } }
    .pageBasic .area02 > div:nth-of-type(1) {
      line-height: 1.8;
      padding: 2rem 3rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area02 > div:nth-of-type(1) {
          padding: 2rem; } }
    .pageBasic .area02 > div:nth-of-type(2) {
      margin: 0 auto 0 auto; }
      @media screen and (min-width: 768px) {
        .pageBasic .area02 > div:nth-of-type(2) {
          width: 620px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between; } }
      .pageBasic .area02 > div:nth-of-type(2) > a {
        display: block;
        color: #0ca39c;
        border: 1px solid #1E2F7D;
        border-radius: 0.625rem;
        padding: 1rem;
        width: 70%;
        margin: 0 auto 1.5rem auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between; }
        @media screen and (min-width: 768px) {
          .pageBasic .area02 > div:nth-of-type(2) > a {
            flex: 0 0 46%;
            width: auto; } }
  .pageBasic .area03 {
    margin-top: 4rem; }
  .pageBasic .area04 {
    width: 100%;
    background: #DBE0EE;
    position: relative;
    margin-top: 5rem;
    padding: 3rem 3rem 2rem 3rem; }
    @media screen and (max-width: 767px) {
      .pageBasic .area04 {
        padding: 3rem 1.5rem 2rem 1.5rem; } }
    .pageBasic .area04 > div:last-child {
      margin-bottom: 0 !important; }
    .pageBasic .area04 > div:nth-of-type(1) {
      position: absolute;
      height: 3rem;
      left: 0;
      right: 0;
      margin: auto;
      top: -1.5rem;
      width: 100%;
      text-align: center; }
      .pageBasic .area04 > div:nth-of-type(1) h2 {
        background: #1E2F7D;
        color: #FFF;
        padding: .5em 1em;
        display: inline-block;
        border-radius: 1em; }
    .pageBasic .area04 > div:nth-of-type(2) {
      color: #0ca39c;
      position: relative;
      margin-bottom: 2rem; }
      .pageBasic .area04 > div:nth-of-type(2) > span:nth-of-type(1) {
        display: inline-block;
        padding: 0 1em;
        line-height: 2;
        background: #FFF;
        border-radius: 1em;
        margin-right: .5rem;
        vertical-align: middle; }
    .pageBasic .area04 > div:nth-of-type(2):after {
      border: 2rem solid transparent;
      border-width: .5rem 1rem .5rem 1rem;
      border-top-color: #B99C5A;
      border-bottom-width: 0;
      bottom: -.5rem;
      content: "";
      display: block;
      left: 0;
      right: 0;
      margin: auto;
      position: absolute;
      width: 0; }
    .pageBasic .area04 .div01 {
      border: 1px solid #0ca39c;
      border-radius: .5rem;
      background: #FFF;
      padding: 1.5rem 3rem;
      margin-bottom: 1.5rem; }
      @media screen and (max-width: 767px) {
        .pageBasic .area04 .div01 {
          padding: 1.5rem; } }
      .pageBasic .area04 .div01 > div:last-child {
        margin-bottom: 0 !important; }
      .pageBasic .area04 .div01 .div01_1 {
        color: #0ca39c;
        text-align: center;
        border-bottom: 1px solid #B99C5A;
        position: relative;
        margin-bottom: 2rem; }
      .pageBasic .area04 .div01 .div01_1:after {
        border: 2rem solid transparent;
        border-width: .5rem 1rem .5rem 1rem;
        border-top-color: #B99C5A;
        border-bottom-width: 0;
        bottom: -.5rem;
        content: "";
        display: block;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
        width: 0; }
      .pageBasic .area04 .div01 .div01_2 {
        color: #0ca39c;
        margin-bottom: .5rem;
        display: inline-block;
        padding: 0 1em;
        line-height: 2;
        background: #DBE0EE;
        border-radius: 1em; }
      .pageBasic .area04 .div01 .div01_3 {
        line-height: 1.8;
        margin-bottom: 1.5rem; }
  .pageBasic .area05 {
    width: 100%;
    background: #DBE0EE;
    position: relative;
    margin-top: 5rem;
    padding: 3rem 3rem 2rem 3rem; }
    @media screen and (max-width: 767px) {
      .pageBasic .area05 {
        padding: 3rem 1.5rem 2rem 1.5rem; } }
    .pageBasic .area05 > div:nth-of-type(1) {
      position: absolute;
      height: 3rem;
      left: 0;
      right: 0;
      margin: auto;
      top: -1.5rem;
      width: 100%;
      text-align: center; }
      .pageBasic .area05 > div:nth-of-type(1) h2 {
        background: #1E2F7D;
        color: #FFF;
        padding: .5em 1em;
        display: inline-block;
        border-radius: 1em; }
    .pageBasic .area05 > div:nth-of-type(2) {
      color: #0ca39c; }
      .pageBasic .area05 > div:nth-of-type(2) > span:nth-of-type(1) {
        display: inline-block;
        padding: 0 1em;
        line-height: 2;
        background: #FFF;
        border-radius: 1em;
        margin-right: .5rem;
        vertical-align: middle; }
      .pageBasic .area05 > div:nth-of-type(2) > span:nth-of-type(2) {
        display: inline-block;
        line-height: 2;
        vertical-align: sub; }
      .pageBasic .area05 > div:nth-of-type(2) > span:nth-of-type(3) {
        display: inline-block;
        line-height: 2;
        vertical-align: sub; }
    .pageBasic .area05 > div:nth-of-type(3) {
      margin-top: 2rem; }
      @media screen and (min-width: 768px) {
        .pageBasic .area05 > div:nth-of-type(3) {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between; } }
      .pageBasic .area05 > div:nth-of-type(3) > div:nth-of-type(1) {
        margin-bottom: 1.5rem;
        color: #FFF;
        text-align: center;
        border-radius: 1rem; }
        @media screen and (min-width: 768px) {
          .pageBasic .area05 > div:nth-of-type(3) > div:nth-of-type(1) {
            flex: 0 0 40%;
            margin-bottom: 0; } }
        .pageBasic .area05 > div:nth-of-type(3) > div:nth-of-type(1) img {
          width: 100%; }
      @media screen and (min-width: 768px) {
        .pageBasic .area05 > div:nth-of-type(3) > div:nth-of-type(2) {
          flex: 0 0 50%;
          margin-bottom: 0; } }
      .pageBasic .area05 > div:nth-of-type(3) > div:nth-of-type(2) p {
        padding-bottom: 1rem;
        line-height: 1.8; }
      .pageBasic .area05 > div:nth-of-type(3) > div:nth-of-type(2) p:last-child {
        padding-bottom: 0 !important; }
    .pageBasic .area05 > div:nth-of-type(4) {
      line-height: 1.8;
      margin-top: 2rem; }

.pageGoods {
  width: 90%;
  max-width: 816px;
  margin: 5rem auto 0 auto;
  padding: 0 0 2rem 0; }
  .pageGoods > h2 {
    color: #0ca39c;
    font-weight: 800;
    font-size: 2rem;
    text-align: center; }
  .pageGoods .cartInputForm {
    margin-top: 2rem; }
    .pageGoods .cartInputForm .cartInputFormRow {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between; }
      .pageGoods .cartInputForm .cartInputFormRow > div:nth-of-type(1) {
        flex: 0 0 10em;
        padding: .5rem;
        font-size: 0.8rem;
        color: #666; }
      .pageGoods .cartInputForm .cartInputFormRow > div:nth-of-type(2) {
        flex: 1 1 auto;
        padding: .5rem; }
    .pageGoods .cartInputForm .div03 {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between; }
      .pageGoods .cartInputForm .div03 > div:nth-of-type(1) {
        flex: 0 0 50%;
        text-align: right;
        padding-right: 1rem; }
      .pageGoods .cartInputForm .div03 > div:nth-of-type(2) {
        flex: 0 0 50%;
        text-align: left;
        padding-left: 1rem; }
  .pageGoods .alertArea01W .alertArea01 {
    width: 90%;
    margin: 0 auto; }
    @media screen and (max-width: 639px) {
      .pageGoods .alertArea01W .alertArea01 {
        width: 90%; } }
    .pageGoods .alertArea01W .alertArea01 ul {
      margin: .5rem 0 0 2em; }
      .pageGoods .alertArea01W .alertArea01 ul li {
        list-style: disc;
        margin-bottom: 0.5rem; }
  .pageGoods .creditArea {
    border: 2px solid #999;
    padding: 1.5rem; }
    .pageGoods .creditArea button {
      margin: 3rem auto 0 auto;
      display: block; }
    .pageGoods .creditArea .input {
      border: 1px solid #EEE !important; }
    .pageGoods .creditArea .creditAreaBox > span {
      font-size: 0.8rem;
      color: #999;
      font-weight: bold; }
    .pageGoods .creditArea .creditAreaBox .input {
      border: 1px solid #aaa; }
  .pageGoods .area01W {
    margin-top: 2rem;
    border: 1px solid #1E2F7D;
    border-radius: 0.625rem;
    padding: 3rem 0; }
    @media screen and (max-width: 767px) {
      .pageGoods .area01W {
        padding: 2rem 0 3rem 0; } }
    .pageGoods .area01W h2 {
      color: #0ca39c;
      position: relative;
      padding-left: 5rem; }
      @media screen and (max-width: 767px) {
        .pageGoods .area01W h2 {
          padding-left: 3rem; } }
    .pageGoods .area01W h2:before {
      background: #E5D566;
      width: 4rem;
      height: 1px;
      position: absolute;
      content: '';
      left: 1px;
      top: .5rem; }
      @media screen and (max-width: 767px) {
        .pageGoods .area01W h2:before {
          width: 2.5rem; } }
    .pageGoods .area01W .area01 {
      padding: 1rem 3rem 0 3rem; }
      .pageGoods .area01W .area01 > div > div {
        border: #0ca39c 1px solid;
        padding: 1.5rem; }
        .pageGoods .area01W .area01 > div > div .div01 img {
          border: 1px solid #AAA;
          width: 100%; }
        .pageGoods .area01W .area01 > div > div .div02 {
          color: #B99C5A;
          font-weight: 700;
          text-align: center; }
          .pageGoods .area01W .area01 > div > div .div02 span {
            font-weight: 400;
            color: #000; }
        .pageGoods .area01W .area01 > div > div .div03 {
          text-align: center; }
          .pageGoods .area01W .area01 > div > div .div03 button {
            width: 9rem;
            text-align: center;
            background: #59C9B8;
            color: #FFF;
            padding: .5rem 1rem;
            line-height: 1.0;
            border-radius: 1.5rem;
            margin: 0 auto; }
          .pageGoods .area01W .area01 > div > div .div03 button:hover {
            opacity: 0.5; }
  .pageGoods .imageDiv01 {
    width: 80%;
    max-width: 600px;
    margin: 2rem auto; }

.youtubeFrame {
  position: relative;
  padding-bottom: 56.25% !important;
  height: 0;
  overflow: hidden; }
  .youtubeFrame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.pageContactW .pageContact {
  margin: 0 auto;
  width: 90%;
  max-width: 600px; }
  .pageContactW .pageContact .area01 {
    background: #DBE0EE;
    position: relative;
    margin-top: 3rem;
    padding: 3rem 3rem 2rem 3rem; }
    @media screen and (max-width: 767px) {
      .pageContactW .pageContact .area01 {
        padding: 3rem 1.5rem 2rem 1.5rem; } }
    .pageContactW .pageContact .area01 .div01 {
      padding: .5rem; }
      .pageContactW .pageContact .area01 .div01 input[type=text] {
        width: 100%; }
      .pageContactW .pageContact .area01 .div01 #zip {
        max-width: 8em; }
      .pageContactW .pageContact .area01 .div01 textarea {
        width: 100%;
        height: 8em; }
    .pageContactW .pageContact .area01 .div01_1 {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between; }
      .pageContactW .pageContact .area01 .div01_1 > div:nth-of-type(1) {
        flex: 1 1 auto;
        padding: 0 .5rem 0 0; }
      .pageContactW .pageContact .area01 .div01_1 > div:nth-of-type(2) {
        flex: 0 0 10em;
        padding: 0; }
    .pageContactW .pageContact .area01 span.colNm {
      font-size: 0.75rem;
      color: #666;
      display: block; }
  .pageContactW .pageContact .div03 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between; }
    .pageContactW .pageContact .div03 > div:nth-of-type(1) {
      flex: 0 0 50%;
      padding: .5rem; }
      .pageContactW .pageContact .div03 > div:nth-of-type(1) a {
        display: block;
        color: #0ca39c;
        background: #FFF;
        border: 1px solid #1E2F7D;
        border-radius: 1rem;
        padding: 1rem;
        width: 70%;
        max-width: 300px;
        margin: 1.5rem auto 0 auto; }
    .pageContactW .pageContact .div03 > div:nth-of-type(2) {
      flex: 0 0 50%;
      padding: .5rem; }
  .pageContactW .pageContact .toConfirm {
    color: #0ca39c;
    background: #FFF;
    border: 1px solid #1E2F7D;
    border-radius: 1rem;
    padding: 1rem;
    width: 70%;
    max-width: 300px;
    margin: 1.5rem auto 0 auto; }

/* ---------------------------------------------------------
layerMenu
--------------------------------------------------------- */
#layerMenuW {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2; }
  #layerMenuW #layerMenu {
    width: 90%;
    max-width: 375px;
    height: 100%;
    background: #EDEFF3;
    margin: 0 0 0 auto;
    overflow: auto;
    z-index: 3; }
    #layerMenuW #layerMenu .area01 {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between; }
      #layerMenuW #layerMenu .area01 > div:nth-of-type(1) {
        flex: 0 0 40%;
        padding: 1rem; }
      #layerMenuW #layerMenu .area01 > div:nth-of-type(2) {
        flex: 0 0 40%;
        padding: 1rem; }
        #layerMenuW #layerMenu .area01 > div:nth-of-type(2) button {
          font-size: 3rem;
          color: #0ca39c;
          line-height: 1;
          text-align: right;
          margin-left: auto; }
    #layerMenuW #layerMenu .loginedAreaW {
      width: 90%;
      margin-bottom: 1rem; }
      #layerMenuW #layerMenu .loginedAreaW .loginedArea {
        background: #FFF;
        padding: .5rem;
        border-radius: .5rem; }
    #layerMenuW #layerMenu nav {
      padding: 1rem; }
      #layerMenuW #layerMenu nav > a {
        display: block; }
      #layerMenuW #layerMenu nav > a.a01 {
        padding-top: .8rem; }
        #layerMenuW #layerMenu nav > a.a01 > div:nth-of-type(1) {
          color: #0ca39c; }
        #layerMenuW #layerMenu nav > a.a01 > div:nth-of-type(2) {
          color: #999999; }
      #layerMenuW #layerMenu nav > a.a02 {
        border: 1px solid #0ca39c;
        background: #FFF;
        padding: .5rem 1rem;
        color: #0ca39c;
        border-radius: 1rem;
        width: 10rem;
        margin: 1rem 0; }
        #layerMenuW #layerMenu nav > a.a02 > div {
          text-align: center;
          line-height: 1; }
      #layerMenuW #layerMenu nav > a.a03 {
        padding-top: .4rem; }
        #layerMenuW #layerMenu nav > a.a03 > div:nth-of-type(1) {
          color: #0ca39c;
          font-size: 0.8rem; }
      #layerMenuW #layerMenu nav a:link {
        color: inherit;
        text-decoration: none;
        font-weight: inherit; }
      #layerMenuW #layerMenu nav a:visited {
        color: inherit;
        text-decoration: none;
        font-weight: inherit; }
      #layerMenuW #layerMenu nav a:hover {
        color: inherit;
        text-decoration: none;
        font-weight: inherit;
        opacity: 0.5; }
      #layerMenuW #layerMenu nav a:active {
        color: inherit;
        text-decoration: none;
        font-weight: inherit; }

.pageTokushoW, .pagePolicyW {
  margin-top: 2rem;
  background: #ECEDF4;
  padding: 3rem 1rem; }
  .pageTokushoW .pageTokusho, .pageTokushoW .pagePolicy, .pagePolicyW .pageTokusho, .pagePolicyW .pagePolicy {
    background: #FFF;
    width: 90%;
    max-width: 816px;
    margin: 0 auto;
    padding: 1rem; }
    .pageTokushoW .pageTokusho dl dt, .pageTokushoW .pagePolicy dl dt, .pagePolicyW .pageTokusho dl dt, .pagePolicyW .pagePolicy dl dt {
      border-bottom: dashed #666 1px;
      font-weight: bold;
      padding: 0 .5rem;
      color: #999999; }
    .pageTokushoW .pageTokusho dl dd, .pageTokushoW .pagePolicy dl dd, .pagePolicyW .pageTokusho dl dd, .pagePolicyW .pagePolicy dl dd {
      padding: .5rem .5rem 1rem .5rem; }

.pagePolicyW .pagePolicy .p01 {
  padding: 1rem;
  line-height: 1.8; }
.pagePolicyW .pagePolicy h2 {
  border-bottom: 1px dashed #666;
  margin: 2rem 0 .5rem 0;
  padding-bottom: .3rem; }
.pagePolicyW .pagePolicy ul {
  margin: 2rem 1rem 2rem 3rem; }
  .pagePolicyW .pagePolicy ul li {
    list-style: disc;
    padding-bottom: .5rem; }