@charset "UTF-8"; /* 右端の子メニューがはみ出さないようにするためのブレイクポイント */ /* 冪乗計算(乗数は整数のみ) * * $base: 冪乗される数 * $exp : 冪乗する回数 * * @return: $baseの$exp乗 * * 例: $base=2, $exp=3 => @return=8 */ /* 階乗計算 * * $val: 階数 * * @return: $valの階乗 * * 例: $val=5 => @return=120 */ /* 正弦(sin)計算 * * $angle: 角度(弧度法) * $degrees: $angleが度数かどうか * * @return: sin($angle) * * 例: $angle=30, $degrees=true => @return=0.5 */ /* 余弦(cos)計算 * * $angle: 角度(弧度法) * $degrees: $angleが度数かどうか * * @return: cos($angle) * * 例: $angle=60, $degrees=true => @return=0.5 */ /* 正接(tan)計算 * * $angle: 角度(弧度法) * $degrees: $angleが度数かどうか * * @return: tan($angle) * * 例: $angle=45, $degrees=true => @return=1 */ /* 共通 ------------------------------------------------------------- */ /* 共通 */ body { width: 100%; color: #333333; font-size: 13pt; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; overflow-x: hidden; overflow-y: scroll; } body.noscroll { /* スマホのメニュー表示時のスクロール固定 */ position: fixed; overflow-y: scroll; } /* リンク */ a { color: #333333; } /* その他 */ .pos-relative { position: relative; } .pos-absolute { position: absolute; } .text-wordbreak { display: inline-block; } .text-wordbreak-pc { display: inline-block; } @media screen and (max-width: 640px) { .text-wordbreak-pc { display: inline; } } .text-wordbreak-sp { display: inline-block; } @media screen and (min-width: 641px) { .text-wordbreak-sp { display: inline; } } .text-ml1 { margin-left: 1em !important; } .text-ml2 { margin-left: 2em !important; } .text-mr1 { margin-right: 1em !important; } .text-mr2 { margin-right: 2em !important; } .text-mt1 { margin-top: 1em !important; } .text-mt2 { margin-top: 2em !important; } .text-mb1 { margin-bottom: 1em !important; } .text-mb2 { margin-bottom: 2em !important; } .text-hangingindent1 { text-indent: -1em !important; padding-left: 1em !important; } .font-large { font-size: 0.84em !important; } @media screen and (max-width: 1024px) { .font-large { font-size: 0.798em !important; } } @media screen and (max-width: 854px) { .font-large { font-size: 0.756em !important; } } @media screen and (max-width: 640px) { .font-large { font-size: 0.714em !important; } } .font-small { font-size: 0.8em !important; } @media screen and (max-width: 1024px) { .font-small { font-size: 0.76em !important; } } @media screen and (max-width: 854px) { .font-small { font-size: 0.72em !important; } } @media screen and (max-width: 640px) { .font-small { font-size: 0.68em !important; } } .font-bold { font-weight: bold; } .color-warning { color: #c00000; } .hidden { display: none; } @media screen and (min-width: 641px) { .hidden-pc { display: none; } } @media screen and (max-width: 640px) { .hidden-sp { display: none; } } .kakomi { border: 1px solid #7F7F7F; padding: 0.5em; } .clearfix::after { content: ""; display: block; clear: both; } /* ヘッダー --------------------------------------------------------- */ /* ヘッダー */ .header { /* 外側 */ /* 本体 */ background: #FFFFFF; position: relative; /* 上側（タブ） */ /* 下側（ロゴ） */ } .header__wrap { max-width: 1200px; margin: 0 auto; padding: 0; /* アイキャッチの上を隠す準備ここから */ position: relative; z-index: 200; /* アイキャッチの上を隠す準備ここまで */ } .header__topbox { margin: 0; padding: 0; background: rgba(189, 58, 67, 0.15); /* 上部に固定ここから */ position: fixed; top: 0; left: 50%; transform: translateX(-50%); box-shadow: 0px 3px 3px -3px rgba(189, 58, 67, 0.5); width: 100%; max-width: 1200px; /* 上部に固定ここまで */ /* キャンペーン毎に色を変更ここから */ /* キャンペーン毎に色を変更ここまで */ } @media screen and (max-width: 640px) { .header__topbox { max-width: 640px; } } .header__topbox.bk2404 { background: #f390bc; box-shadow: 0px 3px 3px -3px rgba(243, 144, 188, 0.5); } .header__topbox.bk2406 { background: #9ac4e9; box-shadow: 0px 3px 3px -3px rgba(154, 196, 233, 0.5); } .header__topbox.bk2409 { background: #bd3a43; box-shadow: 0px 3px 3px -3px rgba(189, 58, 67, 0.5); } .header__topbox.bk2412 { background: rgba(189, 58, 67, 0.9); box-shadow: 0px 3px 3px -3px rgba(189, 58, 67, 0.5); } .header__topbox.bk2504 { background: #f19dae; box-shadow: 0px 3px 3px -3px rgba(241, 157, 174, 0.5); } .header__topbox-tab { margin: 0; padding: 0; text-align: right; font-size: 0; } .header__topbox-tab_guideline, .header__topbox-tab_apply { display: inline-block; vertical-align: bottom; } .header__topbox-tab_guideline img, .header__topbox-tab_apply img { width: 100%; height: auto; } .header__topbox-tab_guideline { padding: 0; width: calc((196 / 1200) * 100%); } @media screen and (max-width: 640px) { .header__topbox-tab_guideline { width: calc((196 / 640) * 100%); } } .header__topbox-tab_apply { padding: 10px 35px; width: calc((226 / 1200) * 100%); } @media screen and (max-width: 640px) { .header__topbox-tab_apply { width: calc((226 / 640) * 100%); } } .header__topbox-tab a { /* figure { position: relative; } figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } */ } .header__topbox-tab a img { max-width: 100%; height: auto; transition: 0.3s; } .header__topbox-tab a img:hover { transform: scale(1.1); transition: 0.3s; } .header__bottombox { text-align: center; padding: 0; } @media screen and (max-width: 640px) { .header__bottombox { text-align: right; } } .header__bottombox-logo { margin: 0; padding: 0; font-size: 0; overflow: hidden; } .header__bottombox-logo img { max-width: 100%; height: auto; /* 2025年4月用ここから */ /* 2025年4月用ここまで */ } @media screen and (max-width: 640px) { .header__bottombox-logo img { max-width: calc(100% + (4.5% * 2)); height: auto; margin-left: -4.5%; margin-right: -4.5%; } } .header__bottombox-logo img.hidden-pc { max-width: 100%; height: auto; margin-left: 0; margin-right: 0; } /* コンテンツ（メイン） -------------------------------------------- */ /* コンテンツ（メイン）*/ .content { /* 外側 */ } .content__wrap { max-width: 1200px; margin: 0 auto; padding: 0 18px; } .content__main { /* （なし） */ } /* メイン ----------------------------------------------------------- */ /* 商品一覧 */ .item { margin: 40px auto; padding: 0; width: 100%; max-width: 950px; } .item-color { color: #bd3a43; } .item-underline { display: inline-block; text-decoration: none; border-bottom: dotted 2px #bd3a43; line-height: 1em; } .item-hr { margin: 18px auto; max-width: 508px; width: 100%; } .item-hr img { width: 100%; height: auto; } .item__list { margin-top: 100px; display: grid; grid-template-columns: repeat(auto-fit, 210px); justify-content: center; grid-gap: 100px 30px; line-height: 2; } .item__list-parent { margin: 90px 0; /* 絞り込み表示ここから */ /* 絞り込み表示ここまで */ } @media screen and (max-width: 640px) { .item__list-parent { margin: 45px auto; } } .item__list-parent .item__button { display: grid; grid-template-columns: repeat(auto-fit, 4.2em); justify-content: center; justify-items: center; } .item__list-parent .item__button-toggle { position: relative; margin: 0 auto 1em; padding: 0.4em 0.8em 0.2em 2em; width: 8.5em; white-space: nowrap; transition: all .5s ease; background: #FFFFFF; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif; font-weight: 600; font-size: 0.9em; color: #1d1c3f; border: 2px solid #1d1c3f; cursor: pointer; } @media screen and (max-width: 1024px) { .item__list-parent .item__button-toggle { padding-bottom: 0.25em; font-size: 0.81em; } } @media screen and (max-width: 854px) { .item__list-parent .item__button-toggle { padding-bottom: 0.3em; font-size: 0.72em; } } @media screen and (max-width: 640px) { .item__list-parent .item__button-toggle { padding-bottom: 0.35em; font-size: 0.63em; } } .item__list-parent .item__button-toggle.close { background: rgba(29, 28, 63, 0.15); } .item__list-parent .item__button-toggle:hover { transform: scale(1.1); transition: all 0.3s; } .item__list-parent .item__button-toggle:before, .item__list-parent .item__button-toggle.close::before { position: absolute; content: ''; width: 6px; height: 6px; border: 0; border-top: solid 2px #1d1c3f; border-right: solid 2px #1d1c3f; top: 50%; left: 12px; transition: all 0.3s; } @media screen and (max-width: 1024px) { .item__list-parent .item__button-toggle:before, .item__list-parent .item__button-toggle.close::before { left: 10px; } } @media screen and (max-width: 854px) { .item__list-parent .item__button-toggle:before, .item__list-parent .item__button-toggle.close::before { left: 8px; } } @media screen and (max-width: 640px) { .item__list-parent .item__button-toggle:before, .item__list-parent .item__button-toggle.close::before { left: 6px; } } .item__list-parent .item__button-toggle:before { margin-top: -4px; transform: rotate(45deg); } .item__list-parent .item__button-toggle.close::before { margin-top: -4px; transform: rotate(-45deg); top: calc(50% + 2px); } .item__list-parent .item__button-wrap { display: none; } .item__list-parent .item__button input[name='pref-btn'] { position: relative; display: none; } .item__list-parent .item__button input[name='pref-btn'] + label { /* 未選択：デザイン案A（丸ボタン）ここから */ /* display: inline-block; width: 4.1em; margin: 0.25em 0.125em; padding: 0.4em 0.2em; line-height: 1em; font-size: 0.8em; text-align: center; color: $color-campaign-base; border: 1px solid $color-campaign-sub; border-radius: 9999px; cursor: pointer; transition: 0.3s; &:hover{ transform: scale(1.2); transition: 0.3s; } */ /* 未選択：デザイン案A（丸ボタン）ここまで */ /* 未選択：デザイン案B（下線ひし形）ここから */ display: inline-block; width: 4.1em; margin: 0.25em 0.125em 1.2em; padding: 0.4em 0.2em; line-height: 1em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif; font-weight: 600; font-size: 0.8em; text-align: center; color: #bd3a43; background: #FFFFFF; border-bottom: 2px solid #bd3a43; cursor: pointer; transition: 0.3s; position: relative; /* 未選択：デザイン案B（下線ひし形）ここまで */ } .item__list-parent .item__button input[name='pref-btn'] + label:first-of-type { /* すべて */ color: #1d1c3f; border: 2px solid #1d1c3f; } .item__list-parent .item__button input[name='pref-btn'] + label:hover { transform: scale(1.2); transition: 0.3s; } .item__list-parent .item__button input[name='pref-btn'] + label:before { content: ''; position: absolute; bottom: -0.3em; left: 0; transform: rotate(45deg); width: 6px; height: 6px; border: 2px solid #bd3a43; border-radius: 1px; background: #bd3a43; box-sizing: border-box; } .item__list-parent .item__button input[name='pref-btn'] + label:first-of-type::before { /* すべて */ width: 0; height: 0; border: none; background: #1d1c3f; } .item__list-parent .item__button input[name='pref-btn'] + label::after { content: ''; position: absolute; bottom: -0.3em; right: 0; transform: rotate(45deg); width: 6px; height: 6px; border: 2px solid #bd3a43; border-radius: 1px; background: #bd3a43; box-sizing: border-box; } .item__list-parent .item__button input[name='pref-btn'] + label:first-of-type::after { /* すべて */ width: 0; height: 0; border: none; background: #1d1c3f; } .item__list-parent .item__button input[name='pref-btn']:checked + label { /* 選択中：デザイン案A（丸ボタン）ここから */ /* color: #FFFFFF; background: $color-campaign-base; transition: 0.3s; &:hover{ transform: scale(1.2); transition: 0.3s; } */ /* 選択中：デザイン案A（丸ボタン）ここまで */ /* 選択中：デザイン案B（下線ひし形）ここから */ background: rgba(189, 58, 67, 0.15); border-radius: 1px; transition: 0.3s; /* 選択中：デザイン案B（下線ひし形）ここまで */ } .item__list-parent .item__button input[name='pref-btn']:checked + label:first-of-type { background: rgba(29, 28, 63, 0.15); } .item__list-parent .item__button input[name='pref-btn']:checked + label:hover { transform: scale(1.2); transition: 0.3s; } .item__list-parent .item__list .pref-teims { /* 商品の拡大表示ここから */ transition: all 0.3s; /* 商品の拡大表示ここまで */ /* 広告の背景色設定ここから */ /* 広告の背景色設定ここから */ } .item__list-parent .item__list .pref-teims img { background: transparent; background: #FFFFFF; } .item__list-parent .item__list .pref-teims:hover { transform: scale(1.1); transition: all 0.3s; } .item__list-parent .item__list .pref-teims:hover img { display: block; margin-top: -10px; margin-left: -10px; padding: 10px; border: 1px solid #333333; border-radius: 18px; box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6); background: #FFFFFF; } .item__list-parent .item__list .pref-teims.pref-pr img { background-color: #f2e9d8; } @media screen and (max-width: 640px) { .item__list { grid-template-columns: repeat(auto-fit, 135px); grid-gap: 50px 10px; } } .item__list img { width: 100%; height: auto; } .item__toapply { margin: 0 auto; width: calc((322 / 950) * 100%); } @media screen and (max-width: 640px) { .item__toapply { width: 50%; } } .item__toapply img { width: 100%; height: auto; transition: 0.3s; } .item__toapply img:hover { transform: scale(1.1); transition: 0.3s; } .item p { margin: 0; font-size: 1.42em; text-align: center; line-height: 2em; } @media screen and (max-width: 1024px) { .item p { font-size: 1.278em; } } @media screen and (max-width: 854px) { .item p { font-size: 1.136em; } } @media screen and (max-width: 640px) { .item p { font-size: 0.994em; } } /* 応募要項 */ .guideline { margin: 40px 0; padding: 30px 0; background: #eeeeee; } @media screen and (max-width: 640px) { .guideline { margin: 0 calc(50% - 50vw); width: 100vw; } } .guideline-footnote { margin-top: 1.5em !important; font-size: 88% !important; text-indent: -1em !important; margin-left: 1em !important; } @media screen and (max-width: 1024px) { .guideline-footnote { font-size: 79.2% !important; } } @media screen and (max-width: 854px) { .guideline-footnote { font-size: 74.8% !important; } } @media screen and (max-width: 640px) { .guideline-footnote { font-size: 70.4% !important; } } .guideline__label { text-align: center; } .guideline__label h2 { width: calc((314 / 1200) * 100%); margin: 0 auto; } @media screen and (max-width: 640px) { .guideline__label h2 { width: 50%; } } .guideline__label h2 img { width: 100%; height: auto; } .guideline__list { width: 100%; max-width: 950px; margin: 0 auto; } .guideline__list dl:not(:first-of-type) { border-top: 1px dotted #333333; padding-top: 1em; } .guideline__list dt { display: table-cell; margin: 0; padding: 10px; width: 8em; text-align: center; vertical-align: middle; font-size: 1.07em; font-weight: bold; } @media screen and (max-width: 1024px) { .guideline__list dt { width: 7em; font-size: 0.9095em; } } @media screen and (max-width: 854px) { .guideline__list dt { width: 6.5em; font-size: 0.856em; } } @media screen and (max-width: 640px) { .guideline__list dt { width: 6em; font-size: 0.8025em; } } .guideline__list dd { display: table-cell; margin: 0; padding: 10px; } .guideline__list dd p { margin: 0; font-size: 1.07em; line-height: 1.7em; } @media screen and (max-width: 1024px) { .guideline__list dd p { font-size: 0.9095em; } } @media screen and (max-width: 854px) { .guideline__list dd p { font-size: 0.856em; } } @media screen and (max-width: 640px) { .guideline__list dd p { font-size: 0.8025em; } } .guideline__toapply { margin: 0 auto; width: calc((322 / 1200) * 100%); } @media screen and (max-width: 640px) { .guideline__toapply { width: 50%; } } .guideline__toapply img { width: 100%; height: auto; transition: 0.3s; background: #eeeeee; } .guideline__toapply img:hover { transform: scale(1.1); transition: 0.3s; } /* 応募要項（モーダル） */ .modal { /* モーダルを開くボタン */ /* モーダル本体 + モーダル外側の背景 */ /* モーダル枠 */ /* モーダル内のコンテンツの指定 */ } .modal-open { text-decoration: none; border-bottom: 1px dotted #bd3a43; cursor: pointer; position: relative; } .modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0, 0, 0, 0.5); padding: 40px 20px; overflow: auto; opacity: 0; visibility: hidden; transition: 0.3s; box-sizing: border-box; z-index: 400; } .modal-container:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .modal-container.active { opacity: 1; visibility: visible; } .modal-body { position: relative; display: inline-block; vertical-align: middle; max-width: 500px; width: 90%; height: 90%; /* スクロールバーがある状態でも角丸にここから */ padding: 10px 0; background-color: #FFFFFF; border: 1px solid #333333; border-radius: 10px; box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6); /* スクロールバーがある状態でも角丸にここまで */ } .modal-close { /* モーダルを閉じるボタンの指定 */ position: absolute; display: flex; align-items: center; justify-content: center; top: -35px; right: -35px; width: 40px; height: 40px; font-size: 40px; color: #fff; cursor: pointer; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.6)); } .modal-content { background: #fff; text-align: left; padding: calc(1em - 10px) 1em; font-size: 0.8em; line-height: 1.5; /* 最初のh3は上を狭くするがその前にpがあればキャンセルここから */ /* 最初のh3は上を狭くするがその前にpがあればキャンセルここまで */ } .modal-content-wrap { /* 閉じるボタンを表示した状態でスクロールここから */ max-width: 500px; width: 100%; height: 100%; overflow: hidden scroll; /* 閉じるボタンを表示した状態でスクロールここまで */ } .modal-content h2 { margin-top: 0.5em; font-size: 1.1em; font-weight: bold; } .modal-content h3 { margin-top: 1em; font-size: 1em; font-weight: bold; } .modal-content h3:first-of-type { margin-top: 0.5em; } .modal-content p ~ h3:first-of-type { margin-top: 1em; } .modal-content p { margin: 0; } .modal-content ul { list-style-type: disc; margin: 0; padding-left: 0; } .modal-content li { margin-left: 2em; } /* お問い合わせ */ .inquiry { margin: 120px auto; padding: 0; } @media screen and (max-width: 640px) { .inquiry { margin: 60px auto; } } .inquiry__banner { margin: 0 auto; width: calc((403 / 1200) * 100%); } @media screen and (max-width: 640px) { .inquiry__banner { width: 70%; } } .inquiry__banner img { width: 100%; height: auto; } /* 共催バナー */ /* SNS */ .cosponsored, .sns { margin: 18px 0; padding: 0; text-align: center; } .cosponsored-logo img, .sns-logo img { margin: 0.5em; } .cosponsored { margin-bottom: 0; } @media screen and (max-width: 640px) { .cosponsored { margin-bottom: calc(0px - (40px / 2)); } } .cosponsored-logo img { max-width: calc(100% - (18px * 2)); height: auto; transition: 0.3s; } .cosponsored-logo img:hover { transform: scale(1.1); transition: 0.3s; } /* お問い合わせフォーム */ .form { margin: 40px auto; padding: 0; width: 100%; max-width: 950px; } .form_ttl { font-size: 1.30769em; text-align: center; margin-bottom: 1em; font-weight: bold; line-height: 1.6; border-bottom: 3px solid #bd3a43; } .form p { margin: 1em 0; padding: 0; font-size: 0.8em; line-height: 1.5em; } @media screen and (max-width: 1024px) { .form p { font-size: 0.76em; } } @media screen and (max-width: 854px) { .form p { font-size: 0.72em; } } @media screen and (max-width: 640px) { .form p { font-size: 0.68em; } } .form p a { text-decoration: none; border-bottom: 1px dotted #bd3a43; } .form dl { margin: 0; padding: 0.2em 0; display: table; width: 85%; table-layout: fixed; } @media screen and (max-width: 768px) { .form dl { padding: 0; display: block; width: 100%; } } .form dl::after { clear: both; } .form dl dt { display: table-cell; position: relative; margin: 0.4em 0; padding: 1em 0; width: 30%; vertical-align: top; font-size: 0.8em; font-weight: bold; } @media screen and (max-width: 768px) { .form dl dt { display: block; width: auto; } } @media screen and (max-width: 1024px) { .form dl dt { font-size: 0.76em; } } @media screen and (max-width: 854px) { .form dl dt { font-size: 0.72em; } } @media screen and (max-width: 640px) { .form dl dt { font-size: 0.68em; margin: 0.5em; } } .form dl dt:before { content: "■"; margin-right: 0.5em; margin-bottom: 0.5em; } .form dl dt .essential { position: absolute; left: calc(1em + 0.5em); top: 3.25em; margin: 0; padding: 0.2em 0.8em 0.2em; border: 1px solid #bd3a43; border-radius: 50px; color: #bd3a43; font-size: 80%; } @media screen and (max-width: 768px) { .form dl dt .essential { position: static; margin: 0 1em; padding: 0 0.8em; } } .form dl dd { margin: 0; padding: 0; display: table-cell; position: relative; } @media screen and (max-width: 768px) { .form dl dd { display: block; } } .form dl dd input, .form dl dd select, .form dl dd textarea { margin: 0.25em 0; padding: 0.2em; width: 100%; border: 1px solid #919191; font-size: 0.8em; box-sizing: border-box; } .form dl dd input[name="郵便番号"] { width: 8em; } @media screen and (max-width: 768px) { .form dl dd input[name="郵便番号"] { margin-left: 2em; } } .form dl dd .zipcode { position: absolute; top: calc(50% / 2); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); left: calc(-1em + -0.5em); } @media screen and (max-width: 768px) { .form dl dd .zipcode { left: 0; } } .form-button { margin: 2.5em 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: end; } @media screen and (max-width: 768px) { .form-button { margin: 2em 0; flex-direction: column; /*縦方向に並べる*/ align-items: center; } } .form-button button { margin: 0.5em 1em; padding: 0.9em 1.8em; color: #FFFFFF; font-size: 0.76923em; font-weight: bold; background: #bd3a43; border: 1px solid #bd3a43; cursor: pointer; transition: all 0.3s; } .form-button button:hover { color: #bd3a43; background: #f9e0cf; transition: all 0.3s; } @media screen and (max-width: 1024px) { .form-button button { font-size: 0.95em; } } @media screen and (max-width: 854px) { .form-button button { font-size: 0.9em; } } @media screen and (max-width: 640px) { .form-button button { font-size: 0.85em; } } /* フッター --------------------------------------------------------- */ /* フッター */ .footer { /* 外側 */ /* 本体 */ margin: 0 auto; padding: 18px 0 50px; text-align: center; /* ロゴ */ /* コピーライト */ } .footer__wrap { max-width: 1200px; margin: 20px auto 0; padding: 0; background: #d9d9d9; } @media screen and (max-width: 640px) { .footer { padding: 18px 0; } } .footer__logo { margin: 0 auto 5px; width: calc((362 / 1200) * 100%); } @media screen and (max-width: 640px) { .footer__logo { width: 40%; } } .footer__logo img { width: 100%; height: auto; } .footer__copyright { margin: 0; padding: 0; font-size: 0.75em; color: #333333; } @media screen and (max-width: 1024px) { .footer__copyright { font-size: 0.7125em; } } @media screen and (max-width: 854px) { .footer__copyright { font-size: 0.675em; } } @media screen and (max-width: 640px) { .footer__copyright { font-size: 0.56625em; } } /* トップへ戻る */ .pagetop { /* 本体 */ position: relative; } .pagetop__button { /* 【PC版】トップへ戻るボタン */ /* 【スマホ版】トップへ戻るボタン */ } @media screen and (min-width: 641px) { .pagetop__button { position: fixed; bottom: calc(60px + 20px); right: calc(60px + 20px); margin: 0 auto; padding: 0; display: none; z-index: 300; } .pagetop__button a { width: 60px; height: 60px; padding-top: 2.8em; transition: all 0.4s; color: transparent; box-shadow: 0 0 8px 6px rgba(255, 255, 255, 0.3); /* テキスト挿入による調整ここから */ height: calc(60px - 3em); padding-top: 3em; font-size: 0.8em; color: #FFFFFF; text-align: center; text-decoration: none; /* テキスト挿入による調整ここまで */ /*丸の描画ここから*/ background: #afafaf; border-radius: 50%; border: solid 3px #afafaf; position: absolute; top: 0; left: 0; /*丸の描画ここまで*/ /*矢印の描画ここから*/ /*矢印の描画ここまで*/ } .pagetop__button a:before { content: ''; width: 4px; height: 28px; position: absolute; top: 10px; left: 28px; background: #FFFFFF; border-radius: 9999px; } .pagetop__button a:after { content: ''; width: 24px; height: 24px; border: 0; border-top: solid 4px #FFFFFF; border-right: solid 4px #FFFFFF; border-radius: 4px; position: absolute; top: 14px; left: 16px; margin-top: -4px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); pointer-events: none; /*ポインターイベントから除外*/ } .pagetop__button a:hover { opacity: 0.8; } } @media screen and (max-width: 640px) { .pagetop__button { position: fixed; bottom: calc(50px + 10px); right: calc(50px + 10px); margin: 0 auto; padding: 0; display: none; z-index: 300; } .pagetop__button a { width: 50px; height: 50px; transition: all 0.4s; color: transparent; box-shadow: 0 0 8px 6px rgba(255, 255, 255, 0.3); /* テキスト挿入による調整ここから */ height: calc(50px - 2.8em); padding-top: 2.8em; font-size: 0.7em; color: #FFFFFF; text-align: center; text-decoration: none; /* テキスト挿入による調整ここまで */ /*丸の描画ここから*/ background: #afafaf; border-radius: 50%; border: solid 2px #afafaf; position: absolute; top: 0; left: 0; /*丸の描画ここまで*/ /*矢印の描画ここから*/ /*矢印の描画ここまで*/ } .pagetop__button a:before { content: ''; width: 3px; height: 24px; position: absolute; top: 7px; left: 24px; background: #FFFFFF; border-radius: 9999px; } .pagetop__button a:after { content: ''; width: 18px; height: 18px; border: 0; border-top: solid 3px #FFFFFF; border-right: solid 3px #FFFFFF; border-radius: 3px; position: absolute; top: 12px; left: 15px; margin-top: -4px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); pointer-events: none; /*ポインターイベントから除外*/ } }