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

body{
	margin: 0;
}

.wrap-nk{
	background-color: #f2f2f2;
}

.wrapper{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 5% 0;
}

.mv{
	margin: 0 auto;
}

.mv p{
	text-align: center;
	font-size: 0.9rem;
	margin: 2% auto;
}

.mv h1{
	text-align: center;
	font-size: 1.5rem;
	margin: 2% auto;
}

.main-contents{
	width: 90%;
	margin: 10% auto;
}

.contents-inner{
	margin: 0 auto 15%;
}

.contents-inner h1{
	text-align: center;
	font-size: 1.8rem;
	margin: 2% 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
}

.contents-inner h1 span{
	text-decoration: underline;
	text-decoration-color: #000;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}

.contents-inner p{
	text-align: center;
	font-size: 0.85rem;
	margin: 2% auto;
}

.main-img{
	margin: 8% auto;
}

.balloon {
  position: relative;
  display: inline-block;   /* 文字の長さに合わせる */
  padding: 8px 25px 8px 15px;      /* 吹き出し内の上下左右の余白 */
  background-color: #fff; /* 吹き出しの背景色（白） */
  color: #000;            /* 文字の色（黒） */
  font-size: 0.7rem;
	line-height: 1.8;
  border-radius: 4px;      /* 角を少し丸める */
  border: solid 2px #000; /* 黒い枠線 */
}

.balloon-img {
  position: absolute;
  bottom: -15px;  /* 画像が大きくなった分、はみ出し具合を調整 */
  right: -15px;   /* 画像が大きくなった分、はみ出し具合を調整 */
  width: 50px;    /* ★横幅を 30px から 50px に拡大 */
  height: auto;   /* 縦横比を維持 */
  z-index: 2;     /* 吹き出しの枠線より手前に表示 */
}

.all{
	margin: 2% auto;
	text-align: center;
	font-size: 1.2rem;
	padding-bottom: 5%;
}

@media(min-width:750px){
	.mv p{
		font-size: 1.2rem;
		margin: 1% auto;
	}

	.mv h1{
		font-size: 2.5rem;
	}
	
	.main-contents{
		display: flex;
		column-gap: 40px;
		grid-row-gap: 20px;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 5%;
	}
	
	.contents-inner{
		width: calc(50% - 40px);
		margin: 0 auto 10%;
	}

}