@charset "UTF-8";

/*=========================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　共通 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===========================================================================*/

/* ------------------------ Main ------------------------ */
body > main {
  background: #f6f6f6;
}

body{
  font-family: "Avenir Next", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MSPGothic", sans-serif !important;
  background-color: #ffffff !important;
  color: #404454 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* ------------------------ Container ------------------------ */
main .container {
  max-width: 864px;
}

@media screen and (max-width:768px){
  
  main .container {
    padding: 0 15px;
}
  
}

/* ------------------------ SubNav ------------------------ */
.container nav.sub-nav {
  padding-bottom: 0;
  margin-bottom: 20px;
  align-items: start;
}
@media screen and (max-width:768px){
  
  .container nav.sub-nav {
    display: block;
  }

}

/* ------------------------ Header ------------------------ */
header.page-header {
  margin-bottom: 40px;
  justify-content: flex-start;
  border-left: 8px solid rgba(29, 146, 215, 1);
  vertical-align: middle;
}

/* ------------------------ H1 ------------------------ */
header.page-header h1 {
  font-size: 26px;
  font-weight: bold;
  border-bottom: none;
  padding: 5px 0 5px 20px;
  flex-grow: 0;
  margin: 0;
  line-height: 1.4;
}

/* ------------------------ BreadCrumbs ------------------------ */
ol.breadcrumbs {
  margin-right: 20px;
}
ol.breadcrumbs li a,
ol.breadcrumbs li a:active,
ol.breadcrumbs li a:visited {
  color: #666;
}

.sub_banner_box {
  margin: 30px 0 0;
}
.sub_banner_box img {
  width: 100%;
}
.sub_banner_box img:hover {
  opacity: 0.8;
}

/* ------------------------ Accordion ------------------------ */
.accordion {
  border: 1px solid #CDCED2;
  border-radius: 8px;
  background: #fff;
}

.accordion > summary {
  cursor: pointer;
  list-style: none;          /* Safariでの三角を消す */
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color:#1097DE;
}

.article-body code {
  background: #f7f7f7;
  border: none !important;
  border-radius: 0px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.code_escape > pre{
  background: #FAFAFA;
  margin:0;
  line-height:1.5;
}

/* 擬似アイコン（▶︎ / ▼） */
.accordion > summary::before {
  content: "▸";
  transition: transform .2s;
}
.accordion[open] > summary::before {
  transform: rotate(90deg);
}

.accordion .code_escape {
  padding: 0 16px 16px;
}

/* 開閉をスムーズに（max-heightトリック） */
.accordion .code_escape {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.accordion[open] .code_escape {
  grid-template-rows: 1fr;
}
.accordion .code_escape > * { overflow: auto; }
/*=========================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　header ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===========================================================================*/

header.header {
  background:#fff;
  /* box-shadow:0 2px 8px rgba(30,30,80,.1); */
  /* left:0; */
  /* position:fixed; */
  /* top:0; */
  width:100%;
  max-width: 100%;
  /* z-index:24; */
  /* display: block; */
  /* height: 39px; */
  padding: 0 2%;
  margin-bottom: 6px;
}

.hedaer_inner {
    margin: 0 auto 15px;
    position: relative;
    align-items: center;
    display: flex;
    height: 54px;
    justify-content: space-between;
}

.hedaer_inner .logo {
    margin-top: 20px;
}
.hedaer_inner .logo img {
 	max-height: 40px;
}

.header_nav{
  -ms-flex-align:center;
  align-items:center;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
  margin-top: 20px;
}

.header_list{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  justify-content: flex-end;
}

.header_nav_item>a{
  background-position:left center;
  background-repeat:no-repeat;
  color:rgba(29, 146, 215, 1);
  display:block;
  font-size:14px;
  line-height:18px;
  text-decoration:none;
}
.header_nav_item>a:hover{
  opacity: 0.8;
  text-decoration: none;
}
.header_nav a:hover img {
  opacity: 0.8;
}

.open_button{
  	text-align: center;
    padding: 13px 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
  	background:#e9911f;
  	font-size: 14px;
}
.open_button:hover {
  opacity: 0.8;
}

a.header_nav_item--new{
  display: none;
}

.header_nav_item--contact{
  background-image:url(/hc/theming_assets/01HZM486M1A5V6RDY81BBTSJ56);
  background-size:24px;
  font-weight:400;
  margin-left:40px;
  padding-left:35px;
}

.header_nav_item--login{
  background-image:url(/hc/theming_assets/01HZM486SBPPADV1KH9VG7WRVE);
  background-size:16px;
  font-weight:700;
  margin-left:40px;
  padding-left:22px;
}

@media screen and (max-width:1000px){
  .hedaer_inner .logo img {
  	max-height: 28px;
	}
}

@media screen and (max-width:768px){
  
  header.header {
    height: 70px;
  }
  
  .hedaer_inner .logo img {
  	max-height: 22px;
	}

  .header_list{
    flex-wrap: wrap;
    text-align: right;
    align-items: center;
    margin-left: 20px;
  }

  .header_nav_item>a {
      font-size: 12px;
      line-height: 1.2;
  }

  .open_button.header_nav_item--new{
    padding: 5px 20px ;
    background: #e9911f;
    border-radius: 4px;
  	display: inherit;
  	color: #fff;
  	font-weight: bold;
    font-size: 12px;
  }

  .header_nav_item--contact{
    background-size:12px;
    background-position: 2px 4px;
    margin-left:20px;
    padding: 8px 0 8px 17px ;
  }

  .header_nav_item--login{
    background-size:12px;
    background-position: 2px 4px;
    margin-left:20px;
    padding: 8px 0 8px 17px ;
  }

  .only-pc{
    display:none
  }
}

@media screen and (max-width:360px){
  .header_list {
    margin-left:10px;
  }
  .open_button.header_nav_item--new{
    padding: 5px ;
  }
  .header_nav_item--login {
    margin-left:10px;
  }
  .header_nav_item--contact{
    margin-left:10px;
  }

}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 MODAL 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.modal_wrap input{
    display: none;
}

.modal_overlay{
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
		-ms-overflow-style: none;
}

.modal_trigger{
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ------------------------ MODAL inner ------------------------ */

.modal_content{
    position: relative;
    align-self: center;
    width: 830px;
    padding: 25px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
  	border-radius: 5px;
}

.modal_content h2 {
  line-height: 1.4;
}

.close_button{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay{
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s;
}

.modal_item .md-table_modal {
    table-layout: fixed;
    width: 100%;
}
.button_area {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto 20px;
}
.button_item {
    position: relative;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  	width: calc(50% - 10px);
  	font-weight: bold;
}
.button_item a:hover,
.button_item a:active,
.button_item a:visited,
.button_item a:focus{
  opacity: 0.8;
  text-decoration: none;
}
.button_item p {
  margin: 0;
  padding: 0;
}
.ukeru_button {
    background-color: #0081bd;
    border-radius: 5px;
}
.ukeru_button .image-area img.create_account_uk_logo {
    height: 30px;
    width: auto;
}
.new_button {
    background-color: #ea9200;
    border-radius: 5px;
}
.new_button .image-area img.create_account_new_logo {
    height: 29px;
    width: auto;
}
.image-area {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}
.button_word-no {
    top: 0;
    padding-left: 8px;
}
.button_word-de {
    top: -2px;
    padding-left: 7.16px;
}
.button_word-de, .button_word-no {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    position: relative;
    left: 0;
}
.button_item p.button_text {
    font-size: 26px;
    color: #fff;
    text-align: center;
  	padding: 0;
  	margin: 15px 0 30px;
}
.attention_text {
    font-size: 12px;
    color: #fb6256;
    text-align: left;
    line-height: 18px;
  	margin: 0;
}
.attention_text a {
    font-size: 12px;
    font-weight: 400;
    vertical-align: inherit;
  	text-decoration: underline;
}
.attention_text a:hover {
  	text-decoration: none;
}

@media screen and (max-width:768px){
  
  .modal_content{
    width: calc(100% - 30px);
    min-width: auto;
  }
  .modal_content h2 {
    font-size: 18px;
  }
  .button_area {
    display: block;
  }
  .button_item {
    width: 100%;
  }
  .ukeru_button {
    margin-bottom: 20px;
  }
  .ukeru_button .image-area img.create_account_uk_logo {
    height: 25px;
  }
  .button_item p.button_text {
    font-size: 18px;
    margin: 10px auto 20px;
  }
  .image-area {
    margin-top: 20px;
  }
  
}


/*=========================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　home_page ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===========================================================================*/

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 main 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */
main {
/*   padding: 70px 0; */
  padding: 0 0 70px 0;
}

main .section.hero {
  background-position: center;
  background-size: contain;
  background-image: url(/hc/theming_assets/01HZM48BXXMNX0S7HJG5Q0YM96);
  height: auto;
  padding: 25px 20px 45px;
}

.hero_inner {
  max-width: 900px;
  margin: 0 auto;
}

h1.search_title {
  font-size: 28px;
  margin: 0 0 20px 0;
  border-bottom: none;
  padding-bottom: 0;
  font-weight: bold;
  color: #fff;
}

/* ------------------------ Keyword ------------------------ */
.kw_balloon {
  position: relative;
  margin: 15px 0 0;
  padding: 15px 20px;
  color: #333;
  background: #fff;
  border-radius: 5px;
}
.kw_balloon::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 30px;
  margin-left: -15px;
  border: 8px solid transparent;
  border-bottom: 12px solid #fff;
}
.kw_balloon dl.keyword {
  padding: 0;
  margin: 0;
}
dl.keyword dt {
  font-weight: bold;
  display: block;
  text-align: left;
  margin-bottom: 3px;
}
dl.keyword dd {
  margin-left: 0;
}
dl.keyword dd ul {
  list-style: none;
  text-align: left;
}
dl.keyword dd ul li {
  display: inline-block;
  margin-right: 20px;
  font-size: 14px;
}
dl.keyword dd ul li a {
  text-decoration: underline;
}
dl.keyword dd ul li a:hover {
  opacity: 0.8;
  text-decoration: none;
}

@media screen and (max-width:768px){
  main .section.hero {
    padding: 40px 20px;
  }
  h1.search_title {
  font-size: 24px;
  margin: 0 0 20px;
	}
  dl.keyword {
  flex-wrap: wrap;
 }
  dl.keyword dd {
  margin-left: 0;
}
  dl.keyword dd ul {
    text-align: left;
 }
  dl.keyword dd ul li {
    font-size: 12px;
  }
  
}


/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 sub nav 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.sub_nav {
  width: 100%;
  background: #fff;
  border-top: 1px solid #ddd;
}

.sub_nav ul.nav_list {
  padding: 15px 13px 16px;
  text-align: center;
  display: flex;
  justify-content: center
}
.sub_nav ul.nav_list li {
  font-weight: bold;
  font-size: 14px;
  width: 198px;
  padding: 12px 0 13px;
  border: 1px solid rgba(29, 146, 215, 1);
	position: relative;

}
.sub_nav ul.nav_list li:before{
  background: url(/hc/theming_assets/01HZM48B7BM781SYT9MX9EFB32);
	content: "";
  background-size: contain;
  background-repeat: no-repeat;
  width: 10px;
  height: 8px;
  position: absolute;
  top: 19px;
  left: 15px;
  display: block;
  margin: auto;
}
.sub_nav ul.nav_list li:not(:last-child) {
  margin-right: 15px;
}
.sub_nav ul.nav_list li a {
  color: #333;
  padding: 10px 30px;
}
.sub_nav ul.nav_list li a:hover {
  text-decoration: none;
}
.sub_nav ul.nav_list li:hover {
  opacity: 0.8;
}

@media screen and (max-width:1000px){
  .nav_list .sp_only {
    display: block;
  }
  .sub_nav ul.nav_list li:first-child {
  	margin-left: 0;
  }
  .sub_nav ul.nav_list {
    flex-wrap: wrap;
    align-content: space-between;
    padding: 0;
    text-align: left;
  }
  .sub_nav {
    background: none;
    border-top: none;
    border-bottom: none;
  }
  .sub_nav ul.nav_list li {
  	width: 50%;
  	font-size: 12px;
  	border: 1px solid #cccccc;
  	background: url(/hc/theming_assets/01HZM4874G5737ATG0ZGBMK39T) no-repeat 7px center #ffffff;
  	padding: 8px 10px 8px 25px;
    display: -webkit-box; /* safari, Chrome */
  	display: -moz-box;    /* Firefox */
  	display: -o-box;      /* Opera */
  	display: -ms-box;     /* IE */
  	display: box;         /* ベンダープレフィックスなし */
 	 	-webkit-box-align: center; /* safari, Chrome */
  	-moz-box-align: center;    /* Firefox */
  	-o-box-align: center;      /* Opera */
  	-ms-box-align: center;     /* IE */
  	box-align: center;         /* ベンダープレフィックスなし */    
    margin-top: -1px;
  }
  .sub_nav ul.nav_list li a {
  	padding: 0;
    display: block;
  }
  .sub_nav ul.nav_list li:nth-child(odd){
  	border-left:none;
  	border-right:none;
  }
  .sub_nav ul.nav_list li:nth-child(even){
  	border-right:none;
  }
  /*.sub_nav ul.nav_list li:nth-child(-n + 2) {
    border-bottom: none;
  } 
  .sub_nav ul.nav_list li:last-child {
    margin-top: -1px;
    width: 100%;
  }  */
}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 container 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */
#top_page.container {
  max-width: 1050px;
}

.top_banner_box {
  margin-bottom: 30px;
}
.top_banner_box img {
  max-width: 100%;
}
.top_banner_box img:hover {
  opacity: 0.8;
}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 panel area 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.blocks_box {
  width: calc(50% - 20px);
}
.blocks_panel {
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
  color: #333;
  display: flex;
  justify-content: center;
  margin: 0 0 30px;
  text-align: center;
  background: #fff;
  width : 100%;
}

.blocks-item {
  background: #fff;
}
.itemblue {
  border: 1px solid rgba(29, 146, 215, 1);
}


.section-inner {
margin-top: 10px;
}
.categories {
  padding-top: 30px;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width:768px){
  section.knowledge-base section.categories {
    padding-top: 30px;
  }
}

.title_box {
  display: flex;
 	justify-content: space-between;
}

h2.option_title span {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  margin: 10px 0 0 10px;
  line-height: 1.3;
}

p.annotation {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  line-height: 1.2;
}

.section h2.section_title {
  text-align: left;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 20px;
  line-height: 1;
  width: calc(50% - 20px);
	position: relative; 
}
.section h2.section_title::before{
  content: "";
	width: 6px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: rgba(29, 146, 215, 1);
}
a.blocks-item-link img.jol_logo {
  margin-bottom: 10px;
}
.blocks-item-link.option_box {
  padding: 3px 3px 30px;
}
.blocks-item-link{
  width:100%;
  padding: 35px 8px 11px!important;
  min-height: 228px;
  line-height: 24px;
}
.option_label {
  background: #e9911f;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  display: block;
  border-radius: 2px;
  padding: 5px;
  margin-bottom: 20px;
}

ul.blocks-list {
	justify-content: space-between!important;
}

li.blocks-item, li.blocks-item_4columns {
  margin: 0 0 30px!important;
  border: 1px solid rgba(29, 146, 215, 1)!important;
}
li.blocks-item_1columns{
  width: 100%!important;
  margin: 0 0 30px!important;
  border: 1px solid rgba(29, 146, 215, 1)!important;
  background: #fff;
  border-radius: 4px;
}
.blocks-item_1columns .blocks-item_title{
  padding: 18px 0 0 30px;
  font-size: 20px!important;
  color: #333;
}
li.blocks-item_1columns a.blocks-item-link{
  min-height: 100%;
  padding: 39px!important;
  display: flex;
  justify-content: center;
}
li.blocks-item {
  width: calc(50% - 20px);
}
li.blocks-item_4columns {
  width: calc(33% - 20px);
}
.blocks-item img {
  max-width: 100%;
}


@media screen and (max-width:768px){
  h2.section_title {
    padding-left: 0;
  }
  .section h2.section_title {
    width: 100%;
  }
  li.blocks-item,
  .option_box,
  .blocks_box,
  li.blocks-item_4columns{
  width: 100%;
	}
}

li.blocks-item a.blocks-item-link h2.blocks-item_title,
.blocks_panel h2.blocks-item_title,
li.blocks-item_4columns a.blocks-item-link h2.blocks-item_title {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}
li.blocks-item_4columns a.blocks-item-link{
  min-height: 100%;
}
li.blocks-item_4columns a.blocks-item-link h2.blocks-item_title {
  font-size: 18px;
}

li.blocks-item a.blocks-item-link p.blocks-item_txt,
.blocks_panel p.blocks-item_txt,
li.blocks-item_4columns a.blocks-item-link p.blocks-item_txt {
  color: #AAA;
  font-size: 13px;
  font-weight: normal;
  margin-top: 16px;
}
li.blocks-item_4columns a.blocks-item-link p.blocks-item_txt {
  font-size: 12px;
}

li.blocks-item:hover, li.blocks-item:focus, li.blocks-item:active,
.blocks_panel:hover, .blocks_panel:focus, .blocks_panel:active, 
li.blocks-item_4columns:hover, li.blocks-item_4columns:focus, li.blocks-item_4columns:active,
li.blocks-item_1columns:hover, li.blocks-item_1columns:focus, li.blocks-item_1columns:active {
  opacity: 0.8;
}

li.blocks-item img,
.blocks_panel img,
li.blocks-item_4columns img {
  
}


a.btn_news {
  background: url(/hc/theming_assets/01HZM487A1H9E8KFA873E1GZ13) no-repeat 80px center #fff;
  display: block;
  text-align: center;
  line-height: 44px;
  height: 48px;
  width: 280px;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin: 30px auto 70px;
}
a.btn_news:hover {
  text-decoration: none;
  opacity: 0.8;
}

ul.blocks_tb {
  justify-content: flex-start!important;
}
li.blocks-item, li.blocks-item_4columns {
  background: #fff;
}
li.blocks-item_4columns.list_tb {
  margin-right: calc(1% + 24px)!important;
}
@media screen and (max-width:768px){
  li.blocks-item_4columns.list_tb {
  margin-right: 0!important;
  }
  h2.option_title span {
    display: block;
    margin: 10px 0 0 0 ;
  }
}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 FAQ 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.faq_box {
  border-radius: 5px;
  padding: 8px 30px 30px 30px;
  background: #fff;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 40px;
}

.faq_box h3 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border: none;
  padding: 0;
}

.faq_box ul {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
}

.faq_box ul li {
  background: url(/hc/theming_assets/01HZM48BBZPNZANQ8SZR13K1DQ) no-repeat 0 7px;
  width: calc(50% - 40px);
  list-style: none;
  padding-left: 15px;
  margin-bottom: 7px;
  text-align: left;
  font-size: 16px;
}

.faq_box ul li:nth-child(odd) {
  margin-right: 80px;
}

.faq_box ul li a {
  color: #333;
  text-decoration: underline;
}

.faq_box ul li a:hover {
  text-decoration: none;
  opacity: 0.8;
}

@media screen and (max-width:768px){
  .faq_box {
    padding: 30px 20px;
  }
  .faq_box ul {
    display: inherit;
    width: auto;
  }
  .faq_box ul li {
    width: auto;
    margin-bottom: 15px;
  }
  .faq_box ul li:nth-child(odd) {
  	margin-right: 0;
  }
}

a.btn_faq {
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-weight: bold;
  height: 48px;
  width: 280px;
  text-decoration: none;
  color: #fff;
  background: rgba(29, 146, 215, 1);
  border-radius: 5px;
  margin-top: 30px;
}
a.btn_faq:hover {
  opacity: 0.8;
  text-decoration: none;
}

  #block04_FQ {
    padding-top: 80px;
    margin-top: -80px;
  }


.sp_only {
  display: none;
}
@media screen and (max-width:768px){
  h2.option_title.sp_only {
  	width: 100%;
    padding-top: 80px;
  	margin-top: -60px;
	}
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}

/*=========================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　footer ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===========================================================================*/

footer.footer {
  margin-top: 0;
}
.footer a{
  color: #666;
}

.footer_recruit {
	width: 260px;
}
.footer_recruit_inner {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.footer_recruit_logo {
	display: inline-block;
}
.footer_recruit_logo img {
    width: 100px;
}
.footer_recruit_copyright {
    color: #435b67;
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 6px;
    margin-left: 10px;
    margin-right: 0;
    text-decoration: none;
    white-space: nowrap;
}
.footer_recruit_link {
    line-height: 1;
    margin-top: 5px;
}
.footer_recruit_link a {
    color: #435b67;
    font-size: 10px;
    font-weight: 700;
    text-decoration: underline;
}

/*=============================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　category_page ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===============================================================================*/

.category-content .section-tree section.section {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 30px;
  flex: 0 0 48%;
}
.category-content .section-tree section.section h3 {
  font-size: 18px;
  border-bottom: 3px solid rgba(29, 146, 215, 1);
  font-weight: bold;
  line-height: 1.3;
  padding: 20px;
  margin-bottom: 25px;
}
ul.article-list {
  padding: 0 20px 30px;
}

ul.article-list li.article-list-item:last-child {
  margin-bottom: 0;
}

.category-container .category-content {
  flex: 100%;
  margin-bottom: 40px;
}

/*=============================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　section_page ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===============================================================================*/
.section-container{
  margin-bottom: 70px;
}
.section-container section.section-content {
  flex: 1;
}

.section-container section.section-content ul.article-list {
  background: #fff;
  padding: 25px 20px 30px;
  border-radius: 10px;
}

ul.article-list li.article-list-item {
  border: none;
  font-size: 16px;
  padding: 0;
  margin-bottom: 15px;
}
ul.article-list li.article-list-item a::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
  	background: rgba(29, 146, 215, 1);
  	border-radius: 50%;
    vertical-align: 2px;
}
li.article-promoted .icon-star::before {
  display: none;
}
/*=============================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　article_page ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===============================================================================*/

.article-container article.article {
  flex: 1;
  max-width: 100%;
  padding:0;
  margin-bottom: 70px;
}

header.article-header {
  margin-bottom: 40px;
/*   justify-content: flex-start;
  border-left: 8px solid rgba(29, 146, 215, 1);
  vertical-align: middle; */
}

header.article-header h1.article-title {
		font-size: 32px;
    /* font-weight: bold; */
    border-bottom: none;
    /* padding: 5px 0 5px 20px; */
    /* flex-grow: 0; */
    /* margin: 0; */
    line-height: 1.4;
    padding: 0;
    margin: 0;
}

section.article-info .article-content {
  padding: 0;
  border-radius: 10px;
  margin: 40px 0 0;
}


.article-content .article-body h1,
/* .article-content .article-body h2,
.article-content .article-body h3,
.article-content .article-body h4 */{
  padding-top: 70px;
  margin-top: -70px!important;
}

.article-content footer {
  margin-top: 50px;
}

ul.share li a {
  color: #666;
}
ul.share a:hover::before {
  color: #666;
  opacity: 0.8;
}
section.article-relatives > * {
  margin: 0 0 20px 0;
}
.related-articles {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
article.article .article-relatives {
    border-top: none; 
    /* background: #fff; */
    /* border-radius: 10px; */
    padding: 40px 0 0;
}

section.article-relatives {
  flex-direction: column;
  gap: 20px;
}
section.article-relatives section.recent-articles h3,
section.article-relatives section.related-articles h3 {
  font-size: 18px;
  font-weight: bold;
  padding: 0;
  margin: 0 0 15px 0;
  border: none;
}
section.related-articles ul li,
section.recent-articles ul li {
  font-size: 16px;
  position: relative;
}
section.related-articles ul li:last-child,
section.recent-articles ul li:last-child {
  margin-bottom: 0;
}
section.related-articles ul li::before,
section.recent-articles ul li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
  	background: rgba(29, 146, 215, 1);
  	border-radius: 50%;
    vertical-align: 2px;
}
section.related-articles ul li a,
section.recent-articles ul li a {
  text-decoration: none;
  color: #333;
}

section.related-articles ul li a:hover,
section.recent-articles ul li a:hover {
  text-decoration: underline;
}

.article-content footer {
  margin-top: 50px;
}
footer .article-votes {
  padding: 20px 0;
}
footer .article-votes p {
  font-size: 14px;
  line-height: 1.5;
}


/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 記事内の装飾 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

/* ------------------------ common ------------------------ */

.br_pc {
  display: block;
}
.br_sp {
  display: none;
}
@media screen and (max-width:768px){
  .br_pc {
    display: none;
  }
  .br_sp {
    display: block;
  } 
}

:focus {
    outline: none !important;
}

.mb-0 {
 margin-bottom: 0 !important; 
}

.mb-5 {
 margin-bottom: 5px !important; 
}

.mb-10 {
 margin-bottom: 10px !important; 
}

.mb-15 {
 margin-bottom: 15px !important; 
}

.mb-20 {
 margin-bottom: 20px !important; 
}

.mb-25 {
 margin-bottom: 25px !important; 
}

.mb-30 {
 margin-bottom: 30px !important; 
}

.mb-40 {
 margin-bottom: 40px !important; 
}

.mb-50 {
 margin-bottom: 50px !important; 
}

.mb-60 {
 margin-bottom: 60px !important; 
}

.mt-0 {
 margin-top: 0 !important; 
}

.mt-5 {
 margin-top: 5px !important; 
}

.mt-10 {
 margin-top: 10px !important; 
}

.mt-15 {
 margin-top: 15px !important; 
}

.mt-20 {
 margin-top: 20px !important; 
}

.mt-25 {
 margin-top: 25px !important; 
}

.mt-30 {
 margin-top: 30px !important; 
}

.mt-40 {
 margin-top: 40px !important; 
}

.mt-50 {
 margin-top: 50px !important; 
}

.mt-60 {
 margin-top: 60px !important; 
}

.mr-10{
 margin-right: 10px !important; 
}

.ml-0{
 margin-left:  0 !important; 
}

.pt-0{
  padding-top:0 !important;
}

.gap-15 {
  display: grid;
  gap: 15px 0;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.img-fit{
  display: flex;
  justify-content: center;
  align-items: start;
}

.thead-sticky{
  position: sticky;
  top: 0;
}

.red{
 color:#C60000;
}

.hidden{
 	visibility: hidden;
	height: 0; 
  margin: 0;
  padding: 0;
}

.article-body {
  font-size: 16px;
	line-height: 1.6 !important;
}

.article-content .article-body p {
  margin: 0;
}

figure{
/*   margin: 0 !important; */
  margin: 0;
}

figure.wysiwyg-table {
	  margin: 0;
}


/* ------------------------ h1-h4 ------------------------ */
.article-content .article-body h1,
.article-content .article-body h2,
.article-content .article-body h3,
.article-content .article-body h4 {
  border: none;
  padding-bottom: 0;
  font-weight: bold;
  line-height: 1.5;
}
.article-content .article-body h1 {
  font-size: 32px;
  line-height: 1.5;
}
.article-content .article-body h2 {
  font-family: "Avenir Next", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MSPGothic", sans-serif !important;
  font-size: 32px;
  font-weight: normal;
  margin: 60px 0 15px;
  line-height: 1.5;
  letter-spacing:1px;
}

/* .article-content .article-body h2:first-child {
  padding-top: 70px;
  margin-top: -70px;
} */

.article-content .article-body h3 {
  font-family: "Avenir Next", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MSPGothic", sans-serif !important;
  font-size: 24px;
  font-weight: normal;
  padding:0 0 8px 0;
  margin: 40px 0 20px;
  border-bottom:1px solid #CDCED2;
  line-height:1.5;
  letter-spacing:1px;
}
.article-content .article-body h4 {
  font-family: "Avenir Next", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MSPGothic", sans-serif !important;
  font-size: 20px;
  font-weight: bold;
  margin: 40px 0 15px;
  line-height:1.6;
  letter-spacing:1px;
}

.article-h2{
  font-size: 32px !important;
  font-weight: normal !important;
/*   margin:32px 0 !important; */ 
  margin: 60px 0 15px;
  padding:0 !important;
  border:none !important;
  line-height:1.5 !important;
  letter-spacing:1px !important;
}

.article-h3{
  font-size: 24px !important;
  font-weight: normal !important;
/*   margin:32px 0 !important; */
  margin: 40px 0 20px;
  padding:0 0 8px 0 !important;
  border-bottom:1px solid #CDCED2 !important;
  line-height:1.5 !important;
  letter-spacing:1px !important;
}

.article-h4{
  font-size: 20px !important;
  font-weight: bold !important;
/*   margin:16px 0 !important; */
  margin: 40px 0 15px;
  padding:0 !important;
  border-bottom:none !important;
  line-height:1.6 !important;
  letter-spacing:1px !important;
  color:#404454 !important;
}


/* ------------------------ fontsize ------------------------ */
.article-content .wysiwyg-font-size-small {
  display: block;
  line-height: 1.5;
  font-size: 12px;
}
.article-content .wysiwyg-font-size-medium {
  font-size: 16px;
}
.article-content .wysiwyg-font-size-large {
  font-size: 18px;
}
.article-content .wysiwyg-font-size-x-large {
  font-size: 20px;
}


/* ------------------------ ol / ul ------------------------ */
.article-content .article-body ol,
.article-content .article-body ul {
  border: none;
  padding:0;
}
.article-content .article-body ol {
  padding: 0;
  counter-reset: my-counter;
  list-style: none;
}
.article-content .article-body ol li {
/*   padding: 0 0 7px 25px; */
  padding: 0 0 0 25px;
  position: relative;
}
.article-content .article-body ol li::before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #0C47DC;
  font-family: "Avenir Next", sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  display: block;
  float: left;
  line-height: 20px;
  margin-left: -25px;
  text-align: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: 3px;
}
.article-content .article-body ul li {
  margin-top:8px;
  position: relative;
  padding: 0 0 0 24px;
}
.article-content .article-body ul li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  left: 10px;
  top:10px;
  background: #666976;
  border-radius: 50%;
  vertical-align: 2px;
  position: absolute;
}

