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

/*	h2
============================== */
.titleArea { border-bottom:solid 1px #d9d9d9; border-top:solid 1px #d9d9d9; background-color: #fff; width: 100%; margin-bottom: 2em;}
.titleArea #consept {
	background-position: center center;
    background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	}
	.titleArea h2, .titleArea .txt {height: 0; text-indent: -9999px; }

.titleArea #consept a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


@media all and (min-width: 768px) {
	.titleArea div { width: 100%; max-width: 1040px; margin: 0 auto;}
	.titleArea #consept {background-image: url(../img/img_consept_pc.jpg);
	height:0;
	padding-top: -webkit-calc(732 / 1920 * 100%);
	padding-top: calc(732 / 1920 * 100%);
}
}
@media all and (max-width: 767px) {
	.titleArea { margin-bottom: 1em;}
	.titleArea #consept {background-image: url(../img/img_consept_sp.jpg);
	height:0;
	padding-top: -webkit-calc(500 / 1000 * 100%);
	padding-top: calc(500 / 1000 * 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; }
	#library{padding-top: 110px; margin-top: -110px;}
	#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; }
	#library{ padding-top: 75px; margin-top: -70px;}
	#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 #fd819a;}
.profArea .profBlock .profBox h3 {margin: 0 auto; border-bottom: solid 2px #fd819a; 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 .profBox p.txt { text-align: left; padding: 0 0 10px;}

.ambassadorArea article .txtArea {background-color: #fff; border: solid 2px #fd819a; box-shadow: 5px 5px 0px 0 #fd819a;}
.ambassadorArea article .txtArea .txtBox { padding: 15px; color:#fd819a;}
.ambassadorArea article .txtArea .txtBox p.txt { font-size: 0.9em; text-align: left; padding: 10px 5px 0;}
.ambassadorArea article .txtArea .txtBox h3 { font-size: 1.1em; padding-bottom: 0.5em; text-align: center; border-bottom: dotted 2px #fd819a;}
.ambassadorArea article .txtArea .txtBox h3 span { font-size: 0.85em;}


@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; padding-top: 110px; margin-top: -110px;}
	.ambassadorArea article:nth-child(odd) { margin-right:3%;}
	.profArea .profBlock .profBox h3 { font-size: 2.0em; padding: 28px 5px 12px; }
	.profArea .profBlock .profBox p.txt { padding: 15px;}
	
	.ambassadorArea article .txtArea .txtBox p.txt { height: 19em;}
	
}

@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; padding-top: 75px; margin-top: -70px;}
	.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 .profBox p.txt { font-size: 0.9em; padding: 10px 0px;}
	
	.ambassadorArea article .txtArea .txtBox p.txt {}
}