@charset "utf-8";
/*************************************************************
CSS information
style info :  TOPページ限定のスタイル
**************************************************************/
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
#a_1, #a_2, #a_3, #a_4, #a_5 {
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}
/* 
====================
↓メインビジュアル
====================
*/

.main_visual {
  box-sizing: border-box;
  position: relative;
  height: 400px;  
	background: url(https://gsx-co-jp.s3.ap-northeast-1.amazonaws.com/services/emergency/mv_bg.jpg) no-repeat center top;
	background-size: cover;  
}

.main_visual::after {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 400px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.main_visual_inner .mv_right {
    margin-top: 0;
}

.main_visual .mv_inquiry_bnr {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 290px;
    height: auto;
    min-height: 90px;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0C59BE;
    color: #ffffff;
    border-radius: 4px;
    text-align: center;
    font-size: 20px;
}

.mv_inquiry_bnr:hover {
    opacity: 0.9;
}

@media screen and (max-width: 1024px) {
  .mv_inquiry_bnr {
      font-size: 16px;
      margin-top: 40px;
      padding: 15px 20px;
      width: auto;
      border-radius: 10px;
      display: block;
      justify-content: right;
      background-color: #0C59BE;
      color: #ffffff;
      position: relative;
      text-align: center;
      font-weight: bold;
  }
}

.main_visual .main_visual_inner {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 72px;
  width: auto;
  margin: 0 auto;

  height: auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 10;
}

.main_visual_inner .mv_left {
  box-sizing: border-box;
  width: 70%;
  padding-right: 50px;
}

.main_visual_inner .mv_right {
  box-sizing: border-box;
  margin-top: 0;
  width: 70%;
}

.main_visual_inner .mv_title {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0px;
  font-weight: bold;
  font-size: 56px;
  line-height: 1.25;
  color: #F2F2F2;
}

.main_visual_inner .mv_subtitle {
  box-sizing: border-box;
  width: 100%;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.25;
  color: #F2F2F2;
}

.main_visual_inner .mv_caption {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  line-height: 1.75;
  color: #f0f0f0;
  margin-top: 16px;
}

section.section_content img {
    max-width: 100%;
}
table.step_area {
  margin-top: 40px;
}
table.step_area td {
    padding: 0 5px;
}
table.step_area td.table_content {
    padding-bottom: 25px;
}
td.step_td .step {
    background: #0d5197;
    width: 70px;
    height: 70px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 4px;
    color: white;
    font-weight: 900;
    border-radius: 53px;
    font-size: 12px;
    line-height: 190%;
}
td.step_td .step span {
    font-size: 26px;
}
td.table_content .table_c_title {
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 7px;
    line-height: 120%;
}
.service_list {
    margin-top: 15px;
    padding-bottom: 10px;
    position: relative;
}
.service_list li {
    font-weight: bold;
    font-size: 100%;
    list-style-type: disc;
    list-style-position: outside;
    list-style-image: url(https://gsx-co-jp.s3.ap-northeast-1.amazonaws.com/common/list_circle.webp);
    margin: 0px 0px 10px 27px;
    top: 0;
}
.subsection_title {
    max-width: 90vw;
    margin: 25px auto 0px auto;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #002f8e;
    text-align: left;
}

/* PC｜1440pxより広い  */
@media screen and (min-width: 1441px) {

  .main_visual .main_visual_inner {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    
    max-width: 1296px;
    margin: 0 auto;
  
    height: auto;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 10;
  }
}


/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {


  /* 
  ====================
  ↓メインビジュアル
  ====================
  */

  .main_visual {
    width: 100%;
    height: 220px;
    margin-top: 0px;
  }

  .main_visual::after {
    height: 220px;
    background: rgba(0, 0, 0, 0.3);
  }

  .main_visual .main_visual_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90vw;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
  }

  .main_visual_inner .mv_left {
    width: 100%;
  }

  .main_visual_inner .mv_title {
    max-width: 100%;
    margin-bottom: 0px;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
  }

  .main_visual_inner .mv_subtitle {
    max-width: 100%;
    margin-bottom: 0;
    margin-top: 8px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
  }

  .main_visual_inner .mv_right {
    width: 0;
  }

  .main_visual_sp {
    padding: 32px 5%;
  }

  .main_visual_sp {
    padding: 32px 5%;
  }

  .main_visual_sp_container {
    position: relative;
    padding-top: 24px;
    margin-bottom: 32px;
  }

  .main_visual_sp_container:last-child {
    margin-bottom: 0;
  }

  .main_visual_sp_container::before {
    position: absolute;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, #012E83 0%, #0C59BE 100%);
    content: '';
    top: 0;
    left: 0;
  }

  .popup-iframe {
    display: block;
    width: 100%;
    height: auto;
    outline: none;
  }

  .popup-iframe img {
    width: 100%;
    height: auto;
  }

  .main_visual_sp_container p {
    font-size: 14px;
    line-height: 2;
    color: #222;
    text-align: left;
  }

  .main_visual_sp_container .mv_link {
    margin-top: 8px;
    font-size: 14px;
    line-height: 2;
    color: #222;
    text-align: left;
    text-decoration: underline;
  }

  .popup-iframe {
    display: block;
    width: 100%;
    height: auto;
    outline: none;
  }

  .popup-iframe img {
    width: 100%;
    height: auto;
  }

  .main_visual_sp_container p {
    font-size: 14px;
    line-height: 2;
    color: #222;
    text-align: left;
  }
  td.table_content .table_c_title {
      font-size: 120%;
  }
  .service_list li {
      font-size: 80%;
  }
  table.c_table th, table.c_table td {
      font-size: 80%;
  }
}


/* 
====================
↓アンカーメニュー
====================
*/

.anchor_menu {
  width: 100%;
  padding: 20px 0;
}

.anchor_menu_container {
  display: flex;
  justify-content: space-around;
  max-width: 1296px;
  margin: 0 auto;
}

.anchor_menu_item {
  width: 100%;
  list-style: none;
  box-sizing: border-box;
  border-left: 1px solid #D8D8D8;
}

.anchor_menu_item > a {
  text-decoration: none;
  outline: none;

  display: grid;
  place-items: center;
  width: 100%;
  height: 40px;

  font-size: 16px;
  color: #012E83;
}

.anchor_menu_item:last-child {
  border-right: 1px solid #D8D8D8;
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓アンカーメニュー
  ====================
  */

  .anchor_menu {
    width: 100%;
    padding: 0;
  }

  .anchor_menu_container {
    display: grid;
    grid-template-columns: 1fr;
  
    margin: 0;
  }

  .anchor_menu_item > a {
    list-style: none;
    box-sizing: border-box;
  
    display: grid;
    place-items: center start;
    height: 56px;
    padding: 0 5%;
    border-left: none;
    border-bottom:1px solid rgba(216, 216, 216, 0.5);
  
    text-align: left;
    font-size: 14px;
  }

  .anchor_menu_item {
    position: relative;
    border-left: none;
  }

  .anchor_menu_item:last-child {
    border-right: none;
  }

  .anchor_menu_item::after {
    position: absolute;
    content: "";
    margin: auto;
    top: 0;
    bottom: 4px;
    right: 5%;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid rgba(153, 153, 153, 0.7);
    border-right: 1.5px solid rgba(153, 153, 153, 0.7);
    transform: rotate(135deg);
  }


}

/* 
====================
↓本文
====================
*/


.section_content {
  box-sizing: border-box;
  padding: 80px 11.5%;
  background: #fff;
}

.bg_gray {
  background: #F9F9F9;
}

.bg_light_blue {
  background: #F6F9FC;
}

.section_content .menu_title {
  margin-bottom: 80px;
}

.section_content .menu_title > h2 {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  line-height: 1.1;
  color: #012E83;
}

.section_content .menu_title > hr {
  margin: 0 auto;
  margin-top: 24px;

  border: 3px solid;
  border-image: linear-gradient(90deg, #012E83 0%, #0C59BE 100%) 1/0 0 3px 0;
  border-style: solid;

  width: 40px;
}

.section_content .section_title {  
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 12px;
  margin: 64px 0 32px;
  border-bottom: 4px solid #D8D8D8;
  
  font-size: 24px;
  font-weight: bold;
  color: #012E83;
  text-align: left;
}

.section_content .section_title::before {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -4px;
  width: 64px;
  height: inherit;
  border: 4px solid;
  border-image: linear-gradient(90deg, #012E83 0%, #0C59BE 100%) 1/0 0 4px 0;
  border-style: solid;
}

.section_content .caption {
  box-sizing: border-box;
  width: 100%;
  margin-top: 24px;
  
  font-size: 16px;
  line-height: 2;
  color: #222;
  text-align: left;
}

.section_content .link {
  text-decoration: underline;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 24px;
  
  font-size: 16px;
  line-height: 2;
  color: #222;
  text-align: left;
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓本文
  ====================
  */

  .section_content {
    padding: 40px 5%;
  }

  .sp_nopad {
    padding: 40px 0 !important;
  }

  .section_content .menu_title {
    margin-bottom: 32px;
  }
  
  .section_content .menu_title > h2 {
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.25;
    color: #012E83;
  }
  
  .section_content .menu_title > hr {
    margin: 0 auto;
    margin-top: 24px;
  
    border: 2px solid;
    border-image: linear-gradient(90deg, #012E83 0%, #0C59BE 100%) 1/0 0 2px 0;
    border-style: solid;
  
    width: 40px;
  }

  .section_content .section_title {  
    position: relative;
    box-sizing: border-box;
    max-width: 90vw;
    padding-bottom: 12px;
    margin: 32px auto 24px auto;
    border-bottom: 2px solid #D8D8D8;
    
    font-size: 20px;
    font-weight: bold;
    color: #012E83;
    text-align: left;
  }
  
  .section_content .section_title::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -2px;
    width: 64px;
    height: inherit;
    border: 2px solid;
    border-image: linear-gradient(90deg, #012E83 0%, #0C59BE 100%) 1/0 0 2px 0;
    border-style: solid;
  }

  .section_content .caption,
  .section_content .link {
    font-size: 14px;
    max-width: 90vw;
    margin: 0 auto;
  }

}

/* 
====================
↓画像と文章の横並び
====================
*/

.section_content .flex_image_sentence {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 40px;
}

.section_content .flex_image_sentence .flex_image_sentence_left {
  width: 55%;
}

.section_content .flex_image_sentence .flex_image_sentence_left h3, .secure_subtitle {
  width: 100%;
  margin-bottom: 16px;

  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  color: #012E83;
  text-align: left;
}

.section_content .flex_image_sentence .flex_image_sentence_left p {
  width: 100%;
  font-size: 16px;
  line-height: 2;
  color: #222;
  text-align: center;
}

.section_content .flex_image_sentence .flex_image_sentence_right {
  width: 40%;
}

.section_content .flex_image_sentence .flex_image_sentence_right img {
  width: 100%;
  object-fit: cover;
}

.reverce {
  flex-direction: row-reverse;
}

.img_box_wrap {
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
}

.img_box_wrap > .ttl_blue {
  color: #002f8e;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 20px;
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓画像と文章の横並び
  ====================
  */

  .section_content .flex_image_sentence .flex_image_sentence_left {
    width: 100%;
  }

  .section_content .flex_image_sentence .flex_image_sentence_right {
    width: 100%;
  }  
  
  .section_content .flex_image_sentence .flex_image_sentence_right img {
    margin-top: 24px;
  }

}

/* 
====================
↓コース概要
====================
*/

.section_content .column {
  width: 100%;
  border-top: 1px solid #d8d8d8;
  padding: 56px 0;
}

.section_content .column:last-child {
  border-bottom: 1px solid #d8d8d8;
}

.section_content .column_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 80px;
  
  width: 100%;
  margin: 0 auto;
}

.section_content .column_flex .column_left {
  width: 11%;
  font-size: 56px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: rgba(1, 46, 131, 0.6);
}

.section_content .column_flex .column_right {
  width: 90%;
}

.section_content .column_flex .column_right span.strong {
  font-size: 40px;
  font-weight: 700;
  color: #012E83;
}

.section_content .column_flex .column_right p {
  position: relative;
  font-size: 16px;
  font-weight: normal;
  color: #222;
}


/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓コース概要
  ====================
  */

  .section_content .column_flex {
    display: block;
    
    width: 100%;
    margin: 0 auto;
  }

  .section_content .column_flex .column_left {
    width: 10%;
    font-size: 24px;
  }

  .section_content .column_flex .column_right {
    width: 100%;
  }

  .section_content .column_flex .column_right h3 {
    margin-top: 8px;
  }

  .section_content .column_flex .column_right p {
    font-size: 14px;
  }
}


/* 
====================
↓アイコンが3つ横並びになるセクション
====================
*/


.section_content .flex {
  box-sizing: border-box;
  width: 100%;
  margin-top: 64px;

  display: flex;
  justify-content: space-around;
}

.section_content .flex_item {
  width: 30%;
}

.section_content .flex_item .icon_area {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: #012E83;
  border-radius: 50%;
}

.section_content .flex_item .icon_area img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;

  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.section_content .flex_item .caption_area {
  width: 100%;
  margin: 0 auto;
  margin-top: 32px;
}

.section_content .caption_area h3 {
  position: relative;
  width: 100%;
  
  font-size: 24px;
  line-height: 1.5;
  color: #133B88;
  text-align: center;
  font-weight: bold;
}

.section_content .flex_item .caption_area p {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.75;
  color: #222;
  text-align: left;
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓アイコンが3つ横並びになるセクション
  ====================
  */

  .section_content .flex {
    box-sizing: border-box;
    width: 100%;
    margin-top: 64px;
  
    display: block;
  }
  
  .section_content .flex_item {
    width: 100%;
    margin-top: 56px;
  }  

  .section_content .flex_item .caption_area {
    margin-top: 40px;
  }

  .section_content .caption_area h3 {
    font-size: 24px;
  }

  .section_content .flex_item .caption_area p {
    margin-top: 16px;
    font-size: 14px;
  }
}

/* 
====================
↓コース概要
====================
*/

.section2_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
}


/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓コース概要（表）
  ====================
  */

.section2_ttl,
.secureWA .section2_ttl {
	font-size: 20px;
	padding: 20px;
	line-height: 130%;
}
.section2_ttl2 {
	font-size: 20px;
}
.section2_ttl3 {
	margin: 10px 0 20px;
	font-weight: 100;
	font-size: 13px;
}
.section2_grid {
	display: block;
}
.section2_grid p {
  font-size: 14px;
}
.app_area, .net_area, .secure_area {
	padding: 30px 4% 40px;
	color: #ffffff;
	position: relative;
}
.app_02:before,
.app_03:before,
.app_04:before,
.app_05:before,
.app_06:before,
.net_02:before,
.net_03:before,
.net_04:before,
.net_05:before,
.net_06:before,
.secure_02:before,
.secure_03:before,
.secure_04:before,
.secure_05:before {
	position: absolute;
	color: #222;
	background: #fff;
	text-align: center;
	z-index: 9;
	font-weight: bold;
	top: -18px;
    margin-right: 0;
	right: 20%;
	padding: 2px 0;
	font-size: 120%;
	width: 60%;
}
.section3_ttl {
	position: absolute;
	text-align: center;
	z-index: 9;
	font-weight: bold;
	left: auto;
	top: -18px;
	right: 20%;
	padding: 2px 0;
	font-size: 120%;
	width: 60%;
}
.net_02:before {
	content: "対象者";
}
.net_03:before {
	content: "効果（到達目標）";
}
.net_05:before {
	content: "講座内容";
}
.net_06:before {
	content: "試験内容";
}
.section1_area2 img {
	margin: 20px 0;
}
.app_05 span, .net_05 span {
	font-size: 90%;
}
.net_area.net_05 .float_l,
.net_area.net_05 .float_r {
	width: 100%;
	float: none!important;
}
}

/* 
====================
↓受講概要
====================
*/

.section3_ttl {
	color: #fff;
  margin: 80px auto 64px auto;
	padding: 2px 0;
	font-size: 24px;
	background: #012E83;
	width: 300px;
	text-align: center;
	font-weight: bold;
}

table.table_1 {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 2.2;
	border-spacing: 0;
}
table.table_1 th {
	width: 120px;
	padding: 16px 0px;
	text-align: left;
	border-bottom: 1px solid #becad9;
	color: #012E83;
	font-weight: bold;
	vertical-align: top;
}
table.table_1 td {
	padding: 16px 0px;
	border-bottom: 1px solid #becad9;
	vertical-align: middle;
}
table.table_1 tr:last-child th,
table.table_1 tr:last-child td {
	border-bottom: none;
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓受講概要
  ====================
  */
  table.table_1 {
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 0 8px;
    margin-right: 0;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2.2;
    border-spacing: 0;
  }
  table.table_1 th {
    width: 30vw;
    padding: 20px 0;
    font-size: 90%;
    line-height: 130%;
  }
  table.table_1 td {
    width: auto;
    font-size: 90%;
    line-height: 130%;
    padding-right: 4px;
  }

}

/* 
====================
↓ボタン系
====================
*/

.app_btn,
.net_btn,
.net_btn_end,
.secure_btn,
.zt_btn{
	color: #fff;
	width: 160px;
	text-align: center;
	display: block;
	border-radius: 6px;
	text-decoration: none;
	padding: 5px 0;
}
.app_btn {
	background: #4f7291;
}
.net_btn {
	background: #b49323;
}
.net_btn_end {
	background: #bbb;
	}

.secure_btn {
	background: #810e81;
    margin-top: 10px;
}

.app_btn:hover,
.net_btn:hover,
.net_btn_end:hover,
.secure_btn:hover,
.zt_btn:hover {
	opacity: 0.7;
	color: #fff;
	text-decoration: none;
}

.nolink {
  color: #848484;
  width: 160px;
  text-align: center;
  display: block;
  border-radius: 6px;
  text-decoration: none;
  padding: 5px 0;
  background: #dedede;
}
.secureWA .nolink {
  margin-top: 10px;
}


/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓プランの案内
  ====================
  */

  .section_content .service_item {
    margin-top: 24px;
  }

  .section_content .service_item:first-child {
    margin-top: 0;
  }

  .section_content .service_item .flex {
    margin-top: 0;
    padding: 0;
  
    display: block;
  }

  .section_content .service_item .caption_area {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
  }

  .section_content .service_item .caption_area h3 {
    position: relative;
    padding-bottom: 16px;
    font-size: 20px;
  }
  
  .section_content .service_item .caption_area h3::after {
    width: 40px;
  }
  
  .section_content .service_item .caption_area p {
    margin-top: 16px;
    font-size: 14px;
  }

  .section_content .service_item .image_area {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

}

/* 
====================
↓問い合わせボタン
====================
*/

.section_content .cv_btn {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 24px;

  width: 100%;
  max-width: 918px;
  margin: 0 auto;
  padding: 24px 66px 24px 16px;
  background: #fff;

  border: 2px solid #0C59BE;
  border-radius: 4px;
  transition: .3s;

  box-sizing: border-box;
}

.section_content .cv_btn::after {
  position: absolute;
  top: 50%;
  right: 40px;
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #0C59BE;
  border-right: 2px solid #0C59BE; 

  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
}

.section_content .cv_btn .service_image_area {
  width: 33%;
  height: auto;
  overflow: hidden;
}

.section_content .cv_btn .service_image_area img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  vertical-align: bottom;
}

