@charset "UTF-8"; /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } /* change border colour to suit your needs */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; border-width: 0; } a { text-decoration: none; } @font-face { font-family: "Marcellus-Regular"; src: url("../fonts/Marcellus-Regular.woff") format("woff"); font-weight: 400; font-style: normal; } .blogBody { font-size: medium; width: 100%; /* children of the element all have display:none */ /* generic block-level elements */ /* heading elements */ /* tables */ /* for tables without table section elements (can happen with XHTML or dynamically created tables) */ /* lists */ /* form elements */ /* Form controls don't go vertical. */ /* TODO(crbug.com/880258): Use different styles for `-internal-autofill-previewed` and `-internal-autofill-selected`. */ /* meter */ /* progress */ /* inline elements */ /* states */ /* HTML5 ruby elements */ /* other elements */ /* TODO(foolip): In the Fullscreen spec, there's a ::backdrop block with the properties shared with :fullscreen::backdrop (see fullscreen.css). */ /* page */ /* Allows thead sections to print at the top of each page. */ } .blogBody html { display: block; } .blogBody head { display: none; } .blogBody meta { display: none; } .blogBody title { display: none; } .blogBody link { display: none; } .blogBody style { display: none; } .blogBody script { display: none; } .blogBody body { display: block; margin: 8px; } .blogBody body:-webkit-full-page-media { background-color: black; } .blogBody p { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; line-height: 2; } @media screen and (max-width: 480px) { .blogBody p { font-size: 14px; } } .blogBody span { font-size: inherit; } .blogBody div { display: block; } .blogBody layer { display: block; } .blogBody article, .blogBody aside, .blogBody footer, .blogBody header, .blogBody hgroup, .blogBody main, .blogBody nav, .blogBody section { display: block; } .blogBody marquee { display: inline-block; width: -webkit-fill-available; } .blogBody address { display: block; } .blogBody blockquote { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 40px; margin-inline-start: 40px; -webkit-margin-end: 40px; margin-inline-end: 40px; } .blogBody figcaption { display: block; } .blogBody figure { display: block; } .blogBody q { display: inline; } .blogBody q:before { content: open-quote; } .blogBody q:after { content: close-quote; } .blogBody center { display: block; /* special centering to be able to emulate the html4/netscape behaviour */ text-align: -webkit-center; } .blogBody hr { display: block; overflow: hidden; unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: isolate; -webkit-margin-before: 0.5em; margin-block-start: 0.5em; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; border-style: inset; border-width: 1px; } .blogBody map { display: inline; } .blogBody video { -o-object-fit: contain; object-fit: contain; } .blogBody h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; margin-block-start: 0.67em; -webkit-margin-after: 0.67em; margin-block-end: 0.67em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody :-webkit-any(article, aside, nav, section) h1 { font-size: 1.5em; -webkit-margin-before: 0.83em; margin-block-start: 0.83em; -webkit-margin-after: 0.83em; margin-block-end: 0.83em; } .blogBody :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 1.17em; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; } .blogBody :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 1em; -webkit-margin-before: 1.33em; margin-block-start: 1.33em; -webkit-margin-after: 1.33em; margin-block-end: 1.33em; } .blogBody :-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; -webkit-margin-before: 1.67em; margin-block-start: 1.67em; -webkit-margin-after: 1.67em; margin-block-end: 1.67em; } .blogBody :-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; -webkit-margin-before: 2.33em; margin-block-start: 2.33em; -webkit-margin-after: 2.33em; margin-block-end: 2.33em; } .blogBody h2 { display: block; font-size: 2.3em; -webkit-margin-before: 0.83em; margin-block-start: 0.83em; -webkit-margin-after: 0.83em; margin-block-end: 0.83em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } @media screen and (max-width: 480px) { .blogBody h2 { font-size: 1.6em; } } .blogBody h3 { display: block; font-size: 1.17em; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h4 { display: block; -webkit-margin-before: 1.33em; margin-block-start: 1.33em; -webkit-margin-after: 1.33em; margin-block-end: 1.33em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h5 { display: block; font-size: 0.83em; -webkit-margin-before: 1.67em; margin-block-start: 1.67em; -webkit-margin-after: 1.67em; margin-block-end: 1.67em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h6 { display: block; font-size: 0.67em; -webkit-margin-before: 2.33em; margin-block-start: 2.33em; -webkit-margin-after: 2.33em; margin-block-end: 2.33em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody strong, .blogBody em, .blogBody kbd { font-size: 1.25vw; } @media screen and (max-width: 800px) { .blogBody strong, .blogBody em, .blogBody kbd { font-size: 4.2666666667vw; } } .blogBody table { display: table; border-color: gray; box-sizing: border-box; text-indent: initial; } .blogBody thead { display: table-header-group; vertical-align: middle; border-color: inherit; } .blogBody tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } .blogBody tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; } .blogBody table > tr { vertical-align: middle; } .blogBody col { display: table-column; } .blogBody colgroup { display: table-column-group; } .blogBody tr { display: table-row; vertical-align: inherit; border-color: inherit; } .blogBody td, .blogBody th { display: table-cell; vertical-align: inherit; } .blogBody th { font-weight: bold; text-align: -internal-center; } .blogBody caption { display: table-caption; text-align: -webkit-center; } .blogBody ul, .blogBody menu, .blogBody dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 40px; padding-inline-start: 40px; } .blogBody ol { display: block; list-style-type: decimal; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 40px; padding-inline-start: 40px; } .blogBody li { display: list-item; text-align: -webkit-match-parent; line-height: 1.8; } .blogBody ul ul, .blogBody ol ul { list-style-type: circle; } .blogBody ol ol ul, .blogBody ol ul ul, .blogBody ul ol ul, .blogBody ul ul ul { list-style-type: square; } .blogBody dd { display: block; -webkit-margin-start: 40px; margin-inline-start: 40px; } .blogBody dl { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; } .blogBody dt { display: block; } .blogBody ol ul, .blogBody ul ol, .blogBody ul ul, .blogBody ol ol { -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0; margin-block-end: 0; } .blogBody form { display: block; margin-top: 0em; } .blogBody :-webkit-any(table, thead, tbody, tfoot, tr) > form:-internal-is-html { display: none !important; } .blogBody label { cursor: default; } .blogBody legend { display: block; -webkit-padding-start: 2px; padding-inline-start: 2px; -webkit-padding-end: 2px; padding-inline-end: 2px; border: none; } .blogBody fieldset { display: block; -webkit-margin-start: 2px; margin-inline-start: 2px; -webkit-margin-end: 2px; margin-inline-end: 2px; -webkit-padding-before: 0.35em; padding-block-start: 0.35em; -webkit-padding-start: 0.75em; padding-inline-start: 0.75em; -webkit-padding-end: 0.75em; padding-inline-end: 0.75em; -webkit-padding-after: 0.625em; padding-block-end: 0.625em; min-inline-size: -webkit-min-content; min-inline-size: -moz-min-content; min-inline-size: min-content; } .blogBody button { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .blogBody input, .blogBody textarea, .blogBody select, .blogBody button, .blogBody meter, .blogBody progress { -webkit-writing-mode: horizontal-tb !important; } .blogBody input, .blogBody textarea, .blogBody select, .blogBody button { margin: 0em; font: -webkit-small-control; text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */ color: -internal-light-dark(black, white); letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; display: inline-block; text-align: start; } .blogBody input[type=hidden i] { display: none; } .blogBody input { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; padding: 1px; background-color: -internal-light-dark(white, black); border: 2px inset; -webkit-rtl-ordering: logical; cursor: text; } .blogBody input[type=search i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; } .blogBody input::-webkit-textfield-decoration-container { display: flex !important; align-items: center; -webkit-user-modify: read-only !important; content: none !important; writing-mode: inherit !important; -internal-align-self-block: center; } .blogBody input::-webkit-clear-button { -webkit-appearance: auto; appearance: auto; display: inline-block; cursor: default; flex: none; -webkit-user-modify: read-only !important; -webkit-margin-start: 2px; margin-inline-start: 2px; } .blogBody input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-clear-button { opacity: 1; pointer-events: auto; } .blogBody input[type=search i]::-webkit-search-cancel-button { -webkit-appearance: auto; appearance: auto; display: block; cursor: default; flex: none; -webkit-user-modify: read-only !important; -webkit-margin-start: 1px; margin-inline-start: 1px; -webkit-user-select: none !important; user-select: none !important; } .blogBody input[type=search i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button { opacity: 1; pointer-events: auto; } .blogBody input::-webkit-inner-spin-button { -webkit-appearance: auto; appearance: auto; display: inline-block; cursor: default; flex: none; align-self: stretch; -webkit-user-modify: read-only !important; } .blogBody input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-inner-spin-button { opacity: 1; pointer-events: auto; } .blogBody select { border-radius: 5px; } .blogBody textarea { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; background-color: -internal-light-dark(white, black); border: 1px solid; -moz-column-count: initial !important; column-count: initial !important; -webkit-rtl-ordering: logical; flex-direction: column; resize: auto; cursor: text; padding: 2px; white-space: pre-wrap; word-wrap: break-word; } .blogBody ::-webkit-input-placeholder { -webkit-text-security: none; color: #757575; direction: inherit !important; pointer-events: none !important; text-orientation: inherit !important; writing-mode: inherit !important; } .blogBody input::-webkit-input-placeholder { text-overflow: inherit; line-height: initial; white-space: pre; word-wrap: normal; overflow: hidden; -webkit-user-modify: read-only !important; } .blogBody input::-internal-input-suggested { text-overflow: inherit; white-space: nowrap; overflow: hidden; } .blogBody input::-internal-input-suggested, .blogBody textarea::-internal-input-suggested { font: -webkit-small-control !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; } .blogBody input[type=password i] { -webkit-text-security: disc !important; } .blogBody input[type=password i]::-internal-input-suggested { -webkit-text-security: disc !important; } .blogBody input[type=hidden i], .blogBody input[type=image i], .blogBody input[type=file i] { -webkit-appearance: initial; /* AutoAppearanceFor() should match to this. */ padding: initial; background-color: initial; border: initial; cursor: default; } .blogBody input[type=file i] { align-items: baseline; color: inherit; overflow: hidden !important; text-align: start !important; text-overflow: ellipsis; white-space: pre; } .blogBody input[type=image i] { cursor: pointer; } .blogBody input:-internal-autofill-previewed, .blogBody textarea:-internal-autofill-previewed, .blogBody select:-internal-autofill-previewed { -webkit-appearance: menulist-button; background-color: #e8f0fe !important; background-image: none !important; color: -internal-light-dark(black, white) !important; } .blogBody input:-internal-autofill-selected, .blogBody textarea:-internal-autofill-selected, .blogBody select:-internal-autofill-selected { -webkit-appearance: menulist-button; background-color: #e8f0fe !important; background-image: none !important; color: -internal-light-dark(black, white) !important; } .blogBody input[type=radio i], .blogBody input[type=checkbox i] { margin: 3px 0.5ex; padding: initial; background-color: initial; border: initial; cursor: default; } .blogBody input[type=button i], .blogBody input[type=submit i], .blogBody input[type=reset i] { -internal-empty-line-height: fabricated; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; white-space: pre; } .blogBody input[type=file i]::-webkit-file-upload-button { -webkit-appearance: auto; appearance: auto; -webkit-user-modify: read-only !important; white-space: nowrap; margin: 0; -webkit-margin-end: 4px; margin-inline-end: 4px; font-size: inherit; } .blogBody input[type=button i], .blogBody input[type=submit i], .blogBody input[type=reset i], .blogBody input[type=file i]::-webkit-file-upload-button, .blogBody button { align-items: flex-start; text-align: center; cursor: default; color: -internal-light-dark(ButtonText, #aaaaaa); padding: 2px 6px 3px 6px; border: 2px outset ButtonFace; background-color: ButtonFace; box-sizing: border-box; } .blogBody input[type=range i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; /* AutoAppearanceFor() should match to this. */ padding: initial; border: initial; margin: 2px; color: #909090; cursor: default; } .blogBody input[type=range i]::-webkit-slider-container, .blogBody input[type=range i]::-webkit-media-slider-container { -webkit-appearance: inherit; appearance: inherit; flex: 1; min-inline-size: 0; box-sizing: border-box; -webkit-user-modify: read-only !important; display: flex; } .blogBody input[type=range i]:-internal-has-datalist::-webkit-slider-container { /* * See LayoutThemeDefault. "22px" is * 2 * (SliderTickOffsetFromTrackCenter() + SliderTickSize().Height()). */ min-block-size: 22px; } .blogBody input[type=range i]::-webkit-slider-runnable-track { flex: 1; min-inline-size: 0; -webkit-align-self: center; box-sizing: border-box; -webkit-user-modify: read-only !important; display: block; } .blogBody input[type=range i]::-webkit-slider-thumb, .blogBody input[type=range i]::-webkit-media-slider-thumb { -webkit-appearance: auto; appearance: auto; box-sizing: border-box; -webkit-user-modify: read-only !important; display: block; } .blogBody input[type=button i]:disabled, .blogBody input[type=submit i]:disabled, .blogBody input[type=reset i]:disabled, .blogBody input[type=file i]:disabled::-webkit-file-upload-button, .blogBody button:disabled, .blogBody select:disabled, .blogBody optgroup:disabled, .blogBody option:disabled, .blogBody select[disabled] > option { color: -internal-light-dark(GrayText, #aaa); } .blogBody input[type=button i]:active, .blogBody input[type=submit i]:active, .blogBody input[type=reset i]:active, .blogBody input[type=file i]:active::-webkit-file-upload-button, .blogBody button:active { border-style: inset; } .blogBody input[type=button i]:active:disabled, .blogBody input[type=submit i]:active:disabled, .blogBody input[type=reset i]:active:disabled, .blogBody input[type=file i]:active:disabled::-webkit-file-upload-button, .blogBody button:active:disabled { border-style: outset; } .blogBody input:disabled, .blogBody textarea:disabled { color: -internal-light-dark(#545454, #aaa); cursor: default; } .blogBody option:-internal-spatial-navigation-focus { outline: -internal-light-dark(black, white) dashed 1px; outline-offset: -1px; } .blogBody datalist { display: none; } .blogBody area { display: inline; } .blogBody area:-webkit-any-link { cursor: pointer; } .blogBody param { display: none; } .blogBody input[type=checkbox i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; } .blogBody input[type=radio i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; } .blogBody input[type=color i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: 44px; height: 23px; background-color: ButtonFace; /* Same as native_theme_base. */ border: 1px #a9a9a9 solid; padding: 1px 2px; cursor: default; } .blogBody 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%; } .blogBody input[type=color i]::-webkit-color-swatch { background-color: #000000; border: 1px solid #777777; flex: 1; min-width: 0; -webkit-user-modify: read-only !important; } .blogBody input[type=color i][list] { -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */ width: 88px; height: 23px; } .blogBody input[type=color i][list]::-webkit-color-swatch-wrapper { -webkit-padding-start: 8px; padding-inline-start: 8px; -webkit-padding-end: 24px; padding-inline-end: 24px; } .blogBody input[type=color i][list]::-webkit-color-swatch { border-color: #000000; } .blogBody input::-webkit-calendar-picker-indicator { display: inline-block; width: 0.66em; height: 0.66em; padding: 0.17em 0.34em; -webkit-user-modify: read-only !important; cursor: default; } .blogBody input::-webkit-calendar-picker-indicator:hover { background-color: #eee; } .blogBody input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-calendar-picker-indicator, .blogBody input::-webkit-calendar-picker-indicator:focus { opacity: 1; pointer-events: auto; } .blogBody input[type=date i]:disabled::-webkit-clear-button, .blogBody input[type=date i]:disabled::-webkit-inner-spin-button, .blogBody input[type=datetime-local i]:disabled::-webkit-clear-button, .blogBody input[type=datetime-local i]:disabled::-webkit-inner-spin-button, .blogBody input[type=month i]:disabled::-webkit-clear-button, .blogBody input[type=month i]:disabled::-webkit-inner-spin-button, .blogBody input[type=week i]:disabled::-webkit-clear-button, .blogBody input[type=week i]:disabled::-webkit-inner-spin-button, .blogBody input:disabled::-webkit-calendar-picker-indicator, .blogBody input[type=date i][readonly]::-webkit-clear-button, .blogBody input[type=date i][readonly]::-webkit-inner-spin-button, .blogBody input[type=datetime-local i][readonly]::-webkit-clear-button, .blogBody input[type=datetime-local i][readonly]::-webkit-inner-spin-button, .blogBody input[type=month i][readonly]::-webkit-clear-button, .blogBody input[type=month i][readonly]::-webkit-inner-spin-button, .blogBody input[type=week i][readonly]::-webkit-clear-button, .blogBody input[type=week i][readonly]::-webkit-inner-spin-button, .blogBody input[readonly]::-webkit-calendar-picker-indicator { visibility: hidden; } .blogBody select { -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */ box-sizing: border-box; align-items: center; border: 1px solid; white-space: pre; -webkit-rtl-ordering: logical; color: -internal-light-dark(black, white); background-color: -internal-light-dark(white, black); cursor: default; } .blogBody select:not(:-internal-list-box) { overflow: visible !important; } .blogBody select:-internal-list-box { -webkit-appearance: listbox; /* AutoAppearanceFor() should match to this. */ align-items: flex-start; border: 1px inset gray; border-radius: initial; overflow-x: hidden; overflow-y: scroll; vertical-align: text-bottom; white-space: nowrap; } .blogBody optgroup { font-weight: bolder; display: block; } .blogBody option { font-weight: normal; display: block; padding: 0 2px 1px 2px; white-space: nowrap; min-height: 1.2em; } .blogBody select:-internal-list-box optgroup option:before { content: "    "; } .blogBody select:-internal-list-box option, .blogBody select:-internal-list-box optgroup { line-height: initial !important; } .blogBody select:-internal-list-box:focus option:checked { background-color: -internal-active-list-box-selection !important; color: -internal-active-list-box-selection-text !important; } .blogBody select:-internal-list-box:focus option:checked:disabled { background-color: -internal-inactive-list-box-selection !important; } .blogBody select:-internal-list-box option:checked { background-color: -internal-inactive-list-box-selection !important; color: -internal-inactive-list-box-selection-text !important; } .blogBody select:-internal-list-box:disabled option:checked, .blogBody select:-internal-list-box option:checked:disabled { color: gray !important; } .blogBody select:-internal-list-box hr { border-style: none; -webkit-margin-before: 0.5em; margin-block-start: 0.5em; -webkit-margin-after: 0; margin-block-end: 0; } .blogBody select:-internal-list-box:focus option:-internal-multi-select-focus { outline: auto 1px -webkit-focus-ring-color; outline-offset: -1px; } .blogBody output { display: inline; } .blogBody meter { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; display: inline-block; height: 1em; width: 5em; vertical-align: -0.2em; -webkit-user-modify: read-only !important; } .blogBody meter::-webkit-meter-inner-element { -webkit-appearance: inherit; appearance: inherit; box-sizing: inherit; display: none; -webkit-user-modify: read-only !important; height: 100%; width: 100%; } .blogBody meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance { display: block; } .blogBody meter::-internal-fallback:-internal-shadow-host-has-appearance { display: none; } .blogBody meter::-webkit-meter-bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody meter::-webkit-meter-optimum-value { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); height: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody meter::-webkit-meter-suboptimum-value { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody meter::-webkit-meter-even-less-good-value { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); height: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody progress { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; display: inline-block; height: 1em; width: 10em; vertical-align: -0.2em; } .blogBody progress::-webkit-progress-inner-element { box-sizing: inherit; -webkit-user-modify: read-only; height: 100%; width: 100%; } .blogBody progress::-webkit-progress-bar { background-color: gray; height: 100%; width: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody progress::-webkit-progress-value { background-color: green; height: 100%; width: 50%; /* should be removed later */ -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody u, .blogBody ins { text-decoration: underline; } .blogBody abbr[title], .blogBody acronym[title] { -webkit-text-decoration: dotted underline; text-decoration: dotted underline; } .blogBody strong, .blogBody b { font-weight: bold; } .blogBody i, .blogBody cite, .blogBody em, .blogBody var, .blogBody address, .blogBody dfn { font-style: italic; } .blogBody pre, .blogBody xmp, .blogBody plaintext, .blogBody listing { display: block; white-space: pre; margin: 1em 0; } .blogBody mark { background-color: yellow; color: black; } .blogBody big { font-size: larger; } .blogBody small { font-size: smaller; } .blogBody s, .blogBody strike, .blogBody del { text-decoration: line-through; } .blogBody sub { vertical-align: sub; font-size: smaller; } .blogBody sup { vertical-align: super; font-size: smaller; } .blogBody nobr { white-space: nowrap; } .blogBody :-internal-spatial-navigation-interest { outline: auto 1px -webkit-focus-ring-color !important; box-shadow: none !important; } .blogBody :focus { outline: auto 1px -webkit-focus-ring-color; } .blogBody html:focus, .blogBody body:focus { outline: none; } .blogBody embed:focus, .blogBody iframe:focus, .blogBody object:focus { outline: none; } .blogBody input:focus, .blogBody textarea:focus, .blogBody select:focus { outline-offset: -2px; } .blogBody input[type=button i]:focus, .blogBody input[type=checkbox i]:focus, .blogBody input[type=file i]:focus, .blogBody input[type=hidden i]:focus, .blogBody input[type=image i]:focus, .blogBody input[type=radio i]:focus, .blogBody input[type=reset i]:focus, .blogBody input[type=submit i]:focus, .blogBody input[type=file i]:focus::-webkit-file-upload-button { outline-offset: 0; } .blogBody a:-webkit-any-link { color: #0073aa; text-decoration: underline; cursor: pointer; word-break: break-all; } .blogBody p.has-text-color a { color: inherit; } .blogBody a:-webkit-any-link:active { color: -webkit-activelink; } .blogBody a:-webkit-any-link:read-write { cursor: text; } .blogBody ruby, .blogBody rt { text-indent: 0; /* blocks used for ruby rendering should not trigger this */ } .blogBody rt { line-height: normal; } .blogBody ruby > rt { display: block; font-size: 50%; text-align: start; } .blogBody rp { display: none; } .blogBody noframes { display: none; } .blogBody frameset, .blogBody frame { display: block; } .blogBody frameset { border-color: inherit; } .blogBody iframe { border: 2px inset; } .blogBody details { display: block; } .blogBody summary { display: block; } .blogBody summary::-webkit-details-marker { display: inline-block; width: 0.66em; height: 0.66em; -webkit-margin-end: 0.4em; margin-inline-end: 0.4em; } .blogBody template { display: none; } .blogBody bdi, .blogBody output { unicode-bidi: -webkit-isolate; } .blogBody bdo { unicode-bidi: bidi-override; } .blogBody textarea[dir=auto i] { unicode-bidi: -webkit-plaintext; } .blogBody dialog:not([open]) { display: none; } .blogBody dialog { display: block; position: absolute; left: 0; right: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: auto; border: solid; padding: 1em; background: -internal-light-dark(white, black); color: -internal-light-dark(black, white); } .blogBody dialog:-internal-modal { position: fixed; overflow: auto; top: 0; bottom: 0; /* 6px + 2em = border + padding, as by default box-sizing is content-box. */ max-width: calc(100% - 6px - 2em); max-height: calc(100% - 6px - 2em); } .blogBody dialog::-webkit-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.1); } .blogBody dialog::backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.1); } .blogBody slot { display: contents; } @page { .blogBody { /* FIXME: Define the right default values for page properties. */ size: auto; margin: auto; padding: 0px; border-width: 0px; } } @media print { .blogBody thead { -moz-column-break-inside: avoid; break-inside: avoid; } .blogBody tfoot { -moz-column-break-inside: avoid; break-inside: avoid; } } .blogBody .wp-block-pullquote { margin: 0 0 1em 0; padding: 3em 0; text-align: center; border-top: 4px solid; border-bottom: 4px solid; } .blogBody .wp-block-pullquote.alignleft, .blogBody .wp-block-pullquote.alignright { max-width: 420px; } .blogBody .wp-block-pullquote.alignleft p, .blogBody .wp-block-pullquote.alignright p { font-size: 1.25em; } .blogBody .wp-block-pullquote p { font-size: 1.75em; line-height: 1.6; } .blogBody .wp-block-pullquote cite, .blogBody .wp-block-pullquote footer { position: relative; } .blogBody .wp-block-pullquote .has-text-color a { color: inherit; } .blogBody .wp-block-pullquote:not(.is-style-solid-color) { background: none; } .blogBody .wp-block-pullquote.is-style-solid-color { border: none; } .blogBody .wp-block-pullquote.is-style-solid-color blockquote { margin-left: auto; margin-right: auto; text-align: left; max-width: 60%; } .blogBody .wp-block-pullquote.is-style-solid-color blockquote p { margin-top: 0; margin-bottom: 0; font-size: 2em; } .blogBody .wp-block-pullquote.is-style-solid-color blockquote cite { text-transform: none; font-style: normal; } .blogBody .wp-block-pullquote cite { color: inherit; } .blogBody .wp-block-quote { border-left: 0.25em solid; margin: 0 0 1.75em; padding-left: 1em; } .blogBody .wp-block-table td, .blogBody .wp-block-table th { border: 1px solid; } .blogBody .wp-block-table td, .blogBody .wp-block-table th { padding: 0.5em; border: 1px solid; word-break: normal; line-height: 1.8; } .blogBody .wp-block-image img { max-width: 100%; height: auto; } .blogBody .wp-block-columns { display: flex; margin-bottom: 2em; box-sizing: border-box; flex-wrap: wrap; } @media screen and (max-width: 480px) { .blogBody .wp-block-columns { flex-direction: column-reverse; } } .blogBody .wp-block-columns p { -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0; margin-block-end: 0; } .blogBody .wp-block-column { overflow: hidden; } .blogBody .size-full img { width: 100%; } .blogBody h2, .blogBody h3, .blogBody h4, .blogBody h5, .blogBody h6 { -webkit-margin-before: 2em; margin-block-start: 2em; -webkit-margin-after: 2em; margin-block-end: 2em; } .blogBody .wp-block-column > h1, .blogBody .wp-block-column > h2, .blogBody .wp-block-column > h3, .blogBody .wp-block-column > h4, .blogBody .wp-block-column > h5, .blogBody .wp-block-column > h6 { -webkit-margin-before: 0; margin-block-start: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-size: 62.5%; scroll-behavior: smooth; } body * { font-family: "Noto Sans JP", system-ui; font-weight: 400; } .color\:black { color: #1b1b1b; } .header { position: fixed; display: flex; justify-content: center; align-items: center; z-index: 999; width: 100%; background-color: #ffda03; } .header--background { background: #fff; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15); } .header__inner { display: flex; justify-content: space-between; align-items: center; width: 80%; padding-top: 1.40625vw; padding-bottom: 1.40625vw; } @media screen and (max-width: 800px) { .header__inner { padding-top: 5.6vw; padding-bottom: 5.6vw; } } @media screen and (max-width: 800px) { .header__inner { width: 80%; flex-wrap: wrap; } } .header__left { display: flex; align-items: center; } @media screen and (max-width: 800px) { .header__left { width: 50%; } } .header__left img { width: 16.5546875vw; height: 1.875vw; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 800px) { .header__left img { width: 56.5066666667vw; } } @media screen and (max-width: 800px) { .header__left img { height: 6.4vw; } } @media screen and (max-width: 800px) { .header__left img { width: 11.71875vw; height: 1.328125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .header__left img { width: 40vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .header__left img { height: 4.5333333333vw; } } .header__logo-text { font-size: 1.875vw; font-weight: bold; color: #000; white-space: nowrap; } @media screen and (max-width: 800px) { .header__logo-text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .header__logo-text { display: none; } } .header__right { display: flex; align-items: center; } @media screen and (max-width: 800px) { .header__right { width: 50%; justify-content: flex-end; } } .header__nav { display: flex; gap: 1.875vw; } @media screen and (max-width: 800px) { .header__nav { display: none; } } .header__navtext { font-size: 1.25vw; color: #000; font-weight: 800; font-family: "SweetSansPro"; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .header__navtext { font-size: 4.2666666667vw; } } .header__navtext:hover { opacity: 0.7; } .header__navtext--contact { padding-top: 0.859375vw; padding-bottom: 0.859375vw; padding-left: 1.875vw; padding-right: 1.875vw; background-color: #000; color: #fff; border-radius: 999px; } @media screen and (max-width: 800px) { .header__navtext--contact { padding-top: 2.9333333333vw; padding-bottom: 2.9333333333vw; } } @media screen and (max-width: 800px) { .header__navtext--contact { padding-left: 6.4vw; padding-right: 6.4vw; } } .header__navtext--contact:hover { opacity: 0.8; } .header__imgsp.hamburger.drawer-toggle { display: none; cursor: pointer; font-weight: bold; font-size: 1.25vw; color: #fff; background-color: #000; border-radius: 999px; padding-top: 0.625vw; padding-bottom: 0.625vw; padding-left: 1.25vw; padding-right: 1.25vw; width: auto; height: auto; } @media screen and (max-width: 800px) { .header__imgsp.hamburger.drawer-toggle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .header__imgsp.hamburger.drawer-toggle { padding-top: 1.6vw; padding-bottom: 1.6vw; } } @media screen and (max-width: 800px) { .header__imgsp.hamburger.drawer-toggle { padding-left: 3.2vw; padding-right: 3.2vw; } } @media screen and (max-width: 800px) { .header__imgsp.hamburger.drawer-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; } } .hamburger { display: none; color: #000; font-weight: bold; cursor: pointer; } @media screen and (max-width: 800px) { .hamburger { display: block; } } .about { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .about { margin-top: 10.6666666667vw; } } .about__title { font-size: 5vw; background: var(--gradient); -webkit-background-clip: text; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .about__title { font-size: 10.6666666667vw; } } .about__subtitle { font-size: 1.25vw; margin-top: 0.625vw; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 700; } @media screen and (max-width: 800px) { .about__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .about__subtitle { margin-top: 2.1333333333vw; } } .about__text { width: 100%; font-size: 1.875vw; line-height: 2; text-align: center; margin-top: 3.125vw; color: black; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .about__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .about__text { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .about__text { width: 80%; } } .about__text--archive { width: 80%; } @media screen and (max-width: 800px) { .about__text--archive { display: none; } } .about__text--mt { margin-top: 5vw; } @media screen and (max-width: 800px) { .about__text--mt { margin-top: 8.5333333333vw; } } .about__textSp { display: none; } @media screen and (max-width: 800px) { .about__textSp { display: block; width: 100%; font-size: 1.875vw; line-height: 2; text-align: center; margin-top: 3.125vw; color: black; font-family: "Termina"; font-weight: 800; } } @media screen and (max-width: 800px) and (max-width: 800px) { .about__textSp { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .about__textSp { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .about__textSp--archive { width: 80%; font-size: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .about__textSp--archive { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .about__textSp--mt { margin-top: 5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .about__textSp--mt { margin-top: 8.5333333333vw; } } .about__button { margin-top: 3.125vw; width: 13.828125vw; font-size: 1.25vw; padding-top: 1.25vw; padding-bottom: 1.25vw; color: black; border: 1px solid #9095a0; border-radius: 999px; text-align: center; font-family: "Termina"; font-weight: 800; position: relative; overflow: hidden; z-index: 0; } @media screen and (max-width: 800px) { .about__button { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .about__button { width: 47.2vw; } } @media screen and (max-width: 800px) { .about__button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .about__button { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } .about__button::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(97deg, #423290 0%, #008fbf 99.49%); transition: opacity 0.25s ease-in-out; z-index: -1; opacity: 0; } .about__button:hover::before { opacity: 1; } .about__button--news { margin-top: 0vw; } @media screen and (max-width: 800px) { .about__button--news { margin-top: 4.2666666667vw; } } .footer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; padding-top: 5.3125vw; background-color: black; color: white; overflow: hidden; } @media screen and (max-width: 800px) { .footer { padding-top: 18.1333333333vw; } } .footer__backToTopWrapper { display: flex; flex-direction: column; align-items: center; } .footer__buttonSp { position: relative; display: flex; align-items: center; justify-content: center; background-color: #ffda03; color: #000000; font-weight: bold; text-decoration: none; border-radius: 9999px; font-size: 1.25vw; transition: background-color 0.3s ease; width: 8.046875vw; height: 3.515625vw; } @media screen and (max-width: 800px) { .footer__buttonSp { font-size: 4.2666666667vw; } } .footer__buttonSp::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 1.5625vw; height: 0.78125vw; background-color: #ffda03; width: 10px; height: 8px; border-radius: 0px 0px 5px 5px; } .footer__buttonSp:hover { background-color: #cfb100; } @media screen and (max-width: 800px) { .footer__buttonSp::after { bottom: -2.1333333333vw; border-left-width: 2.1333333333vw; border-right-width: 2.1333333333vw; border-top-width: 2.1333333333vw; } } .footer__footerboy { width: 11.71875vw; height: 11.953125vw; right: 10.390625vw; margin-top: 0.703125vw; } @media screen and (max-width: 800px) { .footer__footerboy { width: 19.2vw; } } @media screen and (max-width: 800px) { .footer__footerboy { height: 20vw; } } @media screen and (max-width: 800px) { .footer__footerboy { margin-top: 1.6vw; } } .footer__inner { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 80%; max-width: 1200px; } .footer__top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding-bottom: 6.171875vw; } @media screen and (max-width: 800px) { .footer__top { padding-bottom: 21.0666666667vw; } } @media screen and (max-width: 800px) { .footer__top { flex-direction: column; } } .footer__sitemap { display: flex; flex-direction: column; } .footer__sitemap--left { width: 35.546875vw; } @media screen and (max-width: 800px) { .footer__sitemap--left { width: 80vw; } } .footer__sitemap--right { width: 33.59375vw; } @media screen and (max-width: 800px) { .footer__sitemap--right { width: 80vw; } } @media screen and (max-width: 800px) { .footer__sitemap:last-child { margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__sitemap:last-child { margin-top: 10.6666666667vw; } } .footer__sitemapTitle { font-size: 1.875vw; color: #ffda03; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .footer__sitemapTitle { font-size: 6.4vw; } } .footer__link { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 1.25vw 0; margin-top: 1.25vw; padding-top: 1.25vw; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 1.25vw; } @media screen and (max-width: 800px) { .footer__link { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__link { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__link { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__link { display: none; } } .footer__linkSp { display: none; color: white; } @media screen and (max-width: 800px) { .footer__linkSp { display: block; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); grid-gap: 3.125vw 0; margin-top: 1.25vw; padding-top: 1.25vw; border-top: 1px solid rgba(255, 255, 255, 0.2); } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__linkSp { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__linkSp { padding-top: 4.2666666667vw; } } .footer__page { color: white; opacity: 80%; transition: all 0.25s ease-in; font-size: 1.25vw; } @media screen and (max-width: 800px) { .footer__page { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__page--noto { font-size: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__page--noto { font-size: 4.2666666667vw; } } .footer__page--en { font-family: "SweetSansPro"; font-weight: 400; } .footer__page--en:hover { opacity: 40%; } .footer__adress { display: flex; flex-direction: column; gap: 1.25vw; margin-top: 1.25vw; padding-top: 1.25vw; border-top: 1px solid rgba(255, 255, 255, 0.2); } @media screen and (max-width: 800px) { .footer__adress { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__adress { padding-top: 4.2666666667vw; } } .footer__flex { display: flex; justify-content: flex-end; } @media screen and (max-width: 800px) { .footer__flex:last-child { margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__flex:last-child { margin-top: 6.4vw; } } .footer__button { position: relative; margin-bottom: -7%; width: 3.75vw; height: 3.75vw; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .footer__button { width: 12.8vw; } } @media screen and (max-width: 800px) { .footer__button { height: 12.8vw; } } @media screen and (max-width: 800px) { .footer__button { display: none; } } .footer__button:hover { background-color: white; } .footer__button:hover .footer__arrow path { stroke: black; } .footer__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .footer__bottom { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 4.375vw; padding-bottom: 4.375vw; } @media screen and (max-width: 800px) { .footer__bottom { padding-top: 14.9333333333vw; padding-bottom: 14.9333333333vw; } } @media screen and (max-width: 800px) { .footer__bottom { flex-direction: column; align-items: flex-start; padding-top: 1.875vw; padding-bottom: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__bottom { padding-top: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__bottom { padding-bottom: 6.4vw; } } .footer__logo { width: 16.5546875vw; height: 1.875vw; } @media screen and (max-width: 800px) { .footer__logo { width: 56.5066666667vw; } } @media screen and (max-width: 800px) { .footer__logo { height: 6.4vw; } } @media screen and (max-width: 800px) { .footer__logo { padding-bottom: 3.66171875vw; width: 13.19453125vw; height: 1.49453125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__logo { padding-bottom: 12.4986666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__logo { width: 45.0373333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__logo { height: 5.1013333333vw; } } .footer__logoSp { display: none; } @media screen and (max-width: 800px) { .footer__logoSp { display: block; width: 8.984375vw; height: 2.5vw; position: absolute; left: 2.734375vw; bottom: 7.41171875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__logoSp { width: 30.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__logoSp { height: 8.5333333333vw; } } .footer__column { position: absolute; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 1.25vw; } @media screen and (max-width: 800px) { .footer__column { width: 100%; justify-content: center; align-items: flex-end; } } .footer__flexSp { display: flex; align-items: center; } @media screen and (max-width: 800px) { .footer__flexSp { width: 100%; justify-content: space-between; } } .footer__copyright { font-size: 1.25vw; color: white; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; } @media screen and (max-width: 800px) { .footer__copyright { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__copyright { font-size: 0.859375vw; position: static; transform: none; order: 1; margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__copyright { font-size: 2.9333333333vw; } } @media screen and (max-width: 800px) { .footer__backToTopWrapper { position: absolute; bottom: 0; right: 1.5625vw; } .footer__buttonSp { width: 6.640625vw; height: 2.96875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__buttonSp { width: 24vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__buttonSp { height: 10.1333333333vw; } } :root { --gradient: linear-gradient(97deg, #423290 0%, #008fbf 99.49%); --text-color: #423290; --gradient: linear-gradient(97deg, #423290 0%, #008fbf 99.49%); } .fv { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 8.75vw; } @media screen and (max-width: 800px) { .fv { margin-top: 29.8666666667vw; } } .fv__inner { display: flex; flex-direction: column; width: 80%; } .fv__flex { display: flex; justify-content: space-between; align-items: center; width: 100%; } @media screen and (max-width: 800px) { .fv__flex { flex-direction: column; } } .fv__large { position: relative; } .fv__largeImg { width: 45.46875vw; height: 38.4375vw; } @media screen and (max-width: 800px) { .fv__largeImg { width: 80vw; } } @media screen and (max-width: 800px) { .fv__largeImg { height: 67.4666666667vw; } } .fv__titleBox { position: absolute; bottom: 0; left: 0; } .fv__title { font-size: 3.75vw; color: white; line-height: 1.2; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .fv__title { font-size: 6.4vw; } } .fv__small { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 38.4375vw; } @media screen and (max-width: 800px) { .fv__small { height: 101.3333333333vw; } } @media screen and (max-width: 800px) { .fv__small { margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .fv__small { margin-top: 6.4vw; } } .fv__smallImg { width: 30.625vw; height: 17.96875vw; } @media screen and (max-width: 800px) { .fv__smallImg { width: 80vw; } } @media screen and (max-width: 800px) { .fv__smallImg { height: 46.9333333333vw; } } .fv__text { font-size: 1.25vw; color: white; margin-top: 1.25vw; font-family: "SweetSansPro"; font-weight: 400; } @media screen and (max-width: 800px) { .fv__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .fv__text { margin-top: 4.2666666667vw; } } .headerAnother { display: flex; align-items: center; justify-content: space-between; height: 5.078125vw; box-shadow: 6px 6px 12px rgba(252, 202, 1, 0.3); } @media screen and (max-width: 800px) { .headerAnother { height: 17.3333333333vw; } } .headerAnother__imglogo { width: 7.34375vw; margin-left: 2.65625vw; } @media screen and (max-width: 800px) { .headerAnother__imglogo { width: 25.0666666667vw; } } @media screen and (max-width: 800px) { .headerAnother__imglogo { margin-left: 9.0666666667vw; } } .headerAnother__navbox { display: flex; align-items: center; gap: 1.875vw; margin-right: 1.328125vw; } @media screen and (max-width: 800px) { .headerAnother__navbox { margin-right: 4.5333333333vw; } } .headerAnother__nav { display: flex; justify-content: flex-end; gap: 1.875vw; } .headerAnother__navtext { color: black; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .headerAnother__navtext { font-size: 3.2vw; } } .headerAnother__buttons { display: flex; gap: 1.875vw; } .headerAnother__button { display: flex; justify-content: center; align-items: center; border-radius: 1.875vw; width: 9.53125vw; padding-top: 1.09375vw; padding-bottom: 1.09375vw; background-color: #ffda03; filter: drop-shadow(0px 3px 6px rgba(252, 202, 1, 0.16)); } @media screen and (max-width: 800px) { .headerAnother__button { width: 32.5333333333vw; } } @media screen and (max-width: 800px) { .headerAnother__button { padding-top: 3.7333333333vw; padding-bottom: 3.7333333333vw; } } .headerAnother__button--white { background-color: white; color: #ffda03; border: 0.078125vw solid #ffda03; } .headerAnother__buttontext { font-size: 0.9375vw; color: white; } @media screen and (max-width: 800px) { .headerAnother__buttontext { font-size: 3.2vw; } } .headerAnother__buttontext--black { color: black; } .footerContact { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; background-color: #ffda03; overflow: hidden; } .footerContact__inner { position: relative; overflow: visible; padding-top: 6.25vw; padding-bottom: 6.25vw; padding-left: 1.5625vw; padding-right: 1.5625vw; } @media screen and (max-width: 800px) { .footerContact__inner { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } } @media screen and (max-width: 800px) { .footerContact__inner { padding-left: 5.3333333333vw; padding-right: 5.3333333333vw; } } .footerContact__contact { display: flex; justify-content: space-between; align-items: flex-start; } @media screen and (max-width: 800px) { .footerContact__contact { flex-direction: column; align-items: center; text-align: center; } } .footerContact__left { width: 33.4375vw; text-align: left; } @media screen and (max-width: 800px) { .footerContact__left { width: 80vw; } } @media screen and (max-width: 800px) { .footerContact__left { width: 100%; margin-bottom: 0vw; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__left { margin-bottom: 6.4vw; } } .footerContact__title { font-size: 1.875vw; color: #1b1b1b; font-weight: bold; text-align: left; } @media screen and (max-width: 800px) { .footerContact__title { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .footerContact__title { text-align: center; } } .footerContact__text { font-size: 1.25vw; margin-top: 1.25vw; line-height: 1.5; color: black; text-align: left; } @media screen and (max-width: 800px) { .footerContact__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__text { padding-bottom: 0vw; text-align: center; width: 240px; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__text { padding-bottom: 0vw; } } .footerContact__text--en { font-size: 1.875vw; font-family: "Termina"; font-weight: 800; padding-top: 0vw; padding-bottom: 1.328125vw; text-align: left; } @media screen and (max-width: 800px) { .footerContact__text--en { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .footerContact__text--en { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .footerContact__text--en { padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .footerContact__text--en { text-align: center; } } .footerContact__right { display: flex; flex-direction: column; align-items: flex-end; } @media screen and (max-width: 800px) { .footerContact__right { align-items: center; width: 100%; } } .footerContact__num { display: flex; flex-direction: row; align-items: flex-end; white-space: nowrap; margin-bottom: 1.25vw; padding-top: 0vw; } @media screen and (max-width: 800px) { .footerContact__num { margin-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__num { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .footerContact__num { width: 100%; justify-content: center; align-items: center; } } .footerContact__tel { color: black; font-size: 1.875vw; font-weight: bold; margin-right: 0.625vw; font-family: "SweetSansPro"; font-weight: 400; align-self: flex-end; } @media screen and (max-width: 800px) { .footerContact__tel { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__tel { margin-right: 2.1333333333vw; } } .footerContact__number { color: #1b1b1b; font-size: 4.375vw; font-family: "Manrope", system-ui; font-weight: 800; line-height: 1; } @media screen and (max-width: 800px) { .footerContact__number { font-size: 8.5333333333vw; } } .footerContact__number a { font-size: inherit; font-family: inherit; color: inherit; text-decoration: none; font-family: "Manrope", system-ui; font-weight: 800; } .footerContact__button { display: flex; align-items: center; justify-content: center; width: 13.828125vw; height: 4.21875vw; background-color: black; border-radius: 999px; transition: all 0.25s ease-in; position: relative; font-family: "Termina"; font-weight: 800; font-size: 1.25vw; letter-spacing: 2px; text-align: center; } @media screen and (max-width: 800px) { .footerContact__button { width: 47.2vw; } } @media screen and (max-width: 800px) { .footerContact__button { height: 14.4vw; } } @media screen and (max-width: 800px) { .footerContact__button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__button { margin-top: 0vw; width: 10.3125vw; height: 2.8125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__button { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__button { width: 35.2vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__button { height: 9.6vw; } } .footerContact__button:hover { background-color: white; } .footerContact__button:hover .footerContact__buttonText { color: black; } .footerContact__buttonText { font-size: 1.25vw; text-align: center; color: white; transition: all 0.25s ease-in; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .footerContact__buttonText { font-size: 4.2666666667vw; } } .footerContact__image { position: absolute; bottom: 0; left: 89.296875vw; width: 10.703125vw; height: 10.78125vw; z-index: 1; } @media screen and (max-width: 800px) { .footerContact__image { width: 109px; height: 109px; right: 1.25vw; left: auto; } } .service { background-color: #9b9481; padding-bottom: 6.25vw; position: relative; overflow: hidden; display: flex; justify-content: center; border-radius: 0 0 80px 80px; } @media screen and (max-width: 800px) { .service { padding-bottom: 21.3333333333vw; } } @media screen and (max-width: 800px) { .service { display: flex; flex-direction: column; border-radius: 0 0 40px 40px; } } .service__inner { position: relative; width: 90%; margin: auto; } .service__header { text-align: center; margin-bottom: 5vw; position: relative; } @media screen and (max-width: 800px) { .service__header { margin-bottom: 17.0666666667vw; } } .service__intro { display: flex; flex-direction: column; width: 21%; align-items: center; position: absolute; left: 0; top: 98%; transform: translateY(-50%); } @media screen and (max-width: 800px) { .service__intro { display: none; } } .service__image { width: 10.171875vw; height: 14.53125vw; -o-object-fit: contain; object-fit: contain; margin-top: 15px; } .service__eyecatch { font-size: 1.25vw; background-color: #ffda03; display: inline-block; padding: 0.625vw 1.25vw; border-radius: 9999px; position: absolute; top: -2.34375vw; left: 50%; transform: translateX(-50%); width: 280px; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .service__eyecatch { font-size: 4.2666666667vw; } } .service__eyecatch::after { content: ""; position: absolute; bottom: -0.546875vw; left: 50%; transform: translateX(-50%); width: 0.78125vw; height: 1.09375vw; background-color: #ffda03; border-radius: 0px 0px 5px 5px; } @media screen and (max-width: 800px) { .service__eyecatch::after { width: 2.6666666667vw; } } @media screen and (max-width: 800px) { .service__eyecatch::after { height: 3.7333333333vw; } } .service__title { font-size: 5vw; font-weight: bold; color: #ffda03; margin-bottom: 0.625vw; font-family: "Termina"; font-weight: 800; padding-top: 6.25vw; } @media screen and (max-width: 800px) { .service__title { font-size: 10.6666666667vw; } } @media screen and (max-width: 800px) { .service__title { margin-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .service__title { padding-top: 0vw; } } .service__subtitle { font-size: 1.25vw; color: white; font-weight: bold; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .service__subtitle { font-size: 4.2666666667vw; } } .service__content { display: flex; justify-content: space-between; padding-left: 1.5625vw; padding-right: 1.5625vw; } @media screen and (max-width: 800px) { .service__content { padding-left: 5.3333333333vw; padding-right: 5.3333333333vw; } } @media screen and (max-width: 800px) { .service__content { flex-direction: column; display: none; } } .service__card { width: 30%; position: relative; box-sizing: border-box; padding-bottom: 0.625vw; margin-bottom: 2.5vw; } @media screen and (max-width: 800px) { .service__card { padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .service__card { margin-bottom: 8.5333333333vw; } } @media screen and (max-width: 800px) { .service__card { width: 90%; margin-left: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .service__card { margin-left: 6.4vw; } } .service__card::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0.625vw; left: 0.625vw; background: black; border-radius: 15px; z-index: 1; } @media screen and (max-width: 800px) { .service__card::before { top: 2%; left: 5%; width: 88%; height: 99%; } } .service__cardInner { position: relative; display: flex; flex-direction: column; align-items: center; background-color: white; border-radius: 15px; padding-top: 2.5vw; padding-bottom: 2.5vw; padding-left: 1.25vw; padding-right: 1.25vw; height: 90%; z-index: 2; border: 3px solid black; } @media screen and (max-width: 800px) { .service__cardInner { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .service__cardInner { padding-left: 3.2vw; padding-right: 3.2vw; } } @media screen and (max-width: 800px) { .service__cardInner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 82%; } } .service__cardTitle { font-size: 1.875vw; color: #ffda03; text-align: center; font-family: "SweetSansPro"; font-weight: 800; padding-bottom: 3.125vw; } @media screen and (max-width: 800px) { .service__cardTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .service__cardTitle { padding-bottom: 6.4vw; } } .service__cardImageWrapper { display: flex; justify-content: center; align-items: center; width: 19.375vw; height: 15.46875vw; } @media screen and (max-width: 800px) { .service__cardImageWrapper { width: 66.1333333333vw; } } @media screen and (max-width: 800px) { .service__cardImageWrapper { height: 52.8vw; } } .service__cardImage { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .service__cardSubtitle { font-size: 1.5625vw; font-weight: bold; line-height: 1.4; text-align: center; padding-top: 3.75vw; padding-bottom: 1.25vw; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .service__cardSubtitle { font-size: 5.0666666667vw; } } @media screen and (max-width: 800px) { .service__cardSubtitle { padding-top: 12.8vw; } } @media screen and (max-width: 800px) { .service__cardSubtitle { padding-bottom: 4.2666666667vw; } } .service__cardText { font-size: 1.25vw; line-height: 2; letter-spacing: 1.4px; } @media screen and (max-width: 800px) { .service__cardText { font-size: 3.7333333333vw; } } .service__slider-controls { display: none; } @media screen and (max-width: 800px) { .service__slider-controls { display: flex; justify-content: center; align-items: center; margin-top: 0vw; } } @media screen and (max-width: 800px) { .service__slider-button { width: 36px; height: 36px; background-color: #f5f5f5; border: 1px solid #d3d3d3; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; font-size: 18px; color: #666; } .service__slider-button:hover { background-color: #fff; color: #333; } .service__slider-button--prev { margin-right: 0vw; } .service__slider-button--prev::before { content: "←"; } .service__slider-button--next { margin-left: 0vw; } .service__slider-button--next::before { content: "→"; } } @media screen and (max-width: 800px) { .service__slider-indicator { margin: 0 0vw; font-size: 0vw; color: #fff; } } @media screen and (max-width: 800px) { .service { padding-top: 3.125vw; padding-bottom: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .service { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } } @media screen and (max-width: 800px) { .service__header { margin-bottom: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .service__header { margin-bottom: 8.5333333333vw; } } @media screen and (max-width: 800px) { .service__title { font-size: 3.75vw; font-family: "Termina"; font-weight: 800; } } @media screen and (max-width: 800px) and (max-width: 800px) { .service__title { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .service__subtitle { font-size: 1.25vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; letter-spacing: 0.1em; } } @media screen and (max-width: 800px) and (max-width: 800px) { .service__subtitle { font-size: 4.2666666667vw; } } .service__sp-content { display: none; } @media screen and (max-width: 800px) { .service__sp-content { display: block; } } .service__swiper { width: 100%; } .service__navigation { display: flex; justify-content: center; align-items: center; gap: 1.25vw; } .service__nav-button { background: none; border: none; cursor: pointer; } .service__nav-button:focus { outline: none; } .service__nav-button svg { width: 2.8125vw; height: 2.8125vw; } @media screen and (max-width: 800px) { .service__nav-button svg { width: 9.6vw; } } @media screen and (max-width: 800px) { .service__nav-button svg { height: 9.6vw; } } .service__nav-button--prev svg circle { fill: #fff; } .service__nav-button--next svg circle { fill: #ffffff; } .swiper-slide { display: flex; justify-content: center; align-items: center; } .news__contents { margin-bottom: 3.125vw; margin-left: auto; margin-right: auto; display: flex; align-items: center; width: 78.671875vw; } @media screen and (max-width: 800px) { .news__contents { width: 80vw; } } .news__content { display: flex; align-items: center; padding-top: 2.5vw; padding-bottom: 2.5vw; width: 96%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.25s ease-in; position: relative; padding-right: 3.125vw; } @media screen and (max-width: 800px) { .news__content { padding-top: 8.5333333333vw; padding-bottom: 8.5333333333vw; } } .news__content:hover { opacity: 0.7; } .news__content:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .news__content::after { content: ">"; position: absolute; right: 0.78125vw; top: 50%; transform: translateY(-50%); font-size: 1.25vw; color: #000; opacity: 0.6; padding-right: 0.78125vw; } @media screen and (max-width: 800px) { .news__content::after { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news__content::after { padding-right: 2.6666666667vw; } } @media screen and (max-width: 800px) { .news__content { flex-direction: column; align-items: flex-start; padding-top: 0vw; padding-bottom: 0vw; padding-right: 8vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news__content { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news__content::after { top: 50%; right: 0vw; font-size: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news__content::after { font-size: 4.2666666667vw; } } .news__flex { display: flex; align-items: center; } @media screen and (max-width: 800px) { .news__flex { margin-bottom: 0vw; } } .news__term { font-size: 1.25vw; padding-top: 0.3125vw; padding-bottom: 0.3125vw; padding-left: 0.78125vw; padding-right: 0.78125vw; text-align: center; color: #000; border-radius: 99px; background-color: #ffda03; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .news__term { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news__term { padding-top: 0.5333333333vw; padding-bottom: 0.5333333333vw; } } @media screen and (max-width: 800px) { .news__term { padding-left: 2.1333333333vw; padding-right: 2.1333333333vw; } } .news__term--news { background-color: #000; color: #fff; } .news__date { font-size: 1.25vw; color: #000; opacity: 0.6; margin-left: 1.25vw; font-family: "Noto Sans JP", system-ui; font-weight: 500; } @media screen and (max-width: 800px) { .news__date { font-size: 2.1333333333vw; } } @media screen and (max-width: 800px) { .news__date { margin-left: 2.1333333333vw; } } .news__title { font-size: 1.25vw; color: #000; margin-left: 3.125vw; flex-grow: 1; font-family: "Noto Sans JP", system-ui; font-weight: 500; } @media screen and (max-width: 800px) { .news__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news__title { margin-left: 10.6666666667vw; } } @media screen and (max-width: 800px) { .news__title { margin-left: 0vw; margin-top: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news__title { margin-left: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news__title { margin-top: 2.1333333333vw; } } .newsUnder { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 8.75vw; margin-bottom: 6.25vw; overflow: hidden; } @media screen and (max-width: 800px) { .newsUnder { padding-top: 29.8666666667vw; } } @media screen and (max-width: 800px) { .newsUnder { margin-bottom: 0vw; } } @media screen and (max-width: 800px) { .newsUnder { display: flex; flex-direction: column; align-items: center; } } .newsUnder__img { position: absolute; top: 0; right: 10%; margin-top: 6.25vw; width: 11.953125vw; height: 12.890625vw; } @media screen and (max-width: 800px) { .newsUnder__img { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img { width: 26.6666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__img { height: 28.8vw; } } .newsUnder__img--about { width: 14.921875vw; height: 13.046875vw; } @media screen and (max-width: 800px) { .newsUnder__img--about { width: 50.9333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img--about { height: 44.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img--about { display: none; } } .newsUnder__img--chira { top: 120%; left: 0; width: 9.765625vw; height: 16.875vw; } @media screen and (max-width: 800px) { .newsUnder__img--chira { width: 33.3333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img--chira { height: 57.6vw; } } @media screen and (max-width: 800px) { .newsUnder__img--chira { display: none; } } .newsUnder__img--mind { width: 11.640625vw; height: 13.046875vw; } @media screen and (max-width: 800px) { .newsUnder__img--mind { width: 39.7333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img--mind { height: 44.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img--mind { display: none; } } .newsUnder__img--animation { -webkit-animation: flyFromRight 1.5s ease-out forwards, float 3s ease-in-out infinite 1.5s; animation: flyFromRight 1.5s ease-out forwards, float 3s ease-in-out infinite 1.5s; opacity: 0; } @-webkit-keyframes flyFromRight { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes flyFromRight { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .newsUnder__img--company { width: 14.375vw; height: 13.046875vw; } @media screen and (max-width: 800px) { .newsUnder__img--company { width: 49.0666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__img--company { height: 44.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__img--company { display: none; } } .newsUnder__img--message { top: 0; right: 0%; margin-top: 3.59375vw; margin-right: 3.203125vw; width: 13.4375vw; height: 16.875vw; } @media screen and (max-width: 800px) { .newsUnder__img--message { margin-top: 0vw; } } @media screen and (max-width: 800px) { .newsUnder__img--message { margin-right: 0vw; } } @media screen and (max-width: 800px) { .newsUnder__img--message { width: 45.8666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__img--message { height: 57.6vw; } } @media screen and (max-width: 800px) { .newsUnder__img--message { right: 28%; margin-top: 2.5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .newsUnder__img--message { margin-top: 8.5333333333vw; } } .newsUnder__inner { display: flex; flex-direction: column; z-index: 1; width: 78.4375vw; } @media screen and (max-width: 800px) { .newsUnder__inner { width: 80vw; } } .newsUnder__title { font-size: 5vw; color: #ffda03; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .newsUnder__title { font-size: 10.6666666667vw; } } .newsUnder__titleBox { display: flex; flex-direction: column; align-items: flex-start; } .newsUnder__titleLine { width: 13.28125vw; height: 2.34375vw; margin-top: 0; } @media screen and (max-width: 800px) { .newsUnder__titleLine { width: 45.3333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__titleLine { height: 4.2666666667vw; } } .newsUnder__terms { display: flex; align-items: center; justify-content: space-between; margin-top: 5vw; transition: all 0.2s ease-in; } @media screen and (max-width: 800px) { .newsUnder__terms { margin-top: 0vw; } } @media screen and (max-width: 800px) { .newsUnder__terms { flex-direction: column; align-items: flex-start; } } .newsUnder__term { display: flex; justify-content: center; align-items: center; outline: 1px solid black; border-radius: 999px; cursor: pointer; transition: all 0.2s ease-in; } .newsUnder__term.selected { background-color: black; outline: none; } .newsUnder__term.selected a { color: white; transition: all 0.2s ease-in; } .newsUnder__term:hover { opacity: 40%; } .newsUnder__selected__all { background-image: linear-gradient(97deg, #423290 0%, #008fbf 99.49%); } .newsUnder__cat { display: flex; align-items: center; gap: 0.625vw; } @media screen and (max-width: 800px) { .newsUnder__cat { margin-top: 3.125vw; gap: 8px; } } @media screen and (max-width: 800px) and (max-width: 800px) { .newsUnder__cat { margin-top: 10.6666666667vw; } } .newsUnder__termLink { display: flex; justify-content: center; align-items: center; padding-left: 1.25vw; padding-right: 1.25vw; padding-top: 0.625vw; padding-bottom: 0.625vw; color: black; transition: all 0.2s ease-in; font-family: "SweetSansPro"; font-weight: 800; font-size: 1.25vw; } @media screen and (max-width: 800px) { .newsUnder__termLink { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink { font-size: 4.2666666667vw; } } .newsUnder__name { width: 7.578125vw; padding-top: 0.625vw; padding-bottom: 0.625vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; text-align: center; color: #1b1b1b; font-size: 0.78125vw; } @media screen and (max-width: 800px) { .newsUnder__name { width: 25.8666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__name { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__name { font-size: 2.6666666667vw; } } .newsUnder__contents { width: 100%; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .newsUnder__contents { margin-top: 8.5333333333vw; } } .newsUnder__termText { font-size: 1.25vw; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; } @media screen and (max-width: 800px) { .newsUnder__termText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__termText { margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .newsUnder__termText { margin-top: 4.2666666667vw; } } .newsUnder__content { margin-bottom: 1.875vw; padding-bottom: 2.5vw; border-bottom: 0.078125vw solid rgba(255, 255, 255, 0.3); } @media screen and (max-width: 800px) { .newsUnder__content { margin-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .newsUnder__content { padding-bottom: 8.5333333333vw; } } .newsUnder__date { font-size: 1.25vw; margin-bottom: 1.25vw; color: #1b1b1b; opacity: 30%; } @media screen and (max-width: 800px) { .newsUnder__date { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__date { margin-bottom: 4.2666666667vw; } } .newsUnder__text { color: #1b1b1b; font-size: 1.25vw; padding-bottom: 2.5vw; } @media screen and (max-width: 800px) { .newsUnder__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__text { padding-bottom: 8.5333333333vw; } } .newsUnder__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.5625vw; } @media screen and (max-width: 800px) { .newsUnder__arrow { width: 5.3333333333vw; } } .newsUnder__pages { position: relative; gap: 1.25vw; } .newsUnder__pages ul { display: flex; align-items: center; padding: 0; list-style: none; gap: 1.25vw; } .newsUnder__pages ul li { position: relative; } .newsUnder__pages ul li a, .newsUnder__pages ul li span { display: flex; justify-content: center; align-items: center; width: 4.375vw; height: 4.375vw; font-size: 1.25vw; border: 0.078125vw solid rgba(255, 255, 255, 0.2); border-radius: 78.046875vw; color: white; cursor: pointer; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsUnder__pages ul li a, .newsUnder__pages ul li span { width: 14.9333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__pages ul li a, .newsUnder__pages ul li span { height: 14.9333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__pages ul li a, .newsUnder__pages ul li span { font-size: 4.2666666667vw; } } .newsUnder__pages ul li a:hover, .newsUnder__pages ul li span:hover { opacity: 40%; } .newsUnder__pages ul li span.current { background-image: linear-gradient(97deg, #423290 0%, #008fbf 99.49%); color: #ebe6e2; border: none; } .newsUnder__pages ul li:hover .arrow-path { stroke: #ebe6e2; } .newsUnder__pagenation { display: flex; gap: 1.25vw; align-items: center; justify-content: center; } .newsUnder__prev { position: relative; width: 4.140625vw; height: 4.140625vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__prev { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__prev { height: 14.1333333333vw; } } .newsUnder__next { position: relative; width: 4.140625vw; height: 4.140625vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__next { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__next { height: 14.1333333333vw; } } .newsUnder__white { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 78.046875vw; } .newsUnder__pages { position: relative; margin-top: 6.25vw; gap: 1.25vw; } @media screen and (max-width: 800px) { .newsUnder__pages { margin-top: 21.3333333333vw; } } .newsUnder__num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.25vw; color: #ebe6e2; } @media screen and (max-width: 800px) { .newsUnder__num { font-size: 4.2666666667vw; } } .newsUnder__page1 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__page1 { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page1 { height: 14.1333333333vw; } } .newsUnder__page2 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__page2 { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page2 { height: 14.1333333333vw; } } .newsUnder__page3 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__page3 { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page3 { height: 14.1333333333vw; } } .blog { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 8.75vw; overflow: hidden; } @media screen and (max-width: 800px) { .blog { margin-top: 29.8666666667vw; } } .blog__inner { display: flex; flex-direction: column; justify-content: center; width: 80%; } .blog__top { display: flex; justify-content: space-between; width: 90%; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .blog__top { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .blog__top { flex-direction: column; } } .blog__title { font-size: 2.5vw; } @media screen and (max-width: 800px) { .blog__title { font-size: 8.5333333333vw; } } .blog__right { display: flex; flex-direction: column; width: 45.46875vw; } @media screen and (max-width: 800px) { .blog__right { width: 80vw; } } .blog__text { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .blog__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .blog__text { margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .blog__text { margin-top: 4.2666666667vw; } } .blog__button { display: flex; align-items: center; gap: 3.75vw; width: 20.078125vw; height: 4.53125vw; margin-top: 4.375vw; border-radius: 999px; background: var(--gradient); transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .blog__button { width: 68.5333333333vw; } } @media screen and (max-width: 800px) { .blog__button { height: 15.4666666667vw; } } @media screen and (max-width: 800px) { .blog__button { margin-top: 8.5333333333vw; } } .blog__button:hover { opacity: 60%; } .swiper-container-blog { position: relative; padding-bottom: 6.25vw; /* Assuming this is a mixin you want to keep */ } @media screen and (max-width: 800px) { .swiper-container-blog { padding-bottom: 21.3333333333vw; } } .swiper-horizontal > .swiper-scrollbar-blog, .swiper-scrollbar-blog.swiper-scrollbar-horizontal { position: absolute; left: 0; z-index: 3; height: 5px; width: 84%; } .swiper-scrollbar-blog { position: absolute; top: 95%; left: 0; width: 84%; height: 4px; background: #e0e0e0; } .swiper-scrollbar-blog-drag { background: linear-gradient(to right, #ff4500, #ff7f50); height: 100%; } .swiper-scrollbar-blog-drag::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: white; border-radius: 999px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .swiper-button-next-blog, .swiper-button-prev-blog { width: 48px; height: 48px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 91%; z-index: 3; font-size: 20px; color: #000; } .swiper-button-next-blog::after, .swiper-button-prev-blog::after { content: "←"; font-size: 13px; } .swiper-button-next-blog::after { transform: rotate(180deg); } .swiper-button-next-blog { right: 0; } .swiper-button-prev-blog { left: 90%; } .swiper-button-next-blog.swiper-button-disabled, .swiper-button-prev-blog.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } @media (max-width: 768px) { .swiper-horizontal > .swiper-scrollbar-blog, .swiper-scrollbar-blog.swiper-scrollbar-horizontal { position: absolute; left: 0; z-index: 3; height: 5px; width: 65%; } .swiper-scrollbar-blog { top: 94%; } .swiper-button-next-blog, .swiper-button-prev-blog { width: 30px; height: 30px; } .swiper-button-prev-blog { left: 75%; } .swiper-scrollbar-drag::after { width: 15px; height: 15px; } } .banner { overflow: hidden; width: 100%; white-space: nowrap; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .banner { margin-top: 21.3333333333vw; } } .banner__svg { display: inline-block; -webkit-animation: scroll-left 20s linear infinite; animation: scroll-left 20s linear infinite; transform: translateX(0); margin-right: 40px; } @-webkit-keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .contact { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 8.75vw; } @media screen and (max-width: 800px) { .contact { padding-top: 29.8666666667vw; } } .contact__inner { display: flex; flex-direction: column; width: 58%; margin-top: 3.75vw; } @media screen and (max-width: 800px) { .contact__inner { margin-top: 0vw; } } .contact__title { color: #ffda03; font-size: 5vw; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .contact__title { font-size: 12.8vw; } } .contact__subtitle { font-size: 1.25vw; margin-top: 0.625vw; font-family: "Noto Sans JP", system-ui; font-weight: 700; } @media screen and (max-width: 800px) { .contact__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__subtitle { margin-top: 2.1333333333vw; } } .contact__subtitle--under { margin-top: 1.25vw; font-size: 1.25vw; font-family: "Noto Sans JP", system-ui; font-weight: 400; text-align: center; } @media screen and (max-width: 800px) { .contact__subtitle--under { margin-top: 3.7333333333vw; } } @media screen and (max-width: 800px) { .contact__subtitle--under { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .contact__subtitle--under { width: 90%; display: none; } } .contact__subtitleSp { display: none; } @media screen and (max-width: 800px) { .contact__subtitleSp { display: block; margin-top: 0.625vw; width: 90%; margin-top: 1.25vw; font-size: 1.25vw; font-family: "Noto Sans JP", system-ui; font-weight: 400; text-align: center; line-height: 2; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contact__subtitleSp { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contact__subtitleSp { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contact__subtitleSp { font-size: 3.2vw; } } .contact__set { display: flex; align-items: center; } .contact__col { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .contact__col { margin-top: 8.5333333333vw; } } .contact__col textarea { resize: none; } .contact__col--a { align-items: flex-start; margin-bottom: 0vw; } @media screen and (max-width: 800px) { .contact__col--a { margin-bottom: 0vw; } } .contact__col--contents { align-items: flex-start; } .contact__col--center { align-items: center; } @media screen and (max-width: 800px) { .contact__col { flex-direction: column; align-items: flex-start; } } .contact__row { display: flex; } .contact__name { font-size: 1.25vw; color: #353535; opacity: 60%; } @media screen and (max-width: 800px) { .contact__name { font-size: 4.2666666667vw; } } .contact__required { font-size: 1.25vw; margin-bottom: 0.46875vw; margin-top: 0.546875vw; opacity: 60%; color: red; } @media screen and (max-width: 800px) { .contact__required { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__required { margin-bottom: 1.6vw; } } @media screen and (max-width: 800px) { .contact__required { margin-top: 1.8666666667vw; } } .contact__required--privacy { width: 6.25vw; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .contact__required--privacy { width: 21.3333333333vw; } } @media screen and (max-width: 800px) { .contact__required--privacy { margin-top: 6.4vw; } } .contact__content { position: relative; width: 61.40625vw; padding-left: 1.25vw; padding-right: 1.25vw; padding-top: 1.25vw; padding-bottom: 1.25vw; margin-top: 1.25vw; background-color: rgba(0, 0, 0, 0.05); border: none; } @media screen and (max-width: 800px) { .contact__content { width: 71.4666666667vw; } } @media screen and (max-width: 800px) { .contact__content { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__content { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__content { margin-top: 4.2666666667vw; } } .contact__content--a { height: 16.953125vw; margin-bottom: 6.25vw; } @media screen and (max-width: 800px) { .contact__content--a { height: 57.8666666667vw; } } @media screen and (max-width: 800px) { .contact__content--a { margin-bottom: 21.3333333333vw; } } .contact__text { position: absolute; top: 39%; left: 1%; font-size: 0.625vw; opacity: 50%; } @media screen and (max-width: 800px) { .contact__text { font-size: 2.1333333333vw; } } .contact__text--a { top: 3%; } .contact__innerText { margin-left: 1.25vw; } @media screen and (max-width: 800px) { .contact__innerText { margin-left: 4.2666666667vw; } } .contact__viewbutton { align-items: center; text-align: center; margin-top: 4.375vw; margin-bottom: 8.75vw; } @media screen and (max-width: 800px) { .contact__viewbutton { margin-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .contact__viewbutton { margin-bottom: 21.3333333333vw; } } .contact .contact__viewbutton input { border-radius: 999px; border: 1px solid var(--brown, #322a28); } .contact__viewmore { display: inline-block; width: 13.828125vw; padding-top: 1.25vw; padding-bottom: 1.25vw; color: #ebe6e2; background-color: #1b1b1b; border-radius: 5px; text-align: center; border: none !important; font-size: 1.25vw; transition: color 0.25s ease-in, background-color 0.25s ease-in, background-image 0.25s ease-in; cursor: pointer; border: 1px solid #1b1b1b !important; } @media screen and (max-width: 800px) { .contact__viewmore { width: 47.2vw; } } @media screen and (max-width: 800px) { .contact__viewmore { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__viewmore { font-size: 4.2666666667vw; } } .contact__viewmore:hover { opacity: 0.8; } .contact__time { display: flex; align-items: flex-end; } @media screen and (max-width: 800px) { .contact__time { flex-direction: column; align-items: flex-start; } } .contact__hour { font-size: 1.25vw; margin-right: 2.5vw; } @media screen and (max-width: 800px) { .contact__hour { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__hour { margin-right: 8.5333333333vw; } } .contact .contact__checkBox { width: 1.875vw; height: 1.875vw; margin-bottom: 0.46875vw; border: 1px solid rgba(53, 53, 53, 0.6); border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.25s ease-in; position: relative; } @media screen and (max-width: 800px) { .contact .contact__checkBox { width: 6.4vw; } } @media screen and (max-width: 800px) { .contact .contact__checkBox { height: 6.4vw; } } @media screen and (max-width: 800px) { .contact .contact__checkBox { margin-bottom: 1.6vw; } } .contact .contact__checkBox:after { content: ""; position: absolute; left: 8px; top: 2px; width: 6px; height: 12px; border: solid #322a28; border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease-in; } .contact .contact__checkBox:checked:after { opacity: 1; } .contact .contact__checkBox:focus { outline: none; border-color: #322a28; } .wpcf7-form-control-wrap { margin-right: 0.625vw; } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap { margin-right: 2.1333333333vw; } } .wpcf7 { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .wpcf7 { margin-top: 6.4vw; } } .wpcf7-spinner { display: none !important; visibility: hidden !important; } /* 成功時のメッセージの色 */ .wpcf7 form.sent .wpcf7-response-output { border: none !important; text-align: center; color: green !important; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .wpcf7 form.sent .wpcf7-response-output { font-size: 3.2vw; } } /* 失敗時のメッセージの色 */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border: none !important; text-align: center; color: red !important; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { font-size: 3.2vw; } } .wpcf7-list-item-label { font-size: 1.25vw; } @media screen and (max-width: 800px) { .wpcf7-list-item-label { font-size: 4.2666666667vw; } } .wpcf7-list-item-label span { font-size: 1.25vw; color: red; } @media screen and (max-width: 800px) { .wpcf7-list-item-label span { font-size: 4.2666666667vw; } } .wpcf7-select { font-size: 1.25vw; padding: 1.25vw; background-color: rgba(0, 0, 0, 0.05); } @media screen and (max-width: 800px) { .wpcf7-select { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .wpcf7-select { padding: 4.2666666667vw; } } .contact__col span { font-size: 1.25vw; } @media screen and (max-width: 800px) { .contact__col span { font-size: 3.7333333333vw; } } .wpcf7-form-control option { color: #353535; } .wpcf7-acceptance { background: none !important; } .wpcf7-checkbox { background: none !important; } .wpcf7-form-control-wrap[data-name=desired-type] { margin-top: 1.875vw; } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=desired-type] { margin-top: 4.2666666667vw; } } .wpcf7-form-control-wrap[data-name=desired-type] span { margin-top: 0vw; } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=desired-type] span { margin-top: 0vw; } } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=desired-type] span { display: flex; align-items: center; } } .wpcf7-list-item { margin: 0 !important; margin-right: 1.25vw; } @media screen and (max-width: 800px) { .wpcf7-list-item { margin-right: 4.2666666667vw; } } .wpcf7-list-item label { display: flex; align-items: center; justify-content: center; gap: 0.625vw; } .wpcf7-list-item-label { margin-right: 1.25vw; opacity: 60%; } @media screen and (max-width: 800px) { .wpcf7-list-item-label { margin-right: 0vw; } } .contact__checkboxTop .wpcf7-list-item-label { width: 3.90625vw; } @media screen and (max-width: 800px) { .contact__checkboxTop .wpcf7-list-item-label { width: 13.3333333333vw; } } .contact__checkboxTop { margin-top: 1.875vw; } @media screen and (max-width: 800px) { .contact__checkboxTop { margin-top: 6.4vw; } } .contact__checkboxTop input { display: none; } .contact__checkboxTop input + span { padding-left: 28px; display: inline-block; position: relative; } .contact__checkboxTop input + span::after, .contact__checkboxTop input + span::before { content: ""; display: block; position: absolute; top: 0; } .contact__checkboxTop input + span::before { border: 1px solid #322a28; background-color: #ebe6e2; height: 20px; width: 20px; border-radius: 5px; left: 0; top: 50%; transform: translateY(-50%); } .contact__checkboxTop input + span::after { content: ""; display: none; position: absolute; top: 42%; left: 11px; width: 5px; height: 10px; border: solid #322a28; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); } .contact__checkboxTop input:checked + span::after { display: block; } /* 選択前のスタイル */ .placeholder-select { opacity: 1 !important; color: rgba(53, 53, 53, 0.6) !important; font-size: 16px; background-color: rgba(50, 42, 40, 0.05) !important; } /* 選択後のスタイル */ .placeholder-select option:checked { color: #353535 !important; font-size: 16px; background-color: rgba(50, 42, 40, 0.05) !important; } .newsSingle { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 9.375vw; background-color: #ffda03; } @media screen and (max-width: 800px) { .newsSingle { padding-top: 32vw; } } .newsSingle__top { display: flex; align-items: flex-start; flex-direction: column; width: 80%; padding-bottom: 6.25vw; } @media screen and (max-width: 800px) { .newsSingle__top { padding-bottom: 21.3333333333vw; } } .newsSingle__header { display: flex; align-items: center; } .newsSingle__term { font-size: 1.25vw; width: 10vw; padding-top: 0.46875vw; padding-bottom: 0.46875vw; text-align: center; color: white; border-radius: 99px; background-color: black; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .newsSingle__term { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsSingle__term { width: 34.1333333333vw; } } @media screen and (max-width: 800px) { .newsSingle__term { padding-top: 1.6vw; padding-bottom: 1.6vw; } } .newsSingle__date { font-size: 1.25vw; color: black; margin-left: 1.25vw; font-family: "Noto Sans JP", system-ui; font-weight: 500; } @media screen and (max-width: 800px) { .newsSingle__date { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsSingle__date { margin-left: 4.2666666667vw; } } .newsSingle__title { color: black; font-size: 2.5vw; margin-top: 0.625vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .newsSingle__title { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .newsSingle__title { margin-top: 2.1333333333vw; } } .newsSingle__under { background-color: #fff; padding-top: 6.25vw; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } @media screen and (max-width: 800px) { .newsSingle__under { padding-top: 21.3333333333vw; } } .newsSingle__content { font-size: 1.25vw; color: black; width: 80%; } @media screen and (max-width: 800px) { .newsSingle__content { font-size: 4.2666666667vw; } } .newsSingle__content p { font-size: 1.25vw; color: black; width: 100%; } @media screen and (max-width: 800px) { .newsSingle__content p { font-size: 4.2666666667vw; } } .newsSingle__collection { margin-top: 4.375vw; width: 13.828125vw; border: 1px solid black; border-radius: 999px; display: flex; justify-content: center; margin-bottom: 8.75vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsSingle__collection { margin-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .newsSingle__collection { width: 47.2vw; } } @media screen and (max-width: 800px) { .newsSingle__collection { margin-bottom: 29.8666666667vw; } } .newsSingle__collection:hover { background-color: #ffda03; border: 1px solid #ffda03; } .newsSingle__text { font-size: 1.25vw; color: black; padding-top: 1.25vw; padding-bottom: 1.25vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsSingle__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsSingle__text { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } .company { display: flex; flex-direction: column; align-items: center; padding-top: 8.75vw; } @media screen and (max-width: 800px) { .company { padding-top: 29.8666666667vw; } } .company__title { color: #ffda03; font-size: 5vw; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .company__title { font-size: 12.8vw; } } .company__title--service { text-align: center; } .company__subtitle { font-size: 1.25vw; margin-top: 0.625vw; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .company__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .company__subtitle { margin-top: 2.1333333333vw; } } .company__subtitle--service { text-align: center; } .company__inner { display: flex; flex-direction: column; width: 61%; margin-top: 5vw; margin-bottom: 6.25vw; } @media screen and (max-width: 800px) { .company__inner { margin-top: 17.0666666667vw; } } @media screen and (max-width: 800px) { .company__inner { margin-bottom: 21.3333333333vw; } } @media screen and (max-width: 800px) { .company__inner { width: 80%; } } .company__borderLine { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); } .company__row { display: flex; align-items: center; margin-top: 2.5vw; margin-bottom: 2.5vw; } @media screen and (max-width: 800px) { .company__row { margin-top: 8.5333333333vw; margin-bottom: 8.5333333333vw; } } @media screen and (max-width: 800px) { .company__row { flex-direction: column; align-items: flex-start; } } .company__dataTitle { font-size: 1.25vw; width: 18.125vw; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .company__dataTitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .company__dataTitle { width: 61.8666666667vw; } } .company__data { font-size: 1.25vw; color: black; } @media screen and (max-width: 800px) { .company__data { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .company__data { margin-top: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .company__data { margin-top: 2.1333333333vw; } } .company__map { display: flex; align-items: center; margin-top: 0.625vw; gap: 0.625vw; } @media screen and (max-width: 800px) { .company__map { margin-top: 2.1333333333vw; } } .company__map:hover .company__mapText { opacity: 60%; } .company__mapText { font-size: 1.25vw; color: #336699; transition: all 0.25s ease-in; text-decoration: underline; } @media screen and (max-width: 800px) { .company__mapText { font-size: 4.2666666667vw; } } .hamburger { display: none; position: relative; } .hamburger.active span:nth-of-type(1) { transform: translateY(2.1vw) rotate(45deg); } .hamburger.active span:nth-of-type(2) { opacity: 0; } .hamburger.active span:nth-of-type(3) { transform: translateY(-2.1vw) rotate(-45deg); } @media screen and (max-width: 800px) { .hamburger { display: block; z-index: 109000; cursor: pointer; width: 1.875vw; height: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { width: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { height: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hamburger span { transition: all 0.5s; position: absolute; left: 0; width: 100%; height: 2px; background-color: #1b1b1b; border-radius: 4px; } .hamburger span:nth-child(1) { top: 0%; } .hamburger span:nth-of-type(2) { top: 50%; } .hamburger span:nth-of-type(3) { top: 100%; } } .hamburger--black span { background-color: #1b1b1b; } .drawerNav { width: 100%; padding-top: 9.375vw; padding-left: 2.5vw; padding-right: 2.5vw; box-sizing: border-box; z-index: 4; } @media screen and (max-width: 800px) { .drawerNav { padding-top: 32vw; } } @media screen and (max-width: 800px) { .drawerNav { padding-left: 8.5333333333vw; padding-right: 8.5333333333vw; } } .drawerNav__menu > * + * { margin-top: 1.25vw; } @media screen and (max-width: 800px) { .drawerNav__menu > * + * { margin-top: 4.2666666667vw; } } .drawerNav__link { font-size: 1.875vw; font-family: "SweetSansPro"; font-weight: 500; } @media screen and (max-width: 800px) { .drawerNav__link { font-size: 6.4vw; } } .drawerNav__button { display: inline-flex !important; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .drawerNav__button { margin-top: 6.4vw; } } .drawer--left .drawer-nav { left: -100vw; background-color: white; } .splash { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; background-color: white; z-index: 999; position: fixed; top: 0; left: 0; width: 100%; opacity: 1; transition: opacity 1s ease; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } #splash-svg { opacity: 0; -webkit-animation: fadeIn 3s forwards; animation: fadeIn 3s forwards; } #splash.fade-out { -webkit-animation: fadeOut 1s forwards; animation: fadeOut 1s forwards; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProHairline.otf") format("opentype"); font-weight: 100; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProExThin.otf") format("opentype"); font-weight: 200; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProThin.otf") format("opentype"); font-weight: 300; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProLight.otf") format("opentype"); font-weight: 300; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProRegular.otf") format("opentype"); font-weight: 400; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProMedium.otf") format("opentype"); font-weight: 500; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProBold.otf") format("opentype"); font-weight: 700; font-style: normal; } @font-face { font-family: "SweetSansPro"; src: url("../fonts/SweetSansPro/SweetSansProHeavy.otf") format("opentype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-Thin.ttf") format("truetype"); font-weight: 100; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-ExtraLight.ttf") format("truetype"); font-weight: 200; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-Light.ttf") format("truetype"); font-weight: 300; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-Regular.ttf") format("truetype"); font-weight: 400; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-Medium.ttf") format("truetype"); font-weight: 500; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-SemiBold.ttf") format("truetype"); font-weight: 600; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-Bold.ttf") format("truetype"); font-weight: 700; font-family: "Noto Sans JP", system-ui; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-ExtraBold.ttf") format("truetype"); font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Sans JP", system-ui; src: url("../fonts/NotoSansJP/NotoSansJP-Black.ttf") format("truetype"); font-weight: 900; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-ExtraLight.ttf") format("truetype"); font-weight: 200; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-Light.ttf") format("truetype"); font-weight: 300; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-Regular.ttf") format("truetype"); font-weight: 400; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-Medium.ttf") format("truetype"); font-weight: 500; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-SemiBold.ttf") format("truetype"); font-weight: 600; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-Bold.ttf") format("truetype"); font-weight: 700; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-ExtraBold.ttf") format("truetype"); font-weight: 800; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Noto Serif JP", serif; src: url("../fonts/NotoSerifJP/NotoSerifJP-Black.ttf") format("truetype"); font-weight: 900; font-optical-sizing: auto; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-ExtraLight.otf") format("opentype"); font-weight: 200; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Light.otf") format("opentype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Demi.otf") format("opentype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Heavy.otf") format("opentype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Termina"; src: url("../fonts/Termina/Termina-Black.otf") format("opentype"); font-weight: 900; font-style: normal; } @font-face { src: url("../fonts/Manrope/Manrope-ExtraLight.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 200; } @font-face { src: url("../fonts/Manrope/Manrope-Light.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 300; } @font-face { src: url("../fonts/Manrope/Manrope-Regular.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 400; } @font-face { src: url("../fonts/Manrope/Manrope-Medium.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 500; } @font-face { src: url("../fonts/Manrope/Manrope-SemiBold.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 600; } @font-face { src: url("../fonts/Manrope/Manrope-Bold.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 700; } @font-face { src: url("../fonts/Manrope/Manrope-ExtraBold.ttf") format("truetype"); font-family: "Manrope", system-ui; font-optical-sizing: auto; font-weight: 800; } @font-face { font-family: "DelaGothicOne"; src: url("../fonts/DelaGothicOne-Regular.ttf") format("opentype"); font-weight: 400; font-style: normal; } .list { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .list { margin-top: 21.3333333333vw; } } .list__inner { display: flex; justify-content: space-between; width: 80%; } @media screen and (max-width: 800px) { .list__inner { flex-direction: column; } } .list__title { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 4.375vw; width: 12.1875vw; font-size: 1.875vw; color: white; margin-bottom: 0vw; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .list__title { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .list__title { width: 80vw; } } @media screen and (max-width: 800px) { .list__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .list__title { margin-bottom: 6.4vw; } } .list__column { display: flex; flex-direction: column; } .list__content { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 3.75vw; padding-bottom: 3.75vw; width: 59.21875vw; } @media screen and (max-width: 800px) { .list__content { padding-top: 12.8vw; padding-bottom: 12.8vw; } } @media screen and (max-width: 800px) { .list__content { width: 80vw; } } @media screen and (max-width: 800px) { .list__content { flex-direction: column; } } .list__imgWrapper { width: 15.625vw; position: relative; border-radius: 15px; } @media screen and (max-width: 800px) { .list__imgWrapper { width: 80vw; } } .list__imgWrapper::before { display: block; content: ""; padding-top: 100%; } .list__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .list__img { border-radius: 15px; } .list__box { display: flex; flex-direction: column; width: 39.21875vw; margin-top: 0vw; } @media screen and (max-width: 800px) { .list__box { width: 80vw; } } @media screen and (max-width: 800px) { .list__box { margin-top: 6.4vw; } } .list__index { font-size: 1.875vw; color: white; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .list__index { font-size: 6.4vw; } } .list__text { font-size: 0.9375vw; line-height: 2; color: white; margin-top: 1.25vw; letter-spacing: 1.2px; } @media screen and (max-width: 800px) { .list__text { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .list__text { margin-top: 4.2666666667vw; } } .knowledge-top { display: flex; flex-direction: column; align-items: center; margin-top: 8.75vw; } @media screen and (max-width: 800px) { .knowledge-top { margin-top: 29.8666666667vw; } } .knowledge-top__inner { width: 80%; display: flex; flex-direction: column; align-items: center; } .knowledge-top__text { font-size: 1.25vw; color: white; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .knowledge-top__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .knowledge-top__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .knowledge-top__text { text-align: center; width: 14.84375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .knowledge-top__text { width: 50.6666666667vw; } } @media screen and (max-width: 800px) { .knowledge-top__text--news { width: 23.4375vw; text-align: start; } } @media screen and (max-width: 800px) and (max-width: 800px) { .knowledge-top__text--news { width: 80vw; } } .knowledge__contents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.125vw; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .knowledge__contents { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .knowledge__contents { grid-template-columns: 1fr; gap: 40px; } } .knowledge__content { display: flex; flex-direction: column; width: 24.140625vw; } @media screen and (max-width: 800px) { .knowledge__content { width: 80vw; } } .knowledge__content:hover .knowledge__img { transform: scale(1.1); } .knowledge__imgWrapper { position: relative; overflow: hidden; position: relative; width: 24.140625vw; border-radius: 15px; } .knowledge__imgWrapper::before { display: block; content: ""; padding-top: 64.7249190939%; } .knowledge__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 800px) { .knowledge__imgWrapper { width: 80vw; } } .knowledge__img { width: 24.140625vw; height: 15.625vw; border-radius: 15px; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .knowledge__img { width: 80vw; } } @media screen and (max-width: 800px) { .knowledge__img { height: 51.7333333333vw; } } .knowledge__flex { display: flex; justify-content: space-between; align-items: center; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .knowledge__flex { margin-top: 2.1333333333vw; } } .knowledge__date { font-size: 1.25vw; color: white; opacity: 60%; font-family: "SweetSansPro"; font-weight: 400; } @media screen and (max-width: 800px) { .knowledge__date { font-size: 4.2666666667vw; } } .knowledge__title { font-size: 1.25vw; color: white; margin-top: 0.625vw; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } @media screen and (max-width: 800px) { .knowledge__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .knowledge__title { margin-top: 2.1333333333vw; } } .archive-service { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 8.75vw; } @media screen and (max-width: 800px) { .archive-service { padding-top: 29.8666666667vw; } } .archive-service__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 7.5vw; width: 80%; } @media screen and (max-width: 800px) { .archive-service__inner { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .archive-service__inner { width: 85%; } } .archive-service__column { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; gap: 3.75vw; margin-bottom: 6.25vw; } @media screen and (max-width: 800px) { .archive-service__column { margin-bottom: 21.3333333333vw; } } .archive-service__content { position: relative; display: flex; justify-content: center; align-items: center; padding-top: 3.125vw; padding-bottom: 3.125vw; border: 3px solid black; background-color: white; border-radius: 15px; width: 100%; } @media screen and (max-width: 800px) { .archive-service__content { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } } @media screen and (max-width: 800px) { .archive-service__content { margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .archive-service__content { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .archive-service__content:first-child { margin-top: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .archive-service__content:first-child { margin-top: 0vw; } } .archive-service__background { position: absolute; width: 100%; height: 105%; background-color: black; top: 2%; left: 2%; border-radius: 15px; z-index: -1; } @media screen and (max-width: 800px) { .archive-service__background { height: 101%; left: 4%; } } .archive-service__flex { display: flex; align-items: center; justify-content: space-between; width: 85%; z-index: 2; } @media screen and (max-width: 800px) { .archive-service__flex { flex-direction: column; } } .archive-service__textBox { display: flex; flex-direction: column; width: 35.15625vw; } @media screen and (max-width: 800px) { .archive-service__textBox { width: 76vw; } } .archive-service__title { color: #000; font-family: "SweetSansPro"; font-size: 2.5vw; font-weight: 700; line-height: 150%; } @media screen and (max-width: 800px) { .archive-service__title { font-size: 6.4vw; } } .archive-service__text { font-size: 1.25vw; line-height: 2; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .archive-service__text { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .archive-service__text { margin-top: 4.2666666667vw; } } .archive-service__img { width: 22.421875vw; height: 17.8125vw; } @media screen and (max-width: 800px) { .archive-service__img { width: 76.5333333333vw; } } @media screen and (max-width: 800px) { .archive-service__img { height: 60.8vw; } } .archive-service__img--2 { width: 20.3125vw; height: 17.8125vw; } @media screen and (max-width: 800px) { .archive-service__img--2 { width: 69.3333333333vw; } } @media screen and (max-width: 800px) { .archive-service__img--2 { height: 60.8vw; } } .archive-service__img--3 { width: 18.59375vw; height: 17.8125vw; } @media screen and (max-width: 800px) { .archive-service__img--3 { width: 63.4666666667vw; } } @media screen and (max-width: 800px) { .archive-service__img--3 { height: 60.8vw; } } @media screen and (max-width: 800px) { .archive-service__img { margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .archive-service__img { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .archive-service__img--2 { margin-top: 0vw; margin-bottom: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .archive-service__img--2 { margin-top: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .archive-service__img--2 { margin-bottom: 6.4vw; } } .hero { position: relative; background-color: #ffda03; overflow: hidden; padding-top: 4.6875vw; display: flex; flex-direction: column; align-items: center; } @media screen and (max-width: 800px) { .hero { padding-top: 16vw; } } @media screen and (max-width: 800px) { .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; } } .hero__sns-strategy { position: relative; width: 95%; height: 50.625vw; overflow: hidden; z-index: 2; } @media screen and (max-width: 800px) { .hero__sns-strategy { height: 152.5333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-strategy { position: relative; top: 0; left: 0; transform: none; width: 100%; } } .hero__sns-background { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 800px) { .hero__sns-background { display: none; } } .hero__sns-backgroundSp { display: none; } @media screen and (max-width: 800px) { .hero__sns-backgroundSp { display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } } .hero__sns-title { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-top: 1.25vw; width: 56.640625vw; height: 15.3125vw; z-index: 3; } @media screen and (max-width: 800px) { .hero__sns-title { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hero__sns-title { width: 89.8666666667vw; } } @media screen and (max-width: 800px) { .hero__sns-title { height: 23.7333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-title { top: 0; white-space: nowrap; margin-top: 5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-title { margin-top: 17.0666666667vw; } } .hero__sns-character { position: absolute; top: 13%; left: 36%; width: 27.65625vw; height: 39.375vw; z-index: 5; margin-bottom: 20px; } @media screen and (max-width: 800px) { .hero__sns-character { width: 68.2666666667vw; } } @media screen and (max-width: 800px) { .hero__sns-character { height: 85.3333333333vw; } } .hero__sns-character img { width: 100%; height: auto; } @media screen and (max-width: 800px) { .hero__sns-character { top: 26.5%; left: 15%; z-index: 3; } } .hero__sns-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; } .hero__sns-icons .hero__sns-icon { -webkit-animation: moveToPosition 1s ease-out forwards, floatAnimation 3s ease-in-out infinite; animation: moveToPosition 1s ease-out forwards, floatAnimation 3s ease-in-out infinite; opacity: 0; transform-origin: bottom center; } .hero__sns-icons .hero__sns-icon:nth-child(1) { -webkit-animation-delay: 0.1s, 1.1s; animation-delay: 0.1s, 1.1s; } .hero__sns-icons .hero__sns-icon:nth-child(2) { -webkit-animation-delay: 0.2s, 1.2s; animation-delay: 0.2s, 1.2s; } .hero__sns-icons .hero__sns-icon:nth-child(3) { -webkit-animation-delay: 0.3s, 1.3s; animation-delay: 0.3s, 1.3s; } .hero__sns-icons .hero__sns-icon:nth-child(4) { -webkit-animation-delay: 0.4s, 1.4s; animation-delay: 0.4s, 1.4s; } .hero__sns-icons .hero__sns-icon:nth-child(5) { -webkit-animation-delay: 0.5s, 1.5s; animation-delay: 0.5s, 1.5s; } .hero__sns-icons .hero__sns-icon:nth-child(6) { -webkit-animation-delay: 0.6s, 1.6s; animation-delay: 0.6s, 1.6s; } .hero__sns-icon { position: absolute; width: 8%; height: auto; } @media screen and (max-width: 800px) { .hero__sns-icon { position: absolute; } } .hero__sns-icon--tiktok { top: 2%; left: 11%; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .hero__sns-icon--tiktok { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-icon--tiktok { top: 0; left: 0; margin-top: 1.875vw; margin-left: 1.875vw; width: 7.1875vw; height: 5.78125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--tiktok { margin-top: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--tiktok { margin-left: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--tiktok { width: 24.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--tiktok { height: 19.7333333333vw; } } .hero__sns-icon--red { top: 29%; left: 4%; } @media screen and (max-width: 800px) { .hero__sns-icon--red { top: 27%; left: 0; margin-left: 1.25vw; width: 5.3125vw; height: 5.703125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--red { margin-left: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--red { width: 18.1333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--red { height: 19.4666666667vw; } } .hero__sns-icon--google { top: 2%; right: 14%; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .hero__sns-icon--google { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hero__sns-icon--google { top: 0; right: 0; margin-top: 1.875vw; margin-right: 3.125vw; width: 6.171875vw; height: 5.78125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--google { margin-top: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--google { margin-right: 10.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--google { width: 21.0666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--google { height: 19.7333333333vw; } } .hero__sns-icon--youtube { top: 24%; right: 2%; } @media screen and (max-width: 800px) { .hero__sns-icon--youtube { top: 30%; right: 0; margin-right: 0.625vw; width: 5.390625vw; height: 5.78125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--youtube { margin-right: 2.1333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--youtube { width: 18.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--youtube { height: 19.7333333333vw; } } .hero__sns-icon--youtube2 { top: 57%; left: 2%; } @media screen and (max-width: 800px) { .hero__sns-icon--youtube2 { top: 49%; left: 0; width: 5.859375vw; height: 4.0625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--youtube2 { width: 20vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--youtube2 { height: 13.8666666667vw; } } .hero__sns-icon--facebook { top: 59%; right: 2%; } @media screen and (max-width: 800px) { .hero__sns-icon--facebook { top: 56%; right: 0; width: 6.171875vw; height: 4.0625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--facebook { width: 21.0666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__sns-icon--facebook { height: 13.8666666667vw; } } .hero__sns-device--smartphone { position: absolute; top: 84%; left: 50%; transform: translateX(-50%); z-index: 3; width: 14.921875vw; height: 6.953125vw; } @media screen and (max-width: 800px) { .hero__sns-device--smartphone { width: 40.2666666667vw; } } @media screen and (max-width: 800px) { .hero__sns-device--smartphone { height: 21.6vw; } } @media screen and (max-width: 800px) { .hero__sns-device--smartphone { top: 85%; left: 50%; } } .hero__sns-device--hero_1 { position: absolute; top: 52%; left: 10%; width: 14.21875vw; height: 20.3125vw; z-index: 3; transform: rotate(-21deg); } @media screen and (max-width: 800px) { .hero__sns-device--hero_1 { width: 34.4vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_1 { height: 49.3333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_1 { z-index: 4; top: 64%; left: -14%; transform: rotate(-21deg); } } .hero__sns-device--hero_2 { position: absolute; top: 55%; left: 22%; width: 20.078125vw; height: 18.4375vw; z-index: 4; } @media screen and (max-width: 800px) { .hero__sns-device--hero_2 { width: 33.3333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_2 { height: 30.9333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_2 { top: 63%; left: 2%; } } .hero__sns-device--hero_3 { position: absolute; top: 59%; right: 23%; width: 17.5vw; height: 17.1875vw; z-index: 3; } @media screen and (max-width: 800px) { .hero__sns-device--hero_3 { width: 26.1333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_3 { height: 25.8666666667vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_3 { top: 68%; right: 8%; } } .hero__sns-device--hero_4 { position: absolute; top: 52%; right: 12%; width: 13.4375vw; height: 19.53125vw; z-index: 3; transform: rotate(-159deg); } @media screen and (max-width: 800px) { .hero__sns-device--hero_4 { width: 34.4vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_4 { height: 49.3333333333vw; } } @media screen and (max-width: 800px) { .hero__sns-device--hero_4 { top: 63%; right: -11%; } } .hero__inner { position: relative; z-index: 10; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .hero__content { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } @media screen and (max-width: 800px) { .hero__content { align-items: flex-start; } } .hero__title { width: 50.9375vw; height: 17.1875vw; padding-top: 5vw; padding-bottom: 4.375vw; } @media screen and (max-width: 800px) { .hero__title { width: 173.8666666667vw; } } @media screen and (max-width: 800px) { .hero__title { height: 58.6666666667vw; } } @media screen and (max-width: 800px) { .hero__title { padding-top: 17.0666666667vw; } } @media screen and (max-width: 800px) { .hero__title { padding-bottom: 14.9333333333vw; } } @media screen and (max-width: 800px) { .hero__title { display: none; } } .hero__titleSp { display: none; } @media screen and (max-width: 800px) { .hero__titleSp { display: block; width: 26.953125vw; height: 9.21875vw; padding-top: 21.875vw; padding-bottom: 1.875vw; padding-left: 0.78125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__titleSp { width: 92vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__titleSp { height: 31.4666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__titleSp { padding-top: 74.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__titleSp { padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__titleSp { padding-left: 2.6666666667vw; } } .hero__text { width: 50%; padding-bottom: 4.375vw; font-size: 1.25vw; line-height: 2; text-align: center; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .hero__text { padding-bottom: 14.9333333333vw; } } @media screen and (max-width: 800px) { .hero__text { font-size: 4.2666666667vw; } } .hero__text span { display: none; } @media screen and (max-width: 800px) { .hero__text span { display: block; } } @media screen and (max-width: 800px) { .hero__text { text-align: left; padding-bottom: 4.375vw; width: 300px; margin: 0 auto; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__text { padding-bottom: 7.4666666667vw; } } @media screen and (max-width: 800px) { .hero__text br { display: none; } } .hero__button-wrapper { z-index: 10; margin-top: 3.125vw; width: 100%; display: flex; justify-content: center; } @media screen and (max-width: 800px) { .hero__button-wrapper { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .hero__button-wrapper { width: 100%; margin-top: 0vw; justify-content: flex-start; } } .hero__button { display: inline-flex; justify-content: space-between; align-items: center; width: 277px; height: 54px; padding: 0 12px 0 24px; background-color: #000; color: #fff; border-radius: 9999px; text-decoration: none; font-size: 1.25vw; letter-spacing: 2px; transition: background-color 0.3s ease; box-sizing: border-box; } @media screen and (max-width: 800px) { .hero__button { font-size: 4.2666666667vw; } } .hero__button:hover { background-color: #333; } .hero__button-text { flex-grow: 1; text-align: center; font-size: 1.25vw; font-weight: bold; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .hero__button-text { font-size: 4.2666666667vw; } } .hero__button-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-width: 38px; background-color: #ffda03; border-radius: 50%; margin-left: 1.25vw; } @media screen and (max-width: 800px) { .hero__button-icon { margin-left: 4.2666666667vw; } } .hero__button-icon::after { content: "→"; color: #000; font-size: 1.25vw; } @media screen and (max-width: 800px) { .hero__button-icon::after { font-size: 4.2666666667vw; } } .hero__character { position: absolute; } .hero__character--1 { left: 2%; top: 0px; padding-top: 7.03125vw; height: 22.1875vw; -webkit-animation: floatAnimation 2s ease-in-out infinite 0s; animation: floatAnimation 2s ease-in-out infinite 0s; } @media screen and (max-width: 800px) { .hero__character--1 { padding-top: 24vw; } } @media screen and (max-width: 800px) { .hero__character--1 { height: 58.9333333333vw; } } .hero__character--1 img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 800px) { .hero__character--1 { padding-top: 5.46875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__character--1 { padding-top: 18.6666666667vw; } } .hero__character--2 { bottom: 0; right: 9%; width: 20.9375vw; height: 24.21875vw; z-index: 5; } @media screen and (max-width: 800px) { .hero__character--2 { width: 71.4666666667vw; } } @media screen and (max-width: 800px) { .hero__character--2 { height: 82.6666666667vw; } } .hero__character--2 img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 800px) { .hero__character--1 { bottom: 420px; left: 154px; } .hero__character--2 { width: 13.4375vw; height: 15.46875vw; left: 44%; bottom: -1%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__character--2 { width: 45.8666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__character--2 { height: 52.8vw; } } .hero__webmarketing-container { align-self: flex-start; width: 165.390625vw; height: 9.375vw; display: flex; justify-content: flex-start; align-items: center; padding-top: 8.75vw; padding-bottom: 8.75vw; overflow: hidden; } @media screen and (max-width: 800px) { .hero__webmarketing-container { width: 564.5333333333vw; } } @media screen and (max-width: 800px) { .hero__webmarketing-container { height: 32vw; } } @media screen and (max-width: 800px) { .hero__webmarketing-container { padding-top: 29.8666666667vw; } } @media screen and (max-width: 800px) { .hero__webmarketing-container { padding-bottom: 29.8666666667vw; } } @media screen and (max-width: 800px) { .hero__webmarketing-container { margin-top: 0vw; padding-top: 8.75vw; padding-bottom: 8.75vw; aspect-ratio: 1266/72; width: 98.90625vw; height: 5.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing-container { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing-container { padding-top: 5.3333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing-container { padding-bottom: 44vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing-container { width: 337.6vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing-container { height: 19.2vw; } } .hero__webmarketing { width: 165.390625vw; height: 9.375vw; -webkit-animation: slideWebMarketing 20s linear infinite; animation: slideWebMarketing 20s linear infinite; } @media screen and (max-width: 800px) { .hero__webmarketing { width: 564.5333333333vw; } } @media screen and (max-width: 800px) { .hero__webmarketing { height: 32vw; } } .hero__webmarketing + .hero__webmarketing { left: 100%; } @media screen and (max-width: 800px) { .hero__webmarketing { width: 98.90625vw; height: 5.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing { width: 337.6vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__webmarketing { height: 19.2vw; } } @media screen and (max-width: 800px) { .hero__button { width: 277px; height: 4.21875vw; font-size: 1.25vw; padding: 0 10px 0 20px; margin: 0 auto; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__button { height: 12.8vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hero__button-icon { width: 2.96875vw; height: 2.96875vw; min-width: 0vw; margin-left: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__button-icon { width: 8.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__button-icon { height: 8.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__button-icon { margin-left: 3.2vw; } } @media screen and (max-width: 800px) { .hero__button-icon::after { font-size: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hero__button-icon::after { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hero__web-text { font-size: 0vw; font-weight: bold; color: rgba(255, 255, 255, 0.2); position: absolute; bottom: 0vw; left: 0vw; z-index: -1; } } @media screen and (max-width: 800px) { .hero__web-character { position: absolute; bottom: 0vw; right: 0vw; width: 0vw; height: auto; z-index: -1; } } @-webkit-keyframes moveToPosition { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes moveToPosition { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @-webkit-keyframes slideWebMarketing { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes slideWebMarketing { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .aboutUs { display: flex; flex-direction: column; align-items: center; padding-top: 8.75vw; } @media screen and (max-width: 800px) { .aboutUs { padding-top: 29.8666666667vw; } } .aboutUs__back { position: relative; margin-top: 5vw; width: 78.4375vw; } @media screen and (max-width: 800px) { .aboutUs__back { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .aboutUs__back { width: 89.8666666667vw; } } .aboutUs__background { position: absolute; width: 100%; height: 94.5%; background-color: black; top: 2%; left: 2%; border-radius: 15px; z-index: -1; } @media screen and (max-width: 800px) { .aboutUs__background { height: 99.2%; top: 0.5%; left: 4.5%; } } .aboutUs__box { width: 100%; border: 3px solid black; background-color: white; border-radius: 15px; margin-bottom: 5vw; z-index: 2; } @media screen and (max-width: 800px) { .aboutUs__box { margin-bottom: 6.4vw; } } .aboutUs__inner { padding-top: 3.125vw; padding-bottom: 3.125vw; padding-left: 3.125vw; padding-right: 3.125vw; } @media screen and (max-width: 800px) { .aboutUs__inner { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } } @media screen and (max-width: 800px) { .aboutUs__inner { padding-left: 10.6666666667vw; padding-right: 10.6666666667vw; } } .aboutUs__mission-title { font-size: 2.5vw; padding-bottom: 1.875vw; color: #ffda03; font-family: "Termina"; font-weight: 800; border-bottom: 1px solid black; } @media screen and (max-width: 800px) { .aboutUs__mission-title { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .aboutUs__mission-title { padding-bottom: 6.4vw; } } .aboutUs__mission-content { font-size: 2.5vw; margin-top: 1.875vw; line-height: 1.5; font-family: "SweetSansPro"; font-weight: 800; } @media screen and (max-width: 800px) { .aboutUs__mission-content { font-size: 5.8666666667vw; } } @media screen and (max-width: 800px) { .aboutUs__mission-content { margin-top: 6.4vw; } } .aboutUs__mission-text { font-size: 1.25vw; margin-top: 1.25vw; line-height: 2; width: 90%; } @media screen and (max-width: 800px) { .aboutUs__mission-text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .aboutUs__mission-text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .aboutUs__mission-text { width: 100%; } } .aboutUs__instagram { margin-top: 6.25vw; } @media screen and (max-width: 800px) { .aboutUs__instagram { margin-top: 21.3333333333vw; } } .aboutUs__instagram-post { background-color: #f0f0f0; padding: 10px; text-align: center; } .aboutUs__instagram-post-image { width: 100%; height: auto; margin-bottom: 10px; } .aboutUs__instagram-post-text { font-size: 14px; color: #666; } .aboutUs__mascot { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; } .sbi_header_text { gap: 40px !important; } @media screen and (max-width: 800px) { .sbi_header_text { gap: 24px !important; } } .sbi_feedtheme_header_text h3 { font-size: 24px !important; color: black; font-family: "SweetSansPro"; font-weight: 800; } .sbi_feedtheme_header_text p { font-size: 16px !important; color: black; font-family: "SweetSansPro"; font-weight: 400; } @media screen and (max-width: 800px) { .sbi_feedtheme_header_text p { font-size: 12px !important; } } .sb_instagram_header { padding: 0 0 !important; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .sb_instagram_header { margin-top: 10.6666666667vw; } } .sbi_header_img { width: 80px !important; height: 80px !important; } @media screen and (max-width: 800px) { .sbi_header_img { width: 50px !important; height: 50px !important; } } .sbi_header_img img { width: 80px !important; height: 80px !important; } @media screen and (max-width: 800px) { .sbi_header_img img { width: 50px !important; height: 50px !important; } } .sbi_photo_wrap img { border-radius: 15px; } #sbi_images { padding: 0 0 !important; margin-top: 3.125vw; } @media screen and (max-width: 800px) { #sbi_images { margin-top: 10.6666666667vw; } } #sb_instagram { padding: 0 0 !important; } .message { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: 6.25vw; overflow: hidden; background-color: #9b9481; border-top-left-radius: 80px; border-top-right-radius: 80px; } @media screen and (max-width: 800px) { .message { padding-top: 66.6666666667vw; } } .message__title { color: #ffda03; font-size: 6.25vw; font-family: "Termina"; font-weight: 800; z-index: 2; } @media screen and (max-width: 800px) { .message__title { font-size: 14.9333333333vw; } } .message__subtitle { font-size: 1.25vw; margin-top: 0.625vw; color: #ffda03; font-family: "Noto Sans JP", system-ui; font-weight: 800; z-index: 2; } @media screen and (max-width: 800px) { .message__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .message__subtitle { margin-top: 2.1333333333vw; } } .message__heading { position: relative; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .message__heading { margin-top: 14.9333333333vw; } } .message__colon { position: absolute; top: -20%; left: -14%; } @media screen and (max-width: 800px) { .message__colon { display: none; } } .message__colonSp { display: none; } @media screen and (max-width: 800px) { .message__colonSp { display: block; position: absolute; top: -90%; left: 0%; } } .message__colonOther { position: absolute; bottom: -20%; right: -11%; } @media screen and (max-width: 800px) { .message__colonOther { bottom: -85%; right: 0%; width: 2.5vw; height: 2.421875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .message__colonOther { width: 8.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .message__colonOther { height: 8.2666666667vw; } } .message__headingText { font-size: 2.5vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; color: #fff; } @media screen and (max-width: 800px) { .message__headingText { font-size: 4.2666666667vw; } } .message__inner { display: flex; justify-content: space-between; align-items: flex-start; width: 80%; margin-top: 3.125vw; z-index: 2; } @media screen and (max-width: 800px) { .message__inner { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .message__inner { flex-direction: column; } } .message__imgWrapper { width: 30.546875vw; position: relative; border-radius: 15px; } @media screen and (max-width: 800px) { .message__imgWrapper { width: 80vw; } } .message__imgWrapper::before { display: block; content: ""; padding-top: 109.2071611253%; } .message__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .message__right { width: 41.640625vw; margin-top: 0vw; display: flex; flex-direction: column; } @media screen and (max-width: 800px) { .message__right { width: 80vw; } } @media screen and (max-width: 800px) { .message__right { margin-top: 8.5333333333vw; } } .message__rightTitle { color: #fff; font-size: 1.875vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .message__rightTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .message__rightTitle { margin-top: 6.4vw; } } .message__border { margin-top: 1.875vw; width: 41.640625vw; } @media screen and (max-width: 800px) { .message__border { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .message__border { width: 80vw; } } .message__text { font-size: 1.25vw; line-height: 2; color: #fff; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .message__text { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .message__text { margin-top: 6.4vw; } } .news-top { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 8.75vw; margin-bottom: 8.75vw; } @media screen and (max-width: 800px) { .news-top { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .news-top { margin-bottom: 21.3333333333vw; } } .news-top__inner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; box-sizing: border-box; position: relative; } @media screen and (max-width: 800px) { .news-top__inner { width: 100%; padding-left: 0vw; padding-right: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__inner { padding-left: 9.8666666667vw; padding-right: 9.8666666667vw; } } .news-top__header { display: flex; width: 79%; justify-content: space-between; align-items: flex-end; padding-bottom: 3.125vw; } @media screen and (max-width: 800px) { .news-top__header { padding-bottom: 8.5333333333vw; } } @media screen and (max-width: 800px) { .news-top__header { flex-direction: column; align-items: flex-start; width: 100%; } } .news-top__titlecontainer { padding-right: 36.796875vw; } @media screen and (max-width: 800px) { .news-top__titlecontainer { padding-right: 0vw; } } @media screen and (max-width: 800px) { .news-top__titlecontainer { margin-bottom: 0vw; } } .news-top__title { font-size: 5vw; font-weight: bold; color: #ffda03; font-family: "Termina"; font-weight: 800; } @media screen and (max-width: 800px) { .news-top__title { font-size: 10.6666666667vw; } } .news-top__subtitle { font-size: 1.25vw; margin-top: 0.78125vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .news-top__subtitle { font-size: 4.2666666667vw; } } .news-top__content { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .news-top__content--news { background-color: white; } @media screen and (max-width: 800px) { .news-top__content { flex-direction: column; } } .news-top__main { width: 100%; flex: 1; } @media screen and (max-width: 800px) { .news-top__main { width: 100%; order: 2; } } @media screen and (max-width: 800px) { .news-top__side { width: 100%; order: 1; margin-bottom: 0vw; } } .news-top__button-wrapper { z-index: 1; } @media screen and (max-width: 800px) { .news-top__button-wrapper { width: auto; } } .news-top__button-wrapper--pc { display: block; } @media screen and (max-width: 800px) { .news-top__button-wrapper--pc { display: none; } } .news-top__button-wrapper--sp { display: none; } @media screen and (max-width: 800px) { .news-top__button-wrapper--sp { display: block; padding-top: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__button-wrapper--sp { padding-top: 6.4vw; } } .news-top__button { display: inline-flex; justify-content: flex-end; align-items: center; padding-right: 0.9375vw; background-color: #000; color: #fff; padding-top: 1.25vw; padding-bottom: 1.25vw; border-radius: 9999px; text-decoration: none; font-size: 1.25vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; letter-spacing: 2px; position: relative; transition: background-color 0.3s ease; width: 21.640625vw; height: 4.21875vw; box-sizing: border-box; margin-top: -4%; } @media screen and (max-width: 800px) { .news-top__button { padding-right: 3.2vw; } } @media screen and (max-width: 800px) { .news-top__button { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news-top__button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news-top__button { width: 73.8666666667vw; } } @media screen and (max-width: 800px) { .news-top__button { height: 14.4vw; } } @media screen and (max-width: 800px) { .news-top__button { justify-content: flex-end; } } .news-top__button:hover { background-color: #333; } .news-top__button-text { font-size: 1.25vw; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .news-top__button-text { font-size: 4.2666666667vw; } } .news-top__button-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #ffda03; border-radius: 50%; margin-left: 16px; } .news-top__button-icon::after { content: "→"; color: #000; font-size: 18px; } .news-top__character-wrapper { align-items: center; flex-direction: column; display: flex; position: relative; text-align: center; z-index: -1; } @media screen and (max-width: 800px) { .news-top__character-wrapper { margin-top: 0; position: relative; text-align: center; width: 100%; } } .news-top__image { width: 9.140625vw; height: 11.5625vw; -o-object-fit: contain; object-fit: contain; margin-top: 1.875vw; display: block; } @media screen and (max-width: 800px) { .news-top__image { width: 31.2vw; } } @media screen and (max-width: 800px) { .news-top__image { height: 39.4666666667vw; } } @media screen and (max-width: 800px) { .news-top__image { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .news-top__image { width: 6.640625vw; height: 8.359375vw; -o-object-fit: contain; object-fit: contain; display: block; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__image { width: 22.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__image { height: 28.5333333333vw; } } .news-top__text { font-size: 1.25vw; background-color: #ffda03; padding: 0.78125vw 1.5625vw; border-radius: 9999px; display: inline-block; white-space: nowrap; text-align: center; font-weight: bold; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 800px) { .news-top__text { font-size: 4.2666666667vw; } } .news-top__text::after { content: ""; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 10px; height: 8px; background-color: #ffda03; border-radius: 0px 0px 5px 5px; } @media screen and (max-width: 800px) { .news-top__text::after { bottom: 122px; } } @media screen and (max-width: 800px) { .news-top__text { top: 0vw; width: 80%; box-sizing: border-box; } } .news-top__contact { margin-top: 6.25vw; } @media screen and (max-width: 800px) { .news-top__contact { margin-top: 21.3333333333vw; } } .news-top__contact--news { width: 100%; background-color: #fff; margin-top: 0vw; } @media screen and (max-width: 800px) { .news-top__contact--news { margin-top: 0vw; } } .news-top__contact--message { width: 100%; } .news-top__contact-inner { width: 80%; margin: 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 0vw; } @media screen and (max-width: 800px) { .news-top__contact-inner { padding-bottom: 0vw; } } .news-top__contact-text { font-size: 1.25vw; background-color: #ffda03; color: black; display: inline-block; padding: 0.78125vw 1.5625vw; border-radius: 9999px; margin-bottom: 1.5625vw; position: relative; font-family: "Noto Sans JP", system-ui; font-weight: 800; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .news-top__contact-text { font-size: 4.2666666667vw; } } .news-top__contact-text:hover { opacity: 40%; } .news-top__contact-text::after { content: ""; position: absolute; bottom: -0.625vw; left: 50%; transform: translateX(-50%); width: 0.78125vw; height: 0.625vw; background-color: #ffda03; border-radius: 0px 0px 5px 5px; } @media screen and (max-width: 800px) { .news-top__contact-text::after { width: 2.6666666667vw; } } @media screen and (max-width: 800px) { .news-top__contact-text::after { height: 2.1333333333vw; } } @media screen and (max-width: 800px) { .news-top__contact-text::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0.78125vw; height: 1.09375vw; background-color: #ffda03; border-radius: 0px 0px 5px 5px; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__contact-text::after { width: 2.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__contact-text::after { height: 3.7333333333vw; } } .news-top__contact-image { width: 9.6875vw; height: 9.6875vw; -o-object-fit: contain; object-fit: contain; display: block; vertical-align: bottom; } @media screen and (max-width: 800px) { .news-top__contact-image { width: 33.0666666667vw; } } @media screen and (max-width: 800px) { .news-top__contact-image { height: 33.0666666667vw; } } @media screen and (max-width: 800px) { .news-top__contact-image { margin-top: 15px; } } @media screen and (max-width: 800px) { .news-top__contact-inner { box-sizing: border-box; width: 100%; padding-left: 0vw; padding-right: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__contact-inner { padding-left: 5.3333333333vw; padding-right: 5.3333333333vw; } } @media screen and (max-width: 800px) { .news-top__contact-text { font-size: 1.25vw; padding-top: 0.625vw; padding-bottom: 0.625vw; padding-left: 1.25vw; padding-right: 1.25vw; margin-bottom: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__contact-text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__contact-text { padding-top: 1.6vw; padding-bottom: 1.6vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .news-top__contact-text { padding-left: 3.2vw; padding-right: 3.2vw; } }