@charset "utf-8";/*plaza*/
/*枠外色グレー系*/
html {
    background: #e6e9e9;
    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 100%;
    padding: 5;
    background: #dcdcdc;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 100;
    line-height: 1.5;
}
.toggle-pc {
    display: block !important;
}
.toggle-sp {
    display: none !important;
}
/*
body {
	margin: 0;
	background: url(/assets/img/bg.jpg);
}*/
.contents {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#navTgl:checked ~ .contents {
	transform: translateX(250px);
}
.visual {
  height: 420px;
  background-image: url() ; /*url('../img/anigif0708.gif') ;*/
  background-size: cover;
  padding: 50;
  margin: 25;
  color: #cccccc;
}
.img {
  max-width: 100%;
}
/*header footer*/
/*header:g-navi*/
.g-navi {
	display: flex;
  }
  .g-navi h1 {
	margin: 10px 0 0 10px;
  }
  .g-navi nav {
	margin: 0 0 0 auto;
  }
  .g-navi nav ul {
	list-style-type: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
  }
  .g-navi nav ul li a,
  .g-navi nav ul li a:link,
  .g-navi nav ul li a:visited {
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	color: #000;
  }
  .g-navi nav ul li a:hover {
	color: #888;
  }
  
/*flex*/
.flex {
	display: flex;
	margin: 20px 0;
	padding: 0;
	display: flex;
	width: 90%;
 }

  .flex h1 {
	margin: 0 0 0 0;
  }
  .flex nav {
	margin: 10 0 0 auto;
  }
  .flex nav ul {
	list-style-type: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
  }
  .members nav ul li a,
  .members nav ul li a:link,
  .members nav ul li a:visited {
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	color: #000;
  }
  .members nav ul li a:hover {
	color: #888;
  }
  

/*toplink*/
.links {
    width: 100%;
    display: flex;
}
.links h1 {
    margin: 10px 0 0 10px;
}
.links nav {
    margin: 0 0 0 auto;
}
.links nav ul {
    list-style-type: none;
    margin: 20px 0;
    padding: 0;
    display: flex;
}
.links nav ul li a,
.links nav ul li a:link,
.links nav ul li a:visited {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 20px;
    color: #000;
}
.links nav ul li a:hover {
    color: #888;
}
/* main *
main section {
  padding-top: 5%; /*トップ静止画の高さ設定*
  width: 100%; 
    height: ;
  background-image: url('../img/anigif0708.gif');
  background-size: cover;
}        
main .inner {
    width: 900;/*990*
    margin: 20px auto;/*40px auto*
}    */
/* :::::: header, footer ::::::*/    
header {
  width: 100%;
  height: 350px;
  position: ;/*固定するsticky*/
  position: ;/*Safari用ベンダープレフィックス-webkit-sticky*/
  background-image: url('../theme/pioneerAnme.gif');
  background-size: cover;
  top: 0;/*ブラウザの上からの距離は0*/ 
}
header .h1 {
text-shadow:
  black 1px 1px 2px, black -1px 1px 2px,
  black 1px -1px 2px, black -1px -1px 2px;
}
  
/* footer */
footer {
  background: #ede6e6;
  padding: 20px;
}
footer ul {
  list-style-type: none;
  margin: 0 5px;
  padding: 0;
  display: ;/*flex*/
  justify-content: center;/*flex-end*/
}
footer ul li {
  margin: 0 0 0 20px;
}
footer ul li a,
footer ul li a:link,
footer ul li a:visited {
  text-decoration: none;
  font-size: 13px;
  color: #000;
}
footer ul li a:hover {
  color: #000;
}
footer p {
  margin: 0;
  text-align: center;
  color: #000;
}