.section_content .cv_btn p {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  color: #0C59BE;
}

.section_content .cv_btn:hover {
  filter: brightness(0.9);
}

.section_content .cv_btn:hover .service_image_area img {
  transition-duration: .3s;
  transform: scale(1.1);
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓問い合わせボタン
  ====================
  */

  .section_content .cv_btn {
    position: relative;
    display: block;
  
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #fff;
  
    border: none;
    border-radius: 4px;
  
    box-sizing: border-box;
  }

  .section_content .cv_btn::after {
    content: none;
  }

  .section_content .cv_btn .service_image_area {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
  }

  .section_content .cv_btn p {
    position: relative;
    padding: 16px 32px 16px 12px;
    background-color: #0C59BE;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    color: #fff;

    border-radius: 0 0 4px 4px;
  }

  .section_content .cv_btn p::after {
    position: absolute;
    top: 50%;
    right: 12px;
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff; 
  
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
  }

}


/* 
====================
↓バナーエリア
====================
*/

.bnr_area {
  display: block;
  box-sizing: border-box;

  width: 100%;
  max-width: 918px;
  margin: 0 auto;
  margin-top: 40px;
}

.bnr_first {
  margin-top: 0
}

.bnr_area img {
  width: 100%;
  vertical-align: bottom;
  object-fit: contain;
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓バナーエリア
  ====================
  */

  .bnr_area {
    width: 100%;
    margin-top: 20px;
  }

  .bnr_first {
    margin-top: 0
  }

}


