@charset "UTF-8";
/*
* Color
*/
:root {
  --txt-primary: #000000;
  --border-solid: #e0e0e0;
  --border-solid-2: #bbbbbb;
  --border-dotted: #888;
  --color-navy: #022a87;
  --color-blue: #3c82f6;
  --color-red: #F84D4D;
  --color-danger: #DB0000;
}

/*
* ダークモードに対応する場合は以下のメディアクエリを
*/
/*
* Font
*/
/*
* Font Size
*/
/* PC Tablet */
/* Mobile */
/*
* Media Query
*/
/*
* メディアクエリ
*/
/*
* ドロップシャドウ
*/
/*
* vwの計算
*/
/**
* Base - サイトのベースになるcss
*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

* {
  font-family: 游ゴシック, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", sans-serif;
}

body {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--txt-primary);
}
@media screen and (max-width: 1024px) {
  body {
    font-size: 1.6rem;
  }
}

img {
  max-width: 100%;
  height: auto;
}

main h1, main h2, main h3, main h4, main h5, main h6,
main p,
main li,
main a {
  line-height: 1.6;
}

a {
  color: #00e;
}
a:hover {
  text-decoration: none;
}

address {
  font-style: normal;
}

strong {
  font-weight: bold;
}

input[type=radio] {
  margin: 0 7px 0 0;
}

input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
select:focus,
textarea {
  font-size: 16px;
}

p {
  color: var(--txt-primary);
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.ly_base {
  max-width: 1180px;
  width: 95%;
  margin: 80px auto;
}

#globalHeader {
  overflow: hidden;
  border-bottom: 5px solid #2e4fb5;
  padding-bottom: 20px;
  box-shadow: 0 1px 1px #0006;
}

#globalHeader .logo img {
  float: left;
  height: 35px;
  margin: 20px 20px 0 0;
}

#globalHeader .headerInfo {
  float: right;
}

#globalHeader .headerInfo ul {
  margin-top: 22px;
}

#globalHeader .headerInfo ul li {
  font-size: 1.4rem;
  display: inline;
  background-color: transparent;
  background-image: url(https://osaka-gan-joho.net/laravel_cnow2023/public/build/assets/icon_arrow_001-8978f2e3.svg), none;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 7px;
  margin-right: 15px;
  padding-left: 10px;
}

#globalHeader .headerInfo ul li:last-child {
  margin-right: 0;
}

#globalHeader .container {
  overflow: hidden;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

#globalFooter {
  border-top: 5px solid #2e4fb5;
  padding: 20px 0;
}
#globalFooter .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#globalFooter .logo002 {
  height: 60px;
}

#globalFooter .footerInfo {
  font-size: 1.3rem;
}

#globalFooter .footerInfo ul {
  display: flex;
  justify-content: flex-end;
}

#globalFooter .footerInfo ul li {
  border-right: 1px solid #d3d3d3;
  margin-right: 10px;
  padding-right: 10px;
}

#globalFooter .footerInfo ul li:last-child {
  border: none;
  margin-right: 0;
  padding-right: 0;
}

#globalFooter .footerInfo #copy {
  text-align: right;
}

#globalFooter .container {
  overflow: hidden;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

/* がん情報サマリー */
.bl_top {
  margin-top: 40px;
}

.bl_topFlex {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: 1fr;
  grid-column-gap: 8px;
  background-color: #2e4fb5;
}
.bl_topFlex p {
  font-size: 1.2rem;
  color: #535353;
}

.bl_topTtl {
  font-size: 1.8rem !important;
  font-weight: bold;
  color: #fff !important;
  padding: 8px;
}
.bl_topTtl i {
  margin-left: 4px;
}

.bl_topBlock {
  padding: 8px;
  background-color: #fff;
}

.bl_topBlock__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bl_topBlockTxt {
  text-align: center;
}

