@charset "UTF-8"; @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); /* 共通 */ body { font-family: 'Noto Sans JP', Meiryo, \30e1\30a4\30ea\30aa, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; min-width: auto; overflow-x: hidden; } img { width: 100%; vertical-align: middle; } img[src$="icon-outside.png"] { width: auto; } img[src$="icn-_blank.svg"], img[src$="icn-_blank-white.svg"] { width: 12px; height: 10px; } .mod-hdg-cl2>:after { background: #e75280; height: 3px; } a:link { color: #2885c9; } @media only screen and (max-width: 767px) { #anc-flow-present .mod-hdg-cl2, #anc-flow-cpn .mod-hdg-cl2 { margin: 60px 0 27px; } } .mod-hdg-cl2.cpn>:after { background: #00a047; height: 3px; } .emphasis { color: #e00 !important; } /* ヘッダー */ h1 { font-family: Meiryo, \30e1\30a4\30ea\30aa, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; } a:visited { text-decoration: none; color: #223; } .str-main { color: #223; min-width: 320px; } .str-main *, .str-main *::before, .str-main *::after { box-sizing: border-box; } .str-contentInner { max-width: 960px; margin: 0 auto; } .str-contentInner> *:last-child { margin-bottom: 0; } :not([class^=x-]) > h1.hdg1 { font-size: 3.2rem; line-height: 1.3; color: #223; max-width: 960px; margin: 0 auto 5px auto; font-weight: normal; font-style: normal; padding: 0; } ol.breadcrumb { font-family: Meiryo, \30e1\30a4\30ea\30aa, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; display: flex; flex-wrap: wrap; margin-top: 1.6rem; margin-bottom: 1.6rem; } ol.breadcrumb li { position: relative; font-size: 1.1rem; line-height: 1.2; margin-left: 2.8rem; } ol.breadcrumb li:first-child { margin-left: 0; } ol.breadcrumb li::before { display: block; content: ""; position: absolute; background-color: black; top: 50%; width: 5px; height: 1px; right: -1.6rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -3px; } ol.breadcrumb li::after { display: block; content: ""; position: absolute; background-color: black; top: 50%; width: 5px; height: 1px; right: -1.6rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } ol.breadcrumb li:last-child::before, ol.breadcrumb li:last-child::after { content: none; } ol.breadcrumb li em { font-size: 1.1rem; font-weight: normal; font-style: normal; } @media only screen and (max-width: 767px) { :not([class^=x-]) > h1.hdg1 { font-size: 2.56rem; max-width: 100%; margin: 0; padding: 20px 12px 16px; } .breadcrumb-wrapper { margin-left: 1.6rem; margin-right: 1.6rem; } } /* アンカーリンク集 */ #anchor { width: 100%; max-width: 960px; margin: 0 auto; } .mod-link-anchor > .list > li > a { font-size: 1.6rem; color: #314da5; } @media only screen and (max-width: 767px) { .mod-link-anchor { margin: 0; } .mod-link-anchor > .list > li > a { font-size: 1.5rem; } } /* KV */ .kv_area { max-width: 1920px; height: 940px; margin: 0 auto; } .kv_cont_full { width: 100%; height: 820px; text-align: center; background-image: url('/mball/premium/forest2306/img/kv_bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } .kv_band { width: 100%; height: 120px; text-align: center; background-image: url('/mball/premium/forest2306/img/kv_band.png'); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; padding: 20px 7px; } .kv_band img[src*="kv_band_txt.png"] { max-width: 1128px; } .kv_cont_wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 4px 7px 12px;; } .kv_cont_wrap > * { margin: 0 auto; } .kv_img_01 { max-width: 1183px; margin-bottom: -7px; } .kv_img_02 { max-width: 476px; } .kv_btn_block { display: flex; justify-content: space-between; margin-bottom: 12px; } .kv_btn_item { max-width: 578px; } .kv_btn_item > a::before { display: none !important; } .kv_btn_item > a:hover { opacity: 0.7; } .kv_btn_item img[src*="kv_btn_01.png"] { max-width: 578px; } .kv_btn_item img[src*="kv_btn_02.png"] { max-width: 578px; } @media (max-width: 1200px) { .kv_area { height: auto; } .kv_cont_full { height: auto; } .kv_band { height: auto; } } /* @media (min-width: 1921px) { .kv_cont_full { padding-left: 160px; padding-right: 160px; } } */ /* @media (min-width: 1201px) and (max-width: 1920px) { .kv_cont_full { height: 600px; overflow: hidden; } } */ /* @media (min-width: 768px) and (max-width: 1200px) { .kv_cont_full { background-size: contain; } } */ @media (max-width: 767px) { .kv_cont_full { background-image: url('/mball/premium/forest2306/img/kv_bg_sp.png'); background-size: 100%; } .kv_band { background-image: url('/mball/premium/forest2306/img/kv_band_sp.png'); background-size: 100%; padding: 5px 20px; } .kv_img_01 { margin-bottom: 15px; } .kv_img_02 { padding: 0 7px; } .kv_btn_block { margin-bottom: 8px; } .kv_btn_item + .kv_btn_item { margin-left: 13px; } } .kv_cont-pc { position: relative; width: 100%; background-repeat: no-repeat; margin: 0 auto; background-size: cover; background-position: top; min-height: 70vw; padding: 2vw; background-image: url(/brand/playstation5present_2023/img/kv_bg.png); } .kv_cont-sp { position: relative; width: 100%; margin: 0 auto; } .kv_cont-pc img { width: 100%; max-width: 100vw; position: relative; top: 11vw; } .kv_cont-sp img { width: 100%; max-width: 128vw; position: relative; } .kv_cont-pc .btn-img-left { position: absolute; max-width: 23.55vw; max-height: 7.2vw; left: 1.9vw; transition: opacity .2s ease-out; top: 53vw; } .kv_cont-pc .btn-img-right { position: absolute; max-width: 23.55vw; max-height: 7.2vw; transition: opacity .2s ease-out; right: 1.9vw; top: 53vw; } .kv_cont-pc .kv_btn-link:hover .btn-img-right, .kv_cont-pc .kv_btn-link:focus .btn-img-right, .kv_cont-pc .kv_btn-link:focus-visible .btn-img-right, .kv_cont-pc .kv_btn-link:hover .btn-img-left, .kv_cont-pc .kv_btn-link:focus .btn-img-left, .kv_cont-pc .kv_btn-link:focus-visible .btn-img-left { opacity: .6; } .kv_cont-sp { display: none; } .kv_cont-sp .btn-img-left { position: absolute; max-width: 43.75vw; max-height: 10.2vw; bottom: 16.56vw; left: 2.75vw; } .kv_cont-sp .btn-img-right { position: absolute; max-width: 43.75vw; max-height: 10.2vw; bottom: 16.56vw; right: 2.75vw; } @media only screen and (max-width: 767px) { .kv_cont-pc { display: none; } .kv_cont-sp { display: block; } } /* kvアンカー飾り線打ち消し */ #kv_area .kv_btn-link::before { content: none; } /* 応募方法 */ #anc-flow-present, #anc-flow-cpn { padding: 10px; } #anc-flow-present { padding-bottom: 5px; } #anc-cpn .forest-article.howto .article-inner { padding-bottom: 30px; } #anc-flow-present .mod-box-step>.step>.hdg span:first-child { background: #e75280; } #anc-flow-present .mod-box-step { margin-bottom: 0; } @media only screen and (max-width: 767px) { #anc-flow-present > .inner, #anc-flow-cpn > .inner { padding: 0 15px; } } /* 注意事項 */ #anc-notice { padding: 0 0 35px; } #anc-notice > .inner { padding: 0 10px; } #anc-notice .mod-hdg-cl2 { margin-bottom: 24px; } #anc-notice .mod-hdg-cl2 + .mod-txt { margin-bottom: 45px; } #anc-notice .mod-hdg-cl2 + .mod-txt > p { text-align: center; } @media only screen and (max-width: 767px) { #anc-notice { padding: 0 0 30px; } #anc-notice > .inner { padding: 0 15px; } #anc-notice .mod-hdg-cl2 + .mod-txt { margin-bottom: 24px; } #anc-notice .mod-hdg-cl2 + .mod-txt > p { text-align: left; } } /* 応募ボタン */ #anc-apply { padding: 10px 10px 40px; } #anc-apply .mod-btn.of-large a { width: 480px; } #anc-apply .mod-hdg-cl2 { margin-bottom: 24px; } #anc-apply .mod-hdg-cl2 + .mod-txt { margin-bottom: 45px; } #anc-apply .mod-hdg-cl2 + .mod-txt > p { text-align: center; } @media only screen and (max-width: 767px) { #anc-apply { padding: 20px 0 10px; } #anc-apply > .inner { padding: 0 15px; } #anc-apply .mod-btn > .btn { width: 100%; } #anc-apply .mod-btn.of-large a { width: 100%; max-width: 480px; margin: 0 auto; } #anc-apply .mod-hdg-cl2 + .mod-txt > p { text-align: left; } #anc-apply .mod-hdg-cl2 + .mod-txt { margin-bottom: 24px; } } /* So-netの森って何？ */ #anc-forest { background: #d7e7b1; padding-top: 65px; padding-bottom: 70px; } #anc-forest .str-contentInner { max-width: 1040px; } #anc-forest .mod-media.hdg2 { margin-bottom: 39px; } .forest-article + .forest-article { margin-top: 10px; } .article-inner { background-color: #fff; border-radius: 40px; padding: 30px 40px 51px; } .article-inner > *:last-child { margin-bottom: 0; } #anc-forest .mod-media > .inner > * { margin: 0 auto; } .forest-article + .mod-txt { margin-top: 30px; text-align: center; } @media only screen and (max-width: 767px) { #anc-forest { padding-top: 30px; padding-bottom: 13.5vw; } #anc-forest section > .inner { padding: 0 16px; } #anc-forest .mod-media.hdg2 { margin-bottom: 25px; } #anc-forest .mod-media.hdg2 h2 > img { width: 56.217vw; } .forest-article + .forest-article { margin-top: 10px; } .article-inner { border-radius: 20px; padding: 19px 16px 41px; } .forest-article + .mod-txt { margin-top: 25px; text-align: left; } } /* So-net会員だからもらえるプレゼント */ /* セクション */ #anc-present { background-color: #fae3eb;; position: relative; padding-top: 65px; padding-bottom: 70px; border-top: 10px solid #e75280; } #anc-present .str-contentInner { max-width: 1040px; } /* セクション下矢印 */ #anc-present::after { content: ""; position: absolute; transform: translateX(-50%); left: 50%; bottom: -35px; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 35px solid #fae3eb; } .sec-present { padding: 37px 10px; } /* LP内見出し */ #anc-present .hdg2 { margin-bottom: 30px; } .mod-hdg-pl2 { display: flex; justify-content: center; align-items: center; } .hdg-pl2-img { max-width: 100%; width: auto; } .hdg-pl2-txt { font-weight: bold; font-size: 4rem; color: #fff; } .hdg-pl2-img + .hdg-pl2-txt { padding-left: 10px; } #anc-present .mod-media > .inner > * { margin: 0 auto; } @media only screen and (max-width: 767px) { #anc-present { padding-top: 30px; padding-bottom: 10.8vw; } #anc-present section > .inner { padding: 0 16px; } .hdg-pl2-txt { font-size: 2.3rem; } #anc-present img[src*="img5.png"] { max-width: 93.9%; } } /* ボックス */ .mod-box-cp { margin: 20px auto 0; } .mod-box-cp + .mod-box-cp { margin-top: 40px; } .mod-box-cp-ttl { background-color: #021b79; padding: 15px; font-size: 3.2rem; font-weight: bold; text-align: center; color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; } .mod-box-cp-contents { background-color: #fff; padding: 50px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .mod-box-cp-hdg { color: #0E4D9A; line-height: 1.2; font-size: 4rem; font-weight: bold; margin-bottom: 25px; } .mod-box-cp-txt { margin-bottom: 25px; } .mod-box-cp-txt .lead { font-size: 1.8rem; font-weight: bold; } .mod-txt.color-white { color: #fff; } .mod-btn.icon-blank a { color: #223; } @media only screen and (max-width: 767px) { .mod-box-cp-ttl { font-size: 2rem; } .mod-box-cp-hdg { font-size: 2rem; } .mod-box-cp-txt .lead { font-size: 1.5rem; } } /* 既存ボタン拡張 */ .mod-btn.present { margin-top: 70px; } .mod-btn.present .btn.var-03 a::before { content: "So-net会員さま限定"; background-color: #e75280; color: #fff; padding: 3px 10px; border-radius: 50px; position: absolute; font-size: 2rem; top: -20px; width: 300px; } .mod-btn.present .btn.var-03 a { border: 0; box-shadow: 0 3px 0 0 #EBBD1D; padding: 20px 0 16px; font-size: 2.8rem; width: 470px; border-radius: 10px; min-height: 62px; color: #223; } .mod-btn.present .btn.var-03 a.is-disabled { background-color: #eee; opacity: .5; pointer-events: none; box-shadow: 0 3px 6px rgba(199, 199, 199, 0.5); } @media only screen and (max-width: 767px) { .mod-btn.present { margin-top: 50px; } .mod-btn.present .btn.var-03 a::before { font-size: 1.4rem; padding: 0 10px; min-width: 180px; width: auto; top: -10px; white-space: nowrap; } .mod-btn.present .btn.var-03 a { font-size: 2rem; } } /* 緑を溢れさせよう！So-netの森キャンペーン */ #anc-cpn { background: #e6f0cd; position: relative; padding-top: 65px; padding-bottom: 70px; border-top: 10px solid #00a047; } #anc-cpn .str-contentInner { max-width: 1040px; } /* セクション下矢印 */ #anc-cpn::after { content: ""; position: absolute; transform: translateX(-50%); left: 50%; bottom: -35px; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 35px solid #e6f0cd; } .sec-present { padding: 37px 10px; } /* LP内見出し */ #anc-cpn .hdg2 { margin-bottom: 30px; } #anc-cpn .mod-media > .inner > * { margin: 0 auto; } .mod-box-cp.cpn .mod-box-cp-ttl { background-color: #AC1C2E; } .mod-box-cp.cpn .mod-box-cp-hdg { color: #D22A3F; } .mod-media.cpn { margin: -50px -20px 30px -20px; } @media only screen and (max-width: 767px) { #anc-cpn { padding-top: 30px; padding-bottom: 13.5vw; } #anc-cpn section > .inner { padding: 0 16px; } #anc-cpn .mod-media.hdg2 h2 img { width: 69.74vw; } #anc-flow-cpn { padding: 6px 0; } #anc-cpn .article-inner #anc-flow-cpn > .inner { padding: 0; } #anc-cpn .mod-list-flow>.list>li>.inner { padding: 17px 20px 28px; } .mod-btn.post-sns { margin-bottom: 0; } } /* 既存ボタン拡張 */ .mod-btn.post-sns { margin-top: 30px; } .mod-btn.post-sns .btn.var-02 a { border: 0; min-width: 304px; min-height: 70px; background-color: #1595E4; font-size: 2rem; } .ico-twitter { max-width: 44px; margin-right: 15px; } .mod-btn.momo { margin-top: 40px; } .mod-btn.momo .btn a { font-size: 1.6rem; color: #e75280; border: 1px solid #e75280; background: #fff; } @media only screen and (max-width: 767px) { .mod-btn.post-sns .btn.var-02 a { font-size: 1.5rem; width: 100%; min-width: auto; min-height: 50px; align-items: center; } .ico-twitter { max-width: 24px; } } /* 環境・社会貢献 */ #anc-social { background: #e6f0cd; position: relative; padding-top: 75px; padding-bottom: 60px; } #anc-social .mod-hdg-cl2 { margin: 0 0 24px; } #anc-social .mod-hdg-cl2>:after { background: #00a047; height: 3px; } #anc-social .mod-txt.lead { text-align: center; } @media only screen and (max-width: 767px) { #anc-social { padding-top: 45px; margin-bottom: 40px; } #anc-social section > .inner { padding: 0 16px; } #anc-social .mod-txt.lead { text-align: left; } } /* ページ下部 sns-list */ .sns-list { margin: 50px 0; } .sns-list > ul { display: flex; justify-content: center; } .sns-list > ul > .sns-list-item + .sns-list-item { margin-left: 30px; } .sns-list > ul > .sns-list-item > .sns-list-link { display: inline-block; transition: .2s ease-out; } .sns-list > ul > .sns-list-item > .sns-list-link:hover { opacity: .7; } .sns-list > ul > .sns-list-item > .sns-list-link > .sns-list-image { width: auto; height: auto; } @media only screen and (max-width: 767px) { .sns-list { margin: 40px 0 50px; } .sns-list > ul > .sns-list-item > .sns-list-link > .sns-list-image { width: 48px; } } /* 以下【移植】や【ページ用の既存モジュール拡張】 */ /* 注釈リスト */ .notes { margin-bottom: 15px; } li > .notes { padding-top: 10px; } .notes > li { display: table; font-size: 1.2rem; line-height: 1.5; table-layout: auto; } .notes > li > * { display: table-cell; } .notes > li > .marker { line-height: 1; color: #e00000; padding-right: 10px; min-width: 1.7em; white-space: nowrap; } .notes > li > div > em { color: #e00000; } .notes > li + li { margin-top: 14px; } .notes.ar { text-align: right; } .notes.ar > li { display: block; padding-left: 0; } .notes.ar > li > * { display: inline; } .notes > li > a { color: #2885c9; } /* トグル内 h3 */ .mod-tgl .hdg3 { font-size: 21px; font-size: 2.1rem; margin: 50px 0 20px; } .mod-list-flow.cpn>.list>li>.inner>.hdg>.label { background-color: #00a047; } .mod-list-flow.cpn>.list>li>.inner>.media>span img { width: auto; } .mod-list-flow.cpn>.list>li>.inner>.txt.small { margin-top: 10px; font-size: 1.2rem; } /* チェックボックス */ :not([class^=x-])>input { appearance: auto; } .cpn-checkbox { margin: 40px 0; text-align: center; } .checkbox { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; } .checkbox + label { padding-left: 5px; } .applyBtn .highPriorityBtn { background: #fcdb00; box-shadow: 0 3px 6px rgba(199, 199, 199, 0.5); box-sizing: border-box; color: #223; font-weight: bold; border-radius: 10px; display: inline-block; line-height: 1.3em; text-align: center; position: relative; max-width: 470px; width: 100%; margin: 40px auto 0; font-size: 2.8rem; padding: 20px 0 16px; } .applyBtn .highPriorityBtn::before { content: "どなたでも応募可能 "; background-color: #D22A3F; color: #fff; font-size: 2rem; padding: 0 10px; border-radius: 50px; position: absolute; top: -20px; width: 300px; left: 50%; transform: translateX(-50%); } .applyBtn .highPriorityBtn .icn-_blank { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .applyBtn .highPriorityBtn:hover, .applyBtn .highPriorityBtn:focus { background: #fee63c; color: #223; text-decoration: underline; } .applyBtn .highPriorityBtn.is-disabled { background-color: #eee; opacity: .5; pointer-events: none; /* 見た目のみ 無効処理はJS側で実装 */ } @media only screen and (max-width: 767px) { .applyBtn .highPriorityBtn { font-size: 2rem; } .applyBtn .highPriorityBtn::before { font-size: 1.4rem; padding: 0 10px; min-width: 180px; width: auto; top: -15px; white-space: nowrap; } } /* 終了対応 */ .r-camp-end-wrap { padding: 30px 0 10px; } .r-camp-end { max-width: 960px; width: 100%; text-align: center; border: 2px solid #FFFFFF; margin: 0 auto 20px; padding: 10px; font-size: 1.8rem; font-weight: bold; box-sizing: border-box; } .r-camp-end p { color: #FFFFFF; } @media only screen and (max-width: 767px) { .r-camp-end-wrap { padding: 15px 15px 0; } .r-camp-end { font-size: 1.6rem; } } /* パネルモジュール */ .mod-pnl>.inner>.col { width: 100%; } .mod-pnl>.inner>.col>.content>.summary h3 { font-size: 1.3rem; line-height: 1.75; margin: 0; } .mod-pnl>.inner>.col>.content>.summary h3>b.lede { color: #314da5; display: block; font-size: 1.6rem; margin: 0 0 9px; font-weight: inherit; } .box-warn{ border: 1px solid #e00000; background-color: white; } .impt{ color: #e00000!important; }