/*
wrap_box
*/
.wrap_box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 60px;
}

.inbox_protect, .inbox_detect,
.inbox_respond, .inbox_predict {
  width: 45%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.inbox_protect {
  border: solid 1px #88c245;
}

.inbox_detect {
  border: solid 1px #f29e23;
}

.inbox_respond {
  border: solid 1px #37b7c7;
}

.inbox_predict {
  border: solid 1px #fd8159;
}

.header {
  color: #fff;
  padding: 5px 10px 5px 15px;
  font-weight: bold;
}

.inbox_protect > .header {
  background-color: #88c245;
}

.inbox_detect > .header {
  background-color: #f29e23;
}

.inbox_respond > .header {
  background-color: #37b7c7;
}

.inbox_predict > .header {
  background-color: #fd8159;
}

.points {
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
}

.point {
  position: relative;
  padding-left: 40px;
}

.point::before {
  font-family: 'Material Icons';
  content: '\e86c';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -14px;
}

.inbox_protect .point::before {
  color: #88c245;
}

.inbox_detect .point::before {
  color: #f29e23;
}

.inbox_respond .point::before {
  color: #37b7c7;
}

.inbox_predict .point::before {
  color: #fd8159;
}

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

  .wrap_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .inbox_protect, .inbox_detect,
  .inbox_respond, .inbox_predict {
    width: 98%;
    margin-bottom: 20px;
  }

  .points {
    padding: 10px 5px;
  }

  .point {
    margin-bottom: 5px;
    padding-left: 25px;
  }

  .point::before {
    left: 10px;
    margin-top: -12px;
  }
}

/*
labo_flex
*/

.labo_flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 100px;
}

.labo_image {
  width: 700px;
}

.labo_points {
  display: flex;
  flex-direction: column;
}

.labo_point {
  color: #95885a;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  padding: 16px 0 10px 53px;
  background: url(../images/cnd_section4_img2.jpg) no-repeat left;
}

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

  .labo_flex {
    flex-direction: column;
    margin-top: 40px;
  }

  .labo_image {
    width: 95%;
    margin-bottom: 30px;
  }
  .labo_image img {
    max-width: 100%;
  }
  .labo_points {
    width: 95%;
  }
  .labo_point {
    font-size: 15px;
    padding: 0 0 12px 25px;
    background: url(../images/cnd_section4_img2.jpg) no-repeat left top;
    background-size: auto 17px;
  }
  .display_pc {
    display: none;
  }

}

/*
category_flex
*/

.category_flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 60px;
}

.category_img {
  max-width: 45%;
}

.category_points {
  display: flex;
  flex-direction: column;
  width: 45%;
}

.category_point {
  display: flex;
  flex-direction: column;
  color: #222;
  line-height: 1.4;
  margin-bottom: 2em;
}

.category_info {
  padding-left: 1.5em;
  line-height: 1.6;
}

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

  .category_flex {
    flex-direction: column;
    margin-top: 40px;
    align-items: center;
  }

  .category_img {
    max-width: 95%;
    margin-bottom: 30px;
  }

  .category_points {
    width: 95%;
  }

  .category_point {
    margin-bottom: 1.5em;
  }


}


/*
cnd_table
*/

.cnd_table {
  width: 100%;
  margin-top: 60px;
}

.cnd_table th {
  color: #fff;
  vertical-align: middle;
  text-align: left;
  padding: 5px 10px;
  border: solid 1px #fff;
}

.cnd_table td {
  color: #222;
  vertical-align: middle;
  text-align: left;
  padding: 5px 10px;
  border: solid 1px #fff;
}


.cnd_table td.number {
  width: 45px;
  color: #111;
  font-size: 19px;
  text-align: center;
  background-color: #eee;
}

.cnd_table td.method {
  overflow: hidden;
  vertical-align: middle;
  background-color: #eee;
  color: #111;
  padding-right: 20px;
}

.cnd_table th.lw_ttl_01 {
  background-color: #7f7f7f;
  width: 35%;
}

.cnd_table th.lw_ttl_02 {
  background-color: #87c045;
}

.cnd_table th.lw_ttl_03 {
  background-color: #f2a432;
}

.cnd_table th.lw_ttl_04 {
  background-color: #4bcbdb;
}

.cnd_table th.lw_ttl_05 {
  background-color: #ff8a65;
}

.point_new {
  color: #e80000;
}

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

  .cnd_table {
    width: 95%;
    margin: 0 auto;
    margin-top: 40px;
  }
}


ul.disc-cnd > li:before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  display: block;
  margin-left: -18px;
  margin-top: 9px;
  float: left;
}

ul.disc-cnd > li.bp:before {
  background: #002f8e;
}

ul.disc-cnd {
  color: #fff;
  margin-left: 2em;
}

ol.ol-cnd > li {
  list-style: auto;
  margin-left: 1.5em;
}

ul.ul-cnd > li {
  list-style-type: "ー";
  margin-left: 1.5em;
}

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

  ul.disc-cnd > li:before {
    margin-top: 6px;
  }
}

.caution a {
  color: #ff0000;
  font-size: 20px;
  font-weight: bold;
}

.caution_small a {
  color: #ff0000;
}

.caution a:hover, .caution_small a:hover {
  text-decoration: underline;
}


/*
master box
*/
.master_box {
  padding: 50px;
  max-width: 900px;
  background: #104889;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 60px;
}

.master_box img {
  max-width: 100%;
}

.subttl_master{
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 40px;
  color: #fff;
}

.master_box ul.flow_flex {
  width: 800px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  text-align: center;
}

.master_box ul.flow_flex li {
  width: 160px;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 5px;
  color: #fff;
}

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

  .master_box {
    padding: 20px;
    max-width: 355px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 40px;
  }

  .subttl_master{
    font-size: 16px;
    margin-bottom: 20px;
  }

  .master_box ul.flow_flex {
    width: 100%;
  }

  .master_box ul.flow_flex li {
    width: 22%;
    font-size: 11px;
  }
}

/*
course_cards
*/
.courses_wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 60px;
}

.course_card {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 320px;
  height: 60px;
  margin-bottom: 15px;
  background-color: #022E83;
}

.course_number {
  width: 45px;
  padding-left: 15px;
  font-size: 19px;
  font-weight: bold;
  color: #7b96bc;
}

.course_method {
  padding-left: 15px;
  line-height: 1.4;
  color: #FFF;
  font-weight: bold;
}

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

  .courses_wrapper {
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }

  .course_card {
    width: 95%;
    height: 60px;
    margin-bottom: 5px;
    background-color: #022E83;
  }
}

/*
hidden_box
*/
.hidden_box {
  margin: 0 0 10px;
  padding: 0;
}

.hidden_box table {
  min-height: 77px;
  margin: 0 auto;
}

.hidden_box th {
  background: #1b5197;
  color: #ffffff;
  font-weight: bold;
  width: 160px;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
}

.hidden_box td {
  text-align: left;
  background: #ffffff;
  font-weight: bold;
  width: 840px;
  vertical-align: middle;
  font-size: 16px;
  padding: 5px 20px;
}

.hidden_box li {
  list-style-position: inside;
  list-style-type: "● ";
}

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

  .scedule {
    width: 95%;
    margin: 0 auto;
  }

  .hidden_box th {
    font-size: 100%;
  }

  .hidden_box td {
    font-size: 90%;
  }
}

.s_table {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 40px;
}

.s_table th {
  width: 10%;
  border: solid 1px #002f8e;
  border-right: solid 1px #ccc;
  border-bottom: none;
  background: #002f8e;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
}

.s_table td {
  border: solid 1px #002f8e;
  background: #fff;
  padding: 10px;
  color: #002f8e;
  text-align: left;
  vertical-align: baseline;
}

.blue{
  color: #002F8E !important;
}

.subsection_title {
  max-width: 90vw;
  margin: 25px auto 0px auto;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #002f8e;
  text-align: left;
}

/* 
====================
↓GSXビジネスパートナー契約までの流れ
====================
*/

.flow_wrapper {
  width: 100%;
  max-width: 918px;
  margin: 0 auto;
}

/* 紺背景のカード */
.flow_item_blue, .flow_item {
  position: relative;
  width: 100%;
  height: auto;
  padding: 32px;
  margin-top: 24px;
  background: #012E83;
  box-sizing: border-box;
}

/* ライトブルー背景のカード */

.flow_item {
  background: #F6F9FC;
  border: 2px solid rgba(216, 216, 216, 0.5);
}

/* 紺背景のカードの矢印 */
.flow_item_blue::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #012E83 transparent transparent transparent;
  border-width: 8px 16px 0 16px;
  position: absolute;
  bottom: -8px;
  left: 16px;
  margin-top: 0;

  transform: translateX(50%);
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
}

.flow_item_blue h3, .flow_item h3 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
}

.flow_item h3 {
  color: #012E83;
}

.flow_item_blue p, .flow_item p {
  margin-top: 24px;

  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  color: #fff;
}

.flow_item p {
  color: #222;
}


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

  /* 
  ====================
  ↓GSXビジネスパートナー契約までの流れ
  ====================
  */


  .flow_wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 紺背景のカード */
  .flow_item_blue, .flow_item {
    position: relative;
    width: 100%;
    height: auto;
    padding: 32px 16px;
    margin-top: 16px;
  }

  /* 紺背景のカードの矢印 */
  .flow_item_blue::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #012E83 transparent transparent transparent;
    border-width: 8px 16px 0 16px;
    position: absolute;
    bottom: -8px;
    left: 16px;
    margin-top: 0;

    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
  }

  .flow_item_blue h3, .flow_item h3 {
    font-size: 20px;
  }

  .flow_item_blue p, .flow_item p {
    font-size: 14px;
  }

}


/* 
====================
↓実施の流れ
====================
*/

