@charset "UTF-8";
:root {
  /*
  *  color
  */
  --color-white: #ffffff;
  --color-black: #111111;
  --color-blue: #024097;
  --color-blue02: #0099cc;
  --color-light-blue: #a7bdda;
  --color-light-blue02: #00a0e9;
  --color-light-blue03: #eafaff;
  --color-light-blue04: #40b3d9;
  --color-gray: #c4c4c4;
  --color-gray02: #7e7e7e;
  --color-gray03: #d9d9d9;
  --color-gray04: #696969;
  --color-gary05: #ededed;
  --color-gray06: #e8e8e8;
  --color-text: #333333;
  --color-background: #f0f0f0;
  /*
  *  font-size
  */
  --font-size-xsmall: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xlarge: 1.5rem;
  /*
  *  font-weight
  */
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  /*
  *  heading font-size
  */
  --heading-size-medium: 1.75rem;
  --heading-size-medium-sp: 1.25rem;
  --heading-size-large: 2.25rem;
  --heading-size-large-sp: 1.625rem;
  /*
  *  letter-spacing
  */
  --letter-spacing-large: 0.05em;
  /*
  *  width
  */
  --width-default: 1120px;
}

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  min-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-tap-highlight-color: transparent; /* 3*/
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  border-top-width: 1px;
  box-sizing: content-box; /* 1 */
  clear: both;
  color: inherit;
  height: 0; /* 1 */
  margin: 0;
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
  vertical-align: middle;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  min-width: 0;
  padding: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-collapse: collapse;
  border-color: inherit; /* 1 */
}

caption {
  text-align: left;
}

td,
th {
  padding: 0;
  vertical-align: top;
}

th {
  font-weight: bold;
  text-align: left;
}

body {
  color: var(--color-text);
  font-family: YuGothic, "游ゴシック", sans-serif;
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
}

.claire-main {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-main {
    padding-top: 50px;
  }
}

.claire-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--width-default);
  padding: 33px 20px 93px 20px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-inner {
    padding: 26px 10px 79px 10px;
  }
}

.claire-pc {
  display: block;
}
@media screen and (max-width: 767px) {
  .claire-pc {
    display: none;
  }
}

.claire-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .claire-sp {
    display: block;
  }
}

.claire-footer {
  background-color: var(--color-background);
  position: relative;
  width: 100%;
}
.claire-footer__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: var(--width-default);
  padding: 20px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-footer__inner {
    padding: 25px;
  }
}
.claire-footer__top {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 23px;
  justify-content: center;
  padding: 38px 0 20px 0;
}
@media screen and (max-width: 767px) {
  .claire-footer__top {
    gap: 31px;
    padding: 38px 0 24px 0;
  }
}
.claire-footer__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 27px 34px;
  padding: 0 8px;
}
@media screen and (max-width: 767px) {
  .claire-footer__list {
    gap: 18px 25px;
    justify-content: center;
  }
}
.claire-footer__link {
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  line-height: 1.18;
}
.claire-footer__company {
  height: 55px;
  width: 194px;
}
.claire-footer__company img {
  height: 100%;
  width: 100%;
}
.claire-footer__bottom {
  align-items: center;
  border-top: 1px solid var(--color-gray);
  display: flex;
  justify-content: space-between;
  padding: 21px 0 30px 0;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-footer__bottom {
    flex-direction: column;
    gap: 26px;
    padding: 35px 0 26px 0;
  }
}
.claire-footer__logo-wrapper {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: center;
}
.claire-footer__logo-link {
  cursor: pointer;
}
.claire-footer__global-icon {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_global.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 24px;
  width: 24px;
}
.claire-footer__info {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7.2px;
}
@media screen and (max-width: 767px) {
  .claire-footer__info {
    align-items: center;
  }
}
.claire-footer__info-list {
  align-items: center;
  display: flex;
}
.claire-footer__info-item {
  font-size: var(--font-size-small);
  line-height: 1.7;
  padding: 0 17px 0 18px;
}
.claire-footer__info-item:first-child {
  padding-left: 0;
}
.claire-footer__info-item:not(:first-child) {
  position: relative;
}
.claire-footer__info-item:not(:first-child)::before {
  background-color: var(--color-gray02);
  content: "";
  height: 15.8px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}
.claire-footer__info-item:last-child {
  padding-right: 0;
}
.claire-footer__copyright {
  font-size: var(--font-size-xsmall);
  line-height: 1.333;
}

