/*------------------
  header & footer
--------------------*/
/* header */
@media (min-width: 768px) {
  .header--medium {
    height: 79px;
  }
}
@media (max-width: 767px) {
  .header--medium {
    height: 59px;
  }
}
body .header__wrap {
    border-top-color: #00a33e;
}
/* footer*/
body .footer__wrap--bottom {
    background-color: #f2f2f2;
}
body .footer__bottom {
  border-top-color: hsla(0, 0%, 80%, 0.30);
}
body .footer__bottom--text p{
    color: #666;
}
/* footer copyright */
.footer__pageTopBtn .footer__pageTopBtnImage {
    transform: rotate(0deg);
    width: 24px;
    height: auto;
}
body .footer__bottom--copyright {
    color: #666;
}

/*------------------
  main
--------------------*/
/* common */
html body{
  font-family: "Meiryo UI", "メイリオ", Meiryo, "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;/*family.cssに少し詳細度勝ってるのでok*/
}
/* layout */
@media (min-width: 768px) {
  .footer,
  .container {
    min-width: auto;/*TB幅以上のときの修正*/
  }
}
.family__contentInner{
  margin: 0 auto;
  padding: 30px 0 30px;
  max-width: 996px;
  background-color: #fff;  
}
@media (min-width: 768px) {
  .family__contentInner{
    padding: 40px 0 60px;
  }
  .family__bgColor-contrast.family__contentInner{
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  .family__mainContent {
    margin: 0 auto 50px;
  }
}
.headline{
  padding: 0 18px;
}
@media (min-width: 768px) {
  .headline {
    padding: 0 90px;
  }
}
.family__text{
  font-size: 16px;
}
.family__text--small{
  font-size: 12px;
}
.family__text--brandColor{
  color: #00a33e;
}
.family__text--br{
  display: block;
}
.family__textLink{
  color: #003894;
}
.family__bgColor-contrast{
  background-color: #f5f5f5;
}
@media (min-width: 768px) {
  .family--bgColor {
    background-color: #f5f5f5;
  }
}
.family__heading{/*修正*/
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 12px;
  padding: 0 18px;
}
@media (min-width: 768px) {
  .family__heading{
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    /* padding: 0 198px; */
  }
}
.family__contentImgWrap{
  margin: 0 auto 20px;
  width: 150px;
  height: auto;
}
.family__contentText{
  font-size: 16px;
  margin: 0 0 12px;
  /* margin: 0 0 8px; */
}
/* .family__contentText:has(+ .family__contentText) {
  margin-bottom: 0;
} */
/* .family__contentText + .family__contentText{
  margin: 0 0 8px;
} */
/* button */
.family__button{
  display: block;
  padding: 13px 16px;  
  width: 100%;  
  max-width: 384px;  
  border-radius: 27px;
  color: #fff;
  background-color: #003894;
  font-family: "M PLUS Rounded 1c",sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;  
  transition: opacity 0.4s ease;
}
.family__button--brandColor{
  background-color: #00a33e;
}
.family__buttonWrap{
  display: flex;
  align-items: center;
  flex-direction: column;  
  margin: 0 auto 24px;
  /* padding: 0 20px; */
  gap: 16px;
}
.family__buttonSub{
  display: inline-block;
  max-width: 384px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 27px;
  font-family: "M PLUS Rounded 1c",sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  cursor: pointer;  
  transition: opacity 0.4s ease;
}
.family__buttonSub--brandColor{
  border: 1px solid #00a33e;
  color: #00a33e;
}
.family__buttonSubWrap{
  margin: 0 0 8px;
}
/* mv */
.family__mvInner{
  margin: 0 auto;

  max-width: 996px; 
}
@media (min-width: 768px) {
  .family__mvInner{
    padding: 0px 0 35px;
  }
}
.family__mvBackgroundArea {
  position: relative;
}
.family__mvBackground{
  height: clamp(450px, 60vh, 600px);/*最小、基準、最大*/
  overflow: hidden;
}
.family__heroTrack {
  display: flex;
  height: 100%;
  width: max-content;
  animation: loopSlide 60s linear infinite;
  will-change: transform;
}
.family__heroTrack img{
  height: 100%;
  width: auto;
  flex-shrink: 0;
}
@keyframes loopSlide {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-50%);
  }
}
.family__hero.is-paused .family__heroTrack {
animation-play-state: paused;
}
.family__mvMessage{
  max-width: 342px;
  width: 90%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  filter:drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}
