@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メイン
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* -------------------------------------------------------------------------------------------------
   * セクショニング
/* ---------------------------------------------------------------------------------------------- */

#main {}

#main-contents {}

#main-contents div.body {
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

#main-contents .column ~ .column {
  margin-top: 40px;
}

/* :::::::: ブレイクポイント :::::::: */

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

 #main-contents div.body {
   max-width: 100%;
   padding-left: 20px;
   padding-right: 20px;
   margin: 0 auto;
 }
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:960px) {
  /*ブラウザの幅が736px以下の時*/
  #main-contents > .section {
    padding-top: 4em;
    padding-bottom: 4em;
  }
}

/* :::::::: ブレイクポイント :::::::: */

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

#main-contents > .section {
  padding-top: 2em;
  padding-bottom: 2em;
}

#main-contents div.body {
  max-width: 100%;
  padding: 0 1em;
  margin: 0 auto;
}

#main-contents .column ~ .column {
  margin-top: 20px;
}

}


/* ****************************************************************************************************
   * ニュース・トピックス
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.topics {
  position: relative;
  padding-top: 90px;
  padding-bottom: 140px;
  overflow: hidden;
}
.topics .body {
  max-width: 1120px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:960px) {
  /*ブラウザの幅が736px以下の時*/
}

/* ----------------------------------------------------------------------------------------------------
   * リスト
/* ------------------------------------------------------------------------------------------------- */

.topics ul.list {
  max-width: 960px;
  margin: 40px auto 0;
  border-top: 1px solid #cccccc;
}
.topics ul.list li {
  border-bottom: 1px solid #cccccc;
}
.topics ul.list li a {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1em;
  transition: 0.3s;
  color: #333333;
}
.topics ul.list li a:hover {
  background: #f3f3f3;
  opacity: 1;
}
.topics ul.list li a .meta {
  display: flex;
  min-width: 200px;
}
.topics ul.list li .day {
  font-weight: bold;
  color: var(--c-pink);
  font-size: 1.4rem;
}
.topics ul.list li .text {
  font-size: 1.6rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:960px) {
  /*ブラウザの幅が736px以下の時*/
  .topics ul.list {
    max-width: 100%;
    margin: 20px auto 0;
  }
  .topics ul.list li a {
    display: block;
    padding: 1em;
  }
  .topics ul.list li a > div {
    display: flex;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * ボタン
/* ------------------------------------------------------------------------------------------------- */

.topics .link-btn {}

.topics .link-btn .btn {
  margin-right: 0;
  margin-left: auto;
}
.topics .link-btn .btn:hover {
  opacity: 1;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .topics .link-btn .btn {
    margin-right: auto;
    margin-left: auto;
  }
}


/* ****************************************************************************************************
   * AGVラインナップ
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.lineup {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
  background: #f3f3f3;
}
.lineup .body {
  position: relative;
  max-width: 1080px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width: 960px) {
  /*ブラウザの幅が736px以下の時*/
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

#main .lineup .title::before {
  font-size: 6.4rem;
}
#main .lineup .title {
  font-size: 1.8rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #main .lineup .title::before {
    font-size: 3.2rem;
  }
  #main .lineup .title {
    font-size: 1.6rem;
  }
}


/* ----------------------------------------------------------------------------------------------------
   * 内容
/* ------------------------------------------------------------------------------------------------- */

.lineup .item ~ .item {
  margin-top: 60px;
}
.lineup .contents.layout-flex-2 {}
.lineup .contents.layout-flex-2.row {
  flex-direction: row-reverse;
}

.lineup .contents.layout-flex-2 .title-1 {
  position: relative;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 0.1em 1.0em;
}
.lineup .contents.layout-flex-2 .title-1::before {
  content: "";
  display: block;
  border-right: 5px solid var(--c-pink);
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width: 960px) {
  /*ブラウザの幅が736px以下の時*/
  .lineup .contents.layout-flex-2 {
    display: block;
  }
  .lineup .contents.layout-flex-2 .images {
    width: 100%;
    text-align: center;
    margin-top: 1em;
  }
  .lineup .contents.layout-flex-2 .detail {
    margin-top: 1em;
    width: 100%;
  }
  .lineup .contents.layout-flex-2 .title-1 {
    font-size: 1.8rem;
  }
}


/* ****************************************************************************************************
   * 当社設立のご挨拶
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.greeting {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}
.greeting .body {
  position: relative;
  max-width: 1080px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width: 960px) {
  /*ブラウザの幅が736px以下の時*/
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

#main .greeting .title::before {
  font-size: 6.4rem;
}
#main .greeting .title {
  font-size: 1.8rem;
}

