@charset "UTF-8"; /* # ================================================================= # 共通要素 # ================================================================= */ .mod-freeHTML { font-size: 62.5%; font-family: "Kiwi Maru", serif; } .mod-freeHTML .en { font-family: "Caveat", cursive; } .mod-freeHTML .kaisei { font-family: "Kaisei Opti", 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 { margin: 0; vertical-align: top; } .mod-freeHTML figure picture { width: 100%; height: 100%; vertical-align: top; } .mod-freeHTML figure img { width: 100%; height: auto; vertical-align: top; } .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: 42.68vw; max-width: 656px; margin: 0 auto; } .c-btn01 { display: flex; z-index: 2; position: relative; align-items: center; justify-content: space-between; width: 15.6em; height: 2.5em; padding: 0 0.6em; overflow: hidden; border-radius: 0.8em; color: #fff; font-size: 24px; } .c-btn01 .num { transform: rotate(-10deg) translateY(-0.2em); font-size: 30px; letter-spacing: -0.04em; } .c-btn01 .ttl { font-weight: bold; } .c-btn01 .icon { width: 0.8em; } .c-btn01__bg { z-index: -1; position: absolute; top: 50%; left: 50%; width: 111%; height: auto; transform: translate(-50%, -50%); } .c-btn01__bg img { -o-object-fit: cover; width: auto; height: 100%; object-fit: cover; mix-blend-mode: soft-light; } .c-btn01__bg.green { background-color: #12a33a; } .c-btn01__bg.blue { background: #005694; } .c-ttl01 { position: relative; font-size: 30px; text-align: center; } .c-ttl01::after { position: absolute; top: calc(100% + 0.1em); left: 50%; width: 2.1em; height: 0.13em; transform: translateX(-50%); background-color: #0d0d0d; content: ""; } /*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 .illust { position: absolute; } .mod-freeHTML .fix__btn { display: grid; z-index: 10; position: fixed; top: 50%; right: 0; place-items: center; padding: 0.7em 0.9em 0.6em 1.1em; overflow: hidden; transform: translateY(-50%); border-radius: 0.8em 0px 0px 0.8em; color: #fff; font-size: 24px; } .mod-freeHTML .fix__btn:hover { opacity: 1; } .mod-freeHTML .fix__btn:hover .fix__btn__bg { filter: brightness(1.2); } .mod-freeHTML .fix__btn .rtl { text-orientation: upright; writing-mode: vertical-rl; } .mod-freeHTML .fix__btn__bg { z-index: -1; position: absolute; top: 0; left: 0; width: auto; height: 100%; background-color: #006738; transition: filter 0.3s; } .mod-freeHTML .fix__btn__bg img { -o-object-fit: cover; width: auto; height: 100%; object-fit: cover; mix-blend-mode: soft-light; } .mod-freeHTML .fix__btn__item { position: relative; padding-top: 1.5em; } .mod-freeHTML .fix__btn__item .en { position: absolute; top: 0.15em; left: -1.1em; transform: rotate(-10deg); } .mod-freeHTML .fix__btn__item .icon { width: 1.2em; transform: rotate(-90deg); transition: all 0.3s; } .mod-freeHTML .fix__modal { -ms-overflow-style: none; display: none; z-index: 20; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: scroll; overscroll-behavior-y: contain; /* スクロール可能な要素に付与する必要有り */ scrollbar-width: none; } .mod-freeHTML .fix__modal::-webkit-scrollbar { display: none; } .mod-freeHTML .fix__modal.is-active { display: block; animation: fadeIn 0.3s ease-in-out forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .mod-freeHTML .fix__modal .inner { position: relative; flex-direction: column; align-items: center; padding: 21vh 0 5vh; } .mod-freeHTML .fix__modal__bg { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; background: linear-gradient(90deg, rgb(40, 168, 56) 0%, rgb(40, 168, 56) 50%, rgb(0, 76, 136) 50%, rgb(0, 76, 136) 100%); } .mod-freeHTML .fix__modal__close { position: absolute; top: 5.2vw; right: 3.25vw; width: 1em; height: 1em; font-size: 24px; } .mod-freeHTML .fix__modal__close .cross { display: block; position: relative; width: 100%; height: 100%; } .mod-freeHTML .fix__modal__close .cross::before, .mod-freeHTML .fix__modal__close .cross::after { position: absolute; width: 1px; height: 100%; background-color: #fff; content: ""; } .mod-freeHTML .fix__modal__close .cross::before { left: 50%; transform: translateX(-50%) rotate(-45deg); } .mod-freeHTML .fix__modal__close .cross::after { left: 50%; transform: translateX(-50%) rotate(45deg); } .mod-freeHTML .fix__modal__lead { display: block; margin-bottom: 1.9em; color: #fff; font-size: 30px; text-align: center; text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16); } .mod-freeHTML .fix__modal .flex { -moz-column-gap: 5.5em; display: flex; column-gap: 5.5em; justify-content: center; font-size: 16px; } .mod-freeHTML .fix__modal .flex__cont { width: 28.5em; } .mod-freeHTML .fix__modal .flex__cont .wrap { padding: 1.5em; border-radius: 20px; background-color: #fff; } .mod-freeHTML .fix__modal .flex__cont .wrap__head { display: flex; justify-content: space-between; margin-bottom: 1.25em; } .mod-freeHTML .fix__modal .flex__cont .wrap__head .fig { width: 29.4%; } .mod-freeHTML .fix__modal .flex__cont .wrap__head .txt { width: 65.6%; } .mod-freeHTML .fix__modal .flex__cont__ant { display: inline-block; margin-top: 3.3em; color: #fff; font-size: 12px; line-height: 1.6; } .mod-freeHTML .fix__modal .flex .links { display: flex; row-gap: 1em; flex-direction: column; align-items: center; } .mod-freeHTML .s-mv { position: relative; height: 1000px; } .mod-freeHTML .s-mv__bg { width: 100%; height: 100%; } .mod-freeHTML .s-mv__bg img { -o-object-fit: cover; -o-object-position: 71% 0%; width: 100%; height: 100%; object-fit: cover; object-position: 71% 0%; } .mod-freeHTML .s-mv__txt__ttl { display: block; position: absolute; top: 27.9%; left: 17.42%; width: 9.6em; height: auto; font-size: 50px; } .mod-freeHTML .s-mv__txt__ttl img { width: 100%; height: auto; } .mod-freeHTML .s-mv__txt__ant { position: absolute; bottom: 3%; left: 17.42%; color: #0d0d0d; font-size: 12px; line-height: 1.5; } .mod-freeHTML .s-lead { padding: 6.51vw 0 10.41vw; background-color: #fffae8; } .mod-freeHTML .s-lead__cont { margin-bottom: 5.2vw; } .mod-freeHTML .s-lead__cont__head { display: flex; z-index: 2; position: relative; flex-direction: column; align-items: center; text-align: center; } .mod-freeHTML .s-lead__cont__head .ttl { margin-bottom: 0.3em; color: #2d8b3a; font-size: 40px; } .mod-freeHTML .s-lead__cont__head .ant { margin-bottom: 2em; color: #0d0d0d; font-weight: 500; font-size: 20px; line-height: 1.6; } .mod-freeHTML .s-lead__cont__head .desc { margin-bottom: 1.6em; color: #0d0d0d; font-size: 30px; text-align: center; } .mod-freeHTML .s-lead__cont__head .bird { top: 4.55vw; right: calc(100% - 2.67vw); width: 10.47vw; } .mod-freeHTML .s-lead__cont .list { display: flex; justify-content: space-between; margin-bottom: 1.6em; font-size: 24px; } .mod-freeHTML .s-lead__cont .list__item { width: 22.6%; min-width: 9em; } .mod-freeHTML .s-lead__cont .list__item .link { display: block; z-index: 3; position: relative; padding-top: 4.6em; } .mod-freeHTML .s-lead__cont .list__item .link .fig { position: absolute; box-shadow: 0.2vw 0.2vw 0.52vw rgba(0, 0, 0, 0.2); transition: all 0.3s; } .mod-freeHTML .s-lead__cont .list__item .link .fig.img01 { z-index: -2; top: 0; left: -0.3em; width: 4.1em; transform: rotate(-12deg); } .mod-freeHTML .s-lead__cont .list__item .link .fig.img02 { z-index: -1; top: 0.6em; right: 0; width: 6.1em; transform: rotate(10deg); } .mod-freeHTML .s-lead__cont .list__item .link .txt { display: flex; z-index: 2; position: relative; flex-direction: column; align-items: center; padding: 0.7em 0 0.3em; overflow: hidden; border-radius: 0.8em; color: #fff; transition: all 0.3s; } .mod-freeHTML .s-lead__cont .list__item .link .txt__num { position: absolute; top: 0.1em; left: 0.2em; transform: rotate(-10deg); font-size: 30px; line-height: 1.2; letter-spacing: -0.04em; } .mod-freeHTML .s-lead__cont .list__item .link .txt__ttl { margin-bottom: 0.4em; line-height: 1.3; text-align: center; } .mod-freeHTML .s-lead__cont .list__item .link .txt .icon { width: 0.8em; } .mod-freeHTML .s-lead__cont .list__item .link .txt .bg { z-index: -1; position: absolute; top: 50%; left: 50%; width: 204%; height: auto; transform: translate(-50%, -50%); } .mod-freeHTML .s-lead__cont .list__item .link .txt .bg.green { left: 20%; background-color: #12a33a; } .mod-freeHTML .s-lead__cont .list__item .link .txt .bg.blue { background: #005694; } .mod-freeHTML .s-lead__cont .list__item .link .txt .bg img { -o-object-fit: cover; width: 100%; height: auto; object-fit: cover; mix-blend-mode: soft-light; } .mod-freeHTML .s-lead__cont .list__item .link:hover { opacity: 1; } .mod-freeHTML .s-lead__cont .list__item .link:hover .fig.img01 { transform: rotate(-12deg) translateX(-0.4em) translateY(-0.7em); } .mod-freeHTML .s-lead__cont .list__item .link:hover .fig.img02 { transform: rotate(10deg) translateX(0.4em) translateY(-0.7em); } .mod-freeHTML .s-lead__cont .list__item .link:hover .txt { filter: brightness(0.8); } .mod-freeHTML .s-lead__cont__desc { margin-bottom: 1.2em; color: #0d0d0d; font-weight: normal; font-size: 16px; line-height: 2; text-align: center; } .mod-freeHTML .s-lead__cont__desc .red { color: #cc0000; } .mod-freeHTML .s-lead__cont__ant { display: block; color: #0d0d0d; font-size: 12px; line-height: 1.6; text-align: center; } .mod-freeHTML .s-lead .p-app { position: relative; } .mod-freeHTML .s-lead .p-app .ballon { top: -8.91vw; left: calc(100% + 3.38vw); width: 8.46vw; transform: rotate(12deg); } .mod-freeHTML .s-lead__step { position: relative; margin-top: 10.41vw; padding: 2em 1.7em 1em; border-radius: 1em; background-color: #fff; font-size: 20px; } .mod-freeHTML .s-lead__step__ttl { margin-bottom: 0.4em; color: #2d8b3a; font-size: 30px; text-align: center; } .mod-freeHTML .s-lead__step__desc { display: block; color: #0d0d0d; font-weight: 500; font-size: 20px; line-height: 1.6; text-align: center; } .mod-freeHTML .s-lead__step__ant { color: #0d0d0d; font-size: 12px; line-height: 1.5; } .mod-freeHTML .s-lead__step .cloud01 { bottom: calc(100% + 2.02vw); left: -12.3vw; width: 17.83vw; } .mod-freeHTML .s-lead__step .cloud02 { top: 19.32vw; left: calc(100% + 5.2vw); width: 6.96vw; } .mod-freeHTML .s-anchor { display: flex; } .mod-freeHTML .s-anchor__cont { z-index: 2; position: relative; width: 50%; padding: 6.51vw 0 1.3vw; } .mod-freeHTML .s-anchor__cont .inner { max-width: 28.5em; margin: 0 auto; font-size: 16px; } .mod-freeHTML .s-anchor__cont .wrap { padding: 1.5em; border-radius: 20px; background-color: #fff; font-size: 16px; } .mod-freeHTML .s-anchor__cont .wrap__head { display: flex; justify-content: space-between; margin-bottom: 1.25em; } .mod-freeHTML .s-anchor__cont .wrap__head .fig { width: 29.4%; } .mod-freeHTML .s-anchor__cont .wrap__head .txt { width: 65.6%; } .mod-freeHTML .s-anchor__cont .wrap .links { display: flex; row-gap: 1em; flex-direction: column; align-items: center; } .mod-freeHTML .s-anchor__cont__ant { display: block; margin-top: 1.6em; color: #fff; font-size: 12px; line-height: 1.6; } .mod-freeHTML .s-anchor__cont .bg { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mod-freeHTML .s-anchor__cont .bg img { -o-object-fit: cover; height: 100%; object-fit: cover; } .mod-freeHTML .s-letter { padding-bottom: 10.41vw; overflow: hidden; background-color: #fffae8; } .mod-freeHTML .s-letter__cont { padding-top: 11.45vw; } .mod-freeHTML .s-letter__cont.green .s-letter__cont__head::after { background-color: #28a838; } .mod-freeHTML .s-letter__cont.green .s-letter__cont__head .sub { color: #28a838; } .mod-freeHTML .s-letter__cont.green .s-letter__cont__wrap__ttl { color: #28a838; } .mod-freeHTML .s-letter__cont.green .s-letter__cont__wrap__ttl::after { background-color: #28a838; } .mod-freeHTML .s-letter__cont.green .s-letter__cont__wrap .more__txt { color: #28a838; } .mod-freeHTML .s-letter__cont.green .p-app { border-color: #28a838; } .mod-freeHTML .s-letter__cont.blue .s-letter__cont__head::after { background-color: #004c88; } .mod-freeHTML .s-letter__cont.blue .s-letter__cont__head .sub { color: #004c88; } .mod-freeHTML .s-letter__cont.blue .s-letter__cont__wrap__ttl { color: #004c88; } .mod-freeHTML .s-letter__cont.blue .s-letter__cont__wrap__ttl::after { background-color: #004c88; } .mod-freeHTML .s-letter__cont.blue .s-letter__cont__wrap .more__txt { color: #004c88; } .mod-freeHTML .s-letter__cont.blue .p-app { border-color: #004c88; } .mod-freeHTML .s-letter__cont:nth-child(even) .s-letter__cont__head::after { right: auto; left: 0; border-radius: 2em 0 0 2em; } .mod-freeHTML .s-letter__cont__head { z-index: 2; position: relative; margin-bottom: 2em; padding: 2em 11.19vw; color: #fff; font-size: 20px; } .mod-freeHTML .s-letter__cont__head::after { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; border-radius: 0 2em 2em 0; content: ""; } .mod-freeHTML .s-letter__cont__head .ttl { display: flex; align-items: center; justify-content: center; } .mod-freeHTML .s-letter__cont__head .ttl .num { margin-right: 0.5em; transform: rotate(-10deg); font-size: 34px; letter-spacing: -0.04em; } .mod-freeHTML .s-letter__cont__head .ttl .txt { font-size: 40px; } .mod-freeHTML .s-letter__cont__head .sub { display: block; display: grid; place-items: center; max-width: 21.5em; height: 2em; margin: 0.6em auto 1em; padding: 0 1em; border-radius: 2em; background-color: #fff; font-weight: 500; font-size: 20px; text-align: center; } .mod-freeHTML .s-letter__cont__head .desc { font-size: 16px; line-height: 2; } .mod-freeHTML .s-letter__cont__wrap__ttl { margin-bottom: 0.9em; } .mod-freeHTML .s-letter__cont__wrap__desc { display: block; margin-bottom: 1em; color: #0d0d0d; font-weight: 500; font-size: 20px; line-height: 1.6; text-align: center; } .mod-freeHTML .s-letter__cont__wrap .company { display: flex; justify-content: space-between; margin-bottom: 5em; padding: 2em 1.25em 1.25em; border-radius: 1.25em; background-color: #fff; font-size: 16px; } .mod-freeHTML .s-letter__cont__wrap .company .fig { width: 13%; } .mod-freeHTML .s-letter__cont__wrap .company .fig.mt { margin-top: -1em; } .mod-freeHTML .s-letter__cont__wrap .company .txt { width: 84%; } .mod-freeHTML .s-letter__cont__wrap .company .txt__desc { display: block; padding-right: 1em; color: #0d0d0d; line-height: 2; } .mod-freeHTML .s-letter__cont__wrap .company .txt .more { display: flex; align-items: center; justify-content: flex-end; margin-top: 1.6em; font-size: 12px; } .mod-freeHTML .s-letter__cont__wrap .company .txt .more .icon { width: 1.6em; margin-left: 0.7em; } .mod-freeHTML .s-letter__cont__wrap .list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 5.2vw; gap: 2.6vw 3.5%; } .mod-freeHTML .s-letter__cont__wrap .list__item { aspect-ratio: 1/1; width: 31%; } .mod-freeHTML .s-letter__cont__wrap .list__item .fig { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .mod-freeHTML .s-letter__cont__wrap .list__item .fig img { -o-object-fit: contain; object-fit: contain; filter: drop-shadow(0.2vw 0.2vw 0.52vw rgba(0, 0, 0, 0.16)); } .mod-freeHTML .s-letter__banner { padding-top: 10.41vw; } .mod-freeHTML .s-letter__banner .desc { margin-bottom: 1.3em; color: #0d0d0d; font-size: 30px; text-align: center; } .mod-freeHTML .s-print { position: relative; padding: 5.2vw 0 4.36vw; background-color: #fce3ad; } .mod-freeHTML .s-print .c-inner02 { position: relative; } .mod-freeHTML .s-print__desc { display: block; margin-bottom: 1.3em; color: #000; font-weight: normal; font-size: 30px; text-align: center; } .mod-freeHTML .s-print .wrap { display: flex; align-items: center; justify-content: space-between; } .mod-freeHTML .s-print .wrap .fig { width: 18%; } .mod-freeHTML .s-print .wrap .txt { width: 78%; color: #0d0d0d; font-size: 16px; line-height: 2; } .mod-freeHTML .s-print .ballon { top: -9.17vw; right: calc(100% + 5.6vw); width: 12.62vw; } .mod-freeHTML .s-print .tree { bottom: -4.36vw; left: calc(100% + 2.54vw); width: 11.58vw; } .mod-freeHTML .s-activity { padding: 10.41vw 0 18.8vw; } .mod-freeHTML .s-activity .group { margin-bottom: 6.51vw; } .mod-freeHTML .s-activity .group__ttl { margin-bottom: 1.6em; } .mod-freeHTML .s-activity .group .fig { width: 74%; margin: 0 auto 2.6vw; } .mod-freeHTML .s-activity .group__desc { display: inline-block; margin-bottom: 2.5em; color: #0d0d0d; font-size: 16px; line-height: 2; } .mod-freeHTML .s-activity .group .link { display: flex; align-items: center; justify-content: flex-end; width: 15.6em; height: 2.5em; margin: 0 auto; padding-right: 0.6em; border-radius: 0.8em; background-color: #0d0d0d; font-size: 24px; } .mod-freeHTML .s-activity .group .link .txt { display: grid; place-items: center; margin-right: 1em; color: #fff; line-height: 1.3; letter-spacing: 0.04em; } .mod-freeHTML .s-activity .group .link .txt .sub { font-size: 16px; } .mod-freeHTML .s-activity .group .link .icon { width: 0.8em; } .mod-freeHTML .s-activity .banners { padding-top: 6.51vw; border-top: 1px solid #707070; } .mod-freeHTML .s-activity .banners__ttl { margin-bottom: 1.6em; } .mod-freeHTML .s-activity .banners .list { display: flex; justify-content: space-between; } .mod-freeHTML .s-activity .banners .list__item { width: 31%; } @media screen and (max-width: 1529px) { body { margin: 0; } .mod-freeHTML { font-size: 0.6493506494vw; } .c-inner01 { width: 80%; } .c-inner02 { width: 70%; } .c-btn01 { font-size: clamp(18px, 1.25vw, 24px); } .c-btn01 .num { font-size: clamp(22px, 1.56vw, 30px); } .c-ttl01 { font-size: clamp(24px, 1.56vw, 30px); } .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 .fix__btn { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .fix__modal__close { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .fix__modal__lead { font-size: clamp(24px, 1.56vw, 30px); } .mod-freeHTML .fix__modal .flex { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .fix__modal .flex__cont__ant { font-size: clamp(12px, 0.63vw, 12px); } .mod-freeHTML .s-mv__txt__ttl { top: 15%; left: 5%; font-size: 40px; } .mod-freeHTML .s-mv__txt__ant { font-size: clamp(12px, 0.63vw, 12px); } .mod-freeHTML .s-mv__txt__ant { left: 5%; } .mod-freeHTML .s-lead__cont__head .ttl { font-size: clamp(30px, 2.08vw, 40px); } .mod-freeHTML .s-lead__cont__head .ant { font-size: clamp(14px, 1.04vw, 20px); } .mod-freeHTML .s-lead__cont__head .desc { font-size: clamp(22px, 1.56vw, 30px); } .mod-freeHTML .s-lead__cont__head .bird { right: 90%; } .mod-freeHTML .s-lead__cont .list { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .s-lead__cont .list__item .link .txt__num { font-size: clamp(22px, 1.56vw, 30px); } .mod-freeHTML .s-lead__cont__desc { font-size: clamp(14px, 0.83vw, 16px); } .mod-freeHTML .s-lead__cont__ant { font-size: clamp(12px, 0.63vw, 12px); } .mod-freeHTML .s-lead__step { font-size: clamp(16px, 1.04vw, 20px); } .mod-freeHTML .s-lead__step__ttl { font-size: clamp(22px, 1.56vw, 30px); } .mod-freeHTML .s-lead__step__desc { font-size: clamp(16px, 1.04vw, 20px); } .mod-freeHTML .s-lead__step__ant { font-size: clamp(12px, 0.63vw, 12px); } .mod-freeHTML .s-anchor__cont .inner { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-anchor__cont .wrap { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-anchor__cont__ant { font-size: clamp(12px, 0.63vw, 12px); } .mod-freeHTML .s-letter__cont__head { font-size: clamp(16px, 1.04vw, 20px); } .mod-freeHTML .s-letter__cont__head .ttl .num { font-size: clamp(26px, 1.77vw, 34px); } .mod-freeHTML .s-letter__cont__head .ttl .txt { font-size: clamp(32px, 2.08vw, 40px); } .mod-freeHTML .s-letter__cont__head .sub { font-size: clamp(16px, 1.04vw, 20px); } .mod-freeHTML .s-letter__cont__head .desc { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-letter__cont__wrap__desc { font-size: clamp(16px, 1.04vw, 20px); } .mod-freeHTML .s-letter__cont__wrap .company { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-letter__cont__wrap .company .txt .more { font-size: clamp(12px, 0.63vw, 12px); } .mod-freeHTML .s-letter__banner .desc { font-size: clamp(24px, 1.56vw, 30px); } .mod-freeHTML .s-print__desc { font-size: clamp(24px, 1.56vw, 30px); } .mod-freeHTML .s-print .wrap .txt { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-activity .group__desc { font-size: clamp(12px, 0.83vw, 16px); } .mod-freeHTML .s-activity .group .link { font-size: clamp(18px, 1.25vw, 24px); } .mod-freeHTML .s-activity .group .link .txt .sub { font-size: clamp(12px, 0.83vw, 16px); } } @media screen and (max-width: 1023px) { body { margin: 0; } .mod-freeHTML { font-size: 0.7142857143vw; } .c-inner01 { width: 90%; } .c-inner02 { width: 80%; } .u-bl-pc { display: block !important; } .u-none-pc { display: none !important; } .mod-freeHTML .s-mv__txt__ttl { top: 10%; font-size: 35px; } .mod-freeHTML .s-lead .p-app .ballon { left: calc(100% + 1.43vw); } .mod-freeHTML .s-lead__step .cloud02 { top: calc(100% + 2.6vw); left: calc(100% - 1.3vw); width: 10.87vw; } .mod-freeHTML .s-print .ballon { right: calc(100% + 1.3vw); } .mod-freeHTML .s-print .tree { left: calc(100% - 3.9vw); } } @media screen and (max-width: 767px) { body { margin: 0; } .mod-freeHTML { font-size: 1.9801980198vw; } .c-inner01 { width: auto; margin: 0 6.41vw; } .c-inner02 { width: auto; margin: 0 6.41vw; } .c-btn01 { width: 100%; height: 3em; padding: 0; border-radius: 3.08vw; font-size: 5.13vw; } .c-btn01 .num { margin-left: 1.28vw; transform: rotate(-10deg) translateY(-0.7em); font-size: 4.62vw; } .c-btn01 .icon { width: 1em; margin-right: 3.08vw; } .c-ttl01 { font-size: 6.15vw; line-height: 1.3; } .c-ttl01::after { top: calc(100% + 1.03vw); width: 2.6em; height: 1.03vw; } .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 .fix__btn { top: auto; bottom: 1.28vw; padding: 0 1.28vw 2.31vw 2.31vw; transform: none; font-size: 4.62vw; } .mod-freeHTML .fix__btn .rtl { display: flex; flex-direction: column; line-height: 1.2; } .mod-freeHTML .fix__btn .rtl span:nth-child(2) { padding-top: 2em; } .mod-freeHTML .fix__btn__item { height: 1.1em; padding-top: 1.2em; } .mod-freeHTML .fix__btn__item .en { top: 0.77vw; font-size: 3.59vw; } .mod-freeHTML .fix__btn__item .icon { width: 1.1em; height: 1.1em; } .mod-freeHTML .fix__modal { height: calc(var(--vh) * 100); } .mod-freeHTML .fix__modal .inner { padding-top: 5.64vw; } .mod-freeHTML .fix__modal__bg { min-height: calc(var(--vh) * 100); background: linear-gradient(180deg, rgb(40, 168, 56) 0%, rgb(40, 168, 56) 93.08vw, rgb(0, 76, 136) 93.08vw, rgb(0, 76, 136) 100%); } .mod-freeHTML .fix__modal__close { top: 3.85vw; right: 3.59vw; } .mod-freeHTML .fix__modal__lead { margin-bottom: 5.13vw; font-size: 4.62vw; } .mod-freeHTML .fix__modal .flex { flex-direction: column; align-items: center; gap: 10.26vw 0; font-size: 3.59vw; } .mod-freeHTML .fix__modal .flex__cont { width: calc(100% - 12.82vw); } .mod-freeHTML .fix__modal .flex__cont .wrap { padding: 6.15vw; border-radius: 3.08vw; } .mod-freeHTML .fix__modal .flex__cont .wrap__head { margin-bottom: 5.13vw; } .mod-freeHTML .fix__modal .flex__cont .wrap__head .fig { width: 27.8%; } .mod-freeHTML .fix__modal .flex__cont .wrap__head .txt { width: 68.2%; line-height: 1.4; } .mod-freeHTML .fix__modal .flex__cont__ant { margin-top: 5.13vw; font-size: 3.08vw; } .mod-freeHTML .fix__modal .flex .links { flex-direction: row; justify-content: space-between; gap: auto; } .mod-freeHTML .fix__modal .flex .links .link { position: relative; flex-direction: column; justify-content: center; width: 48%; height: auto; padding: 4.1vw 0 3.08vw; font-size: 4.62vw; } .mod-freeHTML .fix__modal .flex .links .link .num { position: absolute; top: 2.05vw; left: 1.54vw; margin-left: 0; } .mod-freeHTML .fix__modal .flex .links .link .ttl { margin-bottom: 1.28vw; line-height: 1.2; text-align: center; } .mod-freeHTML .fix__modal .flex .links .link .icon { margin-right: 0; } .mod-freeHTML .fix__modal .flex .links .link .c-btn01__bg { width: 250%; } .mod-freeHTML .s-mv { height: auto; } .mod-freeHTML .s-mv__bg { height: auto; } .mod-freeHTML .s-mv__bg img { -o-object-fit: auto; height: auto; object-fit: auto; } .mod-freeHTML .s-mv__txt__ttl { top: 14.1vw; left: 6.41vw; width: 57.44vw; } .mod-freeHTML .s-mv__txt__ant { right: 6.41vw; bottom: 3.59vw; left: auto; } .mod-freeHTML .s-lead { padding: 20.51vw 0; } .mod-freeHTML .s-lead__cont { margin-bottom: 20.51vw; } .mod-freeHTML .s-lead__cont__head .ttl { margin-bottom: 4.62vw; font-size: 6.15vw; } .mod-freeHTML .s-lead__cont__head .ant { margin-bottom: 10.26vw; font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-lead__cont__head .desc { margin-bottom: 5.38vw; font-size: 4.87vw; line-height: 1.5; } .mod-freeHTML .s-lead__cont__head .bird { z-index: -1; top: 27.44vw; right: auto; left: -3.33vw; width: 21.54vw; } .mod-freeHTML .s-lead__cont__head .cloud { z-index: -1; right: -6.15vw; bottom: 0vw; width: 29.49vw; } .mod-freeHTML .s-lead__cont .list { row-gap: 2.56vw; flex-wrap: wrap; margin-bottom: 20.51vw; font-size: 5.13vw; } .mod-freeHTML .s-lead__cont .list__item { width: 48.3%; min-width: auto; } .mod-freeHTML .s-lead__cont .list__item .link { padding-top: 22.31vw; } .mod-freeHTML .s-lead__cont .list__item .link .fig { box-shadow: 0.77vw 0.77vw 2.05vw rgba(0, 0, 0, 0.2); } .mod-freeHTML .s-lead__cont .list__item .link .fig.img01 { z-index: -1; left: 1.28vw; width: 17.44vw; } .mod-freeHTML .s-lead__cont .list__item .link .fig.img02 { z-index: -2; top: 7.44vw; width: 26.15vw; } .mod-freeHTML .s-lead__cont .list__item .link .txt { padding: 5.13vw 0 3.08vw; border-radius: 3.08vw; } .mod-freeHTML .s-lead__cont .list__item .link .txt__num { top: 1.03vw; left: 2.05vw; font-size: 4.62vw; } .mod-freeHTML .s-lead__cont .list__item .link .txt__ttl { margin-bottom: 1.28vw; line-height: 1.2; } .mod-freeHTML .s-lead__cont .list__item .link .txt .icon { width: 5.13vw; } .mod-freeHTML .s-lead__cont__desc { z-index: 3; position: relative; margin-bottom: 5.13vw; font-size: 3.59vw; } .mod-freeHTML .s-lead__cont__desc .ballon { top: -23.08vw; right: -6.15vw; width: 17.69vw; transform: rotate(9deg); } .mod-freeHTML .s-lead__cont__desc .cloud { top: -10.51vw; left: -16.92vw; width: 29.49vw; } .mod-freeHTML .s-lead__cont__ant { font-size: 3.08vw; } .mod-freeHTML .s-lead__step { margin-top: 20.51vw; padding: 10.26vw 6.15vw 10.26vw; border-radius: 3.08vw; font-size: 4.1vw; } .mod-freeHTML .s-lead__step__ttl { margin-bottom: 5.13vw; font-size: 6.15vw; line-height: 1.3; } .mod-freeHTML .s-lead__step__desc { margin-bottom: 5.13vw; font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-lead__step .fig { margin: 0 -8.46vw 5.13vw -6.15vw; } .mod-freeHTML .s-lead__step__ant { display: block; font-size: 3.08vw; line-height: 1.6; text-align: center; } .mod-freeHTML .s-anchor { flex-direction: column; } .mod-freeHTML .s-anchor__cont { width: 100%; padding: 10.26vw 0; } .mod-freeHTML .s-anchor__cont .inner { max-width: none; margin: 0 6.41vw; } .mod-freeHTML .s-anchor__cont .wrap { padding: 6.15vw; border-radius: 3.08vw; font-size: 3.59vw; } .mod-freeHTML .s-anchor__cont .wrap__head { margin-bottom: 5.13vw; } .mod-freeHTML .s-anchor__cont .wrap__head .fig { width: 27.6%; } .mod-freeHTML .s-anchor__cont .wrap__head .txt { width: 67.7%; } .mod-freeHTML .s-anchor__cont .wrap .links { width: 100%; } .mod-freeHTML .s-anchor__cont .wrap .links .link { flex-shrink: 0; } .mod-freeHTML .s-anchor__cont__ant { margin: 3.08vw 0 -5.13vw; font-size: 3.08vw; } .mod-freeHTML .s-letter { padding-bottom: 30.77vw; } .mod-freeHTML .s-letter__cont { padding-top: 30.77vw; } .mod-freeHTML .s-letter__cont:nth-child(even) .s-letter__cont__head::after { left: -2.56vw; } .mod-freeHTML .s-letter__cont__head { margin-bottom: 10.26vw; padding: 10.77vw 0 5.9vw; font-size: 4.1vw; } .mod-freeHTML .s-letter__cont__head::after { right: -2.56vw; } .mod-freeHTML .s-letter__cont__head .ttl { position: relative; } .mod-freeHTML .s-letter__cont__head .ttl .num { position: absolute; bottom: calc(100% - 2.31vw); left: 0; font-size: 7.95vw; line-height: 1.1; } .mod-freeHTML .s-letter__cont__head .ttl .txt { font-size: 6.15vw; line-height: 1.3; } .mod-freeHTML .s-letter__cont__head .sub { margin: 5.13vw auto; padding: 0; font-size: 4.1vw; } .mod-freeHTML .s-letter__cont__head .desc { display: block; padding: 0 3.08vw; font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-letter__cont__wrap__ttl { margin-bottom: 7.18vw; } .mod-freeHTML .s-letter__cont__wrap__desc { margin-bottom: 5.13vw; font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-letter__cont__wrap .company { margin-bottom: 10.26vw; padding: 6.15vw 4.1vw 4.1vw; border-radius: 3.08vw; font-size: 3.59vw; } .mod-freeHTML .s-letter__cont__wrap .company .fig { width: 28%; } .mod-freeHTML .s-letter__cont__wrap .company .txt { width: 67%; } .mod-freeHTML .s-letter__cont__wrap .company .txt__desc { padding-right: 2.05vw; line-height: 1.4; } .mod-freeHTML .s-letter__cont__wrap .company .txt .more { margin-top: 1em; font-size: 3.08vw; } .mod-freeHTML .s-letter__cont__wrap .list { justify-content: flex-start; margin-bottom: 10.26vw; gap: 5.13vw 4%; } .mod-freeHTML .s-letter__cont__wrap .list__item { width: 48%; } .mod-freeHTML .s-letter__cont__wrap .list__item .fig img { filter: drop-shadow(0.77vw 0.77vw 2.05vw rgba(0, 0, 0, 0.16)); } .mod-freeHTML .s-letter__banner { padding-top: 30.77vw; } .mod-freeHTML .s-letter__banner .desc { font-size: 5.13vw; line-height: 1.5; } .mod-freeHTML .s-print { padding: 20.51vw 0 30.77vw; } .mod-freeHTML .s-print__desc { margin-bottom: 5.13vw; font-size: 5.13vw; line-height: 1.5; } .mod-freeHTML .s-print .wrap { align-items: flex-start; } .mod-freeHTML .s-print .wrap .fig { width: 24%; } .mod-freeHTML .s-print .wrap .txt { width: 72.3%; font-size: 3.59vw; line-height: 1.4; } .mod-freeHTML .s-print .ballon { top: -32.56vw; left: -6.41vw; width: 21.28vw; } .mod-freeHTML .s-print .tree { right: 0; bottom: -30.77vw; left: auto; width: 34.62vw; } .mod-freeHTML .s-activity { padding: 20.51vw 0 51.28vw; } .mod-freeHTML .s-activity .group { margin-bottom: 20.51vw; } .mod-freeHTML .s-activity .group__ttl { margin-bottom: 7.18vw; } .mod-freeHTML .s-activity .group .fig { width: 100%; margin-bottom: 5.13vw; } .mod-freeHTML .s-activity .group__desc { margin: 0 3.08vw 10.26vw; font-size: 4.1vw; line-height: 1.5; } .mod-freeHTML .s-activity .group .link { height: 3.3em; padding-right: 3.08vw; border-radius: 3.08vw; font-size: 4.62vw; } .mod-freeHTML .s-activity .group .link .txt { margin-right: 2.05vw; } .mod-freeHTML .s-activity .group .link .txt .sub { font-size: 3.59vw; } .mod-freeHTML .s-activity .group .link .icon { width: 1.1em; } .mod-freeHTML .s-activity .banners { padding-top: 0; border-top: none; } .mod-freeHTML .s-activity .banners__ttl { margin-bottom: 9.74vw; } .mod-freeHTML .s-activity .banners .list { row-gap: 5.13vw; flex-direction: column; } .mod-freeHTML .s-activity .banners .list__item { 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; } } @media screen and (max-width: 767px) and (max-width: 767px) { .mod-freeHTML .fix__modal__close { font-size: 4.87vw; } }