.claire-header {
  width: 100%;
}
.claire-header__top {
  align-items: center;
  background-color: var(--color-white);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--width-default);
  padding: 18px 20px;
  width: 100%;
  z-index: 1000;
}
@media screen and (max-width: 767px) {
  .claire-header__top {
    padding: 8px 11px 5px 11px;
    position: fixed;
  }
}
.claire-header__logo {
  height: 50px;
  margin: 14px 0 10px 0;
  width: 124px;
}
@media screen and (max-width: 767px) {
  .claire-header__logo {
    height: 28.7px;
    margin: 0;
    width: 71.6px;
  }
}
.claire-header__logo-link {
  display: block;
}
@media screen and (max-width: 767px) {
  .claire-header__logo-link {
    height: 28.7px;
    width: 71.6px;
  }
}
.claire-header__logo-link img {
  height: auto;
  width: 100%;
}
.claire-header__info-wrapper {
  align-items: center;
  display: flex;
  gap: 16px;
}
.claire-header__company {
  height: 52px;
  margin: 18px 0 4px 0;
  width: 180px;
}
@media screen and (max-width: 767px) {
  .claire-header__company {
    height: 35px;
    margin: 2px 0 0 0;
    width: 120px;
  }
}
.claire-header__company img {
  height: auto;
  width: 100%;
}
.claire-header__hum {
  display: none;
}
@media screen and (max-width: 767px) {
  .claire-header__hum {
    cursor: pointer;
    display: block;
    height: 34px;
    margin-bottom: 3px;
    position: relative;
    width: 25px;
  }
}
@media screen and (max-width: 767px) {
  .claire-header__hum span {
    background-color: var(--color-black);
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 10px;
    transition: 0.2s;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .claire-header__hum span:nth-child(2) {
    top: 16px;
  }
}
@media screen and (max-width: 767px) {
  .claire-header__hum span:nth-child(3) {
    top: 22px;
  }
}
@media screen and (max-width: 767px) {
  .claire-header__top:has(+ .claire-header__bottom.is-open) .claire-header__hum span {
    top: 16px;
    transform: rotate(45deg);
  }
}
@media screen and (max-width: 767px) {
  .claire-header__top:has(+ .claire-header__bottom.is-open) .claire-header__hum span:nth-child(2) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .claire-header__top:has(+ .claire-header__bottom.is-open) .claire-header__hum span:nth-child(3) {
    transform: rotate(-45deg);
  }
}
.claire-header__bottom {
  background-color: var(--color-background);
  width: 100%;
  z-index: 1000;
}
@media screen and (max-width: 767px) {
  .claire-header__bottom {
    background-color: var(--color-white);
    bottom: 0;
    height: 48px;
    opacity: 0;
    overflow-y: auto;
    position: fixed;
    top: 50px;
    transform: translateY(-100dvh);
    transition: 0.2s;
  }
}
.claire-header__bottom.is-fixed {
  position: fixed;
  top: 0;
}
@media screen and (max-width: 767px) {
  .claire-header__bottom.is-open {
    height: auto;
    opacity: 1;
    transform: translateY(0);
  }
}

.navigation {
  display: flex;
  justify-content: center;
}
.navigation__list {
  align-items: center;
  column-gap: clamp(20px, 2.7777777778dvw, 40px);
  display: flex;
  margin: 0 auto;
  max-width: var(--width-default);
  padding: 0 20px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .navigation__list {
    column-gap: 0;
    flex-direction: column;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .navigation__item {
    border-top: 1px solid var(--color-gray03);
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .navigation__item:last-child {
    border-bottom: 1px solid var(--color-gray03);
  }
}
@media screen and (max-width: 767px) {
  .navigation__item:has(.navigation__button) {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }
}
.navigation__link {
  cursor: pointer;
  display: block;
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  padding: 11px 0;
  position: relative;
  width: 100%;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .navigation__link {
    font-weight: var(--font-weight-medium);
    padding: 11px 10px;
  }
}
.navigation__link::before, .navigation__link::after {
  content: "";
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}
@media screen and (max-width: 767px) {
  .navigation__link::before, .navigation__link::after {
    display: none;
  }
}
.navigation__link::before {
  background-color: var(--color-blue);
  bottom: 0;
  height: 3px;
  transition: 0.2s;
  width: 0;
}
.navigation__link::after {
  border-color: var(--color-blue) transparent transparent transparent;
  border-style: solid;
  border-width: 0;
  height: 0;
  top: 100%;
  transition: 0.1s;
  width: 0;
}
.navigation__link:hover::before {
  width: 100%;
}
.navigation__link:hover::after {
  border-width: 6px 6px 0 6px;
}
.navigation__button {
  display: none;
}
@media screen and (max-width: 767px) {
  .navigation__button {
    cursor: default;
    display: block;
    flex-shrink: 0;
    height: 48px;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    z-index: 100;
  }
}
@media screen and (max-width: 767px) {
  .navigation__button::before, .navigation__button::after {
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: 0.1s;
  }
}
@media screen and (max-width: 767px) {
  .navigation__button::before {
    background-color: var(--color-gray04);
    height: 1px;
    width: 12px;
  }
}
@media screen and (max-width: 767px) {
  .navigation__button::after {
    background-color: var(--color-gray04);
    height: 12px;
    width: 1px;
  }
}
.navigation__child-list {
  display: none;
}
@media screen and (max-width: 767px) {
  .navigation__child-list {
    background-color: var(--color-gary05);
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    transition: 0.3s;
  }
}
@media screen and (max-width: 767px) {
  .navigation__child-link {
    display: block;
    font-size: var(--font-size-small);
    line-height: 1.4;
    padding: 15px 25px;
  }
}
@media screen and (max-width: 767px) {
  .navigation__child-item {
    border-top: 1px solid var(--color-gray03);
  }
}
@media screen and (max-width: 767px) {
  .navigation__item.is-open .navigation__button::after {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .navigation__item.is-open .navigation__child-list {
    max-height: 100dvh;
    transition: 1s;
  }
}

.claire-button {
  align-items: center;
  border-radius: 60px;
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  justify-content: center;
  line-height: 1.05;
  padding: 24px 21px;
  position: relative;
  transition: 0.2s;
}
.claire-button::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 18px;
  position: absolute;
  right: 21px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
}
.claire-button.--primary {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-blue);
}
.claire-button.--primary::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_blue.svg");
}
.claire-button.--pdf .claire-button__text {
  position: relative;
}
.claire-button.--pdf .claire-button__text::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_pdf.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 23px;
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}
.claire-button:hover.--primary {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}
.claire-button:hover.--primary::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_white.svg");
}
.claire-button.--scroll {
  background-color: var(--color-light-blue02);
  border-radius: 50%;
  bottom: 50px;
  height: 70px;
  padding: 10px;
  position: fixed;
  right: 90px;
  width: 70px;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .claire-button.--scroll {
    bottom: 31px;
    height: 60px;
    right: 31px;
    width: 60px;
  }
}
.claire-button.--scroll::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_white.svg");
  height: 17px;
  left: 23.5px;
  top: 24.5px;
  transform: rotate(-90deg);
  width: 21px;
}
@media screen and (max-width: 767px) {
  .claire-button.--scroll::before {
    left: 18.5px;
    top: 20px;
  }
}
.claire-button.--scroll.is-stop {
  bottom: unset;
  position: absolute;
  top: -35px;
}

