@charset "UTF-8";
/*
Theme Name: MY THEME
Theme URI: http://www.gorogorolife.com/
Description: This is my sample theme.
Version: 1.0
*/

body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	line-height: 1.5}
	
/*-------------------- 基本構造 -------------------------　*/
/* ヘッダーとフッターをバーの形にする設定 */
header{
border-bottom:solid 1px #dddddd;
background-color:#f6f6f6;
}
footer{
border-top:solid 1px #dddddd;
background-color:#000000;
}
/* ボックスの上下の間隔 */

.sub-header{
padding-top:5px;
}
.contents{
padding-top:20px;
padding-bottom:20px;
}
.sub{
padding-top:20px;
padding-bottom:20px;
}
footer{
padding-top:15px;
padding-bottom:15px;
}

@media(max-width:599px){
.contents{
padding-top:10px;
}

}
/* ボックスの左右の余白 */
header,footer,.container,.sub-header{
padding-left:10px;
padding-right:10px;
}

@media (min-width: 768px) and (max-width: 1039px) {
	/* 全体の横幅 */
	.container, .header-inner, .footer-inner, .sub-header
		{width: 747px;
		margin-left: auto;
		margin-right: auto}
}

@media(min-width:1040px){
/* コンテンツとサイドバーを横に並べる設定 */
.container:after{
content:"";
display:block;
clear:both;

	.contents	{float: left;
		width: 100%;
		margin-right: -300px}

	.sub	{float: left;
		width: 300px}

	/* コンテンツとサイドバーの間隔 */
	.contents	{padding-right: 350px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box}
}

@media(min-width:1040px){
/* 全体の横幅 */
.container,.header-inner,.footer-inner,.sub-header{
width:1000px;
margin-left:auto;
margin-right:auto;
}
}
.contents{
float:left;
width:70%;
}

.sub{
float:left;
width:30%;
}
/* コンテンツとサイドバーの感覚 */
.contents{
padding-right:50px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

}

}
	
/*-------------------- ヘッダー -------------------------　*/

/*-------------------- サイト名 -------------------------　*/
.site h1 a{
display:inline-block;
padding:10px;
background-color:#00a0e9;
color:#ffffff;
text-decoration:none;
}

.site h1{
margin:0;
font-family:'Arial Black',sans-serif;
font-size:30px;
}

/* フッター　*/

/*-------------------- コピーライト -------------------------　*/
.copyright p{
margin:0;
color:#666666;
font-size:14px;
}

/*-------------------- 記事の概要 -------------------------　*/

/* 概要　*/

.gaiyou a{
display:block;
padding:20px 0;
border-bottom:dotted 2px #dddddd;
color:#000000;
text-decoration:none;
}