.greeting .subtitle {
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}
.greeting .lead {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.greeting .lead .text {
  margin-top: 50px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #main .greeting .title::before {
    font-size: 3.2rem;
  }
  #main .greeting .title {
    font-size: 1.6rem;
  }
  .greeting .subtitle {
    font-size: 1.8rem;
  }
  .greeting .lead .text {
    margin-top: 20px;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * 内容
/* ------------------------------------------------------------------------------------------------- */

.greeting .policy {
  max-width: 540px;
  margin: 60px auto 0;
}
.greeting .policy ul {}
.greeting .policy ul li {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.greeting .policy ul li div.text-1 {
  width: 40%;
}
.greeting .policy ul li div.text-2 {
  width: 60%;
}

.greeting .sign {
  margin-top: 40px;
  text-align: right;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:960px) {
  /*ブラウザの幅が736px以下の時*/
  .greeting .policy {
    max-width: 100%;
    margin: 30px auto 0;
  }
  .greeting .policy ul li {
    display: block;
  }
  .greeting .policy ul li div.text-1 {
    width: 100%;
    text-align: center;
  }
  .greeting .policy ul li div.text-2 {
    width: 100%;
    text-align: center;
  }
  
  .greeting .sign {
    margin-top: 20px;
    text-align: right;
  }
}


/* ****************************************************************************************************
   * 会社概要
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.company {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
  background: #f3f3f3;
}
.company .body {
  position: relative;
  max-width: 1080px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width: 960px) {
  /*ブラウザの幅が736px以下の時*/
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

#main .company .title::before {
  font-size: 6.4rem;
}
#main .company .title {
  font-size: 1.8rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #main .company .title::before {
    font-size: 3.2rem;
  }
  #main .company .title {
    font-size: 1.6rem;
  }
}

.company table td a {
  color: #aaa;
  text-decoration: underline;
}
.company table td a:hover {
  color: #aaa;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------------------------------
   * 代表者
/* ------------------------------------------------------------------------------------------------- */

.company table td .layout-2 {
  justify-content: flex-start;
}
.company table td .layout-2 .text-1 {
  width: 10em;
}
.company table td .layout-2 .text-2 {}


/* ****************************************************************************************************
   * 特許取得
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.patent {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}
.patent .body {
  position: relative;
  max-width: 1080px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width: 960px) {
  /*ブラウザの幅が736px以下の時*/
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

#main .patent .title::before {
  font-size: 6.4rem;
}
#main .patent .title {
  font-size: 1.8rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #main .patent .title::before {
    font-size: 3.2rem;
  }
  #main .patent .title {
    font-size: 1.6rem;
  }
}

.patent table td a {
  color: #aaa;
  text-decoration: underline;
}
.patent table td a:hover {
  color: #aaa;
  text-decoration: none;
}

/* ****************************************************************************************************
   * メールでのお問い合わせ
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.form {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}
.form .body {
  position: relative;
  max-width: 1000px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width: 960px) {
  /*ブラウザの幅が736px以下の時*/
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

.form .title-1 {
  position: relative;
  font-size: 2.4rem;
  font-weight: bold;
  color: #444444;
  text-align: center;
  background: #f2f2f2;
  padding: 0.3em 0.5em;
  border-radius: 10px;
}
.form .title-1::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 5px;
  background: var(--c-pink);
  border-radius: 60px;
}
/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .form .title-1 {
    font-size: 1.8rem;
  }
}

.form .text {
  text-align: center;
}
.form .text a {
  color: var(--c-pink);
  text-decoration: underline;
}
.form .text a:hover {
  text-decoration: none;
}
.form .text a[target="_blank"]::after {
  content: "";
  display: inline-block;
  background: url("../../_images/_common/detail-icon.png") no-repeat;
  width: 14px;
  height: 14px;
  margin-left: .4em;
}

.form .text .hissu {
  color: var(--c-pink);
}

/* ****************************************************************************************************
   * お問い合わせフォーム
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

#contact-form-2 {}

#contact-form-2 .message {
  text-align: left;
}
#contact-form-2 .text a {
  color: var(--c-pink);
  text-decoration: underline;
}
#contact-form-2 .text a:hover {
  color: var(--c-pink);
  text-decoration: none;
}

/* ----------------------------------------------------------------------------------------------------
   * 検索フォーム項目
/* ------------------------------------------------------------------------------------------------- */

#main label {
  vertical-align: middle;
  display: inline-block;
}
#main input[type="text"] {
  width: 100%;
  font: inherit;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
}
#main input[name="namae"] {}
#main input[name="kana"] {}
#main input[type="email"],
#main input[type="email2"] {}
#main input[name="zip"],
#main input[name="pref"] {
  width: 12em;
}
#main select {
  padding: 0.55em 0.75em 0.55em 0.55em;
  cursor: pointer;
  font: inherit;
  border: 1px solid #dddddd;
  border-radius: 8px;
  box-shadow: none;
  background: none;
  background: #fff;
  width: 20em;
}
#main textarea {
  max-width: 100%;
  width: 100%;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  padding: 0.5em;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:960px) {
  /*ブラウザの幅が736px以下の時*/
  #main select {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * 車体寸法
/* ------------------------------------------------------------------------------------------------- */

#main input[name="wide"],
#main input[name="length"],
#main input[name="height"],
#main input[name="transfer"],
#main input[name="capacity"],
#main input[name="speed"],
#main input[name="mileage"],
#main input[name="time"] {
  width: 8em;
  padding: 0.2em;
  margin-bottom: 1em;
}

