@charset "UTF-8";

/* fonts */

@font-face {
    font-family: "edo";
    src: url("fonts/edo.eot?20223624");
    src: url("fonts/edo.eot?20223624#iefix") format("embedded-opentype"),
    url("fonts/edo.woff2?20223624") format("woff2"),
    url("fonts/edo.woff?20223624") format("woff"),
    url("fonts/edo.ttf?20223624") format("truetype"),
    url("fonts/edo.svg?20223624#edo") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "edo";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    /* opacity: .8; */
    font-variant: normal;
    text-transform: none;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-link:before { content: "\e800"; }
.icon-arrow-top:before { content: "\e801"; }
.icon-element:before { content: "\e802"; }
.icon-home:before { content: "\e803"; }
.icon-list:before { content: "\e804"; }
.icon-logo-codh:before { content: "\e805"; }
.icon-logo-facebook:before { content: "\e807"; }
.icon-logo-twitter:before { content: "\e808"; }
.icon-map:before { content: "\e809"; }
.icon-language:before { content: "\e80a"; }
.icon-logo-edo150:before { content: "\e80b"; }

/* Setting */

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, menu, nav, section, summary, time, mark, audio, video, hr {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}
html {
    width: 100%;
    height: 100%;
    font-family: "Noto Serif JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    font-size: 1em;
    line-height: 1;
    color: #222;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
}
body {
    background-color: #fff;
    word-break: break-all;
    position: relative;
}
ul,ol {
    list-style-type: none;
}
img {
    border: none;
}
p {
    line-height: 2.0;
    word-break: normal;	
}
/*
h1, h2 {
	font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho Light", YuMincho, "Yu Mincho", sans-serif;
	word-break: normal;
}
h2 {
	font-weight: normal;	
}
*/
address, th, td, em {
    font-weight: normal;
    font-style: normal;
    word-break: normal;
}

/* Anchor */

a:focus, *:focus {
    outline: none;
}
a {
    color: #444;
    border-bottom: 2px solid #444;
    text-decoration: none;
    transition: all 350ms;
}
a:hover {
    color: #999;
    border-bottom: 2px solid #999;
    transition: all 100ms;
}

/* Header */

header {
    width: 100%;
/*    position: fixed;*/
    top: 0;
    left: 0;
    right: 0;
    z-index: 1009;
}

/* header:after { */
/*     bottom: -10px; */
/*     box-shadow: inset 0 4px 8px -3px rgba(0, 0, 0, .2); */
/*     content: ""; */
/*     height: 10px; */
/*     left: 0px; */
/*     pointer-events: none; */
/*     position: absolute; */
/*     right: 0px; */
/*     width: 100%; */
/*     z-index: 1008; */
/* } */

.header-title, .header-title div {
    width: 100%;
    height: 60px;
    background-color: #fff;
}
.header-nav {
    width: 100%;
    height: 40px;
    background-color: #422886;
}
.header-wrapper-wide {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1520px;
    padding: 0 30px;
    margin: 0 auto;
}
h1 {
    color: #222;
    font-size: 20px;
}
nav {
    display: flex;
    flex-direction: row;
    margin-right: auto;
    height: 40px;
}
a.nav-home, a.nav-index {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
}
a.nav-home {
    height: 40px;
    width: 60px;
    color: #000;
    background-color: #ffec00;
}
a.nav-index i {
    font-size: 48px;
}
a.nav-index {
    height: 40px;
    width: 80px;
    color: #fff;
    background-color: #5533aa;
    border: none;
}
.nav-language {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 40px;
    width: 60px;
    margin-left: auto;
}
.nav-language a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 60px;
    color: #fff;
    background-color: #2e1276;
    border: none;
}
.nav-language .nav-language-menu {
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
    position: absolute;
    top: 30px;
    right: 0;
    width: 60px;
    background-color: #fff;
    transition: all 50ms;
}
.nav-language:hover .nav-language-menu {
    top: 40px;
    visibility: visible;
    opacity: 1;
    transition: all 100ms ease;
}
.nav-language-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;	
    width: 100%;
    height: 40px;
    color: #fff;
    font-family: Montserrat, serif;
    font-size: 13px;
    background-color: #5533aa;
    border: none;
}
a.nav-home:hover, 
a.nav-index:hover,
.nav-language a:hover, 
.nav-language-menu li a:hover, 
body#en .nav-language .lang-en a, 
body#ja .nav-language .lang-ja a 
{
    color: #000;
    background-color: #fff;
    border: none;
}

/* RB menu */

