@charset "utf-8"; /*================================ GENERAL STYLES ==================================*/ :root { --mainWidth: 805px; --tabletContentWidth: 580px; --mobileContentWidth: 300px; /* h2見出しのサイズおよびカラー */ --h2Blue: #014099; --h2MobileSize: 22px; --h2PcSize: 28px; --lightbulbColor: #497bdb; --charColor: #514949; --buttonColor: #eb5855; --buttonColorHover: #ca4745; --cardBackground: #f8fafb; --cardShadow: 2px 4px 15px 1px rgba(0, 0, 0, 0.25); --buttonShadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } /* 全体のフォントを指定 */ .top-container { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; } /* NOTE: 全体のうち、headerとfooterを除くメインコンテンツのみにNoto Sans JPを指定 headerとfooterは関連ページでも共通してるため除外 */ section { font-family: "Noto Sans JP", sans-serif; } /*================================ 部分 ==================================*/ /* NOTE:モバイルファーストで記述 ○スマートフォン(0px~589px) ○タブレット(590px~991px) ○PC(992px~) */ .top-container { max-width: var(--mainWidth); margin: 0 auto; /*縦列を中央寄せ*/ } /* ヘッダー(header)*/ /*================================ ヘッダー(header) ==================================*/ .header { width: 100%; margin: 10px 0px; } .page-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #eeeeee; } .page-header a img { width: 180px; } .page-header strong { font-size: 10px; line-height: 3.2; } @media screen and (min-width: 590px) { .page-header a img { width: 200px; } .page-header strong { font-size: 12px; line-height: 3.2; } } /* ナビゲーション(nav class="top-nav")*/ .top-nav { display: flex; justify-content: flex-end; margin-top: 8px; } .top-nav .navbar-text { font-size: 12px; margin-right: 6px; } .top-nav .navbar-text a { color: #428bca; text-decoration: none; } @media screen and (min-width: 590px) { .top-nav .navbar-text { font-size: 14px; } } /* アイキャッチ画像 (section class="eyecatch")*/ .eyecatch { width: 100%; margin: 25px 0px 20px 0px; } .eyecatch img { max-width: 100%; border-radius: 6px; } /*================================ サービス概要(section class="intro") ==================================*/ .d-inline-block { display: inline-block; } .intro { width: 100%; /* margin: 0 auto; */ } .intro h2 { font-size: var(--h2MobileSize); color: var(--h2Blue); text-align: center; margin: 10px 5px; } .intro p { font-size: 12px; line-height: 25px; text-align: center; padding: 0px 10px; color: #194190; } .intro p strong { font-weight: bold; } .intro small { display: block; margin-top: 5px; font-size: 12px; text-align: center; color: #194190; } .intro iframe { display: block; margin: 40px auto; width: 300px; height: 169px; } .intro .scroll a { color: var(--buttonColor); font-size: 12px; font-weight: bold; transition: 0.2s; } .intro .scroll a:hover { color: var(--buttonColorHover); } .intro .scroll::before { /* 両端の矢印をFontAwesomeで指定 */ color: var(--buttonColor); font-family: "Font Awesome 5 Free"; content: "\f063"; font-weight: 900; text-decoration: none; } .intro .scroll::after { /* 両端の矢印をFontAwesomeで指定 */ color: var(--buttonColor); font-family: "Font Awesome 5 Free"; content: "\f063"; font-weight: 900; text-decoration: none; } /* タブレット */ @media screen and (min-width: 590px) { .intro p { font-size: 14px; } .intro iframe { margin: 30px auto; width: 400px; height: 225px; } } /* PC */ @media screen and (min-width: 992px) { .intro h2 { font-size: var(--h2PcSize); } .intro p { font-size: 16px; } .intro small { font-size: 14px; } .intro iframe { width: 500px; height: 281px; } .intro .scroll a { font-size: 15px; s } } .blue-arrow { color: var(--lightbulbColor); font-size: 0.9em; transform: rotate(45deg); } /*================================ アプリリンク(section class="app") ==================================*/ .app { width: 100%; } .app .button-link { display: flex; justify-content: center; align-items: center; cursor: pointer; gap: 12px; width: var(--mobileContentWidth); height: 100px; margin: 0 auto; padding: 10px 15px; background: #eaf0fd; border-style: none; border-radius: 10px; box-shadow: var(--buttonShadow); transition: 0.2s; text-decoration: none; } .app .button-link:hover { background: #bdccec; } .app .button-link img { width: 55px; height: 55px; } .img-rounded { border-radius: 17px; } .app .container { display: flex; flex-direction: column; gap: 4px; } .app .container h4 { font-size: 11px; color: var(--charColor); } .app .container p { color: var(--h2Blue); font-size: 12px; font-weight: bold; text-align: left; } .app-qr-container { /* QRコード2つを横並びに配置 */ display: flex; justify-content: space-between; align-items: center; margin: 10px auto; max-width: var(--mobileContentWidth); gap: 15px; } .app-qr-container .button-qr { /* QRコードのボタンに特有のスタイルを上書き */ flex-direction: column; margin: 10px 0px; padding: 8px 10px; width: 170px; height: 170px; gap: 8px; color: var(--charColor); font-weight: bold; } .app-qr-container .button-qr img { transition: 0.2s; } .app-qr-container .button-qr:hover img { /* QRコードのカードリンクにHoverした際、同時に画像の不透明度を落とす */ opacity: 0.8; } .app-qr-container .button-qr img.qr-image-ios { width: 82px; height: 82px; } .app-qr-container .button-qr img.qr-image-android { width: 90px; height: 90px; } .app-qr-container .button-qr p { text-align: center; font-size: 10px; } .app .operation { margin: 30px auto; font-size: 14px; font-weight: bold; color: var(--charColor); text-align: center; } .app .operation a { color: var(--lightbulbColor); text-decoration: none; } /* レスポンシブ対応 */ /* タブレット */ @media screen and (min-width: 590px) { .app .button-link { width: 400px; height: 110px; gap: 25px; } .app .button-link img { width: 70px; height: 70px; } .app .container { gap: 6px; } .app .container h4 { font-size: 14px; color: var(--charColor); } .app .container p { color: var(--h2Blue); font-size: 14px; font-weight: bold; text-align: left; } .app-qr-container { /* 最大幅をアプリ詳細リンクのカードの横幅合わせる*/ max-width: 400px; margin: 20px auto; } .app-qr-container .button-qr { padding: 15px 15px; width: 190px; height: 180px; gap: 10px; } .app-qr-container .button-qr img.qr-image-ios { width: 85px; height: 85px; } .app-qr-container .button-qr img.qr-image-android { /* AndroidのQR画像が視差で小さく見えるため、一回り大きめに指定 */ width: 89px; height: 89px; } .app-qr-container .button-qr p { font-size: 11px; } .app .operation { font-size: 16px; } } /* PCサイズ */ @media screen and (min-width: 992px) { .app { margin-top: 60px; } .app .button-link { width: 580px; height: 145px; } .app .button-link img { width: 100px; height: 100px; } .app .container { gap: 12px; } .app .container h4 { font-size: 22px; } .app .container p { color: var(--h2Blue); font-size: 22px; font-weight: bold; text-align: left; } .app-qr-container { max-width: 580px; } .app-qr-container .button-qr { /* QRコードのボタンに特有のスタイルを上書き */ padding: 15px 15px; width: 270px; height: 180px; gap: 12px; } .app-qr-container .button-qr img.qr-image-ios { width: 100px; height: 100px; } .app-qr-container .button-qr img.qr-image-android { /* AndroidのQR画像が視差で小さく見えるため、一回り大きめに指定 */ width: 105px; height: 105px; } .app-qr-container .button-qr p { font-size: 12px; } .app .operation { font-size: 18px; } } /* レスポンシブ対応ここまで */ /*================================ 利用申込み欄(section class="apply") ==================================*/ .apply { width: 100%; } .apply-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; max-width: var(--mobileContentWidth); margin: 10px auto; padding: 40px 10px 30px 10px; border: 3px solid #f09090; } .apply-container h2 { margin-bottom: 10px; font-size: 13px; color: var(--h2Blue); } .apply-container p { padding: 0px 5px; color: var(--charColor); font-weight: bold; font-size: 11px; text-align: center; line-height: var(--cardMobileLineheight); } .apply-container .apply-button { display: flex; justify-content: center; align-items: center; padding: 10px 12px; background: var(--buttonColor); border: none; border-radius: 6px; box-shadow: var(--buttonShadow); cursor: pointer; transition: 0.1s; color: #FFF; } .apply-container .apply-button:hover { background: var(--buttonColorHover); } .apply-container .apply-button p { font-size: 16px; color: #ffff; } .apply-container a { color: var(--buttonColor); text-decoration: none; transition: 0.1s; } .apply-container a:hover { color: var(--buttonColorHover); } .apply-container .red-arrow { color: var(--buttonColor); transform: rotate(45deg); } /* タブレット */ @media screen and (min-width: 590px) { .apply-container { max-width: var(--tabletContentWidth); margin: 0 auto; padding: 40px 40px 40px 30px; } .apply-container h2 { font-size: 20px; } .apply-container p { font-size: 14px; line-height: var(--cardTabletLineheight); } } .footer { max-width: var(--mainWidth); margin-top: 30px; height: 30px; background: black; text-align: center; vertical-align: middle; } .footer small { vertical-align: middle; height: 100%; width: 100%; color: #ffff; }