/* footer *
footer {
    background: #ede6e6;
    padding: 20px;
}
footer ul {
    list-style-type: none;
    margin: 0 5px;
    padding: 0;
    display: flex;/*flex*
    justify-content: flex-end;/*flex-end*
}
footer ul li {
    margin: 0 0 0 20px;
}
footer ul li a,
footer ul li a:link,
footer ul li a:visited {
    text-decoration: none;
    font-size: 13px;
    color: #000;
}
footer ul li a:hover {
    color: #888;
}
footer p {
    margin: 0;
    text-align: center;
    color: #888;
}*/
/* :::::: togglr button ::::::*/

#navTgl {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
}
.open {
	z-index: 2;
	width: 48px;
	height: 48px;
	background: #222; /*lightSeaGreen;*/
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}
#navTgl:checked + .open {
	background: indianRed;
	transform: translateX(250px);
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked + .open::before {
	transform: rotate(45deg);
}
#navTgl:checked + .open::after {
	transform: rotate(-45deg);
}
#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(0,0,0,.6);
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu h2,
.menu a {
	color: white;
}
.menu h2 {
	text-align: center;
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	font-size: .8em;
	line-height: 1.4;
}
.menu li:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
	display: block;
	padding: 1em 2em;
	text-decoration: inherit;
	transition: background .6s;
}
.menu a:hover {
	background: black;
}
#navTgl:checked ~ .menu {
	transform: none;
}

/* :::::: grid article :::::: */
.cssgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1.0em;
  border: 1px solid #ddd;
  padding: 1.0em;
  margin: 0 0 2em;
}

.cssgrid > div {
  background: #fff;/*#ddd*/
  overflow: auto;
  min-width: 0;
  padding: 1em;
}

article {
	width: 100%;
	max-width: 300px;
	margin: 0 auto 100px;
	padding: 0 5px;
	box-sizing: border-box;
    display: flex;
}
article h1 {
	width: 7em;
	height: 7em;
	margin: 0 auto;
	font-size: 1em;
	line-height: 7em;
	font-weight: normal;
	text-align: center;
	background: rgba(0,0,0,.05);
	border-radius: 0%;
}
section {
	margin: 4em 0;
}
section h2 {
	margin: 0 0 .6em;
}
figure {
	position: relative;
	margin: 0;
	padding-bottom: 3.6em;
}
figure img {
	max-width: calc(100% - 10px);
	margin-bottom: .8em;
	padding: 5px;
	vertical-align: middle;
	background: rgba(255,255,255,.6);
}
figcaption {
	font-size: .8em;
}
section .btn {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1em 2em;
	color: white;
	background: lightSeaGreen;
	text-align: center;
	text-decoration: inherit;
	transition: background .3s;
}
section .btn:hover {
	background: indianRed;
}

