/*
Theme Name: MonjuanDesign
Theme URI: http://monjuan-design.com
Author: 赤坂文殊庵
Author URI: http://monjuan-design.com
Description: 鳥取市のグラフィックデザイン＆ホームページ制作
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: monjuan
*//* CSS Document */
   * 
/* 文字コード指定 */
@charset "UTF-8";
/* CSS Document */
html {
  font-size: 16px; /* 基準サイズ: 1rem = 16px */
}
html, body {
  margin: 0;
  padding: 0;
}
main {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  font-family: 'Cormorant Garamond' , 'YuMincho', sans-serif;
  font-size: 0.95rem; /* 1rem 16px */
  line-height: 1.5;
}

/* ロゴアニメーション用 */
#logo-animation {
  position: fixed;
  top: 0;
  left: 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: 1;
  transform: translateY(50px); /* 下からスタート */
  animation: logoIntro 1.5s ease-in-out forwards;
}

/* 下から出て上に消えるアニメーション */
@keyframes logoIntro {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}

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


/* 初期状態：非表示＆下にずらす */
.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.scrolled {
  color: #000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
*/
.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 2rem; /* 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: #ff8219; /* ホバー時は同じ赤 */
}

/* ロゴのフェードアニメーションを自然にする */
.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: #ff8219;
}
/* 項目ごとのアイコン設定 */
.n-about a::before {
  content: "\f007"; /* ユーザーアイコン */
}
.n-service a::before {
  content: "\f013"; /* 歯車 */
}
.n-works a::before {
  content: "\f0b1"; /* ブリーフケース */
}
.n-news 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: #ff8219;
}
/* 既存の .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: #ff8219; /* ホバー時は赤 */
  }
}

@media (max-width: 1100px) {
	.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) {
	.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;
}

.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: 800px; /* 650px → 40.625rem */
  overflow: hidden;
  position: relative;
}
.mainvisual-inner {
  width: 100%;
  height: 800px;
  visibility: hidden;
}
.mainvisual-inner.slick-initialized {
  visibility: visible;
}
/* slick のスライドを重ねて opacity で切り替え */
.mainvisual-inner .slick-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.mainvisual-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をトリミングして全画面に収める */
  object-position: center;
  display: block;
  transform: scale(1.05);
  transition: transform 8s ease-in-out; /* ← アニメーションをCSSアニメーションではなくtransitionで */
}
/* アクティブスライドだけさらにズーム */
/*
.mainvisual-inner .slick-active img {
  transform: scale(1.15);
}
*/
.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: 800px; /* 650px → 40.625rem */}
.mainvisual-inner {
  height: 100vh;
}
.mainvisual-inner img {
  height: 100vh;
}
  
}

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

.wave {
  height: 60px;
}

.container_01 {
  position: absolute;
  bottom: 112px;
  right: 20px;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.container_01 a:hover {
  opacity: 0.7;
}

.scroll-down_01 {
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

.circle-text_01 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: rotate 20s linear infinite;
}

.circle-text_01 span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14px;
  color: #fff;
  white-space: pre;
  transform-origin: 0 0; /* ← 中心からの回転を安定させる */
}

.arrow_01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 40px;
  transform: translate(-50%, -50%);
  animation: scroll_01 3s infinite;
}

.arrow_01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 1px;
  background-color: #fff;
  transform: translateX(-50%);
}
.arrow_01::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateX(-50%) rotate(-45deg);
}

