/*
Theme Name:MAG-child
Template:mag_tcd036
Version:3.1.1
*/

body{
	 font-family: "Roboto","Arial","Helvetica","游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ",sans-serif!important;
	 font-size:16px;
	word-break: break-word;
}

/* header */
#header{
	padding: 20px 0;
}

.pc #logo_image h1 img{
	height: 50px;
}
#global_menu_wrap{
	margin-bottom:1em;
}

@media only screen and (max-width: 770px) {
#logo_image_mobile img{
	height:40px !important;
}
#global_menu_wrap{
	margin-bottom:0;
}	
}

#main_contents{
	overflow:hidden;
}

/* 記事ページ */
#post_title {
    font-size: 2em;
    line-height: 1.4;
	margin: 1em 50px 0.5em;
}

#post_meta_top {
    position: relative;
}

#post_meta_top .category a {
    top: 22px;
}

#post_meta_top .date {
    margin-bottom: 10px;
}


@media only screen and (max-width: 770px) {
	#article {
    padding-top: 0.5em;
}
	
	#main_contents #bread_crumb{
		margin: 5px 15px!important;
	}	
	
	#post_title {
    margin: 10px 0 0.5em!important;
}
	#post_meta_top .category a {
    top: 15px!important;
    left: -20px;
}
#post_meta_top .date {
    margin: 0 auto 5px!important;
}	
	
}

.post_content p{
line-height:1.6;
}

.post_content a{
text-decoration:underline;
}

/* listのスタイル*/
/* listの点 （箇条書き）*/
.post_content li{
	 line-height:1.3;
	padding-bottom:0.8em;
}

.post_content ul{
	list-style: none;
	margin-left:0.8em;
}

.post_content ul li:before {
   content: "●";
   color: #444;
	font-size: 10px;
   margin-right: 8px;
   vertical-align: 2px;
}

/* listの点 （数字）*/
.post_content ol{
	list-style: none;
	margin-left: 0.8em;
	counter-reset: my-counter;
	line-height: 1.5;
  padding: 1px 0 0 0;
}

.post_content ol li {
    margin-bottom: 0px;
    padding-left: 1.5em;
    line-height: 1.3;
    padding-bottom: 1em;
}
.post_content ol li:before {
  content: counter(my-counter);
    counter-increment: my-counter;
    background-color: #444;
    color: #FFFFFF;
    font-size: 0.7em;
    display: block;
    float: left;
    line-height: 2.1;
    margin-left: -30px;
    text-align: center;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    bottom: 3px;
    left: 0.2em;
    position: relative;
}
/* ENDlistスタイル*/
#post_title,h2,h3,h4,h5{
color: #000;
}
.post_content h2{
	margin: 1.5em 0 1.5em;
    padding: 1em .6em 1em;
	font-size: 1.4em;
	line-height: 1.5;
    font-weight: 400;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 2px solid #444;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
    box-shadow: 0px 1px 2px #f7f7f7;
}

.post_content h3{
	display: block;
	font-size: 1.3em;
    font-weight: 500;
    line-height: 1.5;
    margin: 40px 0px 30px;
    padding: .5em .6em .5em;
    border-bottom: 1px dotted rgb(221, 221, 221);
    border-left: 3px solid #444;
	clear: both;
}

.post_content h4{
    display: block;
	font-size: 1.2em;
    color: rgb(68, 68, 68);
    font-weight: 600;
    margin: 35px 0px 20px ;
    padding: .5em .6em .5em;
	border-left: 3px solid #444;
	clear: both;
}

.post_content h5{
   font-size: 1.1em;	
	line-height:1.4;
	padding: 0;
}

/* 見出しレスポンシブ */
@media only screen and (max-width: 770px) {
#post_title{
	font-size:1.5em!important;	
}	
.post_content h2{
   font-size: 1.3em;
}
.post_content h3{
   font-size: 1.2em;	
}
.post_content h4{
   font-size: 1.1em;	
}
.post_content h5{
   font-size: 1.0em;	
}	
}

.post_content td, .post_content th{
	background:none;
}

.post_content table ul{
	margin-bottom:0;
}

.post_content table ul li{
	text-align:left;
	padding-bottom: 0;
    line-height: 1.8;
}




/* ーーーーーーーーーーーーーーーーーーーーーーークイックタグーーーーーーーーーーーーーーーーーーーーーーーー */
/* 全体設定 */
.box{
    padding: 1.5em 1em 0.5em;
    margin: 0em 0em 2em;
}
.box p {
    margin: 0!important;
    padding: 0px 0px 1em 0em;
	  line-height: 1.4;
}
.box ul {
    margin: 0;
    padding: 0 0 0;
}

