@charset "UTF-8";

/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ max-width: 100%; height: auto; vertical-align: top;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Clearfix
---------------------------------------------------------- */
.clearfix
{
	display: block;
	min-height: 1%;
}
.clearfix:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix
{
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

a { color: #003399;}
a:hover { color: #ff6633;}

@media screen and (min-width:751px){

  .pc-none { display: none;}
  
  .sp-none { display: block;}

}

@media screen and (max-width:750px){
  
  .sp-none { display: none;}
  
  .pc-none { display: block;}
  
}

/*
======================================================
  body
--------------------------------------------------- */

html { font-size: 62.5%;}

body {
	-webkit-text-size-adjust: none;
	line-height: 1;
	color: #424242;
	font-size: 14px;
	font-size: 1.4rem;
}

body.ja {
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

body.en {
  font-family: 'Tahoma', 'Arial', sans-serif;
}



/*
======================================================
  header
--------------------------------------------------- */

/* ヘッダ
---------------------------------------------------- */

@media screen and (min-width:751px){

  .top-bar-wrap {
    background-color: #fff;
    position: relative;
    height: 64px;
  }
  
  .top-bar-wrap-inner {
    width: 960px;
    margin: 0 auto;
  	overflow: hidden;
  }

}

@media screen and (max-width:750px){
  
  .site-header { position: relative;}

  .top-bar-wrap {
    height: 45px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  
  .top-bar-wrap-inner {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	height: 45px;
  }

}

/* ヘッダ（左）
---------------------------------------------------- */

@media screen and (min-width:751px){

  .left-widget-wrap {
  	width: 500px;
  	float: left;
  	overflow: hidden;
  }
  
  body.en .left-widget-wrap {
  	width: 730px;
  	float: left;
  	overflow: hidden;
  }
  
  .brand-logo {
    float: left;
    width: 161px;
    margin-right: 48px;
  }
  
  .header-site-logo {
    float: left;
    width: 290px;
    padding-top: 22px;
  }
  
  body.en .header-site-logo {
    float: left;
  }

}

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

  .left-widget-wrap {
  	display: flex;
  	align-items: center;
  }
  
  .brand-logo-sp { margin-left: 8px; margin-right: 8px;}
  
  .brand-logo-sp img { height: 30px; width: auto;}
  
  .header-site-logo img { height: 10px; width: auto;}
  
  .header-site-logo-sp { text-align: center; margin-top: 12px; margin-bottom: 12px;}

  .btn-menu {
    width: 45px;
    height: 45px;
    text-align: center;
    border-left: 1px solid #ccc;
  }
  
  .btn-menu i {
    font-size: 24px;
    margin-top: 10px;
  }

}

/* ヘッダ（右）
---------------------------------------------------- */
@media screen and (min-width:751px){
  
  .right-widget-wrap {
    float: right;
    width: 220px;
    padding-top: 10px;
  }
  
  ul.head-navi {
  	text-align: right;
  	justify-content: flex-end;
  	font-size: 11px;
  	font-size: 1.1rem;
  	line-height: 2;
  }
  
  ul.head-navi li.head-navi-lang { width: 100%;}
  
  ul.head-navi li.head-navi-contact,
  ul.head-navi li.head-navi-sitemap {
    display: inline-block;
    margin-left: 15px;
  }
  
  ul.head-navi li a {
    background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_arrow.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding: 2px 0 2px 8px;
  }
  
  ul.head-navi li.head-navi-contact a,
  ul.head-navi li.head-navi-contact span {
    background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_contact.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 16px;
  }
  
  ul.head-navi li.head-navi-sitemap a,
  ul.head-navi li.head-navi-sitemap span {
    background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_sitemap.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 16px;
  }

}


/*
======================================================
  グローバルナビ（PC）
--------------------------------------------------- */

@media screen and (min-width:751px){

  .gnav-wrap-pc {
    background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/gnav_back.png);
    background-repeat: repeat-x;
    background-position: center top;
    height: 54px;
  }
  
  ul.pc-menu {
  	overflow: hidden;
    text-align: center;
    width: 960px;
    margin: 0 auto;
  }
  
  ul.pc-menu li {
    float: left;
    width: 160px;
    position: relative;
  }
  
  ul.pc-menu li a {
    display: block;
    text-decoration: none;
    color: #424242;
    padding: 20px 10px;
    border-left: 1px solid #a0a0a0;
    background-color: transparent;
  }
  
  body.en ul.pc-menu li a {
    padding: 10px 10px;
    min-height: 54px;
    vertical-align: middle;
    line-height: 1.2;
  }
  
  body.en ul.pc-menu li.home a { padding-top: 18px;}
  
  ul.pc-menu li:last-child a { border-right: 1px solid #a0a0a0;}
  
  ul.pc-menu li a:hover {
    background-color: #424242;
    color: #fff;
  }
  
  ul.pc-menu li a.current { color: #f30034;}
  
  /* 赤いラインの出現
  ---------------------------------------------------- */
  ul.pc-menu li:before,
  ul.pc-menu li:after {
    position: absolute;
    top: 2.8em;
    content: "";
    display: inline-block;
    width: 0;
    height: 2px; 
    background: #F30034;
    -webkit-transition: all .4s linear;
  }

  body.en ul.pc-menu li:before,
  body.en ul.pc-menu li:after {
    top: 3.2em;
  }
  
  ul.pc-menu li.dropdown ul li:before,
  ul.pc-menu li.dropdown ul li:after {
    background: none;
  }
  
  ul.pc-menu li:before {
    left: 50%;
  }
  
  ul.pc-menu li:after {
    right: 50%;
  }
  
  ul.pc-menu li:hover:before,
  ul.pc-menu li:hover:after {
    width: 42%;
  }
  
  /* ドロップダウンメニュー
  ---------------------------------------------------- */
  ul.pc-menu li.dropdown ul {
    position: relative;
    display: none;
    width: 300px;
    border: none;
    clear: both;
    top: 0px;
    padding: 5px 0 0 0;
    background-color: #b5b5b5;
    z-index: 9999;
  }
  
  ul.pc-menu li.dropdown ul li {
    width: 100%;
    border: none;
    display: inline-block;
    clear: both;
    text-align: left;
    background-color: #b5b5b5;
    padding: 0 5px;
  }
  
  ul.pc-menu li.dropdown ul li a {
    display: inline-block;
    width: 100%;
    background-color: #b5b5b5;
    line-height: 1.3;
    border: none;
    background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_dropdown_off.png);
    background-repeat: no-repeat;
    background-position: 10px 16px;
    padding: 10px 10px 10px 22px;
    -webkit-transition: all .3s linear;
    margin: 0 0 5px 0;
  }
  
  body.en ul.pc-menu li.dropdown ul li a { min-height: auto;}
  
  ul.pc-menu li.dropdown ul li a:hover {
    background-color: #424242;
    color: #fff;
    background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_dropdown_on.png);
  }

}

  .gnav-wrap-sp { display: none;}

/*
======================================================
  グローバルナビ（スマホ）
--------------------------------------------------- */
@media screen and (max-width:750px){
  
  .gnav-wrap-pc { display: none;}
  
  .gnav-wrap-sp {
    display: block;
    width: 100%;
    background-color: #ccc;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.5;
    position: absolute;
    top: 45px;
    z-index: 100;
  }
  
  .gnav-wrap-sp a {
    text-decoration: none;
  }
  
  ul.sp-menu {
    background-color: #4c4c4c;
  }
  
  ul.sp-menu li {
    border-bottom: 1px solid #6f6f6f;
  }
  
  ul.sp-menu li a {
    display: block;
    color: #fff;
    padding: 10px;
    position: relative;
  }

  ul.sp-menu li a::after {
  	position: absolute;
  	top: 50%;
  	right: 8px;
  	margin-top: -12px;
  	font-family: 'FontAwesome';
  	content: "\f105"; /* 右向き矢印 */
  	color: #e3e3e3;
  }

  ul.sp-menu li a span,
  ul.sp-menu li dl.ac-menu dt span {
    border-left: 2px solid #ff0000;
    padding: 0 0 0 10px;
  }
  
  ul.sp-menu li dl.ac-menu dt {
    padding: 10px;
    position: relative;
  }
  
  ul.sp-menu li dl.ac-menu dt::after {
  	position: absolute;
  	top: 50%;
  	right: 8px;
  	margin-top: -12px;
  	font-family: 'FontAwesome';
  	content: "\f107"; /* 下向き矢印 */
  	color: #e3e3e3;
  }

  ul.sp-menu li dl.ac-menu dd {
  	display: none;
  	padding: 0 15px;
	}

  ul.sp-menu li dl.ac-menu dt.active::after {
  	position: absolute;
  	top: 50%;
  	right: 8px;
  	margin-top: -12px;
  	font-family: 'FontAwesome';
  	content: "\f106"; /* 上向き矢印 */
  	color: #e3e3e3;
	}
	
	ul.sp-menu li dl.ac-menu dd ul li {
  	border-bottom: none;
  	border-top: 1px solid #6f6f6f;
	}
	
	ul.sp-menu-under {
  	background-color: #fff;
  	padding: 0 15px;
  }
	
	ul.sp-menu-under li { border-top: 1px solid #ccc;}
	
	ul.sp-menu-under li:first-child { border-top: none;}

	ul.sp-menu-under li a {
  	display: block;
    padding: 10px 0;
    position: relative;
    color: #424242;
    font-size: 1.4rem;
	}
	
  ul.sp-menu-under li a::after {
  	position: absolute;
  	top: 50%;
  	right: 8px;
  	margin-top: -12px;
  	font-family: 'FontAwesome';
  	content: "\f105"; /* 右向き矢印 */
  	color: #424242;
  }

	.close-btn-wrap {
  	text-align: center;
  	padding-top: 10px;
  	border-bottom: 3px solid #808080;
	}
	
	a.close-btn {
  	background-color: #808080;
  	display: inline-block;
  	padding: 13px 20px 10px 20px;
  	font-size: 1.4rem;
  	color: #fff;
	}
	
	a.close-btn i { margin-right: 8px;}

}

/*
======================================================
  rcrumbs
--------------------------------------------------- */
.hs-breadcrumb-menu-item{
	display: inline-block;
	float:none!important;
	padding:0!important;
	color: #8c989f;
}
.breadcrumb-area,
.container .hs-breadcrumb-menu{
	margin: 0 0 50px 0;
}

.breadcrumb-area li:after,
.container .hs-breadcrumb-menu li .hs-breadcrumb-menu-divider:after{
	content: "/";
	padding: 0 10px;
}
.container .hs-breadcrumb-menu li .hs-breadcrumb-menu-divider:before{
	display:none;
}
.breadcrumb-area li:last-child:after,
.container .hs-breadcrumb-menu li:last-child .hs-breadcrumb-menu-divider:after{
	display: none;
}
.hs-breadcrumb-menu .divider{
    padding:0 10px;
}
.rcrumbs {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.rcrumbs > ul {
  padding: 0;
  list-style: none;
}
.rcrumbs > ul > li {
  overflow: hidden;
  display: none;
}
.rcrumbs > ul > li.showb {
  display: inline-block!important;
}
.rcrumbs > ul > li.ellipsis {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
#frr-breadcrumb {
    padding:39px 0;
}
#frr-breadcrumb-en {
    padding:46px 0;
}
#breadcrumb p {
	font-size: 13px;
	line-height: 14px;
	color:#3e434a;
	margin-bottom:0;
}


/*
======================================================
  content
--------------------------------------------------- */




/*
======================================================
  side
--------------------------------------------------- */


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

/* トップへ戻るボタン
---------------------------------------------------- */

.to-top,
.to-top-sp { position: fixed }

@media screen and (min-width:751px){

  .to-top {
    bottom: 40px;
    right: 50px;
  }
  
  .to-top-sp { display: none;}

}

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

  .to-top-sp {
    bottom: 15px;
    right: 15px;
  }

  .to-top { display: none;}
 
}

.to-top a,
.to-top-sp a {
  display: block;
  margin-left: auto;
  width: 60px;
  background-color: #424242;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border: 1px solid #fff;
  padding: 1px 0 6px 0;
	border-radius: 4px; /* CSS3草案 */
	-webkit-border-radius: 4px; /* Safari,Google Chrome用 */
	-moz-border-radius: 4px; /* Firefox用 */
	font-size: 12px;
	font-size: 1.2rem;
}

.to-top a i,
.to-top-sp a i {
  display: block;
  margin-bottom: 1px;
}


/* SNSボタン
---------------------------------------------------- */

@media screen and (min-width:751px){
  
  .sns {
    padding: 45px 0 45px 0;
    text-align: center;
  }
  
  .sns ul li {
    display: inline-block;
    margin: 0 20px;
  }
  
  .sns ul li img { width: 48px;}
  
  .sns p { text-align: center; margin-bottom: 10px; }

}

@media screen and (max-width:750px){
  
  .sns { padding: 15px 0 15px 0;}
  
  .sns ul {
    display: flex;
    justify-content: center;
    padding: 0 25px;
  }
  
  .sns ul li { margin: 0 5px;}

  .sns ul li img { width: 48px;}
  
  .sns p { text-align: center; margin-bottom: 10px; }

}

/* フッター（上部）
---------------------------------------------------- */
.footer-top {
  background-color: #424242;
  color: #fff;
}

@media screen and (min-width:751px){

  .footer-top {
    text-align: center;
    padding: 25px 0 10px 0;
  }
  
  .footer-top ul { margin-bottom: 40px;}
  
  .footer-top ul li {
    display: inline-block;
    margin: 0 25px;
  }

}

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

  .footer-top {
    text-align: left;
  }
  
  .footer-top ul li {
    padding: 12px 15px;
    border-bottom: 1px solid #6f6f6f;
  }

}

.footer-top ul li a {
  color: #fff;
  text-decoration: none;
}

.footer-top ul li a:hover { text-decoration: underline;}

.footer-top ul li.out a {
  background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_window_white.png);
  background-repeat: no-repeat;
  background-position: right center;
  padding: 0 22px 0 0;
}

