@charset "UTF-8"; /* 最終更新：2022.12.23 */ /* layout-set.css ┃ ┣ CSS打ち消し ┣ 全体 ┣ gate-contents レスポンシブメモ ┃ ┣ gate-contents 全体 ┃ ┗フォントサイズセット Gate版 ┃ ┣ カラーセット Gate版メモ ┃ ┣ レイアウト用 margin 余白セット ┃ ┗ margin-top & bottom (上下に余白) ┃ ┗ margin-top (上に余白) ┃ ┗ margin-bottom (下に余白) ┃ ┗ margin-left & right (左右に余白) ┃ ┗ margin-right (右に余白) ┃ ┗ margin-left (左に余白) ┃ ┣ レイアウト用 padding 余白セット ┃ ┗ padding-top (上に余白) ┃ ┗ padding-bottom (下に余白) ┃ ┗ padding-topBottom (上下に余白) ┃ ┣ 文章と文章の間の余白用 margin・padding ┣ レイアウト用 背景色セット ┣ レイアウト用 文字の太さセット ┣ レイアウト用 フォントカラー セット ┣ レイアウト用 border セット ┣ m-XXX 一覧(タイトルやテキストなどの装飾) ┣ aリンク装飾 ┣ 「外部リンク」マーク ┃ ┣ レイアウト用 アイテムの配置 セット ┃ ┗ text-align セット ┃ ┗ float セット ┃ ┣ flexbox セット ┣ Grid セット ┣ 画像トリミング セット ┣ 「New」マーク・斜め - 保留 */ /*-------------------------------- CSS打ち消し --------------------------------*/ .cont-static-block h1 { font-size: initial; font-weight: initial; margin: initial; color: initial; } .cont-static-block h2 { margin: initial; padding-bottom: initial; border-bottom: initial; font-size: initial; } .cont-static-block h3 { margin: initial; font-size: initial; font-weight: initial; color: initial; display: initial; margin-block-start: initial; margin-block-end: initial; margin-inline-start: initial; margin-inline-end: initial; } .cont-static-block h4 { display: initial; margin-block-start: initial; margin-block-end: initial; margin-inline-start: initial; margin-inline-end: initial; font-weight: initial; font-size: initial; } .cont-static-block h1 span { font-size: initial; color: initial; } .cont-static-block p { font-size: initial; } .cont-static-block ul { display: initial; list-style-type: initial; margin-block-start: initial; margin-block-end: initial; margin-inline-start: initial; margin-inline-end: initial; padding-inline-start: initial; font-size: initial; font-weight: initial; } .cont-static-block ul li { margin: initial; font-size: initial; font-weight: initial; } .cont-static-block a { font-size: initial; font-weight: initial; } .cont-static-block a:hover { text-decoration: initial; } .cont-static-block img { width: 100%; height: auto; vertical-align: baseline; /* 画像下の謎の余白を消す */ } /*-------------------------------- 全体 --------------------------------*/ /* 一部のモバイル端末で使われる、 テキストの自動拡大アルゴリズムを制御 */ body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* 改行 */ br { display: block; content: ""; margin: 0; } .l-br { display: block; content: ""; margin: 8px auto; } /* コンテンツの左右の余白(左右各20pxずつ) */ .w-container { max-width: min(98%, 1120px); height: auto; margin: 0; } /*-------------------------------- gate-contents レスポンシブメモ --------------------------------*/ /* width = 901px以上(PC)の時 @media only screen and (min-width: 901px) {} */ /* width = 900px以下(SP)の時 @media only screen and (max-width: 900px) {} width = 600px以下(SP)の時 @media only screen and (max-width: 600px) {} */ /*-------------------------------- gate-contents 全体 --------------------------------*/ /*-------------------------------- フォントサイズセット Gate版 基本は10px font-size=110%の場合は11px コンテンツ内最小フォントサイズは10px~12px あとは適宜 --------------------------------*/ .gate-contents :is(h1, h2, h3, p, a, span, caption) { min-height: 0vw; line-height: 1.5; letter-spacing: 0.05em; } .gate-contents :is(h1, h2, h3) { font-weight: bolder; color: #2D2D2D; } /* p・a・span(sp:16px ~ 18px:PC) */ .gate-contents :is(p, a, span) { font-size: clamp(1rem, 0.9387rem + 0.2614vw, 1.125rem); font-weight: normal; color: #000000; } /* caption(sp:12px ~ 14px:PC) */ .gate-contents caption { font-size: clamp(0.75rem, 0.6887rem + 0.2614vw, 0.875rem); font-weight: normal; color: #686868; } /* h1(sp:20px ~ 30px:PC) */ .gate-contents h1 { font-size: clamp(1.25rem, 0.9436rem + 1.3072vw, 1.875rem); } /* h2(sp:19px ~ 22px:PC) */ .gate-contents h2 { font-size: clamp(1.1875rem, 1.1262rem + 0.2614vw, 1.3125rem); } /* h3(sp:17px ~ 20px:PC) */ .gate-contents h3 { font-size: clamp(1.0625rem, 0.9706rem + 0.3922vw, 1.25rem); } /*-------------------------------- カラーセット Gate版メモ --------------------------------*/ /* 背景色一覧 白 #ffffff 灰 #f4f4f4 文字色一覧__黒 本文 #000000 タイトルなど #2D2D2D キャプション #686868 Gateコンテンツ内使用色 メインカラー 青: #007EE2 アクセントカラー 赤: #FF4444 黄: #F9AA12 緑: #25A961 */ /*-------------------------------- レイアウト用 margin 余白セット　→要素の外 --------------------------------*/ /* margin-top & bottom (上下に余白) */ .margin-topBottom-08 { margin: 0.5rem 0; } .margin-topBottom-16 { margin: 1.6rem 0; } .margin-topBottom-32 { margin: 3.2rem 0; } .margin-topBottom-48 { margin: 4.8rem 0; } .margin-topBottom-50 { margin-top: 5.0rem; } .margin-topBottom-64 { margin: 6.4rem 0; } /* margin-top (上に余白) */ .margin-top-08 { margin-top: 0.5rem; } .margin-top-16 { margin-top: 1.6rem; } .margin-top-24 { margin-top: 2.4rem; } .margin-top-32 { margin-top: 3.2rem; } .margin-top-48 { margin-top: 4.8rem; } .margin-top-50 { margin-top: 5.0rem; } .margin-top-64 { margin-top: 6.4rem; } .margin-top-80 { margin-top: 8.0rem; } .margin-top-100 { margin-top: 10rem; } .margin-top-200 { margin-top: 20rem; } /* margin-bottom (下に余白) */ .margin-bottom-08 { margin-bottom: 0.5rem; } .margin-bottom-16 { margin-bottom: 1.6rem; } .margin-bottom-32 { margin-bottom: 3.2rem; } .margin-bottom-48 { margin-bottom: 4.8rem; } .margin-bottom-50 { margin-bottom: 5.0rem; } .margin-bottom-64 { margin-bottom: 6.4rem; } /* margin-left & right (左右に余白) */ .margin-leftRight-08 { margin: 0 0.5rem; } .margin-leftRight-16 { margin: 0 1.6rem; } .margin-leftRight-32 { margin: 0 3.2rem; } .margin-leftRight-48 { margin: 0 4.8rem; } .margin-leftRight-64 { margin: 0 6.4rem; } /* margin-left (左に余白) */ .margin-left-08 { margin-left: 0.5rem; } .margin-left-16 { margin-left: 1.6rem; } .margin-left-24 { margin-left: 2.4rem; } .margin-left-32 { margin-left: 3.2rem; } .margin-left-48 { margin-left: 4.8rem; } .margin-left-64 { margin-left: 6.4rem; } /* margin-right (右に余白) */ .margin-right-08 { margin-right: 0.5rem; } .margin-right-16 { margin-right: 1.6rem; } .margin-right-32 { margin-right: 3.2rem; } .margin-right-48 { margin-right: 4.8rem; } .margin-right-64 { margin-right: 6.4rem; } /*-------------------------------- レイアウト用 padding 余白セット　→要素の中 --------------------------------*/ /* padding-top (上に余白) */ .padding-top-08 { padding-top: 0.8rem; } .padding-top-16 { padding-top: 1.6rem; } .padding-top-20 { padding-top: 2.0rem; } .padding-top-24 { padding-top: 2.4rem; } .padding-top-32 { padding-top: 3.2rem; } .padding-top-50 { padding-top: 5.0rem; } /* padding-bottom (下に余白) */ .padding-bottom-16 { padding-bottom: 1.6rem; } .padding-bottom-32 { padding-bottom: 3.2rem; } .padding-bottom-50 { padding-bottom: 5.0rem; } /* padding-topBottom (上下に余白) */ .padding-topBottom-32 { padding: 3.2rem 0; } /*-------------------------------- 文章と文章の間の余白用　margin・padding --------------------------------*/ /* margin */ .margin-top__BetweenSentences-005 { margin-top: 0.5em; } .margin-top__BetweenSentences-01 { margin-top: 1em; } .margin-top__BetweenSentences-02 { padding-top: 2em; } .margin-top__BetweenSentences-03 { margin-top: 3em; } /* 推奨　文章間 */ .margin-top__BetweenSentences-05 { margin-top: 5em; } /* padding */ .padding-top__BetweenSentences-005 { padding-top: 0.5em; } .padding-top__BetweenSentences-01 { padding-top: 1em; } .padding-top__BetweenSentences-02 { padding-top: 2em; } .padding-top__BetweenSentences-03 { padding-top: 3em; } .padding-right__BetweenSentences-01{ padding-right: 1em; } /* 主流の　文章間(Gateではあまり使わない) */ .padding-top__BetweenSentences-05 { padding-top: 5em; } /*-------------------------------- レイアウト用 背景色セット --------------------------------*/ /* 背景色 */ /* 白〜灰 系 */ .bgColor__white { background-color: #ffffff; } /* 青 系 */ .bgColor__blue-93c1e7 { background-color: #93c1e7; } /*-------------------------------- レイアウト用 文字の太さセット --------------------------------*/ .m-font__bolder { font-weight: bolder; } /*-------------------------------- レイアウト用 フォントカラー セット --------------------------------*/ /* レイアウト用フォントカラー */ .l-fontColor__white { color: #ffffff; } /*-------------------------------- レイアウト用 border セット --------------------------------*/ .border-simple__a3a6a7 { border: 0.5px solid #a3a6a7; } /* premium-hour.html で使用 */ /*-------------------------------- m-XXX 一覧(タイトルやテキストなどの装飾) --------------------------------*/ /* 右三角 ::before */ .m-title__triangle-01__before::before { content: "▶︎"; display: inline-block; } /*-------------------------------- aリンク装飾 --------------------------------*/ /* 01: hoverの時下線が左から右へ動く(文字列1行のみ推奨) */ .a__itemTitle { position: relative; z-index: 1; } .a__itemTitle::after { content: ""; position: absolute; left: 0; bottom: -10px;/*テキストからの距離*/ width: 0%;/*初期状態では下線非表示*/ height: 2px;/*下線の高さ*/ background: #000000;/*下線の色*/ z-index: -1; transition: all 0.3s;/*アニメーション速度*/ } .is-a__borderMove01 { text-decoration: none; } .is-a__borderMove01:hover .a__itemTitle::after { width: 100%;/*hover時に表示*/ } /* 01: hoverの時下線が左から右へ動く(複数行ならこちら推奨) */ .is-hover__underline01 { padding-bottom: .25em; background: linear-gradient(#93c1e7, #93c1e7) 0 100%/0 2px no-repeat; transition: background .4s; text-decoration: none; } .is-hover__underline01.reverse { background-position: 100% 100%; } .is-hover__underline01:hover { background-size: 100% 2px; } /*-------------------------------- 「外部リンク」マーク --------------------------------*/ .exLink__icon{ position: relative; } .exLink__icon::before{ content: ""; position: absolute; top: 3px; right: -20px; display: block; width: 8px; height: 6px; border-top: 1px solid #999; border-left: 1px solid #999; } .exLink__icon::after{ content: ""; position: absolute; top: 6px; right: -25px; display: block; width: 10px; height: 8px; border: 1px solid #999; } /*-------------------------------- レイアウト用 アイテムの配置 セット --------------------------------*/ /* text-align セット */ /* 中央寄せ */ .l-text-align__center { text-align: center; } /* 左へ */ .l-text-align__left { text-align: left; } /* 右へ */ .l-text-align__right { text-align: right; } /* float セット */ /* 左へ */ .l-float__left { float: left; } /* 右へ */ .l-float__right { float: right; } /*-------------------------------- flexbox セット --------------------------------*/ /* アイテム横並び(中央寄せ) */ .flexbox__center { display: flex; justify-content: center; } /* アイテム横並び(左寄せ) */ .flexbox__left { display: flex; justify-content: flex-start; } /* アイテム横並び(右寄せ) */ .flexbox__right { display: flex; justify-content: end; } /* アイテム横並び(両端揃え) */ .flexbox__space-between { display: flex; justify-content: space-between; } .flexbox__space-around { display: flex; justify-content: space-around; align-items: center; } /* アイテム縦並び(中央寄せ) */ .flexbox__column-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* アイテム折り返し */ .flexbox__wrap { display: flex; flex-wrap: wrap; gap: 30px; } /* flexbox各アイテム(子要素) */ .flexbox-item__shrink1 { flex-shrink: 1; } .flexbox-item__shrink2 { flex-shrink: 2; } /*-------------------------------- Grid セット --------------------------------*/ /* Grid(1列) */ .grid_1columns { display: grid; grid-template-columns: repeat(1, 1fr); gap: 60px; } /* Grid(2列) */ .grid_2columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 50px; } /* Grid(3列) */ .grid_3columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 30px; } /* 真ん中 (アイテム垂直方向に) */ .align-self__center { align-self: center; } /*-------------------------------- 画像トリミング セット --------------------------------*/ /* 画像のトリミングについて */ /* 縮小して全体表示 */ .object-fit__contain { object-fit: contain; } /* 中央位置でトリミング */ .object-fit__cover { object-fit: cover; } /* 画像の表示位置 */ /* 画像の左上 */ .object-position__lefttop { object-position: top left; } /* 画像の右上 */ .object-position__righttop { object-position: top right; } /* 画像の左下 */ .object-position__leftbottom { object-position: bottom left; } /* 画像の右下 */ .object-position__rightbottom { object-position: bottom right; } /*-------------------------------- 「New」マーク・斜め　　保留 --------------------------------*/ /* newマークを配置する箱 */ /* .new{ position: relative; background-color: aliceblue; width: 100%; max-width: 384px; margin: 60px auto; aspect-ratio: 16/9; } */ /* newマーク */ /* 箱の中 */ /* .new::before{ content: "NEW!"; background-color: crimson; color: #ffffff; padding: 5px 25px; } */ /* 箱の外 */ /* .new::before{ position: absolute; content: "NEW"; top: -34px; left: 0; background-color: crimson; color: #ffffff; padding: 5px 25px; } */ /* 斜め */ /* .new::before { position: absolute; content: "NEW"; top: -7px; left: -20px; background-color: crimson; color: #ffffff; padding: 5px 25px; transform: rotate(-30deg); } */