@charset "utf-8";


/* -----------------------------------------------------------
COMMON
----------------------------------------------------------- */
body{line-height: 1.75; font-size:1rem; color:#555; text-align: justify; background: #F2F7F7}
ul,li{list-style:none;padding:0; margin: 0;}
a{transition : all 200ms; text-decoration: none; color:#555;}
a:hover{text-decoration:none; color:#888;}
a.under{text-decoration:underline;}

.img-resp{width:100%; height: auto;}
.img-srcset{position:relative;overflow:hidden; height:100%;}
.img-srcset img{width:100%;height:100%;object-fit: cover;}

.text-left {  text-align: left !important;}
.text-right {  text-align: right !important;}
.text-center {  text-align: center !important;}

.wp-block-image img{width:100%; height: auto;}
.bg_white{background: #FFF;}

/* -----------------------------------------------------------
HEADER
----------------------------------------------------------- */
header { z-index: 300; width:100%; height: 165px; display: block; position: fixed;top:0; left:0; text-align: left;}
.header_logo{ width:210px; height: 105px; display: block; margin:30px 20px 30px 30px}
.header_nav{position: absolute; top:20px; right:20px;}
.header_nav li{display: inline-block;}
.header_nav li a{padding: 5px; margin-left: 10px;}
.header_nav li a:hover{color:#999}

footer{margin: 20px 0; border-top: 1px solid #ddd;}
.sns-icons{text-align: center; margin-top: 20px;}
.sns-icons li{width:40px; margin: 10px;display: inline-block;}
.copy_rights{font-size: 0.6rem;color:#999;text-align: center; margin-top: 30px;}

/* -----------------------------------------------------------
TOP
----------------------------------------------------------- */
.main{margin-top: 180px;margin-bottom: 90px}

.article_list li{margin-bottom: 60px;}
.article_list li a .inner{position: relative; width: 100%;}
.article_list li a .inner::before{content:" "; display: block; padding-top: 56.25%;}
.article_list li a .inner .img_box{position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%;transition : all 200ms;}
.article_list li a .inner .img_box:hover{opacity: 0.9;}
.article_list li a h2{line-height: 1; font-size: 1.2rem; margin-top: 15px; margin-bottom: 5px;}
.article_list li a h3{line-height: 1; font-size: 1rem; margin-bottom: 10px; color:#999; font-weight: normal;}
.article_list li a .tags{font-size: 0.8rem; color:#099999}

.article_cover{position: relative; width: 100%;}
.article_cover::before{content:" "; display: block; padding-top: 56.25%;}
.article_cover .img_box{position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%;transition : all 200ms;}


/* -----------------------------------------------------------
SINGLE
----------------------------------------------------------- */
.single-meta {padding-bottom: 90px; padding-top: 90px;}
.single-meta h2{line-height: 1; font-size: 3rem; margin-bottom: 15px;text-align: left;}
.single-meta h3{line-height: 1; font-size: 1.4rem; margin-bottom: 10px; color:#999; font-weight: normal;text-align: left;}
.single-meta .yyyy{font-size: 2rem; margin-top: 30px;letter-spacing: 0.1rem; margin-bottom: 30px}
.single-meta .label{margin-top: 15px;color:#999;}
.single-meta .tag{border: 1px solid #666; border-radius: 2px;margin-right: 5px;padding: 3px 5px;font-size: 0.9rem;}

.content h2{text-align: center;font-size:1.5rem;width:80%;margin: 120px auto 30px; letter-spacing: 0.1rem;}
.content h3{width:80%; margin: 60px auto 10px;}
.content p{width:80%; margin: 0 auto 10px;}
.content ul{width:80%; margin: 0 auto 10px;}
.content .wp-block-quote{width:80%; margin: 20px auto 10px;}
.content figure{margin: 60px 0;}
.content .wp-block-video{height:360px;}
.content .wp-block-video video{height: 100%; height: 360px;}

ul.circle{padding-left: 20px;}
ul.circle li{list-style: disc; margin-bottom: 5px;}

ul.number{padding-left: 20px;}
ul.number li{list-style:decimal; margin-bottom: 5px;}

.content .wp-block-quote{position: relative; border-left:solid 5px #FFF;  padding: 10px 20px 15px 20px; background: rgba(0,0,0,0.03); font-size:1.4rem;}
.content .wp-block-quote::before {content:'How might we..?';position: relative; width:100%; height: 36px; background:url(../img/common/quote.svg) no-repeat; background-size: 36px auto; background-position: left 0px top 0px; padding-left: 45px; padding-top: 15px;z-index: 1; font-size:0.8rem; }
.content .wp-block-quote p{padding: 20px 0 0 0; line-height: 1.35; width:100%;}
.content figcaption{font-size:0.8rem;color:#777;margin:0; padding:10px 0 0; line-height: 1.1;text-align: center;}

.wp-block-table.history tr{border-bottom: 1px solid #ccc;}
.wp-block-table.history table td,.wp-block-table.history table th{padding:15px 10px;}


.backto{ text-align:center; font-size:0.75rem; font-weight:bold; margin-bottom:100px;}
.wp-block-image{padding-bottom:80px; margin: 0 auto;}
.wp-block-embed-youtube{margin: 30px auto;text-align: center;}

/* -----------------------------------------------------------
COMMON
----------------------------------------------------------- */
.page_cover{ height: 300px;}
.page_cover h1{text-align: center; font-size: 2rem;}

/* -----------------------------------------------------------
ABOUT
----------------------------------------------------------- */
#about a{text-decoration: underline;}

/* -----------------------------------------------------------
CONTACT
----------------------------------------------------------- */
.wpcf7 label{width:100%;margin-bottom: 10px;}
.wpcf7-form-control-wrap {padding-top: 5px; display: block;}
.wpcf7 input { background:#fff; width: 100%;font-size: 1.2rem; padding: 10px 20px;transition : all 300ms;border: 2px solid #fff;;}
.wpcf7 input:hover{ background: #fcfcfc; border:2px solid #fcfcfc;}
.wpcf7 input:focus { border:2px solid #fcfcfc;border-bottom: 2px solid #ccc;outline: 0;}
.wpcf7 textarea { width:100%; font-size:1.2rem; height: 240px; border:none;  padding: 10px 20px;}
.wpcf7 textarea:focus {outline:0;background: #fcfcfc;}
.submitarea {text-align:center;}
.wpcf7 input[type="submit"]{background: #333; color:#fff;}


@media screen and (max-width: 767px) {
  body{line-height: 1.75; font-size:0.8rem;}
  /* -----------------------------------------------------------
  HEADER
  ----------------------------------------------------------- */
  .header_logo{ width:126px; height: 63px; display: block; margin:20px 10px 20px 20px}

  /* -----------------------------------------------------------
  SINGLE
  ----------------------------------------------------------- */
  .single-meta {padding-bottom: 60px; padding-top: 30px;}
  .single-meta h2{line-height: 1; font-size: 2rem; }
  .single-meta h3{line-height: 1; font-size: 1.2rem;}
  .single-meta .yyyy{font-size:1.35rem; margin-top: 10px;letter-spacing: 0.1rem;}
  .content h2{width:100%;margin: 90px auto 15px; font-size:1.35rem;}
  .content h3{width:100%; margin: 30px auto 10px; font-size:1.1rem;}
  .content p{width:100%; margin: 0 auto 10px;}
  .content ul{width:100%; margin: 0 auto 10px;}
  .content .wp-block-quote{width:100%; margin: 10px auto 10px;}
  .content figure{margin: 30px 0;}

}