@layer global {
:root {
--bp-xxs: 375;
--bp-xs: 475;
--bp-sm: 640;
--bp-md: 768;
--bp-lg: 1024;
--bp-xl: 1280;
--bp-xxl: 1536;
--bp-xxxl: 1920;
--color-back: #fff;
--color-text: #231815;
--color-white: #fff;
--color-black: #000;
--color-blue: #3f8cf5;
--color-purple: #e84388;
--color-yellow: #fcee21;
--color-error: #99413d;
--fontFamily-default: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック",
"Yu Gothic", sans-serif;
--fontFamily-noto: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック",
"Yu Gothic", sans-serif;
--fontFamily-poppins: "Noto Sans JP", sans-serif;
--ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
--ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
--ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
--ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--height-design: 700;
/* --height-header: 98; */
--height-header: 262i;
--height-header-sp: 53;
--line-clamp: 3;
--scroll-paddingTop: 40;
--width-design: 1920;
--width-design-sp: 375;
--width-inner-lg: 1280;
--width-inner: 1180;
--width-subInner: 950;
--zIndex-header: 40;
--zIndex-spmenu: 41;
--zIndex-toggle: 42;
--zIndex-online: 30;
--zIndex-splash: 50;
--lineHeight-default: 1.5;
--letterSpacing-default: 0;
--leading-trim: calc((1em - 1lh) / 2);
--gutter: max(20px, calc(20 / 375 * 100%));
}
}
@layer reset {
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-width: 0;
}
/* Document */
/* ============================================ */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}
/* Sections */
/* ============================================ */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}
address {
font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/**
* Prevent vertical alignment issues.
*/
svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/**
* Reset form fields to make them styleable.
* 1. Make form elements stylable across systems iOS especially.
* 2. Inherit text-transform from parent.
*/
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none; /* 1 */
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; /* 2 */
}
/**
* Correct cursors for clickable elements.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
cursor: default;
}
/**
* Improve outlines for Firefox and unify style with input elements & buttons.
*/
:-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
}
/**
* Remove padding
*/
option {
padding: 0;
}
/**
* Reset to invisible
*/
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the outline style in Safari.
*/
[type="search"] {
outline-offset: -2px; /* 1 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Fix font inheritance.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Fix appearance for Firefox
*/
[type="number"] {
-moz-appearance: textfield;
}
/**
* Clickable labels
*/
label[for] {
cursor: pointer;
}
/* Interactive */
/* ============================================ */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/*
* Remove outline for editable content.
*/
[contenteditable]:focus {
outline: auto;
}
/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
border-color: inherit; /* 1 */
border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}
}
@layer base {
html {
scroll-behavior: auto;
scroll-padding-top: calc(var(--scroll-paddingTop) * 1px);
}
body {
background: var(--color-back);
color: var(--color-text);
font-family: var(--fontFamily-default);
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
/* word-break: break-all; */
line-height: var(--lineHeight-default);
overflow-x: clip;
letter-spacing: var(--letterSpacing-default);
}
li {
list-style: none;
}
button {
cursor: pointer;
}
summary {
display: block;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
a {
color: inherit;
text-decoration: none;
text-decoration-skip-ink: auto;
}
code {
white-space: pre-wrap;
}
pre {
font-family: var(--fontFamily-default);
white-space: pre-wrap;
}
figure {
max-width: 100%;
}
picture > img {
max-width: 100%;
}
picture > source {
max-width: 100%;
}
img {
height: auto;
image-rendering: optimize-contrast; /* ぼやけ防止 */
max-width: 100%;
vertical-align: middle;
display: block;
}
main {
display: block;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* フォーム部品リセット */
input {
min-width: 0;
}
input:focus {
outline: 2px solid var(--color-primary);
}
input:focus-visible {
outline: 2px solid var(--color-primary);
}
button {
font-size: 1rem;
}
optgroup {
font-size: 1rem;
}
textarea {
resize: none;
}
textarea:focus {
outline: 2px solid var(--color-primary);
}
textarea:focus-visible {
outline: 2px solid var(--color-primary);
}
select {
font-size: 1rem;
}
select:focus {
outline: 2px solid var(--color-primary);
}
select:focus-visible {
outline: 2px solid var(--color-primary);
}
/* プレースホルダー */
::placeholder {
color: #ccc;
}
/* エラー時 */
.is-error input {
border-color: var(--color-error);
}
.is-error textarea {
border-color: var(--color-error);
}
.is-error select {
border-color: var(--color-error);
}
label {
cursor: pointer; /* iOSでのlabelとinput,select,textareaの関連付け */
}
/* スピンボタン非表示 (Chrome / Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-outer-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-outer-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-outer-spin-button,
input[type="week"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button {
appearance: none;
display: none;
margin: 0;
}
/* スピンボタン非表示 (FireFox) */
input[type="number"],
input[type="month"],
input[type="datetime-local"],
input[type="week"],
input[type="time"],
input[type="date"] {
appearance: textfield;
}
/* クリアボタン非表示 */
input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button,
input[type="week"]::-webkit-clear-button {
appearance: none;
}
/* セレクトボックス */
.select-wrap {
position: relative;
}
.select-wrap > select {
width: 100%;
}
.select-wrap::after {
border-bottom: 2px solid;
border-right: 2px solid;
bottom: 0;
content: "";
display: block;
height: 10px;
margin: auto;
position: absolute;
right: 20px;
top: 0;
transform: rotate(45deg);
width: 10px;
}
select::-ms-expand {
display: none;
}
option:disabled {
color: #ccc;
opacity: 1;
}
/* ラジオボタン、チェックボックス */
input[type="radio"],
input[type="checkbox"] {
opacity: 0;
position: absolute;
}
input[type="radio"] + span,
input[type="checkbox"] + span {
cursor: pointer;
display: inline-block;
line-height: 1;
padding-left: 2.5em;
position: relative;
vertical-align: middle;
font-size: 16px;
font-weight: 500;
line-height: calc(26 / 16);
letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) {
input[type="radio"] + span,
input[type="checkbox"] + span {
line-height: calc(20 / 16);
padding-left: 2em;
}
}
input[type="radio"]:focus-visible + span,
input[type="checkbox"]:focus-visible + span {
outline: 2px solid var(--color-primary);
}
/* ラジオボタンスタイル */
input[type="radio"] + span::before {
background: #fff;
border: 2px solid #707070;
border-radius: 50%;
content: "";
height: calc(26 / 16 * 1em);
left: 0;
line-height: 1;
position: absolute;
top: 0px;
width: calc(26 / 16 * 1em);
}
@media screen and (max-width: 768px) {
input[type="radio"] + span::before {
height: calc(20 / 16 * 1em);
width: calc(20 / 16 * 1em);
}
}
/* ラジオボタンチェック印（未選択） */
input[type="radio"] + span::after {
content: "";
display: none;
}
/* ラジオボタンチェック印（選択） */
input[type="radio"]:checked + span::after {
background: #343434;
border-radius: 50%;
display: block;
height: calc(18 / 16 * 1em);
left: calc(4 / 16 * 1em);
line-height: 1;
margin: 0;
padding: 0;
position: absolute;
top: calc(4 / 16 * 1em);
width: calc(18 / 16 * 1em);
}
@media screen and (max-width: 768px) {
input[type="radio"]:checked + span::after {
height: calc(14 / 16 * 1em);
top: calc(3 / 16 * 1em);
left: calc(3 / 16 * 1em);
width: calc(14 / 16 * 1em);
}
}
/* チェックボックス */
input[type="checkbox"] + span::before {
/* position: absolute;
top: 0.1em;
left: 0;
content: "";
width: calc(20 / 16 * 1em);
height: calc(20 / 16 * 1em);
border: 1px solid #707070;
background: #fff;
line-height: 1;
vertical-align: middle; */
background: #fff;
border: 2px solid #707070;
border-radius: 50%;
content: "";
height: calc(26 / 16 * 1em);
left: 0;
line-height: 1;
position: absolute;
top: 0px;
width: calc(26 / 16 * 1em);
}
@media screen and (max-width: 768px) {
input[type="checkbox"] + span::before {
height: calc(20 / 16 * 1em);
width: calc(20 / 16 * 1em);
}
}
/* チェックボックス未チェック時 */
input[type="checkbox"] + span::after {
content: "";
display: none;
}
/* チェックボックスチェック時 */
input[type="checkbox"]:checked + span::after {
/* display: block;
position: absolute;
top: 0.1em;
left: 0.4em;
width: 0.5em;
height: 1em;
content: "";
border-bottom: 3px solid #707070;
border-right: 3px solid #707070;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); */
background: #343434;
border-radius: 50%;
display: block;
height: calc(18 / 16 * 1em);
left: calc(4 / 16 * 1em);
line-height: 1;
margin: 0;
padding: 0;
position: absolute;
top: calc(4 / 16 * 1em);
width: calc(18 / 16 * 1em);
}
@media screen and (max-width: 768px) {
input[type="checkbox"]:checked + span::after {
height: calc(14 / 16 * 1em);
top: calc(3 / 16 * 1em);
left: calc(3 / 16 * 1em);
width: calc(14 / 16 * 1em);
}
}
}
@layer layout {
body {
/* background-image: url("../images/site/main_bg.jpg"); */
background-size: cover;
background-color: #e8e7e7;
}
@media screen and (max-width: 1024px) {
.l-main {
padding-top: calc(var(--height-header-sp) * 1px);
}
}
}
@layer vendor {
.vendor{
}
}
@layer wordpress {
/* ブロックエディタ用のスタイル */
#wp-postbody {
display: flow-root;
overflow: hidden;
word-break: break-all;
}
#wp-postbody::after,
#wp-postbody::before {
clear: both;
content: "";
display: table;
}
#wp-postbody > * {
margin-top: 0.6em;
margin-bottom: 0.6em;
}
#wp-postbody > *:first-child {
margin-top: 0;
}
#wp-postbody :is(h1, h2, h3, h4, h5, h6, p) {
color: var(--color-text);
}
#wp-postbody h1 {
font-size: 38px;
letter-spacing: 0.1em;
font-weight: 700;
}
#wp-postbody h2 {
font-size: 32px;
font-weight: 700;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#wp-postbody h2 {
font-size: 18px;
}
}
#wp-postbody h3 {
font-size: 25px;
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#wp-postbody h3 {
font-size: 18px;
}
}
#wp-postbody h4 {
font-size: 24px;
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#wp-postbody h4 {
font-size: 16px;
line-height: calc(27.2 / 16);
padding: calc(16 / 16 * 1em) calc(16 / 16 * 1em);
}
}
#wp-postbody h5 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#wp-postbody h5 {
font-size: 16px;
line-height: calc(27.2 / 16);
}
}
#wp-postbody h6 {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#wp-postbody h6 {
font-size: 12px;
line-height: calc(18 / 12);
}
}
#wp-postbody p {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
font-style: normal;
}
#wp-postbody cite {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.1em;
font-style: normal;
}
#wp-postbody strong {
font-weight: 700;
font-size: 20px;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
#wp-postbody strong {
font-size: 16px;
line-height: calc(27.2 / 16);
}
}
#wp-postbody em {
font-style: italic;
}
#wp-postbody tr {
font-weight: normal;
}
#wp-postbody :is(th, td) {
padding: 0.5em;
}
#wp-postbody blockquote {
background-color: white;
padding: 1.5em 1.6em 1em;
text-align: left;
}
@media screen and (max-width: 768px) {
#wp-postbody blockquote {
padding: 1.3em 0.7em 1em;
}
}
#wp-postbody blockquote p {
font-size: 12px;
}
#wp-postbody blockquote cite {
font-size: 14px;
}
#wp-postbody blockquote a {
cursor: pointer;
text-decoration: underline;
}
#wp-postbody figure {
margin-bottom: 0.5em;
margin-top: 0.5em;
max-width: 100%;
}
#wp-postbody figure.wp-block-table {
overflow: visible;
}
#wp-postbody figcaption {
text-align: center;
margin-top: 0.2em;
}
#wp-postbody figure.aligncenter {
margin-left: auto;
margin-right: auto;
}
#wp-postbody img {
max-width: 100%;
}
#wp-postbody .wp-block-pullquote {
padding: unset !important;
margin-left: unset !important;
margin-right: unset !important;
margin-top: 1em !important;
margin-bottom: 1em !important;
}
#wp-postbody
:is(img.alignnone, img.alignleft, img.alignright, img.aligncenter) {
display: block;
height: auto;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
object-fit: contain;
width: auto;
}
#wp-postbody img.alignnone {
margin-left: 0;
}
#wp-postbody img.alignleft {
float: left;
margin-left: 0;
margin-right: 0.5em;
}
#wp-postbody img.alignright {
float: right;
margin-left: 0.5em;
margin-right: 0;
}
#wp-postbody ul > li {
margin-top: 1em;
padding-left: 1.3em;
position: relative;
font-size: 16px;
line-height: calc(27.2 / 16);
font-weight: 500;
letter-spacing: 0.1em;
}
#wp-postbody ul > li::before {
background: #e84388;
border-radius: 50%;
content: "";
display: block;
height: calc(9 / 16 * 1em);
left: 0;
position: absolute;
top: 0.7em;
width: calc(9 / 16 * 1em);
}
#wp-postbody ol {
counter-reset: li;
}
#wp-postbody ol > li {
list-style: none;
margin-top: 1.2em;
padding-left: 1.3em;
position: relative;
font-size: 16px;
line-height: calc(27.2 / 16);
font-weight: 500;
letter-spacing: 0.1em;
}
#wp-postbody ol > li::before {
content: counter(li);
counter-increment: li;
font-weight: bold;
left: 0;
position: absolute;
top: 0;
}
#wp-postbody a[href] {
cursor: pointer;
text-decoration: underline;
transition: opacity 0.3s var(--ease-in-out-quad);
}
#wp-postbody a[href][target="_blank"]::after {
content: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2213.438%22 height%3D%2213.091%22 viewBox%3D%220 0 13.438 13.091%22%3E%3Cg id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_2648%22 data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%202648%22 transform%3D%22translate(-90.5%20-6418)%22%3E%3Cg id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_667%22 data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%20667%22 transform%3D%22translate(93.772%206418)%22 fill%3D%22none%22 stroke%3D%22%23473b2e%22 stroke-width%3D%221%22%3E%3Crect width%3D%2210.165%22 height%3D%2210.165%22 stroke%3D%22none%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%229.165%22 height%3D%229.165%22 fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cpath id%3D%22%E3%83%91%E3%82%B9_12114%22 data-name%3D%22%E3%83%91%E3%82%B9%2012114%22 d%3D%22M9096%2C6328v9.353h9.836%22 transform%3D%22translate(-9005%2093.238)%22 fill%3D%22none%22 stroke%3D%22%23473b2e%22 stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
margin-left: 0.3em;
display: inline-block;
}
#wp-postbody a[href]:hover {
opacity: 0.8;
}
#wp-postbody table {
width: 100%;
}
#wp-postbody table th {
font-weight: 700;
}
#wp-postbody table td {
font-weight: 400;
}
#wp-postbody dl {
font-weight: 400;
}
#wp-postbody dt {
font-weight: 700;
}
#wp-postbody dd {
font-weight: 400;
margin-bottom: 1.25rem;
}
#wp-postbody pre,
#wp-postbody code {
white-space: pre-wrap;
}
#wp-postbody .aligncenter {
display: block;
}
#wp-postbody .alignright {
float: right;
margin-left: 0.5em;
margin-right: 0;
}
#wp-postbody .alignleft {
float: left;
margin-left: 0;
margin-right: 0.5em;
}
#wp-postbody .wp-caption,
#wp-postbody [class*="wp-image"] {
display: block;
max-width: 100%;
object-fit: cover;
text-align: center;
}
#wp-postbody .wp-caption-text {
margin-bottom: 0;
margin-top: 0;
}
#wp-postbody .post-password-form [name="post_password"] {
border: 1px solid #333;
padding: 0.3em;
}
#wp-postbody .post-password-form input[name="Submit"] {
border: 1px solid #707070;
border-radius: 5px;
padding: 0.3em 0.6em;
}
#wp-postbody sup {
top: -0.5em;
}
#wp-postbody sub {
bottom: -0.25em;
}
#wp-postbody sub,
#wp-postbody sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: initial;
}
/* プラグイン用 */
#wp-postbody .pdfemb-viewer {
max-width: 100%;
}
#wp-postbody summary {
cursor: pointer;
}
#wp-postbody summary::before {
content: "▽";
margin-right: 0.2em;
display: inline-block;
}
#wp-postbody details > * {
margin-top: 1em;
}
#wp-postbody details > *:first-child {
margin-top: 0;
}
/* wp-paginavi */
.wp-pagenavi {
display: flex;
column-gap: 15px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
row-gap: 10px;
}
.wp-pagenavi .current {
background-color: #e84388;
border-color: #e84388;
color: white;
align-items: center;
border-radius: 10px;
display: flex;
font-size: 20px;
font-weight: 600;
height: 40px;
justify-content: center;
letter-spacing: 0.08em;
width: 40px;
border: 1px solid #333333;
}
@media screen and (max-width: 768px) {
.wp-pagenavi .current {
font-size: 16px;
width: 32px;
height: 32px;
}
}
.wp-pagenavi :is(.page, .extend, .first, .last) {
align-items: center;
border: 1px solid #333333;
border-radius: 10px;
display: flex;
font-size: 20px;
font-weight: 600;
height: 40px;
justify-content: center;
letter-spacing: 0.08em;
width: 40px;
}
@media screen and (max-width: 768px) {
.wp-pagenavi :is(.page, .extend, .first, .last) {
font-size: 16px;
width: 32px;
height: 32px;
}
}
.wp-pagenavi :is(.first, .last) {
width: 60px;
}
@media screen and (max-width: 768px) {
.wp-pagenavi :is(.first, .last) {
width: 40px;
}
}
.wp-pagenavi :is(.nextpostslink, .previouspostslink) {
align-items: center;
border: 1px solid #333333;
border-radius: 10px;
display: flex;
font-size: 20px;
font-weight: 600;
height: 40px;
justify-content: center;
letter-spacing: 0.08em;
width: 40px;
}
@media screen and (max-width: 768px) {
.wp-pagenavi :is(.nextpostslink, .previouspostslink) {
font-size: 16px;
width: 32px;
height: 32px;
}
}
}
@layer components {
.c-article-row__link {
padding-top: 10px;
padding-bottom: 10px;
position: relative;
display: grid;
grid-template-columns: 130px 1fr;
column-gap: 20px;
pointer-events: none;
}
@media screen and (max-width: 768px) {
.c-article-row__link {
grid-template-columns: 1fr;
row-gap: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
}
.c-article-row__title {
font-size: 18px;
font-weight: 500;
line-height: calc(30 / 18);
font-family: var(--fontFamily-noto);
}
@media screen and (max-width: 768px) {
.c-article-row__title {
font-size: 14px;
line-height: calc(34 / 16);
}
}
.c-article-row__date {
align-self: flex-start;
font-size: 18px;
background-color: #e84388;
font-weight: 700;
color: white;
line-height: calc(30 / 18);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
padding-left: 1em;
padding-right: 1em;
}
@media screen and (max-width: 768px) {
.c-article-row__date {
width: 115px;
font-size: 15px;
padding-left: 0.5em;
padding-right: 0.5em;
text-align: center;
}
}
}
@layer components {
.c-breadcrumb-bar__body a {
color: #e84388;
text-decoration: underline;
}
}
@layer components {
.c-button-reservation {
transition: opacity 0.2s;
}
.c-button-reservation:hover {
opacity: 0.8;
}
@media screen and (max-width: 768px) {
.c-button-reservation__img {
max-width: 300px;
}
}
.c-button-back {
font-size: 18px;
background-color: #d65087;
padding-left: 2em;
padding-right: 2em;
border-radius: 15px;
line-height: calc(30 / 18);
display: grid;
place-items: center;
transition: background-color 0.3s, color 0.3s, border 0.3s;
border: 1px solid transparent;
}
.c-button-back__text {
color: white;
font-weight: 700;
transition: color 0.3s;
}
.c-button-back:hover {
background-color: white;
border: 1px solid #d65087;
}
.c-button-back:hover .c-button-back__text {
color: #d65087;
}
}
@layer components {
.c-doctor-clip {
position: relative;
background-color: white;
padding: 40px 8%;
filter: drop-shadow(0 10px 10px rgba(94, 70, 61, 0.4));
border: 2px solid #6dbb4f;
border-radius: 10px;
}
@media screen and (max-width: 768px) {
.c-doctor-clip {
padding: 0 4%;
background-color: unset;
border: unset;
filter: unset;
}
}
.c-doctor-clip__clip {
position: absolute;
top: 0;
left: 50%;
translate: -50% -80%;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__clip {
width: 80px;
display: none;
}
}
.c-doctor-clip__inner {
}
.c-doctor-clip__upper {
padding-top: 20px;
padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__upper {
padding-bottom: 20px;
}
}
.c-doctor-clip__grid {
display: grid;
grid-template-areas:
"picture name"
"picture greeting";
column-gap: 40px;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr;
}
@media (max-width: 768px) {
.c-doctor-clip__grid {
grid-template-columns: 1fr;
grid-template-areas:
"picture"
"name"
"greeting";
row-gap: 20px;
}
}
.c-doctor-clip__picture {
grid-area: picture;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
}
.c-doctor-clip__img {
width: 240px;
padding: 20px;
}
@media (max-width: 768px) {
.c-doctor-clip__img {
width: 120px;
max-width: 200px;
padding: 0;
}
}
.c-doctor-clip__greeting {
margin-top: 15px;
grid-area: greeting;
line-height: 1.8;
font-weight: 500;
font-size: 16px;
color: #6dbb4f;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__greeting {
margin-top: unset;
font-size: 14px;
}
}
.c-doctor-clip__name {
grid-area: name;
line-height: 2.2;
border: 5px solid #6dbb4f;
background-color: #6dbb4f;
align-self: flex-start;
width: fit-content;
display: grid;
grid-template-columns: 120px 1fr;
}
@media (max-width: 768px) {
.c-doctor-clip__name {
align-self: center;
justify-self: center;
}
}
.c-doctor-clip__name .-left {
background-color: #6dbb4f;
color: white;
border: 10px solid #6dbb4f;
position: relative;
display: flex;
flex-direction: column;
font-size: 18px;
justify-content: center;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__name .-left {
font-size: 16px;
}
}
@media (max-width: 768px) {
.c-doctor-clip__name .-head {
border: 5px solid #6dbb4f;
}
}
.c-doctor-clip__name .-right {
background-color: #ffffff;
padding: 0.5em 1em;
font-size: 20px;
font-weight: 700;
color: #6dbb4f;
}
@media (max-width: 768px) {
.c-doctor-clip__name .-right {
min-width: unset;
font-size: 16px;
display: grid;
place-items: center;
}
}
.c-doctor-clip__name .-position {
border-top: 3px solid white;
border-bottom: 3px solid white;
text-align: center;
}
.c-doctor-clip__subheading {
font-weight: 700;
letter-spacing: 0.2em;
font-size: 24px;
padding-left: 0.75em;
padding-right: 0.75em;
border-left: 2px solid #6dbb4f;
border-right: 2px solid #6dbb4f;
margin-left: 1em;
color: #6dbb4f;
width: fit-content;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__subheading {
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
}
.c-doctor-clip__list {
display: grid;
grid-template-columns:
clamp(200px, calc(250 / var(--width-design) * 100vw), 250px)
1fr;
column-gap: 30px;
row-gap: 10px;
margin-top: 15px;
}
@media (max-width: 768px) {
.c-doctor-clip__list {
grid-template-columns: 1fr;
margin-top: 20px;
}
}
.c-doctor-clip__term {
position: relative;
background-color: #6dbb4f;
color: white;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 1em;
padding-right: 1em;
text-align: center;
letter-spacing: 0.1em;
font-size: clamp(16px, calc(20 / var(--width-design) * 100vw), 20px);
align-self: flex-start;
clip-path: polygon(
0 0,
calc(100% - 20px) 0%,
100% 50%,
calc(100% - 20px) 100%,
0 100%,
20px 50%
);
}
@media (max-width: 768px) {
.c-doctor-clip__term {
font-size: clamp(14px, calc(14 / var(--width-design-sp) * 100vw), 14px);
width: fit-content;
padding-left: 15px;
padding-right: 15px;
clip-path: polygon(
0 0,
calc(100% - 10px) 0%,
100% 50%,
calc(100% - 10px) 100%,
0 100%,
10px 50%
);
}
}
.c-doctor-clip__description {
font-size: clamp(16px, calc(26 / var(--width-design) * 100vw), 26px);
font-weight: 700;
color: #6dbb4f;
font-size: 20px;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__description {
text-align: center;
font-size: 16px;
}
}
.c-doctor-clip__history {
}
.c-doctor-clip__pulse {
margin-top: 15px;
}
@media screen and (max-width: 768px) {
.c-doctor-clip__pulse {
display: none;
}
}
}
@layer components {
.c-facility-item {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
}
.c-facility-item__chara {
display: grid;
align-items: flex-end;
position: relative;
width: fit-content;
margin-left: auto;
margin-right: 19%;
z-index: 2;
}
@media screen and (max-width: 768px) {
.c-facility-item__chara {
margin-right: 10%;
}
}
.c-facility-item._reverse .c-facility-item__chara {
align-items: flex-start;
margin-left: 19%;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.c-facility-item._reverse .c-facility-item__chara {
margin-left: 10%;
}
}
.c-facility-item__chara .-wrap {
min-height: clamp(270px, calc(270 / 1080 * 100vw), 270px);
display: grid;
align-items: flex-end;
}
@media screen and (max-width: 768px) {
.c-facility-item__chara .-wrap {
min-height: unset;
}
}
.c-facility-item._00 .c-facility-item__chara .-chara {
width: clamp(130px, calc(240 / 1080 * 100vw), 240px);
}
.c-facility-item._01 .c-facility-item__chara .-chara {
width: clamp(130px, calc(220 / 1080 * 100vw), 220px);
}
.c-facility-item._02 .c-facility-item__chara .-chara {
width: clamp(130px, calc(240 / 1080 * 100vw), 240px);
}
.c-facility-item._03 .c-facility-item__chara .-chara {
width: clamp(160px, calc(300 / 1080 * 100vw), 300px);
}
.c-facility-item__chara .-fukidashi {
position: absolute;
width: clamp(100px, calc(180 / 1080 * 100vw), 180px);
left: 0;
top: 0;
translate: -90% -30%;
}
.c-facility-item._00 .c-facility-item__chara .-fukidashi {
translate: -90% -30%;
}
.c-facility-item._01 .c-facility-item__chara .-fukidashi {
translate: 110% -30%;
}
.c-facility-item._02 .c-facility-item__chara .-fukidashi {
translate: -80% -10%;
}
.c-facility-item._03 .c-facility-item__chara .-fukidashi {
translate: 110% -20%;
}
@media screen and (max-width: 768px) {
.c-facility-item._00 .c-facility-item__chara .-fukidashi {
translate: -110% 0%;
}
.c-facility-item._01 .c-facility-item__chara .-fukidashi {
translate: 130% 50%;
}
.c-facility-item._02 .c-facility-item__chara .-fukidashi {
translate: -110% 0%;
}
.c-facility-item._03 .c-facility-item__chara .-fukidashi {
translate: 170% -20%;
}
}
.c-facility-item._reverse .-fukidashi {
translate: 110% -40%;
}
.c-facility-item__pic {
position: absolute;
left: 11%;
top: 7%;
}
@media screen and (max-width: 768px) {
.c-facility-item__pic {
position: relative;
top: unset;
left: unset;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 400px;
}
}
.c-facility-item._reverse .c-facility-item__pic {
left: auto;
right: 11%;
}
@media screen and (max-width: 768px) {
.c-facility-item._reverse .c-facility-item__pic {
right: unset;
}
}
.c-facility-item__pic .-pic {
width: clamp(200px, calc(420 / 1200 * 100vw), 420px);
object-fit: cover;
}
@media screen and (max-width: 768px) {
.c-facility-item__pic .-pic {
width: 100%;
}
}
.c-facility-item__pic .-frame {
left: 0;
width: 100%;
border: 10px solid white;
height: 100%;
top: 0;
rotate: -10deg;
content: "";
}
@media screen and (max-width: 768px) {
.c-facility-item__pic .-frame {
border: 5px solid white;
rotate: unset;
}
}
.c-facility-item._reverse .c-facility-item__pic .-frame {
rotate: 10deg;
}
@media screen and (max-width: 768px) {
.c-facility-item._reverse .c-facility-item__pic .-frame {
rotate: unset;
}
}
.c-facility-item__pic .-wrap {
position: relative;
}
.c-facility-item__pic .-cloud {
position: absolute;
left: 0;
bottom: 0;
translate: -30% 90%;
width: clamp(120px, calc(200 / 1080 * 100vw), 200px);
z-index: -1;
}
@media screen and (max-width: 768px) {
.c-facility-item._00 .c-facility-item__pic .-cloud {
left: unset;
right: 0;
translate: 30% 50%;
}
.c-facility-item._01 .c-facility-item__pic .-cloud {
right: unset;
translate: -30% 50%;
}
.c-facility-item._02 .c-facility-item__pic .-cloud {
left: unset;
right: 0;
translate: 30% 50%;
}
.c-facility-item._03 .c-facility-item__pic .-cloud {
right: unset;
translate: -30% 50%;
}
}
.c-facility-item._reverse .-cloud {
left: auto;
right: 0;
translate: 30% 90%;
}
.c-facility-item__text {
margin-left: auto;
border: 15px solid transparent;
border-image-slice: 15 fill;
border-image-source: url(../images/page/facility/cloud_white.svg);
font-weight: 700;
width: 100%;
width: 100%;
max-width: 660px;
padding-top: 120px;
margin-top: -120px;
padding-bottom: 90px;
padding-left: 10%;
padding-right: 10%;
font-size: 18px;
line-height: calc(42 / 24);
}
@media screen and (max-width: 768px) {
.c-facility-item__text {
border-image: none;
padding: unset;
font-size: 14px;
margin-top: 15px;
}
}
.c-facility-item._reverse .c-facility-item__text {
margin-right: auto;
margin-left: unset;
}
}
@layer components {
.c-form-input {
padding: calc((27 / 2) / 16 * 1em) calc(34 / 16 * 1em);
border: 1px solid #707070;
width: 100%;
line-height: calc(28.8 / 16);
border-radius: 30px;
font-family: var(--fontFamily-noto);
letter-spacing: 0.08em;
background-color: white;
max-width: 679px;
}
.c-form-input._recruit {
border-color: #aaaaaa;
}
@media screen and (max-width: 768px) {
.c-form-input {
padding: calc((10 / 2) / 16 * 1em) calc(20 / 16 * 1em);
}
}
.c-form-textarea {
font-family: var(--fontFamily-noto);
padding: calc((27 / 2) / 16 * 1em) calc(34 / 16 * 1em);
border: 1px solid #707070;
width: 100%;
line-height: calc(28.8 / 16);
border-radius: 12px;
letter-spacing: 0.08em;
height: 390px;
max-width: 679px;
background-color: white;
}
.c-form-textarea._recruit {
border-color: #aaaaaa;
}
@media screen and (max-width: 768px) {
.c-form-textarea {
padding: calc((20 / 2) / 16 * 1em) calc(20 / 16 * 1em);
height: 305px;
}
}
.c-form-tel {
font-family: var(--fontFamily-noto);
padding: calc((27 / 2) / 16 * 1em) calc(34 / 16 * 1em);
border: 1px solid #707070;
width: 100%;
line-height: calc(28.8 / 16);
letter-spacing: 0.08em;
border-radius: 30px;
max-width: 679px;
background-color: white;
}
.c-form-range {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
background: #eeeeee;
height: 12px;
width: 100%;
border-radius: 10px;
border: solid 3px #eeeeee;
outline: 0;
}
.c-form-range:focus {
box-shadow: 0 0 3px var(--color-secondary);
}
.c-form-range::-webkit-slider-thumb {
-webkit-appearance: none;
background: var(--color-primary);
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
}
.c-form-range::-moz-range-thumb {
background: var(--color-primary);
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
border: none;
}
.c-form-range::-moz-focus-outer {
border: 0;
}
.c-form-range:active::-webkit-slider-thumb {
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}
.c-form-select {
position: relative;
padding: 1em;
border: 1px solid #707070;
width: 100%;
}
}
@layer components {
.c-fukidashi-green {
border: 25px solid transparent;
border-image-slice: 25 fill;
border-image-source: url(../images/components/fukidashi_green.svg);
padding-left: 1em;
padding-right: 1em;
text-align: center;
max-width: 600px;
}
.c-fukidashi-green__text {
color: white;
font-weight: 700;
font-size: 28px;
}
}
@layer components {
.c-guidance-fukidashi {
border: 15px solid transparent;
border-image-slice: 15 fill;
border-image-source: url(../images/components/fukidashi_slash.svg);
font-weight: 700;
padding-left: 1em;
padding-right: 1em;
column-gap: 10px;
width: 100%;
text-align: center;
width: 100%;
max-width: 450px;
}
@media screen and (max-width: 768px) {
.c-guidance-fukidashi {
border: 10px solid transparent;
border-image-slice: 10 fill;
border-image-source: url(../images/components/fukidashi_slash.svg);
}
}
.c-guidance-fukidashi._simple {
border-image-source: url(../images/components/fukidashi_simple.svg);
}
.c-guidance-fukidashi._dot {
border-image-source: url(../images/components/fukidashi_dot.svg);
}
.c-guidance-fukidashi__text {
color: white;
font-size: clamp(16px, calc(24 / 1280 * 100vw), 24px);
}
.c-guidance-fukidashi._simple .c-guidance-fukidashi__text {
color: #e84388;
}
.c-guidance-heading-decorate {
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.c-guidance-heading-decorate {
font-size: 18px;
}
}
.c-guidance-heading-decorate__circle {
height: 1em;
align-self: flex-start;
margin-top: 0.25em;
}
.c-guidance-heading-decorate__square {
height: 1em;
margin-left: 1em;
flex-shrink: 0;
}
.c-guidance-list {
font-size: 18px;
font-weight: 700;
display: flex;
flex-direction: column;
row-gap: 1em;
}
.c-guidance-list._row-slash {
flex-direction: row;
justify-content: center;
}
.c-guidance-list__item {
display: inline-flex;
align-items: center;
}
.c-guidance-list._purple .c-guidance-list__item._color {
color: #e84388;
}
.c-guidance-list__item::before {
flex-shrink: 0;
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
margin-right: 2px;
align-self: flex-start;
margin-top: 0.25em;
}
.c-guidance-list__item._check::before {
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
.c-guidance-list._purple .c-guidance-list__item::before {
background-image: url('data:image/svg+xml;utf8,');
}
.c-guidance-list._row-slash .c-guidance-list__item:not(:last-of-type)::after {
content: "／";
display: inline-block;
width: 18px;
font-weight: 700;
margin-left: 5px;
margin-right: 5px;
}
.c-guidance-rect {
font-size: 18px;
font-weight: 700;
background-color: #8fc31f;
padding-left: 1em;
padding-right: 1em;
width: fit-content;
text-align: center;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
.c-guidance-rect._purple {
background-color: #e84388;
}
.c-guidance-rect._radius {
border-radius: 20px;
}
.c-guidance-rect__text {
font-weight: 700;
letter-spacing: 0.1em;
color: white;
}
}
@layer components {
.c-hamburger {
cursor: pointer;
position: relative;
width: 57px;
height: 53px;
background-color: #d65087;
transition: all 0.3s;
}
.c-hamburger[aria-expanded="true"] {
background-color: white;
}
.c-hamburger__line {
background: #80b95d;
display: inline-block;
height: 2px;
left: 16px;
pointer-events: none;
position: absolute;
transition: all 0.3s;
width: 25px;
border-radius: 1px;
}
.c-hamburger__line:nth-of-type(1) {
top: 11px;
}
.c-hamburger__line:nth-of-type(2) {
top: 19px;
}
.c-hamburger__line:nth-of-type(3) {
top: 27px;
}
.c-hamburger__text {
position: absolute;
top: 31px;
left: 50%;
font-weight: 700;
translate: -50%;
color: white;
font-size: 10px;
transition: opacity 0.3s;
display: block;
text-align: center;
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-of-type(1) {
background: #80b95d;
width: 27px;
transform: translate3d(0, 15px, 0) rotate(-45deg);
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-of-type(2) {
opacity: 0;
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-of-type(3) {
background: #80b95d;
width: 27px;
transform: translate3d(0, 0, 0) rotate(45deg);
}
.c-hamburger[aria-expanded="true"] .c-hamburger__text {
opacity: 0;
}
}
@layer components {
.c-postNavigation {
cursor: pointer;
font-weight: 700;
position: relative;
}
.c-postNavigation__list {
display: grid;
grid-template-columns: 1fr 1fr;
}
.c-postNavigation__item {
height: 100%;
position: relative;
transition: 0.3s;
width: 100%;
width: fit-content;
}
.c-postNavigation__item._next {
justify-self: flex-end;
}
}
@layer components {
.c-text-bar {
font-size: 24px;
position: relative;
font-weight: 500;
display: flex;
align-items: center;
column-gap: 20px;
font-weight: 700;
}
.c-text-bar._rect-green .-text {
font-size: 18px;
font-weight: 700;
background-color: #8fc31f;
padding-left: 1em;
padding-right: 1em;
width: fit-content;
text-align: center;
padding-top: 0.25em;
padding-bottom: 0.25em;
color: white;
}
@media screen and (max-width: 768px) {
.c-text-bar {
font-size: 18px;
}
}
.c-text-bar._left::before {
content: "";
background-image: url("../images/page/guidance/line.svg");
width: 100%;
height: 6px;
display: inline-block;
flex: 1;
}
.c-text-bar._right::after {
content: "";
background-image: url("../images/page/guidance/line.svg");
width: 100%;
height: 6px;
display: inline-block;
flex: 1;
}
.c-text-bar._rect-green._right::after {
background-image: url("../images/page/guidance/line_green.svg");
}
}
@layer site {
.s-header {
height: calc(var(--height-header) * 1px);
background-repeat: repeat;
}
@media screen and (max-width: 1024px) {
.s-header {
height: calc(var(--height-header-sp) * 1px);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: var(--zIndex-header);
}
}
.s-header._fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: var(--zIndex-header);
}
.s-header::before {
/* position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: ""; */
/* background-image: url("../images/site/main_bg.jpg");
background-repeat: repeat; */
/* opacity: 0.25; */
/* z-index: -1; */
}
/* Header Upper Section */
.s-header__upper {
height: 220px;
padding-left: var(--gutter);
padding-right: var(--gutter);
background-color: #6c6d6c;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 1024px) {
.s-header__upper {
height: 53px;
}
}
.s-header__lower {
height: 132px;
background-color: #e84388;
}
@media screen and (max-width: 1024px) {
.s-header__lower {
display: none;
}
}
@media screen and (max-width: 1024px) {
.s-header__left {
height: 100%;
display: grid;
place-items: center;
}
}
@media screen and (max-width: 1024px) {
.s-header__upper {
grid-template-columns: 150px 1fr;
padding-right: unset;
}
}
.s-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
height: 100%;
}
.s-header__right {
justify-self: flex-end;
align-items: flex-end;
display: flex;
flex-direction: column;
}
.s-header__logo {
width: clamp(160px, calc(610 / 1920 * 100vw), 610px);
}
@media screen and (max-width: 1024px) {
.s-header__logo {
width: 160px;
}
}
@media screen and (max-width: 1024px) {
.s-header__right {
display: none;
}
}
.s-header__tel {
color: white;
display: inline-grid;
grid-template-columns: 44px 1fr;
column-gap: 10px;
align-items: center;
justify-content: flex-end;
font-size: clamp(16px, calc(70 / 1920 * 100vw), 70px);
font-weight: 700;
line-height: 1;
margin-top: 25px;
text-align: right;
}
.s-header__address {
font-size: clamp(16px, calc(23 / 1920 * 100vw), 23px);
font-weight: 700;
}
/* Header Toggle Button */
.s-header__toggle {
display: none;
position: relative;
z-index: var(--zIndex-toggle);
}
@media screen and (max-width: 1024px) {
.s-header__toggle {
display: block;
}
}
.s-header__spmenu {
/* display: none; */
position: fixed;
/* position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100svh; */
z-index: var(--zIndex-spmenu);
}
.s-header__nav {
display: grid;
align-items: center;
height: 100%;
}
@media screen and (max-width: 768px) {
.s-header__nav {
display: none;
}
}
}
@layer site {
/* SP Menu */
.s-spmenu {
background-color: white;
height: 100vh;
height: 100dvh;
position: fixed;
top: 0;
left: 0;
width: 100vw;
pointer-events: none;
/* opacity: 0; */
transition: clip-path 0.4s var(--ease-in-out-quad);
z-index: var(--zIndex-spmenu);
color: #d65087;
clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
padding-top: max(100px, 10vh);
padding-bottom: 10vh;
}
.s-spmenu._is-open {
pointer-events: all;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.s-spmenu__inner {
padding-left: var(--gutter);
padding-right: var(--gutter);
height: 100%;
width: 100%;
}
.s-spmenu__body {
height: calc(100vh - var(--height-header-sp) * 1px);
overflow-y: auto;
width: max(250px, calc(170 / 230 * 100%));
margin-left: auto;
margin-right: auto;
}
.s-spmenu-nav__list {
display: flex;
flex-direction: column;
align-items: center;
}
.s-spmenu-nav__list .menu-item {
position: relative;
padding-bottom: 2vh;
padding-top: 2vh;
width: 100%;
display: grid;
place-items: center;
}
.s-spmenu-nav__list .menu-item:not(:first-of-type)::before {
content: "";
background-image: url("../images/site/header_line.svg");
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
top: 0;
}
.s-spmenu-nav__list .menu-item > a {
transition: opacity 0.3s;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.02em;
}
.s-spmenu-nav__list .menu-item > a:hover {
opacity: 0.7;
}
}
@layer site {
/* Footer */
.s-footer {
padding-left: var(--gutter);
padding-right: var(--gutter);
padding-top: 50px;
padding-bottom: 50px;
}
@media screen and (max-width: 768px) {
.s-footer {
padding-top: 30px;
padding-bottom: 30px;
}
}
.s-footer__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.s-footer__logo {
display: grid;
place-items: center;
}
.s-footer__castle {
display: grid;
place-items: center;
padding-bottom: 20px;
padding-top: 20px;
}
@media screen and (max-width: 768px) {
.s-footer__castle .-img {
width: 190px;
}
}
@media screen and (max-width: 768px) {
.s-footer__logo {
width: 250px;
margin-left: auto;
margin-right: auto;
}
}
.s-footer__middle {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
padding-top: 80px;
}
@media screen and (max-width: 768px) {
.s-footer__middle {
grid-template-columns: 1fr;
row-gap: 30px;
padding-top: 25px;
}
}
.s-footer__name {
font-weight: 700;
font-size: 36px;
}
@media screen and (max-width: 768px) {
.s-footer__name {
text-align: center;
font-size: 24px;
}
}
.s-footer__address {
font-weight: 500;
font-size: 20px;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
.s-footer__address {
text-align: center;
font-size: 14px;
line-height: calc(19 / 14);
margin-top: 5px;
}
}
.s-footer__time {
margin-top: 15px;
display: grid;
grid-template-columns: 0.9fr 2fr;
column-gap: 30px;
}
@media screen and (max-width: 768px) {
.s-footer__time {
margin-left: auto;
margin-right: auto;
column-gap: 15px;
grid-template-columns: 1fr 2fr;
width: fit-content;
}
}
.s-footer__time .-left {
background-color: #d65087;
padding: 10px;
}
.s-footer__time .-heading {
color: white;
font-weight: 700;
font-size: 22px;
text-align: center;
}
@media screen and (max-width: 768px) {
.s-footer__time .-heading {
font-size: 14px;
line-height: calc(19 / 14);
}
}
@media screen and (max-width: 768px) {
.s-footer__time .-heading {
font-size: 16px;
}
}
.s-footer__time .-right {
}
.s-footer__time .-time {
font-weight: 700;
font-size: 20px;
}
@media screen and (max-width: 768px) {
.s-footer__time .-time {
font-size: 13px;
line-height: calc(19 / 13);
}
}
.s-footer__table {
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.s-footer__map .-map {
width: 85%;
margin-left: auto;
margin-right: auto;
}
}
.s-footer__lower {
padding-top: 70px;
display: grid;
place-items: center;
}
@media screen and (max-width: 768px) {
.s-footer__lower {
padding-top: 40px;
}
}
.s-footer-line {
padding-top: 40px;
}
@media screen and (max-width: 768px) {
.s-footer-line {
padding-top: 20px;
}
}
.s-footer-line__line {
height: 10px;
}
.s-footer-line__line._green {
background-color: #80b95d;
}
.s-footer-line__line._white {
background-color: white;
}
.s-footer-line__line._purple {
background-color: var(--color-purple);
}
.s-footer__button .-text {
text-align: center;
font-size: 18px;
}
}
@layer site {
.s-pageheader-main {
position: relative;
}
@media screen and (max-width: 768px) {
.s-pageheader-main__bg {
display: none;
}
}
.s-pageheader-main__bg .-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s-pageheader-main__heading {
color: white;
font-size: 28px;
letter-spacing: 0.5em;
font-weight: 700;
z-index: 2;
text-align: center;
width: 100%;
background-color: #6dbb4f;
display: flex;
align-items: center;
gap: 1em;
padding-top: 0.75em;
padding-bottom: 0.75em;
line-height: 1;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.s-pageheader-main__heading {
text-align: center;
font-size: 20px;
letter-spacing: 0.25em;
justify-content: center;
}
}
.s-pageheader-main__heading::before {
flex: 1;
width: 100%;
height: 2px;
background-color: white;
content: "";
}
@media screen and (max-width: 768px) {
.s-pageheader-main__heading::before {
display: none;
}
}
.s-pageheader-main__heading::after {
flex: 1;
width: 100%;
height: 2px;
background-color: white;
content: "";
}
@media screen and (max-width: 768px) {
.s-pageheader-main__heading::after {
display: none;
}
}
.s-pageheader-guidance {
position: relative;
}
.s-pageheader-guidance__bg .-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s-pageheader-guidance__heading {
background-color: #6dbb4f;
letter-spacing: 0.1em;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.s-pageheader-guidance__heading {
padding-top: 0;
padding-bottom: 0;
background-color: #e84388;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
}
.s-pageheader-guidance__heading .-text {
border-radius: 40px;
font-weight: 700;
color: white;
background-color: #e84388;
align-items: center;
font-size: 32px;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
@media screen and (max-width: 768px) {
.s-pageheader-guidance__heading .-text {
font-size: 18px;
border-radius: none;
background-color: none;
}
}
.s-pageheader-guidance__heading .-bar {
background-color: #e84388;
flex: 1;
height: 5px;
width: 100%;
display: block;
}
}
@layer site {
.s-section-banner {
padding-top: 50px;
padding-bottom: 50px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.s-section-banner {
padding-top: 30px;
padding-bottom: 30px;
}
}
.s-section-banner__sns .-list {
display: flex;
justify-content: center;
}
.s-section-banner__sns .-item {
flex-basis: 150px;
display: grid;
place-items: center;
}
.s-section-banner__sns .-item:not(:first-of-type) {
border-left: 2px solid var(--color-text);
}
@media screen and (max-width: 768px) {
.s-section-banner__sns .-item:not(:first-of-type) {
border-left: none;
}
.s-section-banner__sns .-icon {
width: 32px;
}
}
.s-section-banner__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.s-section-banner__banner {
padding-top: 40px;
}
@media screen and (max-width: 768px) {
.s-section-banner__banner {
padding-top: 30px;
}
}
.s-section-banner__banner .-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 20px;
}
@media screen and (max-width: 768px) {
.s-section-banner__banner .-list {
grid-template-columns: 1fr 1fr;
place-items: center;
}
}
}
@layer site {
.s-header-nav__list {
height: 100%;
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.s-header-nav__list .menu-item {
position: relative;
flex-grow: 1;
text-align: center;
}
.s-header-nav__list .menu-item:not(:first-of-type) {
border-left: 1px dashed white;
}
.s-header-nav__list .menu-item > a {
color: #fff;
font-size: 17px;
pointer-events: none;
}
@media (max-width: 1024px) {
.s-header-nav__list .menu-item > a {
font-size: clamp(14px, calc(16 / 375 * 100vw), 18px);
}
}
.s-header-nav__list .menu-item > a::before {
content: "";
display: block;
background-repeat: no-repeat;
width: 55px;
height: 59px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
@media (max-width: 1024px) {
.s-header-nav__list .menu-item > a::before {
width: calc(55 / 1.6 * 1px);
height: calc(59 / 1.6 * 1px);
background-size: contain;
}
}
.s-header-nav__list .menu-item._greeting > a::before {
background-image: url("../images/site/header_icon_greeting.svg");
}
.s-header-nav__list .menu-item._doctor > a::before {
background-image: url("../images/site/header_icon_doctor.svg");
}
.s-header-nav__list .menu-item._guidance > a::before {
background-image: url("../images/site/header_icon_guidance.svg");
}
.s-header-nav__list .menu-item._access > a::before {
background-image: url("../images/site/header_icon_access.svg");
}
.s-header-nav__list .menu-item._facility > a::before {
background-image: url("../images/site/header_icon_facility.svg");
}
}
@layer site {
.s-stickyNav {
background-color: #2ab2c1;
position: fixed;
right: 0;
bottom: 100px;
z-index: 51;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
@media (max-width: 1024px) {
.s-stickyNav {
bottom: 0;
left: 0;
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: unset;
}
}
.s-stickyNav__list {
display: flex;
flex-direction: column;
}
@media (max-width: 1024px) {
.s-stickyNav__list {
flex-direction: row;
justify-content: space-between;
}
}
.s-stickyNav__item {
position: relative;
flex: 1 1 70px;
}
.s-stickyNav__item:not(:first-of-type)::before {
content: "";
position: absolute;
top: 0;
left: 10%;
width: 80%;
border-top: 1px dashed white;
display: block;
height: 1px;
}
@media (max-width: 1024px) {
.s-stickyNav__item:not(:first-of-type)::before {
width: 1px;
height: 80%;
left: 0;
border-top: unset;
border-left: 1px dashed white;
top: 10%;
}
}
.s-stickyNav__icon {
height: 50px;
display: grid;
place-items: center;
}
@media screen and (max-width: 768px) {
.s-stickyNav__icon {
height: 36px;
}
.s-stickyNav__img {
height: 36px;
object-fit: contain;
}
}
.s-stickyNav__link {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 15px 10px 10px;
position: relative;
}
@media (max-width: 1024px) {
.s-stickyNav__link {
padding: 10px 15px;
}
}
.s-stickyNav__text {
color: white;
font-size: 17px;
font-weight: 700;
}
@media (max-width: 1024px) {
.s-stickyNav__text {
font-size: clamp(10px, calc(12 / 375 * 100vw), 12px);
white-space: nowrap;
}
}
}
@layer page {
.p-access-lower {
padding-bottom: 60px;
}
.p-access-lower__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-access-lower__map .-map {
max-width: 100%;
width: 100%;
height: 100%;
aspect-ratio: 1360 / 590;
}
@media screen and (max-width: 768px) {
.p-access-lower__map .-map {
aspect-ratio: 360 / 270;
}
}
}
@layer page {
.p-access-upper {
padding-left: var(--gutter);
padding-right: var(--gutter);
padding-top: 120px;
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.p-access-upper {
padding-top: 80px;
}
}
.p-access-upper__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-access-upper__layout {
display: grid;
grid-template-columns: 370fr 960fr;
column-gap: 40px;
row-gap: 20px;
}
@media screen and (max-width: 768px) {
.p-access-upper__layout {
grid-template-columns: 1fr;
}
.p-access-upper__map {
border: 1px solid #e84388;
}
}
.p-access-upper__outside {
position: relative;
}
@media screen and (max-width: 768px) {
.p-access-upper__outside {
width: 90%;
margin-left: auto;
margin-right: auto;
}
}
.p-access-upper__outside .-fukidashi {
position: absolute;
left: 0;
top: 0;
width: 160px;
translate: -10% -70%;
}
@media screen and (max-width: 768px) {
.p-access-upper__outside .-fukidashi {
width: 150px;
translate: -10% -50%;
}
}
.p-access-upper__heading {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.p-access-upper__heading {
display: grid;
place-items: center;
margin-top: 30px;
}
.p-access-upper__heading .-img {
width: 220px;
}
}
.p-access-upper__text {
margin-top: 20px;
font-weight: 700;
}
}
@layer page {
.p-doctor-introduction {
padding-top: 40px;
padding-bottom: 40px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-doctor-introduction {
border-bottom: 1px solid #6dbb4f;
}
}
.p-doctor-introduction__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-doctor-introduction__heading {
display: flex;
align-items: center;
justify-content: center;
column-gap: 24px;
padding-top: 30px;
padding-bottom: 40px;
font-size: 32px;
color: #6dbb4f;
letter-spacing: 0.1em;
font-weight: 700;
margin-left: auto;
margin-right: auto;
}
.p-doctor-introduction__heading::before,
.p-doctor-introduction__heading::after {
content: "";
width: 150px;
aspect-ratio: 220 / 165;
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
.p-doctor-introduction__heading::before {
background-image: url("../images/page/greeting/particle_left.svg");
}
.p-doctor-introduction__heading::after {
background-image: url("../images/page/greeting/particle_right.svg");
}
@media screen and (max-width: 768px) {
.p-doctor-introduction__heading {
font-size: 20px;
padding-top: unset;
padding-bottom: 10px;
}
.p-doctor-introduction__heading::before,
.p-doctor-introduction__heading::after {
display: none;
}
}
.p-doctor-introduction__clip {
margin-left: auto;
margin-right: auto;
max-width: 900px;
margin-top: 120px;
}
.p-doctor-introduction__clip:first-of-type {
margin-top: 60px;
}
@media screen and (max-width: 768px) {
.p-doctor-introduction__clip:first-of-type {
margin-top: 40px;
}
.p-doctor-introduction__clip {
margin-top: 60px;
}
}
.p-doctor-introduction__body + .p-doctor-introduction__body {
margin-top: 140px;
}
@media screen and (max-width: 768px) {
.p-doctor-introduction__body + .p-doctor-introduction__body {
margin-top: 60px;
}
}
}
@layer page {
.p-facility-section {
padding-top: 40px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-facility-section {
padding-top: 30px;
}
}
.p-facility-section__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-facility-section__item {
padding-top: 30px;
padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
.p-facility-section__item {
padding-top: unset;
padding-bottom: unset;
}
}
}
@layer page {
.p-greeting-doctor {
padding-top: 40px;
padding-bottom: 40px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-greeting-doctor {
padding-top: 30px;
padding-bottom: 30px;
}
}
.p-greeting-doctor__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-greeting-doctor__heading {
display: flex;
align-items: center;
justify-content: center;
column-gap: 24px;
padding-top: 30px;
padding-bottom: 40px;
font-size: 32px;
color: #6dbb4f;
letter-spacing: 0.1em;
font-weight: 700;
margin-left: auto;
margin-right: auto;
}
.p-greeting-doctor__heading::before,
.p-greeting-doctor__heading::after {
content: "";
width: 150px;
aspect-ratio: 220 / 165;
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
.p-greeting-doctor__heading::before {
background-image: url("../images/page/greeting/particle_left.svg");
}
.p-greeting-doctor__heading::after {
background-image: url("../images/page/greeting/particle_right.svg");
}
@media screen and (max-width: 768px) {
.p-greeting-doctor__heading {
font-size: 20px;
padding-top: unset;
padding-bottom: 10px;
}
.p-greeting-doctor__heading::before,
.p-greeting-doctor__heading::after {
display: none;
}
}
.p-greeting-doctor__box {
margin-top: 20px;
position: relative;
padding: 40px 4%;
background-color: color-mix(in srgb, #8fc31f 20%, transparent);
border-radius: 20px;
display: grid;
grid-template-columns: 1.3fr 2fr;
column-gap: 40px;
}
@media screen and (max-width: 768px) {
.p-greeting-doctor__box {
row-gap: 20px;
grid-template-columns: 1fr;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
border-radius: unset;
}
}
.p-greeting-doctor__left {
place-items: center;
display: grid;
place-items: center;
}
.p-greeting-doctor__left .-img {
width: 150px;
}
.p-greeting-doctor__text {
font-size: 16px;
font-weight: 500;
line-height: 1.7;
}
@media screen and (max-width: 768px) {
.p-greeting-doctor__text {
font-size: 14px;
}
}
.p-greeting-doctor__name {
font-size: 18px;
text-align: right;
margin-top: 10px;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.p-greeting-doctor__name {
font-size: 12px;
}
}
.p-greeting-doctor__text .-color {
color: #006934;
}
}
@layer page {
.p-greeting-staff {
padding-top: 80px;
padding-bottom: 80px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-greeting-staff {
padding-top: 40px;
padding-bottom: 60px;
}
}
.p-greeting-staff__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-greeting-staff__clip {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
}
@layer page {
.p-guidance-body__section {
padding-top: 80px;
padding-left: var(--gutter);
padding-right: var(--gutter);
position: relative;
}
@media screen and (max-width: 768px) {
.p-guidance-body__section {
padding-top: 20px;
padding-bottom: 20px;
}
}
.p-guidance-body__section .-pig {
position: absolute;
right: 20px;
top: 100px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__section .-pig {
display: none;
}
}
@media (max-width: 768px) {
.p-doctor-history__description {
padding-left: 2em;
font-size: clamp(14px, calc(14 / var(--width-design-sp) * 100vw), 16px);
}
}
.p-guidance-body__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-guidance-body__row {
margin-top: 30px;
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__row {
margin-top: 25px;
margin-bottom: 25px;
}
}
@media screen and (max-width: 768px) {
.p-guidance-body__row .c-guidance-fukidashi {
margin-left: auto;
margin-right: auto;
}
}
.p-guidance-body__row._list {
padding-left: 40px;
padding-right: 40px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__row._list {
padding-left: unset;
padding-right: unset;
}
}
.p-guidance-body__row._particle {
position: relative;
}
.p-guidance-body__row._particle .-particle {
position: absolute;
bottom: 10px;
right: 0;
width: 160px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__row._particle .-particle {
display: none;
}
}
.p-guidance-body__row._cloud {
display: flex;
column-gap: 40px;
}
.p-guidance-body__row._cloud-between {
display: flex;
justify-content: space-between;
column-gap: 40px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__row._cloud {
flex-direction: column-reverse;
row-gap: 20px;
align-items: center;
}
}
@media screen and (max-width: 768px) {
.p-guidance-body__row._cloud-between {
flex-direction: column-reverse;
row-gap: 20px;
align-items: center;
}
}
.p-guidance-body__row._cloud .-cloud {
width: 200px;
}
.p-guidance-body__row._cloud-between .-cloud {
width: 200px;
}
.p-guidance-body__row._center {
display: grid;
place-items: center;
}
.p-guidance-body__text {
margin-top: 15px;
font-weight: 500;
}
.p-guidance-body__text._emphasis {
font-size: 130%;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.p-guidance-body__text._emphasis {
font-size: 115%;
}
}
.p-guidance-body__text .-color {
color: #e84388;
}
.p-guidance-body__box {
margin-top: 40px;
}
.p-guidance-body__layout {
display: grid;
margin-top: 20px;
margin-bottom: 20px;
grid-template-columns: 0.8fr 2fr;
}
.p-guidance-body__layout._lungcancer {
grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout._lungcancer {
grid-template-columns: 1fr;
}
}
.p-guidance-body__layout._lungcancer .-left {
justify-self: flex-end;
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout._lungcancer .-left {
justify-self: unset;
}
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout._lungcancer .-right {
display: grid;
place-items: center;
}
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout {
grid-template-columns: 1fr;
row-gap: 20px;
}
}
.p-guidance-body__layout._col-2 {
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout._col-2 {
grid-template-columns: 1fr;
row-gap: 20px;
}
}
.p-guidance-body__layout .-left {
align-self: flex-end;
justify-self: center;
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout._col-2 .-left {
justify-self: unset;
}
}
.p-guidance-body__pig-particle {
margin-top: 40px;
}
.p-guidance-body__layout .-cloud {
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.p-guidance-body__layout .-cloud {
display: grid;
place-items: center;
}
}
@media screen and (max-width: 768px) {
.p-guidance-body__pig-particle {
display: grid;
place-items: center;
}
}
.p-guidance-body__pig-particle .-particle {
}
}
@layer page {
.p-home-body__pagination {
margin-top: 40px;
}
}
@layer page {
.p-home-layout {
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.p-home-layout__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-home-layout__head {
padding-top: 80px;
padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
.p-home-layout__head {
padding-top: 40px;
padding-bottom: 20px;
}
}
}
@layer page {
/* 404 */
.p-page404-body {
padding: 100px var(--gutter);
text-align: center;
}
@media screen and (max-width: 768px) {
.p-page404-body {
padding: 75px var(--gutter);
}
}
.p-page404-body__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-page404-body__heading {
font-size: 30px;
line-height: calc(48 / 30);
letter-spacing: 0.05em;
font-weight: 700;
color: #d65087;
}
@media screen and (max-width: 768px) {
.p-page404-body__heading {
font-size: 24px;
}
}
.p-page404-body__heading .-ib {
display: block;
}
.p-page404-body__text {
margin-top: 30px;
text-align: center;
font-size: 14px;
font-weight: 600;
line-height: calc(24 / 14);
}
.p-page404-body__button {
display: grid;
margin-top: 40px;
place-items: center;
}
}
@layer page {
.p-single-body {
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.p-single-body__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
}
@layer page {
.p-single-head {
padding-top: 80px;
padding-bottom: 20px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-single-head {
padding-top: 40px;
padding-bottom: 20px;
}
}
.p-single-head__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
}
@layer page {
.p-single-post__head {
border-bottom: 5px dotted #e84388;
}
.p-single-post__heading {
font-weight: 700;
display: inline-block;
font-size: 24px;
padding-top: 15px;
padding-bottom: 15px;
color: #e84388;
line-height: 1.5;
word-break: break-all;
}
.p-single-post__heading::before {
content: "●";
display: inline-block;
margin-right: 1em;
font-size: 16px;
transform: translate3d(0, -10%, 0);
}
.p-single-post__date {
font-weight: 700;
color: #e84388;
margin-left: 1em;
font-size: 16px;
display: inline-block;
}
.p-single-post__thumbnail > img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
max-height: 600px;
max-width: 100%;
object-fit: cover;
width: 100%;
}
.p-single-post__pager {
margin-top: 30px;
}
.p-single-post__comment {
margin-top: 30px;
}
.p-single-post__postNavigation {
margin-top: 30px;
}
.p-single-post__body {
margin-top: 30px;
}
}
@layer page {
.p-top-about {
padding-top: 20px;
padding-bottom: 50px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-top-about {
padding-top: 0;
padding-bottom: 35px;
}
}
.p-top-about__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-top-about__text {
padding-top: 0.9em;
padding-bottom: 0.9em;
position: relative;
font-weight: 500;
font-size: 20px;
line-height: calc(35 / 20);
padding-left: 5%;
padding-right: 5%;
}
@media screen and (max-width: 768px) {
.p-top-about__text {
padding-bottom: unset;
font-size: 15px;
line-height: calc(26 / 15);
padding-left: unset;
padding-right: unset;
}
}
}
@layer page {
.p-top-catch {
padding-top: 20px;
padding-bottom: 20px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.p-top-catch._upper {
padding-top: 6.5%;
}
@media screen and (max-width: 768px) {
.p-top-catch {
padding-top: 10px;
padding-bottom: 10px;
}
}
.p-top-catch__inner {
max-width: calc((var(--width-inner)) * 1px);
margin-left: auto;
margin-right: auto;
column-gap: 10px;
display: flex;
}
.p-top-catch__catch {
flex: 1;
text-align: center;
align-self: center;
display: grid;
place-items: center;
}
@media screen and (max-width: 768px) {
.p-top-catch__catch._about {
width: 280px;
flex: unset;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 768px) {
.p-top-catch__catch._doctor {
width: 312px;
flex: unset;
margin-left: auto;
margin-right: auto;
}
}
.p-top-catch__particle {
flex-basis: 200px;
object-fit: contain;
}
@media screen and (max-width: 1024px) {
.p-top-catch__particle {
flex-basis: 150px;
}
}
@media screen and (max-width: 768px) {
.p-top-catch__particle {
display: none;
}
}
}
@layer page {
.p-top-doctor {
padding-left: var(--gutter);
padding-right: var(--gutter);
padding-top: 20px;
padding-bottom: 195px;
}
@media screen and (max-width: 768px) {
.p-top-doctor {
padding-bottom: 20px;
}
}
.p-top-doctor__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-top-doctor__head {
display: grid;
place-items: center;
}
.p-top-doctor__box {
padding-top: 55px;
padding-bottom: 30px;
padding-left: 3%;
padding-right: 3%;
background-color: color-mix(in srgb, #8fc31a 20%, transparent);
border-radius: 50px;
display: grid;
grid-template-columns: 2fr 3fr;
/* grid-template-columns: 1fr; */
column-gap: 20px;
}
@media screen and (max-width: 768px) {
.p-top-doctor__box {
padding-top: 20px;
padding-bottom: 20px;
border-radius: unset;
margin-left: calc(-50vw + 50%);
grid-template-columns: 1fr;
margin-right: calc(-50vw + 50%);
row-gap: 20px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
}
.p-top-doctor__message {
font-size: 20px;
line-height: calc(35 / 20);
font-weight: 500;
text-align: justify;
}
@media screen and (max-width: 768px) {
.p-top-doctor__message {
line-height: calc(26 / 15);
font-size: 15px;
}
}
.p-top-doctor__name {
font-size: 20px;
line-height: calc(35 / 20);
font-weight: 500;
margin-top: 20px;
text-align: right;
}
@media screen and (max-width: 768px) {
.p-top-doctor__name {
line-height: calc(26 / 15);
font-size: 12px;
margin-top: 5px;
}
}
}
@layer page {
.p-top-feature {
padding-left: var(--gutter);
padding-right: var(--gutter);
padding-top: 120px;
padding-bottom: 150px;
}
@media screen and (max-width: 768px) {
.p-top-feature {
padding-top: 30px;
padding-bottom: 30px;
}
}
.p-top-feature__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
}
.p-top-feature__list {
display: grid;
grid-template-columns: 0.85fr 0.85fr 1fr 1fr 1fr;
column-gap: 20px;
grid-template-rows: repeat(3, auto);
row-gap: 70px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.p-top-feature__list {
grid-template-columns: 1fr;
row-gap: 25px;
width: 100%;
}
}
.p-top-feature__list > *:nth-child(1) {
grid-area: 1 / 1 / 2 / 3;
padding-left: 18%;
}
.p-top-feature__list > *:nth-child(2) {
grid-area: 1 / 3 / 2 / 6;
padding-top: 150px;
}
.p-top-feature__list > *:nth-child(3) {
grid-area: 2 / 1 / 3 / 6;
}
.p-top-feature__list > *:nth-child(4) {
grid-area: 3 / 1 / 4 / 6;
}
@media screen and (max-width: 768px) {
.p-top-feature__list > *:nth-child(1) {
grid-area: auto;
padding-left: unset;
width: 140px;
margin-left: auto;
margin-right: auto;
}
.p-top-feature__list > *:nth-child(2) {
grid-area: auto;
padding-top: unset;
}
.p-top-feature__list > *:nth-child(3) {
grid-area: auto;
}
.p-top-feature__list > *:nth-child(4) {
grid-area: auto;
}
}
@media screen and (max-width: 768px) {
.p-top-feature__item {
margin-left: calc(-0.5 * var(--gutter));
margin-right: calc(-0.5 * var(--gutter));
}
.p-top-feature__chara {
max-width: 180px;
margin-left: auto;
margin-right: auto;
}
}
.p-top-feature-item__heading {
border: 15px solid transparent;
border-image-slice: 15 fill;
border-image-source: url(../images/top/feature_heading_bg.png);
line-height: calc(73 / 56);
font-size: clamp(18px, calc(42 / 1280 * 100vw), 42px);
color: #4d4d4d;
font-weight: 700;
padding-bottom: 0.2em;
padding-left: 1.2em;
padding-right: 1.2em;
padding-top: 0.2em;
display: inline-grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
width: 100%;
}
@media screen and (max-width: 768px) {
.p-top-feature-item__heading {
line-height: calc(22 / 18);
font-size: 17px;
border: 3px solid transparent;
column-gap: 5px;
border-image-slice: 5 fill;
padding-bottom: 0.5em;
padding-top: 0.5em;
border-image-source: url(../images/top/feature_heading_bg.png);
}
}
.p-top-feature-item__heading .-num {
color: #e84388;
}
.p-top-feature-item__heading .-emphasis {
color: #e84388;
}
.p-top-feature-item__description {
font-size: 28px;
line-height: calc(58 / 40);
font-weight: 500;
padding-top: 20px;
padding-left: 5%;
padding-right: 5%;
}
@media screen and (max-width: 768px) {
.p-top-feature-item__description {
line-height: calc(22 / 14);
font-size: 14px;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
}
}
}
@layer page {
.p-top-guidance {
padding-left: var(--gutter);
padding-right: var(--gutter);
padding-top: 100px;
padding-bottom: 80px;
}
@media screen and (max-width: 1024px) {
.p-top-guidance {
padding-top: 20px;
padding-bottom: 20px;
}
}
.p-top-guidance__inner-lg {
max-width: 1330px;
margin-left: auto;
margin-right: auto;
}
.p-top-guidance__nav {
margin-top: 60px;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__nav {
margin-top: 20px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
.p-top-guidance__box {
padding: 50px 6% 60px;
border: 10px solid transparent;
border-image-slice: 10 fill;
/* border-image-source: url(../images/top/guidance_bg.png); */
}
@media screen and (max-width: 1024px) {
.p-top-guidance__box {
padding-top: 10px;
padding-bottom: 10px;
padding-left: var(--gutter);
padding-right: var(--gutter);
background-color: color-mix(in srgb, #80b95d 20%, transparent);
border-image: none;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
}
.p-top-guidance__list {
display: grid;
grid-template-columns: 1fr 1fr;
width: fit-content;
row-gap: 40px;
margin-left: auto;
margin-right: auto;
max-width: 820px;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__list {
grid-template-columns: 1fr;
row-gap: 20px;
margin-left: auto;
margin-right: auto;
max-width: 280px;
}
}
/*
.p-top-guidance__list .menu-item {
border: 15px solid transparent;
border-image-slice: 15 fill;
text-align: center;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__list .menu-item {
border: 5px solid transparent;
border-image-slice: 5 fill;
}
}
.p-top-guidance__nav .menu-item:nth-child(4n) {
color: white;
border-image-source: url(../images/top/guidance_fukidashi_green_right.svg);
}
.p-top-guidance__nav .menu-item:nth-child(4n + 1) {
color: var(--color-text);
border-image-source: url(../images/top/guidance_fukidashi_yellow_left.svg);
}
.p-top-guidance__nav .menu-item:nth-child(4n + 2) {
color: var(--color-text);
border-image-source: url(../images/top/guidance_fukidashi_yellow_right.svg);
}
.p-top-guidance__nav .menu-item:nth-child(4n + 3) {
color: white;
border-image-source: url(../images/top/guidance_fukidashi_green_left.svg);
}
@media screen and (max-width: 1024px) {
.p-top-guidance__nav .menu-item:nth-child(4n) {
color: white;
border-image-source: url(../images/top/guidance_fukidashi_green_right.svg);
}
.p-top-guidance__nav .menu-item:nth-child(4n + 1) {
color: var(--color-text);
border-image-source: url(../images/top/guidance_fukidashi_yellow_left.svg);
}
.p-top-guidance__nav .menu-item:nth-child(4n + 2) {
color: white;
border-image-source: url(../images/top/guidance_fukidashi_green_left.svg);
}
.p-top-guidance__nav .menu-item:nth-child(4n + 3) {
color: var(--color-text);
border-image-source: url(../images/top/guidance_fukidashi_yellow_right.svg);
}
}
.p-top-guidance__list .menu-item a {
font-size: 32px;
display: block;
padding-bottom: 0.2em;
width: 100%;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__list .menu-item a {
font-size: 18px;
}
} */
.p-top-guidance__list .menu-item {
background-color: #2cb2c2;
width: min(100%, 400px);
min-height: 90px;
color: white;
font-size: 26px;
font-weight: 700;
letter-spacing: 0.29em;
display: grid;
place-items: center;
position: relative;
text-align: center;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__list .menu-item {
width: min(100%, 280px);
min-height: 64px;
font-size: 18px;
}
}
.p-top-guidance__nav .menu-item:nth-child(2n + 1) {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
padding-right: 93px;
padding-left: 20px;
clip-path: polygon(
calc(100% - 24px) 0,
100% 50%,
calc(100% - 24px) 100%,
0 100%,
0 0
);
}
@media screen and (max-width: 1024px) {
.p-top-guidance__nav .menu-item:nth-child(2n + 1) {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
clip-path: polygon(
calc(100% - 17px) 0,
100% 50%,
calc(100% - 17px) 100%,
0 100%,
0 0
);
}
}
.p-top-guidance__nav .menu-item:nth-child(2n) {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding-left: 93px;
padding-right: 20px;
clip-path: polygon(100% 0, 100% 100%, 24px 100%, 0 50%, 24px 0);
translate: 0 50%;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__nav .menu-item:nth-child(2n) {
clip-path: polygon(100% 0, 100% 100%, 17px 100%, 0 50%, 17px 0);
translate: unset;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
}
.p-top-guidance__nav .menu-item:nth-child(2n + 1)::after {
content: "";
width: 93px;
height: 80px;
background-image: url(../images/site/icon_stethoscope.svg);
position: absolute;
right: 3px;
top: 50%;
translate: 0 -50%;
background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__nav .menu-item:nth-child(2n + 1)::after {
width: 65px;
height: 57px;
}
}
.p-top-guidance__nav .menu-item:nth-child(2n)::after {
content: "";
width: 93px;
height: 80px;
background-image: url(../images/site/icon_stethoscope.svg);
position: absolute;
left: 3px;
top: 50%;
translate: 0 -50%;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__nav .menu-item:nth-child(2n)::after {
width: 65px;
height: 57px;
}
}
.p-top-guidance__heading {
display: flex;
justify-content: center;
position: relative;
height: 150px;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__heading {
height: unset;
}
}
.p-top-guidance__heading .-heading {
background-color: #6dbb4f;
border-radius: 20px;
color: white;
font-weight: 700;
font-size: clamp(20px, calc(39 / 1080 * 100vw), 39px);
padding-left: 1.5em;
padding-right: 1.5em;
align-self: flex-end;
column-gap: 20px;
padding-top: 0.2em;
padding-bottom: 0.2em;
text-align: center;
letter-spacing: 0.1em;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__heading .-heading {
border-radius: 10px;
font-size: 20px;
padding-left: 0.5em;
padding-right: 0.5em;
}
}
.p-top-guidance__heading .-chara-left {
position: absolute;
left: 6%;
width: 345px;
top: -60%;
}
@media screen and (max-width: 1400px) {
.p-top-guidance__heading .-chara-left {
left: 5%;
width: 200px;
}
}
@media screen and (max-width: 1024px) {
.p-top-guidance__heading .-chara-left {
display: none;
}
}
.p-top-guidance__heading .-chara-right {
position: absolute;
width: 375px;
right: 3%;
top: -60%;
}
@media screen and (max-width: 1400px) {
.p-top-guidance__heading .-chara-right {
width: 200px;
right: 5%;
}
}
@media screen and (max-width: 1024px) {
.p-top-guidance__heading .-chara-right {
display: none;
}
}
.p-top-guidance__bottom {
display: grid;
place-items: center;
margin-top: 20px;
}
@media screen and (max-width: 1024px) {
.p-top-guidance__bottom {
display: none;
}
}
}
@layer page {
.p-top-info {
display: none;
}
@media screen and (max-width: 1024px) {
.p-top-info {
display: revert;
}
}
.p-top-info__upper {
text-align: center;
height: 30px;
background-color: white;
}
.p-top-info__tel {
font-size: 20px;
color: #d65087;
font-weight: 700;
height: 30px;
display: inline-grid;
grid-template-columns: 15px auto;
column-gap: 5px;
justify-content: center;
align-items: center;
}
.p-top-info__open {
font-size: 18px;
color: var(--color-yellow);
font-weight: 700;
}
.p-top-info__lower {
text-align: center;
height: 30px;
background-color: #d65087;
display: grid;
place-items: center;
}
}
@layer page {
.p-top-mv {
position: relative;
aspect-ratio: 1920 / 1260;
background-color: var(--color-blue);
}
@media screen and (max-width: 768px) {
.p-top-mv {
aspect-ratio: 390 / 342;
}
}
.p-top-mv__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.p-top-mv__bg .-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.p-top-mv__logo {
position: absolute;
top: 30px;
left: 50%;
translate: -54%;
width: 100%;
max-width: calc(1119 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
.p-top-mv__logo {
max-width: calc(359 / 390 * 100vw);
top: 20px;
translate: -50%;
}
}
.p-top-mv__logo .-img {
width: 100%;
}
.p-top-mv__open {
position: absolute;
right: 11%;
top: calc(234 / 1920 * 100vw);
max-width: calc(450 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
.p-top-mv__open {
display: none;
}
}
.p-top-mv__pic {
position: absolute;
right: 6%;
top: calc(15 / 1920 * 100vw);
max-width: calc(310 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
.p-top-mv__pic {
right: 2%;
top: calc(82 / 375 * 100vw);
max-width: calc(80 / 375 * 100vw);
}
}
}
@layer page {
.p-top-news {
/* background-color: color-mix(in srgb, #ed69a0 20%, transparent); */
background-color: #e84388;
padding-top: 60px;
padding-bottom: 90px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media screen and (max-width: 768px) {
.p-top-news {
padding-top: 30px;
padding-bottom: 30px;
}
}
.p-top-news__inner-lg {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
.p-top-news__frame {
border-radius: 200px;
border: 25px solid #f3a1c3;
background-color: white;
height: 380px;
position: relative;
}
@media screen and (max-width: 768px) {
.p-top-news__frame {
border-radius: unset;
border: unset;
background-color: unset;
height: auto;
}
}
.p-top-news__heading {
position: absolute;
top: -30px;
left: 170px;
}
@media screen and (max-width: 768px) {
.p-top-news__heading {
position: static;
top: auto;
left: auto;
width: 160px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 768px) {
.p-top-news__chara {
display: none;
}
}
.p-top-news__cloud {
position: absolute;
bottom: -70px;
right: 130px;
width: 210px;
}
@media screen and (max-width: 768px) {
.p-top-news__cloud {
display: none;
}
}
.p-top-news__body {
display: grid;
grid-template-columns: 190px 1fr;
padding-left: 5%;
padding-right: 9%;
column-gap: 20px;
padding-top: 50px;
padding-bottom: 50px;
}
@media screen and (max-width: 1024px) {
.p-top-news__body {
grid-template-columns: 120px 1fr;
align-items: center;
}
}
@media screen and (max-width: 768px) {
.p-top-news__body {
grid-template-columns: 1fr;
padding-left: unset;
padding-right: unset;
padding-top: 20px;
padding-bottom: 20px;
}
}
.p-top-news__list {
height: 220px;
overflow-y: auto;
padding-top: 20px;
}
@media screen and (max-width: 768px) {
.p-top-news__list {
height: 240px;
}
}
.p-top-news__item {
border-bottom: 2px dashed #595757;
}
@media screen and (max-width: 768px) {
.p-top-news__item {
border-bottom: unset;
}
}
}
@layer page {
.p-top-overview {
padding-top: 65px;
padding-bottom: 60px;
padding-left: var(--gutter);
padding-right: var(--gutter);
background-color: color-mix(in srgb, #e84388 25%, transparent);
position: relative;
}
@media screen and (max-width: 768px) {
.p-top-overview {
padding-top: 0;
background-color: unset;
padding-bottom: 0;
}
}
.p-top-overview__inner {
max-width: calc(var(--width-inner) * 1px);
margin-left: auto;
margin-right: auto;
position: relative;
}
@media screen and (max-width: 768px) {
.p-top-overview__heading {
background-color: color-mix(in srgb, #de739f 15%, transparent);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-top: 20px;
padding-bottom: 20px;
}
}
.p-top-overview__heading .-img {
max-width: 832px;
}
@media screen and (max-width: 768px) {
.p-top-overview__heading .-img {
max-width: 316px;
margin-left: auto;
margin-right: auto;
}
}
.p-top-overview__list {
margin-top: 20px;
display: grid;
grid-template-columns: 0.8fr 1fr; /* 2列 */
grid-template-rows: repeat(4, auto); /* 4行 */
column-gap: 20px;
row-gap: 35px;
}
@media screen and (max-width: 768px) {
.p-top-overview__list {
grid-template-columns: 1fr;
grid-template-rows: unset;
row-gap: 0;
margin-top: unset;
}
}
.p-top-overview__list > *:nth-child(1) {
grid-area: 1 / 1;
}
.p-top-overview__list > *:nth-child(5) {
grid-area: 1 / 2;
}
.p-top-overview__list > *:nth-child(2) {
grid-area: 2 / 1;
}
.p-top-overview__list > *:nth-child(6) {
grid-area: 2 / 2;
}
.p-top-overview__list > *:nth-child(3) {
grid-area: 3 / 1;
}
.p-top-overview__list > *:nth-child(7) {
grid-area: 3 / 2;
}
.p-top-overview__list > *:nth-child(4) {
grid-area: 4 / 1;
}
@media screen and (max-width: 768px) {
.p-top-overview__list > *:nth-child(1) {
grid-area: auto;
}
.p-top-overview__list > *:nth-child(2) {
grid-area: auto;
background-color: color-mix(in srgb, #e84388 20%, transparent);
}
.p-top-overview__list > *:nth-child(3) {
grid-area: auto;
}
.p-top-overview__list > *:nth-child(4) {
background-color: color-mix(in srgb, #e84388 20%, transparent);
grid-area: auto;
}
.p-top-overview__list > *:nth-child(5) {
grid-area: auto;
}
.p-top-overview__list > *:nth-child(6) {
grid-area: auto;
background-color: color-mix(in srgb, #e84388 20%, transparent);
}
.p-top-overview__list > *:nth-child(7) {
grid-area: auto;
}
}
.p-top-overview__chara {
position: absolute;
top: -180px;
right: -3%;
width: 385px;
}
@media screen and (max-width: 1280px) {
.p-top-overview__chara {
display: none;
}
}
@media screen and (max-width: 1024px) {
.p-top-overview__chara {
display: block;
position: static;
display: grid;
place-items: center;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-bottom: 20px;
width: 100vw;
background-color: unset;
}
.p-top-overview__chara .-chara {
max-width: 190px;
}
}
@media screen and (max-width: 768px) {
.p-top-overview__chara {
background-color: color-mix(in srgb, #de739f 15%, transparent);
}
.p-top-overview__chara .-chara {
max-width: 190px;
}
}
.p-top-overview-item {
background-color: white;
border-radius: 20px;
padding: 10px 20px 20px;
}
@media screen and (max-width: 768px) {
.p-top-overview-item {
background-color: unset;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;
}
}
.p-top-overview-item__head {
display: grid;
grid-template-columns: 45px 1fr;
column-gap: 10px;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-top-overview-item__head {
grid-template-columns: 25px 1fr;
}
}
.p-top-overview-item__num {
align-self: flex-start;
}
.p-top-overview-item__heading {
color: #e84388;
font-size: 28px;
line-height: calc(50 / 40);
font-weight: 700;
padding-top: 0.2em;
letter-spacing: -0.1em;
}
@media screen and (max-width: 768px) {
.p-top-overview-item__heading {
padding-top: unset;
line-height: calc(26 / 15);
font-size: 19px;
}
}
.p-top-overview-item__body {
padding-top: 10px;
}
.p-top-overview-item__description {
font-weight: 500;
font-size: 19px;
line-height: calc(35 / 26);
text-align: justify;
}
@media screen and (max-width: 768px) {
.p-top-overview-item__description {
font-size: 14px;
line-height: calc(22 / 14);
}
}
@media screen and (max-width: 768px) {
.p-top-overview-item__heading {
line-height: calc(18 / 12);
font-size: 18px;
}
}
}
@layer page {
.p-top-reservation {
margin-top: -14%;
position: relative;
z-index: 2;
}
@media screen and (max-width: 768px) {
.p-top-reservation {
margin-top: unset;
}
}
.p-top-reservation__inner {
max-width: 1464px;
margin-left: auto;
margin-right: auto;
}
.p-top-reservation__layout {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.p-top-reservation__layout {
flex-direction: column-reverse;
}
}
.p-top-reservation__table {
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 768px) {
.p-top-reservation__table {
margin-bottom: unset;
padding-left: unset;
padding-right: unset;
}
}
.p-top-reservation__button {
display: grid;
place-items: center;
}
@media screen and (max-width: 768px) {
.p-top-reservation__button {
margin-top: 5px;
}
}
}
@layer page {
.p-top-wrap {
overflow: clip;
}
}
@layer javascript {
.js-animation._fade-in-up {
opacity: 0;
transition: opacity 1s, transform 1s cubic-bezier(0.23, 1, 0.32, 1);
transform: translateY(10.5rem);
}
.js-animation._fade-in-up._delay-02 {
transition-delay: 0.2s;
}
.js-animation._fade-in-up._delay-04 {
transition-delay: 0.4s;
}
@media screen and (max-width: 768px) {
.js-animation._fade-in-up._delay-02 {
transition-delay: 0;
}
.js-animation._fade-in-up._delay-04 {
transition-delay: 0;
}
}
.js-animation._fade-in-up._active {
opacity: 1;
transform: translateY(0);
}
}
@layer utility {
.u-visually-hidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.u-hidden {
display: none !important;
}
.u-overflow-hidden {
overflow: hidden;
}
.u-clamp-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--line-clamp);
overflow: hidden;
text-overflow: ellipsis;
}
.u-clear-fix::after {
clear: both;
content: "";
display: table;
}
@media screen and (max-width: 768px) {
.u-md-hidden {
display: none;
}
}
.u-md-visible {
display: none;
}
@media screen and (max-width: 768px) {
.u-md-visible {
display: revert;
}
}
@media screen and (max-width: 1024px) {
.u-lg-hidden {
display: none;
}
}
.u-lg-visible {
display: none;
}
@media screen and (max-width: 1024px) {
.u-lg-visible {
display: revert;
}
}
@media screen and (max-width: 1280px) {
.u-xl-hidden {
display: none;
}
}
.u-xl-visible {
display: none;
}
@media screen and (max-width: 1280px) {
.u-xl-visible {
display: revert;
}
}
.u-ib {
display: inline-block;
}
.u-block {
display: block;
}
.u-contents {
display: contents;
}
.u-delay-02 {
transition-delay: 0.2s;
}
.u-delay-04 {
transition-delay: 0.4s;
}
.u-underline {
text-decoration: underline;
}
.u-align-right {
text-align: right;
}
/* 一時的処理 */
.s-header-nav__list .menu-item._facility {
display: none;
}
.s-spmenu-nav__list .menu-item._facility {
display: none;
}
.u-temp-hidden {
display: none !important;
}
}