@charset "UTF-8";
html {
font-size: 62.5%;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
word-wrap: break-word; }
body {
font-size: 1.4rem;
margin: 0;
padding: 0; }
@media only screen and (min-width: 750px) {
body {
font-size: 1.6rem; } }
*,
*::before,
*::after {
box-sizing: border-box; }
h1, h2, h3, div, p, ul, li {
margin: 0;
padding: 0; }
li {
list-style: none; }
img {
width: 100%;
height: auto;
line-height: 0;
vertical-align: bottom; }
a {
text-decoration: underline; }
a img:hover {
opacity: 0.8; }
.only_pc {
display: none; }
@media only screen and (min-width: 750px) {
.only_pc {
display: inline; } }
.only_sp {
display: inline; }
@media only screen and (min-width: 750px) {
.only_sp {
display: none; } }
@media only screen and (min-width: 1000px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none; } }
@media only screen and (min-width: 420px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none; } }
#hachi {
overflow-x: hidden; }
.wrap {
position: relative; }
.close {
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; }
.close .comment {
width: 77%;
margin: 26vw auto 0; }
@media only screen and (min-width: 750px) {
.close .comment {
width: calc(748/1000* 100vw);
margin: calc(264/1000* 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.close .comment {
width: 748px;
margin: 264px auto 0; } }
.kv {
background-color: #f4a900;
background-image: url("../img/bg_kv_sp.png");
background-repeat: no-repeat;
background-size: cover;
background-position: top center; }
@media only screen and (min-width: 750px) {
.kv {
background-image: url("../img/bg_kv_pc.svg");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: top center; } }
@media only screen and (min-width: 1000px) {
.kv {
background-size: auto 100%; } }
.kv_inner {
position: relative;
width: 100%;
height: calc(1120/750* 100vw);
margin: 0 auto; }
@media only screen and (min-width: 750px) {
.kv_inner {
height: calc(1162/1000* 100vw); } }
@media only screen and (min-width: 1000px) {
.kv_inner {
width: 1000px;
height: 1162px; } }
.kv .logo {
position: absolute;
width: calc(241/640* 100vw);
top: calc(35/640* 100vw);
left: 0;
right: 0;
margin: auto; }
@media only screen and (min-width: 750px) {
.kv .logo {
width: calc(255/1000* 100vw);
top: calc(34/1000* 100vw);
left: calc(39/1000* 100vw);
right: inherit;
margin: 0; } }
@media only screen and (min-width: 1000px) {
.kv .logo {
width: 255px;
top: 34px;
left: 39px; } }
.kv h1 {
position: absolute;
width: 100%;
top: calc(127/640* 100vw);
left: 0; }
@media only screen and (min-width: 750px) {
.kv h1 {
top: calc(140/1000* 100vw); } }
@media only screen and (min-width: 1000px) {
.kv h1 {
top: 140px; } }
.kv .kv02 {
position: absolute;
width: 100%;
bottom: calc(6/750* 100vw);
left: 0;
right: 0;
margin: 0 auto; }
@media only screen and (min-width: 750px) {
.kv .kv02 {
bottom: calc(11/1000* 100vw); } }
@media only screen and (min-width: 1000px) {
.kv .kv02 {
bottom: 11px; } }
.period {
background: #e3006e;
padding: 2.187vw 0; }
@media only screen and (min-width: 750px) {
.period {
padding: calc(34/1000* 100vw) 0 calc(37/1000* 100vw); } }
@media only screen and (min-width: 1000px) {
.period {
padding: 34px 0 37px; } }
.period_inner {
width: calc(531/640* 100vw);
margin: 0 auto; }
@media only screen and (min-width: 750px) {
.period_inner {
width: calc(760/1000* 100vw); } }
@media only screen and (min-width: 1000px) {
.period_inner {
width: 760px; } }
.dot {
padding: 0 0 11.875vw;
background-image: url("../img/bg_dot_sp.png");
background-repeat: repeat;
background-size: 100% auto;
background-position: top center; }
@media only screen and (min-width: 750px) {
.dot {
padding: 0 0 calc(123/1000* 100vw);
background-image: url("../img/bg_dot_pc.png"); } }
@media only screen and (min-width: 1000px) {
.dot {
padding: 0 0 123px;
background-image: url("../img/bg_dot_pcl.png");
background-size: auto auto; } }
.dot_inner {
width: 100%;
margin: 0 auto; }
@media only screen and (min-width: 1000px) {
.dot_inner {
width: 1000px; } }
.dot .lead {
width: 100%; }
.dot .rule_btn_wrap {
width: 84.7vw;
height: 13vw;
margin: calc(66 / 640 * 100vw) auto 0;
background-image: url(../img/bt_rule.svg);
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
text-indent: -9999px; }
@media only screen and (min-width: 750px) {
.dot .rule_btn_wrap {
width: calc(649 / 1000 * 100vw);
height: calc(100 / 1000 * 100vw);
cursor: pointer;
margin: calc(52 / 1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.dot .rule_btn_wrap {
width: 649px;
height: 100px;
margin: 52px auto 0; } }
.dot .rule_btn_wrap.active {
background-position: bottom center; }
.dot .rule_box_wrap {
width: 84.375vw;
margin: 0 auto;
display: none; }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap {
width: calc(810 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap {
width: 810px; } }
.dot .rule_box_wrap h2 {
background: #008e3c;
width: 100%;
margin: 6.25vw auto 0;
padding: 3.593vw 0;
text-align: center; }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap h2 {
padding: calc(24 / 1000 * 100vw) 0 calc(24 / 1000 * 100vw);
margin: calc(37 / 1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap h2 {
padding: 24px 0 24px;
margin: 37px auto 0; } }
.dot .rule_box_wrap h2 img {
width: 24.218vw;
margin: 0 auto;
filter: drop-shadow(1vw 1vw 0.78vw #003f1b); }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap h2 img {
width: calc(155 / 1000 * 100vw);
filter: drop-shadow(calc(6 / 1000 * 100vw) calc(6 / 1000 * 100vw) calc(5 / 1000 * 100vw) #003f1b); } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap h2 img {
width: 155px;
filter: drop-shadow(6px 6px 5px #003f1b); } }
.dot .rule_box_wrap .rule_textarea {
background: #FFF;
width: 100%;
padding: 7vw 5vw 8vw 7vw;
margin: 0; }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap .rule_textarea {
padding: calc(45 / 1000 * 100vw) calc(40 / 1000 * 100vw) calc(50 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap .rule_textarea {
padding: 45px 40px 50px; } }
.dot .rule_box_wrap .rule_textarea_text {
height: 102vw;
overflow-y: scroll;
font-size: 3.2vw;
line-height: 1.75em;
padding-right: 0.8em; }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap .rule_textarea_text {
height: calc(190 / 1000 * 100vw);
font-size: calc(17 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap .rule_textarea_text {
height: 190px;
font-size: 1.7rem; } }
.dot .rule_box_wrap .rule_textarea_text h3 {
margin-top: 1em; }
.dot .rule_box_wrap .rule_textarea_text h3 + p {
margin-top: 0.3em; }
.dot .rule_box_wrap .rule_textarea_text h3 + p, .dot .rule_box_wrap .rule_textarea_text h3 + ul {
margin-top: 0.3em; }
.dot .rule_box_wrap .rule_textarea_text p + p {
margin-top: 0.5em; }
.dot .rule_box_wrap .rule_textarea_text li + li {
margin-top: 0.5em; }
.dot .rule_box_wrap .rule_textarea_text .note + .note {
margin-top: 0.2em; }
.dot .rule_box_wrap .rule_textarea_text .number {
margin: 0; }
.dot .rule_box_wrap .rule_textarea_text .number li {
padding-left: 1.25em;
text-indent: -1.25em;
margin-top: 0.3em; }
.dot .rule_box_wrap .rule_textarea_text .number02 {
margin: 0; }
.dot .rule_box_wrap .rule_textarea_text .number02 li {
padding-left: 1em;
text-indent: -1em;
margin-top: 0.3em; }
.dot .rule_box_wrap .rule_textarea_text p + .number {
margin-top: 1em; }
.dot .rule_box_wrap .rule_textarea_text .mt2 {
margin-top: 2em !important; }
.dot .rule_box_wrap .rule_textarea_text .mt0 {
margin-top: 0 !important; }
.dot .rule_box_wrap .rule_textarea_text .mt1 {
margin-top: 1em !important; }
.dot .rule_box_wrap .rule_textarea_text .mb2 {
margin-bottom: 2em; }
.dot .rule_box_wrap .rule_textarea_text .normal {
margin-left: 1em; }
.dot .rule_box_wrap .rule_textarea_text .normal li {
font-size: 3vw;
list-style: disc;
margin-top: 0;
line-height: 1.5em; }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap .rule_textarea_text .normal li {
font-size: calc(16/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap .rule_textarea_text .normal li {
font-size: 1.6rem; } }
.dot .rule_box_wrap .rule_textarea_text .note {
text-indent: -1em;
margin-left: 1em; }
.dot .rule_box_wrap .rule_textarea_text .list {
padding-left: 1.5em; }
.dot .rule_box_wrap .rule_textarea_text .list li {
list-style: disc;
font-size: 3vw;
margin-top: 0.5em;
line-height: 1.5em; }
@media only screen and (min-width: 750px) {
.dot .rule_box_wrap .rule_textarea_text .list li {
font-size: calc(16/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.dot .rule_box_wrap .rule_textarea_text .list li {
font-size: 1.6rem; } }
.bt_apply {
width: 84.687vw;
margin: 15vw auto 0; }
@media only screen and (min-width: 750px) {
.bt_apply {
width: calc(650/1000 * 100vw);
margin: calc(79/1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.bt_apply {
width: 650px;
margin: 79px auto 0; } }
.prod_ti {
width: calc(610/640 * 100vw);
margin: calc(30/640 * 100vw) auto 0; }
@media only screen and (min-width: 750px) {
.prod_ti {
width: calc(893/1000 * 100vw);
margin: calc(93/1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.prod_ti {
width: 893px;
margin: 63px auto 0; } }
.prod_list {
width: 62.5vw;
margin: 0 auto 0; }
@media only screen and (min-width: 750px) {
.prod_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: calc(922/1000 * 100vw);
margin: calc(29/1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.prod_list {
width: 922px;
margin: 29px auto 0; } }
.prod_list li {
position: relative;
width: 100%;
height: calc(653/640 * 100vw);
background: #FFF;
margin-bottom: 5.93vw;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
pointer-events: none;
border: solid calc(1.5/640 * 100vw) #00693e;
border-radius: calc(36/640 * 100vw); }
@media only screen and (min-width: 750px) {
.prod_list li {
width: calc(295/1000 * 100vw);
height: calc(482/1000 * 100vw);
margin-bottom: calc(29/1000 * 100vw);
pointer-events: all;
border: solid 1px #00693e;
border-radius: calc(26/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.prod_list li {
width: 295px;
height: 482px;
margin-bottom: 29px;
border: solid 1px #00693e;
border-radius: 26px; } }
@media only screen and (min-width: 750px) {
.prod_list li:hover {
cursor: pointer;
filter: saturate(150%); } }
.prod_list li img {
position: absolute;
width: 100%;
top: -0.5px;
left: 0; }
@media only screen and (min-width: 750px) {
.prod_list li img {
top: -1.5px; } }
/*商品拡大*/
@media only screen and (min-width: 750px) {
.modal--wrap {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll; } }
@media only screen and (min-width: 750px) {
.modal--wrap.active {
display: block;
z-index: 9999; } }
@media only screen and (min-width: 750px) {
.modal__bk {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); } }
@media only screen and (min-width: 750px) {
.prod--zoom--wrap {
position: relative;
display: none;
opacity: 0;
width: 100%;
height: 100vh;
overflow: hidden;
padding: calc(50 / 1000 * 100vw) 0; } }
@media only screen and (min-width: 1000px) {
.prod--zoom--wrap {
padding: 50px 0; } }
.prod--zoom--wrap.active {
display: block;
animation: fadeIn 0.5s ease forwards; }
.prod--zoom--wrap .prod--zoom01, .prod--zoom--wrap .prod--zoom02, .prod--zoom--wrap .prod--zoom03, .prod--zoom--wrap .prod--zoom04, .prod--zoom--wrap .prod--zoom05, .prod--zoom--wrap .prod--zoom06, .prod--zoom--wrap .prod--zoom07, .prod--zoom--wrap .prod--zoom08, .prod--zoom--wrap .prod--zoom09, .prod--zoom--wrap .prod--zoom10, .prod--zoom--wrap .prod--zoom11, .prod--zoom--wrap .prod--zoom12, .prod--zoom--wrap .prod--zoom13, .prod--zoom--wrap .prod--zoom14, .prod--zoom--wrap .prod--zoom15, .prod--zoom--wrap .prod--zoom16, .prod--zoom--wrap .prod--zoom17, .prod--zoom--wrap .prod--zoom18, .prod--zoom--wrap .prod--zoom19, .prod--zoom--wrap .prod--zoom20, .prod--zoom--wrap .prod--zoom21, .prod--zoom--wrap .prod--zoom22, .prod--zoom--wrap .prod--zoom23, .prod--zoom--wrap .prod--zoom24, .prod--zoom--wrap .prod--zoom25, .prod--zoom--wrap .prod--zoom26, .prod--zoom--wrap .prod--zoom27, .prod--zoom--wrap .prod--zoom28, .prod--zoom--wrap .prod--zoom29, .prod--zoom--wrap .prod--zoom30 {
display: none;
border: solid calc(2/640 * 100vw) #00693e;
border-radius: calc(39/640 * 100vw);
padding-bottom: calc(30/640 * 100vw);
background: #FFF;
overflow: hidden; }
@media only screen and (min-width: 750px) {
.prod--zoom--wrap .prod--zoom01, .prod--zoom--wrap .prod--zoom02, .prod--zoom--wrap .prod--zoom03, .prod--zoom--wrap .prod--zoom04, .prod--zoom--wrap .prod--zoom05, .prod--zoom--wrap .prod--zoom06, .prod--zoom--wrap .prod--zoom07, .prod--zoom--wrap .prod--zoom08, .prod--zoom--wrap .prod--zoom09, .prod--zoom--wrap .prod--zoom10, .prod--zoom--wrap .prod--zoom11, .prod--zoom--wrap .prod--zoom12, .prod--zoom--wrap .prod--zoom13, .prod--zoom--wrap .prod--zoom14, .prod--zoom--wrap .prod--zoom15, .prod--zoom--wrap .prod--zoom16, .prod--zoom--wrap .prod--zoom17, .prod--zoom--wrap .prod--zoom18, .prod--zoom--wrap .prod--zoom19, .prod--zoom--wrap .prod--zoom20, .prod--zoom--wrap .prod--zoom21, .prod--zoom--wrap .prod--zoom22, .prod--zoom--wrap .prod--zoom23, .prod--zoom--wrap .prod--zoom24, .prod--zoom--wrap .prod--zoom25, .prod--zoom--wrap .prod--zoom26, .prod--zoom--wrap .prod--zoom27, .prod--zoom--wrap .prod--zoom28, .prod--zoom--wrap .prod--zoom29, .prod--zoom--wrap .prod--zoom30 {
height: calc(685/1000 * 100vw);
border: solid calc(2/1000 * 100vw) #00693e;
border-radius: calc(39/1000 * 100vw);
padding-bottom: calc(30/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.prod--zoom--wrap .prod--zoom01, .prod--zoom--wrap .prod--zoom02, .prod--zoom--wrap .prod--zoom03, .prod--zoom--wrap .prod--zoom04, .prod--zoom--wrap .prod--zoom05, .prod--zoom--wrap .prod--zoom06, .prod--zoom--wrap .prod--zoom07, .prod--zoom--wrap .prod--zoom08, .prod--zoom--wrap .prod--zoom09, .prod--zoom--wrap .prod--zoom10, .prod--zoom--wrap .prod--zoom11, .prod--zoom--wrap .prod--zoom12, .prod--zoom--wrap .prod--zoom13, .prod--zoom--wrap .prod--zoom14, .prod--zoom--wrap .prod--zoom15, .prod--zoom--wrap .prod--zoom16, .prod--zoom--wrap .prod--zoom17, .prod--zoom--wrap .prod--zoom18, .prod--zoom--wrap .prod--zoom19, .prod--zoom--wrap .prod--zoom20, .prod--zoom--wrap .prod--zoom21, .prod--zoom--wrap .prod--zoom22, .prod--zoom--wrap .prod--zoom23, .prod--zoom--wrap .prod--zoom24, .prod--zoom--wrap .prod--zoom25, .prod--zoom--wrap .prod--zoom26, .prod--zoom--wrap .prod--zoom27, .prod--zoom--wrap .prod--zoom28, .prod--zoom--wrap .prod--zoom29, .prod--zoom--wrap .prod--zoom30 {
height: 685px;
border: solid 2px #00693e;
border-radius: 39px;
padding-bottom: 30px; } }
.prod--zoom--wrap .prod--zoom01 img, .prod--zoom--wrap .prod--zoom02 img, .prod--zoom--wrap .prod--zoom03 img, .prod--zoom--wrap .prod--zoom04 img, .prod--zoom--wrap .prod--zoom05 img, .prod--zoom--wrap .prod--zoom06 img, .prod--zoom--wrap .prod--zoom07 img, .prod--zoom--wrap .prod--zoom08 img, .prod--zoom--wrap .prod--zoom09 img, .prod--zoom--wrap .prod--zoom10 img, .prod--zoom--wrap .prod--zoom11 img, .prod--zoom--wrap .prod--zoom12 img, .prod--zoom--wrap .prod--zoom13 img, .prod--zoom--wrap .prod--zoom14 img, .prod--zoom--wrap .prod--zoom15 img, .prod--zoom--wrap .prod--zoom16 img, .prod--zoom--wrap .prod--zoom17 img, .prod--zoom--wrap .prod--zoom18 img, .prod--zoom--wrap .prod--zoom19 img, .prod--zoom--wrap .prod--zoom20 img, .prod--zoom--wrap .prod--zoom21 img, .prod--zoom--wrap .prod--zoom22 img, .prod--zoom--wrap .prod--zoom23 img, .prod--zoom--wrap .prod--zoom24 img, .prod--zoom--wrap .prod--zoom25 img, .prod--zoom--wrap .prod--zoom26 img, .prod--zoom--wrap .prod--zoom27 img, .prod--zoom--wrap .prod--zoom28 img, .prod--zoom--wrap .prod--zoom29 img, .prod--zoom--wrap .prod--zoom30 img {
position: absolute;
width: 100%;
top: -1px;
left: 0; }
@media only screen and (min-width: 750px) {
.prod--zoom--wrap .prod--zoom01 .bt_detail, .prod--zoom--wrap .prod--zoom02 .bt_detail, .prod--zoom--wrap .prod--zoom03 .bt_detail, .prod--zoom--wrap .prod--zoom04 .bt_detail, .prod--zoom--wrap .prod--zoom05 .bt_detail, .prod--zoom--wrap .prod--zoom06 .bt_detail, .prod--zoom--wrap .prod--zoom07 .bt_detail, .prod--zoom--wrap .prod--zoom08 .bt_detail, .prod--zoom--wrap .prod--zoom09 .bt_detail, .prod--zoom--wrap .prod--zoom10 .bt_detail, .prod--zoom--wrap .prod--zoom11 .bt_detail, .prod--zoom--wrap .prod--zoom12 .bt_detail, .prod--zoom--wrap .prod--zoom13 .bt_detail, .prod--zoom--wrap .prod--zoom14 .bt_detail, .prod--zoom--wrap .prod--zoom15 .bt_detail, .prod--zoom--wrap .prod--zoom16 .bt_detail, .prod--zoom--wrap .prod--zoom17 .bt_detail, .prod--zoom--wrap .prod--zoom18 .bt_detail, .prod--zoom--wrap .prod--zoom19 .bt_detail, .prod--zoom--wrap .prod--zoom20 .bt_detail, .prod--zoom--wrap .prod--zoom21 .bt_detail, .prod--zoom--wrap .prod--zoom22 .bt_detail, .prod--zoom--wrap .prod--zoom23 .bt_detail, .prod--zoom--wrap .prod--zoom24 .bt_detail, .prod--zoom--wrap .prod--zoom25 .bt_detail, .prod--zoom--wrap .prod--zoom26 .bt_detail, .prod--zoom--wrap .prod--zoom27 .bt_detail, .prod--zoom--wrap .prod--zoom28 .bt_detail, .prod--zoom--wrap .prod--zoom29 .bt_detail, .prod--zoom--wrap .prod--zoom30 .bt_detail {
display: block;
position: absolute;
width: calc(298/1000 * 100vw);
height: calc(42/1000 * 100vw);
left: 0;
right: 0;
bottom: calc(30/1000 * 100vw);
margin: auto;
filter: drop-shadow(calc(4/1000 * 100vw) calc(5/1000 * 100vw) 0 #00693e); } }
@media only screen and (min-width: 1000px) {
.prod--zoom--wrap .prod--zoom01 .bt_detail, .prod--zoom--wrap .prod--zoom02 .bt_detail, .prod--zoom--wrap .prod--zoom03 .bt_detail, .prod--zoom--wrap .prod--zoom04 .bt_detail, .prod--zoom--wrap .prod--zoom05 .bt_detail, .prod--zoom--wrap .prod--zoom06 .bt_detail, .prod--zoom--wrap .prod--zoom07 .bt_detail, .prod--zoom--wrap .prod--zoom08 .bt_detail, .prod--zoom--wrap .prod--zoom09 .bt_detail, .prod--zoom--wrap .prod--zoom10 .bt_detail, .prod--zoom--wrap .prod--zoom11 .bt_detail, .prod--zoom--wrap .prod--zoom12 .bt_detail, .prod--zoom--wrap .prod--zoom13 .bt_detail, .prod--zoom--wrap .prod--zoom14 .bt_detail, .prod--zoom--wrap .prod--zoom15 .bt_detail, .prod--zoom--wrap .prod--zoom16 .bt_detail, .prod--zoom--wrap .prod--zoom17 .bt_detail, .prod--zoom--wrap .prod--zoom18 .bt_detail, .prod--zoom--wrap .prod--zoom19 .bt_detail, .prod--zoom--wrap .prod--zoom20 .bt_detail, .prod--zoom--wrap .prod--zoom21 .bt_detail, .prod--zoom--wrap .prod--zoom22 .bt_detail, .prod--zoom--wrap .prod--zoom23 .bt_detail, .prod--zoom--wrap .prod--zoom24 .bt_detail, .prod--zoom--wrap .prod--zoom25 .bt_detail, .prod--zoom--wrap .prod--zoom26 .bt_detail, .prod--zoom--wrap .prod--zoom27 .bt_detail, .prod--zoom--wrap .prod--zoom28 .bt_detail, .prod--zoom--wrap .prod--zoom29 .bt_detail, .prod--zoom--wrap .prod--zoom30 .bt_detail {
width: 298px;
height: 42px;
bottom: 30px;
filter: drop-shadow(4px 5px 0 #00693e); } }
@media only screen and (min-width: 750px) {
.prod--zoom--wrap .prod--zoom01.active, .prod--zoom--wrap .prod--zoom02.active, .prod--zoom--wrap .prod--zoom03.active, .prod--zoom--wrap .prod--zoom04.active, .prod--zoom--wrap .prod--zoom05.active, .prod--zoom--wrap .prod--zoom06.active, .prod--zoom--wrap .prod--zoom07.active, .prod--zoom--wrap .prod--zoom08.active, .prod--zoom--wrap .prod--zoom09.active, .prod--zoom--wrap .prod--zoom10.active, .prod--zoom--wrap .prod--zoom11.active, .prod--zoom--wrap .prod--zoom12.active, .prod--zoom--wrap .prod--zoom13.active, .prod--zoom--wrap .prod--zoom14.active, .prod--zoom--wrap .prod--zoom15.active, .prod--zoom--wrap .prod--zoom16.active, .prod--zoom--wrap .prod--zoom17.active, .prod--zoom--wrap .prod--zoom18.active, .prod--zoom--wrap .prod--zoom19.active, .prod--zoom--wrap .prod--zoom20.active, .prod--zoom--wrap .prod--zoom21.active, .prod--zoom--wrap .prod--zoom22.active, .prod--zoom--wrap .prod--zoom23.active, .prod--zoom--wrap .prod--zoom24.active, .prod--zoom--wrap .prod--zoom25.active, .prod--zoom--wrap .prod--zoom26.active, .prod--zoom--wrap .prod--zoom27.active, .prod--zoom--wrap .prod--zoom28.active, .prod--zoom--wrap .prod--zoom29.active, .prod--zoom--wrap .prod--zoom30.active {
display: block;
margin: 0 auto;
position: relative;
width: calc(386 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.prod--zoom--wrap .prod--zoom01.active, .prod--zoom--wrap .prod--zoom02.active, .prod--zoom--wrap .prod--zoom03.active, .prod--zoom--wrap .prod--zoom04.active, .prod--zoom--wrap .prod--zoom05.active, .prod--zoom--wrap .prod--zoom06.active, .prod--zoom--wrap .prod--zoom07.active, .prod--zoom--wrap .prod--zoom08.active, .prod--zoom--wrap .prod--zoom09.active, .prod--zoom--wrap .prod--zoom10.active, .prod--zoom--wrap .prod--zoom11.active, .prod--zoom--wrap .prod--zoom12.active, .prod--zoom--wrap .prod--zoom13.active, .prod--zoom--wrap .prod--zoom14.active, .prod--zoom--wrap .prod--zoom15.active, .prod--zoom--wrap .prod--zoom16.active, .prod--zoom--wrap .prod--zoom17.active, .prod--zoom--wrap .prod--zoom18.active, .prod--zoom--wrap .prod--zoom19.active, .prod--zoom--wrap .prod--zoom20.active, .prod--zoom--wrap .prod--zoom21.active, .prod--zoom--wrap .prod--zoom22.active, .prod--zoom--wrap .prod--zoom23.active, .prod--zoom--wrap .prod--zoom24.active, .prod--zoom--wrap .prod--zoom25.active, .prod--zoom--wrap .prod--zoom26.active, .prod--zoom--wrap .prod--zoom27.active, .prod--zoom--wrap .prod--zoom28.active, .prod--zoom--wrap .prod--zoom29.active, .prod--zoom--wrap .prod--zoom30.active {
width: 386px; } }
@media only screen and (min-width: 750px) {
.prod--zoom--wrap .prod--zoom__close {
position: absolute;
background: url("../img/bt_close.svg") no-repeat;
background-size: cover;
width: calc(45 / 1000 * 100vw);
height: calc(45 / 1000 * 100vw);
top: calc(15 / 1000 * 100vw);
right: calc(15 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.prod--zoom--wrap .prod--zoom__close {
width: 45px;
height: 45px;
top: 15px;
right: 15px; } }
@media only screen and (min-width: 750px) {
.prod--zoom--wrap .prod--zoom__close:hover {
cursor: pointer; } }
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px); }
100% {
opacity: 1;
transform: translateY(0); } }
.prod_note {
text-align: center;
margin: 0 auto;
font-size: 2vw;
line-height: 1.4em; }
@media only screen and (min-width: 750px) {
.prod_note {
font-size: calc(12/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.prod_note {
font-size: 1.2rem; } }
.green {
background-color: #afd650;
background-image: url("../img/bg_green_star01_sp.png"), url("../img/bg_green_star02_sp.png");
background-position: top center,bottom center;
background-repeat: no-repeat,no-repeat;
background-size: 100% auto,100% auto;
padding: 24.218vw 0 25vw; }
@media only screen and (min-width: 750px) {
.green {
background-image: url("../img/bg_green_star01_pc.png"), url("../img/bg_green_star02_pc.png");
padding: calc(170/1000 * 100vw) 0 calc(172/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.green {
background-image: url("../img/bg_green_star01_pcl.png"), url("../img/bg_green_star02_pcl.png");
background-size: auto auto,auto auto;
padding: 170px 0 172px; } }
.green_inner {
width: 100%;
margin: 0 auto 0; }
@media only screen and (min-width: 1000px) {
.green_inner {
width: 1000px; } }
.green_inner .method_ti {
position: relative;
width: 85.937vw;
margin: 0 auto;
height: 16.875vw;
background: #008e3c;
border-radius: 4.687vw 4.687vw 0 0; }
@media only screen and (min-width: 750px) {
.green_inner .method_ti {
width: calc(892 / 1000 * 100vw);
height: calc(108 / 1000 * 100vw);
border-radius: calc(30 / 1000 * 100vw) calc(30 / 1000 * 100vw) 0 0; } }
@media only screen and (min-width: 1000px) {
.green_inner .method_ti {
width: 892px;
height: 108px;
border-radius: 30px 30px 0 0; } }
.green_inner .method_ti span {
position: absolute;
display: block;
width: calc(383 / 640 * 100vw);
top: calc(-84 / 640 * 100vw);
left: calc(-7/ 640 * 100vw); }
@media only screen and (min-width: 750px) {
.green_inner .method_ti span {
width: calc(377 / 1000 * 100vw);
top: calc(-75 / 1000 * 100vw);
left: calc(169/ 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.green_inner .method_ti span {
width: 377px;
top: -75px;
left: 169px; } }
.green_inner .method_box {
width: 85.937vw;
margin: 0 auto;
background: #FFF;
border: #008e3c solid 1.4vw;
border-top: none;
border-radius: 0 0 4.687vw 4.687vw;
padding: 7vw 0 17.9vw; }
@media only screen and (min-width: 750px) {
.green_inner .method_box {
width: calc(892 / 1000 * 100vw);
border: #008e3c solid calc(9 / 1000 * 100vw);
border-top: none;
border-radius: 0 0 calc(30 / 1000 * 100vw) calc(30 / 1000 * 100vw);
padding: calc(35 / 1000 * 100vw) 0 calc(108 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.green_inner .method_box {
width: 892px;
border: #008e3c solid 9px;
border-top: none;
border-radius: 0 0 30px 30px;
padding: 35px 0 108px; } }
.green_inner .method_box .step {
width: 40vw;
margin: 0 auto; }
@media only screen and (min-width: 750px) {
.green_inner .method_box .step {
width: calc(760 / 1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.green_inner .method_box .step {
width: 760px; } }
.green_inner .method_box .method_note {
width: 68.4vw;
margin: 8vw auto 0; }
@media only screen and (min-width: 750px) {
.green_inner .method_box .method_note {
width: calc(623 / 1000 * 100vw);
margin: calc(72 / 1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.green_inner .method_box .method_note {
width: 623px;
margin: 72 auto 0; } }
.green_inner .method_box .method_kome {
width: 68vw;
margin: 9.375vw auto 0;
text-align: left;
font-size: 2.812vw;
line-height: 1.66em; }
@media only screen and (min-width: 750px) {
.green_inner .method_box .method_kome {
width: calc(790/1000* 100vw);
text-align: left;
font-size: calc(18/1000* 100vw);
margin: calc(47/1000* 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.green_inner .method_box .method_kome {
width: 790px;
font-size: 1.7rem;
margin: 47px auto 0; } }
@media only screen and (min-width: 750px) {
.green_inner .method_box .method_kome li {
padding: 0 0 0 1em;
text-indent: -1em;
margin-top: 0.1em; } }
.green_inner .method_box .bt_apply {
width: 68.75vw;
margin: 15vw auto 0; }
@media only screen and (min-width: 750px) {
.green_inner .method_box .bt_apply {
width: calc(586/1000 * 100vw);
margin: calc(90/1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.green_inner .method_box .bt_apply {
width: 586px;
margin: 109px auto 0; } }
.green_inner .outline, .green_inner .eligible, .green_inner .result, .green_inner .prize {
width: 68.75vw;
margin: 9.062vw auto 0; }
@media only screen and (min-width: 750px) {
.green_inner .outline, .green_inner .eligible, .green_inner .result, .green_inner .prize {
width: calc(810/1000 * 100vw);
margin: calc(75/1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.green_inner .outline, .green_inner .eligible, .green_inner .result, .green_inner .prize {
width: 810px;
margin: 75px auto 0; } }
.inquiry_wrap {
width: 100%;
margin: 0 auto;
padding: 18.75vw 0 40vw;
font-size: 4.5vw;
line-height: 1.5em; }
@media only screen and (min-width: 750px) {
.inquiry_wrap {
font-size: calc(29/1000* 100vw);
padding: calc(172/1000* 100vw) 0; } }
@media only screen and (min-width: 1000px) {
.inquiry_wrap {
width: 1000px;
font-size: 2.9rem;
padding: 172px 0; } }
.inquiry_wrap h2 {
width: 41.875vw;
margin: 0 auto; }
@media only screen and (min-width: 750px) {
.inquiry_wrap h2 {
width: calc(262/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.inquiry_wrap h2 {
width: 262px; } }
.inquiry_wrap .inquiry_name {
width: 83.593vw;
margin: 3.437vw auto 0; }
@media only screen and (min-width: 750px) {
.inquiry_wrap .inquiry_name {
width: calc(522/1000 * 100vw);
margin: calc(24/1000 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.inquiry_wrap .inquiry_name {
width: 522px;
margin: 24px auto 0; } }
.inquiry_wrap .freecall {
display: block;
width: 77.187vw;
margin: 5vw auto 0; }
@media only screen and (min-width: 750px) {
.inquiry_wrap .freecall {
width: calc(482/960 * 100vw);
margin: calc(32/960 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.inquiry_wrap .freecall {
width: 482px;
margin: 32px auto 0; } }
.inquiry_wrap .recept {
display: block;
width: 90vw;
margin: 5.2vw auto 0;
text-align: center; }
@media only screen and (min-width: 750px) {
.inquiry_wrap .recept {
width: calc(780/960 * 100vw);
margin: calc(46/960 * 100vw) auto 0; } }
@media only screen and (min-width: 1000px) {
.inquiry_wrap .recept {
width: 780px;
margin: 46px auto 0; } }
.fix_bt {
position: fixed;
display: flex;
justify-content: center;
align-items: baseline;
bottom: 0;
right: 0;
width: 100%; }
@media only screen and (min-width: 750px) {
.fix_bt {
display: block;
width: calc(161/1000 * 100vw);
bottom: calc(15/1000 * 100vw);
right: calc(15/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.fix_bt {
width: 161px;
bottom: 15px;
right: 15px; } }
.fix_bt li {
width: 34.5%;
margin-left: -0.2%; }
@media only screen and (min-width: 750px) {
.fix_bt li {
width: 100%;
margin-top: calc(8/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.fix_bt li {
width: 100%;
margin-top: 8px; } }
.fix_bt li a img:hover {
opacity: 1;
filter: saturate(180%); }
.fix_bt li a img {
width: 34.5%;
position: absolute;
bottom: 0; }
@media only screen and (min-width: 750px) {
.fix_bt li a img {
width: 100%;
position: relative; } }
@media only screen and (min-width: 750px) {
.fix_bt .fix_ptop {
margin-top: calc(58/1000 * 100vw); } }
@media only screen and (min-width: 1000px) {
.fix_bt .fix_ptop {
margin-top: 58px; } }