/*------------------------------- >>> style.css --------------------------------- # Normalize # Elements # Links # Layout # Header = HOMEレイアウト = Primary Menu = トピックパス = ページタイトル # Sidebar # Footer 印刷用CSS Privacy Poricy -------------------------------*/ @font-face { font-family: "lowline-only"; src: local("Hiragino Sans"), local("Hiragino-Sans"), local("游ゴシック体"), local("YuGothic"), local("Meiryo"), local("Meiryo UI"), local("メイリオ"); unicode-range: U+005F, U+FF3F; } /*------------------------------- # Normalize -------------------------------*/ *{margin:0px;padding:0px;} *,*:before,*:after {box-sizing: inherit;} html, body {height: 100%;width: 100%;} 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, caption,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin:0;padding:0;border:0;vertical-align: baseline;letter-spacing:normal;list-style:none;} html { font-size:50% !important; -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;box-sizing:border-box;} body { color: #3E3026; background-color:#FFFFFF; font-size: 16px; font-size: 1.6rem; line-height: 1.75; overflow-x: hidden; -webkit-text-size-adjust: none; min-width:initial; } body,button{font-family:"lowline-only", "BIZ UDPGothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo; font-weight: 500;} @media print,screen and (min-width:769px) { html {font-size:62.5% !important;} } article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {display: block;} button{overflow: visible;} :focus:not(:focus-visible) {outline: 0;} b,strong {font-weight: 700;} mark {background: #F5F5F5;color: #3E3026;} sub,sup {font-size:75%;line-height: 0;position: relative;vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} pre {overflow: auto;} #accessible{overflow: hidden;} #srOnly a{ clip: rect(1px, 1px, 1px, 1px); position: fixed; height: 1px; width: 1px; overflow: hidden;} #srOnly a:focus { background-color: #E8F7D2; border-radius: 5px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.4); clip: auto ; color: #3E3026; display: block; font-weight: 700; height: auto; top: 10px; left: 10px; line-height: normal; padding: 12px 30px ; text-decoration: none; width: auto; z-index: 99999;} #srOnly:hover {background-color: #fff; color: #3E3026;} .clear:before,.clear:after{ content: ""; display: table; table-layout: fixed;} .clear:after,#siteHeader:after,#siteFooter:after {clear: both;} img {max-width: 100%;width:auto;height: auto;} /*------------------------------- # Elements -------------------------------*/ blockquote:before,blockquote:after,q:before,q:after {content: "";} blockquote,q {quotes: "" "";} hr {clear: both; box-sizing: content-box; background-color: #CBD5DE; color: #3E3026; border: 0; height: 1px; margin: 30px 0;} ul,ol {margin: 0 0 20px 8px; font-size: 100%;} ol{margin-left:8px;} main ul li{margin: 0 0 0.5em 1em; position: relative;} #content ul li::after{background: #9DCC2D;color: #3E3026; content: ""; position: absolute; left: -18px; top: 9px; width: 8px;height: 8px; border-radius: 5px;} #content ul li li::after{background: #A09DB1; color: #3E3026;content: ""; position: absolute; left: -18px; top: 11px; width: 4px;height: 4px;border-radius: 5px;} .inverse-black li::after, .inverse-blue li::after{content:"" !important; color: #3E3026; background: #FFF !important;} ul > li{list-style: none;} li > ul, li > ol {margin-top: 5px; margin-bottom: 0;margin-left: 8px;} ol > li{list-style: decimal; margin: 0 0 0.5em 1em;} ol > li::after{content:none !important;} dt {font-weight: 700;} dd {margin: 0 0 1em;} /*------------------------------- # Links -------------------------------*/ a, a:visited {color:#3E3026;background-color: transparent;padding: 0;} a:hover, a:focus, a:active {color:#17820B;background-color: transparent;} a:hover, a:active {outline: 0;} @media print,screen and (min-width:769px) { a:hover img { opacity: 0.8;} } /*------------------------------- # Layout -------------------------------*/ .inner{max-width: 1170px;margin-left: auto; margin-right: auto; width: 90%;} #content{display: block;margin: 0px auto; max-width: 1170px; width: 90%;} .home #content{margin-bottom: 0; max-width: none; width: 100%;} #primary{ margin-bottom: 40px;} /* flexbox */ .oneCol #main {width: 100%;} .row{ width: 100%; display: flex; position: relative; box-sizing: border-box;flex-wrap: wrap;} #main .row{margin-bottom: 30px;} .jcSB{ -webkit-justify-content: space-between; justify-content: space-between; } .jcC{ -webkit-justify-content: center; justify-content: center; } @media print,screen and (max-width:768px) { #main{width:100%; margin-bottom: 40px;} } .col4, .col3{width: 48.29059829059829%;margin-right: 2.5641025641%;}/*565px*/ .col2{width: 100%; margin-right: 0;} .twoCol .col4, .twoCol .col3{width: 48.29059829%;margin-right: 2.631578947%;} .col4:nth-child(2n), .col3:nth-child(2n), .col2:nth-child(2n){margin-right:0;} section{ width: 90%; margin-left: auto !important; margin-right: auto !important;} .home section{width: 100%;} @media print,screen and (min-width:481px) { .oneCol #content > .row {flex-direction: column;} section{width: 100%;} /* end min-width:481px */ } .twoCol #sidebar{ width: 100%; margin-left: auto; margin-right: auto;} @media print,screen and (min-width:769px) { .home #main {width: 100%;} .oneCol #main {margin-bottom: 50px;} .home .oneCol #main {margin-bottom: 0px;} /*サイドメニューあり*/ .twoCol #main {width: 74.36%; margin: 0 auto 50px 0;} /*870*/ .twoCol #sidebar { width: 22.2225%; margin: 0 0 50px auto;} /*260*/ .twoCol #main img {height: auto;} .col4,.col4:nth-child(2n),.col-md-3,.col-md-3:nth-child(2n) { width: 23.076923076%;margin-right: 2.564102564%;}/*270px*/ .col3,.col3:nth-child(2n),.col-md-4,.col-md-4:nth-child(2n) { width: 30.769230769%;margin-right: 3.846153846%;}/*360px*/ .col2,.col-md-6{ width: 47.863247863%;margin-right: 4.273504273%;}/*560px*/ .twoCol .col4,.twoCol .col-md-3{ width: 22.413793103%;margin-right: 3.448275862%;}/*195px*/ .twoCol .col3,.twoCol .col-md-4{ width: 31.034482758%;margin-right: 3.448275862%;}/*270px*/ .twoCol .col2,.twoCol .col-md-6{ width: 48.275862068%;margin-right: 3.448275862%;}/*420px*/ .col4:nth-child(4n),.col-md-3:nth-child(4n), .col3:nth-child(3n),.col-md-4:nth-child(3n), .col2:nth-child(2n),.col-md-6:nth-child(2n){margin-right: 0%;} #primary img {max-width: 830px;height: auto;} /* end min-width:769px */ } @media print,screen and (min-width:1220px) { #siteBranding, #content, #content > *, .inner{ width: 100%;} /* end min-width: 1220px */ } /*Modules---------------*/ .clear { clear: both;} .hide { display: none;} .br { display: block;} .pcbr{display: inline-block;} .spbr{display:block;} .sp_del{display:none !important;} @media print,screen and (min-width:769px) { .pcbr{display:block;} .spbr{display: inline-block;} .br { display: inline-block;} .pc_del{display:none !important;} .sp_del{display:block !important;} /* end min-width:769px */ } .txtRight {text-align: right;} .txtLeft {text-align:left;} .txtCenter {text-align:center;} .ls-2{letter-spacing: -2px;} .mt00 { margin-top: 0 !important;} .mt10 { margin-top: 10px !important;} .mt20 { margin-top: 20px !important;} .mt30 { margin-top: 30px !important;} .mt40 { margin-top: 40px !important;} .mb00 { margin-bottom: 0 !important;} .mb10 { margin-bottom: 10px !important;} .mb20 { margin-bottom: 20px !important;} .mb30 { margin-bottom: 30px !important;} .mb40 { margin-bottom: 40px !important;} .pt30 {padding-top: 30px !important;} .pb30 {padding-bottom: 30px !important;} /*最終更新日を非表示*/ .alert-day { margin-top: 20px; text-align: right; line-height: 1.5; } /*------------------------------- # Header -------------------------------*/ #siteHeader { margin: 0 auto; max-width: 1366px; width: 98%;} .home #pageHeader{display: none;} /* Title */ #siteTitle{padding: 0; width: 146px; margin: 10px 0 0 10px;} #siteTitle a{display: block;} #siteTitle img{width: auto; height: 45px;} #siteTitle.inverse-blue img, #siteTitle.inverse-black img{background-color: #FFF !important; color: #3E3026;} @media print,screen and (min-width:769px) { #siteHeader { display: flex; margin: 0 auto; position: relative;} #siteTitle{position: absolute; width: 222px; height: 60px; top: 20px; left: 10px; margin:0; z-index: 99999;} #siteTitle a{display: block;} #siteTitle img{height: 69px;} #siteTitle.inverse-blue::after, #siteTitle.inverse-black::after{content:"" !important;} } /* = Primary Menu ----------------------------------*/ @media print,screen and (max-width:768px) { #headParts{order: 2; margin-bottom: 50px} #mainNav{order: 1;} } /* 開閉 */ #btnNav,#btnNav span { display: inline-block; transition: all .4s; box-sizing: border-box;} #btnNav { position: absolute; top:6px; right:10px; margin:0; width: 50px; height: 50px; border: none; z-index: 100; background: none;} #btnNav span { position: absolute; left: 8px; width: 34px; height: 5px; background-color: #9DCC2D; border-radius: 2px; color:#3E3026;} .inverse-black #btnNav span, .inverse-blue #btnNav span{background: #FFF !important; color:#3E3026;} #btnNav span:nth-of-type(1) {top:7px;} #btnNav span:nth-of-type(2) {top:18px;} #btnNav span:nth-of-type(3) {top:29px;} #btnNav #btTxt{ position: absolute; top:38px; right:0; width: 50px; color: #17820B; font-weight: 700; font-size:75%; background: none !important; white-space: nowrap; text-align: left;} #btnNav:hover {cursor:pointer;} #btnNav.active span:nth-of-type(1) { -webkit-transform: translateY(11px) rotate(-45deg); transform: translateY(11px) rotate(-45deg);} #btnNav.active span:nth-of-type(2) { opacity: 0; } #btnNav.active span:nth-of-type(3) { -webkit-transform: translateY(-11px) rotate(45deg); transform: translateY(-11px) rotate(45deg);} /*menu*/ #navContainer { background-color:#9DCC2D;color:#3E3026; display:none; padding:0 0 80px; margin:0 auto; position:fixed; top: 60px; right:0px; clear:both; width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 99998;} #navContainer.active{display: flex; flex-direction: column;} #mainNav { z-index:9999; width:94%; margin: 40px auto 0;color:#3E3026; background-color: #9DCC2D;} #mainNav ul {margin-left: 0;} #mainNav .inner{width:100%;} #mainNav .btD, #mainNav .gsub{ display: none;} #mainNav a {background: #FFF;border-radius: 5px; border: 1px solid #FFF; color:#3E3026; display: block; text-decoration: none;} #mainNav a:hover{color:#3E3026;background-color: #FFFAD6; border: 1px solid #17820B;} .fixed { position: fixed; z-index: 9999; top: 0px; left: 0; width: 100%;} @media print,screen and (max-width:768px) { #mainNav ul .catTit{ font-weight: 700; text-align: center; margin: 0 auto 10px; width: 86%;} #mainNav ul .catTit a{padding: 10px; border: 1px solid #17820B;} } @media print,screen and (min-width:769px) { .dropM{display: none;} #btnNav{display: none;} #navContainer{top: auto; display:block !important; padding: 0; position: static; background: transparent; color: #3E3026; overflow-y:inherit;} .fixed { position: fixed !important; z-index: 9999; top: 0px; left: 0; width: 100%;} /* # Navigation*/ #mainNav { top: auto; position: inherit; max-width: 1170px; background-color: #F5F5F5;color:#3E3026; border-radius: 10px; box-shadow:3px 3px 3px rgba(0,0,0,.2); margin: 20px auto 0; } #mainNav ul { margin: 0; display: flex;} #mainNav ul > li { font-size: 112.5%;font-weight: 700; width: 16.6%; text-align: center; cursor: pointer;} /*親要素*/ #mainNav ul .btD{ background: #F5F5F5; color: #3E3026; display: block; padding:24px 10px; line-height: 1.2; position: relative;width: 100%; border: none; cursor: pointer;font-weight: 700;font-size: 100%; border-radius: 10px;} #mainNav ul .btD::before, #mainNav ul .btD::after{ content: ""; position: absolute; margin: auto;} #mainNav ul .btD::before{color: #3E3026; background-color: #CCC; top:0; bottom:0; right: 0; width: 1px; height: 20px;} #mainNav ul li:last-child .btD::before{content:none;} #mainNav ul .btD::after{ background-color: #FFF;color:#3E3026; width: 85%; height: 3px; left: 0; right:0; bottom: 5px; border-radius: 2px;} #mainNav ul .btD:focus::after, #mainNav ul .btD:hover::after{color:#3E3026; background-color: #9DCC2D;} /*子要素*/ #mainNav ul .catTit{font-size: 150%; max-width: 1180px; margin-left: auto; margin-right: auto;} #mainNav ul .catTit a{padding: 10px;} #mainNav ul li .dropM a{ display: block;} #mainNav li .dropM { max-width: 1170px; width: 100%; height: 100%; position: absolute; z-index: 100; top: 190px; left: 0; right: 0; margin: auto; } #mainNav .navarea { background:#9DCC2D; color: #3E3026; border-radius: 10px; padding: 30px 30px 20px ;} #mainNav .gsub { display: flex; max-width: 1180px; width: 100%; margin: 0 auto; flex-wrap: wrap;} #mainNav .gsub li { line-height: 1.3; width: 18.6%; margin-bottom: 15px; margin-left: 1.709401709%; } #mainNav .gsub li:first-child, #mainNav .gsub li:nth-child(5n+1) { margin-left: 0;} #mainNav .gsub a { zoom : 1; padding: 16px 8px; position: relative; border: 1px solid #FFF;} #mainNav .gsub a:hover{border: 1px solid #17820B;} .fixed { position: relative !important;} /* end min-width:769px */ } @media print,screen and (min-width:1171px) { #mainNav ul > li{font-size: 100%;} } /* Header Parts ----------------------------------*/ #tools{font-size: 81.25%; width: 100%; margin-top: 20px;} #toolsTop{display: flex; justify-content: space-around; width: 90%; margin: 0 auto 10px;} /* 文字サイズ・背景色 */ #tools dl,#tools dt ,#tools dd, .searchBox{ white-space: nowrap; display: flex; justify-content: center; align-items: center; gap: 3px; margin: 0;} #tools dl{margin: 0;} #tools dt{margin-right: 5px;} .accessible-button { cursor: pointer; background-color: #FFF; border-radius: 5px; color: #3E3026; padding: 7px; border: #CBD2D9 solid 1px;} .accessible-button:hover { color: #3E3026; background:#FFF091;} .accessible-button:focus {border: 1px solid #FFF091; color: #3E3026; background:#FFF091;} #inverse-btn { background-color: #FFF; color: #3E3026; border-radius: 5px; } #inverse-btn-blue { background-color: #036D9C; color: #FFF;border: #036D9C solid 1px; } #inverse-btn-black { background-color: #3E3026; color: #FFF;border: #3E3026 solid 1px; } #inverse #inverse-btn:focus, #inverse #inverse-blue:focus{border: 1px solid #3E3026;} #inverse #inverse-btn-black:focus{border: 1px solid #FFF;} /* 伝えるウェブ */ #btYomiage .tsutaeru-speech .tsutaeru-button:hover, #toolsBtm button:hover, #toolsBtm a:hover, #btYomiage .tsutaeru-speech .tsutaeru-button:hover, #toolsBtm button:hover, #toolsBtm a:hover{ background: #FFF091; color: #3E3026;} #btYomiage .tsutaeru-speech, #btYomiage .tsutaeru-speech-buttons{ padding: 0; font-size: 100%;} #btYomiage .tsutaeru-speech .tsutaeru-button, #btKana button, #btJp button, #btLanguages a{background: #FFF; color:#3E3026; border: 1px solid #17820B; border-radius: 5px; cursor: pointer; font-weight: 700; padding: 5px 10px; text-decoration: none;font-family:"lowline-only", "BIZ UDGothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;} #btYomiage .tsutaeru-speech .tsutaeru-button-speech-start{ padding: 5px 30px; border-radius: 5px 0 0 5px; } #btYomiage .tsutaeru-speech .tsutaeru-button-speech-config{ background: #FFF091; border-radius:0 5px 5px 0; color: #3E3026; border-left: none;} #btKana .btBk, #btJp .btBk{display: none;} #btLanguages{line-height: 1;} @media print,screen and (min-width:769px) { #toolsTop{width: 100%; margin: 0 0 10px; justify-content: flex-end;} #headParts{display: flex; justify-content: flex-end; align-items: center; margin-left: 240px;} #tools dl{margin: 0 0 0 20px;} #toolsBtm{display: flex; justify-content: flex-end; width: 100%;} #toolsBtm ul{white-space: nowrap; display: flex; justify-content: center; align-items: center; gap: 3px; margin: 0;} .accessible-button, #tools button, #tools a { font-size: 112.5%;} } @media print,screen and (min-width:1281px) { .accessible-button, #tools button, #tools a { font-size: 100%;} } @media print,screen and (max-width:768px) { #tools{display: flex; flex-direction: column; width: 100%;} #toolsTop{order:2; margin-bottom: 20px;} #toolsBtm{order:1; width: 80%; margin: 0 auto;} #toolsBtm ul{margin-left: 0;} #toolsBtm li{margin-bottom: 8px;} #toolsBtm button{width: 100%; display: block; padding: 8px;} #toolsBtm a{display: block; text-align: center;padding: 5px} #toolsBtm .tsutaeru-speech-buttons{display: flex;} #toolsBtm .tsutaeru-button.tsutaeru-button-speech-start{width: 60%; padding: 8px !important;} #toolsBtm .tsutaeru-button.tsutaeru-button-speech-config{width: 40%; padding: 8px !important;} } /* Googleカスタム検索 */ .searchBox{flex-wrap: wrap;} .searchBox > div, .searchBox .gsc-control{width: 100% !important;} .accordion .searchBox{ width:80%; margin: 0 auto; position: relative;} .searchBox .tblScroll{margin-bottom: 0;} .searchBox,.gsc-input-box, .gsc-search-button-v2{height: 40px !important;} .acdCheck{opacity: 0; position: absolute;} table.gsc-search-box { margin-bottom: 0 !important;} table.gsc-search-box td a::before{content:none;} table.gsc-search-box td.gsc-clear-button{display: none !important;} .searchBox table{ width: 100% !important; margin-bottom: 0; border:none !important;} .searchBox table td { padding: 0 !important; border:none !important; margin: 0 !important;} .gsc-search-box{color:#3E3026; background-color: #FFF; border:1px solid #17820B !important; border-radius: 4px !important;} .gsc-input-box { border: none !important; padding-top: 0 !important;} form.gsc-search-box { margin-bottom: 0 !important; padding-right: 1px !important;} input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button-v2{ -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; -ms-border-radius: 4px !important; border-radius: 4px !important;} input.gsc-input{padding: 8px !important;} .gsc-control-cse { padding: 0 !important;} .searchBox table td.gsc-search-button { width: 40px !important; margin-left: 0 !important; border-left:1px solid #17820B !important; } button.gsc-search-button-v2, .gsc-search-button{background-color: #FFF091 !important; color: #3E3026; border: none !important; border-radius:0 5px 5px 0 !important;width: 100% !important;} .gsc-search-button-v2 { width: 20px !important; padding: 6px !important; cursor: pointer; margin: 0 !important; border:1px solid #FFF !important;} .gsc-search-button-v2 svg {fill: #17820B !important; width: 20px !important; height: 20px !important} #___gcse_0 td.gsib_a { padding:3px 0 0 6px !important;} .gsc-control-cse { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo !important; border: none !important; background: transparent !important; color:#3E3026;} td.gsc-search-button { margin-left: 0 !important;} .cse .gsc-control-cse, .gsc-control-cse {color:#3E3026; background-color: transparent !important; border: none !important;} .gsst_a .gscb_a{color: #3E3026 !important;} @media print,screen and (min-width:769px) { .accordion .searchBox{ width:100%; margin: 0 auto; display: inline-block;} /*アコーディオン動作*/ #headParts .accordion{padding: 0; margin: 0 0 0 20px; background:#FFF; color: #3E3026;} .acdLabel{ background: #FFF091; border-radius: 10px; color: #105F08; cursor :pointer; display: block; font-weight: bold; height: 60px; padding: 35px 0 5px; font-size: 75%; text-align: center; width: 60px; margin: 10px 10px 0 auto;position: relative;} .acdCheck:focus + .acdLabel{border: 2px solid #105F08; background: #FFEA65; color:#3E3026;} /*虫眼鏡アイコン*/ .icoGlass{ width: 30px; height: 30px; color: #105F08; background:#FFF091; text-indent: 9999px; overflow: hidden; } .icoGlass::before { position: absolute; top: 8px; left: 15px; width: 20px; height: 20px; box-sizing: border-box; border: 3px solid #105F08/*#17820B*/; border-radius:20px; content: "";} .icoGlass::after { position: absolute; top: 22px; left: 34px; transform: rotate(-45deg); width: 3px; height: 14px; box-sizing: border-box; border-radius: 2px; background-color:#105F08; color: #FFF; content: "";} .inverse-black .icoGlass::before, .inverse-blue .icoGlass::before{border: 3px solid #FFF; content:"" !important;} .inverse-black .icoGlass::after, .inverse-blue .icoGlass::after{background-color:#FFF; color:#3E3026; content:"" !important;} .inverse-blue .gsc-control-wrapper-cse, .inverse-black .gsc-control-wrapper-cse{border-color: #FFF;} /*開閉パネル*/ .acdContent{background: #FFF091; color: #3E3026; display: none; height: 0; overflow: hidden; padding: 0 15px; position: absolute; right: 10px; border-radius: 10px; width: 0; z-index: 9998; box-shadow: 3px 3px 3px rgba(0,0,0,.3);} .acdCheck:checked + .acdLabel + .acdContent{display: block; height: auto; padding: 20px 20px 0 20px; width: 400px;border:1px solid #CBD2D9;} } @media print,screen and (max-width:768px) { .acdLabel{display: none;} } .acdLabel.inverse-black, .acdLabel.inverse-blue{border: 2px solid #FFF;} .acdCheck:checked + .acdLabel + .acdContent.inverse-black, .acdCheck:checked + .acdLabel + .acdContent.inverse-blue{padding: 20px;} /* = トピックパス ----------------------------------*/ #topicpath {font-size:81.25%; padding:5px 0 ; position: relative;} .home #topicpath{display: none;} #topicpath a{ color: #3E3026; background: #FFF; text-decoration: none;} #topicpath.inverse-blue, #topicpath.inverse-black {border-bottom:1px solid #FFF;} @media print,screen and (min-width:769px) { #topicpath { padding: 12px 0;} } /* = ページタイトル ----------------------------------*/ #pageHeader{background: #FFFAD6; color: #3E3026; margin-bottom: 50px;} #pageHeader h1.inner{max-width: 1170px; width: 94%; margin: 0 auto; } #pageHeader h1{padding: 15px 0; font-size: 137.5% /*22px*/ } @media print,screen and (min-width:769px) { #pageHeader{ margin-bottom: 80px;} #pageHeader h1 {padding: 60px 0; font-size: 187.5%/*30px*/; text-align: center; } } @media print,screen and (min-width:1210px) { #pageHeader{width: 100%; } } /*------------------------------- # Sidebar -------------------------------*/ #sidebar nav { margin: 0 0 20px;} #sideBox{ border-top: none;} #sideBox > * {width: 100% ; margin: 20px auto;} #sidebar h2 { background: #D7F0FB; color: #3E3026; text-align: center; font-size: 110%; margin: 0 0 10px 0; padding:30px 0; position: relative;} #sidebar h2 a{ background: #D7F0FB; color: #3E3026; padding:10px; position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center;} #sidebar h2 a:hover{background: #036D9C; color: #FFF;} #sidebar h3 { font-size: 105%; margin-top: 10px; margin-bottom:15px; padding: 10px 0 10px 0;} #sidebar h4 { font-size: 100%; margin-top: 10px; margin-bottom:10px; padding: 0 0 0 10px;} #sidebar ul { margin: 0 auto; font-size: 100%;} #sidebar ul li { position: relative; list-style: none; margin:0; line-height: 1.5;} #sidebar ul li::after{content: none;} #sidebar ul li a { display: block; padding: 8px 0 8px 24px; margin-bottom: 0; position: relative; } #sidebar ul li a::before {content: "";position: absolute;top: 16px;left: 5px;margin: auto;width: 8px;height: 8px;border-top: 2px solid #17820B;border-right: 2px solid #17820B; -webkit-transform: rotate(45deg);transform: rotate(45deg);} #sidebar ul li a:hover::before {border-top: 2px solid #34AC91;border-right: 2px solid #34AC91;} #sidebar ul li ul { width: 100%; margin:0 0 10px 15px !important;} #sidebar ul li li{border-bottom: none;} #sidebar ul li li::after{left: 0;} #sidebar ul li li a { padding: 0 0 0 20px;} #sidebar ul li li a::before{content:none;} #sidebar hr{ margin:0;} /*------------------------------- # Footer -------------------------------*/ /* PageTop */ .pagetop,.pagetop a{height: 50px; width: 50px;} .pagetop { font-size:68.75%; position: fixed; bottom: 20px; right: 10px; z-index: 9998;} .pagetop a { background-color:#105F08; color: #FFF; display: block; text-decoration: none; position: relative; border-radius: 35px; padding: 20px 2px 10px; line-height: 1.1; text-align: center;} .pagetop span{display: block;} .pagetop a::before{ content: ""; position: absolute; top: 10px; right: 0; left: 0; margin: auto; width: 12px; height: 12px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; -webkit-transform: rotate(315deg); transform: rotate(315deg); } .pagetop a.inverse-blue, .pagetop a.inverse-black{border: 2px solid #FFF !important;} .pagetop a.inverse-blue::after, .pagetop a.inverse-black::after{border-color: #FFF !important;} @media print,screen and (min-width:481px) { .pagetop,.pagetop a{height: 70px; width: 70px;} .pagetop { bottom: 40px; right: 10px; font-size: 81.25%;} .pagetop a { padding: 28px 2px 10px; } .pagetop a::before{top:15px;} /* end min-width: 481px */ } /* Footer */ #siteFooter { background: url("../images/bg_footer_b.png") no-repeat -70px 160px #E8F7D2; background-size: 300px 200px; color: #3E3026; clear: both; font-size: 87.5%; position: relative; padding: 30px 0 10px;overflow: hidden; text-align: center;} #siteFooter.inverse-blue, #siteFooter.inverse-black{ background-image: none;} #siteFooter::after{content: ""; position: absolute; background: url("../images/bg_footer_a.png") no-repeat 0 bottom; background-size: contain; height: 220px; width: 270px; right: -100px; bottom: -70px;} #siteFooter.inverse-blue, #siteFooter.inverse-black {border-top:1px solid #FFF;} #footerInner{ width:94%; margin-left:auto; margin-right: auto; position: relative; z-index: 1;} #footerInner > * {z-index:1;} #fLogo a{color: #3E3026;background: #E8F7D2;} #fLogo img{width:140px; height: auto; } #fLogo.inverse-blue img, #fLogo.inverse-black img{background-color: #FFF !important; color: #3E3026;} #fNavBox ul{ display: flex; font-size: 100%; flex-wrap: wrap; justify-content:center; gap:2%; margin-left: 0;} #fNavBox ul a{white-space: nowrap; position: relative; padding-left: 20px; background: #E8F7D2; color:#3E3026;} #fNavBox ul a::before{content: ""; position: absolute; top: 2px; left: 0; width: 10px; height: 10px; border-top: 2px solid #17820B; border-right: 2px solid #17820B; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .footerNav { margin-bottom: 30px;} #addBox{font-size: 87.5%;} /* Copylight */ #copy { display: flex; justify-content: center; margin-top: 30px; position: relative; z-index: 1;} #copy p {font-size: 75%;margin: 0 auto 0; font-family: "Verdana", "Droid Sans", 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;} @media print,screen and (min-width:769px) { #siteFooter{font-size: 100%; background-position: -80px 100px; background-size:contain;} #siteFooter::after{ height: 437px; width: 494px; right: -120px; bottom: -160px;} #fLogo img{width:187px; height: auto; } #copy { margin-top: 50px;} /* end min-width: 769px */ } /* 印刷用CSS -------------------------------*/ @media print { #page{ overflow-y: visible; overflow-x: visible;} #tools{flex-wrap: nowrap !important; margin-top: 10px !important;} .pagetop { position: relative;width: 100%;} .pagetop a{ position: absolute;top:80px; right: 10px;} /* end @media print */} /*-- Privacy Poricy -------------------------------*/ .cc-link{color:#105F08 !important;} .cc-link:hover, .cc-link:active{color:#FFF !important; background: #105F08 !important;} .cc-btn.cc-dismiss{color:#105F08 !important; border: 2px solid #105F08 !important;} .cc-window { border: 1px solid #17820B; opacity: 1; transition: opacity 1s ease;}.cc-window.cc-invisible { opacity: 0}.cc-animate.cc-revoke { transition: transform 1s ease;}.cc-animate.cc-revoke.cc-top { transform: translateY(-2em);}.cc-animate.cc-revoke.cc-bottom { transform: translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom, .cc-animate.cc-revoke.cc-active.cc-top, .cc-revoke:hover { transform: translateY(0)}.cc-grower { max-height: 0; overflow: hidden; transition: max-height 1s}.cc-link, .cc-revoke:hover { text-decoration: underline}.cc-revoke, .cc-window { position: fixed; overflow: hidden; box-sizing: border-box; font-size: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; z-index: 9999}.cc-window.cc-static { position: static}.cc-window.cc-floating { padding: 3em 2em; max-width: 24em; -ms-flex-direction: column; flex-direction: column}.cc-window.cc-banner { padding: 2em 1.8em; width: 100%; -ms-flex-direction: row; flex-direction: row}.cc-revoke { padding: .5em}.cc-header { font-size: 81.25%; font-weight: 700}.cc-btn, .cc-close, .cc-link, .cc-revoke { cursor: pointer}.cc-link { opacity: .8; display: inline-block; padding: .5em .8em}.cc-link:hover { opacity: 1}.cc-link:active, .cc-link:visited { color: initial;color:#FFF; background: #17820B;}.cc-btn { display: block; padding: .6em 1em; font-size: 93.75%; font-weight: 700; border-width: 2px; border-style: solid; text-align: center; white-space: nowrap}.cc-highlight .cc-btn:first-child { background-color: transparent; border-color: transparent; color: #3E3026;}.cc-highlight .cc-btn:first-child:focus, .cc-highlight .cc-btn:first-child:hover { background-color: transparent; color: #3E3026; text-decoration: underline}.cc-close { display: block; position: absolute; top: .5em; right: .5em; font-size: 100%; opacity: .9; line-height: .75}.cc-close:focus, .cc-close:hover { opacity: 1}.cc-revoke.cc-top { top: 0; left: 3em; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em}.cc-revoke.cc-bottom { bottom: 0; left: 3em; border-top-left-radius: .5em; border-top-right-radius: .5em}.cc-revoke.cc-left { left: 3em; right: unset}.cc-revoke.cc-right { right: 3em; left: unset}.cc-top { top: 1em}.cc-left { left: 1em}.cc-right { right: 1em}.cc-bottom { bottom: 1em}.cc-floating > .cc-link { margin-bottom: 1em}.cc-floating .cc-message { display: block; margin-bottom: 1em;}.cc-window.cc-floating .cc-compliance { -ms-flex: 1 0 auto; flex: 1 0 auto}.cc-window.cc-banner { -ms-flex-align: center; align-items: center}.cc-banner.cc-top { left: 0; right: 0; top: 0}.cc-banner.cc-bottom { left: 0; right: 0; bottom: 0}.cc-banner .cc-message { display: block; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 100%; margin-right: 1em}.cc-compliance { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: justify; align-content: space-between}.cc-floating .cc-compliance > .cc-btn { -ms-flex: 1; flex: 1}.cc-btn + .cc-btn { margin-left: .5em} @media print { .cc-revoke, .cc-window { display: none }}@media screen and (max-width:900px) { .cc-btn { white-space: normal }}@media screen and (max-width:414px) and (orientation:portrait), screen and (max-width:736px) and (orientation:landscape) { .cc-window.cc-top { top: 0 } .cc-window.cc-bottom { bottom: 0 } .cc-window.cc-banner, .cc-window.cc-floating, .cc-window.cc-left, .cc-window.cc-right { left: 0; right: 0 } .cc-window.cc-banner { -ms-flex-direction: column; flex-direction: column } .cc-window.cc-banner .cc-compliance { -ms-flex: 1 1 auto; flex: 1 1 auto } .cc-window.cc-floating { max-width: none } .cc-window .cc-message { margin-bottom: 1em } .cc-window.cc-banner { -ms-flex-align: unset; align-items: unset } .cc-window.cc-banner .cc-message { margin-right: 0 }}.cc-floating.cc-theme-classic { padding: 1.2em; border-radius: 5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance { text-align: center; display: inline; -ms-flex: none; flex: none}.cc-theme-classic .cc-btn { border-radius: 5px}.cc-theme-classic .cc-btn:last-child { min-width: 140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn { display: inline-block}.cc-theme-edgeless.cc-window { padding: 0}.cc-floating.cc-theme-edgeless .cc-message { margin: 2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn { margin: 0; padding: .8em 1.8em; height: 100%}.cc-banner.cc-theme-edgeless .cc-message { margin-left: 1em}.cc-floating.cc-theme-edgeless .cc-btn + .cc-btn { margin-left: 0}