@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*
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;
}

/*COMMON-----------------------------------------------------------------------------------------------------------------*/
/* --------------------
リセット追加
-------------------- */
input[type=text],
input[type=password],
input[type=submit],
input[type=button],
input[type=tel],
input[type=email],
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  font-family: inherit;
  outline: none;
}

select::-ms-expand {
  display: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: initial;
  outline-color: rgb(0, 95, 204);
  outline-offset: 1px;
  outline-style: auto;
  outline-width: 1px;
}
input:focus-visible + label,
textarea:focus-visible + label,
select:focus-visible + label,
button:focus-visible + label {
  outline: initial;
  outline-color: rgb(0, 95, 204);
  outline-offset: 1px;
  outline-style: auto;
  outline-width: 1px;
}

input[type=submit],
input[type=button],
button {
  cursor: pointer;
}

input:invalid {
  box-shadow: none;
}

input:-ms-input-placeholder {
  color: #999;
  font-size: 0.875rem;
}

input::placeholder {
  color: #999;
  font-size: 0.875rem;
}

ul,
ol,
li {
  list-style: none;
}

/* --------------------
基本設定
-------------------- */
html {
  overflow-y: scroll;
  font-size: 100%;
}
html.iphone a:hover, html.ipod a:hover, html.ipad a:hover, html.android a:hover {
  opacity: 1 !important;
}
html.iphone a:hover img, html.ipod a:hover img, html.ipad a:hover img, html.android a:hover img {
  opacity: 1 !important;
}

body {
  position: relative;
  background: var(--bg-color);
  color: var(--txt-color);
  text-align: center;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: normal;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  height: 100vh;
  background-color: #cbe59d;
}

body.bgChange {
  background-color: #fff;
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
a {
  text-decoration: none;
}
a:link, a:visited {
  color: var(--txt-color);
}
a:hover, a:active {
  color: var(--txt-color);
}

img {
  margin: 0 auto;
  display: block;
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

/*サイト設定-------------------------------------------------------------------------------------------------------------*/
p {
  line-height: 1.6;
}

a._underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 700 !important;
}
a._underline._underlineIco {
  display: inline-block;
  position: relative;
}
a._underline._underlineIco span {
  position: absolute;
  display: block;
  width: 20px;
  top: 1px;
  bottom: 0;
  left: -24px;
  margin: auto 0;
}

.BtnCommon, .BtnGraLightreen, .BtnGraBlue, .BtnGraGreen,
input.BtnCommon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 45px;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: var(--key-color-Green);
  border-radius: 100px;
  box-sizing: border-box;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.02em;
  line-height: 1.4;
  box-shadow: 0 4px var(--key-color-DarkGreen);
}
.BtnCommon.BtnCommonNoflex, .BtnCommonNoflex.BtnGraLightreen, .BtnCommonNoflex.BtnGraBlue, .BtnCommonNoflex.BtnGraGreen,
input.BtnCommon.BtnCommonNoflex {
  display: block;
}
.BtnCommon._BtnGray, ._BtnGray.BtnGraLightreen, ._BtnGray.BtnGraBlue, ._BtnGray.BtnGraGreen,
input.BtnCommon._BtnGray {
  pointer-events: none;
  background-color: #969696 !important;
  box-shadow: none !important;
}
.BtnCommon._BtnGray::after, ._BtnGray.BtnGraLightreen::after, ._BtnGray.BtnGraBlue::after, ._BtnGray.BtnGraGreen::after,
input.BtnCommon._BtnGray::after {
  display: none;
}
.BtnCommon::after, .BtnGraLightreen::after, .BtnGraBlue::after, .BtnGraGreen::after,
input.BtnCommon::after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px var(--key-color-Yellow);
  border-right: solid 2px var(--key-color-Yellow);
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto 0;
}
.BtnCommon._h38, ._h38.BtnGraLightreen, ._h38.BtnGraBlue, ._h38.BtnGraGreen,
input.BtnCommon._h38 {
  min-height: 38px;
}
.BtnCommon._h60, ._h60.BtnGraLightreen, ._h60.BtnGraBlue, ._h60.BtnGraGreen,
input.BtnCommon._h60 {
  min-height: 60px;
}
.BtnCommon._w160, ._w160.BtnGraLightreen, ._w160.BtnGraBlue, ._w160.BtnGraGreen,
input.BtnCommon._w160 {
  width: 160px;
}
.BtnCommon._w180, ._w180.BtnGraLightreen, ._w180.BtnGraBlue, ._w180.BtnGraGreen,
input.BtnCommon._w180 {
  width: 180px;
}
.BtnCommon._fz18, ._fz18.BtnGraLightreen, ._fz18.BtnGraBlue, ._fz18.BtnGraGreen,
input.BtnCommon._fz18 {
  font-size: 1.12rem;
}
.BtnCommon._bgW, ._bgW.BtnGraLightreen, ._bgW.BtnGraBlue, ._bgW.BtnGraGreen,
input.BtnCommon._bgW {
  background-color: #fff;
  color: #000 !important;
}
.BtnCommon._bgR, ._bgR.BtnGraLightreen, ._bgR.BtnGraBlue, ._bgR.BtnGraGreen,
input.BtnCommon._bgR {
  background-color: #e43434;
}
.BtnCommon._bgLB, ._bgLB.BtnGraLightreen, ._bgLB.BtnGraBlue, ._bgLB.BtnGraGreen,
input.BtnCommon._bgLB {
  background-color: #00b4e8;
}
.BtnCommon._bgOra, ._bgOra.BtnGraLightreen, ._bgOra.BtnGraBlue, ._bgOra.BtnGraGreen,
input.BtnCommon._bgOra {
  background-color: var(--key-color-Orange);
}
.BtnCommon._bgYLG, ._bgYLG.BtnGraLightreen, ._bgYLG.BtnGraBlue, ._bgYLG.BtnGraGreen,
input.BtnCommon._bgYLG {
  background-color: var(--key-color-YLightGreen);
  color: var(--key-color-DarkGreen) !important;
}
.BtnCommon._borderG, ._borderG.BtnGraLightreen, ._borderG.BtnGraBlue, ._borderG.BtnGraGreen,
input.BtnCommon._borderG {
  border: solid 1px var(--key-color-Green);
}
.BtnCommon._NoShadow, ._NoShadow.BtnGraLightreen, ._NoShadow.BtnGraBlue, ._NoShadow.BtnGraGreen,
input.BtnCommon._NoShadow {
  box-shadow: none;
}
.BtnCommon._ShadowB, ._ShadowB.BtnGraLightreen, ._ShadowB.BtnGraBlue, ._ShadowB.BtnGraGreen,
input.BtnCommon._ShadowB {
  box-shadow: 0 4px #00779e;
}
.BtnCommon._ShadowG, ._ShadowG.BtnGraLightreen, ._ShadowG.BtnGraBlue, ._ShadowG.BtnGraGreen,
input.BtnCommon._ShadowG {
  box-shadow: 0 4px var(--key-color-Green);
}
.BtnCommon._ShadowR, ._ShadowR.BtnGraLightreen, ._ShadowR.BtnGraBlue, ._ShadowR.BtnGraGreen,
input.BtnCommon._ShadowR {
  box-shadow: 0 4px #aa0d0d;
}
.BtnCommon._ShadowLB, ._ShadowLB.BtnGraLightreen, ._ShadowLB.BtnGraBlue, ._ShadowLB.BtnGraGreen,
input.BtnCommon._ShadowLB {
  box-shadow: 0 4px #04739f;
}
.BtnCommon._ShadowOra, ._ShadowOra.BtnGraLightreen, ._ShadowOra.BtnGraBlue, ._ShadowOra.BtnGraGreen,
input.BtnCommon._ShadowOra {
  box-shadow: 0 4px #b24400;
}
.BtnCommon._IconG::after, ._IconG.BtnGraLightreen::after, ._IconG.BtnGraBlue::after, ._IconG.BtnGraGreen::after,
input.BtnCommon._IconG::after {
  border-color: var(--key-color-Green);
}
.BtnCommon._IconBack::after, ._IconBack.BtnGraLightreen::after, ._IconBack.BtnGraBlue::after, ._IconBack.BtnGraGreen::after,
input.BtnCommon._IconBack::after {
  left: 20px;
  transform: rotate(-135deg);
}
.BtnCommon._IconNon::after, ._IconNon.BtnGraLightreen::after, ._IconNon.BtnGraBlue::after, ._IconNon.BtnGraGreen::after,
input.BtnCommon._IconNon::after {
  display: none;
}
.BtnCommon._IconSize10::after, ._IconSize10.BtnGraLightreen::after, ._IconSize10.BtnGraBlue::after, ._IconSize10.BtnGraGreen::after,
input.BtnCommon._IconSize10::after {
  width: 10px;
  height: 10px;
}
.BtnCommon._IconClose::before, ._IconClose.BtnGraLightreen::before, ._IconClose.BtnGraBlue::before, ._IconClose.BtnGraGreen::before, .BtnCommon._IconClose::after, ._IconClose.BtnGraLightreen::after, ._IconClose.BtnGraBlue::after, ._IconClose.BtnGraGreen::after,
input.BtnCommon._IconClose::before,
input.BtnCommon._IconClose::after {
  content: "";
  display: block;
  width: 12px;
  height: 2px;
  background: var(--key-color-Green);
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: 0.6s;
  border: none;
  bottom: auto;
}
.BtnCommon._IconClose::after, ._IconClose.BtnGraLightreen::after, ._IconClose.BtnGraBlue::after, ._IconClose.BtnGraGreen::after,
input.BtnCommon._IconClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.BtnCommon span.BtnSubTxt, .BtnGraLightreen span.BtnSubTxt, .BtnGraBlue span.BtnSubTxt, .BtnGraGreen span.BtnSubTxt,
input.BtnCommon span.BtnSubTxt {
  display: block;
  font-size: 0.75rem;
}

