@charset "UTF-8";

/*
Harley-Davidson Japan
Passport to Freedom
*/

/* General
**********************************************************************/
html, body {
height: 100%;
}

body {
font-family:'凸版文久ゴシック', "游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
color: #fff;
background: url(../img/bg.jpg) center 0 repeat;
font-size: 100%; /* 16px base */
/*font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;*/
line-height: 1.8;
letter-spacing: 1px;
text-align: justify; /* for ff, webkit */
text-justify: inter-ideograph; /* for IE */
}

img { vertical-align: top;}

.forPc { display: block;}
.forSp { display: none;}
.forSp320 { display: none;}

/* anchor */
a{ color: #fff;}
a:hover{ color:#FE8100; transition: .4s;}
a:before,
a:after { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}

@media screen and (max-width:800px) {
.forPc { display: none;}
.forSp { display: block;}
.forSp320 { display: none;}
.w100{ width:100%; height:auto;}
.bold{ width:100%; height:auto;}
}

@media screen and (max-width:320px) {
.forSp320 { display: block;}
}


/* Header
**********************************************************************/
#header {
background: #333;
}
#header ul.site-id{
display: block;
float: left;
padding-top: 12px;
padding-left: 20px;
padding-bottom: 12px;
}
#header ul.site-id li{
float: left;
}
#header ul.site-id h1.logo{
display: inline-block;
background-image: url('../img/hdj-logo.gif');
background-repeat: no-repeat;
width: 170px;
height: 24px;
text-indent: -9999px;
z-index: 9999;
line-height: 1;
}
#header ul.site-id h1.logo a{
	display:block;
}
#header ul.site-id h2.content-title{
display: inline-block;
background-image: url('../img/p2f-title.gif');
background-repeat: no-repeat;
width: 138px;
height: 24px;
margin-top:5px;
text-indent: -9999px;
z-index: 9999;
line-height: 1;
}
#header ul.sns-nav{
float: right;
padding-top: 12px;
padding-right: 24px;
}
#header ul.sns-nav li{
float: left;
}
#header ul.sns-nav li.sns-fb{
margin-right: 24px;
}
#header ul.sns-nav li a{
color: #fff;
}
#header ul.sns-nav li a:hover{
color: #cc6600;
}

@media screen and (max-width:480px) {
/* for Mobile Phone */
#header ul.site-id{
padding-left: 12px;
}
#header ul.site-id h1.logo{
width: 115px; /*80%*/
height: 20px;
background-size: 100% auto;
margin-right: 10px;
}
#header ul.site-id h2.content-title{
width: 110px; /*80%*/
height: 20px;
background-size: 100% auto;		
}
#header ul.sns-nav{
padding-top: 10px;
padding-right: 12px;
}
#header ul.sns-nav li a{
font-size: 0.75em;
}
#header ul.sns-nav li.sns-fb{
margin-right: 18px;
}
}

@media screen and (max-width:320px) {
/* for Mobile Phone */
#header ul.site-id{
display: block;
float: left;
padding-top: 10px;
padding-left: 12px;
padding-bottom: 5px;
}
#header ul.site-id h1.logo{
width: 100px; /*80%*/
}
#header ul.site-id h2.content-title{
width: 88px; /*80%*/
}
#header ul.sns-nav{
padding-top: 5px;
}
}


/* Content
**********************************************************************/
#content{ text-align:center; background:url(../img/bg_main.jpg) center top repeat-X;}

@media screen and (max-width:800px) {
/* for Tablet & Mobile Phone */
}

/* contBtnMain
**********************************************************************/
#contBtnMain { width:960px; margin:0 auto; text-align:center;}
#contBtnMain #mainBtn {}
#contBtnMain #mainBtn a { display: block; width:480px; margin:0 auto; padding: 18px 0; background-image: url('../img/btn_bg.jpg'); background-repeat: repeat-x; border: 1px solid #fff; text-decoration: none; line-height: 1; color: #fff; font-weight: bold; font-size: 20px; }
#contBtnMain #mainBtn a:hover { background-image: url('../img/btn_bg_on.jpg');}

@media screen and (max-width: 800px) {
/* for Tablet & Mobile Phone */
#contBtnMain { width:100%; padding:0 10px; box-sizing:border-box;}
#contBtnMain #mainBtn {}
#contBtnMain #mainBtn a { width:100%; font-weight:bold; font-size: 16px;}
}

@media screen and (max-width:320px) {
/* for Tablet & Mobile Phone */
#contBtnMain #mainBtn a { width:100%; font-size: 14px;}
}


