@charset "UTF-8";

/* CSS Document */
:root {
  --corporate-color: #00a0e9;
  --sub-corporate-color: #007cb5;
  --active-color: #e8f6fd;
  --textLink-color: #333;
  --caution-color: #ff2800;
  --disable-bg-color: #f5f5f5;
  --disable-font-color: #bbb;
}

.contents {
  /* display: flex; */
  align-items: center;
  /* justify-content: center; */
  width: 1024px;
  /* height: 500px */
  ;
  margin: 20px auto 80px auto;
  font-size: 1.6rem;
  /* background-color: rgba(0, 0, 0, 0.1); */
  letter-spacing: 0.08em;
}

.page_ttl {
  display: block;
  background-color: var(--corporate-color);
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  padding: 11px 20px;
  margin-bottom: 32px
}

.section {
  padding-top: 40px;
  border-top: 1px solid #E5E5E5;
  margin-top: 40px;
}

#question.section {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* 見出し */
.section_ttl {
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: 20px;
  position: relative;
  padding-left: 10px;
  font-weight: 600;
}

.section_ttl::before {
  transform: translateY(-100%);
  background: var(--corporate-color);
}

.section_ttl::before,
.section_ttl::after {
  content: "";
  display: block;
  width: 4px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 50%;
}

.section_ttl::after {
  background: var(--sub-corporate-color);
}

/* ボタン */
.line-btn {
  display: inline-block;
  position: relative;
  padding: 11px 65px 11px 30px;
  border: 1px solid #c3c3c3;
  border-radius: 4px;
  transition: border-color 0.3s, background-color 0.3s;

  &.line-btn--caution {
    color: var(--caution-color);
  }
}

/* ボタン内矢印 */
.line-btn::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 10px;
  background: var(--corporate-color);
  border-radius: 50%;
  transform: translateY(-50%);
}

.line-btn::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  right: 16px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: translateY(-50%) rotate(45deg);
}

/* ボタンhover効果 */
.line-btn:hover {
  border-color: var(--corporate-color);
  background-color: #f2fafe;
}

.section_webguide {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.section_btn {
  margin-top: 20px;
  text-align: center;
}

/* 各種お手続き */
.link_box {
  margin-top: 20px;
  display: flex;
}

.link_list {
  margin-right: 100px;
}

.link_list_item {
  position: relative;
  padding-left: 24px;
  margin-bottom: 13px;
  line-height: 1;
}

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

.link_list_item span {
  font-size: 1.2rem;
  letter-spacing: 0;
}

.link_list_item:hover {
  text-decoration: underline;
}

/* 頭の矢印 */
.link_list_item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 0px;
  background: var(--corporate-color);
  border-radius: 50%;
  transform: translateY(-50%);
}

.link_list_item::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 5px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: translateY(-50%) rotate(45deg);
}

.section_btn a:not(:first-child) {
  margin-left: 50px;
  /* color: #ff2800; */
}