.gaiyou a;hover{background-color:#eeeeee}

.gaiyou a:after{
content:"";
display:block;
clear:both;
}

.gaiyou img{
float:left;
width:200px;
}

.gaiyou .text{
float:none;
width:auto;
margin-left:230px;
}

.gaiyou h1{
margin-top:0;
margin-bottom:10px;
font-size:20px;
}

.gaiyou p{
margin:0;
font-size:14px;
}

.gaiyou .kiji-date{
margin-bottom:8px;
}

@media(max-width:599px){
.gaiyou a{padding:10px 0}
.gaiyou img{width:100px}
.gaiyou .text{margin-left:110px}
.gaiyou h1{font-size:16px}
.gaiyou p{
visibility:hidden;
height:0;
}
.gaiyou .kiji-date{margin-bottom:0}
}

/* 概要（大サイズ） */
.gaiyou-large a	{display: block;
	padding: 20px 0;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	text-decoration: none}

.gaiyou-large:first-child a	{padding-top: 0}

.gaiyou-large a:hover	{background-color: #eeeeee}

.gaiyou-large h1	{margin-top: 10px;
	margin-bottom: 10px;
	font-size: 26px}

.gaiyou-large p	{margin: 0;
	font-size: 14px}

.gaiyou-large .kiji-date	{margin-bottom: 8px}

.gaiyou-large .thumb	{width: 100%;
	height: 350px;
	background-size: cover;
	background-position: 50% 50%}

@media (max-width: 599px) {
	.gaiyou-large a	{padding: 10px 0}

	.gaiyou-large h1	{font-size: 18px}

	.gaiyou-large p	{font-size: 12px}

	.gaiyou-large .thumb	{height: 200px}
}

/* パンくずリスト */
.bread ol{
margin:0;
padding:0;
list-style:none;
}

.bread li a{
display:inline-block;
padding:5px 5px;
color:#888888;
font-size:12px;
text-decoration:none;
}

.bread li a[href]:hover{
background-color:#eeeeee;
}

.bread ol:after{
content:"";
display:block;
clear:both;
}

.bread li{
float:left;
width:auto;
}

.bread li:after{
content:'\003e';
margin-left:2px;
margin-right:2px;
color:#888888;
}

.bread li:last-child:after{
content:none;
}

.bread i{
font-size:14px;
}

.bread span{
display:inline-block;
text-indent:-9999px;
}

@media(max-width:599px){
.bread li:last-child{
text-indent:-9999px;
}
}
/* シェアボタン　*/
.share{
margin-top:40px;
clear:both;
}


.share ul{
margin:0;
padding:0;
list-style:none;
}


.share li a{
display:block;
padding:8px 17px;
border-radius:10px;
color:#ffffff;
font-size:12px;
text-decoration:none;
}

.share li a:hover{
opacity:0.8;
}

.share ul:after{
content:"";
display:block;
clear:both;
}

.share li{
float:left;
width:auto;
margin-right:5px;
}


.share-tw{
background-color:#55acee;
}

@media(max-width:599px){
.share span{
display:inline-block;
text-indent:-9999px;
}

.share li a{
padding:8px 10px;
}
}

/* ページネーション */
.pagination{
margin:40px 0 30px;
text-align:center;
}

.pagination ul{
display:inline-block;
margin:0;
padding:0;
list-style:none;
}

.pagination li a,
.pagination li > span{
display:block;
margin:0 5px;
padding:6px 8px;
border:solid 1px #cccccc;
color:#000000;
font-size:14px;
text-decoration:none;
}

.pagination li > span{
background-color:#efefef;
}
.pagination li a:hover{
background-color:#eeeeee;
}

.pagination ul:after{
content:"";
display:block;
clear:both;
}

.pagination li{
float:left;
width:auto;
}

/* 記事一覧のページネーション */
.pagination-index li .dots{
padding:6px 2px;
border-color:transparent;
background-color:transparent;
}

@media(max-width:599px){
.pagination-index li a,
.pagination-index li > span{
margin:0;
padding:6px 7px;
border-left:none;
font-size:12px;
}

.pagination-index li:first-child a,
.pagination-index li:first-child > span{
border-left:solid 1px #cccccc;
}

.pagination-index li .dots{
border-right-color:#cccccc;
}


}

/* 小見出し */
.kiji h2{
position:relative;
margin-top:40px;
padding-left:32px;
padding-bottom:5px;
border-bottom:solid 2px #00a0e9;
font-size:24px;
clear:both;
}

.kiji h2:before{
position:absolute;
left:0px;
top:3px;
content:'\f14a';
color:#00a0e9;
font-family:'Font Awesome 5 Free';
font-size:28px;
line-height:1;
}

.kiji h3{
margin-top:25px;
padding-left:10px;
border-left:solid 10px #a5e2fe;
font-size:18px;
clear:both;
}

@media(max-width:599px){
.kiji h2{
padding-left:31px;
font-size:18px;
}
.kiji h2:before{
font-size;
}
.kiji h3{
padding-left:6px;
font-size:15px;
}

}

/* 投稿日・更新日 */
.kiji-date{
margin-bottom:20px;
color:#666666;
font-size:12px;
}

@media(max-width:599px){
.kiji-date{font-size:11px;}
}

/* タグ */
.kiji-tag	{margin-bottom: 18px}

.kiji-tag ul	{margin: 0;
	padding: 0;
	list-style: none}

.kiji-tag li a	{display: block;
	margin-right: 5px;
	margin-bottom: 2px;
	padding: 3px 5px;
	border-radius: 2px;
	background-color: #75dbe7;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none}

.kiji-tag li a:hover	{background-color: #94ecf6}

.kiji-tag ul:after	{content: "";
	display: block;
	clear: both}

.kiji-tag li	{float: left;
	width: auto}


/* テーブル */
table{
    border-spacing: 0;
    border-collapse: collapse;
    max-width: none;
    width: 100%;
    margin: 0 0 1.7em;
    border: 1px solid #ccc;
    font-size: 90%;
    line-height: 1.6;
}
table th,
table td{
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
th {
    display: table-cell;
    padding: 1em;
    background-color: #efefef;
    font-weight: bold;
}

tbody {
    display: table-row-group;
    border-color: inherit;
    vertical-align: middle;
}
td {
    padding: 1em;
    text-align: center;
}


/*-------------------- サイドバー -------------------------　*/

/* メニュー　*/
.mymenu {margin-bottom:30px;}

.mymenu h2{
margin-top:0;
margin-bottom:10px;
border-bottom:solid 2px #dddddd;
color:#666666;
font-size:18px;
}

.mymenu ul{
margin:0;
padding:0;
list-style:none;
}

.mymenu li a{
display:block;
padding:10px 5px;
color:#000000;
font-size:14px;
text-decoration:none;
}
.mymenu li a:hover{
background-color:#eeeeee;
}

/* サムネイル画像を付けたメニューのデザイン */
.mymenu-thumb li a	{padding: 5px 0;
	border-bottom: dotted 1px #dddddd;
	color: #2288bb}

.mymenu-thumb li a:after	{content: "";
	display: block;
	clear: both}

.mymenu-thumb li .thumb{
float: left;
	width: 60px;
	height: 60px;
	background-size: cover;
	background-position: 50% 50%;
}

.mymenu-thumb li .text{
float: none;
	width: auto;
	margin-left: 75px;
	}

.mymenu-thumb li span{
display: block;
	color: #666666;
	font-size: 12px;
}



/* サムネイル画像に文字を重ねたメニュー */
.mymenu-large li a	{position: relative;
	margin-bottom: 10px;
	padding: 0}

.mymenu-large li a:hover	{opacity: 0.8}

.mymenu-large li .thumb	{width: 100%;
	height: 130px;
	background-size: cover;
	background-position: 50% 50%}

.mymenu-large li .text	{position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px 10px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}



@media (min-width: 400px) and (max-width: 1039px) {
	.mymenu-large ul:after	{content: "";
		display: block;
		clear: both}

	.mymenu-large li	{float: left;
		width: 50%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box}

	.mymenu-large li:nth-child(odd) {clear: both;
		padding-right: 7px}

	.mymenu-large li:nth-child(even) {padding-left: 7px}
}


/* 関連記事メニュー */
.mymenu-related	{margin: 40px 0 0;
	padding: 20px;
	border: solid 1px #dddddd;
	background-color: #f6f6f6}

.mymenu-related h2	{padding: 0 0 0 7px;
	border-left: solid 8px #bac6cb;
	border-bottom: none;
	font-size: 20px;
	font-weight: normal}

.mymenu-related h2:before	{content: none}

.mymenu-related li a	{border: none;
	color: #000000}


@media (max-width: 599px) {
	.mymenu-related	{padding: 10px}

	.mymenu-related li .thumb	{width: 80px;
		height: 50px}

	.mymenu-related li .text	{margin-left: 95px}
}


@media (min-width: 600px) {
	.mymenu-related ul:after	{content: "";
		display: block;
		clear: both}

	.mymenu-related li	{float: left;
		width: 25%;
		height: 250px;
		padding: 0 5px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box}

	.mymenu-related li .thumb	{width: 100%;
		height: 80px;
		margin-bottom: 5px}

	.mymenu-related li .text	{margin-left: 0}
}

/* 広告 */
.myad{
text-align:center;
}

.myad div.textwidget br {
    display: none;
}

/*カテゴリーのデザイン*/



ul.accordionCat {
    list-style: none;
    padding: 0;
    border: none;
    margin: 0;
}
ul.accordionCat li {
    margin: 0;
    padding: 0;
    line-height: 42px;
}
ul.accordionCat li div.accordion {
    padding-left: 10px;
}
ul.accordionCat li a {
    display: block;
    color: #626262;
    padding-left: 10px;
}
div.accordion {
    display: block;
    border: none;
    cursor: pointer;
    transition: 0.1s ease-in;
    position: relative;
    margin: 0;
    background: #FFF;
}
div.accordion, li.catparent {
    font-weight: 600;
    color: #626262;
}
.accordion.active {
    margin-bottom: 0;
}
ul.children {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-out;
    padding: 0;
}
div.accordion:hover, ul.accordionCat li a:hover{
  background-color: #efefef;
  text-decoration: none;
}
div.accordion:after {
    color: #6bb6ff;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-53%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1em;
    content: "\f055";
}
div.accordion.active:after {
    content: "\f056";
}

span.postCount {
    background: #ebfcfe;
    color: #005fa0;
    display: inline-block;
    overflow: hidden;
    min-width: 24px;
    height: 24px;
    margin-left: 7px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    vertical-align: -5px;
    line-height: 24px;
}
ul.children li a:before {
    color: silver;
    content: "\f105";
    padding-left: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.95em;
    padding-right: 5px;
}
ul.accordionCat li ul.children li a {
    font-size: 0.95rem;
}




/*タグクラウドのデザイン*/
.tagcloud a {
 font-size: 14px !important; /* 文字のサイズ */
 line-height: 1em;
 background: #00a0e9; /* 背景色 */
 color: #fff; /* 文字色 */
 display: inline-block;
 white-space: nowrap;
 padding: 8px 8px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
}
.tagcloud a:hover {
 background: #f9d635; /* マウスホバー時の背景色 */
 color: #2098a8; /* マウスホバー時の文字色*/
}

.tagcloud a:before {
 font-family: "Font Awesome 5 Free";
 content: "\f02b"; /* 絵文字のコード */
 padding-right: 4px;
}

/*--------------------画像 -------------------------　*/
/* 画像キャプション*/
.wp-caption-text{
margin:0;
color:#666666;
font-size:10px;
text-align:center;
}
.wp-caption-text a{
color:#666666;
}

/* 画像 の配置 */
.aligncenter{
display:block;
margin-top:30px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}

/* 大きい画像用の設定 */
img, .wp-caption{
max-width:100%;
height:auto;
}

/* アイキャッチ画像 */
.catch{
margin-top:30px;
margi-bottom:30px;
}


/*-------------------- 外部コンテンツ-------------------------　*/
iframe{
max-width:100%;
}
/* YouTubeのビデオ */
.ytvideo{
positon:relative;
width:100%;
height:0;
padding-top:56.25%;
overflow:hidden;
margin-top:30px;
margin-bottom:30px;
}

.ytvideo iframe{
position:absolute;
top:0;
;eft0;
width:100%;
height:100%;
}

/* ------------------- カテゴリー／タグ ------------------- */

.contents > h1	{margin-top: 0;
	font-size: 34px}

@media (max-width: 599px) {
	.contents > h1	{font-size: 22px}

	.archive .bread li:last-child	{text-indent: 0}
}

/* ------------------- ナビゲーションメニュー ------------------- */

#mainmenu	{display: none}

.mainmenu ul	{margin: 0;
	padding: 0;
	list-style: none}

.mainmenu li a	{display: block;
	padding: 10px 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.mainmenu li a:hover	{background-color: #eeeeee}



/* トグルボタン */
.header-inner	{position: relative}

#navbtn	{position: absolute;
	top: 15px;
	right: 0;
	padding: 6px 12px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #ffffff;
	cursor: pointer}

#navbtn:hover	{background-color: #dddddd}

#navbtn:focus	{outline: none}

#navbtn i	{color: #888888;
	font-size: 18px}

#navbtn span	{display: inline-block;
	text-indent: -9999px}


@media (min-width: 768px) {
	/* サイト名とナビゲーションメニューを横に並べる設定 */
	.header-inner:after	{content: "";
		display: block;
		clear: both}

	.site	{float: left;
		width: auto}

	.sitenav	{float: right;
		width: auto}

	/* ナビゲーションメニューのリンクを横に並べる設定 */
	#mainmenu	{display: block !important}

	.mainmenu	{margin-top: 10px}

	.mainmenu ul:after	{content: "";
		display: block;
		clear: both}

	.mainmenu li	{float: left;
		width: auto}

	.mainmenu li a	{padding: 10px 15px}

	/* トグルボタン */
	#navbtn	{display: none}
}


/* ビデオ */
.wp-video{
 margin-top:30px;
 margin-bottom:30px;
}

/* 記事 */
.kiji h1{
margin-top:0;
margin-bottom:10px;
font-size:36px;
}

.kiji p{
margin-top:0;
margin-bottom:20px;
}

@media(max-width:599px){
.kiji h1{
font-size:24px;
}
.kiji p{
font-size:14px;
}

}


/* 番号なしリスト */
.kiji-body ul	{list-style: none}

.kiji-body li
	{position: relative;
	padding-left: 20px}

.kiji-body li:before
	{position: absolute;
	left: 0px;
	top: 3px;
	content: '\f069';
	color: #aaaaaa;
	font-family: 'Font Awesome 5 Free';
	line-height: 1}

/* 引用 */
blockquote{
position:relative;
margin:30px auto;
padding:20px 40px 1px 50px;
max-width:460px;
color:#444444;
font-size:18px;
line-height:1.8;
}

blockquote:before{
position:absolute;
left:10px;
top:10px;
content:'\f10d';
color:#aaaaaa;
font-size:30px;
font-family:'Font Awesome 5 Free';
font-weight : 900; 
line-height:1;
}

blockquote:after{
position:absolute;
right:10px;
bottom:10px;
content:'\f10e';
color:#aaaaaa;
font-size:30px;
font-family:'Font Awesome 5 Free';
font-weight : 900; 
line-height:1;


}

/* 横並びの画像をレスポンシブ表示 */
[class^="img-flex-"] {
	margin-bottom: 20px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.img-flex-2 img { 
	width: 49%; 
	align-self: flex-start;
}
/* 内部リンクブログカード*/
.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  word-wrap: break-word;
  margin: 10px;
  padding-bottom:15px;
  box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
}
.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
}
.blogcard a:hover {
  opacity: 0.6;
}
.blogcard_thumbnail {
  float: left;
  padding: 15px;
}
.blogcard_title {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  padding: 17px 20px 10px;  
  color:#000000;
  text-decoration:none;
}
.blogcard_excerpt {
  font-size: 0.85em;
  line-height: 1.6;
  padding: 0 17px 35px 20px;
}

span.cardbox-more{
    margin-bottom: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #757575;
}

/* 目次*/
.toc-001 {
    margin-bottom: 30px;
    padding: 1em 1em 1em 2em;
    border: 1px solid #999;
    background-color: #f7f7f7;
}

.toc-001 div {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-001 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em;
    overflow: hidden;
}

.toc-001 ol ol {
    margin-top: 5px;
}

.toc-001 li {
    padding: 5px 0;
}

.toc-001 a {
    color: #166c9d;
}

/*==========================================
    ふきだし
============================================*/
 
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 10px;
    width:80%;
    font-size: 14px;
    padding:3%;
}
 
.arrow_question {
    float: right;
}
 
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 
.arrow_question:after,
.arrow_question:before {
    right: 100%;
}
 
.arrow_answer:after,
.arrow_answer:before{
     left: 100%;
}
 
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 8px;
    margin-top: -8px;
}
 
.arrow_answer:after{
    border-left-color: #fff;
}
 
.arrow_question:after{
    border-right-color: #fff;
     
}
 
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 9px;
    margin-top: -9px;
}
 
.arrow_answer:before{
    border-left-color: #c8c8c8;
}
 
.arrow_question:before {
    border-right-color: #c8c8c8;    
}
 
.question_image{
     float: left;
     width:10%;
}
 
.answer_image{
     float: right;
     width:10%;
}
 
.answer_image img,
.question_image img{
    border: solid 1px #000;     /* 枠線指定 */
    border-radius: 50px;
    display: block;
    margin: 0 auto;
    max-width: 60px;
    width: 100%;
}
 
.question_Box .name {
    text-align: center;
    font-size: 12px;
}
.question_Box{
     width: 100%;
     overflow: hidden;
     margin-bottom: 8px;
}
.question_Box:nth-child(even){
     margin-bottom: 25px;
}