.box ol {
    margin: 0;
     padding: 0 0 0;
}

.box li {
	padding:0 0 1em 0.5em;
	margin:0;
	 line-height:1.3;
}

/* イラスト付き吹き出し */
/* 共通 */
 
.balloon-simple {
 width: 100%;
 margin: 20px 0;
 overflow: hidden;　
}
 
.balloon-simple .icon-right img,
.balloon-simple .icon-left img{
 width: 100%;
 border-radius: 50%;　//アイコンの形を変更できます
 background-size:cover;
}
 
.icon-right p,
.icon-left p{
 text-align: center;
 top: -10px;
 position: relative;
}
 
.balloon-simple .balloon {
 width: 100%; 
}
 
.serif-right,
.serif-left {
 position: relative;
 padding: 20px 30px 20px 15px;
 border-radius: 10px;　//吹き出しの形を変更できます
}
 
.serif-right:after,
.serif-left:after {
 content: "";
 position: absolute;
 top: 15px;
 border-top: 10px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid transparent;
}
 
.serif-right p,
.serif-left p  {
 margin: 0;
 padding: 0;
 color: #fff;　//吹き出しのセリフの文字色を変更できます
}
 
/* ----- 共通 ----- */

.talk {
margin-bottom: 40px;
}

.talk figure img {
width: 100%;
height: 100% !important;
border: 2px solid #ffffff;
border-radius: 50%;
margin: 0;
}

/* 画像の下のテキスト */
.talk-imgname {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}

p.talk-text {
margin: 0 0 8px;
}

p.talk-text:last-child {
margin-bottom: 0px;
}

/* 回り込み解除 */
.talk:after,.talk:before {
clear: both;
content: "";
display: block;
}

/* ----- 左の場合 ----- */

/* 左画像 */
.talk-Limg {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 90px;
height: 90px;
}

/* 左からの吹き出しテキスト */
.talk-Ltxt {
color: #444;
position: relative;
margin-left: 120px;
padding: 1.2em;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
border-radius: 5px;
}

/* 左の三角形を作る */
.talk-Ltxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #F0FFFF;
top: 15px;
left: -20px;
}

.talk-Ltxt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #F0FFFF;
top: 15px;
left: -16px;
}

/* ----- 右の場合 ----- */

/* 右画像 */
.talk-Rimg {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 90px;
height: 90px;
}

/* 右からの吹き出しテキスト */
.talk-Rtxt {
position: relative;
margin-right: 120px;
padding: 1.2em;
border: 3px solid #FFD5EC;
background-color: #FFF0F5;
border-radius: 5px;
}

/* 右の三角形を作る */
.talk-Rtxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #FFF0F5;
top: 15px;
right: -23px;
}

.talk-Rtxt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #FFF0F5;
top: 15px;
right: -19px;
}

/* 左の考え事吹き出しマーク */
.talk-koe-L {
position: relative;
padding: 20px;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
border-radius: 15px;
margin-left: 100px;
}

/* 〇を作る */
.talk-koe-L:before {
content: '';
position: absolute;
display: block;
border-radius: 50%;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
left: -24px;
bottom: 40px;
width: 21px;
height: 21px;
}

/* 〇〇を作る */
.talk-koe-L:after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
left: -40px;
bottom: 40px;
width: 13px;
height: 13px;
}
/*
.koe-L {
position: relative;
padding: 20px;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
border-radius: 15px;
margin-left: 100px;
}

.koe-L::before {
content: '';
position: absolute;
display: block;
border-radius: 50%;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
left: -24px;
bottom: 40px;
width: 21px;
height: 21px;
}

.koe-L::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
border: 3px solid #A7F1FF;
background-color: #F0FFFF;
left: -40px;
bottom: 40px;
width: 13px;
height: 13px;
}
*/
/* 右の考え事吹き出しマーク */
.koe-R {
position: relative;
padding: 20px;
border: 3px solid #FFD5EC;
background-color: #FFF0F5;
border-radius: 15px;
margin-right: 100px;
}

.koe-R::before {
content: '';
position: absolute;
display: block;
border-radius: 50%;
border: 3px solid #FFD5EC;
background-color: #FFF0F5;
right: -24px;
bottom: 40px;
width: 21px;
height: 21px;
}

.koe-R::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
border: 3px solid #FFD5EC;
background-color: #FFF0F5;
right: -40px;
bottom: 40px;
width: 13px;
height: 13px;
}


