@charset "UTF-8";

/* ===============================================
 * CSSリセット
 * =============================================== */

html, body, div, span, h1, h2, h3, p, img, ul, li, table, tbody, tr, th, td, footer, header, nav.gnav {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
}
body {
	line-height: 1
}
footer, header, nav.gnav {
	display: block
}
ul {
	list-style: none
}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent
}
table {
	border-collapse: collapse;
	border-spacing: 0
}

/* ---------------------------
 * 紺：#21b0c9
 * --------------------------- */



a {
	color: #043771;
}
a:hover {
	color: #144d8d;
}
h1, h2, h3 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 700;
	transform: rotate(0.03deg);
}
h1 {
	font-size: 28px;
}
h2 {
	margin-top: 50px;
	margin-bottom: 0.5em;
	font-size: 2em;
	color: #333;
	text-align: center;
	line-height: 1.0;
}
@media screen and (max-width:767px) {
	h2 {
		font-size: 1.5em;
	}
}
h3 {
	margin-bottom: 0.25em;
	font-size: 18px;
}
p {
	margin: 1.5em 0.5em 1em 0.5em;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
ul {
	margin: 0 0 1em 0;
}
ul li {
	list-style: disc;
}
li {
	margin-left: 2em;
}
table {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: collapse;
	border: 1px solid #ddd;
}
th {
	padding: 10px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #ddd;
	background: #f1f1f1;
}
td {
	padding: 10px;
	text-align: left;
	border: 1px solid #ddd;
}
a:hover {
	text-decoration: none;
}

/*
a:visited {
	color:#800080;
}
*/


/* ===============================================
 * 汎用クラス
 * =============================================== */


/* 中央寄せ
 * ----------------- */

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

/* 左寄せ
 * ----------------- */


/* 右寄せ
 * ----------------- */


/* 写真中央寄せ
 * ----------------- */


/* 写真左寄せ
 * ----------------- */


/* 写真右寄せ
 * ----------------- */


/* 写真ズーム
 * ----------------- */


/* オーバーレイ
 * ----------------- */


/* ボタン
 * ----------------- */


/* 水色の線で囲んだボタン
 * --------------------------- */


/* モノクロのボタン
 * --------------------------- */


/* モノクロのボタン（リンクなし）
 * --------------------------- */


/* ---------------------------
 * カラム（段数）指定
 * --------------------------- */


/* 2カラム（スマートフォンでは1カラム)
 * --------------------------- */


/* 事業内容：2カラム（スマートフォンでは1カラム)
 * --------------------------- */


/*  (トップページ・事業内容）
 * IEで見たとき、テキスト切れる現象の対策
 * --------------------------- */


/* 3カラム（スマートフォンでは1カラム)
 * --------------------------- */


/* 3カラム（スマートフォンでは2カラム)
 * --------------------------- */


/* 4カラム（スマートフォンでは2カラム)
 * --------------------------- */


/* 5カラム（スマートフォンでは2カラム)
 * --------------------------- */


/* 6カラム（スマートフォンでは2カラム)
 * --------------------------- */


/* お知らせ
 * --------------------------- */


/* ===============================================
 * グローバルナビゲーション
 * =============================================== */


/* PC用
 * --------------------------- */

@media print, screen and (min-width:769px) {
	nav.gnav:after {
		content: '';
		display: block;
		clear: both;
	}
	nav.gnav {
		float: right;
		display: block;
		width: calc( 100% - 326px);
	}
	/* 共通 */
	nav.gnav ul {
		margin: 0;
		padding: 0;
	}
	nav.gnav ul li {
		position: relative;
		line-height: 90px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav.gnav ul li a {
		display: block;
		background: #fff;
		font-family: 'M PLUS Rounded 1c';
		font-weight: 700;
		transform: rotate(0.03deg);
		color: #000;
		/*		color:#21b0c9;*/
		font-size: 18px;
		font-weight: bold;
		text-decoration: none;
		height: 90px;
		transition: .5s;
		overflow: hidden;
	}
	nav.gnav ul li:hover>a {
		color: #fff;
		background: #21b0c9;
	}
	/* 1段目 */
	nav.gnav>ul>li {
		position: relative;
		width: 16%;
/*		width: 20%;*/
		float: left;
		margin: 0;
		padding: 0;
		text-align: center;
		list-style: none;
		line-height: 90px;
	}
	nav.gnav>ul {
		display: block !important;
	}
	#spMenu {
		display: none;
	}
}

/* タブレット・スマートフォン用
 * --------------------------- */

@media screen and (max-width:768px) {
	nav.gnav {
		display: none;
	}
	nav.gnav ul {
		margin: 0;
		padding: 0;
	}
	nav.gnav>ul {
		z-index: 2;
		overflow: auto;
		position: fixed;
		top: 100px;
		right: 0;
		width: 100%;
		height: 88%;
		height: -webkit-calc(100% - 50px);
		height: calc(100% - 50px);
	}
	nav.gnav li {
		position: relative;
		width: 100%;
		float: none;
		margin: 0;
		text-align: left;
		list-style: none;
		border-bottom: 1px solid #21b0c9;
		background: #000;
	}
	nav.gnav li:first-child {
		border-top: 1px solid #21b0c9;
	}
	nav.gnav li:last-child {}
	nav.gnav li a {
		display: block;
		padding: 10px 20px;
		color: #21b0c9;
		text-decoration: none;
		background: #fff;
		height: 60px;
		line-height: 60px;
		text-align: center;
		transition: .5s;
	}
	nav.gnav li a:hover {
		color: #fff;
		background: #21b0c9;
	}
	.spMenuWrap {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		background: transparent;
	}
	#spMenu {
		position: absolute;
		top: 20px;
		right: 10px;
	}
	#spMenu:hover {
		cursor: pointer;
	}
	#navBtn {
		display: inline-block;
		position: relative;
		width: 50px;
		height: 50px;
		border-radius: 5%;
		background: #21b0c9;
	}
	#navBtnIcon {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 5px;
		margin: -3px 0 0 -20px;
		background: #f1f1f1;
		transition: 0.2s;
	}
	#navBtnIcon:before, #navBtnIcon:after {
		display: block;
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 40px;
		height: 5px;
		background: #f1f1f1;
		transition: 0.3s;
	}
	#navBtnIcon:before {
		margin-top: -17px;
	}
	#navBtnIcon:after {
		margin-top: 12px;
	}
	/* メニューボタンが開いたとき */
	#navBtnIcon.close {
		background: rgba(255, 255, 255, 0);
		/*メニューオープン時は真ん中の線を透明にする*/
	}
	#navBtnIcon.close::before {
		margin-top: -2px;
		transform: rotate(45deg);
	}
	#navBtnIcon.close::after {
		margin-top: -2px;
		transform: rotate(-45deg);
	}
}

