@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; } .activities__inner { width: 80%; margin: auto; } .activities__header { text-align: center; } .activities__header__title { font-size: 2em; margin-bottom: 10px; } .activities__header__subtitle { font-size: 1.2em; margin-bottom: 20px; } .activities__header__border { width: 100%; height: 2px; background-color: #ccc; margin-bottom: 30px; } .activities__content { display: flex; justify-content: space-between; flex-wrap: wrap; } .activities__content__item { width: calc(25% - 20px); margin: 10px; text-align: center; } .activities__content__item__image { width: 100%; -o-object-fit: cover; object-fit: cover; } .activities__content__item__mini-title { font-size: 1.2em; margin: 10px 0; } .activities__content__item__text { font-size: 1em; } .blogBody { font-size: medium; /* 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 { color: #001455; font-size: 1em; letter-spacing: 0.1em; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; } .blogBody html { display: block; } .blogBody #text { color: #001455; } .blogBody head { display: none; } .blogBody meta { display: none; } .blogBody title { display: none; } .blogBody link { display: none; } .blogBody style { display: none; } .blogBody script { display: none; } .blogBody body { display: block; margin: 8px; } .blogBody body:-webkit-full-page-media { background-color: black; } .blogBody p { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; line-height: 2; } @media screen and (max-width: 480px) { .blogBody p { font-size: 14px; } } .blogBody span { font-size: inherit; } .blogBody div { display: block; max-width: 100%; } .blogBody layer { display: block; } .blogBody article, .blogBody aside, .blogBody footer, .blogBody header, .blogBody hgroup, .blogBody main, .blogBody nav, .blogBody section { display: block; } .blogBody marquee { display: inline-block; width: -webkit-fill-available; } .blogBody address { display: block; } .blogBody blockquote { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 40px; margin-inline-start: 40px; -webkit-margin-end: 40px; margin-inline-end: 40px; } .blogBody figcaption { display: block; } .blogBody figure { display: block; } .blogBody figure figcaption { font-size: 12px; } .blogBody img { max-width: 100%; } .blogBody q { display: inline; } .blogBody q:before { content: open-quote; } .blogBody q:after { content: close-quote; } .blogBody center { display: block; /* special centering to be able to emulate the html4/netscape behaviour */ text-align: -webkit-center; } .blogBody hr { display: block; overflow: hidden; unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: isolate; -webkit-margin-before: 0.5em; margin-block-start: 0.5em; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; border-style: inset; border-width: 1px; } .blogBody map { display: inline; } .blogBody video { -o-object-fit: contain; object-fit: contain; } .blogBody h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; margin-block-start: 0.67em; -webkit-margin-after: 0.67em; margin-block-end: 0.67em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; color: #001455; } .blogBody :-webkit-any(article, aside, nav, section) h1 { font-size: 1.5em; -webkit-margin-before: 0.83em; margin-block-start: 0.83em; -webkit-margin-after: 0.83em; margin-block-end: 0.83em; } .blogBody :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 1.17em; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; } .blogBody :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 1em; -webkit-margin-before: 1.33em; margin-block-start: 1.33em; -webkit-margin-after: 1.33em; margin-block-end: 1.33em; } .blogBody :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 0.83em; -webkit-margin-before: 1.67em; margin-block-start: 1.67em; -webkit-margin-after: 1.67em; margin-block-end: 1.67em; } .blogBody :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 0.67em; -webkit-margin-before: 2.33em; margin-block-start: 2.33em; -webkit-margin-after: 2.33em; margin-block-end: 2.33em; } .blogBody h2 { display: block; font-size: 1.42em; -webkit-margin-before: 0.83em; margin-block-start: 0.83em; -webkit-margin-after: 0.83em; margin-block-end: 0.83em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } @media screen and (max-width: 480px) { .blogBody h2 { font-size: 1.32em; } } .blogBody h3 { display: block; font-size: 1.17em; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 0.8em; margin-block-end: 0.8em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h4 { display: block; -webkit-margin-before: 1.33em; margin-block-start: 1.33em; -webkit-margin-after: 1.33em; margin-block-end: 1.33em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h5 { display: block; font-size: 0.83em; -webkit-margin-before: 1.67em; margin-block-start: 1.67em; -webkit-margin-after: 1.67em; margin-block-end: 1.67em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody h6 { display: block; font-size: 0.67em; -webkit-margin-before: 2.33em; margin-block-start: 2.33em; -webkit-margin-after: 2.33em; margin-block-end: 2.33em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; font-weight: bold; } .blogBody strong, .blogBody em, .blogBody kbd { font-size: 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; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 40px; padding-inline-start: 40px; } .blogBody ol { display: block; list-style-type: decimal; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 40px; padding-inline-start: 40px; } .blogBody li { display: list-item; text-align: -webkit-match-parent; line-height: 1.8; } .blogBody ul ul, .blogBody ol ul { list-style-type: circle; } .blogBody ol ol ul, .blogBody ol ul ul, .blogBody ul ol ul, .blogBody ul ul ul { list-style-type: square; } .blogBody dd { display: block; -webkit-margin-start: 40px; margin-inline-start: 40px; } .blogBody dl { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; } .blogBody dt { display: block; } .blogBody ol ul, .blogBody ul ol, .blogBody ul ul, .blogBody ol ol { -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0; margin-block-end: 0; } .blogBody form { display: block; margin-top: 0em; } .blogBody :-webkit-any(table, thead, tbody, tfoot, tr) > form:-internal-is-html { display: none !important; } .blogBody label { cursor: default; } .blogBody legend { display: block; -webkit-padding-start: 2px; padding-inline-start: 2px; -webkit-padding-end: 2px; padding-inline-end: 2px; border: none; } .blogBody fieldset { display: block; -webkit-margin-start: 2px; margin-inline-start: 2px; -webkit-margin-end: 2px; margin-inline-end: 2px; -webkit-padding-before: 0.35em; padding-block-start: 0.35em; -webkit-padding-start: 0.75em; padding-inline-start: 0.75em; -webkit-padding-end: 0.75em; padding-inline-end: 0.75em; -webkit-padding-after: 0.625em; padding-block-end: 0.625em; min-inline-size: -webkit-min-content; min-inline-size: -moz-min-content; min-inline-size: min-content; } .blogBody button { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .blogBody input, .blogBody textarea, .blogBody select, .blogBody button, .blogBody meter, .blogBody progress { -webkit-writing-mode: horizontal-tb !important; } .blogBody input, .blogBody textarea, .blogBody select, .blogBody button { margin: 0em; font: -webkit-small-control; text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */ color: -internal-light-dark(black, white); letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; display: inline-block; text-align: start; } .blogBody input[type=hidden i] { display: none; } .blogBody input { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; padding: 1px; background-color: -internal-light-dark(white, black); border: 2px inset; -webkit-rtl-ordering: logical; cursor: text; } .blogBody input[type=search i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; } .blogBody input::-webkit-textfield-decoration-container { display: flex !important; align-items: center; -webkit-user-modify: read-only !important; content: none !important; writing-mode: inherit !important; -internal-align-self-block: center; } .blogBody input::-webkit-clear-button { -webkit-appearance: auto; appearance: auto; display: inline-block; cursor: default; flex: none; -webkit-user-modify: read-only !important; -webkit-margin-start: 2px; margin-inline-start: 2px; } .blogBody input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-clear-button { opacity: 1; pointer-events: auto; } .blogBody input[type=search i]::-webkit-search-cancel-button { -webkit-appearance: auto; appearance: auto; display: block; cursor: default; flex: none; -webkit-user-modify: read-only !important; -webkit-margin-start: 1px; margin-inline-start: 1px; -webkit-user-select: none !important; user-select: none !important; } .blogBody input[type=search i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button { opacity: 1; pointer-events: auto; } .blogBody input::-webkit-inner-spin-button { -webkit-appearance: auto; appearance: auto; display: inline-block; cursor: default; flex: none; align-self: stretch; -webkit-user-modify: read-only !important; } .blogBody input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-inner-spin-button { opacity: 1; pointer-events: auto; } .blogBody select { border-radius: 5px; } .blogBody textarea { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; background-color: -internal-light-dark(white, black); border: 1px solid; -moz-column-count: initial !important; column-count: initial !important; -webkit-rtl-ordering: logical; flex-direction: column; resize: auto; cursor: text; padding: 2px; white-space: pre-wrap; word-wrap: break-word; } .blogBody ::-webkit-input-placeholder { -webkit-text-security: none; color: #757575; direction: inherit !important; pointer-events: none !important; text-orientation: inherit !important; writing-mode: inherit !important; } .blogBody input::-webkit-input-placeholder { text-overflow: inherit; line-height: initial; white-space: pre; word-wrap: normal; overflow: hidden; -webkit-user-modify: read-only !important; } .blogBody input::-internal-input-suggested { text-overflow: inherit; white-space: nowrap; overflow: hidden; } .blogBody input::-internal-input-suggested, .blogBody textarea::-internal-input-suggested { font: -webkit-small-control !important; /* Prevent that overflow affects the scrollable area. Without this, LayoutBox::*Scroll{Height,Width}() may determine the scroll width/height from the scrollable area instead of from the overrides in LayoutTextControl{Single,Multi}Line::Scroll{Height,Width}(). */ overflow: hidden !important; overflow-anchor: none; } .blogBody input[type=password i] { -webkit-text-security: disc !important; } .blogBody input[type=password i]::-internal-input-suggested { -webkit-text-security: disc !important; } .blogBody input[type=hidden i], .blogBody input[type=image i], .blogBody input[type=file i] { -webkit-appearance: initial; /* AutoAppearanceFor() should match to this. */ padding: initial; background-color: initial; border: initial; cursor: default; } .blogBody input[type=file i] { align-items: baseline; color: inherit; overflow: hidden !important; text-align: start !important; text-overflow: ellipsis; white-space: pre; } .blogBody input[type=image i] { cursor: pointer; } .blogBody input:-internal-autofill-previewed, .blogBody textarea:-internal-autofill-previewed, .blogBody select:-internal-autofill-previewed { -webkit-appearance: menulist-button; background-color: #e8f0fe !important; background-image: none !important; color: -internal-light-dark(black, white) !important; } .blogBody input:-internal-autofill-selected, .blogBody textarea:-internal-autofill-selected, .blogBody select:-internal-autofill-selected { -webkit-appearance: menulist-button; background-color: #e8f0fe !important; background-image: none !important; color: -internal-light-dark(black, white) !important; } .blogBody input[type=radio i], .blogBody input[type=checkbox i] { margin: 3px 0.5ex; padding: initial; background-color: initial; border: initial; cursor: default; } .blogBody input[type=button i], .blogBody input[type=submit i], .blogBody input[type=reset i] { -internal-empty-line-height: fabricated; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; white-space: pre; } .blogBody input[type=file i]::-webkit-file-upload-button { -webkit-appearance: auto; appearance: auto; -webkit-user-modify: read-only !important; white-space: nowrap; margin: 0; -webkit-margin-end: 4px; margin-inline-end: 4px; font-size: inherit; } .blogBody input[type=button i], .blogBody input[type=submit i], .blogBody input[type=reset i], .blogBody input[type=file i]::-webkit-file-upload-button, .blogBody button { align-items: flex-start; text-align: center; cursor: default; color: -internal-light-dark(ButtonText, #aaaaaa); padding: 2px 6px 3px 6px; border: 2px outset ButtonFace; background-color: ButtonFace; box-sizing: border-box; } .blogBody input[type=range i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; /* AutoAppearanceFor() should match to this. */ padding: initial; border: initial; margin: 2px; color: #909090; cursor: default; } .blogBody input[type=range i]::-webkit-slider-container, .blogBody input[type=range i]::-webkit-media-slider-container { -webkit-appearance: inherit; appearance: inherit; flex: 1; min-inline-size: 0; box-sizing: border-box; -webkit-user-modify: read-only !important; display: flex; } .blogBody input[type=range i]:-internal-has-datalist::-webkit-slider-container { /* * See LayoutThemeDefault. "22px" is * 2 * (SliderTickOffsetFromTrackCenter() + SliderTickSize().Height()). */ min-block-size: 22px; } .blogBody input[type=range i]::-webkit-slider-runnable-track { flex: 1; min-inline-size: 0; -webkit-align-self: center; box-sizing: border-box; -webkit-user-modify: read-only !important; display: block; } .blogBody input[type=range i]::-webkit-slider-thumb, .blogBody input[type=range i]::-webkit-media-slider-thumb { -webkit-appearance: auto; appearance: auto; box-sizing: border-box; -webkit-user-modify: read-only !important; display: block; } .blogBody input[type=button i]:disabled, .blogBody input[type=submit i]:disabled, .blogBody input[type=reset i]:disabled, .blogBody input[type=file i]:disabled::-webkit-file-upload-button, .blogBody button:disabled, .blogBody select:disabled, .blogBody optgroup:disabled, .blogBody option:disabled, .blogBody select[disabled] > option { color: -internal-light-dark(GrayText, #aaa); } .blogBody input[type=button i]:active, .blogBody input[type=submit i]:active, .blogBody input[type=reset i]:active, .blogBody input[type=file i]:active::-webkit-file-upload-button, .blogBody button:active { border-style: inset; } .blogBody input[type=button i]:active:disabled, .blogBody input[type=submit i]:active:disabled, .blogBody input[type=reset i]:active:disabled, .blogBody input[type=file i]:active:disabled::-webkit-file-upload-button, .blogBody button:active:disabled { border-style: outset; } .blogBody input:disabled, .blogBody textarea:disabled { color: -internal-light-dark(#545454, #aaa); cursor: default; } .blogBody option:-internal-spatial-navigation-focus { outline: -internal-light-dark(black, white) dashed 1px; outline-offset: -1px; } .blogBody datalist { display: none; } .blogBody area { display: inline; } .blogBody area:-webkit-any-link { cursor: pointer; } .blogBody param { display: none; } .blogBody input[type=checkbox i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; } .blogBody input[type=radio i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; } .blogBody input[type=color i] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: 44px; height: 23px; background-color: ButtonFace; /* Same as native_theme_base. */ border: 1px #a9a9a9 solid; padding: 1px 2px; cursor: default; } .blogBody input[type=color i]::-webkit-color-swatch-wrapper { display: flex; padding: 4px 2px; box-sizing: border-box; -webkit-user-modify: read-only !important; width: 100%; height: 100%; } .blogBody input[type=color i]::-webkit-color-swatch { background-color: #000000; border: 1px solid #777777; flex: 1; min-width: 0; -webkit-user-modify: read-only !important; } .blogBody input[type=color i][list] { -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */ width: 88px; height: 23px; } .blogBody input[type=color i][list]::-webkit-color-swatch-wrapper { -webkit-padding-start: 8px; padding-inline-start: 8px; -webkit-padding-end: 24px; padding-inline-end: 24px; } .blogBody input[type=color i][list]::-webkit-color-swatch { border-color: #000000; } .blogBody input::-webkit-calendar-picker-indicator { display: inline-block; width: 0.66em; height: 0.66em; padding: 0.17em 0.34em; -webkit-user-modify: read-only !important; cursor: default; } .blogBody input::-webkit-calendar-picker-indicator:hover { background-color: #eee; } .blogBody input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-calendar-picker-indicator, .blogBody input::-webkit-calendar-picker-indicator:focus { opacity: 1; pointer-events: auto; } .blogBody input[type=date i]:disabled::-webkit-clear-button, .blogBody input[type=date i]:disabled::-webkit-inner-spin-button, .blogBody input[type=datetime-local i]:disabled::-webkit-clear-button, .blogBody input[type=datetime-local i]:disabled::-webkit-inner-spin-button, .blogBody input[type=month i]:disabled::-webkit-clear-button, .blogBody input[type=month i]:disabled::-webkit-inner-spin-button, .blogBody input[type=week i]:disabled::-webkit-clear-button, .blogBody input[type=week i]:disabled::-webkit-inner-spin-button, .blogBody input:disabled::-webkit-calendar-picker-indicator, .blogBody input[type=date i][readonly]::-webkit-clear-button, .blogBody input[type=date i][readonly]::-webkit-inner-spin-button, .blogBody input[type=datetime-local i][readonly]::-webkit-clear-button, .blogBody input[type=datetime-local i][readonly]::-webkit-inner-spin-button, .blogBody input[type=month i][readonly]::-webkit-clear-button, .blogBody input[type=month i][readonly]::-webkit-inner-spin-button, .blogBody input[type=week i][readonly]::-webkit-clear-button, .blogBody input[type=week i][readonly]::-webkit-inner-spin-button, .blogBody input[readonly]::-webkit-calendar-picker-indicator { visibility: hidden; } .blogBody select { -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */ box-sizing: border-box; align-items: center; border: 1px solid; white-space: pre; -webkit-rtl-ordering: logical; color: -internal-light-dark(black, white); background-color: -internal-light-dark(white, black); cursor: default; } .blogBody select:not(:-internal-list-box) { overflow: visible !important; } .blogBody select:-internal-list-box { -webkit-appearance: listbox; /* AutoAppearanceFor() should match to this. */ align-items: flex-start; border: 1px inset gray; border-radius: initial; overflow-x: hidden; overflow-y: scroll; vertical-align: text-bottom; white-space: nowrap; } .blogBody optgroup { font-weight: bolder; display: block; } .blogBody option { font-weight: normal; display: block; padding: 0 2px 1px 2px; white-space: nowrap; min-height: 1.2em; } .blogBody select:-internal-list-box optgroup option:before { content: "    "; } .blogBody select:-internal-list-box option, .blogBody select:-internal-list-box optgroup { line-height: initial !important; } .blogBody select:-internal-list-box:focus option:checked { background-color: -internal-active-list-box-selection !important; color: -internal-active-list-box-selection-text !important; } .blogBody select:-internal-list-box:focus option:checked:disabled { background-color: -internal-inactive-list-box-selection !important; } .blogBody select:-internal-list-box option:checked { background-color: -internal-inactive-list-box-selection !important; color: -internal-inactive-list-box-selection-text !important; } .blogBody select:-internal-list-box:disabled option:checked, .blogBody select:-internal-list-box option:checked:disabled { color: gray !important; } .blogBody select:-internal-list-box hr { border-style: none; -webkit-margin-before: 0.5em; margin-block-start: 0.5em; -webkit-margin-after: 0; margin-block-end: 0; } .blogBody select:-internal-list-box:focus option:-internal-multi-select-focus { outline: auto 1px -webkit-focus-ring-color; outline-offset: -1px; } .blogBody output { display: inline; } .blogBody meter { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; display: inline-block; height: 1em; width: 5em; vertical-align: -0.2em; -webkit-user-modify: read-only !important; } .blogBody meter::-webkit-meter-inner-element { -webkit-appearance: inherit; appearance: inherit; box-sizing: inherit; display: none; -webkit-user-modify: read-only !important; height: 100%; width: 100%; } .blogBody meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance { display: block; } .blogBody meter::-internal-fallback:-internal-shadow-host-has-appearance { display: none; } .blogBody meter::-webkit-meter-bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody meter::-webkit-meter-optimum-value { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); height: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody meter::-webkit-meter-suboptimum-value { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody meter::-webkit-meter-even-less-good-value { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); height: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody progress { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; box-sizing: border-box; display: inline-block; height: 1em; width: 10em; vertical-align: -0.2em; } .blogBody progress::-webkit-progress-inner-element { box-sizing: inherit; -webkit-user-modify: read-only; height: 100%; width: 100%; } .blogBody progress::-webkit-progress-bar { background-color: gray; height: 100%; width: 100%; -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody progress::-webkit-progress-value { background-color: green; height: 100%; width: 50%; /* should be removed later */ -webkit-user-modify: read-only !important; box-sizing: border-box; } .blogBody u, .blogBody ins { text-decoration: underline; } .blogBody abbr[title], .blogBody acronym[title] { -webkit-text-decoration: dotted underline; text-decoration: dotted underline; } .blogBody strong, .blogBody b { font-weight: bold; } .blogBody i, .blogBody cite, .blogBody em, .blogBody var, .blogBody address, .blogBody dfn { font-style: italic; } .blogBody pre, .blogBody xmp, .blogBody plaintext, .blogBody listing { display: block; white-space: pre; margin: 1em 0; } .blogBody mark { background-color: yellow; color: black; } .blogBody big { font-size: larger; } .blogBody small { font-size: smaller; } .blogBody s, .blogBody strike, .blogBody del { text-decoration: line-through; } .blogBody sub { vertical-align: sub; font-size: smaller; } .blogBody sup { vertical-align: super; font-size: smaller; } .blogBody nobr { white-space: nowrap; } .blogBody :-internal-spatial-navigation-interest { outline: auto 1px -webkit-focus-ring-color !important; box-shadow: none !important; } .blogBody :focus { outline: auto 1px -webkit-focus-ring-color; } .blogBody html:focus, .blogBody body:focus { outline: none; } .blogBody embed:focus, .blogBody iframe:focus, .blogBody object:focus { outline: none; } .blogBody input:focus, .blogBody textarea:focus, .blogBody select:focus { outline-offset: -2px; } .blogBody input[type=button i]:focus, .blogBody input[type=checkbox i]:focus, .blogBody input[type=file i]:focus, .blogBody input[type=hidden i]:focus, .blogBody input[type=image i]:focus, .blogBody input[type=radio i]:focus, .blogBody input[type=reset i]:focus, .blogBody input[type=submit i]:focus, .blogBody input[type=file i]:focus::-webkit-file-upload-button { outline-offset: 0; } .blogBody a:-webkit-any-link { color: #0073aa; text-decoration: underline; cursor: pointer; word-break: break-all; } .blogBody p.has-text-color a { color: inherit; } .blogBody a:-webkit-any-link:active { color: -webkit-activelink; } .blogBody a:-webkit-any-link:read-write { cursor: text; } .blogBody ruby, .blogBody rt { text-indent: 0; /* blocks used for ruby rendering should not trigger this */ } .blogBody rt { line-height: normal; } .blogBody ruby > rt { display: block; font-size: 50%; text-align: start; } .blogBody rp { display: none; } .blogBody noframes { display: none; } .blogBody frameset, .blogBody frame { display: block; } .blogBody frameset { border-color: inherit; } .blogBody iframe { border: 2px inset; } .blogBody details { display: block; } .blogBody summary { display: block; } .blogBody summary::-webkit-details-marker { display: inline-block; width: 0.66em; height: 0.66em; -webkit-margin-end: 0.4em; margin-inline-end: 0.4em; } .blogBody template { display: none; } .blogBody bdi, .blogBody output { unicode-bidi: -webkit-isolate; } .blogBody bdo { unicode-bidi: bidi-override; } .blogBody textarea[dir=auto i] { unicode-bidi: -webkit-plaintext; } .blogBody dialog:not([open]) { display: none; } .blogBody dialog { display: block; position: absolute; left: 0; right: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: auto; border: solid; padding: 1em; background: -internal-light-dark(white, black); color: -internal-light-dark(black, white); } .blogBody dialog:-internal-modal { position: fixed; overflow: auto; top: 0; bottom: 0; /* 6px + 2em = border + padding, as by default box-sizing is content-box. */ max-width: calc(100% - 6px - 2em); max-height: calc(100% - 6px - 2em); } .blogBody dialog::-webkit-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.1); } .blogBody dialog::backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.1); } .blogBody slot { display: contents; } @page { .blogBody { /* FIXME: Define the right default values for page properties. */ size: auto; margin: auto; padding: 0px; border-width: 0px; } } @media print { .blogBody thead { -moz-column-break-inside: avoid; break-inside: avoid; } .blogBody tfoot { -moz-column-break-inside: avoid; break-inside: avoid; } } .blogBody .wp-block-pullquote { margin: 0 0 1em 0; padding: 3em 0; text-align: center; border-top: 4px solid; border-bottom: 4px solid; } .blogBody .wp-block-pullquote.alignleft, .blogBody .wp-block-pullquote.alignright { max-width: 420px; } .blogBody .wp-block-pullquote.alignleft p, .blogBody .wp-block-pullquote.alignright p { font-size: 1.25em; } .blogBody .wp-block-pullquote p { font-size: 1.75em; line-height: 1.6; } .blogBody .wp-block-pullquote cite, .blogBody .wp-block-pullquote footer { position: relative; } .blogBody .wp-block-pullquote .has-text-color a { color: inherit; } .blogBody .wp-block-pullquote:not(.is-style-solid-color) { background: none; } .blogBody .wp-block-pullquote.is-style-solid-color { border: none; } .blogBody .wp-block-pullquote.is-style-solid-color blockquote { margin-left: auto; margin-right: auto; text-align: left; max-width: 60%; } .blogBody .wp-block-pullquote.is-style-solid-color blockquote p { margin-top: 0; margin-bottom: 0; font-size: 2em; } .blogBody .wp-block-pullquote.is-style-solid-color blockquote cite { text-transform: none; font-style: normal; } .blogBody .wp-block-pullquote cite { color: inherit; } .blogBody .wp-block-quote { border-left: 0.25em solid; margin: 0 0 1.75em; padding-left: 1em; } .blogBody .wp-block-table td, .blogBody .wp-block-table th { border: 1px solid; } .blogBody .wp-block-table td, .blogBody .wp-block-table th { padding: 0.5em; border: 1px solid; word-break: normal; line-height: 1.8; } .blogBody .wp-block-image img { max-width: 100%; height: auto; } .blogBody .wp-block-columns { display: flex; margin-bottom: 2em; box-sizing: border-box; flex-wrap: wrap; } @media screen and (max-width: 480px) { .blogBody .wp-block-columns { flex-direction: column-reverse; } } .blogBody .wp-block-columns p { -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0; margin-block-end: 0; } .blogBody .wp-block-column { overflow: hidden; } .blogBody .size-full img { width: 100%; } .blogBody h2, .blogBody h3, .blogBody h4, .blogBody h5, .blogBody h6 { -webkit-margin-before: 2em; margin-block-start: 2em; -webkit-margin-after: 0.8em; margin-block-end: 0.8em; } .blogBody .wp-block-column > h1, .blogBody .wp-block-column > h2, .blogBody .wp-block-column > h3, .blogBody .wp-block-column > h4, .blogBody .wp-block-column > h5, .blogBody .wp-block-column > h6 { -webkit-margin-before: 0; margin-block-start: 0; } .blogBody p, .blogBody span, .blogBody a, .blogBody h2, .blogBody h3, .blogBody h4, .blogBody h5, .blogBody h6 { color: #001455; } .blogBody a { font-size: 1em; cursor: pointer !important; transition: all ease-in-out 0.25s; } .blogBody a:hover { opacity: 0.25; } .blogBody #ez-toc-container { box-sizing: border-box; width: 100%; padding: 1.25vw; margin-bottom: 2.5vw; } @media screen and (max-width: 800px) { .blogBody #ez-toc-container { padding: 4.2666666667vw; margin-bottom: 8.5333333333vw; } } .blogBody #ez-toc-container nav { padding-top: 0.625vw; } @media screen and (max-width: 800px) { .blogBody #ez-toc-container nav { padding-top: 2.1333333333vw; } } .blogBody .wp-caption-text, .blogBody .wp-element-caption { margin-top: 0.625vw; margin-bottom: 0.625vw; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .blogBody .wp-caption-text, .blogBody .wp-element-caption { margin-top: 2.1333333333vw; margin-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .blogBody .wp-caption-text, .blogBody .wp-element-caption { font-size: 2.6666666667vw; } } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-size: 62.5%; scroll-behavior: smooth; } body { font-family: "Noto Serif JP", serif; font-weight: 400; background-color: #fffbfc; } h2 { font-family: "Noto Serif JP", serif; font-weight: 400; } @font-face { font-family: "circular-std"; src: url("../fonts/circular-std-medium-500.woff") format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "ZenKakuGothicAntique"; src: url("../fonts/ZenKakuGothicAntique-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "ZenKakuGothicAntique"; src: url("../fonts/ZenKakuGothicAntique-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "ZenKakuGothicAntique"; src: url("../fonts/ZenKakuGothicAntique-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "ZenKakuGothicAntique"; src: url("../fonts/ZenKakuGothicAntique-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; /* Extra Bold */ font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-ExtraLight.ttf") format("truetype"); font-weight: 200; /* Extra Light */ font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Light.ttf") format("truetype"); font-weight: 300; /* Light */ font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; /* Medium */ font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; /* Semi Bold */ font-style: normal; } @font-face { font-family: "Marcellus-Regular"; font-weight: 400; src: url("../fonts/Marcellus-Regular.woff") format("woff"); font-style: normal; } @font-face { font-family: "NotoSerif-JP"; font-weight: 300; src: url("../fonts/NotoSerifJP-Light.woff") format("woff"); font-style: normal; } @font-face { font-family: "NotoSerif-JP"; font-weight: 400; src: url("../fonts/NotoSerifJP-Regular.woff") format("woff"); font-style: normal; } @font-face { font-family: "NotoSerif-JP"; font-weight: 500; src: url("../fonts/NotoSerifJP-Medium.woff") format("woff"); font-style: normal; } @font-face { font-family: "NotoSerif-JP"; font-weight: 600; src: url("../fonts/NotoSerifJP-SemiBold.woff") format("woff"); font-style: normal; } @font-face { font-family: "NotoSerif-JP"; font-weight: 700; src: url("../fonts/NotoSerifJP-Bold.woff") format("woff"); font-style: normal; } @font-face { font-family: "Futura-Medium-Italic-font"; font-weight: 100; src: url("../fonts/Futura-Medium-Italic-font.woff") format("woff"); font-style: normal; } .color\:black { color: #001455; } .header { position: fixed; top: 0%; left: 0; z-index: 11; background: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1); height: 5vw; display: flex; justify-content: flex-end; align-items: center; width: 100%; } @media screen and (max-width: 800px) { .header { height: 17.0666666667vw; } } @media screen and (max-width: 800px) { .header { justify-content: center; } } .header__inner { display: flex; justify-content: space-between; align-items: center; width: 95%; } @media screen and (max-width: 800px) { .header__inner { align-items: center; width: 80%; } } .header__logo { width: 19.765625vw; position: relative; } @media screen and (max-width: 800px) { .header__logo { width: 51.4666666667vw; } } .header__logo::before { display: block; content: ""; padding-top: 13.4387351779%; } .header__logo > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .header__logoText { width: 12.890625vw; height: 1.875vw; } @media screen and (max-width: 800px) { .header__logoText { width: 44vw; } } @media screen and (max-width: 800px) { .header__logoText { height: 6.4vw; } } .header__nav { display: flex; align-items: center; gap: 1.875vw; text-align: right; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .header__nav { display: none; } } .header__nav--under { position: relative; flex-direction: row; top: 0.78125vw; } @media screen and (max-width: 800px) { .header__nav { display: none; } } .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: 1.71875vw; padding-bottom: 1.71875vw; } @media screen and (max-width: 800px) { .header__navItem--arrow { padding-top: 5.8666666667vw; padding-bottom: 5.8666666667vw; } } @media screen and (max-width: 800px) { .header__navItem--arrow { display: none; } } .header__navItem::after { content: ""; display: block; transition: all 0.25s ease-in; background-image: url("../images/header_arrow.webp"); background-size: cover; width: 0.625vw; height: 0.3125vw; position: absolute; left: 50%; bottom: 0.859375vw; transform: translateX(-50%); transition: transform 0.3s ease; } @media screen and (max-width: 800px) { .header__navItem::after { width: 2.1333333333vw; } } @media screen and (max-width: 800px) { .header__navItem::after { height: 1.0666666667vw; } } .header__navItem:hover::after { transform: translateX(-50%) rotate(180deg); } .header__navItem:hover .dropDown { display: block; opacity: 1; } .header__navtext { position: relative; color: #d72d56; display: flex; justify-content: center; align-items: center; font-size: 1.09375vw; } @media screen and (max-width: 800px) { .header__navtext { font-size: 3.7333333333vw; } } .header__navtext--contact { color: white; transition: all 0.25s ease-in; } .header__reservation { display: flex; align-items: center; justify-content: center; background-color: #d72d56; border: 1px solid #d72d56; width: 12.5vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .header__reservation { width: 42.6666666667vw; } } .header__reservation a { display: flex; justify-content: center; align-items: center; gap: 0.625vw; width: 100%; padding-top: 1.640625vw; padding-bottom: 1.640625vw; cursor: pointer; } @media screen and (max-width: 800px) { .header__reservation a { padding-top: 5.6vw; padding-bottom: 5.6vw; } } .header__reservation:hover { color: white; background-color: white; } .header__reservation:hover .header__navtext--contact { color: #d72d56; } .header__reservation:hover .header__reservationImg path { fill: #d72d56; } .header__reservationImg { width: 1.5625vw; height: 1.5625vw; } @media screen and (max-width: 800px) { .header__reservationImg { width: 5.3333333333vw; } } @media screen and (max-width: 800px) { .header__reservationImg { height: 5.3333333333vw; } } .header__reservationImg path { transition: all 0.25s ease-in; } .header__dropdown { display: none; position: absolute; z-index: -1; top: 5vw; left: 50%; transform: translate(-50%, 0); width: 6.875vw; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); opacity: 0; transition: all 0.5s ease; } @media screen and (max-width: 800px) { .header__dropdown { width: 23.4666666667vw; } } .header__dropdownText { display: flex; justify-content: center; align-items: center; padding-top: 0.625vw; padding-bottom: 0.625vw; font-size: 1.09375vw; text-align: center; color: #d72d56; } @media screen and (max-width: 800px) { .header__dropdownText { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .header__dropdownText { font-size: 3.7333333333vw; } } .header__dropdownText:hover { color: white; background-color: #d72d56; } .header__dropdownText--underline { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .header__fixedButton { z-index: 7; position: fixed; bottom: 32px; right: 2.5%; width: 22.578125vw; height: 4.765625vw; background: linear-gradient(250deg, #d72d56 1.99%, rgba(215, 45, 86, 0.6) 100%); border-radius: 100px; border: 1px solid #fff; overflow: hidden; display: flex; justify-content: center; } @media screen and (max-width: 800px) { .header__fixedButton { width: 92vw; } } @media screen and (max-width: 800px) { .header__fixedButton { height: 14.1333333333vw; } } @media screen and (max-width: 800px) { .header__fixedButton { left: 50%; right: auto; transform: translateX(-50%); } } .header__bannerText { font-size: 1.09375vw; padding-left: 0.625vw; color: #fff; font-weight: 500; } @media screen and (max-width: 800px) { .header__bannerText { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .header__bannerText { padding-left: 2.1333333333vw; } } .header__bannerCampaign { display: flex; justify-content: center; background: transparent; border: none; align-items: center; transition: all 0.25s ease-in; } .header__bannerCampaign:hover { opacity: 40%; } .header__bannerArrow { width: 1.25vw; height: 1.25vw; } @media screen and (max-width: 800px) { .header__bannerArrow { width: 4.2666666667vw; } } @media screen and (max-width: 800px) { .header__bannerArrow { height: 4.2666666667vw; } } .header__bannerLine { height: 1.640625vw; padding-left: 1.875vw; } @media screen and (max-width: 800px) { .header__bannerLine { height: 5.6vw; } } @media screen and (max-width: 800px) { .header__bannerLine { padding-left: 9.8666666667vw; } } .header__bannerReservation { display: flex; justify-content: center; background: transparent; border: none; align-items: center; transition: all 0.25s ease-in; } .header__bannerReservation:hover { opacity: 40%; } .header__bannerCalender { width: 1.5625vw; height: 1.5625vw; padding-left: 1.875vw; } @media screen and (max-width: 800px) { .header__bannerCalender { width: 5.3333333333vw; } } @media screen and (max-width: 800px) { .header__bannerCalender { height: 5.3333333333vw; } } @media screen and (max-width: 800px) { .header__bannerCalender { padding-left: 9.8666666667vw; } } .about { position: relative; background-color: #fff; } .about__backImg2 { position: absolute; top: 33%; left: 0px; width: 24.921875vw; } @media screen and (max-width: 800px) { .about__backImg2 { width: 40vw; } } @media screen and (max-width: 800px) { .about__backImg2 { top: 53%; left: 0%; } } .about__inner { width: 80%; margin: auto; margin-bottom: 9.375vw; } @media screen and (max-width: 800px) { .about__inner { margin-bottom: 32vw; } } .about__content { display: flex; justify-content: space-between; align-items: center; color: #001455; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .about__content { margin-top: 10.9333333333vw; } } @media screen and (max-width: 800px) { .about__content { flex-direction: column; } } .about__content--2 { display: flex; justify-content: space-between; align-items: center; color: #001455; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .about__content--2 { margin-top: 10.9333333333vw; } } @media screen and (max-width: 800px) { .about__content--2 { display: flex; flex-direction: column-reverse; } } .about__image { width: 35.15625vw; height: 26.640625vw; } @media screen and (max-width: 800px) { .about__image { width: 80.2666666667vw; } } @media screen and (max-width: 800px) { .about__image { height: 58.4vw; } } .about__image--2 { margin-top: 3.125vw; width: 35.15625vw; height: 26.640625vw; } @media screen and (max-width: 800px) { .about__image--2 { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .about__image--2 { width: 80.2666666667vw; } } @media screen and (max-width: 800px) { .about__image--2 { height: 58.4vw; } } .about__explanation { display: flex; flex-direction: column; color: #001455; } .about__text { font-size: 1.25vw; width: 39.0625vw; line-height: 2; color: #001455; padding-top: 1.25vw; } @media screen and (max-width: 800px) { .about__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .about__text { width: 80vw; } } @media screen and (max-width: 800px) { .about__text { padding-top: 4.2666666667vw; } } .about__buttonEnd { display: flex; justify-content: flex-end; } @media screen and (max-width: 800px) { .about__buttonEnd { justify-content: center; } } .about__viewbutton { width: 18.75vw; display: flex; justify-content: center; align-items: center; margin-top: 4.375vw; border-radius: 100px; border: 1px solid #d72d56; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .about__viewbutton { width: 64vw; } } @media screen and (max-width: 800px) { .about__viewbutton { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .about__viewbutton { align-self: center; } } .about__viewbutton:hover { background-color: #d72d56; } .about__viewbutton:hover .about__viewmore { color: white; } .about__viewmore { display: inline-block; padding-top: 1.25vw; padding-bottom: 1.25vw; color: #d72d56; font-size: 1.25vw; transition: all 0.25s ease-in; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .about__viewmore { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .about__viewmore { font-size: 4.2666666667vw; } } .aboutPage { display: flex; justify-content: center; padding-top: 23.4375vw; overflow: hidden; } @media screen and (max-width: 800px) { .aboutPage { padding-top: 64vw; } } .aboutPage__inner { position: relative; display: flex; align-items: center; justify-content: space-between; width: 80%; } .aboutPage__back { position: absolute; top: 10%; left: 0; width: 43.4375vw; height: 8.28125vw; } @media screen and (max-width: 800px) { .aboutPage__back { width: 73.0666666667vw; } } @media screen and (max-width: 800px) { .aboutPage__back { height: 13.8666666667vw; } } @media screen and (max-width: 800px) { .aboutPage__back { top: 2%; } } .aboutPage__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .aboutPage__border { margin-top: 2.1333333333vw; } } .aboutPage__block { display: flex; flex-direction: column; align-items: flex-start; margin-top: 9.375vw; width: 100%; } @media screen and (max-width: 800px) { .aboutPage__block { margin-top: 32vw; } } .aboutPage__block:first-of-type { margin-top: 0vw; } @media screen and (max-width: 800px) { .aboutPage__block:first-of-type { margin-top: 0vw; } } @media screen and (max-width: 800px) { .aboutPage__block { flex-direction: column; justify-content: center; align-items: flex-start; } } .aboutPage__content { display: flex; flex-direction: column; width: 39.84375vw; } @media screen and (max-width: 800px) { .aboutPage__content { width: 80vw; } } @media screen and (max-width: 800px) { .aboutPage__content { display: none !important; justify-content: center; align-items: center; } } .aboutPage__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .aboutPage__title { font-size: 8.5333333333vw; } } .aboutPage__border { width: 6.484375vw; height: 2px; background-color: black; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .aboutPage__border { width: 14.9333333333vw; } } @media screen and (max-width: 800px) { .aboutPage__border { margin-top: 0vw; } } .aboutPage__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .aboutPage__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .aboutPage__subtitle { margin-top: 2.1333333333vw; } } .aboutPage__textTitle { font-size: 2.5vw; margin-top: 1.875vw; font-weight: 500; } @media screen and (max-width: 800px) { .aboutPage__textTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .aboutPage__textTitle { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .aboutPage__textTitle { display: none; } } .aboutPage__textTitleSp { display: none; font-weight: 500; } @media screen and (max-width: 800px) { .aboutPage__textTitleSp { width: 100%; display: block; text-align: center; font-size: 2.5vw; margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__textTitleSp { font-size: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__textTitleSp { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .aboutPage__textTitleSp--area { font-size: 1.875vw; margin-top: 6.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__textTitleSp--area { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__textTitleSp--area { margin-top: 10.6666666667vw; } } .aboutPage__textTitleSpSpan { display: none; } @media screen and (max-width: 800px) { .aboutPage__textTitleSpSpan { display: block; text-align: center; font-size: 2.5vw; white-space: nowrap; margin-left: -0.3125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__textTitleSpSpan { font-size: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__textTitleSpSpan { margin-left: -1.0666666667vw; } } .aboutPage__text { display: block; width: 33.125vw; font-size: 1.25vw; margin-top: 1.25vw; line-height: 2; } @media screen and (max-width: 800px) { .aboutPage__text { width: 80vw; } } @media screen and (max-width: 800px) { .aboutPage__text { font-size: 4vw; } } @media screen and (max-width: 800px) { .aboutPage__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .aboutPage__right { display: none; } } .aboutPage__rightSp { display: none; } @media screen and (max-width: 800px) { .aboutPage__rightSp { display: block; margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .aboutPage__rightSp { margin-top: 10.6666666667vw; } } .aboutPage__img { width: 37.109375vw; height: 37.109375vw; } @media screen and (max-width: 800px) { .aboutPage__img { width: 80vw; } } @media screen and (max-width: 800px) { .aboutPage__img { height: 80vw; } } .aboutTop { padding-top: 10.9375vw; } @media screen and (max-width: 800px) { .aboutTop { padding-top: 26.6666666667vw; } } .aboutTop__box { position: relative; } .aboutTop__img { position: absolute; top: 50%; left: 42%; transform: translate(-50%, 0); width: 16.328125vw; height: 13.75vw; } @media screen and (max-width: 800px) { .aboutTop__img { width: 55.7333333333vw; } } @media screen and (max-width: 800px) { .aboutTop__img { height: 46.9333333333vw; } } @media screen and (max-width: 800px) { .aboutTop__img { left: 22%; } } .aboutTop__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0); margin-top: 2.5vw; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media screen and (max-width: 800px) { .aboutTop__content { margin-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .aboutTop__content { justify-content: center; align-items: center; } } .aboutTop__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .aboutTop__title { font-size: 8.5333333333vw; } } .aboutTop__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .aboutTop__border { margin-top: 2.1333333333vw; } } .aboutTop__subtitle { font-size: 1.25vw; margin-top: 1.25vw; white-space: nowrap; } @media screen and (max-width: 800px) { .aboutTop__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .aboutTop__subtitle { margin-top: 2.1333333333vw; } } .training { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-top: 9.375vw; overflow: hidden; width: 100%; } @media screen and (max-width: 800px) { .training { margin-top: 21.3333333333vw; } } .training--recruit { align-items: flex-start; } .training__inner { display: flex; justify-content: space-between; align-items: center; width: 90%; } .training__inner--recruit { width: 90%; } @media screen and (max-width: 800px) { .training__inner { flex-direction: column; width: 100%; } } .training__img { width: 48.515625vw; height: 41.09375vw; } @media screen and (max-width: 800px) { .training__img { width: 89.8666666667vw; } } @media screen and (max-width: 800px) { .training__img { height: 76vw; } } .training__img--recruit { width: 47.65625vw; height: 34.453125vw; } @media screen and (max-width: 800px) { .training__img--recruit { width: 98.4vw; } } @media screen and (max-width: 800px) { .training__img--recruit { height: 71.4666666667vw; } } @media screen and (max-width: 800px) { .training__img { margin-right: 11%; } } .training__content { display: flex; flex-direction: column; justify-content: flex-start; } @media screen and (max-width: 800px) { .training__content { margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .training__content { margin-top: 4.2666666667vw; } } .training__title { font-size: 2.5vw; font-weight: 500; } @media screen and (max-width: 800px) { .training__title { font-size: 6.4vw; } } .training__title .training__title--span { font-size: 2.5vw; color: #d72d56; font-weight: 700; } @media screen and (max-width: 800px) { .training__title .training__title--span { font-size: 6.4vw; } } .training__content svg { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .training__content svg { margin-top: 2.1333333333vw; } } .training__text { font-size: 1.25vw; margin-top: 1.875vw; width: 39.84375vw; line-height: 2; } @media screen and (max-width: 800px) { .training__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .training__text { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .training__text { width: 80vw; } } .training__text--recruit { width: 38.28125vw; } @media screen and (max-width: 800px) { .training__text--recruit { width: 80vw; } } .training__effect { width: 80%; margin: auto; display: flex; flex-direction: column; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .training__effect { margin-top: 10.6666666667vw; } } .training__effectTitle { display: flex; justify-content: center; font-weight: 500; } .training__container { display: flex; justify-content: space-between; flex-wrap: wrap; } @media screen and (max-width: 800px) { .training__container .training__item:last-child { order: 1; width: 100%; display: flex; justify-content: center; } } .training__item { padding-top: 4.375vw; display: flex; align-items: center; flex-direction: column; justify-content: center; } @media screen and (max-width: 800px) { .training__item { padding-top: 10.6666666667vw; } } .training__icon { width: 11.71875vw; height: 11.71875vw; border-radius: 100px; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; } @media screen and (max-width: 800px) { .training__icon { width: 34.6666666667vw; } } @media screen and (max-width: 800px) { .training__icon { height: 34.6666666667vw; } } .training__itemText { font-size: 1.25vw; padding-top: 2.734375vw; display: flex; text-align: center; font-weight: 700; } @media screen and (max-width: 800px) { .training__itemText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .training__itemText { padding-top: 2.1333333333vw; } } .effect { display: flex; justify-content: center; align-items: center; margin-top: 9.375vw; padding-bottom: 0.625vw; overflow: hidden; } @media screen and (max-width: 800px) { .effect { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .effect { padding-bottom: 2.1333333333vw; } } .effect__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; } .effect__effctTitle { font-size: 2.5vw; } @media screen and (max-width: 800px) { .effect__effctTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .effect__effctTitle { display: none; } } .effect__effctTitleSp { display: none; } @media screen and (max-width: 800px) { .effect__effctTitleSp { display: block; font-size: 2.5vw; text-align: center; } } @media screen and (max-width: 800px) and (max-width: 800px) { .effect__effctTitleSp { font-size: 6.4vw; } } .effect__content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875vw; width: 100%; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .effect__content { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .effect__content { grid-template-columns: repeat(1, 1fr); gap: 1.09375vw; } } .effect__contentRows { display: flex; justify-content: center; align-items: center; gap: 6.25vw; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .effect__contentRows { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .effect__contentRows { flex-direction: column; } } .effect__card { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding-top: 1.875vw; width: 25.234375vw; height: 39.0625vw; border-radius: 10px; background: #fff; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; } @media screen and (max-width: 800px) { .effect__card { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .effect__card { width: 80vw; } } @media screen and (max-width: 800px) { .effect__card { height: 133.3333333333vw; } } .effect__card--rows { width: 25.234375vw; height: 35.9375vw; } @media screen and (max-width: 800px) { .effect__card--rows { width: 80vw; } } @media screen and (max-width: 800px) { .effect__card--rows { height: 125.3333333333vw; } } @media screen and (max-width: 800px) { .effect__card--rows { margin-bottom: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .effect__card--rows { margin-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .effect__card { margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .effect__card { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .effect__card:first-child { margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .effect__card:first-child { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .effect__card--second { height: 38.28125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .effect__card--second { height: 130.6666666667vw; } } @media screen and (max-width: 800px) { .effect__card--thaad { height: 39.84375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .effect__card--thaad { height: 136vw; } } .effect__img { width: 11.71875vw; height: 11.71875vw; } @media screen and (max-width: 800px) { .effect__img { width: 40vw; } } @media screen and (max-width: 800px) { .effect__img { height: 40vw; } } .effect__title { font-size: 1.25vw; font-weight: 700; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .effect__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .effect__title { margin-top: 4.2666666667vw; } } .effect__text { width: 22.734375vw; margin-top: 1.25vw; font-size: 1.25vw; line-height: 2; font-weight: 400; } @media screen and (max-width: 800px) { .effect__text { width: 74.6666666667vw; } } @media screen and (max-width: 800px) { .effect__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .effect__text { font-size: 4.2666666667vw; } } .effect__text--sp { font-size: 1.25vw; margin-top: 1.25vw; font-weight: 500; } @media screen and (max-width: 800px) { .effect__text--sp { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .effect__text--sp { margin-top: 4.2666666667vw; } } .features { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; padding-top: 10.9375vw; width: 100%; overflow: hidden; } @media screen and (max-width: 800px) { .features { padding-top: 29.8666666667vw; } } .features--recruit { padding-top: 8.75vw; } @media screen and (max-width: 800px) { .features--recruit { padding-top: 21.3333333333vw; } } .features__inner { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; } .features__back { position: absolute; top: 0%; width: 41.015625vw; height: 7.8125vw; } @media screen and (max-width: 800px) { .features__back { width: 73.0666666667vw; } } @media screen and (max-width: 800px) { .features__back { height: 13.8666666667vw; } } @media screen and (max-width: 800px) { .features__back { top: 1%; } } .features__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .features__title { font-size: 8.5333333333vw; } } .features__title--recruit { font-size: 3.125vw; font-family: "Noto Serif JP", serif; font-weight: 500; } @media screen and (max-width: 800px) { .features__title--recruit { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .features__title--recruit { width: 80%; text-align: center; } } .features__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .features__border { margin-top: 2.1333333333vw; } } .features__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .features__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .features__subtitle { margin-top: 2.1333333333vw; } } .features__contentInner { display: flex; align-items: flex-end; flex-direction: column; width: 100%; } .features__contentInner--recruit { align-items: center; } .features__innerLeft { display: flex; align-items: flex-start; width: 100%; } .features__contentBox { display: flex; justify-content: flex-start; flex-direction: column; } @media screen and (max-width: 800px) { .features__contentBox { margin-top: 3.125vw; width: 80%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentBox { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentBox { width: 90%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentBox--ml { margin-left: 10%; } } @media screen and (max-width: 800px) { .features__contentBox--thaad { width: 100%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentBox--thaad { margin-top: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) and (max-width: 800px) { .features__contentBox--thaad { margin-top: 0vw; } } .features__content { display: flex; align-items: flex-start; justify-content: space-between; width: 90%; padding-top: 3.125vw; } @media screen and (max-width: 800px) { .features__content { padding-top: 10.6666666667vw; } } .features__content--top { padding-top: 4.375vw; } @media screen and (max-width: 800px) { .features__content--top { padding-top: 10.6666666667vw; } } .features__content--recruit { width: 80%; align-items: center; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .features__content--recruit { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .features__content { flex-direction: column-reverse; } .features__content--reverse { flex-direction: column; align-items: center; } } .features__numberFlex { display: flex; align-items: center; gap: 0.625vw; } .features__number { font-size: 1.875vw; color: #d72d56; font-family: "Futura-Medium-Italic-font"; } @media screen and (max-width: 800px) { .features__number { font-size: 6.4vw; } } .features__contentTitle { font-size: 2.5vw; margin-top: 0.625vw; font-weight: 500; } @media screen and (max-width: 800px) { .features__contentTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .features__contentTitle { margin-top: 2.1333333333vw; } } .features__contentTitle--recruit { font-size: 1.875vw; padding-bottom: 1.25vw; font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .features__contentTitle--recruit { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .features__contentTitle--recruit { padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .features__contentTitle { display: none; } } .features__contentTitleSp { display: none; } @media screen and (max-width: 800px) { .features__contentTitleSp { font-weight: 500; display: block; font-size: 2.5vw; margin-top: 0.625vw; line-height: 1.5; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentTitleSp { font-size: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentTitleSp { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .features__contentTitleSp--recruit { margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .features__contentTitleSp--recruit { margin-top: 6.4vw; } } .features__contentText { font-size: 1.25vw; margin-top: 1.875vw; width: 38.515625vw; line-height: 2; } @media screen and (max-width: 800px) { .features__contentText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .features__contentText { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .features__contentText { width: 80vw; } } .features__contentText--recruit { width: 41.171875vw; font-weight: 500; } @media screen and (max-width: 800px) { .features__contentText--recruit { width: 80vw; } } .features__img { width: 45.46875vw; height: 29.53125vw; border-radius: 30px 0px 0px 30px; background: url() lightgray 50%/cover no-repeat; /* feature */ box-shadow: 36px 16px 32px 0px #d4c3d4; } @media screen and (max-width: 800px) { .features__img { width: 89.8666666667vw; } } @media screen and (max-width: 800px) { .features__img { height: 58.1333333333vw; } } .features__img--02 { border-radius: 0px 30px 30px 0px; } .features__img--recruit { width: 28.75vw; height: 19.21875vw; border-radius: 0px 0px 0px 0px; background: none; box-shadow: none; } @media screen and (max-width: 800px) { .features__img--recruit { width: 80vw; } } @media screen and (max-width: 800px) { .features__img--recruit { height: 53.3333333333vw; } } .award { display: flex; justify-content: center; flex-direction: column; align-items: center; padding-top: 9.375vw; width: 100%; overflow: hidden; } @media screen and (max-width: 800px) { .award { padding-top: 29.8666666667vw; } } .award__inner { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 80%; } .award__back { position: absolute; top: 0%; width: 31.484375vw; height: 8.046875vw; } @media screen and (max-width: 800px) { .award__back { width: 54.6666666667vw; } } @media screen and (max-width: 800px) { .award__back { height: 14.1333333333vw; } } @media screen and (max-width: 800px) { .award__back { top: 3%; } } .award__title { font-size: 3.75vw; font-weight: 700; } @media screen and (max-width: 800px) { .award__title { font-size: 8.5333333333vw; } } .award__title--jp { font-size: 3.125vw; font-weight: 700; } @media screen and (max-width: 800px) { .award__title--jp { font-size: 6.4vw; } } .award__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .award__border { margin-top: 2.1333333333vw; } } .award__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .award__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .award__subtitle { margin-top: 2.1333333333vw; } } .award__content { display: flex; justify-content: space-between; align-items: center; margin-top: 3.125vw; width: 100%; } @media screen and (max-width: 800px) { .award__content { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .award__content { flex-direction: column; } } .award__img { width: 25.3125vw; height: 14.53125vw; } @media screen and (max-width: 800px) { .award__img { width: 80vw; } } @media screen and (max-width: 800px) { .award__img { height: 45.8666666667vw; } } .award__text { font-size: 1.09375vw; margin-top: 2.5vw; text-align: center; } @media screen and (max-width: 800px) { .award__text { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .award__text { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .award__text { display: none; } } .award__textSp { display: none; } @media screen and (max-width: 800px) { .award__textSp { display: block; font-size: 1.09375vw; margin-top: 2.5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .award__textSp { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .award__textSp { margin-top: 6.4vw; } } .store { display: flex; justify-content: center; flex-direction: column; align-items: center; padding-top: 10.9375vw; width: 100%; } @media screen and (max-width: 800px) { .store { padding-top: 21.3333333333vw; } } .store--voice { padding-top: 0vw; } @media screen and (max-width: 800px) { .store--voice { padding-top: 0vw; } } .store__inner { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; } .store__back { position: absolute; top: 0%; width: 25.9375vw; height: 7.96875vw; } @media screen and (max-width: 800px) { .store__back { width: 44.2666666667vw; } } @media screen and (max-width: 800px) { .store__back { height: 13.3333333333vw; } } @media screen and (max-width: 800px) { .store__back { top: 1%; } } .store__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .store__title { font-size: 8.5333333333vw; } } .store__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .store__border { margin-top: 2.1333333333vw; } } .store__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .store__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .store__subtitle { margin-top: 2.1333333333vw; } } .store__store { display: flex; flex-wrap: wrap; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .store__store { margin-top: 10.6666666667vw; } } .store__content { position: relative; width: 25%; overflow: hidden; } .store__content:hover .store__image { transform: scale(1.2); } @media screen and (max-width: 800px) { .store__content { width: 100%; } } .store__image { width: 100%; display: block; transition: transform 0.6s ease; } .store__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; display: flex; flex-direction: column; align-items: center; } .store__address { font-size: 1.875vw; font-weight: 500; } @media screen and (max-width: 800px) { .store__address { font-size: 6.4vw; } } .store__name { font-size: 1.25vw; margin-top: 0.625vw; white-space: nowrap; font-weight: 500; } @media screen and (max-width: 800px) { .store__name { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .store__name { margin-top: 2.1333333333vw; } } .store__buttonWrapper { width: 100%; display: flex; justify-content: center; align-items: center; } .store__button { width: 18.671875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; border: 1px solid #d72d56; color: #d72d56; text-align: center; border-radius: 999px; font-size: 1.25vw; margin-top: 4.375vw; transition: all 0.25s ease-in; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .store__button { width: 63.7333333333vw; } } @media screen and (max-width: 800px) { .store__button { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .store__button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .store__button { margin-top: 14.9333333333vw; } } .store__button:hover { background-color: #d72d56; color: white; } .qa { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .qa--archive { margin-top: 10.9375vw; } @media screen and (max-width: 800px) { .qa--archive { margin-top: 37.3333333333vw; } } .qa--courses { margin-top: 10.9375vw; padding-bottom: 0vw; width: 100%; } @media screen and (max-width: 800px) { .qa--courses { margin-top: 37.3333333333vw; } } @media screen and (max-width: 800px) { .qa--courses { padding-bottom: 0vw; } } .qa__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 3.125vw; width: 80%; } @media screen and (max-width: 800px) { .qa__inner { margin-top: 10.6666666667vw; } } .qa__archiveStart { display: flex; justify-content: flex-start; width: 100%; margin-top: 5vw; } @media screen and (max-width: 800px) { .qa__archiveStart { margin-top: 8.5333333333vw; } } .qa__back { position: absolute; top: 0; width: 23.984375vw; height: 10.78125vw; } @media screen and (max-width: 800px) { .qa__back { width: 73.0666666667vw; } } @media screen and (max-width: 800px) { .qa__back { height: 33.0666666667vw; } } .qa__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .qa__title { font-size: 8.5333333333vw; } } .qa__border { width: 6.484375vw; height: 2px; background-color: black; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .qa__border { width: 14.9333333333vw; } } @media screen and (max-width: 800px) { .qa__border { margin-top: 2.1333333333vw; } } .qa__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .qa__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__subtitle { margin-top: 4.2666666667vw; } } .qa__archiveTitle { font-size: 1.875vw; font-weight: 500; } @media screen and (max-width: 800px) { .qa__archiveTitle { font-size: 6.4vw; } } .qa__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; } .qa__list { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding-top: 4.375vw; } @media screen and (max-width: 800px) { .qa__list { padding-top: 10.6666666667vw; } } .qa__list--archive { padding-top: 2.5vw; } @media screen and (max-width: 800px) { .qa__list--archive { padding-top: 8.5333333333vw; } } .qa__item { display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; } .qa__borderQa { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1); } .qa__q { display: flex; justify-content: space-between; align-items: center; width: 96%; padding-top: 1.875vw; padding-bottom: 1.875vw; } @media screen and (max-width: 800px) { .qa__q { padding-top: 6.4vw; padding-bottom: 6.4vw; } } .qa__qText { display: flex; align-items: center; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 1.25vw; } @media screen and (max-width: 800px) { .qa__qText { font-size: 4.2666666667vw; } } .qa__qText span { font-size: 2.5vw; margin-right: 1.25vw; color: #d72d56; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .qa__qText span { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .qa__qText span { margin-right: 4.2666666667vw; } } .qa__button { display: flex; justify-content: center; align-items: center; width: 3.125vw; height: 3.125vw; background: none !important; border: none !important; flex-shrink: 0; background-color: none !important; } @media screen and (max-width: 800px) { .qa__button { width: 8.5333333333vw; } } @media screen and (max-width: 800px) { .qa__button { height: 8.5333333333vw; } } .qa__button img { display: block; width: 1.71875vw; height: 1.71875vw; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 800px) { .qa__button img { width: 4.8vw; } } @media screen and (max-width: 800px) { .qa__button img { height: 4.8vw; } } .qa__a { display: none; align-items: center; width: 96%; max-width: 96%; padding-bottom: 1.875vw; } @media screen and (max-width: 800px) { .qa__a { padding-bottom: 6.4vw; } } .qa__aTitle { font-size: 2.5vw; margin-right: 1.25vw; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .qa__aTitle { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .qa__aTitle { margin-right: 4.2666666667vw; } } .qa__aText { font-size: 1.25vw; } @media screen and (max-width: 800px) { .qa__aText { font-size: 4.2666666667vw; } } .qa__text { font-size: 1.25vw; line-height: 1.5; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .qa__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__text { margin-top: 6.4vw; } } .qa__ban { display: flex; flex-direction: column; margin-top: 6.25vw; width: 100%; margin-left: 20%; } @media screen and (max-width: 800px) { .qa__ban { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .qa__ban { width: 80%; margin-left: 0; } } .qa__banTitle { font-size: 1.875vw; color: #d72d56; } @media screen and (max-width: 800px) { .qa__banTitle { font-size: 6.4vw; } } .qa__banAsterisk { font-size: 1.25vw; margin-top: 1.875vw; list-style: 2; } @media screen and (max-width: 800px) { .qa__banAsterisk { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__banAsterisk { margin-top: 6.4vw; } } .qa__banList { margin-top: 1.875vw; display: flex; padding-top: 1.25vw; padding-bottom: 1.25vw; padding-left: 1.25vw; padding-right: 1.25vw; border-radius: 15px; border: 1px solid #d72d56; width: 80%; } @media screen and (max-width: 800px) { .qa__banList { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .qa__banList { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__banList { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__banList { flex-direction: column; width: 90%; } } .qa__row { margin-right: 6.25vw; } @media screen and (max-width: 800px) { .qa__row { margin-right: 0vw; } } .qa__column { display: flex; flex-direction: column; margin-top: 1.875vw; border-radius: 15px; border: 1px solid #d72d56; width: 80%; padding-top: 1.25vw; padding-bottom: 1.25vw; padding-left: 1.25vw; padding-right: 1.25vw; } @media screen and (max-width: 800px) { .qa__column { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .qa__column { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__column { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__column { width: 90%; } } .qa__banText { font-size: 1.25vw; margin-top: 0.625vw; word-break: break-word; } @media screen and (max-width: 800px) { .qa__banText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .qa__banText { margin-top: 2.1333333333vw; } } .voice-card { position: relative; display: flex; flex-direction: column; overflow: hidden; filter: drop-shadow(2px 2px 8px #d4c3d4) drop-shadow(-2px -2px 8px #fff); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } @media screen and (max-width: 800px) { .voice-card { align-items: center; } } .voice-card__link { text-decoration: none; color: inherit; display: block; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; filter: drop-shadow(2px 2px 8px #d4c3d4) drop-shadow(-2px -2px 8px #fff); } .voice-card__link:hover .voice-card__image { transform: scale(1.05); } .voice-card__link--none { filter: none; } .voice-card__imgWrapper { width: 100%; position: relative; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; } .voice-card__imgWrapper::before { display: block; content: ""; padding-top: 63.1756756757%; } .voice-card__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .voice-card__imgWrapper--courses { position: relative; } .voice-card__imgWrapper--courses::before { display: block; content: ""; padding-top: 60.1351351351%; } .voice-card__imgWrapper--courses > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .voice-card__image { width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: all 0.25s ease-in; } .voice-card__content { padding-top: 1.875vw; padding-bottom: 1.875vw; padding-left: 1.875vw; padding-right: 1.875vw; background-color: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } @media screen and (max-width: 800px) { .voice-card__content { padding-top: 6.4vw; padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .voice-card__content { padding-left: 6.4vw; padding-right: 6.4vw; } } .voice-card__content--courses { position: relative; padding-top: 0vw; padding-bottom: 0vw; padding-top: 1.25vw; padding-bottom: 1.25vw; padding-top: 1.25vw; padding-bottom: 1.25vw; padding-left: 1.25vw; padding-right: 1.25vw; height: 13.4375vw; } @media screen and (max-width: 800px) { .voice-card__content--courses { padding-top: 0vw; padding-bottom: 0vw; } } @media screen and (max-width: 800px) { .voice-card__content--courses { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__content--courses { padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__content--courses { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__content--courses { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__content--courses { height: 45.8666666667vw; } } .voice-card__content--courses--single { height: 20.3125vw; } @media screen and (max-width: 800px) { .voice-card__content--courses--single { height: 69.3333333333vw; } } .voice-card__content-top { display: flex; } .voice-card__content-top-left { border-left: 2px solid #d72d56; margin-right: 1.25vw; } @media screen and (max-width: 800px) { .voice-card__content-top-left { margin-right: 4.2666666667vw; } } .voice-card__content-top-right { display: flex; flex-direction: column; justify-content: space-between; } .voice-card__content-top-right-item { margin-bottom: 8px; font-size: 1.25vw; font-weight: 500; color: black; } @media screen and (max-width: 800px) { .voice-card__content-top-right-item { font-size: 4.2666666667vw; } } .voice-card__content-top-right-item:last-child { margin-bottom: 0; } .voice-card__content-bottom { font-size: 1.09375vw; margin-top: 1.25vw; font-weight: 300; line-height: 2; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: black; } @media screen and (max-width: 800px) { .voice-card__content-bottom { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .voice-card__content-bottom { margin-top: 4.2666666667vw; } } .voice-card__content-bottom--courses { height: 7.5em; } .voice-card__content-bottom--experience { font-size: 1.09375vw; color: #d72d56; font-weight: 300; margin-top: 0vw; } @media screen and (max-width: 800px) { .voice-card__content-bottom--experience { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .voice-card__content-bottom--experience { margin-top: 0vw; } } .voice-card__content-bottom--experience--end { color: black; } .voice-card__content-bottom--first { margin-top: 1.25vw; } @media screen and (max-width: 800px) { .voice-card__content-bottom--first { margin-top: 4.2666666667vw; } } .voice-card__content-bottom--price { font-size: 1.25vw; color: black; text-align: center; margin-top: 1.25vw; font-weight: 500; } @media screen and (max-width: 800px) { .voice-card__content-bottom--price { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__content-bottom--price { margin-top: 4.2666666667vw; } } .voice-card__content-bottom--price--pink { color: #d72d56; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .voice-card__content-bottom--price--pink { margin-top: 2.1333333333vw; } } .voice-card__contentBold { font-weight: 700; } .voice-card__viewmore { position: absolute; padding-bottom: 0.625vw; padding-right: 1.25vw; bottom: 0; right: 0; display: flex; justify-content: flex-end; } @media screen and (max-width: 800px) { .voice-card__viewmore { padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .voice-card__viewmore { padding-right: 4.2666666667vw; } } .voice-card__viewmoreFlex { display: flex; align-items: center; gap: 0.625vw; } .voice-card__viewmoreFlex--experience { justify-content: space-between; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .voice-card__viewmoreFlex--experience { margin-top: 4.2666666667vw; } } .voice-card__viewmoreText { font-size: 1.25vw; color: #d72d56; } @media screen and (max-width: 800px) { .voice-card__viewmoreText { font-size: 4.2666666667vw; } } .voice-card__viewmoreImg { width: 1.640625vw; height: 1.640625vw; } @media screen and (max-width: 800px) { .voice-card__viewmoreImg { width: 5.6vw; } } @media screen and (max-width: 800px) { .voice-card__viewmoreImg { height: 5.6vw; } } .voice-card__store { display: flex; align-items: center; justify-content: center; width: 9.84375vw; border: 1px solid #d72d56; border-radius: 999px; gap: 0.625vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .voice-card__store { width: 33.6vw; } } .voice-card__store:hover { background-color: #d72d56; } .voice-card__store:hover .voice-card__storeText { color: white; } .voice-card__store:hover .voice-card__storeArrow path { stroke: white; } .voice-card__storeText { font-size: 1.25vw; color: #d72d56; padding-top: 0.625vw; padding-bottom: 0.625vw; transition: all 0.25s ease-in; font-weight: 500; } @media screen and (max-width: 800px) { .voice-card__storeText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__storeText { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } .voice-card__storeArrow { width: 0.78125vw; height: 0.390625vw; } @media screen and (max-width: 800px) { .voice-card__storeArrow { width: 2.6666666667vw; } } @media screen and (max-width: 800px) { .voice-card__storeArrow { height: 1.3333333333vw; } } .voice-card .voice-card__storeArrow path { transition: stroke 0.25s ease-in; } .voice-card__underTextFlex { display: flex; justify-content: center; } .voice-card__underText { font-size: 1.09375vw; line-height: 1.5; margin-top: 3.125vw; width: 100%; } @media screen and (max-width: 800px) { .voice-card__underText { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .voice-card__underText { margin-top: 10.6666666667vw; } } .voice-card__content--courses--single > p { display: flex; align-items: center; font-size: 1.015625vw; line-height: 2; } @media screen and (max-width: 800px) { .voice-card__content--courses--single > p { font-size: 3.4666666667vw; } } .voice-card__content--courses--single > p > a { font-size: 1.015625vw; line-height: 2; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: black; color: #d72d56; text-decoration: underline; } @media screen and (max-width: 800px) { .voice-card__content--courses--single > p > a { font-size: 3.4666666667vw; } } .voice-card__content--courses > p { display: flex; align-items: flex-start; font-size: 1.09375vw; line-height: 2; } @media screen and (max-width: 800px) { .voice-card__content--courses > p { font-size: 3.7333333333vw; } } .voice-card__store-details { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-in, padding 0.25s ease-in; padding-top: 0; font-size: 1.09375vw; } @media screen and (max-width: 800px) { .voice-card__store-details { font-size: 3.7333333333vw; } } .voice-card__store.active + .voice-card__store-details { max-height: 100px; font-size: 1.09375vw; } @media screen and (max-width: 800px) { .voice-card__store.active + .voice-card__store-details { font-size: 3.7333333333vw; } } .voice-card__store.active + .voice-card__store-details { display: block; } .voice-card__store.active .voice-card__storeArrow { transform: rotate(180deg); transition: transform 0.25s ease-in; } .voice-card__storeArrow { transition: transform 0.25s ease-in; } .voice-card__viewmoreFlex--experience a { display: flex; align-items: center; justify-content: center; width: 9.84375vw; border: 1px solid #d72d56; border-radius: 999px; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .voice-card__viewmoreFlex--experience a { width: 33.6vw; } } .voice-card__viewmoreFlex--experience a:hover { background-color: #d72d56; } .voice-card__viewmoreFlex--experience a:hover .voice-card__reservationText { color: white; } .voice-card__reservation p { font-size: 1.25vw; color: #d72d56; padding-top: 0.625vw; padding-bottom: 0.625vw; transition: all 0.25s ease-in; font-weight: 500; } @media screen and (max-width: 800px) { .voice-card__reservation p { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voice-card__reservation p { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } .campain { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; padding-top: 10.9375vw; width: 100%; overflow: hidden; } @media screen and (max-width: 800px) { .campain { padding-top: 29.8666666667vw; } } .campain__inner { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 80%; margin-bottom: 3.125vw; } @media screen and (max-width: 800px) { .campain__inner { margin-bottom: 8.5333333333vw; } } .campain__back { position: absolute; top: 0%; width: 48.984375vw; height: 10.390625vw; } @media screen and (max-width: 800px) { .campain__back { width: 73.3333333333vw; } } @media screen and (max-width: 800px) { .campain__back { height: 15.4666666667vw; } } @media screen and (max-width: 800px) { .campain__back { top: 1%; } } .campain__content { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .campain__content { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .campain__content { flex-direction: column; } } .campain__imgWrapper { width: 46.875vw; position: relative; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; } @media screen and (max-width: 800px) { .campain__imgWrapper { width: 80vw; } } .campain__imgWrapper::before { display: block; content: ""; padding-top: 50%; } .campain__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .campain__textBox { display: flex; justify-content: flex-start; flex-direction: column; width: 30vw; } @media screen and (max-width: 800px) { .campain__textBox { width: 80vw; } } .campain__title { padding-top: 0vw; padding-bottom: 1.25vw; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .campain__title { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .campain__title { padding-bottom: 4.2666666667vw; } } .campain__title p { font-size: 1.875vw; font-weight: 700; } @media screen and (max-width: 800px) { .campain__title p { font-size: 6.4vw; } } .campain__plan { margin-top: 1.25vw; } @media screen and (max-width: 800px) { .campain__plan { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .campain__plan { white-space: normal; } } .campain__plan p { font-size: 1.875vw; } @media screen and (max-width: 800px) { .campain__plan p { font-size: 6.4vw; } } .campain__plan p span { font-size: 1.875vw; color: #d72d56; } @media screen and (max-width: 800px) { .campain__plan p span { font-size: 6.4vw; } } .campain__another { margin-top: 1.25vw; } @media screen and (max-width: 800px) { .campain__another { margin-top: 4.2666666667vw; } } .campain__another p { font-size: 1.25vw; } @media screen and (max-width: 800px) { .campain__another p { font-size: 4.2666666667vw; } } .campain__text { font-size: 1.25vw; width: 80%; } @media screen and (max-width: 800px) { .campain__text { font-size: 4.2666666667vw; } } .footerContact { position: relative; width: 100%; background-size: cover; background-image: url("../images/footer_contact.webp"); } @media screen and (max-width: 800px) { .footerContact { background-image: url("../images/footer_contentSp.webp"); } } .footerContact__content { display: flex; align-items: center; } @media screen and (max-width: 800px) { .footerContact__content { flex-direction: column; } } .footerContact__content > * + * { border-left: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .footerContact__content > * + * { border-left: none; border-top: 1px solid rgba(0, 0, 0, 0.1); } } .footerContact__title { font-size: 1.875vw; font-family: "Marcellus-Regular"; font-weight: 400; background-color: transparent; } @media screen and (max-width: 800px) { .footerContact__title { font-size: 6.4vw; } } .footerContact__text { font-size: 1.25vw; margin-top: 1.25vw; line-height: 2; font-weight: 500; } @media screen and (max-width: 800px) { .footerContact__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerContact__text { display: none; } } .footerContact__textSp { display: none; } @media screen and (max-width: 800px) { .footerContact__textSp { font-weight: 400; display: block; font-size: 1.25vw; margin-top: 1.25vw; line-height: 2; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__textSp { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footerContact__textSp { margin-top: 4.2666666667vw; } } .footerContact__form { display: flex; gap: 11.484375vw; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .footerContact__form { margin-top: 6.4vw; } } .footerContact__form__tell, .footerContact__form__mail { font-size: 2.5vw; color: #322a28; white-space: nowrap; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .footerContact__form__tell, .footerContact__form__mail { font-size: 6.4vw; } } .footerContact__form__mail { font-size: 2.5vw; white-space: nowrap; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .footerContact__form__mail { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .footerContact__form { flex-direction: column; gap: 1.25vw; } } .footerContact__item { width: 50%; height: 16.953125vw; align-self: stretch; } @media screen and (max-width: 800px) { .footerContact__item { height: 40vw; } } @media screen and (max-width: 800px) { .footerContact__item { width: 100%; } } .footerContact__formBox { display: flex; align-items: center; justify-content: center; gap: 1.25vw; transition: all 0.25s ease-in; } .footerContact__formBox:hover { opacity: 60%; } .footerContact__tellImg { width: 1.875vw; height: 1.875vw; } @media screen and (max-width: 800px) { .footerContact__tellImg { width: 6.4vw; } } @media screen and (max-width: 800px) { .footerContact__tellImg { height: 6.4vw; } } .footerContact__mailImg { width: 2.5vw; height: 1.875vw; } @media screen and (max-width: 800px) { .footerContact__mailImg { width: 8.5333333333vw; } } @media screen and (max-width: 800px) { .footerContact__mailImg { height: 6.4vw; } } .footerContact__button { margin-top: 1.875vw; width: 13.125vw; padding-top: 1.09375vw; padding-bottom: 1.09375vw; font-size: 1.25vw; cursor: pointer; border: none; background-color: #d72d56; border: 1px solid #d72d56; color: white; border-radius: 999px; transition: all 0.25s ease-in; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .footerContact__button { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .footerContact__button { width: 44.8vw; } } @media screen and (max-width: 800px) { .footerContact__button { padding-top: 3.7333333333vw; padding-bottom: 3.7333333333vw; } } @media screen and (max-width: 800px) { .footerContact__button { font-size: 4.2666666667vw; } } .footerContact__button:hover { background-color: #fffbfc; color: #d72d56; } .courses { display: flex; justify-content: center; align-items: center; flex-direction: column; } .courses__top { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; padding-top: 12.8125vw; padding-bottom: 9.375vw; background: linear-gradient(250deg, #d72d56 1.99%, rgba(215, 45, 86, 0.6) 100%); } @media screen and (max-width: 800px) { .courses__top { padding-top: 43.7333333333vw; } } @media screen and (max-width: 800px) { .courses__top { padding-bottom: 32vw; } } .courses__back { position: absolute; top: 45%; z-index: 2; width: 37.8125vw; height: 7.96875vw; } @media screen and (max-width: 800px) { .courses__back { width: 80vw; } } @media screen and (max-width: 800px) { .courses__back { height: 17.0666666667vw; } } .courses__topTitle { font-size: 3.75vw; color: white; background-color: transparent; text-align: center; width: 90%; } @media screen and (max-width: 800px) { .courses__topTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .courses__topTitle { width: 80%; } } .courses__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .courses__border { margin-top: 2.1333333333vw; } } .courses__subtitle { font-size: 1.25vw; margin-top: 1.25vw; color: white; } @media screen and (max-width: 800px) { .courses__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .courses__subtitle { margin-top: 2.1333333333vw; } } .point { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 3.75vw; width: 100%; } @media screen and (max-width: 800px) { .point { margin-top: 12.8vw; } } .point__inner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 80%; } .point__title { font-size: 2.5vw; font-weight: 500; } @media screen and (max-width: 800px) { .point__title { font-size: 6.4vw; } } .point__box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875vw; margin-top: 3.125vw; width: 100%; } @media screen and (max-width: 800px) { .point__box { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .point__box { grid-template-columns: repeat(1, 1fr); } } .point__flex { display: flex; align-items: center; justify-content: center; flex: 1 1 calc(33.333% - 16px); /* 3つで1行になるように幅を設定 */ box-sizing: border-box; gap: 1.25vw; padding-top: 1.25vw; padding-bottom: 1.25vw; border-radius: 10px; background: #fff; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; } @media screen and (max-width: 800px) { .point__flex { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .point__flex { margin-top: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .point__flex { margin-top: 4.2666666667vw; } } .point__img { width: 1.25vw; height: 1.25vw; } @media screen and (max-width: 800px) { .point__img { width: 4.2666666667vw; } } @media screen and (max-width: 800px) { .point__img { height: 4.2666666667vw; } } .point__name { font-size: 1.875vw; width: 19.53125vw; font-weight: 300; text-align: center; } @media screen and (max-width: 800px) { .point__name { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .point__name { width: 66.6666666667vw; } } .point__text { font-size: 1.09375vw; margin-top: 1.875vw; font-weight: 300; } @media screen and (max-width: 800px) { .point__text { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .point__text { margin-top: 6.4vw; } } .difficult { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin-top: 9.375vw; } @media screen and (max-width: 800px) { .difficult { margin-top: 21.3333333333vw; } } .difficult__subtitle { font-size: 1.875vw; font-weight: 500; } @media screen and (max-width: 800px) { .difficult__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .difficult__subtitle { text-align: center; } } .difficult__title { font-size: 3.125vw; color: #d72d56; margin-top: 1.25vw; font-weight: 500; } @media screen and (max-width: 800px) { .difficult__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .difficult__title { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .difficult__title { text-align: center; width: 23.4375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .difficult__title { width: 80vw; } } .difficult__inner { display: flex; justify-content: flex-start; width: 100%; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .difficult__inner { margin-top: 10.6666666667vw; } } .difficult__flex { display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 800px) { .difficult__flex { flex-direction: column; } } .difficult__img { width: 51.640625vw; height: 40.234375vw; } @media screen and (max-width: 800px) { .difficult__img { width: 98.4vw; } } @media screen and (max-width: 800px) { .difficult__img { height: 80.2666666667vw; } } .difficult__content { font-size: 1.25vw; line-height: 2; width: 40.546875vw; } @media screen and (max-width: 800px) { .difficult__content { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .difficult__content { width: 80vw; } } .flow { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 9.375vw; width: 100%; } @media screen and (max-width: 800px) { .flow { margin-top: 21.3333333333vw; } } .flow__inner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 80%; } .flow__flex { display: flex; justify-content: space-between; align-items: center; width: 100%; } .flow__flex:first-of-type { margin-top: 4.375vw; } @media screen and (max-width: 800px) { .flow__flex:first-of-type { margin-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .flow__flex { flex-direction: column; } } @media screen and (max-width: 800px) { .flow__content { margin-top: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .flow__content { margin-top: 2.1333333333vw; } } .flow__img { width: 23.4375vw; height: 14.375vw; border-radius: 10px; } @media screen and (max-width: 800px) { .flow__img { width: 80vw; } } @media screen and (max-width: 800px) { .flow__img { height: 49.0666666667vw; } } .flow__step { display: flex; align-items: center; gap: 1.25vw; } @media screen and (max-width: 800px) { .flow__step { gap: 16px; } } .flow__numberBox { display: flex; align-items: center; justify-content: center; flex-direction: column; } .flow__stepNumber { font-size: 1.25vw; color: #d72d56; } @media screen and (max-width: 800px) { .flow__stepNumber { font-size: 4.2666666667vw; } } .flow__border { width: 2px; height: 2.8125vw; background-color: #d72d56; } @media screen and (max-width: 800px) { .flow__border { height: 9.6vw; } } .flow__number { font-size: 2.34375vw; color: #d72d56; margin-top: -25%; } @media screen and (max-width: 800px) { .flow__number { font-size: 8vw; } } .flow__stepTitle { font-size: 1.875vw; font-weight: 500; } @media screen and (max-width: 800px) { .flow__stepTitle { font-size: 6.4vw; } } .flow__text { font-size: 1.25vw; line-height: 1.5; margin-top: 0.625vw; width: 50.46875vw; font-weight: 300; } @media screen and (max-width: 800px) { .flow__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .flow__text { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .flow__text { width: 80vw; } } .flow__arrowImg { width: 5.234375vw; height: 4.140625vw; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .flow__arrowImg { width: 17.8666666667vw; } } @media screen and (max-width: 800px) { .flow__arrowImg { height: 14.1333333333vw; } } @media screen and (max-width: 800px) { .flow__arrowImg { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .flow__arrowImg { margin-bottom: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .flow__arrowImg { margin-bottom: 2.1333333333vw; } } .experience { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 6.25vw; width: 100%; } @media screen and (max-width: 800px) { .experience { margin-top: 21.3333333333vw; } } .experience__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.375vw; margin-top: 4.375vw; width: 80%; } @media screen and (max-width: 800px) { .experience__inner { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .experience__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6.25vw; width: 100%; } } .footer { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 9.375vw; background: linear-gradient(250deg, #d72d56 1.99%, rgba(215, 45, 86, 0.6) 100%); } @media screen and (max-width: 800px) { .footer { margin-top: 21.3333333333vw; } } .footer__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; padding-top: 6.25vw; padding-bottom: 4.375vw; } @media screen and (max-width: 800px) { .footer__inner { padding-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .footer__inner { padding-bottom: 14.9333333333vw; } } .footer__content { display: flex; justify-content: center; align-items: center; } .footer__item { display: flex; justify-content: center; } .footer__img { width: 16.875vw; height: 8.4375vw; } @media screen and (max-width: 800px) { .footer__img { width: 57.6vw; } } @media screen and (max-width: 800px) { .footer__img { height: 28.8vw; } } .footer__sns { display: flex; align-items: center; gap: 3.125vw; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .footer__sns { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .footer__sns { flex-wrap: wrap; justify-content: space-between; } } .footer__set { display: flex; align-items: center; gap: 1.25vw; transition: all 0.25s ease-in; } .footer__set:hover { opacity: 40%; } @media screen and (max-width: 800px) { .footer__set { width: 47%; margin-bottom: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__set { margin-bottom: 4.2666666667vw; } } .footer__snsImg { width: 1.71875vw; height: 1.71875vw; } @media screen and (max-width: 800px) { .footer__snsImg { width: 5.8666666667vw; } } @media screen and (max-width: 800px) { .footer__snsImg { height: 5.8666666667vw; } } @media screen and (max-width: 800px) { .footer__snsImg { margin-right: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__snsImg { margin-right: 4.2666666667vw; } } .footer__text { font-size: 1.25vw; color: white; font-family: "Marcellus-Regular"; font-weight: 400; margin-bottom: 0vw; } @media screen and (max-width: 800px) { .footer__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footer__text { margin-bottom: 0vw; } } .footer__link { display: flex; align-items: center; justify-content: space-around; width: 100%; margin-top: 4.375vw; padding-bottom: 3.125vw; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } @media screen and (max-width: 800px) { .footer__link { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .footer__link { padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .footer__link { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 16px; padding-top: 1.875vw; border-top: 1px solid rgba(255, 255, 255, 0.4); } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__link { padding-top: 6.4vw; } } .footer__page { font-size: 1.25vw; color: #ffffff; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .footer__page { font-size: 4.2666666667vw; } } .footer__page:hover { opacity: 40%; } .footer__company { display: flex; align-items: center; gap: 0.625vw; } .footer__companyImg { width: 0.703125vw; height: 0.703125vw; } @media screen and (max-width: 800px) { .footer__companyImg { width: 2.4vw; } } @media screen and (max-width: 800px) { .footer__companyImg { height: 2.4vw; } } .footer__privacyBox { width: 100%; display: flex; justify-content: center; align-items: center; gap: 1.25vw; } @media screen and (max-width: 800px) { .footer__privacyBox { display: flex; justify-content: center; gap: 4.2666666667vw; } } .footer__privacy { font-size: 0.9375vw; color: #ffffff; margin-top: 3.125vw; transition: all 0.25s ease-in; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .footer__privacy { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .footer__privacy { margin-top: 6.4vw; } } .footer__privacy:hover { opacity: 40%; } .footer__incBox { display: flex; justify-content: flex-end; align-items: center; margin-top: 2.5vw; gap: 23.4375vw; width: 101%; } @media screen and (max-width: 800px) { .footer__incBox { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .footer__incBox { justify-content: center; align-items: center; flex-direction: column; gap: 0vw; } } .footer__inc { color: #ffffff; opacity: 60%; font-size: 0.9375vw; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .footer__inc { font-size: 3.2vw; } } .footer__top { display: flex; align-items: center; } @media screen and (max-width: 800px) { .footer__top { margin-left: auto; margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .footer__top { margin-top: 10.6666666667vw; } } .footer__back { color: white; font-size: 0.9375vw; margin-right: 1.25vw; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .footer__back { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .footer__back { margin-right: 4.2666666667vw; } } .footer__button { position: relative; width: 2.8125vw; height: 2.8125vw; border: 0.078125vw solid white; border-radius: 78.046875vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .footer__button { width: 9.6vw; } } @media screen and (max-width: 800px) { .footer__button { height: 9.6vw; } } .footer__button .footer__topimg path { stroke: #fff; } .footer__button:hover { background-color: #fff; } .footer__button:hover .footer__topimg path { stroke: #d72d56; } .footer__topimg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.625vw; } @media screen and (max-width: 800px) { .footer__topimg { width: 2.1333333333vw; } } .fv { position: relative; width: 100vw; height: 45.546875vw; padding-top: 5vw; overflow: hidden; } @media screen and (max-width: 800px) { .fv { height: 152vw; } } @media screen and (max-width: 800px) { .fv { padding-top: 17.0666666667vw; } } .fv__sectionPadding { padding-top: 9.375vw; } @media screen and (max-width: 800px) { .fv__sectionPadding { padding-top: 21.3333333333vw; } } .fv__sectionPadding--about { padding-top: 9.375vw; } @media screen and (max-width: 800px) { .fv__sectionPadding--about { padding-top: 16vw; } } .fv__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .fv__imagesp { display: none; } @media screen and (max-width: 800px) { .fv__imagesp { position: absolute; top: 0%; left: 0%; display: flex; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } } .fv__scrollText { font-family: "Marcellus-Regular"; font-weight: 400; } .fv__text { font-size: 3.75vw; line-height: 150%; position: absolute; top: 52.5%; left: 10.5%; font-weight: 400; color: #fff; } @media screen and (max-width: 800px) { .fv__text { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .fv__text { top: 66%; left: 6%; } } .fv__textSp { display: none; font-weight: 500; } @media screen and (max-width: 800px) { .fv__textSp { line-height: 1.5; display: block; } } .fv__textBold { font-size: 5.625vw; margin-right: 1.25vw; text-shadow: -4px -4px 16px rgba(255, 255, 255, 0.3), 4px 4px 16px rgba(255, 255, 255, 0.3); font-weight: 500; } @media screen and (max-width: 800px) { .fv__textBold { font-size: 12.8vw; } } @media screen and (max-width: 800px) { .fv__textBold { margin-right: 2.6666666667vw; } } .fv__achievementWrapper { width: 43%; display: flex; justify-content: space-evenly; position: absolute; top: 77%; left: 10%; } @media screen and (max-width: 800px) { .fv__achievementWrapper { width: 97%; top: 86%; left: 2%; } } .fv__imgWrapper { width: 100%; height: 100%; } .fv__achievement { width: 100%; height: 100%; display: flex; -o-object-fit: cover; object-fit: cover; } .fv__container { position: absolute; width: 90%; } @media screen and (max-width: 800px) { .fv__container { position: absolute; top: 73%; } } .fv__scroll { position: absolute; right: 0%; bottom: 0%; display: flex; align-items: center; transform-origin: right bottom; /* 回転の中心を右下に指定する */ transform: translateY(-750%) rotate(-90deg); /* 90度回転させ、要素を右下に移動する */ } @media screen and (max-width: 800px) { .fv__scroll { transform: translate(10%, -500%) rotate(-90deg); /* 90度回転させ、要素を右下に移動する */ } } .fv__scroll p { color: #fff; margin-left: 1.25vw; font-size: 1.25vw; } @media screen and (max-width: 800px) { .fv__scroll p { margin-left: 4.2666666667vw; } } @media screen and (max-width: 800px) { .fv__scroll p { font-size: 4.2666666667vw; } } .fv__scroll img { -webkit-animation: scroll 2s infinite; animation: scroll 2s infinite; /* アニメーションを設定する */ } @-webkit-keyframes scroll { 0% { opacity: 1; transform: translateX(0); /* 初期位置 */ } 100% { opacity: 0; transform: translateX(-24px); /* 上下に10pxずつ移動 */ } } @keyframes scroll { 0% { opacity: 1; transform: translateX(0); /* 初期位置 */ } 100% { opacity: 0; transform: translateX(-24px); /* 上下に10pxずつ移動 */ } } .voiceWrapper { margin-top: -12%; width: 65%; border-radius: 10px; opacity: 0.8; background: #fff; box-shadow: 0px 2px 8px 0px #d4c3d4; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media screen and (max-width: 800px) { .voiceWrapper { margin-top: 0%; width: 90%; margin-top: 2.5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .voiceWrapper { margin-top: 8.5333333333vw; } } .voiceWrapper__inner { position: relative; width: 87%; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media screen and (max-width: 800px) { .voiceWrapper__inner { width: 90%; } } .voiceWrapper__top { margin-top: -5%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-bottom: 3.125vw; } @media screen and (max-width: 800px) { .voiceWrapper__top { padding-bottom: 10.6666666667vw; } } .voiceWrapper__imgWrapper { width: 6.875vw; position: relative; border-radius: 999px; } @media screen and (max-width: 800px) { .voiceWrapper__imgWrapper { width: 16vw; } } .voiceWrapper__imgWrapper::before { display: block; content: ""; padding-top: 100%; } .voiceWrapper__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .voiceWrapper__img { border-radius: 999px; } .voiceWrapper__name, .voiceWrapper__content, .voiceWrapper__store { font-size: 1.25vw; font-weight: 500; } @media screen and (max-width: 800px) { .voiceWrapper__name, .voiceWrapper__content, .voiceWrapper__store { font-size: 3.7333333333vw; } } .voiceWrapper__name { padding-top: 0.625vw; } @media screen and (max-width: 800px) { .voiceWrapper__name { padding-top: 2.1333333333vw; } } .voiceWrapper__flex { display: flex; gap: 2.5vw; padding-top: 0.625vw; } @media screen and (max-width: 800px) { .voiceWrapper__flex { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voiceWrapper__flex { flex-direction: column; } } .voiceWrapper__title { font-size: 2.5vw; padding-top: 2.5vw; width: 70%; font-weight: 700; text-align: center; } @media screen and (max-width: 800px) { .voiceWrapper__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .voiceWrapper__title { padding-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .voiceWrapper__title { width: 90%; } } .voiceWrapper__thoughts { display: flex; flex-direction: column; padding-top: 1.25vw; } @media screen and (max-width: 800px) { .voiceWrapper__thoughts { padding-top: 4.2666666667vw; } } .voiceWrapper__thoughts--first { padding-top: 3.125vw; } @media screen and (max-width: 800px) { .voiceWrapper__thoughts--first { padding-top: 10.6666666667vw; } } .voiceWrapper__thoughtsTitleBox { display: flex; align-items: flex-end; } .voiceWrapper__border { width: 2.734375vw; margin-right: 0.625vw; height: 2px; background-color: #d72d56; } @media screen and (max-width: 800px) { .voiceWrapper__border { width: 9.3333333333vw; } } @media screen and (max-width: 800px) { .voiceWrapper__border { margin-right: 2.1333333333vw; } } .voiceWrapper__thoughtsTitle { font-size: 1.25vw; font-weight: 500; } @media screen and (max-width: 800px) { .voiceWrapper__thoughtsTitle { font-size: 4.2666666667vw; } } .voiceWrapper__thoughtsContent { font-size: 1.25vw; line-height: 2; padding-top: 0.625vw; font-weight: 300; } @media screen and (max-width: 800px) { .voiceWrapper__thoughtsContent { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .voiceWrapper__thoughtsContent { padding-top: 2.1333333333vw; } } .voice__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 4.375vw; grid-row-gap: 4.375vw; align-items: flex-start; width: 100%; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .voice__list { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .voice__list { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12.5vw; } } .download { display: flex; justify-content: center; } .download__inner { width: 78.4375vw; display: flex; justify-content: space-between; } @media screen and (max-width: 800px) { .download__inner { width: 80.8vw; } } @media screen and (max-width: 800px) { .download__inner { flex-direction: column; align-items: center; } } .download__contents { display: flex; flex-direction: column; padding-top: 6.015625vw; } @media screen and (max-width: 800px) { .download__contents { padding-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .download__contents { flex-direction: column; } } .download__title { font-size: 1.875vw; line-height: 1.5; } @media screen and (max-width: 800px) { .download__title { font-size: 4.2666666667vw; } } .download__imgtitle { width: 26.5625vw; margin-bottom: 6.40625vw; } @media screen and (max-width: 800px) { .download__imgtitle { width: 80vw; } } @media screen and (max-width: 800px) { .download__imgtitle { margin-bottom: 12.5333333333vw; } } .download__buttons { display: flex; gap: 2.109375vw; } @media screen and (max-width: 800px) { .download__buttons { flex-direction: column; justify-content: center; align-items: center; padding-bottom: 2.5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .download__buttons { padding-bottom: 8.5333333333vw; } } .download__button { width: 14.609375vw; display: flex; justify-content: center; align-items: center; gap: 0.234375vw; padding-top: 0.78125vw; padding-bottom: 0.78125vw; background-color: white; color: #67b5b7; border-radius: 0.390625vw; border: 0.15625vw solid #67b5b7; } @media screen and (max-width: 800px) { .download__button { width: 49.8666666667vw; } } @media screen and (max-width: 800px) { .download__button { padding-top: 2.6666666667vw; padding-bottom: 2.6666666667vw; } } .download__button--blue { background-color: #67b5b7; color: white; gap: 1.09375vw; } .download__buttontext { font-size: 1.25vw; } @media screen and (max-width: 800px) { .download__buttontext { font-size: 4.2666666667vw; } } .download__buttonarow { width: 1.796875vw; } @media screen and (max-width: 800px) { .download__buttonarow { width: 6.1333333333vw; } } .download__imgcross { width: 43.046875vw; } @media screen and (max-width: 800px) { .download__imgcross { width: 80.5333333333vw; } } @media screen and (max-width: 800px) { .download__imgcross { padding-bottom: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .download__imgcross { padding-bottom: 10.6666666667vw; } } .cunseling { display: flex; justify-content: center; align-items: center; padding-bottom: 6.640625vw; padding-top: 5.703125vw; background: linear-gradient(#67b5b7 0%, #d4eaeb 35.11%, #ecf6f6 46.23%, #fff 100%); } @media screen and (max-width: 800px) { .cunseling { padding-bottom: 10.6666666667vw; } } @media screen and (max-width: 800px) { .cunseling { padding-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .cunseling { background: linear-gradient(#67b5b7 0%, #d4eaeb 35.11%, #ecf6f6 46.23%, #fff 100%); } } .cunseling__inner { display: flex; justify-content: space-between; width: 78.4375vw; } @media screen and (max-width: 800px) { .cunseling__inner { width: 83.7333333333vw; } } @media screen and (max-width: 800px) { .cunseling__inner { flex-direction: column-reverse; } } .cunseling__imgwrapp { width: 34.53125vw; box-shadow: -1.5625vw -1.5625vw 3.125vw rgba(85, 157, 159, 0.4); } @media screen and (max-width: 800px) { .cunseling__imgwrapp { width: 82.1333333333vw; } } .cunseling__contents { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .cunseling__contents { margin-top: 2.1333333333vw; } } .cunseling__title { width: 35.3125vw; font-size: 2.5vw; margin-bottom: 4.53125vw; line-height: 2; } @media screen and (max-width: 800px) { .cunseling__title { width: 83.7333333333vw; } } @media screen and (max-width: 800px) { .cunseling__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .cunseling__title { margin-bottom: 8.5333333333vw; } } @media screen and (max-width: 800px) { .cunseling__title { line-height: 1.5; } } .cunseling__details { display: flex; width: 31.40625vw; margin-bottom: 2.5vw; } @media screen and (max-width: 800px) { .cunseling__details { width: 80.8vw; } } @media screen and (max-width: 800px) { .cunseling__details { margin-bottom: 8.5333333333vw; } } .cunseling__num { font-size: 3.59375vw; margin-right: 2.03125vw; color: #67b5b7; } @media screen and (max-width: 800px) { .cunseling__num { font-size: 7.7333333333vw; } } @media screen and (max-width: 800px) { .cunseling__num { margin-right: 6.9333333333vw; } } .cunseling__subtitle { font-size: 1.875vw; margin-bottom: 1.25vw; } @media screen and (max-width: 800px) { .cunseling__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .cunseling__subtitle { margin-bottom: 4.2666666667vw; } } .cunseling__text { font-size: 0.9375vw; line-height: 2; } @media screen and (max-width: 800px) { .cunseling__text { font-size: 3.2vw; } } .cunseling__buttons { display: flex; justify-content: center; align-items: center; gap: 1.328125vw; } @media screen and (max-width: 800px) { .cunseling__buttons { justify-content: flex-start; } } .cunseling__button { width: 15.78125vw; padding-top: 0.78125vw; padding-bottom: 0.78125vw; display: flex; justify-content: center; align-items: center; background: linear-gradient(#67b5b7, white); gap: 1.09375vw; border-radius: 0.390625vw; color: white; } @media screen and (max-width: 800px) { .cunseling__button { width: 53.8666666667vw; } } @media screen and (max-width: 800px) { .cunseling__button { padding-top: 2.6666666667vw; padding-bottom: 2.6666666667vw; } } .cunseling__button--blue { border: 0.15625vw solid #67b5b7; color: #67b5b7; } @media screen and (max-width: 800px) { .cunseling__button { display: none; } } .cunseling__button--sp { display: none; } @media screen and (max-width: 800px) { .cunseling__button--sp { display: flex; background-color: #67b5b7; color: white; margin-bottom: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .cunseling__button--sp { margin-bottom: 10.6666666667vw; } } .cunseling__buttontext { font-size: 1.25vw; } @media screen and (max-width: 800px) { .cunseling__buttontext { font-size: 4.2666666667vw; } } .cunseling__buttonarow { width: 1.796875vw; } @media screen and (max-width: 800px) { .cunseling__buttonarow { width: 6.1333333333vw; } } .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; } .main { padding-bottom: 15.625vw; } @media screen and (max-width: 800px) { .main { padding-bottom: 53.3333333333vw; } } .main__titlebox { margin-top: 6.25vw; margin-bottom: 6.25vw; } @media screen and (max-width: 800px) { .main__titlebox { margin-top: 21.3333333333vw; margin-bottom: 21.3333333333vw; } } .main__title { font-size: 2.5vw; text-align: center; } @media screen and (max-width: 800px) { .main__title { font-size: 8.5333333333vw; } } .main__subtitle { font-size: 1.25vw; text-align: center; } @media screen and (max-width: 800px) { .main__subtitle { font-size: 4.2666666667vw; } } .main__cc { margin-bottom: 6.25vw; } @media screen and (max-width: 800px) { .main__cc { margin-bottom: 21.3333333333vw; } } .main__cctitle { font-size: 2.5vw; margin-bottom: 2.65625vw; text-align: center; } @media screen and (max-width: 800px) { .main__cctitle { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .main__cctitle { margin-bottom: 9.0666666667vw; } } .main__cctext { font-size: 1.25vw; text-align: center; } @media screen and (max-width: 800px) { .main__cctext { font-size: 4.2666666667vw; } } .main__contents { display: flex; align-items: center; width: 71.796875vw; } @media screen and (max-width: 800px) { .main__contents { width: 245.0666666667vw; } } .main__contents { display: flex; align-items: center; } .main__contentstitle { margin-left: 17.265625vw; font-size: 1.25vw; } @media screen and (max-width: 800px) { .main__contentstitle { margin-left: 58.9333333333vw; } } @media screen and (max-width: 800px) { .main__contentstitle { font-size: 4.2666666667vw; } } .main__contentstext { font-size: 1.25vw; } @media screen and (max-width: 800px) { .main__contentstext { font-size: 4.2666666667vw; } } .main__contentstextbox { padding-top: 1.71875vw; padding-bottom: 1.71875vw; } @media screen and (max-width: 800px) { .main__contentstextbox { padding-top: 5.8666666667vw; padding-bottom: 5.8666666667vw; } } .join { height: 33.28125vw; background-color: #fffdf2; display: flex; justify-content: space-between; display: flex; } @media screen and (max-width: 800px) { .join { height: 113.6vw; } } .join__titlebox { margin-top: 6.40625vw; margin-left: 6.953125vw; } @media screen and (max-width: 800px) { .join__titlebox { margin-top: 21.8666666667vw; } } @media screen and (max-width: 800px) { .join__titlebox { margin-left: 23.7333333333vw; } } .join__joinus { font-size: 1.875vw; margin-bottom: 1.796875vw; color: #fcd475; font-weight: 700; } @media screen and (max-width: 800px) { .join__joinus { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .join__joinus { margin-bottom: 6.1333333333vw; } } .join__title { font-size: 3.125vw; } @media screen and (max-width: 800px) { .join__title { font-size: 10.6666666667vw; } } .join__buttonbox { margin-top: 11.640625vw; margin-right: 10.078125vw; } @media screen and (max-width: 800px) { .join__buttonbox { margin-top: 39.7333333333vw; } } @media screen and (max-width: 800px) { .join__buttonbox { margin-right: 34.4vw; } } .join__text { margin-bottom: 4.765625vw; font-size: 1.25vw; line-height: 3; } @media screen and (max-width: 800px) { .join__text { margin-bottom: 16.2666666667vw; } } @media screen and (max-width: 800px) { .join__text { font-size: 4.2666666667vw; } } .join__buttonend { display: flex; justify-content: flex-end; } .join__button { width: 11.71875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; color: white; background-color: #fcd475; filter: drop-shadow(6px 6px 12px rgba(252, 202, 1, 0.3)); display: flex; justify-content: center; align-items: center; border-radius: 1.875vw; } @media screen and (max-width: 800px) { .join__button { width: 40vw; } } @media screen and (max-width: 800px) { .join__button { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } .join__buttontext { font-size: 1.25vw; } @media screen and (max-width: 800px) { .join__buttontext { font-size: 4.2666666667vw; } } .footerAnother { height: 31.09375vw; background-color: #fcd475; } @media screen and (max-width: 800px) { .footerAnother { height: 106.1333333333vw; } } .footerAnother__footerbox { display: flex; align-items: flex-start; padding-top: 6.796875vw; padding-left: 8.75vw; gap: 6.40625vw; } @media screen and (max-width: 800px) { .footerAnother__footerbox { padding-top: 23.2vw; } } @media screen and (max-width: 800px) { .footerAnother__footerbox { padding-left: 29.8666666667vw; } } .footerAnother__imglogo { width: 12.34375vw; } @media screen and (max-width: 800px) { .footerAnother__imglogo { width: 42.1333333333vw; } } .footerAnother__colbox { margin-bottom: 3.671875vw; } @media screen and (max-width: 800px) { .footerAnother__colbox { margin-bottom: 12.5333333333vw; } } .footerAnother__colbox:last-child { margin-bottom: 0; } .footerAnother__coltext { font-size: 1.25vw; margin-bottom: 0.625vw; font-weight: 700; } @media screen and (max-width: 800px) { .footerAnother__coltext { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .footerAnother__coltext { margin-bottom: 2.1333333333vw; } } .footerAnother__coltexta { font-size: 1.09375vw; color: black; } @media screen and (max-width: 800px) { .footerAnother__coltexta { font-size: 3.7333333333vw; } } .table { width: 71.796875vw; margin: 0 auto; border-top: 0.078125vw solid #fcd475; border-bottom: 0.078125vw solid #fcd475; } @media screen and (max-width: 800px) { .table { width: 245.0666666667vw; } } .table__row { display: flex; border-bottom: 0.078125vw solid #fcd475; } .table__row:last-child { border-bottom: none; } .table__th { width: 13.046875vw; padding-top: 1.71875vw; padding-bottom: 1.71875vw; font-size: 1.25vw; padding-left: 2.34375vw; font-weight: 700; border-right: 0.078125vw solid #fcd475; display: flex; align-items: center; } @media screen and (max-width: 800px) { .table__th { width: 44.5333333333vw; } } @media screen and (max-width: 800px) { .table__th { padding-top: 5.8666666667vw; padding-bottom: 5.8666666667vw; } } @media screen and (max-width: 800px) { .table__th { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .table__th { padding-left: 8vw; } } .table__td { width: 58.75vw; padding-top: 1.71875vw; padding-bottom: 1.71875vw; padding-left: 5.703125vw; } @media screen and (max-width: 800px) { .table__td { width: 200.5333333333vw; } } @media screen and (max-width: 800px) { .table__td { padding-top: 5.8666666667vw; padding-bottom: 5.8666666667vw; } } @media screen and (max-width: 800px) { .table__td { padding-left: 19.4666666667vw; } } .table__listtitle { font-size: 1.25vw; font-weight: 700; } @media screen and (max-width: 800px) { .table__listtitle { font-size: 4.2666666667vw; } } .table__listitem { font-size: 1.25vw; font-weight: 700; line-height: 1.7; } @media screen and (max-width: 800px) { .table__listitem { font-size: 4.2666666667vw; } } .card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; } .card__img { width: 80%; } @media screen and (max-width: 800px) { .card__img { padding-top: 3.75vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .card__img { padding-top: 12.8vw; } } .card__title { display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.25vw; padding-top: 2.5vw; color: #001455; font-weight: bold; min-height: 4em; } @media screen and (max-width: 800px) { .card__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .card__title { padding-top: 3.2vw; } } .card__detail { font-size: 1.25vw; line-height: 2; width: 100%; text-align: center; padding-top: 1.875vw; color: #001455; } @media screen and (max-width: 800px) { .card__detail { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .card__detail { padding-top: 2.1333333333vw; } } .swiper-container { width: 23.4375vw; height: auto; /* 必要に応じて高さを調整します */ } @media screen and (max-width: 800px) { .swiper-container { width: 80vw; } } .swiper-slide { display: flex; justify-content: flex-start; /* カードをスライドの中央に配置 */ box-sizing: border-box; margin-right: 3.75vw; } @media screen and (max-width: 800px) { .swiper-slide { margin-right: 12.8vw; } } .whatIsThis2Slider { max-width: 100%; margin-left: auto; margin-right: auto; display: flex; align-items: center; } .whatIsThis2Slider__wrapper { max-width: 100%; } .whatIsThis2Slider__sliderwrap { position: relative; } .whatIsThis2Slider__prev { width: 1.796875vw; position: absolute; z-index: 1; top: 50%; left: -1.796875vw; transform: translateY(-50%); } @media screen and (max-width: 800px) { .whatIsThis2Slider__prev { width: 6.1333333333vw; } } .whatIsThis2Slider__next { width: 1.796875vw; position: absolute; z-index: 1; top: 50%; right: -1.796875vw; transform: translateY(-50%); } @media screen and (max-width: 800px) { .whatIsThis2Slider__next { width: 6.1333333333vw; } } .whatIsThis2Slider__card { width: 30%; margin-right: 5%; /* space between */ } .whatIsThis2Slider__card:last-child { margin-right: 0; } .whatIsThis2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 6.640625vw; padding-bottom: 5vw; } @media screen and (max-width: 800px) { .whatIsThis2 { padding-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .whatIsThis2 { padding-bottom: 10.6666666667vw; } } @media screen and (max-width: 800px) { .whatIsThis2 { background-color: rgba(103, 181, 183, 0.05); } } .whatIsThis2__inner { display: flex; flex-direction: column; width: 78.4375vw; } @media screen and (max-width: 800px) { .whatIsThis2__inner { width: 80.2666666667vw; } } .whatIsThis2__subtitle { display: flex; justify-content: center; font-size: 1.25vw; } @media screen and (max-width: 800px) { .whatIsThis2__subtitle { font-size: 3.2vw; } } .whatIsThis2__title { font-size: 2.5vw; line-height: 2; display: flex; justify-content: center; text-align: center; margin-bottom: 3.125vw; } @media screen and (max-width: 800px) { .whatIsThis2__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .whatIsThis2__title { margin-bottom: 10.6666666667vw; } } .whatIsThis2__whitebox { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 23.4375vw; } @media screen and (max-width: 800px) { .whatIsThis2__whitebox { width: 80vw; } } @media screen and (max-width: 800px) { .whatIsThis2__whitebox { margin-bottom: 1.328125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .whatIsThis2__whitebox { margin-bottom: 4.5333333333vw; } } @media screen and (max-width: 800px) { .whatIsThis2__whitebox:last-chile { margin-bottom: 0vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .whatIsThis2__whitebox:last-chile { margin-bottom: 0vw; } } .whatIsThis2__oji { width: 100%; } .whatIsThis2__name { background-color: white; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16); } .whatIsThis2__name1 { font-size: 1.25vw; line-height: 1.5; padding-top: 1.640625vw; padding-left: 1.5625vw; padding-right: 1.5625vw; margin-bottom: 1.953125vw; } @media screen and (max-width: 800px) { .whatIsThis2__name1 { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .whatIsThis2__name1 { padding-top: 5.6vw; } } @media screen and (max-width: 800px) { .whatIsThis2__name1 { padding-left: 5.3333333333vw; padding-right: 5.3333333333vw; } } @media screen and (max-width: 800px) { .whatIsThis2__name1 { margin-bottom: 6.6666666667vw; } } .whatIsThis2__name2 { font-size: 0.9375vw; color: #767676; border-bottom: 0.078125vw solid #767676; padding-top: 1.640625vw; padding-bottom: 1.015625vw; padding-left: 1.5625vw; padding-right: 1.5625vw; } @media screen and (max-width: 800px) { .whatIsThis2__name2 { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .whatIsThis2__name2 { padding-top: 5.6vw; } } @media screen and (max-width: 800px) { .whatIsThis2__name2 { padding-bottom: 3.4666666667vw; } } @media screen and (max-width: 800px) { .whatIsThis2__name2 { padding-left: 5.3333333333vw; padding-right: 5.3333333333vw; } } .whatIsThis2__name2:last-child { border-bottom: 0; padding-bottom: 1.171875vw; } @media screen and (max-width: 800px) { .whatIsThis2__name2:last-child { padding-bottom: 4vw; } } .whatIsThis2__buttons { display: flex; justify-content: center; align-items: center; gap: 1.328125vw; } @media screen and (max-width: 800px) { .whatIsThis2__buttons { display: none; } } .whatIsThis2__button { width: 15.78125vw; padding-top: 0.78125vw; padding-bottom: 0.78125vw; display: flex; justify-content: center; align-items: center; background-color: white; gap: 1.09375vw; border-radius: 0.390625vw; color: #67b5b7; border: 0.15625vw solid #67b5b7; } @media screen and (max-width: 800px) { .whatIsThis2__button { width: 53.8666666667vw; } } @media screen and (max-width: 800px) { .whatIsThis2__button { padding-top: 2.6666666667vw; padding-bottom: 2.6666666667vw; } } .whatIsThis2__button--white { background-color: #67b5b7; color: white; } @media screen and (max-width: 800px) { .whatIsThis2__button--white { display: none; } } .whatIsThis2__buttontext { font-size: 1.25vw; } @media screen and (max-width: 800px) { .whatIsThis2__buttontext { font-size: 4.2666666667vw; } } .whatIsThis2__buttonarow { width: 1.796875vw; } @media screen and (max-width: 800px) { .whatIsThis2__buttonarow { width: 6.1333333333vw; } } .service { background: rgba(0, 20, 85, 0.05); } .service__inner { width: 80%; margin: auto; } .service__title { font-size: 1.25vw; margin-top: 9.375vw; font-weight: 700; } @media screen and (max-width: 800px) { .service__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .service__title { margin-top: 32vw; } } .service__list { display: flex; justify-content: space-between; padding-top: 3.75vw; padding-bottom: 5.625vw; } @media screen and (max-width: 800px) { .service__list { padding-top: 0vw; } } @media screen and (max-width: 800px) { .service__list { padding-bottom: 19.2vw; } } @media screen and (max-width: 800px) { .service__list { flex-direction: column; align-items: center; } } .service__card { width: 21%; } @media screen and (max-width: 800px) { .service__card { width: 72%; } } .pagenation { display: flex; flex-direction: column; align-items: center; background-color: #001455; } .pagenation--under { padding-top: 12.5vw; } @media screen and (max-width: 800px) { .pagenation--under { padding-top: 42.6666666667vw; } } @media screen and (max-width: 800px) { .pagenation { display: flex; flex-direction: column; align-items: center; } } .pagenation__inner { display: flex; flex-direction: column; width: 78.4375vw; margin-bottom: 6.25vw; position: relative; z-index: 1; } @media screen and (max-width: 800px) { .pagenation__inner { width: 80vw; } } @media screen and (max-width: 800px) { .pagenation__inner { margin-bottom: 21.3333333333vw; } } .pagenation__button { position: relative; margin-left: 17.96875vw; margin-bottom: 1.25vw; width: 4.6875vw; height: 4.6875vw; } @media screen and (max-width: 800px) { .pagenation__button { margin-left: 61.3333333333vw; } } @media screen and (max-width: 800px) { .pagenation__button { margin-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .pagenation__button { width: 16vw; } } @media screen and (max-width: 800px) { .pagenation__button { height: 16vw; } } .pagenation__back { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #001455; width: 4.6875vw; height: 4.6875vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .pagenation__back { width: 16vw; } } @media screen and (max-width: 800px) { .pagenation__back { height: 16vw; } } .pagenation__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.5625vw; cursor: pointer; } @media screen and (max-width: 800px) { .pagenation__arrow { width: 5.3333333333vw; } } .pagenation__arrow .arrow-path { stroke: #001455; transition: stroke 0.5s ease; } .pagenation__pagenation { display: flex; gap: 1.25vw; margin-bottom: 6.25vw; margin-top: 3.125vw; align-items: center; justify-content: center; } @media screen and (max-width: 800px) { .pagenation__pagenation { margin-bottom: 21.3333333333vw; } } @media screen and (max-width: 800px) { .pagenation__pagenation { margin-top: 10.6666666667vw; } } .pagenation__white { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 78.046875vw; } .pagenation__pages { position: relative; gap: 1.25vw; } .pagenation__pages ul { display: flex; align-items: center; padding: 0; list-style: none; gap: 1.25vw; } .pagenation__pages ul li { position: relative; } .pagenation__pages ul li a, .pagenation__pages ul li span { display: flex; justify-content: center; align-items: center; width: 4.375vw; height: 4.375vw; font-size: 1.25vw; border: 0.078125vw solid #fff; border-radius: 78.046875vw; color: #fff; cursor: pointer; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .pagenation__pages ul li a, .pagenation__pages ul li span { width: 14.9333333333vw; } } @media screen and (max-width: 800px) { .pagenation__pages ul li a, .pagenation__pages ul li span { height: 14.9333333333vw; } } @media screen and (max-width: 800px) { .pagenation__pages ul li a, .pagenation__pages ul li span { font-size: 4.2666666667vw; } } .pagenation__pages ul li a:hover, .pagenation__pages ul li span:hover { background-color: #fff; color: #fff; } .pagenation__pages ul li span.current { background: #001455; color: #fff; } .pagenation__pages ul li span.current:hover { background-color: #001455; color: #fff; } .pagenation__pages ul li:hover .arrow-path { stroke: #fff; } .pagenation__viewbutton { text-align: right; } .pagenation__viewmore { display: inline-block; width: 9.84375vw; padding-top: 1.25vw; padding-bottom: 1.25vw; color: #f78821; border: 0.078125vw solid rgba(255, 255, 255, 0.3); background-color: #fff; border-radius: 78.046875vw; text-align: center; transition: color 0.3s ease, background-color 0.3s ease; } @media screen and (max-width: 800px) { .pagenation__viewmore { width: 33.6vw; } } @media screen and (max-width: 800px) { .pagenation__viewmore { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } .pagenation__viewmore:hover { color: #fff; background-color: #f78821; } .news { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; position: relative; } .news__inner { display: flex; width: 80%; } @media screen and (max-width: 800px) { .news__inner { display: flex; flex-direction: column; } } .news__left { position: relative; display: flex; flex-direction: column; margin-right: 5vw; } @media screen and (max-width: 800px) { .news__left { margin-right: 0vw; } } @media screen and (max-width: 800px) { .news__left { flex-direction: column; justify-content: center; align-items: center; } } .news__back { position: absolute; top: 0%; width: 24.84375vw; height: 7.65625vw; } @media screen and (max-width: 800px) { .news__back { width: 43.7333333333vw; } } @media screen and (max-width: 800px) { .news__back { height: 13.8666666667vw; } } @media screen and (max-width: 800px) { .news__back { top: 2%; } } .news__right { display: flex; flex-direction: column; width: 80%; } @media screen and (max-width: 800px) { .news__right { width: 100%; } } .news__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; color: #000; } @media screen and (max-width: 800px) { .news__title { font-size: 8.5333333333vw; } } .news__subtitle { font-size: 1.25vw; margin-top: 1.25vw; color: #000; } @media screen and (max-width: 800px) { .news__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .news__subtitle { margin-top: 2.1333333333vw; } } .news__list { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin-top: 0.9375vw; } @media screen and (max-width: 800px) { .news__list { margin-top: 10.6666666667vw; } } .news__list > * + * { margin-top: 2.03125vw; } @media screen and (max-width: 800px) { .news__list > * + * { margin-top: 6.9333333333vw; } } .news__header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .news__item { width: 100%; } .news__buttonWrapper { display: flex; justify-content: flex-end; } @media screen and (max-width: 800px) { .news__buttonWrapper { justify-content: center; } } .news__buttonWrapper--left { display: flex; justify-content: flex-start; } .news__button { display: flex; justify-content: center; align-items: center; padding-left: 1.875vw; padding-right: 1.875vw; padding-top: 0.625vw; padding-bottom: 0.625vw; font-size: 1.25vw; color: #ba3131; border: 1px solid #ba3131; background-color: transparent; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .news__button { padding-left: 6.4vw; padding-right: 6.4vw; } } @media screen and (max-width: 800px) { .news__button { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .news__button { font-size: 4.2666666667vw; } } .news__button:hover { color: #fff; background-color: #ba3131; } .newsUnder { display: flex; flex-direction: column; align-items: center; } .newsUnder__top { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; margin-top: 10.9375vw; } @media screen and (max-width: 800px) { .newsUnder__top { margin-top: 37.3333333333vw; } } .newsUnder__back { position: absolute; top: 0%; width: 24.921875vw; height: 7.890625vw; } @media screen and (max-width: 800px) { .newsUnder__back { width: 64vw; } } @media screen and (max-width: 800px) { .newsUnder__back { height: 20vw; } } .newsUnder__back--column { width: 37.65625vw; height: 8.125vw; } @media screen and (max-width: 800px) { .newsUnder__back--column { width: 64.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__back--column { height: 13.8666666667vw; } } .newsUnder__back--vioce { width: 27.421875vw; height: 7.8125vw; } @media screen and (max-width: 800px) { .newsUnder__back--vioce { width: 48.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__back--vioce { height: 13.8666666667vw; } } .newsUnder__back--courses { width: 37.8125vw; height: 7.96875vw; } @media screen and (max-width: 800px) { .newsUnder__back--courses { width: 80vw; } } @media screen and (max-width: 800px) { .newsUnder__back--courses { height: 17.0666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__back { top: 3%; } } .newsUnder__topTitle { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .newsUnder__topTitle { font-size: 8.5333333333vw; } } .newsUnder__topTitle--jp { font-size: 3.125vw; font-family: "Noto Serif JP", serif; font-weight: 400; } @media screen and (max-width: 800px) { .newsUnder__topTitle--jp { font-size: 6.4vw; } } .newsUnder__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .newsUnder__border { margin-top: 2.1333333333vw; } } .newsUnder__border--voice { margin-top: 1.875vw; } @media screen and (max-width: 800px) { .newsUnder__border--voice { margin-top: 6.4vw; } } .newsUnder__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .newsUnder__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__subtitle { margin-top: 2.1333333333vw; } } .newsUnder__inner { display: flex; flex-direction: column; width: 80%; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .newsUnder__inner { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__inner--sp { width: 100%; } } .newsUnder__titleContainer { display: flex; justify-content: center; align-items: center; flex-direction: column; } .newsUnder__title { display: flex; justify-content: center; align-items: center; color: #d72d56; font-weight: 700; line-height: 1.5; } .newsUnder__title--sub { font-size: 1.25vw; } @media screen and (max-width: 800px) { .newsUnder__title--sub { font-size: 4.2666666667vw; } } .newsUnder__title--main { font-size: 3.125vw; } @media screen and (max-width: 800px) { .newsUnder__title--main { font-size: 8.5333333333vw; } } .newsUnder__terms { display: flex; gap: 1.25vw; flex-wrap: wrap; padding-top: 3.75vw; } @media screen and (max-width: 800px) { .newsUnder__terms { padding-top: 12.8vw; } } .newsUnder__term { display: flex; justify-content: center; align-items: center; border-radius: 999px; min-width: 100px; border: 1px solid #d72d56; cursor: pointer; transition: all 0.25s ease-in; } .newsUnder__term.selected { background: #d72d56; } .newsUnder__term.selected a { color: #fff; } .newsUnder__term.selected:hover { border: 1px solid #d72d56; background: #fffbfc; color: #d72d56; } .newsUnder__term.selected:hover a { color: #d72d56; } .newsUnder__term:hover { background: #d72d56; } .newsUnder__term:hover a { color: #fff; } .newsUnder__name { display: flex; justify-content: center; align-items: center; padding-top: 0.625vw; padding-bottom: 0.625vw; padding-left: 1.25vw; padding-right: 1.25vw; font-size: 0.78125vw; color: #d72d56; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsUnder__name { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__name { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__name { font-size: 2.6666666667vw; } } .newsUnder__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 4.140625vw; grid-row-gap: 3.75vw; align-items: start; width: 100%; margin-top: 3.125vw; } .newsUnder__list--courses { grid-column-gap: 4.0625vw; grid-row-gap: 3.125vw; } .newsUnder__list--column { grid-column-gap: 0.625vw; grid-row-gap: 3.125vw; } @media screen and (max-width: 800px) { .newsUnder__list { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__list { grid-template-columns: 1fr; grid-column-gap: 0; grid-row-gap: 12.8vw; } } .newsUnder__list--sp { display: flex; flex-direction: column; justify-content: center; align-items: center; } .newsUnder__message { display: flex; justify-content: center; align-items: center; font-size: 1.875vw; padding-top: 5vw; text-align: center; color: #d72d56; } @media screen and (max-width: 800px) { .newsUnder__message { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .newsUnder__message { padding-top: 17.0666666667vw; } } .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; } @media screen and (max-width: 800px) { .newsUnder__pages ul { gap: 4.2666666667vw; } } .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: 3.125vw; height: 3.125vw; font-size: 0.9375vw; border: 1px solid #d72d56; border-radius: 999px; color: #d72d56; 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: 10.6666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__pages ul li a, .newsUnder__pages ul li span { height: 10.6666666667vw; } } @media screen and (max-width: 800px) { .newsUnder__pages ul li a, .newsUnder__pages ul li span { font-size: 3.2vw; } } .newsUnder__pages ul li a:hover, .newsUnder__pages ul li span:hover { background-color: #d72d56; color: #fff; } .newsUnder__pages ul li span.current { background: #d72d56; color: #fff; } .newsUnder__pages ul li:hover .arrow-path { stroke: #fff; } .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: 999px; } @media screen and (max-width: 800px) { .newsUnder__prev { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__prev { height: 14.1333333333vw; } } .newsUnder__next { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; } @media screen and (max-width: 800px) { .newsUnder__next { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__next { height: 14.1333333333vw; } } .newsUnder__white { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 999px; } .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: #fff; } @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: 999px; } @media screen and (max-width: 800px) { .newsUnder__page1 { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page1 { height: 14.1333333333vw; } } .newsUnder__page2 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; } @media screen and (max-width: 800px) { .newsUnder__page2 { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page2 { height: 14.1333333333vw; } } .newsUnder__page3 { position: relative; width: 4.140625vw; height: 4.140625vw; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; } @media screen and (max-width: 800px) { .newsUnder__page3 { width: 14.1333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__page3 { height: 14.1333333333vw; } } .newsUnder__button { display: flex; justify-content: center; align-items: center; padding-top: 6.25vw; } @media screen and (max-width: 800px) { .newsUnder__button { padding-top: 21.3333333333vw; } } .newsUnder__buttonText { display: flex; justify-content: center; align-items: center; width: 15.625vw; height: 3.75vw; font-size: 1.25vw; color: #fff; letter-spacing: 0.1em; border: 1px solid #d72d56; background-color: #d72d56; border-radius: 999px; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsUnder__buttonText { width: 53.3333333333vw; } } @media screen and (max-width: 800px) { .newsUnder__buttonText { height: 12.8vw; } } @media screen and (max-width: 800px) { .newsUnder__buttonText { font-size: 4.2666666667vw; } } .newsUnder__buttonText:hover { color: #d72d56; background-color: #fffbfc; } .newsUnder__noPadding { padding-bottom: 0vw; } @media screen and (max-width: 800px) { .newsUnder__noPadding { padding-bottom: 0vw; } } .contact { display: flex; justify-content: center; align-items: center; } .contact__inner { position: relative; display: flex; flex-direction: column; width: 59%; padding-top: 6.25vw; } @media screen and (max-width: 800px) { .contact__inner { padding-top: 14.4vw; } } @media screen and (max-width: 800px) { .contact__inner { width: 80%; } } .contact__back { position: absolute; top: 9.5%; left: 17%; width: 39.0625vw; height: 7.8125vw; } @media screen and (max-width: 800px) { .contact__back { width: 55.7333333333vw; } } @media screen and (max-width: 800px) { .contact__back { height: 12.8vw; } } @media screen and (max-width: 800px) { .contact__back { top: 6.6%; left: 15.5%; } } .contact__recruitBack { position: absolute; top: 7.5%; left: 17%; width: 39.0625vw; height: 7.8125vw; } @media screen and (max-width: 800px) { .contact__recruitBack { width: 55.7333333333vw; } } @media screen and (max-width: 800px) { .contact__recruitBack { height: 12.8vw; } } @media screen and (max-width: 800px) { .contact__recruitBack { top: 4%; left: 15.5%; } } .contact__block { display: flex; justify-content: center; align-items: flex-start; margin-bottom: 3.125vw; width: 100%; } @media screen and (max-width: 800px) { .contact__block { margin-bottom: 10.6666666667vw; } } .contact__block:first-of-type { margin-top: 9.375vw; } @media screen and (max-width: 800px) { .contact__block:first-of-type { margin-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .contact__block { flex-direction: column; justify-content: center; align-items: flex-start; } } .contact__block--company { align-items: center; } .contact__content { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 39.84375vw; } @media screen and (max-width: 800px) { .contact__content { width: 80vw; } } @media screen and (max-width: 800px) { .contact__content { justify-content: center; align-items: center; } } .contact__titleTop { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .contact__titleTop { font-size: 8.5333333333vw; } } .contact__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .contact__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__subtitle { margin-top: 2.1333333333vw; } } .contact__contactWrapper { border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: relative; } .contact__contactWrapper:after { content: ""; position: absolute; bottom: 0%; width: 14%; /* border-bottomの長さを調整 */ border-bottom: 1px solid #fff; /* border-bottomのスタイル */ } .contact__contact { font-family: "Avenir-Regular"; font-size: 2.5vw; margin-bottom: 2.5vw; color: #fff; text-align: center; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 3.2px; } @media screen and (max-width: 800px) { .contact__contact { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .contact__contact { margin-bottom: 8.5333333333vw; } } .contact__top { margin-top: 3.28125vw; display: flex; align-items: center; } @media screen and (max-width: 800px) { .contact__top { margin-top: 11.2vw; } } @media screen and (max-width: 800px) { .contact__top { flex-direction: column; align-items: flex-start; } } .contact__title { font-size: 1.875vw; color: #000; font-family: "Circular Std"; font-style: normal; font-weight: 500; } @media screen and (max-width: 800px) { .contact__title { font-size: 6.4vw; } } .contact__text { font-family: "Yu-Gothic-Light"; color: #353535; font-style: normal; font-weight: 400; font-size: 1.25vw; padding-left: 2.5vw; padding-top: 0vw; line-height: 2; } @media screen and (max-width: 800px) { .contact__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__text { padding-left: 0vw; } } @media screen and (max-width: 800px) { .contact__text { padding-top: 2.1333333333vw; } } .contact__form { width: 100%; padding-top: 2.5vw; } @media screen and (max-width: 800px) { .contact__form { padding-top: 8.5333333333vw; } } .contact__privacyPolicyLink { font-size: 1.25vw; color: black; text-decoration: underline; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .contact__privacyPolicyLink { font-size: 3.7333333333vw; } } .contact__privacyPolicyLink:hover { opacity: 60%; } .contact__privacyPolicyLink::after { display: none; content: "＊"; opacity: 60%; color: red; font-size: 0.625vw; position: absolute; top: 0%; } @media screen and (max-width: 800px) { .contact__privacyPolicyLink::after { font-size: 2.1333333333vw; } } @media screen and (max-width: 800px) { .contact__privacyPolicyLink::after { display: inline-block; } } .contact__body { padding-top: 1.875vw; } @media screen and (max-width: 800px) { .contact__body { padding-top: 6.4vw; } } .contact__body * { font-size: 0.9375vw; line-height: 2; } @media screen and (max-width: 800px) { .contact__body * { font-size: 3.2vw; } } .contact__button { display: flex; justify-content: center; align-items: center; align-self: center; width: 18.75vw; margin-top: 5vw; border-radius: 100px; border: 1px solid #d72d56; transition: all 0.25s ease-in; cursor: pointer; } @media screen and (max-width: 800px) { .contact__button { width: 64vw; } } @media screen and (max-width: 800px) { .contact__button { margin-top: 17.0666666667vw; } } .contact__button span { display: inline-block; padding-top: 1.25vw; padding-bottom: 1.25vw; color: #d72d56; font-size: 1.25vw; transition: all 0.25s ease-in; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .contact__button span { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contact__button span { font-size: 4.2666666667vw; } } .contact__button:hover { background-color: #d72d56; } .contact__button:hover span { color: white; } .worksSingle { display: flex; flex-direction: column; align-items: center; background-color: #fff; padding-top: 12.5vw; } @media screen and (max-width: 800px) { .worksSingle { padding-top: 42.6666666667vw; } } .worksSingle__inner { width: 80%; display: flex; flex-direction: column; } .worksSingle__company { font-size: 1.25vw; margin-bottom: 0.625vw; color: #001455; opacity: 30%; } @media screen and (max-width: 800px) { .worksSingle__company { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .worksSingle__company { margin-bottom: 2.1333333333vw; } } .worksSingle__title { font-size: 2.5vw; margin-bottom: 1.875vw; display: flex; justify-content: flex-start; color: #001455; } @media screen and (max-width: 800px) { .worksSingle__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .worksSingle__title { margin-bottom: 6.4vw; } } .worksSingle__imgWrapper { width: 100%; overflow: hidden; position: relative; border-radius: 0.390625vw; } .worksSingle__imgWrapper::before { display: block; content: ""; padding-top: 62.5%; } .worksSingle__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .worksSingle__img { width: 100%; height: 100%; margin-bottom: 2.5vw; } @media screen and (max-width: 800px) { .worksSingle__img { margin-bottom: 8.5333333333vw; } } .worksSingle__content { font-size: 1.25vw; margin-bottom: 6.25vw; margin-top: 3.125vw; color: #fff; line-height: 1.5; } @media screen and (max-width: 800px) { .worksSingle__content { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .worksSingle__content { margin-bottom: 21.3333333333vw; } } @media screen and (max-width: 800px) { .worksSingle__content { margin-top: 10.6666666667vw; } } .worksSingle__content p { font-size: 1.25vw; color: #001455; } @media screen and (max-width: 800px) { .worksSingle__content p { font-size: 4.2666666667vw; } } .worksSingle__collection { display: flex; justify-content: center; } .worksSingle__text { border-radius: 78.046875vw; text-align: center; width: 18.75vw; background-color: #fff; font-size: 1.25vw; color: #001455; padding-top: 1.25vw; padding-bottom: 1.25vw; border: 0.078125vw solid black; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .worksSingle__text { width: 42.6666666667vw; } } @media screen and (max-width: 800px) { .worksSingle__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .worksSingle__text { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } .worksSingle__text:hover { color: #fff; background-color: #001455; } .newsSingle { display: flex; flex-direction: column; align-items: center; padding-top: 9.375vw; } @media screen and (max-width: 800px) { .newsSingle { padding-top: 32vw; } } .newsSingle--voice { padding-top: 3.125vw; padding-bottom: 6.25vw; } @media screen and (max-width: 800px) { .newsSingle--voice { padding-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .newsSingle--voice { padding-bottom: 21.3333333333vw; } } .newsSingle__inner { display: flex; flex-direction: column; width: 60%; } @media screen and (max-width: 800px) { .newsSingle__inner { width: 90%; } } .newsSingle__inner--voice { align-items: center; width: 100%; padding-bottom: 2.5vw; } @media screen and (max-width: 800px) { .newsSingle__inner--voice { padding-bottom: 6.4vw; } } .newsSingle__sub { display: flex; align-items: center; } .newsSingle__sub > * + * { margin-left: 1.25vw; } @media screen and (max-width: 800px) { .newsSingle__sub > * + * { margin-left: 4.2666666667vw; } } .newsSingle__date { display: flex; justify-content: center; align-items: center; font-size: 1.25vw; } @media screen and (max-width: 800px) { .newsSingle__date { font-size: 4.2666666667vw; } } .newsSingle__term { display: flex; justify-content: center; align-items: center; width: 8.359375vw; padding-top: 0.625vw; padding-bottom: 0.625vw; font-size: 0.9375vw; background-color: #d72d56; color: white; border-radius: 999px; } @media screen and (max-width: 800px) { .newsSingle__term { width: 28.5333333333vw; } } @media screen and (max-width: 800px) { .newsSingle__term { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsSingle__term { font-size: 3.2vw; } } .newsSingle__title { display: flex; padding-top: 1.25vw; padding-bottom: 1.875vw; font-size: 2.5vw; letter-spacing: 0.1em; font-weight: 700; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .newsSingle__title { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .newsSingle__title { padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .newsSingle__title { font-size: 6.4vw; } } .newsSingle__imgWrapper { width: 100%; margin-top: 6.25vw; margin-bottom: 5vw; position: relative; border: 0.5px solid rgba(215, 45, 86, 0.3); border-radius: 10px; } @media screen and (max-width: 800px) { .newsSingle__imgWrapper { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .newsSingle__imgWrapper { margin-bottom: 8.5333333333vw; } } .newsSingle__imgWrapper::before { display: block; content: ""; padding-top: 50%; } .newsSingle__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .newsSingle__imgWrapper--voice { width: 80%; } @media screen and (max-width: 800px) { .newsSingle__imgWrapper--voice { width: 100%; } } @media screen and (max-width: 800px) { .newsSingle__imgWrapper { position: relative; border-radius: 0px; } .newsSingle__imgWrapper::before { display: block; content: ""; padding-top: 47.1115537849%; } .newsSingle__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .newsSingle__img { width: 100%; height: 100%; border-radius: 10px; } @media screen and (max-width: 800px) { .newsSingle__img { border-radius: 0px; } } .newsSingle__collection { display: flex; justify-content: center; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .newsSingle__collection { margin-top: 10.6666666667vw; } } .newsSingle__collection--voice { padding-bottom: 3.125vw; } @media screen and (max-width: 800px) { .newsSingle__collection--voice { padding-bottom: 10.6666666667vw; } } .newsSingle__text { display: flex; justify-content: center; align-items: center; width: 16.40625vw; padding-top: 0.9375vw; padding-bottom: 0.9375vw; font-size: 1.25vw; color: #fff; letter-spacing: 0.1em; border: 1px solid #d72d56; background-color: #d72d56; border-radius: 999px; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .newsSingle__text { width: 56vw; } } @media screen and (max-width: 800px) { .newsSingle__text { padding-top: 3.2vw; padding-bottom: 3.2vw; } } @media screen and (max-width: 800px) { .newsSingle__text { font-size: 4.2666666667vw; } } .newsSingle__text:hover { color: #d72d56; background-color: #fffbfc; } .recruit { display: flex; flex-direction: column; align-items: center; padding-top: 12.5vw; } @media screen and (max-width: 800px) { .recruit { padding-top: 29.8666666667vw; } } .recruit--info { position: relative; padding-bottom: 12.5vw; } @media screen and (max-width: 800px) { .recruit--info { padding-bottom: 29.8666666667vw; } } .recruit__back { position: absolute; top: 20%; width: 34.296875vw; height: 7.734375vw; } @media screen and (max-width: 800px) { .recruit__back { width: 73.0666666667vw; } } @media screen and (max-width: 800px) { .recruit__back { height: 16.8vw; } } .recruit__back--requirements { width: 66.640625vw; height: 10.46875vw; top: 0%; } @media screen and (max-width: 800px) { .recruit__back--requirements { width: 89.8666666667vw; } } @media screen and (max-width: 800px) { .recruit__back--requirements { height: 13.8666666667vw; } } @media screen and (max-width: 800px) { .recruit__back { top: 18%; } .recruit__back--requirements { top: 1%; } } .recruit__back--info { top: 10%; width: 56.953125vw; height: 8.046875vw; } @media screen and (max-width: 800px) { .recruit__back--info { width: 93.3333333333vw; } } @media screen and (max-width: 800px) { .recruit__back--info { height: 13.3333333333vw; } } @media screen and (max-width: 800px) { .recruit__back--info { top: 8%; } } .recruit__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .recruit__title { font-size: 8.5333333333vw; } } .recruit__border { width: 6.484375vw; height: 2px; background-color: black; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .recruit__border { width: 14.9333333333vw; } } @media screen and (max-width: 800px) { .recruit__border { margin-top: 0vw; } } .recruit__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .recruit__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__subtitle { margin-top: 2.1333333333vw; } } .recruit__topText { font-size: 1.875vw; text-align: center; line-height: 2; margin-top: 3.125vw; font-weight: 500; } @media screen and (max-width: 800px) { .recruit__topText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__topText { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .recruit__topText { width: 80%; font-weight: 700; } } .recruit__topText--under { font-size: 1.25vw; width: 55.234375vw; } @media screen and (max-width: 800px) { .recruit__topText--under { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .recruit__topText--under { width: 80vw; } } .recruit__inner { display: flex; flex-direction: column; width: 63%; margin-top: 5vw; } @media screen and (max-width: 800px) { .recruit__inner { margin-top: 17.0666666667vw; } } .recruit__inner--info { margin-top: 5.625vw; } @media screen and (max-width: 800px) { .recruit__inner--info { margin-top: 10.6666666667vw; } } .recruit__inner--requirements { margin-top: 6.25vw; } @media screen and (max-width: 800px) { .recruit__inner--requirements { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .recruit__inner { width: 80%; } } .recruit__borderLine { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1); } .recruit__row { display: flex; align-items: center; margin-top: 1.875vw; margin-bottom: 1.875vw; } @media screen and (max-width: 800px) { .recruit__row { margin-top: 6.4vw; margin-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .recruit__row { flex-direction: column; align-items: flex-start; } } .recruit__dataTitle { font-size: 1.25vw; margin-right: 4.375vw; width: 6.25vw; font-weight: 500; } @media screen and (max-width: 800px) { .recruit__dataTitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__dataTitle { margin-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__dataTitle { width: 21.3333333333vw; } } .recruit__dataTitle--info { width: 9.375vw; margin-left: 6.25vw; font-size: 1.5625vw; } @media screen and (max-width: 800px) { .recruit__dataTitle--info { width: 29.3333333333vw; } } @media screen and (max-width: 800px) { .recruit__dataTitle--info { margin-left: 2.1333333333vw; } } @media screen and (max-width: 800px) { .recruit__dataTitle--info { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .recruit__dataTitle { font-weight: 700; } } .recruit__dataColumn { display: flex; flex-direction: column; } .recruit__data { font-size: 1.25vw; line-height: 1.5; font-weight: 300; } @media screen and (max-width: 800px) { .recruit__data { font-size: 4.2666666667vw; } } .recruit__data--info { margin-left: 6.25vw; font-size: 1.5625vw; } @media screen and (max-width: 800px) { .recruit__data--info { margin-left: 10.6666666667vw; } } @media screen and (max-width: 800px) { .recruit__data--info { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__data { display: none; } } .recruit__dataSpan { font-size: 1.25vw; margin-top: 1.875vw; line-height: 1.5; } @media screen and (max-width: 800px) { .recruit__dataSpan { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__dataSpan { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .recruit__dataSpan { display: none; } } .recruit__dataSp { display: none; } @media screen and (max-width: 800px) { .recruit__dataSp { display: block; color: inherit; /* 親要素の色を継承 */ font-size: inherit; /* 親要素のフォントサイズを継承 */ font-size: 1.25vw; font-family: "NotoSerifJP-Regular", serif; font-weight: 400; line-height: 1.5; margin-top: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .recruit__dataSp { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .recruit__dataSp { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .recruit__dataSp a[href="tel:165-0031"] { color: inherit; font-size: inherit; } } .recruit__dataSpSpan { display: none; } @media screen and (max-width: 800px) { .recruit__dataSpSpan { display: block; color: inherit; /* 親要素の色を継承 */ font-size: inherit; /* 親要素のフォントサイズを継承 */ font-size: 1.25vw; line-height: 1.5; margin-top: 1.875vw; font-family: "NotoSerifJP-Regular", serif; font-weight: 400; } } @media screen and (max-width: 800px) and (max-width: 800px) { .recruit__dataSpSpan { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .recruit__dataSpSpan { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .recruit__dataSpSpan a[href="tel:165-0031"] { color: inherit; font-size: inherit; } } .recruit__buttonFlex { display: flex; justify-content: center; } .recruit__button { font-weight: 400; width: 18.671875vw; padding-top: 1.09375vw; padding-bottom: 1.09375vw; border: 1px solid #d72d56; color: #d72d56; text-align: center; border-radius: 999px; font-size: 1.25vw; margin-top: 4.375vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .recruit__button { width: 63.7333333333vw; } } @media screen and (max-width: 800px) { .recruit__button { padding-top: 3.7333333333vw; padding-bottom: 3.7333333333vw; } } @media screen and (max-width: 800px) { .recruit__button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .recruit__button { margin-top: 14.9333333333vw; } } .recruit__button:hover { background-color: #d72d56; color: white; } .requirements { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; margin-top: 10.9375vw; } @media screen and (max-width: 800px) { .requirements { margin-top: 29.8666666667vw; } } .company { display: flex; flex-direction: column; align-items: center; padding-top: 9.375vw; } @media screen and (max-width: 800px) { .company { padding-top: 32vw; } } .company__title { font-size: 5vw; font-weight: 800; } @media screen and (max-width: 800px) { .company__title { font-size: 12.8vw; } } .company__title--service { text-align: center; } .company__box { display: flex; justify-content: center; } .company__subtitle { font-size: 1.25vw; margin-top: 0.625vw; color: black; font-weight: 800; } @media screen and (max-width: 800px) { .company__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .company__subtitle { margin-top: 2.1333333333vw; } } .company__subtitle--service { text-align: center; } .company__inner { display: flex; flex-direction: column; width: 61%; margin-top: 5vw; margin-bottom: 8.75vw; } @media screen and (max-width: 800px) { .company__inner { margin-top: 17.0666666667vw; } } @media screen and (max-width: 800px) { .company__inner { margin-bottom: 21.3333333333vw; } } @media screen and (max-width: 800px) { .company__inner { width: 80%; } } .company__borderLine { width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); } .company__row { display: flex; align-items: center; margin-top: 1.875vw; margin-bottom: 1.875vw; } @media screen and (max-width: 800px) { .company__row { margin-top: 6.4vw; margin-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .company__row { flex-direction: column; align-items: flex-start; } } .company__dataTitle { font-size: 0.9375vw; width: 18.125vw; color: black; font-weight: 400; } @media screen and (max-width: 800px) { .company__dataTitle { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .company__dataTitle { width: 61.8666666667vw; } } .company__data { font-size: 1.09375vw; color: black; } @media screen and (max-width: 800px) { .company__data { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .company__data { margin-top: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .company__data { margin-top: 2.1333333333vw; } } .serviceUnder { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #fff; padding-top: 31.25vw; } @media screen and (max-width: 800px) { .serviceUnder { padding-top: 106.6666666667vw; } } .serviceUnder__container { position: relative; z-index: 1; } .serviceUnder__imgs { width: 64.0625vw; height: auto; -webkit-animation: color-change 5s infinite; animation: color-change 5s infinite; transform-origin: 50% 50%; -webkit-animation: rotation 10s infinite linear; animation: rotation 10s infinite linear; } @media screen and (max-width: 800px) { .serviceUnder__imgs { width: 218.6666666667vw; } } @-webkit-keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media screen and (max-width: 800px) { .serviceUnder__imgs { margin-bottom: 6.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .serviceUnder__imgs { margin-bottom: 21.3333333333vw; } } .serviceUnder__title { font-size: 5vw; color: #001455; font-weight: 700; padding-left: 1.25vw; } @media screen and (max-width: 800px) { .serviceUnder__title { font-size: 10.6666666667vw; } } @media screen and (max-width: 800px) { .serviceUnder__title { padding-left: 2.1333333333vw; } } .serviceUnder__titleBox { display: flex; flex-direction: column; justify-content: flex-start; padding-left: 37.5vw; margin-bottom: 3.75vw; } @media screen and (max-width: 800px) { .serviceUnder__titleBox { padding-left: 24.5333333333vw; } } @media screen and (max-width: 800px) { .serviceUnder__titleBox { margin-bottom: 12.8vw; } } .serviceUnder__titleLine { width: 28.515625vw; 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) { .serviceUnder__titleLine { width: 53.3333333333vw; } } @media screen and (max-width: 800px) { .serviceUnder__titleLine { height: 4.2666666667vw; } } .serviceUnder__contents { width: 90%; overflow: hidden; margin-left: 10%; margin-bottom: 6.25vw; } @media screen and (max-width: 800px) { .serviceUnder__contents { margin-bottom: 21.3333333333vw; } } .serviceUnder__contents--left { margin-left: 0vw; } @media screen and (max-width: 800px) { .serviceUnder__contents--left { margin-left: 0vw; } } .serviceUnder__contents:last-child { margin-bottom: 3.125vw; } @media screen and (max-width: 800px) { .serviceUnder__contents:last-child { margin-bottom: 10.6666666667vw; } } .serviceUnder__imgWrapper { position: relative; overflow: hidden; margin-bottom: 3.125vw; aspect-ratio: 1141/392; } @media screen and (max-width: 800px) { .serviceUnder__imgWrapper { margin-bottom: 10.6666666667vw; } } .serviceUnder__img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .serviceUnder__textbox { width: 78.4375vw; display: flex; justify-content: space-between; } @media screen and (max-width: 800px) { .serviceUnder__textbox { width: 80vw; } } .serviceUnder__textbox--left { margin-left: 10.78125vw; } @media screen and (max-width: 800px) { .serviceUnder__textbox--left { margin-left: 9.8666666667vw; } } @media screen and (max-width: 800px) { .serviceUnder__textbox { flex-direction: column; } } @media screen and (max-width: 800px) { .serviceUnder__left { margin-bottom: 2.5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .serviceUnder__left { margin-bottom: 8.5333333333vw; } } .serviceUnder__subtext { font-size: 1.25vw; margin-bottom: 0.625vw; color: #001455; } @media screen and (max-width: 800px) { .serviceUnder__subtext { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .serviceUnder__subtext { margin-bottom: 2.1333333333vw; } } .serviceUnder__text { font-size: 1.875vw; color: #001455; font-weight: 700; } @media screen and (max-width: 800px) { .serviceUnder__text { font-size: 6.4vw; } } .serviceUnder__content { font-size: 1.25vw; width: 45.234375vw; margin-bottom: 2.5vw; color: #001455; line-height: 2; } @media screen and (max-width: 800px) { .serviceUnder__content { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .serviceUnder__content { width: 80vw; } } @media screen and (max-width: 800px) { .serviceUnder__content { margin-bottom: 8.5333333333vw; } } .serviceUnder__detail { display: flex; border-bottom: 0.078125vw solid rgba(255, 255, 255, 0.3); padding-bottom: 1.25vw; align-items: center; justify-content: space-between; } @media screen and (max-width: 800px) { .serviceUnder__detail { padding-bottom: 4.2666666667vw; } } .serviceUnder__button { --color: #001455; --bg-color: #001455; width: 4.375vw; height: 4.375vw; border: 0.078125vw solid rgba(255, 255, 255, 0.3); border-radius: 78.046875vw; position: relative; background-color: var(--bg-color); transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .serviceUnder__button { width: 14.9333333333vw; } } @media screen and (max-width: 800px) { .serviceUnder__button { height: 14.9333333333vw; } } .serviceUnder__button:hover { --color: #001455; --bg-color: #001455; } .serviceUnder__button .serviceUnder__next path { stroke: var(--color); } .serviceUnder__next { width: 1.875vw; position: absolute; top: 30%; left: 30%; } @media screen and (max-width: 800px) { .serviceUnder__next { width: 6.4vw; } } .hamburger { display: none; position: relative; } .hamburger.active span:nth-of-type(1) { transform: translateY(2.1vw) rotate(45deg); } .hamburger.active span:nth-of-type(2) { opacity: 0; } .hamburger.active span:nth-of-type(3) { transform: translateY(-2.1vw) rotate(-45deg); } @media screen and (max-width: 800px) { .hamburger { display: block; z-index: 109000; cursor: pointer; width: 1.875vw; height: 1.25vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { width: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .hamburger { height: 4.2666666667vw; } } @media screen and (max-width: 800px) { .hamburger span { transition: all 0.5s; position: absolute; left: 0; width: 100%; height: 1px; background-color: #001455; 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: #001455; } .drawerNav { width: 100%; padding-top: 6.25vw; padding-bottom: 9.375vw; padding-left: 2.5vw; padding-right: 2.5vw; background-color: #fffbfc; overflow-y: auto; /* スクロールを可能にする */ max-height: 100vh; box-sizing: border-box; z-index: 4; } @media screen and (max-width: 800px) { .drawerNav { padding-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .drawerNav { padding-bottom: 32vw; } } @media screen and (max-width: 800px) { .drawerNav { padding-left: 8.5333333333vw; padding-right: 8.5333333333vw; } } .drawerNav__item a { color: black; } .drawerNav__link { font-size: 1.25vw; padding-top: 1.25vw; padding-bottom: 1.25vw; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .drawerNav__link { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .drawerNav__link { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .drawerNav__link { padding-bottom: 4.2666666667vw; } } .drawerNav__button { display: inline-flex !important; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .drawerNav__button { margin-top: 6.4vw; } } .drawerNav__campain { width: 100%; border: 1px solid #d72d56; border-radius: 999px; } .drawer--left .drawer-nav { left: -100vw; } .blog { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding-top: 12.5vw; overflow: hidden; } @media screen and (max-width: 800px) { .blog { padding-top: 42.6666666667vw; } } .blog__inner { display: flex; justify-content: flex-start; flex-direction: column; width: 78.4375vw; } @media screen and (max-width: 800px) { .blog__inner { width: 80vw; } } .blog__title { font-size: 2.5vw; font-weight: bold; } @media screen and (max-width: 800px) { .blog__title { font-size: 8.5333333333vw; } } .blog__card { display: flex; flex-direction: column; margin-top: 2.5vw; width: 25.078125vw; } @media screen and (max-width: 800px) { .blog__card { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .blog__card { width: 80vw; } } .blog__imgWrapper { width: 24.921875vw; position: relative; border: 2px solid white; border-radius: 5px; border-radius: 5px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .blog__imgWrapper { width: 80vw; } } .blog__imgWrapper::before { display: block; content: ""; padding-top: 67.0846394984%; } .blog__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog__contentTitle { font-size: 1.25vw; font-weight: bold; margin-top: 2.5vw; color: #001455; } @media screen and (max-width: 800px) { .blog__contentTitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .blog__contentTitle { margin-top: 8.5333333333vw; } } .blog__content { font-size: 1.25vw; line-height: 2; margin-top: 0.625vw; color: #001455; } @media screen and (max-width: 800px) { .blog__content { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .blog__content { margin-top: 2.1333333333vw; } } .blog__button { display: flex; justify-content: flex-end; align-items: center; margin-top: 2.5vw; padding-bottom: 2.5vw; } @media screen and (max-width: 800px) { .blog__button { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .blog__button { padding-bottom: 8.5333333333vw; } } .blog__enter { width: 0.390625vw; height: 0.390625vw; background-color: #fff; border-radius: 999px; border: 12px solid #f78821; } @media screen and (max-width: 800px) { .blog__enter { width: 1.3333333333vw; } } @media screen and (max-width: 800px) { .blog__enter { height: 1.3333333333vw; } } .blog__buttonText { font-size: 1.25vw; font-weight: bold; margin-left: 1.875vw; color: #001455; } @media screen and (max-width: 800px) { .blog__buttonText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .blog__buttonText { margin-left: 6.4vw; } } .contactForm { display: flex; justify-content: center; align-items: center; } .contactForm__acceptance { display: flex; justify-content: center; align-items: center; color: #000; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .contactForm__acceptance { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .contactForm__acceptance { flex-direction: column; } } .contactForm__acceptance .wpcf7-list-item { margin: auto; } .contactForm__acceptance .wpcf7-list-item > label { display: flex; align-items: center; } .contactForm__acceptance .wpcf7-list-item > label input { display: block; width: 1.25vw; height: 1.25vw; margin: 0vw; margin-right: 0.625vw; } @media screen and (max-width: 800px) { .contactForm__acceptance .wpcf7-list-item > label input { width: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__acceptance .wpcf7-list-item > label input { height: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__acceptance .wpcf7-list-item > label input { margin: 0vw; } } @media screen and (max-width: 800px) { .contactForm__acceptance .wpcf7-list-item > label input { margin-right: 2.1333333333vw; } } .contactForm__privacyPolicy { font-size: 0.625vw; color: #ff0000; opacity: 0.6; font-weight: 500; line-height: 1.5; } @media screen and (max-width: 800px) { .contactForm__privacyPolicy { font-size: 2.1333333333vw; } } .contactForm__inner { display: flex; justify-content: center; flex-direction: column; width: 100%; } @media screen and (max-width: 800px) { .contactForm__inner { overflow: hidden; } } .contactForm__item { display: flex; flex-direction: column; width: 100%; } .contactForm__item + .contactForm__item { display: flex; flex-direction: column; width: 100%; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .contactForm__item + .contactForm__item { margin-top: 8.5333333333vw; } } .contactForm__itemTitle { font-size: 1.25vw; color: #000; font-weight: 500; line-height: 1.5; /* 24px */ } @media screen and (max-width: 800px) { .contactForm__itemTitle { font-size: 4.2666666667vw; } } .contactForm__itemTitle span { display: inline; padding-left: 0.625vw; font-size: 1.25vw; color: #f00; font-weight: 500; line-height: 1.5; /* 24px */ opacity: 0.6; } @media screen and (max-width: 800px) { .contactForm__itemTitle span { padding-left: 2.1333333333vw; } } @media screen and (max-width: 800px) { .contactForm__itemTitle span { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__itemTitle span { display: none; } .contactForm__itemTitle span:after { content: "※"; /* ※を追加 */ display: inline; color: #f00; /* 色はお好みで変更 */ } } .contactForm__nameFields { display: flex; gap: 1.875vw; } .contactForm__nameFields:first-of-type { padding-top: 1.25vw; } @media screen and (max-width: 800px) { .contactForm__nameFields:first-of-type { padding-top: 4.2666666667vw; } } .contactForm__nameFields + .contactForm__nameFields { margin-top: 2.5vw; } @media screen and (max-width: 800px) { .contactForm__nameFields + .contactForm__nameFields { margin-top: 8.5333333333vw; } } .contactForm__nameLabel { font-size: 0.9375vw; } @media screen and (max-width: 800px) { .contactForm__nameLabel { font-size: 3.2vw; } } .contactForm__topItemTitleWrapper { display: flex; } @media screen and (max-width: 800px) { .contactForm__topItemTitleWrapper { flex-direction: column; } } .contactForm__topItemTitleSP { display: none; padding-left: 0.625vw; } @media screen and (max-width: 800px) { .contactForm__topItemTitleSP { padding-left: 0vw; } } @media screen and (max-width: 800px) { .contactForm__topItemTitleSP { display: inline; font-size: 1.25vw; color: #f00; font-weight: 500; line-height: 1.5; /* 24px */ opacity: 0.6; } } @media screen and (max-width: 800px) and (max-width: 800px) { .contactForm__topItemTitleSP { font-size: 4.2666666667vw; } } .contactForm__input { width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 5px; padding-left: 1.875vw; padding-right: 1.875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; margin-top: 1.25vw; font-size: 1.09375vw; line-height: 1.5; font-family: "YuGothic-Medium"; color: #353535; font-style: normal; font-weight: 500; background: rgba(0, 0, 0, 0.05); opacity: 0.8; resize: none; } @media screen and (max-width: 800px) { .contactForm__input { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__input { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__input { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__input { font-size: 3.7333333333vw; } } .contactForm input[type=date]::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; background: transparent; z-index: 1; } .contactForm input[type=radio] { display: block; width: 1.25vw; height: 1.25vw; } @media screen and (max-width: 800px) { .contactForm input[type=radio] { width: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm input[type=radio] { height: 4.2666666667vw; } } .contactForm__select { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; padding-left: 1.875vw; padding-right: 1.875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; margin-top: 0.625vw; font-size: 1.09375vw; line-height: 1.5; font-weight: 500; color: #817f7f; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (max-width: 800px) { .contactForm__select { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__select { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__select { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .contactForm__select { font-size: 3.7333333333vw; } } .contactForm__select::-ms-expand { display: none; } .contactForm__select:focus { outline: none; border-color: rgba(0, 0, 0, 0.3); } .contactForm__select option { color: #fff; background: #6c6665; } .contactForm__selectTitle { font-size: 1.25vw; margin-top: 1.25vw; line-height: 1.5; color: #f00; font-weight: 500; opacity: 0.6; } @media screen and (max-width: 800px) { .contactForm__selectTitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__selectTitle { margin-top: 4.2666666667vw; } } .contactForm__button { display: flex; justify-content: center; align-items: center; z-index: 3; padding-top: 4.375vw; } @media screen and (max-width: 800px) { .contactForm__button { padding-top: 14.9333333333vw; } } .contactForm__button :hover { color: #d72d56; background: #fff; } .contactForm__privacy { width: 24px; height: 24px; flex-shrink: 0; border: 1px solid rgba(53, 53, 53, 0.6); } .contactForm__submit { display: flex; justify-content: center; align-items: center; height: 4.0625vw; padding-left: 5.625vw; padding-right: 5.625vw; font-size: 1.09375vw; text-align: center; font-style: normal; font-weight: 400; color: #f8fcff; background: #d72d56; border: 1px solid #d72d56; border-radius: 100px; cursor: pointer; } @media screen and (max-width: 800px) { .contactForm__submit { height: 11.4666666667vw; } } @media screen and (max-width: 800px) { .contactForm__submit { padding-left: 15.2vw; padding-right: 15.2vw; } } @media screen and (max-width: 800px) { .contactForm__submit { font-size: 3.7333333333vw; } } .contactForm__submit :hover { color: #d72d56; background: #fff; border: 1px solid #d72d56; border-radius: 100px; } .contactForm__radioButton { display: flex; flex-wrap: wrap; margin-top: 1.25vw; gap: 0.625vw; } @media screen and (max-width: 800px) { .contactForm__radioButton { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__radioButton { flex-direction: column; gap: 8px; gap: 2.1333333333vw; } } .contactForm__age { display: flex; justify-content: space-evenly; } .contactForm__annotation { font-size: 1.25vw; color: #676566; padding-top: 1.25vw; margin-bottom: 1.25vw; } @media screen and (max-width: 800px) { .contactForm__annotation { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__annotation { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__annotation { margin-bottom: 4.2666666667vw; } } .contactForm__link { font-size: 1.25vw; color: #0063b3; -webkit-text-decoration: underline #0063b3; text-decoration: underline #0063b3; transition: transform 0.5s ease-in-out; } @media screen and (max-width: 800px) { .contactForm__link { font-size: 4.2666666667vw; } } .contactForm__link:hover { text-decoration: none; } .contactForm__dateSelectWrapper { display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .contactForm__dateSelectWrapper { margin-top: 4.2666666667vw; } } .contactForm__dateSelectWrapper .wpcf7-form-control-wrap { display: flex; justify-content: center; align-items: flex-start; align-self: flex-start; box-sizing: border-box; } .contactForm__dateSelectWrapper input { display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .contactForm__dateSelectWrapper { flex-direction: column; } } .contactForm__calender { display: flex; position: relative; box-sizing: border-box; width: 28.671875vw; height: 4.296875vw; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; cursor: pointer; padding-left: 1.875vw; padding-right: 1.875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; font-size: 1.09375vw; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (max-width: 800px) { .contactForm__calender { width: 80vw; } } @media screen and (max-width: 800px) { .contactForm__calender { height: 14.6666666667vw; } } @media screen and (max-width: 800px) { .contactForm__calender { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__calender { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__calender { font-size: 3.7333333333vw; } } .contactForm__calender::-moz-placeholder { font-size: 1.25vw; } .contactForm__calender:-ms-input-placeholder { font-size: 1.25vw; } .contactForm__calender::placeholder { font-size: 1.25vw; } @media screen and (max-width: 800px) { .contactForm__calender::-moz-placeholder { font-size: 4.2666666667vw; } .contactForm__calender:-ms-input-placeholder { font-size: 4.2666666667vw; } .contactForm__calender::placeholder { font-size: 4.2666666667vw; } } .contactForm__calender .flatpickr-calendar * { font-size: 1.4rem !important; } .contactForm__hoursSelect { width: 28.671875vw; margin-top: 0vw; } @media screen and (max-width: 800px) { .contactForm__hoursSelect { width: 80vw; } } @media screen and (max-width: 800px) { .contactForm__hoursSelect { margin-top: 4.2666666667vw; } } .contactForm__recruitAgeWrapper { display: flex; align-items: center; } .contactForm__recruitAgeWrapper p { font-size: 1.25vw; margin-left: 0.625vw; line-height: 1.5; } @media screen and (max-width: 800px) { .contactForm__recruitAgeWrapper p { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__recruitAgeWrapper p { margin-left: 2.1333333333vw; } } .contactForm__inputAge { width: 5.625vw; height: 4.375vw; } @media screen and (max-width: 800px) { .contactForm__inputAge { width: 19.2vw; } } @media screen and (max-width: 800px) { .contactForm__inputAge { height: 14.9333333333vw; } } .wpcf7-form-control-wrap[data-name=calender] input, .wpcf7-form-control-wrap[data-name=secondCalender] input { padding-left: 3.75vw; } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=calender] input, .wpcf7-form-control-wrap[data-name=secondCalender] input { padding-left: 12.8vw; } } .wpcf7-form-control-wrap[data-name=calender]::after, .wpcf7-form-control-wrap[data-name=secondCalender]::after { content: ""; background-image: url("../images/calender-icon.svg"); background-repeat: no-repeat; background-size: contain; background-position: 0 0; width: 1.5625vw; height: 1.5625vw; position: absolute; top: 1.25vw; left: 1.25vw; } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=calender]::after, .wpcf7-form-control-wrap[data-name=secondCalender]::after { width: 5.3333333333vw; } } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=calender]::after, .wpcf7-form-control-wrap[data-name=secondCalender]::after { height: 5.3333333333vw; } } @media screen and (max-width: 800px) { .wpcf7-form-control-wrap[data-name=calender]::after, .wpcf7-form-control-wrap[data-name=secondCalender]::after { top: 4.2666666667vw; left: 4.2666666667vw; } } .wpcf7-list-item { display: flex; justify-content: center; align-items: center; } .wpcf7-list-item label { display: flex; align-items: center; } .flatpickr-weekdays { margin-top: 16px; } .wpcf7-list-item-label { font-size: 1.25vw; color: #000; font-weight: 500; line-height: 1.5; /* 24px */ } @media screen and (max-width: 800px) { .wpcf7-list-item-label { font-size: 4.2666666667vw; } } .wpcf7-list-item-label span { font-size: 1.25vw; padding-left: 0.625vw; color: #ba3131; font-style: normal; font-weight: 500; line-height: 1.5; /* 24px */ opacity: 0.6; } @media screen and (max-width: 800px) { .wpcf7-list-item-label span { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .wpcf7-list-item-label span { padding-left: 2.1333333333vw; } } .wpcf7-form-control-wrap { display: flex; align-items: flex-start; flex-direction: column; } .wpcf7-form textarea { border: none; /* ボーダーを消す */ } .wpcf7-spinner { display: none !important; visibility: hidden !important; } .wpcf7-not-valid-tip { padding-top: 0.625vw; font-size: 12px !important; } @media screen and (max-width: 800px) { .wpcf7-not-valid-tip { padding-top: 2.1333333333vw; } } .wpcf7-response-output { text-align: center; color: #dc3232; margin-top: 16px !important; font-size: 16px !important; border: none !important; } /* SP版 (必須) を ※ に変換するスタイル */ @media (max-width: 768px) { .contactForm__itemTitle span, .wpcf7-list-item-label span { display: none; /* (必須) を非表示 */ } .contactForm__itemTitle:after, .wpcf7-list-item-label:after { content: "＊"; /* ※を追加 */ font-size: 0.625vw; display: inline; color: red; /* 色はお好みで変更 */ } } @media screen and (max-width: 768px) and (max-width: 800px) { .contactForm__itemTitle:after, .wpcf7-list-item-label:after { font-size: 2.1333333333vw; } } .contactForm__recruitResumeWrapper p { display: flex; align-items: center; justify-content: start; padding-top: 1.25vw; } @media screen and (max-width: 800px) { .contactForm__recruitResumeWrapper p { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactForm__recruitResumeWrapper p { flex-direction: column; align-items: flex-start; } } #fileInput { display: none; } #customButton { display: inline-block; background: #f2eeef; color: #817f7f; border-radius: 5px; border: none; padding-left: 1.875vw; padding-right: 1.875vw; padding-top: 1.25vw; padding-bottom: 1.25vw; outline: none; cursor: pointer; font-size: 1.25vw; } @media screen and (max-width: 800px) { #customButton { padding-left: 6.4vw; padding-right: 6.4vw; } } @media screen and (max-width: 800px) { #customButton { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { #customButton { font-size: 4.2666666667vw; } } #fileName { margin-left: 1.875vw; font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { #fileName { margin-left: 0vw; } } @media screen and (max-width: 800px) { #fileName { font-size: 4.2666666667vw; } } .contactForm__recruitResumeAnnotation { margin-top: 0.625vw; font-size: 1.09375vw; line-height: 1.5; color: #676566; } @media screen and (max-width: 800px) { .contactForm__recruitResumeAnnotation { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .contactForm__recruitResumeAnnotation { font-size: 3.7333333333vw; } } .wpcf7-list-item > label > span { margin-right: 0.625vw; } @media screen and (max-width: 800px) { .wpcf7-list-item > label > span { margin-right: 0vw; } } .wpcf7-list-item > label > input { margin-right: 0.625vw; } @media screen and (max-width: 800px) { .wpcf7-list-item > label > input { margin-right: 2.1333333333vw; } } input[type=date i]::-webkit-datetime-edit, input[type=date i]::-webkit-inner-spin-button, input[type=date i]::-webkit-clear-button { font-family: "YuGothic-Medium"; color: #817f7f; font-size: 1.25vw; padding-left: 4.375vw; } @media screen and (max-width: 800px) { input[type=date i]::-webkit-datetime-edit, input[type=date i]::-webkit-inner-spin-button, input[type=date i]::-webkit-clear-button { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { input[type=date i]::-webkit-datetime-edit, input[type=date i]::-webkit-inner-spin-button, input[type=date i]::-webkit-clear-button { padding-left: 14.9333333333vw; } } .custom-file-upload { position: relative; display: flex; cursor: pointer; align-items: center; } .custom-file-upload input[type=file] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .custom-file-upload-span { display: inline-block; background: #f2eeef; color: #817f7f; border-radius: 5px; border: none; padding-top: 1.25vw; padding-bottom: 1.25vw; padding-left: 1.875vw; padding-right: 1.875vw; font-size: 1.25vw; order: 1; } @media screen and (max-width: 800px) { .custom-file-upload-span { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .custom-file-upload-span { padding-left: 6.4vw; padding-right: 6.4vw; } } @media screen and (max-width: 800px) { .custom-file-upload-span { font-size: 4.2666666667vw; } } .file-name { order: 2; color: #000; font-family: "Noto Serif JP"; font-size: 1.25vw; font-weight: 500; line-height: 1.5; /* 24px */ } @media screen and (max-width: 800px) { .file-name { font-size: 4.2666666667vw; } } .custom-file-upload:hover span { background: #e5e0e2; } .file-name { margin-left: 10px; } .member { background-color: #fff; padding-top: 12.5vw; } @media screen and (max-width: 800px) { .member { padding-top: 42.6666666667vw; } } .member__employee { display: flex; flex-wrap: wrap; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .member__employee { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .member__employee { flex-direction: column; } } .member__card { margin-top: 2.5vw; display: flex; flex-direction: column; width: 32.33%; box-sizing: border-box; margin-right: 1%; margin-bottom: 2%; } @media screen and (max-width: 800px) { .member__card { margin-top: 8.5333333333vw; } } .member__card:last-child { margin-right: 0; } @media screen and (max-width: 800px) { .member__card { width: 100%; margin-right: 0; } } .member__imgWrapper { width: 23.4375vw; position: relative; } @media screen and (max-width: 800px) { .member__imgWrapper { width: 80vw; } } .member__imgWrapper::before { display: block; content: ""; padding-top: 130%; } .member__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .member__post { font-size: 0.9375vw; color: #a8a8a8; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .member__post { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .member__post { margin-top: 6.4vw; } } .member__name { font-size: 1.875vw; color: #001455; font-weight: bold; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .member__name { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .member__name { margin-top: 4.2666666667vw; } } .serviceLower { display: flex; flex-direction: column; background-color: #fff; padding-top: 12.5vw; } @media screen and (max-width: 800px) { .serviceLower { padding-top: 42.6666666667vw; } } .serviceLower__inner { width: 80%; margin-left: 10%; } .serviceLower__title { font-size: 2.5vw; font-weight: 700; } @media screen and (max-width: 800px) { .serviceLower__title { font-size: 8.5333333333vw; } } .serviceLower__titleText { width: 37.578125vw; font-size: 1.25vw; line-height: 2; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .serviceLower__titleText { width: 80vw; } } @media screen and (max-width: 800px) { .serviceLower__titleText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .serviceLower__titleText { margin-top: 4.2666666667vw; } } .serviceLower__service { display: flex; justify-content: space-between; align-items: center; width: 90%; margin-top: 10.625vw; } @media screen and (max-width: 800px) { .serviceLower__service { margin-top: 36.2666666667vw; } } .serviceLower__service--right { margin-left: 10%; } @media screen and (max-width: 800px) { .serviceLower__service--right { margin-left: 0; display: flex; flex-direction: column-reverse !important; } } @media screen and (max-width: 800px) { .serviceLower__service { flex-direction: column; width: 100%; } } .serviceLower__leftImg { width: 45.390625vw; position: relative; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } @media screen and (max-width: 800px) { .serviceLower__leftImg { width: 100vw; } } .serviceLower__leftImg::before { display: block; content: ""; padding-top: 56.9707401033%; } .serviceLower__leftImg > * { 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) { .serviceLower__leftImg { border-top-right-radius: 0; border-bottom-right-radius: 0; } } .serviceLower__content { width: 35.46875vw; } @media screen and (max-width: 800px) { .serviceLower__content { width: 80vw; } } @media screen and (max-width: 800px) { .serviceLower__content { margin-top: 2.5vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .serviceLower__content { margin-top: 8.5333333333vw; } } .serviceLower__contentTitle { font-size: 1.875vw; color: #f78821; font-weight: 700; } @media screen and (max-width: 800px) { .serviceLower__contentTitle { font-size: 6.4vw; } } .serviceLower__contentText { font-size: 1.25vw; line-height: 1.5; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .serviceLower__contentText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .serviceLower__contentText { margin-top: 4.2666666667vw; } } .serviceLower__contentTitle { font-size: 1.875vw; color: #f78821; } @media screen and (max-width: 800px) { .serviceLower__contentTitle { font-size: 6.4vw; } } .serviceLower__button { display: flex; justify-content: flex-start; display: flex; align-items: center; margin-top: 1.25vw; padding-bottom: 2.5vw; } @media screen and (max-width: 800px) { .serviceLower__button { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .serviceLower__button { padding-bottom: 8.5333333333vw; } } .serviceLower__enter { width: 0.390625vw; height: 0.390625vw; background-color: #fff; border-radius: 999px; border: 12px solid #f78821; } @media screen and (max-width: 800px) { .serviceLower__enter { width: 1.3333333333vw; } } @media screen and (max-width: 800px) { .serviceLower__enter { height: 1.3333333333vw; } } .serviceLower__buttonText { font-size: 1.25vw; font-weight: 700; color: #001455; margin-left: 1.875vw; } @media screen and (max-width: 800px) { .serviceLower__buttonText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .serviceLower__buttonText { margin-left: 6.4vw; } } .professor { display: flex; justify-content: center; align-items: center; margin-top: 12.5vw; } @media screen and (max-width: 800px) { .professor { margin-top: 42.6666666667vw; } } .professor__inner { width: 80%; } .professor__title { font-size: 2.5vw; font-weight: 700; } @media screen and (max-width: 800px) { .professor__title { font-size: 8.5333333333vw; } } .professor__terms { display: flex; margin-top: 1.875vw; margin-right: 1.25vw; } @media screen and (max-width: 800px) { .professor__terms { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .professor__terms { margin-right: 4.2666666667vw; } } .professor__boder { display: flex; } .professor__termLink { text-align: center; width: 7.578125vw; font-size: 1.25vw; color: #f78821; border: 1px solid #f78821; border-radius: 5px; padding-top: 0.625vw; padding-bottom: 0.625vw; font-weight: 700; } @media screen and (max-width: 800px) { .professor__termLink { width: 25.8666666667vw; } } @media screen and (max-width: 800px) { .professor__termLink { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .professor__termLink { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } .professor__cardBox { display: flex; flex-wrap: wrap; } .professor__card { margin-top: 3.125vw; width: 23.4375vw; margin-right: 4.375vw; } @media screen and (max-width: 800px) { .professor__card { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .professor__card { width: 80vw; } } @media screen and (max-width: 800px) { .professor__card { margin-right: 14.9333333333vw; } } .professor__card:nth-child(3n) { margin-right: 0; } .professor__imgWrapper { width: 23.4375vw; position: relative; } @media screen and (max-width: 800px) { .professor__imgWrapper { width: 80vw; } } .professor__imgWrapper::before { display: block; content: ""; padding-top: 130.6666666667%; } .professor__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .professor__img { width: 100%; border-radius: 5px; } .professor__prefecture { font-size: 0.9375vw; color: #a8a8a8; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .professor__prefecture { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .professor__prefecture { margin-top: 6.4vw; } } .professor__name { font-size: 1.875vw; margin-top: 0.625vw; color: #001455; font-weight: 700; } @media screen and (max-width: 800px) { .professor__name { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .professor__name { margin-top: 2.1333333333vw; } } .professor__text { font-size: 0.9375vw; margin-top: 0.625vw; color: #001455; line-height: 2; } @media screen and (max-width: 800px) { .professor__text { font-size: 3.2vw; } } @media screen and (max-width: 800px) { .professor__text { margin-top: 2.1333333333vw; } } .sectionTitle { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #001455; } .sectionTitle__title { font-size: 1.25vw; margin-top: 9.375vw; font-weight: 700; } @media screen and (max-width: 800px) { .sectionTitle__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .sectionTitle__title { margin-top: 32vw; } } .sectionTitle__subtitle { font-size: 3.125vw; margin-top: 0.625vw; font-weight: 700; } @media screen and (max-width: 800px) { .sectionTitle__subtitle { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .sectionTitle__subtitle { margin-top: 0.8vw; } } .sectionTitle__border { width: 6.25vw; height: 4px; background-color: #001455; border-radius: 999px; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .sectionTitle__border { width: 11.4666666667vw; } } @media screen and (max-width: 800px) { .sectionTitle__border { margin-top: 2.1333333333vw; } } .president__content { display: flex; align-items: flex-start; width: 80%; margin: auto; margin-top: 3.75vw; } @media screen and (max-width: 800px) { .president__content { margin-top: 12.8vw; } } @media screen and (max-width: 800px) { .president__content { display: flex; flex-direction: column; align-items: center; } } .president__image { width: 24%; -o-object-fit: contain; object-fit: contain; margin-right: 6.25vw; } @media screen and (max-width: 800px) { .president__image { margin-right: 0vw; } } @media screen and (max-width: 800px) { .president__image { width: 80%; margin-bottom: 16px; } } .president__paragraph { color: #001455; } @media screen and (max-width: 800px) { .president__paragraph { width: 100%; text-align: center; } } .president__post { font-size: 1.25vw; font-weight: 400; } @media screen and (max-width: 800px) { .president__post { font-size: 4.2666666667vw; } } .president__subtitle { font-size: 2.5vw; margin-top: 0.15625vw; } @media screen and (max-width: 800px) { .president__subtitle { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .president__subtitle { margin-top: 4.2666666667vw; } } .president__text { line-height: 2; width: 51.25vw; font-size: 1.25vw; margin-top: 1.875vw; text-align: left; padding-bottom: 1.875vw; } @media screen and (max-width: 800px) { .president__text { width: 80vw; } } @media screen and (max-width: 800px) { .president__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .president__text { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .president__text { padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .president__text br { display: none; } } .president__text a { font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; text-decoration: underline; } .president__book { display: flex; align-items: center; padding-top: 1.25vw; padding-bottom: 1.25vw; border-top: 1px solid rgba(0, 20, 85, 0.1); border-bottom: 1px solid rgba(0, 20, 85, 0.1); } @media screen and (max-width: 800px) { .president__book { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } .president__bookImg { display: block; width: 7.03125vw; box-shadow: -4px 4px 4px 0px rgba(0, 20, 85, 0.1); } @media screen and (max-width: 800px) { .president__bookImg { width: 24vw; } } .president__bookTitle { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-left: 3.125vw; } @media screen and (max-width: 800px) { .president__bookTitle { padding-left: 6.4vw; } } .president__bookTitle span { text-align: left; font-size: 1.25vw; line-height: 2; color: #001455; text-decoration: none; transition: all 0.25s ease-in; border-bottom: 1px solid #001455; } @media screen and (max-width: 800px) { .president__bookTitle span { font-size: 4.2666666667vw; } } .president__bookTitle span.small { font-size: 1.25vw; border-bottom: 1px solid #001455; } @media screen and (max-width: 800px) { .president__bookTitle span.small { font-size: 3.2vw; } } .president__bookTitle:hover span { border-bottom: 1px solid #001455; border-bottom: 1px solid rgba(0, 20, 85, 0); } a.link { font-size: 1.25vw; color: #001455; border-bottom: 1.5px solid #001455; padding: 1px 0px; z-index: 10; } @media screen and (max-width: 800px) { a.link { font-size: 4.2666666667vw; } } .membership { position: relative; } .membership__backImg1 { position: absolute; top: -32px; right: 0; width: 28.046875vw; } @media screen and (max-width: 800px) { .membership__backImg1 { width: 40vw; } } .membership__backImg2 { position: absolute; top: 184px; left: -24px; z-index: 1; width: 24.921875vw; } @media screen and (max-width: 800px) { .membership__backImg2 { width: 40vw; } } @media screen and (max-width: 800px) { .membership__backImg2 { top: 759px; } } .membership__inner { display: flex; flex-direction: column; justify-content: center; } .membership__section1 { margin-top: 3.75vw; width: 90%; display: flex; justify-content: space-between; border: 3px solid #001455; border-right: none; z-index: 2; background-color: white; } @media screen and (max-width: 800px) { .membership__section1 { margin-top: 12.8vw; } } @media screen and (max-width: 800px) { .membership__section1 { display: flex; flex-direction: column; border: 2px solid #001455; width: 80%; margin: auto; margin-top: 3.125vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__section1 { margin-top: 10.6666666667vw; } } .membership__left1 { display: flex; flex-direction: column; padding-left: 3.125vw; } @media screen and (max-width: 800px) { .membership__left1 { padding-left: 2.1333333333vw; } } @media screen and (max-width: 800px) { .membership__left1 { padding-top: 0.625vw; padding-right: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__left1 { padding-top: 2.1333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__left1 { padding-right: 2.1333333333vw; } } .membership__title { font-size: 2.5vw; color: #001455; margin-top: 3.75vw; font-weight: 500; } @media screen and (max-width: 800px) { .membership__title { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .membership__title { margin-top: 2.1333333333vw; } } .membership__fee { font-size: 1.25vw; color: #001455; margin-top: 1.875vw; } @media screen and (max-width: 800px) { .membership__fee { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .membership__fee { margin-top: 6.4vw; } } .membership__fee span a { font-size: 1.25vw; margin-top: 1.875vw; color: #da3863; border-bottom: 1.5px solid #da3863; text-decoration: none; } @media screen and (max-width: 800px) { .membership__fee span a { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .membership__fee span a { margin-top: 6.4vw; } } .membership__fee span a:hover { border-bottom-color: transparent; } .membership__fee span a:active { border-bottom: none; } .membership__subtitle { font-size: 1.25vw; font-weight: 700; color: #001455; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .membership__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .membership__subtitle { margin-top: 2.1333333333vw; } } .membership__text { font-size: 1.25vw; color: #001455; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .membership__text { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .membership__text { margin-top: 2.1333333333vw; } } .membership__list { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .membership__list { margin-top: 2.1333333333vw; } } .membership__item { font-size: 1.25vw; color: #001455; } @media screen and (max-width: 800px) { .membership__item { font-size: 4.2666666667vw; } } .membership__link { font-size: 1.25vw; color: white; background-color: #001455; width: 11.5625vw; height: 2.8125vw; text-align: center; display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 2.34375vw; } @media screen and (max-width: 800px) { .membership__link { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .membership__link { width: 39.4666666667vw; } } @media screen and (max-width: 800px) { .membership__link { height: 9.6vw; } } @media screen and (max-width: 800px) { .membership__link { margin-top: 8vw; } } .membership__link:hover { background-color: #0056b3; } .membership__section2 { margin-top: 3.125vw; width: 90%; display: flex; justify-content: space-between; border: 3px solid #001455; border-left: none; } @media screen and (max-width: 800px) { .membership__section2 { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .membership__section2 { width: 80%; margin: auto; display: flex; flex-direction: column-reverse; border: 2px solid #001455; margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__section2 { margin-top: 6.4vw; } } .membership__right2 { display: flex; flex-direction: column; padding-right: 3.125vw; } @media screen and (max-width: 800px) { .membership__right2 { padding-right: 0vw; } } @media screen and (max-width: 800px) { .membership__right2 { margin-left: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__right2 { margin-left: 2.1333333333vw; } } .membership__right1 { width: 50vw; margin-left: 1.875vw; position: relative; } @media screen and (max-width: 800px) { .membership__right1 { width: 80vw; } } @media screen and (max-width: 800px) { .membership__right1 { margin-left: 0vw; } } .membership__right1::before { display: block; content: ""; padding-top: 67.8125%; } .membership__right1 > * { 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) { .membership__right1 { margin-top: 1.875vw; position: relative; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__right1 { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .membership__right1::before { display: block; content: ""; padding-top: 73%; } } @media screen and (max-width: 800px) { .membership__right1 > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .membership__left2 { width: 50vw; position: relative; margin-right: 5vw; } @media screen and (max-width: 800px) { .membership__left2 { width: 80vw; } } .membership__left2::before { display: block; content: ""; padding-top: 67.8125%; } .membership__left2 > * { 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) { .membership__left2 { margin-right: 0vw; } } @media screen and (max-width: 800px) { .membership__left2 { margin-top: 1.875vw; position: relative; } } @media screen and (max-width: 800px) and (max-width: 800px) { .membership__left2 { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .membership__left2::before { display: block; content: ""; padding-top: 73%; } } @media screen and (max-width: 800px) { .membership__left2 > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .membership__sectionBox { display: flex; justify-content: flex-end; } .companyGroup { position: relative; } .companyGroup__backImg1 { position: absolute; top: 379px; right: 0; width: 28.046875vw; } @media screen and (max-width: 800px) { .companyGroup__backImg1 { width: 40vw; } } @media screen and (max-width: 800px) { .companyGroup__backImg1 { top: 483px; } } .companyGroup__backImg2 { position: absolute; display: none; top: 355px; left: 0; width: 24.921875vw; height: 28.28125vw; } @media screen and (max-width: 800px) { .companyGroup__backImg2 { width: 85.0666666667vw; } } @media screen and (max-width: 800px) { .companyGroup__backImg2 { height: 96.5333333333vw; } } @media screen and (max-width: 800px) { .companyGroup__backImg2 { display: none; } } .companyGroup__inner { width: 80%; margin: auto; } .companyGroup__logoGroup { display: flex; flex-direction: column; padding-bottom: 12.5vw; } @media screen and (max-width: 800px) { .companyGroup__logoGroup { padding-bottom: 14.1333333333vw; } } .companyGroup__first { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: 60px; margin-top: 3.75vw; } @media screen and (max-width: 800px) { .companyGroup__first { margin-top: 12.8vw; } } @media screen and (max-width: 800px) { .companyGroup__first { grid-template-columns: repeat(2, 1fr); } } .companyGroup__second { display: flex; justify-content: space-between; align-items: center; margin-top: 5.625vw; } @media screen and (max-width: 800px) { .companyGroup__second { margin-top: 19.2vw; } } @media screen and (max-width: 800px) { .companyGroup__second { padding-bottom: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .companyGroup__second { padding-bottom: 6.4vw; } } .companyGroup__imgWrapper { width: 100%; height: 9.375vw; position: relative; overflow: hidden; } @media screen and (max-width: 800px) { .companyGroup__imgWrapper { height: 13.3333333333vw; } } .companyGroup__logo { display: block; width: 100%; /* 幅をautoにして高さに基づいて調整されるようにする */ height: 100%; /* imgWrapperの高さに合わせる */ position: absolute; top: 50%; /* 画像を中央に配置 */ left: 50%; /* 画像を中央に配置 */ transform: translate(-50%, -50%); -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 800px) { .companyGroup__logo { height: 100%; } } .newsItem { display: flex; justify-content: center; align-items: center; } .newsItem__article { display: flex; justify-content: center; align-items: center; width: 100%; } .newsItem__link { display: flex; flex-direction: column; width: 100%; padding-bottom: 1.875vw; padding-right: 9.375vw; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.5s ease; } @media screen and (max-width: 800px) { .newsItem__link { padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .newsItem__link { padding-right: 6.4vw; } } .newsItem__link:hover { opacity: 0.5; } .newsItem__info { display: flex; align-items: center; } .newsItem__info > * + * { margin-left: 1.25vw; } @media screen and (max-width: 800px) { .newsItem__info > * + * { margin-left: 4.2666666667vw; } } .newsItem__date { font-size: 1.25vw; line-height: 1.5; color: rgba(0, 0, 0, 0.4); } @media screen and (max-width: 800px) { .newsItem__date { font-size: 4.2666666667vw; } } .newsItem__term { padding-left: 0.625vw; padding-right: 0.625vw; padding-top: 0.3125vw; padding-bottom: 0.3125vw; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.9375vw; } @media screen and (max-width: 800px) { .newsItem__term { padding-left: 2.1333333333vw; padding-right: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsItem__term { padding-top: 1.0666666667vw; padding-bottom: 1.0666666667vw; } } @media screen and (max-width: 800px) { .newsItem__term { font-size: 3.2vw; } } .newsItem__title { padding-top: 0.625vw; font-size: 1.25vw; line-height: 1.5; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } @media screen and (max-width: 800px) { .newsItem__title { padding-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsItem__title { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .newsItem__title { -webkit-line-clamp: 3; } } .newsCard { display: flex; justify-content: center; align-items: center; width: 23.4375vw; } @media screen and (max-width: 800px) { .newsCard { width: 80vw; } } .newsCard__article { display: flex; justify-content: center; align-items: center; width: 100%; } .newsCard__link { display: flex; flex-direction: column; width: 100%; padding-bottom: 1.875vw; color: black; transition: all 0.5s ease; } @media screen and (max-width: 800px) { .newsCard__link { padding-bottom: 6.4vw; } } .newsCard__link img { transition: all ease 0.5s; } .newsCard__link:hover img { transform: scale(1.05); } .newsCard__link:hover .newsCard__title, .newsCard__link:hover .newsCard__info { opacity: 0.5; } .newsCard__title { padding-top: 1.875vw; font-size: 1.25vw; font-weight: 300; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; letter-spacing: 0.1em; line-height: 1.5; transition: all ease 0.5s; } @media screen and (max-width: 800px) { .newsCard__title { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .newsCard__title { font-size: 4.2666666667vw; } } .newsCard__imgWrapper { position: relative; width: 100%; overflow: hidden; border-radius: 10px; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; width: 23.4375vw; position: relative; } @media screen and (max-width: 800px) { .newsCard__imgWrapper { width: 80vw; } } .newsCard__imgWrapper::before { display: block; content: ""; padding-top: 56.3333333333%; } .newsCard__imgWrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .newsCard__imgWrapper:before { content: ""; display: block; padding-top: 56.25%; } .newsCard__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all ease 0.5s; border-radius: 10px; } .newsCard__info { display: flex; align-items: center; padding-top: 1.25vw; transition: all ease 0.5s; } @media screen and (max-width: 800px) { .newsCard__info { padding-top: 4.2666666667vw; } } .newsCard__info > * + * { margin-left: 1.25vw; } @media screen and (max-width: 800px) { .newsCard__info > * + * { margin-left: 4.2666666667vw; } } .newsCard__date { font-size: 1.25vw; opacity: 40%; } @media screen and (max-width: 800px) { .newsCard__date { font-size: 4.2666666667vw; } } .newsCard__term { display: flex; justify-content: center; align-items: center; width: 7.5vw; padding-top: 0.625vw; padding-bottom: 0.625vw; background-color: #d72d56; color: white; border-radius: 999px; font-size: 0.9375vw; } @media screen and (max-width: 800px) { .newsCard__term { width: 25.6vw; } } @media screen and (max-width: 800px) { .newsCard__term { padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .newsCard__term { font-size: 3.2vw; } } .privacyPolicy { display: flex; flex-direction: column; align-items: center; margin-top: 4.375vw; } @media screen and (max-width: 800px) { .privacyPolicy { margin-top: 14.9333333333vw; } } .privacyPolicy__inner { display: flex; flex-direction: column; width: 80%; padding-top: 6.25vw; padding-bottom: 12.5vw; } @media screen and (max-width: 800px) { .privacyPolicy__inner { padding-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .privacyPolicy__inner { padding-bottom: 42.6666666667vw; } } @media screen and (max-width: 800px) { .privacyPolicy__inner { width: 80%; } } .privacyPolicy__titleContainer { display: flex; justify-content: center; align-items: center; flex-direction: column; } .privacyPolicy__title { display: flex; justify-content: center; align-items: center; color: black; font-weight: 700; line-height: 1.5; } .privacyPolicy__title--sub { font-size: 1.25vw; } @media screen and (max-width: 800px) { .privacyPolicy__title--sub { font-size: 4.2666666667vw; } } .privacyPolicy__title--main { font-size: 3.125vw; } @media screen and (max-width: 800px) { .privacyPolicy__title--main { font-size: 8.5333333333vw; } } .privacyPolicy__content { padding-top: 3.125vw; } @media screen and (max-width: 800px) { .privacyPolicy__content { padding-top: 6.4vw; } } .privacyPolicy__content > p { font-size: 1.25vw; color: black; } @media screen and (max-width: 800px) { .privacyPolicy__content > p { font-size: 4.2666666667vw; } } .privacyPolicy__content > p > strong { font-size: 1.875vw; color: black; } @media screen and (max-width: 800px) { .privacyPolicy__content > p > strong { font-size: 6.4vw; } } .languagesSwitcher { position: relative; display: inline-block; } .languagesSwitcher--sp { display: none; } @media screen and (max-width: 800px) { .languagesSwitcher--sp { display: block !important; } } .languagesSwitcher__menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; } .languagesSwitcher__current { display: flex; align-items: center; gap: 0.625vw; cursor: pointer; } .languagesSwitcher__currentLabel { font-size: 1.09375vw; color: #001455; } @media screen and (max-width: 800px) { .languagesSwitcher__currentLabel { font-size: 3.7333333333vw; } } .languagesSwitcher__item { font-size: 1.09375vw; color: #001455; } @media screen and (max-width: 800px) { .languagesSwitcher__item { font-size: 3.7333333333vw; } } .languagesSwitcher__arrow.rotated { transform: rotate(180deg); } .languagesSwitcher__arrow * { stroke: #001455; } .fvSlider { display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; width: 100%; height: auto; margin: 0 auto; padding-top: 3.125vw; padding-bottom: 3.125vw; } @media screen and (max-width: 800px) { .fvSlider { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } } .fvSlider--courses { padding-top: 9.375vw; padding-bottom: 0vw; } @media screen and (max-width: 800px) { .fvSlider--courses { padding-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .fvSlider--courses { padding-bottom: 0vw; } } .fvSlider .swiper-container { width: 100%; /* Full width of the viewport */ height: auto; /* Full height of the viewport */ } .fvSlider .swiper-wrapper { display: flex; } .fvSlider .swiper-slide { display: flex; justify-content: center; align-items: center; width: 80%; /* Each slide takes 80% of the container width */ box-sizing: border-box; } .fvSlider__imgWrapper { width: 100%; height: 21.09375vw; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 800px) { .fvSlider__imgWrapper { height: 40vw; } } .fvSlider__fvBanner { max-width: 100%; height: 100%; /* Adjust to maintain aspect ratio */ -o-object-fit: contain; object-fit: contain; } .fvSlider .swiper-button-next, .fvSlider .swiper-button-prev { position: absolute; top: 55%; transform: translateY(-50%); color: #d72d56; border-radius: 34px; border: 1px solid var(--border-color, #d72d56); background: #fff; width: 12px; height: 12px; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; padding: 10px; cursor: pointer; z-index: 4; } .fvSlider .swiper-button-prev { left: 7%; } .fvSlider .swiper-button-next { right: 7%; } .fvSlider .swiper-button-next::after, .fvSlider .swiper-button-prev::after { content: ""; display: block; width: 6px; height: 6px; border-top: 3px solid #d72d56; border-right: 3px solid #d72d56; } .fvSlider .swiper-button-prev::after { transform: rotate(-135deg); margin-left: 2px; } .fvSlider .swiper-button-next::after { transform: rotate(45deg); margin-right: 2px; } .fvSlider .swiper-pagination { text-align: center; margin-top: 10px; position: absolute; bottom: 0; width: 100%; z-index: 3; } .fvSlider .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #fff; border: 1px solid var(--border-color, #d72d56); border-radius: 50%; cursor: pointer; transition: background-color 0.6s ease; } .fvSlider .swiper-pagination-bullet-active { background-color: #d72d56; } @media (max-width: 480px) { .swiper-button-next, .swiper-button-prev { display: none; } } @media (max-width: 640px) { .swiper-button-next, .swiper-button-prev { display: none; } } @media (max-width: 800px) { .swiper-button-next, .swiper-button-prev { width: 8px !important; height: 8px !important; } .swiper-button-prev { left: 4% !important; } .swiper-button-next { right: 4% !important; } .swiper-button-next::after, .swiper-button-prev::after { content: ""; display: block; width: 8px !important; height: 4px !important; border-top: 2px solid #d72d56 !important; border-right: 2px solid #d72d56 !important; } } .fvVoice { overflow: hidden; } .fvVoice__inner { width: 80%; margin: auto; } .fvVoice__back { position: absolute; top: 0%; left: -0.5%; width: 27.34375vw; height: 7.890625vw; } @media screen and (max-width: 800px) { .fvVoice__back { width: 48vw; } } @media screen and (max-width: 800px) { .fvVoice__back { height: 13.8666666667vw; } } @media screen and (max-width: 800px) { .fvVoice__back { top: 12%; left: 18%; } } .fvVoice__arrowWrapper { position: absolute; top: -8%; right: 10%; gap: 2.5vw; margin: auto; display: flex; z-index: 10; } .fvVoice__arrow { background-color: #d72d56; padding-left: 0.859375vw; padding-right: 0.859375vw; padding-top: 1.09375vw; padding-bottom: 1.09375vw; width: 1.328125vw; height: 0.859375vw; border-radius: 999px; transition: all 0.25s ease-in; cursor: pointer; } @media screen and (max-width: 800px) { .fvVoice__arrow { padding-left: 2.9333333333vw; padding-right: 2.9333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__arrow { padding-top: 3.7333333333vw; padding-bottom: 3.7333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__arrow { width: 4.5333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__arrow { height: 2.9333333333vw; } } .fvVoice__arrow:hover { background-color: #b02144; } .fvVoice .fvVoice__arrowLeft-voice { left: 10px; } .fvVoice .fvVoice__arrowRight-voice { right: 10px; } .fvVoice__slider { position: relative; } .fvVoice__sliderInner { width: 90%; display: flex; overflow: hidden; position: relative; margin-left: 10%; } @media screen and (max-width: 800px) { .fvVoice__sliderInner { width: 100%; margin-left: 0; padding-bottom: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .fvVoice__sliderInner { padding-bottom: 2.1333333333vw; } } .fvVoice__list { display: flex; justify-content: flex-start; transition: transform 0.5s ease-in-out; width: 100%; margin-top: 4.375vw; margin-bottom: 1.25vw; } @media screen and (max-width: 800px) { .fvVoice__list { margin-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__list { margin-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .fvVoice__voice-card { padding-bottom: 0.625vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .fvVoice__voice-card { padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__voice-card--sp { margin-left: 1%; } } .fvVoice__voice-link { width: 100%; } @media screen and (max-width: 800px) { .fvVoice__voice-link { width: 23.4375vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .fvVoice__voice-link { width: 80vw; } } .fvVoice__card { margin-top: 6.25vw; border-radius: 10px; background: var(--gradient, linear-gradient(250deg, #d72d56 1.99%, rgba(215, 45, 86, 0.6) 100%)); border: 2px solid #d72d56; display: flex; width: 100%; box-shadow: -2px -2px 8px 0px #fff, 2px 2px 8px 0px #d4c3d4; } @media screen and (max-width: 800px) { .fvVoice__card { margin-top: 21.3333333333vw; } } .fvVoice__card:hover .fvVoice__img { transform: scale(1.1); /* ホバー時に画像を拡大 */ } @media screen and (max-width: 800px) { .fvVoice__card { flex-direction: column; } } .fvVoice__imgWrapper { width: 50%; border-radius: 10px; overflow: hidden; } @media screen and (max-width: 800px) { .fvVoice__imgWrapper { width: 100%; } } .fvVoice__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 10px 0px 0px 10px; transition: all 0.25s ease-in; border-radius: 10px; } @media screen and (max-width: 800px) { .fvVoice__img { border-radius: 9px 9px 0px 0px; } } .fvVoice__right { color: #fff; width: 50%; } @media screen and (max-width: 800px) { .fvVoice__right { width: 100%; } } .fvVoice__rightInner { padding-top: 2.265625vw; width: 76%; margin: auto; } @media screen and (max-width: 800px) { .fvVoice__rightInner { padding-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__rightInner { width: 90%; } } .fvVoice__title { font-size: 1.875vw; font-weight: 500; line-height: 2; } @media screen and (max-width: 800px) { .fvVoice__title { font-size: 6.4vw; } } .fvVoice__text { padding-top: 1.875vw; font-size: 1.25vw; line-height: 2; font-weight: 300; } @media screen and (max-width: 800px) { .fvVoice__text { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .fvVoice__text { font-size: 4.2666666667vw; } } .fvVoice__button { display: flex; justify-content: flex-end; } .fvVoice__buttonMargin { margin-top: 0vw; } @media screen and (max-width: 800px) { .fvVoice__buttonMargin { margin-top: 0vw; } } .fvVoice__buttonText { color: #fff; padding-top: 1.25vw; padding-bottom: 2.65625vw; font-size: 1.25vw; } @media screen and (max-width: 800px) { .fvVoice__buttonText { padding-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__buttonText { padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .fvVoice__buttonText { font-size: 4.2666666667vw; } } .fvVoice__bannerButton { display: flex; align-items: center; } .fvVoice__bannerArrow { width: 1.640625vw; height: 1.640625vw; margin-left: 0.625vw; padding-top: 1.25vw; padding-bottom: 2.65625vw; } @media screen and (max-width: 800px) { .fvVoice__bannerArrow { width: 5.6vw; } } @media screen and (max-width: 800px) { .fvVoice__bannerArrow { height: 5.6vw; } } @media screen and (max-width: 800px) { .fvVoice__bannerArrow { margin-left: 2.1333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__bannerArrow { padding-top: 8.5333333333vw; } } @media screen and (max-width: 800px) { .fvVoice__bannerArrow { padding-bottom: 4.2666666667vw; } } .fvVoice__pagination { text-align: center; margin-top: 10px; position: absolute; bottom: 0; width: 100%; z-index: 4; } .fvVoice .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #fff; border: 1px solid var(--border-color, #d72d56); border-radius: 50%; cursor: pointer; transition: background-color 0.6s ease; } .fvVoice .swiper-pagination-bullet-active { background-color: #d72d56; } @media (max-width: 480px) { .fvVoice .fvVoice__arrow { display: none; } } @media (max-width: 640px) { .fvVoice .fvVoice__arrow { display: none; } } @media (max-width: 800px) { .fvVoice .fvVoice__arrowLeft-voice { left: 5%; } .fvVoice .fvVoice__arrowRight-voice { right: 5%; } .fvVoice .fvVoice__arrow { display: none; } } .swiper-slide { margin-right: 0; } .shop { display: flex; justify-content: center; align-items: center; background-color: #fff; } .shop__inner { position: relative; display: flex; flex-direction: column; width: 79%; padding-top: 4.53125vw; } @media screen and (max-width: 800px) { .shop__inner { padding-top: 14.4vw; } } @media screen and (max-width: 800px) { .shop__inner { width: 80%; } } .shop__back { position: absolute; top: 4.5%; left: 34.5%; width: 25.15625vw; height: 7.96875vw; } @media screen and (max-width: 800px) { .shop__back { width: 44.2666666667vw; } } @media screen and (max-width: 800px) { .shop__back { height: 14.1333333333vw; } } @media screen and (max-width: 800px) { .shop__back { top: 2%; left: 20.5%; } } .shop__store { margin-top: 6.25vw; display: flex; justify-content: space-between; } @media screen and (max-width: 800px) { .shop__store { margin-top: 21.3333333333vw; } } @media screen and (max-width: 800px) { .shop__store { flex-direction: column; } } .shop__imgWrapper { width: 36.484375vw; height: 36.484375vw; transition: transform 0.6s ease; border-radius: 20px; overflow: hidden; } @media screen and (max-width: 800px) { .shop__imgWrapper { width: 80vw; } } @media screen and (max-width: 800px) { .shop__imgWrapper { height: 80vw; } } .shop__storeImg { width: 100%; height: 100%; border-radius: 20px; -o-object-fit: cover; object-fit: cover; transition: transform 0.6s ease; } .shop__storeImg:hover { transform: scale(1.2); } .shop__storeInfo { width: 35.78125vw; } @media screen and (max-width: 800px) { .shop__storeInfo { width: 122.1333333333vw; } } @media screen and (max-width: 800px) { .shop__storeInfo { width: 100%; } } .shop__title { font-size: 2.5vw; padding-top: 0.78125vw; font-weight: 500; } @media screen and (max-width: 800px) { .shop__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .shop__title { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .shop__title { text-align: center; } } .shop__storeTitle { font-size: 2.5vw; padding-bottom: 1.875vw; font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .shop__storeTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .shop__storeTitle { padding-bottom: 6.4vw; } } @media screen and (max-width: 800px) { .shop__storeTitle { text-align: center; } } .shop__snsWrapper { padding-top: 1.25vw; padding-bottom: 1.25vw; display: flex; align-items: center; } @media screen and (max-width: 800px) { .shop__snsWrapper { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .shop__snsWrapper { padding-bottom: 4.2666666667vw; } } .shop__icon { margin-right: 1.875vw; transition: all 0.25s ease-in; } @media screen and (max-width: 800px) { .shop__icon { margin-right: 6.4vw; } } .shop__icon:hover { opacity: 40%; } .shop__text { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .shop__text { font-size: 3.7333333333vw; } } .shop__text p { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .shop__text p { font-size: 3.7333333333vw; } } .shop__googleMap { padding-top: 0.625vw; display: flex; align-items: center; transition: all 0.25s ease-in; padding-bottom: 1.875vw; color: #000; } @media screen and (max-width: 800px) { .shop__googleMap { padding-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .shop__googleMap { padding-bottom: 6.4vw; } } .shop__googleMap:hover { opacity: 40%; } .shop__arrow { margin-left: 0.546875vw; width: 0.625vw; height: 0.625vw; } @media screen and (max-width: 800px) { .shop__arrow { margin-left: 1.8666666667vw; } } @media screen and (max-width: 800px) { .shop__arrow { width: 2.1333333333vw; } } @media screen and (max-width: 800px) { .shop__arrow { height: 2.1333333333vw; } } .shop__underline { color: black; -webkit-text-decoration: underline #000; text-decoration: underline #000; } .shop__textBox { padding-top: 1.875vw; display: flex; } @media screen and (max-width: 800px) { .shop__textBox { padding-top: 6.4vw; } } .shop__textLeft { padding-right: 0.625vw; display: flex; flex-direction: column; white-space: nowrap; } @media screen and (max-width: 800px) { .shop__textLeft { padding-right: 4.2666666667vw; } } .shop__textRight { display: flex; flex-direction: column; } .shop__textRight p { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .shop__textRight p { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .shop__textLH { line-height: 2; } } .shop__buttonWrapper { display: flex; justify-content: flex-end !important; } @media screen and (max-width: 800px) { .shop__buttonWrapper { justify-content: center !important; } } .shop__informationTable { flex-direction: column; padding-top: 3.125vw; } @media screen and (max-width: 800px) { .shop__informationTable { padding-top: 10.6666666667vw; } } .shop__informationTableRow { display: flex; align-items: center; } @media screen and (max-width: 800px) { .shop__informationTableRow { flex-direction: column; align-items: start; } } .shop__informationTableHead { min-width: 5vw; font-size: 1.25vw; line-height: 1.5; text-align: left; font-weight: 400; } @media screen and (max-width: 800px) { .shop__informationTableHead { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .shop__informationTableHead { min-width: 21.3333333333vw; } } .shop__informationTableData { line-height: 1.5; font-size: 1.25vw; margin-left: 1.875vw; } @media screen and (max-width: 800px) { .shop__informationTableData { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .shop__informationTableData { margin-left: 0vw; } } .shop__informationTableData p { line-height: 1.5; font-size: 1.25vw; } @media screen and (max-width: 800px) { .shop__informationTableData p { font-size: 3.7333333333vw; } } .shop__tel { font-size: 1.875vw; color: #000; -webkit-text-decoration: 1px underline #000; text-decoration: 1px underline #000; } @media screen and (max-width: 800px) { .shop__tel { font-size: 5.3333333333vw; } } .shop__tel:hover { opacity: 40%; } .shopSingleTop { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 5vw; height: 39.140625vw; overflow: hidden; background-size: cover; } @media screen and (max-width: 800px) { .shopSingleTop { margin-top: 17.0666666667vw; } } @media screen and (max-width: 800px) { .shopSingleTop { height: 152vw; } } .shopSingleTop__padding { margin-top: 44.140625vw; } @media screen and (max-width: 800px) { .shopSingleTop__padding { margin-top: 150.6666666667vw; } } .shopSingleTop__textWrapper { position: absolute; top: 40%; } .shopSingleTop__title { font-size: 2.5vw; color: #fff; text-align: center; font-weight: 500; } @media screen and (max-width: 800px) { .shopSingleTop__title { font-size: 8.5333333333vw; } } .shopSingleTop__storeTitle { font-size: 2.5vw; color: #fff; text-align: center; } @media screen and (max-width: 800px) { .shopSingleTop__storeTitle { font-size: 8.5333333333vw; } } .access { display: flex; justify-content: center; align-items: center; flex-direction: column; } .access__inner { position: relative; display: flex; flex-direction: column; width: 79%; } @media screen and (max-width: 800px) { .access__inner { width: 80%; } } .access__back { position: absolute; top: 46%; left: 28.5%; width: 31.953125vw; height: 7.96875vw; } @media screen and (max-width: 800px) { .access__back { width: 44.2666666667vw; } } @media screen and (max-width: 800px) { .access__back { height: 14.1333333333vw; } } @media screen and (max-width: 800px) { .access__back { top: 22%; left: 20.5%; } } .access__mapInner { z-index: 2; } .access__title { font-size: 2.5vw; text-align: center; } @media screen and (max-width: 800px) { .access__title { font-size: 8.5333333333vw; } } .access__map { width: 78.4375vw; height: 46.25vw; margin-top: 2.5vw; } @media screen and (max-width: 800px) { .access__map { width: 80vw; } } @media screen and (max-width: 800px) { .access__map { height: 120vw; } } @media screen and (max-width: 800px) { .access__map { margin-top: 8.5333333333vw; } } .access__storeInfo { margin-top: 3.125vw; width: 66%; display: flex; flex-direction: column; } @media screen and (max-width: 800px) { .access__storeInfo { margin-top: 10.6666666667vw; } } .access__storeTitle { font-size: 2.5vw; font-weight: 500; text-align: center; } @media screen and (max-width: 800px) { .access__storeTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .access__storeTitle { white-space: nowrap; } } .access__storeTitleSP { display: none; } @media screen and (max-width: 800px) { .access__storeTitleSP { display: block; font-size: 1.875vw; font-weight: 500; text-align: center; } } @media screen and (max-width: 800px) and (max-width: 800px) { .access__storeTitleSP { font-size: 6.4vw; } } .access__snsWrapper { display: flex; justify-content: center; align-items: center; padding-bottom: 1.875vw; font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .access__snsWrapper { padding-bottom: 6.4vw; } } .access__informationTable { flex-direction: column; padding-top: 3.125vw; margin-left: 14.0625vw; } @media screen and (max-width: 800px) { .access__informationTable { padding-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .access__informationTable { margin-left: 0vw; } } .access__informationTableRow { padding-top: 1.25vw; display: flex; align-items: center; } @media screen and (max-width: 800px) { .access__informationTableRow { padding-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .access__informationTableRow { flex-direction: column; align-items: start; } } .access__informationTableHead { min-width: 5vw; font-size: 1.25vw; line-height: 1.5; text-align: left; font-weight: 400; } @media screen and (max-width: 800px) { .access__informationTableHead { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .access__informationTableHead { min-width: 21.3333333333vw; } } .access__informationTableData { line-height: 1.5; font-size: 1.25vw; margin-left: 1.875vw; } @media screen and (max-width: 800px) { .access__informationTableData { font-size: 3.7333333333vw; } } @media screen and (max-width: 800px) { .access__informationTableData { margin-left: 0vw; } } .access__informationTableData p { line-height: 1.5; font-size: 1.25vw; } @media screen and (max-width: 800px) { .access__informationTableData p { font-size: 3.7333333333vw; } } .access__tel { font-size: 1.875vw; color: #000; -webkit-text-decoration: 1px underline #000; text-decoration: 1px underline #000; } @media screen and (max-width: 800px) { .access__tel { font-size: 5.3333333333vw; } } .access__tel:hover { opacity: 40%; } .photo { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .photo__inner { display: flex; flex-direction: column; width: 79%; } @media screen and (max-width: 800px) { .photo__inner { width: 80%; } } .photo__back { position: absolute; top: 6%; left: 35.5%; width: 28.125vw; height: 8.203125vw; } @media screen and (max-width: 800px) { .photo__back { width: 44.2666666667vw; } } @media screen and (max-width: 800px) { .photo__back { height: 14.1333333333vw; } } @media screen and (max-width: 800px) { .photo__back { top: 2.5%; left: 27.5%; } } .photo__store { display: flex; justify-content: center; align-items: center; padding-top: 4.0625vw; } @media screen and (max-width: 800px) { .photo__store { padding-top: 6.4vw; } } @media screen and (max-width: 800px) { .photo__store { flex-direction: column; } } .photo__imgWrapper { width: 6.25vw; height: 6.25vw; } @media screen and (max-width: 800px) { .photo__imgWrapper { width: 21.3333333333vw; } } @media screen and (max-width: 800px) { .photo__imgWrapper { height: 21.3333333333vw; } } .photo__img { border-radius: 1000px; width: 100%; -o-object-fit: cover; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.1); } .photo__textWrapper { margin-left: 3.125vw; display: flex; flex-direction: column; } @media screen and (max-width: 800px) { .photo__textWrapper { margin-left: 0vw; } } .photo__accountName { font-size: 1.875vw; line-height: 1.5; } @media screen and (max-width: 800px) { .photo__accountName { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .photo__accountName { text-align: center; } } .photo__storeName { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .photo__storeName { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .photo__storeName { text-align: center; } } .photo__gallery { margin-top: 3.75vw; } @media screen and (max-width: 800px) { .photo__gallery { margin-top: 12.8vw; } } .photo__courseInner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } .photo__title { display: flex; justify-content: center; width: 100%; font-weight: 500; font-size: 2.5vw; padding-bottom: 3.125vw; border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 下にボーダーを追加 */ } @media screen and (max-width: 800px) { .photo__title { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .photo__title { padding-bottom: 10.6666666667vw; } } .photo__box { padding-top: 1.875vw; display: flex; flex-wrap: wrap; } @media screen and (max-width: 800px) { .photo__box { padding-top: 4.2666666667vw; } } .photo__course { flex: 1 1 calc(50% - 16px); /* 2列レイアウトを作成し、間隔を考慮します */ box-sizing: border-box; margin-bottom: 1.875vw; border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 下にボーダーを追加 */ padding-bottom: 1.875vw; } @media screen and (max-width: 800px) { .photo__course { margin-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .photo__course { padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .photo__course { flex: 1 1 100%; /* モバイルデバイスでは1列に表示します */ } } .photo__course :nth-last-child(1):nth-child(odd), .photo__course :nth-last-child(2):nth-child(even) { border-bottom: none; padding-left: 2.5vw; padding-right: 2.5vw; } @media screen and (max-width: 800px) { .photo__course :nth-last-child(1):nth-child(odd), .photo__course :nth-last-child(2):nth-child(even) { padding-left: 8.5333333333vw; padding-right: 8.5333333333vw; } } .photo__courseName { font-size: 1.25vw; line-height: 1.5; } @media screen and (max-width: 800px) { .photo__courseName { font-size: 3.7333333333vw; } } .photo__bannerWrapper { width: 100%; margin-top: 4.375vw; height: 21.09375vw; } @media screen and (max-width: 800px) { .photo__bannerWrapper { margin-top: 14.9333333333vw; } } @media screen and (max-width: 800px) { .photo__bannerWrapper { height: 26.6666666667vw; } } .photo__banner { width: 100%; -o-object-fit: cover; object-fit: cover; } .sbi_header_text { display: none !important; } .sbi_no_bio { display: none !important; } #sbi_load { display: none !important; } .popularCourses { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; padding-top: 10.9375vw; width: 100%; overflow: hidden; } @media screen and (max-width: 800px) { .popularCourses { padding-top: 29.8666666667vw; } } .popularCourses--recruit { padding-top: 8.75vw; } @media screen and (max-width: 800px) { .popularCourses--recruit { padding-top: 21.3333333333vw; } } .popularCourses__inner { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; } .popularCourses__back { position: absolute; top: 0%; width: 77.578125vw; height: 10.703125vw; } @media screen and (max-width: 800px) { .popularCourses__back { width: 80vw; } } @media screen and (max-width: 800px) { .popularCourses__back { height: 17.0666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__back { top: 1%; display: none; } } .popularCourses__backSP { display: none; } @media screen and (max-width: 800px) { .popularCourses__backSP { position: absolute; width: 23.4375vw; height: 5vw; display: block; top: 1%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__backSP { width: 80vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__backSP { height: 17.0666666667vw; } } .popularCourses__title { font-size: 3.75vw; font-family: "Marcellus-Regular"; font-weight: 400; } @media screen and (max-width: 800px) { .popularCourses__title { font-size: 8.5333333333vw; } } .popularCourses__title--recruit { font-size: 3.125vw; font-family: "Noto Serif JP", serif; font-weight: 400; } @media screen and (max-width: 800px) { .popularCourses__title--recruit { font-size: 8.5333333333vw; } } @media screen and (max-width: 800px) { .popularCourses__title--recruit { width: 80%; text-align: center; } } .popularCourses__border { margin-top: 0.625vw; } @media screen and (max-width: 800px) { .popularCourses__border { margin-top: 2.1333333333vw; } } .popularCourses__subtitle { font-size: 1.25vw; margin-top: 1.25vw; } @media screen and (max-width: 800px) { .popularCourses__subtitle { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__subtitle { margin-top: 2.1333333333vw; } } .popularCourses__contentInner { display: flex; align-items: flex-end; flex-direction: column; width: 100%; } .popularCourses__contentInner--recruit { align-items: center; } .popularCourses__innerLeft { display: flex; align-items: flex-start; width: 100%; } .popularCourses__contentBox { display: flex; justify-content: flex-start; flex-direction: column; } @media screen and (max-width: 800px) { .popularCourses__contentBox { margin-top: 0.625vw; width: 80%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__contentBox { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__contentBox { width: 90%; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__contentBox--ml { margin-left: 10%; } } @media screen and (max-width: 800px) { .popularCourses__contentBox--thaad { width: 100%; } } .popularCourses__content { display: flex; align-items: flex-start; justify-content: space-between; width: 90%; margin-top: 3.125vw; } @media screen and (max-width: 800px) { .popularCourses__content { margin-top: 10.6666666667vw; } } .popularCourses__content--recruit { width: 80%; align-items: center; margin-top: 6.25vw; } @media screen and (max-width: 800px) { .popularCourses__content--recruit { margin-top: 10.6666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__content { flex-direction: column-reverse; } .popularCourses__content--reverse { flex-direction: column; align-items: center; } } .popularCourses__numberFlex { display: flex; align-items: center; gap: 0.625vw; } .popularCourses__number { font-size: 1.875vw; color: #d72d56; } @media screen and (max-width: 800px) { .popularCourses__number { font-size: 6.4vw; } } .popularCourses__contentTitle { font-size: 2.5vw; margin-top: 0.625vw; } @media screen and (max-width: 800px) { .popularCourses__contentTitle { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .popularCourses__contentTitle { margin-top: 2.1333333333vw; } } .popularCourses__contentTitle--recruit { font-size: 1.875vw; padding-bottom: 1.25vw; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 800px) { .popularCourses__contentTitle--recruit { font-size: 6.4vw; } } @media screen and (max-width: 800px) { .popularCourses__contentTitle--recruit { padding-bottom: 4.2666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__contentTitle { display: none; } } .popularCourses__contentTitleSp { display: none; } @media screen and (max-width: 800px) { .popularCourses__contentTitleSp { display: block; font-size: 2.5vw; margin-top: 0.625vw; line-height: 1.5; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__contentTitleSp { font-size: 6.4vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__contentTitleSp { margin-top: 2.1333333333vw; } } @media screen and (max-width: 800px) { .popularCourses__contentTitleSp--recruit { margin-top: 1.875vw; } } @media screen and (max-width: 800px) and (max-width: 800px) { .popularCourses__contentTitleSp--recruit { margin-top: 6.4vw; } } .popularCourses__contentText { font-size: 1.25vw; margin-top: 1.875vw; width: 38.515625vw; line-height: 2; } @media screen and (max-width: 800px) { .popularCourses__contentText { font-size: 4.2666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__contentText { margin-top: 4.2666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__contentText { width: 80vw; } } .popularCourses__contentText--recruit { width: 41.171875vw; } @media screen and (max-width: 800px) { .popularCourses__contentText--recruit { width: 80vw; } } .popularCourses__img { width: 45.46875vw; height: 32.5vw; } @media screen and (max-width: 800px) { .popularCourses__img { width: 89.8666666667vw; } } @media screen and (max-width: 800px) { .popularCourses__img { height: 64vw; } } .popularCourses__img--recruit { width: 28.75vw; height: 19.21875vw; } @media screen and (max-width: 800px) { .popularCourses__img--recruit { width: 80vw; } } @media screen and (max-width: 800px) { .popularCourses__img--recruit { height: 53.3333333333vw; } } .flatpickr-calendar { position: relative; padding: 0.625vw; } @media screen and (max-width: 800px) { .flatpickr-calendar { padding: 2.1333333333vw; } } .flatpickr-calendar * { font-size: 1.09375vw; } @media screen and (max-width: 800px) { .flatpickr-calendar * { font-size: 3.7333333333vw; } } .flatpickr-calendar .flatpickr-current-month { display: flex; justify-content: center; align-items: center; } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { font-size: 0.9375vw; } @media screen and (max-width: 800px) { .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { font-size: 3.2vw; } } .flatpickr-calendar .flatpickr-day { display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .flatpickr-calendar .flatpickr-day.selected { color: white; font-weight: bold; border-color: white; background: linear-gradient(250deg, #d72d56 1.99%, rgba(215, 45, 86, 0.6) 100%); } .flatpickr-calendar.open, .flatpickr-calendar.inline { max-height: none !important; border-radius: 10px; overflow: hidden; width: auto !important; } .flatpickr-innerContainer { padding: 1.25vw; } @media screen and (max-width: 800px) { .flatpickr-innerContainer { padding: 4.2666666667vw; } } .flatpickr-months { height: 3.28125vw; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(215, 45, 86, 0.3); } @media screen and (max-width: 800px) { .flatpickr-months { height: 11.2vw; } } .flatpickr-months { background: linear-gradient(250deg, #d72d56 1.99%, rgba(215, 45, 86, 0.6) 100%); } .flatpickr-months * { color: white !important; } .flatpickr-months svg { fill: white !important; } .flatpickr-calendar.open { display: flex !important; flex-direction: column; } .flatpickr-months .flatpickr-current-month { height: 100%; padding-top: 0vw; padding-bottom: 0vw; font-size: 1.09375vw; } @media screen and (max-width: 800px) { .flatpickr-months .flatpickr-current-month { padding-top: 0vw; padding-bottom: 0vw; } } @media screen and (max-width: 800px) { .flatpickr-months .flatpickr-current-month { font-size: 3.7333333333vw; } } .flatpickr-months .flatpickr-month { display: flex; justify-content: center; align-items: center; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { position: relative !important; display: flex; justify-content: center; align-items: center; height: auto !important; padding: 0; } .contactItem { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; } .contactItem__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; } .contactItem__title { display: flex; justify-content: center; align-items: center; height: 5vw; font-size: 2.5vw; font-family: "Marcellus-Regular"; } @media screen and (max-width: 800px) { .contactItem__title { height: 12.8vw; } } @media screen and (max-width: 800px) { .contactItem__title { font-size: 6.4vw; } } .contactItem__img { display: block; width: 5vw; height: 5vw; } @media screen and (max-width: 800px) { .contactItem__img { width: 12.8vw; } } @media screen and (max-width: 800px) { .contactItem__img { height: 12.8vw; } } .contactItem__link { display: flex; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; color: black; height: 2.5vw; margin-top: 2.5vw; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 999px; padding-left: 1.25vw; padding-right: 1.25vw; transition: all ease-in 0.5s; } @media screen and (max-width: 800px) { .contactItem__link { height: 8.5333333333vw; } } @media screen and (max-width: 800px) { .contactItem__link { margin-top: 6.4vw; } } @media screen and (max-width: 800px) { .contactItem__link { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } .contactItem__link:hover { opacity: 0.5; } .contactItem__link span { font-size: 1.25vw; } @media screen and (max-width: 800px) { .contactItem__link span { font-size: 4.2666666667vw; } } .contactItem__link img { display: block; width: 1.25vw; height: 1.25vw; margin-left: 0.625vw; } @media screen and (max-width: 800px) { .contactItem__link img { width: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactItem__link img { height: 4.2666666667vw; } } @media screen and (max-width: 800px) { .contactItem__link img { margin-left: 2.1333333333vw; } } .lineBanner { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; background: rgba(0, 0, 0, 0.75); transition: all ease-in 0.25s; opacity: 0; pointer-events: none; } .lineBanner.active { opacity: 1; pointer-events: all; } .lineBanner__link { position: relative; display: block; width: 23.4375vw; height: 23.4375vw; } @media screen and (max-width: 800px) { .lineBanner__link { width: 80vw; } } @media screen and (max-width: 800px) { .lineBanner__link { height: 80vw; } } .lineBanner__img { display: block; width: 100%; height: 100%; } .lineBanner__button { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding-bottom: 0.9375vw; width: 21.015625vw; -o-object-fit: contain; object-fit: contain; z-index: 2; -webkit-animation: float 1.25s linear infinite; animation: float 1.25s linear infinite; } @media screen and (max-width: 800px) { .lineBanner__button { padding-bottom: 3.2vw; } } @media screen and (max-width: 800px) { .lineBanner__button { width: 71.7333333333vw; } } @-webkit-keyframes float { from { transform: translate(-50%, -2.5px); } to { transform: translate(-50%, 0px); } } @keyframes float { from { transform: translate(-50%, -2.5px); } to { transform: translate(-50%, 0px); } } .lineBanner__shadow { position: absolute; left: 50%; bottom: 0; transform: translateX(-49%); padding-bottom: 0.625vw; width: 21.015625vw; -o-object-fit: contain; object-fit: contain; z-index: 1; } @media screen and (max-width: 800px) { .lineBanner__shadow { padding-bottom: 2.1333333333vw; } } @media screen and (max-width: 800px) { .lineBanner__shadow { width: 71.7333333333vw; } } .lineBanner__close { position: absolute; top: 0; right: 0; cursor: pointer; z-index: 1; background: none; border: none; padding: 0.625vw; } @media screen and (max-width: 800px) { .lineBanner__close { padding: 2.1333333333vw; } } .lineBanner__close img { display: block; width: 1.25vw; height: 1.25vw; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 800px) { .lineBanner__close img { width: 4.2666666667vw; } } @media screen and (max-width: 800px) { .lineBanner__close img { height: 4.2666666667vw; } }