@charset "UTF-8";
/* ページ全体フェードイン用 */
body {
  opacity: 0;                 /* 初期状態は透明 */
  transition: opacity 1s ease; /* 1秒かけてフェードイン */
}

body.page-loaded {
  opacity: 1;                 /* クラスが付いたら表示 */
}
/* CSS Document */
/* ロゴアニメーション用 */
#logo-animation {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 黒背景、必要に応じて透明 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000; /* headerより前面 */
  opacity: 1;
  transition: opacity 1.5s ease-in-out; /* 背景もふわっと消す */
}

#logo-animation img {
  width: 200px; /* 初期サイズ */
  opacity: 0;
  transform: translateY(40px); /* 下からスタート */
  animation: logoIntro 2s forwards;
}
#logo-animation img {
  animationend: opacity 0; /* 終了後に非表示 */
}


/* 下から出て上に消えるアニメーション */
@keyframes logoIntro {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/* 背景フェードアウト */
#logo-animation {
  transition: opacity 0.8s ease-in-out; /* ← 背景の消える速度も速く */
}

/* アニメーション終了後に非表示にする */
#logo-animation.hide {
  display: none !important;
}


/* 初期状態：非表示＆下にずらす */
.fade-in {
  opacity: 0;
  transform: translateY(2.5rem); /* 40px → 2.5rem */
  transition: opacity 1.5s ease, transform 1.5s ease;
}
/* 表示状態 */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
.header {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  color: #fff;
/*  padding: 0 30px;*/
  background-color: rgb(0,0,0,0.0);
  border-bottom: 1px solid transparent; /* 見えないボーダーでmargin相殺を防ぐ */
  z-index: 2000;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: background 0.4s ease, color 0.4s ease;
}

.header_inner {
/*  max-width: 73.75rem;*/
  /* 1180px → 73.75rem */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
/*  margin: 0 auto;*/
/*  padding: 0;*/
}
.logo a img {
  display: block;
  margin: 0 0 0 1rem; /* 20px → 1.25rem */
  padding-right: 1.25rem; /* 20px → 1.25rem */
  width: 100%;
  height: 100%;
}
/* ナビゲーションリンクの色切り替え */
.drawer_nav a {
  color: #fff;
  transition: color 0.4s ease;
}

.header.scrolled .drawer_nav a {
  color: #000;
}
.header.scrolled .drawer_nav a:hover {
  color: #c0c0c0; /* ホバー時は同じ赤 */
}

/* ロゴのフェードアニメーションを自然にする */
.header .logo img {
  transition: opacity 0.3s ease;
}
/* ナビ（PC幅） */
.drawer_nav {
  display: flex;
  position: static;
  width: auto;
  height: auto;
  background: none;
  margin: 0 50px 0 0;
  opacity: 1;
  transform: none;
  transition: none;
}
.drawer_nav ul {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.nav_menu {
  margin-left: 2.5rem; /* 40px → 2.5rem */
}
.nav_menu a {
  display: flex;
  align-items: center; /* 上下中央に揃える */
  font-size: 1.125rem; /* 18px → 1.125rem */
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-left: 1.6rem;/* アイコン分の余白 */
  transition: color 0.3s;
}
.nav_menu a::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.3s;
  color: #464646;
}
/* 項目ごとのアイコン設定 */
.n-news a::before {
  content: "\f075"; /* ユーザーアイコン */
}
.n-about a::before {
  content: "\f007"; /* ユーザーアイコン */
}
.n-service a::before {
  content: "\f013"; /* 歯車 */
}
.n-works a::before {
  content: "\f0b1"; /* ブリーフケース */
}
.n-blog a::before {
  content: "\f1ea"; /* 新聞 */
}
.n-contact a::before {
  content: "\f0e0"; /* メール */
}
.nav_menu a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0.1875rem); /* 3px → 0.1875rem */ /* 少しスライドする動き */
}
.nav_menu a:hover {
  color: #464646;
}
/* 既存の .header, .header_inner, .logo, .drawer_nav, .nav_menu はそのまま */

/* ハンバーガーボタン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 60px;   /* 円のサイズ */
  height: 60px;
  min-width: 60px;     /* 縮まないように */
  min-height: 60px;
  flex-shrink: 0;      /* Flexboxで縮小防止 */
  border-radius: 50%; /* 円形 */
  background: #ff8219; /* 赤色 */
  cursor: pointer;
  z-index: 1100;
  transition: background 0.3s ease;
  margin:0 15px 0;
  transition: all 0.3s ease, background 0.3s ease;
  cursor: pointer;
  overflow: hidden; /* 擬似要素がはみ出さないように */
  position: relative; /* 擬似要素の基準 */
}

