@charset "UTF-8";
/* CSS Document */
@import url("reset.css");
/* =========================================================
   Font Variables
========================================================= */ :root {
 --font-size-12: clamp(0.625rem, calc(0.625rem + 0.00977vw), 0.75rem);
 --font-size-14: clamp(0.75rem, calc(0.75rem + 0.1786vw), 0.875rem);
 --font-size-15: clamp(0.8125rem, calc(0.8125rem + 0.1786vw), 0.9375rem);
 --font-size-18: clamp(0.875rem, calc(0.875rem + 0.2976vw), 1.125rem);
 --font-size-20: clamp(1.0625rem, calc(1.0625rem + 0.01465vw), 1.25rem);
 --font-size-22: clamp(1rem, calc(1rem + 0.4464vw), 1.375rem);
 --font-size-24: clamp(1.125rem, calc(1.125rem + 0.0293vw), 1.5rem);
 --font-size-26: clamp(1.1875rem, calc(1.1875rem + 0.0342vw), 1.625rem);
 --font-size-28: clamp(1.25rem, calc(1.25rem + 0.5357vw), 1.75rem);
 --font-size-30: clamp(1.3125rem, calc(1.3125rem + 0.044vw), 1.875rem);
 --font-size-32: clamp(1.375rem, calc(1.375rem + 0.0488vw), 2rem);
 --font-size-36: clamp(1.5rem, calc(1.5rem + 0.6696vw), 2.25rem);
 --font-size-40: clamp(1.75rem, calc(1.75rem + 0.1074vw), 2.5rem); 
 --font-size-42: clamp(1.875rem, calc(1.875rem + 0.0586vw), 2.625rem);
 --font-size-45: clamp(1.9375rem, calc(1.9375rem + 0.1074vw), 2.8125rem);
 --font-size-48: clamp(2rem, calc(2rem + 0.8929vw), 3rem);
 --font-size-52: clamp(2.25rem, calc(2.25rem + 0.0781vw), 3.25rem);
 --font-size-56: clamp(2.375rem, calc(2.375rem + 0.0879vw), 3.5rem);
 --font-size-60: clamp(2.5rem, calc(2.5rem + 0.1074vw), 3.75rem);
 --font-size-64: clamp(2.625rem, calc(2.625rem + 0.1074vw), 4rem);
 --font-size-72: clamp(2.875rem, calc(2.875rem + 0.1270vw), 4.5rem);
 --font-size-100: clamp(3.25rem, calc(3.25rem + 0.2344vw), 6.25rem);
 --white: #ffffff;
 --gray-line: rgba(255, 255, 255, 0.3);
}
body {
 font-family: "Shippori Mincho", serif;
 font-weight: 400;
 color: #333;
 line-height: 1.8;
 background: #faf8f4;
 margin: 0;
 padding: 0;
}
/* =================================
   レイアウト・共通
================================= */
.inner {
 width: 100%;
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 40px;
}
@media (min-width: 768px) {
 .pchd {
  display: none;
 }
}
@media (max-width: 767px) {
 .inner {
  padding: 0 20px;
 }
 .sphd {
  display: none;
 }
}
/* ---------------------------------------------------------
   見出し
--------------------------------------------------------- */
h2 {
 font-family: "Shippori Mincho", serif;
 font-size: 42px;
 font-weight: 500;
 text-align: center;
 margin-bottom: 40px;
 letter-spacing: 0.05em;
}
h2 span {
 font-family: "Allura", cursive;
 font-size: 32px;
 display: block;
 margin-top: 6px;
}
h2 {
 font-family: "Allura", cursive;
 font-size: var(--font-size-40);
 text-align: center;
 color: #333;
 margin-bottom: 50px;
 position: relative;
 letter-spacing: 0.05em;
}
h2::after {
 content: "";
 width: 60px;
 height: 2px;
 background: #c9b8a2; /* ベージュ系の和色。任意で変更OK */
 position: absolute;
 left: 50%;
 bottom: -15px;
 transform: translateX(-50%);
 border-radius: 2px;
}
h3 {
 font-size: 28px;
 text-align: center;
 margin-bottom: 30px;
 font-weight: 500;
}
@media (max-width: 767px) {
 h2 {
  font-size: 32px;
 }
 h3 {
  font-size: 22px;
 }
}
/* 
=================================
   ヘッダー
================================= 
*/
#header {
 width: 100%;
 margin: 0;
}
#header .wrap {
 width: 98%;
 margin: 0 auto;
 padding: 2rem 0 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