#sticky-ui {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 1007;
}
#sticky-ui ul {
    display: flex;
    flex-direction: row;
}
#sticky-ui ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 14px;
    border: none;
}
#sticky-ui ul li {
    background-color: #5533aa;	
}
#sticky-ui ul li:nth-child(even) {
    background-color: #2e1276;
}
#sticky-ui ul li a:hover {
    color: #000;
    background-color: rgba(255,255,255,1);
    border: none;
}

/* Visual / h2 */

#headline {
/*    margin-top: 100px;*/
    width: 100%;
}
.headline-home {
    height: 140px;
    background: url("img/visual.png") #f7f7f7 no-repeat center center / cover;		
}
.headline-single {
    background: #333;
}
.headline-single section {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 45px 30px;
}
.headline-single section h2 {
    font-size: 2em;
    color: #fff;
}

/* Contents */

.content-wrapper {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 5px;
}

/* Panel */

.panel-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}
.panel-wrapper > li {
    display: flex;
    width: calc( 100% / 3 );
    padding: 5px;
}
a.panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    border: none;
    background-color: #f3f3f3;
    transition: all 350ms;
}
a.panel > * {
    width: 100%;
}
a.panel h3 {
    font-size: 1.5em;
    padding: 60px 40px 5px;
}
a.panel > i {
    font-size: 32px;
    padding: 5px 40px 30px;
}
a.panel p {
    flex-grow: 1;
    text-align: left;
    font-size: 0.875em;
    color: #111;
    padding: 0 40px;
}
a.panel > div {
    font-family: Montserrat, serif;
    font-size: 13px;
    margin-top: 40px;
    padding: 30px 0;
    border-top: 1px solid #fff;
}
a.panel > div i {
    font-size: 14px;
    margin-right: 10px;
}
a.panel:hover {
    color: #222;
    background-color: #fff;
    transition: all 100ms;
}
/*
	Dark Panel
*/
a._dark {
    background-color: #111;	
}
a._dark h3, 
a._dark > i, 
a._dark p 
{
    color: #fff;
}
a._dark > div {
    color: #999;
    border-top: 1px solid #444;	
}
a._dark:hover {
    background-color: #fff;
    transition: all 100ms;
}
a._dark:hover h3, 
a._dark:hover > i, 
a._dark:hover p 
{
    color: #222;
}
a._dark:hover > div {
    color: #222;
    border-top: 1px solid #fff;
}
/*
	Purple Panel
*/
a._purple {
    background-color: #5533aa;	
}
a._purple h3, 
a._purple > i, 
a._purple p 
{
    color: #fff;
}
a._purple > div {
    color: #b398f6;
    border-top: 1px solid #2e1276;	
}
a._purple:hover {
    background-color: #fff;
    transition: all 100ms;
}
a._purple:hover h3, 
a._purple:hover > i, 
a._purple:hover p 
{
    color: #222;
}
a._purple:hover > div {
    color: #222;
    border-top: 1px solid #eee;
}

/* Box Layout and Footprints / width */

article, .footprints {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 5px;
}

/* Box Layout and Footprints */

article > div {
    background-color: #f7f7f7;
}
.box-content-wrapper {
    width: 70%;
    margin: 0 auto;
    padding: 180px 0 140px;
    display: flex;
    flex-direction: row;
}
.box-content-columns > a, .box-content-columns > a:hover {
    border: none;
}
.cover-img {
    width: 100% !important;
    margin-bottom: 40px;
}
.box-content-columns {
    width: 50%;
}
.box-content-columns:first-child {
    padding-right: 80px;
}
.box-content-columns p {
    margin-bottom: 40px;
}
.box-content-columns p:last-child {
    margin-bottom: 0;
}
.box-title > * {
    display: block;
}
.box-title > div {
    font-family: "Noto Serif JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    /*	font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho Light", YuMincho, "Yu Mincho", sans-serif;*/
    font-size: 4em;
    color: #000;
}
.box-title > div:after {
    display: block;
    margin-top: 30px;
    content: "";
    pointer-events: none;
    width: 100px;
    height: 10px;
    background-color: #000;	
}
.box-title > i, .box-title > img {
    font-size: 32px;
    margin: 40px 0 20px 0;
}
.box-title > em {
    font-family: Montserrat, serif;
    font-size: 13px;
    color: #999;
}
.box-title > p {
    padding: 80px 0 40px;
}
.footprints ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #f7f7f7;
}
.footprints ul li {
    font-weight: bolder;
    font-size: 0.875em;
    color: #222;
    background-color: #eee;
}
.footprints ul li a i {
    margin-right: 10px;
}
.footprints ul li a {
    display: block;
    color: #222;
    padding: 20px 30px;
    background-color: #eee;
    border: none;
}
.footprints ul li a.footprints-link-home {
    color: #222;
    background-color: #ffec00;
}
.footprints ul li a.footprints-link-edo150 {
    color: #fff;
    background-color: #5533aa;
}
.footprints ul li:last-child {
    padding: 20px 30px;
    color: #fff;
    background-color: #333;
}
.footprints ul li a:hover {
    color: #222;
    background-color: #fff;
}

