/*
 * basic markup
 */

@font-face{
	font-family: "BodoniSvtyTwoITCTTBook";
	src: url(../f/Bodoni_SvtyTwo_ITC_TT_Book.ttf);
}

*{
	font-family: 'BodoniSvtyTwoITCTTBook', serif;
	font-weight: 400;
	font-size: 10pt;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	margin: 0;
	padding: 0;
	color: rgb(80, 0, 34);
	--plyr-video-background: rgb(255, 248, 238);
	--plyr-video-controls-background: linear-gradient(rgba(255, 248, 238, 0), rgba(255, 248, 238, 0.75))
}

html, body{
	padding: 0;
	margin: 0;
	border: 0;
	overflow-x: hidden;
}

body{
	background-color: rgb(255, 248, 238);
}

.showUpObject{
	opacity: 0;
	transform: translate3d(0, 0, -30px);
}

.showUpObject.screened{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: transform 600ms cubic-bezier(.25,.75,.45, 1) 300ms, opacity 800ms cubic-bezier(.59,.07,.62,.43) 100ms;
}

#mainContentsContainer{
	width: 84.33%;
	max-width: 1012px;
	margin: 0 auto;
	position: relative;
}

h1{
	padding: min(9px, 0.64vw) min(30px, 2.14vw);
	font-size: min(36pt, calc(11pt + 2.2vw));
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.2em;
	color: rgba(49,0,32,1);
	display: inline-block;	
}

footer{
	width: 100vw;
	height: min(36px, 2.57vw);
	padding-top: min(15px, 1.07vw);
	text-align: center;
	font-size: min(14pt, calc(4.3pt + 0.86vw));
	color: white;
	background: linear-gradient(0deg, rgba(49,0,32,1) 0%, rgba(49,0,32,0.9739) 63.93%, rgba(49,0,32,0) 100%);
}

a{
	text-decoration: none;
}

nav{
	display: inline-block;
	padding: min(3px, 0.21vw) min(45px, 3.21vw);
	background-color: #fff8eead;
	border-radius: min(24px, 1.71vw);
	box-shadow: 0px -1px 5px rgb(0 0 0 / 50%), 0px 1px 5px rgb(0 0 0 / 50%);
	left: 50%;
	transform: translateX(calc(50vw - 50%));
	margin-bottom: min(27px, 1.92vw);
	width: min(630px, 45vw);
	text-align: center;
}

nav > a{
	font-size: min(16pt, calc(5pt + 1vw));
	letter-spacing: 0.05em;
	margin: 0 min(9px, 0.64vw);
	background: url("../r/common/sun.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

nav > br.sponly{
	display: none;
}

/* common expressions */
.container {
    width: 84.33%;
    max-width: 1012px;
    margin: min(36px, 2.57vw) auto;
}
.banner {
    margin-left: auto;
    margin-right: auto;
		width: 30vw;
		max-width: 360px;
}
.banner > img,
.banner > a > img {
    width: 100%;
}
.header {
    display: flex;
    font-size: min(36pt, calc(11pt + 2.2vw));
    width: min(782px, 55.85vw);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
		justify-content: center;
}
.header > h1 {
    display: block;
}

.header > h1 * {
	/* for Google Translate */
	color: rgba(49,0,32,1);
}
.header > .title {
    font-size: min(24pt, calc(7.5pt + 1.5vw));
    text-align: left;
    margin-left: 2rem;
}

.message-container {
    min-height: 5em;
    width: min(782px, 55.85vw);
    margin: 4em auto;
   text-align: justify;
}
.message-header {
    font-size: min(18pt, calc(5.55pt + 1.11vw));
    line-height: 1.8;
    width: 100%;
    margin-bottom: 1em;
		font-weight: bold;
}
.message-content {
    font-size: min(18pt, calc(5.55pt + 1.11vw));
    line-height: 1.8;
    width: 100%;
    letter-spacing: 0.04em;
}

.items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 7em auto 7.2em auto;
}
.item {
    width: min(291px, 20.78vw);
		margin: 0 0 2.65rem 0;
}
.item .fadedpicture{
    width: min(291px, 20.78vw);
    height: min(291px, 20.78vw);
    margin-bottom: min(12px, 0.85vw);
    position: relative;
}

.item .fadedpicture:after{
    content: "";
    position: absolute;
    top: 85%;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 248, 238, 0), rgba(255, 248, 238, 1));
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 0 0;
}
.item .title {
    font-size: min(16pt, calc(5pt + 1vw));
    letter-spacing: 0.25em;
    font-weight: bold;
    margin-bottom: min(9px, 0.64vw);
}
.item .description {
    font-size: min(16pt, calc(5pt + 1vw));
    letter-spacing: 0.25em;
}

i{
	font-style: italic;
	font-weight: inherit;
	font-size: inherit;
}

@media screen and (max-width: 768px){
	.container {
		width: 90vw;
	}
	
	footer{
		height: min(36px, 5.62vw);
    font-size: min(14pt, calc(7pt + 1.4vw));
    padding-top: min(15px, 2.34vw);
	}
	
	nav {
		width: 80vw;
		margin-bottom: min(30px, 4.68vw);
	}
	
	nav > a{
		font-size: min(16pt, calc(8pt + 1.6vw));
		margin-top: min(9px, 1.4vw);
    margin-bottom: min(9px, 1.4vw);
    display: inline-block;
	}
	
	nav > br.sponly{
		display: initial;
	}
	
	.header{
		flex-wrap: wrap;
		width: 90vw;
	}
	
	.header > .title {
    font-size: min(24pt, calc(12pt + 2.4vw));
		margin-top: min(18px, 2.81vw);
		margin-left: 0;
		width: 100%;
    text-align: center;
	}
		
	.message-container{
		width: 80vw;
	}
	
	.message-header{
		font-size: min(18pt, calc(9pt + 1.8vw));
	}
	
	.message-content{
		font-size: min(16pt, calc(8pt + 1.6vw));
	}
	
	.message-content > br{
		display: none;
	}
	
	.item{
		width: 40vw;
	}
	
	.item .fadedpicture{
		width: 40vw;
		height: 40vw;
		margin-bottom: 3vw;
	}
	
	.item .title{
		font-size: min(14pt, calc(7pt + 1.4vw));
	}
	
	.item .description{
		font-size: min(12pt, calc(6pt + 1.2vw));
	}

}