@charset "UTF-8";
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
.eb-garamond {
  font-family: "EB Garamond", serif;
}

html {
  box-sizing: border-box;
}

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

body {
  color: #571F28;
  font-family: "游ゴシック", YuGothic, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  /* アンチエイリアスを指定する */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* メトリクスカーニングを指定する */
  font-kerning: normal;
  margin: 0;
}

a {
  transition: 0.3s ease;
  text-decoration: underline;
}
a:hover, a:active, a:focus {
  opacity: 0.9;
  text-decoration: none;
}

p {
  font-family: "游ゴシック", YuGothic, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}

/**
 * フルードイメージにします。
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* svgのIEバグ回避 */
img[src*=".svg"] {
  width: 100%;
  height: auto;
}

i,
cite,
em,
address,
dfn {
  font-style: normal;
}

code,
pre {
  font-family: Consolas, Menlo, Courier, monospace;
}

/* container
-------------------------------------------------------------------------- */
/* イージング設定
======================================================================== */
/* その他設定
======================================================================== */
/* flexbox 設定
======================================================================== */
@media (min-width: 769px) {
  .sp {
    display: none !important;
  }
}

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

body.infertility-treatment .container {
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
body.infertility-treatment .container.u-w1240 {
  max-width: 1288px;
}
body.infertility-treatment .container.u-w960 {
  max-width: 1008px;
}
body.infertility-treatment .container.u-w840 {
  max-width: 888px;
}

img:hover, img:active, img:focus {
  pointer-events: none;
}

.l-header {
  position: relative;
  z-index: 100;
}

.mainvisual {
  position: relative;
  width: 100%;
  aspect-ratio: 375/589;
  overflow: hidden;
  background-image: url(../img/infertility-treatment/img_bg_01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.mainvisual .img-tx {
  position: absolute;
  z-index: 2;
  top: 42.7843803056%;
  left: 16%;
  right: 16%;
  width: auto;
}
.mainvisual .img-name {
  position: absolute;
  z-index: 2;
  top: 81.8336162988%;
  left: 25.8666666667%;
  right: 25.8666666667%;
  width: auto;
}
.mainvisual .img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -53.8666666667%;
  right: -53.8666666667%;
}
@media (min-width: 769px) {
  .mainvisual {
    aspect-ratio: 1440/836;
  }
  .mainvisual .img-tx {
    top: 23.9234449761%;
    left: 6.9444444444%;
    right: auto;
    width: 27.7777777778%;
  }
  .mainvisual .img-name {
    top: 29.4258373206%;
    left: 80.5555555556%;
    right: auto;
    width: 12.5%;
  }
  .mainvisual .img {
    left: 0;
    right: 0;
  }
}

.about-read {
  background: linear-gradient(0deg, transparent 19px, #EED1D6 19px), linear-gradient(90deg, transparent 19px, #EED1D6 19px);
  background-size: 20px 20px;
}
.about-read .body {
  padding: clamp(
        20px,
        calc(40 / 1440 * 100vw),
        40px
    ) clamp(
        20px,
        calc(60 / 1440 * 100vw),
        60px
    );
  background-color: #fff;
}
.about-read .body p {
  font-size: clamp(
        13px,
        calc(16 / 1440 * 100vw),
        16px
    );
  letter-spacing: 0.025em;
  line-height: 1.8;
}
.about-list {
  background-image: url(../img/infertility-treatment/img_bg_02.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.learning {
  background-image: url(../img/infertility-treatment/img_bg_03.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.learning .read {
  font-size: clamp(
        14px,
        calc(18 / 1440 * 100vw),
        18px
    );
  line-height: 1.8;
  letter-spacing: 0.025em;
}
@media (min-width: 769px) {
  .learning .read {
    text-align: center;
  }
}

.interview {
  background: linear-gradient(0deg, transparent 19px, #EED1D6 19px), linear-gradient(90deg, transparent 19px, #EED1D6 19px);
  background-size: 20px 20px;
}
.interview .body {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.other {
  background-image: url(../img/infertility-treatment/img_bg_03.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.other .active .body {
  padding: clamp(
        30px,
        calc(60 / 1440 * 100vw),
        60px
    ) clamp(
        30px,
        calc(80 / 1440 * 100vw),
        80px
    );
  background-color: #fff;
}
.other .active .body p {
  margin-bottom: 0;
  font-weight: bold;
}
.other .aim .body {
  padding: clamp(
        20px,
        calc(28 / 1440 * 100vw),
        28px
    );
  background-color: #fff;
}
.other .aim .body p {
  margin-bottom: 0;
}

.aside .inner {
  padding: clamp(
        64px,
        calc(120 / 1440 * 100vw),
        120px
    ) clamp(
        20px,
        calc(100 / 1440 * 100vw),
        100px
    ) clamp(
        80px,
        calc(100 / 1440 * 100vw),
        100px
    );
}
.aside .bnr {
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
.aside .bnr a {
  display: block;
}
.aside .bnr + .bnr {
  margin-top: clamp(
        17px,
        calc(73 / 1440 * 100vw),
        73px
    );
}
.aside .bnr img {
  width: 100%;
}
@media (max-width: 768px) {
  .aside .btn {
    margin-left: 3.2vw;
    margin-right: 3.2vw;
  }
}

.com-sec {
  padding: clamp(
        60px,
        calc(100 / 1440 * 100vw),
        100px
    ) 0 clamp(
        70px,
        calc(120 / 1440 * 100vw),
        120px
    );
}
.com-sec.u-m {
  padding: clamp(
        60px,
        calc(80 / 1440 * 100vw),
        80px
    ) 0 clamp(
        70px,
        calc(100 / 1440 * 100vw),
        100px
    );
}

.com-tit-01 {
  position: relative;
  width: fit-content;
  padding: clamp(
        15px,
        calc(22 / 1440 * 100vw),
        22px
    ) clamp(
        29px,
        calc(44 / 1440 * 100vw),
        44px
    );
  font-weight: bold;
  font-size: clamp(
        18px,
        calc(24 / 1440 * 100vw),
        24px
    );
  text-align: center;
  letter-spacing: 0.025em;
  color: #fff;
  background-color: #C1485B;
}
.com-tit-01::before, .com-tit-01::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-left: 4px dotted #fff;
}
.com-tit-01::before {
  left: 10px;
}
.com-tit-01::after {
  right: 10px;
}

.com-tit-02 {
  display: flex;
  flex-direction: column;
  gap: clamp(
        8px,
        calc(12 / 1440 * 100vw),
        12px
    );
}
.com-tit-02.u-center {
  align-items: center;
}
.com-tit-02 span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: clamp(
        15px,
        calc(18 / 1440 * 100vw),
        18px
    ) clamp(
        15px,
        calc(24 / 1440 * 100vw),
        24px
    );
  font-weight: bold;
  font-size: clamp(
        18px,
        calc(28 / 1440 * 100vw),
        28px
    );
  text-align: center;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
  color: #C1485B;
  background-size: auto auto;
  background-color: rgb(255, 255, 255);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(238, 209, 214, 0.5) 8px, rgba(238, 209, 214, 0.5) 10px);
}
@media (min-width: 769px) {
  .com-tit-02 span.sp {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .com-tit-02 {
    align-items: center;
  }
  .com-tit-02 span.pc {
    display: none !important;
  }
}

.com-tit-img.u-w612 {
  max-width: clamp(
        242px,
        calc(612 / 1440 * 100vw),
        612px
    );
}

.com-tx {
  font-size: clamp(
        13px,
        calc(16 / 1440 * 100vw),
        16px
    );
  line-height: 1.8;
  letter-spacing: 0.025em;
  color: #C1485B;
}

.u-m-center {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 769px) {
  .u-t-center {
    text-align: center;
  }
}

.mod-aboutlist > section {
  position: relative;
}
.mod-aboutlist > section + section {
  margin-top: clamp(
        40px,
        calc(80 / 1440 * 100vw),
        80px
    );
}
.mod-aboutlist > section:nth-of-type(odd) .img .caption {
  left: 0;
  padding: clamp(
        11px,
        calc(16 / 1440 * 100vw),
        16px
    ) clamp(
        44px,
        calc(54 / 1440 * 100vw),
        54px
    ) clamp(
        11px,
        calc(16 / 1440 * 100vw),
        16px
    ) clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
}
.mod-aboutlist > section:nth-of-type(odd) .img .caption::after {
  right: clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
}
.mod-aboutlist > section:nth-of-type(even) .img .caption {
  left: 0;
  padding: clamp(
        11px,
        calc(16 / 1440 * 100vw),
        16px
    ) clamp(
        44px,
        calc(54 / 1440 * 100vw),
        54px
    ) clamp(
        11px,
        calc(16 / 1440 * 100vw),
        16px
    ) clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
}
.mod-aboutlist > section:nth-of-type(even) .img .caption::after {
  right: clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
}
.mod-aboutlist > section .img {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}
.mod-aboutlist > section .img .caption {
  position: absolute;
  bottom: clamp(
        20px,
        calc(60 / 1440 * 100vw),
        60px
    );
  font-weight: bold;
  font-size: clamp(
        13px,
        calc(16 / 1440 * 100vw),
        16px
    );
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: #fff;
  background-color: #C1485B;
}
.mod-aboutlist > section .img .caption::after {
  content: "";
  display: block;
  position: absolute;
  top: clamp(
        8px,
        calc(10 / 1440 * 100vw),
        10px
    );
  bottom: clamp(
        8px,
        calc(10 / 1440 * 100vw),
        10px
    );
  width: 4px;
  border-right: 4px dotted #fff;
}
.mod-aboutlist > section .tx {
  margin-top: clamp(
        20px,
        calc(40 / 1440 * 100vw),
        40px
    );
  margin-bottom: 0;
  font-size: clamp(
        12px,
        calc(16 / 1440 * 100vw),
        16px
    );
  line-height: 1.8;
  letter-spacing: 0.025em;
}
.mod-aboutlist > section.no-img {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 769px) {
  .mod-aboutlist > section {
    display: flex;
    justify-content: space-between;
  }
  .mod-aboutlist > section.no-img {
    display: block;
  }
  .mod-aboutlist > section:nth-of-type(odd) .img {
    order: 1;
    left: 0;
  }
  .mod-aboutlist > section:nth-of-type(odd) .desc {
    order: 2;
  }
  .mod-aboutlist > section:nth-of-type(even) .img {
    order: 2;
    right: 0;
  }
  .mod-aboutlist > section:nth-of-type(even) .img .caption {
    left: auto;
    right: 0;
    padding: clamp(
        11px,
        calc(16 / 1440 * 100vw),
        16px
    ) clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    ) clamp(
        11px,
        calc(16 / 1440 * 100vw),
        16px
    ) clamp(
        44px,
        calc(54 / 1440 * 100vw),
        54px
    );
  }
  .mod-aboutlist > section:nth-of-type(even) .img .caption::after {
    left: clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
  }
  .mod-aboutlist > section:nth-of-type(even) .desc {
    order: 1;
  }
  .mod-aboutlist > section .img {
    width: 48.3870967742%;
  }
  .mod-aboutlist > section .desc {
    width: 46.7741935484%;
  }
}
@media (max-width: 768px) {
  .mod-aboutlist > section .img {
    margin-top: clamp(
        30px,
        calc(60 / 1440 * 100vw),
        60px
    );
  }
}

.mod-learninglist > section {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mod-learninglist > section + section {
  margin-top: clamp(
        40px,
        calc(80 / 1440 * 100vw),
        80px
    );
}
.mod-learninglist > section:nth-of-type(odd) .img {
  order: 1;
}
.mod-learninglist > section:nth-of-type(odd) .desc {
  order: 2;
}
.mod-learninglist > section:nth-of-type(even) .img {
  order: 1;
}
.mod-learninglist > section:nth-of-type(even) .desc {
  order: 2;
}
.mod-learninglist > section .img {
  position: relative;
  width: 100%;
}
.mod-learninglist > section .desc {
  width: 100%;
}
.mod-learninglist > section .tit {
  position: relative;
  display: flex;
  align-items: center;
}
.mod-learninglist > section .tit-num {
  height: clamp(
        36px,
        calc(45 / 1440 * 100vw),
        45px
    );
}
.mod-learninglist > section .tit-num img {
  width: auto;
  height: 100%;
  vertical-align: top;
}
.mod-learninglist > section .tit-tx {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(
        8px,
        calc(12 / 1440 * 100vw),
        12px
    );
  padding-left: clamp(
        54px,
        calc(72 / 1440 * 100vw),
        72px
    );
}
.mod-learninglist > section .tit-tx::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(
        29px,
        calc(39 / 1440 * 100vw),
        39px
    );
  width: 1px;
  background-color: #571F28;
}
.mod-learninglist > section .tit-tx span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: clamp(
        15px,
        calc(18 / 1440 * 100vw),
        18px
    ) clamp(
        15px,
        calc(24 / 1440 * 100vw),
        24px
    );
  font-weight: bold;
  font-size: clamp(
        18px,
        calc(28 / 1440 * 100vw),
        28px
    );
  text-align: center;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
  color: #C1485B;
  background-size: auto auto;
  background-color: rgb(255, 255, 255);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(238, 209, 214, 0.5) 8px, rgba(238, 209, 214, 0.5) 10px);
}
.mod-learninglist > section .tx {
  margin-top: clamp(
        20px,
        calc(40 / 1440 * 100vw),
        40px
    );
  margin-bottom: 0;
  font-size: clamp(
        12px,
        calc(16 / 1440 * 100vw),
        16px
    );
  line-height: 1.8;
  letter-spacing: 0.025em;
}
.mod-learninglist > section .tx > * + * {
  margin-top: clamp(
        8px,
        calc(12 / 1440 * 100vw),
        12px
    );
}
.mod-learninglist > section .tx p {
  margin-bottom: 0;
}
.mod-learninglist > section .tx > dl + dl {
  margin-top: clamp(
        4px,
        calc(6 / 1440 * 100vw),
        6px
    );
}
.mod-learninglist > section .tx > dl dd {
  margin-left: 0;
}
.mod-learninglist > section .tx > dl dd ul {
  list-style: "・";
  padding-left: 1rem;
}
@media (min-width: 769px) {
  .mod-learninglist > section:nth-of-type(even) .img {
    order: 2;
  }
  .mod-learninglist > section:nth-of-type(even) .desc {
    order: 1;
  }
  .mod-learninglist > section .img {
    width: 48.3870967742%;
  }
  .mod-learninglist > section .desc {
    width: 46.7741935484%;
  }
}
@media (max-width: 768px) {
  .mod-learninglist > section .desc {
    margin-top: clamp(
        30px,
        calc(60 / 1440 * 100vw),
        60px
    );
  }
}

.mod-interview {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-interview > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}
.mod-interview > li + li {
  margin-top: 30px;
}
.mod-interview > li .img {
  width: clamp(
        200px,
        calc(300 / 1440 * 100vw),
        300px
    );
  margin: 0 auto;
}
.mod-interview > li .desc {
  width: 100%;
  padding: clamp(
        20px,
        calc(30 / 1440 * 100vw),
        30px
    );
  line-height: 1.5;
  letter-spacing: 0.025em;
  background-color: #fff;
}
.mod-interview > li .desc p {
  margin-bottom: 0;
}
.mod-interview > li .desc p + p {
  margin-top: clamp(
        15px,
        calc(20 / 1440 * 100vw),
        20px
    );
}
.mod-interview > li .desc .tx {
  font-weight: bold;
  font-size: clamp(
        14px,
        calc(16 / 1440 * 100vw),
        16px
    );
  color: #C1485B;
}
.mod-interview > li .desc .name {
  font-size: clamp(
        12px,
        calc(14 / 1440 * 100vw),
        14px
    );
}
@media (min-width: 769px) {
  .mod-interview > li {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .mod-interview > li + li {
    margin-top: 24px;
  }
  .mod-interview > li .img {
    width: 230px;
  }
  .mod-interview > li .desc {
    width: calc(100% - 260px);
  }
}

.mod-ul-01 {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-ul-01 > li {
  position: relative;
  padding-left: clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
  padding-bottom: clamp(
        16px,
        calc(18 / 1440 * 100vw),
        18px
    );
  font-weight: bold;
  font-size: clamp(
        16px,
        calc(20 / 1440 * 100vw),
        20px
    );
  line-height: 1.6;
  letter-spacing: 0.025em;
  border-bottom: 1px solid #ddd;
}
.mod-ul-01 > li + li {
  margin-top: clamp(
        20px,
        calc(30 / 1440 * 100vw),
        30px
    );
}
.mod-ul-01 > li::before {
  content: "";
  display: block;
  position: absolute;
  top: clamp(
        9px,
        calc(12 / 1440 * 100vw),
        12px
    );
  left: 0;
  width: clamp(
        6px,
        calc(8 / 1440 * 100vw),
        8px
    );
  height: clamp(
        6px,
        calc(8 / 1440 * 100vw),
        8px
    );
  border-radius: 50%;
  background-color: #C1485B;
}

.mod-imgdesc > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.mod-imgdesc > li .img {
  width: 100%;
}
.mod-imgdesc > li .desc {
  width: 100%;
  font-size: clamp(
        12px,
        calc(16 / 1440 * 100vw),
        16px
    );
  line-height: 1.8;
  letter-spacing: 0.025em;
}
.mod-imgdesc > li .desc p {
  margin-bottom: 0;
}
.mod-imgdesc > li .desc p + p {
  margin-top: clamp(
        5px,
        calc(10 / 1440 * 100vw),
        10px
    );
}
@media (min-width: 569px) {
  .mod-imgdesc {
    gap: 0;
  }
  .mod-imgdesc > li {
    display: flex;
    justify-content: space-between;
  }
  .mod-imgdesc > li .img {
    width: 100px;
  }
  .mod-imgdesc > li .desc {
    width: calc(100% - 120px);
  }
}
@media (min-width: 769px) {
  .mod-imgdesc > li {
    display: flex;
    justify-content: space-between;
  }
  .mod-imgdesc > li .img {
    width: 196px;
  }
  .mod-imgdesc > li .desc {
    width: calc(100% - 236px);
  }
}

.is-mt40 {
  margin-top: clamp(
        20px,
        calc(40 / 1440 * 100vw),
        40px
    );
}

.is-mt60 {
  margin-top: clamp(
        30px,
        calc(60 / 1440 * 100vw),
        60px
    );
}

.is-mt70 {
  margin-top: clamp(
        40px,
        calc(70 / 1440 * 100vw),
        70px
    );
}

.is-mt80 {
  margin-top: clamp(
        40px,
        calc(80 / 1440 * 100vw),
        80px
    );
}

.is-m-center {
  margin-left: auto;
  margin-right: auto;
}

.btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(
        24px,
        calc(40 / 1440 * 100vw),
        40px
    );
  width: 100%;
  height: clamp(
        56px,
        calc(80 / 1440 * 100vw),
        80px
    );
  font-weight: bold;
  font-size: clamp(
        13px,
        calc(18 / 1440 * 100vw),
        18px
    );
  text-align: center;
  line-height: 1.5;
  text-decoration: none;
  color: #fff;
  border-radius: 60px;
  background-color: #C1485B;
}
.btn-link::after {
  content: "";
  display: block;
  width: clamp(
        32px,
        calc(40 / 1440 * 100vw),
        40px
    );
  height: clamp(
        32px,
        calc(40 / 1440 * 100vw),
        40px
    );
  background-image: url("../img/infertility-treatment/icon_toggle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.btn-link.u-w378 {
  max-width: clamp(
        264px,
        calc(378 / 1440 * 100vw),
        378px
    );
}
.btn-link:hover, .btn-link:active, .btn-link:focus {
  color: #fff;
}