@charset "UTF-8";
/*****************************************************
File Name: index.css
Style Info: 個別設定
*****************************************************/
/*====================================================
ページ全体設定
====================================================*/
*{ box-sizing: border-box; }
html,
body{
	font-size: 16px;
	width:100%;
	min-width: 1200px;
}
body {
     font-family: 'Noto Sans Japanese',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
/*====================================================
メインエリアの設定
====================================================*/
body > #wrapper {
	height:100%;
	min-width:1200px;
	overflow:visible;
}
#content{
	min-width: 1200px;
	max-width: 1200px;
	margin:0 auto;
	padding-left:40px;
	position: relative;
}

/*====================================================
メインビジュアル
====================================================*/
#mainVisual{
	position:relative;
	width: 100%;
	height: 100%;
	max-height: 645px;
	min-height: 645px;
	background:url(../img/visual_01.png) no-repeat right top;
}
#mainVisual h1{
	padding-top:60px;
}
/*====================================================
sideNavi
====================================================*/
#sideNavi{
	position: absolute;
	top:250px;
}
#sideNavi.fixed{
	position: fixed;
	top:10px;
	text-align: left;
}

#sideNavi .collaboBox {
	position: relative;
	height: 50px;
	margin-bottom:180px;
}



#sideNavi .collaboBox img{
	position: absolute;
    -moz-transition: -moz-transform 0s linear;
    -webkit-transition: -webkit-transform 0s linear;
    -o-transition: -o-transform 0s linear;
    -ms-transition: -ms-transform 0s linear;
    transition: transform 0s linear;
}

#sideNavi .collaboBox img.top_logo{
	display:block;
}

#sideNavi .collaboBox img.fix_logo{
	display:none;
}


#sideNavi.fixed .collaboBox{
	margin-bottom:150px;
}


#sideNavi.fixed .collaboBox img.top_logo{
	display:none;
}


#sideNavi.fixed .collaboBox img.fix_logo{
	display:block;
}


#sideNavi.fixed .collaboBox img{
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    margin-left:-20px;
}
#sideNavi.fixed ul{
	display: inline-block;
}
#sideNavi ul{
	display: inline-block;
}
#sideNavi li{
	position: relative;
	overflow: hidden;
	padding-left:40px;
	margin-left:-20px;
}
#sideNavi li:before{
	content:"";
	width:29px;
	height:21px;
	display: block;
	position: absolute;
	top:50%;
	left:0;
    margin-left: -35px;
	margin-top:-12px;
	background: red;
	background:url(../img/icon_arrow.png) no-repeat center center;
	background-size: 29px 20px;
	transition: all 0.3s;
}
#sideNavi li:hover:before{
	left:35px;
}
#sideNavi li.current:before{
	left:35px;

}
#sideNavi li + li{
	margin-top:20px;
}
#sideNavi li a{
	outline: none;
}