.claire-feature-section {
  align-items: center;
  display: flex;
  gap: 60px;
  position: relative;
  /*
  *  表彰・認証実績
  */
  /*
  *  背景画像
  */
  /*
  *  クレールとは
  */
  /*
  *  私たちの仕事
  */
  /*
  *  私たちの職場
  */
  /*
  *  会社情報
  */
  /*
  *  クレールの提供価値
  */
  /*
  *  お客様へ
  */
  /*
  *  社員へ
  */
  /*
  *  地域社会へ
  */
}
@media screen and (max-width: 767px) {
  .claire-feature-section {
    flex-direction: column;
    gap: 30px;
  }
}
.claire-feature-section.--work {
  margin-top: 173px;
}
.claire-feature-section.--workplace {
  margin-top: 155px;
}
.claire-feature-section.--info {
  margin-top: 97px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work, .claire-feature-section.--workplace, .claire-feature-section.--info {
    margin-top: 80px;
  }
}
.claire-feature-section__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section__main {
    align-items: center;
    gap: 30px;
    order: 1;
    width: 100%;
  }
}
.claire-feature-section__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section__text-wrapper {
    gap: 30px;
  }
}
.claire-feature-section__text-wrapper .claire-typography {
  line-height: 1.75;
}
.claire-feature-section__img {
  border-radius: 50%;
  flex-shrink: 0;
  height: 374px;
  width: 374px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section__img {
    height: 304px;
    width: 304px;
  }
}
.claire-feature-section__img img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
.claire-feature-section__button-wrapper {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section__button-wrapper {
    flex-direction: column;
    gap: 10px;
    padding: 0 17.5px;
    width: 100%;
  }
}
.claire-feature-section__button-wrapper .claire-button {
  width: 300px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section__button-wrapper .claire-button {
    width: 100%;
  }
}
.claire-feature-section:nth-child(odd) .claire-feature-section__main {
  order: 1;
}
@media screen and (max-width: 767px) {
  .claire-feature-section:nth-child(odd) .claire-feature-section__main {
    order: 1;
  }
}
.claire-feature-section:nth-child(odd) .claire-feature-section__img {
  order: 0;
}
.claire-feature-section.--result {
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--result {
    gap: 13px;
  }
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--result .claire-feature-section__text-wrapper {
    gap: 5px;
  }
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--result .claire-typography.--large {
    font-size: 1.375rem;
  }
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--result .claire-typography {
    text-align: center;
  }
}
.claire-feature-section.--result .claire-feature-section__img {
  align-items: center;
  display: flex;
  gap: 36px;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--result .claire-feature-section__img {
    gap: 27px;
    height: fit-content;
    width: fit-content;
  }
}
.claire-feature-section.--result .claire-feature-section__img img {
  border-radius: 0;
}
.claire-feature-section .claire-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  z-index: -10;
}
.claire-feature-section.--claire .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_claire_circle01.svg");
  height: 164.9732620321%;
  left: 17.8907721281%;
  top: -22.7272727273%;
  width: 58.0979284369%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--claire .claire-bg.--1 {
    height: 58.5526315789%;
    left: -32.2388059701%;
    top: 29.2105263158%;
    width: 132.8358208955%;
  }
}
.claire-feature-section.--claire .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_claire_circle02.svg");
  height: 27.807486631%;
  right: 15.6308851224%;
  top: -18.7165775401%;
  width: 9.7928436911%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--claire .claire-bg.--2 {
    height: 8.4210526316%;
    right: -12.2388059701%;
    top: 30.5263157895%;
    width: 19.1044776119%;
  }
}
.claire-feature-section.--claire .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_claire_circle03.svg");
  height: 14.4385026738%;
  right: 7.8154425612%;
  top: 0;
  width: 5.0847457627%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--claire .claire-bg.--3 {
    height: 4.3421052632%;
    right: 4.4776119403%;
    top: 40%;
    width: 9.8507462687%;
  }
}
.claire-feature-section.--claire .claire-bg.--4 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_claire_circle04.svg");
  height: 15.2406417112%;
  right: 32.3917137476%;
  top: 114.9732620321%;
  width: 5.3672316384%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--claire .claire-bg.--4 {
    height: 4.6052631579%;
    right: 2.3880597015%;
    top: 111.1842105263%;
    width: 10.447761194%;
  }
}
.claire-feature-section.--work .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_work_circle01.svg");
  height: 169.2513368984%;
  left: -9.5103578154%;
  top: -35.5614973262%;
  width: 59.604519774%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work .claire-bg.--1 {
    height: 55.4666666667%;
    left: unset;
    right: -26.8656716418%;
    top: 29.7333333333%;
    width: 124.1791044776%;
  }
}
.claire-feature-section.--work .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_work_circle02.svg");
  height: 17.9144385027%;
  left: -0.9416195857%;
  top: -29.9465240642%;
  width: 6.3088512241%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work .claire-bg.--2 {
    height: 9.4666666667%;
    left: 5.3731343284%;
    top: -1.4666666667%;
    width: 21.1940298507%;
  }
}
.claire-feature-section.--work .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_work_circle03.svg");
  height: 11.4973262032%;
  left: 56.6854990584%;
  top: -6.1497326203%;
  width: 4.0489642185%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work .claire-bg.--3 {
    display: none;
  }
}
.claire-feature-section.--work .claire-bg.--4 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_work_circle04.svg");
  height: 31.0160427807%;
  right: 3.3898305085%;
  top: -20.8556149733%;
  width: 10.922787194%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work .claire-bg.--4 {
    height: 5.4666666667%;
    left: 3.8805970149%;
    top: 41.3333333333%;
    width: 12.2388059701%;
  }
}
.claire-feature-section.--work .claire-bg.--5 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_work_circle05.svg");
  height: 12.8342245989%;
  right: -2.6365348399%;
  top: -1.3368983957%;
  width: 4.5197740113%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work .claire-bg.--5 {
    height: 3.8666666667%;
    right: 6.2686567164%;
    top: 100.9333333333%;
    width: 8.6567164179%;
  }
}
.claire-feature-section.--work .claire-bg.--6 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_work_circle06.svg");
  height: 13.6363636364%;
  left: 28.7193973635%;
  top: 101.6042780749%;
  width: 4.802259887%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--work .claire-bg.--6 {
    height: 3.2%;
    left: unset;
    right: 6.2686567164%;
    top: 38%;
    width: 7.1641791045%;
  }
}
.claire-feature-section.--workplace .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_workplace_circle01.svg");
  height: 181.0160427807%;
  left: 34.4632768362%;
  top: -42.513368984%;
  width: 63.747645951%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--workplace .claire-bg.--1 {
    height: 53.3419023136%;
    left: -23.2835820896%;
    top: 23.9074550129%;
    width: 123.8805970149%;
  }
}
.claire-feature-section.--workplace .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_workplace_circle02.svg");
  height: 25.6684491979%;
  right: -1.2241054614%;
  top: -43.3155080214%;
  width: 9.0395480226%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--workplace .claire-bg.--2 {
    height: 7.5835475578%;
    right: 2.6865671642%;
    top: 0.2570694087%;
    width: 17.6119402985%;
  }
}
.claire-feature-section.--workplace .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_workplace_circle03.svg");
  height: 17.6470588235%;
  right: 9.1337099812%;
  top: 76.4705882353%;
  width: 6.2146892655%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--workplace .claire-bg.--3 {
    height: 5.1413881748%;
    left: 5.671641791%;
    right: unset;
    top: 32.64781491%;
    width: 11.9402985075%;
  }
}
.claire-feature-section.--workplace .claire-bg.--4 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_workplace_circle04.svg");
  height: 27.0053475936%;
  right: -1.6949152542%;
  top: 131.2834224599%;
  width: 9.5103578154%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--workplace .claire-bg.--4 {
    height: 7.969151671%;
    left: 4.776119403%;
    right: unset;
    top: -5.2699228792%;
    width: 18.5074626866%;
  }
}
.claire-feature-section.--info .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_info_circle01.svg");
  height: 161.2299465241%;
  left: -5.2730696798%;
  top: -44.9197860963%;
  width: 56.7796610169%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--info .claire-bg.--1 {
    height: 50.894085282%;
    left: unset;
    right: -21.1940298507%;
    top: 12.6547455296%;
    width: 110.447761194%;
  }
}
.claire-feature-section.--info .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_info_circle02.svg");
  height: 16.8449197861%;
  left: -0.2824858757%;
  top: -22.9946524064%;
  width: 5.9322033898%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--info .claire-bg.--2 {
    height: 5.3645116919%;
    left: -0.8955223881%;
    top: 1.6506189821%;
    width: 11.6417910448%;
  }
}
.claire-feature-section.--info .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_info_circle03.svg");
  height: 12.5668449198%;
  right: -2.8248587571%;
  top: -10.4278074866%;
  width: 4.4256120527%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--info .claire-bg.--3 {
    height: 3.9889958735%;
    right: 5.3731343284%;
    top: -7.7028885832%;
    width: 8.6567164179%;
  }
}
.claire-feature-section.--info .claire-bg.--4 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_info_circle04.svg");
  height: 12.8342245989%;
  left: 52.7306967985%;
  top: 97.3262032086%;
  width: 4.5197740113%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--info .claire-bg.--4 {
    height: 3.9889958735%;
    left: 16.4179104478%;
    top: 20.7702888583%;
    width: 8.6567164179%;
  }
}
.claire-feature-section.--value {
  gap: 0;
  height: 266px;
  margin: 0 auto;
  max-width: 323px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value {
    height: auto;
    max-width: unset;
    width: auto;
  }
}
.claire-feature-section.--value .claire-feature-section__main {
  gap: 33px 0;
  height: 100%;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__main {
    gap: 23px 0;
  }
}
.claire-feature-section.--value .claire-feature-section__text-wrapper {
  align-items: center;
  gap: 23px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__text-wrapper {
    gap: 9px;
  }
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__text-wrapper .claire-typography.--large {
    font-size: 1.375rem;
    line-height: 2.227;
  }
}
.claire-feature-section.--value .claire-feature-section__text-wrapper p.claire-typography {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__text-wrapper p.claire-typography {
    font-size: var(--font-size-xsmall);
  }
}
.claire-feature-section.--value .claire-feature-section__button-wrapper {
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__button-wrapper {
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__button-wrapper .claire-button {
    font-size: var(--font-size-small);
    line-height: 1.357;
    min-width: 150px;
    padding: 14.5px 30px 14.5px 15px;
    width: fit-content;
  }
}
.claire-feature-section.--value .claire-feature-section__button-wrapper .claire-button::before {
  right: 12px;
}
.claire-feature-section.--value .claire-feature-section__img {
  height: 240px;
  position: absolute;
  width: 240px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--value .claire-feature-section__img {
    height: 120px;
    width: 120px;
  }
}
.claire-feature-section.--value .claire-bg.--1 {
  height: 172.9323308271%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 142.4148606811%;
}
.claire-feature-section.--customer {
  margin-bottom: 160px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer {
    margin-bottom: 98px;
  }
}
.claire-feature-section.--customer .claire-feature-section__img {
  right: -235px;
  top: -95px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer .claire-feature-section__img {
    right: -90px;
    top: -80px;
  }
}
.claire-feature-section.--customer .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_customer_circle01.svg");
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer .claire-bg.--1 {
    height: 154.6391752577%;
    width: 167.5977653631%;
  }
}
.claire-feature-section.--customer .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_customer_circle02.svg");
  height: 21.8045112782%;
  left: -74.3034055728%;
  top: 55.6390977444%;
  width: 17.9566563467%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer .claire-bg.--2 {
    bottom: -5.1546391753%;
    height: 22.1649484536%;
    left: unset;
    right: -36.312849162%;
    top: unset;
    width: 24.0223463687%;
  }
}
.claire-feature-section.--customer .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_customer_circle03.svg");
  height: 19.1729323308%;
  left: -46.1300309598%;
  top: 17.2932330827%;
  width: 15.7894736842%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer .claire-bg.--3 {
    height: 13.9175257732%;
    left: -47.4860335196%;
    top: 36.0824742268%;
    width: 15.0837988827%;
  }
}
.claire-feature-section.--customer .claire-bg.--4 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_customer_circle04.svg");
  height: 30.8270676692%;
  right: -81.73374613%;
  top: -32.3308270677%;
  width: 25.386996904%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer .claire-bg.--4 {
    height: 24.2268041237%;
    right: -13.9664804469%;
    top: -50%;
    width: 26.2569832402%;
  }
}
.claire-feature-section.--customer .claire-bg.--5 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_customer_circle05.svg");
  height: 16.9172932331%;
  right: -102.786377709%;
  top: 5.6390977444%;
  width: 13.9318885449%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--customer .claire-bg.--5 {
    height: 18.0412371134%;
    left: -41.8994413408%;
    right: unset;
    top: -13.9175257732%;
    width: 19.5530726257%;
  }
}
.claire-feature-section.--staff .claire-feature-section__button-wrapper .claire-button {
  min-width: 148px;
}
.claire-feature-section.--staff .claire-feature-section__img {
  left: -99px;
  top: -281px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--staff .claire-feature-section__img {
    left: -40px;
    top: -155px;
  }
}
.claire-feature-section.--staff .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_staff_circle01.svg");
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--staff .claire-bg.--1 {
    height: 127.1186440678%;
    left: -76.582278481%;
    transform: translate(0, -50%);
    width: 189.8734177215%;
  }
}
.claire-feature-section.--staff .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_staff_circle02.svg");
  height: 18.045112782%;
  left: -27.8637770898%;
  top: 36.8421052632%;
  width: 14.8606811146%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--staff .claire-bg.--2 {
    bottom: -28.813559322%;
    height: 12.2881355932%;
    left: 60.1265822785%;
    top: unset;
    width: 18.3544303797%;
  }
}
.claire-feature-section.--staff .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_staff_circle03.svg");
  height: 11.6541353383%;
  left: -9.2879256966%;
  top: 59.7744360902%;
  width: 9.5975232198%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--staff .claire-bg.--3 {
    bottom: 18.2203389831%;
    height: 13.1355932203%;
    left: -20.8860759494%;
    top: unset;
    width: 19.6202531646%;
  }
}
.claire-feature-section.--local .claire-feature-section__img {
  right: -127px;
  top: -235px;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--local .claire-feature-section__img {
    bottom: -141px;
    right: 42px;
    top: unset;
  }
}
.claire-feature-section.--local .claire-bg.--1 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_local_circle01.svg");
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--local .claire-bg.--1 {
    height: 127.1186440678%;
    left: unset;
    right: -81.7610062893%;
    transform: translate(0, -50%);
    width: 188.679245283%;
  }
}
.claire-feature-section.--local .claire-bg.--2 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_local_circle02.svg");
  height: 22.9323308271%;
  right: -27.8637770898%;
  top: 75.1879699248%;
  width: 18.8854489164%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--local .claire-bg.--2 {
    bottom: -43.6440677966%;
    height: 25.8474576271%;
    right: 81.0126582278%;
    top: unset;
    width: 38.6075949367%;
  }
}
.claire-feature-section.--local .claire-bg.--3 {
  background-image: url("/content/dam/santen/global/ja/claire/images/bg_local_circle03.svg");
  height: 14.2857142857%;
  left: -11.1455108359%;
  top: -11.2781954887%;
  width: 11.7647058824%;
}
@media screen and (max-width: 767px) {
  .claire-feature-section.--local .claire-bg.--3 {
    display: none;
  }
}

