*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
 font-family:
	"Yu Gothic",
	"Hiragino Kaku Gothic ProN",
	sans-serif;
	color:#333;
	background:#fff;
	line-height:1.8;
}

.wrapper{
	max-width:1100px;
	margin:auto;
	padding:40px 20px 80px;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

footer {
	background-color: #e9e4d4; /* 灰白色 */;
	padding: 5rem 0 2rem 0;
	color: #222;
}

footer h2 {
	margin-top:-3rem;
 margin-bottom:0;
 text-align:center;
}

.footer-link{
	color:222;
}

footer p{
	text-align:center;
	margin:0 0 1rem 0;
	font-size:95%;
}

/*--------------------
 メイン画像
--------------------*/
.hero img{
	width:100%;
	display:block;
}

/*--------------------
 見出し
--------------------*/
section{
	margin-top:60px;
}

h2{
	font-size:2rem;
	margin-bottom:30px;
	font-weight:bold;
	text-align: center;
}

/*--------------------
 数字
--------------------*/
.number-area{
	display:flex;
	justify-content:center;
	gap:120px;
	flex-wrap:wrap;
	text-align:center;
}

.number-item p{
	font-size:1.2rem;
}

.number{
	font-size:5rem;
	font-weight:bold;
	line-height:1;
}

.unit{
	font-size:2rem;
}

/*--------------------
 数字
--------------------*/
.emphasis{
	font-weight:bold;
}

/*--------------------
 タイムライン
--------------------*/
.timeline{
	position:relative;
	margin:0 auto;
	max-width:900px;
}

/* 真ん中の緑のタイムライン */
.timeline::before{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	bottom:-36px;/* 下の長さを変える */
	width:30px;
	background:#0a9c49;
	transform:translateX(-50%);
}

.timeline::after{ /* 下部の尖り */
	content:"";
	position:absolute;

	left:50%;
	bottom:-54px; /* beforeの下部からの長さ	*/
	transform:translateX(-50%);
	width:0;
	height:0;
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	border-top:18px solid #0a9c49;
}

.event{ /* 各々の記事の塊	*/
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom:-5rem; /* アイテムの行間 */
	position:relative;
}

.event:nth-child(even){
	flex-direction:row-reverse;
}


.text{ /* 白丸からの引き出し線とテキスト（連動している） */
	position:relative;
	width:100%;
}

.text h3 { /* 記事の塊中の行間 */
	line-height:1.8rem;
}

h3.mile{ /* 小見出し 追加指示 */
	font-size:150%;
	line-height:2.8rem;
}

h3.anniv{ /* 小見出し 追加指示 */
	font-size:200%;
	line-height:3rem;
}

.text p { /* 記事の塊中の行間 */
	margin-top:0.3rem;
	line-height: 1.5rem;
}

.content{
	width:42%;
}

.photo{
	width:100%;
	margin-top:0.5rem;
}

.photo img{
	width:100%;
	display:block;
	border-radius:6px;
}

/* 枠線が必要な写真だけ */
.photo img.frame{
	border:1px solid #000;
	border-radius:6px;
}

/* 中央の白丸 ※eventで囲われた塊の中に白丸も入っている */

.event::before{
	content:"";
	position:absolute;
	left:50%;
	top:14px;
	width:20px;
	height:20px;
	background:#fff;
	border:5px solid #0a9c49;
	border-radius:50%;
	transform:translateX(-50%);
}

/* 緑の引き出し線 ※eventで囲われた塊の中に緑線も入っている  */
.event::after{
	content:"";
	position:absolute;
	top:27px;
	width:55px;
	height:4px;
	background:#0a9c49;
}

.event:nth-child(odd)::after{
	left:calc(50% - 70px);
}

.event:nth-child(even)::after{
	right:calc(50% - 70px);
}

/*--------------------
 最後
--------------------*/

.message{
	margin:11rem 5rem	5rem 5rem;
	text-align:center;
	font-size:1.15rem;
}

/*--------------------
 スマホ
--------------------*/

@media(max-width:768px){

.content{
    width:100%;
    padding-right:4rem;
}

.event{
    margin-bottom:4rem; /* アイテムの行間 */
}

.event::after{
	display:none;
}

.number-area{
	gap:50px;
}

.number{
	font-size:3.5rem;
}

.timeline::before{
	left:60px;
}

.event,
.event:nth-child(even){
	flex-direction:column;
	align-items:flex-start;
	padding-left:100px;
}

.timeline::after{
	left:60px;
}

.event::before{
	left:60px;
}

.text,
.photo{
	width:100%;
}

.photo{
	margin-top:20px;
}

.message{
	margin:5rem 5rem	4rem 5rem;
}