@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
@media screen and (min-width: 768px) {
  html {
    font-size: 0.733vw; } }
@media screen and (min-width: 1366px) {
  html {
    font-size: 10px; } }
@media screen and (max-width: 767px) {
  html {
    font-size: 2.565vw; } }

#HeaderArea1,
#HeaderArea2,
#FooterArea,
#ModalYouTube,
#SpGlobalNavi,
#TopicPath,
#old_footer_sitemap,
#SpSupportNavi {
  font-size: 16px !important; }

@media screen and (min-width: 768px) {
  #FooterArea,
  #FooterArea a {
    line-height: 16px !important; } }

@media screen and (min-width: 768px) {
  #Footer1Menu {
    padding-bottom: 2px !important;
    line-height: 16px !important; } }

@media screen and (min-width: 768px) {
  #HitachiTop {
    padding-bottom: 9px !important; } }

@media screen and (min-width: 768px) {
  #HitachiTop a {
    line-height: 16px !important; } }

@media screen and (min-width: 768px) {
  #Footer2Menu {
    line-height: 16px !important;
    padding-bottom: 10px !important;
    padding-top: 3px !important; } }

@media screen and (min-width: 768px) {
  #Copyright {
    padding-bottom: 0px !important;
    line-height: 16px !important; } }

@media screen and (min-width: 768px) {
  #Footer1 {
    padding-bottom: 3px !important; } }

/*
#SpGlobalNavi
#SpGlobalNavi
*/
/*
#HeaderArea2,
#HeaderArea1,
*/
#FooterPageTop {
  z-index: 100; }

body {
  background-color: #fff; }

#Contents {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400;
  font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
  color: #0C0C0C;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  position: relative;
  line-height: 0;
  background: #fff;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: strict;
  overflow: hidden; }

#Contents img {
  vertical-align: bottom; }

#Contents img,
#Contents svg {
  width: 100%;
  height: auto; }

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  #Contents img {
    image-rendering: -webkit-optimize-contrast; } }
#Contents ul,
#Contents ol {
  list-style: none; }

@media screen and (max-width: 767px) {
  .forPC {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .forSP {
    display: none !important; } }

@media print {
  .forSP {
    display: none; } }
@media screen and (max-width: 767px) {
  .pcv {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .spv {
    display: none !important; } }

#Contents *,
#Contents *:before,
#Contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

#Contents a {
  text-decoration: none;
  color: inherit;
  color: #CC0000; }

#TopicPath a {
  transition: ease-in-out 0.4s all;
  color: #0C0C0C; }

#TopicPath a:hover {
  color: #CC0000;
  text-decoration: none !important; }

/*header*/
.nav_mega_area *,
.nav_mega_area *:before,
.nav_mega_area *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/*
#GlobalNaviMenu > li > a,
#SupportNavi a,
#SupportNavi button span{
  @include fw(SemiBold);
}
*/
.nav_tgl .nav_cover {
  transition: ease-out 0.3s all; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_cover {
      position: fixed !important;
      width: 100%;
      height: calc( 100vh - 105px );
      top: 105px !important;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      pointer-events: none;
      opacity: 0;
      z-index: -1; } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_cover {
      display: none !important; } }

@media screen and (min-width: 768px) {
  .nav_tgl:hover .nav_cover {
    opacity: 1;
    transition-delay: 0.3s; } }

.nav_tgl .nav_mega_area {
  transition: ease-out 0.4s all; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_mega_area {
      position: absolute;
      width: 100%;
      top: 60px;
      left: 0;
      background: white;
      padding: 6rem 0;
      opacity: 0;
      pointer-events: none; } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_mega_area {
      position: relative;
      opacity: 1;
      pointer-events: auto !important; } }

@media screen and (min-width: 768px) {
  .nav_tgl:hover .nav_mega_area {
    opacity: 1;
    pointer-events: auto !important; } }

@media screen and (max-width: 767px) {
  .nav_tgl > a::after {
    display: none !important; } }

.nav_tgl > a .arrow {
  display: inline-block; }
  @media screen and (min-width: 768px) {
    .nav_tgl > a .arrow {
      position: relative;
      width: 8px;
      height: 8px;
      margin-left: 8px;
      transform: translateY(-6px); } }
  @media screen and (max-width: 767px) {
    .nav_tgl > a .arrow {
      position: absolute;
      top: 50%;
      right: 15px;
      width: 18px;
      height: 18px;
      margin-top: -0.2rem; } }

@media screen and (min-width: 768px) {
  .nav_tgl > a .arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    border: 1px solid;
    border-color: #222 #222 transparent transparent;
    transform: rotate(135deg);
    width: 100%;
    height: 100%; } }