.bl_topBlockFlex {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
}
.bl_topBlockFlex .large {
  font-size: 1.8rem !important;
  color: #000000;
}
.bl_topBlockFlex .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.bl_topBlockFlex .flex i {
  font-size: 140%;
  color: #2e4fb5;
}
@media screen and (max-width: 1024px) {
  .bl_topBlockFlex .flex img {
    width: 23px;
  }
}

@media screen and (max-width: 1024px) {
  .bl_topTtl {
    font-size: 1.6rem !important;
  }

  .bl_topFlex {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-row-gap: 8px;
  }

  .bl_topBlock__ttl {
    grid-area: 1/1/3/2;
  }

  .div2 {
    grid-area: 1/2/2/3;
  }

  .div3 {
    grid-area: 2/2/3/3;
  }

  .bl_topBlockFlex .large {
    font-size: 1.6rem !important;
  }
}
@media screen and (max-width: 768px) {
  .bl_topFlex {
    grid-template-columns: auto;
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 0px;
  }
}
@media screen and (max-width: 500px) {
  .bl_topBlockFlex {
    flex-direction: column;
    gap: 8px;
  }
}
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}

#page-top a {
  font-size: 3.1rem;
  color: #fff;
  width: 60px;
  height: 60px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-navy);
  border-radius: 90px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
  #page-top a {
    font-size: 2.6rem;
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 768px) {
  #page-top a {
    font-size: 2.2rem;
    width: 40px;
    height: 40px;
  }
}

#page-top a:hover {
  text-decoration: none;
  opacity: 0.5;
}

