@charset "UTF-8";

/*--------------------------------------------------------
　各ページごとに設定するコンテンツのスタイル
（このCSSが一番最後に読み込まれる）
--------------------------------------------------------*/

/*==================== 1.ホームページ ====================*/

/* =======================================
　メインビジュアル
======================================= */

/*------ 全体枠 -----*/
#top-main-visual {
  height: 100vh;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 0 !important;
}

@media screen and (max-width: 781px) {
  #top-main-visual {
    height: 70vh;
  }
}


/*------ スライド -----*/
.top-mv-slide {
  height: 100%;
}

.top-mv-slide .spider,
.top-mv-slide .spider__canvas,
.top-mv-slide .smb-spider-slider__figure-wrapper {
  height: 100%;
}

.top-mv-slide img {
  object-fit: cover;
  height: 100%;
}

@media screen and (max-width: 781px) {

  .top-mv-slide,
  .top-mv-slide .spider,
  .top-mv-slide .spider__canvas,
  .top-mv-slide .smb-spider-slider__figure-wrapper,
  .top-mv-slide img {
    height: 50vh;
  }
}


/*------ 宣伝スライド -----*/
.top-mv-news {
  position: absolute;
  z-index: 1;
  bottom: -1.6rem;
  right: 1rem;
  max-width: 96vw;
}

.top-mv-news .top-mv-news-slide {
  border-radius: 16px;
  background: #FFF;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.25);
}

.top-mv-news .spider__arrow[data-direction="prev"]::before {
  border-bottom: 1px solid #333;
  border-left: 1px solid #333;
  z-index: 1;
}

.top-mv-news .spider__arrow[data-direction="next"]::before {
  border-right: 1px solid #333;
  border-top: 1px solid #333;
  z-index: 1;
}



/* =======================================
　製品紹介
======================================= */

/*------ 全体枠 -----*/
.smb-section.about-box {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}



.about-box h2 {
  font-family: var(--type-shippori-font) !important;
  font-size: clamp(3.8rem, 3.235rem + 1.74vw, 4.8rem) !important;
  letter-spacing: 6px;
  font-weight: 400;
}


/* =======================================
　新着情報
======================================= */

/*------ リスト -----*/
.top-news-list ul li {
  padding: 1rem;
  border-bottom: 1px dotted #CCC;
}

.top-news-list ul li:hover {
  background: #eee;
  transition: all 1s;
}

.top-news-list ul li a {
  text-decoration: none !important;
  color: #222 !important;
  transition: all 1s;
}

.top-news-list ul li time a {
  word-break: keep-all;
}

.top-news-list ul li h2 {
  font-size: 1.6rem !important;
  font-family: var(--type-primary-font) !important;
}



/* =======================================
　制作実績
======================================= */

/*------ リスト -----*/
#production ul li {
  margin-bottom: 4rem !important;
}

#production ul li h2 {
  margin-top: 0 !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
}

/*------ 画像 -----*/
#production ul li img {
  object-fit: cover;
  height: 25rem !important;
}

@media screen and (max-width: 781px) {
  #production ul li img {
    height: 100% !important;
  }
}

/*==================== 2.お問い合わせ ====================*/

/* =======================================
　フォーム
======================================= */

/*------ フォームレイアウト -----*/
form #toc_content {
  margin-bottom: 2rem;
}

form #toc_content .smf-item {
  margin-bottom: 1rem;
}

form[data-screen="confirm"] #toc_content .smf-item {
  display:flex;
  justify-content: flex-start;
  margin-bottom: 0;
}

form[data-screen="confirm"] #toc_content .smf-item .smf-item__col.smf-item__col--label {
  width: 200px;
  background: #CCC;
  border: 1px solid #174a97;
  padding: 1rem;
}

form[data-screen="confirm"] #toc_content .smf-item .smf-item__col.smf-item__col--controls {
  border: 1px solid #174a97;
  border-left: none;
  padding: 1rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  form[data-screen="confirm"] #toc_content .smf-item {
    display:flex;
    flex-direction: column;
  }

  form[data-screen="confirm"] #toc_content .smf-item .smf-item__col.smf-item__col--label {
    width: 100%;
    height: auto;
  }
  
  form[data-screen="confirm"] #toc_content .smf-item .smf-item__col.smf-item__col--controls {
    border: 1px solid #174a97;
    height: auto;
  }
}