body{background-color:#fff!important;}

.ma-main { font-family: "Noto Sans JP", sans-serif; color:#222; }

/* Hero */
.ma-hero {
  background: linear-gradient(120deg,#004C70,#0B7BA0);
  color:#fff; text-align:center; padding:100px 20px;
}
.ma-hero__inner h1{ font-size:clamp(26px,4vw,42px); margin-bottom:10px; }
.ma-hero__inner p{ font-size:clamp(14px,1.6vw,18px); }

/* About */
.ma-about { padding:80px 20px; text-align:center; }
.ma-about h2{ color:#004C70; margin-bottom:20px; }

/* Features */
.ma-features { background:#f7fafa; padding:80px 20px; text-align:center; }
.ma-features__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.ma-features__list li{
  background:#fff; border:1px solid #ddd; border-radius:8px;
  padding:20px; width:300px; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.ma-features__list i{ display:block; font-size:28px; color:#0B7BA0; margin-bottom:10px; }

/* Cases */
.ma-cases { padding:80px 20px; text-align:center; }
.ma-cases__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:20px; }
.ma-case img{ width:100%; border-radius:8px; }
.ma-case p{ margin-top:8px; color:#333; }

/* CTA */
.ma-cta { background:#0B7BA0; color:#fff; text-align:center; padding:80px 20px; }
.ma-btn{
    display: block;
    background: #464D67;
    color: #fff;
    padding: 3px 0;
    border-radius: 999px;
    /* font-weight: 700; */
    text-decoration: none;
    transition: .3s;
    max-width: 150px;
    text-align: center;
    width: 100%;
    margin: 0 auto 20px;
}




/* 変数＆ユーティリティ（既にあれば省略可） */
:root{
  --c-accent: #40E0D0; /* 水色 */
  --c-ma-dk: #004C70;
  --c-txt:   #222;
  --c-white: #fff;
}
.container{ max-width:1200px; padding:0 16px; margin:0 auto; }
.sp-only{ display:none; }
@media (max-width:767px){ .sp-only{ display:inline; } }

/* ===== Business Succession ブロック ===== */
.ma-intro{
  position:relative;
  background:#fff;
  color:var(--c-txt);
  padding:56px 0 48px; /* 上部にラベルの分だけ余白 */
	width: 90%;
    margin: 0 auto;
}
.ma-intro__inner{ position:relative; }

/* 左上ラベル：PC左上／SP中央上 */
.ma-intro__label {
	color: #E3EAF4;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: 82px;
    line-height: 1;
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
	
}
@media (max-width:767px){
  .ma-intro__label{font-size: 40px;}
}

/* 1200pxグリッド：左テキスト／右画像。画像は約520px想定 */
.ma-intro__grid{
  display:grid; gap:32px; align-items:center;
  grid-template-columns: 1fr 520px;
}
@media (max-width:991px){
  .ma-intro__grid{ grid-template-columns:1fr; }
}

/* タイトル */
.ma-intro__title {
    margin: 0 0 12px;
    line-height: 1.35;
    font-size: 28px;
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
}

/* タイトル直下の薄い青ボーダー（左端→画像手前まで＝テキスト列幅いっぱい） */
.ma-intro__bar{
  display:block; height:8px; width:100%;
  background: #E3EAF4;
  
  margin:6px 0 18px;
}
@supports not (color-mix(in srgb, red, red)){
  .ma-intro__bar{ background: #E3EAF4;} /* フォールバック */
}

/* 本文とボタン */
.ma-intro__lead{ margin:0 0 16px; }
.ma-intro_text{font-size:0.8em;}
.ma-intro__actions{ margin:0; }
.ma-intro__btn{
  display:inline-block; text-decoration:none; font-weight:700;
  background:#3c4a64; color:#fff; padding:.8rem 1.4rem; 
	margin:20px auto;
}
a.ma-intro__btn:hover,
a.ma-btn.ma-btn--ghost:hover,
a.ma-head__more:hover{
	color:#ffffff;
	opacity:0.7;
}
.ma-intro__btn:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* 右画像 */
.ma-intro__media img{
  width:100%; height:auto; display:block; 
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* SPで画像を下・テキストを上（デフォの並びでOK） */



/* 実績紹介 */
/* 見出し */
.ma-head{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 16px; }
.ma-head__title{ font-size:clamp(20px,2.4vw,28px); margin:0; }
.ma-head__more{
    text-decoration: none;
   
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: underline;
    filter: drop-shadow(0px 0px 6px black);

    padding-bottom: 50px;
}

/* ビューポート＆トラック */
.ma-cases__viewport{ position:relative; overflow:hidden; }
.ma-cases__track{ display:flex; gap:20px; will-change: transform; transition: transform .5s ease; padding:4px 0 8px; }

/* 3枚見せ（PC）／2枚（TB）／1枚（SP） */
.ma-casecard{
  flex: 0 0 calc(33.333% - 13.4px);
  background:#fff;  overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
@media (max-width: 991px){
  .ma-casecard{ flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 599px){
  .ma-casecard{ flex: 0 0 100%; }
}

.ma-casecard__figure{ display:block; }
.ma-casecard__img{ width:100%; height:auto; display:block; }
.ma-casecard__body{ padding:14px 14px 16px; }
.ma-casecard__title.ma-casecard__title {
    font-size: 1rem;
    margin: 0 0 6px;
    line-height: 1.4;
    background: #464D67;
    padding: 10px;
    text-align: center;
    color: #fff;
}
.ma-casecard__excerpt{ font-size:.95rem; color:#444; margin:8px 0 12px; }

.ma-cases__ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); color:#fff; border:0; width:44px; height:44px; border-radius:50%;
  font-size:24px; cursor:pointer;
}
.ma-cases__ctrl--prev{ left:12px; }
.ma-cases__ctrl--next{ right:12px; }

	.ma-head{
		display:block;
		text-align:center;
		padding: 30px 0;
	}
.ma-head__title{
    margin: 0;
    font-size: 55px;
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
    color: #464D67;
}
	.ma-head__title span{
		display:block;
		font-size:0.4em;
	}
	

	


.seccsesbk {
  position: relative;
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url(https://mt-web.moo.jp/bay-creation/wp-content/themes/cocoon-child-master/img/ma/success_bk.jpg)no-repeat center top / cover;
  padding-top: 120px;
  padding-bottom: 100px;
  text-align: center;
  overflow: hidden; /* 疑似要素がはみ出さないように */
}

/* 上に白い三角をかぶせる（中央が尖って“へこみ”に見せる） */
.seccsesbk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 50vw solid transparent;  /* 三角の左右の幅 */
  border-right: 50vw solid transparent;
  border-top: 60px solid #fff;          /* 三角の高さと色（背景と同じ） */
  z-index: 1;
}

/* 内容を手前に */
.seccsesbk > * {
  position: relative;
  z-index: 2;
}



#howtoma{
    margin-top: -100px;
    padding-top: 140px;
}
	
		.howtoma_title{
			background: #464D67;
			text-align: center;
			font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
			color: #fff;
			font-size: 48px;
			padding: 20px 5px;
		}
		.howtoma_title span{
			display: block;
			margin-top: 10px;
			font-size: 24px;
		}
		.howtoma{
			background-image: url(https://mt-web.moo.jp/bay-creation/wp-content/themes/cocoon-child-master/img/ma/howtoma_bk.jpg);
			background-size: cover;
			width: 100%;
			padding: 80px 0;
			
		}
		.howtoma_text_wrap{
			background-color: rgba(255,255,255,0.50);
			max-width: 800px;
			width: 90%;
			margin: 0px auto;
			text-align: center;
			padding: 30px 10px;
		}
		
		.howtoma_title_in{
			    font-size: 30px;
border-bottom: #E3EAF4 solid 8px;
    padding-bottom: 20px;
    margin-bottom: 20px;
			font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
		}
		
	.maimg_wrap{
			background-color: #E3EAF4;
			padding: 80px 0;
			
		}
		.maimg_wrap h2{
			font-size: 36px;
			text-align: center;
			
			font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
		}
		.maimg_wrap img{
			max-width: 800px;
			width: 90%;
			margin: 50px auto 80px;
		display: block;
		    filter: drop-shadow(4px 4px 6px #dcdcdc);
		}
		
	.maobj_wrap_h{
				max-width: 1200px;
			margin: 50px auto 0;
				font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
			font-size: 24px;
		width:90%;
		
		}
		.maobj_wrap{
			max-width: 1200px;
			margin: 50px auto;
			width:90%;
		}
		.maobj .ma-intro__bar{width: 40%;}
		.maobj_in {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    align-items: center;
			flex-wrap: wrap;
}
		.masobj_in_text{
			width: 47%;
		}
		.objtext_h{
			font-weight: bold;
			    margin-bottom: 10px;
		
		}
		.objtext_h span{
			background-color: #464D67;
			color: #fff;
			margin-right: 10px;
			padding: 0 10px;
		}
		.masobj_in_img{
			width: 47%;
		}


@media (max-width:767px){}


	.maexit_wrap{
			max-width: 1200px;
			width: 90%;
			margin: 80px auto;
		}
		.maexit_wrap_in{
			display: flex;
			justify-content: space-between;
			margin: 80px auto;
			flex-wrap:wrap;
			
		}
.maexit .ma-intro__bar{
width: 40%;	}
		.maexit_l,.maexit_l{
			width: 47%;
		}
		
		.maexit_l_h{
			background-color: #E3EAF4;
			padding: 10px;
			font-weight: bold;
			margin-bottom: 30px;
			    display: inline-block;
		}
		
		.maexit_l ul{
			border-left: solid 5px #E3EAF4;
			margin-top: 30px;
			
		}
		.maexit_l ul li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
}
		
		.maexit_l ul li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9em;
  line-height: 1.4;
}
		.maexit_l ul p,.maexit_l ul li{
			margin-left: 10px;
		}
		.maexit_l ul p{
			margin-bottom: 10px;
		}


	/* ===== Flow（STEPタイムライン） ===== */
.bc-flow{ padding:36px 0 48px;
		background: #E3EAF4;}
		.container.flow {
    background-color: #fff;
    padding: 50px;
    margin: 80px auto;
}
		
.bc-flow__heading{
  text-align:center; font-size:clamp(20px,2.6vw,28px); margin:0 0 24px;
  font-weight:700; color:#222;
	
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
}

.bc-flow__list{
  list-style:none; margin:0; padding:0; position:relative;
}

/* 縦ライン（PCのみ表示） */
@media (min-width:768px){
  .bc-flow__list::before{
    content:""; position:absolute; left:85px; top:0; bottom:0;
    width:2px; background:#B7C6D9; /* ライン色 */
  }
}

.bc-flow__item{
  display:grid; grid-template-columns: 170px 1fr; gap:24px;
  align-items:flex-start; position:relative; margin-bottom:28px;
}

/* 左の丸バッジ */
.bc-flow__badge{
  width:110px; height:110px; border-radius:999px;
  background:#464D67; color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  box-shadow:0 6px 18px rgba(0,0,0,.12); margin:0 auto; position:relative; z-index:1;
}
.bc-flow__step{ font-size:14px; letter-spacing:.06em; opacity:.9; }
.bc-flow__num{ font-size:36px; line-height:1; font-weight:700; }

/* 右側：見出し＋説明パネル */
.bc-flow__title{
  margin:6px 0 10px; font-weight:800;
}
.bc-flow__panel{
  background:#E8F1FA; border:1px solid #d8e5f3; border-radius:10px;
  padding:14px 16px; box-shadow:0 6px 16px rgba(0,0,0,.08);
  color:#243042;
}

/* スマホ：縦積み、ライン非表示、丸を上に */
@media (max-width:767px){
  .bc-flow__item{ grid-template-columns: 1fr; }
  .bc-flow__list::before{ display:none; }
  .bc-flow__badge{ width:92px; height:92px; margin-bottom:8px; }
  .bc-flow__num{ font-size:30px; }
}




/* ベース */
.ma-cf7 .req{ background:#c0392b; color:#fff; border-radius:10px; padding:2px 6px; font-size:12px; }
.ma-cf7__row{ margin:14px 0; }
.ma-cf7__label{ display:block; margin:0 0 6px; font-weight:700; color:#27496b; }

/* 入力UI */
.ma-cf7__input,
.ma-cf7__textarea,
.ma-cf7__select{
  width:100%;
  background:#fff;
  border:1px solid #cfdbea;
  border-radius:8px;
  padding:10px 12px;
  box-sizing:border-box;
  font-size:16px;
}
.ma-cf7__textarea{ min-height:160px; }

/* ラジオ横並び */
.ma-cf7__radios label{ margin-right:18px; display:inline-flex; align-items:center; gap:6px; }

/* セクション全体の淡色ボックス（ページ側で囲いたいとき） */
.ma-contact{ background:#ffffff; padding:0px 16px;}

/* 送信ボタン既存デザインを流用 */
.ma-cf7 .ma-btn{ max-width:220px; }

.ma-contact .container{
	background-color:#E3EAF4;
	padding:80px;
	margin: 80px auto;
}


.ma-contact__title{ text-align:center; margin:0 0 24px;font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho"}
.wpcf7-form p{ margin:0 0 14px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  width:100%; background:#fff; border:1px solid #d8e5f3; border-radius:8px;
  padding:10px 12px; box-sizing:border-box;
}
.wpcf7-form textarea{ min-height:140px; }
.wpcf7-form input[type="submit"]{
  appearance:none; border:0; border-radius:999px; padding:12px 22px;
  background:#464D67; color:#fff; font-weight:700; cursor:pointer; width:220px;
	    margin: 0 auto;
}
.wpcf7 form .wpcf7-response-output{ margin:16px 0 0; }
.wpcf7-not-valid-tip{ color:#c0392b; }




/* === フェードアップ表示 === */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/* 表示されたときの状態 */
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}






/*834px以下*/
@media screen and (max-width: 834px){
	.ma-intro__title{
		font-size:20px;
	}
	.ma-intro__btn{
		    width: 100%;
    max-width: 180px;
    display: block;
    text-align: center;
	}
	
	.ma-head__title,.howtoma_title{
		font-size:34px;
		
	}
	    .seccsesbk {
        padding-top: 80px;
        top: -3px;
background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url(https://mt-web.moo.jp/bay-creation/wp-content/themes/cocoon-child-master/img/ma/success_bk_sp.jpg)no-repeat center top / cover;
    }
	.ma-head {
    padding: 0 0 20px;
}
	
	.howtoma_title span {
    display: block;
    margin-top: 0;
    font-size: 16px;
}
	.howtoma_title_in{
		font-size: 18px;
	}

.maobj .ma-intro__bar,
	.maexit .ma-intro__bar{
    width: 100%;
}
	.maobj_wrap_h{
		width:90%;
	}
	
	.masobj_in_text,.masobj_in_img{
		width:100%;
		margin:0 auto 30px;
	}
	
	.masobj_in_text{order:1;}
	
	.masobj_in_img{order:2;}
	
	.maexit_l,.maexit_l{
			width:100%;
		margin:0 auto 30px;
		}
	
	.container.flow {
    width: 90%;
    background-color: #fff;
    padding: 30px 10px;
    margin: 0px auto;
}
.ma-contact .container{
padding: 30px 10px;
	}
}




/* ===== 制作実績アーカイブ：帯タイトル ===== */
.ma-hero--sub{
  background:url(https://mt-web.moo.jp/bay-creation/wp-content/themes/cocoon-child-master/img/bktitle.jpg);     
  color:#fff;
  text-align:center;
  padding:18px 0;
  margin-bottom:32px;
	height:100px;
}
.ma-hero--sub .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.ma-hero__title{
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.35em;
    padding-top: 10px;
}

/* ===== 制作実績：グリッドレイアウト ===== */
.ma-archive__list .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px 56px;
}

.ma-cases__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* PCは3列 */
  gap:24px;
}

/* スマホ・タブレットでは2列 */
@media (max-width:960px){
  .ma-cases__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* さらに狭い端末では1列にしたい場合（任意） */
@media (max-width:480px){
  .ma-cases__grid{
    grid-template-columns:1fr;
  }
}

/* カードの見た目調整 */
.ma-case{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/* サムネイル部分 */
.ma-case__figure{
  display:block;
  overflow:hidden;
}
.ma-case__img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:4/3;            /* 比率を揃える（ブラウザが対応していれば） */
  object-fit:cover;
  transition:transform .3s ease;
}
.ma-case__figure:hover .ma-case__img{
  transform:scale(1.04);
}

/* テキスト部分 */
.ma-case__body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
}

.ma-case__company {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    background: #364253;
  
    text-align: center;
    padding: 5px;
    color: #fff;
}
.ma-case__company a{
  color:#fff;
  text-decoration:none;
}
.ma-case__company a:hover{
  text-decoration:underline;
}

.ma-case__lead{
  margin:0;
  font-size:13px;
  color:#555;
  line-height:1.7;
}

/* ボタンを下端寄せにしつつ、全体を揃える */
.ma-case__actions{
  margin-top:auto;
}
.ma-btn.ma-btn--ghost{
  
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #364253;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    max-width: 150px;
    width: 90%;
    margin: 0 auto;
    display: block;
    text-align: center;
}
.ma-btn.ma-btn--ghost:hover{
  background:rgba(64,224,208,.08);
}



/* ========================================
   制作実績 詳細ページ（/cases/{slug}）
======================================== */
.single-case{
 
  padding-bottom:64px;
}
.case{
  color:#222;
	margin-bottom:100px;
}

/* ヒーローエリア：上に画像、その下に帯風タイトル */
.case__hero{
  margin:0 0 40px;
}
.case__heroimg{
    width: 100%;
    max-height: none;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}

/* タイトル帯：画像の下で少し重なるようなカード風 */
.case__heroinner {
max-width: 1200px;
color: #333;
border-bottom: 10px solid #E3EAF4;
margin: 20px auto;
}
.case__title{
  margin:0;
  font-size:clamp(20px, 3vw, 26px);
  font-weight:800;
}
.case__meta{
  margin:4px 0 0;
  font-size:13px;
  opacity:.85;
}

/* 本文ブロック */
.case__body{
  max-width:1200px;
  margin:32px auto 0;
  
}

/* リード（導入文） */
.case__lead{
  margin:0 0 20px;
  font-size:15px;
  line-height:1.9;
  color:#444;
  border-left:4px solid #40E0D0;
  padding-left:12px;
  background:#ffffff;
  padding-top:8px;
  padding-bottom:8px;
  border-radius:4px;
}

/* 本文（Gutenberg/Classic両対応のざっくり整え） */
.case__content{
  background:#fff;
  border-radius:10px;
  padding:24px 24px 28px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.case__content p{
  margin:0 0 1.4em;
  line-height:1.9;
}
.case__content h2{
  margin:1.8em 0 .6em;
  font-size:20px;
  border-left:4px solid #40E0D0;
  padding-left:10px;
}
.case__content h3{
  margin:1.6em 0 .5em;
  font-size:17px;
  font-weight:700;
}
.case__content ul,
.case__content ol{
  padding-left:1.4em;
  margin:0 0 1.4em;
}

/* ギャラリー */
.case__gallery{
  margin:32px 0 0;
}
.case__gallerygrid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.case__gallerygrid img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  object-fit:cover;
}

/* SP/タブレットではギャラリー2列 → 1列 */
@media (max-width:960px){
  .case__heroimg{ max-height:260px; }
  .case__heroinner{
    margin:-24px 16px 0;
    padding:14px 18px;
  }
  .case__gallerygrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:600px){
  .case__gallerygrid{
    grid-template-columns:1fr;
  }
}

/* 戻るボタン */
.case__back{
  margin:32px 0 0;
  text-align:center;
}
.case__back .ma-btn--ghost{
  min-width:180px;
}

.wp-block-image img {
    display: block;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 50px;
}