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

.item01{ margin:0; padding: 0; width: 100%; text-align: center; color: #FFFFFF;
  font-family: 'Shippori Mincho B1', 'Noto Sans JP' , sans-serif;
  font-weight: 500; font-size: 172%; letter-spacing: 0; line-height: 1.7;top: 160px;
  position: absolute; }

@media ( min-width: 480px ) {
  header.hc{ display: none !important;}
  .billboard{ margin:0; padding: 0 0 66.66% 0; background: #000000; position: relative; overflow: hidden;}
  .billboard .overlay{ margin:0 auto; padding: 0; position: absolute; top: 0; left: 0; right: 0; width: 1000px; height: 100%; background: none; display: flex; justify-content: center; align-items: center;}
  .billboard .item01{ margin: 0; padding: 0; color: #FFFFFF;
  font-family: 'Shippori Mincho B1', 'Noto Sans JP' , sans-serif;
  font-weight: 500; font-size: 342%; letter-spacing: 0.15em; line-height: 1.7; text-align: center;}
  .billboard .item02{ margin: 0; padding: 0; position: absolute; top: 1.5rem; left: 1.0rem;}
  .item01 {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: 'Shippori Mincho B1', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 342%;
    letter-spacing: 0.15em;
    line-height: 1.7;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 幅を確保 */
}
  /*.vegas-content{ padding: 0 0 66.66% 0 !important;}*/
}
@media screen and ( max-width: 480px ) {
  html,body{ width: 100%; height: 100%; position: relative;}
  header.lhc{ display: none !important;}
  .billboard{ margin:0; padding: 0; position:relative; width: 100%; height: calc( 100% - 120px); }
  .vegas-content-scrollable {
    margin-top: 80px; 
  }
  .billboard .overlay{ margin:0; padding: 0; position: absolute; top: 0px; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
  .billboard .item01{ margin:0; padding: 0; width: 100%; text-align: center; color: #FFFFFF;
  font-family: 'Shippori Mincho B1', 'Noto Sans JP' , sans-serif;
  font-weight: 500; font-size: 172%; letter-spacing: 0; line-height: 1.7;top: 160px;
  position: absolute; }
  .billboard .item02{ margin: 0; padding: 0; position: absolute; top: 1.0rem; left: 0.5rem; max-width: 80%; }
  .headcopy{ margin-top: 2.0em;}
}


.event .mb{ padding-top: 0;}
.event .articles{ display: flex; margin: 0; gap: 0 2%; padding: 0; justify-content: space-between; flex-wrap: wrap;}
.event .articles article{ flex: 0 0 23.5%; margin: 2.0em 0 0 0; padding: 0 0 1.0em 0; background: rgba( 0,51,66,0.1); }
.event .articles article a{ display: block; text-decoration: none;}
.event .articles article figure{ display: block; margin: 0; padding: 56.25% 0 0 0; background: no-repeat center center / cover; position: relative;}
.event .articles article figure .category{ display: inline-block; position: absolute; top: 0.5em; left: 0.5em; font-size: 86%; background: #C9BC9C; color: #000000; padding: 0.1em 0.5em; line-height: 1.5; }
.event .articles article figure .new{ display: inline-block; position: absolute; top: 0.5em; right: 0.5em; font-size: 86%; background: #FF0000; color: #FFFFFF; padding: 0.1em 0.5em; line-height: 1.5; }
.event .articles article figure .status{ display: inline-block; position: absolute; top: 0; left: 0; font-size: 86%; padding: 0.1em 0.5em; line-height: 1.5; }
.event .articles article p{ margin: 1.0em 1.0em 0 1.0em; padding: 0; font-size:100%; font-weight: bold; line-height: 1.5;}
.event .excerpt p {color: #999;font-size: 12px !important;font-weight: normal !important;}


.concept{ margin:0; padding: 0; background: rgba(0,51,66,0.15);}
.concept .block{ display: flex; justify-content: space-between; align-items: center;background: rgba(255,255,255,0.6); padding: 5px;margin-top: 1.5em;}
.concept .block figure{ margin: 0; flex: 0 0 500px;}
.concept .block div{ margin: 0; flex: 0 0 450px;}
.concept .block div h3{ margin: 0; font-size: 214%; font-weight: bold;}
.concept .block div p{ font-size: 114%;}

.howto{ margin:0; padding: 0 0 2.0em 0;; background: rgba(0,51,66,0.15);}
.howto .mb{ }
.howto ul{ margin:0; padding: 0; display: flex; gap: 0 1%; flex-wrap: wrap;}
.howto ul li{ width: 24.25%;}
.howto a{ display: flex; align-items: center; text-decoration: none; padding: 0.5em 0.5em; border: solid 1px #231815; height: 100%; border-radius: 0.3rem;}
.howto a p{ margin:0; padding: 0; background: #A4937B; display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; color: #FFFFFF; font-weight: bold; font-size: 186%;}
.howto a div{ margin: 0 0 0 0.5em; padding: 0; }
.howto a div span:nth-child(1){ font-size: 116%; display: block; line-height: 1.3;
  font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.howto a div span:nth-child(2){ font-size: 100%;}
.howto .howto_story a h3{ flex-grow: 20;}
.howto .howto_story a h3 span:nth-child(1){ text-align: center; font-size: 200%;}
.howto .howto_story a h3 span:nth-child(2){ display: block; text-align: center; font-size: 136%;}
@media ( max-width: 480px ) {
  .howto ul{}
  .howto ul li{ flex: 0 0 49.5%; margin: 0.5rem 0 0 0;}
  
  .howto a{ display: flex; align-items: center; text-decoration: none; padding: 0.5em; border: solid 1px #231815;}
  .howto a p{ margin:0; padding: 0; flex: 0 0 30px; background: #A4937B; display: flex; width: 30px; height: 30px; justify-content: center; align-items: center; color: #FFFFFF; font-weight: bold; font-size: 128%;}
  .howto a div{ margin: 0 0 0 0.7em; flex: 1 1; padding: 0; line-height: 1.2;}
  .howto a div span:nth-child(1){ font-size: 100%; display: block;
  font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
  .howto a div span:nth-child(2){ font-size: 73%;}  
  
  .howto .howto_story a h3{ flex-grow: 11;}
  .howto .howto_story a h3 span:nth-child(1){ font-size: 100%; text-align: left;}
  .howto .howto_story a h3 span:nth-child(2){ font-size: 73%; text-align: left;}
}

.scontact{ margin: 0; padding: 0; }
.scontact a{ height: 210px; display: flex; justify-content: center; align-items: center; background: url("../jpg/img-scontact01.jpg") no-repeat center center / cover;}
.scontact a img{ display: block;}

.works{}
.works .articles{ display: flex;justify-content: flex-start;flex-wrap: wrap; margin: 0 1.0em;gap: 1em;}
.works .articles article{ flex: 0 0 31%; background: rgba(0,51,66,0.1); margin: 2.0em 0 0 0; padding: 0 0 1.0em 0; }
.works .articles article a{ display: block; text-decoration: none;}
.works .articles article figure{ display: block; margin: 0; padding: 60% 0 0 0; background: no-repeat center center / cover;}
.works .articles article p{margin: 0.5em 0.5em 0 0.5em; font-size: 108%; font-weight: bold; line-height: 1.5;width: 100%;}


.voice{}
.voice .articles{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 1.0em;}
.voice .articles article{ flex: 0 0 31%; background: rgba(0,51,66,0.1); margin: 2.0em 0 0 0; padding: 0 0 1.0em 0; }
.voice .articles article a{ display: block; text-decoration: none;}
.voice .articles article figure{ display: block; margin: 0; padding: 60% 0 0 0; background: no-repeat center center / cover;}
.voice .articles article h3{ margin: 0.5em 0.5em 0 0.5em; font-size: 108%; font-weight: bold; line-height: 1.5;}
.voice .articles article p{ margin: 1.0em 1.0em 0 1.0em; padding: 0; font-size: 73%; line-height: 1.5;}

.staff{ background: #003342; margin-top: 2.0em;}
.staff .mb{ padding: 1.0em 0; display: flex; justify-content: space-between; align-items: center;}
.staff .mb div{ margin: 0; flex: 0 0 430px; text-align: center;}
.staff .mb div .title{ margin: 0.5em 0 0 0; font-size: 235%; line-height: 1.5; color: #FFFFFF; letter-spacing: 0.05em;}
.staff .mb figure{ margin: 0; padding: 0; flex: 0 0 570px;}
.staff .mb figure img{ display: block;}

.about{ background: rgba(0,51,66,0.2); padding: 2.0rem 0; }
.about .section-title{ margin-top: 0;}
.about .mb{ display: flex; justify-content: space-between; margin-top: 0; padding: 1.0em 0; flex-direction: row-reverse; align-items:flex-start; }
.about .mb .figure{ display: block; margin: 0; flex: 0 0 475px; align-self: stretch; }
.about .mb .figure a{ display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; height: 100%; background: url("../jpg/bg_movielink.jpg") no-repeat center center / cover; position: relative;}
.about .mb .figure a::after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 0;}
.about .mb .figure a img{ display: block; max-width: 80%; max-height: 90%; z-index: 2;}
.about .mb .menu{ margin: 0; flex: 0 0 465px; }
.about .mb ul{ border-top: solid 1px #000000;}
.about .mb ul *{ margin-top: 0;}
.about .mb ul li{ margin:0; padding: 0; border-bottom: solid 1px #000000;}
.about .mb ul li a{ display: flex; padding: 0.5em 0; align-items: center; text-decoration: none;}
.about .mb ul li a p{ color: #FFFFFF; font-size: 200%; font-weight: bold; margin-right: 1.0em;}
.about .mb ul li a h3{ font-size: 135%; font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
@media screen and ( max-width: 480px ) {
  /*
  .about .mb{ flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-start;}
  .about .mb figure{ margin: 0; flex: 0 0 100%;  }
  .about .mb>div:nth-child(1){ margin: 0; flex: 0 0 100%; }
  */
  .works .articles article p {
    display: inline-block;
    white-space: nowrap;
  }
  .about .mb{ display: block;}
  .about .mb .figure{ margin: 1.0rem 0 0 0;}
  
}

.info{ margin:0; padding: 0;}
.info .mb{ padding: 0; display: flex; gap: 2%; }

.info .blog{ flex: 0 0 48%; min-width: 0; }
.info .hideto_youtube{ flex: 0 0 48%;}

.info .hideto_iedukuri{ flex: 0 0 48%; min-width: 0; margin: 2.0em 0 0 0; }
.info .hideto_iedukuri .figure{ display: block; margin: 0; width: 100%; align-self: stretch; }
.info .hideto_iedukuri .figure a{ display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; height: 100%; background: url("../jpg/bg_movielink.jpg") no-repeat center center / cover; position: relative;}
.info .hideto_iedukuri .figure a::after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 0;}
.info .hideto_iedukuri .figure a img{ display: block; max-width: 80%; max-height: 90%; z-index: 2;}


.blog .title-block{ border-right: solid 1px #FFFFFF;}
.blog ul{ padding-right: 1.0em; margin-left: 1.0em; border-right: solid 1px #CCCCCC;}
.blog ul *{ margin-top: 0;}
.blog ul li{  display: flex; padding: 0.5em 0; align-items: center;}
.blog ul li time{ display: block; margin-right: 1.0em; white-space: nowrap;}
.blog ul li h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 108%;}
.blog ul li a{ text-decoration: none;}
.blog ul li a:hover{ text-decoration: underline;}
.blog ul li .new { margin-left: 0.5em;}
.blog ul li .new span{ display: inline-block; background: #FF0000; color: #FFFFFF; font-size: 86%; padding: 0 0.5em; line-height: 1.0;}

.info .captain{ flex: 0 0 49%; min-width: 0; margin: 2.0em 0 0 0;}
.info .captain .title-block{ margin: 0;}
.captain ul{ margin-right: 1.0em; margin-left: 1.0em;}
.captain ul *{ margin-top: 0;}
.captain ul li{  display: flex; padding: 0.5em 0; align-items: center; overflow: hidden;}
.captain ul li time{ display: block; margin-right: 1.0em; white-space: nowrap;}
.captain ul li p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 108%;}
.captain ul li a{ text-decoration: none;}
.captain ul li a:hover{ text-decoration: underline;}
.captain ul li .new { margin-left: 0.5em;}
.captain ul li .new span{ display: inline-block; background: #FF0000; color: #FFFFFF; font-size: 86%; padding: 0 0.5em; line-height: 1.0;}

.studio{ background: rgba(0,51,66,0.15);}
.studio .articles{ display: flex; justify-content: space-between;}
.studio .articles article{ flex: 0 0 48%; background: rgba(255,255,255,0.7); display: flex; align-items: center;}
.studio .articles article figure{ flex : 1 1; margin: 0; height: 100%; background: no-repeat center center / cover;}
.studio .articles article div{ flex: 0 0 50%; margin: 0; padding: 1.5em 1.0em;}
.studio .articles article div h3{ margin: 0; font-size: 150%; border-bottom: solid 1px #000000;}
.studio .articles article div p{ margin: 1.0em 0 0 0; font-size: 93%; line-height: 1.5;}
.studio .articles article div nav{ margin: 1.0em 0 0 0;}
.studio .articles article div nav a{ font-size: 86%;}

@media screen and ( max-width: 480px ) {
  
  .event .articles{ margin: 0;}
  .event .articles article{ flex: 0 0 100%; }
  
  .concept .block{ display: block;}
  .concept .block div h3{ margin: 1.0em 0 0 0; font-size: 172%; font-weight: normal; text-align: center;}
  .concept .block div p{ font-size: 93%; text-align: center;}
  

  
  .works .articles{ margin: 0;}
  .works .articles article{ flex: 0 0 100%;width: 100%; }
  
  .voice .articles{ margin: 0 0;}
  .voice .articles article{ flex: 0 0 49%; }
  
  .staff .mb{ padding: 1.0em 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: column-reverse;}
  .staff .mb div{ margin: 0; flex: 0 0 100%; text-align: center;}
  .staff .mb div .title{ margin: 0.5em 0 0 0; font-size: 235%; line-height: 1.5; color: #FFFFFF; letter-spacing: 0.05em;}
  .staff .mb figure{ margin: 0; padding: 0; flex: 0 0 100%;}
  .staff .mb figure img{ display: block;}
  

  
  .info .mb{ display: block;}
  
  .studio .articles{ display: block;}
  .studio .articles article{ margin-top: 2.0em; flex: 0 0 100%; position: relative; width: 100%;}
  .studio .articles article figure{ padding: 50% 0 0 0;}
  .studio .articles article div h3{ font-size: 128%;}
}

.header_title_wrap{ display: flex; border: solid 1px #d7d7d7; align-items: center; text-decoration: none;}
.header_title_wrap figure{ display: block; margin: 0; padding: 0; height: 260px; flex: 0 0 62%; background: no-repeat center center / cover;}
.header_title_wrap .title{ flex: 0 0 38%; text-align: center;}
.header_title_wrap .title h3{ margin: 0; padding: 0; font-size: 110%;}
.header_title_wrap .title p{ margin: 0; padding: 0; font-size: 86%;}

@media screen and ( max-width: 480px ) {
  .header_title_wrap figure{ flex: 0 0 50%;}
  .header_title_wrap .title{ flex: 0 0 50%;}

  .item01 {
    font-size: 222%;
    top: 47%;
    width: 100%; 
    overflow-x: hidden;
}
}

.section_igfollow{ text-align: center;}
.section_igfollow a{ display: block; background: #E6E6E7; padding: 2.0em 0; text-decoration: none;}
.section_igfollow h3{ margin: 0;}
.section_igfollow h3 img{ width: 220px;}
.section_igfollow p{ margin: 1.5em 0 0 0; font-weight: bold;}
.section_igfollow aside{ display: block; margin: 1.5em 0 0 0; width: 100%; height: 370px; background: no-repeat center center;}


.section_search{ background: rgba(0,51,66,0.15);}
.section_search p{ text-align: center;}
.section_search input{ text-align: center; padding: 0.8em 1.0em;}



.award-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10; /* オーバーレイの上に表示するために十分に高い値 */
  max-width: 100%;
  height: auto;
  /* ロゴが見やすいように少し影をつける（必要に応じて） */
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}


.video-background {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
}
.video-background .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
}

/* モバイル用の調整 */
@media (max-width: 768px) {
  .award-logo {
      top: 120px;
      left: 10px;
      max-width: 300px; /* モバイルではやや小さく */
  }

.content-wrapper {
    margin: 10px;
    padding: 15px;
    min-height: calc(100vh - 20px);
}

html {
  overflow-x: hidden;
}
}




.mobile-video .overlay {
  padding: 20px;
  text-align: center;
}

.mobile-video .item01 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.mobile-video .item02 {
  max-width: 300px;
  position: absolute;
  top: 100px;
}

.mobile-video .item02 img {
  width: 100%;
  height: auto;
}





/* レスポンシブ調整 */
@media (max-width: 768px) {

  .item01 {
    font-size: 1.6rem;
    left: 0;
  }
}



.grecaptcha-badge {
  opacity: 0 !important;
  height: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
}


/* 暮らしの展示場だより リンク（手書き風） */
.dayori-link-container {
  display: block;
  margin: 3.5rem auto 0;
  text-align: center;
}

.dayori-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-family: 'Klee One', 'Yuji Syuku', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  position: relative;
  transition: all 0.3s ease;
  border-bottom: 1px dotted transparent;
  padding: 0.2rem 0;
}

.dayori-text {
  position: relative;
  letter-spacing: 0.5px;
  /* 手書き風の微妙な角度 */
  transform: rotate(-0.5deg);
  transition: all 0.3s ease;
}

.dayori-icon {
  font-size: 18px;
  color: #E4405F;
  transition: all 0.3s ease;
  transform: translateY(1px);
}

/* ホバー効果 */
.dayori-link:hover {
  color: #E4405F;
  border-bottom-color: #E4405F;
}

.dayori-link:hover .dayori-text {
  transform: rotate(0deg) translateY(-1px);
}

.dayori-link:hover .dayori-icon {
  color: #C13584;
}

/* 手書き風の装飾線（オプション） */
.dayori-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E4405F, transparent);
  transition: width 0.3s ease;
}

.dayori-link:hover::after {
  width: 100%;
}

/* 手書き風のゆらぎ効果 */
@keyframes handWritten {
  0%, 100% { transform: rotate(-0.5deg) translateY(0px); }
  25% { transform: rotate(-0.3deg) translateY(-0.5px); }
  50% { transform: rotate(-0.7deg) translateY(0.3px); }
  75% { transform: rotate(-0.4deg) translateY(-0.2px); }
}

.dayori-text {
  animation: handWritten 8s ease-in-out infinite;
}

/* フォーカス時のアクセシビリティ */
.dayori-link:focus {
  outline: 2px solid #E4405F;
  outline-offset: 2px;
  border-radius: 3px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .dayori-link {
      font-size: 14px;
      gap: 0.3rem;
  }
  
  .dayori-icon {
      font-size: 20px;
  }
}

/* 超小型画面 */
@media (max-width: 480px) {

  
  .dayori-icon {
      font-size: 20px;
  }
}

/* プリント時は装飾を簡素化 */
@media print {
  .dayori-link {
      text-decoration: underline;
      animation: none;
  }
  
  .dayori-link::after {
      display: none;
  }
  
  .dayori-icon {
      display: none;
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {

  
  .dayori-link:hover {
      color: #E4405F;
  }
}

/* より手書き感を強調したい場合のオプションスタイル */
.dayori-link.handwritten-style {
  font-family: 'Klee One', 'Caveat', 'Patrick Hand', cursive;
  font-size: 13px;
  letter-spacing: 1px;
}

.dayori-link.handwritten-style .dayori-text {
  transform: rotate(-1deg);
  position: relative;
}

.dayori-link.handwritten-style .dayori-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -2px;
  right: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.1;
  transform: rotate(0.5deg);
}

/* 非常に小さなサイズ版 */
.dayori-link.tiny {
  font-size: 10px;
  gap: 0.2rem;
}

.dayori-link.tiny .dayori-icon {
  font-size: 11px;
}