.section_content .flow_flex {
  width: 100%;
  display: flex;
  margin-top: 40px;
  gap: 0 8px;
  justify-content: center;
}

/* 紺背景のカード */
.section_content .process_item_blue,
.section_content .process_item {
  position: relative;
  width: 20%;
  height: 400px;
  padding: 24px 16px;
  background: #012E83;
  box-sizing: border-box;
}

/* ライトブルー背景のカード */

.section_content .process_item {
  background: #F6F9FC;
  border: 2px solid rgba(216, 216, 216, 0.5);
}

/* 紺背景のカードの矢印 */
.section_content .process_item_blue::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 8px;
  border-color: transparent transparent transparent #012E83;
  position: absolute;
  bottom: 50%;
  right: -8px;
  margin-top: -6px;
}

.section_content .process_item_blue .duration,
.section_content .process_item .duration {
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  color: #fff;
}

.section_content .process_item .duration {
  color: #012E83;
}

.section_content .process_item_blue h3,
.section_content .process_item h3 {
  margin-top: 24px;

  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
}

.section_content .process_item h3 {
  color: #012E83;
}

.section_content .process_item_blue ul,
.section_content .process_item ul {
  position: relative;
  margin-top: 32px;
  padding-top: 24px;
  
  list-style: none;
}

.section_content .process_item_blue ul::before,
.section_content .process_item ul::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  
  width: 56px;
  height: 1px;
  background: #f0f0f0;
}

.section_content .process_item ul::before {
  background: #012E83;
}

.section_content .process_item_blue li,
.section_content .process_item li {
  margin-top: 16px;

  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  color: #f0f0f0;
}

.section_content .process_item li {
  color: #012E83;
}

.section_content .process_item_blue li:first-child,
.section_content .process_item li:first-child {
  margin-top: 0;
}

/* サポートボード */
.section_content .support {
  position: relative;
  box-sizing: border-box;
  width: 731px;
  padding: 28px 16px;
  margin: 0 auto;
  margin-top: 64px;
  background: #fff;
  border: 1px solid #d8d8d8;
}

.section_content .support h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: #FF3D00;
}

.section_content .support p {
  margin-top: 12px;

  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #222;
}

.section_content .support_icon_area {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 56px;
  height: 56px;
  background-color: #111;
  -webkit-mask-image: url(../../../images/icn/icn_026.svg);
  mask-image: url(../../../images/icn/icn_026.svg);
  -webkit-mask-size: 56px 56px;
  mask-size: 56px 56px;

  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓実施の流れ
  ====================
  */

  .section_content .flow_flex {
    width: 100%;
    display: block;
    margin-top: 32px;
  }

  .section_content .process_item {
    width: 100%;
    display: block;
    margin-top: 32px;
  }

  /* 紺背景のカード */
  .section_content .process_item_blue,
  .section_content .process_item {
    width: 100%;
    height: auto;
    padding: 32px 16px;
  }

  /* ライトブルー背景のカード */
  .section_content .process_item {
    margin-top: 16px;
  }

  .section_content .process_item_blue h3,
  .section_content .process_item h3 {
    margin-top: 24px;

    font-size: 24px;
  }

  /* 紺背景のカードの矢印 */
  .section_content .process_item_blue::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #012E83 transparent transparent transparent;
    border-width: 8px 16px 0 16px;
    position: absolute;
    bottom: -8px;
    left: 16px;
    margin-top: 0;

    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
  }

  /* サポートボード */
  .section_content .support {
    position: relative;
    width: 100%;
    height: 220px;
    margin-top: 32px;
  }

  .section_content .support h3 {
    line-height: 1.5;
  }

  .section_content .support p {
    line-height: 1.5;
  }

  .section_content .support_icon_area {
    position: absolute;
    top: 80%;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: #111;
    -webkit-mask-image: url(../../../images/icn/icn_026.svg);
    mask-image: url(../../../images/icn/icn_026.svg);
    -webkit-mask-size: 56px 56px;
    mask-size: 56px 56px;
  
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

}

.flex_02 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.flex_02 > .caption {
  width: 50%;
}

.flex_02 > .image_caption {
  width: 60%;
}

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

  .flex_02 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flex_02 > .caption {
    width: 100%;
  }
  
  .flex_02 > .image_caption {
    width: 100%;
  }
}

.image_caption {
  width: 100%;
  text-align: center;
  padding: 40px 20px;
}

.image_caption img {
  max-width: 100%;
}

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

  .image_caption {
    width: 100%;
    text-align: center;
    padding: 30px 5px;
  }
}

/* 
====================
↓サービスプラン
====================
*/

.section_content .service_plan_list {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px 24px;
}

.section_content .service_card {
  position: relative;
  box-sizing: border-box;
  width: 292px;
  height: 400px;
  padding: 32px 24px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px 24px;

  background: #F6F9FC;
  border: 1px solid #d8d8d8;
  border-top: none;
}

.section_content .service_card::before {
  position: absolute;
  box-sizing: border-box;
  content: '';
  top: 0;
  left: -1px;

  width: 292px;
  height: 8px;

  background: #d8d8d8;
}

.section_content .express::before {
  background: #2986FF;
}

.section_content .standard::before {
  background: #0C59BE;
}

.section_content .premium::before {
  background: #F6671C;
}

.section_content .premium-ex::before {
  background: #FF5542;
}

.section_content .for_sp::before {
  background: #02A553;
}

.section_content .service_card h3 {
  position: relative;
  padding-bottom: 24px;

  font-size: 32px;
  font-weight: bold;
  line-height: 1.25;
  text-align: left;

  color: #222;
}

.section_content .express h3 {
  color: #2986FF;
}

.section_content .standard h3 {
  color: #0C59BE;
}

.section_content .premium h3 {
  color: #F6671C;
}

.section_content .premium-ex h3 {
  color: #FF5542;
}

.section_content .for_sp h3 {
  color: #02A553;
}

.section_content .service_card h3::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;

  width: 40px;
  height: 2px;

  background: #d8d8d8;
}

.section_content .express h3::after {
  background: #2986FF;
}

.section_content .standard h3::after {
  background: #0C59BE;
}

.section_content .premium h3::after {
  background: #F6671C;
}

.section_content .premium-ex h3::after {
  background: #FF5542;
}

.section_content .for_sp h3::after {
  background: #02A553;
}

.section_content .service_card p.service_caption {
  margin-top: 24px;

  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;

  color: #999;
}

.section_content .service_card ul {
  margin-top: 24px;

  list-style: none;
}

.section_content .service_card ul.first_content {
  margin-top: 32px;
}

.section_content .service_card ul.service_content li.ttl {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.25;
  text-align: left;
  color: #222;
}

.section_content .service_card ul.service_content li.content_list {
  position: relative;
  margin-top: 12px;
  padding-left: 4px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.25;
  text-align: left;
  color: #222;
}

.section_content .service_card ul.service_content li.content_list::before {
  content: '';
  display: inline-block;
  margin-right: 15px;
  width: 4px;
  height: 12px;
  border-right: 1.5px solid #222;
  border-bottom: 1.5px solid #222;
  transform: rotate(45deg);
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓サービスプラン
  ====================
  */

  .section_content .service_plan_list {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 0;
  }

  .section_content .service_card {
    width: 100%;
    height: 400px;
  }

  .section_content .service_card::before {
    width: calc(100% + 2px);
  }

}

/* 
====================
↓価格
====================
*/

.section_content .cv_btn {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 24px;

  width: 100%;
  max-width: 918px;
  margin: 0 auto;
  padding: 24px 16px;
  background: #fff;

  border: 2px solid #0C59BE;
  border-radius: 4px;
  transition: .3s;

  box-sizing: border-box;
}

.section_content .cv_btn::after {
  position: absolute;
  top: 50%;
  right: 40px;
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #0C59BE;
  border-right: 2px solid #0C59BE; 

  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
}

.section_content .cv_btn .service_image_area {
  width: 33%;
  height: auto;
  overflow: hidden;
}

.section_content .cv_btn .service_image_area img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  vertical-align: bottom;
}

.section_content .cv_btn p {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  color: #0C59BE;
}

.section_content .cv_btn:hover {
  filter: brightness(0.9);
}

.section_content .cv_btn:hover .service_image_area img {
  transition-duration: .3s;
  transform: scale(1.1);
}

/* SP｜1024px以下  */
@media screen and (max-width: 1024px) {

  /* 
  ====================
  ↓価格
  ====================
  */

  .section_content .cv_btn {
    position: relative;
    display: block;
  
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #fff;
  
    border: none;
    border-radius: 4px;
  
    box-sizing: border-box;
  }

  .section_content .cv_btn::after {
    content: none;
  }

  .section_content .cv_btn .service_image_area {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
  }

  .section_content .cv_btn p {
    position: relative;
    padding: 16px 32px 16px 12px;
    background-color: #0C59BE;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    color: #fff;
    border-radius: 0 0 4px 4px;
  }

  .section_content .cv_btn p::after {
    position: absolute;
    top: 50%;
    right: 12px;
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff; 
  
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
  }

}

.subsection_title {
  max-width: 90vw;
  margin: 25px auto 0px auto;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #002f8e;
  text-align: left;
}

.flex_04 {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-top: 60px;
}

.flex_04_panel {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex_04_panel img {
  max-width: 100%;
  margin-bottom: 20px;
}

.flex_04_panel h3 {
  font-weight: bold;
  color: #1e9bc9;
  font-size: 27px;
  margin-bottom: 15px;
}

.flex_04_panel h3.another {
  font-size: 20px;
}

.flex_04_panel p {
  font-weight: bold;
  color: #222;
  font-size: 16px;
  text-align: center;
}

.flex_04_panel p.another {
  font-weight: initial;
  font-size: 14px;
  text-align: left;
}

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

  .flex_04 {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 50px;
  }
  
  .flex_04_panel {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
  }
  
  .flex_04_panel img {
    max-width: 100%;
    margin-bottom: 15px;
  }
  
  .flex_04_panel h3 {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .flex_04_panel h3.another {
    font-size: 18px;
  }
  
  .flex_04_panel p {
    font-size: 14px;
  }
}

table.c_table ul {
  clear: both;
  text-align: left;
}
table.c_table span {
  font-size: 14px;
}
/* table */
/* ------------------------------------------------------------ */
table.c_table {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  border-spacing: 0;
  margin-top: 40px;
  background: #fff;
}
table.c_table th {
  color: #ffffff;
  font-size: 17px;
  vertical-align: middle;
  padding: 15px 10px;
}
table.c_table tr.bg_black {
  background: url(../images/teleworkguideline_img_table_01.jpg) repeat right bottom;
}
table.c_table tr.bg_black > th[rowspan] {
  background-color: #000;
}

table.c_table th.bg_blue {
  background: url(../images/teleworkguideline_img_table_02.jpg) repeat center;
  color: #000000;
}
table.c_table span.red {
  color: #a40000;
  font-weight: bold;
}
table.c_table span.parentheses {
  font-size: 80%;
}
table.c_table th, table.c_table td {
  border-right: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  text-align: center;
  font-size: 90%;
}
table.c_table th.bg_blue {
  border-right: none;
  border-bottom: 1px solid #ffffff;
  text-align: left;
  font-weight: bold;
  padding: 5px 10px;
}
table.c_table th.bg_blue:last-child {
  border-bottom: none;
}
table.c_table td {
  font-size: 17px;
  line-height: 120%;
  padding: 10px;
  vertical-align: middle;
  text-align: left;
}
table.c_table.table_td_s td {
  font-size: 14px;
}
table.c_table tr td:nth-child(4) {
  font-feature-settings: "palt";
}
.list_text1 {
    font-size: 18px;
    font-weight: bold;
    color: #0c59be;
}
.list_text2 {
    color: #888888;
    font-size: 14px;
}


.balloon_area {
    margin-top: 50px;
}
.balloon_area,
.balloon_area1 {
    display: flex;
    flex-wrap: wrap;
}
.balloon_area .balloon_box {
    padding: 0 0% 50px;
    width: 49%;
}
.balloon_area1 .balloon_box {
    width: 50%;
}
.balloon_area .balloon_box img {
    padding: 0px 0px 0 0px;
    margin: 30px;
}
.balloon_area .balloon_box p {
    background: #f3f6f8;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    width: 76%;
    font-weight: bold;
    float: right;
}
.balloon_area .balloon_box .balloon_r::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    margin-left: -30px;
    top: 0;
    margin-top: 70px;
    border-left: 30px solid transparent;
    border-right: 0px solid transparent;
    border-top: 20px solid #f3f6f8;
}
.balloon_area1 .balloon_box ul {
    background: #dee9f3;
    padding: 23px 23px 18px 23px;
    border-radius: 10px;
    position: relative;
}
.balloon_area1 .balloon_box .balloon_l {
    margin-top: 92px;
    margin-left: 40px;
}
.balloon_area1 .balloon_box .balloon_r {
    margin-right: 40px;
}
.balloon_area1 .balloon_box img {
    padding-left: 15px;
    margin-right: 15px;
}
.balloon_area1 .balloon_box .balloon_l::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    margin-right: -30px;
    bottom: 0;
    margin-bottom: 80px;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    border-top: 20px solid #f3f6f8;
}
.balloon_area1 .balloon_box .balloon_r::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    margin-left: -30px;
    bottom: 0;
    margin-bottom: 80px;
    border-left: 30px solid transparent;
    border-right: 0px solid transparent;
    border-top: 20px solid #f3f6f8;
}

