@charset "UTF-8";

/* レイアウト崩れ防止css_202310 */
@media print, screen and (min-width: 768px) {
h1,
main.h1 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media screen and (max-width: 767px) {
h1,
main.h1 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 0;
margin-top: 0rem;
}
a:hover,
a:focus-visible,
button:hover,
button:focus-visible,
label:hover,
label:focus-visible {
color: initial;
}
a:hover img,
button:hover img,
label:hover img {
opacity: initial;
}
/* /. レイアウト崩れ防止css_202310 */

<!-- ページ固有崩れ防止css */
.l-play .m-inner .js-category_btn,
.l-print .m-inner .js-change_btn {
text-align: center;
}
/* /. ページ固有崩れ防止css */

* {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}

.m-clarimo {
font-family: 'Clarimo UD PE Regular', sans-serif;
}

.l-bot .m-inner .m-content picture,
.l-shops .m-inner .m-content picture,
.l-print .m-inner .m-content .m-disbtn,
.l-print .m-inner .m-content .m-print__txt,
.l-print .m-inner .m-content .m-print__item picture,
.l-banner .m-banner_link a,
.l-play h2,
.l-use .m-inner .m-content ul li picture,
.m-carousel__btn,
.m-carousel,
.m-kv__head,
.m-kv,
.m-content,
.m-inner {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

.l-price,
.l-play {
background-color: #ffffff;
background-image: linear-gradient(#ebe9e9 1px, transparent 0),
linear-gradient(90deg, #ebe9e9 1px, transparent 0);
background-size: min(2.6785714286vw, 30px) min(2.6785714286vw, 30px);
}
@media screen and (max-width: 767px) {
.l-price,
.l-play {
background-size: 3.7333333333vw 3.7333333333vw;
}
}

.l-wrap {
overflow: hidden;
position: relative;
width: 100%;
font-family: 'UD Shin Go Regular JIS2004', sans-serif;
-webkit-text-size-adjust: none;
color: #000000;
}

@media screen and (max-width: 767px) {
.l-wrap {
color: #333333;
}
}

.l-wrap img,
.l-wrap input[type='image'] {
-webkit-backface-visibility: hidden;
}

.l-wrap img {
width: 100%;
vertical-align: bottom;
}
.l-wrap button {
border: none;
background-color: #ffffff;
}

.l-inner {
width: 100%;
background-color: #fff1f1;
}

.l-sec {
width: 100%;
padding-top: min(8.9285714286vw, 100px);
padding-bottom: min(8.9285714286vw, 100px);
}
@media screen and (max-width: 767px) {
.l-sec {
padding-top: 13.3333333333vw;
padding-bottom: 13.3333333333vw;
}
}

.m-inner {
max-width: 1120px;
width: 100%;
}
.m-inner h2 {
width: 100%;
margin-bottom: min(7.1428571429vw, 80px);
}

.m-content {
width: 82.1428571429%;
}
@media screen and (max-width: 767px) {
.m-content {
width: 81.3333333333vw;
}
}

.m-sp {
display: none;
}
@media screen and (max-width: 767px) {
.m-sp {
display: block;
}
}

.m-pc {
display: block;
}
@media screen and (max-width: 767px) {
.m-pc {
display: none;
}
}

/* MAIN BANNER (floating version) */
.oshimoji {
width: 100%;
max-width: 780px;       /* desktop max */
height: auto;
aspect-ratio: 780 / 250; 
display: block;
margin: 0 auto;
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease-in-out;
position: fixed;        /* floating at bottom */
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}

.oshimoji img{
transition: opacity 150ms ease-in-out;
}

.oshimoji:hover img{
opacity: 0.7;
}

.oshimoji-trigger {
height: 1px; /* invisible trigger point */
}

/* When visible (JS toggles this) */
.oshimoji.is-visible {
pointer-events: all;
opacity: 1;
}

/* END MARKER (static version of the banner) */
.oshimoji-end {
width: 100%;
}

/* MOBILE */
@media screen and (max-width: 768px) {
.oshimoji {
max-width: 100%;
}
}


.seven_logo {
min-width: 60px;
min-height: 60px;
position: absolute;
width: min(4.6875vw, 90px);
height: min(4.6875vw, 90px);
top: min(3.125vw, 60px);
left: min(3.125vw, 60px);
}
@media screen and (max-width: 768px) {
.seven_logo {
width: 13.3333333333vw;
height: 13.3333333333vw;
top: 4vw;
left: 4vw;
}
}

.m-kv {
position: relative;
max-width: 1120px;
width: 100%;
padding-top: min(2.2321428571vw, 25px);
}
@media screen and (max-width: 767px) {
.m-kv {
padding-top: 22.4vw;
}
}
.m-kv__head {
position: relative;
z-index: 1;
width: 60%;
margin-bottom: min(2.2321428571vw, 25px);
}
@media screen and (max-width: 767px) {
.m-kv__head {
position: absolute;
top: 8vw;
right: 0;
width: 54.4vw;
margin-bottom: 0;
}
}
.m-kv::before {
display: block;
position: absolute;
bottom: min(8.6607142857vw, 97px);
left: 0;
max-width: 310px;
width: 27.6785714286%;
padding-top: 27.6785714286%;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_01.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
}
@media screen and (max-width: 767px) {
.m-kv::before {
bottom: 34.4vw;
left: 5.3333333333vw;
width: 27.4666666667vw;
padding-top: 25.8666666667vw;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/sp_bg_01.png');
}
}
.m-kv::after {
display: block;
position: absolute;
z-index: 0;
top: min(5.8035714286vw, 65px);
right: 0;
max-width: 310px;
width: 27.6785714286%;
padding-top: 27.6785714286%;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_02.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
}
@media screen and (max-width: 767px) {
.m-kv::after {
top: 19.4666666667vw;
right: 5.3333333333vw;
width: 27.4666666667vw;
padding-top: 25.8666666667vw;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/sp_bg_02.png');
}
}

.m-carousel {
position: relative;
z-index: 1;
width: 60%;
}
@media screen and (max-width: 767px) {
.m-carousel {
width: 81.8666666667vw;
}
}
.m-carousel__img {
position: relative;
width: 100%;
margin-bottom: min(3.5714285714vw, 40px);
padding-top: 100%;
}
@media screen and (max-width: 767px) {
.m-carousel__img {
margin-bottom: 6.6666666667vw;
}
}
.m-carousel__img li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition-property: opacity;
}
.m-carousel__img li:first-child {
z-index: 2;
}
.m-carousel__img li:last-child {
z-index: 1;
}
.m-carousel__btn {
display: flex;
justify-content: space-between;
width: 13.3928571429%;
margin-bottom: min(5vw, 56px);
}
@media screen and (max-width: 767px) {
.m-carousel__btn {
width: 15.4666666667vw;
margin-bottom: 9.0666666667vw;
}
}
.m-carousel__btn .js-numbtn {
display: block;
width: 11.1111111111%;
padding-top: 11.1111111111%;
border-radius: 50%;
background-color: #cfcfcf;
cursor: pointer;
font-size: 0px !important;
}
@media screen and (max-width: 767px) {
.m-carousel__btn .js-numbtn {
width: 1.6vw;
padding-top: 1.6vw;
}
}
.m-carousel__btn .js-numbtn--selected {
background-color: #ff9494;
}

.m-nav {
width: 100%;
}
.m-nav--fixed {
position: fixed;
z-index: 100;
top: 0;
left: 50%;
max-width: 1120px;
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav--fixed {
display: none;
}
}
.m-nav__list {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.m-nav__list .js-navbtn {
width: 20%;
padding-top: min(1.0714285714vw, 12px);
padding-bottom: min(1.0714285714vw, 12px);
border-top: 1px solid #707070;
border-right: 1px solid #707070;
border-bottom: 1px solid #707070;
border-left: 1px solid #707070;
font-size: min(1.4285714286vw, 16px);
font-weight: 300;
text-align: center;
line-height: 1;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn {
width: 33.3333333333%;
padding-top: 4vw;
padding-bottom: 4vw;
font-size: 3.2vw;
}
}
.m-nav__list .js-navbtn:nth-of-type(even) {
border-right: none;
border-left: none;
}
.m-nav__list .js-navbtn:nth-child(1) {
position: relative;
background-color: #ffc8c8;
}
.m-nav__list .js-navbtn:nth-child(1)::before {
position: absolute;
z-index: 2;
bottom: -11px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #ffc8c8 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(1)::before {
bottom: -7px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(1)::after {
position: absolute;
z-index: 1;
bottom: -12px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #707070 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(1)::after {
bottom: -8px;
border-width: 8px 8.5px 0 8.5px;
}
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(1) {
width: 50%;
border-bottom: none;
}
}
.m-nav__list .js-navbtn:nth-child(2) {
position: relative;
background-color: #ffffbc;
}
.m-nav__list .js-navbtn:nth-child(2)::before {
position: absolute;
z-index: 2;
bottom: -11px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #ffffbc transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(2)::before {
bottom: -7px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(2)::after {
position: absolute;
z-index: 1;
bottom: -12px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #707070 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(2)::after {
bottom: -8px;
border-width: 8px 8.5px 0 8.5px;
}
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(2) {
width: 50%;
border-right: 1px solid #707070;
border-bottom: none;
}
}
.m-nav__list .js-navbtn:nth-child(3) {
position: relative;
background-color: #e2ffd9;
}
.m-nav__list .js-navbtn:nth-child(3)::before {
position: absolute;
z-index: 2;
bottom: -11px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #e2ffd9 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(3)::before {
bottom: -7px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(3)::after {
position: absolute;
z-index: 1;
bottom: -12px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #707070 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(3)::after {
bottom: -8px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(4) {
position: relative;
background-color: #dee8ff;
}
.m-nav__list .js-navbtn:nth-child(4)::before {
position: absolute;
z-index: 2;
bottom: -11px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #dee8ff transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(4)::before {
bottom: -7px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(4)::after {
position: absolute;
z-index: 1;
bottom: -12px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #707070 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(4)::after {
bottom: -8px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(5) {
position: relative;
background-color: #f2deff;
}
.m-nav__list .js-navbtn:nth-child(5)::before {
position: absolute;
z-index: 2;
bottom: -11px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #f2deff transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(5)::before {
bottom: -7px;
border-width: 8px 8.5px 0 8.5px;
}
}
.m-nav__list .js-navbtn:nth-child(5)::after {
position: absolute;
z-index: 1;
bottom: -12px;
left: 50%;
width: 0;
height: 0;
border-width: 12px 10px 0 10px;
border-style: solid;
border-color: #707070 transparent transparent transparent;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.m-nav__list .js-navbtn:nth-child(5)::after {
bottom: -8px;
border-width: 8px 8.5px 0 8.5px;
}
}

.l-description {
background-color: #ffffff;
}
.l-description .m-inner .m-content p {
margin-bottom: min(7.1428571429vw, 80px);
font-size: min(1.7857142857vw, 20px);
font-weight: 300;
text-align: center;

font-feature-settings: 'palt';
}
@media screen and (max-width: 767px) {
.l-description .m-inner .m-content p {
font-size: 4.2666666667vw;
text-align: left;
}
}
.l-description .m-inner .m-content p span {
display: inline-block;
position: relative;
background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 65%,
#ffc8c8 35%,
#ffc8c8 100%
);
}
.l-description .m-inner .m-content ul {
display: flex;
justify-content: space-between;
width: 100%;
}
@media screen and (max-width: 767px) {
.l-description .m-inner .m-content ul {
display: flex;
flex-direction: column;

row-gap: 5.3333333333vw;
}
}
.l-description .m-inner .m-content ul li {
position: relative;
width: 30.4347826087%;
}
@media screen and (max-width: 767px) {
.l-description .m-inner .m-content ul li {
width: 100%;
}
}
.l-description .m-inner .m-content ul li p {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
font-size: min(1.7391304348vw, 16px);
font-weight: 300;
transform: translate(-50%, -50%);

font-feature-settings: 'palt';
}
@media screen and (max-width: 767px) {
.l-description .m-inner .m-content ul li p {
font-size: 4.2666666667vw;
text-align: center;
}
}

.l-use {
position: relative;
z-index: 2;
background-color: #ffffff;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_03.png');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.l-use::before {
position: absolute;
top: max(-2.5892857143vw, -29px);
left: max(-15.5357142857vw, -174px);
width: min(33.9285714286vw, 380px);
height: min(6.5178571429vw, 73px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_04.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
}
@media screen and (max-width: 767px) {
.l-use::before {
top: -1.3333333333vw;
left: -34.6666666667vw;
width: 57.8666666667vw;
height: 10.9333333333vw;
}
}
.l-use::after {
position: absolute;
right: max(-15.5357142857vw, -174px);
bottom: max(-2.5892857143vw, -29px);
width: min(41.6964285714vw, 467px);
height: min(8.0357142857vw, 90px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_05.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
}
@media screen and (max-width: 767px) {
.l-use::after {
right: -30.1333333333vw;
bottom: -4.8vw;
width: 56vw;
height: 10.6666666667vw;
}
}
.l-use .m-inner .m-content ul {
display: flex;
justify-content: space-between;
width: 100%;
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul {
flex-direction: column;

row-gap: 16vw;
}
}
.l-use .m-inner .m-content ul li {
width: 24.347826087%;
font-size: min(1.4285714286vw, 16px);
text-align: center;

font-feature-settings: 'palt';
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul li {
display: flex;
justify-content: space-between;
width: 81.3333333333vw;
font-size: 4.2666666667vw;
}
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul li p {
width: 41.6vw;
padding-left: 2.4vw;
text-align: left;
}
}
.l-use .m-inner .m-content ul li .m-clarimo {
display: inline-block;
width: 100%;
color: #333333;
font-size: min(2.6785714286vw, 30px);
font-weight: bold;
text-align: center;
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul li .m-clarimo {
font-size: 8vw;
text-align: left;
color: #ffffe1;
-webkit-text-stroke: 0.5px #333333;
}
}
.l-use .m-inner .m-content ul li picture {
display: block;
width: 89.2857142857%;
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul li picture {
width: 35.7333333333vw;
margin-right: 0;
margin-left: 0;
}
}
.l-use .m-inner .m-content ul li:nth-child(2) picture {
position: relative;
}
.l-use .m-inner .m-content ul li:nth-child(2) picture::before {
position: absolute;
top: calc(50% - 10px);
left: -35%;
width: min(1.7857142857vw, 20px);
padding-top: min(3.5714285714vw, 40px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/arrow.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul li:nth-child(2) picture::before {
top: -10.6666666667vw;
left: 35.2vw;
width: 10.6666666667vw;
height: 5.3333333333vw;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/arrow_bot.png');
transform: translateX(0);
}
}
.l-use .m-inner .m-content ul li:nth-child(2) picture::after {
position: absolute;
z-index: 5;
top: calc(50% - 10px);
right: -47%;
width: min(1.7857142857vw, 20px);
padding-top: min(3.5714285714vw, 40px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/arrow.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.l-use .m-inner .m-content ul li:nth-child(2) picture::after {
top: auto;
bottom: -10.6666666667vw;
left: 35.2vw;
width: 10.6666666667vw;
height: 5.3333333333vw;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/arrow_bot.png');
transform: translateX(0);
}
}

.l-play {
position: relative;
z-index: 1;
}
.l-play h2 {
position: relative;
max-width: 480px;
width: 42.8571428571%;
margin-bottom: min(12.9464285714vw, 145px);
font-size: min(3.5714285714vw, 40px);
font-weight: 500;
font-family: 'UD Shin Go Regular JIS2004', sans-serif;
text-align: center;

font-feature-settings: 'palt';
}
@media screen and (max-width: 767px) {
.l-play h2 {
max-width: 100%;
width: 60.8vw;
margin-bottom: 20.8vw;
font-size: 5.3333333333vw;
}
}
.l-play h2::before {
position: absolute;
top: 50%;
left: 0;
width: min(3.75vw, 42px);
height: 1px;
background-color: #333333;
content: '';
transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
.l-play h2::before {
top: 50%;
left: -1.3333333333vw;
width: 5.6vw;
}
}
.l-play h2::after {
position: absolute;
top: 50%;
right: min(1.25vw, 14px);
width: min(3.75vw, 42px);
height: 1px;
background-color: #333333;
content: '';
transform: translateY(-50%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
.l-play h2::after {
top: 50%;
right: 0vw;
width: 5.6vw;
}
}
.l-play .m-inner {
position: relative;
margin-top: 100px;
padding-top: min(6.0714285714vw, 68px);
padding-bottom: min(7.1428571429vw, 80px);
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background-color: #ffffff;
}
@media screen and (max-width: 767px) {
.l-play .m-inner {
padding-top: 5.8666666667vw;
padding-bottom: 0;
border-right: none;
border-left: none;
}
}
.l-play .m-inner .js-category_btn {
position: absolute;
top: -55px;
width: 49.375%;
min-height: 55px;
max-height: 55px;
padding-top: min(1.5178571429vw, 17px);
padding-bottom: min(1.9642857143vw, 22px);
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
border-radius: 10px 10px 0 0;
font-size: min(1.7857142857vw, 20px);
font-weight: 300;
line-height: 1;
color: #000000;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .js-category_btn {
color: #333333;
top: -16vw;
width: 42.6666666667vw;
min-height: 16vw;
max-height: 16vw;
padding-top: 2.6666666667vw;
padding-bottom: 2.6666666667vw;
border-radius: 2.6666666667vw 2.6666666667vw 0 0;
font-size: 3.7333333333vw;
line-height: 1.4;
}
}
.l-play .m-inner .js-category_btn:nth-of-type(1) {
left: -1px;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .js-category_btn:nth-of-type(1) {
left: 50%;
transform: translateX(calc(-50% - 24vw));
}
}
.l-play .m-inner .js-category_btn:nth-of-type(2) {
right: -1px;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .js-category_btn:nth-of-type(2) {
left: 50%;
transform: translateX(calc(-50% + 24vw));
}
}
.l-play .m-inner .js-category_btn.js-category_btn--selected {
border-top: 0;
border-bottom: none;
border-radius: 0 0 0 0;
font-family: 'UD Shin Go Medium JIS2004', sans-serif;
font-weight: 700;
}
.l-play .m-inner .js-category_btn.js-category_btn--selected::before {
position: absolute;
top: -11px;
left: -1px;
width: calc(100% + 2px);
height: 11px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
border-radius: 10px 10px 0 0;
background-color: #e2ffd9;
content: '';
}
@media screen and (max-width: 767px) {
.l-play .m-inner .js-category_btn.js-category_btn--selected::before {
top: -2.9333333333vw;
height: 2.9333333333vw;
border-radius: 2.6666666667vw 2.6666666667vw 0 0;
}
}
.l-play
.m-inner
.js-category_btn.js-category_btn--selected:nth-child(2)::before {
background-color: #dee8ff;
}
.l-play .m-inner .m-content {
width: 82.28980322%;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content {
width: 81.3333333333vw;
}
}
.l-play .m-inner .m-content .m-category {
width: 100%;
}

.l-play .m-inner .m-content .m-category p {
width: 100%;
font-size: min(1.4285714286vw, 16px);
line-height: 2;
font-weight: 300;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .m-category p {
margin-bottom: 0.5333333333vw;
font-size: 3.7333333333vw;
line-height: 1.78;
}
}
.l-play .m-inner .m-content .m-category .js-col_txt {
font-family: 'UD Shin Go Medium JIS2004', sans-serif;
font-weight: 700;

margin-top: 4.4642857143vw;
}
.l-play .m-inner .m-content .m-category .colBtns {
width: 81.5217391304%;
display: flex;
justify-content: left;
flex-wrap: wrap;
row-gap: min(2.2321428571vw, 25px);
-moz-column-gap: min(2.8301886792%, 15px);
column-gap: min(2.8301886792%, 15px);
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .m-category .colBtns {
justify-content: left;
width: 76.8vw;

-moz-column-gap: 4vw;
column-gap: 4vw;
row-gap: 5.3333333333vw;
}
}
.l-play .m-inner .m-content .m-category .js-size_txt {
font-family: 'UD Shin Go Medium JIS2004', sans-serif;
font-weight: 700;
margin-top: min(2.6785714286vw, 30px);
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .m-category .js-size_txt {
margin-top: 8vw;
}
}
.l-play .m-inner .m-content .m-category .sizeBtns {
width: 58.6086956522%;
display: flex;
justify-content: left;
flex-wrap: wrap;
-moz-column-gap: min(2.8301886792%, 15px);
column-gap: min(2.8301886792%, 15px);
}
.l-play .m-inner .m-content .m-category .sizeBtns .js-colbtn--selected {
background-color: #fff !important;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .m-category .sizeBtns {
justify-content: left;
width: 70.4vw;

-moz-column-gap: 4vw;
column-gap: 4vw;
margin-top: 2.6666666667vw;
}
}
.l-play .m-inner .m-content .m-category .js-colbtn {
position: relative;
display: block;
width: 12.5333333333%;
padding-top: min(0.8928571429vw, 10px);
padding-bottom: min(0.8928571429vw, 10px);
border-radius: min(1.6071428571vw, 18px);
background-color: #ebe9e9;
font-size: min(1.4285714286vw, 16px);
text-align: center;
line-height: 1;
color: #000000;
border: 1px solid #ebe9e9;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .m-category .js-colbtn {
width: 18.6666666667vw;
padding-top: 1.3333333333vw;
padding-bottom: 1.3333333333vw;
border-radius: 4.8vw;
font-size: 4.2666666667vw;
}
.l-play .m-inner .m-content .m-category .js-colbtn:nth-of-type(3) {
width: 25.0666666667vw;
}
.l-play .m-inner .m-content .m-category .js-colbtn:nth-of-type(5) {
width: 25.0666666667vw;
}
.l-play .m-inner .m-content .m-category .js-colbtn:nth-of-type(6) {
width: 25.0666666667vw;
}
.l-play .m-inner .m-content .m-category .js-colbtn:nth-of-type(7) {
width: 25.0666666667vw;
}
}
.l-play .m-inner .m-content .m-category .js-colbtn span {
display: block;
position: absolute;
top: max(-20px, -1.7857142857vw);
left: max(-10px, -0.8928571429vw);

width: 42.5531914894%;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .m-category .js-colbtn span {
display: block;
position: absolute;
top: -5.3333333333vw;
left: -2.6666666667vw;

width: 10.6666666667vw;
}
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected {
border: 1px solid #333333;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(1) {
background-color: #fbe2ed;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(2) {
background-color: #dee8ff;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(3) {
background-color: #ffffe1;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(4) {
background-color: #ffc8c8;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(5) {
background-color: #e2ffd9;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(6) {
background-color: #FFE9BC;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(7) {
background-color: #EFD9FF;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(8) {
background-color: #ffffff;
}
.l-play .m-inner .m-content .m-category .js-colbtn--selected:nth-of-type(9) {
background-color: #A8A8A8;
}
.l-play .m-inner .m-content .js-albumitem {
display: none;
justify-content: left;

-moz-column-gap: min(5vw, 56px);
column-gap: min(5vw, 56px);
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .js-albumitem {
justify-content: space-between;
margin-top: 6.6666666667vw;

-moz-column-gap: 5.6vw;
column-gap: 5.6vw;
row-gap: 4.2666666667vw;
}
.l-play .m-inner .m-content .js-albumitem li {
width: 15.4347826087%;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content .js-albumitem li {
width: 100%;
}
}
}
.l-play .m-inner .m-content ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: min(4.4642857143vw, 50px);

-moz-column-gap: 5.4347826087%;
column-gap: 5.4347826087%;
row-gap: min(2.2321428571vw, 25px);
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content ul {
margin-top: 6.6666666667vw;

-moz-column-gap: 5.6vw;
column-gap: 5.6vw;
row-gap: 4.2666666667vw;
}
}
.l-play .m-inner .m-content ul li {
position: relative;
width: 15.4347826087%;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content ul li {
width: 37.8666666667vw;
}
}
.l-play .m-inner .m-content ul li img {
border: 1px #333333 solid;
}

.l-play .m-inner .m-content ul li::after {
position: absolute;
content: '';
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding-top: 71.42857142857143%;
}

.l-play .m-inner .m-content ul li p {
font-size: min(1.0714285714vw, 12px);
text-align: right;
}
@media screen and (max-width: 767px) {
.l-play .m-inner .m-content ul li p {
margin-top: 1.3333333333vw;
font-size: 3.2vw;
}
}
.l-play .js-morebtn {
display: none;
align-items: center;
position: absolute;
bottom: 12.5vw;
left: 0;
width: 100%;
height: 16.26666666666667vw;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/btn_more.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
text-align: center;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.l-play .js-morebtn {
display: flex;
}
}
.l-play .js-morebtn p {
width: 100%;
font-size: 3.2vw;
margin-top: 2%;
}

.l-banner {
background-color: #ffffff;
}
.l-banner .m-banner_link {
width: 100%;
}
.l-banner .m-banner_link a {
display: block;
max-width: 920px;
width: 82.1428571429%;
}
@media screen and (max-width: 767px) {
.l-banner .m-banner_link a {
width: 89.3333333333vw;
}
}

.l-print {
position: relative;
background-color: #ffffff;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_06.png'),
linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) 10%,
rgba(248, 237, 255, 1) 10%,
rgba(248, 237, 255, 1) 100%
);
background-repeat: no-repeat, no-repeat;
background-position: top center, top center;
background-size: 100% auto, 100% auto;
}
@media screen and (max-width: 767px) {
.l-print {
padding-bottom: 0;
background-size: 1920px;
}
}
.l-print::before {
position: absolute;
top: max(-2.9464285714vw, -33px);
left: max(-15.5357142857vw, -174px);
width: min(37.5vw, 420px);
height: min(7.7678571429vw, 87px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_07.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
}
@media screen and (max-width: 767px) {
.l-print::before {
top: -2.6666666667vw;
left: -25.8666666667vw;
width: 51.4666666667vw;
height: 10.6666666667vw;
}
}
.l-print::after {
position: absolute;
right: max(-25.2678571429vw, -283px);
bottom: max(-5.8928571429vw, -66px);
width: min(46.0714285714vw, 516px);
height: min(11.7857142857vw, 132px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_08.png');
background-repeat: no-repeat;
background-size: contain;
content: '';
}
@media screen and (max-width: 767px) {
.l-print::after {
right: -42.6666666667vw;
bottom: -10.6666666667vw;
width: 70.4vw;
height: 16vw;
}
}
.l-print h2 {
max-width: 1120px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.l-print h2 {
width: 100%;
margin-bottom: min(7.1428571429vw, 80px);
}
}
.l-print .m-txt {
text-align: center;
font-size: min(1.4285714286vw, 16px);
margin-top: min(2.6785714286vw, 30px);
}
@media screen and (max-width: 767px) {
.l-print .m-txt {
font-size: 3.7333333333vw;
margin-top: 5.3333333333vw;
}
}
@media screen and (max-width: 767px) {
}
.l-print .m-inner .m-content .m-list {
display: none;
justify-content: space-between;
flex-wrap: wrap;
row-gap: min(6.25vw, 70px);
}
.l-print .m-inner .m-content .m-list--active {
display: flex;
}
.l-print .m-inner .m-content .m-list:not(.not)::after {
content: '';
display: block;
width: min(29.347826087%, 270px);
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list {
justify-content: center;
row-gap: 13.3333333333vw;
}
}
.l-print .m-inner .m-content .m-list li {
width: min(29.347826087%, 270px);
}

@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li {
position: relative;
width: 81.3333333333vw;
}
}
.l-print .m-inner .m-content .m-list li::after {
display: none;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li:not(.not):before {
content: '';
display: block;
position: absolute;
bottom: -13.8666666667vw;
left: 50%;
transform: translateX(-50%);
width: 10.6666666667vw;
height: 5.3333333333vw;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/arrow_bot.png');
background-size: cover;
}
}
.l-print .m-inner .m-content .m-list li h3 {
width: min(8.8392857143vw, 99px);
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li h3 {
width: 26.4vw;
}
}
.l-print .m-inner .m-content .m-list li picture {
position: relative;
display: block;
width: 100%;
margin-top: min(0.4464285714vw, 5px);
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li picture {
margin-top: 1.3333333333vw;
}
}
.l-print .m-inner .m-content .m-list li picture:not(.not):before {
content: '';
display: block;
position: absolute;
top: 50%;
left: calc(100% + min(11.1111111111%, 30px));
transform: translate(-50%, -50%);
width: min(1.7857142857vw, 20px);
padding-top: min(3.5714285714vw, 40px);
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/arrow.png');
background-size: cover;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li picture:not(.not):before {
display: none;
}
}
.l-print .m-inner .m-content .m-list li p {
margin-top: min(2.6785714286vw, 30px);
font-size: min(1.4285714286vw, 16px);
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li p {
margin-top: 8.5333333333vw;
font-size: 3.7333333333vw;
}
}
.l-print .m-inner .m-content .m-list li p span {
display: block;
margin-top: min(1.3392857143vw, 15px);
font-size: min(1.25vw, 14px);
text-indent: -1em;
padding-left: 1em;
font-feature-settings: 'palt';
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-list li p span {
margin-top: 4vw;
font-size: 3.2vw;
}
}
.l-print .m-inner {
position: relative;
margin-top: 180px;
padding-top: min(6.0714285714vw, 68px);
padding-bottom: min(7.1428571429vw, 80px);
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background-color: #ffffff;
}
@media screen and (max-width: 767px) {
.l-print .m-inner {
margin-top: 120px;
padding-top: 5.8666666667vw;
padding-bottom: 21.3333333333vw;
border-right: none;
border-left: none;
}
}
.l-print .m-inner .js-change_btn {
position: absolute;
top: -55px;
width: 49.375%;
min-height: 55px;
max-height: 55px;
padding-top: min(1.5178571429vw, 17px);
padding-bottom: min(1.9642857143vw, 22px);
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
border-radius: 10px 10px 0 0;
font-size: min(1.7857142857vw, 20px);
font-weight: 300;
line-height: 1;
color: #000000;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .js-change_btn {
color: #333333;
top: -16vw;
width: 42.6666666667vw;
min-height: 16vw;
max-height: 16vw;
padding-top: 2.6666666667vw;
padding-bottom: 2.6666666667vw;
border-radius: 2.6666666667vw 2.6666666667vw 0 0;
font-size: 3.7333333333vw;
line-height: 1.4;
}
}
.l-print .m-inner .js-change_btn:nth-of-type(1) {
left: -1px;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .js-change_btn:nth-of-type(1) {
left: 50%;
transform: translateX(calc(-50% - 24vw));
}
}
.l-print .m-inner .js-change_btn:nth-of-type(2) {
right: -1px;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .js-change_btn:nth-of-type(2) {
left: 50%;
transform: translateX(calc(-50% + 24vw));
}
}
.l-print .m-inner .js-change_btn.js-change_btn--selected {
border-top: 0;
border-bottom: none;
border-radius: 0 0 0 0;
font-family: 'UD Shin Go Medium JIS2004', sans-serif;
font-weight: 700;
}
.l-print .m-inner .js-change_btn.js-change_btn--selected::before {
position: absolute;
top: -11px;
left: -1px;
width: calc(100% + 2px);
height: 11px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
border-radius: 10px 10px 0 0;
background-color: #ffffe1;
content: '';
}
@media screen and (max-width: 767px) {
.l-print .m-inner .js-change_btn.js-change_btn--selected::before {
top: -2.9333333333vw;
height: 2.9333333333vw;
border-radius: 2.6666666667vw 2.6666666667vw 0 0;
}
}
.l-print
.m-inner
.js-change_btn.js-change_btn--selected:nth-child(2)::before {
background-color: #ffdbbc;
}
.l-print .m-inner .m-content {
width: 82.28980322%;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content {
width: 81.3333333333vw;
}
}
.l-print .m-inner .m-content .m-category {
width: 100%;
}

.l-print .m-inner .m-content .m-category p {
width: 100%;
font-size: min(1.4285714286vw, 16px);
line-height: 2;
font-weight: 300;
}
@media screen and (max-width: 767px) {
.l-print .m-inner .m-content .m-category p {
margin-bottom: 0.5333333333vw;
font-size: 3.7333333333vw;
line-height: 1.78;
}
}

@media screen and (max-width: 767px) {
.l-price .m-inner .m-content {
width: 89.3333333333vw;
}
}
.l-price .m-inner .m-content .m-price {
border-spacing: 0;
border-collapse: separate;
width: 100%;
margin-bottom: min(4.4642857143vw, 50px);
border: 1px solid #333333;
border-radius: min(1.3392857143vw, 15px);
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price {
margin-bottom: 4vw;
border-radius: 4vw;
}
}
.l-price .m-inner .m-content .m-price tbody {
width: 100%;
}
.l-price .m-inner .m-content .m-price tbody tr {
border-collapse: collapse;
}
.l-price .m-inner .m-content .m-price tbody tr th,
.l-price .m-inner .m-content .m-price tbody tr td {
font-weight: 300;
line-height: 1;
text-align: center;
word-wrap: break-word;
overflow-wrap: break-word;
background-clip: padding-box;
border-top: 1px solid #333333;
padding-top: min(0.9821428571vw, 11px);
padding-bottom: min(0.9821428571vw, 11px);
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr th,
.l-price .m-inner .m-content .m-price tbody tr td {
padding-top: 2.1333333333vw;
padding-bottom: 2.1333333333vw;
}
}
.l-price .m-inner .m-content .m-price tbody tr th {
background-color: #fbe2ed;
font-size: min(1.7857142857vw, 20px);
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr th {
font-size: 5.3333333333vw;
}
}
.l-price .m-inner .m-content .m-price tbody tr th:first-child {
border-top: none;
border-right: 1px solid #333333;
width: 61.4879649891%;
border-radius: min(1.3392857143vw, 15px) 0 0 0;
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr th:first-child {
width: 66.5671641791%;
border-radius: 4vw 0 0 0;
}
}
.l-price .m-inner .m-content .m-price tbody tr th:last-child {
border-top: none;
border-radius: 0 min(1.3392857143vw, 15px) 0 0;
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr th:last-child {
border-radius: 0 4vw 0 0;
}
}
.l-price .m-inner .m-content .m-price tbody tr td {
background-color: #ffffff;
font-size: min(1.4285714286vw, 16px);
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr td {
font-size: 4.2666666667vw;
}
}
.l-price .m-inner .m-content .m-price tbody tr td:first-child {
border-right: 1px solid #333333;
width: 61.4879649891%;
border-radius: 0 0 0 min(1.3392857143vw, 15px);
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr td:first-child {
width: 66.5671641791%;
border-radius: 0 0 0 4vw;
}
}
.l-price .m-inner .m-content .m-price tbody tr td:last-child {
border-radius: 0 0 min(1.3392857143vw, 15px) 0;
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content .m-price tbody tr td:last-child {
border-radius: 0 0 4vw 0;
}
}
.l-price .m-inner .m-content p {
font-size: min(1.25vw, 14px);
}
@media screen and (max-width: 767px) {
.l-price .m-inner .m-content p {
padding-left: 1em;
font-size: 3.2vw;
text-indent: -1em;
}
}

.l-app {
background-color: #ffffff;
}
.l-app .m-inner p {
font-size: min(1.7857142857vw, 20px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner p {
font-size: 4.2666666667vw;

font-feature-settings: 'palt';
}
}
@media screen and (max-width: 767px) {
.l-app .m-inner p.m-txt {
width: 89.3333333333vw;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
}
.l-app .m-inner p:last-child {
font-size: min(1.4285714286vw, 16px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner p:last-child {
width: 89.3333333333vw;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-size: 3.7333333333vw;
}
}
.l-app .m-inner .m-app {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: min(4.4642857143vw, 50px);
margin-bottom: min(3.125vw, 35px);

row-gap: min(4.4642857143vw, 50px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app {
flex-direction: column;
width: 89.3333333333vw;
margin-top: 4vw;
margin-right: auto;
margin-bottom: 4vw;
margin-left: auto;
}
}
.l-app .m-inner .m-app__list {
width: 47.7678571429%;
padding-top: min(2.6785714286vw, 30px);
padding-right: min(3.2142857143vw, 36px);
padding-bottom: min(3.5714285714vw, 40px);
padding-left: min(3.5714285714vw, 40px);
border: 1px solid #333333;
border-radius: min(2.2321428571vw, 25px);

font-feature-settings: 'palt';
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__list {
width: 100%;
padding-top: 6.6666666667vw;
padding-right: 6.6666666667vw;
padding-bottom: 6.6666666667vw;
padding-left: 4vw;
border-radius: 6.6666666667vw;
}
}
.l-app .m-inner .m-app__tit {
margin-bottom: min(1.3392857143vw, 15px);
font-size: min(1.7857142857vw, 20px);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__tit {
margin-bottom: 4vw;
font-size: 4.2666666667vw;
}
}
.l-app .m-inner .m-app__item div:first-child {
display: flex;
justify-content: space-between;
margin-bottom: min(2.2321428571vw, 25px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item div:first-child {
justify-content: left;
margin-bottom: 4vw;

-moz-column-gap: 8vw;
column-gap: 8vw;
}
}
.l-app .m-inner .m-app__item div:first-child picture {
display: block;
width: 18.7617260788%;
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item div:first-child picture {
width: 16vw;
}
}
.l-app .m-inner .m-app__item div:first-child li {
font-size: min(1.4285714286vw, 16px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item div:first-child li {
padding-left: 1.5em;
font-size: 3.7333333333vw;
text-indent: -1.5em;
}
}
.l-app .m-inner .m-app__item div:last-child {
display: flex;
margin-top: min(2.2321428571vw, 25px);

-moz-column-gap: min(1.0714285714vw, 12px);
column-gap: min(1.0714285714vw, 12px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item div:last-child {
margin-top: 5.3333333333vw;

-moz-column-gap: 4vw;
column-gap: 4vw;
}
}
.l-app .m-inner .m-app__item div:last-child a {
display: block;
}
.l-app .m-inner .m-app__item div:last-child a:nth-of-type(1) {
width: 29.7592997812%;
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item div:last-child a:nth-of-type(1) {
width: 28.8vw;
}
}
.l-app .m-inner .m-app__item div:last-child a:nth-of-type(2) {
width: 36.5426695842%;
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item div:last-child a:nth-of-type(2) {
width: 35.2vw;
}
}
.l-app .m-inner .m-app__item p {
font-size: min(1.4285714286vw, 16px);
}
@media screen and (max-width: 767px) {
.l-app .m-inner .m-app__item p {
font-size: 3.7333333333vw;
}
}

.l-shops {
background-color: #ffffff;
background-image: url('/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/img/bg_09.png');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
.l-shops .m-inner .m-content picture {
display: block;
width: 54.347826087%;
}
@media screen and (max-width: 767px) {
.l-shops .m-inner .m-content picture {
width: 57.8666666667vw;
}
}

.l-bot {
padding-bottom: min(1.7857142857vw, 20px);
background-color: #ffffff;
}
@media screen and (max-width: 767px) {
.l-bot {
padding-bottom: 5.3333333333vw;
}
}
@media screen and (max-width: 767px) {
.l-bot .m-inner .m-content {
width: 89.3333333333vw;
}
}
.l-bot .m-inner .m-content p:first-child {
font-size: min(1.9642857143vw, 22px);
text-align: center;
}
@media screen and (max-width: 767px) {
.l-bot .m-inner .m-content p:first-child {
font-size: 5.3333333333vw;
}
}
.l-bot .m-inner .m-content p:last-child {
font-size: min(1.25vw, 14px);
}
@media screen and (max-width: 767px) {
.l-bot .m-inner .m-content p:last-child {
font-size: 3.2vw;
}
}
.l-bot .m-inner .m-content picture {
display: block;
width: 34.0217391304%;
margin-top: min(2.3214285714vw, 26px);
margin-bottom: min(8.9285714286vw, 100px);
}
@media screen and (max-width: 767px) {
.l-bot .m-inner .m-content picture {
width: 46.9333333333vw;
margin-top: 5.8666666667vw;
margin-bottom: 10.6666666667vw;
}
}

.l-modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.l-modal__bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.l-modal__close {
position: absolute;
top: 3.125vw;
right: 3.125vw;
max-width: 60px;
width: 3.125vw;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.l-modal__close {
top: 10.6666666667vw;
right: 5.3333333333vw;
width: 5.0666666667vw;
}
}
.l-modal .m-qrbox {
position: absolute;
top: 50%;
left: 50%;
width: min(44.6428571429vw, 500px);
transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 767px) {
.l-modal .m-qrbox {
width: 80vw;
}
}
.l-modal .m-qrbox .js-img {
position: relative;
width: min(35.8928571429vw, 402px);
margin-right: auto;
margin-bottom: min(2.1428571429vw, 24px);
margin-left: auto;
background-color: #ffffff;
}

.l-modal .m-qrbox .js-img::after {
position: absolute;
content: '';
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding-top: 71.42857142857143%;
}

.l-modal .m-qrbox .js-img img {
border: 1px solid #333333;
}
@media screen and (max-width: 767px) {
.l-modal .m-qrbox .js-img {
width: 37.3333333333vw;
}
}
.l-modal .m-qrbox .js-paper {
margin-right: auto;
margin-left: auto;
padding-left: min(2.3214285714vw, 26px);
color: #ffffff;
font-size: min(2.3214285714vw, 26px);
text-align: left;
font-family: 'Clarimo UD PE Regular', 'UD Shin Go Regular JIS2004',
sans-serif;
}
@media screen and (max-width: 767px) {
.l-modal .m-qrbox .js-paper {
font-size: 4.2666666667vw;
}
}
.l-modal .m-qrbox .js-size {
margin-right: auto;
margin-left: auto;
padding-left: min(2.3214285714vw, 26px);
color: #ffffff;
font-size: min(2.3214285714vw, 26px);
text-align: left;
font-family: 'Clarimo UD PE Regular', 'UD Shin Go Regular JIS2004',
sans-serif;
}
@media screen and (max-width: 767px) {
.l-modal .m-qrbox .js-size {
font-size: 4.2666666667vw;
}
}
.l-modal .m-qrbox__txt {
padding-left: calc(min(2.3214285714vw, 26px) + 1em);
color: #ffffff;
font-size: min(1.4285714286vw, 16px);
text-indent: -1em;
text-align: left;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.l-modal .m-qrbox__txt {
margin-top: 1.3333333333vw;
font-size: 3.7333333333vw;
}
}
.l-modal .m-qrbox .js-qr {
width: 61.3333333333vw;
margin-top: 5.3333333333vw;
margin-right: auto;
margin-left: auto;
}
.l-modal .m-qrbox .js-code {
margin-top: min(6.25vw, 70px);
color: #ffffff;
font-size: min(5.7142857143vw, 64px);
text-align: center;
font-family: 'Clarimo UD PE Regular', 'UD Shin Go Regular JIS2004',
sans-serif;
}
@media screen and (max-width: 767px) {
.l-modal .m-qrbox .js-code {
margin-top: 0;
font-size: 10.9333333333vw;
}
}
.l-play .m-inner .js-category_btn, .l-print .m-inner .js-change_btn {
    text-align: center;
}


a, button, label {
    cursor: pointer;
}