.twocol--inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:32px;
  padding-bottom:0 !important;
}

.twocol--inner img{
  margin: 0 !important;
}

.twocol--l {
/*   width: 45%; */
  width: 46.5%;
}

.twocol--r {
  /*    width: 53%; */
  width: 50%;
  margin-left: 16px;　
}

.twocol--table--inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 15px;
}

.twocol--table--inner table {
    margin: 0;
}

.twocol--table--l {
/*   width: 47%; */
   width: 48.5%;
}

.twocol--table--r {
/*   width: 51.5%; */
  width: 48.5%;
}

li.twocol--table--inner + li.twocol--table--inner {
  margin-top: 24px;
}

.onecol--inner{
  padding-bottom: 0 !important;
  margin-top:32px !important;
}

.onecol--inner img{
  margin: 16px 0 0 0 !important;
}

.alert-twocol--inner{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:16px;
  padding-bottom:0 !important;
}

.alert-twocol--inner img{
  margin: 0 !important;
}

.alert-twocol--l {
  width: 46.5%;
}

.alert-twocol--r {
/*   width: 51.5%; */
  width: 48.5%;
}

/* ------------------------ a ------------------------ */
.article-content .container{
  color: #1097DE !important; 
}

.article-content .article-body a {
/*   text-decoration: underline; */
  padding-left: 3px;
  color: #1097DE !important;
  position: relative;
}