.bl_tab {
  margin: 80px auto;
  background-color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.bl_tabTtl {
  font-weight: bold;
}

.bl_tabList {
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(8, auto);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #f3f3f3;
}
@media screen and (max-width: 768px) {
  .bl_tabList {
    padding: 4px 16px;
    grid-template-columns: repeat(4, auto);
    grid-row-gap: 0;
  }
}
@media screen and (max-width: 425px) {
  .bl_tabList {
    padding: 4px 12px;
  }
}

.bl_tabListItem {
  position: relative;
}
.bl_tabListItem::before {
  font: var(--fa-font-solid);
  content: "";
  color: var(--color-red);
  position: absolute;
  top: 48%;
  left: 1px;
  transform: translateY(-50%);
}
.bl_tabListItem.osakashi::before {
  color: #a1d756;
}
.bl_tabListItem.toyono::before {
  color: #dd7fff;
}
.bl_tabListItem.mishima::before {
  color: #ff880b;
}
.bl_tabListItem.kitakawachi::before {
  color: #01dda3;
}
.bl_tabListItem.nakakawachi::before {
  color: #ff6a52;
}
.bl_tabListItem.minamikawachi::before {
  color: #ffe97d;
}
.bl_tabListItem.sakaishi::before {
  color: #07dbff;
}
.bl_tabListItem.senshuu::before {
  color: #8fcbf2;
}
.bl_tabListItem:hover .bl_tabDropdownList {
  display: block;
}

.bl_tabListItemLink {
  font-weight: bold;
  color: var(--txt-primary);
  line-height: 1;
  padding: 16px 0 16px 20px;
  display: block;
  width: 100%;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.bl_tabListItemLink:hover {
  color: var(--color-red);
  transition: 0.3s;
}
@media screen and (max-width: 1024px) {
  .bl_tabListItemLink {
    padding-left: 16px;
  }
}
@media screen and (max-width: 768px) {
  .bl_tabListItemLink {
    padding: 8px 0 8px 16px;
  }
}

.bl_tabDropdownList {
  display: none;
  width: 240px;
  background-color: #fff2f8;
  position: absolute;
  left: -8px;
  z-index: 10000;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.02), 2px 5px 4px rgba(0, 0, 0, 0.03), 4px 10px 14px rgba(0, 0, 0, 0.04), 6px 18px 25px rgba(0, 0, 0, 0.05), 8px 30px 35px rgba(0, 0, 0, 0.06);
}
.bl_tabDropdownList.osakashi {
  width: 600px;
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
.bl_tabDropdownList.senshuu {
  width: 260px;
  right: -24px;
  left: auto;
}
@media screen and (max-width: 1024px) {
  .bl_tabDropdownList {
    width: 220px;
  }
  .bl_tabDropdownList.sakaishi {
    right: -80px;
    left: auto;
  }
  .bl_tabDropdownList.senshuu {
    width: 240px;
  }
}
@media screen and (max-width: 768px) {
  .bl_tabDropdownList.osakashi {
    width: 90vw;
  }
  .bl_tabDropdownList.mishima, .bl_tabDropdownList.kitakawachi, .bl_tabDropdownList.sakaishi, .bl_tabDropdownList.senshuu {
    right: -16px;
    left: auto;
  }
}

.bl_tabDropdownListItem a {
  color: var(--txt-primary);
  line-height: 1.2;
  display: block;
  padding: 5px 5px 5px 24px;
  background-color: #fff2f8;
  position: relative;
}
.bl_tabDropdownListItem a::before {
  content: "－";
  color: var(--color-red);
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}
.bl_tabDropdownListItem a:hover {
  background-color: #f1e1e1;
}

.bl_section {
  margin-top: 40px;
}
.bl_section ~ .bl_section {
  margin-top: 96px;
}

.bl_sectionTtl {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.2;
  padding-left: 8px;
  border-left: 8px solid;
}
.bl_sectionTtl.osakashi {
  border-color: #a1d756;
}
.bl_sectionTtl.toyono {
  border-color: #dd7fff;
}
.bl_sectionTtl.mishima {
  border-color: #ff880b;
}
.bl_sectionTtl.kitakawachi {
  border-color: #01dda3;
}
.bl_sectionTtl.nakakawachi {
  border-color: #ff6a52;
}
.bl_sectionTtl.minamikawachi {
  border-color: #ffe97d;
}
.bl_sectionTtl.sakaishi {
  border-color: #07dbff;
}
.bl_sectionTtl.senshuu {
  border-color: #8fcbf2;
}
@media screen and (max-width: 1024px) {
  .bl_sectionTtl {
    font-size: 2.4rem;
  }
}

.bl_container {
  margin-top: 24px;
  border: 1px solid var(--color-navy);
}
.bl_container ~ .bl_container {
  margin-top: 48px;
}

.bl_containerTtlBlock {
  padding: 16px 24px;
  background-color: var(--color-navy);
}
@media screen and (max-width: 768px) {
  .bl_containerTtlBlock {
    padding: 14px 3%;
  }
}

.bl_containerTtlName {
  font-size: 2.8rem;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.bl_containerTtlName i {
  font-size: 80%;
  color: #fff;
  margin-left: 16px;
}
@media screen and (max-width: 1024px) {
  .bl_containerTtlName {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 500px) {
  .bl_containerTtlName {
    font-size: 2.2rem;
  }
}

.bl_containerTtlDate {
  font-size: 80%;
  margin-bottom: 8px;
}

.bl_containerTtlCateList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bl_containerTtlCateList li {
  font-size: 1.4rem;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #fff;
  border-radius: 2px;
}
.bl_containerTtlCateList li .kuni,
.bl_containerTtlCateList li .fu {
  color: #fff;
  padding: 0 2px;
  border-radius: 2px;
}
.bl_containerTtlCateList li .kuni span,
.bl_containerTtlCateList li .fu span {
  font-weight: bold;
}
.bl_containerTtlCateList li .kuni {
  background-color: #509b49;
}
.bl_containerTtlCateList li .fu {
  background-color: #125e8b;
}
@media screen and (max-width: 1024px) {
  .bl_containerTtlCateList li {
    font-size: 1.3rem;
  }
}

.bl_contents {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 652px 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 1200px) {
  .bl_contents {
    grid-template-columns: 64% 1fr;
    grid-column-gap: 24px;
  }
}
@media screen and (max-width: 1024px) {
  .bl_contents {
    grid-template-columns: 100%;
    grid-template-rows: repeat(3, auto);
  }
}
@media screen and (max-width: 768px) {
  .bl_contents {
    padding: 20px 3%;
  }
}

.bl_contentsMain {
  grid-area: 1/1/3/2;
}
@media screen and (max-width: 1024px) {
  .bl_contentsMain {
    max-width: none;
  }
}

.bl_contentsMainTop__flex {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .bl_contentsMainTop__flex {
    grid-template-columns: auto;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 10px;
  }
}

.bl_contentsMainTop {
  padding: 12px 16px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.01), 0 4px 4px rgba(0, 0, 0, 0.02), 0 6px 8px rgba(0, 0, 0, 0.03), 0 10px 28px rgba(0, 0, 0, 0.05);
}
.bl_contentsMainTop p {
  line-height: 1;
}
.bl_contentsMainTop i {
  font-size: 4rem;
  grid-area: 1/1/3/2;
}
.bl_contentsMainTop .num {
  font-size: 1.4rem;
  font-weight: bold;
}
.bl_contentsMainTop .num span {
  font-size: 2.8rem;
  margin-right: 4px;
}
.bl_contentsMainTop.blue {
  background-color: #eff6ff;
}
.bl_contentsMainTop.blue i {
  color: var(--color-blue);
}
.bl_contentsMainTop.blue .num {
  color: var(--color-navy);
}
.bl_contentsMainTop.green {
  background-color: #ecfdf5;
}
.bl_contentsMainTop.green i {
  color: #0eb980;
}
.bl_contentsMainTop.green .num {
  color: #055f46;
}
.bl_contentsMainTop.pink {
  background-color: #fdecf4;
}
.bl_contentsMainTop.pink i {
  color: #f28dbd;
}
.bl_contentsMainTop.pink .num {
  color: #d4448a;
}
@media screen and (max-width: 1024px) {
  .bl_contentsMainTop i {
    font-size: 3.8rem;
  }
  .bl_contentsMainTop .num {
    font-size: 1.3rem;
  }
  .bl_contentsMainTop .num span {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .bl_contentsMainTop i {
    width: 48px;
  }
}

.bl_contentsMainBlock {
  margin-top: 10px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.01), 0 4px 4px rgba(0, 0, 0, 0.02), 0 6px 8px rgba(0, 0, 0, 0.03), 0 10px 28px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 500px) {
  .bl_contentsMainBlock {
    padding: 12px 2%;
  }
}

.bl_contentsMainBlockTtl {
  margin-bottom: 8px;
}
.bl_contentsMainBlockTtl i {
  font-size: 2rem;
  color: var(--color-blue);
  text-align: center;
  width: 25px;
  margin-right: 8px;
}
.bl_contentsMainBlockTtl span {
  font-weight: bold;
}
@media screen and (max-width: 1024px) {
  .bl_contentsMainBlockTtl i {
    font-size: 1.8rem;
    width: 22px;
  }
}

.bl_contentsMainBlockIn ~ .bl_contentsMainBlockIn {
  margin-top: 16px;
}

.bl_contentsTable__bui {
  width: 100%;
}
.bl_contentsTable__bui th,
.bl_contentsTable__bui td {
  text-align: center;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-solid-2);
  border-collapse: collapse;
  vertical-align: middle;
}
.bl_contentsTable__bui th {
  font-size: 90%;
  background-color: #f3f3f3;
}
.bl_contentsTable__bui th.small {
  font-weight: normal;
  background-color: #fff;
}
.bl_contentsTable__bui td {
  font-weight: bold;
}
@media screen and (max-width: 1024px) {
  .bl_contentsTable__bui {
    max-width: 560px;
  }
}
@media screen and (max-width: 768px) {
  .bl_contentsTable__bui th,
.bl_contentsTable__bui td {
    padding: 6px 8px;
  }
}
@media screen and (max-width: 500px) {
  .bl_contentsTable__bui th,
.bl_contentsTable__bui td {
    padding: 6px 2px;
  }
  .bl_contentsTable__bui td {
    font-size: 90%;
  }
}

.bl_contentsTable__taiou tr {
  line-height: 1.2;
  display: flex;
  align-items: center;
}
.bl_contentsTable__taiou tr ~ tr {
  border-top: 1px solid var(--border-solid);
}
.bl_contentsTable__taiou th,
.bl_contentsTable__taiou td {
  padding: 6px 8px;
}
.bl_contentsTable__taiou th {
  font-weight: normal;
  width: 220px;
}
.bl_contentsTable__taiou td {
  font-weight: bold;
  display: flex;
  align-items: center;
}
.bl_contentsTable__taiou td i {
  margin-right: 8px;
}
.bl_contentsTable__taiou td.green i {
  color: #4caf50;
}
.bl_contentsTable__taiou td.orange span {
  font-size: 0.99rem;
  color: #fff;
  margin-right: 8px;
  padding: 4px;
  display: flex;
  align-items: center;
  width: 18px;
  height: 18px;
  background-color: #ffc106;
  border-radius: 9px;
}
.bl_contentsTable__taiou td.red i {
  color: #d90000;
}
@media screen and (max-width: 1024px) {
  .bl_contentsTable__taiou td.orange span {
    font-size: 0.86rem;
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 500px) {
  .bl_contentsTable__taiou th,
.bl_contentsTable__taiou td {
    padding: 6px;
  }
  .bl_contentsTable__taiou th {
    width: 48%;
  }
  .bl_contentsTable__taiou td {
    flex: 1 1;
  }
}

.bl_contentsMap {
  display: flex;
  gap: 24px;
}
.bl_contentsMap .map {
  border: 1px solid var(--border-solid);
  border-radius: 8px;
}
.bl_contentsMap .map iframe {
  border-radius: 8px;
  width: 100%;
  height: 100%;
}
.bl_contentsMap .images {
  padding: 12px;
  max-width: 160px;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-solid);
  border-radius: 8px;
}
.bl_contentsMap .images img {
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 500px) {
  .bl_contentsMap {
    gap: 12px;
  }
}

.bl_contentsCommentBlock {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #fff8e1;
  border-left: 4px solid #ffc106;
  border-radius: 8px;
  max-height: 300px;
  word-break: break-all;
  overflow-y: scroll;
}
.bl_contentsCommentBlock a {
  text-decoration: underline;
}
.bl_contentsCommentBlock a:hover {
  text-decoration: none;
}

.bl_contentsCommentTtl {
  font-weight: bold;
}
.bl_contentsCommentTtl i {
  margin-right: 8px;
}

.bl_contentsCommentCap {
  font-size: 1.4rem;
  font-weight: 400;
}
.bl_contentsCommentCap span {
  font-weight: bold;
}

.bl_contentsLink {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.bl_contentsLink i {
  font-size: 95%;
  margin-left: 8px;
}
@media screen and (max-width: 768px) {
  .bl_contentsLink {
    flex-direction: column;
  }
}

.el_linkBorder {
  text-decoration: underline;
}
.el_linkBorder:hover {
  text-decoration: none;
}

.el_linkBorderNone {
  text-decoration: none;
}
.el_linkBorderNone:hover {
  text-decoration: underline;
}

.el_ttl {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-bottom: 64px;
}

/*
* margin
*/
.hp {
  /* margin top */
  /* margin right */
  /* margin bottom */
  /* margin left */
}
.hp_mt0p {
  margin-top: 0px !important;
}
.hp_mt5p {
  margin-top: 5px !important;
}
.hp_mt10p {
  margin-top: 10px !important;
}
.hp_mt15p {
  margin-top: 15px !important;
}
.hp_mt20p {
  margin-top: 20px !important;
}
.hp_mt25p {
  margin-top: 25px !important;
}
.hp_mt30p {
  margin-top: 30px !important;
}
.hp_mt35p {
  margin-top: 35px !important;
}
.hp_mt40p {
  margin-top: 40px !important;
}
.hp_mt45p {
  margin-top: 45px !important;
}
.hp_mt50p {
  margin-top: 50px !important;
}
.hp_mt55p {
  margin-top: 55px !important;
}
.hp_mt60p {
  margin-top: 60px !important;
}
.hp_mt65p {
  margin-top: 65px !important;
}
.hp_mt70p {
  margin-top: 70px !important;
}
.hp_mt80p {
  margin-top: 80px !important;
}
.hp_mt100p {
  margin-top: 100px !important;
}
.hp_mr0p {
  margin-right: 0px !important;
}
.hp_mr5p {
  margin-right: 5px !important;
}
.hp_mr10p {
  margin-right: 10px !important;
}
.hp_mr15p {
  margin-right: 15px !important;
}
.hp_mr20p {
  margin-right: 20px !important;
}
.hp_mr25p {
  margin-right: 25px !important;
}
.hp_mr30p {
  margin-right: 30px !important;
}
.hp_mr35p {
  margin-right: 35px !important;
}
.hp_mr40p {
  margin-right: 40px !important;
}
.hp_mr45p {
  margin-right: 45px !important;
}
.hp_mr50p {
  margin-right: 50px !important;
}
.hp_mr55p {
  margin-right: 55px !important;
}
.hp_mr60p {
  margin-right: 60px !important;
}
.hp_mr65p {
  margin-right: 65px !important;
}
.hp_mr70p {
  margin-right: 70px !important;
}
.hp_mb0p {
  margin-bottom: 0px !important;
}
.hp_mb5p {
  margin-bottom: 5px !important;
}
.hp_mb10p {
  margin-bottom: 10px !important;
}
.hp_mb15p {
  margin-bottom: 15px !important;
}
.hp_mb20p {
  margin-bottom: 20px !important;
}
.hp_mb25p {
  margin-bottom: 25px !important;
}
.hp_mb30p {
  margin-bottom: 30px !important;
}
.hp_mb35p {
  margin-bottom: 35px !important;
}
.hp_mb40p {
  margin-bottom: 40px !important;
}
.hp_mb45p {
  margin-bottom: 45px !important;
}
.hp_mb50p {
  margin-bottom: 50px !important;
}
.hp_mb55p {
  margin-bottom: 55px !important;
}
.hp_mb60p {
  margin-bottom: 60px !important;
}
.hp_mb65p {
  margin-bottom: 65px !important;
}
.hp_mb70p {
  margin-bottom: 70px !important;
}
.hp_ml0p {
  margin-left: 0px !important;
}
.hp_ml5p {
  margin-left: 5px !important;
}
.hp_ml10p {
  margin-left: 10px !important;
}
.hp_ml15p {
  margin-left: 15px !important;
}
.hp_ml20p {
  margin-left: 20px !important;
}
.hp_ml25p {
  margin-left: 25px !important;
}
.hp_ml30p {
  margin-left: 30px !important;
}
.hp_ml35p {
  margin-left: 35px !important;
}
.hp_ml40p {
  margin-left: 40px !important;
}
.hp_ml45p {
  margin-left: 45px !important;
}
.hp_ml50p {
  margin-left: 50px !important;
}
.hp_ml55p {
  margin-left: 55px !important;
}
.hp_ml60p {
  margin-left: 60px !important;
}
.hp_ml65p {
  margin-left: 65px !important;
}
.hp_ml70p {
  margin-left: 70px !important;
}

/*
* padding
*/
.hp {
  /* padding top */
  /* padding right */
  /* padding bottom */
  /* padding left */
}
.hp_pt0p {
  padding-top: 0px !important;
}
.hp_pt5p {
  padding-top: 5px !important;
}
.hp_pt10p {
  padding-top: 10px !important;
}
.hp_pt15p {
  padding-top: 15px !important;
}
.hp_pt20p {
  padding-top: 20px !important;
}
.hp_pt25p {
  padding-top: 25px !important;
}
.hp_pt30p {
  padding-top: 30px !important;
}
.hp_pt35p {
  padding-top: 35px !important;
}
.hp_pt40p {
  padding-top: 40px !important;
}
.hp_pt45p {
  padding-top: 45px !important;
}
.hp_pt50p {
  padding-top: 50px !important;
}
.hp_pt55p {
  padding-top: 55px !important;
}
.hp_pt60p {
  padding-top: 60px !important;
}
.hp_pt65p {
  padding-top: 65px !important;
}
.hp_pt70p {
  padding-top: 70px !important;
}
.hp_pr0p {
  padding-right: 0px !important;
}
.hp_pr5p {
  padding-right: 5px !important;
}
.hp_pr10p {
  padding-right: 10px !important;
}
.hp_pr15p {
  padding-right: 15px !important;
}
.hp_pr20p {
  padding-right: 20px !important;
}
.hp_pr25p {
  padding-right: 25px !important;
}
.hp_pr30p {
  padding-right: 30px !important;
}
.hp_pr35p {
  padding-right: 35px !important;
}
.hp_pr40p {
  padding-right: 40px !important;
}
.hp_pr45p {
  padding-right: 45px !important;
}
.hp_pr50p {
  padding-right: 50px !important;
}
.hp_pr55p {
  padding-right: 55px !important;
}
.hp_pr60p {
  padding-right: 60px !important;
}
.hp_pr65p {
  padding-right: 65px !important;
}
.hp_pr70p {
  padding-right: 70px !important;
}
.hp_pr90p {
  padding-right: 90px !important;
}
.hp_pb0p {
  padding-bottom: 0px !important;
}
.hp_pb5p {
  padding-bottom: 5px !important;
}
.hp_pb10p {
  padding-bottom: 10px !important;
}
.hp_pb15p {
  padding-bottom: 15px !important;
}
.hp_pb20p {
  padding-bottom: 20px !important;
}
.hp_pb25p {
  padding-bottom: 25px !important;
}
.hp_pb30p {
  padding-bottom: 30px !important;
}
.hp_pb35p {
  padding-bottom: 35px !important;
}
.hp_pb40p {
  padding-bottom: 40px !important;
}
.hp_pb45p {
  padding-bottom: 45px !important;
}
.hp_pb50p {
  padding-bottom: 50px !important;
}
.hp_pb55p {
  padding-bottom: 55px !important;
}
.hp_pb60p {
  padding-bottom: 60px !important;
}
.hp_pb65p {
  padding-bottom: 65px !important;
}
.hp_pb70p {
  padding-bottom: 70px !important;
}
.hp_pl0p {
  padding-left: 0px !important;
}
.hp_pl5p {
  padding-left: 5px !important;
}
.hp_pl10p {
  padding-left: 10px !important;
}
.hp_pl15p {
  padding-left: 15px !important;
}
.hp_pl20p {
  padding-left: 20px !important;
}
.hp_pl25p {
  padding-left: 25px !important;
}
.hp_pl30p {
  padding-left: 30px !important;
}
.hp_pl35p {
  padding-left: 35px !important;
}
.hp_pl40p {
  padding-left: 40px !important;
}
.hp_pl45p {
  padding-left: 45px !important;
}
.hp_pl50p {
  padding-left: 50px !important;
}
.hp_pl55p {
  padding-left: 55px !important;
}
.hp_pl60p {
  padding-left: 60px !important;
}
.hp_pl65p {
  padding-left: 65px !important;
}
.hp_pl70p {
  padding-left: 70px !important;
}

/*
* font
*/
.hp_fwBold {
  font-weight: bold !important;
}
.hp_fs80per {
  font-size: 0.8em !important;
}
.hp_fs90per {
  font-size: 0.9em !important;
}
.hp_fs120per {
  font-size: 1.2em !important;
}

/*
* color
*/
.hp_colorMain {
  color: var(--color-primary) !important;
}
.hp_colorDanger {
  color: var(--color-danger) !important;
}

.hp_txtCenter {
  text-align: center !important;
}
.hp_txtLeft {
  text-align: left !important;
}
.hp_txtRight {
  text-align: right !important;
}
.hp_txtJust {
  text-align: justify !important;
}

/*
* Base
*/
/*
* Layout
*/
/*
* Block
*/
/*
* Element
*/
/*
* Unique
*/
/*
* Helper
*/