@charset "utf-8";

/*==================================================
$common
==================================================*/
html {
  font-size: 62.5%;
}

body {
  margin: 0 auto;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1.7;
  background: #fff;
  position: relative;
  color: #333;
  font-family: 'Noto Sans JP', "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.08em;
}

a {
  color: inherit;
  text-decoration: none;
}

a[href^="tel:"] {
  pointer-events: none;
}

.nopc {
  display: none !important;
}

img {
  max-width: 100%;
}

/*==================================================
$header
==================================================*/
body.navopen .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  z-index: 10;
  cursor: pointer;
}

header {
  background: #fff;
  width: 100%;
  position: fixed;
  z-index: 15;
  border-bottom: solid 1px #DDDDDD;
  min-width: 945px;
}

header.fixed .groupmenu {
  display: none;
}

header .logo {
  position: absolute;
  top: 15%;
  left: 5%;
}

header .burger {
  display: none;
}

/*210118ここから*/
header .navmenu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}

/*210118ここまで*/
header .navmenu .spmenu {
  display: none;
}

.subnav {
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
}

.subnav ul li.contact,
.subnav ul li.form {
  display: none;
}

.btn_login {
  position: absolute;
  right: 300px;
  top: 15px;
}
.btn_login.login_entrance {
  right: 440px;
}
.btn_login::before {
  content: '';
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 20px;
}

.btn_certificate::before {
  background-image: url(../img/pencil.svg);
  width: 16px;
  height: 15px;
}

.btn_login::before {
  background-image: url(../img/document.svg);
  width: 14px;
  height: 18px;
}
.btn_login.login_entrance::before {
  background-image: url(../img/pencil.svg);
  width: 18px;
  height: 18px;
}

.btn_download::before {
  background-image: url(../img/download.svg);
  width: 16px;
  height: 15px;
}

.btn04 {
  background-color: #F0F4F8;
  padding: 15px 20px 15px 45px;
  border-radius: 100px;
  width: 100%;
  display: block;
}

.btn04:hover {
  text-decoration: underline;
}

.tel {
  background-color: #00458B;
  color: #fff;
  padding: 15px 30px 15px 15px;
  position: relative;
}

header .tel:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: -35px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 35px transparent;
  border-bottom: solid 80px #00458B;
}

.tel span {
  font-size: 11px;
  display: block;
}

.tel a {
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-family: 'Signika', sans-serif;
  font-size: 2.6rem;
}

.tel:last-child a {}

.tel a::before {
  content: '';
  width: 23px;
  height: 23px;
  background: url(../img/tel.svg) no-repeat center/contain;
  margin-right: 5px;
}

.tel small {
  margin-left: 30px;
}

.mainnav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 78px auto 0;
}

.mainnav dl {
  width: 100%;
}

.mainnav dl dd li:not(.image) a:hover,
.mainnav dl dd .catelink a:hover {
  text-decoration: underline;
}

.mainnav .headerinner {
  align-items: flex-start;
}

.mainnav dl dt {
  font-size: 15px;
  font-weight: bold;
  height: 100%;
  position: relative;
}

.mainnav dl dt::before {
  content: '';
  background-color: #DDDDDD;
  width: 1px;
  height: 26px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.mainnav dl dt a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 1.5;
  text-align: center;
  padding: 20px 0;
  transition: .3s;
}

.mainnav dl dt a:hover {
  opacity: 0.7;
}

.mainnav dl.dropdown dt a::after {
  content: '';
  width: 0px;
  height: 0;
  border-style: solid;
  border-width: 5px 3px 0px 3px;
  margin: auto;
  border-color: #00458B transparent transparent transparent;
  position: absolute;
  right: 30px;
}

.mainnav dl.dropdown dt.active a::after {
}

.mainnav dl dd {
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  padding: 20px 0;
}

.mainnav dl dt.active+dd {
  opacity: 1;
  pointer-events: auto;
}

.mainnav dl dd .catelink {
  display: block;
  width: 100%;
  text-align: center;
}

.mainnav dl dd .catelink.tar {
  margin-bottom: 30px;
}

.mainnav dl dd .catelink a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  margin: auto;
  border-color: transparent transparent transparent #00458B;
  margin-left: 10px;
  margin-bottom: 3px;
}

.mainnav dl dd ul:not(.child) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.mainnav dl dd ul:not(.child)>li {
  max-width: 255px;
  width: 24%;
  margin: 0 1%;
}

.mainnav dl dd ul li.image {
  text-align: center;
  background: #fff;
}

.mainnav dl dd ul li.image a {
  display: block;
  padding: 10px 0 125px;
  font-size: 15px;
  font-weight: bold;
}

.mainnav dl dd ul li.image.strength a {
  background: url(../img/gnav_strength.jpg) no-repeat center bottom/contain;
}

.mainnav dl dd ul li.image.proposal a {
  background: url(../img/gnav_proposal.jpg) no-repeat center bottom/contain;
}

.mainnav dl dd ul li.image.renaiss a {
  background: url(../img/gnav_renaiss.jpg) no-repeat center bottom/contain;
}

.mainnav dl dd ul li.image.assets a {
  background: url(../img/gnav_assets.jpg) no-repeat center bottom/contain;
}

.mainnav dl dd ul li.image.build a {
  background: url(../img/gnav_build.jpg) no-repeat center bottom/contain;
}

.mainnav dl dd ul li.lend {
  padding: 0 20px;
}

.mainnav dl dd ul li.lend>a {
  font-size: 15px;
  font-weight: bold;
}

.mainnav ul.child>li {
  margin-right: 10px;
}

.mainnav ul.child>li a {
  font-size: 14px;
  color: #747474;
  padding-left: 1em;
  position: relative;
  display: inline-block;
}

.mainnav ul.child>li a::before {
  content: '';
  width: .5em;
  height: 1px;
  background: #747474;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.mainnav ul.child.grand>li a::before {
  display: none;
}

.mainnav .use ul:not(.child) {
  justify-content: flex-start;
}

.mainnav .use ul:not(.child) li {
  width: 23%;
  margin-bottom: 10px;
}

.mainnav .works dd .case {
  width: 43%;
}

.mainnav .works dd .case ul {
  column-count: 2;
}

.mainnav .works dd .other {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 35%;
}

.mainnav .works dd .other>div {
  width: 50%;
  margin-bottom: 20px;
}

.mainnav .works dd .owner {
  background: #fff;
  width: 25%;
  max-width: 225px;
}

.mainnav .works dd .owner a {
  display: block;
  padding: 10px 0 125px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  background: url(../img/gnav_owner.jpg) no-repeat center bottom 0/contain;
  transition: .3s;
}

.mainnav .company dd ul:not(.child) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.mainnav .company dd ul:not(.child) li {
  width: 23%;
}

.mainnav .company dd ul:not(.child) li a {
  margin-bottom: 10px;
  display: inline-block;
}

.aside_btn {
  position: fixed;
  right: 0;
  z-index: 10;
  overflow: hidden;
  padding: 10px 0 10px 10px;
  pointer-events: none;
}

.aside_btn ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  right: -100px;
  transition: .3s;
  width: 97px;
}

.aside_btn.fixed ul {
  right: 0;
}