.BtnGraGreen {
  background: linear-gradient(105deg, #007550 0%, #007550 20%, #018f5d 20%, #86c92f 80%, #018f5d 80%, #50b62b 100%);
  color: #fff !important;
  text-shadow: 0 0 4px var(--key-color-DarkGreen);
}
.BtnGraGreen::after {
  filter: drop-shadow(0 0 4px var(--key-color-DarkGreen));
}
.BtnGraGreen._bgLine {
  background: #06C755;
}
.BtnGraGreen._bgLine::after {
  filter: none;
}
.BtnGraGreen._BtnGray {
  background: #969696 !important;
  text-shadow: none;
}

.BtnGraBlue {
  background: linear-gradient(105deg, #00a9e1 0%, #00a9e1 20%, #029ad9 20%, #3be4f3 80%, #00b4e8 80%, #05d7ea 100%);
  color: #fff !important;
  text-shadow: 0 0 4px #004961;
}
.BtnGraBlue::after {
  filter: drop-shadow(0 0 4px #004961);
}
.BtnGraBlue._BtnGray {
  background: #969696 !important;
  text-shadow: none;
}

.BtnGraLightreen {
  background: linear-gradient(105deg, #b8e869 0%, #b8e869 20%, #b8ed75 20%, #ddf64d 80%, #b8ed75 80%, #cbf24f 100%);
}
.BtnGraLightreen._BtnGray {
  background: #969696 !important;
  text-shadow: none;
}

@keyframes shine-run {
  0% {
    transform: scale(0) rotate(105deg);
    opacity: 0;
  }
  40% {
    transform: scale(1) rotate(105deg);
    opacity: 1;
  }
  60% {
    transform: scale(250) rotate(105deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.BtnAnimation {
  overflow: hidden;
}
.BtnAnimation::before {
  content: "";
  position: absolute;
  display: block;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%);
  width: 50px;
  height: 50px;
  top: -60px;
  left: -60px;
  animation-name: shine-run;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
.BtnAnimation._BtnGray::before {
  display: none;
}

._IconPic {
  position: relative;
  justify-content: flex-start;
  min-height: 60px;
  padding-left: 66px;
  text-align: left;
}
._IconPic img {
  position: absolute;
  display: block;
  width: 42px;
  top: 0;
  bottom: 0;
  left: 12px;
  margin: auto 0;
}
._IconPic._txtcenter {
  text-align: center;
}

._IconPicS img {
  position: absolute;
  display: block;
  width: 20px;
  top: 0;
  bottom: 0;
  left: 12px;
  margin: auto 0;
}

._IconPicMain {
  position: relative;
  min-height: 60px;
  font-size: 1.12rem;
}
._IconPicMain img {
  position: absolute;
  display: block;
  width: 42px;
  top: 0;
  bottom: 0;
  left: 12px;
  margin: auto 0;
}

.KujiBtn {
  position: relative;
  min-height: 60px;
}
.KujiBtn img {
  position: absolute;
  width: 330px;
  top: -7px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.KujiBtn .KujiBtnTxt {
  color: var(--key-color-Green);
}

.BtnSubmit {
  position: relative;
}
.BtnSubmit::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-top: solid 2px var(--key-color-Yellow);
  border-right: solid 2px var(--key-color-Yellow);
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto 0;
}
.BtnSubmit._BtnGray::after {
  display: none;
}
.BtnSubmit._BtnGray input {
  pointer-events: none;
  background-color: #969696 !important;
  box-shadow: none !important;
}

.BtnPay {
  background: #ff0033;
  box-shadow: 0 4px #b90025;
}

.BtnRaku {
  background: #bf0000;
  box-shadow: 0 4px #7f0000;
}

.BtnD {
  background: #cc0033;
  box-shadow: 0 4px #930025;
}

.BtnV {
  background: #034099;
  box-shadow: 0 4px #02265b;
}

.BtnCokeon {
  background: #e43434;
  box-shadow: 0 4px #aa0d0d;
}

.MainBtn {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  padding-bottom: 14px;
}
.MainBtn .MyMainBtn {
  font-size: 1.1875rem;
  font-weight: 900;
  min-height: 80px;
  letter-spacing: 0.02em;
}
@media (max-width: 375px) {
  .MainBtn .MyMainBtn {
    font-size: 1rem;
  }
}
.MainBtn ul {
  width: calc(100% - 20px);
  max-width: 440px;
  margin: 0 auto;
  padding: 14px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.MainBtn ul li {
  width: calc(100% - 92px);
}
.MainBtn ul li.MainBtnHistory {
  width: 82px;
}
.MainBtn ul li.MainBtnHistory a {
  position: relative;
  align-items: flex-end;
  min-height: 80px;
  padding: 2px 2px 12px;
  background: url(https://i-lohas-cp.jp/cp001/images/icon_point_g.png) center top 10px/26px auto no-repeat var(--key-color-Green);
  font-size: 0.625rem;
  line-height: 1.4;
  text-shadow: 0 0 4px var(--key-color-DarkGreen);
}
.MainBtn ul li.MainBtnHistory .NoticeBadge {
  position: absolute;
  width: 25px;
  top: -4px;
  right: -4px;
}
.MainBtn.MainBtnLp ul {
  padding: 14px 0 12px;
}
.MainBtn.MainBtnLp ul li {
  width: 100%;
  box-sizing: border-box;
}
.MainBtn.MainBtnLp .LpMainBtn {
  min-height: 60px;
  font-size: 1.6875rem;
  font-weight: 900;
}
.MainBtn.MainBtnLp .MainBtnNote {
  color: #000;
  padding: 12px 0 0;
  font-size: 0.6875rem;
}
.MainBtn.MainBtnLp .MainBtnNote:first-of-type {
  padding: 0 0 12px;
}
.MainBtn.MainBtnLp .MainBtnNote a {
  color: #000;
  border: none;
  text-decoration: underline;
}

header {
  position: relative;
  height: 45px;
  padding: 0;
}
header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  height: 48px;
  background-color: #fff;
}
header .iroLogo {
  position: relative;
  width: 35px;
  margin: 0 auto;
  padding-top: 6px;
  z-index: 100;
}
header .Hamburger {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  z-index: 100;
  background: none;
}
header .Hamburger .HamburgerBg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease-out;
}
header .Hamburger .Stick01, header .Hamburger .Stick03, header .Hamburger .Stick02 {
  position: absolute;
  top: calc(50% - 7px);
  right: 14px;
  transform: translate(0, -50%);
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--key-color-Green);
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}
header .Hamburger .Stick02 {
  top: 50%;
}
header .Hamburger .Stick03 {
  top: calc(50% + 7px);
}
header .Hamburger.open {
  z-index: 1000;
}
header .Hamburger.open .HamburgerBg {
  background-color: var(--key-color-YGreen);
}
header .Hamburger.open .Stick01, header .Hamburger.open .Stick02, header .Hamburger.open .Stick03 {
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
  width: 22px;
  background-color: #fff;
}
header .Hamburger.open .Stick02 {
  opacity: 0;
}
header .Hamburger.open .Stick03 {
  top: 50%;
  transform: translate(0, -50%) rotate(-45deg);
  width: 22px;
  background-color: #fff;
}
header .HamburgerInner {
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 460px;
  padding: 0 35px;
  z-index: 1000;
}
header .HamburgerInner > div {
  opacity: 0;
  animation: fadein 0.8s ease-out 0.4s forwards;
}
header .HamburgerInner ul {
  opacity: 0;
  animation: fadein 0.8s ease-out 0.6s forwards;
  display: flex;
  flex-wrap: wrap;
  margin: 14px 20px 0;
}
header .HamburgerInner ul li {
  width: 100%;
}
header .HamburgerInner ul li:not(:first-of-type) {
  margin-top: 10px;
}
header .HamburgerInner ul li:nth-of-type(2) {
  margin-top: 24px;
}
header .HamburgerInner ul li:nth-of-type(5) {
  width: calc(50% - 5px);
  margin-top: 20px;
}
header .HamburgerInner ul li:nth-of-type(6) {
  width: calc(50% - 5px);
  margin: 20px 0 0 10px;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.Howto {
  padding: 0 0 30px !important;
}
.Howto h2 {
  position: relative;
  background: var(--key-color-Green);
  margin: 0 20px;
  padding: 4px 4px 6px;
  font-size: 0.875rem;
  color: var(--key-color-Yellow);
  border-radius: 5px;
}
.Howto h2 span {
  position: absolute;
  display: block;
  width: 60px;
  top: -38px;
  left: -14px;
}
.Howto p {
  margin: 0 20px;
  font-size: 0.75rem !important;
}
.Howto ol {
  margin: 0 20px;
}
.Howto ol .step {
  width: 75px;
  margin: 0 auto;
}
.Howto ol > li {
  padding: 10px 10px 16px;
  background: var(--bg-color);
  border-radius: 10px;
}
.Howto ol > li h3 {
  margin-top: 5px;
  font-size: 0.875rem;
  color: var(--key-color-Green);
  text-decoration: underline;
  text-decoration-color: var(--key-color-Yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.Howto ol > li p {
  margin: 10px 0 0;
  text-align: center;
}
.Howto ol > li .NoteList {
  margin: 5px 0 0;
  font-size: 0.625rem;
}
.Howto ol > li .NoteList li {
  text-align: center;
}
.Howto .howtobox {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 0 20px;
  background: var(--bg-color);
  border-radius: 10px;
}
.Howto .howtobox p {
  margin: 0;
}
.Howto .howtobox div {
  width: 95px;
  flex-shrink: 0;
}

.RankQa h1 {
  background: var(--key-color-Green);
  padding: 4px 4px 6px !important;
  font-size: 0.875rem !important;
  color: var(--key-color-Yellow) !important;
  border-radius: 5px;
}

.AccordionWrap button {
  position: relative;
  width: 100%;
  height: auto;
  padding: 8px 28px 10px;
  background-color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  color: #000 !important;
}
.AccordionWrap button::before, .AccordionWrap button::after {
  position: absolute;
  content: "";
  width: 11px;
  height: 2px;
  background: var(--key-color-Green);
  top: 46%;
  right: 15px;
  transition: all 0.2s;
}
.AccordionWrap button.BtnSolidPlus::after {
  transform: rotate(90deg);
}
.AccordionWrap button.BtnSolidMinus::after {
  transform: rotate(0deg);
}
.AccordionWrap .AccordionHidden {
  display: none;
}

.BoxCommon {
  padding: 20px;
  background: rgba(240, 245, 217, 0.7);
  border-radius: 10px;
}
.BoxCommon.BoxCommonR {
  background: #ffe5ea;
}

.BoxAp ol {
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--key-color-DarkGreen);
  text-align: center;
}
.BoxAp ol li:not(:first-of-type) dl {
  margin-top: 20px;
}
.BoxAp ol li .BoxApInner {
  margin-top: 16px;
  background: #fff;
  border-radius: 10px;
}
.BoxAp ol li .BoxApInner a {
  display: block;
  padding: 10px 10px 14px;
  color: #da0217;
}
.BoxAp dl {
  font-size: 0.9375rem;
}
.BoxAp dl dt {
  padding: 0.2em 0 0.3em;
  background: var(--key-color-Green);
  font-size: 0.875rem;
  color: #fff;
  border-radius: 2px;
}
.BoxAp dl dd {
  margin-top: 10px;
}

.BoxCancel {
  padding: 10px 10px 10px 16px;
  background: rgba(250, 218, 218, 0.7);
}
.BoxCancel > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.BoxCancel > div p {
  color: #e43434;
  font-weight: 600;
}
.BoxCancel > div p span {
  display: inline-block;
  width: 24px;
  margin: 0 4px 0 12px;
  vertical-align: -30%;
}
.BoxCancel > div a {
  display: block;
  padding: 10px 20px 11px;
  background: #969696;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
}

/*ページレイアウト*/
#MainContents {
  max-width: 460px;
  margin: 0 auto;
}

/*ヘッダー*/
#LowerHeader {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  border-bottom: 1px solid #fff;
}
#LowerHeader img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*フッター*/
#CommonFooter {
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  border-top: solid 1px #fff;
  background: #cbe59d;
  max-width: 460px;
  z-index: 1;
}
#CommonFooter .FooterID {
  font-size: 0.6875rem;
  line-height: 1;
}
#CommonFooter .FooterID span {
  padding: 3px 13px 4px;
  display: inline-block;
  background: #fff;
  border-radius: 300px;
}
#CommonFooter aside {
  padding: 15px 0 0;
  font-size: 0.6875rem;
}
#CommonFooter.TopFooter {
  padding-bottom: 120px;
}
#CommonFooter.LpFooter {
  padding-bottom: 160px;
}
#CommonFooter.LpFooter aside {
  padding: 0;
}
#CommonFooter.CommonFooterCopy aside {
  padding: 0;
}

