@charset "UTF-8";
/* CSS Document */
/* 基本情報 */
@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
img {
	max-width: 100%;
	height: auto;
}
body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

body {
	display: block;
	z-index: -1;
	width: 100%;
    background:#000;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}
.imgPC {
	display: block;
}
.imgSP {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

#wrapper{
	width: 100%;
	background: url("../../_img/bg.jpg") center top;background-attachment:fixed;
}

/* ヘッダーロゴ部分 */
header{
	width: 1100px; height:1117px; position:relative; margin:0 auto; z-index:1;
}
header h1 {font-size: 0;}
header img{width:100%;}
header #chara1 {
    width:92%; position: absolute; left:6%; top:-24%; z-index:1;}
header #copy {
    width:42%; position: absolute; left:13%; top:0; z-index:2;}
header #logo_yugi{
    width:35%; position: absolute; right:4%; top:30%; z-index:2;}
header #pack{
    width:15%; position: absolute; right:0%; top:22%; z-index:1;}
header #chara2 {
    width:35%; position: absolute; left:0%; top:30%; z-index:0;}
header #copy2 {
    width:10%; position: absolute; left:1%; top:28%; z-index:1;}
header #title {
    width:75%; position: absolute; left:13%; top:56%; z-index:4;}
header #read {
    width:75%; position: absolute; left:13%; top:75%; z-index:3;}
header #day1 {
    width:90%; position: absolute; left:5%; top:90%; z-index:3;}
header #titlecard1 {
    width:20%; position: absolute; left:0%; top:63%; z-index:1;}
header #titlecard2 {
    width:20%; position: absolute; right:0%; top:57%; z-index:1;}
header #titlecard3 {
    width:20%; position: absolute; right:0%; top:67%; z-index:2;}

/* カード*/
 #cardSet{
	width: 1100px; height:780px; position:relative; margin:0 auto; z-index:1;
}
#cardSet img{width:100%;}
 #cardSet #cardmidashi {
    width:92%; position: absolute; left:4%; top:0; z-index:1;}
 #cardSet #card1name {
    width:31%; position: absolute; left:1%; top:13%; z-index:1;}
 #cardSet #card1 {
    width:31%; position: absolute; left:1%; top:28%; z-index:1;}
 #cardSet #copy1 {
    width:31%; position: absolute; left:1%; top:92%; z-index:1;}
 #cardSet #card2name {
    width:31%; position: absolute; left:34%; top:13%; z-index:1;}
 #cardSet #card2 {
    width:31%; position: absolute; left:34%; top:28%; z-index:1;}
 #cardSet #copy2 {
    width:31%; position: absolute; left:34%; top:92%; z-index:1;}
 #cardSet #card3name {
    width:31%; position: absolute; left:66.5%; top:13%; z-index:1;}
 #cardSet #card3 {
    width:31%; position: absolute; left:66.5%; top:28%; z-index:1;}
 #cardSet #copy3 {
    width:31%; position: absolute; left:66.5%; top:92%; z-index:1;}


/* 情報部分*/

#yugi_flame{width:1100px; margin:50px auto 0;background:#000; border:6px solid#ffd800;box-sizing:border-box;}

#yugi_flame h2#kimari{width:1094px; height:104px; text-align:center;background: url('../../_img/midashi_kimari.png') center top no-repeat;}