#header .logo img {
 height: 54px;
}
#global-navi ul {
 display: flex;
 list-style: none;
 margin: 0;
 padding: 0;
 align-items: center;
 justify-content: flex-end;
}
#global-navi li {
 position: relative;
 padding: 0 20px;
 white-space: nowrap;
}
#global-navi li + li::before {
 content: "/";
 position: absolute;
 left: 0;
 top: 0;
 color: #fff;
 font-size: var(--font-size-14);
 opacity: 0.8;
}
#global-navi a {
 color: #fff;
 text-decoration: none;
 font-size: var(--font-size-18);
 font-weight: 500;
 letter-spacing: 0.08em;
 display: inline-block;
 padding: 0 2px;
 position: relative;
 transition: .3s;
}
#global-navi a::after {
 position: absolute;
 bottom: 0;
 left: 50%;
 content: '';
 width: 0;
 height: 1px;
 background-color: #fff;
 transition: .3s;
 transform: translateX(-50%);
}
#global-navi a:hover::after {
 width: 100%;
}
/* SPは非表示 */
@media (max-width: 767px) {
 #global-navi {
  display: none;
 }
}
@media (max-width: 520px) {
#header .logo img {
 height: 40px;
}
}
/* 
=================================
   メインビジュアル
================================= 
*/
#top {
 position: relative;
 height: 100vh;
 width: 100%;
 color: #fff;
 background: url("../images/mainImage.jpg") center/cover no-repeat;
 display: flex;
 text-align: center;
 flex-direction: column;
 padding: 0 20px;
}
#top h1 {
 font-size: var(--font-size-60);
 font-weight: 500;
 line-height: 1.2;
 letter-spacing: 0.12em;
 margin-bottom: 5rem;
 margin-top: 20vh;
}
#top h1 span {
 display: block;
 font-family: "Allura", cursive;
 font-size: var(--font-size-45);
 margin-top: 10px;
}
#top p {
 font-size: var(--font-size-20);
 max-width: 800px;
 line-height: 2;
 text-align: center;
 margin: 0 auto;
}
#top .scroll {
 position: absolute;
 left: 50%;
 bottom: 10%;
 transform: translateX(-50%);
}
#top .scroll span {
 font-size: var(--font-size-18);
}
#top .scroll::before {
 animation: scroll 2s infinite;
 background-color: #fff;
 bottom: -115px;
 content: "";
 height: 100px;
 left: 0;
 margin: auto;
 position: absolute;
 right: 0;
 width: 1px;
}

