@charset "utf-8";

/*----------------------------------------------------
    共通css
----------------------------------------------------*/
#headNoteArea .sitename:before {
  background: #000;
  color: #fff;
  content: "PR";
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  margin-right: 0.5rem;
  padding: 0 0.1rem;
}
.imgarea.caption {
    text-align: center;
}

.imgarea.caption img {
    display: block;
    margin: 0 auto 0.5rem;
    border: solid 1px #eee;
    width: auto;
    max-width: 400px;
}

.areaInner cf .sitename:before {
	 background: #000;
  color: #fff;
  content: "PR";
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  margin-right: 0.5rem;
  padding: 0 0.1rem;
}

#headNoteArea.lower .sitename {
    display: flex;
    min-height: 42px;
    margin: 0;
    padding: 0 4rem 0 5.5rem;
    background: url(img/logo.png) no-repeat left center;
    background-size: 50px 42px;
    box-sizing: border-box;
    color: #fff;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
}
#headNoteArea.lower .sitename a {
	background: none;
	display: contents;
}
.inyo {
  font-size: 10px;
  color: #485861;
  text-align: center;
  word-break: break-all;
}

footer p.copy a:before {
    content: "【PR】";
}

#toc {
  width: 50%;
  margin: 2rem auto 4rem;
  display: block;
  padding: 1rem 2rem;
  border: 5px solid #bfddef;
  background: #f1f8fc;
}

#toc:before {
  content: "目次";
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin: 1rem auto;
}

#toc li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

#toc li:before {
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  background: #1978b1;
  border-radius: 50%;
  content: "";
}

.addCont01 .block-recommend .box-head .catch {
  display: block;
  font-size: 1.4rem;
}

.addCont01 .block-recommend .box-head .catch span {
  font-size: 2rem;
}

.banner-bottom {
    box-sizing: border-box;
    border: 3px solid #0d5799;
    margin: 20px;
    max-width: 720px;
}
/* 「もっと見る／閉じる」ボタンに矢印を追加 */

.list-btn {
  position: relative;
  display: inline-block;
  background: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0 30px 0 10px;
  appearance: none;
}

.list-btn:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 10%;
  margin-top: -6px;
}

.list-btn-opened:before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-top: -2px;
}

.list-btn {
  background: #333333;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  padding: 10px 10px;
  width: 50%;
}
.list-btn:hover{
	opacity:.6;
}
.is-hidden {
  display: none;
}
.pump-bottun {
    height: auto;
    clear: both;
    text-align: center;
    margin: 10px;
}
.reaction .block-recommend .box-head .catch {
    display: block;
	font-size: 1.4rem;
}
.reaction .block-recommend .box-head .catch span {
        font-size: 1.8rem;
}
.reaction {
    padding: 4rem 1rem 3rem;
}

/*2022.09.27*/
.select-catch{
	color:#cc4242;
	font-weight:bold;
	margin:0 auto;
	text-align:center;
}
.headcontents {
    color: #fff;
    text-align: center;
    background: #0d5799;
    padding: 8px;
    font-weight: bold;
    font-size: 18px;
}
.headcontents2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto 30px;
}
.headcontents2 a {
    display: block;
    width: 18%;
    font-weight: bold;
    background: #2e98b3;
    padding: 6px;
    box-sizing: border-box;
    line-height: 2.0rem;
    text-align: center;
    color: #fff;
    position: relative;
}
.headcontents2 a.headbtn {
    width: 25%;
}
.headcontents_btn a::before {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    content: '';
    position: absolute;
    top: 40%;
    right: 4%;
}
.headcontents_btn a::after {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 4px solid transparent;
    border-left: 6px solid #000;
    content: '';
    position: absolute;
    top: 45%;
    right: 4%;
}
.headcontents_btn a {
    display: block;
    position: relative;
    width: 360px;
    margin: 0 auto 50px;
    padding: 2rem 4rem;
    background: #ffb549;
    box-sizing: border-box;
    border-radius: 5rem;
    color: #000408;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

/*2022.10.19*/
.headcontents2 a {
	box-shadow: 3px 3px 6px -2px #555,
	2px 2px 4px rgba(255,255,255,0.8) inset;
}
.img-w{
	text-align:center;
}
.img-w img{
	display:block;
	margin:1.5rem auto;
}
#page h2.reaction-title {
    padding: 0;
    background: unset;
    font-size: 2rem;
    margin: 0 0 3rem 0;
}
#page h2.reaction-title:before {
    content: unset;
}
.brd{
    border-bottom:1px dotted #333;
	margin-bottom:1rem;
}
#page .reaction .block-recommend .box-body .btn-internal {
    margin: 0 auto;
}
#page .reaction .block-recommend .box-body .btn-internal a {
    width: 90%;
    padding: 1rem 1.8rem;
    background-size: 6px auto;
    font-size: 1.4rem;
    background-position: right 1rem center;
}
.reaction .block-recommend .box-body .num span.red {
    font-size: 2rem;
}
.reaction .block-recommend .box-body .sttl {
    font-size: 2rem;
}














