@charset "utf-8";

/* 受賞者に贈る書
========================================================= */



/* インデックス
--------------------------------------------------------- */

.index .lead { display: table; font-size: 1.8rem; line-height: 1.5; margin: 60px auto 0; }

.index .profile { display: table; margin: 90px auto 0; }
.index .profile p, .index .profile dl { display: table-cell; }
.index .profile p:first-child { width: 170px; vertical-align: top; }
.index .profile dl { max-width: 700px; padding: 0 30px 0 0; }
.index .profile dt { font-weight: bold; }
.index .profile dt span { font-size: 2.4rem; }
.index .profile dd { line-height: 2.4rem; padding: 20px 0 0 0; }
.index .profile dl + p { width: 90px; vertical-align: bottom; }

.index ul { width: 100%; max-width: 900px; overflow: hidden; margin: 100px auto 0; }
.index li { width: calc(300/900 * 100%); float: left; position: relative; }
.index li .caliCard { display: block; background: #000000; position: relative; }
.index li .caliCard p:nth-child(2), .index li .caliCard p:nth-child(3) { display: none; }

.index li.new:before {
	content: "";
	max-width: 55px;
	max-height: 56px;
	width: calc(2.28vw + 32px);
	height: 100%;
	background: url(../images/icon_new.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transition: .15s;
}


@media screen and (min-width: 769px) {
	.index li .caliCard:hover p:first-child { opacity: 0.3; transition: all 0.3s; }
	.index li .caliCard:hover p:nth-child(2) {
		width: 100%;
		display: block;
		color: #ffffff;
		font-size: 1.7rem;
		line-height: 1.5;
		font-weight: bold;
		text-align: center;
		position: absolute;
		top: 18%;
	}
	.index li .caliCard:hover p:nth-child(3) {
		width: 100%;
		display: block;
		color: #ffffff;
		font-size: 2.2rem;
		line-height: 1.5;
		font-weight: bold;
		text-align: center;
		letter-spacing: -0.05em;
		box-sizing: border-box;
		padding: 0 0.2em;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}



@media screen and (max-width: 767px) {
	.index .lead { font-size: 1.6rem; margin: 30px auto 0; }
	
	.index .profile { margin: 50px auto 0; }
	.index .profile p, .index .profile dl { display: block; }
	.index .profile p:first-child { width: 130px; margin: 0 auto; }
	.index .profile dl { max-width: 100%; font-size: 1.5rem; padding: 15px 0 5px 0; }
	.index .profile dt { text-align: center; }
	.index .profile dt span { font-size: 2.0rem; }
	.index .profile dd { line-height: 2.2rem; padding: 10px 0 0 0; }
	.index .profile dd br { display: none; }
	.index .profile dl + p { width: 50px; margin: 0 0 0 auto; }
	
	.index ul { margin: 50px auto 0; }
}


/* 書モーダル
========================================================= */

.modal_open { cursor: pointer; }
.modal_box { position: fixed; z-index: 7777; display: none; width: calc(100% - 40px); max-width: 750px; margin: 0; box-sizing: border-box; background: url(../../calli/images/calli_bg.png); padding: 35px; }
.modal-archive { background: #fff; height: 70vh; }
.modal-iframe { width: 100%; height: 100%; border : none; }
.modClose { position: absolute; width: 50px; height: 50px; top: 0px; right: 0px; }
.modClose a { display: block; position: relative; cursor: pointer; width: 50px; height: 50px; }
.modClose a:before { content: ""; position: absolute; display: block; top: 24px; right: 12px; width: 26px; height: 1px; background: #222; transform: rotate(45deg); }
.modClose a:after { content: ""; position: absolute; display: block; top: 12px; right: 24px; width: 1px; height: 26px; background: #222; transform: rotate(45deg); }
.modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: rgba(0,0,0,0.4);}


#animation_container { margin: 0 auto; box-sizing: border-box; }

.modalTitle dl { display: table; }
.modalTitle dl dt { display: table-cell; white-space: nowrap; vertical-align: middle;  padding: 30px 25px; font-weight: 700; border-right: 1px #000000 solid; box-sizing: border-box; }
.modalTitle dl dd { display: table-cell; vertical-align: top; padding-left: 25px; padding-right: 25px; box-sizing: border-box; }
.modalTitle dl dd h3 { font-size: 1.6rem; font-weight: 700; margin-top: 14px; line-height: 2.8rem; }
.modalTitle dl dd p { line-height: 2.2rem; }
.modalTitle dl dd p span { display: inline-block; }

.modalTakeda { padding-left: 25px; padding-right: 25px; font-family: "Yu Mincho", "YuMincho"; text-align: center; }
.modalTakeda h3 { font-size: 2rem; margin-bottom: 20px; }
.modalTakeda p { line-height: 2.8rem; margin-bottom: 20px; }
.modalTakeda p span { display: inline-block; }
.modalTakeda p.name { font-size: 2.1rem; letter-spacing: 0.5em;}


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

@media screen and (max-width: 500px) {
	.modal_box { width: calc(100% - 30px); padding: 15px; }
	
	.modalTitle dl dt { display: block; vertical-align: middle;  padding: 20px 20px 0; border-right: none; }
	.modalTitle dl dd { display: block; padding-left: 20px; padding-right: 20px; }
	.modalTitle dl dd p span { display: inline; }
	
	.modalTakeda { padding-left: 20px; padding-right: 20px; text-align: left; }
	.modalTakeda h3 { font-size: 1.8rem; }
	.modalTakeda p { line-height: 2.4rem; margin-bottom: 10px; }
	.modalTakeda p span { display: inline; }
}