@charset "UTF-8";
/*
Thema Name: my thema
Author: Kazuyuki Sato
Descriptin This is my orignal thema.
Version:1.0
*/

body	{
	font-family: "メイリオ","Hiragino Kaku Gothic Pro",sans-self,"ＭＳ Ｐゴシック";
}
blockquote{
	background-color: #cccccc;
}


 .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      background: url('<?php echo get_template_directory_uri(); ?>/images/hero_image.jpg') center center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3); /* 背景暗くして文字を読みやすく */
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 800pt;
      padding: 16pt;
    }

    .hero h1 {
      font-size: 36pt;
      margin-bottom: 16pt;
    }

    .hero p {
      font-size: 18pt;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 24pt;
      }
      .hero p {
        font-size: 14pt;
      }
    }


section{
	margin-top:20px;
	margin-bottom:100px;

}

.container{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	padding-left:15px;
	padding-right:15px;
}

.right{
	margin-left:auto;
}

/*記事*/
article{
	font-family: "メイリオ","ヒラギノ明朝",sans-self,"MS 明朝";
	font-size:12pt;
	line-height:1.5;
	margin-bottom:40px;
}
article	h2{
	margin:0;
	font-size:16pt;
	font-weight:normal;
	padding:10px 0 10px 10px;
	border-bottom:solid 1px #cccccc;
}

article h1 a{
	color:#000000;
	text-decoration:none;
}
article img{
	border:none;
	height:auto;
}
.aligncenter{
	display:block;
	margin-top:30px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}
.alignleft{
	float:left;
	margin-bottom:30px;
	margin-right:30px;
}
.alignright{
	float:right;
	margin-bottom:30px;
	margin-left:30px;
}



table,th,td {
	font-size:12pt;
	padding:0 0 0 0;
	border:solid 1px #cccccc;
}

.wp-caption{
	max-width:100%;
}
.wp-catption-test{
	margin:0;
	color:#666666;
	font-size:14px;
	text-align:center;
}

/*記事の付加情報*/
.postinfo{
	color: #000000;
	margin-top:15px;
	font-size:14px;
}
.postcat{
	color: #000000;
	text-decoration:none;
}
.postinfo .postcat{
	margin-left:20px;
}
/*前後の記事へのリンク*/
.pagenav a{
	padding:5px 10px;
	border:solid 1px #cccccc;
	border-radius:10px;
	color:#666666;
	font-size:12px;
	text-decoration:none;
}
.pagenav .old a{
	float:left;
}
.pagenav .new a{
	float:right;
}
.pagenav {
	overflow:hidden;
	margin:40px 0;
}

/*ヘッダー*/
header	{
	margin-bottom:40px;
	background-color: #d5d5d5;
	font-size:11pt;
	color:#000;
}
header a{
	color:#000;
	text-decoration:none;
}

/*フッター*/
footer{
	margin-top:50px;
	padding-top:14px;
	padding-bottom:14px;
	background-color: #d5d5d5;
	color:#ffffff;
	text-align:center;

}


/*サイト情報*/
.siteinfo{
	overflow:hidden;
	padding-top:14px;
	padding-bottom:14px;
	background-color:#ffffff;
	color:#4a5f7e;
}
.siteinfo a{
	color:#4a5f7e;
}
.siteinfo h1{
	float:left;
	margin:0;
	font-size:20px;
}
.siteinfo p{
	float:right;
	margin:0;
	margin-top:5px;
	font-size:12px;
}

/*ナビゲーション*/

nav{
	/*height:50px;*/
	text-align:center;
	margin-left: auto;
	margin-right: auto;

}
nav ul{
	display: table;
	list-style:none;
	margin-left: auto;
	margin-right: auto;
	font-size:14px;
	overflow:hidden;
}
nav ul li{
	display:table-cell;
	padding-left: 10px;
	padding-right: 10px;

}

nav li a{
	display:block;
	padding-top:15px;
	padding-bottom:10px;
}
nav li a:hover{
	color:#ff0000;
}

/*nav li.current-menu-item a{
	border-bottom-color:#e6cc1c;
}*/



/*メニュー*/
.blogmenu ul{
	margin:0;
	padding:10px;
	list-style:none;
}
.blogmenu .widget{
	margin-bottom:30px;
	padding:20px;
	background-color:#e8e8e8;
}
.blogmenu .widgettitle{
	margin-top:10px;
	margin-bottom:20px;
	border-right:5px solid #4e5f7e;
	color:#4a5f7e;
	font-size:14px;
}
.blogmenu li a{
	color:#666666;
	font-size:14px;
	text-decoration:none;
}
.blogmenu li a:hover{
	color:#000000;
        text-decoration:underline;
}
.blogmenu li {
	font-size:12px;
	color:#b6771c;
}

