@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

/*********************************************************************
 *
 * </common/css/footer.css>
 *
 * 更新日: 2023/07/18
 *
 * ===================================================================
 * 
 *  ■概要
 *
 *  個別にfooter.cssのみを参照しているもの用
 *
 *********************************************************************/
body {-webkit-text-size-adjust: none;}

#header #pagetop, #body, #body.full-width .content .inner, #body.full-width .bread, .bottom, #footer .inner {
  position: relative;
  width: 1160px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.7;
}

#footer { font-family: "Roboto","Noto Sans JP","メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif !important; }

div#footer .utility_bottom ul{
	line-height: 1.7;
}

/*********************************************************************
 * Body
 *********************************************************************/
/*  structure
---------------------------------------------------------- */
#body {
  min-height: 400px;
  z-index: 0;
}
#body.full-width {
  width: 100%;
}
#body.full-width .gbk {
  background-color: #e9eaea;
}
#body.full-width .gbk.btm {
  padding-bottom: 10px;
}

#main {
  float: left;
  width: 700px;
  padding-bottom: 30px;
}

#sub {
  float: right;
  width: 230px;
  padding-bottom: 30px;
}

.bottom {
  clear: both;
  margin-bottom: 20px;
}

/*  Body: Breadcrumbs
---------------------------------------------------------- */
p.bread {
  padding: 18px 0;
  line-height: 1 !important;
  font-size: 92.5%;
}
p.bread a, p.bread em {
  margin: 0 8px 0 4px;
}
p.bread a {
  text-decoration: none;
}
p.bread a:hover {
  text-decoration: underline;
}
p.bread em {
  color: #595757;
}

.bottom p.bread {
  clear: both;
  padding-top: 8px;
  padding-bottom: 0;
}

/*  Body: Go to Pagetop
---------------------------------------------------------- */
p.go_pagetop {
  margin: 30px 0 26px 0;
  line-height: 1.0;
  text-align: right;
}
p.go_pagetop a {
  padding: 0 0 0 11px;
  background: url(/common/image/arrow_up.gif) no-repeat 0 0.4em;
}

.bottom p.go_pagetop {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}
.bottom p.go_pagetop a {
  padding: 0;
  background: none;
}

