@charset "utf-8";
/* CSS Document */




/*-------------------------*/
/* ===== セクション全体 ===== */
/*-------------------------*/
.section-about{
  position: relative;
  overflow: hidden;
	z-index: 1!important;
}

/* ===== 上：画像（PCとSPをCSSで切替） ===== */
.about-visual{
  width: 100%;
  /* 画面比率に応じた高さ（横幅に対して可変） */
  height: clamp(280px, 45vw, 520px);
}

/* 画像は基本非表示にしておき、PC用だけ表示 */
.about-visual img{
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 横幅いっぱい、はみ出しはトリミング */
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.about-visual .img-pc{ display:block; }   /* デフォルト＝PCを表示 */
.about-visual .img-sp{ display:none; }    /* SPは隠す */


/*----------------------------------------*/
/* ===== タイトル（ご指定の数値に準拠） ===== */
/*----------------------------------------*/
.keikobi-head{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-top: 40px;margin-bottom:0px;
}
.keikobi-pill{
  padding:.6em 1.2em; border-radius:999px; background:#678DBB; color:#fff;
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.08em; margin:0;
  font-size: clamp(16px, 2.2vw, 24px);
}
/* 共通ドット */
.keikobi-dot{
  border-radius:50%;
  background:#678DBB;
  display:inline-block;
}
.keikobi-dot.large { width:24px; height:24px; }
.keikobi-dot.small { width:12px; height:12px; }

/* 並び */
.dot-group{ display:flex; gap:14px; align-items:center; }



/* ===== ブレークポイント ===== */
@media (max-width: 767px){
  .section-about{ padding-bottom: 20px; padding-top:20px;}

  /* 767px以下ではSP画像を表示、PC画像を非表示 */
  .about-visual .img-pc{ display:none; }
  .about-visual .img-sp{ display:block; }

  /* 画像の高さ：必要なら少し高めにしたい場合は数値を調整 */
  .about-visual{ height: clamp(400px, 56vw, 520px); }

  .keikobi-head{ gap:10px; margin: 18px auto 12px; }
  .keikobi-dot.large { width:20px; height:20px; }
  .keikobi-dot.small { width:10px; height:10px; }
}







/*----------------------------------*/
/* ===== 松尾流についてコンテンツ ===== */
/*----------------------------------*/
.about-content{
	/* コンテンツを中央に配置し、最大幅を設定 */
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 60px; /* 左右に余白、下に少しスペース */
}

/* 各項目（松尾流とは？ / 特徴は？） */
.about-item{
	display: flex;
	align-items: flex-start; /* 垂直方向中央寄せ */
	justify-content: space-between;
	gap: 40px; /* テキストと画像の間の隙間 */
	margin-top: 50px;
	background-color: #FFFFFF66; /* 薄い背景色 */
	border-radius: 12px;
	padding: 30px;
	
}

/* 「松尾流とは？」の画像とテキストの順序を調整（画像右） */
.about-item.is-what .about-image-area { order: 2; }
.about-item.is-what .about-text-area { order: 1; }

/* 「特徴は？」の画像とテキストの順序を調整（画像左） */
.about-item.is-feature .about-image-area { order: 1; }
.about-item.is-feature .about-text-area { order: 2; }


/* テキストエリア */
.about-text-area{
	flex: 1;
	min-width: 0; /* Flexアイテムの最小幅設定 */
}

/* 画像エリア */
.about-image-area{
	flex-shrink: 0; /* 縮小させない */
	width: 38%; /* 画像の幅をテキストより少し小さく */
	max-width: 350px;
}
.about-image-sub{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}


/* 小見出し（松尾流とは？/特徴は？） */
.about-pill{
	display: inline-block;
	padding: .4em 1.2em;
	border-radius: 999px;
	background:#678DBB;
	color:#fff;
	font-size: clamp(14px, 1.8vw, 18px);
	font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
	letter-spacing:.05em;
	margin-bottom: 20px;
}

/* テキスト本文 */
.about-text{
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 20px;
	color: #333;
}


/* 特徴の箇条書き部分の装飾 */
.feature-box{
	border-left: 4px solid #678DBB;
	padding-left: 15px;
	margin-top: 30px;
}
.feature-title{
	font-size: 16px;
	font-weight: bold;
	color: #678DBB;
	margin-bottom: 10px;
	line-height: 1.5;
}
.feature-title strong{
	background: linear-gradient(transparent 60%, #BCCDE2 60%); /* マーカー風 */
	font-weight: bold;
}
.feature-list{
	list-style: none; /* デフォルトのリストマークを非表示 */
	padding: 0;
	margin: 0;
}
.feature-list li{
	position: relative;
	padding-left: 1.2em; /* 擬似要素のスペース */
	line-height: 1.8;
	font-size: 15px;
	color: #555;
}
.feature-list li::before{
	content: ""; /* コンテンツは空にする */
	position: absolute;
	left: 0;
	top: .7em; /* 位置を調整 */

	/* ここで青い円を作成 */
	width: 8px; 
	height: 8px;
	background-color: #678DBB; /* 青色を指定 */
	border-radius: 50%; /* 幅と高さを同じにして50%にすると円になる */
}
.feature-note{
	font-size: 14px;
	color: #333;
	margin-top: 15px;
}


/* PC表示時 (デフォルト) */
.about-image-area.is-sp {
    display: none; /* スマホ用画像を非表示 */
}
.about-image-area.is-pc {
    display: block; /* PC用画像を表示 */
}
.about-image-sub-sp {
    display: none; /* スマホ画像を非表示 */
}
.about-image-sub-pc {
    display: block; /* PC画像をブロック表示 */
    width: 100%; /* 親要素内で表示 */
    height: auto;
    border-radius: 8px;
}

/* 画像エリア全体 */
.about-image-area{
	flex-shrink: 0; 
	width: 38%; 
	max-width: 350px;
}
/* ... (他のPC用CSSはそのまま) ... */


/* ===== レスポンシブ対応 (767px以下) ===== */
@media (max-width: 767px){
	.about-content{
		padding: 0 15px 40px;
	}
	
	/* 画像とテキストを縦並びにする */
	.about-item{
		flex-direction: column;
		gap: 20px;
		margin-top: 30px;
		padding: 20px 15px;
	}

	/* 縦並びになったので、順序をリセット */
	.about-item.is-what .about-image-area,
	.about-item.is-what .about-text-area,
	.about-item.is-feature .about-image-area,
	.about-item.is-feature .about-text-area { 
		order: unset; 
	}
	/* SPでは「松尾流とは？」は画像が下 */
	.about-item.is-what .about-image-area { order: 2; }
	.about-item.is-what .about-text-area { order: 1; }

	/* SPでは「特徴は？」は画像が上 */
	.about-item.is-feature .about-image-area { order: 1; }
	.about-item.is-feature .about-text-area { order: 2; }
	
	/* 画像の幅を広くする */
	.about-image-area{
		width: 100%;
		max-width: none;
	}

	/* 本文の調整 */
	.about-text{
		font-size: 15px;
		margin-bottom: 15px;
	}
	.about-pill{
		margin-bottom: 15px;
		font-size: 18px;
	}
	.feature-box{
		margin-top: 20px;
	}
	.feature-title{
		font-size: 15px;
	}
	.feature-list li{
		font-size: 14px;
	}
	.feature-note{
		font-size: 13px;
	}
	
	.about-image-area.is-pc {
        display: none;
    }
    
    /* スマホ用画像エリアを表示する */
    .about-image-area.is-sp {
        display: block; /* 表示に戻す */
        order: -1; /* テキストエリアより上に配置 */
		width: 100%; /* 横幅いっぱいに */
		max-width: none;
		margin-bottom: 5px;
    }
    
    /* スマホ用画像自体を表示 */
    .about-image-sub-sp {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    /* PC用画像は非表示 */
    .about-image-sub-pc {
        display: none;
    }
	
	
}