.aside_btn ul li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
  transition: .3s;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: .2em;
}

.aside_btn ul li.aside_contact {
  background-color: #FAF000;
  height: 185px;
  font-size: 2rem;
  width: 70px;
  margin-bottom: 15px;
}

.aside_btn ul li.aside_contact:hover {
  width: 80px;
}

.aside_btn ul li.aside_download {
  background-color: #00458B;
  color: #fff;
  font-size: 1.5rem;
  height: 240px;
  width: 60px;
}

.aside_btn ul li.aside_download:hover {
  width: 70px;
}

.aside_btn ul li a {
  font-weight: bold;
  line-height: 1.3em;
  pointer-events: auto;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px 0 30px;
  justify-content: center;
}

.aside_btn ul li a::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  bottom: 20px;
  right: 0;
  left: 0;
  margin: auto;
}

.aside_btn ul li.aside_contact a::after {
  border-color: transparent transparent transparent #000;
}

.aside_btn ul li.aside_download a::after {
  border-color: transparent transparent transparent #fff;
}

.aside_btn ul li.form {
  width: 100%;
  margin-bottom: 10px;
}

.aside_btn ul li.form a {
  background: #FE0;
  font-size: 20px;
}

.aside_btn ul li.contact {
  width: 70%;
}

.aside_btn ul li.contact a {
  background: #000;
  color: #fff;
  font-size: 14px;
}

.aside_btn ul li.contact a::after {
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/*==================================================
$footer
==================================================*/
footer {
  clear: both;
}

.foot_thumb_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto -30px;
}

.foot_thumb_contents {
  box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.16);
  width: 48%;
}

.foot_thumb_contents a div {
  overflow: hidden;
}

.foot_thumb_contents a div img {
  transition: .7s all;
  width: 100%;
}

.foot_thumb_contents a div img:hover {
  transform: scale(1.2, 1.2);
}

.foot_thumb_contents a p {
  color: #00458B;
  background-color: #fff;
  padding: 15px 0;
  text-align: center;
}

.foot_bg_area {
  background-color: #00458B;
  color: #fff;
  padding-top: 85px;
}

.foot_bg_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.foot_bg_contents:first-of-type {
  width: 50%;
}

.foot_bg_contents:nth-of-type(2) {
  width: 40%;
}

.foot_bg_contents .tel {
  padding: 0;
  margin-bottom: 25px;
}

.foot_bg_contents .logo {
    margin-bottom: 20px;
}

.foot_bg_contents .tel a {
  font-size: 5.4rem;
  justify-content: flex-start;
}

.foot_bg_contents .tel a::before {
  font-size: 5.4rem;
  width: 40px;
  height: 40px;
}

.foot_bg_contents .tel small {
  margin-left: 0;
}

.foot_link_list {
  column-count: 2;
  font-size: 1.4rem;
}

.foot_link_list li a {
  padding: 3px 0;
  display: block;
}

.foot_link_list>li ol {
  color: #91A7BE;
  font-size: 1.3rem;
}

.copy_area {
  padding: 50px 0 20px;
  text-align: center;
}

.copy_area p {}

.totop {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  z-index: 9;
  border-left: solid 80px transparent;
  border-bottom: solid 80px #4172A3;
}

.totop::after {
  content: '';
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 55px;
  right: 20px;
  margin: auto;
  transition: .5s;
}

.foot_bg_contents .subnav {position: inherit;}
.foot_bg_contents .subnav ul {display: flex;}
.foot_bg_contents .subnav ul li {margin-right: 10px;position: relative;}
.foot_bg_contents .subnav ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  margin: auto;
  background-repeat: no-repeat;
}
.foot_bg_contents .subnav ul li a {color: #00458B;}

/*==================================================
$共通
==================================================*/
.index .inner {
  width: 1200px;
  margin: auto;
  min-width: 900px;
}

.inner {
  width: 1000px;
  margin: auto;
}

@media (max-width: 768px) and (min-width: 601px) {
  .inner {
    min-width: inherit;
  }
}

.intro_txt {
  margin-top: 55px;
}

.pagetitle {
  padding: 60px 0;
}

/*タイトル*/
h1.common_ttl {
  font-size: 3.8rem;
  color: #00458B;
}

h2.common_ttl {
  font-size: 3.4rem;
  color: #00458B;
}

.common_ttl span {
  font-size: 1.2rem;
  color: #BBBBBB;
  display: block;
  line-height: 1em;
}

.left_border_ttl {
  position: relative;
  font-size: 2.0rem;
  font-weight: bold;
  border-bottom: solid 1px #BBBBBB;
  margin-left: 10px;
  margin-bottom: 30px;
  padding: 5px;
}

.left_border_ttl::before {
  content: '';
  display: inline-block;
  background-color: #00458B;
  width: 6px;
  height: 39px;
  margin-right: 10px;
  position: absolute;
  left: -14px;
}

/*flex*/
.f_container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

/*ボタン*/
.btn01 {
  background-color: #00458B;
  color: #fff;
  max-width: 297px;
  width: 90%;
  text-align: center;
  padding: 22px 0;
  border-radius: 100px;
  margin: auto;
  display: block;
  position: relative;
  transition: .3s;
  cursor: pointer;
}

.btn02 {
  border: solid 2px #00458B;
  max-width: 166px;
  width: 90%;
  padding: 8px;
  border-radius: 100px;
  margin: auto;
  color: #00458B;
  font-size: 1.0rem;
  position: relative;
  ;
  transition: .3s;
}

.btn01:after, .btn02:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  top: 0;
  bottom: 0;
  right: 12%;
  margin: auto;
}

.btn01:after {
  border-color: transparent transparent transparent #ffffff;
}

.btn02:after {
  border-color: transparent transparent transparent #00458B;
}

.btn03 {
  background-color: #00458B;
  color: #fff;
  max-width: 163px;
  width: 90%;
  text-align: center;
  padding: 5px 10px 5px 0;
  border-radius: 100px;
  margin: auto;
  display: block;
  position: relative;
  transition: .3s;
}

.btn03:after {
  content: '';
  background-image: url(../img/link.svg);
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  top: 0;
  bottom: 0;
  right: 12%;
  margin: auto;
}

/*ホバー*/
.btn01:hover, .btn03:hover {
  background-color: #013468;
}

.btn02:hover {
  background-color: #00458B;
  color: #fff;
}

.btn02:hover:after {
  border-color: transparent transparent transparent #ffffff;
}

/*section*/
div:not(.index) section {
  padding-bottom: 60px;
}

/*==================================================
$トップページ　index
==================================================*/
.mv {
  position: relative;
}

.mv video {
  width: 100%;
  max-width: 1300px;
  margin: auto;
  display: block;
  position: relative;
}

.mv img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.contents.index .common_ttl {
  text-align: center;
  margin-bottom: 50px;
}

.contents.index section:not(.index_sns):not(.index_news) {
  padding: 110px 0 95px;
  z-index: 1;
  position: relative;
  clear: both;
}

/*============================
#products
============================*/
.index_products .f_container {
  margin-bottom: 50px
}

.f_products_item {
  text-align: center;
  width: 32%;
  box-shadow: 6px 6px 10px rgb(0 69 139 / 5%);
}

