@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */
.ttl-case{
	width: 100%;
	text-align: left;
	margin-top: -50px;
}
.ttl-case span{
	display: block;
	font-family:"WindSong", cursive;
	font-weight: 400;
	font-style: normal;
	font-size:600%;
	color: rgba(89, 87, 87, 0.13);	
	transform: rotate(-13deg);	
	margin-bottom: -70px;
}
.ttl-case p {
  position: relative; /* 疑似要素を適切に配置するために相対位置を指定 */
  text-align: left;
  font-size: 1.5em;
  padding-left: 15px; /* インデント */
  margin-left: -15px; /* ネガティブマージンでインデント分を打ち消す */
  padding-top: 5px; /* 上部余白の調整 */
  padding-bottom: 5px;
  border-bottom: 1.5px solid #CCCBCB; /* デフォルトの下線を設定 */
}
.ttl-case p::after {
  content: ""; /* 空のコンテンツ */
  position: absolute; /* 絶対配置で指定位置に表示 */
  bottom: -1px; /* 親要素の下部に配置 */
  left: 0; /* 左から開始 */
  height: 1.5px; /* 下線の高さ */
  width: 100px; /* 色を変える部分の幅 */
  background-color: #DF805F; /* 任意の色 */
}
.ttl-purpose{
	width: 100%;
	padding-left: 0px;
	font-size:1.2em;
}
.ttl-purpose span{
	font-size:10px;
}

.box1-l{
	width: 90%;
	margin: 0 auto 20px;
}
.box1-r,.box1-r2{
  position: relative; /* 相対配置を適用 */
  display: flex;
  flex-direction: column;
	width: 100%;
	padding-left: 0px;
}

.photo-container-after {
  position: relative; /* 親要素の相対配置 */
  display: inline-block; /* 画像のサイズに合わせて四角枠が配置されるように */
}

.photo-container-after::after {
  content: "after"; /* 表示する文字 */
  position: absolute; /* 絶対配置 */
  top: 0px; /* 親要素の上から10px */
  left: 0px; /* 親要素の左から10px */
  background-color: rgba(219, 124, 110, 0.8); /* ピンクの背景色 80%の透明度 */
  color: white; /* 文字色 */
  padding: 3px 10px; /* 内側の余白 */
  font-size: 14px; /* 文字サイズ */
	letter-spacing: 2px;
}
.photo-container-before {
  position: relative; /* 四角ボックスの配置のために必要 */
  align-self: flex-end; /* 下部に配置 */
  width: 60%; /* 幅を親要素に合わせる */
  text-align: center; /* 中央揃え */
	margin-top: 0px;
}

.photo-container-before img {
  max-width: 100%;
  height: auto; /* アスペクト比を維持 */
}

.photo-container-before::after {
  content: "before"; /* 表示する文字 */
  position: absolute; /* 絶対配置 */
  top: 0px; /* 親要素の上から10px */
  left: 0px; /* 親要素の左から10px */
  background-color: rgba(89, 87, 87, 0.7); /* グレーの背景色 70%の透明度 */
  color: white; /* 文字色 */
  padding: 3px 10px; /* 内側の余白 */
  font-size: 14px; /* 文字サイズ */
	letter-spacing: 2px;
}

.zoom-image {
  width: 100%; /* 親コンテナーの幅に合わせて画像を表示 */
  height: 100%; /* 親コンテナーの高さに合わせて画像を表示 */
  transition: transform 0.3s ease; /* 拡大する際のアニメーションを滑らかにする */
}

/* ホバー時の拡大 */
.zoom-image:hover {
  transform: scale(2); /* 拡大率を200%に設定 */
	z-index: 100;
}

.box-shadow{
	width: 100%;
	padding: 15px 18px;
	background-color: #fff;
	margin: 15px auto;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	border-radius: 15px;
}

.box2-l{
	width: 100%;
}

.box2-r{
	width: 100%;
	text-align: center;
	padding-left: 0px;
	margin-top: 10px;
}
.box2-r img{
  max-width: 50%;
  height: auto; /* アスペクト比を維持 */
}
.kodawari-point{
	margin-left: 20px;
}

