@charset "utf-8";
/*
 Theme Name: クレカ 様
 Description: クレカ ONLY
 Theme URI:  テーマの URL
 Author: CUBIC-DESIGN
 Author URI:  http://www.cub-d.com
 Version: 2.0
 License: (c)CUBIC・DESIGN
 License URI: http://www.cub-d.com
*/

/* CSS Document */

/*******　角丸のCSS　**********************************************
/*	  border-radius: 10px;        /* CSS3草案 */  
/*    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
/*    -moz-border-radius: 10px;   /* Firefox用 */ 
/*****************************************************************/


/*******　上下左右のCSS　**********************************************
/*	  position: absolute;
/*    top: 50%;
/*    left: 50%;
/*    transform: translate(-50%, -50%);
/*    -webkit-transform: translate(-50%, -50%);
/*    -ms-transform: translate(-50%, -50%);
/*****************************************************************/


/***************************************************************
/*****WEBフォント
/****************************************************************/

.rounded { font-family: "M PLUS Rounded 1c"; }


.w100	 {
font-weight:100;
}
.w200	 {
font-weight:200;
}
.w300	 {
font-weight:300;
}
.w400	 {
font-weight:400;
}
.w500	 {
font-weight:500;
}
.w600	 {
font-weight:600;
}
.w700	 {
font-weight:700;
}
.w900	 {
font-weight:900;
}

/***************************************************************
/*****共通部分のスタイル
/****************************************************************/
/* 画面の表示に関するCSS */

* {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	box-sizing: border-box;
}
html,body{
    width: 100%;
}
/* -終わり-　画面の表示に関するCSS */


.clear_fix:after {
	 content: ".";
	 display: block;
	 height: 0px;
	 clear: both;
	 line-height: 0;
	 visibility: hidden;
}
.clear {
	line-height: 0px;
	background-color: #00ffff;
	clear: both;
	height: 0px;
	visibility: hidden;
}
body {
	font-size: 16px;
	color: #333;
	font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.8;
	margin: 0px;
	padding: 0px;
	background-color: #FEE438;
}
h1,h2,h3 {
	font-weight: normal;
	text-align: center;
}
article {
	display: block;
	padding-top: 1%;
}
article.wrap_box {
	width: 94%;
	box-sizing: border-box;
	padding-left: 1%;
	padding-right: 1%;
	margin-left: auto;
	margin-right: auto;
}
.maincontents_area {
	width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.sidebar_area {
	
}
section {
	display:block;
}
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
}
.left {
	float: left;
}
.right {
	float: right;
}

.center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.align_center {
	text-align: center;
}
.f12 {
	font-size: 12px;
}
.f13 {
	font-size: 13px;
}
.f25 {
	font-size: 25px;
}
.f25_bo {
	font-size: 25px;
	font-weight: bold;
}
.f32 {
	font-size: 32px;
}

/*------------------------------------------
■ PC・スマホ切り替え用
------------------------------------------*/
.pc_none {}
.sp_none {display: none !important;}


/****************************************************************
/* headerに関するCSS */
body header h1 {
	font-size: 12px;
	color: #FFF;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 100%;
	top: 1%;
	left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
	z-index: 1;
}
body h1 img {
	width: 94%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}
header {
	display: block;
	width: 100%;
	background-color: #2793FF;
	background-image: url(images/header_bg_sp.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	position: relative;
	z-index: 4;
	min-height: 530px;
	position: relative;
}

/* モーダルウィンドウ */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

/* ボタンスタイリング */
#modal__btn {
	border-radius: 5px;
	border: 2px solid #2693FF;
	background: #FFF;
	color: #fafafa;
	cursor: pointer;
	text-align: center;
	line-height: 50px;
	height: 50px;
	width: 50px;
	position: fixed;
	top: 5%;
	right: 0%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}
#modal__btn:hover {
  opacity: .8;
}

#modal__btn span, #modal__btn span:before, #modal__btn span:after {
	content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #2693FF;
    position: absolute;
}

#modal__btn span:before {
	bottom: 8px;
}

#modal__btn span:after {
	top: 8px;
}
/* モーダル関係スタイリング */
#modal {
	display: none;
	position: fixed;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 75vh; /*好きなサイズに変更*/
	width: 80%; /*好きなサイズに変更*/
	z-index: 6;
	padding-top: 95px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	background-color: #CAE6F9;
	border-radius: 10px;
}
.modal__inner {
	height: 100%;
	overflow: scroll;
}

.modal_logo {
	position: absolute;
	top: -4%;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	width: 75%;
}

.single_column {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
	border-bottom-width: 3px;
	border-bottom-style: dotted;
	border-bottom-color: #4BA0F5;
}

.single_column img {
	width: 100%;
	height: auto;
}

.two_column {
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
	align-items: flex-end;
	padding-top: 5%;
	padding-bottom: 5%;
	border-bottom-width: 3px;
	border-bottom-style: dotted;
	border-bottom-color: #4BA0F5;
}

.two_column img {
	max-width: 125px;
	height: auto;
	margin-bottom: 5%;
}

#close__btn {
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translate(-50%, 100%);
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 50px;
}
#close__btn:hover {
  opacity: .8;
}
#overlay {
  background: rgba(0,0,20,.7);
  display: none;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
}

/********************** 波 作成　*****************************/