/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/
@media screen and (min-width: 600px) {

  /*/////////////PC用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/
	#headNoteArea.lower .sitename {
		display: inline-block;
	}
	.company-img {
    text-align: center;
    margin: 30px auto 30px;
  }
.sp		{display: none;}
.sp_br	{display: none;}
  p.time_function {
    width: 1000px;
    margin: 0 auto;
  }

  .fixBan {
    position: fixed;
    bottom: 16rem;
    right: 0;
    width: 230px;
    z-index: 50;
    display: none;
  }

  .fixBansp {
    display: none;
  }

  ul.popular-article li a {
    color: #333;
  }

  ul.popular-article {
    background: #f0f8fc;
    margin: 20px;
    padding: 15px;
  }


  ul.popular-article p {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-bottom: 5px;
    padding: 1rem 2rem;
    border-left: 10px solid #eebf65;
    background: #1286cc;
    color: #fff;
  }

  ul.popular-article li {
    line-height: 2.5rem;
    margin-left: 2rem;
  }

  #index.indexf {
    display: flex;
  }

  #index.indexf #side {
    margin-left: 2rem;
  }

  #contents.indexf {
    margin: 0 auto;
    display: block;
    width: 1250px;
  }

  .gnav {
    background: #0d5799;
  }

  .gnav ul {
    display: flex;
    width: 1000px;
    margin: 0 auto;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
  }

  .gnav ul li a {
    color: #fff;
    text-align: center;
    line-height: 1.4;
    padding: 1rem 2rem;
    height: 7rem;
    display: table-cell;
    vertical-align: middle;
    width: 200px;
  }

  .gnav li {
    width: 20%;
    border-left: solid 1px #fff;
    text-align: center;
  }

  .gnav ul li a:hover {
    background: #ffffff87;
  }
.reaction .block-recommend .box {
    width: 33%;
}	

	#contents table td.single {
    border: 2px solid #1286cc;
}
	#contents table th.single {
    background: #f0f8fc;
    border: 2px solid #1286cc;
}
	#contents table.single {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0px 8px;
}
.indexinner {
    width: 1000px;
}	
.addCont02 .btn-web a {
    font-size: 2.6rem;
}	

.addCont01 .block-recommend .box .btn-internal a{
	width:90%;
}
.addCont01 .block-recommend .box-body .num p span {
    font-size: 2rem;
}


	
	
	
	
	
	
	
	

	
}
/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/
@media screen and (max-width: 599px) {

  /*/////////////SP用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/
  #headNoteArea .sitename {
  display: flex;
  align-items: center;
  justify-content: center;
}
	
	.fixBan {
    display: none !important;
  }

  .fixBansp {
    position: fixed;
    bottom: 0px;
    z-index: 2;
  }

  #toc {
    width: 80%;
  }

  #toc li {
    line-height: 1.4;
    margin-bottom: 1rem;
  }

  #toc li:before {
    top: 2px;
  }

  #page-top {
    position: fixed;
    width: 40px;
    right: 3%;
    bottom: 17%;
    z-index: 2;
  }

  .fixBansp.active {
    display: none;
  }


  ul.popular-article li a {
    color: #333;
    font-size: 12px;
  }

  ul.popular-article {
    background: #f0f8fc;
    margin: 20px;
    padding: 15px;
  }


  ul.popular-article p {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-bottom: 5px;
    padding: 1rem 2rem;
    border-left: 5px solid #eebf65;
    background: #1286cc;
    color: #fff;
  }

  ul.popular-article li {
    line-height: 2.5rem;
  }

  .gnav {
    display: none;
  }

  footer p.copy {
    padding-bottom: 100px;
  }
	.headcontents_btn a {
    width: 86%;
    padding: 1rem 4rem;
}
.headcontents {
    font-size: 16px;
}
.headcontents2 a {
    font-size: 10px;
	height: 90px;
}
 #contents table td.single {
     border: 2px solid #1286cc;
	 display: revert;
}
 #contents table th.single {
    background: #f0f8fc;
    border: 2px solid #1286cc;
	display: revert;
}
 #contents table.single {
    table-layout: auto;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0px 8px;
}
	.scroll {
	overflow-x: scroll;
	}
.img-w img{
	width:100%;
	}


.imgarea.caption img {
    max-width: 90%;
}
.addCont02 .btn-web a {
    font-size: 2rem;
}		
#page h2.reaction-title {
    font-size: 1.6rem;
}	
#page .reaction .block-recommend .box-body .btn-internal {
    margin-top: 2rem;
}	
	
	
	
	
	
	

}