@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
}
body {
    line-height: 1.3;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
    display: block;
}
nav ul {
    list-style: outside none none;
}
a {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
textarea {
    font-family: sans-serif;
}
button {
    font-family: sans-serif;
    letter-spacing: normal;
}
html {
    font-size: 62.5%;
}
img {
    max-width: 100%;
}
.small {
	font-size: 94%;
}
.cf {
}
.cf::before, .cf::after {
    content: "";
    display: table;
}
.cf::after {
    content: "\A";
    white-space: pre;
    clear: both;
}
body#info_3 a:hover img {
    opacity: 0.8;
}
body#info_3 .padT25 {
    padding-top: 25px !important;
}
body#info_3 .marB30 {
    margin-bottom: 30px !important;
}
body#info_3 {
    color: #333;
    font-family: Arial,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    font-size: 18px;
    line-height: 1.4;
}
body#info_3 .inner {
    margin: 0 auto;
	padding: 0 4%;
    max-width: 970px;
}
body#info_3 a:link {
    color: #333;
    text-decoration: underline;
}
body#info_3 a:visited {
    color: #333;
    text-decoration: underline;
}
body#info_3 a:hover {
    color: #333;
    text-decoration: none;
}
body#info_3 a:active {
    color: #333;
    text-decoration: underline;
}
body#info_3 h2, body#info_3 h3, body#info_3 h4 {
    color: #3d3a4a;
    font-weight: bold;
}
body#info_3 .note {
    font-size: 10px;
}
body#info_3 .title {
    font-size: 24px;
    margin-bottom: 20px;
}
body#info_3 img {
    width: 100%;
}
body#info_3 #socialbuttons {
    padding-bottom: 0.8em;
}
body#info_3 #socialbuttons #twitter {
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    width: 100px;
}
body#info_3 #socialbuttons #facebook_like {
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    width: 160px;
}
body#info_3 .fb_iframe_widget > span {
    vertical-align: baseline !important;
}
body#info_3 .btn01 {
    text-align: center;
	padding-top: 40px;
}
body#info_3 .btn01 a {
    background: #333;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 2%;
    text-align: center;
    width: 96%;
}
body#info_3 .btn01 a:link {
    color: #fff;
    text-decoration: none;
}
body#info_3 .btn01 a:visited {
    color: #fff;
    text-decoration: none;
}
body#info_3 .btn01 a:hover {
    background: #444;
    color: #fff;
    text-decoration: none;
}
body#info_3 .btn01 a:active {
    color: #fff;
    text-decoration: none;
}
body#info_3 #wrap {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    position: relative;
}
body#info_3 .title_box {
    display: inline-block;
    margin: 0 auto 90px;
    position: relative;
    text-align: center;
}
.title_box h2 {
    position: relative;
}
body#info_3 .title_box img {
    width: auto;
}
body#info_3 #section0 {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #ffcc00 0%, #ffcc00 63%, #ffd800 100%) repeat scroll 0 0;
    padding: 100px 0;
}
body#info_3 #section0 .inner {
    margin: 0 auto;
    padding: 0 15px;
}
body#info_3 #section0 .main_move {
    position: relative;
    text-align: center;
}
body#info_3 #section0 .main_move img {
    max-width: 100%;
    position: relative;
    width: auto;
}
body#info_3 #section0 h1 {
    margin: 50px 0 35px;
}
body#info_3 #section0 #section0_txt01 {
    margin-top: 50px;
    text-align: center;
}
body#info_3 #section0 #section0_txt01 .arrow_bottom {
    margin-top: 40px;
}
body#info_3 #title1 {
    background: #fff none repeat scroll 0 0;
    padding: 120px 0 10px;
    text-align: center;
}
body#info_3 #section1 {
    background: #fff none repeat scroll 0 0;
    padding: 0 0 130px;
}
body#info_3 #section1 #move_contents01, body#info_3 #section1 #move_contents02 {
    position: relative;
}
body#info_3 #section1 .why_video_wrap {
    margin: 0 auto;
    max-width: 1080px;
}
body#info_3 #section1 #why_video #video {
    margin: 0 auto;
    max-width: 1080px;
    width: 100%;
}
body#info_3 #section1 #why_img01 {
    padding: 0 2%;
    position: absolute;
    right: 0;
    top: 1900px;
    width: 96%;
}
body#info_3 #section1 #why_img02 {
    padding: 0 2%;
    position: absolute;
    right: 0;
    top: 1870px;
    width: 96%;
}
body#info_3 #section1 #why_img04 {
    padding: 0 2%;
    position: absolute;
    right: 0;
    top: 1880px;
    width: 96%;
}
body#info_3 #section1 .text_column {
    position: relative;
    text-align: center;
}
body#info_3 #section1 .text_column h3 {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 5px;
}
body#info_3 #section1 .text_column h3 img {
    width: auto;
}
body#info_3 #section1 .text_area {
    position: relative;
}
body#info_3 #section1 .text_area p {
    padding-top: 20px;
}
body#info_3 #section1 #why_text01 {
	font-size: 19px;
	left: 0;
	position: relative;
	text-align: right;
	top: -86px;
	width: 100%;
}
body#info_3 #section1 #why_text02 {
	background: #333 none repeat scroll 0 0;
	box-sizing: border-box;
	clear: both;
	font-size: 19px;
	height: 429px;
	padding-top: 61px;
	position: relative;
	text-align: left;
	width: 100%;
}
body#info_3 #section1 #why_text03 {
	font-size: 19px;
	text-align: center;
	width: 100%;
}
body#info_3 #section1 #why_text01 .text_column {
	float: right;
}
body#info_3 #section1 #why_text02 .text_column {
	float: left;
	position: relative;
	top: -111px;
}
body#info_3 #section1 #why_text01 .text_area {
    float: left;
    margin: 139px 0 0;
    text-align: left;
    width: 505px;
}
body#info_3 #section1 #why_text01 .text_area p {
    padding: 15px 0;
    position: relative;
}
body#info_3 #section1 #why_text01 .text_area p:last-child {
    padding-bottom: 50px;
}
body#info_3 #section1 #why_text02 .text_area {
    float: right;
    width: 505px;
}
body#info_3 #section1 #why_text02 .text_area p {
    color: #eee;
    padding: 15px 0;
}
body#info_3 #section1 #why_text03 .text_box {
	margin: 0 auto;
	padding: 130px 0 0;
	width: 550px;
}
body#info_3 #section1 #why_text03 h3 {
    color: #000;
    font-size: 40px;
    font-weight: bold;
    position: relative;
}
body#info_3 #section1 #why_text03 h3 img {
    width: auto;
}
body#info_3 #section1 #why_text03 .text_area {
    padding-top: 20px;
    position: relative;
}
body#info_3 #section1 #why_text03 .text_area p {
    position: relative;
}
body#info_3 #section1 #why_text03 .text_area p:last-child {
    font-size: 28px;
    padding-top: 70px;
}

