@charset"UTF-8";

/*============
UnderArticle_Header
==============*/
.underArticle_header{
  background-image: url(../image/TxtbackImg/BackImgTxt.png);
  background-size: 100%;
  background-repeat: no-repeat;
  PADDING: 35% 0 35%;
}

.underArticleHeader_title{
  color: var(--primary-brown);
  text-align: center;
  font-family: "Kaisei Opti";
  font-size: 2.3rem;
  font-weight: 700;
}

.underArticleHeader_subitle{
  color: var(--primary-maingreen);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}

/*UnderArticle_Header-PC 769px*/
@media screen and (min-width: 769px) {
.underArticle_header{
  background-image: url(../image/TxtbackImg/backimgTxt-PC.png);
  background-position: center;
  padding: 24% 0 23%;
}

.underArticleHeader_title{
  font-size: 4rem;
}

.underArticleHeader_subitle{
  font-size: 2.4rem;
}
}/*UnderArticle_Header-PC 769px*/

/*============
Overview
==============*/
.overviewTitlImg_PC_yellow{
  display: none;
}

.overviewTitlImg_PC_pink{
  display: none;
}

.overview{
  padding: 10px 5.3%;
}

.overviewTitle{
  color: var(--primary-brown);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
  position: relative;
  text-align: center;
}

.overviewTitle::after{
  position: absolute;
  content: '';
  width: 250px;
  height: 32px;
  display: inline-block;
  background-image: url(../image/Bird/UnderBird.png);
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -50px;
  left: 16%;
}

.greenDot{
  text-emphasis: filled circle var(--primary-maingreen);
}

.overviewTxt{
  margin-top: 80px;
  color: var(--primary-brown);
  font-size: 1.4rem;
}

.br_pc{
  display: none;
}

/*Overview-PC 769px*/
@media screen and (min-width: 769px) {
.br_pc{
  display: block;
}

.overviewTitle{
  font-size: 3rem;
  margin-top: -100px
}

.overviewTxt{
  font-size: 1.8rem;
  padding: 58px 25%;
  margin-top: 0;
}

.overviewTitleBox{
  display: flex;
  align-items: center;
  justify-content: center;
}

.overviewTitlImg_PC_yellow{
  display: block;
  width: 8%;
  transform:scale(-1,1) rotate(30deg);
  margin-right: 5%;
  margin-top: -70px;
}
  
.overviewTitlImg_PC_pink{
  display: block;
  width: 8%;
  transform: rotate(30deg);
  margin-left: 5%;
  margin-top: -70px;
}

.overviewTitle::after{
  display: none;
}
}/*Overview-PC 769px*/

/*============
detail
==============*/
.detail{
  padding: 30px 5.3% 20px;
}

.menberPhot{
  border-radius: 10px;
}

