@charset "UTF-8";

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
p,blockquote,table,th,td {margin: 0; padding: 0;}

html,body {width:100%;height:100%;}
body {
    line-height: 1.5;
    color: #333;
    background: #FFF;
    font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    word-wrap: break-word;
    font-size: 12px;
    text-align: center;
}
img {border: 0; vertical-align: top;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;}
ul,dl,ol {text-indent: 0;}
ul li,dl li {list-style: none;}

/* 全体設定================================ */

/* pankuzu - パンくず */
#pankuzu {
	margin-bottom: 16px;
}
#pankuzu a {
	color: #333;
	text-decoration: underline;
}
#pankuzu a:hover {
	color: #f00;
	text-decoration: underline;
}


.media_artcl_box {

  /* スタイルリセット---------- */

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  /* ----------スタイルリセット */

  width: 924px;

  margin: 0 auto;

  padding-bottom: 50px;

  line-height: 2;

  color: #313131;

  font-size: 1.1rem;

  letter-spacing: 0.14rem;

}

.media_artcl_box a{

  text-decoration: none;

  color: #313131;

}

.media_artcl_box p {

  margin-bottom: 1.8rem;

}

.media_artcl_box img {

  display: block;

  margin: 0 auto;

}

.media_artcl_box strong.more {

  color: #ff0000;

}

/* ================================全体設定 */



/* 見出し設定============================== */

.media_artcl_box h1 {

  line-height: 1.7;

  font-size: 1.5rem;

  margin-top: 2.5rem;

}

.media_artcl_box h2 {

  background: transparent;

  color: #313131;

  font-size: 1.35rem;

  line-height: 1.7;

  padding: 15px 0;

  margin: 4.3rem 0 3rem;

  border-bottom: 2px solid #5ea0fd;

}

.media_artcl_box h3 {

  font-size: 1.2rem;

  background: #f9f9f9;

  padding: 15px;

  margin: 4.5rem 0 3rem;

  border-left: 4px solid #5ea0fd;

}

.media_artcl_box h4 {

  padding: 5px;

  margin: 3rem 0 2.5rem;

  border-bottom: 3px dotted #bbd5f8;

}



/* ==============================見出し設定 */



/* 公開日・最終更新日設定==================== */

.media_date {

  font-size: 1rem;

  color: #777;

  display: flex;

  margin: 8px 0 20px;

}

.media_lastupdated:after{

  content: "／";

  margin: 0 8px;

}

.media_date + img {

  margin: 0 0 3rem;

}

/* ====================公開日・最終更新日設定 */



/* 目次設定================================ */

.media_TOC {

  background: #f2f6fd;

  padding: 35px 50px;

  border-top: 5px dotted #d4dff3;

  border-radius: 0px 0px 5px 5px;

}

.media_TOC dt {

  text-align: center;

  padding-bottom: 30px;

  display: none;

}

.media_TOC dd:before {

  content:"";

  display: inline-block;

  width: 0;

  height: 0;

  border: 5px solid transparent;

  border-left: 5px solid #888888;

  padding-right: 3px;

}

.media_TOC dd {

  line-height: 2.2;

  font-weight: bold;

  margin: 3px 0 0 1em;

  text-indent: -0.75em;

}

.media_TOC .media_TOC_h3 {

  font-size: 0.95rem;

  text-indent: 1rem;

  font-weight: normal;

}



.media_TOC .media_TOC_h4 {

  font-size: 0.95rem;

  text-indent: 2rem;

  font-weight: normal;

}



/* ↓クリックで目次を表示↓ */

/*全体*/

.hidden_box {

  margin: 3.5em 0;

  padding: 0;

}

/*ボタン装飾*/

.hidden_box label {

  display: block;

  text-align: center;

  padding: 20px 15px;

  font-weight: bold;

  background: #f2f6fd;

  border-radius: 5px 5px 0 0;

  cursor: pointer;

  transition: 0.8s;

}

/*アイコンを表示*/

.hidden_box label:after {

  font-family: 'Font Awesome 5 Free';

  display: inline-block;

  content: '\f078';

  font-weight: bold;

  padding-right: 5px;

  transition: 0.8s;

  padding-left: 25px;

}

/*アイコンを切り替え*/

.hidden_box input:checked ~ label:after {

  content: '\f00d';

  font-weight: bold;

  padding-left: 25px;

}

/*チェックボックス非表示*/

.hidden_box input {

  display: none;

}

/*中身を非表示にしておく*/

.hidden_box .hidden_show {

  height: 0;

  padding: 0;

  overflow: hidden;

  opacity: 0;

  transition: 0.8s;

}

/*クリックで中身表示*/

.hidden_box input:checked ~ .hidden_show {

  height: auto;

  opacity: 1;

}



.media_TOC a:hover,

.hidden_box label:hover {

  opacity: 0.6;

  transition: 0.1s;

}

/* ================================目次設定 */



/* リンク・リンクボタン設定=================== */

.media_btn {

  display: block;

  width: 65%;

  margin: 1.5rem auto;

  text-align: center;

  padding: 1.7rem 2rem;

  font-weight: bold;

  letter-spacing: 0.1rem;

  line-height: 1.3;

}

