@charset "UTF-8";

/*---------------------------------
  Google Fonts
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');

.Sawarabi { font-family: 'Sawarabi Gothic', sans-serif; }
.NotoSans { font-family: 'Noto Sans JP', sans-serif; }
.NotoSerif { font-family: 'Noto Serif JP', serif; }
.MPlusRounded { font-family: 'M PLUS Rounded 1c', sans-serif; }
.HinaMincho { font-family: 'Hina Mincho', serif; }
.PlayfairDisplay { font-family: 'Playfair Display', serif; }
.Cinzel { font-family: 'Cinzel', serif; }
.BIZUDPGothic { font-family: 'BIZ UDPGothic', sans-serif; }

/*---------------------------------
  表示・非表示（PC / TB / SP）
---------------------------------*/
.pconly {
	display: block;
}
.tbonly {
	display: block;
}
.sponly {
	display: none !important;
}
.pcnone {
	display: none;
}
@media screen and (max-width: 1023px) {
.pconly {
	display: block;
}
.tbonly {
	display: block;
}
.sponly {
	display: none !important;
}
.pcnone {
	display: none;
}
}
@media screen and (max-width: 767px) {
.pconly {
	display: none !important;
}
.tbonly {
	display: none !important;
}
.sponly {
	display: block;
}
.pcnone {
	display: inline-block;
}
.spnone {
	display: none;
}
}

/*---------------------------------
  html/bodyの設定
---------------------------------*/
html {
	font-size: 62.5%; /* 62.5%は10px */
	font-family: 'BIZ UDPGothic', sans-serif;
}
body {
	color: #676767;
	background: #FFFFFF;
	overflow-x: hidden;
	word-wrap: break-word;
}
@media screen and (max-width: 767px) {
html {
	font-size: 62.5%; /* 62.5%は10px */
	font-family: 'BIZ UDPGothic', sans-serif;
}
body {
	color: #676767;
	background: #FFFFFF;
	overflow-x: hidden;
	word-wrap: break-word;
}
}

/*---------------------------------
  画像
---------------------------------*/
#maincontentswrap01 img {
   vertical-align:bottom;
   pointer-events: none;
}
#maincontentswrap01 a img {
	border-style:none;
}
#maincontentswrap01 img {
	width:100%;
	height:auto;
	image-rendering: auto;
}
#maincontentswrap01 img[src$=".svg"] {
    width: 100%;
}

#k-maincontentswrap01 img {
   vertical-align:bottom;
   pointer-events: none;
}
#k-maincontentswrap01 a img {
	border-style:none;
}
#k-maincontentswrap01 img {
	width:100%;
	height:auto;
	image-rendering: auto;
}
#k-maincontentswrap01 img[src$=".svg"] {
    width: 100%;
}


/*---------------------------------
  テキストリンク
---------------------------------*/
#maincontentswrap01 a:link {
	color:#003699;
	text-decoration:underline;
	transition: 1.0s ;
}
#maincontentswrap01 a:visited {
	color:#003699;
	text-decoration:underline;
	transition: 1.0s ;
}
#maincontentswrap01 a:active {
	color:#53a1d6;
	text-decoration:underline;
	transition: 1.0s ;
}
#maincontentswrap01 a:hover {
	color:#53a1d6;
	text-decoration:underline;
	transition: 1.0s ;
}

#k-maincontentswrap01 a:link {
	color:#003699;
	text-decoration:underline;
	transition: 1.0s ;
}
#k-maincontentswrap01 a:visited {
	color:#003699;
	text-decoration:underline;
	transition: 1.0s ;
}
#k-maincontentswrap01 a:active {
	color:#53a1d6;
	text-decoration:underline;
	transition: 1.0s ;
}
#k-maincontentswrap01 a:hover {
	color:#53a1d6;
	text-decoration:underline;
	transition: 1.0s ;
}

