@charset "utf-8";

/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*全体の設定
---------------------------------------------------------------------------*/
html,body { margin:0;padding:0; height:100%; font-size:14px;}

body { font-family:"ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust:none; background:#fff; color:#333; line-height:2;}

/*リセット*/
figure {margin:0;}
dd {margin:0;}
nav {margin:0;padding:0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border:none; max-width:100%; height:auto; vertical-align:middle;}

/*videoタグ*/
video {max-width:100%;}

/*iframeタグ*/
iframe {width:100%;}

/*section全般の設定*/
section + section { padding-top:30px;}

/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity:0;}
	100% {opacity:1;}
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a { color:#333; transition:0.3s;}
a:hover { color:#54adf1;}

/*container（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container { max-width:1500px; margin:0 auto; height:100%; display:flex; flex-direction:column; justify-content:space-between;}

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header { display:flex; justify-content:space-between; align-items:center; flex:0 0 auto; height:100px; padding:20px;}

/*ロゴ画像*/
header #logo { line-height:0;margin:0; width:200px;}

/*電話番号ブロック*/
header address { font-style:normal; margin-right:80px;}

/*電話番号のアイコン（アイコンにはFont Awesomeを使用）*/
header address i { color:#54adf1; padding-right:10px;}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr { display:block; position:fixed;z-index:100; top:25px; right:20px; width:50px; height:50px; cursor:pointer; background:rgba(0,0,0,0.6) url(../images/ham.png) no-repeat center top/50px;}

/*×印が出ている状態の設定。*/
#menubar_hdr.ham { background:#ff0000 url(../images/ham.png) no-repeat center bottom/50px;}

/*メニュー設定（全端末サイズ共通の設定）
---------------------------------------------------------------------------*/
#menubar ul { list-style:none;margin:0;padding:0;}

/*メニュー1個あたりの設定*/
#menubar ul a { display:block; text-decoration:none; background:linear-gradient(#54adf1, #002266); color:#fff; padding:15px 20px; border-top-left-radius:5px; border-top-right-radius:5px;}

/*マウスオン時のメニュー色*/
#menubar > ul > li > a:hover { filter:brightness(1.2);}

/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu { cursor:default;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before { font-family:"Font Awesome 5 Free"; content:"\f078"; font-weight:bold; margin-right:1em;}

/*メニューの設定
---------------------------------------------------------------------------*/
#menubar {height:0px; overflow:hidden;}

/*小さな端末用のメニューブロック*/
#menubar.db { position:fixed; overflow:auto; z-index:99; left:0px; top:0px; width:100%; height:100%; padding:90px 20px; background:rgba(0,0,0,0.8);}

/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
#menubar .ddmenu_parent ul {display:none;}

/*ドロップダウンメニュー1個あたりの設定*/
#menubar .ddmenu_parent ul a { background:#fff; color:#333;}

/*マウスオン時*/
#menubar .ddmenu_parent ul a:hover { background:#fafafa; color:#54adf1;}

/*contentsブロック
---------------------------------------------------------------------------*/
#contents { min-height:0%;	flex:1 0 auto;}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main { display:block; margin:50px 3% 100px;}

/*mainブロック内のh2タグ*/
main h2 { border-bottom:4px solid #eee;}

/*mainブロック内のh2タグに下線を引くための指定。*/
main h2 span.uline { display:inline-block; border-bottom:4px solid #54adf1; position:relative; bottom:-4px; padding:0 20px;}

/*mainブロック内のh3タグ*/
main h3 { border-bottom:4px solid #eee; padding:20px 20px 0px;}

/*mainブロックのpタグ*/
main p { margin:0 20px 30px;}

.txt{ width: 95%; margin: 5px auto 15px;}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu { background:#333; color:#999; font-size:0.7rem; padding:20px; display:flex; justify-content:space-between; align-items:flex-start;}
#footermenu a { text-decoration:none; color:#999;}
#footermenu a:hover { color:#ccc;}

/*ulタグ（メニューの列単位）*/
#footermenu ul { margin:0; padding:0 2px; flex:1; list-style:none;}

/*title*/
#footermenu .title { font-weight:bold; color:#ccc; padding-bottom:5px;}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size:100%;}

footer { font-size:0.6rem; background:#002266; color:#fff; text-align:center; padding:20px;}
footer a {color:#fff;text-decoration:none;}
footer a:hover {color:#fff;}
footer .pr {display:block;}


/*サービスページ（listブロック）
---------------------------------------------------------------------------*/
/*listボックスを囲むボックス*/
.list-container { display:flex; flex-wrap:wrap; justify-content:space-between; flex-direction:column;}

/*listボックス。１個あたりのボックスの指定です。*/
.list { display:flex; flex-direction:column; justify-content:space-between; margin-bottom:30px; background:#111; color:#fff; padding:20px; box-shadow:2px 2px 5px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;}

/*listボックス内のfigure画像*/
.list figure { margin:-20px -20px 0;}

/*listボックス内のh4タグ*/
.list h4 { margin:10px 0; font-size:1.2em; font-weight:normal;}

/*listボックス内のpタグ*/
.list p { margin:0; font-size:0.7em;}

/*IE対策*/
.list div { min-height:0%;}

/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg { position:relative;}

/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots { margin:0;padding:0; line-height:1; width:100%; text-align:center; position:absolute; bottom:10px;}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li { display:inline-block; margin:0 10px; cursor:pointer;}

/*buttonタグ*/
ul.slick-dots li button { border:none; padding:0; display:block; text-indent:-9999px; width:12px; height:12px; border-radius:50%; cursor:pointer; background:#fff;}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button { background:#54adf1;}

/*アイコン
---------------------------------------------------------------------------*/
/*アイコンの共通設定*/
.icon { display:inline-block; padding:0 10px; background:#999; color:#fff; font-size:0.7em; border-radius:3px; margin-right:3px;}

/*NEWアイコン*/
.newicon { background:#e82600;}

/*option1アイコン*/
.option1 { background:#e80068;}

/*option2アイコン*/
.option2 { background:#009def;}

/*informationテーブルブロック設定*/
.info { table-layout:fixed; width:100%; margin:0 auto 30px;}
.info tr { border-bottom:1px solid #ccc;}
.info th{ width:20%; text-align:left;}
.info td { padding:10px 5px; word-break:break-all;}
.info td img { width:250px;}


/*詳細ページ
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image { position:relative; margin:0 auto 20px; text-align:center; width:100%;}

/*大きな画像のボックスの中の画像*/
#item-image img { width:100%;}

/*サムネイル画像*/
.thumbnail { width:80px; border:1px solid #dcdcdc; margin-bottom:5px;}

.thumbnail:hover { border:1px solid #999;}

/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn { text-align:center;}

/*ボタン*/
.btn a,
.btn input { display:inline-block;text-decoration:none;border:none; color:#fff; border-radius:3px; padding:10px 20px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); background:linear-gradient(#54adf1,#1d95f1); font-size:1rem;}

/*ボタンのマウスオン時*/
.btn a:hover,
.btn input:hover { filter:brightness(1.2); cursor:pointer;}

/*listブロック内でのボタン*/
.list .btn a, .list .btn input { margin-top:10px; display:block;}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption { font-weight:bold; padding:10px 5px; background:#333; color:#fff;}

/*ta1テーブルブロック設定*/
.ta1 { border-top:1px solid #ccc; table-layout:fixed; width:100%; margin:0 auto 30px;}
.ta1 tr { border-bottom:1px solid #ccc;}
.ta1 th, .ta1 td { padding:10px 5px; word-break:break-all;}
.ta1 th { width:30%; text-align:left; background:#f7f7f7;}

/*製品FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq { padding:0 5px;}

/*質問*/
.faq dt { border-radius:10px; margin-bottom:20px; background:linear-gradient(#fff,#f7f7f7); box-shadow:0px 0px 5px rgba(0,0,0,0.2); text-indent:-2em; padding:5px 1em 5px 3em;}

/*アイコン（Font Awesome）*/
.faq dt::before { font-family:"Font Awesome 5 Free"; content:"\f059"; color:#54adf1; padding-right:1em;}

/*回答*/
.faq dd { padding:5px 1em 30px 3em;}

/*opencloseを適用した要素のカーソル*/
.openclose { cursor:pointer;}

.faq dt span {text-indent:0;}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display:block;}

/*ボタンの設定*/
.pagetop a { display:block; text-decoration:none; text-align:center; position:fixed; right:20px; bottom:20px; color:#fff; font-size:1.5rem; background:rgba(0,0,0,0.3); width:2em; line-height:2em;}

/*マウスオン時*/
.pagetop a:hover { background:rgba(0,0,0,0.8);}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content:"";display:block;clear:both;}
.color-theme, .color-theme a {color:#54adf1 !important;}
.color-check, .color-check a {color:#f00 !important;}
.c {text-align:center !important;}
.ws {width:95%;display:block;}
.wl {width:95%;display:block;}
.mb30 {margin-bottom:30px !important;}
.look {display:inline-block;border:1px solid #ccc;padding:5px 20px;background:rgba(0,0,0,0.03);border-radius:5px;margin:5px 0;}
.ofx {overflow-x:hidden;}


/*---------------------------------------------------------------------------
ここから下は画面幅480px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px) {

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header { flex-direction:column;}

/*電話番号ブロック*/
header address { margin-right:0px;}

}

/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {

/*全体の設定
---------------------------------------------------------------------------*/
html, body { font-size:18px;}

/*fixmenu。大きな端末で、メインメニューが画面上部についた時のスタイル。
---------------------------------------------------------------------------*/
.fixmenu{ position:fixed !important;z-index:100; left:0px;top:0px; width:100%;}

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*電話番号ブロック*/
header address { margin-right:0px;}

/*menubar
---------------------------------------------------------------------------*/
/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display:none;}

/*メニューのボックス全体の設定（※変更不要）*/
#menubar {height:auto; overflow:visible;}
#menubar.db {position:static; overflow:visible; height:auto; padding:0;}

/*ドロップダウンに影響させない為。*/
#menubar > ul { display:flex; justify-content:space-between; max-width:1500px; margin:0 auto;}

/*メニュー１個あたりの設定*/
#menubar li { text-align:center; flex:1; position:relative;}


/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
#menubar ul ul { position:absolute;z-index:100; width:100%;}

/*メニュー１個ごとに入れる線*/
#menubar .ddmenu_parent ul li a { border:1px solid #ccc; border-top:none;}

/*最初のドロップダウンにのみ上の線を入れる*/
#menubar .ddmenu_parent ul li:first-of-type a { border-top:1px solid #ccc;}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu { font-size:0.8rem; padding:20px 50px;}


/*サービスページ（listブロック）
---------------------------------------------------------------------------*/
/*listボックスを囲むボックス*/
.list-container { flex-direction:row;}

/*listボックス。１個あたりのボックスの指定です。*/
.list { width:49%;}

/*詳細ページ
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image { width:80%;}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption { padding:5px 15px;}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td { padding:20px 15px;}

/*th（左側）のみの設定*/
.ta1 th { width:20%;}

/*その他
---------------------------------------------------------------------------*/
.ws {width:48%;display:inline;}

}