a.media_btn {

  color: #fff;

}

.btn_ec {

  background: #ff991c;

  border-radius: 0.5rem;

  border-bottom: 6px solid #e56d22;

}

.btn_jump {

  border-radius: 50px;

  border: 1px solid #ff900f;

  padding: 15px 10px 25px;

}

a.btn_jump {

  color: #ff900f;

  position: relative;

}

.btn_jump:after {

  content:"";

  position: absolute;

  bottom: 7%;

  right: 50%;

  left: 50%;

  width: 0;

  height: 0;

  border: 7px solid transparent;

  border-top: 7px solid #ff900f;

}

.btn_out {

  background: #545454;

  border-radius: 50px;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}

.btn_pickup {

  border-radius: 50px;

  border: 1px solid #5ea0fd; 

}

a.btn_pickup {

  color: #5ea0fd;

}

.btn_pickup:before {

  content:"";

  display: inline-block;

  width: 0;

  height: 0;

  border: 5px solid transparent;

  border-left: 5px solid #5ea0fd;

  padding-right: 4px;        

}



/* hover設定-------------------- */

.btn_ec:hover {

  border-bottom: 6px solid transparent;

  transform: translateY(6px);

  transition: .2s;

}

.btn_jump:hover {

  background: #ff900f;

  color: #fff;

  transition: .3s;

}

.btn_jump:hover:after {

  content:"";

  position: absolute;

  bottom: 7%;

  right: 50%;

  left: 50%;

  width: 0;

  height: 0;

  border: 7px solid transparent;

  border-top: 7px solid #fff;       

  transition: .3s; 

}

.btn_pickup:hover:before {

  content:"";

  display: inline-block;

  width: 0;

  height: 0;

  border: 5px solid transparent;

  border-left: 5px solid #fff;

  padding-right: 4px;

  transition: .3s;

}

.btn_out:hover {

  box-shadow: none;

  transition: .5s;

}

.btn_pickup:hover {

  background: #5ea0fd;

  color: #fff;

  transition: .2s;

}

/* --------------------hover設定 */



a.link_article{

  width: 70%;

  margin: 1.5rem auto;

  padding: 0 30px 0 0 ;

  border-radius: 5px;

  background-color: #F3F8FF;

  box-shadow: 0px 4px 0px #DCE8F9;

  box-sizing: border-box;

  position: relative;

  display:flex;

}



a.link_article:hover {

  opacity: 0.6;

  transition: 0.1s;

}



a.link_article:after{

  content:'\f105';

  font-size:30px;

  line-height: 75px;

  color: #5EA0FD;

  font-family:'Font Awesome 5 Free';

  font-weight:900;

  position: absolute;

  right:5px;

}



a.link_article img{

  height: 75px;

  margin: 0 15px 0 0 ;

  border-radius: 5px 0 0 5px;

  display: block;

}



a.link_article span{

  font-size:90%;

  line-height: 1.3;

  display: block;

  align-self: center;

}



span.link_inside{

  display: block;

  text-align: right;

  margin: 0 auto 1.5rem;

}



span.link_inside a{

  padding: 0 30px 0 0 ;

  text-decoration: underline;

  color: #5ea0fd;

  position: relative;

  display:inline-block;

}



span.link_inside a:after{

  content:'\f105';

  font-size:30px;

  line-height: 30px;

  color: #5EA0FD;

  font-family:'Font Awesome 5 Free';

  font-weight:900;

  position: absolute;

  right:5px;

  bottom:0;

}



/* ===================リンク・リンクボタン設定 */



/* リスト設定(ul,ol,dt)==================== */

.media_list {

  width: 100%;

  margin: 3rem auto;

  padding: 3.5vh 3vw;

  border: 3.5px dotted #d3e6ff;

  list-style: none;

  line-height: 2.5;

  box-sizing: border-box;

}

ul.media_list > li:before,

.media_list > dd:before {

  content: "・";

  padding-left: 1.5em;

}

.media_list.list_none > li,

.media_list.list_none > dd{

  text-indent: 0;

}

.media_list.list_none > li:before,

.media_list.list_none > dd:before {

  content: "";

  padding-left: 0;

}

.media_list > li {

  text-indent: -2.7em;

  margin-bottom: 15px;

  padding-left: 1em;

}

.media_list > li:last-child {

  margin-bottom: 0;

}



ul.media_list_simple{

  

}



ul.media_list_simple > li{

  margin: 10px 0 0 0;

  padding: 0 0 0 1em;

  text-indent: -1em;

  content: "・";

}

ul.media_list_simple > li:before{

  content: "・";

}

/* dl デザイン */

.media_list dl{

  padding: 20px 8px;

}

.media_list dt {

  font-weight: bold;

  position: relative;

  padding: 1.15rem 0 0 1rem;

}

.media_list dt:before {

  content: "";

  position: absolute;

  top: 1.9rem;

  left: -0.5rem;

  -webkit-transform: rotate(50deg);

  -ms-transform: rotate(50deg);

  transform: rotate(50deg);

  width: 5px;

  height: 11px;

  border-right: 3px solid #5ea0fd;

  border-bottom: 3px solid #5ea0fd;

}

