@charset "utf-8";
#potenza {
  /* font-size */
  --fs-main-title: 6rem;
  --fs-main-sub-title: 1.6rem;
  --fs-sub-title: 3.6rem;

  --fs-xxxl: 10rem;
  --fs-xxl: 8rem;
  --fs-xml: 6rem;
  --fs-xl: 5rem;
  --fs-l: 4.2rem;
  --fs-ml: 3.4rem;
  --fs-m: 3rem;
  --fs-sml: 2.6rem;
  --fs-sm: 2.4rem;
  --fs-xs: 2.3rem;
  --fs-tiny-l: 1.6rem;

  --fs-contents-title: 4.6rem;
  --fs-contents-title-list: 3.6rem;
  --fs-contents-sub-title: 2.4rem;
  --fs-contents-text: 2rem;
  --fs-contents-sub-text: 1.8rem;

  --fs-case-point: 1.8rem;

  /* font-weight */
  --fw-lg: 700;
  --fw-l: 600;
  --fw-m: 500;
  --fw-s: 400;

  /* color */
  --color-main: #16e2dc;
  --color-gray: #898989;
  --color-blue: #9fcaff;
  --color-white: #f6f6f6;

  line-height: 1.25;
}

#potenza .inner-box { max-width: calc(1400px + 8rem); padding: 0 8rem; margin-inline: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; } 
#sub-top { overflow: hidden; background-color: #daeff1; } 
#sub-title strong {position: absolute; top: 12rem;}
#sub-title strong i { aspect-ratio: 2 / 1; }
#sub-title strong span {color: white;}
#sub-title strong::before {background-color: #00beb7;}
#sub-top #sub-title { justify-content: center; } 
#sub-top #sub-title h2 { font-weight: var(--fw-m); } 
#sub-top #sub-title h2 b { font-weight: var(--fw-lg); } 
#sub-top #sub-title h2 b span { color: #00beb7; } 
#sub-top #sub-title h1 { margin-top: 3.2rem; font-size: var(--fs-main-title); color: black; } 
#breadcrumbs {position: relative;z-index: 4;}
/* page-worry */
#page-worry { position: relative; z-index: 3; background-color: var(--color-white); overflow: hidden; } 
#page-worry picture { display: block; } 
#page-worry .inner-box {max-width: 1920px;}
/* page-bna */
#page-bna { position: relative; z-index: 3; padding-block: 10rem 8rem; background-color: #b8e4e3; } 
#page-bna h3 { text-align: center; color: white; } 
#page-bna h3 .bna-title { font-size: var(--fs-contents-title); } 
#page-bna h3 span { font-size: var(--fs-contents-sub-title); } 
#page-bna .case-list { display: flex; align-items: center; justify-content: center; margin-top: 6rem; flex-direction: column; } 
#page-bna .case-list li { max-width: 65%; margin-inline: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; } 
#page-bna .case-list li .case-number { border-radius: 100px; font-size: var(--fs-case-point); color: white; padding: 1.2rem 4rem; background-color: black; font-weight: var(--fw-l); } 
#page-bna .case-list li .case-number b { color: var(--color-main); font-weight: var(--fw-l); } 
#page-bna .case-list figure { display: grid; grid-template-columns: repeat(2, 1fr); margin-inline: 0; margin-block: 3rem 6rem; border-radius: 2rem; overflow: hidden; } 
#page-bna .case-list li:last-child figure { margin-bottom: 0; } 
#page-bna .case-list figure .image-wrap { position: relative; } 
#page-bna .case-list figure .image-wrap:first-child { grid-area: 1 / 1 / 2 / 2; } 
#page-bna .case-list figure .image-wrap:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; } 
#page-bna .case-list figure .image-wrap .label { color: white; font-size: var(--fs-tiny-l); position: absolute; bottom: 1rem; font-weight: var(--fw-m); } 
#page-bna .case-list figure .image-wrap:first-child .label { left: 1.5rem; } 
#page-bna .case-list figure .image-wrap:nth-of-type(2) .label { right: 1.5rem; } 
#page-bna .case-list figure figcaption { grid-area: 2 / 1 / 3 / 3; background: white; text-align: center; display: flex; align-items: center; justify-content: center; padding-block: 2rem; font-size: var(--fs-contents-text); } 