.claire-grid {
  display: grid;
}
.claire-grid.--column3 {
  column-gap: 2.4074074074%;
  grid-template-columns: repeat(3, 31.7592592593%);
  row-gap: 14px;
}
@media screen and (max-width: 767px) {
  .claire-grid.--column3 {
    grid-template-columns: 1fr;
  }
}
.claire-grid.--pyramid {
  column-gap: 14.2592592593%;
  grid-template-columns: auto auto;
}
@media screen and (max-width: 767px) {
  .claire-grid.--pyramid {
    column-gap: 4.143126177%;
  }
}
.claire-grid.--pyramid:has(.claire-feature-section.--value) {
  margin: 115px 0 210px 0;
}
@media screen and (max-width: 767px) {
  .claire-grid.--pyramid:has(.claire-feature-section.--value) {
    margin: 98px 0 210px 0;
  }
}
.claire-grid .claire-topics {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
@media screen and (max-width: 767px) {
  .claire-grid .claire-topics {
    margin-top: 36px;
  }
}
@media screen and (max-width: 767px) {
  .claire-grid .claire-topics:first-child {
    margin-top: 0;
  }
}
.claire-grid .claire-topics__link {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
.claire-grid .claire-feature-section.--value {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 158px;
}
.claire-grid .claire-feature-section.--customer {
  grid-column: 1/3;
  grid-row: 1/2;
}
.claire-grid .claire-feature-section.--staff {
  grid-column: 1/2;
  grid-row: 2/3;
  min-width: 148px;
}
.claire-grid .claire-feature-section.--local {
  grid-column: 2/3;
  grid-row: 2/3;
}

.claire-link {
  cursor: pointer;
  padding-right: 36px;
  position: relative;
}
.claire-link::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_blue.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 18px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
}

.claire-linked-slider {
  background-color: var(--color-light-blue03);
  padding: 60px 0 84px 0;
  width: 100dvw;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider {
    padding: 26px 25px 50px 25px;
  }
}

.claire-linked-slider__top-item {
  background-color: var(--color-white);
  margin-right: 30px;
  padding: 21px 70px 28px 70px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top-item {
    margin-right: 25px;
    padding: 12px 21px 14px 21px;
  }
}
.claire-linked-slider__top-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font-size-xlarge);
  font-weight: 500;
  line-height: 1.166;
  padding-left: 48px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top-title {
    font-size: 1.25rem;
    line-height: 1.4;
    padding-left: 40px;
  }
}
.claire-linked-slider__top-title::before {
  align-items: center;
  background-color: var(--color-blue02);
  border-radius: 50%;
  color: var(--color-white);
  content: attr(data-number);
  display: flex;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  height: 36px;
  justify-content: center;
  left: 0;
  line-height: 1.4;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top-title::before {
    font-size: var(--font-size-medium);
    height: 30px;
    line-height: 1.437;
    width: 30px;
  }
}
.claire-linked-slider__top-img {
  height: 386px;
  margin-top: 17px;
  width: 580px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top-img {
    height: auto;
    margin-top: 15px;
    width: 100%;
  }
}
.claire-linked-slider__top-img img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.claire-linked-slider__top-detail {
  margin-top: 25px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top-detail {
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-top: 13px;
  }
}
.claire-linked-slider__top.slick-initialized .slick-slide {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 720px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top.slick-initialized .slick-slide {
    width: calc(100dvw - 50px);
  }
}
.claire-linked-slider__top .slick-arrow {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_linked_slider.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0;
  height: 29px;
  position: absolute;
  top: 262px;
  width: 41px;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top .slick-arrow {
    height: 29px;
    top: 50%;
    width: 20px;
  }
}
.claire-linked-slider__top .slick-arrow.slick-prev {
  left: 50%;
  transform: rotate(180deg) translateX(384px);
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top .slick-arrow.slick-prev {
    left: 0;
    transform: rotate(180deg) translate(11px, 58px);
  }
}
.claire-linked-slider__top .slick-arrow.slick-next {
  right: 50%;
  transform: translateX(384px);
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__top .slick-arrow.slick-next {
    right: 0;
    transform: translate(11px, -58px);
  }
}