/* Templates */

.single-content-wrapper > *:not(.table-wrapper):not(h3):not(.block-btn-box):not(.flex) {
    width: 90%;
/*    max-width: 720px;*/
    margin: 0 auto;
}
.single-content-wrapper > * {
    display: block;
    box-sizing: border-box;
    padding-bottom: 40px;
}
.single-content-wrapper > *:first-child {
/*    padding-top: 120px;*/
    padding-top: 60px;
}
.single-content-wrapper > *:not(.box-table):last-child {
/*    padding-bottom: 120px;*/
    padding-bottom: 60px;
}
.single-content-wrapper > h3 {
    width: 90%;
    /* margin: 0 auto 10px; */
    margin: 0 auto 20px;
    padding-bottom: 0;
    font-size: 1.5em;
    text-align: center;
    color: #000;
}
.single-content-wrapper > h4 {
    text-align: center;
    padding-top: 80px;
}
.single-content-wrapper > .bar {
    display: block;
    text-align: center;
    font-size: 32px;
}
.box-article > ul {
    display: flex;
    flex-direction: row;
    padding-bottom: 40px;
}
.box-article > ul li:first-child {
    padding-right: 40px;
    width: calc( 100% - 100px );
}
.box-article > ul li.date {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bolder;
    line-height: 1.5;
}
.box-article h3 {
    font-size: 1.5em;
    line-height: 1.5;
}
.box-article > p {
    margin-bottom: 40px;
}
.box-article > a {
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    text-align: center;
    padding: 30px;
    border: none;
    border-top: 1px solid #ddd;
}
.box-article > a:hover {
    color: #000;
    background-color: rgba(255,255,255,1);
}
.box-article a i {
    margin-right: 10px;
}
.block-btn {
    display: block;
    padding: 20px 30px;
    border-radius: 5px;
    color: #222;
    font-weight: bolder;
    font-size: 0.875em;
    line-height: 1.5;
    background-color: #eee;
    border: none;
}
.block-btn i {
    margin-right: 10px;
}
.block-btn:hover {
    color: #222;
    background-color: #fff;
    border: none;
}
.block-btn-box {
    width: 90%;
    margin: 0 auto;
    text-align: right;
}
.block-btn-ex {
    display: inline-block;
}
.img-btn, 
.img-btn:hover 
{
    border: none;
}
.img-btn img {
    width: 100%;
}
.single-content-wrapper > ul li {
    line-height: 2.0;
    margin-bottom: 40px;
}
.single-content-wrapper > ul li:last-child {
    margin-bottom: 0;
}
.single-content-wrapper > ul li em {
    display: block;
    font-size: 0.875em;
    margin-bottom: 20px;
}
.single-content-wrapper > ul li em:after {
    display: block;
    margin-top: 5px;
    content: "";
    pointer-events: none;
    width: 60px;
    height: 2px;
    background-color: #222;
}
.search-form {
    padding: 40px 0;
}
.search-form span {
    display: inline-block;
    margin-right: 10px;
}
input#search {
    width: 50%;
    box-sizing: border-box;
    font-size: 1em;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 500ms;
}
input#search:focus {
    border: 1px solid #222;
    transition: all 500ms;
}
.box-table {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;	
}
table {
    width: 100%;
    font-size: 0.875em;
    line-height: 1.5;
    text-align: center;
    border-collapse: collapse;
    border: 5px solid #000;
    background-color: #fff;
}
tr:nth-child(odd) {
    background-color: #f3f3f3;
}
th, td {
    border: 1px solid #000;
    padding: 20px;
    vertical-align: middle;
    white-space: wrap;
}
th {
    font-weight: bolder;
    background-color: #eee;
}
table thead th {
    font-weight: bolder;
    background-color: #777;
    color: #eee;
}
.table-ex {
    /*	max-width: 720px;*/
    margin: 0 auto;
    text-align: left;	
}
.table-ex th {
    width: 35%;
}
.table-ex tr:nth-child(odd) {
    background-color: inherit;
}
._nowrap th, 
._nowrap td 
{
    white-space: nowrap;	
}

/* Google Maps */

.headline-map section {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 25px 30px;
}
.headline-map section h2 {
    font-size: 1.5em;
    color: #fff;
}
.map-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    background-color: #f7f7f7;
    padding-bottom: calc( 100vh - 240px );
    overflow: hidden;
}
#map
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#map * {
    font-family: "Noto Serif JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
}    

