@charset "utf-8";

/* #sec1 */
#sec1_wrap1 {
	position: relative;
	z-index: 700;
	width: 100%;
	max-width: 1528px;
	margin: 0 auto;
	overflow: hidden;
}
#sec1_wrap2 {
	width: 100%;
	margin: 0;
	padding: 42.016% 0 0;
}

#sec1 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	margin-left: -50%;
	padding: 42.016% 0 0;
	background: url("../images/kv_bg.jpg") no-repeat center top;
	background-size: 100% auto;
}
#sec1 img { width: 100%; height: auto; }
#sec1 h2 {
	position: absolute;
	top: 0;
	left: 10.583%;
	width: 46.333%;
	margin: 0;
	padding: 7.167% 0 0;
	line-height: 0;
}
#sec1 h2 span {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 17.446%;
	padding: 0 0 .360% 59.712%;
}

#sec1 p {
	position: absolute;
	bottom: 0;
	left: 10.583%;
	width: 46.083%;
	height: 0;
	margin: 0 0 9.167%;
	padding: 8.583% 0 0;
	background: url("../images/kv_txt.png") no-repeat left top;
	background-size: 100% auto;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#sec1 figure {
	position: absolute;
	bottom: -6%;
	right: 0;
	width: 38.333%;
	margin: 0;
	padding: 0 6% 0 0;
}

/* #top_sns */
#top_sns {
	width: 100%;
	margin: 0;
	background-color: #f4f3F3;
}
#top_sns ul {
	width: 960px;
	margin: 0 auto;
	padding: 12px 0;
	text-align: right;
	overflow: hidden;
}
#top_sns ul li {
	display: inline-block;
	margin-left: 10px;
	line-height: 1;
	vertical-align: top;
}
#top_sns iframe {
	margin: 0 !important;
}

/* #sec2 */
#sec2 {
	float: left;
	width: 690px;
	color: #231815;
}

#sec2 h2 {
	margin: 0 0 20px;
	padding: 0 0 0 224px;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.6;
}
#sec2 div.txt {
	margin: 0 0 25px;
	padding: 0 0 0 224px;
	line-height: 1.6;
}

#sec2 figure {
	position: absolute;
	top: -22px;
	left: 7px;
	margin: 0;
	padding: 71px 0 0 21px;
}
#sec2 figure img {
	position: relative;
	z-index: 801;
}
#sec2 figure figcaption {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 800;
	width: 86px;
	height: 0;
	margin: 0;
	padding: 86px 0 0;
	background: url("../images/sec1_img_2.png") no-repeat left top;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#sec2 ul {
	margin: 0 0 20px;
	padding: 0 ;
	list-style: none;
	text-align: center;
}
#sec2 ul li {
	display: inline-block;
	margin: 0 5px 0;
}

#sec2 p.btn {
    width: 100%;
	padding: 0 0 38px 0;
	text-align: center;
}
#sec2 p.btn a {
	display: inline-block;
	padding: 15px 38px;
	color: #fff;
	background-color: #553889;
}
#sec2 p.btn a span {
	display: inline-block;
	padding: 1px 0 1px 23px;
	background: url("../images/icon_spot.png") no-repeat left center;
}
#sec2 p.btn a:hover {
	opacity: .8;
}


#sec2 h2.video{
    display: inline-block;
    text-align: left !important;
    margin-top: 20px;
    padding: 0;
}
#sec2 video{
    display: block;
    width: 100%; height: auto;
    margin: auto;
    border: #DDD solid 3px;
    box-sizing: border-box;
}

/* #whats_new */
#whats_new {
	float: right;
	width: 250px;
	padding: 12px 0;
	background-color: #f4f3F3;
}

#whats_new h2 {
	margin: 0 0 12px;
	padding-left: 9px;
	border-left: 10px solid #553889;
	color: #553889;
	font-size: 1.6rem;
}
#whats_new h2 span {
	margin-left: 9px;
	font-size: 1.2rem;
}

#whats_new .tl {
	width: 230px;
	margin: 0 auto;
}
#whats_new .txt {
	margin: 10px 0 7px;
	padding: 0;
	font-size: 1.2rem;
	text-align: center;
}
#whats_new .btn {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* #use */
#use_wrap {
	width: 100%;
	margin: 0;
	padding: 40px 0 0;
	background-color: #f4f3F3;
}
#use {
}