.service_banner_1 {
    position: relative;
    width: 100%;
    max-width: 1296px;
    height: 240px;
    background: url(/top/images/bnr_1.webp) no-repeat center;
    background-size: cover;
    margin: 0 auto;
    margin-bottom: 80px;
}
.service_banner_1:last-child {
    margin-bottom: 0px;
}
.service_banner_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 10;
}
.service_banner_1::after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 240px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 0;
}
.service_banner_caption {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: #F2F2F2;
}

.service_banner_1 .button_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: space-between;
  width: 78%;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 24px;
  gap: 12px 24px;
}

.service_banner_1 .button_grid > a {
  box-sizing: border-box;
  display: grid;
  place-items: center;

  width: 100%;
  height: 64px;
  border-radius: 4px;
  background: #FF3D00;
  margin: 0 auto;

  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 16px;

  transition: .3s;
}

.service_banner_1 .button_grid > a.button_blue {
  background: #0C59BE;
}
.service_banner_1 .button_grid > a.button_orange {
  display: block;
}

.service_banner_1 .button_grid > a.button_wide_white {
  box-sizing: border-box;
  display: grid;
  grid-column: 1/4;
  grid-row: 2/2;

  width: 100%; 
  background: #F9F9F9;

  color: #0C59BE;
}

.service_banner_1 .button_orange {
  box-sizing: border-box;
  display: block;
  place-items: center;

  width: 100%;
  max-width: 255px;
  height: 64px;
  border-radius: 4px;
  background: #FF3D00;

  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 16px;

  transition: .3s;
  padding-top: 7px;
}
.service_banner_1 .button_orange span {
    font-size: 14px;
    display: block;
}
.pc_only {
  display: block!important;
}
.sp_only {
  display: none!important;
}

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

  table.c_table {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    border-spacing: 0;
    background: #fff;
  }
  table.c_table th {
    color: #ffffff;
    background: none;
  }
  span.parentheses {
    font-size: 80%;
  }
  table.c_table th, table.c_table td,table.c_table.table_td_s td {
    padding: 15px;
    border-right: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    border-left: 1px solid #c9c9c9;
    font-size: 100%;
  }
  table.c_table th.bg_blue:last-child {
    border-bottom: none;
  }
  table.c_table td {
    background: #ffffff;
  }
  table.c_table th.bg_blue {
    border-right: none;
    border-bottom: 1px solid #c9c9c9;
  }
  table.c_table tr.bg_palegray td {
    background: #f6f6f6;
  }
  table.c_table ul {
    clear: both;
    text-align: left;
  }
  table.c_table span {
    font-size: 14px;
  }
  /* table */
  /* ------------------------------------------------------------ */
  table.c_table {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    border-spacing: 0;
    margin-top: 10px;
    font-size: 80%;
  }
  table.c_table th {
    color: #ffffff;
    vertical-align: middle;
    padding: 10px;
  }
  table.c_table span.red {
    color: #a40000;
    font-weight: bold;
  }
  table.c_table span.parentheses {
    font-size: 80%;
  }
  table.c_table th, table.c_table td {
    border-right: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    text-align: center;
  }
  table.c_table th.bg_blue {
    border-right: none;
    border-bottom: 1px solid #ffffff;
    text-align: left;
    font-weight: bold;
  }
  table.c_table th.bg_blue:last-child {
    border-bottom: none;
  }
  table.c_table td {
    padding: 10px;
    line-height: 120%;
    vertical-align: middle;
  }
  table.c_table tr td:nth-child(4) {
    text-align: left;
    font-feature-settings: "palt";
  }
  .balloon_area .balloon_box img {
    padding: 40px 0px 0 0px;
    margin: 0;
  }
  .balloon_area .balloon_box {
    padding: 0 0% 20px;
    width: 100%;
  }
  .service_banner_1 .service_banner_caption {
    margin: 12px 24px 0px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #F2F2F2;
  }
  .service_banner_1 .button_grid {
    display: flex;
    flex-wrap: wrap;
    width: 210px;
    margin: 0 auto;
    margin-top: 24px;
    gap: 12px 24px;
  }
  .service_banner_1 .button_grid > a {
    box-sizing: border-box;
    place-items: center;
    width: 100%;
    height: 56px;
    border-radius: 4px;
    font-size: 14px;
  }
  .service_banner_1,
  .service_banner_1::after {
    height: 360px;
  }
  .service_banner_1 .button_orange {
    font-size: 14px;
  }
  .service_banner_1 .button_grid > a.button_blue {
    display: grid!important;
    padding-top: 0;
  }
  .pc_only {
    display: none!important;
  }
  .sp_only {
    display: block!important;
  }
}
.bold_blue {
  font-weight: bold;
  color: #002f8e;
}
.faq {
  margin: 25px auto 0px auto;
}
.faq_question {
  font-size: 16px;
  font-weight: bold;
  color: #002f8e;
}
.faq_answer {
  padding: 10px 0;
}
.faq_bold {
  font-weight: bold;
}