/* ========= CHANGE (section2) ========== */

#title2 {
	background: #F2F2F2;
	text-align: center;
	padding: 100px 0 150px;
}
body#info_3 #title2 .title_box {
	margin-bottom: 0;
}

#section2 {
	background: #f2f2f2;
	position: relative;
}
body#info_3 #section2 .inner {
	position: relative;
	width: 100%;
	max-width: 1160px;
	padding: 80px 0 60px;
}
#section2 .txt {
	width: 50%;
	padding: 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#section2 .txt h3 {
	margin-bottom: 30px;
}
#section2 .txt img {
	width: auto;
	max-width: 100%;
}
#section2 .txt p {
	margin-bottom: 20px;
}
#section2 .img {
	width: 50%;
	padding: 50px;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* ----- change01 ----- */


#section_change01 {
	background: #fff;
	position: relative;
	border-top: 5px solid #000;
}

#section_change01:before {
	content: url('/wp-content/themes/eccube/img/lp/ver/3/no01.png');
	height: 60px;
	position: absolute;
	top: -30px; left: 50%;
	margin-left: -30px;
}
#section_change01 .txt { position: relative; float: left;}
#section_change01 .img { position: relative;float: right;}


/* ----- change02 ----- */

#section_change02 {
	background: #fff;
	position: relative;
	border-top: 5px solid #000;
}
#section_change02:before {
	content: url('/wp-content/themes/eccube/img/lp/ver/3/no02.png');
	height: 60px;
	position: absolute;
	top: -30px; left: 50%;
	margin-left: -30px;
}
#section_change02 .txt { position: relative; float: right;}
#section_change02 .img { position: relative; float: left;}