/*---------------------------------
  テキストリンク
---------------------------------*/
a img {
	display: block;
}
a:link {
	color: #000000;
	text-decoration: underline;
	transition: 1.0s ;
}
a:visited {
	color: #000000;
	text-decoration: underline;
	transition: 1.0s ;
}
a:hover {
	color: #000000;
	text-decoration: underline;
	transition: 1.0s ;
}
a:active {
	color: #000000;
	text-decoration: underline;
	transition: 1.0s ;
}

/*---------------------------------
  フォントカラー
---------------------------------*/
.font-white01 { color: #ffffff; }
.font-blue01 { color: #2B457D; }
.font-black01 { color: #000000; }


/*---------------------------------
  テキスト頭揃え
---------------------------------*/
.indent01-01 {
	text-indent: -1em;
	padding: 0 0 0 1em;
}
.indent01-05 {
	text-indent: -1.5em;
	padding: 0 0 0 1.5em;
}

/*---------------------------------
  文字間調整用
---------------------------------*/
.letterspace01 {
	letter-spacing: -0.02em;
}

/*---------------------------------
  テキスト位置
---------------------------------*/
.textleft {
	text-align: left !important;
}
.textcenter {
	text-align: center !important;
}
.textright {
	text-align: right !important;
}

/*---------------------------------
  アンカー位置設定
---------------------------------*/
#link01,
#link02,
#link03,
#link04,
#link05,
#link06,
#link07,
#link08,
#link09,
#link10 {
	margin: -63px 0 0;
	padding: 63px 0 0;
}

/*---------------------------------
  改行設定
---------------------------------*/
.break:before {
	content: "\A";
	white-space: pre;
}
.pcno-break:before {
	content: "";
	white-space: pre;
}
.spno-break:before {
	content: "\A";
	white-space: pre;
}
@media screen and (max-width: 767px) {
.break:before {
	content: "\A";
	white-space: pre;
}
.pcno-break:before {
	content: "\A";
	white-space: pre;
}
.spno-break:before {
	content: "";
	white-space: pre;
}
}

/*---------------------------------
  ローディング
---------------------------------*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../common_img/loadingbg.jpg");
	background-size: 10%;
	z-index: 999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定 */
#splash-logo img {
	width:30%;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*画面遷移アニメーション*/
/*画面遷移の後現れるコンテンツ設定*/
#wrapper{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #wrapper{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
@media screen and (max-width: 767px) {
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../common_img/loadingbg.jpg");
	background-size: 30%;
	z-index: 999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定 */
#splash-logo img {
	width:50%;
}
}


/*---------------------------------
  メインコンテンツ
---------------------------------*/
#maincontentswrap01 {
	width: 100%;
	background: url("../common_img/allbg_pc.jpg") repeat-y center center;
	background-size: contain;
	padding: 45px 65px 10px;
	position: relative;
}
#k-maincontentswrap01 {
	width: 100%;
	background: url("../common_img/allbg_pc.jpg") repeat-y center center;
	background-size: contain;
	padding: 45px 65px 10px;
	position: relative;
}
@media screen and (max-width: 767px) {
#maincontentswrap01 {
	width: 100%;
	background: url("../common_img/allbg_sp.jpg") repeat-y center center;
	background-size: contain;
	padding: 4vw 0 1.3333333333333335vw;
	position: relative;
}
#k-maincontentswrap01 {
	width: 100%;
	background: url("../common_img/allbg_sp.jpg") repeat-y center center;
	background-size: contain;
	padding: 4vw 0 1.3333333333333335vw;
	position: relative;
}
}


/*---------------------------------
  ズーム
---------------------------------*/
.zoom {
  animation: zoomIn 0.7s ease-in-out forwards;/*-0.7秒かけてズームインさせる-*/
  animation-delay: 2s;/*画面が表示されて2秒後に実行-*/
  transform: scale(0,0);
}

@keyframes zoomIn {
  100% {
    transform: scale(1,1);
  }
}


/*---------------------------------
  ロゴ
---------------------------------*/
#logo {
	width: 30%;
	margin: 0 auto;
    padding: 0 0 20px;
}
@media screen and (max-width: 767px) {
#logo {
	width: 60vw;
	margin: 0 auto;
	padding: 0 0 2.666666666666667vw;
}
}