article h1,
main h1 {
  width: 100%;
  position: relative;
  font-size: 1.375rem;
  font-weight: bold;
}
article h1 span,
main h1 span {
  letter-spacing: -0.2em;
}
@media (max-width: 375px) {
  article h1,
  main h1 {
    font-size: 1.25rem;
    letter-spacing: -0.05em;
  }
}
article h1.TitleS,
main h1.TitleS {
  font-size: 1rem;
}
article h2,
main h2 {
  padding: 30px 0 0;
}

.ContentsInner {
  margin: 0 22px;
}

.InputTit {
  display: inline;
  padding: 8px 14px 8px 8px;
  background: var(--key-color-Green);
  font-size: 0.8125rem;
  border-radius: 100px;
  color: #fff;
}
.InputTit img {
  display: inline;
  width: 21px;
  margin-right: 6px;
}

.InputBox {
  padding: 20px 20px 20px;
  background: var(--key-color-YLightGreen);
  border-radius: 20px;
}
.InputBox dl dt {
  font-size: 1.25rem;
  font-weight: 700;
}
.InputBox dl dd input {
  width: 140px;
  margin: 10px 0 0 20px;
  box-sizing: border-box;
  font-size: 3.125rem;
  font-weight: 800;
  color: var(--key-color-DarkGreen);
  border-radius: 10px;
  text-align: center;
}
.InputBox dl dd input::placeholder {
  font-size: 3.125rem;
  font-weight: 800;
  color: #e5e5e5;
}
.InputBox dl dd span.InputBoxTxt {
  padding-left: 0.4em;
  font-size: 0.9375rem;
  font-weight: 700;
  vertical-align: -160%;
}
.InputBox .InputBoxNote {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px 4px 14px;
  background: rgba(240, 245, 217, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--key-color-DarkGreen);
  border-radius: 100px;
}
.InputBox .InputBoxNote .InputBoxNoteTxt {
  padding: 0 4px;
  font-size: 0.9375rem;
}

.InputBoxError {
  margin-top: 10px;
  padding: 4px;
  background: #da2129;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
}