.claire-linked-slider__bottom {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 54px 20px 0 20px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom {
    margin: 31px 2.5px 0 2.5px;
  }
}
.claire-linked-slider__bottom-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 5px;
  margin: 0 auto;
  max-width: 965px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-wrapper {
    gap: 8px 3px;
    max-width: unset;
  }
}
.claire-linked-slider__bottom-item {
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 140px;
  margin-right: 19px;
  position: relative;
  width: 170px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-item {
    height: 87px;
    margin-right: 12px;
    width: 92px;
  }
}
.claire-linked-slider__bottom-item::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_light_blue.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 21px;
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-item::before {
    height: 17px;
    right: -20px;
    width: 21px;
  }
}
.claire-linked-slider__bottom-item:last-child::before {
  display: none;
}
.claire-linked-slider__bottom-title-wrapper {
  border: 5px solid transparent;
  border-radius: 0 0 8px 8px;
  border-top: none;
  order: 1;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-title-wrapper {
    border-width: 3px;
  }
}
.claire-linked-slider__bottom-title-inner {
  align-items: center;
  background-color: var(--color-blue02);
  border-radius: 0 0 8px 8px;
  display: flex;
  justify-content: center;
  padding: 7px 5px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-title-inner {
    height: 31px;
    padding: 0 2px;
  }
}
.claire-linked-slider__bottom-title {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  padding-left: 27px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-title {
    font-size: var(--font-size-small);
    line-height: 1;
    padding-left: 22px;
  }
}
.claire-linked-slider__bottom-title::before {
  align-items: center;
  background-color: var(--color-white);
  border-radius: 50%;
  color: var(--color-blue02);
  content: attr(data-number);
  display: flex;
  font-family: "Roboto", sans-serif;
  font-size: var(--font-size-xsmall);
  height: 20px;
  justify-content: center;
  left: 0;
  line-height: 1.666;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-title::before {
    font-size: 0.625rem;
    height: 17px;
    line-height: 1.7;
    width: 17px;
  }
}
.claire-linked-slider__bottom-img {
  height: 92px;
  order: 0;
  width: 170px;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-img {
    height: 50px;
    width: 92px;
  }
}
.claire-linked-slider__bottom-img img {
  border: 5px solid transparent;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-linked-slider__bottom-img img {
    border-width: 3px;
  }
}
.claire-linked-slider__bottom-item.is-current .claire-linked-slider__bottom-title-wrapper, .claire-linked-slider__bottom-item.is-current .claire-linked-slider__bottom-img img {
  border-color: var(--color-blue02);
}
.claire-linked-slider__bottom-item.is-current .claire-linked-slider__bottom-img img {
  border-color: var(--color-blue02);
  border-radius: 8px 8px 0 0;
}
.claire-linked-slider__bottom-item.is-current .claire-linked-slider__bottom-title-inner {
  border-radius: unset;
}

