/*
Theme Name: Twenty Twelve Child
Theme URI: https://wordpress.org/themes/twentytwelve/
Author: the WordPress team
Author URI: https://wordpress.org/
Template:   twentytwelve
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


body { background: white; } 
body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Helvetica, Arial, sans-serif;
}

hgroup {
  display: table;
  width: 100%;
}

hgroup > * {
  display:table-cell;
}

.header_navigation > ul,  .header_navigation > ul > li{
	display: inline-block;
}

.header_navigation > ul,  .header_navigation > ul > li > a,
.header_navigation > ul,  .header_navigation > ul > li > a:visited
{
  color: #5484C8;
  display: block;
  padding: .4em ;
  text-decoration: none;
}

.main-navigation li:hover,
.main-navigation li:focus {
  background-color: rgba(255,255,255,0.3);
}

.header_navigation > ul,  .header_navigation > ul > li > a > *
{
	padding-right: 8px;
}

.main-navigation{
	margin-top: 0px;
}

.menu-menu-1-container{
  background: #4d5ba3;
}

.menu-menu-1-container > ul > li > a {
  color: white;
  font-size:18px;
  display: block;
  padding-left: 20px;
  padding-right: 20px;
}

.menu-menu-1-container > ul > li > a:visited,
.menu-menu-1-container > ul > li > a:hover {
  color: white;
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
    display: none;
}

.nav-menu {
  box-sizing: border-box;
  /* padding-left: 30px; */
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
}
.nav-menu > li {
  margin: 0;
}
.site-header {
  padding-bottom: 0;
}

.mobile_menu {
  display: none;
}

/*----------------------------------------------------------------------------*/
#nav-wrap{
  display: none;
}
/*----------------------------------------------------------------------------*/

/* - blog, archive, category ------------------------------------------------ */
.custom_archive { display: flex; }

#archive-content { width: 77%; }

/* - in article ------------------------------------------------------------- */
.mobile-thumbnail {
  display: none;
  position: relative;
  box-sizing: border-box;
}

.custom-article-wrap { display: flex; }

.custom-article-content {
  box-sizing: border-box;
  padding-left: 2em;
  width: 78%;
}

.thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21%;
}

.thumbnail a {
  position: relative;
  display: flex;
  box-sizing: border-box;
  max-width: 150px;
  max-height: 150px;
  width: 100%;
  padding-top: 100%;
}

.thumbnail a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.thumbnail span.default-thumbnail,
.mobile-thumbnail span.default-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #ffc060;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

/* - pagenation ------------------------------------------------------------- */
#page-select {
  text-align: center;
  margin-bottom: 3em;
}

.wp-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wp-pagenavi > span,
.wp-pagenavi > a {
  width: 1.5em;
  line-height: 1.5em;
  margin: 0.3em;
}

.wp-pagenavi > a.first,
.wp-pagenavi > a.last {
  width: 3.5em;
}

/* - sidebar ---------------------------------------------------------------- */
#archive-sidebar {
  width: 22%;
  box-sizing: border-box;
  padding-left: 2em;
}

#archive-sidebar h2 { font-size: 1.2em; }

#sidebar-navi > div { margin-bottom: 2em; }

#category-list li { padding: 0.5em 0.5em 0.5em 1em; }

#archive-select select {
  margin-top: 0.5em;
  width: 100%;
}

.newer-posts li { margin-bottom: 0.7em; }

.newer-posts li a {
  display: flex;
  align-items: center;
}

.newer-posts a span.img {
  position: relative;
  display: flex;
  width: 20%;
  padding-top: 20%;
  height: 0;
}

.newer-posts a span.img span {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #ffc060;
}

.newer-posts a span.img span>b {
  line-height: 1.1em;
  color: white;
  transform:scale(0.5);
}

.newer-posts a span.newer_post_title {
  display: flex;
  width: 79%;
  padding: 0.5em;
  box-sizing: border-box;
  line-height: 1.2em;
}

.newer-posts a span.img img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: auto;
}

/* pc */
@media print, screen and (min-width: 961px) {
  .site-title > a:first-child > img {
	  height: 70px;
  }

    .header_navigation {
		text-align: right;
		width: 100%;
	    white-space: nowrap;
	    font-size: 20px;
    }

  #main {
		margin-left: 30px;
	}

  .sub_menu {
    float: left;
    width: 25%;
  }

  .menu-submenu-container ul,
  .sub_menu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
	}

  .sub_menu > ul > li {
    margin: 0;
    padding: 0;
	}

  .sub_menu > ul > li > a,
  .sub_menu > ul > li > a:visited
	{
    color: #5484C8;
    display: block;
    padding: .4em .8em;
    text-decoration: none;
    background: #fff;
    text-align: left;
    margin: .2em 0;
	}

  .menu-submenu-container ul > li > a:hover,
	.sub_menu > ul > li > a:hover
  {
    background: #eee;
	}

	.sub_content{
    float: left;
    width: 70%;
    position: relative;
    top: -50px;
  }

	.sub_content > * > .entry-title{
		margin-top: 0;
  }
}

@media print,screen and (min-width: 641px) and (max-width: 960px) {
  .site-title > a:first-child > img{
    height: 50px;
  }
  .wrapper {
    margin: 0 1em;
  }
}