.hamburger span {
  width: 25px;
  height: 2px;
  background: #fff; /* 初期：白線 */
  display: block;
  transition: all 0.4s ease;
  transform-origin: center;
}


/* 開いたときのバツ印 */
.hamburger.open {
  background: #888; /* ← 開いたときはグレーに変更 */
}
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
  background: #fff;
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
  background: #fff;
}

/* バツ印状態でhover */
.hamburger.open:hover {
  background: #000;
}
.hamburger.open:hover span:nth-child(1),
.hamburger.open:hover span:nth-child(3) {
  background: #fff;
}

/* hoverアニメーション用の擬似要素 */
.hamburger.open::after {
  content: "";
  position: absolute;
  inset: 0; /* 親の円の中いっぱい */
  border-radius: 50%;
  background: #000;
  transform: scale(0);   /* 最初は小さく */
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
  z-index: 0; /* 背景として配置 */
}

/* hover時：中央から黒く広がる */
.hamburger.open:hover::after {
  transform: scale(1.2); /* 拡大して背景全体を覆う */
  opacity: 1;
}
/* 擬似要素の上に線を出すため */
.hamburger.open span {
  position: relative;
  z-index: 1;
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
.overlay.active {
  opacity: 1;
  visibility: visible;
}


/* --- レスポンシブ --- */
/* PC表示時のみ、スクロール後に黒文字に変更 */
@media (min-width: 1101px) {
  .header.scrolled .drawer_nav .nav_menu a {
    color: #000;
  }
  .header.scrolled .drawer_nav a:hover {
    color: #c0c0c0; /* ホバー時は赤 */
  }
}

@media (max-width: 1000px) {
	.header{
		background-color: rgb(0,0,0,0.0);
	}
  .drawer_nav {
    position: fixed;
    right: 0;
    bottom: -100%;
    width: 240px;
	height: 100vh;
    background: #fff;
    padding: 7rem 0;
	margin: 0;
    text-align: center;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(50px);
    z-index: 1001;
  }

  .drawer_nav ul {
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 0;
  }

  .nav_menu a {
    font-size: 1.125rem; 
	padding-left: 2rem;/* アイコン分の余白 */
	color: #000;
  }
	
   .drawer_nav.active {
    bottom: 0;
    opacity: 1;
    transform: translateY(0);
  }

  .hamburger {
    display: flex;
  }
　
  .drawer_nav a:hover {
    color: #ff8219 !important; /* 常に赤にホバー */
  }


}

@media (max-width: 500px) {
	.header{
		background-color: rgba(0,0,0,0.0);
/* 		height: 70px;
		margin-top: 10px; */
		}
	.hamburger{
		height: 40px;
		width: 40px;
	    min-width: 50px;
    	min-height: 50px;
	}
}
@media (max-width: 400px) {
	.header_inner{
		margin:10px;
	}
	.logo a img{
		margin: 0;
	}
	.hamburger{
		margin: 0 0 0 10px;
	}
}
.drawer_nav,
.hamburger {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

.drawer_nav:not(.hide),
.hamburger:not(.hide) {
  opacity: 1;
  transform: translateY(0);
}
/* ナビが開いたときに背景スクロールを止める */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

.contact-button {
  position: fixed;
  right: 0;
  bottom: 7.5rem; /* 20px → 1.25rem */
  width: 3.75rem; /* 60px → 3.75rem */
  height: 5.625rem; /* 90px → 5.625rem */
  background: #ff4500;
  color: #fff;
  border-radius: 0.625rem 0 0 0.625rem; /* 10px → 0.625rem */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem 0; /* 12px → 0.75rem */
  font-size: 1.25rem; /* 20px → 1.25rem */
  text-decoration: none;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2); /* 4px 6px → rem */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 999;
}
.contact-button i {
  font-size: 1.375rem; /* 22px → 1.375rem */
  margin-bottom: 0.3rem; /* 25px → 1.5625rem */
}
.contact-button span {
  font-size: 0.875rem; /* 14px → 0.875rem */
  letter-spacing: 0.0625rem; /* 1px → 0.0625rem */
  line-height: 1;
}
.contact-button.show {
  opacity: 0.9;
  pointer-events: auto;
}
.contact-button:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.pagetop {
  position: fixed;
  right: 0;
  bottom: 1.25rem; /* 20px → 1.25rem */
  width: 3.75rem; /* 60px → 3.75rem */
  height: 5.625rem; /* 90px → 5.625rem */
  background: #ff8129;
  color: #fff;
  border-radius: 0.625rem 0 0 0.625rem; /* 10px → 0.625rem */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
  justify-content: flex-start;
  padding: 0.75rem 0; /* 12px → 0.75rem */
  font-size: 1.25rem; /* 20px → 1.25rem */
  text-decoration: none;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2); /* 4px 6px → rem */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 999;
}
.pagetop i {
  font-size: 1.375rem; /* 22px → 1.375rem */
  margin-bottom: 1.5625rem; /* 25px → 1.5625rem */
}
.pagetop span {
  font-size: 0.875rem; /* 14px → 0.875rem */
  letter-spacing: 0.0625rem; /* 1px → 0.0625rem */
  line-height: 1;
}
.pagetop.show {
  opacity: 0.9;
  pointer-events: auto;
}
.pagetop:hover {
  opacity: 1;
  transform: translateY(-3px);
}
.mainvisual {
  width: 100%;
  height: 100vh; /* 650px → 40.625rem */
  overflow: hidden;
  position: relative;
}
/* 1枚画像専用レイアウト */
.mainvisual-inner.single-visual {
  width: 100%;
  height: 100%;
}
.mainvisual-inner.single-visual img{
  width: 100%;
  height: 100vh;
  object-fit: cover; /* 画像をトリミングして全画面に収める */
  object-position: center;
  display: block;
  transform: scale(1.05);
  animation: zoomSlow 10s ease-in-out infinite alternate; /* ← アニメーションをCSSアニメーションではなくtransitionで */
}
/* ズームアニメーション */
@keyframes zoomSlow {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.20);
  }
}
.mainvisual-inner .slick-slide.slick-active {
  opacity: 1;
  z-index: 1;
}
/* 波を mainvisual の下端に固定 */
.wave {
  position: absolute;
  bottom: 0;  /*隙間が出ないよう微調整 */
  left: 0;
  width: 100%;
  height: 100px;
  line-height: 0;
  pointer-events: none;
}
.wave svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media(max-width:1100px){
.mainvisual {
  height: 100vh; /* 650px → 40.625rem */}
.mainvisual-inner {
  height: 100vh;
}
.mainvisual-inner img {
  height: 100vh;
}
  
}