/* ===============================================
 * フッター
 * =============================================== */

footer {
	clear: both;
	background: #f49e2c;
	padding:3em 0;
	color: #fff;
}
footer a {
	color: #fff;
}
.footer_ttl {
	padding-top: 20px;
	font-size: 1.2em;
	text-align: center;
}
@media screen and (max-width:767px) {
	footer {
		margin-top: 40px;
	}
	footer p {
		font-size: 0.8em;
		margin-top: 0;
	}
}

/* ===============================================
 * ページトップへの戻り
 * =============================================== */

.totop {
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 1;
}
.totop a {
	display: block;
	text-decoration: none;
}
.totop img {
	background: #2e4da8;
	border-radius:50%;
}
.totop img:hover {
	background: #21b0c9;
}

/* ===============================================
 * タブレット・スマートフォン向けデザイン
 * =============================================== */


/* テンプレートより小さくなった場合に適用
 * --------------------------- */

@media screen and (max-width:979px) {
	.inner {
		width: 100%;
	}
	#contents {
		box-sizing: border-box;
		width: 100%;
	}
	footer {
		width: 100%;
	}
}

/* ---------------------------
 * PCとスマホでの表示・非表示
 * --------------------------- */

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


/* ---------------------------
 * 印刷用CSS
 * --------------------------- */

@page {
	margin: 0mm 5mm;
	size: A4 portrait; //横の場合はlandscape
}
@media print {
header {
	position: absolute;
}
nav.gnav{
	width: 80%;
}
nav.gnav ul li a{
	font-size:14px!important;
}
/* 改ページ */
.main1,.main2,.main3,.main4{
	page-break-after: always;
}
}

/* ---------------------------
 * スライドショー（3枚）
 * --------------------------- */
 
/* html
 * ---------------------------
 * <div class="img-frame">
 *   <div class="img-01"></div>
 *   <div class="img-02"></div>
 *   <div class="img-03"></div>
 * </div>
 * --------------------------- */

.img-frame{
	position: relative;
	width: 70%;
	height: 300px;
	overflow: hidden;
	margin: 0 auto;
}
@media screen and (max-width: 767px){
.img-frame{
	width: 100%;
	height: 200px;
}
.img-01, .img-02, .img-03{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}
.img-01{
	background-image: url('画像の場所');
	animation: slide-animation-01 24s infinite;
}
.img-02{
	background-image: url('画像の場所');
	animation: slide-animation-02 24s infinite;
}
.img-03{
	background-image: url('画像の場所');
	animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

/* 応援団トップのボタン */
a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	/*width: 150px;*/
	width: 250px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background:#fff;
	color: #27acd9;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_01:hover {
	color: #fff;
	background: #27acd9;
}