@keyframes scroll {
 0% {
  transform: scale(1, 0);
  transform-origin: 0 0;
 }
 50% {
  transform: scale(1, 1);
  transform-origin: 0 0;
 }
 51% {
  transform: scale(1, 1);
  transform-origin: 0 100%;
 }
 100% {
  transform: scale(1, 0);
  transform-origin: 0 100%;
 }
}
/*スマホ設定*/
@media (max-width: 767px) {
 #top {
  height: 80vh;
 }
 #top h1 {
  margin-top: 3rem;
  font-size: var(--font-size-48);
 }
 #top h1 span {
  font-size: var(--font-size-24);
 }
 #top p {
  padding: 0 20px;
  font-size: var(--font-size-15);
 }
}
/*タブレット設定*/
@media screen and (min-width:768px) and (max-width:1024px) {
 #top {
  height: 70vh;
 }
}
/* 
---------------------------------------------------------
基本セクション
--------------------------------------------------------- 
*/
section {
 padding: 8rem 0;
}
@media (max-width: 767px) {
 section {
  padding: 2rem 0 !important;
 }
}
.vertical dt {
 font-weight: 600;
 font-size: var(--font-size-26);
 margin-bottom: 2rem;
}
.vertical dd {
 font-size: 16px;
 line-height: 1.9;
}
@media (max-width: 767px) {
 .vertical {
  text-align: center;
 }
 .vertical dt {
  font-size: 20px;
 }
 .vertical dd {
  font-size: 14px;
 }
}
/* 
=================================
 コンセプト
================================= 
*/
#concept .inner {
 max-width: 1000px;
 margin: 0 auto;
}
#concept ul, #service ul {
 display: flex;
 justify-content: center;
 gap: 40px;
 flex-wrap: wrap;
 margin-top: 50px;
}
#concept li, #service li {
 list-style: none;
 width: 30%;
 text-align: center;
}
#concept img, #service img {
 width: 100%;
 border-radius: 6px;
 margin-bottom: 10px;
}
#concept span, #service span {
 display: block;
 font-size: 16px;
 line-height: 1.6;
}
@media (max-width: 767px) {
 #concept li, #service li {
  width: 100%;
 }
}
@media screen and (min-width:768px) and (max-width:1024px) {
 #concept ul {
  gap: 20px !important;
 }
}

#concept dl.vertical {
 writing-mode: vertical-rl; 
 text-orientation: upright;
 line-height: 3.2;
 max-width: 788px;
 margin: 6rem auto;
 color: #333;
}
#concept dl.vertical dt {
 font-weight: 600;
 font-size: var(--font-size-30);
 margin-left: 4rem;
}
#concept dl.vertical dd {
 font-weight: 400;
 font-size: var(--font-size-16);
 margin-left: 3rem;
 line-height: 2.8;
}
#concept ul {
 display: flex;
 justify-content: center;
 gap: 40px;
 list-style: none;
 margin-top: 60px;
 flex-wrap: wrap;
 padding: 0;
}
#concept ul li {
 width: 30%;
 text-align: center;
}
#concept ul img {
 width: 100%;
 border-radius: 6px;
 margin-bottom: 12px;
}
#concept ul span {
 display: block;
 font-size: var(--font-size-16);
 line-height: 1.6;
}

/*スマホ設定*/
@media (max-width: 767px) {
 #concept .inner {
  padding: 2rem 1rem;
 }
 #concept dl.vertical {
  writing-mode: horizontal-tb; 
  text-orientation: mixed;
 }
 #concept ul li {
  width: 100%;
 }
 #concept h2 {
  font-size: var(--font-size-32);
 }
  #concept dl.vertical {
  margin: 3rem auto;
 }
 #concept dl.vertical dt, #concept dl.vertical dd {
  margin-left: 0;
 }
}
/*タブレット設定*/
@media screen and (min-width:768px) and (max-width:1024px) {
 #concept dl.vertical dt {
  margin-left: 1rem;
 }
}

