@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
.cf:after {
  content: "";
  clear: both;
  display: block;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
body {
    font-size: 16px;
    line-height: 2;
    font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
    color: #000;
}
pre {
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
    display: inline-block;
}
h1,h2,h3,h4,h5,h6{
    line-height: normal;
}
h2,h3,h4,h5,h6{
    font-size: 130%;
    margin-bottom: 25px;
    padding: 8px 0;
}

/* top page */

/* header */
.headArea {
    width: 100%;
    padding: 30px 0 0;
}
.ttlArea {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 2%;
  width: 80%;
}
.ttlArea .siteTtl {
    font-size: 18px;
    font-weight: bold;
    width: 40%;
}
.ttlArea .siteTtl a {
    color: #E60018;
}
.ttlArea .catchCopy {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
}
.gronav {
  background: #E60018;
  border-top: 2px solid #E60018;
  border-bottom: 2px solid #E60018;
}
.gronav > ul {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 80%;
}
.gronav #gronavMenu > li {
    border-right: 2px solid #fff;
    display: block;
    position: relative;
    width: 100%;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
}
.gronav #gronavMenu > li:first-child {
  border-left: 2px solid #fff;
}
#gronavMenu li .sub-menu {
    display: none;
    position: absolute;
    padding: 0;
    z-index: 9999;
}
ul.sub-menu li a {
    display: block;
    width: 220px;
    background-color: #2E2B2B;
}
ul.sub-menu li a:hover {
    color: #f5f2e8;
    background-color: #388186;
}
.slicknav_menu {
    display: none;
}
#gronavMenu li a {
    color: #fff;
    display: block;
}
#gronavMenu li a:hover {
  background: #fff;
  color: #E60018;
}

/* slider */
.mainImg {
    overflow: hidden;
}
.bx-wrapper {
    margin: 0 auto;
    border: none;
    box-shadow: none;
}
.bx-wrapper .bx-controls-direction a {
  right: -50%;
}
.bx-wrapper .bx-controls-direction a:first-child {
    left: -50%;
}
.bx-viewport {
  overflow: visible !important;
}

/* contents area */
.Container {
    width: 960px;
    margin: 50px auto 0;
}
.mainBox h2,
.Entry h2 {
    border-left: 10px solid #E60018;
    margin-bottom: 20px;
    font-size: 21px;
    padding: 0 2%;
}
.mainBox .artBox h3,
.Entry h3 {
    border-bottom: 2px solid #E60018;
    border-left: 8px solid #E60018;
    font-size: 18px;
    padding: 0 2%;
}
.mainBox .artBox h4,
.Entry h4 {
    border-bottom: 2px solid #E60018;
    font-size: 18px;
    padding: 0 2%;
}
.mainBox .artBox h5,
.Entry h5 {
    background: #eee;
    font-size: 18px;
    padding: 1% 2%;
}
.mainBox .artBox h6,
.Entry h6 {
    border-left: 10px solid #eee;
    font-size: 18px;
    padding: 0 2%;
}
strong {
  color: #E60018;
}
em {
  text-decoration: underline;
}
del {
  text-decoration: line-through;
}
.mainBox article ul li::before,
footer .ft-menu li::before,
.Entry ul li::before {
  border-style: solid;
  border-width: 3.5px 0 3.5px 6.1px;
  border-color: transparent transparent transparent #e60017;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 45%;
  width: 0;
}
.mainBox article ul li,
footer .ft-menu li,
.Entry ul li {
  padding: 0 2%;
  position: relative;
}
.mainBox article ol,
.Entry ol {
  counter-reset: number;
}
.mainBox article ol li::before,
.Entry ol li::before {
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  margin-right: 10px;
  font-style: italic;
  font-weight: bold;
}
blockquote {
  border: 1px solid #ccc;
  padding: 2%;
}
address {
  color: #ccc;
}
/*
.mainBox article .alignleft,
.Entry .alignleft {
  margin-bottom: 10px;
  padding: 0;
  text-align: left;
}
.mainBox article .aligncenter,
.Entry .aligncenter {
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
}
.mainBox article .alignright,
.Entry .alignright {
  margin-bottom: 10px;
  padding: 0;
  text-align: right;
}
*/
pre {
  background: #333;
  color: #fff;
  padding: 2%;
  width: 100%;
}
table {
  border-collapse: collapse;
  margin: 20px 0;
  width: 100%;
}
th {
  background-color: #E60018;
  color: #fff;
  font-weight: normal;
}
td {
  border: 1px solid #E60018;
  color: #666;
  text-align: center;
}
.mainBox article a {
    color: #297acc;
    text-align: right;
}
.Container a:hover {
  border-bottom: 1px solid #297acc;
}


