/* reset-css
---------------------------------------------------------------------------*/

* {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
small,
button,
time,
figure {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

html {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

li,
dd {
	list-style-type: none;
}

header,
footer,
nav,
section,
article,
aside,
figure,
figcaption {
	display: block;
}

img {
	border: none;
	vertical-align: bottom;
}

a {
	text-decoration: none;
	cursor: pointer;
}

/* base
---------------------------------------------------------------------------*/

body {
	color: #333;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

a {
	color: inherit;
}

img {
	width: 100%;
	max-width: 100%;
}

.l-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

.l-teaser {
	padding: 60px 0;
}

.l-teaser__main {
	margin-bottom: 40px;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
}

.l-teaser__sub {
	margin: 0 auto;
	font-weight: normal;
	font-size: 18px;
	text-align: center;
}

.l-teaser__content {
	display: flex;
	flex-wrap: wrap;
	margin-top: 60px;
	gap: 60px 40px;
}

.l-teaser__card {
	display: flex;
	flex-direction: column;
	width: calc((100% - 80px) / 3);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);
}

.l-teaser__tag {
	display: inline-block;
	min-width: 55px;
	padding: 0px 4px;
	border-radius: 4px;
	background-color: #9bdceb;
	color: #fff;
	font-size: 14px;
	text-align: center;
}

.l-teaser__tag.--lp {
	background-color: #5fbace;
}

.l-teaser__tag.--web {
	background-color: #ce5f6a;
}

.l-teaser__tag.--corp {
	background-color: #ceb65f;
}

.l-teaser__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px;
}

.l-teaser__img {
	aspect-ratio: 1000/750;
	overflow: hidden;
}

.l-teaser__img img {
	-o-object-fit: cover;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s;
}

.l-teaser__title {
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 16px;
}

.l-teaser__detail {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 8px;
	border-radius: 4px;
	background-color: #f7f7f7;
}

.l-teaser__period {
	margin-bottom: 5px;
	font-size: 14px;
}

.l-teaser__text {
	font-size: 14px;
}

/*=========================================================================
# foundation
========================================================================== */

/*=========================================================================
# layout
========================================================================== */

@media (hover: hover) {

.l-teaser__card:hover .l-teaser__img img {
	transform: scale(1.1);
}

}

@media screen and (max-width: 767px) {

.l-inner {
	padding: 0 20px;
}

.l-teaser__main {
	font-size: 22px;
}

.l-teaser__sub {
	font-size: 16px;
}

.l-teaser__content {
	margin-top: 32px;
	gap: 45px;
}

.l-teaser__card {
	width: 100%;
}

.l-teaser__title {
	font-size: 14px;
}

}