.article-content .article-body a::before {
  display: inline-block;
  line-height: 1;
  position: relative;
	right: 0;
  top: 0;
  margin-right: 5px;
  content: "";
  width: 20px;
  height: 20px;
  background: url(/hc/theming_assets/01KD4KRSKPJD1MSN14XVT8FD5T) left .2em no-repeat transparent;
}

.article-content .article-body .outline--wrapper a::before {
  display: none;
}

.article-content .article-body a:hover {
/*   text-decoration: none;
  opacity: .8; */
  text-decoration: underline;
}

.article-content .article-body a[target="_blank"] {
  position: relative;
}
.article-content .article-body a[target="_blank"]::before {
  display: inline-block;
  line-height: 1;
  position: relative;
  right: 0;
  top: 2px;
  margin-left: .3em;
  content: "";
  width: 1rem;
  height: 1rem;
  background: url(/hc/theming_assets/01HZM487KXKDG8ZMA00SE4XTYW) left .2em no-repeat transparent;
}

/* ------------------------ index ------------------------ */
.outline--wrapper{
  background: #F3F3F3;
	margin: 32px 0;
  padding: 32px;
}

.outline--wrapper ul>li{
  padding: 0 0 0 24px;
  list-style: none;
  position: relative;
  text-indent: 0;
  line-height: 1.5;
}

