@charset "utf-8";

@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}


/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a, a:focus {
  outline: none;
}
img {
  vertical-align: bottom;
}

/* common */
.no-pc { display: none; }
.no-sp { display: block; }
.txt_l { text-align:left!important; }
.txt_c { text-align:center!important; }
.txt_r { text-align:right!important; }
.f_bold { font-weight: bold; }
.f_mincho {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝B", "MS Mincho", serif;
}

/* clearfix */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

body {
  /*font-family: YuGothic, "Custom Yu Gothic", "Yu Gothic", sans-serif;*/
  font-family: "Hiragino Kaku Gothic Pro","メイリオ", Osaka, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
  line-height: 1.6;
	letter-spacing: 0.15em;
}

.size20 { font-size:142%; }/*20px*/
.size18 { font-size:128%; }/*18px*/
.size16 { font-size:114%; }/*16px*/
.size14 { font-size:100%; font-size:14px; }/*14px*/
.size13 { font-size:92%; }/*13px*/
.size12 { font-size:85%; }/*12px*/
.size11 { font-size:78%; }/*11px*/
.size10 { font-size:71%; }/*10px*/
.sp-small { font-size:100%; }

/* IE */
body.ie {
  font-family: Verdana, Meiryo, sans-serif;
}


body { /*min-width: 1100px;*/ width:100%; }
	