/* 
=================================
#protect
================================= 
*/
#protect {
 position: relative;
 width: 100%;
 padding: 50px 0;
 overflow: hidden;
 margin-bottom: 8rem;
}
#protect::before {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 width: 45%; 
 height: 90%;
 background: url("../images/protect_bg.jpg") center right / cover no-repeat;
 z-index: 1;
}
#protect .inner {
 position: relative;
 z-index: 2;
 max-width: 1000px;
 margin: 0 auto;
 display: flex;
 justify-content: flex-start;
}
#protect .vertical {
 writing-mode: vertical-rl;
 text-orientation: upright;
 color: #333;
 line-height: 2.3;
}
#protect .vertical dt {
 font-size: var(--font-size-30);
 font-weight: 600;
 margin-left: 3rem;
}
#protect .vertical dd {
 font-size: var(--font-size-16);
 line-height: 2.8;
}
/*スマホ設定*/
@media (max-width: 767px) {
 #protect .vertical dt {
  margin-left: 0;
 }
  #protect {
  padding: 70px 0;
  margin-bottom: 2rem;
 }
 #protect::before {
  width: 100%;
  height: 250px; 
  right: 0;
  left: 0;
  background-position: center;
 }
 #protect .inner {
  flex-direction: column;
  margin-top: 260px; 
 }
 #protect .vertical {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
 }
}
/*タブレット設定*/
@media screen and (min-width:768px) and (max-width:1024px) {
 #protect::before {
  height: 70%;
 }
}

/* 
=================================
サービス
================================= 
*/
#service {
 position: relative;
 width: 100%;
 padding: 6rem 0 8rem;
 ;
 overflow: hidden;
 background: linear-gradient(180deg, #fff 0%, #fff 24%, #eee2d3 24%, #eee2d3 100%);
}
#service .inner {
 max-width: 1000px;
 margin: 0 auto;
}
#service .s1 {
 position: relative;
 width: 100%;
 height: 640px;
 margin-bottom: 80px;
 overflow: hidden;
}
#service::before {
 content: "";
 position: absolute;
 top: 40vh;
 left: 0;
 width: 40%;
 height: 10%;
 background: url("../images/service_bg.jpg") center left / cover no-repeat;
 z-index: 1;
}
#service .s1 .vertical {
 position: absolute;
 top: 50%;
 right: 5%; 
 transform: translateY(-50%);
 z-index: 2;
 writing-mode: vertical-rl;
 text-orientation: upright;
 color: #333;
 line-height: 2.3;
}
#service .s1 dt {
 font-size: var(--font-size-30);
 font-weight: 600;
 margin-bottom: 20px;
 margin-left: 3rem;
}
#service .s1 dd {
 font-size: var(--font-size-16);
 line-height: 2.8;
}

@media (max-width: 767px) {
 #service {
  background: linear-gradient(180deg, #fff 0%, #fff 12%, #eee2d3 12%, #eee2d3 100%);
 }
 #service::before {
  width: 100%;
  height: 250px;
  top: 50%;
  left: 0;
 }
 @media (max-width: 520px) {
  #service::before {
   top: 9%;
  }
 }
 #service .s2 {
  padding: 20rem 1rem 0 !important;
 }
 #service .s1 dt {
  margin-left: 0;
 }
 #service .s1 {
  height: auto;
  padding-top: 2rem;
 }
 #service .s1::before {
  width: 100%;
  height: 250px;
  left: 0;
  background-position: center;
 }
 #service .s1 .vertical {
  position: relative;
  top: 0;
  right: 0;
  transform: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  margin-top: 20px;
 }
}

@media screen and (min-width:768px) and (max-width:1023px) {
 #service::before {
  top: 50vh;
  left: 0;
  width: 40%; /* 左半分に画像 */
  height: 8%;
 }
}