.outline--wrapper a{
  line-height: 1.5;
  text-align: left;
  padding: 0;
  margin: 0;
  color:#1097DE;
}

.outline--title{
  font-weight:bold;
  padding-bottom:8px;
  line-height:1;
}

/* ------------------------ table ------------------------ */
.article-content table th{
  border: 1px solid #CDCED2;
  padding: 8px;
  margin: 0;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
  line-height:1.6;
  background: #F3F3F3;
}

.article-content table td {
  border: 1px solid #CDCED2;
  padding: 8px;
  margin: 0;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
  line-height:1.6;
  background: #FFFFFF;
}

.article-content table th.vtop,
.article-content table td.vtop {
  vertical-align: top;
}

table{
  margin:16px 0;
  border-top: #CDCED2 1px solid !important;
}

.td-inner{
  counter-reset:my-counter;
}

.td--l{
  padding-left:32px !important;
}

.td--l::before{
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #F06800;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  display: block;
  float: left;
  line-height: 20px;
  margin-left: -24px;
  text-align: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: 3px;
}

/* ------------------------ img ------------------------ */
.article-body img {
  border: solid 1px #CDCED2;
  margin: 20px 0;
  background: #fff;
}
.article-body img.noLine {
  border: none;
  margin: 0;
}
.article-body p img {
  vertical-align: middle;
}