/* ズーム用アニメーション */
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* MVテキスト */
.mv-text {
  position: absolute;
  bottom: 15%;
  left: 5%;
  text-align: left;
  color: #fff;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px); /* 少し下からフェードイン */
  transition: all 1.5s ease-out;
}

.mv-title {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 3.2rem;
  margin-bottom: 0.5rem;
  font-family: "Shippori Mincho B1 Bold", "Shippori Mincho B1 Medium", "Shippori Mincho B1 Regular", "Shippori Mincho B1 SemiBold";
}

.mv-subtitle {
  font-size: 1.25rem;
  letter-spacing: 1px;
}

/* 表示時のクラス */
.mv-text.show {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

/* レスポンシブ */
@media(max-width:768px){
  .mv-title {
    font-size: 1.75rem;
  }
  .mv-subtitle {
    font-size: 1rem;
  }
  .mv-title .br{
	display: none;
}
}


.wave {
  height: 60px;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  bottom: 0px;
  left: 95%;
}

.scroll_down a{
  position: absolute;
  left: 10px;
  bottom: 87px;
  color: #000;
  font-size: 14px;
  font-family: 'Cormorant Garamond', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}

@keyframes circlemove{
  0%{bottom:160px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:#808080;
  animation:
    circlemove 2s ease-in-out infinite,
    cirlemovehide 2s ease-out infinite;
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:1px;
  height: 160px;
  background:#808080;
}

@media(max-width:650px){
  .scroll_down{
	  left: 90%;
}
}
@media(max-width:270px){
  .scroll_down{
	  left: 85%;
}
}

.news-bg {
  background-color: rgba(255, 255, 255, 1.00);
  background-size: cover;
  padding: 1.75rem 5rem 9.375rem; /* 60px 80px 150px → rem */
  display: block;
}
.news-all {
  margin: 0 auto;
  max-width: 73.75rem;
}
.news {
  display: flex;
  align-items: center;
}
.title {
  font-size: 1.875rem; /* 30px */
  font-weight: bold;
  letter-spacing: 0.1875rem; /* 3px */
  line-height: 2.1875rem; /* 35px */
}
.news-inner {
  width: 20%;
}

@media(max-width:930px){
	.news-inner{
		margin-right: 20px;
	}
}
	.news-inner h4 {
  		font-size: 0.875rem; /* 14px */
  		white-space: nowrap; /* ← 改行を防ぐ */
}
	.news-list {
  		flex: 1; /* ← これを追加 */
  		border-left: 0.0625rem solid; /* 1px → 0.0625rem */
 		padding-left: 3.75rem; /* 60px → 3.75rem */
}
@media(max-width:700px){
    .news {
   		display: block;      /* inline-block → block にして幅100%を取る */
    	width: 100%;
    }
	.news-list {
    	border-left: none;
    	padding-left: 0;
    	width: 100%;   /* 幅いっぱい */
    	margin: 0;                /* 左右の余白を消す */
    	box-sizing: border-box;   /* padding込みで100%に収める */
  	}
	.more {
    	float: none;        /* フロート解除 */
    	text-align: center;  /* 中央寄せ */
    	margin-top: 1rem;
    	width: 100%;        /* 幅いっぱいに */
    }
	.news-inner{
		margin: 0 0 30px 0;
	}
	.news-bg {
 		 background-color: rgba(255, 255, 255, 1.00);
  		 background-size: cover;
  		 padding: 1rem 2rem 9.375rem; /* 60px 80px 150px → rem */
  		 display: block;
    }
}

.post p {
  display: inline-block;
}
.post {
  display: flex;
  padding-bottom: 0.625rem; /* 10px → 0.625rem */
  margin-bottom: 0.625rem;
  border-bottom: dotted 1px rgb(200, 176, 91);
}
.day {
  margin-right: 1.25rem; /* 20px → 1.25rem */
  font-family: "Shippori Mincho B1 Bold", "Shippori Mincho B1 Medium", "Shippori Mincho B1 Regular", "Shippori Mincho B1 SemiBold";
  color: rgb(200, 176, 91);
  font-weight: 700;
}
.list-text {
  font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "serif";
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: rgb(51, 51, 51);
}
.more {
  max-width: 73.75rem;
  float: right;
}
.news-more {
  display: inline-block;
  margin-top: 1.25rem; /* 20px → rem */
  font-weight: 700;
  color: #333;
  text-decoration: none;
  font-size: 1.125rem;
}
.news-more:hover {
  color: #ff8219;
}
.about-bg {
  height: 100%;
  display: block;
  padding: 5rem 2.5rem; /* 80px 40px */
  background-image: url("../img/about-bg.jpg");
  background-color: rgba(255, 255, 255, 0.3);
  background-blend-mode: lighten;
  background-size: cover;
}
.about {
  max-width: 73.75rem; /* 1180px → rem */
  margin: 0 auto;
}
.about-inner {
  text-align: center;
  margin-bottom: 2.5rem; /* 40px → rem */
}
.about-image{
	max-width: 540px;
	width: 100%;
	height: 450%;
	margin-right: 60px;
	overflow: hidden;
}
.about-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-content {
  display: flex;
  margin-bottom: 6.25rem; /* 100px → rem */
  align-items: center;
  justify-content: center;
}

.copy {
  
  line-height: 3.125rem; /* 50px → 3.125rem */
}
.copy-a {
  font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "serif";
  font-size: 1.3rem; /* 28px → 1.75rem */
  font-weight: 600;
  line-height: 2rem; /* 45px → 2.8125rem */
  margin-bottom: 1.25rem; /* 20px → 1.25rem */
  letter-spacing: 0.3125rem; /* 5px → 0.3125rem */
}
.copy p{
	font-weight: 600;
	letter-spacing: 0.2rem;
}
@media(max-width:950px){
	.about-content{
		display: block;
		text-align: center;
	}
	.about-image {
		margin: 0 auto;
		max-width: 700px;   /* PCより大きく */
    	height: 520px;      /* 比率を保ちながら大きめに */
		margin-bottom: 30px;	
	}
	
	.about-image img{
		width: 100%;
		height: 100%;
	}
	.copy br{
		display: none;
	}
	
}
/* スマホ（〜767px） */
@media (max-width: 767px) {
  .about-image {
    width: 100%;        /* 画面幅いっぱい */
    height: auto;       /* 高さ自動 */
  }

  .about-image img {
    height: auto;
    object-fit: cover;
  }
}

@media(max-width:550px){
.copy br{
		display: block;
	}
}
@media(max-width:450px){
	.about-bg{
		padding: 80px 20px;
	}
	.about-content{
		margin-bottom: 3rem;
	}
	.copy-a{
		font-size: 1.5rem;
		line-height: 2.2rem;
		margin-bottom: 1rem;
/*		white-space: nowrap;*/
	}
/*
	.copy p{
		white-space: nowrap;
	}
*/
}
	.slider {
  		overflow: hidden;
  		position: relative;
  		margin: 0 calc(50% - 50vw) 80px;
}
.slide-track {
  display: flex;
  width: calc((18.75rem + 1.25rem) * 20); /* 画像20枚分 */
  animation: scroll 45s linear infinite;
}
.slide {
  flex: 0 0 auto;
  width: 18.75rem; /* 300px → rem */
  margin: 0.625rem; /* 10px → rem */
}
.slide img {
  width: 100%;
  /*  border-radius: 12px;*/
}
/* アニメーション */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* 半分流れたらループ */
}
.service {
  background-color: white;
  /*	margin: 0 calc(50% - 47vw);*/
  padding: 3.75rem 3.125rem; /* 60px 50px */
  box-sizing: border-box;
}
.service-inner {
  text-align: center;
  margin-bottom: 2.5rem; /* 40px → rem */
}

.service-content ul {
  display: flex;
  justify-content: center;
  gap: 2.5rem; /* 40px → rem */
  flex-wrap: wrap;
  list-style: none; /* ulのデフォルト丸ポチ削除 */
  padding: 0;
  margin: 0;
}
.service-content ul li {
  flex: 1 1 18.75rem; /* 300px → rem */
  max-width: 25rem; /* 400px → rem */
  text-align: left;
}
.service-content ul li h4 {
  color: rgb(200, 176, 91);
  margin: 0.625rem 0 0.425rem 0; /* 10px → rem */
  font-size: 1.25rem; /* 20px → rem */
}
.service-content img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.service-content p {
	line-height: 1.5rem;
}
.service-dateils{
	margin: 40px 0px 20px;
	text-align: center;
	font-weight: 700;
}
.service-dateils a{
	color: #000;
	transition: color 0.3s;
	font-size: 1.125rem;
}
.service-dateils a:hover {
  color: #ff8219;
}

.works-bg {
  width: 100%;
  display: block;
  padding: 3.75rem 6.25rem 6.25rem; /* 60px 100px 100px → rem */
  background-color: #fff;
}
.works {
  max-width: 73.75rem; /* 1180px → rem */
  margin: 0 auto;
}
.works-inner {
  text-align: center;
  margin-bottom: 2.5rem; /* 40px → rem */
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; /* 20px → rem */
  max-width: 62.5rem; /* 1000px → rem */
  margin: 0 auto 2.5rem; /* 40px → rem */
}
.work-item {
  background: #fff;
  border: 0.0625rem solid #eee; /* 1px → rem */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05); /* 2px 4px → rem */
  overflow: hidden;
  position: relative;
}
.work-thumb {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
/* オーバーレイ */
.work-thumb::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0);
  transition: background-color 0.3s;
}