@media print,screen and (max-width: 640px) {
  .site-title > a:first-child > img{
    height: 50px;
  }
  .wrapper {
    margin: 0 1.5em;
  }

  /* - blog, archive, category ---------------------------------------------- */
  .custom_archive { display: block; }

  #archive-content { width: 100%; }

  #archive-sidebar {
    width: 100%;
    padding-left: 0;
  }

  .newer-posts a span.img span>b {
    transform:scale(1);
    font-size: 3vw;
  }

  /* - in article ----------------------------------------------------------- */
  .thumbnail { display: none; }

  div.custom-article-wrap { display: block; }

  .custom-article-content {
    padding-left: 0;
    width: 100%;
  }

  .custom-article-content > header {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding-top: 15%;
    font-size: 2.5vw;
  }

  .mobile-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .entry-header .mobile-thumbnail img.wp-post-image {
    margin-bottom: 0;
    width: auto;
    height: auto;
  }

  .custom-article-content > header > h1 {
    box-sizing: border-box;
    padding-left: 1em;
    width: 83%;
  }

  .custom-article-content p.permalink { text-align: center; }

  /* - pagenation ----------------------------------------------------------- */
  .wp-pagenavi > span,
  .wp-pagenavi > a {
    margin: 0;
  }
}

@media print,screen and (max-width: 600px) {
  #page {
    padding: 0 1em;
  }
  .wrapper {
    margin: 0;
  }

  #main {
    overflow: hidden;
  }

  .header_navigation ul {
    text-align: center;
	}
  .menu-menu-1-container {
    margin-top: 0.5em;
  }
  .menu-menu-1-container > ul {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .main-navigation li {
    display: inline-block;
    text-align: center;
  }
  .main-navigation li > a {
    min-width: 4em;
  }
  .nav-menu {
    padding: 0.5em;
  }
  .main-navigation li {
    margin-top: 0;
    padding: 0;
  }
  .main-navigation li > a {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .new_article {
    padding-left: 0 !important;
    padding-right: 0.5em !important;
    border-left-width: 0.3em !important;
  }

  .new_article ul > li {
    margin-left: 2em !important;
  }

  /*----------------------------------------------------------------------------*/
  #masthead {
    background-color: white;
    position: sticky;
    top: 0;
    padding: 1.2em 0 0.7em 0.5em;
    border-bottom: solid 1px #4d5ba3;
    z-index: 9999;
  }

  .site-header h1.site-title {
    display: inline-block;
    margin-bottom: 0;
    max-width: 266px;
    max-height: 50px;
    width: 77%;
  }

  .site-title > a:first-child > img {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  .pc_menu {
    display: none;
  }

  .mobile_menu {
    display: block;
    background: #4d5ba3;
  }

  .mobile_menu ul {
    text-align: center;
	}

  .mobile_menu li {
    display: inline-block;
    text-align: center;
  }

  .mobile_menu ul > li > a {
    color: white;
    font-size:15px;
    display: block;
    padding: 0.7em 1em;
    min-width: 4em;
  }

  .mobile_menu ul > li > a:visited,
  .mobile_menu ul > li > a:hover {
    color: white;
  }

  #nav-wrap {
    position: absolute;
    top: 1.5em;
    right: 0;
    display: inline-block;
    background-color: white;
    border-radius: 0.5em;
    z-index: 999;
  }
  /*----------------------------------------------------------------------------*/
  .wp-block-table th,
  .wp-block-table td,
  .incont th,
  .incont td {
    display: block;
    box-sizing: border-box;
    padding-left: 0.7em !important;
  }

  .wp-block-table td:first-child,
  .incont th {
    background-color: #eee;
  }
}

.breadcrumbs {
    width: 980px;
    margin: 1em auto 0;
}
 
.breadcrumbs ul {
    display: table;
    font-size: 13px;
}
 
.breadcrumbs ul li {
    margin: 0 10px 0 0;
    font-size: 13px;
    float: left;
}
 
.breadcrumbs ul li:first-child::before {
    padding: 0 3px 0 0;
    content: " ";
    font-size: 14px;
}
 
.breadcrumbs ul li::before {
    padding: 0 10px 0 0;
    content: ">";
    font-size: 14px;
}

.breadcrumbs + #primary {
	margin-top: 24;
}

#post-5 > .entry-header {
  display: none;
}

/*----------------------------------------------------------------------------*/
#nav-drawer {
  position: relative;
  padding: 0.5em;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 23px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 23px;/*長さ*/
  border-radius: 1px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

#nav-content ul {
  padding-left: 0.5em;
}

/* #nav-content ul ul {
  padding-top: 0.5em;
} */

#nav-content ul li {
  font-size: 16px;
  padding: 0.7em;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.acd-check{
  display: none;
}

.acd-label{
  display: inline-block;
    font-size: 16px;
    width: 1.5em;
    margin-right: 0.2em;
    text-align: center;
    transform: rotate(-90deg);
}

/* アイコンのアニメーション */
.acd-check:checked + .acd-label {
  transform: rotate(0deg);
  animation: r1 0.3s linear;
}
@keyframes r1 {
  0%   { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
.acd-check:not(:checked) + .acd-label {
  transform: rotate(-90deg);
  animation: r2 0.3s linear;
}
@keyframes r2 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}

.acd-label {
  width: 1.5em;
}

.acd-label ~ .sub-menu{
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
}

.acd-check:checked + .acd-label ~ .sub-menu{
    height: auto;
    padding-top: 0.5em;
    opacity: 1;
    visibility: visible;
}

#nav-content svg {
  display: inline-block;
    width: 1.5em;
    margin-right: 0.5em;

}

/* 20201203 WordPressブログ専用　*/
#page {
  margin-top: 0;
  margin-bottom: 0;
}
#page>*:not(#main) {
    display: none;
}

/* 20210624 base64の画像の上下幅のレスポンシブ対応 */
.base64-image img {
	height: auto;
}