.media_list dt:first-child {

  padding-top: 0;  

}

.media_list dt:first-child:before {

  top: 0.7rem;

}

.media_list > dd {

  margin: 10px 0 10px 1em;

  text-indent: -2.6em;

  line-height: 1.7;

}

.media_list dl dd:last-child {

  margin-bottom: 0;

}





/* dl デザイン2(HowTo) */

.media_list2 {

  width: 100%;

  margin: 3rem auto;

  padding: 3.5vh 3vw;

  border: 3.5px dotted #d3e6ff;

  list-style: none;

  line-height: 2.5;

  box-sizing: border-box;

}

ul.media_list2 li:before,

.media_list dd:before {

  content: "・";

  padding-left: 1.5em;

}

.media_list2 li {

  text-indent: -2.7em;

  margin-bottom: 15px;

  padding-left: 1em;

}

.media_list2 li:last-child {

  margin-bottom: 0;

}



/* dl デザイン2 */



.media_list2 dl{

  padding: 20px 8px;

}

.media_list2 dt {

  font-weight: bold;

  padding: 1.15rem 0 0 1rem;

}

/*

.media_list2 dt:before {

  content: "";

  position: absolute;

  top: 1.9rem;

  left: -0.5rem;

  -webkit-transform: rotate(50deg);

  -ms-transform: rotate(50deg);

  transform: rotate(50deg);

  width: 5px;

  height: 11px;

  border-right: 3px solid #5ea0fd;

  border-bottom: 3px solid #5ea0fd;

}

*/

.media_list2 dt:first-child {

  padding-top: 0;  

}

.media_list2 dt:first-child:before {

  top: 0.7rem;

}

.media_list2 > dd {

  margin: 10px 0 10px 3.5em;

  text-indent: -1em;

  line-height: 1.7;

  list-style: none;

}

.media_list2 dl dd:last-child {

  margin-bottom: 0;

}



/* ※未完成※　Q and A */

.media_q_and_a {

  margin: 15px 0;

  padding: 20px 5px;

}

.media_q_and_a .question:before {

  content: "Q.";

  font-size: 1rem;

  padding-right: 3px;

}

.media_q_and_a .answer:before {

  content: "A.";

  font-size: 1rem;

  padding-right: 3px;

}

/* ====================リスト設定(ul,ol,dt) */



/* 強調設定================================ */

.media_strong {

  background: linear-gradient(transparent 60%, #ffeed3 60%);

}

/* ================================強調設定 */



/* テーブル設定============================= */

.media_artcl_box table {

  width: 70%;

  border-collapse: collapse;

  border: 3px solid #dff1ff;

  margin: 30px auto;

}

.media_artcl_box table caption{

  font-weight: bold;

}

.media_artcl_box th {

  padding: 10px 15px;

  border-right: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  background: #dff1ff;

  white-space: nowrap;

}

.media_artcl_box th:last-child {

  border-right: 1px solid #dff1ff;

}

.media_artcl_box td {

  padding: 10px 15px;

  vertical-align: top;

  border-bottom: 1px solid #dff1ff;

  border-left: 1px solid #dff1ff;

  background: #ffffff;        

}

/* =============================テーブル設定 */



/* 参考資料============================= */

#media_ref {

  margin: 100px 0 80px 0;

  padding:15px 25px;

  background-color: #f9f9f9;

  font-size: 80%;

  line-height: 1.5;

}



#media_ref h2{

  border: none;

  margin: 0;

  padding: 0;

}



#media_ref a{

  text-decoration: underline;

  color: #5ea0fd;

}



#media_ref dl dt{

  padding: 0 0 0 4em;

  text-indent: -4em;

}



#media_ref dl dt span{

  font-weight: bold;

}



#media_ref dl dd{

  margin: 0 0 15px 4em;

}



/* =============================参考資料 */

.media_img_box img {

  width:70%;

}



.media_artcl_box p.media_img_box_item{

  margin-bottom: 0;

}



.media_img_box_item img{

  width:50%;

}



p.media_caption {

  text-align: center;

  font-weight: bold;

  margin-bottom: 5px;

}



.media_artcl_box small {

  font-size:85%;

}



.media_artcl_box span.media_small a {

  font-size:85%;

  padding: 0 0 0 1em;

  text-decoration: underline;

  color: #5ea0fd;

}

@media screen and (max-width: 768px) {

#pankuzu {
  font-size: 3.2vw;
  width: 96%;
  margin: 3vw auto;
}
.media_artcl_box h1 {
    font-size: 1.32rem;
    letter-spacing: 0.5px;
    line-height: 1.65;
}
.media_date {
    font-size: 0.8rem;
    color: #777;
    display: flex;
    margin: 8px 0 20px;
}
.media_artcl_box {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 95%;
    margin: 5vw auto 15vw;
    font-size: 1rem;
    line-height: 1.6;
    color: #313131;
    letter-spacing: 0.08rem;
}
}