@charset "utf-8";
/*--****************************************

@PC - style.css
Copyright (c) ULM Co.,Ltd. - http://www.ulm-design.com

*****************************************--*/
html, body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5em;
	letter-spacing: 1px;
  /*文字のアンチエイリアス設定*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;/*Firefox*/

  /*文字詰め*/
  font-feature-settings: "palt";

}

.pc{
	display: block;
}

.sp{
	display: none;
}

.w100{
	width: 100%;
}

a{
	text-decoration: underline;
	color: #71e1ff;
}


#wrapper {
	width: 100%;
	min-width: 1100px;
	overflow: hidden;
	background: #000 url(../img/bg.jpg) center top fixed;
}

#contents{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}




/************************

header

************************/
#header{
	padding: 0 0 60px 0;
}

#ttl{
	width: 100%;
}

.header-pc{
	margin: 0 0 0 -250px;
}

#header-thumb-container{
	display: -webkit-flex;
	display: flex;
  width: 1100px;
  margin:-250px auto 35px auto;
}

#header-thumb0,#header-thumb1{
	position: relative;
}

.thumb-btn{
	position: absolute;
	width: 440px;
	height: 50px;
	border-radius: 25px;
	display: block;
	background: #df2690;
	text-align: center;
	line-height: 50px;
	font-size: 24px;
	color: #fff;
	left: 45px;
	bottom: 40px;
	cursor: pointer;
	font-style: italic;
}

#header-thumb1{
	padding: 23px 0 0 18px;
}

#header-oubo-container{
	position: relative;
}

.follow-btn{
	position: absolute;
	width: 390px;
	height: 50px;
	border-radius: 25px;
	display: block;
	background: #1da1f2;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	color: #fff;
	left: 100px;
	bottom: 100px;
	cursor: pointer;
	font-style: italic;
}

.follow-btn a{
	color: #fff;
	display: block;
	text-decoration: none;
}



/************************

main

************************/
#main{
	padding: 0 0 40px 0;
}

.mission-ttl{
	width: 182px;
	margin: 0 auto;
	position: relative;
}

.mission-ttl:after{
	content: "";
	display: block;
	position: absolute;
	background: #fff;
	width: calc(100vw - 91px);
	height: 1px;
	top: 16px;
	left: calc(-100vw + 91px);
}

.mission-ttl:before{
	content: "";
	display: block;
	position: absolute;
	background: #fff;
	width: calc(100vw - 91px);
	height: 1px;
	top: 16px;
	left: 182px;
}

.contents-ttl{
	padding: 30px 0;
}


#cp0{}

#cp0{
	margin-top: 70px;
}

#quiz-container{
	
}


#quiz-tab{
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.quize-tab-btn{
	line-height: 0em;
	opacity: 0.6;
}

.active{
	opacity: 1;
}

#quiz-box-container{
	width: 100%;
	box-sizing: border-box;
	border: 10px solid #1330b7;
	background: rgba(4,17,31,0.7);
	padding: 0 0 60px 0;
}

.quiz-box-contents{
	width: calc(100% - 80px);
	margin: 0 auto;
}

.quiz-box{
  display: none;
}

.txt-block{
	color: #fff;
	padding: 30px 0;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	display: flex;
}

.txt-ttl{
	width: 200px;
	padding: 0 0 0 30px;
	font-size: 18px;
	position: relative;
	text-shadow: 0px 0px 4px rgba(14,111,161,1),0px 0px 8px rgba(14,111,161,1);
}

.txt-ttl:after{
	content: "";
	display: block;
	width: 20px;
	height: 3px;
	background: #fff;
	box-shadow: 0px 0px 4px rgba(14,111,161,1),0px 0px 8px rgba(14,111,161,1);
	position: absolute;
	top: 0px;
	left: 0px;
}


.txt-box{
	width: 770px;
}

.txt{
}

.sub-txt{
	font-size: 14px;
	color: #c0c0c0;
	padding: 30px 0 0 0;
}

.quiz-answer-container{
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	padding: 60px 0;
}

.tweet-box-ttl{
	line-height: 0em;
}

.tweet-box-inner{
	width: 480px;
	height: 330px;
	box-sizing: border-box;
	border: 5px solid #df2690;
	position: relative;
}
.tweet-box-inner iframe{
	height: 100% !important;
}


.end-txt{
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	background: rgba(0,0,0,0.8);
	height: 100%;
	color: #fff;
	text-align: center;
	padding: 63px 0 0 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5em;
	box-sizing: border-box;
}

.tweet-btn{
	margin: auto;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 390px;
	height: 50px;
	background: #1da1f2;
	line-height: 46px;
	text-align: center;
	border: 2px solid #fff;
	border-radius: 8px;
	box-sizing: border-box;
}