/* ホバー時に画像暗くする */
.work-thumb:hover::before {
  background-color: rgba(0,0,0,0.4);
}

/* タイトルオーバーレイ */
.work-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 1px;
  font-weight: 400;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* ホバー時にタイトル表示 */
.work-thumb:hover .work-title-overlay {
  opacity: 1;
}

.works-more {
  text-align: center;
  margin-top: 1.25rem; /* 20px → rem */
  font-weight: 700;
}
.works-more a {
  color: #000;
  transition: color 0.3s;
  font-size: 1.125rem;
}
.works-more a:hover {
  color: #ff8219;
}
@media(max-width:900px){
	.works-grid {
  		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width:600px){
	.works-list{
		display: block;
	}
	.works-list .work-item:nth-child(n+4) {
    	display: none; /* 4番目以降を非表示 */
  	}
	.work-item{
 		margin-bottom: 30px;
	}
	.works-bg {
	    padding: 3.75rem 3.25rem 6.25rem;
	}
	.works-grid {
  		grid-template-columns: repeat(1, 1fr);
	}
}

.background {
  background-image: url("../img/top-background.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 400px;
  position: relative; /* ← 必須 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.b-copy{
  color: #fff; /* テキストを見やすく 白に */
  text-align: center;
  padding: 0 20px; /* スマホでも見やすくする */
}
.b-copy p{
  font-size: 0.875rem;
  letter-spacing: 3px;
  line-height: 3;
  font-weight: 500px;
  font-family: "Shippori Mincho B1 Bold", "Shippori Mincho B1 Medium", "Shippori Mincho B1 Regular", "Shippori Mincho B1 SemiBold";
}

.blog-bg {
  height: 100%;
  display: block;
  padding: 6.25rem 0 9.375rem; /* 100px 0 150px → rem */
  background-color: #fafafa;
}
.blog-bg a{
  text-decoration: none;
}
.blog-all {
  max-width: 73.75rem; /* 1180px → rem */
  margin: 0 auto;
  padding: 0 2.5rem; /* 40px → rem */
}
.blog-flex {
  display: flex;
  justify-content: center;
}

.blog-inner {
  margin-right: 2.5rem; /* 40px → rem */
  border-right: 0.0625rem solid #000; /* 1px → rem */
  padding-right: 2.5rem; /* 40px → rem */
  display: block;
  height: 11.875rem; /* 190px → rem */
}
.blog-list {
  display: flex;
  justify-content: space-between;
/*  gap: 1.25rem;*/
  max-width: 73.75rem; /* 1180px → rem */
  margin: 0 auto;
}
.diary {
  width: 30%;
}
.diary img {
  width: 100%;
  margin-bottom: 10px;
  display: block;
  height: 190px;
  object-fit: cover;
}

.b-info{
	display: flex;
	align-items: baseline;
}
.blog-more {
  margin: 2.5rem 0; /* 40px → rem */
  max-width: 73.75rem; /* 1180px → rem */
  float: right;
  font-weight: 700;
}
.blog-more a {
  color: #000;
  font-size: 1.125rem;
}
.blog-more a:hover {
  color: #ff8219;
}
.b-day {
  font-family: "Shippori Mincho B1 Bold", "Shippori Mincho B1 Medium", "Shippori Mincho B1 Regular", "Shippori Mincho B1 SemiBold";
  color: rgb(200, 176, 91);
  font-weight: 700;
}
.b-cat{
	font-size: 0.75rem;
	color: #464646;
	padding-left: 5px;
}

.blog-title-overlay{
	margin-top: 0.625rem;
	color: #464646;
}

@media(max-width:700px){
	.blog-bg{
		padding: 4rem 2rem 6rem; /* 100px 0 150px → rem */
	}
	.blog-all{
		padding: 0;
	}
	.blog-flex{
		display: block;
	}
    .blog-inner {
   		display: block;      /* inline-block → block にして幅100%を取る */
    	width: 100%;
		margin:0 0 30px 0;
		padding: 0;
		height: auto;
		border: none;
    }
	.blog-list {
		display: block;
    	border-left: none;
    	padding-left: 0;
    	width: 100%;   /* 幅いっぱい */
    	margin: 0;                /* 左右の余白を消す */
    	box-sizing: border-box;   /* padding込みで100%に収める */
  	}
	.diary{
		width: 100%;
		margin-bottom: 60px;
	}
	
	.diary img {
	  height: 240px;
	}
	
	.blog-more {
    	float: none;        /* フロート解除 */
    	text-align: center;  /* 中央寄せ */
    	margin: 1rem 0 0 0;
    	width: 100%;        /* 幅いっぱいに */
    }

}

/*

.contact {
  max-width: 73.75rem;
  display: block;
  margin: 0px auto;
  padding: 2.5rem;
  text-align: center;
  background-color: #c0c0c0;
  text-align: center;
}
.c-wrap h2{
	font-size:1.875rem;
	letter-spacing: 0.1875rem;
	font-weight: bold;
}
.c-subt{
	font-size: 0.9375rem;
	padding: 15px 0px 40px;
}

.c-btn{
	border: 1px solid #333;
	padding: 10px 20px;
	margin-bottom: 20px;
	color: #333;
}
.c-dis{
	font-size:0.875rem;
	letter-spacing: 1px;
	line-height: 25px;
	padding-top: 30px;
}
*/
@media(max-width:500px){

.diary img {
  width: 175px;
  height: 125px;
  margin-bottom: 0px;
	}
.diary a{
  display: flex;
  align-items: center;
	}
.diary {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: solid 1px #c0c0c0;
    }
.blog-thumb{
  margin-right: 20px;		
	}
.b-info{
	display: block;
}
.b-cat{
	font-size: 0.75rem;
	color: #464646;
	padding-left: 0px;
}	
}