/*======================================

	0. WPネイティブ設定
	
=======================================*/

/* editor */
 
p {
    display: block;
    margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
 
/* img */
 
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}
 
/* clearfix */
 
.clearfix {
    overflow: hidden;
    zoom: 1;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/*======================================

	1. フォント設定
	
=======================================*/

p,
pre,
cite,
blockquote {
	font-size: 100%;
}

li,dt,dd {
	font-size: 100%;
}

* {
	line-height: 1.8;
	font-style: normal;
}

strong {
	font-weight:bold;
}

/* <weight>: Use a value from 100 to 900
/ <uniquifier>: Use a unique and descriptive class name */

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/* <weight>: Use a value from 200 to 900
/ <uniquifier>: Use a unique and descriptive class name */

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}


/*======================================

	4. SITE
	
=======================================*/

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
margin: 0 auto;
padding: 0;
color: #333333;
background-color: #FFF;
line-height: 1.8;
font-family: "Noto Sans JP","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
font-style: normal;
}

html::after {
content: "";
position: fixed;
top: 50%;
right: -40px;
transform: translateY(-50%);
width: 250px;
height: 250px;
background: url("img/logo2.svg") no-repeat center center;
background-size: contain;
opacity: .2;
pointer-events: none;
z-index: -1;
}

br.clear {
clear: both;
font: 0pt/0pt sans-serif;
}

section {
clear: both;
display: block;
}


/*======================================

	5. HEADER
	
=======================================*/

header.header-outer {
background-image: url(img/bg.gif);
background-position: top;
background-repeat: repeat-x;
}

.header-inner {
margin: 0 auto;
padding: 7px 0 0 0;
width: 100%;
height: 110px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}

.header-inner .site-logo {
margin: 15px 0 0 10px;
padding: 0;
width: 250px;
}

.header-inner .site-logo img {
width: 100%;
height: auto;
}

.header-right {
display: none;
}


/*======================================

	6. MENU
	
=======================================*/

nav.pc-nav {
display: none;
}


/*======================================

	7. TOP PAGE
	
=======================================*/

#vegas {
margin: 0 0 80px 0;
width: 100%;
height: calc(100vh / 1.5);
box-shadow: #999 0 0 10px;
}

h1.vegas-text {
margin: 25vh auto 0 auto;
text-align: center;
font-size: 30px;
color: #FFF;
text-shadow: 1px 2px 3px #000; 
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
font-style: normal;
}

h1.vegas-text span {
font-size: 36px;
letter-spacing: -0.1em;
}

.top-contents {
margin: 0 auto;
padding: 30px 15px;
}

.top-contents h2 {
font-size: 26px;
color: #008e52;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-style: normal;
}

.top-contents h2 span {
font-size: 26px;
color: #d70146;
}

.top-contents h2 span::before {
content: "\A" ;
white-space: pre;
}

.top-contents p {
font-size: 18px;
line-height: 1.8;
}

.top-comm2 {
font-size: 30px!important;
line-height: 1.4!important;
color: #d70146;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-style: normal;
}

.program-banner {
margin: 0 auto;
padding: 0 15px;
}

.program-banner img {
width: 100%;
height: auto;
}


/*----- CMS -----*/
.top-cms-box {
margin: 30px auto;
padding: 0 15px;
}

.top-info {
position: relative;
margin: 0 0 30px 0;
background-image: linear-gradient(0deg, #82c7ef, #0397d6);
border-radius: 7px;
}

.top-info::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
background: #b8e3f7;
border-radius: 7px;
z-index: -1;
}

.top-info h3 {
margin: 20px 0 0 15px;
padding: 0;
font-size: 24px;
color: #FFF;
background-image: none;
text-shadow: #024f81 0 0 7px;
}

.info-list {
margin: 15px;
padding: 10px;
background-color: #FFF;
border-radius: 5px;
box-shadow: #024f81 0 0 7px;
}

.info-list ul{
margin: 0;
padding: 0;
}

.info-list li{
margin: 0;
padding: 0;
border-bottom: 1px dotted #999999;
list-style: none;
}

.info-list li:last-child{
border-bottom: none;
}

