@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@media screen and (min-width: 769px) {
  html {
      font-size: 93%; /* 93% */
  }
}
html {
    background-size: contain;
    background-color: #FFFAF2;
    box-sizing: border-box;
    color: #707070;
    font-size: 62.5%; /* 985% */
    letter-spacing: .07em;
    overflow-x: hidden;
    width: 100%;
}
a {
  text-decoration: none;
}
body {
    background-size: 100%;
    font-family: "Zen Maru Gothic", sans-serif, "メイリオ";
    -webkit-font-smoothing: subpixel-antialiased;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0;
    -moz-osx-font-smoothing: auto;
    overflow: hidden;
    padding: 0;
}
img {
  vertical-align: bottom;
}


/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; 
  z-index: 9999;
  color: #413C38;
}
.header > .header_container {
  height: 100px;
  display: flex;
  align-items: center;
  max-width: none;
}
.header_container {
  background: #FFFEF8;
  width: 1200px;
  padding: 0 3rem;
  margin: 0 auto;
  box-shadow: 0px 3px 10px rgba(112, 19, 24, 0.1);
  border-radius: 0px 0px 20px 20px;
}

/* ロゴ */
.area_logo_header .logo {
  display: block;
}
.area_logo_header .logo img {
  height: 86px;
  vertical-align: bottom;
}


/* ナビゲーション */
.area_nav_header {
  margin-left: auto;
  display: flex;
  font-weight: 700;
}
.area_nav_header ul {
  display: flex;
  align-items: center;
}

/* ナビゲーション　リスト */
.list_nav_header > li + li {
  margin-left: 2.5rem;
}
.list_nav_header a {
  color: #413C38;
  font-size: 1.6rem;
}
.list_nav_header a:hover {
  color: #5FBEB3;
  transition: color 0.4s;
}
.list_nav_btn {
  margin-left: 2rem;
}
.list_nav_btn a {
  color: #fff;
  font-size: 1.6rem;
  align-items: center;
  padding: .9rem 1.8rem;
  border-radius: 3rem;
}
.list_nav_btn a:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}
.list_nav_btn .btn_contact {
  background: #5FBEB3;  
}
.list_nav_btn .btn_support-membership {
  background: #DD7557;
  margin-left: 10px
  
}

/* アイコンリスト */
.list_nav_ico_header {
  display: flex;
  align-items: center;
  padding-left: 25px;
  margin-left: auto;
  border-left: 1px solid #ccc;
}
.list_nav_ico_header > li + li {
  margin-left: 10px;
}
.list_nav_ico_header a {
  display: block;
  width: 30px;
  height: 30px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ファーストビュー ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.first_view {
  background-color: #FEEA64;
  height: 80vh; 
  position: relative;
  top: -100px;
  z-index: 1;
  padding-top: 100px;
  margin-bottom: -100px;
}

/* セクション範囲 */
.container {
  position: relative;
  display: block;
  margin: auto;
  max-width: 100rem;
  padding: 1.5rem 1rem;
}
.container110 {
  position: relative;
  display: block;
  margin: auto;
  max-width: 110rem;
  padding: 1.5rem 1rem;
}
.container_about {
  position: relative;
  display: block;
  margin: auto;
  max-width: 100rem;
  padding: 1.5rem 1rem;
  left: 10%;
}

/* ニュース ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.circle-content {
  position: relative;
  z-index: 10;
}
.area_news {
  background: linear-gradient(180deg, #DD7557 0%, #E98E59 20%, #F9D2A8 52.5%);
  border-radius: 200rem 200rem 0 0 / 30rem 30rem 0 0;
  margin: -20rem -20rem 0;
  padding: 6rem 0 8rem;
}
.tit_news{
  text-align: center;
}
.stit_news {
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  margin: 1rem;
}
.area_news_category {
  -webkit-justify-content: space-between;
  justify-content: space-between;
  display: flex;
}
.news_category {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
}
.news_category li {
  border-radius: 40px;
  padding: 0.8rem 2.5rem;
  font-weight: 700;
}
.news_category a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.news_category li:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}
.news_category li:active {
  opacity: 1;
}
.category_all {
  background: #825E49;
  color: #fff;
}
.category_all._off {
  background: #fff;
  border: #825E49 2px solid;
  color: #825E49;;
}
.category_yellow {
  background: #F8B74E;
  color: #fff;
}
.category_yellow._off {
  background: #fff;
  border: #F8B74E 2px solid;
  color: #F8B74E;;
}
.category_red {
  background: #E47171;
  color: #fff;
}
.category_red._off {
  background: #fff;
  border: #E47171 2px solid;
  color: #E47171;;
}
.news_more {
  display: flex;
  position: relative;
  font-size: 2rem;
  color: #fff;
}
.news_more a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.news_more:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}
.news_more i {
  margin-right: .5rem;
}

/* ニュース　リスト*/
.list_news {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  gap: .8rem;
  color: #4C4C4C;
}
.list_news a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.list_news_item {
  width: calc(100% / 3 - .8rem);
  background: #FFFAF2;
  border-radius: 20px;
  height: 35.5rem;
  text-align: left;
  padding: 1.2rem;
}
.list_news_item:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}
.news_thumb {
  width: 100%;
  height: 21rem;
  object-fit: cover;
  display: block; /* 画像下に余白が出るのを防止（念のため） */
  border-radius: 10px;
  margin-bottom: 1rem;
}
.news_day {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.6rem;
  padding: 0.2rem 0;
}
.newslist_category {
  display: flex;
  position: relative;
  font-size: 1.6rem;
  text-align: center;
  border-radius: 40px;
  padding: 0.2rem 2.5rem;
  font-weight: 700;
}
.news_tit {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 表示する最大行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1rem;
}