/* ----- change03 ----- */

#section_change03 {
	background: #fff;
	position: relative;
	border-top: 5px solid #000;
}
#section_change03:before {
	content: url('/wp-content/themes/eccube/img/lp/ver/3/no03.png');
	height: 60px;
	position: absolute;
	top: -30px; left: 50%;
	margin-left: -30px;
}
#section_change03 .txt { position: relative; float: left;}
#section_change03 .img { position: relative; float: right;}

/* ----- other_info ----- */

#other_info {
	border-top: 1px solid #ccc;
	text-align: center;
	border-bottom: 5px solid #000;
	background: #fff;
}
#other_info p {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}
#other_info ul {
	display: inline-block;
	vertical-align: middle;
}
#other_info ul li {
	display: inline-block;
	padding-left: 30px;
	vertical-align: middle;
}
#other_info ul li img {
	width: auto;
	max-width: 100%;
}

body#info_3 #other_info .inner {
	padding: 60px 0;
}

/* ========= DEMO SITE (section3) ========== */

#section3 {
	background: #fff;
}

body#info_3 #section_demosite {
	width: 100%;
	max-width: 1230px;
	padding: 100px 0;
}
#section_demosite .txt {
	position: relative; 
	width: 41%;
	float: left;
	padding-top: 15px;
}
#section_demosite .txt h3 {
	margin-bottom: 30px;
}
#section_demosite .txt ul {
	padding-top: 50px;
}
#section_demosite .txt ul li {
	float: left;
}
#section_demosite .txt ul li:last-child {
	float: right;
}
#section_demosite .img {
	position: relative; 
	width: 50%;
	float: right;
}
body#info_3 #section_demosite img {
	width: auto;
	max-width: 100%;
}

body#info_3 #section_demosite .idpass {
	margin-top: 10px;
}


/* ========= MILESTONE (section4) ========== */

#title4 {
	background: #eee;
	text-align: center;
	padding: 28px 0 20px;
	font-size: 18px;
	position: relative; 
}
#title4 h2 {
	margin-bottom: 10px;
}
body#info_3 #title4 img {
	width: auto;
	max-width: 100%;
}
#section_milestone {
	background: #fff;
	position: relative; 
}
body#info_3 #section_milestone img {
	width: auto;
	max-width: 100%;
}
#section_milestone .inner {
	padding: 50px 0 170px;
	text-align: center;
}
#section_milestone .inner .txt p {
	margin-bottom: 50px;
}

/* ========= PLUGIN (section5) ========== */

body#info_3 .title5 {
	position: relative; 
	background: #eee;
	text-align: center;
	padding: 28px 0 20px;
	font-size: 18px;
}
body#info_3 .title5 h2 {
    margin-bottom: 10px;
}
body#info_3 .title5 img {
	width: auto;
	max-width: 100%;
}
#section_plugin {
	position: relative; 
	background: #fff;
}
body#info_3 #section_plugin img {
	width: auto;
	max-width: 100%;
}
body#info_3 #section_plugin .inner {
	padding: 50px 0;
	width: 100%;
	max-width: 1070px;
}
#section_plugin ul li {
	width: 33.33333333%;
	float: left;
	padding: 0 24px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#section_plugin ul li img {
	float: left;
}
#section_plugin ul li p {
	padding-left: 70px;
	font-size: 14px;
}
#section_plugin ul li p strong {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
}


/* ========= EVENTS (section6) ========== */

#title6 {
	position: relative; 
	background: #333;
	text-align: center;
	padding: 30px 0;
}
body#info_3 #title6 img {
	width: auto;
	max-width: 100%;
}
#section_events {
	position: relative; 
	background: #fff;
}
#section_events #events_main {
	background: #f2f2eb;
	text-align: center;
}
#section_events #events_main img {
	max-width: 100%;
}
#section_events #events_main .bt_event {
	padding-top: 45px;
}
body#info_3 #section_events img {
	width: auto;
	max-width: 100%;
}
#section_events .other_event {
	background: #eee;
	padding: 20px 0;
}
#section_events .other_event dl {
	width: 800px;
	margin: 0 auto;
}
#section_events .other_event dl dt {
	font-weight: bold;
	float: left;
	font-size: 18px;
	padding-top: 9px;
}
#section_events .other_event dl dd {
	margin-left: 9em;
	border-left: 1px solid #999;
	padding-left: 35px;
}