.info-list li a {
padding: 15px;
text-decoration: none;
display: block;
color: #000;
position: relative;
overflow: hidden;
transition: color 0.4s ease;
}

.info-list li a time {
font-weight: bold;
color: #000;
transition: none;
}

.info-list li a time::after {
content: "\A" ;
white-space: pre;
}

.info-list li a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background-color: #82c7ef;
transform: translateX(-100%);
transition: none;
}

.info-list li a:hover {
color: #0397d6;
}

.info-list li a:hover time {
color: #000;
}

.info-list li a:hover::after {
animation: line-in 0.4s ease forwards;
}

.info-list li a:not(:hover)::after {
animation: line-out 0.4s ease forwards;
}

@keyframes line-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

@keyframes line-out {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}

.top-event {
position: relative;
margin: 0;
background-image: linear-gradient(0deg, #82c7ef, #0397d6);
border-radius: 7px;
}

.top-event::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
background: #b8e3f7;
border-radius: 7px;
z-index: -1;
}

.top-event h3 {
margin: 20px 0 0 15px;
padding: 0;
font-size: 24px;
color: #FFF;
background-image: none;
text-shadow: #024f81 0 0 7px;
}

.event-list {
margin: 15px;
padding: 10px;
background-color: #FFF;
border-radius: 5px;
box-shadow: #024f81 0 0 7px;
}

.event-list ul{
margin: 0;
padding: 0;
}

.event-list li{
margin: 0;
padding: 0;
border-bottom: 1px dotted #999999;
list-style: none;
}

.event-list li:last-child{
border-bottom: none;
}

.event-list li a {
padding: 15px;
text-decoration: none;
display: block;
color: #000;
position: relative;
overflow: hidden;
transition: color 0.4s ease;
}

.event-list li a time {
font-weight: bold;
color: #000;
transition: none;
}

.event-list li a time::after {
content: "\A" ;
white-space: pre;
}

.event-list li a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background-color: #82c7ef;
transform: translateX(-100%);
transition: none;
}

.event-list li a:hover::after {
animation: line-in 0.4s ease forwards;
}
7u8
.event-list li a:not(:hover)::after {
animation: line-out 0.4s ease forwards;
}

.event-list li a:hover {
color: #0397d6;
}

.event-list li a:hover time {
color: #000;
}

@keyframes line-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

@keyframes line-out {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}

.cms-button {
	text-align: right;
}

.cms-button a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 15px 25px 0;
	padding: 3px 20px 3px 3px;
	background-color: #FFF;
	border-radius: 50px;
	box-shadow: #024f81 0 0 7px;
	text-decoration: none;
	color: #024f81;
}

.cms-button a::before {
	content: "▼";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #024f81;
	color: #FFF;
	font-size: 9px;
	line-height: 1;
	transform: rotate(-90deg);
	flex-shrink: 0;
}

.cms-button a:hover::before {
	animation: iconPulse 0.9s ease-in-out 1 forwards;
}

@keyframes iconPulse {
	/* 初期 */
	0% {
		transform: rotate(-90deg) scale(1);
		opacity: 1;
	}

	/* 1回目（ゆっくり） */
	35% {
		transform: rotate(-90deg) scale(1.35);
		opacity: .5;
	}
	50% {
		transform: rotate(-90deg) scale(1);
		opacity: 1;
	}

	/* 2回目（速く） */
	65% {
		transform: rotate(-90deg) scale(1.2);
		opacity: .8;
	}
	75% {
		transform: rotate(-90deg) scale(1.35);
		opacity: .4;
	}
	85% {
		transform: rotate(-90deg) scale(1);
		opacity: 1;
	}

	/* 終了 */
	100% {
		transform: rotate(-90deg) scale(1);
		opacity: 1;
	}
}


/*----- Instagram Feed -----*/

.insta {
margin: 0 auto;
padding: 50px 15px;
width: 100%;
}

.insta h3 {
background-image: none;
}

.insta a {
color: #000;
font-size: 16px;
}


/*----- その他 -----*/
.top-banner {
margin: 100px auto 0 auto;
padding: 20px 0;
background-color: #F5F3F0;
}

