/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20210719
*/

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}

/***************             ここから先はカスタマイズ追加       ********************************/

/*** 記事の紹介の文字装飾　*/
.topsyokai {color: green;
  text-decoration : underline;}
/*** 【ココまで】　*/

/*** 記事の余白設定　*/
.single #main article, .page #main article{
background-color:#fff;
padding:20px;
}
/*** 【ココまで】　*/

/*** TOPに戻るボタンの調整　*/
#page-top a{
border-radius: 27.5px;
background:#f89174;
margin-bottom:20px;
}
/*** 【ココまで】　*/

/*** 区切り線のデザイン　*/
hr{margin:10px 0px 0px;}
/*** 【ココまで】　*/

/***【追加】speech ballon */

div.speech {
	margin: 1.5em 0;
	box-sizing: border-box;
}
img.speech-ballon-icon {
	border-radius: 20%;
	border: solid 0px #efefef;
}
.speech-icon {
	margin: 0;
	width: 20%;
	border: 0;
	min-width: 60px;
}
.icon-name {
	background: transparent;
	font-size: 1.0em;
	line-height: 1.4;
	font-weight: bold;
	text-align: center;
}
.speech-ballon {
	max-width: calc(100% - 60px);
	width: 80%;
	border: 3px solid #eee;
	background-color: #fff;
	color: #444;
	margin-bottom: .5em;
	padding: 2.5%;
	position: relative;
	border-radius: 5px;
}
.speech-ballon::before {
	content: '';
	position: absolute;
}
.speech-ballon::after {
	content: '';
	position: absolute;
}
.icon-left {
	float: left;
}
.ballon-right {
	float: right;
}
.icon-left-padding {
	padding-right: 10px;
}
.speech-ballon-right::before {
	border-right: 8px solid #eee;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 14px;
	left: -11px;
}
.speech-ballon-right::after {
	border-right: 10px solid #fff;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 14px;
	left: -7px;
}
.icon-right {
	float: right;
}
.ballon-left {
	float: left;
}
.icon-right-padding {
	padding-left: 10px;
}
.speech-ballon-left::before {
	border-left: 8px solid #eee;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 14px;
	right: -11px;
}
.speech-ballon-left::after {
	border-left: 10px solid #fff;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	top: 14px;
	right: -7px;
}
.clearfix::after {
	clear: both;
	content: " ";
	display: table;
}
/***【追加ここまで】speech ballon */

/*** 【追加】囲み枠 */

/** タイトル無しシンプル黒枠 */
.sample_box1 {
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 2px #000000;/*線*/
}
.sample_box1 p {
    margin: 0; 
    padding: 0;
}

/** 【枠】<タイトル有>シンプル黒枠 */
.kakomi-box11 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}

/** 【枠】<タイトル無>背景水色太字枠*/
.sample_box3 {
    padding: 0.5em 1em;
    margin: 2em 1em;
	background-color: #f0f8ff;/*背景色*/
	border-radius: 5px;/*角丸め*/
    color:#000000;/*文字色*/
	font-weight: bold;/*文字太*/
	font-size: 105%;/*文字サイズ*/
}
.sample_box3 p {
    margin: 0; 
    padding: 0;
}

/** 【枠】<タイトル無>左側抹茶枠 */
.sample_box6 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#f6faee;/*背景色*/
    border-left: solid 10px #6b8e23;/*左ライン*/
    color:#000000;/*文字色*/
}
.sample_box6 p {
    margin: 0; 
    padding: 0;
}

/**  【枠】<タイトル無>角丸で背景薄ピンク枠 */
.sample_box7 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#fff0f5;/*背景色*/
    border:1px solid #9370db;/*線*/
    color:#000000;/*文字色*/
    border-radius: 10px;/*角の丸み*/
}
.sample_box7 p {
    margin: 0; 
    padding: 0;
}

/**  <<重要>>box-classic「クラシック用BOX」 */
.box-classic {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#f4f9ff;/*背景色*/
    border:1px solid #84c1ff;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
}
.box-classic p {
    margin: 0; 
    padding: 0;
}

/**  【枠】<タイトル有>薄オレンジ枠 削除予定*/
.sample_box3_1 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
		border: 2.5px solid #fbbd6a;/*線*/
    border-radius: 1px;/*角の丸み*/
    color: #000000;/*文字色*/
}
.sample_box3_1 .sample_box_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.1em;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #fbbd6a;/*タイトル文字色*/
    font-weight: bold;
}
.sample_box3_1 p {
    margin: 0; 
    padding: 0;
}

/**  <<重要>>box-point1「【BOX】要点まとめ」 */
.box-point1 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
		border: 2.5px solid #fbbd6a;/*線*/
    border-radius: 1px;/*角の丸み*/
    color: #000000;/*文字色*/
}
.box-point1 .box-point1_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.1em;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #fbbd6a;/*タイトル文字色*/
    font-weight: bold;
}
.box-point1 p {
    margin: 0; 
    padding: 0;
}

