@charset "utf-8"; :root { --lh-background-color:#f5f7df; --lh-l-color:#336aff; --lh-h-color:#0ba582; --lh-main-color:#d0cba8; --lh-library-color:#ffad2b; --lh-public-color:#ea5ba8; --lh-goods-color:#0096f4; --lh-ict-color:#f4663a; --lh-mitisio-color:#ae8eff; --lh-volunteer-color:#32ac24; --lh-linear-gradient:linear-gradient(to right,#336aff,#0ba582); --lh-linear-gradient-alpha:linear-gradient(to right,rgba(51,106,255,0.9),rgba(11,165,130,0.9)); } * { margin:0; padding:0; text-align:left; text-decoration:none; list-style:none; font-size:1rem; font-weight:normal; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",sans-serif; } a { display:inline-block; width:100%; } strong { font-weight:bold; } .skip_item { position:absolute; display:block; padding:0.2rem 0.5rem; width:15rem; color:#000; background:#fff; border:1px solid #000; z-index:9999; overflow:hidden; pointer-events:none; opacity:0; } .skip_item:focus { opacity:1; } .google_map { display:inline; margin-left:1rem; padding:0.2rem 1.5rem 0.2rem 2.5rem; border-radius:0.5rem; color:#fff; background:#000; background-image:url(/joubun/img/google-map-white.png); background-size:0.8rem 1rem; background-position:1rem 0.45rem; background-repeat:no-repeat; } .internal_links { display:inline; padding-right:2rem; text-decoration:underline; color:#000; background-image:url(/joubun/img/internal-links.png); background-size:1.4rem 1.4rem; background-position:right 0 top 0; background-repeat:no-repeat; } .external_links { display:inline; padding-right:1.25rem; text-decoration:underline; color:#000; background-image:url(/joubun/img/external-links.png); background-size:1.0rem 1.0rem; background-position:right 0 top 0.1rem; background-repeat:no-repeat; } .burasage { padding-left:1rem; text-indent:-1rem; } /*-----* safari hack begin *--------------------------------------------------*/ ::-webkit-full-page-media, _:future, :root .internal_links { padding-right:1.5rem; background-size:1.0rem 1.0rem; } @media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .internal_links { padding-right:1.5rem; background-size:1.0rem 1.0rem; } } /*-----* safari hack end *--------------------------------------------------*/ header { display:grid; grid-template-areas:"item1 item2 item3 item4 item5"; grid-template-columns:1fr 40rem 24rem 11rem 1fr; grid-template-rows:5rem; padding:1rem 0; background:var(--lh-background-color); border-bottom:5px solid; border-image:var(--lh-linear-gradient) 1; } header > h1 { grid-area:item2; margin:auto 0; padding-left:5rem; font-size:1.2rem; font-weight:bold; background-image:url(/joubun/img/logo.png); background-size:contain; background-repeat:no-repeat; } header > nav[aria-labelledby="about_us_navigation" ] { grid-area:item3; margin:auto 0; } header > nav[aria-labelledby="about_us_navigation" ] > menu { display:flex; } header > nav[aria-labelledby="about_us_navigation" ] > menu > li > a { font-weight:bold; color:#555; } header > nav[aria-labelledby="about_us_navigation" ] > menu > li:nth-of-type(1) > a { padding-right: 1rem; width:calc(100% - 1rem); } header > nav[aria-labelledby="about_us_navigation" ] > menu > li:nth-of-type(2) > a { padding :0 1rem; width:calc(100% - 2rem); background-image:url(/joubun/img/icon-pipe-gray.png),url(/joubun/img/icon-pipe-gray.png); background-position:left,right; background-size:1px 1rem; background-repeat:no-repeat; } header > nav[aria-labelledby="about_us_navigation" ] > menu > li:nth-of-type(3) > a { padding-left : 1rem; } header > nav[aria-labelledby="department_navigation"] { grid-area:item4; position:relative; } header > nav[aria-labelledby="department_navigation"] > #department_navigation_disconnect { right:0; } header > nav[aria-labelledby="department_navigation"] > #department_menu_button { position:absolute; right:0px; width:5rem; height:5rem; line-height:7.5rem; font-size:0.8rem; font-weight:bold; text-align:center; color:#fff; background:var(--lh-l-color); background-image:url(/joubun/img/department-menu-open.png); background-size:2rem 2rem; background-position:1.5rem 0.75rem; background-repeat:no-repeat; border-radius:0.5rem; z-index:2; } header > nav[aria-labelledby="department_navigation"] > #department_menu { position:fixed; left:0px; top:0px; width:100vw; height:100vh; background:rgba(0,0,0,0.8); display:none; z-index:1; } header > nav[aria-labelledby="department_navigation"] > #department_menu.open { display:grid; grid-template-areas:"item1 item2"; grid-template-columns:1fr 70%; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu { grid-area:item2; padding:6rem 1rem 1rem 8rem; background:var(--lh-l-color); overflow:auto; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li { line-height:3.5rem; padding-left:2rem; width:27rem; border-bottom:2px solid rgba(255, 255, 255, 0.5); background-image:url(/joubun/img/department-menu-down.png); background-size:1rem 0.57rem; background-position:right 1rem top 1.5rem; background-repeat:no-repeat; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(1) { background-image:url(/joubun/img/department-menu-icon.png); background-size:1.2rem 1.2rem; background-position:left 0 top 1rem; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(8) { background-image:none; display:none; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(9) { background-image:none; display:none; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(10) { background-image:none; display:none; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li > a { font-weight:bold; color:#fff; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li > menu { padding-left:1rem; display:none; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li.open { background-image:url(/joubun/img/department-menu-up.png); } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li.open > menu { display:block; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li.open > menu > li { line-height:3rem; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li.open > menu > li > a { color:#fff; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:last-child { padding-left:0; width:29rem; border-bottom:none; background-image:none; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu #department_menu_sns { margin-top:2rem; padding:0.5rem 1.5rem; background:#fff; border-radius:0.5rem; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu #department_menu_sns menu { display:flex; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu #department_menu_sns a { text-align:center; line-height:2rem; color:#000; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu #department_menu_sns img { width:3rem; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu #department_menu_close a { text-align:right; color:#fff; } #wrapper { display:grid; grid-template-areas:"item01 item02 item03" "item04 item05 item06"; grid-template-columns:1fr 75rem 1fr; background:var(--lh-background-color); padding-bottom:8rem; } #wrapper.side_menu { display:grid; grid-template-areas:"item01 item02 item02 item03" "item04 item05 item06 item07"; grid-template-columns:1fr 20rem 55rem 1fr; } #wrapper > nav[aria-labelledby ="breadcrumb_navigation"] { grid-area:item02; padding:0.5rem 0 1.5rem 0; } #wrapper > main { grid-area:item05; } #wrapper.side_menu > nav[aria-labelledby ="submenu_navigation"] { grid-area:item05; margin-right:3.25rem; } #wrapper.side_menu > main { grid-area:item06; } #wrapper > nav[aria-labelledby ="breadcrumb_navigation"] > menu > li { display:inline; line-height:3rem; } #wrapper > nav[aria-labelledby ="breadcrumb_navigation"] > menu > li > a { display:inline; padding:0.5rem 1.2rem 0.5rem 0; color:#000; } #wrapper > nav[aria-labelledby ="breadcrumb_navigation"] > menu > li:nth-of-type(n+2) > a { padding-left:calc(1.2rem - 4px); } #wrapper > nav[aria-labelledby ="breadcrumb_navigation"] > menu > li > a:not([aria-current]) { background-image:url(/joubun/img/icon-pipe.png); background-size:1px 1rem; background-position:right; background-repeat:no-repeat; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > div { padding:1.5rem 2rem; background:var(--lh-main-color); border-top-left-radius:1rem; border-top-right-radius:1rem; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > div > h1 { font-size:1.5rem; font-weight:bold; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > div > a { display:none; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu { background:#fff; border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu > li:not(:last-child) { border-bottom:1px solid var(--lh-main-color); } #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu > li:last-child > a { border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; } #wrapper > nav[aria-labelledby^="submenu_navigation"] menu li a { color:#000; } #wrapper > nav[aria-labelledby^="submenu_navigation"] menu li a[aria-current="page"] { background:#f1efe5;} #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu > li > a { padding:1.2rem 1rem 1.2rem 2rem; width:calc(100% - 3rem); } #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu > li > menu > li > a { padding:0.6rem 2rem 0.6rem 3rem; width:calc(100% - 5rem); } #wrapper > main table.common { width:100%; border-spacing:0.2rem; } #wrapper > main table.common tr > * { padding:1.2rem; } #wrapper > main table.common tr > th { background:var(--lh-main-color); white-space:nowrap; } #wrapper > main table.common tr > td { background:#fff; } #wrapper.side_menu > main > h1 { margin:0 -1rem 4.5rem -1rem; padding:1.3rem 2rem; font-size:1.6rem; background:var(--lh-main-color); border-radius:0.5rem; } #wrapper.side_menu > main > h1.department_top { margin-bottom:0; padding:1.2rem 4rem; font-size:2.2rem; border-top-left-radius:2rem; border-top-right-radius:2rem; border-bottom-left-radius:unset; border-bottom-right-radius:unset; } #wrapper.side_menu > main h2 { margin:3.5rem 0 1rem 0; padding-left:0.6rem; font-size:1.6rem; border-left:4px solid var(--lh-main-color); } #wrapper.side_menu > main h3 { margin:2rem 0 1rem 0; font-weight:bold; } #wrapper.side_menu > main p { line-height:1.75rem; } #wrapper.side_menu > main ol { margin:1rem 0 1rem 2rem; } #wrapper.side_menu > main ol > li { line-height:1.75rem; list-style:decimal; } #wrapper.side_menu > main ul { margin:1rem 0 1rem 1.25rem; } #wrapper.side_menu > main ul > li { line-height:1.75rem; } #wrapper.side_menu > main img { width:100%; } #wrapper.side_menu > main .key_visual { margin:0 -1rem 0 -1rem; padding:2.5rem 0.75rem; background:#fff; border:1px solid; border-bottom-left-radius:2rem; border-bottom-right-radius:2rem; } #wrapper.side_menu > main .key_visual > p:nth-of-type(1) { padding:2.5rem 2rem 1rem 2rem; line-height:3.5rem; font-size:2.2rem; } #wrapper.side_menu > main .key_visual > p:nth-of-type(2) { padding:0 2rem; } #wrapper.side_menu > main .catchphrase { margin-bottom:1rem; line-height:3.5rem; font-size:2.35rem; } #wrapper.side_menu > main .expansion { position:relative; } #wrapper.side_menu > main .expansion:before { content:""; position:absolute; left:0; top:0; width:2.25rem; height:2.25rem; background:var(--lh-l-color); background-image:url(/joubun/img/icon-zoom.png); background-size:1rem 1rem; background-position:0.625rem 0.625rem; background-repeat:no-repeat; } #wrapper.side_menu > main > address { margin-top:3rem; padding:2rem 0 1.25rem 3.25rem; font-style:normal; background:#fff; border:1px solid; border-left-width:2rem; border-radius:2rem; } #wrapper.side_menu > main > address > h2 { margin:0; padding:0; font-size:1.6rem; border-left:none; } #wrapper.side_menu > main > address > table { border-spacing:0 0.6rem; } #wrapper.side_menu > main > address > table th { padding-right:2rem; font-weight:bold; } #wrapper.side_menu > main > address > table a { color:#000; } #wrapper.side_menu > main.library > h1 { background:var(--lh-library-color); } #wrapper.side_menu > main.public > h1 { background:var(--lh-public-color); } #wrapper.side_menu > main.goods > h1 { background:var(--lh-goods-color); } #wrapper.side_menu > main.ict > h1 { background:var(--lh-ict-color); } #wrapper.side_menu > main.mitisio > h1 { background:var(--lh-mitisio-color); } #wrapper.side_menu > main.volunteer > h1 { background:var(--lh-volunteer-color); } #wrapper.side_menu > main.library .key_visual { border-color:var(--lh-library-color); } #wrapper.side_menu > main.public .key_visual { border-color:var(--lh-public-color); } #wrapper.side_menu > main.goods .key_visual { border-color:var(--lh-goods-color); } #wrapper.side_menu > main.ict .key_visual { border-color:var(--lh-ict-color); } #wrapper.side_menu > main.mitisio .key_visual { border-color:var(--lh-mitisio-color); } #wrapper.side_menu > main.volunteer .key_visual { border-color:var(--lh-volunteer-color); } #wrapper.side_menu > main.library > address { border-color:var(--lh-library-color); } #wrapper.side_menu > main.public > address { border-color:var(--lh-public-color); } #wrapper.side_menu > main.goods > address { border-color:var(--lh-goods-color); } #wrapper.side_menu > main.ict > address { border-color:var(--lh-ict-color); } #wrapper.side_menu > main.mitisio > address { border-color:var(--lh-mitisio-color); } #wrapper.side_menu > main.volunteer > address { border-color:var(--lh-volunteer-color); } footer { display:grid; grid-template-areas:"item1 item2 item3"; grid-template-columns:1fr 75rem 1fr; border-top:20px solid; border-image:var(--lh-linear-gradient) 1; } footer > div { grid-area:item2; margin-top:2rem; } footer > div > h1 > div { font-size:1.5rem; font-weight:bold; margin:0.5rem 0 2rem 0; } footer > div > h1 > div > span { font-size:1.5rem; font-weight:bold; margin-left:0.5rem; } footer > div > address > table { border-spacing:0 0.5rem; margin:1rem 0 2rem 0; } footer > div > address > table th { padding-right:1rem; font-weight:bold; } footer > div > address > table a { color:#000; } footer > div > menu { display:flex; } footer > div > menu > li > a { color:#000; } footer > div > menu > li:nth-of-type(1) > a { padding-right: 1rem; width:calc(100% - 1rem); } footer > div > menu > li:nth-of-type(2) > a { padding :0 1rem; width:calc(100% - 2rem); background-image:url(/joubun/img/icon-pipe.png),url(/joubun/img/icon-pipe.png); background-position:left,right; background-size:1px 1rem; background-repeat:no-repeat; } footer > div > menu > li:nth-of-type(3) > a { padding-left : 1rem; text-decoration:none; } footer #copyright { margin:2rem 0 1rem 0; } footer #copyright > small { font-size:0.8rem; } footer > #go_to_top { position:fixed; right:0.5rem; bottom:5rem; width:4rem; height:4rem; line-height:6rem; font-size:0.8rem; text-align:center; color:#fff; background:#808080; background-image:url(/joubun/img/go-to-top.png); background-size:1.75rem 1.5rem; background-position:1.1rem 0.75rem; background-repeat:no-repeat; border-radius:0.5rem; animation:scroll-animation linear; animation-timeline:scroll(root); } @keyframes scroll-animation { from { display:none; } to { display:block; } } @media screen and (max-width:9999px) { header { grid-template-columns:1fr 25rem 24rem 11rem 1fr; } #wrapper { grid-template-columns:1fr 60rem 1fr; } #wrapper.side_menu { grid-template-columns:1fr 20rem 40rem 1fr; } footer { grid-template-columns:1fr 60rem 1fr; } } @media screen and (max-width:1024px) { .internal_links { padding-right:1.25rem; background-size:1.0rem 1.0rem; } .external_links { background-position-y:0; } header { display:grid; grid-template-areas:"item1 item2 item3 item4"; grid-template-columns:1rem 1fr 5rem 1rem; } header > h1 { grid-area:item2; } header > nav[aria-labelledby="about_us_navigation" ] { display:none; } header > nav[aria-labelledby="department_navigation"] { grid-area:item3; } header > nav[aria-labelledby="department_navigation"] > #department_menu.open { display:block; overflow:auto; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu { padding:6rem 6rem 1rem 1rem; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li { padding-left:0; width:auto; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(1) { padding-left:2rem; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(8) { display:block; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(9) { display:block; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:nth-of-type(10) { display:block; } header > nav[aria-labelledby="department_navigation"] > #department_menu > menu > li:last-child { width:auto; } #wrapper { grid-template-columns:1rem 1fr 1rem; padding-bottom:2.5rem; } #wrapper > nav[aria-labelledby ="breadcrumb_navigation"] { padding-bottom:0.5rem; } #wrapper.side_menu { grid-template-areas:"item01 item02 item03" "item04 item04 item04" "item05 item06 item07"; grid-template-columns:1rem 1fr 1rem; } #wrapper.side_menu > nav[aria-labelledby ="breadcrumb_navigation"] { grid-area:item02; } #wrapper.side_menu > nav[aria-labelledby ="submenu_navigation"] { grid-area:item04; margin:0 0 1.5rem 0; } #wrapper.side_menu > main { grid-area:item06; } #wrapper > nav[aria-labelledby^="breadcrumb_navigation"] > menu > li { line-height:2rem; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > div { display:grid; grid-template-columns:1fr 8rem; padding:1rem; border-top-left-radius:unset; border-top-right-radius:unset; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > div > a { display:inline-block; line-height:2rem; color:#000; background-image:url(/joubun/img/submenu-down.png); background-size:1rem 0.57rem; background-position:right 0 top 0.75rem; background-repeat:no-repeat; } #wrapper > nav[aria-labelledby^="submenu_navigation"].open > div > a { background-image:url(/joubun/img/submenu-up.png); } #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu { border-bottom-left-radius:unset; border-bottom-right-radius:unset; margin-bottom:2rem; display:none; } #wrapper > nav[aria-labelledby^="submenu_navigation"].open > menu { display:block; } #wrapper > nav[aria-labelledby^="submenu_navigation"] > menu > li:last-child > a { border-bottom-left-radius:unset; border-bottom-right-radius:unset; } #wrapper:after { content:none; } #wrapper.side_menu > main > h1 { margin:0 0 2rem 0; padding:0.75rem 2rem; border-radius:1rem; } #wrapper.side_menu > main > h1.department_top { padding:0.75rem 2rem; border-top-left-radius:1rem; border-top-right-radius:1rem; border-bottom-left-radius:unset; border-bottom-right-radius:unset; } #wrapper.side_menu > main h2 { margin-top:3rem; } #wrapper.side_menu > main .key_visual { margin:0 0 3rem 0; padding:1.5rem; border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; } #wrapper.side_menu > main .key_visual > p:nth-of-type(1) { padding:1.5rem 0; } #wrapper.side_menu > main .key_visual > p:nth-of-type(2) { padding:0; } #wrapper.side_menu > main .catchphrase { margin-bottom:3rem; } #wrapper.side_menu > main > address { margin-top:2rem; padding:1.5rem 0 1.5rem 1.5rem; border-left-width:1.5rem; border-radius:1rem; } #wrapper.side_menu > main > address > table th { padding-right:1rem; } footer { grid-template-columns:1rem 1fr 1rem; } footer > div > h1 > div { font-size:1.25rem; } footer > div > h1 > div > span { font-size:1.25rem; display:block; margin-left:0; } footer > div > address > table th { display:block; } footer > div > address > table td { display:block; } footer > div > address > table td > a.google_map { display:block; width:6rem; margin-left:0; } footer > div > menu > li > a { font-size:0.8rem; } footer > div > menu > li > a.external_links { background-size:0.8rem 0.8rem; } footer > #go_to_top { right:0; } }