/*
 * The default style sheet used to render HTML.
 *
 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
 * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Library General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Library General Public License for more details.
 *
 * You should have received a copy of the GNU Library General Public License
 * along with this library; see the file COPYING.LIB.  If not, write to
 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
 * Boston, MA 02110-1301, USA.
 *
 */
 @namespace "http://www.w3.org/1999/xhtml";
 html {
   display: block;
   margin-top: 0 !important;
 }
 :root {
   view-transition-name: root;
 }
 :active-view-transition {
   view-transition-name: root;
 }
 /* generic block-level elements */
 body {
   display: block;
   margin: 8px;
 }
 body:-webkit-full-page-media {
   background-color: rgb(0, 0, 0);
 }
 p {
   display: block;
   margin-block-start: 1__qem;
   margin-block-end: 1__qem;
   margin-inline-start: 0;
   margin-inline-end: 0;
   line-height: normal;
 }
 div {
   display: block;
 }
 article,
 aside,
 footer,
 header,
 hgroup,
 main,
 nav,
 search,
 section {
   display: block;
 }
 marquee {
   display: inline-block;
   width: -webkit-fill-available;
 }
 address {
   display: block;
 }
 blockquote {
   display: block;
   margin-block-start: 1__qem;
   margin-block-end: 1em;
   margin-inline-start: 40px;
   margin-inline-end: 40px;
 }
 figcaption {
   display: block;
 }
 figure {
   display: block;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 40px;
   margin-inline-end: 40px;
 }
 q {
   display: inline;
 }
 q:before {
   content: open-quote;
 }
 q:after {
   content: close-quote;
 }
 center {
   display: block;
   /* special centering to be able to emulate the html4/netscape behaviour */
   text-align: -webkit-center;
 }
 hr {
   display: block;
   overflow: hidden;
   margin-block-start: 0.5em;
   margin-block-end: 0.5em;
   margin-inline-start: auto;
   margin-inline-end: auto;
   border-style: inset;
   border-width: 1px;
   color: gray;
 }
 map {
   display: inline;
 }
 video {
   object-fit: contain;
 }
 video:-webkit-full-page-media {
   margin: auto;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   max-height: 100%;
   max-width: 100%;
 }
 audio:not([controls]) {
   display: none !important;
 }
 /** TODO(crbug.com/985623): Remove these hard-coded audio tag size.
   * This fixed audio tag width/height leads to fail the wpt tests below.
   * crbug.com/955170 external/wpt/css/css-contain/contain-size-replaced-003a.html
   * crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003b.html
   * crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003c.html
   */
 audio {
   width: 300px;
   height: 54px;
 }
 video,
 canvas,
 img {
   overflow: clip;
   overflow-clip-margin: content-box;
 }
 iframe,
 embed,
 object,
 fencedframe {
   overflow: clip !important;
   overflow-clip-margin: content-box !important;
 }
 /* heading elements */
 h1 {
   display: block;
   font-size: 2em;
   margin-block-start: 0.67__qem;
   margin-block-end: 0.67em;
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-weight: bold;
 }
 @supports blink-feature(SpecialRulesForNestedH1Elements) {
   :-webkit-any(article, aside, nav, section) h1 {
     font-size: 1.5em;
     margin-block-start: 0.83__qem;
     margin-block-end: 0.83em;
   }
   :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     h1 {
     font-size: 1.17em;
     margin-block-start: 1__qem;
     margin-block-end: 1em;
   }
   :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     h1 {
     font-size: 1em;
     margin-block-start: 1.33__qem;
     margin-block-end: 1.33em;
   }
   :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     h1 {
     font-size: 0.83em;
     margin-block-start: 1.67__qem;
     margin-block-end: 1.67em;
   }
   :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     :-webkit-any(article, aside, nav, section)
     h1 {
     font-size: 0.67em;
     margin-block-start: 2.33__qem;
     margin-block-end: 2.33em;
   }
 }
 h2 {
   display: block;
   font-size: 1.5em;
   margin-block-start: 0.83__qem;
   margin-block-end: 0.83em;
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-weight: bold;
   line-height: normal;
 }
 h3 {
   display: block;
   font-size: 1.17em;
   margin-block-start: 1__qem;
   margin-block-end: 1em;
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-weight: bold;
 }
 h4 {
   display: block;
   margin-block-start: 1.33__qem;
   margin-block-end: 1.33em;
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-weight: bold;
 }
 h5 {
   display: block;
   font-size: 0.83em;
   margin-block-start: 1.67__qem;
   margin-block-end: 1.67em;
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-weight: bold;
 }
 h6 {
   display: block;
   font-size: 0.67em;
   margin-block-start: 2.33__qem;
   margin-block-end: 2.33em;
   margin-inline-start: 0;
   margin-inline-end: 0;
   font-weight: bold;
 }
 /* tables */
 table {
   display: table;
   border-collapse: separate;
   border-spacing: 2px;
   border-color: gray;
   box-sizing: border-box;
   text-indent: initial;
 }
 thead {
   display: table-header-group;
   vertical-align: middle;
   border-color: inherit;
 }
 tbody {
   display: table-row-group;
   vertical-align: middle;
   border-color: inherit;
 }
 tfoot {
   display: table-footer-group;
   vertical-align: middle;
   border-color: inherit;
 }
 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
 table > tr {
   vertical-align: middle;
 }
 col {
   display: table-column;
 }
 colgroup {
   display: table-column-group;
 }
 tr {
   display: table-row;
   vertical-align: inherit;
   border-color: inherit;
 }
 td,
 th {
   display: table-cell;
   vertical-align: inherit;
 }
 /* When the td/th are inside a table (the normal case), the padding is taken
     care of by HTMLTableCellElement::AdditionalPresentationAttributeStyle(). */
 td:not(table td),
 th:not(table th) {
   padding: 1px;
 }
 th {
   font-weight: bold;
   text-align: -internal-center;
 }
 caption {
   display: table-caption;
   text-align: -webkit-center;
 }
 /* lists */
 ul,
 menu,
 dir {
   display: block;
   list-style-type: disc;
   margin-block-start: 1__qem;
   margin-block-end: 1em;
   padding-inline-start: 40px;
 }

 ul {
  padding-inline-start: 0;
 }
 ol {
   display: block;
   list-style-type: decimal;
   margin-block-start: 1__qem;
   margin-block-end: 1em;
   padding-inline-start: 40px;
 }
 li {
   display: list-item;
   text-align: match-parent;
 }
 :is(dir, dl, menu, ol, ul) dir,
 :is(dir, dl, menu, ol, ul) dl,
 :is(dir, dl, menu, ol, ul) menu,
 :is(dir, dl, menu, ol, ul) ol,
 :is(dir, dl, menu, ol, ul) ul {
   margin-block-start: 0;
   margin-block-end: 0;
 }
 :is(dir, menu, ol, ul) dir,
 :is(dir, menu, ol, ul) menu,
 :is(dir, menu, ol, ul) ul {
   list-style-type: circle;
 }
 :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) dir,
 :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) menu,
 :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) ul {
   list-style-type: square;
 }
 /* TODO(crbug.com/40774317, crbug.com/354025385): We should add rule
     ol, ul, menu { counter-reset: list-item; }
     once it is supported. */
 dd {
   display: block;
   margin-inline-start: 40px;
 }
 dl {
   display: block;
   margin-block-start: 1__qem;
   margin-block-end: 1em;
 }
 dt {
   display: block;
 }
 /* form elements */
 form {
   display: block;
   margin-top: 0__qem;
 }
 :-webkit-any(table, thead, tbody, tfoot, tr) > form:-internal-is-html {
   display: none !important;
 }
 label {
   cursor: default;
 }
 fieldset {
   display: block;
   margin-inline: 2px;
   border: groove 2px ThreeDFace;
   padding-block: 0.35em 0.625em;
   padding-inline: 0.75em;
   min-inline-size: min-content;
 }
 legend {
   display: block;
   padding-inline: 2px;
 }
 legend[align="left" i] {
   justify-self: left;
 }
 legend[align="center" i] {
   justify-self: center;
 }
 legend[align="right" i] {
   justify-self: right;
 }
 button {
   appearance: auto;
   -internal-align-content-block: center;
 }
 input,
 textarea,
 select,
 button {
   margin: 0__qem;
   font: -webkit-small-control;
   text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
   color: FieldText;
   letter-spacing: normal;
   word-spacing: normal;
   line-height: normal;
   text-transform: none;
   text-indent: 0;
   text-shadow: none;
   display: inline-block;
   text-align: start;
 }
 textarea {
   appearance: auto;
   border: 1px solid light-dark(#767676, #858585);
   column-count: initial !important;
   -webkit-rtl-ordering: logical;
   resize: -internal-textarea-auto;
   cursor: text;
   padding: 2px;
   white-space: pre-wrap;
   word-wrap: break-word;
   background-color: Field;
   font-family: monospace;
 }
 input {
   appearance: auto;
   padding: 1px 0;
   border: 2px inset light-dark(#767676, #858585);
   -webkit-rtl-ordering: logical;
   cursor: text;
   background-color: Field;
 }
 input:not(
     [type="file" i],
     [type="image" i],
     [type="checkbox" i],
     [type="radio" i]
   ) {
   -internal-align-content-block: center;
 }
 input[type="search" i] {
   appearance: auto;
   box-sizing: border-box;
 }
 input::-webkit-textfield-decoration-container {
   display: flex !important;
   align-items: center;
   -webkit-user-modify: read-only !important;
   content: none !important;
   writing-mode: inherit !important;
 }
 input::-webkit-clear-button {
   appearance: auto;
   display: inline-block;
   cursor: default;
   flex: none;
   -webkit-user-modify: read-only !important;
   margin-inline-start: 2px;
   opacity: 0;
   pointer-events: none;
 }
 input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-clear-button {
   opacity: 1;
   pointer-events: auto;
 }
 input[type="search" i]::-webkit-search-cancel-button {
   appearance: auto;
   display: block;
   cursor: default;
   flex: none;
   -webkit-user-modify: read-only !important;
   margin-inline-start: 1px;
   margin-inline-end: 3px;
   opacity: 0;
   pointer-events: none;
   user-select: none !important;
 }
 input[type="search" i]:enabled:read-write:-webkit-any(
     :focus,
     :hover
   )::-webkit-search-cancel-button {
   opacity: 1;
   pointer-events: auto;
 }
 input[type="search" i]::-webkit-search-results-decoration {
   margin: auto 3px auto 2px;
 }
 input,
 input[type="email" i],
 input[type="number" i],
 input[type="password" i],
 input[type="search" i],
 input[type="tel" i],
 input[type="text" i],
 input[type="url" i] {
   padding-block: 1px;
   padding-inline: 2px;
 }
 input[type="tel" i] {
   direction: ltr;
 }
 input::-webkit-inner-spin-button {
   appearance: auto;
   display: inline-block;
   cursor: default;
   flex: none;
   align-self: stretch;
   -webkit-user-modify: read-only !important;
   opacity: 0;
   pointer-events: none;
 }
 input:enabled:read-write:-webkit-any(
     :focus,
     :hover
   )::-webkit-inner-spin-button {
   opacity: 1;
   pointer-events: auto;
 }
 ::-webkit-input-placeholder {
   -webkit-text-security: none;
   color: #757575;
   direction: inherit !important;
   pointer-events: none !important;
   text-orientation: inherit !important;
   writing-mode: inherit !important;
 }
 input::-webkit-input-placeholder {
   text-overflow: inherit;
   line-height: initial !important;
   white-space: pre;
   word-wrap: normal;
   overflow: hidden;
   -webkit-user-modify: read-only !important;
 }
 input::-internal-input-suggested {
   text-overflow: inherit;
   white-space: nowrap;
   overflow: hidden;
 }
 input::-internal-input-suggested,
 textarea::-internal-input-suggested {
   font: -webkit-small-control !important;
   /* -webkit-small-control does not pin the font-feature-settings and we want
         previews to look consistent. */
   font-feature-settings: normal !important;
   /* Prevent that overflow affects the scrollable area. Without this,
         LayoutBox::*Scroll{Height,Width}() may determine the scroll width/height
         from the scrollable area instead of from the overrides in
         LayoutTextControl{Single,Multi}Line::Scroll{Height,Width}(). */
   overflow: hidden !important;
   overflow-anchor: none;
 }
 textarea::-internal-input-suggested {
   font-family: monospace !important;
 }
 input[type="password" i] {
   -webkit-text-security: disc !important;
 }
 input[type="password" i]::-internal-input-suggested:not(.reveal-password) {
   -webkit-text-security: disc !important;
 }
 input[type="password" i]::-internal-input-suggested.reveal-password {
   -webkit-text-security: none;
 }
 input[type="password" i]::-internal-reveal {
   width: 1.3em;
   height: 1.3em;
   cursor: default;
   flex: none;
   background-image: url(images/password_reveal_on.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   margin-left: 3px;
   margin-right: 3px;
 }
 input[type="password" i]::-internal-reveal.reveal {
   background-image: url(images/password_reveal_off.svg);
 }
 input[type="password" i]::-internal-reveal:hover,
 input[type="password" i]::-internal-reveal:focus {
   border-radius: 1px;
   cursor: pointer;
 }
 input[type="hidden" i],
 input[type="image" i],
 input[type="file" i] {
   appearance: none;
   padding: initial;
   background-color: initial;
   border: initial;
   cursor: default;
 }
 input[type="file" i] {
   align-items: baseline;
   color: inherit;
   text-align: start !important;
   /* Prevent a malicious author from using a custom string for text-overflow
         to spoof a filename. */
   text-overflow: ellipsis !important;
   white-space: pre;
 }
 input[type="image" i] {
   cursor: pointer;
 }
 input[type="radio" i],
 input[type="checkbox" i] {
   margin: 3px 3px 3px 4px;
   padding: initial;
   background-color: initial;
   border: initial;
   cursor: default;
 }
 input[type="radio" i] {
   margin: 3px 3px 0 5px;
 }
 input[type="button" i],
 input[type="submit" i],
 input[type="reset" i] {
   -internal-empty-line-height: fabricated;
   appearance: auto;
   user-select: none;
   white-space: pre;
 }
 input[type="file" i]::-webkit-file-upload-button {
   appearance: auto;
   -webkit-user-modify: read-only !important;
   white-space: nowrap;
   margin: 0;
   margin-inline-end: 4px; /* See FileUploadControlIntrinsicInlineSize() */
   font-size: inherit;
 }
 input[type="button" i],
 input[type="submit" i],
 input[type="reset" i],
 input[type="file" i]::-webkit-file-upload-button,
 button {
   text-align: center;
   cursor: default;
   padding-block: 1px;
   padding-inline: 6px;
   border: 2px outset ButtonBorder;
   box-sizing: border-box;
   background-color: ButtonFace;
   color: ButtonText;
 }
 input[type="checkbox" i]:disabled,
 input[type="file" i]:disabled,
 input[type="hidden" i]:disabled,
 input[type="image" i]:disabled,
 input[type="radio" i]:disabled,
 input[type="range" i]:disabled {
   background-color: initial;
 }
 input[type="range" i] {
   appearance: auto;
   padding: initial;
   border: initial;
   margin: 2px;
   cursor: default;
   color: light-dark(#101010, #ffffff);
 }
 input[type="range" i]::-webkit-slider-container,
 input[type="range" i]::-webkit-media-slider-container {
   appearance: inherit;
   flex: 1;
   min-inline-size: 0;
   box-sizing: border-box;
   -webkit-user-modify: read-only !important;
   display: flex;
 }
 input[type="range" i]:-internal-has-datalist::-webkit-slider-container {
   /*
       * See LayoutThemeDefault. "22px" is
       * 2 * (SliderTickOffsetFromTrackCenter() + SliderTickSize().Height()).
       */
   min-block-size: 22px;
 }
 input[type="range" i]::-webkit-slider-runnable-track {
   flex: 1;
   min-inline-size: 0;
   align-self: center;
   box-sizing: border-box;
   -webkit-user-modify: read-only !important;
   display: block;
 }
 input[type="range" i]::-webkit-slider-thumb,
 input[type="range" i]::-webkit-media-slider-thumb {
   appearance: auto;
   box-sizing: border-box;
   -webkit-user-modify: read-only !important;
   display: block;
 }
 input[type="range" i]:disabled {
   color: #c5c5c5;
 }
 input[type="button" i]:disabled,
 input[type="submit" i]:disabled,
 input[type="reset" i]:disabled,
 input[type="color" i]:disabled,
 input[type="file" i]:disabled::-webkit-file-upload-button,
 button:disabled {
   background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
   border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
   color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
 }
 input[type="button" i]:active,
 input[type="submit" i]:active,
 input[type="reset" i]:active,
 input[type="file" i]:active::-webkit-file-upload-button,
 button:active {
   border-style: inset;
 }
 input[type="button" i]:active:disabled,
 input[type="submit" i]:active:disabled,
 input[type="reset" i]:active:disabled,
 input[type="file" i]:active:disabled::-webkit-file-upload-button,
 button:active:disabled {
   border-style: outset;
 }
 input:disabled,
 textarea:disabled {
   cursor: default;
   background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
   color: light-dark(#545454, #aaaaaa);
 }
 option:-internal-spatial-navigation-focus {
   outline: light-dark(black, white) dashed 1px;
   outline-offset: -1px;
 }
 input:not(
     [type="image" i],
     [type="range" i],
     [type="checkbox" i],
     [type="radio" i]
   ) {
   overflow: clip !important;
   overflow-clip-margin: 0px !important;
 }
 /* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements */
 /* TODO(crbug.com/1231263): <area> should be display:none. */
 area {
   display: inline;
 }
 base,
 basefont,
 datalist,
 head,
 link,
 meta,
 noembed,
 noframes,
 param,
 rp,
 script,
 style,
 template,
 title {
   display: none;
 }
 input[type="hidden" i] {
   display: none !important;
 }
 area:-webkit-any-link {
   cursor: pointer;
 }
 input[type="checkbox" i] {
   appearance: auto;
   box-sizing: border-box;
 }
 input[type="radio" i] {
   appearance: auto;
   box-sizing: border-box;
 }
 input[type="color" i] {
   appearance: auto;
   inline-size: 50px;
   block-size: 27px;
   /* Same as native_theme_base. */
   border: 1px solid ButtonBorder;
   padding: 1px 2px;
   cursor: default;
   box-sizing: border-box;
 }
 input[type="color" i]::-webkit-color-swatch-wrapper {
   display: flex;
   padding: 4px 2px;
   box-sizing: border-box;
   -webkit-user-modify: read-only !important;
   width: 100%;
   height: 100%;
 }
 input[type="color" i]::-webkit-color-swatch {
   /* The swatch should not be affected by color scheme. */
   color-scheme: only light;
   background-color: #000000;
   border: 1px solid #777777;
   flex: 1;
   min-width: 0;
   -webkit-user-modify: read-only !important;
 }
 input::-webkit-calendar-picker-indicator {
   display: inline-block;
   inline-size: 0.66em;
   block-size: 0.66em;
   padding-block: 0.17em;
   padding-inline: 0.34em;
   -webkit-user-modify: read-only !important;
   opacity: 0;
   cursor: default;
   pointer-events: none;
 }
 input::-webkit-calendar-picker-indicator:hover {
   background-color: #eee;
 }
 input:enabled:read-write:-webkit-any(
     :focus,
     :hover
   )::-webkit-calendar-picker-indicator,
 input::-webkit-calendar-picker-indicator:focus {
   opacity: 1;
   pointer-events: auto;
 }
 input[type="date" i]:disabled::-webkit-clear-button,
 input[type="date" i]:disabled::-webkit-inner-spin-button,
 input[type="datetime-local" i]:disabled::-webkit-clear-button,
 input[type="datetime-local" i]:disabled::-webkit-inner-spin-button,
 input[type="month" i]:disabled::-webkit-clear-button,
 input[type="month" i]:disabled::-webkit-inner-spin-button,
 input[type="week" i]:disabled::-webkit-clear-button,
 input[type="week" i]:disabled::-webkit-inner-spin-button,
 input:disabled::-webkit-calendar-picker-indicator,
 input[type="date" i][readonly]::-webkit-clear-button,
 input[type="date" i][readonly]::-webkit-inner-spin-button,
 input[type="datetime-local" i][readonly]::-webkit-clear-button,
 input[type="datetime-local" i][readonly]::-webkit-inner-spin-button,
 input[type="month" i][readonly]::-webkit-clear-button,
 input[type="month" i][readonly]::-webkit-inner-spin-button,
 input[type="week" i][readonly]::-webkit-clear-button,
 input[type="week" i][readonly]::-webkit-inner-spin-button,
 input[readonly]::-webkit-calendar-picker-indicator {
   visibility: hidden;
 }
 /* Form controls that measure the inline size without doing actual layout
     need to disable `text-autospace`, if their content can be affected by
     the property. crbug.com/1484863 */
 input[type="date" i],
 input[type="datetime-local" i],
 input[type="month" i],
 input[type="week" i],
 select {
   text-autospace: no-autospace !important;
 }
 select {
   appearance: auto;
   box-sizing: border-box;
   align-items: center;
   white-space: pre;
   -webkit-rtl-ordering: logical;
   color: FieldText;
   background-color: Field;
   border: 1px solid light-dark(#767676, #858585);
   cursor: default;
   border-radius: 0;
 }
 select:disabled {
   @supports blink-feature(CustomizableSelectInPage) {
     opacity: -internal-auto-base(0.7, unset);
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     opacity: 0.7;
   }
 }
 /* -internal-list-box is how we specify select[multiple] */
 /* select[multiple] is an exception to the prohibition on sizes here
     because it is one of the few controls with borders that grow on zoom
     (to solve a nasty scrollbar location problem) */
 select:-internal-list-box {
   appearance: auto;
   @supports blink-feature(CustomizableSelectInPage) {
     border-radius: -internal-auto-base(2px, 0);
     align-items: -internal-auto-base(flex-start, initial);
     overflow-inline: -internal-auto-base(hidden, auto);
     overflow-block: -internal-auto-base(scroll, auto);
     vertical-align: -internal-auto-base(text-bottom, initial);
     white-space: -internal-auto-base(nowrap, inherit);
     field-sizing: -internal-auto-base(initial, content);
     border: -internal-auto-base(
       1px solid light-dark(#767676, #858585),
       1px solid currentColor
     );
     box-sizing: -internal-auto-base(border-box, initial);
     block-size: -internal-auto-base(
       initial,
       calc(max(24px, 1lh) * attr(size type(<integer>), 4))
     );
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     border-radius: 2px;
     align-items: flex-start;
     overflow-inline: hidden;
     overflow-block: scroll;
     vertical-align: text-bottom;
     white-space: nowrap;
   }
 }
 select:not(:-internal-list-box) {
   overflow: visible !important;
 }
 /* The padding here should match the value of
     |extraPaddingForOptionInsideOptgroup| in list_picker.js, which is the
     padding for select optgroup option. */
 select:-internal-list-box optgroup option {
   @supports blink-feature(CustomizableSelectInPage) {
     padding-inline-start: -internal-auto-base(20px, 0.5em);
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     padding-inline-start: 20px;
   }
 }
 /* TODO(crbug.com/357649033): This line-height rule can't be undone for
   * customizable select multiple because we can't put !important inside
   * -internal-auto-base(). */
 select:-internal-list-box option,
 select:-internal-list-box optgroup {
   line-height: initial !important;
 }
 /* option selected, list-box focused.
   * Sites are relying on the !important here: http://crbug.com/415953695 */
 select:-internal-list-box:focus option:checked,
 select:-internal-list-box:focus option:checked:hover {
   background-color: SelectedItem !important;
   color: SelectedItemText !important;
 }
 select:-internal-list-box:focus option:checked:disabled {
   background-color: -internal-inactive-list-box-selection !important;
 }
 /* option selected, list-box not focused */
 @supports blink-feature(CustomizableSelectInPage) {
   select:-internal-list-box option:checked,
   select:-internal-list-box option:checked:hover {
     background-color: -internal-auto-base(
       light-dark(#cecece, #545454),
       transparent
     );
     color: -internal-auto-base(light-dark(#101010, #ffffff), inherit);
   }
   select:-internal-list-box:not(:focus) option:checked:enabled:hover,
   select:-internal-list-box:not(:focus) option:checked:enabled:active {
     background-color: -internal-auto-base(
       light-dark(#cecece, #545454),
       color-mix(in lab, currentColor 10%, transparent)
     );
   }
   select:-internal-list-box option:checked:disabled:hover,
   select:-internal-list-box option:checked:disabled:active {
     background-color: -internal-auto-base(
       light-dark(#cecece, #545454),
       color-mix(in lab, currentColor 50%, transparent)
     );
   }
 }
 @supports not blink-feature(CustomizableSelectInPage) {
   select:-internal-list-box option:checked,
   select:-internal-list-box option:checked:hover {
     background-color: light-dark(#cecece, #545454);
     color: light-dark(#101010, #ffffff);
   }
 }
 select:-internal-list-box:disabled option:checked,
 select:-internal-list-box option:checked:disabled,
 select:-internal-list-box option:checked:disabled:hover {
   @supports blink-feature(CustomizableSelectInPage) {
     color: -internal-auto-base(
       light-dark(gray, #aaa),
       color-mix(in lab, currentColor 50%, transparent)
     );
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     color: light-dark(gray, #aaa);
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   select:-internal-list-box:disabled option:checked {
     /* base color is set to inherit here because we are inheriting a color that
           * is already 50% transparent from select:disabled. */
     color: -internal-auto-base(light-dark(gray, #aaa), inherit);
   }
 }
 /* TODO(crbug.com/406464760): decide on <hr> styles for customizable select
   * multiple. */
 select:-internal-list-box hr {
   border-style: none;
   margin-block-start: 0.5em;
   margin-block-end: 0;
 }
 /* TODO(crbug.com/357649033): Consider undoing these styles for customizable
   * select. It is unlikely that they will be hit because customizable select
   * in-page is not focusable by default. */
 select:-internal-list-box:focus-visible option:-internal-multi-select-focus {
   outline: auto 1px -webkit-focus-ring-color;
   outline-offset: -1px;
 }
 @supports blink-feature(CustomizableSelectInPage) {
   select option:enabled:hover {
     background-color: -internal-auto-base(
       initial,
       color-mix(in lab, currentColor 10%, transparent)
     );
   }
 }
 @supports not blink-feature(CustomizableSelectInPage) {
   select:-internal-list-box option:hover {
     background-color: initial;
   }
 }
 optgroup {
   font-weight: bolder;
   display: block;
 }
 optgroup::-internal-optgroup-label {
   padding: 0 2px 1px 2px;
   min-height: 1.2em;
 }
 option {
   @supports blink-feature(CustomizableSelectInPage) {
     font-weight: -internal-auto-base(normal, inherit);
     display: -internal-auto-base(block, flex);
     padding-inline: -internal-auto-base(2px, 0.5em);
     padding-block-start: 0;
     padding-block-end: -internal-auto-base(1px, 0);
     white-space: nowrap;
     min-inline-size: -internal-auto-base(unset, 24px);
     min-block-size: -internal-auto-base(1.2em, max(24px, 1lh));
     gap: -internal-auto-base(unset, 0.5em);
     align-items: -internal-auto-base(unset, center);
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     font-weight: normal;
     display: block;
     padding-inline: 2px;
     padding-block-start: 0;
     padding-block-end: 1px;
     white-space: nowrap;
     min-block-size: 1.2em;
   }
 }
 /* The following select style rules have to go after the other
     select styles in order to have higher precedence. */
 /* TODO(crbug.com/880258): Use different styles for
    `-internal-autofill-previewed` and `-internal-autofill-selected`. */
 input:-internal-autofill-previewed,
 input:-internal-autofill-selected,
 textarea:-internal-autofill-previewed,
 textarea:-internal-autofill-selected,
 select:-internal-autofill-previewed,
 select:-internal-autofill-selected {
   appearance: menulist-button;
   background-image: none !important;
   background-color: light-dark(#e8f0fe, rgba(70, 90, 126, 0.4)) !important;
   color: FieldText !important;
 }
 input:disabled,
 textarea:disabled {
   border-color: rgba(118, 118, 118, 0.3);
 }
 select:disabled {
   @supports blink-feature(CustomizableSelectInPage) {
     border-color: -internal-auto-base(rgba(118, 118, 118, 0.3), currentColor);
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     border-color: rgba(118, 118, 118, 0.3);
   }
 }
 select:disabled,
 optgroup:disabled,
 option:disabled,
 select[disabled] > option {
   @supports blink-feature(CustomizableSelectInPage) {
     color: -internal-auto-base(
       light-dark(GrayText, #aaa),
       color-mix(in lab, currentColor 50%, transparent)
     );
   }
   @supports not blink-feature(CustomizableSelectInPage) {
     color: light-dark(GrayText, #aaa);
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   /* base color is set to inherit here because we are inheriting a color that
       * is already 50% transparent from select:disabled. */
   select:disabled option,
   optgroup:disabled option {
     color: -internal-auto-base(light-dark(GrayText, #aaa), inherit);
   }
 }
 output {
   display: inline;
 }
 /* meter */
 meter {
   -webkit-user-modify: read-only !important;
   appearance: auto;
   block-size: 1em;
   box-sizing: border-box;
   display: inline-block;
   inline-size: 5em;
   vertical-align: -0.2em;
 }
 meter::-webkit-meter-inner-element {
   -webkit-user-modify: read-only !important;
   appearance: inherit;
   block-size: 100%;
   box-sizing: inherit;
   display: grid;
   grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
   inline-size: 100%;
   position: relative;
 }
 meter::-webkit-meter-bar {
   -webkit-user-modify: read-only !important;
   align-self: unsafe center;
   background: linear-gradient(
     to bottom,
     #ddd,
     #eee 20%,
     #ccc 45%,
     #ccc 55%,
     #ddd
   );
   block-size: 100%;
   box-sizing: border-box;
   grid-row-end: line2;
   grid-row-start: line1;
   inline-size: 100%;
   overflow: hidden;
   position: absolute;
 }
 meter::-webkit-meter-bar:-internal-shadow-host-has-non-auto-appearance {
   background: light-dark(#efefef, #3b3b3b);
   border-radius: 20px;
   border: thin solid light-dark(rgba(118, 118, 118, 0.3), #858585);
 }
 meter::-webkit-meter-optimum-value {
   -webkit-user-modify: read-only !important;
   background: linear-gradient(
     to bottom,
     #ad7,
     #cea 20%,
     #7a3 45%,
     #7a3 55%,
     #ad7
   );
   block-size: 100%;
   box-sizing: border-box;
 }
 meter::-webkit-meter-optimum-value:-internal-shadow-host-has-non-auto-appearance {
   background: light-dark(#107c10, #74b374);
 }
 meter::-webkit-meter-suboptimum-value {
   -webkit-user-modify: read-only !important;
   background: linear-gradient(
     to bottom,
     #fe7,
     #ffc 20%,
     #db3 45%,
     #db3 55%,
     #fe7
   );
   block-size: 100%;
   box-sizing: border-box;
 }
 meter::-webkit-meter-suboptimum-value:-internal-shadow-host-has-non-auto-appearance {
   background: light-dark(#ffb900, #f2c812);
 }
 meter::-webkit-meter-even-less-good-value {
   -webkit-user-modify: read-only !important;
   background: linear-gradient(
     to bottom,
     #f77,
     #fcc 20%,
     #d44 45%,
     #d44 55%,
     #f77
   );
   block-size: 100%;
   box-sizing: border-box;
 }
 meter::-webkit-meter-even-less-good-value:-internal-shadow-host-has-non-auto-appearance {
   background: light-dark(#d83b01, #e98f6d);
 }
 /* progress */
 progress {
   appearance: auto;
   box-sizing: border-box;
   display: inline-block;
   block-size: 1em;
   inline-size: 10em;
   vertical-align: -0.2em;
 }
 progress::-webkit-progress-inner-element {
   box-sizing: inherit;
   -webkit-user-modify: read-only;
   block-size: 100%;
   inline-size: 100%;
 }
 progress::-webkit-progress-bar {
   background-color: gray;
   block-size: 100%;
   inline-size: 100%;
   -webkit-user-modify: read-only !important;
   box-sizing: border-box;
 }
 progress::-webkit-progress-value {
   background-color: green;
   block-size: 100%;
   inline-size: 50%; /* should be removed later */
   -webkit-user-modify: read-only !important;
   box-sizing: border-box;
 }
 /* inline elements */
 u,
 ins {
   text-decoration: underline;
 }
 abbr[title],
 acronym[title] {
   text-decoration: dotted underline;
 }
 strong,
 b {
   font-weight: bolder;
 }
 i,
 cite,
 em,
 var,
 address,
 dfn {
   font-style: italic;
 }
 tt,
 code,
 kbd,
 samp {
   font-family: monospace;
 }
 pre,
 xmp,
 plaintext,
 listing {
   display: block;
   font-family: monospace;
   white-space: pre;
   margin-block: 1__qem;
   margin-inline: 0;
 }
 mark {
   background-color: Mark;
   color: MarkText;
 }
 big {
   font-size: larger;
 }
 small {
   font-size: smaller;
 }
 s,
 strike,
 del {
   text-decoration: line-through;
 }
 sub {
   vertical-align: sub;
   font-size: smaller;
 }
 sup {
   vertical-align: super;
   font-size: smaller;
 }
 nobr {
   white-space: nowrap;
 }
 /* states */
 :-internal-selector-fragment-anchor {
   outline: Highlight 3px solid;
 }
 :focus-visible {
   outline: auto 1px -webkit-focus-ring-color;
 }
 button[interestfor] {
   user-select: none;
 }
 [interestfor]::interest-hint {
   user-select: none;
   color: buttontext;
   display: inline-block;
   text-align: center;
   cursor: default;
   background-color: buttonface;
   margin-inline-start: 0.5em;
   padding-block: 1px;
   padding-inline: 6px;
   border-width: 1px;
   border-radius: 5px;
   border-style: outset;
   border-color: buttonborder;
 }
 html:focus-visible,
 body:focus-visible {
   outline: none;
 }
 embed:focus-visible,
 iframe:focus-visible,
 object:focus-visible {
   outline: none;
 }
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
   outline-offset: 0;
 }
 input[type="button" i]:focus-visible,
 input[type="file" i]:focus-visible,
 input[type="hidden" i]:focus-visible,
 input[type="image" i]:focus-visible,
 input[type="reset" i]:focus-visible,
 input[type="submit" i]:focus-visible,
 input[type="file" i]:focus-visible::-webkit-file-upload-button {
   outline-offset: 0;
 }
 input[type="checkbox" i]:focus-visible,
 input[type="radio" i]:focus-visible {
   outline-offset: 2px;
 }
 input[type="date" i]::-webkit-calendar-picker-indicator,
 input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
 input[type="month" i]::-webkit-calendar-picker-indicator,
 input[type="week" i]::-webkit-calendar-picker-indicator {
   background-image: light-dark(
     url(images/calendar_icon.svg),
     url(images/calendar_icon_white.svg)
   );
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: contain;
   block-size: 1em;
   inline-size: 1em;
   opacity: 1;
   outline: none;
   padding: 2px;
 }
 input[type="date" i]::-webkit-calendar-picker-indicator:focus-visible,
 input[type="datetime-local" i]::-webkit-calendar-picker-indicator:focus-visible,
 input[type="month" i]::-webkit-calendar-picker-indicator:focus-visible,
 input[type="week" i]::-webkit-calendar-picker-indicator:focus-visible {
   outline: solid 2px -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 input[type="time" i]::-webkit-calendar-picker-indicator {
   background-image: light-dark(
     url(images/time_icon.svg),
     url(images/time_icon_white.svg)
   );
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: contain;
   opacity: 1;
   outline: none;
   margin-inline-start: 8px;
   padding-inline-start: 3px;
   padding-inline-end: 3px;
   padding-block: 3px;
   block-size: 1.05em;
   inline-size: 1.05em;
 }
 input[type="time" i]::-webkit-calendar-picker-indicator:focus-visible {
   outline: solid 2px -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 input::-webkit-calendar-picker-indicator:hover {
   background-color: initial;
 }
 input::-webkit-datetime-edit-ampm-field:focus,
 input::-webkit-datetime-edit-day-field:focus,
 input::-webkit-datetime-edit-hour-field:focus,
 input::-webkit-datetime-edit-millisecond-field:focus,
 input::-webkit-datetime-edit-minute-field:focus,
 input::-webkit-datetime-edit-month-field:focus,
 input::-webkit-datetime-edit-second-field:focus,
 input::-webkit-datetime-edit-week-field:focus,
 input::-webkit-datetime-edit-year-field:focus {
   background-color: light-dark(highlight, #99c8ff);
   color: light-dark(highlighttext, #000000);
   outline: none;
 }
 input::-webkit-datetime-edit-year-field[disabled],
 input::-webkit-datetime-edit-month-field[disabled],
 input::-webkit-datetime-edit-week-field[disabled],
 input::-webkit-datetime-edit-day-field[disabled],
 input::-webkit-datetime-edit-ampm-field[disabled],
 input::-webkit-datetime-edit-hour-field[disabled],
 input::-webkit-datetime-edit-millisecond-field[disabled],
 input::-webkit-datetime-edit-minute-field[disabled],
 input::-webkit-datetime-edit-second-field[disabled] {
   color: light-dark(GrayText, rgb(165, 165, 165));
 }
 a:-webkit-any-link {
   color: -webkit-link;
   text-decoration: underline;
   cursor: pointer;
 }
 a:-webkit-any-link:active {
   color: -webkit-activelink;
 }
 a:-webkit-any-link:read-write {
   cursor: text;
 }
 a:-webkit-any-link:focus-visible {
   outline-offset: 1px;
 }
 /* HTML5 ruby elements */
 ruby,
 rt {
   text-indent: 0; /* blocks used for ruby rendering should not trigger this */
 }
 ruby {
   display: ruby;
 }
 rt {
   line-height: normal;
   text-emphasis: none;
 }
 ruby > rt {
   display: ruby-text;
   font-size: 50%;
   text-align: start;
 }
 /* other elements */
 frameset,
 frame {
   display: block;
 }
 frameset {
   border-color: inherit;
 }
 iframe {
   border: 2px inset;
 }
 fencedframe {
   border: 2px inset;
   object-fit: contain !important;
   object-position: 50% 50% !important;
 }
 details {
   display: block;
 }
 summary {
   display: block;
 }
 /*
   * https://html.spec.whatwg.org/C/#the-details-and-summary-elements
   * The specification doesn't have |details >| and |:first-of-type|.
   * We add them because:
   *   - We had provided |summary { display: block }| for a long time,
   *     there are sites using <summary> without details, and they
   *     expect that <summary> is not a list-item.
   *   - Firefox does so.
   */
 details > summary:first-of-type {
   display: list-item;
   counter-increment: list-item 0;
   list-style: disclosure-closed inside;
 }
 details[open] > summary:first-of-type {
   list-style-type: disclosure-open;
 }
 /* https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering */
 /* This chunk of styles interacts with the `name == html_names::kDirAttr` case
     in HTMLElement::CollectStyleForPresentationAttribute(). Make sure any changes
     here are congruent with changes made there. */
 address,
 blockquote,
 center,
 div,
 figure,
 figcaption,
 footer,
 form,
 header,
 hr,
 legend,
 listing,
 main,
 p,
 plaintext,
 pre,
 summary,
 xmp,
 article,
 aside,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 hgroup,
 nav,
 section,
 search,
 table,
 caption,
 colgroup,
 col,
 thead,
 tbody,
 tfoot,
 tr,
 td,
 th,
 dir,
 dd,
 dl,
 dt,
 menu,
 ol,
 ul,
 li,
 bdi,
 output,
 [dir="ltr" i],
 [dir="rtl" i],
 [dir="auto" i] {
   unicode-bidi: isolate;
 }
 bdo,
 bdo[dir] {
   unicode-bidi: isolate-override;
 }
 textarea[dir="auto" i],
 pre[dir="auto" i] {
   unicode-bidi: plaintext;
 }
 dialog {
   /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */
   position: absolute;
   inset-inline-start: 0;
   inset-inline-end: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
   border: solid;
   padding: 1em;
   background-color: Canvas;
   color: CanvasText;
 }
 /* Note that these can't use `dialog:modal` because a dialog stops matching
     :modal as soon as dialog.close() is called, but it needs to retain its
     styling until it's removed from the top layer, which can happen later due
     to animations of the `overlay` property. */
 dialog:-internal-dialog-in-top-layer {
   /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */
   position: fixed;
   overflow: auto;
   inset-block-start: 0;
   inset-block-end: 0;
   max-width: calc(100% - 6px - 2em);
   max-height: calc(100% - 6px - 2em);
   /* https://github.com/w3c/csswg-drafts/issues/6939#issuecomment-1016679588 */
   user-select: text;
   visibility: visible;
 }
 [popover] {
   position: fixed;
   inset: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
   border: solid;
   padding: 0.25em;
   overflow: auto;
   color: CanvasText;
   background-color: Canvas;
 }
 /* dialog and popover handling of `display`. We need to be careful to get the
     `<dialog popover>` case working correctly, when open as a dialog.
     The `:where()` is added to lower the specificity so it doesn't take
     precedence over the [popover]:popover-open` rule just below. */
 /* TODO(crbug.com/428039233): it would be cleaner if this was dialog:open,
     rather than dialog[open]. But that crashes. */
 dialog:not([open]),
 [popover]:where(:not(:popover-open)) {
   display: none;
 }
 /* TODO(crbug.com/428039233): it would be cleaner if this was dialog:open,
     rather than dialog[open]. But that crashes. */
 dialog[open],
 [popover]:popover-open {
   display: block;
 }
 dialog:-internal-dialog-in-top-layer::backdrop,
 [popover]:-internal-popover-in-top-layer::backdrop {
   /* From the (modified) fullscreen spec: https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults: */
   position: fixed;
   inset: 0;
 }
 /* Note that these can't use `:modal` or `:popover-open`, because those pseudo
     classes stop matching as soon as the element is requested to be removed from
     the top layer (e.g. via popover.hidePopover() or dialog.close()). But the
     ::backdrop needs to be retained until the element is actually removed from
     the top layer, which can happen later due to animations of the
     `overlay` property. */
 dialog:-internal-dialog-in-top-layer::backdrop {
   /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */
   background-color: rgba(0, 0, 0, 0.1);
 }
 [popover]:-internal-popover-in-top-layer::backdrop {
   pointer-events: none !important;
   background-color: transparent;
 }
 /* The `overlay:auto` UA rule goes away as soon as the modal is requested to
     close, or popover.hidePopover() is called. However, it can stay in the top
     layer after this point, if developer CSS animates the `overlay` property. */
 dialog:modal,
 [popover]:popover-open {
   overlay: auto !important;
 }
 @supports blink-feature(MenuElements) {
   /* TODO(crbug.com/422803239): This should be combined with the [popover]
       * rule above when we remove this flag. */
   menulist:not(:popover-open) {
     display: none;
   }
 }
 @supports blink-feature(HTMLAnchorAttribute) {
   /* Popovers using anchor positioning get their inset properties reset, to make
      * it easier to position them. */
   [popover][anchor] {
     inset: auto;
   }
 }
 slot {
   display: contents;
 }
 /* Pagination */
 @media print {
   @page {
     /* https://drafts.csswg.org/css-page-3/#margin-text-alignment */
     @top-left-corner {
       text-align: right;
       vertical-align: middle;
     }
     @top-left {
       text-align: left;
       vertical-align: middle;
     }
     @top-center {
       text-align: center;
       vertical-align: middle;
     }
     @top-right {
       text-align: right;
       vertical-align: middle;
     }
     @top-right-corner {
       text-align: left;
       vertical-align: middle;
     }
     @right-top {
       text-align: center;
       vertical-align: top;
     }
     @right-middle {
       text-align: center;
       vertical-align: middle;
     }
     @right-bottom {
       text-align: center;
       vertical-align: bottom;
     }
     @bottom-right-corner {
       text-align: left;
       vertical-align: middle;
     }
     @bottom-right {
       text-align: right;
       vertical-align: middle;
     }
     @bottom-center {
       text-align: center;
       vertical-align: middle;
     }
     @bottom-left {
       text-align: left;
       vertical-align: middle;
     }
     @bottom-left-corner {
       text-align: right;
       vertical-align: middle;
     }
     @left-bottom {
       text-align: center;
       vertical-align: bottom;
     }
     @left-middle {
       text-align: center;
       vertical-align: middle;
     }
     @left-top {
       text-align: center;
       vertical-align: top;
     }
   }
   /* Allows table headers and footers to print at the top / bottom of each
       page. */
   thead {
     break-inside: avoid;
   }
   tfoot {
     break-inside: avoid;
   }
 }
 /* spelling/grammar error pseudos */
 html::spelling-error {
   text-decoration: -internal-spelling-error-color spelling-error;
 }
 html::grammar-error {
   text-decoration: -internal-grammar-error-color grammar-error;
 }
 img:is([sizes="auto" i], [sizes^="auto," i]) {
   contain: size !important;
   contain-intrinsic-size: 300px 150px;
 }
 /* https://drafts.csswg.org/css-ui-4/#inertness */
 /* Reducing specificity with :where since [inert] needs to override. Also
     explicitly use 'dialog' to avoid adding universal bucket rule. Separate rule
     added for :fullscreen in fullscreen.css. */
 dialog:where(:modal) {
   interactivity: auto;
 }
 /* Remove this when the InteractivityInertImportant flag is removed. */
 [inert] {
   interactivity: inert;
 }
 @supports blink-feature(InteractivityInertImportant) {
   [inert] {
     interactivity: inert !important;
   }
 }
 /* noscript is handled internally, as it depends on settings. */
 @supports not blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box):not([multiple]) {
     font: -internal-auto-base(-webkit-small-control, inherit);
     text-shadow: -internal-auto-base(none, inherit);
     text-transform: -internal-auto-base(none, initial);
     text-rendering: -internal-auto-base(auto, inherit);
     letter-spacing: -internal-auto-base(normal, inherit);
     word-spacing: -internal-auto-base(normal, inherit);
     text-align: -internal-auto-base(start, initial);
     text-indent: -internal-auto-base(0px, initial);
     -webkit-rtl-ordering: -internal-auto-base(logical, inherit);
     cursor: -internal-auto-base(default, inherit);
     white-space: -internal-auto-base(pre, inherit);
     /* This text-autospace rule won't work because it is set with !important
       * earlier in the UA stylesheet. After merging with the rest of the UA
       * style rules when removing the CustomizableSelect flag, it should start
       * to work. */
     text-autospace: -internal-auto-base(no-autospace !important, inherit);
     color: -internal-auto-base(FieldText, inherit);
     background-color: -internal-auto-base(Field, transparent);
     border: 1px solid -internal-auto-base(light-dark(#767676, #858585), currentColor);
     padding-block: -internal-auto-base(0, 0.25em);
     padding-inline: -internal-auto-base(0, 0.5em);
     /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
       * https://github.com/openui/open-ui/issues/1026
       * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
     /* TODO(crbug.com/1511354): This might be able to be combined with the
       * default select option rules at some point. This should be re-evaluated
       * before StylableSelect is shipped. */
     min-inline-size: -internal-auto-base(
       auto,
       calc-size(auto, max(size, 24px))
     );
     /* The 1lh here makes sure that options with no text still make the button
       * have the same height as options with text. */
     min-block-size: -internal-auto-base(
       auto,
       calc-size(auto, max(size, 24px, 1lh))
     );
     gap: -internal-auto-base(initial, 0.5em);
     border-radius: -internal-auto-base(0, 0.5em);
     align-items: -internal-auto-base(center, unset);
     /* https://github.com/whatwg/html/issues/10876 */
     user-select: -internal-auto-base(auto, none);
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   /* These styles are identical to the not blink-feature block above, except
     * that the :not([multiple]) part is removed. */
   select:not(:-internal-list-box) {
     font: -internal-auto-base(-webkit-small-control, inherit);
     text-shadow: -internal-auto-base(none, inherit);
     text-transform: -internal-auto-base(none, initial);
     text-rendering: -internal-auto-base(auto, inherit);
     letter-spacing: -internal-auto-base(normal, inherit);
     word-spacing: -internal-auto-base(normal, inherit);
     text-align: -internal-auto-base(start, initial);
     text-indent: -internal-auto-base(0px, initial);
     -webkit-rtl-ordering: -internal-auto-base(logical, inherit);
     cursor: -internal-auto-base(default, inherit);
     white-space: -internal-auto-base(pre, inherit);
     /* This text-autospace rule won't work because it is set with !important
       * earlier in the UA stylesheet. After merging with the rest of the UA
       * style rules when removing the CustomizableSelect flag, it should start
       * to work. */
     text-autospace: -internal-auto-base(no-autospace !important, inherit);
     color: -internal-auto-base(FieldText, inherit);
     background-color: -internal-auto-base(Field, transparent);
     border: 1px solid -internal-auto-base(light-dark(#767676, #858585), currentColor);
     padding-block: -internal-auto-base(0, 0.25em);
     padding-inline: -internal-auto-base(0, 0.5em);
     /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
       * https://github.com/openui/open-ui/issues/1026
       * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
     /* TODO(crbug.com/1511354): This might be able to be combined with the
       * default select option rules at some point. This should be re-evaluated
       * before StylableSelect is shipped. */
     min-inline-size: -internal-auto-base(
       auto,
       calc-size(auto, max(size, 24px))
     );
     /* The 1lh here makes sure that options with no text still make the button
       * have the same height as options with text. */
     min-block-size: -internal-auto-base(
       auto,
       calc-size(auto, max(size, 24px, 1lh))
     );
     gap: -internal-auto-base(initial, 0.5em);
     border-radius: -internal-auto-base(0, 0.5em);
     align-items: -internal-auto-base(center, unset);
     /* https://github.com/whatwg/html/issues/10876 */
     user-select: -internal-auto-base(auto, none);
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   select {
     font: -internal-auto-base(-webkit-small-control, inherit);
     text-shadow: -internal-auto-base(none, inherit);
     text-transform: -internal-auto-base(none, initial);
     text-rendering: -internal-auto-base(auto, inherit);
     letter-spacing: -internal-auto-base(normal, inherit);
     word-spacing: -internal-auto-base(normal, inherit);
     text-align: -internal-auto-base(start, initial);
     text-indent: -internal-auto-base(0px, initial);
     -webkit-rtl-ordering: -internal-auto-base(logical, inherit);
     cursor: -internal-auto-base(default, inherit);
     white-space: -internal-auto-base(pre, inherit);
     /* See note in CustomizableSelect feature block about text-autospace. */
     text-autospace: -internal-auto-base(no-autospace !important, inherit);
     color: -internal-auto-base(FieldText, inherit);
     background-color: -internal-auto-base(Field, transparent);
     /* See notes about min-inline-size/min-block-size in CustomizableSelect feature block. */
     min-inline-size: -internal-auto-base(
       auto,
       calc-size(auto, max(size, 24px))
     );
     min-block-size: -internal-auto-base(
       auto,
       calc-size(auto, max(size, 24px, 1lh))
     );
     /* https://github.com/whatwg/html/issues/10876 */
     user-select: -internal-auto-base(auto, none);
   }
 }
 @supports not blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):not([multiple]):not([popover]) {
     display: -internal-auto-base(inline-block, inline-flex);
   }
 }
 @supports blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):not([popover]) {
     display: -internal-auto-base(inline-block, inline-flex);
   }
 }
 @supports not blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):not([multiple]) > button:first-child {
     all: unset;
     display: contents;
     interactivity: inert;
   }
 }
 @supports blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box) > button:first-child {
     all: unset;
     display: contents;
     interactivity: inert;
   }
 }
 @supports not blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):not([multiple]):enabled:hover {
     background-color: -internal-auto-base(
       Field,
       color-mix(in lab, currentColor 10%, transparent)
     );
   }
   select:not(:-internal-list-box):not([multiple]):enabled:active {
     background-color: -internal-auto-base(
       Field,
       color-mix(in lab, currentColor 20%, transparent)
     );
   }
   select:not(:-internal-list-box):not([multiple]):disabled {
     opacity: -internal-auto-base(0.7, unset);
     color: -internal-auto-base(
       light-dark(GrayText, #aaa),
       color-mix(in srgb, currentColor 50%, transparent)
     );
     border-color: -internal-auto-base(rgba(118, 118, 118, 0.3), inherit);
   }
 }
 @supports blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):enabled:hover {
     background-color: -internal-auto-base(
       Field,
       color-mix(in lab, currentColor 10%, transparent)
     );
   }
   select:not(:-internal-list-box):enabled:active {
     background-color: -internal-auto-base(
       Field,
       color-mix(in lab, currentColor 20%, transparent)
     );
   }
   select:not(:-internal-list-box):disabled {
     opacity: -internal-auto-base(0.7, unset);
     color: -internal-auto-base(
       light-dark(GrayText, #aaa),
       color-mix(in srgb, currentColor 50%, transparent)
     );
     border-color: -internal-auto-base(rgba(118, 118, 118, 0.3), inherit);
   }
 }
 /* Undo unwanted styles from select rules */
 @supports not blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):not([multiple]) > button:first-child,
   select::picker(select) {
     white-space: normal;
   }
 }
 @supports blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box) > button:first-child,
   select::picker(select) {
     white-space: normal;
   }
 }
 @supports not blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box):not([multiple])::picker(select) {
     box-sizing: border-box;
     border: 1px solid;
     padding: 0;
     color: -internal-auto-base(inherit, CanvasText);
     background-color: Canvas;
     margin: 0;
     inset: auto;
     min-inline-size: anchor-size(self-inline);
     /* TODO(crbug.com/409942762): Consider removing -internal-auto-base() here
       * if underlying performance issues with lh units are fixed. */
     min-block-size: -internal-auto-base(0, 1lh);
     /* Go to the edge of the viewport, and add scrollbars if needed. */
     max-block-size: -webkit-fill-available; /* Can be removed when stretch ships */
     max-block-size: stretch;
     overflow: auto;
     /* Below and span-right, by default. */
     position-area: block-end span-inline-end;
     position-try-order: most-block-size;
     position-try-fallbacks: block-start span-inline-end,
       /* First try above and span-right. */ block-end span-inline-start,
       /* Then below but span-left. */ block-start span-inline-start; /* Then above and span-left. */
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box)::picker(select) {
     box-sizing: border-box;
     border: 1px solid -internal-auto-base(light-dark(#767676, #858585), currentColor);
     border-radius: -internal-auto-base(2px, 0);
     padding: 0;
     color: -internal-auto-base(inherit, CanvasText);
     background-color: Canvas;
     margin: 0;
     inset: auto;
     min-inline-size: anchor-size(self-inline);
     /* TODO(crbug.com/409942762): Consider removing -internal-auto-base() here
       * if underlying performance issues with lh units are fixed. */
     min-block-size: -internal-auto-base(0, 1lh);
     /* Go to the edge of the viewport, and add scrollbars if needed. */
     max-block-size: -webkit-fill-available;
     max-block-size: stretch;
     overflow: auto;
     /* Below and span-right, by default. */
     position-area: block-end span-inline-end;
     position-try-order: most-block-size;
     position-try-fallbacks: block-start span-inline-end,
       block-end span-inline-start, block-start span-inline-start;
   }
 }
 @supports not blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box):not([multiple]) option {
     /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
       * https://github.com/openui/open-ui/issues/1026
       * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
     /* TODO(crbug.com/1511354): This might be able to be combined with the
       * default select option rules at some point. This should be re-evaluted
       * before CustomizableSelect is shipped. */
     min-inline-size: 24px;
     /* TODO(crbug.com/409942762): Consider removing -internal-auto-base() here
       * if underlying performance issues with lh units are fixed. */
     min-block-size: -internal-auto-base(24px, max(24px, 1lh));
     font-weight: -internal-auto-base(normal, inherit);
     padding-inline: -internal-auto-base(2px, 0.5em);
     padding-block-end: -internal-auto-base(1px, 0);
     display: -internal-auto-base(block, flex);
     align-items: center;
     gap: 0.5em;
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box) option {
     /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
       * https://github.com/openui/open-ui/issues/1026
       * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
     /* TODO(crbug.com/41483940): This might be able to be combined with the
       * default select option rules at some point. This should be re-evaluted
       * before CustomizableSelect is shipped. */
     min-inline-size: 24px;
     /* TODO(crbug.com/409942762): Consider removing -internal-auto-base() here
       * if underlying performance issues with lh units are fixed. */
     min-block-size: -internal-auto-base(24px, max(24px, 1lh));
     font-weight: -internal-auto-base(normal, inherit);
     align-items: center;
     gap: 0.5em;
   }
   select:not(:-internal-list-box):not([multiple]) option {
     padding-inline: -internal-auto-base(2px, 0.5em);
     padding-block-end: -internal-auto-base(1px, 0);
     display: -internal-auto-base(block, flex);
   }
   /* In the multiple case, we want to use the same styles as base appearance
     * because the picker is rendered as a popover. */
   select:not(:-internal-list-box)[multiple] option {
     padding-inline: 0.5em;
     padding-block-end: 0;
     display: flex;
   }
 }
 @supports not blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box):not([multiple]) option:enabled:hover {
     background-color: color-mix(in lab, currentColor 10%, transparent);
   }
   select:not(:-internal-list-box):not([multiple]) option:enabled:active {
     background-color: color-mix(in lab, currentColor 20%, transparent);
   }
   select:not(:-internal-list-box):not([multiple]) option:disabled {
     color: -internal-auto-base(
       inherit,
       color-mix(in lab, currentColor 50%, transparent)
     );
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   select:not(:-internal-list-box) option:enabled:hover {
     background-color: color-mix(in lab, currentColor 10%, transparent);
   }
   select:not(:-internal-list-box) option:enabled:active {
     background-color: color-mix(in lab, currentColor 20%, transparent);
   }
   select:not(:-internal-list-box) option:disabled {
     color: -internal-auto-base(
       inherit,
       color-mix(in lab, currentColor 50%, transparent)
     );
   }
   select:not(:-internal-list-box)[multiple] option:disabled {
     /* This rule applies appearance:base styles to the appearance:auto
     * <select multiple size=1>. Without it, disabled options would not appear disabled. */
     color: color-mix(in lab, currentColor 50%, transparent);
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   /* :-internal-list-box is needed here in order to get precedence over this
     * selector: select:-internal-list-box option:enabled:hover */
   select:-internal-list-box option:enabled:active {
     background-color: color-mix(in lab, currentColor 20%, transparent);
   }
 }
 @supports not blink-feature(CustomizableSelectInPage) {
   select:not(:-internal-list-box):not([multiple]) option::checkmark {
     content: "\2713";
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   select option::checkmark {
     content: "\2713"/ "";
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   /* The svg data urls in the below ::checkmark rules are built to match the
     * checkbox rendering in NativeThemeBase. */
   select[multiple] option::checkmark {
     /* The svg is 13px by 13px. Without this height rule, the svg would not be
       * vertically centered within the ::checkmark. */
     height: -internal-auto-base(13px, initial);
     content: -internal-auto-base(
       url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23767676%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E),
       "\2713"
     );
   }
   select[multiple] option:checked::checkmark {
     content: -internal-auto-base(
       url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20fill%3D%22%230075FF%22%2F%3E%3Cpath%20d%3D%22M2.6%207%20l2.6%202.5%20L10.4%202.6%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E),
       "\2713"
     );
   }
   select[multiple] option:disabled::checkmark {
     content: -internal-auto-base(
       url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23767676%22%20stroke-opacity%3D%2260%25%22%20fill-opacity%3D%2260%25%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E),
       "\2713"
     );
   }
   select[multiple] option:checked:disabled::checkmark {
     content: -internal-auto-base(
       url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20fill%3D%22%23767676%22%20fill-opacity%3D%2260%25%22%2F%3E%3Cpath%20d%3D%22M2.6%207%20l2.6%202.5%20L10.4%202.6%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%2260%25%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E),
       "\2713"
     );
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   select option:not(:checked)::checkmark {
     /* appearance:auto renders an unchecked box instead of empty space. */
     visibility: -internal-auto-base(visible, hidden);
   }
 }
 @supports not blink-feature(SelectMobileDesktopParity) {
   select option:not(:checked)::checkmark {
     visibility: hidden;
   }
 }
 select:-internal-autofill-selected,
 select::-internal-select-autofill-preview[popover] {
   background-image: none;
   background-color: light-dark(#e8f0fe, rgba(70, 90, 126, 0.4));
   color: FieldText;
 }
 select::-internal-select-autofill-preview[popover]:popover-open {
   display: grid;
   align-items: center;
   position-area: center;
   height: calc(anchor-size(height) - 2px);
   width: calc(anchor-size(width) - 2px);
   margin: 0;
   padding: 0;
   border: 1px solid black;
 }
 select::-internal-select-autofill-preview-text {
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
   white-space: nowrap;
 }
 @supports not blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box):not([multiple])::picker-icon {
     content: -internal-auto-base(
       none,
       counter(fake-counter-name, disclosure-open)
     );
     /* We don't have to use -internal-auto-base() here because
       * the pseudo-element won't get generated unless the content property is set. */
     display: block;
     margin-inline-start: auto;
   }
 }
 @supports blink-feature(CustomizableSelectMultiplePopup) {
   select:not(:-internal-list-box)::picker-icon {
     content: -internal-auto-base(
       none,
       counter(fake-counter-name, disclosure-open)
     );
     display: block;
     margin-inline-start: auto;
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   select:-internal-list-box::picker-icon {
     display: none !important;
   }
 }
 @supports not blink-feature(CustomizableSelectInPage) {
   select:not(:-internal-list-box):not([multiple])
     optgroup::-internal-optgroup-label {
     padding-inline: -internal-auto-base(2px, 0.5em);
     padding-block: -internal-auto-base(0 1px, 0);
     min-height: -internal-auto-base(1.2em, 0);
   }
   select:not(:-internal-list-box):not([multiple]) optgroup legend {
     padding-inline: -internal-auto-base(2px, 0.5em);
     min-block-size: -internal-auto-base(initial, 1lh);
   }
   select:not(:-internal-list-box):not([multiple]) optgroup option {
     padding-inline-start: -internal-auto-base(20px, 0.5em);
     font-weight: normal;
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   select optgroup::-internal-optgroup-label {
     padding-inline: -internal-auto-base(2px, 0.5em);
     padding-block: -internal-auto-base(0 1px, 0);
     min-height: -internal-auto-base(1.2em, 0);
   }
   select optgroup legend {
     padding-inline: -internal-auto-base(2px, 0.5em);
     min-block-size: -internal-auto-base(initial, 1lh);
   }
   /* This selector is unnecessarily long in order to have higher precedence
     * than the earlier `select:not(:-internal-list-box) option` selector. */
   select:-internal-list-box optgroup option,
   select:not(:-internal-list-box) optgroup option {
     padding-inline-start: -internal-auto-base(20px, 0.5em);
     font-weight: normal;
   }
 }
 @supports blink-feature(SelectMobileDesktopParity) {
   /* This rule applies appearance:base styles to the appearance:auto
     * <select multiple size=1> optgroups. Without it, the padding would look too
     * small. */
   select:not(:-internal-list-box)[multiple] optgroup::-internal-optgroup-label,
   select:not(:-internal-list-box)[multiple] optgroup legend {
     padding-inline: 0.5em;
     padding-block: 0;
   }
   select:not(:-internal-list-box)[multiple] optgroup option {
     padding-inline-start: -internal-auto-base(1em, 0.5em);
     font-weight: normal;
   }
 }
 /* These style rules switch whether <option> elements render their label text
   * via ::-internal-option-label-container or all of their children via a
   * <slot> called ::-internal-option-slot. Using the <slot> for rendering is
   * only supported for customizable select when the option does not have a
   * label attribute. In all other cases, just the label text is rendered via
   * ::-internal-option-label-container. */
 /* TODO(crbug.com/393500003): Some :-internal-list-box and multiple checks
   * here could be removed if we make -internal-auto-base() work better. */
 @supports blink-feature(CustomizableSelectInPage) {
   option::-internal-option-label-container {
     display: -internal-auto-base(contents, none);
   }
   option::-internal-option-slot {
     display: -internal-auto-base(none, contents);
   }
   /* Render the label attribute when it is set. This should be kept in sync
     * with the logic in HTMLOptionElement::DisplayLabel. */
   option[label]:not([label=""])::-internal-option-label-container {
     display: contents;
   }
   option[label]:not([label=""])::-internal-option-slot {
     display: none;
   }
 }
 @supports not blink-feature(CustomizableSelectInPage) {
   option::-internal-option-label-container {
     display: contents;
   }
   option::-internal-option-slot {
     display: none;
   }
   select:not(:-internal-list-box):not([multiple])
     option::-internal-option-label-container {
     display: none;
   }
   select:not(:-internal-list-box):not([multiple])
     option::-internal-option-slot {
     display: contents;
   }
   /* Render the label attribute when it is set. This should be kept in sync
     * with the logic in HTMLOptionElement::DisplayLabel. */
   select:not(:-internal-list-box):not([multiple])
     option[label]:not([label=""])::-internal-option-label-container {
     display: contents;
   }
   select:not(:-internal-list-box):not([multiple])
     option[label]:not([label=""])::-internal-option-slot {
     display: none;
   }
 }
 @supports blink-feature(CustomizableSelectInPage) {
   /* Don't allow nested <optgroup>s. */
   select optgroup optgroup {
     display: none;
   }
 }
 @supports blink-feature(MenuElements) {
   menubar {
     display: inline-block;
   }
   menulist {
     display: block;
   }
   menuitem {
     padding: 1em;
   }
   menubar menuitem {
     display: inline-block;
   }
   menulist menuitem {
     display: block;
   }
   menulist > fieldset {
     margin-inline: 0;
     border: none;
     padding-block: 0;
     padding-inline: 0;
   }
   menuitem::checkmark {
     content: "\2713";
   }
   menuitem:not(:checked)::checkmark {
     visibility: hidden;
   }
 }
 
 /* =========================================================
    Base
    ========================================================= */
 body {
   margin: 0 !important;
   font-family: "Noto Sans JP", sans-serif;
 }
 html {
   scroll-behavior: smooth;
 }
 a {
   text-decoration: none !important;
 }
 .main_hero_visual img {
   display: block;
   width: 100%;
   height: auto;
 }
 .br-sp {
   display: none;
 }
 .br-pc {
   display: inline;
 }
 @media (max-width: 576px) {
   .br-pc {
     display: none;
   }
 }
 
 /* セクション共通（装飾のための相対基準） */
 section.main_hero,
 section.main_case,
 section.main_service,
 section.main_faq {
   position: relative;
 }
 
 section.main_features,
 section.main_service,
 section.main_case,
 section.main_faq,
 section.main_contact {
   position: relative;
   /* overflow: hidden; */
 }
 
 /* header */
 .gnavi__list {
   list-style: none;
 }
 
 /* =========================================================
    FEATURES
    ========================================================= */
 .main_features_contents {
   margin: 120px 90px;
 }
 .main_features_title,
 .main_features_contents h2 {
   font-size: 28px;
   color: #232323;
   font-family: "CorporateLogo2";
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin-bottom: 0;
 }

 .main_features_contents .main_features_contents__box_text--reverse h2 {
  font-size: 32px;
 }
 
 .main_features_title p {
   font-size: 32px;
   color: #000;
   text-align: center;
   font-family: "CorporateLogo2";
   font-size: 48px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin-top: 120px;
 }
 
 .main_features_title strong {
   color: #000;
   text-align: center;
   font-family: "CorporateLogo2";
   font-size: 72px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
 }
 .main_features_contents span {
   color: #232323;
   font-family: "CorporateLogo2";
   font-size: 48px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
 }
 .main_features_contents img {
   width: 540px;
   height: 504px;
   overflow: hidden;
   clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
   display: block;
   object-position: 50% 50%;
   max-width: none;
 }
 
 .main_features_contents .top-feature {
   object-fit: cover;
   width: 468px;
   height: 604px;
   overflow: hidden;
   display: block;
   object-position: 50% 50%;
   max-width: none;
   clip-path: none;
 
 }
 
 .main_features_contents .top-feature-01 {
   width: 376px;
   height: 282px;
   overflow: hidden;
   display: block;
   object-position: 50% 50%;
   max-width: none;
   clip-path: none;
 
 }
 
 .main_features_contents .top-feature-02 {
   width: auto;
   height: 657px;
   overflow: hidden;
   display: block;
   object-position: 50% 50%;
   max-width: none;
 
 }

 .main_features_contents__box_img {
  overflow: visible;
 }

 @media (min-width: 993px){
  .main_features_contents { --page-pad: 160px; } 
}

/* 画像だけ右に“はみ出す” */
@media (min-width: 993px){
  .bleed-right{
    display: block;
    max-width: none;
    margin-right: calc(50% - 9vw);
  }
}
 
 .main_features_contents .top-feature-03 {
   width: 559px;
   height: 400px;
   overflow: hidden;
   display: block;
   object-position: 50% 50%;
   max-width: none;
 }
 
 .main_features_contents .main_title {
   color: #000;
   font-family: "CorporateLogo2";
   font-size: 48px;
   font-style: normal;
   font-weight: 700;
   line-height: 120%; 
 }
 
 .main_features_contents .main_approach {
   color: #000;
   font-family: "CorporateLogo2";
   font-size: 64px;
   font-style: normal;
   font-weight: 700;
   line-height: 120%;
 }
 
 .main_features_contents__box {
   margin-top: 80px;
   display: flex;
 }
 .main_features_contents__box_text {
   margin-left: 64px;
 }
 .main_features_contents__box--reverse {
   flex-direction: row-reverse !important;
 }
 .main_features_contents__box_text--reverse {
   margin-right: 64px;
   margin-left: 0 !important;
 }
 .main_features_contents__box_text p {
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 150%;
 }


 /* ===== 企業の情報・属性 ===== */
.company-attrs{
  width:100%;
  border-bottom:1px #999999 solid;
  padding-bottom:32px;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  gap:120px;              
}

.company-attrs__inner{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;   
  gap:16px;
}

.company-attrs__title{
  align-self:stretch;
  color:#232323;
  font-size:24px;
  font-family:"CorporateLogo2";
  font-weight:700;
  line-height:1.4;
}

.company-attrs__grid{
  align-self:stretch;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  row-gap:16px;
}

.company-attrs__item{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.company-attrs__label{
  color:#056C29;
  font-size:16px;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;
  line-height:1.6;
}

.company-attrs__value{
  color:#000;
  font-size:20px;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:500;
  line-height:1.6;
  word-break:break-word;
}

.company-attrs__item--wide{
  grid-column:1 / span 3;
}

.company-attrs__item--ghost{
  opacity:0;
  pointer-events:none;
}

.desired__list li::marker{
  font-size: 0.8em;     
}

.support-list{
  margin: 16px 0 0;
  padding: 0px 0px 0px 0px;   
  border-radius: 4px;
  counter-reset: sup;          
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-list > li{
  counter-increment: sup;
  position: relative;
  padding-left: 32px;           
}

.support-list > li::before{
  content: counter(sup) ".";
  position: absolute;
  left: 0;
  top: 0.2em;
  color: #056C29;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  font-family: "Noto Sans JP", sans-serif;
}

.support-list h3{
  margin: 0 0 8px;
  color: #056C29;
  font-size: 24px;
  line-height: 36px;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
}

.support-list p{
  margin: 0;
  color: #232323;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  text-wrap: pretty;            
}

/* 求める人材像 */
.desired{
  width:100%;
  background:#F2F2F2;
  border-left:2px solid #056C29;
}
.desired__inner{
  padding:16px 16px 20px 20px;
  margin-top: 40px;
}

.desired__title{
  color:#056C29;
  font-family:"Corporate Logo ver2", system-ui, sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.6;
  margin:0 0 12px;
}

.desired__lead{
  color:#000;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.8;
  margin:0 0 12px;
}

.desired__cols{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap; /* SPで縦積み */
}

.desired__col{
  flex:1 1 240px; /* SPは縦、横幅ある時は3カラム */
  min-width:240px;
}

.desired__subtitle{
  color:#666;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1.7;
  margin:0 0 6px;
}

/* 左列：定義リスト */
.desired__dl { 
  margin:0; 
  flex-direction: column;
  display: flex;
}
.desired__row{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 8px;
  flex-direction: column;
}
.desired__dt{
  width:6.5em;
  text-align:left;
  color:#666;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1.7;
  flex:0 0 auto;
}
.desired__dd{
  color:#000;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1.7;
  margin:0;
}

/* 箇条書き共通 */
.desired__list{
  margin:0;
  padding:0 0 0 1.1em;
  list-style:disc;
}
.desired__list li{
  color:#000;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:1.8;
  margin:0 0 6px;
}

/* 768px〜で3カラムを安定させる */
@media (min-width:768px){
  .desired__cols{ gap:16px; }
  .desired__col{ flex:1 1 0; min-width:0; display: flex; flex-direction: column;}
}


@media (max-width: 768px){
  .support-list{ gap: 16px; }
  .support-list > li{ padding-left: 28px; }
  .support-list > li::before{ font-size: 22px; top: 0.04em;}
  .support-list h3{ font-size: 20px; line-height: 26px; }
  .support-list p{ font-size: 15px; line-height: 24px; }
}


/* ===== レスポンシブ ===== */
@media (max-width: 1024px){
  .company-attrs{
    gap:48px;
  }
  .company-attrs__grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .company-attrs__item--wide{
    grid-column:1 / span 2;  
  }
  .company-attrs__item--ghost{
    display:none;          
  }
}

@media (max-width: 768px){
  .company-attrs{
    gap:24px;
  }
  .company-attrs__title{
    font-size:20px;
    margin-bottom: 0;
  }

  .company-attrs__label {
    color: #056C29;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .company-attrs__value {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .company-attrs__grid{
    grid-template-columns:1fr; 
  }
  .company-attrs__item--wide{
    grid-column:auto;
  }
}

 
 /* =========================================================
    SERVICE
    ========================================================= */
 .main_service {
   background: #056C29;
   clip-path: polygon(10% 18%, 90% 0%, 90% 82%, 10% 100%);
   padding: 150px 0;
   box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.20), 0 4px 24px 0 rgba(0, 0, 0, 0.20);
   margin-bottom: 80px;
 }

 /* ====== 効果 ====== */
.effect{
  /* セクション外側：センタリング用 */
  display: block;
  width: 100%;
  overflow: visible;
}

.effect__inner{
  max-width: 1080px;
  margin-inline: auto;
  background: #056C29;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden; 
  border-radius: 4px; 
  width: auto;
}

.effect__title{
  width: 240px;
  font-family: "Corporate Logo ver2", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.effect__row{
  display: inline-flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.effect__thumb{
  margin: 0;
  width: 240px; 
  height: 180px;
  flex: 0 0 auto;
  background: #D9D9D9;
  overflow: hidden;
  border-radius: 2px;
}
.effect__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.effect__text{
  margin: 0;
  flex: 1 1 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  word-break: break-word;
}

.effect__em{
  color: #FFFF00;
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
}

/* ========== レスポンシブ ========== */
@media (max-width: 767px){
  .effect__inner{
    padding: 0px 24px;
    gap: 8px;
  }
  .effect__title{
    width: auto;
    font-size: 24px;
  }
  .effect__row{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .effect__thumb{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; 
  }

  .effect__text {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    align-self: stretch;
  }

  .effect__em{
    color: #FF0;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%;
  }

  .bleed-right {
    left: calc(50% - 50svw);
    right: auto;
    width: 100svw !important;
    max-width: none !important;
    position: absolute;
    height: auto !important;
  }
}

 .main_service_title p {
   color: #232323;
   text-align: center;
   font-family: "CorporateLogo2";
   font-size: 64px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
 }
 .main_service_title span {
   font-size: 64px;
 }
 
 .main_service_contents .cta-band__buttons .arrow {
   width: 56px;
   height: 56px;
 }
 
 .main_service_contents_box {
   display: flex;
 }
 .main_service_contents_box img {
   object-fit: cover;
   width: 630px;
   height: 504px;
   overflow: hidden;
   clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
   object-position: 110%;
   display: block;
 }
 .main_service_contents_box--reverse img {
   object-position: 0% !important;
 }
 
 .main_service_contents .cta-band__buttons {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 24px;
     align-self: stretch;
     width: auto;
     filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .2));
 }
 
 /* SERVICE セクション専用: 画面中央でテキスト/画像を50%ずつ。画像は1180pxをはみ出してOK */
 @media (min-width: 993px) {
   .main_service_contents {
     overflow: visible;
   }
   .main_service_contents_box {
     position: relative;
     min-height: 504px;
     align-items: stretch;
   }
   .main_service_contents_box_img {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 50vw; /* コンテナ枠(1180px)からはみ出し可 */
     z-index: 0;
   }
   .main_service_contents_box_img img {
     width: 100%;
     height: 100%;
     margin: 0;
     object-fit: cover;
   }
   /* 通常(BOX1): 画像は中央より左側に配置 */
   .main_service_contents_box:not(.main_service_contents_box--reverse)
     .main_service_contents_box_img {
     right: 50%;
     left: auto;
     overflow-x: hidden;
   }
   /* 逆向き(BOX2): 画像は中央より右側に配置 */
   .main_service_contents_box.main_service_contents_box--reverse
     .main_service_contents_box_img {
     left: 50%;
     right: auto;
   }
 
   .main_service_contents_box_text {
     position: relative;
     z-index: 1;
     width: 50%;
     margin: 0; /* 50%幅で中央分割するため既存左右マージンを打ち消し */
     padding: 0 48px; /* 読みやすいインナー余白 */
     background: transparent;
   }
   .main_service_contents_box_text--reverse {
     padding: 0 48px;
   }
 }
 
 /* SERVICE セクション専用: 中央スプリット＋画像ブリード（Figma準拠） */
 @media (min-width: 993px) {
   .main_service_contents {
     overflow: visible;
   }
   .main_service_contents_box {
     position: relative;
     align-items: center;
     min-height: 720px;
   }
   .main_service_contents_box_img {
     position: absolute;
     top: 0;
     height: 720px;
     z-index: 0;
   }
   .main_service_contents_box_img img {
     /* width: clamp(700px, 50vw, 1240px); */
     height: 100%;
     object-fit: cover;
     margin: 0;
   }
   .main_service_contents_box:not(.main_service_contents_box--reverse)
     .main_service_contents_box_img {
     right: 50%;
     left: auto;
   }
   .main_service_contents_box.main_service_contents_box--reverse
     .main_service_contents_box_img {
     left: 50%;
     right: auto;
   }
   .main_service_contents_box_text {
     position: relative;
     z-index: 1;
     width: 50%;
     max-width: 560px;
     margin: 0;
     padding: 0 48px;
     background: transparent;
   }
   .main_service_contents_box_text--reverse {
     padding: 0 48px;
   }
   /* 非reverse: テキストを中央から右側へ配置 */
   .main_service_contents_box:not(.main_service_contents_box--reverse)
     .main_service_contents_box_text {
     margin-left: 50%;
   }
   /* reverse: テキストを中央から左側へ配置 */
   .main_service_contents_box.main_service_contents_box--reverse
     .main_service_contents_box_text {
     margin-right: 50%;
   }
 }
 
 /* 993px〜1200pxの中間帯(例: 1024px)での重なり防止のため余白を拡張 */
 @media (min-width: 993px) and (max-width: 1200px) {
   .main_service_contents_box_text {
     width: 45%;
     max-width: none;
     padding: 0 24px;
   }
   .main_service_contents_box:not(.main_service_contents_box--reverse)
     .main_service_contents_box_text {
     margin-left: 55%;
   }
   .main_service_contents_box.main_service_contents_box--reverse
     .main_service_contents_box_text {
     margin-right: 55%;
   }
 }
 
 /* services01.JPG only: adjust width in mid desktop band */
 @media (min-width: 993px) and (max-width: 1200px) {
   .main_service_contents_box_img img[src$="services01.JPG"] {
     width: 48vw;
   }
 }
 
 .main_service_contents_box_text {
   margin-left: 40px;
   /* margin-right: 90px; */
 }
 .main_service_contents_box_text h2 {
   font-size: 32px;
 }
 .main_service_contents_box_text span {
   color: #f29600;
   font-size: 32px;
 }
 .main_service_contents_box_text .bold {
   font-size: 48px;
 }
 .main_service_contents_box_text p {
   font-size: 17px;
 }
 
 .main_service_contents_box--reverse {
   flex-direction: row-reverse;
   margin-top: 80px;
 }
 .main_service_contents_box_text--reverse {
   margin-right: 40px;
   /* margin-left: 90px !important; */
 }
 
 /* リンク（ボタン見た目） */
 .main_service_contents_button {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 18px;
   color: #000;
   padding: 6px 0;
   font-weight: bold;
   border: none;
 }
 .main_service_contents_button::before {
   content: "";
   display: inline-block;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background-color: #f29600;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px 12px;
   /* inline SVG: down arrow */
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
 }
 
 /* コンサル一覧 */
 .main_service_contents_consulting_all {
   margin: 60px 90px;
 }
 .main_service_contents_consulting_all p {
   font-size: 26px;
   font-weight: bold;
 }
 .main_service_contents_consulting_all_flex {
   margin-top: 70px;
   display: flex;
   align-items: flex-end;
 }
 .main_service_contents_consulting_all__flex_box {
   width: 25%;
   background: #fff;
   margin: 16px 8px;
   padding: 64px 0;
   clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
 }
 .main_service_contents_consulting_all__flex_box:nth-child(1) {
   transform: translateY(0);
 }
 .main_service_contents_consulting_all__flex_box:nth-child(2) {
   transform: translateY(-22px);
 }
 .main_service_contents_consulting_all__flex_box:nth-child(3) {
   transform: translateY(-77px);
 }
 .main_service_contents_consulting_all__flex_box:nth-child(4) {
   transform: translateY(-126px);
 }
 .main_service_contents_consulting_all__flex_box_img {
   width: 130px;
   justify-self: center;
 }
 .main_service_contents_consulting_all__flex_box_title {
   text-align: center;
   font-weight: bold;
   color: #f29600;
   font-size: 20px;
   line-height: normal;
 }
 .main_service_contents_consulting_all__flex_box_title p {
   margin: 5px 0;
 }
 .main_service_contents_consulting_all__flex_box .border {
   border-bottom: 1px solid #f29600;
   width: 193px;
   justify-self: center;
 }
 .main_service_contents_consulting_all__flex_box_p {
   background: #f29600;
   padding: 1px 8px;
   text-align: center;
   margin: 16px;
 }
 .main_service_contents_consulting_all__flex_box_p p {
   font-size: 12px;
   color: #fff;
   margin: 2px;
 }
 
 .main_service_contents_consulting_all__flex_box_content p {
   font-size: 14px;
   color: #f29600;
   font-weight: 500;
   text-align: center;
 }
 
 /* =========================================================
    CASE（事例）
    ========================================================= */
 .main_case_title {
   margin: 0 90px;
 }
 .main_case_title p {
   font-size: 32px;
   font-weight: bold;
   font-family: "CorporateLogo2";
 }
 
 .main_case_contents_box {
   display: flex;
   margin-bottom: 40px;
 }
 
 .main_case_contents_box_img img {
   width: 701px;
   display: block;
   transition: transform 0.3s ease-in-out;
 }
 .main_case_contents_box_img a {
   display: inline-block;
 }
 .main_case_contents_box_img a:hover img {
   transform: scale(1.1);
   object-fit: cover;
 }
 
 .main_case_contents_box_text {
   margin-left: 40px;
   box-sizing: border-box;
 }
 .main_case_contents_box_text p {
   color: #000;
   font-family: "Noto Sans JP";
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 150%;
 }
 
 .main_case_contents_box_tag-area {
   display: flex;
   margin-bottom: 16px;
 }
 .tag {
   margin-right: 8px;
   display: inline-block;
   background-color: #F2F2F2;
   border-left: 1px solid #056C29;
 }
 .tag p {
   font-size: 14px;
   font-weight: 500;
   padding: 4px 8px;
   margin: 0 !important;
 }
 
 .main_case__contents_button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 6px 6px 15px;
   background: #fff;
   border-radius: 48px;
   text-decoration: none;
   border-radius: 48px;
   border: 1px solid var(---Typography-4, #B2B2B2);
   background: #FFF;
   transition: transform .2s ease, box-shadow .2s ease;
   align-self: flex-end;
 }
 
 .main_case__contents_button span {
   font-weight: 700;
 }
 
 .main_case_contents_box_text .arrow {
   display: flex;
   width: 24px;
   height: 24px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   aspect-ratio: 1/1;
 }
 
 .main_case_contents_box_sub_text .arrow {
   display: flex;
   width: 24px;
   height: 24px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   aspect-ratio: 1/1;
   clip-path: none;
 }
 
 .main_case_contents_box_text .main_case__desc{
   margin: 0;
   color: #666;
   font-size: 16px;
   line-height: 24px;
   font-weight: 500;
   padding: 16px 0;
 }
 
 .main_case_contents_box_sub_text .main_case__desc{
   margin: 0;
   color: #666;
   font-size: 16px;
   line-height: 24px;
   font-weight: 500;
   padding: 8px 0;
 }
 
 .main_case_contents_box_sub_tag-area .tag {
   margin-right: 3px;
   margin-bottom: 8px;
 }
 
 .main_case_contents_box_sub {
   display: flex;
   margin: 50px 90px;
   justify-content: center;
 }
 .main_case_contents_box_sub img {
   width: 350px;
   height: 305px;
   object-fit: cover;
   display: block;
   transition: transform 0.3s ease-in-out;
   clip-path: none;
 }
 
 
 .main_case_contents_box_sub_text {
   margin: 1px 0;
   font-size: 18px;
   font-weight: bold;
   display: flex;
   flex-direction: column;
 }
 .main_case_contents_box_sub_text p {
   margin: 16px 0 8px;
   color: #000;
   font-family: "Noto Sans JP";
   font-size: 24px;
   font-style: normal;
   font-weight: 700;
   line-height: 150%;
 }
 .main_case_contents_box_sub_tag-area {
   display: block;
   margin-bottom: 16px;
 }
 
 .main_case_contents_box_sub_tag-area .tag p {
   color: #000;
   font-family: "Noto Sans JP";
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
 
 /* =========================================================
    FAQ
    ========================================================= */
 section.main_faq {
   margin-top: 120px;
 }
 .main_faq_title {
   font-size: 40px;
   font-weight: bold;
   text-align: center;
   margin-bottom: 80px;
 }
 
 .main_faq_title p {
   color: #000;
   font-family: "Noto Sans JP";
   font-size: 40px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
 }
 
 .main_faq_title span {
   color: #232323;
   font-family: "Noto Sans JP";
   font-size: 64px;
   font-style: normal;
   font-weight: 900;
   line-height: normal;
 }
 .main_faq_contents {
   margin: auto;
   width: 800px;
   display: flex;
   flex-direction: column;
   gap: 64px;
 }
 
 .main_faq_contents_box--Q,
 .main_faq_contents_box--A {
   display: flex;
   align-items: baseline;
   gap: 8px;
 }
 
 .main_faq_contents_box--Q {
   margin-bottom: 8px;
 }
 
 .main_faq_contents_box--Q p {
   font-weight: bold;
   font-size: 28px;
 }
 .Q {
   color: #232323;
   font-family: "DIN2014";
   font-size: 40px;
   font-style: normal;
   font-weight: 800;
   line-height: normal;
   transform: rotate(-6deg);
   transform-origin: top left;
   word-wrap: break-word;
 }
 .main_faq_contents_box--A p {
   color: var(---Typography-8, #4D4D4D);
   font-family: "Noto Sans JP";
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 150%;
 }
 .A {
   color: #056C29;
   font-family: "DIN2014";
   font-size: 32px;
   font-style: normal;
   font-weight: 800;
   line-height: normal;
   transform: rotate(-6deg);
   transform-origin: top left;
   word-wrap: break-word;
 }
 
 /* =========================================================
    CONTACT
    ========================================================= */
 section.main_contact {
   background: #056C29;
   margin-top: 330px;
   padding-bottom: 70px;
   width: 100%;
   position: relative;
   z-index: 0;
 }
 .main_contact::before {
   content: "";
   position: absolute;
   inset: auto -10% 0 0%;
   height: 270px;
   background: #056C29;
   transform: skewY(-6deg);
   transform-origin: left bottom;
   z-index: -1;
   width: 100%;
 }
 .main_contact::after {
   content: "";
   position: absolute;
   top: -40%;
   left: -12%;
   width: 65vw;
   height: 170px;
   background: #FF0;
   clip-path: polygon(0 0, 10% 0, 138% 70%, 0 55%);
   z-index: -2;
 }
 .main_contact_contents {
   margin: 150px 90px 0;
   color: #fff;
   display: flex;
   align-items: baseline;
 }
 .main_contact_contents_textbox {
   width: 60%;
 }
 .main_contact_contents_textbox_title p {
   font-size: 48px;
   font-weight: bold;
   margin: 10px 0;
 }
 .main_contact_contents_textbox_text p {
   font-size: 16px;
 }
 
 .main_contact_contents_contact-area_box {
   background: #fff;
   font-weight: bold;
   padding: 10px 60px 10px 20px;
   margin: 10px;
   border-radius: 40px;
   position: relative;
 }
 .main_contact_contents_contact-area_box p {
   margin: 5px;
 }
 
 .main_contact_contents .cta-band__buttons .arrow {
   width: 56px;
   height: 56px;
 }
 
 .main_contact_contents .cta-band__buttons {
   width: 420px;
 }
 
 .main_contact_contents .cta-band__buttons .cta-band__btn {
   width: 100%;
 }
 
 .buy {
   color: #f29600 !important;
 }
 .sell {
   color: #1a3261 !important;
 }
 .buy::after,
 .sell::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 8px;
   width: 35px;
   height: 35px;
   transform: translateY(-50%);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   border-radius: 50%;
   pointer-events: none;
   transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
   will-change: transform;
 }
 .buy::after {
   background-image: url(.../ma/wp-content/uploads/img/contact_buy.png);
 }
 .sell::after {
   background-image: url(.../ma/wp-content/uploads/img/contact_sell.png);
 }
 .buy:hover::after,
 .sell:hover::after {
   transform: translateY(-50%) translateX(-14px);
 }
 
 /* =========================================================
    Decorations（背景の棒など）
    ========================================================= */
 .main_features_decoration--1,
 .main_features_decoration--2,
 .main_features_decoration--3,
 .main_features_decoration--4,
 .main_features_decoration--5,
 .main_features_decoration--6,
 .main_features_decoration--7,
 .main_features_decoration--8,
 .main_features_decoration--9,
 .main_service_decoration--1,
 .main_service_decoration--2,
 .main_service_decoration--3,
 .main_case_decoration--1,
 .main_case_decoration--2,
 .main_case_decoration--3,
 .main_case_decoration--4,
 .main_case_decoration--5,
 .main_faq_decoration--1,
 .main_faq_decoration--2,
 .main_contact_decoration--1,
 .main_contact_decoration--2,
 .main_contact_decoration--3 {
   position: absolute;
   transform: skewY(-6deg);
   z-index: -1;
 }
 
 .main_features_decoration--1 {
   top: -3%;
   left: 0;
   width: 25%;
   height: 10px;
   background: #056C29;
 }
 .main_features_decoration--2 {
    top: 20%;
    right: 0;
    width: 16%;
    height: 25px;
    background: #056C29;
    z-index: -2;
 }
 .main_features_decoration--3 {
   top: 65%;
   left: 0;
   width: 7%;
   height: 5px;
   background: #056C29;
 }
 .main_features_decoration--4 {
   top: 58%;
   right: 0;
   width: 39%;
   height: 340px;
   background: #DDEEE3;
   display: none;
 }
 .main_features_decoration--5 {
    top: 21.4%;
    right: 0;
    width: 11%;
    height: 5px;
    background: #056C29;
 }
 .main_features_decoration--6 {
   top: 66%;
   left: 0;
   width: 5%;
   height: 14px;
   background: #056C29;
 }
 .main_features_decoration--7 {
   top: 106%;
   left: 0;
   width: 90%;
   height: 2px;
 }
 
 .main_features_decoration--8 {
   top: 24%;
   left: 0;
   width: 32%;
   height: 340px;
   background: #DDEEE3;
 }
 
 .main_features_decoration--9 {
   top: 88%;
   left: 0;
   width: 39%;
   height: 340px;
   background: #DDEEE3;
   display: none;
 }

 .no-desired-1 {
  top: 10%;
 }

 .no-desired-2 {
  top: 22%;
 }

 .no-desired-3 {
  top: 30%;
 }
 
 .main_service_decoration--1 {
   top: 37%;
   right: 0;
   width: 10%;
   height: 36px;
   background: #056C29;
 }

 .main_service_decoration--2 {
   top: 40%;
   right: 0;
   width: 24%;
   height: 12px;
   background: #056C29;
 }
 .main_service_decoration--3 {
   top: 92%;
   right: 0;
   width: 92%;
   height: 2px;
   background: #056C29;
   transform: skewY(-9deg);
 }
 
 .main_case_decoration--1 {
  top: -5.4%;
  left: 0;
  width: 19%;
  height: 8.76px;
  background: #056C29;
  display: none;
 }

 .band-wrap{ position:relative; overflow:visible; }
.band-wrap .dec{
  position: absolute;
  inset: 0 0 auto 0px;
  height: 9px;
  background: #056C29;
  transform: skewY(-6deg);
  pointer-events: none;
  top: 8%;
  width: 29%;
}

 .main_case_decoration--2 {
   top: 28%;
   right: 0;
   width: 9%;
   height: 48px;
   background: #056C29;
   display: none;
 }
 .main_case_decoration--3 {
   top: 45%;
   left: 0;
   width: 5%;
   height: 2px;
   background: #056C29;
   display: none;
 }
 .main_case_decoration--4 {
   top: 65%;
   right: 0;
   width: 6%;
   height: 12px;
   background: #056C29;
   display: none;
 }
 .main_case_decoration--5 {
   top: 67%;
   right: 0;
   width: 12%;
   height: 17px;
   background: #056C29;
   display: none;
 }
 
 .main_faq_decoration--1 {
   top: 5%;
   left: 0;
   width: 6%;
   height: 18px;
   background: #056C29;
 }
 .main_faq_decoration--2 {
   top: 58%;
   right: 0;
   width: 6%;
   height: 18px;
   background: #056C29;
 }
 
 .main_faq_decoration--line-1{
   display: block;
   width: 100%;
   height: 240px;          
   pointer-events: none; 
   position: absolute;
   z-index: -1;
   top: 1%; 
 }
 
 .main_faq_decoration--line-2{
   display: block;
   width: 100%;
   height: 240px;          
   pointer-events: none; 
   position: absolute;
   z-index: -1;
   top: 24%;  
 }
 
 .main_faq_decoration--line-3{
   display: block;
   width: 100%;
   height: 240px;          
   pointer-events: none; 
   position: absolute;
   z-index: -1;
   top: 47%;  
 }
 
 .main_faq_decoration--line-4{
   display: block;
   width: 100%;
   height: 240px;          
   pointer-events: none; 
   position: absolute;
   z-index: -1;
   top: 70%;  
 }
 
 .main_contact_decoration--1 {
   top: -44%;
   right: 0;
   width: 15%;
   height: 10px;
   background: #ffff00;
 }
 .main_contact_decoration--2 {
   top: 70%;
   left: 0;
   width: 10%;
   height: 17px;
   background: #ffffff;
 }
 .main_contact_decoration--3 {
   top: 81%;
   left: 0;
   width: 6%;
   height: 5px;
   background: #ffffff;
 }
 
 .pc_footer {
   display: none;
 }
 
 .sp_footer {
   display: none;
 }
 
 @media screen and (width <= 980px)   {
   .pc_footer {
     display: none;
   }
   
   .sp_footer {
     display: none;
   }

   .band-wrap .dec {
    display: none;
   }
 }
 
 
 
 
 /* ===== CTA BAND ===== */
 .cta-band{
   width: auto;
   position: relative;
   background: #056C29;
   overflow: hidden;
   padding: 40px 16px 80px;
 }
 
 .cta-band__inner{
   max-width: 1180px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   position: relative;
   z-index: 1; /* 背景デコより手前 */
 }
 
 /* ---- text ---- */
 .cta-band__text{
   display: inline-flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .cta-band__headline{
   margin: 0;
   color: #E95513;
   font-size: 48px;
   font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
   font-weight: 900;
   line-height: 1.2;
   word-wrap: break-word;
 }
 
 .cta-band__lead{
   margin: 0;
   color: #323232;
   font-size: 16px;
   font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
   font-weight: 700;
   line-height: 1.8;
   word-wrap: break-word;
 }
 
 /* ---- buttons ---- */
 .cta-band__buttons{
   display: inline-flex;
   flex-direction: column;
   gap: 24px;
   filter: drop-shadow(0 4px 20px rgba(0,0,0,.2));
   width: 320px;
 }
 
 .cta-band__btn{
   width: 296px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   background: #fff;
   border-radius: 48px;
   text-decoration: none;
   transition: transform .2s ease, box-shadow .2s ease;
 }
 
 .cta-band__btn span{
   flex: 1 1 0;
   text-align: center;
   font-size: 20px;
   font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
   font-weight: 700;
   line-height: 29px;
 }
 
 .cta-band__btn--green span{ color: #056C29; }
 .cta-band__btn--blue  span{ color: #1A3261; }
 
 .cta-band__btn:hover{
   transform: translateY(-1px);
   box-shadow: 0 6px 24px rgba(0,0,0,.15);
 }
 
 .cta-band__buttons .arrow {
   display: flex;
   width: 40px;
   height: 40px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   aspect-ratio: 1/1;
 }
 
 /* 矢印をCSSで作成 */
 .cta-band__arrow::before,
 .cta-band__arrow::after{
   content: "";
   position: absolute;
   width: 10px;
   height: 2px;
   background: #fff;
   border-radius: 1px;
   left: 50%;
 }
 .cta-band__arrow::before{
   transform: translateX(-20%) rotate(45deg);
   top: 49%;
 }
 .cta-band__arrow::after{
   transform: translateX(-20%) rotate(-45deg);
   top: 59%;
 }
 
 /* ---- background decorations ---- */
 .cta-band__dec{
   position: absolute;
   transform: rotate(-6deg);
   transform-origin: top left;
   pointer-events: none;
 }
 
 .cta-band__dec--white1{
   width: 2541.21px;
   height: 301.88px;
   left: -559.5px;
   top: 18.58px;
   background: #fff;
 }
 
 .cta-band__dec--white2{
   width: 2561.69px;
   height: 117.48px;
   left: -559.5px;
   top: 392.11px;
   background: #fff;
 }
 
 .cta-band__dec--stripe1{
   width: 62%;
   height: 7.93px;
   right: 0;
   top: 73%;
   background: #056C29;
 }
 .cta-band__dec--stripe2{
   width: 41%;
   height: 7.93px;
   right: 0;
   top: 51%;
   background: #056C29;
 }
 .cta-band__dec--stripe3{
   width: 36%;
   height: 6.08px;
   right: 0;
   top: 38%;
   background: #056C29;
 }
 
 .cta-band__dec--stripe4{
   display: none;
 }
 
 .br-sp {
   display: none;
 }
 
 /* ---- responsive ---- */
 @media (max-width: 1024px){
   .cta-band__headline{ font-size: 40px; }
   .cta-band__btn{ width: 300px; }
 }
 @media (max-width: 768px){
   .cta-band {
     padding-bottom: 40px;
     display: none;
   }
   .cta-band__inner{
     flex-direction: column;
     align-items: stretch;
     gap: 40px;
   }
   .cta-band__headline{
     font-size: 32px;
     line-height: 1.25;
   }
   .cta-band__buttons{
     align-items: center;
     display: inline-grid;
   }
   .cta-band__btn{ width: 100%; max-width: 360px; }
   /* デコの位置はモバイルで少し下げて視認性を確保 */
   .cta-band__dec--white1{ top: 40px; }
   .cta-band__dec--white2{ top: 410px; height: 200px;}
 
   .cta-band__dec--stripe1 {
     width: 37%;
     height: 7.93px;
     right: 0;
     top: 47%;
     background: #056C29;
   }
 
   .cta-band__dec--stripe2 {
     width: 24%;
     height: 7.93px;
     right: 0;
     top: 40%;
     background: #056C29;
   }
 
   .cta-band__dec--stripe3 {
     width: 15%;
     height: 6.08px;
     right: 0;
     top: 34%;
     background: #056C29;
   }
 
   .cta-band__dec--stripe4 {
     width: 15%;
     height: 6.08px;
     left: 0;
     top: 15%;
     background: #056C29;
   }
 }
 
 
 /* ===== SCOPE BAND (業界・職種) ===== */
 .scope-band{
   position: relative;
   width: auto;
   overflow: hidden;
   padding: 80px 0px 0px;
   background-blend-mode: lighten, normal;
   background-size: cover;
   background-position: center;
 
 }
 
 .scope-band__inner{
   max-width: 1180px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 40px;
   position: relative;
   z-index: 1;
 }
 
 /* --- decorations (斜めホワイト帯＋ライン) --- */
 .scope-band__dec{
   position: absolute;
   transform: rotate(-6deg);
   transform-origin: top left;
   pointer-events: none;
 }
 .scope-band__dec--white1{
   width: 2540.36px; height: 309.51px;
   left: -560px; top: -55.46px;
   background: #fff;
 }
 .scope-band__dec--white2{
   width: 2540.36px; height: 309.51px;
   left: -560px; top: 980.2px;
   background: #fff;
 }
 .scope-band__dec--stripeA{
  width: 86.15%;
  height: 8.76px;
  right: 70.7%;
  top: 200%;
  background: #056C29;
  display: none;
 }
 .scope-band__dec--stripeB{
   width: 2566.27px; height: 69.27px;
   left: -559.5px; top: 65.7px;
   background: #056C29;
 }
 
 /* --- heading --- */
 .scope-band__head{ text-align: center; }
 .scope-band__title{
   display: inline-flex;
   gap: 4px;
   align-items: baseline;
   margin: 0;
   color: #fff;
   line-height: 1.15;
 }
 .scope-band__title--sm{
   font-family: "CorporateLogo2","Corporate Logo ver2","Noto Sans JP",sans-serif;
   font-weight: 700;
   font-size: 48px;
 }
 .scope-band__title--lg{
   font-family: "CorporateLogo2","Corporate Logo ver2","Noto Sans JP",sans-serif;
   font-weight: 700;
   font-size: 64px;
 }
 .scope-band__lead{
   margin-top: 16px;
   color: #fff;
   font-size: 16px;
   font-family: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
   font-weight: 500;
   line-height: 24px;
 }
 
 /* --- grid --- */
 .scope-band__grid{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   padding-top: 180px;
 }
 .scope-card{
   padding: 24px;
   background: rgba(255,255,255,0.8);
   box-shadow: 0 5px 15.9685px rgba(0,0,0,0.2);
   backdrop-filter: blur(10px);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: stretch;
 }
 
 .scope-list{
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
 /* 2カラム化（ポジション／貢献領域） */
 .scope-card--cols2 .scope-list{
   grid-template-columns: 1fr 1fr;  /* 2列 */
   column-gap: 8px;
   row-gap: 8px;
 }
 
 .scope-card__title{
   margin: 0;
   color: #056C29;
   font-size: 24px;
   font-family: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
   font-weight: 700;
   text-align: center;
 }
 
 .scope-list__pill{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
   padding: 4px 12px;
   background: #fff;
   border-radius: 2px;
 }
 .scope-list__pill span{
   color: #4D4D4D;
   font-size: 18px;
   font-family: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
   font-weight: 700;
 }
 .scope-list__etc{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 28px;
 }
 
 .scope-card--cols2 .scope-list__etc{
   grid-column: 1 / -1;   /* 1行ぶち抜き */
   min-height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .scope-list__etc span{
   color: #4D4D4D;
   font-size: 14px;
   font-family: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
   font-weight: 500;
 }
 
 /* --- bottom CTA --- */
 .scope-cta{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 }
 .scope-cta__note{
   margin: 0;
   color: #fff;
   font-size: 14px;
   font-family: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
   font-weight: 500;
 }
 .scope-cta__btn{
   display: inline-flex;
   align-items: center;
   gap: 16px;
   padding: 8px 8px 8px 24px;
   background: #fff;
   border-radius: 48px;
   text-decoration: none;
   box-shadow: 0 4px 8px rgba(0,0,0,0.75);
   transition: transform .2s ease, box-shadow .2s ease;
 }
 .scope-cta__btn:hover{
   transform: translateY(-1px);
   box-shadow: 0 6px 16px rgba(0,0,0,0.65);
 }
 .scope-cta__label{
   color: #E95513;
   font-size: 20px;
   font-family: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
   font-weight: 700;
   line-height: 29px;
 }
 .scope-cta .arrow {
   display: flex;
   width: 40px;
   height: 40px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   aspect-ratio: 1/1;
 }
 .scope-cta__arrow::before,
 .scope-cta__arrow::after{
   content: "";
   position: absolute;
   width: 10px; height: 2px; background: #fff; border-radius: 1px; left: 50%;
 }
 .scope-cta__arrow::before{ transform: translateX(-20%) rotate(45deg);  top: 49%; }
 .scope-cta__arrow::after { transform: translateX(-20%) rotate(-45deg); top: 59%; }
 
 /* --- responsive --- */
 @media (max-width: 1100px){
   .scope-band__title--lg{ font-size: 56px; }
   .scope-band__title--sm{ font-size: 42px; }
 }
 @media (max-width: 768px){
   .scope-band{ padding: 64px 16px 24px 16px; display: none;}
   .scope-band__grid{ grid-template-columns: 1fr; }
 }
 @media (max-width: 768px){
   .scope-band__title--lg{ font-size: 40px; }
   .scope-band__title--sm{ font-size: 24px; }
   .scope-band__lead{ line-height: 1.8; }
 
   .scope-card {
     padding: 16px;
   }
 
   .scope-band__dec--white1 {
     width: 2540.36px;
     height: 181.51px;
     left: -560px;
     top: -55.46px;
     background: #fff;
   }
 
   .scope-band__dec--white2 {
     width: 2540.36px;
     height: 109.51px;
     left: -560px;
     top: 103%;
     background: #fff;
   }
 
   .scope-band__dec--stripeA {
     width: 900.88px;
     height: 8.76px;
     left: -614px;
     top: 99.28px;
     background: #056C29;
   }
 
   .scope-band__dec--stripeB {
     display: none;
   }
 }
 
 .flow-sp{ display:none; }

 .br-gap{
  display:block; 
  width:100%;
  height:8px;         
  line-height:0;
}
 
 /* =========================================================
    Responsive
    ========================================================= */
 /* =========================================================
    Layout Width Constraint
    ========================================================= */
 /* コンテンツ最大幅を1180pxに統一（PC） */
 .main_features_contents,
 .main_service_title,
 .main_service_contents,
 .main_service_contents_consulting_all,
 .main_case_title,
 .main_case_contents,
 .main_faq_title,
 .main_faq_contents,
 .main_contact_contents {
   max-width: 1180px; /* padding を除いた内容幅 */
   box-sizing: content-box; /* 合計幅 = 内容幅 + padding */
   margin-left: auto;
   margin-right: auto;
   padding-left: 16px;
   padding-right: 16px;
 }
 
 @media (min-width: 993px) {
   .main_features_contents,
   .main_service_title,
   .main_service_contents,
   .main_service_contents_consulting_all,
   .main_case_title,
   .main_case_contents,
   .main_faq_title,
   .main_faq_contents,
   .main_contact_contents {
     padding-left: 80px;
     padding-right: 80px;
   }
 }
 
 /* 既存の左右余白指定を中央寄せに整える */
 .main_features_contents {
   margin: 0px auto;
 }
 .main_service_contents_consulting_all {
   margin: 60px auto;
 }
 .main_case_title {
   margin: 40px auto;
 }
 .main_case_contents_box_sub {
   margin: 40px auto;
   gap: 22px;
 }
 .main_contact_contents {
   margin: 150px auto 0;
 }
 
 /* CASE main: split 50/50 on desktop */
 @media (min-width: 993px) {
   .main_case_contents_box {
     align-items: center;
     margin-top: 95px;
   }
   .main_case_contents_box_img {
     /* flex: 0 0 50%; */
     /* max-width: 50%; */
   }
   .main_case_contents_box_text {
     flex: 0 0 50%;
     max-width: 50%;
     margin-left: 0;
     padding-left: 33px;
     margin-bottom: auto;
     display: flex;
     flex-direction: column;
   }
   .main_case_contents_box_img img {
     width: 100%;
     height: auto;
   }
 }
 
 /* ===== FV(Hero) 固定高さ・横は見切れ（中央寄せ） ===== */
 /* Phone */
 @media (max-width: 576px) {
   .main_hero_visual {
     position: relative;
     width: 100%;
     height: 318px;
     overflow: hidden;
   }
   .main_hero_visual img {
     position: absolute;
     top: 0;
     left: 50%;
     height: 100%;
     width: auto;
     transform: translateX(-50%);
     object-fit: cover;
     object-position: 50% 50%;
   }
 }
 /* Tablet */
 @media (min-width: 577px) and (max-width: 992px) {
   .main_hero_visual {
     position: relative;
     width: 100%;
     height: 480px;
     overflow: hidden;
   }
   .main_hero_visual img {
     position: absolute;
     top: 0;
     left: 50%;
     height: 100%;
     width: auto;
     transform: translateX(-50%);
     object-fit: cover;
     object-position: 50% 50%;
   }
 }
 /* Desktop */
 @media (min-width: 993px) {
   .main_hero_visual {
     position: relative;
     width: 100%;
     height: 261px;
     overflow: hidden;
   }
   .main_hero_visual img {
     position: absolute;
     top: 0;
     left: 50%;
     height: 100%;
     width: 100%;
     transform: translateX(-50%);
     object-fit: cover;
     object-position: 50% 50%;
   }
   /* Ensure service images center crop on desktop */
   .main_service_contents_box_img img {
     object-fit: cover;
     object-position: 50% 50%;
   }
 }

 .main_hero_overlay {
  display: none;
 }

 .main_service_inner {
  padding: 0 160px;
 }

 .main_service_frame { position: relative; z-index: 0; }

 .main_service_frame_1 { position: relative; z-index: 0; }

 .main_service_frame_5 { position: relative; z-index: 0; }
 
 /* ===== FV(Hero) smartphone: 659px wide design, center-crop ===== */
 @media (max-width: 576px) {
   .main_hero_visual {
     position: relative;
     width: 100%;
     aspect-ratio: 659 / 640;
     overflow: hidden;
   }
   .main_hero_visual img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: 50% 50%;
   }

   .main_hero_overlay{
    display: block;
    position: absolute;
    inset: 24px 0 0 0;      
    padding: 16px 20px;
    color: #fff;
    height: 93px;
  }

  .main_hero_title{
    margin: 0;
    font: 900 20px/1.5 "Noto Sans JP", sans-serif;
    letter-spacing: .02em;
    color: #FFF;
    font-family: "CorporateLogo2";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
  }
 }
 
 /* ≤ 992px */
 @media (max-width: 992px) {
   .main_features_contents__box,
   .main_service_contents_box,
   .main_case_contents_box,
   .main_contact_contents {
     flex-direction: column;
   }
 
   .main_features_contents__box.main_features_contents__box--reverse.main_first {
     flex-direction: column-reverse;
   }
 
   .main_features_contents img,
   .main_service_contents_box img,
   .main_case_contents_box_img img {
     width: 100%;
     height: auto;
   }
 
   .main_features_contents .top-feature-01,
   .main_features_contents .top-feature-02,
   .main_features_contents .top-feature-03,
   .main_features_contents .top-feature {
     width: 100%;
     height: auto;
   }

   .main_features_contents .top-feature-02 {
    clip-path: polygon(0 10%, 100% 0, 100% 93%, 0% 100%);
   }
 
   .main_features_contents .top-feature {
     margin-top: 24px;
   }
 
   .main_features_contents__box {
     margin-top: 56px;
   }

   .main_features_contents__box--reverse {
    flex-direction: column-reverse !important;
   }
 
   .main_features_title strong {
     font-size: 32px;
   }
 
   .main_features_contents__box_text,
   .main_features_contents__box_text--reverse,
   .main_service_contents_box_text,
   .main_service_contents_box_text--reverse {
     margin: 20px !important;
   }
 
   .main_service_contents_consulting_all_flex {
     flex-wrap: wrap;
     column-gap: 8px;
     row-gap: 24px;
   }
   .main_service_contents_consulting_all__flex_box {
     /* width: calc(50% - 32px); */
     width: calc(50% - 4px);
     margin: 0;
   }
   .main_faq_contents {
     width: 85%;
   }
   .main_contact_contents_textbox {
     width: 100%;
   }
 }
 
 /* ≤ 576px */
 @media (max-width: 576px) {
   .br-sp {
     display: inline;
   }
 
   .pan {
     display: none;
   }
 
   section.main_hero {
     height: 25vh;
   }
   .main_hero_visual {
     position: relative;
     overflow: hidden;
     aspect-ratio: 11 / 9;
   }
   .main_hero_visual img {
     position: absolute;
     top: 5%;
     left: 50%;
     width: 100%;
     height: 173px;
     object-fit: cover;
     object-position: 50% 10%;
     transform-origin: top center;
     transform: translateX(-50%) scale(1);
   }
 
   section.main_features {
     margin: 0px 16px;
   }
   .main_features_contents {
     margin: 24px 0 0;
     padding: 0;
   }
   .main_features_contents span {
     font-size: 24px;
   }
 
   .main_features_contents .main_approach {
     font-size: 38px;
   }
 
   .main_features_contents__box_text {
     margin: 0px !important;
   }
   .main_features_contents__box_text h2 {
     text-align: left;
     margin: 0;
     color: #232323;
     font-family: "CorporateLogo2";
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 16px;
   }

   .main_features_contents .main_features_contents__box_text--reverse h2 {
    text-align: left;
    font-size: 24px;
   }
 
   .main_case_title {
     margin: 56px 16px 16px;
     padding: 0;
   }
 
   .main_service {
     padding: 100px 0 0;
   }
   .main_service_title p {
     font-size: 28px;
   }
   .main_service_title span {
     font-size: 32px;
   }
   .main_service_contents_box_text span {
     font-size: 20px;
   }
   .main_service_contents_box_text .bold {
     font-size: 40px;
   }
   .main_service_contents_box img {
     width: 100%;
     height: 37vh;
     object-fit: cover;
     object-position: right;
   }
   .main_service_contents_box--reverse img {
     justify-self: right;
   }
   .main_service_contents_box--reverse h2 {
     text-align: right;
   }
   .main_service_contents_box_text {
     margin: 0 !important;
   }
 
   .main_service_contents .cta-band__buttons {
     display: flex;
     width: 100%;
     flex-direction: column;
     gap: 16px;
   }
 
   .main_service_contents .cta-band__buttons .cta-band__btn {
     width: 343px;
   }
 
   .main_features_title p,
   .main_features_contents .main_title,
   .main_service_contents_box_text h2 {
     font-size: 24px;
   }
 
   .main_features_title p {
     margin-top: 80px;
   }
 
   .main_features_contents__box_text p {
     color: #222;
     font-family: "Noto Sans JP";
     font-size: 15px;
     font-style: normal;
     font-weight: 500;
     line-height: 150%; 
     margin-top: 8px;
   }
   .main_service_contents_box_text p {
     font-size: 15px;
   }
   .main_case_contents_box_text p {
     font-size: 20px;
   }
 
   /* .main_service_contents_consulting_all: keep default margins on SP */
   .main_service_contents_consulting_all {
     padding: 0;
   }
   .main_service_contents_consulting_all p {
     font-size: 20px;
   }
   .main_service_contents_consulting_all__flex_box_img {
     width: 100px;
   }
   .main_service_contents_consulting_all_flex {
     margin-top: 40px;
     display: flex;
     align-items: baseline;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
   }
   .main_service_contents_consulting_all__flex_box {
     width: 48%;
     margin: 0;
   }
   .main_service_contents_consulting_all__flex_box_title {
     font-size: 17px;
   }
   .main_service_contents_consulting_all__flex_box .border {
     width: 145px;
   }
   .main_service_contents_consulting_all__flex_box_p p {
     font-size: 12px;
   }
   .main_service_contents_consulting_all__flex_box:nth-child(2) {
     transform: translateY(-5%);
   }
   .main_service_contents_consulting_all__flex_box:nth-child(3) {
     transform: translateY(-13%);
   }
   .main_service_contents_consulting_all__flex_box:nth-child(4) {
     transform: translateY(-16%);
   }
 
   .main_service_contents_consulting_all__flex_box_content p {
     font-size: 12px;
     color: #f29600;
   }
 
   .main_case_title p {
     font-size: 32px;
   }
   .main_case_contents_box_text {
     margin: auto;
     display: flex;
     flex-direction: column;
   }

   .main_case_contents_box_sub_text p {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
   }

   .main_case_contents_box_sub_text .main_case__desc {
    color: var(---Typography-7, #666);
    font-family: "Noto Sans JP";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
   }

   .main_case_contents_box_sub_tag-area .tag p {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
   }

   .main_case__contents_button span {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; 
   }

   .tag p {
     font-size: 10px;
   }
   .main_case_contents_box_sub--flex:nth-child(2) {
     transform: none;
   }
   .main_case_contents_box_sub--flex:nth-child(3) {
     transform: none;
   }
   .main_case_contents_box_sub--flex:nth-child(4) {
     transform: none;
   }
   section.main_case {
     margin: 24px 0;
   }
 
   .main_case_contents_box_sub {
     margin: 0px auto;
     max-width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
   }
   .main_case_contents_box_sub_text {
     font-size: 20px;
   }
 
   section.main_faq {
     max-width: 85%;
     margin: 48px auto;
   }
   .main_faq_contents {
     width: 100%;
     padding: 0;
     gap: 24px;
   }
   .main_contact_contents {
     margin: 100px 16px 0;
     padding: 0;
   }
   .main_contact_contents_textbox_title p {
     font-size: 24px;
   }
 
   .main_faq_title {
     font-size: 16px;
     margin-bottom: 32px;
   }
 
   .main_faq_title p {
     font-size: 16px;
   }
 
   .main_faq_title span {
     font-size: 24px;
   }
   .main_faq_contents_box--Q p {
     font-size: 18px;
   }
   .A,
   .Q {
     font-size: 24px;
   }
   .main_faq_contents_box--A p {
     font-size: 15px;
   }
 
   section.main_contact {
     margin-top: 100px;
     padding-bottom: 50px;
   }
   .main_contact_contents_contact-area {
     width: 100%;
   }
 
   .main_contact_contents .cta-band__buttons .cta-band__btn {
     width: auto;
   }
 
   .main_service {
     clip-path: polygon(0 6%, 100% 0, 100% 94%, 0% 100%);
     padding: 0;
     margin: 550px 16px 75px;
     overflow: visible;
     padding-bottom: 56px;
     padding-top: 48px;
   }

   .service-wrap {
    margin-bottom: 125px;
   }

   .main_service_decoration--3 {
     top: 347%;
   }
 
   [class^="main_case_decoration--"],
   [class*=" main_case_decoration--"] {
     display: none;
   }
 
   [class^="main_faq_decoration--"],
   [class*=" main_faq_decoration--"] {
     display: none;
   }
 
   .flow__img{ display:none; }   /* 画像版はSPで非表示 */
   .flow-sp{
     display:block;
     overflow-x:auto; overflow-y:hidden;
     -webkit-overflow-scrolling:touch;
     scroll-snap-type:x mandatory;
     padding:24px 0;
   }
   .flow-sp::-webkit-scrollbar{ display:none; }
   .flow-sp{ scrollbar-width:none; }
 
   .flow-sp__track{
     display:flex;
     width:max-content;
     margin:0; padding:0 8px;
     list-style:none;
     align-items:stretch;
   }
 
   .flow-sp__step{
     position:relative;
     --chev:42px;
     min-width:calc(190px + var(--chev));
     height:160px;
     scroll-snap-align:start;
   }
 
   /* 中の白カード（右が尖る） */
   .flow-sp__card{
     position:absolute; inset:0;
     padding:24px 16px;
     background:#fff;
     display:flex; align-items:center; justify-content:center;
     box-sizing:border-box;
     clip-path: polygon(
       7% 0,
       calc(101% - var(--chev)) 0,
       100% 50%,
       calc(93% - var(--chev)) 100%,
       0 100%
     );
     z-index:1; /* 三角より下に落としたければ 0 にして、三角を 2 に */
   }
 
   .flow-sp__card p{
     margin:0; color:#056C29; font-size:18px; line-height:27px; font-weight:700; text-align:center;
   }
 
   /* 2個目以降：左側の白三角を上下2枚 */
   .flow-sp__step:not(:first-child)::before,
   .flow-sp__step:not(:first-child)::after{
     content:""; position:absolute; pointer-events:none;
     background-repeat:no-repeat; background-size:contain;
     z-index:2; /* カードより上 */
   }
   /* 上側の細い三角 48×80 */
   .flow-sp__step:not(:first-child)::before{
     left:-13px; top:0px; width:48px; height:80px;
     background-image:url("/wp-content/themes/mitsukaru-corp/assets/images/headhunting-2/flow-left-top.svg");
   }
   /* 下側の三角 57×80 */
   .flow-sp__step:not(:first-child)::after{
     left:-48px; bottom:0px; width:57px; height:80px;
     background-image:url("/wp-content/themes/mitsukaru-corp/assets/images/headhunting-2/flow-left-bottom.svg");
   }
 
   /* 最終ステップは矢印無しの矩形に */
   .flow-sp__step:last-child .flow-sp__card{
     min-width:180px;
   }
   .flow-sp__step:last-child .flow-sp__chev{ display:none; }
 
   .main_contact::before {
     height: 290px;
     inset: auto -10% 4% 0%;
   }
   .main_contact::after {
     top: -10%;
     width: 54vw;
     clip-path: polygon(0 0, 20% 0, 348% 70%, 0 55%);
   }
 
   .main_contact_contents .cta-band__buttons {
     padding-top: 16px;
     width: 100%;
   }
 
   .main_contact_contents .cta-band__buttons .arrow {
     width: 40px;
     height: 40px;
   }
 
   .main_service_contents .cta-band__buttons .arrow {
     width: 48px;
     height: 48px;
   }
 
   .main_contact_contents_textbox_text p {
     font-size: 15px;
   }
 
   [class^="main_contact_decoration--"],
   [class*=" main__contact_decoration--"] {
     display: none;
   }

   .main_features_decoration--2 {
    display: none;
   }

   .main_features_decoration--3 {
    display: none;
   }

   .main_features_decoration--4 {
    top: 15.2%;
    right: 0;
    width: 38%;
    height: 18px;
    background: #056C29;
    display: block;
   }

   .main_features_decoration--5 {
    top: 15.8%;
    right: 0;
    width: 16%;
    height: 5px;
    background: #056C29;
   }

   .main_features_decoration--6 {
    display: none;
   }

   .main_features_decoration--8 {
    top: 17%;
    left: 0;
    width: 90%;
    height: 310px;
    background: #DDEEE3;
   }

   .no-desired-1 {
    top: 21%;
   }

   .no-desired-2 {
    top: 21.8%;
   }

   .no-desired-3 {
    top: 24%;
   }

   .main_service { clip-path: none; } 

  .main_service_bleed{
    position:absolute;
    left: calc(50% - 50vw);               
    width: 100vw;
    height: 140px;                         
    top: 52px;                             
    background:#056C29;
    transform: skewX(-6deg);
    z-index: 2;                            
    pointer-events: none;
    display: none;
  }


.main_service{
  position: relative;
  isolation: isolate;          
  overflow: visible;    
  background: transparent;
  box-shadow: none;       
}


.main_service_frame{
  position: relative;
  z-index: 0;                 
}

.main_service_frame_1{
  position: relative;
  z-index: 0;                 
}

.main_service_frame_5{
  position: relative;
  z-index: 0;                 
}

.main_service_frame::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;                     
  background:#056C29;         
  clip-path: polygon(0% 6%,100% 0%,100% 94%,0 100%); 
  z-index:-1;                  
  pointer-events:none;
  height: 625px;
}

.main_service_frame_1::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;                     
  background:#056C29;         
  clip-path: polygon(0% 6%,100% 0%,100% 94%,0 100%); 
  z-index:-1;                  
  pointer-events:none;
  height: 810px;
}

.main_service_frame_5::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;                     
  background:#056C29;         
  clip-path: polygon(0% 6%,100% 0%,100% 94%,0 100%); 
  z-index:-1;                  
  pointer-events:none;
  height: 750px;
}


.main_service_inner{
  position: relative;
  z-index: 1;               
  padding: 55px 0px 0;
}


   .main_service_decoration--1 {
    top: 80%;
    left: 0;
    width: 38%;
    height: 20px;
    background: #056C29;
   }

   .main_service_decoration--2 {
    top: 15.1%;
    right: 0;
    width: 38%;
    height: 20px;
    background: #056C29;
    display: block;
   }

   .main_service_decoration--3 {
    top: 84.5%;
    left: 0;
    width: 38%;
    height: 4px;
    background: #056C29;
    transform: skewY(-6deg);
   }   

   .bleed-left {
    left: calc(50% - 50svw);   
    right: auto;      
    max-width: none;
  }

  .bleed {
    left: auto;   
    right: calc(50% - 50svw);            
    max-width: none;
  }
   .main_case [class^="main_case_decoration--"],
   .main_faq [class^="main_faq_decoration--"],
   .main_contact [class^="main_contact_decoration--"] {
     display: none !important;
   }
 }
 
 @media (min-width: 993px) and (max-width: 1200px) {
   /* CASE sub grid: prevent overflow around 1024px */
   .main_case_contents_box_sub {
     gap: 16px;
     justify-content: space-between;
     padding: 0 16px;
     box-sizing: border-box;
   }
   .main_case_contents_box_sub--flex {
     flex: 1 1 32%;
     margin: 0;
   }
   .main_case_contents_box_sub img {
     width: 100%;
     height: auto;
   }
 }
 
 /* SERVICE: consulting list overflow fix */
 @media (min-width: 993px) and (max-width: 1400px) {
   .main_service_contents_consulting_all_flex {
     flex-wrap: wrap;
     gap: 16px;
   }
   .main_service_contents_consulting_all__flex_box {
     width: calc(25% - 16px);
     margin: 0;
   }
   .main_service_contents_consulting_all__flex_box_img {
     width: 100%;
   }
   .main_service_contents_consulting_all__flex_box img {
     width: 100%;
     height: auto;
     display: block;
   }
 }
 
 .dropdown__lists {
   list-style: none;
   padding-inline-start: 0px;
 }

 /* 1) SPで固定ヘッダーぶん本文を下げる */
@media (max-width: 768px){
  body { padding-top: 60px; }           /* ← ここで被り解消 */
}

/* 2) FVの高さを固定しない（画像の比率で伸縮） */
@media (max-width: 768px){
  .main_hero_visual { height: auto !important; }
  .main_hero_visual picture,
  .main_hero_visual img {
    display: block;
    width: 100%;
  }
}

/* 3) テキストを画像に重ねているなら念のため */
@media (max-width: 768px){
  .main_hero_visual { position: relative; }
  .main_hero_overlay {
    position: absolute;
    left: 0; right: 0; top: 27px;           /* 必要なら微調整 */
  }
}

/* 4) ヘッダー側（参照用：高さを明示 & 固定） */
@media (max-width: 768px){
  #js-header_sp{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
  }

  .main_features_decoration--1 {
    display: none;
  }
}