.top-banner ul {
margin: 0;
padding: 0;
display: flex;
flex-flow: wrap;
align-items: center;
}

.top-banner ul li {
margin: 0;
padding: 5px;
list-style: none;
width: 50%;
text-align: center;
}

.top-banner ul li img {
width: 90%;
height: auto;
}

/*======================================

	4. 流れるイメージ設定
	
=======================================*/

.flow-carousel {
  --item-height: 380px;
  --gap: 16px;
  --hover-scale: 1.2;
  --speed: 120;

  position: relative;
  width: 100%;
  overflow: hidden;            /* 横方向は隠す（下方向は viewport 側で可視化） */
}

/* ビューポートは縦方向はみ出しOK */
.flow-carousel__viewport {
  position: relative;
  width: 100%;
  height: var(--item-height);
  overflow: visible;           /* ← 上下のはみ出しを見せる */
}

/* トラック */
.flow-carousel__track {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex;
  align-items: center;         /* アイテム内の画像中心を固定 */
  gap: var(--gap);
  will-change: transform;
  transform: translateX(0);
}

/* アイテムの高さは固定。横幅はCSS変数で制御して、ホバーで拡大して “押しのける” */
.flow-carousel__item {
  flex: 0 0 auto;
  width: var(--item-width);    /* JSが計算して代入 */
  height: var(--item-height);  /* ← 固定（他アイテムの縦位置は不変） */
  display: flex;
  align-items: center;         /* 中央揃えで拡大時も中心点が不変 */
  justify-content: center;
  transition: width 0.25s ease;
  position: relative;          /* はみ出しを上/下に許容 */
  z-index: 1;
}

.flow-carousel__item:hover {
  width: calc(var(--item-width) * var(--hover-scale));
}

/* 画像は幅・高さともにスケール。AR維持（同倍率） */
.flow-carousel__item img {
  width: var(--item-width);
  height: var(--item-height);
  object-fit: cover;
  border-radius: 8px;
  transition: width 0.25s ease, height 0.25s ease;
}

/* ホバー時の拡大：高さだけ倍率を掛ける（横は autoで追随、AR維持） */
.flow-carousel__item:hover img {
  width: calc(var(--item-width) * var(--hover-scale));
  height: calc(var(--item-height) * var(--hover-scale));
}

  /* ホバー中は全体を一時停止（JSでも制御するが、CSSだけでも機能） */
  .flow-carousel:hover .flow-carousel__track {
    animation-play-state: paused;
  }

/* トラック末尾スペーサー：gap と同じ幅を確保 */
.flow-carousel__spacer {
  flex: 0 0 var(--gap);
  width: var(--gap);
  height: 1px; /* 高さは実質不要 */
}

/* アイテムの内側を縦方向に拡大。横方向は等倍でギャップを侵食しない */
.flow-carousel__item { 
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
  z-index: 1;
}

.flow-carousel__item-inner {
  display: inline-block;
  transform-origin: center top; /* 上方向優先で伸びる見た目に */
  transition: transform 0.25s ease;
}

.flow-carousel__item:hover .flow-carousel__item-inner {
  transform: scaleY(var(--hover-scale)); /* 横は1倍のまま、縦のみ拡大 */
}

/* 画像は従来通り高さ基準でレイアウト */
.flow-carousel__item img {
  display: block;
  height: var(--item-height);
  width: auto;
  object-fit: cover;
}

/* ビューポートは縦方向のはみ出しを許可（上下へ伸びた分を見せる） */
.flow-carousel__viewport {
  overflow: visible;
}

  /* 例: レスポンシブで高さを調整 */
  @media (max-width: 768px) {
    .flow-carousel { --item-height: 80px; }
  }

  /* フリック入力のための追加分 */
.flow-carousel__viewport {
cursor: grab;
touch-action: pan-y;
}

.flow-carousel.is-dragging .flow-carousel__viewport {
cursor: grabbing;
}

.flow-carousel__item {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
user-drag: none;
}

.flow-carousel__item img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
user-drag: none;
}


/*======================================

	8. FOOTER
	
=======================================*/

