@charset "UTF-8"; @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); /* CSS変数定義 */ :root { --ff-basic: メイリオ,meiryo,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,ＭＳ Ｐゴシック,MS PGothic,sans-serif; --ff-forest2402: 'Noto Sans JP', Meiryo, \30e1\30a4\30ea\30aa, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; --color-forest: #008d38; --color-lightforest: #e1f0e7; } /* Base */ body.forest2402 { min-width: auto; overflow-x: hidden; } body.forest2402 .str-main { color: #000; font-family: var(--ff-forest2402); letter-spacing: .05em; } img { max-width: 100%; vertical-align: middle; } /* Structure */ .str-main *, .str-main *::before, .str-main *::after { box-sizing: border-box; } .str-contentInner { margin: 0 auto; max-width: 992px; padding-left: 16px; padding-right: 16px; } .str-contentInner> *:last-child { margin-bottom: 0; } @media (max-width: 767px) { .str-contentInner { padding-left: 15px; padding-right: 15px; } } /* kv */ .kv { background-image: url('/mball/premium/forest2402/img/kv-bg.png'); background-position: center top; background-repeat: no-repeat; background-size: cover; text-align: center; } @media (max-width: 767px) { .kv { background: none; } } /* .sec-about */ .str-content.sec-about { background-image: url('/mball/premium/forest2402/img/sec-about-bg.png'); background-position: center top; background-repeat: no-repeat; background-size: cover; } .str-content.sec-about > .str-contentInner { padding-bottom: 75px; padding-top: 95px; } .str-content.sec-about .sec-about-title { margin-bottom: 45px; text-align: center; } .str-content.sec-about .sec-about-lead { color: #fff; font-size: 2.2rem; letter-spacing: -0.015em; line-height: 2.045; } @media only screen and (max-width: 767px) { .str-content.sec-about { background-image: url('/mball/premium/forest2402/img/sp-sec-about-bg.png'); } .str-content.sec-about > .str-contentInner { padding-bottom: 30px; padding-top: 52px; } .str-content.sec-about .sec-about-title { margin-bottom: 39px; } .str-content.sec-about .sec-about-lead { font-size: 1.8rem; letter-spacing: 0; line-height: 2.1; } } /* .sec-activity */ .str-content.sec-activity { background-color: #fff; background-image: url('/mball/premium/forest2402/img/sec-activity-bg.png'); background-position: center top; background-repeat: no-repeat; background-size: 100%; } .str-content.sec-activity > .str-contentInner { padding-bottom: 70px; padding-top: 60px; } .str-content.sec-activity .activity-box { background-color: #fff; border: 4px solid var(--color-forest); border-radius: 30px; padding: 62px 26px; position: relative; } .str-content.sec-activity .activity-box::before { background-image: url('/mball/premium/forest2402/img/leaf0.png'); background-repeat: no-repeat; background-size: 100%; content: ''; height: 284px; left: -128px; position: absolute; top: -164px; width: 360px; } .str-content.sec-activity .activity-list { margin-bottom: 40px; } .str-content.sec-activity .activity { align-items: center; display: flex; padding-bottom: 33px; padding-left: 26px; padding-right: 24px; position: relative; } .str-content.sec-activity .activity + .activity { margin-top: 28px; } .str-content.sec-activity .activity::after { background-image: url('/mball/premium/forest2402/img/activity-bg.png'); background-repeat: repeat-x; bottom: 0; content: ''; height: 4px; left: 0; position: absolute; width: 100%; } .str-content.sec-activity .activity-head { flex: 0 0 auto; order: 2; } .str-content.sec-activity .activity-body { flex: 1 1 auto; order: 1; padding-right: 60px; } .str-content.sec-activity .activity-body > *:last-child { margin-bottom: 0; } .str-content.sec-activity .activity-img-wrap-pc { display: block; } .str-content.sec-activity .activity-img-wrap-sp { display: none; text-align: center; } .str-content.sec-activity .activity .activity-title { color: var(--color-forest); font-size: 4rem; font-weight: bold; letter-spacing: -0.02em; margin-bottom: 23px; } .str-content.sec-activity .activity .activity-txt { color: var(--color-forest); font-size: 2.2rem; letter-spacing: 0; line-height: 2.045; margin-top: 20px; } @media only screen and (max-width: 767px) { .str-content.sec-activity { background-image: none; } .str-content.sec-activity > .str-contentInner { padding-bottom: 40px; padding-left: 10px; padding-right: 10px; padding-top: 40px; } .str-content.sec-activity .activity-box { border-width: 2px; padding: 65px 13px 37px; } .str-content.sec-activity .activity { display: block; padding-bottom: 35px; padding-left: 11px; padding-right: 11px; } .str-content.sec-activity .activity-box::before { height: 180px; left: -65px; top: -96px; width: 214px; } .str-content.sec-activity .activity-body { padding-right: 0; } .str-content.sec-activity .activity-img-wrap-pc { display: none; } .str-content.sec-activity .activity-img-wrap-sp { display: block; } .str-content.sec-activity .activity .activity-title { font-size: 2.8rem; text-align: center; } .str-content.sec-activity .activity .activity-txt { font-size: 1.8rem; line-height: 2.13; } } /* .sec-story */ .str-content.sec-story { overflow-x: hidden; } .str-content.sec-story .str-contentInner { padding-bottom: 80px; padding-top: 26px; } .str-content.sec-story .sec-story-title { background: linear-gradient(to bottom, var(--color-forest) 186px, transparent 186px 100%); text-align: center; } .str-content.sec-story .sec-story-lead { font-size: 1.8rem; letter-spacing: -0.04em; line-height: 2.111; margin-bottom: 29px; } .str-content.sec-story .story { display: flex; justify-content: flex-end; position: relative; } .str-content.sec-story .story-head { left: 0; position: absolute; top: 0; width: 39.6875%; z-index: 1; } .str-content.sec-story .story-body { background-color: #f5f5f3; margin-top: 50px; padding: 60px 55px 48px 11.875%; position: relative; width: 66.667%; } .str-content.sec-story .story-body::before { background-image: url('/mball/premium/forest2402/img/leaf1.png'); background-repeat: no-repeat; content: ''; height: 239px; position: absolute; right: -116px; top: -115px; width: 300px; } .str-content.sec-story .story-body > *:last-child { margin-bottom: 0; } .str-content.sec-story .story-title { margin-bottom: 29px; } .str-content.sec-story .story-txt { font-size: 1.6rem; letter-spacing: -0.04em; line-height: 2.25; } @media only screen and (max-width: 767px) { .str-content.sec-story .sec-story-title { background: none; } .str-content.sec-story .str-contentInner { padding-bottom: 41px; padding-top: 22px; } .str-content.sec-story .sec-story-lead { font-size: 1.5rem; letter-spacing: -0.04em; line-height: 2.22; margin-bottom: 32px; } .str-content.sec-story .story { display: block; } .str-content.sec-story .story-head { margin: 0 auto; position: static; text-align: center; width: 77%; } .str-content.sec-story .story-body { margin-top: 72px; padding: 43px 20px 33px; width: auto; } .str-content.sec-story .story-body::before { background-size: 100%; height: 150px; right: -74px; top: -71px; width: 185px; } .str-content.sec-story .story-title { margin-bottom: 27px; } .str-content.sec-story .story-txt { font-size: 1.3rem; letter-spacing: 0; line-height: 2.345; } } /* .sec-product */ .str-content.sec-product { background-color: var(--color-lightforest); } .str-content.sec-product .str-contentInner { padding-bottom: 80px; padding-top: 66px; } .str-content.sec-product .product-img-wrap { margin-bottom: 40px; text-align: center; } .str-content.sec-product .product-txt { font-size: 1.6rem; line-height: 2.25; } @media only screen and (max-width: 767px) { .str-content.sec-product .str-contentInner { padding-top: 28px; } .str-content.sec-product .product-img-wrap { margin-bottom: 31px; } .str-content.sec-product .product-txt { font-size: 1.3rem; line-height: 2.3; } } /* .sec-step */ .str-content.sec-step { background-color: #f0f0ed; } .str-content.sec-step .str-contentInner { padding-bottom: 80px; padding-top: 66px; } @media only screen and (max-width: 767px) { .str-content.sec-step .str-contentInner { padding-top: 28px; } } /* .sec-note */ .str-content.sec-note .str-contentInner { padding-bottom: 80px; padding-top: 66px; } .str-content.sec-note .sec-note-lead { margin-bottom: 24px; text-align: center; } .str-content.sec-note .sec-note-lead > strong { color: #e00000; font-weight: bold; } @media only screen and (max-width: 767px) { .str-content.sec-note .str-contentInner { padding-top: 28px; } .str-content.sec-note .sec-note-lead { text-align: left; } } /* .sec-social */ .str-content.sec-social { background-color: var(--color-lightforest); } .str-content.sec-social .str-contentInner { padding-bottom: 80px; padding-top: 66px; } .str-content.sec-social .sec-social-lead { font-size: 1.5rem; margin-bottom: 24px; text-align: center; } @media only screen and (max-width: 767px) { .str-content.sec-social .str-contentInner { padding-top: 28px; } .str-content.sec-social .sec-social-lead { text-align: left; } } /* h1 */ body.forest2402 .hdg1 { color: #223; font-size: 3.2rem; font-weight: normal; letter-spacing: 0.005em; line-height: 1.3; margin: 0 auto 16px auto; max-width: 960px; } body.forest2402 .hdg1 > .small { font-size: 2.2rem; } @media only screen and (max-width: 767px) { body.forest2402 .hdg1 { font-size: 2.56rem; letter-spacing: -0.01em; margin: 0; max-width: none; padding: 20px 12px 16px; } body.forest2402 .hdg1 > .small { font-size: 1.8rem; } } /* sec-title */ body.forest2402 .sec-title { color: var(--color-forest); font-size: 4.4rem; margin-bottom: 50px; text-align: center; } @media only screen and (max-width: 767px) { body.forest2402 .sec-title { font-size: 3.2rem; margin-bottom: 22px; } } /* .btn */ .btn-wrap { margin-top: 40px; margin-bottom: 20px; text-align: center; } .btn-wrap .btn { border-radius: 40px; display: inline-block; font-size: 2rem; line-height: 2.25; min-height: 70px; padding: 10px; width: 420px; } .btn-wrap .btn:hover { opacity: .8; text-decoration: none; } .btn-wrap .btn.btn-nae { border: 2px solid var(--color-forest); color: var(--color-forest); } .btn-wrap .btn.btn-nae > .icn-nae { height: 18px; margin-right: 19px; position: relative; top: -2px; width: 20px; } .btn-wrap .btn.btn-forest { background-color: var(--color-forest); color: #fff; letter-spacing: -0.04em; } .btn-wrap .btn.btn-forest > .icn-blank { margin-right: 18px; position: relative; top: -1px; } @media only screen and (max-width: 767px) { .btn-wrap { margin-top: 32px; } .btn-wrap .btn { font-size: 1.7rem; min-height: 60px; padding-left: 16px; width: 315px; } .btn-wrap .btn.btn-nae { border: 1px solid var(--color-forest); } .btn-wrap .btn.btn-nae > .icn-nae { height: 15px; margin-right: 12px; width: 17px; } .btn-wrap .btn.btn-forest { letter-spacing: -0.04em; padding-left: 12px; } .btn-wrap .btn.btn-forest > .icn-blank { height: 8px; margin-right: 10px; top: -2px; width: 10px; } } /* お詫び */ .r-camp-end { max-width: 960px; width: 100%; color: #223; text-align: center; border: 1px solid #e00000; border-radius: 8px; margin: 0 auto 20px; padding: 10px; box-sizing: border-box; } @media only screen and (max-width: 767px) { .r-camp-end-wrap { padding: 0 15px; } .r-camp-end > dl > dd { text-align: left; } } /* モジュール調整・拡張 */ body.forest2402 .str-main .hdg1, body.forest2402 .str-main .str-breadclumb, body.forest2402 .str-main .mod-link-anchor, body.forest2402 .mod-box-step > .step > .hdg span:first-child { font-family: var(--ff-basic); } body.forest2402 .mod-link-anchor { margin-bottom: 18px; } body.forest2402 .mod-box-step > .step { border-radius: 20px; padding-bottom: 30px; } body.forest2402 .mod-box-step > .step + .step { margin-top: 44px; } body.forest2402 .mod-box-step > .step + .step:before { top: -30px; } body.forest2402 .mod-box-step > .step > .hdg span:first-child { background: var(--color-forest); color: #fff; } body.forest2402 .list li.red { color: #e00 !important; } body.forest2402 .mod-pnl > .inner > .col > .content[href]:focus, body.forest2402 .mod-pnl > .inner > .col > .content[href]:hover { background-color: #efefee; } body.forest2402 .mod-list-ordered > ol.list > li:before { width: 1.5em; } @media only screen and (max-width: 767px) { body.forest2402 .mod-link-anchor { margin-bottom: 14px; } .mod-pnl > .inner > .col { flex-basis: 100%; } }