@charset "UTF-8";
/*********************************
common
*********************************/
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}

body {
  font-family: Arial,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  margin: 0;
  padding: 0;
  min-width: 1096px;
  height: 100%;
  min-height: 100%;
  background: #ffffff;
}

body > div {
  font-size: 1.5rem;
  line-height: 1.5;
}

/*----- common parts -----*/
a {
  color: #2060d4;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}
a.line {
  text-decoration: underline;
}

img {
  border: none;
}

input, button {
  cursor: pointer;
}

/*********************************
common wrappers
*********************************/
#wrapper {
  padding: 8px 0 30px;
  width: 100%;
}

#contents {
  position: relative;
  margin: 0 auto;
  width: 1096px;
  min-width: 1096px;
/*  overflow: hidden;*/
}


#contents-header {
  margin: 0 auto;
  width: 1096px;
  min-width: 1096px;
  overflow: hidden;
}

/* common wrappers-end */
/*********************************
header
*********************************/
header.public {
  width: 100%;
  height: 41px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 1.4rem;
  border-bottom: 1px solid #dddddd;
}
header.public-extend {
  width: 100%;
  height: 51px;
  background: #303030;
  box-sizing: border-box;
  font-size: 1.4rem;
  border-bottom: 1px solid #dddddd;
}
#header-nav_second {
  margin: 0 auto;
  padding-top: 3px;
  width: 1096px;
  align-items: center;
  overflow: hidden;
}
#header-nav_second nav {
  padding-right: 350px;
  padding-left: 140px;
}

/*----- left content -----*/
#header-nav {
  margin: 0 auto;
  width: 1096px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.header-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header-nav-item, .logo {
  float: left;
  margin-right: 30px;
  height: 40px;
  line-height: 40px;
  border: none;
}
.logo img {
  vertical-align: middle;
}

/*----- right content -----*/
#header-nav #login-status {
  margin-left: auto;
}

.login-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.login-status-list li {
  margin-left: 10px;
  width: 146px;
  float: left;
}

.login-status-list a {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 33px;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
}

.login-status-list #login {
  color: #303030;
  border: 1px solid #b8b8b8;
}
.login-status-list #login:hover {
  background: #f7f7f7;
}
.login-status-list #logout {
  color: #303030;
  border: 1px solid #b8b8b8;
}
.login-status-list #logout:hover {
  background: #f7f7f7;
}
.login-status-list #newreg {
  color: #ffffff;
  background: #2996cc;
  border: 1px solid #2996cc;
}
.login-status-list #newreg:hover {
  background: #208dc3;
}
.login-status-list #mypage {
  color: #ffffff;
  background: #2996cc;
  border: 1px solid #2996cc;
}
.login-status-list #mypage:hover {
  background: #208dc3;
}

/* header-end */
/*********************************
footer
*********************************/
footer {
  font-family: Arial,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  background: #303030;
  color: #ffffff;
  line-height: normal;
}

#footer-nav {
  margin: 0 auto;
  padding: 2rem 0;
  width: 1096px;
  min-width: 1096px;
  font-size: 1.4rem;
  box-sizing: border-box;
}

#footer-nav nav {
  margin-left: 30px;
  display: flex;
  flex-wrap: wrap;
}
.footer-nav_box {
  margin: 5px 30px 5px 0;
  width: calc(100%/4 - 40px);
}
.footer-nav-list {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}
.footer-nav-list li {
  margin: 0 0 5px 1em;
  padding: 0;
  text-indent: -1em;
  box-sizing: border-box;
}
.footer-nav-list li::before {
  font-family: FontAwesome;
/*  content: "\f105";*/
  content: "\f101";
  font-size: 1.6rem;
  margin-right: 5px;
  color: #c1c1c1;
}
.footer-nav-list li a {
  color: #ffffff;
}
.footer-nav-list .footer-nav-title {
  margin: 0 0 10px;
  padding: 3px;
  text-indent: 0;
  font-weight: bold;
  border-bottom: 1px dotted #8e8e8e;
}
.footer-nav-list .footer-nav-title::before {
  display: none;
}

.footer-nav-list .children1 {
  margin-left: 2em;
}
.footer-nav-list .children1::before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 1.6rem;
  margin-right: 5px;
  color: #c1c1c1;
}

/*----- copy -----*/
footer #copy {
  margin: 0;
  padding: 4px 0;
  color: #999999;
  font-size: 1.4rem;
  text-align: center;
  box-sizing: border-box;
}

#copy p {
  margin: 0;
}

/* footer-end */
/*********************************
caption
*********************************/
.caption {
  margin: 0 0 1em 0;
  background: #e6e6e6;
  font-size: 1.4rem;
}

/* caption-end */
/*********************************
bread
*********************************/
#bread ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

#bread li {
  float: left;
  font-size: 1.4rem;
  color: #8e8e8e;
}
#bread li:not(:last-child)::after {
  font-family: "FontAwesome";
  content: "\f105";
  margin: 0 7px;
  font-size: 1.5rem;
}
#bread strong {
  color: #303030;
}

/* bread-end */
/*********************************
page column layout
*********************************/
/*----- one column -----*/
.page-main {
  width: 100%;
  box-sizing: border-box;
}

/*----- two column -----*/
[class*="page-column"] {
  display: flex;
  margin-bottom: 10px;
}

