@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ *{ margin:0;padding:0; border:0; font-family: "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; color:#000000;word-wrap:break-word; } img{vertical-align:top;} li{list-style:none;} table{border-collapse:collapse;} body{ background-color:#ffffff; color:#000000;font-size:16px; line-height:1.8; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ /*em { color: #e58c93; font-weight: normal; font-style: normal; } .red { color:#ff0000;} .blue { color:#0000ff;} .green { color:#008000;} .black { color:#000; } .white { color:#fff; }*/ /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a {color:#000000;text-decoration:none;} /*a:hover { color: #1111cc; text-decoration: underline; }*/ a img{ display: block; transition: 0.5s; } a img:hover { opacity: 0.7; transition: 0.5s; } /* -- CSSで画像を整形していたら -- */ a.opa:hover { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity: 0.7; } /* フォームのsubmitを解除(iOS) */ input[type="submit"]{ -webkit-appearance:none; border-radius:0; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ div.header_box div.top{ height: 60px; border-bottom: #db0016 3px solid; overflow: hidden; } div.header_box div.top > div .logo{float: left; padding: 10px 10px;} div.header_box div.top > div .logo a{display: block;} div.header_box div.top > div .logo a img{width: auto;height: 40px;} /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ /*------------------- 　drawer menu -------------------*/ /* ドロワー */ .drawer-menu { z-index:99999; position:fixed;top:0;right:0; display:none;width:80%;height:100vh; background-color:rgba(255,255,255,1.0); overflow-y:scroll; } /* チェックボックスオンの時 */ .check:checked ~ .drawer-menu {display:block;} /* チェックボックスを非表示 */ .check{display:none;} /* メニューボタン(label) */ .menu-btn{ position:absolute;top:10px;right:10px; display:block;width:40px;height:40px; z-index:999999; cursor: pointer; } .menu-btn:before, .menu-btn:after, .menu-btn span:after{ content:""; display:block;height:2px; position:absolute;left:6px;width:28px; background-color:#000000; } .menu-btn:before{top:10px;} .menu-btn:after{top:19px;} .menu-btn span:after{top:28px;} .check:checked ~ .menu-btn{ position: fixed;top:10px; } .check:checked ~ .menu-btn:before{ top:19px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .check:checked ~ .menu-btn:after{ -webkit-transform: rotate(45deg); transform: rotate(45deg); } .check:checked ~ .menu-btn span:after{display:none;} /* コンテンツの閉じる。普段は非表示(label)*/ .close-menu{ position:fixed;top:0;right:80%; width:20%;height:100vh; visibility:hidden; opacity:0; } /* チェックボックスオンの時 */ .check:checked ~ .close-menu{ visibility:visible; opacity:1; z-index:99998; background-color:rgba(0,0,0,0.4); } div.drawer-menu ul{padding: 60px 0;} div.drawer-menu ul li a{ position: relative; display: block; padding: 0 25px 0 10px; border-top: #cccccc 1px dotted; font-weight: bold;line-height: 50px; } div.drawer-menu ul li a::after{ content: ""; position: absolute; top:0; bottom:0;right: 10px; display: block;width: 7px; height: 7px;margin: auto; border-top: #000000 2px solid; border-right: #000000 2px solid; transform: rotate(45deg); } div.drawer-menu ul li:last-child a{border-bottom: #cccccc 1px dotted;} /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb{ width: 90%; margin:0 auto 20px; padding: 10px 0; font-size: 75%; } /*-------------------------------------------------- ************************************************** ページタイトル ************************************************** --------------------------------------------------*/ #page_title{ width: 100%; background: #eee;/*仮*/ padding: 50px 0 50px; } h1{ width: 90%; margin: 0 auto; font-size: 125%; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ .main_contents{ width: 96%; margin: 0 auto; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ div.footer_box{padding: 40px 0 0;} div.footer_box_top{border-top: #e83928 10px solid;} div.footer_box_top ul{ display: flex;flex-wrap: wrap; margin: 0 auto;padding: 23px 0; } div.footer_box_top ul li:first-child{width: 100%;} div.footer_box_top ul li:first-child a{font-size: 18px; font-weight: bold;} div.footer_box_top ul li{padding: 5px 30px;} div.footer_box_top ul li a:hover{text-decoration: underline;} div.footer_box_top + ul{ padding: 20px 0; border-top: #e83928 3px solid; text-align: center; } div.footer_box_top + ul li{display: inline-block;padding: 0 13px;} div.footer_box_top + ul li a{font-size: 14px;} div.footer_box_top + ul li a:hover{text-decoration: underline;} div.footer_box_top + ul + div{border-top: #e83928 1px solid;} div.footer_box_top + ul + div dl{ padding: 25px 0 15px; text-align: center; } div.footer_box_top + ul + div dl dt{padding: 0 6px;font-size: 14px;} div.footer_box_top + ul + div dl dd{ display: inline-block;padding: 0 6px; font-size: 14px; } div.footer_box_top + ul + div div{padding: 0 0 20px;text-align: center;} div.footer_box_top + ul + div div small{font-size: 14px;} /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ .go_top { position: fixed;right:10px;bottom:50px; width:40px;height:40px; } .go_top a{ position: relative; display: block;width:40px;height:40px;box-sizing: border-box; background-color: #db0016; border: #ffffff 2px solid;border-radius: 5px; } .go_top a::after{ content: ""; position: absolute; top:14px;left: 0;right: 0; display: block;width: 10px; height: 10px;margin: auto; border-top: #ffffff 3px solid; border-right: #ffffff 3px solid; transform: rotate(-45deg); }