@charset "utf-8";

/* GLOBAL
--------------------------------------------------------------- */
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: normal;
	src: url('../font/NotoSansJP-Medium.woff2') format('woff2');
  font-display: swap;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: url('../font/NotoSansJP-ExtraBold.woff2') format('woff2');
  font-display: swap;
}

:root {
  --app-root-navy: rgb(22, 20, 92);
  --app-primary-color: var(--app-root-navy);
  --app-primary-hover-color: rgb(37, 34, 155);
  --app-primary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-primary-color-transparent20: rgba(22, 20, 92, 0.2);
  --app-primary-text-color: var(--app-root-navy);
  --app-primary-icon-color: var(--app-root-navy);
  --app-primary-graph-color: rgba(22, 20, 92, 0.64);
  --app-primary-progressbar-color: var(--app-root-navy);
  --app-secondary-color: rgb(20, 89, 92);
  --app-secondary-hover-color: rgb(34, 150, 155);
  --app-secondary-color-transparent50: rgba(20, 89, 92, 0.5);
  --app-secondary-color-transparent20: rgba(20, 89, 92, 0.2);
  --app-secondary-text-color: rgb(20, 89, 92);
  --app-secondary-icon-color: rgb(20, 89, 92);
  --app-secondary-graph-color: rgba(20, 89, 92, 0.64);
  --app-secondary-progressbar-color: rgb(20, 89, 92);
  --app-tertiary-color: rgb(255, 49, 0);
  --app-tertiary-hover-color: rgb(255, 111, 77);
  --app-tertiary-color-transparent50: rgba(255, 49, 0, 0.5);
  --app-tertiary-color-transparent20: rgba(255, 49, 0, 0.2);
  --app-tertiary-text-color: rgb(255, 49, 0);
  --app-tertiary-icon-color: rgb(255, 49, 0);
  --app-tertiary-graph-color: rgba(255, 49, 0, 0.64);
  --app-tertiary-progressbar-color: rgb(255, 49, 0);
  --app-strong-color: rgb(255, 0, 98);
  --app-header-sub-button-color: rgba(20, 90, 92, 0.15);
}

html.theme-sihd {
  --app-primary-color: rgb(70, 120, 205);
  --app-primary-hover-color: rgb(84, 144, 246);
  --app-primary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-primary-color-transparent20: rgba(70, 120, 205, 0.2);
  --app-primary-text-color: var(--app-root-navy);
  --app-primary-icon-color: var(--app-root-navy);
  --app-primary-graph-color: rgb(70, 120, 205, 0.64);
  --app-primary-progressbar-color: rgb(70, 120, 205);
  --app-secondary-color: rgb(69, 204, 155);
  --app-secondary-hover-color: rgb(76, 224, 170);
  --app-secondary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-secondary-color-transparent20: rgba(69, 204, 155, 0.2);
  --app-secondary-text-color: var(--app-root-navy);
  --app-secondary-icon-color: var(--app-root-navy);
  --app-secondary-graph-color: rgba(69, 204, 155, 0.64);
  --app-secondary-progressbar-color: rgb(69, 204, 155);
  --app-tertiary-color: rgb(255, 49, 0);
  --app-tertiary-hover-color: rgb(255, 111, 77);
  --app-tertiary-color-transparent50: rgba(255, 49, 0, 0.5);
  --app-tertiary-color-transparent20: rgba(255, 49, 0, 0.2);
  --app-tertiary-text-color: rgb(255, 49, 0);
  --app-tertiary-icon-color: rgb(255, 49, 0);
  --app-tertiary-graph-color: rgba(255, 49, 0, 0.64);
  --app-tertiary-progressbar-color: rgb(255, 49, 0);
  --app-strong-color: rgb(255, 0, 98);
  --app-header-sub-button-color: rgba(20, 90, 92, 0.15);
}

