/* 
body {
  margin: 0;
  font-family: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
 */

/* ▼画面一杯に描画する */
html,body {
	margin:5px;
	padding:0px;
	height:100%;
}
body {
  font-family: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 16px;
	background-color: #ffffff;
}


h1 {
	font-size: 140%;
	color: #3232FF;
  text-shadow: 2px 1px #c7edff, 4px 2px #9acee7, 6px 3px #6bbade;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
h2 {
	font-size: 120%;
	padding: 0.5rem 3rem;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  text-shadow: 1px 1px #3232FF;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

h3 {
	font-size: 100%;
	color: #03a6ff;/*文字色*/
	position: relative;
  display: inline-block;
  padding: 0 50px;
}
h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 30px;
  height: 2px;
  border-top: solid 1px #03a6ff;
  border-bottom: solid 1px #03a6ff;
}
h3:before {
  left:0;
}
h3:after {
  right: 0;
}

h4 {
	font-size: 100%;
	color: #03a6ff;/*文字色*/
	position: relative;
  display: inline-block;
  padding: 0 50px;
}
p {
	font-size: 16px;
}
/* 強調文字 */
.redmoji {
  font-weight   : bold;
  font-size     : 120%;
  color         : red;
}
.redmoji2 {
  font-weight   : bold;
  color         : red;
}




.haba60 {
	margin: 0px 10px;
	padding: 0px;
	width: 60%;
}
.haba80 {
	margin: 0px 10px;
	padding: 0px;
	width: 80%;
}

p.resizeimage {
	max-width: 800px; /* 最大幅 */
	min-width: 240px; /* 最小幅 */
}
p.resizeimage img { width: 100%; }

dt {
	color: mediumblue;
	font-weight: bold:
	margin: 2px;
	padding: 0px;
}
.submd {
	color: #00CB65;
	font-weight: bold:
}
.submdbig {
	font-size: 120%;
	margin: 2em 0 1em 0;
	position: relative;
	background: #191970;
	color: #ffffff;
	text-shadow: 0 0 5px #ffffff;
	padding: 3px 3px 3px 10px;
	font-weight: bold;
}

/* -------------------- */
/* ▼メニューバーの作成 */
/* -------------------- */
#nav{
	height:35px;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	background:white;
	z-index:999999;
	margin-bottom: 25px;
}
#nav ul{
	width:100%;
	height:25px;
	list-style:none;
	margin:6px auto 0px auto;
}
#nav ul li{
	display:inline;
	float:left;
	margin:0px 2px;
}
#nav a{
	font-size:16px;
	float:left;
	padding: 2px 4px;
	color:#0080ff;
	text-decoration: none;
	border:1px solid #5656ff;
	cursor: pointer;
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	center left;
	height:16px;
	line-height:16px;
}
#nav a:hover{
	background: #5656ff;
	color: white;
}
/* ●ハンバーガーメニュー */
header {
	height:45px;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
  display: flex;
	background:white;
	z-index:999999;
	margin-bottom: 25px;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  opacity: 0.7;
}
nav {
  margin: 0 0 0 auto;
  width: 300px;
  padding: 10px;
}
.btn {
  text-align: right;
}
.btn a {
  display: inline-block;
  text-align: center;
}
#open a {
  background: #eee;
  width: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: 1s;
}
#close a {
  color: #fff;
  background: #aaa;
  width: 30px;
  line-height: 30px;
  border-radius: 15px;
}
#g_menu li {
  list-style: none;
}
#g_menu a {
  color: #fff;
}
#g_menu {
  height: 100%;
  width: 300px;
  padding: 20px;
  background: rgba(0, 0, 0,.6);
  transition: right 1s;
  position: fixed;
  top: 0;
}
#g_menu:not(:target) {
	right: -100%;
}
#g_menu:target {
	right: 0;
}


/* -------------------- */
/* ▼ボックスの作成     */
/* -------------------- */
.pagebox {
	padding:40px 10px 20px 10px; /* 上40px下20px */
	min-height: 100%;
}
@media screen and (max-width:480px) {
	pagebox {
		width: 100%;
	}
}

/* ▼各画面の装飾(背景色)  */
#homeP { }
#page1 { }
#page2 { }
#page3 { }

/* ---------------------------- */
/* ▼段組      */
/* ---------------------------- */