/* 私たちの想い ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.area_spirit {
  padding: 10rem 0;
  position: relative;
}
.tit_spirit {
  margin-bottom: 3rem;
}
.cont_spirit {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap; /* スマホ対応用：小さくなったら折り返す */
}
.cont_spirit_img {
  flex: 1 1 45%;
  text-align: center;
}
.cont_spirit_img img {
  max-width: 100%;
  height: auto;
}
.cont_spirit_txt {
  flex: 1 1 45%;
  color: #231815;
  font-size: 1.8rem;
  font-weight: 500;
  padding-top: 3rem;
}
.h3_spirit {
  color: #DD7557;
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.cont_spirit_txt p:first-of-type {
  margin-bottom: 10rem;
}
/* ループ　*/
.loop-wrap_mission,
.loop-wrap_vision {
  position: absolute;
  left: 0;
  width: 100%;
  height: 233px;
  z-index: -1; /* ← 背面に置く */
  pointer-events: none; /* クリック無効にする（重なっても操作OK） */
}
.loop-wrap_mission {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 233px;
  top: 20rem; 
}
.loop-area1 {
  background: url("../img/loop_mission.png") repeat-x;
  width: 100%;
  height: 233px;
  animation: loop-slide 20s linear infinite;
  background-size: auto 100%; /* 高さにフィット */
}
@keyframes loop-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1345px 0;
  }
}
.loop-wrap_vision {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 233px;
  top: 45rem;
}
.loop-area2 {
  background: url("../img/loop_vision.png") repeat-x;
  width: 100%;
  height: 233px;
  animation: loop-slide 20s linear infinite;
  background-size: auto 100%; /* 高さにフィット */
}
@keyframes loop-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1160px 0;
  }
}

/* NPO法人 家庭養育支援機構について ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.area_spirit {
  padding: 10rem 0;
  position: relative;
}
.about_bg_orange {
  position: absolute;
  background: linear-gradient(270.82deg, #FFCF6B 0.97%, #FFE5C5 99.6%);
  border-radius: 0px 10rem 10rem 0px;
  width: 80%;
  padding: 10rem 0;
  color: #4C4C4C;
  z-index: 1; /* 背景のz-indexを明示的に設定 */
}
.r100{
  position: relative;
  left: 20rem;
}
.stit_about {
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  margin: 1rem 0 2rem 0;
}
.h3_about {
  position: relative;
  font-size: 3.5rem;
  font-weight: 700;
  margin: 1rem 0 2rem 0;
  z-index: 5;
}
.tit_about {
  position: relative;
  z-index: 3; /* .area_img_about (z-index: 2) より高く設定 */
}
.about_bg_orange p {
  position: relative;
  font-size: 1.6rem;
  width: 37.5rem;
  z-index: 3; /* .area_img_about (z-index: 2) より高く設定 */
  margin-bottom: 3rem;
}
/* about画像 */
.area_img_about {
  position: absolute;
  background: #FFFAF2;
  border-radius: 80rem;
  width: 85rem;
  height: 85rem;
  top: 0;
  left: 48%;
  z-index: 2; /* 背景のすぐ上に配置 */

}
.img_about {
  position: relative;
  text-align: center;
  top: 15rem;
}
/* aboutボタン */
.area_btn_about {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 50rem;
  padding: 0px;
  gap: 1.5rem;
  z-index: 3; /* 背景のすぐ上に配置 */
}
.btn_about {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; /* アイコンと文字の間隔を調整 */
  vertical-align: middle;
  background: #DD7557;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.2rem 4rem 1.2rem 4.8rem;
  border-radius: 6rem;
}
.c-iconSvg {
  display: inline-block;
  vertical-align: middle;
}
.btn_about svg {
  width: 20px;
  fill: #fff;
}
.btn_about svg {
  width: 20px;
  fill: #fff;
}
.btn_about:hover {
  background: #F4D637; /* 背景色を変更 */
  color: #fff; /* テキスト色を変更 */
  transition: background 0.5s, color 0.5s; /* スムーズな変化を追加 */
}
.btn_about:hover svg {
  transform: translateX(5px); /* 右に5px移動 */
  transition: transform 0.3s; /* スムーズな移動を追加 */
}















/* スマホ用のスタイル */
@media screen and (max-width: 768px) {
  .container_about {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .area_about_txt,
  .area_img_about {
    width: 100%;
    text-align: center;
  }
}