header:before {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
	bottom: 0;
    left: 0;
    background: url(images/wave.png) repeat-x 0 0;
    width: 100%;
    height: 30px;
    overflow: hidden;
    -moz-animation: loop 100s linear infinite;
    animation: loop 100s linear infinite;
	opacity: 0.5;
}
/*アニメーション*/
@keyframes loop {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -2400px 0;
  }
}
header:after {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
	bottom: 0;
    left: 0;
    background: url(images/wave.png) repeat-x 0 0;
    width: 100%;
    height: 30px;
    overflow: hidden;
    -moz-animation: loop2 100s linear infinite;
    animation: loop2 100s linear infinite;
	opacity: 0.5;
}
/*アニメーション*/
@keyframes loop2 {
  0% {
    background-position: -2400px 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* navに関するCSS */

nav {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 6%;
	padding-right: 6%;
	box-sizing: border-box;
	z-index: 3;
	position: absolute;
	top: 210px;
}
nav ul.gmenu {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
nav ul.gmenu li {
	display: flex;
	justify-content: center;
	align-items: center;
}
nav ul.gmenu li a {
	display: flex;
	justify-content: center;
	align-items: center;
}

nav ul.gmenu li a:hover {
	animation: scale .3s ease-in-out;
}

@keyframes scale {
  50% { transform: scale(1.1); }
}

/*ファーストバナーエリア*/
.first_banner_area {
	background-color: #FFF;
}
.first_banner {
	width: 94%;
	list-style: none;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	padding-top: 5%;
	padding-bottom: 1%;
}

.first_banner img {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.first_banner li {
	margin-bottom: 4%;
}

.first_banner li:last-of-type img {
	width: 30%;
}

/* -終わり- headerに関するCSS */
/****************************************************************/


/****************************************************************/
/* sidebarに関するCSS */

.sidebar_area ul {
	list-style: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sidebar_area ul li {
	margin-bottom: 8px;
	display: block;
	width: 100%;
}
.sidebar_area ul li a {
	width: 100%;
}
.sidebar_area ul li a img {
	width: 100%;
	height: auto;
}
.sidebar_area ul li:nth-child(1) img {
	width: 100%;
}
.corona_bord {
	background-color: #FF4D4D;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	box-sizing:border-box;
	padding: 3%;
	margin-bottom: 15px;
}
.corona_bord > img {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}
.corona_bord_text {
	background-color: #FFF;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	box-sizing: border-box;
	padding: 3%;
	border: #FF7373 solid 2px;
}
.corona_bord_text p {
	margin: 0;
	line-height: 1.3em;
}

/* -終わり- sidebarに関するCSS */
/****************************************************************/

/****************************************************************/
/* footerに関するCSS */

.under_area {
	margin-top: 50px;
}
.under_area h1 {
	font-weight: bold;
	color: #333;
	font-size: 2.5em;
	position: relative;
}
.under_area h1:after{
    content: "";
    width: 64px;
	height: 76px;
    display: block;
    position: absolute;
	bottom: 20%;
    right: 72%;
	transform: translate(270px, 0%);
    -webkit-transform: translate(270px, 0%);
    -ms-transform: translate(270px, 0%);
    background: url(images/outsidelink_af_sp.png);
	background-repeat: no-repeat;
}
.under_area h1:before{
    content: "";
    width: 205px;
	height: 81px;
    display: block;
    position: absolute;
	bottom: 1%;
    left: 129%;
	transform: translate(-480px, 0%);
    -webkit-transform: translate(-480px, 0%);
    -ms-transform: translate(-480px, 0%);
    background: url(images/outsidelink_be_sp.png);
	background-repeat: no-repeat;
}
.under_slide {
	background-color: #FFF;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding: 10px 30px;
}

.under_slide img {
	width: 100%;
	height: auto;
}

footer {
	background-image: url(images/footer_bg.png);
	background-repeat: no-repeat;
	background-position: center 195px;
	background-size: 1580px;
}
#footer_box {
	width: 94%;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
	padding-top: 128px;
	padding-left: 0px;
	padding-right: 0px;
    position: relative;
	margin-bottom: 0px;
}
#footer_logo_box {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
#footer_logo_box img{
	width: 100%;
	height: auto;
}
.footer_tel {
	margin-top: 14px;
	color: #005AAB;
	font-size: 5.5vw;
	font-weight: bold;
	text-align: center;
	line-height: 1.6em;
	text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff;
}
.footer_tel a {
	color: #006666;
	font-size: 120%;
}

#foot_text_link {
	display: none;
	width: 100%;
	font-size: 14px;
	line-height: 120%;
	padding-top: 0px;
	position: absolute;
	left: 50%;
	top: 290px;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
}
#foot_text_link li {
	width: 50%;
	list-style: none;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin-bottom: 5px;
}
#foot_text_link li:nth-child(n) {
	justify-content: flex-start;
	padding-left: 20px;
}
#foot_text_link li:nth-child(2n) {
	justify-content: flex-end;
}
#foot_text_link a {
	color: #103F00;
	text-decoration: none;
	display: block;
	width: 40%;
	text-align: left;
    padding: 0.2rem;
	font-size: 14px;
	line-height: 100%;
	text-indent: -1em;
	font-weight: bold;
}
#foot_text_link a:before {
	content: "◆";
	color: #930;
}
#foot_text_link a:hover {
	color: #F63;
	text-decoration: underline;
}

.copylight_wave {
	display: block;
	box-sizing: border-box;
	background-image: url(images/copyright_wave_b.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	color: #FFF;
	line-height: 120%;
	font-size: 14px;
	text-align: center;
	height: 141px;
	overflow: hidden;
    -moz-animation: cwave 100s linear infinite;
    animation: cwave 100s linear infinite;
	position: relative;
}
.copylight_wave:before{
    content: "";
    width: 100%;
    display: block;
	box-sizing: border-box;
	background-image: url(images/copyright_wave_m.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 141px;
	overflow: hidden;
    -moz-animation: cwave2 60s linear infinite;
    animation: cwave2 60s linear infinite;
	position: absolute;
	top: 0;
	z-index: 1;
}
.copylight_wave:after{
    content: "";
    width: 100%;
    display: block;
	box-sizing: border-box;
	background-image: url(images/copyright_wave_f.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 141px;
	overflow: hidden;
    -moz-animation: cwave3 30s linear infinite;
    animation: cwave3 30s linear infinite;
	position: absolute;
	top: 0;
	z-index: 2;
}
/*アニメーション*/
@keyframes cwave {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -2400px 0;
  }
}
@keyframes cwave2 {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -2400px 0;
  }
}
@keyframes cwave3 {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -2400px 0;
  }
}
small.copylight {
	z-index: 3;
	position: absolute;
	left: 50%;
	top: 25%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
	line-height: 2em;
}
small.copylight a {
	color: #FFF;
}
small.copylight a:hover {
	color: #64FFFF;
}