.blogmenu li .children {
	margin-left:10px;
}

.archive-title{
	margin-top:0;
	margin-bottom:40px;
	background-color:#eeeeee;
	font-size:14px;
	font-weight:normal;
}
.archive-title i{
	padding:15px;
	background-color:#4a5f7e;
	color:#ffffff;
}

/*comment-form*/
#respond p{
	margin-top:0;
	margin-bottom:20px;
	font-size:12px;
}
#respond label{
	font-size:14px;
}

#respond input,
#respond textarea{
	width:100%;
	padding:5px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-box-size:border-box;
}
#respond input[type="submit"]{
	width:200px;
	padding:10px;
	border:none;
	background-color:#e6cc1c;
	-web-kit-appearance:none;
	cursor:pointer;
}
#respond input[type="submit"]:hover{
	background-color:#ffaa00;
}

#navToggle {
  display:none; /*通常時は非表示にしておきます*/
	z-index:3;

  position:absolute; /*bodyに対しての絶対位置指定です*/
	right:5px;
	top:5px;
  /*width:30px;*/
  /*height:25px;*/

	width:25px;
	height:25px;
	text-align:center;
	font-size:12pt;

	border:solid 2px #999;
	border-radius: 10%;
	padding:10px;

  cursor:pointer;}
	#navToggle div {position:relative} /*spanの絶対位置指定の親にします*/

	#navToggle span {
    display:block;
    position:absolute; /*#navToggle div に対して*/
    width:100%;
    border-bottom:solid 3px #999;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out}

#navToggle span:nth-child(1) {top:10px;width:28px;}
#navToggle span:nth-child(2) {top:20px;width:28px;}
#navToggle span:nth-child(3) {top:30px;width:28px;}











/*レスポンシブの設定*/

@media(min-width:768px){

.container{
	display:table;
	max-width:1000px;
	overflow:hidden;
}
.contents{
	display:table-cell;
	width:65%;
	padding: 10px;
}
.blogmenu{
	display:table-cell;
	width:30%;
}
nav li{
	margin-right:40px;
}

}

@media(max-width:750px){

	.container{
		display:block;
		width: 100%;
	}
	.contents{
		display:block;
		width:100%;
	}
	.blogmenu{
		display:block;
		width:100%;
	}

header nav {
		position: absolute; /*bodyに対しての絶対位置*/
		z-index:2;
		right:0;
	  top: -551px; /*通常時はビュー外*/
		background-color: #000000;
		opacity: 0.7;

		width:100%;
	  padding:0 10px;
	  -webkit-transition:.5s ease-in-out; /*transitionで動きを*/
	  -moz-transition:.5s ease-in-out;
	  transition:.5s ease-in-out;
	  text-align:left
}



	nav ul{
		display: block;
		list-style:none;
		margin:0;
		padding:0;
		font-size:14px;
		overflow:hidden;
	}
	nav ul li{
		color #fff;
		display:block;
	}
	nav a{
		color: #fff;
	}

	nav a:hover{
		color: #fff;
	}



	#navToggle {display:table}


	/* Click Toggle(Button) */
	/*ここから jQueryで header要素に付けた「.openNav」を利用します*/
	/*.openNavが付いた要素内のボタン（#navToggle）内のspanへの指定*/
	/*最初のspanをマイナス45度に*/
	.openNav #navToggle span:nth-child(1) {
	    top: 20px;
	    -webkit-transform:rotate(-45deg);
	    -moz-transform:rotate(-45deg);
	    transform:rotate(-45deg)}

	/*2番目と3番目のspanを45度に*/
	.openNav #navToggle span:nth-child(2),
	.openNav #navToggle span:nth-child(3) {
	    top: 20px;
	    -webkit-transform:rotate(45deg);
	    -moz-transform:rotate(45deg);
	    transform:rotate(45deg)}

	/*header menu*/
	/*.openNavが付いた要素の中のnavを 縦方向に351px移動（=表示される）*/
	.openNav nav {
	    -moz-transform: translateY(651px);
	    -webkit-transform: translateY(651px);
	    transform: translateY(651px)
	}




}