@charset "UTF-8";

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #111; font-family: 'Noto Sans JP','Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; font-size: 1.5rem; line-height: 1.6; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; transition: all .3s ease; -ms-interpolation-mode: bicubic; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
a { outline: none; transition: all .3s ease; color:#005D98; text-decoration: underline; }
a:link { color: #; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: none; }
a:hover img { opacity: 0.8; }
ul{list-style:none;}
p{font-size:1.6rem;}
button { transition: all .3s ease; }

/* --------------------------------------------------
  汎用クラス
-------------------------------------------------- */
.sp{display: none;}
.inner{width:1200px; margin:0 auto;}
.section_outer{margin:60px auto;}

.mb20 { margin-bottom: 20px; }

.caution { color: #FF0000; }

.btn{
  display:inline-block; 
  width: 280px;
  color: #fff; 
  font-size:1.8rem;
  border-radius: 6px;
  text-align: center;
  padding:15px 20px; 
  text-decoration: none;
}
.btn_s{
  padding: 0 40px;
  display: inline-block;
  color: #fff; 
  font-size:1.4rem; 
  line-height: 3.5rem;
  border-radius: 6px;
  text-decoration: none;
}
.btn_l{
  padding: 20px;
  display: inline-block;
  width: 400px;
  color: #fff; 
  font-size:1.8rem; 
  line-height: 3.0rem;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}
.white_btn{
  color: #0086DB; 
  border:1px solid #0086DB; 
  background: #fff;
}
.white_btn:hover{
  background: #0086DB;
  color: #fff !important;
}
.orange_btn{
  background:#E38D0C; 
  color: #fff;
  border: 1px solid #E38D0C; 
}
.orange_btn:hover{
  background:#fff; 
  color: #E38D0C !important;
}
.blue_btn{
  background:#0086DB;
  color: #fff; 
  border: 1px solid #0086DB;
}
.blue_btn:hover{
  background:#fff;
  color: #0086DB; 
}
/*
.orange_btn_s{
  background:#E38D0C; 
  border: 1px solid #E38D0C; 
}
.orange_btn_s:hover{
  background:#fff; 
  color:#E38D0C;
}
.blue_btn_s{
  background:#0086DB; 
  padding: 10px 40px; 
  border: 1px solid #0086DB;
}
.blue_btn_s:hover{
  background:#fff; 
  color:#0086DB;
}
*/
.btn_wrap{
  text-align: center;
}
label.error{
  color:#f00;
  display:block;
  font-weight:bold;
  margin-top:10px;
}

@media screen and (max-width: 1024px) {
  .sp{
    display: block;
  }
  .inner{
    width:100%;
    padding: 0 20px;
  }
  a.btn {
    padding: 15px 20px;
    width: 100%;
    line-height: 1.2;
    font-size: 1.6rem;
  }
  a.btn_s{
    padding: 15px 20px;
    line-height: 1.2;
    font-size: 1.6rem;
  }
  a.btn_l{
    padding: 15px 20px;
    width: 100%;
    line-height: 1.2;
    font-size: 1.6rem;
  }
}
/* --------------------------------------------------
  グローバルヘッダ
-------------------------------------------------- */

#globalHeader {
  height:80px;
  display: flex;
  align-items: center;
}

#globalHeader .inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#globalHeader .inner div{
  display: flex;
  align-items: center;
}
#globalHeader ul{
  display: flex;
  align-items: center;
}
#globalHeader .header_logo {
  display: flex;
  align-items: flex-end;
}
#globalHeader .header_logo a {
  display: flex;
  width: 190px;
}
#globalHeader .header_logo a img {
  width: 100%;
}
#globalHeader .header_logo span{
  display: inline-block;
  margin-left:20px;
  font-size:1.6rem;
  font-weight: normal;
}
#globalHeader p{
  font-weight: 500;
}
#globalHeader ul li a{
  padding: 0 40px;
  font-size: 1.5rem;
  color: #333;
  text-decoration: none;
}
#globalHeader ul li a:hover{
  text-decoration: underline;
}
#globalHeader ul li a.orange_btn{
  color: #fff;
}
#globalHeader ul li a.orange_btn:hover {
  color: #E38D0C;
  text-decoration: none;
}