@media screen and (min-width: 768px) {
  .nav_tgl.Current > a strong .arrow::after {
    border-color: #fff #fff transparent transparent; } }

.nav_tgl.Current > a > strong::after,
.nav_tgl.Current > a > strong::before,
.nav_tgl.Current > a > em::after,
.nav_tgl.Current > a > em::before {
  display: none !important; }

/*
#GlobalNaviMenu > li.Current > a > strong{
	background-image: none !important;
}
*/
@media screen and (max-width: 767px) {
  .nav_tgl > a .arrow::after,
  .nav_tgl > a .arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 0.2rem;
    background: #222; } }

@media screen and (max-width: 767px) {
  .nav_tgl.Current > a strong .arrow::after,
  .nav_tgl.Current > a strong .arrow::before {
    background: #fff; } }

@media screen and (max-width: 767px) {
  .nav_tgl > a .arrow::before {
    transform: rotate(90deg); } }

@media screen and (min-width: 768px) {
  .nav_tgl:hover > a {
    background: #CC0000;
    color: #fff !important; } }

@media screen and (min-width: 768px) {
  .nav_tgl:hover > a .arrow {
    transform: translateY(1px); } }

@media screen and (min-width: 768px) {
  .nav_tgl:hover > a .arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(-45deg);
    width: 100%;
    height: 100%; } }

@media screen and (min-width: 768px) {
  #SpGlobalNavi a:hover,
  #SpGlobalNavi a:focus {
    color: #0C0C0C;
    background: #F4F4F4; } }

@media screen and (max-width: 767px) {
  #SpGlobalNavi a:hover .arrow::after,
  #SpGlobalNavi a:hover .arrow::before,
  #SpGlobalNavi a:focus .arrow::after,
  #SpGlobalNavi a:focus .arrow::before {
    background: #fff; } }

#SpGlobalNavi .nav_tgl.open > a,
#SpGlobalNavi .nav_tgl.open > a:active,
#SpGlobalNavi .nav_tgl.open > a:hover,
#SpGlobalNavi .nav_tgl.open > a:focus {
  color: #fff !important;
  background: #CC0000 !important; }

@media screen and (max-width: 767px) {
  .nav_tgl.open > a .arrow::after,
  .nav_tgl.open > a .arrow::before {
    background: #fff; } }

@media screen and (max-width: 767px) {
  .nav_tgl.open > a .arrow::before {
    transform: rotate(0deg); } }

.nav_tgl .nav_mega_area dl {
  position: relative; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_mega_area dl {
      max-width: 127.5rem;
      margin: 0 auto;
      display: flex !important;
      justify-content: space-between;
      align-items: flex-start; } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_mega_area dl {
      width: 100%;
      display: none; } }

@media screen and (min-width: 768px) {
  .nav_tgl .nav_mega_area dl dt {
    position: relative;
    white-space: nowrap; } }
@media screen and (max-width: 767px) {
  .nav_tgl .nav_mega_area dl dt {
    display: none; } }

.nav_tgl .nav_mega_area dl dt .ttl {
  position: relative;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700;
  line-height: 1em;
  font-size: 30px;
  /*font-size: divceil($fs, 10, rem);*/ }

.nav_tgl .nav_mega_area dl dt span {
  position: relative;
  display: inline-block;
  font-weight: 700;
  line-height: 1em;
  font-size: 16px;
  /*font-size: divceil($fs, 10, rem);*/
  margin-top: 1rem;
  padding-left: 4.5rem; }

.nav_tgl .nav_mega_area dl dt span::after {
  content: '';
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  left: 0;
  background: #FA000F;
  height: 1px;
  width: 3.3rem;
  top: 0.5rem; }

.nav_tgl#nav_solution .nav_mega_area dl dd {
  position: relative; }
  @media screen and (min-width: 768px) {
    .nav_tgl#nav_solution .nav_mega_area dl dd {
      width: 95rem;
      padding-left: 32.5rem;
      background: url("../img/img_mega_solution.jpg") 0 0 no-repeat;
      background-size: 30rem auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; } }
  @media screen and (max-width: 767px) {
    .nav_tgl#nav_solution .nav_mega_area dl dd {
      background: #F4F4F4;
      border-top: #D9D9D9 1px solid;
      padding: 2rem 0 2rem; } }

.nav_tgl#nav_company .nav_mega_area dl dd {
  position: relative; }
  @media screen and (min-width: 768px) {
    .nav_tgl#nav_company .nav_mega_area dl dd {
      width: 95rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; } }
  @media screen and (max-width: 767px) {
    .nav_tgl#nav_company .nav_mega_area dl dd {
      background: #F4F4F4;
      border-top: #D9D9D9 1px solid;
      padding: 2rem 0 2rem; } }

@media screen and (max-width: 767px) {
  #SpGlobalNavi li > a {
    border-top: #D9D9D9 1px solid; } }

.nav_tgl#nav_solution .nav_mega_area dl dd a {
  position: relative;
  display: block;
  transition: ease-in-out 0.4s all;
  text-decoration: none; }
  @media screen and (min-width: 768px) {
    .nav_tgl#nav_solution .nav_mega_area dl dd a {
      width: 30rem;
      padding: 1rem 2rem 1.5rem;
      border-bottom: #D9D9D9 1px solid; } }
  @media screen and (max-width: 767px) {
    .nav_tgl#nav_solution .nav_mega_area dl dd a {
      width: 100%;
      padding: 0.8rem 4rem 0.8rem; } }

.nav_tgl#nav_company .nav_mega_area dl dd a {
  position: relative;
  display: block;
  transition: ease-in-out 0.4s all;
  text-decoration: none; }
  @media screen and (min-width: 768px) {
    .nav_tgl#nav_company .nav_mega_area dl dd a {
      width: 30rem;
      padding: 2rem 2rem 2.5rem;
      border-bottom: #D9D9D9 1px solid; } }
  @media screen and (max-width: 767px) {
    .nav_tgl#nav_company .nav_mega_area dl dd a {
      width: 100%;
      padding: 0.8rem 4rem 0.8rem; } }

@media screen and (min-width: 768px) {
  .nav_tgl#nav_solution .nav_mega_area dl dd a:nth-of-type(2),
  .nav_tgl#nav_solution .nav_mega_area dl dd a:nth-of-type(3) {
    border-top: #D9D9D9 1px solid; } }

@media screen and (min-width: 768px) {
  .nav_tgl#nav_company .nav_mega_area dl dd a:nth-of-type(1),
  .nav_tgl#nav_company .nav_mega_area dl dd a:nth-of-type(2),
  .nav_tgl#nav_company .nav_mega_area dl dd a:nth-of-type(3) {
    border-top: #D9D9D9 1px solid; } }

.nav_tgl .nav_mega_area dl dd a span {
  position: relative;
  display: inline-block;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #CC0000;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_mega_area dl dd a span {
      line-height: 1em;
      font-size: 10px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_mega_area dl dd a span {
      line-height: 1em;
      font-size: 1rem; } }

.nav_tgl .nav_mega_area dl dd a p {
  position: relative;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_mega_area dl dd a p {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 0.5rem; } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_mega_area dl dd a p {
      line-height: 1em;
      font-size: 1.4rem;
      margin-top: 0.2rem; } }

@media screen and (min-width: 768px) {
  .mega_link_top {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .nav_tgl .nav_mega_area dl dd a:hover p {
    color: #CC0000; } }

.nav_tgl .nav_mega_area dl dd a .arrow {
  position: absolute !important;
  transition: ease-out 0.6s all;
  top: 50%; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_mega_area dl dd a .arrow {
      margin-top: -0.6rem;
      right: 2rem;
      width: 1.2rem;
      height: 1.2rem; } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_mega_area dl dd a .arrow {
      margin-top: -0.4rem;
      right: 2rem;
      width: 0.8rem;
      height: 0.8rem; } }

.nav_tgl .nav_mega_area dl dd a .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 2px solid;
  width: 100%;
  height: 100%; }
  @media screen and (min-width: 768px) {
    .nav_tgl .nav_mega_area dl dd a .arrow::after {
      border-color: #CC0000 #CC0000 transparent transparent;
      transform: rotate(45deg); } }
  @media screen and (max-width: 767px) {
    .nav_tgl .nav_mega_area dl dd a .arrow::after {
      border-color: #222 #222 transparent transparent;
      transform: rotate(45deg); } }

/*common*/
#main_contents {
  margin: 0;
  padding: 0; }

#Contents section {
  position: relative;
  width: 100%; }

#Contents section div,
#Contents section p,
#Contents section span,
#Contents section dl,
#Contents section dt,
#Contents section dd,
#Contents section ul,
#Contents section li,
#Contents section ol {
  position: relative; }

#Contents .slider,
#Contents .slider div {
  width: 100%;
  height: 100%; }

figure.cover img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center; }

/*ttl_set*/
hgroup.detail_h1_group {
  position: relative; }
  @media screen and (min-width: 768px) {
    hgroup.detail_h1_group {
      padding-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    hgroup.detail_h1_group {
      padding-bottom: 1rem; } }

hgroup.detail_h1_group h1 {
  position: relative;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding-top: 0 !important;
  background: rgba(0, 0, 0, 0);
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    hgroup.detail_h1_group h1 {
      line-height: 1.2em;
      font-size: 30px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    hgroup.detail_h1_group h1 {
      line-height: 1.25em;
      font-size: 2.4rem; } }

hgroup.detail_h1_group p {
  position: relative; }
  @media screen and (min-width: 768px) {
    hgroup.detail_h1_group p {
      padding-top: 2rem; } }
  @media screen and (max-width: 767px) {
    hgroup.detail_h1_group p {
      padding-top: 2rem; } }

hgroup.detail_h1_group span.tag {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400;
  border: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    hgroup.detail_h1_group span.tag {
      line-height: 1em;
      font-size: 10px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-bottom: 1rem;
      padding: 0.5rem; } }
  @media screen and (max-width: 767px) {
    hgroup.detail_h1_group span.tag {
      line-height: 1em;
      font-size: 1.2rem;
      margin-bottom: 1rem;
      padding: 0.5rem; } }

hgroup.detail_h1_group span.date {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #737373;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    hgroup.detail_h1_group span.date {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    hgroup.detail_h1_group span.date {
      line-height: 1em;
      font-size: 1.4rem;
      margin-bottom: 1rem; } }

hgroup.index_h1_group {
  position: relative; }
  @media screen and (min-width: 768px) {
    hgroup.index_h1_group {
      padding-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    hgroup.index_h1_group {
      padding-bottom: 1rem; } }

hgroup.index_h1_group h1 {
  position: relative;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding-top: 0 !important;
  background: rgba(0, 0, 0, 0);
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    hgroup.index_h1_group h1 {
      line-height: 1.167em;
      font-size: 60px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    hgroup.index_h1_group h1 {
      line-height: 1.175em;
      font-size: 4rem; } }

hgroup.index_h1_group .ttl {
  position: relative;
  display: inline-block;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    hgroup.index_h1_group .ttl {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 1rem;
      padding-left: 4.5rem; } }
  @media screen and (max-width: 767px) {
    hgroup.index_h1_group .ttl {
      line-height: 1em;
      font-size: 1.2rem;
      margin-top: 1rem;
      padding-left: 3.6rem; } }

hgroup.index_h1_group .ttl::after {
  content: '';
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  left: 0;
  background: #FA000F;
  height: 1px; }
  @media screen and (min-width: 768px) {
    hgroup.index_h1_group .ttl::after {
      width: 3.3rem;
      top: 0.7rem; } }
  @media screen and (max-width: 767px) {
    hgroup.index_h1_group .ttl::after {
      width: 2.4rem;
      top: 0.5rem; } }

hgroup.index_h1_group p.general_txt {
  position: relative; }
  @media screen and (min-width: 768px) {
    hgroup.index_h1_group p.general_txt {
      padding-top: 2rem; } }
  @media screen and (max-width: 767px) {
    hgroup.index_h1_group p.general_txt {
      padding-top: 2rem; } }

/*txt_set*/
#Contents .en_fonts {
  font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif; }

#Contents .general_txt {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents .general_txt {
      line-height: 1.875em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #Contents .general_txt {
      line-height: 1.625em;
      font-size: 1.6rem;
      text-align: justify; } }

@media screen and (min-width: 768px) {
  #Contents .table_set + .general_txt {
    margin-top: 2.8rem; } }
@media screen and (max-width: 767px) {
  #Contents .table_set + .general_txt {
    margin-top: 2.6rem; } }

#Contents .general_caption {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents .general_caption {
      line-height: 1.334em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-left: 1.2rem;
      text-indent: -1.2rem;
      margin-top: 1.5rem; } }
  @media screen and (max-width: 767px) {
    #Contents .general_caption {
      line-height: 1.364em;
      font-size: 1.1rem;
      text-align: justify;
      padding-left: 1.1rem;
      text-indent: -1.1rem;
      margin-top: 1.5rem; } }

#Contents h2 + .general_caption,
#Contents h3 + .general_caption,
#Contents h4 + .general_caption {
  margin-top: 0 !important; }

#Contents .general_bold {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    #Contents .general_bold {
      line-height: 1.75em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #Contents .general_bold {
      line-height: 1.5em;
      font-size: 1.6rem; } }

#Contents sup {
  position: relative;
  display: inline !important;
  font-size: 75% !important;
  transform: translateY(0rem);
  margin: 0 !important;
  padding: 0 !important; }

#Contents sub {
  position: relative;
  display: inline !important;
  font-size: 75% !important;
  transform: translateY(-0.2rem);
  margin: 0 !important;
  padding: 0 !important; }

@media screen and (min-width: 768px) {
  #Contents .general_txt + .general_bold {
    margin-top: 2.4rem; } }
@media screen and (max-width: 767px) {
  #Contents .general_txt + .general_bold {
    margin-top: 2.4rem; } }

#Contents .color_w {
  color: #fff !important; }

#Contents .general_txt a {
  color: #CC0000 !important;
  text-decoration: none; }

@media screen and (min-width: 768px) {
  #Contents .general_txt a:hover {
    text-decoration: underline !important; } }

.content_section section table td a,
.content_section section li a {
  color: #CC0000 !important;
  text-decoration: none !important; }

@media screen and (min-width: 768px) {
  .content_section section table td a:hover,
  .content_section section li a:hover {
    text-decoration: underline !important; } }

#Contents .align_c {
  text-align: center !important; }

#Contents .align_r {
  text-align: right !important; }

@media screen and (min-width: 768px) {
  #Contents .general_txt.indent {
    padding-left: 16px;
    text-indent: -16px; } }
@media screen and (max-width: 767px) {
  #Contents .general_txt.indent {
    padding-left: 1.6rem;
    text-indent: -1.6rem; } }

#Contents section ol {
  margin-left: 0 !important;
  padding-left: 0 !important; }

#Contents .mgn_t0 {
  margin-top: 0 !important; }

#Contents .list_circle {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #Contents .list_circle {
      margin-top: 2.8rem;
      gap: 0.6rem; } }
  @media screen and (max-width: 767px) {
    #Contents .list_circle {
      margin-top: 2.6rem;
      gap: 0.6rem; } }

#Contents .list_circle > li {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents .list_circle > li {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-left: 16px; } }
  @media screen and (max-width: 767px) {
    #Contents .list_circle > li {
      line-height: 1.5em;
      font-size: 1.6rem;
      text-align: justify;
      padding-left: 1.6rem; } }

@media screen and (min-width: 768px) {
  #Contents li .list_circle {
    margin-top: 16px;
    margin-bottom: 16px;
    gap: 0.6rem; } }
@media screen and (max-width: 767px) {
  #Contents li .list_circle {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    gap: 0.6rem; } }

#Contents li .list_circle > li {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents li .list_circle > li {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      text-indent: 0 !important; } }
  @media screen and (max-width: 767px) {
    #Contents li .list_circle > li {
      line-height: 1.5em;
      font-size: 1.6rem;
      text-align: justify;
      text-indent: 0 !important; } }

#Contents .list_circle > li::before {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  letter-spacing: 0.00em;
  background: #0C0C0C;
  border-radius: 50%;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents .list_circle > li::before {
      top: 10px;
      width: 6px;
      height: 6px;
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #Contents .list_circle > li::before {
      top: 0.9rem;
      width: 0.6rem;
      height: 0.6rem;
      line-height: 1.5em;
      font-size: 1.6rem; } }