.ika {
	z-index: 3;
	position: absolute;
	right: 75%;
	top: 75%;
    transform: translate(338%, -59%);
    -webkit-transform: translate(338%, -59%);
    -ms-transform: translate(338%, -59%);
	display: inline-block;
}

.ika img {
	width: 50%;
	height: auto;
}

.fugu{
	z-index: 3;
	position: absolute;
	left: 84%;
	top: 65%;
    transform: translate(-512%, -17%);
    -webkit-transform: translate(-512%, -17%);
    -ms-transform: translate(-512%, -17%);
	display: inline-block;
}

.fugu img {
	width: 85%;
	height: auto;
}

.arrow {
	position: absolute;
	right: 0px;
	bottom: 30px;
}
#top_arrow {
	position: fixed;
	bottom: 72px;
	right: 0px;
	z-index: 20;
}

/* -終わり- footerに関するCSS */

/****************************************************************/
/* パンくずに関するCSS */
.pan {
	display: none;
}

h2.pan {
	width: 100%;
	position: relative;
	padding-top: 34px;
	padding-bottom: 17px;
}
h2.pan:after {
	content: "";
	height: 358px;
	width: 100%;
	position: absolute;
	bottom: 0;
	background-position: bottom center;
	background-repeat: no-repeat;
	left: 50%;
	transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
}
.page-id-16 h2.pan:after {
	background-image: url(images/pan_yellow.png);
}

h2.pan a {
	font-size: 12px;
	color: #868686;
}
h2.pan a:hover {
	color: #0066FF;
}
.contact_document_tel {
	background-color: #fff;
	display: flex;
	width: 484px;
	justify-content: space-between;
	list-style-type: none;
	margin-bottom: 17px;
	position: absolute;
	top: 15px;
	right: 0px;
}
.contact_document_tel li {
	padding-top: 2px;
}
.contact_document_tel li:last-child {
	padding-top: 0px;
	padding-right: 5px;
}
/* -終わり- パンくずに関するCSS */

.eyecatch_box {
	width: 1200px;
	height: 406px;
	overflow: hidden;
	padding-top: 88px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 12px;
}

.eyecatch_box img {
-webkit-mask-image: url('images/eyemask.png');
}

.low_art {
	background-image: url(images/under_forest_bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	padding-bottom: 10%;
}
#bar {
	background-image: url(images/eyecatch_bar.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	padding-top: 100px;
}

.eyecatch_area h2 {
    color: #AD0000;
    font-size: 2.1em;
    font-weight: bold;
    margin: 0px auto;
    display: block;
    padding-bottom: 23px;
    background-image: url(images/eyecatch_line.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    position: relative;
}
/***************************************************************
/*****TOPページ
/****************************************************************/

/**********メインイメージ（スライダー）**************/
.slider_box {
	width: 100%;
	padding-bottom: 22%;
	padding-top: 10px;
	position: relative;
	margin-bottom: 8px;
	z-index: 2;
	overflow: hidden;
	background-image: url(images/slider_flag.png);
	background-position: center 77%;
	background-repeat: repeat-x;
	background-size: contain;
}

.wpsisac-image-slide {
	height: auto!important;
}
/*.slider_box > img {
	width:94%;
	height:auto;
}*/
.wave_whale {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.in_whale {
	position: relative;
	width: 96%;
	margin-left: auto;
	margin-right: auto;	
}

.in_whale img {
	width: 130%;
	height: auto;
}
/*.wave_whale img {
	width:100%;
	height:auto;
}*/
.in_whale:before {
	content: "";
	width: 60px;
	height: 27px;
	position: absolute;
	left: -82px;
	bottom: 9px;
	background-image: url(images/fish1.png);
	background-repeat: no-repeat;
	z-index: 3;
	display: none;
}
.in_whale:after {
	content: "";
	width: 52px;
	height: 29px;
	position: absolute;
	right: -84px;
	bottom: 9px;
	background-image: url(images/fish2.png);
	background-repeat: no-repeat;
	z-index: 3;
	display: none;
}

/*********ふわふわ浮かぶかっぱ*************/
.in_whale span.kappa1 {
  position: absolute;
  width: 50px;
  display: inline-block;
  top: 5px;
  right: 10px;
}

/* 回転するアニメーション */
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.anime-fuwafuwa {
  animation: 5s fuwafuwa infinite;
}

.in_whale span.kappa2 {
	position: absolute;
	width: 124px;
	display: none;
	top: 28px;
	left: 1px;
}
/* 回転するアニメーション */
@keyframes fuwafuwa2 {
  0%, 100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0px);
  }
}
.anime-fuwafuwa2 {
  animation: 5s fuwafuwa2 infinite;
}

/********************** 波 作成　*****************************/
.wave_whale:before {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
	bottom: 0;
    left: 0;
    background: url(images/wave.png) repeat-x 0 0;
    width: 100%;
    height: 20px;
    overflow: hidden;
    -moz-animation: loop 100s linear infinite;
    animation: loop 100s linear infinite;
	opacity: 0.5;
}
/*アニメーション*/
@keyframes loop {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -2400px 0;
  }
}
.wave_whale:after {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
	bottom: 0;
    left: 0;
    background: url(images/wave.png) repeat-x 0 0;
    width: 100%;
    height: 20px;
    overflow: hidden;
    -moz-animation: loop2 100s linear infinite;
    animation: loop2 100s linear infinite;
	opacity: 0.5;
}
/*アニメーション*/
@keyframes loop2 {
  0% {
    background-position: -2400px 0;
  }

  100% {
    background-position: 0 0;
  }
}