@keyframes rotate {
  from   { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scroll_01 {
  0%   { transform: translate(-50%, -50%) translateY(-10px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(10px); opacity: 0; }
}
/* --- スマホ対応 --- */

@media (max-width: 1100px) {
  .container_01 {
    bottom: 80px;
  }
}
@media (max-width: 767px) {
  .container_01 {
    width: 120px;
    height: 120px;
    bottom: 110px;
    right: 50px;
  }
  .circle-text_01 span {
    font-size: 10px;
  }
  .arrow_01 {
    width: 14px;
    height: 28px;
  }
}
.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: 'Raleway', sans-serif;
  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;
}
.news-more:hover {
  color: #ff8219;
}
.about-bg {
  height: 100%;
  display: block;
  padding: 5rem 2.5rem; /* 80px 40px */
  background-image: url("https://monjuan-design.com/wp-content/themes/monjuan/assets/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-inner.fade-in.show {
  transition-delay: 0s; /* すぐ出る */
}
.about-image.fade-in.show {
  transition-delay: 0.5s; /* 0.5秒遅れて出る */
}
.copy.fade-in.show {
  transition-delay: 1s; /* 0.5秒遅れて出る */
}
.about-content {
  display: flex;
  margin-bottom: 6.25rem; /* 100px → rem */
  align-items: center;
  justify-content: center;
}

.about-image {
  margin-right: 3.75rem; /* 60px → rem */
}
.copy {
  
  line-height: 3.125rem; /* 50px → 3.125rem */
}
.copy-a {
  font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "serif";
  font-size: 1.75rem; /* 28px → 1.75rem */
  font-weight: 600;
  line-height: 2.8125rem; /* 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-right: 0px;
	}
	
	.about-image img{
		margin-bottom: 20px;
		width: 100%;
		height: 100%;
	}
	.copy br{
		display: none;
	}
	
}
/*
@media(max-width:450px){
	.copy br{
		display: none;
	}
}
*/

@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 * 10 + 1.25rem * 10); /* 300px → 18.75rem, 10px → 0.625rem */ /* 画像10枚分（5枚×2セット）＋マージン */
  animation: scroll 30s 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.fade-in.show {
  transition-delay: 0s; /* すぐ出る */
}
.service-inner.fade-in.show {
  transition-delay: 0.5s; /* すぐ出る */
}
.graphic.fade-in.show {
  transition-delay: 0.75s; /* 0.5秒遅れて出る */
}
.web.fade-in.show {
  transition-delay: 1s; /* 0.5秒遅れて出る */
}
.direction.fade-in.show {
  transition-delay: 1.25s; /* 0.5秒遅れて出る */
}
.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;
}
.works-bg {
  height: 100%;
  display: block;
  padding: 3.75rem 6.25rem 6.25rem; /* 60px 100px 100px → rem */
  background-image: url("https://monjuan-design.com/wp-content/themes/monjuan/assets/img/demo-works.jpg");
  background-size: cover;
}
.works {
  max-width: 73.75rem; /* 1180px → rem */
  margin: 0 auto;
}
.works-inner {
  text-align: center;
  margin-bottom: 2.5rem; /* 40px → rem */
}
/* 遅延用 */
.works-inner.fade-in.show {
  transition-delay: 0.25s; /* すぐ出る */
}
.works-grid.fade-in.show {
  transition-delay: 0.5s; /* すぐ出る */
}
.works-more.fade-in.show {
  transition-delay: 0.75s; /* すぐ出る */
}
.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;
}
.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* トリミングしてバランス良く表示 */
  display: block;
}
.works-more {
  text-align: center;
  margin-top: 1.25rem; /* 20px → rem */
  font-weight: 700;
}
.works-more a {
  color: #000;
}
.works-more a:hover {
  color: #ff8219;
}
@media(max-width:900px){
	.works-grid {
  		grid-template-columns: repeat(2, 1fr);}
}

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

.background {
  background-image: url("https://monjuan-design.com/wp-content/themes/monjuan/assets/img/kiji0186_04.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 400px;
}
.contact-bg {
  height: 100%;
  display: block;
  padding: 5rem 6.25rem; /* 80px 100px → rem */
  background-image: url("https://monjuan-design.com/wp-content/themes/monjuan/assets/img/demo-works.jpg");
  background-size: cover;
}
.contact {
  max-width: 73.75rem; /* 1180px */
  margin: 0 auto;
  border: 0.0625rem solid rgb(200, 176, 91); /* 1px */
  padding: 2.5rem 3.75rem; /* 40px 60px */
}
/* 遅延用 */
.contact.fade-in.show {
  transition-delay: 0s; /* すぐ出る */
}
.contact-inner {
  text-align: center;
  margin-bottom: 1.25rem; /* 20px → rem */
}
.contact-discription {
  text-align: center;
  margin-bottom: 3.75rem; /* 60px → rem */
  letter-spacing: 0.2rem;
  line-height: 1.8rem;
}
.copy-b{
	margin-bottom: 20px;
	font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "serif";
	letter-spacing: 5px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem; /* 20px */
}
.form-group label {
  width: 25%;
  font-size: 0.9375rem; /* 15px */
  color: #333;
  font-weight: 700;
}
.required {
  display: inline-block;
  margin-left: 0.5rem; /* 8px */
  background: #e63946;
  color: #fff;
  font-size: 0.75rem; /* 12px */
  padding: 0.125rem 0.375rem; /* 2px 6px */
  border-radius: 0.25rem; /* 4px */
}
.form-group input, .form-group textarea {
  flex: 1;
  padding: 0.4375rem 0.9375rem; /* 7px 15px */
  font-size: 0.9375rem; /* 15px */
  border: 1px solid #ccc;
  border-radius: 0.25rem; /* 4px */
  background: #fff;
}
.form-group textarea {
  resize: vertical;
}
.form-button {
  text-align: center;
  margin: 3.125rem 0 2.5rem; /* 50px 0 40px → rem */
}
.form-button button {
  background: #000;
  color: #fff;
  font-size: 1rem; /* 16px */
  padding: 0.75rem 2.5rem; /* 12px 40px */
  border: solid 0.125rem #000;
  border-radius: 1.5625rem; /* 25px */
  cursor: pointer;
  transition: 0.3s;
}
.form-button button:hover {
  background: #fff;
  color: #333;
}

/* 画面幅が 768px 以下のとき */
@media (max-width: 768px) {
  .contact-bg {
    padding: 2rem 1.5rem; /* 横幅を狭く */
    background-position: center;
  }

  .contact {
    padding: 1.5rem; /* 余白を減らす */
  }

  .form-group {
    display: block; /* 縦並びにする */
    margin-bottom: 1.5rem;
  }

  .form-group label {
    width: 100%; /* ラベルを上に */
    margin-bottom: 0.5rem;
    display: block;
  }

  .form-group input,
  .form-group textarea {
    width: 100%;
  }

  .form-button {
    margin: 2rem 0;
  }

  .form-button button {
    width: 100%; /* ボタンを横幅いっぱいに */
    max-width: 20rem;
  }
}

/* 画面幅が 480px 以下のとき（スマホ縦向き） */
@media (max-width: 480px) {
  .contact-bg {
    padding: 1.5rem 1rem;
  }

  .copy-b {
    font-size: 1rem;
  }

  .form-button button {
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
  }
}
.blog-bg {
  height: 100%;
  display: block;
  padding: 6.25rem 0 9.375rem; /* 100px 0 150px → rem */
  background-image: url("https://monjuan-design.com/wp-content/themes/monjuan/assets/img/24841738_s.jpg");
  background-color: rgba(255, 255, 255, 0.3);
  background-size: cover;
}
.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.fade-in.show {
  transition-delay: 0s; /* すぐ出る */
}
.blog-more.fade-in.show {
  transition-delay: 0s; /* すぐ出る */
}
.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;
}
.blog-more {
  margin: 2.5rem 0; /* 40px → rem */
  max-width: 73.75rem; /* 1180px → rem */
  float: right;
  font-weight: 700;
}
.blog-more a {
  color: #000;
}
.blog-more a:hover {
  color: #ff8219;
}
.b-day {
  font-family: 'Raleway', sans-serif;
  color: rgb(200, 176, 91);
  font-weight: 700;
}