/*---------------------------------
  サイドスライドナビ
---------------------------------*/
#side-navallwrap {
	display: block;
}

#side-openbtnwrap {
	position: relative;
	cursor: pointer;
}
#side-openbtninner {
	position: fixed;
	width: auto;
    height: auto;
	top: 7%;
	right: 0;
	margin: 0;
    z-index: 9999;/*ボタンを最前面に*/
}
#side-openbtninner img {
	width: 50px;
	height: auto;
	filter: drop-shadow(-5px 0px 8px rgba(255,255,255,0.3));
}
#side-openbtnwrap.side-active #side-openbtninner img {
	width: 50px;
	height: auto;
}
#side-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top: 0;
    right: -120%;
	width: 350px;
    height: 100vh;/*ナビの高さ*/
	background: #606060;
	opacity: 1.00;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#side-nav.side-panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#side-nav.side-panelactive #side-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#side-navwrap {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
	width: 100%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.side-navinner01 {
	display: table;
	width: 90%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 1.3rem;
	line-height: 300%;
	font-weight: 400;
	color: #ffffff;
}
.side-navinner01 ul li a:link {
	color: #ffffff;
	background: none;
	text-decoration: none;
	padding: 2px 8px;
	margin: 0 5px;
	transition: 1.0s ;
}
.side-navinner01 ul li a:visited {
	color: #ffffff;
	background: none;
	text-decoration: none;
	transition: 1.0s ;
}
.side-navinner01 ul li a:hover {
	color: #606060;
	background: #ffffff;
	text-decoration: none;
	-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.0));
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.0));
	transition: 1.0s ;
}
.side-navinner01 ul li a:active {
	color: #ffffff;
	background: #606060;
	text-decoration: none;
	transition: 1.0s ;
}
.side-navinner01 ul li img {
    width: 240px;
    margin: 0 auto;
    padding: 0 0 10px;
}
.side-navinner01 ul li {
    width: 100%;
}
@media screen and (max-width: 767px) {
#side-navallwrap {
	display: block;
}

#side-openbtnwrap {
	position: relative;
	cursor: pointer;
}
#side-openbtninner {
	position: fixed;
	width: auto;
    height: auto;
	top: 70px /*20%*/;
	right: 0;
	margin: 0;
    z-index: 9999;/*ボタンを最前面に*/
}
#side-openbtninner img {
	width: 40px;
	height: auto;
	filter: drop-shadow(-5px 0px 8px rgba(255,255,255,0.3));
}
#side-openbtnwrap.side-active #side-openbtninner img {
	width: 40px;
	height: auto;
}
#side-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top: 0;
    right: -120%;
	width: 100%;
    height: 100vh;/*ナビの高さ*/
	background: #606060;
	opacity: 1.00;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#side-nav.side-panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#side-nav.side-panelactive #side-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#side-navwrap {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
	width: 100%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.side-navinner01 {
	display: table;
	width: auto;
	max-width: 90%;
	margin: 0 auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 300%;
	font-weight: 400;
	color: #ffffff;
}
.side-navinner01 ul li a:link {
	color: #ffffff;
	background: none;
	text-decoration: none;
	padding: 4px 10px;
	margin: 0 5px;
	transition: 1.0s ;
}
.side-navinner01 ul li a:visited {
	color: #ffffff;
	background: none;
	text-decoration: none;
	transition: 1.0s ;
}
.side-navinner01 ul li a:hover {
	color: #606060;
	background: #ffffff;
	text-decoration: none;
	-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.0));
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.0));
	transition: 1.0s ;
}
.side-navinner01 ul li a:active {
	color: #ffffff;
	background: #606060;
	text-decoration: none;
	transition: 1.0s ;
}
.side-navinner01 ul li:nth-child(1) {
    width: 40%;
    margin: 0 auto;
    padding: 0 0 10px;
    text-align: center;
}
.side-navinner01 ul li img {
    width: 100%;
}
}


