@charset "utf-8";
body {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Arial', sans-serif;
	background-color: #fff;
	color: #333;
	max-width: 980px;
}

.container {
	padding: 0em 0.2em 0.2em 0.2em;
	max-width: 1200px;
	box-sizing: border-box;
}

h2{
	text-align:center;
}

.sp-br {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp-br {
        display: block;
    }
}

.header-container{
	display: flex;
	flex-wrap: wrap;
	margin-top:1em;
	border-bottom:1px solid;
	padding-bottom:1em;
}

.adjustment{
	padding-top:1em;
}


.contents-container{
	display: flex;
	flex-wrap: wrap;
	margin-top:1em;
	padding-bottom:1em;
}

.contents-item1{
	width:15%; 
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
}

.contents-item2{
	width:75%; 
	box-sizing: border-box;
/*	display: flex; */
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
}

@media screen and (max-width: 768px) {
.contents-item2{
	width:70%; 
	box-sizing: border-box;
/*	display: flex;*/
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
	padding-left:1em;
}
}

.contents2-container{
	display: flex;
	flex-wrap: wrap;
	margin-top:1em;
	border:1px solid;
	padding-bottom:1em;
}

.contents2-item1{
	width:20%; 
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
}

.contents2-item2{
	width:80%; 
	box-sizing: border-box;
	display: flex;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
	border:1px solid;
}

.test-container{
	display: flex;
	flex-wrap: wrap;
}

.test-item1{
	width:11em; 
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
}

.test-item2{
	width:auto; 
	box-sizing: border-box;
	display: flex;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	justify-content: flex-start; /* 横方向を左揃えにする */
	align-items: flex-start; /* 縦方向を上寄せにする */
	padding: 5px; /* テキストが枠にくっつかないようにする */
}

.btn-glow {
	display: inline-block;
	text-decoration: none; /* リンクの下線を消す */
	background: linear-gradient(90deg, #ff416c, #ff4b2b);
	color: white;
	font-size: 22px;
	font-weight: bold;
	padding: 15px 50px;
	border-radius: 50px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	box-shadow: 0 5px 0 #d63031;
	text-align: center;
	display: block;		 /* ボタンをブロック要素にする */
	margin: 2em auto 0;	 /* 上に余白をつけて中央配置 */
	width:10em;
	margin-bottom:1em;
}

/* キラッと光るアニメーション (左→右のみ) */
.btn-glow::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transition: left 0.5s ease; /* 左→右だけアニメーション */
}

/* ホバー時に光る */
.btn-glow:hover::before {
	left: 100%;
}

/* 押した時に沈むエフェクト */
.btn-glow:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #d63031;
}