@charset "utf-8";
/* CSS Document */

:root {
  --color_blue: #094aa5; /* var(--color_blue); *//*青*/
  --color_light_blue: #c7e4fc; /* var(--color_light_blue); *//*水色*/
  --color_red: #bd1d1e; /* var(--color_red); *//*赤色*/
  --color_orange: #ED5526; /* var(--color_orange); *//*オレンジ*/
  --color_t_orange: #F7763C; /* var(--color_t_orange); *//*オレンジ*/
  --color_light_yellow:#fff777; /* var(--color_light_yellow); *//*黄色*/
  --color_yellow: #FFC801; /* var(--color_yellow); *//*黄色*/
  --color_pink: #e20077; /* var(--color_pink); *//*ピンク色*/
  --color_light_pink: #eb6877; /* var(--color_light_pink); *//*ピンク色*/
  --color_white: #ffffff; /* var(--color_white); *//*白色*/
  --color_light_orange: #fffbcc; /* var(--color_light_orange); *//*背景用*/
  --color_text: #333333; /* var(--color_text); *//*水色[背景用]*/
  
  --gradient_blue :linear-gradient(to bottom, #19A2FC 0%, #046BB0 100%);
  
  --ff_MP1C: 'M PLUS 1 Code', monospace; /* var(--ff_MP1C); */
  --ff_MP1p: 'M PLUS 1p', sans-serif; /* var(--ff_MP1p); */
  --ff_MPr1C: 'M PLUS Rounded 1c', sans-serif; /* var(--ff_MPr1C); */
  --ff_NotoSans: 'Noto Sans JP', sans-serif; /* var(--ff_NotoSans); */
}




@media only screen and (max-width: 450px) {/*SP*/
  .main_v_text .title {line-height: 1.3}
}
@media only screen and (min-width: 451px) {/*PC*/

}


/*見出し
*********************/
h2 {
  background: var(--color_blue);
  color: var(--color_white);
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.3;
  padding: 0.5em;
  margin: 2rem 0 1rem;
}
#main article h2:first-of-type {margin: 2rem 0 1rem;}
h3 {
  background: repeating-linear-gradient(-45deg, #fff, #fff 4px, #e9e9e9 4px, #e9e9e9 6px);
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.3;
  padding: 0.5em;
  color: var(--color_blue);
  border-left:solid 5px var(--color_blue);
  margin: 2rem 0 1rem;
}
h3:first-letter {
	color:#3BA0FF;
}
h4 {
  background: var(--color_light_blue);
  color: var(--color_blue);
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.3;
  padding: 0.5em;
  border-radius: 5px;
  margin: 2rem 0 1rem;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
h5 {
  color: var(--color_blue);
  font-weight: bold;
  border-bottom: dotted 2px var(--color_blue);
  padding-bottom: 0.5rem;
  margin-top: 1.5rem;
}
h6 {
  font-weight: bold;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: dotted 1px var(--color_text);
}

@media only screen and (max-width: 450px) {/*SP*/
  h2 {margin-left: -10px;margin-right: -10px;font-size: 1.3rem;}
}
@media only screen and (min-width: 451px) {/*PC*/
}

/*目次
*********************/
#toc_container ul ul {margin-left: 0.5em;}
#toc_container ul li .toc_number {color: var(--color_text);}
#toc_container ul li .toc_number::after {content: "›";padding: 0 3px}
@media only screen and (max-width: 450px) {/*SP*/
  #toc_container {margin: 1.5rem auto}
}
@media only screen and (min-width: 451px) {/*PC*/
  #toc_container {margin: 2rem auto;padding: 10px 1.5em 1em}
}

/*前の記事・次の記事
*********************/
#post_link {display: flex;justify-content: space-between}


/*記事meta情報
*********************/
.article_meta {
  background: #CAEDFF;
  color: #666;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.article_meta p {line-height: 1;margin: 0}
.article_meta p.date .update {}
@media only screen and (max-width: 450px) {/*SP*/
  .article_meta p.date {display: flex;flex-direction: column;align-items: center;}
}
@media only screen and (min-width: 451px) {/*PC*/
}


/*その他
*********************/
.thumbnail_img {margin: auto;}
.thumbnail_img p {
  display: block;
  text-align: center;
  background:#f0f0f0;
  font-size: 0.85rem;
  margin: 0 auto;
}
@media only screen and (max-width: 450px) {/*SP*/
  .thumbnail_img p {max-width: 100% !important}
}
@media only screen and (min-width: 451px) {/*PC*/
  .thumbnail_img p {max-width: 725px !important}
}


i {margin-right: 0.2em}

img.aligncenter {
  display: block;
  margin: 1em auto;
}
ol, ul {margin: 1rem}
ol {padding-left: 1.5em}