/* page-total-care */
#page-total-care { position: relative; z-index: 3; padding-block: 10rem 8rem; background-color: #333a3a; } 
#page-total-care h3 { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: var(--fs-contents-sub-title); color: white; font-weight: var(--fw-s); } 
#page-total-care h3 img { width: auto; height: 1em; font-size: var(--fs-xxxl); display: block; margin-block: 2rem; } 
#page-total-care h4 { font-weight: var(--fw-m); font-size: var(--fs-contents-title); color: white; } 
#page-total-care .equipment-potenza { position: relative; max-width: 44rem; margin: 14rem auto auto; } 
#page-total-care .equipment-potenza ul { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-content: space-between; width: 200%; height: calc(100% + 2rem); text-align: center; color: white; font-size: var(--fs-contents-text); } 
#page-total-care .equipment-potenza picture { display: block; } 
#page-total-care .equipment-potenza ul b { font-weight: var(--fw-l); } 
#page-total-care .equipment-potenza ul span { color: var(--color-main); } 
#page-total-care .equipment-potenza ul li:nth-child(1) { grid-area: 1 / 1 / 2 / 3; transform: translateY(-1rem); } 
#page-total-care .equipment-potenza ul li:nth-child(2) { grid-area: 2 / 1 / 3 / 2; } 
#page-total-care .equipment-potenza ul li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; } 


/* page-point */
#page-point { position: relative; z-index: 3; padding-block: 10rem 0; background-color: var(--color-white); } 
#page-point h3 { margin-top: 4rem; font-size: var(--fs-contents-title-list); font-weight: var(--fw-m); text-align: center; } 
#page-point .point-number { border-radius: 100px; font-size: var(--fs-case-point); color: white; padding: 1.2rem 4rem; background-color: black; font-weight: var(--fw-l); } 
#page-point .point-number b { color: var(--color-main); font-weight: var(--fw-l); } 
#page-point article { max-width: 55%; margin-top: 4rem; margin-inline: auto; background-color: white; } 
#page-point article h4 { background-color: black; padding: 1.2rem 3rem; color: var(--color-main); font-weight: var(--fw-l); font-size: var(--fs-contents-text); text-align: center; } 
#page-point .point-list { display: grid; grid-template-rows: repeat(3, 1fr); } 
#page-point .point-list .tip-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; } 
#page-point .point-list li:nth-child(odd) { text-align: right; } 
#page-point .point-list li:nth-child(even) { text-align: left; } 
#page-point .point-list li .tip-text { color: #434343; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: var(--fs-contents-sub-text); font-weight: var(--fw-m); padding-inline: 4rem; width: 100%; } 

/* #page-point .point-list li .tip-text h5 { background: linear-gradient(transparent 60%, rgba(22, 226, 220, 0.15) 60%); padding-inline: 0.5rem; position: relative; font-size: var(--fs-contents-text); font-weight: var(--fw-l); color: black; }  */
#page-point .point-list li .tip-text h5 { 
  display: inline;
  /* box-shadow: inset 0 -0.4em rgba(22, 226, 220, 0.15); */
  padding-inline: 0.5rem;


  position: relative;
  font-size: var(--fs-contents-text);
  font-weight: var(--fw-l);
  color: black;
} 
#page-point .point-list li .tip-text h5 mark{
 background: linear-gradient(transparent 60%, rgba(22, 226, 220, 0.15) 60%);
  padding: 0 .05em;
}