.tweet-btn a{
	color: #fff;
	text-decoration: none;
	font-size: 20px;
	display: block;
}


.worning-box{
	border: 1px solid #df2690;
	box-sizing: border-box;
	color: #fff;
	padding: 40px;
}

.worning-ttl{
	text-align: center;
	color: #df2690;
	font-size: 20px;
	padding:  0 0 20px 0;
}

/************************

footer

************************/
#footer{
	padding: 0 0 40px 0;
}
.privacy-box{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #fff;
	background: rgba(4,17,31,0.7);
	margin: 0 0 20px 0;
	padding: 0 40px 0;
}

.privacy-box .txt-block{
	border: none;
}

.official-btn{
	width: 313px;
	margin: 0 auto;
}

/*--------------------------------------------------
リマケタグの隙間対策
--------------------------------------------------*/
iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px;}
.text-ad{
	display: none;
}

@media screen and (max-width: 1000px) {
	
	html,body{
		font-size: 13px;
	}
	
	.pc{
		display: none;
	}
	
	.sp{
		display: block;
	}
	
  #wrapper{
    width : 100%;
		min-width: auto;
  }
	
  #contents{
    width : 100%;
		min-width: auto;
  }
	
	#header-thumb-container {
		display: -webkit-flex;
		display: flex;
		width: 98%;
		margin: -10% auto 5% auto;
	}
	
	#header-thumb0,#header-thumb1{
		width: 48%;
		padding: 0 1%;
	}
	
	.thumb-btn {
    position: absolute;
    width: 86%;
    height: 40px;
    border-radius: 25px;
    display: block;
    background: #df2690;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    left: 8%;
    bottom: 4%;
    cursor: pointer;
    font-style: italic;
	}
	
	#header-oubo-container{
		width: 98%;
		margin: 0 auto;
	}
	
	.follow-btn {
    position: absolute;
    width: 80%;
    height: 40px;
    border-radius: 20px;
    display: block;
    background: #1da1f2;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    left: 10%;
    top: 22%;
	}
	
	#quiz-box-container {
    width: 100%;
    box-sizing: border-box;
    border: 5px solid #1330b7;
    background: rgba(4,17,31,0.7);
    padding: 0 0 30px 0;
}
	
	.quiz-box-contents {
    width: 90%;
    margin: 0 auto;
	}
	
	.quize-tab-btn{
		width: 50%;
	}
	
	.quize-tab-btn img{
		width: 100%;
	}
	
	.contents-ttl{
		padding: 5% 3%;
	}
	
	.txt-block {
    color: #fff;
    padding: 6% 0;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    display: block;
	}
	
	.txt-ttl {
    width: 100%;
    padding: 0px 0 10px 30px;
    font-size: 16px;
    position: relative;
    text-shadow: 0px 0px 4px rgba(14,111,161,1), 0px 0px 8px rgba(14,111,161,1);
	}
	
	.txt-box {
    width: 100%;
	}
	
	.sub-txt {
    font-size: 10px;
    color: #c0c0c0;
    padding: 5% 0 0 0;
}
	
	.quiz-answer-container{
		display: block;
		padding: 8% 0;
	}
	.tweet-box{margin: 0 0 5% 0;}
	.tweet-box-ttl img{
		width: 100%;
	}
	.tweet-box-inner{
		width: 100%;
		height: 250px;
	}
		.tweet-box-inner iframe{
			height: 240px !important;
	}
	
	.end-txt{
		position: absolute;
		z-index: 1;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		width: 100%;
		background: rgba(0,0,0,0.8);
		height: 100%;
		color: #fff;
		text-align: center;
		padding: 106px 0 0 0;
		font-size: 20px;
		font-weight: bold;
		line-height: 1.5em;
		box-sizing: border-box;
	}
	.end-txt span{
		font-size: 14px;
	}

	.tweet-btn {
			margin: auto;
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			width: 90%;
			height: 50px;
			background: #1da1f2;
			line-height: 46px;
			text-align: center;
			border: 2px solid #fff;
			border-radius: 8px;
			box-sizing: border-box;
	}
	.tweet-btn a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    display: block;
	}
	
	.worning-box {
    border: 1px solid #df2690;
    box-sizing: border-box;
    color: #fff;
    padding: 5% 3%;
	}
		.worning-ttl {
		text-align: center;
		color: #df2690;
		font-size: 18px;
		padding: 0 0 10px 0;
	}
	.worning-txt{
		font-size: 12px;
	}

	.privacy-box {
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		border: 1px solid #fff;
		background: rgba(4,17,31,0.7);
		margin: 0 auto 5% auto;
		padding: 0 3% 0;
	}
	
	.official-btn{
		width: 60%;
		margin: 0 auto;
	}
	
	.official-btn a img{
		width: 100%;
	}
	
	
	#cp0{
		margin-top: 60px;
	}

}