#use_content {
	margin: 0 0 40px;
	background: url("../images/sec4_arrow.png") no-repeat center center;
	overflow: hidden;
}
#use_content .img {
	width: 348px;
	padding: 25px;
	border: 1px solid #b5b5b6;
	border-radius: 8px;
	background-color: #fff;
}
#use_content .img.l { float: left; }
#use_content .img.r { float: right; }
#use_content .img figure {
	margin: 0;
	padding: 0;
	text-align: center;
}
#use_content .img p {
	margin: 25px 0 0;
	padding: 0;
}
#use_content .img span {
	font-size: 1.4rem;
}

#use figure.pc {
	margin: 0;
	padding: 0;
	text-align: center;
}
#use figure.sp { display: none; }


/* #overview */
#overview {
    width: 660px;
	padding: 80px 0;
}

#overview figure {
	float: left;
	width: 230px;
	margin: 0;
	padding: 0;
}

#overview #overview_content {
	float: right;
	width: 430px;
}

#overview_content dl {
	margin: 0 0 20px;
	padding: 0 0 15px;
	border-bottom: 1px solid #b5b5b6;
	overflow: hidden;
}
#overview_content dl dt {
	float: left;
	clear: left;
	width: 105px;
	margin: 0 0 5px;
	font-weight: bold;
}
#overview_content dl dd {
	float: left;
	width: 325px;
	margin: 0 0 5px;
}

#overview_content .caution {
	margin: 0 0 20px;
	padding: 0 0 15px;
	border-bottom: 1px solid #b5b5b6;
}
#overview_content .caution h3 {
	margin: 0 0 10px;
	color: #553889;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.2;
}
#overview_content .caution ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;
}
#overview_content .caution ul li {
	margin: 0 0 5px; 
	padding-left: 1em;
	text-indent: -1em;
}

#overview_content ul.download {
	margin: 0;
	padding: 0;
	list-style: none;
}
#overview_content ul.download li {
	display: inline-block;
	margin-right: 15px;
}

/* #inquiry */
#inquiry_wrap {
	background-color: #f4f3F3;
}


@media only screen and (max-width: 767px) {

/* #sec1 */
#sec1_wrap1 {
}
#sec1_wrap2 {
	width: 100%;
	margin: 0;
	padding: 129.6% 0 0;
}

#sec1 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	margin-left: -50%;
	padding: 129.6% 0 0;
	background: url("../images/kv_bg.jpg") no-repeat center top;
	background-size: auto 100%;
}

#sec1 img { width: 100%; height: auto; }
#sec1 h2 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 92%;
	margin: 0 0 0 -46%;
	padding: 5.2em 0 0;
	font-size: 1.4rem;
}
#sec1 h2 span {
	position: static;
	width: 21.365%;
	margin: .2% 0 0;
	padding: 0;
}

#sec1 p {
	position: absolute;
	bottom: auto;
	top: 0;
	left: auto;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 4% 0 0;
	background: none;
	text-align: center;
	text-indent: 0;
	white-space: normal;
	overflow: hidden;
}

#sec1 figure {
	bottom: 0;
	right: -19%;
	width: 76%;
	margin: 0;
	padding: 0;
}


/* #top_sns */
#top_sns { display: none; }

#sec23_wrap { padding: 0; }

/* #sec2 */
#sec2 {
	box-sizing: border-box;
	float: none;
	width: 100%;
	padding: 8% 6%;
}

#sec2 h2 {
	margin: 0 0 6%;
	padding: 0;
	font-size: 1.8rem;
	line-height: 1.4;
	text-align: center;
}
#sec2 div.txt {
	margin: 0 0 6%;
	padding: 0;
}

#sec2 figure {
	top: 0;
	left: 4%;
	width: 35.733%;
	margin: -80.8% 0 0;
	padding: 12.533% 0 0 0;
}
#sec2 figure img { width: 100%; height: auto; }
#sec2 figure figcaption {
	position: absolute;
	top: 0px;
	left: auto;
	right: -42%;
	width: 53%;
	padding: 53% 0 0;
	background-size: 100% auto;
}