/* ----------------------------------------------------------------------------------------------------
   * テーブルレイアウト
/* ------------------------------------------------------------------------------------------------- */

#contact-form-2 table.default > tbody > tr > th {
  font-size: 1.6rem;
}

#main input {
  max-width: 100%;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  padding: 0.5em;
}

#main .privacy-check {
  font-size: 1.6rem;
  text-align: center;
}
#main .privacy-check a {
  text-decoration: underline;
}
#main .privacy-check a:hover {
  text-decoration: none;
}
#main .privacy-check label {
  cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------
   * 入力　確認　完了
/* ------------------------------------------------------------------------------------------------- */

#contact-form-2 .message {
  margin-top: 40px;
}

#main *[class*="mwblock-"],
#main *[class*="mwinline-"] {
  display: none;
}

#main .mw_wp_form_preview .mwblock-preview {
  display: block;
  margin-top: 40px;
}

#main .mw_wp_form_input .mwblock-input {
  display: block;
  margin-top: 40px;
}

/* :::::::: ブレイクポイント :::::::: */

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

#contact-form-2 .message {
  font-size: 1.5rem;
  text-align: left;
  margin-top: 1em;
}
#main .mw_wp_form_preview .mwblock-preview {
  display: block;
  margin-top: 0;
}
#main .mw_wp_form_input .mwblock-input {
  display: block;
  margin-top: 0;
}

}

#main .mw_wp_form_preview .mwinline-preview {
  display: inline;
}

#main .mw_wp_form_input .mwinline-input {
  display: inline;
}


#main .mw_wp_form_input .mwblock-message a {
  color: #fe0002;
}
#main .mw_wp_form_input .mwblock-message a:hover {
  color: #fe0002;
  text-decoration: underline;
}

/**
* 必須
*/
#main span.hissu {
  color: var(--c-pink);
  font-weight: bold;
  padding: 0.1em;
  line-height: 1.4;
}
table tr.require > th span {
  position: relative;
}
table tr.require > th span:before {
  content: '※';
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  color: var(--c-pink);
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: -1.25em;
  transform: translateY(-50%);
}


/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  table tr.require > th:after {
    margin-right: -5px;
    margin-top: -2px;
  }
}



/* ****************************************************************************************************
   * フォームボタン
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 確認画面へ進む / 送信する
/* ------------------------------------------------------------------------------------------------- */

#main .form-button {
  text-align: center;
  transition: 0.3s;
  display: flex;
  justify-content: center;
}
#main .form-button button {
  transition: 0.3s;
}

#main .form-button .btn {
  width: 210px;
  cursor: pointer;
  color: #fff;
  background: #000;
  display: block;
  line-height: 1.4;
  margin: 0;
}
#main .form-button .btn:hover {
  background: var(--c-black);
  opacity: 1;
}
#main .form-button .btn:hover:after {
  right: 0.5em;
}
#main .form-button .btn span {
  display: block;
  color: #fff;
  font-size: 1.4rem;
  font-family: 'Orbitron',sans-serif;
  font-weight: 600;
}

#main .form-button .btn > input {
  background: none;
  padding: 0;
  border: 0;
  margin: 0 auto;
}
/* ローディング画像*/
div.wpcf7 .wpcf7-spinner {
  display: none;
}

#main .form-button .return.btn {
  border: none;
  cursor: pointer;
  width: auto;
  background: none;
  color: #000;
  box-shadow: none;
  margin: 0;
}
#main .form-button .return.btn::after {
  display: none;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #main .form-button .btn {
  }
}

/* ----------------------------------------------------------------------------------------------------
   * ボタン（戻る）
/* ------------------------------------------------------------------------------------------------- */

.contact .link-btn .btn.return {
  font-size: 1.6rem;
  width: 350px;
  padding: 25px 3em;
  font-weight: 900;
}
.contact .link-btn .btn.return::after {
  border: 0px;
  border-bottom: solid 3px #fff;
  border-left: solid 3px #fff;
  left: 15px;
  right: auto;
  transition: 0.2s left;
}
.contact .link-btn .btn.return:hover::after {
  left: 10px !important;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .contact .link-btn .btn.return {
    font-size: 1.6rem;
    width: auto;
    padding: 20px 3em;
  }
}