html.theme-black {
  --app-primary-color: rgb(0, 0, 0);
  --app-primary-hover-color: rgb(41, 41, 41);
  --app-primary-color-transparent50: rgba(0, 0, 0, 0.5);
  --app-primary-color-transparent20: rgba(0, 0, 0, 0.2);
  --app-primary-text-color: rgb(0, 0, 0);
  --app-primary-icon-color: rgb(0, 0, 0);
  --app-primary-graph-color: rgb(0, 0, 0, 0.64);
  --app-primary-progressbar-color: rgb(0, 0, 0);
  --app-secondary-color: rgb(0, 0, 0);
  --app-secondary-hover-color: rgb(41, 41, 41);
  --app-secondary-color-transparent50: rgba(0, 0, 0, 0.5);
  --app-secondary-color-transparent20: rgba(0, 0, 0, 0.2);
  --app-secondary-text-color: rgb(0, 0, 0);
  --app-secondary-icon-color: rgb(0, 0, 0);
  --app-secondary-graph-color: rgb(0, 0, 0, 0.64);
  --app-secondary-progressbar-color: rgb(0, 0, 0);
  --app-tertiary-color: rgb(255, 49, 0);
  --app-tertiary-hover-color: rgb(255, 111, 77);
  --app-tertiary-color-transparent50: rgba(255, 49, 0, 0.5);
  --app-tertiary-color-transparent20: rgba(255, 49, 0, 0.2);
  --app-tertiary-text-color: rgb(255, 49, 0);
  --app-tertiary-icon-color: rgb(255, 49, 0);
  --app-tertiary-graph-color: rgba(255, 49, 0, 0.64);
  --app-tertiary-progressbar-color: rgb(255, 49, 0);
  --app-strong-color: rgb(255, 0, 98);
  --app-header-sub-button-color: rgba(20, 90, 92, 0.15);
}

html.theme-makuake {
  --app-primary-color: rgb(26, 213, 255);
  --app-primary-hover-color: rgb(29, 234, 280);
  --app-primary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-primary-color-transparent20: rgba(139, 198, 214, 0.2);
  --app-primary-text-color: var(--app-root-navy);
  --app-primary-icon-color: var(--app-root-navy);
  --app-primary-graph-color: rgba(26, 213, 255, 0.64);
  --app-primary-progressbar-color: rgb(139, 198, 214);
  --app-secondary-color: rgb(186, 239, 23);
  --app-secondary-hover-color: rgb(195, 251, 24);
  --app-secondary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-secondary-color-transparent20: rgba(186, 239, 23, 0.2);
  --app-secondary-text-color: var(--app-root-navy);
  --app-secondary-icon-color: var(--app-root-navy);
  --app-secondary-graph-color: rgba(186, 239, 23, 0.64);
  --app-secondary-progressbar-color: rgb(185, 238, 23);
  --app-tertiary-color: rgb(251, 43, 121);
  --app-tertiary-hover-color: rgb(255, 72, 203);
  --app-tertiary-color-transparent50: rgba(251, 43, 121, 0.5);
  --app-tertiary-color-transparent20: rgba(251, 43, 121, 0.2);
  --app-tertiary-text-color: rgb(251, 43, 121);
  --app-tertiary-icon-color: rgb(251, 43, 121);
  --app-tertiary-graph-color: rgba(251, 43, 121, 0.64);
  --app-tertiary-progressbar-color: rgb(251, 43, 121);
  --app-strong-color: rgb(255, 0, 98);
  --app-header-sub-button-color: rgba(20, 90, 92, 0.15);
}

