@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* ----------------------------------------------------------------
reset
----------------------------------------------------------------- */
* {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}

main h1 {
margin-top: 0rem;
margin-bottom: 0rem;
}

main h2, main h3, main h4, main h5, main h6, main p {
margin-top: 0rem;
margin-bottom: 0rem;
}

.l-wrap a {
transition: 0.3s ease-in-out;
transition-property: opacity;
}
.l-wrap a:hover {
opacity: 0.7;
}

.l-wrap {
position: relative;
width: 100%;
color: #828fc7;
font-weight: 400;
background: #F1CDCD;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
line-height: 1.4 !important;
letter-spacing: -0.06em !important;
}
.l-wrap h2, .l-wrap h3, .l-wrap p {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
-webkit-text-size-adjust: 100%;
}
.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-wrap a {
color: #828fc7;
text-decoration: underline;
}

.l-inner {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
background: #fff; /* important */
z-index: 1;
}
.l-inner::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 9px 0 9px -9px #df9797, -9px 0 9px -9px #df9797;
pointer-events: none;
z-index: -1; /* behind content, but above wrap bg */
}

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

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

.m-kv {
position: relative;
}

.m-nav {
width: 100%;
position: sticky;
top: 0;
z-index: 10;
max-width: 780px;
height: auto;
margin: 0 auto;
}
.m-nav-bg {
background: #828fc7;
width: 100%;
height: min(23.0769230769vw, 180px);
position: absolute;
z-index: 0;
}
.m-nav__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0;
width: 100%;
background-image: url("/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/oshimojiprintmaker/img/nav_bg.png");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
z-index: 11;
}
.m-nav__list li {
position: relative;
}
.m-nav__list li a {
text-decoration: none;
display: flex;
justify-content: center;
color: #fff;
font-size: min(3.5897435897vw, 28px);
font-weight: 500;
position: relative;
height: min(11.0256410256vw, 86px);
text-align: center;
line-height: 1;
}
.m-nav__list li:nth-child(1) {
width: 47.45%;
z-index: 10;
}
.m-nav__list li:nth-child(2) {
width: 52.55%;
z-index: 10;
}
.m-nav__list li:nth-child(3) {
width: 37.564%;
}
.m-nav__list li:nth-child(4) {
width: 24.615%;
}
.m-nav__list li:nth-child(5) {
width: 37.692%;
}
.m-nav__list li:nth-child(1) span, .m-nav__list li:nth-child(2) span {
margin-top: min(1.5384615385vw, 12px);
}
.m-nav__list li:nth-child(3) span, .m-nav__list li:nth-child(4) span, .m-nav__list li:nth-child(5) span {
margin-top: min(2.3076923077vw, 18px);
}

