@charset "utf-8";
/* ----------------------------------------------------------------
  共通
----------------------------------------------------------------- */

/*-------------------トップページ-------------------*/
body{font-family: "ヒラギノ角ゴシック（Hiragino Sans）"; color: #212121;min-height: 100vh;position: relative;padding-bottom: 58px;box-sizing: border-box;}
.pc { display: inline-block;}
.sp { display: none;}
a{transition: 0.1s;}
a:hover{opacity: 0.7;}
p{line-height: 200%;}
dt{font-weight: 300;}
th{font-weight: 300;}
h3{ font-weight: bold; text-align: center; display: inline-block;font-size: 25px;letter-spacing: 0.1em;background-color: #002F6C;color: white;padding: 20px 88px;}
.title{display:inline-block; border-left: 5px solid #DB002A;border-right: 5px solid #DB002A;padding: 0 10px;}


/*-------------------ヘッダー-------------------*/
.topbar{background-color: #002F6C;padding: 0 13px;text-align: center;display: block;width: 100%;}
.topbar p{color: white;font-size: 15px; padding: 5px 0;letter-spacing: 0.1em;}
h1 img{width:350px;}
h1{display: inline;}
.header {display: flex; justify-content: space-between; padding: 10px; align-items: center;}
header .pc ul{display: flex;vertical-align: middle;}
header .pc.gNav{width: 700px !important;}
/* header li{position: relative; transition: color 0.5s; letter-spacing: 0.1em;font-weight: bold; padding-right: 70px;} */
/* header li + li::before{position: absolute;top:0;bottom:0; content: ""; background: #002F6C;width: 2px;height: 20px;display: inline-block;margin-left: 70px;} */
header .pc li:hover { color: gray;}
header .pc li{transition: color 0.5s; letter-spacing: 0.1em;font-weight: bold; padding: 0; position: relative;width: 100%;display: -moz-box;display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; align-items: center; -webkit-align-items: center; -ms-flex-align: center; height: 50px;}
header .pc li:before{content: '';position: absolute; background: #002F6C; width: 2px; height: 30px; top: 50%; left: 0; transform: translateY(-50%);}
header .pc li:first-child:before{content: none;}

/*-------------------メインビジュアル　PC版-------------------*/
.mv_relative{position: relative;}
.message{position: absolute; width:35vw;height: auto; top: 31vw; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.slick-dots{	bottom: 10px!important; }
.slick-dots li button{color: white !important;}
.slick-dots li button:before{color: white!important;}
/*-------------------company-------------------*/
.company{max-width: 1000px; margin: 75px auto; text-align: center;background-image: url("../img/earth.png");background-size: contain;background-repeat: no-repeat;background-position: center;}
.company h4{font-size: 20px;font-weight: 600;margin: 50px 0;}
.company ul{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 50px 0;}
.company ul li{max-width: 480px;}
.company p{font-weight: 600;text-align: left;max-width: 850px;margin: 0 auto 70px;}
.company .btn{padding: 21px 30px 21px 100px;border: 1px solid #212121;border-radius: 30px;background-color: white;font-weight: bold;}
.company .btn::after{ content: "";display: inline-block; width: 9px; height: 11px; background-image: url(../img/btn.png);background-size: contain;vertical-align: middle;margin-left: 70px;background-repeat: no-repeat;}

/*-------------------product-------------------*/
.product{max-width: 1000px; margin: auto; padding: 75px 0; text-align: center;}
.product_wrap{background-image: url("../img/bg_sea_pc.jpg");background-size: cover;background-repeat: no-repeat;background-position: center;}
.product ul{margin-top: 40px; display: flex; flex-wrap: wrap; gap: 15px;justify-content: space-around;}
.product li{transition: 0.2s;border-bottom: 11px solid #7791B2; width: 300px; background-color: white;padding: 20px 0;text-align: center;display: inline-block;}
.product li:hover{opacity: 0.7;}
.name{font-size: 20px;font-weight: bolder;text-align: center;}
.en{font-size: 18px; font-family: "Montserrat";text-align: center;letter-spacing: 0.1em;}
hr{margin: 20px 0;}
.modal-window p{line-height: 200%;}
/* 開くボタン */
.button-open { display: block; margin: 0 auto; border: 0;padding: 0; background-color: transparent; cursor: pointer;}
/* モーダルウィンドウ */
.modal-window { width: 380px;background: white;position: fixed; display: none; top: 50%; left: 50%;transform: translate(-50%, -50%); border-radius: 5px; z-index: 20; padding: 30px; max-height: 90%; overflow: auto;}
/* 閉じるボタン */
.button-close { position: absolute; display: inline-block;text-align: center;box-sizing: border-box;top: 40px; right:20px;}
#member_filter .set{ display: flex; gap:50px}

.overlay_member { display: none; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; z-index: 10;}

/* 表示領域外へはスクロールさせない */
.no_scroll { overflow: hidden;}


/*-------------------contact-------------------*/
.contact_wrap{background: url(../img/bg_ship_pc.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;}
.contact{max-width: 900px; margin: auto; padding: 60px 0; text-align: center;text-align: center;}
.contact .white_wrap{background-color: white; background-color:rgba(255, 255, 255, 0.8);padding: 40px 0 70px;}
.contact p{padding: 30px 0 60px;}
.contact .btn{padding: 21px 30px 21px 60px;border: 1px solid #212121;border-radius: 30px;background-color: white;font-weight: bold;}
.contact .btn::after{ content: "";display: inline-block; width: 9px; height: 11px; background-image: url(../img/btn.png);background-size: contain;vertical-align: middle;margin-left: 20px;background-repeat: no-repeat;}
.recaptcha-field div{ margin: 0 auto;}
.area_form  .err{
  font-size: 14px;
  color: red;
}

.form_wrap .btn:disabled{
  opacity: 0.7;
}

/*-------------------入力内容確認ページ-------------------*/
/* .contact_wrap form p{display: inline-block;}
.contact_wrap .ask{vertical-align: top;padding-top: 15px;}
.under_form{max-width: 700px;}
.under_form button{margin: 0 50px 0 0; display: inline-block;padding: 20px;}
.under_form button:last-child{margin: 0;}
.under_form h3{width: 300px;}
.under_form .label{width:300px;}
.under_form .under_read{margin-bottom: 50px;}
.under_form .item{margin-bottom: 15px;}
.under_form .button{text-align: center; margin: 50px 0 100px 0;}
.complete_form p{margin-bottom: 100px;}
.complete_form{max-width: 700px;} */
  /* -------------------共通フッター------------------- */
.footer_wrap {margin: auto; padding:20px 0; text-align: center; background-color: #002F6C;color: white;letter-spacing: 0.1em;position: absolute;bottom: 0;width: 100%;}


  /* -------------------会社概要ページ------------------- */
.company_wrap section{margin: auto; text-align: center;margin-top: 100px;}
.company_wrap dl { display: flex; flex-wrap: wrap; border: 1px solid #ccc; border-top: none; max-width: 750px; width: 90%; margin: 50px auto 0px}
.company_wrap dt { background: #ddd;  width: 30%;padding: 10px; box-sizing: border-box; border-top: 1px solid #ccc;}
.company_wrap dd { line-height: 180%; padding: 10px 10px 10px 2em; margin: 0; border-left: 1px solid #ccc; border-top: 1px solid #ccc; width: 70%; background: #fff; box-sizing: border-box; text-align: left;}
.company_wrap p{margin-top:60px;}
.company_wrap h4{font-size: 20px;font-weight: bold;margin-top: 60px;}
.company_wrap .place dl{margin-top: 20px;}
.company_wrap .place {margin-bottom: 100px;}
.company_wrap .place a{color: #1B49B2;font-weight: bold;}

  /* -------------------お問い合わせページ------------------- */
.form_wrap{max-width: 800px; margin: 75px auto; }
.form_wrap .comment{padding: 60px 0 50px;}
.form_wrap .title_wrap{text-align: center;}
.form_wrap th{width: 200px; text-align: left; white-space: nowrap;padding-right: 30px;}
.form_wrap input[type="text"] { border: 1px solid #ccc; padding: 10px; margin-right: 5px;}
.form_wrap td {  padding-bottom: 20px; border: none;}
.form_wrap input[type="email"], #index_inquiry input[type="url"] {border: 1px solid #ccc; padding: 10px; margin-right: 5px;}
.form_wrap textarea { width: 100%; height: 200px;border: 1px solid #ccc;padding: 10px; margin-right: 5px;}
.form_wrap .btn{transition: 0.1s; background: url(../img/btn.png) right 30px center no-repeat;background-size: 10px; padding: 21px 100px 21px 100px;border: 1px solid #212121;border-radius: 30px;background-color: white;font-weight: bold;}
.form_wrap .btn:hover{opacity: 0.7;}
/* .form_wrap .btn::after{ content: "";display: inline-block; width: 9px; height: 11px; background-image: url(../img/btn.png);background-size: contain;vertical-align: middle;margin-left: 70px;background-repeat: no-repeat;} */
.form_wrap .form_btn{text-align: center;margin-top: 30px;}
.form_wrap .indent{text-indent: -1em;padding-left: 1em;}
.form_wrap .attention{margin: 50px 0 80px;}
#index_inquiry input[type="text"], #index_inquiry input[type="email"], #index_inquiry input[type="url"]{width: 100%;}

/*-------------------送信完了ページ-------------------*/
.complete_wrap{max-width: 800px; margin: 75px auto; }
.complete_message{margin-top: 60px;}



/* ----------------------------------------------------------------
  タブレット
----------------------------------------------------------------- */
/*------------------- 共通------------------- */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  br { display: none; }
  .pc { display: none;}
  .sp { display: inline-block; }
  .ipad{display: inline-block;}
  dt{font-size: 14px;}
  dd{font-size: 14px;}
  th{font-size: 14px;}
  td{font-size: 14px;}
  p{font-size: 14px;}
  h2 img{top: 35vw;}

  /*-------------------ハンバーガーメニュー-------------------*/
.topbar{background-color: #002F6C;padding: 0 13px;text-align: center;display: block;width: 100%;}
#hamburger .btn-gNav { position: fixed; top: 70px; right: 30px; width: 35px; height: 24px; z-index: 3; box-sizing: border-box; cursor: pointer; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span { position: absolute; width: 100%; height: 2px; background: black; border-radius: 1px; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span:nth-child(1) { top: 0;}
#hamburger .btn-gNav span:nth-child(2) { top: 10px;}
#hamburger .btn-gNav span:nth-child(3) { top: 20px;}
#hamburger .btn-gNav.open span:nth-child(1) { background: 212121; top: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
#hamburger .btn-gNav.open span:nth-child(2),
#hamburger .btn-gNav.open span:nth-child(3) { top: 6px; background: 212121; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
#gNav { position: fixed; top: 0; right: -100%; width: 50%; height: 100%; background: white; font-size: 16px; box-sizing: border-box; z-index: 2; padding-top: 50px; transition: 0.3s;}
#gNav.open { right: 0px;}
#gNav .gNav-menu { width: 90%; margin: auto; font-size: 2vw; border-bottom: solid 1px white; padding-bottom: 50px;}
#gNav .gNav-menu li { display: block; padding: 20px 30px; line-height: 100%;}
#gNav .gNav-menu li a { text-decoration: none; font-weight: bold;}
#gNav .hamburger_footer { text-align: center; padding-top: 20px;border-top: 1px solid #212121;width: 90%;margin: auto;}
/*-------------------トップページ-------------------*/
  .company{max-width: 90%;}

  .product{max-width: 90%;}
  .product li{width: 30%; padding: 15px 0;}
  .contact{max-width: 90%;}

}
/* ----------------------------------------------------------------
  SP
----------------------------------------------------------------- */

/*-------------------共通-------------------*/
@media screen and (max-width: 767px) {
.pc { display: none; }
.sp { display: inline-block;}
p{font-size: 14px;}
dt{font-size: 14px;}
dd{font-size: 14px;}
h3{font-size: 20px; padding: 13px 70px;}
th{font-size: 14px;}
td{font-size: 14px;}

/*-------------------ヘッダー-------------------*/
header{display: block;}
h1{display: block;}
h1 img{position: initial !important; }

/*-------------------ハンバーガーメニュー-------------------*/
#hamburger .btn-gNav { position: fixed; top: 23px; right: 20px; width: 35px; height: 24px; z-index: 3; box-sizing: border-box; cursor: pointer; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span { position: absolute; width: 100%; height: 2px; background: black; border-radius: 1px; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span:nth-child(1) { top: 0;}
#hamburger .btn-gNav span:nth-child(2) { top: 10px;}
#hamburger .btn-gNav span:nth-child(3) { top: 20px;}
#hamburger .btn-gNav.open span:nth-child(1) { background: #333; top: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
#hamburger .btn-gNav.open span:nth-child(2),
#hamburger .btn-gNav.open span:nth-child(3) { top: 6px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
#gNav { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: white; font-size: 16px; box-sizing: border-box; z-index: 2; padding-top: 50px; transition: 0.3s;}
#gNav.open { right: 0px;}
#gNav .gNav-menu { width: 90%; margin: auto; font-size: 2vw; border-bottom: solid 1px #333; padding-bottom: 50px;}
#gNav .gNav-menu li { display: block; padding: 20px 30px; line-height: 100%;}
#gNav .gNav-menu li a { color: #333e; text-decoration: none;font-size: 18px;font-weight: bold;}
#gNav .hamburger_footer { text-align: center; padding-top: 20px;}
#gNav small { color: #333;}

/*-------------------メインビジュアル-------------------*/
.mv_wrap .slick img{height: 500px;object-fit: cover;}
.mv_wrap .message { position: absolute; width: 25vw; height: auto; top: 81vw; left: 28%;}


/*-------------------トップページ-------------------*/
#gNav { width: 100%; }
#gNav .gNav-menu { font-size: 5vw; text-align: left;}
#gNav .gNav-menu li {font-size: 24px;}
header{padding: 0;border-top: none;}
h1 img{width:240px;position: absolute;top: 30px; left: 30px;}
.mv_wrap div{position: relative:}
h2{position: absolute;}
h2 img{ width:70vw;top: 0vw;}

.company{max-width: 90%; background-image: url(../img/earth_sp.png);}
.company h4{margin: 20px 0; font-size: 16px;line-height: 200%;letter-spacing: 1.1;}
.company p{margin-bottom: 35px;}
.company .btn{font-size: 14px;padding: 15px 20px 15px 65px;}
.company .btn::after{margin-left: 40px;}

.name{font-size: 14px;}
.en{font-size: 12px;}
.product{  max-width: 90%;  padding: 60px 0;}
.product li{width: 45%; padding: 15px 5px;    border-bottom: 7px solid #7791B2;}

.modal-window{ width: 90%;}
hr{ margin: 15px 0;}

.contact .btn{font-size: 14px;}
.contact .white_wrap{margin: 0 10px;padding: 30px 0 60px;}
.contact{padding: 35px 0;}




  /* -------------------会社概要ページ------------------- */
  .company_wrap section{margin-top: 60px;}
  .company_wrap dl{margin-top: 40px;}
  .company_wrap{max-width: 95%;margin: auto;}
  .company_wrap p{margin-top: 40px;}
  .company_wrap dd{padding: 7px 7px 7px 14px;}
  .company_wrap dt{padding: 7px;line-height: 180%;}



  /* -------------------お問い合わせページ------------------- */
  .form_wrap input[type="text"], .form_wrap input[type="email"], .form_wrap input[type="url"], .form_wrap input[type="fax"],.form_wrap input[type="url"]{width: 330px;}
.form_wrap{max-width: 90%;}
.form_wrap th{display: block;}
.form_wrap input[type="text"]{display: block;}
.form_wrap textarea { width: 100%; height: 200px;}
.form_wrap tr{display: block;}
.form_wrap th{margin-bottom: 10px;width: 100%;}

/*-------------------送信完了ページ-------------------*/
.complete_wrap{max-width: 90%;margin: 75px auto 0;}
.complete_message { margin-top: 40px;}
}