@charset "UTF-8"; /* Grobal Selector */ /* ============================================ */ *, *::before, *::after { margin: 0; /* マージンは0に */ padding: 0; /* パディングも常に0に */ box-sizing: border-box; /* もちろん、より直感的なbox-sizingに設定 */ border-style: solid; border-width: 0; } /* Bug Fix */ /* ============================================ */ main { display: block; /* Render the `main` element consistently in IE. */ } details { display: block; /* Add the correct display in Edge, IE 10+, and Firefox. */ } summary { display: list-item; /* Add the correct display in all browsers. */ } textarea { overflow: auto; /* Remove the default vertical scrollbar in IE 10+. */ } input, textarea { -webkit-user-select: auto; /* Safari - solving issue when using user-select:none on the text input doesn't working */ } [type="number"] { -moz-appearance: textfield; /* Fix appearance for Firefox */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome. */ } [type="search"] { outline-offset: -2px; /* Correct the outline style in Safari. */ } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */ } ::-webkit-file-upload-button { -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */ font: inherit; /* Fix font inheritance. */ } :-moz-focusring { outline: auto; /* Improve outlines for Firefox and unify style with input elements & buttons. */ } select:disabled { opacity: inherit; /* Improve outlines for Firefox and unify style with input elements & buttons. */ } /* Styling & Fix */ /* ============================================ */ :where([hidden]:not([hidden='until-found'])) { display: none !important; /* hiddenは非表示を意味します */ } :where(html) { -webkit-text-size-adjust: none; /* iOSのランドスケープでテキストが調整されないようにする */ -webkit-tap-highlight-color: transparent; /* Remove gray overlay on links for iOS.*/ /*color-scheme: dark light;*/ /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */ } @supports not (min-block-size: 100dvb) { :where(html) { block-size: 100%; } } @media (prefers-reduced-motion: no-preference) { :where(html:focus-within) { scroll-behavior: smooth; /* 何かにフォーカスがある場合のみスムーズスクロール */ } } :where(body) { block-size: 100%; /* サファリ以外のブラウザのフォールバック */ block-size: 100dvb; /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */ line-height: 1.5; /* アクセシブルな行の高さ */ font-family: system-ui, sans-serif; /* timeの代わりにシステムフォントを使用 */ -webkit-font-smoothing: antialiased; /* テキストのレンダリングを改善 */ } :where(input, button, textarea, select, optgroup) { font: inherit; /* フォームコントロールは親フォントを継承 */ color: inherit; /* カラーも継承 */ -webkit-appearance: none; /* Make form elements stylable across systems iOS especially. */ appearance: none; vertical-align: middle; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit; /* Inherit text-transform from parent. */ } input[type="checkbox"] { transform: scale(1.5); appearance: auto ; margin: 3px 8px 3px 4px; } span.wpcf7-list-item { margin: 0 0 8px 1em !important; } :where(textarea) { resize: vertical; /* テキストエリアの水平リサイズを無効に */ resize: block; white-space: revert; /* revert the 'white-space' property for textarea elements on Safari */ } :where(progress) { vertical-align: baseline; /* vertical-align: baseline; */ } :where(meter) { -webkit-appearance: revert; /* minimum style to allow to style meter element */ appearance: revert; /* minimum style to allow to style meter element */ } :where(::placeholder) { color: unset; /* reset default text opacity of input placeholder */ } :where(button, label, select, summary, [type="button"], [type="reset"], [type="submit"], [role='button'], [role='option']) { cursor: pointer; /* インタラクティブなものにカーソルを合わせる */ } :where(:disabled) { cursor: not-allowed; /* フォームコントロール無効時のカーソルを許可しない */ } :where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor: not-allowed; /* ラベルにもカーソルを許可しない */ } :where(button) { border-style: solid; /* ボタンのボーダーのスタイルを設定しやすくする */ } :where(a) { text-underline-offset: 0.2ex; /* 下線の上にスペースを追加する */ } :where(ul, ol, menu) { list-style: none; /* ビュレットを削除、必要に応じて手動で追加する */ } :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; /* 置換された要素をより予測可能にする */ vertical-align: bottom; } :where(img, picture, svg) { max-inline-size: 100%; /* images should never overflow past the available space */ block-size: auto; /* アスペクト比を保持 */ } :where(fieldset) { /* Reset to invisible */ margin: 0; padding: 0; min-width: 0; } :where(table) { border-color: inherit; /* Correct table border color inheritance in all Chrome and Safari. */ border-collapse: collapse; /* removes spacing between cells in tables */ } :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; /* 長い単語は改行 */ } :where(h1, h2, h3) { line-height: calc(1em + 0.5rem); /* 見出しの行の高さを減らす */ } :where(address) { font-style: inherit; } :where(pre, code, kbd, samp) { font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */ font-size: inherit; /* Correct the odd `em` font sizing in all browsers. */ } :where(abbr[title]) { text-decoration: underline dotted; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ } :where(b, strong) { font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari. */ } :where(small) { font-size: 80%; /* Add the correct font size in all browsers. */ } :where(sub, sup) { /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } :where(sub) { bottom: -0.25em; } :where(sup) { top: -0.5em; } :where(hr) { /* より一貫性のある、スタイリッシュなhr */ border: none; border-block-start: 1px solid; color: inherit; block-size: 0; overflow: visible; /* Show the overflow in Edge and IE. */ box-sizing: content-box; /* Add the correct box sizing in Firefox. */ height: 0; /* Add the correct box sizing in Firefox. */ clear: both; } :where(:focus-visible) { /* より一貫性のある、カスタマイズ可能なフォーカスのアウトライン */ outline: 2px solid var(--focus-color, Highlight); outline-offset: 2px; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } :where([contenteditable]:focus) { outline: auto; /* Remove outline for editable content. */ } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } :where([hidden]) { display: none; /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ } /* .visually-hiddenは後のカスケードレイヤーを上書きするために!importantを使用 */ :where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) { clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; border: 0 !important; } /* Accessibility */ /* ============================================ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media screen { /* Hide content from screens but not screenreaders */ [hidden~="screen"] { display: inherit; } [hidden~="screen"]:not(:active):not(:focus):not(:target) { position: absolute !important; clip: rect(0 0 0 0) !important; } } [disabled] { cursor: not-allowed; } [aria-busy="true"] { /* Specify the progress cursor of updating elements */ cursor: progress; } [aria-controls] { /* Specify the pointer cursor of trigger elements */ cursor: pointer; } [aria-disabled] { /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ cursor: default; } [role='application'], [role='tabpanel'], [role='dialog'] { display: block; } [aria-hidden='false']{ display: block; } [aria-hidden="true"]{ display: none; } [aria-modal='true'] { overflow-y: auto; box-sizing: border-box; max-height: 100vh; } :focus:not(:focus-visible) { outline: none; } [data-screenreader], .visually-hidden{/** * Makes elements visually invisible but still accessible to screen-readers. * * This Css has been carefully tested to ensure screen-readers can read and * activate (in case of links and buttons) the elements with this class. Please * use caution when changing anything, even seemingly safe ones. For example * changing width from 1 to 0 would prevent TalkBack from activating (clicking) * buttons despite TalkBack reading them just fine. This is because * element needs to have a defined size and be on viewport otherwise TalkBack * does not allow activation of buttons. */ 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; visibility: visible !important; } /*:: Mobile Width Simulation ::*/ body[data-mobiletest] { width: 320px; margin: 0 auto; box-shadow: 0 0 8px #ccc; } body[data-mobiletest]::before { content: '! Mobile Width Simulation !'; text-align: center; font-weight: bold; background: yellow; display: block; padding: 1em; } /*[ dialog Setting ]----------------------------------------------------------------*/ [data-component="modalContents"]{ display: none; overflow: scroll; position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 2em; } @media screen and (max-width: 768px) { [data-component="modalContents"]{ height: auto; } } [data-component="modalContents"][aria-modal="true"]{ display: grid; place-items: center; } [data-component="modalContents"] > [data-trigger="closeModal"]{ position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-component="modalContents"] [data-component="modalBody"]{ position: relative; z-index: 150; aspect-ratio: 16 / 9; width: 100%; } [data-component="modalContents"] [data-component="modalBody"] iframe{ width: 100%; height: 100%; } [data-component="modalContents"] menu{ position: fixed; top: 12px; right: 12px; z-index: 110; display: block; height: 40px; width: 40px; } @media screen and (max-width: 768px) { [data-component="modalContents"] menu{ top: 8px; right: 8px; } } [data-component="modalContents"] menu > li{ display: block; height: 100%; width: 100%; } [data-component="modalContents"] menu > li > [data-trigger]{ display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }