/*
 Theme Name:   wp1600 Child10
 Description:  クールでかっこいいWPテーマ Child10
 Author:       af-partner
 Author URI:   https://www.af-joho.com/
 Template:     wp1600
 Version:      16.0.0
 Tags:	２カラム,右サイドバー,左サイドバー,3カラムフッター,4カラムフッター,カスタムカラー,６色,カスタムメニュー,カスタムヘッダー,ブログ
*/

#wrapper {width: 100%; min-width: 1080px; border-width: 0;}

/* ヘッダー */
#header-inner {position: relative; width: 1080px; min-height: 4.4em; margin: 0 auto;}
#ptitle {float: none; margin: 0; padding: 10px 0 5px; text-align: center; color: #444; font-size: .9em; line-height: 1.2em; font-weight: normal;}
#pdes {padding-bottom: 1em; font-size: .8em; line-height: 1.2em; text-align: center; display: block;}

/* ヘッダーナビゲーション */
#gnav-btn {display :none;}
#gnav {width: 100%; margin: 0; border-width: 1px 0 ; border-style:  solid; background-color: #263238;;}
#gnav nav {max-width: 1080px; margin: 0 auto; padding: 0; position: relative; z-index: 1000;}
#gnav nav > ul { list-style-type: none; height: 40px; padding: 0; border-radius: 0;}
#gnav nav > ul > li {position: relative; float: left; width: 20%; height: 40px;  line-height: 40px; margin: 0; text-align: center; border-left: 1px solid rgba(255,255,255,0.3);}
#gnav nav > ul > li:last-child {border-right: 1px solid rgba(255,255,255,0.3);}
#gnav nav > ul > li .target{padding: 0 10px; display:inline-block; vertical-align: middle; line-height:1.2em;}
#gnav nav > ul > li a {display: block; color: #FFF; font-weight: 600; text-decoration: none; -webkit-transition: all 1s ease;  -moz-transition: all 1s ease;}
#gnav nav > ul > li > ul {position: absolute; top: 100%; left:  0; list-style: none; margin: 0;}
#gnav nav ul li ul li{margin: 0; overflow: hidden; height: 0; width: 150%; border-right: none; -webkit-transition: .15s; transition: .15s;}
#gnav nav ul li:last-child ul {left: -58%;}
#gnav nav ul li ul li a{padding: 0 1em; height: 40px; line-height: 40px; color: #FFF; text-align: left; background-color: rgba(255,255,255,0.1); border-bottom: 1px solid  rgba(255,255,255,0.3);  overflow: hidden;}
#gnav nav ul li ul li:first-child a {border-top: 1px solid rgba(255,255,255,0.3);}
#gnav nav .sub-menu .current-menu-item {border-bottom: none;}
#gnav nav ul li:hover ul li {overflow: hidden; height: 40px;}
.fixed {position: fixed; top: 0; width: 100%; padding-bottom: 0; z-index: 10000;}

/* ソーシャルボタン等 */
#header-social-button {position: absolute; top: 50%; right: 0; transform: translateY( -50% ); display: block; z-index: 200;}
#header-social-button a {font-size: 30px; text-decoration: none;  color: #AAA; opacity: 0.4;}
#header-social-button a:hover {text-decoration: none; opacity: 1.0;}
#gnav-social-button {display: none;}

/* ヘッダー画像 */
#mainvisual {position: relative; width: 100%; height: calc( 800 / 2400 * 100vw );  border-width: 0 0 3px ; border-style:  solid; overflow: hidden; z-index: 10;}

