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

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src:url(../font/NotoSansCJKjp-Regular.otf) format('opentype'),
    url(../font/NotoSansCJKjp-Regular.ttf) format('truetype'),
    url(../font/NotoSansCJKjp-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 500;
  src:url(../font/NotoSansCJKjp-Medium.otf) format('opentype'),
    url(../font/NotoSansCJKjp-Medium.ttf) format('truetype'),
    url(../font/NotoSansCJKjp-Medium.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 700;
  src:url(../font/NotoSansCJKjp-Bold.otf) format('opentype'),
    url(../font/NotoSansCJKjp-Bold.ttf) format('truetype'),
    url(../font/NotoSansCJKjp-Bold.woff) format('woff');
}
body{
  font-family: 'Noto Sans Japanese',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  line-height: 1.5;/*android用*/
  -webkit-text-size-adjust: 100%;
}
body.open{
  height: 100%;
  overflow: hidden;
}
a{
  text-decoration: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

a:focus,
img{max-width: 100%;}



.hmfm_target{
  opacity: 0;
  transition: all 0.2s linear;
}
.hmfm_target.active{opacity: 1;}



.hmfm_bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hmfm_bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hmfm_body{
  position: relative;
  z-index: 1000;
}
.hmfm_wrap{
  max-width: 936px;
  margin: auto;
  padding: 0 16px;
}



.hmfm_top{
  position: relative;
  aspect-ratio: 683/242;
}
.hmfm_top div picture{
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 683/242;
  overflow: hidden;
}
.hmfm_top div picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hmfm_top div picture:nth-of-type(1) img{animation: scale1 18s linear infinite;}
.hmfm_top div picture:nth-of-type(2) img{animation: scale2 18s linear infinite;}
.hmfm_top div picture:nth-of-type(3) img{animation: scale3 18s linear infinite;}
@keyframes scale1{
  0%{
    transform: scale(1.049);
    opacity: 1;
  }
  25%{
    transform: scale(1.15);
    opacity: 1;
  }
  33.33%{
    transform: scale(1.2);
    opacity: 0;
  }
  91.66%{
    opacity: 0;
    transform: scale(1);
  }
  100%{
    opacity: 1;
    transform: scale(1.049);
  }
}
@keyframes scale2{
  0%{
    transform: scale(1);
    opacity: 0;
  }
  25%{
    opacity: 0;
    transform: scale(1);
  }
  33.33%{
    opacity: 1;
    transform: scale(1.049);
  }
  58.33%{
    opacity: 1;
  }
  66.66%{
    transform: scale(1.2);
    opacity: 0;
  }
  100%{transform: scale(1);}
}
@keyframes scale3{
  0%{
    transform: scale(1);
    opacity: 0;
  }
  58.33%{
    transform: scale(1);
    opacity: 0;
  }
  66.66%{
    opacity: 1;
    transform: scale(1.049);
  }
  91.66%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: scale(1.2);
  }
}

.hmfm_top h1{
  position: absolute;
  max-width: 1129px;
  left: calc(50% - 565px);
  top: calc(50% - 160px);
}
.hmfm_top h1 picture{
  display: block;
  width: 100%;
  aspect-ratio: 1192/321;
}
.hmfm_top h1 picture img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (width < 1129px){
  .hmfm_top h1{
    left: 0;
    top: 10%;
  }

}


.hmfm_wtbg{
  margin-bottom: 80px;
  padding: 56px 0 48px;
  background-color: #FFFFFF;
}
.hmfm_discription{
  line-height: 2;
  max-width: 800px;
  margin: 0 auto 32px;
  padding: 8px 16px;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: #066292;
  border: 2px solid #066292;
}
.hmfm_discription span{display: block;}
.hmfm_detail{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 44px;
}
.hmfm_detail dl{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  max-width: 496px;
}
.hmfm_detail dl dt{
  width: 6em;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #052F8A;
}
.hmfm_detail dl dd{
  width: calc(100% - 6em);
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #111111;
}
.hmfm_detail dl dt:nth-last-of-type(n+2),
.hmfm_detail dl dd:nth-last-of-type(n+2){margin-bottom: 18px;}
.hmfm_detail dl dd span{vertical-align: baseline;}
.hmfm_fsl{font-size: 1.625em;}
.hmfm_fss{font-size: 0.875em;}
.hmfm_fss_br{
  display: block;
  font-size: 0.875em;
}
.hmfm_fss_mg{
  margin-left: 1em;
  font-size: 0.875em;
}
.hmfm_flx{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.hmfm_flx a{
  text-decoration: underline;
  font-size: 0.875rem;
  color: #006FB9;
}
.hmfm_detail>div{
  width: 296px;
  aspect-ratio: 4/3;
}
.hmfm_entry{
  margin-bottom: 40px;
  text-align: center;
}
.hmfm_entry a{
  display: inline-block;
  max-width: 340px;
  width: 100%;
  height: 64px;
  padding-top: 12px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 1.5rem;
  color: #FFFFFF;
  border-radius: 40px;
  background: url(../img/icon_arw.svg) right 24px center no-repeat;
  background-color: #F6AC0F;
}
.hmfm_orgtxt{
  text-align: center;
  font-size: 0.875rem;
  color: #333333;
}




.hmfm_ttlh2{
  margin-bottom: 28px;
  text-align: center;
}
.hmfm_sectures{
  padding: 44px 72px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0px 0px 32px rgba(255, 255, 255, 0.32);
}
section:nth-last-of-type(n+2) .hmfm_sectures{margin-bottom: 40px;}
section:nth-of-type(3) .hmfm_sectures{margin-bottom: 124px;}
.hmfm_sectures h3{
  margin-bottom: 36px;
  text-align: center;
}
.hmfm_sectures h3 img{height: 32px;}
.hmfm_sectures h4{
  margin-bottom: 32px;
  font-size: clamp(1.125rem, 0.818rem + 1.14vw, 1.5rem);/*18-24 430-956 (コンテンツサイズ) */
  color: #24285A;
}
.hmfm_sectures h4.hmfm_center{text-align: center;}
.hmfm_secturesdetail{
  line-height: 1.75;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  color: #333333;
}
.hmfm_notes{
  margin-bottom: 40px;
  letter-spacing: 0.05em;
  color: #333333;
}
.hmfm_photo{
  width: 180px;
  aspect-ratio: 1;
}
.hmfm_photo.hmfm_round{width: 240px;}
.hmfm_photo img{
  border: 3px solid #24285A;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.5);
}
.hmfm_photo.hmfm_round img{border-radius: 100%;}
.hmfm_profile{width: 496px;}
.hmfm_nameflx{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hmfm_name{
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.094rem + 1.51vw, 2rem);/*24-32 430-960*/
  color: #333333;
}
.hmfm_profilettl{
  margin-left: 16px;
  letter-spacing: 0.05em;
  font-size: 0.625rem;
  color: #333333;
}
.hmfm_profiletxt{
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: #333333;
}



.hmfm_subttl{
  width: fit-content;
  margin: 0 auto 48px;
  padding: 4px 92px;
  letter-spacing: 0.05em;
  font-size: 1.25rem;
  font-weight: 500;
  color: #FFFFFF;
  border-radius: 24px;
  border: 2px solid #FFFFFF;
}
.hmfm_schedule{
  display: flex;
  flex-wrap: wrap;
  max-width: 560px;
  line-height: 2.25;
  margin: 0 auto 112px;
  font-size: 1.625rem;
  color: #FFFFFF;
}
.hmfm_schedule dt{
  width: 248px;
}
.hmfm_schedule dd{
  width: calc(100% - 248px);
}
.hmfm_close{text-decoration: line-through;}



.hmfm_flxad{
  display: flex;
  justify-content: space-around;
  margin-bottom: 130px;
}
.hmfm_navigater{
  max-width: 266px;
  width: 48%;
}
.hmfm_navigater figure div{
  margin-bottom: 14px;
  border-radius: 100%;
  overflow: hidden;
  aspect-ratio: 1;
}
.hmfm_navigater figcaption{
  text-align: center;
  color: #FFFFFF;
}
.hmfm_navigater figcaption p{
  margin-bottom: 14px;
  font-size: 1.25rem;
}
.hmfm_navigater figcaption span{font-size: 0.875rem;}



.hmfm_contact{
  margin-bottom: 88px;
  text-align: center;
}
.hmfm_contact p{
  margin-bottom: 24px;
  font-size: 1.625rem;
  color: #FFFFFF;
}
.hmfm_contact span a{color: #FFFFFF;}



.hmfm_org{
  margin-bottom: 160px;
  text-align: center;
  color: #FFFFFF;
}
.hmfm_org dt{font-size: 1.125rem;}
.hmfm_org dd{
  margin-bottom: 24px;
  font-size: 1.625rem;
}



.hmfm_entry.hmfm_chase{
  position: fixed;
  display: none;
  right: 80px;
  bottom: 40px;
  width: 340px;
}
.hmfm_entry.hmfm_chase a{border: 2px solid #FFFFFF;}




@media screen and (min-width:821px){
  .hmfm_flx a:hover{text-decoration: none;}
  .hmfm_entry a:hover{
    background-color: #FFFFFF;
    border: 1px solid #F6AC0F;
    color: #F6AC0F;
    background-image: url(../img/icon_arw_h.svg);
  }
  .hmfm_contact span a:hover{text-decoration: underline;}
}







/*-----------------------------------------*/
/*--------------レスポンシブ-------------*/
/*-----------------------------------------*/

@media screen and (max-width:960px){/*936px + スクロールバー + おまけ*/
  .hmfm_discription{font-size: clamp(0.875rem, 0.674rem + 0.75vw, 1.125rem);}/*14-18 428-960*/
  .hmfm_detail{display: block;}
  .hmfm_detail dl{margin: 0 auto 24px;}
  .hmfm_detail>div{margin: auto;}



  .hmfm_sectures{padding: 4.5vw 7.5vw;}
  .hmfm_secturesdetail{font-size: clamp(0.875rem, 0.774rem + 0.38vw, 1rem);}/*14-16 428-960*/
  .hmfm_notes{font-size: clamp(0.875rem, 0.774rem + 0.38vw, 1rem);}/*14-16 428-960*/


  .hmfm_schedule{
    max-width: clamp(21.25rem, 15.774rem + 20.38vw, 28rem);/*340-488 430-960*/
    font-size: clamp(1rem, 0.497rem + 1.88vw, 1.625rem);/*16-26 428-960*/
  }
  .hmfm_schedule dt{width: clamp(9rem, 3.771rem + 19.55vw, 15.5rem);}/*144-248 428-960*/
  .hmfm_schedule dd{width: calc(100% - clamp(9rem, 3.771rem + 19.55vw, 15.5rem));}



  .hmfm_contact p{font-size: clamp(1.125rem, 0.723rem + 1.5vw, 1.625rem);}/*18-26 428-960*/
  .hmfm_contact span a{font-size: clamp(0.875rem, 0.774rem + 0.38vw, 1rem);}/*14-16 428-960*/

  .hmfm_org dt{font-size: clamp(0.875rem, 0.674rem + 0.75vw, 1.125rem);}/*14-18 428-960*/
  .hmfm_org dd{font-size: clamp(1.25rem, 0.948rem + 1.13vw, 1.625rem);}/*20-26 428-960*/
}
@media screen and (max-width:820px){
  .hmfm_photo{width: 28%;}
  .hmfm_profile{width: 60%;}
}
@media screen and (max-width:428px){
  .hmfm_top{aspect-ratio: 640/438;}
  .hmfm_top div picture{aspect-ratio: 640/438;}
  .hmfm_top h1{top: 1%;}
  .hmfm_top h1 picture{aspect-ratio: 320/219;}
  .hmfm_top h1 picture img{object-fit: cover;}

  .hmfm_wtbg{
    margin-bottom: 40px;
    padding: 32px 0 40px;
  }
  .hmfm_discription{text-align: left;}
  .hmfm_discription span{display: inline;}
  .hmfm_detail dl dt{
    width: 100%;
    font-size: 0.875rem;
  }
  .hmfm_detail dl dt:nth-last-of-type(n+2){margin-bottom: 0;}
  .hmfm_detail dl dd{
    width: 100%;
    font-size: 0.875rem;
  }
  .hmfm_entry a{
    max-width: 280px;
    height: 48px;
    padding-top: 9px;
    font-size: 1.125rem;
  }



  .hmfm_ttlh2{height: 28px;}
  .hmfm_ttlh2 img{height: 100%;}

  .hmfm_sectures{padding: 24px 16px;}
  section:nth-of-type(3) .hmfm_sectures{margin-bottom: 80px;}
  .hmfm_sectures h3{
    height: 20px;
    margin-bottom: 28px;
  }
  .hmfm_sectures h3 img{height: 100%;}
  .hmfm_sectures .hmfm_flx{flex-wrap: wrap;}
  .hmfm_photo{
    width: 48%;
    margin: 0 auto 8px;
  }
  .hmfm_profile{width: 100%;}
  .hmfm_name{width: 100%;}
  .hmfm_profilettl{margin: 0 0 16px;}
  section:nth-of-type(2) .hmfm_sectures .hmfm_profile{display: contents;}
  section:nth-of-type(2) .hmfm_sectures .hmfm_profile h4 img{width: 88%;}



  .hmfm_schedule{margin-bottom: 80px;}
  .hmfm_subttl{margin-bottom: 32px;}


  .hmfm_flxad{
    justify-content: space-between;
    margin-bottom: 80px;
  }
  .hmfm_navigater figcaption{font-size: 0.875rem;}
  .hmfm_navigater figcaption p{font-size: 1.125rem;}
  .hmfm_navigater figcaption span{font-size: 0.75rem;}


  .hmfm_contact p span{display: block;}


  .hmfm_entry.hmfm_chase{
    right: calc(50% - 140px);
    bottom: 0;
    width: 280px;
  }
  }