#globalHeader a.logout {
  margin-right: 20px;
  background: #d9d9d9;
  color: #727272;
}
#globalHeader a.logout:hover {
  background: #B3B3B3;
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 1024px) {
  #globalHeader{
    position: fixed;
    background:#fff;
    z-index: 999;
    width:100%;
    height: 70px;
    border-bottom: 1px solid #D9D9D9;
  }
  #globalHeader  ul{
    display: none;
  }
  #globalHeader .inner {
    padding: 0 20px;
  }
  #globalHeader .header_logo {
    display: flex;
    align-items: center;
  }
  #globalHeader .header_logo a {
    display: flex;
    align-items: center;
    width: 150px;
  }
  #globalHeader .header_logo a img {
    width: 100%;
  }
  #globalHeader .header_logo span{
    margin-left: 8px;
    font-size:1.0rem;
    font-weight: normal;
  }
}

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


/* --------------------------------------------------
  グローバルナビ
-------------------------------------------------- */

#globalNavi {
  background:#005D98;
}
#globalNavi a{
  color:#fff;
  display:inline-block;
  padding:20px;
  position:relative;
  text-decoration: none;
}
#globalNavi a::after{
  content: '';
  width: 0;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 10px;
  transition: all 0.3s;
}
#globalNavi a:hover::after{
  width:100%;
}
#globalNavi ul{
  width:720px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  #globalNavi{
    display: none;
    position:fixed;
    z-index:999;
    top:70px;
    width: 100%;
    height: calc(100vh - 70px);
    background: linear-gradient(126deg, #EAF2FA 0%, #E5F2FF 33%, #E6F5F4 100%, #E6F5F4 100%);;
  }
  .on #globalNavi{
    display:block;
    overflow: auto;
  }
  #globalNavi ul {
    width: 100%;
    display: block;
  }
  #globalNavi li{
    border-bottom: 1px solid #ccc;
  }
  #globalNavi li:first-child{
    border-top: 1px solid #ccc;
  }
  #globalNavi a{
    color:#000;
  }
  #globalNavi a:hover::after {
    content: none;
  }
  #globalNavi .div_btn{
    display: flex; 
    justify-content: space-between;
    padding:20px;
  }
  #globalNavi .div_btn div{
    width: 48%;
  }
  #globalNavi .orange_btn{
    color:#fff;
  }
  #globalNavi .white_btn{
    color:#0086DB;
  }
}

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


/* --------------------------------------------------
  メイン
-------------------------------------------------- */

main { display: block; }

@media screen and (max-width: 1024px) {
  main{padding-top:70px;}
}

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

}


/* --------------------------------------------------
  フッタ
-------------------------------------------------- */

#globalFooter {
  background: #005D98;
  color:#fff;
}
#globalFooter strong{
  display: block;
  font-size:2.0rem;
  margin-bottom:25px;
}
#globalFooter .inner{
  padding:40px 0;
}

#globalFooter .inner div{
  display: flex;
  justify-content: space-between;
  align-items: end;
}

@media screen and (max-width: 1024px) {
  #globalFooter .inner{
    padding: 30px 20px;
  } 
  #globalFooter .inner div{
    display: block;
  }
  #globalFooter .inner div p:first-child{
    margin-bottom: 10px;
  }
  #globalFooter strong{
    font-size:1.6rem;
    margin-bottom: 10px;
  }
  #globalFooter .copy{
    font-size: 1.0rem;
  }
}

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

}

/*guest_footer*/
#guest_footer {
  border-top: 1px solid #D9D9D9;
}
#guest_footer .inner{
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
}
#guest_footer .footer-logo{
  display: block;
  margin-bottom: 20px;
}
#guest_footer ul{
  display: flex;
  flex-wrap: wrap;
}
#guest_footer li {
  padding: 0 15px;
  border-right: 1px solid #333;
  font-size: 1.5rem;
  line-height: 120%;
  margin-bottom:16px;
}
#guest_footer li:first-child{
  padding:0 16px 0 0;
}
#guest_footer li:last-child{
  border-right:none;
}
#guest_footer li a {
  text-decoration: none;
  color: #333;
}
#guest_footer li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1024px){
  #guest_footer .inner{
    display: block;
    padding-right:20px;
    padding-left:20px;
  }
  #guest_footer .footer-logo{
    text-align: left;
  }
  #guest_footer ul{
    margin-bottom: 25px;
  }
  #guest_footer li{
    padding:0 10px 0 0;
    margin-right:10px;
    margin-bottom: 12px;
  }
  #guest_footer li:first-child{
    padding: 0 10px 0 0;
  }
}



