@charset "UTF-8";

body{
	margin: 0 auto;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	background: #00e4fd;
	width:100%;
}
img {
	max-width: 100%;
	height: auto;
}
br.pc{
  display: none;
}
br.tab{
  display: none;
}
p{
  margin:0;
}
.b{
  font-weight: bold;
  font-size:120%;
}

a:link {color:#000000; text-decoration: none; } /*未訪問のリンクの色*/
a:visited {color:#000000; text-decoration: none; } /*訪問済みのリンクの色*/
a:hover {color:#ff0000; text-decoration: none; } /*カーソルが乗っているリンクの色*/
a:active {color:#ff0000; text-decoration: none; } /*クリック中のリンクの色*/

/*見出し*/
h1{
  text-align: center;
  margin:0;
}
h2{
	background:none;
	color: #ffffff;
	padding:0;
	text-align: center;
	margin: 0 0 20px 0;
  border-bottom: dotted 3px #fff;
}

/*header*/
header{
	background-color: #00e4fd;
}
header .header-inner .header_pc {
	display: none;
}
header .header-inner .header_sp {
	display: block;
}
header .header-inner .header_sp img{
	max-width: 100%;
	margin: 10px auto;
  vertical-align:bottom;
}

/*sec01*/
.sec01{
  background-color: #ffff7a;
  padding: 10px;
}
.sec01 .sec01-inner .about{
  margin:10px 0 20px 0;
  text-align: center;
}
.sec01 .sec01-inner .cast-out .cast{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  text-align: center;
}
.sec01 .sec01-inner .cast-out .cast img{
  border-radius: 20px;
}
.sec01 .sec01-inner .cast-out .cast .cast-inner-f{
  width: 90%;
  margin:10px 0;
}
.sec01 .sec01-inner .cast-out .cast .cast-inner{
  width: 47%;
  margin:10px 0;
}
.sec01 .sec01-inner .name{
  color:#151515;
  font-weight: bold;
  font-size: 1.2em;
}
.sec01 .sec01-inner .name .miyagi{
  background: #309dca;
  color:#fff;
  border-radius: 20px;
  margin-left:10px;
  padding: 0 10px;
  font-size: 0.9em;
}
.sec01 .sec01-inner .name .aomori{
  background: #bc1a1b;
  color:#fff;
  border-radius: 20px;
  margin-left:10px;
  padding: 0 10px;
  font-size: 0.9em;  
}
.sec01 .sec01-inner .name .yamagata{
  background: #25478c;
  color:#fff;
  border-radius: 20px;
  margin-left:10px;
  padding: 0 10px;
  font-size: 0.9em;
}
.sec01 .sec01-inner .name .hukushima{
  background: #dc751c;
  color:#fff;
  border-radius: 20px;
  margin-left:10px;
  padding: 0 10px;
  font-size: 0.9em;
}
.sec01 .sec01-inner .name .akita{
  background: #724e25;
  color:#fff;
  border-radius: 20px;
  margin-left:10px;
  padding: 0 10px;
  font-size: 0.9em;
}
.sec01 .sec01-inner .name .iwate{
  background: #709042;
  color:#fff;
  border-radius: 20px;
  margin-left:10px;
  padding: 0 10px;
  font-size: 0.9em;
}

/*sec02*/
.sec02{
  background-color:#fdf4dd;
  padding:10px;
}
.sec02 .sakuhinnav{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  text-align: center;    
}
.sec02 .sakuhinnav p{
  width:33.3333%;
}
.sec02 .sakuhin-ttl .name{
  text-align: center;
}
.sec02 .name img{
  width:100%;
}
.sec02 .sakuhin-out{
  padding:20px 10px;
  margin:20px 0;
}
.sec02 .sakuhin-out .about{
  margin:10px 0;
}
.sec02 .sakuhin-photo{
  margin: 10px 0;
  text-align: center;
}
.sec02 .sakuhin-photo img{
  border-radius: 20px;
  width:100%;
  margin-bottom: 10px;
}
.sec02 .aomori{
  background: #bc1a1b;
  color:#fff;
  border-radius: 20px;
}
.sec02 .akita{
  background: #724e25;
  color:#fff;
  border-radius: 20px;
}
.sec02 .iwate{
  background: #709042;
  color:#fff;
  border-radius: 20px;
}
.sec02 .yamagata{
  background: #25478c;
  color:#fff;
  border-radius: 20px;
}
.sec02 .miyagi{
  background: #309dca;
  color:#fff;
  border-radius: 20px;
}
.sec02 .hukushima{
  background: #dc751c;
  color:#fff;
  border-radius: 20px;
}

/*article*/
.article{
  background-color:#79c815;
  padding:20px  10px;
}

/*article*/
.article .bn-area{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  text-align: center;  
}
.article .bn-area p{
  width:48%;
  margin:5px 0;
}
.article .bn-area p img{
  vertical-align: bottom;
}

/*footer*/
.footer{
  background: #00e4fd;
}
.footer p{
  text-align: center;
  padding: 10px 0;
}

/* ########### 640px以上 ########### */
@media screen and (min-width: 640px){
  body{
    width: 100%;
  }
  br.sp{
    display: none;
  }
  br.pc{
    display: block;
  }
  br.tab{
    display: block;
  }

	/*header*/
  header{
    padding:20px 0;
  }
	header .header-inner .header_sp {
		display: none;
	}
	header .header-inner .header_pc {
		display: block;
		margin:0 auto;
		text-align: center;
	}
	header .header-inner .header_pc img{
		max-width: 100%;
		margin: 0 auto;
    vertical-align:bottom;
	}
  
  /*sec01*/
  .sec01{
    padding:30px 0 60px 0;
  }
  .sec01 .sec01-inner .about{
    text-align: center;
    line-height: 1.8em;
    font-size: 1.2em;
    margin-bottom: 60px;
  }
  .sec01 .sec01-inner .cast-out .cast .cast-inner-f{
    width: 47%;
  }
  .sec01 .sec01-inner .cast-out .cast .cast-inner{
    width: 24%;
  }

  /*sec02*/
  .sec02{
    padding:40px 0 20px 0;
  }
	.sec02 .sec02-inner{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	}
  .sec02 .sakuhin-out{
    margin:10px 0;
    width:45%;
  }
  .sec02 .name img{
    width:100%;
  }
  .sec02 .sakuhin-out .about{
    font-size:1.0em;
    line-height: 1.5em;
    text-align: center;
  }
  .sec02 .sakuhin-photo img{
    width:90%;
  }
  
  /*article*/
  .article .bn-area p{
    width:32%;
  }

}

/* ########### 1280px以上 ########### */
@media screen and (min-width: 1280px){
  br.tab{
  display: none;
}

	/*header*/
	header .header-inner {
    width:1280px;
    margin: 0 auto;
		padding:0;
	}
	header .header-inner .header_pc img {
		max-width: 1280px;
		margin: 0 auto;
	}
  
  /*sec01*/
	.sec01 .sec01-inner{
    width:1280px;
    margin: 0 auto;
		padding:0;
	}
  .sec01 .sec01-inner .cast-out .cast .cast-inner{
    width: 23%;
  }
  
  
  /*sec02*/
  .sec02 .sakuhinnav{
    width:1280px;
    margin: 0 auto;
		padding:0;
	}
  .sec02 .sakuhinnav p{
    width:16.6666%;
  }
	.sec02 .sec02-inner{
    width:1280px;
    margin: 20px auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	}
  .sec02 .sakuhin-out{
    margin:10px 0;
    width:31%;
  }
  

  /*article*/
	.article .bn-area{
    width:1280px;
    margin: 0 auto;
		padding:0;
	}
}