@charset "UTF-8";

* {
	margin:  0; /*上右下左*/
	padding: 0;
	user-select: none;
}

/*------------------------------------------------*/

.header-wrap {
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100px;
}

.logo {
	background-color: transparent;
	display: flex;
	justify-content: left;
	align-items: center;
	padding-left: 20px;
	width: calc(240px - 10px);
	height: 100px;
	line-height: 100px;
	color: rgb(44,84,120);
}

.logo img {
	/*width: 230px;*/
	height: 80px;
	object-fit: contain;
}

.link {
	background-color: transparent;
	display: flex;
	align-items: flex-end;
	margin: 0px 10px 10px 10px;
	/*padding: 0px 10px 10px 10px;*/
	height: 80px;
	/*border-bottom: solid 1px silver;*/
}

.link a {
	padding: 5px 20px 5px 20px;
	text-decoration: none;
	color: rgb(44,84,120);
	transition: background-color 0.5s, color 0.5s;
	clip-path: polygon(16px 0px, 0px 60px, calc(100% - 16px) 60px, 100% 0px);
}

.link a:hover {
	background-color: rgb(44,84,120);
	color: white;
}

.link span {
	padding: 0px 0px 5px 0px;
	color: silver;
}

/*------------------------------------------------*/

.main-wrap {
	background-color: white;
	display: block;
	margin: 0 auto;
	width: 960px;
	/*height: 100vh;*/
}

/*------------------------------------------------*/

.tytle {
	background-color: rgb(44,84,120);
	background-image: url("../img/tytleback.png");
	display: flex;
	justify-content: center;
	align-items: center;
	width:  100%;
	height: 120px;
	font-family: serif;
	font-weight: bold;
	color: white;
	position: relative;
}

.tytle span {
	background-color: rgba(44,84,120,0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px 5px 0px 5px;
	/*width:  50px;*/
	/*height: 50px;*/
	width: 2.2em;
	height: 2.2em;
	border: solid 1px white;
	box-shadow: 1px 1px 3px black;
	font-size: 1.5em;
	transform-origin: left;
	transform: scaleX(0%);
	animation: tytle 0.8s forwards;
	opacity: 0;
}

.tytle span p {
	text-align: center;
}

.tytle h4 {
	position: absolute;
	bottom: 0px;
	right:  5px;
	text-shadow: 1px 1px 3px black;
}

@keyframes tytle {
	100% {
		transform: scaleX(100%);
		opacity: 1;
	}
}

/*------------------------------------------------*/

.content-wrap {
	background-color: white;
	padding: 32px 64px 32px 64px;
	width: calc(100% - 128px);
	height: 100%;
}

/*------------------------------------------------*/

.content-item {
	background-color: rgb(44,84,120);
	padding: 8px;
	width: calc(100% - 16px);
}

.content-item:not(:last-child) {
	margin-bottom: 32px;
}

.c1 {
	background-color: transparent;
	display: flex;
	width:  100%;
	height: 240px;
}

.txt1 {
	background-color: white;
	padding: 8px;
	width: calc(50% - 16px);
	height: calc(240px - 16px);
	color: rgb(44,84,120);
}

.pic1 {
	background-color: white;
	padding: 8px;
	width: calc(50% - 16px);
	height: calc(240px - 16px);
}

.pic1 img {
	width:  100%;
	height: 100%;
	object-fit: cover;
}

.c1 h3 {
	background: linear-gradient(to right, rgb(44,84,120), white);
	background-color: rgb(44,84,120);
	margin-bottom: 16px;
	padding-left: 16px;
	line-height: 2.4em;
	color: white;
}

.c1 p {
	margin-bottom: 8px;
	padding-left: 16px;
}

.c1 span {
	background-color: rgba(44,84,120,0.2);
	padding: 0px 16px 0px 16px;
	margin-right: 8px;
	color: rgb(44,84,120);
}

.c2 {
	margin-top: 8px;
	width: 100%;
	height: 400px;
}

/*------------------------------------------------*/

.footer-wrap {
	width: 100%;
	height: 40px;
}

.footer-wrap a {
	text-decoration: none;
	color: white;
}

.footer-item {
	background-color: rgb(44,84,120);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
}

html {
    scroll-behavior: smooth;
}

/*------------------------------------------------*/