/* スライダーー画像 */
.h-slide .img {position: relative; margin: 0; padding: 0; z-index: 10;}
.h-slide img{ width: 100%; height: auto;}
.h-slide .h-slide-inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px 60px; border-radius: 10px; z-index: 10000;}
.h-slide-inner .slide-title {font-size: 2.4em; font-weight: 600; line-height:1.4em; color: #FFF; text-align: center; animation-name: title-in; animation-duration: 3s; white-space: pre-wrap;}
.h-slide-inner .slide-des {margin-top: 1em; font-size: 1.0em; font-weight: 500; line-height:1.6em; color: #FFF; text-align: center}
.h-slide-inner a {color: #FFF;}
.h-slide-inner a:hover{color: #FFF; text-decoration: ;} 

/* コンテンツ */
#containar {max-width: 1080px; margin: 0 auto; padding-top: 15px;}
#contents {float: left;width: 740px; margin-bottom: 20px; padding: 0;  background: none; border-radius: 0;}
.single #contents, .page #contents {padding: 0.5em; background-color: #FFF;  border-radius: 4px;}
.single #contents > article, .page #contents > article {padding: 0 0.5em 1em;}

/* 記事リスト表示 */
#post-list {margin: 0 0 15px; padding: 0; letter-spacing: -.4em;}
#post-list article {display: inline-block; vertical-align: top; width: 50%; margin: 0; padding: 0 10px 20px; letter-spacing: 0; overflow: hidden; opacity: 0; border-bottom: none;}
#post-list article .inner {position: relative; padding-bottom: 2em; background-color: #FFF; border: 1px solid #DDD;}
#post-list article .img-set {position: relative; max-width: 800px; margin: 0 auto; border: none; overflow: hidden;}
#post-list article .inner h3 { margin: 0; padding: .3em 0.8em .5em; font-size: 1.2em; font-weight: 600; line-height: 1.4em; color: #444;}
#post-list h3 a {color: #444;}
/* 続きを読む */
#post-list .next {position: absolute; bottom: 0; right: 0; font-size: 1.0em; text-align: right; padding-top: 0;}
#post-list .next a {margin: 0; padding: 0.4em 1em; font-weight: 500; color: #333; text-decoration: none; background-color: #EEE;}
#post-list .next a {-webkit-border-radius: 0; border-radius: 0;}
#post-list .next a:hover {color: #FFF;}
#post-list article:nth-child(1) {animation: post-in 0.5s ease 0.2s 1 forwards; -webkit-animation: post-in 0.5s ease 0.2s 1 forwards;}
#post-list article:nth-child(2) {animation: post-in 0.5s ease 0.4s 1 forwards; -webkit-animation: post-in 0.5s ease 0.4s 1 forwards;}
#post-list article:nth-child(3) {animation: post-in 0.5s ease 0.6s 1 forwards; -webkit-animation: post-in 0.5s ease 0.6s 1 forwards;}
#post-list article:nth-child(4) {animation: post-in 0.5s ease 0.8s 1 forwards; -webkit-animation: post-in 0.5s ease 0.8s 1 forwards;}
#post-list article:nth-child(5) {animation: post-in 0.5s ease 1.0s 1 forwards; -webkit-animation: post-in 0.5s ease 1.0s 1 forwards;}
#post-list article:nth-child(6) {animation: post-in 0.5s ease 1.2s 1 forwards; -webkit-animation: post-in 0.5s ease 1.2s 1 forwards;}
#post-list article:nth-child(7) {animation: post-in 0.5s ease 1.4s 1 forwards; -webkit-animation: post-in 0.5s ease 1.4s 1 forwards;}
#post-list article:nth-child(8) {animation: post-in 0.5s ease 1.6s 1 forwards; -webkit-animation: post-in 0.5s ease 1.6s 1 forwards;}
#post-list article:nth-child(9) {animation: post-in 0.5s ease 1.8s 1 forwards; -webkit-animation: post-in 0.5s ease 1.8s 1 forwards;}
#post-list article:nth-child(10) {animation: post-in 0.5s ease 2.0s 1 forwards; -webkit-animation: post-in 0.5s ease 2.0s 1 forwards;}
#post-list article:nth-child(11) {animation: post-in 0.5s ease 2.2s 1 forwards; -webkit-animation: post-in 0.5s ease 2.2s 1 forwards;}
#post-list article:nth-child(12) {animation: post-in 0.5s ease 2.4s 1 forwards; -webkit-animation: post-in 0.5s ease 2.4s 1 forwards;}
@keyframes post-in {
 0%{ opacity: 0; transform: translateY(100px);} 
100%{ opacity: 1; transform: translateY(0);}
}
@-webkit-keyframeskeyframes post-in {
 0%{ opacity: 0; transform: translateY(100px);} 
100%{ opacity: 1; transform: translateY(0);}
}

/* 記事リスト表示(アーカイブ) */
#post-list-cat{margin: 0 0 15px; padding: 0;}
#post-list-cat article {position: relative; height: 202px; margin-bottom: 15px ; padding:  0; background-color: #FFF;}
#post-list-cat article {border-bottom: none; border: 1px solid #DDD;}
#post-list-cat article h3 {padding: 10px; font-size: 1.8em; font-weight: 600; line-height: 1.2em; text-align: justify; text-justify: inter-ideograph;}
#post-list-cat article .img-set {float: left; clear: both; margin-right: 10px; max-width: 300px; overflow: hidden;}
#post-list-cat .img-set {border: none;}
#post-list-cat article p {padding: 0 1em; font-size: 0.9em; line-height: 1.5em; text-align: justify; text-justify: inter-ideograph; overflow: hidden; }
#post-list-cat h3 a {color: #333;}
/* 続きを読む */
#post-list-cat .next {position: absolute; bottom: 0; right: 0; margin: 0 ; padding: 0; font-size: 0.9em;}
#post-list-cat .next {text-align: left;}
#post-list-cat .next a {margin: 0; padding: 5px 10px; font-weight: 500; color: #444; text-decoration: none; background-color: #EEE;}
#post-list-cat .next a {-webkit-border-radius: 0; border-radius: 0;}
#post-list-cat .next a:hover {color: #FFF;}
#post-list-cat article:nth-child(1) {animation: cat-in 0.5s ease 0.2s 1 forwards; -webkit-animation: cat-in 0.5s ease 0.2s 1 forwards;}
#post-list-cat article:nth-child(2) {animation: cat-in 0.5s ease 0.4s 1 forwards; -webkit-animation: cat-in 0.5s ease 0.4s 1 forwards;}
#post-list-cat article:nth-child(3) {animation: cat-in 0.5s ease 0.6s 1 forwards; -webkit-animation: cat-in 0.5s ease 0.6s 1 forwards;}
#post-list-cat article:nth-child(4) {animation: cat-in 0.5s ease 0.8s 1 forwards; -webkit-animation: cat-in 0.5s ease 0.8s 1 forwards;}
#post-list-cat article:nth-child(5) {animation: cat-in 0.5s ease 1.0s 1 forwards; -webkit-animation: cat-in 0.5s ease 1.0s 1 forwards;}
#post-list-cat article:nth-child(6) {animation: cat-in 0.5s ease 1.2s 1 forwards; -webkit-animation: cat-in 0.5s ease 1.2s 1 forwards;}
#post-list-cat article:nth-child(7) {animation: cat-in 0.5s ease 1.4s 1 forwards; -webkit-animation: cat-in 0.5s ease 1.4s 1 forwards;}
#post-list-cat article:nth-child(8) {animation: cat-in 0.5s ease 1.6s 1 forwards; -webkit-animation: cat-in 0.5s ease 1.6s 1 forwards;}
#post-list-cat article:nth-child(9) {animation: cat-in 0.5s ease 1.8s 1 forwards; -webkit-animation: cat-in 0.5s ease 1.8s 1 forwards;}
#post-list-cat article:nth-child(10) {animation: cat-in 0.5s ease 2.0s 1 forwards; -webkit-animation: cat-in 0.5s ease 2.0s 1 forwards;}
#post-list-cat article:nth-child(11) {animation: cat-in 0.5s ease 2.2s 1 forwards; -webkit-animation: cat-in 0.5s ease 2.2s 1 forwards;}
#post-list-cat article:nth-child(12) {animation: cat-in 0.5s ease 2.4s 1 forwards; -webkit-animation: cat-in 0.5s ease 2.4s 1 forwards;}
@keyframes cat-in {
 0%{ opacity: 0; transform: translateY(100px);} 
100%{ opacity: 1; transform: translateY(0);}
}
@-webkit-keyframeskeyframes cat-in {
 0%{ opacity: 0; transform: translateY(100px);} 
100%{ opacity: 1; transform: translateY(0);}
}

/* カテゴリー等表示 */
.p-cate {position: absolute; bottom: auto; top: 0; right: 0; margin: 0; padding: .5em 1em; font-size: 0.8em; line-height: 1.2em; color: #FFF; background-color: #034F45;}
.a-cate {margin: 0; padding: .2em 1em 0.5em; text-align: right; font-size: 0.8em; line-height: 1.2em;}
.p-cate a {color: #FFF;}
.p-cate a:hover{color: #FFF; text-decoration: underline;}
.p-cate:before, .a-cate:before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f07c'; margin-right: 2px; vertical-align: middle;}
.k-date {padding-left: 1em;}
.k-date:before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f274'; margin-right: 2px; vertical-align: middle;}
#top-post-list .p-cate, #sub-post-list .p-cate{padding-left: 0;}
.p-list .p-cate{font-size: .78em; line-height: 1.2em;}

/* 公開日等表示 */
.post-date {float: none; width: auto; height: auto; border-radius: 0;}
.post-date {position: absolute; bottom: 0; left 0; margin: 0; padding: .5em 1em; font-size: 0.9em; font-weight: 600; line-height: 1.4em; }
#posts-date {padding: 5px 10px; font-size: 0.8em; font-weight: bold; font-style: italic; text-align: right;}

/* ページナビ */
.wp-pagenavi {padding-bottom: 20px; letter-spacing: 0;}

/* サイドバー */
.sidebar-wrapper {margin-bottom: 20px; padding: 0; background-color: #FFF; border-radius: 0; border-width: 0 1px 1px 1px; border-style: solid; border-color: #DDD;}
.sidebar-wrapper h4 {padding: 0.3em 5px 0.2em 0.5em; font-size: 1.05em; line-height: 1.5em; color: #FFF; font-weight: 500; border-radius: 4px 4px 0 0;}
.sidebar-wrapper ul {border-bottom: none;}
.sidebar-wrapper ul li {border-top: solid 1px #DDD;}

/* フッター */
footer {background-color: #263238;}

/*ピックアップ記事 */
.pickup-post {margin-top: 10px; padding: 0 10px; overflow: hidden;}

/*人気記事 */
.rank-post {margin-top: 10px; padding: 0 10px; overflow: hidden;}


/* ------ ～ 1100px ------ */
@media screen and (max-width: 1100px) {
  .post-date {margin: 0;}
}

/* ------ ～ 979px ------ */
@media screen and (max-width: 979px) {
  #wrapper {min-width: 0;}
  /*  ヘッダー   */
  #header-inner {width: 100%;}
  #ptitle {padding-left: 10px;}
  /* ヘッダーナビゲーション */
  #gnav {width: 100%; margin-left: 0;}
  /* パンくずリスト */
  #plist .plist-inner {width: 100%;}
  /* ヘッダー画像 */
  #mainvisual {width: 100%; height: calc( 800 / 2400 * 100vw );}
  #mainvisual-inner {padding: 20px;  min-width: 60%; }
   /* スライダー */
  #slidevisual {min-width: 0; }
  .h-slide .h-slide-inner {padding: 20px;  min-width: 60%; }
  /* コンテンツ */
  #containar {width: 94%; margin: 0 auto;}
  #contents {width: 100%;}
  /*  サイドバー  */
  #sidebar {float: none; width: 100%;	margin: 0 auto; letter-spacing: -.4em; overflow: hidden;}
  #sidebar-01, #sidebar-02 {display: inline-block; vertical-align: top; width: 50%; margin: 0 0 10px; padding: 5px; letter-spacing: 0;}
}

/* ------ ～ 767px ------ */
@media screen and (max-width: 767px) {
  /*  ヘッダー部  */
  #ptitle {float: none; text-align: center; display: block;}
  #header-social-button {display: none;}
  #mob-social-button {display: block;} 
  /*  ヘッダーナビゲーション  */
  #gnav-btn {position: absolute; top: 6px; right: 10px; display: block; z-index: 10000;}
  #gnav-btn a {display: block; width: 50px; height: 50px; padding-top: 5px; line-height: 20px; font-size: 20px; text-align: center; text-decoration: none; border: 1px solid #CCC; background-color: #FFF; -webkit-border-radius: 5px;	border-radius: 5px;}
  #gnav-btn a .txt {font-size: 12px;} 
  #gnav {width: 100%; max-width: 100%; margin: 0; font-size: 100%; z-index: 9999; display: none; border: none;}
  #gnav nav {width: 100%;  margin: 0; padding: 0; position: static;}
  #gnav nav ul {list-style-type: none; height: auto; border-bottom: 1px solid #CCC;}
  #gnav nav ul  li {position: relative; float: none; width: 100%!important; height: auto; margin: 0 ; text-align: left; border-right: none; overflow: hidden;}
  #gnav nav li:last-child {border-right: none;}
  #gnav nav  ul  li a {display: block; padding: 0 3em 0 1em; color: #333!important; font-weight: normal; height: 3em; line-height: 3em; text-align: left; text-decoration: none; background-color: rgba(255,255,255,0.4); border-top: 1px solid #CCC;}
  #gnav nav  ul  li  ul {position: static; width: 100%; list-style: none; margin: 0; border-bottom: none!important;}
  #gnav nav > ul > li:last-child ul li {left: 0;}
  #gnav nav  ul li  ul li {margin: 0; width: 100%; height: 3em; overflow: hidden;}
  #gnav nav  ul  li  ul li a{padding: 0 3em 0 2em; height: 3em; line-height: 3em; text-align: left; font-size: 100%; font-weight: normal ; border-bottom: none; border-color: #CCC!important; background-color: #FFF; overflow: hidden;}
  #gnav nav  ul  li:hover {border-bottom: none;}
  #gnav nav  ul  li:hover >a {color: #333!important; background-color: #EFEFEF!important;}
  #gnav nav  ul  li  ul li:hover a {color: #333!important; background-color: #EFEFEF!important;  border-bottom: none;}
  #gnav nav  ul  li:hover ul li{overflow: visible; height: 3em; border-top: none;}
  #gnav nav  ul  li ul li:hover >a {color: #C06; background-color: #EFEFEF;}
  #gnav nav .current-menu-item, #gnav nav .current-menu-parent  {border-bottom: none;background-color: #FFF;}
  .fixed {position: static;}
  /* ヘッダー画像 */
  #mainvisual {width: 100%; height: calc( 1200 / 2400 * 100vw );}
  #mainvisual-inner {padding: 20px;  min-width: 60%; }
  #site-title {font-size: 2.0em;}
  #site-des {font-size: 0.9em;}
  /* スライダー */
  .h-slide .h-slide-inner {padding: 20px;  min-width: 60%; }
  .h-slide-inner .slide-title  {font-size: 2.0em;}
  .h-slide-inner .slide-des {font-size: 0.9em;}
  /*  注目記事表示  */
  #at-post-list article h4{position: absolute; top: 80%; left: 0; margin: 0; padding: 0 15px; font-size: 92%; color: #FFF; z-index: 600;}
  /*  フッター  */
  #footer-inner2 .f-left {width: 47%;}
  #footer-inner2 .f-center {width: 47%;}
  #footer-inner2 .f-right {width: 47%;}
}

/*  ～479px  */
@media screen and (max-width: 479px) {
  /*  ヘッダー部  */
  #pdes {display: none;}
  /* コンテンツ */
  #containar {width: 92%; margin: 0 auto;}
  .single #contents > article { padding: 0 0 1em;}
  .alignleft, .alignright {float: none; text-align: center; margin: 0 auto; padding: 0; display: block;}
  /* ヘッダー画像 */
  #mainvisual-inner {padding: 20px;  min-width: 80%; }
  #site-title {font-size: 1.5em;}
  #site-des {font-size: 0.8em;}
  /* スライダー */
  .h-slide .h-slide-inner {padding: 20px;  min-width: 80%; }
  .h-slide-inner .slide-title  {font-size: 1.5em;}
  .h-slide-inner .slide-des {font-size: 0.8em;}
  /* 記事リスト表示 */
  #post-list {padding: 10px 0;} 
  #post-list article {width: 100%; padding: 0 0 20px;}
  #post-list-cat h3,  #post-list-cat article h3 {font-size: 1.25em;}
  #post-list p, #post-list-cat p {padding: 0;}
  #post-list-cat article {height: auto; padding-bottom: 1.5em;}
  #post-list-cat article .img-set {float: none; clear: both; margin-right: 0; max-width: 100%;}
  /*  関連記事リスト属性  */
  #related-posts{padding: .5em;}
  /*  関連記事リスト属性  */
  #related-posts{padding: .5em;}
  #related-posts  article .img-set {float: none;  margin-right: 0; max-width: 100%;}
  #related-posts  article h5 {margin: 10px 0; font-size: 1.2em;}
  /*  サイドバー  */
  #sidebar-01, #sidebar-02 {padding: 0;}
  /*  フッター  */
  #footer-inner2 {width: 100%; padding: 0!important;}
  #footer-inner2 .f-left, #footer-inner2 .f-center, #footer-inner2 .f-right {padding: 0 10px; width: 100%;}
  #footer-inner2 .f-01, #footer-inner2 .f-02, #footer-inner2 .f-03, #footer-inner2 .f-04 {padding: 0 10px; width: 100%;}  
  #footer-inner2 .textwidget { padding: 15px;}
  .footer-wrapper h4 {position: relative;margin: 0.6em 0;}
  .footer-wrapper ul > li {padding: 5px 0 5px 1.3em;}
  .footer-wrapper ul > li:before {top: 5px;}
  .footer-wrapper .tagcloud {padding: 10px;}
}