@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;
	}
	
	.blog-more {
    	float: none;        /* フロート解除 */
    	text-align: center;  /* 中央寄せ */
    	margin: 1rem 0 0 0;
    	width: 100%;        /* 幅いっぱいに */
    }

}

.onlineshop {
  max-width: 73.75rem; /* 1180px → rem */
  display: block;
  margin: 0px auto;
  padding: 2.5rem; /* 40px → rem */
  text-align: center;
}
.onlineshop.fade-in.show {
  transition-delay: 0.5s; /* すぐ出る */
}
.onlineshop a {
  max-width: 100%;
  display: inline-block;
  height: 100%;
}
.onlineshop a img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2.5rem auto; /* 40px → rem */
}
@media(max-width:650px){
.onlineshop {
  padding: 0 2rem; /* 40px → rem */
  text-align: center;
}
}
@media(max-width:550px){
.onlineshop {
  padding: 0 1.8rem; /* 40px → rem */
  text-align: center;
}
}
@media(max-width:500px){
.onlineshop a img{
  width: 100%;
  height:70px; 
}
}


.footer-bg {
  height: 100%;
  display: block;
  padding: 4.25rem 3.25rem ; /* 100px → rem */
  background-color: rgba(48, 48, 48);
  background-size: cover;
  color: #fff;
}
.footer {
  max-width: 73.75rem; /* 1180px → rem */
  margin: 0 auto;
}
.footer-content {
  display: flex;
  justify-content: space-between;
}
.footer-info {
  margin-right: 2.5rem; /* 40px → rem */
}
.footer-info p{
	font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "serif";
	letter-spacing: 0.1rem;
}
.footer-logo img {
  max-width: 100%;
  height: auto;
}
.footer-list {
  width: 60%;
}
.footer-list ul {
  display: flex;
  /*	justify-content: space-between;*/
  flex-wrap: wrap;
}
.footer-list ul li {
  margin-right: 3rem; /* 60px → rem */
	
}
.footer-list ul li a {
  position: relative;
  display: inline-flex; /* アイコン＋文字を横並び */
  align-items: center;
  font-size: 1rem; /* 16px */
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
  line-height: 2.5;          /* デフォルトの約2倍に */
}
/* 丸アイコン（Font Awesome 使用） */
.footer-list ul li a::before {
  content: "\f105"; /* fa-angle-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  font-size: 0.75rem; /* 12px */
  border-radius: 50%;
  background-color: #eee;
  color: #000;
  margin-right: 0.5rem; /* 8px */
  transition: background-color 0.3s, color 0.3s;
}
/* テキスト部分 */
.footer-list ul li a span {
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease;
}
/* 下線（transformで伸縮） */
.footer-list ul li a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.125rem; /* 2px → rem */
  width: 100%;
  height: 0.0625rem; /* 1px → rem */
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left; /* ← 初期は左から伸びる */
  transition: transform 0.3s ease;
}
/* hover時 */
.footer-list ul li a:hover::before {
  background-color: #ff8219;
  color: #fff;
}
.footer-list ul li a:hover span {
  transform: translateX(0.25rem); /* 4px → rem */
}
.footer-list ul li a:hover span::after {
  transform: scaleX(1);
  transform-origin: left; /* ← 左から右へ伸びる */
}
/* hover解除時に右から消える */
.footer-list ul li a span::after {
  transition: transform 0.3s ease, transform-origin 0s;
}
.footer-list ul li a:not(:hover) span::after {
  transform: scaleX(0);
  transform-origin: right; /* ← 右に向かって縮む */
}
.footer-button {
  margin: 3.125rem 0 2.5rem; /* 50px 40px */
}
.footer-button button {
  display: inline-flex;              /* アイコンと文字を横並び中央揃え */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                       /* アイコンと文字の間隔 */
  
  background: linear-gradient(90deg, rgba(255,112,30,1) 0%, rgba(255,191,48,1) 50%, rgba(255,77,48,1) 100%);
  background-size: 200% 100%;
  
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 2rem;             /* 上下・左右の余白 */
  border-radius: 9999px;             /* 完全な pill 型にする */
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;               /* 改行を防ぐ */
  min-width: 14rem;                  /* 潰れない最小幅 */
}
.footer-button button:hover {
  background-position: 100% 0;
}
.footer-button i {
  color: #FFF; /* アイコンの色 */
  
}
.footer-sns {
  display: flex;
  margin-bottom: 1.25rem; /* 20px → rem */
  align-items: center;
  gap: 0.5rem; /* 8px → rem */
}
.footer-sns p {
  letter-spacing: 1px;
}
.footer-sns a {
  display: flex; /* aの中でもflexにする */
  align-items: center;
  font-size: 1.5rem; /* 24px → rem */
  color: #fff; /* アイコンの色（白） */
  text-decoration: none;
}
.footer-sns a:hover {
  color: #ff8219;
}