.oubo_kikan{width:900px;margin:0 auto; background:#FFF;border:5px solid #FF0000;text-align:center;}
.oubo_kikan h2{background:#FF0000; padding:5px;font-size:26px;color:#FFFFFF;}
.oubo_kikan .inner{padding:10px;}
strong{font-size:26px; font-weight:bold;color:#FF0000;}
.oubo_kikan .inner h2 br{display:none;}


.oubo_kikan2{width:700px;margin:20px auto; background:#FFF;border:5px solid #FF0000;text-align:center;}
.oubo_kikan2 h2{background:#FF0000; padding:5px;font-size:21px!important;color:#FFFFFF;}
.oubo_kikan2 .inner{padding:10px;}
.oubo_kikan2 strong{font-size:26px; font-weight:bold;color:#FF0000;}

.toiawase{width:700px;margin:20px auto ; background:#FFF;border:5px solid #000;text-align:left;}
.toiawase h2{background:#000; padding:5px;font-size:21px!important;color:#FFFFFF;text-align:center;}
.toiawase .inner{padding:20px!important;}
.toiawase strong{font-size:22px; font-weight:bold;color:#000;}


#yugi_flame article{width:900px;margin:158px auto;background: url('../../_img/step_bg.jpg') center top repeat-y;position:relative;}
#yugi_flame article:last-child{margin:158px auto 50px;}
#yugi_flame article .inner{padding:20px 100px;}
#yugi_flame article:after{content: ''; display: inline-block;
  width: 900px; height: 35px;
  background-image: url('../../_img/step_end.jpg');
  background-size: contain;
  vertical-align: middle;}

#yugi_flame article .kakomi1{border:2px solid #000; border-radius: 6px; margin:15px 0;padding:15px;font-size:17px;}
#yugi_flame article .kakomi2{border:2px solid #000; border-radius: 6px; margin:15px 0;padding:15px;font-size:14px;}


#yugi_flame article h2{font-size:0;}
#yugi_flame article h2.step1{width:900px; height:118px; text-align:center;background: url('../../_img/midashi1.png') center top no-repeat;position:absolute;top:-118px;}
#yugi_flame article h2.step2{width:900px; height:118px; text-align:center;background: url('../../_img/midashi2.png') center top no-repeat;position:absolute;top:-118px;}
#yugi_flame article h2.step3{width:900px; height:118px; text-align:center;background: url('../../_img/midashi3.png') center top no-repeat;position:absolute;top:-118px;}
#yugi_flame article h2.step4{width:900px; height:118px; text-align:center;background: url('../../_img/midashi4.png') center top no-repeat;position:absolute;top:-118px;}

#yugi_flame article h3{font-size:27px; font-weight:bold;position: relative;margin-left:30px;padding: 2px 5px 2px 15px;}
#yugi_flame article h3:before {
display: inline-block;
line-height: 40px;position: absolute;padding: 0em;color: white;
background: #FF0000;font-weight: normal;width: 40px;text-align: center;
height: 40px;line-height: 40px;left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
}

#yugi_flame article h3.yokoCenter{text-align:center;}
#yugi_flame article h3.yokoCenter:before{left:110px;}

#yugi_flame article h3.point1:before {content: "1";}
#yugi_flame article h3.point2:before {content: "2";}
#yugi_flame article h3.point3:before {content: "3";}
#yugi_flame article h3.point4:before {content: "4";}
#yugi_flame article h3.point5:before {content: "5";}
#yugi_flame article h3.point6:before {content: "6";}
#yugi_flame article h3.point7:before {content: "7";}

#yugi_flame article dl{width:707px;margin:0 auto 20px;}
#yugi_flame article dl.rayout500 dt{width:500px; float:left;}
#yugi_flame article dl.rayout500 dd{margin-left:530px;}
#yugi_flame article .centerPict{max-width: 50%; margin:20px auto;}

#yugi_flame article ul#payment{display:flex;flex-wrap: nowrap;}
#yugi_flame article ul#payment li{width:48%;margin:1%;}
#yugi_flame article ul#payment li p{margin:0 15px 10px;}

#yugi_flame article ul#payment li h4 {font-size:27px; font-weight:bold; position: relative;margin-left:0px; padding: 2px 5px 2px 50px;color:#FFF;}
#yugi_flame article ul#payment li h4 span{font-size:17px;display:block;}

#yugi_flame article ul#payment li h4:before { 
display: inline-block;
line-height: 40px;position: absolute;padding: 0em;color: white;
background: #FFF;font-weight: normal;width: 40px;text-align: center;
height: 40px;line-height: 40px;left:5px;
top: 50%;font-weight:bold;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
}
#yugi_flame article ul li.gold{border:2px solid #b9820c;}
#yugi_flame article ul li.blue{border:2px solid #377291;}
#yugi_flame article ul li.gold .obi{background:#b9820c;}
#yugi_flame article ul li.blue .obi{background:#377291;}

#yugi_flame article ul li h4.boxA:before {content: "A"; color:#b9820c!important;}
#yugi_flame article ul li h4.boxB:before {content: "B"; color:#377291!important;}


table#payTable{border-collapse: collapse; border:2px solid #000;margin:20px;}
table#payTable th{padding:10px; border:1px solid #000;width:50%;text-align:center;}
table#payTable td{padding:10px; border:1px solid #000;width:50%;text-align:center;}
table#payTable caption{background:#000;color:#FFF; padding:6px;font-weight:bold; font-size:120%; }

/* フッター */
footer {
	width: 100%;
	box-sizing: border-box;
}
footer p.copy {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
    color:#FFF;
    margin-top:20px;
}

footer #snsBtn{
  font-size: 0;
  padding: 20px 0;
    text-align:center;
}
footer #snsBtn li{
  line-height: 1.83333;
  letter-spacing: 0;
  display: inline-block
}
footer #snsBtn li + li {
  margin-left: 15px
}
footer #snsBtn img {
  width: 50px;
  height: auto
}


/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.btn{display:block;width:100%;background-color:#FF0000;color:#fff;text-align:center;padding:20px 0;margin-top:5px;font-size:30px;line-height:20px;text-decoration: none;margin-bottom:10px;box-shadow: 0px 0px 0px 5px #7c0000;/* box-shadowで外枠を */}
.btn:hover{display:block;width:100%;background-color:#990000;color:#fff;text-align:center;padding:20px 0;margin-top:5px;font-size:30px;line-height:20px;text-decoration: none;margin-bottom:10px;box-shadow: 0px 0px 0px 5px #7c0000;/* box-shadowで外枠を */}