/* Main
**********************************************************************/
#main { margin-bottom:30px; padding-top:400px; background:url(../img/main.jpg) center top no-repeat;}
#main .maiTxt { color:black;width:983px; margin:0 auto; line-height:1.5; font-size:11px;}
#prodName .btn {margin:50px;}
.prod01 {padding:0 20px;}
.btnL {margin-right: 34px;}
#main .tex{font-weight: bold; margin: 30px 0;}

@media screen and (max-width: 800px ) {
/* for Tablet & Mobile Phone */
#main { width:auto; height:100%; margin-bottom:0; padding-top:0; background:none}
#main .maiTxt { font-size:10px; margin-top:300px;}
#prodName .btn {margin:10px;}
#prodName .btn a:first-child {margin-right: 34px;}
.btnL {margin-right: 29px;}
.texSp {font-weight: bold; margin: 45px 0;}
.topBg {background:url(../img/sp/bg_main.jpg) center top no-repeat; background-size:100%;}
.topBtn {padding-top: 100%;}
.prod01 {text-align:left;}
}

@media screen and (max-width:320px) {
/* for Tablet & Mobile Phone */
#main {height: 0; margin-bottom:0; padding-top:0; background:none}
#main .maiTxt {margin:10px;}
.topBg {background:url(../img/sp/bg_main.jpg) center top no-repeat; background-size:100%;}
.prod01 {text-align:left;}
}

#sectionFull .txt {font-weight: bold;}
#sectionFull .top {position:relative; z-index:1;}
#sectionFull .top .bg {position:absolute; top:0; left:50%; transform:translate(-50%, 0); z-index:1;}
#sectionFull .top h1  {text-align:center; width:100%; position:relative; z-index:2; padding:50px 0px 30px 0px;}
#sectionFull .top b  {font-weight: bold;}

#sectionFull .table {width: 100%; max-width:1080px; margin:auto; position:relative; z-index:10;}
#sectionFull .table .imgListTop,
#sectionFull .table .imgListBottom {display:table; width:100%;}
#sectionFull .table .imgListTop span,
#sectionFull .table .imgListBottom span {display:table-cell; width:50%; text-align:center;}
#sectionFull .table .imgListTop span img,
#sectionFull .table .imgListBottom span img {max-width:100%;}

#sectionFull .bottom {position:relative; z-index:1; width:100%; max-width:1080px; margin:auto;}
#sectionFull .bottom .bg {position:absolute; bottom:0; left:50%; transform:translate(-50%, 0); z-index:1;}
#sectionFull .bottom .cap {position:relative; width:100%; z-index:10; text-align:left; padding-top:10px; padding-bottom:40px; max-width:980px; margin:auto;}

#BrushProd { width:980px; margin:0 auto 50px;}
#BrushProd h1 {margin-top:30px; margin-bottom:30px; font-weight: bold; text-align:center;}

@media screen and (max-width:800px) {
/* for Tablet & Mobile Phone */
#BrushProd  {width:100%; text-align:center;}
#BrushProd h1 { font-size:12px;}
#sectionFull .top h1 { padding:15px 0 0 0; margin-bottom:0;}
#BrushProd .top h1 {width: 80%; margin-left: 20px; padding:30px 0 0 0; text-align:left;}
#BrushProd img { width: auto; max-width:100%; position:relative; z-index: 10;}
#BrushProd .top .bg,
#BrushProd .bottom .bg {width:100%; margin:0;}
#BrushProd .bottom .cap {padding-top:20px; padding-bottom:60px;}
}

@media screen and (max-width:320px) {
/* for Tablet & Mobile Phone */
#BrushProd  {width:100%;}
#BrushProd h1 { font-size:12px;text-align:left;}
#BrushProd img { width: auto; max-width:100%; position:relative; z-index: 10;}
}

#sectionTitle h1 {margin-top:60px; margin-bottom:30px; font-weight: bold; text-align:center;}

@media screen and (max-width:800px) {
/* for Tablet & Mobile Phone */
#sectionTitle h1 {width: 90%; margin-left: 20px; padding:30px 0 0 0; text-align:left;}
}


#Schedule{ width:960px; margin:0 auto 40px; padding:10px 0 10px 0; bottom no-repeat; text-align:center; font-weight:bold;}

#sectionLine { width:980px; margin:0 auto 50px; background:url(../img/cmn_line.png) 0 top no-repeat;}