.twocol--table--r img {
    margin: 0;
}

/* ------------------------ AlertSection ------------------------ */
.article-content .article-body .icon--alert_title {
  background: url(/hc/theming_assets/01KAA9VB6EYSZB988XZBTR4QFK);
  background-repeat: no-repeat;
  background-position: 0 2px;
  background-size: 20px;
  color: #404454;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  padding-left: 28px;
  line-height:1.5;
}

.bg-caution {
  font-size: 16px;
  padding: 16px;
  background-color: #FFF3DF;
  border-radius: 8px;
  border: none;
  margin:16px 0;
}

.bg-caution_indent {
  padding-left: 28px;
}

/* ------------------------ MeritSection ------------------------ */
.article-content .article-body .icon--merit_title {
  background: url(/hc/theming_assets/01KCQFA8FPFT1WRKB1GG8A335Z);
  background-repeat: no-repeat;
  background-position: 0 2px;
  background-size: 20px;
  color: #005EC8;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  padding-left: 28px;
  line-height:1.5;
}

.bg-merit {
  font-size: 16px;
  padding: 16px;
  background-color: #F2F9FD;
  border-radius: 8px;
  border: none;
  margin:16px 0;
}

.bg-merit_indent {
  padding-left: 28px;
}

/* ------------------------ InformationSection ------------------------ */
.article-content .article-body .icon--information_title {
  color: #404454;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height:1.5;
}

