/*
Theme Name: HATONOMORI
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen 

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.
*/

/*[共通設定]------------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
list-style-type: none;
}

body{
	font-size	:	13px;
	line-height	:	1.7;
	color	:	#231815;
 -webkit-text-size-adjust: 100%;
	box-sizing: border-box;
}

.page-template-default{
	line-height	:	1.7;
}

#wrap{
	max-width : 935px;
	margin : 0 auto;
}

a:hover {
        text-decoration: underline;
}

/* タイトル */
/*------------------------------------------------------------------------------*/
h2.title{
	width	:	100%;
	margin	:	0px 0px 15px 0px;
}
h3.title{
	width	:	100%;
	margin	:	0px 0px 15px 0px;
}
h4.title{
	padding	:	8px 0px 8px 30px;
	background-repeat	:	no-repeat;
	background-position	:	left center;
	line-height	:	1;
	font-size	:	16px;
	color	:	#fff;
}
h4.title,x:-moz-any-link{
	padding	:	9px 0px 8px 30px;
}
h4.title.pink{
	background-image	:	url("../images/h4_pink.jpg");
}
h4.title.blue{
	background-image	:	url("../images/h4_blue.jpg");
}
h4.title.orange{
	background-image	:	url("../images/h4_orange.jpg");
}
h4.title.green{
	background-image	:	url("../images/h4_green.jpg");
}
h5.title{
	font-weight	:	bold;
}

/* align */
/*------------------------------------------------------------------------------*/
.justify{
	text-align	:	justify;
}
.alignC{
	text-align	:	center;
}
.alignR{
	text-align	:	right;
}
.alignL{
	text-align	:	left;
}
.verM{
	vertical-align	:	middle;
}
.verT{
	vertical-align	:	top;
}
.verB{
	vertical-align	:	bottom;
}


/* margin */
/*------------------------------------------------------------------------------*/
.mB5{
	margin-bottom	:	5px;
}
.mB10{
	margin-bottom	:	10px;
}
.mB15{
	margin-bottom	:	15px;
}
.mB20{
	margin-bottom	:	20px;
}
.mB30{
	margin-bottom	:	30px;
}
.mB35{
	margin-bottom	:	35px;
}
.mB40{
	margin-bottom	:	40px;
}

.mT5{
	margin-top	:	5px;
}
.mT10{
	margin-top	:	10px;
}
.mT15{
	margin-top	:	15px;
}
.mT30{
	margin-top	:	30px;
}

/* padding */
/*------------------------------------------------------------------------------*/
.pdT3{
	padding-top	:	3px;
}
.pdT5{
	padding-top	:	5px;
}
.pdT10{
	padding-top	:	10px;
}
.pdT15{
	padding-top	:	15px;
}
.pdT20{
	padding-top	:	20px;
}
.pdT25{
	padding-top	:	25px;
}
.pdT30{
	padding-top	:	30px;
}

.pdB3{
	padding-bottom	:	3px;
}
.pdB5{
	padding-bottom	:	5px;
}
.pdB10{
	padding-bottom	:	10px;
}
.pdB15{
	padding-bottom	:	15px;
}
.pdB20{
	padding-bottom	:	20px;
}
.pdB25{
	padding-bottom	:	25px;
}
.pdB30{
	padding-bottom	:	30px;
}

.pdR5{
	padding-right	:	5px;
}
.pdR7{
	padding-right	:	7px;
}
.pdR10{
	padding-right	:	10px;
}
.pdR15{
	padding-right	:	15px;
}
.pdR20{
	padding-right	:	20px;
}
.pdR25{
	padding-right	:	25px;
}
.pdR30{
	padding-right	:	30px;
}

.pdL5{
	padding-left	:	5px;
}
.pdL10{
	padding-left	:	10px;
}
.pdL15{
	padding-left	:	15px;
}
.pdL20{
	padding-left	:	20px;
}
.pdL25{
	padding-left	:	25px;
}
.pdL30{
	padding-left	:	30px;
}


/* line-height */
/*------------------------------------------------------------------------------*/
.lH170{
	line-height	:	170%;
}


/* font-size */
/*------------------------------------------------------------------------------*/
.fs15{
	font-size	:	15px;
}
.fs16{
	font-size	:	16px;
}
.fs18{
	font-size	:	18px;
}

small{
	font-size	:	11px;
}

strong {
	font-weight: bold;
}


#wrap{
	max-width : 935px;
	padding: 0 15px;
	margin : 0 auto;
}


@media screen and (max-width: 1000px) {
#wrap{
	max-width : 100%;
}
}


/*[ヘッダー]------------------------------------------------------------------------------*/
header {
padding: 40px 0;
}

