@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 
************************************/


/************************************
** デバイス別表示設定
************************************/
@media screen and (min-width: 769px){
	.pc-only {
		display:none;
}}

@media screen and (max-width: 768px){
	.mobile-only {
		display:none;
}}

/************************************
** reCAPTCHA認証バーを非表示
************************************/
.grecaptcha-badge { 
	visibility: hidden;
}

/************************************
** 検索窓
************************************/
input.search-edit {
	font-size: 14px;
    border-radius: 0px;
}

.fa-search {
    color: #04384c;
}

/************************************
** ブログカード
************************************/
.blogcard {
    border: solid 1px;
    border-radius: 0px;
}

.blogcard-footer {
    display: none;
}

/************************************
** 目次
************************************/
.toc {
	padding: 2em;
	border: 0px;
    background-image: linear-gradient(-45deg, #fff 25%, #F5F5F5 25%, #F5F5F5 50%, #fff 50%, #fff 75%, #F5F5F5 75%, #F5F5F5);
	background-size: 4px 4px;
	background-clip: padding-box;
	border-bottom: 4px double #E2E2E2;
    border-top: 4px double #E2E2E2;
	width: 90%;
}

/************************************
** 上に戻るボタン
************************************/
.go-to-top-button {
	display: none;
	color: white;
}

#page-top {
    position: fixed;
    right: 20px;
    bottom: 40px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: white;
    padding: 0 0 0 35px;
    border-top: solid 1px;
	z-index: 999;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}

a#page-top {
    color: white;
}

/************************************
** 引用
************************************/
blockquote {
    border: 0px;
    background: #F5F5F5;
	position: relative;
	font-size: .9em;
}

blockquote::before {
        content: "";
    display: block;
    width: 5px;
    height: calc(100% - 1em);
    top: 0.5em;
    left: 0.5em;
    border-left: solid 1px rgba(180,180,180,.75);
    border-right: solid 1px rgba(180,180,180,.75);
}

blockquote::after {
    content: "";
}

blockquote p {
    padding: 0px 0px 0px 20px;
}

/************************************
** SNSセンタリング
************************************/
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet {
    margin: 30px auto;
} 

/************************************
** スムーズスクロール
************************************/
html {
  scroll-behavior: smooth;
}

/************************************
** サイトタイトル
************************************/
.site-name-text {
    font-weight: 700;
    color: #333333;
    font-style: italic;
}

/************************************
** 見出し
************************************/

/* デフォルト見出し要素リセット
************************************/
.article h1 {
    padding: 0;
    background: none;
}
.article h2 {
    padding: 0;
    background: none;
}

.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}

/* 上書き用見出しデザイン
************************************/
.article h2 {
	position: relative;
    background: #04384C;
    padding: 0.75em 1em;
    color: #fff;
	margin: 3em 0 1em;
}

.article h2::before {
    position: absolute;
    display: block;
    pointer-events: none;
    content: "";
    top: -4px;
    left: 0;
    width: 100%;
    height: calc(100% + 4px);
    box-sizing: content-box;
    border-top: solid 2px #04384C;
    border-bottom: solid 2px #04384C;
}

.article h3 {
	margin: 3em 0 2em;
	position: relative;
	padding: 0 0.5em 0em;
    display: grid;
}

.article h3::before {
	position: absolute;
	bottom: -10px;
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #04384C 0%, #04384C 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%);
}

.article h4 {
    padding: 0 0 0 16px;
    border-left: solid 2px #04384C;
	margin: 3em 0 1.5em;
}

.sidebar h3 {
	font-size: 16px;
	background-color: rgba(0,0,0,0);
	position: relative;
	padding: 0 0.5em 0em;
    display: grid;
}

.sidebar h3::before {
	position: absolute;
	bottom: -10px;
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #04384C 0%, #04384C 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%);
}

/************************************
** パンくずリスト
************************************/
.breadcrumb , .breadcrumb-caption {
    color: #333333;
}

/************************************
** フッター
************************************/
#footer a {
    font-size: 14px;
}

#footer a:hover {
    background: rgba(0,0,0,0);
}

#footer h3 {
    font-size: 16px;
}

/************************************
** ヘッダーナビ
************************************/
.item-label {
    font-size: 14px;
}

/************************************
** テーブル
************************************/
table th{
  background: #04384C;
  color: #fff;
}
  
table td {
	background: white;
}

.scrollable-table th {
    background-color: #04384C;
}

/************************************
** テキスト装飾
************************************/

.marker-under-red, .marker-under-blue, .marker-under {
    font-weight: 700;
}

.marker-under {
    background: linear-gradient(transparent 60%, #ffd900 60%);
}

/************************************
** 吹き出し
************************************/

/* テキスト
************************************/
div.speech-balloon p {
	margin: 0px !important;
}

/* メイン
************************************/
.sbp-l div.speech-balloon {
    border: 1px solid #000;
    background-color: #ebfcff;
	box-shadow: 3px 3px 0 #c1dbe0;
}

.sbp-r div.speech-balloon {
    border: 1px solid #000;
    background-color: #fffddb;
	box-shadow: 3px 3px 0 #f4f0b3;
}

/* 三角
************************************/
.sbp-l .speech-balloon::before {
    border-right: 13px solid #000;
    left: -12px;
}

.sbp-l .speech-balloon::after {
    border-right: 12px solid #ebfcff;
	left: -10px;
}

.sbp-r .speech-balloon::before {
    border-left: 12px solid #000;
}

.sbp-r .speech-balloon::after {
	border-left: 12px solid #fffddb;
	right: -11px;
}

/* アイコン
************************************/
.speech-icon img, .speech-icon amp-img {
    border: 1px solid #000;
}


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