#service .s2 {
 max-width: 1200px;
 margin: 0 auto;
}
#service .s2 h3 {
 font-size: var(--font-size-24);
 font-weight: 600;
 text-align: center;
 margin: 2rem 0;
 position: relative;
 color: #333;
 letter-spacing: 0.05em;
}
#service .s2 h3::before, #service .s2 h3::after {
 content: "";
 position: absolute;
 top: 50%;
 width: 25%;
 height: 1px;
 background: #c9b8a2;
}
#service .s2 h3::before {
 left: 0;
}
#service .s2 h3::after {
 right: 0;
}
#service .s2 ul {
 max-width: 1000px;
 margin: 3rem auto 6rem;
 display: flex;
 justify-content: space-between;
 align-items: stretch;
 position: relative;
}
#service .s2 ul li {
 text-align: center;
 box-sizing: border-box;
 width: 28%;
}
#service .s2 ul li img {
 width: 100%;
 margin: 0 auto 10px;
 display: block;
 border-radius: 6px;
}
#service .s2 ul span {
 display: block;
 font-size: var(--font-size-16);
 line-height: 1.6;
 color: #333;
}
#service .s2 h3 {
 font-family: "Shippori Mincho", serif;
 font-size: var(--font-size-30);
 text-align: center;
 position: relative;
 margin: 0;
}
#service .s2 h3::before, #service .s2 h3::after {
 content: "";
 position: absolute;
 top: 50%;
 width: 40%;
 height: 1px;
 background: #b3a79b;
}
#service .s2 h3::before {
 left: 0;
}
#service .s2 h3::after {
 right: 0;
}
#service .s2 h3 + ul {
 position: relative;
}
#service .s2 h3 + ul::after {
 content: "";
 position: absolute;
 left: 50%;
 top: calc(100% + 20px);
 transform: translateX(-50%);
 width: 2px;
 height: 50px;
 background: #b3a79b;
}
#service .s2 ul:last-of-type::after {
 display: none;
}
#service .s2 ul li img {
 width: 100%;
 border-radius: 6px;
 height: auto;
}
/*スマホ設定*/
@media (max-width: 520px) {
 #service .s2 ul {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
 }
 #service .s2 ul li {
  width: 100% !important;
 }
}
@media (max-width: 767px) {
 #service .s2 ul {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
 }
 #service .s2 ul li {
  width: 28%;
 }
  #service .s2 h3::before, #service .s2 h3::after {
  width: 15% !important;
 }
}
/*タブレット設定*/
@media screen and (min-width:768px) and (max-width:1024px) {
 #service .s2 {
  padding-top: 4rem;
 }
 #service .s2 ul {
  padding: 0 2rem;
 }
}
#service .box {
 position: relative;
 padding-top: 5rem;
 max-width: 1200px;
 margin: 0 auto;
}
#service .box::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 0;
 transform: translateX(-50%);
 width: 2px;
 height: 50px;
 background: #b3a79b;
}
#service .box dl {
 color: #fff;
 text-align: center;
 border: solid 1px #7c7367;
 background: #b7ac9c;
 padding: 3rem 0;
 width: 100%;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
#service .box dt {
 font-size: var(--font-size-24);
 line-height: 2.2;
 margin-bottom: 2rem;
 width: 100%;
}
#service .box dd {
 width: 30%;
 text-align: center;
 padding: 0 1.5rem;
}
#service .box dd a {
 display: block;
 padding: 1.5rem 0;
 color: #fff;
 background: #7c7367;
 font-size: var(--font-size-20);
}
#service .box dd.end {
 width: 100%;
 color: #333333;
 font-size: var(--font-size-30);
 margin-top: 2rem;
 letter-spacing: 0.2em;
}
@media (max-width: 767px) {
 #service .box dd {
  width: 100%;
  margin-bottom: 2rem;
 }
}

/* 
=================================
 事例ギャラリー
================================= 
*/

#gallery {
 padding: 2rem 0 6rem;
}
#gallery .loop-slider {
 display: flex;
 gap: 10px;
 white-space: nowrap;
 overflow: hidden;
}
#gallery .loop-slider img {
 height: 200px; /* 任意 */
 flex-shrink: 0;
}
#gallery .loop-slider {
 overflow: hidden;
 width: 100%;
}
#gallery .loop-track {
 display: flex;
 width: max-content;
 animation: loop 25s linear infinite;
 gap: 40px;
}
#gallery .loop-track img {
 width: auto;
 height: 180px;
 flex-shrink: 0;
}
@keyframes loop {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-50%);
 }
}
@media (max-width: 767px) {
 #gallery .loop-track img {
  height: 120px;
 }
 #gallery .loop-track {
  gap: 20px; 
 }
}