/*go_pagetop*/
.go_pagetop_frame { position: fixed; right: 35px; bottom: 35px; width: 50px; height: 50px; z-index: 2; display: none; }
.go_pagetop_frame p { width: 100%; height: 100%; }
.go_pagetop_frame a { width: 100%; height: 100%; align-items: center; display: flex; justify-content: center; background-color: #E6002D; border-radius: 4px; box-shadow: 1px 2px 12px -2px rgba(0, 0, 0, 0.5); }
.go_pagetop_frame a img { opacity: 1; transition: opacity 0.3s; }
.go_pagetop_frame a:hover img { opacity: 0.7; }

.go_pagetop_frame.default{
	display: block;
	opacity: 0;
	transition: opacity 0.3s;
}

.go_pagetop_frame.default.appear{
	opacity: 1;
}

/*********************************************************************
 *  Footer
 *********************************************************************/
#footer { min-width: 1160px; padding: 20px 0; background: #82888E; color: #fff; font-weight: 500; }
#footer * { box-sizing: border-box; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer ul.link li { font-size: 0.875rem; padding-left: 20px; background: url(../image/arrow_white.png) no-repeat 6px 0.4em; }
#footer ul::after { display: none; }

.footer_main { display: flex; justify-content: flex-start; line-height: 1; margin-bottom: 4.5rem; }

.footer_company_name { flex: 0 0 auto; width: 200px; }

.footer_company_name__logo { margin-top: 0.125rem; margin-bottom: 1.125rem; }

.footer_company_name__jp { font-size: 0.9375rem; }

.footer_fnav { flex: 0 0 auto; width: 800px; display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 1rem; }

.footer_fnav li { flex: 0 0 auto; width: 260px; margin-bottom: 0.9375rem; font-weight: 500; }

.footer_fnav li a { display: block; padding: 0.1875rem 0.5rem 0.1875rem 1.5rem; background: url(../image/arrow_red_large_reverse.png) no-repeat 0.125rem 0.3125rem; }

.footer_sub { position: relative; font-size: 0.875rem; }
.footer_sub .utility_bottom li { display: inline-block; margin-right: 1.5rem; }

.footer_sub__inner_info.link { position: absolute; width: 370px; right: 0px; bottom: 0px; display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0.875rem 0 0rem !important; border-top: #C0C5CC 1px solid; }
.footer_sub__inner_info.link li { flex: 0 0 auto; width: 50%; margin: 0; margin-bottom: 0.5rem;  line-height: 1.33; }
.footer_sub__inner_info.link li a { display: block; }

.footer_sns { position: absolute; width: auto; top: 0px; right: 0px; background-color: #fff; border-radius: 4px; padding: 0 0.5rem 0.375rem; }
.footer_sns .footer_sns_label { color: #6E767C; font-size: 0.75rem; line-height: 1; text-align: center; padding-top: 0.625rem; padding-bottom: 0.0625rem; }
.footer_sns ul { display: flex; justify-content: center; }
.footer_sns ul li { flex: 0 0 auto; width: 60px; height: 50px; overflow: hidden; margin: 0 0.0625rem; transition: opacity 0.3s; text-align: center; font-weight: normal; }
.footer_sns ul li:hover { opacity: 0.7; }
.footer_sns ul li a { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 50%; }
.footer_sns ul li.youtube a { background-image: url("/common/image/icon_footer_youtube_logo.svg"); }
.footer_sns ul li.twitter a { background-image: url("/common/image/icon_footer_twitter_logo.svg"); }

#copyright { border-top: #C0C5CC 1px solid; font-size: 0.8125rem; padding: 0.6875rem 0 1.25rem; margin-top: 0.75rem; font-weight: 400; }


/*********************************************************************
 * grid
 *********************************************************************/
.col {
  float: left;
}

/* grid in #main */
.l {
  margin-right: 20px;
}

.col2 .col {
  width: 340px;
}

.col3 .col {
  width: 220px;
}
.col3 .col.span-2 {
  width: 460px;
}

.col4 .col {
  width: 160px;
}
.col4 .col.span-2 {
  width: 340px;
}
.col4 .col.span-3 {
  width: 520px;
}

.col5 .col {
  width: 124px;
}
.col5 .col.span-2 {
  width: 268px;
}
.col5 .col.span-3 {
  width: 412px;
}
.col5 .col.span-4 {
  width: 556px;
}

.col6 .col {
  width: 100px;
}
.col6 .col.span-2 {
  width: 220px;
}
.col6 .col.span-3 {
  width: 340px;
}
.col6 .col.span-4 {
  width: 460px;
}
.col6 .col.span-5 {
  width: 580px;
}

/* grid in #body(full-width) */
.full-width .l {
  margin-right: 24px;
}
.full-width .col2 .col {
  width: 468px;
}
.full-width .col3 .col {
  width: 304px;
}
.full-width .col3 .col.span-2 {
  width: 632px;
}
.full-width .col4 .col {
  width: 222px;
}
.full-width .col4 .col.span-2 {
  width: 468px;
}
.full-width .col4 .col.span-3 {
  width: 714px;
}
.full-width .col6 .col {
  width: 140px;
}
.full-width .col6 .col.span-2 {
  width: 304px;
}
.full-width .col6 .col.span-3 {
  width: 468px;
}
.full-width .col6 .col.span-4 {
  width: 632px;
}
.full-width .col6 .col.span-5 {
  width: 796px;
}

.full-width .col5 .l {
  margin-right: 25px;
}
.full-width .col5 .col {
  width: 172px;
}
.full-width .col5 .col.span-2 {
  width: 369px;
}
.full-width .col5 .col.span-3 {
  width: 566px;
}
.full-width .col5 .col.span-4 {
  width: 763px;
}