@charset "utf-8";
.container {
	width: 1200px;
	margin: 0 auto;
	transform-origin: top left;
	background-color: #f9f9f9;
	border: 2px solid #f9f9f9;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

@media screen and (max-width: 1200px) {
	.container {
	transform: scale(calc(100vw / 1200));
	}
}

@media screen and (max-height: 800px) {
	.container {
	transform: scale(calc(100vh / 800));
	}
}

body {
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Arial', sans-serif;
	background-color: #fff;
	color: #333;
	border-top: solid 3px rgb(230, 180, 34);
	padding: 0 0.5rem;
	max-width: 980px;

}

.sp-only {
	display: none;
}

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

header {
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
	color: #333;
	text-align: center;
	padding: 4rem 2rem;
	background-image:url("/../images/umin35/swirl.webp");
	background-color:rgba(255,255,153,0.9);
	background-blend-mode:lighten;
	border:5px double #e6b422;
	border-radius: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size: 24px;
	font-weight: bold;
}

header h1 {
	margin: 0;
	font-size: 48px;
	line-height: 1.2;
	color: #e6b422;
}

header p {
	margin: 10px 0 0;
	font-size: 18px;
}

@media screen and (max-width: 768px) {
	header {
	padding: 20px 10px;
		font-size: 18px;
	}

	header h1 {
		font-size: 32px;
	}
	header p {
	        font-size: 14px;
	}
}

@media screen and (max-width: 480px) {
	header {
		padding: 15px 5px;
	}

	header h1 {
		font-size: 24px;
	}

	header p {
		font-size: 12px;
	}
}

.btn {
	display: inline-block;
	background-color: #e6b422;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	margin-top: 20px;
	box-shadow: 0 5px 5px rgba(74, 36, 0, 1.0););
	transition: all 0.3s ease;
	text-align:left;
}

.btn:hover {
	background-color: #c89e39;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}

.btn:active {
	background-color: #a88924;
	transform: translateY(0);
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}


html{
	scroll-behavior: smooth;
}
body{
	border-top: solid 3px rgb(250, 235, 118);
	padding: 0 0.5rem;
	max-width: 980px;
	margin: 0 auto;
}
h1{
	font-size: 2.0rem;
	margin: 0;
	padding: .5rem 0 0 0 ;

}

@media only screen and (max-width : 500px) {
	.nav_br::after{
		content: "\A";
		white-space: pre ;
	}
}
h2{
	position: relative;
	font-size: 1.8rem;
	margin: 1rem 1rem .5rem 1rem;
	border-bottom:3px solid #a0522d;
}
h2::before{
	position: absolute;
	left: -3rem ;
	top: 0;
	content: "　";
	width: 2.7rem;
	height: 2.7rem;
	background-color: rgb(12, 53, 176);

}
h3{
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0;
	padding-left:0.5em;
}

li{
	margin-bottom:0.5rem;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	padding: 1em 0.5em 1em;
}

.flex-item {
	box-sizing: border-box;
	padding: 0em 0.5em 0.5em;
}

.flex-item:nth-child(odd) {
	flex: 0 0 3em;
	min-width: 3em;
}


.flex-item:nth-child(even) {
	flex: 1 1 calc(100% - 3em - 1rem);
	min-width: 0;
	word-break: break-word;
}

@media screen and (max-width: 300px) {
	.flex-container {
		flex-direction: column;
	}
	.flex-item:nth-child(odd) {
		flex: 0 0 3em;
	}
	.flex-item:nth-child(even) {
	flex: 1 1 100%;
	}
}

.tidyingup{
	padding-left:1rem;
}
.wrapper {
	display: flex;
	flex-direction: column;
}

.layout-container {
	display: flex;
	padding-left:1rem;
	box-sizing: border-box;
	margin-bottom:1rem;
}
.left-item {
	width: 3.3rem;
	height: 100%;
	box-sizing: border-box;
}
.right-container {
	display: flex;
	flex-direction: column;
	width: 90%;
	height: 100%;
	box-sizing: border-box;
}
.right-item {
	flex: 1;
	box-sizing: border-box;
}
.layout-container.special {
	display: grid;
}
.layout-container.special .left-item {
	grid-row: 1 / 3;
	grid-column: 1;
}
.layout-container.special .right-container {
	display: contents;
}
.layout-container.special .right-item:nth-child(1) {
	grid-column: 2 / 4;
	grid-row: 1;
}
.layout-container.special .right-item:nth-child(2) {
	grid-column: 2;
	grid-row: 2;
}
.layout-container.special .right-item:nth-child(3) {
	grid-column: 3;
	grid-row: 2;
}

p{
	margin-left:1em;
	font-size:18px;
	font-weight: bold;
}