#page-point .point-list li .tip-img { display: flex; align-items: center; justify-content: center; background-color: #eeecec; } 
#page-point .point-list li .tip-text.left { align-items: flex-start; } 
#page-point .point-list li .tip-text.right { align-items: flex-end; } 
#page-point .point-list li .tip-text li:first-of-type { margin-top: 2rem; } 
#page-point .point-list li .tip-text li:not(:last-child) { margin-bottom: 1rem; } 
#page-point small {
  text-align: center;
  font-size: var(--fs-case-point);
  font-weight: var(--fw-m);
  color: #434343;
  margin-top: 3.5rem;
}
#page-point.point02-03 { padding-block: 8rem; background-color: #add7d6; } 
#page-point.point02-03 h3 { color: white; } 
#page-point.point02-03 article { max-width: 65%; } 
#page-point.point02-03 .inner-box.point-02 .point-02-text { color: #3e5151; } 
#page-point.point02-03 .inner-box.point-02 .point-02-text b { font-weight: var(--fw-l); } 

#text-tip { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-block: 8rem; margin-top: 8rem; background-color: #333a3a; } 
#text-tip img { max-width: 6.6rem; } 
#text-tip h4 { margin-top: 2rem; color: white; font-weight: var(--fw-s); font-size: var(--fs-contents-sub-title); text-align: center; } 
#text-tip h4 b { color: var(--color-main); } 

#page-point .inner-box.point-02 { position: relative; z-index: 3; padding-bottom: 8rem; position: relative; } 
#page-point .inner-box.point-02 article { background-color: transparent; } 
#page-point .inner-box.point-02 img { border-radius: 8rem; overflow: hidden; } 
#page-point .inner-box.point-02 .point-02-text { text-align: center; color: white; margin-top: 4rem; font-size: var(--fs-contents-text); } 
#page-point .inner-box.point-03 { position: relative; z-index: 3; padding-top: 8rem; } 
#page-point .inner-box.point-03 .point-03-title { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 2rem; } 
#page-point .inner-box.point-03 .point-03-title h4 { font-size: var(--fs-contents-text); font-weight: var(--fw-m); color: #3e5151; } 
#page-point .inner-box.point-03 .double-effect-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 70%; margin-top: 5rem; } 
#page-point .inner-box.point-03 .double-effect-list li { position: relative; border-radius: 2rem; overflow: hidden; } 
#page-point .inner-box.point-03 .double-effect-list li h5 { padding: 2.4rem 1.2rem; font-size: var(--fs-contents-text); text-align: center; color: white; background-color: black; font-weight: var(--fw-s); } 
#page-point .inner-box.point-03 .double-effect-list li h5 b { font-weight: var(--fw-l); } 
#page-point .inner-box.point-03 .double-effect-list li h5 b:first-child { color: var(--color-main); } 
#page-point .inner-box.point-03 .double-effect-list li h5 b:last-child { color: var(--color-blue); } 
#page-point .inner-box.point-03 .double-effect-list li h5 b.gray { color: #d2d2d2; } 
#page-point .inner-box.point-03 .double-effect-list li h5 b.yellow { color: #ffd585; } 
#page-point .inner-box.point-03 .double-effect-list li .effect li { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 0; } 
#page-point .inner-box.point-03 .double-effect-list li .effect { padding: 2rem; display: grid; align-items: center; justify-content: center; flex-direction: column; background-color: white; gap: 1rem; } 
#page-point .inner-box.point-03 .double-effect-list li span { position: relative; font-size: var(--fs-contents-sub-text); font-weight: var(--fw-m); flex-grow: 1; display: inline-flex; align-items: center; color: #545661; } 
#page-point .inner-box.point-03 .double-effect-list .effect li::before { content: ''; width: 4px; height: 4px; background-color: black; display: block; margin-right: 2rem; border-radius: 50%; } 