/*====================================================
main
====================================================*/
#mainArea{
	text-align: center;
	margin-top:100px;
	padding-left:270px;
	line-height: 2;
}
#mainArea > div{
	margin:0 auto 170px;
}
#mainArea .section01{
	max-width: 940px;
}
#mainArea h2{
	padding:20px 0 30px;
	margin-bottom:60px;
	position: relative;
}
#mainArea h2:after{
	content:"";
	display: block;
	height: 5px;
	background: #000;
	width: 56px;
	position: absolute;
	bottom:0px;
	left:50%;
	margin-left:-28px;
}
.section01 h3{
	font-size:20px;
	margin:40px auto;
}
.section02 li + li{
	margin-top:10px;
}
.section02 .box{
	display: table;
	margin:40px auto 0;
}
.section02 .boxInner{
	position: relative;
	display: table-cell;
	padding:30px 15px 0;
	-webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s;
}
.section02 .boxInner:hover{
	opacity: 0.7;
}
.section02 .boxInner ul{
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding-left:40px;
	margin-left:-40px;
}
.section02 .boxInner ul:before{
	content:"";
	width:29px;
	height:20px;
	display: block;
	position: absolute;
	top:20px;
	left:0;
    margin-left: -35px;
	margin-top:-12px;
	background: red;
	background:url(../img/icon_arrow.png) no-repeat center center;
	background-size: 29px 20px;
	transition: all 0.3s;
}
.section02 .boxInner:hover ul:before{
	left:35px;
}
.section02 .boxInner li{
	margin-top:5px;
}
.section02 .boxInner a{
	position: absolute;
	width: 100%;
	height:100%;
	display: block;
}
.section02 .imgArea{
	margin-top:30px;
}
.section02 .movie{
  position: relative;
	width: 900px;
  padding-top: 56.25%;
}
.section02 .movie iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.section03:after{
	content:"";
	display: block;
	overflow: hidden;
	clear: both;
}
.section03 h2 + p{
	margin-bottom:40px;
}
.section03 .movie{
  position: relative;
  width: 900px;
  padding-top: 56.25%;
}
.section03 h3{
	font-size:20px;
	margin:40px auto;
}
.section03 .textArea{
	margin-bottom:40px;
}
.section03 .movie iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.section03:after{
	content:"";
	display: block;
	clear: both;
	overflow: hidden;
}
.section04 h3{
	font-size:20px;
	margin:40px auto;
}
.section04 .textArea{
    text-align:left;
    width: 560px;
    display: block;
    margin: 0 auto;
	padding:20px;
	border:1px solid #C2C2C2;
}
.section05 .imgArea{
	float: left;
	width:40%;
}
.section05 .imgArea img{
	width: 100%;
	height:auto;
}
.section05 .textArea {
    padding: 10px 0 0 43%;
    text-align: left;
    font-size: 15px;
    letter-spacing: -1px;
}
.section05 .textArea a{
	position: relative;
	overflow: hidden;
	padding-left:40px;
	margin-top:40px;
	height:24px;
	display: inline-block;
	overflow: hidden;
}
.section05 .textArea a:before{
	content:"";
	width:29px;
	height:20px;
	display: block;
	position: absolute;
	top:50%;
	left:0;
    margin-left: -35px;
	margin-top:-12px;
	background: red;
	background:url(../img/icon_arrow.png) no-repeat center center;
	background-size: 29px 20px;
	transition: all 0.3s;
}
.section05 .textArea a:hover:before{
	left:35px;
}



.section06{
	color:#000;
}

.section06 h3{
	font-size:20px;
	margin:60px auto 127px;
}

.section06 h4{
	display:inline-block;
	position:relative;
	padding:0 60px;

}

.section06 h4:before,
.section06 h4:after{
	position:absolute;
	content:"";
	display:block;
	height:3px;
	width:30px;
	background:#000;
	top:50%;
}

.section06 h4:before{ left:0px;}
.section06 h4:after{ right:0px;}


.section06 p.sub{
	padding:15px 0 50px;
}


.section06 .present_list{
	padding-bottom:150px;
}

.section06 .present_list ul{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}

.section06 .present_list ul li{
	width:50%;
}

.section06 .present_list ul li dl{
	display:table;
}

.section06 .present_list ul li dt,
.section06 .present_list ul li dd{
	display:table-cell;
	vertical-align:middle;
}

.section06 .present_list ul li dt{
	padding-right:15px;
}

.section06 .present_list ul li dd{
	line-height:1.4;
}

.section06 .present_list ul li dd > span{
	display: inline-block;
	color:#147cdd;
	font-size:16px;
	font-weight:bold;
	position:relative;
	padding:0 30px;
	line-height:2.125 !important;
}

.section06 .present_list ul li dd > span:before,
.section06 .present_list ul li dd > span:after{
	position:absolute;
	content:"";
	display:block;
	width:35px;
	height:1px;
	background:#147cdd;	
}


.section06 .present_list ul li dd > span:before{
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
	left:0;
	top:50%;
}

.section06 .present_list ul li dd > span:after{
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
	right:0;
	top:50%;
}

.section06 .present_list ul li > p{
	margin-top:36px;
}
.section06 .present_list ul li > p img{
	display:block;
	margin:0 auto;
}

.section06 .present_list ul li > p span{
	display:block;
	padding-top:15px;
	font-size:13px;
}

