@charset "UTF-8";
*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat
}
html {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
::after,
::before {
    vertical-align: inherit;
    text-decoration: inherit
}
* {
    margin: 0;
    padding: 0
}
@-ms-viewport {
    width: device-width
}
audio:not([controls]) {
    display: none;
    height: 0
}
hr {
    overflow: visible
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}
summary {
    display: list-item
}
small {
    font-size: 80%
}
[hidden],
template {
    display: none
}
abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted
}
a {
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}
a:active,
a:hover {
    outline-width: 0
}
a:not([href]) {
    cursor: pointer
}
code,
kbd,
pre,
samp {
    font-family: monospace, monospace
}
b,
strong {
    font-weight: bolder
}
dfn {
    font-style: italic
}
mark {
    color: #000;
    background-color: #ff0
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sub {
    bottom: -0.25em
}
sup {
    top: -0.5em
}
li {
    list-style: none outside
}
input {
    border-radius: 0
}
input::-ms-clear {
    visibility: hidden
}
[role=button],
[type=button],
[type=reset],
[type=submit],
button {
    cursor: pointer
}
[disabled] {
    cursor: default
}
[type=number] {
    width: auto
}
[type=search] {
    -webkit-appearance: textfield
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}
textarea {
    overflow: auto;
    resize: vertical
}
button,
input,
optgroup,
select,
textarea {
    font: inherit
}
optgroup {
    font-weight: 700
}
button {
    overflow: visible
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: 0
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}
[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}
button,
select {
    text-transform: none
}
button,
input,
select,
textarea {
    color: inherit;
    border-style: none;
    background-color: transparent
}
select {
    -webkit-appearance: none;
    -moz-appearance: none
}
select::-ms-expand {
    display: none
}
select::-ms-value {
    color: currentColor
}
legend {
    display: table;
    max-width: 100%;
    white-space: normal;
    color: inherit;
    border: 0
}
::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}
[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield
}
img {
    vertical-align: bottom;
    border-style: none
}
progress {
    vertical-align: baseline
}
svg:not(:root) {
    overflow: hidden
}
svg {
    vertical-align: top
}
audio,
canvas,
progress,
video {
    display: inline-block
}
[aria-busy=true] {
    cursor: progress
}
[aria-controls] {
    cursor: pointer
}
[aria-disabled] {
    cursor: default
}
::selection {
    color: #000;
    background-color: #b3d4fc;
    text-shadow: none
}
html {
    font-family: YakuHanJP, TsukuARdGothic-Regular, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif
}
_:lang(x)::-ms-backdrop,
html {
    font-family: "メイリオ", Meiryo, sans-serif
}
html {
    font-size: 62.5%
}
body {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #1b232c;
    background: #e0e3e3
}
a {
    color: #333
}
.clearfix:after,
.clearfix:before {
    display: table;
    content: ""
}
.maximg {
    width: 100%;
    height: auto
}
.none {
    display: none !important
}
.font8 {
    font-size: 8px !important
}
.font9 {
    font-size: 9px !important
}
.font10 {
    font-size: 10px !important
}
.font11 {
    font-size: 11px !important
}
.font12 {
    font-size: 12px !important
}
.font13 {
    font-size: 13px !important
}
.font14 {
    font-size: 14px !important
}
.font15 {
    font-size: 15px !important
}
.font16 {
    font-size: 16px !important
}
.font17 {
    font-size: 17px !important
}
.font18 {
    font-size: 18px !important
}
.font19 {
    font-size: 19px !important
}
.font20 {
    font-size: 20px !important
}
.font21 {
    font-size: 21px !important
}
.font22 {
    font-size: 22px !important
}
.font23 {
    font-size: 23px !important
}
.font24 {
    font-size: 24px !important
}
.font25 {
    font-size: 25px !important
}
.font26 {
    font-size: 26px !important
}
.font27 {
    font-size: 27px !important
}
.font28 {
    font-size: 28px !important
}
.font29 {
    font-size: 29px !important
}
.font30 {
    font-size: 30px !important
}
.font31 {
    font-size: 31px !important
}
.font32 {
    font-size: 32px !important
}
.font33 {
    font-size: 33px !important
}
.font34 {
    font-size: 34px !important
}
.font35 {
    font-size: 35px !important
}
.italic {
    font-style: italic !important
}
.m0 {
    margin: 0 !important
}
.m5 {
    margin: 5px !important
}
.m10 {
    margin: 10px !important
}
.m15 {
    margin: 15px !important
}
.m20 {
    margin: 20px !important
}
.m25 {
    margin: 25px !important
}
.m30 {
    margin: 30px !important
}
.m35 {
    margin: 35px !important
}
.m40 {
    margin: 40px !important
}
.m45 {
    margin: 45px !important
}
.m50 {
    margin: 50px !important
}
.p0 {
    padding: 0 !important
}
.p5 {
    padding: 5px !important
}
.p10 {
    padding: 10px !important
}
.p15 {
    padding: 15px !important
}
.p20 {
    padding: 20px !important
}
.p25 {
    padding: 25px !important
}
.p30 {
    padding: 30px !important
}
.p35 {
    padding: 35px !important
}
.p40 {
    padding: 40px !important
}
.p45 {
    padding: 45px !important
}
.p50 {
    padding: 50px !important
}
.mb0 {
    margin-bottom: 0 !important
}
.mb5 {
    margin-bottom: 5px !important
}
.mb10 {
    margin-bottom: 10px !important
}
.mb15 {
    margin-bottom: 15px !important
}
.mb20 {
    margin-bottom: 20px !important
}
.mb25 {
    margin-bottom: 25px !important
}
.mb30 {
    margin-bottom: 30px !important
}
.mb35 {
    margin-bottom: 35px !important
}
.mb40 {
    margin-bottom: 40px !important
}
.mb45 {
    margin-bottom: 45px !important
}
.mb50 {
    margin-bottom: 50px !important
}
.mb55 {
    margin-bottom: 55px !important
}
.mb60 {
    margin-bottom: 60px !important
}
.mb65 {
    margin-bottom: 65px !important
}
.mb70 {
    margin-bottom: 70px !important
}
.mb75 {
    margin-bottom: 75px !important
}
.mb80 {
    margin-bottom: 80px !important
}
.mb85 {
    margin-bottom: 85px !important
}
.mb90 {
    margin-bottom: 90px !important
}
.mb95 {
    margin-bottom: 95px !important
}
.mb100 {
    margin-bottom: 100px !important
}
.mt0 {
    margin-top: 0 !important
}
.mt5 {
    margin-top: 5px !important
}
.mt10 {
    margin-top: 10px !important
}
.mt15 {
    margin-top: 15px !important
}
.mt20 {
    margin-top: 20px !important
}
.mt25 {
    margin-top: 25px !important
}
.mt30 {
    margin-top: 30px !important
}
.mt35 {
    margin-top: 35px !important
}
.mt40 {
    margin-top: 40px !important
}
.mt45 {
    margin-top: 45px !important
}
.mt50 {
    margin-top: 50px !important
}
.mt55 {
    margin-top: 55px !important
}
.mt60 {
    margin-top: 60px !important
}
.mt65 {
    margin-top: 65px !important
}
.mt70 {
    margin-top: 70px !important
}
.mt75 {
    margin-top: 75px !important
}
.mt80 {
    margin-top: 80px !important
}
.mt85 {
    margin-top: 85px !important
}
.mt90 {
    margin-top: 90px !important
}
.mt95 {
    margin-top: 95px !important
}
.mt100 {
    margin-top: 100px !important
}
.ml0 {
    margin-left: 0 !important
}
.ml5 {
    margin-left: 5px !important
}
.ml10 {
    margin-left: 10px !important
}
.ml15 {
    margin-left: 15px !important
}
.ml20 {
    margin-left: 20px !important
}
.ml25 {
    margin-left: 25px !important
}
.ml30 {
    margin-left: 30px !important
}
.ml35 {
    margin-left: 35px !important
}
.ml40 {
    margin-left: 40px !important
}
.ml45 {
    margin-left: 45px !important
}
.ml50 {
    margin-left: 50px !important
}
.ml55 {
    margin-left: 55px !important
}
.ml60 {
    margin-left: 60px !important
}
.ml65 {
    margin-left: 65px !important
}
.ml70 {
    margin-left: 70px !important
}
.ml75 {
    margin-left: 75px !important
}
.ml80 {
    margin-left: 80px !important
}
.ml85 {
    margin-left: 85px !important
}
.ml90 {
    margin-left: 90px !important
}
.ml95 {
    margin-left: 95px !important
}
.ml100 {
    margin-left: 100px !important
}
.mr0 {
    margin-right: 0 !important
}
.mr5 {
    margin-right: 5px !important
}
.mr10 {
    margin-right: 10px !important
}
.mr15 {
    margin-right: 15px !important
}
.mr20 {
    margin-right: 20px !important
}
.mr25 {
    margin-right: 25px !important
}
.mr30 {
    margin-right: 30px !important
}
.mr35 {
    margin-right: 35px !important
}
.mr40 {
    margin-right: 40px !important
}
.mr45 {
    margin-right: 45px !important
}
.mr50 {
    margin-right: 50px !important
}
.mr55 {
    margin-right: 55px !important
}
.mr60 {
    margin-right: 60px !important
}
.mr65 {
    margin-right: 65px !important
}
.mr70 {
    margin-right: 70px !important
}
.mr75 {
    margin-right: 75px !important
}
.mr80 {
    margin-right: 80px !important
}
.mr85 {
    margin-right: 85px !important
}
.mr90 {
    margin-right: 90px !important
}
.mr95 {
    margin-right: 95px !important
}
.mr100 {
    margin-right: 100px !important
}
.pb0 {
    padding-bottom: 0 !important
}
.pb5 {
    padding-bottom: 5px !important
}
.pb10 {
    padding-bottom: 10px !important
}
.pb15 {
    padding-bottom: 15px !important
}
.pb20 {
    padding-bottom: 20px !important
}
.pb25 {
    padding-bottom: 25px !important
}
.pb30 {
    padding-bottom: 30px !important
}
.pb35 {
    padding-bottom: 35px !important
}
.pb40 {
    padding-bottom: 40px !important
}
.pb45 {
    padding-bottom: 45px !important
}
.pb50 {
    padding-bottom: 50px !important
}
.pb55 {
    padding-bottom: 55px !important
}
.pb60 {
    padding-bottom: 60px !important
}
.pb65 {
    padding-bottom: 65px !important
}
.pb70 {
    padding-bottom: 70px !important
}
.pb75 {
    padding-bottom: 75px !important
}
.pb80 {
    padding-bottom: 80px !important
}
.pb85 {
    padding-bottom: 85px !important
}
.pb90 {
    padding-bottom: 90px !important
}
.pb95 {
    padding-bottom: 95px !important
}
.pb100 {
    padding-bottom: 100px !important
}
.pt0 {
    padding-top: 0 !important
}
.pt5 {
    padding-top: 5px !important
}
.pt10 {
    padding-top: 10px !important
}
.pt15 {
    padding-top: 15px !important
}
.pt20 {
    padding-top: 20px !important
}
.pt25 {
    padding-top: 25px !important
}
.pt30 {
    padding-top: 30px !important
}
.pt35 {
    padding-top: 35px !important
}
.pt40 {
    padding-top: 40px !important
}
.pt45 {
    padding-top: 45px !important
}
.pt50 {
    padding-top: 50px !important
}
.pt55 {
    padding-top: 55px !important
}
.pt60 {
    padding-top: 60px !important
}
.pt65 {
    padding-top: 65px !important
}
.pt70 {
    padding-top: 70px !important
}
.pt75 {
    padding-top: 75px !important
}
.pt80 {
    padding-top: 80px !important
}
.pt85 {
    padding-top: 85px !important
}
.pt90 {
    padding-top: 90px !important
}
.pt95 {
    padding-top: 95px !important
}
.pt100 {
    padding-top: 100px !important
}
.pl0 {
    padding-left: 0 !important
}
.pl5 {
    padding-left: 5px !important
}
.pl10 {
    padding-left: 10px !important
}
.pl15 {
    padding-left: 15px !important
}
.pl20 {
    padding-left: 20px !important
}
.pl25 {
    padding-left: 25px !important
}
.pl30 {
    padding-left: 30px !important
}
.pl35 {
    padding-left: 35px !important
}
.pl40 {
    padding-left: 40px !important
}
.pl45 {
    padding-left: 45px !important
}
.pl50 {
    padding-left: 50px !important
}
.pl55 {
    padding-left: 55px !important
}
.pl60 {
    padding-left: 60px !important
}
.pl65 {
    padding-left: 65px !important
}
.pl70 {
    padding-left: 70px !important
}
.pl75 {
    padding-left: 75px !important
}
.pl80 {
    padding-left: 80px !important
}
.pl85 {
    padding-left: 85px !important
}
.pl90 {
    padding-left: 90px !important
}
.pl95 {
    padding-left: 95px !important
}
.pl100 {
    padding-left: 100px !important
}
.pr0 {
    padding-right: 0 !important
}
.pr5 {
    padding-right: 5px !important
}
.pr10 {
    padding-right: 10px !important
}
.pr15 {
    padding-right: 15px !important
}
.pr20 {
    padding-right: 20px !important
}
.pr25 {
    padding-right: 25px !important
}
.pr30 {
    padding-right: 30px !important
}
.pr35 {
    padding-right: 35px !important
}
.pr40 {
    padding-right: 40px !important
}
.pr45 {
    padding-right: 45px !important
}
.pr50 {
    padding-right: 50px !important
}
.pr55 {
    padding-right: 55px !important
}
.pr60 {
    padding-right: 60px !important
}
.pr65 {
    padding-right: 65px !important
}
.pr70 {
    padding-right: 70px !important
}
.pr75 {
    padding-right: 75px !important
}
.pr80 {
    padding-right: 80px !important
}
.pr85 {
    padding-right: 85px !important
}
.pr90 {
    padding-right: 90px !important
}
.pr95 {
    padding-right: 95px !important
}
.pr100 {
    padding-right: 100px !important
}
html {
    position: relative;
    height: 100%
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column
}
.header {
    flex: 0 0 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto
}
.footer {
    flex: 0 0 auto;
    background: #e0e3e3;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto
}
.content {
    position: relative;
    flex: 1 0 auto;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto
}
    .largeamount{
background-color:#333333;
color:#fff;
text-align:center;
padding:20px;
margin-bottom:30px;
line-height:180%;
}
.largeamount a{
color:#fff;
}

