@charset "utf-8";
/* CSS Document */
/*-----------------------------------------------------------
inspection
------------------------------------------------------------*/
a.link:hover {
  color: #ff7043;
  text-decoration: underline;
}
a.link {
  color: #19a8e5;
  text-decoration: underline;
}
.btnStyle_blue {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 20px 0;
  width: 80%;
  margin: 7.81% auto;
  text-align: center;
  color: #fff;
  background: #014593;
  transition: all 0.25s ease;
}
.btnStyle_blue:hover {
  background: #f39800;
}
.btnStyle_white {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 20px 0;
  width: 80%;
  margin: 7.81% auto;
  text-align: center;
  color: #014593;
  background: #fff;
  transition: all 0.25s ease;
  border: solid 3px #014593;
}
.btnStyle_white:hover {
  background: #014593;
  color: #fff;
}
.marker_yellow {
  background: linear-gradient(transparent 60%, #ffff75 60%);
}
.serviceBoxWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.serviceBoxWrap .serviceBox2 {
  width: 31.25%;
  background: #fff;
  box-shadow: 0 0 8px rgba(102, 102, 102, 0.3);
  margin-bottom: 4%;
  position: relative;
}
.serviceBoxWrap .serviceBox3 {
  background: #fff799 !important;
}
.serviceBox figure.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 70%;
}
.serviceBox figure.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.serviceBoxWrap .serviceBox2 .txtBox {
  padding: 3.5% 7.5% 30%;
}
.serviceBoxWrap .noLinkBtn .txtBox {
  padding: 7.5% 7.5%;
}
.serviceBoxWrap .serviceBox2 .txtBox h3 {
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  color: #004098;
  line-height: 1;
  margin-bottom: 1em;
}
.serviceBoxWrap .serviceBox2 .txtBox h3 span.small {
  font-size: 83.33%;
}
.serviceBoxWrap .serviceBox2 .txtBox p, .serviceBoxWrap .serviceBox2 .txtBox ul.list01 li {
  font-size: 16px;
  line-height: 1.88;
}
.serviceBoxWrap .serviceBox2 .txtBox a {
  color: #004098;
  text-decoration: underline;
}
.serviceBoxWrap .serviceBox2 .txtBox a:hover {
  text-decoration: none;
}
.serviceBoxWrap .serviceBox2 .txtBox ul.list01 li {
  list-style: disc inside;
  color: #555;
}
.serviceBoxWrap .serviceBox2 a.serviceBoxBtn {
  display: block;
  position: absolute;
  bottom: 30px;
  left: 0;
  text-align: center;
  color: #fff;
  background: #004098;
  width: 70%;
  line-height: 1;
  padding: 16px 0;
  margin: 0 15%;
  font-size: 18px;
  font-weight: 400;
  transition: background 0.25s ease-in-out;
}
.serviceBoxWrap .serviceBox2 a.serviceBoxBtn:hover {
  background: #f39800;
}
.serviceBoxWrap::after {
  content: "";
  display: block;
  width: 31.25%;
}
.serviceBoxWrap .serviceBoxFull {
  width: 100%;
  position: relative;
  display: flex;
  box-shadow: 0 0 8px rgba(102, 102, 102, 0.3);
  margin-bottom: 4%;
}
.serviceBoxWrap .serviceBoxFull figure {
  display: block;
  flex: 0 0 400px;
}
.serviceBoxWrap .serviceBoxFull .txtBox {
  padding: 2.03% 3.13% 2.34% 5.47%;
  text-align: left;
}
.serviceBoxWrap .serviceBoxFull .txtBox h3 {
  text-align: left;
  font-weight: 700;
  font-size: 30px;
  color: #004098;
  line-height: 1;
  margin-bottom: 1rem;
}
.serviceBoxWrap .serviceBoxFull .txtBox h3 span {
  font-size: 18px;
}
.serviceBoxWrap .serviceBoxFull .txtBox p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.88;
  margin-top: 1em;
}
.serviceBoxWrap .serviceBoxFull a.serviceBoxBtn {
  display: block;
  text-align: center;
  color: #fff;
  background: #004098;
  width: 100%;
  max-width: 280px;
  line-height: 1;
  padding: 16px 0;
  margin: 20px auto 0;
  font-size: 18px;
  font-weight: 400;
  transition: background 0.25s ease-in-out;
}
.serviceBoxWrap .serviceBoxFull a.serviceBoxBtn:hover {
  background: #f39800;
}
/*タブ切り替え全体のスタイル*/
.serviceBoxWrap {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  max-width: 1280px;
  margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
  width: calc(100%/9);
  height: 50px;
  border: 1px solid #f1c40f;
  font-size: 13px;
  text-align: center;
  line-height: 1;
  color: #565656;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  box-sizing: border-box;
  margin: 0;
  margin-bottom: 5%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */
}
.tab_item:hover {
  opacity: 0.75;
  cursor: pointer;
}
/*ラジオボタンを全て消す*/
input[name='tab_item'] {
  position: relative;
  display: none;
}
#category_1:checked ~ .serviceBox2:not(#category_1_content), #category_2:checked ~ .serviceBox2:not(#category_2_content), #category_3:checked ~ .serviceBox2:not(#category_3_content), #category_4:checked ~ .serviceBox2:not(#category_4_content), #category_5:checked ~ .serviceBox2:not(#category_5_content), #category_6:checked ~ .serviceBox2:not(#category_6_content), #category_7:checked ~ .serviceBox2:not(#category_7_content), #category_8:checked ~ .serviceBox2:not(#category_8_content) {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.serviceBox2 {
  padding: 0;
  clear: both;
}
/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content, #category_1:checked ~ #category_1_content, #category_2:checked ~ #category_2_content, #category_3:checked ~ #category_3_content, #category_4:checked ~ #category_4_content, #category_5:checked ~ #category_5_content, #category_6:checked ~ #category_6_content, #category_7:checked ~ #category_7_content, #category_8:checked ~ #category_8_content {
  display: block;
}
/*選択されているタブのスタイルを変える*/
.serviceBoxWrap input:checked + .tab_item {
  background-color: #f1c40f;
  color: #fff;
}
.ribbon11 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 0 0 -20px;
  font-size: 13px;
  color: white;
  background: #f1c40f;
}
.ribbon11:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #9e882a;
}
.ribbon12 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 0 0 -20px;
  font-size: 13px;
  color: white;
  background: #a51313;
}
.ribbon12:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #841414;
}
.ribbon13 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 0 0 -20px;
  font-size: 13px;
  color: white;
  background: #1f51b5;
}
.ribbon13:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #173b84;
}
.ribbon14 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 0 0 -20px;
  font-size: 13px;
  color: white;
  background: #2a910d;
}
.ribbon14:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #1c6308;
}
.ribbon15 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 0 0 -20px;
  font-size: 13px;
  color: white;
  background: #4b0082;
}
.ribbon15:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #4b0082;
}
.topic_btn {
  margin-top: 50px;
}
.topic_btn a {
  color: #FFF;
  font-size: 150%;
  background-color: #004098;
  border: 2px #FFF solid;
  padding: 10px 2% 10px 1%;
  position: relative;
}
.topic_btn a::before {
  content: url("../../../images/top/pickup.png");
  position: absolute;
  top: -30px;
  left: -35px;
}
.topic_btn a:hover {
  background-color: #f39700;
  color: #FFF;
  border: 2px #FFF solid;
}
.topic_btn a::after {
  font-family: "Font Awesome 5 Free";
  content: '\f105';
  font-weight: 900;
  padding-left: 20px;
}
@media screen and (max-width:768px) {
  .tab_item {
    width: calc(100%/4);
    font-size: 11.5px;
    padding: 10px 0;
    margin-bottom: 0;
  }
  .serviceBoxWrap .serviceBox2 {
    width: 100%;
    margin-top: 5%;
  }
  .topic_btn {
    margin-top: 10%;
    text-align: center;
    margin-bottom: 5%;
  }
  .topic_btn a {
    font-size: 110%;
    padding: 10px 2% 10px 2%;
  }
  @media screen and (max-width:450px) {
    .topic_btn {
      width: 100%;
      margin-top: 15%;
    }
    .topic_btn a {
      font-size: 90%;
      padding: 10px 2% 10px 2%;
      text-align: center;
    }
    .topic_btn a::after {
      padding-left: 10px;
      margin-bottom: 5%;
    }
  }
}