/* ========= SPECIAL THANKS (section7) ========== */

#section_specialthanks {
	position: relative; 
	clear: both;
	background: #fff;
	text-align: center;
	padding: 80px 0;
}
body#info_3 #section_specialthanks img {
	width: auto;
	max-width: 100%;
}
#section_specialthanks h3 {
	margin-bottom: 15px;
}
#section_specialthanks h3 + p {
	margin-bottom: 33px;
	font-size: 18px;
}
#section_specialthanks ul li a:link { text-decoration: none;}
#section_specialthanks ul li a:visited { text-decoration: none;}
#section_specialthanks ul li a:hover { text-decoration: underline;}
#section_specialthanks ul li a:active { text-decoration: none;}


/* ========= ABOUT (section8) ========== */

body#info_3 .title8 {
	position: relative; 
	background: #eee;
	text-align: center;
	padding: 28px 0 20px;
	font-size: 18px;
}
body#info_3 .title8 h2 {
    margin-bottom: 10px;
}
body#info_3 .title8 img {
	width: auto;
	max-width: 100%;
}
#section_about {
	position: relative; 
	background: #fff;
	margin-bottom: 20px;
}
body#info_3 #section_about img {
	width: auto;
	max-width: 100%;
}
body#info_3 #section_about .inner {
	padding: 80px 0;
	width: 100%;
}



/* ========= footer ========== */


body#info_3 #footer {
	position: relative; 
	background: #fff;
	text-align: center;
	padding-bottom: 40px;
}
body#info_3 #footer #footer_link {
	text-align: center;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
body#info_3 #footer #footer_link li {
	padding-top: 30px;
}
body#info_3 #footer #footer_link li a {
	display: block;
	padding: 40px;
}
body#info_3 #footer #footer_link li a:hover {
	opacity: 0.8;
}
body#info_3 #footer #footer_link li:first-child a {
	background: #fc0;
}
body#info_3 #footer #footer_link li:last-child a {
	background: #eee;
}
body#info_3 #footer #footer_link img {
	width: auto;
	max-width: 100%;
}
body#info_3 #footer #socialbuttons {
	padding-top: 70px;
}

body#info_3 #footer #socialbuttons li {
    display: inline-block;
    font-size: 1.4rem;
}

body#info_3 #footer .other_link {
	text-align: center;
}
body#info_3 #footer .other_link li {
	font-size: 12px;
	display: inline-block;
	padding: 0 5px;
}
body#info_3 #footer .other_link li a:link { text-decoration: none;}
body#info_3 #footer .other_link li a:visited { text-decoration: none;}
body#info_3 #footer .other_link li a:hover { text-decoration: underline;}
body#info_3 #footer .other_link li a:active { text-decoration: none;}


body#info_3 .alart {
    background: #fee none repeat scroll 0 0;
    border: 2px solid #c00;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}
body#info_3 .footer {
    color: #fff;
}