.bg-information {
  font-size: 16px;
  padding: 16px;
  background-color: #FFFFFF;
  border-radius: 8px;
  border: none;
  margin:16px 0;
  border: solid 1px #CDCED2;
}

@media screen and (max-width:768px){
/* ------------------------ index ------------------------ */
.outline--wrapper{
  padding: 16px;
}

/* ------------------------ ol / ul ------------------------ */
 .twocol--inner {
  display: block;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:30px;
  padding-bottom:0 !important;
}

.twocol--inner img{
  margin: 0 !important;
}

.twocol--l {
  width: 100%;
}

.twocol--r {
  width: 100%;
  margin-top:16px;
}
  
.twocol--table--inner {
    display: flex;
    flex-direction: column-reverse;
}

.twocol--table--l {
    width: 100%;
}

.twocol--table--r {
    width: 100%;
/*     margin-top: 15px; */
    margin-bottom: 15px;
}

.twocol--table--r img {
  width: 100%;
  height: auto;
  margin: 0;
}
  
li.twocol--inner + li.twocol--inner {
    margin-top: 30px;
}

.alert-twocol--inner{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:15px;
  padding-bottom:0 !important;
}

.alert-twocol--inner img{
  margin: 0 !important;
}

.alert-twocol--l {
  width: 100%;
}

.alert-twocol--r {
  width: 100%;
} 

.alert-twocol--inner{
  display: block;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:15px;
  padding-bottom:0 !important;
}

.alert-twocol--inner img{
  margin: 0 !important;
}

.alert-twocol--l {
  width: 100%;
}

.alert-twocol--r {
  width: 100%;
  margin-top:15px;
}
  


}

