@charset "UTF-8";
/*****************************************

基本設定とPCSP共通設定はこのファイルに入れる

*****************************************/
/*--------------------------------------
画像設定
---------------------------------------*/
/****** フォントサイズ調整 ******/
:root {
  /* カラー（色） */
  --white: #ffffff;
  --main: #1e9abb;
  --main-light: #e4f3f7;
  --accent: #d90081;
  --accent-light: #cb7d86;
  --black: #07242c;
  --gray: #e0e0e0;
  --beige: #f7ecce;
  --beige-light: #f8f3e4;
  /* タイポグラフィ（フォントサイズ） */
  --body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16-18px */
  --body-small: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); /* 14-16px */
  --display: clamp(5.313rem, 5.063rem + 1.25vw, 6rem); /* 85-96px */
  --heading1: clamp(3.313rem, 3.153rem + 0.8vw, 3.75rem); /* 53-60px */
  --heading2: clamp(2.625rem, 2.489rem + 0.68vw, 3rem); /* 42-48px */
  --heading3: clamp(1.875rem, 1.784rem + 0.45vw, 2.125rem); /* 30-34px */
  --heading4: clamp(1.313rem, 1.244rem + 0.34vw, 1.5rem); /* 21-24px */
  --heading5: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem); /* 18-20px */
  --caption: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); /* 12-14px */
  --small: clamp(0.375rem, 0.239rem + 0.68vw, 0.75rem); /* 6-12px */
  /* スペース（余白・間隔） */
  --space-xxxs: clamp(0.375rem, 0.239rem + 0.68vw, 0.75rem); /* 6-12px */
  --space-xxs: clamp(0.75rem, 0.568rem + 0.91vw, 1.25rem); /* 12-20px */
  --space-xs: clamp(1.25rem, 1rem + 0.98vw, 1.875rem); /* 20-30px */
  --space-sm: calc(var(--space-xs) * 1.5); /* 30-45px */
  --space-md: calc(var(--space-xs) * 2); /* 40-60px */
  --space-lg: calc(var(--space-xs) * 3); /* 60-90px */
  --space-xl: calc(var(--space-xs) * 4); /* 80-120px */
  --space-xxl: clamp(6.25rem, 3.977rem + 11.36vw, 12.5rem); /* 100-200px */
  --space-xxxl: clamp(12.5rem, 10.227rem + 11.36vw, 18.75rem); /* 200-300px */
  --space-jump: clamp(1.25rem, 0.341rem + 4.55vw, 3.75rem); /* 20-60px */
}

/*--------------------------------------
フォント設定
---------------------------------------*/
/* リセット系 */
a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
tbody,
tfoot,
thead,
tt,
ul,
var {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  list-style: none;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  clear: both;
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
}

p,
li,
small,
span,
figcaption {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: var(--body);
}

a {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

/* form関連 */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  line-height: 1;
}

/* 基本設定 */
body {
  color: var(--black);
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: var(--body);
}

h1 {
  font-size: var(--heading1);
}

h2 {
  font-size: var(--heading2);
}

h3 {
  font-size: var(--heading3);
}

h4 {
  font-size: var(--heading4);
}

h5 {
  font-size: var(--heading5);
}

/*--------------------------------------
よく使うやつ
---------------------------------------*/
.txt-center {
  text-align: center !important;
}

.block-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.txt_left {
  text-align: left !important;
}

.txt-right {
  text-align: right !important;
}

.txt_red {
  color: #f33;
}

.txt_bold {
  font-weight: bold;
}

.txt_underline {
  text-decoration: underline;
}

.txt-small {
  font-size: var(--body-small);
}

.fleft {
  display: block;
  float: left;
}

.fright {
  display: block;
  float: right;
}

.mb0 {
  margin-bottom: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.mbxxs {
  margin-bottom: var(--space-xxs) !important;
}

.mbsm {
  margin-bottom: var(--space-sm) !important;
}

.mbmd {
  margin-bottom: var(--space-md) !important;
}

.mblg {
  margin-bottom: var(--space-lg) !important;
}

.txt-bold {
  font-weight: bold;
}

.bg-beige {
  background-color: var(--beige-light);
}

.content_none {
  display: none !important;
}

#logo img, #header__logo img {
  width: 350px;
}