.main-nav, .main {
  display: -webkit-flex;
  display: flex;
}
.main-nav li:first-child {
  margin-right: auto;
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: ;/*main-navbgcolr #1e90ff*/
  color: #fff;
    display: block;
    padding: 15px;
    text-decoration: none;
}
.main-nav .logo {
  background: #; /*navlogpbackclor#4584b1*/
}
ul {
  list-style: none;
}
/* Main contents */
img {
    margin: 5px;
    padding: 5px;
}
.main section {
  -webkit-flex: 1;
  flex: 1;
    width: 95%;
  margin: 10px;
  border-radius: 0px;
  background: #fff;/*ColmBGcolr*/
  padding: 15px;
}
.main .col-1 {
  -webkit-flex: 1;
  flex: 1;
}
/* :::::: f-container :::::: */
.f-container {
	display: flex;
	flex-direction: row; 
    flex-wrap: wrap;
	justify-content: center;
    align-items: flex-start;
	align-content: stretch;
  }

  .f-item  {
	display: flex;
  }
  article {
	  width: 100%;
	  max-width: 647px;
	  margin: 0 auto 100px;
	  padding: 0 5px;
	  box-sizing: border-box;
	  display: flex;
  }


  article h1 {
	  width: 7em;
	  height: 7em;
	  margin: 0 auto;
	  font-size: 1em;
	  line-height: 7em;
	  font-weight: normal;
	  text-align: center;
	  background: rgba(0,0,0,.05);
	  border-radius: 0%;
  }
  section {
	  margin: 4em 0;
  }
  section h2 {
	  margin: 0 0 .6em;
  }
  figure {
	  position: relative;
	  margin: 0;
	  padding-bottom: 3.6em;
  }
  figure img {
	  max-width: calc(100% - 10px);
	  margin-bottom: .8em;
	  padding: 5px;
	  vertical-align: middle;
	  background: rgba(255,255,255,.6);
  }
  figcaption {
	  font-size: .8em;
  }
  section .btn {
	  display: block;
	  position: absolute;
	  right: 0;
	  bottom: 0;
	  padding: 1em 2em;
	  color: white;
	  background: lightSeaGreen;
	  text-align: center;
	  text-decoration: inherit;
	  transition: background .3s;
  }
  section .btn:hover {
	  background: indianRed;
  }
  
  .main-nav, .main {
	display: -webkit-flex;
	display: flex;
  }
  .main-nav li:first-child {
	margin-right: auto;
  }
  .main-nav a {
	margin: 10px;
	border-radius: 5px;
	background: ;/*main-navbgcolr #1e90ff*/
	color: #fff;
	  display: block;
	  padding: 15px;
	  text-decoration: none;
  }
  .main-nav .logo {
	background: ; /*navlogpbackclor#4584b1*/
  }
  ul {
	list-style: none;
  }

  /* Main contents */
  img {
	  margin: 5px;
	  padding: 5px;
  }
  .main section {
	-webkit-flex: 1;
	flex: 1;
	  width: 95%;
	margin: 10px;
	border-radius: 0px;
	background: #fff;/*ColmBGcolr*/
	padding: 15px;
  }
  .main .col-1 {
	-webkit-flex: 1;
	flex: 1;
  }

 
 

.main .col-2 {
  -webkit-flex: 1;
  flex: 2;
}
.main .col-3 {
  -webkit-flex: 1;
  flex: 3;
}
.main .col-4 {
  -webkit-flex: 1;
  flex: 4;
}
.main h1 {
  color: #696969;文字
  font-size: 1.5rem;
}
.main p {
  margin-top: 10px;
}*/

@media screen and (max-width: 768px) {
.main {
        -webkit-flex-direction: column;
    flex-direction: column;
    }
     img {
        max-width: 100%;
    } 
 .toggle-pc {
    display: none !important;
}
.toggle-sp {
    display: block !important;
}
}
/*
@media screen and (max-width: 768px) {
    p{
        background-color: black;
         color:green;
     }
 }
 
 @media screen and (max-width: 480px) {
    p{
        background-color: black;
         color:red;
     }
 }
*/
/*https://www.bestcssbuttongenerator.com/*/
/*#1 myButton基本形*/    
/*サイト内*/      
.myButton {
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	border-radius:5px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:8px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
.myButton:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	background-color:#476e9e;
}
.myButton:active {
	position:relative;
	top:1px;
}

/*外部サイト*/
.myButtonG {
	box-shadow: 0px 0px 0px 2px #9acc85;
	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
	background-color:#74ad5a;
	border-radius5px;
	border:1px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:8px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #92b879;
}
.myButtonG:hover {
	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
	background-color:#68a54b;
}
.myButtonG:active {
	position:relative;
	top:1px;
}

/*::::pagetopボタン:::https://giga-log.com/pagetop-button/::::*/
/* パソコン・スマホ共通のCSS */
#PageTopBtn {
    position: fixed; /*ボタンの配置場所を固定*/
    z-index: 20000;
    bottom: -10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: #00bfff; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 5%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
    text-decoration: none; 
    background: #87cefa; /*マウスオーバー時の背景色*/
}


 /*JS <head></head>内
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 */

 /*HTML footer 直前、戻す位置にid="wrap"を記載*
 <p id="PageTopBtn"><a href="#wrap">▲Page Top</a></p>
 */


 /*:::::HTML 緑㋬デザイン:::::*/