.con { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; background-color: #e6e2b8;}
.hover_elem a:hover { filter: alpha(opacity=80); opacity: 0.8; }
.hover_img a:hover img  { filter: alpha(opacity=80); opacity: 0.8; }

/* --- quiz-top --- */
#cp_box { padding: 30px 70px; text-align: center; }
#cp_box div img.no-sp { display: inline-block; }
#cp_box div img.no-pc { display: none; }
#mv { text-align: center; }
#mv img { width: 100%; }
#cp_box_inner { padding: 30px 40px; background: #FFF; }
#cp_box .cp_start_box { background-color: #FFF; margin-top: 50px; padding: 45px 20px 35px; position: relative; }
#cp_box .cp_start_box_inner { background: url(/ringbell/contents/quiz/seibo2020/img/start_bg_l.png) 0 100% no-repeat,url(/ringbell/contents/quiz/seibo2020/img/start_bg_r.png) 100% 100% no-repeat #FFF; padding: 20px 0 30px; }
#cp_box .cp_start_box { background: url(/ringbell/contents/quiz/seibo2020/img/start_bg.png); margin-top: 30px; position: relative; padding: 5px; }
#cp_box .cp_start_catch { color: #e61717; font-size: 18px; margin-bottom: 20px; font-weight: bold; }
#cp_box .cp_start_catch:before { content: "＼"; font-size: 24px; vertical-align: middle; }
#cp_box .cp_start_catch:after { content: "／"; font-size: 24px; vertical-align: middle; }
#cp_box .cp_start_box .cp_start_btn { width: 90%; max-width: 360px; margin: auto; }
#cp_box .cp_start_box .cp_start_btn a { color: #FFF; font-size: 18px; border-radius: 4px; width: 100%; padding: 20px 0; display: table; position: relative; background-color: #e61717; margin-left: 0; transition: .3s; box-shadow: 0 2px #580000; -moz-box-shadow: 0 2px #580000; -o-box-shadow: 0 2px #580000; -ms-box-shadow: 0 2px #580000; filter: progid: DXImageTransform.Microsoft.Shadow(color=#580000, direction=0, strength=2, enabled=true), progid: DXImageTransform.Microsoft.Shadow(color=#580000, direction=90, strength=2, enabled=true), progid: DXImageTransform.Microsoft.Shadow(color=#580000, direction=180, strength=2, enabled=true), progid: DXImageTransform.Microsoft.Shadow(color=#580000, direction=270, strength=2, enabled=true); }
#cp_box .cp_start_box .cp_start_btn a:hover { box-shadow: none; transform: translate3d(0, 2px, 0); text-decoration: none; color: #FFF; opacity: 0.9; }
#cp_box .cp_start_box .cp_start_btn a span { display: table-cell; vertical-align: middle; padding: 20px 0; color: #FFF; width: 100%; }
ul.choice_btn li a { display: table-cell; vertical-align: middle; padding: 20px 0; color: #FFF;}




/* --- quiz --- */
#wrapper { padding: 0 60px 70px; background-color: #e6e2b8; }
#header { padding: 30px 0 7px; margin: 0 30px 20px; border-bottom: solid 1px #999999; color:#343434;}
#header h1 span { padding: 4px 12px; border-radius: 3px; color: #FFF; margin-left: 10px; font-size: 16px;}
.seibo #header h1 span { background-color: #9e9429;}
#innner { padding: 20px; background-color: #FFF;}
.box01 { background-color: #f2f0eb; border-radius: 8px 8px 0 0; padding: 30px; text-align: center;}
.box01 > p { margin: 0 0 20px;}
.img { margin: auto;}
.img dl { width: 50%; float: left; text-align: center;}
.img dd { margin-top: 10px;}
.single.img dl { width: 100%; float: none;}
.box02 { margin: 20px auto 10px; text-align: center;}
.box02.col2 { width:70%;}
.box02.col3 { width:100%;}
.box02 > p { font-weight: bold; margin-bottom: 20px;}
	.box02.col2 ul.choice_btn li { float: left; width: 48.5%; margin-left: 3%; border-radius: 4px; display: table;}
	.box02.col3 ul.choice_btn li { float: left; width: 32%; margin-left: 2%; border-radius: 4px; display: table;}
.box02.col2 ul.choice_btn li:nth-of-type(odd),.box02.col3 ul.choice_btn li:first-child { margin-left:0;}
.box02.col2 ul.choice_btn li:nth-of-type(n+3){ margin-top: 10px;}
	.box02 ul.choice_btn li { margin-left:0; }
	.box02 ul.choice_btn li { background-color: #d63b17; transition: .3s; box-shadow: 0 2px #a02508; -moz-box-shadow: 0 2px #a02508; -o-box-shadow: 0 2px #a02508; -ms-box-shadow: 0 2px #a02508; filter: progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=0, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=90, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=180, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=270, strength=2, enabled=true);}
	.box02 ul.choice_btn li:hover { box-shadow: none; transform: translate3d(0, 2px, 0); text-decoration: none; color: #FFF; opacity: 0.9; }
.box02 ul.choice_btn li span { color: #FFF; padding: 0 10px; display: block;}
h2 { margin-bottom: 30px; }
h2 span { position: relative; padding-left: 55px;}
h2.question span:before { content: ""; position: absolute; background: url(/ringbell/contents/quiz/seibo2020/img/question.png) no-repeat; width: 44px; height: 44px; top: -50%; left: 0; }
h2.answer span:before { content: ""; position: absolute; background: url(/ringbell/contents/quiz/seibo2020/img/answer.png) no-repeat; width: 44px; height: 44px; top: -50%; left: 0; }
h2.long span:before { top: 0; }

/* --- result ---*/
.result { text-align: center; margin-top: 10px;}
.box03 { padding:10px; }
.box04 { padding:25px; margin: 10px 10px 30px; background-color: #f7f7f7; border-radius: 5px; line-height: 2em; }
.border_g  { border-bottom: solid 1px #d9dbe2; padding-bottom: 30px; margin-bottom: 30px;}
h2.answer + div.img { margin-bottom: 30px;}
.present {
    background: url(/ringbell/contents/quiz/seibo2020/img/coupon.png) 475px 50% no-repeat,
								url(/ringbell/contents/quiz/seibo2020/img/ribbon01.png) 0 0 no-repeat,
								url(/ringbell/contents/quiz/seibo2020/img/ribbon02.png) 100% 100% no-repeat;
		background-color: #c6b573; padding: 5px; margin-bottom: 20px;
}
.present > p { text-align: center; color: #FFF; padding: 15px; border:solid 1px #FFF;}
.box03 p { line-height: 1.8em;}
.ta_r { text-align: right;}

table { width: 100%; margin:30px 0 5px;}
td { text-align: center; padding: 0.75em 0; vertical-align: middle;}
th { background-color: #cbbf90; color: #FFF; padding: 10px 0; vertical-align: middle; border: none; }
th:first-child { border-radius: 3px 0 0 0; text-align:right; padding-right: 2em;}
th:last-child { border-radius: 0 3px 0 0;}
tr:nth-of-type(4n) { background-color: #f9f7f1;}
tr:nth-of-type(2n+1) { display:none; }
tr:first-of-type { display:table-row; }
tr td:first-child { text-align:right; padding-right: 2em;}
tr td:nth-of-type(2) span { color: #FFF; background-color: #f42023; padding: 0.5em 36px 0.5em 0.2em; display: inline-block; width: 8.5em; letter-spacing: 0.1em; position:relative; vertical-align: middle; }
tr td:nth-of-type(2) span .copy_btn { width: 1.5em; position: absolute; right: 0; top: 0; background: url(/ringbell/contents/quiz/seibo2020/img/copy.png) no-repeat #b50f11 center; cursor: pointer; transition: .1s ease; height: 1.6em; padding: 0.5em; border-left: solid 1px #FFF; }
tr td:nth-of-type(2) span .copy_btn:hover{ background: url(/ringbell/contents/quiz/seibo2020/img/copy.png) no-repeat #7b0c0d center;}
tr td:nth-of-type(3) { display: table-cell;}

.answer_table tr { border-top: solid 1px #afafaf;}
.answer_table tr:nth-of-type(2n+1) { display: table-row; }
table.answer_table { border: solid 1px #afafaf;}
.answer_table tr:nth-of-type(odd) { background-color: #FFF;}
.answer_table tr:nth-of-type(4n) { background-color: #FFF;}
.answer_table tr td:first-child { padding-right: 0; border-right: solid 1px #afafaf; width: 20%; text-align: center; background-color: #f7f7f7; 
 vertical-align: middle;}
.answer_table tr td:last-child { text-align: left; padding-left: 3em;}

.box04 p { margin-bottom: 20px; }
.box04 p:last-child { margin-bottom: 0; }
ul.choice_btn.link_btn li:nth-of-type(1),ul.choice_btn.link_btn li:nth-of-type(2),ul.choice_btn.link_btn li:nth-of-type(3),ul.choice_btn.link_btn li:nth-of-type(4) { width: 49%; margin-left:2%; margin-bottom:2%; padding:10px 0; border-radius: 0px; box-shadow: 0 0; text-align: center; line-height: 1.8em; -moz-box-shadow: 0 0; -o-box-shadow: 0 0; -ms-box-shadow: 0 0;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#580000, direction=0, strength=0, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#580000, direction=90, strength=0, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#580000, direction=180, strength=0, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#580000, direction=270, strength=0, enabled=true);
}
ul.choice_btn.link_btn li:nth-of-type(1):hover,ul.choice_btn.link_btn li:nth-of-type(2):hover,ul.choice_btn.link_btn li:nth-of-type(3):hover,ul.choice_btn.link_btn li:nth-of-type(4):hover { transform: translate3d(0, 0, 0); }
ul.choice_btn.link_btn li:nth-of-type(odd) { margin-left:0;}
.close_btn { cursor: pointer; cursor: hand; width: 200px; background: #000; color: #FFF; text-align: center; padding: 20px 0; margin: 0 auto 0;}

/* 追加 */
.link_btn li { float: left; width: 49%; margin-left: 2%; margin-bottom: 2%; text-align: center;}
li.f_mincho:nth-of-type(odd) { margin-left: 0;}
.link_btn li a { color: #FFF; display: inline-block; width: 100%; padding: 10px 0;}
	.link_btn li:nth-of-type(1) { background-color: #e61717; }
	.link_btn li:nth-of-type(2) { background-color: #6dbb44; }
	.link_btn li:nth-of-type(3) { background-color: #62419a; }
	.link_btn li:nth-of-type(4) { background-color: #1696d5; }

.box03.onemore {text-align:center;}
.box03.onemore p { text-align: center; color: #97884f; margin-bottom: 30px; }
.onemore ul.choice_btn li { float: none; width: 70%; text-align: center; border-radius: 4px; margin: 15px auto 0; display: table; padding: 0 10px;}
.onemore ul.choice_btn li:nth-of-type(1) { margin: 0 auto 0; background-color: #62419a; transition: .3s; box-shadow: 0 2px #3a2a54; -moz-box-shadow: 0 2px #3a2a54; -o-box-shadow: 0 2px #3a2a54; -ms-box-shadow: 0 2px #3a2a54;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#3a2a54, direction=0, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#3a2a54, direction=90, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#3a2a54, direction=180, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#3a2a54, direction=270, strength=2, enabled=true);}
.onemore ul.choice_btn li:nth-of-type(2) { background-color: #1696d5; transition: .3s; box-shadow: 0 2px #01608e; -moz-box-shadow: 0 2px #01608e; -o-box-shadow: 0 2px #01608e; -ms-box-shadow: 0 2px #01608e;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=0, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=90, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=180, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=270, strength=2, enabled=true);}
.onemore ul.choice_btn li:hover { box-shadow: none; transform: translate3d(0, 2px, 0); text-decoration: none; color: #FFF; opacity: 0.9; }

/*追加-iPadで解答画面の画像が大きいときにクリックできない事象回避*/
.onemore_btn li{
		margin: 0 auto;
    transition: .3s;
    width: 70%;
    text-align: center;
    border-radius: 4px;
		background-color: #1696d5;
    box-shadow: 0 2px #01608e;
    -moz-box-shadow: 0 2px #01608e;
    -o-box-shadow: 0 2px #01608e;
    -ms-box-shadow: 0 2px #01608e;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=0, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=90, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=180, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#01608e, direction=270, strength=2, enabled=true);
    }
.onemore_btn li:nth-of-type(odd){
		margin: 0 auto 20px;
		background-color: #62419a;
    box-shadow: 0 2px #a02508;
    -moz-box-shadow: 0 2px #a02508;
    -o-box-shadow: 0 2px #a02508;
    -ms-box-shadow: 0 2px #a02508;
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=0, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=90, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=180, strength=2, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#a02508, direction=270, strength=2, enabled=true);
	}
.onemore_btn li a {
    display: block;
    vertical-align: middle;
    width: 100%;
    padding: 20px 0;
    color: #FFF;
}
.onemore_btn li:hover { box-shadow: none; transform: translate3d(0, 2px, 0); text-decoration: none; color: #FFF; opacity: 0.9; }
_::-webkit-full-page-media, _:future, :root .onemore_btn li:hover  {
          box-shadow: 0 2px #a02508;
    -moz-box-shadow: 0 2px #a02508;
    -o-box-shadow: 0 2px #a02508;
    -ms-box-shadow: 0 2px #a02508; transform: none; text-decoration: none; color: #FFF; opacity: 1; 
}
.answer_img { margin-top:30px;}
.answer_img img { height: auto; max-width:100%;}
.answer_img + p { margin-top:30px; }

/* SP */
@media screen and (max-width: 799px) {
  body { min-width:320px; font-size: 16px; }
	.size20 { font-size: 122%;}
	.size14 { font-size:100%; font-size:16px; }/*14px*/
	.sp-small { font-size:80%; }
	
  /* common */
  .no-pc { display: block; }
  .no-sp { display: none; }
  img { height: auto; max-width: 100%; }
  
  body.android .f_mincho,
  body.android .ins-lp05Services .ins-lp05Serif {
    font-family: "Sawarabi Mincho", serif;
  }
   /*margin: 0 2%;*/
  .con { min-height:100%; background-color: #e6e2b8; }  
	
	/* --- quiz-top --- */
	#cp_box div img.no-pc{ display:inline-block;}
	#cp_box div img.no-sp{ display:none;}
	
	#cp_box { padding: 20px 20px; }
	#cp_box_inner { padding: 20px 20px 30px; }
	#cp_box .cp_start_box { margin-top: 20px; }
	#cp_box .cp_start_box .cp_start_btn a { padding: 10px 0; }
	#cp_box .cp_start_catch { margin-bottom: 10px; position: relative; }
	#cp_box .cp_start_catch:before { font-size: 20px; position: absolute; left: 20px; bottom: 0; }
	#cp_box .cp_start_catch:after { font-size: 20px; position: absolute; right: 20px; bottom: 0; }
	
	/* --- quiz --- */
	.img { width:100%; }
	h2.question span:before,h2.answer span:before { top: -55px; left: 50%; -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}
	h2 span { padding-left: 0; display: block;}
	.box02.col2 { width: 100%;}
	h2 { text-align: center; margin-top: 50px;}
	ul.choice_btn li a { padding: 15px 0;}
	.box02.col2 ul.choice_btn li,.box02.col3 ul.choice_btn li { float: none; width: 100%; margin-left: 0%;}
	.box02.col2 ul.choice_btn li:not(:first-of-type),.box02.col3 ul.choice_btn li:not(:first-of-type) { margin-top: 15px;}
	tr td:first-child,th:first-child { padding-right: 0; text-align: center;}
	.img dl { width: 47.5%; }
	.img dl:first-child { margin-right:5%; }
	
	/* --- result ---*/
	tr:nth-of-type(2n+1) { display:table-row; }
	tr:nth-of-type(2n+1) td:first-child { text-align: left; font-size:13px;  padding: 10px; }
	tr:nth-of-type(4n+1) { background-color: #f9f7f1;}
	
	tr td:nth-of-type(3) { display: none;}
	
	.answer_table tr td:last-child { padding: 0.5em 1em;}
	.answer_table tr td:first-child { text-align: center; width:40%;}
	.answer_table tr:nth-of-type(2n+1) td:first-child { font-size:100%; }
	
	.link_btn li { width: 100%; float: none; margin-left: 0; margin-bottom: 15px; padding: 10px 0; border-radius: 0px; box-shadow: 0 0; text-align: center; line-height: 1.8em;}
	.present {
    background: url(/ringbell/contents/quiz/seibo2020/img/coupon.png) 50% 12.5% / 20% no-repeat,
								url(/ringbell/contents/quiz/seibo2020/img/ribbon01.png) 0 0 / 80% no-repeat,
								url(/ringbell/contents/quiz/seibo2020/img/ribbon02.png) 100% 100% / 20% no-repeat;
		background-color: #c6b573; padding: 5px; margin-bottom: 20px;
	}
	.present > p { padding: 20% 15px 15px; }
	.onemore ul.choice_btn li a { width: 100%; margin: 15px auto 0;}
	.ta_r { text-align: left;}
	
	}

@media screen and (max-width: 479px) {
	/* --- quiz-top --- */
	#cp_box div { padding: 20px 20px 20px;}
	#cp_box div ul { margin-top: 0;}
	ul.choice_btn li { float:none; width: 100%; margin-left: 0; margin-bottom:15px; }
	#cp_box { padding: 5%;}
	
	/* --- quiz --- */
	#wrapper { padding: 0 5% 5%;}
	#innner { padding: 3%;}
	#header { padding: 20px 0 15px; margin: 0 5% 15px;}
	#header h1 { text-align: center; }
	#header h1 span { display: block; text-align: center; margin-left:0;}
	.box01 { padding: 5%;}
	
	/* --- result ---*/
	.box03 p { line-height: 1.5em;}
	.box04 p span { text-align: center; display: inline-block; width: 100%;}
	.present {
    background: url(/ringbell/contents/quiz/seibo2020/img/coupon.png) 50% 12.5% / 30% no-repeat,
								url(/ringbell/contents/quiz/seibo2020/img/ribbon01.png) 0 0 / 80% no-repeat,
								url(/ringbell/contents/quiz/seibo2020/img/ribbon02.png) 100% 100% / 20% no-repeat;
		background-color: #c6b573; padding: 5px; margin-bottom: 20px;
	}
	.present > p { padding: 30% 15px 15px; }
	.onemore ul.choice_btn li a span { font-size: 18px;}
	.onemore ul.choice_btn li{ width: 100%; }
}
@media screen and (max-width: 429px) {
}