.section06 .howto_list >  ul > li{
	display:inline-block;
}

.section06 .howto_list >  ul > li:not(:last-child):after{
	content:"";
	display:block;
	background:url(../img/campaign_howto_arrow.png) top center no-repeat;
	margin:70px auto 37px;
	width:100%;
	height:25px;
	
}
	

.section06 .howto_list li > dl{
	display: inline-table;
}

.section06 .howto_list li > dl dt,
.section06 .howto_list li > dl dd{
	display:table-cell;
	vertical-align:top;
}

.section06 .howto_list li > dl dt{

}

.section06 .howto_list li > dl dd{
	font-weight:bold;
	font-size:24px;
	padding:10px 103px 40px 25px;
}

.section06 .howto_list li .sns_icn{
	margin:37px auto 45px;
}

.section06 .howto_list li .sns_icn li{
	display:inline-block;
}
.section06 .howto_list li .sns_icn li + li{
	padding-left:45px;
}

.section06 .howto_list li .sns_image{
	position:relative;
	width:910px;
	height:435px;
	margin-top:55px;
}

.section06 .howto_list li .sns_image p{
	position:absolute;
}

.section06 .howto_list li .sns_image p:nth-of-type(1){
	top:180px;
	left:0;
}

.section06 .howto_list li .sns_image p:nth-of-type(2){
	top:0;
	left:326px;
}

.section06 .howto_list li .sns_image p:nth-of-type(3){
	right:115px;
	top:11px;
}

.section06 .howto_list li .sns_image p:nth-of-type(4){
	right:0;
	bottom:0;
}

.section06 .howto_list li a{ color:#000; text-decoration:none;}
.section06 .howto_list li a:hover{ color:#000; opacity:0.7; text-decoration:underline;}
.section06 .howto_list li .link a{ text-decoration:underline;}

.section06 .howto_list li .fs20{ font-size:20px;}
.section06 .howto_list li .fs16{ font-size:16px;}
.section06 .howto_list li .fs14{ font-size:14px;}


.section06 .howto_list li .term{
	width:800px;
	margin-top:50px;
}

.section06 .howto_list li .term > h5{
	color:#fff;
	background:#000;
	padding:5px 35px;
	display:inline-block;
	font-size:24px;
}

.section06 .howto_list li .term .term_inner{
	width:100%;
	border:#000 5px solid;
	padding:50px 35px;
	text-align:left;
	font-size:15px;
	
}

.section06 .howto_list li .term .term_inner dl{
	display:table;
	line-height:2.875;
	width:100%;
}

.section06 .howto_list li .term .term_inner dl dt,
.section06 .howto_list li .term .term_inner dl dd{
	display:table-cell;
	font-size: 14px;
}

.section06 .howto_list li .term .term_inner dl dt{
	width:17%;
}

.section06 .howto_list li .term .term_inner dl dd{
	width:83%;
}

.section06 .howto_list li .term .term_inner h6{
	font-weight:bold;
}

.section06 .howto_list li .term .term_inner ul,
.section06 .howto_list li .term .term_inner ol{
	margin-bottom: 1.5em;
	font-size: 14px;
	padding-left:1em;
}

.section06 .howto_list li .term .term_inner ul li:before{
	content:"・";
	margin-left: -1em;
}
.section06 .howto_list li .term .term_inner ol li{
	counter-increment: number;
}
.section06 .howto_list li .term .term_inner ol li:before{
	content: counter(number)".";
	margin-left: -1em;
}

.section06 .howto_list li .term .term_inner p{
	line-height:2.125;
	font-size: 14px;
}



/*====================================================
フッターの設定
====================================================*/
#footer{
    padding-right: 40px;
    box-sizing: content-box;
    border-top: solid 2px #000;
    width: 1200px;
    max-width: 100%;
	margin:80px 0 0 -40px;
	height:90px;
	text-align:left;
	position:relative;
	background:#fff;
}

#footer .copyright{
	position:absolute;
	top:35px;
	right:59px;
	z-index:9999;
	width:261px;
	height:14px;
}