@charset "utf-8";
/*--タイトル--*/
#service_page h2 {
  margin-bottom: 0;
}
.anchor {
  margin-bottom: 160px;
}
.anchor li {
  text-align: center;
  margin: 0 16px 8px 16px;
  min-width: 240px;
}
.anchor li a {
  display: block;
  text-decoration: none;
  position: relative;
}
.anchor li a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(135deg);
  box-sizing: border-box;
}
@media screen and (min-width: 961px) {
  .anchor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .anchor li {
    width: 46%;
  }
}
@media screen and (min-width: 1025px) {
  .anchor li {
    width: 20%;
  }
}
#service_message {
  width: 78%;
  max-width: 800px;
  margin: 0 auto 64px auto;
}
#medical-profession,
#establishment,
#change {
  margin-bottom: 240px !important;
  max-width: 1280px;
  padding-bottom: 0 !important;
}
#medical-profession .sec_ti,
#establishment .sec_ti,
#change .sec_ti {
  font-size: clamp(1.563rem, 1.45rem + 0.56vw, 2.125rem) /*25-34|320-1920*/;
  font-weight: 500;
  padding: 32px 0 !important;
}
#medical-profession .inner,
#establishment .inner,
#change .inner {
  padding: 24px;
  border: 1px solid rgba(101, 173, 201, 0.5);
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
#medical-profession .sec_ti,
#establishment .sec_ti,
#change .sec_ti {
  background: linear-gradient(90deg, rgba(101, 173, 201, 0.5), rgba(101, 173, 201, 0.2), rgba(101, 173, 201, 0.5));
  padding: 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 0;
  position: relative;
}
#medical-profession .sec_ti::before,
#establishment .sec_ti::before,
#change .sec_ti::before {
  position: absolute;
  background: #65adc9;
  color: #fff;
  right: 8px;
  bottom: 100%;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: normal;
  font-family: "Montserrat", sans-serif;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
#medical-profession .sec_ti::before {
  content: "For medical professionals";
}
#establishment .sec_ti::before {
  content: "Support for your first step";
}
#change .sec_ti::before {
  content: "Find the Right Tax Partner";
}
.first_message {
  margin-bottom: 24px;
}
.first_message .large {
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem) /*20-24|320-1920*/;
  font-weight: bold;
}
.first_message p {
  font-size: 100%;
}
.first_message_img img {
  border-radius: 8px;
}
.num01_ti {
  position: relative;
}
.num01_ti::before,
.num02_ti::before,
.num03_ti::before {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.num01_ti:before {
  content: url("../img/num01.webp");
}
.num02_ti:before {
  content: url("../img/num02.webp");
}
.num03_ti:before {
  content: url("../img/num03.webp");
}
.service_box {
  margin-bottom: 40px;
  padding: 0;
}
.service_box dt span {
  font-size: 125%;
  background: rgba(101, 173, 201, 0.2);
  width: 100%;
  display: block;
  padding: 48px 8px 12px 8px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center;
  font-weight: 600;
}
.service_box_first {
  font-size: clamp(1.125rem, 1.1rem + 0.13vw, 1.25rem) /*18-20|320-1920*/;
  color: #5391a9;
  margin-bottom: 32px;
  font-weight: 600;
}
.service_frame {
  margin-bottom: 60px;
}
.service_frame dt {
  margin-bottom: 16px;
}
.service_detail {
  margin-bottom: 64px;
}
.support_box {
  border: 2px solid rgba(201, 180, 101, 0.6);
  padding: 48px 16px 16px;
  border-radius: 8px;
  position: relative;
}
.support_box_ti {
  color: #1e477a;
  font-weight: 600;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto 32px auto;
  position: absolute;
  background-color: #fff;
  padding: 8px 40px;
  width: 82%;
  text-align: center;
}
.support_box_ti::before,
.support_box_ti::after {
  position: absolute;
  color: #c9b465;
  font-size: 300%;
}
.support_box_ti::before {
  content: "“";
  top: -60%;
  left: 4px;
}
.support_box_ti::after {
  content: "”";
  bottom: -90%;
  right: 4px;
}
.fukidashi {
  font-size: 125%;
  position: relative;
  padding: 8px 0;
  border-bottom: 2px solid;
  margin: 0 auto 24px auto;
}
.fukidashi::before,
.fukidashi::after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
}
.fukidashi::before {
  border: 13px solid;
  border-color: transparent;
  border-top-color: black;
  margin-left: -13px;
}
.fukidashi::after {
  border: 10px solid;
  border-color: transparent;
  border-top-color: white;
  margin-left: -10px;
}
.recommendation {
  width: auto;
  margin: 24px auto 48px auto;
  max-width: 840px;
  border: 3px solid rgba(30, 71, 122, 1);
  padding: 32px 16px 16px;
  border-radius: 8px;
  position: relative;
}
.recommendation_ti {
  font-size: 100%;
  color: rgba(30, 71, 122, 1);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px;
  background: #fff;
  width: 90%;
}
@media screen and (min-width: 768px) {
  #medical-profession .flex_sb,
  #establishment .flex_sb,
  #change .flex_sb {
    display: flex;
    justify-content: space-between;
  }
  .recommendation_ti {
    width: 48%;
  }
  .fukidashi {
    text-align: center;
    width: 72%;
  }
}
.recommendation_ti::before,
.recommendation_ti::after {
  font-size: 125%;
}
.recommendation_ti::before {
  content: "＼";
  margin-right: 16px;
}
.recommendation_ti::after {
  content: "／";
  margin-left: 16px;
}
.recommendation div img {
  position: relative;
  vertical-align: bottom;
}
.recommendation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recommendation ul li {
  margin-bottom: 16px;
  width: 48%;
  background: rgba(30, 71, 122, 1);
  border-radius: 8px;
}
.recommendation ul li div {
  background-color: #fff;
}
.recommendation ul li p {
  position: relative;
  font-size: 100%;
  padding: 12px;
  color: #fff;
  margin-top: -16px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .recommendation ul li p {
    font-size: 87.5%;
  }
}
.recommendation ul li p::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 71, 122, 1);
  border-radius: 8px;
  z-index: -1;
}
/*--料金--*/
#fee {
  max-width: 1280px !important;
  margin: 0 auto;
}
#fee h4:not(.optionbox h4) {
  padding-bottom: 24px;
  color: #fff;
  border-bottom: 1px solid #fff;
}
#fee h4 span {
  display: block;
  font-size: 70%;
}
#fee ul:not(.service_list) {
  margin-bottom: 64px;
}
#fee ul li:not(.service_list li) {
  padding: 3px;
  border-radius: 16px;
  margin-bottom: 80px;
}
#fee ul li:not(.service_list li):last-child {
  margin-bottom: 0;
}
.service_list li {
  width: 100%;
}
#fee ul li div.inner {
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr; /* h4 + 3 div ＝ 4行はauto 1fr 1fr 1fr */
  height: 100%;
}
#fee h4,
#fee .inner > div {
  flex: 1;
}
#fee h4.black {
  font-size: 109.8%;
  color: #000 !important;
  font-weight: bold;
}
#fee ul.feebox li:not(li ul li) {
  background: linear-gradient(135deg, #2980b9 50%, #439ad3 50%);
}
.feebox {
  position: relative;
}
@media screen and (min-width: 768px) {
  .feebox {
    display: flex;
    justify-content: space-between;
  }
  #fee ul li:not(.service_list li) {
    width: 48%;
    margin-bottom: 0;
  }
}
.feebox::before {
  content: "+";
  font-size: var(--plus-font-size, 6rem); /* カスタムプロパティで調整可 */
  color: #000;
  position: absolute;
  top: calc(49.5%);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  animation: plusFade 1s ease-in-out forwards;
  animation-delay: 1s;
}
@keyframes plusFade {
  to {
    opacity: 1;
  }
}
#fee .flex_sb {
  -webkit-flex-direction: column;
  flex-direction: column;
}
#fee div:not(.inner) {
  background: #fff;
  padding: 24px;
}
.fee_table {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#fee div {
  border-radius: 14px;
}
.fee_table table td.right span {
  width: 100px;
  display: block;
  margin: auto;
}
.fee_table tbody th {
  background: rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 1366px) {
  .table-fix table {
    table-layout: fixed;
  }
}
.plan dt {
  font-size: 100%;
  min-width: 80px;
  color: #2980b9;
  width: 20%;
}
.plan dd.price {
  font-size: 125%;
  margin-bottom: 8px;
}
.plan dd span {
  font-size: 70%;
}
.plan dd p {
  font-size: 70%;
  margin-top: 8px;
}
.plan_ti {
  font-size: 125%;
  font-weight: 600;
  text-align: center;
  border: 1px solid #777;
  color: #777;
  padding: 4px;
  border-radius: 30px;
  margin-bottom: 8px;
}
.service_list li {
  font-size: 100%;
  margin-bottom: 4px;
  padding-left: 24px;
}
.service_list li:before {
  content: "●";
  font-size: 100%;
  color: #65adc9;
  margin-left: -20px;
  margin-right: 4px;
}
#service .wrap {
  width: 90%;
  max-width: 960px;
  margin: 0 auto 64px auto;
}
.service_table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 auto 24px auto;
}
.service_table div {
  background-color: #f5f5f5;
  padding: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.optionbox {
  padding: 0 !important;
  margin-bottom: 128px;
}
.optionbox ul:not(dd ul) {
  background: linear-gradient(135deg, #2980b9 50%, #439ad3 50%);
  border-radius: 20px;
  padding: 24px;
}
.optionbox ul li {
  background: #fff !important;
}
@media screen and (min-width: 768px) {
  .optionbox ul:not(.service_list) {
    display: flex;
    justify-content: space-between;
  }
  .optionbox ul li:not(.service_list li) {
    width: 48%;
    margin-bottom: 0;
  }
}
#fee_sample dl div,
#fee_sample div.fee_sample {
  background: none;
  border: 1px solid rgba(30, 71, 122, 0.6);
  padding: 24px;
  border-radius: 16px;
  position: relative;
}
#fee_sample dl div::after,
#fee_sample div.fee_sample:after {
  background-color: rgba(30, 71, 122, 0.1);
  border: none;
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 16px;
}
#fee_sample dl dt {
  font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem) /*18-22|320-1920*/;
  color: #1e477a;
  font-weight: 600;
  margin-bottom: 16px;
}
.fee_sub_ti {
  background-color: rgba(30, 71, 122, 1) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  margin: 0 0 24px -32px;
  border-radius: 16px;
}
#fee_sample dl dd p {
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem) /*14-16|320-1920*/;
  color: #111;
  font-weight: 500;
  padding-left: 25px;
  position: relative;
  margin-bottom: 8px;
}
#fee_sample dl dd p:before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 8px;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
#fee_sample dl dd p:after {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 20px;
  height: 20px;
  background: #1e477a;
  z-index: -1;
}
#fee_sample .service_list li {
  font-size: 100%;
}
@media screen and (min-width: 768px) {
  #fee_sample .flex_sb {
    display: flex;
    justify-content: space-between;
  }
  #fee_sample .flex_sb div.w48 {
    width: 48%;
    margin-bottom: 0;
  }
}
.year_fee,
.other_fee {
  width: 100%;
  margin-bottom: 24px;
  border: none;
  border-collapse: separate;
}
.year_fee th,
.year_fee td,
.other_fee th,
.other_fee td {
  padding: 2% 0;
}
.year_fee th,
.other_fee th {
  border-bottom: 1px solid #2980b9;
  text-align: left;
  border-right: none;
}
.year_fee td,
.other_fee td {
  width: 70%;
  border-bottom: 1px solid #439ad3;
}
.year_fee th {
  width: 35%;
  background: none !important;
}
.year_fee td {
  width: 65%;
}
.other_fee th,
.other_fee td {
  width: 50%;
  font-weight: 600;
}
.other_fee th {
  color: #2980b9;
}
@media screen and (max-width: 767px) {
  .year_fee th {
    font-size: 85%;
  }
}
/*--ご契約までの流れ--*/
.flow_list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}
.flow_list ul {
  padding: 0;
}
.flow_list li {
  list-style-type: none;
}
.flow_list dd {
  margin-left: 0;
}
.flow_list ul {
  position: relative;
}
.flow_list ul::before {
  content: "";
  width: 8px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}
