@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url("../../../netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");


body {
    -webkit-text-size-adjust: 100%;
}

/*============================
#header
============================*/
#header {
    background: #fff;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
}

/*============================
#headerPC
============================*/
#headerPC {
    height: 70px;
    display: flex;
    align-items: center;
    padding-right:1rem
}

#headerPC .logo {
    width: 10%;
    margin-left: 20px;
    max-width: 110px;
}

#headerPC .logo img {
    width: 100%
}

#headerPC .nav {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

#headerPC .nav li {
    font-family: "Roboto", "Sawarabi Gothic", "Noto Sans JP";
    font-size: 0.875em;
    position: relative;
    margin-left: 16px;
    height: auto;
}

#headerPC .nav li:not(.contact):hover:after,#headerPC .nav li:not(.contact).active:after{
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    border-bottom: 4px solid #dca500;
}

#headerPC .nav li a{
    padding: 16px 4px 22px;
    font-weight: bold;
    color: #222;
}

#headerPC .nav li ul li a{
    color: #fff;
    border-bottom: 1px solid #ccc;
    width: 100%;
    display: inline-block;
    padding: 16px 4px 20px 1rem;
}

#headerPC .nav li ul li a:hover{
    border-bottom: 1px solid #dca500;
}

#headerPC .nav li.language{
    margin-left: .35rem;
}

#headerPC .nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    width: 100%;
    z-index: 100;
}

#headerPC .nav li ul li{
    background: #222;
    padding: 0 0 0 4px;
}

#headerPC .nav li ul li:hover:after{
    display: none;
}

.text-secondary a {
    color: #999 !important;
}

/* IE表示用のCSS　*/
.title-head{
    border-left: solid #4e77d3 5px;
    font-size: 1.5em;
    font-weight: bold;
    padding: 5px 0 1px 15px;
}
/* IE表示用のCSS　*/
#headerPC .nav li.contact a {
    padding: 11px;
    font-size: 1rem;
    color: #fafafa;
    background-color: #dca500;
}

/* #header #headerPC .pad .nav ul li.contact .mail img { width: 22px; padding-right: 10px; } */
/*============================
#headerSP
============================*/
#headerSP { display: none; }

/*============================
.container .contents
============================*/
/*.container { width: 1200px; margin: 0 auto; }*/
/*.contents { width: 1100px; margin: 0 50px; position: relative; }*/
/*.detail { margin-top: 60px; }*/

/*============================
#topPanelArea
============================*/
/*#topPanelArea { min-width: 1200px; }*/
#topPanelArea .container { padding: 100px 0 80px; }
/*#topPanelArea .container .contents {}*/

/*============================
#topPanelAreaMini
============================*/
/*#topPanelAreaMini { min-width: 1200px; }*/
/*#topPanelAreaMini .container { padding: 60px 0; }*/
/*#topPanelAreaMini .container .contents {}*/

/*============================
#contactArea
============================*/
#contactArea { margin-top: 80px; }
#contactArea .container {}
#contactArea .container .contents {
    border: solid #dfdfdf 1px;
    margin: 0 auto;
    /*width: 900px;*/
}
#contactArea .container .contents ul { padding: 15px 0 20px; }
#contactArea .container .contents ul li { float: left; position: relative; width: 300px; }
#contactArea .container .contents ul li .text { line-height: 1.5; margin-left: 100px; }
#contactArea .container .contents ul li .mail { border-right: solid #929292 1px; text-align: center; width: 270px; }
#contactArea .container .contents ul li .phone { font-size: 1.125em; letter-spacing: 1px; margin-right: 100px; }
#contactArea .container .contents ul li img { margin-right: 10px; vertical-align: middle; }
#contactArea .container .contents ul li a { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#contactArea .container .contents ul li a:hover { background-color: rgba(255,255,255,0.4); }
#contactArea .container .contents .formBox { padding: 30px 0; }
#contactArea .container .contents .formBox .title { text-align: center; font-size: 1.375rem; font-weight: bold; line-height: 1.5; }
#contactArea .container .contents .formBox .bigArrow { width: 65px; margin-top: 15px; margin-left: auto; margin-right: auto; }
#contactArea .container .contents .formBox .bigArrow img { width: 100%; }
#contactArea .container .contents .formBox .buttonBox { width: 360px; margin-top: 15px; margin-left: auto; margin-right: auto;background: linear-gradient(to right, #3b5fb0 , #5d9bd8); }
#contactArea .container .contents .formBox .buttonBox .buttonFlex { display: flex; align-items: center; justify-content: center; padding: 20px 0; }
#contactArea .container .contents .formBox .buttonBox .buttonFlex a { display: block; height: 65px; position: absolute; width: 360px; }
#contactArea .container .contents .formBox .buttonBox .buttonFlex .mail {width: 26px; }
#contactArea .container .contents .formBox .buttonBox .buttonFlex .mail img {width: 100%;}
#contactArea .container .contents .formBox .buttonBox .buttonFlex .text { margin-left: 15px; padding-top: none; font-size: 1.125rem; color: #fff; }
/* IE表示用のCSS　*/
_:-ms-input-placeholder, :root #contactArea .container .contents .formBox .buttonBox .buttonFlex .text { padding-top: 8px; }
#contactArea .container .contents .formBox .buttonBox .buttonFlex .arrow { width: 8px; margin-left: 45px; padding-bottom: 2px; }
#contactArea .container .contents .formBox .buttonBox .buttonFlex .arrow img { width: 100%; }
#contactArea .container .contents .formBox .tel { margin-top: 20px; text-align: center; font-size: 1.125rem; font-weight: 500;}
#contactArea .container .contents .formBox .tel a { color: #222;;}