@media (min-width: 768px) {
  .family__mvMessage{
    max-width: 450px;
    top: 10%;
  }
}
.family__mvBenefit{
  max-width: 100px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 75%;
}
.family__mvButton{
  width: 273px;
  padding: 0;
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .family__mvButton{
    bottom: 40px;
  }
}
.family__mvButton .family__button{
  border: solid 3px #fff;

}
.family__mvArea{
  padding: 25px 0 25px;
}
@media (min-width: 768px) {
  .family__mvArea{
  padding: 35px 0 35px;
  }
}
#flow,#category,#faq,#summary{
  scroll-margin-top: 50px;
}
.family__nav{
  display: flex;
  gap: 8px;
  padding: 0 18px 50px;
  padding: 0 18px 0;
}
.family__navText{
  color: #666;
  font-size: 14px;
}
.family__navBox{
  flex: 1;/*親を均等に分割*/
}
.family__navBox:not(:first-child)::after{
  content: "";
  position: relative;
  display: block;
  top: 0;
  left: -4px;
  width: 1px;
  height: 100%;
  background: #00a33e;
  transform: translateY(-100%);
}
.family__navLink{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.family__navLink img{
  margin: 0 0 4px;
}
.family__banner{
  padding: 0 18px;
  margin: 0 auto 6px;
  max-width: 600px;
}
@media (min-width: 768px) {
  .family__banner{
    padding: 0;
  }
}
.family__bannerText{
  font-weight: bold;
  text-align: center;
	padding: 0 18px;
	margin: 0 auto;
	max-width: 600px;
}
@media (min-width: 768px) {
	.family__bannerText{
		padding: 0;
	}
  .family__bannerLink{
    font-size: 18px;
  }  
}
.family__introduction{
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 768px) {
  .family__introduction{
    flex-direction: row;
    max-width: 100%;
    padding: 0 6px;
  }
}
.family__introductionTitle{
  font-size: 18px;
  font-weight: bold;
}
.family__introductionBox{
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.family__introductionImgWrap{
  flex-shrink: 0;
}

.family__introductionImgWrap img{
  width: 100%;
  height: auto;
}
/* process */
.family__processContent{
  padding: 0 0 20px;
  width: 100%;
  position: relative;
}
.family__processHeading{
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 12px;
}
.family__processText{
  font-size: 16px;
  margin: 0 0 8px;
}
.family__processText:has(+ .family__processText) {
  margin-bottom: 0;
}
.family__processTextBox{
  margin: 0 0 8px;
}
.family__processItem{
  display: flex;
  padding: 0 18px;
  max-width: 600px;
  margin: 0 auto;  
}
@media (min-width: 768px) {
  .family__processItem{
    padding: 0;
  }
}
.family__processItem:last-child .family__processContent{
  padding: 0;
}
.family__processMarker{
  margin: 0 12px 0 0;
}
.family__processMarker::before{
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00a33e;
  position: relative;
  top: 0.35em;
  left: 0;
  display: block;
}
.family__processMarker::after{
  content: "";
  position: relative;
  left: 50%;
  width: 6px;
  height: 100%;
  background: #00a33e;
  display: block;
  transform: translateX(-50%);
  z-index: 2;
  top: 0;
}
.family__processItem:last-child .family__processMarker::after {
  height: 85%;
}
/* category */
.family__category{
  padding: 0 18px 30px;
  max-width: 600px;
  margin: 0 auto;  
}
.family__categoryInfo{
  max-width: 600px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 768px) {
  .family__category{
    padding: 0 0 42px;
  }
  .family__categoryInfo{
    padding: 0;
  }
}
.family__categoryImgWrap{
  margin: 0 auto 20px;
  /* width: 232px; */
  height: auto;
}
@media (min-width: 768px) {
  .family__categoryImgWrap{
    margin-bottom: 24px;
  }
}
.family__categoryGrid{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 0px;
  max-width: 600px;
  padding: 0 18px;
}
.family__categoryGridItem{
  width: calc(100% / 2 - 10px);
  display: flex;
  align-items: center;
  padding: 0 0 12px;
}
.family__categoryGridItemImg{
  width: 100%;
  display: block;
  border-radius: 50%;
  border: 1px solid #ccc;  
}
.family__categoryGridItemImgWrap{
  width: 34px;
  height: 34px;

  margin: 0 10px 0 0;
  flex-shrink: 0;
}
summary{
  list-style: none;
  cursor: pointer;
  position: relative;
}
.family__categoryReadMore{
  text-align: center;
}
.family__categoryReadMore summary{
  margin: 18px 0 0;
  color: #003894;
  font-size: 16px;
}
@media (min-width: 768px) {
  .family__categoryReadMore summary{
    margin: 50px 0 0;
  }
}
/* デフォルトの三角を消す */
.family__categoryReadMore summary::-webkit-details-marker {
  display: none;
}
/* 開いたら summary 自体を消す */
.family__categoryReadMore[open] summary {
  display: none;
}
/* slide */
.family__service{
  padding-bottom: 16px;
}
.family__serviceHeading{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .family__serviceTitle{
    text-align: center;
  }
}
.family__serviceContent{
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 0 18px;
}
@media (max-width: 767px) {
  .family__serviceContent{
    scrollbar-width:none;
  }
}
@media (min-width: 768px) {
  .family__serviceContent{
    padding-bottom: 24px;
  }
}
.family__serviceContentBox{
  padding: 20px;
  background-color: #fff;
  flex: 0 0 254px;
  border-radius: 12px;
}
.family__serviceContent::after {
  content: "";
  flex: 0 0 100px; 
}
.family__serviceContentTxt{
  font-size: 14px;
}
/* safe */
.family__safe{
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 18px;
  gap: 20px;  
}
.family__safeHeading{
  font-weight: bold;
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 16px;
  text-align: center;
}
.family__safeBox .family__heading{
  font-size: 16px;
  margin-bottom: 8px;
  text-align: center;
}
.family__safeBox{
  flex: 1;
}
.family__safeBoxImg{
  max-width: 150px;
  width: 58%;
  height: auto;
  margin: 0 auto 8px;
}
@media (min-width: 768px) {
  .family__safe{
    padding: 0;
  }
  .family__safeBoxImg{
    max-width: 200px;
    width: auto;
    margin-bottom: 16px;
  }
}
.family__safeText{
  font-size: 14px;
}
/* faq */
.family__faq{
  padding: 0 18px 30px;
  max-width: 600px;
  margin: 0 auto;  
}
@media (min-width: 768px) {
  .family__faq{
    padding: 0;
  }
}
.family__faqQestion{
  padding: 0 20px 0 0;
  color: #666;
  font-size: 16px;
}
.family__faqAnswer{
  color: #666;
  font-size: 14px;
}
.family__faqAnswerBox{
  padding: 14px 0 0 10px;
}
.family__faq summary::after{
  content:"";
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  transform: translateY(-30%) rotate(135deg);
  position: absolute;
}
.family__faqBox[open] summary::after {
  transform: translateY(-70%) rotate(315deg);
}
.family__faqBox{
  border-top: 1px solid #ccc;
  padding: 18px 22px 18px 16px;
}
.family__faqBox:last-child{
  border-bottom: 1px solid #ccc;
}
/* summary */
@media (min-width: 768px) {
  .family__summary{
    padding-bottom: 0;
  }
}
.family__summaryTextArea{
  margin: 0 0 12px;
}
.family__summaryTitle{
  font-size: 18px;
  text-align: center;
  color: #666;
}
.family__summaryHeading{
  margin:0 0 4px;  
  font-weight: bold;
  color: #666;
  font-size: 12px;
}
.family__summaryContent{
  max-width: 600px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 768px) {
  .family__summaryContent{
    padding: 0;
  }
}
.family__summaryText{
  color: #666;
  font-size: 12px;
}
.family__summaryText--bold{
  font-weight: bold;
}
/* modal */
@media  (max-width: 767px) {
  .modal__dialog--wide{
    width: 90%;
  }
}
.familyModal__content{
  text-align: center;
}
@media (min-width: 768px), print {
  .modal__dialog .modalContent {
    padding: 112px 48px 68px;
  }
  .modal__dialog .modalContent:has(.familyModal__title) {
    padding: 30px 48px 50px;
  }
}
.familyModal__contentBox{
  margin: 0 0 30px;
}
.familyModal__title{
  font-family: "M PLUS Rounded 1c",sans-serif;
  font-size: 14px;
  margin: 0 0 24px;
  font-weight: bold;
}
.familyModal__title--center{
  text-align: center;
}
.familyModal__imgWrap{
  max-width: 186px;
  margin: 0 auto;
  padding: 0 0 24px;
}
.familyModal__text{
  font-family: "M PLUS Rounded 1c",sans-serif;
  font-size: 14px;
  margin: 0 0 8px;
}
.familyModal__step{
  margin: 0 0 8px;
}
.familyModal__closeText{
  color: #666;
}
.familyModal__text:has(+ .familyModal__note) {
  margin-bottom: 0;
}
.familyModal__note + .familyModal__text {
  margin-top: 8px;
}