@charset "utf-8"; /* CSS Document */ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- ページの全体構造 　　 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ html { font-size: 62.5% } /* 初期値16pxの62.5%でルートが10px */ body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-family: a-otf-ud-shin-go-pr6n, sans-serif; font-style: normal; font-weight: 300; font-family: heisei-maru-gothic-std, sans-serif; font-style: normal; font-weight: 400; background-color: #000000; margin: 0; padding: 0; font-size: 1.6rem; font-size: 16px; line-height: 2; color: #333333; background-position: center top; background-repeat: repeat; display: block; -webkit-text-size-adjust: 100%; /*-- iphoneの文字サイズ対策 --*/ } /*-- 絶対指定のpxと相対指定のem , pxはどの環境でも同じサイズとなりますが、emは環境により、サイズに違いが出ます --*/ @media only screen and (max-width : 768px ){ body { font-size: 1.5rem; font-size: 15px; line-height: 1.8; } body { font-family: m-plus-rounded-1c, sans-serif!important; font-style: normal!important; font-weight: 500!important; } } /*:: 全部のブラウザでデフォルトにするCSSコード / 全称セレクター*（アスタリスク） / ボックスサイズ対策 ::*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /*:: 全部のブラウザでデフォルトにするCSSコード / 全称セレクター*（アスタリスク） / iphoneの文字サイズ対策 ::*/ *, *::before, *::after { -webkit-text-size-adjust: 100%; } /*:: 高さAutoの認識をさせるためのBOX設定 / 親要素の付属でつけると高さを認識 ::*/ .clearfix:after { display: block; clear: both; content: ""; } /*:: iphoneの全画面表示の空白を調整 が必要 ::*/ .bottom-blank { padding-bottom: env(safe-area-inset-bottom); } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- iPhone対策で最初に設定すべきCSS --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ input, textarea, select, button { font-size: inherit; } /* フォームUIのデフォルトスタイルを除去（特にSafari） */ input[type="search"] { -webkit-appearance: none; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- HTML5 サポート - 新しいHTML5タグをdisplay:blockに設定。ブラウザーでタグが適切にレンダリングされます。 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ header, section, footer, aside, article, figure, figcaption, main, nav, summary, hgroup, details { display: block; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- 各設定の定義 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ ul, ol, dl { padding: 0; margin: 0; height: auto; position: relative; }　　　　　　　　　/*-- ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。 --*/ li { margin-left: 0px; margin-right: 0px; list-style-type: none; padding-top: 0px; } /*-- リストマーク消す --*/ li { list-style-type: none; background-image:none; padding-left:0; } /*-- リストマーク用の背景画像を削除 --*/ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; display: block; color: #333333;}　 /*-- 見出しタイトルマージンゼロ --*/ p { margin: 0; padding: 0; display: inline; }　　　　　　 /*-- テキスト文字のマージンなし、インライン --*/ a { color: #333333; text-decoration: none;} /*-- 未訪問リンク色 リンク下線なし --*/ a:link { color: #333333; text-decoration: none;} /*-- 未訪問リンク色 リンク下線なし --*/ a:visited { color: #333333; text-decoration: none;} /*-- 訪問済みリンク色 リンク下線なし --*/ a:hover, a:active, a:focus { text-decoration: none;} /*-- オンマウス・クリック中・疑似クラス-- */ a img { border: none; vertical-align:top;} /*-- 一部のブラウザーでイメージをリンクで囲んだイメージの周囲に表示される青いボーダーを削除 */ hr { height: 0; margin: 0; padding: 0; border: 0; } /*-- hrの無駄な余白を消す。クラス指定で使う */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* メディア要素をレスポンシブ対策　＆　画像の下の空白をなくす */ a.anchor{ display: block; padding-top: 90px; margin-top: -90px; } /*-- リンク先に余白を作る */ /*:::::::::::::::::::::*/ /*:: h2文字大きさの設定 ::*/ /*:::::::::::::::::::::*/ h2 { font-size: 50px; font-size: 5.0rem; line-height: 1.3; font-family: nitalago-ruika, sans-serif; font-weight: 100; font-style: normal; } /*-- h2のフィントサイズ --*/ @media only screen and (max-width : 1280px ){ h2 { font-size: 45px; font-size: 4.5rem; } } @media only screen and (max-width : 768px ){ h2 { font-size: 40px; font-size: 4.0rem; } } @media only screen and (max-width : 360px ){ h2 { font-size: 35px; font-size: 3.5rem; } } /*:::::::::::::::::::::*/ /*:: h3文字大きさの設定 ::*/ /*:::::::::::::::::::::*/ h3 { font-size: 30px; font-size: 3.0rem; line-height: 1.3; } /*-- h2のフィントサイズ --*/ @media only screen and (max-width : 768px ){ h3 { font-size: 25px; font-size: 2.5rem;} } @media only screen and (max-width : 568px ){ h3 { font-size: 23px; font-size: 2.3rem;} } /*:::::::::::::::::::::*/ /*:: h4文字大きさの設定 ::*/ /*:::::::::::::::::::::*/ h4 { font-size: 25px; font-size: 2.5rem; line-height: 1.3; } /*-- h2のフィントサイズ --*/ @media only screen and (max-width : 768px ){ h4 { font-size: 20px; font-size: 2.0rem;} } @media only screen and (max-width : 568px ){ h4 { font-size: 18px; font-size: 1.8rem;} } /*:::::::::::::::::::::*/ /*:: h5文字大きさの設定 ::*/ /*:::::::::::::::::::::*/ h5 { font-size: 22px; font-size: 2.2rem; line-height: 1.3; } /*-- h2のフィントサイズ --*/ @media only screen and (max-width : 768px ){ h5 { font-size: 18px; font-size: 1.8rem;} } @media only screen and (max-width : 568px ){ h5 { font-size: 16px; font-size: 1.6rem;} } /*:::::::::::::::::::::*/ /*:: サブタイトルの設定 ::*/ /*:::::::::::::::::::::*/ .subhead { font-size: 20px; font-size: 2.0rem; color: #666; text-align: center; font-weight: bold; } @media only screen and (max-width : 768px ){ .subhead { font-size: 18px; font-size: 1.8rem; } } @media only screen and (max-width : 568px ){ .subhead { font-size: 16px; font-size: 1.6rem; } } /*::::::::::::::::::*/ /*:: フォントの設定 ::*/ /*::::::::::::::::::*/ /*-- ADOBE Typekit scriptが必要 */ .f-fot-rodin { font-family: fot-rodin-pron, sans-serif; font-weight: 600; font-style: normal; } /*-- 中太角ゴシック --*/ .f-fot-seurat { font-family: fot-seurat-pron, sans-serif; font-weight: 600; font-style: normal; } /*-- 中太丸ゴシック --*/ .f-heisei-kaku { font-family: heisei-kaku-gothic-std, sans-serif; font-weight: 700; font-style: normal; } /*-- 大太角ゴシック --*/ .f-heisei-maku { font-family: heisei-maru-gothic-std, sans-serif; font-weight: 400; font-style: normal; } /*-- 大太角ゴシック --*/ .f-ruika { font-family: ruika, sans-serif; font-weight: 100; font-style: normal; } /*-- 大太角ゴシック --*/ .f-kozuka { font-family: kozuka-gothic-pro,sans-serif; font-weight: 900; font-style: normal; } /*-- 大太角ゴシック --*/ .f-kinto { font-family: kinto-sans, sans-serif; font-weight: 900; font-style: normal; } /*-- 大太角ゴシック --*/ .f-filson-soft { font-family: filson-soft, sans-serif; font-weight: 700; font-style: normal; } /*-- 太丸英数字 --*/ /*::::::::::::::::::::::*/ /*::見出しデザイン設定 ::*/ /*::::::::::::::::::::::*/ .shortLine { display: block; position: relative; color: #333; } .shortLine:before { content: ''; display: block; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: #2589d0; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-- スクリーン設定 --*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pc { display: none;} @media only screen and (max-width : 768px ){/*-- 中型タブレット迄 iPad --*/ .tab { display: none;} .pc { display: block;} } @media only screen and (max-width : 568px ){/*-- 中型スマホ専用 iPhone6.iPhone6 Plus --*/ .sp { display: none;} .tab { display: none;} .pc { display: block;} } /*----------------*/ /* ブレイクポイント */ /*----------------*/ @media only screen and (max-width : 320px ) {/*-- 小型スマホ専用 最小用 --*/} @media only screen and (max-width : 360px ) {/*-- 小型スマホ専用 iPhone5.Galaxy S4 --*/} @media only screen and (max-width : 428px ) {/*-- 通常スマホ専用 iPhone5.Galaxy S4 --*/} @media only screen and (max-width : 480px ) {/*-- 最大スマホ専用 折りたたみスマホ --*/} @media only screen and (max-width : 568px ) {/*-- パソコン専用 　 表示用 --*/} @media only screen and (max-width : 768px ) {/*-- パソコン専用 　 表示用 --*/} @media only screen and (max-width : 960px ) {/*-- パソコン専用 　 表示用 --*/} @media only screen and (max-width : 1280px ){/*-- パソコン専用 　 表示用 --*/} /*-- 各スマホ・ブラウザの解像度 ★古いスマホ ～320px (iphone5,galaxys3 等) ★小型スマホ ～360px (galaxys4 等) ★中型スマホ ～568px (iphone6,iphone6plus等) ★小型タブレット ～768px (ipad air2等 768pxまではタブレット表示) ★大型タブレット ～960px (769px以上は960px以上のパソコン表示) 自分なりに決定。 480px、768px、960px、1280px（2015年現在） iPhone 15 Pro Max：430px（実解像度 1290px / 3 = 論理幅430px） Galaxy S24 Ultra：412px （実解像度 1440px / 3.5 ≒ 411px） iPhone SE (第2〜3世代) 375px iPhone 14/15 390px〜430px Galaxy Sシリーズ 360px〜412px Pixel 8 Pro 412px Xperia系 360〜411px 折りたたみスマホ 320px〜480px --*/ span.nowrap { display: inline-block; text-decoration: inherit; white-space: nowrap; } /* かいぎょうしたくない文字を囲む */