@charset "UTF-8";

/*!
Theme Name: K'z Style
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400);

/*------------------------------------------
  変数定義
--------------------------------------------*/
:root {
    --main-color: #85A652;
    --dark-color: #18211e;
    --light-color: #888d9a;
    --high-color: #004679;
	--natual-color: #dfd4be;
    --accent-color: #499475;
    --background-color: #f9fcff;
	--web-color: #85A652;
	--security-color: #0f2350;
	--mono-color: #85A652;
	--hito-color: #934e61;
	--logo-color: #f97b26;
}

/*------------------------------------------
  全体設定
--------------------------------------------*/
body,
html {
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

.ff-yu-gothic {
    font-family: 'Lato', sans-serif;
}

/* 外部リンクのマーク
----------------------------------------------- */
.outer::after {
	position: relative;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f35d";
	/*color: var(--main-color);*/
	font-size: 70%;
    margin-left: .2em;
    vertical-align: super;
    margin-top: 0;
    padding-top: 0;
}

/*  Header
----------------------------------------------- */
header hr {
    margin-top: 10px;
    border: none;
    border-bottom: 1px solid var(--high-color);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
    /* box-shadow: 0 3px 0 rgba(0,0,0,0.8);*/
    /*
    height:60px;
    background-color: #FFF;
    */
}

.header-container-in.hlt-top-menu {
    display: block;
}

header #header-comment {
    font-size: 80%;
    margin-bottom: 10px;
}

header .logo {
    margin-top: 15px;
}

header .header-sitetitle {
    font-weight: bold;
    display: inline-block;
    margin-left: 20px;
    position: relative;
    top: -15px;
}

header #header-float:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

header #header-left {
    float: left;
}

header #header-left a {
    border-bottom: none;
}

header #header-left a:hover {
    background-color: #fff;
}

header #header-right {
    float: right;
    line-height: 1.3;
}

header #header-right-msg {
    font-size: 80%;
}

header #header-right-msg .header-right-icon {
    font-size: 150% !important;
}

header #header-right-tel,
header #header-right-tel a {
    font-size: 105%;
    color: var(--main-color);
}

header .header-right-icon {
    font-size: 120%;
}

header #header-right-address {
    font-size: 90%;
}

/*------------------------------------------
  Global Navi
--------------------------------------------*/
/*
#navi {
    border-top: 2px solid var(--high-color);
}
*/
.toc .toc-title::before{
	font-family: "Font Awesome 5 Free";
	content: '\f15c';
	margin-right: .5em;
}
/*------------------------------------------
  Sidebar
--------------------------------------------*/
#sidebar h3 {
    border-top: 2px solid var(--main-color);
}
#sidebar li {
    font-size: 85%;
    line-height: 1.3;
}

/*  プロフィール
----------------------------------------------- */
.author-box {
	border: none !important;
	padding: 0 !important;
}
.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
	font-size: 90%;
	text-align: left;
}
.author-box .author-content .author-description p a{ text-decoration: none; }

.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}
.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }

.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

/*------------------------------------------
  Footer
--------------------------------------------*/
.footer {
    background-color: #333;
    color: #ccc;
    padding-bottom: 20px;
}

.navi-footer-in a {
    color: #ccc;
}

/*------------------------------------------
  インデックス
--------------------------------------------*/

/*  カーソルを載せたときにアイキャッチ画像をぼかしながら拡大
----------------------------------------------- */
a.entry-card-wrap figure.entry-card-thumb {
    overflow: hidden;
    line-height: 0;
    margin-bottom: .5em;
}

a.entry-card-wrap figure.entry-card-thumb .cat-label {
    line-height: 1.7;
}

a.entry-card-wrap:hover img.entry-card-thumb-image {
    filter: blur(3px) brightness(60%);
    transform: scale(1.03);
    opacity: 1;
    transition: 0.3s;
}

a.entry-card-wrap figure.entry-card-thumb::before {
    z-index: 1;
    font-family: sans-serif;
    font-weight: bold;
    content: "READ MORE";
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    font-size: 100%;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .25s ease;
    -webkit-transition: .4s ease;
    -moz-transition: .4s ease;
    -ms-transition: .4s ease;
}

a.entry-card-wrap:hover figure.entry-card-thumb::before {
    opacity: 0.9;
    font-size: 150%;
}

.entry-card-snippet {
    font-size: 72%;
    line-height: 1.6;
    color: gray;
    text-align: justify;
    text-justify: inter-ideograph;
}

/*  カードを浮き上がらせる
----------------------------------------------- */
.home main, .archive main{
    background-color: transparent;
    margin-top: 0;
    padding-top: 0;
}
.entry-card-wrap{
    background-color: white;
    border-radius: 4px;
    margin-bottom: 1em!important;
}
.entry-card-wrap:hover{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: white; 
    transition: all .3s ease;
}

/*  ページ全体がふわっとフェードイン
    Special Thanks to リスブロ(https://s41t0h.jp/cocoon-fadein-customize/)
----------------------------------------------- */
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

/*------------------------------------------
  メインコンテンツ
--------------------------------------------*/

/* SNSシェアボタン（バグ？対応）
--------------------------------------------*/
.fa-clipboard:before {
    content: "\f0ea" !important;
}

/* 見出し
--------------------------------------------*/
h1 {
    border-bottom: dotted 3px var(--natual-color);
    background-color: var(--background-color);
    margin: 15px 10px 10px 0;
    padding: 20px 10px 16px 20px;
    font-size: 1.5em;
    font-weight: bold;
}

.article h2 {
    border-left: var(--main-color) solid 15px;
    /*border-bottom: solid 3px var(--light-color);*/
    background-color: var(--background-color);
    margin: 50px 10px 10px 0;
    padding: 20px 10px 16px 20px;
    font-size: 1.2em;
    font-weight: bold;
}
.article h2::first-letter {
    color: var(--accent-color);
}

.article h3 {
    border-left: var(--high-color) solid 15px;
    margin: 20px 10px 10px 0;
    padding: 20px 10px 20px 20px;
    font-weight: bold;
    line-height: 1.1;
}
.article h4 {
    color: var(--main-color);
}

.article .field_level {
    text-align: center;
}

/* マーカー
--------------------------------------------*/
.marker-under-red {
    background: linear-gradient(transparent 60%, #ffdfef 0%);
}

.small {
    font-size: 80%;
}

#toc {
    min-width: 80%; 
}

/* コンテンツ末尾ガイド
--------------------------------------------*/
.comm {
    display: flex;
    justify-content: space-between;
    border: 2px solid #aaa;
    background-color: #f3f3f3;
    padding: 15px;
}
@media screen and (max-width: 768px){
    .comm {
        flex-direction: column;
    }
}
  .comm .far {
    font-weight: 900;
    margin-right: 5px;
}
.comm_left {
}
.comm_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.comm a {
    display: block;
    text-decoration: none;
}
.comm a:hover {
    opacity: 0.5;
}
.comm_button {
    display: flex;
    flex-direction: row;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 15px 15px 7px 10px;
    font-size: 90%;
    position: relative;
}
.comm_button:after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4%;
    font-size: 190%;
    font-weight: 600;
}
.comm_icon {
    padding-left: 10px;
    padding-right: 10px;
}
.comm_icon img {
    width: 30px;
}
.comm_contact {
    color: #fff;
    background-color: #499475;
    border-color: #499475;
}
.comm_official {
    color: #fff;
    background-color: #002561;
    border-color: #002561;
    margin-top: 10px;
}
@media screen and (min-width: 768px){
    .comm_right {
        width: 45%;
    }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}