#PageTopBtnG {
    position: fixed; /*ボタンの配置場所を固定*/
    bottom: -10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtnG a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: #90ee90; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 50%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtnG a:hover {
    text-decoration: none; 
    background: #228b22; /*マウスオーバー時の背景色*/
}
/* PC表示*/
@media (min-width: 768px) {
    #PageTopBtnG {
        font-size: 25px; /*文字のサイズ*/
    }
    #PageTopBtnG a {
        width: 50px; /*ボタンの幅*/
        height: 40px; /*ボタンの高さ*/
        padding: 5px 0; /*文字の配置場所の調整*/
    }
    }

 /*スマホで表示する場合のCSS*/
@media (max-width: 767px) {
    #PageTopBtnG {
        font-size: 20px;
    }
    #PageTopBtnG a {
        width: 50px;
        height: 50px;
        padding: 8px 0;
    }
    }   
/*青㋬デザイン* HTML
  header></header
  <!--font awesome-->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
  
    :::::HTML 緑㋬デザイン:::::
 <p id="PageTopBtnG"><a href="#wrap"><i class="fas fa-angle-double-up faa-float animated"></i></a></p>

*/



 /*::::::::青㋬デザイン:::::: https://cotodama.co/pagetop/*/
 #page_topB{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #3f98ef;
    opacity: 0.6;
    border-radius: 50%;
  }
  #page_topB a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #page_topB a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
 

/*::::::::赤㋬デザイン::::::https://cotodama.co/pagetop/*/
#page_topR{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #ef3f98;
    opacity: 0.6;
    border-radius: 50%;
  }
  #page_topR a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #page_topR a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
 /*赤㋬デザイン* HTML
  header></header
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">

<div id="page_topR"><a href="#wrap"></a></div>
   */
/*:::::HTML PKピンク㋬デザインanime:::::*/
#PageTopBtnPK {
  position: fixed; /*ボタンの配置場所を固定*/
  z-index: 15; /*toplayer/3*/
  bottom: -10px; /*下からのボタンの配置場所を指定*/
  right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtnPK a {
  display: block; /*配置の調整*/
  text-decoration: none; /*文字の下線を消す*/
  color: #fff; /*文字の色*/
  background: #f3a6d6; /*ボタンの背景色*/
  text-align: center; /*文字を中央に配置*/
  border-radius: 50%; /*ボタンの角を少し丸くする*/
  outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtnPK a:hover {
  text-decoration: none; 
  background: #228b22; /*マウスオーバー時の背景色*/
}
/* PC表示*/
@media (min-width: 768px) {
  #PageTopBtnPK {
      font-size: 25px; /*文字のサイズ*/
  }
  #PageTopBtnPK a {
      width: 50px; /*ボタンの幅*/
      height: 50px; /*ボタンの高さ*/
      padding: 5px 0; /*文字の配置場所の調整*/
  }
  }

/*スマホで表示する場合のCSS*/
@media (max-width: 767px) {
  #PageTopBtnPK {
      font-size: 20px;
  }
  #PageTopBtnPK a {
      width: 50px;
      height: 50px;
      padding: 8px 0;
  }
 /*pink㋬アニメ* HTML
 戻る位置：id="wrap":
  headern内に
  <!--font awesome-->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
  
:::::HTML PK㋬アニメ戻るボタン:::::
 <p id="PageTopBtnPK"><a href="#wrap"><i class="fas fa-angle-double-up faa-float animated"></i></a></p>
 */
 
  /*:pager角:*/
  .pager {
	overflow: hidden;
  }
  .pager ul {
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
  }
  .pager ul li {
	margin: 0 1px;
	position: relative;
	left: -50%;
	float: left;
  }
  .pager ul li span,
  .pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
  }
  .pager ul li a {
	background: #EEE;
	color: #000;
	text-decoration: none;
  }
  .pager ul li a:hover {
	background: #333;
	color: #FFF;
  } 
  .base  {
  background: #fff;
}