@charset "utf-8";

/* --------------------------------------------------------------
トリビアページ(PC)
-------------------------------------------------------------- */

@media screen and (min-width:640px){

/* -------------------------------------------------- */
/* スマホ用エレメントを非表示にするクラス（.sp）※共通
/* -------------------------------------------------- */

.trivia .sp{
	display:none;
}

/* -------------------------------------------------- */
/* PING トリビア！タイトルエリアのスタイル（.title）※共通
/* -------------------------------------------------- */

.trivia .title{
  width:100%;
  background-color:#362e2b;
}
.trivia .title h1{
  width:100%;
  text-align:center;
  padding-top:10px;
}
.trivia .title h1 img{
  display:inline !important;
}
.trivia .wrapper{
  width:100%;
  background-color:#faf0dc;
}
.trivia .wrapper{
  width:100%;
  margin:0 auto;
  padding-bottom:30px;
}
.trivia .mainVisual{
/*  background-image:url(../../images/tokusyu/trivia/vol001/bg_main_visual.png);*/
  background-size:cover;
  background-position:center;
  width:100%;
  height:400px;
  margin-bottom:30px;
}
.trivia .mainVisual h2{
  width:1000px;
  margin: 0 auto;
}
.trivia .mainVisual_sp{
  display:none;
}

/* -------------------------------------------------- */
/* 設問エリアのスタイル（.question）
/* -------------------------------------------------- */

.trivia .question{
  width:1000px;
  box-sizing: border-box;
  padding:20px;
  margin:0 auto;
}
.trivia .question .faq_1,
.trivia .question .faq_2,
.trivia .question .faq_3,
.trivia .question .faq_4,
.trivia .question .faq_5{
  width:980px;
  height:48px;
  text-align:left;
  box-sizing: border-box;
  padding-left:100px;
  margin-bottom:20px;
  line-height:48px;
  color:#FFFFFF;
}
.trivia .question .faq_1{
  background:url(../../images/tokusyu/trivia/common/faq_1.png) no-repeat;
}
.trivia .question .faq_2{
  background:url(../../images/tokusyu/trivia/common/faq_2.png) no-repeat;
}
.trivia .question .faq_3{
  background:url(../../images/tokusyu/trivia/common/faq_3.png) no-repeat;
}
.trivia .question .faq_4{
  background:url(../../images/tokusyu/trivia/common/faq_4.png) no-repeat;
}
.trivia .question .faq_5{
  background:url(../../images/tokusyu/trivia/common/faq_5.png) no-repeat;
}
.trivia .question .ans{
	letter-spacing: -.40em;
	text-align:left;
}
.trivia .question li.ans_a,
.trivia .question li.ans_b,
.trivia .question li.ans_c,
.trivia .question li.ans_d{
  height:30px;
  display:inline-block;
  letter-spacing: normal;
  vertical-align:middle;
  width:290px;
  box-sizing: border-box;
  padding-left:40px;
  margin-bottom:50px;
  font-size: 20px;
  line-height: 32px;
}
.trivia .question li.ans_a{
  background:url(../../images/tokusyu/trivia/common/faq_a.png) no-repeat center left;
  background-size:30px 30px;
  margin-left:50px;
}
.trivia .question li.ans_b{
  background:url(../../images/tokusyu/trivia/common/faq_b.png) no-repeat center left;
  background-size:30px 30px;
}
.trivia .question li.ans_c{
  background:url(../../images/tokusyu/trivia/common/faq_c.png) no-repeat center left;
  background-size:30px 30px;
}
.trivia .question li.ans_d{
  background:url(../../images/tokusyu/trivia/common/faq_d.png) no-repeat center left;
  background-size:30px 30px;
}
.trivia .answer_comingsoon {
  text-align: center;
  margin-bottom: 40px;
}
.trivia .answer_comingsoon p {
    display: inline-block;
    padding: 15px;
    color: #fff;
    width: 770px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    background-color: #f00;
}
/* 解答公開前のメッセージ -------------------------------- */

.commingSoon{
  font-size:28px;
  margin-bottom:30px;
  padding:10px;
  border-top:#666 2px solid;
  border-bottom:#666 2px solid;
}

/* -------------------------------------------------- */
/* 答えと解答エリアのスタイル（.answer）
/* -------------------------------------------------- */
.answer{
  width:1000px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
.answer h3{
  width:980px;
  height:52px;
  box-sizing:border-box;
  margin-bottom:20px;
  padding-top:13px;
  background:url(../../images/tokusyu/trivia/common/bg_answer.png) no-repeat;
  text-align:center;
  color:#FFFFFF;
  font-size:20px;
}
.answer dl{
  width:100%;
  margin-bottom:30px;
  letter-spacing:-0.04em;
}
.answer dt,
.answer dd{
  display:inline-block;
  width:29%;
  letter-spacing:normal;
  text-align:left;
  vertical-align:middle;
}
.answer dt{
  width:20%;
  box-sizing:border-box;
  padding-right:10px;
  text-align:right;
  font-size:20px;
}
.answer dd{
  height:30px;
  box-sizing:border-box;
  padding-left:40px;
  background:url(../../images/tokusyu/trivia/common/answer_a.png) no-repeat;
  background-size:30px 30px;
  vertical-align:middle;
  color:#0068B7;
  font-size:30px;
  font-weight:bold;
  line-height:1.2em;
}
.answer dd.ans_b{
  background:url(../../images/tokusyu/trivia/common/answer_b.png) no-repeat;
  background-size:30px 30px;
}
.answer dd.ans_c{
  background:url(../../images/tokusyu/trivia/common/answer_c.png) no-repeat;
  background-size:30px 30px;
}

/* -------------------------------------------------- */
/* リンクエリアのスタイル（.linkList）
/* -------------------------------------------------- */

.linkList{
  width:900px;
  margin:0 auto 30px;
  padding:0 50px;
}
.linkList li a{
  position:relative;
  display:block;
  margin-bottom:20px;
  padding:10px;
  border:5px solid #333333;
  border-radius:10px;
  background:url(../../images/tokusyu/trivia/common/icon_link.png) no-repeat 98% 50%;
  background-size:30px 30px;
  text-align: center;
  font-size:21px;
  font-weight:bold;
  line-height:1.3;
}
/*
.linkList li a:after{
  position:absolute;
  top:50%;
  right:15px;
  margin-top:-30px;
  content:url("../images/trivia/icon_link.png");
}
*/
.linkList li a span{
  font-size:16px;
  font-weight:normal;
}

/* -------------------------------------------------- */
/* 関連リンクエリアのスタイル（.relatedLink）※共通
/* -------------------------------------------------- */

.trivia .relatedLink{
  width:1000px;
  margin:0 auto 50px;
  padding:20px;
  box-sizing:border-box;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 10px 0px rgba(178, 148, 89, 0.75);
}
.trivia .relatedLink h3{
  margin-bottom:20px;
  border-bottom:2px solid #333333;
  text-align:left;
  vertical-align:bottom;
}
.trivia .relatedLink ul{
  width:100%;
  box-sizing:border-box;
  letter-spacing:-0.4em;
  text-align:left;
}
.trivia .relatedLink li{
  display:inline-block;
  *display:inline;
  *zoom:1;
  letter-spacing:normal;
  margin-right:20px;
  width:225px;
}
.trivia .relatedLink li.mr0{
  margin-right:0;
}
.trivia .relatedLink li figure{
  margin:0 !important;
}
.trivia .relatedLink li figcaption{
  width:100%;
  height:30px;
  margin:0;
  padding:5px 5px 5px 10px;
  box-sizing:border-box;
  background-color:#121212;
  color:#FFFFFF;
}

}


/* --------------------------------------------------------------
トリビアページ(SP)
-------------------------------------------------------------- */

@media screen and (max-width:640px){
.trivia .pc{display:none;}
.trivia section.title{
  width:100%;
  background-color:#362e2b;
}
.trivia section h1{
  line-height:1.0em;
}
.trivia .wrapper{
  width:100%;
  background-color:#faf0dc;
}
.trivia section.cont{
  margin:0 10px 20px;
}
.trivia .mainVisual{
  display:none;
}
.trivia .mainVisual_sp{
  margin-bottom:20px;
}
.trivia .mainVisual_sp h2{
  line-height:0;
}
.trivia .mainVisual_sp .read{
  padding:10px;
  background:#000;
  font-size:12px;
  text-align:left;
  color:#fff;
}

/* -------------------------------------------------- */
/* 設問エリアのスタイル（.question）
/* -------------------------------------------------- */

.trivia .question{
  width:100%;
  box-sizing:border-box;
  padding:10px;
}
.trivia .question h3{
  margin-bottom:10px;
  padding-left:2.8em;
  text-indent:-2.8em;
  padding-right:20px;
  text-align:left;
  line-height:1.3;
}
.trivia .question h3:before{
  margin-right:5px;
  padding:2px 7px 3px;
  content:attr(data);
  background-color:#333333;
  border-radius:5px;
  color:#FFFFFF;
}
.trivia .question .ans{
text-align:left;
margin-bottom:20px;
padding-left:40px;
}
.trivia .question .ans li{
  margin-bottom:10px;
}
.trivia .question .ans li:before{
  margin-right:5px;
  padding:0 5px 1px;
  content:attr(data);
  border:2px solid #333333;
  border-radius:20px;
  font-size:16px;
  font-weight:bold;
  line-height:1.0em;
}

.trivia .answer_comingsoon {
  padding: 0 10px;
  text-align: center;
  margin-bottom: 20px;
}
.trivia .answer_comingsoon p {
  display: block;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  background-color: #f00;
}
/* 解答公開前のメッセージ -------------------------------- */

.commingSoon{
  font-size:18px;
  width:100%;
  box-sizing:border-box;
  border-top:#666 2px solid;
  border-bottom:#666 2px solid;
  margin:20px auto;
}

/* -------------------------------------------------- */
/* 答えと解答エリアのスタイル（.answer）
/* -------------------------------------------------- */
.answer{
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}
.answer h3{
	position:relative;
	margin-bottom:10px;
	padding:10px 0;
	text-align:center;
	background-image: -moz-linear-gradient( 0deg, rgb(0,118,209) 0%, rgb(0,71,157) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb(0,118,209) 0%, rgb(0,71,157) 100%);
	background-image: -ms-linear-gradient( 0deg, rgb(0,118,209) 0%, rgb(0,71,157) 100%);
	border-top:2px solid #FFFFFF;
	border-bottom:2px solid #FFFFFF;
	color:#FFFFFF;
	font-size:20px;
}
.answer h3:before{
	position:absolute;
	left:10px;
	top:50%;
	margin-top:-23px;
	content:"ANSWER";
	font-size:46px;
	font-weight:bold;
	line-height:1.0em;
	color:rgba(255,255,255,0.15);
}
.answer dl{
  margin-bottom:30px;
  padding-left:40px;
}
.answer dt,
.answer dd{
  text-align:left;
}
.answer dt{
  font-size:16px;
}
.answer dd{
	color:#0068B7;
  font-size:30px;
  font-weight:bold;
  line-height:1.8em;
}
.answer dd:before{
	position:relative;
	top:-1px;
  margin-right:5px;
  padding:0 6px 1px;
  content:attr(data);
  border:2px solid #0068B7;
  border-radius:20px;
  vertical-align:middle;
  color:#0068B7;
  font-size:20px;
  font-weight:bold;
  line-height:1.2em;
}

/* -------------------------------------------------- */
/* リンクエリアのスタイル（.linkList）
/* -------------------------------------------------- */

.linkList{
  margin:0 auto;
  padding:0 10px 10px;
}
.linkList li a{
  position:relative;
  display:block;
  margin-bottom:10px;
  padding:10px 20px 10px 5px;
  border:5px solid #333333;
  border-radius:10px;
  background:url(../../images/tokusyu/trivia/common/icon_link.png) no-repeat 99% 50%;
  background-size:20px 20px;
  text-align:left;
  font-size:13px;
  font-weight:bold;
  line-height:1.3;
}
.linkList li a span{
  font-size:11px;
  font-weight:normal;
}

/* -------------------------------------------------- */
/* 関連リンクエリアのスタイル（.relatedLink）
/* -------------------------------------------------- */

.trivia .relatedLink{
  margin:0 10px;
  padding:15px 20px 15px;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 10px 0px rgba(178, 148, 89, 0.75);
}
.trivia .relatedLink h3{
  margin-bottom:20px;
  border-bottom:2px solid #333333;
  text-align:left;
  vertical-align:bottom;
}
.trivia .relatedLink li{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-bottom:20px;
}
.trivia .relatedLink li figcaption{
  box-sizing:border-box;
  width:100%;
  margin-top:-8px;
  padding:5px 5px 5px 10px;
  background-color:#121212;
  color:#FFFFFF;
}

}




/* -------------------------------------------------- */
/* アイアンシリーズ
/* -------------------------------------------------- */
/* --------------------------------------------------------------
ページ(PC)
-------------------------------------------------------------- */
@media screen and (min-width:640px){
.l-iron__image {
    position: relative;
    background-color: #000;
    width: 960px;
    margin: auto
  }
  .l-iron__image img{
    width: 100%;
  }
  .l-iron__image-link {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0
  }
.l-iron__image-link:nth-of-type(1) {
    width: 210px;
    height: 250px;
    top: 90px;
    left: 140px;
    margin: 0;
}
.l-iron__image-link:nth-of-type(2) {
    width: 250px;
    height: 260px;
    top: 410px;
    left: 120px;
    margin: 0;
}
.l-iron__image-link:nth-of-type(3) {
    width: 230px;
    height: 250px;
    top: 90px;
    left: 470px;
    margin: 0;
}

.l-iron__image-link:nth-of-type(4) {
    width: 230px;
    height: 260px;
    top: 410px;
    left: 475x;
    margin: 0;
}
.l-iron__image-link:nth-of-type(5) {
    width: 220px;
    height: 250px;
    top: 90px;
    left: 710px;
    margin: 0;
}
  .l-iron__image-link:nth-of-type(6) {
    width: 230px;
    height: 260px;
    top: 410px;
    left: 700px;
    margin: 0;
}
.l-iron__image-link {
    position: absolute;
    background-color: rgba(255,255,255,.1);
    opacity: 0;
}
.l-iron__image-link:hover {
    animation: flashOut .5s ease 0s 1 normal;
}
@keyframes flashOut{
	0%{opacity:1}
	100%{opacity:0}
}
.l-iron{
	margin-bottom:30px;
}

}

/* --------------------------------------------------------------
ページ(SP)
-------------------------------------------------------------- */

@media screen and (max-width:640px){
 .l-iron__image {
    position: relative;
    background-color: #fff;
    width: 100%
  }
  .l-iron__image img{
    width: 100%;
  }
  .l-iron__image-link {
    position: absolute;
    display: inline-block
  }

.l-iron__image-link:nth-of-type(1) {
    width: 66.66vw;
    height: 56.33vw;
    top: 40vw;
    left: 0;
    right: 0;
    margin: auto;
}
.l-iron__image-link:nth-of-type(2) {
    width: 66.66vw;
    height: 60.33vw;
    top: 104vw;
    left: 0;
    right: 0;
    margin: auto;
}
.l-iron__image-link:nth-of-type(3) {
    width: 66.66vw;
    height: 60.33vw;
    top: 189.66vw;
    left: 0;
    right: 0;
    margin: auto;
}
.l-iron__image-link:nth-of-type(4) {
    width: 66.66vw;
    height: 59.33vw;
    top: 346.66vw;
    left: 0;
    right: 0;
    margin: auto;
}
.l-iron__image-link:nth-of-type(5) {
    width: 66.66vw;
    height: 62.33vw;
    top: 258.66vw;
    left: 0;
    right: 0;
    margin: auto;
}
.l-iron__image-link:nth-of-type(6) {
    width: 66.66vw;
    height: 59.33vw;
    top: 415.66vw;
    left: 0;
    right: 0;
    margin: auto;
}

}