.products_item_img {
  background-image: url(../img/products_item_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products_item_img img {}

.products_item_txt {
  padding: 22px 0 40px;
}

.products_item_ttl {
  margin-bottom: 15px;
  font-size: 1.6rem;
}

/*============================
#reason
============================*/
.index_reason {
  background-color: #F0F4F8;
  padding-top: 60px;
  position: relative;
}

.index_reason::before {
  content: '';
  background-image: url(../img/dot_bg.png);
  background-size: cover;
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  width: 755px;
  height: 527px;
  pointer-events: none;
}

.index_reason .inner {
  width: 1000px;
}

.reason_ttl {
  font-size: 3.0rem;
  color: #00458B;
  margin-bottom: 20px;
}

.reason_intro_txt {
  margin-bottom: 50px;
}

.index_reason .f_container {
  margin: auto;
  z-index: 1;
  position: relative;
}

.f_reason_item {
  background-color: #fff;
  text-align: center;
  box-shadow: 6px 6px 10px rgb(0 69 139 / 7%);
  width: 49.5%;
}

.f_reason_item a {
  padding: 55px 35px 60px;
  display: block;
}

.reason_heading {
  color: #173572;
  font-style: italic;
  position: relative;
  margin-bottom: 30px;
  display: block;
}

.reason_heading::after {
  content: '';
  display: block;
  border-bottom: dotted 1px #00458B;
  width: 75px;
  position: absolute;
  bottom: -10px;
  right: 0;
  left: 0;
  margin: auto;
}

.reason_item_ttl {
  font-size: 2.0rem;
  color: #173572;
  line-height: 1.38em;
  margin-bottom: 25px;
  position: relative;
}

.reason_item_ttl span {
  font-size: 1.1rem;
  display: block;
  line-height: 1em;
  margin-top: 12px;
}

.f_reason_item a img {
  margin-bottom: 25px;
}

/*============================
#pickup
============================*/
.index_pickup {
  position: relative;
}

.index_pickup::before {
  content: '';
  width: 1150px;
  height: 500px;
  background-color: #F0F4F8;
  display: block;
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
}

.f_pickup_item {
  box-shadow: 9px 7px 17px rgb(0 69 139 / 7%);
  background-color: #fff;
  width: 32%;
}

.pickup_item_txt {
  padding: 30px;
  text-align: center;
}

.pickup_item_txt h3.pickup_item_ttl {
  color: #173572;
  font-size: 2.0rem;
}

.pickup_item_txt p.pickup_item_caption {
  margin-bottom: 20px;
}

/*============================
#howto
============================*/
.index_howto {
  position: relative;
}

.index_howto::after {
  content: '';
  background-image: url(../img/dot_bg.png);
  background-size: cover;
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 755px;
  height: 527px;
}

.index_howto .inner {
  width: 1000px;
}

.index_howto .f_container {
  margin: auto;
  margin-bottom: 40px;
  z-index: 1;
  position: relative;
}

.howto_intro_txt {
  text-align: center;
  margin-bottom: 65px;
}

/*============================
#news
============================*/
.index_news {
  background-color: #F0F4F8;
  padding: 50px 0;
}

.f_news_item:first-of-type {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f_news_item:nth-of-type(2) {
  width: 65%;
}

.contents.index .f_news_item .common_ttl {
  margin-bottom: 0;
}

.news_item_list {
  max-width: 745px;
}

.news_item_list li {
  border-bottom: dotted 2px #DDDDDD;
  padding: 20px 0;
}

.news_item_list li a {
  display: flex;
}

.news_item_date {
  color: #BBBBBB;
  margin-right: 20px;
}

/*============================
#sns
============================*/
.index_sns .inner {
  padding: 60px 0 70px;
}

.index_sns .f_container {
  max-width: 776px;
  margin: auto;
}

.f_sns_item {
  border: solid 1px #EEEEEE;
  padding: 35px 20px 50px;
  width: 100%;
  text-align: center;
  margin: 0 1%;
}

.sns_item_img {
  margin-bottom: 12px;
  height: 28px;
}

.sns_item_ttl {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.sns_item_txt {
  margin-bottom: 25px;
  line-height: 2em;
  text-align: center;
}

/*==================================================
$選ばれる理由
==================================================*/
.sec_reason {
  padding-top: 60px;
}
.reason_intro {
  padding-top: 60px;
  padding-bottom: 167px;
}

.reason_intro .reason_heading {
  margin-bottom: 65px;
}

.reason_intro .reason_heading::after {
  right: auto;
}

.reason_intro .reason_item_ttl {
  font-size: 3.0rem;
}

.reason_intro .reason_item_ttl span {
  font-size: 5.3rem;
  color: rgba(23, 53, 114, 0.1);
  font-style: italic;
  position: absolute;
  top: -35px;
  right: 0;
  margin-top: 0;
  letter-spacing: 0.079em;
}

.reason_detail {
  background-color: #F0F4F8;
  padding-bottom: 115px;
}

.reason_detail_contents {
  position: relative;
  clear: both;
  display: inline-block;
}

.reason_detail_img {
  width: 50%;
  max-width: 490px;
  top: -60px;
}

.reason_detail_contents:nth-of-type(odd) .reason_detail_img {
  position: absolute;
  left: 0;
}

.reason_detail_contents:nth-of-type(even) .reason_detail_img {
  position: absolute;
  right: 0;
}

.reason_detail_img img {
  width: 100%;
  height: auto;
}

.reason_detail_txt {
  width: 55%;
  background-color: #fff;
  margin-bottom: 35px;
  box-shadow: 8px 17px 20px rgb(0 69 139 / 5%);
  min-height: 477px;
}

.reason_detail_contents:nth-of-type(odd) .reason_detail_txt {
  float: right;
  padding: 92px 66px 92px 100px;
}

.reason_detail_contents:nth-of-type(even) .reason_detail_txt {
  float: left;
  padding: 92px 100px 92px 62px;
}

.reason_detail_txt h4 {
  color: #00458B;
  font-size: 2.6rem;
  margin-bottom: 20px;
}

/*==================================================
$タフクラック
==================================================*/
.tough .inner {
}

.sec_tough_top {
  padding: 0 0 65px !important;
  position: relative;
}

.tough_top_bg {
  background-image: url(../img/tough_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 268px;
  max-height: 268px;
  width: 100%;
  min-width: 1000px;
  overflow: hidden;
  background-position: center top 75%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 10% 0;
}
@media screen and (max-width:1335px) {
  .tough_top_bg {
    background-size: auto 265%;
  }
}
.tough_top_bg::before {
  content: '';
  background-color: #000;
  opacity: 0.2;
  width: 100%;
  height: 100%;
  display: inline-block;
}

.tough_top_wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 15vw;
  margin-bottom: 50px;
}
@media screen and (max-width:1335px) {
  .tough_top_wrap {
    padding-top: 200px;
  }
}

.tough_top_contents:first-of-type {
  width: 55%;
}

.tough_top_contents:nth-of-type(2) {
  width: 45%;
  background: #fff;
  padding: 20px 5%;
}

.tough_top_contents img {}

.tough_top_contents .ttl {
  font-size: 3.0rem;
  color: #00458B;
  font-weight: bold;
}

.tough_top_contents .txt {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.tough_top_contents .bg {
  background-color: #00458B;
  color: #fff;
  border-radius: 100px;
  padding: 5px 20px;
  width: 240px;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.tough_top_contents .caption {
  font-size: 1.5rem;
}

.sec_tough_top img {
  display: block;
  margin: auto;
}

.sec_tough_detail {
  background-color: #F0F4F8;
  padding-top: 60px;
}

.tough_detail_ttl {
  font-size: 2.6rem;
  color: #00458B;
  text-align: center;
  margin-bottom: 22px;
}

.sec_tough_detail .inner>p {
  max-width: 700px;
  margin: 0 auto 24px;
}

.tough_border_bx {
  border: solid 1px #D0D0D0;
  padding: 20px 30px;
  margin: 0 auto 40px;
}

.tough_detail_wrap {
  background-color: #fff;
  padding: 70px 75px;
  margin-bottom: 30px;
}

.tough_detail_contents {
  margin-bottom: 50px;
}

.tough_detail_contents:last-of-type {
  margin-bottom: 0;
}

.tough_detail_contents .f_container {
  max-width: 700px;
  margin: auto;
}

.tough_arrow_ttl {
  font-size: 2.0rem;
  color: #00458B;
  display: flex;
  align-items: center;
  border-bottom: dotted 1px #00458B;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.tough_arrow_ttl::before {
  content: '';
  background-image: url(../img/arrow.svg);
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;
  margin-right: 5px;
}

.tough_detail_item01 {
  margin: 0 1%;
}

.tough_detail_item01 p {
  background-color: #302D2C;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}

.tough_detail_item02 {
  text-align: center;
  margin: 0 2%;
}

.tough_detail_item02 .circle {
  border: solid 1.5px #00458B;
  border-radius: 100px;
  width: 161px;
  height: 161px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2em;
  color: #00458B;
  margin-bottom: 10px;
}

.tough_detail_contents img {
  margin-bottom: 40px;
}

.tough_detail_contents .bg_box {
  background-color: #F2F5F9;
  padding: 25px 125px;
}

.tough_detail_contents .bg_box ul li {
  text-indent: -1em;
  padding-left: 1em;
}

.tough_detail_point {
  position: relative;
}

.tough_detail_point::after {
  content: '';
  background-image: url(../img/tough08.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 354px;
  height: 255px;
  bottom: 0;
  right: 5%;
}

.tough_detail_point_txt .ttl {
  color: #00458B;
  font-size: 2.0rem;
  margin-bottom: 20px;
}

.tough_detail_point_txt p {
  max-width: 654px;
  width: 60%;
}

.sec_tough_voice {
  max-width: 1000px;
  margin: auto;
  padding-top: 60px;
}

.voice_thumb_contents a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 11px 8px 20px rgba(0, 69, 139, 0.09);
  margin-bottom: 27px;
}

.voice_thumb_txt {
  padding: 0 5%;
  width: 55%;
}

.voice_thumb_txt .comment {
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.576em;
  margin-bottom: 20px;
}

.voice_thumb_txt span {
  display: block;
}

.voice_thumb_txt .name {
  font-size: 1.8rem;
}

.voice_thumb_txt .name small {
  font-size: 1.5rem;
}

.voice_thumb_img {
  width: 45%;
  overflow: hidden;
}

.voice_thumb_img img {
  width: 100%;
  height: 100%;
  transition: .7s all;
}

.voice_thumb_contents:hover a .voice_thumb_img img {
  transform: scale(1.1, 1.1);
}

/*==================================================
$会社概要　3ページ共通
==================================================*/
.tbl01 {
  margin-bottom: 83px;
  width: 100%;
}

.tbl01 tr th, .tbl01 tr td {
  border: solid 1px #BBBBBB;
  padding: 23px 25px;
  vertical-align: middle;
}

.tbl01 tr th {
  background-color: #F0F4F8;
  width: 25%;
}

.tbl01 tr td {
  width: 75%;
}

.overview_list {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 66px;
  border: solid 1px #00458B;
}

.overview_list li {
  width: 100%;
  text-align: center;
  color: #173572;
  position: relative;
  transition: .3s;
}

.overview_list li:not(:last-child) {
  border-right: solid 1px #00458B;
}

.overview_list li:hover {
  opacity: 0.7;
}

.overview_list li a {
  padding: 18px 0;
  display: block;
}

.overview_list li::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  top: 0;
  bottom: 0;
  right: 30px;
  margin: auto;
  border-color: transparent transparent transparent #00458B;
}

.overview_list li.current {
  color: #fff;
  background-color: #00458B
}

.overview_list li.current::after {
  border-color: transparent transparent transparent #fff;
}

/*==================================================
$会社沿革
==================================================*/
.history_list_area {
  margin-bottom: 50px;
}

.history_list_area p {}

.suppliers_list {
  /* column-count: 2; */
  margin-bottom: 30px;
  max-width: 750px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.suppliers_list li {
  width: 50%;
}
.officer_list {
  margin-bottom: 30px;
}

.officer_list dl {
  display: flex;
  max-width: 500px;
}

.officer_list dl dd:first-of-type {
  width: 22%;
}

.officer_list dl dd:nth-of-type(2) {
  width: 12%;
}

/*==================================================
$社長あいさつ
==================================================*/
.greeting_ttl {
  font-size: 2.6rem;
  margin-bottom: 45px;
}

.greeting_txt {
  margin-bottom: 80px;
}

.greeting_signature {
  display: flex;
  align-items: center;
  width: 360px;
  justify-content: space-between;
  margin-bottom: 100px;
}

/*==================================================
$職人様の声　一覧
==================================================*/
.contents.voice .sec_tough_voice {
  padding: 0 0 95px;
}

/*==================================================
$職人様の声　下層
==================================================*/
.contents.voice_ulayer .voice_thumb_contents {
  pointer-events: none;
}

.sec_voice_qa {
  padding: 0 0 95px !important;
}

.voice_qa_contents {
  margin-bottom: 40px;
}

.voice_q {
  font-size: 2.2rem;
  color: #00458B;
  margin-bottom: 15px;
  position: relative;
  padding-left: 45px;
  font-weight: bold;
}

.voice_q::before {
  content: '';
  display: inline-block;
  background-color: #00458B;
  width: 35px;
  height: 1px;
  margin-right: 5px;
  position: absolute;
  top: 1em;
  left: 0;
}

.voice_qa_img {
  max-width: 750px;
  display: block;
  margin: 0 auto 40px;
}

.archive_btn {
  text-align: center;
  margin-bottom: 70px;
}

.archive_btn p {
  margin-top: 5px;
}

/*==================================================
$パテマッチング表
==================================================*/
.tbl02 {
  width: 100%;
  margin-bottom: 15px;
}

.tbl02 tr {}

.tbl02 tr th, .tbl02 tr td {
  border: solid 1px #DDDDDD;
}

.tbl02 tr th {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  vertical-align: middle;
  background-color: #00458B;
  color: #fff;
  padding: 15px 0px;
  width: 180px;
  height: 180px;
  box-sizing: border-box;
}

.tbl02 tr th:nth-child(n+2) {
  width: 6%;
}

.tbl02 tr td:first-child {
  background-color: #F0F4F8;
  padding: 15px 10px;
  width: 180px;
  display: block;
}

.tbl02 tr td:nth-child(n+2) {
  vertical-align: middle;
  text-align: center;
  font-size: 1.8rem;
  color: #DDDDDD;
}

.match_underline {
  border-bottom: solid 1px;
}

.match_doublec {
  color: #00458B;
}

.match_p {
  color: #DE9400;
}

.match_star {
  color: #0B9F00;
}

.match_caption {
  text-align: right;
}

.match_caption span {
  margin: 0 10px;
}

.tbl02_head {
  position: relative;
}

.tbl02_head::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-right: solid 180px transparent;
  border-bottom: solid 180px #F0F4F8;
}

.match_under {
  position: absolute;
  writing-mode: horizontal-tb;
  top: 30px;
  right: 30px;
}

.match_top {
  position: absolute;
  writing-mode: horizontal-tb;
  bottom: 30px;
  left: 30px;
  color: #000;
  z-index: 1;
}

/*==================================================
$使用方法
==================================================*/
.sec_howtouse {
  padding: 0 0 40px !important;
}

.sec_howtouse iframe {
  width: 671px;
  height: 377px;
  display: block;
  margin: 0 auto 30px;
}

.howtouse_border_bx {
  border: solid 1px #DDDDDD;
  padding: 15px;
  margin-bottom: 15px;
}

.howtouse_border_bx h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.howtouse_border_bx .f_container {
  justify-content: flex-start;
}

.howtouse_border_bx_contents {}

.howtouse_border_bx_contents h4 {
  color: #00458B;
  margin-bottom: 10px;
}

.howtouse_border_bx_contents .f_container {}

.howtouse_border_bx_item {
  margin: 0 15px;
}

.howtouse_border_bx_item img {}

.howtouse_border_bx_item a {
  display: block;
  text-decoration: underline;
  color: #00458B;
  font-size: 1.1rem;
}
.howtouse_border_bx_item span {
  display: block;
  font-size: 1.1rem;
}

.howtouse_step_wrap {
  flex-wrap: wrap;
  counter-reset: number 0;
  justify-content: flex-start;
}

.howtouse_step_contents {
  width: 32%;
  position: relative;
  margin-right: 2%;
  margin-bottom: 25px;
}

.howtouse_step_contents:nth-of-type(3n) {
  margin-right: 0;
}

.howtouse_number {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  width: 65px;
  height: 65px;
  padding: 10px 0 0 10px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1em;
  background: linear-gradient(to top left, rgba(255, 255, 255, 0) 50%, #00458B 50.5%) no-repeat top left/100% 100%;
}

.howtouse_number::after {
  counter-increment: number 1;
  content: counter(number) " ";
}

.howtouse_step_contents img {
  margin-bottom: 20px;
}

.howtouse_step_contents p {}

/*==================================================
$よくあるご質問
==================================================*/
.qalist {
  border-bottom: #d7d7d7 1px solid;
}

.qalist>dt {
  font-size: 1.5rem;
  padding: 30px 60px 30px 60px;
  background-size: 40px auto;
  cursor: pointer;
  position: relative;
}

.qalist>dt::before {
  position: absolute;
  top: 48%;
  margin: auto;
  left: 10px;
  text-align: center;
  vertical-align: middle;
  content: "Q.";
  /* Safari用 */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #00458B;
  font-weight: bold;
  font-size: 1.5rem;
}

.qalist>dt:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #00458B;
  border-right: 2px solid #00458B;
  transform: rotate(135deg);
  position: absolute;
  right: 20px;
  top: 40%;
}

.qalist>dd {
  display: none;
  padding: 0 20px 20px 60px;
}

.qalist+.announceBox {
  margin-top: 40px !important;
}

.contents.faq .left_border_ttl {
  margin-bottom: 0;
}

/*==================================================
$お問い合わせ
==================================================*/
.sec_contact {
  padding: 0 0 95px !important;
}

.contact_wrap {
  margin-bottom: 50px;
}

.contact_contents {
  text-align: center;
}

.contact_contents .logo {}

.contact_contents .tel {
  background: none;
  color: #000;
  padding: 10px;
}

.contact_contents .tel a {
  font-size: 5.4rem;
  color: #00458B;
}

.contact_contents .tel a:before {
  width: 40px;
  height: 40px;
  background: url(../img/tel_b.svg) no-repeat center/contain;
  margin-right: 10px;
}

.form_wrap {
  margin-bottom: 35px;
}

.form_contents {
  background-color: #F0F4F8;
  padding: 45px 40px;
}

.form_item {
  margin-bottom: 20px;
}

.form_contents_tbl {
  width: 100%;
}

.form_contents_tbl tr {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form_contents_tbl tr th {
  width: 35%;
  position: relative;
}

.form_require {
  background-color: #DB0000;
  color: #fff;
  font-size: 1.2rem;
  width: 50px;
  height: 25px;
}

.form_contents .form_require {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.form_caution {
  margin-bottom: 15px;
  line-height: 2em;
}

.form_caution .form_require {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

.form_contents_tbl tr td {
  display: block;
  width: 55%;
}

.form_contents_tbl tr td input, .form_contents_tbl tr td select {
  border: solid 1px #DDDDDD;
  /* height: 42px; */
  padding: 10px;
}
.form_contents_tbl tr td select,
.form_contents_tbl tr td input[type=text]{
  min-width: 300px;
}
.form_contents_tbl tr td textarea {
  border: solid 1px #DDDDDD;
  height: 230px;
  padding: 10px;
}

@media (max-width: 1025px) and (min-width: 601px) {
  .form_contents_tbl tr td input, .form_contents_tbl tr td select , .form_contents_tbl tr td textarea {
    width: 100%;
  }
}


.wpcf7-list-item label {
  display: flex;
  align-items: center;
}

.form_caution_bx {
  border: solid 1px #DDDDDD;
  padding: 45px;
  margin-bottom: 45px;
}

.form_caution_ttl {
  font-size: 1.5rem;
  color: #DB0000;
  margin-bottom: 10px;
}

.form_caution_list {
  padding-left: 25px;
}

.form_caution_list li {
  list-style-type: decimal;
}

.contact_btn_wrap {
  display: flex;
    max-width: 700px;
    margin: auto;
}

.back.btn01 {
  border: none;
  background-color: #BBBBBB !important;
  color: #000;
}

.submit.btn01 {
  border: none;
}

input.reply , input.experience {
  width: inherit !important;
}


/*==================================================
$お知らせ
==================================================*/
.news_area .inbox {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.news_area .inbox div {
  width: 100%;
  position: relative;
}

.news_area .inbox div:first-child {
  margin-right: 2%;
}

.news_area .inbox div strong {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}

.news_area .inbox div>span {
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 15px;
}

.news_area .inbox div>span a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.news_area .inbox div>span a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #239174;
  border-right: 2px solid #239174;
  transform: rotate(45deg);
  display: inline-block;
  margin-left: 10px;
}

.news_area .inbox div ul li:not(:last-child) {
  border-bottom: 1px solid #D5D5D5;
}

.news_area .inbox div ul li a {
  padding: 10px;
  display: block;
  background: #fff;
  transition: .3s;
}

.news_area .inbox div ul li a:hover {
  background: #f5f5f5;
}

.news_area .inbox div ul li a>span {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}

.news_area .inbox div ul li a .date {
  margin-right: 10px;
  display: inline-block;
}

.news_area .inbox div ul li a .label {
  padding: 0 10px;
  background: #98A0A7;
  color: #fff;
}

.news_area .inbox div ul li a p {
  font-size: 14px;
}

.news_page .news_title {
  background: #F0F4F8;
  padding: 15px;
  font-size: 2.0rem;
  margin-bottom: 20px;
}

.news_page .news_date {
  text-align: right;
  display: block;
}

.news_content {
  margin-bottom: 60px;
}

.news_content {
  padding: 50px 0;
}
.news_content h1 {
  font-weight: bold;
  font-size: 200%;
  margin-bottom: 20px;
}
.news_content h2 {
  font-weight: bold;
  font-size: 175%;
  margin-bottom: 20px;
}
.news_content h3 {
  font-weight: bold;
  font-size: 150%;
  margin-bottom: 20px;
}
.news_content h4 {
  font-weight: bold;
  font-size: 125%;
  margin-bottom: 20px;
}
.news_content h5 {
  font-weight: bold;
  font-size: 100%;
  margin-bottom: 20px;
}
.news_content h6 {
  font-weight: bold;
  font-size: 100%;
  margin-bottom: 20px;
}
.news_content pre {
  margin-bottom: 20px;
}
.news_content p {
  margin-bottom: 20px;
}
.news_content p strong {
  font-weight: bold;
}
.news_content p em {
  font-weight: bold;
}
.news_content p a {
  text-decoration: underline;
}
.news_content ul li {
  margin-bottom: 20px;
  padding-left: 2em;
  position: relative;
}
.news_content ul li::before {
  content: '';
  width: .5em;
  height: .5em;
  background: #000;
  border-radius: 100px;
  position: absolute;
  top: .7em;
  left: .5em;
  margin: auto;
}
.news_content ol {
  counter-reset: newscount;
}
.news_content ol li {
  counter-increment: newscount;
  margin-bottom: 20px;
  padding-left: 2em;
  text-indent: -.8em;
}
.news_content ol li::before {
  content: counter(newscount)'.';
  margin-right: 10px;
  display: inline-block;
}
.news_content blockquote {
  display: block;
  padding: 20px;
  background: #f1f1f1;
  position: relative;
  margin-bottom: 20px;
}
.news_content blockquote::before {
  content: '\201C';
  position: absolute;
  top: -.2em;
  left: .2em;
  margin: auto;
  font-size: 500%;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}
.news_content blockquote p:last-child {
  margin-bottom: 0;
}
.news_content img {
  height: auto;
}

/*==================================================
$商品一覧
==================================================*/
.serch_form_box {
  background-color: #F0F4F8;
  padding: 45px 70px !important;
  position: relative;
  z-index: 2;
}

.serch_form_box h2.products_search_ttl {
  color: #00458B;
  font-size: 2.0rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.serch_form_box h2.products_search_ttl::before {
  display: block;
  content: '';
  background-image: url(../img/glass.svg);
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.serch_form_box label {
  cursor: pointer;
  width: 98%;
  margin: 0 1%;
  display: flex;
  max-width: 260px;
}

.serch_form_box label input {
  display: none;
}

.serch_form_box label input:checked+span {
  background-color: #00458B;
  color: #fff;
}

.search-type {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 25px;
}

.serch_form_box label span {
  width: 100%;
  text-align: center;
  border: solid 1px #BBBBBB;
  background-color: #fff;
  padding: 15px 5px;
  display: block;
}

.search-use {
}

.search-features {
  background-color: #F0F4F8;
  padding: 25px;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

.search-features label {
  width: auto;
  margin-bottom: 10px;
}

.search-features>label>span {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_child_wrap, .search_child_wrap2, .search_child_wrap3 {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  display: none;
}

.search_child_wrap>div, .search_child_wrap2>div ,.search_child_wrap3>div{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.products_wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.products_contents {
  width: 48%;
  margin-bottom: 80px;
  margin-top: -150px;
  padding-top: 150px;
}

.products_image {
  border: solid 1px #DDDDDD;
  margin-bottom: 15px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

.products_image img {
  width: auto;
  height: 100%;
}

.products_tag_wrap {
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
}

.products_tag_wrap span {
  border: solid 2px #9d9d9d;
  padding: 2px 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #9d9d9d;
}

.products_detail {}

.products_name {
  font-size: 2.3rem;
  font-weight: bold;
  color: #00458B;
}

.products_caption {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.products_tbl {
  width: 100%;
  margin-bottom: 10px;
}

.products_tbl tr.thead {
  background-color: #F0F4F8;
}

.products_tbl tr.thead td:first-of-type {
  width: 70px;
}

.products_tbl tr th, .products_tbl tr td {
  vertical-align: middle;
  padding: 10px;
  border: solid 1px #DDDDDD;
}

.products_tbl tr th {
  background-color: #F0F4F8;
  text-align: right;
  width: 70px;
}

.products_tbl02 tr {
  margin-bottom: 10px;
}

.products_tbl02 tr th {
  width: 75px;
}

.feas-submit-button {
  margin: auto;
  display: block;
  border: solid 2px #00458B;
  background-color: #00458B;
  color: #fff;
  padding: 10px 20px;
  width: 200px;
  border-radius: 100px;
  transition: .3s;
  cursor: pointer;
}

.feas-submit-button:hover {
  background-color: #fff;
  color: #00458B;
}

.feas_clevel_02 {
  display: none !important;
}

.products_best_match {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;
}

.best_match_ttl {
  background-color: #E1E9F1;
  width: 35%;
  padding: 15px;
  position: relative;
}

.best_match_ttl::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 0 26px 15px;
  border-color: transparent transparent transparent #E1E9F1;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -15px;
  margin: auto;
}

.best_match_item {
  background-color: #F0F4F8;
  width: 65%;
  padding: 15px 15px 15px 30px;
}

/*検索結果*/
.serch_form_box {
  background-color: #F0F4F8;
  padding: 45px 70px !important;
  margin-bottom: 60px;
}

.search_result_list {
  padding-top: 60px;
}

.serch_form_box .products_freewords {
  width: 100%;
  margin: 0 0 30px;
}
.serch_form_box .products_freewords strong {
  display: block;
  color: #00458B;
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.serch_form_box .products_freewords p {
  margin-bottom: 10px;
}
.serch_form_box .products_freewords input {
  padding: 10px;
  max-width: 500px;
  width: 100%;
  border: solid 1px #BBBBBB;
}
.serch_form_box .products_freewords input:focus-visible {
  outline-color: #00458B;
}


/*==================================================
$プライバシーポリシー
==================================================*/
.privacy_detail_wrap {}

.privacy_contents {
  margin-bottom: 40px;
}

.privacy_contact {
  margin-bottom: 150px;
}

.privacy_contact_ttl {
  color: #00458B;
  font-size: 2.0rem;
  margin-bottom: 10px;
}

/*==================================================
$出荷証明書
==================================================*/
.certificate_tbl_wrap {
  background-color: #fff;
  padding: 38px 25px;
  margin-bottom: 20px;
}

.certificate_tbl {
  width: 100%;
}

.certificate_tbl tr {}

.certificate_tbl .thead th, .certificate_tbl .thead td {
  border: none;
  text-align: left;
}

.certificate_tbl tr th, .certificate_tbl tr td {
  padding: 12px 0;
  border: solid 1px #DDDDDD;
}

.certificate_tbl tr th {
  padding: 12px 15px;
  width: 40%;
}

.certificate_tbl tr td {
  text-align: center;
}

div.form_item:not(.after_select) .certificate_tbl tr td:last-of-type {
  border: none;
  width: 10%;
  color: #00458B;
}
div.form_item:not(.after_select) .certificate_tbl tr td:last-of-type span {
  cursor: pointer;
}
.certificate_cat_select {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
}

.certificate_cat_select p {
  position: relative;
  padding-right: 75px;
}
.certificate_cat_select select {
  border: solid 1px #D5D5D5;
  width: 420px;
  padding: 10px;
}

.certificate_cat_select select option {
  background-color: #fff;
  padding: 10px;
}

.add_btn {
  color: #00458B;
  text-decoration: underline;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}

.add_btn::before {
  content: '';
  background-image: url(../img/plus.svg);
  background-size: contain;
  width: 23px;
  height: 21px;
  margin-right: 10px;
}

/*商品選択後*/
.after_select .certificate_tbl_wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
}

.after_select .certificate_tbl {
  width: 60%;
}

.after_select .after_select_input {}

.after_select .after_select_input:first-of-type {
  width: 20%;
}

.after_select .after_select_input:nth-of-type(2) {
  width: 10%;
}

.after_select .after_select_input p {
  padding: 12px 0;
  position: relative;
}

.after_select .after_select_input input {
  height: 47px;
  padding: 5px;
  width: 100%;
  padding: 10px;
  border: solid 1px #DDDDDD;
}

.form_item_base:not(:first-of-type) {
  display: none;
}
.form_item_base.selected + .form_item_base {
  display: block;
}
.form_wrap .privacy_box {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 30px;
}
.form_wrap .privacy_box .privacy_inbox {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}
.form_wrap .privacy_box .privacy_inbox .privacy_attention {
  padding: 20px 30px;
  background: #FFF3F3;
  margin-bottom: 30px;
}
.form_wrap .privacy_box .privacy_inbox .privacy_attention strong {
  font-size: 20px;
  font-weight: bold;
  color: #DB0000;
  display: block;
  margin-bottom: 10px;
}
.form_wrap .privacy_box .privacy_inbox .privacy_attention p:not(:last-child) {
  margin-bottom: 20px;
}
.form_wrap .privacy_box .privacy_inbox .privacy_contents strong {
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}
.form_wrap .privacy_box .privacy_inbox .privacy_contents p:not(:last-child) {
  margin-bottom: 20px;
}
.form_wrap .privacy_box .privacy_inbox .privacy_contents ol {
  counter-reset: number 0;
}
.form_wrap .privacy_box .privacy_inbox .privacy_contents li {
  margin-bottom: 5px;
  text-indent: -1.3em;
  padding-left: 1.3em;
}
.form_wrap .privacy_box .privacy_inbox .privacy_contents li:before {
  counter-increment: number 1;
  content: counter(number)'. ';
}
.form_wrap .privacy_checkbox {
  width: 100%;
}
.form_wrap .privacy_checkbox input {
  display: none;
}
.form_wrap .privacy_checkbox label {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #F0F4F8;
  cursor: pointer;
  position: relative;
}
.form_wrap .privacy_checkbox label::before {
  content: '';
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  margin-right: 10px;
}
.form_wrap .privacy_checkbox input:checked + label::after {
  content: '';
  width: .5em;
  height: 1em;
  border-bottom: 3px solid #DB0000;
  border-right: 3px solid #DB0000;
  transform: rotate(45deg);
  position: absolute;
  top: -.3em;
  bottom: 0;
  left: -9.7em;
  right: 0;
  margin: auto;
  z-index: 2;
}
.form_wrap .privacy_checkbox label span {
  background-color: #DB0000;
  color: #fff;
  font-size: 1.2rem;
  width: 50px;
  display: inline-block;
  text-align: center;
  padding: 3px 10px;
  margin-left: 10px;
}
.form_btn {
  width: 100%;
  margin-bottom: 50px;
}
.form_btn p {
  text-align: center;
}
.form_btn .form_btn_set {
  padding: 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.form_btn .form_btn_set button {
  cursor: pointer;
  border: none;
  background: none;
  margin: 0 10px;
}
.form_btn .form_btn_set button:focus,
.form_btn .form_btn_set button:active {
  outline: none;
}
.form_btn .form_btn_set .clear {
  font-size: 13px;
  color: #BBB;
}
.form_btn .form_btn_set .submit {
  max-width: 400px;
  width: 50%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #00458B;
  text-align: center;
  color: #fff;
  border-radius: 100px;
  font-weight: bold;
  pointer-events: auto;
}
.form_btn .form_btn_set .submit.off {
  background: #BBB;
  pointer-events: none;
}
.certificate_cat_select p span:not(.form_require) {
  cursor: pointer;
  font-size: 12px;
  color: #00458B;
  text-decoration: underline;
  margin-left: 10px;
}
.certificate_cat_select p span:hover {
  text-decoration: none;
}
/*==================================================
$技術資料ダウンロード
==================================================*/
.document_tbl {
  width: 100%;
}

.document_tbl tr {
  background-color: #F0F4F8;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px;
}

.document_tbl tr th {
  width: 40%;
}

.document_tbl tr td {
  width: 21%;
}

.download_btn, .all_check_btn,.reset_btn {
  text-align: center;
  display: block;
  width: 250px;
  margin: auto;
  padding: 20px;
  border-radius: 100px;
  cursor: pointer;
}

.download_btn {
  background-color: #00458B;
  display: inline-block;
}

.download_btn.noclick {
  pointer-events: none;
  background: #ccc;
  opacity: .8;
}
.all_check_btn {
  background-color: #F0F4F8;
}
.reset_btn {
  background: #ccc;
  display: inline-block;
  margin-right: 20px;
  transform: scale(0.8);
}
.document_contents {
  margin-bottom: 50px;
}

.download_btn input,
.reset_btn input {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.reset_btn input {
  color: #000;
}
/*==================================================
$ログインエントランス
==================================================*/
.entrance_wrap {
  display: flex;
  justify-content: space-between;
}

.entrance_contents {
  background-color: #F0F4F8;
  width: 48%;
  height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.entrance_contents p {
  font-size: 2.6rem;
  margin-bottom: 35px;
}

.entrance_contents p span {
  position: relative;
}

.entrance_contents p span::before {
  content: '';
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  margin: auto;
}

.entrance_contents:first-of-type p span::before {
  background-image: url(../img/pencil.svg);
  width: 26px;
  height: 26px;
}

.entrance_contents:nth-of-type(2) p span::before {
  background-image: url(../img/document.svg);
  width: 23px;
  height: 26px;
}

.entrance_contents small {
  font-size: 1.3rem;
  display: block;
}

.entrance_contents a {
  padding: 20px 0;
  width: 257px;
}

/*==================================================
$ログイン
==================================================*/
.sec_login {
  padding-top: 60px;
}

.login_bx {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  width: 525px;
  display: block;
  margin: auto;
  padding: 60px;
}

.login_bx h1 {
  color: #00458B;
  font-size: 2.0rem;
  text-align: center;
}

.login_bx .um-right, .login_bx .um-col-alt-b, .login_bx .um-field-checkbox {
  display: none !important;
}

.um-left.um-half {
  margin: auto;
  display: block;
  float: inherit;
}

.um-button#um-submit-btn {
  background-color: #00458B;
  border-radius: 100px !important;
}

/*==================================================
$カタログダウンロード
==================================================*/
.catalog_contents {
  margin-bottom: 50px;
}

.catalog_ttl {
  color: #00458B;
  font-size: 2.0rem;
  margin-bottom: 15px;
}

.catalog_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.catalog_list li {
  background-color: #F0F4F8;
  margin-bottom: 10px;
  width: 49%;
  position: relative;
}

.catalog_list li a {
  padding: 15px 30px;
  width: 100%;
  display: block;
}

.catalog_list li::after {
  content: '';
  background-image: url(../img/download.svg);
  background-repeat: no-repeat;
  display: block;
  width: 18px;
  height: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 15px;
}

.catalog_top_wrap {
  display: flex;
  max-width: 750px;
  margin: auto;
  justify-content: center;
}
.catalog_top_contents {
  margin: 0 5px;
}
.catalog_top_contents p {
  color: #00458B;
  text-align: center;
  margin-bottom: 10px;
  font-size: 2.0rem;
}

.catalog_dl::after {
  background-image: url(../img/download_w.svg) !important;
  border: none;
  width: 18px;
  height: 15px;
}

/*ぱんくず*/
.pankuzu {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  width: 1000px;
  margin: auto;
  font-size: 1.2rem;
}

.pankuzu li:not(:last-child)::after {
  content: '>';
  margin: 0 5px;
}

.notfound {
  padding: 100px 0;
  text-align: center;
}
.notfound strong {
  font-weight: bold;
  font-size: 2.2rem;
  display: block;
  margin-bottom: 20px;
}
.notfound p {
  margin-bottom: 50px;
}

.site_search {
  width: 300px;
  position: absolute;
  top: 22px;
  right: 440px;
  margin: auto;
}
.site_search .gsc-control-cse {
  background: none;
  border: none;
  padding: 0;
}
.site_search form.gsc-search-box {
  margin-bottom: 0;
}
.site_search table.gsc-search-box {
  margin-bottom: 0;
}
.site_search table.gsc-search-box td.gsc-input {
  padding-right: 0;
  border: 1px solid #ddd;
  border-right: none;
}
.site_search .gsc-input-box {
  border: none;
}
.site_search .gsc-search-button {
  margin-left: 0;
  position: relative;
  width: 40px;
  border: 1px solid #00458B;
}
.site_search .gsc-search-button-v2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  background: #00458B;
  border: 1px solid #00458B;
  padding: 6px 18px;
  cursor: pointer;
  border-radius: 0;
}
.site_search .gsc-search-button-v2:hover {
  background: #013468;
  border: 1px solid #013468;
}
.site_search .gsc-search-button-v2 svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.site_search .gsst_a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #88C3FF;
  transition: .3s;
}
.site_search .gsst_a:hover .gscb_a,
.site_search .gsst_a:focus .gscb_a {
  color: #00458B;
}
.site_search .gscb_a {
  line-height: 0;
}
.site_search .gsc-input-box {
  padding: 0;
}
.btn_login.btn_logout + .site_search {
  right: 660px;
}
@media screen and (max-width:1280px) {
  .btn_login.login_entrance {
    top: 8px;
  }
  .btn_login.btn_logout {
    top: 8px;
  }
  .btn_login.btn_logout .btn04,
  .btn_login.login_entrance .btn04 {
    padding: 5px 20px 5px 45px;
  }
  .btn_login.btn_logout + .site_search {
    top: 49px;
    right: 300px;
    width: 350px;
  }
  .btn_login.btn_logout + .site_search .gsib_a {
    padding: 0px 9px 0px 9px;
  }
}

.products_contents#\33 51,
.products_contents.unite {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc;
}
.products_contents#\33 51 .products_heading,
.products_contents#\33 51 .products_detail,
.products_contents.unite .products_heading,
.products_contents.unite .products_detail {
  width: 100%;
}
.products_contents#\33 51 .products_image,
.products_contents.unite .products_image {
  min-width: 480px;
  max-width: 480px;
  margin-right: 20px;
  height: 100%;
}
.products_contents#\33 51 .products_image img,
.products_contents.unite .products_image img {
  max-height: 350px;
  object-fit: contain;
}
_:-ms-input-placeholder, :root .products_contents#\33 51 .products_image img,
_:-ms-input-placeholder, :root .products_contents.unite .products_image img {
  height: auto;
}
.products_text {
  width: 100%;
}
.products_image .slider_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.products_image .slider_wrap div {
  width: 100%;
  height: 100%;
}
.products_image .slider_wrap .slider img {
  margin: auto;
  width: auto;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
.products_image .slider_wrap .prev_arrow,
.products_image .slider_wrap .next_arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ccc transparent transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
  z-index: 2;
}
.products_image .slider_wrap .next_arrow {
  left: auto;
  right: 0;
  transform: scale(-1,1);
}
.products_image .slider_wrap .slick-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.products_image .slider_wrap .slick-dots li {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 100px;
  margin: 0 5px;
  overflow: hidden;
  cursor: pointer;
}
.products_image .slider_wrap .slick-dots li.slick-active {
  background: #333;
}
.products_image .slider_wrap .slick-dots li button {
  opacity: 0;
}
.noclick {
  background: #ccc;
  color: #000;
  pointer-events: none;
  border-color: #ccc;
}

.products_howtouse .block_use {
	border: 3px double #FF0000;
	padding: 10px;
	display: block;
}
.products_howtouse .block_use:not(:first-child) {
  margin-top: 15px;
}
.products_howtouse .block_use .block_use_in {
	background-color: #FFEEEE;
	padding: 5px;
}
.products_howtouse .block_use .block_use_title {
	font-size: 16px;
	font-weight: bold;
	color: #FF0000;
  padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #999999;
}
.products_howtouse .block_use ul {
	display: block;
  padding: 10px;
	width: 100%;
}
.products_howtouse .block_use .block_use_in ul li {
	padding-left: 1em;
	text-indent: -1em;
}
.products_howtouse .block_use .text_redbold {
	color: #FF0000;
	font-weight: bold;
}
.um-form p.um-notice i {
  line-height: 0;
  top: -3px;
  right: 3px;
  height: auto;
  font-size: 30px;
}
.form_wrap .example {
  display: block;
  text-align: right;
  margin-bottom: 30px;
}
.form_wrap .example a {
  color: #00458B;
  text-decoration: underline;
}