#top {
margin: 0 0 25px 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
}

#top h1 {
	width: 100%;
max-width: 180px;
} 

#top a {
display: block;
}

#info {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
font-size: 13px;
}

#info #contact {
margin: 0 10px 0 0;
}

#info #contact,
#info #sns {
display: -webkit-flex;
display: flex;
}

#info #contact li a img {
max-width: 25px;
}

#info #contact li a,
#info #sns li a {
transition: 0.3s;
}

#info #contact li a:hover,
#info #sns li a:hover {
opacity: 0.5;
}

#info #contact li:first-child {
margin: 0 10px 0 0;
}

#info #sns li:first-child {
margin: 0 10px 0 0;
}

#info #sns li a img {
max-width: 25px;
}

/*グローバルナビ*/
header nav {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
position: relative;
z-index: 10;
}

header nav ul {
width: 100%;
padding: 10px;
/* border-top: 1px solid #231815; */
border-bottom: 1px solid #231815;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}

header nav ul li a {
font-size: 13px;
color	:	#231815;
line-height: 1;
text-decoration: none;
transition: 0.3s;
}

header nav ul li a:hover {
opacity: 0.5;
text-decoration: none;
}

header nav ul li:last-child {
margin: 0 0 0 0;
}

#ex_menu {
display: none;
}

#toggle {
display: none;
position: absolute;
right: 15px;
top: 15px;
}

.hide {
opacity: 1;
visibility: visible;
}

/*ハンバーガー*/
#trigger {
position: relative;
width: 30px;
height: 20px;
display: block;
transition: 0.3s;
}

#trigger span {
width: 100%;
height: 4px;
display: block;
position: absolute;
left: 0;
transition: 0.3s;
background-color: #000;
}
    
#trigger span:nth-of-type(1) {
top: 0;
}
    
#trigger span:nth-of-type(2) {
top: 8px;
}
    
#trigger span:nth-of-type(2)::after {
width: 100%;
height: 4px;
position: absolute;
content:  '';
background-color: #000;
transition: 0.2s;
}
    
#trigger span:nth-of-type(3) {
bottom: 0;
}
   
#trigger.active span:nth-of-type(1) {
transform: translateY(8px) scale(0);
}
    
#trigger.active span:nth-of-type(2) {
transform: rotate(-45deg);
}
    
#trigger.active span:nth-of-type(3) {
transform: translateY(-8px) rotate(45deg);
}
    
.animation {
transition: 0.3s;
}

@media screen and (max-width: 1000px) {
header {
padding: 15px 0 40px 0;
}

#top {
margin: 0 0 0 0;
display: block;
}

#top h1 {
width: 200px;
margin: 0 auto 15px auto;
} 

#info {
font-size: 12px;
flex-direction: column;
}

#info #contact, 
#info #sns {
display: none;
}

/*グローバルナビ*/
header nav {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
}

header nav ul {
padding: 0;
margin: 0 auto;
border-top: none;
border-bottom: none;
display: -webkit-flex;
-webkit-flex-direction: column;
flex-direction: column;
text-align: center;
}

header nav ul li {
line-height: 2.5;
}

#ex_menu {
margin: 15px 0 0 0;
display: block;
}

#ex_menu span {
display: block;
}

#ex_menu div {
display: flex;
justify-content: center;
margin: 25px 0 0 0;
}

#ex_menu div span img{
width: 30px;
margin: 0 10px;
} 

#toggle {
width: 30px;
display: block;
z-index: 20;
}

.hide {
opacity: 0;
visibility: hidden;
overflow: hidden;
}
}



/*[グローバルメニュー]------------------------------------------------------------------------------*/
#g_menu{
	width : 100%;
	height : 20px;
	background-image : url(/images/navi_on.jpg);
	background-repeat : repeat-x;
	background-position	:	left center;
	padding-top: 9px;
	padding-bottom: 9px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #231815;
	border-bottom-color: #231815;
	margin-bottom: 40px;
}
#g_menu ul li{
	float : left;
	height: 20px;
	width: 150px;
}
#g_menu ul li a{
	display:block;
}
#g_menu ul li a:hover {
	background-color:transparent;
}
#g_menu ul li a:hover img{
	visibility:hidden;
}



