@charset "UTF-8"; /*================================================ * CSSリセット ================================================*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} /*================================================ * 一般・共通設定 ================================================*/ body { font-size:14px; color:#333; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",sans-serif; line-height:1.6; background:#fff; } .inner { position:relative; width:980px; margin:0 auto; } header { box-sizing:border-box; position:relative; width:100%; background:#fcfcfc; } nav { width:100%; background:#fff; box-shadow:0 1px 2px #d0d8dc; ⁄zoom:1; } nav:after { content:''; display:block; clear:both; } #contents { overflow:hidden; width:980px; margin:20px auto; background:#fff; } #main { box-sizing:border-box; overflow:hidden; float:left; width:68%; } #sub { box-sizing:border-box; overflow:hidden; float:right; width:28%; } footer { box-sizing:border-box; width:100%; margin:0 auto; } a { color:#333; text-decoration:underline; } a:hover { color:#333; text-decoration:none; } h2 { margin-bottom:0.5em; padding:10px 0; font-size:21px; color:#333; border-top:3px solid #710000; border-bottom:1px dotted #710000; } h3 { margin-bottom:0.25em; padding:2px 5px; color:#fff; font-size:16px; background:#333; } h4 { margin-bottom:0.25em; font-size:15px; color:#710000; border-bottom:3px solid #710000; } h5 { position:relative; margin-bottom:0.25em; padding-left:10px; color:#710000; font-size:14px; font-weight:bold; } h5:before { content:""; margin-top:-7px; position:absolute; top:50%; left:0; width:5px; height:14px; background:#8c0e0e; } h6 { margin-bottom:0.25em; color:#382400; font-size:14px; font-weight:bold; } p { margin:0 0 1em 0; } img { vertical-align:bottom; } em { font-weight:bold; } strong { font-weight:bold; color:#ff0000; } pre { margin:1em 0; padding:1em; } blockquote { margin-bottom:1em; padding:1em; border:1px dotted #ddd; border-left:5px solid #ddd; } ul,ol,dl { margin:0 0 1em 0; } ul li { list-style:disc; } ol li { list-style:decimal; } li { margin-left:2em; } dt { margin-bottom:0.5em; border-bottom:1px dotted #ddd; } dt:before { content:"\0025a0"; } dd { margin-bottom:1em; } /* table { width:100%; margin-bottom:1em; border-collapse:collapse; border:1px solid #ddd; background:#fff; } */ th { padding:10px; text-align:center; vertical-align:middle; border:1px solid #ddd; background:#eee; } td { padding:10px; text-align:left; border:1px solid #ddd; } /*================================================ * table 枠消し ================================================*/ .td-wakunashi { border-style:none; } /*================================================ * ヘッダー ================================================*/ header { padding:30px 10px; } .summary { position:absolute; top:0; right:10px; margin:0; } /*================================================ * グローバルナビゲーション ================================================*/ @media print, screen and (min-width:768px) { nav { background:#9b0f0f; border-bottom:5px solid #710000; box-shadow:0 1px 3px #999; z-index:3; } /* 共通 */ nav ul { margin:0; padding:0; } nav ul li { position:relative; margin:0; padding:0; list-style:none; } nav ul li a { display:block; margin:0; padding:16px 0; background:#9b0f0f; color:#fff; font-size:14px; font-weight:bold; line-height:1; text-decoration:none; } nav ul li:hover > a { color:#fff; background:#710000; } /* 1段目 */ nav ul.gnav > li { position:relative; width:17%; float:left; margin:0; padding:0; text-align:center; list-style:none; } nav ul.gnav > li:first-child { width:15%; } nav ul.gnav > li.subnav a { padding-right:20px; } nav ul.gnav > li.subnav > a:after { position:absolute; content:""; top:20px; width:0; height:0; margin-left:10px; border:5px solid transparent; border-top-color:#fff; } /* 2段目 */ nav ul li ul { position:absolute; z-index:3; top:100%; left:0; width:100%; margin:0; padding:0; } nav ul li ul li { overflow:hidden; width:150%; height:0; color:#fff; transition:.2s; } nav ul li ul li a { padding:13px 15px; text-align:left; background:#7c0c0c; font-weight:normal; } nav ul li:hover > ul > li { overflow:visible; height:40px; border-bottom:1px solid #8c0e0e; } nav ul li:hover ul li:last-child { border-bottom:none; } nav ul.gnav > li:last-child > ul { left:-50%; } nav ul li ul li ul:before { position:absolute; content:""; top:13px; left:-20px; width:0; height:0; border:5px solid transparent; border-left-color:#fff; } nav ul.gnav > li:last-child ul li ul:before { position:absolute; content:""; top:13px; left:200%; margin-left:-20px; border:5px solid transparent; border-right-color:#fff; } /* 3段目 */ nav ul li ul li ul { top:0; left:100%; } nav ul li ul li ul li { width:100%; } nav ul li ul li:hover > ul > li { border-bottom:1px solid #6d0c0c; } nav ul.gnav > li:last-child > ul li ul { left:-100%; } nav ul li ul li ul li a { background:#590000; } nav ul li ul li ul li a:hover { background:#420404; } .gnav { display:block !important; } #spMenu { display:none; } .fixed { position:fixed; top:0; left:0; } } /*================================================ * トピックパス(パンくずリスト) ================================================*/ #topicpath { font-size:12px; margin-bottom:20px; padding:2px; background:#f1f1f1; } /*================================================ * サブコンテンツ ================================================*/ .submenu li { margin:0; padding:0; list-style:none; } .submenu li a:before { content:"\0025a0"; color:#000; } .submenu li a { display:block; padding:10px 2px; color:#000; border-bottom:1px dotted #ddd; text-decoration:none; } .submenu li a:hover { background:#eee; } .bnr { overflow:hidden; } .bnr ul { overflow:hidden; } .bnr li { margin:0 0 10px 0; padding:0; list-style:none; } .bnr li a:hover { opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha( opacity=80 )"; } .bnr img { width:100%; } /*================================================ * フッター ================================================*/ footer { clear:both; } .footmenu { width:100%; padding:20px 0; overflow:hidden; background:#efede9; } .footmenu ul { position:relative; float:left; left:50%; margin:0; padding:0; } .footmenu li { position:relative; left:-50%; float:left; list-style:none; margin:0; padding:0 15px; font-size:12px; text-align:center; } .footmenu a { color:#333; text-decoration:none; } .footmenu a:hover { color:#333; text-decoration:underline; } .copyright { clear:both; padding:20px 0; font-size:11px; text-align:center; color:#efede9; background:#2e2e2e; } /*================================================ * ページトップへの戻り ================================================*/ .totop { position:fixed; bottom:15px; right:15px; } .totop a { display:block; text-decoration:none; } .totop img { background:#710000; } .totop img:hover { background:#900000; } /*================================================ * クラス ================================================*/ .list { padding:0 0 0 0.5em; } .list li { margin:0; padding:0 0 0 15px; list-style:none; background:url(../images/check.png) 0 5px no-repeat; } .info dt { border-bottom:none; } .info dd { padding-bottom:1em; border-bottom:1px solid #ddd; } .col_two_one { overflow:hidden; } .col_two_one ul { overflow:hidden; margin:2% -2% 0 0; } .col_two_one li { list-style:none; float:left; width:48%; margin:0 2% 2% 0; } .col_two_one li:nth-child(2n+1) { clear:both; } .col_two_one li img { width:100%; margin-bottom:2.5%; } /*================================================ * スライドショー ================================================*/ /* スライドショー */ .slide { display:none; position:relative; overflow:hidden; margin:20px 0; } .slidePrev { position:absolute; cursor:pointer; z-index:2; } .slideNext { position:absolute; cursor:pointer; z-index:2; } .slidePrev img { position:absolute; width:50px !important; height:60px !important; } .slideNext img { position:absolute; width:50px !important; height:60px !important; } .slideInner { position:relative; margin:0 0 5px 0; padding:0; } .slideInner li { float:left; margin:0; padding:0; list-style:none; } .slideInner li img { margin:0 5px; padding:0; } .filterPrev { position:absolute; left:0; opacity:0.5; filter:alpha(opacity=50); background-color:#fff; } .filterNext { position:absolute; right:0; opacity:0.5; filter:alpha(opacity=50); background-color:#fff; } .controlNav { position:relative; float:left; left:50%; } .controlNav span { position:relative; left:-50%; float:left; margin:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; width:10px; height:10px; overflow:hidden; background:#ccc; text-indent:-9999px; vertical-align:middle; } .controlNav span:hover { background:#999; cursor:pointer; } .controlNav span.current { background:#900000; } /*================================================ * タブレット向けデザイン ================================================*/ /* スクロールバーを考慮して20px大きいサイズで切り替え */ @media screen and (max-width:979px) { .inner { width:100%; } #contents { box-sizing:border-box; width:100%; padding:0 10px; } footer { width:100%; } } /*================================================ * スマートフォン向けデザイン ================================================*/ @media screen and (max-width:767px) { .lock { overflow:hidden; } header { z-index:2; box-sizing:border-box; position:fixed; top:0; left:0; width:100%; padding:15px 10px; } .summary { position:relative; top:auto; right:auto; margin-top:15px; } #main { float:none; width:100%; } #sub { float:none; width:100%; } nav { background:#710000; } nav ul { margin:0; padding:0; } nav .inner > ul { z-index:2; overflow:auto; position:fixed; top:53px; right:0; width:100%; height:88%; height:-webkit-calc(100% - 53px); height:calc(100% - 53px); } nav li { position:relative; width:100%; float:none; margin:0; text-align:left; list-style:none; border-bottom:1px solid #8c0e0e; background:#9b0f0f; } nav li:first-child { border-top:0; } nav li:last-child { border-bottom:0; } nav li a { display:block; padding:10px 30px; color:#fff; text-decoration:none; background:#9b0f0f; } nav li a:hover { color:#fff; background:#710000; } nav ul ul { display:none; position:relative; } nav li li a { box-sizing:border-box; width:100%; padding:10px 30px 10px 50px; text-align:left; } nav li li li a { padding:10px 30px 10px 70px; } .subnav > a:before { display:block; content:""; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); top:20px; right:30px; width:10px; height:10px; margin-top:-5px; background:#f1f1f1; } .subnav > a:after { display:block; content:""; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); top:20px; right:30px; width:10px; height:10px; margin-top:-10px; background:#9b0f0f; } .subnav a:hover:after { background:#710000; } .active > a:before { margin-top:0; } .active > a:after { margin-top:5px; } .gnav { display:none; } #spMenu { display:block; z-index:2; position:fixed; top:10px; right:10px; } #spMenu:hover { cursor:pointer; } #navBtn { display:inline-block; position:relative; width:30px; height:30px; border-radius:5%; background:#710000; } #navBtnIcon { display:block; position:absolute; top:50%; left:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:#f1f1f1; transition:.2s; } #navBtnIcon:before, #navBtnIcon:after { display:block; content:''; position:absolute; top:50%; left:0; width:14px; height:2px; background:#f1f1f1; transition:0.3s; } #navBtnIcon:before { margin-top:-6px; } #navBtnIcon:after { margin-top:4px; } #navBtn .close { background:transparent; } #navBtn .close:before, #navBtn .close:after { margin-top:0; } #navBtn .close:before { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } #navBtn .close:after { transform:rotate(-135deg); -webkit-transform:rotate(-135deg); } .col_two_one ul { margin-right:0; } .col_two_one li { width:100%; } .col_two_one li:nth-child(2n+1) { clear:both; } }