@media screen and (max-width:800px) {
/* for Tablet & Mobile Phone */
#sectionLine  {width:auto; margin:0 auto 25px; padding:40px 0 35px; background:none 0 bottom no-repeat; background-size: auto; text-align:center; font-weight:bold; font-size:14px;}
}

/* sectionProd
**********************************************************************/
#sectionProd { width:980px; margin:0 auto 50px; background:url(../img/cmn_line.png) 0 top no-repeat;}
#sectionProd .mainTxt { width:960px; margin:0 auto 40px; padding:70px 0 70px 0; background:url(../img/cmn_line.png) 0 bottom no-repeat; text-align:center; font-weight:bold;}
#sectionProd h3 { margin-bottom:30px; text-align:center;}
#sectionProd .sectionInner { width:903px; margin:0 auto 30px; padding:0 20px;}
#sectionProd .sectionInner .ph { float:left;}
#sectionProd .sectionInner .contDtl { float:right; width:580px; margin-top:24px;}
#sectionProd .sectionInner .contDtl h4 { margin-bottom:20px;}
#sectionProd .sectionInner .contDtl .txt { font-size:14px;}
#sectionProd .partsList { text-align:right;}
#sectionProd a { color:#ff6600; text-decoration:none; font-weight:bold; font-size:13px;}

@media screen and (max-width: 800px) {
/* for Tablet & Mobile Phone */
#sectionProd { width:auto; margin:0 20px 30px; padding:0; background:url(../img/sp/cmn_line.png) 0 top no-repeat; background-size: auto;}
#sectionProd .mainTxt { width:auto; margin:0 auto 25px; padding:40px 0 35px; background:url(../img/sp/cmn_line.png) 0 bottom no-repeat; background-size: auto; text-align:center; font-weight:bold; font-size:14px;}
#sectionProd h3 { margin-bottom:20px; text-align:center;}
#sectionProd .sectionInner { width:auto; margin:0 auto 30px; padding:0 20px;}
#sectionProd .sectionInner.last { margin:0 auto 15px;}
#sectionProd .sectionInner .ph { float:none;}
#sectionProd .sectionInner .contDtl { float:none; width:auto; margin-top:20px;}
#sectionProd .sectionInner .contDtl h4 { margin-bottom:15px;}
#sectionProd .sectionInner .contDtl h4.prod01 { width:63%;}
#sectionProd .sectionInner .contDtl h4.prod02 { width:84%;}
#sectionProd .sectionInner .contDtl h4.prod03 { width:63%;}
#sectionProd .sectionInner .contDtl .txt { font-size:12px;}
#sectionProd .partsList { text-align:right;}
#sectionProd a { color:#ff6600; text-decoration:none; font-weight:bold; font-size:11px;}
}

@media screen and (max-width:320px) {
/* for Tablet & Mobile Phone */
#sectionProd .mainTxt { font-size:12px;}
#sectionProd .sectionInner .contDtl h4.prod01 { width:73%;}
#sectionProd .sectionInner .contDtl h4.prod02 { width:94%;}
#sectionProd .sectionInner .contDtl h4.prod03 { width:73%;}
#sectionProd .sectionInner .contDtl .txt { font-size:11px;}
#sectionProd .partsList { line-height:1.2;}
#sectionProd a { font-size:11px;}
}

/* sectionAtt
**********************************************************************/
#sectionAtt.att { width:946px; margin:0 auto 60px; color:#9b9b9b; line-height:1.6; font-size:11px;}


/* sectionEtc
**********************************************************************/
#sectionEtc { position:relative; width:977px; height:238px; margin:0 auto 90px; background:url(../img/stn_etc_ph.jpg) 0 0 no-repeat; border:solid 3px #fff; text-align:right;}
#sectionEtc #sectionEtcInner { display:inline-block; min-height:238px; padding:0 15px 0 220px; background:url(../img/stn_etc_logo.png) 0 0 no-repeat; text-align:center;}
#sectionEtc #sectionEtcInner .txt { margin-bottom:15px; padding-top:20px; line-height:1.5; color:#ff6600; font-weight:bold; font-size:18px;}
#sectionEtc .btn { position:absolute; width:240px; height:37px; background:url(../img/btn_detail_off.jpg) 0 0 no-repeat; top:170px; right:35px;}
#sectionEtc .btn a { display:block; width:100%; height:100%;}

