@charset "UTF-8";
/*デフォルト（480px未満）
	デバイス共通で利用するスタイル
	スマートフォンに最適化したレイアウト*/

@media screen and (min-width : 480px){
  /* 最小幅 480px 以上の指定 */
}


html*{
	min-height:100%;
	box-sizing:border-box;
	}
	
body{
	background: linear-gradient(#9ad4fc,#dcffb8);
	font-family: 'メイリオ', 'Hiragino kaku Gothic Pro', 'sans-serif';
	box-sizing:border-box;
}
@media only screen and (min-width: 481px){
	body{
	background: #ffffff;
	}	
}
	
img {
	max-width: 100%;
}

#wrapper{ /* 小画面用 */
	width:100%;
}
@media only screen and (min-width: 481px){
	#wrapper{ /* 大画面用 */
		max-width:1920px;
		padding: ;
		margin: ;
	}
}

#top_title{ /* 小画面用 */
	font-family: 'Merriweather',cursive;
	float: left;
	margin: -12px 0px 0px 8px;
	font-size: 16px;
	color: #edf5fa;
}
@media only screen and (min-width: 481px){ /* 大画面用 */
	#top_title{
		margin: 8px 0px 0px 12px;
		font-size: 32px;
		color: #afafa8;
		opacity: 0.5;
	}
}

#header-img { /* 小画面用 */
	margin: 24px 0px 0px 0px;
	height: 60px;
	background-image: url("img/header_s.png");
	background-size: 100% auto;
	background-position:bottom;
	background-repeat: no-repeat;
}

@media only screen and (min-width: 481px){ /* 大画面用 */
	#header-img{
		margin: 12px 0px 0px 0px;
		height:120px;
		background-image: url("img/header2.png");
	}
}

#main{ /* 小画面*/
	margin: 8px;
	padding: 8px 8px;
	border: solid 2px #e2e1ac;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

@media only screen and (min-width: 481px){ /* 大画面用 */
	#main{
	margin: 20px 4px auto 40px;
	padding: 16px 20px;
	width: 80%;
	font-size: 16px;
	border: solid 1px #000;
	border-radius: 0px;
	}
}

h1{
	margin:0 0 0 4px;
	color:#00739c;
	font-size: 1.5em;
}

p{
	padding: 8px;
}


/*img.left{
	float: left;
	margin-right: 0.8em;
	margin-bottom: 0.5em;
	
}
*/


.flex-container {
	display: flex;
	width:;
	margin: 20px 0;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:;
	background-color:;
}

@media only screen and (min-width: 481px){ /* 大画面用 */
	.flex-container {
		justify-content: flex-start;
	}
}

.flex-item {
	order: <integer>;
	width:160px;
	height:240px;
	text-align:center;
	border: 1px solid #000;
	background-color:;
	opacity: 0.7;
	margin: 8px;
	padding: 6px;
	background-color:#ffd5d5;
}

footer{
	width: 100%;	
	background-color:#edf5fa;
}

	.footer-container{
	margin: 16px;
	padding:30px ;
	}


/* 初期状態の CSS の設定を記述 */
.button01 {
  border: 1px solid #76A3AF;
  border-radius: 4px;
  padding: 10px 20px;
  display: inline-block;
	text-align: center;
	text-decoration:none;
  background: lightblue;  /* アニメーション対象の初期設定の値 */
  color: darkblue;  /* アニメーション対象の初期設定の値 */
  /* transition プロパティの指定 */
  transition: 0.4s;
}
 
/* アニメーション最終状態（到達点）の CSS の設定を記述 */
.button01:hover {
  background: darkblue;
	color: white;
}

/* アニメーション最終状態（到達点）の CSS の設定を記述  リンク用設定*/
.button01 a:link {
	color: darkblue;
	text-decoration:none;
}
.button01 a:visited {
	color: darkblue;
	text-decoration:none;
}
.button01 a:hover {
  background: darkblue;
	color: white;
}
.button01 a:active {
  background: darkblue;
	color: white;
	text-decoration:none;
}


/*sire.htmlの画像効果用iosで動かない*/
.view {
  width: 195px;
  height: 260px;
  margin: 10px;
  float:;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.view .mask, .view .contents {
  width: 195px;
  height: 260px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  margin:80px 10px 20px 10px;
  transform: translate(300px, -300px);
  transition: all 0.2s ease-in-out;
}
.view p {
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 10px 20px 20px;
  text-align: center;
  transform: translate(-300px, 300px);
  transition: all 0.2s ease-in-out;
}
.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
  border-radius:4px;
  transform: translate(0px, 300px);
  transition: transform 0.2s 0.1s ease-in-out;
}
.view a.info:hover {
  box-shadow: 0 0 5px #A0F3F4;
}
.view .mask { 
  background-color: rgba(0,0,0, 0.4); 
  width: 450px;
  height: 450px;
  opacity: 0;
  transform: translate(265px, 145px) rotate(45deg);
  transition: all 0.2s ease-in-out;
} 
 
.view:hover .mask { 
  opacity:1; 
  transform: translate(-80px, -125px) rotate(45deg);
}							  
.view:hover h2 { 
  transform: translate(0px,0px);
  transition-delay: 0.3s; 
}
.view:hover p { 
  transform: translate(0px,0px); 
  transition-delay: 0.4s;
}
.view:hover a.info { 
  transform: translate(0px,0px); 
  transition-delay: 0.5s;
}

.list{
	list-style-type:none;
	font-size:1.4em;
	font-weight:;
	line-height:1.5;
}

.hyo1 {
		border-collapse:collapse;
	}

	
	.hyo1 thead{
		background:#f1c1ba;
		
	}
	.hyo1 td{
			border: 1px solid #b7b7b7;
		
	}
	
	
	.card img{
		width: 240px;
		height :240px;
		object-fit:cover; /* 縦横比を保ちはみ出る部分はトリミング */
	}
	
	
.flex-item2{
	order: <integer>;
	width:240px;
	height:300px;
	text-align:center;
	border:1px solid #c0c0c0;
	background-color:;
	opacity:;
	margin: 8px;
	padding: ;
	background-color:#ffd5d5;
}