@charset "utf-8";
/* CSS Document */

/**************************************************
root
**************************************************/
:root {
  --base-width: 1200px;
  --base-bg: #fff;
  --base-color: #505050;

  --c-main01: #619a94;
  --c-main02: #72b2ac;
  --c-main03: #f2fefd;

  --c-sub01: #ff543f;
  --c-sub02: #ec8570;

  --c-acc01: #fffaee;
  --c-acc02: #c4a26f;
  --c-acc03: #feca00;

  --c-red: crimson;
  --c-yel: khaki;

  --ff_serif: "Noto Serif JP";
  --ff_sans: "Noto Sans JP";
  --ff_lora: "Lora";

  --transition: 0.3s;
}
@media (max-width: 520px) {
  :root {
    --base-width: 100%;
  }
}

a.logo {
  display: block;
  width: 243px;
}

/**************************************************
color
**************************************************/
/* .fc_ */
body .fc_wht {
  color: #fff;
}
body .fc_main01 {
  color: var(--c-main01);
}
body .fc_main02 {
  color: var(--c-main02);
}
body .fc_sub01 {
  color: var(--c-sub01);
}

/* .bg_ */
body .bg_wht {
  background-color: #fff;
}
body .bg_main01 {
  background-color: var(--c-main01);
}
body .bg_main02 {
  background-color: var(--c-main02);
}
body .bg_main03 {
  background-color: var(--c-main03);
}
body .bg_sub01 {
  background-color: var(--c-sub01);
}
body .bg_acc01 {
  background-color: var(--c-acc01);
}
body .bg_ptn {
  background-color: #fefffa;
}
body .bg_ptn::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url("../images/bg_ptn.svg") center center / 20px 20px repeat;
  opacity: 0.14;
  z-index: -1;
}

hr {
  background-color: var(--base-color);
}

/**************************************************
.fs
**************************************************/
body .fs15 {
  font-size: 1.5rem;
}
body .fs32 {
  font-size: 3.2rem;
}
body .fs34 {
  font-size: 3.4rem;
}
@media (max-width: 520px) {
  body .fs15 {
    font-size: 1.1rem;
  }
  body .fs32 {
    font-size: 2.1rem;
  }
  body .fs34 {
    font-size: 2.2rem;
  }
}

/**************************************************
.ff_
**************************************************/
body .ff_serif {
  font-family: var(--ff_serif);
}
body .ff_sans {
  font-family: var(--ff_sans);
}
body .ff_lora {
  font-family: var(--ff_lora);
}

/**************************************************
.tit
**************************************************/
/* .titA */
.titA,
.titA span.en {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 10px;
  text-align: center;
}
.titA span.en {
  font-size: 2.2rem;
  font-family: var(--ff_lora);
  text-transform: capitalize;
  color: var(--c-main02);
}
.titA span.en::before,
.titA span.en::after {
  content: "";
  display: block;
}
.titA span.en::before {
  --size: 75px;
  width: var(--size);
  height: var(--size);
  -webkit-mask: url(../images/icon_titA.svg) center center / contain no-repeat;
  mask: url(../images/icon_titA.svg) center center / contain no-repeat;
  background-color: currentColor;
}
.titA span.en::after {
  width: 1px;
  height: 50px;
  background-color: currentColor;
}
.titA span.jp {
  font-size: 3.2rem;
  font-weight: 600;
  font-family: var(--ff_serif);
}
@media (max-width: 520px) {
  .titA span.jp {
    font-size: 2.4rem;
  }
}