/* section */
.mainBox {
    border: 1px solid #ccc;
    float: left;
    padding: 3%;
    width: 640px;
}
.artBox {
  margin-bottom: 40px;
}
.Container article .art-box {
    padding: 0 20px;
}
.artBox img {
    margin-bottom: 10px;
    max-width: 100%;
}
.article .art-R {
    width: 280px;
    float: right;
}
.art-R a {
    display: block;
    text-align: right;
}

/* link */
.mainBox .linkBox {
  background: #F7F7F7;
  padding: 2%;
}
.mainBox .linkBox h3::before {
  content: url(../images/link.svg);
  left: 0;
  position: absolute;
  top: 10%;
  height: 20px;
  width: 20px;
}
.mainBox .linkBox h3 {
    border: none;
    margin: 0 3% 2%;
    padding: 0 5%;
    position: relative;
}
.linkBox h3 a {
    font-size: 16px;
    color: #E60018;
}
.linkBox h3 a:hover {
    border-bottom: 2px solid #E60018;
}
article.linkBox p {
    padding: 0 0 20px;
}
.mainBox article.linkBox a {
    text-align: left;
}


/* aside */
aside.side-menu {
    border: 1px solid #ccc;
    float: right;
    width: 300px;
}
.side-container {
    padding: 20px;
}
.side-container a {
    display: block;
    padding: 10px 0;
}
.side-container li ul li a,
.side-container li a {
    line-height: 2;
}
.side-container li ul li a:hover,
.side-container li a:hover{
  border: none;
  color: #297acc;
}
.side-link img {
    max-width: 100%;
}
.side-menu > ul > li > p {
    border-left: 10px solid #ff6600;
    font-size: 21px;
    font-weight: bold;
    padding: 0 4%;
}
.side-container > li {
    font-size: 16px;
}
p.side-link img {
    vertical-align: middle;
}
.side-sub-menu {
    padding: 3%;
}
.side-link p {
    padding: 10px 0;
}

/* footer */
footer {
    background: #fcf5d9;
    padding: 2% 0 0;
    position: relative;
    margin-top: 100px;
}
footer .ft-menu-area {
    display: flex;
    margin: 0 auto;
    width: 80%;
}
footer .ft-ttl,
footer .ft-copy {
    font-size: 10px;
    text-align: center;
}
footer a.top-btn {
    position: absolute;
    top: -40px;
    right: 20px;
    display: block;
    width: 150px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
footer a.top-btn span {
  margin-right: 3%;
}
footer a.top-btn:hover {
  color: #E60018;
}
footer .ft-menu {
  margin-right: 5%;
  width: 30%;
}
footer .ft-menu li {
  margin-bottom: 5%;
}
footer .ft-menu p {
    color: #ed894a;
}
footer .ft-menu a {
    display: block;
    height: 30px;
    line-height: 38px;
    padding: 0 2%;
}
footer .ft-menu a:hover {
  border-bottom: 1px solid;
}
footer .ft-ttl {
    background: #E60018;
    margin-top: 30px;
    color: #fff;
    padding: 1% 0;
}


/* under */
.eyecatch {
  margin-bottom: 20px;
  width: 100%;
}
/* panNav */
#panNav {
  margin-bottom: 10px;
}
#panNav a:hover {
  border: none;
  color: #E60018;
}


/* SNS */
.sns-container {
    display: flex;
    justify-content: space-between;
}
.button-area >div{
text-align: center;}
.button-area:after {
    content: '';
    clear: both;
    display: block;
}
.title-fill {
    text-align: center;
    display: block;
    background-color: #444;
    color: #fff;
    font-size: 14px;
    width: 100%;
    padding: 6px 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.button-whole {
    width: 23%;
    box-sizing: border-box;
    margin: 0 0.1%;
}
.button-whole .fa{
    font-weight: bold;}
.button-link {
    display: block;
    text-align: center;
    color: #fff !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    box-sizing: border-box;
    text-decoration: none;
}
.button-link:hover {
    text-decoration: none !important;
    filter:alpha(opacity=70);
    -moz-opacity: 0.70;
    opacity: 0.70;
}
/* SNSごとの背景色 */
#twitter {
    background-color: #00acee;
}
#hatena {
    background-color: #2D4C86;
}
#facebook {
    background-color: #3b5998;
}
#ggl-plus {
    background-color: #dd4b39;
}


.button-whole a:hover {
    border: none;
}
.alignleft {
    text-align: left;
}
.aligncenter {
    text-align: center;
}
.alignright {
    text-align: right;
}
.Entry img {
    margin-bottom: 10px;
}