#text-point { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-block: 8rem; background-color: #333a3a; } 
#text-point h4 { color: white; font-weight: var(--fw-s); font-size: var(--fs-contents-sub-title); text-align: center; } 
#text-point h4 b { color: var(--color-main); font-weight: var(--fw-l); } 

/* page-recommend */
#page-recommend { position: relative; z-index: 3; padding-block: 10rem; background-color: var(--color-white); }
#page-recommend h3 { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: var(--fs-contents-sub-title); }
#page-recommend h3 b { font-weight: var(--fw-lg); }
#page-recommend h3 .title-text-img { width: auto; height: 1em; font-size: var(--fs-xxxl); display: block; margin-block: 2rem; }
#page-recommend .sub-title-text-img { width: auto; height: 1em; font-size: var(--fs-xl); }
#page-recommend .sub-title-text-img:first-child { margin-right: auto; }
#page-recommend .sub-title-text-img:last-child { margin-left: auto; }
#page-recommend .recommend-list ul { margin-top: 4rem; width: 100%; display: grid; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; margin-inline: auto; }
#page-recommend .recommend-list li { position: relative; padding: 2rem 4rem; border-radius: 100px; background-color: white; font-size: var(--fs-contents-sub-title); font-weight: var(--fw-s); display: flex; align-items: center; gap: 3rem; }
#page-recommend .recommend-list li i { flex-shrink: 1; }
#page-recommend .recommend-list li i img { width: auto; height: 1.2em; display: block; }
#page-recommend .recommend-list li b { font-weight: var(--fw-l); color: #232827; }
#banner-potenza-ab { position: relative; overflow: hidden; width: 100%; max-height: 93rem; }
#banner-potenza-ab .sub-title-wrapper { position: absolute; max-width: calc(1100px + 8rem); width: 100%; height: 100%; padding: 12rem 8rem 8rem; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: flex-start; justify-content: center; flex-direction: column; z-index: 2; color: #434343; font-size: var(--fs-xs); }
#banner-potenza-ab .sub-title-wrapper h2 { position: relative; z-index: 2; font-weight: var(--fw-s); }
#banner-potenza-ab .sub-title-wrapper h1 { position: relative; z-index: 2; margin-top: 2rem; font-size: var(--fs-xxxl); }
#banner-potenza-ab .sub-title-wrapper h1 img { width: auto; height: 1.2em; display: block; }
#banner-potenza-ab #sub-title-image { background-color: #d6e4ed; }
#banner-potenza-ab #sub-title-image picture img { max-height: 93rem; width: 100%; height: 100%; object-fit: contain; object-position: center; }

@media (max-width: 1024px){
  #page-point .inner-box.point-03 .double-effect-list { width: 100%; } 
}