/*=============================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　search_results ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===============================================================================*/

.container .search-results {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  flex-direction: column;
}

.container .search-results-list > li:first-child {
  border-top: none;
  padding-top: 0;
}

p.results_number {
  padding:0; 
  margin-left: 20px;
}

.search-results section.search-results-column {
  flex: 1;
}

@media screen and (max-width:768px){
  p.results_number {
  padding: 0 0 5px 0; 
  margin: 0 0 0 20px;
  }
}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 search-result 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

ul.search-results-list li.search-result a.search-result-link {
  font-size: 20px;
  text-decoration: underline;
}
ul.search-results-list li.search-result a.search-result-link:hover {
  text-decoration: none;
  opacity: 0.8;
}
ul.search-results-list li.search-result .search-result-description {
  margin-top: 10px;
  font-size: 14px;
}
ul.search-results-list li.search-result .search-result-description em {
  font-style: normal;
  font-weight: bold;
}

ol.search-result-breadcrumbs {
  margin-top: 10px;
}
ol.search-result-breadcrumbs li {  
  font-size: 12px;
}
ol.search-result-breadcrumbs li a,
ol.search-result-breadcrumbs li a:active,
ol.search-result-breadcrumbs li a:visited {  
  color: #666;
}
ol.search-result-breadcrumbs li a:hover {
  opacity: 0.8;
}

