@charset "utf-8";

:root {
  --color-gray-1: #d9d4d5;
  --color-gray-3: #ebe9e9;
  --color-red-1: #c41727;
}

::after,
::before,
* {
  --font-size: calc((var(--fsz) / 16) * 1rem);
  font-size: var(--font-size);
}

/* ========================================
		既存のcssここから
======================================== */

.text_blue {
  color: #006dd9;
}
.text_green {
  color: #006633;
}
.text_red {
  color: #990000;
}
.text_black {
  color: #000;
}
.textRed {
  color: red;
}
.textBlueBold {
  color: #4d66cc;
  font-weight: bold;
}
.textPurple {
  color: #6a5acd;
}
.textGreen {
  color: #00827d;
}
.textGray {
  color: #999;
}
.textGraySmall {
  color: #999;
  font-size: 80%;
}
.textSmall {
  font-size: 80%;
}
.textLarge {
  font-size: 130%;
}
.backYellow {
  background: #fffffa;
}
.backPink {
  background: #fff6fa;
}
.backBlue {
  background: #f6faff;
}
.backOrange {
  background: #fff8ee;
}
.textRedSmall {
  color: red;
  font-size: 0.8em;
}
.textPurpleSmall {
  color: #6a5acd;
  font-size: 0.8em;
}
.textGreenSmall {
  color: #00827d;
  font-size: 0.8em;
}
.textRight {
  text-align: right;
}
.textCenter {
  text-align: center;
}
.imgRight .wcvwwe_notimagealt,
.imgLeft .wcvwwe_notimagealt,
.photoAreaR .wcvwwe_notimagealt,
.photoAreaL .wcvwwe_notimagealt {
  min-width: 20px;
  min-height: 20px;
  display: block;
}
.arrowRight {
  background: url("images/arrow.png") no-repeat scroll left center rgba(0, 0, 0, 0);
  padding-left: 20px;
}
p.comment1 {
  background: url(images/kome.gif) no-repeat left center;
  padding-left: 20px;
}
a.pdfLink {
  padding: 5px 0 5px 20px;
  background: url(images/pdficon.gif) no-repeat left 5px;
}

a.wordLink {
  padding: 5px 0 5px 20px;
  background: url(images/word.gif) no-repeat left 5px;
}

a.excelLink {
  padding: 5px 0 5px 20px;
  background: url(images/excel.gif) no-repeat left 5px;
}
.clear {
  clear: both;
}

/* ========================================
		既存のcssここまで
======================================== */

/* ========================================
		リニューアル用css
======================================== */

h1:where(.page-body *) {
  --fsz: 36;
  font-weight: 700;
  font-size: var(--font-size);
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 1.5rem;
}

h1:where(.page-body *)::before {
  content: "";
  display: block;
  background-image: url(../images/icon-ribon.svg);
  background-repeat: no-repeat;
  width: 56px;
  aspect-ratio: 1;
  height: auto;
  flex: 0 0 auto;
  background-size: contain;
}

@media (max-width: 991px) {
  h1:where(.page-body *) {
    --fsz: 20;
  }
  h1:where(.page-body *)::before {
    width: 32px;
    aspect-ratio: 1;
    height: auto;
    background-size: cover;
    padding-left: 35px;
  }
}

h2:where(.cke_editable *),
h2:where(.page-body *),
.h2 {
  --fsz: 36;
  font-size: var(--font-size);
  margin: 0 0 1.5rem;
  font-weight: 700;
  font-weight: bold;
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  padding-left: 64px;
}

h2:where(.page-body *):not(:first-child),
.page-body .h2:not(:first-child) {
  margin-top: 80px;
}

h2:where(.cke_editable *)::before,
h2:where(.page-body *)::before,
.page-body .h2::before {
  content: "";
  display: block;
  background-image: url(../images/icon-ribonv2.svg);
  background-repeat: no-repeat;
  width: 56px;
  aspect-ratio: 1;
  height: auto;
  flex: 0 0 auto;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width: 991px) {
  h2:where(.cke_editable *),
  h2:where(.page-body *),
  .h2 {
    --fsz: 20;
    padding-left: 45px;
  }
  h2:where(.cke_editable *)::before,
  h2:where(.page-body *)::before,
  .page-body .h2::before {
    width: 25px;
    aspect-ratio: 1;
    height: auto;
    padding-left: 35px;
  }

  h2:where(.page-body *):not(:first-child),
  .page-body .h2:not(:first-child) {
    margin-top: 60px;
  }
}