.claire-main-visual {
  position: relative;
}
@media screen and (max-width: 767px) {
  .claire-main-visual {
    padding-bottom: 39px;
  }
}
.claire-main-visual__img img {
  height: auto;
  width: 100%;
}
.claire-main-visual__pause {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_pause.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  cursor: pointer;
  height: 16px;
  position: absolute;
  right: 93.5px;
  width: 13px;
}
@media screen and (max-width: 767px) {
  .claire-main-visual__pause {
    bottom: 0;
    height: 15px;
    right: 50%;
    transform: translateX(50%);
    width: 12px;
  }
}
.claire-main-visual__pause.is-start {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_start.svg");
}
.claire-main-visual .slick-arrow {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_lightblue.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  font-size: 0;
  height: 15px;
  position: absolute;
  width: 8px;
}
@media screen and (max-width: 767px) {
  .claire-main-visual .slick-arrow {
    bottom: -37px;
    height: 10px;
    width: 5px;
  }
}
.claire-main-visual .slick-arrow.slick-prev {
  right: 139.5px;
  transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .claire-main-visual .slick-arrow.slick-prev {
    left: calc(50dvw - 39px);
    right: 0;
  }
}
.claire-main-visual .slick-arrow.slick-next {
  right: 54.5px;
}
@media screen and (max-width: 767px) {
  .claire-main-visual .slick-arrow.slick-next {
    right: calc(50dvw - 39px);
  }
}
.claire-main-visual .slick-dots {
  align-items: center;
  display: flex;
  gap: 0 10px;
  justify-content: center;
  margin-top: 28px;
}
@media screen and (max-width: 767px) {
  .claire-main-visual .slick-dots {
    margin-top: 18px;
  }
}
.claire-main-visual .slick-dots li {
  line-height: 0;
}
.claire-main-visual .slick-dots li button {
  background-color: var(--color-gray06);
  border-radius: 12px;
  font-size: 0;
  height: 6px;
  width: 60px;
}
@media screen and (max-width: 767px) {
  .claire-main-visual .slick-dots li button {
    height: 5px;
    width: 50px;
  }
}
.claire-main-visual .slick-dots li.slick-active button {
  background-color: var(--color-light-blue02);
}

