@charset "utf-8";
.sup{
    vertical-align: super;
    font-size: 9px;
    color: #FF0000;
}
.mt50{
	margin-top:50px;
}
.mt30{
	margin-top:30px;
}
.mt20{
	margin-top:20px;
}
.mt10{
	margin-top:10px;
}
.mt5{
	margin-top:5px;
}

ol {
    list-style-type: decimal !important;
}

.columnn-archive-detail {
    padding: 0 30px;
    margin-top: 20px;
    margin-bottom: 45px;
}

.columnn-archive-detail img {
    height: auto;
}

.columnn-archive-detail__ttl {
    font-size: 20px;
    line-height: calc(25 / 20);
    font-weight: normal;
    margin-bottom: 25px;
}

.columnn-archive-detail__main .columnn-archive-detail__flex {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
}

.columnn-archive-detail__flex {
    display: flex;
    align-items: center;
}

.columnn-archive-detail__day {
    font-size: 13px;
}

.columnn-archive-detail__main .columnn-archive-detail__day {
    margin-right: 10px;
}

.columnn-archive-detail__cat {
    font-size: 15px;
    padding: 5px 8px;
    /* max-width: 140px; */
    color: #fff;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

img.alignlef {
    display: block;
    margin-left: 0;
    margin-right: auto;
}

.cat01 {
    background-color: #10104B;
}

.cat02 {
    background-color: #D6AE33;
}

.cat03 {
    background-color: #FF0000;
}

.cat04 {
    background-color: #33BAD6;
}

.cat {
    background-color: #DBDBDB;
}

.cat1 {
    background-color: #10104B;
}

.cat2 {
    background-color: #D6AE33;
}

.cat3 {
    background-color: #FF0000;
}

.cat4 {
    background-color: #33BAD6;
}

.cat5 {
    background-color: #10104B;
}

.cat6 {
    background-color: #D6AE33;
}

.cat7 {
    background-color: #FF0000;
}

.cat8 {
    background-color: #33BAD6;
}

.columnn-archive-detail__icatch {
    margin-bottom: 20px;
}

.columnn-archive-detail__txt {
    word-break: break-all;
    font-size: 13px;
    line-height: calc(20 / 13);
}

.page_link_wrap {
    margin-top: 35px;
}

.columnn-archive-detail__pc_flex .page_link_wrap ul {
    list-style: none;
}

.columnn-archive-detail__side {}

.ranking {

}

.columnn-archive-detail__main {
    margin-bottom: 25px;
}

.ranking__ttl,
.cat_link__ttl {
    font-size: 1.3em;
    font-weight: normal;
    margin-bottom: 25px;
    padding: 20px;
	background:#ECF0F4;
}

.ranking__list {
    margin-bottom: 45px;
}

.ranking__list li {
    margin-bottom: 23px;
}

.ranking__list li:last-child {
    margin-bottom: 0;
}

.ranking__list li>a {
    display: flex;
}

.ranking__list_img {
    max-width: 123px;
    margin-right: 15px;
}

.ranking__list_txt_area {
    width: calc(100% - 138px);
}

.ranking__cat {
    font-size: 11px;
    max-width: 110px;
    padding: 3px 5px;
    color: #fff;
}

.ranking__day {
    font-size: 11px;
}

.ranking__flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ranking__list_txt {
    font-size: 13px;
    line-height: calc(20 / 13);
}

.views {
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
}

.views-cat1 {
    color: #10104B;
}

.views-cat2 {
    color: #D6AE33;
}

.views-cat3 {
    color: #FF0000;
}

.views-cat4 {
    color: #33BAD6;
}

.cat_link {
    margin-top: 20px;
}

.cat_link__list {
    padding-left: 12px;
}

.cat_link__list>li {
    margin-bottom: 20px;
}

.cat_link__list>li:last-child {
    margin-bottom: 0;
}

.cat_link__list>li a {
    font-size: 16px;
}

.columnn-archive-detail__main table {
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.columnn-archive-detail__main table th,
.columnn-archive-detail__main table td {
    border-left: 1px solid #808080;
    border-top: 1px solid #808080;
    padding: 0.5em;
}

.columnn-archive-detail__main ul {
    list-style: inherit;
    padding-left: 1em;
}

.columnn-archive-detail__main ol {
    list-style: decimal !important;
    list-style-position:inside !important;
}

.column-style-border {
    border: solid 2px #ccc;
    border-radius: 5px;
    padding: 30px;
    margin: 30px 0;
}

h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 40px 0 30px;
    border-bottom: solid #000 2px;
    padding: 0.2em 0.3em;
}
h4{
    margin: 40px 0 30px;
    padding: 12px 25px 12px;
    font-size: 20px;
    font-weight: 700;
    background: #f3f3f3;
    border-radius: 3px;
}
h5{
	padding: 0.3em 1em;
	border-left: 3px solid #000;
	font-size:1.1em;
	margin-bottom:15px;
	margin-top:30px;
	letter-spacing:0.1em;
}


/* 引用ブロック*/
blockquote{
    border:2px solid #cfd6d8;
    border-radius:10px;
    padding:20px;
}
blockquote:before{
    position:absolute;
    font-family:'FontAwesome';
    content:'\f10d';
    font-size: 20px;
    color:#8BC0B8;
    top:10px;
    left:10px;
}
blockquote:after{
    position:absolute;
    font-family:'FontAwesome';
    content:'\f10e';
    font-size: 20px;
    color:#cfd6d8;
    right:10px;
    bottom:10px;
}
blockquote cite {
    display: block;
    font-size: 0.8rem;
    text-align: right;
    color: #cfd6d8;
    padding-right:20px;
}

.btn--orange {
    width: 90%;
    color: #000;
    font-size: 1em;
    font-weight: bold;
    background: #fabe00;
    transition: .3s;
	text-align:center;
    display: inline-block;
    padding: 1em 2em;
	margin:30px 0 20px;
}

a.btn--orange:hover {
  color: #fff;
  background: #000;
}
.material-icons{
display: inline-flex;
vertical-align: middle;
	padding-right:0.3em;
}

/* マーカー*/
.marker-orange{
background:linear-gradient(transparent 55%, #edde7b 55%);
font-weight:bold; 
}

.marker-blue{
background:linear-gradient(transparent 55%, #bef1fb 55%);
font-weight:bold; 
}

/* ブログカード*/
.box103 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
	border: solid 1px #ccc;
	border-radius:5px;
	display:block;
	overflow:hidden;
	width:100%;
}
.box103 .box-title {
    position: absolute;
    display: inline-block;
    top: -1px;
    left: -1px;
    padding:7px 10px;
    vertical-align: middle;
    font-size: 0.7em;
    background: #33BAD6;
    color: #fff;
    font-weight: bold;
	z-index:1;
}
.blogcard-img{
	width:100%;
}

.blogcard-title{
	padding:10px;
    font-size:1em;
	display:block;
	width:100%;
	font-weight:bold;
}
.blogcard-title b{
	font-size:0.8em;
}
.blogcard-title a {
	float: right;
	text-decoration: none;
	color: #33BAD6;
}
.blogcard-title a:after {
	font-family:'Material Icons';
	margin-left: -10px;
	content: '\e5c8';
	-webkit-transition: all 0.3s ease;
	        transition: all 0.3s ease;
	vertical-align: middle;
	opacity: 0;
}
.blogcard-title a:hover:after {
	margin-left: 5px;
	opacity: 1;
}

/*---------------------------------
アコーディオンボックス news
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin-bottom:40px;
}

.acbox label{
  width: auto;
  font-size: 19px; /* ラベルの文字サイズ */
  font-weight: bold;
  background: #fde6a2; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:20px 25px;
  cursor: pointer;
  color: #000;
}


.acbox input{
  display: none;
}

.acbox label:after{
  color: #000;
  content:"＋"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -14px;
}

.acbox input:checked ~ label::after {
	content:"－"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 10px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #f1f1f1; /* 開いた部分の背景色 */
  opacity: 1;
}

.acbox input:checked ~ label {
  background: #f1f1f1; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size: 15px; /* 開いた部分の文字サイズ */
  color: #000; /* 開いた部分の文字色 */
  width:100%;
}
.links01 {
	list-style:none !important;
	text-align:center;
	padding-left:0 !important;
	margin-bottom:10px;
}
.character-list{
	background:#fff;
	border:1px solid #DEDEDE;
	padding:20px 10px;
}
.character-list .img{
	margin:0 auto;
	width:70%;
}
.acbox-under .name{
	color:#33BAD6;
	font-weight:bold;
	margin-top:10px;
	font-size:1.5em;
}
.acbox-under .sub-name{
	font-size:1em;
	font-weight:bold;
	color:#000;
}
.person-info{
	border-top:1px solid #DEDEDE;
	padding-top:12px;
	margin-top:12px;
	text-align:left;
	padding-left:0 !important;

}
.person-info li{
	color:#000;
	font-size:1.1em;
}
.person-info span{
	color:#33BAD6;
	margin-right:10px;
	font-weight:bold;
}
.caution{
    clear: both;
	width:100%;
	padding:0 10px;
	font-size:0.7em;
}

/* 吹き出し */
.sb-box {
  position: relative;
  overflow: hidden;
}
/* アイコン画像 */
.icon-img {
  position: absolute;
  overflow: hidden;
  top: 0; /* 画像の位置を上から0に */
  width: 80px; /* 画像の幅 */
  height: 80px; /* 画像の高さ */
}
/* アイコン画像（左） */
.icon-img-left {
  left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
  right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
  border-radius: 50%; /* 画像を丸く表示する */
  border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* アイコンネーム */
.icon-name {
  position: absolute;
  width: 80px; /* ネームの最大幅を画像と同じに */
  text-align: center; /* ネームの位置をセンターに */
  top: 83px; /* ネームの位置を上から83に */
  color: #000; /* ネームのカラー */
  font-size: 10px; /* ネームのフォントサイズ */
}
/* アイコンネーム（左） */
.icon-name-left {
  left: 0; /* ネームの位置を左から0に */
}
/* アイコンネーム（右） */
.icon-name-right {
  right: 0; /* ネームの位置を右から0に */
}
/* 吹き出し */
.sb-side {
  position: relative;
  float: left;
  margin: 0 105px 40px 105px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
  float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 6px; /* 吹き出しを角丸に */
  background: #fff; /* 吹き出しの背景色 */
  color: #333; /* 吹き出し内のテキストのカラー */
  font-size: 15px; /* 吹き出し内のフォントサイズ */
  line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 18px; /* 吹き出し内の上下左右の余白 */
}
.sb-txt > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 16px; /* 吹き出し内の三角の位置 */
  z-index: 3;
}
.sb-txt:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 15px; /* beforeより-1px */
  z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角（左） */
.sb-txt-left:before {
  left: -7px;
  border-width: 7px 10px 7px 0;
  border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右） */
.sb-txt-right:before {
  right: -7px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*目次のデザイン変更*/
.toc_container {
margin-left: 0;
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字サイズ */
border-top:.5rem solid #fabe00;
box-shadow:0 .1rem .3rem rgba(0, 0, 0, 0.16);
background:#f3f3f3; /* 背景 */
line-height: 15px;
margin-top:30px;
}
.toc_title {
font-size: 110%;
font-weight:bold;   /* 文字の太さ　通常はnormal */
color:#000; /* 文字の色 */
margin:10px 0;
}
.toc_list li{
list-style-type:decimal;  /* マークの種類 */
	margin-bottom:10px;
	margin-left:15px;
}
.bgbl{
	background:#bef1fb ;
}
.toc_list .list_komidashi li{
	list-style-type:disc;
}
	.interview-box .interviewee {
	font-weight:bold;
	letter-spacing:0.07em;
	}
.hudo{
	background: #f0706d;
    width: 20%;
    color: #fff;
    font-size: 1.3em;
    letter-spacing: 0.3em;
    text-align: center;
    margin-bottom: -30px;
    font-weight: bold;
    margin-top: 30px;
}
.seido{
	background: #33bad6;
    width: 20%;
    color: #fff;
    font-size: 1.3em;
    letter-spacing: 0.3em;
    text-align: center;
    margin-bottom: -30px;
    font-weight: bold;
    margin-top: 30px;
}
.tool{
	background: #febf00;
    width: 25%;
    color: #fff;
    font-size: 1.3em;
    letter-spacing: 0.3em;
    text-align: center;
    margin-bottom: -30px;
    font-weight: bold;
    margin-top: 30px;
}
.orange{
	color:#FABE00;
}
/* 767px（iPad）以下 */

@media (max-width: 767px) {
  /* アイコン画像 */
  .icon-img {
    width: 60px; /* 画像の幅を-20px */
    height: 60px; /* 画像の高さを-20px */
  }
  /* アイコンネーム */
  .icon-name {
    width: 60px; /* 画像の幅に合わせて-20px */
    top: 62px; /* ネームの位置を上から62に */
    font-size: 9px; /* ネームのフォントサイズを-1px */
  }
  /* 吹き出し（左） */
  .sb-side-left {
    margin: 0 0 30px 78px; /* 吹き出し（左）の上下左右の余白を狭く */
  }
  /* 吹き出し（右） */
  .sb-side-right {
    margin: 0 78px 30px 0; /* 吹き出し（右）の上下左右の余白を狭く */
  }
  /* 吹き出し内のテキスト */
  .sb-txt {
    padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
  }
}

@media screen and (min-width:768px) {
    .ranking__flex {
        justify-content: flex-start;
    }
    .ranking__cat {
        margin-right: 5px;
    }
	.blogcard-img{
	width:28%;
	float:left;
}

.blogcard-title{
	width:72%;
	float: left;
}

/*---------------------------------
アコーディオンボックス news
--------------------------------*/
.links01{
	float:left;
	width:33%;
	padding-left:1% !important;
	}
.character-list {


	}
.character-list .img{
	width:80%;
	}
.person-info{
	padding-right:1%;
		
	}
.person-info li{
	font-size:0.8em;
}
.acbox-under .name{
	font-size:1em;
}
.acbox-under .sub-name{
	font-size:0.5em;
}
@media screen and (min-width:1025px) {
    .main_content {
        margin-top: 97px;
    }
    .no_change_header .header {
        border-bottom: none;
    }
    .columnn-archive-detail {
        padding: 0;
        max-width: 1200px;
        margin: 60px auto 80px;
    }
    .columnn-archive-detail__pc_flex {
        display: flex;
    }
    .columnn-archive-detail__main {
        margin-bottom: 0;
        width: 837px;
        margin-right: 40px;
    }
    .columnn-archive-detail__side {
        width: calc(100% - 877px);
    }
    .columnn-archive-detail__ttl {
        font-size: 30px;
        line-height: calc(45 / 30);
    }
    .columnn-archive-detail__main .columnn-archive-detail__flex {
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    .columnn-archive-detail__main .columnn-archive-detail__day {
        font-size: 15px;
    }
    .columnn-archive-detail__cat {
        font-size: 18px;
        /* max-width: 173px; */
    }
    .columnn-archive-detail__txt {
        font-size: 16px;
        line-height: calc(25 / 16);
    }
    .ranking__ttl,
    .cat_link__ttl {
		background:#ECF0F4;
        font-size: 1.2em;
		padding:20px;
    }
    .ranking__list {
        padding: 0 5px;
    }
    .cat_link__list {
        padding-left: 5px;
    }
    .cat_link__list>li a {
        font-size: 18px;
    }
    .page_link_wrap {
        margin-top: 95px;
    }
    .ranking__flex {
        justify-content: space-between;
    }
    .ranking__cat {
        margin: 0;
    }
	.interview-box{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: baseline;
	    padding: 0 0 1rem;
		margin: 0 0 1rem;
	}
	.interview-box .interviewee {
    text-align: right;
	letter-spacing:0.07em;
	}
	.interview-box .content {
    text-align: left !important;
}
	
}