@media screen and (max-width: 800px) {
/* for Tablet & Mobile Phone */
#sectionEtc { position:static; width:auto; height:auto; margin:0 20px 30px; background:#000000; border:solid 3px #fff; text-align:right;}
#sectionEtc #sectionEtcInner { display:inline-block; min-height:inherit; margin-top:-30px; padding:0 15px 0 0; background:none; text-align:center;}
#sectionEtc #sectionEtcInner .logo { float:left; width:125px; clear:both;}
#sectionEtc #sectionEtcInner .txt { margin:0 0 15px 125px; padding-top:25px; line-height:1.5; color:#ff6600; font-weight:bold; font-size:11px;}
#sectionEtc .btn { position:static; width:auto; height:auto; padding:0 20px 20px; background:none;}
}

@media screen and (max-width:320px) {
/* for Tablet & Mobile Phone */
#sectionEtc #sectionEtcInner .logo { float:left; width:90px; padding-top:10px; clear:both;}
#sectionEtc #sectionEtcInner .txt { margin-left:90px; padding-top:17px; font-size:10px;}
}

/* sectionSchedule
**********************************************************************/
#sectionScheduleWrap { width:980px; margin:0 auto 0; padding:90px 0 0 0; background:url(../img/cmn_line.png) 0 top no-repeat;}
#sectionSchedule { width:918px; margin:0 auto;}
#sectionSchedule h3 { margin-bottom:30px; text-align:center;}
#sectionSchedule ul { width:918px; float:center;}
#sectionSchedule li { width:400px; height: 180px; float:left; margin:10px 25px;}

.ScheduleTable table {width:100%; margin:auto; text-align:center;}

.ScheduleTable .lineSet { background:url(../img/sp/cmn_line.png) 0 top no-repeat; background-size:auto; width:100%; height:6px;}
.ScheduleTable .day {text-align:center; width:30%; vertical-align:middle; padding:10px; margin:0;}
.ScheduleTable img {max-width: 100%;}
.ScheduleTable .link {text-align:left; vertical-align: middle; padding:20px 0 20px;}
.ScheduleTable .link a {display:block; padding:10px 50px 10px 0; height:100%; position:relative;}
.ScheduleTable .link a:after {content:"";  background:url(../img/sp/icon_right.png) center center no-repeat; background-size:20px 20px; width:20px; height:20px; position:absolute; top:50%; right:10px; transform:translate(0, -50%);}
.ScheduleTable .tdLine {content:""; background:url(../img/sp/cmn_line.png) 0 bottom; background-size:auto 3px; width:calc(100% - 10px); height:3px; display: block;}

@media screen and (max-width: 800px) {
#sectionScheduleWrap { width:auto; margin:0 20px 0; padding:0; background:url(../img/sp/cmn_line.png) 0 top no-repeat; background-size: auto;}
#sectionSchedule { font-size: 12px;  width:auto; overflow:hidden; margin:0 auto; padding:0 10px;}
#sectionSchedule h3 { width:50%; margin:0 auto 20px; text-align:center;}
#sectionSchedule ul { width:auto;}
#sectionSchedule li { float:center; width:50%; margin:0 0 15px; padding:0 5px; box-sizing:border-box;}
#sectionSchedule img {width: 30%; margin:auto 10px;}
}

@media screen and (max-width: 320px) {
#sectionSchedule { width:auto; overflow:hidden; margin:0 auto; padding:0 10px;}
#sectionSchedule h3 { width:50%; margin:0 auto 20px; text-align:center;}
#sectionSchedule ul { width:auto;}
#sectionSchedule li { float:center; width:50%; margin:0 0 15px; padding:0 5px; box-sizing:border-box;}
}

/* sectionGallery
**********************************************************************/
#sectionGalleryWrap { width:980px; margin:0 auto; padding:30px 0 0 0;}
#sectionGalleryWrap .btn{ width:100%; margin:30px 0;}


#sectionGalleryWrap .top {position:relative; z-index:1;}
#sectionGalleryWrap .top .bg {position:absolute; top:0; left:50%; transform:translate(-50%, 0); z-index:1;}
#sectionGalleryWrap .top h3  {text-align:center; width:100%; position:relative; z-index:2; padding:100px 0 20px 0; font-weight:bold;}
#sectionGalleryWrap .top b  {font-weight: bold;}

#sectionGalleryWrap .bottom {position:relative; z-index:1; width:100%; max-width:1080px; margin:auto;}
#sectionGalleryWrap .bottom .bg {position:absolute; bottom:0; left:50%; transform:translate(-50%, 0); z-index:1;}
#sectionGalleryWrap .bottom center {position:relative; width:100%; height:170px; padding-top:30px; z-index: 100;}
#sectionGalleryWrap .bottom center a:first-child {margin-right: 34px;}