.flow_list ul > li {
  position: relative;
}
.flow_list ul > li:not(:last-child) {
  margin-bottom: 60px;
}
.flow_list ul > li .flow_icon {
  font-size: 0.8em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #2980b9;
  display: inline-block;
  margin-right: 0.3em;
}
.flow_list ul > li dl {
  padding-left: 70px;
  position: relative;
}
.flow_list ul > li dl::before,
.flow_list ul > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}
.flow_list ul > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #2980b9;
  border-radius: 50%;
  left: -8px;
}
.flow_list ul > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 3px;
}
.flow_list ul > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #2980b9;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  background: rgba(41, 128, 185, 0.2);
  border-radius: 100vh;
}
@media screen and (min-width: 768px) {
  #medical-profession .inner,
  #establishment .inner,
  #change .inner {
    padding: 48px;
  }
  .first_message {
    width: 65%;
    margin-bottom: 0;
  }
  .first_message_img {
    width: 32%;
  }
  .service_detail,
  .support_box {
    width: 48%;
  }
  .service_detail {
    margin-bottom: 0;
  }
  .service_box dt span {
    padding: 12px 0;
  }
  .support_box_ti {
    top: -24px;
    width: auto;
    min-width: 248px;
  }
  #fee .flex_sb {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .plan dt {
    min-width: 80px;
  }
  .service_table {
    grid-template-columns: repeat(3, 1fr);
  }
  .num01_ti::before,
  .num02_ti::before,
  .num03_ti::before {
    left: 48px;
    top: -16px;
  }
  .recommendation ul li {
    width: 24%;
  }
  .support_box_ti {
    left: 30%;
    transform: translateX(-20%);
    padding: 8px 30px;
  }
  .feebox {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
  }
  .feebox::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 1024px) {
  .support_box_ti {
    left: 50%;
    transform: translateX(-50%);
  }
  #fee ul li:not(.service_list li) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1025px) {
  .service_box {
    padding: 0 48px;
  }
}
@media screen and (min-width: 1281px) {
  .plan {
    display: flex;
  }
  .support_box_ti {
    padding: 8px 60px;
    left: 50%;
    transform: translateX(-50%);
  }
}