@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Noto+Sans+JP);
@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
/* ======================================================================== Common Style ======================================================================== */
h1 { font-family: "Sawarabi Mincho"; }

h2 { margin-bottom: 1.5rem; font-family: "Sawarabi Mincho"; }

h3 { font-family: "Sawarabi Mincho"; }

/* a */
a { color: #000; }
a:hover { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; color: #fd4907; text-decoration: none; }

/* img */
img { max-width: 100%; height: auto; }

/* ul,ol */
ul, ol { padding-left: 1.5rem; }

ul.entrylist { display: flex; flex-wrap: wrap; margin: 0; padding: 0; width: 100%; }
ul.entrylist > li { display: inline-flex; width: 100%; border-bottom: 1px #CCC dotted; }
ul.entrylist > li::before { display: inline-flex; align-items: center; margin-right: 0.5rem; height: 100%; content: "\0bb"; }
ul.entrylist > li a { display: flex; flex-wrap: nowrap; width: 100%; }
ul.entrylist > li span { display: inline-flex; align-items: center; padding: 0.5rem; padding-left: 0; }
ul.entrylist > li span.date { width: 8.5rem; }
ul.entrylist > li span.title { width: 100%; }

/* article */
article { margin-bottom: 5.0rem; }

/* section */
section { margin-bottom: 5.0rem; }

/* iframe */
.responsive-iframe { position: relative; width: 100%; padding-top: 56.25%; border: 1px #CCC solid; }
.responsive-iframe iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

/* ======================================================================== Style Template ======================================================================== */
/* bg-color */
.bg-accent { background-color: #000 !important; }

/* icon */
.icon-more::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; content: ""; font-weight: 900; margin: 0 0.3rem 0 0; color: inherit; }

.icon-date::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; content: ""; font-weight: 900; margin: 0 0.3rem 0 0; color: inherit; }

.icon-tag::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; content: ""; font-weight: 900; margin: 0 0.3rem 0 0; color: inherit; }

.icon-category::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; content: ""; font-weight: 900; margin: 0 0.3rem 0 0; color: inherit; }

/* ======================================================================== Style Override ======================================================================== */
/* bg-color */
.bg-primary { background-color: #B20010 !important; }

.bg-secondary { background-color: #EFEFEF !important; }

/* ======================================================================== body ======================================================================== */
body { font-size: 1.0rem; font-family: "Noto Sans JP", Arial, Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角5 Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS P ゴシック", sans-serif; font-weight: 300; }

/* ======================================================================== header ======================================================================== */
header .navbar__bottom { border-bottom: 1px #CCC solid; background-color: #EFEFEF; }
header .navbar__bottom ul.navbar-nav li.nav-item { width: 100%; border-left: 1px #FFF solid; }
header .navbar__bottom ul.navbar-nav li.nav-item:last-child { border-right: 1px #FFF solid; }
header .navbar__bottom ul.navbar-nav li.nav-item a.nav-link { display: flex; justify-content: center; align-items: center; font-weight: bold; }
header .navbar__bottom ul.navbar-nav li.nav-item a.nav-link:hover { background-color: #B20010; color: #FFF; }
header .navbar__sns .facebook img { width: 32px; height: 32px; }

/* ======================================================================== main ======================================================================== */
/* main */
main.main .main__image { background: #B20010 url(/images/common/top_bg.jpg); background-position: top center; background-repeat: repeat; height: 500px; }
main.main .main__image .inner .btn-dark { border: 1px #000 solid; background-color: #000; }
main.main .main__image .inner .btn-dark:hover { border: 1px #333 solid; background-color: #333; }
main.main .main__contents-top .nav-pills li { border-right: 1px #FFF solid; }
main.main .main__contents-top .nav-pills li:last-child { border-right: 0; }
main.main .main__contents-top .nav-pills li a { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; width: 100%; height: 100%; background-color: #EFEFEF; }
main.main .main__contents-top .nav-pills li a:hover, main.main .main__contents-top .nav-pills li a.active { background-color: #B20010; color: #FFF; }
main.main .main__banner .right { border-left: 1px #EFEFEF solid; }
main.page .profile .modal-dialog { max-width: 800px; }
main.post h2, main.post h3 { font-family: "Noto Sans JP"; }
main.post .inner { display: flex; flex-wrap: nowrap; height: 67.5vh; }
main.post .post__list, main.post .post__content { display: inline-flex; flex-wrap: wrap; height: 100%; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
main.post .post__list { order: 2; padding: 3.0rem 1.5rem; width: 10%; min-width: 185px; border-left: 1px #CCC solid; overflow: hidden; }
main.post .post__list ul { margin: 0; padding: 0; list-style: none; }
main.post .post__list #drawer-content { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; }
main.post .post__list #drawer-content .title { display: flex; justify-content: center; align-items: center; padding: 1.0rem; background-color: #EFEFEF; }
main.post .post__list #drawer-content .list-group { border-radius: 0; }
main.post .post__content { order: 1; padding: 3.0rem 1.5rem; width: 90%; overflow: auto; }
main.post .post__content p { margin-bottom: 0; }

/* drawer */
#drawer-checkbox { display: none; }

#drawer-icon { cursor: pointer; display: inline-block; }

#drawer-content { overflow: auto; position: fixed; top: 0; right: 0; z-index: 40; width: 0px; max-width: 90%; height: 100%; background: #fff; transition: all 0.3s ease-in-out 0s; transform: translateX(100%); }

#drawer-checkbox:checked ~ #drawer-content { width: 30%; min-width: 250px; transform: translateX(0); box-shadow: 6px 0 25px rgba(0, 0, 0, 0.16); }

#drawer-close { display: none; position: fixed; z-index: 39; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: all 0.3s ease-in-out 0s; }

#drawer-checkbox:checked ~ #drawer-close { display: block; opacity: 0.3; }

/* ======================================================================== footer ======================================================================== */
/* footer */
footer { border-top: 1px #CCC solid; }

#copyright { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0.5rem; }

#pagetop { z-index: 900; position: fixed; right: 16px; bottom: 16px; display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; cursor: pointer; background-color: #EFEFEF; border: 2px #FFF solid; border-radius: 50%; color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; }
#pagetop:hover { background: #B20010; }
#pagetop i { font-size: 120%; }

/*# sourceMappingURL=style.css.map */
