@charset "utf-8";

/*共通スタイル*/

* { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { background:#fff; color:#000; -webkit-text-size-adjust:100%;
	    font-family: "Noto Sans JP",sans-serif; font-weight: 400; font-style: normal; font-size:16px; font-weight:300; line-height:1.5; letter-spacing:0.08em }

body,html { position:relative; }

#wrapper { min-width:350px; overflow-x:hidden; }
	


	@media only screen and (min-width: 768px) {
		.onlySp { display: none!important; }
	}
	@media only screen and (max-width: 767px) {
		.onlyPc { display: none!important; }
	}


/* ----------------------------------------------------
library
---------------------------------------------------- */

.regular { font-weight:400; }
.bold { font-weight:700; }

img { max-width:100%; }
ul { list-style:none outside; }

.clr:after { /*content: ".";*/ display: block; clear: both; height: 0; visibility: hidden; }
.clr { min-height:1px; clear:both; }
* html .clr { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

a { text-decoration:none; transition:0.3s; color:#333; }
a:focus, *:focus { outline:none; }

	@media screen and (min-width: 768px) {	
		a[href^="tel:"] { pointer-events:none; text-decoration:none!important; }
	}

.block { display:block; }
.inline { display:inline; }
.inline_block { display:inline-block; }
.normal { font-weight:normal; }

.centerText { text-align:center; }
.leftText { text-align:left; }
.rightText { text-align:right; }

.centerBlock { margin-right:auto; margin-left:auto; display:block; text-align:center; }
.fleft { float:left; }
.fright { float:right; }

.flex { display:flex; }
.flex_wrap { flex-wrap:wrap; }
.item_center { align-items:center; }
.flex_center { justify-content:center; }
.flex_left { justify-content:flex-start; }
.flex_auto { justify-content:space-between; }

.bg_white { background:#fff; }

.orange { color:#ff9f00; }
.brown { color:#604c3f; }
.light_brown { color:#796a56; }
.white { color:#ffffff; }
.green { color:#1db9ac; }

.small { font-size:12px; }
.size14 { font-size:14px; }
.size15 { font-size:15px; }
.size16 { font-size:16px; }
.size17 { font-size:17px; }
.size18 { font-size:18px; }
.size20 { font-size:20px; }
.size22 { font-size:22px; }

.shorten { letter-spacing:-0.0025em; }

.relative { position:relative; z-index:1; }
.fixed { position:fixed; width:100%; }

.w_100 { width:100%; }

.fadein { opacity : 0.1; transform : translate(0, 50px); transition : all 500ms; }
.fadein.scrollin { opacity : 1; transform : translate(0, 0); }

.fadeinImg { opacity:0.5; transform:scale(1.065); overflow:hidden; }
.fadeinImg.scrollin { transition-duration:1s; opacity:1; transform: scale(1.0); }

.fadeinBg { opacity:0.5; transform: scale(1.065); overflow:hidden; }
.fadeinBg.scrollin { transition-duration:1s; opacity:1; transform: scale(1.0); }


.animation-box { opacity:0.1; margin-top:100px; transition:0.5s; }
.animation-box.active { opacity:1; margin-top:0; }

.btn_box { margin:8% auto; }
.btn { display:block; background:#fff000; color:#00469c; text-align:center; transition:0.3s; text-decoration:none; font-size:35px; font-weight:bold; padding:0; width:72.8%; position:relative; height:90px; line-height:90px; margin-right:auto; margin-left:auto; text-indent:-0.5em; border-radius:50px; letter-spacing:0.25em; }
.btn:hover { background:#00469c; color:#fff000; text-decoration:none; }



	@media screen and (max-width: 767px) {
		.btn_box { margin:10% auto; }
		.btn { font-size:18px; height:50px; line-height:50px; }
		.btn::after { width:10px; height:10px; top:calc(50% - 5px); }
	}
	


/* ----------------------------------------------------
header
---------------------------------------------------- */
#header { padding:50px 5%; transition:0.3s; }
#header .logo { width:67px; line-height:0; }
#header .logo a { display:block; }
#header .header__logo__icon { width:100%; display:block; }
#header .header__logo__text { width:63px; display:block; margin:4px auto 0 auto; }
#header .logo img { height:auto; }


	@media print, screen and (max-width:1024px) {
		#header { padding:15px 5%; height:60px; }
		#header .logo { width:42px; }
		#header .header__logo__text { width:40px; }
	}
	
	
	@media print, screen and (max-width:767px) {
		#header .logo { position:relative; top:55%; }
		#twitter_campaign #header .logo { position:relative; top:0%; }
	}


/* ----------------------------------------------------
main
---------------------------------------------------- */
section { padding:5% 0; }
.inner { padding:0 20px; max-width:1200px; margin:0 auto; }

section#mainImg { padding:0 0 50px; background:#00469b ; }
#mainImg .inner { max-width:1366px;  margin:0 auto; position:relative; padding:0; }
.mainImg_circle { position:absolute; top:50px; right:30%; background:#00469c; color:#fff; width:297px; height:297px; border-radius:50%; font-size:22px; text-align:center; display:flex; align-items:center; justify-content:center; transition:0.3s; }
.mainImg_circle span { font-size:14px; display:block; }
.mainImg_circle:hover { }

h1 img { display:block; }
section#mainImg h2 img { display:block; margin:0 auto 0; }
.inner_btm { padding:40px 20px 0; }

section#present { padding:5% 0 0; }
.present_wrap { max-width:1366px; margin:0 auto; }
.bg { position:relative; }
.bg:after { content:""; position:absolute; z-index:-1; }
	.bg01:after { bottom:-25%; right:0; width:19.2%; height:auto; padding-top:23%; background:url(../img/bg_right.png) no-repeat top center / contain; }
	.bg02:after { bottom:-44%; left:-9.5%; width:20.7%; height:auto; padding-top:23%; background:url(../img/bg_left.png) no-repeat top center/ contain; }
	.bg03:after { bottom:18%; right:-2%; width:17.3%; height:auto; padding-top:23%; background:url(../img/bg_right2.png) no-repeat top center/ contain; }
	
.presentList { margin:0 auto 50px; text-align:center; max-width:1180px; padding:0 20px; }
.presentList {display:flex; justify-content:center; align-items:center; }
.presentList.mid { margin:50px auto; }

.w_chance dt { background:#00469b; color:#fff000; font-size:30px; line-height:1; text-align:center; padding:25px 0; }
.w_chance dt img { display:block; margin:0 auto; }
.w_chance dd { display:flex; justify-content:space-between; align-items:center; padding:30px 0; background:#eaf5fc; position:relative; }
.w_chance dd img { display:block; }

.bg_gray { background:#e6ebee; padding:5%; }

.ttl_large { text-align:center; font-size:45px; font-weight:bold; line-height:1.5; color:#00469c; margin:60px 0 40px; }
.ttl_large span { color:#00469c; border-bottom:8px solid #fff000; display:inline-block; line-height:1.0; }
.ttl_large p { display:inline; font-size:24px; padding-left:0.5em; }
.underline { margin:0 auto 5%; text-align:center; font-size:20px; font-weight:bold; border-bottom:4px solid #333; display:inline-block; line-height:1.0; }

.stepBox { display:flex; justify-content:flex-start; align-items:top; }
.youtubeBg .stepBox { margin-bottom:50px; }
.step_ttl { width:35.5%; }
.step_txt { width:64.5%; }

.youtubeBg { position:relative; margin-bottom:200px; }
.youtubeBg:after { content:""; position:absolute; bottom:-150px; left:calc(50% - 60px); border-style:solid; border-color:#00469c transparent transparent transparent; border-width:90px 60px 0 60px; }
.youtube_wrap { max-width:950px; width:100%; margin:0 auto; }
.youtube_box { position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden; margin-bottom:30px; }
.youtube_box iframe { width:100%; height:100%; position:absolute; top:0; left:0; }

.campaign_infoBox { text-align:center; margin:40px auto 70px; max-width:670px; }
.campaign_infoBox strong { font-size:20px; margin-bottom:20px; display:block; }
.campaign_infoBox p { font-size:14px; line-height:1.8; }

.ttl_line { position:relative; text-align:center; }
.ttl_line span { display:inline-block; background:#fff; padding:0 60px; font-size:25px; font-weight:bold; color:#00469c; letter-spacing:0.25em; }
.ttl_line:before { content:""; position:absolute; z-index:-1; top:14px; left:0; width:100%; height:5px; background:#00469c; }
.lead { text-align:center; font-size:28px; margin:5% auto 5%; line-height:1.8; }

	#present .lead { margin-top:0; }

.feature_list {}
.feature_list dt { background:#00469c; color:#fff; font-size:34px; line-height:1; text-align:center; padding:25px 0; }
.feature_list dt img { display:block; margin:0 auto; }
.feature_list dd { display:flex; justify-content:space-between; align-items:flex-start; padding:5% 0; }
.feature_list_pic { width:46%; }
.feature_list_txt { width:46%; }
.feature_list dd img { width:100%; }
.feature_list_txt p { margin-bottom:20px; font-size:20px; }
.align_right { text-align:right; }
.feature_list .align_right img { width:auto; }
.feature_list_txt span { display:block; color:#00469c; font-size:18px; }
.feature_list_txt span.xs { font-size:14px; }

.productList { display:flex; justify-content:space-between; margin:5% auto 0; }
.productList li { text-align:center; font-size:20px; }
.product_img { display:flex; align-items:flex-end; margin:0 auto 20px; }
.product_img img { margin:0 auto; }
.product_name { display:block; }
.product_name br { content:""; display:block; margin:5px 0 0; }


.product_name span { font-size:35px; font-weight:bold; color:#00469c; border-bottom:8px solid #fff000; display:inline-block; line-height:1.0; }
.product_name .ex_info { font-size:20px; margin-top:10px; display:block; }
.product_detail01 { margin:30px 0; }
.product_detail02 { border-top:3px solid #333; padding:30px 0 0; }

.endTxt { margin:50px 0 0px; padding:16px 0; background:#000; color:#fff; font-size:20px; text-align:center; }

	@media screen and (max-width: 1300px) {
		
		.bg01:after { right:-5%; width:18%; }
		.bg02:after { left:-8%; width:18%; bottom:-48%; }
		.bg03:after { right:-2%; width:16%; bottom:7%; }
		
	}
	
	
	@media (min-width: 768px) and (max-width: 1024px) {

	}
	
	@media screen and (max-width: 1024px) {
		#present .lead { font-size:2.8vw; }
		.ttl_large { margin:60px 5% 40px; }
	}
	
	
	@media print, screen and (max-width:767px) {
		
		section#mainImg { padding:0 0 15px; }
		.inner_btm { padding:0 10%; }
		#mainImg .inner { padding:0; }
		section#mainImg h2 img { margin:15px auto 0; }
		
		.logo_pit { width:26%; margin:-10px auto 5%; }
		
		.presentList {}
		.presentList { flex-wrap:wrap; }
		.presentList.first p:first-child,
		.presentList.last p:first-child { order:2; }
		.presentList.first p:last-child,
		.presentList.last p:last-child { order:1; margin-bottom:30px; }
		.presentList.mid p:first-child { margin-bottom:30px; }
		.presentList p { text-align:center; margin:0 auto; }
		.presentList img { width:85%; }
		.bg01:after { bottom: -87%; right: -14%; width: 33%; padding-top: 37%; }
		.bg02:after { bottom:-38%; left:-20%; width:40%; padding-top:39%; }
		.bg03:after { bottom: -34%; right: -15%; width: 34%; padding-top: 39%; }
		
		.w_chance dt { font-size:20px; padding:15px 0; line-height:1; }
		.w_chance dt img { height:25px; }
		.w_chance dd { display:block; padding:0; }
		.w_chance_pic, .w_chance_txt { width:100%; }
		.w_chance_pic img, .w_chance_txt img { width:90%; margin:0 auto; }
		
		.ttl_line { margin-top:20px; }
		.ttl_line span { padding:0 20px; font-size:16px; }
		.ttl_line:before { height:3px; top:10px; }
		.ttl_large { font-size:26px; margin:30px 0 15px; }
		.ttl_large p { font-size:18px; }
		.lead { font-size:14px; margin:5% auto; line-height:1.5; }
		.underline { margin:0 auto 5%; font-size:18px; border-bottom:2px solid #333; }
		
		#present .ttl_large img { padding:0 5%; }
		
		.stepBox { display:block; }
		.step_ttl, .step_txt { width:100%; }
		.step_ttl { margin-bottom:10px; }
		.step_ttl img { width:30%; }
		.step_txt { font-size:16px; }
		.youtubeBg { margin-top:0; margin-bottom:70px; }
		.youtube_box { margin-bottom:10px; }
		.youtubeBg:after { bottom:-53px; left:calc(50% - 20px); border-width:30px 20px 0 20px; }
		.youtubeBg .stepBox { margin-bottom:20px; }
		
		.feature_list { margin-bottom:30px; }
		.feature_list dt { font-size:18px; padding:15px 0; }
		.feature_list dt img { height:25px; }
		.feature_list dd { display:block; }
		.feature_list_pic, .feature_list_txt { width:100%; }
		.feature_list_pic img, .feature_list_txt img { width:100%; }
		.feature_list_pic img { margin-bottom:20px; }
		.feature_list .align_right img { width:100%; }
		.feature_list_txt p { font-size:14px; }
		.feature_list_txt span,.feature_list_txt span.xs { font-size:12px; }
		
		.productList { display:block; margin-bottom:30px; }
		.productList li:nth-child(2) { margin:50px 0; }
		.product_img img { width:70%; }
		.product_name img { width:70%; }
		.product_name span { font-size:26px; border-bottom: 8px solid #fff000; }
		.product_name .ex_info { font-size:16px; }
		.product_detail01, .product_detail02 { font-size:14px; width:16em; margin-right:auto; margin-left:auto; }
		.product_detail01 { margin:15px auto; }
		.product_detail02 { padding:15px 0 0; }
		
		.endTxt { margin:30px 0 0; padding:15px; font-size:16px; }
	}
	
	
	@media print, screen and (max-width:500px) {
		.ttl_line span.lineup { letter-spacing:0; }
		.w_chance dt img { height:18px; }
		.feature_list dt img { height:18px; }
		.campaign_infoBox strong { font-size:16px; }
		.campaign_infoBox p { font-size:12px; }
		.size14 { font-size:12px; }
		.endTxt { font-size:12px; }
	}


@media all and (-ms-high-contrast:none){/* IE11 */
	*::-ms-backdrop, .w_chance dd img { width:100%; }
}


/* mobile only */
@media (hover: none) and (pointer: coarse) {}


/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {}


/* ----------------------------------------------------
TW main
---------------------------------------------------- */

#twitter_campaign section#mainImg { background:url(../img/tw/bg_main.jpg) no-repeat bottom center; padding:0; }
#twitter_campaign .mainImg_circle { }
#twitter_campaign section#mainImg .inner_top { max-height:812px; }
.bgBlue { background:#00479d; padding: 0 0 50px; }
.bgBlue .ttl_line { margin:0 auto 5%; }
.bgBlue .ttl_line span { background:#00469c; color:#fff; position:relative; }
.bgBlue .ttl_line:before { z-index:0; background:#fff; }

#twitter_campaign .ttl_large { margin:50px auto 0; }
#twitter_campaign #present .lead { margin:30px auto 0; }
#twitter_campaign .productList { margin:0 auto 5%; }

#twitter_campaign .followBox { margin:50px auto 200px; position:relative; }
#twitter_campaign .followBox:after { content:""; position:absolute; bottom:-150px; left:calc(50% - 60px); border-style:solid; border-color:#00469c transparent transparent transparent; border-width:90px 60px 0 60px; }
#twitter_campaign .stepBox_pic { margin:50px auto 0; }
#twitter_campaign .stepBox_pic img { display:block; }
.boxTop { margin-top:50px; }
.boxBtm { margin-bottom:50px; }
.termsBox dt { font-size:25px; text-align:center; margin:0 auto 30px; }
.termsBox dd { overflow-y:scroll; overflow-x:hidden; height:350px; padding-right:10px; -webkit-overflow-scrolling:touch; }

.scroll-wrap::-webkit-scrollbar { height:10px; }
.scroll-wrap::-webkit-scrollbar-thumb{ background:#999; border-radius:5px; }
.scroll-wrap::-webkit-scrollbar-track-piece { background:#efefef; }

.termsBox dd ul li { margin-left:1em; text-indent:-1em; }
.termsBox dd ol li { margin-left:2.5em; text-indent:-2.85em; }
.titleBox { padding:30px 0; }
.ttl_no_line { font-size:30px; font-weight:bold; text-align:center; line-height:1; color:#fff; }
#twitter_campaign .btn_box { margin:30px auto 0; }
#twitter_campaign #movie { padding-bottom:0; }
#twitter_campaign #movie .lead { margin:0 auto 5%; }

#step { padding-bottom:0; }

.invisibleBox { opacity:0; height:0; }
button { border:0; cursor:pointer; }

.lead_btm { text-align:center; margin:10px 0 20px; }


	@media print, screen and (max-width:1024px) {
		#twitter_campaign .btn { font-size:3vw; }
		#twitter_campaign #present .lead { font-size:3.8vw; }
	}
	
	
	@media print, screen and (max-width:767px) {
		#twitter_campaign section#mainImg { background:none; }
		#twitter_campaign section#mainImg .inner_top { height:auto; }
		#twitter_campaign section#mainImg h2 img { margin:0 auto 0; width:79%; }
		#twitter_campaign .inner_btm { padding:15px 10% 0; }
		#twitter_campaign .followBox { margin-top:30px; margin-bottom:70px; }
		#twitter_campaign .followBox:after { bottom:-53px; left:calc(50% - 20px); border-width:30px 20px 0 20px; }
		#twitter_campaign .stepBox_pic { margin:25px auto 0; }
		#twitter_campaign .btn_box { margin:15px auto 0; }
		.bgBlue { padding: 0 0 15px; }
		.termsBox dt { font-size:18px; margin:0 auto 15px; }
		.termsBox dd { font-size:14px; }
		.ttl_no_line { font-size:20px; padding:15px 0; line-height:1; }
		.ttl_no_line img { height:25px; }
		.titleBox.bgBlue { padding:0; }
		#twitter_campaign .ttl_large { margin:30px 0 15px; }
		button { margin-top:10px; }
		.lead_btm { font-size:12px; }
		
	}
	
	
	@media print, screen and (max-width: 500px) {
		.ttl_no_line img { height:18px;	}
		#twitter_campaign .btn { width:85%; font-size:16px; letter-spacing:0; }
		.termsBox dd { font-size:12px; }
	}


/* ----------------------------------------------------
footer
---------------------------------------------------- */
#footer { background:#00469c; color:#fff; padding:5% 0; text-align:center; }
	#twitter_campaign #footer .copyright { margin-top:0%; }
	
#footer .sns_campaign { margin:0 auto 40px; }
#footer h4 { margin-bottom:5%; }
#footer .sns_campaign_date { font-size:45px; display:inline-block; line-height:1; margin-bottom:5%; }
#footer .copyright { margin-top:8%; font-size:12px; }


	@media print, screen and (max-width:767px) {
		#footer .sns_campaign { margin: 0 auto 20px; }
		#footer h4 { margin:5% 0 7%; }
		#footer h4 img { width:70%; }
		#footer .sns_campaign_date { font-size:30px; }
		#footer .sns_campaign_date span { font-size:14px; }
		#footer .copyright { font-size:10px; }
	}

/* ----------------------------------------------------
margin
---------------------------------------------------- */
.mt00 { margin-top:0px!important; }
.mt05 { margin-top:5px!important; }
.mt10 { margin-top:10px!important; }
.mt15 { margin-top:15px!important; }
.mt20 { margin-top:20px!important; }
.mt25 { margin-top:25px!important; }
.mt30 { margin-top:30px!important; }
.mt35 { margin-top:35px!important; }
.mt40 { margin-top:40px!important; }
.mt50 { margin-top:50px!important; }
.mt60 { margin-top:60px!important; }
.mt70 { margin-top:70px!important; }
.mt80 { margin-top:80px!important; }
.mr00 { margin-right:0px!important; }
.mr05 { margin-right:5px!important; }
.mr10 { margin-right:10px!important; }
.mr15 { margin-right:15px!important; }
.mr20 { margin-right:20px!important; }
.mr25 { margin-right:25px!important; }
.mr30 { margin-right:30px!important; }
.mr35 { margin-right:35px!important; }
.mr40 { margin-right:40px!important; }
.mr50 { margin-right:50px!important; }
.mr60 { margin-right:60px!important; }
.mr70 { margin-right:70px!important; }
.mr80 { margin-right:80px!important; }
.mb00 { margin-bottom:0px!important; }
.mb05 { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb25 { margin-bottom:25px!important; }
.mb30 { margin-bottom:30px!important; }
.mb35 { margin-bottom:35px!important; }
.mb40 { margin-bottom:40px!important; }
.mb50 { margin-bottom:50px!important; }
.mb60 { margin-bottom:60px!important; }
.mb70 { margin-bottom:70px!important; }
.mb80 { margin-bottom:80px!important; }
.ml00 { margin-left:0px!important; }
.ml05 { margin-left:5px!important; }
.ml10 { margin-left:10px!important; }
.ml15 { margin-left:15px!important; }
.ml20 { margin-left:20px!important; }
.ml25 { margin-left:25px!important; }
.ml30 { margin-left:30px!important; }
.ml35 { margin-left:35px!important; }
.ml40 { margin-left:40px!important; }
.ml50 { margin-left:50px!important; }
.ml60 { margin-left:60px!important; }
.ml70 { margin-left:70px!important; }
.ml80 { margin-left:80px!important; }

/* ----------------------------------------------------
padding
---------------------------------------------------- */
.pt00 { padding-top:0px!important; }
.pt05 { padding-top:5px!important; }
.pt10 { padding-top:10px!important; }
.pt15 { padding-top:15px!important; }
.pt20 { padding-top:20px!important; }
.pt25 { padding-top:25px!important; }
.pt30 { padding-top:30px!important; }
.pt35 { padding-top:35px!important; }
.pt40 { padding-top:40px!important; }
.pt50 { padding-top:50px!important; }
.pt60 { padding-top:60px!important; }
.pt70 { padding-top:70px!important; }
.pt80 { padding-top:80px!important; }
.pr00 { padding-right:0px!important; }
.pr05 { padding-right:5px!important; }
.pr10 { padding-right:10px!important; }
.pr15 { padding-right:15px!important; }
.pr20 { padding-right:20px!important; }
.pr25 { padding-right:25px!important; }
.pr30 { padding-right:30px!important; }
.pr35 { padding-right:35px!important; }
.pr40 { padding-right:40px!important; }
.pr50 { padding-right:50px!important; }
.pr60 { padding-right:60px!important; }
.pr70 { padding-right:70px!important; }
.pr80 { padding-right:80px!important; }
.pb00 { padding-bottom:0px!important; }
.pb05 { padding-bottom:5px!important; }
.pb10 { padding-bottom:10px!important; }
.pb15 { padding-bottom:15px!important; }
.pb20 { padding-bottom:20px!important; }
.pb25 { padding-bottom:25px!important; }
.pb30 { padding-bottom:30px!important; }
.pb35 { padding-bottom:35px!important; }
.pb40 { padding-bottom:40px!important; }
.pb50 { padding-bottom:50px!important; }
.pb60 { padding-bottom:60px!important; }
.pb70 { padding-bottom:70px!important; }
.pb80 { padding-bottom:80px!important; }
.pl00 { padding-left:0px!important; }
.pl05 { padding-left:5px!important; }
.pl10 { padding-left:10px!important; }
.pl15 { padding-left:15px!important; }
.pl20 { padding-left:20px!important; }
.pl25 { padding-left:25px!important; }
.pl30 { padding-left:30px!important; }
.pl35 { padding-left:35px!important; }
.pl40 { padding-left:40px!important; }
.pl50 { padding-left:50px!important; }
.pl60 { padding-left:60px!important; }
.pl70 { padding-left:70px!important; }
.pl80 { padding-left:80px!important; }