@charset "UTF-8";

/* L1 ########################################  ######################################## */
/* L2 ****************************************  **************************************** */
/* L3 ========================================  ======================================== */
/* L4 ----------------------------------------  ---------------------------------------- */


/* L1 ######################################## ロゴ ######################################## */

#logo {
	max-inline-size: 1200px;
	margin-inline: auto;
	margin-block: 5em;
	text-align: center;
}

#logo img {
	inline-size: 80vw;
	max-inline-size: 800px;
}

/* L1 ######################################## コンテンツ ######################################## */

#contents {
    position: relative;
	max-inline-size: 1200px;
    margin-block: 10em 5em;
    margin-inline: auto;
}

#contents > .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 15px;
}

#contents a {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
	text-decoration: none;
}

#contents .item {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
	border: 1px solid #cccccc;
	background: rgba(240, 240, 240, 0.85);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

#contents a.new .item::before {
	content: "new";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	z-index: 10;
	width: 50px;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 1.0;
	white-space: nowrap;
	background: linear-gradient(#ff6600, #cc0000);
	animation: r 5s infinite;
	
	aspect-ratio: 1;
	clip-path: polygon(100% 50%,94.75% 54.7%,98.91% 60.4%,92.8% 63.91%,95.68% 70.34%,88.97% 72.5%,90.45% 79.39%,83.44% 80.11%,83.46% 87.16%,76.45% 86.41%,75% 93.3%,68.3% 91.11%,65.45% 97.55%,59.36% 94.02%,55.23% 99.73%,50% 95%,44.77% 99.73%,40.64% 94.02%,34.55% 97.55%,31.7% 91.11%,25% 93.3%,23.55% 86.41%,16.54% 87.16%,16.56% 80.11%,9.55% 79.39%,11.03% 72.5%,4.32% 70.34%,7.2% 63.91%,1.09% 60.4%,5.25% 54.7%,0% 50%,5.25% 45.3%,1.09% 39.6%,7.2% 36.09%,4.32% 29.66%,11.03% 27.5%,9.55% 20.61%,16.56% 19.89%,16.54% 12.84%,23.55% 13.59%,25% 6.7%,31.7% 8.89%,34.55% 2.45%,40.64% 5.98%,44.77% 0.27%,50% 5%,55.23% 0.27%,59.36% 5.98%,65.45% 2.45%,68.3% 8.89%,75% 6.7%,76.45% 13.59%,83.46% 12.84%,83.44% 19.89%,90.45% 20.61%,88.97% 27.5%,95.68% 29.66%,92.8% 36.09%,98.91% 39.6%,94.75% 45.3%);
}

@keyframes r {
	0%{
		rotate: -45deg;
	}
	
	50% {
		rotate: 45deg;
	}
	
	100% {
		rotate: -45deg;
	}
}

#contents .thumb {
	overflow: hidden;
}

#contents .thumb img {
	inline-size: 100%;
	block-size: auto;
	transition: transform 0.2s;
}

#contents a[href]:hover .thumb img {
	transform: scale(1.2)
}

#contents .title {
	margin-block-start: 0.5em;
	margin-inline: 2%;
}

#contents .title p {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 0.2em 4%;
	color: #008ccf;
	font-size: 120%;
	font-weight: bold;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid #cccccc;
	border-radius: 5px;
	box-sizing: border-box;
}

#contents .title p::before {
	flex-shrink: 0;
	content: '';
	display: inline-block;
	block-size: 3em;
	inline-size: 3em;
	padding-inline-end: 1em;
	background: url(../images/common/logo_teichiku-90th_mini-color.png) 50% 50% no-repeat;
	background-size: contain;
}

#contents .description {
	margin-block: 0.5em;
	margin-inline: 4%;
}

/* L1 ######################################## 社長メッセージ ######################################## */

#message {
	position: relative;
	max-inline-size: 980px;
    margin-block: 10em 5em;
    margin-inline: auto;
    padding: 0.6em min(4%, 40px);
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

#message::before,
#message::after {
	content: '';
	position: absolute;
	inset-inline-start: 12px;
	inset-block-end: 12px;
	z-index: -1;
	max-inline-size: 250px;
	inline-size: 40%;
	block-size: 10px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	transform: skew(-5deg) rotate(-5deg);
}

#message p {
	margin-block: 1em;
	color: #333333;
	font-family: "Zen Old Mincho", serif;
	font-weight: bold;
}


#message p.title {
	margin-block: 1em;
	color: #008ccf;
	font-size: 120%;
	letter-spacing: 0.5em;
	text-decoration: underline;
	text-decoration-thickness: 0.4em;
	text-decoration-color: #eeeeee;
	text-underline-offset: -0.2em;
	text-decoration-skip-ink: none;
}

#message > .container {

}

#message .photo {
	float: right;
	width: 20%;
	margin-block-end: 1em;
	margin-inline-start: 1em;
}

#message img {
	width: 100%;
}