.titA span.en::before {
  animation: rotate 20s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* .titB */
.titB span.en {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 2.2rem;
  font-family: var(--ff_lora);
  text-transform: capitalize;
  color: var(--c-main02);
}
.titB span.en::after {
  content: "";
  width: 50px;
  height: 1px;
  background-color: currentColor;
}
.titB span.jp {
  font-size: 3.2rem;
  font-weight: 600;
  font-family: var(--ff_serif);
}
@media (max-width: 520px) {
  .titB span.jp {
    font-size: 2.4rem;
  }
}

.fc_wht .titB span.en,
.titB.fc_wht span.en {
  color: #fff;
}

/* .titC */
.titC {
  padding-bottom: 10px;
  font-weight: 600;
  font-family: var(--ff_serif);
  border-bottom: 1px solid var(--base-color);
}

/**************************************************
.btn_
**************************************************/
[class*="btn_"] {
  -webkit-appearance: none;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  width: fit-content;
  min-height: 50px;
  margin-inline: auto;
  padding: 10px;
  text-align: center;
  color: var(--btn_txt);
  background-color: var(--btn_bg);
  transition: var(--transition);
}
[class*="btn_"]:hover {
  color: var(--btn_bg);
  background-color: var(--btn_txt);
  opacity: 1;
}
@media (max-width: 520px) {
  [class*="btn_"] {
    min-width: 226px;
    /* width: 100%; */
    min-height: 42px;
  }
  [class*="btn_"].ml0 {
    margin-left: auto;
  }
}

.btn_A {
  --btn_txt: #fff;
  --btn_bg: var(--c-sub01);
  border: 1px solid var(--c-sub01);
}
.btn_B {
  --btn_txt: var(--c-main01);
  --btn_bg: #fff;
  border: 1px solid #fff;
}
.btn_C {
  --btn_txt: #fff;
  --btn_bg: var(--c-main01);
  border: 1px solid var(--c-main01);
}

[class*="btn_"].R,
[class*="btn_"].L {
  grid-template-columns: auto 1fr auto;
}
[class*="btn_"].R::before,
[class*="btn_"].L::after {
  content: "";
}
[class*="btn_"].R::after,
[class*="btn_"].L::before {
  content: "arrow_circle_right";
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1;
  font-size: 2.5rem;
  line-height: 1;
}

/* [class*="btn_"] span */
[class*="btn_"] span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
[class*="btn_"] span::before,
[class*="btn_"] span::after {
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  background-color: currentColor;
}
.btn_web span::before {
  --size: 30px;
  aspect-ratio: 31 / 31;
  -webkit-mask: url(../images/icon_web.svg) center center / contain no-repeat;
  mask: url(../images/icon_web.svg) center center / contain no-repeat;
}
.btn_web span::after {
  --size: 18px;
  aspect-ratio: 18 / 18;
  -webkit-mask: url(../images/icon_link.svg) center center / contain no-repeat;
  mask: url(../images/icon_link.svg) center center / contain no-repeat;
}

/**************************************************
.richtext
**************************************************/
.richtext em {
  color: var(--c-sub01);
}
.richtext a:not([href^="tel"]) {
  text-decoration: underline;
}
.richtext a:not([href^="tel"]):hover {
  text-decoration: none;
}

/**************************************************
.note_A
**************************************************/
.note_A {
  padding: 20px;
  border: 1px solid var(--c-main02);
}
@media (max-width: 520px) {
  .note_A {
    padding: 10px;
  }
}

/**************************************************
.pagination
**************************************************/
.pagination,
.pagination span,
.pagination a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination {
  gap: 10px;
}
.pagination span,
.pagination a {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  color: var(--c-main01);
  border: 1px solid var(--c-main01);
}
.pagination span.current,
.pagination a:hover {
  color: #fff;
  background-color: var(--c-main01);
}
.pagination span.dots {
  background-color: transparent;
  border: none;
}

/**************************************************
.bln_fill
**************************************************/
.bln_fill {
  --size: 20px;
  --bln-bg: var(--c-sub01);
  position: relative;
  padding: 10px;
  color: #fff;
  background-color: var(--bln-bg);
}
.bln_fill::before {
  content: "";
  position: absolute;
  width: calc(var(--size) * 1.8);
  height: var(--size);
  background-color: var(--bln-bg);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* 下 */
.bln_fill.B {
  margin-bottom: calc(var(--size) + 10px);
}
.bln_fill.B::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

/**************************************************
news
**************************************************/
/* .area_article */
.area_article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
}
@media (max-width: 520px) {
  .area_article {
    grid-template-columns: 1fr;
  }
}

/* .list_news */
.list_news {
  --gap: 20px;
}
.list_news .figure img {
  aspect-ratio: 352 / 246;
}

/* .area_info */
.area_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* .tag */
.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag span {
  display: block;
  min-width: 100px;
  padding: 2px 15px;
  font-size: 1.5rem;
  font-weight: normal;
  font-family: var(--ff_sans);
  text-align: center;
  color: #fff;
  background-color: var(--base-color);
}
.tag span[data-tag*="_diet"] {
  background-color: var(--c-main01);
}
.tag span[data-tag*="_child"] {
  background-color: var(--c-main02);
}
.tag span[data-tag*="_atopic"] {
  background-color: var(--c-acc02);
}
.tag span[data-tag*="_health"] {
  background-color: var(--c-sub02);
}

/* time */
time {
  font-size: 1.4rem;
  font-family: var(--ff_serif);
}

/* .list_category */
.list_category > li {
  padding-block: 10px;
  border-bottom: 1px solid var(--c-main02);
}
.list_category a {
  display: block;
  padding-inline: 20px;
}
.list_category ul a {
  padding-block: 5px;
}

/**************************************************
.page_header
**************************************************/
.page_header span.jp {
  font-size: 3.2rem;
  font-weight: 600;
  font-family: var(--ff_serif);
}
.page_header span.en {
  display: block;
  font-size: 2.2rem;
  font-family: var(--ff_lora);
  text-transform: lowercase;
  color: var(--c-main01);
}

/**************************************************
.card_
**************************************************/
.card_A {
  --flex: 60%;
}
.card_A .figure img {
  aspect-ratio: 3 / 2;
}