/* --------------------------------------------------
  ハンバーガーメニュー
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
.openbtn {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
.openbtn span {
  margin: 0 auto;
  width: 28px;
  height: 2px;
  background: #000;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  transition: all 0.3s;
}
.openbtn span:nth-of-type(1) {
  top: 14px;
}
.openbtn span:nth-of-type(2) {
  top: 24px;
}
.openbtn span:nth-of-type(3) {
  top: 34px;
}

.on .openbtn span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
.on .openbtn span:nth-of-type(2) {
  opacity: 0;
}
.on .openbtn span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}
}

/* --------------------------------------------------
  subページ
-------------------------------------------------- */
h1{
  margin-top: 70px;
  margin-bottom: 20px;
  color: #005D98;
  font-size: 4.0rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
h1::after{
  content: attr(data-en);
  margin-top: 5px;
  display: block;
  color: #0086D8;
  font-family: 'Lato', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0;
}
h2{
  margin-bottom: 40px;
  padding: 40px 0 0;
  border-top: solid 1px #D9D9D9;
  color: #333;
  font-size: 2.8rem;
  font-weight: bold;
  position: relative;
}
h2::before {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  background: #0086D8;
  position: absolute;
  top: -1px;
  left: 0;
}
h3{
  margin: 40px 0 20px;
  padding: 8px 10px;
  width: 100%;
  background: #EAF2FA;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: normal;
}
#path {
  margin-bottom: 70px;
}
#path ul {
  color: #333;
  display: flex;
  font-size: 1.4rem;
}
#path li {
  margin-right: 5px;
  display: flex;
  align-items: center;
}
#path li::after{
  content: '>';
  margin-left: 5px;
}
#path li:last-child::after {
  content: none;
}
#path li a{
  color: #333;
}
.sub-section {
  padding: 0 0 100px;
}

table{
  width: 100%;
  border-collapse: collapse;
}
th,td {
  padding: 15px 20px;
  border: 1px solid #D9D9D9;
  align-items: left;
}
th{
  background: var(--Background01, #EAF2FA);
}

@media screen and (max-width: 1024px) {
  h1{
    margin-top: 40px;
    font-size: 2.8rem;
  }
  h2{
    padding: 30px 0 0;
    margin-bottom: 30px;
    font-size: 2.4rem;
  }
  h3{
    font-size: 1.8rem;
  }
  #path{
    margin-bottom: 40px;
  }
  .sub-section {
    padding: 0 0 60px;
  }
  .table-wrap {
    width: 100%;
    overflow: scroll;
  }
  .table-wrap th, .table-wrap td {
    white-space: nowrap;
  }
  table{
    width: auto;
  }
  th,td {
    padding: 10px;
  }
  /* youtube */
  .video{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }
  .video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  #path {
    overflow: auto;
  }
  #path ul {
    white-space: nowrap;
  }
}

/*----------お知らせ一覧----------*/
main .new_post{
  margin-right: 8px;
  color: #FF0000;
  font-size: 1.4rem;
}
main .info_list li{
  align-items:center;
  border-bottom: 1px #D9D9D9 solid;
  display:flex;
  padding:15px 0;
}
main .info_list li time{
  display: inline-block;
  flex-shrink: 0;
  font-weight:bold;
  width:100px;
}
main .info_list li a{
  color:#000;
  font-size:1.6rem;
}
main .pager{
  margin:40px 0 100px;
}
main .pager ul{
  display:flex;
  justify-content:center;
}
main .pager li a{
  border:1px  #D9D9D9 solid;
  border-radius:5px;
  color:#000;
  display:inline-block;
  margin-right:10px;
  padding:8px 16px;
  text-decoration:none;
}
main .pager li a:hover{
  background:#0086DB;
  color:#fff;
}
main .pager .current_pager{
  background:#0086DB;
  border-radius:5px;
  color:#fff;
  display:inline-block;
  margin-right:10px;
  padding:8px 16px;
}

@media screen and (max-width: 767px) {
  main .info_list li{
    display:block;
  }
  main .info_list li a {
    display: inline-block;
    width: 100%;
  }
}

/*----------お知らせ詳細----------*/
main .info_detail h2{
  border-bottom:1px #D9D9D9 solid;
  border-top:none;
  margin-bottom:20px;
  padding:0 0 10px 0;
}
main .info_detail h2::before{
  display:none;
}
main .info_detail time{
  color:#727272;
  font-size:1.6rem;
}
main .info_detail .info_detail_text{
  border-bottom:1px #D9D9D9 solid;
  padding:40px 0;
}
main .info_detail .back{
  font-size:1.6rem;
  margin-top:20px;
  text-align:center;
}