h3:where(.page-body *),
h3:where(.cke_editable *),
.h3 {
  --fsz: 28;
  font-size: var(--font-size);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0;
}

h3:where(.cke_editable *)::before,
h3:where(.page-body *)::before,
.page-body .h3::before {
  content: "";
  background-image: url(../images/icon-line.svg);
  background-repeat: no-repeat;
  width: 24px;
  height: 4px;
  background-size: contain;
  flex: 0 0 auto;
  position: static;
}

@media (max-width: 991px) {
  h3:where(.cke_editable *),
  h3:where(.page-body *),
  .h3 {
    --fsz: 18;
    margin-bottom: 20px;
  }
  h3:where(.cke_editable *)::before,
  h3:where(.page-body *)::before,
  .page-body .h3::before {
    content: "";
    background-image: url(../images/icon-line.svg);
    background-repeat: no-repeat;
    width: 20px;
    height: 3px;
    background-size: contain;
    flex: 0 0 auto;
  }
}

[style*="text-decoration"][style*="underline"]:where(.cke_editable *),
[style*="text-decoration"][style*="underline"]:where(.page-body *) {
  font-weight: 700;
}

li + li:where(.cke_editable *),
li + li:where(.page-body *) {
  margin: 0.5em 0 0;
}

a:where(.cke_editable *) {
  text-decoration: underline;
}

table:where(.page-body *) :where(th, td),
table:where(.cke_editable *) :where(th, td) {
  border: 1px solid var(--color-gray-1);
  padding: 1rem;
}

/* table:where(.page-body *) :where(th, td):first-child,
table:where(.cke_editable *) :where(th, td):first-child {
  border-left: 0;
}
table:where(.cke_editable *) :where(th, td):last-child,
table:where(.page-body *) :where(th, td):last-child {
  border-right: 0;
} */

table:where(.page-body *) th {
  background-color: var(--color-gray-3);
  font-weight: 700;
}

table:where(.cke_editable *),
table:where(.page-body *) {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1rem;
}

table:where(.cke_editable *):where(th, td),
table:where(.page-body *):where(th, td) {
  border: 1px solid var(--color-gray-1);
  padding: 1rem;
}

table:where(.cke_editable *):where(th, td):first-child,
table:where(.page-body *):where(th, td):first-child {
  border-left: 0;
}

table:where(.cke_editable *):where(th, td):last-child,
table:where(.page-body *):where(th, td):last-child {
  border-right: 0;
}

table:where(.cke_editable *) th,
table:where(.cpage-body *) th {
  background-color: var(--color-gray-3);
  font-weight: 700;
  padding: 1rem;
}

.contact-department li {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 767px) {
  .contact-department li {
    gap: 8px;
  }
}

.contact-department li::before {
  content: "";
  background-image: url(../images/icon-line.svg);
  background-repeat: no-repeat;
  width: 24px;
  height: 4px;
  background-size: contain;
  flex: 0 0 auto;
}

.top-popular-keyword ul {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-left: 0;
  margin-bottom: 0;
  position: relative;
}


.top-popular-keyword ul li a {
  display: flex;
  gap: 5px;
  color: var(--color-body-1);
  border: 1px solid var(--color-gray-1);
  border-radius: 12px;
  padding: 9px 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media(max-width:991px) {
	.top-popular-keyword ul{
		--fsz:14;
	}
}



.top-popular-keyword ul li{
	list-style: none;
}

.top-popular-keyword ul li a::before{
	content: "#";
	display: block;
	color: var(--color-red-1);
}

/* ========================================
		本文内のcssここから
======================================== */
.page-body a {
  text-decoration: underline;
  word-break: break-all;
}