.wrapper {
    background: #fff
}
.wrapper.wrapper-color {
    background: #e0e3e3
}
.wrapper .wrapper__inner {
    width: 100%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 6.66667vw
}
img {
    vertical-align: top
}
.section-heading {
    font-size: 0;
    line-height: 0;
    position: relative;
    margin-right: auto;
    margin-left: auto
}
.section-heading:after {
    position: absolute;
    top: 10vw;
    left: 50%;
    width: 12vw;
    height: 0.66667vw;
    content: "";
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #3e3a39
}
.section-heading img {
    width: 100%;
    height: auto
}
.hero {
    padding: 6.66667vw;
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_mv_sp.jpg') no-repeat center top/cover
}
.hero .hero__content {
    position: relative;
    padding: 14.93333vw 0 8vw 7.33333vw;
    border-radius: 6.66667vw;
    background: #fff
}
.hero img {
    width: 100%;
    height: auto
}
.hero h1 {
    width: 69.33333vw;
    margin-bottom: 4vw
}
.hero p {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.75;
    margin-bottom: 4vw;
    letter-spacing: 2px
}
.hero .hero__mark {
    position: absolute;
    top: 3.73333vw;
    right: -6.66667vw;
    width: 36.93333vw
}
.hero .hero__logo {
    width: 30.4vw
}
.service {
    padding-top: 10vw;
    padding-bottom: 7.33333vw
}
.service .section-heading {
    width: 19.46667vw;
    margin-bottom: 8vw
}
.service .service__lead {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.75;
    margin-bottom: 6.66667vw;
    text-align: center
}
.service ul {
    margin-bottom: 8vw
}
.service li {
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8vw;
    background: #fff
}
.service li .service__attention {
    font-size: 0.78rem
}
.service li .service__middle {
    font-size: 1.08rem
}
.service li:nth-child(1) h3 {
    width: 8.26667vw
}
.service li:nth-child(2) {
    font-size: 1rem
}
.service li:nth-child(2) h3 {
    width: 9.06667vw
}
.service li:nth-child(3) h3 {
    width: 9.06667vw
}
.service li:nth-child(4) {
    margin-bottom: 0
}
.service li:nth-child(4) h3 {
    width: 9.33333vw
}
.service li h3 {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: -4vw;
    left: 8.93333vw
}
.service li h3 img {
    width: 100%;
    height: auto
}
.service li figure {
    font-size: 0
}
.service li figure img {
    width: 100%;
    height: auto
}
.service .service__detail {
    flex: 0 0 auto;
    align-self: center;
    width: 28.8vw;
    padding-left: 3.33333vw;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center
}
.service .service__plus {
    width: 12.66667vw;
    margin: 0 auto 6.66667vw
}
.service .service__plus img {
    width: 100%;
    height: auto
}
.service .service__happy {
    position: relative;
    width: 86.66667vw;
    margin: 0 auto;
    padding-top: 11.33333vw;
    color: #fff
}
.service .service__happy img {
    width: 100%;
    height: auto
}
.service .service__happy h3 {
    font-size: 1.2rem;
    line-height: 1.33333;
    position: absolute;
    top: 0;
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    width: 86.66667vw;
    height: 14.26667vw;
    padding-top: 1.73333vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_ribon_sp.svg') no-repeat left top/100% auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center
}
.service .service__happy-inner {
    position: relative;
    margin-bottom: 6.66667vw
}
.service .service__happy-inner p {
    font-size: 1rem;
    line-height: 2.15;
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 22.66667vw;
    letter-spacing: 3px;
    -webkit-box-align: center;
    -ms-flex-align: center
}
.service .service__btn {
    width: 66.66667vw;
    height: 9.46667vw;
    margin: 0 auto;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    border-radius: 9999px;
    background: #6f8483
}
.service .service__btn a {
    font-size: 1.45rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.who-we-are {
    padding-top: 11.33333vw;
    padding-bottom: 10.66667vw
}
.who-we-are .section-heading {
    width: 27.73333vw;
    margin-bottom: 9.33333vw
}
.who-we-are .who-we-are__logo {
    width: 37.33333vw;
    margin: 0 auto 8vw
}
.who-we-are .who-we-are__logo img {
    width: 100%;
    height: auto
}
.who-we-are li {
    font-size: 1.3rem;
    line-height: 1.75;
    margin-bottom: 8.66667vw
}
.who-we-are li:last-child {
    margin-bottom: 0
}
.who-we-are li img {
    width: 100%;
    height: auto
}
.who-we-are figure {
    margin-bottom: 5.33333vw
}
.who-we-are h3 {
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 4vw
}
.course-price__course {
    padding-top: 10vw;
    padding-bottom: 7.33333vw
}
.course-price__course .section-heading {
    width: 34.8vw;
    margin-bottom: 8vw
}
.course-price__course .course-price__lead {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 22vw;
    text-align: center
}
.course-price__course ul {
    margin-bottom: 6.66667vw
}
.course-price__course li {
    font-size: 2.3rem;
    line-height: 1.75;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34.66667vw;
    margin-bottom: 20vw;
    text-align: center;
    color: #fff;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.course-price__course li:last-child {
    margin-bottom: 0
}
.course-price__course li h3 {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: -7.6vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.course-price__course li img {
    width: 100%;
    height: auto
}
.course-price__course li:nth-child(1) {
    background: #f56462
}
.course-price__course li:nth-child(1):before {
    position: absolute;
    top: -13.6vw;
    left: -7.73333vw;
    width: 42.4vw;
    height: 34.4vw;
    content: "";
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/course-pickup.svg') no-repeat left top/100% auto
}
.course-price__course li:nth-child(1) h3 {
    left: 42vw;
    width: 35.06667vw;
    -webkit-transform: none;
    transform: none
}
.course-price__course li:nth-child(2) {
    background: #4a525f
}
.course-price__course li:nth-child(2) h3 {
    width: 49.06667vw
}
.course-price__course li:nth-child(3) {
    background: #dca700
}
.course-price__course li:nth-child(3) h3 {
    width: 50.8vw
}
.course-price__course .course-price__head {
    font-size: 1.4rem;
    margin-bottom: 7.33333vw;
    text-align: center
}
.course-price__course .course-price__list {
    padding: 7.33333vw 5.33333vw;
    background: #fff
}
.course-price__course .course-price__list-box {
    font-size: 1.1rem;
    line-height: 1.75
}
.course-price__course .course-price__list-box:last-child p:last-child {
    margin-bottom: 0
}
.course-price__course .course-price__list-box h4 {
    font-weight: 400;
    position: relative
}
.course-price__course .course-price__list-box h4:after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: #000
}
.course-price__course .course-price__list-box h4 span {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding-right: 1em;
    background: #fff
}
.course-price__course .course-price__list-box p {
    margin-bottom: 5.33333vw
}
.course-price__price {
    position: relative;
    padding-top: 11.2vw;
    padding-bottom: 14vw;
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_f.jpg') no-repeat left top/cover
}
.course-price__price h3 {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 9.33333vw;
    text-align: center;
    color: #fff
}
.course-price__price h4 {
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 17.33333vw;
    background: #e0e3e3;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.course-price__price h4+p {
    font-size: 1.16rem;
    margin-bottom: 4.66667vw;
    padding-top: 5.33333vw
}
.course-price__price ul {
    margin-bottom: 10.66667vw
}
.course-price__price li {
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 8.8vw;
    text-align: center;
    background: #fff
}
.course-price__price .course-price__btn {
    width: 66.66667vw;
    height: 9.46667vw;
    margin: 0 auto;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    border-radius: 9999px;
    background: #6f8483
}
.course-price__price .course-price__btn a {
    font-size: 1.45rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.course-price__price .course-price__push {
    font-size: 1.15rem;
    position: absolute;
    top: 0;
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60.53333vw;
    height: 10.4vw;
    -webkit-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
    border: 0.66667vw solid #e0e3e3;
    border-radius: 9999px;
    background: #fff;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.line {
    position: relative
}
.line:after {
    position: absolute;
    bottom: -0.66667vw;
    left: 0;
    width: 100%;
    height: 0.4vw;
    content: "";
    background: #ffd800
}
.form-hero {
    height: 142vw;
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/lp_form_bg_sp.jpg') no-repeat left top/100% auto
}
.form-hero .form-hero__content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 9.33333vw 8vw 0;
}
.form-hero h1 {
    font-size: 0;
    line-height: 0;
    position: relative;
    width: 32.93333vw;
    margin: 0 auto 9.33333vw
}
.form-hero h1:after {
    position: absolute;
    top: 10vw;
    left: 50%;
    width: 12vw;
    height: 0.66667vw;
    content: "";
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff
}
.form-hero h1 img {
    width: 100%;
    height: auto
}
.form-hero h2 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10vw;
    text-align: center;
    color: #fff
}
.form-hero ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap
}
.form-hero li {
    width: 38.4vw;
    height: 38.26667vw;
    padding-top: 2.66667vw;
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_enjoy-share.svg') no-repeat left top/100% auto
}
.form-hero li:nth-child(1) .form-hero__head {
    width: 23.2vw;
    margin-bottom: 7.33333vw
}
.form-hero li:nth-child(2) .form-hero__head {
    width: 20.53333vw;
    margin-bottom: 7.33333vw
}
.form-hero li:nth-child(3) .form-hero__head {
    width: 16.26667vw;
    margin-bottom: 8.66667vw
}
.form-hero li:nth-child(4) .form-hero__head {
    width: 28.26667vw;
    margin-bottom: 6vw
}
.form-hero li img {
    width: 100%;
    height: auto
}
.form-hero li p {
    font-size: 1.23rem;
    line-height: 1.7499;
    text-align: center
}
.form-hero .form-hero__head {
    font-size: 0;
    line-height: 0;
    position: relative;
    margin-right: auto;
    margin-left: auto
}
.form-hero .form-hero__head:after {
    position: absolute;
    top: 8.66667vw;
    left: 50%;
    width: 12vw;
    height: 0.66667vw;
    content: "";
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #3e3a39
}
.how-to {
    padding-top: 10vw;
    padding-bottom: 13.33333vw
}
.how-to .how-to__head {
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    -webkit-margin-after: 6.66667vw;
    margin-block-end: 6.66667vw
}
.how-to .how-to__head+p {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.75;
    margin-bottom: 3.33333vw;
    text-align: center
}
.how-to figure {
    margin-bottom: 9.33333vw
}
.how-to figure img {
    width: 100%;
    height: auto
}
.how-to .how-to__switch {
    font-size: 1.6rem;
    line-height: 1;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    height: 13.33333vw;
    padding-left: 8vw;
    cursor: pointer;
    background: #e0e3e3;
    -webkit-box-align: center;
    -ms-flex-align: center
}
.how-to .how-to__switch:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 13.33333vw;
    height: 100%;
    content: "";
    background: #3e3a39
}
.how-to .how-to__switch i {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 13.33333vw;
    height: 100%;
    content: "";
    pointer-events: none
}
.how-to .how-to__switch i:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.66667vw;
    height: 0.66667vw;
    content: "";
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: #fff
}
.how-to .how-to__switch i:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.66667vw;
    height: 0.66667vw;
    content: "";
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
    border-radius: 9999px;
    background: #fff
}
.how-to .how-to__switch+.how-to__detail {
    display: none
}
.how-to .how-to__switch.is-active+.how-to__detail {
    display: block
}
.apply {
    padding-top: 10vw;
    padding-bottom: 10vw
}
.apply .apply__head {
    font-size: 1.8rem;
    line-height: 1;
    line-height: 1.75;
    margin-bottom: 10vw;
    text-align: center
}
.apply .apply__select-wrap {
    margin-bottom: 8vw
}
.apply .apply__select-wrap li {
    margin-bottom: 6vw
}
.apply .apply__select-wrap li:last-child {
    margin-bottom: 0
}
.apply .apply__form h3 {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 8.66667vw;
    padding-bottom: 15px;
    text-align: center;
    border-bottom: 2px solid #3e3a39
}
.apply .apply__form.apply__check dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    min-height: 13.33333vw;
    padding-left: 4vw;
    -webkit-box-align: center;
    -ms-flex-align: center
}
.apply dl {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap
}
.apply dl dt {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 36.4vw;
    height: 13.33333vw;
    margin-bottom: 6.26667vw;
    padding-left: 2.66667vw;
    color: #fff;
    background: #6f8483;
    -webkit-box-align: center;
    -ms-flex-align: center
}
.apply dl dt+dd {
    width: 50vw
}
.apply dl dd {
    margin-bottom: 6.26667vw
}
.apply dl dd.apply__sub {
    width: 100%;
    height: 13.33333vw
}
.apply dl dd.apply__radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap
}
.apply dl dd.apply__radio label {
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.apply dl dd.apply__radio label span {
    display: block;
    margin-right: 0.66667vw
}
.apply dl dd.apply__radio label.apply__sex {
    width: 50%;
    height: 100%
}
.apply dl dd.apply__radio-check {
    padding-left: 4.66667vw
}
.apply dl dd.apply__radio-check .apply__radio-item {
    margin-right: 0.66667vw
}
.apply dl dd.apply__radio-check input {
    display: block !important
}
.apply .apply__check {
    margin-top: 4vw;
    margin-bottom: 6vw
}
.apply .apply__check label {
    font-size: 1.6rem;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    height: 13.33333vw;
    margin-right: auto;
    margin-bottom: 2vw;
    margin-left: auto;
    color: #fff;
    background: #6f8483;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.apply .apply__check input {
    margin-right: 2vw
}
.apply .apply__check span {
    font-size: 1.1rem;
    display: block;
    text-align: center
}
.apply .apply__check a {
    text-decoration: underline;
    color: #1488c8
}
.apply .apply__text {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
.apply .apply__select {
    position: relative;
    width: 100%;
    height: 100%
}
.apply .apply__select.apply__select-step {
    height: 13.33333vw
}
.apply .apply__select.apply__select-step p {
    font-size: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 16vw 0 2.66667vw;
    pointer-events: none;
    background: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center
}
.apply .apply__select.apply__select-step p.is-hide {
    opacity: 0
}
.apply .apply__select.apply__select-step select {
    opacity: 0
}
.apply .apply__select.apply__select-step select.is-show {
    opacity: 1
}
.apply .apply__select:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 13.33333vw;
    height: 100%;
    content: "";
    pointer-events: none;
    background: #3e3a39
}
.apply .apply__select:before {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4.66667vw;
    width: 4vw;
    height: 4vw;
    content: "";
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    border-right: 0.66667vw solid #fff;
    border-bottom: 0.66667vw solid #fff
}
.apply .apply__select select {
    width: 100%;
    height: 100%;
    padding: 0 16vw 0 2.66667vw;
    border-radius: 0;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
.apply .apply__require {
    font-size: 1.1rem;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 2.26667vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;
    height: 5.06667vw;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
    background: #dca700;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.apply .apply__any {
    font-size: 1.1rem;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 2.26667vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;
    height: 5.06667vw;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
    background: #b5b5b6;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.apply .apply__step {
    width: 86.66667vw;
    height: 21.46667vw;
    margin: 0 auto 12.66667vw;
    background: url('/user_data/packages/obscura_coffee/assets/img/lp/step1_sp.svg') no-repeat left top/100% auto
}
.apply .apply__submit button {
    font-size: 1.8rem;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    height: 13.33333vw;
    margin: 0 auto;
    color: #fff;
    background: #dca700;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
.apply .apply__schedule {
    justify-content: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start
}
#lp-login {
    margin-bottom: 6vw
}
#lp-login p {
    margin-bottom: 2.66667vw
}
#lp-login .lp_button {
    font-size: 1.8rem;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    height: 13.33333vw;
    margin: 0 auto 2.66667vw;
    color: #fff;
    background: #dca700;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center
}
#cycle_type2_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap
}
#cycle_type2_form .apply__select {
    width: 29.33333vw;
    height: 13.33333vw
}
#cycle_type2_form .cycle_type2_form__start {
    display: block
}
#cycle_type2_form .cycle_type2_form__end {
    display: block
}
.reg_delivday ul {
    padding-left: 4vw
}
.lp-error {
    font-weight: 700;
    margin-bottom: 6.66667vw;
    padding: 4vw;
    color: #fff;
    background: red
}
.use_payarea {
    padding-top: 10vw;
    padding-bottom: 10vw
}
.use_payarea table {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap
}
.use_payarea table tbody tr {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap
}
.use_payarea table tbody tr th {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 36.4vw;
    height: 13.33333vw;
    margin-bottom: 6.26667vw;
    padding-left: 2.66667vw;
    color: #fff;
    background: #6f8483;
    -webkit-box-align: center;
    -ms-flex-align: center
}
.use_payarea table tbody tr th+td {
    width: 50vw
}
.use_payarea table tbody tr td {
    position: relative;
    margin-bottom: 6.26667vw
}
.use_payarea table tbody tr td label {
    font-size: 1.6rem;
    margin-right: 0.66667vw
}
.use_payarea table tbody tr td input[type=radio] {
    font-size: 1.6rem;
    margin-right: 0.66667vw
}
.use_payarea table tbody tr td input[type=text] {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
.use_payarea table tbody tr td input[type=text].payinput {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
.use_payarea table tbody tr td .mini {
    height: 13.33333vw
}
.use_payarea table tbody tr td .mini input[type=text] {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
.use_payarea table tbody tr #zeus_save_card_regular_tr {
    width: 100%
}
.use_payarea table tbody tr .custom-select {
    position: relative;
    width: 100%;
    height: 13.33333vw
}
.use_payarea table tbody tr .custom-select.w20 {
    width: calc(100% - 3rem);
    height: 13.33333vw;
    margin-bottom: 4vw
}
.use_payarea table tbody tr .custom-select:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 13.33333vw;
    height: 100%;
    content: "";
    pointer-events: none;
    background: #3e3a39
}
.use_payarea table tbody tr .custom-select:before {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4.66667vw;
    width: 4vw;
    height: 4vw;
    content: "";
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    border-right: 0.66667vw solid #fff;
    border-bottom: 0.66667vw solid #fff
}
.use_payarea table tbody tr .custom-select select {
    width: 100%;
    height: 100%;
    padding: 0 16vw 0 2.66667vw;
    border-radius: 0;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
.use_payarea table tbody tr span {
    font-size: 1.6rem
}
.zeus_credit table:nth-child(1) tbody tr td {
    padding-left: 36.4vw
}
.zeus_credit table:nth-child(1) tbody tr td label:after {
    display: block;
    content: ""
}
.zeus_credit table:nth-child(1) tbody tr td label:last-child:after {
    display: none
}
table.zeus_credit {
    width: 100%;
    margin-bottom: 6vw
}
table.zeus_credit thead {
    color: #fff;
    background: #6f8483
}
table.zeus_credit thead tr th {
    height: 13.33333vw
}
table.zeus_credit thead tr th:nth-of-type(1) {
    width: 13.33333vw
}
table.zeus_credit tbody tr td {
    height: 13.33333vw;
    text-align: center
}
table.zeus_credit tfoot tr td {
    height: 13.33333vw
}
table.zeus_credit tfoot tr td input[type=text] {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
table.zeus_credit tfoot tr td input[type=text].payinput {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
table.zeus_credit tfoot tr td .mini {
    height: 13.33333vw
}
table.zeus_credit tfoot tr td .mini input[type=text] {
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    padding: 0 2.66667vw;
    outline: 0;
    background: #fff
}
.footer .footer__color {
    color: #fff;
    background: #6f8483
}
.footer .footer__color a {
    color: #fff
}
.footer .footer__color .footer__inner {
    padding: 9.33333vw 0 5.33333vw
}
.footer .footer__inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 6.66667vw
}
.footer .footer__copyright {
    font-size: 0.9rem;
    line-height: 1;
    padding: 4vw 0 8vw;
    text-align: center
}
.footer .logo {
    width: 40.4vw
}
.footer .logo img {
    width: 100%;
    height: auto
}
.footer ul {
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.3px
}
.footer .footer__contact {
    font-size: 1.5rem;
    line-height: 2
}
.footer .footer__pagetop {
    position: absolute;
    top: 50%;
    right: 6.66667vw;
    width: 8.4vw;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.footer .footer__pagetop img {
    width: 100%;
    height: auto
}
.largeamount{
background-color:#333333;
color:#fff;
text-align:center;
padding:20px;
margin-bottom:30px;
line-height:180%;
}
.largeamount a{
color:#fff;
}

#acMenu dt{
display:block;
width:100%;
line-height:180%;
padding:10px 20px;
text-align:left;
cursor:pointer;
color:#fff;
background-color:#6f8483;
font-size:15px;
border:1px #ccc solid;
}
#acMenu dd{
padding:10px 20px;
font-size:12px;
margin-bottom:30px;
background-color:#eee;
color:#333;
width:100%;
line-height:180%;
text-align:left;
display:none;
}
#acMenu dd a{
color:#ff6699;
}

.fixed_btn{
background-color:#4a525f;
color:#fff;
text-align:center;
  position: fixed;
  top: 20px; 
  right: 20px;
  padding: 15px 20px;
  border-radius: 15px;
}

@media(min-width:768px) {
    .largeamount{
background-color:#333333;
color:#fff;
text-align:center;
padding:20px;
margin-bottom:30px;
line-height:180%;
}
.largeamount a{
color:#fff;
}
    .sp {
        display: none
    }
    body {
        min-width: 1000px
    }
    body.page-lp--top {
        background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_mv.jpg') no-repeat center center fixed
    }
    .wrapper .wrapper__inner {
        padding: 0 50px
    }
    .section-heading:after {
        top: 37.5px;
        width: 45px;
        height: 2.5px;
        border-radius: 1.25px
    }
    .hero {
        height: 650px;
        padding: 100px 0;
        background: 0 0
    }
    .hero .hero__content {
        width: 716px;
        margin: 0 auto;
        padding: 56px 0 50px 56px;
        border-radius: 25px
    }
    .hero h1 {
        width: 427px;
        margin-bottom: 50px
    }
    .hero p {
        font-size: 1.9rem;
        line-height: 1.75007;
        margin-bottom: 0
    }
    .hero .hero__mark {
        top: 41px;
        right: -75px;
        width: 281px
    }
    .hero .hero__logo {
        position: absolute;
        right: 45px;
        bottom: 48px;
        width: 179px
    }
    .service {
        padding-top: 88px;
        padding-bottom: 55px
    }
    .service .section-heading {
        width: 73px;
        margin-bottom: 80px
    }
    .service .service__lead {
        font-size: 2.4rem;
        line-height: 1.75;
        margin-bottom: 67px
    }
    .service ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 44px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -ms-flex-wrap: wrap
    }
    .service li {
        font-size: 1.5rem;
        width: calc((100% - 50px) / 2);
        margin-bottom: 50px
    }
    .service li .service__attention {
        font-size: 0.9rem
    }
    .service li .service__middle {
        font-size: 1.25rem
    }
    .service li:nth-child(1) h3 {
        width: 35px
    }
    .service li:nth-child(2) {
        font-size: 1.18rem
    }
    .service li:nth-child(2) h3 {
        width: 38.5px
    }
    .service li:nth-child(3) {
        margin-bottom: 0
    }
    .service li:nth-child(3) h3 {
        width: 38.5px
    }
    .service li:nth-child(4) h3 {
        width: 39.5px
    }
    .service li h3 {
        top: -15px;
        left: 42px
    }
    .service li figure {
        width: 300px
    }
    .service .service__detail {
        width: 125px;
        padding-left: 15px
    }
    .service .service__plus {
        width: 47.5px;
        margin: 0 auto 45px
    }
    .service .service__happy {
        width: 800px;
        padding-top: 10px
    }
    .service .service__happy h3 {
        font-size: 1.9rem;
        line-height: 1;
        width: 720.5px;
        height: 62px;
        padding-top: 17px;
        background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_ribon.svg') no-repeat left top/100% auto
    }
    .service .service__happy-inner {
        margin-bottom: 50px
    }
    .service .service__happy-inner p {
        font-size: 2.22rem;
        line-height: 2.16119;
        padding-left: 194px;
        letter-spacing: 5px
    }
    .service .service__btn {
        width: 350px;
        height: 50px;
	margin-top:50px;
    }
    .service .service__btn:hover {
        opacity: .7
    }
    .service .service__btn a {
        font-size: 2rem
    }
    .who-we-are {
        padding-top: 40px;
        padding-bottom: 50px
    }
    .who-we-are .section-heading {
        width: 104px;
        margin-bottom: 40px
    }
    .who-we-are .who-we-are__logo {
        width: 178px;
        margin-bottom: 45px
    }
    .who-we-are ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }
    .who-we-are li {
        font-size: 1rem;
        line-height: 1.75;
        width: calc((100% - 50px) / 3);
        margin-bottom: 0
    }
    .who-we-are figure {
        margin-bottom: 15px
    }
    .who-we-are h3 {
        font-size: 1.2rem;
        margin-bottom: 15px
    }
    .course-price__course {
        padding-top: 88px;
        padding-bottom: 55px
    }
    .drip {
    padding-top: 20px;
    padding-bottom: 55px;
}
    .course-price__course .section-heading {
        width: 130px;
        margin-bottom: 50px
    }
    .course-price__course .course-price__lead {
        font-size: 2.4rem;
        margin-bottom: 67px
    }
    .course-price__course ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }
    .course-price__course li {
        font-size: 1.8rem;
        line-height: 1.75;
        width: calc((100% - 50px) / 3);
        height: 100px;
        margin-bottom: 0
    }
    .course-price__course li h3 {
        top: -22px
    }
    .course-price__course li:nth-child(1):before {
        top: -39px;
        left: -22px;
        width: 123px;
        height: 100px
    }
    .course-price__course li:nth-child(1) h3 {
        left: 122px;
        width: 101px
    }
    .course-price__course li:nth-child(2) h3 {
        width: 141px
    }
    .course-price__course li:nth-child(3) h3 {
        width: 146.5px
    }
    .course-price__course .course-price__head {
        font-size: 1.8rem;
        margin-bottom: 20px;
	margin-top: 30px
    }
    .course-price__course .course-price__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        padding: 18px 30px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }
    .course-price__course .course-price__list-box {
        font-size: 1.2rem;
        line-height: 1.75;
        width: 400px
    }
    .course-price__course .course-price__list-box2 {
    padding:15px;
    margin-bottom:20px;
    }
    .course-price__list-box2 h4{
    background-color:#333;
    color:#fff;
    padding:10px 10px;
    font-size:12px;
    text-align:center;
    margin-bottom:10px;
    }
        .course-price__list-box2 p{
	    font-size:11.5px;
}
    
    .course-price__course .course-price__list-box p {
        margin-bottom: 20px
    }
    .course-price__course .course-price__list-box p:last-child {
        margin-bottom: 0
    }
    .course-price__price {
        padding-top: 55px;
        padding-bottom: 68px;
        background: url('/user_data/packages/obscura_coffee/assets/img/lp/bg_f.jpg') no-repeat left top/cover
    }
    .course-price__price h3 {
        font-size: 2.4rem;
        margin-bottom: 42px
    }
    .course-price__price h4 {
        font-size: 1.8rem;
        height: 50px
    }
    .course-price__price h4+p {
        font-size: 0.9rem;
        margin-bottom: 12px;
        padding-top: 18px
    }
    .driptitle{
    font-size:1.5rem!important;
    font-weight:bold;
    }
    .course-price__price ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 50px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -ms-flex-wrap: wrap
    }
    .course-price__price li {
        font-size: 1.2rem;
        width: calc((100% - 50px) / 3);
        padding-bottom: 18px
    }
    .course-price__price li:nth-child(-n + 3) {
        margin-bottom: 55px
    }
    .course-price__price .course-price__btn {
        width: 350px;
        height: 50px
    }
    .course-price__price .course-price__btn:hover {
        opacity: .7
    }
    .course-price__price .course-price__btn a {
        font-size: 2rem
    }
    .course-price__price .course-price__push {
        font-size: 0.9rem;
        width: 175px;
        height: 30px;
        border-width: 2.5px
    }
    .line:after {
        bottom: -2px;
        height: 1.5px
    }
    .form-hero {
        height: 475px;
        background: url('/user_data/packages/obscura_coffee/assets/img/lp/lp_form_bg.jpg') no-repeat center top/cover
    }
    .form-hero .form-hero__content {
        padding: 60px 50px 0
    }
    .form-hero h1 {
        width: 123.5px;
        margin-bottom: 55px
    }
    .form-hero h1:after {
        top: 37.5px;
        width: 45px;
        height: 2.5px;
        border-radius: 1.25px
    }
    .form-hero h2 {
        font-size: 2.4rem;
        margin-bottom: 50px
    }
    .form-hero li {
        width: 175px;
        height: 175px
    }
    .form-hero li:nth-child(1) .form-hero__head {
        width: 106px;
        margin-bottom: 30px
    }
    .form-hero li:nth-child(2) .form-hero__head {
        width: 93px;
        margin-bottom: 30px
    }
    .form-hero li:nth-child(3) .form-hero__head {
        width: 74px;
        margin-bottom: 37px
    }
    .form-hero li:nth-child(4) .form-hero__head {
        width: 129px;
        margin-bottom: 25px
    }
    .form-hero li p {
        font-size: 1.5rem;
        line-height: 1.75
    }
    .form-hero .form-hero__head:after {
        top: 37.5px;
        width: 45px;
        height: 2.5px;
        border-radius: 1.25px
    }
    .how-to {
        padding-top: 50px;
        padding-bottom: 75px
    }
    .how-to .how-to__head {
        font-size: 2.4rem;
        margin-bottom: 45px
    }
    .how-to .how-to__head+p {
        margin-bottom: 35px
    }
    .how-to figure {
        margin-bottom: 30px
    }
    .how-to .how-to__switch {
        height: 50px;
        padding-left: 15px
    }
    .how-to .how-to__switch:before {
        width: 50px
    }
    .how-to .how-to__switch i {
        width: 50px
    }
    .how-to .how-to__switch i:before {
        width: 17px;
        height: 2px
    }
    .how-to .how-to__switch i:after {
        width: 17px;
        height: 2px
    }
    .apply {
        padding-top: 75px;
        padding-bottom: 65px
    }
    .apply .apply__head {
        font-size: 2.4rem;
        line-height: 1;
        margin-bottom: 70px
    }
    .apply .apply__select-wrap {
        margin-bottom: 50px
    }
    .apply .apply__select-wrap li {
        margin-bottom: 25px
    }
    .apply .apply__form h3 {
        margin-bottom: 30px
    }
    .apply .apply__form.apply__check dd {
        min-height: 50px;
        padding-left: 30px
    }
    .apply dl.apply__name {
        justify-content: flex-start;
        -webkit-box-pack: start;
        -ms-flex-pack: start
    }
    .apply dl.apply__name dt+dd {
        width: 190px
    }
    .apply dl.apply__name dd {
        margin-right: 90px
    }
    .apply dl.apply__born {
        justify-content: flex-start;
        -webkit-box-pack: start;
        -ms-flex-pack: start
    }
    .apply dl.apply__born dt+dd {
        width: 190px
    }
    .apply dl.apply__born dd {
        margin-right: 25px
    }
    .apply dl dt {
        font-size: 1.6rem;
        width: 210px;
        height: 50px;
        margin-bottom: 24px;
        padding-left: 20px
    }
    .apply dl dt+dd {
        width: 690px
    }
    .apply dl dd {
        margin-bottom: 24px
    }
    .apply dl dd.apply__sub {
        width: 430px;
        height: 50px
    }
    .apply dl dd.apply__radio label span {
        margin-right: 10px
    }
    .apply dl dd.apply__radio label.apply__sex {
        width: 100px
    }
    .apply dl dd.apply__radio-check {
        padding-left: 35px
    }
    .apply dl dd.apply__radio-check .apply__radio-item {
        margin-right: 10px
    }
    .apply .apply__h {
        font-size: 1.6rem;
        position: absolute;
        top: 0;
        left: 480px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        height: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center
    }
    .apply .apply__a {
        font-size: 0.9rem;
        position: absolute;
        top: 0;
        left: 480px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        height: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center
    }
    .apply .apply__check {
        margin-top: 25px;
        margin-bottom: 30px
    }
    .apply .apply__check label {
        width: 300px;
        height: 50px;
        margin-bottom: 10px
    }
    .apply .apply__check input {
        margin-right: 10px
    }
    .apply .apply__text {
        padding: 0 24px
    }
    .apply .apply__text.apply__text-s {
        width: 250px
    }
    .apply .apply__select.apply__select-area {
        width: 250px
    }
    .apply .apply__select.apply__select-year {
        width: 190px
    }
    .apply .apply__select.apply__select-month {
        width: 125px
    }
    .apply .apply__select.apply__select-day {
        width: 125px
    }
    .apply .apply__select.apply__select-step {
        height: 50px
    }
    .apply .apply__select.apply__select-step p {
        font-size: 1.8rem;
        padding: 0 74px 0 24px
    }
    .apply .apply__select:after {
        width: 50px
    }
    .apply .apply__select:before {
        right: 17px;
        width: 15px;
        height: 15px;
        border-right-width: 3px;
        border-bottom-width: 3px
    }
    .apply .apply__select select {
        padding: 0 74px 0 24px
    }
    .apply .apply__require {
        right: 10px;
        width: 37px;
        height: 19px
    }
    .apply .apply__any {
        right: 10px;
        width: 37px;
        height: 19px
    }
    .apply .apply__step {
        width: 476px;
        height: 100px;
        margin-bottom: 50px;
        background: url('/user_data/packages/obscura_coffee/assets/img/lp/step1.svg') no-repeat left top/100% auto
    }
    .apply .apply__submit button {
        width: 300px;
        height: 50px
    }
    .apply .apply__schedule .apply__radio {
        width: 170px
    }
    #lp-login {
        margin-bottom: 30px
    }
    #lp-login p {
        margin-bottom: 20px;
        text-align: center
    }
    #lp-login .lp_button {
        width: 300px;
        height: 50px;
        margin-bottom: 20px
    }
    #cycle_type2_form {
        width: 420px;
        height: 50px
    }
    #cycle_type2_form .apply__select {
        width: 140px;
        height: 50px
    }
    #cycle_type2_form .cycle_type2_form__start {
        margin-right: 20px
    }
    #cycle_type2_form .cycle_type2_form__end {
        margin-left: 20px
    }
    .reg_delivday ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        height: 50px;
        padding-left: 30px;
        -webkit-box-align: center;
        -ms-flex-align: center
    }
    .reg_delivday li {
        margin-right: 20px
    }
    .lp-error {
        margin-bottom: 50px;
        padding: 20px
    }
    .use_payarea {
        padding-top: 75px;
        padding-bottom: 65px
    }
    .use_payarea table tbody tr th {
        font-size: 1.6rem;
        width: 210px;
        height: 50px;
        margin-bottom: 24px;
        padding-left: 20px
    }
    .use_payarea table tbody tr th+td {
        width: 690px
    }
    .use_payarea table tbody tr td {
        margin-bottom: 24px
    }
    .use_payarea table tbody tr td label {
        margin-right: 10px
    }
    .use_payarea table tbody tr td input[type=radio] {
        margin-right: 10px
    }
    .use_payarea table tbody tr td input[type=text] {
        padding: 0 24px
    }
    .use_payarea table tbody tr td input[type=text].payinput {
        padding: 0 24px
    }
    .use_payarea table tbody tr td .mini {
        height: 50px
    }
    .use_payarea table tbody tr td .mini input[type=text] {
        padding: 0 24px
    }
    .use_payarea table tbody tr td .mini #zeus_token_card_cvv {
        width: 250px
    }
    .use_payarea table tbody tr .custom-select {
        display: inline-block;
        height: 50px
    }
    .use_payarea table tbody tr .custom-select.w20 {
        width: 190px;
        height: 50px
    }
    .use_payarea table tbody tr .custom-select.w20:nth-child(1) {
        width: 125px;
        margin-bottom: 0
    }
    .use_payarea table tbody tr .custom-select:after {
        width: 50px
    }
    .use_payarea table tbody tr .custom-select:before {
        right: 17px;
        width: 15px;
        height: 15px;
        border-right-width: 3px;
        border-bottom-width: 3px
    }
    .use_payarea table tbody tr .custom-select select {
        padding: 0 74px 0 24px
    }
    .zeus_credit table:nth-child(1) tbody tr td {
        padding-left: 245px
    }
    .zeus_credit table:nth-child(1) tbody tr td label:after {
        display: none
    }
    table.zeus_credit {
        margin-bottom: 25px
    }
    table.zeus_credit thead tr th {
        height: 50px
    }
    table.zeus_credit tbody tr td {
        height: 50px
    }
    table.zeus_credit tfoot tr td {
        height: 50px
    }
    table.zeus_credit tfoot tr td input[type=text] {
        padding: 0 24px
    }
    table.zeus_credit tfoot tr td input[type=text].payinput {
        padding: 0 24px
    }
    table.zeus_credit tfoot tr td .mini {
        height: 50px
    }
    table.zeus_credit tfoot tr td .mini input[type=text] {
        padding: 0 24px
    }
    table.zeus_credit tfoot tr #zeus_token_card_cvv_for_registerd_card {
        width: 250px
    }
    .footer .footer__color .footer__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 44px 0 44px 263px
    }
    .footer .footer__inner {
        padding: 0 50px
    }
    .footer .footer__copyright {
        padding: 25px 0 50px;
        text-align: right
    }
    .footer .logo {
        position: absolute;
        top: 50%;
        left: 50px;
        width: 151.5px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
    .footer ul {
        font-size: 1.2rem;
        margin-right: 75px
    }
    .footer .footer__contact {
        font-size: 1.2rem;
        letter-spacing: 0.3px
    }
    .footer .footer__pagetop {
        right: 0;
        width: 31.5px;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%)
    }
    .largeamount{
background-color:#333333;
color:#fff;
text-align:center;
padding:20px;
margin-bottom:30px;
line-height:180%;
}
.largeamount a{
color:#fff;
}