/**********トップページのコンテンツ**************/
.home .maincontents_area {	
}
.one_shot_com {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: #F00 solid 3px;
	background-color: #FFF;
	padding: 1% 3%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	font-weight: bold;
}
.topics_com {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 0.5% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
}
.event_com {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #FF7373 solid 3px;
	background-color: #FFF;
	padding: 0.5% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
}
.topics_com h1,
.event_com h1 {
	height: 82px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2%;
}

.home_topics {
	list-style: none;
	margin: 0;
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.home_topics li {
	display: block;
	border-bottom: #666 dotted 2px;
	padding-bottom: 3%;
	margin-bottom: 6%;
}
.home_topics li a {
	display: block;
	color: #666;
	font-weight: bold;
	line-height: 1em;
	font-size: 1em;
}
.home_topics li a span.date {
	color: #960;
	display: block;
	font-size: 0.8em;
}
.topics_com .more{
	color: #FFF;
	background-color: #74B9FE;
	display: block;
	width: 25%;
	text-align: center;
	padding: 1% 5%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50px;        /* CSS3草案 */  
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 50px;   /* Firefox用 */ 
}
.event_com .more{
	color: #FFF;
	background-color: #FF7875;
	display: block;
	width: 25%;
	text-align: center;
	padding: 1% 5%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50px;        /* CSS3草案 */  
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 50px;   /* Firefox用 */ 
}
.event_thumb {
	display: block;
	float: left;
	width: 167px;
	background-image: url(images/top_event_list_photo.png);
	background-size: contain;
	padding-top: 9px;
	padding-right: 12px;
	padding-bottom: 12px;
	padding-left: 9px;
	box-sizing: border-box;
}
.event_topics {
	list-style: none;
	margin: 0;
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.event_topics li {
	display: block;
	border-bottom: #666 dotted 2px;
	padding-bottom: 1%;
	margin-bottom: 2%;
}
.event_topics li:nth-child(2) {
	border-bottom: none;
}
.event_topics li a {
	display: block;
	color: #666;
	font-weight: bold;
	line-height: 1em;
	font-size: 1em;
}
.event_topics li a span.date {
	color: #960;
	display: block;
	font-size: 0.8em;
	padding-top: 2%;
}

.shisetsu_area {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #FF8000 solid 3px;
	background-color: #FFF;
	padding: 3% 1% 1% 1%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	margin-top: 60px;
	/* box-shadow */
	box-shadow: 0px 0px 50px 20px #ffcc99 inset;
	position: relative;	
}
.torikumi_area {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #498E03 solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 1% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	margin-top: 60px;
	/* box-shadow */
	box-shadow: 0px 0px 50px 20px #dcff73 inset;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.shisetsu_area h1,
.torikumi_area h1 {
	width: 80%;
	position: absolute;
	left: 50%;
	top:0;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.shisetsu_area h1 img,
.torikumi_area h1 img {
	width: 100%;
	height: auto;
}
.shisetsu_area ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
.shisetsu_area ul li {
	display: block;
	width: 49.4%;
}
.shisetsu_area ul li a img {
	width: 100%;
	height: auto;
}
.torikumi_area img {
	position: relative;
	z-index: 2;
	width: 100%;
}

/****************************************************************
/*　ブログについてのCSS */
/****************************************************************/

body.blog section.post,
body.category section.post {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 30%;
}
.blog_right .widget,
.blog_right2 .widget {
	margin-bottom: 30px;
}
.blog_right .widgettitle,
.blog_right2 .widgettitle {
	display: block;
	text-align:left;
	line-height: 110%;
	font-size: 110%;
	font-weight: bold;
	border-left-width: 6px;
	border-left-style: solid;
	border-left-color: #ED0A00;
	padding-left: 10px;
	margin-bottom: 15px;
	color: #444;
}
.blog_widget_box ul {
	width: 98%;
	border: 3px solid #DFDFDF;
	box-sizing: border-box;
	padding: 10px;
	list-style: none;
}
.blog_widget_box ul li {
	padding-bottom: 7px;
	margin-bottom: 7px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #036;
}
.blog_widget_box ul li a {
	color: #000066;
}
.blog_widget_box ul li a:hover {
	color: #F00;
}
.blog_widget_box ul li:before {
	content: "●";
	color: #000066;
	font-size: 90%;
}
.blog_right #wp-calendar,
.blog_right2 #wp-calendar {
	width: 240px;
	text-align: center;
	color: #666666;
}
.blog_right #wp-calendar caption,
.blog_right2 #wp-calendar caption {
	color: #000066;
}
.blog_right #wp-calendar thead,
.blog_right2 #wp-calendar thead {
	color: #000066;
}
.blog_right #wp-calendar a,
.blog_right2 #wp-calendar a {
	color: #FFF;
	background-color: #000066;
	display: block;
}