#sec2 ul {
	width: 60%;
	margin: 0 auto 6%;
	padding: 0;
}
#sec2 ul li {
	display: block;
	margin: 0 0 4%;
}
#sec2 ul li img { width: 100%; height: auto; }

#sec2 p.btn {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}
#sec2 p.btn a {
	display: block;
	padding: 5% 0;
}

#sec2 h2.video{
    display: block;
    text-align: center !important;
    margin: 3rem auto 1rem;
    padding: 1rem 0;
}
#sec2 video{
    margin-bottom: 1.5rem;
}

/* #whats_new */
#whats_new {
	box-sizing: border-box;
	float: none;
	width: 100%;
	padding: 8% 6%;
	background-color: #f4f3F3;
}

#whats_new h2 {
	margin: 0 0 6%;
	padding-left: 0;
	border-left: none;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
#whats_new h2 span {
	display: block;
	margin: 0;
	font-size: 1.4rem;
	font-weight: normal;
}

#whats_new .tl {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#whats_new .txt {
	margin: 3% 0;
	font-size: 1.4rem;
}

/* #use */
#use_wrap {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
}
#use {
}

#use img { width: 100%; height: auto; }

#use_content {
	width: 96%;
	margin: 0 auto 8%;
	background: none;
	overflow: hidden;
}
#use_content .img {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 6%;
}
#use_content .img.l,
#use_content .img.r { float: none; }
#use_content .img figure { display: block; margin: 0 auto; }

#use_content .img.l { margin: 0 0 16%; }
#use_content .img.l::after {
	content:  url("../images/sec4_arrow_sp.png");
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 24%;
	margin: 0 0 -14% -12%;
}
#use_content .img.l figure { width: 57%; }
#use_content .img.r figure { width: 37%; }

#use_content .img p {
	margin: 25px 0 0;
	padding: 0;
}
#use_content .img span {
	font-size: 1.2rem;
}

#use figure.pc { display: none; }
#use figure.sp {
	display: block;
	width: 96%;
	margin: 0 auto;
	padding: 0;
}


/* #overview */
#overview {
    width: auto;
	padding: 8% 6%;
	background-color: #f4f3f3;
}
#overview img { width: 100%; height: auto; }

#overview figure {
	float: none;
	width: 50%;
	margin: 0 auto 6%;
}

#overview #overview_content {
	float: none;
	width: 100%;
}

#overview_content dl {
	margin: 0 0 6%;
	padding: 0;
	border-bottom: 1px solid #b5b5b6;
}
#overview_content dl dt {
	box-sizing: border-box;
	width: 29%;
	margin: 0;
	padding: 2% 1%;
	border-top: 1px solid #b5b5b6;
}
#overview_content dl dd {
	box-sizing: border-box;
	width: 71%;
	margin: 0;
	padding: 2% 1%;
	border-top: 1px solid #b5b5b6;
}

#overview_content .caution {
	margin: 0 0 6%;
	padding: 0 0 6%;
	border-bottom: 1px solid #b5b5b6;
}
#overview_content .caution h3 {
	margin: 0 0 2%;
	font-size: 1.4rem;
}

#overview_content .caution ul li {
	margin: 0 0 2%; 
}

#overview_content ul.download {
	width: 60%;
	margin: 0 auto;
	padding: 0;
}
#overview_content ul.download li {
	display: block;
	margin: 0 0 4%;
}

/* #inquiry */
#inquiry_wrap {
	background-color: #fff;
}

}


/* twitter */
@media only screen and (max-width: 767px) { #whats_new .tl iframe { width: 580px !important; margin: auto;}}
@media only screen and (max-width: 600px) { #whats_new .tl iframe { width: 480px !important; margin: auto;}}
@media only screen and (max-width: 500px) { #whats_new .tl iframe { width: 380px !important; margin: auto;}}
@media only screen and (max-width: 400px) { #whats_new .tl iframe { width: 280px !important; margin: auto;}}
@media only screen and (max-width: 300px) { #whats_new .tl iframe { width: 280px !important; margin: auto;}}