@charset "UTF-8";
/*
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * DESCRIPTION
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * Loop & Detailed layout.
 * @link       		http://hakohako.info/
 * @author      	Tomoya & hakohako
 * @copyright   	Copyright (c)2016 hakohako
 *
 * Browser :IE9 or more / Safari latest / Firefox latest
 * LICENSE - The MIT License (MIT)
 * Please do not edit this file as much as possible.
 *
 *
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * TABLE OF CONTENTS
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * 1.0 - Common
 * ----------------------------------------------------------------------------------------------------
 * Facebook Like Box
 * Facebook Like Box
 * ----------------------------------------------------------------------------------------------------
 * 2.0 - Contents
 * ----------------------------------------------------------------------------------------------------
 * 2.1 - Default Contents
 * 2.2 - home Contents
 * ---- Font home Contents
 * 2.3 - single Contents
 * ---- Font single Contents
 * 2.4 - Archive Contents
 * ---- Font archive Contents
 * ---- date Contents
 * ---- Font date Contents
 * ---- category Contents
 * ---- Font date Contents
 * ---- tag Contents
 * ---- Font tag Contents
 * 2.5 - Search Contents
 * 2.6 - Error404 Contents
 * ---- Font Error404 Contents
 * ======================================================================== */
 
 
/*====================================================
00 Common
=====================================================*/
.permalink-btn{width:80%; display:block;padding:15px; background:#000!important; color:#fff!important; margin:30px auto 0 auto;}
.permalink-btn:hover{background: #00a0e9!important;}


/*====================================================
2.0 - Contents
=====================================================*/
/* 2.1 - Default Contents ---------------------*/
#container .article{ padding: 0 25px; }
.home #container .figure-group{ padding:1px 0; border-bottom:1px dotted #BFBFBF;}
#container .figure-group .title-group span{ display: inline-block; padding:5px 15px; background:#000; color:#fff; border-radius:5px; margin:5px 5px 0 0; }
#container .figure-group .title-group span.time{ display: inline-block; padding:0px 0px; background: none; color:#000; border-radius:0px; margin:5px 0px 0 0; }


/* 2.2 - home Contents ---------------------*/
.home #container .article{ padding: 0 25px; }
.home #container .article .section{ margin-bottom:80px; }
.home #container .figure-group .title-group h2{ padding:15px 0 10px 0;}
.home #container .figure-group .title-group .time{display:inline-block;}
.home #container .figure-group .title-group a.comment-link{ display:inline-block; margin:0 0 0 20px;}
@media only screen and (max-width:767px) {
	.home #container .figure-group .figure{ width:100%; height:200px;}
	.home #container .figure-group .title-group{ padding:25px 0; }
}
@media only screen and (min-width:768px) {
	.home #container .figure-group .figure{ width:100%; height:350px;}
	.home #container .figure-group{ position:relative; min-height:200px; width:100%;}
	.home #container .figure-group .title-group{ position:absolute; bottom:0px; left:0px; background: rgba(255,255,255,0.8); width:100%; padding:25px; }
}
/*Font home Contents */
.home #container .figure-group .title-group h2{ font-size:16px;	font-size:1.6rem;}
.home #container .figure-group .title-group .time{ font-size:12px; font-size:1.2rem;}
.home #container .figure-group .title-group a.comment-link{ font-size:12px; font-size:1.2rem;}
.home #container .figure-group .title-group span{font-size:10px; font-size:1rem; }
.home #container .article .section p{font-size:15px; font-size:1.5rem; line-height:2.6; line-height:2.6rem;}



/* 2.3 - single Contents ---------------------*/
.single #container .figure-group{ padding:1px 0; border-bottom:1px dotted #BFBFBF; margin-bottom:40px;}
.single #container .figure-group .title-group h2{ padding:15px 0 10px 0;}
.single #container .figure-group .title-group .time{display:inline-block;}
.single #container .figure-group .title-group a.comment-link{ display:inline-block; margin:0 0 0 20px;}
.single #container .inner-group{ line-break: strict!important; word-break: normal; word-wrap: break-word;}
@media only screen and (max-width:767px) {
	.single #container .figure-group .title-group{ padding:25px 0;}
	.single #container .inner-group{padding:25px 0;}
	.single #container .figure{ height:25vh; width:100%; text-align:center; border-radius:20px;}
}
@media only screen and (min-width:768px) {
	.single #container .figure-group .title-group{ padding:25px; }
	.single #container .inner-group{padding:25px; }
	.single #container .figure{ height:390px; width:700px; text-align:center; border-radius:20px;}
}
/* Font single Contents */
@media only screen and (max-width:767px) {
	.single #container .figure-group .title-group h2{ font-size:21px;	font-size:2.1rem; line-height:1.5;}
	.single #container .figure-group .title-group .time{ font-size:12px; font-size:1.2rem;}
	.single #container .figure-group .title-group a.comment-link{ font-size:12px; font-size:1.2rem;}
	.single #container .figure-group .title-group span{font-size:10px; font-size:1rem; }
}
@media only screen and (min-width:768px) and (max-width:959px) {
	.single #container .figure-group .title-group h2{ font-size:21px;	font-size:2.1rem; line-height:1.5;}
	.single #container .figure-group .title-group .time{ font-size:12px; font-size:1.2rem;}
	.single #container .figure-group .title-group a.comment-link{ font-size:12px; font-size:1.2rem;}
	.single #container .figure-group .title-group span{font-size:10px; font-size:1rem; }
}
@media only screen and (min-width:960px) {
	.single #container .figure-group .title-group h2{ font-size:21px;	font-size:2.1rem; line-height:1.5;}
	.single #container .figure-group .title-group .time{ font-size:12px; font-size:1.2rem;}
	.single #container .figure-group .title-group a.comment-link{ font-size:12px; font-size:1.2rem;}
	.single #container .figure-group .title-group span{font-size:10px; font-size:1rem; }
}
 
 

/* 2.4 - Archive Contents ---------------------*/
.archive .article ul.list-output{}
.archive .article ul.list-output li{ border-bottom:1px dotted #D6D6D6; padding:1.5em 0;}
.archive .article ul.list-output li dl{ display:table;}
.archive .article ul.list-output li dl dt,
.archive .article ul.list-output li dl dd{ display:table-cell; vertical-align:top; }
.archive .article ul.list-output li dl dt{ width:100px;}
.archive .article ul.list-output li dl dd{ width:100%; padding-left:10px;}
.archive .article ul.list-output li dl dt span{ display:block; width:100px; height:100px; border-radius:10px;}
.archive .article ul.list-output li h4 a{}
.archive .article ul.list-output li p{}
@media only screen and (max-width:767px) {
.archive .article h2{ color:#FFF; background:#000; display: inline-block; position:relative; padding:0.5em 1em; margin-top:2em; margin-bottom:1em;}
.archive .article h2+p{ margin-bottom:2em;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
.archive .article h2{ color:#FFF; background:#000; display: inline-block; position:relative; padding:0.5em 1em; margin-top:2em; margin-bottom:1em;}
.archive .article h2+p{ margin-bottom:2em;}
}
@media only screen and (min-width:960px) {
/*.archive .article h2:before{ content:" "; display:block; width:700px; height:3px; background:#000; position:absolute; top:-3px;}*/
.archive .article h2{ color:#FFF; background:#000; display: inline-block; position:relative; padding:0.5em 1em; margin-top:2em;  margin-bottom:1em;}
.archive .article h2+p{ margin-bottom:2em;}
}
/* Font archive Contents */
.archive .article ul.list-output li h4{ font-size:16px; font-size:1.6rem; }
.archive .article ul.list-output li p{ font-size:12px; font-size:1.2rem; color:#666;}
@media only screen and (max-width:767px) {
.archive .article h2{ font-size:14px; font-size:1.4rem;}
.archive .article h2+p{font-size:13px; font-size:1.4rem; line-height:1.8 }
}
@media only screen and (min-width:768px) and (max-width:959px) {
.archive .article h2{ font-size:16px; font-size:1.6rem;}
.archive .article h2+p{font-size:14px; font-size:1.4rem; line-height:1.8 }
}
@media only screen and (min-width:960px) {
.archive .article h2{ font-size:16px; font-size:1.6rem;}
.archive .article h2+p{font-size:14px; font-size:1.4rem; line-height:1.8 }
}


/* date Contents*/
.date{}
/* Font date Contents */
.date{}

/* category Contents*/
.category{}
/* Font date Contents */
.category{}

/* tag Contents*/
.tag{}
/* Font tag Contents */
.tag{}

/* 2.5 - Search Contents ---------------------*/
#search-result{}
#search-result h2{ font-size:16px; border-bottom:2px solid #333; margin-bottom:5px; padding-bottom:5px;}
#search-result h3{ font-size:14px; font-weight:700; margin-top:30px;}
#search-result h3+form{margin:10px 0 40px 0;}
#search-result .box .s{display:inline-block; border: 1px solid #D6D6D6;border-radius:5px;padding: 8px ; width: 280px;font-size:16px;vertical-align:middle;}
#search-result .box .searchsubmit{display:inline-block;  border: 1px solid #999; background: #999;border-radius:5px; padding: 6px 20px; color: #FFFFFF;vertical-align:middle;font-size:14px;cursor:pointer;}
@media only screen and (max-width:767px) {
#search-result .box .s{width: 100%; display:block; padding: 18px 6px; }
#search-result .box .searchsubmit{display:block;width: 50%;margin:30px auto;padding: 9px 20px;cursor:pointer;}
}



/* 2.6 - Error404 Contents ---------------------*/
#notfound404-archive h3+p{padding:8px 0 25px 0 ; border-bottom:1px dotted #CACACA; margin-bottom:60px;}
#notfound404-archive .section{ margin-bottom:60px;}
#notfound404-archive h3+form,
#notfound404-archive h3+ul{margin-top:10px;}
#notfound404-archive h3+ul.list-output{margin-top:0px;}
#notfound404-archive h3+ul.cat-list li{ display: inline-block; padding:0  15px 5px 0;}
#notfound404-archive h3+ul.cat-list li:before{ content:"・";}
#notfound404-archive .section .s{display:inline-block; border: 1px solid #D6D6D6;border-radius:5px;padding: 8px ; width: 280px;vertical-align:middle;}
#notfound404-archive .section .searchsubmit{display:inline-block;  border: 1px solid #999; background: #999;border-radius:5px; padding: 6px 20px; color: #FFFFFF;vertical-align:middle;cursor:pointer;}
@media only screen and (max-width:767px) {
	#notfound404-archive h3+ul.cat-list li{display: block; padding:15px  0 15px 0; border-bottom:1px dotted #CACACA;}
	#notfound404-archive .section .s{width: 100%; display:block; padding: 18px 6px; }
	#notfound404-archive .section .searchsubmit{display:block;width: 50%;margin:30px auto;padding: 9px 20px;cursor:pointer;}
}
/* Font Error404 Contents */
#notfound404-archive h2{ font-family:"Times New Roman", Times, serif;}
#notfound404-archive h3{ font-size:14px; font-size:1.4rem; font-weight:700;}
#notfound404-archive h2+h3{font-weight:normal;}
#notfound404-archive h3+p{ font-size:14px; font-size:1.4rem;}
#notfound404-archive h3+ul.cat-list li{font-size:14px; font-size:1.4rem;}
#notfound404-archive .section .s{font-size:16px; font-size:1.6rem; }
#notfound404-archive .section .searchsubmit{font-size:14px; font-size:1.4rem; }
@media only screen and (max-width:767px) {
	#notfound404-archive h2{ font-size:40px; font-size:4rem; line-height:1; }
	#notfound404-archive h2+h3{ font-size:18px; font-size:1.8rem; }
	#notfound404-archive p{ font-size:13px; font-size:1.3rem; }
}
@media only screen and (min-width:768px) {
	#notfound404-archive h2{ font-size:80px; font-size:8rem; }
	#notfound404-archive h2+h3{ font-size:24px; font-size:2.4rem;}
}




.page h2{ color:#FFF; background:#000; display: inline-block; position:relative; padding:0.5em 1em; margin-top:2em; margin-bottom:2em;}
/* Font archive Contents */
@media only screen and (max-width:767px) {
.page h2{ font-size:14px; font-size:1.4rem;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
.page h2{ font-size:16px; font-size:1.6rem;}
}
@media only screen and (min-width:960px) {
.page h2{ font-size:16px; font-size:1.6rem;}
}
/*
.page h2 {
color: #000;
font-size: 21px;
font-weight: 700;
padding: 20px;
margin-bottom: 20px;
background: -webkit-repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 3px,#ededed 3px, #ededed 7px);
background: repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 3px,#ededed 3px, #ededed 7px);
}

.page h2 {
    display: inline-block;
    font-size: 14px;
    line-height: 28px;
    color: #8699A0;
    text-shadow: 0 0 1px #758890;
    margin: 120px 0;
    font-family: arial, verdana;
    outline: none;
    padding: 14px 30px;
    position: relative;
    text-transform: uppercase;
    box-shadow:
        0 0 30px 0 rgba(0, 0, 0, 0.1),
        0 36px 0 -18px #B1E3E2;
}


.page h2:before {
    content: '';
    position: absolute;
    top: 18px;
    left: -15%;
    z-index: -1;
    width: 130%;
    height: 0;
    border: 28px solid rgba(0, 0, 0, 0);
    border-left: 28px solid #B1E3E2;
    border-right: 28px solid #B1E3E2;
}
.page h2:after {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%; left: 0;
    z-index: -1;
    border-top: 18px solid #99acb2;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
}

.page h2, .page h2:before {
    background-image:
        linear-gradient(
            transparent 8%,
            rgba(0, 0, 0, 0.1) 8%,
            rgba(0, 0, 0, 0.1) 14%,
            transparent 14%,
            transparent 86%,
            rgba(0, 0, 0, 0.1) 86%,
            rgba(0, 0, 0, 0.1) 92%,
            transparent 92%
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0)
        ),
        linear-gradient(
            45deg,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
        ),
        linear-gradient(white, white);
    background-size:
        cover,
        cover,
        4px 4px,
        cover;
}

.page h2, .page h2:before, .page h2:after {
    box-sizing: border-box;
    background-origin: border-box;
}
*/

ul.tagblocks { margin:15px 0; padding: 0; list-style: none; }
ul.tagblocks li { display: inline-block; margin: 0 .3em .3em 0; padding: 0; }
ul.tagblocks li a {display: inline-block; max-width: 100px; height: 25px; line-height: 25px; padding: 0 1em; background-color: #fff; border: 1px solid #aaa; border-radius: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; font-size: 10px; text-decoration: none; -webkit-transition: .2s; transition: .2s;}
ul.tagblocks li a:hover { background-color: #3498db; border: 1px solid #3498db; color: #fff; }




/* ----------------------------------------------------------------------------------
03 SNS
------------------------------------------------------------------------------------- */
@media only screen and (max-width:767px) {
	/*投稿ページ*/
	.single  .facebook-box{ margin:0 auto;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	/*投稿ページ*/
	single .facebook-box{width:500px; margin:0 auto;}
}
@media only screen and (min-width:960px) {
	/*投稿ページ*/
	.single .facebook-box{ width:500px; margin:0 auto;}
}
/*Social bookmarking*/
ul.social_buttons:after{ content: " ";  display: block;  height: 0;  font-size:0; clear: both; visibility:hidden; }
/*ul.social_buttons { margin: 0; padding: 50px 0; width:100%; text-align:center; }*/
ul.social_buttons a{ color:#fff;}
ul.social_buttons li { display:inline-block; }
ul.social_buttons li.social_pocket { margin-right: 0; }
.social_margin { width: 100%; height: 11.5px; clear: both; }
.social_button { display: table; width: 100%;  text-align: center!important; color: #fff; font-size: 10px; font-weight: bold; line-height: 1;  border-radius: 2px;  cursor: pointer;}
.social_button span { display: table-cell; vertical-align: middle; text-align: center!important;}
.social_button i { margin-right: 3px; }
@media only screen and (max-width:767px) {
 	.social_button { height: 90px; border-radius: 7px; }
}
@media only screen and (min-width:768px){
	.social_button { height: 20px; }
}
/* Facebook */
.social_facebook {  width: 53px; }
.social_facebook .social_button {background: #3b5998; }
@media only screen and (max-width:767px) {
	.social_facebook {  width: 100px; }
}
@media only screen and (min-width:768px){
	.social_facebook {  width: 53px; }
}
/* Twitter */
.social_twitter { width: 58px; overflow: hidden;}
.social_twitter .social_button { background: #55acee; }
@media only screen and (max-width:767px) {
	.social_twitter { width: 100px; overflow: hidden;}
}
@media only screen and (min-width:768px){
	.social_twitter { width: 58px; overflow: hidden;}
}
/* LINE */
.social_line { width: 67px; overflow: hidden;}
.social_line .social_button { background: #00c302; }
@media only screen and (max-width:767px) {
	.social_line { width: 100px; overflow: hidden;}
}
@media only screen and (min-width:768px){
	.social_line { width: 58px; overflow: hidden;}
}
/* Google+ */
.social_googleplus { width: 45px; overflow: hidden; }
.social_googleplus .social_button { background: #dd4b39; }
.social_googleplus .social_button i { margin-right: 0; }
@media only screen and (max-width:767px) {
	.social_googleplus { width: 100px; overflow: hidden; }
}
@media only screen and (min-width:768px){
	.social_googleplus { width: 45px; overflow: hidden; }
}
/* Hatena Bookmark */
.social_hatena { width: 87px; overflow: hidden; }
.social_hatena .social_button { background: #008fde; }
.social_hatena .social_button i { font-weight: bold; font-style: normal; letter-spacing: 0; }
@media only screen and (max-width:767px) {
	.social_hatena { width: 100px; overflow: hidden; }
}
@media only screen and (min-width:768px){
	.social_hatena { width: 87px; overflow: hidden; }
}
/* Linkedin */
.social_linkedin {  width: 57px; overflow: hidden;}
.social_linkedin .social_button { background: #0077b5; }
@media only screen and (max-width:767px) {
	.social_linkedin {  width: 100px; overflow: hidden;}
}
@media only screen and (min-width:768px){
	.social_linkedin {  width: 57px; overflow: hidden;}
}
 /* Pocket */
.social_pocket { width: 61px; overflow: hidden;}
.social_pocket .social_button { background: #ED4055;}
.social_balloon { display: block;  position: relative; padding-top: 9px; width: 100%; height: 33px; text-align: center; text-decoration: none; color: #666; font-size: 13px; font-weight: bold; font-family: Arial; background: #fff; border: 1px solid #999; border-radius: 3px; }
.social_balloon:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; width: 0; height: 0; border-top: 5px solid #999; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; }
 .social_balloon:after { content: ""; position: absolute;  top: 100%;  left: 50%; margin-left: -4px;  width: 0;  height: 0;  border-top: 4px solid #fff; border-right: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid transparent;}
@media only screen and (max-width:767px) {
	.social_pocket { width: 100px; overflow: hidden;}
}
@media only screen and (min-width:768px){
	.social_pocket { width: 61px; overflow: hidden;}
}