.search-result-breadcrumbs li:last-child::after {
  display: none!important;
}


.section-tree section.section a.see-all-articles,
.section-tree section.section a.see-all-articles:active,
.section-tree section.section a.see-all-articles:visited {
  color: #45AEE5;
  font-size: 14px;
}
.section-tree section.section a.see-all-articles {
  position: relative;
  display: block;
  margin-top: 10px;
  padding: 20px 0;
  text-align: center;
}
.section-tree section.section a.see-all-articles::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    border-top: 2px dotted #eee;
}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 pagination 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

nav.pagination ul li {
  border-radius: 4px;
  border: 1px solid #ccc;
  height: 35px;
  width: 35px;
  margin-bottom: 5px;
}
nav.pagination ul li a,
nav.pagination ul li span {
  font-size: 14px;
  padding: 6px 12px;
}
nav.pagination ul li a,
nav.pagination ul li a:active,
nav.pagination ul li a:visited{
  color: #333;
}
nav.pagination ul li.pagination-current {
  background-color: #efefef;
}
nav.pagination ul li.pagination-current span {
  font-weight: bold;
  color: #333;
}
nav.pagination ul li.pagination-first a,
nav.pagination ul li.pagination-prev a,
nav.pagination ul li.pagination-next a,
nav.pagination ul li.pagination-last a {
  font-size: 18px;
  padding: 2px 12px;  
}



/*=============================================================================
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　MANUAL ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
===============================================================================*/

.article-content .article-body ul.blocks-list li::before {
  content: none;
}
.article-body .section-inner {
	padding: 0;
	margin: 20px 0 0 ;
}
ul.blocks-list li.block_box {
  padding: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  align-items: stretch;
  justify-content: space-between;
  text-align: center;
  color: #333;
  list-style: none;
  width: calc(50% - 20px);
}

@media screen and (max-width:768px){
  ul.blocks-list li.block_box {
    width: 100%;
    margin-bottom: 20px;
  }
}

.stretched-link::after{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0)
}
.block_box .blocks-item-link {
  padding: 0;
}
.article-content .article-body h3.blocks-item_title {
  padding: 0;
  margin: 0;
}
ul.blocks-list li.block_box:hover {
  opacity: 0.8;
}
ul.blocks-list li.block_box img {
  margin-bottom: 10px;
}

.article_column {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.article_column_one {
  display: flex;
  margin: 30px 0;
  justify-content: center;
}
.article_column .column_box {
  width: calc(50% - 20px);
}
.article_column_one .column_box {
  width: 50%;
}
@media screen and (max-width:768px){
  .article_column {
  flex-wrap: wrap; 
  }
  .article_column .column_box,
  .article_column_one .column_box {
    width: 100%;
    margin-bottom: 20px;
  }
}
.column_box p img {
  margin: 0 auto;
  padding: 0;
  display: block;
  width: 75%;
}
.column_box p img:hover {
  opacity: 0.8;
}

.article-content .article-body .column_box h3 {
    font-size: 16px;
    padding-top: 70px;
    margin-top: -50px;
    margin-bottom: 10px;
}

/*new setting*/



.article-votes-controls-2{
  color: rgba(29, 146, 215, 1) !important;
}
.article-vote-2, .article-vote-up-2, .article-vote-down-2{
  color: rgba(29, 146, 215, 1) !important;
  border: 1px solid rgba(29, 146, 215, 1) !important;
}
.article-vote-2:hover{
  background-color: rgba(29, 146, 215, 1) !important;
}
.button-2::after, [role="button"]::after {
    color: rgba(29, 146, 215, 1) !important;
}
.button-2:hover::after, [role="button"]::after {
    color: #ffffff !important;
}

.keyword-color{
  color: #333333;
}


/*=============================================================================
スニペット レイアウト調整用
===============================================================================*/
.snippet-title {
  background: #ccc;
  font-size: 24px;
  font-weight: bold;
  border-radius: 4px;
  padding: 8px;
}

.mb-48{
  margin-bottom:48px !important;
}

/*=============================================================================
SP表示のときにol内の要素をコンテンツ幅いっぱいにする
===============================================================================*/
@media screen and (max-width:768px){
    .article-content .article-body ol li.twocol--inner .twocol--r,
    .article-content .article-body ol li.twocol--inner .twocol--l > .bg-caution,
    .article-content .article-body ol li.twocol--inner .twocol--l > .bg-information {
        margin-left: -25px !important;
        width: calc(100% + 25px) !important;
        margin-right: 0 !important; 
    }
}