/*menberPhot写真ふわっと表示*/
.menberPhot{
  opacity: 0; /* 最初は非表示にしておく */
  transition: all 2s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.menberPhotfadeIn {
  opacity: 1;
}
/*menberPhotふわっと表示end*/

.detail-listItem{
  display: flex;
  gap: 10px;
  margin-top: 25px;
  align-items: center;
}

.detail-listTitle{
  color: var(--primary-brown);
  font-size: 1.4rem;
  font-weight: 400;
  background-color: #E8CBC5;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 2;
  border-radius: 10px;
}

.detail-listTxt{
  color: var(--primary-brown);
  font-size: 1.4rem;
  font-weight: 400;
}

/*detail PC 769px*/
@media screen and (min-width: 769px) {
.detail{
  display: flex;
  padding: 30px 13%;
  align-items: center;
  gap: 40px;
  justify-content: center;
}

.menberPhot{
  width: 50%;
}

.detail-listItem{
  margin-top: 45px;
  gap: 40px;
}

.detail-listTitle{
  font-size: 1.6rem;
  width: 100px;
  height: 43px;
  padding: 5px 0;
}

.detail-listTxt{
  font-size: 1.6rem;
}
}/*detail PC 769px*/

/*============
Message
==============*/
/*JS鳥あしらいyellow*/
.message{
  margin-top:40px;
  position: relative;
}

.image-container {
  overflow: hidden;
  width: 100%;
  height: 40vh;
  position: absolute;
  z-index: 50;
  top:-10%;
}
.jsyellowBird {
  width: 13%;
  height: auto;
  transform: translateX(-100%); /* 初期位置を左に設定 */
  opacity: 0;
  transition: transform 5s ease, opacity 1s ease; /* エフェクトの速度を調整 */
}

.image-container.visible .jsyellowBird {
  transform: translate(100vw,100px); /* 表示位置 */
  opacity: 1;
}

.image-container.hidden .jsyellowBird {
  transform: translateX(100%); /* フェードアウト時の位置 */
  opacity: 0;
}

/*JSあしらい鳥Pink*/
.image-container2 {
  overflow: hidden;
  width: 100%;
  height: 40vh;
  position: absolute;
  z-index: 50;
  top: 80%;
}

.jspinkbutterfly {
  width: 13%;
  height: auto;
  transform: translateX(100vw); /* 初期位置を右に設定 */
  opacity: 0;
  transition: transform 5s ease, opacity 1s ease; /* エフェクトの速度を調整 */
}

.image-container2.visible .jspinkbutterfly {
  transform: translate(-100%,100px); /* 表示位置 */
  opacity: 1;
}

.image-container2.hidden .jspinkbutterfly {
  opacity: 0;
}

.message-contents{
  background-color: #FFF;
  padding: 0 5.3%;
}

.messageItem{
  margin-top: 30px;
}

.cloudBackImg-PC{
  display: none;
}

.cloudBackImg-PCbutt{
  display: none;
}

.message-title{
  color: var(--primary-brown);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.message-txt{
  margin-top: 20px;
  color: var(--primary-brown);
  font-size: 1.4rem;
}

.message-sign{
  margin-top: 15px;
  text-align: end;
  color: var(--primary-brown);
  font-size: 1.4rem;
}

/*Message PC 769px*/
@media screen and (min-width: 769px) {
/*JS鳥あしらyellow*/
.jsyellowBird {
  width: 6%;
  height: auto;
  transform: translateX(-100%); /* 初期位置を左に設定 */
  opacity: 0;
  transition: transform 10s ease, opacity 1s ease; /* エフェクトの速度を調整 */
}

/*JSあしらい鳥pink*/
.image-container2 {
  overflow: hidden;
  width: 100%;
  height: 60vh;
  position: absolute;
  top: 80%;
}

.jspinkbutterfly {
  width: 6%;
  height: auto;
  transform: translateX(100vw); /* 初期位置を右に設定 */
  opacity: 0;
  transition: transform 10s ease, opacity 1s ease; /* エフェクトの速度を調整 */
}

.image-container2.visible .jspinkbutterfly {
  transform: translate(-100%,200px); /* 表示位置 */
  opacity: 1;
}
.image-container.visible .jsyellowBird {
  transform: translate(100vw,300px); /* 表示位置 */
  opacity: 1;
}

.image-container.hidden .jsyellowBird {
  transform: translateX(100%); /* フェードアウト時の位置 */
  opacity: 0;
} 

.message{
  margin-top: 60px;
}

.image-container {
  overflow: hidden;
  width: 100%;
  height: 60vh;
  position: absolute;
  top: -20%;
}

.cloudBackImg{
  display: none;
}

.cloudBackImg-PC{
  display: block;
}

.message-contents{
  padding: 0 6.9%;
}

.message-title{
  font-size: 3rem;
}

.message-txt{
  font-size: 1.6rem;
  padding: 0 27%;
}

.message-sign{
  font-size: 1.6rem;
  padding: 0 27%;
}

.cloudBackImg-PCbutt{
  display: block;
}
}/*Message PC 769px*/


/*============
underFooter
==============*/
.underFooter{
  margin-top: 50px;
}

.underFooterhead{
  width: 100%;
}

.underFooterhead-pc{
  display: none;
}

/*underFooter PC 769px*/
@media screen and (min-width: 769px) {
.underFooterhead-pc{
  display: block;
}

.underFooterhead{
  display: none;
}

.footer__group{
  margin-top: 50px;
}
}/*underFooter PC 769px*/