/*	コンセプト
============================== */

/*	h2
============================== */

.titleArea h2{
	background-position: center top;
    background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	margin: 0 auto;
}
@media all and (min-width: 768px) {
	.titleArea { padding-bottom: 15px;}
	.titleArea h2{
	background-image: url(../img/consept/h2_pc.png);
	width:100%; height: 200px;}
}

@media all and (max-width: 767px) {
	.titleArea { padding-bottom: 10px;}
	.titleArea h2 {background-image: url(../img/consept/h2_sp.png);
	width:100%;
	height:0;
	padding-top: -webkit-calc(260 / 750 * 100%);
	padding-top: calc(260 / 750 * 100%);}
}

/*	contents
============================== */

.read p.txt { text-align: center;
font-family: "tot-shizukardgo-stdn", sans-serif;
font-weight: 800;
font-style: normal;
-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
color: #f97088;}

.tit{
	background-position: center top;
    background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	margin: 0 auto;
}
#library .tit {background-image: url(../img/consept/tit_library.png);}
#ambassador .tit {background-image: url(../img/consept/tit_ambassador.png?2405);}



@media all and (min-width: 768px) {
	.read { padding-bottom: 2em;}
	.read p.txt {padding: 0 0 0.8em; font-size: 1.4em;}
	.tit { width:500px; height: 62px; }
	#ambassador {/* padding: 80px 0;*/ padding: 130px 0 40px; margin-top: -130px;}
}

@media all and (max-width: 767px) {
	.read { padding-bottom: 1.5em;}
	.read p.txt {padding: 0 0 0.5em;}
	.tit { width:90%; height: 50px; }
	#ambassador { padding: 80px 0 20px; margin-top: -50px;}
}


ul.listArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}
ul.listArea li { vertical-align: top; line-height: 1.5em; }

ul.listArea h3 {color: #0075ba; text-align: center;}

ul.listArea li figure span {
	display: block;
	position: relative;
	background-size: 100%;
	background-position: center center;
	height: 0;
    padding: 56.26% 0 0;
}
ul.listArea li figure span img {
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
ul.listArea li figure {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

.listArea a:hover figure { opacity:0.8;}

ul.listArea li h4 { background-color: #e4031e; color:#fff; text-align: center; font-size: 1.1em; padding: 0.2em 0;}


@media all and (min-width: 768px) {
	ul.listArea {padding: 48px 0 80px;}
	ul.listArea li { width:calc((100% - 24*2px)/3); padding-bottom: 40px;}
	ul.listArea li:nth-child(3n-1) {margin: 0 24px; }
	ul.listArea h3 { padding: 10px 0 3px; font-size: 1.1em;}
}

@media all and (max-width: 767px) {
	ul.listArea {padding: 35px 0 10px;}
	ul.listArea li {width:46%; margin: 0 2%; padding-bottom: 25px;}
	.listArea h3 { padding: 8px 0 3px; font-size: 0.9em; line-height: 1.3em;}
}

.ambassadorArea article figure span {
	display: block;
	position: relative;
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	height: 0;
    
}
.ambassadorArea article .ph figure span {padding: 100% 0 0;}
.ambassadorArea article .movieBox figure span {padding: 56.26% 0 0;}
.ambassadorArea article figure span img {
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
.ambassadorArea article figure {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
.ambassadorArea article .movieBox a:hover figure { opacity:0.8;}

.profArea .profBlock {border: solid 3px #d9d9d9; padding: 2px 0;}
.profArea .profBlock .profBox { width: 92%; padding: 0 3%; margin: auto auto; position: relative; border: solid 2px #0160be;}
.profArea .profBlock .profBox h3 {margin: 0 auto; border-bottom: solid 2px #0160be; text-align: center;
font-family: "tot-shizukardgo-stdn", sans-serif;
font-weight: 700;
font-style: normal}
.profArea .profBlock .profBox h3 rt {font-weight: 500;}
.profArea .profBlock .profBox .movieBox { padding: 3% 0;}
.profArea .profBlock .txtBox p.txt { text-align: left; padding: 0 0 10px;}


@media all and (min-width: 768px) {
	.ambassadorArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: left; text-align: center; padding-top:30px;}
	.ambassadorArea article { width:calc((100% - 3%)/2); vertical-align: top;}
	.ambassadorArea article:nth-child(odd) { margin-right:3%;}
	.profArea .profBlock .profBox h3 { font-size: 2.0em; padding: 28px 5px 12px; }
	.profArea .profBlock .txtBox { padding: 15px;}
	
}

@media all and (max-width: 767px) {
	#ambassador .tit { height: 55px;}
	#ambassador .wrap { width: 90%; max-width: 560px; margin: 0 auto;}
	.ambassadorArea { padding-top: 20px;}
	.ambassadorArea article { width: 100%; margin-bottom: 20px;}
	.ambassadorArea article .ph { width: 100%; margin: 0 auto;}
	.profArea .profBlock .profBox h3 { font-size: 1.8em; padding: 30px 5px 15px;}
	.profArea .profBlock .txtBox { padding: 15px 5px;}
	.profArea .profBlock .txtBox p.txt { font-size: 0.9em;}
}