div.cover {
	display: table;
	border-spacing: 0.5em;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
/* ---基本BOX-------------------- */
div.cover div.box1 {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
	width: 100%
}
div.cover div.box2 {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
vertical-align: top;
	width: 50%
}
div.cover div.box3 {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
	width: 33.3%;
}
div.cover div.box31 {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
	width: 10%;
}
div.cover div.box32 {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
	width: 45%;
}
/* -背景色=半透明、文字は不透明BOX- */
div.cover div.box3color {
	display: table-cell;
	margin: 0px;
	background-color: #ccffcc;
	padding: 0.5em;
	width: 33.3%;
}
/* -背景色=半透明、文字は不透明BOX- */
div.cover div.box4Clear {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
	background-color: rgba( 204, 255, 204, 0.55 );	/* RGBAカラーモデル */
	border: solid 2px limegreen;
	color: navy;
	width: 25%;
}
div.cover div.box22 {
	display: table-cell;
	margin: 0px;
	padding: 0.5em;
	width: 80%
}


/* -------------------- */
/* ▼footerの作成       */
/* -------------------- */
#footer {
	display: flex;
	justify-content: center;
	align-items: center;
	position:fixed;
	bottom:0;
	background-color : #FBA848;
	width:100%;
	height: 34px; /* 100vh; */
	color: #ffffff;
	font-size: 12px;
	text-align: center;
}
.footer-left {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	text-align: center;
}
/*小さいデバイスでは縦に並べる*/
@media screen and (max-width: 600px){
	.footer-left {
		font-size: 10px;
	}
}
.footer-right {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
// フリーズＴシャツボタン
.btn__{
	display: block;
	border-radius: 5px;
}
.btn__ a{
	display: block;
	width: 60%;
	padding: 2px;
	text-align: center;
	color: #333;
	border: 2px solid #CB3200;
	border-radius: 5px;
	font-weight: bold;
	text-decoration: none;
}
.btn_move_03 a{
	position: relative;
	transition: 0.5s;
}
.btn_move_03 a::before{
	content: 'ここからご覧ください';
	position: absolute;
	width: 100%;
	height: 14px;
	bottom: 0;
	left: 0;
	background-color: #3232FF;
	color: #FFF;
	border: 3px solid #333;
	opacity: 0;
	transition: 0.5s;
	transform: rotateY(-180deg);
}
@media (hover: hover) {
	.btn_move_03 a:hover .text{
		opacity: 0;
		transition: 0.3s;
	}
	.btn_move_03 a:hover::before{
		transform: rotateY(0);
		opacity: 1;
	}
}
@media (hover: none) {
	.btn_move_03 a:active .text{
		opacity: 0;
		transition: 0.3s;
	}
	.btn_move_03 a:active::before{
		transform: rotateY(0);
		opacity: 1;
	}
}

.clear {
	clear:both;
}
.naka {
	text-align:  center;	/* 中央寄　インライン要素用 */
	margin:  0 auto;	/* 中央寄　ブロック要素用 */
	text-decoration: none;	/* リンク下線なし */
  color: #000;
}
.naka:hover {
	background-color: transparent;
	border: 2px solid #998bfa;
  color: #00ff00 !important;
  border-radius: 20px;
}

.noline {
	text-decoration: none;	/* リンク下線なし */
}

/* -------------------- */
/* ▼ボタンの作成       */
/* -------------------- */
/* 別画面表示用--------- */
.btn_green {
	display: inline-block;
	padding: 0.3em 1em;
	text-decoration: none;
	color: mediumblue;
	border: solid 2px mediumblue;
	border-radius: 3px;
	transition: .4s;
}
.btn_green:hover {
	background: limegreen;
	color: white;
}
.btn_blue {
	display: inline-block;
	padding: 0.3em 1em;
	text-decoration: none;
	color: mediumblue;
	border: solid 2px mediumblue;
	border-radius: 3px;
	transition: .4s;
text-decoration: none;
}
.btn_blue:hover {
	background: deepskyblue;
	color: white;
}

/* iframe表示用--------- */
.btn_white {
	display: inline-block;
	padding: 0.3em 1em;
	text-decoration: none;
	font-size:100%;
	font-weight:bold;
	color: blue;
}
.btn_white:hover {
	background: white;
}

.button03 {
   background: #fff;
   border: 2px solid #00bcd4;
   color: #00bcd4;
   padding: 15px 0;
   width: 200px;
}
.button03:hover {
   background: #00bcd4;
   border: 2px solid transparent;
   color: #fff;
}


/* ●左に画像・右に文字列のレイアウト  */
.zubox {
	padding: 10px 20px;	/* 上下 左右  */
  margin;: 20px 20px;
  width: 90%;
}
.zubox img {
  width:30%;
  padding: 10px;
  margin:0 10px 0 0;
}
.right {
  width: 60%;
  margin;: 120px 0;
  display: inline-block;
  vertical-align: top;
} 
 



/* ●テーブル       */
table.table01 {
	width:100%;
	border-right:#3EB1C6 solid 1px;
	border-collapse: collapse;
}
table.table01 thead th {
	background-color: rgba( 50, 205, 50, 0.55 );	/* RGBAカラーモデル */
	color:#FFF;
	padding:10px 15px;
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
table.table01 thead th:last-child {
	border-right:#3EB1C6 solid 1px;
}
table.table01 tbody th {
	background:#3EB1C6;
	color:#FFF;
	padding:10px 15px;
	border-bottom:#FFF solid 1px;
	vertical-align:top;
}
table.table01 tbody tr:last-child th {
	border-bottom:#3EB1C6 solid 1px;
}
table.table01 tbody td {
	background-color: rgba( 204, 255, 204, 0.55 );	/* RGBAカラーモデル */
	padding:10px 15px;
	border-left:#3EB1C6 solid 1px;
	border-bottom:#3EB1C6 solid 1px;
	vertical-align:top;
}


div.cover div.box1t {
 display: block;
 width: 100px;
 height: 100px;
 background: url(../images/h02.jpg) no-repeat 0 0;
}
a.hoge {
 display: block;
 width: 100px;
 height: 100px;
 background: url(../images/h02.jpg) no-repeat 0 0;
}
div.cover div.box1t:hover {
 background: url(../images/h03.jpg) no-repeat 0 -100px;
}

/* -------------------- */
/* ▼Flexbox            */
/* -------------------- */
.flex_box {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	-js-display: flex;
  display: flex;
	justify-content: center;
	background-color: #fff;
  padding: 5px;
  flex-wrap: wrap;
}
/* ▼Flexbox item       */
.flex_item {
  width: 25%;
	min-width:200px;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;	/* 角丸 */
  font-size: 16px;
  color: #000;
  text-align: left;
	text-decoration: none;
}
@media screen and (max-width: 600px){
	.flex_item {
	  width: 40%;
		min-width:180px;
  	padding: 4px;
  	margin: 2px;
		max-width:200px;
	}
}
.flex_item_waku {
	border: 1px solid #ccc;
}
.flex_item_shadow {
	box-shadow: 10px 10px 15px -10px;
}
.flex_item_shadow2 {
	box-shadow: 1.5px 1.5px 2px #696969;
}
.flex_item_back {
	background:radial-gradient(#F89174, #FFC778);
}
/* ●前向きニュース　NEWマーク位置  */
.absolute {
	position: absolute;
}



/* ▼title       */
.flex_item-title {
	padding: 2px;
	margin-bottom: 5px;
  color: #ff7f7f;
  font-size: 20px;
  font-weight: bold;
	text-align:center;
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	text-shadow:1px 1px #FF0000;
}
.flex_item-title2 {
	padding: 2px;
	margin-bottom: 5px;
  color: #ff7fbf;
  font-size: 20px;
  font-weight: bold;
	text-align:center;
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	text-shadow:1px 1px #FF0000;
}
.flex_item-title3 {
	padding: 1px;
	margin-bottom: 1px;
  color: #03a6ff;
  font-size: 16px;
  font-weight: bold;
	text-align:center;
	vertical-align:middle;	/* 図文字中央揃え */
	text-shadow:1px 1px #0000CB;
}
.flex_item-title4 {
	padding: 0px;
	margin-bottom: 0px;
  color: #84ffff;
  font-size: 16px;
  font-weight: bold;
	text-align:center;
}
.flex_item-p {
  padding: 2px;
	text-decoration: none;
}
.flex_item-p2 {
  padding: 0px;
	text-decoration: none;
	text-align:  center;
	margin:  0 auto;
}
.flex_boxbest {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	-js-display: flex;
  display: flex;
	justify-content: center;
	background-color: white;
  padding: 0px;
  flex-wrap: wrap;
}
.flex_itembest {
  width: 320px;	/* 幅 */
	min-width:180px;
  padding: 0px;
  margin: 0px;
}
.flex_item-pbest {
  padding: 0px;
	text-decoration: none;
}
.flex_item-pbest img {
  vertical-align:top;
}

/* ●トピックス　画像の上に文字 */
.topic {
	width:			320px;
	height:			200px;
	overflow:		hidden;
	padding:			10px;
  position: relative;
  border: 1px solid #ddd;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.topic p {
  position: absolute;
  top: 50%;/*画像の左上に配置*/
  left: 50%;
-ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: #fff;
	text-shadow:2px 2px 3px #000;
  font-size: 30px;
  line-height: 1;/*行高は1に*/
	text-align: center;
}
.topic img {
  width: 100%;
  cursor: pointer;
}
.topic:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}


/* ●Q&Aスタイル */
.ac-container {
  max-width: 80%;
  border: 1px solid #ccc;
  border-top: none;
  margin: 0 auto;
}
.ac-container label {
  height: 100%;
  line-height: 1.8;
  font-size: 16px;
  padding: 5px 10px;
  display: block;
  cursor: pointer;
  color: #666;
  background: #eaffff;
  border-top: 1px solid #ccc;
}
.ac-container input {
  display: none;
}
.ac-container article {
  overflow: hidden;
  height: 0;
  transition: 0.6s;
}
.ac-container input:checked ~ article {
  height: 100%;
  border-top: 1px solid #ccc;
}



/* ●マウスホバー時に文字列を表示 */
.mausehover {
	width:			100%;
	height:			100px;
	overflow:		hidden;
	position:		relative;
	color:			#000;
	text-align: 		center;
}
.mausehover .pic {
	width:			100％;
}
.mausehover img {
	max-width: 200px; /* 最大幅 */
	min-width: 100px; /* 最小幅 */
}
.mausehover .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.0);
	-webkit-transform:	rotateY(-180deg);
	transform:		rotateY(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.mausehover:hover .mask {
	-webkit-transform:	rotateY(0deg);
	transform:		rotateY(0deg);
	opacity:		1;	/* ホバーで表示する */
}

/* ●タブ切り替え全体 */
.tabs {
  margin-top: 50px;
  padding-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 80%;
  margin: 0 auto;
}
/*タブのスタイル*/
.tab-wrap {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
	margin-right: auto;
	margin-left: auto;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: DeepSkyBlue;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}



/* ●画像円形表示 */
.image-round1{
  border-radius: 50%;
}

/* ●トピックス段組み */
.contents-wrap {
  max-width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  padding: 5px;
  margin: 0 auto;
}
.contents-box {
  width: 20%;	/* 幅 */
	min-width:180px;
  padding: 2px;
  margin: 2px;
  border-radius: 2px;
  font-size: 16px;
  color: #000;
  text-align: left;
	text-decoration: none;
	box-shadow: 10px 10px 15px -10px;
}
.contents-box:hover {
	background-color: transparent;
	border: 2px solid #998bfa;
  color: #998bfa !important;
  border-radius: 20px;
}
.contents-box img {
	display: block;
	margin-bottom: 5px;
	width: 100%;
	height: auto;
}
.contents-box h2 {
	margin-bottom: 6px;
	font-size: 16px;
	text-align: center;
  color: #7f7fff;/*文字色*/
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
@media screen and (max-width: 768px){
	.contents-wrap {
		flex-direction: column;
	}
	.contents-box {
		width: 100%;
	}
}

/* ●見出 BOX */
.midasi {
	position: relative;/*相対配置*/
  width: 95%;
/*  height: 500px; */
	text-align:  center;	/* 中央寄　インライン要素用 */
	margin:  0 auto;	/* 中央寄　ブロック要素用 */
}
.midasi p {
	position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}
/* ●見出　文字 */
.midasi img {
  width: 80%;
	height: auto;
}
/* ●表頭写真　フリーズタイトル */
.rainbowtext {
  font: bold 5em / 1 Verdana, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
          background-clip: text;
  -webkit-background-clip: text;
          text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: example 4s linear infinite;
}
@keyframes example {
  to { background-position-x: 100%; }
}
@media screen and (max-width: 600px){
	.rainbowtext {
	  font: bold 2em / 1 Verdana, Helvetica, Arial, sans-serif;
	}
}
@media screen and (max-width: 700px){
	.rainbowtext {
	  font: bold 2.2em / 1 Verdana, Helvetica, Arial, sans-serif;
	}
}
.content2 {
  width:100%;
  padding:0;
  margin:0;
	font-size: 8vw;
	font-weight: bold;
	color: #3F00FF;
	text-shadow    : 
      0 1px #fff,
    0 2px #aaa,
    0 3px #999,
    0 4px #888,
    0 5px #777,
    0 6px #666,
    0 7px #555,
    0 8px #444,
    0 9px #333,
    0 10px 8px #fff;
	text-align:justify;
	text-align-last:justify;
}
.content3 {
  width:100%;
  margin:40px 0 10px 10px;/* 上40 右0 下10 左10 */
  padding:10px;
	font-size: 18px;
	font-weight: bold;
	color: #3F00FF;
	text-align:left;
}


/* ●見出　バック写真 */
.kenburns-top {
	-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
/* animation-iteration-count: infinite; */
}
/* animation kenburns-top */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}

/* ●見出　スクロール文字 */
.type-pers-parent {
  perspective: 350px;
  -webkit-perspective: 350px;
  height: 300px;
  background-color: #fff;
  overflow: hidden;
  margin;: 40px 20px;	/* 上下 左右  */
}
.type-pers-child {
  text-align: center;
  font-size: 30px;
  padding: 20px;
  -webkit-animation: typetext linear 15s infinite;
  color: #fff;
	text-shadow:
    1px 1px #aaa,
    2px 2px #999,
    3px 3px #888,
    4px 4px #777,
    5px 5px #666,
    6px 6px #555,
    7px 7px 4px #000;
  letter-spacing: 1px;
}
@-webkit-keyframes typetext {
   0% {transform: rotateX(45deg) translate(0,0);}
  100% {transform: rotateX(45deg) translate(0,-500px);}
}


.filter-shadow {
  color: transparent;
  background: linear-gradient(180deg, #fefefe, #bbb);
  -webkit-background-clip: text;
  -webkit-filter:
    drop-shadow( -1px -1px white )
    drop-shadow( 1px 1px darken(white, 50%) )
    drop-shadow( 1px 1px darken(white, 52%) )
    drop-shadow( 1px 1px darken(white, 54%) )
    drop-shadow( 1px 1px darken(white, 56%) )
    drop-shadow( 1px 1px darken(white, 58%) )
    drop-shadow( 1px 1px darken(white, 60%) )
    drop-shadow( 1px 1px darken(white, 62%) )
    drop-shadow( 1px 1px darken(white, 64%) )
    drop-shadow( 1px 1px darken(white, 66%) )
    drop-shadow( 1px 1px darken(white, 68%) )
    drop-shadow( 1px 1px darken(white, 70%) )
    drop-shadow( 12px 12px 30px rgba(black, 0.2) )
    drop-shadow( 12px 12px 10px rgba(black, 0.2) )
  ; 
}

.text-shadow {
  color: #f4f4f4;
 text-shadow:
    -1px -1px white,
    1px 1px darken(white, 50%),
    2px 2px darken(white, 52%),
    3px 3px darken(white, 54%),
    4px 4px darken(white, 56%),
    5px 5px darken(white, 58%),
    6px 6px darken(white, 60%),
    7px 7px darken(white, 62%),
    8px 8px darken(white, 64%),
    9px 9px darken(white, 66%),
    10px 10px darken(white, 68%),
    11px 11px darken(white, 70%),
    18px 18px 30px rgba(black, 0.4),
    18px 18px 10px rgba(black, 0.4)
  ; 
}

/* ●おしらせ */
.osirase {
	position: relative;
  max-width: 400px;
  margin: 1.5em auto;
  margin-top: 100px;
  padding: 2.5em 1.5em 1.5em;
	background-color: #b3e5fc;
  border: dashed 3px #29b6f6;
  box-shadow: 0 0 0 1
	font-size: 3vw;
	color: #3200CB;
	font-weight: bold;
}
.osirase span {
	position: absolute;
	top: -15px;
	transform: translateX(-.3em) rotate(-5deg);
	padding: .5em 2em;
	border-right: 2px dotted rgb(0 0 0 / 10%);
	border-left: 2px dotted rgb(0 0 0 / 10%);
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	background-color: rgb(255 255 255 / 40%);
  letter-spacing: .3px;
	font-weight:  bold;
	color: #3200CB;
}

.osirase2{
	position: relative;
  max-width: 95%;
  margin: 1em 0;
  padding: 10px;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  letter-spacing: .3px;
	font-size: 3vw;
	color: #3200CB;
}
.osirase2-title{
  color: #fff;
	font-size: 3vw;
	font-weight: bold;
	color: white;
	text-shadow    : 
      0 1px #bbb,
    0 2px #aaa,
    0 3px #999,
    0 4px #888,
    0 5px #777,
    0 6px #666,
    0 7px #555,
    0 8px #444,
    0 9px #333,
    0 10px 8px #000;
  background-color: #2196f3;
  padding: 4px 6px;
  text-align: center;
}
.title-box3 p{
  margin: 0;
  padding: 1em;
}

/*リンクの矢印が右に移動する*/
.btnarrow4{
	position: relative;
	display: inline-block;
	padding: 0 20px;
  color: #FF0000;
  text-decoration: none;
  outline: none;
}
/*矢印と下線の形状*/
.btnarrow4::before{
  content: '';
	position: absolute;
  bottom:-8px;
  left:15%;
  width: 85%;
  height: 1px;
	background:#333;
  transition: all .3s;
}

.btnarrow4::after{
   content: '';
	position: absolute;
  bottom:-3px;
  right:0;
  width: 15px;
  height:1px;
	background:#333;
  transform: rotate(35deg);
  transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow4:hover::before{
	left:20%;
}
.btnarrow4:hover::after{
	right:-5%;
}


/*続きを読む*/
.read {
    position: relative;
}

.read label {
    text-align: center;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.9) 100%);
}
.read label:after {
    content:' 続きを読む';
    z-index: 2;
    width: 100%;
    max-width: 300px;
    padding: 10px;
    color: #ffffff;
    background-color: #000066;
    border-radius: 30px;
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translate(-50%, 0);
}
.read input:checked + label {
  height: 0px;
}
.read input:checked + label:after {
  content: ' 閉じる';
}

.read input {
  display: none;
}

.read__content {
  overflow: hidden;
  height: 360px;
}

.read input:checked ~ .read__content {
  height: auto;
}


/*Christmas*/
.crbody {
  background-image: url(../images/Christmas/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}
.shobody {
  background-image: url(../images/shogatu/sho03.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

.crtype-pers-parent {
  perspective: 350px;
  -webkit-perspective: 350px;
  height: 300px;
  overflow: hidden;
  margin;: 40px 20px;	/* 上下 左右  */
}

.crflex_box {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	-js-display: flex;
  display: flex;	/* フレックスボックス */
	justify-content: center;
  padding: 5px;	/* 余白 */
  flex-wrap: wrap;	/* 折り返し */
}

.neon {
	display: table-cell;
	padding:5px;
	margin:40px 10px 20px 10px; /* 上右下左 */
	width: 80%;
	text-align: center;
	color: red;
  font-size: 16px;
}
.neon a {
	color: white;
  font-size: 16px;
	transition: 1s;
}
.neon a:hover {
	text-shadow:
		0 0 7px #fff,
		0 0 10px #fff,
		0 0 20px #fff,
		0 0 40px #b2ebf5,
		0 0 80px #b2ebf5,
		0 0 90px #b2ebf5
}

.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.sample1-4::before{
	left: 2px;
	width: 7px;
	height: 3px;
	background: #fff;
}
.sample1-4::after{
	left: 2px;
	width: 6px;
	height: 6px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.crflex_item25_waku_noshadow {
  width: 30%;	/* 幅 */
	min-width:200px;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  font-size: 16px;
  color: #000;
  text-align: left;
	text-decoration: none;
	border: 1px solid #ccc;
background:rgba(204,204,204,0.5);
}
@media screen and (max-width: 600px){
	.crflex_item25_waku_noshadow {
		width:90%
	}
}

.shflex_item25_waku_noshadow {
  width: 30%;	/* 幅 */
	min-width:200px;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  font-size: 16px;
  color: #000;
  text-align: left;
	text-decoration: none;
	border: 1px solid #ccc;
background:rgba(255,101,50,0.5);
}
@media screen and (max-width: 600px){
	.shflex_item25_waku_noshadow {
		width:90%
	}
}

.wkbox {
  margin: 1em 0;
  padding: 1em;
  background-color: #FF3F00;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
}
.wkbox p{
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #fff;
}