#acMenu dt{
display:block;
width:100%;
line-height:180%;
padding:10px 20px;
text-align:left;
cursor:pointer;
color:#fff;
background-color:#6f8483;
font-size:15px;
border:1px #ccc solid;
}
#acMenu dd{
padding:10px 20px;
font-size:12px;
margin-bottom:30px;
background-color:#eee;
color:#333;
width:100%;
line-height:180%;
text-align:left;
display:none;
}
#acMenu dd a{
color:#ff6699;
}
}
@media(min-width:768px) and(min-width:768px) {
    .form-hero li {
        padding-top: 32.5px
    }
}
@media(max-width:767px) {
    html {
        font-size: calc(1000vw / 375)
    }
    .pc {
        display: none
    }
    .course-price__price li {
        margin-bottom: 8.8vw
    }
    .course-price__price li:last-child {
        margin-bottom: 0
    }
    .course-price__price li:nth-child(n + 4) {
        margin-top: 17.33333vw
    }
    .form-hero li {
        margin-bottom: 6.66667vw
    }
    .apply dl.apply__name dt+dd {
        width: 50vw
    }
    .apply dl.apply__name dd {
        width: 41.6vw;
        height: 13.33333vw
    }
    .apply dl.apply__born dt+dd {
        width: 50vw
    }
    .apply dl.apply__born dd {
        width: 41.6vw;
        height: 13.33333vw
    }
    .apply .apply__h {
        font-size: 0.9rem;
        width: 100%;
        margin-top: -4vw;
        margin-bottom: 2.66667vw;
        text-align: right
    }
    .apply .apply__a {
        font-size: 0.9rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: -4vw;
        margin-bottom: 2.66667vw;
        -webkit-box-pack: end;
        -ms-flex-pack: end
    }
    #cycle_type2_form {
        justify-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
    #cycle_type2_form .cycle_type2_form__start {
        width: 100%;
        margin-bottom: 20px;
        text-align: center
    }
    #cycle_type2_form .cycle_type2_form__end {
        width: 100%;
        margin-top: 20px;
        text-align: center
    }
    .use_payarea table tbody tr span {
        position: absolute;
        padding: 0 !important
    }
    .use_payarea table tbody tr span:nth-of-type(1) {
        top: calc(100 / 750 * 100vw / 2 - 1.6rem);
        right: 0
    }
    .use_payarea table tbody tr span:nth-of-type(2) {
        right: 0;
        bottom: calc(100 / 750 * 100vw / 2)
    }
    .footer .logo {
        margin: 0 auto 9.33333vw
    }
    .footer ul {
        margin-bottom: 8vw;
        padding: 0 6.66667vw
    }
    .footer .footer__contact {
        padding: 0 6.66667vw
    }
    .largeamount{
background-color:#333333;
color:#fff;
text-align:center;
padding:20px;
margin-bottom:30px;
line-height:180%;
}
.largeamount a{
color:#fff;
}

#acMenu dt{
display:block;
width:100%;
line-height:180%;
padding:10px 20px;
text-align:left;
cursor:pointer;
color:#fff;
background-color:#6f8483;
font-size:15px;
border:1px #ccc solid;
}
#acMenu dd{
padding:10px 20px;
font-size:12px;
margin-bottom:30px;
background-color:#eee;
color:#333;
width:100%;
line-height:180%;
text-align:left;
display:none;
}
#acMenu dd a{
color:#ff6699;
}
    .course-price__course .course-price__list-box2 {
    padding:10px;
    margin-bottom:20px;
    }

    .course-price__list-box2 h4{
    background-color:#333;
    color:#fff;
    padding:10px 10px;
    font-size:12px;
    text-align:center;
    margin-bottom:10px;
    }
    .fixed_btn{
background-color:#4a525f;
color:#fff;
text-align:center;
  position: fixed;
  top: 20px; 
  right: 20px;
  padding: 15px 20px;
  border-radius: 15px;

}
}
@media screen {
    [hidden~=screen] {
        display: inherit
    }
    [hidden~=screen]:not(:active):not(:focus):not(:target) {
        position: absolute !important;
        clip: rect(0 0 0 0) !important
    }
}