.page-column .page-main,
.page-column .page-header-main {
  width: calc(100% - 310px);
  box-sizing: border-box;
}

.page-side,
.page-header-side {
  margin-left: 10px;
  flex-basis: 300px;
  box-sizing: border-box;
}

/*--- page side 2 ---*/

.page-column2 .page-main,
.page-column2 .page-header-main {
  width: calc(100% - 250px);
  box-sizing: border-box;
}

.page-side2,
.page-header-side2 {
  margin-left: 10px;
  flex-basis: 240px;
  box-sizing: border-box;
}

/*--- page side 3 ---*/
.page-column3 .page-main,
.page-column3 .page-header-main {
  width: calc(100% - 210px);
  box-sizing: border-box;
}

.page-side3,
.page-header-side3 {
  margin-left: 10px;
  flex-basis: 210px;
  box-sizing: border-box;
}

/* page column layout-end */
/*********************************
page-side
*********************************/
.side-banner {
  padding: 10px 0;
  line-height: 0;
  text-align: center;
}
.side-banner a {
  display: inline-block;
  margin-bottom: 6px;
}
.side-banner a:last-child {
  margin-bottom: 0;
}

/*----- side menu box -----*/
.side-menu-box {
  margin: 0 0 10px;
  border: 1px solid #303030;
}

.side-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  letter-spacing: 0.05em;
}

.side-menu-title {
  padding: 4px 8px;
  color: #ffffff;
  background: #303030;
  box-sizing: border-box;
}

.side-menu-list a {
  display: block;
  padding: 4px 8px;
  font-size: 1.4rem;
  box-sizing: border-box;
}
.side-menu-list a:hover {
  background: #c6e2ff;
}
.side-menu-list a::before {
  font-family: "FontAwesome";
  content: "\f105";
  margin-right: 5px;
  font-size: 1.4rem;
  color: #8e8e8e;
  line-height: 1.5;
}

.side-menu-list [class*="children"] a {
  padding-left: 2.5em;
  background: no-repeat 1.5em;
  line-height: 1.1;
}
.side-menu-list [class*="children"] a:hover {
  background-color: #c6e2ff;
}
.side-menu-list [class*="children"] a::before {
  display: none;
}
.side-menu-list .children1 a {
  background-image: url(/img/pc/arrows/ruled_line1.png);
}
.side-menu-list .children2 a {
  background-image: url(/img/pc/arrows/ruled_line2.png);
}


/* page-side-end */
/*********************************
base helpers
*********************************/
/* float */
.float-left {float: left;}
.float-right {float: right;}
.float-clear {
  clear:both;
  overflow: hidden;
}

/* align */
.align-left {text-align: left;}
.align-right {text-align: right;}
.align-center {text-align: center;}
.align-middle {vertical-align: middle;}

.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.middle {vertical-align: middle;}

/* font size */
.large {font-size: 111%;}
.large1 {font-size: 111%;}
.large2 {font-size: 111%;}
.exlarge {font-size: 127%;}
.exlarge1 {font-size: 148%;}
.exlarge2 {font-size: 186%;}
.small {font-size: 94%;}
.small1 {font-size: 88%;}
.small2 {font-size: 82%;}
.exsmall {font-size: 76%;}
.exsmall1 {font-size: 70%;}
.exsmall2 {font-size: 64%;}

.strong {font-weight: bold;}

/* text color */
.red {color: #f00000;}
.blue {color: #0000f0;}
.gray {color: #8e8e8e;}
.lgray1 {color: #cccccc;}
.dgray1 {color: #696969;}
.black1 {color: #303030;}

/* bg color */
.bg-black {background: #303030;}
.bg-white {background: #ffffff;}
.bg-lgray1 {background: #ffefef;}
.bg-lblue1 {background: #beeaff;}

/* spacer */
.spacer10 {height: 10px;}
.spacer20 {height: 20px;}
.spacer50 {height: 50px;}

/* line-height */
.l-height_17 {
  line-height: 1.7;
}

/*----- margin -----*/
.m-none {margin: 0px;}
.mt-none {margin-top: 0px;}
.mb-none {margin-bottom: 0px;}
.ml-none {margin-left: 0px;}
.mr-none {margin-right: 0px;}


/*********************************
display
*********************************/
.hide {
  display: none;
}

/*********************************
UA切り替えコンポーネント
*********************************/
#_ua-switcher {
  width: 350px;
  height: 31px;
  margin: 0 auto 10px;
  color: #000000;
  padding: 8px 0;
  font-size: 1.2rem;
  box-sizing: content-box;
  line-height: 1.5;
}
#_ua-switcher a {
  cursor: pointer;
}
#_ua-switcher ._title {
  height: 100%;
  width: 25%;
  padding: 6px;
  background: #cf000c;
  color: #ffffff;
  box-sizing: border-box;
  font-weight: bold;
}
#_ua-switcher ._switch {
  height: 100%;
  width: 75%;
  padding: 6px;
  background: #e6e6e6;
  box-sizing: border-box;
}
#_ua-switcher ._switch div {
  width: 47%;
  box-sizing: border-box;
}
#_ua-switcher ._switch .float-left {
  padding-left: 2px;
}
#_ua-switcher ._switch .float-right {
  padding-right: 2px;
}