/** <<重要>>box_gist「【BOX】主旨枠専用」 */
.box_gist{
 background-color: #fff;	/* 背景色 */
 border: 1px solid #ccc; /* 線の太さ・種類・色 */
 box-shadow:1px 1px 6px 0px #ccc;
 -moz-box-shadow:1px 1px 6px 0px #ccc;
 -webkit-box-shadow:1px 1px 6px 0px #ccc;
 -o-box-shadow:1px 1px 6px 0px #ccc;
 margin: 20px 5px; /* 外側の余白 上下・左右 */
 padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
 position: relative;
 z-index: 0;

}

.box_gist:after{
 background-color: #d9ccb3; /* マステ部分の色1 */
 background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); /* マステ部分の色2 */
 background-position: 0 0, 12px 12px;
 background-size: 24px 24px;
 border-left: 2px dotted rgba(255,255,255,0.9);
 border-right: 2px dotted rgba(255,255,255,0.9);
 box-shadow: 0 0 5px rgba(255,255,255,0.5);
 content: '本記事の趣旨';
 display: block;
 margin: 0 0 10px 0;
 padding: 5px 20px;
 color: #fff;  /* マステ部分文字色 */
 text-align: center;
 position: absolute;
 top: -10px;
 left: 20px;
 transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
}



/**【枠】<タイトル有>水色枠 [削除予定]*/
/* 主に大事なポイント記載 */
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

/**<<重要>>box-point3「【BOX】ここがポイント用」 */
/* 水色枠 */
.box-point3{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box-point3 .box-point3_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box-point3_title::before{
	content: 'ここがポイント！　';
	color:#ffd700;
}
.box-point3 p {
    margin: 0; 
    padding: 0;
}


/**【枠】<タイトル有>黒板風 top　*/
/* タイトル有　黒板風 に前タイトル追加 */
.kokuban-top {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 10px solid #8b4513; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.kokuban-top::before,
.kokuban-top::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-top::before {
 right: 10px;
 border: solid 3px #ff7fbf; /*チョーク（ピンク）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.kokuban-top::after {
 right: 40px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.title-top {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}

.title-top::before{
	content: '【POINT】 :   ';
}

/**<<重要>>box-point2「【BOX】黒板風 特に重要なポイント用」　*/
.box-point2 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 10px solid #8b4513; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.box-point2::before,
.box-point2::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.box-point2::before {
 right: 10px;
 border: solid 3px #ff7fbf; /*チョーク（ピンク）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.box-point2::after {
 right: 40px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.box-point2_title {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}

.box-point2_title::before{
	content: '【POINT】 ';
}



/**【枠】<タイトル有>薄オレンジ枠　*/
.box2 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #fbbd6a;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fbbd6a;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box2 p {
    margin: 0; 
    padding: 0;
}

/** <<重要>>box-matome「【BOX】まとめ」*/
/*：上下線　*/
.box-matome {
 position: relative;
 margin: 5em auto;
 padding: 0.5em 0.5em 0.2em;
 width: 90%;
 background-color: #fff; /*BOX背景色 */
	border-style: solid none;
	 border-color: #57ab89;

}
.box-matome_title{
 position: absolute;
 display: inline-block;
 top: -28px; /*タブ調整 */
 left: -2px; /*タブ調整 */
 padding: 1px 20px;
 height: 26px;
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color:#57ab89; /* タイトル背景色 */
 border-radius: 0px 50px 0 0;
}

.box-matome_title::before { /* タイトルの前に文字を入れる */
	content: '【まとめ】';
	color:#ffd700
	
}
/**【枠】<タイトル有>ホワイトボード風*/
.pointbox1 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #000000; /* 文章色 */
 border: 5px solid #c6c6c6; /* 枠線 */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.pointbox1::before,
.pointbox1::after {
 position: absolute;
 content: '';
 bottom: 4px;
 width: 25px; 
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.pointbox1::before {
 right: 60px;
 border: solid 3px #333; /*飾りペン黒 */
 transform: rotate(2deg); /*飾りペン角度 */
}
.pointbox1::after {
 right: 22px;
 border: solid 3px #ff0000; /*飾りペン赤 */
 transform: rotate(9deg); /*飾りペン角度 */
}
.title-w2 {
 position: absolute;
 top: .6em;
 left: 1em;
 font-weight: bold; /* 太文字 */
 font-size: 1.1em;
 color: #ff0000; /* タイトル文字色 */
}

/*** 飾り枠線【追加ここまで】*/



/*** <<重要>>normal「【BOX】補足説明」**/

.normal{
  background-color: #F4F3EB;
  padding: 20px 20px 20px 72px;
  border-radius: 4px;
  position: relative;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}
 
.normal::before
{
  font-family: "FontAwesome";
  font-size: 50px;
  position: absolute;
  top: 13px;
  left: 13px;
  color: #EAE3B4;
}
 
.normal::before{
  content: '\f05a';
}
/***【ここまで】**/

/*** <<重要>>warning「【BOX】補足説明」**/
.warning{
  background-color: #fcebf9;
  padding: 20px 20px 20px 72px;
  border-radius: 4px;
  position: relative;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}
 
.warning::before
{
  font-family: "FontAwesome";
  font-size: 50px;
  position: absolute;
  top: 13px;
  left: 13px;
  color: #EAE3B4;
}
 
.warning::before{
  content: '\f1e2';
}

/***【ここまで】**/