/* カラーボックス */
.color-box{
	background:#E1F5FE;
	border:4px solid #B3E5FC;
	border-radius:10px;
	padding: 20px;
}
/*赤タイトル付き カラーボックス */
.title-with-redbox {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #f5646e;
}
.title-with-redbox .box-title-red {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f5646e;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.title-with-redbox p {
    margin: 0; 
    padding: 0;
}

/*青タイトル付き カラーボックス */
.title-with-bluebox {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #8aa4ed;
}
.title-with-bluebox .box-title-blue {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #8aa4ed;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.title-with-bluebox p {
    margin: 0; 
    padding: 0;
}

/*吹き出し*/
.balloon-box {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 8px 15px;
    background: #fff0c6;
    border-radius: 30px;
}
.balloon-box:before{font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 15px;
    left: -40px;
    bottom: 0;
    color: #fff0c6;
}
.balloon-box:after{
    font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 23px;
    left: -23px;
    bottom: 0;
    color: #fff0c6;
}
.balloon-box p {
    margin: 0; 
    padding: 0;
}

/* 弱め */
.weak-box{
    background: #f4f2f2;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
	  display:block;
}
/* 強調 */
.strong-box{
    background: #fff;
    border: 3px double #e5e5e3;
	   position:relative;
}
.strong-box:before{
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    width: 5px;
    height: 100%;
}
/* シンプル */
.simple-box{
    background: #8e6f3500;
    border: solid 2.4px #5b5b5b;
	border-radius: 6px;
}

/* 破線ボックス */
.dash-box1{
	border:dashed 2px #d0cfcf;
}

/* 黄色マーカー */
.marker {
  background: linear-gradient(transparent 65%, #fff275 50%);
	font-weight:bold;
  }
/* 赤文字 */
.color-red{
	  color: #ea0000;
    font-weight: bold;
}

/* ボタン */
/*オレンジ */
.btn_box1{
	height:100px;
}
.btn_box1 a{
    display: block;
    background: #f29205;
    border-color: #f29205;
    color: #fff!important;
    padding: 20px 20px;
    margin: 0 auto 2em;
	   width: 80%;
    min-width: 275px;
    text-align: center;
    text-decoration: none;
	  font-size: 0.95em;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    position: relative;
}

.btn_box1 a::after{
	content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 42%;
    left: 15px;
    display: inline-block;
}

.btn_box1 a[target="_blank"]::after{
 content:"";
}

.btn_box1 a:hover:after{
    border-top: solid 2px #f29205;
    border-right: solid 2px #f29205;
}
.btn_box1 a:hover {
	   background: #fff;
	    color:#f29205!important;
	   border:1px solid #f29205;
}
@media only screen and (max-width: 500px) {
.btn_box1 a{
	width:auto;
}
}
/*ーーーーテーブル横スクロールーーーーー*/
/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
margin: 0 0 24px 0;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}
.scroll table{
	margin-bottom:0;
}



/* TOC+ */
#toc_container{
	background: #f3f3f3;
   padding: 1em 2em 0.5em;
	width: 80%;
   margin: 0 auto 2em;
}

#toc_container a{
	text-decoration:none;
	color: #000;
}

#toc_container .toc_title{
	text-align: center;
   background: #636363;
   color: #fff;
}
#toc_container .toc_title .toc_toggle a{
	color:#fff;
}

#toc_container ul li {
    margin-bottom: 0.5em;
    font-weight: bold;
    text-decoration: underline;
}

#toc_container ul li:before {
	content:none;
}
#toc_container li ul{
	margin:0.5em;
   margin-left: 1em;
	text-decoration: underline;

}
#toc_container ul li li{
	margin-bottom:0.5em;
	padding:0;
	font-weight:normal;
	text-decoration: underline;

}
@media only screen and (max-width: 770px) {
#toc_container{
	width:90%;
	padding: 1em 1em 0.5em;	
	}
#toc_container ul li{
	margin-bottom:0.5em;	
	}	
}


/* カードリンク  */
.cardlink {
    width: 100%;
	 padding: 10px;
    margin: 10px 0 2em;
    display: inline-flex;
	box-sizing: border-box;
}
.cardlink_thumbnail img{
	 width: 100px;
    height: 100px;
}
.cardlink_content{
	display: inline-flex;
   align-items: center;
	width:70%;
}
.cardlink .timestamp{
	display:none;
}
.cardlink_excerpt{
	display:none;
}

@media screen and (max-width: 567px){
.cardlink_thumbnail {
  margin-bottom:auto;
}
}


/* ランキングボックス */
.fx__RankingBox {
    margin-bottom: 2em;
}

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


ul.fx__Ranking li {
    padding: 0;
    margin: 0;
}
ul.fx__Ranking li:before {
    content: none;
}

.rankingListContents {
    margin: 0 -15px 1em;
    display: block;
}

