@charset "utf-8";
/* CSS Document */

/*見出し
****************************************************/
#post h1 {
  color: var(--pink_2);
  line-height: 1.3;
  padding: 0.25em 0;
}
h2 {
  background: var(--pink_2);
  color: var(--white);
  line-height: 1.3;
  border-radius: 5px;
  padding: 0.75em;
  margin: 3rem 0 1rem;
}
h3 {
  color: var(--pink_2);
  border: solid 1px var(--pink_2);
  border-width: 0 0 2px 8px;
background: #ef9a9629;
/*     color: var(--pink_2);
  border-radius: 5px;*/
  margin: 2rem 0 1rem;
  line-height: 1.5;
  padding: 0.5em;
}
h4 {
  color: var(--pink_2);
  border-bottom: dotted 2px var(--pink_2);
  line-height: 1.3;
  margin: 1.5rem 0 1rem;
}
h5 {
  color: var(--pink_2);
  line-height: 1.3;
  padding-left: 0.25em;
  margin: 1.5rem 0 0.5rem 1.3em;
  text-indent: -1.3em;
}
h5::before {
  content: "";display: inline-block;
  width: 1em;height: 1em;
  background: var(--pink_2);
  margin-right: 0.3em;
}
@media screen and (min-width: 650px),print {/*PC*/
  #post h1 {
    border-top: solid 5px var(--pink_2);
    border-bottom: solid 5px var(--pink_2);
    font-size: 1.75rem;
  }
h2 {font-size: 1.35rem}
h3 {font-size: 1.2rem}
h4 {font-size: 1.1rem}
}
@media only screen and (max-width: 649px) {/*SP*/
  #post h1 {
    border-top: solid 3px var(--pink_2);
    border-bottom: solid 3px var(--pink_2);
    font-size: 1.35rem;
  }
  h2 {font-size: 1.2rem}
  h3 {font-size: 1.15rem}
  h4 {font-size: 1.1rem}
}



/*リスト
****************************************************/
#post ul {
  margin: 1rem 0;
  padding-left: 2em;
}
#post ul li {
  list-style: disc outside;
}
#post li + li {margin-top: 0.5rem}
#post .check {padding-left: 2.3em }
#post .check li {text-indent: -1.5em;}

#post ul.box {
  padding-left: 2.5em;
}
#post ul.box.check {
  padding-left: 3em;
}


/*投稿日とカテゴリー
****************************************************/
.post_meta {
  font-size: 0.9rem;
  text-align: right;
  margin: 0.3rem 0;
}
.post_meta .cat a {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  border-radius: 5px;
  padding: 0 0.5em;
}
.post_meta .cat a.trivia {background: var(--blue_1);}
.post_meta .cat a.trouble {background: var(--red);}
.post_meta .cat a.error_code {background: var(--kon);}
.post_meta .cat a.others {background: var(--green);}
.post_meta .cat a:hover {background: var(--orange);}

/*メイン画像
****************************************************/

.eye_img {
  display: table;
  margin: 1rem auto;
  text-align: center;
  background: var(--bg_gray);
}
.eye_img p {margin: 0; font-size: 0.9rem}


/*このコラムで分かる事
****************************************************/
.overview {
  display: block;
  background: var(--bg_yellow);
  border: solid 2px var(--orange);
  border-radius: 0 10px 10px 10px;
  margin: 3rem auto 1rem;
  padding: 0 1em;
}
#post .overview p,
#post .overview ul {margin: 0.5rem 0}
#post .overview li + li {margin: 0}

#post .overview .overview_title {
  background: var(--orange);
  color: var(--white);
  line-height: 1;
  position: absolute;
  padding: 0.5rem 1rem;
  top: -2.5rem;left: -2px;
  border-radius: 10px 10px 0 0 ;
}



/*　前後の投稿へ
***************************************************/
#post_link {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#post_link a {
  padding: 0.25em 0.5em ;
  border: solid 1px var(--kon);
  color: var(--kon);
  text-decoration: none;
}
#post_link a[rel="prev"]{padding-right: 0.75em}
#post_link a[rel="next"]{padding-left: 0.75em}
#post_link a:hover {
  background: var(--kon);
  color: var(--white);
}



/*　カテゴリー別リンク
***************************************************/
#category_list {
  border: solid 2px var(--blue_1);
  border-radius: 10px;
  overflow: hidden;
}
#category_list .category_list_title {
  background: var(--bg_line_blue);
  border-radius: 0;
  margin: 0;
  padding: 0.5rem;
  text-align: center;
}

#category_list .list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.5rem;
}
#category_list .list li {margin: 0.5rem; }
#category_list .list li a {
  display: block;
  color: var(--white);
  border-radius: 5px;
  line-height: 3;
  padding: 0 1.5em 0 2em;
  text-decoration: none;
}
#category_list .list li a::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  position: absolute;
  left: 0.5em;
}
#category_list .list li a.trivia {background: var(--blue_1);}
#category_list .list li a.trouble {background: var(--red);}
#category_list .list li a.error_code {background: var(--kon);}
#category_list .list li a.others {background: var(--green);}
#category_list .list li a:hover {
  background: var(--orange);
}