/*---------------------------------
  イベントスケジュールボタン
---------------------------------*/
#eventschedulebtnwrap01 {
    width: 480px;
    margin: 0 auto;
    padding: 0 0 20px;
}
#eventschedulebtnwrap01 svg {
    width: 480px;
    height: auto;
    margin: 0 auto;
}
#eventschedulebtnwrap01 a:hover {
    opacity: 0.6;
	transition: 1.0s;
}
@media screen and (max-width: 767px) {
#eventschedulebtnwrap01 {
    width: 60vw;
    margin: 0 auto;
    padding: 0 0 2.666666666666667vw;
}
#eventschedulebtnwrap01 svg {
    width: 60vw;
    height: auto;
    margin: 0 auto;
}
#eventschedulebtnwrap01 a:hover {
    opacity: 0.6;
	transition: 1.0s;
}
}


/*---------------------------------
  コンテンツ（共通）
---------------------------------*/
.contentswrap01 {
	width: 100%;
	padding: 0 0 20px;
	display: block;
}
.contentswrap01:after {
	content: "";
	clear: both;
	display: block;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
.contentsinner01 {
	width: 80%;
	margin: 0 auto;
    padding: 0 0 40px;
}
.youtubewrap01 {
    width: 40vw;
    margin: 0 auto;
}
.youtubewrap01 iframe {
    width: 100%;
    height: 22.5vw;
}
/*---------------------------------
  もと2カラム（2023.02.01変更前）
.contentswrap01 {
	width: 100%;
	padding: 0 0 20px;
	display: table;
}
.contentswrap01:after {
	content: "";
	clear: both;
	display: block;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
.contentsinner01 {
	display: table-cell;
	width: calc(100% - 40%);
	vertical-align: middle;
}
.contentsinner01:nth-child(2) {
	width: 40%;
}
---------------------------------*/
@media screen and (max-width: 767px) {
.contentswrap01 {
	width: 100%;
	padding: 0 0 2.666666666666667vw;
	display: block;
}
.contentswrap01:after {
	content: "";
	clear: both;
	display: block;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
.contentsinner01 {
	display: block;
	width: 96%;
	margin: 0 auto;
    padding: 0 0 2.666666666666667vw;
}
.youtubewrap01 {
    width: 74.66666666666667vw;
    margin: 0 auto;
}
.youtubewrap01 iframe {
    width: 100%;
    height: 42vw;
}
/*---------------------------------
  もと2カラム（2023.02.01変更前）
.contentswrap01 {
	width: 100%;
	padding: 0 0 2.666666666666667vw;
	display: block;
}
.contentswrap01:after {
	content: "";
	clear: both;
	display: block;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
.contentsinner01 {
	display: block;
	width: 96%;
	margin: 0 auto;
	vertical-align: middle;
}
.contentsinner01:nth-child(2) {
	width: 96%;
	padding: 5.333333333333334vw 0 0;
}
---------------------------------*/
}


/*---------------------------------
  キャッチ
---------------------------------*/
ul.catch01 {
	text-align: center;
}
ul.catch01 li {
	display: block;
	font-size: 1.6rem;
	line-height: 180%;
}
ul.catch01 li:nth-child(1) {
	font-size: 2.6rem;
	font-weight: 700;
	padding: 0 0 20px;
}
@media screen and (max-width: 767px) {
ul.catch01 {
	text-align: center;
}
ul.catch01 li {
	display: block;
	font-size: 2.1333333333333333vw;
	line-height: 180%;
}
ul.catch01 li:nth-child(1) {
	font-size: 3.4666666666666663vw;
	font-weight: 700;
	padding: 0 0 20px;
}
}
	

/*---------------------------------
  アイコンボックス
---------------------------------*/
.iconwrap01 {
	display: flex;
	justify-content: center;
    align-items: flex-start;
	padding: 0 0 20px;
}
.iconwrap01:last-child {
	padding: 0;
}
.iconwrap01 a {
	width: 100px;
	display: block;
	margin: 0 20px;
}
.iconwrap01 a:link {
	transition: 1.0s;
}
.iconwrap01 a:hover {
	transform: rotate(360deg);
}
@media screen and (max-width: 767px) {
.iconwrap01 {
	display: flex;
	justify-content: center;
    align-items: flex-start;
	padding: 0 0 2.666666666666667vw;
}
.iconwrap01:last-child {
	padding: 0;
}
.iconwrap01 a {
	width: 13.333333333333334vw;
	display: block;
	margin: 0 2.666666666666667vw;
}
.iconwrap01 a:link {
	transition: 1.0s;
}
.iconwrap01 a:hover {
	transform: rotate(360deg);
}
}


/*---------------------------------
  フッター
---------------------------------*/
#footer {
	width: 160px;
	position: fixed;
	bottom: 20px;
    right: 20px;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
}
#pagetop {
    width: 50%;
    margin: 0 auto 20px;
}
#pagetop img {
	width: 100%;
}
#footerlogo {
	width: 100%;
}
#footerlogo img {
    width: 100%;
	animation: anime1 1.0s ease 0.5s infinite alternate;
}
@media screen and (max-width: 767px) {
#footer {
	width: 16vw;
	position: fixed;
	bottom: 0 1.3333333333333335vw;
    right: 0 1.3333333333333335vw;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
}
#pagetop {
    width: 100%;
    margin: 0 auto 2.666666666666667vw;
}
#pagetop img {
	width: 100%;
}
#footerlogo {
	width: 100%;
}
#footerlogo img {
    width: 100%;
	animation: anime1 1.0s ease 0.5s infinite alternate;
}
}

