/************************************************* style.css **************************************************/ /* =============================== 標準 ＞ 共通スタイル =============================== */ :where(:root) { font-family: Noto sans JP, Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif; font-style : unset; font-weight: 400; line-height: 1.5; text-align : start; word-break : initial; line-break : strict; hyphens : auto; -webkit-text-size-adjust : 100%; text-size-adjust : 100%; -webkit-tap-highlight-color: transparent; } :where(body) { min-block-size : 100svb; margin : unset; padding : unset; background : var(--color-background-default); color : var(--color-text-default); } :where(h1, h2, h3, h4, h5, h6) { margin-block : unset; font-size : unset; } ul { margin-block : unset; padding-inline-start : unset; } ul > li { list-style-type : ''; } *:focus-visible { /* style */ outline : 4px solid var(--border-focus); outline-offset: 2px; /* transition */ transition : outline 0.3s ease-in-out; } .visually-hidden { position: fixed !important; /* keep it on viewport */ top: 0px !important; left: 0px !important; /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels before allowing buttons to be activated. */ width: 4px !important; height: 4px !important; /* visually hide it with overflow and opacity */ opacity: 0 !important; overflow: hidden !important; /* remove any margin or padding */ border: none !important; margin: 0 !important; padding: 0 !important; /* ensure no other style sets display to none */ display: block !important; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after, ::backdrop { background-attachment : scroll !important; transition-delay : 0s !important; transition-duration : 1ms !important; animation-duration : 1ms !important; animation-delay : 0s !important; animation-iteration-count : 1 !important; scroll-behavior : auto !important; } } .global_wrap { display : flex; flex-direction : column; /*min-height : 100svh;*/ } .main_wrap { flex : 1; } /* =============================== 幅:高さ = leftValue : rightValue =============================== */ .hgWdApctDiv1 { aspect-ratio: 1 / 1; } .hgWdApctDiv2 { aspect-ratio: 2 / 1; } .hgWdApctDiv3 { aspect-ratio: 3 / 1; } .hgWdApctDiv4 { aspect-ratio: 4 / 1; } .hgWdApctDiv5 { aspect-ratio: 5 / 1; } .hgWdApctDiv6 { aspect-ratio: 6 / 1; } .hgWdApctDiv7 { aspect-ratio: 7 / 1; } .hgWdApctDiv8 { aspect-ratio: 8 / 1; } .hgWdApctDiv9 { aspect-ratio: 9 / 1; } .hgWdApctDiv10 { aspect-ratio: 9 / 1; } .hgWdApctDiv11 { aspect-ratio: 11 / 1; } .hgWdApctDiv12 { aspect-ratio: 12 / 1; } .hgWdApctDiv13 { aspect-ratio: 13 / 1; } .hgWdApctDiv14 { aspect-ratio: 14 / 1; } .hgWdApctDiv15 { aspect-ratio: 15 / 1; } .hgWdApctDiv16 { aspect-ratio: 16 / 1; } .hgWdPer20 { aspect-ratio: 100 / 20; } .hgWdPer25 { aspect-ratio: 100 / 25; } .hgWdPer20 { aspect-ratio: 100 / 30; } .hgWdPer35 { aspect-ratio: 100 / 35; } .hgWdPer40 { aspect-ratio: 100 / 40; } .hgWdPer45 { aspect-ratio: 100 / 45; } /* =============================== 標準 ＞ タグ（li） ＞ 区分（デフォルト） =============================== */ li.cardLink.strDecoBrdOnHv:focus, li.cardLink.strDecoBrdOnHv:focus-within, li.cardLink.strDecoBrdOnHv:hover { /* 内部を縮小せず外側を囲む */ /* 直下要素にaタグを配置して運用 */ /* クラス「hvChgImgParent」との塀用は禁止 */ box-shadow : 0 0 0 var(--border-width-default-when-hover) var(--color-border-underline-hover-01); } .semiOpaPerOnHv:focus, .semiOpaPerOnHv:hover { opacity : 0.5; } /* =============================== 標準 ＞ タグ（a） ＞ 区分（デフォルト） =============================== */ a { text-decoration : none; } a:visited { text-decoration : none; } /* =============================== 標準 ＞ タグ（a） ＞ 区分（見た目ボタン） =============================== */ a.btn-like { position : relative; display : inline-flex; justify-content : center; align-items : center; font-weight : bold; letter-spacing : 0.1em; color : var(--color-text-default); text-decoration : none; padding : 0.20em 1.2em 0.2em 0.7em; min-width : 130px; border : 1px solid var(--color-black); border-radius : 9999px; /* pill形状にする */ background-color : var(--color-white); transition : background-color 0.2s, color 0.2s; } a.btn-like.noArrow { /* 上,右,下,左*/ padding : 0.20em 1.2em; } a.btn-like:hover, a.btn-like:focus-within{ border-color : var(--border-button-hover); /* transition: background-color 0.2s, color 0.2s; */ } a.btn-like::after { content : ""; position : absolute; top : 50%; right : 1em; width : 0.5em; height : 0.5em; border-right : 2px solid var(--color-black); border-bottom : 2px solid var(--color-black); transform : translateY(-50%) rotate(-45deg); } a.btn-like.noArrow::after { display : none; } a.btn-like p { display : block; margin : 0 auto; padding-right : 0.25em; } /* =============================== 標準 ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） =============================== */ /* standard underLine on hover */ .stdULnOHv { position : relative; display : block; } .stdULnOHv:focus:after, .stdULnOHv:hover:after { content : ""; position : absolute; left : 0; bottom : 0; height : 3px; width : 100%; background : var(--color-border-underline-hover-01); } /* ========================================= 標準 ＞ common ＞ タグ（img） ＞ ホバー切替 ========================================= */ /* クラス「.cardLink.strDecoBrdOnHv」との塀用は禁止 */ .hvChgImgParent.focus img.showWhenNotFocused{ display : block; } .hvChgImgParent:hover img.showWhenNotFocused, .hvChgImgParent:focus img.showWhenNotFocused { display : none; } .hvChgImgParent img.showWhenFocused { display : none; } .hvChgImgParent:hover img.showWhenFocused, .hvChgImgParent:focus img.showWhenFocused { display : block; } /* ========================================= 標準 ＞ common ＞ h1.page-title ＞ 下線付 ========================================= */ h1.page-title.withUL { --heading--border-color-h1: var(--border-main); --heading--color-h1: var(--color-text-default); --heading--font-size-h1: var(--font-size-30); --heading--font-weight-h1: var(--fontweight-medium); --heading--letter-spacing-h1: var(--tracking-4); --heading--line-height-h1: 1.5; position : relative; display : block; width : 100%; margin-block-end : var(--space-32, 32px); padding-inline : var(--space-8, 8px); color : var(--heading--color-h1); font-size : var(--heading--font-size-h1); font-weight : var(--heading--font-weight-h1); line-height : var(--heading--line-height-h1); letter-spacing : var(--heading--letter-spacing-h1); } h1.page-title.withUL::after { content : ''; position : absolute; inset-block-end : calc(-1 * var(--space-32, 32px)); inset-inline-start : 0; width : 100%; height : 2px; background : var(--heading--border-color-h1); } /* ========================================= 標準 ＞ common ＞ form系 ========================================= */ /* ========================================= 標準 ＞ common ＞ form系 ＞ レイアウト ========================================= */ /* search type Label holder / search other visible input elements Holder*/ form .searchVUIHolder, form .searchTypeLabelHolder, form .searchOVIEHolder { display : flex; justify-content : center; align-items : center; } form .searchVUIHolder { flex-direction : row; } form .searchVUIHolder .searchTypeLabelHolder label {} form .searchVUIHolder .searchTypeLabelHolder .searchTypeTitle { min-width : 8em; } form .searchVUIHolder .searchOVIEHolder input[type="submit"] { margin : 0; } @media (width < 573px) { form .searchVUIHolder { width : 100%; flex-direction : column; flex-wrap : wrap; } form .searchTypeLabelHolder, form .searchOVIEHolder { width : 100%; } form .searchTypeLabelHolder { justify-content : flex-start; } form .searchOVIEHolder { justify-content : flex-end; } } /* ========================================= 標準 ＞ common ＞ form系 ＞ input ========================================= */ form input[type="submit"] { display : flex; justify-content : center; align-items : center; margin : 0; border-radius : 0; background-color : var(--color-background-form-button-default); border : var(--border-width-form-button-default) solid var(--color-border-button-default); -webkit-appearance : none; margin : 0 auto; padding : 0.5em 1em; } form input[type="text"], form input[type="email"], form input[type="tel"] { display : block; background-color : var(--color-background-form-input-default); border : var(--border-width-form-input-default) solid var(--color-border-form-input-default); -webkit-appearance : none; } form input::placeholder { color : var(--color-text-form-input-placeholder-default); padding-left : 1em; } /* ================================================================================== 標準 ＞ common ＞ form系 ＞ input ＞ 「likeSearchBtnInSearchKeyword」 ================================================================================== */ /* ----likeSearchBtnInSearchKeyword */ .likeSearchBtnInSearchKeyword { --frmUI-likeSBInSK-bgColor : var(--color-background-form-input-default, #ffffff); --frmUI-likeSBInSK-brdColor : var(--color-border-form-input-default, #000000); --frmUI-likeSBInSK-brdColor-whnFcs : var(--color-border-button-hover-01, #ff0000); --frmUI-likeSBInSK-btn-bgColor : var(--color-background-gene-button-default, #cccccc); --frmUI-likeSBInSK-btn-fntColor : var(--color-text-form-input-inputed-default, #000000); display : flex; align-items : stretch; min-width : 130px; max-width : 100%; padding : 0; width : 100%; border : 1px solid var(--frmUI-likeSBInSK-brdColor); background-color : var(--frmUI-likeSBInSK-bgColor); } .likeSearchBtnInSearchKeyword:focus-within { outline : 1px solid var(--frmUI-likeSBInSK-brdColor-whnFcs); } .likeSearchBtnInSearchKeyword input[type=text] { display : block; width : calc(100% - 4em); height : 3em; border : none; background-color : var(--frmUI-likeSBInSK-bgColor); color : var(--frmUI-likeSBInSK-btn-fntColor); } .likeSearchBtnInSearchKeyword input[type=text]:focus, .likeSearchBtnInSearchKeyword input[type=text]:focus-visible, .likeSearchBtnInSearchKeyword input[type=submit]:focus, .likeSearchBtnInSearchKeyword input[type=submit]:focus-visible, .likeSearchBtnInSearchKeyword button:focus, .likeSearchBtnInSearchKeyword button:focus-visible { border : none; outline : 0; } .likeSearchBtnInSearchKeyword button, .likeSearchBtnInSearchKeyword input[type=submit] { width : 4em; background-color : var(--frmUI-likeSBInSK-btn-bgColor); margin-right : 3px; color : var(--frmUI-likeSBInSK-btn-fntColor) } .likeSearchBtnInSearchKeyword button img { display : block; margin : 0 auto; } form .searchVUIHolder .searchOVIEHolder .likeSearchBtnInSearchKeyword input[type="submit"], form .searchVUIHolder .searchOVIEHolder.likeSearchBtnInSearchKeyword input[type="submit"] { margin-right : 3px; } /* likeSearchBtnInSearchKeyword---- */ /* =============================== 標準 ＞ common ＞ そのほか =============================== */ .positionRuler { /* 用途：子要素に「position:absolute」を付与して、指定の位置に配置しやすくする */ position : relative; width : 100%; height : 100%; } .show3PointswhenOverFlow { display : -webkit-box; -webkit-line-clamp : 3; /* 表示する最大行数 */ -webkit-box-orient : vertical; /* 縦方向にボックスを設定 */ overflow : hidden; /* はみ出た部分を非表示 */ } /* =============================== 標準 ＞ common ＞ そのほか（メモ） =============================== */ /* Flexbox（ = display: flex） justify-content : space-between; 子要素の水平方向配置＞子要素の間に均等なスペースを設定する 先頭と末尾の子要素は端に寄せられる */ /* =============================== 標準 ＞ common(media) =============================== */ .showWhenOnlySp{ display:none; } .hideWhenOnlySp{ display:block; } /* -----画面幅が1441px以上の場合 */ @media (min-width: 1441px) { } /* 画面幅が1441px以上の場合----- */ /* -----画面幅が1080px未満の場合 */ @media (width < 1080px) { } /* 画面幅が1080px未満の場合----- */ /* -----印刷用と音声読上用のメディアを除き、画面幅が800px以下の場合 */ @media screen and (max-width: 800px) { } /* 印刷用と音声読上用のメディアを除き、画面幅が800px以下の場合----- */ /* -----画面幅が768px未満の場合 */ @media (width < 768px) { } /* 画面幅が768px未満の場合----- */ /* -----画面幅が576px未満の場合 */ @media (width < 576px) { .showWhenOnlySp{ display:block; } .hideWhenOnlySp{ display:none; } } /* 画面幅が576px未満の場合----- */ /* =============================== 標準 ＞ common ＞ 汎用要素内レイアウト class name prefix term gLayout:ground Layout gL :ground Layout =============================== */ /* ============================================================== 標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox ============================================================== */ .gene__hndr,.gene_handler { /* flexBox子要素候補 */ } .gene__container {} .gene__itemsHolder {　/* flexBox親要素候補 */ } .gene__itemsHolder .wdthfull { width : 100%; } .flexSpcBtwBox, .gLayoutflBx, .gLFlBx, .flBxGene{ /* 用途： 全クラス共通 内部子要素を横並,等間隔 個別（.gLayoutflBx .gLFlBx） レスポンシブルな全体的レイアウト配置をする場合 */ position : relative; display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; } .flexSpcBtwBox.putFromLeft, .gLayoutflBx.putFromLeft, .gLFlBx.putFromLeft, .flBxGene.putFromLeft { justify-content: flex-start; } .flexSpcBtwBox.putFromRight, .gLayoutflBx.putFromRight, .gLFlBx.putFromRight, .flBxGene.putFromRight { justify-content: flex-end; } .flexSpcBtwBox.col1Fix, .flexSpcBtwBox.c1Fx, .gLayoutflBx.col1Fix , .flexSpcBtwBox.c1Fx, .gLFlBx.col1Fix , .gLFlBx.c1Fx, .flBxGene.col1Fix , .flBxGene.c1Fx { /* 主な用途：SPの時に一列化する */ flex-direction: column; } .flexSpcBtwBox.insLytAlIc, .flexSpcBtwBox.insLytAlIc, .gLayoutflBx.insAlIc , .flexSpcBtwBox.insLytAlIc, .gLFlBx.insLytAlIc , .gLFlBx.insLytAlIc, .flBxGene.insLytAlIc , .flBxGene.insLytAlIc { /* 主な用途：子要素を上端下端間び中央に配意する */ align-items: center; } .flexSpcBtwBox.putCenterLR, .gLayoutflBx.putCenterLR , .gLFlBx.putCenterLR , .flBxGene.putCenterLR { justify-content: center; flex-wrap: wrap; } /* single row to multir row */ .sngleRowToMltRw { } @media (width < 576px) { .gLayoutflBx,.gLFlBx { flex-direction: column; } } .inFlex { width : 100%;} .inFlex.wdth2div{ width : 50%; } @media (width < 576px) { .gLayoutflBx .inFlex,.gLFlBx .inFlex{ width : 100%; } } /* ============================================================== 標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox ＞ （幅広のメディアだけ） ============================================================== */ /* 幅広のメディアだけflexとして振る舞う */ .flBxWhnWM { display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; } @media (width < 576px) { .flBxWhnWM { display : block; } } /* ============================================================== 標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox ＞ （幅狭のメディアだけ） ============================================================== */ /* 幅狭のメディアだけflexとして振る舞う */ .flBxWhnNM { display : block; } @media (width < 576px) { .flBxWhnNM { display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; width : 100%; } } /* =================================================================== 標準 ＞ common ＞ 汎用要素内レイアウト ＞ teoEdgeLayout ＞ horizotal =================================================================== /* /* [[t]he [e]xtreme [o]uter edge][perPart]:最も外縁部 */ /* [in the [h]o[r]i[z]ontal direction]:水平方向での */ /* .hzrTeoEdgeContainer */ .hzrTeoEdgeNoLimit { /* 背景色だけ共通にする場合は、 このクラスを[クラス(hzrO1EdgeLimiter)]の直上要素に設定する */ } .hzrTeoEdgeLimiter { /* 背景色だけ共通にする場合は、 このクラスを[クラス(hzrO1EdgeLimiter)]の直上要素に設定する */ /* max-width : var(--container-content);*/ /* 1400px; */ max-width : 1400px; /* ■要・変数化■ */ margin : 0 auto; } .hzrO1EdgeLimiter { /* 背景色だけ共通にする場合は、 このクラスを[クラス(hzrTeoEdgeNoLimit)または(hzrTeoEdgeLimiter)]の直下要素に設定する */ /* max-width : var(--container-content);*/ /* 1400px; */ max-width : 1400px; /* ■要・変数化■ */ margin : 0 auto; } .content { /* max-width : var(--container-content); */ width: 100% ; /* margin-inline : auto; padding-inline: var(--space-16); */ } /* =============================== 標準 ＞ pageProperHolder =============================== */ .pageProperHolder {} .pageProperHolder .hzrTeoEdgeNoLimit {} .pageProperHolder .hzrTeoEdgeNoLimit .hzrO1EdgeLimiter {} /* =============================== 標準 ＞ section =============================== */ section, .sectionLikeCmpnt { margin-top : var(--sps-glbl-layout-sctn-mrgn-top); margin-bottom : var(--sps-glbl-layout-sctn-mrgn-bttm); padding-top : var(--sps-glbl-layout-sctn-padding-top); padding-bottom : var(--sps-glbl-layout-sctn-padding-bttm); } /* =============================== 標準 ＞ common(Header&Footer) =============================== */ .siteHFCommonWidthFull, .siteHeaderRow { display : block; width : 100%; height : auto; background: var(--color--bg-subtle); } /*********************** 標準 ＞ Header ************************/ :where(:root) { /* 「apex（頂点）」＞「aLT：左上（頂点）」,「aRT：右上（頂点）」 */ /* 「nWL」：no-width-Limit */ /* 「cZALT」：contents-Zone-aLT /* 「sH」：Site-Header */ --sH-cZALT-from-nWL-sh-ALT : calc((var(--header-width) - var(--headerCZ-width)) / 2); } .site-header { inset-block-start : 0; inset-inline : 0; width : 100svw; /* style */ background : var(--color-background-header-default); box-shadow : var(--elevation-01); } .site-header.topFixed { position : fixed; width : 100svw; z-index : var(--stack-head); /* z-index : calc(Infinity); */ } .site-header__container { /* layout */ display : flex; justify-content : space-between; align-items : center; width : 100%; height : auto; margin-inline : auto; padding-inline : var(--space-16, 16px); /* style */ } .site-header .utility-nav__list { /* 用途：上部（ヘッダー）のコンテンツをPC等幅広画面で中央寄せする */ position : relative; display : flex; justify-content : space-between; align-items : center; } .site-header .utility-nav__list .utility-nav__item {} .site-header__title { /* layout */ display : grid; grid-template-columns : auto 1fr; column-gap : var(--space-12, 12px); width : fit-content; height : fit-content; } .site-header__title a { text-decoration : none; color : var(--color-text-default); } .site-header__title-logo { /* layout */ display : grid; place-items : center; width : var(--branding-logo-size); height : auto; } .site-header__title-logo img { /* layout */ display : block; width : 100%; height : auto; } .site-header__title-logo:hover img, .site-header__title-logo:focus img, .site-header__title-logo:focus-within img { /* layout */ } /* =============================== 標準 ＞ ハンバーガーメニュー =============================== */ /* sHDsgnBs : siteHeaderDesignBase sor : sizeObservedResult rsgnPrMd : repeatableAssignPerMedia(Width) mediaごとにCSSで、代入設定される値が変更される dmTyp-(n) : --abstract-desing-model-type-(n) htnVar : hardToNameVariable(名づけるのが困難な変数) ハンバーガーメニューが小さくなりすぎると困る、 ＝＞必然、ハンバーガーメニューには最小サイズが暗黙的に設定される、 ＝＞必然、ハンバーガーメニューの最小サイズと、サイトヘッダーのheight、をもとに、位置が設定される、 ＝＞必然、ハンバーガーメニューは、SPではサイトヘッダーの上下位置は「中央」に配置される傾向になる、 ＝＞必然、ハンバーガーメニューは左よりの位置に配置される、 ＝＞必然、sHDsgnBsRct001の幅はサイトヘッダーのheightが最小になったとき、最小になる、 ＝＞必然、sHDsgnBsRct001の幅は固定的な値になりやすい、 */ :where(:root) { /* 自動計算式 ＞ 定型（１） */ --sHDsgnBsRct002-sorW : var(--headerCZ-width); --sHDsgnBsRct002-sorH : var(--headerCZ-height); --sHDsgnBsRct003-sorW : calc((var(--header-width) - var(--sHDsgnBsRct002-sorW)) / 2); --sHDsgnBsRct003-sorH : var(--sHDsgnBsRct002-sorH); --sHDsgnBsRct002-aRT-fxdLeft : calc(var(--sHDsgnBsRct003-sorW) + var(--sHDsgnBsRct002-sorW)); /* 自動計算式 ＞ 暫定代入 */ /* 再代入による調整用変数 ＞ ハンバーガーメニューのサイズ */ --sHDsgnBsRct000-w-rsgnPrDmTy : 50; --sHDsgnBsRct000-h-rsgnPrDmTy : 50; /* 再代入による調整用変数 ＞ ハンバーガーメニューのスクリーン右上からの位置制御用 */ --sHDsgnBsRct001-w-rsgnPrDmTy : 25; --sHDsgnBsRct001-h-rsgnPrDmTy : 25; /* 再代入による調整用変数 ＞ ハンバーガーメニューの内部デザイン調整用 */ /* 基本的に変更しないほうがよい */ --hbgMn-cmnPadding-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 0.1); --hbgMn-hrz3LnWdth-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 0.6); --hbgMn-hrz3LnHgt-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 0.04); --hbgMn-fontSize-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 0.2); --hbgMn-htnVar001-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 0.08); /* 自動計算式 ＞ 定型（２） */ --sHDsgnBsRct000-aRT-fxdLeft : calc(var(--sHDsgnBsRct002-aRT-fxdLeft) - var(--sHDsgnBsRct001-w-rsgnPrDmTy)); /* 以下の変数名（の値）を実際にハンバーガーメニューのCSSに利用する */ --sHDsgnBsRct000-aLT-fxdLeft : calc(var(--sHDsgnBsRct000-aRT-fxdLeft) - var(--sHDsgnBsRct000-w-rsgnPrDmTy)); --sHDsgnBsRct000-aLT-fxdTop : var(--sHDsgnBsRct001-h-rsgnPrDmTy); --sHDsgnBsRct000-width : var(--sHDsgnBsRct000-w-rsgnPrDmTy); --sHDsgnBsRct000-height : var(--sHDsgnBsRct000-h-rsgnPrDmTy); --hbgMn-cmnPadding : var(--hbgMn-cmnPadding-rsgnPrDmTy); --hbgMn-hrz3LnWdth : var(--hbgMn-hrz3LnWdth-rsgnPrDmTy); --hbgMn-hrz3LnHgt : var(--hbgMn-hrz3LnHgt-rsgnPrDmTy); --hbgMn-htnVar001 : var(--hbgMn-htnVar001-rsgnPrDmTy); --hbgMn-fontSize : var(--hbgMn-fontSize-rsgnPrDmTy); /* 以上の変数名（の値）を実際にハンバーガーメニューのCSSに利用する */ } .hbgMenu__handler { display : block; position : fixed; width : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 1px); height : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 1px); left : calc(var(--sHDsgnBsRct000-aLT-fxdLeft) * 1px); top : calc(var(--sHDsgnBsRct000-aLT-fxdTop) * 1px); z-index : calc(infinity); } .hbgMenu { --toggle-color : #000; --toggle-background-default : #000; display : grid; grid-template-rows : 1fr auto; place-items : center; row-gap : calc(var(--hbgMn-cmnPadding) * 1px); width : 100%; aspect-ratio : 1; padding : calc(var(--hbgMn-cmnPadding) * 1px); z-index : 9999; background-color : #fff; border : 1px solid #000; outline : calc(var(--hbgMn-htnVar001) * 1px) solid transparent; color : #000; transition : background-color 0.3s ease-in-out, outline-color 0.3s ease-in-out; cursor : pointer; } .hbgMenu-icon { position : relative; display : inline-grid; place-items : center; width : calc(var(--hbgMn-hrz3LnWdth) * 1px); background : transparent; border : none; transition : all 0.3s ease-in-out; } .hbgMenu-icon span { width : calc(var(--hbgMn-hrz3LnWdth) * 1px); left : 0; } .hbgMenu-text { place-self : center; font-size : calc(var(--hbgMn-fontSize) * 1px); line-height : 1; text-transform : capitalize; transition : opacity 0.3s ease-in-out; opacity : 1; } .hbgMenu-icon::before, .hbgMenu-icon::after, .hbgMenu-icon span { content : ''; position : absolute; grid-area : 1 / 1; inset-block-start : 0; inset-inline-start : 0; width : calc(var(--hbgMn-hrz3LnWdth) * 1px); height : calc(var(--hbgMn-hrz3LnHgt) * 1px); background-color : #000; transition : all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transform-origin : center; } .hbgMenu-icon::before { transform : translateY(calc(calc(var(--hbgMn-htnVar001) * 1px) * -2)); } .hbgMenu-icon::after { transform : translateY(calc(calc(var(--hbgMn-htnVar001) * 1px) * 2)); } .hbgMenu[aria-expanded="true"] .hbgMenu-icon::before { transform : translateY(0) rotate(135deg); } .hbgMenu[aria-expanded="true"] .hbgMenu-icon span { width : 0; left : 50%; opacity : 0; } .hbgMenu[aria-expanded="true"] .hbgMenu-icon::after { transform : translateY(0) rotate(-135deg); } /* ============================================================ 標準 ＞ Drawer（機能） ＞ drawer-overlay ============================================================ */ /* PC版ではハンバーガーメニュー押下時に暗くなる部分 */ /* body直下要素 */ .drawer-overlay { position : fixed; inset : 0; top : var(--header-height); background-color : rgba(0, 0, 0, 0.5); z-index : calc(var(--stack-head) - 2); opacity : 0; visibility : hidden; transition : opacity 0.3s, visibility 0.3s; } .drawer-overlay.is-open { opacity : 1; visibility : visible; } /* ==================================== 標準 ＞ Drawer（機能）＞ Drawer ==================================== */ /* body直下ではなく、bodyからみて孫要素に配置 */ /* 親要素のクラスは「.wrap.global_wrap」を前提とする */ /* 幅は左上と右上の頂点座標で調整するのを原則とする */ :where(:root) { /* drawer screen ＞ 頂点（右上） ＞ 位置（左） */ /* ハンバーガーメニューの頂点（左上）を起点に計算 */ --iSH-drwrScrn-aRT-squra-padding-default : var(--sHDsgnBsRct001-w-rsgnPrDmTy); --iSH-drwrScrn-aRT-square-padding-using : 30; /* デフォルトだと広すぎるので調整 */ --iSH-drwrScrn-aRT-left-from-sH-cZALT-default : calc(var(--sHDsgnBsRct000-aLT-fxdLeft) + var(--sHDsgnBsRct000-width) + var(--iSH-drwrScrn-aRT-square-padding-using)); --iSH-drwrScrn-aRT-left-from-sH-cZALT-using : var(--iSH-drwrScrn-aRT-left-from-sH-cZALT-default); /* drawer screen ＞ 頂点（右上） ＞ 位置（上） */ --iSH-drwrSrcn-aLT-top-fixed-default : calc(var(--sHDsgnBsRct000-aLT-fxdTop) - var(--iSH-drwrScrn-aRT-square-padding-using)); --iSH-drwrSrcn-aLT-top-fixed-using : var(--iSH-drwrSrcn-aLT-top-fixed-default); /* drawer screen ＞ 頂点（左上） ＞ 位置（左） */ --iSH-drwrSrcn-aLT-left-fixed-default : calc(var(--sHDsgnBsRct003-sorW) + (var(--sh-logo-left-default) * 2) + var(--sh-logo-width)); --iSH-drwrSrcn-aLT-left-fixed-using : var(--iSH-drwrSrcn-aLT-left-fixed-default); /* drawer screen ＞ 幅 */ --iSH-drwrScrn-opened-width-default : calc(var(--iSH-drwrScrn-aRT-left-from-sH-cZALT-using) - var(--iSH-drwrSrcn-aLT-left-fixed-using)); --iSH-drwrScrn-opened-width-using : var(--iSH-drwrScrn-opened-width-default); } .drawer { --drawer-nav-text : 22px; --drawer-nav-text-mobile : 22px; --drawer-nav-font-weight : var(--fontweight-medium); --drawer-nav-letter-spacing : var(--tracking-10); display : block; position : fixed; /* JS監視項目「（クラス「site-header」の高さ）」を代入する変数（--header-height）をもとに配置 */ inset-block-start : var(--header-height); inset-inline-start : 0; z-index : calc(var(--stack-head) - 1); width : 100svw; height : auto; padding-block : var(--space-16, 16px); background : var(--color-background-drawer); border-bottom : 2px solid var(--border-subtler); opacity : 0; visibility : hidden; } .drwrScrn__handler { display : none; } .drwrScrn__handler.is-open { display : block; opacity : 1; visibility : visible; } .drwrScrn__handler.is-open { position : fixed; width : calc(var(--iSH-drwrScrn-opened-width-using) * 1px); top : calc(var(--iSH-drwrSrcn-aLT-top-fixed-using) * 1px); /* タイトルロゴと重ならないように */ left : calc(var(--iSH-drwrSrcn-aLT-left-fixed-using) * 1px); background-color : var(--color-neutral-0); border : solid 2px var(--color-neutral-100); } /* drawer(本体) */ .inSiteHeader_drawerHolder .drawer.is-open, .iSH_drawerHolder .drawer.is-open{ /* headerタグ内部に定義されるタイプが開かれている状態 */ --iSH-drwr-padding-horizon-using : var(--iSH-drwr-padding-horizon-default); inset-block-start : 0; display : block; position : relative; width : 100%; padding-left : calc(var(--iSH-drwr-padding-horizon-using) * 1px); padding-right : calc(var(--iSH-drwr-padding-horizon-using) * 1px); /* border : solid 2px var(--color-neutral-100); */ } .drwrScrn___container { /* layout */ display : flex; flex-direction : column; justify-content : space-between; width : 100%; max-width : var(--container-content); margin-inline : auto; padding-inline : var(--space-16, 16px); } .drwrScrn__itemsHolder { /* layout */ /* --drwr-scrn-padding-top : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) + var(--iSH-drwrScrn-aRT-square-padding-using)); */ --drwr-scrn-padding-top : var(--sHDsgnBsRct000-h-rsgnPrDmTy); --drwr-scrn-padding-left : var(--sHDsgnBsRct000-w-rsgnPrDmTy); --drwr-scrn-padding-right : var(--drwr-scrn-padding-left); --drwr-scrn-padding-bottom : var(--drwr-scrn-padding-left); padding-top : calc(var(--drwr-scrn-padding-top) * 1px); padding-left : calc(var(--drwr-scrn-padding-left) * 1px); padding-right : calc(var(--drwr-scrn-padding-right) * 1px); padding-bottom : calc(var(--drwr-scrn-padding-bottom) * 1px); } .drawer-nav { /* layout */ display : flex; width : 100%; height : auto; } .drawer-nav__list { /* layout */ display : flex; width : 100%; height : auto; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; } .drawer-nav__item { /* layout */ position : relative; width : 50%; height : auto; padding-inline-end : calc(var(--space-8, 8px) * 2 + 1px); padding-top : 1em; padding-bottom : 1em; } .drawer-nav__link { /* layout */ position : relative; display : grid; grid-template-columns : 1fr; grid-auto-flow : row; place-items : center; gap : var(--space-6, 6px); width : 100%; padding-block : var(--space-12, 12px); padding-inline : var(--space-24, 24px); gap : var(--space-6, 6px); /* style */ border : 1px solid transparent; border-radius : var(--rounded-8, 8px); text-decoration : none; /* transition */ transition : all 0.3s ease; } .drawer-nav__link:hover, .drawer-nav__link:focus, .drawer-nav__link:focus-within { /* style */ background-color : var(--color-background-subtle); border-color : var(--border-subtle); } .drawer-nav__icon-wrap { /* layout */ display: grid; place-items: center; max-width: 95px; aspect-ratio: 1; /* style */ background: var(--color-background-default); border-radius: var(--rounded-full); border: 1px solid var(--border-subtle); } .drawer-nav__icon-wrap img { /* layout */ display: block; width: 100%; height: auto; } .drawer-nav__label { /* layout */ display: inline-grid; place-items: center; /* style */ color: var(--color-text-default); /* typography */ font-size: var(--font-size-28); font-weight: var(--fontweight-medium); line-height: 1.5; letter-spacing: var(--tracking-5); text-align: center; } .drwrScrn__itemsHolder .flBxGene.putFromRight { padding-top : 1em; padding-right : 1em; } /* media */ @media (width < 992px) { :where(:root) { /* drawerScreen ＞ 位置（左上） */ --iSH-drwrSrcn-aLT-top-fixed-default : 0; --iSH-drwrSrcn-aLT-top-fixed-using : var(--iSH-drwrSrcn-aLT-top-fixed-default); /* drawer screen ＞ サイズ */ --iSH-drwrScrn-aRT-left-from-sH-cZALT-using : var(--sHDsgnBsRct002-sorW); } .drawer-nav__item { position : relative; width : 50%; height : auto; padding-inline-end : calc(var(--space-2, 2px) * 2 + 1px); } .drawer-nav__label { font-size : var(--font-size-26); } } @media (width < 768px) { .drawer-nav__label { font-size : var(--font-size-18); } } @media (width < 576px) { :where(:root) { /* drawerScreen ＞ 位置（左上） */ --iSH-drwrSrcn-aLT-top-fixed-default : 0; --iSH-drwrSrcn-aLT-top-fixed-using : var(--iSH-drwrSrcn-aLT-top-fixed-default); --iSH-drwrSrcn-aLT-left-fixed-default : 0; --iSH-drwrSrcn-aLT-left-fixed-using : var(--iSH-drwrSrcn-aLT-left-fixed-default); /* drawer screen ＞ サイズ */ --iSH-drwrScrn-aRT-left-from-sH-cZALT-using : var(--sHDsgnBsRct002-sorW); } .drwrScrn__itemsHolder { padding-top : calc(var(--sh-logo-height) * 1px); padding-left : 5%; padding-right : 5%; padding-bottom : 5%; } .drawer-nav__item { padding-top : 0.75em; padding-bottom : 0.75em; } } @media (width < 370px) { .drawer-nav__item { padding-top : 0.5em; padding-bottom : 0.5em; } .drawer-nav__label { font-size : var(--font-size-16); } } /* ==================================== 標準 ＞ Drawer（機能） ＞ Drawer ＞ UD ==================================== */ .UD { display : flex; gap : var(--space-16, 16px); /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; } .color_change, .textsize_change { /* layout */ display : grid; grid-template-columns : 6rem repeat(3, var(--ud--change-button)); gap : var(--space-12, 12px); align-items : center; } dl.color_change, .color_change > dd, dl.textsize_change, .textsize_change > dd { margin: 0; } .color_change > dt, .textsize_change > dt { /* style */ color : var(--color-text-default); /* typography */ font-size : calc(18 / 16 * 1rem); font-weight : var(--fontweight-regular); } .color_change > dd, .textsize_change > dd { /* layout */ display : grid; place-items : center; height : var(--ud--change-button); aspect-ratio : 1 / 1; /* style */ border-radius : var(--rounded-4, 4px); outline : 4px solid transparent; /* typography */ font-size : calc(18 / 16 * 1rem); font-weight : var(--fontweight-medium); /* transition */ transition : outline-color 0.3s ease; } .color_change > dd > a, .textsize_change > dd > a { /* layout */ display : flex; justify-content : center; align-items : center; width : 100%; height : 100%; /* style */ border-radius : var(--rounded-4, 4px); color : #000; text-decoration : none; overflow : hidden; } .color_change .high { /* style */ background-color : #000; border : 1px solid #fff; } .color_change .high > a { /* style */ color : #fff; } .color_change .default { /* style */ background-color : #fff; border : 1px solid #333; } .color_change .low { /* style */ background-color : #a3a3a2; border : 1px solid #333; } .textsize_change > dd { background-color : #fff; border : 1px solid #333; } .color_change > dd:hover, .textsize_change > dd:hover, .color_change > dd:focus-within, .textsize_change > dd:focus-within { outline-color : var(--color-border-accessibility-bold) !important; } /* ============================================================ 標準 ＞ Drawer（機能）＞ Drawer ＞ search ============================================================ */ /* ============================================================ 標準 ＞ Drawer（機能）＞ Drawer ＞ page control ============================================================ */ .page_control { --ud--change-button: var(--button-size--min-mobile); /* layout */ display: flex; flex-direction: row; justify-content: space-between; gap: var(--space-32, 32px); margin-inline: auto; padding-block: var(--space-32, 32px); width: 100%; max-width: var(--device-width-md); height: auto; } .page_control .conf { margin: unset; padding: unset; } .page_control .UD { margin: 0; padding: 0; } /* =============================== 標準 ＞ Footer ================================ */ .site-footer { /* layout */ position : relative; width : 100%; height : auto; /* style */ } .site-footer__container { /* layout */ position : relative; width : 100%; z-index : 2; overflow : hidden; } /* 1441px以上では画像全体を表示 */ @media (min-width: 1441px) {} /* ============================= 標準 ＞ Footer ＞ Copyright ============================= */ .copyright { background : var(--color-background-main); } .copyright__container { margin-top : 1rem; margin-bottom : 1rem; padding-left : 5%; padding-right : 5%; } .copyright p { /* layout */ margin : unset; /* typography */ font-size : calc(16 / 16 * 1rem); font-weight : var(--fontweight-regular); letter-spacing : var(--tracking-6); text-align : end; } /* ============================================================== 標準 ＞ reread-link（表示中のページ上部（トップ）へ戻る） ============================================================== */ .reread-link { position : fixed; inset-block-end : 40px; inset-inline-end : 48px; width : 76px; height : 76px; background-color : var(--color-background-main); border : 1px solid var(--border-inverse); border-radius : var(--rounded-full); z-index : var(--stack-foot); } .reread-link.backSeeThrough { /* opacityを使うと画像まで透過する */ background-color: rgba(255, 255, 255, 0); } .reread-link a { display : grid; place-items : center; width : 100%; height : 100%; } .reread-link img { width : 100%; height : auto; object-fit : contain; } /* 画像切替バージョン用(ここから) */ .reread-link img.showWhenNotFocused { display : block; } .reread-link:hover img.showWhenNotFocused, .reread-link:focus-within img.showWhenNotFocused { display : none; } .reread-link img.showWhenFocused { display : none; } .reread-link:hover img.showWhenFocused, .reread-link:focus-within img.showWhenFocused { display : block; } /* 画像切替バージョン用(ここまで) */ /* ============================================================== 標準 ＞ pageBodyContents ============================================================== */ .contents, .pageBodyContents { margin-block-start: calc(var(--header-height) * 1px); } /* ============================================================== 標準 ＞ pageBodyContents ＞ ぱんくずリスト ============================================================== */ .locusZone { --locus--link: var(--color-text-bredcrumb-link); --locus--text: var(--color-text-bredcrumb); --locus--font-size: var(--font-size-18); --locus--font-weight: var(--fontweight-regular); --locus--letter-spacing: var(--tracking-6); width : 100%; background : var(--color-background-subtler); border-bottom : 1px solid var(--border-subtler); } .locus_wrap { display : flex; max-width : var(--container-content); height : min-content; margin-inline : auto; padding : var(--space-8, 8px) var(--space-16, 16px); } /*=========================== 標準 ＞ Slider ============================= 想定構成 ============================= .slider-container .slide_box .slide_wrap button.slick-prev.slick-arrow .slick-list .slide.slick-slide(n) button.slick-next.slick-arrow .side-deco . .slide-control .slider-pagination .slick-dots .presentation(n) .buttons .button.js-play .button.js-stop =============================*/ .slider-container { /* layout */ position : relative; width : 100%; height : auto; } .slider-container.full-width { /* layout */ position : relative; width : 100%; height : auto; } .slide_box { position : relative; width : 100%; max-width : 100%; margin : 0 auto; } .slider-container .slide_box { position : relative; width : 100%; max-width : 100%; margin : 0 auto; } .slide_box .slide_wrap {} .slide_box .slide_wrap .slick-list { padding : 0; /* overflow : hidden; */ } .slide_box .slide_wrap .slick-list .slick-track { padding : 0; } /*=========================== 標準 ＞ Slider ＞ arrows ===========================*/ :where(:root) { /* 「.full-widthを使う場合」用 */ --sldr-slickArrow-width : 32; --sldr-slickArrow-height : 32; } /* スライダーの操作用要素「button.slick-arrow」は、初期化するまでhtml上には存在しない */ .slick-arrow { position : relative; } .slick-prev, .slick-next { /* layout */ width : calc(var(--sldr-slickArrow-width) * 1px); height : calc(var(--sldr-slickArrow-height) * 1px); position : absolute; display : inline-block; z-index : calc(var(--stack-head) - 2); /* style */ background : var(--color-background-default); border-radius : var(--rounded-full); border : 1px solid var(--border-main); box-shadow : var(--elevation-01); /* transition */ transition : background-color 0.3s ease-in-out; } .slick-prev { /* layout */ inset-inline-start: calc(50px / 2 * -1); } .slick-next { /* layout */ inset-inline-end: calc(50px / 2 * -1); } .slick-prev::before, .slick-next::before { /* layout */ content : ''; position : absolute; display : inline-block; left : 50%; top : 50%; width : 10px; height : 10px; margin : 0; /* style */ background : transparent; box-shadow : none; border-top : 2px solid var(--border-default); border-right : 2px solid var(--border-default); border-bottom : none; border-left : none; } .slick-prev::before { /* layout */ transform: translate(-30%, -50%); } .slick-next::before { transform: translate(-70%, -50%); } .slick-prev:hover, .slick-prev:focus-within, .slick-next:hover, .slick-next:focus-within { background-color: var(--color-background-main); } /*====================================================== 標準 ＞ Slider ＞ arrows ＞ オプションデザイン ======================================================*/ /* 広い意味でのアクセシビリティ面から、あまりおススメしないデザイン */ /* 利用するときはクラス「.slider-container」にクラス「.arrowBorderSeeThrough」を付与する */ .arrowBorderSeeThrough .slick-prev, .arrowBorderSeeThrough .slick-next { border : none; box-shadow : none; background-color : rgba(255, 255, 255, 0); } /*=============================================== 標準 ＞ Slider ＞ arrows ＞ full-widthでの表示用 ===============================================*/ :where(:root) { /* 「.full-widthを使う場合」用 */ --sldr-fllWdth-arrow-hrzCommonMargin : 32; --cZInsPrevArrow-rltvLeft : calc(var(--sH-cZALT-from-nWL-sh-ALT) + var(--sldr-fllWdth-arrow-hrzCommonMargin)); --cZInsNextArrow-rltvLeft : calc(var(--sH-cZALT-from-nWL-sh-ALT) + var(--headerCZ-width) - var(--sldr-fllWdth-arrow-hrzCommonMargin) - var(--sldr-slickArrow-width)); } .slider-container.full-width .slick-prev.slick-arrow, .slider-container.full-width .slick-next.slick-arrow { top : 50%; } .slider-container.full-width .slick-prev.slick-arrow { left : calc(var(--cZInsPrevArrow-rltvLeft) * 1px) } .slider-container.full-width .slick-next.slick-arrow { left : calc(var(--cZInsNextArrow-rltvLeft) * 1px) } /*=========================== 標準 ＞ Slider ＞ 表示単位 ===========================*/ .slider-container .slide {} .slider-container .slide img {} /*=========================== 標準 ＞ Slider ＞ 表示単位 ＞ full-widthでの表示用 ===========================*/ .slider-container.full-width .slide_box .slide { display : block; width : calc(var(--headerCZ-width) * 1px); } .slider-container.full-width .slide_box .slide img { width : 100%; max-width : calc(var(--headerCZ-width) * 1px); } /*====================================== 標準 ＞ Slider ＞ その他制御 ＞ サンプル /*====================================*/ .slider-container .slide-control.protoMode1 { /* 理解用のサンプル（許可なく改造禁止） */ position : relative; display : flex; align-items : center; width : 100%; min-height : calc(48px + 8px); padding-block : var(--space-4, 4px); } .slider-container .slide-deco.protoMode1 { /* 理解用のサンプル（許可なく改造禁止） */ position : relative; width : 100%; height : 0; } .slider-container .slide-deco.protoMode1 .preOverlayToSlickList.waveBack { /* 理解用のサンプル（許可なく改造禁止） */ position : absolute; top : 0; width : 100%; height : auto; aspect-ratio : 1280 / 54; background-image : url(../img/_proto/slider/proto/nami.png); background-repeat : repeat-x; background-size : contain; background-position : center; /* 基本としてはposition absoluteの要素のみを想定 */ /* 見た目だけを上へ移動する */ transform: translateY(-100%); } /*=========================== 標準 ＞ Slider ＞ その他制御 ===========================*/ /* controller */ .slider-container .slide-deco { position : relative; width : 100%; height : 0; } .slider-container .slide-control { /* layout */ position : relative; display : flex; align-items : center; width : 100%; min-height : calc(48px + 8px); padding-block : var(--space-4, 4px); } /* pagination */ .slider-container .slider-pagination { position : relative; display : flex; align-items : center; width : 100%; height : auto; } .slider-container .slider-pagination .dot { /* layout */ display : inline-block; width : 13px; height : 13px; background : var(--color-background-default); border-radius : var(--rounded-full); margin : 0 5px; /* style */ border : 1px solid var(--color-border-bold); outline : 1px solid transparent; outline-offset : 2px; /* transition */ transition : all 0.2s ease; cursor : pointer; } .slider-container .slider-pagination .slick-active .dot { background : var(--color-border-bold); } .slider-container .slider-pagination .dot:hover, .slider-container .slider-pagination .dot:focus-within { outline-color : var(--color-border-bold); } .slider-container .slick-dots { position : relative; display : flex; max-width : var(--headerCZ-width); justify-content : center; align-items : center; inset-block-end : 4px; flex-wrap : wrap; } /* play-stop */ .slider-container .buttons.default { position : absolute; display : flex; gap : var(--space-8, 8px); inset-inline-end : 0; z-index : calc(var(--stack-foreground) + 3); } .slider-container .buttons.default .button.js-stop, .slider-container .buttons.default .button.js-play { /* layout */ position : relative; display : grid; place-items : center; width : 48px; height : 48px; aspect-ratio : 1 / 1; margin : 0; /* style */ background : var(--color-background-default); border : 1px solid var(--color-border-default); outline : 2px solid transparent; border-radius : var(--rounded-full); overflow : visible; cursor : pointer; /* transition */ transition : background-color 0.2s ease 0s, outline-color 0.2s ease 0s; } .slider-container .buttons.default .button.js-play::before { /* layout */ content : ''; position : absolute; display : inline-block; inset-inline-start : 48%; inset-block-start : 35%; /* 50%; */ width : 0; height : 0; /* style */ border-style : solid; border-width : 7px 0 7px 11px; border-color : transparent transparent transparent var(--color-border-default); transform : translate(-30%, 10%); } .slider-container .buttons.default .button.js-stop::before, .slider-container .buttons.default .button.js-stop::after { /* layout */ content : ''; position : absolute; inset-block-start : 50%; inset-inline-start : calc(50% - (2px + 3px)); width : 3px; height : 12px; margin : 0; /* style */ background : var(--color-border-default); transform : translateY(-50%); } .slider-container .buttons.default .button.js-stop::after { inset-inline-start : calc(50% + 3px); } .slider-container .buttons.default .button:hover { background-color : var(--color-background-gene-button-hover); border : var(--color-border-default) !important; outline-color : var(--border-inverse); } .slider-container .buttons.default .button.js-stop:hover, .slider-container .buttons.default .button.js-play:hover { border : none !important; } .slider-container .buttons.default .button.js-play[aria-pressed='true'], .slider-container .buttons.default .button.js-stop[aria-pressed='true'] { background-color : var(--color-bg-slider-ctrl-btn-active-notOn); border : 1px solid var(--color-border-default); } .slider-container .buttons.default .button:hover { background-color : var(--color-background-gene-button-hover); outline-color : var(--border-inverse); } .slider-container .buttons.default .button.js-play[aria-pressed='true']:hover, .slider-container .buttons.default .button.js-stop[aria-pressed='true']:hover, .slider-container .buttons.default .button.js-play[aria-pressed='true']:focus-within, .slider-container .buttons.default .button.js-stop[aria-pressed='true']:focus-within { background-color : var(--color-bg-slider-ctrl-btn-active-on); border : 1px solid var(--color-border-default) !important; } /*画像が1枚の時、再生ボタン切り替えボタンを非表示*/ .slider-container .slide_box.disable .buttons, .slider-container .slide_box.disable .slick-dots { display: none; } @media (width < 992px) { .slider-container { /* position : relative; width : 90vw; */ } .slider-container .slide_box { /* padding-inline: var(--space-16, 16px); */ } } /*==================================================================================== 標準 ＞ Slider ＞ その他制御 ＞ オプションデザイン（buttons） ＞ imgSwitch /*==================================================================================*/ /* 広い意味でのアクセシビリティ面から、あまりおススメしないデザイン */ /* 利用するときはクラス「.buttons」にクラス「.mgSwitch」を付与する */ /* デフォルトのボタンイメージを非表示にする */ .buttons.imgSwitch .button.js-play:before, .buttons.imgSwitch .button.js-stop:before, .buttons.imgSwitch .button.js-stop:after { display : none !important; } /* デフォルトのボタンのデザインを非表示にする */ .slider-container .buttons.imgSwitch .button.js-stop:hover, .slider-container .buttons.imgSwitch .button.js-play:hover { border : none !important; border-radius : 0; } .slider-container .buttons.imgSwitch .button.js-stop, .slider-container .buttons.imgSwitch .button.js-play { border : none !important; border-radius : 0; box-shadow : none !important; background-color : rgba(255, 255, 255, 0); outline : none; } .slider-container .buttons.imgSwitch .button:hover { border : none !important; border-radius : 0; } /* 押されて有効になっている場合 */ .slider-container .buttons.imgSwitch .button.js-play[aria-pressed='true'], .slider-container .buttons.imgSwitch .button.js-stop[aria-pressed='true'] { border : none !important; border-radius : 0; box-shadow : none !important; background-color : rgba(255, 255, 255, 0); } .slider-container .buttons.imgSwitch .button.js-play[aria-pressed='true']:hover, .slider-container .buttons.imgSwitch .button.js-stop[aria-pressed='true']:hover, .slider-container .buttons.imgSwitch .button.js-play[aria-pressed='true']:focus-within, .slider-container .buttons.imgSwitch .button.js-stop[aria-pressed='true']:focus-within { border : none !important; border-radius : 0; box-shadow : none !important; background-color : rgba(255, 255, 255, 0); } .buttons.imgSwitch .js-play, .buttons.imgSwitch .js-stop { opacity : 1; } /* 背景色の変更に備えて、imgはsrc属性での指定ではなく、変更できるCSSでの指定とする */ .buttons.imgSwitch .js-play div{ width : 100%; height : auto; aspect-ratio : 30 / 50; background-color : #777; /* 初期カラー */ mask-image : url(../img/slider/control/type1/saisei_off.png); /* mask-repeat : none; */ mask-size : contain; -webkit-mask-image : url(../img/slider/control/type1/saisei_off.png); /* -webkit-mask-repeat : none; */ -webkit-mask-size : contain; } .buttons.imgSwitch .js-stop div{ width : 100%; height : auto; aspect-ratio : 30 / 50; background-color : #777; /* 初期カラー */ mask-image : url(../img/slider/control/type1/teishi_off.png); /* mask-repeat : none; */ mask-size : contain; -webkit-mask-image : url(../img/slider/control/type1/teishi_off.png); /* -webkit-mask-repeat : none; */ -webkit-mask-size : contain; } /* ボタンが押されて有効の場合（カーソル・非オン状態） */ .buttons.imgSwitch .button[aria-pressed='true'].js-play div { mask-image : url(../img/slider/control/type1/saisei_on.png); -webkit-mask-image : url(../img/slider/control/type1/saisei_on.png); } .buttons.imgSwitch .button[aria-pressed='true'].js-stop div { mask-image : url(../img/slider/control/type1/teishi_on.png); -webkit-mask-image : url(../img/slider/control/type1/teishi_on.png); } .buttons.imgSwitch .button[aria-pressed='true'].js-play div, .buttons.imgSwitch .button[aria-pressed='true'].js-stop div { background : var(--color-bg-slider-ctrl-btn-active-notOn); } .buttons.imgSwitch .button[aria-pressed='true'].js-play:hover div, .buttons.imgSwitch .button[aria-pressed='true'].js-play:focus div, .buttons.imgSwitch .button[aria-pressed='true'].js-play:focus-within div, .buttons.imgSwitch .button[aria-pressed='true'].js-stop:hover div, .buttons.imgSwitch .button[aria-pressed='true'].js-stop:focus div, .buttons.imgSwitch .button[aria-pressed='true'].js-stop:focus-within div { background : var(--color-bg-slider-ctrl-btn-active-on); } /* ボタンが押されていない場合（カーソル・非オン状態） */ .buttons.imgSwitch .button[aria-pressed='false'].js-stop div { mask-image : url(../img/slider/control/type1/teishi_off.png); -webkit-mask-image : url(../img/slider/control/type1/teishi_off.png); } .buttons.imgSwitch .button[aria-pressed='false'].js-play div { mask-image : url(../img/slider/control/type1/saisei_off.png); -webkit-mask-image : url(../img/slider/control/type1/saisei_off.png); } .buttons.imgSwitch .button[aria-pressed='false'].js-play div, .buttons.imgSwitch .button[aria-pressed='false'].js-stop div { background : var(--color-bg-slider-ctrl-btn-enabled-notOn); } /* ボタンが押されていない場合（カーソル・オン状態） */ .buttons.imgSwitch .button[aria-pressed='false'].js-play:hover div, .buttons.imgSwitch .button[aria-pressed='false'].js-play:focus div, .buttons.imgSwitch .button[aria-pressed='false'].js-play:focus-within div { mask-image : url(../img/slider/control/type1/saisei_on.png); -webkit-mask-image : url(../img/slider/control/type1/saisei_on.png); } .buttons.imgSwitch .button[aria-pressed='false'].js-stop:hover div, .buttons.imgSwitch .button[aria-pressed='false'].js-stop:focus div, .buttons.imgSwitch .button[aria-pressed='false'].js-stop:focus-within div { mask-image : url(../img/slider/control/type1/teishi_on.png); -webkit-mask-image : url(../img/slider/control/type1/teishi_on.png); } .buttons.imgSwitch .button[aria-pressed='false'].js-play:hover div, .buttons.imgSwitch .button[aria-pressed='false'].js-play:focus div, .buttons.imgSwitch .button[aria-pressed='false'].js-play:focus-within div, .buttons.imgSwitch .button[aria-pressed='false'].js-stop:hover div, .buttons.imgSwitch .button[aria-pressed='false'].js-stop:focus div, .buttons.imgSwitch .button[aria-pressed='false'].js-stop:focus-within div { background : var(--color-bg-slider-ctrl-btn-enabled-on); } /*==================================================================================== 標準 ＞ Slider ＞ その他制御 ＞ オプションデザイン（slider-pagination） ＞ slick-dots /*==================================================================================*/ /* 広い意味でのアクセシビリティ面から、あまりおススメしないデザイン */ /* 利用するときはクラス「.slider-container」にクラス「.dotsOnSlide」を付与する */ .slider-container.dotsOnSlide .slick-dots { padding : 0; margin : 0 auto; } .slider-container.dotsOnSlide .slider-pagination { position : absolute; top : calc(0px - var(--slider-height) * 0.15 * 1px); } /*=============================================================== 標準 ＞ TOP ＞ Slider =============================================================== */ .slider-container { /* 理解用のサンプル（許可なく改造禁止） */ background: var(--color-site-proper-91-a); } .slider-container.full-width .slide-control { /* 理解用のサンプル（許可なく改造禁止） */ position : relative; display : flex; align-items : center; width : 100%; min-height : calc(48px + 8px); padding-block : var(--space-4, 4px); } .slider-container.full-width .slide-deco .preOverlayToSlickList.waveBack { /* 理解用のサンプル（許可なく改造禁止） */ position : absolute; top : 0; width : 100%; height : auto; aspect-ratio : 1280 / 54; background-image : url(../img/_proto/slider/widefull/nami.png); background-repeat : repeat-x; background-size : contain; background-position : center; /* 基本としてはposition absoluteの要素のみを想定 */ /* 見た目だけを上へ移動する */ transform: translateY(calc(-100% + 1px)); } /* =========================== CMS用テンプレート .txtbox内部 =========================== */ /* =============================== TxtBox(CMS用) ================================ */ /* =============================== TxtBox(CMS用) ＞ table ================================ */ /* ========================= Menu ======================== */ /* ======================== Archive ======================== */ /* ======================== Responsive ======================== */ /* --- 追加スタイル (style.css) --- */ /************************************/ /* ロゴと地図等（配置）（ここから） */ /************************************/ .site-footer .locationMapAndEtc { /* 幅:高さ = leftValue : rightValue */ aspect-ratio: 5 / 2; } .site-footer .locationMapAndEtc .inFlex.wdth2div.locaAndLogoZone { width: 45%;} .site-footer .locationMapAndEtc .inFlex.wdth2div.mapZone { width: 55%;} /************************************/ /* ロゴと地図等（配置）（ここまで） */ /************************************/ /****************************/ /* ロゴと住所等（ここから） */ /****************************/ .site-footer .logoAndLocationZone { width : 45%; background : var(--color-background-footer-logoAndLocationZone); } .site-footer .footerLogoHolder { aspect-ratio: 100 / 35;} .site-footer .footerLogoHolder .footer__logo__wrap {} .site-footer .footerLogoHolder .site-footer__logo { display:block; width:67%; margin-left:20.5%; margin-top:15%;} .site-footer .footerLogoHolder img.site-footer__logo { filter: var(--color-img-cnstrstFilter-for-black); } .site-footer .siteNameHolder { height :0; /* aspect-ratio: 8 / 1; */ } .site-footer .postNumberAndAddressHolder { aspect-ratio: 8 / 1; margin-left:20.5%; margin-top:7%; } .site-footer .telNumberHolder { aspect-ratio: 16 / 1; margin-left:20.5%;} .site-footer .qrCodeAndEtcHolder { aspect-ratio: 4 / 1; margin-left:20.5%;} .site-footer .qr__for__opac { width: 10%; height: 10%; } .site-footer .guideTextForMobileOpac { /* 2025-07-28-remove */} /****************************/ /* ロゴと住所等（ここまで） */ /****************************/ /********************/ /* 地図（ここから） */ /********************/ .site-footer .footer-map__wrap { width : 100%; height : 100%; display : flex; /* 子要素（iframe地図）の高さを100%にする */ } .site-footer .footer-map__wrap iframe{ width : 100%; height : 100%; } /********************/ /* 地図（ここまで） */ /********************/ @media (width < 992px) { .site-footer .logoAndLocationInfo { font-size : 0.75rem; } } @media (width < 576px) { /************************************/ /* ロゴと地図等（配置）（ここから） */ /************************************/ .site-footer .locationMapAndEtc { aspect-ratio : auto; } .site-footer .locationMapAndEtc .logoAndLocationZone { width : 100%; } .locationMapAndEtc .inFlex.wdth2div.locaAndLogoZone { width : 100%; /* 幅:高さ = leftValue : rightValue */ aspect-ratio : 10 / 7; } /************************************/ /* ロゴと地図等（配置）（ここまで） */ /************************************/ /****************************/ /* ロゴと住所等（ここから） */ /****************************/ .site-footer .footerLogoHolder {} .site-footer .footerLogoHolder .site-footer__logo { width : 78%; margin-left : 10%; margin-top : 10%; } .site-footer .siteNameHolder {} .site-footer .postNumberAndAddressHolder { margin-left : 10%; margin-top : 0; } .site-footer .postNumberAndAddressHolder .postNumberAndAddress {} .site-footer .telNumberHolder { margin-left : 10%; } .site-footer .qrCodeAndEtcHolder { display : none; } /****************************/ /* ロゴと住所等（ここまで） */ /****************************/ /********************/ /* 地図（ここから） */ /********************/ .site-footer .locationMapAndEtc .inFlex.wdth2div.mapZone { width : 100%; /* 幅:高さ = leftValue : rightValue */ aspect-ratio : 10 / 8; } .site-footer .logoAndLocationInfo, .site-footer .footer-map { width : 100vw; } /********************/ /* 地図（ここまで） */ /********************/ } /******************************************/ /* コピーライトとナビ等 ＞ SP（ここから） */ /******************************************/ .site-footer .copyrightAndLinks.linksToCopyright { background : var(--color-background-footer); } .site-footer .copyrightAndLinks.linksToCopyright.showWhenOnlySp { display : none; } @media (width < 576px) { .site-footer .copyrightAndLinks.linksToCopyright .links { margin-top : 2.5rem; } .site-footer .copyrightAndLinks.linksToCopyright.showWhenOnlySp { display : block; } .site-footer .copyrightAndLinks .copyright { margin-top : 2rem; } .site-footer .copyrightAndLinks .copyright p { text-align : center; font-size : 1rem; } .site-footer .copyrightAndLinks .hzrTeoEdgeLimiter{ padding-left : 1rem; padding-right : 1rem; } .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder { justify-content : center; gap : 0; } .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder li { padding : 0 0.75rem; } .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder .footerNav { position : relative; } .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder .footerNav:after { content : ''; position : absolute; width : var(--border-width-xl); width : var(--border-width-lg); width : var(--border-width-md); height : calc(100%); top : 0; left : 100%; background-color : var(--color-neutral-80); } .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder .footerNav:first-child:after {} .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder .footerNav:last-child:after { display : none; } } @media (width < 476px) { .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder li { font-size : var(--font-size-14); } .site-footer .copyrightAndLinks .copyright p { font-size : 0.8rem; } } @media (width < 430px) { .site-footer .copyrightAndLinks.linksToCopyright .links .itemsHolder.withCenterBorder li { font-size : var(--font-size-12); } } /******************************************/ /* コピーライトとナビ等 ＞ SP（ここから） */ /******************************************/ /******************************************/ /* コピーライトとナビ等 ＞ PC（ここから） */ /******************************************/ .site-footer .copyrightAndLinks.copyrightToLinks { background : var(--color-background-footer); } .site-footer .copyrightAndLinks.copyrightToLinks { margin-top : 0.5rem; margin-bottom : 0.5rem; } .site-footer .copyrightAndLinks.copyrightToLinks .copyright { width : 45%; } .site-footer .copyrightAndLinks.copyrightToLinks .links { width : 55%; } .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder { gap : 1.5rem; padding-right : 1rem; } .site-footer .copyright__container { margin-top : 2.5rem; margin-bottom : 2.5rem; padding-left : 1rem; padding-right : 1rem; } .site-footer .copyright { background : var(--color-background-footer); font-size : 0.5rem; } .site-footer .copyright p { text-align : start; font-size : 0.8rem; } .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder.withCenterBorder { gap : 0; } .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder.withCenterBorder li { padding : 0 0.75rem; } .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder.withCenterBorder .footerNav { position : relative; } .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder.withCenterBorder .footerNav:after { content : ''; position : absolute; width : var(--border-width-xl); width : var(--border-width-lg); width : var(--border-width-md); height : calc(100%); top : 0; left : 100%; background-color : var(--color-neutral-80); } .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder.withCenterBorder .footerNav:first-child:after {} .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder.withCenterBorder .footerNav:last-child:after { display : none; } @media (width < 992px) { .site-footer .copyrightAndLinks.copyrightToLinks .links .itemsHolder { gap : 0.5rem; } .site-footer .copyrightAndLinks.copyrightToLinks .links a { font-size : 0.75rem; } } /******************************************/ /* コピーライトとナビ等 ＞ PC（ここまで） */ /******************************************/ /*======================================= 標準 ＞ 図書館系 ＞ info-section ＞ 重要なお知らせ =======================================*/ body.top .importantNotice .contentsPerSectionTitle { padding-top : 1em; } body.top .importantNotice ul > li { list-style-type : initial; font-size : var(--font-size-20); line-height : 1.75; } body.top .importantNotice .contentsPerSectionTitle { padding-left : calc(10% + 1.5em); padding-right : 10%; } body.top .importantNotice .contentsPerSectionTitle.flBxGene .button-wrapper.afterItems { width : 8em; } body.top .importantNotice .contentsPerSectionTitle.flBxGene ul.importantNotice__list { width : calc(100% - 8em); } /*======================================= 標準 ＞ 図書館系 ＞ info-section ＞ 重要なお知らせ =======================================*/ body.top .importantNotice .contentsPerSectionTitle { padding-top : 1em; } body.top .importantNotice ul > li { list-style-type : initial; font-size : var(--font-size-20); line-height : 1.75; } body.top .importantNotice .contentsPerSectionTitle { padding-left : calc(10% + 1.5em); padding-right : 10%; } body.top .importantNotice .contentsPerSectionTitle.flBxGene .button-wrapper.afterItems { width : 8em; } body.top .importantNotice .contentsPerSectionTitle.flBxGene ul.importantNotice__list { width : calc(100% - 8em); } /*=============================================== 標準 ＞ 本日の日付 ===============================================*/ body.top .todayInfo.dateAndDay { padding-left : var(--sps-glbl-layout-padding-left); padding-right : var(--sps-glbl-layout-padding-right); padding-bottom : 1.5em; font-size : var(--font-size-32); letter-spacing : var(--space-2); } body.top .todayInfo.dateAndDay .setDateWhenDocReady {} @media (width < 576px) { body.top .todayInfo.dateAndDay { font-size : var(--font-size-24); letter-spacing : var(--space-1); } } /*=============================================== 標準 ＞ 図書館系 ＞ 開館時間情報 ＞ 施設別・パネル型 ===============================================*/ body.top .serviceTimeInfoCollector__hcih-ih { position : relative; display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; gap : 0.125em 0; padding-left : var(--sps-lcl1-layout-padding-left); padding-right : var(--sps-lcl1-layout-padding-right); text-align : center; } body.top .serviceTimeInfoCollector__hcih-ih > * { width : 19%; /* 親の左右padding除去した後の幅に対して <= calc(100% / 6); */ aspect-ratio : 230 / 245; /* 230 / 180 + 165 */ } body.top .showFacilityName__hcih-ih { display : flex; flex-direction : column; justify-content : center; /* 水平方向中央 */ align-items : center; /* 垂直方向中央 */ /* 文字を大きくした場合に、２行になることを想定 */ height : var(--font-size-44); } body.top .showFacilityName__hcih-ih > div { /* 文字を大きくした場合に、２行になることを想定 */ font-size : var(--font-size-22); line-height : 1; } body.top .motosayama .showFacilityName__hcih-ih > div { /* 元佐山だけ文字を縮める */ font-size : var(--font-size-16); } body.top .closeOrOpen__hcih-ih { font-size : var(--font-size-64); line-height : 1; } body.top .statusDetail__hcih-ih { font-size : var(--font-size-14); line-height : 3; } body.top .detailTitle__hcih-ih { padding-top : var(--font-size-14); padding-bottom : var(--font-size-10); font-size : var(--font-size-12); line-height : 40px; } body.top .openAndCloseInfo__hcih-ih { display : flex; flex-direction : column; justify-content : center; /* 水平方向中央 */ align-items : center; /* 垂直方向中央 */ /* 文字を大きくした場合に、２行になることを想定 */ /* 文字サイズ変更（大）に対応するため min-heightで指定 */ min-height : var(--font-size-44); } body.top .openAndCloseInfo__hcih-ih > div { /* 文字を大きくした場合に、２行になることを想定 */ font-size : var(--font-size-14); line-height : 1.5; } body.top .openAndCloseInfo__hcihih .timeBtwnOpenAndClose { font-size : var(--font-size-18); } body.top .guideToOpenCalendar__hcih-ih { display: flex; justify-content: center; font-size : var(--font-size-16); padding-top : var(--font-size-16); padding-bottom : var(--font-size-16); margin-top: 40px; } /*============================================ 標準 ＞ 図書館系 ＞ ログイン系メニュー /*==========================================*/ body.top .graphicalMemberMenuCollector { /* padding-left : 10%; padding-right : 10%; */ padding-top : 3em; padding-bottom : 3em; } body.top .graphicalMemberMenuCollector img { display : block; width : 75%; margin : 0 auto; } body.top .graphicalMemberMenuCollector__hcih-ih { padding-left : var(--sps-lcl1-layout-padding-left); padding-right : var(--sps-lcl1-layout-padding-right); } body.top .graphicalMemberMenuItem__hcih-h { width : 18%; } .graphicalMemberMenuCollector .hvChgImgParent img.showWhenNotFocused { filter : var(--color-filter-for-only-black-img); } .graphicalMemberMenuCollector .hvChgImgParent img.showWhenFocused { display : none; } .graphicalMemberMenuCollector .hvChgImgParent:hover img.showWhenFocused, .graphicalMemberMenuCollector .hvChgImgParent:focus img.showWhenFocused { display : block; } .graphicalMemberMenuCollector .hvChgImgParent img.showWhenFocused { display : none; } @media (width < 576px) { body.top .graphicalMemberMenuCollector .graphicalMemberMenuCollector__hcih-ih.flBxGene { gap : 1em 0; } body.top .graphicalMemberMenuItem__hcih-h { width : 50%; } body.top .graphicalMemberMenuItem__hcih-h.showWhenOnlySp.mypage { width : 100%; } body.top .graphicalMemberMenuItem__hcih-h img { width : 85%; } } /*================================ 標準＞ 図書館系 ＞ 資料を探す ================================*/ body.top .searchBook .sectionTitle { padding-top : 1em; } body.top .searchBook .contentsPerSectionTitle.flBxGene {} /* ----likeSearchBtnInSearchKeyword */ body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword { display : flex; align-items : stretch; min-width : 130px; max-width : 100%; padding : 0; width : 100%; border : var(--border-width-form-input-default) solid var(--color-background-form-input-default);; background-color : var(--color-background-form-input-default); } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword:focus-within { outline : var(--border-width-form-input-default) solid var(--color-border-underline-hover-01); } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword input[type=text] { display : block; width : calc(100% - 4em); background-color : var(--color-background-form-input-default); } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword input[type=text]:focus, body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword input[type=text]:focus-visible, body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword input[type=submit]:focus, body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword input[type=submit]:focus-visible, body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword button:focus, body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword button:focus-visible { border : 3px solid var(--color-background-form-input-default);; outline : 0; } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword button { width : 4em; background-color : var(--color-background-form-button-default); } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi input[type=text] { border : none; } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi button { border : none; border-color : var(--color-border-form-input-default); border-left : none; background-color : var(--color-background-form-input-default); } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi button { display : block; padding : 0; /* 余白があると中央からずれる場合がある */ } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi button:focus { box-shadow : 0 0 0 3px var(--color-border-underline-hover-01); } body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword button img { display : block; margin : 0 auto; } /* likeSearchBtnInSearchKeyword---- */ /*================================ 標準 ＞ お知らせ ＞ カード型リンク ================================*/ body.top .cardLinkItemsCollectorHolder { --cardLink-item-width-base : 24em; --cardLink-item-height-base : 12em; } body.top .cardLinkItemsCollectorHolder .sectionTitle { padding-top : 1em; } body.top .cardLinkItemsCollectorHolder .contentsPerSectionTitle { /* padding-left : 20%; padding-right : 10%; */ } body.top .cardLinkItemsCollectorHolder .cardLinkItemsCollector { position : relative; display : flex; justify-content : right; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; gap : 0; height : auto; } body.top .cardLinkItemsCollectorHolder .cardLinkItemsCollector .cardLinkItem__hcih-h { width : var(--cardLink-item-width-base); margin : 0.5em 0.5em; height : auto; /* height : var(--cardLink-item-height-base); */ background : var(--color-neutral-0); } body.top .cardLinkItem__hcih-c{display:block;padding:8px;margin:0;} body.top .cardLinkItem__hcih-ih { position : relative; display : flex; } body.top .cardLinkItem__hcih-ih .imageHolder { width : 50%; /* ↓↓↓親要素の高さを保証する役割あり↓↓↓ */ aspect-ratio : 1 / 1; } body.top .cardLinkItem__hcih-ih .imageHolder { width : 100%; height : 100%; } body.top .cardLinkItem__hcih-h .imageWrapper { width : 100%; height : 100%; padding : 9% 10% 11% 10%; } body.top .cardLinkItem__hcih-h .imageWrapper img { display : block; width : 100%; height : 100%; background : var(--color-site-proper-gry1); object-fit: cover; object-position: top; } body.top .cardLinkItem__hcih-ih .textInfoHolder { width : 100%; height : auto; min-height : 100%; } body.top .cardLinkItem__hcih-ih .dataRowsHolder { height : 100%; display : grid; grid-template-rows : 32% 56% 12%; padding : 9% 10% 11% 0; } body.top .cardLinkItem__hcih-ih .dataRowsHolder .headRow { /* ラベルを上下中央に寄せる　*/ display : flex; align-items : center; width : 100%; min-height : 34%; font-size : var(--font-size-16); line-height : 1; height : calc(1em * 1 * 2); } body.top .cardLinkItem__hcih-ih .dataRowsHolder .tailRow{ width : 100%; min-height : 56%; } body.top .cardLinkItem__hcih-ih .dataRowsHolder .midRow { width : 100%; grid-template-rows : 10%; } body.top .cardLinkItem__hcih-ih .deccription { display : -webkit-box; font-size : var(--font-size-16); line-height : 1.75; height : calc(1em * 1.75 * 3); -webkit-line-clamp : 3; /* 表示する最大行数 */ -webkit-box-orient : vertical; /* 縦方向にボックスを設定 */ overflow : hidden; /* はみ出た部分を非表示 */ } body.top .cardLinkItem__hcih-ih .tailRow {} body.top .cardLinkItem__hcih-ih .updateDate { font-size : var(--font-size-12); } body.top .cardLinkItem__hcih-ih .rightArrow { display : block; width : 15%; max-width : 29px; aspect-ratio : 29 / 30; background-image : url(../img/top/info_arrow.png); /* PNG画像をマスクに利用 */ background-repeat : no-repeat; background-size : contain; } body.top .cardLinkItemsCollectorHolder .divisionLabel { position : relative; display : inline-flex; justify-content : center; align-items : center; font-size : var(--font-size-18); font-weight : bold; color : var(--color-text-default); text-decoration : none; padding : 0.20em 0.8em 0.3em 0.8em; border : none; /* 1px solid var(--color-black); */ border-radius : 9999px; background-color : var(--color-white); transition : background-color 0.2s, color 0.2s; } /* 原則：背景色は位置・サイズ・コンテンツを定めた最後に設定する */ body.top .cardLinkItemsCollectorHolder .divisionLabel.new { letter-spacing : var(--space-4); background : var(--color-site-proper-02-b); } body.top .cardLinkItemsCollectorHolder .divisionLabel.notification { background : var(--color-site-proper-01-b); } body.top .cardLinkItemsCollectorHolder .divisionLabel.eventAndExhibition { letter-spacing : var(--space-1); letter-spacing : var(--space-none); background : var(--color-site-proper-gry2); } @media (width < 576px) { body.top .cardLinkItemsCollectorHolder { --cardLink-item-width-base : calc(100vw - (var(--sps-glbl-layout-padding-left) + var(--sps-glbl-layout-padding-right))); --cardLink-item-height-base : calc(var(--cardLink-item-width-base) / 2); } body.top .cardLinkItemsCollectorHolder .cardLinkItemsCollector .cardLinkItem__hcih-h { width : 100%; margin-left : 0; margin-right : 0; } body.top .information.cardLinkItemsCollectorHolder .contentsPerSectionTitle { padding-left : var(--sps-glbl-layout-padding-left); padding-right : var(--sps-glbl-layout-padding-right); } body.top .cardLinkItem__hcih-ih { } body.top .cardLinkItem__hcih-ih .deccription { } body.top .cardLinkItem__hcih-ih .updateDate { } body.top .cardLinkItem__hcih-ih .rightArrow { } } body.top .calendar{padding-bottom:40px;} /*=============================================== 標準 ＞ 図書館系 ＞ イベント ＞ 施設別アイコン等付き ===============================================*/ body.top .event.talkingMeeting { /* padding-left : 10%; padding-right : 10%; */ } body.top .event.talkingMeeting .sectionTitle {} body.top .event.talkingMeeting .contentsPerSectionTitle { padding-left : var(--sps-glbl-layout-padding-left); padding-right : var(--sps-glbl-layout-padding-right); } body.top .event.talkingMeeting .talkingMeetingItemCollector, body.top .event.talkingMeeting .contentsPerSectionTitle .button-wrapper { width : 100%; } body.top .event.talkingMeeting .talkingMeetingItem { display : flex; flex-direction : row; justify-content : center; /* 水平方向中央 */ align-items : center; /* 垂直方向中央 */ padding-bottom : 1em; } body.top .event.talkingMeeting .updateDate { width : 9.5em; text-align : center; } body.top .event.talkingMeeting .category { /* テキストの上下中央寄せ配置 */ display : flex; flex-direction : column; justify-content : center; align-items : center; /* width : calc(240 / (202 + 240 + 490) * 100%); */ width : 12em; aspect-ratio : 205 / 60; /* 非透過部分の色可変化 */ background-color : #777; mask-image : url(../img/top/oshirase_mizuho.png); /* PNG画像をマスクに利用 */ mask-repeat : no-repeat; mask-size : contain; -webkit-mask-image : url(../img/top/oshirase_mizuho.png); /* Safari対応 */ -webkit-mask-repeat : no-repeat; -webkit-mask-size : contain; text-align : center; } body.top .event.talkingMeeting .description { /* width : calc(490 / (202 + 240 + 490) * 100%); */ width : 28em; padding-left : 1em; padding-right : 1em; } body.top .contentsPerSectionTitle .button-wrapper { position : relative; display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; justify-content : flex-end; padding-top : 2.1em; padding-bottom : 2.1em; } @media (width < 973px) { /* .event.talkingMeeting .talkingMeetingItem { flex-wrap : wrap; justify-content : flex-start; } */ body.top .event.talkingMeeting .updateDate { font-size : var(--font-size-14); padding-right : 0.5em; } body.top .event.talkingMeeting .category { font-size : var(--font-size-13); } body.top .event.talkingMeeting .description { font-size : var(--font-size-14); } } @media (width < 800px) { body.top .event.talkingMeeting .updateDate { font-size : var(--font-size-13); } body.top .event.talkingMeeting .category { font-size : var(--font-size-10); } body.top .event.talkingMeeting .description { font-size : var(--font-size-13); } } @media (width < 573px) { body.top .event.talkingMeeting .updateDate { font-size : var(--font-size-12); } } /* ============================= 標準 ＞ Footer ＞ SNS ============================= */ .snsList { --sns-item-width : var(--std-sns-icon-width , 60px); --gap-bwt-sns-icons : calc(var(--std-sns-icon-width) * 0.8); display : flex; justify-content : space-between; /* 両端も含めて等間隔 */ align-items : center; /* 縦方向中央揃え */ gap : 0; } .snsList .snsItem { display : flex; justify-content : space-between; /* 両端も含めて等間隔 */ align-items : center; /* 縦方向中央揃え */ padding-right : 0; padding-left : var(--gap-bwt-sns-icons); } .snsList .snslink img{ display : block; width : var(--sns-item-width); aspect-ratio : 1; } @media (width < 1350px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } @media (width < 973px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } @media (width < 576px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } @media (width < 430px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } /* ============================= 標準 ＞ そのほか ＞ ロゴと情報 ============================= */ .otherSitelogoAndLogoInfo { --other-site-logo-width : var(--std-other-icon-width , 60px); --gap-btw-logo-and-name : var(--std-spc-btw-xpl-and-sns-icon, 1em); display : grid; grid-template-columns : auto 1fr; place-items : center start; color : var(--color-text-site-other, #000 ); text-decoration : none; } .otherSitelogoAndLogoInfo a { text-decoration : none; } .otherSitelogoAndLogoInfo .otherSitelogo { display : grid; place-items : center; width : 100%; padding : 0 var(--gap-btw-logo-and-name); aspect-ratio : 1; } .otherSitelogoAndLogoInfo .otherSitelogo img { width : var(--other-site-logo-width); } .otherSitelogoAndLogoInfo .otherSiteName { display : grid; place-items : center start; width : 100%; row-gap : var(--space-6); font-size : var(--std-text-font-size); letter-spacing : var(--space-2, 0.125em) } .otherSitelogoAndLogoInfo .otherSiteTitle__jp { line-height : 1; white-space : nowrap; } @media (width < 1350px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } @media (width < 973px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ .snsAndSiteAdminInfos .otherSitelogo { padding-left : 0; } } @media (width < 576px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } @media (width < 430px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } /* ============================= 標準 ＞ そのほか ＞ SNSとサイト管理者系情報 ============================= */ .snsAndSiteAdminInfos { --std-sns-icon-width : 60px; --std-other-icon-width : calc(var(--std-sns-icon-width) * 0.9); --std-text-font-size : var(--font-size-32, 2em); --std-spc-btw-sns-icon : calc(var(--std-sns-icon-width) * 0.8); padding-top : 2.5em; padding-bottom : 5.0em; padding-left : 10%; padding-right : 10%; } .snsAndSiteAdminInfos .snsAndSiteAdminInfos__hcih-c { background-color : var(--color-main-site-proper, #ffffff); } .snsAndSiteAdminInfos .snsAndSiteAdminInfos__hcih-ih { position : relative; display : flex; justify-content : space-around; /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */ flex-wrap : wrap; } .snsAndSiteAdminInfos .area1 { position : relative; max-width : 50%; width : 50%; padding : 1em 0; display : flex; justify-content : center; } .snsAndSiteAdminInfos .area1:after { content : ''; position : absolute; width : var(--border-width-xl); height : calc(100% - 2em); top : 1em; left : 100%; background-color : var(--color-site-proper-gry4); } .snsAndSiteAdminInfos .area2 { position : relative; max-width : 50%; width : 50%; padding : 1em 0; display : flex; justify-content : center; } .snsAndSiteAdminInfos .area2 .areaExplain, .snsAndSiteAdminInfos .area2 .snsListZone { display : flex; align-items : center; } .snsAndSiteAdminInfos .area2 .areaExplain { width : fit-content; justify-content : flex-end; font-size : calc(var(--std-text-font-size) * 0.6); letter-spacing : var(--space-2, 0.125em) } .snsAndSiteAdminInfos .area2 .snsListZone { justify-content : center; } @media (width < 1350px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ .snsAndSiteAdminInfos { --std-sns-icon-width : 50px; --std-text-font-size : var(--font-size-26, 1.5em); } } @media (width < 973px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ .snsAndSiteAdminInfos .area1, .snsAndSiteAdminInfos .area2 { max-width : 100%; width : 100%; } .snsAndSiteAdminInfos .area1:after { display : none; } .snsAndSiteAdminInfos .area1 { padding-bottom : 0; } .snsAndSiteAdminInfos .area2 { padding-top : 0; } /* 各要素 */ .snsAndSiteAdminInfos { --std-sns-icon-width : 50px; --std-text-font-size : var(--font-size-24, 1.5em); } } @media (width < 576px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ .snsAndSiteAdminInfos { --std-sns-icon-width : calc(9vw); --std-text-font-size : var(--font-size-16, 1.25em); } } @media (width < 430px) { /* 全体レイアウト、各要素の順に、定義しなおし */ /* 全体レイアウト */ /* 各要素 */ } /* --- 追加スタイル (style.css) --- */ /* =============================== adjustPerSite ＞ 共通スタイル =============================== */ body { font-weight : var(--fontweight-regular); } /* =============================== adjustPerSite ＞ 共通スタイル ＞ そのほか ＞ フォント =============================== */ .ennum { font-family : var(--font-ennum); } /* =============================== adjustPerSite ＞ タグ（a） ＞ 区分（デフォルト） =============================== */ a { color : var(--color-link); } a:visited { color : var(--color-neutral-100); } a.stdDecoUlOnHv, a.stdDecoUlOnHv { text-decoration : none; } a.stdDecoUlOnHv:focus, a.stdDecoUlOnHv:hover { text-decoration : underline; } /* =============================== adjustPerSite ＞ タグ（a） ＞ 区分（見た目ボタン） =============================== */ a.btn-like { min-width : 130px; border : 3px solid var(--color-black); } a.btn-like:hover, a.btn-like:focus-within{ border-color : var(--color-border-button-hover-01); } a.btn-like:not(.noArrow):hover::after { border-color : var(--color-border-button-hover-01); } a.btn-like.baseWhite { background-color : var(--color-white); } a.btn-like.baseWaveGray { background-color : var(--color-site-proper-91-a); } /* =============================== adjustPerSite ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） =============================== */ .site-header .stdULnOHv:focus:after, .site-header .stdULnOHv:focus-within:after, .site-header .stdULnOHv:hover:after { background : var(--color-border-underline-hover-02); } /* ========================================= adjustPerSite ＞ common ＞ h1.page-title ＞ 下線付 ========================================= */ /* ========================================= adjustPerSite ＞ common ＞ form系 ========================================= */ /* ----likeSearchBtnInSearchKeyword */ /* likeSearchBtnInSearchKeyword---- */ /* =============================== adjustPerSite ＞ common ＞ そのほか =============================== */ /* =============================== adjustPerSite ＞ pageProperHolder =============================== */ /* =============================== adjustPerSite ＞ section =============================== */ /* =============================== adjustPerSite ＞ Header ================================ */ /* 2025-07-固有調整追加(ここから) */ /* まずは全体レイアウト(media指定なし,media指定あり[PC=>SP]) => 要素内レイアウト */ :where(:root) { --sh-logo-left-default : 24; --sh-logo-top-default : 24; } .zeroHeight { height : 0; } .site-header { aspect-ratio: 100 / 12.3; /* (100 / 12.3) <- (100 / 17.3) */ /* style */ background: var(--color-background-header-default); box-shadow: var(--elevation-01); } .site-header .header__container { height : 100%; } .site-header .header__itemsHolder { height : 100%; } .site-header .header__itemsHolder .navZone1 { height : 50%; padding-right : 5%; } .site-header .navZone1 .headTool { height : 100%; } .site-header .header__itemsHolder .navZone2 { height : 50%; padding-right : 5%; } .site-header .navZone2 .primaryMenus { height : 100%; margin-top : -0.75rem; padding-right : 0.5rem; } .site-header .navZone2 .primaryMenus.flBxGene { gap : 2rem; } .site-header .itemsHolder.positionRuler.logoRuler { /* width : 15%; */ /* 15% <- 22% */ width : calc(var(--header-width) * 0.15 * 1px); height : 0; } .site-header a.site-header__title { position : absolute; display : inline-block; box-sizing : border-box; width : 100%; height : auto; left : calc(var(--sh-logo-left-default) * 1px); top : calc(var(--sh-logo-top-default) * 1px); z-index : var(--stack-top); } .site-header a.site-header__title img { display : block; width : 100%; height : 100%; } a.site-header__title:hover, a.site-header__title:focus a.site-header__title:focus-within { /* 画像の下に境界線と同じ位置に部分的な境界線を描画する */ box-shadow : inset 0 0 0 var(--border-width-default-when-hover) var(--color-border-button-hover-01); } .site-header .utility-nav__list.putFromRight { justify-content : flex-end; height : 100%; } .site-header .outerDrawer.color_change { position : relative; display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; gap : var(--space-6, 6px); margin-left : 2.5rem; } .site-header .outerDrawer.textsize_change { position : relative; display : flex; /* 先頭と末尾の子要素は端に寄せられる */ justify-content : space-between; gap : var(--space-6, 6px); margin-left : 2.5rem; } .site-header .outerDrawer dd { font-size: 1rem; width : 1.875rem; } .site-header .outerDrawer.color_change dt, .site-header .outerDrawer.textsize_change dt { padding-right : 0.5rem; font-size : 0.75rem; } .site-header .outerDrawer.textsize_change .smaller { width: 1.650rem; font-size: 0.75rem;} .site-header .outerDrawer.textsize_change .default { width: 1.750rem; font-size: 1rem; } .site-header .outerDrawer.textsize_change .larger { font-size: 1.25rem; } .site-header .utility-nav__item, .site-header .utility-nav__hbgItem { padding-left : 1rem; padding-right : 1rem; } .site-header .utility-nav__item a { height : 3.3rem; padding-top : 0.75rem; padding-bottom : 1.75rem; font-size : 1.125rem; letter-spacing : 0.1rem; } /* ::markerはliに自動付加される疑似要素 */ .site-header .utility-nav__item::marker { display: none; } @media (width < 1200px) { .site-header .globalMenu { display : none; } } @media (width < 992px) { .site-header a.site-header__title { top : 0; left : 0; } .site-header .navZone1 { display : none; } .site-header .navZone2 { height : 100%; } .site-header .navZone2 .primaryMenus { margin-top : 0; } } /* relayout per media width */ .site-header .showWhenOnlySp { display: none; } @media (width < 576px) { .site-header { aspect-ratio : 100 / 18; /* aspect-ratio : 527 / 97; */ } .site-header .showWhenOnlySp { display : block; } .site-header .hideWhenOnlySp { display : none; } .site-header .outerDrawer.color_change, .site-header .outerDrawer.textsize_change.hideWhenOnlySp { display : none; } .site-header .itemsHolder.positionRuler.logoRuler { width : 48vw; } .site-header .site-header__title { top : 0; left : 0; } .site-header .site-header__title-logo{ } .site-header .site-header__title .site-header__logo { left : 0; top : 0; } } /* 2025-07-固有調整追加(ここまで) */ /* =========================================== adjustPerSite ＞ ハンバーガーメニュー =========================================== */ :where(:root) { /* 「apex（頂点）」＞「aLT：左上（頂点）」,「aRT：右上（頂点）」 */ /* 「nWL」：no-width-Limit */ /* 「cZALT」：contents-Zone-aLT /* 「sH」：Site-Header */ --iSH-sH-maxHeight : 215; --hbgMn-width-default : 50; --hbgMn-width-using : var(--hbgMn-width-default); --hbgMn-height-default : calc(var(--hbgMn-width-default) * 1); --hbgMn-height-using : var(--hbgMn-height-default); --iSH-hbgMn-top-mobile-default : calc((var(--header-height) - var(--hbgMn-height-default)) / 2); --iSH-hbgMn-top-max : 120; --iSH-hbgMn-top-using : calc(var(--header-height) / var(--iSH-sH-maxHeight) * var(--iSH-hbgMn-top-max)); --iSH-hbgMn-left-max : 1280; --iSH-hbgMn-aLT-from-sH-cZLT : calc(var(--headerCZ-width) / 1400 * var(--iSH-hbgMn-left-max)); --iSH-hrz-btwn-hbgMn-aRT-to-drwrSrcn-aRT-dflt : calc(var(--sHDsgnBsRct002-sorW) - (var(--iSH-hbgMn-aLT-from-sH-cZLT) + var(--sHDsgnBsRct000-width))); --iSH-hrz-btwn-hbgMn-aRT-to-drwrSrcn-aRT-using : var(--iSH-hrz-btwn-hbgMn-aRT-to-drwrSrcn-aRT-dflt); --dmTyp-2-sHDsgnBsRct000-rsgnPrMd-W : var(--hbgMn-width-using); --dmTyp-2-sHDsgnBsRct000-rsgnPrMd-H : var(--hbgMn-height-using); --dmTyp-2-sHDsgnBsRct001-rsgnPrMd-W : var(--iSH-hrz-btwn-hbgMn-aRT-to-drwrSrcn-aRT-using); --dmTyp-2-sHDsgnBsRct001-rsgnPrMd-H : var(--iSH-hbgMn-top-using); --sHDsgnBsRct000-w-rsgnPrDmTy : var(--dmTyp-2-sHDsgnBsRct000-rsgnPrMd-W); --sHDsgnBsRct000-h-rsgnPrDmTy : var(--dmTyp-2-sHDsgnBsRct000-rsgnPrMd-H); --sHDsgnBsRct001-w-rsgnPrDmTy : var(--dmTyp-2-sHDsgnBsRct001-rsgnPrMd-W); --sHDsgnBsRct001-h-rsgnPrDmTy : var(--dmTyp-2-sHDsgnBsRct001-rsgnPrMd-H); } .hbgMenu { border : none; background-color : var(--hbgMenu-color-background-default); color : var(--color-text-default); } .hbgMenu-icon::before, .hbgMenu-icon::after, .hbgMenu-icon span { background-color : var(--color-background-hbgMenu-bar); } /* media */ @media (width < 992px) { :where(:root) { --iSH-hbgMn-top-max : 70; --iSH-hbgMn-left-max : 1260; /* --iSH-hbgMn-top-tablet-using : var(--iSH-hbgMn-top-mobile-default); */ --iSH-hbgMn-top-tablet-using : calc(((var(--header-height) - var(--sHDsgnBsRct000-h-rsgnPrDmTy)) / 2) * 0.8); --sHDsgnBsRct001-h-rsgnPrDmTy : calc(var(--iSH-hbgMn-top-tablet-using) * 1px); } } @media (width < 576px) { :where(:root) { --iSH-hbgMn-left-max : 1160; --sHDsgnBsRct000-w-rsgnPrDmTy : 54; --sHDsgnBsRct000-h-rsgnPrDmTy : 54; /* --iSH-hbgMn-top-mobile-using : var(--iSH-hbgMn-top-mobile-default); */ --iSH-hbgMn-top-mobile-using : calc(((var(--header-height) - var(--sHDsgnBsRct000-h-rsgnPrDmTy)) / 2) * 0.8); --sHDsgnBsRct001-w-rsgnPrDmTy : 16; --sHDsgnBsRct001-h-rsgnPrDmTy : var(--iSH-hbgMn-top-mobile-using); } } /* ============================================================ adjustPerSite ＞ Drawer（機能）＞ Drawer ============================================================ */ /* ============================================================ adjustPerSite ＞ Drawer（機能） ＞ Drawer ＞ UD ============================================================ */ /* ============================================================ adjustPerSite ＞ Drawer（機能） ＞ Drawer ＞ search ============================================================ */ .drwrScrn__itemsHolder .searchVUIHolder { width : 100%; } .drwrScrn__itemsHolder .searchTypeTitle { font-size: var(--font-size-18); } .drwrScrn__itemsHolder .likeSearchBtnInSearchKeyword { width : calc(100% - 10rem); } @media (width < 576px) { .drwrScrn__itemsHolder .searchTypeLabelHolder .searchTypeTitle { padding-bottom: 0.5rem; } .drwrScrn__itemsHolder .likeSearchBtnInSearchKeyword { width : 100%; } } /* ============================================================ adjustPerSite ＞ Drawer（機能） ＞ Drawer ＞ page control ============================================================ */ .drwrScrn__itemsHolder .searchOVIEHolder .search_btn { background-color: var(--color-site-proper-01-a); } .drwrScrn__itemsHolder .page_control, .drwrScrn__itemsHolder .page_control .UD { justify-content: space-around; } /* 2025-07-固有調整追加(ここから) */ /* まずは全体レイアウト(media指定なし,media指定あり[PC=>SP]) => 要素内レイアウト */ /* =============================== adjustPerSite ＞ Footer ================================ */ .site-footer { /* style */ background: var(--color-background-footer-default); } @media (width < 992px) { .site-footer .copyright p { font-size : 0.75rem; } } @media (width < 576px) { .site-footer .content { padding-inline : 0; } } /* 2025-07-固有調整追加(ここまで) */ /* ============================================================== adjustPerSite ＞ reread-link（表示中のページ上部（トップ）へ戻る） =============================================================== */ .reread-link { width : 74px; height : 74px; border : 0; } .pageBody{background: var(--color-site-proper-91-a);} .locus{background:var(--color-neutral-5);;padding:0.8em 0;margin: 0 0 0.5rem 0 ;} h1.content-title { /* layout */ position: relative; width: 100%; font-size: 2rem;background: #C8DFDE;padding:0.5rem 0.75rem;;border-radius:0.3rem;margin-bottom:1rem; } .txtbox{padding:1.5rem;background:#FFF;border-radius:0.5rem;box-shadow: var(--elevation-01);} /* 見出し */ .txtbox h2 {font-size:1.8rem;padding-left: .4em;margin-bottom:1rem;} .txtbox h3 {font-size:1.5rem;padding-left: .5em;margin-bottom:0.75rem;} .txtbox h4 {font-size:1.2rem;padding-left: .5em;margin-bottom:0.75rem;} .txtbox h5 {font-size:1.1rem;padding-left: .5em;margin-bottom:0.5rem;} .txtbox h6 {font-size:1.0rem;padding-left: .5em;margin-bottom:0.5rem;} /* table */ .txtbox table th{background-color: #C8DFDE;} .txtbox ul > li::before{background-color:#ECCAD0} @media (width < 1400px) { .txtbox{padding:1rem;margin:0 2%;} .locus{margin:0 2%;} } /* file type view */ a.sizeview { padding-left: 28px; background: 4px center no-repeat;} a.sizeview { background-image:url(../img/file_list_mark.png);} a.sizeview[href$=".pdf"] { background-image:url(../img/file_list_mark_pdf.png);} a.sizeview[href$=".doc"], a.sizeview[href$=".docx"] { background-image:url(../img/file_list_mark_doc.png);} a.sizeview[href$=".xls"], a.sizeview[href$=".xlsx"] { background-image:url(../img/file_list_mark_xls.png);} /* outside link */ a.outside,a.sizeview {padding-right: 0.2em; } a.outside:after, a.sizeview:after{ display: inline-block; content: ""; width: 0.9em; height: 0.9em; margin-left: 0.2em; background: center center no-repeat url("../img/ico_outside.png"); background-size: contain;} .page .pageBody .txtbox .box_menu_section ul > li::before{display:none;} .page .pageBody .txtbox .box_menu_section ul > li{padding:0;margin-bottom:0.5em;} .page .pageBody .txtbox .box_menu_section ul > li a{text-decoration:none;display:block;padding:0.5em;border-bottom:1.5px dashed #aaa;} .page .pageBody a{text-decoration: underline;} .page .pageBody a:hover{background:#ECCAD0;} body.top .kidspage img{width:100%;height:auto;max-width:1025px;margin:auto;display:block;} @media (width < 768px) { .site-header .site-header__title .site-header__logo{width:auto;height:auto;max-width:180px;} .pageBody{padding-top:20px;} } body.top .banner, body.top .textbanner{padding-top: 2.5em;display:flex;flex-wrap:wrap;gap:32px;width:100%;} body.top .banner li, body.top .textbanner li{width:calc(25% - 32px);text-align:center;box-sizing: border-box;} body.top .banner li img{width:auto;height:auto;max-width:100%;} body.top .textbanner li a{background:#FFF;padding:2em 0;display:block;width:100%;} @media (width < 1080px) {body.top .banner li,.textbanner li{width:calc(33.333% - 32px);}} @media (width < 768px) {body.top .banner li,.textbanner li{width:calc(50% - 32px);}} @media (width < 576px) {body.top .banner,body.top .textbanner{display:block;}body.top .banner li,body.top .textbanner li{width:100%;}body.top .banner li img{margin-bottom:16px;}body.top .textbanner li a{padding:1.5em 0;margin-bottom:16px;}}