#Contents .list_indent_type1,
#Contents .list_indent_type2 {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #Contents .list_indent_type1,
    #Contents .list_indent_type2 {
      margin-top: 2.8rem;
      gap: 0.6rem; } }
  @media screen and (max-width: 767px) {
    #Contents .list_indent_type1,
    #Contents .list_indent_type2 {
      margin-top: 2.6rem;
      gap: 0.6rem; } }

#Contents .list_indent_type1 > li span,
#Contents .list_indent_type2 > li span {
  position: relative; }
  @media screen and (min-width: 768px) {
    #Contents .list_indent_type1 > li span,
    #Contents .list_indent_type2 > li span {
      margin-right: 6px; } }
  @media screen and (max-width: 767px) {
    #Contents .list_indent_type1 > li span,
    #Contents .list_indent_type2 > li span {
      margin-right: 0.6rem; } }

#Contents .list_indent_type1 > li {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents .list_indent_type1 > li {
      line-height: 1.334em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-left: 24px;
      text-indent: -24px; } }
  @media screen and (max-width: 767px) {
    #Contents .list_indent_type1 > li {
      line-height: 1.364em;
      font-size: 1.1rem;
      text-align: justify;
      padding-left: 2.2rem;
      text-indent: -2.2rem; } }

#Contents .list_indent_type2 > li {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #Contents .list_indent_type2 > li {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-left: 20px;
      text-indent: -20px; } }
  @media screen and (max-width: 767px) {
    #Contents .list_indent_type2 > li {
      line-height: 1.5em;
      font-size: 1.6rem;
      text-align: justify;
      padding-left: 2rem;
      text-indent: -2rem; } }

#old_footer_sitemap {
  position: relative;
  width: 100%;
  background: #F4F4F4;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #old_footer_sitemap {
      display: none; } }

.FatMenuSet {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .FatMenuSet {
      width: 127.5rem !important; } }

/*下層*/
.content_section {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    .content_section {
      gap: 6rem; } }
  @media screen and (max-width: 767px) {
    .content_section {
      gap: 4rem; } }

.content_section section h2 {
  position: relative;
  width: 100%;
  background: #F4F4F4;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .content_section section h2 {
      line-height: 1.445em;
      font-size: 18px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 1rem 2rem;
      margin: 0 0 3rem; } }
  @media screen and (max-width: 767px) {
    .content_section section h2 {
      line-height: 1.445em;
      font-size: 1.8rem;
      padding: 1rem 2rem;
      margin: 0 0 2rem; } }

