@charset "UTF-8";
.c-CaptionSlider__Dot, .c-ImageBox__Dot, .c-SliderList__Dot, .c-SliderPagination__Dot {
  position: relative;
  z-index: 0;
  cursor: pointer;
}

.c-CaptionSlider__Dot::after, .c-ImageBox__Dot::after, .c-SliderList__Dot::after, .c-SliderPagination__Dot::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--c-ImageBox__Dot--Color, #8EA2C6);
}

.-Active.c-CaptionSlider__Dot, .-Active.c-ImageBox__Dot, .-Active.c-SliderList__Dot, .-Active.c-SliderPagination__Dot {
  --c-ImageBox__Dot--Color: #0A2B82;
}

@media (min-width: 1024.1px) {
  .c-CaptionSlider__Dot:hover, .c-ImageBox__Dot:hover, .c-SliderList__Dot:hover, .c-SliderPagination__Dot:hover {
    --c-ImageBox__Dot--Color: #0A2B82;
  }
}

.c-CaptionSlider__Dot + .c-CaptionSlider__Dot, .c-ImageBox__Dot + .c-CaptionSlider__Dot, .c-SliderList__Dot + .c-CaptionSlider__Dot, .c-SliderPagination__Dot + .c-CaptionSlider__Dot, .c-CaptionSlider__Dot + .c-ImageBox__Dot, .c-ImageBox__Dot + .c-ImageBox__Dot, .c-SliderList__Dot + .c-ImageBox__Dot, .c-SliderPagination__Dot + .c-ImageBox__Dot, .c-CaptionSlider__Dot + .c-SliderList__Dot, .c-ImageBox__Dot + .c-SliderList__Dot, .c-SliderList__Dot + .c-SliderList__Dot, .c-SliderPagination__Dot + .c-SliderList__Dot, .c-CaptionSlider__Dot + .c-SliderPagination__Dot, .c-ImageBox__Dot + .c-SliderPagination__Dot, .c-SliderList__Dot + .c-SliderPagination__Dot, .c-SliderPagination__Dot + .c-SliderPagination__Dot {
  margin-left: 1.6rem;
}

.c-CaptionSlider__Dot::before, .c-ImageBox__Dot::before, .c-SliderList__Dot::before, .c-SliderPagination__Dot::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}

.c-Typography {
  --u-Typography--Color: #F7F7F7;
  font-size: 150px;
  line-height: 1;
  font-family: "Lato", sans-serif;
  margin-top: -0.175em;
  margin-bottom: -0.11em;
  color: transparent;
  white-space: nowrap;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .c-Typography {
    font-size: 7rem;
  }
}

.--Blue.c-Typography {
  --u-Typography--Color: #D3E9FF;
}

.--Center.c-Typography {
  margin-left: auto;
  margin-right: auto;
}

.c-Typography::before {
  content: attr(data-typography);
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: var(--u-Typography--Color);
}