.set-box{
	width: 100%;
  position: relative; /* 相対配置を適用 */
  display: flex;
  flex-direction: row;
	justify-content: space-between;
}
.set-box p{
	width: 49%;
  position: relative; /* 相対配置を適用 */
  display: flex;
}

.interveiw{
	font-size: 1.1em;
	font-weight: bold;
}
.box-normal{
	margin: 5px 0px;
	width: 48%;
}	
.box-video{
	margin: 5px 0px;
	width: 100%;
}	

/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.ttl-case{
	width: 15%;
	text-align: right;
	margin-top: -30px
}
.ttl-case span{
	display: block;
	font-family:"WindSong", cursive;
	font-weight: 400;
	font-style: normal;
	font-size:600%;
	color: rgba(89, 87, 87, 0.13);	
	transform: rotate(-13deg);	
	margin-bottom: -70px;
}
.ttl-case p{
	text-align: right;
	font-size:1.8em;
	padding-right: 10px;
	border-bottom: 1px solid #CCCBCB;
	margin-left: -50px;
}

.ttl-purpose{
	width: 85%;
	padding-left: 20px;
	font-size:1.8em;
	font-weight: bold;
}
.ttl-purpose span{
	font-size:14px;
}

.box1-l{
	width: 60%;
	margin: 0 auto 0;
}
	
.box1-r,.box1-r2{
  position: relative; /* 相対配置を適用 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 下部に揃える */
	width: 40%;
	padding-left: 20px;
}

.box1-r{
  min-height: 420px; /* 必要に応じて高さを調整 */
	}
	
.box1-r2{
  min-height: 314px; /* 必要に応じて高さを調整 */
	}	
	
.photo-container-after {
  position: relative; /* 親要素の相対配置 */
  display: inline-block; /* 画像のサイズに合わせて四角枠が配置されるように */
}

.photo-container-after::after {
  content: "after"; /* 表示する文字 */
  position: absolute; /* 絶対配置 */
  top: 0px; /* 親要素の上から10px */
  left: 0px; /* 親要素の左から10px */
  background-color: rgba(219, 124, 110, 0.8); /* ピンクの背景色 80%の透明度 */
  color: white; /* 文字色 */
  padding: 3px 10px; /* 内側の余白 */
  font-size: 14px; /* 文字サイズ */
	letter-spacing: 2px;
}
.photo-container-before {
  position: relative; /* 四角ボックスの配置のために必要 */
  align-self: flex-end; /* 下部に配置 */
  width: 100%; /* 幅を親要素に合わせる */
  text-align: center; /* 中央揃え */
	margin-top: 20px;
}

.photo-container-before img {
  max-width: 100%;
  height: auto; /* アスペクト比を維持 */
}

.photo-container-before::after {
  content: "before"; /* 表示する文字 */
  position: absolute; /* 絶対配置 */
  top: 0px; /* 親要素の上から10px */
  left: 0px; /* 親要素の左から10px */
  background-color: rgba(89, 87, 87, 0.7); /* グレーの背景色 70%の透明度 */
  color: white; /* 文字色 */
  padding: 3px 10px; /* 内側の余白 */
  font-size: 14px; /* 文字サイズ */
	letter-spacing: 2px;
}

.box-shadow{
	padding: 20px 30px;
	margin: 20px auto;
}

.box2-l{
	width: 80%;
}

.box2-r{
	width: 20%;
  align-self: flex-end; /* 下部に配置 */
	text-align: center;
	padding-left: 20px;
}
.box2-r img{
  max-width: 100%;
  height: auto; /* アスペクト比を維持 */
}
.kodawari-point{
	margin-left: 30px;
}

.set-box{
	width: 24%;
  position: relative; /* 相対配置を適用 */
  display: flex;
  flex-direction: column;
}
.set-box p{
	width: 100%;
  position: relative; /* 相対配置を適用 */
  display: flex;
}

.interveiw{
	font-size: 1.2em;
	font-weight: bold;
}
	
.box-normal,.box-video{
	margin: 5px;
	width: calc(33% - 10px);
}	
	
	
}