@charset "UTF-8";


:root {
--color-black: #323133;
--color-black-light: #3C3B3D;
--color-gray: #808080;
--color-gray-light: #B3B3B3;
--color-light-gray: #E6E9ED;
--color-light-gray-light: #F5F7FA;
--color-white: #fff;
--color-red: #BF263C;
--color-red-light: #D8334A;
--color-teal: #7DB1B1;
--color-teal-light: #A0CECB;
--color-blue: #4A89DC;
--color-blue-light: #5D9DEC;
--color-aqua: #3BAFDA;
--color-aqua-light: #4FC1E9;
--color-mint: #37BC9B;
--color-mint-light: #48CFAD;
--color-grass: #8CC152;
--color-grass-light: #A0D468;
--color-yellow: #F6BB42;
--color-yellow-light: #FFCE54;
--brand-light-2: #F0F9FE;
--brand-light-1: #46AAE4;
--brand: #158CBE;
--brand-accent: #FE8B00;
--brand-accent-dark: #d97802;
--accent-red: #F50057;
--accent-yellow: #F9A826;
--accent-green: #00BFA6;
--accent-purple: #6C63FF;
--accent-blue: #536DFE;
--accent-light-blue: #029de3;
--font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Helvetica Neue", "Segoe UI", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, "ヒラギノ角ゴ ProN W3", Meiryo, "M+ 1p", sans-serif;
--font-family-en: Poppins, Arial, Verdana, "Arial Black", sans-serif;
--border-radius-large: 12px;
--border-radius-middle: 8px;
--border-radius-small: 4px;
--border-radius-xsmall: 2px;
--shadow-border: 0 0 4px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 20px 40px rgb(52 67 65 / 30%);
--weight-normal: 400;
--weight-middle: 500;
--weight-bold: 700;
--weight-xbold: 900;
--fs-xxxx-large: 32px;
--fs-xxx-large: 30px;
--fs-xx-large: 28px;
--fs-x-large: 26px;
--fs-large: 24px;
--fs-xx-middle: 22px;
--fs-x-middle: 20px;
--fs-middle: 18px;
--fs-x-default: 16px;
--fs-default: 14px;
--fs-small: 12px;
--fs-x-small: 10px;
--space0: 0px;
--space1: 8px;
--space2: 16px;
--space3: 24px;
--space4: 32px;
--space5: 40px;
--space6: 48px;
--space7: 56px;
--space8: 64px;
--space9: 72px;
--space10: 80px;
--space11: 88px;
--space12: 96px;
--space13: 104px;
--space14: 112px;
--space15: 120px;
--transition: all .3s cubic-bezier(0, 1, .64, 1);
}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;
}
body {
line-height: 1;
}
article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary {
display: block;
}
ul, li {
list-style: none;
}
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
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 #000;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
margin: 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
a img {
border: none;
}
img {
vertical-align: top;
margin: 0;
padding: 0;
object-fit: cover;
}
iframe, video, img {
max-width: 100%;
}html {
scroll-behavior: smooth;
}
html,
body {
height: 100%;
}
body {
font-family: var(--font-family);
font-weight: var(--weight-normal);
font-size: var(--fs-default);
background: var(--brand-light-2);
text-align: center;
position: relative;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
line-height: 1.75;
overflow-x: hidden;
}
body * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-all;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-appearance: none;
letter-spacing: 0.03em;
}
a {
color: var(--accent-light-blue);
}
a:link {
color: var(--color-black);
text-decoration: none;
outline: none;
}
a:visited {
color: var(--color-black);
text-decoration: none;
outline: none;
}
a:hover {
color: var(--color-gray);
text-decoration: none;
outline: none;
}
.-btnBox {
background: var(--color-white);
color: var(--brand) !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0 16px;
padding: 16px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
text-decoration: none;
}
.-btnBox .-tel-icon__style {
background: var(--brand);
width: 34px;
height: 34px;
border-radius: 50rem;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.-btnBox .-tel-icon__style.-phone::before {
content: "";
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.16652%208.21651C5.76639%2011.7005%208.60916%2014.4619%2012.1382%2015.9598L12.7049%2016.2123C13.3324%2016.4918%2014.0384%2016.5408%2014.6985%2016.3507C15.3586%2016.1606%2015.9304%2015.7436%2016.3132%2015.1732L17.054%2014.0698C17.1699%2013.8968%2017.2169%2013.6866%2017.1856%2013.4807C17.1543%2013.2748%2017.047%2013.0881%2016.8849%2012.9573L14.3749%2010.9323C14.2874%2010.8619%2014.1867%2010.8098%2014.0786%2010.7792C13.9706%2010.7487%2013.8575%2010.7402%2013.7461%2010.7545C13.6347%2010.7687%2013.5274%2010.8053%2013.4305%2010.8621C13.3336%2010.9189%2013.2492%2010.9946%2013.1824%2011.0848L12.4057%2012.1323C10.412%2011.1477%208.79829%209.53368%207.81402%207.53984L8.86068%206.76318C8.95089%206.69631%209.02665%206.61191%209.08342%206.51503C9.14019%206.41815%209.17679%206.3108%209.19104%206.19942C9.20528%206.08804%209.19687%205.97494%209.1663%205.86689C9.13574%205.75885%209.08366%205.65809%209.01318%205.57068L6.98818%203.06068C6.85743%202.89856%206.67071%202.79127%206.4648%202.75996C6.25889%202.72865%206.04872%202.77558%205.87568%202.89151L4.76485%203.63651C4.19102%204.02133%203.77242%204.59735%203.58364%205.26198C3.39486%205.92661%203.44815%206.63667%203.73402%207.26568L4.16652%208.21651Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 22px auto;
width: 100%;
height: 100%;
position: absolute;
}
.-btnBox .-tel-icon__style.-pin::before {
content: "";
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_9030_1400)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.05599%205.8333C6.05615%205.04494%206.27996%204.2728%206.70144%203.60657C7.12291%202.94033%207.72474%202.40734%208.43704%202.06949C9.14933%201.73164%209.94286%201.6028%2010.7255%201.69793C11.5081%201.79307%2012.2476%202.10827%2012.8582%202.60693C13.4688%203.1056%2013.9254%203.76726%2014.175%204.51507C14.4246%205.26288%2014.4569%206.06615%2014.2682%206.83158C14.0795%207.59702%2013.6775%208.29321%2013.1089%208.8393C12.5403%209.38539%2011.8284%209.75896%2011.056%209.91663V14.1666C11.056%2014.3876%2010.9682%2014.5996%2010.8119%2014.7559C10.6556%2014.9122%2010.4437%2015%2010.2227%2015C10.0016%2015%209.78968%2014.9122%209.6334%2014.7559C9.47712%2014.5996%209.38932%2014.3876%209.38932%2014.1666V9.91663C8.44833%209.72423%207.60265%209.21278%206.99528%208.46874C6.3879%207.72471%206.05611%206.79376%206.05599%205.8333ZM8.13016%2013.4166C8.14673%2013.5249%208.14182%2013.6353%208.11568%2013.7416C8.08955%2013.848%208.04272%2013.9481%207.97787%2014.0364C7.91301%2014.1246%207.83141%2014.1992%207.73771%2014.2558C7.64402%2014.3125%207.54008%2014.3502%207.43182%2014.3666C6.36682%2014.5291%205.52099%2014.7741%204.96516%2015.0458C4.68599%2015.1825%204.52016%2015.3066%204.43432%2015.3975C4.42834%2015.4037%204.42251%2015.4101%204.41682%2015.4166C4.44432%2015.4491%204.49182%2015.4966%204.57516%2015.5575C4.80849%2015.73%205.19932%2015.92%205.75682%2016.0941C6.86266%2016.44%208.44182%2016.6666%2010.2227%2016.6666C12.0035%2016.6666%2013.5827%2016.44%2014.6885%2016.0941C15.2468%2015.92%2015.6368%2015.73%2015.8702%2015.5575C15.9535%2015.4966%2016.001%2015.4491%2016.0285%2015.4166C16.0228%2015.4101%2016.017%2015.4037%2016.011%2015.3975C15.9252%2015.3066%2015.7593%2015.1825%2015.4802%2015.0458C14.9243%2014.7741%2014.0785%2014.5291%2013.0135%2014.3666C12.904%2014.3516%2012.7987%2014.315%2012.7035%2014.2589C12.6084%2014.2028%2012.5253%2014.1283%2012.4592%2014.0398C12.3931%2013.9513%2012.3452%2013.8506%2012.3184%2013.7434C12.2915%2013.6362%2012.2863%2013.5248%2012.3029%2013.4156C12.3195%2013.3064%2012.3577%2013.2016%2012.4152%2013.1073C12.4727%2013.0129%2012.5484%2012.931%2012.6379%2012.8662C12.7273%2012.8014%2012.8288%2012.755%2012.9363%2012.7297C13.0439%2012.7045%2013.1554%2012.7009%2013.2643%2012.7191C14.421%2012.8941%2015.4493%2013.175%2016.2135%2013.5491C16.5943%2013.7358%2016.9502%2013.9658%2017.2202%2014.2508C17.4952%2014.54%2017.7227%2014.9341%2017.7227%2015.4166C17.7227%2016.0925%2017.286%2016.5833%2016.861%2016.8975C16.4193%2017.2241%2015.8335%2017.4825%2015.186%2017.685C13.8777%2018.0933%2012.1243%2018.3333%2010.2227%2018.3333C8.32099%2018.3333%206.56682%2018.0933%205.26016%2017.685C4.61182%2017.4825%204.02682%2017.2241%203.58516%2016.8975C3.15932%2016.5833%202.72266%2016.0925%202.72266%2015.4166C2.72266%2014.9333%202.95016%2014.54%203.22516%2014.25C3.49599%2013.965%203.85099%2013.7358%204.23182%2013.55C4.99599%2013.175%206.02516%2012.895%207.18016%2012.7191C7.28839%2012.7026%207.39884%2012.7075%207.50517%2012.7336C7.61151%2012.7597%207.71165%2012.8066%207.79988%2012.8714C7.88811%2012.9363%207.96269%2013.0179%208.01936%2013.1116C8.07603%2013.2053%208.11368%2013.3084%208.13016%2013.4166Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_9030_1400%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%20transform%3D%22translate(0.222656)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 22px auto;
width: 100%;
height: 100%;
position: absolute;
}
.-btnBox .-tel-icon__number {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
text-align: left;
}
.-btnBox .-tel-icon__number strong {
font-size: var(--fs-large);
font-weight: var(--weight-bold);
font-family: var(--font-family-en);
line-height: 1;
}
.-btnBox .-tel-icon__number small {
font-weight: var(--weight-bold);
font-size: var(--fs-small);
}
.-btnBox .-tel-icon__arrow {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2217%22%20height%3D%2244%22%20viewBox%3D%220%200%2017%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.222656%22%20y%3D%220.5%22%20width%3D%2216%22%20height%3D%2243%22%20rx%3D%228%22%20fill%3D%22%23F0F9FE%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.22534%2016.6665L11.5587%2021.9998L6.22534%2027.3332L4.88867%2025.9998L8.89201%2021.9998L4.88867%2017.9998L6.22534%2016.6665Z%22%20fill%3D%22%23158CBE%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center;
width: 16px;
height: 43px;
display: block;
}
.-btn-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.-btn-row .-btn {
position: relative;
-webkit-transition: var(--transition);
transition: var(--transition);
background: var(--brand-accent);
color: var(--color-white);
font-weight: var(--weight-bold);
font-size: var(--fs-x-default);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 24px 24px;
gap: 0 24px;
border-radius: 4px;
min-width: 300px;
-webkit-box-shadow: 0 6px 0px 0px #e07b00;
box-shadow: 0 6px 0px 0px #e07b00;
}
@media screen and (max-width: 768px) {
.-btn-row .-btn {
min-width: auto;
width: 100%;
padding: 24px 16px;
white-space: nowrap;
}
}
.-btn-row .-btn:hover {
-webkit-transform: translate3d(0, 4px, 0);
transform: translate3d(0, 4px, 0);
-webkit-box-shadow: none;
box-shadow: none;
}
.-btn-row .-btn .-btn-top__label {
position: absolute;
background: var(--color-white);
color: var(--brand-accent);
font-size: var(--fs-small);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
width: 90%;
border-radius: 50rem;
font-weight: 700;
padding: 2px 16px;
top: -13px;
left: 0;
right: 0;
margin: 0 auto;
}
.-btn-row .-btn::after {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%2212%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0027%206.6665L15.336%2011.9998L10.0027%2017.3332L8.66602%2015.9998L12.6693%2011.9998L8.66602%207.99984L10.0027%206.6665Z%22%20fill%3D%22%23FE8B00%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (max-width: 768px) {
.-btn-row .-btn::after {
width: 18px;
height: 18px;
}
}
.-common-head .-common-head__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: var(--brand);
gap: 4px 0;
}
.-common-head .-common-head__title .-small {
font-size: var(--fs-x-default);
font-weight: var(--weight-xbold);
}
@media screen and (max-width: 768px) {
.-common-head .-common-head__title .-small {
font-size: var(--fs-small);
}
}
.-common-head .-common-head__title .-large {
font-size: 40px;
font-weight: var(--weight-xbold);
line-height: 1.3;
}
@media screen and (max-width: 768px) {
.-common-head .-common-head__title .-large {
font-size: var(--fs-large);
}
}
.-common-head .-common-head__space {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2238%22%20height%3D%226%22%20viewBox%3D%220%200%2038%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23158CBE%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23158CBE%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23158CBE%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: 38px auto;
background-position: center;
width: 100%;
height: 6px;
display: block;
margin: 24px auto 0 auto;
}
.w-inner {
max-width: 1200px;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
position: relative;
}
@media (max-width: 768px) {
.w-inner {
max-width: 480px;
}
}
.w-inner-space {
padding-top: 80px;
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.w-inner-space {
padding-top: 56px;
padding-bottom: 56px;
}
}.opacity {
text-decoration: none;
transition: var(--transition);
}
.opacity a img,
.opacity a:hover img, .opacity:hover {
opacity: 0.8;
}
.w-auto {
width: auto !important;
max-width: 100% !important;
}
.w-full {
width: 100% !important;
max-width: 100% !important;
}
.w-75 {
width: 75% !important;
max-width: 100% !important;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 768px) {
.w-75 {
width: 100% !important;
}
}
.w-50 {
width: 50% !important;
max-width: 100% !important;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 768px) {
.w-50 {
width: 100% !important;
}
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.w-400 {
font-weight: 400;
}
.w-500 {
font-weight: 500;
}
.w-700 {
font-weight: 700;
}
.w-900 {
font-weight: 900;
}
.pc-block {
display: block !important;
}
@media screen and (max-width: 768px) {
.pc-block {
display: none !important;
}
}
.sp-block {
display: none;
}
@media screen and (max-width: 768px) {
.sp-block {
display: block !important;
}
}
.pc-flex {
display: flex !important;
}
@media screen and (max-width: 768px) {
.pc-flex {
display: none !important;
}
}
.sp-flex {
display: none;
}
@media screen and (max-width: 768px) {
.sp-flex {
display: flex !important;
}
}
.pc-inline-flex {
display: inline-flex !important;
}
@media screen and (max-width: 768px) {
.pc-inline-flex {
display: none !important;
}
}
.sp-inline-flex {
display: none;
}
@media screen and (max-width: 768px) {
.sp-inline-flex {
display: inline-flex !important;
}
}
.mt0 {
margin-top: 0px !important;
}
.mt1 {
margin-top: 8px !important;
}
.mt2 {
margin-top: 16px !important;
}
.mt3 {
margin-top: 24px !important;
}
.mt4 {
margin-top: 32px !important;
}
.mt5 {
margin-top: 40px !important;
}
.mt6 {
margin-top: 48px !important;
}
.mt7 {
margin-top: 56px !important;
}
.mt8 {
margin-top: 64px !important;
}
.mt9 {
margin-top: 72px !important;
}
.mt10 {
margin-top: 80px !important;
}
.mt11 {
margin-top: 88px !important;
}
.mt12 {
margin-top: 96px !important;
}
.mt13 {
margin-top: 104px !important;
}
.mt14 {
margin-top: 112px !important;
}
.mt15 {
margin-top: 120px !important;
}
.mt16 {
margin-top: 128px !important;
}
.mt17 {
margin-top: 136px !important;
}
.mt18 {
margin-top: 144px !important;
}
.mt19 {
margin-top: 152px !important;
}
.mt20 {
margin-top: 160px !important;
}
@media (max-width: 768px) {
.mt1 {
margin-top: calc(8px / 1.5) !important;
}
.mt2 {
margin-top: calc(16px / 1.5) !important;
}
.mt3 {
margin-top: calc(24px / 1.5) !important;
}
.mt4 {
margin-top: calc(32px / 1.5) !important;
}
.mt5 {
margin-top: calc(40px / 1.5) !important;
}
.mt6 {
margin-top: calc(48px / 1.5) !important;
}
.mt7 {
margin-top: calc(56px / 1.5) !important;
}
.mt8 {
margin-top: calc(64px / 1.5) !important;
}
.mt9 {
margin-top: calc(72px / 1.5) !important;
}
.mt10 {
margin-top: calc(80px / 1.5) !important;
}
.mt11 {
margin-top: calc(88px / 1.5) !important;
}
.mt12 {
margin-top: calc(96px / 1.5) !important;
}
.mt13 {
margin-top: calc(104px / 1.5) !important;
}
.mt14 {
margin-top: calc(112px / 1.5) !important;
}
.mt15 {
margin-top: calc(120px / 1.5) !important;
}
.mt16 {
margin-top: calc(128px / 1.5) !important;
}
.mt17 {
margin-top: calc(136px / 1.5) !important;
}
.mt18 {
margin-top: calc(144px / 1.5) !important;
}
.mt19 {
margin-top: calc(152px / 1.5) !important;
}
.mt20 {
margin-top: calc(160px / 1.5) !important;
}
}
.mb0 {
margin-bottom: 0px !important;
}
.mb1 {
margin-bottom: 8px !important;
}
.mb2 {
margin-bottom: 16px !important;
}
.mb3 {
margin-bottom: 24px !important;
}
.mb4 {
margin-bottom: 32px !important;
}
.mb5 {
margin-bottom: 40px !important;
}
.mb6 {
margin-bottom: 48px !important;
}
.mb7 {
margin-bottom: 56px !important;
}
.mb8 {
margin-bottom: 64px !important;
}
.mb9 {
margin-bottom: 72px !important;
}
.mb10 {
margin-bottom: 80px !important;
}
.mb11 {
margin-bottom: 88px !important;
}
.mb12 {
margin-bottom: 96px !important;
}
.mb13 {
margin-bottom: 104px !important;
}
.mb14 {
margin-bottom: 112px !important;
}
.mb15 {
margin-bottom: 120px !important;
}
.mb16 {
margin-bottom: 128px !important;
}
.mb17 {
margin-bottom: 136px !important;
}
.mb18 {
margin-bottom: 144px !important;
}
.mb19 {
margin-bottom: 152px !important;
}
.mb20 {
margin-bottom: 160px !important;
}
@media (max-width: 768px) {
.mb1 {
margin-bottom: calc(8px / 1.5) !important;
}
.mb2 {
margin-bottom: calc(16px / 1.5) !important;
}
.mb3 {
margin-bottom: calc(24px / 1.5) !important;
}
.mb4 {
margin-bottom: calc(32px / 1.5) !important;
}
.mb5 {
margin-bottom: calc(40px / 1.5) !important;
}
.mb6 {
margin-bottom: calc(48px / 1.5) !important;
}
.mb7 {
margin-bottom: calc(56px / 1.5) !important;
}
.mb8 {
margin-bottom: calc(64px / 1.5) !important;
}
.mb9 {
margin-bottom: calc(72px / 1.5) !important;
}
.mb10 {
margin-bottom: calc(80px / 1.5) !important;
}
.mb11 {
margin-bottom: calc(88px / 1.5) !important;
}
.mb12 {
margin-bottom: calc(96px / 1.5) !important;
}
.mb13 {
margin-bottom: calc(104px / 1.5) !important;
}
.mb14 {
margin-bottom: calc(112px / 1.5) !important;
}
.mb15 {
margin-bottom: calc(120px / 1.5) !important;
}
.mb16 {
margin-bottom: calc(128px / 1.5) !important;
}
.mb17 {
margin-bottom: calc(136px / 1.5) !important;
}
.mb18 {
margin-bottom: calc(144px / 1.5) !important;
}
.mb19 {
margin-bottom: calc(152px / 1.5) !important;
}
.mb20 {
margin-bottom: calc(160px / 1.5) !important;
}
}
.pt0 {
padding-top: 0px !important;
}
.pt1 {
padding-top: 8px !important;
}
.pt2 {
padding-top: 16px !important;
}
.pt3 {
padding-top: 24px !important;
}
.pt4 {
padding-top: 32px !important;
}
.pt5 {
padding-top: 40px !important;
}
.pt6 {
padding-top: 48px !important;
}
.pt7 {
padding-top: 56px !important;
}
.pt8 {
padding-top: 64px !important;
}
.pt9 {
padding-top: 72px !important;
}
.pt10 {
padding-top: 80px !important;
}
.pt11 {
padding-top: 88px !important;
}
.pt12 {
padding-top: 96px !important;
}
.pt13 {
padding-top: 104px !important;
}
.pt14 {
padding-top: 112px !important;
}
.pt15 {
padding-top: 120px !important;
}
.pt16 {
padding-top: 128px !important;
}
.pt17 {
padding-top: 136px !important;
}
.pt18 {
padding-top: 144px !important;
}
.pt19 {
padding-top: 152px !important;
}
.pt20 {
padding-top: 160px !important;
}
@media (max-width: 768px) {
.pt1 {
padding-top: calc(8px / 1.5) !important;
}
.pt2 {
padding-top: calc(16px / 1.5) !important;
}
.pt3 {
padding-top: calc(24px / 1.5) !important;
}
.pt4 {
padding-top: calc(32px / 1.5) !important;
}
.pt5 {
padding-top: calc(40px / 1.5) !important;
}
.pt6 {
padding-top: calc(48px / 1.5) !important;
}
.pt7 {
padding-top: calc(56px / 1.5) !important;
}
.pt8 {
padding-top: calc(64px / 1.5) !important;
}
.pt9 {
padding-top: calc(72px / 1.5) !important;
}
.pt10 {
padding-top: calc(80px / 1.5) !important;
}
.pt11 {
padding-top: calc(88px / 1.5) !important;
}
.pt12 {
padding-top: calc(96px / 1.5) !important;
}
.pt13 {
padding-top: calc(104px / 1.5) !important;
}
.pt14 {
padding-top: calc(112px / 1.5) !important;
}
.pt15 {
padding-top: calc(120px / 1.5) !important;
}
.pt16 {
padding-top: calc(128px / 1.5) !important;
}
.pt17 {
padding-top: calc(136px / 1.5) !important;
}
.pt18 {
padding-top: calc(144px / 1.5) !important;
}
.pt19 {
padding-top: calc(152px / 1.5) !important;
}
.pt20 {
padding-top: calc(160px / 1.5) !important;
}
}
.pb0 {
padding-bottom: 0px !important;
}
.pb1 {
padding-bottom: 8px !important;
}
.pb2 {
padding-bottom: 16px !important;
}
.pb3 {
padding-bottom: 24px !important;
}
.pb4 {
padding-bottom: 32px !important;
}
.pb5 {
padding-bottom: 40px !important;
}
.pb6 {
padding-bottom: 48px !important;
}
.pb7 {
padding-bottom: 56px !important;
}
.pb8 {
padding-bottom: 64px !important;
}
.pb9 {
padding-bottom: 72px !important;
}
.pb10 {
padding-bottom: 80px !important;
}
.pb11 {
padding-bottom: 88px !important;
}
.pb12 {
padding-bottom: 96px !important;
}
.pb13 {
padding-bottom: 104px !important;
}
.pb14 {
padding-bottom: 112px !important;
}
.pb15 {
padding-bottom: 120px !important;
}
.pb16 {
padding-bottom: 128px !important;
}
.pb17 {
padding-bottom: 136px !important;
}
.pb18 {
padding-bottom: 144px !important;
}
.pb19 {
padding-bottom: 152px !important;
}
.pb20 {
padding-bottom: 160px !important;
}
@media (max-width: 768px) {
.pb1 {
padding-bottom: calc(8px / 1.5) !important;
}
.pb2 {
padding-bottom: calc(16px / 1.5) !important;
}
.pb3 {
padding-bottom: calc(24px / 1.5) !important;
}
.pb4 {
padding-bottom: calc(32px / 1.5) !important;
}
.pb5 {
padding-bottom: calc(40px / 1.5) !important;
}
.pb6 {
padding-bottom: calc(48px / 1.5) !important;
}
.pb7 {
padding-bottom: calc(56px / 1.5) !important;
}
.pb8 {
padding-bottom: calc(64px / 1.5) !important;
}
.pb9 {
padding-bottom: calc(72px / 1.5) !important;
}
.pb10 {
padding-bottom: calc(80px / 1.5) !important;
}
.pb11 {
padding-bottom: calc(88px / 1.5) !important;
}
.pb12 {
padding-bottom: calc(96px / 1.5) !important;
}
.pb13 {
padding-bottom: calc(104px / 1.5) !important;
}
.pb14 {
padding-bottom: calc(112px / 1.5) !important;
}
.pb15 {
padding-bottom: calc(120px / 1.5) !important;
}
.pb16 {
padding-bottom: calc(128px / 1.5) !important;
}
.pb17 {
padding-bottom: calc(136px / 1.5) !important;
}
.pb18 {
padding-bottom: calc(144px / 1.5) !important;
}
.pb19 {
padding-bottom: calc(152px / 1.5) !important;
}
.pb20 {
padding-bottom: calc(160px / 1.5) !important;
}
}
.w-header-small {
background: var(--brand);
color: var(--color-white);
}
.w-header-small__inner {
padding: 4px 40px;
text-align: left;
}
@media screen and (max-width: 768px) {
.w-header-small__inner {
display: none;
}
}
.w-header-small__inner p {
font-size: var(--fs-x-small);
}
.w-header {
padding: 0 40px;
}
@media screen and (max-width: 768px) {
.w-header {
padding: 0 16px;
width: 100%;
z-index: 10;
}
}
.w-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.w-header__inner .-logo {
max-width: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.w-header__inner .-logo {
max-width: 170px;
}
}
.w-header__inner .-tel {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.w-header__inner .-btnBox {
gap: 0 2px;
padding: 8px 8px 8px 6px;
}
.w-header__inner .-btnBox .-tel-icon__style {
transform: scale(0.7);
}
.w-header__inner .-btnBox .-tel-icon__arrow {
display: none;
}
.w-header__inner .-btnBox .-tel-icon__number {
line-height: 1;
}
.w-header__inner .-btnBox .-tel-icon__number strong {
font-size: 13px;
white-space: nowrap;
}
.w-header__inner .-btnBox .-tel-icon__number small {
font-size: 9px;
}
}
.w-visual {
position: relative;
height: 506px;
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.w-visual {
height: auto;
}
}
.w-visual-inner {
position: static;
}
@media screen and (max-width: 768px) {
.w-visual-inner {
position: relative;
}
}
.w-visual-inner .-visual-info {
position: relative;
}
@media screen and (max-width: 768px) {
.w-visual-inner .-visual-info {
margin: -24px auto 0 auto;
}
}
.w-visual-inner .-visual-info .-head {
text-align: justify;
}
.w-visual-inner .-visual-info .-head .-head-text {
display: inline;
line-height: 1.3;
font-size: 58px;
vertical-align: bottom;
letter-spacing: 2px;
font-weight: var(--weight-xbold);
background: linear-gradient(to top, #fff 0, var(--brand) 0);
color: var(--color-white);
margin: 0;
letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
.w-visual-inner .-visual-info .-head .-head-text {
font-size: 32px;
}
}
.w-visual-inner .-visual-info .-head .-head-description {
color: var(--brand);
font-size: var(--fs-middle);
font-weight: var(--weight-xbold);
margin: 16px 0 0 0;
letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
.w-visual-inner .-visual-info .-head .-head-description {
font-size: var(--fs-default);
}
}
.w-visual-inner .-visual-info .-btn-row {
margin: 32px auto 0 0;
}
.w-visual-inner .-visual-info .-btn-row .-btn {
min-width: 360px;
font-size: var(--fs-x-middle);
}
@media screen and (max-width: 768px) {
.w-visual-inner .-visual-info .-btn-row .-btn {
min-width: auto;
}
}
.w-visual-inner .-visual-image {
max-width: 770px;
width: 100%;
border: 8px solid var(--brand);
position: absolute;
right: 0;
top: 0;
}
@media screen and (max-width: 768px) {
.w-visual-inner .-visual-image {
position: relative;
margin: 0 -16px;
width: auto;
}
}
.w-medical-body .-medical-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 32px;
grid-row-gap: 32px;
justify-content: center;
}
.w-medical-body .-medical-list__item {
background: var(--color-white);
border-radius: var(--border-radius-middle);
padding: 24px;
}
@media screen and (max-width: 768px) {
.w-medical-body .-medical-list__item {
padding: 16px;
}
}
.w-medical-body .-medical-list__item dl dt {
background: var(--brand-light-2);
color: var(--brand);
font-size: var(--fs-middle);
border-radius: var(--border-radius-middle);
font-weight: var(--weight-xbold);
padding: 6px 24px;
margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
.w-medical-body .-medical-list__item dl dt {
font-size: var(--fs-default);
padding: 4px 16px;
margin-bottom: 8px;
}
}
.w-medical-body .-medical-list__item dl dd {
color: var(--color-gray);
text-align: justify;
position: relative;
padding: 0 0 0 12px;
}
@media screen and (max-width: 768px) {
.w-medical-body .-medical-list__item dl dd {
font-size: var(--fs-small);
}
}
.w-medical-body .-medical-list__item dl dd::before {
content: "";
width: 5px;
height: 5px;
background: var(--brand);
border-radius: 50rem;
position: absolute;
left: 0;
top: 10px;
}
@media screen and (max-width: 768px) {
.w-medical-body .-medical-list__item dl dd::before {
width: 4px;
height: 4px;
top: 9px;
}
}
.w-cta-inner {
background: url(//kinswith-vet.com/wp-content/themes/kinswith-2.2.9/assets@LP_watanabe/img/lp/bg-cta.webp) no-repeat center;
padding: 80px 64px;
border-radius: var(--border-radius-middle);
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.w-cta-inner {
padding: 32px 16px;
flex-direction: column;
gap: 32px 0;
margin: 0 -16px;
border-radius: 0;
}
}
.w-cta-inner::before {
content: "";
background: rgba(21, 140, 190, 0.6);
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.w-cta-inner .-cta-description {
position: relative;
font-size: var(--fs-large);
font-weight: var(--weight-xbold);
color: var(--color-white);
text-align: left;
line-height: 1.6;
}
@media screen and (max-width: 768px) {
.w-cta-inner .-cta-description {
font-size: var(--fs-x-default);
}
}
.w-cta-inner .-btn-row {
position: relative;
}
.w-reason-body .-reason-list {
display: flex;
margin: 0 -16px;
}
@media screen and (max-width: 768px) {
.w-reason-body .-reason-list {
flex-direction: column;
gap: 40px 0;
margin: 0 auto;
}
}
.w-reason-body .-reason-list__item {
width: 33.33%;
padding: 0 16px;
text-align: justify;
display: flex;
flex-direction: column;
gap: 16px 0;
}
@media screen and (max-width: 768px) {
.w-reason-body .-reason-list__item {
width: 100%;
padding: 0;
gap: 12px 0;
}
}
.w-reason-body .-reason-list__item figure img {
border-radius: var(--border-radius-middle);
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.w-reason-body .-reason-list__item figure {
order: 2;
margin-top: 8px;
}
}
.w-reason-body .-reason-list__item h3 {
color: var(--brand);
font-size: var(--fs-x-middle);
font-weight: var(--weight-xbold);
line-height: 1.5;
margin-top: 8px;
}
@media screen and (max-width: 768px) {
.w-reason-body .-reason-list__item h3 {
font-size: var(--fs-x-middle);
order: 1;
margin-top: 0;
text-align: center;
}
}
.w-reason-body .-reason-list__item p {
color: var(--color-gray);
font-size: var(--fs-default);
}
@media screen and (max-width: 768px) {
.w-reason-body .-reason-list__item p {
margin-top: 8px;
order: 3;
}
}
.w-example-body .-example-section .-example-section__title {
background: #C9E8F9;
font-size: var(--fs-large);
border-radius: var(--border-radius-middle);
color: var(--brand);
font-weight: var(--weight-xbold);
padding: 10px 16px;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__title {
font-size: var(--fs-middle);
}
}
.w-example-body .-example-section .-example-section__containerInner {
display: flex;
align-items: start;
position: relative;
gap: 0 64px;
margin: 48px auto 0 auto;
}
@media screen and (max-width: 992px) {
.w-example-body .-example-section .-example-section__containerInner {
gap: 0 32px;
margin-top: 32px;
}
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerInner {
display: block;
}
}
.w-example-body .-example-section .-example-section__containerNav {
max-width: 250px;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px 0;
position: sticky;
top: 32px;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerNav {
max-width: 100%;
top: 0;
position: relative;
}
}
.w-example-body .-example-section .-example-section__containerNav li {
width: 100%;
}
.w-example-body .-example-section .-example-section__containerNav li a {
transition: var(--transition);
border: 2px solid var(--brand);
border-radius: var(--border-radius-middle);
background: var(--color-white);
color: var(--color-black);
display: flex;
align-items: center;
position: relative;
padding: 20px 40px 20px 16px;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerNav li a {
padding: 12px 40px 12px 16px;
}
}
.w-example-body .-example-section .-example-section__containerNav li a:hover {
background: var(--brand-light-2);
color: var(--brand);
}
.w-example-body .-example-section .-example-section__containerNav li a p {
display: flex;
flex-direction: column;
width: 100%;
gap: 4px 0;
line-height: 1;
text-align: left;
}
.w-example-body .-example-section .-example-section__containerNav li a p::after {
content: "";
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%2212%22%20fill%3D%22%2346AAE4%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0027%206.66675L15.336%2012.0001L10.0027%2017.3334L8.66602%2016.0001L12.6693%2012.0001L8.66602%208.00008L10.0027%206.66675Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
width: 24px;
height: 24px;
position: absolute;
right: 16px;
top: 0;
bottom: 0;
margin: auto 0;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerNav li a p::after {
transform: rotate(90deg);
}
}
.w-example-body .-example-section .-example-section__containerNav li a small {
font-size: 9px;
line-height: 1.4;
font-weight: var(--weight-bold);
}
.w-example-body .-example-section .-example-section__containerNav li a strong {
line-height: 1.2;
font-size: var(--fs-x-default);
font-weight: var(--weight-bold);
}
.w-example-body .-example-section .-example-section__containerHeader {
display: flex;
align-items: center;
gap: 0 32px;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerHeader {
flex-direction: column;
margin: 32px auto 0 auto;
}
}
.w-example-body .-example-section .-example-section__containerHeader .-header-image {
max-width: 352px;
width: 100%;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerHeader .-header-image {
max-width: 100%;
}
}
.w-example-body .-example-section .-example-section__containerHeader .-header-image img {
border-radius: var(--border-radius-middle);
}
.w-example-body .-example-section .-example-section__containerHeader .-header-info {
width: 100%;
text-align: justify;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerHeader .-header-info {
margin: 16px 0 0 0;
}
}
.w-example-body .-example-section .-example-section__containerHeader .-header-info h4 {
font-size: var(--fs-x-middle);
color: var(--brand);
font-weight: var(--weight-xbold);
line-height: 1.4;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerHeader .-header-info h4 {
font-size: var(--fs-middle);
}
}
.w-example-body .-example-section .-example-section__containerHeader .-header-info p {
color: var(--color-gray);
margin: 12px 0 0 0;
}
.w-example-body .-example-section .-example-section__containerHeader + .-example-section__containerNav {
max-width: 100%;
margin: 32px auto 0 auto;
position: relative;
top: 0;
display: none;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerHeader + .-example-section__containerNav {
display: flex;
}
}
.w-example-body .-example-section .-example-section__containerMain {
width: 100%;
}
.w-example-body .-example-section .-example-section__containerMain .-section-item {
padding: 32px 0 0 0;
margin: 32px 0 0 0;
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__title {
line-height: 1;
display: flex;
flex-direction: column;
text-align: left;
gap: 8px 0;
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__title span {
font-size: var(--fs-x-small);
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__title strong {
font-size: var(--fs-large);
font-weight: var(--weight-xbold);
line-height: 1.2;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__title strong {
font-size: var(--fs-x-middle);
}
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__image {
margin: 24px 0 0 0;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__image {
margin-top: 16px;
}
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab {
margin: 24px 0 0 0;
text-align: justify;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab {
margin-top: 16px;
}
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabHead {
display: flex;
gap: 0 6px;
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabHead li {
background: var(--color-white);
font-size: var(--fs-default);
font-weight: var(--weight-bold);
color: var(--color-gray);
cursor: pointer;
padding: 12px 32px;
border-radius: 4px 4px 0 0;
border: 1px solid var(--color-light-gray);
position: relative;
top: 1px;
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabHead li {
padding: 8px 24px;
}
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabHead li.is-active {
color: var(--brand);
border-bottom: none;
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabBody {
background: var(--color-white);
color: var(--color-gray);
border-radius: 0 8px 8px 8px;
padding: 16px 24px 24px 24px;
border: 1px solid var(--color-light-gray);
}
@media screen and (max-width: 768px) {
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabBody {
padding: 12px 16px 16px 16px;
}
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabBody .-section-item__tabBody-item {
display: none;
}
.w-example-body .-example-section .-example-section__containerMain .-section-item .-section-item__tab .-section-item__tabBody .-section-item__tabBody-item.is-show {
display: block;
}
.w-staff-body .-staff-list {
display: flex;
flex-direction: column;
gap: 16px 0;
}
.w-staff-body .-staff-list .-staff-list__item {
background: var(--color-white);
border-radius: var(--border-radius-middle);
padding: 40px;
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item {
padding: 16px;
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemContainer {
display: flex;
gap: 0 32px;
position: relative;
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemContainer {
flex-direction: column;
gap: 0;
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemImage {
width: 240px;
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemImage {
width: 100px;
margin: 0 auto 0 0;
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemImage img {
border-radius: var(--border-radius-middle);
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo {
text-align: justify;
width: 100%;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo h3 {
font-weight: var(--weight-bold);
display: flex;
flex-direction: column;
gap: 12px 0;
line-height: 1;
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo h3 {
position: absolute;
left: 120px;
top: 32px;
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo h3 span {
font-size: var(--fs-small);
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo h3 strong {
font-size: var(--fs-large);
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo h3 strong {
font-size: var(--fs-middle);
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history {
display: flex;
margin: 0 -16px;
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history {
flex-direction: column;
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history-item {
max-width: 50%;
width: 100%;
padding: 0 16px;
margin: 16px 0 0 0;
}
@media screen and (max-width: 768px) {
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history-item {
max-width: 100%;
}
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history-item h4 {
font-size: var(--fs-default);
font-weight: var(--weight-bold);
padding: 0 0 4px 0;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history-item dl {
color: var(--color-gray);
font-size: var(--fs-small);
display: flex;
gap: 0 16px;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history-item dl dt {
width: 120px;
font-weight: var(--weight-middle);
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemInfo .-history-item dl dd {
width: 100%;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-ac__btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brand);
background: var(--brand-light-2);
font-size: small;
font-weight: var(--weight-bold);
padding: 8px 24px;
border-radius: var(--border-radius-middle);
margin: 16px auto 0 0;
cursor: pointer;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-ac__btn .close {
display: none;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-ac__btn.is-open {
display: none;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-ac__btn.is-open .open {
display: none;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-ac__btn.is-open .close {
display: block;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemCase {
transition: var(--transition);
text-align: justify;
flex-direction: column;
gap: 16px 0;
margin: 24px 0 0 0;
display: none;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemCase.is-open {
display: flex;
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemCase dl dt {
font-weight: var(--weight-bold);
}
.w-staff-body .-staff-list .-staff-list__item .-staff-list__itemCase dl dd {
font-size: var(--fs-small);
color: var(--color-gray);
margin: 4px 0 0 0;
}
.w-first-body {
background: var(--color-white);
padding: 32px;
border-radius: var(--border-radius-middle);
}
@media screen and (max-width: 768px) {
.w-first-body {
padding: 16px;
}
}
.w-first-body .-first-contact {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0 32px;
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact {
flex-direction: column;
gap: 16px 0;
}
}
.w-first-body .-first-contact__text {
color: var(--brand);
text-align: justify;
width: 100%;
}
.w-first-body .-first-contact__text h3 {
font-size: var(--fs-x-middle);
font-weight: var(--weight-xbold);
}
.w-first-body .-first-contact__text p {
font-weight: var(--weight-bold);
margin: 8px 0 0 0;
}
.w-first-body .-first-contact__btn {
width: 100%;
}
.w-first-body .-first-contact__btn .-btn-row {
gap: 0 8px;
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact__btn .-btn-row {
flex-direction: column;
gap: 8px 0;
}
}
.w-first-body .-first-contact__btn .-btn {
min-width: 260px;
}
.w-first-body .-first-contact__btn .-btnTel {
color: var(--brand);
border: 2px solid var(--brand);
background: var(--color-white);
padding: 16px;
border-radius: 4px;
}
.w-first-body .-first-contact__btn .-btnTel b {
text-align: center;
font-size: var(--fs-small);
line-height: 1.7;
display: block;
}
.w-first-body .-first-contact__btn .-btnTel .-btnBox {
box-shadow: none;
padding: 0;
margin: 8px 0 0 0;
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact__btn .-btnTel .-btnBox {
justify-content: space-between;
}
}
.w-first-body .-first-contact__btn .-btnTel .-btnBox strong {
font-size: 18px;
white-space: nowrap;
}
.w-first-body .-first-contact__list {
text-align: justify;
margin: 32px auto 0 auto;
}
.w-first-body .-first-contact__list h4 {
font-size: var(--fs-x-middle);
font-weight: var(--weight-xbold);
}
.w-first-body .-first-contact__list ul {
display: flex;
flex-wrap: wrap;
margin: 16px -8px 0 -8px;
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact__list ul {
gap: 24px 0;
margin-top: 8px;
}
}
.w-first-body .-first-contact__list ul li {
width: 25%;
padding: 0 8px;
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact__list ul li {
width: 50%;
}
}
.w-first-body .-first-contact__list ul li h5 {
margin: 12px 0 0 0;
font-size: var(--fs-x-default);
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact__list ul li h5 {
font-size: var(--fs-default);
margin-top: 8px;
}
}
.w-first-body .-first-contact__list ul li p {
font-size: var(--fs-x-small);
color: var(--color-gray);
}
.w-first-body .-first-contact__message {
text-align: justify;
margin: 32px 0 0 0;
background: var(--brand-light-2);
padding: 24px;
border-radius: var(--border-radius-middle);
}
@media screen and (max-width: 768px) {
.w-first-body .-first-contact__message {
padding: 16px;
margin-top: 24px;
}
}
.w-first-body .-first-contact__message h4 {
font-size: var(--fs-x-default);
}
.w-first-body .-first-contact__message ul {
color: var(--color-gray);
margin: 8px 0 0 0;
}
.w-first-body .-first-contact__message ul li {
font-size: var(--fs-small);
list-style: disc;
list-style-position: inside;
text-indent: -17px;
padding: 0 0 0 22px;
line-height: 1.6;
}
.w-first-body .-first-contact__message ul li + li {
margin-top: 4px;
}
.w-footer {
background: var(--color-white);
}
.w-footer__primary {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.w-footer__primary {
flex-direction: column;
}
}
.w-footer__primary .-logo {
display: flex;
align-items: center;
justify-content: center;
max-width: 300px;
width: 100%;
}
@media screen and (max-width: 768px) {
.w-footer__primary .-logo {
margin: 0 auto;
}
}
.w-footer__primary .-btns {
display: flex;
align-items: center;
gap: 0 8px;
}
@media screen and (max-width: 768px) {
.w-footer__primary .-btns {
flex-direction: column;
gap: 8px 0;
margin: 40px auto 0 auto;
width: 100%;
}
.w-footer__primary .-btns a {
width: 100%;
justify-content: space-between;
}
}
.w-footer__secondary {
display: flex;
gap: 0 24px;
margin: 32px auto 0 auto;
}
@media screen and (max-width: 768px) {
.w-footer__secondary {
flex-direction: column;
gap: 16px 0;
}
}
.w-footer__secondary .-secondary-clinicInfo {
width: 100%;
}
.w-footer__secondary .-secondary-clinicMap {
width: 100%;
max-width: 500px;
}
.w-footer__secondary .-secondary-clinicMap iframe {
border-radius: 8px;
}
.w-footer-small {
background: var(--brand);
text-align: justify;
padding: 8px 0;
overflow: hidden;
}
.w-footer-small p {
color: var(--color-white);
font-size: var(--fs-x-small);
white-space: nowrap;
text-overflow: ellipsis;
}
.w-fixed__btn {
transition: var(--transition);
width: 100%;
position: fixed;
right: 0;
left: 0;
bottom: 0;
margin: 0 auto;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0 12px 0;
background: var(--color-white);
box-shadow: 0 20px 40px rgba(52, 67, 65, 0.3);
}
@media screen and (max-width: 768px) {
.w-fixed__btn {
padding: 6px 16px 10px 16px;
}
}
.w-fixed__btn.is-view {
transform: translateY(100px);
}
.w-fixed__btn.-btn-row .-btn {
max-width: 480px;
width: 100%;
height: 60px;
background: #1D5D9B;
box-shadow: 0 3px 0px 0px #123d67;
font-size: var(--fs-middle);
}
.w-fixed__btn.-btn-row .-btn .-btn-top__label {
background: var(--color-white);
color: var(--brand);
}
.w-fixed__btn.-btn-row .-btn span {
position: relative;
top: 4px;
}
@media screen and (max-width: 768px) {
.w-fixed__btn.-btn-row .-btn span {
font-size: var(--fs-x-default);
top: 2px;
}
}
@media screen and (max-width: 768px) {
.w-fixed__btn.-btn-row .-btn {
font-size: var(--fs-small);
height: 48px;
padding: 20px 8px 16px 16px;
}
.w-fixed__btn.-btn-row .-btn .-btn-top__label {
color: #1D5D9B;
top: -10px;
padding: 1px 16px;
font-size: var(--fs-x-small);
letter-spacing: 1px;
}
}
.w-fixed__btn.-btn-row .-btn::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%2212%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0027%206.6665L15.336%2011.9998L10.0027%2017.3332L8.66602%2015.9998L12.6693%2011.9998L8.66602%207.99984L10.0027%206.6665Z%22%20fill%3D%22%23FE8B00%22%2F%3E%3C%2Fsvg%3E");
}
@media screen and (max-width: 768px) {
.w-fixed__btn.-btn-row .-btn::after {
content: "";
transform: scale(0.6);
}
}