.c-SupportMainvisual__Category {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.c-CaseStudyCard3__Image, .c-SupportCard__Background, .c-SupportMainvisual__Background {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.l-Header__Button, .l-Header__Link, .l-Header__Link__Contact, .l-HeaderFloating__Button2, .l-Navigation__Accordion, .l-NavigationButton, .l-PageTop, .l-Sitemap__AccordionButton, .c-ButtonAccordion, .u-ButtonCircleArrow, .c-ButtonLightBox, .c-CaptionSlider__Arrow, .c-Faq__Button, .c-MainVisualB__Dot, .u-OurServiceButton, .c-Product__Button, .c-SliderList__Arrow, .c-SwitchContents__Button {
  font-weight: inherit;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  line-height: inherit;
  text-align: inherit;
}

.inner, .inner-1440, .inner-1340, .inner-1250, .inner-1200, .inner-1100, .inner-1090, .inner-1000, .inner-960, .inner-900, .inner-860, .inner-800, .inner-740, .l-Header__Inner, .l-Megamenu__Inner, .l-Navigation__Inner {
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
}

.c-CaseStudyCard3__Image, .c-SupportCard__Background, .c-SupportMainvisual__Background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.inner-1440, .inner-1340, .inner-1250, .inner-1200, .inner-1100, .inner-1090, .inner-1000, .inner-960, .inner-900, .inner-860, .inner-800, .inner-740, .w-1440, .w-1340, .w-1250, .w-1200, .w-1100, .w-1090, .w-1000, .w-960, .w-900, .w-860, .w-800, .w-740 {
  margin-left: auto;
  margin-right: auto;
}

:root {
  --font-size: 1.6rem;
  --inner-padding: 95px;
}

@media (max-width: 1023px) {
  :root {
    --inner-padding: 50px;
  }
}

@media (max-width: 767px) {
  :root {
    --inner-padding: 2rem;
  }
}

@font-face {
  font-family: 'icomoon';
  src: url("/we-system/asset/fonts/icomoon/icomoon.eot?nqrayx");
  src: url("/we-system/asset/fonts/icomoon/icomoon.eot?nqrayx#iefix") format("embedded-opentype"), url("/we-system/asset/fonts/icomoon/icomoon.ttf?nqrayx") format("truetype"), url("/we-system/asset/fonts/icomoon/icomoon.woff?nqrayx") format("woff"), url("/we-system/asset/fonts/icomoon/icomoon.svg?nqrayx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes scale-in {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale-in {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes scale-out {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes scale-out {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes left-to-normal {
  from {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes left-to-normal {
  from {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes right-to-normal {
  from {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes right-to-normal {
  from {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes bottom-to-top {
  from {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bottom-to-top {
  from {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes css-slider {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes css-slider {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

@keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

@-webkit-keyframes pop-up {
  from {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pop-up {
  from {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

section, article, main, header, footer {
  display: block;
}

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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

@media (max-width: 767px) {
  html {
    font-size: 2.66vw;
  }
}

body {
  font-size: var(--font-size);
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 300;
  line-height: 1.8;
  color: #3F4146;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display: block;
}

ul, ol {
  list-style: none;
}

p:not([class]) + p:not([class]) {
  margin-top: 2em;
}

@media (max-width: 768px) {
  p:not([class]) + p:not([class]) {
    margin-top: 1.5em;
  }
}

a {
  color: inherit;
}

a[class] {
  text-decoration: none;
}

@media (min-width: 1024.1px) {
  a:not([class]):hover {
    color: #EEAA2E;
  }
}

a:not([class])[target="_blank"]::after {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: " \e901";
}

img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body > img {
  display: initial;
  width: initial;
  height: initial;
}

sup {
  line-height: 1;
  vertical-align: text-top;
  font-size: 70%;
}

strong {
  font-weight: 500;
}

small {
  font-size: 70%;
}

.inner-1440 {
  max-width: 144rem;
  box-sizing: content-box;
}

.inner-1340 {
  max-width: 134rem;
  box-sizing: content-box;
}

.inner-1250 {
  max-width: 125rem;
  box-sizing: content-box;
}

.inner-1200 {
  max-width: 120rem;
  box-sizing: content-box;
}

.inner-1100 {
  max-width: 110rem;
  box-sizing: content-box;
}

.inner-1090 {
  max-width: 109rem;
  box-sizing: content-box;
}

.inner-1000 {
  max-width: 100rem;
  box-sizing: content-box;
}

.inner-960 {
  max-width: 96rem;
  box-sizing: content-box;
}

.inner-900 {
  max-width: 90rem;
  box-sizing: content-box;
}

.inner-860 {
  max-width: 86rem;
  box-sizing: content-box;
}

.inner-800 {
  max-width: 80rem;
  box-sizing: content-box;
}

.inner-740 {
  max-width: 74rem;
  box-sizing: content-box;
}

.w-1440 {
  max-width: 144rem;
}

.w-1340 {
  max-width: 134rem;
}

.w-1250 {
  max-width: 125rem;
}

.w-1200 {
  max-width: 120rem;
}

.w-1100 {
  max-width: 110rem;
}

.w-1090 {
  max-width: 109rem;
}

.w-1000 {
  max-width: 100rem;
}

.w-960 {
  max-width: 96rem;
}

.w-900 {
  max-width: 90rem;
}

.w-860 {
  max-width: 86rem;
}

.w-800 {
  max-width: 80rem;
}

.w-740 {
  max-width: 74rem;
}

@media (min-width: 2000.1px) {
  .visible-maximum {
    display: none !important;
  }
}

@media (min-width: 2000px) {
  .visible-maximum-less {
    display: none !important;
  }
}

@media (max-width: 1440px) {
  .visible-pc-over {
    display: none !important;
  }
}

@media (min-width: 1440.1px) {
  .visible-pc {
    display: none !important;
  }
}

@media (min-width: 1440px) {
  .visible-pc-less {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .visible-laptop-over {
    display: none !important;
  }
}

@media (min-width: 1024.1px) {
  .visible-laptop {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .visible-laptop-less {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .visible-tb-over {
    display: none !important;
  }
}

@media (min-width: 768.1px) {
  .visible-tb {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .visible-tb-less {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .visible-sp-over {
    display: none !important;
  }
}

@media (min-width: 480.1px) {
  .visible-sp {
    display: none !important;
  }
}

@media (min-width: 480px) {
  .visible-sp-less {
    display: none !important;
  }
}

@media (max-width: 320px) {
  .visible-minimum-over {
    display: none !important;
  }
}

@media (min-width: 320.1px) {
  .visible-minimum {
    display: none !important;
  }
}

@media (min-width: 2000.1px) {
  .hidden-maximum-over {
    display: none !important;
  }
}

@media (max-width: 2000px) {
  .hidden-maximum {
    display: none !important;
  }
}

@media (max-width: 1999px) {
  .hidden-maximum-less {
    display: none !important;
  }
}

@media (min-width: 1440.1px) {
  .hidden-pc-over {
    display: none !important;
  }
}

@media (max-width: 1440px) {
  .hidden-pc {
    display: none !important;
  }
}

@media (max-width: 1439px) {
  .hidden-pc-less {
    display: none !important;
  }
}

@media (min-width: 1024.1px) {
  .hidden-laptop-over {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hidden-laptop {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hidden-laptop-less {
    display: none !important;
  }
}

@media (min-width: 768.1px) {
  .hidden-tb-over {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hidden-tb {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-tb-less {
    display: none !important;
  }
}

@media (min-width: 480.1px) {
  .hidden-sp-over {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hidden-sp {
    display: none !important;
  }
}

@media (max-width: 479px) {
  .hidden-sp-less {
    display: none !important;
  }
}

@media (min-width: 320.1px) {
  .hidden-minimum-over {
    display: none !important;
  }
}

@media (max-width: 320px) {
  .hidden-minimum {
    display: none !important;
  }
}

.mt-10 {
  margin-top: 1rem !important;
}

.mt-20 {
  margin-top: 2rem !important;
}

.mt-30 {
  margin-top: 3rem !important;
}

.mt-40 {
  margin-top: 4rem !important;
}

.mt-50 {
  margin-top: 5rem !important;
}

.mt-100 {
  margin-top: 10rem !important;
}

.mt-1em {
  margin-top: 1em !important;
}

.mt-2em {
  margin-top: 2em !important;
}

.mt-200-100 {
  margin-top: 20rem !important;
}

@media (max-width: 767px) {
  .mt-200-100 {
    margin-top: 10rem !important;
  }
}

.mt-200-50 {
  margin-top: 20rem !important;
}

@media (max-width: 767px) {
  .mt-200-50 {
    margin-top: 5rem !important;
  }
}

.mt-150-100 {
  margin-top: 15rem !important;
}

@media (max-width: 767px) {
  .mt-150-100 {
    margin-top: 10rem !important;
  }
}

.mt-100-50 {
  margin-top: 10rem !important;
}

@media (max-width: 767px) {
  .mt-100-50 {
    margin-top: 5rem !important;
  }
}

.mt-100-70 {
  margin-top: 10rem !important;
}

@media (max-width: 767px) {
  .mt-100-70 {
    margin-top: 7rem !important;
  }
}

.mt-50-30 {
  margin-top: 5rem !important;
}

@media (max-width: 767px) {
  .mt-50-30 {
    margin-top: 3rem !important;
  }
}

.serif {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

.text-16-15 {
  font-size: 1.6rem;
}

@media (max-width: 767px) {
  .text-16-15 {
    font-size: 1.5rem;
  }
}

.color-navy {
  color: #08318D;
}

.color-red {
  color: #EA0000;
}

.color-orange {
  color: #EEAA2E;
}

.marker-orange {
  background: linear-gradient(transparent 60%, #FFD589 60%);
}

.marker-blue {
  background: linear-gradient(transparent 60%, #DBF1F2 60%);
}

.bold {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

.l-BodyFooter {
  margin-top: 150px;
}

@media (max-width: 767px) {
  .l-BodyFooter {
    margin-top: 10rem;
  }
}

.l-BodyFooter__ConversionArea {
  margin-bottom: 70px;
}

@media (max-width: 767px) {
  .l-BodyFooter__ConversionArea {
    margin-bottom: 2rem;
  }
}

.l-BodyFooter__ConversionBreadCrumb {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .l-BodyFooter__ConversionBreadCrumb {
    margin-bottom: 1rem;
  }
}

/*
#styleguide

ヘッダーの高さを変更すえうタイミングを管理するDOM。

JSのIntersectionObserverでこのDOMが表示されているか否かで判定を行う。
コンテンツが表示されている場合は body にクラス is-contents-view が付与される。

*/
.l-ContentsView {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30rem;
  z-index: -1;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.l-ConversionArea {
  background: #F6F6F6;
  padding-top: 80px;
  padding-bottom: 70px;
}

@media (max-width: 767px) {
  .l-ConversionArea {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
}

.l-ConversionArea__Inner {
  padding-left: 50px;
  padding-right: 50px;
}

@media (max-width: 767px) {
  .l-ConversionArea__Inner {
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
}

.l-ConversionArea__Headline {
  font-size: 3.6rem;
  text-align: center;
  line-height: 1.6;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  word-break: keep-all;
}

@media (max-width: 767px) {
  .l-ConversionArea__Headline {
    font-size: 2rem;
  }
}

.l-ConversionArea__LeadText {
  text-align: center;
  margin-top: 4rem;
}

@media (max-width: 767px) {
  .l-ConversionArea__LeadText {
    margin-top: 3rem;
    font-size: 1.4rem;
  }
}

.l-ConversionArea__Buttons {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  margin-top: 50px;
}

@media (max-width: 1023px) {
  .l-ConversionArea__Buttons {
    gap: 0.5rem;
  }
}

@media (max-width: 767px) {
  .l-ConversionArea__Buttons {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }
}

.l-ConversionArea__Buttons.-Single {
  grid-template-columns: repeat(auto-fit, minmax(0, 39rem));
  justify-content: center;
}

.l-ConversionArea__Buttons.-Column2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .l-ConversionArea__Buttons.-Column2 {
    grid-template-columns: 1fr;
  }
}

.l-ConversionArea2__Inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}

@media (max-width: 1023px) {
  .l-ConversionArea2__Inner {
    grid-template-columns: 1fr;
  }
}

.l-ConversionArea2__Column {
  padding-left: 50px;
  padding-right: 50px;
  background: #F6F6F6;
  padding-top: 80px;
  padding-bottom: 70px;
}

@media (max-width: 767px) {
  .l-ConversionArea2__Column {
    padding-top: 5rem;
    padding-bottom: 4rem;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
}

.l-ConversionArea2__Headline {
  font-size: 2.8rem;
  text-align: center;
  line-height: 1.6;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

@media (max-width: 767px) {
  .l-ConversionArea2__Headline {
    font-size: 2rem;
  }
}

.l-ConversionArea2__Button {
  max-width: 39rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
}

.l-FloatingButton {
  position: fixed;
  right: 0;
  top: calc(50% - (260px / 2));
  display: grid;
  gap: 10px;
  z-index: 19999;
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.l-FloatingButton.-Hide {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

@media (max-width: 1023px) {
  .l-FloatingButton {
    display: none;
  }
}

.l-FloatingButton__Button {
  --c-Icon--Fill: #fff;
  width: 85px;
  height: 80px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 5px 0 0 5px;
  text-align: center;
}

.l-FloatingButton__Button.-Green {
  background: linear-gradient(135deg, #6CCADB, #01959D);
}

.l-FloatingButton__Button.-Blue {
  background: linear-gradient(135deg, #80C2FF, #037DE0);
}

.l-FloatingButton__Button.-Blue2 {
  background: linear-gradient(135deg, #0071E3, #002B9F);
}

.l-FloatingButton__Button.-Navy {
  background: linear-gradient(135deg, #0E4A8B, #0A2B51);
}

.l-FloatingButton__Button.-Gold {
  background: linear-gradient(to right, #b0ab73, #8d8854);
}

.l-FloatingButton__Icon {
  width: 24px;
}

.l-FloatingButton__Label {
  font-size: 10px;
  line-height: 1.4;
  margin-top: 8px;
}

.l-Footer {
  background: #575858;
  color: #fff;
  padding-top: 9rem;
  padding-bottom: 4rem;
  padding-bottom: calc(4.5rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

.l-Footer__Bottom {
  --color: #ABACAC;
  color: var(--color);
  font-size: 1.1rem;
  margin-top: 7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .l-Footer__Bottom {
    display: block;
    margin-top: 6rem;
  }
}

.l-Footer__Relationship {
  overflow: hidden;
}

.l-Footer__RelationshipInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -4rem;
  margin-top: -1rem;
}

@media (max-width: 767px) {
  .l-Footer__RelationshipInner {
    margin-left: -2rem;
  }
}

.l-Footer__RelationshipItem {
  flex-shrink: 0;
  flex-grow: 0;
  padding-left: 4rem;
  position: relative;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .l-Footer__RelationshipItem {
    padding-left: 2rem;
  }
}

.l-Footer__RelationshipItem::before {
  content: '';
  height: 1em;
  width: 1px;
  flex-shrink: 0;
  background: var(--color);
  position: absolute;
  left: 2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .l-Footer__RelationshipItem::before {
    left: 1rem;
  }
}

.l-Footer__CopyRight {
  letter-spacing: 0.1em;
  white-space: nowrap;
  margin-left: 80px;
}

@media (max-width: 767px) {
  .l-Footer__CopyRight {
    margin-left: 0;
    margin-top: 2rem;
    text-align: center;
  }
}

/*
#styleguide

ヘッダー用

*/
.l-Header {
  --l-Header-Background: #fff;
  --l-Header-Color: #1C1C1C;
  position: fixed;
  z-index: 20000;
  left: 0;
  top: 0;
  width: 100%;
  background-color: var(--l-Header-Background);
}

@media (max-width: 1023px) {
  .l-Header {
    position: static;
    margin-bottom: 3rem;
  }
}

.l-Header body.is-contents-view {
  --l-Header__Inner--Height: 80px;
}

.l-Header__Inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  height: var(--l-Header__Inner--Height, 100px);
}

@media (max-width: 1023px) {
  .l-Header__Inner {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    height: auto;
    align-items: flex-start;
  }
}

.l-Header__Conversions {
  display: none;
}

@media (max-width: 1023px) {
  .l-Header__Conversions {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, 1.8rem);
    gap: 1.5rem;
  }
}

.l-Header__ConversiosLink {
  display: block;
}

@media (max-width: 1023px) {
  .l-Header__Logo {
    grid-column: 2;
  }
}

.l-Header__LogoInner {
  display: grid;
  grid-template-columns: 50px auto;
  gap: 20px;
  align-items: center;
}

@media (max-width: 1023px) {
  .l-Header__LogoInner {
    display: block;
  }
}

.l-Header__LogoImage {
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .l-Header__LogoImage {
    width: 4.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.l-Header__LogoCopy {
  font-size: 12px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  color: var(--l-Header-Color);
}

@media (max-width: 1023px) {
  .l-Header__LogoCopy {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    text-align: center;
  }
}

.l-Header__Navigations {
  display: flex;
  height: 100%;
}

@media (max-width: 1023px) {
  .l-Header__Navigations {
    display: none;
  }
}

.l-Header__NavigationsItem + .l-Header__NavigationsItem {
  margin-left: 40px;
}

@media (max-width: 1439px) {
  .l-Header__NavigationsItem + .l-Header__NavigationsItem {
    margin-left: 20px;
  }
}

.l-Header__Button, .l-Header__Link, .l-Header__Link__Contact {
  height: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: var(--l-Header-Color);
}

@media (min-width: 1024.1px) {
  .l-Header__Button:hover, .l-Header__Link:hover, .l-Header__Link__Contact:hover {
    color: #0A2B82;
  }
}

.l-Header__Button.--Active {
  --l-Header__ButtonIcon--Bottom: -10px;
  --l-Header__ButtonIcon--Opacity: 1;
}

@media (min-width: 1024.1px) {
  .l-Header__Button:hover {
    --l-Header__ButtonIcon--Bottom: -10px;
    --l-Header__ButtonIcon--Opacity: 1;
  }
}

.l-Header__ButtonInner {
  position: relative;
  display: block;
}

@media (max-width: 1230px) {
  .l-Header__ButtonText {
    font-size: 12px;
  }
}

@media (max-width: 1130px) {
  .l-Header__ButtonText {
    font-size: 11px;
  }
}

@media (max-width: 1050px) {
  .l-Header__ButtonText {
    font-size: 10px;
  }
}

.l-Header__ButtonIcon {
  --c-Icon--Fill: #0A2B82;
  position: absolute;
  width: 10px;
  position: absolute;
  left: calc(50% - 5px);
  bottom: var(--l-Header__ButtonIcon--Bottom, -5px);
  opacity: var(--l-Header__ButtonIcon--Opacity, 0);
  transition: bottom 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 1024.1px) {
  .l-Header__Link:hover {
    --l-Header__ButtonInnerBefore--Width: 100%;
  }
}

.l-Header__LinkInner {
  position: relative;
  display: block;
}

.l-Header__LinkInner::before {
  content: '';
  display: block;
  width: var(--l-Header__ButtonInnerBefore--Width, 0%);
  height: 1px;
  border-radius: 1px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: #0A2B82;
  transition: width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 1230px) {
  .l-Header__LinkInner {
    font-size: 12px;
  }
}

@media (max-width: 1130px) {
  .l-Header__LinkInner {
    font-size: 11px;
  }
}

@media (max-width: 1050px) {
  .l-Header__LinkInner {
    font-size: 10px;
  }
}

@media (min-width: 1077px) {
  .l-Header__LinkInner .visible-pc2-less {
    display: none !important;
  }
}

.l-Header__Link__Contact {
  height: auto;
  color: #fff;
  background: #ffcb1c;
  background: linear-gradient(90deg, #ffcb1c 0%, #e08b03 100%);
  padding: 9px 20px 10px;
  font-weight: bold;
  border-radius: 6px;
  margin-top: 30px;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 1024.1px) {
  .l-Header__Link__Contact:hover {
    opacity: 0.7;
    color: #fff;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

.l-Header__NavigationButton {
  display: none;
}

@media (max-width: 1023px) {
  .l-Header__NavigationButton {
    padding-right: 1rem;
    grid-column: 3;
    justify-self: flex-end;
    display: block;
    margin-right: calc(var(--inner-padding) * -1);
  }
}

.l-Header__Modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 19999;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

/*
#styleguide

SP版ようの追従ヘッダー

*/
.l-HeaderFloating {
  position: fixed;
  background: #fff;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 25000;
  display: none;
  -webkit-transform: translateY(-101%);
  transform: translateY(-101%);
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 1023px) {
  .l-HeaderFloating {
    display: block;
  }
}

body.is-contents-view .l-HeaderFloating {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.l-HeaderFloating__Inner {
  display: grid;
  grid-template-columns: 1fr 4.5rem;
}

.l-HeaderFloating__Conversions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.l-HeaderFloating__Button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.8rem;
  font-size: 1rem;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}

.l-HeaderFloating__Button.--Active {
  background: #fff !important;
  color: #3F4146;
}

.l-HeaderFloating__Button.-Blue {
  background: linear-gradient(135deg, #80C2FF, #037DE0);
}

.l-HeaderFloating__Button.-Blue2 {
  background: linear-gradient(135deg, #0071E3, #002B9F);
}

.l-HeaderFloating__Button.-Green {
  background: linear-gradient(135deg, #6CCADB, #01959D);
}

.l-HeaderFloating__Button.-Navy {
  background: linear-gradient(135deg, #0E4A8B, #0A2B51);
}

.l-HeaderFloating__Button.-Gold {
  background: linear-gradient(to right, #b0ab73, #8d8854);
}

.l-HeaderFloating__Button.-Yellow {
  background: #fff;
  color: #3F4146;
}

.l-HeaderFloating__Button.-Navy2 {
  background: linear-gradient(135deg, #0E4A8B, #0A2B51);
}

.l-HeaderFloating__Button.-Yellow2 {
  font-weight: bold;
  background: #ffcb1c;
  background: linear-gradient(90deg, #ffcb1c 0%, #e08b03 100%);
}

.l-HeaderFloating__Button2 {
  background: #fff;
  height: 4.8rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.l-HeaderFloating__Button2Icon {
  width: 1.5rem;
  height: 0.9rem;
  position: relative;
}

.l-HeaderFloating__Button2Icon::before, .l-HeaderFloating__Button2Icon::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.2rem;
  background: #1C1C1C;
  position: absolute;
  left: 0;
}

.l-HeaderFloating__Button2Icon::before {
  top: 0;
}

.l-HeaderFloating__Button2Icon::after {
  bottom: 0;
}

.l-HeaderFloating__Button2Text {
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 500;
  margin-top: 0.5rem;
}

.l-HeaderFloating__AccordionAccordionTarget {
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.16);
}

.l-HeaderFloating__AccordionAccordionTarget .l-HeaderFloating__Button {
  justify-content: flex-start;
  padding-left: 20px;
  font-size: 1.8rem;
  height: 6rem;
}

.l-HeaderFloating__AccordionAccordionTarget .c-ButtonConversion__Icon {
  margin-left: auto;
  margin-right: 20px;
}

.l-HeaderFloating__AccordionAccordionTarget .c-ButtonConversion__Icon svg {
  fill: #fff;
}

.l-HeaderFloating__Close {
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.l-HeaderFloating__Close span {
  padding-top: 20px;
}

.l-HeaderFloating__Close:before, .l-HeaderFloating__Close:after {
  content: "";
  position: absolute;
  top: 39%;
  left: 50%;
  width: 2px;
  height: 20px;
  background: #1C1C1C;
}

.l-HeaderFloating__Close:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.l-HeaderFloating__Close:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/*
#styleguide

*/
.l-Megamenu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  max-height: calc(100vh - 200px);
  overflow: auto;
  z-index: 1;
  background: #fff;
  display: none;
}

.l-Megamenu.--Active {
  display: block;
}

.l-Megamenu.--Leave {
  -webkit-animation: fade-out 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation: fade-out 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.l-Megamenu__Inner {
  padding-top: 40px;
  padding-bottom: 40px;
  box-sizing: content-box;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.l-Megamenu.--Active .l-Megamenu__Inner {
  -webkit-animation: fade-in 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation: fade-in 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.l-Megamenu__Menus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

.l-Megamenu__MenusItem + .l-Megamenu__MenusItem {
  position: relative;
}

.l-Megamenu__MenusItem + .l-Megamenu__MenusItem::before {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: #F5F5F5;
  position: absolute;
  left: -25px;
  top: 0;
}

/*
#styleguide


*/
.l-Navigation {
  position: fixed;
  z-index: 30000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
}

.l-Navigation__Container {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.l-Navigation__Header {
  height: 6rem;
  padding: 1rem;
  padding-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr 4rem;
  padding-left: 1.5rem;
  padding-right: 1rem;
}

.l-Navigation__Logo {
  display: grid;
  grid-template-columns: 4rem auto;
  gap: 1.5rem;
  align-items: center;
}

.l-Navigation__LogoCopy {
  font-size: 1.1rem;
}

.l-Navigation__Body {
  overscroll-behavior-y: contain;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.l-Navigation__Inner {
  padding-top: 40px;
  padding-bottom: 40px;
}

.l-Navigation__List {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.l-Navigation__Subs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.l-Navigation__SubLink {
  display: block;
  padding: 1rem 2rem;
  background: #F2F3F5;
  font-size: 1.4rem;
}

.l-Navigation__SubLink[target="_blank"]::after {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e901";
  margin-left: 0.5em;
  font-size: 80%;
}

.l-Navigation__Accordion {
  font-size: 1.8rem;
}

.l-Navigation__Underlayer {
  display: grid;
  gap: 2rem;
}

.l-Navigation__SubCategory {
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .l-Navigation__SubCategory {
    font-size: 1.4rem;
    font-weight: 700;
  }
}

.l-Navigation__Link {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 2.2rem;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: solid 1px #C3C6C9;
  font-size: 1.8rem;
}

.l-Navigation__Link.--Active {
  border-bottom-color: transparent;
}

.l-Navigation__Accordion {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 2.2rem;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: solid 1px #C3C6C9;
}

.l-Navigation__Accordion.--Active {
  border-bottom-color: transparent;
  --c-IconCircle--Background: #fff;
  --c-IconCircle--Fill: #0A2B82;
  --c-IconCircle--Fill2: transparent;
}

.l-Navigation__AccordionText {
  font-size: 1.8rem;
}

.l-Navigation__AccordionBody {
  display: none;
}

.l-Navigation__AccordionBody::before {
  content: '';
  display: block;
  height: 1rem;
}

.l-Navigation__Conversions {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.l-ButtonConversion {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1.5rem;
  align-items: center;
  height: 8rem;
  padding: 2rem;
  color: #fff;
  border-radius: 0.5rem;
  background: red;
}

.l-ButtonConversion.--Blue {
  background: linear-gradient(to right, #80C2FF, #037DE0);
}

.l-ButtonConversion.--Blue2 {
  background: linear-gradient(to right, #0071E3, #002B9F);
}

.l-ButtonConversion.--Green {
  background: linear-gradient(to right, #6CCADB, #01959D);
}

.l-ButtonConversion.--Navy {
  background: linear-gradient(to right, #0E4A8B, #0A2B51);
}

.l-ButtonConversion.--Gold {
  background: linear-gradient(to right, #b0ab73, #8d8854);
}

.l-ButtonConversion__Icon {
  --c-Icon--Fill: #fff;
}

.l-ButtonConversion__Text {
  line-height: 1.4;
  font-size: 1.2rem;
}

.l-NavigationButton {
  width: 4rem;
  height: 4rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.l-NavigationButton__Icon {
  width: 1.5rem;
  height: 1.1rem;
  position: relative;
}

.l-NavigationButton__Icon::before, .l-NavigationButton__Icon::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: #1C1C1C;
  position: absolute;
  left: 0;
}

.l-NavigationButton__Icon::before {
  top: 0;
}

.l-NavigationButton__Icon::after {
  bottom: 0;
}

.l-NavigationButton.--Close .l-NavigationButton__Icon::before {
  top: calc(50% - 1px);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.l-NavigationButton.--Close .l-NavigationButton__Icon::after {
  bottom: calc(50% - 1px);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.l-NavigationButton__Text {
  font-size: 1rem;
  font-weight: 400;
  font-family: "Lato", sans-serif;
  line-height: 1;
  margin-top: 10px;
}

/*
#styleguide

PC版のメガメニュー内の下層ページへのリンク

*/
.l-NavigationCard {
  display: block;
}

@media (min-width: 1024.1px) {
  .l-NavigationCard:hover {
    --l-NavigationCard__Image--Transform: scale(1.1);
    --l-NavigationCard__Arrow--Transform: translateX(5px);
    --c-IconCircle--Offset: 10%;
    --c-IconCircle--Scale: scale(1.2);
  }
}

.l-NavigationCard__Thumbnail {
  overflow: hidden;
}

.l-NavigationCard__Image {
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--l-NavigationCard__Image--Transform);
  transform: var(--l-NavigationCard__Image--Transform);
}

.l-NavigationCard__Body {
  margin-top: 10px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 22px;
  gap: 10px;
  height: calc(15px * 2 * 1.8);
}

.l-NavigationCard__Title {
  font-size: 15px;
}

.l-NavigationCard__Arrow {
  transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--l-NavigationCard__Arrow--Transform);
  transform: var(--l-NavigationCard__Arrow--Transform);
}

/*
#styleguide

ページトップボタン

*/
.l-PageTop {
  position: fixed;
  bottom: 2rem;
  z-index: 10000;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  --c-Icon--Fill: #0A2B82;
  right: 2rem;
  visibility: hidden;
}

@media (min-width: 1024.1px) {
  .l-PageTop:hover {
    background: #0A2B82;
    --c-Icon--Fill: #fff;
  }
}

body.is-contents-view .l-PageTop {
  visibility: visible;
  -webkit-animation: fade-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation: fade-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.l-PageTop__Icon {
  width: 55%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

@-webkit-keyframes display-on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes display-on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.l-Sitemap {
  display: grid;
  gap: 60px;
  align-items: flex-start;
  grid-template-columns: 26.66% 1fr  26.66%;
}

@media (max-width: 1024px) {
  .l-Sitemap {
    gap: 50px 50px;
    grid-template-columns: 1fr 300px;
  }
}

@media (max-width: 767px) {
  .l-Sitemap {
    gap: 3rem;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Grid1 {
    grid-row: 1;
    grid-column: 1;
  }
}

@media (max-width: 1024px) {
  .l-Sitemap__Grid2 {
    grid-row: 1 / 5;
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Grid2 {
    grid-row: 2;
    grid-column: 1;
  }
}

@media (max-width: 1024px) {
  .l-Sitemap__Grid3 {
    grid-row: 2;
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Grid3 {
    grid-row: 3;
    grid-column: 1;
  }
}

.l-Sitemap__Grid4 {
  grid-column: 1 / 3;
  align-self: flex-end;
}

@media (max-width: 1024px) {
  .l-Sitemap__Grid4 {
    grid-row: 3;
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Grid4 {
    grid-row: 4;
    grid-column: 1;
  }
}

.l-Sitemap__Grid5 {
  align-self: flex-end;
}

@media (max-width: 1024px) {
  .l-Sitemap__Grid5 {
    grid-row: 4;
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Grid5 {
    grid-row: 5;
    grid-column: 1;
  }
}

.l-Sitemap__List {
  display: grid;
  gap: 50px;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .l-Sitemap__List {
    gap: 3rem;
  }
}

.l-Sitemap__List.--Level2 {
  gap: 10px;
}

@media (max-width: 767px) {
  .l-Sitemap__List.--Level2 {
    gap: 0.2rem;
  }
}

.l-Sitemap__List.--Level3 {
  font-size: 1.1rem;
  color: #ABACAC;
  padding-left: 1rem;
  gap: 0.8rem;
}

@media (max-width: 767px) {
  .l-Sitemap__List.--Level3 {
    padding-left: 0;
    font-size: 1.2rem;
    gap: 0.4rem;
  }
}

.l-Sitemap__List.--Level4 {
  gap: 10px;
}

@media (max-width: 767px) {
  .l-Sitemap__List.--Level4 {
    gap: 3rem;
  }
}

.l-Sitemap__List.--Level5 {
  gap: 20px;
}

@media (max-width: 767px) {
  .l-Sitemap__List.--Level5 {
    gap: 0.2rem;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__List.--Level2 > .l-Sitemap__ListItem,
  .l-Sitemap__List.--Level5 > .l-Sitemap__ListItem {
    padding: 1rem 2rem;
    background: #4B4D4D;
  }
}

.l-Sitemap__Header {
  display: flex;
  align-items: center;
}

.l-Sitemap__Header.--Border {
  border-bottom: solid 1px  #ABACAC;
  padding-bottom: 1rem;
}

.l-Sitemap__Header.--Margin {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .l-Sitemap__Header.--Margin {
    margin-bottom: 0;
  }
}

.l-Sitemap__Header.--Margin2 {
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .l-Sitemap__Header.--Margin2 {
    margin-bottom: 0;
  }
}

.l-Sitemap__HeaderTitle {
  flex-grow: 1;
}

.l-Sitemap__HeaderIcon {
  --c-Icon--Fill: #fff;
  display: none;
}

@media (max-width: 767px) {
  .l-Sitemap__HeaderIcon {
    display: block;
    width: 1.4rem;
    margin-left: 1rem;
    flex-shrink: 0;
  }
}

.l-Sitemap__Headline1 {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
}

.l-Sitemap__Headline2 {
  font-size: 12px;
}

@media (max-width: 767px) {
  .l-Sitemap__Headline2 {
    font-size: 1.4rem;
  }
}

.l-Sitemap__Menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 1024px) {
  .l-Sitemap__Menu {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Menu {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.l-Sitemap__Horizontale {
  display: grid;
  align-items: flex-end;
  gap: 10px 30px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

@media (max-width: 1024px) {
  .l-Sitemap__Horizontale {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__Horizontale {
    gap: 3rem;
  }
}

.l-Sitemap__Link {
  display: flex;
  align-items: flex-end;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.l-Sitemap__Link.--Full {
  width: 100%;
}

@media (max-width: 767px) {
  .l-Sitemap__Link.--SpFull {
    width: 100%;
  }
}

@media (min-width: 1024.1px) {
  .l-Sitemap__Link:hover {
    opacity: 0.4;
  }
}

.l-Sitemap__LinkText {
  flex-grow: 1;
}

.l-Sitemap__LinkIcon {
  --c-Icon--Fill: #fff;
  display: none;
  width: 1.4rem;
  flex-shrink: 0;
  margin-left: 1rem;
  margin-bottom: 0.6rem;
}

@media (max-width: 767px) {
  .l-Sitemap__LinkIcon {
    display: block;
  }
}

.l-Sitemap__LinkIcon.-Show {
  display: block;
}

.l-Sitemap__AccordionButton {
  --c-Icon--Fill: #fff;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  pointer-events: none;
}

@media (max-width: 767px) {
  .l-Sitemap__AccordionButton {
    pointer-events: all;
    grid-template-columns: 1fr 1.2rem;
  }
}

.l-Sitemap__AccordionButton.--Active {
  --l-Sitemap__AccordionButtonIcon--Transform: rotate(180deg);
}

.l-Sitemap__AccordionButtonIcon {
  display: none;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--l-Sitemap__AccordionButtonIcon--Transform);
  transform: var(--l-Sitemap__AccordionButtonIcon--Transform);
}

@media (max-width: 767px) {
  .l-Sitemap__AccordionButtonIcon {
    display: block;
  }
}

@media (max-width: 767px) {
  .l-Sitemap__AccordionBody {
    display: none;
  }
  .l-Sitemap__AccordionBody::before {
    content: '';
    display: block;
    height: 1rem;
  }
  .l-Sitemap__AccordionBody.--Level2::after {
    content: '';
    display: block;
    height: 1rem;
  }
}

.l-Wrapper {
  padding-top: 100px;
}

@media (max-width: 1023px) {
  .l-Wrapper {
    padding-top: 0;
  }
}

/*
#styleguide

*/
.c-Ad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (max-width: 767px) {
  .c-Ad {
    box-shadow: 2px 2px 0px #E5E5E5;
    grid-template-columns: 1fr;
    gap: 3rem;
    background: #F5F5F5;
    position: relative;
    padding: 3rem 1rem;
  }
}

.c-Ad__Box {
  position: relative;
  grid-column: 1 / 3;
  grid-row: 1;
  padding-right: 50%;
  background: #F5F5F5;
  position: relative;
  z-index: 0;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 120px;
  min-height: 336px;
  box-shadow: 2px 2px 0px #E5E5E5;
}

@media (max-width: 1023px) {
  .c-Ad__Box {
    padding-left: 50px;
  }
}

@media (max-width: 767px) {
  .c-Ad__Box {
    box-shadow: none;
    min-height: auto;
    padding: 0;
    position: static;
    grid-column: auto;
    grid-row: auto;
  }
}

.c-Ad__Edge {
  background: #E5E5E5;
  width: 54px;
  height: 46px;
  right: -2px;
  bottom: -2px;
  position: absolute;
}

@media (max-width: 767px) {
  .c-Ad__Edge {
    width: 3.4rem;
    height: 2.9rem;
  }
}

.c-Ad__Edge::before, .c-Ad__Edge::after {
  content: '';
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

.c-Ad__Edge::before {
  background: #0A2B82;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  left: 0;
  top: 0;
}

.c-Ad__Edge::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background: #fff;
  right: 0;
  bottom: 0;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.c-Ad__Title {
  font-size: 26px;
  color: #08318D;
  line-height: 1.6;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-Ad__Title {
    font-size: 1.7rem;
    text-align: center;
  }
}

.c-Ad__Text {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .c-Ad__Text {
    font-size: 1.4rem;
    margin-top: 3rem;
  }
}

.c-Ad__Thumbnail {
  grid-column: 2 / 3;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding-left: 70px;
  padding-right: 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  align-items: center;
  font-size: 1.3rem;
}

@media (max-width: 1023px) {
  .c-Ad__Thumbnail {
    width: 80%;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .c-Ad__Thumbnail {
    width: auto;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
    padding: 0;
  }
}

.c-Ad__Image {
  -webkit-filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
}

@media (max-width: 767px) {
  .c-Ad__Image {
    width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.c-Ad__Icon {
  width: 70px;
  position: absolute;
  left: 30px;
  top: -20px;
  --c-Icon--Fill: #EEAA2E;
}

@media (max-width: 767px) {
  .c-Ad__Icon {
    top: 1.7rem;
    left: 3.2rem;
    width: 4.2rem;
  }
}

/*
#styleguide

```
<div class="c-Ad2">
  <h2 class="c-Ad2__Title">リスティング広告</h2>
  <p class="c-Ad2__Text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
  <div class="c-Ad2__Icon"><?php Svg::check(); ?></div>
  <div class="c-Ad2__Edge"></div>
</div>
```

外部リンクのリストパターン

```
<div class="c-Ad2">
  <h2 class="c-Ad2__Title">リスティング広告</h2>
  <ul class="c-Ad2__List">
    <li>
      <a href="#" target="_blank" class="c-LinkBlank">
        <span>・ホワイトニングタウン</span>
        <span><?php Svg::blank(); ?></span>
      </a>
    </li>
    <li>
      <a href="#" target="_blank" class="c-LinkBlank">
        <span>・ホワイトニングクリニックランキング</span>
        <span><?php Svg::blank(); ?></span>
      </a>
    </li>
    <li>
      <a href="#" target="_blank" class="c-LinkBlank">
        <span>・ＷＨＩＴＥＮＩＮＧＳＩＫＡ合同会社</span>
        <span><?php Svg::blank(); ?></span>
      </a>
    </li>
    <li>
      <a href="#" target="_blank" class="c-LinkBlank">
        <span>・なるほど福岡</span>
        <span><?php Svg::blank(); ?></span>
      </a>
    </li>
    <li>
      <a href="#" target="_blank" class="c-LinkBlank">
        <span class="c-LinkBlank__Text">・ホワイトニングタウン</span>
        <span class="c-LinkBlank__Icon"><?php Svg::blank(); ?></span>
      </a>
    </li>
  </ul>
  <div class="c-Ad2__Icon"><?php Svg::check(); ?></div>
  <div class="c-Ad2__Edge"></div>
</div>
```

*/
.c-Ad2 {
  position: relative;
  padding-right: 50%;
  background: #F5F5F5;
  position: relative;
  z-index: 0;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 100px;
  padding-right: 100px;
  box-shadow: 2px 2px 0px #E5E5E5;
}

@media (max-width: 1023px) {
  .c-Ad2 {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 767px) {
  .c-Ad2 {
    padding: 3rem 1rem;
  }
}

.c-Ad2__Edge {
  background: #E5E5E5;
  width: 54px;
  height: 46px;
  right: -2px;
  bottom: -2px;
  position: absolute;
}

@media (max-width: 767px) {
  .c-Ad2__Edge {
    width: 3.4rem;
    height: 2.9rem;
  }
}

.c-Ad2__Edge::before, .c-Ad2__Edge::after {
  content: '';
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

.c-Ad2__Edge::before {
  background: #0A2B82;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  left: 0;
  top: 0;
}

.c-Ad2__Edge::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background: #fff;
  right: 0;
  bottom: 0;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.c-Ad2__Title {
  font-size: 26px;
  color: #08318D;
  line-height: 1.6;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-Ad2__Title {
    font-size: 1.7rem;
    text-align: center;
  }
}

.c-Ad2__Text {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .c-Ad2__Text {
    font-size: 1.4rem;
    margin-top: 3rem;
  }
}

.c-Ad2__Icon {
  width: 70px;
  position: absolute;
  left: 30px;
  top: -20px;
  --c-Icon--Fill: #EEAA2E;
}

@media (max-width: 767px) {
  .c-Ad2__Icon {
    top: 1.7rem;
    left: 3.2rem;
    width: 4.2rem;
  }
}

.c-Ad2__List {
  margin-top: 30px;
  display: grid;
  gap: 8px;
}

/*
#styleguide

アンカーボタン

*/
.c-Anchor {
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #9FA8AF;
  height: 100%;
  line-height: 1.6;
}

@media (min-width: 1024.1px) {
  .c-Anchor:hover {
    --c-IconCircle--Scale: scale(1.2);
    --c-IconCircle__Icon--Transform: translateY(3px);
  }
}

@media (max-width: 767px) {
  .c-Anchor {
    grid-template-columns: 1fr 2rem;
    font-size: 1.4rem;
  }
}

/*
#styleguide

- リッチなアンカーリンク

*/
.c-AnchorBox {
  display: grid;
  grid-template-columns: 100px 1fr;
}

@media (max-width: 767px) {
  .c-AnchorBox {
    display: block;
  }
}

.c-AnchorBox__Number {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-family: "Lato", sans-serif;
  background: #08318D;
  color: #fff;
}

@media (max-width: 767px) {
  .c-AnchorBox__Number {
    min-height: auto;
    font-size: 2.5rem;
    width: 6rem;
    height: 6rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
  }
}

.c-AnchorBox__Container {
  background: #F7F7F7;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 30px;
  padding: 20px 30px 20px 40px;
  gap: 30px;
}

@media (max-width: 767px) {
  .c-AnchorBox__Container {
    margin-top: -2.5rem;
    grid-template-columns: 1fr 2.2rem;
    gap: 2rem;
    padding: 4rem 2rem 2rem 2rem;
  }
}

.c-AnchorBox__Title {
  font-size: 20px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-AnchorBox__Title {
    font-size: 1.6rem;
  }
}

/*
#styleguide

アンカーリスト

```
<div class="c-AnchorList">
  <div class="c-AnchorList__Inner">
    <ul class="c-AnchorList__Grid">
      <li>
        <a href="#section-1" class="c-Anchor">
          <span class="c-Anchor__Text">加盟院の事例一覧</span>
          <span class="c-Anchor__Arrow">
            <span class="c-IconCircle --GradientBlue">
              <span class="c-IconCircle__Icon --DirectionRoundBottom"><?php Svg::DirectionRoundBottom() ?></span>
            </span>
          </span>
        </a>
      </li>
      <li>
        <a href="#section-2" class="c-Anchor">
          <span class="c-Anchor__Text">全国の加盟院一覧</span>
          <span class="c-Anchor__Arrow">
            <span class="c-IconCircle --GradientBlue">
              <span class="c-IconCircle__Icon --DirectionRoundBottom"><?php Svg::DirectionRoundBottom() ?></span>
            </span>
          </span>
        </a>
      </li>
    </ul>
  </div>
</div>
```
*/
/*
#styleguide

2カラム

```
<div class="c-AnchorList --Column2">
  <div class="c-AnchorList__Inner">
    <ul class="c-AnchorList__Grid">
      <li>
        <a href="#section-1" class="c-Anchor">
          <span class="c-Anchor__Text">加盟院の事例一覧</span>
          <span class="c-Anchor__Arrow">
            <span class="c-IconCircle --GradientBlue">
              <span class="c-IconCircle__Icon --DirectionRoundBottom"><?php Svg::DirectionRoundBottom() ?></span>
            </span>
          </span>
        </a>
      </li>
      <li>
        <a href="#section-2" class="c-Anchor">
          <span class="c-Anchor__Text">全国の加盟院一覧</span>
          <span class="c-Anchor__Arrow">
            <span class="c-IconCircle --GradientBlue">
              <span class="c-IconCircle__Icon --DirectionRoundBottom"><?php Svg::DirectionRoundBottom() ?></span>
            </span>
          </span>
        </a>
      </li>
    </ul>
  </div>
</div>
```
*/
.c-AnchorList {
  background: #F7F7F7;
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (max-width: 767px) {
  .c-AnchorList {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.c-AnchorList.--Column2 {
  --c-AnchorList--Width: 670px;
  --c-AnchorList--Column: 2;
}

.c-AnchorList.--Column1 {
  --c-AnchorList--Width: 300px;
  --c-AnchorList--Column: 1;
}

.c-AnchorList.--Column2Fit {
  --c-AnchorList--Column: 2;
}

.c-AnchorList.--Margin {
  margin-top: 100px;
}

@media (max-width: 767px) {
  .c-AnchorList.--Margin {
    margin-top: 5rem;
  }
}

.c-AnchorList__Inner {
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  max-width: var(--c-AnchorList--Width, 1040px);
}

.c-AnchorList__Grid {
  display: grid;
  grid-template-columns: repeat(var(--c-AnchorList--Column, 3), 1fr);
  justify-content: center;
  gap: 3rem 70px;
}

@media (max-width: 767px) {
  .c-AnchorList__Grid {
    grid-template-columns: 1fr;
  }
}

.c-AnchorPoint {
  display: flex;
  align-items: flex-end;
  background: transparent;
  position: absolute;
  padding-bottom: 100px;
  width: 0px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/*
#styleguide

スタッフ向け研修の運営で使用しているコンテンツ

```
```
*/
.c-Box {
  --c-Box--Color: #17A4AC;
  padding-top: 25px;
}

@media (max-width: 767px) {
  .c-Box {
    padding-top: 1.5rem;
  }
}

.c-Box.-Navy {
  --c-Box--Color: #0A2B82;
}

.c-Box.-Blue {
  --c-Box--Color: #1D86D5;
}

.c-Box.-Margin {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .c-Box.-Margin {
    margin-top: 3rem;
  }
}

.c-Box__Inner {
  background: #F5F5F5;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 25px;
  padding-bottom: 70px;
  box-shadow: 2px 2px 0px #E5E5E5;
  position: relative;
}

@media (max-width: 767px) {
  .c-Box__Inner {
    padding-top: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 5rem;
  }
}

.c-Box__Edge {
  background: #E5E5E5;
  width: 54px;
  height: 46px;
  right: -2px;
  bottom: -2px;
  position: absolute;
}

@media (max-width: 767px) {
  .c-Box__Edge {
    width: 3.4rem;
    height: 2.9rem;
  }
}

.c-Box__Edge::before, .c-Box__Edge::after {
  content: '';
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

.c-Box__Edge::before {
  background: #0A2B82;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  left: 0;
  top: 0;
}

.c-Box__Edge::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background: #fff;
  right: 0;
  bottom: 0;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.c-Box__Header {
  display: flex;
  align-items: center;
  color: var(--c-Box--Color);
  line-height: 1;
  font-weight: 400;
  margin-top: -50px;
  margin-left: -1rem;
}

@media (max-width: 767px) {
  .c-Box__Header {
    margin-top: -3rem;
  }
}

.c-Box__Title {
  font-size: 50px;
}

@media (max-width: 767px) {
  .c-Box__Title {
    font-size: 3rem;
  }
}

.c-Box__Typography {
  font-size: 18px;
  font-family: "Lato", sans-serif;
  margin-left: 20px;
}

@media (max-width: 767px) {
  .c-Box__Typography {
    font-size: 1rem;
    margin-left: 1rem;
  }
}

.c-Box__List {
  margin-top: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-Box__List {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: 3rem;
  }
}

.c-Box__Item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 2rem 3rem;
  padding-bottom: 20px;
  border-bottom: dashed 1px #1C1C1C;
}

@media (max-width: 767px) {
  .c-Box__Item {
    grid-template-columns: 1fr;
  }
}

.c-Box__Item + .c-Box__Item {
  margin-top: 20px;
}

.c-Box__Head {
  background: var(--c-Box--Color);
  color: #fff;
  position: relative;
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

@media (max-width: 767px) {
  .c-Box__Head {
    padding: 0;
    height: 3.5rem;
    width: 19rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.c-Box__Head::before {
  width: 8px;
  height: 12px;
  content: '';
  display: block;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--c-Box--Color);
  position: absolute;
  left: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .c-Box__Head::before {
    width: 1.2rem;
    height: 0.8rem;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

.c-Box__Data {
  align-self: center;
  font-size: 18px;
}

@media (max-width: 767px) {
  .c-Box__Data {
    font-size: 1.4rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.c-Box__Section2 {
  margin-top: 70px;
}

@media (max-width: 767px) {
  .c-Box__Section2 {
    margin-top: 5rem;
  }
}

.c-Box__Headline2 {
  text-align: center;
  font-size: 32px;
  color: var(--c-Box--Color);
  font-weight: 500;
}

@media (max-width: 767px) {
  .c-Box__Headline2 {
    font-size: 2.4rem;
  }
}

.c-Box__Headline2::before {
  content: '“ ';
  color: #838689;
}

.c-Box__Headline2::after {
  content: ' ”';
  color: #838689;
}

.c-Box__List2 {
  display: grid;
  margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

@media (max-width: 767px) {
  .c-Box__List2 {
    margin-top: 2rem;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.c-Box__List2.-Column2 {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

@media (max-width: 767px) {
  .c-Box__List2.-Column2 {
    grid-template-columns: 1fr;
  }
}

.c-Box__Item2 {
  background: #fff;
  min-height: 90px;
  display: flex;
  align-items: center;
  padding: 10px 40px;
  position: relative;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-Box__Item2 {
    min-height: 7rem;
    padding: 1.9rem 1rem 1.5rem 1rem;
  }
}

.c-Box__Item2::before, .c-Box__Item2::after {
  content: '';
  display: block;
  width: 4px;
  height: 50%;
  position: absolute;
  left: 0;
}

@media (max-width: 767px) {
  .c-Box__Item2::before, .c-Box__Item2::after {
    width: 50%;
    height: 0.4rem;
  }
}

.c-Box__Item2::before {
  background: #08318D;
  top: 0;
}

@media (max-width: 767px) {
  .c-Box__Item2::before {
    left: 0;
    top: 0;
  }
}

.c-Box__Item2::after {
  background: #1D86D5;
  bottom: 0;
}

@media (max-width: 767px) {
  .c-Box__Item2::after {
    left: 50%;
    top: 0;
  }
}

.c-Box__Text {
  margin-top: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-Box__Text {
    margin-top: 3rem;
  }
}

.c-Box__Table {
  margin-top: 100px;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-Box__Table {
    margin-top: 7rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

.c-BrandComparison {
  position: relative;
  z-index: 0;
  padding-top: 120px;
  padding-bottom: 100px;
}

@media (max-width: 767px) {
  .c-BrandComparison {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.c-BrandComparison__Body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}

@media (max-width: 767px) {
  .c-BrandComparison__Body {
    grid-template-columns: 1fr;
  }
}

.c-BrandComparison__Item {
  background: rgba(255, 255, 255, 0.8);
  padding-top: 70px;
  padding-bottom: 60px;
  padding-left: 50px;
  padding-right: 50px;
}

@media (max-width: 767px) {
  .c-BrandComparison__Item {
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.c-BrandComparison__Logo {
  max-width: 21.2rem;
  margin-left: auto;
  margin-right: auto;
}

.c-BrandComparison__Copy {
  text-align: center;
  margin-top: 30px;
  font-size: 20px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-BrandComparison__Copy {
    font-size: 1.8rem;
  }
}

.c-BrandComparison__Price {
  margin-top: 40px;
  max-width: 310px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-BrandComparison__Price {
    max-width: none;
    margin-top: 2rem;
  }
}

.c-BrandComparison__Index {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .c-BrandComparison__Index {
    font-size: 1.8rem;
  }
}

.c-BrandComparison__Index::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: #08318D;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .c-BrandComparison__Index::before {
    margin-bottom: 1rem;
  }
}

.c-BrandComparison__Background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/*
#styleguide

*/
.c-Breadcrumb {
  font-size: 1.1rem;
  color: #3F4146;
  color: #6C6D6E;
  font-weight: 400;
}

/*
#styleguide

アコーディオンボタン

*/
.c-ButtonAccordion {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 30px;
  align-items: center;
  color: #08318D;
}

@media (max-width: 767px) {
  .c-ButtonAccordion {
    grid-template-columns: 1fr 2rem;
  }
}

.c-ButtonAccordion.--Fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-ButtonAccordion.--En {
  font-family: "Lato", sans-serif;
}

.c-ButtonAccordion.--Active {
  --c-IconCircle--Background: #fff;
  --c-IconCircle--Fill: #0A2B82;
  --c-IconCircle--Fill2: transparent;
}

.c-ButtonAccordion__Text {
  font-size: 16px;
}

@media (max-width: 767px) {
  .c-ButtonAccordion__Text {
    font-size: 1.5rem;
  }
}

/*
#styleguide

スライダー用の矢印

```
<button type="button" class="u-ButtonCircleArrow">
  <span class="u-ButtonCircleArrow__Icon">
    <?php Svg::directionRoundRight() ?>
  </span>
</button>
```

```
<button type="button" class="u-ButtonCircleArrow --Blue --Reverse">
  <span class="u-ButtonCircleArrow__Icon">
    <?php Svg::directionRoundRight() ?>
  </span>
</button>
```

*/
.u-ButtonCircleArrow {
  background: orange;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-ButtonCircleArrow::before {
  content: '';
  flex-shrink: 0;
  flex-grow: 0;
  padding-top: 100%;
  width: 0%;
}

.u-ButtonCircleArrow.--White {
  --c-Icon--Fill: $_COLOR-PRIMARY-NAVY;
  border: solid 1px #08318D;
  background: #fff;
}

.u-ButtonCircleArrow.--Blue {
  --c-Icon--Fill: #fff;
  background: #08318D;
}

.u-ButtonCircleArrow.--Disabled {
  --c-Icon--Fill: $_COLOR-PRIMARY-NAVY;
  border: solid 1px #08318D;
  background: #fff;
}

.u-ButtonCircleArrow.--Reverse {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

@media (min-width: 1024.1px) {
  .u-ButtonCircleArrow:hover {
    --u-ButtonCircleArrow__Icon--Transform: translate(3px);
  }
}

.u-ButtonCircleArrow__Icon {
  transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--u-ButtonCircleArrow__Icon--Transform);
  transform: var(--u-ButtonCircleArrow__Icon--Transform);
  width: 22.5%;
}

/*
#styleguide


```
<a href="#" class="c-ButtonConversion --Small --Blue">
  <span class="c-ButtonConversion__Text">お問合わせフォーム</span>
  <span class="c-ButtonConversion__Icon">
    <span class="c-Icon --ArrowRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#arrow-right"></use>
      </svg>
    </span>
  </span>
</a>
```

*/
.c-ButtonConversion {
  --c-Icon--Fill: #fff;
  display: flex;
  height: min(120px, 8.33vw);
  font-size: min(22px, 1.52vw);
  align-items: center;
  justify-content: center;
  padding-left: min(60px, 4.16vw);
  padding-right: min(30px, 2.08vw);
  color: #fff;
  line-height: 1.6;
  position: relative;
}

@media (max-width: 1023px) {
  .c-ButtonConversion {
    font-size: 1.6rem;
    height: 7rem;
    padding-right: 2rem;
    padding-left: 3rem;
  }
}

@media (max-width: 767px) {
  .c-ButtonConversion {
    padding-left: 4.4rem;
  }
}

.c-ButtonConversion.--Blue {
  background: linear-gradient(to right, #80C2FF, #037DE0);
}

.c-ButtonConversion.--Blue2 {
  background: linear-gradient(to right, #0071E3, #002B9F);
}

.c-ButtonConversion.--Green {
  background: linear-gradient(to right, #6CCADB, #01959D);
}

.c-ButtonConversion.--Navy {
  background: linear-gradient(to right, #0E4A8B, #0A2B51);
}

.c-ButtonConversion.--Navy2 {
  background: linear-gradient(to left, #0A2B82, #204DB4);
}

.c-ButtonConversion.--LightBlue {
  background: linear-gradient(to right, #53A3F0, #0064B5);
}

.c-ButtonConversion.--Gold {
  background: linear-gradient(to right, #b0ab73, #8d8854);
}

.c-ButtonConversion.--Small {
  height: 60px;
  font-size: 16px;
  padding-left: 50px;
  padding-right: 20px;
}

@media (max-width: 767px) {
  .c-ButtonConversion.--Small {
    height: 5rem;
    font-size: 1.4rem;
  }
}

.c-ButtonConversion::before {
  content: '';
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 0;
}

@media (min-width: 1024.1px) {
  .c-ButtonConversion:hover {
    --c-Icon--Transform: translateX(10px);
  }
  .c-ButtonConversion:hover::before {
    width: 100%;
  }
}

.c-ButtonConversion__Text {
  flex-grow: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.c-ButtonConversion__Icon {
  width: min(20px, 1.38vw);
  margin-left: min(10px, 0.69vw);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  -webkit-transform: var(--c-Icon--Transform);
  transform: var(--c-Icon--Transform);
}

@media (max-width: 767px) {
  .c-ButtonConversion__Icon {
    width: 1.4rem;
  }
}

/*
#styleguide

ボタンの並び

*/
.c-ButtonGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  justify-content: center;
  gap: 1rem 4rem;
}

@media (max-width: 767px) {
  .c-ButtonGrid {
    width: 18rem;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
  }
}

.c-ButtonGrid.-Large {
  grid-template-columns: repeat(auto-fit, 320px);
}

@media (max-width: 767px) {
  .c-ButtonGrid.-Large {
    width: 28.5rem;
  }
}

.c-ButtonGrid.-Margin {
  margin-top: 70px;
}

@media (max-width: 767px) {
  .c-ButtonGrid.-Margin {
    margin-top: 5rem;
  }
}

/*
#styleguide

lightbox拡大用のボタン

```
<button type="button" data-src="https://placehold.jp/390x200.png" class="c-ButtonLightBox js-LightBox">
  <img src="https://placehold.jp/390x200.png" width="390" height="200" loading="lazy" alt="">
  <span class="c-ButtonLightBox__Icon">
    <img src="/we-system/build/images/common/icon-scale.svg" alt="" loading="lazy" width="25" height="25">
  </span>
</button>
```
*/
.c-ButtonLightBox {
  display: block;
  position: relative;
}

.c-ButtonLightBox__Icon {
  width: 2.5rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.c-ButtonSquare {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #08318D;
  border: solid 1px #08318D;
  font-weight: 400;
  overflow: hidden;
  position: relative;
  z-index: 0;
  transition: color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: #fff;
  width: 100%;
}

@media (max-width: 767px) {
  .c-ButtonSquare {
    border-width: max(0.1rem, 1px);
    font-size: 1.4rem;
    min-height: 4rem;
  }
}

.c-ButtonSquare::before {
  content: '';
  z-index: -1;
  width: var(--c-ButtonSquare--Width, 0%);
  height: 100%;
  background: #08318D;
  transition: width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: absolute;
  left: var(--c-ButtonSquare--Left, auto);
  right: var(--c-ButtonSquare--Right, 0);
}

@media (min-width: 1024.1px) {
  .c-ButtonSquare:hover {
    color: #fff;
    --c-ButtonSquare--Left: 0;
    --c-ButtonSquare--Right: auto;
    --c-ButtonSquare--Width: 100%;
  }
}

.c-ButtonSquare.--Single {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ButtonSquare.--Single {
    width: 15rem;
  }
}

.c-ButtonSquare.--MarginTop {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .c-ButtonSquare.--MarginTop {
    margin-top: 3rem;
  }
}

/*
#styleguide

```
<div class="w-1440">
  <div class="c-CaptionSlider js-CaptionSlider">
    <div class="c-CaptionSlider__Slider">
      <div class="swiper js-CaptionSlider__PhotoSlider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://placehold.jp/770x528.png" width="770" height="528" loading="lazy" alt="" class="c-ImageBox__Photo">
          </div>
          <div class="swiper-slide">
            <img src="https://placehold.jp/770x528.png" width="770" height="528" loading="lazy" alt="" class="c-ImageBox__Photo">
          </div>
          <div class="swiper-slide">
            <img src="https://placehold.jp/770x528.png" width="770" height="528" loading="lazy" alt="" class="c-ImageBox__Photo">
          </div>
        </div>
      </div>
      <div class="c-CaptionSlider__Arrow -Prev">
        <button type="button" class="u-ButtonCircleArrow --Blue --Reverse js-CaptionSlider__Prev">
          <span class="u-ButtonCircleArrow__Icon">
            <?php Svg::directionRoundRight() ?>
          </span>
        </button>
      </div>
      <div class="c-CaptionSlider__Arrow -Next">
        <button type="button" class="u-ButtonCircleArrow --Blue js-CaptionSlider__Next">
          <span class="u-ButtonCircleArrow__Icon">
            <?php Svg::directionRoundRight() ?>
          </span>
        </button>
      </div>
    </div>
    <div class="c-CaptionSlider__Pagination js-CaptionSlider__Pagination">
    </div>
    <div class="c-CaptionSlider__Captions">
      <div class="swiper js-CaptionSlider__CaptionSlider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <p class="c-CaptionSlider__Text">キャプションキャプション</p>
          </div>
          <div class="swiper-slide">
            <p class="c-CaptionSlider__Text">キャプションキャプション</p>
          </div>
          <div class="swiper-slide">
            <p class="c-CaptionSlider__Text">キャプションキャプション</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

*/
.c-CaptionSlider {
  background: #F7F7F7;
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .c-CaptionSlider {
    padding-bottom: 3.5rem;
  }
}

.c-CaptionSlider.--Margin {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .c-CaptionSlider.--Margin {
    margin-top: 3rem;
  }
}

.c-CaptionSlider__Slider {
  position: relative;
  overflow: hidden;
}

.c-CaptionSlider__Slider .swiper-slide {
  width: calc(100% / 3);
}

@media (max-width: 767px) {
  .c-CaptionSlider__Slider .swiper-slide {
    width: calc(100% - 4rem);
  }
}

.c-CaptionSlider__Slider::before, .c-CaptionSlider__Slider::after {
  content: '';
  width: calc(100% / 3);
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 10;
  top: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .c-CaptionSlider__Slider::before, .c-CaptionSlider__Slider::after {
    width: 2rem;
  }
}

.c-CaptionSlider__Slider::before {
  left: 0;
}

.c-CaptionSlider__Slider::after {
  right: 0;
}

.c-CaptionSlider__Arrow {
  width: 40px;
  position: absolute;
  top: 50%;
  z-index: 11;
}

@media (max-width: 767px) {
  .c-CaptionSlider__Arrow {
    width: 2.5rem;
  }
}

.c-CaptionSlider__Arrow.-Prev {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: calc(100% / 3);
}

@media (max-width: 767px) {
  .c-CaptionSlider__Arrow.-Prev {
    left: 2rem;
  }
}

.c-CaptionSlider__Arrow.-Next {
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  right: calc(100% / 3);
}

@media (max-width: 767px) {
  .c-CaptionSlider__Arrow.-Next {
    right: 2rem;
  }
}

.c-CaptionSlider__Pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

.c-CaptionSlider__Captions {
  -webkit-filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  margin-top: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 4rem);
  overflow: hidden;
  margin-bottom: 70px;
}

@media (max-width: 767px) {
  .c-CaptionSlider__Captions {
    margin-bottom: 1rem;
  }
}

.c-CaptionSlider__Captions .swiper-slide {
  width: 100%;
}

.c-CaptionSlider__Text {
  background: #fff;
  padding: 20px;
  text-align: center;
  color: #08318D;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-CaptionSlider__Text {
    padding: 1rem;
  }
}

/*
#styleguide

- スライダーのカード

*/
.c-CaseStudyCard {
  display: flex;
  flex-flow: column;
  height: 100%;
  background: #fff;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 1024.1px) {
  .c-CaseStudyCard:hover {
    opacity: 0.6;
    --c-CaseStudyCard__Thumbnail--Transform: scale(1.1);
  }
}

.c-CaseStudyCard__Thumbnail {
  width: 100%;
  overflow: hidden;
}

.c-CaseStudyCard__Thumbnail img {
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-CaseStudyCard__Thumbnail--Transform);
  transform: var(--c-CaseStudyCard__Thumbnail--Transform);
}

.c-CaseStudyCard__Details {
  width: 100%;
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.c-CaseStudyCard__Headline {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .c-CaseStudyCard__Headline {
    font-size: 1.4rem;
  }
}

.c-CaseStudyCard__Note {
  margin-top: 20px;
  width: 100%;
  font-size: 12px;
  color: #838689;
}

@media (max-width: 767px) {
  .c-CaseStudyCard__Note {
    margin-top: 1rem;
    font-size: 1.1rem;
  }
}

/*
#styleguide

加盟員事例のスライダー用のカード

2行用のコンパクトなもの。

```
<a href="#" class="c-CaseStudyCard2">
  <div class="c-CaseStudyCard2__Header">
    <div class="c-CaseStudyCard2__Thumbnail">
      <img src="https://placehold.jp/400x200.png" width="400" height="200" alt="">
    </div>
    <p class="c-CaseStudyCard2__Note">馬車道院／2005年加盟<br>医院規模／スタッフ数30名</p>
  </div>
  <div class="c-CaseStudyCard2__Details">
    <p class="c-CaseStudyCard2__Headline">売上が半分以下に激減…本部のマネジメント手法を取り入れ医院経営が成功した</p>
  </div>
</a>
```
*/
.c-CaseStudyCard2 {
  background: #fff;
  display: block;
  box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.1);
}

.c-CaseStudyCard2__Header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.c-CaseStudyCard2__Note {
  font-size: 1.2rem;
  color: #6C6D6E;
  padding-right: 1rem;
}

@media (max-width: 767px) {
  .c-CaseStudyCard2__Note {
    font-size: 1.1rem;
    line-height: 1.4;
  }
}

.c-CaseStudyCard2__Details {
  padding: 20px;
}

.c-CaseStudyCard2__Headline {
  font-weight: 500;
  display: -webkit-box;
  overflow: hidden;
  color: #1C1C1C;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: calc(3em * 1.8);
}

/*
#styleguide

```
<a href="<?php the_permalink(); ?>" class="c-CaseStudyCard3">
  <div class="c-CaseStudyCard3__Thumbnail">
    <div class="c-CaseStudyCard3__Doctor">
      <?php
      $doctor = get_field('doctor');
      $photo = $doctor['doctor-photo'];
      echo wp_get_attachment_image($photo['id'], 'full', '', array('class' => 'c-CaseStudyCard3__Image'));
      ?>
    </div>
    <div class="c-CaseStudyCard3__Photo">
      <?php
      $thumbnail = get_field('thumbnail');
      echo wp_get_attachment_image($thumbnail['id'], 'full', '', array('class' => 'c-CaseStudyCard3__Image'));
      ?>
    </div>
  </div>
  <div class="c-CaseStudyCard3__Body">
    <p class="c-CaseStudyCard3__Clinic"><?php the_title(); ?></p>
    <p class="c-CaseStudyCard3__Title"><?php echo wp_strip_all_tags(get_field('catch-copy')); ?></p>
    <p class="c-CaseStudyCard3__Details">院長	<?php echo $doctor['doctor-name']; ?><br>加盟	<?php echo $clinic['year']; ?>年／規模 スタッフ数<?php echo $clinic['staff']; ?>名</p>
    <div class="c-CaseStudyCard3__More">
      <p class="c-CaseStudyCard3__MoreText"><?php the_title(); ?>の声はこちら</p>
      <div class="c-CaseStudyCard3__MoreArrow">
        <div class="c-IconCircle --GradientBlue">
          <span class="c-IconCircle__Icon --Arrow"><?php Svg::arrowRight() ?></span>
        </div>
      </div>
    </div>
  </div>
</a>
```
*/
.c-CaseStudyCard3 {
  display: block;
  box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: #fff;
}

@media (min-width: 1024.1px) {
  .c-CaseStudyCard3:hover {
    opacity: 0.6;
    --c-CaseStudyCard3__Image--Transform: scale(1.1);
  }
}

.c-CaseStudyCard3__Thumbnail {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.c-CaseStudyCard3__Doctor {
  position: relative;
  overflow: hidden;
}

.c-CaseStudyCard3__Doctor::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.c-CaseStudyCard3__Photo {
  position: relative;
  overflow: hidden;
}

.c-CaseStudyCard3__Image {
  z-index: 1;
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-CaseStudyCard3__Image--Transform);
  transform: var(--c-CaseStudyCard3__Image--Transform);
}

.c-CaseStudyCard3__Body {
  padding: 2rem;
}

.c-CaseStudyCard3__Clinic {
  font-size: 1.8rem;
  color: #08318D;
  font-weight: 400;
  line-height: 1.5;
  min-height: 5.6rem;
}

.c-CaseStudyCard3__Title {
  font-size: 18px;
  font-weight: 500;
  color: #3F4146;
  line-height: 1.6;
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .c-CaseStudyCard3__Title {
    font-size: 1.6rem;
  }
}

.c-CaseStudyCard3__Details {
  font-size: 1.2rem;
  color: #6C6D6E;
  margin-top: 1rem;
  line-height: 1.6;
}

.c-CaseStudyCard3__More {
  display: grid;
  grid-template-columns: auto 40px;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  min-height: 5rem;
}

@media (max-width: 767px) {
  .c-CaseStudyCard3__More {
    grid-template-columns: auto 2.2rem;
    margin-top: 2rem;
  }
}

.c-CaseStudyCard3__MoreText {
  font-size: 1.4rem;
}

/*
#styleguide

- ケーススタディのスライダー

```
<div class="c-CaseStudySlider js-CaseStudySlider">
  <div class="inner-1200">
    <div class="c-CaseStudySlider__Inner">
      <div class="c-CaseStudySlider__Arrows">
        <div class="c-CaseStudySlider__ArrowsItem">
          <button type="button" class="u-ButtonCircleArrow --Blue --Reverse js-CaseStudySlider__Prev">
            <span class="u-ButtonCircleArrow__Icon">
              <?php Svg::directionRoundRight() ?>
            </span>
          </button>
        </div>
        <div class="c-CaseStudySlider__ArrowsItem">
          <button type="button" class="u-ButtonCircleArrow --Blue js-CaseStudySlider__Next">
            <span class="u-ButtonCircleArrow__Icon">
              <?php Svg::directionRoundRight() ?>
            </span>
          </button>
        </div>
      </div>
      <div class="c-CaseStudySlider__Slider">
        <div class="swiper-container js-CaseStudySlider__Container">
          <div class="swiper-wrapper">
            <article class="swiper-slide">
              <a href="#" class="c-CaseStudyCard">
                <div class="c-CaseStudyCard__Thumbnail">
                  <img src="https://placehold.jp/400x200.png" width="400" height="200" alt="">
                </div>
                <div class="c-CaseStudyCard__Details">
                  <p class="c-CaseStudyCard__Headline">売上が半分以下に激減…本部のマネジメント手法を取り入れ医院経営が成功した</p>
                  <p class="c-CaseStudyCard__Note">馬車道院／2005年加盟<br>医院規模／スタッフ数30名</p>
                </div>
              </a>
            </article>
            <article class="swiper-slide">
              <a href="#" class="c-CaseStudyCard">
                <div class="c-CaseStudyCard__Thumbnail">
                  <img src="https://placehold.jp/400x200.png" width="400" height="200" alt="">
                </div>
                <div class="c-CaseStudyCard__Details">
                  <p class="c-CaseStudyCard__Headline">売上が半分以下に激減…本部のマネジメント手法を取り入れ医院経営が成功した</p>
                  <p class="c-CaseStudyCard__Note">馬車道院／2005年加盟<br>医院規模／スタッフ数30名</p>
                </div>
              </a>
            </article>
            <article class="swiper-slide">
              <a href="#" class="c-CaseStudyCard">
                <div class="c-CaseStudyCard__Thumbnail">
                  <img src="https://placehold.jp/400x200.png" width="400" height="200" alt="">
                </div>
                <div class="c-CaseStudyCard__Details">
                  <p class="c-CaseStudyCard__Headline">売上が半分以下に激減…本部のマネジメント手法を取り入れ医院経営が成功した</p>
                  <p class="c-CaseStudyCard__Note">馬車道院／2005年加盟<br>医院規模／スタッフ数30名</p>
                </div>
              </a>
            </article>
            <article class="swiper-slide">
              <a href="#" class="c-CaseStudyCard">
                <div class="c-CaseStudyCard__Thumbnail">
                  <img src="https://placehold.jp/400x200.png" width="400" height="200" alt="">
                </div>
                <div class="c-CaseStudyCard__Details">
                  <p class="c-CaseStudyCard__Headline">売上が半分以下に激減…本部のマネジメント手法を取り入れ医院経営が成功した</p>
                  <p class="c-CaseStudyCard__Note">馬車道院／2005年加盟<br>医院規模／スタッフ数30名</p>
                </div>
              </a>
            </article>
            <article class="swiper-slide">
              <a href="#" class="c-CaseStudyCard">
                <div class="c-CaseStudyCard__Thumbnail">
                  <img src="https://placehold.jp/400x200.png" width="400" height="200" alt="">
                </div>
                <div class="c-CaseStudyCard__Details">
                  <p class="c-CaseStudyCard__Headline">売上が半分以下に激減…本部のマネジメント手法を取り入れ医院経営が成功した</p>
                  <p class="c-CaseStudyCard__Note">馬車道院／2005年加盟<br>医院規模／スタッフ数30名</p>
                </div>
              </a>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
*/
/**
 * Swiper 7.0.9
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 18, 2021
 */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}

:root {
  --swiper-theme-color: #007aff;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

/* 3D Effects */
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}

.swiper-button-lock {
  display: none;
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: opacity, height, -webkit-transform;
  transition-property: transform, opacity, height;
  transition-property: transform, opacity, height, -webkit-transform;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.c-CaseStudySlider {
  position: relative;
  z-index: 0;
  padding-bottom: 100px;
}

.c-CaseStudySlider::before {
  content: '';
  background: #F7F7F7;
  display: block;
  width: 100%;
  height: calc(100% - 120px);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.c-CaseStudySlider__Inner {
  display: grid;
  grid-template-columns: max(140px, calc(50% - 510px)) 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 767px) {
  .c-CaseStudySlider__Inner {
    display: block;
  }
}

.c-CaseStudySlider__Arrows {
  display: grid;
  grid-template-columns: 40px 40px;
  gap: 10px;
  justify-self: flex-end;
  padding-left: var(--inner-padding);
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  .c-CaseStudySlider__Arrows {
    display: none;
  }
}

.c-CaseStudySlider__Slider {
  width: 100%;
  flex-grow: 0;
  -webkit-filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  overflow: hidden;
}

.c-CaseStudySlider__Slider .swiper-slide {
  display: block;
  width: calc(98% / 3);
  max-width: 400px;
}

@media (max-width: 1023px) {
  .c-CaseStudySlider__Slider .swiper-slide {
    width: calc(99% / 2);
  }
}

@media (max-width: 767px) {
  .c-CaseStudySlider__Slider .swiper-slide {
    width: 33.5rem;
    max-width: none;
  }
}

.c-ComparisonTable {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px 0;
  font-size: 18px;
  position: relative;
}

@media (max-width: 767px) {
  .c-ComparisonTable {
    font-size: 1.4rem;
    gap: 2px;
  }
}

.c-ComparisonTable__Row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1px 10px;
}

@media (max-width: 767px) {
  .c-ComparisonTable__Row {
    grid-template-columns: 1fr 1fr;
    gap: 0 3.5rem;
  }
}

.c-ComparisonTable__Row:nth-child(odd) {
  --c-ComparisonTable__Cell--Color: #F5F5F5;
}

@media (max-width: 767px) {
  .c-ComparisonTable__Row.--Header {
    gap: 2px;
  }
}

.c-ComparisonTable__Body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

@media (max-width: 767px) {
  .c-ComparisonTable__Body {
    grid-column: span 2;
    gap: 3.5rem;
  }
}

.c-ComparisonTable__Index {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A2B82;
  color: #fff;
}

@media (max-width: 767px) {
  .c-ComparisonTable__Index {
    display: none;
  }
}

.c-ComparisonTable__Header {
  background: #8EA2C6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-ComparisonTable__Header.--Navy {
  background: #0A2B82;
  color: #fff;
}

.c-ComparisonTable__Header.--Blue {
  background: #1D86D5;
}

.c-ComparisonTable__Header.--Sp {
  display: none;
}

@media (max-width: 767px) {
  .c-ComparisonTable__Header.--Sp {
    display: flex;
  }
}

.c-ComparisonTable__Cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ComparisonTable__Cell--Color);
  padding: 5px 0;
  font-weight: 500;
  font-family: "Lato", sans-serif;
}

.c-ComparisonTable__Cell.--Large {
  color: #0A2B82;
}

.c-ComparisonTable__Arrow {
  position: absolute;
  top: 50%;
  left: calc((100% - 140px) / 2 + 140px - 15px);
  width: 30px;
  z-index: 1;
}

@media (max-width: 767px) {
  .c-ComparisonTable__Arrow {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1.5rem;
  }
}

.c-ComparisonTable2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px 0;
  font-size: 18px;
  position: relative;
}

@media (max-width: 767px) {
  .c-ComparisonTable2 {
    font-size: 1.4rem;
    gap: 2px;
  }
}

.c-ComparisonTable2__Row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1px 10px;
}

@media (max-width: 767px) {
  .c-ComparisonTable2__Row {
    grid-template-columns: 1fr;
    gap: 0 3.5rem;
  }
}

.c-ComparisonTable2__Row:nth-child(odd) {
  --c-ComparisonTable2__Cell--Color: #F5F5F5;
}

@media (max-width: 767px) {
  .c-ComparisonTable2__Row.--Header {
    gap: 2px;
  }
}

.c-ComparisonTable2__Body {
  display: grid;
  grid-template-columns: 100%;
  gap: 1px;
}

.c-ComparisonTable2__Index {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A2B82;
  color: #fff;
}

@media (max-width: 767px) {
  .c-ComparisonTable2__Index {
    display: none;
  }
}

.c-ComparisonTable2__Header {
  background: #8EA2C6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-ComparisonTable2__Header.--Navy {
  background: #0A2B82;
  color: #fff;
}

.c-ComparisonTable2__Header.--Blue {
  background: #1D86D5;
}

.c-ComparisonTable2__Cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ComparisonTable2__Cell--Color);
  padding: 5px 0;
  font-weight: 500;
  font-family: "Lato", sans-serif;
}

.c-ComparisonTable2__Cell.--Large {
  color: #0A2B82;
}

.c-ComparisonTable2__Arrow {
  position: absolute;
  top: 50%;
  left: calc((100% - 140px) / 2 + 140px - 15px);
  width: 30px;
  z-index: 1;
}

@media (max-width: 767px) {
  .c-ComparisonTable2__Arrow {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1.5rem;
  }
}

/*
#styleguide


```
<div class="c-ContactBox -Margin">
  <div class="c-ContactBox__Item">
    <div class="c-ContactBox__Inner">
      <div class="c-ContactBox__Header">
        <div class="c-ContactBox__Icon">
          <img src="/we-system/build/images/components/ContactBox/phone.svg" alt="" loading="lazy">
        </div>
        <p class="c-ContactBox__Title">歯科医師向け専用ダイヤル</p>
      </div>
      <a href="tel:03-6434-1463" class="c-ContactBox__Tel">03-6434-1463</a>
    </div>
  </div>
  <div class="c-ContactBox__Item">
    <div class="c-ContactBox__Inner">
      <div class="c-ContactBox__Header">
        <div class="c-ContactBox__Icon">
          <img src="/we-system/build/images/components/ContactBox/mail.svg" alt="" loading="lazy">
        </div>
        <p class="c-ContactBox__Title">メールでの無料お問合わせ</p>
      </div>
      <div class="c-ContactBox__Button">
        <a href="#" class="c-ButtonConversion --Navy2">
          <span class="c-ButtonConversion__Text">お問合わせフォーム</span>
          <span class="c-ButtonConversion__Icon">
            <span class="c-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

```

*/
.c-ContactBox {
  border: solid 1px #9FA8AF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding-top: min(60px, 4.16vw);
  padding-bottom: min(60px, 4.16vw);
}

@media (max-width: 767px) {
  .c-ContactBox {
    display: block;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
}

.c-ContactBox.-Margin {
  margin-top: 2rem;
}

.c-ContactBox__Item {
  width: 50%;
}

@media (max-width: 1024px) {
  .c-ContactBox__Item {
    width: 100%;
  }
}

.c-ContactBox__Item + .c-ContactBox__Item {
  border-left: solid 1px #9FA8AF;
}

@media (max-width: 767px) {
  .c-ContactBox__Item + .c-ContactBox__Item {
    border-left: none;
    border-top: solid 1px #9FA8AF;
    margin-top: 2rem;
    padding-top: 2rem;
  }
}

@media (max-width: 767px) {
  .c-ContactBox__Item.-SpBorderNone {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

.c-ContactBox__Inner {
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  padding-left: min(50px, 3.47vw);
  padding-right: min(50px, 3.47vw);
}

@media (max-width: 767px) {
  .c-ContactBox__Inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.c-ContactBox__Header {
  display: grid;
  grid-template-columns: min(40px, 2.77vw) 1fr;
  align-items: center;
  gap: min(10px, 0.69vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .c-ContactBox__Header {
    gap: 0.5rem;
    font-size: 1.8rem;
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
  }
}

@media (max-width: 767px) {
  .c-ContactBox__Icon {
    width: 3rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.c-ContactBox__Title {
  font-size: 20px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-ContactBox__Title {
    font-size: 1.8rem;
  }
}

.c-ContactBox__Title2 {
  font-size: 30px;
  text-align: center;
  font-weight: 400;
}

@media (max-width: 1023px) {
  .c-ContactBox__Title2 {
    font-size: 2rem;
  }
}

.c-ContactBox__Tel {
  font-size: min(70px, 4.86vw);
  font-family: "Lato", sans-serif;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  color: #0A2B82;
  line-height: 1.4;
}

@media (max-width: 1023px) {
  .c-ContactBox__Tel {
    font-size: 4.2rem;
  }
}

.c-ContactBox__Time {
  font-size: 16px;
  color: #3F4146;
  text-align: center;
}

@media (max-width: 767px) {
  .c-ContactBox__Time {
    font-size: 1.2rem;
  }
}

.c-ContactBox__Button {
  margin-left: auto;
  margin-right: auto;
  max-width: 39rem;
}

/*
#styleguide

個人情報保護ページなどにあるコンタクトボックス

```
<div class="c-ContactBox2 -Margin">
  <p class="c-ContactBox2__Title">ホワイトエッセンス株式会社/FC事業本部</p>
  <p class="c-ContactBox2__Text">電話：03-6434-1330 <span class="hidden-tb-less"> / </span><br class="visible-tb-less">ファックス：03-5469-2103<br class="visible-tb-less">Eメール：dental_seminar@whiteessence.com</p>
</div>
```
*/
.c-ContactBox2 {
  background: #F5F5F5;
  padding: 3rem;
}

.c-ContactBox2.-Margin {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .c-ContactBox2.-Margin {
    margin-left: calc(var(--inner-padding, 0) * -1);
    margin-right: calc(var(--inner-padding, 0) * -1);
    margin-top: 2rem;
  }
}

@media (max-width: 767px) {
  .c-ContactBox2.-Negative {
    padding: var(--inner-padding);
  }
}

.c-ContactBox2__Title {
  color: #08318D;
  font-size: 20px;
  font-weight: 500;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ContactBox2__Title {
    font-size: 1.6rem;
    margin-left: 0;
  }
}

.c-ContactBox2__Text {
  text-align: center;
  margin-top: 1rem;
  color: #6C6D6E;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-ContactBox2__Text {
    font-size: 1.4rem;
    text-align: left;
  }
}

/*
#styleguide

背景に色のついたボックス

*/
.c-Container.--Gray {
  background: #F7F7F7;
}

.c-Container.--Padding1 {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (max-width: 767px) {
  .c-Container.--Padding1 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.c-Container.--Padding2 {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 767px) {
  .c-Container.--Padding2 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/*
#styleguide

```
<div class="c-Days">
  <span class="c-Days__Date">1日目</span>
  <span class="c-Days__Arrow"></span>
  <span class="c-Days__Text">仕事に対する考え方について、ホワイトエッセンスコンセプト</span>
</div>
```
*/
.c-Days {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 20px;
}

@media (max-width: 767px) {
  .c-Days {
    display: block;
  }
}

.c-Days__Date {
  white-space: nowrap;
  font-weight: 500;
  color: #08318D;
  font-size: 20px;
  display: block;
}

@media (max-width: 767px) {
  .c-Days__Date {
    font-size: 1.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.c-Days__Arrow {
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 12px;
  height: 19px;
  background: #8EA2C6;
}

@media (max-width: 767px) {
  .c-Days__Arrow {
    display: none;
  }
}

.c-Days__Text {
  display: block;
}

@media (max-width: 767px) {
  .c-Days__Text {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: dashed 1px #1C1C1C;
    font-size: 1.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/*
#styleguide

ドクターの声リスト

*/
.c-DoctorVoice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 767px) {
  .c-DoctorVoice {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.c-DoctorVoice__Item {
  background: #fff;
  padding: 30px;
}

@media (max-width: 1023px) {
  .c-DoctorVoice__Item {
    padding: 2rem;
  }
}

.c-DoctorVoice__Header {
  display: grid;
  grid-template-columns: 1fr 137px;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 1023px) {
  .c-DoctorVoice__Header {
    grid-template-columns: 1fr 80px;
  }
}

@media (max-width: 767px) {
  .c-DoctorVoice__Header {
    grid-template-columns: 1fr;
  }
}

.c-DoctorVoice__Name {
  font-weight: 500;
  color: #08318D;
}

@media (max-width: 767px) {
  .c-DoctorVoice__Name {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .c-DoctorVoice__Photo {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.c-DoctorVoice__Text {
  margin-top: 10px;
  color: #3F4146;
  font-size: 1.4rem;
}

@media (max-width: 767px) {
  .c-DoctorVoice__Text {
    margin-top: 2rem;
  }
}

/*
#styleguide

サイト内で使用するスクロール時のアニメーション

*/
.c-Effect {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.c-Effect.-PopUp {
  visibility: hidden;
}

.c-Effect.-PopUp.-Entry {
  -webkit-animation: pop-up 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation: pop-up 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
}

/*
#styleguide

*/
.c-Faq__Button::before, .c-Faq__AnswerBody::before {
  font-family: "Lato", sans-serif;
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
  width: 55px;
  margin-right: 20px;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  align-self: flex-start;
}

@media (max-width: 767px) {
  .c-Faq__Button::before, .c-Faq__AnswerBody::before {
    font-size: 2.4rem;
    width: 3rem;
    margin-right: 1rem;
  }
}

.c-Faq__Button {
  display: flex;
  padding: 20px 30px;
  background: #F5F5F5;
  font-size: 18px;
  color: #1C1C1C;
  align-items: center;
  font-weight: 300;
}

@media (max-width: 767px) {
  .c-Faq__Button {
    font-size: 1.4rem;
    padding: 2rem 1.5rem;
  }
}

.c-Faq__Button::before {
  content: 'Q .';
}

.c-Faq__Button:hover {
  --c-IconCircle--Scale: scale(1.2);
  --c-IconCircle--Fill: #08318D;
  --c-IconCircle--Fill2: #08318D;
  --c-IconCircle--Background: #fff;
  background: #08318D;
  color: #fff;
}

.c-Faq__Button.--Active {
  --c-IconCircle--Fill: #08318D;
  --c-IconCircle--Fill2: transparent;
  --c-IconCircle--Background: #fff;
  background: #08318D;
  color: #fff;
}

.c-Faq__ButtonText {
  padding-top: 10px;
  padding-bottom: 10px;
  flex-grow: 1;
  display: block;
}

@media (max-width: 767px) {
  .c-Faq__ButtonText {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
}

.c-Faq__ButtonIcon {
  width: 40px;
  flex-shrink: 0;
  margin-left: 20px;
  align-self: center;
}

@media (max-width: 767px) {
  .c-Faq__ButtonIcon {
    width: 2.2rem;
    margin-left: 1rem;
  }
}

.c-Faq__Answer {
  display: none;
}

@media (max-width: 767px) {
  .c-Faq__Answer {
    font-size: 1.4rem;
  }
}

.c-Faq__AnswerBody {
  background: #08318D;
  color: #fff;
  border-top: solid 1px #8EA2C6;
  padding: 30px 90px 40px 30px;
  display: flex;
}

@media (max-width: 767px) {
  .c-Faq__AnswerBody {
    padding: 2rem 1.5rem;
  }
}

.c-Faq__AnswerBody::before {
  content: 'A .';
}

.c-Faq__AnswerText {
  padding-top: 10px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .c-Faq__AnswerText {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
}

.c-Faq__Link {
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .c-Faq__Link {
    padding-bottom: 2rem;
  }
}

/*
#styleguide

説明テキスト付きの写真

```
<figure class="c-Figure">
  <img src="https://placehold.jp/150x150.png" width="150" height="150" loading="lazy" alt="">
  <figcaption class="c-Figure__Caption">テキスト</figcaption>
</figure>
```
*/
/*
#styleguide

オプションで画像に鏡面効果をつける場合は画像に `c-Figure__Refrect` を追加する

```
<figure class="c-Figure">
  <img src="https://placehold.jp/150x150.png" width="150" height="150" loading="lazy" alt="" class="c-Figure__Refrect">
  <figucaption class="c-Figure__Caption">テキスト</figucaption>
</figure>
```
*/
.c-Figure {
  display: block;
}

.c-Figure__Refrect {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, 0.3)));
}

.c-Figure__Caption {
  display: block;
  font-size: 1.4rem;
  color: #6C6D6E;
  margin-top: 0.8rem;
}

.c-Figure__Caption.-Inner {
  padding-left: 1rem;
  padding-right: 1rem;
}

/*
#styleguide

標準的なカラム

*/
.c-Grid {
  display: grid;
}

.c-Grid.--Anchor {
  grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  justify-content: center;
  gap: 3rem 70px;
}

@media (max-width: 767px) {
  .c-Grid.--Anchor {
    grid-template-columns: 1fr;
  }
}

.c-Grid.--Anchor2 {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.c-Grid.--Preset1 {
  grid-template-columns: 1fr;
  gap: 7rem;
}

.c-Grid.--Preset2 {
  grid-template-columns: 1fr 1fr;
  gap: 5rem 8rem;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .c-Grid.--Preset2 {
    grid-template-columns: 1fr;
  }
}

.c-Grid.--Preset3 {
  grid-template-columns: 1fr 1fr;
  gap: 3rem 0;
}

@media (max-width: 767px) {
  .c-Grid.--Preset3 {
    grid-template-columns: 1fr;
  }
}

.c-Grid.--Preset4 {
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

@media (max-width: 767px) {
  .c-Grid.--Preset4 {
    grid-template-columns: 1fr;
  }
}

.c-Grid.--Preset5 {
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
}

@media (max-width: 767px) {
  .c-Grid.--Preset5 {
    grid-template-columns: 1fr;
  }
}

.c-GridTable {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2px 0;
}

@media (max-width: 767px) {
  .c-GridTable {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.c-GridTable__Header {
  background: #0A2B82;
  color: #fff;
  padding: 10px 30px;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .c-GridTable__Header {
    font-size: 1.8rem;
    padding: 0.5rem 2rem;
  }
}

.c-GridTable__Data {
  display: flex;
  align-items: center;
  background: #F7F7F7;
  padding: 10px 40px;
}

@media (max-width: 767px) {
  .c-GridTable__Data {
    padding: 1rem 2rem 3rem;
  }
  .c-GridTable__Data:last-of-type {
    padding-bottom: 1rem;
  }
}

/*
#styleguide

*/
.c-HeaderLead {
  text-align: center;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 30px;
}

@media (max-width: 767px) {
  .c-HeaderLead {
    font-size: 1.8rem;
  }
}

.c-HeaderLead.--Margin {
  margin-top: 100px;
}

@media (max-width: 767px) {
  .c-HeaderLead.--Margin {
    margin-top: 5rem;
  }
}

.c-HeaderLead sup {
  font-size: 40%;
}

/*
#styleguide


```
<h1 class="c-Headline --Preset1 --Center">タイトル</h1>
```

```
<h1 class="c-Headline --Preset2 --Center">タイトル</h1>
```

```
<h1 class="c-Headline --Preset3 --Center">タイトル</h1>
```

*/
.c-Headline.--Preset1 {
  font-size: 26px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.13em;
  margin-right: -0.13em;
}

@media (max-width: 767px) {
  .c-Headline.--Preset1 {
    font-size: 1.6rem;
  }
}

.c-Headline.--Preset2 {
  font-size: 42px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

@media (max-width: 767px) {
  .c-Headline.--Preset2 {
    font-size: 2.2rem;
  }
}

.c-Headline.--Preset3 {
  font-size: 24px;
}

@media (max-width: 767px) {
  .c-Headline.--Preset3 {
    font-size: 1.6rem;
  }
}

.c-Headline.--Preset3::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: #1C1C1C;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .c-Headline.--Preset3::before {
    width: 2.2rem;
  }
}

.c-Headline.--Preset4 {
  font-size: 24px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

@media (max-width: 767px) {
  .c-Headline.--Preset4 {
    font-size: 1.4rem;
  }
}

.c-Headline.--Preset5 {
  font-size: 30px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

@media (max-width: 767px) {
  .c-Headline.--Preset5 {
    font-size: 2.2rem;
  }
}

.c-Headline.--Navy {
  color: #08318D;
}

.c-Headline.--Center {
  text-align: center;
}

.c-Headline.--Margin {
  margin-bottom: 3rem;
}

/*
#styleguide

```
<h2 class="c-HeadlineAngle"><span class="c-HeadlineAngle__Inner">ポスティングチラシ</span></h2>
```

*/
.c-HeadlineAngle {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  position: relative;
  margin-bottom: 50px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-HeadlineAngle {
    min-width: auto;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 3rem;
  }
}

.c-HeadlineAngle::before, .c-HeadlineAngle::after {
  content: '';
  display: block;
  width: 22px;
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-clip-path: polygon(0 50%, 95.46% 0, 100% 0, 4.54% 50%, 100% 100%, 95.46% 100%);
  clip-path: polygon(0 50%, 95.46% 0, 100% 0, 4.54% 50%, 100% 100%, 95.46% 100%);
  background: #0A2B82;
}

@media (max-width: 767px) {
  .c-HeadlineAngle::before, .c-HeadlineAngle::after {
    -webkit-clip-path: polygon(0 50%, 93.34% 0, 100% 0, 6.66% 50%, 100% 100%, 93.34% 100%);
    clip-path: polygon(0 50%, 93.34% 0, 100% 0, 6.66% 50%, 100% 100%, 93.34% 100%);
    width: 1.6rem;
  }
}

.c-HeadlineAngle::before {
  left: 0;
}

.c-HeadlineAngle::after {
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.c-HeadlineAngle.--Fit {
  min-width: auto;
  width: 100%;
  margin-bottom: 0;
}

.c-HeadlineAngle.--MarginNone {
  margin-bottom: 0;
}

.c-HeadlineAngle__Inner {
  background: #0A2B82;
  display: flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  font-size: 22px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
}

@media (max-width: 767px) {
  .c-HeadlineAngle__Inner {
    font-size: 1.6rem;
    min-height: 3.8rem;
  }
}

.c-HeadlineAngle__Inner::before, .c-HeadlineAngle__Inner::after {
  content: '';
  display: block;
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  z-index: 1;
  background: #0A2B82;
}

@media (max-width: 767px) {
  .c-HeadlineAngle__Inner::before, .c-HeadlineAngle__Inner::after {
    width: 1.5rem;
  }
}

.c-HeadlineAngle__Inner::before {
  right: 100%;
}

.c-HeadlineAngle__Inner::after {
  left: 100%;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*
#styleguide

背景色が青色の見出し

```
<h2 class="c-HeadlineBand">オフィスホワイトニング材</h2>
```
*/
.c-HeadlineBand {
  color: #fff;
  background: #3E7FDD;
  padding: 0.5rem;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  font-size: 30px;
  line-height: 1.6;
  margin-bottom: 50px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-HeadlineBand {
    margin-bottom: 3rem;
    font-size: 1.8rem;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
}

.c-HeadlineBand.-Margin0 {
  margin-bottom: 0;
}

.c-HeadlineBand.-Margin2 {
  margin-bottom: 2rem;
}

.c-HeadlineBand.-Small {
  font-size: 20px;
}

@media (max-width: 767px) {
  .c-HeadlineBand.-Small {
    font-size: 1.6rem;
  }
}

.c-HeadlineBand.-Left {
  text-align: left;
}

.c-HeadlineBand.-Negative {
  margin-left: -30px;
  margin-right: -30px;
}

@media (max-width: 767px) {
  .c-HeadlineBand.-Negative {
    margin-left: calc(var(--inner-padding) * -1);
    margin-right: calc(var(--inner-padding) * -1);
  }
}

.c-HeadlineBand.-Navy {
  background: #0A2B82;
}

/*
#styleguide

下にボーダーがついている見出し

```
<p class="c-HeadlineBottomBorder">ホワイトエッセンスについて</p>
```
*/
.c-HeadlineBottomBorder {
  padding-bottom: 1rem;
  border-bottom: solid 1px #08318D;
  color: #08318D;
  font-size: 24px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .c-HeadlineBottomBorder {
    font-size: 1.7rem;
  }
}

/*
#styleguide

```
<p class="c-HeadlineBox">マニュアル例一覧</p>
```

白いボックスの見出し
*/
.c-HeadlineBox {
  min-height: 123px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #1C1C1C;
  padding: 20px 30px;
  text-align: center;
}

@media (max-width: 767px) {
  .c-HeadlineBox {
    min-height: 10rem;
    font-size: 1.7rem;
    padding: 1rem 2rem;
  }
}

.c-HeadlineBox::before, .c-HeadlineBox::after {
  content: '';
  display: block;
  pointer-events: none;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1;
}

.c-HeadlineBox::before {
  border-top: solid 4px #0A2B82;
  border-left: solid 4px #1D86D5;
  left: 0;
  top: 0;
}

.c-HeadlineBox::after {
  border-bottom: solid 4px #0A2B82;
  border-right: solid 4px #1D86D5;
  right: 0;
  bottom: 0;
}

.c-HeadlineBox.-Margin {
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .c-HeadlineBox.-Margin {
    margin-bottom: 2rem;
  }
}

/*
#styleguide

見出しの上にボーダーがあるタイトル

```
<h2 class="c-HeadlineTopBorder">お問合わせについて</h2>
```

*/
.c-HeadlineTopBorder {
  font-size: 30px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 767px) {
  .c-HeadlineTopBorder {
    font-size: 2.2rem;
  }
}

.c-HeadlineTopBorder::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: #0A2B82;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .c-HeadlineTopBorder::before {
    width: 4rem;
    margin-bottom: 2rem;
  }
}

.c-HeadlineTopBorder.-Margin {
  margin-bottom: 70px;
}

@media (max-width: 767px) {
  .c-HeadlineTopBorder.-Margin {
    margin-bottom: 4rem;
  }
}

/*
#styleguide

下層ページ用の見出し

*/
.c-HeadlineUnderlayer {
  text-align: center;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.05em;
}

.c-HeadlineUnderlayer.--Level1 {
  font-size: 30px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Level1 {
    font-size: 2rem;
  }
}

.c-HeadlineUnderlayer.--Level2 {
  font-size: 30px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Level2 {
    font-size: 2.2rem;
  }
}

.c-HeadlineUnderlayer.--Level2Border {
  font-size: 30px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Level2Border {
    font-size: 2.2rem;
  }
}

.c-HeadlineUnderlayer.--Level2Border::before {
  content: '';
  display: block;
  width: 6rem;
  height: 2px;
  background: #0A2B82;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.c-HeadlineUnderlayer.--Level3 {
  font-size: 20px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Level3 {
    font-size: 1.8rem;
  }
}

.c-HeadlineUnderlayer.--Level4 {
  font-size: 42px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Level4 {
    font-size: 2.2rem;
  }
}

.c-HeadlineUnderlayer.--Level5 {
  font-size: 26px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Level5 {
    font-size: 1.6rem;
  }
}

.c-HeadlineUnderlayer.--Margin1 {
  margin-bottom: 50px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--Margin1 {
    margin-bottom: 3rem;
  }
}

.c-HeadlineUnderlayer.--MarginBoth {
  margin-top: 100px;
  margin-bottom: 120px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--MarginBoth {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

.c-HeadlineUnderlayer.--MarginBoth2 {
  margin-top: 120px;
  margin-bottom: 50px;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--MarginBoth2 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

.c-HeadlineUnderlayer.--MarginBoth3 {
  margin-top: 120px;
  margin-bottom: 3rem;
}

@media (max-width: 767px) {
  .c-HeadlineUnderlayer.--MarginBoth3 {
    margin-top: 3rem;
  }
}

/*
#overview

SVGアイコン
*/
.c-Icon {
  display: block;
  position: relative;
}

.c-Icon::after {
  content: '';
  display: block;
}

.c-Icon > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/*
#styleguide

⭐️ arrow-right

```
<span class="c-Icon --ArrowRight">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#arrow-right"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowRight::after {
  padding-top: 60%;
}

/*
#styleguide

⭐️ check

```
<span class="c-Icon --Check">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#check"></use>
  </svg>
</span>
```
*/
.c-Icon.--Check::after {
  padding-top: 85.56154%;
}

/*
#styleguide

⭐️ clinic

```
<span class="c-Icon --Clinic">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#clinic"></use>
  </svg>
</span>
```
*/
.c-Icon.--Clinic::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ clinic-bold

```
<span class="c-Icon --ClinicBold">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#clinic-bold"></use>
  </svg>
</span>
```
*/
.c-Icon.--ClinicBold::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ direction-bottom

```
<span class="c-Icon --DirectionBottom">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#direction-bottom"></use>
  </svg>
</span>
```
*/
.c-Icon.--DirectionBottom::after {
  padding-top: 63.63636%;
}

/*
#styleguide

⭐️ direction-right

```
<span class="c-Icon --DirectionRoundRight">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#direction-round-right"></use>
  </svg>
</span>
```
*/
.c-Icon.--DirectionRoundRight::after {
  padding-top: 148.83721%;
}

/*
#styleguide

⭐️ direction-round-bottom

```
<span class="c-Icon --DirectionRoundBottom">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#direction-round-bottom"></use>
  </svg>
</span>
```
*/
.c-Icon.--DirectionRoundBottom::after {
  padding-top: 67.1875%;
}

/*
#styleguide

⭐️ medical-record

```
<span class="c-Icon --MedicalRecord">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#medical-record"></use>
  </svg>
</span>
```
*/
.c-Icon.--MedicalRecord::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ medical-record-bold

```
<span class="c-Icon --MedicalRecordBold">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#medical-record-bold"></use>
  </svg>
</span>
```
*/
.c-Icon.--MedicalRecordBold::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ pen

```
<span class="c-Icon --Pen">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#pen"></use>
  </svg>
</span>
```
*/
.c-Icon.--Pen::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ pen

```
<span class="c-Icon --PenBold">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#pen-bold"></use>
  </svg>
</span>
```
*/
.c-Icon.--PenBold::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ play

```
<span class="c-Icon --Play">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#play"></use>
  </svg>
</span>
```
*/
.c-Icon.--Play::after {
  padding-top: 115.38462%;
}

/*
#styleguide

⭐️ plus

```
<span class="c-Icon --Plus">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#plus"></use>
  </svg>
</span>
```
*/
.c-Icon.--Plus::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ blank

```
<span class="c-Icon --Blank">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#blank"></use>
  </svg>
</span>
```
*/
.c-Icon.--Blank::after {
  padding-top: 79.08163%;
}

/*
#styleguide

⭐️ blank

```
<span class="c-Icon --ArrowFillRight">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#arrow-fill-right"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowFillRight::after {
  padding-top: 166.03774%;
}

/*
#styleguide

⭐️ blank

```
<span class="c-Icon --ArrowFillBottom">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#arrow-fill-bottom"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowFillBottom::after {
  padding-top: 60.22727%;
}

/*
#styleguide

⭐️ メインビジュアルA 1

```
<span class="c-Icon -MainvisualCopy1">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-1"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy1::after {
  padding-top: 44.00734%;
}

/*
#styleguide

⭐️ メインビジュアルA 2

```
<span class="c-Icon -MainvisualCopy2">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-2"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy2::after {
  padding-top: 32.19153%;
}

/*
#styleguide

⭐️ メインビジュアルA 3

```
<span class="c-Icon -MainvisualCopy3">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-3"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy3::after {
  padding-top: 26.92216%;
}

/*
#styleguide

⭐️ メインビジュアルA 4

```
<span class="c-Icon -MainvisualCopy4">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-4"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy4::after {
  padding-top: 26.53418%;
}

/*
#styleguide

⭐️ メインビジュアルA 5

```
<span class="c-Icon -MainvisualCopy5">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-5"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy5::after {
  padding-top: 26.69635%;
}

/*
#styleguide

⭐️ メインビジュアルA 6 PC版

```
<span class="c-Icon -MainvisualCopy6Pc">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-6-pc"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy6Pc::after {
  padding-top: 26.74801%;
}

/*
#styleguide

⭐️ メインビジュアルA 6 SP版

```
<span class="c-Icon -MainvisualCopy6Sp">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#mainvisual-copy-6-sp"></use>
  </svg>
</span>
```
*/
.c-Icon.-MainvisualCopy6Sp::after {
  padding-top: 54.60317%;
}

/*
#styleguide

⭐️ メインビジュアルA 6 SP版

```
<span class="c-Icon -Tooth">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#tooth"></use>
  </svg>
</span>
```
*/
.c-Icon.--Tooth::after {
  padding-top: 100%;
}

/*
#styleguide

⭐️ メインビジュアルA 6 SP版

```
<span class="c-Icon -Scanner">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/we-system/build/svg-sprite/sprite.svg#tooth"></use>
  </svg>
</span>
```
*/
.c-Icon.--Scanner::after {
  padding-top: 100%;
}

/*
#styleguide

丸アイコンついきの矢印


アニメーションの設定
ホバー対象に以下の変数を追加することでアニメーションを設定可能

--c-IconCircle--Offset: 10%;
--c-IconCircle--Scale: scale(1.2);



*/
/*
#styleguide

プラスアイコン

plusアイコンのアクティブ化

--c-IconCircle--Fill2: transparent;

色を反転させる場合

--c-IconCircle--Background: #fff;
--c-IconCircle--Fill: #0A2B82;
--c-IconCircle--Fill2: transparent;

```
<span class="c-IconCircle --GradientBlue">
  <span class="c-IconCircle__Icon --Plus"><?php Svg::plus() ?></span>
</span>
```
*/
/*
#styleguide

矢印

ホバーアクション
--c-IconCircle--Offset: 10%;
--c-IconCircle--Scale: scale(1.2);

```
<div class="c-IconCircle --GradientBlue">
  <span class="c-IconCircle__Icon --Arrow"><?php Svg::arrowRight() ?></span>
</div>
```
*/
.c-IconCircle {
  --c-Icon--Fill: var(--c-IconCircle--Fill, #fff);
  --c-Icon--Fill2: var(--c-IconCircle--Fill2, #fff);
  border-radius: 50%;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-IconCircle::before {
  content: '';
  display: block;
  padding-top: 100%;
  width: 0%;
}

.c-IconCircle::after {
  content: '';
  background: var(--c-IconCircle--Background);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 50%;
  transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-IconCircle--Scale);
  transform: var(--c-IconCircle--Scale);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.c-IconCircle.--White {
  background: var(--c-IconCircle--Background, #fff);
  border: solid 1px #0A2B82;
  --c-Icon--Fill: var(--c-IconCircle--Fill, #0A2B82);
  --c-Icon--Fill2: var(--c-IconCircle--Fill2, #0A2B82);
}

.c-IconCircle.--GradientBlue::after {
  background: var(--c-IconCircle--Background, linear-gradient(to right, #0A2B82, #204DB4));
}

.c-IconCircle__Icon {
  display: block;
}

.c-IconCircle__Icon.--Arrow {
  width: 50%;
  transition: margin-left 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  margin-left: var(--c-IconCircle--Offset);
}

.c-IconCircle__Icon.--Plus {
  width: 40%;
}

.c-IconCircle__Icon.--Blank {
  width: 40%;
}

.c-IconCircle__Icon.--DirectionRoundBottom {
  width: 33.33333%;
  transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-IconCircle__Icon--Transform);
  transform: var(--c-IconCircle__Icon--Transform);
}

.c-IconCircle__Icon.--DirectionRoundRight {
  width: 20%;
}

/*
#styleguide

*/
.c-ImageAndText {
  display: grid;
  grid-template-columns: var(--c-ImageAndText--GridTemplateColumns, repeat(3, 1fr));
  gap: 50px 30px;
}

@media (max-width: 1023px) {
  .c-ImageAndText {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .c-ImageAndText {
    grid-template-columns: 1fr;
  }
}

.c-ImageAndText.-Column2 {
  --c-ImageAndText--GridTemplateColumns: repeat(2, 1fr);
}

.c-ImageAndText__Title {
  font-size: 20px;
  color: #08318D;
  border-left: solid 4px #08318D;
  margin-top: 20px;
  padding-left: 20px;
  font-weight: 400;
  line-height: 1.6;
}

.c-ImageAndText__Text {
  margin-top: 10px;
}

/*
#styleguide

左に説明文 + 右に画像が存在するコンテンツ。

以下の使い方ができる

1. 左に説明文 + 右に画像
2. 左に説明文 + 右に画像のスライダー
3. 全体がスライダー

-Reverseをつけると左右が反転する。

```
<div class="w-1440">
  <div class="c-ImageBox js-ImageBox">
    <div class="c-ImageBox__Left">
      <div class="c-ImageBox__Inner">
        <div class="c-ImageBox__Main">
          <div class="c-ImageBox__Index">
            <p class="c-HeadlineBox">小見出しタイトル</p>
          </div>
          <div class="c-ImageBox__Body">
            <p>上画像のメニューの特徴補足説明のほか、施術前、施術後の画像や、説明など。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="c-ImageBox__Right">
      <div class="c-SlierImage js-ImageBox">
        <div class="swiper js-ImageBox__Slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
            </div>
            <div class="swiper-slide">
              <img src="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
            </div>
          </div>
          <div class="c-SlierImage__Indicator">
            <div class="c-SlierImage__Arrow">
              <button type="button" class="u-ButtonCircleArrow --Blue --Reverse js-ImageBox__Prev">
                <span class="u-ButtonCircleArrow__Icon"><?php Svg::directionRoundRight() ?></span>
              </button>
            </div>
            <div class="c-SlierImage__Pagination">
              <div class="c-SliderPagination js-ImageBox__Pagination"></div>
            </div>
            <div class="c-SlierImage__Arrow">
              <button type="button" class="u-ButtonCircleArrow --Blue js-ImageBox__Next">
                <span class="u-ButtonCircleArrow__Icon"><?php Svg::directionRoundRight() ?></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
/*
#styleguide

左に説明文 + 右に画像

```
<div class="w-1440">
  <div class="c-ImageBox js-ImageBox">
    <div class="c-ImageBox__Left">
      <div class="c-ImageBox__Inner">
        <div class="c-ImageBox__Main">
          <div class="c-ImageBox__Index">
            <p class="c-HeadlineBox">小見出しタイトル</p>
          </div>
          <div class="c-ImageBox__Body">
            <p>上画像のメニューの特徴補足説明のほか、施術前、施術後の画像や、説明など。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="c-ImageBox__Right">
      <img src="/we-system/build/images/support/newcultivation/section-02-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-02-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
    </div>
  </div>
</div>
```

*/
/*
#styleguide

左に説明文 + 右に画像 の全体がスライダー

```
<div class="c-SliderSingle js-SliderSingle w-1440 mt-50-30">
  <div class="swiper js-SliderSingle__Slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="c-ImageBox">
          <div class="c-ImageBox__Left">
            <div class="c-ImageBox__Inner">
              <div class="c-ImageBox__Main">
                <div class="c-ImageBox__Index">
                  <p class="c-HeadlineBox">入手困難物件の紹介</p>
                </div>
                <div class="c-ImageBox__Body">
                  <p>店舗開発の専門知識を持った担当者が、開業エリアの物件取得をサポートします。大手ディベロッパー、複数のテナントリーシング会社様との関係上、個人では入手困難な物件紹介が可能です。更には、物件オーナーとの家賃交渉の方法や理想的なサイン計画のアドバイスを行います。<br>※物件の紹介は、本部が契約範囲を超えて特別に実施しているサポートです。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="c-ImageBox__Right">
            <img src="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="c-ImageBox">
          <div class="c-ImageBox__Left">
            <div class="c-ImageBox__Inner">
              <div class="c-ImageBox__Main">
                <div class="c-ImageBox__Index">
                  <p class="c-HeadlineBox">入手困難物件の紹介</p>
                </div>
                <div class="c-ImageBox__Body">
                  <p>店舗開発の専門知識を持った担当者が、開業エリアの物件取得をサポートします。大手ディベロッパー、複数のテナントリーシング会社様との関係上、個人では入手困難な物件紹介が可能です。更には、物件オーナーとの家賃交渉の方法や理想的なサイン計画のアドバイスを行います。<br>※物件の紹介は、本部が契約範囲を超えて特別に実施しているサポートです。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="c-ImageBox__Right">
            <img src="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="c-ImageBox">
          <div class="c-ImageBox__Left">
            <div class="c-ImageBox__Inner">
              <div class="c-ImageBox__Main">
                <div class="c-ImageBox__Index">
                  <p class="c-HeadlineBox">入手困難物件の紹介</p>
                </div>
                <div class="c-ImageBox__Body">
                  <p>店舗開発の専門知識を持った担当者が、開業エリアの物件取得をサポートします。大手ディベロッパー、複数のテナントリーシング会社様との関係上、個人では入手困難な物件紹介が可能です。更には、物件オーナーとの家賃交渉の方法や理想的なサイン計画のアドバイスを行います。<br>※物件の紹介は、本部が契約範囲を超えて特別に実施しているサポートです。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="c-ImageBox__Right">
            <img src="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-01-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
          </div>
        </div>
      </div>
    </div>
    <div class="c-SliderSingle__Indicator">
      <div class="c-SliderSingle__Arrow">
        <button type="button" class="u-ButtonCircleArrow --Blue --Reverse js-SliderSingle__Prev">
          <span class="u-ButtonCircleArrow__Icon"><?php Svg::directionRoundRight() ?></span>
        </button>
      </div>
      <div class="c-SliderSingle__Pagination">
        <div class="c-SliderPagination js-SliderSingle__Pagination"></div>
      </div>
      <div class="c-SliderSingle__Arrow">
        <button type="button" class="u-ButtonCircleArrow --Blue js-SliderSingle__Next">
          <span class="u-ButtonCircleArrow__Icon"><?php Svg::directionRoundRight() ?></span>
        </button>
      </div>
    </div>
  </div>
</div>
```

*/
.c-ImageBox {
  --c-ImageBox__Inner--MarginLeft: auto;
  --c-ImageBox__Inner--MarginRight: 0;
  display: grid;
  grid-template-columns: 670fr 770fr;
  background: #F5F5F5;
  align-items: center;
}

@media (max-width: 1023px) {
  .c-ImageBox {
    grid-template-columns: 770fr 670fr;
  }
}

@media (max-width: 767px) {
  .c-ImageBox {
    grid-template-columns: 1fr;
  }
}

.c-ImageBox.-Reverse {
  grid-template-columns: 770fr 670fr;
  --c-ImageBox__Left--Column: 2;
  --c-ImageBox__Right--Column: 1;
  --c-ImageBox__Pagination--Column: 2;
  --c-ImageBox__Inner--MarginLeft: 0;
  --c-ImageBox__Inner--MarginRight: auto;
}

@media (max-width: 1023px) {
  .c-ImageBox.-Reverse {
    grid-template-columns: 670fr 770fr;
  }
}

@media (max-width: 767px) {
  .c-ImageBox.-Reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .c-ImageBox.-SpPaddingBottom {
    padding-bottom: 5rem;
  }
}

.c-ImageBox.-Single {
  grid-template-columns: 1fr;
  --c-ImageBox__Inner--MarginLeft: auto;
  --c-ImageBox__Inner--MarginRight: auto;
}

.c-ImageBox.-Size1 {
  grid-template-columns: 1fr 35.82759%;
}

.c-ImageBox.-Size1 .c-ImageBox__Inner {
  max-width: 100%;
}

@media (max-width: 767px) {
  .c-ImageBox.-Size1 {
    grid-template-columns: 1fr;
  }
}

.c-ImageBox__Left {
  display: grid;
  padding-right: 90px;
  padding-left: 90px;
  grid-row: 1;
  grid-column: var(--c-ImageBox__Left--Column, 1);
}

@media (max-width: 1023px) {
  .c-ImageBox__Left {
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media (max-width: 767px) {
  .c-ImageBox__Left {
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
    grid-row: auto;
    grid-column: auto;
  }
}

.c-ImageBox__Inner {
  width: 100%;
  max-width: 48rem;
  margin-left: var(--c-ImageBox__Inner--MarginLeft);
  margin-right: var(--c-ImageBox__Inner--MarginRight);
  display: grid;
  align-items: center;
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (max-width: 1023px) {
  .c-ImageBox__Inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .c-ImageBox__Inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.c-ImageBox__Main {
  display: grid;
  gap: 2rem;
  position: relative;
}

.c-ImageBox__Pagination {
  width: 100%;
  grid-row: 1;
  grid-column: var(--c-ImageBox__Pagination--Column, 1);
  position: relative;
  z-index: 1;
  align-self: flex-end;
  display: grid;
  padding-bottom: 40px;
}

@media (max-width: 1023px) {
  .c-ImageBox__Pagination {
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .c-ImageBox__Pagination {
    margin-top: 2rem;
    padding-bottom: 0;
    display: block;
    grid-row: auto;
    grid-column: auto;
  }
}

.c-ImageBox__Dots {
  display: flex;
  justify-content: center;
}

.c-ImageBox__Right {
  grid-row: 1;
  grid-column: var(--c-ImageBox__Right--Column, 2);
}

@media (max-width: 767px) {
  .c-ImageBox__Right {
    grid-row: auto;
    grid-column: auto;
  }
}

.c-ImageBox__Right .swiper {
  height: 100%;
}

.c-ImageBox__Right .swiper-slide {
  width: 100%;
}

.c-ImageBox__Photo {
  margin-left: auto;
  margin-right: auto;
}

.c-ImageBox__Photo.-Size1 {
  max-width: 36rem;
}

@media (max-width: 767px) {
  .c-ImageBox__Photo.-Size1 {
    max-width: none;
  }
}

/*
#styleguide

左に説明文 + 右に画像が存在するコンテンツ

- [PC] 左右のコンテンツの位置が入れ替わる。
- [PC] 奇数番目のコンテンツは右側に、偶数番目のコンテンツは左側にマージンが存在する
- [PC] 画像がコンテツをはみ出す場合がある
- 画像はスライダーの場合がある

## modifire

`.-Reverse` ... 左右を入れ替える


## スライダーを使用する場合

```
<div class="w-1440">
  <div class="c-ImageBox3 js-ImageBox3">
    <div class="c-ImageBox3__Left">
      <div class="c-ImageBox3__Inner">
        <div class="c-ImageBox3__Index">
          <p class="c-HeadlineBox">小見出しタイトル</p>
        </div>
        <div class="c-ImageBox3__Body">
          <p>上画像のメニューの特徴補足説明のほか、施術前、施術後の画像や、説明など。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
        </div>
        <div class="c-ImageBox3__PaginationPc">
          <div class="c-SliderPagination js-ImageBox3__PaginationPc"></div>
        </div>
      </div>
    </div>
    <div class="c-ImageBox3__Right">
      <div class="c-ImageBox3__Photo">
        <div class="swiper js-ImageBox3__Slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="https://placehold.jp/770x528.png" width="770" height="528" loading="lazy" alt="" class="c-ImageBox3__Photo">
            </div>
            <div class="swiper-slide">
              <img src="https://placehold.jp/770x528.png" width="770" height="528" loading="lazy" alt="" class="c-ImageBox3__Photo">
            </div>
            <div class="swiper-slide">
              <img src="https://placehold.jp/770x528.png" width="770" height="528" loading="lazy" alt="" class="c-ImageBox3__Photo">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-ImageBox3__PaginationSp">
      <div class="c-SliderPagination js-ImageBox3__PaginationSp"></div>
    </div>
  </div>
</div>
```


## スライダーを使用しない場合

*/
.c-ImageBox3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (max-width: 1023px) {
  .c-ImageBox3 {
    gap: 80px;
  }
}

@media (max-width: 767px) {
  .c-ImageBox3 {
    gap: 0;
    display: block;
    background: #F5F5F5;
    padding: 3rem 2rem;
  }
}

.c-ImageBox3:not(.-Reverse) {
  --c-ImageBox3__Left--PaddingLeft: 120px;
  --c-ImageBox3__Left--PaddingRight: 50%;
  --c-ImageBox3__LeftBefore--Left: 0;
  --c-ImageBox3__Inner--MarginLeft: auto;
  --c-ImageBox3__Right--Column: 2;
  --c-ImageBox3__Right--PaddingRight: 120px;
  --c-ImageBox3__Container--MarginRight: auto;
}

@media (max-width: 1023px) {
  .c-ImageBox3:not(.-Reverse) {
    --c-ImageBox3__Left--PaddingLeft: var(--inner-padding);
    --c-ImageBox3__Right--PaddingRight: var(--inner-padding);
  }
}

.c-ImageBox3.-Reverse {
  --c-ImageBox3__Left--PaddingLeft: 50%;
  --c-ImageBox3__Left--PaddingRight: 120px;
  --c-ImageBox3__LeftBefore--Right: 0;
  --c-ImageBox3__Inner--MarginRight: auto;
  --c-ImageBox3__Right--Column: 1;
  --c-ImageBox3__Right--PaddingLeft: 120px;
  --c-ImageBox3__Container--MarginLeft: auto;
}

@media (max-width: 1023px) {
  .c-ImageBox3.-Reverse {
    --c-ImageBox3__Left--PaddingRight: var(--inner-padding);
    --c-ImageBox3__Right--PaddingLeft: var(--inner-padding);
  }
}

.c-ImageBox3__Left {
  grid-row: 1;
  grid-column: 1 / 3;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 0;
  padding-left: var(--c-ImageBox3__Left--PaddingLeft);
  padding-right: var(--c-ImageBox3__Left--PaddingRight);
}

@media (max-width: 767px) {
  .c-ImageBox3__Left {
    padding-left: 0;
    padding-right: 0;
  }
}

.c-ImageBox3__Left::before {
  content: '';
  display: block;
  width: calc(100% - 120px);
  position: absolute;
  background: #F5F5F5;
  left: var(--c-ImageBox3__LeftBefore--Left);
  right: var(--c-ImageBox3__LeftBefore--Right);
  top: 0;
  height: 100%;
  z-index: -1;
  max-width: 1320px;
}

@media (max-width: 1023px) {
  .c-ImageBox3__Left::before {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .c-ImageBox3__Left::before {
    display: none;
  }
}

.c-ImageBox3__Inner {
  width: 100%;
  max-width: 48rem;
  margin-left: var(--c-ImageBox3__Inner--MarginLeft, 0);
  margin-right: var(--c-ImageBox3__Inner--MarginRight, 0);
  display: grid;
  align-items: center;
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (max-width: 1023px) {
  .c-ImageBox3__Inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .c-ImageBox3__Inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.c-ImageBox3__Body {
  margin-top: 2rem;
}

.c-ImageBox3__PaginationPc {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .c-ImageBox3__PaginationPc {
    display: none;
  }
}

.c-ImageBox3__PaginationSp {
  display: none;
  margin-top: 3rem;
}

@media (max-width: 767px) {
  .c-ImageBox3__PaginationSp {
    display: block;
  }
}

.c-ImageBox3__Right {
  grid-row: 1;
  grid-column: var(--c-ImageBox3__Right--Column);
  position: relative;
  z-index: 1;
  padding-left: var(--c-ImageBox3__Right--PaddingLeft, 0);
  padding-right: var(--c-ImageBox3__Right--PaddingRight, 0);
}

@media (max-width: 767px) {
  .c-ImageBox3__Right {
    margin-top: 3rem;
    grid-row: auto;
    grid-column: auto;
  }
}

.c-ImageBox3__Right .swiper {
  height: 100%;
}

.c-ImageBox3__Right .swiper-slide {
  width: 100%;
}

.c-ImageBox3__Container {
  width: 100%;
  max-width: 60rem;
  padding-left: 95px;
  padding-right: 95px;
  margin-left: var(--c-ImageBox3__Container--MarginLeft);
  margin-right: var(--c-ImageBox3__Container--MarginRight);
}

@media (max-width: 1023px) {
  .c-ImageBox3__Container {
    padding-left: 0;
    padding-right: 0;
  }
}

.c-ImageBox3__Photo {
  -webkit-filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.1));
  box-sizing: content-box;
}

@media (max-width: 1023px) {
  .c-ImageBox3__Photo {
    padding-left: 0;
    padding-right: 0;
  }
}

.c-ImageBox3__Photo.-Size1 {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ImageBox3__Photo.-Size1 {
    max-width: 26rem;
  }
}

.c-ImageBox3__Photo.-Size2 {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ImageBox3__Photo.-Size2 {
    max-width: none;
  }
}

/*
#styleguide

下層ページのタイトル下のリードテキスト

*/
.c-LeadText {
  max-width: 800px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/*
#styleguide

白ボックスにはいっている外部リンク

```
<a href="#" target="_blank" class="c-LinkBlank">
  <span>・ホワイトニングタウン</span>
  <span><?php Svg::blank(); ?></span>
</a>
```

*/
.c-LinkBlank {
  --c-Icon--Fill: #3F4146;
  display: grid;
  grid-template-columns: 1fr 14px;
  align-items: center;
  gap: 10px;
  color: #3F4146;
  background: #fff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 10px;
  line-height: 1.6;
  font-weight: 400;
}

.c-LinkBlank:hover {
  background: #0A2B82;
  color: #fff;
  --c-Icon--Fill: #fff;
}

/*
#styleguide

ブランクアイコン付きのリンク

```
<a href="#" target="_blank" class="c-LinkBlank2">
  <span class="c-LinkBlank2__Label">・ホワイトニングタウン</span>
  <span><?php Svg::blank(); ?></span>
</a>
```

*/
.c-LinkBlank2 {
  --c-Icon--Fill: #3F4146;
  display: grid;
  grid-template-columns: auto 1.8rem;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  line-height: 1.6;
  font-weight: 400;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (max-width: 767px) {
  .c-LinkBlank2 {
    grid-template-columns: auto 1.4rem;
  }
}

@media (min-width: 1024.1px) {
  .c-LinkBlank2:hover {
    color: #0A2B82;
    --c-Icon--Fill: #0A2B82;
  }
}

.c-LinkBlank2.-Right {
  margin-left: auto;
}

.c-LinkBlank2__Label {
  text-decoration: underline;
}

/*
#styleguide

ブランクアイコン付きのリンク

```
<a href="#" target="_blank" class="c-LinkBlank3">
  <span>・ホワイトニングタウン</span>
  <span><?php Svg::blank(); ?></span>
</a>
```

*/
.c-LinkBlank3 {
  --c-Icon--Fill: #3F4146;
  display: grid;
  grid-template-columns: 1fr 18px;
  align-items: center;
  gap: 10px;
  line-height: 1.6;
  font-weight: 400;
}

.c-LinkBlank3:hover {
  color: #0A2B82;
  --c-Icon--Fill: #0A2B82;
}

.c-LinkBlank3__Label {
  text-decoration: underline;
}

/*
#styleguide

リンクカード（縦並び）

*/
.c-LinkCard {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

@media (min-width: 1024.1px) {
  .c-LinkCard:hover {
    --c-LinkCard__Image: scale(1.1);
  }
}

.c-LinkCard__Thumbnail {
  overflow: hidden;
}

.c-LinkCard__Image {
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-LinkCard__Image);
  transform: var(--c-LinkCard__Image);
}

.c-LinkCard__Box {
  margin-left: 40px;
  margin-right: 40px;
  background: #F7F7F7;
  padding: 50px;
  margin-top: -70px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .c-LinkCard__Box {
    padding: 2rem 2.5rem 2.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}

@media (max-width: 767px) {
  .c-LinkCard__Box {
    margin-top: -5rem;
  }
}

.c-LinkCard__Text {
  margin-top: 40px;
  color: #3F4146;
}

@media (max-width: 767px) {
  .c-LinkCard__Text {
    margin-top: 1rem;
  }
}

/*
#styleguide


*/
.c-LinkCard2 {
  background: #fff;
  min-height: 90px;
  display: grid;
  align-items: center;
  padding: 1rem 3rem;
  grid-template-columns: 1fr 40px;
  gap: 2rem;
}

@media (min-width: 1024.1px) {
  .c-LinkCard2:hover {
    --c-IconCircle--Offset: 10%;
    --c-IconCircle--Scale: scale(1.2);
  }
}

@media (max-width: 767px) {
  .c-LinkCard2 {
    padding: 1rem 2rem;
    grid-template-columns: 1fr 2.2rem;
    min-height: 7rem;
    gap: 1rem;
  }
}

.c-LinkCard2__Label {
  font-size: 20px;
  color: #08318D;
  font-weight: 500;
  word-break: keep-all;
}

@media (max-width: 767px) {
  .c-LinkCard2__Label {
    font-size: 1.8rem;
  }
}

/*
#styleguide

ホバーした際に線アニメーションの出るリンク

*/
.c-LinkHoverBorder {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.c-LinkHoverBorder.--Gray {
  color: var(--color);
}

.c-LinkHoverBorder[target="_blank"]::after {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e901";
  font-size: 80%;
  margin-left: 0.5em;
}

.c-LinkHoverBorder::before {
  content: '';
  display: block;
  width: 0%;
  height: 1px;
  transition: width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: var(--color);
  position: absolute;
  left: 0;
  bottom: 0;
}

@media (min-width: 1024.1px) {
  .c-LinkHoverBorder:hover::before {
    width: 100%;
  }
}

/*
#styleguide

```
<a href="#" class="c-LinkIcon --Fit">
  <span class="c-LinkIcon__Text">歯科医院経営動画サイト</span>
  <span class="c-LinkIcon__Icon">
    <span class="c-IconCircle --GradientBlue">
      <span class="c-IconCircle__Icon --Arrow"><?php Svg::arrowRight() ?></span>
    </span>
  </span>
</a>
```

*/
@-webkit-keyframes border {
  0% {
    right: 0;
    left: auto;
    width: 100%;
  }
  49% {
    right: 0;
    left: auto;
    width: 0%;
  }
  50% {
    right: auto;
    left: 0;
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes border {
  0% {
    right: 0;
    left: auto;
    width: 100%;
  }
  49% {
    right: 0;
    left: auto;
    width: 0%;
  }
  50% {
    right: auto;
    left: 0;
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.c-LinkIcon {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  color: #08318D;
  font-size: 20px;
  position: relative;
}

@media (max-width: 767px) {
  .c-LinkIcon {
    font-size: 1.7rem;
    border-width: max(0.1rem, 1px);
  }
}

@media (min-width: 1024.1px) {
  .c-LinkIcon:hover {
    --c-IconCircle--Offset: 10%;
    --c-IconCircle--Scale: scale(1.2);
    --c-LinkIconBefore--Animation: border 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
}

.c-LinkIcon::before {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background: #08318D;
  -webkit-animation: var(--c-LinkIconBefore--Animation);
  animation: var(--c-LinkIconBefore--Animation);
}

.c-LinkIcon.--Large {
  font-size: 24px;
}

@media (max-width: 767px) {
  .c-LinkIcon.--Large {
    font-size: 1.7rem;
  }
}

.c-LinkIcon.--Fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-LinkIcon.--Center {
  margin-left: auto;
  margin-right: auto;
}

.c-LinkIcon.--Size1 {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-LinkIcon.--Size1 {
    max-width: 28rem;
  }
}

.c-LinkIcon.--Margin {
  margin-top: 90px;
}

@media (max-width: 767px) {
  .c-LinkIcon.--Margin {
    margin-top: 7rem;
  }
}

.c-LinkIcon.--Margin2 {
  margin-top: 70px;
}

@media (max-width: 767px) {
  .c-LinkIcon.--Margin2 {
    margin-top: 4rem;
  }
}

.c-LinkIcon.--Margin3 {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .c-LinkIcon.--Margin3 {
    margin-top: 3rem;
  }
}

.c-LinkIcon__Text {
  margin-right: 5rem;
  flex-grow: 1;
}

.c-LinkIcon__Icon {
  width: 40px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-LinkIcon__Icon {
    width: 2.2rem;
  }
}

.c-LinkPost {
  background: #F6F6F6;
  padding: 20px 40px;
  min-height: 240px;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .c-LinkPost {
    min-height: 18rem;
    padding: 2rem 2rem;
  }
}

.c-LinkPost.--Preset1 {
  min-height: 140px;
}

.c-LinkPost.--Preset2 {
  padding-right: 120px;
}

@media (max-width: 1023px) {
  .c-LinkPost.--Preset2 {
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .c-LinkPost.--Preset2 {
    padding-right: 2rem;
  }
}

.c-LinkPost:hover {
  --c-IconCircle--Offset: 10%;
  --c-IconCircle--Scale: scale(1.2);
}

.c-LinkPost__Grid {
  width: 100%;
  display: grid;
  gap: 2rem 4rem;
  align-items: center;
  grid-template-columns: 1fr 40px;
}

@media (max-width: 767px) {
  .c-LinkPost__Grid {
    grid-template-columns: 1fr 2.2rem;
    gap: 1rem 2rem;
  }
}

.c-LinkPost__Headline {
  font-size: 22px;
  color: #08318D;
  font-weight: 400;
  grid-row: 1;
  grid-column: 1;
}

@media (max-width: 767px) {
  .c-LinkPost__Headline {
    font-size: 1.7rem;
  }
}

.c-LinkPost__LeadText {
  grid-row: 2;
  grid-column: 1;
}

@media (max-width: 767px) {
  .c-LinkPost__LeadText {
    grid-column: 1 / 3;
    font-size: 1.4rem;
  }
}

.c-LinkPost__Icon {
  grid-row: 1 / 3;
  grid-column: 2;
}

@media (max-width: 767px) {
  .c-LinkPost__Icon {
    grid-row: 1;
    grid-column: 2;
    width: 2.2rem;
  }
}

/*
#styleguide

関連コンテンツのリンク（大きい）

*/
.c-LinkRelation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: #F7F7F7;
}

@media (max-width: 767px) {
  .c-LinkRelation {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024.1px) {
  .c-LinkRelation:hover {
    --c-LinkRelation__Image--Transform: scale(1.1);
  }
}

.c-LinkRelation__Thumbnail {
  overflow: hidden;
}

.c-LinkRelation__Image {
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-LinkRelation__Image--Transform);
  transform: var(--c-LinkRelation__Image--Transform);
}

.c-LinkRelation__Details {
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
}

@media (max-width: 1023px) {
  .c-LinkRelation__Details {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .c-LinkRelation__Details {
    padding: 2rem;
  }
}

.c-LinkRelation__Inner {
  max-width: 520px;
}

@media (max-width: 767px) {
  .c-LinkRelation__Inner {
    max-width: none;
  }
}

.c-LinkRelation__Header {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
}

@media (max-width: 767px) {
  .c-LinkRelation__Header {
    grid-template-columns: 1fr 2.2rem;
  }
}

.c-LinkRelation__Title {
  font-size: 24px;
  color: #0A2B82;
}

@media (max-width: 767px) {
  .c-LinkRelation__Title {
    font-size: 1.8rem;
  }
}

.c-LinkRelation__Text {
  margin-top: 50px;
}

@media (max-width: 1023px) {
  .c-LinkRelation__Text {
    margin-top: 2rem;
  }
}

@media (min-width: 1024.1px) {
  .c-LinkRelationship:hover {
    --c-LinkRelationship__Image--Transform: scale(1.1);
  }
}

.c-LinkRelationship__Thumbnail {
  overflow: hidden;
}

.c-LinkRelationship__Image {
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-LinkRelationship__Image--Transform);
  transform: var(--c-LinkRelationship__Image--Transform);
}

.c-LinkRelationship__Header {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .c-LinkRelationship__Header {
    grid-template-columns: 1fr 2.2rem;
  }
}

.c-LinkRelationship__Header.-Blank {
  grid-template-columns: 1fr 2rem;
}

.c-LinkRelationship__Title {
  font-size: 18px;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .c-LinkRelationship__Title {
    font-size: 1.6rem;
  }
}

.c-LinkText {
  display: block;
}

.c-LinkText.--Fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-LinkText.--Alpha {
  transition: opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 1024.1px) {
  .c-LinkText.--Alpha:hover {
    opacity: 0.4;
  }
}

.c-LinkText[target="_blank"]::after {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e901";
  margin-left: 0.5em;
  font-size: 80%;
}

.c-LinkTexticon {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--c-LinkTexticon--Color);
}

.c-LinkTexticon.--White {
  --c-LinkTexticon--Color: #fff;
  --c-Icon--Fill: #fff;
}

.c-LinkTexticon::before {
  content: '';
  display: block;
  width: var(--c-LinkTexticon--Width, 0%);
  height: 1px;
  background: var(--c-LinkTexticon--Color);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 1024.1px) {
  .c-LinkTexticon:hover {
    --c-LinkTexticon--Width: 100%;
    --c-LinkTexticon--Transform: translateX(5px);
  }
}

.c-LinkTexticon__Icon {
  width: 15px;
  flex-shrink: 0;
  margin-right: 10px;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--c-LinkTexticon--Transform);
  transform: var(--c-LinkTexticon--Transform);
}

@media (max-width: 767px) {
  .c-LinkTexticon__Icon {
    width: 1.4rem;
    margin-right: 1rem;
  }
}

/*
#styleguide

チェックアイコン付きのリスト

```
<ul class="c-List2">
  <li class="c-List2__Item">
    <span class="c-List2__Check"><?php Svg::check(); ?></span>
    <span class="c-List2__Label"><span class="marker-blue">医院現状のアンケート記入</span></span>
  </li>
  <li class="c-List2__Item">
    <span class="c-List2__Check"><?php Svg::check(); ?></span>
    <span class="c-List2__Label"><span class="marker-blue">担当者とのヒアリング</span></span>
  </li>
  <li class="c-List2__Item">
    <span class="c-List2__Check"><?php Svg::check(); ?></span>
    <span class="c-List2__Label"><span class="marker-blue">医院決算書の提出（希望者のみ）</span> etc...</span>
  </li>
</ul>
```
*/
.c-List2 {
  font-size: 20px;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (max-width: 767px) {
  .c-List2 {
    font-size: 1.6rem;
  }
}

.c-List2.-Margin {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .c-List2.-Margin {
    margin-top: 3rem;
  }
}

.c-List2__Item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 767px) {
  .c-List2__Item {
    gap: 0.5rem;
    grid-template-columns: 1.4rem 1fr;
  }
}

.c-List2__Check {
  --c-Icon--Fill: #EEAA2E;
}

/*
#styleguide

```
<ul class="c-ListCheck2">
  <li class="c-ListCheck2__Item">
    <span class="c-ListCheck2__Number">01</span>
    <span class="c-ListCheck2__Icon"><?php Svg::check(); ?></span>
    <span class="c-ListCheck2__Text">自費収益を増やしたい</span>
  </li>
</ul>
```
*/
.c-ListCheck2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 50px;
}

@media (max-width: 767px) {
  .c-ListCheck2 {
    grid-template-columns: 1fr;
  }
}

.c-ListCheck2__Item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 25px;
  position: relative;
}

@media (max-width: 767px) {
  .c-ListCheck2__Item {
    grid-template-columns: 4rem 1fr;
    gap: 2rem;
  }
}

.c-ListCheck2__Number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: #0A2B82;
  position: relative;
}

@media (max-width: 767px) {
  .c-ListCheck2__Number {
    min-height: 4rem;
    font-size: 1.4rem;
  }
}

.c-ListCheck2__Number::before {
  content: '';
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  position: absolute;
  width: 0.6rem;
  height: 0.8rem;
  left: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #0A2B82;
}

.c-ListCheck2__Icon {
  --c-Icon--Fill: #EEAA2E;
  display: block;
  position: absolute;
  left: 65px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  width: 32px;
}

@media (max-width: 767px) {
  .c-ListCheck2__Icon {
    width: 2.2rem;
    left: 5rem;
  }
}

.c-ListCheck2__Text {
  background: #fff;
  padding: 5px 40px;
  display: flex;
  align-items: center;
  font-weight: 500;
  box-shadow: 2px 2px 0px #E5E5E5;
}

@media (max-width: 767px) {
  .c-ListCheck2__Text {
    padding: 0.5rem 1.5rem;
    font-size: 1.4rem;
  }
}

/*
#styleguide

戦闘にドット（・）のついたリスト

```
<ul class="c-ListDot">
  <li class="c-ListDot__Item"></li>
</ul>
```
*/
.c-ListDot__Item {
  padding-left: 1em;
  text-indent: -1em;
}

.c-ListDot__Item::before {
  content: '・';
}

/*
#styleguide

*/
.c-ListIcon {
  --c-Icon--Fill: #2357BC;
  color: #08318D;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 400;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

@media (max-width: 767px) {
  .c-ListIcon {
    font-size: 1.7rem;
  }
}

.c-ListIcon__Item {
  display: flex;
  align-items: center;
}

.c-ListIcon__Item + .c-ListIcon__Item {
  margin-top: 15px;
}

@media (max-width: 767px) {
  .c-ListIcon__Item + .c-ListIcon__Item {
    margin-top: 1rem;
  }
}

.c-ListIcon__Icon {
  flex-shrink: 0;
  margin-right: 1rem;
}

.c-ListIcon__Icon.--Check {
  width: 26px;
}

@media (max-width: 767px) {
  .c-ListIcon__Icon.--Check {
    width: 2rem;
  }
}

/*
#styleguide



*/
.c-ListNumber {
  counter-reset: number;
}

.c-ListNumber.-Margin {
  margin-top: 2em;
}

.c-ListNumber__Item {
  counter-increment: number;
}

.c-ListNumber__Item + .c-ListNumber__Item {
  margin-top: 1em;
}

.c-ListNumber__Text {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
}

.c-ListNumber__Text::before {
  content: "（" counter(number) "）";
}

/*
#styleguide

```
<ul class="c-ListNumber2">
  <li class="c-ListNumber2__Item">
    <span class="c-ListNumber2__Text">いつでもどこでも楽々コミュニケーション！</span>
  </li>
</ul>
```

*/
.c-ListNumber2 {
  counter-reset: number;
}

.c-ListNumber2.-Navy {
  --c-ListNumber2__ItemBefore--Background: #0A2B82;
}

.c-ListNumber2.-Margin {
  margin-top: 4rem;
}

@media (max-width: 767px) {
  .c-ListNumber2.-Margin {
    margin-top: 3rem;
  }
}

.c-ListNumber2__Item {
  counter-increment: number;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
  align-items: center;
  font-size: 20px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .c-ListNumber2__Item {
    font-size: 1.8rem;
  }
}

.c-ListNumber2__Item + .c-ListNumber2__Item {
  margin-top: 2rem;
}

.c-ListNumber2__Item::before {
  content: counter(number);
  font-size: 22px;
  font-family: "Lato", sans-serif;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--c-ListNumber2__ItemBefore--Background, #17A4AC);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .c-ListNumber2__Item::before {
    font-size: 1.9rem;
    width: 3.8rem;
    height: 3.8rem;
  }
}

.c-ListNumber2__Text {
  font-weight: 500;
}

/*
#styleguide

```
<ul class="c-ListNumber3">
  <li class="c-ListNumber3__Item">
    <span class="c-ListNumber3__Text">いつでもどこでも楽々コミュニケーション！</span>
  </li>
</ul>
```

*/
.c-ListNumber3 {
  counter-reset: number;
}

.c-ListNumber3.-Navy {
  --c-ListNumber3__ItemBefore--Background: #0A2B82;
}

.c-ListNumber3.-Margin {
  margin-top: 4rem;
}

@media (max-width: 767px) {
  .c-ListNumber3.-Margin {
    margin-top: 3rem;
  }
}

.c-ListNumber3__Item {
  counter-increment: number;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
  align-items: center;
  font-size: 20px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .c-ListNumber3__Item {
    gap: 0.5em;
    grid-template-columns: 1fr;
    font-size: 1.6rem;
  }
}

.c-ListNumber3__Item + .c-ListNumber3__Item {
  margin-top: 3rem;
}

.c-ListNumber3__Item::before {
  content: counter(number);
  font-size: 22px;
  font-family: "Lato", sans-serif;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--c-ListNumber3__ItemBefore--Background, #17A4AC);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .c-ListNumber3__Item::before {
    font-size: 1.8rem;
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.c-ListNumber3__Text {
  font-weight: 500;
}

/*
#styleguide

1〜 > 2〜 > 3〜

```
```

*/
.c-ListStep {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1rem;
}

@media (max-width: 1023px) {
  .c-ListStep {
    grid-template-columns: 1fr;
  }
}

.c-ListStep__Heaader {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 10px 0 10px 20px;
  margin-right: 40px;
  position: relative;
  min-height: 100px;
  color: #fff;
  gap: 2rem;
  background: var(--c-ListStep__Heaader--Color);
  align-items: center;
}

@media (max-width: 1023px) {
  .c-ListStep__Heaader {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .c-ListStep__Heaader {
    padding: 1rem 2rem;
    min-height: 7rem;
  }
}

.c-ListStep__Heaader.-Green {
  --c-ListStep__Heaader--Color: #17A4AC;
}

.c-ListStep__Heaader.-Blue {
  --c-ListStep__Heaader--Color: #1D86D5;
}

.c-ListStep__Heaader.-Navy {
  --c-ListStep__Heaader--Color: #0A2B82;
}

.c-ListStep__Heaader::after {
  content: '';
  display: block;
  width: 41px;
  height: 100%;
  position: absolute;
  left: calc(100% - 1px);
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--c-ListStep__Heaader--Color);
}

@media (max-width: 1023px) {
  .c-ListStep__Heaader::after {
    display: none;
  }
}

.c-ListStep__Number {
  font-size: 40px;
  font-family: "Lato", sans-serif;
}

@media (max-width: 767px) {
  .c-ListStep__Number {
    font-size: 3rem;
  }
}

.c-ListStep__Text {
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .c-ListStep__Text {
    font-size: 1.6rem;
  }
}

.c-ListStep__Thumbnail {
  margin-top: 2rem;
}

@media (max-width: 1023px) {
  .c-ListStep__Thumbnail {
    margin-top: 0;
  }
}

/*
#styleguide

白いボックスにチェックアイコンの付いているリスト

```
<ul class="c-ListTags">
  <li class="c-ListTags__Item">
    <span class="c-ListTags__Icon"><?php Svg::check(); ?></span>
    <span class="c-ListTags__Label">予約</span>
  </li>
</ul>
```
*/
.c-ListTags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ListTags {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.c-ListTags.--Large {
  font-size: 20px;
}

@media (max-width: 767px) {
  .c-ListTags.--Large {
    font-size: 1.5rem;
  }
}

.c-ListTags__Item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 1rem;
  padding: 10px 20px;
  background: #fff;
  align-items: center;
  --c-Icon--Fill: #EEAA2E;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-ListTags__Item {
    grid-template-columns: 1.4rem 1fr;
    padding: 0.5rem 1rem;
  }
}

.c-ListTags__Label strong {
  font-size: 112.5%;
  font-weight: 700;
}

/*
#styleguide

縦並びのリスト（1カラム）

*/
.c-ListVertical {
  display: grid;
  grid-template-columns: 1fr;
}

.c-ListVertical.--Prest1 {
  gap: 1rem;
}

.c-ListVertical.--Prest2 {
  gap: 2rem;
}

.c-MainVisual {
  position: relative;
}

@media (max-width: 767px) {
  .c-MainVisual__Body {
    position: relative;
  }
}

.c-MainVisual__Body::before {
  content: '';
  display: block;
  padding-bottom: 47.70833%;
}

@media (max-width: 767px) {
  .c-MainVisual__Body::before {
    padding-bottom: 133.33333%;
  }
}

.c-MainVisual__Logo {
  position: absolute;
  z-index: 20001;
  top: 25px;
  left: 30px;
}

@media (max-width: 1023px) {
  .c-MainVisual__Logo {
    display: none;
  }
}

.c-MainVisual__LogoImage {
  width: 70px;
  margin-left: auto;
  margin-right: auto;
}

.c-MainVisual__LogoCopy {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
}

.c-MainVisual__Item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  overflow: hidden;
}

.c-MainVisual__Item.-Fade {
  -webkit-animation: mask 1s ease both;
  animation: mask 1s ease both;
}

.c-MainVisual__Item.-Active {
  display: block;
}

.c-MainVisual__Item.-Forward {
  z-index: 2;
}

.c-MainVisual__Item.-Backward {
  z-index: 1;
}

.c-MainVisual__Item.-Fade .c-MainVisual__Copy {
  -webkit-animation: copy 1s ease 0.5s both;
  animation: copy 1s ease 0.5s both;
}

@-webkit-keyframes mask {
  0% {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, -20% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, -20% 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 120% 0%, 100% 100%, 0% 1000%);
    clip-path: polygon(0% 0%, 120% 0%, 100% 100%, 0% 1000%);
  }
}

@keyframes mask {
  0% {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, -20% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, -20% 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 120% 0%, 100% 100%, 0% 1000%);
    clip-path: polygon(0% 0%, 120% 0%, 100% 100%, 0% 1000%);
  }
}

@-webkit-keyframes copy {
  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@keyframes copy {
  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

.c-MainVisual__Copy1, .c-MainVisual__Copy2, .c-MainVisual__Copy3, .c-MainVisual__Copy4, .c-MainVisual__Copy5, .c-MainVisual__Copy6 {
  position: absolute;
  z-index: 1;
  left: 8.33vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .c-MainVisual__Copy1, .c-MainVisual__Copy2, .c-MainVisual__Copy3, .c-MainVisual__Copy4, .c-MainVisual__Copy5, .c-MainVisual__Copy6 {
    left: 2rem;
    top: 70%;
  }
}

.c-MainVisual__Copy1 {
  width: 40.20833%;
}

@media (max-width: 767px) {
  .c-MainVisual__Copy1 {
    width: 27.8rem;
  }
}

.c-MainVisual__Copy1Use {
  fill: #fff;
}

.c-MainVisual__Copy2 {
  width: 37.91667%;
}

@media (max-width: 767px) {
  .c-MainVisual__Copy2 {
    width: 25.8rem;
  }
}

.c-MainVisual__Copy2Use1 {
  fill: #fff;
}

.c-MainVisual__Copy2Use2 {
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 588px;
  stroke-dashoffset: 588px;
}

.c-MainVisual__Item.-Animation .c-MainVisual__Copy2Use2 {
  -webkit-animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
  animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
}

.c-MainVisual__Copy3 {
  width: 44.72222%;
}

@media (max-width: 767px) {
  .c-MainVisual__Copy3 {
    width: 30.9rem;
  }
}

.c-MainVisual__Copy3Use1 {
  fill: #fff;
}

.c-MainVisual__Copy3Use2 {
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 588px;
  stroke-dashoffset: -588px;
}

.c-MainVisual__Item.-Animation .c-MainVisual__Copy3Use2 {
  -webkit-animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
  animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
}

.c-MainVisual__Copy4 {
  width: 53.75%;
}

@media (max-width: 767px) {
  .c-MainVisual__Copy4 {
    width: 34.79rem;
  }
}

.c-MainVisual__Copy4Use1 {
  fill: #fff;
}

.c-MainVisual__Copy4Use2 {
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 588px;
  stroke-dashoffset: -588px;
}

.c-MainVisual__Item.-Animation .c-MainVisual__Copy4Use2 {
  -webkit-animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
  animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
}

.c-MainVisual__Copy4Use3 {
  fill: #fff;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

.c-MainVisual__Copy4Use4 {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  fill: none;
  stroke: #fff;
  stroke-width: 18;
  stroke-miterlimit: 10;
}

.c-MainVisual__Item.-Animation .c-MainVisual__Copy4Use4 {
  -webkit-animation: mainvisual-draw 0.5s ease 1.7s both;
  animation: mainvisual-draw 0.5s ease 1.7s both;
}

@-webkit-keyframes mainvisual-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mainvisual-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes mainvisual-fill {
  to {
    fill: #fff;
  }
}

@keyframes mainvisual-fill {
  to {
    fill: #fff;
  }
}

.c-MainVisual__Copy5 {
  width: 45.27778%;
}

@media (max-width: 767px) {
  .c-MainVisual__Copy5 {
    width: 31.1rem;
  }
}

.c-MainVisual__Copy5Use1 {
  fill: #fff;
}

.c-MainVisual__Copy5Use2 {
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 588px;
  stroke-dashoffset: 588px;
}

.c-MainVisual__Item.-Animation .c-MainVisual__Copy5Use2 {
  -webkit-animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
  animation: mainvisual-draw 1s ease 1s both, mainvisual-fill 0.5s ease 1.5s both;
}

.c-MainVisual__Copy6 {
  width: 65.34722%;
}

@media (max-width: 767px) {
  .c-MainVisual__Copy6 {
    width: 31.6rem;
  }
}

.c-MainVisual__Copy6Use {
  fill: #fff;
}

.c-MainVisual__Bullets {
  position: absolute;
  left: 0;
  bottom: 5.45852%;
  width: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .c-MainVisual__Bullets {
    position: static;
    margin-top: 3rem;
  }
}

.c-MainVisualB__Dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  display: block;
}

@media (max-width: 767px) {
  .c-MainVisualB__Dot {
    background: #B4B4B4;
  }
}

.c-MainVisualB__Dot.-Active {
  background: #08318D;
}

.c-MainVisualB__Dot + .c-MainVisualB__Dot {
  margin-left: 1.38vw;
}

@media (max-width: 767px) {
  .c-MainVisualB__Dot + .c-MainVisualB__Dot {
    margin-left: 1.5rem;
  }
}

.c-MainVisual__SiteName {
  font-size: 0.9vw;
  color: #fff;
  position: absolute;
  bottom: 4.36681%;
  left: 8.33vw;
  z-index: 10000;
}

@media (max-width: 767px) {
  .c-MainVisual__SiteName {
    font-size: 1.1rem;
    left: 2rem;
    bottom: 2rem;
  }
}

/*
#styleguide

支援メニュー

*/
.c-OurService {
  display: grid;
  gap: 0 5px;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
  .c-OurService {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .c-OurService {
    grid-template-columns: 1fr;
  }
}

.c-OurService.-Margin {
  margin-top: 70px;
}

@media (max-width: 767px) {
  .c-OurService.-Margin {
    margin-top: 3rem;
  }
}

.c-OurService__Item.--Preset1 {
  grid-column: 1;
  grid-row: 1;
}

.c-OurService__Item.--Preset2 {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset2 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 3;
  }
}

.c-OurService__Item.--Preset3 {
  grid-column: 3;
  grid-row: 1;
}

@media (max-width: 1023px) {
  .c-OurService__Item.--Preset3 {
    margin-top: 30px;
    grid-column: 1;
    grid-row: 5;
  }
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset3 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 5;
  }
}

.c-OurService__Item.--Preset4 {
  grid-column: 4;
  grid-row: 1;
}

@media (max-width: 1023px) {
  .c-OurService__Item.--Preset4 {
    margin-top: 30px;
    grid-column: 2;
    grid-row: 5;
  }
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset4 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 7;
  }
}

.c-OurService__Item.--Preset5 {
  margin-top: 30px;
  grid-column: 1;
  grid-row: 6;
}

@media (max-width: 1023px) {
  .c-OurService__Item.--Preset5 {
    grid-column: 1;
    grid-row: 8;
  }
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset5 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 9;
  }
}

.c-OurService__Item.--Preset6 {
  margin-top: 30px;
  grid-column: 2;
  grid-row: 6;
}

@media (max-width: 1023px) {
  .c-OurService__Item.--Preset6 {
    grid-column: 2;
    grid-row: 8;
  }
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset6 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 11;
  }
}

.c-OurService__Item.--Preset7 {
  margin-top: 30px;
  grid-column: 3;
  grid-row: 6;
}

@media (max-width: 1023px) {
  .c-OurService__Item.--Preset7 {
    grid-column: 1;
    grid-row: 11;
  }
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset7 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 13;
  }
}

.c-OurService__Item.--Preset8 {
  margin-top: 30px;
  grid-column: 4;
  grid-row: 6;
}

@media (max-width: 1023px) {
  .c-OurService__Item.--Preset8 {
    grid-column: 2;
    grid-row: 11;
  }
}

@media (max-width: 767px) {
  .c-OurService__Item.--Preset8 {
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 15;
  }
}

.c-OurService__SubMenu {
  display: none;
}

.c-OurService__SubMenu.--Preset1 {
  grid-column: 1 / 5;
  grid-row: 2;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset1 {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset1 {
    grid-column: 1;
  }
}

.c-OurService__SubMenu.--Preset2 {
  grid-column: 1 / 5;
  grid-row: 3;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset2 {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset2 {
    grid-column: 1;
    grid-row: 4;
  }
}

.c-OurService__SubMenu.--Preset3 {
  grid-column: 1 / 5;
  grid-row: 4;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset3 {
    grid-column: 1 / 3;
    grid-row: 6;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset3 {
    grid-column: 1;
    grid-row: 6;
  }
}

.c-OurService__SubMenu.--Preset4 {
  grid-column: 1 / 5;
  grid-row: 5;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset4 {
    grid-column: 1 / 3;
    grid-row: 7;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset4 {
    grid-column: 1;
    grid-row: 8;
  }
}

.c-OurService__SubMenu.--Preset5 {
  grid-column: 1 / 5;
  grid-row: 7;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset5 {
    grid-column: 1 / 3;
    grid-row: 9;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset5 {
    grid-column: 1;
    grid-row: 10;
  }
}

.c-OurService__SubMenu.--Preset6 {
  grid-column: 1 / 5;
  grid-row: 8;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset6 {
    grid-column: 1 / 3;
    grid-row: 10;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset6 {
    grid-column: 1;
    grid-row: 12;
  }
}

.c-OurService__SubMenu.--Preset7 {
  grid-column: 1 / 5;
  grid-row: 9;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset7 {
    grid-column: 1 / 3;
    grid-row: 12;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset7 {
    grid-column: 1;
    grid-row: 14;
  }
}

.c-OurService__SubMenu.--Preset8 {
  grid-column: 1 / 5;
  grid-row: 10;
}

@media (max-width: 1023px) {
  .c-OurService__SubMenu.--Preset8 {
    grid-column: 1 / 3;
    grid-row: 13;
  }
}

@media (max-width: 767px) {
  .c-OurService__SubMenu.--Preset8 {
    grid-column: 1;
    grid-row: 16;
  }
}

.u-OurServiceButton {
  display: flex;
  flex-flow: column;
  padding-bottom: 10px;
  cursor: pointer;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: var(--OurServiceMenu--Transition);
  opacity: var(--OurServiceMenu--Opacity, 0);
  -webkit-transform: var(--OurServiceMenu--Transform, scale(0.5));
  transform: var(--OurServiceMenu--Transform, scale(0.5));
}

.u-OurServiceButton.-Entry {
  --OurServiceMenu--Transition: opacity 0.8s cubic-bezier(.19,1,.22,1), transform 0.8s cubic-bezier(.19,1,.22,1);
  --OurServiceMenu--Opacity: 1;
  --OurServiceMenu--Transform: scale(1);
}

@media (max-width: 767px) {
  .u-OurServiceButton {
    padding-bottom: 0;
    flex-flow: row;
    align-items: center;
  }
}

@media (min-width: 1024.1px) {
  .u-OurServiceButton:hover {
    color: #fff;
    background: #08318D;
    --c-IconCircle--Fill:  $_COLOR-PRIMARY-NAVY;
    --c-IconCircle--Fill2:  $_COLOR-PRIMARY-NAVY;
    --u-OurServiceButton--Transform: scale(1.1);
    --c-IconCircle--Background: #fff !important;
  }
}

.u-OurServiceButton.--Active {
  color: #fff;
  background: #08318D;
  --c-IconCircle--Fill:  $_COLOR-PRIMARY-NAVY;
  --c-IconCircle--Fill2:  transparent;
  --c-IconCircle--Background: #fff !important;
}

.c-OurService__Thumbnail {
  width: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .c-OurService__Thumbnail {
    width: 14rem;
    flex-shrink: 0;
  }
}

.c-OurService__Image {
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: var(--u-OurServiceButton--Transform);
  transform: var(--u-OurServiceButton--Transform);
}

.c-OurService__Label {
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 10px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .c-OurService__Label {
    margin-top: 0;
  }
}

.c-OurService__Headline {
  font-size: 16px;
  flex-grow: 1;
  text-align: left;
}

@media (max-width: 767px) {
  .c-OurService__Headline {
    font-size: 1.2rem;
  }
}

.c-OurService__Icon {
  width: 30px;
  margin-left: 1rem;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-OurService__Icon {
    width: 2.2rem;
  }
}

.c-OurService__Menu {
  display: grid;
  gap: 0 5px;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
  .c-OurService__Menu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .c-OurService__Menu {
    display: block;
  }
}

.c-OurService__Menu::before {
  content: '';
  display: block;
  height: 5px;
  background: #08318D;
  grid-row: 1;
  grid-column: var(--c-OurService__Menu--Column);
}

@media (max-width: 767px) {
  .c-OurService__Menu::before {
    display: none;
  }
}

.c-OurService__Menu.--Preset1 {
  --c-OurService__Menu--Column: 1;
}

.c-OurService__Menu.--Preset2 {
  --c-OurService__Menu--Column: 2;
}

.c-OurService__Menu.--Preset3 {
  --c-OurService__Menu--Column: 3;
}

@media (max-width: 1023px) {
  .c-OurService__Menu.--Preset3 {
    --c-OurService__Menu--Column: 1;
  }
}

.c-OurService__Menu.--Preset4 {
  --c-OurService__Menu--Column: 4;
}

@media (max-width: 1023px) {
  .c-OurService__Menu.--Preset4 {
    --c-OurService__Menu--Column: 2;
  }
}

.c-OurService__Inner {
  grid-row: 2;
  grid-column: 1 / 5;
  background: #08318D;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1023px) {
  .c-OurService__Inner {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .c-OurService__Inner {
    display: block;
    padding: 2rem 5rem 3rem;
    min-height: auto;
  }
}

.c-OurService__List {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 60px;
  max-width: 900px;
}

@media (max-width: 767px) {
  .c-OurService__List {
    display: grid;
    grid-template-rows: 1fr;
    gap: 20px;
    justify-content: flex-start;
  }
}

.c-OurService__ListItem {
  font-size: 18px;
}

@media (max-width: 767px) {
  .c-OurService__ListItem {
    font-size: 1.3rem;
    justify-self: flex-start;
  }
}

/*
#styleguide

*/
@media (max-width: 767px) {
  .c-PhotoText {
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
    background: #F5F5F5;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.c-PhotoText__Text {
  background: #F5F5F5;
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .c-PhotoText__Text {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.c-PhotoText__Inner {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  padding-left: 5rem;
  padding-right: 5rem;
}

@media (max-width: 767px) {
  .c-PhotoText__Inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.c-PhotoText__List {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 0;
}

@media (max-width: 767px) {
  .c-PhotoText__List {
    margin-top: 3rem;
    grid-template-columns: 1fr;
  }
}

/*
#styleguide

ピンチアウトで拡大

```
<p class="c-PinchOut">※ピンチアウトで拡大</p>
```

*/
.c-PinchOut {
  display: none;
}

@media (max-width: 767px) {
  .c-PinchOut {
    display: block;
    text-align: right;
    margin-top: 1rem;
    font-size: 1.2rem;
  }
}

.c-PriceTable {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (max-width: 767px) {
  .c-PriceTable {
    gap: 1rem;
  }
}

.c-PriceTable__Row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  border-bottom: solid 1px #9FA8AF;
  padding-bottom: 1rem;
  align-items: center;
}

.c-PriceTable__Title {
  font-size: 1.7rem;
}

.c-PriceTable__Price {
  font-size: 2rem;
  font-family: "Lato", sans-serif;
}

/*
#styleguide

```
<div class="c-Product">
  <div class="c-Product__Top">
    <div class="c-Product__Thumbnail">
      <img src="https://placehold.jp/150x150.png" width="150" height="150" loading="lazy" alt="">
    </div>
    <h2 class="c-Product__Name">ホワイトエッセンス<br>ブレステック</h2>
  </div>
  <div class="c-Product__Bottom">
    <button class="c-Product__Button js-AccordionTarget__Button" data-accordion="product-4">
      <span>商品について</span>
      <span class="c-IconCircle --GradientBlue">
        <span class="c-IconCircle__Icon --Plus"><?php Svg::plus() ?></span>
      </span>
    </button>
    <div class="c-Product__Details js-AccordionTarget__Body" data-accordion="product-4">
      <p class="c-Product__Text">IPMP・CPCが原因菌を殺菌し、臭いの元にアプローチし、その場ケアではなく口臭を原因から解決します。</p>
      <p class="c-Product__Text2">内容量：50g</p>
      <div class="c-Product__List">
        <ul class="c-ListDot">
          <li class="c-ListDot__Item"><span class="marker-blue">口臭防止予防成分としてIPMPおよびCPC、黄ばみの原因を除去するポリビニルピロリドン配合</span></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="c-Product__Icon">
    <img src="/we-system/__development/images/common/icon-new.svg" alt="" loading="lazy" width="59" height="50">
  </div>
</div>

```

*/
.c-Product {
  position: relative;
}

.c-Product__Top {
  background: #fff;
  padding: 3rem;
}

@media (max-width: 767px) {
  .c-Product__Top {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-Product__Name {
  font-size: 20px;
  color: #08318D;
  text-align: center;
  font-weight: 400;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .c-Product__Name {
    font-size: 1.6rem;
  }
}

.c-Product__Bottom {
  margin-top: 5px;
  background: #fff;
}

.c-Product__Button {
  min-height: 60px;
  display: grid;
  grid-template-columns: 1fr 40px;
  gap: 1rem;
  padding: 0 30px 0 80px;
  text-align: center;
  font-size: 17px;
  align-items: center;
}

@media (max-width: 767px) {
  .c-Product__Button {
    min-height: 5rem;
    font-size: 1.4rem;
    padding: 0 3rem 0 6.2rem;
    grid-template-columns: 1fr 2.2rem;
  }
}

.c-Product__Button.--Active {
  --c-IconCircle--Fill2: transparent;
  --c-IconCircle--Fill: #0A2B82;
  --c-IconCircle--Background: #fff;
}

.c-Product__Details {
  display: none;
  padding-left: 3rem;
  padding-right: 3rem;
}

@media (max-width: 767px) {
  .c-Product__Details {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-Product__Details::before, .c-Product__Details::after {
  content: '';
  display: block;
  height: 2rem;
}

.c-Product__Details::after {
  height: 40px;
}

@media (max-width: 767px) {
  .c-Product__Details::after {
    height: 3rem;
  }
}

.c-Product__Text {
  color: #3F4146;
}

.c-Product__Text2 {
  margin-top: 20px;
  font-size: 1.4rem;
  color: #6C6D6E;
}

@media (max-width: 767px) {
  .c-Product__Text2 {
    margin-top: 1.5rem;
  }
}

.c-Product__List {
  margin-top: 20px;
  font-size: 1.4rem;
}

@media (max-width: 767px) {
  .c-Product__List {
    margin-top: 1.5rem;
  }
}

.c-Product__Icon {
  width: 60px;
  position: absolute;
  right: 20px;
  top: 0;
  z-index: 1;
}

.c-Product__Annotations {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .c-Product__Annotations {
    margin-top: 1.5rem;
  }
}

.c-Product__Annotation {
  font-size: 1.4rem;
  text-indent: -1em;
  padding-left: 1em;
}

/*
#styleguide

*/
.c-Product2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  gap: 3rem 10rem;
  max-width: 1100px;
  margin-left: auto;
}

@media (max-width: 767px) {
  .c-Product2 {
    grid-template-columns: 1fr;
  }
}

.c-Product2__Left {
  display: grid;
  gap: 3rem;
}

.c-Product2__Top.-Margin {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .c-Product2__Top.-Margin {
    margin-top: 0;
  }
}

.c-Product2__Title {
  border-left: solid 0.6rem #08318D;
  color: #08318D;
  padding-left: 20px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 3rem;
}

@media (max-width: 767px) {
  .c-Product2__Title {
    font-size: 1.6rem;
    padding-left: 1rem;
  }
}

.c-Product2__Text {
  color: #6C6D6E;
}

.c-Product2__TextBox {
  background: #F5F5F5;
  color: #6C6D6E;
  padding: 2rem;
}

.c-Product2__Right {
  overflow: hidden;
}

.c-Product2__Thumbnail {
  margin-top: 2%;
}

.c-Product2__Thumbnail .swiper-slide {
  width: calc(92% / 5);
}

.c-Product2__Thumbnail .swiper-slide:not(.swiper-slide-thumb-active) {
  -webkit-filter: contrast(1.5);
  filter: contrast(1.5);
}

/*
#styleguide

*/
.c-RelationshipList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem 4rem;
}

@media (max-width: 1023px) {
  .c-RelationshipList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .c-RelationshipList {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/*
#styleguide

タイポグラフィーの下に使用するタイトルの塊

```
<div class="c-SectionHeader -Negative">
  <h2 class="c-Headline --Preset1 --Center">1日5分、動画で医院経営を学ぶ</h2>
  <div class="c-SectionHeader__Title">
    <p class="c-Headline --Preset2">歯科医院経営動画サイト</p>
    <p class="c-SectionHeader__Band">会員制・登録無料</p>
  </div>
</div>
```
*/
/*
#styleguide

@modifire

.-Negative 上方向に負のマージンを設定タイポグラフィーとの組み合わせを想定

*/
.c-SectionHeader.-Margin {
  margin-bottom: 50px;
}

@media (max-width: 767px) {
  .c-SectionHeader.-Margin {
    margin-bottom: 3rem;
  }
}

.c-SectionHeader.-Negative {
  position: relative;
  z-index: 1;
  margin-top: -50px;
}

@media (max-width: 767px) {
  .c-SectionHeader.-Negative {
    margin-top: -2.5rem;
  }
}

.c-SectionHeader__Band {
  background: #08318D;
  color: #fff;
  text-align: center;
  font-size: 18px;
  margin-top: 1rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-SectionHeader__Band {
    font-size: 1.3rem;
  }
}

/*
#styleguide

セミナー参加前/後のメインビジュアル

*/
.c-SeminarMainvisual {
  position: relative;
  display: grid;
  align-items: center;
  color: #fff;
}

.c-SeminarMainvisual__Inner {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  position: relative;
  z-index: 1;
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
}

.c-SeminarMainvisual__Number {
  font-size: 4.86vw;
  font-family: "Lato", sans-serif;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-bottom: solid 1px #fff;
  padding-bottom: 0.69vw;
  line-height: 1;
}

@media (max-width: 767px) {
  .c-SeminarMainvisual__Number {
    padding-bottom: 1rem;
    font-size: 4rem;
  }
}

.c-SeminarMainvisual__Headline {
  font-size: 2.5vw;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  text-align: center;
  font-weight: 500;
  margin-top: 2.77vw;
}

@media (max-width: 767px) {
  .c-SeminarMainvisual__Headline {
    margin-top: 4rem;
    font-size: 2rem;
  }
}

.c-SeminarMainvisual__LeadText {
  text-align: center;
  font-weight: 500;
  margin-top: 2.08vw;
}

@media (max-width: 767px) {
  .c-SeminarMainvisual__LeadText {
    margin-top: 4rem;
    font-size: 1.5rem;
  }
}

.c-SeminarMainvisual__Image {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

/*
#styleguide

汎用的なスライダー
 - メイン1名
 - 左右ボタン
 - ドットナビゲーション（PC / SP共通）

```
<div class="c-Slider js-Slider">
  <div class="c-Slider__Body">
    <div class="swiper js-Slider__Slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://placehold.jp/370x595.png" width="370" height="595" loading="lazy" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://placehold.jp/370x595.png" width="370" height="595" loading="lazy" alt="">
        </div>
      </div>
    </div>
    <div class="c-Slider__Arrow -Prev">
      <button type="button" class="u-ButtonCircleArrow --Blue --Reverse js-Slider__Prev">
        <span class="u-ButtonCircleArrow__Icon">
          <?php Svg::directionRoundRight() ?>
        </span>
      </button>
    </div>
    <div class="c-Slider__Arrow -Next">
      <button type="button" class="u-ButtonCircleArrow --Blue js-Slider__Next">
        <span class="u-ButtonCircleArrow__Icon">
          <?php Svg::directionRoundRight() ?>
        </span>
      </button>
    </div>
  </div>
  <div class="c-Slider__Pagination">
    <div class="c-SliderPagination js-Slider__Pagination"></div>
  </div>
</div>

```

*/
.c-Slider__Body {
  padding-left: 70px;
  padding-right: 70px;
  position: relative;
}

@media (max-width: 767px) {
  .c-Slider__Body {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.c-Slider__Body .swiper {
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
}

.c-Slider__Arrow {
  position: absolute;
  width: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 10;
}

@media (max-width: 767px) {
  .c-Slider__Arrow {
    width: 2.4rem;
  }
}

.c-Slider__Arrow.-Prev {
  left: 0;
}

.c-Slider__Arrow.-Next {
  right: 0;
}

.c-Slider__Pagination {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .c-Slider__Pagination {
    margin-top: 2rem;
  }
}

/*
#styleguide

*/
.c-SliderList {
  background: #F7F7F7;
  padding-top: 120px;
  padding-bottom: 100px;
}

@media (max-width: 767px) {
  .c-SliderList {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.c-SliderList.--Margin {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .c-SliderList.--Margin {
    margin-top: 3rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.c-SliderList__List {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 30px));
  gap: 80px 60px;
}

@media (max-width: 1023px) {
  .c-SliderList__List {
    grid-template-columns: 100%;
  }
}

@media (max-width: 767px) {
  .c-SliderList__List {
    gap: 5rem;
  }
}

.c-SliderList__Item {
  background: #fff;
  padding-bottom: 50px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  align-items: center;
}

@media (max-width: 767px) {
  .c-SliderList__Item {
    padding-bottom: 3rem;
  }
}

.c-SliderList__Item.--Wide {
  grid-column: span 2;
}

@media (max-width: 1023px) {
  .c-SliderList__Item.--Wide {
    grid-column: auto;
  }
}

.c-SliderList__Headline {
  margin-top: -27.5px;
  margin-left: auto;
  margin-right: auto;
  max-width: 570px;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
  margin-bottom: 50px;
}

@media (max-width: 767px) {
  .c-SliderList__Headline {
    margin-bottom: 3rem;
    margin-top: -1.9rem;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
}

.c-SliderList__LeadText {
  padding-left: 90px;
  padding-right: 90px;
  color: #3F4146;
}

@media (max-width: 767px) {
  .c-SliderList__LeadText {
    font-size: 1.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.c-SliderList__Split {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 30px));
  gap: 80px 60px;
}

@media (max-width: 767px) {
  .c-SliderList__Split {
    grid-template-columns: 100%;
  }
}

.c-SliderList__Slider {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 767px) {
  .c-SliderList__Slider {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.c-SliderList__Slider.-Fit {
  max-width: 57rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-SliderList__Slider.-Fit {
    max-width: 100%;
  }
}

.c-SliderList__Text {
  font-size: 20px;
  color: #3F4146;
  margin-top: 2rem;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 767px) {
  .c-SliderList__Text {
    font-size: 1.4rem;
  }
}

.c-SliderList__Arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .c-SliderList__Arrow {
    width: 2.6rem;
  }
}

.c-SliderList__Arrow.--Prev {
  left: 25px;
}

@media (max-width: 767px) {
  .c-SliderList__Arrow.--Prev {
    left: 0.5rem;
  }
}

.c-SliderList__Arrow.--Next {
  right: 25px;
}

@media (max-width: 767px) {
  .c-SliderList__Arrow.--Next {
    right: 0.5rem;
  }
}

.c-SliderList__Pagination {
  display: flex;
  justify-content: center;
}

/*
#styleguide

スライダーのドットページネーション

スライダーのページネーションのクラス名を `c-SliderPagination__Dot` になるように設定

```
<div class="c-SliderPagination js-ImageBox__PaginationPc"></div>
```

*/
.c-SliderPagination {
  display: flex;
  justify-content: center;
}

/*
#styleguide

1コンテンツ表示のスライダー

<div class="c-SliderSingle">
  <div class="swiper js-SliderSingle__Slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="/we-system/build/images/support/newcultivation/section-02-slider-01-image-01.jpg" srcset="/we-system/build/images/support/newcultivation/section-02-slider-01-image-01@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
      </div>
      <div class="swiper-slide">
        <img src="/we-system/build/images/support/newcultivation/section-02-slider-01-image-02.jpg" srcset="/we-system/build/images/support/newcultivation/section-02-slider-01-image-02@2x.jpg 2x" alt="" loading="lazy" width="770" height="530">
      </div>
    </div>
    <div class="c-SliderSingle__Indicator -Fixed">
      <div class="c-SliderSingle__Arrow">
        <button type="button" class="u-ButtonCircleArrow --Blue --Reverse js-SliderSingle__Prev">
          <span class="u-ButtonCircleArrow__Icon"><?php Svg::directionRoundRight() ?></span>
        </button>
      </div>
      <div class="c-SliderSingle__Pagination">
        <div class="c-SliderPagination js-SliderSingle__Pagination"></div>
      </div>
      <div class="c-SliderSingle__Arrow">
        <button type="button" class="u-ButtonCircleArrow --Blue js-SliderSingle__Next">
          <span class="u-ButtonCircleArrow__Icon"><?php Svg::directionRoundRight() ?></span>
        </button>
      </div>
    </div>
  </div>
</div>

*/
.c-SliderSingle {
  position: relative;
}

.c-SliderSingle__Indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  margin-top: 15px;
}

.c-SliderSingle__Indicator.-Fixed {
  margin-top: 0;
  position: absolute;
  bottom: 10px;
  width: 100%;
  left: 0;
}

.c-SliderSingle__Arrow {
  width: 40px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-SliderSingle__Arrow {
    width: 2.5rem;
  }
}

.c-SliderSingle__Pagination {
  margin-left: 2rem;
  margin-right: 2rem;
}

/*
#styleguide

メイン1枚 + サムネイルのスライダー

- 左右ボタン付き

```

```
*/
.c-SliderThumbnail__Main {
  position: relative;
}

.c-SliderThumbnail__Arrow {
  position: absolute;
  width: 40px;
  top: 50%;
  z-index: 10;
}

@media (max-width: 767px) {
  .c-SliderThumbnail__Arrow {
    width: 25px;
  }
}

.c-SliderThumbnail__Arrow.-Prev {
  left: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.c-SliderThumbnail__Arrow.-Next {
  right: 0;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
}

.c-SliderThumbnail__Thumbanil {
  margin-top: 2%;
}

@media (max-width: 767px) {
  .c-SliderThumbnail__Thumbanil {
    display: none;
  }
}

.c-SliderThumbnail__Thumbanil .swiper-slide {
  width: calc(92% / 5);
}

/*
#styleguide

*/
.c-SupportCard {
  position: relative;
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
}

.c-SupportCard__Inner {
  padding-top: 70px;
  padding-bottom: 70px;
  min-height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

@media (max-width: 1023px) {
  .c-SupportCard__Inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 767px) {
  .c-SupportCard__Inner {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
    gap: 3rem;
  }
}

.c-SupportCard__Title {
  color: #fff;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 42px;
  font-weight: 500;
  word-break: keep-all;
}

@media (max-width: 767px) {
  .c-SupportCard__Title {
    font-size: 2.8rem;
  }
}

.c-SupportCard__Menu {
  display: grid;
  gap: 1rem;
}

@media (max-width: 1023px) {
  .c-SupportCard__Menu {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .c-SupportCard__Menu {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.c-SupportCard__Background {
  z-index: -1;
}

/*
#styleguide

支援メニューのメインビジュアル

*/
.c-SupportMainvisual {
  display: grid;
  align-items: center;
  position: relative;
  color: #fff;
}

.c-SupportMainvisual::before {
  content: '';
  display: block;
  padding-bottom: 44.44444%;
  grid-row: 1;
  grid-column: 1;
}

@media (max-width: 767px) {
  .c-SupportMainvisual::before {
    padding-bottom: 112%;
  }
}

.c-SupportMainvisual__Inner {
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
  padding-top: 70px;
  padding-bottom: 70px;
  grid-row: 1;
  grid-column: 1;
}

@media (max-width: 767px) {
  .c-SupportMainvisual__Inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.c-SupportMainvisual__Category {
  border-bottom: solid 1px #fff;
  padding-bottom: 4px;
}

@media (max-width: 767px) {
  .c-SupportMainvisual__Category {
    font-size: 1.4rem;
  }
}

.c-SupportMainvisual__Title {
  text-align: center;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-weight: 500;
  margin-top: 20px;
  font-size: 36px;
}

@media (max-width: 767px) {
  .c-SupportMainvisual__Title {
    font-size: 2rem;
  }
}

.c-SupportMainvisual__LeadText {
  margin-top: 3rem;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 767px) {
  .c-SupportMainvisual__LeadText {
    font-size: 1.5rem;
  }
}

.c-SupportMainvisual__Background {
  z-index: -1;
}

/*
#styleguide



*/
.c-SupportMarketing {
  display: grid;
  grid-template-columns: 677fr 372fr;
  gap: 2rem 4rem;
  align-items: center;
  background: #F5F5F5;
  padding: 40px 70px;
  position: relative;
}

@media (max-width: 1023px) {
  .c-SupportMarketing {
    padding: 40px 40px;
  }
}

@media (max-width: 767px) {
  .c-SupportMarketing {
    grid-template-columns: 1fr;
    padding: 4rem 1rem 3rem;
  }
}

.c-SupportMarketing__Number {
  font-size: 80px;
  color: #8EA2C6;
  font-family: "Lato", sans-serif;
  position: absolute;
  line-height: 1;
  left: 10px;
  top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .c-SupportMarketing__Number {
    font-size: 6rem;
    left: 0;
  }
}

.c-SupportMarketing__Title {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  grid-column: 1;
  grid-row: 1;
}

@media (max-width: 1023px) {
  .c-SupportMarketing__Title {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .c-SupportMarketing__Title {
    grid-column: auto;
    grid-row: auto;
    font-size: 1.6rem;
  }
}

.c-SupportMarketing__Title > strong {
  color: #08318D;
  font-size: 32px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .c-SupportMarketing__Title > strong {
    font-size: 2rem;
  }
}

.c-SupportMarketing__List {
  display: grid;
  gap: 5px;
  grid-column: 1;
  grid-row: 2;
}

@media (max-width: 767px) {
  .c-SupportMarketing__List {
    grid-column: auto;
    grid-row: auto;
  }
}

.c-SupportMarketing__Question {
  padding: 8px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  background: #fff;
  line-height: 1.6;
  align-items: center;
}

@media (max-width: 767px) {
  .c-SupportMarketing__Question {
    align-items: flex-start;
    padding: 0.8rem 1rem;
    font-size: 1.4rem;
  }
}

.c-SupportMarketing__Question::before {
  content: 'Q.';
  display: block;
  font-family: "Lato", sans-serif;
  color: #EEAA2E;
  font-weight: 500;
  font-size: 24px;
}

@media (max-width: 767px) {
  .c-SupportMarketing__Question::before {
    font-size: 2rem;
    line-height: 1.4;
  }
}

.c-SupportMarketing__Note {
  margin-top: 10px;
  font-size: 1.4rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}

@media (max-width: 767px) {
  .c-SupportMarketing__Note {
    margin-top: 0.5rem;
    font-size: 1.2rem;
  }
}

.c-SupportMarketing__Image {
  grid-column: 2;
  grid-row: 1 / 3;
}

@media (max-width: 1023px) {
  .c-SupportMarketing__Image {
    grid-row: 2;
  }
}

@media (max-width: 767px) {
  .c-SupportMarketing__Image {
    grid-column: auto;
    grid-row: auto;
    width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
#styleguide

```
```
*/
.c-SwitchContents {
  display: grid;
  grid-template-columns: 760fr 510fr;
  gap: 50px;
  max-width: 1440px;
  padding-right: 120px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1023px) {
  .c-SwitchContents {
    padding-right: 0;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .c-SwitchContents {
    display: block;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
}

.c-SwitchContents__Main {
  padding-top: 20px;
}

@media (max-width: 1023px) {
  .c-SwitchContents__Main {
    padding-top: 10px;
  }
}

@media (max-width: 767px) {
  .c-SwitchContents__Main {
    padding-top: 0;
    display: grid;
    gap: 4rem;
  }
}

@media (max-width: 767px) {
  .c-SwitchContents__Sub {
    display: none;
  }
}

.c-SwitchContents__Navigation::before {
  content: '';
  display: block;
  width: 90%;
  margin-left: 20px;
  margin-right: 20px;
  height: 1px;
  background: #ABABAB;
}

@media (max-width: 1023px) {
  .c-SwitchContents__Navigation::before {
    margin-left: 15px;
    margin-right: 15px;
  }
}

.c-SwitchContents__NavigationItem::after {
  content: '';
  display: block;
  width: 90%;
  margin-left: 20px;
  margin-right: 20px;
  height: 1px;
  background: #ABABAB;
}

@media (max-width: 1023px) {
  .c-SwitchContents__NavigationItem::after {
    margin-left: 15px;
    margin-right: 15px;
  }
}

.c-SwitchContents__Button {
  align-items: center;
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 30px;
  padding: 20px;
  margin-top: -1px;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024.1px) {
  .c-SwitchContents__Button:hover {
    background: #0A2B82;
    color: #fff;
  }
}

@media (max-width: 1023px) {
  .c-SwitchContents__Button {
    padding: 10px 15px;
    grid-template-columns: 70px 1fr;
    gap: 20px;
    font-size: 1.4rem;
  }
}

.c-SwitchContents__Button.--Active {
  background: #0A2B82;
  color: #fff;
}

.c-SwitchContents__Card {
  display: none;
}

@media (max-width: 767px) {
  .c-SwitchContents__Card {
    display: block;
  }
}

.c-SwitchContents__Card.--Active {
  display: block;
  -webkit-animation: fade-in 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation: fade-in 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.c-SwitchContents__Box {
  background: #fff;
  padding: 40px;
  min-height: 200px;
  margin-top: -200px;
  margin-right: 60px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .c-SwitchContents__Box {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .c-SwitchContents__Box {
    padding: 0;
    min-height: 0;
    margin-top: 2rem;
    margin-right: 0;
  }
}

.c-SwitchContents__Headline {
  font-size: 30px;
  line-height: 1.6;
  font-weight: 400;
  color: #08318D;
}

@media (max-width: 1023px) {
  .c-SwitchContents__Headline {
    font-size: 1.8rem;
  }
}

.c-SwitchContents__Text {
  margin-top: 20px;
  color: #3F4146;
}

@media (max-width: 1023px) {
  .c-SwitchContents__Text {
    margin-top: 1rem;
    font-size: 1.4rem;
  }
}

/*
#styleguide

タブ

```
<div class="c-Tab">
  <div class="c-Tab__Item">
    <button type="button" class="c-Tab__Button --Active js-TabTarget__Button" data-group="contents" data-tab="whiteessence">ホワイトエッセンス</button>
  </div>
  <div class="c-Tab__Item">
    <button type="button" class="c-Tab__Button js-TabTarget__Button" data-group="contents" data-tab="we-care">WEcare</button>
  </div>
</div>

<div class="u-Brand__Body js-TabTarget__Body" data-group="contents" data-tab="whiteessence">
</div>

<div class="u-Brand__Body js-TabTarget__Body" data-group="contents" data-tab="we-care">
</div>

```
*/
.c-Tab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 90px;
  padding-right: 90px;
  gap: 2rem;
  border-bottom: solid 2px #0A2B82;
  align-items: flex-end;
}

@media (max-width: 1023px) {
  .c-Tab {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 767px) {
  .c-Tab {
    padding-left: 0;
    padding-right: 0;
    gap: 1rem;
  }
}

.c-Tab__Item {
  margin-bottom: -2px;
  background: #fff;
}

@media (max-width: 767px) {
  .c-Tab__Item:first-child {
    --c-Tab__ButtonBefore--BrderLeft: none;
  }
}

@media (max-width: 767px) {
  .c-Tab__Item:last-child {
    --c-Tab__ButtonBefore--BrderRight: none;
  }
}

.c-Tab__Button {
  font-weight: inherit;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  line-height: inherit;
  text-align: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
  position: relative;
  font-size: 30px;
  z-index: 0;
  font-weight: 400;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  line-height: 1.4;
  text-align: center;
  color: #3F4146;
}

@media (max-width: 767px) {
  .c-Tab__Button {
    min-height: 6rem;
    font-size: 1.6rem;
  }
}

@media (min-width: 1024.1px) {
  .c-Tab__Button:hover {
    --c-Tab__ButtonAfter--Height: 100%;
  }
}

.c-Tab__Button.--Active {
  --c-Tab__ButtonBefore--Height: 100%;
  --c-Tab__ButtonAfter--Height: 0%;
  color: #0A2B82;
}

.c-Tab__Button:before {
  content: '';
  display: block;
  width: 100%;
  height: var(--c-Tab__ButtonBefore--Height, 2px);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-top: solid 2px #0A2B82;
  border-right: var(--c-Tab__ButtonBefore--BrderRight, solid 2px #0A2B82);
  border-left: var(--c-Tab__ButtonBefore--BrderLeft, solid 2px #0A2B82);
  transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.c-Tab__Button::after {
  content: '';
  display: block;
  width: 100%;
  height: var(--c-Tab__ButtonAfter--Height, calc(100% - 20px));
  position: absolute;
  left: 0;
  bottom: 0;
  background: #F5F5F5;
  z-index: -1;
  transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 767px) {
  .c-Tab__Button::after {
    height: var(--c-Tab__ButtonAfter--Height, calc(100% - 1rem));
  }
}

/*
#styleguide

テーブル1

*/
.c-Table1 {
  overflow: auto;
}

.c-Table1__Table {
  font-size: 17px;
  table-layout: fixed;
  min-width: 100%;
  border-collapse: collapse;
  border-bottom: solid 1px #3E7FDD;
  border-right: solid 1px #3E7FDD;
}

@media (max-width: 767px) {
  .c-Table1__Table {
    font-size: 1.4rem;
  }
}

.c-Table1__Row:nth-child(odd) {
  --c-Table1__Row--Background: #F5F5F5;
}

.c-Table1__Header {
  background: #0A2B82;
  color: #fff;
  height: 55px;
  vertical-align: middle;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-Table1__Header {
    height: 4.5rem;
    font-size: 1.4rem;
  }
}

.c-Table1__Header + .c-Table1__Header {
  border-left: solid 1px #fff;
}

.c-Table1__Header.--Data {
  width: 170px;
  min-width: 170px;
}

@media (max-width: 767px) {
  .c-Table1__Header.--Data {
    width: 15rem;
    min-width: 15rem;
  }
}

.c-Table1__Header2 {
  background: #8EA2C6;
  color: #fff;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  width: 50px;
  min-width: 50px;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  font-weight: 400;
  border-top: solid 1px #fff;
}

@media (max-width: 767px) {
  .c-Table1__Header2 {
    width: 4rem;
    min-width: 4rem;
  }
}

.c-Table1__Header3 {
  background: var(--c-Table1__Row--Background, #fff);
  height: 50px;
  vertical-align: middle;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 400;
  border-right: solid 1px #3E7FDD;
  border-top: solid 1px #fff;
}

@media (max-width: 767px) {
  .c-Table1__Header3 {
    height: 4rem;
  }
}

.c-Table1__Data {
  background: var(--c-Table1__Row--Background, #fff);
  text-align: center;
  height: 50px;
  vertical-align: middle;
  padding-left: 1rem;
  padding-right: 1rem;
  border-left: solid 1px #3E7FDD;
  border-top: solid 1px #fff;
}

@media (max-width: 767px) {
  .c-Table1__Data {
    height: 4rem;
  }
}

/*
#styleguide

```
<ul class="c-TagList">
  <li class="c-TagList__Item">
    <p class="c-TagList__Title">リピート率などの顧客満足度関係係数の実績の確認</p>
    <p class="c-TagList__Text">リピート率などの顧客満足度関係係数の実績の確認</p>
  </li>
  <li class="c-TagList__Item">
    <p class="c-TagList__Title">スタッフの状況確認と対策共有</p>
    <p class="c-TagList__Text">スタッフの状況確認と対策共有</p>
  </li>
</ul>
```

*/
.c-TagList {
  display: grid;
  gap: 1rem;
}

.c-TagList__Item {
  display: grid;
  padding: 20px;
  background: #fff;
  position: relative;
  align-items: center;
  min-height: 80px;
}

@media (max-width: 767px) {
  .c-TagList__Item {
    padding: 1rem 2rem;
    min-height: 6rem;
  }
}

.c-TagList__Item::before {
  content: '';
  display: block;
  width: 4px;
  background: linear-gradient(to bottom, #08318D 50%, #1D86D5 50%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

@media (max-width: 767px) {
  .c-TagList__Item::before {
    width: 100%;
    height: 0.4rem;
    background: linear-gradient(to right, #08318D 50%, #1D86D5 50%);
  }
}

.c-TagList__Title {
  font-size: 20px;
  font-weight: 500;
  color: #08318D;
}

@media (max-width: 767px) {
  .c-TagList__Title {
    font-size: 1.6rem;
  }
}

.c-TagList__Text {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: dashed 1px #1C1C1C;
  font-size: 1.4rem;
  color: #3F4146;
}

/*
#styleguide


```
<ul class="c-TagList2">
  <li class="c-TagList2__Item">
    <p class="c-TagList2__Title">顧客</p>
    <p class="c-TagList2__Text">顧客情報管理、FB確認、検索など</p>
  </li>
</ul>
```
*/
.c-TagList2 {
  display: grid;
  gap: 1rem;
}

.c-TagList2__Item {
  display: grid;
  padding: 0 20px;
  background: #fff;
  position: relative;
  min-height: 80px;
  grid-template-columns: 174px 1fr;
}

@media (max-width: 1023px) {
  .c-TagList2__Item {
    grid-template-columns: 1fr;
    padding: 1rem 2rem;
  }
}

.c-TagList2__Item::before {
  content: '';
  display: block;
  width: 4px;
  background: linear-gradient(to bottom, #08318D 50%, #1D86D5 50%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

@media (max-width: 767px) {
  .c-TagList2__Item::before {
    width: 100%;
    height: 0.4rem;
    background: linear-gradient(to right, #08318D 50%, #1D86D5 50%);
  }
}

.c-TagList2__Title {
  font-size: 20px;
  font-weight: 500;
  color: #08318D;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .c-TagList2__Title {
    font-size: 1.6rem;
  }
}

.c-TagList2__Text {
  font-size: 1.4rem;
  color: #3F4146;
  border-left: dashed 1px #838689;
  padding-left: 30px;
  display: flex;
  align-items: center;
  font-weight: 400;
}

@media (max-width: 1023px) {
  .c-TagList2__Text {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: dashed 1px #838689;
    border-left: none;
    padding-left: 0;
  }
}

/*
#styleguide

*/
.c-TextIcon__Icon {
  width: 20px;
  display: inline-block;
  vertical-align: middle;
}

/*
#styleguide

タイトル + アイコン

```
<div class="c-TitleIcon">
  <p>収益モデル</p>
  <div class="c-IconCircle --GradientBlue">
    <span class="c-IconCircle__Icon --Arrow"><?php Svg::arrowRight() ?></span>
  </div>
</div>
```
*/
.c-TitleIcon {
  display: grid;
  grid-template-columns: 1fr 40px;
  font-size: 24px;
  color: #08318D;
  align-items: center;
}

@media (max-width: 767px) {
  .c-TitleIcon {
    font-size: 1.7rem;
    grid-template-columns: 1fr 2.2rem;
  }
}

/*
#styleguide

タイポグラフィー

*/
/*
#styleguide

*/
.c-Video {
  position: relative;
}

.c-Video::before {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.c-Video > video {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
}

/*
#styleguide

*/
.c-Voice {
  counter-set: voice;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 20px;
}

@media (max-width: 767px) {
  .c-Voice {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-left: calc(var(--inner-padding, 0) * -1);
    margin-right: calc(var(--inner-padding, 0) * -1);
  }
}

.c-Voice__Item {
  counter-increment: voice;
  position: relative;
  z-index: 0;
  padding-top: 1rem;
  padding-left: 10px;
  padding-right: 2rem;
  padding-bottom: 40px;
}

@media (max-width: 767px) {
  .c-Voice__Item {
    padding-left: 3rem;
    padding-bottom: 2rem;
  }
}

.c-Voice__Item::before {
  content: '';
  display: block;
  width: calc(100% - 30px);
  height: calc(100% - 40px);
  position: absolute;
  bottom: 0;
  right: 0;
  background: #F5F5F5;
  z-index: -1;
}

@media (max-width: 767px) {
  .c-Voice__Item::before {
    width: 100%;
  }
}

.c-Voice__Item::after {
  content: counter(voice);
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #0A2B82;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-family: "Lato", sans-serif;
  font-size: 2.8rem;
  line-height: 1;
}

@media (max-width: 767px) {
  .c-Voice__Item::after {
    left: 2rem;
  }
}

.c-Voice__Image {
  border: solid 4px #0A2B82;
  padding: 4rem 2rem 2rem;
  background: #fff;
  position: relative;
}

.c-Voice__Image::before, .c-Voice__Image::after {
  content: '';
  display: block;
  -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0%);
  clip-path: polygon(0 0, 100% 100%, 100% 0%);
  position: absolute;
  top: 100%;
}

.c-Voice__Image::before {
  background: #0A2B82;
  right: 70%;
  width: 30px;
  height: 30px;
}

.c-Voice__Image::after {
  background: #fff;
  right: calc(70% + 3px);
  width: 22px;
  height: 22px;
}

.c-Voice__Text {
  display: none;
  font-weight: 400;
}

@media (max-width: 767px) {
  .c-Voice__Text {
    display: block;
    margin-top: 3rem;
    font-size: 1.4rem;
    color: #08318D;
  }
}

.c-Voice__Name {
  color: #08318D;
  font-weight: 500;
  margin-top: 50px;
  margin-left: 50px;
}

@media (max-width: 767px) {
  .c-Voice__Name {
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-left: 0;
  }
}

.c-Voice__Icon {
  width: 133px;
  position: absolute;
  z-index: 1;
  right: 15.25424%;
  bottom: 0;
}

@media (max-width: 1023px) {
  .c-Voice__Icon {
    right: 3rem;
  }
}

@media (max-width: 767px) {
  .c-Voice__Icon {
    width: 10.19rem;
  }
}

/*
#styleguide

YouTube

```
<div class="c-YouTube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/2ldxflValps" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
*/
.c-YouTube {
  position: relative;
  display: block;
}

.c-YouTube::before {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.c-YouTube > iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  position: absolute;
}