@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; } /*下記追加記述*/ /*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-content: center; width: 30em; height: 4em; margin: 0 auto; border-radius: 4em; background-color: #e95504; color: #fff; font-weight: bold; font-size: 16px; letter-spacing: 0.06em; } .c-btn01::after { position: absolute; top: 50%; right: 1.5em; width: 0.6em; height: 0.6em; transform: rotate(45deg) translateY(-50%); border: 0.12em solid #fff; border-bottom: none; border-left: none; content: ""; transition: all 0.5s; } .c-btn02 { display: grid; position: relative; place-content: center; width: 30em; height: 4em; margin: 0 auto; border: 0.12em solid #004898; border-radius: 4em; background-color: #fff; color: #004898; font-weight: bold; font-size: 16px; line-height: 1.5; letter-spacing: 0.06em; } .c-btn02::after { position: absolute; top: 50%; right: 1.5em; width: 0.6em; height: 0.6em; transform: rotate(45deg) translateY(-50%); border: 0.12em solid #004898; border-bottom: none; border-left: none; content: ""; transition: all 0.5s; } .c-ttl01 { display: grid; place-items: center; width: 100%; max-width: 34.5em; height: 3.3em; padding: 0.4em !important; background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); font-size: 24px; } .c-ttl01 .txt { display: grid; place-content: center; width: calc(100% - 0.4em); height: calc(100% - 0.4em); border-width: 1px; border-style: solid; border-color: #ea5504 #004898 #004898 #ea5504; color: #004898; font-weight: bold; line-height: 1.1; letter-spacing: 0.06em; text-align: center; text-align: center; } /*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 { position: relative; } .mod-freeHTML .comparison { background: linear-gradient(to right, #ffe56d 0%, #ffe56d 50%, #bde0d5 50%, #bde0d5 100%); } .mod-freeHTML .s-mv { padding: 2.73vw 0 9.24vw; overflow: hidden; } .mod-freeHTML .s-mv__cont { z-index: 3; position: relative; } .mod-freeHTML .s-mv__cont__ttl { width: 84%; margin: 0 auto 2.21vw; } .mod-freeHTML .s-mv__cont__lead { margin-bottom: 1.76vw; } .mod-freeHTML .s-mv__cont__product { margin-bottom: 3.9vw; } .mod-freeHTML .s-mv__cont__desc { display: block; font-weight: 500; font-size: 18px; line-height: 2; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-mv__cont__deco { z-index: -1; position: absolute; } .mod-freeHTML .s-mv__cont__deco.fig01 { top: 0.98vw; right: calc(100% - 1.95vw); width: 14.51vw; } .mod-freeHTML .s-mv__cont__deco.fig02 { top: 22.77vw; left: calc(100% - 4.55vw); width: 20.69vw; } .mod-freeHTML .s-mv__cont__deco.fig03 { right: calc(100% - 0.98vw); bottom: -1.95vw; width: 11.58vw; } .mod-freeHTML .s-lead__cont { position: relative; padding-bottom: 5.2vw; background-color: #fff; } .mod-freeHTML .s-lead__cont__head { width: 104%; margin: 0 -2% -3.97vw; transform: translateY(-3.97vw); } .mod-freeHTML .s-lead__cont__series { width: 91%; margin-top: 1.43vw; margin-right: 0.46vw; margin-bottom: 1.11vw; margin-left: auto; } .mod-freeHTML .s-lead__cont__desc { display: block; margin-bottom: 2.67vw; color: #ea5504; font-weight: bold; font-size: 24px; line-height: 1.5; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-model__lead .question { width: 39.56vw; min-width: 608px; margin: 0 auto 1.5vw; transform: translateX(2.8vw) translateY(-0.33vw); font-size: 16px; filter: brightness(1.05); } .mod-freeHTML .s-model__lead__txt { -moz-column-gap: 0.3em; display: flex; position: relative; column-gap: 0.3em; align-items: flex-end; justify-content: center; font-size: 40px; } .mod-freeHTML .s-model__lead__txt figure { width: 1.3em; } .mod-freeHTML .s-model__lead__txt figure.left { filter: invert(20%) sepia(50%) saturate(2726%) hue-rotate(195deg) brightness(97%) contrast(107%); } .mod-freeHTML .s-model__lead__txt figure.right { transform: scale(-1, 1); filter: invert(40%) sepia(99%) saturate(4319%) hue-rotate(12deg) brightness(104%) contrast(97%); } .mod-freeHTML .s-model__lead__txt .ttl { display: flex; flex-direction: column; align-items: center; font-weight: bold; line-height: 1.5; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-model__lead__txt .ttl .txt01 { color: #ea5504; } .mod-freeHTML .s-model__lead__txt .ttl .txt02 { color: #004898; } .mod-freeHTML .s-model__ttl { display: flex; justify-content: space-between; margin-bottom: 6.7vw; } .mod-freeHTML .s-model__ttl .fig { width: 48.6%; } .mod-freeHTML .s-model__cont { display: flex; align-items: stretch; } .mod-freeHTML .s-model__cont__box { width: 50%; } .mod-freeHTML .s-model__cont__box.standard .ttl { display: flex; align-items: flex-end; justify-content: center; background-color: #004898; } .mod-freeHTML .s-model__cont__box.standard .ttl::after { background-color: #004898; } .mod-freeHTML .s-model__cont__box.standard .ttl .big { margin-right: 0.78vw; } .mod-freeHTML .s-model__cont__box.standard .product { color: #004898; } .mod-freeHTML .s-model__cont__box.standard .product .txt__link { border: 1px solid #004898; color: #004898; } .mod-freeHTML .s-model__cont__box.standard .product .txt__link::after { border-bottom: none; border-left: none; border-color: #004898; } .mod-freeHTML .s-model__cont__box.standard .spec { background-color: #004898; } .mod-freeHTML .s-model__cont__box.standard .spec__box__ttl { color: #004898; } .mod-freeHTML .s-model__cont__box.large .ttl { background-color: #ea5504; line-height: 1.2; } .mod-freeHTML .s-model__cont__box.large .ttl::after { background-color: #ea5504; } .mod-freeHTML .s-model__cont__box.large .ttl .fig { width: 6.6em; margin-bottom: 0.5em; margin-left: 1.56vw; } .mod-freeHTML .s-model__cont__box.large .product { color: #ea5504; } .mod-freeHTML .s-model__cont__box.large .product .txt__link { border: 1px solid #ea5504; color: #ea5504; } .mod-freeHTML .s-model__cont__box.large .product .txt__link::after { border-bottom: none; border-left: none; border-color: #ea5504; } .mod-freeHTML .s-model__cont__box.large .spec { background-color: #ea5504; } .mod-freeHTML .s-model__cont__box.large .spec__box__ttl { color: #ea5504; } .mod-freeHTML .s-model__cont__box.large .spec__box.box03 .wrap .num { font-size: 8.21vw; } .mod-freeHTML .s-model__cont__box .ttl { display: flex; z-index: 2; position: relative; align-items: flex-end; justify-content: center; height: 5.5em; margin-bottom: 3.4em; color: #fff; font-weight: bold; font-size: 28px; text-align: center; } .mod-freeHTML .s-model__cont__box .ttl .big { font-size: 76px; } .mod-freeHTML .s-model__cont__box .ttl::after { -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: -1; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: 3em; content: ""; clip-path: polygon(0 0, 100% 0, 50% 100%); } .mod-freeHTML .s-model__cont__box .product { display: flex; align-items: center; justify-content: space-between; width: 32em; margin: 0 auto 1.3vw; font-size: 16px; } .mod-freeHTML .s-model__cont__box .product .fig { flex: 1; } .mod-freeHTML .s-model__cont__box .product .txt { width: 27.8%; min-width: 8.8em; } .mod-freeHTML .s-model__cont__box .product .txt__desc { display: inline-block; margin-bottom: 1.95vw; font-weight: bold; line-height: 1.5; letter-spacing: 0.06em; text-align: left; } .mod-freeHTML .s-model__cont__box .product .txt__link { display: flex; position: relative; align-items: center; width: -moz-fit-content; width: fit-content; height: 2.1em; padding-right: 1.5em; padding-left: 1.1em; border-radius: 2.1em; background-color: #fff; font-weight: bold; font-size: 14px; letter-spacing: 0.06em; } .mod-freeHTML .s-model__cont__box .product .txt__link::after { position: absolute; top: 45%; right: 0.8em; width: 0.5em; height: 0.5em; transform: rotate(45deg) translateY(-50%); border-bottom: none; border-left: none; border-width: 0.12em; border-style: solid; content: ""; transition: all 0.5s; } .mod-freeHTML .s-model__cont__box .spec { display: flex; row-gap: 1.63vw; flex-direction: column; padding: 1.63vw; color: #fff; } .mod-freeHTML .s-model__cont__box .spec__box { display: flex; align-items: stretch; } .mod-freeHTML .s-model__cont__box .spec__box:not(:last-child) { position: relative; } .mod-freeHTML .s-model__cont__box .spec__box:not(:last-child)::after { position: absolute; bottom: -0.78vw; left: 50%; width: calc(100% + 1.56vw); height: 1px; transform: translateX(-50%); background-color: #fff; content: ""; } .mod-freeHTML .s-model__cont__box .spec__box.box03 .spec__box__ttl .ant { font-size: 12px; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .spec__box__ttl { height: 4.7em; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .wrap__cont { margin-bottom: 0.2em; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .wrap__cont .desc { font-weight: bold; font-size: 24px; line-height: 1.5; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant { width: 100%; font-size: 24px; line-height: 1.1; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant__02 { display: block; width: 100%; padding-left: 6.25em; } .mod-freeHTML .s-model__cont__box .spec__box__ttl { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 10em; height: inherit; margin-right: 1.17vw; padding: 0.46vw; background-color: #fff; font-weight: bold; font-size: 17px; } .mod-freeHTML .s-model__cont__box .spec__box__ttl sup { font-size: 10px; letter-spacing: -0.01em; } .mod-freeHTML .s-model__cont__box .spec__box__ttl .ant { font-weight: 500; font-size: 15px; } .mod-freeHTML .s-model__cont__box .spec__box__ttl .recommend { position: absolute; top: -1em; left: -2.3em; width: 9em; } .mod-freeHTML .s-model__cont__box .spec__box .wrap { display: flex; flex: 1; align-items: center; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc { font-weight: 500; font-size: 21px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc .num { font-weight: bold; font-size: 40px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc .tax { margin-left: -0.5em; font-size: 15px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .ant { font-weight: 500; font-size: 12px; line-height: 1.5; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 { flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont { display: flex; row-gap: 0.65vw; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 0.65vw; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .link { display: grid; position: relative; place-items: center; height: 3em; padding: 0 2em 0 1.6em; border: 1px solid #fff; border-radius: 3em; color: #fff; font-size: 11px; line-height: 1.2; text-align: center; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .link::after { position: absolute; top: 50%; right: 1em; width: 0.6em; height: 0.6em; transform: rotate(45deg) translateY(-60%); border: 0.12em solid #fff; border-bottom: none; border-left: none; content: ""; transition: all 0.5s; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 { position: relative; justify-content: space-between; max-width: 24.4em; font-size: 15px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont { width: 43%; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont__ttl { font-size: 15px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2::after { position: absolute; top: 50%; left: 50%; width: 1px; height: 100%; transform: translate(-50%, -50%) rotate(10deg); background-color: #fff; content: ""; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont { display: flex; flex-direction: column; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc { font-size: 17px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc .num { font-size: 40px; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc .tax { font-size: 15px; } .mod-freeHTML .s-model__ant { width: 40.53vw; min-width: 623px; margin: 1.63vw auto 0; transform: translateX(2.73vw); font-size: 16px; filter: brightness(1.05); } .mod-freeHTML .s-comparison { padding-top: 4.42vw; } .mod-freeHTML .s-comparison__ttl { margin: 0 auto 2.6vw; } .mod-freeHTML .s-comparison__cont { display: flex; } .mod-freeHTML .s-comparison__cont__box { width: 50%; } .mod-freeHTML .s-comparison__cont__box .list { display: flex; flex-wrap: wrap; gap: 1.04vw 2.6%; } .mod-freeHTML .s-comparison__cont__box .list__item { width: 23%; } .mod-freeHTML .s-comparison__ant { display: block; margin: 5.2vw 0; color: #000; font-weight: 500; font-size: 12px; line-height: 2; letter-spacing: 0.06em; } .mod-freeHTML .s-comparison__ant .link { color: #004c88; text-decoration: underline; } .mod-freeHTML .s-choice { padding-top: 12.95vw; } .mod-freeHTML .s-choice__cont { background-color: #fff; } .mod-freeHTML .s-choice__cont__ttl { display: flex; align-items: flex-end; margin-bottom: -7.16vw; transform: translateY(-7.16vw); font-size: 30px; } .mod-freeHTML .s-choice__cont__ttl .fig01 { width: 63.3%; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16)); } .mod-freeHTML .s-choice__cont__ttl .fig02 { width: 18.9%; } .mod-freeHTML .s-choice__cont .check { position: relative; padding: 1.04vw 4.88vw 0.65vw; } .mod-freeHTML .s-choice__cont .check__ttl { width: 100%; max-width: none; margin-bottom: 1.63vw; } .mod-freeHTML .s-choice__cont .check .list { display: flex; row-gap: 1.3vw; flex-direction: column; } .mod-freeHTML .s-choice__cont .check .list__item { display: flex; padding-left: 1.9em; font-weight: bold; font-size: 27px; line-height: 1.5; letter-spacing: 0.06em; } .mod-freeHTML .s-choice__cont .check .list__item .icon { width: 1.4em; margin-right: 0.5em; } .mod-freeHTML .s-choice__cont .check .list__item .desc { flex: 1; margin-top: 0.3em; } .mod-freeHTML .s-choice__cont .check .list__item .ant { display: inline-block; margin-top: -1em; font-weight: 500; font-size: 12px; line-height: 1.1; letter-spacing: 0.06em; } .mod-freeHTML .s-choice__cont .check__product { position: absolute; top: 4.1vw; right: 1.76vw; width: 237px; } .mod-freeHTML .s-choice__recommend { display: flex; justify-content: space-between; margin-bottom: 1.3vw; } .mod-freeHTML .s-choice__recommend__cont { width: 48.6%; } .mod-freeHTML .s-choice__recommend__cont.standard .s-choice__recommend__cont__product { color: #004898; } .mod-freeHTML .s-choice__recommend__cont.standard .s-choice__recommend__cont__product .txt__link { border: 1px solid #004898; color: #004898; } .mod-freeHTML .s-choice__recommend__cont.standard .s-choice__recommend__cont__product .txt__link::after { border-bottom: none; border-left: none; border-color: #004898; } .mod-freeHTML .s-choice__recommend__cont.large .s-choice__recommend__cont__product { color: #ea5504; } .mod-freeHTML .s-choice__recommend__cont.large .s-choice__recommend__cont__product .txt__link { border: 1px solid #ea5504; color: #ea5504; } .mod-freeHTML .s-choice__recommend__cont.large .s-choice__recommend__cont__product .txt__link::after { border-bottom: none; border-left: none; border-color: #ea5504; } .mod-freeHTML .s-choice__recommend__cont__ttl { width: 75%; margin: 0 auto; } .mod-freeHTML .s-choice__recommend__cont__product { display: flex; align-items: center; justify-content: space-between; width: 32em; margin: 0 auto 2.6vw; font-size: 16px; } .mod-freeHTML .s-choice__recommend__cont__product .fig { width: 65%; max-width: calc(100% - 9.5em); } .mod-freeHTML .s-choice__recommend__cont__product .txt { flex: 1; width: 30.8%; } .mod-freeHTML .s-choice__recommend__cont__product .txt__desc { display: inline-block; margin-bottom: 1.95vw; font-weight: bold; line-height: 1.5; letter-spacing: 0.06em; text-align: left; } .mod-freeHTML .s-choice__recommend__cont__product .txt__link { display: flex; position: relative; align-items: center; width: -moz-fit-content; width: fit-content; height: 2.1em; padding-right: 1.5em; padding-left: 1.1em; border-radius: 2.1em; background-color: #fff; font-weight: bold; font-size: 14px; letter-spacing: 0.06em; } .mod-freeHTML .s-choice__recommend__cont__product .txt__link::after { position: absolute; top: 50%; right: 0.8em; width: 0.5em; height: 0.5em; transform: rotate(45deg) translateY(-60%); border-bottom: none; border-left: none; border-width: 0.12em; border-style: solid; content: ""; transition: all 0.5s; } .mod-freeHTML .s-choice__link__ttl { margin-bottom: 2.67vw; color: #024999; font-weight: bold; font-size: 54px; line-height: 1.3; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-service { padding: 10.41vw 0; } .mod-freeHTML .s-service__cont { margin-bottom: 10.41vw; padding: 2.6vw 0 5.2vw; background-color: #fff; } .mod-freeHTML .s-service__cont__ttl { position: relative; width: 82.8%; max-width: 34.5em; margin: 0 auto 2.99vw; } .mod-freeHTML .s-service__cont__ttl__deco { position: absolute; top: 0; left: -4.55vw; width: 155px; } .mod-freeHTML .s-service__cont__illust { margin-right: 1.3vw; margin-bottom: 1.37vw; margin-left: 3.64vw; } .mod-freeHTML .s-service__cont__txt { display: flex; flex-direction: column; width: 16em; margin: 0 auto 2.67vw; font-size: 45px; } .mod-freeHTML .s-service__cont__txt .desc { display: block; color: #004898; font-weight: bold; line-height: 1.2; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-service__cont__txt .ant { font-weight: 500; font-size: 12px; line-height: 1.6; letter-spacing: 0.06em; } .mod-freeHTML .s-service__banner { display: flex; justify-content: space-between; } .mod-freeHTML .s-service__banner .link { width: 48.4%; } .st-backToTopFixed { z-index: 10; } @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(12px, 0.83vw, 16px); } .c-btn02 { font-size: clamp(12px, 0.83vw, 16px); } .c-ttl01 { font-size: clamp(18px, 1.25vw, 24px); } .p-app { font-size: clamp(16px, 1.04vw, 20px); } .p-app__ant { font-size: clamp(12px, 0.63vw, 12px); } .u-bl-lgpc { display: block !important; } .u-none-lgpc { display: none !important; } .mod-freeHTML .s-mv__cont__desc { font-size: clamp(14px, 0.94vw, 18px); } .mod-freeHTML .s-lead__cont__desc { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .s-model__lead .question { font-size: clamp(14px, 0.83vw, 16px); } .mod-freeHTML .s-model__lead__txt { font-size: clamp(30px, 2.08vw, 40px); } .mod-freeHTML .s-model__cont__box .ttl { font-size: clamp(18px, 1.46vw, 28px); } .mod-freeHTML .s-model__cont__box .ttl .big { font-size: clamp(50px, 3.96vw, 76px); } .mod-freeHTML .s-model__cont__box .product { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-model__cont__box .product .txt__link { font-size: clamp(10px, 0.73vw, 14px); } .mod-freeHTML .s-model__cont__box .spec__box.box03 .spec__box__ttl .ant { font-size: clamp(10px, 0.63vw, 12px); } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .wrap__cont .desc { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .s-model__cont__box .spec__box__ttl { font-size: clamp(11px, 0.89vw, 17px); } .mod-freeHTML .s-model__cont__box .spec__box__ttl sup { font-size: clamp(5px, 0.52vw, 10px); } .mod-freeHTML .s-model__cont__box .spec__box__ttl .ant { font-size: clamp(10px, 0.78vw, 15px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc { font-size: clamp(17px, 1.09vw, 21px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc .num { font-size: clamp(28px, 2.08vw, 40px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc .tax { font-size: clamp(11px, 0.78vw, 15px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap .ant { font-size: clamp(10px, 0.63vw, 12px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .link { font-size: clamp(8px, 0.57vw, 11px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 { font-size: clamp(13px, 0.78vw, 15px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont__ttl { font-size: clamp(12px, 0.78vw, 15px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc { font-size: clamp(14px, 0.89vw, 17px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc .num { font-size: clamp(20px, 2.08vw, 40px); } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc .tax { font-size: clamp(10px, 0.78vw, 15px); } .mod-freeHTML .s-model__ant { font-size: clamp(14px, 0.83vw, 16px); } .mod-freeHTML .s-comparison__ant { font-size: clamp(10px, 0.63vw, 12px); } .mod-freeHTML .s-choice__cont__ttl { font-size: clamp(20px, 1.56vw, 30px); } .mod-freeHTML .s-choice__cont .check .list__item { font-size: clamp(20px, 1.41vw, 27px); } .mod-freeHTML .s-choice__cont .check .list__item .ant { font-size: clamp(10px, 0.63vw, 12px); } .mod-freeHTML .s-choice__recommend__cont__product { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-choice__recommend__cont__product .txt__link { font-size: clamp(10px, 0.73vw, 14px); } .mod-freeHTML .s-choice__link__ttl { font-size: clamp(36px, 2.81vw, 54px); } .mod-freeHTML .s-service__cont__ttl__deco { width: 10.08vw; } .mod-freeHTML .s-service__cont__txt { font-size: clamp(30px, 2.34vw, 45px); } .mod-freeHTML .s-service__cont__txt .ant { font-size: clamp(10px, 0.63vw, 12px); } } @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; } .mod-freeHTML .s-mv__cont__deco.fig01 { right: calc(100% - 3.9vw); } .mod-freeHTML .s-mv__cont__deco.fig02 { left: calc(100% - 7.81vw); } .mod-freeHTML .s-mv__cont__deco.fig03 { right: calc(100% - 9.11vw); width: 14.96vw; } .mod-freeHTML .s-model__lead .question { width: 70%; min-width: auto; } .mod-freeHTML .s-model__cont__box .product .fig { width: 60%; } .mod-freeHTML .s-model__cont__box .product .txt { width: 40%; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant__02 { padding-left: 2.5em; } .mod-freeHTML .s-model__cont__box .spec__box__ttl { width: 9em; min-height: 6.5em; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont { flex-wrap: wrap; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .link { margin-left: 0; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont { width: 48%; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2::after { left: calc(50% - 0.5em); } .mod-freeHTML .s-model__ant { width: 70%; min-width: auto; } .mod-freeHTML .s-choice__cont .check__product { width: 15.42vw; } .mod-freeHTML .s-choice__recommend__cont__product .fig { width: 60%; } .mod-freeHTML .s-choice__recommend__cont__product .txt { width: 40%; } } @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 { width: 20em; height: 3.7em; border-radius: 3.7em; font-size: 3.59vw; line-height: 1.3; text-align: center; } .c-btn02 { width: 20em; height: 3.7em; border: 2px solid #004898; border-radius: 3.7em; font-size: 3.59vw; line-height: 1.3; text-align: center; } .c-btn02::after { border-width: 2px; } .c-ttl01 { max-width: 15.5em; padding: 0.2em !important; font-size: 4.62vw; } .c-ttl01 .txt { width: calc(100% - 0.2em); height: calc(100% - 0.2em); } .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 .s-mv { padding: 7.69vw 0 16.92vw; } .mod-freeHTML .s-mv__cont__ttl { width: 89.74vw; margin: 0 -4.36vw 2.31vw -2.31vw; } .mod-freeHTML .s-mv__cont__lead { margin-bottom: 7.69vw; } .mod-freeHTML .s-mv__cont__product { margin: 0 -6.41vw 10.26vw; } .mod-freeHTML .s-mv__cont__desc { font-size: 4.62vw; text-align: left; } .mod-freeHTML .s-mv__cont__deco.fig01 { top: -3.33vw; right: calc(100% - 9.74vw); width: 23.59vw; } .mod-freeHTML .s-mv__cont__deco.fig02 { top: 51.28vw; left: calc(100% - 21.79vw); width: 30.51vw; } .mod-freeHTML .s-mv__cont__deco.fig03 { top: 65.38vw; right: auto; bottom: auto; left: 15.38vw; width: 17.69vw; } .mod-freeHTML .s-lead__cont { padding-bottom: 15.38vw; } .mod-freeHTML .s-lead__cont__head { width: calc(100% + 11.79vw); margin: 0 -5.9vw -6.41vw; transform: translateY(-6.41vw); } .mod-freeHTML .s-lead__cont__series { width: 100%; margin-top: 6.41vw; margin-right: -2.82vw; margin-bottom: 6.67vw; margin-left: 2.56vw; } .mod-freeHTML .s-lead__cont__desc { margin-bottom: 10.26vw; font-size: 4.62vw; line-height: 1.6; } .mod-freeHTML .s-model { z-index: 2; position: relative; padding-top: 0; } .mod-freeHTML .s-model__lead .question { width: 87.18vw; margin: 8.72vw 0 0 -3.85vw; transform: none; } .mod-freeHTML .s-model__lead__txt { width: -moz-fit-content; width: fit-content; margin: 0 auto 2.56vw; font-size: 7.95vw; } .mod-freeHTML .s-model__lead__txt figure { position: absolute; bottom: 0; width: 1.6em; } .mod-freeHTML .s-model__lead__txt figure.left { right: calc(100% + 1.03vw); } .mod-freeHTML .s-model__lead__txt figure.right { left: calc(100% + 1.03vw); } .mod-freeHTML .s-model__lead__txt .ttl .txt01 { font-size: 6.41vw; } .mod-freeHTML .s-model__ttl { margin: 0 -1.03vw 4.36vw -2.82vw; margin-bottom: 4.36vw; } .mod-freeHTML .s-model__cont__box.standard .ttl { align-items: center; justify-content: flex-end; } .mod-freeHTML .s-model__cont__box.standard .ttl .txt { padding-bottom: 1.5em; } .mod-freeHTML .s-model__cont__box.standard .ttl .big { margin-right: 0; } .mod-freeHTML .s-model__cont__box.standard .product { margin-left: 3.85vw; } .mod-freeHTML .s-model__cont__box.standard .spec { margin-left: 3.85vw; } .mod-freeHTML .s-model__cont__box.large .ttl .fig { width: 6.4em; margin-top: 0.6em; margin-bottom: 0; margin-left: 0; } .mod-freeHTML .s-model__cont__box.large .ttl .txt, .mod-freeHTML .s-model__cont__box.large .ttl .fig { transform: translateY(0.5em); } .mod-freeHTML .s-model__cont__box.large .ttl .big { display: inline-block; margin-bottom: 0.1em; } .mod-freeHTML .s-model__cont__box.large .product { margin-right: 3.85vw; } .mod-freeHTML .s-model__cont__box.large .spec { margin-right: 3.85vw; } .mod-freeHTML .s-model__cont__box.large .spec__box.box04 { padding-bottom: 14.1vw; } .mod-freeHTML .s-model__cont__box .ttl { flex-direction: column; align-items: center; justify-content: flex-end; height: 9em; font-size: 3.85vw; } .mod-freeHTML .s-model__cont__box .ttl .big { font-size: 11.03vw; line-height: 1; } .mod-freeHTML .s-model__cont__box .product { row-gap: 2.56vw; flex-direction: column; width: auto; margin: 0 0 8.72vw; font-size: 4.1vw; } .mod-freeHTML .s-model__cont__box .product .fig { width: 42.05vw; margin-bottom: 1.28vw; } .mod-freeHTML .s-model__cont__box .product .txt { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } .mod-freeHTML .s-model__cont__box .product .txt__desc { margin: 0 2.56vw 2.56vw; } .mod-freeHTML .s-model__cont__box .product .txt__link { height: 2.4em; padding-right: 1.6em; font-size: 3.59vw; } .mod-freeHTML .s-model__cont__box .spec { row-gap: 4.62vw; flex: 1; padding: 6.41vw 2.56vw 2.56vw; } .mod-freeHTML .s-model__cont__box .spec__box { flex-direction: column; } .mod-freeHTML .s-model__cont__box .spec__box:not(:last-child)::after { bottom: -2.31vw; width: 100%; } .mod-freeHTML .s-model__cont__box .spec__box.box03 .spec__box__ttl .ant { font-size: 3.33vw; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .spec__box__ttl { height: 5.2em; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .wrap__cont { align-items: flex-start; margin-top: 2.05vw; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .wrap__cont .desc { font-size: 5.13vw; text-align: left; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant { font-size: 4.36vw; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant__01 { display: inline-block; margin-left: -0.5em; padding-right: 1em; text-align: right; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant__02 { display: inline-block; padding-left: 3.8em; text-align: left; text-indent: -2.8em; } .mod-freeHTML .s-model__cont__box .spec__box.box04 .wrap.col-1 .ant.ws { margin-left: -0.5em; white-space: nowrap; } .mod-freeHTML .s-model__cont__box .spec__box__ttl { width: auto; min-height: 5.2em; margin-right: 0; font-size: 3.59vw; } .mod-freeHTML .s-model__cont__box .spec__box__ttl sup { font-size: 1.28vw; } .mod-freeHTML .s-model__cont__box .spec__box__ttl .ant { font-size: 3.33vw; line-height: 1.2; text-align: center; } .mod-freeHTML .s-model__cont__box .spec__box__ttl .recommend { top: -1.3em; left: -1.2em; width: 9em; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc { font-size: 4.62vw; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc .num { font-size: 10.26vw; line-height: 1.3; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .desc .tax { margin-left: 0; font-size: 3.08vw; } .mod-freeHTML .s-model__cont__box .spec__box .wrap .ant { margin-top: 1.79vw; font-size: 3.08vw; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont { row-gap: 1.79vw; flex-direction: column; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .desc { text-align: right; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .desc .num { text-align: center; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-1 .wrap__cont .link { font-size: 2.82vw; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 { row-gap: 3.08vw; flex-direction: column; max-width: auto; padding: 2.05vw 0; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont { width: 100%; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont__ttl { font-size: 3.85vw; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2::after { display: none; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc { font-size: 4.62vw; line-height: 1.1; text-align: center; white-space: nowrap; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc .num { font-size: 10.26vw; line-height: 1; } .mod-freeHTML .s-model__cont__box .spec__box .wrap.col-2 .wrap__cont .desc .tax { display: block; font-size: 3.08vw; } .mod-freeHTML .s-model__ant { width: 95%; margin-top: 3.85vw; transform: none; } .mod-freeHTML .s-comparison { padding-top: 12.31vw; } .mod-freeHTML .s-comparison__ttl { margin-bottom: 5.38vw; } .mod-freeHTML .s-comparison__cont__box.standard { margin-left: 3.85vw; } .mod-freeHTML .s-comparison__cont__box.large { margin-right: 3.85vw; } .mod-freeHTML .s-comparison__cont__box .list { gap: 2.05vw 0; } .mod-freeHTML .s-comparison__cont__box .list__item { width: 100%; } .mod-freeHTML .s-comparison__ant { margin: 10.26vw 0; font-size: 3.08vw; } .mod-freeHTML .s-choice { padding-top: 36.67vw; } .mod-freeHTML .s-choice__cont__ttl { position: relative; margin-bottom: -11.03vw; transform: translateY(-11.03vw); font-size: 4.62vw; } .mod-freeHTML .s-choice__cont__ttl .fig01 { width: 90%; margin-left: auto; } .mod-freeHTML .s-choice__cont__ttl .fig02 { z-index: 2; position: absolute; top: -6.41vw; left: -3.85vw; width: 26.7%; } .mod-freeHTML .s-choice__cont .check { padding: 3.85vw 5.64vw 2.56vw; } .mod-freeHTML .s-choice__cont .check__ttl { margin-bottom: 4.87vw; } .mod-freeHTML .s-choice__cont .check .list { row-gap: 2.56vw; } .mod-freeHTML .s-choice__cont .check .list__item { padding-left: 0; font-size: 4.36vw; } .mod-freeHTML .s-choice__cont .check .list__item .desc { margin-top: 0.1em; } .mod-freeHTML .s-choice__cont .check .list__item .ant { margin-top: -0.3em; padding-left: 1em; font-size: 3.08vw; line-height: 1.5; text-indent: -1em; } .mod-freeHTML .s-choice__cont .check__product { position: static; width: calc(100% + 16.15vw); margin: 3.85vw -10.51vw 0 -5.64vw; } .mod-freeHTML .s-choice__recommend { margin-bottom: 5.64vw; } .mod-freeHTML .s-choice__recommend__cont.standard .s-choice__recommend__cont__ttl { width: 34.62vw; } .mod-freeHTML .s-choice__recommend__cont.standard .s-choice__recommend__cont__illust { width: 80.51vw; margin-left: -6.41vw; } .mod-freeHTML .s-choice__recommend__cont.large .s-choice__recommend__cont__ttl { width: 41.54vw; } .mod-freeHTML .s-choice__recommend__cont.large .s-choice__recommend__cont__product { margin-bottom: 49.23vw; } .mod-freeHTML .s-choice__recommend__cont.large .s-choice__recommend__cont__illust { width: 79.49vw; margin-right: -6.41vw; margin-left: -30.77vw; } .mod-freeHTML .s-choice__recommend__cont__product { row-gap: 2.56vw; flex-direction: column; width: 100%; margin: 0 0 17.18vw; font-size: 4.1vw; } .mod-freeHTML .s-choice__recommend__cont__product .fig { width: 42.05vw; max-width: none; margin-bottom: 1.28vw; } .mod-freeHTML .s-choice__recommend__cont__product .txt { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } .mod-freeHTML .s-choice__recommend__cont__product .txt__desc { margin: 0 2.56vw 2.56vw; } .mod-freeHTML .s-choice__recommend__cont__product .txt__link { height: 2.4em; padding-right: 1.6em; font-size: 3.59vw; } .mod-freeHTML .s-choice__link__ttl { margin-bottom: 10.51vw; font-size: 6.92vw; } .mod-freeHTML .s-service { padding: 25.64vw 0; } .mod-freeHTML .s-service__cont { margin-bottom: 10.26vw; padding: 6.67vw 0 10.26vw; } .mod-freeHTML .s-service__cont__ttl { width: 86%; margin-bottom: 10.26vw; } .mod-freeHTML .s-service__cont__ttl__deco { top: 4.62vw; left: -10.77vw; width: 18.46vw; } .mod-freeHTML .s-service__cont__illust { width: calc(100% + 7.69vw); margin-right: -5.9vw; margin-bottom: 4.87vw; margin-left: -1.79vw; } .mod-freeHTML .s-service__cont__txt { width: calc(100% - 11.28vw); margin-bottom: 5.38vw; } .mod-freeHTML .s-service__cont__txt .desc { font-size: 6.92vw; line-height: 1.3; } .mod-freeHTML .s-service__cont__txt .ant { font-size: 3.08vw; } .mod-freeHTML .s-service__banner { row-gap: 5.13vw; flex-direction: column; } .mod-freeHTML .s-service__banner .link { width: 100%; } } @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; } }