.ichiran_banner {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002db2+0,000066+49,002db2+100 */
	background: rgb(0,45,178); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,45,178,1) 0%, rgba(0,0,102,1) 49%, rgba(0,45,178,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,45,178,1) 0%,rgba(0,0,102,1) 49%,rgba(0,45,178,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,45,178,1) 0%,rgba(0,0,102,1) 49%,rgba(0,45,178,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002db2', endColorstr='#002db2',GradientType=0 ); /* IE6-9 */

	display: block;
	border: 1px solid #2693FF;
	border-radius: 10px;        /* CSS3草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	color: #FFF;
	padding: 2%;
	box-sizing: border-box;
	text-align: center;
}

/****記事一覧************************/

.blog .post-meta,
.archive .post-meta,
.single .post-meta {
	color: #444;
	padding-bottom: 20px;
	font-weight: 400 !important;
}
span.date {
	margin-right:10px;
}
span.date:empty {
	display:none;
}
.post-category {
	padding: 5px;
	color: #FFF;
	background-color: #73B9FF;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}
.post-category a {
	color:#FFF;
}
.post-category a:hover {
	color: #FC3;
}
h1.title {
	box-sizing:border-box;
	width: 100%;
	padding: 0%;
	font-weight: bold;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	font-size: 150%;
	text-align: left;
	margin-bottom: 10px;
}
h1.title a{
	color:#468C00;
}
h1.title a:hover {
	color:#ED0A00;
}

.blog .post_box,
.archive .post_box {
	box-sizing: border-box;
	padding-left: 10px;
	padding-bottom: 10px;
}
#archive_eyecatch {	
}
.more-link {
	float: right;
	padding: 5px;
	background-color: #379BFF;
	color: #FFF;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}
a.more-link:hover {
	background-color: #06C;
	color: #FFF;
}

/* BLOGページのpagerに関するCSS */

.m-pagenation > ol {
    list-style: none;
    display: flex;
    width: 60%;
	margin-left:auto;
	margin-right:auto;
    justify-content: space-evenly;
}
.m-pagenation > ol li {
	display: flex;
	background: #FFC;
	width: 2.5em;
	height: 2.5em;
	box-sizing: border-box;
	font-size: 1.3em;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}
.m-pagenation > ol li a {
	display: flex;
	width: 2.5em;
	height: 2.5em;
	box-sizing: border-box;
	background-color: #F30;
	color: #FFF;
	justify-content: center;
	align-items: center;
}

.leftnavi {
	float: left;
}
.rightnavi {
	float: right;
}
.navigation {
	display:flex;
	width:97%;
	justify-content: space-between;
}

.navigation .alignleft,
.navigation .alignright,
.leftnavi,
.rightnavi{
	background-color: #C2D1E9;
	border-radius: 7px;        /* CSS3草案 */
	-webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 7px;   /* Firefox用 */
	margin-bottom: 50px;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	margin-top: 30px;
}
.navigation a {
	color: #069;
}

/***************************************************************
/*****イベントページのスタイル
/****************************************************************/
body.category-event .maincontents_area {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 72%;
	align-content: flex-start;
}
body.category-event section.post {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #FF7373 solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
}
body.category-event #archive_eyecatch {
    float: inherit;
    padding-right: 0;
    width: 100%;
}
body.category-event #archive_eyecatch img {
	width:100%;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}
body.category-event .post_box {
	display:none;
}
body.category-event .post-category {
	font-size:0.8em;
}
/***************************************************************
/*****4コママンガページのスタイル
/****************************************************************/
body.category-four_frame .maincontents_area {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 72%;
	align-content: flex-start;
}
body.category-four_frame section.post {
	width: 49%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 1% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
}
body.category-four_frame #archive_eyecatch {
    float: inherit;
    padding-right: 0;
    width: 100%;
}
body.category-four_frame #archive_eyecatch img {
	width:100%;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}
body.category-four_frame .post_box,
body.single section.category-four_frame .post-category {
	display:none;
}
body.category-four_frame .post-category {
	font-size:0.8em;
}
body.category-four_frame h1.title {
	box-sizing:border-box;
	width: 100%;
	padding: 0%;
	background-color:#1F9BAD;
	font-weight: bold;
	border:none;
	font-size:150%;
	text-align:center;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}
body.category-four_frame h1.title a{
	color:#fff;
}
body.category-four_frame h1.title a:hover {
	color:#EAE1FF;
}

/***************************************************************
/*****アニメページのスタイル
/****************************************************************/
body.category-anime .maincontents_area {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 72%;
	align-content: flex-start;
}
body.category-anime section.post {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 1% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
}
body.category-anime #archive_eyecatch {
    float: inherit;
    padding-right: 0;
    width: 100%;
}
body.category-anime #archive_eyecatch img {
	width:100%;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}
body.category-anime .post_box {
	display:none;
}
body.category-anime .post-category {
	font-size:0.8em;
}
body.category-anime h1.title {
	box-sizing:border-box;
	width: 100%;
	padding: 0%;
	background-color:#1F9BAD;
	font-weight: bold;
	border:none;
	font-size:150%;
	text-align:center;
	margin-bottom:0px;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}
