@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/09/06
* Last update : 2018/04/20
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
figure{ display: block; margin: 0;}
*{ box-sizing: border-box;}



/*************************************************************************************************************************
* 画面幅：640px 以下
*************************************************************************************************************************/
html{ font-size: 14px; color: #333;}
body{ padding: 97px 0 0;}

@media print, screen and (min-width: 681px){
  body{ min-width: 1200px; padding-top: 160px;}
}


/* header
**********************************************************************/
header{ background: rgba(255,255,255,.95); width: 100%; height: 97px; position: absolute; top: 0; left: 0; z-index: 1000;}

header > div .heading{ background: #ffe100; height: 33px; padding: 0 25px 0 0; position: relative;  border-bottom: solid 3px #dd0716; overflow: hidden;; text-align: center;}
header > div .heading::before{ content: ""; background: url(../img/pencal.svg) no-repeat center/contain; width: 31px; height: 42px; position: absolute; top: 2px; right: calc(50% - 10.2em);}
header > div .heading p{ font: 900 14px/30px "heisei-kaku-gothic-std"; color: #363480; position: absolute; top: 2px; left: 39px;}

header > div > a{ display: block; width: 116px; position: absolute; bottom: 14px; left: 12px;}

header > div p{ position: absolute; bottom: 20px; right: 68px; font-size: 0; line-height: 0;}
header > div p a{ display: block; width: 99px; margin: 0 0 4px; position: relative;}
header > div p a::before{ content: ""; background: url(../img/icon_tel.svg) no-repeat center/contain; width: 26px; height: 26px; position: absolute; top: -1px; left: -33px;}
header > div p > img{ width: 103px;}

header > a{ display: block; background: url(../img/nav_btn_open.svg) no-repeat center/18px 18px #dd0716; width: 48px; height: 44px; position: absolute; bottom: 10px; right: 10px; z-index: 2; overflow: hidden; white-space: nowrap; text-indent: 100%;}
header.nav-on > a{ background-image: url(../img/nav_btn_close.svg);}

header nav{ display: none; background: #dd0716; width: 100%; height: 100%; position: fixed; top: 0; left: 0;}
header.nav-on nav{ display: block;}
header nav div{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

header nav div .global{ border-top: solid 1px rgba(255,255,255,.5);}
header nav div .global li a{ display: block; height: 55px; padding: 0 20px; position: relative; border-bottom: solid 1px rgba(255,255,255,.5); font-weight: bold; font-size: 14px; line-height: 54px; color: #fff;}
header nav div .global li:nth-child(2) a{ display: none;}
header nav div .global li a::after{ content: ""; background: url(../img/icon_arrow_white01.svg) no-repeat center/contain; width: 8px; height: 11px; position: absolute; top: 23px; right: 29px;}
header nav div .global li a.uchimura::after{ content: ""; background: url(../img/icon_ext_white.svg) no-repeat center/contain; width: 11px; height: 9px; position: absolute; top: 23px; right: 29px;}
header nav div .global li a[target="_blank"]::after{ opacity: .5; background-image: url(../img/icon_ext_white.svg); width: 11px; height: 9px; top: 24px; right: 28px;}

header nav div .sub{ padding: 20px 10px 20px 20px; overflow: hidden;}
header nav div .sub li a{
	display: block;
	 width: 100%; 
	 height: 75px; margin: 0 10px 0 0; padding: 45px 0 0; float: left; font-weight: bold; font-size: 12px; color: #333; text-align: center;
 }
header nav div .sub li:nth-child(1) a{ display: none; background: url(../img/nav_contact.svg) no-repeat center/contain #fff;}
header nav div .sub li:nth-child(2) a{ background: url(../img/nav_alliance.svg) no-repeat center/contain #fff;}
header nav div .sub li:nth-child(3) a{ background: url(../img/nav_my-joycal.svg) no-repeat center/contain #fff;}

@media print, screen and (min-width: 681px){
  header{ background: #e7f4f6; min-width: 1200px; height: 160px; /*transition: top .5s ease-out;*/}
  header::after{ content: ""; background: #fff; width: 27px; height: 85px; position: absolute; top: 0; right: 0; border-bottom: solid 1px #e3e3e3;}
  
  header > div{ background: #fff; width: calc(100% - 437px); height: 85px; position: absolute; top: 0; left: 0; border-bottom: solid 1px #e3e3e3;}
  header > div .heading{ width: 326px; height: 39px; padding-right: 29px; position: absolute; top: 24px; right: 230px; border-bottom: none; border-radius: 4px; overflow: visible; }
  header > div .heading::before{ width: 59px; height: 78px; top: -12px; right: -23px; }
  header > div .heading p{ font-size: 15px; line-height: 39px; position: absolute; top: 1px; left: -3px;}
  
  header > div > a{ width: 152px; bottom: 19px; left: 25px;}
  
  header > div p{ bottom: 19px; right: 22px;}
  header > div p a{ width: 147px; margin-bottom: 10px;}
  header > div p a::before{ width: 22px; height: 22px; top: -1px; left: -26px;}
  header > div p > img{ width: 152px; margin: 0 0 0 -2px;}
  
  header > a{ display: none!important;}
  
  header nav{ display: block!important; background: #dd0716; width: 100%; height: 70px; position: absolute; top: auto; bottom: 0;}
  header nav div{ width: 100%; position: static; transform: none;}
  
  header nav div .global{ width: 996px; margin: 0 auto; position: relative; border-top: none; overflow: hidden;text-align:center}
	header nav div .global li{
		display: inline-block;
	}
  header nav div .global li a{ 
		display: block!important; 
		height: 70px;
		 padding: 0; 
		 /* float: left;  */
		 border-bottom: none; 
		 overflow: hidden; 
		 white-space: nowrap; 
		 text-indent: 100%; 
		 transition: background-position .17s linear;
	}
  header nav div .global li:nth-child(1) a{
		 background: url(../img/nav_global01.svg) no-repeat 0 -70px/136px 140px; width: 136px;
		}
  /* header nav div .global li:nth-child(2) a{
		 background: url(../img/nav_global02.svg) no-repeat 0 -70px/110px 140px; width: 110px;} */
  header nav div .global li:nth-child(2) a{ 
		background: url(../img/nav_global03.svg) no-repeat 0 -70px/139px 140px; width: 139px;}
  /*header nav div .global li:nth-child(4) a{ background: url(../img/nav_global04.svg) no-repeat 0 -70px/194px 140px; width: 194px;}*/
  header nav div .global li:nth-child(3) a{
		 background: url(../img/nav_global05.svg) no-repeat 0 -70px/124px 140px; width: 124px;}
  header nav div .global li:nth-child(4) a{ 
		background: url(../img/nav_global06.svg) no-repeat 0 -70px/137px 140px; width: 137px;}
  header nav div .global li:nth-child(5) a{ 
		background: url(../img/nav_global07.svg) no-repeat 0 -70px/140px 140px; width: 140px;}
	header nav div .global li a.magazine{ 
		background: url(../img/nav_global_mag.svg) no-repeat 0 -70px/150px 140px; width: 150px;}
  header nav div .global li a.uchimura{ 
		background: url(../img/nav_global08.svg?20220413_3) no-repeat 0 -70px/140px 140px; width: 140px;}
  
		header nav div .global li a:hover,
		#news header nav div .global li:nth-child(2) a,
		#service header nav div .global li:nth-child(2) a,
		#shops header nav div .global li:nth-child(3) a,
		#simulation header nav div .global li:nth-child(4) a,
		#faq header nav div .global li:nth-child(4) a,
		#contact header nav div .global li:nth-child(5) a{ background-position: 0 0;}
  
  header nav div .global li a::after{ display: none;}
  
  header nav div .sub{ width: 405px; padding: 0; position: absolute; top: -90px; right: 27px;}
  header nav div .sub li a{
		display: block!important;
		 width: 197px;
			height: 85px;
			 margin-right: 5px;
				padding-top: 54px; 
				position: relative; 
				border-bottom: solid 1px #e3e3e3;
	 }
  header nav div .sub li a::before{ content: ""; background: #dd0716; width: 0; height: 4px; position: absolute; bottom: 0; left: 0; transition: width .2s ease-out;}
  header nav div .sub li a:hover::before{ width: 100%;}
}



/* page title
**********************************************************************/
body:not(#home) h2{ background: #e7f4f6; height: 80px; padding: 16px 16px 0; font: 900 20px/1 "heisei-kaku-gothic-std"; color: #2e919e; text-align: center; letter-spacing: .1em;}
body:not(#home) h2 span{ display: inline-block; margin: 0 0 7px; position: relative; font-weight: 700; font-size: 13px; letter-spacing: 0}
body:not(#home) h2 span::before,
body:not(#home) h2 span::after{ content: ""; background: #2e919e; width: 15px; height: 1px; position: absolute; top: 5px;}
body:not(#home) h2 span::before{ left: -28px;}
body:not(#home) h2 span::after{ right: -28px;}

@media print, screen and (min-width: 681px){
  body:not(#home) h2{ height: 160px; padding: 30px 0 0; font-size: 35px;}
  body:not(#home) h2 span{ margin-bottom: 12px; font-size: 16px;}
}


/* pankuzu
**********************************************************************/
.pankuzu{ background: #ffe100;}
.pankuzu ul{ overflow: hidden;}
.pankuzu ul li{ height: 40px; padding: 0 12px; float: left; font-size: 12px; line-height: 40px;}
.pankuzu ul li:not(:first-child):not(:last-child){ display: none;}
.pankuzu ul li a{ display: block; position: relative;}
.pankuzu ul li:first-child a{ background: #dd0716; margin: 0 0 0 -12px; padding: 0 12px 0 28px; color: #fff;}
.pankuzu ul li:first-child a::before{ content: ""; background: url(../img/icon_home_white.svg) no-repeat 0 0 / cover; width: 14px; height: 12px; margin: -1px 0 0; position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.pankuzu ul li:not(:last-child) a::after{ content: ""; width: 0; height: 0; position: absolute; top: 0; right: -12px; border-style: solid; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent #dd0716;}
.pankuzu ul li span{ display: none;}

@media print, screen and (min-width: 681px){
  .pankuzu ul{ width: 980px; margin: 0 auto;}
  .pankuzu ul li{ height: 52px; margin: 0; padding: 0; line-height: 52px;}
  .pankuzu ul li:not(:first-child):not(:last-child){ display: block;}
  .pankuzu ul li a{ background: none; margin: 0 35px 0 0!important; color: #2e8b98!important;}
  .pankuzu ul li:first-child a{ background: none; padding: 0 0 0 17px;}
  .pankuzu ul li:first-child a::before{ background-image: url(../img/icon_home_blue.svg); left: 0;}
  .pankuzu ul li:not(:last-child) a::after{ content: ""; width: 5px; height: 5px; top: 50%; right: -20px; border-style: solid; border-width: 1px 1px 0 0; border-color: #969696 #969696 transparent transparent; transform: translateY(-50%) rotate(45deg);}
  .pankuzu ul li span{ display: inline;}
}


/* news
**********************************************************************/
.newsList{ padding: 20px 0;}
#news .newsList{ padding: 0;}

.newsList h2{ font: 500 25px/1 "futura-pt"; text-align: center; letter-spacing: .07em;}
.newsList h2 span{ display: block; margin: 5px 0 0; font: 700 13px/1 "heisei-kaku-gothic-std"; color: #dd0716; letter-spacing: 0;}

#news .newsList h3{ padding: 18px 16px 0; font: 700 20px/1 "heisei-kaku-gothic-std"; color: #dd0716; text-align: center; letter-spacing: .05em;}

.newsList .maker{ background: #f2f2f2; margin: 17px 0 0; padding: 15px 16px;}
.newsList .maker .select{ background: #fff; height: 46px; position: relative; z-index: 1; border: solid 1px #d6d6d6; border-radius: 4px; overflow: hidden;}
.newsList .maker .select::before{ content: ""; background: #d6d6d6; width: 1px; height: 100%; position: absolute; top: 0; right: 40px;}
.newsList .maker .select::after{ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); border-style: solid; border-width: 6px 4px 0 4px; border-color: #dd0716 transparent transparent; }
.newsList .maker .select select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; width: 130%; height: 44px; padding: 0 0 0 15px; border: none; border-radius: 0; font-size: 13px; cursor: pointer;}

.newsList .maker .tab{ display: none;}

.newsList .pannel > ul{ opacity: 0; height: 0; overflow: hidden; transition: opacity .2s linear;}
.newsList .pannel > ul.on{ opacity: 1; height: auto;}
.newsList .pannel > ul li{ padding: 15px 16px; border-bottom: solid 1px #ccc;}
.newsList .pannel > ul li div a{ display: block; font-weight: bold; font-size: 13px; line-height: 1.4; color: #333; transition: color .2s linear;}
.newsList .pannel > ul li.brand-new div  a:hover{ color: #de4545;}
.newsList .pannel > ul li.full-change div  a:hover{ color: #6fb12c;}
.newsList .pannel > ul li.special div  a:hover{ color: #ff801e;}
.newsList .pannel > ul li.grade-add div  a:hover{ color: #bd1e79;}
.newsList .pannel > ul li.minor-change div  a:hover{ color: #0071b4;}
.newsList .pannel > ul li.parts-change div  a:hover{ color: #838383;}
.newsList .pannel > ul li.price-change div  a:hover{ color: #c9ac02;}

.newsList .pannel > ul li dl{ display: table; margin: 10px 0 0;}
.newsList .pannel > ul li dl dt{ display: table-cell; width: 80px; font-size: 12px; line-height: 1; vertical-align: middle;}

.newsList .pannel > ul li dl dd{ display: table-cell; width: 130px; padding: 5px; border-radius: 2px; font-weight: bold; font-size: 11px; line-height: 1; color: #fff; text-align: center; vertical-align: middle;}
.newsList .pannel > ul li.brand-new dl dd{ background: #de4545;}
.newsList .pannel > ul li.full-change dl dd{ background: #6fb12c;}
.newsList .pannel > ul li.special dl dd{ background: #ff801e;}
.newsList .pannel > ul li.grade-add dl dd{ background: #bd1e79;}
.newsList .pannel > ul li.minor-change dl dd{ background: #0071b4;}
.newsList .pannel > ul li.parts-change dl dd{ background: #838383;}
.newsList .pannel > ul li.price-change dl dd{ background: #c9ac02;}

.newsList .to-news{ display: block; margin: 15px 16px 0; height: 45px; position: relative; border: solid 1px #d6d6d6; font-weight: bold; font-size: 13px; line-height: 43px; color: #dd0716; text-align: center; transition: all .3s linear;}
.newsList .to-news::before{ content: ""; width: 0; height: 0; margin: 0 0 0 -5.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #dd0716; transition: border-left-color .3s linear;}
.newsList .to-news:hover{ background: #dd0716; border-color: #dd0716; color: #fff;}
.newsList .to-news:hover::before{ border-left-color: #fff;}

@media print, screen and (min-width: 681px){
  .newsList{ width: 980px; margin: 0 auto; padding: 35px 0 50px;}
  #news .newsList{ padding: 0 0 50px;}
  
  .newsList h2{ font-size: 35px;}
  .newsList h2 span{ margin: 8px 0 0; font-size: 14px;}
  
  #news .newsList h3{ padding: 45px 0 0; font-size: 28px;}
  
  .newsList .maker{ background: none; margin-top: 30px; padding: 0;}
  #news .newsList .maker{ margin-top: 40px;}
  
  .newsList .maker .select{ display: none;}
  
  .newsList .maker .tab{ display: block; border-bottom: solid 3px #980a17; overflow: hidden;}
  /*.newsList .maker .tab li a{ display: block; width: 104px; height: 49px; margin: 0 5px 0 0; float: left; border: solid 1px #e2e2e2; border-bottom: none; font-weight: bold; font-size: 13px; line-height: 49px; color: #333; text-align: center; transition:  all .3s linear;}
  .newsList .maker .tab li:last-child a{ width: 108px; margin-right: 0; padding: 11px 0 0; font-size: 11px; line-height: 1.2;}*/
  .newsList .maker .tab li a{ display: block; width: 118px; height: 49px; margin: 0 5px 0 0; float: left; border: solid 1px #e2e2e2; border-bottom: none; font-weight: bold; font-size: 13px; line-height: 49px; color: #333; text-align: center; transition:  all .3s linear;}
  .newsList .maker .tab li:last-child a{ width: 119px; margin-right: 0;}
  .newsList .maker .tab li a:hover,
  .newsList .maker .tab li a.on{ background: #dd0716; border-color: #dd0716; color: #fff;}
  
  #home .newsList .pannel > ul li{ padding: 16px 30px; border-bottom: none; overflow: hidden;}
  #news .newsList .pannel > ul li{ padding: 56px 20px 23px; position: relative;}
  
  #home .newsList .pannel > ul li:nth-child(odd){ background: #f2f2f2;}
  #news .newsList .pannel > ul li:first-child{ margin: 5px 0 0;}
  
  #home .newsList .pannel > ul li div{ width: 670px; float: right; overflow: hidden;}
  
  .newsList .pannel > ul li div a{ display: inline-block; font-weight: normal;}
  #home .newsList .pannel > ul li div a{ line-height: 1; white-space: nowrap;}
  #news .newsList .pannel > ul li div a{ line-height: 1.6;}
  
  .newsList .pannel > ul li dl{ width: 228px; margin-top: 0;}
  #home .newsList .pannel > ul li dl{ float: left;}
  #news .newsList .pannel > ul li dl{ position: absolute; top: 20px; left: 20px;}
  
  .newsList .pannel > ul li dl dt{ width: 97px; font-size: 13px;}
  
  .newsList .to-news{ margin: 20px 0 0;}
}


/* construction
**********************************************************************/
.construction{ padding: 16px 20px;}
.construction p{ background: #f8f7f3; padding: 90px 20px; font-size: 13px; line-height: 1.2; color: #666; text-align: center;}

@media print, screen and (min-width: 681px){
  .construction{ padding: 50px 0;}
  .construction p{ width: 980px; margin: 0 auto; padding: 210px 20px; font-size: 14px;}
}


/* footer
**********************************************************************/
footer > dl{ background: #f8f7f3; padding: 25px 16px 30px; font-family: "heisei-kaku-gothic-std"; text-align: center;}
#home footer > dl{ display: none; }

footer > dl dt{ font-weight: 700; font-size: 15px; line-height: 1;}
footer > dl dd a{ display: block; background: #dd0716; max-width: 316px; height: 50px; margin: 13px auto 0; position: relative; border: solid 2px #dd0716; font-weight: 900; font-size: 15px; line-height: 46px; color: #fff; transition: background .3s linear, color .3s linear;}
footer > dl dd a:hover{ background: #fff; color: #dd0716;}

footer > dl dd a::before{ content: ""; background: #ffe100; width: 14px; height: 14px;  position: absolute; top: 50%; right: 11px; border-radius: 50%; transform: translateY(-50%); transition: background .3s linear;}
footer > dl dd a:hover::before{ background: #dd0716; }

footer > dl dd a::after{ content: ""; background: url(../img/icon_arrow_red01.svg) no-repeat center/contain; width: 5px; height: 9px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
footer > dl dd a:hover::after{ background-image: url(../img/icon_arrow_white01.svg);}

footer > div{ background: #666; padding: 20px 16px;}
footer > div > a{ display: none;}
footer > div .f-top{ display: none;}

footer > div .f-btm .links{ display: table; margin: 0 auto; overflow: hidden;}
footer > div .f-btm .links li{ margin: 0 20px 0 0; float: left;}
footer > div .f-btm .links li:first-child{ display: none;}
footer > div .f-btm .links li:last-child{ margin-right: 0;}
footer > div .f-btm .links li a{ padding: 0 16px 0 0; position: relative; font-weight: bold; font-size: 12px; line-height: 1; color: #fff;}
footer > div .f-btm .links li:last-child a::after{ opacity: .5; content: ""; background: url(../img/icon_ext_white.svg) no-repeat center/contain; width: 11px; height: 9px; position: absolute; top: 3px; right: 0; transition: opacity .3s linear;}
footer > div .f-btm .links li a:hover::after{ opacity: 1;}

footer > div .f-btm .sns{ width: 129px; margin: 18px auto 0; overflow: hidden;}
footer > div .f-btm .sns li a{ display: block; width: 35px; margin: 0 12px 0 0; float: left;}
footer > div .f-btm .sns li:last-child a{ margin-right: 0;}

footer > p{ background: #5c5c5c; height: 40px; padding: 0 16px; font: 300 10px/40px "heisei-kaku-gothic-std"; color: #fff; text-align: center;}

@media print, screen and (max-width: 355px){
  footer > p span{ display: none;}
}

@media print, screen and (max-width: 352px){
  footer > div .f-btm .links li{ float: none; text-align: center;}
}

@media print, screen and (min-width: 681px){
  footer > dl{ padding: 48px 0 60px;}
  footer > dl dt{ font-size: 22px;}
  footer > dl dd a{ width: 580px; max-width: 100%; height: 60px; margin-top: 20px; font-size: 19px; line-height: 54px;}
  footer > dl dd a::before{ width: 20px; height: 20px; right: 19px;}
  footer > dl dd a::after{ width: 7px; height: 10px; right: 24px;}
  
  footer > div{ padding: 32px 0 23px; position: relative;}
  
  footer > div > a{ display: block; background: rgba(0,0,0,.3); width: 45px; height: 45px; position: absolute; bottom: 0; right: 0; overflow: hidden; white-space: nowrap; text-indent: 100%; transition: background .3s linear;}
  footer > div > a:hover{ background: rgba(0,0,0,.7);}
  footer > div > a::before{ content: ""; background: url(../img/icon_arrow_white01.svg) no-repeat center/contain; width: 8px; height: 11px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg);}
  
  footer > div .f-top{ display: block; width: 980px; margin: 0 auto; overflow: hidden;}
  footer > div .f-top p{ width: 116px; float: left;}
  footer > div .f-top ul{ margin: 19px 0 0 60px; float: left;}
  footer > div .f-top ul li{ margin: 0 0 15px; float: left; line-height: 1;}
	footer > div .f-top ul li:nth-child(1),
	footer > div .f-top ul li:nth-child(2),
	footer > div .f-top ul li:nth-child(3){
		width: 110px;
	}
	footer > div .f-top ul li:nth-child(4),
	footer > div .f-top ul li:nth-child(5){
		width: 160px;
	}
  /* 
	footer > div .f-top ul li:nth-child(5)
	{ width: 160px; } */

  /* footer > div .f-top ul li:nth-child(3),
  footer > div .f-top ul li:nth-child(6)
	{ width: 100px;} */
	/* footer > div .f-top ul li:nth-child(4){
		clear: both;
	} */

  footer > div .f-top ul li a{ display: inline-block; background: url(../img/icon_arrow_white01.svg) no-repeat left center/6px 8px; padding: 0 0 0 12px; font-weight: bold; font-size: 12px; color: #fff; transition: color .2s linear;}
  footer > div .f-top ul li a:hover{ background-image: url(../img/icon_arrow_yellow01.svg); color: #ffb100;}
  
  footer > div .f-btm{ width: 980px; margin: 10px auto 0; padding-top: 20px; border-top: solid 1px rgba(255,255,255,.2); overflow: hidden;}
  footer > div .f-btm .links{ display: block; margin: 2px 0 0; float: left;}
  
  footer > div .f-btm .links li{ margin: 0; float: left;}
  footer > div .f-btm .links li:first-child{ display: block;}
  footer > div .f-btm .links li a{ padding:  0 16px 0 20px;}
  footer > div .f-btm .links li:first-child a{ padding-left: 0;}
  
  footer > div .f-btm .links li a::before{ content: ""; background: #fff; width: 1px; height: 14px; position: absolute; top: 0; left: 0;}
  footer > div .f-btm .links li:first-child a::before{ display: none;}
  
  footer > div .f-btm .sns{ margin: 0; float: right;}
  
  footer > p{ height: 80px; padding: 0 50px; line-height: 80px; text-align: right;}
}

/* ------------------------------

FAQ Banner (synario)

------------------------------ */
.bnrFawSynario{
	padding: 20px 0;
}
.bnrFawSynario .bnrFaqPc{
	display: none;
}
.bnrFawSynario img{
	display: block;
	box-shadow: 8px 8px 20px rgba(0,0,0,.1);
	max-width:100%;
}
@media print, screen and (min-width: 768px){
	.bnrFawSynario{
		padding: 20px;
	}
	.bnrFawSynario .bnrFaqPc{
		display: block;
	}
	.bnrFawSynario .bnrFaqSp{
		display: none;
	}
}
@media print, screen and (min-width: 960px){
	.bnrFawSynario{
		padding: 60px 0;
		width: 720px;
		margin: 0 auto;
	}
	.bnrFawSynario img{
		box-shadow: 8px 8px 30px rgba(0,0,0,.12);
		transition: all .3s;
	}
	.bnrFawSynario img:hover{
		cursor: pointer;
		opacity: 0.6;
	}
}