.content_section section h2 > a {
  transition: ease-in-out 0.4s all;
  color: #0C0C0C !important; }

.content_section section h2 > a:hover {
  color: #CC0000 !important;
  text-decoration: none !important; }

.content_section section h3 {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .content_section section h3 {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 2.4rem;
      margin-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    .content_section section h3 {
      line-height: 1.5em;
      font-size: 1.6rem;
      margin-top: 2.4rem;
      margin-bottom: 1rem; } }

.content_section section h4 {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .content_section section h4 {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 2.4rem;
      margin-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    .content_section section h4 {
      line-height: 1.5em;
      font-size: 1.6rem;
      margin-top: 2.4rem;
      margin-bottom: 1rem; } }

.content_section section h2 + h3,
.content_section section h3 + h4,
.content_section section .img_crm_set .box h3:nth-of-type(1),
.content_section section .img_crm_set .box h4:nth-of-type(1) {
  margin-top: 0 !important; }

.content_section section figure {
  position: relative;
  display: block;
  padding: 0; }
  @media screen and (min-width: 768px) {
    .content_section section figure {
      margin: 5rem 0 0; } }
  @media screen and (max-width: 767px) {
    .content_section section figure {
      margin: 3rem 0 0; } }

.content_section section figure + figure {
  position: relative;
  display: block;
  padding: 0; }
  @media screen and (min-width: 768px) {
    .content_section section figure + figure {
      margin: 2rem 0 0; } }
  @media screen and (max-width: 767px) {
    .content_section section figure + figure {
      margin: 1rem 0 0; } }

.content_section section .table_set {
  position: relative;
  overflow: hidden;
  padding: 0;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .content_section section .table_set {
      margin: 2.6rem 0 0; } }
  @media screen and (max-width: 767px) {
    .content_section section .table_set {
      margin: 2.8rem 0 0; } }

.content_section section .mgt0 {
  margin: 0 !important; }

@media screen and (min-width: 768px) {
  .content_section section .mgt_add {
    margin-top: 30px !important; } }
@media screen and (max-width: 767px) {
  .content_section section .mgt_add {
    margin-top: 2.6rem !important; } }

.content_section section .table_set table {
  width: 100%; }

.content_section section h2 + .table_set,
.content_section section h3 + .table_set {
  margin-top: 0 !important; }

.content_section section .table_set table,
.content_section section .table_set th,
.content_section section .table_set td {
  border-color: #D9D9D9 !important;
  margin: 0 !important; }

.content_section section .table_set th {
  background: #F4F4F4 !important; }

.content_section section .table_set th,
.content_section section .table_set td {
  position: relative;
  vertical-align: top;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    .content_section section .table_set th,
    .content_section section .table_set td {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 1rem 2rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .table_set th,
    .content_section section .table_set td {
      line-height: 1.625em;
      font-size: 1.6rem;
      padding: 1rem 2rem;
      text-align: left; } }

.content_section section .table_set th.valign_mdl,
.content_section section .table_set td.valign_mdl {
  vertical-align: middle !important; }

.content_section section .table_set th.valign_btm,
.content_section section .table_set td.valign_btm {
  vertical-align: bottom !important; }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 table,
  .content_section section .table_set.sp_layout_type1 th,
  .content_section section .table_set.sp_layout_type1 td,
  .content_section section .table_set.sp_layout_type1 tr,
  .content_section section .table_set.sp_layout_type1 tbody {
    display: block !important;
    width: 100%; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 tr.sp_flex {
    display: flex !important; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 tr.sp_flex.warp {
    flex-wrap: wrap; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 td.sp_half {
    width: 50% !important; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 td.sp_half:nth-of-type(1) {
    border-right: none  !important; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 td.sp_third {
    width: 33.33% !important; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 td.sp_third:nth-of-type(1),
  .content_section section .table_set.sp_layout_type1 td.sp_third:nth-of-type(2) {
    border-right: none !important; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 th,
  .content_section section .table_set.sp_layout_type1 td {
    border-top: none  !important; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type1 table {
    border-top: 1px #D9D9D9 solid !important; } }

@media screen and (min-width: 768px) {
  .content_section section .table_set.pc_th_narrow th {
    width: 30rem; } }

@media screen and (min-width: 768px) {
  .content_section section .table_set.pc_th_wide th {
    width: 62.5rem; } }

@media screen and (max-width: 767px) {
  .content_section section .table_set.sp_layout_type2 th {
    width: 12rem; } }

.content_section section .img_crm_set {
  position: relative;
  padding: 0;
  display: flex; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set {
      justify-content: space-between;
      align-items: flex-start;
      margin: 2.6rem 0 0; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set {
      flex-direction: column;
      margin: 2.8rem 0 0;
      gap: 2rem; } }

.content_section section .img_crm_set figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set figure {
      width: 22.5rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set figure {
      width: 100%; } }

.content_section section .img_crm_set .box {
  position: relative; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set .box {
      width: 70.5rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set .box {
      width: 100%; } }

.content_section section .img_crm_set_type2,
.content_section section .img_crm_set_type3 {
  position: relative;
  padding: 0;
  display: flex; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set_type2,
    .content_section section .img_crm_set_type3 {
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin: 2.6rem 0 0;
      gap: 3rem 0; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set_type2,
    .content_section section .img_crm_set_type3 {
      flex-direction: column;
      margin: 2.8rem 0 0;
      gap: 2rem; } }

.content_section section .img_crm_set_type2 .box {
  position: relative; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set_type2 .box {
      width: 46rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set_type2 .box {
      width: 100%; } }

.content_section section .img_crm_set_type2 figure {
  position: relative;
  padding: 0 !important;
  margin: 0 auto !important; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set_type2 figure {
      width: 46rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set_type2 figure {
      width: 100%; } }

.content_section section .img_crm_set_type3 .box {
  position: relative; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set_type3 .box {
      width: 29rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set_type3 .box {
      width: 100%; } }

.content_section section .img_crm_set_type3 figure {
  position: relative;
  padding: 0 !important;
  margin: 0 auto !important; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set_type3 figure {
      width: 29rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set_type3 figure {
      width: 100%; } }

@media screen and (min-width: 768px) {
  .figure_height figure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; } }

@media screen and (min-width: 768px) {
  .figure_height figure img {
    margin: auto auto !important; } }

.content_section section .img_crm_set_type2 .box div,
.content_section section .img_crm_set_type3 .box div {
  position: relative; }
  @media screen and (min-width: 768px) {
    .content_section section .img_crm_set_type2 .box div,
    .content_section section .img_crm_set_type3 .box div {
      width: 100%;
      text-align: center;
      margin-top: 2rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .img_crm_set_type2 .box div,
    .content_section section .img_crm_set_type3 .box div {
      width: 100%;
      text-align: justify;
      margin-top: 2rem; } }

.content_section section .img_crm_set_type2 .box div p.general_caption,
.content_section section .img_crm_set_type3 .box div p.general_caption {
  padding-left: 0 !important;
  text-indent: 0 !important;
  margin-top: 0 !important; }

.content_section section .btn_set {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    .content_section section .btn_set {
      flex-wrap: wrap;
      margin-top: 3rem;
      gap: 2rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .btn_set {
      flex-direction: column;
      margin-top: 3rem;
      gap: 2rem; } }

.content_section section .btn_set .btn_general {
  position: relative; }
  @media screen and (min-width: 768px) {
    .content_section section .btn_set .btn_general {
      /*width: divceil(315, 10, rem);
      height: divceil(50, 10, rem);*/
      min-width: 315px;
      height: 50px;
      margin: 0; } }
  @media screen and (max-width: 767px) {
    .content_section section .btn_set .btn_general {
      width: 32rem;
      height: 5rem;
      margin: 0 auto; } }

@media screen and (min-width: 768px) {
  .content_section section .btn_set .btn_general p {
    padding: 0 40px; } }
@media screen and (max-width: 767px) {
  .content_section section .btn_set .btn_general p {
    padding: 0 3rem;
    line-height: 1.286em;
    font-size: 1.4rem;
    text-align: center; } }

.content_section section .link_set {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    .content_section section .link_set {
      margin-top: 3rem;
      gap: 0.5rem; } }
  @media screen and (max-width: 767px) {
    .content_section section .link_set {
      margin-top: 3rem;
      gap: 0.5rem; } }

.content_section section .link_set a {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  text-decoration: none;
  align-self: flex-start;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    .content_section section .link_set a {
      line-height: 1.875em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .content_section section .link_set a {
      line-height: 1.625em;
      font-size: 1.6rem; } }

@media screen and (min-width: 768px) {
  .content_section section .link_set a:hover {
    text-decoration: underline !important; } }

.content_section section .link_set a[target="_blank"]::after {
  content: '';
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_window_link.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .content_section section .link_set a[target="_blank"]::after {
      width: 14px;
      height: 14px;
      margin-left: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .content_section section .link_set a[target="_blank"]::after {
      width: 1.6rem;
      height: 1.6rem;
      margin-left: 0.4rem;
      transform: translateY(0.2rem); } }

.content_section section .link_set a.icon_pdf::after {
  content: '';
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_pdf_link.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .content_section section .link_set a.icon_pdf::after {
      width: 18px;
      height: 18px;
      margin-left: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .content_section section .link_set a.icon_pdf::after {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 0.4rem;
      transform: translateY(0.2rem); } }

.content_section section .general_txt a.icon_pdf {
  position: relative;
  display: inline; }

.content_section section .general_txt a.icon_pdf::after {
  content: '';
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_pdf_link.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .content_section section .general_txt a.icon_pdf::after {
      width: 18px;
      height: 18px;
      margin-left: 4px;
      margin-right: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .content_section section .general_txt a.icon_pdf::after {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 0.4rem;
      margin-right: 0.4rem;
      transform: translateY(0.2rem); } }

.content_section section a.icon_mail {
  position: relative;
  display: inline-block; }

.content_section section a.icon_mail::after {
  content: '';
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_mail_link.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .content_section section a.icon_mail::after {
      width: 18px;
      height: 18px;
      margin-left: 4px;
      margin-right: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .content_section section a.icon_mail::after {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 0.4rem;
      margin-right: 0.4rem;
      transform: translateY(0.2rem); } }

/*btn*/
.btn_general {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #CC0000;
  padding: 0 !important;
  transition: ease-out 0.6s all;
  border: #CC0000 1px solid; }

.btn_general p {
  position: relative;
  letter-spacing: 0.00em;
  color: #fff;
  transition: ease-out 0.6s all;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    .btn_general p {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .btn_general p {
      line-height: 1em;
      font-size: 1.4rem; } }

@media screen and (min-width: 768px) {
  .btn_general:hover {
    background: #fff; } }

@media screen and (min-width: 768px) {
  .btn_general:hover p {
    color: #CC0000; } }

.btn_general .arrow {
  position: absolute !important;
  transition: ease-out 0.6s all;
  top: 50%; }
  @media screen and (min-width: 768px) {
    .btn_general .arrow {
      margin-top: -6px;
      right: 20px;
      width: 12px;
      height: 12px; } }
  @media screen and (max-width: 767px) {
    .btn_general .arrow {
      margin-top: -0.6rem;
      right: 2rem;
      width: 1.2rem;
      height: 1.2rem; } }

.btn_general .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

@media screen and (min-width: 768px) {
  .btn_general:hover .arrow::after {
    border-color: #CC0000 #CC0000 transparent transparent; } }

.btn_k {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  padding: 0 !important;
  transition: ease-out 0.6s all;
  border: #222 1px solid; }
  @media screen and (min-width: 768px) {
    .btn_k {
      width: 315px;
      height: 50px;
      margin: 0 auto; } }
  @media screen and (max-width: 767px) {
    .btn_k {
      width: 32rem;
      height: 5rem;
      margin: 0 auto; } }

button.btn_k,
button.btn_general {
  cursor: pointer; }

.btn_k p {
  position: relative;
  letter-spacing: 0.00em;
  color: #fff;
  transition: ease-out 0.6s all;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    .btn_k p {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .btn_k p {
      line-height: 1em;
      font-size: 1.4rem; } }

@media screen and (min-width: 768px) {
  .btn_k:hover {
    background: #fff; } }

@media screen and (min-width: 768px) {
  .btn_k:hover p {
    color: #0C0C0C; } }

.btn_k .arrow {
  position: absolute !important;
  transition: ease-out 0.6s all;
  top: 50%; }
  @media screen and (min-width: 768px) {
    .btn_k .arrow {
      margin-top: -6px;
      left: 20px;
      width: 12px;
      height: 12px; } }
  @media screen and (max-width: 767px) {
    .btn_k .arrow {
      margin-top: -0.6rem;
      left: 2rem;
      width: 1.2rem;
      height: 1.2rem; } }

.btn_k .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-135deg);
  width: 100%;
  height: 100%; }

@media screen and (min-width: 768px) {
  .btn_k:hover .arrow::after {
    border-color: #222 #222 transparent transparent; } }

/*contact*/
#contact_area {
  position: relative;
  background: #F4F4F4;
  overflow: hidden;
  z-index: 30;
  border-bottom: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    #contact_area {
      padding: 8rem 0 8rem; } }
  @media screen and (max-width: 767px) {
    #contact_area {
      padding: 6rem 0 6rem; } }

#contact_area .inner {
  position: relative;
  margin: 0 auto;
  padding-left: 0 !important;
  padding-right: 0 !important; }
  @media screen and (min-width: 768px) {
    #contact_area .inner {
      width: 127.5rem !important; } }
  @media screen and (max-width: 767px) {
    #contact_area .inner {
      width: 36rem; } }

#contact_area .ttl {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  text-align: center;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    #contact_area .ttl {
      line-height: 1em;
      font-size: 20px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #contact_area .ttl {
      line-height: 1em;
      font-size: 2rem; } }

#contact_area .contact_btn {
  position: relative;
  border-top: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    #contact_area .contact_btn {
      margin: 3rem auto 0;
      padding: 6rem 0 0; } }
  @media screen and (max-width: 767px) {
    #contact_area .contact_btn {
      width: 33.5rem;
      margin: 3rem auto 0;
      padding: 4rem 0 0; } }

#contact_area .contact_btn .btn_general {
  position: relative; }
  @media screen and (min-width: 768px) {
    #contact_area .contact_btn .btn_general {
      width: 400px;
      height: 70px;
      margin: 0 auto; } }
  @media screen and (max-width: 767px) {
    #contact_area .contact_btn .btn_general {
      width: 32rem;
      height: 5rem;
      margin: 0 auto; } }

@media screen and (min-width: 768px) {
  #contact_area .contact_btn .btn_general p {
    font-weight: 700;
    line-height: 1em;
    font-size: 20px;
    /*font-size: divceil($fs, 10, rem);*/ } }

/*footer_sitemap*/
#footer_sitemap {
  position: relative;
  background: #F4F4F4;
  overflow: hidden;
  z-index: 30;
  border-bottom: #D9D9D9 1px solid;
  padding: 0rem 0 2rem; }
  @media screen and (max-width: 767px) {
    #footer_sitemap {
      display: none !important; } }

#footer_sitemap ul {
  position: relative;
  width: 127.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem; }

#footer_sitemap ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem; }

@media screen and (max-width: 1039px) {
  #footer_sitemap ul {
    flex-wrap: wrap;
    justify-content: flex-start; }

  #footer_sitemap ul li {
    width: 41rem; } }
#footer_sitemap ul li .index_link {
  position: relative;
  display: inline-block;
  border-left: #CC0000 0.4rem solid;
  transition: ease-in-out 0.4s all;
  text-decoration: none;
  padding: 1rem 0 1rem 1.4rem;
  display: flex;
  align-items: center; }

#footer_sitemap ul li .index_link p {
  position: relative;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700;
  line-height: 1.375em;
  font-size: 16px;
  /*font-size: divceil($fs, 10, rem);*/ }

@media screen and (min-width: 768px) {
  #footer_sitemap ul li .index_link:hover p {
    color: #CC0000; } }

#footer_sitemap ul li .index_link .arrow {
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.6rem;
  transform: translateY(-0.2rem); }

#footer_sitemap ul li .index_link .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 2px solid;
  border-color: #CC0000 #CC0000 transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

#footer_sitemap ul li .detail_link {
  position: relative;
  display: inline-block;
  transition: ease-in-out 0.4s all;
  text-decoration: none;
  padding: 0.2rem 0 0.2rem 1.8rem;
  display: flex;
  align-items: center; }

#footer_sitemap ul li .detail_link p {
  position: relative;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400;
  line-height: 1em;
  font-size: 12px;
  /*font-size: divceil($fs, 10, rem);*/ }

@media screen and (min-width: 768px) {
  #footer_sitemap ul li .detail_link p:hover {
    color: #CC0000;
    text-decoration: none; } }

#footer_sitemap ul li .detail_link .arrow {
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.6rem;
  transform: translateY(-0.2rem); }

#footer_sitemap ul li .detail_link .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #CC0000 #CC0000 transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

/*common_parts*/
.project_list_box {
  position: relative;
  width: 100%;
  display: flex;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    .project_list_box {
      flex-wrap: wrap;
      align-items: stretch;
      gap: 4rem 2.5rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box {
      flex-direction: column;
      gap: 3rem 0; } }

.project_list_box a {
  position: relative;
  display: inline-block; }
  @media screen and (min-width: 768px) {
    .project_list_box a {
      width: 30rem;
      padding-bottom: 4rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box a {
      width: 100%; } }

.project_list_box a.new_project::after {
  content: 'NEW';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  background: #FA000F;
  letter-spacing: 0.00em;
  color: #fff;
  font-weight: 400;
  font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif; }
  @media screen and (min-width: 768px) {
    .project_list_box a.new_project::after {
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 0.7rem 1rem 0.5rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box a.new_project::after {
      line-height: 1em;
      font-size: 1.3rem;
      padding: 0.7rem 1rem 0.5rem; } }

.project_list_box a figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block; }
  @media screen and (min-width: 768px) {
    .project_list_box a figure {
      width: 30rem;
      height: 20rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box a figure {
      width: 36rem;
      height: 24rem; } }

@media screen and (min-width: 768px) {
  .project_list_box a figure::after {
    content: "";
    position: absolute !important;
    width: 100%;
    height: 100%;
    border: #CC0000 0rem solid;
    top: 0;
    left: 0;
    transition: ease-out 0.4s all;
    opacity: 0; } }

@media screen and (min-width: 768px) {
  .project_list_box a:hover figure::after {
    border: #CC0000 0.6rem solid;
    opacity: 1; } }

.project_list_box a .tag {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  border: #D9D9D9 1px solid;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    .project_list_box a .tag {
      line-height: 1em;
      font-size: 10px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 1.5rem;
      padding: 0.5rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box a .tag {
      line-height: 1em;
      font-size: 1.2rem;
      margin-top: 2rem;
      padding: 0.5rem; } }

.project_list_box a .project_ttl {
  position: relative;
  font-weight: 700;
  color: #0C0C0C;
  padding: 0;
  transition: ease-out 0.4s all; }
  @media screen and (min-width: 768px) {
    .project_list_box a .project_ttl {
      line-height: 1.375em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 1rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box a .project_ttl {
      line-height: 1.5em;
      font-size: 1.6rem;
      margin-top: 1.5rem; } }

@media screen and (min-width: 768px) {
  .project_list_box a:hover .project_ttl {
    color: #CC0000; } }

.project_list_box a .project_info {
  display: inline-block;
  letter-spacing: 0.00em;
  color: #0C0C0C; }
  @media screen and (min-width: 768px) {
    .project_list_box a .project_info {
      position: absolute !important;
      bottom: 0;
      left: 0;
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .project_list_box a .project_info {
      position: relative;
      line-height: 1em;
      font-size: 1.2rem;
      margin-top: 2rem; } }

.project_list_box a .project_info span.date {
  position: relative;
  display: inline-block;
  font-weight: 700; }

.project_list_box a .project_info span.region {
  position: relative;
  display: inline-block;
  border-left: #D9D9D9 1px solid;
  font-weight: 500; }
  @media screen and (min-width: 768px) {
    .project_list_box a .project_info span.region {
      margin-left: 1.5rem;
      padding-left: 1.5rem; } }
  @media screen and (max-width: 767px) {
    .project_list_box a .project_info span.region {
      margin-left: 1.5rem;
      padding-left: 1.5rem; } }

.catalog_list_box {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap; }
  @media screen and (min-width: 768px) {
    .catalog_list_box {
      gap: 4rem 2.5rem;
      margin-top: 3rem; } }
  @media screen and (max-width: 767px) {
    .catalog_list_box {
      gap: 3rem 2rem;
      margin-top: 2rem; } }

.catalog_list_box a {
  position: relative;
  display: inline-block; }
  @media screen and (min-width: 768px) {
    .catalog_list_box a {
      width: 30rem; } }
  @media screen and (max-width: 767px) {
    .catalog_list_box a {
      width: 17rem; } }

.catalog_list_box a figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  border: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    .catalog_list_box a figure {
      width: 30rem;
      height: 42.4rem; } }
  @media screen and (max-width: 767px) {
    .catalog_list_box a figure {
      width: 17rem;
      height: 24.2rem; } }

@media screen and (min-width: 768px) {
  .catalog_list_box a figure::after {
    content: "";
    position: absolute !important;
    width: 100%;
    height: 100%;
    border: #CC0000 0rem solid;
    top: 0;
    left: 0;
    transition: ease-out 0.4s all;
    opacity: 0; } }

@media screen and (min-width: 768px) {
  .catalog_list_box a:hover figure::after {
    border: #CC0000 0.6rem solid;
    opacity: 1; } }

.catalog_list_box a .vol {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .catalog_list_box a .vol {
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 2rem; } }
  @media screen and (max-width: 767px) {
    .catalog_list_box a .vol {
      line-height: 1em;
      font-size: 1.2rem;
      margin-top: 2rem; } }

.catalog_list_box a .catalog_ttl {
  position: relative;
  font-weight: 400;
  color: #0C0C0C;
  padding: 0;
  transition: ease-out 0.4s all; }
  @media screen and (min-width: 768px) {
    .catalog_list_box a .catalog_ttl {
      line-height: 1.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 0.5rem;
      padding-right: 2rem; } }
  @media screen and (max-width: 767px) {
    .catalog_list_box a .catalog_ttl {
      line-height: 1.572em;
      font-size: 1.4rem;
      margin-top: 0.5rem;
      padding-right: 2rem; } }

@media screen and (min-width: 768px) {
  .catalog_list_box a:hover .vol,
  .catalog_list_box a:hover .catalog_ttl {
    color: #CC0000; } }

.catalog_list_box a .catalog_ttl .icon_pdf {
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_pdf_k.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .catalog_list_box a .catalog_ttl .icon_pdf {
      width: 16px;
      height: 16px;
      margin-left: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .catalog_list_box a .catalog_ttl .icon_pdf {
      width: 1.4rem;
      height: 1.4rem;
      margin-left: 0.4rem;
      transform: translateY(0.2rem); } }

@media screen and (min-width: 768px) {
  .catalog_list_box a:hover .catalog_ttl .icon_pdf {
    background: url("../img/icon_pdf_link.svg") center center no-repeat;
    background-size: contain; } }

.catalog_list_box a .catalog_ttl .arrow {
  position: absolute !important;
  display: inline-block;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    .catalog_list_box a .catalog_ttl .arrow {
      top: 50%;
      margin-top: -5px;
      right: 5px;
      width: 10px;
      height: 10px; } }
  @media screen and (max-width: 767px) {
    .catalog_list_box a .catalog_ttl .arrow {
      bottom: 0.5rem;
      right: 0.5rem;
      width: 1rem;
      height: 1rem; } }

.catalog_list_box a .catalog_ttl .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 2px solid;
  border-color: #CC0000 #CC0000 transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

/*others_section*/
.content_section section.others_section h2 {
  position: relative;
  width: 100%;
  background: #222;
  letter-spacing: 0.00em;
  color: #fff;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .content_section section.others_section h2 {
      line-height: 1.445em;
      font-size: 18px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 1rem 2rem;
      margin: 0 0 3rem; } }
  @media screen and (max-width: 767px) {
    .content_section section.others_section h2 {
      line-height: 1.445em;
      font-size: 1.8rem;
      padding: 1rem 2rem;
      margin: 0 0 2rem; } }

#related_solutions h2 {
  margin-bottom: 0 !important; }

#related_solutions .solutions_list_box {
  position: relative;
  width: 100%;
  background: #F4F4F4;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #related_solutions .solutions_list_box {
      padding: 2rem 2rem;
      gap: 0.5rem; } }
  @media screen and (max-width: 767px) {
    #related_solutions .solutions_list_box {
      padding: 2rem 2rem;
      gap: 1rem; } }

#related_solutions .solutions_list_box a {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #related_solutions .solutions_list_box a {
      line-height: 1.75em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      text-decoration: none; } }
  @media screen and (max-width: 767px) {
    #related_solutions .solutions_list_box a {
      line-height: 1.625em;
      font-size: 1.6rem;
      text-align: justify; } }

@media screen and (min-width: 768px) {
  #related_solutions .solutions_list_box a:hover {
    color: #CC0000;
    text-decoration: none; } }

#related_solutions .solutions_list_box a .arrow {
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    #related_solutions .solutions_list_box a .arrow {
      width: 8px;
      height: 8px;
      margin-left: 8px;
      transform: translateY(-1px); } }
  @media screen and (max-width: 767px) {
    #related_solutions .solutions_list_box a .arrow {
      width: 0.8rem;
      height: 0.8rem;
      margin-left: 0.8rem;
      transform: translateY(-0.2rem); } }

#related_solutions .solutions_list_box a .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #222 #222 transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

@media screen and (min-width: 768px) {
  #related_project .project_list_box a {
    padding-bottom: 0 !important; } }

.topics_list {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    .topics_list {
      margin-top: 2rem; } }
  @media screen and (max-width: 767px) {
    .topics_list {
      margin-top: 2rem; } }

.topics_list a {
  position: relative;
  display: flex;
  border-bottom: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    .topics_list a {
      padding: 2rem 1rem; } }
  @media screen and (max-width: 767px) {
    .topics_list a {
      flex-direction: column;
      gap: 0.5rem;
      padding: 2rem 1rem; } }

.topics_list p.date {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #737373;
  text-decoration: none !important;
  align-self: flex-start;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .topics_list p.date {
      width: 125px;
      line-height: 1.875em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .topics_list p.date {
      line-height: 1em;
      font-size: 1.4rem; } }

.topics_list a p.general_txt {
  text-decoration: none;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    .topics_list a p.general_txt {
      width: calc(100% - 125px);
      padding-right: 2rem; } }
  @media screen and (max-width: 767px) {
    .topics_list a p.general_txt {
      padding-right: 2rem; } }

.topics_list a.link_none p.general_txt {
  text-decoration: none; }

@media screen and (min-width: 768px) {
  .topics_list a:hover p.general_txt {
    color: #CC0000 !important;
    text-decoration: none; } }

.topics_list a[target="_blank"] p.general_txt::after {
  content: '';
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_window_k.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .topics_list a[target="_blank"] p.general_txt::after {
      width: 14px;
      height: 14px;
      margin-left: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .topics_list a[target="_blank"] p.general_txt::after {
      width: 1.6rem;
      height: 1.6rem;
      margin-left: 0.4rem;
      transform: translateY(0.2rem); } }

.topics_list a.icon_pdf p.general_txt::after {
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: url("../img/icon_pdf_k.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .topics_list a.icon_pdf p.general_txt::after {
      width: 18px;
      height: 18px;
      margin-left: 4px;
      transform: translateY(2px); } }
  @media screen and (max-width: 767px) {
    .topics_list a.icon_pdf p.general_txt::after {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 0.4rem;
      transform: translateY(0.2rem); } }

@media screen and (min-width: 768px) {
  .topics_list a:hover.icon_pdf p.general_txt::after {
    background: url("../img/icon_pdf_link.svg") center center no-repeat;
    background-size: contain; } }

.topics_list a .arrow {
  position: absolute !important;
  transition: ease-out 0.6s all;
  top: 50%; }
  @media screen and (min-width: 768px) {
    .topics_list a .arrow {
      margin-top: -5px;
      right: 10px;
      width: 10px;
      height: 10px; } }
  @media screen and (max-width: 767px) {
    .topics_list a .arrow {
      margin-top: -0.5rem;
      right: 1rem;
      width: 1rem;
      height: 1rem; } }

.topics_list a .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 2px solid;
  border-color: #CC0000 #CC0000 transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

.topics_list a.link_none .arrow::after {
  border-color: #B3B3B3 #B3B3B3 transparent transparent; }

.flow_set {
  position: relative;
  width: 100%;
  background: #F4F4F4;
  display: flex; }
  @media screen and (min-width: 768px) {
    .flow_set {
      justify-content: center;
      align-items: center;
      gap: 6rem; } }
  @media screen and (max-width: 767px) {
    .flow_set {
      flex-direction: column;
      gap: 4rem; } }

.flow_set li {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    .flow_set li {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      width: 16rem; } }
  @media screen and (max-width: 767px) {
    .flow_set li {
      width: 100%;
      align-items: center;
      padding-left: 2rem; } }

@media screen and (max-width: 767px) {
  .flow_set li.flow_04 {
    margin-top: -1.5rem; } }

.flow_set li figure {
  position: relative;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block; }
  @media screen and (min-width: 768px) {
    .flow_set li figure {
      height: 12rem; } }
  @media screen and (max-width: 767px) {
    .flow_set li figure {
      width: 8.5rem;
      order: 3; } }

.flow_set li figure img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center; }

@media screen and (min-width: 768px) {
  .flow_01 figure {
    width: 9.3rem; } }
@media screen and (max-width: 767px) {
  .flow_01 figure {
    height: 4.5rem; } }

@media screen and (min-width: 768px) {
  .flow_02 figure {
    width: 9.3rem; } }
@media screen and (max-width: 767px) {
  .flow_02 figure {
    height: 5.5rem; } }

@media screen and (min-width: 768px) {
  .flow_03 figure {
    width: 5.6rem; } }
@media screen and (max-width: 767px) {
  .flow_03 figure {
    height: 5.5rem; } }

@media screen and (min-width: 768px) {
  .flow_04 figure {
    width: 11rem; } }
@media screen and (max-width: 767px) {
  .flow_04 figure {
    height: 8.4rem; } }

.flow_set .ttl {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  color: #FA000F;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .flow_set .ttl {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .flow_set .ttl {
      line-height: 1em;
      font-size: 1.4rem;
      order: 1; } }

@media screen and (min-width: 768px) {
  .flow_set .ttl span {
    line-height: 1.231em;
    font-size: 13px;
    /*font-size: divceil($fs, 10, rem);*/ } }
@media screen and (max-width: 767px) {
  .flow_set .ttl span {
    line-height: 1em;
    font-size: 1.4rem; } }

@media screen and (max-width: 767px) {
  .flow_set .general_txt {
    order: 2;
    margin-left: 3rem;
    width: 13rem; } }

.flow_set li .arrow {
  position: absolute !important;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    .flow_set li .arrow {
      top: 50%;
      margin-top: -7px;
      right: -3rem;
      width: 14px;
      height: 14px; } }
  @media screen and (max-width: 767px) {
    .flow_set li .arrow {
      bottom: -2rem;
      left: 4rem;
      width: 1rem;
      height: 1rem; } }

.flow_set li .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 2px solid;
  border-color: #FA000F #FA000F transparent transparent;
  width: 100%;
  height: 100%; }
  @media screen and (min-width: 768px) {
    .flow_set li .arrow::after {
      transform: rotate(45deg); } }
  @media screen and (max-width: 767px) {
    .flow_set li .arrow::after {
      transform: rotate(135deg); } }

/*transition*/
.slide_in {
  transition: all 900ms cubic-bezier(0.345, 0.61, 0.005, 1);
  transition-timing-function: cubic-bezier(0.345, 0.61, 0.005, 1);
  transform: translateY(3rem);
  opacity: 0; }

.slide_in.active {
  transform: translateY(0);
  opacity: 1; }

.fade_in {
  transition: all 1500ms cubic-bezier(0.345, 0.61, 0.005, 1);
  transition-timing-function: cubic-bezier(0.345, 0.61, 0.005, 1);
  opacity: 0; }

.fade_in.active {
  opacity: 1; }