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

/*	h2
============================== */
.titleArea h2{
	width: 256px; height: 170px;
	background-position: center center;
    background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/consept/h2.png?2305);
	text-indent: -9999px;
	margin: 0 auto;
}
@media all and (min-width: 768px) {
	.titleArea h2{ width: 256px; height: 170px;}
}

@media all and (max-width: 767px) {
	.titleArea h2{ width:153px; height: 118px;}
}

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

.read p.txt { text-align: center;}

.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?2305);}
#ambassador .tit {background-image: url(../img/consept/tit_ambassador.png?2305);}

@media all and (min-width: 768px) {
	.read p.txt {padding: 30px 0 50px; font-size: 1.2em;}
	.tit { width:500px; height: 62px; }
	#ambassador  {/* padding: 80px 0;*/ padding: 40px 0;}
	
}

@media all and (max-width: 767px) {
	.read p.txt {padding: 15px 0 25px;}
	.tit { width:90%; height: 50px; }
	#ambassador { padding: 30px 0;}
}


ul.listArea { letter-spacing: -.4em;}
ul.listArea li { display: inline-block; vertical-align: top; letter-spacing: 0em; 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) {
	.wrap {width:1004px;}
	ul.listArea {padding-top: 48px;}
	ul.listArea li {width:310px; 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) {
	#library .wrap {width:98%; margin: 0 auto;}
	ul.listArea {padding-top: 35px;}
	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 .txtArea {background-color: #fff;}
.ambassadorArea article#ambassador01 .txtArea { border: solid 2px #f5a20b; box-shadow: 5px 5px 0px 0 #f5a20b;}
.ambassadorArea article#ambassador02 .txtArea { border: solid 2px #dc097b; box-shadow: 5px 5px 0px 0 #dc097b;}
.ambassadorArea article#ambassador03 .txtArea { border: solid 2px #009a29; box-shadow: 5px 5px 0px 0 #009a29;}
.ambassadorArea article#ambassador04 .txtArea { border: solid 2px #e30018; box-shadow: 5px 5px 0px 0 #e30018;}
.ambassadorArea article#ambassador05 .txtArea { border: solid 2px #00a6d9; box-shadow: 5px 5px 0px 0 #00a6d9;}
.ambassadorArea article#ambassador06 .txtArea { border: solid 2px #fabd00; box-shadow: 5px 5px 0px 0 #fabd00;}
.ambassadorArea article .txtArea .txtBox { padding: 15px;}
.ambassadorArea article#ambassador01 .txtBox  { color:#f18e00;}
.ambassadorArea article#ambassador02 .txtBox  { color:#dc097b;}
.ambassadorArea article#ambassador03 .txtBox  { color:#009a29;}
.ambassadorArea article#ambassador04 .txtBox  { color:#e30018;}
.ambassadorArea article#ambassador05 .txtBox  { color:#0096d4;}
.ambassadorArea article#ambassador06 .txtBox  { color:#d59100;}
.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;}
.ambassadorArea article#ambassador01 .txtBox h3  { border-bottom: dotted 2px #f5a20b;}
.ambassadorArea article#ambassador02 .txtBox h3  { border-bottom: dotted 2px #dc097b;}
.ambassadorArea article#ambassador03 .txtBox h3  { border-bottom: dotted 2px #009a29;}
.ambassadorArea article#ambassador04 .txtBox h3  { border-bottom: dotted 2px #e30018;}
.ambassadorArea article#ambassador05 .txtBox h3  { border-bottom: dotted 2px #00a6d9;}
.ambassadorArea article#ambassador06 .txtBox h3  { border-bottom: dotted 2px #fabd00;}
.ambassadorArea article .txtArea .txtBox h3 span { font-size: 0.85em;}

.ambassadorArea article figure span {
	display: block;
	position: relative;
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	height: 0;
    padding: 69.565% 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;
  }

@media all and (min-width: 768px) {
	.ambassadorArea { letter-spacing: -.4em; text-align: center;}
	.ambassadorArea article { width: 460px; display: inline-block; letter-spacing: 0em; vertical-align: top; margin: 0 14px 15px; }
	.ambassadorArea article .txtArea .txtBox p.txt { height: 16em;}
	.ambassadorArea article:nth-child(1) .txtArea .txtBox p.txt,.ambassadorArea article:nth-child(2) .txtArea .txtBox p.txt { height: 19em;}
	
}

@media all and (max-width: 767px) {
	#ambassador .tit { height: 55px;}
	#ambassador .wrap { width: 90%; margin: 0 auto;}
	.ambassadorArea { padding-top: 10px;}
	.ambassadorArea article { width: 100%; padding-top: 5px; margin-bottom: 20px;}
	.ambassadorArea article .ph { width: 100%; margin: 0 auto;}
	.ambassadorArea article .txtArea .txtBox p.txt {padding: 10px 0px 0;}
}