/*----------動画一覧----------*/
main .search{
  background: #EDF6F5;
  display:flex;
  justify-content:center;
  padding:20px;
  margin-bottom:40px;
}
main .search form{
  background:#fff;
  border: 1px solid #727272;
  border-radius:100vw;
  display:flex;
  justify-content:space-between;
  padding:10px 20px;
  width: 526px;
}
main .search input[type="text"]{
  border: none;
  font-size:120%;
  outline:none;
  width:100%;
}
main .search input[type="image"]{
  margin-left:10px;
  width:31px;
}
main .video_list ul{
  display:flex;
  flex-wrap:wrap;
  /*justify-content:space-between;*/
}
main .video_list li{
  width:23.5%;
  margin-bottom:24px;
  margin-right:2%;
}
main .video_list li:nth-of-type(4n){
  margin-right:0;
}
main .video_list .video{
  margin-bottom:10px;
}
main .video_list a{
  color:#000;
  font-size:1.6rem;
}
main .video_category{
  background:#0086DB;
  border-radius:10px;
  color:#fff;
  display;inline-block;
  font-size:1.4rem;
  margin-right:5px;
  padding:3px 15px;
}
@media screen and (max-width: 1024px) {
  main .video_list li{
    width:30%;
    margin-right:5%;
  }
  main .video_list li:nth-of-type(3n){
    margin-right:0;
  }
  main .video_list li:nth-of-type(4n){
    margin-right:auto;
  }
}
@media screen and (max-width: 767px) {
main .video_list ul{
    display:block;
  }
  main .video_list li{
    width:100%;
  }
  main .video_list li:nth-of-type(3n){
    margin-right:0;
  }
}

/*----------動画一覧詳細----------*/
main .video_detail p{
  margin:20px 0 40px;
}
main .video_detail .back{
  margin-top:20px;
  text-align:center;
}
main .video_detail .btn{
  width:auto;
}

/*----------製品一覧共通----------*/
main .search_product_submit{
  background: #EDF6F5;
  display:flex;
  justify-content:center;
  padding: 20px 0;
}
main .search_product_submit .form_1{
  background:#EDF6F5;;
  display: flex;
  margin-right:80px;
  width: 526px;
}
main .search_product_submit .form_1 input[type="text"] {
  border: 1px solid #727272;
  border-radius:100vw;
  font-size: 120%;
  outline: none;
  padding: 10px 20px;
  width: 100%;
}
main .search_product_submit  input[type="submit"] {
  border:none;
  border-radius:6px;
  background:#0097A0;
  color:#fff;
  font-size: 1.6rem;
  margin-left:10px;
  padding:0 20px;
}
main .search_product_submit .form_2{
  display:flex;
}
main .search_product_submit .form_2 select{
  border-radius:8px;
  padding: 10px 9px;
  width:146px;
  font-size: 1.6rem;
}
main .number_items{
  text-align:right;
  margin:40px 0;
}
main .number_items select{
  border-radius:8px;
  margin-left:15px;
  padding:8px 9px;
  font-size: 1.6rem;
  height: 40px;
}
main .table-wrap-product{
  overflow:auto;
}
main .table-wrap-product th,main .table-wrap-product td{
  white-space:nowrap;
}
main .table-sticky th,
main .table-sticky td{
  white-space:nowrap;
}
main .table-sticky th{
  position: sticky;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  main .search_product_submit{
    display:block;
    padding:20px 10px;
  }
  main .search_product_submit .form_1{
    margin-right:0;
    width:100%;
    margin-bottom:20px;
  }
  main .search_product_submit .form_2{
    justify-content: center;
  }
  main .search_product_submit .form_2 select{
    width:100%;
    height: 40px;
  }
}


/*----------会員企業共通----------*/
main .member_order_detail ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
main .member_order_detail ul::after{
  content:"";
  width:31%;
}
main .member_order_detail li{
  border-bottom: 1px #D9D9D9 solid;
  padding:10px 0;
  width:31%;
}
main .member_order_detail li a{
  color:#000;
  text-decoration:none;
}
main .member_order_detail li a:hover{
  text-decoration:underline;
}
main .member_order ul{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:40px;
}
main .member_order li{
  margin-right:15px;
}
main .member_order li a{
  border: 2px #0086DB solid;
  border-radius:6px;
  display:inline-block;
  padding:5px 20px;
  text-decoration:none;
}
main .member_order li a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  main .member_order ul{
    justify-content:space-between;
  }
  main .member_order li{
    margin-bottom:10px;
    margin-right:0;
    width:32%;
  }
  main .member_order li a{
    text-align:center;
    width:100%;
  }
  main .member_order_detail ul{
    display:block;
  }
  main .member_order_detail li{
    width:100%;
  }
}

label.error {
  display: block;
  color: var(--color-red) !important;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 18px;
  font-size: 13px !important;
  font-size: 1.3rem !important;
  position: relative;
  text-align: left;
  background: rgba(252, 66, 74, 0.1);
  border-radius: 6px;
  padding: 12px 16px;
}