ul.accordion {
	width : 100%;
	height : 20px;
	background-image : url(/images/navi_on.jpg);
	background-repeat : repeat-x;
	background-position	:	left center;
	padding-top: 9px;
	padding-bottom: 9px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #231815;
	border-bottom-color: #231815;
	margin-bottom: 40px;
}
ul.accordion a {
	display:block;
	text-decoration:none;
	color:#333;
	font-weight:bold;
}
ul.accordion span {
	display:block;
	color:#333;
	font-weight:bold;
}
ul.accordion ul { display:none;}
ul.accordion > li {
	float: left;
	width: 150px;
}
ul.accordion > li > p {
	cursor:pointer;
        line-height: 2.5;
}
ul.accordion > li > p span {
}
ul.accordion > li > p span.open {
}
ul.accordion > li > ul {
	position: absolute;
	z-index: 100;
	left: auto;
	top: 125px;
}
ul.accordion > li > ul > li {
	border-bottom:1px solid #EEE;
	background-color: #FFF;
}
ul.accordion > li > ul > li > p {
}
ul.accordion > li > ul > li > a {
	font-size: 11px;
	font-weight: normal;
	border: 1px solid #b4b4b5;
	color: #b4b4b5;
	text-align: center;
	width: 148px;
        line-height: 2.5;
}
ul.accordion > li > ul > li > a:hover {
	font-size: 11px;
	font-weight: normal;
	border: 1px solid #231815;;
	color: #231815;;
	text-align: center;
	width: 148px;
        line-height: 2.5;
}
ul.accordion a{
	display:block;
}
ul.accordion a:hover {
	background-color:transparent;
}
ul.accordion a:hover img{
	visibility:hidden;
}

ul.accordion span:hover {
	background-color:transparent;
}
ul.accordion span:hover img{
	visibility:hidden;
}


/*main*/
#main{
	width : 855px;
	padding-left: 40px;
	padding-right: 40px;
	float : left;
}

.entry-title{
        font-weight: bold;
	padding-bottom: 10px;
}

/*content*/
#main-content{
	width : 545px;
	float : left;
}

#main-content .entry-content {
	border-bottom: 1px solid #CCC;
}

#primary{
	width : 545px;
	float : left;
}
.entry-titles{
	color	:	#231815;
	font-size	:	14px;
 font-weight: bold;
}

#genre ul {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
margin: 0 0 40px 0;
}

#genre ul li {
font-size: 13px;
line-height: 1;
padding: 0 20px;
border-right: 1px solid #CCC;
}

#genre ul li:last-child {
border-right: none;
}

#genre ul li a {
transition: 0.3s;
}

#genre ul li a:hover {
opacity: 0.5;
text-decoration: none;
}

.entry-content{
	padding-bottom: 40px;
	margin-bottom: 40px;
}
.entry-content p{
	line-height: 2.5;
}
.entry-content_2{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.entry-content_2 p{
	line-height: 2.5;
}
.day{
 font-size: 12px;
	color	:	#9e9e9f;
	padding-bottom: 14px;
}
.l285{
	font-size	:	12px;
 line-height: 2;
}
.l285 p{
	margin-bottom: 20px;
}
.l355{
	width : 355px;
	float : left;
}
.l355 p{
	margin-bottom: 10px;
}
.l440{
	width : 425px;
	float : left;
        line-height: 2;
}
.l440 p{
	margin-bottom: 20px;
}
/*sidebar*/


#secondary{
	width : 250px;
	float : right;
}

@media screen and (max-width: 1000px) {
#main{
	width : 100%;
	padding-left: 0;
	padding-right: 0;
	float: none;
}

#main-content{
	width : 100%;
	margin: 0 0 100px 0;
	float : none;
}

#primary{
	width : 100%;
	float : none;
}

#secondary{
	width : 100%;
	float : none;
}

.entry-content_2{
	display: block;
}

#genre ul {
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 20px 0;
}

#genre ul li {
padding: 0 10px;
margin: 0 0 20px 0;
}
}

#search-2 h1,
#categories-2 h1,
#recent-posts-2 h1 {
font-size: 13px;
color: #999999;
margin: 0 0 10px 0;
}

.widget{
	margin-bottom : 30px;
}
.widget h1{
        font-size: 14px;
	font-weight: bold;
}
widget-title{
	margin-bottom : 5px;
}
.widget ul{
	padding-left: 10px;
	line-height: 1.4;

}
.widget ul li{
	padding-bottom: 15px;
}
/*footer*/

#colophon{
	width : 100%;
	float : left;
	margin-top	:	30px;
}

.site-footer{
	width : 100%;
	padding-top: 0px;
	padding-bottom: 9px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #231815;
}

.copy{
	text-align	:	right;
}

.copy img {
	display: inline;
}

.about {
	line-height: 2.5;
}


h1.screen-reader-text{
display:none;
}

#access_info {
}
#access_info dt {
	width:10em;
	display:inline-block;
}
#access_info dd {
	margin:0 0 0.5em 0;
	display:inline-block;
}
#access_detail {
	margin-top:30px;
	line-height:1.2;
}