.l-about__txt {
background: #e1e8fd;
}
.l-about__frames {
background-image: url("/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/oshimojiprintmaker/img/frames_bg.png");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 122.1794871795vw;
max-height: 953px;
}
.l-about__frames ul {
padding-top: 70px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
@media screen and (max-width: 780px) {
.l-about__frames ul {
padding-top: 8.9743589744vw;
gap: 4.1025641026vw;
}
}
.l-about__frames ul li {
margin: 0 auto;
width: 83.0769230769vw;
max-width: 648px;
}

.l-use {
background-image: url("/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/oshimojiprintmaker/img/use_bg.png");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 1653px;
}
@media screen and (max-width: 780px) {
.l-use {
height: 211.9230769231vw;
}
}
.l-use__txt {
width: 76.9230769231vw;
max-width: 600px;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 48px;
}
@media screen and (max-width: 780px) {
.l-use__txt {
padding-top: 8.9743589744vw;
padding-bottom: 6.1538461538vw;
}
}
.l-use__steps {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 27px;
}
@media screen and (max-width: 780px) {
.l-use__steps {
gap: 3.4615384615vw;
}
}
.l-use__steps .step-img {
width: 63.5897435897vw;
max-width: 496px;
margin: 0 auto;
padding-bottom: 23px;
}
@media screen and (max-width: 780px) {
.l-use__steps .step-img {
padding-bottom: 2.9487179487vw;
}
}
.l-use__steps .step-txt {
margin: 0 auto;
padding: 0 0 23px;
}
@media screen and (max-width: 780px) {
.l-use__steps .step-txt {
padding: 0 0 2.9487179487vw;
}
}
.l-use__steps .step-txt img {
display: block;
margin: 0 auto;
}
.l-use__steps .step-txt01 img {
width: 26.5384615385vw;
max-width: 207px;
}
.l-use__steps .step-txt02 img {
width: 49.1025641026vw;
max-width: 383px;
}
.l-use__steps .step-txt03 img {
width: 52.9487179487vw;
max-width: 413px;
padding-bottom: 0;
}
.l-use__steps .arrow img {
display: block;
margin: 0 auto;
width: 15.641025641vw;
max-width: 122px;
}

.l-konbini {
background: #fff;
}

.l-print {
background: #e1e8fd;
}
.l-print__txt {
width: 83.0769230769vw;
max-width: 648px;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 45px;
}
@media screen and (max-width: 780px) {
.l-print__txt {
padding-top: 8.9743589744vw;
padding-bottom: 5.7692307692vw;
}
}
.l-print .tab-nav {
display: flex;
justify-content: space-between;
}
.l-print .tab-btn {
width: 100%;
background: #828fc7;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
@media screen and (max-width: 780px) {
.l-print .tab-btn {
border-top-left-radius: 3.8461538462vw;
border-top-right-radius: 3.8461538462vw;
}
}
.l-print .tab-btn svg {
fill: #fff;
display: block;
margin: 0 auto;
width: 31.2820512821vw;
max-width: 244px;
padding: 24px 0;
transition: none;
}
@media screen and (max-width: 780px) {
.l-print .tab-btn svg {
padding: 3.0769230769vw 0;
}
}
.l-print .tab-btn.is-active {
background: #fff;
border-top: #828fc7 solid 4px;
border-left: #828fc7 solid 4px;
border-right: #828fc7 solid 4px;
}
.l-print .tab-btn.is-active svg {
fill: #828fc7;
}
.l-print .tab-wrapper {
background: #fff;
border: 4px solid #828fc7;
border-top: none;
overflow: hidden;
padding: 52px 0 62px;
}
@media screen and (max-width: 780px) {
.l-print .tab-wrapper {
padding: 6.6666666667vw 0 7.9487179487vw;
}
}
.l-print .tab-content {
display: none;
}
.l-print .tab-content.is-active {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
@media screen and (max-width: 780px) {
.l-print .tab-content.is-active {
gap: 5.1282051282vw;
}
}
.l-print .tab-content p {
width: 83.0769230769vw;
max-width: 648px;
}
.l-print .tab-content p img {
width: 100%;
display: block;
}

.l-price {
background: #f1b9b8;
padding: 70px 0 50px;
}
@media screen and (max-width: 780px) {
.l-price {
padding: 8.9743589744vw 0 6.4102564103vw;
}
}
.l-price__txt {
width: 52.5641025641vw;
max-width: 410px;
margin: 0 auto;
}
.l-price__item {
display: flex;
justify-content: center;
gap: 32px;
margin-top: -10px;
padding-bottom: 24px;
}
@media screen and (max-width: 780px) {
.l-price__item {
gap: 4.1025641026vw;
margin-top: -1.2820512821vw;
padding-bottom: 3.0769230769vw;
}
}
.l-price__item p {
width: 33.5897435897vw;
max-width: 262px;
}
.l-price__note {
margin: 0 auto;
width: 69.2307692308vw;
max-width: 540px;
}
.l-price__note li {
color: #fff;
font-weight: 300;
font-size: clamp(0.75rem, 0.0543rem + 3.4783vw, 1.75rem);
}

.l-banner {
background: #fff;
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0;
}
@media screen and (max-width: 780px) {
.l-banner {
padding: 0.5128205128vw 0;
gap: 0.5128205128vw;
}
}
.l-banner a {
width: 100%;
display: block;
}
.l-banner a picture {
display: block;
}

/* MAIN BANNER (floating version) */
.oshimoji {
width: 100%;
max-width: 780px; /* desktop max */
height: auto;
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-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%;
}
}
.l-rules {
background: #e1e8fd;
padding: min(11.7948717949vw, 92px) min(8.0769230769vw, 63px) min(14.1025641026vw, 110px) min(7.3076923077vw, 57px);
}
.l-rules__ttl {
width: 100%;
margin: 0 auto;
padding-bottom: min(5.3846153846vw, 42px);
}
.l-rules__caution {
font-size: min(7.8205128205vw, 61px);
font-weight: 800;
margin: 0 auto;
text-align: center;
padding: min(15.3846153846vw, 120px) 0 min(7.6923076923vw, 60px);
}
.l-rules__txt {
font-size: min(4.6153846154vw, 36px);
}
.l-rules__list {
font-size: min(4.6153846154vw, 36px);
}
.l-rules__list:not(:first-of-type) {
margin-top: min(7.6923076923vw, 60px);
}
.l-rules__list li {
margin-bottom: min(7.9487179487vw, 62px);
}
.l-rules__list li:last-child {
margin-bottom: 0;
}
.l-rules__list .l-list__index li {
text-indent: 1em;
margin-bottom: 0;
}
.l-rules__list .l-list__index li .l-list__index li {
text-indent: 2em;
}
.l-rules__policy {
font-size: min(7.8205128205vw, 61px);
font-weight: 800;
margin: 0 auto;
text-align: center;
padding: min(8.9743589744vw, 70px) 0 min(7.6923076923vw, 60px);
}
.l-rules__policy-link {
font-size: min(4.6153846154vw, 36px);
font-weight: 800;
text-align: center;
margin-top: min(1.9230769231vw, 15px);
position: relative;
color: #828fc7;
text-decoration: underline;
}
.l-rules__policy-link::after {
position: absolute;
content: "";
left: min(19.2307692308vw, 150px);
top: min(1.5384615385vw, 12px);
background-image: url("/fb-sp/fb/ja/solutions/wide-variety/multicopy/oshikatu/oshimojiprintmaker/img/rules_link.png");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: min(5vw, 39px);
height: min(5vw, 39px);
}

.l-notification {
background: #fff;
padding: 110px 64px 115px 59px;
}
@media screen and (max-width: 780px) {
.l-notification {
padding: 14.1025641026vw 8.2051282051vw 14.7435897436vw 7.5641025641vw;
}
}
.l-notification__ttl {
text-align: center;
font-size: min(7.8205128205vw, 61px);
padding-bottom: min(5.3846153846vw, 42px);
font-weight: 800;
}
.l-notification__subTtl {
font-size: min(5.2564102564vw, 41px);
padding-bottom: 1em;
font-weight: 600;
}
.l-notification__link {
font-size: min(4.6153846154vw, 36px);
word-break: break-all;
}
.l-notification .divider {
display: block;
height: 1em;
width: 100%;
}
.l-notification__txt {
font-size: min(4.6153846154vw, 36px);
padding: 2em 0;
}
a,button,label {
    cursor: pointer
}