body.category-anime h1.title a{
	color:#fff;
}
body.category-anime h1.title a:hover {
	color:#EAE1FF;
}
body.category-anime .post-meta {
	padding-bottom:0px;
	margin-top:10px;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/***************************************************************
/*****お知らせシングルページのスタイル
/****************************************************************/
body.single section.post {
	width: 97%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 2% 2%;
	font-size: 1.2em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
}
body.single section.category-event {
	border:#FF7373 solid 3px;
	padding:2.5% 2% 2% 2%;
	margin-bottom: 20px;
}



/***************************************************************
/*****わかちゃまを探せ！ページのスタイル
/****************************************************************/

.wakachama_sagase {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	height: 1240px;
	box-sizing: border-box;
	border: 3px solid #73B9FF;
	background-color: #FFF;
	border-radius: 10px;
	background-image: url(images/sagase_bg.png);
	background-repeat: no-repeat;
	background-position: 40% 10px;
	position: relative;
	padding-top: 400px;
	margin-bottom: 40px;
}

.sagase_space01 {
	height: 535px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.asobikata span {
	font-size: 30px;
	font-weight: bold;
	color: #AA1C1C;
	padding-left: 3%;
}
.sagase_chart {
	position: absolute;
	left: 0%;
	bottom: 30px;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
	list-style-type: none;
}

.sagase_chart li {
	width: 30%;
	line-height: 1;
	font-size: 18px;
	font-weight: bold;
	color: #1F1713;
}

.nazonazo_link {
	width: 307px;
	margin-right: auto;
	margin-left: auto;	
}

.nazonazo_link a {
	display: block;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.nazonazo_link a:hover {
	-webkit-transform: scale( 1.1 );
    -moz-transform: scale( 1.1 );
}

/***************************************************************
/*****なぞなぞで遊ぼうページのスタイル
/****************************************************************/

.nazonazo_space {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	height: 1900px;
	box-sizing: border-box;
	border: 3px solid #73B9FF;
	background-color: #FFF;
	border-radius: 10px;
	position: relative;
	padding-top: 2%;
	margin-bottom: 40px;
}

.nazonazo_space a {
	color: #333;	
}

.nazonazo_space dt {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	height: 120px;
	font-size: 25px;
	font-weight: bold;
	color: #4BA0F5;
	box-sizing: border-box;
	padding-top: 2%;
	padding-left: 30%;
	padding-right: 13%;
}

.nazonazo_space01 {
	height: 535px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}

.question01 {
	background-image: url(images/question1.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.question02 {
	background-image: url(images/question2.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.question03 {
	background-image: url(images/question3.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.question04 {
	background-image: url(images/question4.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.question05 {
	background-image: url(images/question5.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.question06 {
	background-image: url(images/question6.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

/*なぞなぞの答えの中身のスタイル*/

/*答えを見るボタンのスタイル*/
.kotae_item {
	width: 190px;
	height: 40px;
	background-color: #d9d9d9;
	line-height: 40px;
	font-size: 25px;
	text-align: center;
	color: #FFF;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	border-radius: 10px;
	margin-left: 10px;
}

.kotae_item:hover {
  opacity: 0.9;
}

/*チェックボックスを全て消す*/
input[name="kotae_item"] {
  display: none;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block!important;
}

/*選択されているタブのスタイルを変える*/
.nazonazo01 input:checked + .kotae_item {
  background-color: #008762;
  color: #fff;
  position: relative;
}

.nazonazo01 input:checked + .kotae_tab_color {
	background-color: #008762;
	color: #fff;
	position: relative;
}

.nazonazo01 dd {
	height: 185px;
	text-align: center;
	position: relative;
	box-sizing: border-box;
    padding-top: 3%;
	display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.nazonazo01 dd p {
	display: none;
	padding: 0px 0px 0;
	clear: both;
	overflow: hidden;
	font-size: 25px;
	color: #E53431;
	font-weight: bold;
}

.esagashi_link {
	width: 307px;
	margin-right: auto;
	margin-left: auto;	
}

.esagashi_link a {
	display: block;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.esagashi_link a:hover {
	-webkit-transform: scale( 1.1 );
    -moz-transform: scale( 1.1 );
}

.nazonazo01 input:checked + .kotae_tab_color + p{
	display: block;
}

.nazonazo_space span {
	display: block;
	text-align: right;	
}

.nazonazo02 dd {
	height: 185px;
	text-align: center;
	position: relative;
	box-sizing: border-box;
    padding-top: 3%;
	display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.nazonazo02 dd p {
	display: none;
	padding: 0px 0px 0;
	clear: both;
	overflow: hidden;
	font-size: 25px;
	color: #E53431;
	font-weight: bold;
}

.nazonazo02 input:checked + .kotae_tab_color + p{
	display: block;
}

/****************ゲームページ共通****************/
.game_link {
	color: #FFF;
	background-color: #E53531;
	border-radius: 100px;        /* CSS3草案 */  
    -webkit-border-radius: 100px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 100px;   /* Firefox用 */
	display: inline-block;
	font-size: 2em;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.5em;
	padding-right: 0.5em;	
}

/***************************************************************
/*****コロナウイルス感染症対策についてページのスタイル
/****************************************************************/

.toriatsukai {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 4.5% 2% 5% 2%;
	font-size: 1.0em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	position: relative;
}

.toriatsukai img {
}

/***************************************************************
/*****施設のご予約申し込みページのスタイル
/****************************************************************/
.yoyaku {
	width: 100%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 2% 2%;
	font-size: 1.5em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 30%;
	position: relative;
}

.yoyaku h1 {
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
	background-color: #D93701;
	border-radius: 50px;
	margin-bottom: 2%;
}

.yoyaku img {
	margin-top: 1%;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	height: auto;
}

.paper_reserve {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3%;
	margin-bottom: 5%;
	padding-top: 3%;
	padding-bottom: 3%;
	border: 3px solid #324B83;
	font-size: 20px;
}

.paper_reserve a img {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.net_color a {
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: auto;
}

.net_color a span {
	color: #D93600;
    font-weight: bold;
	position: relative;
}

.net_color a span:before {
	position: absolute;
    top: -2px;
    left: -46px;
    margin: auto;
    content: url(images/pdf_icon.png);
    box-sizing: border-box;
}

.paper_reserve_pdf {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
	padding-bottom: 2%;
	border: 3px solid #324B83;
}

.paper_reserve_pdf a {
	color: #333;	
}

.paper_reserve_pdf span {
	color: #D93600;
	font-weight: bold;
}

.paper_reserve_pdf dt {
	margin-right: auto;
	margin-left: auto;
	padding-left: 3%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #004099;
	background-color: #85B5E6;
	height: 50px;
	box-sizing: border-box;
	line-height: 50px;
	font-size: 1.2em;
}

.paper_reserve_pdf dd {
	margin-right: auto;
	margin-left: auto;
	padding-top: 2%;
	padding-right: 1%;	
	padding-left: 13%;
	line-height: 50px;
	position: relative;
}

.paper_reserve_pdf dd:before {
	position: absolute;
    top: 12px;
    left: 2px;
    margin: auto;
    content: url(images/pdf_icon.png);
    box-sizing: border-box;
}

.paper_reserve dl:last-child dd:before {
	position: absolute;
    top: 12px;
    left: -5px;
    margin: auto;
    content: '';
    box-sizing: border-box;
}

.paper_reserve dl:last-child dd {
	padding-left: 1%;
}

.paper_reserve dl:last-child dd a {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.net_reserve {
	height: 950px;
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
	border: 3px solid #D93600;
}

/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 40px;
	padding-bottom: 5px;
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 67px;
  background-color: #d9d9d9;
  line-height: 67px;
  font-size: 20px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border-radius: 10px;
}

.tab_item:hover {
  opacity: 0.9;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #324B83;
  color: #fff;
  position: relative;
}

.tabs input:checked + .tab_item:after {
	content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, 158%);
    border: 21px solid transparent;
    border-top: 21px solid #324B83;
}

.tabs input:checked + .net_tab_color {
	background-color: #D93600;
	color: #fff;
	position: relative;
}

.tabs input:checked + .net_tab_color:after {
	content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, 158%);
    border: 21px solid transparent;
    border-top: 21px solid #D93600;
}

.net_color {
	border: 3px solid #D93600!important;
	text-align: center;
}

.moushikomi_tetsuduki {
	margin-bottom: 5%;	
}

.moushikomi_tetsuduki h2 {
	font-size: 20px;
    font-weight: bold;
    color: #FFF;
    background-color: #3C9DFF;
    border-radius: 50px;
	line-height: 48px;
	margin-bottom: 3%;
}

.moushikomi_tetsuduki img {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
    margin-bottom: 2%;
}

.kappa_caution {
	width: 580px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 3%;
	font-size: 24px;
	line-height: 1.4;
	position: relative;
}

.kappa_caution:before {
	position: absolute;
    top: -25px;
    left: -90px;
    margin: auto;
    content: url(images/kappa3.png);
    box-sizing: border-box;
}

.akakome {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 20px;
	color: #D83300;
	font-weight:bold;
	line-height: 1.3;
	margin-bottom: 5%;
}

.moushikomi_chigai01,
.moushikomi_chigai02,
.moushikomi_chigai03,
.moushikomi_chigai04 {
	margin-bottom: 3%;
	padding-left: 75px;
	font-size: 18px;
	position: relative;
}

.moushikomi_chigai01:before {
	position: absolute;
    top: 5px;
    left: 15px;
    margin: auto;
    content: url(images/no1.png);
    box-sizing: border-box;
}

.moushikomi_chigai02:before {
	position: absolute;
    top: 5px;
    left: 15px;
    margin: auto;
    content: url(images/sp_no2number.png);
    box-sizing: border-box;
}

.moushikomi_chigai02:after {
	position: absolute;
    top: 60px;
    left: 0px;
    margin: auto;
    content: url(images/sp_no2kappa.png);
    box-sizing: border-box;
}

.moushikomi_chigai03:before {
	position: absolute;
    top: 5px;
    left: 15px;
    margin: auto;
    content: url(images/no3.png);
    box-sizing: border-box;
}

.moushikomi_chigai04:before {
	position: absolute;
    top: 5px;
    left: 15px;
    margin: auto;
    content: url(images/no4.png);
    box-sizing: border-box;
}

.paper_moushikomi_tetsuduki h2 {
	font-size: 30px;
	font-weight: bold;
	color: #003F99;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #004099;
	margin-bottom: 10%;
	text-align: left;
}

.paper_tetsuduki01,
.paper_tetsuduki02,
.paper_tetsuduki03 {
	padding-left: 1em;
	text-indent: -1em;
	position: relative;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 85px;
	margin-bottom: 10%;
	font-size: 24px;
	line-height: 1.5;
}

.paper_tetsuduki01:before {
	position: absolute;
    top: -15px;
    left: 25px;
    margin: auto;
    content: url(images/kappano1.png);
    box-sizing: border-box;
}

.paper_tetsuduki02:before {
	position: absolute;
    top: -15px;
    left: 25px;
    margin: auto;
    content: url(images/kappano2.png);
    box-sizing: border-box;
}

.paper_tetsuduki03:before {
	position: absolute;
    top: -15px;
    left: 25px;
    margin: auto;
    content: url(images/kappano3.png);
    box-sizing: border-box;
}

.three_paper {
	list-style-type: none;
	padding-left: 1em;
	text-indent: -1em;
	padding-top: 5%;
	position: relative;
}

.three_paper:before {
	position: absolute;
    bottom: 60px;
    right: 0px;
    margin: auto;
    content: url(images/kappano202.png);
    box-sizing: border-box;
}

.toiawasesaki {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10%;
	border: 2px solid #004099;
	font-size: 26px;
	text-align: center;
	line-height: 1.1;
	position: relative;
}

.toiawasesaki h2 {
	font-size: 28px;
	color: #FFF;
	background-color: #004099;
	line-height: 50px;
}

.toiawasesaki a {
	color: #333;
}

.toiawasesaki p {
	padding: 10px;
}

.toiawasesaki:after {
	content: "";
	display: block;
	width: 740px;
	height: 2px;
	background-color: #004099;
	position: absolute;
	bottom: -30px;
	left: 0px;
}
/****ダミーページに関するCSS****************************/
.dummy_page {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 206px;
}

/***************************************************************
/*****施設紹介ページのスタイル
/****************************************************************/
body.about section.omona {
	border:#FF4000 3px solid;
	margin-top:5%;
	margin-bottom:5%;
}	
body.about section.shichokaku {
	border:#639130 3px solid;
	margin-top:5%;
	margin-bottom:5%;
}
body.about section.baby {
	border:#F84C75 3px solid;
	margin-top:5%;
	margin-bottom:5%;
}
body.about section.infop {
	border:#FF4000 3px solid;
	margin-top:5%;
	margin-bottom:5%;
}

.about_space {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2%;
	font-size: 1.5em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	position: relative;
}

.about_space img {
	width: 100%;
	height: auto;
}

.about_cureca_link {
	list-style-type: none;
	padding-top: 8%;
}

.main_facilities {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	box-sizing: border-box;
	border: #FF4000 solid 3px;
	background-color: #FFF;
	padding: 1%;
	font-size: 1.5em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 30%;
	position: relative;
}

.main_facilities h1 {
	width: 100%;
	max-width: 352px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.tamokuteki,
.shimin,
.roku,
.kaigi {
	position: relative;
	min-height: 311px;
}

.main_facilities h2 {
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	background-color: #FF4000;
	border-radius: 29px;
	height: 58px;
	box-sizing: border-box;
	line-height: 58px;
}

.teishutsu {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1%;
	padding-top: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
}

.teishutsu dt {
	width: 30%;
	background-color: #FFDFBF;
	box-sizing: border-box;
	margin-bottom: 3px;
	padding-top: 3px;
	padding-left: 10px;
	font-size: 18px;
	font-weight: bold;
}

.teishutsu dt:last-of-type {
	background-image: url(images/report.png);
	background-repeat: no-repeat;
	background-position: 160px 100px;	
}

.teishutsu dd {
	width: 69%;
	background-color: #FFF2E6;
	box-sizing: border-box;
	margin-bottom: 3px;
	padding-top: 5px;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-right: 10px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
}

.teishutsu dd p {
	padding-right: 0px!important;
}

.about_cureca_link img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	width: 85%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.about_cureca_link img:hover {
    -webkit-transform: scale( 1.1 );
    -moz-transform: scale( 1.1 );
}

.floor_map {
	margin-top: 2%;
	margin-bottom: 8%;
}

.floor_map img {
	height: auto;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
}

.tamokuteki,
.shimin,
.roku,
.kaigi {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
	padding-top: 15%;
}

.tamokuteki img,
.shimin img,
.roku img,
.kaigi img {
	height: auto;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 3%;
	position: relative;
	z-index: 3;
}

.about_roku {
	width: 313px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFBF;
	font-size: 15px;
	font-weight: bold;
	color: #535353;
	box-sizing: border-box;
	padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
	text-align: left;
}

/***************************************************************
/アクセス情報ページのスタイル
/****************************************************************/

.access_space {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 2% 2%;
	font-size: 1.5em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 30%;
	position: relative;
}

.access_space h1, .access_space h2 {
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #3C9DFF;
	border-radius: 50px;
	margin-bottom: 5%;
}

.access_space img {
	width: 100%;
	height: auto;
	margin-bottom: 5%;
}

.access_space ul {
	margin: 0 auto 7%;
	text-align: left;
	border: 1px solid #DDD;
	list-style-type: none;
	font-size: 20px;
}

.access_space li {
    background: #FAFAFA;
    border-bottom: 1px solid #DDD;
    padding: 10px 10px;
}

.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	margin-bottom: 3%;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/***************************************************************
/子ども食堂ページのスタイル
/****************************************************************/

#ckitchen {
	margin-bottom: 3%;
}

.ckitchen_space,
.dkitchen_space {
	width: 97%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2.5% 2% 2% 2%;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	position: relative;
}

.ckitchen_space h1,
.dkitchen_space h1 {
	width: 542px;
	margin-right: auto;
	margin-left: auto;
}

.ckitchen_space img,
.dkitchen_space img {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
}

/***************************************************************
/地域貢献ページのスタイル
/****************************************************************/

.contri_dummy img {
	margin-bottom: 100px;
}

.contri_space {
	width: 97%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	border-radius: 10px;        /* CSS3草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	margin-bottom: 20px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 2.5%;
	padding-right: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
}

.contri_space h2 {
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	background-color: #3C9DFF;
	border-radius: 50px;
	margin-top: 5%;
	margin-bottom: 1%;
}

.access_space span {
	font-size: 18px;	
}

.contri_space img {
	width: 100%;
	height: auto;
	margin-bottom: 3%;
}

.contri_topix {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 3%;
	padding-top: 2%;
}

.contri_topix dt {
	
}

.contri_topix dd {
	margin-bottom: 10%;
	
}

.contri_topix dd p {
	font-size: 20px;
	font-weight: bold;
	color: #FF7F00;	
}

.contri_link,
.contri_link2 {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20%;
	padding-top: 5%;
	position: relative;
}

.contri_link:after {
	position: absolute;
	top: 100%;
	left: 0px;
	margin: auto;
	content: '※北九州市財政局のサイトへリンクします。';
	box-sizing: border-box;
	font-size: 16px;
	color: #D80000;
}

.contri_link2:after {
	position: absolute;
	top: 100%;
	left: 0px;
	margin: auto;
	content: '※北九州市公営競技局のサイトへリンクします。';
	box-sizing: border-box;
	font-size: 16px;
	color: #D80000;
}

.contri_link a,
.contri_link2 a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.contri_link a:hover,
.contri_link2 a:hover {
    -webkit-transform: scale( 1.03 );
    -moz-transform: scale( 1.03 );
}

/***************************************************************
/わかわくらんどページのスタイル
/****************************************************************/

.wakawaku_space {
	width: 97%;
	display: block;
	box-sizing: border-box;
	border: #73B9FF solid 3px;
	background-color: #FFF;
	padding: 2%;
	font-size: 1.5em;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	margin-bottom: 20px;
	position: relative;
}

.wakawaku_space img {
	width: 100%;
	height: auto;
}