@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; box-sizing:border-box; }
footer,header,nav { display:block; }
div, section { overflow:hidden; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
form, input,select,textarea { vertical-align:middle; box-sizing:border-box; }
input, button, textarea, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/*================================================
 *  タグ設定
 ================================================*/
body { width:100%; margin:0 auto; font-size:14px; background-color:white; color:black; line-height:1.6; -webkit-text-size-adjust:none; }
body, input, textarea { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; }
a { color:black; background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
a:hover, a:focus { outline:none; }
a:hover { text-decoration:underline; }
h2 { margin-bottom:20px; padding:12px 0 10px 10px; font-size:20px; line-height:1; color:white; background-color:#6A6C72; text-shadow:2px 2px 4px #111; }
h2:before { content:'■'; }
h3 { margin:15px 0 15px 0; padding:5px 0 5px 10px; font-size:16px; font-weight:bold; border-left:8px solid #6A6C72; }
p:not(:last-child) { margin-bottom:0.5em; }
img { vertical-align:bottom; max-width:100%; }
ul { list-style:disc; }
li { margin-left:1.5em; }
dd:not(:last-child) { margin-bottom:0.5em; }
table { border-collapse:collapse; }
thead { border-left:1px solid #6a6c72; }
thead th { border-bottom:1px solid white; }
thead th:not(:last-child) { border-right:1px solid white; }
tbody tr { border-left:1px solid #6a6c72; }
th { background:#6a6c72; color:white; }
th, td { padding:5px 10px; }
tbody tr th { text-align:center; vertical-align:middle; border-top:1px solid #6a6c72; border-bottom:1px solid white; border-right:1px solid white; }
tbody:first-child tr th { border-right:0; }
tbody tr:last-child th { border-bottom:1px solid #aaa; }
tbody tr td { text-align:left; border:1px solid #aaa; }
video { width:100%; }

/*================================================
 *  クラス設定
 ================================================*/
.inner { width:940px; margin-left:auto; margin-right:auto; }
.center { text-align:center; }
.right { text-align:right; }
img.center { display:block; margin-left:auto; margin-right:auto; }
img.right { float:right; margin-left:20px; margin-bottom:10px; }
table.center { margin:0 auto; }
p.indent { text-indent:1em; }
.box_contents { margin:20px 0 50px; }
.box_contents:last-child { margin-bottom:0; }
.simple { margin:0; padding:0; border:0; line-height:1.6; font-weight:normal; font-size:14px; }
.product_top { text-align:center; font-weight:normal; font-size:18px; border-left:0; margin:0 0 30px; padding-left:0; }
.empha, .error { color:red; }
.req_button { display:block; text-align:center; width:250px; padding:10px 0; margin:25px auto; background-color:#fabd05; font-size:16px; color:white; font-weight:bold; text-shadow:1px 1px 2px #000; }
.nobr { white-space:nowrap; display:inline-block; }

/*================================================
 *  ヘッダ
 ================================================*/
header { display:flex; margin-top:30px; margin-bottom:30px; }
.header_l { margin-right:50px; }
.header_l a, .header_l a img { display:block; }
.header_r { display:flex; flex-direction:column; justify-content:space-between; align-items:start; }
.header_r h1, .header_r a { display:block; line-height:1; }
.header_r p { font-size:14px; line-height:1; }

/*================================================
 *  ナビ
 ================================================*/
nav { background:#6a6c72; overflow:hidden; }
nav h3 { display:none; margin:0; padding:15px 0; }
nav ul { list-style:none; display:flex; flex-wrap:wrap; }
nav li { flex-grow:1; margin-left:0; height:60px; }
nav li>a, nav li>div { display:flex; justify-content:center; align-items:center; height:100%; }
nav li p { font-size:15px; font-weight:bold; color:#ffffff; text-shadow:1px 1px 2px #000; line-height:1.3; text-align:center; }
nav li a:hover { background:#ffffff; text-decoration:none; }
.nav_select { color:#ffffff; background:#fabd05; }

/*================================================
 *  パンくずリスト
 ================================================*/
.breadcrumb { margin-bottom:15px; }

/*================================================
 *  スライド
 ================================================*/
.slide { margin-top:30px; margin-bottom:30px; }
.bxslider li { margin-left:0; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top { position:fixed; bottom:20px; right:100px; font-size:14px; background-color:#6a6c72; }
#page-top a { display:block; width:50px; height:50px; background:url('images/totop.png'); border:1px solid white; }
#page-top a:hover { text-decoration:none; background-color:#fabd05; }

/*================================================
 *  フッタ
 ================================================*/
footer { margin-top:30px; padding-top:30px; padding-bottom:100px; background-color:#6a6c72; color:white; }
footer div.copyright { text-align:center; }
footer div.copyright span { display:inline-block; }
footer div.copyright span:not(:last-child) { margin-right:10px; }

/*================================================
 *  モーダル
 ================================================*/
.modal{ display:none; position:fixed; top:0; height:100vh; width:100%; }
.modal_bg { position:absolute; height:100vh; width:100%; background:rgba(0,0,0,0.75); }
.modal_content { display:none; position:fixed; z-index:99; top:50%; transform:translate(-50%,-50%); left:50%; width:80%; background:rgba(0,0,0,0.75); }
p.modal_close { position:absolute; z-index:99; top:0; right:20px; color:white; font-size:32px; margin-bottom:0; cursor:pointer; }

/*================================================
 *  本文
 ================================================*/
div.contents { margin-top:10px; margin-bottom:60px; }

/*================================================
 *  本文共通(ページタイトル)
 ================================================*/
.page_head { display:flex; justify-content:center; align-items:center; color:white; height:200px; margin-bottom:25px; }
.page_head>div { display:flex; justify-content:center; align-items:center; column-gap:100px; }
.page_head h2, .page_head h3, .page_head p { border:0; margin:0; padding:0; line-height:1.6; background-color:transparent; }
.page_head h2 { font-size:28px; }
.page_head h2:before { content:''; }
.page_head p { text-shadow:1px 1px 2px #000; font-size:16px; }

/*================================================
 *  トップ
 ================================================*/
.top { margin-bottom:30px; }
.top > h3 { padding-top:0; padding-bottom:0; margin:0; }
.top > h3:first-of-type { margin-top:0; }
.top h3+h3 { margin-top:20px; }
.top h3+ul { margin-top:15px; margin-bottom:15px; }
.top ul { margin-left:40px; }
.top_info dt { display:inline-block; width:130px; vertical-align:top; }
.top_info dd { display:inline-block; width:calc(100% - 130px); }

/*================================================
 *  吹っ霧君
 ================================================*/
.fukkiri .page_head { background-color:#797916; }
.fukkiri_lead { display:flex; justify-content:center; text-align:center; column-gap:75px; row-gap:50px; }
.fukkiri_lead p { font-weight:700; }
.fukkiri_lead p:not(:last-child) { margin-bottom:0; }
.fukkiri_lead_small { font-size:110%; }
.fukkiri_lead_large { font-size:130%; }
.fukkiri_lead_end   { font-size:110%; }
.fukkiri_feature { text-align:center; }
.fukkiri_feature ul { display:inline-block; text-align:left; }
.fukkiri_feature ul li p { margin-bottom:0; }
.fukkiri_feature ul li ul { list-style:none; }
.fukkiri_video_announce { font-size:20px; }
.fukkiri_videos { display:flex; flex-wrap:wrap; column-gap:50px; row-gap:25px; }
.fukkiri_video { width:calc((100% - 100px) / 3); }
.fukkiri_video p { text-align:center; }
.fukkiri_video img:hover { opacity:0.7; }
.fukkiri_video video { display:none; }
.fukkiri_close_button { text-align:right; }
.fukkiri_lineup { display:flex; justify-content:center; flex-wrap:wrap; column-gap:50px; }
.fukkiri_lineup div { width:calc((100% - 100px) / 3); }
.fukkiri_lineup div p { background-color:#7CB022; margin-bottom:0; padding:5px 0; color:white; }
.fukkiri_lineup div img { background-color:#eee; width:100%; }
.fukkiri_connect { display:block; margin:0 auto; }
.fukkiri_spec th, .fukkiri_spec td { text-align:center; vertical-align:middle; }
.fukkiri_end { font-size:20px; font-weight:bold; }

/*================================================
 *  クローボイス SP
 ================================================*/
.crow .page_head { background-color:#5f7aa1; }
.crow_lead { margin:25px 0; }
.crow_lead h3 { font-size:18px; }
.crow_lead ul { margin-top:15px; list-style:none; }
.crow_lead li { font-size:18px; margin-left:0; }
.crow_flow_item { display:flex; align-items:center; }
.crow_flow_item:not(:last-child) { margin-bottom:25px; }
.crow_flow_item h3 { width:310px; flex-shrink:0; margin-right:20px; background-color:#5f7aa1; color:white; padding:5px 10px; text-align:center; border-radius:10px; font-size:16px; font-weight:bold; }
.crow_feature { display:flex; align-items:flex-start; }
.crow_feature dt { display:list-item; list-style:disc; margin-left:1.5em; }
.crow_feature dd { margin-left:2em; }
.crow_feature img { flex-shrink:0; margin-left:50px; }
.crow_annotation { font-size:12px; }

/*================================================
 *  会社概要
 ================================================*/
.corp .page_head { background-color:#2d3755; }
table.corp { width:auto; }
table.corp th { width:120px; }
table.corp td { width:auto; padding:5px 20px; }
table.corp span { display:inline-block; }
table.corp span:not(:last-child) { margin-right:10px; }
.corp_biz { list-style-type:none; }
.corp_biz li { text-indent:-1.5em; }
.corp_biz>li::before { content:'■'; }
.corp_biz ul { margin-left:0em; }
.corp_biz ul li { text-indent:0em; }
.corp_customer { display:flex; flex-wrap:wrap; column-gap:50px; }

/*================================================
 *  お問い合わせ
 ================================================*/
.req .page_head { background-color:#296F44; }
.req_top { text-align:center; font-weight:normal; font-size:18px; border-left:0; margin-left:0; padding-left:0; }
label.req, input.req, textarea.req { color:red; }
form.diag_form { width:800px; margin:0 auto; }
form.diag_form * { font-size:16px; }
form.diag_form label { float:left; width:200px; margin-right:20px; text-align:right; clear:left; padding-top:4px; }
form.diag_form input, form.diag_form textarea { float:left; width:500px; margin-right:72px; font-size:16px; padding:3px; margin-bottom:5px; border:1px solid gray; }
form.diag_form input.req_tel { width:200px; margin-right:20px; }
form.diag_form span { float:left; display:inline-block; width:350px; padding-top:4px; }
form.diag_form textarea { float:left; width:500px; height:200px; margin-right:50px; margin-bottom:10px; }
form.diag_form input[type=submit] { clear:left; display:block; width:200px; margin-left:220px; margin-top:20px; padding-top:10px; padding-bottom:10px; background-color:#6A6C72; color:white; }
div.diag_announce { margin-bottom:10px; padding:5px; border:2px solid red; }
div.diag_announce p { margin-bottom:0; text-align:center; }
form.diag_confirm table { min-width:80%; }
form.diag_confirm table * { font-size:14px; padding:5px; }
form.diag_confirm table th { width:150px; }
form.diag_confirm input[type=submit] { margin-left:300px; }
div.diag_send { margin:50px 0 300px; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■          タブレット向け          ■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:960px) {

/*================================================
 *  タグ設定
 ================================================*/
th { padding:5px; white-space:normal; }

/*================================================
 *  クラス設定
 ================================================*/
.inner { width:100%; margin-left:unset; margin-right:unset; }

/*================================================
 *  ヘッダ
 ================================================*/
header { margin-top:10px; margin-bottom:10px; padding-left:10px; padding-right:10px; }
.header_r p { font-size:12px; }

/*================================================
 *  本文
 ================================================*/
.slide { width:100%; margin:10px 0; }
.contents { padding:0 10px; }

/*================================================
 *  吹っ霧君
 ================================================*/
.fukkiri_lead { column-gap:25px; }
.fukkiri_lead_small { font-size:100%; }
.fukkiri_lead_large { font-size:120%; }
.fukkiri_lead_end   { font-size:100%; }
.fukkiri_lineup { column-gap:15px; }
.fukkiri_lineup div { width:calc((100% - 30px) / 3); }

/*================================================
 *  クローボイス SP
 ================================================*/
.crow_feature img { margin-left:25px; max-width:40%; }

}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■  タブレット・スマートフォン向け  ■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:740px) {

/*================================================
 *  タグ設定
 ================================================*/
h2 { font-size:18px; line-height:1.6; padding:6px 0 5px 5px; }
img { max-width:100%; }
tbody th { white-space:nowrap; }

/*================================================
 *  クラス設定
 ================================================*/
img.right { display:block; float:none; margin:0 auto 10px; }
.box_contents { margin:20px 0 25px; }
.product_top { text-align:center; font-size:16px; }
.table_scroll { display:block; overflow-x:scroll; white-space:nowrap; -webkit-overflow-scrolling:touch; }

/*================================================
 *  ヘッダ
 ================================================*/
header { display:block; }
.header_l { display:flex; justify-content:center; margin-right:unset; margin-bottom:10px; }
.header_r { align-items:center; row-gap:10px; text-align:center; }

/*================================================
 *  ナビ
 ================================================*/
nav h3 { display:block; color:white; font-size:18px; font-weight:bold; text-align:center; border-left:0; border-bottom:1px solid #ffffff; }
nav h3:after { content:"\0025bc"; margin-left:20px; }
nav h3.menuOpen:after { content:"\0025b2"; margin-left:20px; }
nav>div { display:none; }
nav li { width:calc((100% - 1px) / 2); }
nav li:nth-child(-n+2) { border-bottom:1px solid #ffffff; }
nav li:nth-child(even) { border-left:1px solid #ffffff; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top { bottom:20px; right:30px; }

/*================================================
 *  フッタ
 ================================================*/
footer { font-size:12px; }

/*================================================
 *  モーダル
 ================================================*/
.modal_content { width:90%; }

/*================================================
 *  トップ
 ================================================*/
.top ul { margin-left:10px; }
.top_info li:not(:last-child) { margin-bottom:0.5em; }
.top_info dt, .top_info dd { display:block; width:calc(100% - 15px); }
.top_info dd { margin-left:15px; }

/*================================================
 *  本文共通(ページタイトル)
 ================================================*/
.page_head { height:150px; }
.page_head>div { column-gap:25px; }
.page_head h2 { font-size:24px; }
.page_head p { font-size:14px; }
.page_head img { max-width:25%; }

/*================================================
 *  吹っ霧君
 ================================================*/
.fukkiri_lead { flex-wrap:wrap; }
.fukkiri_video_announce { font-size:18px; }
.fukkiri_videos { column-gap:25px; }
.fukkiri_video { width:calc((100% - 25px) / 2); }
.fukkiri_lineup { column-gap:10px; row-gap:10px; }
.fukkiri_lineup div { width:calc((100% - 20px) / 2); }
.fukkiri_end { font-size:16px; }

/*================================================
 *  クローボイス SP
 ================================================*/
.crow_lead h3 { font-size:16px; }
.crow_lead li { font-size:16px; }
.crow_flow_item { display:block; }
.crow_flow_item:not(:last-child) { margin-bottom:10px; }
.crow_flow_item h3 { margin-right:0; }
.crow_feature { display:block; }
.crow_feature img { display:block; margin:20px auto 0; width:320px; max-width:100%; }

/*================================================
 * 会社案内
 ================================================*/
table.corp td { padding:5px 10px; }

/*================================================
 *  お問い合わせ
 ================================================*/
.req_top { text-align:left; padding:10px; }
form.diag_form { display:block; width:100%; margin:0; padding:10px 20px 10px; }
form.diag_form * { }
form.diag_form label { float:none; display:block; text-align:left; width:auto; margin-right:0; margin-top:5px; }
form.diag_form label:first-child { margin-top:0; }
form.diag_form input { float:none; display:block; width:100%;margin-right:0; margin-bottom:0; }
form.diag_form input.req_tel { width:100%; margin-right:0; }
form.diag_form span { float:none; width:100%; }
form.diag_form textarea { float:none; display:block; width:100%; box-sizing:border-box; margin-right:0; height:150px; }
form.diag_form input[type=submit] { margin:10px auto 0; }
div.diag_announce { margin:auto 10px 10px; width:auto; font-size:16px; }
form.diag_confirm table { border:0; }
form.diag_confirm table * { font-size:16px; padding:0; display:block; margin-bottom:0; }
form.diag_confirm table th, form.diag_confirm table td { display:block; width:100%; box-sizing:border-box; padding:5px; }
form.diag_confirm input[type=submit] { margin:10px auto 0; }
div.diag_send { margin:50px 0; }
div.diag_send p { text-align:center; }

}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■        スマートフォン向け        ■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:480px) {

h2 { font-size:18px; }

/*================================================
 *  ヘッダ
 ================================================*/
.header_r img { width:240px; }

/*================================================
 *  本文共通(ページタイトル)
 ================================================*/
.page_head { display:block; text-align:center; padding:20px 10px; height:auto; }
.page_head>div { display:block; }
.page_head h2 { font-size:22px; }
.page_head p { font-size:16px; }
.page_head img { margin-left:0; margin-top:15px; max-width:100%; }

/*================================================
 *  吹っ霧君
 ================================================*/
.fukkiri_video_announce { font-size:16px; }
.fukkiri_videos { column-gap:10px; }
.fukkiri_video { width:calc((100% - 10px) / 2); }
.fukkiri_lineup div { width:calc((100% - 20px) /2); }
.fukkiri_lineup div:not(:nth-child(n+2)) { margin-bottom:10px; }
.fukkiri_end { font-size:16px; }

/*================================================
 *  クローボイス SP
 ================================================*/
.crow_flow_item h3 { width:calc(100% - 10px); margin-right:0; padding:5px; border-radius:5px; }

/*================================================
 *  お知らせ
 ================================================*/
.info_image img { width:calc(100% - 22px); }

}