/* 768px以下（タブレット・スマホ） */
@media (max-width: 768px) {
  .footer-bg {
    padding: 3rem 1.5rem;
    text-align: center;
  }

  .footer-content {
    display: block; /* 縦並びに変更 */
  }

  .footer-info {
    margin: 0 0 2rem;
  }

  .footer-info p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .footer-list {
    width: 100%;
  }

  .footer-list ul {
    justify-content: center; /* 中央寄せ */
  }

  .footer-list ul li {
    margin: 0 1rem 1rem 1rem; /* 横並びでも間隔確保 */
  }

  .footer-button {
    margin: 2rem 0;
  }

  .footer-button button {
    width: 100%;
    max-width: 20rem;
  }

  .footer-sns {
    justify-content: center;
  }
}

/* 480px以下（スマホ縦） */
@media (max-width: 480px) {
  .footer-bg {
    padding: 3rem 1.5rem;
  }

  .footer-list ul {
    display: grid;  
    grid-template-columns: 1fr 1fr; /* 縦2列 */
    gap: 1rem 2rem; /* 行間1rem, 列間2rem */
  }

  .footer-list ul li {
    width: auto; /* gridに任せる */
  }

  .footer-button {
    margin: 2rem 0;
    text-align: center;
  }

  .footer-button button {
    width: 100%;
    max-width: 20rem;
  }

  .footer-sns {
    justify-content: center;
    margin-top: 2rem;
  }

  .footer-sns a {
    font-size: 1.75rem;
  }
}
/* --- 300px 以下の超小さい画面 --- */
@media (max-width: 300px) {
  .footer-button button {
    font-size: 0.75rem;     /* テキスト小さく */
    padding: 0.5rem 1rem;   /* 内側の余白を縮小 */
    white-space: normal;    /* 必要なら改行を許可 */
    text-align: center;     /* テキストを中央寄せ */
  }
}

/* デスクトップ幅対応：701px以上 */
@media (min-width: 701px) {
  /* ラッパー共通：親要素の余白制御 */
  body, html, #page, .site {
    margin: 0;
    padding: 0;
  }

  /* 内容幅制限ラッパー */
  .container, .news-all, .about, .works, .contact, .blog-all {
    max-width: 73.75rem; /* 1180px 相当 */
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
  }

  /* グリッド・フレックス用調整（デスクトップ） */
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 0 auto 2.5rem;
  }

  .blog-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 73.75rem;
    box-sizing: border-box;
  }

  /* 画像・メインビジュアル幅制御 */
  .mainvisual-inner img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }

  /* ヘッダーラッパー余白制御 */
  .header_inner {
    width: 100%;
    max-width: 73.75rem;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }
}