.InputPointBox {
  position: relative;
  padding: 10px;
  background: #fff;
  border: solid 1px var(--key-color-YGreen);
  border-radius: 20px;
}
.InputPointBox::before {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 11px solid var(--key-color-YGreen);
  border-top: 0;
  top: -11.5px;
  right: 0;
  left: 0;
}
.InputPointBox::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 11px solid #fff;
  border-top: 0;
  top: -10px;
  right: 0;
  left: 0;
}
.InputPointBox .Point {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.InputPointBox .Point dt {
  padding: 6px 14px 6px 32px;
  background: url(https://i-lohas-cp.jp/cp001/images/icon_point_s.png) left 8px top 50%/20px auto no-repeat var(--key-color-Green);
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  border-radius: 100px;
}
.InputPointBox .Point dt img {
  display: inline-block;
  width: 20px;
}
.InputPointBox .Point dd {
  padding-right: 10px;
}
.InputPointBox .Point dd .PointNum {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--key-color-Orange);
}
.InputPointBox .Point dd .PointNum.-Num0 {
  color: #e5e5e5;
}
.InputPointBox .Point dd .PointTxt {
  margin-left: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: 10%;
}
.InputPointBox .PointBreakdown {
  margin-top: 10px;
  padding-top: 10px;
  border-top: solid 1px var(--key-color-YGreen);
}
.InputPointBox .PointBreakdownInner dt {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--key-color-Green);
}
.InputPointBox .PointBreakdownInner dd ul {
  margin: 10px 0;
}
.InputPointBox .PointBreakdownInner dd ul li {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  font-weight: 700;
}
.InputPointBox .PointBreakdownInner dd ul li:not(:first-of-type) {
  margin-top: 5px;
}
.InputPointBox .PointBreakdownInner dd ul li span {
  display: block;
}
.InputPointBox .PointBreakdownInner dd ul li span:nth-of-type(2) {
  width: 50px;
  text-align: right;
  overflow-wrap: break-word;
}
.InputPointBox .PointBreakdownInner dd ul li span:last-of-type {
  width: 90px;
  text-align: right;
  overflow-wrap: break-word;
}
.InputPointBox .PointBreakdownInner dd ul li span > span {
  display: inline;
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownRank {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 100px;
  padding: 0.2em 0 0.4em;
  font-size: 0.6875rem;
  border-radius: 100px;
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownRank::before, .InputPointBox .PointBreakdownInner dd ul li span.BreakdownRank::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background: var(--key-color-YGreen);
  top: 50%;
  right: -30px;
  transform: rotate(45deg);
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownRank::after {
  transform: rotate(-45deg);
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownQ {
  position: relative;
  margin-right: 4px;
  font-size: 0.9375rem;
  color: var(--key-color-DarkGreen);
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownQ::before, .InputPointBox .PointBreakdownInner dd ul li span.BreakdownQ::after {
  position: absolute;
  content: "";
  display: block;
  width: 7px;
  height: 1px;
  background: var(--key-color-YGreen);
  top: 42%;
  right: -40px;
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownQ::after {
  top: 58%;
}
.InputPointBox .PointBreakdownInner dd ul li span.BreakdownP {
  margin-right: 4px;
  font-size: 0.9375rem;
  color: var(--key-color-Orange);
}
.InputPointBox .PointBreakdownInner dd ul li.Point1st .BreakdownRank {
  background: var(--key-color-Orange);
  color: #fff;
}
.InputPointBox .PointBreakdownInner dd ul li.PointBronze .BreakdownRank {
  background: linear-gradient(90deg, #784b2f 0%, #fff4e8 40%, #fff4e8 60%, #d6b295 100%);
}
.InputPointBox .PointBreakdownInner dd ul li.PointSilver .BreakdownRank {
  background: linear-gradient(90deg, #92959c 0%, #fcfefe 40%, #fcfefe 60%, #92959c 100%);
}
.InputPointBox .PointBreakdownInner dd ul li.PointGold .BreakdownRank {
  background: linear-gradient(90deg, #dbb33a 0%, #fffacc 40%, #fffacc 60%, #eab842 100%);
}
.InputPointBox .PointBreakdownInner dd ul li.PointPlatinum .BreakdownRank {
  background: linear-gradient(90deg, #a9b9cd 0%, #d1bed2 20%, #fffeff 40%, #eee0d7 60%, #6c6d96 90%, #b4b5c9 100%);
}

.GetPointBox {
  padding: 20px;
  background: url(https://i-lohas-cp.jp/cp001/images/getpointbg.png) center top 50%/cover no-repeat #dcf8fb;
  border-radius: 20px;
}
.GetPointBox dl dt {
  display: inline;
  padding: 4px 12px 6px;
  background: var(--key-color-Green);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  border-radius: 100px;
}
.GetPointBox dl dd {
  margin-top: 6px;
}
.GetPointBox dl dd .PointNum {
  margin-left: 45px;
  font-size: 3.4375rem;
  font-weight: 800;
  color: var(--key-color-Orange);
}
.GetPointBox dl dd .PointTxt01 {
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 10%;
}
.GetPointBox dl dd .PointTxt02 {
  margin-left: 6px;
  font-size: 1.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.GetPointBox dl dd .PointTxt02 span {
  color: var(--key-color-Orange);
}
.GetPointBox.SelectPointBox dl dd {
  margin-top: 0;
}

.GetSelectPointBox {
  padding: 20px;
  border: solid 1px #ccc;
  border-radius: 20px;
}
.GetSelectPointBox dl dt {
  display: inline;
  padding: 2px 16px 4px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  border-radius: 100px;
}
.GetSelectPointBox dl dt._pay {
  background: #ff0033;
}
.GetSelectPointBox dl dt._raku {
  background: #bf0000;
}
.GetSelectPointBox dl dt._d {
  background: #cc0033;
}
.GetSelectPointBox dl dt._v {
  background: #034099;
}
.GetSelectPointBox dl dt sup {
  font-size: 0.625rem;
  vertical-align: 30%;
}
.GetSelectPointBox dl dd {
  margin: 10px 20px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}
.GetSelectPointBox dl dd ._pay {
  color: #ff0033;
}
.GetSelectPointBox dl dd ._raku {
  color: #bf0000;
}
.GetSelectPointBox dl dd ._d {
  color: #cc0033;
}
.GetSelectPointBox dl dd ._v {
  color: #034099;
}
.GetSelectPointBox dl dd > span {
  display: flex;
  align-items: center;
}
.GetSelectPointBox dl dd img {
  width: 55px;
  margin: 0 auto;
}
.GetSelectPointBox dl dd .PointNum {
  margin-left: 14px;
  font-size: 3.4375rem;
  font-weight: 800;
}
.GetSelectPointBox dl dd .PointTxt01 {
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.GetPointNum {
  padding: 10px;
  background: #fff;
  border: solid 1px var(--key-color-DarkGreen);
  color: var(--key-color-DarkGreen);
  border-radius: 10px;
}

.LoadTit {
  position: relative;
  display: inline;
  padding: 10px 40px;
  background: var(--key-color-YLightGreen);
  font-size: 0.9375rem;
  color: var(--key-color-DarkGreen);
  border-radius: 100px;
}
.LoadTit::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  border-top: 16px solid var(--key-color-YLightGreen);
  border-bottom: 0;
  bottom: -8px;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.LoadPic {
  width: 100%;
  max-width: 250px;
}

.HistoryTit {
  display: inline;
  padding: 6px 14px 8px;
  background: var(--key-color-YLightGreen);
  font-size: 0.8125rem;
  border-radius: 100px;
  color: var(--key-color-DarkGreen);
}

.HistoryBody {
  padding: 0 0 20px;
}
.HistoryBody table {
  margin-top: 20px;
  padding-bottom: 10px;
  width: 100%;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}
.HistoryBody table tr:not(:first-of-type) th {
  border-top: 1px solid #fff;
}
.HistoryBody table tr:not(:first-of-type) td {
  border-top: 1px solid #fff;
}
.HistoryBody table th {
  background: var(--key-color-YLightGreen);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: normal;
  color: var(--key-color-DarkGreen);
  padding: 10px 3px;
  width: 70px;
  box-sizing: border-box;
  vertical-align: middle;
  font-weight: 600;
}
.HistoryBody table td {
  background: rgba(240, 245, 217, 0.7);
  text-align: left;
  font-size: 0.8125rem;
  color: #000;
  padding: 10px;
  vertical-align: middle;
  line-height: 1.4;
}
.HistoryBody table a {
  margin-bottom: 6px;
}
.HistoryBody table .HistoryLoad {
  display: block;
  width: 100%;
  padding: 4px 0 6px;
  background: #fff;
  border-radius: 100px;
  font-weight: 600;
  color: #555;
  text-align: center;
}
.HistoryBody table .HistoryFailure {
  display: block;
  width: 100%;
  padding: 4px 0 6px;
  background: #555;
  border-radius: 100px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.HistoryBody table .HistoryFailureTxt {
  margin-top: 0.4em;
  font-size: 0.625rem;
  color: #555;
}
.HistoryBody table .HistoryBreakdown {
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border-radius: 2px;
}
.HistoryBody table .HistoryBreakdown ul li {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 0.625rem;
}
.HistoryBody table .HistoryBreakdown ul li span {
  display: block;
}
.HistoryBody table .HistoryBreakdown ul li span > span {
  display: inline;
}
.HistoryBody table .HistoryBreakdown ul li span.BreakdownRank {
  position: relative;
  padding-right: 15px;
}
.HistoryBody table .HistoryBreakdown ul li span.BreakdownRank::before, .HistoryBody table .HistoryBreakdown ul li span.BreakdownRank::after {
  position: absolute;
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: #888;
  top: 50%;
  right: 3px;
  transform: rotate(45deg);
}
.HistoryBody table .HistoryBreakdown ul li span.BreakdownRank::after {
  transform: rotate(-45deg);
}
.HistoryBody table .HistoryBreakdown ul li span.BreakdownQ {
  position: relative;
  padding-right: 15px;
}
.HistoryBody table .HistoryBreakdown ul li span.BreakdownQ::before, .HistoryBody table .HistoryBreakdown ul li span.BreakdownQ::after {
  position: absolute;
  content: "";
  display: block;
  width: 7px;
  height: 1px;
  background: #888;
  top: 42%;
  right: 4px;
}
.HistoryBody table .HistoryBreakdown ul li span.BreakdownQ::after {
  top: 58%;
}

.HistoryPagenation {
  padding-top: 7px;
}
.HistoryPagenation aside {
  display: inline;
  padding: 4px 20px 6px;
  background: var(--key-color-YLightGreen);
  font-size: 0.75rem;
  color: var(--key-color-DarkGreen);
  border-radius: 100px;
}
.HistoryPagenation nav {
  margin-top: 40px;
}
.HistoryPagenation nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.HistoryPagenation nav ul li {
  margin: 0 5px 0;
  font-size: 0.875rem;
  line-height: 1;
}
@media (max-width: 375px) {
  .HistoryPagenation nav ul li {
    margin: 0 3px 0;
  }
}
.HistoryPagenation nav ul li a {
  display: block;
  padding: 7px 5px;
  min-width: 32px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #fff;
  background: var(--key-color-Green);
}
.HistoryPagenation nav ul li.HistoryPageArrowLeft, .HistoryPagenation nav ul li.HistoryPageArrowRight {
  border: none;
}
.HistoryPagenation nav ul li.HistoryPageArrowLeft a, .HistoryPagenation nav ul li.HistoryPageArrowRight a {
  padding: 0;
  background: none;
}
.HistoryPagenation nav ul li.HistoryPageArrowLeft a img, .HistoryPagenation nav ul li.HistoryPageArrowRight a img {
  display: inline;
  width: 20px;
}
.HistoryPagenation nav ul li span {
  display: block;
  padding: 7px 5px;
  min-width: 32px;
  box-sizing: border-box;
  border-radius: 5px;
  background: #fff;
  font-weight: 700;
  color: var(--key-color-Green);
}

.InputBodyForm.InputBodyFormConfirm dl {
  padding-bottom: 15px;
}
.InputBodyForm.InputBodyFormConfirm dl:not(:first-of-type, :last-of-type) {
  border-top: 1px solid var(--key-color-YGreen);
}
.InputBodyForm .FormErrorWrap {
  padding: 4px;
  background: #da2129;
  border-radius: 5px;
  color: #fff;
}
.InputBodyForm h2.FormH2Tit {
  margin-top: 20px;
  padding-top: 20px;
  border-top: solid 1px var(--key-color-YGreen);
}
.InputBodyForm dl {
  padding: 15px 0 5px;
  text-align: left;
}
.InputBodyForm dl.FormOverflow dt {
  text-align: center !important;
}
.InputBodyForm dl.FormOverflow dd {
  overflow: auto;
  height: 130px;
  margin-top: 8px;
  padding: 10px 10px;
  background: rgba(240, 245, 217, 0.7);
  border-radius: 5px;
}
.InputBodyForm dt {
  font-size: 14px;
  color: var(--key-color-Green);
  font-weight: 700;
}
.InputBodyForm dt span {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 6px;
  background: var(--key-color-Orange);
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.InputBodyForm dd {
  padding: 5px 0 0;
}
.InputBodyForm dd.imgPreview img {
  display: block;
  width: 50%;
  margin: 10px auto 0;
}
.InputBodyForm dd.imgPreview img:first-child {
  margin-top: 0;
}
.InputBodyForm dd p {
  padding: 5px 0 !important;
}
.InputBodyForm dd p.FormCation {
  font-size: 12px !important;
}
.InputBodyForm dd p.FormCation a {
  text-decoration: underline !important;
}
.InputBodyForm dd p.FormCation.FormError {
  box-sizing: border-box;
  margin-top: 5px;
  padding: 5px 10px !important;
  background: #da2129;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
}
.InputBodyForm dd p._txtcenter {
  text-align: center;
}
.InputBodyForm dd.CheckedColor {
  color: #999;
}
.InputBodyForm dd.CheckedColor label.CheckEtc {
  color: #555;
}
.InputBodyForm dd input.CheckEtc2Form {
  opacity: 0.3;
}
.InputBodyForm dd input,
.InputBodyForm dd select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 3px;
  padding: 6px 6px;
  background: rgba(240, 245, 217, 0.7);
  border-radius: 5px;
  color: #000;
}
.InputBodyForm dd input:-ms-input-placeholder,
.InputBodyForm dd textarea:-ms-input-placeholder {
  color: #999;
  font-size: 13px;
}
.InputBodyForm dd input::placeholder,
.InputBodyForm dd textarea::placeholder {
  color: #999;
  font-size: 13px;
}
.InputBodyForm dd input[type=file] {
  display: block;
  margin-top: 5px;
}
.InputBodyForm dd input[type=file]:first-child {
  margin-top: 3px;
}
.InputBodyForm dd .InputError {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  padding: 3px 6px;
  background: #f00;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.InputBodyForm dd span {
  display: block;
}
.InputBodyForm dd.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.InputBodyForm dd.flex > * + * {
  margin-left: 2%;
}
.InputBodyForm dd.flex input {
  width: 49%;
}
.InputBodyForm dd.flex .InputError {
  margin-left: 0;
}
.InputBodyForm dd .input_min {
  width: 72px !important;
}
.InputBodyForm .BtnEntryCheck label {
  border: solid 2px var(--key-color-Green);
  background: #fff;
  border-radius: 100px;
}
.InputBodyForm input[type=checkbox] {
  position: relative;
  top: -0.2em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
  background: var(--key-color-YLightGreen);
  border: 1px solid var(--key-color-YLightGreen);
  border-radius: 2px;
  outline: none;
  vertical-align: text-bottom;
}
.InputBodyForm input[type=checkbox]:checked::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 1px;
  transform: rotate(45deg);
  display: block;
  width: 5px;
  height: 2px;
  background: var(--key-color-Green);
}
.InputBodyForm input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 2px;
  transform: rotate(40deg);
  display: block;
  width: 2px;
  height: 8px;
  background: var(--key-color-Green);
}
.InputBodyForm input[type=radio] {
  position: relative;
  top: -0.1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 500px;
  outline: none;
  vertical-align: text-bottom;
}
.InputBodyForm input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 500px;
  line-height: 1.6;
}
.InputBodyForm label {
  display: block;
  padding: 5px 0 5px 1.3em;
  text-indent: -1.3em;
  font-size: 14px;
}
.InputBodyForm textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 3px;
  padding: 3px 6px;
  background: rgba(240, 245, 217, 0.7);
  border-radius: 5px;
}

.NoteList {
  padding: 0;
  text-align: left;
  font-size: 0.75rem;
}
.NoteList.NoteListT14 {
  font-size: 0.875rem !important;
}
.NoteList._txtcenter {
  text-align: center;
}
.NoteList._fcR {
  color: #da2129;
}
.NoteList._fcR a {
  color: #da2129;
}
.NoteList li {
  text-indent: -1em;
  padding-left: 1em;
}
.NoteList li.TxtG {
  color: var(--key-color-DarkGreen);
}
.NoteList li.TxtG a {
  color: var(--key-color-DarkGreen);
}
.NoteList li:not(:first-of-type) {
  margin-top: 0.4em;
}
.NoteList.NoteListDot li {
  text-indent: -0.5em;
  padding-left: 0.5em;
}

.Target {
  margin: 0 22px;
}
.Target h2 {
  padding-top: 0;
  position: relative;
  font-size: 1.25rem;
}
.Target h2::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 4px;
  background: linear-gradient(90deg, #068600, #068600 50%, #8fc41e 50%, #8fc41e 100%);
  right: 0;
  left: 0;
  bottom: -18px;
  margin: 0 auto;
  border-radius: 100px;
}
.Target h3 {
  font-size: 1.12rem;
}
.Target p {
  font-size: 0.6875rem;
  color: var(--key-color-Green);
  font-weight: 600;
}
.Target div {
  border: solid 1px #8fc41e;
  border-radius: 20px;
  overflow: hidden;
}
.Target ul:not(:first-of-type) {
  padding-top: 10px;
  border-top: solid 1px #fff;
}

.RankWrap {
  padding: 30px 0;
  background: var(--key-color-YLightGreen);
}
.RankWrap .MyRank {
  display: flex;
  align-items: center;
  margin: 0 22px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.RankWrap .MyRank dt {
  width: 69px;
  flex-shrink: 0;
}
.RankWrap .MyRank dd {
  position: relative;
  width: 100%;
}
.RankWrap .MyRank dd span {
  display: block;
  width: 160px;
  margin-left: 14%;
}
.RankWrap .MyRank dd a {
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto 0;
}
.RankWrap .RankBoard {
  background: #f3f7e5;
  border-radius: 10px;
  margin: 20px 22px 0;
  padding: 10px 0 44px;
}
.RankWrap .RankBoard .RankBoardTxt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
  border-bottom: solid 3px #ffff05;
}
.RankWrap .RankBoard .RankBoardTxt span {
  display: block;
}
.RankWrap .RankBoard .RankBoardTxt span.txt01 {
  width: 25px;
}
.RankWrap .RankBoard .RankBoardTxt span.num {
  min-width: 40px;
  margin-top: -6px;
  font-weight: 800;
  font-size: 1.625rem;
  color: var(--key-color-Green);
}
.RankWrap .RankBoard .RankBoardTxt span.txt02 {
  width: 56px;
}
.RankWrap .RankBoard .RankBoardTxt span.txt03 {
  width: 111px;
}
.RankWrap .RankBoard .RankBoardTxt span.badge {
  width: 69px;
  margin-top: -2px;
  padding: 0 4px;
}
.RankWrap .RankBoard .RankBoardTxt span.badge.badgemax {
  width: 116px;
}
.RankWrap .RankBoard .RankBoardTxt span.badgecomp {
  width: 270px;
  padding-bottom: 4px;
}
.RankWrap .RankBoard .RankScaleWrap {
  margin-top: 40px;
  margin-left: -3px;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale {
  position: relative;
  width: 315px;
  height: 17px;
  margin: 0 auto;
  background: url(https://i-lohas-cp.jp/cp001/images/rank_b_scale.png) center top/contain no-repeat;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale._s {
  background: url(https://i-lohas-cp.jp/cp001/images/rank_s_scale.png) center top/contain no-repeat;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale._g {
  background: url(https://i-lohas-cp.jp/cp001/images/rank_g_scale.png) center top/contain no-repeat;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale._p {
  background: url(https://i-lohas-cp.jp/cp001/images/rank_p_scale.png) center top/contain no-repeat;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .graph {
  position: absolute;
  min-width: 20px;
  height: 17px;
  background: url(https://i-lohas-cp.jp/cp001/images/rank_graph.png) center top/1px auto repeat-x;
  border-radius: 100px;
  transition: width 1800ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: width;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .graph .graphtop {
  position: absolute;
  width: 9px;
  height: 17px;
  top: 0;
  right: 0;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .graph .comment {
  position: absolute;
  width: 63px;
  height: 32px;
  background: url(https://i-lohas-cp.jp/cp001/images/rank_comment.png) center top 2px/contain no-repeat;
  top: -36px;
  right: -30px;
  z-index: 1;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .graph .comment .commentinner {
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--key-color-Green);
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .graph .comment .commentinner span {
  margin: 0 1px 0;
  font-size: 1.12rem;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .graph .comment.comment100 {
  right: -8px;
  letter-spacing: -0.06em;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .badge {
  position: absolute;
  width: 26px;
  left: -1px;
  top: -4px;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .badgenext {
  position: absolute;
  width: 56px;
  right: -8px;
  top: -16px;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .comment1st {
  position: absolute;
  width: 110px;
  bottom: -33px;
  left: 67px;
}
.RankWrap .RankBoard .RankScaleWrap .RankScale .commentmax {
  position: absolute;
  width: 46px;
  right: -3px;
  bottom: -41px;
}

.ForestWrap {
  position: relative;
  width: 100%;
  height: 41.866vw;
  max-height: 192px;
}
.ForestWrap dl {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.ForestWrap dl dt {
  width: 253px;
  margin: 0 auto;
}
.ForestWrap dl dd span {
  display: block;
}
.ForestWrap dl dd .ForestTxt {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ForestWrap dl dd .ForestTxt .ForestTxt01 {
  width: 30px;
  margin-top: 20px;
}
.ForestWrap dl dd .ForestTxt .ForestNum {
  padding: 0 4px;
  font-size: 3rem;
  font-weight: 800;
  color: var(--key-color-Green);
  line-height: 1;
}
.ForestWrap dl dd .ForestTxt .ForestNum > span {
  display: inline;
  font-size: 2.5rem;
  vertical-align: 0.15em;
}
.ForestWrap dl dd .ForestTxt .ForestTxt02 {
  width: 55px;
  margin-top: 20px;
}
.ForestWrap dl dd .ForestTxt03 {
  width: 105px;
  margin: 4px auto 0;
}

.HomeIcon {
  padding: 20px 15px 20px;
  border-radius: 5px;
  background: rgba(240, 245, 217, 0.7);
  border-radius: 20px;
}
.HomeIcon h2 {
  position: relative;
  padding: 4px 0;
  font-size: 1.0625rem;
  color: var(--key-color-DarkGreen);
  font-weight: 800;
}
.HomeIcon h2::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 35px;
  background: var(--key-color-Green);
  top: 0;
  left: 30px;
  transform: rotate(-30deg);
}
.HomeIcon h2::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 35px;
  background: var(--key-color-Green);
  top: 0;
  right: 30px;
  transform: rotate(30deg);
}
.HomeIcon .HomeIconInner {
  padding: 15px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.HomeIcon .HomeIconInner .HomeIconInnerImg {
  width: 128px;
  flex-shrink: 0;
}
.HomeIcon .HomeIconInner .HomeIconInnerTxt {
  width: 100%;
  margin-left: 6px;
}
.HomeIcon .HomeIconInner .HomeIconInnerTxt button {
  min-height: 38px;
  font-size: 0.75rem;
}
.HomeIcon .HomeIconInner .HomeIconInnerTxt button::after {
  right: 14px;
}
.versionNotice {
  margin-top: 15px;
}
.versionNotice li {
  font-size: 0.625rem;
  text-align: left;
  padding: 0 0 0 1em !important;
  text-indent: -1em;
}

.HomeIcon .AccordionWrap {
  margin-top: 20px;
  background-color: #fff;
  border: solid 1px var(--key-color-Green);
  border-radius: 2px;
}
.HomeIcon .AccordionWrap .HomeIconEx {
  padding: 0 15px 20px;
}
.HomeIcon .AccordionWrap .HomeIconEx h3 {
  margin-top: 10px;
  padding: 4px 0;
  background-color: var(--key-color-Green);
  border-radius: 2px;
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
}
.HomeIcon .AccordionWrap .HomeIconEx ol li {
  margin-top: 0.6em;
  padding-left: 1.3em;
  text-indent: -1.3em;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.6em;
}
.HomeIcon .AccordionWrap .HomeIconEx ol li img {
  display: inline;
}
.HomeIcon .AccordionWrap .HomeIconEx ol li img.MiniAppImg01 {
  width: 132px;
  margin-right: 2px;
  vertical-align: -48%;
}
.HomeIcon .AccordionWrap .HomeIconEx ol li img.MiniAppImg02 {
  width: 17px;
  vertical-align: -23%;
}
.HomeIcon .AccordionWrap .HomeIconEx ol li img.MiniAppImg03 {
  width: 17px;
  vertical-align: -23%;
}

.IndexDocuments section {
  padding: 15px 0 0;
}
.IndexDocuments section:first-child {
  padding: 0;
}
.IndexDocuments h1 {
  cursor: pointer;
  padding: 15px 20px;
}
.IndexDocuments .IndexDocumentsList {
  padding: 30px 20px;
  background: #fff;
}
.IndexDocuments .IndexDocumentsList li:not(:first-of-type) {
  margin-top: 10px;
}
.IndexDocuments .IndexDocumentsHidden {
  display: none;
  border-radius: 0 0 5px 5px;
  background: #e6e6e6;
  padding: 7px 15px 15px;
  color: #000;
  text-justify: inter-cluster;
  text-align: justify;
  line-break: strict;
  word-break: break-all;
}
.IndexDocuments .IndexDocumentsHidden.IndexDocumentsFaq h2 {
  padding-top: 30px;
  font-size: 0.875rem;
}
.IndexDocuments .IndexDocumentsHidden.IndexDocumentsFaq h2:first-child {
  padding-top: 15px;
}
.IndexDocuments .IndexDocumentsHidden h1 {
  font-size: 0.875rem;
  padding: 15px 0 7px;
  border-bottom: 1px solid #000;
  cursor: auto;
}
.IndexDocuments .IndexDocumentsHidden h2 {
  padding-top: 15px;
  font-size: 0.875rem;
}
.IndexDocuments .IndexDocumentsHidden h3 {
  padding-top: 7px;
  font-size: 0.75rem;
}
.IndexDocuments .IndexDocumentsHidden p {
  padding-top: 7px;
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}
.IndexDocuments .IndexDocumentsHidden p .TxtBold {
  font-weight: bold;
}
.IndexDocuments .IndexDocumentsHidden ul,
.IndexDocuments .IndexDocumentsHidden ol {
  padding-top: 7px;
}
.IndexDocuments .IndexDocumentsHidden ul.IndexDocumentsIndent li,
.IndexDocuments .IndexDocumentsHidden ol.IndexDocumentsIndent li {
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.IndexDocuments .IndexDocumentsHidden a {
  color: #000;
  text-decoration: underline;
}
.IndexDocuments .IndexDocumentsHidden dl {
  padding-top: 7px;
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}
.IndexDocuments .IndexDocumentsClose {
  margin: 15px 60px 0;
  text-align: center;
}
.IndexDocuments .IndexDocumentsClose .BtnSolidMinus {
  cursor: pointer;
  padding: 10px 15px;
  font-size: 0.75rem;
}

.DocumentsListWrap {
  margin-top: 30px;
  padding-top: 30px;
  border-top: solid 1px #fff;
}
.DocumentsListWrap .DocumentsList {
  width: calc(100% - 24px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.DocumentsListWrap .DocumentsList li {
  width: calc(50% - 5px);
}
.DocumentsListWrap .DocumentsList li.DocumentsListQa {
  width: 100%;
}

.AccordionQA .AccordionWrap {
  background: rgba(240, 245, 217, 0.7);
  padding: 12px;
  font-size: 0.875rem;
  text-align: left;
  border-radius: 10px;
}
.AccordionQA .AccordionWrap:not(:first-of-type) {
  margin-top: 10px;
}
.AccordionQA .AccordionWrap button {
  padding: 0 34px 2px 0;
  text-align: left;
  font-size: 0.875rem;
  background: none;
  color: var(--key-color-DarkGreen) !important;
}
.AccordionQA .AccordionWrap button::before, .AccordionQA .AccordionWrap button::after {
  right: 4px;
}
.AccordionQA .AccordionWrap .AccordionHidden {
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 2px;
}
.AccordionQA .AccordionWrap .CircleList > li {
  margin: 5px 0 0 1em;
  position: relative;
}
.AccordionQA .AccordionWrap .CircleList > li::after {
  content: "・";
  position: absolute;
  color: var(--key-color-1);
  top: 0;
  left: -0.8em;
}

html.ModalOpen {
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}
html.ModalOpen.iphone {
  height: 100vh;
}
html.ModalOpen body {
  position: fixed;
  left: 0;
  width: 100%;
}
@media (orientation: landscape) {
  html.ModalOpen.ModalLandscape {
    overflow-y: visible !important;
    position: static !important;
  }
}
@media (orientation: landscape) {
  html.ModalOpen.ModalLandscape body {
    position: relative !important;
    top: 0 !important;
  }
}
@media (orientation: landscape) {
  html.ModalOpen.ModalLandscape .ModalCover {
    position: absolute !important;
    overflow-y: visible !important;
  }
}
@media (orientation: landscape) {
  html.ModalOpen.ModalLandscape .ModalCover .ModalOuter {
    align-items: flex-start !important;
  }
}

@-ms-viewport {
  width: auto;
}
.ModalCover {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999999999999;
  transition: 0.3s 0.2s;
}
.ModalCover .ModalOuter {
  display: table;
  height: 100%;
  margin: 0 auto;
}
.ModalCover .ModalInner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 60px);
  max-width: 400px;
  text-align: center;
  z-index: 1000;
}
.ModalCover.ModalCoverRankUp {
  background: rgba(0, 0, 0, 0.8);
}
.ModalCover.ModalCoverRankUp .ModalBnr {
  position: absolute;
  right: -30px;
  top: 60px;
}
.ModalCover.ModalCoverRankUp .ModalBnr > div {
  width: 280px;
  padding: 8px 20px 10px 30px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 100px;
  text-align: left;
  box-sizing: border-box;
}
.ModalCover.ModalCoverRankUp .ModalBnr .ModalBnrReceipt {
  background-color: var(--key-color-Green);
}
.ModalCover.ModalCoverRankUp .ModalBnr .ModalBnrReceipt span {
  display: block;
  font-size: 0.6875rem;
}
.ModalCover.ModalCoverRankUp .ModalBnr .ModalBnrRank {
  position: relative;
  background-color: var(--key-color-YGreen);
}
.ModalCover.ModalCoverRankUp .ModalBnr .ModalBnrRank span {
  position: absolute;
  display: block;
  width: 52px;
  top: -4px;
  right: 40px;
}

._Close {
  position: absolute;
  width: calc(100% - 60px);
  padding: 10px 0;
  right: 0;
  left: 0;
  bottom: -50px;
  margin: 0 auto;
  cursor: pointer;
  z-index: 999999999999999;
}

.Modal {
  color: #000;
  background: #fff;
  width: calc(100% - 60px);
  min-width: 300px;
  max-width: 460px;
  max-height: calc(100svh - 180px);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
  overflow-y: auto;
  border: solid 1px var(--key-color-Green);
}
.Modal > div {
  height: calc(100% - 60px);
  padding: 30px 20px 30px;
}
.Modal.ModalFullImg {
  border: none;
  background: none;
}
.Modal.ModalFullImg > div {
  padding: 0;
}
.Modal._wide {
  margin: 0 auto;
}
.Modal.ModalGetPoint {
  padding: 70px 20px;
}
.Modal h1 {
  font-size: 1.12rem;
  padding-bottom: 15px;
  color: var(--key-color-Green);
}
.Modal h1 span {
  font-size: 2.125rem;
}
.Modal h1.ModalTitleOnly {
  padding: 15px 0;
}
.Modal h1.ModalErrorTitle {
  color: #000;
}
.Modal figure {
  padding-bottom: 15px;
}
.Modal figure img {
  width: 100%;
  max-width: 420px;
}
.Modal p {
  text-align: left;
  font-size: 0.875rem;
}
.Modal p + p {
  margin-top: 10px;
}
.Modal .overIsScroll {
  border: 1px solid #eee;
  border-radius: 3px;
  max-height: 50vh;
  overflow: auto;
  padding: 1em;
  text-align: left;
  font-size: 0.75rem;
}
.Modal .overIsScroll li + li {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #eee;
}
.Modal .overIsScroll .time {
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.8em;
}
.Modal.ModalAge {
  min-width: 300px;
}
.Modal.ModalAge > div {
  padding: 16px 20px 20px;
}
.Modal.ModalAge p {
  font-size: 0.75rem;
}
.Modal.ModalAge .CheckAgeOver {
  display: block;
  font-size: 1rem;
  padding: 0;
}
.Modal.ModalAge nav {
  margin-top: 8px;
}
.Modal.ModalAge nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
}
.Modal.ModalAge nav ul li {
  width: calc(50% - 5px);
}
.Modal.ModalAge nav ul li .BtnCommon, .Modal.ModalAge nav ul li .BtnGraGreen, .Modal.ModalAge nav ul li .BtnGraBlue, .Modal.ModalAge nav ul li .BtnGraLightreen {
  min-height: 30px;
}
.Modal.ModalAge label.ageCheckLabel {
  position: relative;
  display: block;
  margin-top: 16px;
  padding: 6px;
  background: #ccc;
  font-size: 0.6875rem;
  line-height: 1.4;
  border-radius: 100px;
  cursor: pointer;
}
.Modal.ModalAge label.ageCheckLabel::before {
  position: absolute;
  content: "";
  border: 2px solid #eee;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.Modal.ModalAge label.ageCheckLabel::after {
  position: absolute;
  content: "";
  background-color: #ccc;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.Modal.ModalAge input.ageCheckBox {
  position: absolute;
  display: block;
  white-space: nowrap;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}
.Modal.ModalAge input.ageCheckBox:checked + label {
  background: var(--key-color-Orange);
  color: #fff;
}
.Modal.ModalAge input.ageCheckBox:checked + label::before {
  border-color: #fff;
}
.Modal.ModalAge input.ageCheckBox:checked + label::after {
  background-color: #fff;
}
.Modal.DocumentsModal h1 {
  width: auto;
  padding: 0;
}
.Modal.DocumentsModal h2 {
  padding: 14px 0 0;
  text-align: left;
  font-size: 0.75rem;
}
.Modal.DocumentsModal p {
  font-size: 0.75rem !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
}
.Modal.DocumentsModal ul,
.Modal.DocumentsModal ol {
  padding: 8px 0 0;
}
.Modal.DocumentsModal ul li,
.Modal.DocumentsModal ol li {
  text-align: left;
  font-size: 0.75rem;
  padding-left: 1em;
  text-indent: -1em;
}
.Modal.DocumentsModal ul li:not(:first-of-type),
.Modal.DocumentsModal ol li:not(:first-of-type) {
  padding-top: 4px;
}
.Modal.ModalPoint dl {
  padding: 20px;
  border: solid 1px #ccc;
  border-radius: 20px;
}
.Modal.ModalPoint dl dt {
  display: inline;
  padding: 2px 16px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  border-radius: 100px;
}
.Modal.ModalPoint dl dt._pay {
  background: #ff0033;
}
.Modal.ModalPoint dl dt._raku {
  background: #bf0000;
}
.Modal.ModalPoint dl dt._d {
  background: #cc0033;
}
.Modal.ModalPoint dl dt._v {
  background: #034099;
}
.Modal.ModalPoint dl dd {
  margin-top: 10px;
  font-weight: 700;
  font-size: 1.5rem;
}
.Modal.ModalPoint dl dd._pay {
  color: #ff0033;
}
.Modal.ModalPoint dl dd._raku {
  color: #bf0000;
}
.Modal.ModalPoint dl dd._d {
  color: #cc0033;
}
.Modal.ModalPoint dl dd._v {
  color: #034099;
}
.Modal.ModalSelect {
  width: 100%;
}
.Modal.ModalReceiptUpload {
  padding: 0;
}
.Modal.ModalReceiptUpload .LoadOuter {
  padding: 30px 20px;
}
.Modal.ModalReceiptUpload .LoadPic div {
  width: 80px;
}
.Modal.ModalReceiptUpload h1 {
  padding: 0;
}
.Modal.ModalReceiptUpload .LoadCopy {
  background-color: var(--bg-color);
  padding: 15px 20px;
  border-radius: 5px;
}
.Modal.ModalReceiptUpload .LoadCopy p {
  text-align: center;
  font-size: 0.8125rem;
}
.Modal.ModalTarget h1 {
  color: var(--key-color-1);
  font-size: 1rem;
}
.Modal.ModalTarget.ModalTargetLot h1 {
  color: var(--key-color-2);
}
.Modal.ModalTarget .NoteBox p {
  padding: 0;
  font-size: 0.75rem !important;
}
.Modal.ModalTarget .NoteBox.NoteBoxR {
  margin: 0 0 10px;
  padding: 10px 8px;
  background: #f2cdd3;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.Modal.ModalTarget .NoteBox.NoteBoxR ._fcR {
  display: inline-block;
  margin: 0 auto;
  padding-left: 34px;
  background: url(https://i-lohas-cp.jp/cp001/images/icon_caution.png) top 50% left 0/21px auto no-repeat;
  font-weight: bold;
  text-align: left;
}
.Modal.ModalTarget .ModalTargetInner {
  margin-bottom: 14px;
}
.Modal.ModalTarget .ModalTargetInner ul {
  margin-bottom: 0.6em;
  text-align: left;
  font-size: 0.8125rem;
}
.Modal.ModalTarget .ModalTargetInner ul:not(:first-of-type) {
  padding-top: 0.5em;
  border-top: solid 1px #f2cdd3;
}
.Modal.ModalTarget .ModalTargetInner ul li {
  position: relative;
  margin-left: 1em;
}
.Modal.ModalTarget .ModalTargetInner ul li:not(:first-of-type) {
  margin-top: 0.2em;
}
.Modal.ModalTarget .ModalTargetInner ul li::after {
  content: "・";
  position: absolute;
  color: var(--key-color);
  top: 0;
  left: -0.8em;
}
.Modal.ModalTarget .ModalTargetInner ul li span.ml {
  font-size: 0.6875rem;
  font-weight: normal;
  vertical-align: middle;
  background: #eee;
  border-radius: 2px;
  padding: 2px 2px;
  color: #555;
}
.Modal.ModalTarget .ModalTargetInner ul li span.ml:not(:first-of-type) {
  margin-left: 2px;
}
.Modal .ModalRouletteInner {
  position: relative;
  padding: 18px 0 20px;
  background: url(https://i-lohas-cp.jp/cp001/images/roulette_bg.jpg) top center/100% auto no-repeat;
  min-height: 510px;
  box-sizing: border-box;
}
.Modal .ModalRouletteInner .RouletteInner {
  position: relative;
  z-index: 1;
}
.Modal .ModalRouletteInner .BtnCommon, .Modal .ModalRouletteInner .BtnGraGreen, .Modal .ModalRouletteInner .BtnGraBlue, .Modal .ModalRouletteInner .BtnGraLightreen {
  width: calc(100% - 40px);
}
.Modal .ModalRouletteInner h1 {
  width: 250px;
  margin: 0 auto;
}
.Modal .ModalRouletteInner .RouletteWrapLoading {
  height: 100%;
  min-height: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.Modal .ModalRouletteInner .RouletteBgLoading {
  width: 100px;
}
.Modal .ModalRouletteInner .ModalRouletteMain {
  position: relative;
  margin: 20px 20px 0;
  overflow: hidden;
}
.Modal .ModalRouletteInner .ModalRouletteMain span {
  display: block;
  width: 100%;
}
.Modal .ModalRouletteInner .ModalRouletteMain span.RoulettePin {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
.Modal .ModalRouletteInner .ModalRouletteMain span.RouletteRotate {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.Modal .ModalRouletteInner .ModalRouletteMain span.RouletteRotate.RouletteRotateLose {
  animation: loseanime_rotate 5s 0s forwards cubic-bezier(0, 0.05, 0.05, 1);
}
@keyframes loseanime_rotate {
  0% {
    transform: rotate(-1200deg);
  }
  100% {
    transform: rotate(44deg);
  }
}
.Modal .ModalRouletteInner .ModalRouletteMain span.RouletteRotate.RouletteRotateWin {
  animation: winanime_rotate 5s 0s forwards cubic-bezier(0, 0.05, 0.05, 1);
}
@keyframes winanime_rotate {
  0% {
    transform: rotate(-1200deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.Modal .ModalRouletteInner .ModalRouletteMain span.RouletteRotateWinBg {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  animation: winanime_bg 0.5s 5s ease-in-out infinite;
}
@keyframes winanime_bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.Modal .ModalRouletteInner .RouletteTxt {
  position: absolute;
  width: 270px;
  top: 116px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.Modal .ModalRouletteInner .RouletteTxt.RouletteTxtLose {
  opacity: 0;
  animation: loseanime_txt 0.4s 5.4s ease-out forwards;
}
@keyframes loseanime_txt {
  0% {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.Modal .ModalRouletteInner .RouletteTxt.RouletteTxtWin {
  opacity: 0;
  animation: winanime_txt 0.4s 5.6s ease-out forwards, winanime_txt_inf 0.6s 5.6s infinite;
}
@keyframes winanime_txt {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes winanime_txt_inf {
  0% {
    transform: translate3d(0, 5px, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 5px, 0);
  }
}
.Modal .ModalRouletteInner .rouletteResultWin {
  overflow: hidden;
}
.Modal .ModalRouletteInner .rouletteResultWin::before {
  opacity: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://i-lohas-cp.jp/cp001/images/roulette_bg_win01.png) top center/100% auto no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: winanime_bg01 0.8s 5.2s ease-out forwards infinite;
}
@keyframes winanime_bg01 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.Modal .ModalRouletteInner .rouletteResultWin::after {
  opacity: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://i-lohas-cp.jp/cp001/images/roulette_bg_win02.png) top -30px center/140% auto no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: winanime_bg02 0.8s 5s ease-out forwards;
}
@keyframes winanime_bg02 {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

h1.DocumentTitle {
  font-size: 1.12rem;
  padding-bottom: 15px;
  color: var(--key-color-Green);
  text-align: center;
}

.PrizeModalInner,
.DocumentModalInner {
  text-align: left;
  margin-top: -10px;
  padding-bottom: 10px;
}
.PrizeModalInner h2,
.DocumentModalInner h2 {
  padding: 0;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--key-color-1);
}
.PrizeModalInner h2:not(:first-of-type),
.DocumentModalInner h2:not(:first-of-type) {
  padding-top: 10px;
  border-top: solid 1px var(--key-color-YGreen);
}
.PrizeModalInner h3,
.DocumentModalInner h3 {
  padding: 0 0 0 6px;
  margin-top: 10px;
  font-size: 0.75rem;
  border-left: solid 2px var(--key-color-1);
}
.PrizeModalInner h4,
.DocumentModalInner h4 {
  padding: 0;
  margin-top: 10px;
  font-size: 0.75rem;
}
.PrizeModalInner h5,
.DocumentModalInner h5 {
  padding: 0;
  margin-top: 10px;
  font-size: 0.75rem;
}
.PrizeModalInner p,
.DocumentModalInner p {
  margin-top: 5px;
  font-size: 0.75rem;
}
.PrizeModalInner a,
.DocumentModalInner a {
  text-decoration: underline;
}
.PrizeModalInner a._btn,
.DocumentModalInner a._btn {
  display: block;
  margin: 10px auto;
  padding: 6px 10px;
  font-size: 0.8125rem;
  background: #eee;
  text-align: center;
  border-radius: 100px;
  text-decoration: none;
}
.PrizeModalInner a._btn span,
.DocumentModalInner a._btn span {
  text-decoration: underline;
}
.PrizeModalInner ul,
.DocumentModalInner ul {
  font-size: 0.75rem;
  margin-top: 5px;
}
.PrizeModalInner ul > li,
.DocumentModalInner ul > li {
  margin: 5px 0 0 1em;
  position: relative;
}
.PrizeModalInner ul > li::after,
.DocumentModalInner ul > li::after {
  content: "・";
  position: absolute;
  color: var(--key-color-1);
  top: 0;
  left: -0.8em;
}
.PrizeModalInner ul li._note,
.DocumentModalInner ul li._note {
  font-size: 0.6875rem;
  margin: 5px 0 0 0;
  padding-left: 1em;
  text-indent: -1em;
}
.PrizeModalInner ul li._note::after,
.DocumentModalInner ul li._note::after {
  display: none;
}
.PrizeModalInner ul.InnerList,
.DocumentModalInner ul.InnerList {
  font-size: 0.6875rem;
}
.PrizeModalInner ul.InnerList li,
.DocumentModalInner ul.InnerList li {
  text-indent: 0;
}
.PrizeModalInner ol,
.DocumentModalInner ol {
  font-size: 0.75rem;
  margin: 5px 0 0 14px;
}
.PrizeModalInner ol > li,
.DocumentModalInner ol > li {
  margin-top: 5px;
  list-style-type: decimal;
}
.PrizeModalInner ol > li span,
.DocumentModalInner ol > li span {
  color: var(--key-color-1);
}
.PrizeModalInner ol.InnerListOl,
.DocumentModalInner ol.InnerListOl {
  margin-left: 1.4em;
}
.PrizeModalInner ol.InnerListOl li._num,
.DocumentModalInner ol.InnerListOl li._num {
  list-style-type: decimal;
}
.PrizeModalInner span.ml,
.DocumentModalInner span.ml {
  font-size: 0.6875rem;
  font-weight: normal;
  vertical-align: middle;
  background: #eee;
  border-radius: 2px;
  padding: 2px 2px;
  color: #555;
}
.PrizeModalInner span.ml:not(:first-of-type),
.DocumentModalInner span.ml:not(:first-of-type) {
  margin-left: 2px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.MainWrap {
  position: relative;
  padding-bottom: 30px;
  background: url(https://i-lohas-cp.jp/cp001/images/bg.png) bottom center/100% auto no-repeat #fff;
}
.MainWrap.-bgS {
  background: url(https://i-lohas-cp.jp/cp001/images/bg_s.png) bottom center/100% auto no-repeat #fff;
}
.MainWrap.MainWrapError {
  background: #fff;
}

.MypageHead {
  position: absolute;
  width: 48px;
  top: -38px;
  left: 10px;
}

/*Loading*/
.LoadPic {
  padding: 0 0 15px;
  margin: 10px auto 0;
}
.LoadPic div {
  width: 120px;
  margin: 0 auto 10px;
}
.LoadPic p {
  padding: 0 !important;
  margin: 0 auto !important;
  font-size: 0.75rem !important;
}

._mt5 {
  margin-top: 5px !important;
}

._mt10 {
  margin-top: 10px !important;
}

._mt20 {
  margin-top: 20px !important;
}

._mt30 {
  margin-top: 30px !important;
}

._mt40 {
  margin-top: 40px !important;
}

._mt50 {
  margin-top: 50px !important;
}

._mt60 {
  margin-top: 60px !important;
}

._mt100 {
  margin-top: 100px !important;
}

._mb60 {
  margin-bottom: 60px !important;
}

._pt30 {
  padding-top: 30px !important;
}

._pt60 {
  padding-top: 60px !important;
}

._pb60 {
  padding-bottom: 60px !important;
}

._pb100 {
  padding-bottom: 100px !important;
}

._pb120 {
  padding-bottom: 120px !important;
}

._fz10 {
  font-size: 0.625rem !important;
}

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

._fz13 {
  font-size: 0.8125rem !important;
}

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

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

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

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

._fw600 {
  font-weight: 600;
}

._fw700 {
  font-weight: 700;
}

._fw800 {
  font-weight: 800;
}

._fcG {
  color: var(--key-color-Green);
}

._fcDG {
  color: var(--key-color-DarkGreen);
}

._fcR {
  color: #da2129;
}

h1._fcR {
  color: #da2129;
}

._taL {
  text-align: left;
}

._txtcenter {
  text-align: center !important;
}

._txtleft {
  text-align: left !important;
}

._imgW80 {
  width: 80px;
  margin: 0 auto;
}

._imgW100 {
  width: 100px;
  margin: 0 auto;
}

html.android.line263 .MainBtn {
  padding-bottom: var(--android-safe-area-inset-bottom, env(safe-area-inset-bottom));
}
html.android.line263 #CommonFooter {
  padding-bottom: calc(10px + var(--android-safe-area-inset-bottom, env(safe-area-inset-bottom)));
}
html.android.line263 #CommonFooter.TopFooter {
  padding-bottom: calc(120px + var(--android-safe-area-inset-bottom, env(safe-area-inset-bottom)));
}