#sectionGallery { width:918px; margin:0 auto; position:relative; z-index:100;}
#sectionGallery h3 { margin-bottom:30px; text-align:center;}
#sectionGallery ul { width:918px;}
#sectionGallery li { float:left; margin:0 8px 16px;}
#sectionGallery .sectionInner { width:700px; margin-bottom:50px; margin:0 auto; position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%; z-index: 100;}
#sectionGallery .sectionInner iframe {position: absolute; top: 0; left: 0; width: 100%; height: 80%;}
#sectionGallery .btn { width:50%; margin:10px 10px;}
#sectionGallery li a { display:inline-block;}

@media screen and (max-width: 800px) {
#sectionGalleryWrap { width:980px; margin:0 auto 50px;background:url(none) 0 top no-repeat;}
#sectionGallery { width:auto; overflow:hidden; margin:0 auto; padding:0 10px;}
#sectionGallery h3 { width:50%; margin:0 auto 20px; text-align:center;}
#sectionGallery ul { width:auto;}
#sectionGallery li { float:left; width:50%; margin:0 0 15px; padding:0 5px; box-sizing:border-box;}
#sectionGallery .sectionInner { width:auto; margin-bottom:50px; margin:0 auto; position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%;}
#sectionGallery .sectionInner iframe {position: absolute; top: 0; left: 0; width: 50%; height: 50%;}
#sectionGallery .btn { width:100%; margin:auto auto;}
}


#sectionMovieProd { width:980px; margin:0 auto 0;}
#sectionMovie {position:relative; z-index:10;}
#sectionMovieProd ul {position:relative; z-index:10;}
#sectionMovieProd .bikeSliderCover {position:relative; z-index:10;}
#sectionMovie
#sectionMovie h1 {margin-top:30px; margin-bottom:30px; text-align:center;}

#sectionMovieProd .top {position:relative; z-index:1;}
#sectionMovieProd .top .bg {width:calc(100% + 40px); position:absolute; top:0; left:50%; transform:translate(-50%, 0); z-index:1;}
#sectionMovieProd .top h3  {text-align:center; width:100%; position:relative; z-index:2; padding:100px 0 20px 0; font-weight:bold;}
#sectionMovieProd .top b  {font-weight: bold;}

#sectionMovieProd .bottom {position:relative; z-index:1; width:100%; max-width:1080px; margin:auto;}
#sectionMovieProd .bottom .bg {width:calc(100% + 40px); position:absolute; bottom:0; left:50%; transform:translate(-50%, 0); z-index:1;}
#sectionMovieProd .bottom center {position:relative; width:100%; height:170px; padding-top:30px; z-index: 100;}
#sectionMovieProd .bottom center a:first-child {margin-right: 34px;}
#sectionMovieProd .bottom .forSp center a:first-child {margin-right: 0;}

@media screen and (max-width:800px) {
/* for Tablet & Mobile Phone */
#sectionMovieProd  {width:100%; background:none}
#sectionMovieProd .btnL {margin-right: 29px;}
#sectionMovie .sectionInner { width:auto; margin:0 auto; position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%;}
#sectionMovie .sectionInner iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#sectionMovie h1 { font-size:12px; margin:10px 20px;}
#sectionMovieProd .top h3  {padding:30px 0 0 0; text-align:left;}
#sectionGallery .sectionInner { width:auto; margin-bottom:50px; margin:0 auto; position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%;}
#sectionGallery .sectionInner iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#sectionMovieProd .bottom .btn {padding:0 10px 0;}
}

@media screen and (max-width:320px) {
/* for Tablet & Mobile Phone */
#sectionMovieProd  {width:100%;}
#sectionMovie  {width:100%;}
#sectionGallery .sectionInner { width:auto; margin-bottom:50px; margin:0 auto; position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%;}
#sectionGallery .sectionInner iframe {position: absolute; top: 0; left: 0; width: 50%; height: 50%;}
}

/* sectionBanner
**********************************************************************/
#sectionBanner { width:945px; margin:0 auto 90px;}

@media screen and (max-width: 800px) {
#sectionBanner { width:auto; margin:0 auto 30px; padding:0 20px;}
}