/* Footer */
footer {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    font-size: 0.875em;
    font-weight: bolder;
    line-height: 1.5;
}
footer > div {
    padding: 5px;
}
.footer-codh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    background-color: #ffec00;
}
footer > section {
    display: flex;
    flex-direction: row;
}
footer > section ul {
    width: calc( 100% / 3 );
    background-color: #eee;
    border: 5px solid #fff;
}
footer > section ul li {
    display: block;
    border-bottom: 1px solid #fff;
}
footer > section ul li.title {
    padding: 28px 30px;
    background-color: #ddd;
}
footer > section ul li a {
    display: block;
    padding: 18px 30px;
    color: #222;
    background-color: #eee;
    border: none;
}
footer > section ul li a:hover {
    color: #222;
    background-color: #fff;
    border: none;
}
footer > section ul li i {
    margin-right: 10px;
}
address {
    display: block;
    width: 100%;
    max-width: 1480px;
    padding: 35px 30px 40px;
    font-family: Montserrat, serif;
    font-size: 11px;
    line-height: 2.0;
    color: #999;
    text-align: center;
}

div.graphic-box {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;	
}

div.graphic-box div.item {
    display: inline-block;
    margin: 1px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    width: fit-content;
    text-align: center;
}

div.graphic-box div.item div.label {
    padding: 3px;
    font-weight: bold;
}

div.graphic-box div.item img {
    padding: 3px;
    height: 150px;
}

div.graphic-list {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;	
}

div.graphic-list div.item {
    display: inline-block;
    margin: 1px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    width: fit-content;
    text-align: center;
}

div.graphic-list div.item div.label {
    padding: 3px;
    font-weight: bold;
}

div.graphic-list div.item img {
    padding: 3px;
    width: 150px;
}

div.item a {
    text-decoration: none;
    border: none;
}

div.item div.text {
    margin: 0px 2px;
    padding: 5px;
    font-size: 90%;
    background: #eee;
}

div.item div.color div.color-box {
    width: 100%;
    margin: 0px;
    border-style: solid;
    border-color: #333;
    border-width: 1px;
}

div.color-bar {
    height: 30px;
    width: 10%;
    margin: 0px;
    border-width: 1px;
    border-color: #000;
    border-style: solid;
    display: inline-block;
}

a.color-bar {
    text-decoration: none;
    border: none;
}

span.choice {
    padding: 0px 15px 0px 0px;
}

/* Media Queries */

div.el {
    white-space: nowrap;
}

div.page-list {
    line-height: 2.5;
}

span.single {
    margin: 3px;
    padding: 0px 5px;
    display: inline-block;
    background: #ddd;
}

span.single a {
    border: none;
}

span.pair {
    margin: 3px;
    padding: 0px 5px;
    display: inline-block;
}

span.book {
    margin: 3px;
    padding: 0px 5px;
    display: inline-block;
}

.l0 {
    background: #222;
    color: #fff;
}

.l0 > a {
    color: #fff;
    border: none;
}    

.l1 {
    background: #e31a1c;
    color: #fff;
}

.l1 > a {
    color: #fff;
    border: none;
}    

.l2 {
    background: #33a02c;
    color: #fff;
}

.l2 > a {
    color: #fff;
    border: none;
}    

.l3 {
    background: #1f78b4;
    color: #fff;
}

.l3 > a {
    color: #fff;
    border: none;
}    

.l4 {
    background: #bc80bd;
    color: #fff;
}

.l4 > a {
    color: #fff;
    border: none;
}    

.l5 {
    background: #bbb;
    color: #000;
}

@media screen and (max-width:768px) {
    header {
	position: relative;
    }
    .header-wrapper-wide {
	padding: 0 20px;
    }
    #headline {
	margin-top: 0;
    }
    .panel-wrapper, 
    footer > section 
    {
	flex-direction: column;
    }
    .panel-wrapper li, 
    .box-content-columns, 
    footer > section ul 
    {
	width: 100%;
    }
    .box-content-wrapper {
	width: 90%;
	flex-direction: column;
    }
    .box-content-columns:first-child {
	padding-right: 0;
	margin-bottom: 80px;
    }
    address {
	padding: 35px 30px 80px;
    }
}

.a-img {
    text-decoration: none;
    border: none;
}

.a-img:hover {
    text-decoration: none;
    border: none;
}

li.facet {
    display: inline;
    white-space: nowrap;
    margin: 0px 8px 0px 0px;
}

.current {
    color: #c00;
}    

.current a {
    color: #c00;
}

div.flex {
    display: flex;
    justify-content: center;
    padding: 30px;
    width: 100%;
}

div.flex > div {
    margin: 0px 2px;
}

/* End */