.claire-news {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.claire-news__item {
  border-top: 1px solid rgba(2, 64, 151, 0.4);
}
.claire-news__item:last-child {
  border-bottom: 1px solid rgba(2, 64, 151, 0.4);
}
.claire-news__link {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 34px;
  padding: 28px 53px 28px 24px;
}
@media screen and (max-width: 767px) {
  .claire-news__link {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
    padding: 20px 0;
  }
}
.claire-news__date {
  flex-shrink: 0;
}
.claire-news__link:hover .claire-news__date, .claire-news__link:hover .claire-news__text {
  text-decoration: underline;
}

.claire-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-section {
    gap: 10px;
  }
}
.claire-section + .claire-section {
  margin-top: 73px;
}
@media screen and (max-width: 767px) {
  .claire-section + .claire-section {
    margin-top: 31px;
  }
}
.claire-section__heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.claire-slider {
  margin: 0 6px 0 16px;
  max-width: 1063px;
  width: calc(100dvw - 40px);
}
@media screen and (max-width: 767px) {
  .claire-slider {
    margin: 0;
    width: 100dvw;
  }
}
.claire-slider__item {
  flex-direction: column;
  gap: 5px;
  margin-right: 20px;
}
.claire-slider__title {
  font-weight: var(--font-weight-bold);
  line-height: 1.7;
  margin-top: 5px;
  order: 1;
}
@media screen and (max-width: 767px) {
  .claire-slider__title {
    margin: 0 -10px 0 10px;
  }
}
.claire-slider__detail {
  line-height: 1.7;
  order: 2;
}
@media screen and (max-width: 767px) {
  .claire-slider__detail {
    margin: 0 -10px 0 10px;
  }
}
.claire-slider__img {
  max-height: 220px;
  order: 0;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-slider__img {
    margin: 0 10px;
    max-height: unset;
  }
}
.claire-slider__img img {
  aspect-ratio: 290/194;
  height: auto;
  object-fit: contain;
  width: 100%;
}
.claire-slider.slick-initialized .slick-slide {
  display: flex;
}
.claire-slider .slick-arrow {
  background-color: var(--color-light-blue04);
  border-radius: 50%;
  font-size: 0;
  height: 33px;
  position: absolute;
  top: 93.5px;
  width: 33px;
  z-index: 100;
}
.claire-slider .slick-arrow.slick-prev {
  left: 0;
  transform: translateX(-16.5px);
}
@media screen and (max-width: 767px) {
  .claire-slider .slick-arrow.slick-prev {
    left: 26px;
    transform: translateX(0);
  }
}
.claire-slider .slick-arrow.slick-next {
  right: 0;
}
@media screen and (max-width: 767px) {
  .claire-slider .slick-arrow.slick-next {
    right: 26px;
  }
}
.claire-slider .slick-arrow::before {
  background-image: url("/content/dam/santen/global/ja/claire/images/icon_arrow_white.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 14px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
}
.claire-slider .slick-arrow.slick-prev::before {
  left: 0;
  transform: rotate(180deg) translate(-11px, 50%);
}

.claire-topics__link {
  cursor: pointer;
}
.claire-topics__text {
  order: 1;
}
.claire-topics__date {
  font-size: var(--font-size-small);
  margin-left: auto;
  order: 2;
}
@media screen and (max-width: 767px) {
  .claire-topics__date {
    padding-right: 10px;
  }
}
.claire-topics__link:hover .claire-topics__text, .claire-topics__link:hover .claire-topics__date {
  text-decoration: underline;
}
.claire-topics__img {
  height: auto;
  order: 0;
  width: 100%;
}
.claire-topics__img img {
  height: 100%;
  width: 100%;
}

.claire-typography.--medium {
  font-size: var(--heading-size-medium);
  font-weight: var(--font-weight-bold);
  line-height: 1.39;
}
@media screen and (max-width: 767px) {
  .claire-typography.--medium {
    font-size: var(--heading-size-medium-sp);
    line-height: 1.95;
  }
}
.claire-typography.--large {
  font-size: var(--heading-size-large);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-large);
  line-height: 1.36;
}
@media screen and (max-width: 767px) {
  .claire-typography.--large {
    font-size: var(--heading-size-large-sp);
  }
}

