@charset "UTF-8";
/* ===============================================
#擬似要素中央配置 mixin
=============================================== */
/* ===============================================
# navigation
=============================================== */
:root {--key_color: #d1202d;--ac_color: #d1202d;--button-color:#000;--button-text-color:#fff;--flex-gap:30px;}

/* ===============================================
# SNSカラー
=============================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}

article, aside, dialog, figure, footer, header, hgroup, nav, section {display: block;}

ul li {list-style: none;}

input, select {vertical-align: middle;}

img {height: auto;width: 100%;line-height: 0;display: block;}

:root {
	--keyc01:#1EB9EE;
	--keyc02:#0774C2;
	--fontColor: #000;
	--fontBase: "Noto Sans JP", sans-serif;
	--font01: "Poppins", "Noto Sans JP", sans-serif;
}

body {font-size: 16px;font-weight: 600;line-height: 1.6em;color: var(--fontColor);font-family: var(--fontBase);position: relative;background: #fff;}
body.menu_open {overflow: hidden;}
body .container {overflow-x: hidden;}

* {box-sizing: border-box;}

body {
 
}

a {color: var(--keyc01);text-decoration: none;transition: 0.2s;}
/* ===============================================
# module
=============================================== */
.sp_only {display: none;}
@media screen and (max-width: 750px) {.sp_only {  display: block;}
}

.pc_only {display: block;}
@media screen and (max-width: 750px) {.pc_only {  display: none;}
}

.anime, .anime-no-hidden, .onload {opacity: 0;visibility: hidden;}
.anime.js-play, .anime-no-hidden.js-play, .onload.js-play {opacity: 1;visibility: visible;}

.section_wrap:not(:last-of-type) {margin-bottom: 240px;}
@media screen and (max-width: 750px) {.section_wrap:not(:last-of-type) {  margin-bottom: 80px;}
}

.anchor-clear {margin-top: -130px;padding-top: 130px;}

.sec_inner {max-width: 1160px;margin: 0 auto;width: 80%;}

.flex-box {display: flex;flex-wrap: wrap;gap: var(--flex-gap);}
.flex-box .box01 {width: 100%;}
.flex-box .box02 {width: calc((100% - var(--flex-gap)) / 2);}
.flex-box .box03 {width: calc((100% - var(--flex-gap) * 2) / 3);}
.flex-box .box04 {width: calc((100% - var(--flex-gap) * 3) / 4);}
@media screen and (max-width: 750px) {.flex-box .box04 {  width: calc(100% - var(--flex-gap) / 2);}
}
.flex-box.center {justify-content: center;}

.bold {font-weight: bold;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.txt {font-size: 20px;line-height: 1.6em;}
.txt-s {font-size: 0.6em;line-height: 1em;}
.mb-05em {margin-bottom: 0.5em;}
.mb-1em {margin-bottom: 1em;}
.mb-2em {margin-bottom: 2em;}

/* textList(div等で囲む) */
p.text-list,
.text-list ul li {padding: 0 0 3px 1.1em;position: relative;}

p:not(:last-of-child).text-list {margin-bottom: 1em;}

.text-list ul li:not(:last-of-child) {margin-bottom: 5px;}

p.text-list::before,
.text-list ul li::before {content: "※";position: absolute;left: 0;}

p.text-list-dotted::before,
.text-list-dotted ul li::before {content: "・";}

p.text-list-circle::before,
.text-list-circle ul li::before {content: "●";}

p.text-list-square::before,
.text-list-square ul li::before {content: "■";}

p.text-list-counter,
.text-list-counter ul li {padding-left: 1.4em;}

p.text-list-counter::before,
.text-list-counter ul li::before {counter-increment: number 1;content: "" counter(number) "";}

.text-list-counter ol {list-style-type: decimal;padding-left: 1.2em;}

@media screen and (max-width: 768px) {.anchor-clear {  margin-top: -80px;  padding-top: 80px;}
  .section-wrap:not(:last-of-type) {  margin-bottom: 120px;}
  .flex-box .box01 {  width: 100%;}
  .flex-box .box02 {  width: 100%;}
  .flex-box .box02:nth-of-type(odd) {  margin-right: inherit;  margin-bottom: 5%;}
  .sec_inner {  width: 92%;}
  .text-list ul li {  font-size: 12px;}
}
/* ================================= ヘッダー =================================== */
.header {position: fixed;background: transparent;width: 100%;z-index: 1000;}
.header .header_logo {display: block;width: min(205px, 18vw);position: absolute;top: 10px;left: 12px;}
.header .header_logo:hover {filter: brightness(1.2);}
@media screen and (max-width: 768px) {.header {  background: none;  pointer-events: none;}
}
.header__inner {display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 8px 20px;}
@media screen and (max-width: 768px) {.header__inner {  pointer-events: none;}
}
.header__title {font-size: 20px;}
@media screen and (max-width: 768px) {.header__title {  position: absolute;  top: 20px;  left: 20px;  pointer-events: all;}
}

.nav {margin-left: auto;pointer-events: all;}
.nav__lists {display: flex;gap: 0 4px;}
.nav__list a {padding: 0.3em 1.2em;display: block;color: var(--keyc02);font-family: var(--font01);font-size: min(16px, 1.4vw);font-weight: 900;line-height: 1.5em;background-color: #fff;border: 2px solid var(--keyc02);border-radius: 50px;}
.nav__list a:hover {filter: brightness(1.3);}
.nav__bg {display: none;transition: 0.5s all;}
.nav__trigger {display: none;transition: 0.2s all;}
@media screen and (max-width: 768px) {.nav__trigger {  display: block;  position: absolute;  width: 35px;  top: 20px;  right: 20px;  pointer-events: all;}
  .nav__trigger:before {  content: "";  position: absolute;  width: 44px;  height: 44px;  background: var(--keyc01);  border-radius: 50%;  top: -9px;  left: -4px;}
  .nav__trigger span {  display: inline-block;  vertical-align: middle;  position: relative;  width: 100%;  height: 2px;  background-color: transparent;}
  .nav__trigger span::before {  content: "";  display: block;  width: 100%;  height: 2px;  position: absolute;  background: #fff;  transition: all 0.3s;  margin-top: -4px;}
  .nav__trigger span::after {  content: "";  display: block;  width: 100%;  height: 2px;  position: absolute;  background: #fff;  transition: all 0.3s;  margin-top: 4px;}
}
@media screen and (max-width: 768px) {.nav {  margin-left: inherit;  width: 100%;  pointer-events: all;}
  .nav__lists {  flex-direction: column;  margin: 0 auto;  width: min(350px, 100%);  gap: 2vw 0;}
  .nav__list {  text-align: center;}
  .nav__list a {  font-size: 20px;  line-height: 1.4em;}
  .nav__bg {  display: block;  opacity: 0;}
  .nav__active .nav__trigger span {  background: none;}
  .nav__active .nav__trigger span::before {  content: "";  display: block;  width: 100%;  height: 2px;  position: absolute;  background: #fff;  transition: all 0.3s;  margin-top: 0;  transform: rotate(45deg);}
  .nav__active .nav__trigger span::after {  content: "";  display: block;  width: 100%;  height: 2px;  position: absolute;  background: #fff;  transition: all 0.3s;  margin-top: 0;  transform: rotate(-45deg);}
  .nav__active .nav__bg {  width: 100%;  height: 100vh;  height: 100dvh;  background: #fff;  opacity: 0.9;  position: absolute;  top: 0;  z-index: -1;  pointer-events: none;}
  .nav__active .nav_wrap {  transition: 0.2s;  visibility: visible;  opacity: 1;  pointer-events: all;}
}

.sns_wrap {margin-left: 20px;}
.sns_wrap ul {display: flex;align-items: center;}
.sns_wrap ul li {display: inline-block;width: 30px;}
.sns_wrap ul li:not(:last-of-type) {margin-right: 6px;}
.sns_wrap ul li a:hover {filter: brightness(1.3);}

.nav_wrap {display: contents;}

@media screen and (max-width: 768px) {.header_logo {  width: min(205px, 38vw) !important;}
  .nav_wrap {  display: block;  transition: 0.4s;  padding: 80px 0;  visibility: hidden;  opacity: 0;  pointer-events: none;  overflow-y: scroll;  height: 100vh;  width: 100%;}
  .nav_wrap::-webkit-scrollbar {  display: none;}
  .nav_wrap::-webkit-scrollbar-track {  display: none;}
  .nav_wrap .nav {  margin-bottom: 30px;}
  .sns_wrap {  margin: 0;}
  .sns_wrap ul {  justify-content: center;}
  .sns_wrap ul li {  width: 40px;}
  .sns_wrap ul li:not(:last-of-type) {  margin-right: 20px;}
}
/* ================================= ヘッダー =================================== */
/* ================================= ヘディング =================================== */
.heading {display: inline-block;position: relative;}

/* ================================= ヘディング =================================== */
/* ================================= ボタン周り =================================== */
.button {max-width: 500px;margin: 0 auto;}
.button a {display: block;width: 100%;background-color: var(--keyc02);padding: 1em;color: var(--button-text-color);text-align: center;font-weight: bold;border: 2px solid var(--button-text-color);border-radius: 50px;}

/* ================================= ボタン周り =================================== */
/* ================================= youtube =================================== */
.youtube {position: relative;padding-top: 56.25%;background: #000;}
.youtube iframe {position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/* ================================= youtube =================================== */
/* ================================= カミスン =================================== */
.cs_img {position: relative;background: #ccc;aspect-ratio: 16/9;display: flex;justify-content: center;align-items: center;}
.cs_img::before {content: "COMING SOON";position: absolute;color: #fff;font-size: 2em;}

/* ================================= カミスン =================================== */
/******************************* error_404 *********************************/
#error_404 {text-align: center;width: 90%;max-width: 500px;margin: 0 auto;padding: 200px 0 200px;}
#error_404 .stit {font-size: 3em;line-height: 1.5em;margin-bottom: 0.5em;font-weight: bold;}
#error_404 .text {font-size: 1.2em;}
#error_404 .button-outer {margin-top: 3em;}

/******************************* error_404 *********************************/
/* ================================= モーダル =================================== */
.modal_trigger {cursor: pointer;}
.modal-box {position: fixed;width: 100%;height: 100vh;height: 100dvh;top: 0;right: 0;z-index: -1;transition: 0.5s ease;overflow: hidden;display: block;opacity: 0;visibility: hidden;background-position: center;}
.modal-box:before {content: "";position: fixed;background: #000;opacity: 0.9;background-size: cover;width: 100%;height: 100vh;height: 100dvh;top: 0;left: 0;z-index: -1;}
.modal-box .modal-inner {position: relative;width: 100%;height: 100%;display: flex;align-items: center;}
.modal-box .modal-inner .close {cursor: pointer;position: absolute;right: 20px;width: 50px;top: 20px;height: 40px;}
.modal-box .modal-inner .close span {position: relative;width: 100%;height: 100%;display: block;}
.modal-box .modal-inner .close span:before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);background: #fff;width: 50px;height: 1px;}
.modal-box .modal-inner .close span:after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);background: #fff;width: 50px;height: 1px;}
.modal-box .modal-inner .modal-content {width: 92%;max-width: 1000px;margin: 0 auto;position: relative;padding: 50px;border: 1px solid #535353;text-align: left;background: #000;}
.modal-box .modal-inner .modal-content .inner-scroll {overflow-y: scroll;max-height: calc(80vh - 40px);padding: 0 30px;}
.modal-box .modal-inner .modal-content .inner-scroll::-webkit-scrollbar {display: none;}
.modal-box .modal-inner .modal-content .inner-scroll::-webkit-scrollbar-track {display: none;}
.modal-box.active {opacity: 1;visibility: visible;right: 0;z-index: 1000;}
.modal-box.active .modal-inner {pointer-events: all;}

@media screen and (max-width: 768px) {.modal-box .modal-inner .modal-content {  padding: 30px;}
  .modal-box .modal-inner .modal-content .inner-scroll {  padding: 0;}
  .modal-box .modal-inner .close {  right: 0px;  top: -50px;}
}
/* ================================= モーダル =================================== */
/* ===============================================
# ニュース
=============================================== */
.news_wrap {width: 100%;padding: min(120px, 12vw) 0;background-color: rgba(30, 185, 238, 0.85);position: relative;z-index: 0;}
.news_wrap::before {content: "";position: absolute;background-color: transparent;background-image: radial-gradient(#ffffff 40%, transparent 40%), radial-gradient(#ffffff 40%, transparent 40%);background-size: 30px 30px;background-position: 0 0, 15px 15px;width: 100%;height: 100%;z-index: -1;opacity: 0.07;top: 0;left: 0;pointer-events: none;}

.news_inner {position: relative;z-index: 1;}
.news_inner ul {margin-bottom: min(50px, 8vw);}

.news .news_link {color: #fff;font-family: var(--font-noto);padding: 30px 0;position: relative;transition: 0.2s;border-bottom: 2px solid #fff;display: block;}
.news .news_link:hover {background-color: rgba(255, 255, 255, 0.1490196078);}
.news .news_link.disactive {pointer-events: none;}
.news:first-of-type {border-top: 2px solid #fff;}
.news .date_block {color: var(--keyc01);margin-right: 50px;font-weight: bold;z-index: 2;position: relative;font-family: var(--font-teko);}
.news .date_block .label {color: #98E5FF;display: inline-block;font-size: 14px;line-height: 1.2em;}
.news .news_title {position: relative;width: 80%;}
.news .arrow {position: absolute;content: "";width: 0;height: 0;border-top: 7px solid transparent;border-bottom: 7px solid transparent;border-left: 8px solid #5E5E5E;border-right: 0;top: 50%;right: 60px;transform: translateY(-50%);transition: 0.2s;}
.news:hover .news_link {opacity: 1;}
.news.in .news_link {color: var(--keyc02);border-color: var(--keyc02);}
.news.in:first-of-type {border-top: 2px solid var(--keyc02);}
.news.in .date_block .label {color: #4cd2ff;}

.single_block .news {font-family: var(--font-noto);}
.single_block .news:first-of-type {border-top: none;}
.single_block .news_title {border-bottom: 1px solid var(--keyc02);font-size: 20px;line-height: 1.6em;font-weight: bold;margin-bottom: 50px;padding-bottom: 35px;width: 100%;}
.single_block .date_block {margin-bottom: 0.6em;font-family: var(--font-teko);}
.single_block .date_block .date {color: var(--keyc01);font-weight: bold;}
.single_block .news_content {margin-bottom: 60px;}
.single_block .news_content p {line-height: 1.8em;}
.single_block .news_content p:not(:last-of-type) {margin-bottom: 1.6em;}
.single_block .news_content h3 {border-left: 3px solid var(--keyc01);padding-left: 20px;margin-bottom: 1.4em;}
.single_block .news_content a {text-decoration: underline;color: var(--keyc01);}
.single_block .news_content blockquote {background: rgba(244, 244, 244, 0.7215686275);padding: 20px;margin-bottom: 1.4em;}

@media screen and (max-width: 768px) {.news .news_link {  display: block;  padding: 20px 10px 20px 10px;}
  .news .arrow {  right: 20px;}
  .news .date_block {  margin-bottom: 0.3em;}
  .news .news_title {  width: 100%;  font-size: 14px;}
  .news:hover .arrow {  right: 10px;}
  .single_block .news_content p {  font-size: 14px;}
  .single_block .news .news_title {  padding-bottom: 20px;  margin-bottom: 26px;}
}
/*# sourceMappingURL=common.css.map */