@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; } .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, .blogBody body, .blogBody div, .blogBody span, .blogBody applet, .blogBody object, .blogBody iframe, .blogBody h1, .blogBody h2, .blogBody h3, .blogBody h4, .blogBody h5, .blogBody h6, .blogBody p, .blogBody blockquote, .blogBody pre, .blogBody a, .blogBody button, .blogBody abbr, .blogBody acronym, .blogBody address, .blogBody big, .blogBody cite, .blogBody code, .blogBody del, .blogBody dfn, .blogBody em, .blogBody img, .blogBody ins, .blogBody kbd, .blogBody q, .blogBody s, .blogBody samp, .blogBody small, .blogBody strike, .blogBody strong, .blogBody sub, .blogBody sup, .blogBody tt, .blogBody var, .blogBody b, .blogBody u, .blogBody i, .blogBody center, .blogBody dl, .blogBody dt, .blogBody dd, .blogBody ol, .blogBody ul, .blogBody li, .blogBody fieldset, .blogBody form, .blogBody label, .blogBody legend, .blogBody table, .blogBody caption, .blogBody tbody, .blogBody tfoot, .blogBody thead, .blogBody tr, .blogBody th, .blogBody td, .blogBody article, .blogBody aside, .blogBody canvas, .blogBody details, .blogBody embed, .blogBody figure, .blogBody figcaption, .blogBody footer, .blogBody header, .blogBody hgroup, .blogBody menu, .blogBody nav, .blogBody output, .blogBody ruby, .blogBody section, .blogBody summary, .blogBody time, .blogBody mark, .blogBody audio, .blogBody video { font-size: medium; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; } .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: rgb(0, 0, 0); } .blogBody p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 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; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 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: isolate; margin-block-start: 0.5em; margin-block-end: 0.5em; margin-inline-start: 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; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0; margin-inline-end: 0; font-weight: bold; } .blogBody :-webkit-any(article, aside, nav, section) h1 { font-size: 1.5em; margin-block-start: 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; margin-block-start: 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; margin-block-start: 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; margin-block-start: 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; margin-block-start: 2.33em; margin-block-end: 2.33em; } .blogBody h2 { display: block; font-size: 2.3em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 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; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h4 { display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h5 { display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h6 { display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0; margin-inline-end: 0; font-weight: bold; } .blogBody strong, .blogBody em, .blogBody kbd { font-size: 1em; } .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; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 40px; } .blogBody ol { display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0; margin-inline-end: 0; 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; margin-inline-start: 40px; } .blogBody dl { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0; margin-inline-end: 0; } .blogBody dt { display: block; } .blogBody ol ul, .blogBody ul ol, .blogBody ul ul, .blogBody ol ol { margin-block-start: 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; padding-inline-start: 2px; padding-inline-end: 2px; border: none; } .blogBody fieldset { display: block; margin-inline-start: 2px; margin-inline-end: 2px; padding-block-start: 0.35em; padding-inline-start: 0.75em; padding-inline-end: 0.75em; padding-block-end: 0.625em; 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; 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; 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; 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 { padding-inline-start: 8px; 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; margin-block-start: 0.5em; 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; 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: -moz-fit-content; width: 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::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 { margin-block-start: 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 { margin-block-start: 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 { 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, pfo output, ruby, section, summary, time, mark, audio, video { font-size: 62.5%; scroll-behavior: smooth; } html { scroll-padding-top: 200px; } body, html { background-color: #ffffff; font-family: "Noto Sans JP", system-ui; font-weight: 400; } .color\:black { color: #1b1b1b; } .header { position: fixed; z-index: 5; display: flex; justify-content: center; align-items: center; width: 100%; background: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); } .header__inner { display: flex; justify-content: space-between; align-items: center; width: 95%; padding-top: 9px; padding-bottom: 9px; } .header__left { display: flex; align-items: center; gap: 8px; } .header__img { width: 97px; height: 34px; margin-top: 0px; } .header__nav { display: flex; align-items: center; gap: 16px; text-align: right; transition: all 0.25s ease-in; } .header__nav--under { position: relative; flex-direction: row; top: 10px; } .header__navItem { position: relative; display: flex; justify-content: center; align-items: center; align-self: stretch; transition: all 0.25s ease-in; } .header__navItem--arrow { padding-top: 12px; padding-bottom: 12px; } .header__navItem::after { content: ""; display: block; transition: all 0.25s ease-in; background-size: cover; width: 8px; height: 4px; position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); color: #1b1b1b; transition: transform 0.3s ease; } .header__navItem:hover::after { transform: translateX(-50%) rotate(180deg); } .header__navItem:hover .dropDown { display: block; opacity: 1; } .header__navtext { position: relative; color: black; display: flex; justify-content: center; align-items: center; font-size: 14px; transition: all 0.25s ease-in; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .header__navtext--tel { font-size: 12px; } .header__navtext:hover { opacity: 40%; } .header__navtext--recruit { margin-left: 64px; } .header__navtext--contact { color: white; background-color: #008cd4; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 2px; transition: all 0.25s ease-in; } .header__navtext--contact:hover { opacity: 60%; } @media screen and (max-width: 1280px) { .header__navtext { font-size: 12px; } } .header__navtextTel { position: relative; color: black; display: flex; justify-content: center; align-items: center; font-size: 14px; transition: all 0.25s ease-in; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .header__dropdown { display: none; position: absolute; z-index: 10; top: 100%; left: 50%; transform: translateX(-50%); width: -moz-max-content; width: max-content; min-width: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; } .header__dropdown::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; } .header__dropdownText { display: flex; justify-content: center; align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; font-size: 10px; color: black; font-style: normal; font-weight: 400; text-align: center; white-space: nowrap; } .header__dropdownText:hover { background-color: #008cd4; color: white; } @media screen and (max-width: 800px) { .header { position: fixed; z-index: 5; display: flex; justify-content: center; align-items: center; width: 100%; background: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); } .header__inner { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; padding-bottom: 9px; width: 90%; } .header__left { display: flex; align-items: center; gap: 8px; } .header__img { width: 86px; height: 30px; margin-top: 3px; } .header__nav { display: none; } .header__nav--under { position: relative; flex-direction: row; top: 10px; } .header__navItem { position: relative; display: flex; justify-content: center; align-items: center; align-self: stretch; transition: all 0.25s ease-in; } .header__navItem--arrow { display: none; } .header__navItem::after { content: ""; display: block; transition: transform 0.3s ease; background-size: cover; width: 8px; height: 4px; position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); color: #1b1b1b; } .header__navItem:hover::after { transform: translateX(-50%) rotate(180deg); } .header__navItem:hover .dropDown { display: block; opacity: 1; } .header__navtext { position: relative; color: black; display: flex; justify-content: center; align-items: center; font-size: 14px; transition: all 0.25s ease-in; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .header__navtext--tel { font-size: 12px; } .header__navtext:hover { opacity: 40%; } .header__navtext--recruit { margin-left: 64px; } .header__navtext--contact { color: white; background-color: #008cd4; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 2px; transition: all 0.25s ease-in; } .header__navtext--contact:hover { opacity: 60%; } .header__navtextTel { position: relative; color: black; display: flex; justify-content: center; align-items: center; font-size: 14px; transition: all 0.25s ease-in; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .header__dropdown { display: none; position: absolute; z-index: 10; top: 100%; left: 50%; transform: translateX(-50%); width: -moz-max-content; width: max-content; min-width: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; } .header__dropdown::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; } .header__dropdownText { display: flex; justify-content: center; align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; font-size: 10px; color: black; font-style: normal; font-weight: 400; text-align: center; white-space: nowrap; } .header__dropdownText:hover { background-color: #008cd4; color: white; } } @media screen and (max-width: 480px) { .header { position: fixed; z-index: 5; display: flex; justify-content: center; align-items: center; width: 100%; background: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); } .header__inner { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; padding-bottom: 9px; width: 80%; } .header__left { display: flex; align-items: center; gap: 8px; } .header__img { width: 86px; height: 30px; margin-top: 3px; } .header__nav { display: none; } .header__nav--under { position: relative; flex-direction: row; top: 10px; } .header__navItem { position: relative; display: flex; justify-content: center; align-items: center; align-self: stretch; transition: all 0.25s ease-in; } .header__navItem--arrow { display: none; } .header__navItem::after { content: ""; display: block; transition: transform 0.3s ease; background-size: cover; width: 8px; height: 4px; position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); color: #1b1b1b; } .header__navItem:hover::after { transform: translateX(-50%) rotate(180deg); } .header__navItem:hover .dropDown { display: block; opacity: 1; } .header__navtext { position: relative; color: black; display: flex; justify-content: center; align-items: center; font-size: 14px; transition: all 0.25s ease-in; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .header__navtext--tel { font-size: 12px; } .header__navtext:hover { opacity: 40%; } .header__navtext--recruit { margin-left: 64px; } .header__navtext--contact { color: white; background-color: #008cd4; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 2px; transition: all 0.25s ease-in; } .header__navtext--contact:hover { opacity: 60%; } .header__navtextTel { position: relative; color: black; display: flex; justify-content: center; align-items: center; font-size: 14px; transition: all 0.25s ease-in; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .header__dropdown { display: none; position: absolute; z-index: 10; top: 100%; left: 50%; transform: translateX(-50%); width: -moz-max-content; width: max-content; min-width: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; } .header__dropdown::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; } .header__dropdownText { display: flex; justify-content: center; align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; font-size: 10px; color: black; font-style: normal; font-weight: 400; text-align: center; white-space: nowrap; } .header__dropdownText:hover { background-color: #008cd4; color: white; } } .about { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; padding-top: 5vw; } @media screen and (max-width: 800px) { .about { padding-top: 10.6666666667vw; } } .about--archive { margin-top: 9.375vw; width: 100%; } @media screen and (max-width: 800px) { .about--archive { margin-top: 21.3333333333vw; } } .about__top { display: flex; flex-direction: column; align-items: center; } .about__title { color: #1b1b1b; font-size: 3.75vw; font-family: "SweetSansProMedium"; font-weight: normal; letter-spacing: 1.6px; } @media screen and (max-width: 800px) { .about__title { font-size: 8.5333333333vw; } } .about__subtitle { font-size: 1.25vw; } @media screen and (max-width: 800px) { .about__subtitle { font-size: 4.2666666667vw; } } .about__inner { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 80%; } .about__inner--archive { width: 100%; } .about__content { display: flex; justify-content: space-between; margin-top: 5vw; width: 100%; } @media screen and (max-width: 800px) { .about__content { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .about__content { flex-direction: column; align-items: center; } } .about__left { font-size: 2.5vw; margin-left: 6.25vw; line-height: 2; font-family: "Noto Sans JP"; font-weight: 700; } @media screen and (max-width: 800px) { .about__left { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .about__left { margin-left: 0vw; } } .about__right { display: flex; flex-direction: column; align-items: flex-start; width: 36.640625vw; } @media screen and (max-width: 800px) { .about__right { width: 80vw; } } @media screen and (max-width: 800px) { .about__right { margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .about__right { margin-top: 10.6666666667vw; } } .about__text { font-size: 1.25vw; line-height: 2; } @media screen and (max-width: 800px) { .about__text { font-size: 4.2666666667vw; } } .about__text:not(:first-of-type) { margin-top: 2.5vw; } @media screen and (max-width: 800px) { .about__text:not(:first-of-type) { margin-top: 8.5333333333vw; } } .about__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) { .about__button { width: 61.3333333333vw; } } @media screen and (max-width: 800px) { .about__button { height: 15.4666666667vw; } } @media screen and (max-width: 800px) { .about__button { margin-top: 14.9333333333vw; } } .about__button:hover { opacity: 60%; } .about__end { display: flex; justify-content: flex-end; width: 100%; } .about__buttonText { font-size: 1.09375vw; color: white; margin-left: 3.125vw; } @media screen and (max-width: 800px) { .about__buttonText { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .about__buttonText { margin-left: 10.6666666667vw; } } @keyframes backgroundAnimation { 0% { background: var(--gradient); } 100% { background: linear-gradient(to right, #dd262b, #f8b400); } } .footer { display: flex; flex-direction: column; justify-content: center; align-items: center; border-top: 1px solid #cccccc; } .footer__inner { display: flex; justify-content: space-between; align-items: center; width: 90%; } .footer__left { display: flex; flex-direction: column; align-items: center; width: 50%; padding-top: 64px; padding-bottom: 64px; padding-right: 80px; } .footer__right { display: flex; flex-wrap: wrap; width: 50%; -moz-column-gap: 64px; column-gap: 64px; row-gap: 32px; padding-top: 16px; padding-bottom: 16px; border-left: 1px solid #cccccc; } .footer__title { font-size: 64px; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .footer__subtitle { font-size: 20px; font-weight: 700; } .footer__text { font-size: 20px; font-weight: 700; margin-top: 40px; text-align: center; } .footer__top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .footer__sitemap { display: flex; flex-direction: column; } .footer__sitemap--right { width: 36%; } @media screen and (max-width: 1280px) { .footer__sitemap--right { width: 100%; padding-left: 40px; } } .footer__sitemap--ml { padding-left: 80px; } @media screen and (max-width: 1280px) { .footer__sitemap--ml { padding-left: 40px; } } .footer__sitemapFlex { display: flex; justify-content: space-between; align-items: center; transition: all 0.25s ease-in; } .footer__sitemapFlex:hover { opacity: 40%; } .footer__sitemapFlexHoverNone { display: flex; justify-content: space-between; align-items: center; } .footer__sitemapTitle { font-size: 24px; font-family: "Bayon", system-ui; font-weight: 400; color: black; } .footer__link { display: flex; flex-direction: column; padding-top: 16px; gap: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__linkSp { display: none; } .footer__page { font-size: 14px; color: #1e1e1e; font-weight: 700; transition: all 0.25s ease-in; } .footer__page:hover { opacity: 60%; } .footer .phone-number { font-size: 12px; color: #1e1e1e; transition: all 0.25s ease-in; } .footer .phone-number:hover { opacity: 60%; } .footer__adress { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__flex { display: flex; justify-content: space-between; align-items: flex-end; } .footer__border { display: flex; justify-content: center; align-items: center; padding-top: 24px; padding-bottom: 24px; border-top: 1px solid #cccccc; width: 100%; } .footer__under { display: flex; justify-content: space-between; align-items: center; width: 90%; padding-top: 16px; padding-bottom: 16px; } @media screen and (max-width: 1280px) { .footer__under { width: 95%; gap: 40px; } } .footer__logo { width: 141px; height: 49px; } .footer__logo2 { width: 55px; height: 55px; } .footer__column { display: flex; align-items: center; gap: 32px; } .footer__content { display: flex; align-items: center; gap: 32px; } .footer__button { position: relative; margin-bottom: -7%; width: 42px; height: 42px; border-radius: 999px; transition: all 0.25s ease-in; } .footer__button:hover { color: #1b1b1b; background-color: white; } .footer__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .footer__buttonSp { display: none; position: relative; } .footer__buttonSp:hover { color: #1b1b1b; background-color: white; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__logoFlex { display: flex; align-items: center; gap: 40px; } .footer__logoFlexSp { display: none; gap: 32px; } .footer__privacyLogo { width: 62px; height: 62px; } .footer__logoSp { display: none; } .footer__flexSp { display: none; } .footer__inc { font-size: 12px; color: rgba(30, 30, 30, 0.6); } .footer__contentPrivacy { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 40px; grid-row-gap: 8px; } .footer__underText { font-size: 12px; color: black; transition: all 0.25s ease-in; } .footer__underText:hover { opacity: 40%; } @media screen and (max-width: 1280px) { .footer__underText { font-size: 10px; } } @media screen and (max-width: 800px) { .footer { display: flex; flex-direction: column; justify-content: center; align-items: center; border-top: 1px solid #cccccc; } .footer__inner { display: flex; justify-content: space-between; flex-direction: column; align-items: center; width: 100%; } .footer__left { display: flex; flex-direction: column; align-items: center; padding-top: 32px; padding-bottom: 32px; padding-right: 0px; width: 100%; border-right: 0px solid #cccccc; border-bottom: 1px solid #cccccc; } .footer__right { display: flex; flex-wrap: wrap; width: 85%; flex-direction: column; padding-top: 24px; padding-bottom: 24px; border-left: 0px solid #cccccc; } .footer__title { font-size: 32px; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .footer__subtitle { font-size: 16px; font-weight: 700; } .footer__text { font-size: 14px; font-weight: 700; margin-top: 24px; text-align: center; } .footer__top { display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; width: 100%; } .footer__sitemap { display: flex; flex-direction: column; width: 100%; } .footer__sitemap--right { width: 100%; padding-left: 0px; } .footer__sitemap--ml { padding-left: 0px; } .footer__sitemapFlex { display: flex; justify-content: space-between; align-items: center; transition: all 0.25s ease-in; } .footer__sitemapFlex:hover { opacity: 40%; } .footer__sitemapFlexHoverNone { display: flex; justify-content: space-between; align-items: center; } .footer__sitemapTitle { font-size: 24px; font-family: "Bayon", system-ui; font-weight: 400; color: black; } .footer__link { display: none; } .footer__linkSp { display: flex; justify-content: flex-start; margin-top: 0px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__linkSpFlex { display: flex; flex-direction: column; align-items: flex-start; width: 50%; } .footer__page { font-size: 14px; margin-top: 8px; color: #1e1e1e; font-weight: 700; transition: all 0.25s ease-in; white-space: nowrap; } .footer__page:first-of-type { margin-top: 0px; } .footer__page:hover { opacity: 60%; } .footer .phone-number { font-size: 12px; color: #1e1e1e; transition: all 0.25s ease-in; } .footer .phone-number:hover { opacity: 60%; } .footer__adress { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__flex { display: flex; justify-content: space-between; align-items: flex-end; } .footer__flex:last-child { margin-top: 24px; } .footer__border { display: flex; justify-content: center; align-items: center; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid #cccccc; width: 100%; } .footer__under { display: flex; justify-content: space-between; align-items: center; flex-direction: column-reverse; width: 85%; padding-top: 0px; padding-bottom: 0px; } .footer__logo { width: 97px; height: 34px; margin-top: 24px; } .footer__logo2 { width: 34px; height: 34px; margin-top: 24px; } .footer__column { display: flex; align-items: center; gap: 32px; } .footer__content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 32px; } .footer__button { display: none; } .footer__button:hover { color: #1b1b1b; background-color: white; } .footer__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .footer__buttonSp { display: block; width: 36px; height: 36px; border-radius: 999px; transition: all 0.25s ease-in; } .footer__buttonSp:hover { color: #1b1b1b; background-color: white; } .footer__arrowSp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .footer__borderSp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 48px; padding-top: 0px; flex-direction: column; border-top: 0px solid rgba(0, 0, 0, 0.1); } .footer__logoFlex { display: none; } .footer__logoFlexSp { display: block; gap: 16px; } .footer__privacyLogo { width: 40px; height: 40px; } .footer__logoSp { display: block; width: 164px; height: 22px; } .footer__flexSp { display: flex; justify-content: space-between; align-items: center; width: 100%; } .footer__inc { font-size: 12px; color: rgba(30, 30, 30, 0.6); margin-top: 16px; } .footer__contentPrivacy { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; width: 100%; gap: 24px; } .footer__underText { font-size: 10px; color: black; transition: all 0.25s ease-in; } .footer__underText:hover { opacity: 40%; } } @media screen and (max-width: 480px) { .footer { display: flex; flex-direction: column; justify-content: center; align-items: center; border-top: 1px solid #cccccc; } .footer__inner { display: flex; justify-content: space-between; flex-direction: column; align-items: center; width: 100%; } .footer__left { display: flex; flex-direction: column; align-items: center; padding-top: 32px; padding-bottom: 32px; padding-right: 0px; width: 100%; border-right: 0px solid #cccccc; border-bottom: 1px solid #cccccc; } .footer__right { display: flex; flex-wrap: wrap; width: 80%; flex-direction: column; padding-top: 24px; padding-bottom: 24px; border-left: 0px solid #cccccc; } .footer__title { font-size: 32px; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .footer__subtitle { font-size: 16px; font-weight: 700; } .footer__text { font-size: 14px; font-weight: 700; margin-top: 24px; text-align: center; } .footer__top { display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; width: 100%; } .footer__sitemap { display: flex; flex-direction: column; width: 100%; } .footer__sitemap--right { width: 100%; } .footer__sitemap--ml { padding-left: 0px; } .footer__sitemapFlex { display: flex; justify-content: space-between; align-items: center; transition: all 0.25s ease-in; } .footer__sitemapFlex:hover { opacity: 40%; } .footer__sitemapFlexHoverNone { display: flex; justify-content: space-between; align-items: center; } .footer__sitemapTitle { font-size: 24px; font-family: "Bayon", system-ui; font-weight: 400; color: black; } .footer__link { display: none; } .footer__linkSp { display: flex; justify-content: flex-start; margin-top: 0px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__linkSpFlex { display: flex; flex-direction: column; align-items: flex-start; width: 50%; } .footer__page { font-size: 14px; margin-top: 8px; color: #1e1e1e; font-weight: 700; transition: all 0.25s ease-in; white-space: nowrap; } .footer__page:first-of-type { margin-top: 0px; } .footer__page:hover { opacity: 60%; } .footer .phone-number { font-size: 12px; color: #1e1e1e; transition: all 0.25s ease-in; } .footer .phone-number:hover { opacity: 60%; } .footer__adress { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .footer__flex { display: flex; justify-content: space-between; align-items: flex-end; } .footer__flex:last-child { margin-top: 24px; } .footer__border { display: flex; justify-content: center; align-items: center; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid #cccccc; width: 100%; } .footer__under { display: flex; justify-content: space-between; align-items: center; flex-direction: column-reverse; width: 80%; padding-top: 0px; padding-bottom: 0px; } .footer__logo { width: 97px; height: 34px; margin-top: 24px; } .footer__logo2 { width: 34px; height: 34px; margin-top: 24px; } .footer__column { display: flex; align-items: center; gap: 32px; } .footer__content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 32px; } .footer__button { display: none; } .footer__button:hover { color: #1b1b1b; background-color: white; } .footer__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .footer__buttonSp { display: block; width: 36px; height: 36px; border-radius: 999px; transition: all 0.25s ease-in; } .footer__buttonSp:hover { color: #1b1b1b; background-color: white; } .footer__arrowSp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .footer__borderSp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 48px; padding-top: 0px; flex-direction: column; border-top: 0px solid rgba(0, 0, 0, 0.1); } .footer__logoFlex { display: none; } .footer__logoFlexSp { display: block; gap: 16px; } .footer__privacyLogo { width: 40px; height: 40px; } .footer__logoSp { display: block; width: 164px; height: 22px; } .footer__flexSp { display: flex; justify-content: space-between; align-items: center; width: 100%; } .footer__inc { font-size: 12px; color: rgba(30, 30, 30, 0.6); margin-top: 16px; } .footer__contentPrivacy { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; width: 100%; gap: 24px; } .footer__underText { font-size: 10px; color: black; transition: all 0.25s ease-in; } .footer__underText:hover { opacity: 40%; } } .fv { position: relative; padding-top: 59px; overflow: hidden; padding-bottom: 80px; height: 580px; /*(@include responsive(pc) { height: 300px; }*/ } .fv__img { position: absolute; top: 3%; left: 0; height: 100%; width: 100%; opacity: 0; animation: fadeInOut 15s infinite; transition: opacity 2s ease; } .fv__img:nth-child(2) { animation-delay: 5s; } .fv__img:nth-child(3) { animation-delay: 10s; } @media screen and (max-width: 800px) { .fv__img { display: none; } } @keyframes fadeInOut { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } } .fv__imgSp { width: 100%; display: none; } .fv__content { position: absolute; top: 36%; left: 10%; transform: translateY(-50%); display: flex; flex-direction: column; /*@include responsive(pc) { top: 42%; }*/ } .fv__subtitle { font-size: 16px; font-weight: 700; color: white; /*@include responsive(pc) { font-size: 12px; }*/ } .fv__title { font-size: 48px; font-weight: 700; color: white; margin-top: 32px; /*@include responsive(pc) { font-size: 24px; margin-top: 16px; }*/ } .fv__underTitle { font-size: 16px; font-weight: 700; color: white; line-height: 1.8; margin-top: 24px; /*@include responsive(pc) { font-size: 12px; margin-top: 16px; }*/ } .fv__button { display: flex; align-items: center; justify-content: center; margin-top: 40px; gap: 40px; background-color: #008cd4; padding-top: 6px; padding-bottom: 6px; width: 230px; border-radius: 999px; transition: all 0.25s ease-in; } .fv__button--mt { margin-top: 24px; } .fv__button:hover { opacity: 60%; } .fv__button svg { width: 40px; height: 40px; } .fv__buttonText { font-size: 14px; color: white; margin-left: 64px; margin-right: 0px; } .fv__buttonText--recruit { margin-left: 56px; } .fv__svg { width: 35px; height: 35px; } @media screen and (max-width: 800px) { .fv { position: relative; padding-top: 80px; padding-bottom: 0px; height: 500px; } .fv__img { position: absolute; top: 3%; left: 0; width: 100%; opacity: 0; animation: fadeInOut 15s infinite; transition: opacity 2s ease; } .fv__img:nth-child(2) { animation-delay: 5s; } .fv__img:nth-child(3) { animation-delay: 10s; } } @media screen and (max-width: 800px) and (max-width: 800px) { .fv__img { display: none; } } @media screen and (max-width: 800px) { @keyframes fadeInOut { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } } .fv__imgSp { display: block; position: absolute; top: 9%; left: 0; width: 100%; height: 90%; opacity: 0; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; animation: fadeInOut 15s infinite; transition: opacity 0.5s ease; } .fv__imgSp:nth-child(4) { animation-delay: 0s; } .fv__imgSp:nth-child(5) { animation-delay: 5s; } .fv__imgSp:nth-child(6) { animation-delay: 10s; } .fv__content { position: absolute; top: 60%; left: 10%; transform: translateY(-50%); display: flex; flex-direction: column; } .fv__subtitle { font-size: 16px; font-weight: 700; color: white; } .fv__title { font-size: 24px; font-weight: 700; color: white; margin-top: 16px; } .fv__underTitle { font-size: 12px; font-weight: 700; color: white; line-height: 1.8; margin-top: 16px; } .fv__button { display: flex; align-items: center; justify-content: center; margin-top: 32px; gap: 24px; background-color: #008cd4; padding-top: 4px; padding-bottom: 4px; width: 206px; border-radius: 999px; transition: all 0.25s ease-in; } .fv__button--mt { margin-top: 24px; } .fv__button:hover { opacity: 60%; } .fv__button svg { width: 32px; height: 32px; } .fv__buttonText { font-size: 14px; color: white; margin-left: 27%; } .fv__buttonText--recruit { margin-left: 40px; } .fv__svg { width: 35px; height: 35px; } } @media screen and (max-width: 480px) { .fv { position: relative; padding-top: 80px; overflow: hidden; padding-bottom: 0px; height: 500px; } .fv__img { position: absolute; top: 3%; left: 0; width: 100%; opacity: 0; animation: fadeInOut 15s infinite; transition: opacity 2s ease; } .fv__img:nth-child(2) { animation-delay: 5s; } .fv__img:nth-child(3) { animation-delay: 10s; } } @media screen and (max-width: 480px) and (max-width: 800px) { .fv__img { display: none; } } @media screen and (max-width: 480px) { @keyframes fadeInOut { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } } .fv__imgSp { display: block; position: absolute; top: 9%; left: 0; width: 100%; height: 90%; opacity: 0; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; animation: fadeInOut 15s infinite; transition: opacity 0.5s ease; } .fv__imgSp:nth-child(4) { animation-delay: 0s; } .fv__imgSp:nth-child(5) { animation-delay: 5s; } .fv__imgSp:nth-child(6) { animation-delay: 10s; } .fv__content { position: absolute; top: 45%; left: 10%; transform: translateY(-50%); display: flex; flex-direction: column; } .fv__subtitle { font-size: 16px; font-weight: 700; color: white; } .fv__title { font-size: 24px; font-weight: 700; color: white; margin-top: 16px; } .fv__underTitle { font-size: 12px; font-weight: 700; color: white; line-height: 1.8; margin-top: 16px; } .fv__button { display: flex; align-items: center; justify-content: center; margin-top: 32px; gap: 24px; background-color: #008cd4; padding-top: 4px; padding-bottom: 4px; width: 206px; border-radius: 999px; transition: all 0.25s ease-in; } .fv__button--mt { margin-top: 24px; } .fv__button:hover { opacity: 60%; } .fv__button svg { width: 32px; height: 32px; } .fv__buttonText { font-size: 14px; color: white; margin-left: 27%; } .fv__buttonText--recruit { margin-left: 40px; } .fv__svg { width: 35px; height: 35px; } } .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: #fcd475; 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: #fcd475; border: 0.078125vw solid #fcd475; } .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; } .service { position: relative; display: flex; justify-content: center; align-items: center; padding-top: 12.5vw; z-index: 1; } @media screen and (max-width: 800px) { .service { padding-top: 29.8666666667vw; } } .service__inner { display: flex; flex-direction: column; align-items: flex-start; width: 80%; } .service__top { display: flex; align-items: center; gap: 1.25vw; } .service__title { font-size: 1.09375vw; font-family: "SweetSansProRegular"; font-weight: normal; } @media screen and (max-width: 800px) { .service__title { font-size: 3.7333333333vw; } } .service__content { display: flex; justify-content: space-between; width: 100%; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .service__content { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .service__content { flex-direction: column; } } .service__left { font-size: 3.125vw; } @media screen and (max-width: 800px) { .service__left { font-size: 10.6666666667vw; } } .service__right { display: flex; flex-direction: column; align-items: flex-end; width: 45.46875vw; } @media screen and (max-width: 800px) { .service__right { width: 80vw; } } @media screen and (max-width: 800px) { .service__right { margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .service__right { margin-top: 10.6666666667vw; } } .service__text { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .service__text { font-size: 4.2666666667vw; } } .service__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) { .service__button { width: 68.5333333333vw; } } @media screen and (max-width: 800px) { .service__button { height: 15.4666666667vw; } } @media screen and (max-width: 800px) { .service__button { margin-top: 14.9333333333vw; } } .service__button:hover { opacity: 60%; } .service__buttonText { font-size: 1.09375vw; color: white; margin-left: 2.578125vw; } @media screen and (max-width: 800px) { .service__buttonText { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .service__buttonText { margin-left: 8.8vw; } } .news { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 80px; padding-bottom: 112px; overflow: hidden; } .news__inner { display: flex; flex-direction: column; justify-content: center; width: 80%; } .news__top { display: flex; justify-content: center; align-items: center; width: 100%; gap: 24px; } .news__flex { display: flex; align-items: center; gap: 12px; min-width: 210px; } .news__title { font-size: 16px; } .news__button { display: flex; align-items: center; gap: 48px; width: 257px; height: 58px; border-radius: 999px; background: var(--gradient); transition: all 0.25s ease-in; } .news__button:hover { opacity: 60%; } .news__article { display: flex; margin-top: 80px; } .news__content { display: flex; align-items: center; padding-top: 24px; padding-bottom: 24px; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.25s ease-in; } .news__content:hover { opacity: 40%; } .news__content:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .news__imgWrapper { width: 100%; aspect-ratio: 335/176; overflow: hidden; } .news__img { border-top-left-radius: 16px; border-top-right-radius: 16px; transition: transform 0.3s ease; } .news__link { padding: 32px; } .news__date { font-size: 20px; color: #008cd4; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; width: 85px; } @media screen and (max-width: 800px) { .news__date { width: 65px; } } @media screen and (max-width: 480px) { .news__date { width: 55px; } } .news__column { font-size: 16px; line-height: 1.5; color: black; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-clamp: 3; box-orient: vertical; word-wrap: break-word; overflow-wrap: break-word; } .news__termBox { position: absolute; bottom: 0; margin-bottom: 32px; width: 250px; display: flex; justify-content: space-between; align-items: center; } .news__term { border: 1px solid #008cd4; color: #008cd4; font-size: 12px; padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; border-radius: 4px; text-align: center; white-space: nowrap; font-weight: 700; } .news__end { display: flex; justify-content: center; } @media screen and (max-width: 800px) { .news { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 80px; padding-bottom: 80px; overflow: hidden; } .news__inner { display: flex; flex-direction: column; justify-content: center; width: 80%; } .news__top { display: flex; justify-content: center; width: 100%; gap: 24px; flex-direction: column; align-items: flex-start; } .news__flex { display: flex; align-items: center; width: 100%; gap: 24px; } .news__title { font-size: 14px; } .news__button { display: flex; align-items: center; margin-top: 24px; gap: 48px; width: 230px; height: 58px; border-radius: 999px; background: var(--gradient); transition: all 0.25s ease-in; } .news__button:hover { opacity: 60%; } .news__article { display: flex; margin-top: 40px; } .news__article--blog { margin-top: 56px; } .news__content { display: flex; padding-top: 16px; padding-bottom: 16px; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.25s ease-in; flex-direction: column; align-items: flex-start; gap: 16px; } .news__content:hover { opacity: 40%; } .news__content:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .news__imgWrapper { width: 100%; aspect-ratio: 335/176; overflow: hidden; } .news__img { border-top-left-radius: 16px; border-top-right-radius: 16px; transition: transform 0.3s ease; } .news__link { padding-top: 32px; padding-bottom: 32px; padding-left: 32px; padding-right: 32px; } .news__date { font-size: 16px; color: #008cd4; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .news__column { font-size: 16px; line-height: 1.5; color: black; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-clamp: 3; box-orient: vertical; word-wrap: break-word; overflow-wrap: break-word; } .news__termBox { position: absolute; bottom: 0; margin-bottom: 32px; width: 250px; display: flex; justify-content: space-between; align-items: center; } .news__term { border: 1px solid #008cd4; color: #008cd4; font-size: 12px; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; border-radius: 4px; text-align: center; white-space: nowrap; font-weight: 700; } .news__end { display: flex; justify-content: center; } } @media screen and (max-width: 480px) { .news { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 80px; padding-bottom: 80px; overflow: hidden; } .news__inner { display: flex; flex-direction: column; justify-content: center; width: 80%; } .news__top { display: flex; justify-content: center; width: 100%; gap: 24px; flex-direction: column; align-items: flex-start; } .news__flex { display: flex; align-items: center; width: 100%; gap: 24px; } .news__title { font-size: 14px; } .news__button { display: flex; align-items: center; margin-top: 24px; gap: 48px; width: 230px; height: 58px; border-radius: 999px; background: var(--gradient); transition: all 0.25s ease-in; } .news__button:hover { opacity: 60%; } .news__article { display: flex; margin-top: 40px; } .news__article--blog { margin-top: 56px; } .news__content { display: flex; padding-top: 16px; padding-bottom: 16px; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.25s ease-in; flex-direction: column; align-items: flex-start; gap: 16px; } .news__content:hover { opacity: 40%; } .news__content:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .news__imgWrapper { width: 100%; aspect-ratio: 335/176; overflow: hidden; } .news__img { border-top-left-radius: 16px; border-top-right-radius: 16px; transition: transform 0.3s ease; } .news__link { padding-top: 32px; padding-bottom: 32px; padding-left: 32px; padding-right: 32px; } .news__date { font-size: 16px; color: #008cd4; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .news__column { font-size: 16px; line-height: 1.5; color: black; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-clamp: 3; box-orient: vertical; word-wrap: break-word; overflow-wrap: break-word; } .news__termBox { position: absolute; bottom: 0; margin-bottom: 32px; width: 250px; display: flex; justify-content: space-between; align-items: center; } .news__term { border: 1px solid #008cd4; color: #008cd4; font-size: 12px; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; border-radius: 4px; text-align: center; white-space: nowrap; font-weight: 700; } .news__end { display: flex; justify-content: center; } } .swiper-container { position: relative; padding-bottom: 80px; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 0; z-index: 3; height: 5px; width: 84%; } .swiper-scrollbar { position: absolute; top: 95%; left: 0; width: 84%; height: 4px; background: #e0e0e0; } .swiper-scrollbar-drag { background: linear-gradient(to right, #ff4500, #ff7f50); height: 100%; position: absolute; left: 0; /* 位置を左に固定 */ width: 0; transition: width 0.3s, transform 0.3s; /* transformの変更にアニメーションを適用 */ } .swiper-scrollbar-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, .swiper-button-prev { width: 48px; height: 48px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 95%; z-index: 3; font-size: 20px; color: #000; } .swiper-button-next::after, .swiper-button-prev::after { content: "←"; font-size: 13px; } .swiper-button-next::after { transform: rotate(180deg); } .swiper-button-next { right: 0; } .swiper-button-prev { left: 90%; } @media (max-width: 768px) { .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 0; z-index: 3; height: 5px; width: 65%; } .swiper-scrollbar { top: 94%; } .swiper-button-next, .swiper-button-prev { width: 30px; height: 30px; } .swiper-button-prev { left: 75%; } } .newsUnder { display: flex; flex-direction: column; align-items: center; padding-bottom: 8.75vw; } @media screen and (max-width: 800px) { .newsUnder { padding-bottom: 21.3333333333vw; } } .newsUnder--back { background-color: #f5f5f5; } @media screen and (max-width: 800px) { .newsUnder { display: flex; flex-direction: column; align-items: center; } } .newsUnder__inner { display: flex; flex-direction: column; z-index: 1; width: 80%; } .newsUnder__titleBox { display: flex; flex-direction: column; justify-content: flex-start; } .newsUnder__title { font-size: 9.375vw; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "SweetSansProMedium"; font-weight: normal; letter-spacing: 1.6px; } @media screen and (max-width: 800px) { .newsUnder__title { font-size: 21.3333333333vw; } } .newsUnder__subtitle { font-size: 1.5625vw; color: black; } @media screen and (max-width: 800px) { .newsUnder__subtitle { font-size: 4.2666666667vw; } } .newsUnder__titleLine { width: 13.28125vw; height: 2.34375vw; background: linear-gradient(90deg, #ffba27 0%, rgba(255, 187, 41, 0) 80.73%); 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; gap: 1.25vw; flex-wrap: wrap; margin-top: 2.5vw; transition: all 0.2s ease-in; } @media screen and (max-width: 800px) { .newsUnder__terms { margin-top: 6.4vw; } } .newsUnder__terms--news { margin-top: 150px; } @media screen and (max-width: 1280px) { .newsUnder__terms--news { margin-top: 150px; } } @media screen and (max-width: 800px) { .newsUnder__terms--news { margin-top: 100px; } } @media screen and (max-width: 480px) { .newsUnder__terms--news { margin-top: 80px; } } .newsUnder__term { display: flex; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid rgba(30, 30, 30, 0.2); cursor: pointer; transition: all 0.2s ease-in; } .newsUnder__term.selected { background: #008cd4; border: 1px solid #008cd4; } .newsUnder__term.selected a { color: white; transition: all 0.2s ease-in; } .newsUnder__term:hover { opacity: 40%; } .newsUnder__termLink { display: flex; justify-content: center; align-items: center; padding-left: 2.5vw; padding-right: 2.5vw; padding-top: 0.625vw; padding-bottom: 0.625vw; color: #555555; transition: all 0.2s ease-in; } @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: 1.0666666667vw; padding-bottom: 1.0666666667vw; } } .newsUnder__termLink2 { display: flex; justify-content: center; align-items: center; font-size: 0.9375vw; padding-left: 2.5vw; padding-right: 2.5vw; padding-top: 0.625vw; padding-bottom: 0.625vw; font-size: 14px; padding: 8px 34px; color: #555555; transition: all 0.2s ease-in; } @media screen and (max-width: 800px) { .newsUnder__termLink2 { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink2 { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink2 { padding-top: 1.0666666667vw; padding-bottom: 1.0666666667vw; } } .newsUnder__termLink3 { display: flex; justify-content: center; align-items: center; padding-left: 2.5vw; padding-right: 2.5vw; padding-top: 0.625vw; padding-bottom: 0.625vw; color: #555555; transition: all 0.2s ease-in; } @media screen and (max-width: 800px) { .newsUnder__termLink3 { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink3 { padding-top: 1.0666666667vw; padding-bottom: 1.0666666667vw; } } .newsUnder__termLink4 { display: flex; justify-content: center; align-items: center; padding-left: 2.5vw; padding-right: 2.5vw; padding-top: 0.625vw; padding-bottom: 0.625vw; color: #555555; transition: all 0.2s ease-in; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .newsUnder__termLink4 { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink4 { padding-top: 1.0666666667vw; padding-bottom: 1.0666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__termLink4 { font-size: 2.6666666667vw; } } .newsUnder__name { width: 7.578125vw; padding-top: 0.625vw; padding-bottom: 0.625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; 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 { margin-top: 4.375vw; display: flex; flex-direction: column; opacity: 1; transition: opacity 0.3s ease-in-out; will-change: opacity; } @media screen and (max-width: 800px) { .newsUnder__contents { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .newsUnder__contents { grid-template-columns: 1fr; } } .newsUnder__contents.loading { opacity: 0; pointer-events: none; } .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; font-size: 18px; width: 70px; height: 70px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 78.046875vw; color: #1b1b1b; 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: 12.8vw; } } @media screen and (max-width: 800px) { .newsUnder__pages ul li a, .newsUnder__pages ul li span { height: 12.8vw; } } @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 { border: 1px solid #008cd4; } .newsUnder__pages ul li span.current { border: 1px solid #008cd4; background-color: #008cd4; color: white; } .newsUnder__pagenation { display: flex; gap: 1.25vw; align-items: center; justify-content: center; } .newsUnder__prev { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__prev { width: 10.6666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__prev { height: 10.6666666667vw; } } .newsUnder__next { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__next { width: 10.6666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__next { height: 10.6666666667vw; } } .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: 1px solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__page1 { width: 8.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page1 { height: 8.5333333333vw; } } .newsUnder__page2 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__page2 { width: 8.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page2 { height: 8.5333333333vw; } } .newsUnder__page3 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; } @media screen and (max-width: 800px) { .newsUnder__page3 { width: 8.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page3 { height: 8.5333333333vw; } } .pagenation__arrow { width: 1.09375vw; height: 0.390625vw; } @media screen and (max-width: 800px) { .pagenation__arrow { width: 3.7333333333vw; } } @media screen and (max-width: 800px) { .pagenation__arrow { height: 1.3333333333vw; } } #news-terms-all { scroll-margin-top: 40px; } @media screen and (max-width: 800px) { #news-terms-all { scroll-margin-top: 30px; } } @media screen and (max-width: 480px) { #news-terms-all { scroll-margin-top: 20px; } } #news-terms { scroll-margin-top: -70px; } @media screen and (max-width: 800px) { #news-terms { scroll-margin-top: -65px; } } @media screen and (max-width: 480px) { #news-terms { scroll-margin-top: -80px; } } .blogBody { position: relative; display: flex; justify-content: center; align-items: center; } .blogBody__inner { display: flex; align-items: center; width: 78.4375vw; padding-top: 9.375vw; } @media screen and (max-width: 800px) { .blogBody__inner { width: 80vw; } } @media screen and (max-width: 800px) { .blogBody__inner { padding-top: 32vw; } } .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: 100%; 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; align-items: flex-end; 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: 61.3333333333vw; } } @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%; position: absolute; left: 0; /* 位置を左に固定 */ width: 0; /* 初期幅をゼロに設定 */ transition: width 0.3s, transform 0.3s; /* transformの変更にアニメーションを適用 */ } .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-blog-drag::after { width: 15px; height: 15px; } } .contact { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 112px; padding-bottom: 112px; } .contact__box { width: 80%; display: flex; flex-direction: column; align-items: center; } .contact__inner { display: flex; flex-direction: column; width: 840px; z-index: 2; } .contact__inner--recruit { margin-top: 56px; } .contact__title { color: #1b1b1b; font-size: 80px; color: white; background-color: #008cd4; padding-left: 16px; padding-right: 16px; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .contact__subtitle { font-size: 20px; margin-top: 16px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 700; } .contact__set { display: flex; align-items: center; } .contact__col { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-top: 16px; } .contact__col textarea { resize: none; } .contact__col--a { align-items: flex-start; margin-bottom: 0px; } .contact__col--contents { align-items: flex-start; } .contact__col--center { align-items: center; } .contact__privacy { font-size: 14px; color: black; text-decoration: underline; padding-bottom: 4px; transition: all 0.25s ease-in; } .contact__privacy:hover { opacity: 40%; } .contact__row { display: flex; } .contact__name { font-size: 14px; color: #353535; font-weight: 600; } .contact__required { font-size: 14px; color: red; } .contact__required--privacy { width: 80px; margin-top: 24px; } .contact__content { position: relative; width: 786px; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; margin-top: 16px; background-color: rgba(0, 0, 0, 0.05); border: none; } .contact__content--a { height: 217px; margin-bottom: 80px; } @media screen and (max-width: 1280px) { .contact__content { width: 680px; } } .contact__text { position: absolute; top: 39%; left: 1%; font-size: 8px; opacity: 50%; } .contact__text--a { top: 3%; } .contact__innerText { margin-left: 16px; width: 100%; } .contact__viewbutton { align-items: center; text-align: center; margin-top: 32px; margin-bottom: 24px; } .contact .contact__viewbutton input { border-radius: 4px; background-color: #008cd4; z-index: 1; border-radius: 999px; } .contact__viewmore { display: inline-block; width: 240px; padding-top: 16px; padding-bottom: 16px; font-size: 16px; transition: all 0.25s ease-in; cursor: pointer; color: white; } .contact__viewmore:hover { opacity: 40%; } .contact__time { display: flex; align-items: flex-end; } .contact__hour { font-size: 16px; margin-right: 32px; } .contact .contact__checkBox { width: 24px; height: 24px; margin-bottom: 6px; 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; } .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; } @media screen and (max-width: 800px) { .wpcf7-form { width: 100%; } .contact { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 80px; padding-top: 112px; } .contact__box { width: 80%; display: flex; flex-direction: column; align-items: center; } .contact__inner { display: flex; flex-direction: column; width: 80%; z-index: 2; } .contact__inner--recruit { margin-top: 56px; } .contact__title { color: #1b1b1b; font-size: 40px; color: white; background-color: #008cd4; padding-left: 16px; padding-right: 16px; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .contact__subtitle { font-size: 1.5625vw; margin-top: 1.25vw; margin-top: 0.9375vw; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 700; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contact__subtitle { font-size: 5.3333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contact__subtitle { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contact__subtitle { margin-top: 3.2vw; } } @media screen and (max-width: 800px) { .contact__set { display: flex; align-items: center; } .contact__col { display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; margin-top: 16px; } .contact__col textarea { resize: none; } .contact__col--a { align-items: flex-start; margin-bottom: 0px; } .contact__col--contents { align-items: flex-start; } .contact__col--center { align-items: center; } .contact__privacy { font-size: 14px; color: black; text-decoration: underline; padding-bottom: 4px; transition: all 0.25s ease-in; } .contact__privacy:hover { opacity: 40%; } .contact__row { display: flex; } .contact__name { font-size: 14px; color: #353535; font-weight: 600; } .contact__required { font-size: 14px; color: red; } .contact__required--privacy { width: 80px; margin-top: 24px; } .contact__content { position: relative; width: 100%; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; margin-top: 16px; background-color: rgba(0, 0, 0, 0.05); border: none; } .contact__content--a { height: 217px; margin-bottom: 80px; } .contact__text { position: absolute; top: 39%; left: 1%; font-size: 8px; opacity: 50%; } .contact__text--a { top: 3%; } .contact__innerText { margin-left: 16px; width: 100%; } .contact__viewbutton { align-items: center; text-align: center; margin-top: 8px; margin-bottom: 0px; } .contact .contact__viewbutton input { border-radius: 4px; background-color: #008cd4; z-index: 1; border-radius: 999px; } .contact__viewmore { display: inline-block; width: 180px; padding-top: 16px; padding-bottom: 16px; font-size: 16px; transition: all 0.25s ease-in; cursor: pointer; color: white; } .contact__viewmore:hover { opacity: 40%; } .contact__time { display: flex; flex-direction: column; align-items: flex-start; } .contact__hour { font-size: 16px; margin-right: 32px; } .contact .contact__checkBox { width: 24px; height: 24px; margin-bottom: 6px; 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; } .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; } } @media screen and (max-width: 480px) { .contact { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 80px; padding-top: 112px; } .contact__box { width: 80%; display: flex; flex-direction: column; align-items: center; } .contact__inner { display: flex; flex-direction: column; width: 300px; z-index: 2; } .contact__inner--recruit { margin-top: 56px; } .contact__title { color: #1b1b1b; font-size: 40px; color: white; background-color: #008cd4; padding-left: 16px; padding-right: 16px; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; } .contact__subtitle { font-size: 1.5625vw; margin-top: 1.25vw; margin-top: 0.9375vw; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 700; } } @media screen and (max-width: 480px) and (max-width: 800px) { .contact__subtitle { font-size: 5.3333333333vw; } } @media screen and (max-width: 480px) and (max-width: 800px) { .contact__subtitle { margin-top: 4.2666666667vw; } } @media screen and (max-width: 480px) and (max-width: 800px) { .contact__subtitle { margin-top: 3.2vw; } } @media screen and (max-width: 480px) { .contact__set { display: flex; align-items: center; width: 100%; } .contact__col { display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; margin-top: 16px; } .contact__col textarea { resize: none; } .contact__col--a { align-items: flex-start; margin-bottom: 0px; } .contact__col--contents { align-items: flex-start; } .contact__col--center { align-items: center; } .contact__privacy { font-size: 14px; color: black; text-decoration: underline; padding-bottom: 4px; transition: all 0.25s ease-in; } .contact__privacy:hover { opacity: 40%; } .contact__row { display: flex; } .contact__name { font-size: 14px; color: #353535; font-weight: 600; } .contact__required { font-size: 14px; color: red; } .contact__required--privacy { width: 80px; margin-top: 24px; } .contact__content { position: relative; width: 268px; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; margin-top: 16px; background-color: rgba(0, 0, 0, 0.05); border: none; } .contact__content--a { height: 217px; margin-bottom: 80px; } .contact__text { position: absolute; top: 39%; left: 1%; font-size: 8px; opacity: 50%; } .contact__text--a { top: 3%; } .contact__innerText { margin-left: 16px; width: 100%; } .contact__viewbutton { align-items: center; text-align: center; margin-top: 8px; margin-bottom: 0px; } .contact .contact__viewbutton input { border-radius: 4px; background-color: #008cd4; z-index: 1; border-radius: 999px; } .contact__viewmore { display: inline-block; width: 180px; padding-top: 16px; padding-bottom: 16px; font-size: 16px; transition: all 0.25s ease-in; cursor: pointer; color: white; } .contact__viewmore:hover { opacity: 40%; } .contact__time { display: flex; flex-direction: column; align-items: flex-start; } .contact__hour { font-size: 16px; margin-right: 32px; } .contact .contact__checkBox { width: 24px; height: 24px; margin-bottom: 6px; 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; } .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 { font-size: 14px; } .wpcf7-form-control-wrap { margin-right: 8px; } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap { width: 90%; } } .wpcf7 { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 24px; } .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: 12px; } /* 失敗時のメッセージの色 */ .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: 12px; } .wpcf7-list-item-label { font-size: 16px; } @media screen and (max-width: 800px) { .wpcf7-list-item-label { white-space: nowrap; } } .wpcf7-list-item-label span { font-size: 16px; color: red; } .wpcf7-select { font-size: 14px; background-color: rgba(0, 0, 0, 0.05); } .wpcf7-form-control { margin-top: 8px; background-color: rgba(50, 42, 40, 0.05); } .wpcf7-form-control-wrap span { background-color: none !important; } .wpcf7-form-control wpcf7-validates-as-required { width: 100%; } .contact__col span { font-size: 14px; } @media screen and (max-width: 480px) { .contact__col span { display: block; } } .contact__col span select { width: 371%; } @media screen and (max-width: 1280px) { .contact__col span select { width: 710px; } } @media screen and (max-width: 800px) { .contact__col span select { width: 106%; } } .wpcf7-acceptance { background: none !important; } .wpcf7-checkbox { background: none !important; } .wpcf7-form-control-wrap[data-name=desired-type] { margin-top: 24px; } @media screen and (max-width: 480px) { .wpcf7-form-control-wrap[data-name=desired-type] { margin-top: 16px; } } .wpcf7-form-control-wrap[data-name=desired-type] span { margin-top: 0; } @media screen and (max-width: 480px) { .wpcf7-form-control-wrap[data-name=desired-type] span { display: flex; align-items: center; } } .wpcf7-list-item { margin: 0 !important; margin-right: 16px; } .wpcf7-list-item label { display: flex; align-items: center; justify-content: center; gap: 8px; } .wpcf7-list-item label input { margin: 0 !important; } .wpcf7-list-item-label { margin-right: 16px; margin-bottom: 5px; } @media screen and (max-width: 480px) { .wpcf7-list-item-label { margin-right: 0px; margin-bottom: 0px; } } .contact__checkboxTop { width: 50px; } .contact__checkboxTop { margin-top: 24px; } .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: rgb(53, 53, 53) !important; font-size: 16px; background-color: rgba(50, 42, 40, 0.05) !important; } .wpcf7-radio { background-color: #e9f2f5; } .newsSingle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-bottom: 112px; } .newsSingle__top { display: flex; align-items: flex-start; flex-direction: column; width: 100%; padding-top: 112px; padding-bottom: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); background-color: #f5f5f5; } .newsSingle__header { display: flex; align-items: center; margin-left: 10%; width: 80%; } .newsSingle__term { font-size: 12px; width: 130px; padding-top: 4px; padding-bottom: 4px; text-align: center; color: #008cd4; border-radius: 4px; border: 2px solid #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .newsSingle__date { font-size: 20px; color: #008cd4; margin-left: 16px; } .newsSingle__title { color: black; font-size: 32px; margin-top: 8px; margin-left: 10%; width: 80%; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .newsSingle__under { padding-top: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .newsSingle__content { font-size: 16px; color: black; width: 80%; } .newsSingle__content p { font-size: 16px; color: black; width: 100%; line-height: 1.5; } @media screen and (max-width: 800px) { .newsSingle__content p { font-size: 14px; } } .newsSingle__content p strong { font-size: 16px; color: black; width: 100%; margin-top: 8px; } .newsSingle__content p strong mark { font-size: 16px; width: 100%; margin-top: 8px; font-style: normal; } .newsSingle__content p mark { font-size: 16px; width: 100%; margin-top: 8px; background-color: white; } .newsSingle__content h1 { font-size: 40px; color: black; width: 100%; } .newsSingle__content h2 { position: relative; font-size: 32px; color: black; width: 100%; } .newsSingle__content h2::after { content: ""; position: absolute; bottom: -35%; left: 50%; transform: translateX(-50%); width: 5%; height: 5px; background-color: #008cd4; } .newsSingle__content h3 { position: relative; font-size: 24px; color: black; width: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; } .newsSingle__content h3::before, .newsSingle__content h3::after { content: ""; height: 2px; background-color: black; flex-grow: 1; } .newsSingle__content h4 { font-size: 24px; color: black; width: 100%; display: flex; align-items: center; gap: 20px; } .newsSingle__content figure img { width: 100%; } .newsSingle__collection { margin-top: 56px; width: 177px; border: 2px solid #008cd4; background-color: #008cd4; border-radius: 999px; display: flex; justify-content: center; transition: all 0.25s ease-in; } .newsSingle__collection:hover { background-color: white; } .newsSingle__collection:hover .newsSingle__text { color: #008cd4; } .newsSingle__text { font-size: 16px; color: white; padding-top: 16px; padding-bottom: 16px; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsSingle__text { font-size: 14px; padding-top: 12px; padding-bottom: 12px; } } @media screen and (max-width: 480px) { .newsSingle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-bottom: 80px; } .newsSingle__top { display: flex; align-items: flex-start; flex-direction: column; width: 100%; padding-top: 140px; padding-bottom: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); background-color: #f5f5f5; } .newsSingle__header { display: flex; align-items: center; margin-left: 10%; width: 80%; } .newsSingle__term { font-size: 12px; width: 130px; padding-top: 4px; padding-bottom: 4px; text-align: center; color: #008cd4; border-radius: 4px; border: 2px solid #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .newsSingle__date { font-size: 20px; color: #008cd4; margin-left: 16px; } .newsSingle__title { color: black; font-size: 32px; margin-top: 8px; margin-left: 10%; width: 80%; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .newsSingle__under { padding-top: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .newsSingle__content { font-size: 16px; color: black; width: 80%; } .newsSingle__content p { font-size: 14px; color: black; width: 100%; line-height: 1.5; } .newsSingle__content p strong { font-size: 16px; color: black; width: 100%; margin-top: 8px; } .newsSingle__content p strong mark { font-size: 16px; width: 100%; margin-top: 8px; font-style: normal; } .newsSingle__content p mark { font-size: 16px; width: 100%; margin-top: 8px; background-color: white; } .newsSingle__content h1 { font-size: 40px; color: black; width: 100%; } .newsSingle__content h2 { position: relative; font-size: 24px; color: black; width: 100%; } .newsSingle__content h2::after { content: ""; position: absolute; bottom: -35%; left: 50%; transform: translateX(-50%); width: 10%; height: 5px; background-color: #008cd4; } .newsSingle__content h3 { position: relative; font-size: 16px; color: black; width: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; } .newsSingle__content h3::before, .newsSingle__content h3::after { content: ""; height: 2px; background-color: black; flex-grow: 1; } .newsSingle__content h4 { font-size: 16px; color: black; width: 100%; display: flex; align-items: center; gap: 20px; } .newsSingle__content figure img { width: 100%; } .newsSingle__collection { margin-top: 56px; width: 177px; border: 2px solid #008cd4; background-color: #008cd4; border-radius: 999px; display: flex; justify-content: center; transition: all 0.25s ease-in; } .newsSingle__collection:hover { background-color: white; } .newsSingle__collection:hover .newsSingle__text { color: #008cd4; } .newsSingle__text { font-size: 14px; color: white; padding-top: 8px; padding-bottom: 8px; transition: all 0.25s ease-in; } } .wp-block-columns { gap: 24px; } .wp-block-columns .wp-block-column p img { width: 100% !important; } .has-fixed-layout tbody tr td { font-size: 16px; } .wp-block-separator { border-top: 1px solid black !important; } .wp-block-image img { width: 100%; } .has-text-align-left { font-size: 16px; width: 85%; } @media screen and (max-width: 800px) { .has-text-align-left { width: 60%; } } .wp-block-table table tbody tr td { font-size: 16px; } .achievements { display: flex; justify-content: center; align-items: center; margin-top: 8.75vw; width: 100%; } @media screen and (max-width: 800px) { .achievements { margin-top: 21.3333333333vw; } } .achievements--back { background-color: #f5f5f5; margin-top: 0vw; padding-top: 8.75vw; } @media screen and (max-width: 800px) { .achievements--back { margin-top: 0vw; } } @media screen and (max-width: 800px) { .achievements--back { padding-top: 21.3333333333vw; } } .achievements__inner { display: flex; flex-direction: column; width: 80%; } .corporations { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 80px 0; overflow: hidden; } .corporations--sp { margin-top: 0px; overflow: hidden; } .corporations--corp { margin-top: 74px; } .corporations--gov { margin-top: 74px; } .corporations__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 90%; margin-left: 10%; } .corporations__inner--government { margin-left: 0; width: 100%; } .corporations__inner--edu { margin-left: 0%; margin-top: 32px; } .corporations__inner--mt { margin-left: 0%; margin-top: 8px; } .corporations__flex { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 130px; margin-bottom: 112px; overflow: hidden; } .corporations__flex--100 { width: 100%; } .corporations__flex--sports { width: 100%; } .corporations__flex--government { justify-content: space-between; align-items: flex-start; margin-left: 10%; padding-top: 64px; margin-bottom: 0px; } .corporations__flex--government-second { margin-left: 0; margin-right: 10%; align-items: flex-start; } .corporations__flex--ml { margin-left: 17%; padding-top: 40px; margin-bottom: 0px; width: 100%; align-items: flex-start; } .corporations__flex--mt { margin-top: 64px; } .corporations__left { display: flex; flex-direction: column; width: 90%; margin-top: 0px; } .corporations__left--none { margin-top: 0px; } .corporations__title { font-size: 40px; font-family: "Noto Sans JP", system-ui; font-weight: 700; } .corporations__title--top { font-size: 32px; color: #008cd4; } .corporations__title--sports { font-size: 32px; margin-top: 40px; } .corporations__br { display: none; } .corporations__text { line-height: 1.8; font-size: 16px; font-family: "Noto Sans JP", system-ui; font-weight: 400; margin-top: 40px; } .corporations__text--corporations { white-space: nowrap; } .corporations__text--none { margin-top: 40px; } .corporations__text--government { font-size: 16px; margin-top: 24px; line-height: 1.5; } .corporations__img { position: absolute; right: 0; width: 470px; aspect-ratio: 521/641; } .corporations__img--top { width: 425px; height: 485px; } .corporations__img--sp { width: 425px; height: 485px; } .corporations__img--sports { right: 8%; width: 385px; height: 439px; } .corporations__img--government { width: 285px; height: 376px; } .corporations__box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .corporations__center { width: 100%; } @media screen and (max-width: 1280px) { .corporations { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; } .corporations--sp { margin-top: 40px; overflow: hidden; } .corporations--corp { margin-top: 90px; } .corporations--gov { margin-top: 50px; } .corporations__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 90%; margin-left: 2%; } .corporations__inner--government { margin-left: 0; width: 100%; } .corporations__inner--edu { margin-left: 0%; margin-top: 40px; align-items: center; } .corporations__inner--mt { margin-left: 0%; margin-top: 40px; } .corporations__flex { display: flex; justify-content: space-between; margin-top: 70px; margin-bottom: 80px; overflow: hidden; position: static; flex-direction: column; align-items: flex-start; } .corporations__flex--100 { width: 100%; } .corporations__flex--sports { width: 100%; } .corporations__flex--mbNone { margin-bottom: 0px; } .corporations__flex--government { justify-content: space-between; align-items: flex-start; margin-left: 10%; padding-top: 32px; margin-bottom: 0px; } .corporations__flex--government-second { margin-left: 0; align-items: flex-start; margin-right: 0%; flex-direction: column-reverse !important; } .corporations__flex--ml { margin-left: 0%; padding-top: 40px; margin-bottom: 0px; width: 85%; align-items: flex-start; } .corporations__flex--mt { margin-top: 40px; } .corporations__left { display: flex; flex-direction: column; width: 90%; margin-top: 30px; z-index: 1; position: relative; } .corporations__left--sports { margin-top: 40px; } .corporations__left--second { margin-left: 10%; } .corporations__left--none { margin-top: 0px; } .corporations__title { font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 700; } .corporations__title--top { font-size: 18px; color: #008cd4; } .corporations__title--sports { font-size: 24px; margin-top: 40px; } .corporations__title--sports br { display: none; } .corporations__br { display: block; margin-top: 1.875vw; } } @media screen and (max-width: 1280px) and (max-width: 800px) { .corporations__br { margin-top: 6.4vw; } } @media screen and (max-width: 1280px) { .corporations__text { font-size: 14px; font-family: "Noto Sans JP", system-ui; font-weight: 400; margin-top: 24px; white-space: normal; line-height: 1.6; } .corporations__text--corporations { white-space: nowrap; } .corporations__text--none { margin-top: 16px; } .corporations__text--none br { display: none; } .corporations__text--government { font-size: 16px; margin-top: 24px; line-height: 1.5; width: 90%; } .corporations__text--sports br { display: none; } .corporations__img { width: 338px; aspect-ratio: 521/641; position: absolute; bottom: 25%; right: -10%; margin-top: 40px; z-index: 0; opacity: 30% !important; } .corporations__img--top { width: 255px; height: 292px; right: -10%; } .corporations__img--sp { width: 255px; height: 292px; top: 2%; right: -14%; } .corporations__img--sports { right: 8%; width: 255px; height: 292px; position: absolute; top: 120px; right: -10%; margin-top: 40px; z-index: 0; opacity: 30% !important; } .corporations__img--government { display: none; } .corporations__box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .corporations__center { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } } @media screen and (max-width: 800px) { .corporations { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; overflow: hidden; } .corporations--sp { margin-top: 40px; overflow: hidden; } .corporations--corp { margin-top: 110px; } .corporations--gov { margin-top: 70px; } .corporations__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 90%; margin-left: 2%; } .corporations__inner--government { margin-left: 0; width: 100%; } .corporations__inner--edu { margin-left: 0%; margin-top: 40px; align-items: center; } .corporations__inner--mt { margin-left: 0%; margin-top: 40px; } .corporations__flex { display: flex; justify-content: space-between; margin-top: 50px; margin-bottom: 80px; overflow: hidden; position: static; flex-direction: column; align-items: flex-start; } .corporations__flex--100 { width: 100%; } .corporations__flex--sports { width: 100%; } .corporations__flex--mbNone { margin-bottom: 0px; } .corporations__flex--government { justify-content: space-between; align-items: flex-start; margin-left: 10%; padding-top: 32px; margin-bottom: 0px; } .corporations__flex--government-second { margin-left: 0; align-items: flex-start; margin-right: 0%; flex-direction: column-reverse !important; } .corporations__flex--ml { margin-left: 17%; padding-top: 40px; margin-bottom: 0px; width: 100%; align-items: flex-start; } .corporations__flex--mt { margin-top: 40px; } .corporations__left { display: flex; flex-direction: column; width: 85%; margin-top: 30px; z-index: 1; position: relative; } .corporations__left--sports { margin-top: 40px; } .corporations__left--second { margin-left: 10%; } .corporations__left--none { margin-top: 0px; } .corporations__title { font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 700; } .corporations__title--top { font-size: 18px; color: #008cd4; } .corporations__title--sports { font-size: 24px; margin-top: 40px; } .corporations__title--sports br { display: none; } .corporations__br { display: block; margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .corporations__br { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .corporations__text { font-size: 14px; font-family: "Noto Sans JP", system-ui; font-weight: 400; margin-top: 24px; white-space: normal; line-height: 1.6; } .corporations__text--corporations { white-space: nowrap; } .corporations__text--none { margin-top: 16px; } .corporations__text--none br { display: none; } .corporations__text--government { font-size: 16px; margin-top: 24px; line-height: 1.5; width: 90%; } .corporations__text--sports br { display: none; } .corporations__img { width: 338px; aspect-ratio: 521/641; position: absolute; bottom: 25%; right: -10%; margin-top: 40px; z-index: 0; opacity: 30% !important; } .corporations__img--top { width: 255px; height: 292px; right: -10%; } .corporations__img--sp { width: 255px; height: 292px; top: 2%; right: -14%; } .corporations__img--sports { right: 8%; width: 255px; height: 292px; top: 120px; position: absolute; right: -10%; margin-top: 40px; z-index: 0; opacity: 30% !important; } .corporations__img--government { display: none; } .corporations__box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .corporations__center { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } } @media screen and (max-width: 480px) { .corporations { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; } .corporations--sp { margin-top: 40px; overflow: hidden; } .corporations--corp { margin-top: 110px; } .corporations--gov { margin-top: 70px; } .corporations__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 90%; margin-left: 2%; } .corporations__inner--government { margin-left: 0; width: 100%; } .corporations__inner--edu { margin-left: 0%; margin-top: 40px; align-items: center; } .corporations__inner--mt { margin-left: 0%; margin-top: 40px; } .corporations__flex { display: flex; justify-content: space-between; margin-top: 0px; margin-bottom: 80px; overflow: hidden; position: static; flex-direction: column; align-items: flex-start; } .corporations__flex--100 { width: 100%; } .corporations__flex--sports { width: 100%; } .corporations__flex--mbNone { margin-bottom: 0px; } .corporations__flex--government { justify-content: space-between; align-items: flex-start; margin-left: 10%; padding-top: 32px; margin-bottom: 0px; } .corporations__flex--government-second { margin-left: 0; align-items: flex-start; margin-right: 0%; flex-direction: column-reverse !important; } .corporations__flex--ml { margin-left: 17%; padding-top: 40px; margin-bottom: 0px; width: 100%; align-items: flex-start; } .corporations__flex--mt { margin-top: 40px; } .corporations__left { display: flex; flex-direction: column; width: 90%; margin-top: 40px; z-index: 1; position: relative; } .corporations__left--sports { margin-top: 40px; } .corporations__left--second { margin-left: 10%; } .corporations__left--none { margin-top: 0px; } .corporations__title { font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 700; } .corporations__title--top { font-size: 18px; color: #008cd4; } .corporations__title--sports { font-size: 24px; margin-top: 40px; } .corporations__title--sports br { display: none; } .corporations__br { display: block; margin-top: 1.875vw; } } @media screen and (max-width: 480px) and (max-width: 800px) { .corporations__br { margin-top: 6.4vw; } } @media screen and (max-width: 480px) { .corporations__text { font-size: 14px; font-family: "Noto Sans JP", system-ui; font-weight: 400; margin-top: 24px; white-space: normal; line-height: 1.6; } .corporations__text--corporations { white-space: nowrap; } .corporations__text--none { margin-top: 16px; } .corporations__text--none br { display: none; } .corporations__text--government { font-size: 16px; margin-top: 24px; line-height: 1.5; width: 90%; } .corporations__text--sports br { display: none; } .corporations__img { width: 338px; aspect-ratio: 521/641; position: absolute; bottom: 25%; right: -10%; margin-top: 40px; z-index: 0; opacity: 30% !important; } .corporations__img--top { width: 255px; height: 292px; right: -10%; } .corporations__img--sp { width: 255px; height: 292px; top: 2%; right: -14%; } .corporations__img--sports { right: 8%; width: 255px; height: 292px; position: absolute; top: 120px; right: -10%; margin-top: 40px; z-index: 0; opacity: 30% !important; } .corporations__img--government { display: none; } .corporations__box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .corporations__center { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } } .hamburger { display: none; position: relative; } .hamburger.active span:nth-of-type(1) { transform: translateY(1.1vw) rotate(45deg); } .hamburger.active span:nth-of-type(2) { opacity: 0; } .hamburger.active span:nth-of-type(3) { transform: translateY(-2vw) rotate(-45deg); } @media screen and (max-width: 800px) { .hamburger { display: block; z-index: 109000; cursor: pointer; width: 1.40625vw; height: 0.9375vw; margin-right: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { width: 4.8vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { height: 3.2vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { margin-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hamburger span { transition: all 0.5s; position: absolute; left: 0; width: 100%; height: 2px; background-color: black; 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; } @media screen and (max-width: 800px) { .drawerNav { width: 80%; padding-top: 106px; padding-left: 32px; padding-right: 32px; box-sizing: border-box; z-index: 4; } .drawerNav__menu > * + * { margin-top: 16px; } .drawerNav__menu-item--tel { margin-top: 8px; } .drawerNav__link { font-size: 16px; font-weight: 700; } .drawerNav__link--contact { background-color: #008cd4; color: white; text-align: center; padding-top: 8px; padding-bottom: 8px; border-radius: 999px; font-weight: 600; margin-top: 16px; } .drawerNav__link--tel { font-size: 16px; } .drawerNav__button { display: inline-flex !important; margin-top: 24px; } .drawer--left .drawer-nav { left: -100vw; background-color: white; } } @media screen and (max-width: 480px) { .drawerNav { width: 80%; padding-top: 106px; padding-left: 32px; padding-right: 32px; box-sizing: border-box; z-index: 4; } .drawerNav__menu > * + * { margin-top: 16px; } .drawerNav__menu-item--tel { margin-top: 8px; } .drawerNav__link { font-size: 12px; font-weight: 700; } .drawerNav__link--contact { background-color: #008cd4; color: white; text-align: center; padding-top: 8px; padding-bottom: 8px; border-radius: 999px; font-weight: 600; margin-top: 16px; } .drawerNav__link--tel { font-size: 16px; } .drawerNav__button { display: inline-flex !important; margin-top: 24px; } .drawer--left .drawer-nav { left: -100vw; background-color: white; } } .archive-about { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .archive-about__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; } .archive-about__title { font-size: 2.5vw; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 100%; text-align: start; font-family: "Bayon", system-ui; font-weight: 400; } @media screen and (max-width: 800px) { .archive-about__title { font-size: 17.0666666667vw; } } .archive-about__subtitle { font-size: 1.5625vw; width: 100%; text-align: start; } @media screen and (max-width: 800px) { .archive-about__subtitle { font-size: 4.2666666667vw; } } .work { position: relative; display: flex; justify-content: flex-start; align-items: center; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .work { margin-top: 21.3333333333vw; } } .work__inner { width: 90%; } @media screen and (max-width: 800px) { .work__inner { width: 100%; } } .work__content { width: 100%; display: flex; justify-content: space-between; } @media screen and (max-width: 800px) { .work__content { flex-direction: column; } } .work__left { position: relative; background-color: white; border-top-right-radius: 30px; border-bottom-right-radius: 30px; width: 36.875vw; height: 31.25vw; padding-top: 3.125vw; padding-bottom: 3.125vw; padding-left: 10%; } @media screen and (max-width: 800px) { .work__left { width: 86.4vw; } } @media screen and (max-width: 800px) { .work__left { height: 106.6666666667vw; } } @media screen and (max-width: 800px) { .work__left { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } } .work__left--service { width: 78.4375vw; display: flex; } @media screen and (max-width: 800px) { .work__left--service { width: 80vw; } } @media screen and (max-width: 800px) { .work__left { display: none; } } .work__numberBox { position: absolute; display: flex; align-items: center; gap: 1.25vw; } .work__number { font-size: 1.09375vw; color: black; font-family: "CircularStd-Book"; font-weight: 800; } @media screen and (max-width: 800px) { .work__number { font-size: 3.7333333333vw; } } .work__number--mt { margin-top: 0.625vw; transition: all 0.3s ease-in; } @media screen and (max-width: 800px) { .work__number--mt { margin-top: 2.1333333333vw; } } .work__title { position: absolute; top: 18%; font-size: 2.5vw; } @media screen and (max-width: 800px) { .work__title { font-size: 6.4vw; } } .work__subtitle { position: absolute; top: 29%; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .work__subtitle { font-size: 3.2vw; } } .work__text { position: absolute; top: 30%; font-size: 1.25vw; line-height: 1.5; margin-top: 4.375vw; width: 29.296875vw; } @media screen and (max-width: 800px) { .work__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .work__text { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .work__text { width: 80vw; } } .work__text--service { width: 43.4375vw; line-height: 2; } @media screen and (max-width: 800px) { .work__text--service { width: 80vw; } } .work__button { position: absolute; top: 68%; 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) { .work__button { width: 68.5333333333vw; } } @media screen and (max-width: 800px) { .work__button { height: 15.4666666667vw; } } @media screen and (max-width: 800px) { .work__button { margin-top: 8.5333333333vw; } } .work__button:hover { opacity: 60%; } .work__buttonText { font-size: 1.09375vw; color: white; margin-left: 2.578125vw; } @media screen and (max-width: 800px) { .work__buttonText { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .work__buttonText { margin-left: 8.8vw; } } .work__right { display: flex; flex-direction: column; width: 36.09375vw; } @media screen and (max-width: 800px) { .work__right { width: 80vw; } } @media screen and (max-width: 800px) { .work__right { display: none; margin-left: 10%; margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__right { margin-top: 10.6666666667vw; } } .work__flex { display: flex; align-items: flex-start; padding-top: 2.5vw; padding-bottom: 2.5vw; border-bottom: 1px solid rgba(0, 0, 0, 0.6); gap: 2.5vw; } @media screen and (max-width: 800px) { .work__flex { padding-top: 8.5333333333vw; padding-bottom: 8.5333333333vw; } } .work__flex:first-child { border-top: 1px solid rgba(0, 0, 0, 0.6); } .work__flex:hover .work__number--mt, .work__flex:hover .work__column { transform: translateX(30px); opacity: 60%; } .work__column { display: flex; flex-direction: column; gap: 0.625vw; transition: all 0.3s ease-in; } @media screen and (max-width: 800px) { .work__column { margin-left: 1.5625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__column { margin-left: 5.3333333333vw; } } .work__rihgtTitle { font-size: 1.875vw; color: black; } @media screen and (max-width: 800px) { .work__rihgtTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .work__rihgtTitle--mr { margin-right: 5.9375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__rihgtTitle--mr { margin-right: 20.2666666667vw; } } .work__rightSubtitle { font-size: 1.25vw; color: black; } @media screen and (max-width: 800px) { .work__rightSubtitle { font-size: 3.2vw; } } .work__item { display: none; } @media screen and (max-width: 800px) { .work__item { display: flex; flex-direction: column; align-items: center; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.6); gap: 2.5vw; } .work__item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.6); } } .work__expandable { display: flex; flex-direction: column; align-items: center; background-color: white; border-radius: 16px; width: 23.4375vw; margin-bottom: 2.5vw; } @media screen and (max-width: 800px) { .work__expandable { width: 80vw; } } @media screen and (max-width: 800px) { .work__expandable { margin-bottom: 8.5333333333vw; } } .work__flexSp { display: flex; align-items: flex-start; padding-top: 2.5vw; padding-bottom: 2.5vw; width: 80%; cursor: pointer; } @media screen and (max-width: 800px) { .work__flexSp { padding-top: 8.5333333333vw; padding-bottom: 8.5333333333vw; } } .work__rightSp { display: none; } @media screen and (max-width: 800px) { .work__rightSp { display: block; display: flex; flex-direction: column; width: 100%; margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__rightSp { margin-top: 10.6666666667vw; } } .work__textSp { display: none; } @media screen and (max-width: 800px) { .work__textSp { display: block; font-size: 1.25vw; line-height: 1.5; margin-top: 4.375vw; width: 20.3125vw; text-align: start; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__textSp { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__textSp { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__textSp { width: 69.3333333333vw; } } .work .work__plus { position: relative; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .work .work__plus { margin-top: 2.1333333333vw; } } .work .work__plus svg { position: absolute; top: 0; left: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .work .work__plus .plus-icon { opacity: 1; transform: rotate(0deg); } .work .work__plus .minus-icon { opacity: 0; transform: rotate(-90deg); } .work .work__plus.active .plus-icon { opacity: 0; transform: rotate(90deg); } .work .work__plus.active .minus-icon { opacity: 1; transform: rotate(0deg); margin-top: 0.46875vw; } @media screen and (max-width: 800px) { .work .work__plus.active .minus-icon { margin-top: 1.6vw; } } .work__buttonSp { display: none; } @media screen and (max-width: 800px) { .work__buttonSp { display: block; display: flex; align-items: center; gap: 3.75vw; width: 20.078125vw; height: 4.53125vw; margin-top: 4.375vw; margin-bottom: 1.875vw; border-radius: 999px; background: var(--gradient); } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__buttonSp { width: 68.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__buttonSp { height: 15.4666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__buttonSp { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .work__buttonSp { margin-bottom: 6.4vw; } } .hidden { opacity: 0; transition: opacity 0.3s ease-in-out; } @font-face { font-family: "NotoSerifJP-Light"; src: url("../fonts/NotoSansJP/NotoSerifJP-Light.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "NotoSerifJP-Medium"; src: url("../fonts/NotoSansJP/NotoSerifJP-Medium.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "NotoSerifJP-Regular"; src: url("../fonts/NotoSerifJP/NotoSerifJP-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SweetSansProMedium"; font-weight: normal; src: url("../fonts/SweetSansProMedium.woff") format("woff"); font-style: normal; } @font-face { font-family: "SweetSansProRegular"; font-weight: normal; src: url("../fonts/SweetSansProRegular.woff") format("woff"); font-style: normal; } @font-face { font-family: "CircularStd-Book"; font-weight: 800; src: url("../fonts/CircularStd-Book.woff") format("woff"); font-style: normal; } @font-face { font-family: "Manrope-Bold"; font-weight: 600; src: url("../fonts/Manrope-Bold.woff") format("woff"); font-style: bold; } @font-face { src: url("../fonts/Bayon/Bayon-Regular.ttf") format("truetype"); font-family: "Bayon"; font-weight: 400; font-optical-sizing: auto; } .message { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: 40px; margin-top: -10%; z-index: 1; } .message--top { padding-top: 0px; } .message__img { width: 100%; } .message__content { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; position: relative; z-index: 1; } .message__content::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-color: #f5f5f5; z-index: -1; } .message__title { color: #008cd4; font-size: 32px; font-family: "Bayon", system-ui; font-weight: 400; z-index: 2; line-height: 1; } .message__subtitle { font-size: 16px; margin-top: 8px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; z-index: 2; } .message__heading { position: relative; margin-top: 40px; } .message__colon { position: absolute; top: -20%; left: -24%; } .message__colonSp { display: none; } .message__colonOther { position: absolute; bottom: -20%; right: -28%; } .message__headingText { font-size: 32px; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; color: #008cd4; } .message__headingText br { display: none; } @media screen and (max-width: 1280px) { .message__headingText { font-size: 28px; } } .message__inner { display: flex; justify-content: space-between; align-items: flex-start; width: 80%; margin-top: 40px; z-index: 2; } .message__imgWrapper { width: 391px; aspect-ratio: 427/391; border-radius: 15px; } .message__right { width: 533px; margin-top: 0px; display: flex; flex-direction: column; } .message__rightTitle { color: #fff; font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 24px; } .message__border { margin-top: 24px; width: 533px; } .message__text { font-size: 16px; color: black; margin-top: 64px; padding-bottom: 48px; line-height: 2; width: 80%; } @media screen and (max-width: 800px) { .message { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: 40px; margin-top: -10%; z-index: 1; } .message--top { padding-top: 0px; } .message__img { width: 100%; } .message__content { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; } .message__title { color: #008cd4; font-size: 32px; font-family: "Bayon", system-ui; font-weight: 400; z-index: 2; line-height: 1; } .message__subtitle { font-size: 16px; margin-top: 0px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; z-index: 2; } .message__heading { position: relative; margin-top: 40px; } .message__colon { display: none; } .message__colonSp { display: block; position: absolute; top: -26%; left: -17%; width: 26px; height: 24px; } .message__colonOther { position: absolute; bottom: -17%; right: -16%; width: 26px; height: 24px; } .message__headingText { font-size: 28px; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; color: #008cd4; } .message__headingText br { display: block; } .message__inner { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 80%; margin-top: 80px; z-index: 2; } .message__imgWrapper { width: 300px; aspect-ratio: 391/427; border-radius: 15px; } .message__right { width: 300px; margin-top: 32px; display: flex; flex-direction: column; } .message__rightTitle { color: #fff; font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 24px; } .message__border { margin-top: 24px; width: 300px; } .message__text { font-size: 14px; color: black; margin-top: 40px; padding-bottom: 56px; line-height: 1.5; width: 80%; } } @media screen and (max-width: 480px) { .message { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: 40px; margin-top: -10%; z-index: 1; } .message--top { padding-top: 0px; } .message__img { width: 100%; } .message__content { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; } .message__title { color: #008cd4; font-size: 32px; font-family: "Bayon", system-ui; font-weight: 400; z-index: 2; line-height: 1; } .message__subtitle { font-size: 16px; margin-top: 0px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; z-index: 2; } .message__heading { position: relative; margin-top: 40px; } .message__colon { display: none; } .message__colonSp { display: block; position: absolute; top: -26%; left: -17%; width: 26px; height: 24px; } .message__colonOther { position: absolute; bottom: -17%; right: -16%; width: 26px; height: 24px; } .message__headingText { font-size: 20px; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; color: #008cd4; } .message__headingText br { display: block; } .message__inner { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 80%; margin-top: 80px; z-index: 2; } .message__imgWrapper { width: 300px; aspect-ratio: 391/427; border-radius: 15px; } .message__right { width: 300px; margin-top: 32px; display: flex; flex-direction: column; } .message__rightTitle { color: #fff; font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 24px; } .message__border { margin-top: 24px; width: 300px; } .message__text { font-size: 14px; color: black; margin-top: 40px; padding-bottom: 56px; line-height: 1.5; width: 80%; } } #message { scroll-margin-top: -250px; } @media screen and (max-width: 1280px) { #message { scroll-margin-top: -230px; } } @media screen and (max-width: 800px) { #message { scroll-margin-top: -130px; } } @media screen and (max-width: 480px) { #message { scroll-margin-top: -100px; } } .underHeader { position: relative; width: 100%; margin-top: 62px; height: 670px; } .underHeader--single { height: 360px; } @media screen and (max-width: 1280px) { .underHeader { height: 470px; } .underHeader--single { height: 310px; } } .underHeader--mtNone { margin-top: 0px; } .underHeader__imgWrapper { width: 100%; aspect-ratio: 1280/425; height: 100%; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .underHeader__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .underHeader__imgSp { display: none; } .underHeader__textBox { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 80%; position: absolute; bottom: 50%; transform: translateY(50%); left: 10%; } .underHeader__textBox--corporations { bottom: 52.5%; } .underHeader__textBox--about { bottom: 50%; transform: translateY(50%); } @media screen and (max-width: 1280px) { .underHeader__textBox { width: 90%; } } .underHeader__title { color: white; background-color: #008cd4; font-family: "Bayon", system-ui; font-weight: 400; line-height: 1; font-size: 80px; padding-left: 16px; padding-right: 16px; } .underHeader__title br { display: none; } @media screen and (max-width: 1280px) { .underHeader__title { font-size: 56px; } } .underHeader__text { font-size: 20px; margin-top: 8px; padding-left: 24px; padding-right: 24px; padding-top: 6px; padding-bottom: 6px; color: #008cd4; background-color: white; font-family: "Noto Sans JP", system-ui; font-weight: 800; } @media screen and (max-width: 1280px) { .underHeader__text { font-size: 16px; } } .underHeader__text--under { background: transparent; padding-left: 0px; padding-right: 0px; font-weight: 400; width: 77%; font-size: 20px; position: relative; line-height: 1.8; color: white; z-index: 2; position: relative; } .underHeader__text--under::before { content: attr(data-text); position: absolute; top: 3.5%; left: 0; width: 100%; color: black; filter: blur(3px); z-index: -1; white-space: pre-line; line-height: 0.9; font-size: inherit; font-weight: inherit; font-family: inherit; pointer-events: none; } @media screen and (max-width: 1280px) { .underHeader__text--under { font-size: 12px; width: 100%; } } .underHeader__textSp { display: none; } @media screen and (max-width: 800px) { .underHeader { position: relative; width: 100%; margin-top: 52px; } .underHeader--single { height: 180px; } .underHeader--mtNone { margin-top: 0px; } .underHeader__imgWrapper { width: 100%; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; aspect-ratio: 1280/425; } .underHeader__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .underHeader__imgSp { display: none; } .underHeader__textBox { position: absolute; bottom: 5%; left: 10%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 80%; transform: translateY(0%); } .underHeader__textBox--corporations { bottom: 9%; } .underHeader__textBox--single { bottom: 20%; } .underHeader__textBox--about { bottom: 10%; transform: translateY(0%); } .underHeader__title { font-size: 24px; color: white; background-color: #008cd4; font-family: "Bayon", system-ui; font-weight: 400; padding-left: 16px; padding-right: 16px; padding-top: 6px; padding-bottom: 6px; line-height: 1; display: block; } .underHeader__text { font-size: 16px; color: #008cd4; background-color: white; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 8px; padding-left: 24px; padding-right: 24px; padding-top: 6px; padding-bottom: 6px; } .underHeader__text--under { background: transparent; padding-left: 0px; padding-right: 0px; font-weight: 400; width: 100%; font-size: 10px; position: relative; line-height: 1.8; color: white; z-index: 2; } .underHeader__text--under br { display: none; } .underHeader__text--under::before { content: attr(data-text); position: absolute; top: 3.5%; left: 0; width: 100%; color: black; filter: blur(3px); z-index: -1; white-space: pre-line; font-size: inherit; font-weight: inherit; font-family: inherit; pointer-events: none; white-space: normal; line-height: 1.74; } .underHeader__textSp { display: block; font-size: 20px; color: #008cd4; background-color: white; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 8px; padding-left: 24px; padding-right: 24px; padding-top: 6px; padding-bottom: 6px; } } @media screen and (max-width: 480px) { .underHeader { position: relative; width: 100%; margin-top: 52px; } .underHeader--mtNone { margin-top: 0px; } .underHeader__imgWrapper { width: 100%; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; aspect-ratio: 375/300; } .underHeader__img { display: none; } .underHeader__imgSp { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .underHeader__textBox { position: absolute; bottom: 5%; left: 10%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 80%; } .underHeader__textBox--corporations { bottom: 9.5%; } .underHeader__textBox--about { bottom: 10%; } .underHeader__title { font-size: 32px; color: white; background-color: #008cd4; font-family: "Bayon", system-ui; font-weight: 400; padding-left: 16px; padding-right: 16px; padding-top: 6px; padding-bottom: 6px; line-height: 1; display: block; } .underHeader__text { font-size: 16px; color: #008cd4; background-color: white; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 8px; padding-left: 24px; padding-right: 24px; padding-top: 6px; padding-bottom: 6px; } .underHeader__text--under { background: transparent; padding-left: 0px; padding-right: 0px; font-weight: 400; width: 100%; font-size: 12px; position: relative; line-height: 1.8; color: white; z-index: 2; } .underHeader__text--under br { display: none; } .underHeader__text--under::before { content: attr(data-text); position: absolute; top: 3.5%; left: 0; width: 100%; color: black; filter: blur(3px); z-index: -1; white-space: pre-line; font-size: inherit; font-weight: inherit; font-family: inherit; pointer-events: none; white-space: normal; line-height: 1.74; } .underHeader__textSp { display: block; font-size: 20px; color: #008cd4; background-color: white; font-family: "Noto Sans JP", system-ui; font-weight: 800; margin-top: 8px; padding-left: 24px; padding-right: 24px; padding-top: 6px; padding-bottom: 6px; } } .company { position: relative; display: flex; flex-direction: column; width: 80%; margin-top: 64px; z-index: 2; } .company--back { background-color: #fff; border-radius: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; margin-top: 24px; } .company--sports { width: 100%; background-color: #fff; border-radius: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; margin-top: 24px; } .company--sports:first-child { margin-top: 64px; } .company__back { display: flex; align-items: center; flex-direction: column; padding-bottom: 112px; width: 100%; background-color: #f5f5f5; } .company__title { color: #008cd4; font-size: 32px; font-family: "Bayon"; font-weight: 400; line-height: 1.4; text-align: start; white-space: nowrap; } .company__title--number { font-size: 32px; width: 30px; } .company__subtitle { font-size: 24px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .company__subtitle--mb { margin-bottom: 7px; } .company__subtitle--sports { font-size: 24px; margin-bottom: 4px; } .company__subtitle--sports br { display: none; } .company__buttonClick, .company__buttonClickSports { cursor: pointer; } .company__button, .company__buttonSports, .company .government__svg { transition: transform 0.3s ease; cursor: pointer; } .company__button.rotate, .company__buttonSports.rotate, .company .government__svg.rotate { transform: rotate(180deg); } .company .company-profile .company__button { transition: transform 0.3s ease; } .company .company-profile .company__button.rotate { transform: rotate(180deg); } .company__button { width: 28px; height: 28px; } .company__center { display: none; } .company__center.is-active { display: flex; justify-content: center; } .company__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 81%; margin-top: 40px; } .company__inner--04 { margin-top: 16px; } .company__borderLine { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); } .company__row { display: flex; align-items: flex-start; margin-top: 16px; margin-bottom: 16px; } .company__row--sports { margin-top: 0px; margin-bottom: 0px; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid rgba(0, 0, 0, 0.2); } .company__flex { display: flex; align-items: center; margin-top: 8px; width: 100%; gap: 24px; } .company__flex--ml { margin-left: 20%; margin-bottom: 56px; } .company__flex:first-child { margin-top: 0px; } .company__flex--corp { margin-top: 112px; } .company__flex--flex { flex-direction: row; align-items: center; gap: 16px; } .company__flex2 { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; } .company__dataTitle { font-size: 16px; width: 232px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; flex-shrink: 0; } .company__dataColumn { display: flex; flex-direction: column; margin-left: 80px; } @media screen and (max-width: 1280px) { .company__dataColumn { margin-left: 0px; } } .company__dataFlex { display: flex; } @media screen and (max-width: 1280px) { .company__dataFlex { margin-bottom: 8px; flex-direction: column; justify-content: flex-start; } .company__dataFlex:last-child { margin-top: 0px; } } .company__data { font-size: 16px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; line-height: 1.5; flex-shrink: 0; } .company__data--pc { width: 32px; margin-right: 32px; } .company__data--width { width: 200px; margin-right: 32px; } .company__data--mt { margin-top: 4px; } .company__data--pb { margin-bottom: 16px; } .company__data--mt24 { margin-top: 24px; } .company__data--underline { text-decoration: underline; } .company__data a { font-size: 16px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; line-height: 1.5; flex-shrink: 0; text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } @supports not (text-underline-offset: 0.2em) { .company__data a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2em; } } .company__map { display: flex; align-items: center; margin-top: 8px; gap: 8px; } .company__map:hover .company__mapText { opacity: 60%; } .company__mapText { font-size: 16px; color: #336699; transition: all 0.25s ease-in; text-decoration: underline; } @media screen and (max-width: 800px) { .company { position: relative; display: flex; flex-direction: column; width: 85%; margin-top: 40px; z-index: 2; } .company--back { background-color: #fff; border-radius: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; margin-top: 16px; width: 80%; } .company--sports { width: 100%; background-color: #fff; border-radius: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; margin-top: 16px; } .company--sports:first-child { margin-top: 40px; } .company__back { display: flex; align-items: center; flex-direction: column; padding-bottom: 80px; width: 100%; background-color: #f5f5f5; } .company__title { color: #008cd4; font-size: 32px; font-family: "Bayon"; font-weight: 400; line-height: 1; text-align: start; white-space: nowrap; } .company__title--number { font-size: 32px; } .company__subtitle { font-size: 16px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .company__subtitle--mb { margin-bottom: 0px; } .company__subtitle--sports { font-size: 16px; margin-bottom: 4px; } .company__subtitle--sports br { display: block; } .company__buttonClick, .company__buttonClickSports { cursor: pointer; } .company__button, .company__buttonSports, .company .government__svg { transition: transform 0.3s ease; cursor: pointer; } .company__button.rotate, .company__buttonSports.rotate, .company .government__svg.rotate { transform: rotate(180deg); } .company .company-profile .company__button { transition: transform 0.3s ease; } .company .company-profile .company__button.rotate { transform: rotate(180deg); } .company__button { width: 28px; height: 28px; } .company__center { display: none; } .company__center.is-active { display: flex; justify-content: center; } .company__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top: 32px; } .company__inner--04 { margin-top: 16px; } .company__borderLine { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); } .company__row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; margin-bottom: 8px; } .company__row--sports { margin-top: 0px; margin-bottom: 0px; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid rgba(0, 0, 0, 0.2); } .company__flex { display: flex; align-items: flex-start; flex-direction: column; margin-top: 8px; width: 100%; gap: 0px; } .company__flex--ml { margin-left: 20%; margin-bottom: 32px; } .company__flex:first-child { margin-top: 0px; } .company__flex--corp { margin-top: 80px; } .company__flex--flex { flex-direction: row; align-items: center; gap: 16px; } .company__flex--width { width: 90%; } .company__flex2 { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; gap: 32px; margin-top: 0px; } .company__dataTitle { font-size: 16px; width: 232px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; flex-shrink: 0; } .company__dataColumn { display: flex; flex-direction: column; margin-left: 0px; } .company__dataFlex { display: flex; flex-direction: column; } .company__data { font-size: 14px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; line-height: 1.5; flex-shrink: 0; margin-top: 8px; } .company__data--pc { width: 144px; margin-right: 16px; } .company__data--width { width: 200px; margin-right: 16px; } .company__data--mt { margin-top: 4px; } .company__data--pb { margin-bottom: 16px; } .company__data--mt24 { margin-top: 24px; } .company__data--underline { text-decoration: underline; } .company__data a { font-size: 14px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; line-height: 1.5; flex-shrink: 0; text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } @supports not (text-underline-offset: 0.2em) { .company__data a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2em; } } .company__map { display: flex; align-items: center; margin-top: 8px; gap: 8px; } .company__map:hover .company__mapText { opacity: 60%; } .company__mapText { font-size: 16px; color: #336699; transition: all 0.25s ease-in; text-decoration: underline; } } @media screen and (max-width: 480px) { .company { position: relative; display: flex; flex-direction: column; width: 85%; margin-top: 40px; z-index: 2; } .company--back { background-color: #fff; border-radius: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; margin-top: 16px; width: 80%; } .company--sports { width: 100%; background-color: #fff; border-radius: 10px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; margin-top: 16px; } .company--sports:first-child { margin-top: 40px; } .company__back { display: flex; align-items: center; flex-direction: column; padding-bottom: 80px; width: 100%; background-color: #f5f5f5; } .company__title { color: #008cd4; font-size: 32px; font-family: "Bayon"; font-weight: 400; line-height: 1; text-align: start; white-space: nowrap; } .company__title--number { font-size: 32px; } .company__subtitle { font-size: 16px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 800; } .company__subtitle--mb { margin-bottom: 0px; } .company__subtitle--sports { font-size: 16px; margin-bottom: 4px; } .company__subtitle--sports br { display: block; } .company__buttonClick, .company__buttonClickSports { cursor: pointer; } .company__button, .company__buttonSports, .company .government__svg { transition: transform 0.3s ease; cursor: pointer; } .company__button.rotate, .company__buttonSports.rotate, .company .government__svg.rotate { transform: rotate(180deg); } .company .company-profile .company__button { transition: transform 0.3s ease; } .company .company-profile .company__button.rotate { transform: rotate(180deg); } .company__button { width: 28px; height: 28px; } .company__center { display: none; } .company__center.is-active { display: flex; justify-content: center; } .company__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top: 32px; } .company__inner--04 { margin-top: 16px; } .company__borderLine { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); } .company__row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; margin-bottom: 8px; } .company__row--sports { margin-top: 0px; margin-bottom: 0px; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid rgba(0, 0, 0, 0.2); } .company__flex { display: flex; align-items: flex-start; flex-direction: column; margin-top: 8px; width: 100%; gap: 0px; } .company__flex--ml { margin-left: 20%; margin-bottom: 32px; } .company__flex:first-child { margin-top: 0px; } .company__flex--corp { margin-top: 80px; } .company__flex--flex { flex-direction: row; align-items: center; gap: 16px; } .company__flex--width { width: 90%; } .company__flex2 { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; gap: 32px; margin-top: 0px; } .company__dataTitle { font-size: 16px; width: 232px; color: #008cd4; font-family: "Noto Sans JP", system-ui; font-weight: 800; flex-shrink: 0; } .company__dataColumn { display: flex; flex-direction: column; margin-left: 0px; } .company__dataFlex { display: flex; flex-direction: column; } .company__data { font-size: 14px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; line-height: 1.5; flex-shrink: 0; margin-top: 8px; } .company__data--pc { width: 144px; margin-right: 16px; } .company__data--width { width: 200px; margin-right: 16px; } .company__data--mt { margin-top: 4px; } .company__data--pb { margin-bottom: 16px; } .company__data--mt24 { margin-top: 24px; } .company__data--underline { text-decoration: underline; } .company__data a { font-size: 14px; color: black; font-family: "Noto Sans JP", system-ui; font-weight: 500; line-height: 1.5; flex-shrink: 0; text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } @supports not (text-underline-offset: 0.2em) { .company__data a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2em; } } .company__map { display: flex; align-items: center; margin-top: 8px; gap: 8px; } .company__map:hover .company__mapText { opacity: 60%; } .company__mapText { font-size: 16px; color: #336699; transition: all 0.25s ease-in; text-decoration: underline; } } #profile { scroll-margin-top: 20px; } @media screen and (max-width: 1280px) { #profile { scroll-margin-top: 20px; } } @media screen and (max-width: 800px) { #profile { scroll-margin-top: -10px; } } @media screen and (max-width: 480px) { #profile { scroll-margin-top: -10px; } } .courses { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 80px; padding-bottom: 80px; background-color: rgba(34, 190, 72, 0.05); } .courses--archive { padding-top: 0px; padding-bottom: 80px; background-color: white; } .courses__back { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .courses__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; } .courses__box { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 16px; } .courses__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; width: 100%; } .courses__grid-item { width: 100%; } .courses__grid--corp { width: 80%; } @media screen and (max-width: 1280px) { .courses__grid--corp { width: 90%; } } .courses__content { position: relative; display: block; width: 100%; z-index: 2; } .courses__imgWrapper { width: 100%; overflow: hidden; border-radius: 16px; aspect-ratio: 560/240; } .courses__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .courses__content:hover .courses__img { transform: scale(1.1); } .courses__content:hover .courses__img { transform: scale(1.1); } .courses__right { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; border-radius: 16px; } .courses__number { font-size: 32px; width: 182px; margin-top: 24px; margin-left: 40px; padding-top: 4px; line-height: 1.2; border: 1px solid white; font-family: "Bayon", system-ui; font-weight: 400; color: white; text-align: center; } .courses__number--education { margin-top: 32px; margin-left: 24px; padding-top: 4px; } @media screen and (max-width: 1280px) { .courses__number { font-size: 24px; margin-top: 16px; } } .courses__contentTitle { font-size: 32px; font-family: "Noto Sans JP", system-ui; font-weight: 700; color: white; margin-top: 8px; margin-left: 40px; } .courses__contentTitle--education { margin-top: 8px; margin-left: 24px; } @media screen and (max-width: 1280px) { .courses__contentTitle { font-size: 24px; } } .courses__text { font-size: 14px; color: white; line-height: 1.5; margin-top: 16px; width: 73%; margin-left: 40px; } .courses__text--education { margin-top: 8px; margin-left: 24px; } .courses__text p { font-size: 14px; color: white; line-height: 1.5; } @media screen and (max-width: 1280px) { .courses__text p { font-size: 12px; } } .courses__end { display: flex; justify-content: end; align-items: center; margin-right: 24px; margin-top: 16px; } .courses__button { font-size: 12px; margin-right: 24px; color: white; } @media screen and (max-width: 800px) { .courses { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 80px; padding-bottom: 80px; background-color: rgba(34, 190, 72, 0.05); } .courses--archive { padding-top: 0px; padding-bottom: 80px; background-color: white; } .courses__back { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .courses__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; } .courses__box { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 16px; } .courses__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 8px; margin-top: 32px; width: 100%; } .courses__grid-item { width: 100%; } .courses__grid--corp { width: 90%; } .courses__content { position: relative; display: block; width: 100%; z-index: 2; flex-direction: column; } .courses__imgWrapper { width: 100%; overflow: hidden; border-radius: 16px; aspect-ratio: 560/220; } .courses__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .courses__content:hover .courses__img { transform: scale(1.1); } .courses__content:hover .courses__img { transform: scale(1.1); } .courses__right { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; border-radius: 16px; } .courses__number { font-size: 24px; width: 120px; margin-top: 16px; margin-left: 16px; padding-top: 4px; line-height: 1.2; border: 1px solid white; font-family: "Bayon", system-ui; font-weight: 400; color: white; text-align: center; } .courses__number--education { margin-top: 16px; margin-left: 16px; padding-top: 2px; } .courses__contentTitle { font-size: 16px; font-family: "Noto Sans JP", system-ui; font-weight: 700; color: white; margin-top: 8px; margin-left: 16px; } .courses__contentTitle--education { font-size: 20px; margin-top: 16px; margin-left: 16px; } .courses__text { font-size: 12px; color: white; line-height: 1.5; margin-top: 8px; width: 100%; margin-left: 16px; } .courses__text--education { margin-top: 8px; margin-left: 16px; } .courses__text p { font-size: 14px; color: white; line-height: 1.5; } .courses__end { display: flex; justify-content: end; align-items: center; margin-right: 24px; margin-top: 8px; } .courses__button { font-size: 12px; margin-right: 24px; color: white; } } @media screen and (max-width: 480px) { .courses { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 80px; padding-bottom: 80px; background-color: rgba(34, 190, 72, 0.05); } .courses--archive { padding-top: 0px; padding-bottom: 80px; background-color: white; } .courses__back { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .courses__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; } .courses__box { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 16px; } .courses__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 8px; margin-top: 32px; width: 100%; } .courses__grid-item { width: 100%; } .courses__grid--corp { width: 90%; } .courses__content { position: relative; display: block; width: 100%; z-index: 2; flex-direction: column; } .courses__imgWrapper { width: 100%; overflow: hidden; border-radius: 16px; aspect-ratio: 560/220; } .courses__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .courses__content:hover .courses__img { transform: scale(1.1); } .courses__content:hover .courses__img { transform: scale(1.1); } .courses__right { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; border-radius: 16px; } .courses__number { font-size: 24px; width: 120px; margin-top: 16px; margin-left: 16px; padding-top: 4px; line-height: 1.2; border: 1px solid white; font-family: "Bayon", system-ui; font-weight: 400; color: white; text-align: center; } .courses__number--education { margin-top: 8px; margin-left: 16px; padding-top: 2px; } .courses__contentTitle { font-size: 16px; font-family: "Noto Sans JP", system-ui; font-weight: 700; color: white; margin-top: 8px; margin-left: 16px; } .courses__contentTitle--education { margin-top: 8px; margin-left: 16px; } .courses__text { font-size: 12px; color: white; line-height: 1.5; margin-top: 8px; width: 280px; margin-left: 16px; } .courses__text--education { margin-top: 8px; margin-left: 16px; } .courses__text p { font-size: 12px; color: white; line-height: 1.5; } .courses__end { display: flex; justify-content: end; align-items: center; margin-right: 24px; margin-top: 8px; } .courses__button { font-size: 12px; margin-right: 24px; color: white; } } .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__contents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.125vw; padding-bottom: 6.25vw; } @media screen and (max-width: 800px) { .knowledge-top__contents { padding-bottom: 21.3333333333vw; } } @media screen and (max-width: 800px) { .knowledge-top__contents { grid-template-columns: 1fr; gap: 40px; } } .knowledge-top__content { display: flex; flex-direction: column; box-shadow: -1px 0px 16px 0px rgba(0, 0, 0, 0.05), 2px 2px 16px 0px rgba(0, 0, 0, 0.05); border-radius: 15px; overflow: hidden; width: 24.140625vw; } @media screen and (max-width: 800px) { .knowledge-top__content { width: 74.6666666667vw; } } .knowledge-top__content:first-of-type { margin-left: 0.3125vw; } @media screen and (max-width: 800px) { .knowledge-top__content:first-of-type { margin-left: 1.0666666667vw; } } @media screen and (max-width: 800px) { .knowledge-top__content { margin-right: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .knowledge-top__content { margin-right: 4.2666666667vw; } } .knowledge-top__imgWrapper { position: relative; overflow: hidden; position: relative; width: 100%; } .knowledge-top__imgWrapper::before { display: block; content: ""; padding-top: 48.5436893204%; } .knowledge-top__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .knowledge-top__date { font-size: 1.09375vw; color: black; } @media screen and (max-width: 800px) { .knowledge-top__date { font-size: 3.7333333333vw; } } .knowledge-top__flex { display: flex; justify-content: space-between; align-items: center; margin-top: 0.625vw; border-top: 0.5px solid #cccccc; padding-top: 0.625vw; } @media screen and (max-width: 800px) { .knowledge-top__flex { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .knowledge-top__flex { padding-top: 2.1333333333vw; } } .knowledge-top__img { transition: all 0.25s ease-in; } .knowledge-top__under { padding-top: 1.25vw; padding-bottom: 1.25vw; padding-left: 1.25vw; padding-right: 1.25vw; } @media screen and (max-width: 800px) { .knowledge-top__under { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .knowledge-top__under { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } .knowledge-top__underText { font-size: 1.09375vw; color: black; } @media screen and (max-width: 800px) { .knowledge-top__underText { font-size: 3.7333333333vw; } } .knowledge-top__text { font-size: 1.25vw; color: white; margin-top: 1.25vw; opacity: 50%; } @media screen and (max-width: 800px) { .knowledge-top__text { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .knowledge-top__text { margin-top: 6.4vw; } } .knowledge-top__text span { display: inline-block; font-size: inherit; font-weight: inherit; letter-spacing: inherit; font-family: inherit; line-height: inherit; } @media screen and (max-width: 800px) { .knowledge-top__text { text-align: center; line-height: 1.5; width: 100%; } .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; } } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 0; z-index: 3; height: 5px; width: 70%; } .swiper-scrollbar { position: absolute; top: 94%; left: 0; width: 70%; height: 4px; background: #7f7f7f; opacity: 1 !important; transition: none !important; } .swiper-scrollbar-horizontal { background: #e5e5e5 !important; } .swiper-scrollbar-drag { background: linear-gradient(to right, #005c8a, #008cd4); height: 100%; position: absolute; left: 0; /* 位置を左に固定 */ width: 0; transition: width 0.3s, transform 0.3s; /* transformの変更にアニメーションを適用 */ } .swiper-scrollbar-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, .swiper-button-prev { width: 48px; height: 48px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 94%; z-index: 3; font-size: 20px; color: #000; border: 1px solid rgb(199, 199, 199); } .swiper-button-next::after, .swiper-button-prev::after { content: "←"; font-size: 13px; } .swiper-button-next::after { transform: rotate(180deg); } .swiper-button-next { right: 13%; } .swiper-button-prev { left: 77%; } @media (max-width: 768px) { .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 0; z-index: 3; height: 5px; width: 65%; } .swiper-scrollbar { top: 93%; } .swiper-button-next, .swiper-button-prev { width: 25px; height: 25px; } .swiper-button-prev { left: 70%; } .swiper-button-next { right: 10%; } } .knowledge__contents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.125vw; margin-top: 4.375vw; } @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__contents3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.125vw; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .knowledge__contents3 { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .knowledge__contents3 { grid-template-columns: 1fr; gap: 40px; } } .knowledge__contents4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.125vw; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .knowledge__contents4 { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .knowledge__contents4 { 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__content { display: flex; flex-direction: column; width: 24.140625vw; } @media screen and (max-width: 800px) { .knowledge__content { width: 80vw; } } .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; align-items: center; gap: 0.9375vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .knowledge__flex { margin-top: 4.2666666667vw; } } .knowledge__flex--top { margin-top: 0vw; } @media screen and (max-width: 800px) { .knowledge__flex--top { margin-top: 0vw; } } @media screen and (max-width: 800px) { .knowledge__flex { gap: 3.125vw; } } .knowledge__date { font-size: 1.25vw; color: black; opacity: 60%; } @media screen and (max-width: 800px) { .knowledge__date { font-size: 4.2666666667vw; } } .knowledge__title { font-size: 1.25vw; color: black; margin-top: 1.25vw; font-weight: 700; line-height: 1.5; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; height: 3em; min-height: 3em; max-height: 3em; display: flex; flex-direction: column; justify-content: center; } @media screen and (max-width: 800px) { .knowledge__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .knowledge__title { margin-top: 4.2666666667vw; } } .knowledge__text { font-size: 1.25vw; color: black; margin-top: 1.25vw; padding-bottom: 1.25vw; border-bottom: 0.5px solid #cccccc; line-height: 1.8; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; height: 3.6em; min-height: 3.6em; max-height: 3.6em; display: flex; flex-direction: column; justify-content: center; } @media screen and (max-width: 800px) { .knowledge__text { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .knowledge__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .knowledge__text { padding-bottom: 4.2666666667vw; } } .knowledge__text--top { height: 3.6em; min-height: 3.6em; max-height: 3.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-bottom: 0vw; border-bottom: 0px solid #cccccc; } @media screen and (max-width: 800px) { .knowledge__text--top { padding-bottom: 0vw; } } .knowledge__text--sports { border-bottom: 0px; } .knowledge__under { display: flex; align-items: center; gap: 1.25vw; margin-top: 0.9375vw; } @media screen and (max-width: 800px) { .knowledge__under { margin-top: 3.2vw; } } .knowledge__under--first { margin-top: 1.25vw; } @media screen and (max-width: 800px) { .knowledge__under--first { margin-top: 4.2666666667vw; } } .knowledge__underTitle { font-size: 0.9375vw; background-color: #333333; text-align: center; color: white; width: 7.5vw; padding-top: 0.46875vw; padding-bottom: 0.46875vw; } @media screen and (max-width: 800px) { .knowledge__underTitle { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .knowledge__underTitle { width: 25.6vw; } } @media screen and (max-width: 800px) { .knowledge__underTitle { padding-top: 1.6vw; padding-bottom: 1.6vw; } } .knowledge__place { font-size: 0.9375vw; color: black; width: 7.5vw; } @media screen and (max-width: 800px) { .knowledge__place { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .knowledge__place { width: 25.6vw; } } .sports { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; background-color: #f5f5f5; overflow: hidden; } .sports__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; } .sports__text { font-size: 1.875vw; line-height: 1.5; font-weight: 700; text-align: center; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .sports__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .sports__text { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .sports__text { width: 80%; } .sports__text br { display: none; } } .sports__header { display: flex; align-items: center; justify-content: center; gap: 3.125vw; margin-top: 3.75vw; } @media screen and (max-width: 800px) { .sports__header { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .sports__header { gap: 1.875vw; } } .sports__header.is-active { display: none; } .sports__headerTitle { font-size: 1.25vw; width: 12.65625vw; font-size: 26px; width: 280px; border-radius: 4px; border: 3px solid #cccccc; color: black; text-align: center; padding-top: 0.625vw; padding-bottom: 0.625vw; cursor: pointer; } @media screen and (max-width: 800px) { .sports__headerTitle { font-size: 2.4vw; } } @media screen and (max-width: 800px) { .sports__headerTitle { width: 29.8666666667vw; } } @media screen and (max-width: 800px) { .sports__headerTitle { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 1280px) { .sports__headerTitle { font-size: 20px; width: 200px; } } @media screen and (max-width: 800px) { .sports__headerTitle { font-weight: 500; border: 1px solid #cccccc; } } .sports .sports__headerTitle.active { border: 3px solid #008cd4; background-color: #008cd4; color: white; cursor: pointer; } .topNews { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; overflow: hidden; padding-bottom: 100px; } .topNews__inner { display: flex; flex-direction: column; width: 88%; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } @media screen and (max-width: 800px) { .topNews__inner { grid-template-columns: repeat(1, 1fr); width: 108%; row-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; } } .topNews__card { position: relative; width: 100%; border-radius: 8px; overflow: hidden; display: block; } .topNews__card:hover .topNews__img { transform: scale(1.05); } .topNews__img { width: 100%; height: auto; transition: all 0.25s ease-in; border-radius: 8px; -o-object-fit: cover; object-fit: cover; display: block; } .topNews__content { position: absolute; top: 0; left: 0; margin-top: 24px; margin-left: 24px; } .topNews__title { font-size: 32px; color: white; font-weight: 800; } .topNews__text { font-size: 16px; color: white; font-weight: 800; } .topNews__subtitle { font-size: 16px; margin-top: 24px; font-weight: 400; color: white; } .topNews__svg { position: absolute; bottom: 0; right: 0; margin-bottom: 32px; margin-right: 32px; } .topNews__svg--top { margin-bottom: 24px; margin-right: 24px; width: 40px; height: 40px; } .topNews__svg--edu { margin-bottom: 24px; margin-right: 24px; width: 40px; height: 40px; } .topNews .company__flex { width: 80%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1280px) { .topNews { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; overflow: hidden; padding-bottom: 112px; } .topNews__inner { display: flex; flex-direction: column; width: 88%; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } } @media screen and (max-width: 1280px) and (max-width: 800px) { .topNews__inner { grid-template-columns: repeat(1, 1fr); width: 108%; row-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; } } @media screen and (max-width: 1280px) { .topNews__card { position: relative; width: 100%; border-radius: 8px; overflow: hidden; display: block; } .topNews__card:hover .topNews__img { transform: scale(1.05); } .topNews__img { width: 100%; height: auto; transition: all 0.25s ease-in; border-radius: 8px; -o-object-fit: cover; object-fit: cover; display: block; } .topNews__content { position: absolute; top: 0; left: 0; margin-top: 16px; margin-left: 16px; } .topNews__title { font-size: 24px; color: white; font-weight: 800; } .topNews__text { font-size: 12px; color: white; font-weight: 800; } .topNews__subtitle { font-size: 12px; margin-top: 12px; font-weight: 400; color: white; } .topNews__svg { position: absolute; bottom: 0; right: 0; margin-bottom: 32px; margin-right: 32px; } .topNews__svg--top { margin-bottom: 24px; margin-right: 24px; width: 40px; height: 40px; } .topNews__svg--edu { margin-bottom: 24px; margin-right: 24px; width: 40px; height: 40px; } } @media screen and (max-width: 800px) { .topNews { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; overflow: hidden; padding-bottom: 112px; } .topNews__inner { display: flex; flex-direction: column; display: grid; grid-template-columns: repeat(1, 1fr); width: 108%; row-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; } .topNews__card { position: relative; width: 100%; border-radius: 8px; overflow: hidden; display: block; height: 150px; margin-bottom: 8px; } .topNews__card:hover .topNews__img { transform: scale(1.05); } .topNews__img { width: 100%; height: 100%; transition: all 0.25s ease-in; border-radius: 8px; -o-object-fit: cover; object-fit: cover; display: block; } .topNews__content { position: absolute; top: 0; left: 5%; margin-top: 16px; margin-left: 16px; } .topNews__title { font-size: 16px; color: white; font-weight: 800; } .topNews__text { font-size: 12px; color: white; font-weight: 800; margin-top: 8px; } .topNews__subtitle { font-size: 12px; margin-top: 16px; font-weight: 400; color: white; } .topNews__subtitle br { display: none; } .topNews__subtitle--sp { width: 78%; } .topNews__svg { position: absolute; bottom: 0; right: 0; margin-bottom: 16px; margin-right: 16px; } .topNews__svg--top { margin-bottom: 16px; margin-right: 32px; width: 26px; height: 26px; } .topNews__svg--edu { margin-bottom: 8px; margin-right: 8px; width: 26px; height: 26px; } } @media screen and (max-width: 480px) { .topNews { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; width: 100%; overflow: hidden; padding-bottom: 112px; } .topNews__inner { display: flex; flex-direction: column; display: grid; grid-template-columns: repeat(1, 1fr); width: 108%; row-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; } .topNews__card { position: relative; width: 100%; border-radius: 8px; overflow: hidden; display: block; height: 150px; margin-bottom: 8px; } .topNews__card:hover .topNews__img { transform: scale(1.05); } .topNews__img { width: 100%; height: 100%; transition: all 0.25s ease-in; border-radius: 8px; -o-object-fit: cover; object-fit: cover; display: block; } .topNews__content { position: absolute; top: 0; left: 5%; margin-top: 16px; margin-left: 16px; } .topNews__title { font-size: 16px; color: white; font-weight: 800; } .topNews__text { font-size: 12px; color: white; font-weight: 800; margin-top: 8px; } .topNews__subtitle { font-size: 12px; margin-top: 16px; font-weight: 400; color: white; } .topNews__subtitle br { display: none; } .topNews__subtitle--sp { width: 78%; } .topNews__svg { position: absolute; bottom: 0; right: 0; margin-bottom: 16px; margin-right: 16px; } .topNews__svg--top { margin-bottom: 16px; margin-right: 32px; width: 26px; height: 26px; } .topNews__svg--edu { margin-bottom: 8px; margin-right: 8px; width: 26px; height: 26px; } } .products { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin-top: 8.75vw; } @media screen and (max-width: 800px) { .products { margin-top: 21.3333333333vw; } } .products__container { position: relative; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden; } .products__wrapper { position: relative; width: 100%; } .products__slide { width: auto; transition: all 0.3s ease; } .ProductCard__imgWrapper { position: relative; margin: 0 auto; transition: all 0.3s ease; border-radius: 16px; } .ProductCard__imgWrapper::before { display: block; content: ""; padding-top: 67.9653679654%; } .ProductCard__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .ProductCard__img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 16px; } .swiper-slide-active .ProductCard__imgWrapper { height: 34.921875vw; transform: scale(1); } @media screen and (max-width: 800px) { .swiper-slide-active .ProductCard__imgWrapper { height: 45.6vw; } } @media screen and (max-width: 800px) { .swiper-slide-active .ProductCard__imgWrapper { width: 20.859375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .swiper-slide-active .ProductCard__imgWrapper { width: 71.2vw; } } .swiper-slide:not(.swiper-slide-active) .ProductCard__imgWrapper { height: 34.921875vw; transform: scale(0.8); opacity: 30%; } @media screen and (max-width: 800px) { .swiper-slide:not(.swiper-slide-active) .ProductCard__imgWrapper { height: 45.6vw; } } @media screen and (max-width: 800px) { .swiper-slide:not(.swiper-slide-active) .ProductCard__imgWrapper { width: 20.859375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .swiper-slide:not(.swiper-slide-active) .ProductCard__imgWrapper { width: 71.2vw; } } .fvNews { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 24px; display: flex; justify-content: center; align-items: center; background-color: white; width: 73%; border-radius: 999px; } .fvNews:hover .fvNews__inner { opacity: 40%; } .fvNews__inner { display: flex; justify-content: space-between; align-items: center; width: 90%; padding-top: 16px; padding-bottom: 16px; transition: all 0.25s ease-in; } .fvNews__content { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .fvNews__svg { width: 24px; height: 24px; } .fvNews__date { font-size: 14px; font-weight: 800; color: black; } .fvNews__cat { font-size: 14px; font-weight: 800; color: white; background-color: #008cd4; border-radius: 999px; padding-top: 6px; padding-bottom: 6px; padding-left: 22px; padding-right: 22px; } .fvNews__title { font-size: 16px; margin-left: 16px; font-weight: 800; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px; } @media screen and (max-width: 800px) { .fvNews { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 32px; display: flex; justify-content: center; align-items: center; background-color: white; width: 73%; border-radius: 999px; } .fvNews:hover .fvNews__inner { opacity: 40%; } .fvNews__inner { display: flex; justify-content: space-between; align-items: center; width: 90%; padding-top: 12px; padding-bottom: 12px; transition: all 0.25s ease-in; } .fvNews__content { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .fvNews__svg { width: 24px; height: 24px; } .fvNews__date { display: none; } .fvNews__cat { display: none; } .fvNews__title { font-size: 12px; margin-left: 16px; font-weight: 800; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 600px; } } @media screen and (max-width: 480px) { .fvNews { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 32px; display: flex; justify-content: center; align-items: center; background-color: white; width: 73%; border-radius: 999px; } .fvNews:hover .fvNews__inner { opacity: 40%; } .fvNews__inner { display: flex; justify-content: space-between; align-items: center; width: 90%; padding-top: 12px; padding-bottom: 12px; transition: all 0.25s ease-in; } .fvNews__content { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .fvNews__svg { width: 24px; height: 24px; } .fvNews__date { display: none; } .fvNews__cat { display: none; } .fvNews__title { font-size: 12px; margin-left: 16px; font-weight: 800; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 600px; } } .swiper-container { position: absolute; bottom: 20%; width: 100%; padding-bottom: 0 !important; /*@include responsive(pc) { bottom: 10%; }*/ } @media screen and (max-width: 800px) { .swiper-container { bottom: 5%; } } @media screen and (max-width: 480px) { .swiper-container { bottom: 5%; } } .swiper-pagination { position: absolute; bottom: -56px !important; left: 50% !important; transform: translateX(-50%); z-index: 3 !important; /*@include responsive(pc) { bottom: -40px !important; }*/ } @media screen and (max-width: 800px) { .swiper-pagination { bottom: 0px !important; } } @media screen and (max-width: 480px) { .swiper-pagination { bottom: 0px !important; } } .swiper-pagination-bullet { width: 8px; height: 8px; background-color: #b1b1b1; margin: 0 5px; } .swiper-pagination-bullet-active { background-color: #008cd4; } @media screen and (max-width: 480px) { .swiper-pagination-bullet { width: 24px; height: 24px; } } .government { display: flex; justify-content: center; align-items: center; } .government__inner { width: 80%; } .government__text { display: flex; justify-content: center; align-items: center; font-size: 1.875vw; line-height: 1.5; margin-top: 3.125vw; font-weight: 800; } @media screen and (max-width: 800px) { .government__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .government__text { margin-top: 10.6666666667vw; } } .government__border { width: 100%; height: 6px; background-color: #008cd4; margin-top: 0.3125vw; border-radius: 999px; } @media screen and (max-width: 800px) { .government__border { margin-top: 1.0666666667vw; } } @media screen and (max-width: 800px) { .government__border { width: 90%; } } .government__content { display: flex; flex-direction: column; } @media screen and (max-width: 800px) { .government__content { width: 100%; } } .government__flex { display: flex; justify-content: space-between; align-items: center; margin-top: 1.875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } @media screen and (max-width: 800px) { .government__flex { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .government__flex { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .government__flex--width { width: 90%; } } .government__title { font-size: 1.875vw; font-weight: 800; } @media screen and (max-width: 800px) { .government__title { font-size: 4.2666666667vw; } } .government__svg { margin-right: 3.125vw; transition: transform 0.3s ease; cursor: pointer; } @media screen and (max-width: 800px) { .government__svg { margin-right: 0vw; } } .government__svg.rotate { transform: rotate(180deg); } @media screen and (max-width: 800px) { .government__svg { width: 2.03125vw; height: 2.03125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .government__svg { width: 6.9333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .government__svg { height: 6.9333333333vw; } } .government__row { display: flex; align-items: flex-start; padding-top: 1.25vw; padding-bottom: 1.25vw; border-bottom: 1px solid #cccccc; } @media screen and (max-width: 800px) { .government__row { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .government__row { flex-direction: column; } } .government__rowBox.is-active { display: none; } .government__rowBox { display: block; } .government__dataTitle { font-size: 1.25vw; width: 12.5vw; } @media screen and (max-width: 800px) { .government__dataTitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .government__dataTitle { width: 80vw; } } @media screen and (max-width: 800px) { .government__dataTitle { font-weight: 800; } } .government__data { font-size: 1.09375vw; line-height: 1.5; width: 42.1875vw; } @media screen and (max-width: 800px) { .government__data { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .government__data { width: 80vw; } } @media screen and (max-width: 800px) { .government__data { margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .government__data { margin-top: 2.1333333333vw; } } .educational { display: flex; flex-direction: column; align-items: flex-end; margin-top: 8.75vw; } @media screen and (max-width: 800px) { .educational { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .educational { align-items: center; } } .educational__inner { display: flex; flex-direction: column; width: 90%; overflow: hidden; } @media screen and (max-width: 800px) { .educational__inner { width: 80%; } } .educational__content { margin-top: 4.375vw; } @media screen and (max-width: 800px) { .educational__content { margin-top: 8.5333333333vw; } } .educational__content--top { position: relative; } .educational__wrapper { display: flex; gap: 3.125vw; } .educational__wrapper--top { gap: 0vw; padding-right: 6.25vw; } @media screen and (max-width: 800px) { .educational__wrapper--top { padding-right: 21.3333333333vw; } } .reason { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 40px; width: 100%; } .reason__topTitleRecruit { font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; font-size: 24px; } .reason__topTitle { font-size: 32px; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; } .reason__topTitle br { display: none; } .reason__topTitle--top { padding-top: 56px; margin-bottom: 16px; width: 87%; } .reason__topTitle--top br { display: none; } .reason__inner { width: 80%; display: flex; justify-content: space-between; margin-top: 40px; } @media screen and (max-width: 1280px) { .reason__inner { width: 90%; } } .reason__card { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 340px; } .reason__flex { display: flex; align-items: center; gap: 16px; } .reason__flex svg { width: 35px; height: 40px; } @media screen and (max-width: 1280px) { .reason__flex svg { width: 25px; height: 30px; } } @media screen and (max-width: 1280px) { .reason__flex { gap: 8px; } } .reason__title { font-size: 24px; font-weight: 800; color: black; white-space: nowrap; } @media screen and (max-width: 1280px) { .reason__title { font-size: 20px; } } .reason__text { font-size: 14px; margin-top: 16px; line-height: 2; color: black; font-weight: 400; } @media screen and (max-width: 1280px) { .reason__text { font-size: 12px; } } @media screen and (max-width: 800px) { .reason { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 40px; width: 100%; } .reason__topTitleRecruit { font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; font-size: 24px; } .reason__topTitle { font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; } .reason__topTitle br { display: block; } .reason__topTitle--top { padding-top: 0px; margin-bottom: 16px; width: 90%; font-size: 24px; } .reason__topTitle--top br { display: block; } .reason__inner { width: 80%; display: flex; margin-top: 0px; flex-direction: column; align-items: center; } .reason__card { display: flex; flex-direction: column; align-items: center; width: 300px; margin-top: 40px; justify-content: center; } .reason__flex { display: flex; align-items: center; gap: 16px; } .reason__flex svg { width: 26px; height: 30px; } .reason__title { font-size: 22px; font-weight: 800; color: black; white-space: nowrap; } .reason__text { font-size: 12px; margin-top: 8px; line-height: 2; color: black; font-weight: 400; } } @media screen and (max-width: 480px) { .reason { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 40px; width: 100%; } .reason__topTitleRecruit { font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; font-size: 24px; } .reason__topTitle { font-size: 24px; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; } .reason__topTitle br { display: block; } .reason__topTitle--top { padding-top: 0px; margin-bottom: 16px; width: 90%; font-size: 24px; } .reason__topTitle--top br { display: block; } .reason__inner { width: 80%; display: flex; justify-content: space-between; margin-top: 0px; flex-direction: column; } .reason__card { display: flex; flex-direction: column; align-items: center; width: 300px; margin-top: 40px; justify-content: center; } .reason__flex { display: flex; align-items: center; gap: 16px; } .reason__flex svg { width: 26px; height: 30px; } .reason__title { font-size: 22px; font-weight: 800; color: black; white-space: nowrap; } .reason__text { font-size: 12px; margin-top: 8px; line-height: 2; color: black; font-weight: 400; } } .sgds { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 32px; } .sgds__inner { width: 80%; display: flex; justify-content: space-between; align-items: center; } .sgds__imgWrapper { width: 40%; aspect-ratio: 431/428; } .sgds__imgWrapper--sgds { width: 40%; aspect-ratio: 940/705; } .sgds__imgWrapper img { width: 100%; -o-object-fit: cover; object-fit: cover; } .sgds__text { width: 58%; font-size: 22px; line-height: 2; } @media screen and (max-width: 1280px) { .sgds__text { font-size: 16px; } } @media screen and (max-width: 800px) { .sgds { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 32px; } .sgds__inner { display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 82%; } .sgds__inner--reverse { flex-direction: column-reverse; margin-top: 24px; } .sgds__imgWrapper { width: 100%; aspect-ratio: 431/428; } .sgds__imgWrapper--sgds { width: 100%; aspect-ratio: 940/705; } .sgds__imgWrapper img { width: 100%; -o-object-fit: cover; object-fit: cover; } .sgds__text { font-size: 16px; line-height: 2; width: 100%; margin-top: 16px; } } @media screen and (max-width: 480px) { .sgds { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 32px; } .sgds__inner { display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 82%; } .sgds__inner--reverse { flex-direction: column-reverse; margin-top: 24px; } .sgds__imgWrapper { width: 100%; aspect-ratio: 431/428; } .sgds__imgWrapper--sgds { width: 100%; aspect-ratio: 940/705; } .sgds__imgWrapper img { width: 100%; -o-object-fit: cover; object-fit: cover; } .sgds__text { font-size: 16px; line-height: 2; width: 100%; margin-top: 16px; } } .recruit__content { display: flex; justify-content: center; align-items: center; flex-direction: column; } .recruit__title { margin-top: 5vw; font-size: 2.5vw; font-family: "Noto Sans JP", system-ui; font-weight: 800; text-align: center; } @media screen and (max-width: 800px) { .recruit__title { margin-top: 17.0666666667vw; } } @media screen and (max-width: 800px) { .recruit__title { font-size: 6.4vw; } }