footer {
border-top: 3px solid #0063b1;
background-image: linear-gradient(0deg, #82c7ef, #0397d6);
}

.footer-inner {
margin: 0 auto;
padding: 28px 15px;
}

.footer-add {
margin: 15px auto 0 auto;
color: #FFFFFF;
text-align: center;
}

.copyright-character {
margin: 0 auto 15px auto;
text-align: center;
}

.footer-add-right h2 {
margin: 0 0 0 0;
padding: 0 0 15px 0;
text-align: center;
font-size: 20px;
}

.footer-add-right p {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 14px;
text-align: left;
}

.footer-sns {
margin: 0 auto;
text-align: center;
}

.footer-sns ul {
display: flex;
justify-content: center;
align-items: flex-start;
}

.footer-sns ul li {
margin: 0 10px;
list-style: none;
}

.footer-sns ul li a {
color: #FFF;
text-decoration: none;
font-size: 36px;
text-shadow: #2693d9 0 0 7px;
display: inline-block;
}

.footer-sns ul li a:hover {
  animation: piconUp 0.35s ease-out;
}

@keyframes piconUp {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

.copyright {
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size: 14px;
}

/*======================================

	9. COMMON
	
=======================================*/

header.page-header {
margin: 0 0 60px 0;
padding: 30px 0 30px 10px;
/*background-image: linear-gradient(0deg, #F8F8F8, #F0F0F0);*/
position: relative;
overflow: hidden;
background-color: #F8F8F8;
background-image: url("img/h1-bg.jpg");
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
}

header.page-header::before {
content: "";
position: absolute;
top: -12px;
left: 0;
width: 100%;
height: 12px;
box-shadow: 0 6px 10px rgba(0,0,0,.25);
pointer-events: none;
}

header.page-header h1 {
margin: 0 auto;
padding: 10px;
width: 100%;
line-height: 1;
background: rgba(255,255,255,.8);
display: block;
font-size: 30px;
}

header.page-header p.lead {
display: none;
margin: 0 auto;
padding: 0;
width: 100%;
color: #008e52;
}

main.site-main {
margin: 0 15px;
}

main.site-main section {
margin: 0 0 50px 0;
line-height: 1.8;
font-size: 18px;
}

main.site-main h2 {
margin: 0 -15px 50px -5px;
padding: 15px 10px 15px 35px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
background-color: #0c62ad;
color: #FFF;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
font-style: normal;
position: relative;
font-size: 20px;
line-height: 1.2;
}

main.site-main h2::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #b8e3f7;
box-shadow: inset 0 3px 2px rgba(0,0,0,.25);
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}

main.site-main h2::after {
content: "";
position: absolute;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
top: 10px;
left: 10px;
right: 0px;
bottom: -8px;
background: #b8e3f7;
z-index: -1;
}

main.site-main h3 {
position: relative;
border-bottom: 3px solid #0c62ad;
}

main.site-main h3 span {
display: inline-block;
border-bottom: 3px solid #d41647;
margin-bottom: -3px;
padding-bottom: 8px;
z-index: 2;
}

/*----- サイドメニュー -----*/
aside.site-aside {
display: none;
}


/*----- TOPへ戻る -----*/
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 60%;
}
#page-top a {
background: #444;
text-decoration: none;
color: #fff;
width: 70px;
padding: 15px 0;
text-align: center;
display: block;
border-radius: 5px;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}


/*======================================

	10. CLUB
	
=======================================*/

.greeting {

}

.greeting-img {
margin: 0 auto;
width: 80%;
}

.greeting-img img {
width: 100%;
height: auto;
}

.greeting-comm {
width: 100%;
}

.mission {
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-size: 20px;
}

.purpose-img {
width: 100%;
height: auto;
}


/*----- 概要 -----*/
.about-table {
}

.about-table table {
margin: 0;
width: 100%;
border-collapse: collapse;
}

.about-table td,
.about-table th {
padding: 10px;
border: 1px solid #CCCCCC;
vertical-align: top;
display: list-item;
list-style: none;
}

.about-table th {
background-color: #FAFAFA;
text-align: center;
white-space: nowrap;
}

.about-table td {
background-color: #FFF;
}

