@charset "UTF-8";

html { font-size: 100% }
body {
  font-family: 'Yu Gothic', 'YuGothic', serif;
  font-weight: normal;
  line-height: 1.75;
  color: #321;
  background: #fefefe;
}
a { text-decoration: none; }
img { max-width: 100%; }
h1 { text-align: center; }
button { text-decoration: underline; }

.monitor { max-width: 95%; margin: 0 auto; }
.wrapper { max-width: 1080px; margin: 0 auto; padding: 0 2%; }
.insert { padding: 2%; }
.link a { text-decoration: underline; }

/*page-header*/
.page-header { background: #ffffff; box-shadow: 0 2px 3px #aaaaaa; margin-bottom: 30px; }
.logo { width: 120px; margin-top: 35px; }
.main-nav { display: flex; list-style: none; margin-top: 2px; justify-content: space-around; }
.main-nav li { margin: 5px; }
.main-nav a { text-decoration: none; color: #332211; }
.main-nav a:hover { color: #887766; }
.nav-b { font-size: 1.1rem; padding: 3px 18px; }
.nav-b:hover { border-bottom: 3px solid #000000; }

/*page-footer*/
.page-footer { background: #ededed; text-align: center; padding: 10px; }
.page-footer p { color: #666666; font-family: "Times New Roman","serif"; font-weight: lighter; }
.page-footer a { text-decoration: underline; color: #666666; font-size: 0.7rem; }

/*sidebar*/
.side-title { font-size: 1.375rem; padding: 0 8px 8px; border-bottom: 2px #00bbdd solid; font-weight: normal; }
.side-title a { text-decoration: none; color: #000000; display: block; }
.side-title a:hover { color: #887766 }
.side-menu { margin-bottom: 30px; list-style: none; }
.side-menu li { border-bottom: 1px #dddddd solid; }
.side-menu a { color: #332211; padding: 10px; display: block; }
.side-menu a:hover { color: #887766 }
.side-profile { text-align: center; margin-top: 60px; }
.side-profile h3 { font-weight: normal; }
.side-profile img { padding: 0 20%; border-radius: 50%; }
.side-profile p { font-size: 0.75rem; padding: 0 10%; }
.side-profile a { color: #332211; }

/*main-contents*/
article { width: 75%; order: 1; }
aside { width: 22%; order: 2; }
.main-contents { max-width: 1080px; margin: 0 auto; padding: 2%; margin-bottom: 30px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.1), 0px 0px 3px 2px rgba(0,0,0,0.1) inset; }
.contents-flex { display: flex; justify-content: space-between; }
.contents-title { position: relative; margin-bottom: 40px; }
.contents-title img { border: 3px #aabbcc ridge; padding: 1px; }
.contents-title p { text-align: right; }
.content { margin-bottom: 50px; }
.content h3 { border-left: 5px #00bbdd solid; border-bottom: 2px #dddddd solid; padding: 5px 15px; margin-bottom: 10px; }
.content a { color: #000000; }
.content a:hover { color: #887766; }
.sub-content { margin-bottom: 30px; }
.sub-content h4 { background-color: #eeeeee; padding: 5px 10px; margin-bottom: 10px; }
.sub-content li { list-style-position: outside; margin-left: 20px; }
.sub-content p { margin-bottom: 15px; }
.sub-content p img { max-height: 90px; }

/*index-page*/
.index-header { margin-top: 3%; margin-bottom: 30px; }
.index-grid { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; margin-bottom: 60px; }
.index-grid img { border: 3px #aeb5dc outset; }
.index-grid a:hover img { border: 3px #aeb5dc inset; }
#home h3 { font-size: 1.375rem; font-weight: normal; text-align: center; }
.news-feed { margin-bottom: 60px; }
.news-feed h3 { font-size: 1.375rem; font-weight: lighter; background-color: #dddddd; margin-bottom: 5px; }
.news-feed ul { list-style: none; height: 150px; overflow: scroll; border: #123456 double; padding: 10px; }
.news-feed a { text-decoration: none; color: #332211; display: block; }
.news-feed a:hover { color: #887766; background-color: #eeeeee; }

/*subindex-page*/
.subindex-grid { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; margin: 90px 0 90px; }
.subindex-grid div { text-align: center; }
.subindex-grid h3 { border-left: 5px #00bbdd solid; border-bottom: 2px #dddddd solid; padding: 5px 15px; margin-bottom: 10px; }
.subindex-grid a { color: #000000; }
.subindex-grid a:hover { color: #887766; }
.subindex-hovereffect { background: #000000; overflow: hidden; border-radius: 15px; }
.subindex-hovereffect img { display: block; width: 100%; transition: 0.3s; }
.subindex-hovereffect a:hover img { opacity: 0.5; transform: scale(1.1, 1.1); }
.linkedicon { display: flex; justify-content: space-between; margin-bottom: 20px; }
.linkedicon .icon { width: 8%; }
.linkedicon .caption { width: 90%; text-align: left;}

/*item-page*/
.item-title { position: relative; margin-bottom: 40px; }
.item-header { display: flex; justify-content: flex-start; }
.item-header div { width: 30%; height: auto; }
.item-header p { text-align: left; margin: 30px 0 0 20px; }
.item-grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; }
.item-grid .item img { border: 2px #aeb5dc outset; padding: 3px; }
.item-grid .item a:hover img { border: 2px #aeb5dc inset; padding: 1px; }
.item-grid p { text-decoration: none; color: #000000; text-align: center; }
.concert-grid { display: grid; grid-gap: 20px; grid-template-columns: ; }
.concert-grid .item img {}
.concert-grid .item a:hover img {}
.concert-grid p { text-decoration: none; color: #000000; text-align: center; }

/*sitemap-page*/
#sitemap ul { list-style: square; list-style-position: inside; margin-left: 20px; }
#sitemap .subpage { list-style: none; margin-left: 30px }
#sitemap a { text-decoration: none; color: #332211; }
#sitemap a:hover { text-decoration: underline; color: #887766; }

/*news-page, contact-page*/
.news-date { text-align: right; font-weight: normal; border-top: 1px #aeb5dc dashed; margin-top: 10px; }
.form { text-align: center; /*overflow: scroll;*/ }

/*article-page*/
.article-title { position: relative; padding-top: 8px; margin-bottom: 60px; }
.article-title h2 { text-align: center; font-size: 2rem; font-family: "Yu Mincho", "YuMincho"; margin-bottom: 8px; }
.article-title p { text-align: right; border-top: 1px #dddddd solid;}
.pager { margin-top: 100px; display: flex; justify-content: center; }
.pager a { text-decoration: none; color: #000000; background-color: #efefef; margin: 20px; padding: 10px 20px; }
.pager a:hover { color: #887766; }
.commentary { border-width: 1px; border-style: dotted; border-color: #00bbdd; margin: 20px 0; }
.commentary p { padding: 20px; }
.commentary ol { list-style-position: inside; padding: 20px; }
.commentary ul { list-style: none; padding: 20px; }
.cause-countermeasure { display: flex; justify-content: space-around; margin: 20px 20px 5px; }
.cause-countermeasure h5 { width: 10%; text-align: center; }
.cause-countermeasure p { width: 80%; border-left: 3px #ccbbaa solid; padding-left: 20px; }
.grid-4 { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr; }

/*responsive*/