@keyframes anime1 {
  from {
    transform: scale(0.8,0.8);
	opacity: 0.24;
  }
  to {
    transform: scale(1,1);
	opacity: 0.4;
  }
}

/*---------------------------------
  コピーライト
---------------------------------*/
#copyright {
	font-size: 1.2rem;
	text-align: center;
	position: fixed;
	bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
#copyright {
	font-size: 1.6vw;
	text-align: center;
	position: fixed;
	bottom: 1.3333333333333335vw;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
}


/*---------------------------------
  イベントページ
---------------------------------*/
#eventcatchwrap01 {
    width: 90%;
    margin: 0 auto;
}
.eventwrap01 {
	width: 80%;
    margin: 0 auto 40px;
	padding: 0 0 40px;
    border-bottom: 1px solid #606060;
	display: table;
	font-size: 2.6rem;
	font-weight: 700;
    line-height: 140%;
    text-align: center;
}
.eventwrap01:last-child {
	padding: 0;
    border-bottom: 0 solid #606060;
}
.eventinner01 {
	padding: 0 0 40px;
}
.eventinner01:last-child {
	padding: 0;
}
.eventinner01:after {
	content: "";
	clear: both;
	display: block;
}
.eventimg-2columns01 {
    width: 48%;
    float: left;
}
.eventimg-2columns01:nth-child(2) {
    width: 48%;
    float: right;
}
.eventinner01 iframe {
	width: 100%;
    height: 500px;
}
@media screen and (max-width: 767px) {
#eventcatchwrap01 {
    width: 98%;
    margin: 0 auto;
}
.eventwrap01 {
	width: 90%;
    margin: 0 auto 5.333333333333334vw;
	padding: 0 0 5.333333333333334vw;
    border-bottom: 1px solid #606060;
	display: table;
	font-size: 3.4666666666666663vw;
	font-weight: 700;
    line-height: 140%;
    text-align: center;
}
.eventwrap01:last-child {
	padding: 0;
    border-bottom: 0 solid #606060;
}
.eventinner01 {
	padding: 0 0 2.666666666666667vw;
}
.eventinner01:last-child {
	padding: 0;
}
.eventinner01:after {
	content: "";
	clear: both;
	display: block;
}
.eventimg-2columns01 {
    width: 100%;
    float: none;
    padding: 0 0 2.666666666666667vw;
}
.eventimg-2columns01:nth-child(2) {
    width: 100%;
    float: none;
    padding: 0;
}
.eventinner01 iframe {
	width: 100%;
    height: 300px;
}
}