.contact02#contactArea .container .contents .formBox .title { line-height: 1.5; }
.contact02#contactArea .container .contents .formBox .title span { font-size: 1.25em; color: #f00; }
.contact02#contactArea .container .contents .formBox .bigArrow { margin-top: 20px; }
.contact02#contactArea .container .contents .formBox .buttonBox { margin-top: 20px; }
.contact02#contactArea .container .contents .formBox .tel { margin-top: 30px; }


/*============================
#contactLinksArea
============================*/


.mod-header-contactLinks {
  z-index: 10;
}

.mod-header-contactLinks-item a {
  display: block;
  color: #fff;
  line-height: 1;
}

.mod-header-contactLinks-item.item-contact {
  margin-bottom: 10px;
}

.mod-header-contactLinks-item.item-contact a {
    /*background: #8fb1ff;*/
    background: linear-gradient(to bottom, #3b5fb0 , #5d9bd8);
}

.mod-header-contactLinks-item.item-contact a:hover{
    background: #356ef0;
}

.mod-header-contactLinks-item.item-bosyu a {
    /*background: #8fb1ff;*/
    background: linear-gradient(to bottom, #3b5fb0 , #5d9bd8);
    height: auto;
}

.mod-header-contactLinks-item.item-bosyu a:hover {
    background: #356ef0;
}

.mod-header-contactLinks-item img {
  width: 32px;
  margin-bottom: 7px;
}

.mod-header-contactLinks {
  position: fixed;
  width: 62px;
  right: 20px;
  /*top: 140px;*/
    top: 50px;
  transform: translateX(105%);
  transition: .4s;
}
.item-contact a {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    height: fit-content;
    padding: 15px;
}
.item-bosyu a {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  height: 142px;
  padding: 15px;
}
.mod-header-contactLinks-item div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mod-header-contactLinks-item.item-bosyu div {
  margin-top: -5px;
}
.mod-header-contactLinks-item div span {
  display: block;
  color: #fff;
  line-height: 1;
  font-size: 15px;
  font-weight: bold;
  letter-spacing : 2px;
}

/* IE表示用のCSS　*/
_:-ms-input-placeholder, :root .mod-header-contactLinks-item div span { padding-right: 4px; }

.mod-header-contactLinks.is-show {
  -webkit-transform: none;
  transform: none;
}

/*============================
#pankuzuArea
============================*/
#pankuzuArea { border-bottom: dashed 1px #dfdfdf; padding: 18px 0 16px; }
#pankuzuArea ul { margin: 0 auto; }
#pankuzuArea ul li { font-size: 0.875em; float: left; display: inline-block; margin-right: 40px; }
#pankuzuArea ul li a { display: inline-block; position: relative; white-space: nowrap; color: #999; }
#pankuzuArea ul li a:after { position: absolute; right: -25px; top: 2px; content:">"; font-size: 0.75em; color: #999; }
#pankuzuArea ul li span { font-size: 0.75em; }

/*============================
#topMsgArea
============================*/
#topMsgArea { margin: 60px 0 0; }
#topMsgArea .container {}
#topMsgArea .container .contents {}
#topMsgArea .container .contents .textTitle { display: block; margin: auto; text-align: center; font-size: 1.625rem; font-weight: bold; line-height: 1.5; }
#topMsgArea .container .contents .text { line-height: 1.5; text-align: center; }
#topMsgArea .container .contents .text:nth-child(2n) { margin-top: 30px; }
#topMsgArea .container .contents .images { margin-top: 38px; }
#topMsgArea .container .contents .images ul {}
#topMsgArea .container .contents .images ul li { float: left; margin-right: 20px; width: 353px; }
#topMsgArea .container .contents .images ul li.last { margin-right: 0; }
#topMsgArea .container .contents .images ul li img {}
#topMsgArea .container .contents .example { margin-top: 38px; }
#topMsgArea .container .contents .example ul li { float: left; width: 530px; margin-right: 40px; border: solid 1px #ddd; padding: 30px; box-sizing: border-box; }
#topMsgArea .container .contents .example ul li:nth-child(2n) { margin-right: 0; }
#topMsgArea .container .contents .example ul li .title { background: #345; color: #fff; font-weight: bold; text-align: center; padding: 8px 0; font-size: 1.125em; }
#topMsgArea .container .contents .example ul li .data { padding-top: 5px; }
#topMsgArea .container .contents .example ul li .data ul li { width: 180px; margin-right: 20px; margin-left: 20px; margin-top: 20px; font-size: 1.125em; font-weight: bold; border: none; padding: 0; }
#topMsgArea .container .contents .example ul li .data ul li:nth-child(2n) { width: 240px; margin-right: 0; margin-left: 0; }
#topMsgArea .container .contents .example ul li:nth-child(2n) .data ul li { width: 130px; margin-left: 60px; }
#topMsgArea .container .contents .example ul li:nth-child(2n) .data ul li:nth-child(2n) { width: 180px; margin-left: 20px; }
/*============================
#pageLink
============================*/
#pageLink { position: fixed; bottom: 0; right: 53px; z-index: 99; }
#pageLink .js_pageTop { width: 99px; height: 65px; }
#pageLink .js_pageTop a { display: block; width: 99px; height: 65px; background: url(../../images/icon_pageTop_vi.png) no-repeat center; text-indent: -9999px; }

/*============================
#footer
============================*/
#footer { background-color: #f7f7f5; margin-top: 50px; padding-top: 50px; min-width: 1200px; }
#footer .container { margin: 0 auto; width: 1200px; }
#footer .container .contents { margin: 0 50px; position: relative; width: 1100px; }
#footer .container .contents .bannerArea {}
#footer .container .contents .bannerArea ul {}
#footer .container .contents .bannerArea ul li { float: left; position: relative; margin-right: 2%; width: 32%; }
#footer .container .contents .bannerArea ul li:last-child { margin-right: 0; }
#footer .container .contents .bannerArea ul li img {}

#footer .container .contents .footerNav { margin-top: 50px; float: left; margin-right: 2%; position: relative; width: 65.33%; }
#footer .container .contents .footerNav {}
#footer .container .contents .footerNav li { float: left; position: relative; }
#footer .container .contents .footerNav li a { color: #555; font-weight: bold; display: block; margin-top: 20px; }
#footer .container .contents .footerNav li a:first-child { margin-top: 0; }
#footer .container .contents .footerNav li a.child {}
#footer .container .contents .footerNav li a.child:before { content: "┗"; margin-right: 5px; }

#footer .container .contents .contact { float: left; margin-top: 70px; margin-left: 32px; position: relative; width: 26.66%; }
#footer .container .contents .contact .text { font-size: 0.875em; margin-left: 40px; }
#footer .container .contents .contact .phone { border-right: #dca500 solid 2px; float: left; font-family: 'Roboto', sans-serif; font-size: 1.714em; margin-top: 10px; margin-left: 40px; padding-right: 15px; }
#footer .container .contents .contact .phone a { color: #dca500; margin-bottom: 0; }
#footer .container .contents .contact .mail { float: left; margin-left: 15px; margin-top: 10px; }
#footer .container .contents .contact .mail a { margin-bottom: 0; }
#footer .container .contents .contact .mail a img { width: 33px; }

#footer .container .contents .banner { float: left; margin-top: 46px; margin-left: 10px; position: relative; width: 20.66%; }
#footer .container .contents .contact a {}
#footer .container .contents .contact a img { width: 33px; }

#footer .container .contents .copyright { clear: both; font-size: 0.875em; line-height: 1.5; padding-top: 60px; padding-bottom: 30px; text-align: center; }
#footer .container .contents .copyright br:first-child { display: none; }