@charset "utf-8";
/*
Theme Name: Asairo Design
Author: asairo desgin
Author URI: https://asairo.com
Description: 浅色デザインのスタイルテーマ
Version: 2021．02.27
Text Domain: asairo-design
*/

/*--------------------------------------------------
  reset css
--------------------------------------------------*/
/* margin, paddingの幅を考慮せずに幅指定を可能にする */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
  padding: 0; margin: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html {
  /*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  /*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
input, textarea,{ padding: 0; margin: 0; }
input[type="button"],input[type="submit"] { -webkit-appearance: none; }
ol, ul{ list-style:none; }
table{ border-collapse: collapse; border-spacing:0; }
caption, th{ text-align: left; }
a:focus { outline:none; }
img { width: 100%; height: auto; display: block; vertical-align: bottom; }
.inline_block { display: inline-block; *display: inline; *zoom: 1; }
/* 入力フォームのパーツデザイン */
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
select, textarea, .field {
  padding: 0 14px; display: block; height: 44px; line-height: 44px;
  vertical-align: middle; box-shadow: none; border: 0;
  width: 100%; background-color: #fff; font-size: 16px;
  -webkit-transition: background-color 0.24s ease-in-out;
  transition: background-color 0.24s ease-in-out;
}
input::-webkit-input-placeholder, input:-ms-input-placeholder, input::-moz-placeholder {
  color: #ccc; font-weight: normal;
}
select {
  -webkit-appearance: none;
  /* 1 */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 97.5% center;
}


/*--------------------------------------------------
  reset css
--------------------------------------------------*/
/* PC対応 */
@media screen and (min-width: 641px) {
  .pc_view { display:block; }
  .sp_view { display:none; }
}

/* スマートフォン対応 */
@media screen and (max-width: 640px) {
  .pc_view { display:none; }
  .sp_view { display:block; }
}

/*--------------------------------------------------
  リンク
--------------------------------------------------*/
/*【注意】順番を入れ替えると正常に動作しなくなります*/
a {
  color: #333; text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s;
  -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;
}
a:visited { color: #333; }
a:hover { color: #333; /*background: rgba(255,255,255,0.8);*/ opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80); }
a:active { color: #333; }
a.underline { text-decoration: underline; }


/*--------------------------------------------------
  画像
--------------------------------------------------*/


/*--------------------------------------------------
  装飾
--------------------------------------------------*/
/* margin */

/* padding */

/* 位置揃え */

/* フォント */
html, body { width: 100%; height: 100%; color: #333; background-color: #FFF; line-height: 1.6;  }
html { font-size:62.5%; }   /* ！！！消去厳禁！！！ */
body { font-size: 1.6rem; }
.bold { font-weight: bold; }
em { color: #25764d; }
strong, b { font-weight: 600; }
p { margin: 0 0 1em 0; }
.ttl_block { text-align: center; margin-bottom: 60px; color: #0068B1; }
.ttl_second { display: inline-block; font-family: 'Lato', sans-serif; font-style: italic; border-bottom: 1px solid #0068B1; color: #0068B1; }

/* デフォルトフォントサイズ */
.fs50 { font-size: 50px; font-size: 5.0rem; }
.fs46 { font-size: 46px; font-size: 4.6rem; }
.fs42 { font-size: 42px; font-size: 4.2rem; }
.fs40 { font-size: 40px; font-size: 4.0rem; }
.fs34 { font-size: 34px; font-size: 3.4rem; }
.fs30 { font-size: 30px; font-size: 3.0rem; }
.fs26 { font-size: 26px; font-size: 2.6rem; }
.fs24 { font-size: 24px; font-size: 2.4rem; }
.fs20 { font-size: 20px; font-size: 2.0rem; }
.fs18 { font-size: 18px; font-size: 1.8rem; }
.fs16 { font-size: 16px; font-size: 1.6rem; }
.fs14 { font-size: 14px; font-size: 1.4rem; }
.fs12 { font-size: 12px; font-size: 1.2rem; }
.fs10 { font-size: 10px; font-size: 1.0rem; }



/* PC, TAB, SP共通 */
/* clearfixを使用する場合は、親要素のclassに「cf」を追加する */
.cf:after { content: ""; clear: both; display: block; }



/*--------------------------------------------------
  メインスタイル開始
--------------------------------------------------*/ 
/*--------------------------------------------------
                全サイズの基盤スタイル
--------------------------------------------------*/

  #main { margin: 0 auto; width: 100%; font-size: 16px; font-size: 1.6rem; }
  #content { margin: 0 auto; width: 100%; }
  .wrap { padding: 0 0%; margin: 0 auto 5%; width: 100%; max-width: 1280px; }
  .visual { position: relative; margin: 0 auto 0; width: 100%; max-width: 2000px; height: 150px;
    background-color: #fff; background-repeat: no-repeat; background-position: center bottom; background-size: 100%; }
  .visual img { width: 100%; }
  .visual h1 { padding: 30px 0 0 0; text-align: center; font-size: 40px; font-size: 4.0rem; font-weight: 600; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; position: relative; z-index: 1; }
  .visual h1 span { display: block; font-size: 30%; color: #e8e3e3; position: absolute; top: 15px; left: 0; right: 0; margin: 0 auto; }

  a.btn { }

  .flex { display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; align-items: stretch; }

  /* 矢印アイコン */
  .arrow { position: relative; display: inline-block; padding: 0 16px 0 0; vertical-align: middle; text-decoration: none; }
  .arrow::before, .arrow::after {position: absolute;top: 0;bottom: 0;right: 0;margin: auto;content: "";vertical-align: middle;}
  .maru::after { right: 5px; width: 3px; height: 3.2px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .maru:hover::after { border-color: #fff; }


  /* font-family */
  .mincho { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
  .gothic { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif; }

  .disc { list-style: disc; padding: 0 0 0 1.5em; }
  .circle { list-style: circle; padding: 0 0 0 1.5em; }

/* 上からフェードイン */
.slide-top {
  opacity: 0;
  transform: translate(0, -20px);
  transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
  opacity: 0;
  transform: translate(-20px, 0);
  transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
  opacity: 0;
  transform: translate(20px, 0);
  transition: all 1s ease-out;
 }

  /*--------------------------------------------------
  ヘッダー
  --------------------------------------------------*/
  header { position: relative; z-index: 10; }
  header .wrap { margin: 0 auto; max-width: 1280px; }
  header .inner { width: 100%; padding: 20px 0; }
  header .inner::after { content: ''; display: block; clear: both; }
  header .header_logo { max-width: 385px; float: left; display: block; }
  header .info_block { float: right; text-align: right; margin-right: 20px; }
  header .info_block .tel { color: #0068B1; }
  header .info_block .tel::before { content:''; display: inline-block; background: url(img/icon_tel.svg) no-repeat; width: 18px; height: 28px; margin-right: 10px; }
  header .info_block .add {  }
  header .header_contact { float: right; display: block; padding: 25px 35px; border-radius: 5px; background: #C93232; color: #fff; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); }
  header .header_contact::before { content:''; display: inline-block; background: url(img/icon_mail.svg) no-repeat; width: 27px; height: 18px; margin-right: 1em; }
  header nav { box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); }
  .drawer--left .drawer-nav { display: block!important; padding: 10px 0 5px; overflow: initial; position: initial!important; background: #0068B1; width: 100%; }
  
  .drawer--left .drawer-nav.none { display: none!important; }

  header nav ul.drawer-menu { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; }
  header nav ul li { border-right: 1px solid #fff; }
  header nav ul li:last-of-type { display: none; }
  ul li#menu-item-29 { border-right: none; }
  ul li#menu-item-26 a::before { background: url(img/icon_company.svg) no-repeat; width: 22px; height: 24px; }
  ul li#menu-item-27 a::before { background: url(img/icon_product.svg) no-repeat; width: 28px; height: 24px; }
  ul li#menu-item-28 a::before { background: url(img/icon_strength.svg) no-repeat; width: 20px; height: 24px; }
  ul li#menu-item-32 a::before { background: url(img/icon_news.svg) no-repeat; width: 29px; height: 24px; }
  ul li#menu-item-29 a::before { background: url(img/icon_recruit.svg) no-repeat; width: 29px; height: 24px; }
  header nav ul li a { display: block; padding: 10px 10px; color: #fff!important; text-align: center; font-size: 2.3rem; line-height: 1.4; font-weight: bold; }
  header nav ul li a::before { content:''; display: inline-block; margin-right: 1em; vertical-align: middle; }
  header nav ul li a span { display: block; font-family: 'Oswald', sans-serif; font-size: 1.6rem; }



  /*--------------------------------------------------
  フッター
  --------------------------------------------------*/
  footer .town { display: block; height: 12vw; background: url(img/footer_town.svg) repeat-x; background-size: cover; background-position: center; margin-bottom: 50px; }
  #footer_contact { margin-top: 8vw; }
  #footer_contact h3 { padding: 30px; font-size: 3.0rem; font-weight: bold; }
  #footer_contact .wrap { position: relative; }
  #footer_contact .wrap .flex { background: #FBF9F6; justify-content: flex-start; padding: 70px 45px; }
  #footer_contact .tel { display: inline-block; height: 80px; line-height: 80px; padding: 0 35px; margin-right: 35px; border-radius: 5px; background: #0068B1; color: #fff; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); }
  #footer_contact .tel::before { content:''; display: inline-block; background: url(img/icon_tel_w.svg) no-repeat; width: 22px; height: 33px; background-size: 100%; margin-right: 1em; vertical-align: middle; }
  #footer_contact .mail { display: inline-block; height: 80px; line-height: 80px; padding: 0 35px; border-radius: 5px; background: #C93232; color: #fff; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); }
  #footer_contact .mail::before { content:''; display: inline-block; background: url(img/icon_mail.svg) no-repeat; width: 36px; height: 24px; background-size: 100%; margin-right: 1em; vertical-align: middle; }
  #footer_contact .tel span,
  #footer_contact .mail span { display: inline-block; vertical-align: middle; }

  #footer_contact .image { position: absolute; bottom: 0; right: 0; }
  #footer_contact .text { padding: 0 20px; }


  footer { position: relative; }
  footer nav ul.flex { padding: 10px; margin: 10px auto 10px; justify-content: center; }
  footer nav ul li { margin-right: 70px; }
  footer nav ul li a { color: #0068B1!important; font-size: 1.8rem; }
  footer nav ul li a::before { content:''; display: inline-block; background: url(img/icon_arrow.svg) no-repeat; width: 7px; height: 20px; margin-right: 5px; vertical-align: middle; }
  footer .footer_ring { position: absolute; right: 50px; top: 40px; }
  #f_content { background: #fff; }
  #f_content .block { position: relative; }
  #f_content .block .wrap { max-width: 1155px; }
  #f_content .block .wrap .logo { max-width: 392px; margin-bottom: 40px; display: block; }
  #f_content .add { font-size: 18px; color: #0068B1; }
  .copy { background: #0068B1; padding: 10px 0; text-align: center; font-size: 1.6rem; color: #fff; }

  /* ページトップ */
.pagetop { position: fixed; bottom: 20px; right: 20px; display: block; z-index: 999; padding: 8px 0 0 8px; border-radius: 30px; width: 50px; height: 50px; background-color: rgba(47,47,47,0.6); color: #fff; font-weight: bold; text-decoration: none; text-align: center; }
.pagetop:hover { cursor: pointer; opacity: 0.7; }
.pagetop i { position: relative; display: inline-block; padding-left: 20px; }
.pagetop i::before { content: ''; width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 50%; left: 0; margin-top: -7px; }
.pagetop i::after { content: ''; width: 10px; height: 10px; border: 0px; border-top: solid 1px #fff; border-left: solid 1px #fff; position: absolute; top: 50%; left: 0px; margin-top: -5px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


/* ----------------------------------------
* ページトップボタン 
---------------------------------------- */
.gotop { position: fixed; bottom: 20px; right: 20px; }
.gotop a { display: block; z-index: 999; padding: 15px 0 0 8px; border-radius: 30px; width: 50px; height: 50px; background-color: rgba(47,47,47,0.6); color: #fff; font-weight: bold; text-decoration: none; text-align: center; }
.gotop a:hover { text-decoration: none; opacity: 0.7; }
.gotop i { position: relative; display: inline-block; padding-left: 20px; }
.gotop i::before { content: ''; width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 50%; left: 0; margin-top: -7px; }
.gotop i::after { content: ''; width: 10px; height: 10px; border: 0px; border-top: solid 1px #fff; border-left: solid 1px #fff; position: absolute; top: 50%; left: 0px; margin-top: -12px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


  /* メニュー */
  .fixed_menu_box { position: absolute; top: 40px; right: 30px; width: 50px; }
  .fixed_menu {  }
  .fixed_menu img { width: 100%; }
  /*ACCORDION*/
  .acMenu dt { display:block; cursor:pointer; }
  .acMenu dd { display:none; }

/* dropdown menu */
.drawer-menu { position: relative; width: 100%; }
ul.sub-menu li a { display: block; padding: 10px 20px; }
ul.sub-menu { visibility: hidden; opacity: 0; z-index: 1; }
.drawer-menu > li:hover { -webkit-transition: all .5s; transition: all .5s; }
/* 下矢印 */
.init-bottom:after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 0 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
/* floatクリア */
.drawer-menu:before,
.drawer-menu:after { content: " "; display: table; }
.drawer-menu:after { clear: both; }
.drawer-menu { *zoom: 1; }
.drawer-menu > li { position: relative; width: 100%; }
li ul.sub-menu { position: absolute; top: 40px; background: #004ea2; -webkit-transition: all .2s ease; transition: all .2s ease; display: block; }
li:hover ul.sub-menu { top: 50px; visibility: visible; opacity: 1; }
li ul.sub-menu li { border-right: 1px solid #fff; border-bottom: 1px dotted #fff; }
li ul.sub-menu li:last-of-type { border-bottom: none; }




  /*--------------------------------------------------
  ページの余白設定
  --------------------------------------------------*/
  /* コンテンツとコンテンツの間の余白 */
  #top, #news { padding-top: 0%; }  /* トップページで必要なければ削除すること */
  #main section { margin-bottom: 10%; }

  /* 共通部分 */


  /*--------------------------------------------------
  見出しの設定
  --------------------------------------------------*/
  /* ページの見出し */
  h1 {}
  h2.ttl { }

  .typ { opacity: 0; }
  .typ span { opacity: 0; }


  /*--------------------------------------------------
  固定ページの共通部分
  --------------------------------------------------*/
  /* 固定ページの親要素として使用する */
  #page { letter-spacing: -0.4px; }

  .table { display: table; width: 100%; }
  .table .th, .table .td { display: table-cell; }
  .left { float: left; }
  .right { float: right; }

  .text p { margin-bottom: 1em; }


.breadcrumb { max-width: 1280px; margin: 25px auto 80px; padding: 0; list-style: none; position: relative; z-index: 1; }
.breadcrumb li { display: inline; list-style: none; font-weight: bold; font-size: 20px; color: #B5B5B5; }
.breadcrumb li:after { content: '/'; padding: 0 0.2em; }
.breadcrumb li:last-child:after { content: ''; }
.breadcrumb li a { text-decoration: none; color: #B5B5B5; font-size: 20px; }
.breadcrumb li a:hover { text-decoration: underline; }


  /*--------------------------------------------------
  TOP
  --------------------------------------------------*/
  aside { position: relative; z-index: 0; }

  #top {  }
  #top .wrap { position: relative; }
  #top .wrap::after { display: block; clear: both; content: ''; }

  #top #main_visual .typ { font-family: 'Noto Serif JP', serif; font-size: 70px; color: #fff; font-weight: bold; text-align: center; position: absolute; top: 200px; left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); text-shadow: 0px 2px 20px rgb(0 0 0 / 60%); }
  #top #main_visual { position: relative; background: url(img/top_header_image.jpg) no-repeat; height: 930px; background-size: cover; background-position: center top; z-index: 1; }
  #top #main_visual::before { content: ''; position: absolute; bottom: 0; z-index: 1; background: url(img/top_header_cover.svg) no-repeat; width: 100%; height: 176px; background-size: cover; background-position: center top; }
  #top #main_visual ul { display: flex; align-items: center; justify-content: space-between; max-width: 1035px; width: 100%; margin: 0 auto; background: #0068B1; border-radius: 5px; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); position: absolute; bottom: -40px; left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); z-index: 2; }
  #top #main_visual ul li { border-right: 1px solid #fff; width: 100%; }
  #top #main_visual ul li a { padding: 26px 0; color: #fff; display: block; text-align: center; }
  #top #main_visual ul li a::before { content:''; display: inline-block; margin-right: 1em; vertical-align: middle; }

  #top #iwm { background: url(img/top_iwm.png) no-repeat; height: 517px; background-size: cover; background-position: center top; }
  #top #iwm .block { max-width: 900px; margin: 0 auto; }
  #top #iwm h2 { padding-top: 130px; text-align: center; }
  #top #iwm h2::after { content: ''; display: block; width: 9em; height: 3px; margin: 5px auto 60px; padding: 0; background: linear-gradient(to right, #0068B1 31%,#393939 31%); background: -webkit-linear-gradient(left, #0068B1 31%,#393939 31%); }
  #top #iwm h2 span { color: #0068B1; }
  #top #iwm .block p { text-shadow: 0px 1px 4px rgb(0 0 0 / 16%); }
  #top #enter { background: #FBF9F6; padding: 30px 0 50px; margin-bottom: 180px; }
  #top #enter .wrap { margin: 0 auto; }
  #top #enter .flex { padding: 80px 0; }
  #top #enter .flex .image { width: 45%; }
  #top #enter .flex .block { width: 48%; }
  #top #enter .block h2 { color: #0068B1; margin-bottom: 50px; }
  #top #enter .block .btn { display: block; max-width: 418px; margin: 0 auto; padding: 18px 0; border-radius: 5px; background: #0068B1; color: #fff; text-align: center; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); }
  #top #enter .block p { margin-bottom: 100px; }

  #top #news { margin: 0 auto 120px; padding: 0 50px; }
  #top #news .inner { display: flex; justify-content: space-between; margin-bottom: 2em; }
  #top #news .head_area { order: 2; width: 277px; padding-left: 50px; border-left: 1px solid #ccc; text-align: center; }
  #top #news .head_area .link { display: block; margin-top: 115px; padding: 20px 55px; background: #1D92BE; color: #fff; text-align: center; position: relative; }
  #top #news .head_area .link::after { content: ''; position: absolute; bottom: 14px; right: 13px; z-index: 1; background: url(img/top_readme_arrow.svg) no-repeat; width: 42px; height: 19px; background-size: cover; background-position: center top; }
  #top #news h3 { color: #0068B1; }
  #top #news .block { order: 1; max-width: 828px; width: 100%; }
  #top #news .block ul { padding: 35px 0; border-bottom: 1px solid #CCC; }
  #top #news .block ul li {  }
  #top #news .block ul li.date { display: inline-block; color: #0068B1; font-size: 18px; font-weight: bold; }
  #top #news .block ul li.cate { display: inline-block; padding: 5px 20px; text-align: center; font-weight: bold; font-size: 16px; background: #EEF1FF; border-radius: 17px; margin-right: 1em; }
  #top #news .block ul li.text { padding: 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #top #news .block ul li.text a { font-weight: bold; color: #737373; font-size: 20px; }
  #top #news .bnr { display: flex; justify-content: flex-end; }
  #top #news .bnr a { width: 187px; margin-left: 1.5em;}



/* page */
  .cover { position: relative; }
  .cover .wrap { margin: 0 auto; }
  .cover .box { position: absolute; bottom: 0; background: #0068B1; padding: 26px; line-height: 1; box-shadow: 20px 27px 0px 0px rgb(255 255 255 / 70%); }
  .cover h1 { font-size: 38px; font-weight: bold; color: #fff; margin-bottom: 10px; }
  .cover .sub { font-size: 20px; font-weight: bold; color: #fff; }
  #page .lead_ttl { margin: 0 0 30px; padding: 20px 0 20px; border-bottom: 1px solid #164063; font-size: 3.1rem; text-align: center; color: #364D90; }
  #page .lead_text { margin-bottom: 70px; padding: 0 20px; color: #172648; line-height: 1.8; text-align: center; }
  #page .lead { text-align: center; font-size: 32px; font-weight: bold; position: relative; padding: 120px 0; }
  #page .lead::before { content: ''; display: inline-block; width: 184px; height: 247px; background: url(img/page_lead_bg_before.svg) no-repeat; position: absolute; bottom: 0; left: 0; }
  #page .lead::after { content: ''; display: inline-block; width: 184px; height: 247px; background: url(img/page_lead_bg_after.svg) no-repeat; position: absolute; top: 0; right: 0; }


  /*--------------------------------------------------
  company
  --------------------------------------------------*/
  #company {  }
  #company .cover { position: relative; background: url(img/company_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }

  #company .navi { display: flex; justify-content: space-between; max-width: 750px; margin: 0 auto 80px;  }
  #company .navi li { border-left: 1px solid #CCC; padding: 15px 10px; width: 100%; text-align: center; }
  #company .navi li:last-of-type { border-right: 1px solid #CCC; }
  #company .navi li a { color: #1D92BE; font-size: 22px; }
  #company #message { background: url(img/company_message_bg.svg); background-size: cover; background-position: center top; padding: 50px 60px; margin: 0 0 120px; }
  #company #message .wrap { margin: 0 auto 100px; max-width: 1160px; position: relative; }
  #company #message .flex { margin-bottom: 30px; }
  #company #message .flex .image { width: 35%; }
  #company #message .flex .mes { width: 60%; }
  #company #message p { margin-bottom: 25px; }
  #company #message .cio { position: absolute; bottom: -100px; right: 0; }
  #company #policy {  }
  #company #policy ul { margin: 0 auto 150px; padding: 0 60px; }
  #company #policy ul li { width: calc( 100% / 3 ); margin: 0 20px; padding: 10px 10px 35px; border-radius: 5px; box-shadow: 0px 1px 6px 0px rgb(0 0 0 / 20%); }
  #company #policy ul li h3 { color: #1D92BE; text-align: center; padding: 25px 0 20px; }
  #company #policy ul li p { color: #16607B; padding: 0 10px; }
  #company .iwabuchi_policy { max-width: 724px; margin: 0 auto 60px; }
  #company .iwabuchi_bnr { display: block; max-width: 975px; margin: 0 auto 120px; box-shadow: 3px 3px 6px 0px rgb(0 0 0 / 20%); border-radius: 10px; }
  #company #about { margin-bottom: 120px; }
  #company #about .inner { max-width: 1000px; padding: 0 20px; margin: 0 auto; }
  #company #about .inner dl { display: flex; justify-content: space-between; }
  #company #about .inner dl dt { color: #0070C3; border-bottom: 1px solid #444; padding: 20px 20px; width: 10em; font-size: 22px; font-weight: bold; }
  #company #about .inner dl dd { border-bottom: 1px solid #444; padding: 20px 20px; width: calc(100% - 12em); font-size: 22px; }

  #company #history { margin-bottom: 120px; }
  #company #history .inner { max-width: 1000px; padding: 0 20px; margin: 0 auto; }
  #company #history .inner dl { display: flex; justify-content: space-between; }
  #company #history .inner dl dt { color: #0070C3; border-bottom: 1px solid #444; padding: 20px 20px; width: 13em; font-size: 22px; font-weight: bold; }
  #company #history .inner dl dd { border-bottom: 1px solid #444; padding: 20px 20px; width: calc(100% - 15em); font-size: 22px; }
  #company #map { max-width: 1280px; margin: 0 auto 120px; }
  #company #map iframe { width: 100%; }
  #company #map .ann { text-align: right; }
  #company #client .inner { max-width: 1000px; padding: 0 20px; margin: 0 auto; }
  #company #client .acMenu dt { height: 60px; background-color: #0068B1; position: relative; }
  #company #client .acMenu dt.active { }
  #company #client .acMenu dd {  }
  #company #client .acMenu dd .content { padding: 15px 30px; font-size: 24px; font-weight: bold; }
  #company #client .acMenu dd .content:nth-of-type(odd) { background: #EBEBEB; }

  #company #client .acMenu dt:before,
  #company #client .acMenu dt:after {
    display: block;
    content: '';
    background-color: #fff;
    position: absolute;
    width: 12px;
    height: 3px;
    top: 50%;
    right: 30px;
    transform: translate(50%, -50%);
  }
  #company #client .acMenu dt:before {
    width: 3px;
    height: 12px;
  }
  #company #client .acMenu dt.active:before {
    width: 3px;
    height: 0px;
  }

  /*--------------------------------------------------
  strength
  --------------------------------------------------*/
  #strength .cover { position: relative; background: url(img/strength_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #strength section { max-width: 1000px; margin: 0 auto 190px; padding: 25px 25px; position: relative; }
  #strength .inner { background: #fff; padding: 29px 45px; }
  #strength .block { display: flex; align-items: center; margin-bottom: 20px; }
  #strength .block .ttl_sec { font-size: 36px; }
  #strength .block .ttl_sec::after { display: inline-block; vertical-align: middle; content: ''; width: 30px; height: 12px; margin: 0 30px 10px; }
  #strength .block h2 { font-size: 44px; }
  #strength p { font-size: 24px; }
  #strength #expert { background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%233aa0c6' fill-opacity='0.36'%3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E"); }
  #strength #expert .block { border-bottom: 1px solid #0068B1;  }
  #strength #expert .block .ttl_sec { color: #0068B1; }
  #strength #expert .block h2 { color: #0068B1; }
  #strength #expert .block .ttl_sec::after { background: #0068B1; }
  #strength #expert::after { content: ''; display: inline-block; background: url(img/strength_expert_circle.svg) no-repeat; background-size: ; width: 93px; height: 122px; position: absolute; bottom: -110px; right: -8vw; }

  #strength #service { background-color: #ffefd6;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='11.9' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E"); }
  #strength #service .block { border-bottom: 1px solid #B15300;  }
  #strength #service .block .ttl_sec { color: #B15300; }
  #strength #service .block h2 { color: #B15300; }
  #strength #service .block .ttl_sec::after { background: #B15300; }
  #strength #service::after { content: ''; display: inline-block; background: url(img/strength_service_circle.svg) no-repeat; background-size: ; width: 93px; height: 122px; position: absolute; bottom: -110px; left: -8vw; }

  #strength #logistics { background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.11' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cuse fill='%23fafafa' href='%23s' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23f5f5f5' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23f5f5f5' href='%23s'/%3E%3Cuse fill='%23f0f0f0' href='%23s' x='2'/%3E%3Cuse fill='%23f0f0f0' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23ebebeb'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23ebebeb'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23e5e5e5'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23e0e0e0'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(51.6) translate(-980.62 -735.47)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover; }
  #strength #logistics .block { border-bottom: 1px solid #515456;  }
  #strength #logistics .block .ttl_sec { color: #515456; }
  #strength #logistics .block h2 { color: #515456; }
  #strength #logistics .block .ttl_sec::after { background: #515456; }
  #strength #logistics::after { content: ''; display: inline-block; background: url(img/strength_logistics_circle.svg) no-repeat; background-size: ; width: 93px; height: 122px; position: absolute; bottom: -110px; right: -8vw; }


  /*--------------------------------------------------
  product
  --------------------------------------------------*/
  #product .cover { position: relative; background: url(img/product_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #product .navi { display: flex; justify-content: center; padding: 5em 0 5em; }
  #product .navi li { background: #fff; width: 332px; padding: 6px 7px; margin: 0 45px; }
  #product .navi li:hover a,
  #product .navi li.active a { border: 4px solid #1D92BE; color: #fff; background: #1D92BE; }
  #product .navi li a { display: flex; align-items: center; justify-content: center; border: 4px solid #1D92BE; padding: 20px 5px; font-size: 1.9rem; text-align: center; line-height: 1.4; color: #1D92BE; height: 100%; font-weight: bold; }
  #product #category {  }
  #product #category .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
  #product #category .block { width: 48%; margin-bottom: 100px; }
  #product #category .block h2 { font-size: 25px; font-weight: bold; border-bottom: 2px solid #707070; padding-bottom: 5px; margin-bottom: 15px; }
  #product #category .block p { font-size: 20px; }
  #product #category .block .image { position: relative; z-index: 0; }
  #product #category .block .box { padding: 40px 40px 130px; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); background: #fff; min-height: 355px; width: 88%; margin: -80px auto 0; position: relative; z-index: 1; }
  #product #category .block .box .pdf { padding: 0 20px 10px; color: #780000; border-bottom: 1px dotted #780000; font-size: 20px; position: absolute; bottom: 40px; }
  #product #category .block .box .pdf::before { content: ''; display: inline-block; background: url(img/icon_pdf.svg) no-repeat; width: 25px; height: 27px; margin-left: -20px; padding-left: 5px; vertical-align: text-top; }
/* product_maker */
  #product_maker .navi { display: flex; justify-content: center; padding: 5em 0 5em; }
  #product_maker .navi li { background: #fff; width: 332px; padding: 6px 7px; margin: 0 45px; }
  #product_maker .navi li:hover a,
  #product_maker .navi li.active a { border: 4px solid #1D92BE; color: #fff; background: #1D92BE; }
  #product_maker .navi li a { display: flex; align-items: center; justify-content: center; border: 4px solid #1D92BE; padding: 20px 5px; font-size: 1.9rem; text-align: center; line-height: 1.4; color: #1D92BE; height: 100%; font-weight: bold; }
  #product_maker .cover { position: relative; background: url(img/product_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #product_maker #maker .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
  #product_maker #maker .block { width: 48%; margin-bottom: 100px; }
  #product_maker #maker h2 { padding: 20px; margin-bottom: 35px; background: #0068B1; font-size: 30px; font-weight: bold; color: #fff; }
  #product_maker #maker ul li { margin-bottom: 10px; font-size: 22px; font-weight: bold; }


  /*--------------------------------------------------
  recruit
  --------------------------------------------------*/
  #recruit .cover { position: relative; background: url(img/recruit_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #recruit #message .wrap { position: relative; }
  #recruit #message h2 { font-weight: bold; color: #0070C3; font-size: 44px; }
  #recruit #message h2 + .sub { font-weight: bold; color: #0070C3; font-size: 30px; margin-bottom: 30px; }
  #recruit #message .inner { background: #FBF9F6; }
  #recruit #message .inner p { width: 64%; padding: 50px; font-weight: bold; font-size: 24px; color: #515050; }
  #recruit #message .image { width: 520px; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); position: absolute; top: 0; right: -140px; }
  #recruit a.btn { display: block; max-width: 482px; margin: 0 auto 150px; padding: 33px 10px; background: #1D92BE; border: 2px solid #1D92BE; border-radius: 5px; color: #fff; text-align: center; font-size: 30px; font-weight: bold; line-height: 1.4; box-shadow: 1px 2.3px 4.5px rgba(66, 31, 11, 0.2); position: relative; }
  #recruit a.btn::after { display: block; content: ""; backface-visibility: hidden; position: absolute; bottom: 23px; right: 50px; width: 0; height: 0; border: 19px solid transparent; border-top: 27px solid #fff; }
  #recruit #interview { background: url(img/recruit_texture01.svg); background-repeat: repeat; padding: 90px 0; margin-bottom: 80px; }
  #recruit #interview .wrap { display: flex; justify-content: space-between; padding: 0 50px; margin-bottom: 0; }
  #recruit #interview .image { width: 535px; order: 2; }
  #recruit #interview .image img { box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%); }
  #recruit #interview p { width: 560px; order: 1; font-size: 24px; }
  #recruit #welfare .wrap { margin: 0 auto 180px; }
  #recruit #welfare ul { display: flex; }
  #recruit #welfare ul li { width: calc(100% / 3); margin: 0 2vw; }
  #recruit #gallery {  }
  #recruit #gallery p { text-align: right; max-width: 1280px; margin: auto; font-size: 24px; }
  #recruit #summary { margin-bottom: 120px; }
  #recruit #summary .inner { max-width: 1000px; padding: 0 20px; margin: 0 auto; }
  #recruit #summary .inner dl { display: flex; justify-content: space-between; }
  #recruit #summary .inner dl dt { color: #0070C3; border-bottom: 1px solid #444; padding: 20px 20px; width: 10em; font-size: 22px; font-weight: bold; }
  #recruit #summary .inner dl dd { border-bottom: 1px solid #444; padding: 20px 20px; width: calc(100% - 12em); font-size: 22px; }
  #recruit .recruit_submit { margin: 40px auto; text-align: center; }
  #recruit .recruit_submit p { font-weight: bold; font-size: 26px; color: #7E7E7E; }
  #recruit .recruit_submit a.btn { padding: 20px 10px; font-size: 26px; border-radius: 10px; max-width: 450px; }
  #recruit .recruit_submit a.btn::after { content: none; }

  /* slider 修正 */
  .slick-next { right: 8vw!important; }
  .slick-prev { left: 6vw!important; z-index: 1; }
  .slick-dots li button:before { font-size: 55px!important; }
  .slick-slide { position: relative; }
  .slick-slide::before { content: ''; display: block; background: rgba(0, 0, 0, 0.5); position: absolute; z-index: 1; height: 100%; width: 100%; }
  .slick-active::before { content: none; }
  .slick-dots { bottom: -55px!important; }
  .slick-dots li { margin: 0 10px!important; }
  .slick-dotted.slick-slider { margin-bottom: 180px!important; }
  .slick-next:before { content: url(img/recruit_arrow.svg)!important; }
  .slick-prev:before { content: url(img/recruit_arrow.svg)!important; display: block; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

  /*--------------------------------------------------
  recruit
  --------------------------------------------------*/
  #privacy .cover { position: relative; background: url(img/privacy_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #privacy {}
  #privacy > .wrap { max-width: 1000px; }
  #privacy h2 { margin: 0 0 30px; color: #0068B1; font-size: 40px; font-weight: 600; line-height: 1; text-align: center; }
  #privacy .leadText { margin: 0 0 100px; font-size: 22px; line-height: 1.6; text-align: center; }
  #privacy .text {  }
  #privacy dl { margin: 0 0 50px; }
  #privacy dt { font-weight: bold; font-size: 26px; color: #717272; margin-bottom: 10px; }
  #privacy dd { font-size: 18px; color: #515050; }
  #privacy dd ul { padding: 1em 0 1em 2.4em; }
  ul.number { list-style: decimal; }


/* アーカイブ */
  .category .cover { position: relative; background: url(img/archive_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }

  #archive h1 {  }
  #archive .wrap { margin: 0 auto 0; }
  #archive article { position: relative; z-index: 1; }
  #archive .block { display: inline-block; width: 30%; margin: 0 3% 50px 0; }
  #archive .block .image { position: relative; margin-bottom: 20px; }
  #archive .block .image a { display: block; }
  #archive .block .image .cat { position: absolute; top: 0; left: 0; padding: 10px 20px; background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: bold; }
  #archive .block .box { border-left: 6px solid #0068B1; padding: 15px 0 15px 30px; }
  #archive .block .box .date { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
  #archive .block .box h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #archive .block .ttl { font-size: 20px; font-size: 2.0rem; line-height: 1.4; margin-bottom: 2%; font-weight: 600; }
  #archive .block .contents { font-size: 14px; font-size: 1.4rem;  height: 8em; overflow: hidden; }
  #archive .eyecatch { height: 240px; overflow: hidden; position: relative; }
  #archive .eyecatch img { height: 100%; width: auto; margin: 0 auto; position: absolute; top: 0; right: -100%; bottom: 0; left: -100%; }



/* シングル */
  #single.category .cover { position: relative; background: url(img/news_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #single { margin: 0 auto; }
  #single article h1 { padding: 0px 0 20px; margin-bottom: 40px; border-bottom: 2px solid #0068B1; position: relative; font-size: 30px; color: #0068B1; font-weight: bold; }
  #single .blog_image { margin: 30px 0 0px; }
  #single .wrap { max-width: 1050px; margin: 0 auto; }

  #single .meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding: 0 0px 0 0px; }
  #single .cat { font-size: 14px; color: #727171; }
  #single .cat a { font-size: 14px; color: #727171; }
  #single .date { font-size: 1.5rem; color: #727171; font-weight: bold; }
  #single .text { margin-bottom: 10px; }

  #single .inner { margin: 0 auto 40px; width: 100%; }
  #single .inner .eyecatch { width: 50%; margin: 0 auto 4%; }
  #single .inner .eyecatch img, #single .inner .box img { margin: 0 auto; width: auto; max-width: 100%; height: auto; max-height: 400px; }
  #single .news_pdf { padding: 0 0px 10px; color: #0068B1; font-size: 20px; font-weight: bold; }
  #single .news_pdf::after { content: ''; display: inline-block; background: url(img/icon_pdf_single.svg) no-repeat; width: 20px; height: 24px; margin-left: .5em; vertical-align: text-top; }

  #single .pagelink { margin: 0 auto; width: 100%; height: 50px; position: relative; }
  #single .pagelink img.btn { width: 80px; }
  #single .pagelink .prev { position: absolute; top: 0; left: 0; bottom: 0; }
  #single .pagelink .next { position: absolute; top: 0; right: 0; bottom: 0; }
  #single .pagelink a { font-size: 20px; font-size: 2.0rem; font-weight: 600; color: #0a4e99; }
  #single .back { padding: 150px 0 50px; margin: 0 auto; width: 100%; }
  #single .back > .box { padding: 0 0%; display: flex; justify-content: space-between; }
  #single .back .btn { width: 41%; }
  #single .back .btn a { width: 100%; height: 100%; padding: 18px; display: block; color: #1D92BE; border-radius: 7px; border: 1px solid #1D92BE; text-align: center; font-size: 30px; }
  #single .back .btn a:hover { background-color: #1D92BE; color: #fff; }





/*ページネーション*/
.pagenation{ border-radius: 7px; overflow: hidden; }
.pagenation ul{ display: flex; justify-content: center; list-style-type: none; }
.pagenation .active{ background-color: #004ea2; font-size: 1.2rem; padding: 10px 15px; color: #fff; }
.pagenation a{ font-size: 1.2rem; display: block; padding: 10px 15px; text-decoration: none; color: #004ea2; background-color: #CCC; border-right: 1px solid white; }

  /* wp-pagenavi */
  .wp-pagenavi { padding: 3% 0 0%; font-size: 16px; font-size: 1.6rem; text-align:center; font-size: 26px; font-size: 2.6rem; }
  .wp-pagenavi a, .wp-pagenavi span { padding: 12px 18px; margin: 0 1%; background-color: #A1A1A1; color: #fff; border: 1px solid #A1A1A1; border-radius: 5px;}
  .wp-pagenavi a:hover, .wp-pagenavi span.current { background-color: #1D92BE; color: #fff; border: 1px solid #1D92BE; }
  .wp-pagenavi span.pages { display: none; }
  .wp-pagenavi span.current { font-weight: normal; }
  .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink { font-family: "Trebuchet MS",sans-serif; }


  /* ビジュアルリッチテキストエディタ */
  #page #single .box .text h1, #page #single .box .text h2, #page #single .box .text h3,
  #page #single .box .text h4, #page #single .box .text h5, #page #single .box .text h6 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
    line-height: 1.6; font-weight: bold;
  }
  #page #single .box .text h1 span, #page #single .box .text h2 span, #page #single .box .text h3 span,
  #page #single .box .text h4 span, #page #single .box .text h5 span, #page #single .box .text h6 span {
    font-weight: bold;
  }
  #page #single .box .text h1 { font-size: 30px; font-size: 3.0rem; }
  #page #single .box .text h2 { font-size: 26px; font-size: 2.6rem; }
  #page #single .box .text h3 { font-size: 22px; font-size: 2.2rem; }
  #page #single .box .text h4 { font-size: 18px; font-size: 1.8rem; }
  #page #single .box .text h5 { font-size: 14px; font-size: 1.4rem; }
  #page #single .box .text h6 { font-size: 12px; font-size: 1.2rem; }
  #page #single .box .text strong { font-weight: bold; }
  #page #single .box .text em { font-style: italic; }
  #page #single .box .text ol li { list-style-type: decimal; }
  #page #single .box .text ul li { list-style-type: disc; }
  #page #single .box .text a { text-decoration: underline; color: #009BD4; }



  /*--------------------------------------------------
  お問い合わせ
  --------------------------------------------------*/
  #contact {}
  #contact .cover { position: relative; background: url(img/contact_header.jpg) no-repeat; height: 33.3vw; background-size: 100%; background-position: center top; }
  #contact .block .tel { display: block; text-align: center; font-size: 3.0rem; color: #1b70cc; font-weight: bold; line-height: 1; }
  #contact .block .tel span { font-size: 5.2rem; font-weight: bold; }
  #contact .block .underline { display: block; text-align: center; margin-bottom: 60px; font-size: 24px; }
  #contact .block .bustime { color: #8A8A8A; margin-bottom: 100px; text-align: center; }
  #contact .inner { margin: 0 auto 60px; }
  #contact .inner dl { display: flex; justify-content: space-between; font-size: 18px }
  #contact .inner dl dt { width: 22.5%; color: #646464; font-weight: 600; padding: 12px 20px; }
  #contact .inner dl dd { width: 72%; padding: 12px 0px; }
  #contact .inner dl dt,
  #contact .inner dl dd { border-bottom: 1px solid #444444; }
  #contact .tel_btn { display: block; width: 460px; margin: 80px auto; }
  #contact .lead { padding: 60px 0 40px; font-size: 3.3rem; text-align: center; }
  #contact h2 { margin-bottom: 30px; text-align: center; font-weight: bold; font-size: 4.0rem; color: #0070C3; }
  #contact h2::before { content: ''; display: inline-block; background: url(img/contact_icon_mail.svg) no-repeat; background-position: center; background-size: contain; width: 60px; height: 40px; vertical-align: middle; margin-right: .5em; }

  #contact .wrap { padding: 0; max-width: 1280px; }
  #contact .wrap a.btn { margin: 3% 5%; }
  #contact .wrap a.btn:first-of-type { background-color: #0c6aae; }
  #contact .caution { text-align: center; font-size: 14px; font-size: 1.4rem; }
  #contact .text { padding: 0 0 20px; line-height: 1.8; margin-bottom: 3%; border-bottom: 1px dotted #e7dddd; }
  #contact .text.thx { text-align: center; }
  #contact .tel_inner {  }
  #contact .tel_inner .block { display: flex; border-bottom: 1px solid #004da0; margin-bottom: 40px; align-items: baseline; }
  #contact .tel_inner .block h3 { background: #004da0; padding: 0px 0px; font-size: 2.1rem; font-weight: bold; color: #fff; width: 168px; padding: 10px 0; text-align-last: center; position: relative; }
  #contact .tel_inner .block h3::after { display: block; content: ""; backface-visibility: hidden; position: absolute; top: -20px; right: -20px; width: 0; height: 0; border: 20px solid transparent; border-top: 49px solid #004da0; -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg); }
  #contact .tel_inner .block .tel { margin-left: 70px; font-size: 1.8rem; color: #004ea2; }
  #contact .tel_inner .block .tel span { margin-left: 0.3em; font-family: 'Assistant', sans-serif; font-size: 3.3rem; color: #000; }
  #contact .tel_inner .block .fax { margin-left: 70px; font-size: 1.8rem; color: #004ea2; }
  #contact .tel_inner .block .fax span { margin-left: 0.3em; font-family: 'Assistant', sans-serif; font-size: 2.4rem; color: #000; }


  #contact .privacy {  }
  #contact .privacy .ttl { padding: 1em 0 1em; text-align: center; font-size: 3.8rem; letter-spacing: 8px; border: none; color: #004ea2; }
  #contact .privacy .ttl span { display: block; line-height: 1; font-size: 2.0rem; letter-spacing: 1px; color: #000; }
  #contact .privacy .inner { line-height: 1.8; font-size: 1.4rem;  }
  #contact .privacy h3 { font-size: 2.1rem; color: #004ea2; }
  #contact .privacy p { margin-bottom: 1em; }
  #contact .privacy ul { list-style: decimal; }
  #contact .privacy ul li { margin-bottom: 1em; margin-left: 1.5em; }
  #contact .privacy ul li:last-of-type { margin-bottom: 2em; }
  #contact .privacy ul li::marker { font-weight: bold; }


  #contact .sendmails label { display: inline-block; margin: 0 1em 0.5em 0; }
  #contact .inner .box { margin-bottom: 50px; }
  #contact .hissu { display: inline-block; padding: 4px 15px; background: #E60012; color: #fff; position: absolute; top: 25px; left: 63px; font-weight: bold; font-size: 1.1rem; line-height: 1; }
  #contact .ninni { display: inline-block; padding: 6px 3px; background: #00afff; color: #fff; position: absolute; top: 20px; left: 13px; font-weight: bold; }
  #contact input[type="text"],
  #contact input[type="email"],
  #contact input[type="tel"],
  #contact textarea { width: calc(100% - 45px); margin-left: 1em; }
  input::placeholder,
  textarea::placeholder { color: #aeaeae; }
  /* IE */
  input:-ms-input-placeholder,
  textarea::placeholder { color: #aeaeae; }
  /* Edge */
  input::-ms-input-placeholder,
  textarea::placeholder { color: #aeaeae; }

  /*ie firefoxでのselect矢印*/
  #contact textarea { padding: 14px 14px; height: 150px; line-height: 1.2; }
  select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ""; }
  select::-ms-expand { display: none; }

  /* 送信ボタン（共通） */
  input[type=submit] {
    padding: 20px 0; margin: 0 auto 20px; width: 32%; height: auto; line-height: 1; text-align: center;
    border: 3px solid #0070C3; border-radius: 34px; display: block; background: #fff; color: #0070C3; font-size: 2.4rem; font-weight: bold;
    -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; box-shadow: 1px 2.3px 4.5px rgba(66, 31, 11, 0.2);
  }
  input[type=submit]:hover { cursor: pointer; opacity: 0.8; background: #0070C3; color: #fff;}
  /* formの枠 */
  div.wpcf7-response-output { padding: 0; margin: 0; margin-top: 1.5%; font-size: 1.4rem; }
  /* メール送信完了ボックス */
  div.wpcf7-mail-sent-ok {
    padding: 2%; border: 2px solid #17a1c1; background-color: #F5F5F5; text-align: center;
    color: #666; font-size: 13px; font-size: 1.3rem; border-radius: 6px; color: #17a1c1;
  }
  /* 警告文のボックス */
  div.wpcf7-validation-errors {
    padding: 2%; border: 2px solid #666; background-color: #F5F5F5; text-align: center;
    color: #666; font-size: 13px; font-size: 1.3rem; border-radius: 6px;
  }
  /* エラーメッセージのカラー */
  span.wpcf7-not-valid-tip { color: #b50000; font-size: 13px; font-size: 1.3rem; }
  /* エラー箇所の背景色 */
  .wpcf7 .wpcf7-not-valid { background-color: #fff; color: #666; }



  /*--------------------------------------------------
  404 Not Found
  --------------------------------------------------*/
  #notfound { margin-top: 50px; }
  #notfound h1 { text-align: center; color: #a08b77; font-size: 80px; font-size: 8.0rem; }
  #notfound .txt { margin: 0 auto; width: 100%; }
  #notfound ul { padding: 2%; margin: 1.5% auto; width: 100%; background-color: #f5f5f5; }
  #notfound ul li { list-style-type: disc; margin-left: 2%; }
  .back404 { padding: 50px 0; margin: 0 auto 0px; width: 100%; }
  .back404 .btn { margin: 0 auto; width: 50%; height: 60px; line-height: 60px; text-align: center; font-size: 22px; font-size: 2.2rem; border-radius: 10px; }
  .back404 .btn a { width: 100%; height: 100%; display: block; background-color: #fff; color: #25764d; border-radius: 10px; border: 1px solid #25764d; }
  .back404 .btn a:hover { background-color: #25764d; color: #fff; }










/*------------------------------------------------------------------------
                                < 1600
------------------------------------------------------------------------*/

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

  #recruit #message { max-width: 1600px; margin: 0 auto; overflow: hidden; }
  #recruit #message .image { right: -5vw; width: 500px; }


}





/*------------------------------------------------------------------------
                                < 1300
------------------------------------------------------------------------*/

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

  header .inner { padding: 20px 20px; }
  #f_content .block .wrap { padding: 0 20px; }
  .breadcrumb { padding: 0 20px; }
  #company #map { padding: 0 40px; }
  #product_maker #maker .wrap { padding: 0 20px; }
  #recruit #message h2 { padding: 0 20px; }
  #recruit #message h2 + .sub { padding: 0 20px; }



}



/*------------------------------------------------------------------------
                                < 1130
------------------------------------------------------------------------*/

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

  #footer_contact .wrap .flex { display: block; }
  #footer_contact .tel { margin-right: 35vw; margin-bottom: 25px; }
  #top #news .head_area { width: 100%; border-left: none; padding-left: 0; }
  #top #news .head_area .link { margin: 30px auto 50px; width: 53%; }
  #top #news .inner { padding: 0 20px; }
  #top #news .inner { display: block; }
  #footer_contact .tel { width: 400px; text-align: center; }
  #footer_contact .mail { width: 400px; text-align: center; }
  footer .footer_ring { top: 1vw; width: 26vw; }
  footer nav ul.flex { flex-wrap: wrap; justify-content: flex-start; padding: 0px 20px; }
  footer nav ul li { margin: 0 100px 15px 0; }
  #page .lead { padding: 120px 60px; font-size: 26px; }
  #company #map iframe { height: 500px; }
  #strength section { width: calc(100% - 40px); }
  #strength #expert::after { right: 0; bottom: -130px; }
  #strength #service::after { left: 0; bottom: -130px; }
  #strength #logistics::after { right: 0; bottom: -130px; }
  #recruit #message .image { width: 42vw; }
  #recruit #interview .image { width: 48%; }
  #recruit #interview p { width: 50%; }


  
}




/*------------------------------------------------------------------------
                                < 1000
------------------------------------------------------------------------*/

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

  header nav ul li a { font-size: 2.3vw; }
  #top .wrap { padding: 0 20px; }
  #top #main_visual .typ { width: 90%; }
  .packages .wrap { padding: 0 20px; }
  #company #message .wrap { padding: 0 20px; }
  #company .iwabuchi_bnr { width: calc(100% - 40px) }
  #strength .block { flex-wrap: wrap; }
  #strength .block h2 { font-size: 40px; width: 100%; }
  #recruit #message h2 { font-size: 35px; }
  #recruit #message h2 + .sub { font-size: 25px; }
  #recruit #message .inner p { font-size: 20px; }


}



/*------------------------------------------------------------------------
                                < 900
------------------------------------------------------------------------*/

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


  .packages .wrap { padding: 0 20px; }


}




/*------------------------------------------------------------------------
                                < 800
------------------------------------------------------------------------*/

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



}




/*------------------------------------------------------------------------
                                < 780
------------------------------------------------------------------------*/

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

  /*--------------------------------------------------
  共通
  --------------------------------------------------*/
  .ttl_block { margin-bottom: 30px; }
  .cover .box { padding: 20px; }
  .cover h1 { font-size: 28px; }
  .cover .sub { font-size: 16px; }

/* デフォルトフォントサイズ */
.fs50 { font-size: 42px; font-size: 4.2rem; }
.fs46 { font-size: 38px; font-size: 3.8rem; }
.fs42 { font-size: 34px; font-size: 3.4rem; }
.fs40 { font-size: 32px; font-size: 3.2rem; }
.fs34 { font-size: 26px; font-size: 2.6rem; }
.fs30 { font-size: 22px; font-size: 2.2rem; }
.fs26 { font-size: 18px; font-size: 1.8rem; }
.fs24 { font-size: 16px; font-size: 1.6rem; }
.fs20 { font-size: 16px; font-size: 1.6rem; }
.fs18 { font-size: 16px; font-size: 1.6rem; }
.fs16 { font-size: 16px; font-size: 1.6rem; }
.fs14 { font-size: 14px; font-size: 1.4rem; }
.fs12 { font-size: 12px; font-size: 1.2rem; }
.fs10 { font-size: 10px; font-size: 1.0rem; }


  /* ドロワーの装飾 */
  header { z-index: 101; background: none; }
  header .flex { display: block; }
  header .header_logo { display: block; margin: 0 0 10px; width: 70%; max-width: 100%; float: none; }
  header .header_contact { display: none; }
  header .info_block { display: none; }
  nav ul { display: block; }
  nav ul li { }
  nav ul li a { padding: 15px 0; color: #333!important; border-bottom: 1px solid #ddd; font-size: 1.6rem; }
  .drawer--left .drawer-nav { padding: 0px; overflow: hidden; position: fixed!important; background: #fff; width: 16.25rem; }
  .drawer-open .drawer-nav { width: 80%; }
  .drawer--left .drawer-hamburger { display: block!important; top: 5vw; right: 2rem; left: auto!important; background: #808080!important; padding: 8px 8px 28px 8px; border-radius: 8px; width: 4.4rem; position: absolute; }
  .drawer-hamburger-icon:after { top: 16px!important; }
  .drawer-hamburger-icon:before { top: -16px!important; }
  .drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { top: 0px!important; }
  .drawer-hamburger-icon { margin-top: 20px!important; }
  .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { background-color: #fff!important; height: 4px!important; }
  .drawer-menu > li:nth-of-type(2) { width: 100%; }
  /* ページ上部の開閉メニューを非表示 */
   .drawer--left .drawer-nav.none { display: block!important; }
   header nav ul.drawer-menu { display: block; }

  header nav ul.drawer-menu { display: block; }
  header nav ul li:last-of-type { display: block; }
  header nav ul li a { color: #0068B1!important; text-align: left; padding: 10px 20px; font-size: 23px; }
  ul li#menu-item-26 a::before { background: url(img/icon_company_sp.svg) no-repeat; }
  ul li#menu-item-26 a:hover::before { background: url(img/icon_company.svg) no-repeat; }
  ul li#menu-item-27 a::before { background: url(img/icon_product_sp.svg) no-repeat; }
  ul li#menu-item-27 a:hover::before { background: url(img/icon_product.svg) no-repeat; }
  ul li#menu-item-28 a::before { background: url(img/icon_strength_sp.svg) no-repeat; }
  ul li#menu-item-28 a:hover::before { background: url(img/icon_strength.svg) no-repeat; }
  ul li#menu-item-32 a::before { background: url(img/icon_news_sp.svg) no-repeat; }
  ul li#menu-item-32 a:hover::before { background: url(img/icon_news.svg) no-repeat; }
  ul li#menu-item-29 a::before { background: url(img/icon_recruit_sp.svg) no-repeat; }
  ul li#menu-item-29 a:hover::before { background: url(img/icon_recruit.svg) no-repeat; }
  ul li#menu-item-151 a::before { background: url(img/contact_icon_mail.svg) no-repeat; width: 30px; height: 20px; background-size: cover; }
  ul li#menu-item-151 a:hover::before { background: url(img/icon_mail.svg) no-repeat; }

 /*ACCORDION*/
  nav.drawer-nav ul.drawer-menu li ul li { border-bottom: 1px solid #EFEFEF; padding-bottom: 0; }
  nav.drawer-nav ul.drawer-menu li ul li:last-of-type { border-bottom: none; }
  #acMenu .toggle { display:block; width:100%; height:auto; cursor:pointer; }
  #acMenu ul { width:100%; height:auto; display:none; border-top: 1px solid #EFEFEF; }
  #acMenu .maru::after {
    border-top: none;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  nav.drawer-nav ul.drawer-menu li a.toggle { position: relative; }
  nav.drawer-nav ul.drawer-menu li a.toggle::before,
  nav.drawer-nav ul.drawer-menu li a.toggle::after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; }
  nav.drawer-nav ul.drawer-menu li a.toggle::before { right: 15px; width: 4px; height: 4px; border-top: 1px solid #231f20; border-right: 1px solid #231f20; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

  li ul.sub-menu { position: static; visibility: visible; background: #fff; }
  li a:hover { color: #fff!important; background: #004EA2; }
  ul.sub-menu li a { color: #000!important; padding: 20px; opacity: 1; }
  ul.sub-menu li a:hover { color: #fff!important; }
  ul.sub-menu { opacity: 1; }

  .alt { text-align: center; color: #192e66; font-weight: bold; }
  .alt::after { content: attr(data-label); font-size: 2rem; border-bottom: 2px solid #192e66; padding-bottom: 10px; }
  .alt img { display: none; }

  input[type=submit] { width: 50%; }
  #notfound h1 { font-size: 40px; font-size: 4rem; line-height: 1.2; margin-bottom: 5%; }
  #notfound ul li { list-style-type :none }
  .back404 { padding: 50px 3%; }
  .back404 .btn { width: 100%; height: 50px; line-height: 50px; }


  .open a.toggle::before { -webkit-transform: rotate(90deg)!important; transform: rotate(-45deg)!important; }
  .pagetop { display: none!important; }

  #footer_contact h3 { text-align: center; }
  #footer_contact .tel { display: block; font-size: 30px; width: 100%; }
  #footer_contact .mail { display: block; font-size: 20px; width: 100%; }
  #footer_contact .image { display: none; }
  #footer_contact .wrap .flex { padding: 30px 45px; }
  #f_content .block .wrap { display: block; }
  #f_content .logo { display: block; margin: 0 auto 10px; width: 60%; }
  #f_content .add { text-align: center; margin: 0 0 20px; font-style: 14px; }
  footer .sns { justify-content: center; margin: 0 0 30px; }
  footer nav { display: none; }


  /*--------------------------------------------------
  top
  --------------------------------------------------*/
  #top #main_visual { height: 600px; }
  #top #main_visual .typ { font-size: 13vw; top: 40%; transform: translate(-50%, -50%); }
  #top #main_visual ul { flex-wrap: wrap; }
  #top #main_visual ul li { width: 50%; }
  #top #main_visual ul li:nth-of-type(1),
  #top #main_visual ul li:nth-of-type(2) { border-bottom: 1px solid #fff; }

  #top #main_visual ul li#menu-item-26 a::before { background: url(img/icon_company.svg) no-repeat; }
  #top #main_visual ul li#menu-item-27 a::before { background: url(img/icon_product.svg) no-repeat; }
  #top #main_visual ul li#menu-item-28 a::before { background: url(img/icon_strength.svg) no-repeat; }
  #top #main_visual ul li#menu-item-32 a::before { background: url(img/icon_news.svg) no-repeat; }
  #top #main_visual ul li#menu-item-29 a::before { background: url(img/icon_recruit.svg) no-repeat; }


  #top #enter .flex { flex-wrap: wrap; padding: 0 20px; }
  #top #enter .flex .image { width: 60%; margin: 0 auto 20px; }
  #top #enter .flex .block { width: 100%; }
  #top #news { padding: 0; margin: 0 auto 50px; }
  #top #enter { margin-bottom: 50px; }
  #top #enter .block h2 { margin-bottom: 20px; text-align: center; }
  #top #enter .block p { margin-bottom: 40px; }
f
  #company .navi { padding: 0 40px; margin-bottom: 40px; }
  #company #message { padding: 20px 20px 40px; margin-bottom: 50px; }
  #company #message .cio { font-size: 20px; }
  #company #policy ul { display: block; margin-bottom: 100px; }
  #company #policy ul li { width: 80%; margin: 0 auto 30px; }
  #company #policy ul li h3 { font-size: 20px; }
  #company .iwabuchi_policy { padding: 0 20px; }
  #company #client .acMenu dd .content { font-size: 16px; padding: 15px 20px; }
  #company #map { padding: 0 20px; }
  #strength .inner { padding: 29px 25px; }
  #strength .block .ttl_sec { font-size: 4.3vw; line-height: 1.4; }
  #strength .block h2 { font-size: 4.3vw; margin-bottom: 10px; line-height: 1.2; }
  #strength .block .ttl_sec::after { content: none; }
  #strength p { font-size: 18px; }
  #product .navi li { width: 48%; margin: 0; }
  #product_maker .navi li { width: 48%; margin: 0; }
  #product #category .block .box { padding: 20px 20px 130px; min-height: 250px; }
  #product #category .block h2 { font-size: 20px; }
  #product #category .block p { font-size: 16px; }
  #product #category .block .box .pdf { font-size: 16px; }
  #product_maker #maker h2 { font-size: 22px; padding: 10px 20px; margin-bottom: 20px; }
  #product_maker #maker ul li { font-size: 18px; }
  #recruit #message .image { display: none; }
  #recruit #message .inner p { width: 100%; padding: 40px 20px; }
  #recruit #message .inner p::after { content: ''; display: block; background: url(img/recruit_image_1.jpg); background-size: cover; height: 250px; margin-top: 20px; }
  #recruit #message .wrap { margin-bottom: 60px; }
  #recruit #welfare .wrap { margin-bottom: 60px; }

  #archive .block { width: 47.5%; margin: 0 4% 50px 0; }
  #archive .block:nth-of-type(even) { margin-right: 0; }


  /*--------------------------------------------------
  お問い合わせ
  --------------------------------------------------*/
  #contact #form { width: 90%; margin: 0 auto; }
  #contact .box .table { display: block; }
  #contact .box .table .th, #contact .box .table .td { display: block; width: 100%; }
  #contact .box .table .th { padding: 3% 0% 0% 0%; }
  #contact .box .table .td { padding: 1% 0% 3% 0%; }
  #contact .wrap a.btn { width: 90%; margin: 2% 0 2% 0; padding: 3% 0; }
  #contact .tel_btn { width: 70%; margin: 60px auto; }
  #contact .form .inner { width: 90%; }
  #contact .form .inner dl { flex-wrap: wrap; }
  #contact .form .inner dl dt { width: 100%; justify-content: flex-start; padding: 20px 0 0 0.5em; }
  #contact .form .inner dl dt p { margin: 0; }
  #contact .form .inner dl dd { width: 100%; }
  #contact input[type="text"],
  #contact input[type="email"],
  #contact input[type="tel"],
  #contact textarea { width: 100% ; margin-left: 0; }
  #contact .hissu { top: 20px; right: 12px; left: auto; }
  #contact .privacy .ttl { font-size: 2.6rem; letter-spacing: 2px; }
  #contact .privacy .ttl span { font-size: 1.6rem; }
  #contact .privacy .inner { padding: 0 20px; }
  #contact h2 { font-size: 30px; }

  #archive .flex { display: block; }
  #archive article { width: 100%; padding: 0 20px; margin-bottom: 50px; }
  #archive aside { width: 100%; }
  #archive aside ul { padding: 0 20px; }
  #single .flex { display: block; }
  #single article { width: 100%; padding: 0 20px; margin-bottom: 50px; }
  #single aside { width: 100%; }
  #single aside ul { padding: 0 20px; }


  #page .lead_ttl { font-size: 2.6rem; }





  
}






/*------------------------------------------------------------------------
                                < 640
------------------------------------------------------------------------*/

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


#footer_contact .tel { font-size: 5vw; }
#footer_contact .mail { font-size: 4vw; }
#company .navi { flex-wrap: wrap; }
#company .navi li { width: 50%; margin-bottom: 20px; }
#company .navi li:nth-of-type(2) { border-right: 1px solid #CCC; }
#company #about .inner dl { flex-wrap: wrap; }
#company #about .inner dl dt { width: 100%; border-bottom: none; padding-bottom: 0; }
#company #about .inner dl dd { width: 100%; padding-top: 10px; font-size: 16px; }
#company #history .inner dl { flex-wrap: wrap; }
#company #history .inner dl dt { width: 100%; border-bottom: none; padding-bottom: 0; }
#company #history .inner dl dd { width: 100%; padding-top: 10px; font-size: 16px; }
#company #policy ul li { width: 90%; }
#product .navi { padding: 3em 0 4em; }
#product_maker .navi { padding: 3em 0 4em; }
#recruit #summary .inner dl { flex-wrap: wrap; }
#recruit #summary .inner dl dt { width: 100%; border-bottom: none; padding-bottom: 0; }
#recruit #summary .inner dl dd { width: 100%; padding-top: 10px; font-size: 16px; }
#recruit #interview { padding: 40px 0; }
#recruit #interview .wrap { flex-wrap: wrap; padding: 0 20px; }
#recruit #interview .image { width: 70%; margin: 0 auto 30px; order: 1; }
#recruit #interview p { width: 100%; font-size: 18px; order: 2; }
#single .back > .box { display: block; }
#single .back .btn { width: 60%; margin: 0 auto 30px; }
#single .back .btn a { font-size: 22px; padding: 15px; }
#contact .inner dl { flex-wrap: wrap; }
#contact .inner dl dt { width: 100%; border-bottom: none; padding-bottom: 0; padding: 14px 10px 0; font-size: 20px; }
#contact .inner dl dd { width: 100%; padding-top: 10px; font-size: 16px; padding: 0 0 12px; }


  
}






/*------------------------------------------------------------------------
                                < 600
------------------------------------------------------------------------*/

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


#company .cover,
#strength .cover,
#product .cover,
#product_maker .cover,
#recruit .cover,
#privacy .cover,
#contact .cover,
.category .cover { height: 300px; background-size: cover; background-attachment: initial; }
#product #category .block { width: 100%; margin-bottom: 70px; }
#recruit #welfare ul { flex-wrap: wrap; }
#recruit #welfare ul li { width: 60%; margin: 0 auto 20px; }
#recruit #gallery p { font-size: 18px; }
#recruit a.btn { font-size: 26px; padding: 26px 10px; width: 80%; bottom: 2vw; }
#recruit a.btn::after { content: none; }
#recruit .recruit_submit a.btn { font-size: 22px; }
.slick-prev,
.slick-next
{ display: none!important; }
.slick-dotted.slick-slider { margin-bottom: 100px!important; }
  
}






/*------------------------------------------------------------------------
                                < 480
------------------------------------------------------------------------*/

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


#top #news .head_area .link { width: 80%; }
#top #news .block ul { flex-wrap: wrap; }
#top #news .block ul li.text { width: 100%; margin: 10px 0 5px; }
#top #news .block ul li.text a { font-size: 1.6rem; }
#footer_contact h3 { font-size: 20px; }
#f_content .add { font-size: 16px; }
#page .lead { font-size: 22px; padding: 80px 60px; }
#company #message .flex { flex-wrap: wrap; }
#company #message .flex .image { width: 40%; margin: 0 auto 20px; }
#company #message .flex .mes { width: 100%; margin: 0 auto; border-bottom: 1px dotted #ddd; padding-bottom: 30px; }
#strength .block .ttl_sec,
#strength .block h2 { font-size: 20px; }
#product_maker #maker .wrap { flex-wrap: wrap; }
#product_maker #maker .block { width: 100%; margin-bottom: 50px; }
#recruit a.btn { font-size: 20px; }
#archive .block { width: 100%; display: flex; justify-content: space-between; margin-bottom: 20px; }
#archive .block .image { width: 40%; }
#archive .block .image .eyecatch { height: 22.5vw; }
#archive .block .image { width: 40%; }
#archive .block .image .cat { padding: 5px 15px; font-size: 13px; }
#archive .block .box .date { font-size: 13px; }
#archive .block .box { width: 60%; border: none; padding: 0px 0 0px 1em; }
input[type=submit] { width: 80%; }
#contact .block .underline { font-size: 20px; }
#contact .block .tel { font-size: 6vw; }
#contact .block .tel span { font-size: 11vw; }


  
}