html.theme-zaiko {
  --app-primary-color: rgb(114, 198, 208);
  --app-primary-hover-color: rgb(125, 218, 229);
  --app-primary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-primary-color-transparent20: rgba(114, 198, 208, 0.2);
  --app-primary-text-color: var(--app-root-navy);
  --app-primary-icon-color: var(--app-root-navy);
  --app-primary-graph-color: rgba(114, 198, 208, 0.64);
  --app-primary-progressbar-color: rgb(114, 198, 208);
  --app-secondary-color: rgb(245, 172, 60);
  --app-secondary-hover-color: rgb(270, 189, 66);
  --app-secondary-color-transparent50: rgba(22, 20, 92, 0.5);
  --app-secondary-color-transparent20: rgba(245, 172, 60, 0.2);
  --app-secondary-text-color: var(--app-root-navy);
  --app-secondary-icon-color: var(--app-root-navy);
  --app-secondary-graph-color: rgba(245, 172, 60, 0.64);
  --app-secondary-progressbar-color: rgb(245, 172, 60);
  --app-tertiary-color: rgb(255, 49, 0);
  --app-tertiary-hover-color: rgb(255, 111, 77);
  --app-tertiary-color-transparent50: rgba(255, 49, 0, 0.5);
  --app-tertiary-color-transparent20: rgba(255, 49, 0, 0.2);
  --app-tertiary-text-color: rgb(255, 49, 0);
  --app-tertiary-icon-color: rgb(255, 49, 0);
  --app-tertiary-graph-color: rgba(255, 49, 0, 0.64);
  --app-tertiary-progressbar-color: rgb(255, 49, 0);
  --app-strong-color: rgb(255, 0, 98);
  --app-header-sub-button-color: rgba(20, 90, 92, 0.15);
}

body {
  background: #f2f4f7;
  color: var(--app-primary-text-color);
  font-family: "Noto Sans JP", "游ゴシック", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 768px) {
  body.jsGlobalMenuOpened {
    position: fixed;
    height: 100%;
    overflow: hidden;
  }
}

select, input, textarea, button {
  font-family: "Noto Sans JP", "游ゴシック", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

a {
  color: #37a2ff;
  text-decoration: underline;
}

a[href^="tel:"] {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

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

.bodyContentWrap {
  min-width: 1260px;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
  .bodyContentWrap {
    min-width: 0;
    overflow-x: hidden;
  }
}

@media not screen and (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}

/*contents
--------------------------------------------------------------- */
@media print, not screen and (max-width: 768px) {
  .siteContentWrap {
    width: 1210px;
    padding: 0 25px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .siteContentWrap {
    padding: 0 15px;
  }
}

.viewContents {
  position: relative;
  width: calc(100% - 220px - 50px);
  margin-left: auto;
  padding: 32px 0 0;
  font-size: 1.4rem;
  line-height: 1.7857;
}

@media screen and (max-width: 768px) {
  .viewContents {
    width: 100%;
    padding-top: 80px;
    line-height: 1.5;
  }
}

.viewContentsBlock {
  margin: 0 0 60px;
  padding: 30px 36px;
  border-radius: 20px;
  box-sizing: border-box;
  background: #fff;
  letter-spacing: 0;
}

.viewContentsBlock > *:first-child {
  margin-top: 0;
}

.viewContentsBlock > *:last-child {
  margin-bottom: 0;
}

.viewContentsBlock > .buttonList:last-child {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .viewContentsBlock {
    padding: 30px 24px;
  }

  .viewContentsBlock.spFullSize {
    margin: 0 -15px 60px;
    padding: 30px 20px;
    border-radius: 0;
  }
}

@media screen and (max-width: 350px) {
  .viewContentsBlock {
    padding: 24px 16px;
  }

  .viewContentsBlock.spFullSize {
    margin: 0 -15px 60px;
    padding: 24px 16px;
    border-radius: 0;
  }
}

/*header
--------------------------------------------------------------- */
.siteHeader {
  width: 220px;
  position: fixed;
  z-index: 999;
  overflow-y: scroll;
  scrollbar-width: none;
}

.siteHeader a {
  text-decoration: none;
  display: block;
}

.siteHeader::-webkit-scrollbar {
  display: none;
}

.siteHeader .logo {
  fill: var(--app-primary-icon-color);
}
@media screen and (max-width:1280px){ 
  .siteHeader {
    left: 0;
    padding-left: 20px;
  }
}
@media screen and (max-width:1280px) and (min-width:769px){
  .siteHeader {
    position: absolute;
  }
}
@media not screen and (max-width: 768px) {
  .siteHeader {
    height: 100%;
  }
}

.siteHeader .headerInner {
  padding: 35px 0;
}

.siteHeader .headerLogoArea {
  width: 155px;
  margin-bottom: 50px;
  padding-left: 10px;
}
.siteHeader .headerLogoArea svg {
  width: 155px;
  height: 45px;
}
.siteHeader .headerLogoArea svg path,
.siteHeader .headerLogoArea svg rect {
  fill: var(--app-primary-icon-color);
}

@media screen and (max-width: 768px) {
  .siteHeader {
    width: 100%;
    top: -1px;
    left: 0;
    padding-left: 0;
  }
  .siteHeader .headerInner {
    padding: 0;
  }
  .siteHeader .headerLogoArea svg {
    height: 35px;
    width: 125px;
  }
  .siteHeader .headerBase {
    position: relative;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  .siteHeader .headerBase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 20;
  }
  .siteHeader .headerBase::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 20;
  }
  .siteHeader.active .headerBase {
    position: fixed;
    width: 100%;
    z-index: 20;
  }
  .siteHeader.active .headerBase::after {
    opacity: 1;
  }
  .siteHeader .headerLogoArea {
    position: relative;
    margin: 0;
    z-index: 30;
  }
  .headerMenuButton {
    position: relative;
    z-index: 40;
  }
  #header_modal {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 101vh;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display:none;
  }
  #header_modal:before {
    content: "";
    position: fixed;
    z-index: 6;
    width: 100%;
    height: 50vh;
    bottom: 52vh;
    background: #fff;
  }
}