/*############################################################
【コラム用】CTA ＋ ページ内リンク
#############################################################*/
#cta_anchor {
	background: var(--white);
	border: solid 2px var(--blue_1);
  overflow: hidden;
	padding: 10px; margin: 20px 0;
}

#cta_anchor .ca_title {
	font-family: "M PLUS Rounded 1c";
  /*font-family: 'Yomogi', cursive;
  font-family: 'Zen Kurenaido', sans-serif;*/
	text-align: center;font-weight: 600;
	background: var(--bg_line_blue);
  color: var(--white);
	margin: -10px -10px 10px; padding: 0;
}
#cta_anchor a ,
#cta_anchor .ca_cta.tel_pc {
	display: flex;justify-content: center;align-items: center;height: 100%;
	text-decoration: none;border-radius: 8px;
}
#cta_anchor .ca_cta {margin: 0;padding: 0;line-height: 1 !important;}
#cta_anchor .ca_cta.no_tel a{
	position: relative;min-height: 60px;
	background: var(--kon);
  color: var(--white);
  font-weight: bold;font-size: 1.3em;
}
#cta_anchor .ca_cta.no_tel a:hover {}
#cta_anchor .ca_cta.no_tel a::after {
	content: "\f0da";
   font-family: FontAwesome;
	position: absolute;
	right: 1em;
	line-height: 1 !important;
}

#cta_anchor ul {
	border: none;
	padding: 0;margin: 0;
	display: flex;flex-wrap: wrap;justify-content: space-between;
}
#cta_anchor ul li {
	list-style: none!important;padding: 0;margin: 10px 0 0 !important;
	width: calc((100% - 10px) / 2);
}
#cta_anchor ul li a {
	position: relative;
	background:  var(--l_blue);
	color: #1E5CA4;
}
#cta_anchor ul li a:hover {
	opacity: 1;
	background: #ff7e00;
	color: var(--white);
}
#cta_anchor ul li a::after {
	content: "\f0dd";
  font-family: FontAwesome;
	position: absolute;

}

@media screen and (min-width: 641px),print {/*PC*/
	#cta_anchor .ca_title {font-size: 1.75rem;}
	#cta_anchor a {padding: 0.75rem;}

	#cta_anchor .ca_cta.tel_pc {
		flex-direction: column;padding: 1rem;line-height: 1;
    background: var(--pink_2);
	}
	#cta_anchor .ca_cta.tel_pc span {color: var(--white);font-weight: bold;}
	#cta_anchor .ca_cta.tel_pc span span {font-weight: normal}
	#cta_anchor .ca_cta.tel_pc .ct_link {
		width: 80%;text-align: center;padding: 1rem;margin-top: 0.5rem;
		background: var(--white);
    color:  var(--pink_2);
    font-size: 2rem;border-radius: 50px;
	}

	#cta_anchor ul li a {padding-right: 2em}
	#cta_anchor ul li a::after {right: 1em; top: calc(50% - 1em)}
}
@media screen and (max-width: 640px) {/*SP*/
	#cta_anchor .ca_title {font-size: 1.5rem;line-height: 1.3;padding: 0.5rem 0; margin-bottom: 10px;}
	#cta_anchor a {padding: 1rem 5px;}
	#cta_anchor .ca_cta a {flex-direction: column;	background:#ff558d; color: var(--white);
    min-height: 60px;font-size: 1.3em;}
	#cta_anchor .ca_cta a * {color: var(--white);
    font-size: 1em;font-weight: bold;}
	#cta_anchor .ca_cta a .ct_text_sub {font-size: 1rem;font-weight: normal;}
	#cta_anchor ul li a {padding-bottom: 1.25rem}
	#cta_anchor ul li a::after {bottom: 0;}
}





/*================================================================
この記事の監修者
================================================================*/
#kansyu {
  border: solid 1px var(--d_gray);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1rem 1rem;
  margin: 2rem auto 1rem;
}
#kansyu .title {
  background: var(--d_gray);
  color: var(--white);
  line-height: 2rem;
  border-radius: 2em;
  width: 10em;
  text-align: center;
  position: absolute;
  top: -1rem; left: calc(50% - 5em);
}
#kansyu .img {width: 100px;display: block;}
#kansyu .text {
  width: calc(100% - 115px);
  align-self: center;
}
#kansyu .text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
@media screen and (min-width: 650px),print {/*PC*/
}
@media only screen and (max-width: 649px) {/*SP*/
}
@media only screen and (max-width: 549px) {/*SP*/
  #kansyu {display: block;}
  #kansyu .img {width: 100%; text-align: center;margin-bottom: 0.5rem}
  #kansyu .img img {width: 100%; max-width: 250px;}
  #kansyu .text {width: 100%;}
}