/* 
---------------------------------------------------------
スライダー共通
--------------------------------------------------------- 
*/
#case {
 width: 100%;
 padding: 8rem 0 2rem;
}
#case .case_wrap {
 margin-bottom: 8rem;
}
#case h3 {
 font-size: var(--font-size-30);
 padding: 6rem 0;
}
#case h4 {
 font-size: var(--font-size-26);
 padding: 1.5rem 0;
 margin: 0 auto 4rem;
 border-top: solid 1px #333;
 border-bottom: solid 1px #333;
 text-align: center;
 max-width: 1200px;
}
#case .ol {
 max-width: 1200px;
 margin: 0 auto;
 padding: 4rem 0;
}
#case .ol li {
 text-align: left;
 padding-bottom: 1.5rem;
 margin-bottom: 1.5rem;
 border-bottom: dotted 1px #333;
}
#case .ol li dl {
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
 font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
#case .ol li dl dt {
 width: 24%;
 display: flex;
 justify-content: flex-start;
 flex-wrap: nowrap;
 align-items: center;
 font-size: var(--font-size-18);
}
#case .ol li dl dt img {
 width: 8%;
 height: auto;
 margin-right: 1rem;
}
#case .ol li dl dd {
 width: 70%;
 font-size: var(--font-size-18);
}
@media (max-width: 767px) {
 #case .case_wrap {
  margin-bottom: 2rem;
 }
 #case h3 {
  padding: 3rem 0;
 }
 #case .ol {
  padding: 2rem 1rem;
 }
 #case .ol li dl dt {
  width: 100%;
  margin-bottom: 1rem;
 }
 #case .ol li dl dd {
  width: 100%;
 }
}
@media screen and (min-width:768px) and (max-width:1024px) {
 #case .ol {
  padding: 2rem 2rem;
 }
 .slider, .slider2 {
  padding: 0 2rem;
 }
}
/* ▼ 全体コンテナ */
.slider {
 max-width: 1200px;
 margin: 0 auto 4rem;
}
.before {
 width: 100%;
 margin: 0 auto 50px;
 text-align: center;
}
/* ▼ メインスライダー */
.swiper.main {
 max-width: 1000px;
 margin: 0 auto 2rem;
}
.swiper.main img {
 width: 100%;
 height: auto;
 border-radius: 4px;
 display: block;
}
/* ▼ ナビゲーションボタン */
.swiper.main .swiper-button-next, .swiper.main .swiper-button-prev {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: #fff;
 border: 1px solid #ccc;
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.swiper.main .swiper-button-next::after, .swiper.main .swiper-button-prev::after {
 font-size: 18px;
 color: #333;
}
/* ▼ ページカウンター（1/8） */
.slider .count {
 margin: 2rem 0;
 font-size: var(--font-size-26) !important;
 color: #333;
 text-align: center;
}
.swiper.thumbs {
 background: #fff;
 padding: 15px;
 border-radius: 6px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
 margin: 0 auto;
}
.swiper.thumbs .swiper-slide {
 width: 120px;
 height: 80px;
 opacity: 0.4;
 cursor: pointer;
 transition: 0.3s;
}
.swiper.thumbs .swiper-slide-thumb-active {
 opacity: 1;
}
.swiper.thumbs img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
@media (max-width: 767px) {
 .swiper.thumbs {
  display: none;
 }
}

/* ▼ 動画リンクボタン 
.link_bt {
 margin-top: 4rem;
 text-align: center;
}
.link_bt a {
 display: inline-block;
 padding: 1rem 4rem 1rem 6rem;
 ;
 background-color: #333;
 color: #fff !important;
 border-radius: 40px;
 text-decoration: none;
 font-size: var(--font-size-20);
 background-image: url(../images/icon_movie.png);
 background-position: left 3.5rem center;
 background-repeat: no-repeat;
 background-size: 8%;
 margin: 0 auto 6rem;
}
*/
/* before コンテナ */
.before {
 background: #ede2d3;
 padding: 4rem 0;
}
.before .title {
 max-width: 1200px;
 margin: 0 auto;
}
.before h5 {
 text-align: left;
 font-size: var(--font-size-45);
 color: #b7ac9c;
 letter-spacing: 0.1em;
 border-left: solid 8px #b7ac9c;
 padding-left: 2rem;
 margin-top: -6rem;
}
.before .slider2 {
 max-width: 1000px;
 margin: 0 auto;
 display: flex;
 gap: 20px;
 align-items: flex-start;
}
@media (max-width: 767px) {
 .before .slider2 {
  max-width: 100%;
  width: 100%;
  display: block;
 }
 .before .main2 {
  width: 90% !important;
  margin: 0 auto 2rem;
 }
}
/* メイン画像 */
.before .main2 {
 width: 70%;
}
/* 右側サムネ（グリッド） */
.before .thumbs2-grid {
 width: 30%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
}
@media (max-width: 767px) {
 .before .thumbs2-grid {
  width: 90% !important;
  margin: 0 auto;
 }
}
.before .thumbs2-grid .thumb img {
 width: 100%;
 border-radius: 6px;
 cursor: pointer;
 opacity: 0.5;
 transition: opacity .3s;
}
.before .thumbs2-grid .thumb.active img {
 opacity: 1;
 outline: 2px solid #333;
}

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

#contact {
 max-width: 1200px;
 margin: 0 auto;
 font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
#contact h3 {
 padding: 6rem 0;
}
#contact p {
 text-align: center;
 margin-bottom: 2rem;
}
#contact h4 {
 font-size: var(--font-size-20);
 text-align: left;
 margin-bottom: 3rem;
 padding-bottom: 0.5rem;
 border-bottom: solid 1px #333;
 font-weight: normal;
}
@media (max-width: 767px) {
 #contact h3 {
  padding: 3rem 0;
 }
}

