@charset "UTF-8"; /* # ================================================================= # 共通要素 # ================================================================= */ .mod-freeHTML { color: #1a1a1a; font-size: 10px; font-family: "M PLUS 1p", 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; } /*下記追加記述*/ .sans { font-family: "Noto Sans JP", sans-serif; } .en { font-family: "Raleway", sans-serif; } .mod-freeHTML { /*component*/ /*project*/ /*utility*/ } .mod-freeHTML .c-inner01 { width: 65.06vw; max-width: 1000px; margin: 0 auto; } .mod-freeHTML .c-inner02 { width: 79.2%; margin: 0 auto; } .mod-freeHTML .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; } .mod-freeHTML .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; } .mod-freeHTML .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; } .mod-freeHTML .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; } .mod-freeHTML .c-ttl01 { position: relative; margin-bottom: 1em; padding-bottom: 0.3em; color: #0075c0; font-weight: 900; font-size: 40px; text-align: center; } .mod-freeHTML .c-ttl01::after { position: absolute; bottom: 0; left: 50%; width: 3em; height: 0.2em; transform: translateX(-50%); background-color: #0075c0; content: ""; } .mod-freeHTML .c-table { position: relative; overflow: hidden; border-collapse: collapse; } .mod-freeHTML .c-table::after { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #0075c0; border-radius: 1.3vw; content: ""; } .mod-freeHTML .c-table th { background-color: #0075c0; color: #fff; } .mod-freeHTML .c-table tr:not(:last-child) td { border-bottom: 1px solid #0075c0; } .mod-freeHTML .c-table tr td:not(:last-child) { border-right: 1px solid #0075c0; } .mod-freeHTML .c-table .fs14 { font-weight: bold; font-size: 1.4em; } .mod-freeHTML .c-table .fs15 { font-weight: bold; font-size: 1.5em; } .mod-freeHTML .c-table .fs18 { font-weight: 900; font-size: 1.8em; } .mod-freeHTML .c-table .fs22 { font-weight: 900; font-size: 2.2em; } .mod-freeHTML .c-table .fs32 { font-weight: 900; font-size: 3.2em; } .mod-freeHTML .c-table .fs40 { font-weight: 900; font-size: 4em; } .mod-freeHTML .p-list01 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 31.25em; margin: 0 auto; gap: 1.5em 1em; font-size: 32px; } .mod-freeHTML .p-list01 li .link { display: grid; position: relative; place-content: center; width: 9.75em; height: 3.75em; border-radius: 0.6em; background-color: #00aec0; } .mod-freeHTML .p-list01 li .link .fig { position: absolute; top: -1.1em; left: -0.5em; width: 2em; } .mod-freeHTML .p-list01 li .link .txt { margin-bottom: 0.3em; color: #fff; font-weight: 900; line-height: 1.1; text-align: center; } .mod-freeHTML .p-list01 li .link .txt .fs { font-size: 20px; vertical-align: 0.2em; } .mod-freeHTML .p-list01 li .link::after { position: absolute; bottom: 0.25em; left: 50%; width: 0.7em; height: 0.4em; transform: translateX(-50%); background-image: url("../img/arrow.webp"); background-size: 100% 100%; content: ""; pointer-events: none; } .mod-freeHTML .u-bl-lgpc { display: none !important; } .mod-freeHTML .u-bl-pc { display: none !important; } .mod-freeHTML .u-bl-tb { display: none !important; } /*page*/ .flat12#flat12 .fixbtn { display: block; z-index: 10; position: fixed; right: 0px; bottom: 70px; width: 14.83vw; max-width: 228px; } .flat12#flat12 .s-mv { padding-bottom: 3.9vw; background-color: #fff796; } .flat12#flat12 .s-mv__fv { margin-bottom: 3.9vw; } .flat12#flat12 .s-mv__movie { width: 53.9%; margin: 0 auto 3.9vw; } .flat12#flat12 .s-mv__movie__ttl { display: grid; position: relative; place-content: center; place-items: center; width: 100%; height: 2em; margin-bottom: 0.8em; border-radius: 0.5em; background-color: #00aec0; color: #fff; font-weight: 900; font-size: 40px; text-align: center; } .flat12#flat12 .s-mv__movie__ttl::after { -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); position: absolute; top: calc(100% - 1px); left: 50%; width: 0.65em; height: 0.55em; transform: translateX(-50%); background-color: #00aec0; content: ""; clip-path: polygon(0 0, 50% 100%, 100% 0); } .flat12#flat12 .s-mv__movie .movie { position: relative; width: 100%; } .flat12#flat12 .s-mv__movie .movie iframe, .flat12#flat12 .s-mv__movie .movie video { aspect-ratio: 828/466; width: 100%; border: none; } .flat12#flat12 .s-mv__movie .movie__btn { z-index: 2; position: absolute; top: 50%; left: 50%; width: 11%; transform: translate(-50%, -50%); transition: 0.3s; } .flat12#flat12 .s-mv__movie .movie__btn:hover { transform: translate(-50%, -50%) scale(1.1); } .flat12#flat12 .s-mv__movie .movie__btn.is-disable { display: none; } .flat12#flat12 .s-mv__point .list { margin: 0 auto; } .flat12#flat12 .s-lead { padding-top: 3.9vw; background-color: #ffe72e; } .flat12#flat12 .s-lead__cont { display: flex; position: relative; position: relative; flex-direction: column; align-items: center; width: -moz-fit-content; width: fit-content; margin: 0 auto -0.65vw; } .flat12#flat12 .s-lead__cont .ttl { margin-bottom: 0.78vw; color: #0075c0; font-weight: 900; font-size: 40px; line-height: 1.5; text-align: center; text-align: center; } .flat12#flat12 .s-lead__cont .ttl .fs { font-size: 50px; } .flat12#flat12 .s-lead__cont .desc { display: block; margin-bottom: 2.6vw; font-weight: 500; font-size: 26px; line-height: 1.7; text-align: center; } .flat12#flat12 .s-lead__cont .ant { display: block; color: #0075c0; font-weight: 500; font-size: 18px; text-align: center; } .flat12#flat12 .s-lead__cont .illust { position: absolute; } .flat12#flat12 .s-lead__cont .illust.illust01 { right: calc(100% + 2.6vw); bottom: 1.69vw; width: 12.23vw; } .flat12#flat12 .s-lead__cont .illust.illust02 { bottom: -9.24vw; left: 100%; width: 15.74vw; } .flat12#flat12 .s-section01 { background-color: #fff796; } .flat12#flat12 .s-section01__cont { -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7.48vw), 50% 100%, 0 calc(100% - 7.48vw)); display: grid; place-content: center; place-items: center; margin-bottom: -7.48vw; padding: 3.9vw 0 4.55vw; background-color: #dad8d8; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7.48vw), 50% 100%, 0 calc(100% - 7.48vw)); } .flat12#flat12 .s-section01__cont__ttl { margin-bottom: 0.65vw; font-weight: 900; font-size: 40px; line-height: 1.2; text-align: center; } .flat12#flat12 .s-section01__cont__img { width: 67.08vw; max-width: 1031px; margin-bottom: 0.98vw; } .flat12#flat12 .s-section01__cont__desc { font-weight: 900; font-size: 48px; line-height: 1.2; text-align: center; } .flat12#flat12 .s-section01__cont__desc .fs { font-size: 58px; } .flat12#flat12 .s-section02 { padding: 3.9vw 0; background-color: #ffe72e; } .flat12#flat12 .s-section02 .fig { width: 63.96vw; max-width: 983px; margin: 0 auto 1.5vw; } .flat12#flat12 .s-section02__desc { display: block; font-weight: 900; font-size: 40px; text-align: center; } .flat12#flat12 .s-section02__desc .fs { margin-left: 0.2em; color: #0075c0; font-size: 70px; } .flat12#flat12 .s-section03 { padding: 3.9vw 0; background-color: #fff796; } .flat12#flat12 .s-section03__navi { position: relative; width: -moz-fit-content; width: fit-content; margin: 0 auto 5.2vw; } .flat12#flat12 .s-section03__navi__illust { position: absolute; right: calc(100% + 0.33vw); bottom: 0; width: 12.49vw; max-width: 192px; } .flat12#flat12 .s-section03__cont { position: relative; width: 100em; margin: 0 auto 3.9vw; padding-top: 2em; border-radius: 1.3vw; background-color: #fff; box-shadow: 4px 6px 20px rgba(17, 66, 72, 0.16); font-size: 10px; } .flat12#flat12 .s-section03__cont:last-of-type { margin-bottom: 0; } .flat12#flat12 .s-section03__cont__ttl { display: flex; position: relative; margin: 0 2em 4em; padding-bottom: 1.6em; } .flat12#flat12 .s-section03__cont__ttl::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 0.4em; background-image: url("../img/section03-border.webp"); background-size: cover; content: ""; } .flat12#flat12 .s-section03__cont__ttl .icon { width: 10em; } .flat12#flat12 .s-section03__cont__ttl .txt { display: grid; flex: 1; place-content: center; color: #00aec0; font-weight: 900; font-size: 4em; line-height: 1.25; text-align: center; } .flat12#flat12 .s-section03 .cont01 { padding-bottom: 4em; } .flat12#flat12 .s-section03 .cont01__table { width: 89.2%; margin: 0 auto 2em; } .flat12#flat12 .s-section03 .cont01__ant { display: block; width: 89.2%; margin: 0 auto; font-weight: 500; font-size: 1.2em; line-height: 1.5; } .flat12#flat12 .s-section03 .cont01__illust { position: absolute; right: -8.72vw; bottom: -3.12vw; width: 19.52vw; max-width: 300px; } .flat12#flat12 .s-section03 .cont02 { padding-bottom: 4em; } .flat12#flat12 .s-section03 .cont02__img01 { width: 89.2em; margin: 0 auto 2.4em; } .flat12#flat12 .s-section03 .cont02__ttl { display: block; color: #0075c0; font-weight: 900; font-size: 3.2em; line-height: 1.1; text-align: center; } .flat12#flat12 .s-section03 .cont02 .wrap { position: relative; padding: 5.7em 0 16em 5.4em; } .flat12#flat12 .s-section03 .cont02 .wrap__desc { font-weight: 900; font-size: 2.5em; line-height: 1.5; } .flat12#flat12 .s-section03 .cont02 .wrap__img { position: absolute; top: 1em; left: 2.3em; width: 92.3em; } .flat12#flat12 .s-section03 .cont02__ant { display: block; width: 89.2%; margin: 0 auto; font-weight: 500; font-size: 1.2em; line-height: 1.5; } .flat12#flat12 .s-section03 .cont02__illust { position: absolute; right: -2.73vw; bottom: -1.69vw; width: 9.11vw; } .flat12#flat12 .s-section03__comment { display: grid; position: relative; position: relative; place-content: center; place-items: center; width: 82.8em; margin: 0 auto 3.9vw; padding: 3em 0; border-radius: 1.3vw; background-color: #00aec0; color: #fff; font-weight: 900; font-size: 10px; } .flat12#flat12 .s-section03__comment .ttl { -moz-column-gap: 0.6em; display: flex; position: absolute; top: 0; left: 50%; column-gap: 0.6em; transform: translate(-50%, -50%); } .flat12#flat12 .s-section03__comment .ttl span { display: grid; place-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background-color: #ffe72e; color: #00aec0; font-size: 2.6em; line-height: 1; text-align: center; } .flat12#flat12 .s-section03__comment .fs25 { font-size: 2.5em; line-height: 1.5; } .flat12#flat12 .s-section03__comment .fs36 { font-size: 3.6em; line-height: 1.5; } .flat12#flat12 .s-section03__comment .fs36 .yellow { color: #ffe72e; } .flat12#flat12 .s-section03 .cont03__box { display: flex; padding-left: 5.4em; } .flat12#flat12 .s-section03 .cont03__box .txt { width: 29em; margin-right: 3.3em; } .flat12#flat12 .s-section03 .cont03__box .txt .desc { font-weight: 900; font-size: 2.5em; line-height: 1.5; } .flat12#flat12 .s-section03 .cont03__box .txt__fig { margin: 0 -4.2em 1em -1.4em; } .flat12#flat12 .s-section03 .cont03__box .txt .ant { display: flex; flex-direction: column; align-items: center; padding: 0.8em 3.6em 0.7em; border: 2px solid #0075c0; border-radius: 2em; font-weight: bold; line-height: 1.3; text-align: center; } .flat12#flat12 .s-section03 .cont03__box .txt .ant__ttl { display: block; width: 100%; margin-bottom: 0.7em; border-bottom: 2px solid #0075c0; color: #0075c0; font-size: 1.4em; } .flat12#flat12 .s-section03 .cont03__box .txt .ant__desc { width: 100%; font-size: 1.4em; } .flat12#flat12 .s-section03 .cont03__box .txt .ant__price { color: #0075c0; font-size: 2.1em; line-height: 1.3; } .flat12#flat12 .s-section03 .cont03__box .figbox { flex: 1; } .flat12#flat12 .s-section03 .cont03__box .figbox .fig01 { width: 59.6em; } .flat12#flat12 .s-section03 .cont03__box .figbox .fig02 { width: 26.2em; margin-right: 2.5em; margin-left: auto; } .flat12#flat12 .s-section03 .cont04 .wrap { position: relative; padding-bottom: 16.1em; padding-left: 5.4em; } .flat12#flat12 .s-section03 .cont04 .wrap__desc { font-weight: 900; font-size: 2.5em; line-height: 1.5; } .flat12#flat12 .s-section03 .cont04 .wrap .fig { position: absolute; right: 1.1em; bottom: 0; width: 95.4em; } .flat12#flat12 .s-section03 .cont05 .wrap { position: relative; padding-bottom: 12.3em; padding-left: 5.4em; } .flat12#flat12 .s-section03 .cont05 .wrap__desc { font-weight: 900; font-size: 2.5em; line-height: 1.5; } .flat12#flat12 .s-section03 .cont05 .wrap .fig { position: absolute; right: 3.5em; bottom: 0; width: 91.7em; } .flat12#flat12 .s-section04 { padding: 3.9vw 0; background-color: #ffe72e; } .flat12#flat12 .s-section04__ttl { margin-bottom: 1.3vw; } .flat12#flat12 .s-section04__lead { display: block; font-weight: 500; font-size: 26px; line-height: 1.7; text-align: center; } .flat12#flat12 .s-section04__cont { width: 100em; margin: 0 auto 5.27vw; font-size: 10px; } .flat12#flat12 .s-section04__cont__product { margin-bottom: 2em; } .flat12#flat12 .s-section04__cont__table { width: 100%; margin: 0 auto; font-size: 10px; } .flat12#flat12 .s-section04__cont__ant { display: inline-block; margin-top: 2em; font-weight: 500; font-size: 1.2em; line-height: 1.5; } .flat12#flat12 .s-section04 .flow__ttl { margin-bottom: 3.25vw; } .flat12#flat12 .s-section04 .flow .wrap { position: relative; width: -moz-fit-content; width: fit-content; margin: 0 auto 9.76vw; } .flat12#flat12 .s-section04 .flow .wrap .list { -moz-column-gap: 0.6em; display: flex; column-gap: 0.6em; justify-content: center; font-size: 25px; } .flat12#flat12 .s-section04 .flow .wrap .list__item { -webkit-clip-path: polygon(0 0, calc(100% - 2em) 0, 100% 50%, calc(100% - 2em) 100%, 0 100%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 7em; height: 7.64em; padding: 0.6em 1em 0.8em 0; background-color: #fff; clip-path: polygon(0 0, calc(100% - 2em) 0, 100% 50%, calc(100% - 2em) 100%, 0 100%); } .flat12#flat12 .s-section04 .flow .wrap .list__item .spWrap { display: contents; } .flat12#flat12 .s-section04 .flow .wrap .list__item:first-child .icon { margin-top: 0.5em; } .flat12#flat12 .s-section04 .flow .wrap .list__item:last-child { -webkit-clip-path: none; padding-right: 0; border-radius: 1.3vw; background-color: #0075c0; clip-path: none; } .flat12#flat12 .s-section04 .flow .wrap .list__item:last-child * { color: #fff; } .flat12#flat12 .s-section04 .flow .wrap .list__item .step { color: #0075c0; font-weight: 900; font-size: 18px; line-height: 1.1; text-align: center; } .flat12#flat12 .s-section04 .flow .wrap .list__item .step .num { margin-bottom: 0.59vw; font-size: 30px; } .flat12#flat12 .s-section04 .flow .wrap .list__item .desc { display: grid; place-content: center; min-height: 4.4em; font-weight: 900; line-height: 1.5; text-align: center; } .flat12#flat12 .s-section04 .flow .wrap .list__item .icon { width: 2.5em; } .flat12#flat12 .s-section04 .flow .wrap .comment { position: absolute; position: absolute; top: calc(100% - 1.3vw); left: -2.6vw; width: 42.49vw; } .flat12#flat12 .s-section04 .flow__desc { display: block; margin-bottom: 1em; font-weight: 900; font-size: 40px; text-align: center; } .flat12#flat12 .s-section04 .flow__link { display: grid; position: relative; place-content: center; place-items: center; width: 18em; height: 2.5em; margin: 0 auto; border-radius: 1.3vw; background-color: #f48845; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); color: #fff; font-weight: 900; font-size: 36px; } .flat12#flat12 .s-section04 .flow__link::after { position: absolute; top: 50%; right: 0.9em; width: 0.6em; height: 0.36em; transform: translateY(-50%) rotate(-90deg); background-image: url("../img/arrow.webp"); background-size: 100% 100%; content: ""; } .flat12#flat12 .s-qa { padding: 3.9vw 0 2.6vw; background-color: #fff694; } .flat12#flat12 .s-qa__cont { width: 100em; margin: 0 auto; font-size: 10px; } .flat12#flat12 .s-qa__cont .list { display: grid; row-gap: 2em; width: 100%; margin-bottom: 1.95vw; } .flat12#flat12 .s-qa__cont .list__item { padding: 1em 1em 1em; border-radius: 2em; background-color: #00aec0; transition: 0.3s; } .flat12#flat12 .s-qa__cont .list__item.is-active { background-color: #00c2d0; } .flat12#flat12 .s-qa__cont .list__item.is-active .question::after { transform: translateY(-50%); } .flat12#flat12 .s-qa__cont .list__item .question { display: flex; position: relative; align-items: center; width: 100%; padding-right: 4em; padding-left: 1.5em; } .flat12#flat12 .s-qa__cont .list__item .question .icon { width: 2.1em; margin-right: 4em; } .flat12#flat12 .s-qa__cont .list__item .question .txt { flex: 1; color: #fff; font-weight: 900; font-size: 2.5em; line-height: 1.4; text-align: left; } .flat12#flat12 .s-qa__cont .list__item .question::before, .flat12#flat12 .s-qa__cont .list__item .question::after { position: absolute; top: 50%; right: 1em; width: 2em; height: 0.5em; transform: translateY(-50%); background-color: #fff; content: ""; transition: 0.3s; } .flat12#flat12 .s-qa__cont .list__item .question::after { transform: translateY(-50%) rotate(90deg); } .flat12#flat12 .s-qa__cont .list__item .answer { display: none; margin-top: 1em; border-radius: 2em; background-color: #fff; transition: 0.3s; } .flat12#flat12 .s-qa__cont .list__item .answer .wrap { display: flex; align-items: flex-start; padding: 2em 3em 2em 1.5em; } .flat12#flat12 .s-qa__cont .list__item .answer .icon { width: 2.5em; margin-right: 2em; } .flat12#flat12 .s-qa__cont .list__item .answer .txt { flex: 1; font-weight: 900; font-size: 2.5em; line-height: 1.5; } .flat12#flat12 .s-qa__cont .ant { font-weight: 500; font-size: 12px; line-height: 1.5; } @media screen and (max-width: 1529px) { body { margin: 0; } .mod-freeHTML { font-size: 0.6493506494vw; } .mod-freeHTML .c-inner01 { width: 80%; } .mod-freeHTML .c-inner02 { width: 90%; } .mod-freeHTML .c-btn01 { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .c-btn02 { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .c-ttl01 { font-size: clamp(30px, 2.08vw, 40px); } .mod-freeHTML .p-list01 { font-size: clamp(22px, 1.67vw, 32px); } .mod-freeHTML .p-list01 li .link .txt .fs { font-size: clamp(12px, 1.04vw, 20px); } .mod-freeHTML .u-bl-lgpc { display: block !important; } .mod-freeHTML .u-none-lgpc { display: none !important; } .flat12#flat12 .s-mv__movie__ttl { font-size: clamp(30px, 2.08vw, 40px); } .flat12#flat12 .s-lead__cont .ttl { font-size: clamp(30px, 2.08vw, 40px); } .flat12#flat12 .s-lead__cont .ttl .fs { font-size: clamp(40px, 2.6vw, 50px); } .flat12#flat12 .s-lead__cont .desc { font-size: clamp(18px, 1.35vw, 26px); } .flat12#flat12 .s-lead__cont .ant { font-size: clamp(14px, 0.94vw, 18px); } .flat12#flat12 .s-section01__cont__ttl { font-size: clamp(30px, 2.08vw, 40px); } .flat12#flat12 .s-section01__cont__desc { font-size: clamp(34px, 2.5vw, 48px); } .flat12#flat12 .s-section01__cont__desc .fs { font-size: clamp(44px, 3.02vw, 58px); } .flat12#flat12 .s-section02__desc { font-size: clamp(30px, 2.08vw, 40px); } .flat12#flat12 .s-section02__desc .fs { font-size: clamp(50px, 3.65vw, 70px); } .flat12#flat12 .s-section03 .cont01__illust { right: -5.86vw; bottom: -3.9vw; } .flat12#flat12 .s-section04__lead { font-size: clamp(20px, 1.35vw, 26px); } .flat12#flat12 .s-section04 .flow .wrap .list { font-size: clamp(18px, 1.3vw, 25px); } .flat12#flat12 .s-section04 .flow .wrap .list__item .step { font-size: clamp(14px, 0.94vw, 18px); } .flat12#flat12 .s-section04 .flow .wrap .list__item .step .num { font-size: clamp(22px, 1.56vw, 30px); } .flat12#flat12 .s-section04 .flow__desc { font-size: clamp(30px, 2.08vw, 40px); } .flat12#flat12 .s-section04 .flow__link { font-size: clamp(26px, 1.88vw, 36px); } .flat12#flat12 .s-qa__cont .ant { font-size: clamp(10px, 0.63vw, 12px); } } @media screen and (max-width: 1023px) { body { margin: 0; } .mod-freeHTML { font-size: 0.7142857143vw; } .mod-freeHTML .c-inner01 { width: 90%; } .mod-freeHTML .u-bl-pc { display: block !important; } .mod-freeHTML .u-none-pc { display: none !important; } .flat12#flat12 .s-section03__cont { font-size: 0.85vw; } .flat12#flat12 .s-section03__comment { font-size: 0.85vw; } .flat12#flat12 .s-section04__cont { font-size: 0.85vw; } .flat12#flat12 .s-section04__cont__table { font-size: 0.85vw; } .flat12#flat12 .s-qa__cont { font-size: 0.85vw; } } @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; } .mod-freeHTML .c-inner01 { width: auto; margin: 0 6.41vw; } .mod-freeHTML .c-inner02 { width: auto; margin: 0 2.56vw; } .mod-freeHTML .c-btn01 { width: 20em; height: 3.7em; border-radius: 3.7em; font-size: 3.59vw; line-height: 1.3; text-align: center; } .mod-freeHTML .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; } .mod-freeHTML .c-btn02::after { border-width: 2px; } .mod-freeHTML .c-ttl01 { margin-bottom: 6.15vw; font-size: 5.13vw; } .mod-freeHTML .c-ttl01::after { width: 17.44vw; height: 1.03vw; } .mod-freeHTML .p-list01 { justify-content: space-between; width: 83.08vw; gap: 5.38vw 0; font-size: 4.1vw; } .mod-freeHTML .p-list01 li { width: 48%; } .mod-freeHTML .p-list01 li:last-child .link .txt { margin-bottom: 3.08vw; line-height: 1; } .mod-freeHTML .p-list01 li .link { width: 100%; height: 19.49vw; border-radius: 3.08vw; } .mod-freeHTML .p-list01 li .link .fig { top: -4.36vw; left: -2.05vw; width: 9.74vw; } .mod-freeHTML .p-list01 li .link .txt { margin-bottom: 1.03vw; line-height: 1.2; } .mod-freeHTML .p-list01 li .link .txt .fs { font-size: 3.08vw; line-height: 1; } .mod-freeHTML .p-list01 li .link::after { bottom: 1.54vw; width: 4.1vw; height: 2.31vw; } .mod-freeHTML .u-bl-tb { display: block !important; } .mod-freeHTML .u-none-tb { display: none !important; } .flat12#flat12 .fixbtn { right: 0; bottom: 50px; width: 34.87vw; max-width: auto; } .flat12#flat12 .s-mv { padding-bottom: 15.38vw; } .flat12#flat12 .s-mv__fv { margin-bottom: 10.26vw; } .flat12#flat12 .s-mv__movie { width: 83.08vw; margin-bottom: 10vw; } .flat12#flat12 .s-mv__movie__ttl { height: 8.97vw; margin-bottom: 5.13vw; border-radius: 3.08vw; font-size: 5.13vw; } .flat12#flat12 .s-mv__movie__ttl::after { width: 2.56vw; height: 2.56vw; } .flat12#flat12 .s-mv__movie .movie__btn { width: 16%; } .flat12#flat12 .s-lead { padding-top: 10.26vw; } .flat12#flat12 .s-lead__cont { margin-bottom: 10.26vw; } .flat12#flat12 .s-lead__cont .ttl { margin-bottom: 4.1vw; font-size: 6.67vw; } .flat12#flat12 .s-lead__cont .ttl .fs { font-size: 8.21vw; } .flat12#flat12 .s-lead__cont .desc { margin-bottom: 5.13vw; font-size: 4.1vw; line-height: 2; } .flat12#flat12 .s-lead__cont .ant { font-size: 3.59vw; line-height: 1.7; } .flat12#flat12 .s-lead__cont .illust.illust01 { right: calc(100% - 12.82vw); bottom: 34.36vw; width: 16.67vw; } .flat12#flat12 .s-lead__cont .illust.illust02 { bottom: -34.36vw; left: calc(100% - 33.59vw); width: 36.92vw; } .flat12#flat12 .s-section01__cont { -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18.72vw), 50% 100%, 0 calc(100% - 18.72vw)); margin-bottom: -18.72vw; padding: 10.26vw 0 19.49vw; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18.72vw), 50% 100%, 0 calc(100% - 18.72vw)); } .flat12#flat12 .s-section01__cont__ttl { margin-bottom: 3.33vw; font-size: 6.67vw; line-height: 1.4; } .flat12#flat12 .s-section01__cont__img { width: 92.56vw; margin-bottom: 3.08vw; } .flat12#flat12 .s-section01__cont__desc { font-size: 6.67vw; line-height: 1.5; } .flat12#flat12 .s-section01__cont__desc .fs { font-size: 7.95vw; } .flat12#flat12 .s-section02 { padding: 10.26vw 0; } .flat12#flat12 .s-section02 .fig { width: 83.08vw; margin: 0 0 4.62vw 9.49vw; } .flat12#flat12 .s-section02__desc { font-size: 5.13vw; line-height: 1.5; } .flat12#flat12 .s-section02__desc .fs { display: block; margin-top: -0.1em; font-size: 13.08vw; } .flat12#flat12 .s-section03 { padding: 10.26vw 0 15.38vw; } .flat12#flat12 .s-section03__navi { margin-bottom: 12.05vw; } .flat12#flat12 .s-section03__navi__illust { right: -3.59vw; bottom: -16.15vw; width: 25.38vw; } .flat12#flat12 .s-section03__cont { width: 83.08vw; margin-bottom: 15.38vw; padding: 0; border-radius: 3.08vw; box-shadow: 1.03vw 1.54vw 5.13vw rgba(17, 66, 72, 0.16); } .flat12#flat12 .s-section03__cont__ttl { margin: 0 0 5.13vw; padding: 4.62vw 3.08vw 2.05vw; } .flat12#flat12 .s-section03__cont__ttl::after { left: 50%; width: 92%; height: 0.77vw; transform: translateX(-50%); background-image: url("../img/section03-border-sp.webp"); } .flat12#flat12 .s-section03__cont__ttl .icon { position: absolute; top: -1.79vw; left: -2.56vw; width: 15.38vw; } .flat12#flat12 .s-section03__cont__ttl .txt { font-size: 6.15vw; line-height: 1.25; } .flat12#flat12 .s-section03 .cont01 { padding-bottom: 10.51vw; } .flat12#flat12 .s-section03 .cont01__table { width: 72.82vw; margin-bottom: 5.13vw; } .flat12#flat12 .s-section03 .cont01__ant { width: 72.82vw; font-size: 3.08vw; } .flat12#flat12 .s-section03 .cont01__illust { right: -3.33vw; bottom: -11.54vw; width: 40.51vw; } .flat12#flat12 .s-section03 .cont02 { padding-bottom: 10.26vw; } .flat12#flat12 .s-section03 .cont02__img01 { width: 72.82vw; margin-bottom: 6.15vw; } .flat12#flat12 .s-section03 .cont02__ttl { margin-bottom: 5.13vw; font-size: 4.1vw; line-height: 1.25; } .flat12#flat12 .s-section03 .cont02 .wrap { padding: 0; } .flat12#flat12 .s-section03 .cont02 .wrap__desc { display: block; margin-left: 5.13vw; font-size: 4.1vw; } .flat12#flat12 .s-section03 .cont02 .wrap__img { position: static; width: 80.26vw; margin: 0 -2.56vw 5.38vw 5.13vw; } .flat12#flat12 .s-section03 .cont02__ant { width: 72.82vw; font-size: 3.08vw; } .flat12#flat12 .s-section03 .cont02__illust { right: -4.62vw; bottom: -6.15vw; width: 18.46vw; transform: rotate(-20deg); } .flat12#flat12 .s-section03__comment { width: 85.9vw; margin: -5.64vw auto 17.18vw; padding: 5.13vw 0; border-radius: 3.08vw; } .flat12#flat12 .s-section03__comment .ttl span { font-size: 4.87vw; } .flat12#flat12 .s-section03__comment .fs25 { font-size: 4.1vw; } .flat12#flat12 .s-section03__comment .fs36 { margin: 1.79vw 0; font-size: 6.15vw; line-height: 1.14; text-align: center; } .flat12#flat12 .s-section03 .cont03__box { flex-direction: column; padding: 0; } .flat12#flat12 .s-section03 .cont03__box .txt { width: auto; margin-right: 0; } .flat12#flat12 .s-section03 .cont03__box .txt .desc { display: block; margin-right: 8.21vw; margin-left: 5.13vw; font-size: 4.1vw; } .flat12#flat12 .s-section03 .cont03__box .txt__fig { margin: 1.79vw 0.51vw 3.33vw 3.59vw; } .flat12#flat12 .s-section03 .cont03__box .txt .ant { width: 72.82vw; margin: 0 auto 4.36vw; padding: 2.05vw 0; border-radius: 3.08vw; } .flat12#flat12 .s-section03 .cont03__box .txt .ant__ttl { width: 55.64vw; margin: 0 auto 1.79vw; font-size: 3.59vw; line-height: 1.3; } .flat12#flat12 .s-section03 .cont03__box .txt .ant__desc { font-size: 3.59vw; } .flat12#flat12 .s-section03 .cont03__box .txt .ant__price { font-size: 5.38vw; } .flat12#flat12 .s-section03 .cont03__box .figbox .fig02 { width: 51.54vw; margin-right: 4.1vw; } .flat12#flat12 .s-section03 .cont04 .wrap { padding: 0; padding-bottom: 0; } .flat12#flat12 .s-section03 .cont04 .wrap__desc { display: block; margin-left: 5.13vw; font-size: 4.1vw; } .flat12#flat12 .s-section03 .cont04 .wrap .fig { position: static; width: 83.08vw; margin: 2.05vw -3.08vw 0.51vw 3.08vw; } .flat12#flat12 .s-section03 .cont05 .wrap { padding: 0; } .flat12#flat12 .s-section03 .cont05 .wrap__desc { display: block; margin-left: 5.13vw; font-size: 4.1vw; } .flat12#flat12 .s-section03 .cont05 .wrap .fig { position: static; width: 75.13vw; margin: 0vw 2.82vw 1.28vw 4.87vw; } .flat12#flat12 .s-section04 { padding: 10.26vw 0 15.38vw; } .flat12#flat12 .s-section04__ttl { margin-bottom: 5.13vw; } .flat12#flat12 .s-section04__lead { font-size: 4.1vw; line-height: 2; } .flat12#flat12 .s-section04__cont { width: 83.08vw; margin-bottom: 15.38vw; } .flat12#flat12 .s-section04__cont__product { margin: 0 -6.41vw 7.69vw; } .flat12#flat12 .s-section04__cont__ant { margin-top: 5.13vw; font-size: 3.08vw; } .flat12#flat12 .s-section04 .flow__ttl { margin-bottom: 5.13vw; } .flat12#flat12 .s-section04 .flow .wrap { margin-bottom: 0; } .flat12#flat12 .s-section04 .flow .wrap .list { flex-direction: column; gap: 1.79vw 0; font-size: 5.13vw; } .flat12#flat12 .s-section04 .flow .wrap .list__item { -webkit-clip-path: none; position: relative; justify-content: flex-start; width: auto; height: auto; padding: 0; background: none; clip-path: none; } .flat12#flat12 .s-section04 .flow .wrap .list__item .spWrap { -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10.77vw), 50% 100%, 0 calc(100% - 10.77vw)); display: flex; flex-direction: column; align-items: center; width: 83.08vw; height: 28.72vw; background-color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10.77vw), 50% 100%, 0 calc(100% - 10.77vw)); } .flat12#flat12 .s-section04 .flow .wrap .list__item:last-child { border-radius: 3.08vw; } .flat12#flat12 .s-section04 .flow .wrap .list__item:last-child .spWrap { display: contents; } .flat12#flat12 .s-section04 .flow .wrap .list__item:last-child .icon { top: 50%; transform: translateY(-50%); } .flat12#flat12 .s-section04 .flow .wrap .list__item .step { font-size: 4.62vw; } .flat12#flat12 .s-section04 .flow .wrap .list__item .step .num { font-size: 7.69vw; } .flat12#flat12 .s-section04 .flow .wrap .list__item .desc { min-height: auto; min-height: 2.9em; line-height: 1.1; } .flat12#flat12 .s-section04 .flow .wrap .list__item .icon { position: absolute; top: 14.1vw; right: 3.59vw; width: 15.9vw; } .flat12#flat12 .s-section04 .flow .wrap .comment { position: static; width: 96.15vw; margin: 2.05vw -6.41vw; } .flat12#flat12 .s-section04 .flow__desc { margin-bottom: 5.64vw; font-size: 4.62vw; } .flat12#flat12 .s-section04 .flow__link { width: 83.08vw; height: 13.33vw; border-radius: 3.08vw; box-shadow: 0px 0.77vw 1.54vw rgba(0, 0, 0, 0.16); font-size: 5.9vw; } .flat12#flat12 .s-section04 .flow__link::after { right: 4.1vw; width: 4.1vw; height: 2.31vw; } .flat12#flat12 .s-qa { padding: 15.38vw 0 11.03vw; } .flat12#flat12 .s-qa__cont { width: 83.08vw; } .flat12#flat12 .s-qa__cont .list { row-gap: 3.08vw; margin-bottom: 9.23vw; } .flat12#flat12 .s-qa__cont .list__item { padding: 3.08vw; border-radius: 3.08vw; } .flat12#flat12 .s-qa__cont .list__item .question { padding-right: 10.26vw; padding-left: 3.59vw; } .flat12#flat12 .s-qa__cont .list__item .question .icon { width: 3.33vw; margin-right: 4.1vw; } .flat12#flat12 .s-qa__cont .list__item .question .txt { font-size: 4.1vw; line-height: 1.25; } .flat12#flat12 .s-qa__cont .list__item .question::before, .flat12#flat12 .s-qa__cont .list__item .question::after { width: 5.13vw; height: 1.28vw; } .flat12#flat12 .s-qa__cont .list__item .answer { margin-top: 2.56vw; border-radius: 3.08vw; } .flat12#flat12 .s-qa__cont .list__item .answer .wrap { padding: 2.82vw 2.56vw; } .flat12#flat12 .s-qa__cont .list__item .answer .icon { width: 4.1vw; margin-right: 1.54vw; } .flat12#flat12 .s-qa__cont .list__item .answer .txt { font-size: 4.1vw; line-height: 1.25; } .flat12#flat12 .s-qa__cont .ant { font-size: 3.08vw; } } @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; } }