/* galleryTable
**********************************************************************/
#galleryList { width:903px; margin:0 auto; padding:80px 70px; background: url(../img/list_bg.gif) center 0 repeat; background-size:cover;}
#galleryList h3 { margin:0 0 30px;}
#galleryList #galleryTable { width:903px; margin-bottom:15px; border-top:solid 1px #fff; border-right:solid 1px #fff;}
#galleryList #galleryTable td { padding:10px 15px; border-bottom:solid 1px #fff; border-left:solid 1px #fff;}
#galleryList #galleryTable td.tc { text-align:center;}
#galleryList #galleryTable td.tr { text-align:right;}
#galleryList #galleryTable td.total { text-align:right;}
#galleryList .galleryAtt {}
#galleryList .attOrange { color:#ff6600;}

@media screen and (max-width: 800px) {
#galleryList { width:auto; margin:0 auto; padding:20px 10px;}
#galleryList h3 { margin:0 0 15px;}
#galleryList #galleryTable { width:auto; border-top:solid 1px #fff; border-right:solid 1px #fff;}
#galleryList #galleryTable td { padding:5px; border-bottom:solid 1px #fff; border-left:solid 1px #fff; font-size:11px; vertical-align:middle;}
#galleryList #galleryTable td.tc { text-align:center;}
#galleryList #galleryTable td.tr { width:32%; text-align:right;}
#galleryList #galleryTable td.total { text-align:right;}
#galleryList .galleryAtt { font-size:10px;}
#galleryList .attOrange { color:#ff6600;}
}


/* Footer
**********************************************************************/

/* sectionInfoFoot */
#sectionInfoFoot { padding:40px 0 0; background:#232323; text-align:center;}
#sectionInfoFoot .ttl { margin-bottom:20px;}
#sectionInfoFoot ul { width:256px; margin:0 auto 25px;}
#sectionInfoFoot ul li { float:left; margin:0 11px;}
#sectionInfoFoot .mail { margin-bottom:10px;}

@media screen and (max-width: 800px) {
#sectionInfoFoot { position:relative; width:100%; padding:20px 0; text-align:center; background:#232323;}
#sectionInfoFoot .w100 {max-width:100%; width: auto;}
#sectionInfoFoot .ttl { margin-bottom:10px; padding:0 20px;}
#sectionInfoFoot ul { width:50%; margin:0 auto 15px;}
#sectionInfoFoot ul li { float:left; width:25%; margin:0; padding:0 5px; box-sizing:border-box;}
#sectionInfoFoot .mail { margin-bottom:5px; font-size:14px;}
#sectionInfoFoot .btn { width:50%; margin:0 auto;}
}
footer {
position: relative;
z-index: 999;
background: #232323;
}
footer .pagetop {
position: relative;
z-index: 1000;
}
footer .pagetop a{
position: absolute;
background-image: url('../img/btn_pagetop.png');
background-repeat: no-repeat;
width: 48px;
height: 48px;
text-indent: -9999px;
right:30px;
margin-top: -24px;
}
footer .pagetop a:hover{
background-image: url('../img/btn_pagetop_on.png');
}

#footer{
padding: 40px 0;
text-align: center;
background: #232323;
}
#footer div.f-logo{
margin-bottom: 12px;
line-height: 1;
}
#footer p.copyright{
font-size: 13px;
line-height: 1;
}

@media screen and (max-width:800px) {
/* for Mobile Phone */
/* 表示領域が800px以下の場合に適用するスタイル */
footer .pagetop a{
right:20px;
}
#footer{
position: relative;
width: 100%;
padding: 20px 0;
text-align: center;
background: #232323;
}
#footer div.f-logo img{
width: auto;
max-width: 100%;
}
#footer p.copyright{
font-size: 10px;
line-height: 1;
}
}


@media screen and (max-width:480px) {
/* for Mobile Phone */
/* 表示領域が480px以下の場合に適用するスタイル */
footer .pagetop a{
right:20px;
}
#footer{
padding: 20px 0;
text-align: center;
background: #232323;
}
#footer div.f-logo img{
width: auto;
max-width: 100%;
}
#footer p.copyright{
font-size: 10px;
line-height: 1;
}
}


/* Other
************************************************************/
/* clearfix */
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}

/* margin */
.mb0  { margin-bottom: 0px !important;}
.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb60 { margin-bottom:60px !important;}
.mb80 { margin-bottom:80px !important;}
.mb100 { margin-bottom:100px !important;}
.mb120 { margin-bottom:120px !important;}
.mt0  { margin-top: 0px !important;}
.mt10 { margin-top:10px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt60 { margin-top:60px !important;}
.mt80 { margin-top:80px !important;}
.mt100 { margin-top:100px !important;}
.mt120 { margin-top:120px !important;}