.claire-parts__content-wrapper {
  margin: 20px 0;
}
.claire-parts__content-wrapper .claire-typography.--medium {
  padding: 20px;
}
.claire-parts__content-wrapper:has(.claire-feature-section.--value) {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-parts__content-wrapper:has(.claire-feature-section.--value) {
    margin: 0 -10px;
    overflow: hidden;
    width: 100dvw;
  }
}

.claire-top__about-wrapper {
  margin-top: 169px;
  padding: 0 9px;
}
@media screen and (max-width: 767px) {
  .claire-top__about-wrapper {
    margin: 74px -10px 0 -10px;
    overflow: hidden;
    padding: 0 20px;
  }
}
.claire-top__result-wrapper {
  margin-top: 184px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .claire-top__result-wrapper {
    margin-top: 88px;
    padding: 0 27.5px;
  }
}
@media screen and (max-width: 767px) {
  .claire-top__result-wrapper .claire-feature-section__button-wrapper {
    padding: 0;
  }
}
.claire-top__result-wrapper .claire-top__result-img.--monisu {
  border-radius: 0;
  height: 167px;
  width: 166px;
}
@media screen and (max-width: 767px) {
  .claire-top__result-wrapper .claire-top__result-img.--monisu {
    height: 130px;
    width: 130px;
  }
}
.claire-top__result-wrapper .claire-top__result-img.--shiga {
  border-radius: 0;
  height: 164px;
  width: 164px;
}
@media screen and (max-width: 767px) {
  .claire-top__result-wrapper .claire-top__result-img.--shiga {
    height: 128px;
    width: 128px;
  }
}