@media (max-width: 768px){

  #potenza .inner-box { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 4rem; } 
  #potenza .basics-list ul{ flex-direction: column; gap: 2rem; }
  #potenza .basics-list ul li .content .step{ transform: translate(-50%, 50%) rotate(90deg); }
  #potenza .basics-point{ padding: 3rem; }

  #sub-top #sub-title { align-items: flex-start; justify-content: flex-end; text-align: left;} 
  #sub-top #sub-title h1 { order: 1; font-size: 3.6rem; margin-top: 0;} 
  #sub-top #sub-title h2 { order: 2; margin-top: 1rem; font-size: 2rem; margin-top: 2rem;} 

  #page-bna,
  #page-total-care,
  #page-recommend { padding-block: 8rem; } 
  #potenza #page-worry .inner-box {padding: 0;} 
 
  #page-bna .case-list li { max-width: 100%; } 
  #page-worry { background-color: var(--color-white); } 
  #page-bna .case-list figure { margin-block: 2rem 4rem; } 
  
  #text-tip { padding-block: 4rem; } 
  #text-tip img { max-width: 10%; } 
  #text-section { padding-block: 3.2rem; } 
  
  #page-total-care .equipment-potenza { max-width: calc(100% - 14rem); } 
  #page-total-care .equipment-potenza ul { width: calc(200% - 4rem); } 
  
  #text-point { padding-block: 4rem; } 
  
  #page-recommend .recommend-list { width: 100%; padding-block: 1rem; } 
  #page-recommend .recommend-list ul { justify-content: unset; margin-top: 0; } 
  #page-recommend .recommend-list li { padding: 2rem; gap: 1rem; } 
  #page-recommend .recommend-list li span { text-align: center; flex-grow: 1; } 
  #page-recommend .sub-title-text-img { font-size: var(--fs-ml); } 
  

  #page-bna .case-list figure .image-wrap .label { bottom: .5rem; } 
  #page-bna .case-list figure .image-wrap:first-child .label { left: 1rem; } 
  #page-bna .case-list figure .image-wrap:nth-of-type(2) .label { right: 1rem; } 
  
  #page-point { padding-top: 8rem; } 
  #page-point h3 { margin-top: 2rem; } 
  #page-point article { max-width: 100%; } 
  #page-point article h4 { font-size: var(--fs-sm); } 
  #page-point .point-list li .tip-text { padding: 2rem; } 
  #page-point .point-list li .tip-text li:first-of-type { margin-top: 1rem; } 
  #page-point .point-list li .tip-text li:not(:last-child) { margin-bottom: 0; } 
  #page-point .point-list li:nth-child(even) { text-align: right; } 
  #page-point .inner-box.point-02 img { border-radius: 4rem; } 
  #page-point .inner-box.point-02 { padding-bottom: 8rem; padding-inline: 0; } 
  #page-point .inner-box.point-03 { padding: 0; } 
  #page-point .inner-box.point-03 .point-03-title { gap: 1rem; } 
  #page-point .inner-box.point-03 .point-03-title::after { width: 1px; } 
  #page-point .inner-box.point-03 .double-effect-list {
    grid-template-columns: repeat(1, 1fr);
    width: 80%;
  }
  #page-point .inner-box.point-03 .double-effect-list li h5 { font-size: var(--fs-contents-sub-text); } 
  #page-point .inner-box.point-03 .double-effect-list li .effect li span { display: flex; align-items: center; margin: 0 auto; text-align: center; justify-content: center; } 
  #page-point .inner-box.point-03 .double-effect-list li .effect { gap: 1rem; } 
  #page-point.point02-03 article { max-width: 100%; } 

  #banner-potenza-ab { max-height: none; } 
  #banner-potenza-ab .sub-title-wrapper { padding-block: 8rem; justify-content: flex-start; align-items: center; font-size: 2rem;} 
  #banner-potenza-ab .sub-title-wrapper h1 { font-size: 9rem; } 
  #banner-potenza-ab #sub-title-image picture img { max-height: none; height: auto; } 
  #banner-potenza-ab .sub-title-wrapper h1 img { height: 1em; } 

  #page-paincare,
  #page-special { padding: 8rem 0; } 
}

@media (max-width: 405px){
  #potenza { 
    --fs-xxxl: 8.6rem;
    --fs-xxl: 7.6rem;
    --fs-xl: 3.6rem;
    --fs-l: 3.2rem;
    --fs-ml: 3rem;
    --fs-m: 2.6rem;
    --fs-sml: 2.2rem;
    --fs-sm: 1.8rem;
    --fs-xs: 1.8rem;
    --fs-xxs: 1.8rem;
    --fs-tiny-l: 1.6rem;
    --fs-tiny: 1.4rem;
  } 
  
}

@media (max-width: 375px){
  #page-point.point02-03 .inner-box.point-02 .point-02-text br.block { display: none !important; } 
  #banner-potenza-ab .sub-title-wrapper h1 { margin-top: 1rem; font-size: 7.5rem; } 
  #page-total-care .equipment-potenza { max-width: calc(100% - 8rem); } 
  #page-recommend .recommend-list li { font-size: var(--fs-sml); } 
}