@charset "UTF-8";

/******************************************************************

StyleSheet: ベーススタイル

******************************************************************/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

a {
  color: #000;
  display: block;
}

a:hover {
  opacity: 0.7;
}

.txt_center {
	text-align: center !important;
}

.txt_left {
	text-align: left !important;
}

.txt_right {
	text-align: right !important;
}

.img_full {
	width: 100vw !important;
	min-width:375px !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
	padding-right: calc(50vw - 50%) !important;
	padding-left: calc(50vw - 50%) !important;
}

.no_padding {
	padding: 0 !important;
}

.padding_lr_20 {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.no_margin {
	margin: 0 !important;
}

.m_t10 {
	margin-top: 10px !important;
}

.m_t20 {
	margin-top: 20px !important;
}

.m_t30 {
	margin-top: 30px !important;
}

.m_t40 {
	margin-top: 40px !important;
}

.m_t50 {
	margin-top: 50px !important;
}

.m_l20 {
	margin-left: 20px !important;
}

.m_r20 {
	margin-right: 20px !important;
}

.m_t-10 {
	margin-top: -10px !important;
}

.m_t-20 {
	margin-top: -20px !important;
}

.m_t-30 {
	margin-top: -30px !important;
}

main {
	min-width: 375px;
	overflow: hidden;
}

.content__txt b {
	font-weight: bold !important;
}


/********************************
 ディスプレイ用
*********************************/
.lg-flex {
  display: none;
}
@media screen and (min-width: 1024px) {
  .lg-flex {
    display: flex;
  }
}

.lg-block {
  display: none;
}
@media screen and (min-width: 1024px) {
  .lg-block {
    display: block;
  }
}

/********************************
 共通クラス
*********************************/
.flex-row {
  display: flex;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.hidden {
  display: none;
}

.background-set {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#global-container {
  min-width: 360px;
}

@media (min-width: 769px) {
  #global-container {
    background-image: url(../../images/bg-body.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

#container {
  margin: 0 auto;
}

.wrap {
  width: 93%;
  margin: 0 auto;
}

.main-ttl {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}

.com-ttl {
  text-align: center;
  line-height: 1.5;
  font-size: 30px;
  font-weight: bold;
}

.single-ttl {
  line-height: 1.5;
  font-size: 23px;
  font-weight: bold;
}

.com-cover.top {
  top: 0;
  left: 0;
  z-index: -1;
}
.com-cover.under {
  bottom: 0;
  right: 0;
  z-index: -1;
}

/* お知らせ カテゴリー */
.cat-menu {
  position: relative;
  z-index: 1;
}
.cat-menu__inner {
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
}

.cat-com {
  font-size: 11px;
  padding: 5px 8px;
  max-width: -moz-max-content;
  max-width: max-content;
  color: white;
}
.cat-com.all {
  background-color: #000;
}
.cat-com.set {
  background-color: #00afb7;
}
.cat-com.pre {
  background-color: #f1c833;
}
.cat-com.others {
  background-color: #e50038;
}
.cat-com.event {
  background-color: #E57373;
}

/* トップmoreボタン */
.com-more {
  font-size: 14px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  max-width: -moz-max-content;
  max-width: max-content;
  margin-left: auto;
}

.com-more span {
  color: white;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-radius: 50%;
}
.com-more span img {
  width: 8px;
}

/* 各ボタン */
.com-btn {
  font-size: 14px;
  width: 100%;
  display: flex;
  height: 36px;
  justify-content: center;
  align-items: center;
  color: white;
  border: none;
  background: #036eb6;
  max-width: 160px;
  text-align: center;
}

.com-btn span::before {
  position: absolute;
  content: "→";
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.com-btn.red {
  background-color: #e50038;
}

.com-btn.red span::before {
  content: "";
}

.login-btn {
  position: relative;
  font-weight: bold;
  color: white;
  font-size: 12px;
  width: 30%;
  border-radius: 30px;
  max-width: 107px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  background-color: #036eb7;
}
.login-btn::after {
  position: absolute;
  content: "";
  background-image: url(../../images/arrow-left.png);
  width: 8px;
  height: 8px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

.login-btn::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/********************************
 YouTube 768px
*********************************/

.slider .slider_item {
	width:80%;
	border-radius:10px;
}
.slider .slider_item + .slider_item {

}

.slick-slide img {
	padding:0 15px;
}

.prev-arrow {
	
}

.next-arrow {
	right:0;
	
}

.slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 100;
	transform: translateY(-50%);
	max-width: 12%;
}

.slick-disabled {
	display: none !important;
}

.slick-dots > li:only-child {
    display: none !important;
}

.slider2 .slider_item + .slider_item {
}

.slider2 .slide{
}


.slick-dots li button:before{
	font-size:12px !important;
}

.slick-dots {
    bottom: -40px;
}

.slider_item {
	position:relative;
}

.lity-content .normal_size iframe {
    aspect-ratio: 16 / 9 !important;
	width:60vw !important;
    height: auto !important;
}


.lity-close {
    display: block;
    margin: 20px auto 0;
    width: 40px;
    height: 40px;
    position: relative;
    background-image: url(../../images/modal_close.png);
	background-size:cover;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.lity-close:hover {
	opacity:1;
}


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

.lity-content iframe {
    aspect-ratio: 9 / 16 !important;
	max-width:300px !important;
    height: auto !important;
}

.lity-content .normal_size iframe {
    aspect-ratio: 16 / 9 !important;
	max-width:300px !important;
	width: auto !important;
    height: auto !important;
}

.lity-close {
    margin: 15px auto 0;
    width: 30px;
    height: 30px;
}


}


/********************************
 共通クラス 768px
*********************************/
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #container {
    max-width: 768px;
  }
  .main-ttl {
    font-size: 45px;
  }
  .com-ttl {
    font-size: 45px;
  }
  .single-ttl {
    font-size: 30px;
  }
  .cat-menu__inner {
    gap: 20px;
  }
  .cat-com {
    padding: 10px;
    font-size: 20px;
  }
  .com-more {
    font-size: 24px;
  }
  .com-more span {
    width: 30px;
    height: 30px;
  }
  .com-more span img {
    width: 10px;
  }
  .com-btn {
    font-size: 20px;
    max-width: 360px;
    height: 56px;
  }
}

/********************************
 共通クラス 1024px
*********************************/
@media (min-width: 1024px) {
  #container {
    max-width: 385px;
	padding-top: 50px;
  }
  
}


/********************************
 404 Not Found
*********************************/

#page_404 .main-ttl {
	font-size: 60px;
	padding-bottom: 0;
	font-weight:normal;
}

#page_404 .main-ttl + p {
	margin-top:-20px;
	margin-bottom:40px;
	font-weight:normal;
	font-size:18px;
	text-align:center;
}

#page_404 #single .content__txt {
	font-size:12px;
	text-align:center;
	line-height:2;
}

#page_404 #single .content__txt span {
	font-size:14px;
	text-align:center;
}


/********************************
 404 Not Found 768px
*********************************/
@media screen and (min-width: 768px) and (max-width: 1023px) {
#page_404 .main-ttl {
	font-size: 100px;
	padding-bottom: 0;
	font-weight:normal;
}

#page_404 .main-ttl + p {
	margin-top:-20px;
	margin-bottom:40px;
	font-weight:normal;
	font-size:35px;
	text-align:center;
}

#page_404 #single .content__txt {
	font-size:20px;
	text-align:center;
	line-height:2;
}

#page_404 #single .content__txt span {
	font-size:26px;
	text-align:center;
}
}