@charset "UTF-8"; /* # ================================================================= # 共通要素 # ================================================================= */ .mod-freeHTML { color: #000; font-size: 62.5%; font-family: "Noto Sans JP", sans-serif; } .mod-freeHTML a { text-decoration: none; transition: all 0.3s; } .mod-freeHTML a.fig { display: inline-block; margin: 0; vertical-align: top; } .mod-freeHTML a.fig picture { width: 100%; height: 100%; vertical-align: top; } .mod-freeHTML a.fig img { width: 100%; height: auto; vertical-align: top; } .mod-freeHTML ul, .mod-freeHTML h1, .mod-freeHTML h2, .mod-freeHTML h3, .mod-freeHTML h4, .mod-freeHTML h5, .mod-freeHTML h6 { margin: 0; padding: 0; font-weight: inherit; } .mod-freeHTML li { list-style-type: none; } .mod-freeHTML address { font-style: normal; } .mod-freeHTML p { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; display: inline; margin-inline-start: 0; margin-inline-end: 0; margin-block-start: 0; margin-block-end: 0; } .mod-freeHTML img { max-height: 100%; } .mod-freeHTML figure, .mod-freeHTML .fig { margin: 0; vertical-align: top; } .mod-freeHTML figure picture, .mod-freeHTML .fig picture { width: 100%; height: 100%; vertical-align: top; } .mod-freeHTML figure img, .mod-freeHTML .fig img { width: 100%; height: auto; vertical-align: top; } .mod-freeHTML figure img.sp, .mod-freeHTML .fig img.sp { display: none; } .mod-freeHTML figure img.pc, .mod-freeHTML .fig img.pc { display: inline-block; } .mod-freeHTML i { display: inline-block; height: auto; line-height: 0; vertical-align: top; } .mod-freeHTML i img { width: 100%; height: auto; vertical-align: top; } .mod-freeHTML i svg { display: inline-block; width: 100%; height: auto; vertical-align: top; } .mod-freeHTML button { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background-color: transparent; cursor: pointer; } .mod-freeHTML .yomogi { font-family: "Yomogi", cursive; } .mod-freeHTML .en { font-family: "Montserrat", sans-serif; } /*下記追加記述*/ /*component*/ .c-inner01 { width: 65.06vw; max-width: 1000px; margin: 0 auto; } .c-inner02 { width: 79.2%; margin: 0 auto; } .c-btn01 { display: grid; position: relative; place-items: center; width: 100%; max-width: 23.2em; height: 4em; margin-right: auto; margin-left: auto; border: 1px solid #000; font-weight: bold; font-size: 20px; } .c-btn01 .icon { position: absolute; top: 50%; right: 1.3em; width: 1em; transform: translateY(-50%); } .c-btn01::after { position: absolute; top: 50%; left: 50%; width: calc(100% - 7px); height: calc(100% - 7px); transform: translate(-50%, -50%); border-radius: 0.2em; background-image: linear-gradient(to right, #000 1.5px, transparent 1.5px), linear-gradient(to bottom, #000 1.5px, transparent 1.5px), linear-gradient(to left, #000 1.5px, transparent 1.5px), linear-gradient(to top, #000 1.5px, transparent 1.5px); background-position: left top, right bottom, right bottom, left top; background-size: 0.35em 1.5px, 1.5px 0.35em, 0.35em 1.5px, 1.5px 0.35em; background-repeat: repeat-x, repeat-y, repeat-x, repeat-y; content: ""; } .c-ttl01 { display: block; background-color: #cabca4; color: #fff; font-weight: bold; font-size: 30px; line-height: 1.6; letter-spacing: 0.2em; text-align: center; } .c-ttl02 { font-size: 28px; line-height: 1.6; letter-spacing: 0.1em; } /*project*/ .p-app { width: 83%; margin: 0 auto; padding: 1em 1em 0.5em; border: 1px solid #000; border-radius: 1em; color: #0d0d0d; font-weight: 500; font-size: 20px; } .p-app__head { display: flex; align-items: center; justify-content: space-between; } .p-app__head .fig { width: 11%; } .p-app__head .desc { width: 84%; line-height: 1.6; } .p-app__links { display: flex; justify-content: center; margin-bottom: 0.5em; } .p-app__links .link { width: auto; height: 3.6em; } .p-app__links .link:first-child { margin-right: 2.3em; } .p-app__links .fig { width: auto; height: 100%; } .p-app__links .fig img { width: auto; height: 100%; } .p-app__ant { color: #0d0d0d; font-size: 12px; line-height: 1.5; } .p-app.green { border-color: #2d8b3a; } /*utility*/ .u-bl-lgpc { display: none !important; } .u-bl-pc { display: none !important; } .u-bl-tb { display: none !important; } /*page*/ .mod-freeHTML .comparison { position: relative; font-size: 16px; word-break: normal; } .mod-freeHTML .s-mv .fig { margin-bottom: 5em; } .mod-freeHTML .s-mv__cont { display: flex; flex-direction: column; align-items: center; } .mod-freeHTML .s-mv__cont__ttl { margin-bottom: 0.6em; font-weight: bold; font-size: 36px; line-height: 1.1; letter-spacing: 0.2em; text-align: center; } .mod-freeHTML .s-mv__cont__desc { font-size: 20px; line-height: 2; letter-spacing: 0.1em; text-align: center; } .mod-freeHTML .s-appeal { padding-top: 3.8em; } .mod-freeHTML .s-appeal__ttl { margin-bottom: 2.6em; } .mod-freeHTML .s-appeal__cont.share { margin-bottom: 7.6em; } .mod-freeHTML .s-appeal__cont__ttl { margin-bottom: 1.5em; } .mod-freeHTML .s-appeal__cont .box { display: flex; justify-content: space-between; margin-bottom: 2.5em; } .mod-freeHTML .s-appeal__cont .box__wrap { -webkit-clip-path: polygon(100% 0, 100% 86%, 97% 100%, 0 100%, 0 0); box-sizing: border-box; display: flex; flex-grow: 1; align-items: center; max-width: 48.4%; padding: 0.6em 1.2em; overflow: hidden; background-image: url("/-/media/cojp/product/labelwriter/special/cube/label-place/img/bg-paper"); background-position: top left; background-size: 200% auto; clip-path: polygon(100% 0, 100% 86%, 97% 100%, 0 100%, 0 0); } .mod-freeHTML .s-appeal__cont .box__wrap .icon { width: 6.2em; margin-right: 1.8em; } .mod-freeHTML .s-appeal__cont .box__wrap .desc { flex: 1; line-height: 1.5em; } .mod-freeHTML .s-appeal__cont .list { display: flex; justify-content: space-between; } .mod-freeHTML .s-appeal__cont .list__item { position: relative; width: 48.4%; } .mod-freeHTML .s-appeal__cont .list__item .fukidashi { position: absolute; top: -4%; right: -3%; width: 48.9%; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16)); } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child) { position: relative; } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::before, .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::after { position: absolute; top: 50%; left: 100%; width: 5%; height: 1px; transform-origin: right; background-color: #000; content: ""; } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::before { transform: translateY(-50%) rotate(-60deg); } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::after { transform: translateY(-50%) rotate(60deg); } .mod-freeHTML .s-appeal__cont__desc { display: block; margin-top: 5em; color: #000; font-size: 20px; line-height: 2; letter-spacing: 0.1em; } .mod-freeHTML .s-appeal__cont .link { margin-top: 2em; } .mod-freeHTML .s-point { padding-top: 3.8em; } .mod-freeHTML .s-point__cont.save { margin-bottom: 2.5em; } .mod-freeHTML .s-point__cont.use .fig { margin-bottom: 1.3em; } .mod-freeHTML .s-point__cont__ttl { display: inline-block; margin-bottom: 0.9em; line-height: 1.3; } .mod-freeHTML .s-point__cont__box { display: flex; justify-content: space-between; margin-bottom: 3.25em; } .mod-freeHTML .s-point__cont__box .wrap { display: flex; align-items: flex-end; width: 48%; } .mod-freeHTML .s-point__cont__box .wrap__txt { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 15.6em; height: 15.6em; border: 0.25em solid #cabca4; border-radius: 50%; font-size: 20px; text-align: center; } .mod-freeHTML .s-point__cont__box .wrap__txt::after { z-index: -1; position: absolute; top: 0.3em; left: 0.5em; width: 100%; height: 100%; border-radius: 50%; background-color: #cabca4; content: ""; opacity: 0.26; } .mod-freeHTML .s-point__cont__box .wrap__txt .ribbon { -webkit-clip-path: polygon(100% 0, 95.3% 50%, 100% 100%, 0% 100%, 4.7% 50%, 0% 0%); display: grid; place-content: center; width: 8.4em; height: 1.45em; background-color: #917125; color: #fff; font-weight: bold; font-size: 22px; text-align: center; clip-path: polygon(100% 0, 95.3% 50%, 100% 100%, 0% 100%, 4.7% 50%, 0% 0%); } .mod-freeHTML .s-point__cont__box .wrap__txt .txt01 { margin: 0.3em 0; line-height: 1.4; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt02 { color: #917125; font-weight: bold; line-height: 1; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt03 { color: #917125; font-weight: bold; font-size: 36px; line-height: 1.3; text-align: center; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt03 .border { display: inline-block; border-bottom: 0.16em solid #cabca4; line-height: 1.1; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt04 { color: #917125; font-weight: bold; font-size: 28px; line-height: 2; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt04 .border { position: relative; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt04 .border::after { position: absolute; bottom: -0.1em; left: 0; width: 100%; height: 0.2em; background-color: #cabca4; content: ""; } .mod-freeHTML .s-point__cont__box .wrap .fig { flex: 1; } .mod-freeHTML .s-point__cont__desc { line-height: 1.5; } .mod-freeHTML .s-point__link { margin-top: 4em; } .mod-freeHTML .s-terms { position: relative; padding: 10em 0; border-bottom: 1px solid #000; } .mod-freeHTML .s-terms::after { position: absolute; bottom: -0.4em; left: 0; width: 100%; height: 0.2em; transform: translateY(100%); background-color: #000; content: ""; } .mod-freeHTML .s-terms__cont { padding: 5em 5.3em; background-image: url("/-/media/cojp/product/labelwriter/special/cube/label-place/img/bg-paper"); background-position: top left; background-size: 100% auto; background-repeat: repeat-y; } .mod-freeHTML .s-terms__cont__ttl { display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto; margin-bottom: 1em; border-bottom: 0.2em solid #000; font-weight: bold; font-size: 20px; text-align: center; } .mod-freeHTML .s-terms__cont__lead { display: block; margin-bottom: 2em; font-size: 20px; line-height: 2; text-align: center; } .mod-freeHTML .s-terms__cont__table { width: 100%; border-top: 1px solid #bcbcbc; border-collapse: collapse; line-height: 1.5; } .mod-freeHTML .s-terms__cont__table .column { border-bottom: 1px solid #bcbcbc; } .mod-freeHTML .s-terms__cont__table th, .mod-freeHTML .s-terms__cont__table td { padding: 1.25em 0; } .mod-freeHTML .s-terms__cont__table .ttl { width: 10em; font-weight: normal; text-align: left; vertical-align: top; } .mod-freeHTML .s-terms__cont__table .ttl h3 { font-size: 16px; } .mod-freeHTML .s-terms__cont__table .link { display: flex; align-items: center; margin-top: 0.75em; font-weight: bold; } .mod-freeHTML .s-terms__cont__table .link .icon { width: 0.75em; margin-left: 0.5em; } .mod-freeHTML .s-faq { padding-top: 7.5em; } .mod-freeHTML .s-faq__ttl { position: relative; margin-bottom: 0.6em; font-weight: 500; font-size: 64px; } .mod-freeHTML .s-faq__ttl .icon { position: absolute; top: 0.4em; right: 0; width: 1.5em; } .mod-freeHTML .s-faq__cont__ttl { margin-bottom: 1em; padding-bottom: 0.6em; border-bottom: 1px solid #000; font-weight: bold; font-size: 20px; line-height: 1.7; } .mod-freeHTML .s-faq__cont:not(:last-of-type) { margin-bottom: 4em; } .mod-freeHTML .s-faq__cont__box { padding: 1.25em 0; } .mod-freeHTML .s-faq__cont__box:not(:last-of-type) { border-bottom: 1px dashed #bcbcbc; } .mod-freeHTML .s-faq__cont__box .wrap { display: flex; } .mod-freeHTML .s-faq__cont__box .wrap__ttl { width: 1.6em; font-weight: 300; font-size: 33px; line-height: 1.2; } .mod-freeHTML .s-faq__cont__box .wrap__desc { flex: 1; padding-top: 0.2em; font-weight: 300; font-size: 16px; line-height: 1.5; } .mod-freeHTML .s-faq__cont__box .wrap.question.is-active::after { transform: translateY(-50%); } .mod-freeHTML .s-faq__cont__box .wrap.question .wrap__desc { font-weight: bold; } .mod-freeHTML .s-faq__cont__box .wrap.answer { padding-top: 0.8em; } .mod-freeHTML .s-faq__cont__box .wrap.answer .link { color: #298ece; text-decoration: underline; } .mod-freeHTML .s-faq__cont__box .wrap.answer .fig { margin-top: 1.9em; margin-left: -1.6em; font-size: 33px; } .mod-freeHTML .s-faq__link { margin-top: 4em; } .mod-freeHTML .s-app { padding: 5em 0 10em; } .mod-freeHTML .s-app__cont { padding: 2.5em 5.3em; background-image: url("/-/media/cojp/product/labelwriter/special/cube/label-place/img/bg-paper"); background-position: top left; background-size: 100% auto; background-repeat: repeat-y; } .mod-freeHTML .s-app__cont__ttl { display: block; margin-bottom: 1.7em; font-weight: bold; font-size: 20px; line-height: 1.2; text-align: center; } .mod-freeHTML .s-app__cont__box { display: flex; justify-content: space-between; margin-bottom: 1.5em; } .mod-freeHTML .s-app__cont__box > div { width: 46%; } .mod-freeHTML .s-app__cont__box .app { display: flex; } .mod-freeHTML .s-app__cont__box .app .fig { width: 5.4em; margin-right: 1.25em; font-size: 16px; } .mod-freeHTML .s-app__cont__box .app .txt { flex: 1; } .mod-freeHTML .s-app__cont__box .app .txt__ttl { margin-bottom: 0.5em; font-weight: bold; font-size: 20px; line-height: 1.5; } .mod-freeHTML .s-app__cont__box .app .txt__desc { font-weight: 300; font-size: 14px; line-height: 1.4; } .mod-freeHTML .s-app__cont__box .store__txt { display: flex; align-items: center; justify-content: center; margin-bottom: 1.1em; font-weight: 300; font-size: 14px; } .mod-freeHTML .s-app__cont__box .store__txt .icon { width: 0.6em; margin-left: 0.3em; transform: rotate(90deg); } .mod-freeHTML .s-app__cont__box .store .wrap { display: flex; align-items: center; justify-content: space-between; } .mod-freeHTML .s-app__cont__box .store .wrap a { width: 45%; } .mod-freeHTML .s-app__cont__box .store .wrap a.google { width: 49%; } .mod-freeHTML .s-app__cont__ant { font-weight: 300; font-size: 14px; line-height: 1.6; } .st-backToTopFixed { z-index: 10; } .st-notification_inner { -ms-overflow-style: none; width: 100%; max-width: none; margin: 0 35px; overflow-x: scroll; white-space: nowrap; /*Firefoxへの対応*/ scrollbar-width: none; } .st-notification_inner::-webkit-scrollbar { display: none; } .mod-breadCrumble_inner { -ms-overflow-style: none; width: 100%; max-width: none; margin: 0 40px; overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } .mod-breadCrumble_inner::-webkit-scrollbar { display: none; } @media screen and (max-width: 1529px) { body { margin: 0; } .mod-freeHTML { font-size: 0.6493506494vw; } .c-inner01 { width: 80%; } .c-inner02 { width: 90%; } .c-btn01 { font-size: clamp(16px, 1.3vw, 20px); } .c-ttl01 { font-size: clamp(22px, 1.95vw, 30px); } .c-ttl02 { font-size: clamp(20px, 1.82vw, 28px); } .p-app { font-size: clamp(16px, 1.3vw, 20px); } .p-app__ant { font-size: clamp(12px, 0.78vw, 12px); } .u-bl-lgpc { display: block !important; } .u-none-lgpc { display: none !important; } .mod-freeHTML .comparison { font-size: clamp(14px, 1.04vw, 16px); } .mod-freeHTML .s-mv__cont__ttl { font-size: clamp(26px, 2.34vw, 36px); } .mod-freeHTML .s-mv__cont__desc { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-appeal__cont__desc { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-point__cont__box .wrap__txt { font-size: clamp(18px, 1.3vw, 20px); } .mod-freeHTML .s-point__cont__box .wrap__txt .ribbon { font-size: clamp(19px, 1.43vw, 22px); } .mod-freeHTML .s-point__cont__box .wrap__txt .txt03 { font-size: clamp(30px, 2.34vw, 36px); } .mod-freeHTML .s-point__cont__box .wrap__txt .txt04 { font-size: clamp(22px, 1.82vw, 28px); } .mod-freeHTML .s-terms__cont__ttl { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-terms__cont__lead { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-terms__cont__table .ttl h3 { font-size: clamp(14px, 1.04vw, 16px); } .mod-freeHTML .s-faq__ttl { font-size: clamp(52px, 4.16vw, 64px); } .mod-freeHTML .s-faq__cont__ttl { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-faq__cont__box .wrap__ttl { font-size: clamp(24px, 2.15vw, 33px); } .mod-freeHTML .s-faq__cont__box .wrap__desc { font-size: clamp(14px, 1.04vw, 16px); } .mod-freeHTML .s-faq__cont__box .wrap.answer .fig { font-size: clamp(24px, 2.15vw, 33px); } .mod-freeHTML .s-app__cont__ttl { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-app__cont__box .app .fig { font-size: clamp(14px, 1.04vw, 16px); } .mod-freeHTML .s-app__cont__box .app .txt__ttl { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-app__cont__box .app .txt__desc { font-size: clamp(14px, 0.91vw, 14px); } .mod-freeHTML .s-app__cont__box .store__txt { font-size: clamp(14px, 0.91vw, 14px); } .mod-freeHTML .s-app__cont__ant { font-size: clamp(14px, 0.91vw, 14px); } } @media screen and (max-width: 1023px) { body { margin: 0; } .mod-freeHTML { font-size: 0.7142857143vw; } .c-inner01 { width: 90%; } .u-bl-pc { display: block !important; } .u-none-pc { display: none !important; } } @media screen and (max-width: 767px) { body { margin: 0; } .mod-freeHTML { font-size: 1.9801980198vw; } .mod-freeHTML figure img.sp, .mod-freeHTML .fig img.sp { display: inline-block; } .mod-freeHTML figure img.pc, .mod-freeHTML .fig img.pc { display: none; } .c-inner01 { width: auto; margin: 0 6.41vw; } .c-inner02 { width: auto; margin: 0 2.56vw; } .c-btn01 { max-width: 19.2em; font-size: 3.59vw; } .c-btn01 .icon { width: 0.85em; } .c-btn01::after { width: calc(100% - 1.79vw); height: calc(100% - 1.79vw); background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px), linear-gradient(to left, #000 1px, transparent 1px), linear-gradient(to top, #000 1px, transparent 1px); background-size: 0.35em 1px, 1px 0.35em, 0.35em 1px, 1px 0.35em; } .c-ttl01 { font-size: 5.13vw; line-height: 2.2; letter-spacing: 0.02em; } .c-ttl02 { font-size: 5.13vw; line-height: 1.5; } .p-app { width: auto; padding: 6.15vw 6.15vw 2.82vw; border-radius: 3.08vw; font-size: 3.59vw; } .p-app__head { margin-bottom: 2.82vw; } .p-app__head .fig { width: 28%; } .p-app__head .desc { width: 68.2%; } .p-app__links { align-items: center; justify-content: space-between; margin-bottom: 2.56vw; } .p-app__links .link { width: 48%; height: auto; } .p-app__links .link:first-child { margin-right: 0; } .p-app__links .fig { width: 100%; height: auto; } .p-app__links .fig img { width: 100%; height: auto; } .p-app__ant { font-size: 3.08vw; line-height: 1.6; } .u-bl-tb { display: block !important; } .u-none-tb { display: none !important; } .mod-freeHTML .comparison { font-size: 4.1vw; } .mod-freeHTML .s-mv .fig { margin-bottom: 10.26vw; } .mod-freeHTML .s-mv__cont { align-items: flex-start; padding: 0 6.41vw; } .mod-freeHTML .s-mv__cont__ttl { font-size: 5.64vw; line-height: 1.8; letter-spacing: 0.01em; text-align: left; } .mod-freeHTML .s-mv__cont__desc { font-size: 4.62vw; line-height: 1.6; letter-spacing: 0.05em; text-align: left; } .mod-freeHTML .s-appeal { padding-top: 10.51vw; } .mod-freeHTML .s-appeal__ttl { margin-bottom: 2em; } .mod-freeHTML .s-appeal__cont.share { margin-bottom: 5.7em; } .mod-freeHTML .s-appeal__cont__ttl { margin-bottom: 1em; } .mod-freeHTML .s-appeal__cont .box { row-gap: 5.13vw; flex-direction: column; margin-bottom: 7.69vw; } .mod-freeHTML .s-appeal__cont .box__wrap { max-width: 100%; padding: 3.08vw; background-size: 250% auto; } .mod-freeHTML .s-appeal__cont .box__wrap .icon { width: 20.77vw; margin-right: 3.33vw; } .mod-freeHTML .s-appeal__cont .box__wrap .desc { font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-appeal__cont .list { row-gap: 8.72vw; flex-direction: column; } .mod-freeHTML .s-appeal__cont .list__item { width: 100%; } .mod-freeHTML .s-appeal__cont .list__item .fukidashi { top: -5%; right: -4.6%; width: 45.8%; } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::before, .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::after { top: calc(100% + 0.51vw); left: 50%; width: 1px; height: 4.87vw; transform-origin: bottom; } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::before { transform: translateX(-50%) rotate(-60deg); } .mod-freeHTML .s-appeal__cont .list__item:not(:last-child)::after { transform: translateX(-50%) rotate(60deg); } .mod-freeHTML .s-appeal__cont__desc { margin-top: 20.51vw; font-size: 5.13vw; letter-spacing: 0; } .mod-freeHTML .s-appeal__cont .link { margin-top: 10.26vw; } .mod-freeHTML .s-point { padding-top: 10.26vw; } .mod-freeHTML .s-point__cont.save { margin-bottom: 10.51vw; } .mod-freeHTML .s-point__cont.use .fig { margin-bottom: 5.13vw; } .mod-freeHTML .s-point__cont__ttl { margin-bottom: 6.15vw; font-size: 5.13vw; } .mod-freeHTML .s-point__cont__box { row-gap: 2.56vw; flex-direction: column; margin-bottom: 5.13vw; } .mod-freeHTML .s-point__cont__box .wrap { position: relative; width: 100%; } .mod-freeHTML .s-point__cont__box .wrap__txt { width: 54.36vw; height: 54.36vw; border: 2px solid #cabca4; } .mod-freeHTML .s-point__cont__box .wrap__txt.spStart { justify-content: flex-start; } .mod-freeHTML .s-point__cont__box .wrap__txt .ribbon { position: absolute; top: 2.82vw; left: 50%; width: 6.3em; height: 1.5em; transform: translateX(-50%); font-size: 5.13vw; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt01 { margin: 11.28vw 0 0; font-size: 3.85vw; line-height: 1.3; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt02 { font-size: 5.13vw; line-height: 1.3; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt03 { margin-top: 0.1em; font-size: 6.92vw; line-height: 1.1; } .mod-freeHTML .s-point__cont__box .wrap__txt .txt04 { font-size: 5.13vw; line-height: 2; } .mod-freeHTML .s-point__cont__box .wrap .fig { z-index: -2; position: absolute; bottom: 0; } .mod-freeHTML .s-point__cont__box .wrap .fig.coin { right: 0; width: 29.49vw; } .mod-freeHTML .s-point__cont__box .wrap .fig.message { right: 0; right: -2.56vw; width: 32.82vw; } .mod-freeHTML .s-point__cont__desc { font-size: 4.1vw; } .mod-freeHTML .s-point__link { margin-top: 20.51vw; } .mod-freeHTML .s-terms { padding: 30.77vw 0 20.51vw; } .mod-freeHTML .s-terms__cont { padding: 10.26vw 5.13vw 20.51vw; background-size: 250% auto; } .mod-freeHTML .s-terms__cont__ttl { border-bottom: 4px solid #000; font-size: 5.13vw; } .mod-freeHTML .s-terms__cont__lead { font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-terms__cont__table .column { display: flex; flex-direction: column; padding: 5.13vw 0; } .mod-freeHTML .s-terms__cont__table th, .mod-freeHTML .s-terms__cont__table td { padding: 0; } .mod-freeHTML .s-terms__cont__table .ttl { width: 100%; margin-bottom: 3.08vw; font-size: 4.1vw; } .mod-freeHTML .s-terms__cont__table .ttl h3 { font-size: 4.1vw; } .mod-freeHTML .s-terms__cont__table .desc { font-weight: 300; font-size: 3.59vw; } .mod-freeHTML .s-terms__cont__table .link { margin-top: 3.08vw; } .mod-freeHTML .s-faq { padding-top: 10.26vw; } .mod-freeHTML .s-faq__ttl { margin-bottom: 10.26vw; font-size: 9.49vw; } .mod-freeHTML .s-faq__ttl .icon { top: 50%; right: -1.79vw; width: 16.15vw; transform: translateY(-50%); } .mod-freeHTML .s-faq__cont__ttl { margin-bottom: 5.13vw; padding-bottom: 0.5em; font-size: 4.1vw; } .mod-freeHTML .s-faq__cont:not(:last-of-type) { margin-bottom: 10.26vw; } .mod-freeHTML .s-faq__cont__box { padding: 0; } .mod-freeHTML .s-faq__cont__box:not(:last-of-type) { margin-bottom: 5.13vw; padding-bottom: 5.13vw; } .mod-freeHTML .s-faq__cont__box .wrap__ttl { width: 11.03vw; font-size: 8.46vw; } .mod-freeHTML .s-faq__cont__box .wrap__desc { padding-top: 0.5em; font-size: 4.1vw; } .mod-freeHTML .s-faq__cont__box .wrap.question { position: relative; padding-right: 13.85vw; cursor: pointer; } .mod-freeHTML .s-faq__cont__box .wrap.question::after, .mod-freeHTML .s-faq__cont__box .wrap.question::before { position: absolute; top: 50%; right: 0; width: 5.13vw; height: 1px; transform: translateY(-50%); background-color: #000; content: ""; } .mod-freeHTML .s-faq__cont__box .wrap.question::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.3s; } .mod-freeHTML .s-faq__cont__box .wrap.answer { padding-top: 3.08vw; } .mod-freeHTML .s-faq__cont__box .wrap.answer .fig { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 5.13vw; margin-left: -11.03vw; } .mod-freeHTML .s-faq__cont__box .wrap.answer .fig img { width: 50%; } .mod-freeHTML .s-faq__cont__box .wrap.answer .fig img:nth-child(2) { width: 50%; margin-top: 3.85vw; } .mod-freeHTML .s-faq__cont__box .wrap.answer .fig img:nth-child(3) { width: 45%; } .mod-freeHTML .s-faq__cont__box .js-accordion { display: none; } .mod-freeHTML .s-app { padding: 20.51vw 0 41.03vw; } .mod-freeHTML .s-app__cont { padding: 10.26vw 5.13vw; background-size: 250% auto; } .mod-freeHTML .s-app__cont__ttl { margin-bottom: 5.13vw; font-size: 3.59vw; } .mod-freeHTML .s-app__cont__box { row-gap: 5.13vw; flex-direction: column; margin-bottom: 5.13vw; } .mod-freeHTML .s-app__cont__box > div { width: 100%; } .mod-freeHTML .s-app__cont__box .app { align-items: center; } .mod-freeHTML .s-app__cont__box .app .fig { width: 20.51vw; margin-right: 2.56vw; } .mod-freeHTML .s-app__cont__box .app .txt__ttl { margin-bottom: 0.2em; font-size: 4.1vw; } .mod-freeHTML .s-app__cont__box .app .txt__desc { font-size: 3.08vw; line-height: 1.6; } .mod-freeHTML .s-app__cont__box .store__txt { margin-bottom: 2.05vw; font-size: 3.59vw; } .mod-freeHTML .s-app__cont__ant { font-size: 3.08vw; } .st-notification_inner { margin: 0; } .mod-breadCrumble_inner { margin: 0; } } @media screen and (max-width: 599px) { body { margin: 0; } .mod-freeHTML { font-size: 2.6666666667vw; } } @media screen and (max-width: 374px) { body { margin: 0; } } @media screen and (max-width: 319px) { body { margin: 0; } }