@charset "UTF-8";

/*--------------------------------------------
PROFILE
---------------------------------------------*/

#profile{
	overflow : hidden;
}

#profile .head{
	display : grid;
	align-items : center;
	justify-content : center;
	grid-template-columns : auto auto;
	grid-template-rows : auto auto auto;
}

#profile .head picture{
	border-radius : 50%;
	overflow : hidden;
}

#profile .head picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

#profile .head picture{
	border : 1px solid #ccc;
	grid-row : 1;
	grid-column : 1;
}

#profile .head picture + div{
	grid-row : 1;
	grid-column : 2;
}

#profile h2{
	font-weight : 500;
}

#profile .message{
	display : inline-grid;
	line-height : 1.6;
	background-color : #fff;
	position : relative;
	left : 50%;
	transform : translateX(-50%);
	align-items : center;
	position : relative;
	z-index : 1;
	max-width : 100%;
	word-break : break-all;
}

#profile .message:after{
	content : "";
	position : absolute;
	width : 0;
	height : 0;
	top : 0;
	left : 25%;
	box-sizing : border-box;
	border : .5em solid black;
	border-color : transparent transparent #fff #fff;
	transform-origin : 0 0;
	transform : rotate(135deg);
	box-shadow : -2px 2px 2px 0 rgba(0, 0, 0, .12);
}

#profile .data > div{
	display : grid;
	align-items : start;
	grid-auto-flow : column;
	justify-content : start;
	grid-template-columns : auto auto;
}

#profile dt{
	flex-shrink : 0;
}

#profile dd{
	word-break : break-all;
}

@media screen and (max-width: 768px){
	#profile{
		padding-top : calc( 64 * 100vw / 768 );
	}
	#profile .head{
		grid-template-columns : calc( 160 * 100% / 720 );
		column-gap : calc( 24 * 100% / 720 );
	}
	#profile .head picture{
		height : calc( 160 * 100vw / 768 );
	}
	#profile h2{
		font-size : 3.4rem;
	}
	#profile .message{
		margin-top : calc( 24 * 100vw / 768 );
		border-radius : calc( 16 * 100vw / 768 );
		font-size : 2.4rem;
		padding-top : calc( 24 * 100vw / 768 );
		padding-bottom : calc( 24 * 100vw / 768 );
		padding-left : calc( 36 * 100vw / 768 );
		padding-right : calc( 36 * 100vw / 768 );
		max-width : calc( 720 * 100% / 768 );
	}
	#profile dl{
		margin-top : calc( 16 * 100vw / 768 );
	}
	#profile dl > div{
		column-gap : calc( 12 * 100vw / 768 );
	}
	#profile dl > div + div{
		margin-top : calc( 16 * 100vw / 768 );
	}
	#profile dt img{
		height : calc( 24 * 100vw / 768 );
	}
	#profile dd{
		font-size : 2.4rem;
	}
	#profile .family01{
		padding-top : calc( 120 * 100vw / 768 );
		padding-bottom : calc( 120 * 100vw / 768 );
	}
	#profile .list-wanko{
		margin-top : calc( 80 * 100vw / 768 );
	}
	#profile .sns{
		padding-top : calc( 80 * 100vw / 768 );
		padding-bottom : calc( 80 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#profile h2{
		font-size : 2.8rem;
	}
	#profile .message{
		font-size : 1.8rem;
	}
	#profile dd{
		font-size : 2rem;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#profile{
		padding-top : calc( 80 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
	#profile .head{
		column-gap : calc( 24 * 100% / 1240 );
		grid-template-columns : calc( 160 * 100% / 1240 );
	}
	#profile .head picture{
		height : calc( 160 * 100vw / 1280 );
	}
	#profile h2{
		font-size : 2.8rem;
	}
	#profile .message{
		margin-top : calc( 24 * 100vw / 1280 );
		border-radius : calc( 16 * 100vw / 1280 );
		padding-top : calc( 12 * 100vw / 1280 );
		padding-bottom : calc( 12 * 100vw / 1280 );
		padding-left : calc( 36 * 100vw / 1280 );
		padding-right : calc( 36 * 100vw / 1280 );
		min-height : calc( 80 * 100vw / 1280 );
	}
	#profile dl{
		margin-top : calc( 12 * 100vw / 1280 );
	}
	#profile dl > div{
		column-gap : calc( 8 * 100vw / 1280 );
	}
	#profile dl > div + div{
		margin-top : calc( 12 * 100vw / 1280 );
	}
	#profile dt img{
		height : calc( 20 * 100vw / 1280 );
	}
	#profile .family01{
		padding-top : calc( 80 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
	#profile .list-wanko{
		margin-top : calc( 48 * 100vw / 1280 );
	}
	#profile .sns{
		padding-top : calc( 80 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	#profile{
		padding-top : 80px;
		padding-bottom : 80px;
	}
	#profile .head{
		grid-template-columns : 160px auto;
		column-gap : 24px;
	}
	#profile .head picture{
		height : 160px;
	}
	#profile .message{
		margin-top : 24px;
		border-radius : 16px;
		padding-top : 12px;
		padding-bottom : 12px;
		padding-left : 36px;
		padding-right : 36px;
		min-height : 80px;
	}
	#profile dl{
		margin-top : 12px;
	}
	#profile dl > div{
		column-gap : 8px;
	}
	#profile dl > div + div{
		margin-top : 12px;
	}
	#profile dt img{
		height : 20px;
	}
	#profile dd{
		font-size : 20px;
	}
	#profile .family01{
		padding-top : 80px;
		padding-bottom : 80px;
	}
	#profile .list-wanko{
		margin-top : 48px;
	}
	#profile .sns{
		padding-top : 80px;
		padding-bottom : 80px;
	}
}

/*--------------------------------------------
EVENTS
---------------------------------------------*/

@media screen and (min-width: 769px) and (max-width:1279px){
	#events{
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	#events{
		padding-bottom : 80px;
	}
}