.footer-top p.out {
  font-size: 10px;
  font-size: 1.0rem;
  background-image: url(https://cdn2.hubspot.net/hubfs/384373/tf-2017/icon_window_white.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 2px 0 2px 22px;
}

.out span {
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 0px;
}

@media screen and (min-width:751px){

  .footer-top p.out {
    width: 960px;
    text-align: left;
    margin: 0 auto;
  }

}

@media screen and (max-width:750px){
  
  .footer-top p.out {
    background-position: left 2px;
    margin: 10px 15px;
    line-height: 1.6;
    padding-bottom: 10px;
  }
}

@media screen and (min-width:751px){

  .footer-bottom {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
  	padding: 8px 0;
  }

  .footer-bottom ul {
  	width: 50%;
  	float: left;
    font-size: 10px;
    font-size: 1.0rem;
  }
  
  .footer-bottom ul li {
    display: inline-block;
    margin-right: 10px;
  }

}

@media screen and (max-width:750px){
  
  .footer-bottom {
    text-align: center;
    padding: 10px;
  }

  .footer-bottom ul {
  	display: flex;
    font-size: 1.2rem;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .footer-bottom ul li:first-child { margin-right: 20px;}
  
  .footer-site-logo { text-align: center; margin-bottom: 12px;}
  
  body.jp .footer-site-logo img { width: 290px;}
  
  body.en .footer-site-logo img { width: 300px;}

}

.footer-bottom p.copyright {
  font-size: 10px;
  font-size: 1.0rem;
}

@media screen and (min-width:751px){

  .footer-bottom p.copyright {
  	width: 50%;
  	float: right;
  	text-align: right;
  }

}

@media screen and (max-width:750px){
  
  .footer-bottom p.copyright {
    line-height: 1.6;
  }

}