/* 両橋揃え */
/* 横並び（基本形） */
@media (min-width: 768px) {
  .sideBySide {
    flex-direction: row;
    justify-content: space-between;
  }
}
/* 横並び（中央揃え） */
.sideBySideCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .sideBySideCenter {
    text-align: left;
  }
}
@media print, screen and (min-width: 1025px) {
  body {
    position: relative;
    z-index: 1;
  }
  .sp {
    display: none !important;
  }
  a {
    transition: all 0.3s ease;
  }
  a:hover {
    opacity: 0.7;
  }
  .hover-none:hover {
    opacity: 1 !important;
  }
  .flexContainer {
    display: flex;
  }
  .text-xxxs {
    font-size: var(--small);
  }
  .caption {
    font-size: var(--caption);
  }
  .display-small {
    max-width: 800px;
    margin: auto;
  }
  .display-default {
    max-width: 1366px;
    margin: auto;
  }
  .display-inner {
    padding: 0 45px;
  }
  .screenMediumCenter {
    max-width: 1080px;
    padding: 0 30px;
    margin: 0 auto;
  }
  .screenLargeCenter {
    max-width: 1306px;
    padding: 0 30px;
    margin: 0 auto;
  }
  #contents {
    background-image: url(/atopy/assets/img/background.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: cover;
    padding-bottom: var(--space-xl);
  }
  .button01 {
    display: inline-block;
    padding: 18px 24px;
    line-height: 1;
    background-color: #fff;
    box-shadow: 5px 5px 0px 0px rgba(30, 154, 187, 0.3);
    width: 440px;
    box-sizing: border-box;
    border-radius: 30px;
    text-decoration: none;
    color: var(--main);
    font-weight: bold;
    text-align: center;
    margin: 16px 0;
  }
  .dli-arrow-right {
    display: inline-block;
    vertical-align: middle;
    color: var(--main);
    line-height: 1;
    position: relative;
    width: 1em;
    height: 0.1em;
    background: currentColor;
    margin-left: 1rem;
  }
  .dli-arrow-right::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
  }
  .page-container {
    padding: var(--space-lg) 0;
  }
  .section-container-first {
    padding: 0 0 var(--space-lg);
  }
  .section-border {
    border-width: 1px 0 0 0;
    border-style: dashed;
    border-color: var(--main-light);
    padding: 0 var(--space-md);
  }
  .section-container {
    padding: var(--space-lg) 0;
  }
  .section-pb-none {
    padding-bottom: 0;
  }
  h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
    position: relative;
  }
  .subpage #header {
    height: 80px;
    background-color: var(--main);
  }
  .subpage #logo {
    font-size: var(--heading1);
    line-height: 1;
  }
  .subpage main p {
    margin-bottom: 30px;
  }
  .subpage h1 {
    color: var(--white);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 180px;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 54px var(--main);
  }
  .subpage #subpage__h1 {
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
  }
  .subpage__contents_h3 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: var(--main);
    text-align: center;
    font-size: var(--heading2);
    margin-bottom: var(--space-md);
  }
  .subpage__contents_h3_wrap {
    text-align: center;
    margin-bottom: var(--space-sm);
  }
  .subpage__contents_h3_underline {
    display: inline;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    color: var(--main);
    font-size: var(--heading3);
    position: relative;
    line-height: 1;
    margin-top: var(--space-md);
    background: linear-gradient(transparent 60%, #bce1eb 0);
  }
  .subpage__contents_h4 {
    font-weight: bold;
    font-size: var(--heading3);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    padding-bottom: 10px;
    border-bottom: solid 1px var(--main);
    position: relative;
  }
  .subpage__contents_h4::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main);
    right: 0;
    bottom: -4px;
  }
  .subpage .contents {
    margin: var(--space-lg) 0;
    position: relative;
    z-index: 5;
  }
  .subpage__anchor {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xxl);
  }
  .subpage__anchor_button {
    position: relative;
    width: 100%;
    height: 63px;
    background-color: var(--white);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
  }
  .subpage__anchor_button span {
    color: var(--main);
    font-weight: bold;
    font-size: var(--heading5);
  }
  .subpage__anchor_button::before {
    content: "";
    display: block;
    bottom: -27px;
    width: 100%;
    height: 27px;
    position: absolute;
    background-color: var(--main);
    border-radius: 0 0 12px 12px;
  }
  .subpage__anchor_button::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    bottom: -17px;
    right: 0;
    left: 0;
    position: absolute;
    border-top: solid 3px var(--white);
    border-right: solid 3px var(--white);
    transform: rotate(135deg);
  }
  .topContent {
    padding-top: var(--space-md);
  }
  #banner_area {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-lg);
  }
  #banner_area > div {
    gap: var(--space-sm);
  }
  a[href^="tel:"] {
    pointer-events: none;
  }
  /*****************************************

  header PC

  *****************************************/
  #header__inner {
    display: flex;
    justify-content: space-between;
  }
  #header__logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 16px;
    z-index: 100;
  }
  #global__nav {
    position: fixed;
    inset: 0 -100% 0 100%;
    background-color: rgba(30, 154, 187, 0.85);
    z-index: 100;
    transition: transform 0.3s;
  }
  #global__nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 20px;
  }
  #global__nav ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: var(--heading4);
  }
  #global__nav_banner {
    padding-top: 40px;
  }
  #global__nav_toggle {
    position: fixed;
    z-index: 105;
    top: 0;
    right: 0;
    background-color: #1e9abb;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 3px;
    box-sizing: border-box;
  }
  #global__nav_toggle:hover {
    cursor: pointer;
  }
  #global__nav_toggle span, #global__nav_toggle span:before, #global__nav_toggle span:after {
    content: "";
    display: block;
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: var(--white);
  }
  #global__nav_toggle span {
    top: 20px;
  }
  #global__nav_toggle span:before {
    bottom: 10px;
  }
  #global__nav_toggle span:after {
    top: 10px;
    width: 20px;
    margin-bottom: 5px;
  }
  #global__nav_toggle p {
    color: var(--white);
    font-size: 12px;
    position: absolute;
    bottom: 8px;
  }
  .open #global__nav {
    transform: translate(-100%, 0);
  }
  .open #global__nav_toggle span {
    background-color: rgba(255, 255, 255, 0);
  }
  .open #global__nav_toggle span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  .open #global__nav_toggle span::after {
    top: 0;
    transform: rotate(-45deg);
    width: 28px;
  }
  .openbody {
    position: fixed;
    overflow: hidden;
  }
  .close .sidebar-nav-button .txt-close {
    display: block;
  }
  .close .sidebar-nav-button .txt-open {
    display: none;
  }
  .close .main {
    margin-left: 0;
  }
  /***** footer start *****/
  .footer {
    background-color: var(--main);
    padding: var(--space-sm) var(--space-lg) var(--space-sm);
  }
  .footer__lists {
    margin: var(--space-sm) 0 var(--space-sm);
  }
  .footer__list {
    margin-bottom: var(--space-xxxs);
  }
  .footer__list a {
    color: var(--white);
    text-decoration: none;
    font-size: var(--heading5);
  }
  .footer__list a .dli-arrow-right {
    color: var(--white);
    margin-left: 0;
    margin-right: 1rem;
  }
  .footer__address {
    font-size: var(--body-small);
  }
  .footer__address p {
    color: var(--white);
  }
  .footer__wrap {
    display: flex;
    gap: 30px;
    margin-bottom: var(--space-sm);
  }
  .footer__left {
    width: 50%;
  }
  .footer__left img {
    max-width: 360px;
  }
  .footer__right {
    width: 50%;
  }
  .footer__right p {
    font-size: var(--heading5);
    text-align: center;
    background-color: var(--white);
    border-radius: 21px;
    height: 42px;
    padding: 12px;
    box-sizing: border-box;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 30px;
    box-shadow: 0 3px 6px rgb(172, 172, 172);
  }
  /***** footer end *****/
  /*****************************************

  top PC

  *****************************************/
  /*****************************************

  feature PC

  *****************************************/
  /*****************************************

  treatment PC

  *****************************************/
  /*****************************************

  flow PC

  *****************************************/
  /*****************************************

  about PC

  *****************************************/
  /*****************************************

  useful PC

  *****************************************/
  /*****************************************

  qa PC

  *****************************************/
  /*****************************************

  privacy PC

  *****************************************/
}
@media print and (max-width: 1200px), screen and (min-width: 1025px) and (max-width: 1200px) {
  .footer__right p {
    font-size: var(--body);
  }
}
@media print, screen and (min-width: 1025px) {
  .footer__googlemap {
    box-shadow: 0 3px 6px rgb(172, 172, 172);
    display: flex;
    flex-flow: column;
    height: 100%;
  }
  .footer__googlemap iframe {
    width: 100%;
    height: 100%;
  }
  .copy {
    display: flex;
    justify-content: space-between;
  }
  .copy small {
    font-size: 12px;
    color: var(--white);
  }
  .copy ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  .copy ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: var(--small);
  }
  #top #wrapper {
    background-color: #e4f3f7;
    padding-top: var(--space-lg);
  }
  #top #contents {
    padding-top: var(--space-lg);
  }
  #top .top__h2 {
    position: absolute;
    font-size: 150px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: rgba(30, 154, 187, 0.3);
    writing-mode: vertical-rl;
    line-height: 1;
    font-weight: normal;
    overflow: hidden;
  }
  #top .top__contents-title {
    display: inline-block;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    color: var(--main);
    font-size: var(--heading3);
    position: relative;
    line-height: 1;
  }
  #top .top__contents-title::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: "";
    display: block;
    width: 100%;
    height: 16px;
    background-color: rgba(30, 154, 187, 0.2);
  }
  #top #mainVisual {
    position: relative;
  }
  #top #mainVisual__box {
    height: 100vh;
    background-color: var(--main);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-image: url(/atopy/assets/img/mv_image01.webp);
    background-repeat: no-repeat;
    background-size: 130vh;
    background-position: top right;
  }
  #top #mainVisual picture {
    padding: 0 var(--space-sm);
    box-sizing: border-box;
  }
  #top #mainVisual__banner {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #top #mainVisual__hospital {
    position: absolute;
    right: var(--space-sm);
    bottom: var(--space-xxs);
  }
  #top #mainVisual__bigLogo {
    position: absolute;
    bottom: calc(var(--space-xl) * -1);
    right: var(--space-sm);
  }
  #top__information {
    padding-bottom: var(--space-xl);
    position: relative;
  }
  #top__information_lists {
    max-width: 600px;
    margin: auto;
  }
  #top__information_list {
    border-bottom: #1e9abb solid 1px;
    padding-bottom: 4px;
    position: relative;
  }
  #top__information_list span {
    display: inline-block;
    color: var(--main);
    padding-bottom: 4px;
  }
  #top__information_list::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 0;
    bottom: -3px;
    background-color: var(--main);
    border-radius: 3px;
  }
  #top__information .top__h2 {
    writing-mode: inherit;
    bottom: 0;
  }
  #top__contents01 {
    background-image: url(/atopy/assets/img/contents01_bg.png);
    background-position: top center;
    background-repeat: repeat-x;
    height: 566px;
    display: flex;
    flex-direction: column;
  }
  #top__contents01_inner {
    width: 1024px;
    margin: auto;
  }
  #top__contents01 p {
    color: var(--white);
    line-height: 1.8;
  }
  #top__contents01_title {
    margin-bottom: 40px;
  }
  #top__contents01_title span {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading2);
    line-height: 1.4;
    background-color: rgba(30, 154, 187, 0.7);
    display: inline-block;
    padding-left: 12px;
  }
  #top__contents01_title span:first-child {
    margin-bottom: var(--space-xxs);
  }
  #top__contents01 .text01 {
    margin-bottom: 36px;
  }
  #top__about {
    position: relative;
  }
  #top__about h2 {
    left: 0;
  }
  #top__about .box_inner {
    position: relative;
    padding-top: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
  #top__about .box_inner_text {
    background-color: rgba(255, 255, 255, 0.7);
    width: 46%;
    padding: var(--space-xs) var(--space-sm);
  }
  #top__about .box_inner_text > div {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  #top__about .box_inner_text h3 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: var(--main);
    font-size: var(--heading3);
    line-height: 1.6;
    margin-bottom: var(--space-xs);
  }
  #top__about .box_inner_text p {
    margin-bottom: var(--space-xxs);
  }
  #top__about .box_inner_text-left {
    margin-left: var(--space-sm);
  }
  #top__about .box_inner_text-right {
    margin-right: var(--space-sm);
    margin-left: auto;
  }
  #top__about .box_inner01 {
    background-image: url(/atopy/assets/img/contents02_img01.png);
    background-position: top right;
    background-repeat: no-repeat;
  }
  #top__about .box_inner02 {
    background-image: url(/atopy/assets/img/contents02_img02.png);
    background-position: top left;
    background-repeat: no-repeat;
  }
  #top__about .box_inner .button-right {
    flex-direction: row-reverse;
  }
  #top__contents {
    position: relative;
    margin-bottom: var(--space-lg);
  }
  #top__contents h2 {
    right: 0;
  }
  #top__contents .top__contents-title_wrap {
    position: absolute;
    top: var(--space-xxl);
    right: 200px;
  }
  #top__contents .opacity-none {
    opacity: 0;
    display: none;
  }
  #top__contents .hex-grid {
    display: flex;
    justify-content: center;
  }
  #top__contents .hex-grid__list {
    overflow: hidden;
    --amount: 5;
    position: relative;
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(var(--amount), 1fr 2fr) 1fr;
    grid-gap: 2.5rem 5rem;
  }
  #top__contents .hex-grid__item {
    position: relative;
    grid-column: 1/span 3;
    grid-row: calc(var(--counter) + var(--counter))/span 2;
    filter: drop-shadow(6px 6px 0 rgba(30, 154, 187, 0.3));
    height: 0;
    padding-bottom: 85%;
  }
  #top__contents .hex-grid__item img {
    max-width: inherit;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }
  #top__contents .hex-grid__content {
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 1.125rem;
    color: #111111;
    background-color: white;
    -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
            clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    transition: transform 0.24s ease-out;
  }
  #top__contents .hex-grid__list {
    --amount: 4;
    --counter: 1;
  }
  #top__contents .hex-grid__item:nth-of-type(4n + 1) {
    grid-column: 1/span 3;
  }
  #top__contents .hex-grid__item:nth-of-type(4n + 2) {
    grid-column: 3/span 3;
    grid-row: calc(var(--counter) + var(--counter) - 1)/span 2;
  }
  #top__contents .hex-grid__item:nth-of-type(4n + 3) {
    grid-column: 5/span 3;
  }
  #top__contents .hex-grid__item:nth-of-type(4n + 4) {
    grid-column: 7/span 3;
    grid-row: calc(var(--counter) + var(--counter) - 1)/span 2;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 5) {
    --counter: 2;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 9) {
    --counter: 3;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 13) {
    --counter: 4;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 17) {
    --counter: 5;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 21) {
    --counter: 6;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 25) {
    --counter: 7;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 29) {
    --counter: 8;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 33) {
    --counter: 9;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 37) {
    --counter: 10;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 41) {
    --counter: 11;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 45) {
    --counter: 12;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 49) {
    --counter: 13;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 53) {
    --counter: 14;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 57) {
    --counter: 15;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 61) {
    --counter: 16;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 65) {
    --counter: 17;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 69) {
    --counter: 18;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 73) {
    --counter: 19;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 77) {
    --counter: 20;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 81) {
    --counter: 21;
  }
  #top__contents .bgcolor-main {
    background-color: rgba(30, 154, 187, 0.3);
  }
  #top__greeting .top__contents-title_wrap {
    text-align: center;
  }
  #top__greeting h2 {
    margin: 0 auto var(--space-sm);
  }
  #top__greeting .name {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    font-size: var(--heading4);
    color: var(--main);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xxs);
  }
  #banner_area {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
  #banner_area > div {
    gap: var(--space-sm);
  }
  #feature #subpage__h1 {
    background-image: url(/atopy/assets/img/feature/header_image_feature.png);
  }
  #feature .contents {
    margin: var(--space-lg) 0;
    position: relative;
    z-index: 5;
  }
  #feature .contents__inner {
    display: flex;
    max-width: 1366px;
    margin: 0 auto;
  }
  #feature .contents__inner > div {
    width: 50%;
  }
  #feature .contents__text {
    position: relative;
    height: 100%;
    background-color: var(--white);
    margin-top: var(--space-lg);
    padding: var(--space-xs) var(--space-sm);
    padding-bottom: var(--space-xxs);
    box-sizing: border-box;
  }
  #feature .contents__text::before {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    background-color: var(--white);
    width: 10vw;
    height: 100%;
    top: 0;
  }
  #feature .contents__text::after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    background-color: var(--white);
    width: 50%;
    height: 100%;
    top: 0;
  }
  #feature .contents__text h2 {
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading3);
    text-align: left;
    letter-spacing: 0.2rem;
    line-height: 1.4;
    margin-bottom: 35px;
  }
  #feature .contents__img {
    box-sizing: border-box;
  }
  #feature .contents-l .contents__img {
    padding-right: 36px;
  }
  #feature .contents-l .contents__text {
    padding-left: 0;
  }
  #feature .contents-l .contents__text::after {
    left: 0;
  }
  #feature .contents-l .contents__text::before {
    left: -5vw;
  }
  #feature .contents-r .contents__inner {
    flex-flow: row-reverse;
  }
  #feature .contents-r .contents__img {
    padding-left: 36px;
  }
  #feature .contents-r .contents__text {
    padding-right: 0;
  }
  #feature .contents-r .contents__text::after {
    right: 0;
  }
  #feature .contents-r .contents__text::before {
    right: -5vw;
  }
  #treatment #subpage__h1 {
    background-image: url(/atopy/assets/img/treatment/header_image_treatment.png);
  }
  #treatment #subpage__h1 h1 {
    color: var(--white);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 180px;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 54px var(--main);
  }
  #treatment__header_text {
    color: var(--accent);
    font-weight: bold;
    border: solid 1px var(--accent);
    padding: 8px 30px;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  #treatment .treatment__contents {
    position: relative;
    padding: var(--space-sm);
  }
  #treatment .treatment__contents_title {
    display: flex;
    gap: var(--space-sm);
  }
  #treatment .treatment__contents_title h2 {
    width: 472px;
    margin-left: -80px;
    margin-top: -80px;
    margin-bottom: 0;
  }
  #treatment .treatment__contents_title > div {
    flex: 1;
    display: flex;
    align-items: center;
  }
  #treatment .treatment__contents_title > div p {
    margin-bottom: 0;
  }
  #treatment .treatment__contents_text {
    margin-top: var(--space-xs);
  }
  #treatment .treatment__contents_p {
    color: var(--white);
    font-weight: bold;
    font-size: var(--heading5);
    letter-spacing: 1px;
    line-height: 1.8;
  }
  #treatment .treatment__contents_p-big {
    font-size: var(--heading3);
  }
  #treatment .treatment__contents_p-bgwhite {
    display: inline-block;
    color: var(--main);
    font-weight: bold;
    background-color: var(--white);
    padding: 4px 16px;
  }
  #treatment .treatment__contents_photoArea {
    padding: var(--space-md) var(--space-xs);
  }
  #treatment .treatment__contents_image {
    text-align: center;
    margin-bottom: var(--space-lg);
  }
  #treatment .treatment__contents-01 {
    background-image: url(/atopy/assets/img/treatment/treatment_bgimage01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #treatment .treatment__contents-02 {
    background-image: url(/atopy/assets/img/treatment/treatment_bgimage02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #flow #subpage__h1 {
    background-image: url(/atopy/assets/img/flow/header_image_flow.png);
  }
  #flow_list {
    margin-bottom: var(--space-lg);
  }
  .flow__h4 {
    font-size: var(--heading4);
    font-weight: bold;
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: 8px;
    margin-top: var(--space-sm);
  }
  .flow__text_bgblue {
    font-size: var(--body-small);
    background-color: rgba(30, 154, 187, 0.3);
    padding: var(--space-xxxs) var(--space-xxs);
    letter-spacing: 1px;
    margin-bottom: var(--space-lg) !important;
  }
  .flow__text_bgblue span {
    font-weight: bold;
    color: var(--accent);
    font-size: var(--body-small);
  }
  .flow__lists {
    position: relative;
  }
  .flow__lists::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    width: 4px;
    height: 100%;
    background-color: var(--main);
    bottom: -115px;
    left: 67px;
  }
  .flow__lists_last::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    width: 4px;
    height: 80%;
    background-color: var(--main);
    top: -3px;
    left: 67px;
  }
  .flow__lists_inner {
    display: flex;
    gap: var(--space-xs);
  }
  .flow__lists_inner h4 {
    writing-mode: vertical-lr;
    border: solid 1px var(--main);
    padding: 8px;
    font-size: var(--heading4);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    letter-spacing: 2px;
  }
  .flow__lists_inner h4 span {
    font-size: var(--heading4);
    color: var(--accent);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }
  .flow__lists li {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  .flow__lists_step {
    width: 143px;
  }
  .flow__lists_text {
    padding-top: 6px;
    flex: 1;
  }
  .flow__lists_text h3 {
    font-size: var(--heading4);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: var(--space-xs);
  }
  .flow__lists_text a {
    font-weight: bold;
    color: var(--main);
  }
  #about #subpage__h1 {
    background-image: url(/atopy/assets/img/about/header_image_about.png);
  }
  #about_list {
    margin-bottom: var(--space-lg);
  }
  .about h3 {
    text-align: center;
    font-size: var(--heading3);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }
  .about h4 {
    font-size: var(--heading4);
  }
  #useful #subpage__h1 {
    background-image: url(/atopy/assets/img/useful/header_image_useful.png);
  }
  #useful_list {
    margin-bottom: var(--space-lg);
  }
  .useful__banner {
    border-bottom: solid 1px var(--main);
    position: relative;
    margin-bottom: var(--space-md);
  }
  .useful__banner::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main);
    right: 0;
    bottom: -4px;
  }
  .useful__banner_wrap {
    max-width: 710px;
    margin: 0 auto var(--space-lg);
  }
  .useful__banner_image {
    margin-bottom: var(--space-sm);
  }
  .useful__siteTitle {
    font-weight: bold;
    margin-bottom: 8px !important;
  }
  .useful__siteUrl {
    color: var(--main);
    font-weight: bold;
    display: inline-block;
    margin-bottom: var(--space-xs);
    word-break: break-all;
  }
  #qa #subpage__h1 {
    background-image: url(/atopy/assets/img/qa/header_image_qa.png);
  }
  #qa_list {
    margin-bottom: var(--space-lg);
  }
  .qa__contents dl {
    margin-bottom: var(--space-md);
  }
  .qa__contents dt {
    line-height: 1.8;
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading4);
    font-weight: bold;
    border-bottom: solid 1px var(--main);
    position: relative;
    margin-bottom: var(--space-xs);
    padding-left: 2rem;
  }
  .qa__contents dt::before {
    content: "Q.";
    margin-left: -2rem;
    margin-right: 8px;
  }
  .qa__contents dt::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main);
    right: 0;
    bottom: -4px;
  }
  .qa__contents dd {
    padding-left: 2rem;
  }
  .qa__contents dd::before {
    content: "A.";
    margin-left: -1.8rem;
    margin-right: 12px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    font-size: var(--heading4);
  }
  #privacy #subpage__h1 {
    background-image: url(/atopy/assets/img/qa/header_image_qa.png);
  }
  .privacy__text {
    padding-top: var(--space-lg);
  }
  .privacy h2 {
    text-align: left;
    font-size: var(--heading3);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: var(--space-xs);
  }
  .privacy ul, .privacy ol {
    margin-bottom: var(--space-sm);
  }
  .privacy ul li, .privacy ol li {
    list-style-type: disc;
    margin-left: 1em;
  }
  .privacy ul li > ol > li, .privacy ol li > ol > li {
    list-style-type: circle;
  }
}
@media screen and (max-width: 1024px) {
  body {
    position: relative;
    z-index: 2;
  }
  .pc {
    display: none !important;
  }
  .flexContainer {
    display: flex;
  }
  .text-xxxs {
    font-size: var(--small);
  }
  .caption {
    font-size: var(--caption);
  }
  .display-small {
    max-width: 800px;
    margin: auto;
  }
  .display-default {
    max-width: 1366px;
    margin: auto;
  }
  .display-inner {
    padding: 0 45px;
  }
  .screenMediumCenter {
    padding: 0 var(--space-xs);
    margin: 0 auto;
  }
  #contents {
    background-image: url(/atopy/assets/img/background.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: cover;
    padding-bottom: var(--space-xl);
  }
  .button01 {
    font-size: var(--body-small);
    display: inline-block;
    padding: 12px 20px;
    line-height: 1.4;
    background-color: #fff;
    box-shadow: 5px 5px 0px 0px rgba(30, 154, 187, 0.3);
    width: 100%;
    box-sizing: border-box;
    border-radius: 30px;
    text-decoration: none;
    color: var(--main);
    font-weight: bold;
    text-align: center;
    margin: 16px auto;
  }
  .dli-arrow-right {
    display: inline-block;
    vertical-align: middle;
    color: var(--main);
    line-height: 1;
    position: relative;
    width: 1em;
    height: 0.1em;
    background: currentColor;
    margin-left: 1rem;
  }
  .dli-arrow-right::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
  }
  .page-container {
    padding: var(--space-lg) 0;
  }
  .section-container-first {
    padding: 0 0 var(--space-lg);
  }
  .section-border {
    border-width: 1px 0 0 0;
    border-style: dashed;
    border-color: var(--main-light);
    padding: 0 var(--space-md);
  }
  .section-container {
    padding: var(--space-lg) 0;
  }
  .section-pb-none {
    padding-bottom: 0;
  }
  h2 {
    text-align: center;
    margin-bottom: var(--space-sm);
    position: relative;
  }
  h2::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -45px;
    margin: auto;
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    font-weight: 300;
    content: attr(data-title);
    font-size: var(--body);
  }
  .subpage #header {
    height: 70px;
    background-color: var(--main);
  }
  .subpage #logo {
    font-size: var(--heading1);
    line-height: 1;
  }
  .subpage main p {
    margin-bottom: 30px;
  }
  .subpage h1 {
    color: var(--white);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading3);
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 54px var(--main);
    box-sizing: border-box;
    padding: var(--space-xxs);
    line-height: 1.2;
  }
  .subpage #subpage__h1 {
    height: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .subpage__contents_h3 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: var(--main);
    text-align: center;
    font-size: var(--heading2);
    margin-bottom: var(--space-md);
  }
  .subpage__contents_h3_wrap {
    text-align: center;
    margin-bottom: var(--space-sm);
  }
  .subpage__contents_h3_underline {
    display: inline;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    color: var(--main);
    font-size: var(--heading3);
    position: relative;
    line-height: 1;
    margin-top: var(--space-md);
    background: linear-gradient(transparent 60%, #bce1eb 0);
  }
  .subpage__contents_h4 {
    font-weight: bold;
    font-size: var(--heading3);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    padding-bottom: 10px;
    border-bottom: solid 1px var(--main);
    position: relative;
  }
  .subpage__contents_h4::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main);
    right: 0;
    bottom: -4px;
  }
  .subpage .contents {
    position: relative;
  }
  .subpage__anchor {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xxl);
  }
  .subpage__anchor_button {
    position: relative;
    width: 100%;
    height: 63px;
    background-color: var(--white);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
  }
  .subpage__anchor_button span {
    color: var(--main);
    font-weight: bold;
    font-size: var(--body);
    line-height: 1.3;
  }
  .subpage__anchor_button::before {
    content: "";
    display: block;
    bottom: -27px;
    width: 100%;
    height: 27px;
    position: absolute;
    background-color: var(--main);
    border-radius: 0 0 12px 12px;
  }
  .subpage__anchor_button::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    bottom: -17px;
    right: 0;
    left: 0;
    position: absolute;
    border-top: solid 3px var(--white);
    border-right: solid 3px var(--white);
    transform: rotate(135deg);
  }
  .topContent {
    padding-top: var(--space-md);
  }
  .btn-side {
    gap: 16px;
    position: fixed;
    right: 0;
    top: 30px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 300ms;
    max-width: 89px;
    width: 3.6vw;
    min-width: 50px;
  }
  #banner_area {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-lg);
  }
  #banner_area > div {
    gap: var(--space-sm);
  }
  /*****************************************

  header SP

  *****************************************/
  #header {
    height: 70px;
    background-color: var(--main);
  }
  #header__inner {
    display: flex;
    justify-content: space-between;
  }
  #header__logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 16px;
    z-index: 100;
    width: 70%;
  }
  #header__logo img {
    vertical-align: middle;
  }
  #global__nav {
    position: fixed;
    inset: 0 -100% 0 100%;
    background-color: rgba(30, 154, 187, 0.85);
    z-index: 100;
    transition: transform 0.3s;
    padding: 0 var(--space-xs);
  }
  #global__nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 20px;
  }
  #global__nav ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: var(--heading4);
  }
  #global__nav_banner {
    padding-top: 40px;
  }
  #global__nav_toggle {
    position: fixed;
    z-index: 105;
    top: 0;
    right: 0;
    background-color: #1e9abb;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 3px;
    box-sizing: border-box;
  }
  #global__nav_toggle:hover {
    cursor: pointer;
  }
  #global__nav_toggle span, #global__nav_toggle span:before, #global__nav_toggle span:after {
    content: "";
    display: block;
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: var(--white);
  }
  #global__nav_toggle span {
    top: 20px;
  }
  #global__nav_toggle span:before {
    bottom: 10px;
  }
  #global__nav_toggle span:after {
    top: 10px;
    width: 20px;
    margin-bottom: 5px;
  }
  #global__nav_toggle p {
    color: var(--white);
    font-size: 12px;
    position: absolute;
    bottom: 8px;
  }
  .open #global__nav {
    transform: translate(-100%, 0);
  }
  .open #global__nav_toggle span {
    background-color: rgba(255, 255, 255, 0);
  }
  .open #global__nav_toggle span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  .open #global__nav_toggle span::after {
    top: 0;
    transform: rotate(-45deg);
    width: 28px;
  }
  .openbody {
    position: fixed;
    overflow: hidden;
  }
  .close .sidebar-nav-button .txt-close {
    display: block;
  }
  .close .sidebar-nav-button .txt-open {
    display: none;
  }
  .close .main {
    margin-left: 0;
  }
  /***** footer start *****/
  .footer {
    background-color: var(--main);
    padding: var(--space-sm) var(--space-xs) var(--space-sm);
  }
  .footer__lists {
    margin: var(--space-sm) 0 var(--space-sm);
  }
  .footer__list {
    margin-bottom: var(--space-xxxs);
  }
  .footer__list a {
    color: var(--white);
    text-decoration: none;
    font-size: var(--heading5);
  }
  .footer__list a .dli-arrow-right {
    color: var(--white);
    margin-left: 0;
    margin-right: 1rem;
  }
  .footer__address {
    font-size: var(--body-small);
  }
  .footer__address p {
    color: var(--white);
  }
  .footer__wrap {
    display: flex;
    flex-flow: column;
    gap: 30px;
    margin-bottom: var(--space-sm);
  }
  .footer__left img {
    max-width: 360px;
    width: 100%;
  }
  .footer__right p {
    font-size: var(--heading5);
    text-align: center;
    background-color: var(--white);
    border-radius: 21px;
    height: 42px;
    padding: 12px;
    box-sizing: border-box;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 30px;
    box-shadow: 0 3px 6px rgb(172, 172, 172);
  }
  /***** footer end *****/
  /*****************************************

  top SP

  *****************************************/
  /*****************************************

  feature SP

  *****************************************/
  /*****************************************

  treatment SP

  *****************************************/
  /*****************************************

  flow SP

  *****************************************/
  /*****************************************

  about PC

  *****************************************/
  /*****************************************

  useful SP

  *****************************************/
  /*****************************************

  qa PC

  *****************************************/
  /*****************************************

  privacy SP

  *****************************************/
}
@media screen and (max-width: 1024px) and (max-width: 1200px) {
  .footer__right p {
    font-size: var(--body);
  }
}
@media screen and (max-width: 1024px) {
  .footer__googlemap {
    box-shadow: 0 3px 6px rgb(172, 172, 172);
    display: flex;
    flex-flow: column;
    height: 280px;
  }
  .footer__googlemap iframe {
    width: 100%;
    height: 100%;
  }
  .copy {
    display: flex;
    justify-content: space-between;
    flex-flow: column;
  }
  .copy small {
    text-align: center;
    font-size: 12px;
    color: var(--white);
    margin-bottom: var(--space-xxs);
  }
  .copy ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  .copy ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: var(--caption);
  }
  #top #wrapper {
    background-color: #e4f3f7;
    padding-top: var(--space-lg);
  }
  #top #contents {
    padding-top: var(--space-lg);
  }
  #top .top__h2 {
    position: absolute;
    font-size: 80px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: rgba(30, 154, 187, 0.3);
    writing-mode: vertical-rl;
    line-height: 1;
    font-weight: normal;
    overflow: hidden;
  }
  #top .top__contents-title {
    display: inline-block;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    color: var(--main);
    font-size: var(--heading3);
    position: relative;
    line-height: 1;
  }
  #top .top__contents-title::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: "";
    display: block;
    width: 100%;
    height: 16px;
    background-color: rgba(30, 154, 187, 0.2);
  }
  #top #mainVisual {
    position: relative;
  }
  #top #mainVisual__box {
    height: calc(100vh - 70px);
    background-color: var(--main);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-image: url(/atopy/assets/img/mv_image01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }
  #top #mainVisual picture {
    padding: 0 var(--space-sm);
    box-sizing: border-box;
    margin-top: calc(var(--space-xxxl) * -1);
    max-width: 600px;
    width: 100%;
  }
}
@media screen and (max-width: 1024px) and (min-width: 600px) {
  #top #mainVisual picture {
    margin-top: calc(var(--space-xxl) * -1);
  }
}
@media screen and (max-width: 1024px) {
  #top #mainVisual__banner {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #top #mainVisual__hospital {
    text-align: center;
    position: absolute;
    bottom: 20vh;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
  }
}
@media screen and (max-width: 1024px) and (min-width: 600px) {
  #top #mainVisual__hospital {
    bottom: 15vh;
  }
}
@media screen and (max-width: 1024px) {
  #top #mainVisual__bigLogo {
    position: absolute;
    bottom: 30vh;
    right: var(--space-sm);
    width: 50%;
    max-width: 300px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 600px) {
  #top #mainVisual__bigLogo {
    bottom: 10vh;
  }
}
@media screen and (max-width: 1024px) {
  #top__information {
    padding-bottom: var(--space-xl);
    position: relative;
  }
  #top__information_lists {
    max-width: 600px;
    margin: auto;
    padding: var(--space-xs);
  }
  #top__information_list {
    border-bottom: #1e9abb solid 1px;
    padding-bottom: 4px;
    position: relative;
  }
  #top__information_list span {
    display: inline-block;
    color: var(--main);
    padding-bottom: 4px;
  }
  #top__information_list::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 0;
    bottom: -3px;
    background-color: var(--main);
    border-radius: 3px;
  }
  #top__information .top__h2 {
    writing-mode: inherit;
    bottom: 0;
  }
  #top__contents01 {
    background-image: url(/atopy/assets/img/contents01_bg.png);
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }
  #top__contents01_inner {
    margin: auto;
    padding: var(--space-sm) var(--space-xs);
  }
  #top__contents01 p {
    color: var(--white);
    line-height: 1.8;
  }
  #top__contents01_title {
    margin-bottom: 30px;
  }
  #top__contents01_title span {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading4);
    line-height: 1.4;
    background-color: rgba(30, 154, 187, 0.7);
    display: inline-block;
    padding-left: 12px;
  }
  #top__contents01_title span:first-child {
    margin-bottom: var(--space-xxs);
  }
  #top__contents01 .text01 {
    margin-bottom: 36px;
  }
  #top__about {
    position: relative;
  }
  #top__about h2 {
    left: 0;
  }
  #top__about .box_inner {
    position: relative;
    padding-top: var(--space-xxl);
    margin-bottom: var(--space-xl);
  }
  #top__about .box_inner_text {
    background-color: rgba(255, 255, 255, 0.8);
    width: 90%;
    box-sizing: border-box;
    padding: var(--space-xs) var(--space-sm);
    margin: 0 auto;
  }
  #top__about .box_inner_text > div {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  #top__about .box_inner_text h3 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: var(--main);
    font-size: var(--heading3);
    line-height: 1.6;
    margin-bottom: var(--space-xs);
  }
  #top__about .box_inner_text p {
    margin-bottom: var(--space-xxs);
  }
  #top__about .box_inner01 {
    background-image: url(/atopy/assets/img/contents02_img01.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #top__about .box_inner02 {
    background-image: url(/atopy/assets/img/contents02_img02.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #top__about .box_inner .button-right {
    flex-direction: row-reverse;
  }
  #top__contents {
    position: relative;
    margin-bottom: var(--space-lg);
  }
  #top__contents h2 {
    right: 0;
  }
  #top__contents .top__contents-title_wrap {
    text-align: center;
    margin-bottom: var(--space-sm);
  }
  #top__contents .opacity-none {
    opacity: 0;
    display: none;
  }
  #top__contents .hex-grid {
    display: flex;
    justify-content: center;
  }
  #top__contents .hex-grid__list {
    overflow: hidden;
    --amount: 5;
    position: relative;
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(var(--amount), 1fr 2fr) 1fr;
    grid-gap: 1.5rem 3rem;
  }
  #top__contents .hex-grid__item {
    position: relative;
    grid-column: 1/span 3;
    grid-row: calc(var(--counter) + var(--counter))/span 2;
    filter: drop-shadow(6px 6px 0 rgba(30, 154, 187, 0.3));
    height: 0;
    padding-bottom: 85%;
  }
  #top__contents .hex-grid__item img {
    max-width: inherit;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }
  #top__contents .hex-grid__content {
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 1.125rem;
    color: #111111;
    background-color: white;
    -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
            clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    transition: transform 0.24s ease-out;
  }
  #top__contents .hex-grid__list {
    --amount: 2;
    --counter: 1;
  }
  #top__contents .hex-grid__item:nth-of-type(2n + 1) {
    grid-column: 1/span 3;
  }
  #top__contents .hex-grid__item:nth-of-type(2n + 2) {
    grid-column: 3/span 3;
    grid-row: calc(var(--counter) + var(--counter) - 1)/span 2;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 3) {
    --counter: 2;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 5) {
    --counter: 3;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 7) {
    --counter: 4;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 9) {
    --counter: 5;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 11) {
    --counter: 6;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 13) {
    --counter: 7;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 15) {
    --counter: 8;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 17) {
    --counter: 9;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 19) {
    --counter: 10;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 21) {
    --counter: 11;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 23) {
    --counter: 12;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 25) {
    --counter: 13;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 27) {
    --counter: 14;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 29) {
    --counter: 15;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 31) {
    --counter: 16;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 33) {
    --counter: 17;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 35) {
    --counter: 18;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 37) {
    --counter: 19;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 39) {
    --counter: 20;
  }
  #top__contents .hex-grid__item:nth-of-type(n + 41) {
    --counter: 21;
  }
  #top__contents .bgcolor-main {
    background-color: rgba(30, 154, 187, 0.3);
  }
  #top__greeting .top__contents-title_wrap {
    text-align: center;
  }
  #top__greeting h2 {
    margin: 0 auto var(--space-sm);
  }
  #top__greeting .display-inner {
    padding: var(--space-sm);
  }
  #top__greeting .name {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    font-size: var(--heading4);
    color: var(--main);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xxs);
  }
  #banner_area {
    padding-top: var(--space-md);
    padding-bottom: var(--space-sm);
  }
  #banner_area > div {
    flex-flow: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    padding-bottom: 0;
  }
  #feature #subpage__h1 {
    background-image: url(/atopy/assets/img/feature/header_image_feature.png);
  }
  #feature .contents {
    margin: var(--space-lg) 0;
    position: relative;
    z-index: 5;
  }
  #feature .contents__inner {
    display: flex;
    flex-flow: column;
  }
  #feature .contents__inner > div {
    margin: auto;
    width: 90%;
  }
  #feature .contents__text {
    position: relative;
    height: 100%;
    background-color: var(--white);
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-xs);
    padding-bottom: var(--space-xxs);
    box-sizing: border-box;
  }
  #feature .contents__text::after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    background-color: var(--white);
    width: 100%;
    height: 100%;
    top: 0;
  }
  #feature .contents__text h2 {
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading4);
    letter-spacing: 0.2rem;
    line-height: 1.4;
    margin-bottom: var(--space-xs);
  }
  #feature .contents__img {
    box-sizing: border-box;
    text-align: center;
  }
  #feature .contents__img img {
    width: 100%;
    height: auto;
  }
  #feature .contents-l .contents__text::after {
    left: 0;
  }
  #feature .contents-l .contents__text::before {
    left: -5vw;
  }
  #feature .contents-r .contents__text::after {
    right: 0;
  }
  #feature .contents-r .contents__text::before {
    right: -5vw;
  }
  #treatment #subpage__h1 {
    background-image: url(/atopy/assets/img/treatment/header_image_treatment.png);
  }
  #treatment__header #logo {
    color: var(--white);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 180px;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 54px var(--main);
  }
  #treatment__header_text {
    color: var(--accent);
    font-weight: bold;
    border: solid 1px var(--accent);
    padding: 8px 30px;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  #treatment .subpage__contents_h3 {
    font-size: var(--heading3);
  }
  #treatment .contents {
    margin: var(--space-lg) 0;
    position: relative;
    z-index: 5;
  }
  #treatment .treatment__contents {
    position: relative;
    padding: var(--space-sm) var(--space-xs);
  }
  #treatment .treatment__contents_title h2 {
    width: 100%;
    margin-left: -80px;
    margin-top: -80px;
    margin-bottom: var(--space-sm);
    text-align: left;
  }
  #treatment .treatment__contents_title > div {
    flex: 1;
    display: flex;
    align-items: center;
  }
  #treatment .treatment__contents_title > div p {
    margin-bottom: 0;
  }
  #treatment .treatment__contents_text {
    margin-top: var(--space-xs);
  }
  #treatment .treatment__contents_p {
    color: var(--white);
    font-weight: bold;
    font-size: var(--body);
    letter-spacing: 1.4px;
    line-height: 1.8;
  }
  #treatment .treatment__contents_p-big {
    font-size: var(--heading4);
  }
  #treatment .treatment__contents_p-bgwhite {
    display: inline-block;
    color: var(--main);
    font-weight: bold;
    background-color: var(--white);
    padding: 4px 16px;
  }
  #treatment .treatment__contents_photoArea {
    padding: var(--space-md) var(--space-xs);
  }
  #treatment .treatment__contents_image {
    text-align: center;
    margin-bottom: var(--space-lg);
  }
  #treatment .treatment__contents-01 {
    background-image: url(/atopy/assets/img/treatment/treatment_bgimage01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #treatment .treatment__contents-02 {
    background-image: url(/atopy/assets/img/treatment/treatment_bgimage02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #flow #subpage__h1 {
    background-image: url(/atopy/assets/img/flow/header_image_flow.png);
  }
  #flow_list {
    margin-bottom: var(--space-lg);
  }
  .flow__h4 {
    font-size: var(--heading4);
    font-weight: bold;
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: 8px;
    margin-top: var(--space-sm);
  }
  .flow__text_bgblue {
    font-size: var(--body-small);
    background-color: rgba(30, 154, 187, 0.3);
    padding: var(--space-xxxs) var(--space-xxs);
    letter-spacing: 1px;
    margin-bottom: var(--space-lg) !important;
  }
  .flow__text_bgblue span {
    font-weight: bold;
    color: var(--accent);
    font-size: var(--body-small);
  }
  .flow__lists {
    position: relative;
  }
  .flow__lists::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 100%;
    background-color: var(--main);
    bottom: -60px;
    left: 38px;
  }
  .flow__lists_last::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 80%;
    background-color: var(--main);
    top: -30px;
    left: 38px;
  }
  .flow__lists_inner {
    display: flex;
    gap: var(--space-xxxs);
    flex-flow: column;
  }
  .flow__lists_inner h4 {
    border: solid 1px var(--main);
    padding: 8px;
    margin-bottom: var(--space-sm);
    font-size: var(--heading4);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    letter-spacing: 2px;
  }
  .flow__lists_inner h4 span {
    font-size: var(--heading4);
    color: var(--accent);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }
  .flow__lists li {
    display: flex;
    gap: var(--space-xxxs);
    margin-bottom: var(--space-lg);
  }
  .flow__lists_step {
    width: 80px;
  }
  .flow__lists_text {
    padding-top: 6px;
    flex: 1;
  }
  .flow__lists_text h3 {
    font-size: var(--heading4);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: var(--space-xs);
    line-height: 1.5;
  }
  .flow__lists_text a {
    font-weight: bold;
    color: var(--main);
  }
  .flow__lists_text p {
    line-height: 1.8;
  }
  .flow__figure {
    margin: auto;
    max-width: 350px;
  }
  #about #subpage__h1 {
    background-image: url(/atopy/assets/img/about/header_image_about.png);
  }
  #about_list {
    margin-bottom: var(--space-lg);
  }
  .about h3 {
    text-align: center;
    font-size: var(--heading3);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }
  .about h4 {
    font-size: var(--heading4);
  }
  #useful #subpage__h1 {
    background-image: url(/atopy/assets/img/useful/header_image_useful.png);
  }
  #useful_list {
    margin-bottom: var(--space-lg);
  }
  #useful__contents {
    width: 90%;
    margin: auto;
  }
  .useful__banner {
    border-bottom: solid 1px var(--main);
    position: relative;
    margin-bottom: var(--space-md);
  }
  .useful__banner::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main);
    right: 0;
    bottom: -4px;
  }
  .useful__banner_wrap {
    max-width: 710px;
    margin: 0 auto var(--space-lg);
  }
  .useful__banner_image {
    margin-bottom: var(--space-sm);
  }
  .useful__siteTitle {
    font-weight: bold;
    margin-bottom: 8px !important;
  }
  .useful__siteUrl {
    color: var(--main);
    font-weight: bold;
    display: inline-block;
    margin-bottom: var(--space-xs);
    word-break: break-all;
  }
  #qa #subpage__h1 {
    background-image: url(/atopy/assets/img/qa/header_image_qa.png);
  }
  #qa_list {
    margin-bottom: var(--space-lg);
  }
  .qa__contents dl {
    margin-bottom: var(--space-md);
  }
  .qa__contents dt {
    line-height: 1.8;
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: var(--heading4);
    font-weight: bold;
    border-bottom: solid 1px var(--main);
    position: relative;
    margin-bottom: var(--space-xs);
    padding-left: 2rem;
  }
  .qa__contents dt::before {
    content: "Q.";
    margin-left: -2rem;
    margin-right: 8px;
  }
  .qa__contents dt::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main);
    right: 0;
    bottom: -4px;
  }
  .qa__contents dd {
    padding-left: 2rem;
  }
  .qa__contents dd::before {
    content: "A.";
    margin-left: -1.8rem;
    margin-right: 12px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    font-size: var(--heading4);
  }
  #privacy #subpage__h1 {
    background-image: url(/atopy/assets/img/qa/header_image_qa.png);
  }
  .privacy__text {
    padding-top: var(--space-md);
  }
  .privacy h2 {
    text-align: left;
    font-size: var(--heading4);
    color: var(--main);
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-bottom: var(--space-xs);
  }
  .privacy ul, .privacy ol {
    margin-bottom: var(--space-sm);
  }
  .privacy ul li, .privacy ol li {
    list-style-type: disc;
    margin-left: 1em;
  }
  .privacy ul li > ol > li, .privacy ol li > ol > li {
    list-style-type: circle;
  }
}/*# sourceMappingURL=style.css.map */