@media print, not screen and (max-width: 768px) {
  .headerMenuButton {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .humbergerMenu {
    display: block;
    position: relative;
    background-color: transparent;
    border-color: transparent;
    position: relative;
    width: 34px;
    height: 32px;
    z-index: 1;
  }
  .humbergerMenu .line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 4px;
    border-radius: 20px;
    margin: 0 0 0 -10px;
    background-color: var(--app-primary-icon-color);
    transform-origin: center;
    transition: all 0.4s ease;
  }
  .humbergerMenu .line:nth-of-type(1) {
    transform: translate(0, -10px);
  }
  .humbergerMenu .line:nth-of-type(2) {
    transform: translate(0, -50%);
  }
  .humbergerMenu .line:nth-of-type(3) {
    transform: translate(0, 6px);
  }
  .siteHeader.active .humbergerMenu .line {
    margin-bottom: 0;
  }
  .siteHeader.active .humbergerMenu .line:first-of-type {
    transform: translate(0, -50%) rotate(45deg);
  }
  .siteHeader.active .humbergerMenu .line:nth-of-type(2) {
    transform: translate(0, -50%) rotate(315deg);
  }
  .siteHeader.active .humbergerMenu .line:last-of-type {
    transform: translate(0, -50%) rotate(45deg);
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {

  .headerNav {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100vh - 58px);
    padding-bottom: 94px;
    box-sizing: border-box;
    transform: translateY(-100%);
    transition: transform ease 0.4s;
    display: block;
    overflow: auto;
    z-index: 9;
  }
  .siteHeader.active .headerNav {
    transform: translateY(58px);
  }
  .headerNav .linkArea {
    padding: 42px 30px 40px;
    border-radius: 0 0 40px 40px;
    box-shadow: 0px 10px 20px #00000033;
    background-color: #fff;
  }
}
@media not screen and (max-width: 768px) {
  .headerNav .linkAreaItem {
    border-radius: 13px;
    transition: 0.5s;
  }
  .headerNav .linkAreaItem:hover {
    background-color: var(--app-header-sub-button-color);
    transition: 0.5s;
  }
}
.headerNav .linkAreaItem.open {
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.headerNav .linkAreaItem:not(:last-of-type) {
  margin-bottom: 14px;
}
.headerNav .linkAreaItem a {
  color: var(--app-primary-text-color);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.533;
}
.headerNav .linkAreaItem .headerNavItem {
  padding: 15px 15px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.headerNav .linkAreaItem .headerNavItem .logo {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.headerNav .linkAreaItem .headerNavItem.hNews .batch {
  background: var(--app-strong-color);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  width: 15px;
  height: 15px;
  padding: 5px;
  font-size: 13px;
  line-height: 1;
  margin-left: 20px;
  white-space: nowrap;
}
.headerNav .linkAreaItem .headerNavItem.hNews .batch.hide {
  display: none;
}
.headerNav .linkAreaItem .headerNavItem.arrow::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--app-primary-icon-color);
  border-right: 2px solid var(--app-primary-icon-color);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  margin-left: 10px;
  transition: ease 0.4s;
}
.headerNav .linkAreaItem .headerNavListContent {
  display: grid;
  grid-template-rows: 0fr;
  transition: all cubic-bezier(0.45, 0, 0.55, 1) 0.4s;
  opacity: 0;
}
.headerNav .linkAreaItem .headerNavListContent .headerNavList {
  overflow: hidden;
}
.headerNav .linkAreaItem .headerNavListContent .headerNavList .headerNavListItem {
  transition: 0.5s;
  margin: 0px 10px 10px;
}
.headerNav .linkAreaItem .headerNavListContent .headerNavList .headerNavListItem:first-of-type {
  transition: 0.5s;
}
.headerNav .linkAreaItem .headerNavListContent .headerNavList .headerNavListItem:last-child {
  margin-bottom: 2px;
}
.headerNav .linkAreaItem .headerNavListContent .headerNavList .headerNavListItem a {
  display: block;
  padding: 5px 10px;
}
.headerNav .linkAreaItem.open .headerNavList {
   padding-bottom: 8px;
}
@media not screen and (max-width: 768px) {
  .headerNav .linkAreaItem.open .headerNavItem:hover {
    background-color: transparent;
  }
}
@media screen and (max-width: 768px) {
  .headerNav .linkAreaItem .headerNavItem {
    padding: 10px 20px;
    border-radius: 13px;
    font-size: 1.7rem;
  }
  .headerNav .linkAreaItem .headerNavItem.currentpage,
  .headerNav .linkAreaItem .headerNavListContent .headerNavList .headerNavListItem a.currentpage {
    background-color: var(--app-header-sub-button-color);
  }
  .headerNav .linkAreaItem .headerNavItem .logo {
    width: 26px;
    height: auto;
    margin-right: 20px;
  }

  .headerNav .linkAreaItem .headerNavList {
    padding-bottom: 8px;
  }
}
.headerNav .linkAreaItem.open .headerNavItem.arrow::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.headerNav .linkAreaItem.open .headerNavListContent {
  grid-template-rows: 1fr;
  opacity: 1;
}
.headerNav .linkAreaItem.open .headerNavListContent .headerNavList {
  overflow: hidden;
}
.headerNav .linkAreaItem.open .headerNavListContent .headerNavList .headerNavListItem {
  border-radius: 13px;
}
@media not screen and (max-width: 768px) {
  .headerNav .linkAreaItem.open .headerNavListContent .headerNavList .headerNavListItem:hover {
    background-color: rgba(20, 90, 92, 0.15);
  }
}
.headerNav .linkAreaItem.open .headerNavListContent .headerNavList .headerNavListItem a {
  border-radius: 13px;
  font-weight: normal;
  text-decoration: none;
}


/*footer
--------------------------------------------------------------- */
.siteFooter {
  text-align: center;
  padding: 30px 0;
}
.siteFooter .copy {
  color: #2e2c6d;
  font-size: 1.4rem;
}


/*js controls
--------------------------------------------------------------- */
[data-toggle-state="hide"] {
  display: none !important;
}

/* 
--------------------------------------------------------------- */
@media not screen and (max-width: 768px) {}
@media screen and (max-width: 768px) {}