@media only screen and (max-width: 640px) {
	body#info_3 .title_box {
		margin-bottom: 10px;
	}
	body#info_3 #title1 {
		padding: 40px 0 30px;
	}
	body#info_3 #title1 h2 img {
		width: 166px;		
	}
	body#info_3 #section1 {
		padding-bottom: 50px;
	}
	body#info_3 #section1 .text_column {
		padding-top: 15px;
	}
	body#info_3 #section1 .text_column h3 img {
		display: none;
	}
	body#info_3 #section1 .text_column h3::after {
		content: attr(title);
		display: block;
		text-align: center;
		font-size: 20px;
		font-size: 2rem;
		margin-top: 10px;
	}
	
	body#info_3 #section1 #why_text01 {
		top: 0;
		margin-bottom: 20px;
		font-size: 15px;	
	}
	body#info_3 #section1 #why_text01 .text_column {
		float: none;
	}
	body#info_3 #section1 #why_text01 .text_area {
		float: none;
		width: auto;
		margin-top: 7px;
	}
	body#info_3 #section1 #why_text01 .text_area p {
		padding: 10px 0;
	}
	body#info_3 #section1 #why_text01 .text_area p:last-child {
		padding-bottom: 20px;
	}
	body#info_3 #section1 #why_text02 {
		height: auto;
		font-size: 15px;
		padding-top: 15px;
	}
	body#info_3 #section1 #why_text02 .text_column {
		float: none;
		top: 0;
	}
	body#info_3 #section1 #why_text02 .text_column h3::after {
		color: #fff;
	}
	body#info_3 #section1 #why_text02 .text_area {
		clear: both;
		float: none;
		width: auto;
		padding-bottom: 30px;
		margin-top: 7px;
	}
	body#info_3 #section1 #why_text02 .text_area p {
		padding: 10px 0;
	}
	body#info_3 #section1 #why_text03 {
		font-size: 15px;	
	}
	body#info_3 #section1 #why_text03 h3 img {
		display: none;
	}
	body#info_3 #section1 #why_text03 h3::after {
		content: attr(title);
		display: block;
		text-align: center;
		font-size: 20px;
		font-size: 2rem;
		margin-top: 10px;
		padding-bottom: 5px;
	}
	body#info_3 #section1 #why_text03 .text_area {
		padding-top: 0;
		margin-top: 7px;
	}
	body#info_3 #section1 #why_text03 .text_area p {
		padding: 10px 0 0;
	}
	body#info_3 #section1 #why_text03 .text_box {
		width: auto;
		padding-top: 30px;
	}
	body#info_3 #section1 #why_text03 h3 img {
		height: 38px;	
	}
	body#info_3 #section1 .text_area p {
		padding-top: 10px;
	}

	body#info_3 #section1 #why_text03 .text_area p:last-child {
		padding-top: 20px;
		font-size: 20px;
		font-size: 2rem;
	}
	body#info_3 #title2 {
		padding: 40px 0 70px;
	}
	body#info_3 #title2 h2 img {
		width: 166px;		
	}
	body#info_3 #section2 .inner {
		padding-bottom: 10px;
	}
	#section2 .img,
	#section2 .txt {
		width: 100%;
		float: none;
	}
	#section2 .txt {
		padding: 30px 20px 20px;	
	}
	#section2 .txt p {
		font-size: 15px;	
	}
	#section2 .txt h3 img {
		max-height: 33px;
	}
	#section2 .img {
		padding: 0;
	}
	#section2 .img img {
    	max-width: 224px;
	}
	#other_info,
	#section3,
	#section5,
	#title5 {
		display: none;	
	}
	
	#section8 .txt {
		padding: 0 20px;
	}
	#section8 .txt p {
		font-size: 15px;
		padding-top: 20px;
	}
	body#info_3 #section_about .inner {
		padding: 40px 0;
	}
	#section_specialthanks {
		padding: 40px 0;
		font-size: 15px;
	}
	body#info_3 #footer #footer_link li {
		padding-top: 10px;
	}
	body#info_3 #footer #footer_link li a {
		padding: 20px;
	}
	body#info_3 .btn01 {
		padding-top: 20px;
	}
}

@media only screen and (min-width: 640px) {
	body#info_3 {
		font-size: 1.6rem;
		min-width: 960px;
	}
	body#info_3 a:hover img {
		opacity: 0.8;
	}
	body#info_3 .note {
		font-size: 1.2rem;
	}
	body#info_3 .title {
		font-size: 2.6rem;
		margin-bottom: 30px;
	}
	body#info_3 .sp {
		display: none !important;
	}
	body#info_3 .pc {
		display: block !important;
	}
	body#info_3 .facebookArea h3 {
		font-size: 2.6rem;
	}
	body#info_3 .facebookArea h4 {
		font-size: 2rem;
	}
	body#info_3 .btn01 a {
		display: inline-block;
		font-size: 2rem;
		min-width: 380px;
		padding: 1%;
		width: auto;
	}
	body#info_3 #section0 {
		padding: 200px 0 150px;
	}
}

@media only screen and (min-width: 1200px) {
	body#info_3 #section1 #why_video {
		width: 891px;
	}
}


#tagscript {
	width: 1px; height: 1px;
	line-height: 1px;
	overflow: hidden;
}