.map {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
 /* 16:9のアスペクト比 */
 height: 0;
}

.map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/*----- 規約 -----*/
.rules-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.rules-table table {
table-layout: fixed;
margin: 0;
width: 100%;
border-collapse: collapse;
}

.rules-table td,
.rules-table th {
padding: 5px;
vertical-align: top;
}

.rules-table th {
width: 70px;
text-align: right;
}

.rules-table td {
background-color: #FFF;
}


/*----- 軌跡 -----*/
.history-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.history-table table {
table-layout: fixed;
margin: 0;
width: 100%;
min-width: 900px;
border-collapse: collapse;
}

.history-table td,
.history-table th {
padding: 10px;
vertical-align: top;
border: 1px solid #CCCCCC;
}

.history-table th {
background-color: #FAFAFA;
white-space: nowrap;
text-align: left;
width: 30%;
}

.history-table td {
background-color: #FFF;
}

.history-th {
width: 12%!important;
}


/*----- 賛助会員 -----*/
.sponsor-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.sponsor-table table {
table-layout: fixed;
margin: 0;
width: 100%;
border-collapse: collapse;
}

.sponsor-table td,
.sponsor-table th {
padding: 10px;
vertical-align: top;
border: 1px solid #CCCCCC;
width: 33%;
}

.sponsor-table td {
background-color: #FFF;
}


/*----- 組織図 -----*/
.organization-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.organization-table table {
table-layout: fixed;
margin: 0;
width: 100%;
min-width: 640px;
border-collapse: collapse;
}

.organization-table td,
.organization-table th {
padding: 10px;
border: 1px solid #CCCCCC;
}

.organization-table th {
background-color: #FAFAFA;
text-align: center;
vertical-align: middle;
}

.organization-table td {
background-color: #FFF;
}

.organization-ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}

.organization-ul li {
margin: 0 0 30px 0;
padding: 0;
text-align: center;
list-style: none;
width: 50%;
}

.organization-ul li img {
width: 90%;
height: auto;
}

.organization-th {
width: 20%;
}

/*----- プロジェクト -----*/
.project-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.project-table table {
table-layout: fixed;
margin: 0;
width: 100%;
min-width: 640px;
border-collapse: collapse;
}

.project-table td,
.project-table th {
padding: 10px;
border: 1px solid #CCCCCC;
}

