@charset "UTF-8"; /* @include animation(anime-opening_face 4s ease 0.5s); @include keyframes(anime-opening_face){ 0% { transform: translate(-50%,100%); } 30% { transform: translate(-50%,0); } 70% { transform: translate(-50%,0); } 100%{ transform: translate(-50%,100%); } } */ /* ======================================== common style ========================================*/ .mod-freeHTML #data-creation-lp-wrapper { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3"; font-size: 10px; } .mod-freeHTML #data-creation-lp-wrapper.js-page_loaded { opacity: 1; } .mod-freeHTML #data-creation-lp-wrapper h1, .mod-freeHTML #data-creation-lp-wrapper h2, .mod-freeHTML #data-creation-lp-wrapper h3 { margin: 0; font-size: 100%; } .mod-freeHTML #data-creation-lp-wrapper ul { margin: 0; padding: 0; list-style: none; } .mod-freeHTML #data-creation-lp-wrapper p { margin: 0; } .mod-freeHTML #data-creation-lp-wrapper img { height: auto; max-width: 100%; width: auto; } .mod-freeHTML #data-creation-lp-wrapper img[src$=".svg"] { width: 100%; } .mod-freeHTML #data-creation-lp-wrapper sup { font-size: 0.714em; } .mod-freeHTML #data-creation-lp-wrapper .iBlock { display: inline-block; *display: inline; *zoom: 1; } .mod-freeHTML #data-creation-lp-wrapper * { -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML #data-creation-lp-wrapper *::after, .mod-freeHTML #data-creation-lp-wrapper *::before { -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML #data-creation-lp-wrapper input[type=text] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 100%; padding: 0; border: none; height: 1.5em; } .mod-freeHTML #data-creation-lp-wrapper table { border-collapse: collapse; border: none; border-spacing: 0; } .mod-freeHTML #data-creation-lp-wrapper th, .mod-freeHTML #data-creation-lp-wrapper td { vertical-align: top; border: none; font-weight: normal; text-align: left; } .mod-freeHTML #data-creation-lp-wrapper caption { text-align: left; } .mod-freeHTML #data-creation-lp-wrapper * { min-height: 0vw; /* Safari clamp関数対策 */ } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .u-pc { display: none; } } @media (min-width: 641px) { .mod-freeHTML #data-creation-lp-wrapper .u-sp { display: none; } } .mod-freeHTML #data-creation-lp-wrapper .iBlock { display: inline-block; } .mod-freeHTML #data-creation-lp-wrapper .font--word { color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .font--excel { color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .font--pp { color: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .hover-opc:hover { opacity: 0.6; cursor: pointer; } .mod-freeHTML #data-creation-lp-wrapper .blank-anchor { margin-top: -30px; padding-top: 30px; } .mod-freeHTML #data-creation-lp-wrapper .num-circle { width: 6em; height: 6em; background: linear-gradient(to bottom right, #FFFFFF 50%, #f2f2f2); border-radius: 6em; box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.4); font-size: clamp(1.4em, 1.75vw, 2.8em); font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .num-circle { font-size: min(3.75vw, 2.4em); } } .mod-freeHTML #data-creation-lp-wrapper .num-circle::after { content: ""; width: 5.25em; height: 5.25em; border: solid 2px transparent; border-radius: 5.25em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .num-circle::after { border-width: 0.3125vw; } } .mod-freeHTML #data-creation-lp-wrapper .num-circle--first { color: #41d3bc; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--first::after { border-color: #41d3bc; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--second { color: #ff6670; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--second::after { border-color: #ff6670; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--third { color: #ffa401; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--third::after { border-color: #ffa401; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--word { color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--word::after { border-color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--excel { color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--excel::after { border-color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--pp { color: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .num-circle--pp::after { border-color: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .num-circle .step { font-size: 0.71429em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .num-circle .step { font-size: 0.75em; } } .mod-freeHTML #data-creation-lp-wrapper .num-circle .big { font-size: 2.03571em; line-height: 1em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .num-circle .big { font-size: 2.16667em; } } /* ======================================== kv ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .kv__inner { width: 100%; margin: 0 auto; text-align: center; } .mod-freeHTML #data-creation-lp-wrapper .kv__inner picture img { width: 100%; max-width: none; } /* ======================================== bg-border ========================================*/ @media (min-width: 641px) { .mod-freeHTML #data-creation-lp-wrapper .bg-border { background-image: url (/-/media/cojp/product/printer/special/bij/roll-paper/data-creation/img/pc-webp/bg-border01), url (/-/media/cojp/product/printer/special/bij/roll-paper/data-creation/img/pc-webp/bg-border01); background-repeat: repeat-y; background-position: top left, top right; background-size: auto 9.625vw; } } .mod-freeHTML #data-creation-lp-wrapper .bg-border__inner { width: 89.375%; max-width: 1430px; background: #FFFFFF; margin: 0 auto; padding: 6.25% 0; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .bg-border__inner { width: 100%; padding: 6.25% 0 0; } } /* ======================================== anchor ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .anchor__inner { width: 79.020979021%; margin: 0 auto 8.3916083916%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__inner { width: 87.5%; margin-bottom: 12.5%; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__heading { margin-bottom: 1.7699115044%; color: #737373; font-size: clamp(1.5em, 1.875vw, 3em); text-align: center; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__heading { margin-bottom: 5.3571428571%; font-size: min(4.6875vw, 3em); align-items: flex-end; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__heading__deco { width: 0.75em; height: 1.25em; margin: 0 0.5em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__heading__deco { width: 0.75em; height: 2em; margin-bottom: 0.15em; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__heading__deco--left { transform: scale(-1, 1); } .mod-freeHTML #data-creation-lp-wrapper .anchor__list { text-align: center; display: flex; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list { flex-direction: column; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__list li { width: 50%; background: #FFFFFF; border-radius: 10px; box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.4); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list li { width: 100%; border-radius: 1.5625vw; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__list li:first-child { margin-right: 7.0796460177%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list li:first-child { margin: 0 0 5.3571428571%; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__list a { width: 100%; height: 100%; padding: 9.900990099% 4.9504950495% 7.9207920792%; display: block; display: flex; align-items: center; justify-content: center; flex-direction: column; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list a { padding: 5.3571428571% 0; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__list__logo { width: 43.5643564356%; margin: 0 auto 2.9702970297%; display: block; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list__logo { width: 39.2857142857%; } } .mod-freeHTML #data-creation-lp-wrapper .anchor__list__WEP { margin-bottom: 5px; font-size: clamp(1.5em, 1.875vw, 3em); display: block; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list__WEP { font-size: min(5vw, 3.2em); } } .mod-freeHTML #data-creation-lp-wrapper .anchor__list__WEP .font--word, .mod-freeHTML #data-creation-lp-wrapper .anchor__list__WEP .font--excel, .mod-freeHTML #data-creation-lp-wrapper .anchor__list__WEP .font--pp { font-weight: bold; } .mod-freeHTML #data-creation-lp-wrapper .anchor__list__txt { font-size: clamp(1.3em, 1.625vw, 2.6em); letter-spacing: 0.06em; line-height: 1em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .anchor__list__txt { font-size: min(4.375vw, 2.8em); } } /* ======================================== case ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .case__inner { width: 86.013986014%; margin: 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__inner { width: 87.5%; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl { margin-bottom: 6.5040650407%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl { margin-bottom: 10.7142857143%; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__sub { margin-bottom: 1em; font-size: clamp(1.2em, 1.5vw, 2.4em); letter-spacing: 0.1em; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__sub { margin-bottom: 0.5em; font-size: min(4.375vw, 2.8em); } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco { width: 100%; padding: 2.4390243902%; font-size: clamp(1.7em, 2.125vw, 3.4em); font-weight: normal; text-align: center; position: relative; display: block; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco { padding: 7.1428571429% 0; font-size: min(4.375vw, 2.8em); } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco::before, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco::after { content: ""; width: 50%; height: 50%; border: solid 4px transparent; position: absolute; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco::before, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco::after { border-width: 0.625vw; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco::before { border-radius: 200px 0 0; top: 0; left: 0; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco::after { border-radius: 0 200px 0; top: 0; right: 0; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--popkit::before { border-left-color: #41d3bc; border-top-color: #41d3bc; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--popkit::after { border-top-color: #ffa401; border-right-color: #ffa401; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--WEP { padding: 6.25% 0 4.4642857143%; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--WEP::before { border-left-color: #1f3277; border-top-color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--WEP::after { border-top-color: #d24833; border-right-color: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under::before, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under::after { content: ""; width: 50%; height: 50%; border: solid 4px transparent; position: absolute; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under::before, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under::after { border-width: 0.625vw; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under::before { border-radius: 0 0 0 200px; bottom: 0; left: 0; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under::after { border-radius: 0 0 200px 0; bottom: 0; right: 0; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under--popkit::before { border-left-color: #ff6670; border-bottom-color: #ff6670; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under--popkit::after { border-right-color: #707176; border-bottom-color: #707176; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under--WEP::before { border-left-color: #136a3b; border-bottom-color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--under--WEP::after { border-right-color: #707176; border-bottom-color: #707176; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white::before, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white::after { content: ""; background: #FFFFFF; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white::before { width: 20px; height: 105%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white::before { width: 3.125vw; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white::after { width: 105%; height: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__deco--white::after { height: 3.125vw; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__logo { width: 21.9512195122%; max-width: 270px; vertical-align: middle; display: inline-block; position: relative; z-index: 10; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__logo { width: 35.7142857143%; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__logo picture { display: flex; } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__tool { font-size: 1.11765em; vertical-align: middle; position: relative; z-index: 10; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__tool { font-size: 1.1429em; line-height: 1em; display: block; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__tool .font--word, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__tool .font--excel, .mod-freeHTML #data-creation-lp-wrapper .case__ttl__tool .font--pp { font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__ttl__tool + .case__ttl__txt { margin-left: 0; line-height: 1em; } } .mod-freeHTML #data-creation-lp-wrapper .case__ttl__txt { margin-left: 0.5em; vertical-align: middle; position: relative; z-index: 10; } .mod-freeHTML #data-creation-lp-wrapper .case__wrap { width: 91.8699186992%; margin: 0 auto 8.1300813008%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__wrap { width: 100%; margin-bottom: 14.2857142857%; } } .mod-freeHTML #data-creation-lp-wrapper .case__wrap--WEP { margin-bottom: 4.8780487805%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__wrap--WEP { margin-bottom: 3.5714285714%; } } .mod-freeHTML #data-creation-lp-wrapper .case__wrap--WEP:last-of-type { margin-bottom: 9.756097561%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .case__wrap--WEP:last-of-type { margin-bottom: 10.7142857143%; } } /* ======================================== popkit ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .popkit__heading { margin-bottom: 4.4247787611%; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__heading { margin-bottom: 7.1428571429%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__txt { padding: 0 0 0.25em 19.4690265487%; border-bottom: solid 2px transparent; font-size: clamp(1.7em, 2.125vw, 3.4em); font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__txt { height: 5em; padding: 0 0 0.55em 30.3571428571%; border-width: 0.3125vw; font-size: min(5.625vw, 3.6em); line-height: 1.4em; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__txt--first { border-color: #41d3bc; color: #41d3bc; } .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__txt--second { border-color: #ff6670; color: #ff6670; } .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__txt--third { border-color: #ffa401; color: #ffa401; } .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__sub { margin-top: 0.75em; padding-left: 19.4690265487%; font-size: clamp(1.2em, 1.5vw, 2.4em); line-height: 1.75em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__sub { padding-left: 0; font-size: min(4.375vw, 2.8em); } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__heading__sub--third .iBlock { display: inline; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__first { width: 87.610619469%; margin: 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__first { width: 100%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__first__list { display: flex; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__first__list { flex-wrap: wrap; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__first__list li:nth-child(1) { width: 100%; margin-bottom: 5.3571428571%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__first__list li:nth-child(2) { margin: 0 7.5757575758%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__first__list li:nth-child(2) { width: 50%; margin: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__first__list li:nth-child(3) { width: 50%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__second { position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__second__img { margin-bottom: 3.5714285714%; position: relative; } .mod-freeHTML #data-creation-lp-wrapper .popkit__second__img--sp { width: 100.3571428571%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__second__notes { font-size: clamp(1em, 1.125vw, 1.8em); } @media (min-width: 641px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__second__notes { position: absolute; top: 76.4705882353%; left: 35.3982300885%; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__second__notes { font-size: min(3.125vw, 2em); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__second__notes a { text-decoration: underline; } .mod-freeHTML #data-creation-lp-wrapper .popkit__second__notes a:hover { text-decoration: none; } .mod-freeHTML #data-creation-lp-wrapper .popkit__third { width: 70.796460177%; min-width: 400px; margin: 0 auto 14.1592920354%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third { width: 100%; min-width: auto; margin-bottom: 14.2857142857%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan { display: flex; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan { flex-direction: column; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan li { width: 50%; background: #d4ebe3; border-top: solid 15px #22b2b7; padding: 2.5% 0 3.125%; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan li { width: 100%; border-width: 2.34375vw; padding: 5.3571428571% 0; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan li:last-child { margin-left: 1.875%; border-color: #ff575b; background: #f0e2da; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan li:last-child { margin: 7.1428571429% auto 0; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__sub { color: #707176; font-size: clamp(1em, 1.125vw, 1.8em); font-weight: bold; letter-spacing: 0.06em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__sub { font-size: min(3.75vw, 2.4em); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__name { margin: 0.5em auto 0.25em; color: #22b2b7; font-size: clamp(1.7em, 2.125vw, 3.4em); font-weight: bold; letter-spacing: 0.06em; line-height: 1em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__name { font-size: min(6.875vw, 4.4em); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__name--free { margin-top: 1.25em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__name--free { margin: 1em auto 1.5em; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__name--enjoy { color: #ff575b; } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__price { margin-bottom: 0.25em; color: #ff575b; font-size: clamp(1em, 1.125vw, 1.8em); font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__price { font-size: min(5vw, 3.2em); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__price .small { font-size: 0.61111em; vertical-align: middle; } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__ribbon { width: 87.1794871795%; margin: 0 auto; padding: 0.25em; background: #ff575b; color: #FFFFFF; font-size: clamp(1em, 1.25vw, 2em); font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__ribbon { width: 78.5714285714%; font-size: min(4.0625vw, 2.6em); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__ribbon .yellow { color: #ffff00; } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__balloon { width: 31.7948717949%; position: absolute; top: -32.8638497653%; right: -10.2564102564%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__plan__balloon { width: 28.5714285714%; top: -26.9841269841%; right: -8.0357142857%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__bnr { margin: 5% auto; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__bnr { margin: 5.3571428571% auto 8.9285714286%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use { margin-bottom: 10%; display: flex; align-items: flex-start; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use { margin-bottom: 7.1428571429%; flex-direction: column; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use__txt { padding: 1.25em; border: solid 2px #ffa401; border-radius: 3px; font-size: clamp(1em, 1.125vw, 1.8em); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use__txt { padding: 0.5em 1em; border-width: 0.625vw; font-size: min(4.375vw, 2.8em); } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use__ttl { color: #ffa401; font-size: 1.22222em; font-weight: bold; } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use__img { width: 26.25%; flex-shrink: 0; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__use__img { width: 100%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__btn { margin-bottom: 7.5%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__btn { margin-bottom: 7.1428571429%; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__btn a { border-radius: 10px; box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.4); display: block; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__btn a { border-radius: 1.5625vw; } } .mod-freeHTML #data-creation-lp-wrapper .popkit__third__btn a img { border-radius: 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .popkit__third__btn a img { border-radius: 1.5625vw; } } /* ======================================== WEP ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .WEP__heading { padding: 0 7.0796460177% 5px 0; border-bottom: solid 2px transparent; display: flex; align-items: center; justify-content: space-between; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading { border: none; padding: 0; justify-content: flex-end; flex-wrap: wrap; } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading--word { border-color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading--excel { border-color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading--pp { border-color: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt { font-size: clamp(1.9em, 2.375vw, 3.8em); font-weight: normal; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt { width: 100%; border-bottom: solid 0.3125vw transparent; font-size: min(5.625vw, 3.6em); } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt--word { border-color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt--excel { border-color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt--pp { border-color: #d24833; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt--pp { line-height: 1.4em; } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt .name { margin-right: 0.25em; font-weight: bold; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt .small { margin-left: 0.25em; font-size: 0.78947em; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt .small { font-size: 0.94444em; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__txt .small.font--pp { margin-left: 0; } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__step { font-size: clamp(1.2em, 1.5vw, 2.4em); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__step { margin: 0.25em 2em 0.25em; font-size: min(4.375vw, 2.8em); } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon { width: 4.6em; height: 4.6em; font-size: clamp(0em, 0.625vw, 1em); border: solid 2px transparent; border-radius: 4.6em; display: inline-block; vertical-align: text-top; position: absolute; right: 0; transition: transform 0.3s; } @media (min-width: 641px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon { top: calc(50% - 5px); transform: translateY(-50%); } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon { width: 4em; height: 4em; font-size: clamp(0em, 1.5625vw, 1em); border-width: 0.3125vw; border-radius: 4em; bottom: 0; transform: translateY(-25%); } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon.accor-close { transform: translateY(-50%) rotate(180deg); transition: transform 0.3s; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon.accor-close { transform: translateY(-25%) rotate(180deg); } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon::before, .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon::after { content: ""; width: 2em; height: 2px; display: block; position: absolute; top: 50%; left: 50%; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon::before, .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon::after { width: 1.8em; height: 0.3125vw; } } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon::before { transform: translate(-80%, -100%) rotate(-50deg); transition: 0.3s; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon::after { transform: translate(-20%, -100%) rotate(50deg); transition: 0.3s; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--word { border-color: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--word::before, .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--word::after { background: #1f3277; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--excel { border-color: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--excel::before, .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--excel::after { background: #136a3b; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--pp { border-color: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--pp::before, .mod-freeHTML #data-creation-lp-wrapper .WEP__heading__icon--pp::after { background: #d24833; } .mod-freeHTML #data-creation-lp-wrapper .WEP__detail.accor-close { display: none; } .mod-freeHTML #data-creation-lp-wrapper .WEP__step { width: 53.0973451327%; min-width: 400px; margin: 5.3097345133% auto 8.8495575221%; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__step { width: 100%; min-width: auto; margin: 25% auto 28.5714285714%; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__step:last-of-type { margin-bottom: 12.5%; } } .mod-freeHTML #data-creation-lp-wrapper .WEP__step .num-circle { top: 0; left: 0; transform: translate(-83.3333333333%, -17.8571428571%); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__step .num-circle { transform: translate(0, -93.75%); } } .mod-freeHTML #data-creation-lp-wrapper .WEP__step__txt { margin-top: 1em; font-size: clamp(1.1em, 1.375vw, 2.2em); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .WEP__step__txt { margin-top: 0.5em; font-size: min(4.375vw, 2.8em); } } /* ======================================== btn-design ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .btn-design { width: 86.013986014%; margin: 0 auto 4.8951048951%; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design { width: 87.5%; margin-bottom: 15.625%; } } .mod-freeHTML #data-creation-lp-wrapper .btn-design::after { content: ""; width: 100%; height: 100%; background: #eeeeee; position: absolute; top: 10px; left: 10px; z-index: 0; } .mod-freeHTML #data-creation-lp-wrapper .btn-design a { padding: 2em; border: solid 1px #000000; font-size: clamp(0em, 0.625vw, 1em); text-align: center; display: block; position: relative; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design a { font-size: clamp(0em, 1.5625vw, 1em); } } .mod-freeHTML #data-creation-lp-wrapper .btn-design a::before, .mod-freeHTML #data-creation-lp-wrapper .btn-design a::after { content: ""; height: 1px; background: #000000; display: block; position: absolute; right: 3.2520325203%; } @media (min-width: 641px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design a::before, .mod-freeHTML #data-creation-lp-wrapper .btn-design a::after { top: 50%; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design a::before, .mod-freeHTML #data-creation-lp-wrapper .btn-design a::after { bottom: 2em; right: 2em; } } .mod-freeHTML #data-creation-lp-wrapper .btn-design a::before { width: 4em; transform: translateY(-1em) rotate(30deg); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design a::before { width: 3em; transform: translate(0, -0.75em) rotate(30deg); } } .mod-freeHTML #data-creation-lp-wrapper .btn-design a::after { width: 9em; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design a::after { width: 7em; transform: translateX(0); } } .mod-freeHTML #data-creation-lp-wrapper .btn-design__txt { font-size: clamp(1.4em, 1.75vw, 2.8em); } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .btn-design__txt { font-size: min(4.375vw, 2.8em); } } /* ======================================== product ========================================*/ .mod-freeHTML #data-creation-lp-wrapper .product__inner { width: 86.013986014%; margin: 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__inner { width: 87.5%; margin-bottom: 15.625%; } } .mod-freeHTML #data-creation-lp-wrapper .product__heading { margin: 0 auto 3.2520325203%; padding: 0.25em; border: solid 5px #c0e5ef; border-radius: 2em; color: #56bbd5; font-size: clamp(1.9em, 2.375vw, 3.8em); text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__heading { margin-bottom: 5.3571428571%; border-width: 0.78125vw; font-size: min(5.625vw, 3.6em); } } .mod-freeHTML #data-creation-lp-wrapper .product__detail { font-size: clamp(12px, 1.25vw, 20px); display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } @media (min-width: 641px) { .mod-freeHTML #data-creation-lp-wrapper .product__detail { -moz-column-gap: 45px; column-gap: 45px; } } @media screen and (max-width: 800px) { .mod-freeHTML #data-creation-lp-wrapper .product__detail { flex-direction: column; gap: 4em 0; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__detail { flex-direction: column; gap: 3em 0; } } .mod-freeHTML #data-creation-lp-wrapper .product__spec { width: calc(100% - 42em + 200px - 45px); } @media screen and (max-width: 800px) { .mod-freeHTML #data-creation-lp-wrapper .product__spec { width: 100%; margin: 0 auto; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__spec { width: 100%; margin: 0 auto; } } .mod-freeHTML #data-creation-lp-wrapper .product__spec__name { font-size: clamp(2.2em, 2.55vw, 4.4em); font-weight: bold; color: #56bbd5; margin-bottom: 25px; text-align: center; } .mod-freeHTML #data-creation-lp-wrapper .product__spec__list { display: flex; flex-wrap: wrap; gap: 10px 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__spec__list { gap: 5px 5px; } } .mod-freeHTML #data-creation-lp-wrapper .product__spec__list li { width: calc((100% - 30px) / 4); background: #c0e5ef; font-size: clamp(12px, 1.125vw, 18px); min-height: 5em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 140%; border-radius: 5px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__spec__list li { width: calc((100% - 15px) / 4); } } .mod-freeHTML #data-creation-lp-wrapper .product__spec__list li .small { font-size: clamp(10px, 1vw, 16px); } .mod-freeHTML #data-creation-lp-wrapper .product__consumable { font-size: clamp(10px, 1vw, 16px); width: 42em; } @media screen and (max-width: 800px) { .mod-freeHTML #data-creation-lp-wrapper .product__consumable { width: 100%; margin: 0 auto; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__consumable { width: 100%; margin: 0 auto; } } .mod-freeHTML #data-creation-lp-wrapper .product__consumable__heading { font-size: clamp(15px, 1.75vw, 28px); margin-bottom: 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__consumable__heading { margin-bottom: 0.5em; } } .mod-freeHTML #data-creation-lp-wrapper .product__consumable__name { font-size: clamp(12px, 1.125vw, 18px); margin-bottom: 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__consumable__name { margin-bottom: 0.5em; } } .mod-freeHTML #data-creation-lp-wrapper .product__consumable__name--paper { margin-top: 40px; } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__consumable__name--paper { margin-top: 3em; } } .mod-freeHTML #data-creation-lp-wrapper .product__table { width: 100%; } .mod-freeHTML #data-creation-lp-wrapper .product__table th { text-align: center; background: #c0e5ef; vertical-align: middle; font-size: clamp(10px, 1vw, 16px); line-height: 140%; } .mod-freeHTML #data-creation-lp-wrapper .product__table td { position: relative; vertical-align: middle; font-size: clamp(8px, 0.875vw, 14px); } .mod-freeHTML #data-creation-lp-wrapper .product__table--th01, .mod-freeHTML #data-creation-lp-wrapper .product__table--th02, .mod-freeHTML #data-creation-lp-wrapper .product__table--th03, .mod-freeHTML #data-creation-lp-wrapper .product__table--th04 { border: 1px solid #000000; padding: 0.5em; } .mod-freeHTML #data-creation-lp-wrapper .product__table--td01, .mod-freeHTML #data-creation-lp-wrapper .product__table--td02, .mod-freeHTML #data-creation-lp-wrapper .product__table--td03, .mod-freeHTML #data-creation-lp-wrapper .product__table--td04 { border: 1px solid #000000; padding: 0.5em; } .mod-freeHTML #data-creation-lp-wrapper .product__table--td01, .mod-freeHTML #data-creation-lp-wrapper .product__table--th01 { border-left: none; } .mod-freeHTML #data-creation-lp-wrapper .product__table--td04, .mod-freeHTML #data-creation-lp-wrapper .product__table--th04 { border-right: none; } .mod-freeHTML #data-creation-lp-wrapper .product__table--td01 { font-weight: bold; } .mod-freeHTML #data-creation-lp-wrapper .product__table--black, .mod-freeHTML #data-creation-lp-wrapper .product__table--cyan, .mod-freeHTML #data-creation-lp-wrapper .product__table--magenta, .mod-freeHTML #data-creation-lp-wrapper .product__table--yellow { padding-left: 20px; } .mod-freeHTML #data-creation-lp-wrapper .product__table--black::before, .mod-freeHTML #data-creation-lp-wrapper .product__table--cyan::before, .mod-freeHTML #data-creation-lp-wrapper .product__table--magenta::before, .mod-freeHTML #data-creation-lp-wrapper .product__table--yellow::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background: #000000; } .mod-freeHTML #data-creation-lp-wrapper .product__table--black::before { background: #231815; } .mod-freeHTML #data-creation-lp-wrapper .product__table--cyan::before { background: #36bdef; } .mod-freeHTML #data-creation-lp-wrapper .product__table--magenta::before { background: #e3007f; } .mod-freeHTML #data-creation-lp-wrapper .product__table--yellow::before { background: #fff000; } .mod-freeHTML #data-creation-lp-wrapper .product__att { font-size: clamp(1em, 1vw, 1.6em); text-align: right; margin-top: 1em; } @media screen and (max-width: 800px) { .mod-freeHTML #data-creation-lp-wrapper .product__att { text-align: left; width: 87.5%; margin: 1em auto 0; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__att { text-align: left; width: 87.5%; margin: 1em auto 0; } } .mod-freeHTML #data-creation-lp-wrapper .product__notes { font-size: clamp(1em, 1vw, 1.6em); text-align: right; margin-top: 1em; } @media screen and (max-width: 800px) { .mod-freeHTML #data-creation-lp-wrapper .product__notes { text-align: left; width: 100%; margin: 1em auto 0; } } @media screen and (max-width: 640px) { .mod-freeHTML #data-creation-lp-wrapper .product__notes { text-align: left; width: 100%; margin: 1em auto 0; } } .mod-freeHTML #data-creation-lp-wrapper .product__notes a { text-decoration: underline; } .mod-freeHTML #data-creation-lp-wrapper .product__notes a:hover { text-decoration: none; }