@charset "utf-8";
/* CSS Document */
/*----------------------------------------
　common
----------------------------------------*/
html { background-color: #f4f4f4; }
html, body {
 width: 100%;
 height: 100%;
 color: #000;
 font-size: 16px;
 font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
#wrap {
 width: 100%;
 height: 100vh;
 margin: 0 auto;
 position: relative;
 display: flex;
 flex-direction: column;
}
a i {
 font-size: 90%;
 display: inline-block;
 padding: 0 0.4em;
}
@media screen and (min-width: 768px) {
 
}
@media screen and (max-width: 768px) {
 html, body {
  font-size: 16px;
  background: none;
 }
 .contentsW {
  padding: 0 0;
  margin: 0 auto;
 }
 #wrap { height: 100%; }
}
/* footer
----------------------------------------*/
footer {
 width: 100%;
 height: auto;
 font-size: 14px;
 padding: 20px 0;
 color: #fff;
 background: #000;
 text-align: center;
 margin-top: auto;
}
footer .copyright {
 font-size: 10px;
 line-height: 1;
 color: #fff;
 text-align: center;
}
@media screen and (max-width: 768px) {
}
/* Contents
----------------------------------------*/
#contents {
 width: 100%;
 margin: 0 auto;
 position: relative;
 line-height: 2;
 text-align: center;
 overflow: hidden;
 padding: 0 0 40px;
}
#contents p { margin-top: 0.5em; }
.section01 {
 width: 100%;
 padding: 80px 20px;
 text-align: center;
 color: #fff;
 text-shadow: 0px 0px 2px rgb(0, 0, 0);
}
.sectionWrap {
 display: flex;
 justify-content: space-between;
}
.section02,
.section03 {
 width: 42%;
 margin: 0 4%;
 padding: 20px;
 color: #000;
 background: rgba(255,255,255,0.5);
}
@media screen and (max-width: 768px) {
 .section01 { padding: 40px 20px; }
 .section01 p { text-align: left; }
 .sectionWrap { flex-direction: column; }
 .section02,
 .section03 {
  width: auto;
  margin: 20px;
 }
}
/* パーツ
----------------------------------------*/
/* title */
#contents h1 {
 font-size: 3em;
 line-height: 1;
 display: inline-block;
 border: solid #fff 1px;
 padding: 20px 40px;
 text-align: center; 
}
#contents h2 {
 text-align: center;
 padding-bottom: 0.6em;
 margin: 0 0 1em;
 font-size: 1.6em;
 position: relative;
}
#contents h2:after {
 content: "　";
 display: block;
 width: 40px;
 height: 3px;
 border-top: double 3px #666;
 position: absolute;
 bottom: 0;
 left: 50%;
 margin-left: -20px;
}
/* list */
ul.listPost {
 overflow: hidden;
 text-align: center;
}
ul.listPost li a {
 display: block;
 color: #000;
}
/* button */
.btn01 {
 display: inline-block;
 border: solid 1px #999;
 color: #999;
 font-size: 12px;
 line-height: 1;
 padding: 0.4em 1em;
 vertical-align: middle;
}
.btn01:after {
 font-family: "Material Icons";
 content: "chevron_right";
 line-height: 1;
 display: inline-block;
 margin-left: 4px;
 vertical-align: middle;
}
/* ページ送り */
#contents .pageNav01 {
 margin: 40px 0 0 0;
 text-align: center;
 line-height: 1;
 padding-bottom: 1.5em;
}
#contents .pageNav01 ul {
 display: table;
 border-collapse: collapse;
 width: auto;
 height: 50px;
 margin: 0 auto;
 border: #666 solid 1px;
 border-right: none;
}
#contents .pageNav01 ul li {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 font-size: 20px;
 padding: 0 20px;
 cursor: pointer;
 border-right: #666 solid 1px;
 color: #666;
}
#contents .pageNav01 ul li span {
 font-size: 10px;
}
#contents .pageNav01 ul li:hover {
 opacity: 0.7;
}
#contents .pageNav01 ul li.active {
 line-height: 0.8;
 cursor: auto;
 background-color: #666;
 color: #fff;
}
#contents .pageNav01 ul li.active:hover {
 opacity: 1;
}
#contents .pageNav01 ul li:first-child, #contents .pageNav01 ul li:last-child {
 background-color: #666;
 color: #fff;
}
/* box */
.box01 {
 border: #eee solid 4px;
 padding: 12px;
 margin-top: 1em;
}
/* webfont */
.wf01 {
 font-family: 'Monoton', cursive;
}
.wf02 {
 font-family: 'Fredericka the Great', cursive;
}
.wf03 {
 font-family: 'IM Fell DW Pica', serif;
}
/*----------------------------------------
　index
----------------------------------------*/
#top {}
/*----------------------------------------
　post
----------------------------------------*/
#post #contents .postInfo {
 width: 100%;
 margin: 2em 0 0;
 border-bottom: #a1a1a1 dotted 1px;
 display: table;
}
#post #contents .postInfo > div {
 display: table-cell;
 vertical-align: middle;
}
#post #contents .postInfo div.date {
 width: 6em;
 font-family: 'IM Fell DW Pica', cursive;
 font-size: 20px;
 color: #a1a1a1;
}
#post #contents .postInfo div.category {
 text-align: right;
}
#post #contents .postInfo div.category a {
 display: inline-block;
 padding: 6px 8px;
 border-radius: 4px;
 background-color: #3c839c;
 color: #FFF;
 font-size: 12px;
 line-height: 1;
 margin-left: 10px;
 vertical-align: middle;
}
#post #contents blockquote {
 margin: 2em;
 border-top: dashed 2px #ccc;
 border-bottom: dashed 2px #ccc;
 padding: 1em 0;
 position: relative;
 font-style: italic;
 color: #666;
}
#post #contents blockquote p:first-child {
 margin-top: 0;
}
#post #contents blockquote cite {
 display: block;
 text-align: right;
 margin-top: 1em;
 font-size: 12px;
}
#post #contents .snsBtn img {
 margin: 0;
}
#post #contents .snsBtn ul {
 display: table;
}
#post #contents .snsBtn ul li {
 display: table-cell;
 vertical-align: top;
 padding-right: 6px;
 line-height: 1;
}
#post #contents .snsBtn ul li.line {
 width: 82px;
}
#post #contents .snsBtn .fb_iframe_widget_fluid {
 height: 20px;
}
#post .listRelated {
 margin-top: 60px;
 background-color: #f6f6f6;
 padding: 0 20px 20px;
}
#post #contents .listRelated .title {
 font-family: 'IM Fell DW Pica', cursive;
 font-size: 1.4em;
 line-height: 1;
}
#post #contents .listRelated .title span {
 display: inline-block;
 border-top: double 3px #666666;
 padding-top: 0.8em;
}
#post .listRelated ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-content: space-between;
}
#post .listRelated ul li {
 flex-grow: 1;
 margin: 1em 0;
}
#post .listRelated ul li a {
 display: table;
 width: 100%;
 min-height: 200px;
 color: #000;
 font-weight: bold;
 line-height: 1.6;
}
#post .listRelated ul li a div {
 background-position: center 50%;
 background-size: cover;
 background-color: rgba(0, 0, 0, 0.6);
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 word-break: break-all;
 padding: 1em;
}
@media screen and (max-width: 700px) {
 #contents h1 {
  display: block;
  font-size: 2.4em;
  padding: 20px;
 }
 
}