@charset "utf-8";
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
　↓YUI3 CSS Reset　ブラウザー固有のスタイルをリセットします↓　*/
body,div,dl,dt,dd,
ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
img {
	border:0;
}
ul,ol,li {
	list-style:none;
}


/* 大枠構成 */
body {
	font-family:Geneva, Arial, Helvetica, sans-serif,"メイリオ",meiryo,"ＭＳ Ｐゴシック", Osaka;

	background:#ffff00;
	background-repeat:no-repeat;
	margin:0px auto;
	padding:0px;
}

@media screen and (max-width: 700px) {
  .main {
    flex-direction: column;
  }

}


@font-face {
	font-family: 'JapanSans80';
	src: url('../font/JapanSans80.eot?#iefix') format('embedded-opentype'),
		url('../font/JapanSans80.woff') format('woff'),
		url('../font/JapanSans80.ttf')  format('truetype'),
		url('../font/JapanSans80.svg#svgFontName') format('svg');
}



/* ヘッダー*/
/* ヘッダーの背景 */
div#header-bk {
	background-color:#444;  /* 背景色(黒) */
	padding:10px 0 0;       /* 上から10px分余白をあける */
	height:140px;           /* 縦の高さ140px */
	width:100%;             /* 横の幅を100% */
}
/* ヘッダーの表示領域 */
div#header {
	border: 5px solid #fff; /* 表示領域を白枠で囲う */
	width: 1024px;   /* 横の幅970px */
	margin: auto;   /* 中央揃え */

}

.headerimg{
    height: 0;
    padding-top: 52.25%;
    background: url("../images/header_01.png") 0 0 no-repeat;
    background-size: contain;
}

/* ヘッダーここまで*/



/*メニュー*/
#menu {
    display:none;
}


.slicknav_menu {
    display:none;
}

@media screen and (max-width: 40em) {
    /* #menu is the original menu */
    /* #menu {
        display:none;
    } */

    .slicknav_menu {
        display:block;
    }



	.main-nav {
        display:none;
    }

}

nav{background:#ffff00;}
/*メニュー終わり*/

.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  display: block;
  padding: 15px;
  text-decoration: none;
}
.main-nav .logo {
  background: #0bd;
  border: 2px solid #fff;
}

.main-nav {
  display: flex;
}
.main-nav {
  display: flex;
  justify-content: center;
}




@media screen and (max-width: 40em) {
    /* #menu is the original menu */

	.main-nav {
        display:none;
    }
}


/* ボディ */




/*#particles-js{background-color:#b61924;


}
*/
#particles-js {
width: 100%;
height: 300%;
position: absolute;
/*top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;*/
z-index: -1;
}


/* ボタン */
.button {
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}




.button {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #fff;
	color: #333;
	overflow: hidden;
}
.button:hover {
	color: #60B99A;
}
.button::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.button:hover::after {
	-webkit-transform: scale(2) rotate(180deg);
	transform: scale(2) rotate(180deg);
	background: #fff;
}






/*ボタン*/
.ghost-button{
    /*background: #333;*/
    color: white;
    border: 1px solid #ffffff;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    padding: 0.8rem;
    outline: none;
}

.ghost-button--round{
    border-radius: 100px;
}

.ghost-button:hover{
    background: #0bd;
}


/*ボタン終わり*/




/* 05.アメリカンな(?)吹き出し */
.main h1{
	position:relative;
	padding:5px 20px;
	font:bold 28px/1.6 Arial, Helvetica, sans-serif;
	color:#333;
	background:#fff;
	text-shadow:
		1px 1px 0 #fff,
		2px 2px 0 #999;
	border-top:#333 solid 3px;
	border-bottom:#333 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
			from(			rgba(255, 255, 255, 0.0)),
			color-stop(0.4, rgba(255, 255, 255, 0.0)),
			color-stop(0.4, rgba(0, 0, 0, 0.1)),
			color-stop(0.6, rgba(0, 0, 0, 0.1)),
			color-stop(0.6, rgba(255, 255, 255, 0.0)),
			to(				rgba(255, 255, 255, 0.0))
			);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}
.main h1:before{
	content:" ";
	position:absolute;
	top:100%;
	left:24px;
	width:0;
	height:0;
	border-width:12px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#333;
}
.main h1:after{
	content:" ";
	position:absolute;
	top:100%;
	left:28px;
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#f0f0f0;
	z-index:1;
}






/* メインセクション */
.main section {
  margin: 10px;
  border-radius: 5px;
  /* background: #fff; */
  flex: 1;
  /* box-shadow: 0 2px 5px #ccc; */
	/* opacity: 0.1; */
}
/*.main h1 {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #E6AC27;
  padding: 10px;
  border: 3px dotted #E6AC27;
  background: #fff;
}*/
.main p {
  font:bold 16px/1.6 Arial, Helvetica, sans-serif;
  margin-top: 10px;
  color: #777;
  line-height: 1.5;
  text-align: center;
}

.main {
  display: flex;
  align-items:flex-start;
}

/* メインセクションここまで */

/*カード*/
.card {
  width: 350px;
  /* background: #fff; */
  border-radius: 5px;
  /* box-shadow: 0 2px 5px #ccc; */

}
.card-img {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
}

.card-content {
  padding: 20px;
  background: #edf;
	opacity: 0.9;
}


.card-content:hover{
background:#fffafa;
opacity: 0.8;} /* 40％ほど透過させる */

.card-title {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}
.card-text {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
  /*font-family:JapanSans80;*/
}
.card-link {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 20px;
	margin-top: 10px;

}
.card-link a {
  text-decoration: none;
  color: #0bd;
  margin: 0 10px;
}
.card-link a:hover {
  color: #fff;
}

.tume{letter-spacing:-2px;}

/*カードここまで*/





/*フッター*/
#footer{ display: flex;
        justify-content: center;
		color:#630;
		margin: auto;

}


#footer h3{
	font:bold 16px/1.6 Arial, Helvetica, sans-serif;
    color:#630;
}

/*フッター終わり*/


/*gototop*/
.pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.pagetop a {
  display: block;
  z-index: 999;
  /*padding: 8px 0 0 8px;*/
  border-radius: 50px;
  width:  60px;
  height: 60px;
  background-color: #9FD6D2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

.pagetop a:hover {
  text-decoration: none;
  opacity: 0.7;
}



/*bgアニメーション*/
@-webkit-keyframes bg_dra_anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -480px 480px;
  }
}

@keyframes bg_dra_anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -480px 480px;
  }
}
.bg_dra {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffb6c1 url(../images/cat_bg.png) repeat 0 0;
  z-index: -1;
  overflow: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 1.4s;
          transition-duration: 1.4s;
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
          transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  -webkit-animation-name: bg_dra_anim;
          animation-name: bg_dra_anim;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.bg_dra.is-show {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.bg_main_dra {
  width: 100%;
  height: 100%;
}

@-webkit-keyframes catalog_back_txt_main_dra_img {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes catalog_back_txt_main_dra_img {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


@media (max-width: 940px) and (min-width: 40em) {

	.main h1{
		font-size: 18px;}

}