/* 
=================================
footer
================================= 
*/

#footer {
 text-align: center;
 padding: 2rem 0 0;
 color: #333;
 border-top: solid 1px #333;
}
#footer-navi ul {
 display: inline-flex;
 gap: 4rem;
 margin-bottom: 6rem;
}
#footer-navi li {
 list-style: none;
 position: relative;
}
#footer-navi a {
 text-decoration: none;
 color: #333;
 font-size: var(--font-size-18);
 letter-spacing: 0.08em;
 padding: 6px 2px;
 display: inline-block;
 position: relative;
 transition: .3s;
}
#footer-navi a::after {
 position: absolute;
 bottom: 0;
 left: 50%;
 content: '';
 width: 0;
 height: 1px;
 background-color: #333;
 transition: .3s;
 transform: translateX(-50%);
}
#footer-navi a:hover::after {
 width: 100%;
}
#footer-navi li:not(:last-child)::after {
 content: "/";
 color: #333;
 margin-left: 4rem;
 position: relative;
}
/*ページトップボタン*/
#page-top {
 position: fixed;
 bottom: 100px;
 right: 5px;
 z-index: 99;
}
#page-top a {
 display: block;
 width: 40px;
 height: 40px;
}
@media (max-width: 767px) {
 #footer-navi {
  display: none;
 }
}

.company {
 max-width: 1200px;
 margin: 0 auto;
}
.company .f_logo {
 margin-bottom: 18px;
 max-width: 400px;
 margin: 0 auto 2rem;
}
.company .f_logo img {
 width: 100%;
 height: auto;
}
.company p {
 font-size: var(--font-size-16);
 color: #333;
 line-height: 1.8;
}
.company p span {
 font-size: var(--font-size-14);
}
@media (max-width: 767px) {
 .company {
  padding: 0 1rem;
 }
 .company .f_logo {
  width: 80%;
  margin: 0 auto 1rem;
 }
 .company .f_logo img {
  width: 100%;
 }
 .company p span {
  display: block;
  margin-top: 1rem;
 }
}
@media screen and (min-width:768px) and (max-width:1024px) {
 .company {
  padding: 0 2rem;
 }
 .company .f_logo {
  margin: 0 auto 2rem;
 }
}
/*Copyright*/
#footer .copyright {
 margin-top: 25px;
 font-size: var(--font-size-12);
 color: #333;
 padding-top: 4rem;
 padding-bottom: 1rem;
}
@media (max-width: 767px) {
 #footer .copyright {
  padding-top: 2rem;
  padding-bottom: 1rem;
 }
}

