@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*見出し1（記事タイトル）下に下線*/
.article h1 {
border-bottom: solid 3px black;/*線の種類（実線） 太さ 色*/
padding-bottom: 15px;
}

/*グローバルナビの背景色とマウスオーバー時の背景色を変更*/
.navi {
  background-color: #F3F4F5; 
}
.navi-in a:hover {
  background-color: #C5E4F9; 
  transition: all 0.5s ease;
  color: #333;
}
.navi-footer-in a:hover {
  background-color: #C5E4F9; 
  transition: all 0.5s ease;
  color: #333;
}

/*質問文の文頭に2倍ダーシと少しの余白を入れる*/
p.interviewer::before {
	content:"――";
	letter-spacing: -.2em; 
	width: 2em;
	margin-right: .5em;
}

/*インタビューの回答者名を太字色付きにして1文字目との間にスペースを入れる*/
p span.speaker {
	color: #000000;
	font-weight: bold;
	margin-right: 1em;
}

/*インタビューの回答者名を太字色付きにして1文字目の前にコロンを入れる*/
/*
p span.speaker {
	color: #008000;
	font-weight: bold;
}

p span.speaker::after {
	content:"："
}
*/

.notice-banner {
	text-align: center;
}

/*文の先頭と最後に斜線を入れる*/
.notice-banner h6 {
	position: relative;
	display: inline-block;
	padding: 0 45px;
}
.notice-banner h6:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(70deg);
  transform: rotate(70deg);
}
.notice-banner h6:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-70deg);
  transform: rotate(-70deg);
}
.notice-banner h6:before {
  left:0;
}
.notice-banner h6:after {
  right: 0;
}

.notice-banner h6 small {
	display: block;
	font-size: 70%;
}

.notice-banner h6 {
	position: relative;
	margin: 3.6em 0 1em 0;
    background: 0 0;
	border-bottom: 0;
    font-family: serif;
	font-size: 110%;
	font-weight: bold;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}