.project-table th {
background-color: #FAFAFA;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}

.project-table td {
background-color: #FFF;
}

.project-th {
width: 30%;
}


/*----- 貸借対照表 -----*/
.balancesheet-table {
}

.balancesheet-table table {
margin: 0;
width: 100%;
border-collapse: collapse;
}

.balancesheet-table td,
.balancesheet-table th {
padding: 10px;
border: 1px solid #CCCCCC;
display: list-item;
list-style: none;
}

.balancesheet-table th {
background-color: #FAFAFA;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}

.balancesheet-table td {
background-color: #FFF;
}



/*======================================

	11. EVENT
	
=======================================*/

.event-table table {
width: 100%;
border-collapse: collapse;
}

.event-table td, 
.event-table th {
display: list-item;
list-style: none;
border: 1px solid #CCCCCC;
vertical-align: top;
}

.event-table th {
padding: 10px;
color: #0072BC;
background-color: #FAFAFA;
}

.event-table td {
padding: 0;
}

.event-table td a {
padding: 10px;
display: block;
color: #000;
background-color: #FFF;
text-decoration: none;
}

.event-table td a .event-outline {
margin: 0;
padding: 0;
font-size: 14px;
}

.event-day {
margin: 0 0 15px 0;
text-align: right;
border-bottom: 1px dotted #999999;
}

.event-details {
margin: 20px 0;
}

.event-details table {
width: 100%;
border-collapse: collapse;
}

.event-details td, 
.event-details th {
display: list-item;
list-style: none;
padding: 10px;
vertical-align: top;
border: 1px solid #CCCCCC;
}

.event-details th {
color: #0072BC;
background-color: #FAFAFA;
}

.event-details td {
background-color: #FFF;
}

.event-pic {
margin: 0 10px 20px 0;
text-align: center;
}

.event-pic img {
margin: 0 0 2px 0;
border: 5px solid #CCCCCC;
}



/*======================================

	11. CLASS
	
=======================================*/

.class-main {
margin: 0 0 30px 0;
}

.class-main-left {
margin: 20px 0 0 0;
position: relative;
}

.class-main-right {
}

.class-main-left img {
margin: 0 0 0 0;
width: 100%;
height: auto;
vertical-align: top;
}

.class-main-left::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
background: #F6F6F6;
z-index: -1;
}

.class-table table {
width: 100%;
border-collapse: collapse;
}

.class-table td, 
.class-table th {
padding: 10px;
border: 1px solid #CCCCCC;
vertical-align: top;
}

.class-table th {
width: 30%;
color: #0072BC;
background-color: #FAFAFA;
}

.class-table td {
background-color: #FFF;
}


/*======================================

	11. ENROLLMENT
	
=======================================*/

.enrollment-table {
margin: 0 0 30px 0;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.enrollment-table table {
table-layout: fixed;
margin: 0;
min-width: 900px;
border-collapse: collapse;
}

.enrollment-table td, 
.enrollment-table th {
padding: 10px;
border: 1px solid #CCCCCC;
text-align: center;
vertical-align: middle;
}

.enrollment-table th {
color: #0072BC;
background-color: #F0F0F0;
}

.enrollment-table td {
background-color: #FFF;
}


.enrollment-table2 {
margin: 0 0 30px 0;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.enrollment-table2 table {
table-layout: fixed;
margin: 0;
width: 100%;
min-width: 640px;
border-collapse: collapse;
}

.enrollment-table2 td, 
.enrollment-table2 th {
padding: 10px;
border: 1px solid #CCCCCC;
}

.enrollment-table2 th {
color: #0072BC;
background-color: #F0F0F0;
text-align: center;
}

.enrollment-table2 td {
background-color: #FFF;
}

ol.flow {

}

ol.flow li {
margin-bottom: 30px;
}

ol.flow li::marker {
color: #2262AC;
font-size: 1.2em;
font-weight: bold;
}

ol.flow li span {
color: #2262AC;
font-size: 1.2em;
font-weight: bold;
}



/*======================================

	10. SITE-MAP
	
=======================================*/

.sitemap-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.sitemap-table table {
table-layout: fixed;
margin: 0 0 30px 0;
width: 100%;
min-width: 640px;
border-collapse: collapse;
}

.sitemap-table td,
.sitemap-table th {
padding: 10px;
vertical-align: top;
border: 1px solid #CCC;
}

.sitemap-table th {
background-color: #F0F0F0;
color: #143446;
text-align: left;
white-space: nowrap;
}

.sitemap-table td {
background-color: #FFF;
}



/*======================================

	10. LINKS
	
=======================================*/

ul.linls {
display: flex;
flex-flow: wrap;
margin: 0;
padding: 0;
}

ul.linls li {
margin: 0 0 30px 0;
padding: 0;
list-style: none;
text-align: center;
width: calc(100% / 2);
}

ul.linls li p {
margin: 0;
padding: 0;
line-height: 1.4;
}

ul.linls li img {
width: 90%;
height: auto;
}



/*======================================

	10. CONTACT
	
=======================================*/

.contact-table table {
margin: 10px 0 0 0;
width: 100%;
border-collapse: collapse;
}

.contact-table td,
.contact-table th {
display: list-item;
list-style: none;
padding: 10px;
border: 1px solid #CCCCCC;
vertical-align: top;
line-height: 150%;
}

.contact-table th {
background-color: #F0F0F0;
color: #143446;
text-align: left;
}

.contact-table td {
background-color: #FFF;
overflow: hidden;
}

.contact-table input[type="text"],
.contact-table input[type="email"]  {
margin: 2px 5px;
padding: 10px;
border: 1px solid #cdcdcd;
width: 90%;
}

.contact-table textarea  {
margin: 2px 5px;
padding: 10px;
border: 1px solid #cdcdcd;
height: 150px;
width: 90%;
}

.contact-table input[type="radio"]  {
margin: 2px 5px;
}

#contactus-button {
margin: 10px 0;
text-align: center;
}

#contactus-button input[type="submit"] ,
#contactus-button input[type="reset"]  {
	margin: 0 10px;
	width: 150px;
	height: 30px;
}

.contact-table td .contact-short {
	width: 50px;
}

.contact-table td .contact-middle {
	width: 150px;
}

.example {
	color: #CC0000;
}

.submit-button {
	width:80px;
}

.privacy {
	margin: 15px auto 30px auto;
	padding: 5px;
	width: 550px;
	border: 3px double #008E61;
	background-color: #FFFBE6;
}

.mwform-radio-field {
display: block;
white-space: nowrap;
float: left;
}


/*======================================

	13. ETC
	
=======================================*/

.img-right {
	padding: 5px;
	float: right;
}

.img-left {
	padding: 5px;
	float: left;
}

.img-middle {
	vertical-align: middle;
}


.text-right {
	text-align:right;
}

.text-center {
	text-align:center;
}


.basic-number {
	list-style-position: inside;
	list-style-type: decimal;
}

.basic-list {
	list-style-type: square;
}


.text-green {
	color: #018E63;
}

.text-red {
	color: #D0004E;
}

.text-blue {
	color: #2262AC;
}


/*======================================

	14. SPACE
	
=======================================*/

.bottom-space5{
	padding-bottom: 5px;
}

.bottom-space10{
	padding-bottom: 10px;
}

.bottom-space15{
	padding-bottom: 15px;
}

.bottom-space20{
	padding-bottom: 20px;
}

.bottom-space30{
	padding-bottom: 30px;
}

.bottom-space50{
	padding-bottom: 50px;
}

.top-space5{
	padding-top: 5px;
}

.top-space10{
	padding-top: 10px;
}

.top-space15{
	padding-top: 15px;
}

.top-space20{
	padding-top: 20px;
}

.top-space30{
	padding-top: 30px;
}

.top-space50{
	padding-top: 50px;
}

/*======================================

	14. Recruit設定
	
=======================================*/
.link-button {
margin: 30px auto;
width: 350px;
}

.link-button a {
padding: 15px 25px;
display: block;
text-align: center;
background-color: #31ae36;
text-decoration: none;
color: #FFF;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
box-shadow: #AAAAAA 0 0 6px;
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.link-button a:hover {
display: block;
text-decoration: none;
background-color: #148d19;
border-radius: 8px;
}


/*======================================

	12. wp-pagenavi設定
	
=======================================*/

/*---- wp-pagenavi ------*/

.wp-pagenavi {
margin: 30px 0 0 0;
}

/*---- wp-pagenavi ページ「〇/〇」 ------*/
.wp-pagenavi .pages {
display: none;
}

/*---- wp-pagenavi ≪ 先頭 ------*/
.wp-pagenavi .first {
display: none;
}

/*---- wp-pagenavi ≪ ------*/
.wp-pagenavi .previouspostslink {

}

/*---- wp-pagenavi 省略「...」 ------*/
.wp-pagenavi .extend {

}

/*---- wp-pagenavi 各ページ（リンクあり） ------*/
.wp-pagenavi .page {

}

/*---- wp-pagenavi 現在のページ ------*/
.wp-pagenavi .current {

}

/*---- wp-pagenavi 各ページ（現在のページより前のページ） ------*/
.wp-pagenavi .smaller {

}

/*---- wp-pagenavi 各ページ（現在のページより後のページ） ------*/
.wp-pagenavi .larger {

}

/*---- wp-pagenavi ≫ ------*/
.wp-pagenavi .nextpostslink {

}

/*---- wp-pagenavi 最後 ≫ ------*/
.wp-pagenavi .last {
display: none;
}


/*======================================

	5. イベントカレンダー設定
	
=======================================*/
.calendar-section section {
margin: 0!important;
}

.month {
margin: 0!important;
}

.em.em-calendar .em-cal-body>div  {
padding: 10px 5px!important;
}

.em-cal-event {
height: 70px!important;
}
.em-cal-event div {
padding: 5px 2px!important;
white-space: normal!important;
height: 70px!important;
font-size: 9px!important;
line-height: 1.2!important;
}