/* 
---------------------------------------------------------
 フッターボタン
--------------------------------------------------------- 
*/
@media (max-width: 768px) {

#footerbtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #333;
  z-index: 9999;
  transform: translateY(100%); /* ← 最初は画面外に隠す */
  transition: transform 0.4s ease;
}
#footerbtn.show {
  transform: translateY(0); /* ← 出現 */
}
#footerbtn ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footerbtn li {
  width: 50%;
  border-right: 1px solid #fff
}
#footerbtn li:last-child {
  border-right: none;
}
#footerbtn a {
  display: flex;
  flex-direction: column; /* アイコン上＋テキスト下 */
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
#footerbtn a i {
  font-size: 22px;
  margin-bottom: 3px;
  font-weight: 900;
}
#footerbtn a:hover {
  background: #444;
}

}

@media (min-width: 769px) {
  #footerbtn {
    display: none;
  }
}

/* 
---------------------------------------------------------
   パララックス
   parallax1 / parallax2 / parallax3
--------------------------------------------------------- 
*/
#parallax1, #parallax2, #parallax3 {
 width: 100%;
 height: 400px;
 background-attachment: fixed;
 background-position: center;
 background-size: cover;
}
#parallax1 {
 background-image: url("../images/parallax1.jpg");
}
#parallax2 {
 background-image: url("../images/parallax2.jpg");
}
#parallax3 {
 background-image: url("../images/parallax3.jpg");
}
@media (max-width: 767px) {
 #parallax1, #parallax2, #parallax3 {
  background-attachment: scroll;
  height: 250px;
  margin-bottom: 4rem;
 }
}

/* 
=================================
MVアニメーション
================================= 
*/
/* ---------- ローダー ---------- */
#page-loader {
 position: fixed;
 inset: 0; /* top:0; right:0; bottom:0; left:0 */
 display: flex;
 align-items: center;
 justify-content: center;
 background: #fff; 
 z-index: 99999; 
 opacity: 1;
 transition: opacity 600ms ease, visibility 0ms linear 600ms;
 visibility: visible;
 -webkit-font-smoothing: antialiased;
}
#page-loader.hidden {
 opacity: 0;
 visibility: hidden; 
}
#page-loader .loader-inner {
 text-align: center;
}
#page-loader .spinner {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 4px solid rgba(0, 0, 0, 0.08);
 border-top-color: rgba(0, 0, 0, 0.6);
 animation: spin 1s linear infinite;
 margin: 0 auto 12px;
}
@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}
#page-loader .loader-text {
 font-size: 13px;
 color: #333;
}
#top {
 opacity: 0;
 transition: opacity 1.2s ease;
}
#top.page-visible {
 opacity: 1;
}

/* 
=================================
スクロールアニメーション
================================= 
*/
.fadein {
 opacity: 0;
 transform: translateY(18px);
 transition: opacity 600ms ease, transform 600ms ease;
 will-change: opacity, transform;
}
.fadein.show {
 opacity: 1;
 transform: translateY(0);
}
.fade-up {
 opacity: 0;
 transform: translateY(45px); /* ← 少し距離を伸ばす */
 transition: opacity 1.2s ease, transform 1.2s ease; /* ← ゆっくり */
}
.fade-up.show {
 opacity: 1;
 transform: translateY(0);
}