.rankingListContentsInner {
    padding: 1em;
    border: 2px solid #005a40;
}

.rankingListTitle {
    border-left: 8px solid #005B40;
    padding: 10px 10px;
    display: inline-block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.left-title {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    position: relative;
}
.leftSub-t {
    display: flex;
}
p.subPart {
    margin-bottom: 5px;
    font-size: 13px;
    vertical-align: middle;
    line-height: 1;
    padding: 3px 5px;
}
p.subPart.colorB {
    color: #fff;
    margin-right: 5px;
    margin-left: 5px;
}
p.subPart.colorB.left02 {
    background: #f29205;
}
p.subPart.colorB.left03 {
    background: #00b9eb;
}

.left-title h3 {
    margin: 0;
    border: none;
    padding: 0;
    font-weight: bold;
}
.right-title {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}



.rankingListdata {
    display: flex;
    width: 100%;
    margin-top: 1em;
}
.rankingListdata-left {
    display: inline-block;
    margin-right: 1em;
    width: 70%;
}
.innerData.leftTopBox {
    padding: 10px;
    border: 1px solid #b1b1b1;
    margin-bottom: 1em;
}
p.dataTitle {
    margin-bottom: 0;
    margin-top: 10px;
    font-size: 15px;
    text-align: center;
    padding: 5px;
    background: #EFF4DD;
}

.rankingListEvaluationTotal {
    text-align: center;
}
.kyocho {
    color: #b20000;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 30px;
    font-weight: bold;
}

.rankingListdata-right {
    display: inline-block;
    width: 100%;
}

p.rankingListCatch {
    font-size: 19px;
    line-height: 1.3;
    font-weight: bold;
    color: #B20000;
    margin-bottom: 1em;
}
p.rankingListTxt {
    font-size: 14px;
    line-height: 1.5;
}
.rankingListCommentTitle {
    background-color: #525252;
    border-left: 8px solid #005B40;
    padding: 10px 10px 10px 10px;
    color: #FFF !important;
    font-size: 15px;
    font-weight: normal;
}
.rankingListComment {
    background-color: #F8F8F8;
    padding: 25px 20px;
    line-height: 2.0em;
}
ul.tokuchoList {
    list-style-type: none;
    padding-left: 2em;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
}
.tokuchoList li {
    list-style-type: none;
    position: relative;
}
.tokuchoList li:before {
    content: ""!important;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #a1bc35;
    position: absolute;
    left: -1.5em;
    top: 0.7em;
}
.tokuchoList h4 {
    border: none;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}


.btnCtaBox {
    width: 100%;
    display: flex;
    margin-bottom: 1em;
}

a.btnCta {
    display: inline-block;
    width: 47%;
    margin: 0 auto;
    text-align: center;
    padding: 13px 0;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    border-radius: 3px;
    box-shadow: 0px 1px 3px #717171;
    border: 2px solid #fff;
    font-weight: bold;
}
a.btnCta.btn-p1 {
    background: #f29204;
}
a.btnCta.btn-p2 {
    background: #01b9eb;
}

.listBtmBTn {
    width: 100%;
    margin: 1em auto 0;
    text-align: center;
    display: inline-flex;
    box-sizing: border-box;
}

.listBtmBTn a {
    text-align: center;
    background: #005a40;
    color: #fff;
    padding: 1em;
    width: 100%;
    display: block;
    border: 2px solid #8baf91;
    text-decoration: none;
    font-weight: bold;
}

a.btnCta:hover,.listBtmBTn a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    transition-property: all;
    transition: 0.2s linear;
    cursor: pointer;
}


.rank_icon {
    text-align: left;
    margin: 0 0 -1px -0.95em;
    display: inline-block;
    width: 100%;
}

.rank_icon img {
    display:table-cell;
} 

.rankText {
    display: inline-block;
    background: #8aaf91;
    font-size: 25px;
    padding: 10px 2em 5px;
    color: #fff;
    border: 2px solid #005940;
    font-weight: bold;
}

span.mini-rankText {
    font-size: 17px;
    vertical-align: text-bottom;
    padding-right: 10px;
}

@media only screen and (max-width: 600px) {
.rankingListdata {
    display: block;
}

.rankingListdata-left{
    width:100%;
}

.dataImg img {
    width: 100%;
}

.rankingListdata-right {
    margin: 1em 0 0;
}

.btnCtaBox{
    margin-bottom: 0;
}

p.subPart{
    font-size:10px;
}
.left-title h3{
    font-size:18px;
}
p.rankingListCatch{
    font-size: 16px;
}

.innerData.leftBottomBox,.innerData.rightBottomBox,.right-title {
    display: none;
}

}