@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------
1.0 Document Setup
--------------------------------------------------------------*/

/*------------------------------
	1.1 Typography
------------------------------*/

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

html {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	font-size: 62.5%;
}

body, button, input, select, textarea {
	font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.7;
	color: #333333;
}

ul, li {
	vertical-align: top;
	list-style: none;
}

a{
	text-decoration: none;
}

/*------------------------------
	1.2 Links
------------------------------*/

a {
	color: #333333;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0.40);
}

a:hover {
	text-decoration: underline;
}

a:active, a:focus, a:hover {
	outline: none;
}

/*------------------------------
	1.3 Content
------------------------------*/

img {
	width: 100%;
	height: auto;
}

b, strong {
	font-weight: bold;
}

/*------------------------------
	1.4 Helper
------------------------------*/
.hide {
	display: none;
}

/* clearfix */
.cf {
	zoom: 1;
}

.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after {
	clear: both;
}

/* float */

.float-left {
	float: left;
}

.sp-tb-only {
	display:none;
}

.tb-only{
	display: none;
}

.sp-only{
	display: none;
}

.mb30{
	margin-bottom: 30px;
}

/*--------------------------------------------------------------
2.0 header
--------------------------------------------------------------*/

.pagetop {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 15px;
	z-index: 9999;
}

.pagetop a {
	display: block;
	background-color: #666;
	text-align: center;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	padding: 5px 10px;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.pagetop a:hover {
	display: block;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	padding: 5px 10px;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}


header{
	position: relative;
	overflow: hidden;
	margin: 0% 0;
	padding: 0px 0;
}

header:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	margin: 43% 0% 0%;
	background: #FFC926;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
	-webkit-transform: rotate(-24deg);
	-ms-transform: rotate(-24deg);
	transform: rotate(-24deg);
	z-index: -1;
}

header .main {
	box-sizing: boder-box;
	width: 100%;
	max-width: 1140px;
	height: 100%;
  margin: 0 auto;
	position: relative;
}

header .main_v {
	width: 130%;
	max-width: 1500px;
  margin: 0 auto;
	margin-left:-15%;
}

header .main .bnr{
	width:38%;
	max-width: 450px;
	position: absolute;
	top:60%;
	left:3%;
}

header .main .bnr img{
	vertical-align: bottom;
	background: #fff;
	border: 5px solid #fff;
	box-sizing: border-box;
}

header .main .bnr p{
	color:#333;
	text-align: center;
	padding:5px 0;
	font-size:15px;
}

header .main .bnr img:hover{
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}


/*------------------------------
	2.1 nav
------------------------------*/

nav{
	height:80px;
	overflow: hidden;
	width: 100%;
	background-color:#FFEFBF;
}

.nav-inner{
	max-width: 1140px;
	margin: 0 auto;
}

.nav_t{
	float:left;
	text-align:center;
	height:100%;
	padding:19px 5%;
}

nav ul{
	float: right;
	padding: 30px 5%;
	box-sizing: border-box;
}


nav ul li{
	display:inline-block;
	text-align: center;
	padding: 0 50px;

}

@media screen and (min-width:641px) and ( max-width:980px){
	.nav_t{
	float:left;
	text-align:center;
	height:100%;
	padding:19px 5%;
}

nav ul{
	float: right;
	padding: 30px 0;
	width:50%;
}


nav ul li{
	display:inline-block;
	text-align: center;
	padding: 0 3%;

}



}



/*--------------------------------------------------------------
3.0 main
--------------------------------------------------------------*/

.inner{
	width:100%;
	max-width: 1140px;
	margin: 0 auto;
	padding:50px 0;
}

.title{
	text-align: center;
}

.title img{
	width: auto;
	margin: 0 auto;
}

/*------------------------------
	3.1 profile
------------------------------*/

.ushimaru,
.ushimomoko{
	float:left;
	width:50%;
}

/*------------------------------
	3.2 movie
------------------------------*/

#movie{
	background:#FFEFBF;
}

#movie a {
	display: inline-block;
	vertical-align: bottom;
}

#movie img.thumb {
	width: 100%;
	vertical-align: bottom;
}

#movie p{
	text-align: center;
}

#movie ul{
	width:98%;
	padding:30px 0;
	margin:0 auto;
}

#movie li{
	list-style: none;
	float: left;
	margin-right: 2%;
	width: 32%;
	position: relative;
	padding-bottom:30px;
}

#movie li:nth-child(3n){
		margin-right: 0;
}

.youtube_movie {
	position: relative;
}

.youtube_movie .play {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 18%;
	height: 32%;
	-webkit-transform: scale3d(1, 1, 1);
	-moz-transform: scale3d(1, 1, 1);
	-o-transform: scale3d(1, 1, 1);
	-ms-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-webkit-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
}

.youtube_movie .play img {
	width: 100%;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	z-index: 100;
	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
}

.youtube_movie .movie_hover {
	background-color: rgba(0,0,0,0);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
}

.youtube_movie:hover .play {
	-webkit-transform: scale3d(1.2, 1.2, 1);
	-moz-transform: scale3d(1.2, 1.2, 1);
	-o-transform: scale3d(1.2, 1.2, 1);
	-ms-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}

.youtube_movie:hover .play img {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.youtube_movie:hover .movie_hover {
	background-color: rgba(0,0,0,0.4);
}

#movie .movie_title {
	font-size: 16px;
	font-size: 1.6rem;
	color: #333;
	padding:10px;
}


/*------------------------------
	3.3 download
------------------------------*/

#download p{
	text-align: center;
}

#download ul{
	width:98%;
	padding:30px 0 0 0;
	margin:0 auto;
}

#download .wallpaper,
#download .illust{
	list-style: none;
	float: left;
	margin-right: 2%;
	width: 32%;
	position: relative;
	padding-bottom:30px;
}

#download li:nth-child(3n){
		margin-right: 0;
}

.btn-wall{
	width:48%;
	float: left;
	text-align: center;
	margin-right:4%;
}

.btn-wall:nth-child(2n){
	margin-right:0;
}

.btn-illust{
	text-align: center;
}

#download .info{
	background: #FFF9E3;
	padding:30px;
	margin-top:30px;
}

#download .info h3{
	font-size:20px;
	font-weight:600;
	text-align: center;
	padding:0 0 10px 0;
}

#download .info .win,
#download .info .mac{
	padding-top:10px;
	float: left;
	width: 48%;
	margin-right:4%;
}

#download .info .mac{
	margin-right:0%;
}

#download .info .win h4,
#download .info .mac h4{
	border-bottom: 2px solid #FF9326;
	font-size:15px;
	color:#FF9326;
}

#download .info .win li,
#download .info .mac li{
	list-style:decimal;
	margin-left:18px;
	line-height:2.0;
}

#download .info p{
	text-align: left;
	padding-top:5px;
	font-size:13px;
}

/*------------------------------
	3.4 ushimaru_move
------------------------------*/

.ushimaru_move{
	height:260px;
	position: relative;
}

.ushimaru_move_inner{
	height:260px;
background-image: url(http://www.marinfood.co.jp/bazaar/images/fence.png), url(http://www.marinfood.co.jp/bazaar/images/ushimaru_move.gif), url(http://www.marinfood.co.jp/bazaar/images/bazaar_mountain.png), -webkit-linear-gradient(#ffffff,#DBF7FF,#DBF7FF, #AAE8FF), -webkit-linear-gradient(#FFEFBF, #FFFFFF);
background-image: url(http://www.marinfood.co.jp/bazaar/images/fence.png), url(http://www.marinfood.co.jp/bazaar/images/ushimaru_move.gif), url(http://www.marinfood.co.jp/bazaar/images/bazaar_mountain.png), -o-linear-gradient(#ffffff,#DBF7FF,#DBF7FF, #AAE8FF), -o-linear-gradient(#FFEFBF, #FFFFFF);
background-image: url(http://www.marinfood.co.jp/bazaar/images/fence.png), url(http://www.marinfood.co.jp/bazaar/images/ushimaru_move.gif), url(http://www.marinfood.co.jp/bazaar/images/bazaar_mountain.png), linear-gradient(#ffffff,#DBF7FF,#DBF7FF, #AAE8FF), linear-gradient(#FFEFBF, #FFFFFF);
	position: relative;
	background-size: auto 38px,70px auto,auto 210px, auto 210px, auto 72px;
	background-position: 0 173px,85% 60px,0 0, 0 0,0 210px;
	background-repeat: repeat-x, no-repeat, repeat-x,repeat-x,repeat-x;
	margin: 0;
	-webkit-animation: walk 80s linear infinite;
	-moz-animation: walk 80s linear infinite;
	-ms-animation: walk 80s linear infinite;
	animation: walk 80s linear infinite;
}

@keyframes walk {
 0% {background-position: 0 172px, 85% 60px,0 0, 0 0, 0 210px;}
 100% {background-position: 2760px 172px, 85% 60px,1500px 0, 0 0, 0 210px;}
}

/*chrome&safari*/
@-webkit-keyframes walk {
 0% {background-position: 0 172px, 85% 60px,0 0, 0 0, 0 210px;}
 100% {background-position: 2760px 172px, 85% 60px,1500px 0, 0 0, 0 210px;}
}

/*firefox*/
@-moz-keyframes walk {
 0% {background-position: 0 172px, 85% 60px,0 0, 0 0, 0 210px;}
 100% {background-position: 2760px 172px, 85% 60px,1500px 0, 0 0, 0 210px;}
}

/*ie*/
@-ms-keyframes walk {
 0% {background-position: 0 172px, 85% 60px,0 0, 0 0, 0 210px;}
 100% {background-position: 2760px 172px, 85% 60px,1500px 0, 0 0, 0 210px;}
}

.sns_share{
	padding:20px 0;
}

.sns_share_inner{
	max-width:1140px;
	width:100%;
	text-align:center;
	margin:0 auto;
}

.sns_share_inner .share{
	font-size:24px;
	text-align:center;
}

.sns_share_inner .sns_btn{
	padding:15px 0;
}

.sns_share_inner .sns_btn li{
	display:inline-block;
	padding: 0 1px;
}

.sns_share_inner .sns_fb{
	height:27px;
	margin-top:-3px;
}

.sns_share_inner .sns_line{
	display:none;
}


/*--------------------------------------------------------------
4.0 footer
--------------------------------------------------------------*/

.footer{
	height: 80px;
}

.footer .footer_inner{
	max-width: 1140px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.footer .sns_btn{
	padding: 30px;
	position: absolute;
	left: 0;
}

.footer .sns_btn li{
	display: inline-block;
	padding: 0 1px;
}

.footer .footer_logo{
	position: absolute;
	right: 0;
	padding: 15px;
	width: 168px;
}

/*--------------------------------------------------------------
5.0 footer
--------------------------------------------------------------*/

/*------------------------------
	5.1 footer
------------------------------*/

#footer {
	background: #F2F2F2;
}

#footer_inner {
	max-width: 1140px;
	width: 99%;
	margin: 0 auto;
}

#footer_inner .footer_nav {
	width: 80%;
	float: left;
}

.footer_column {
	float: left;
	width: 14%;
	line-height: 1.5;
	margin: 20px 10px;
}

.footer_column_title a {
	margin-bottom: 15px;
	font-size: 14px;
	color: #777;
	font-weight: 700;
	background: url("http://www.marinfood.co.jp/images/arrow/footer_arrow.gif") no-repeat left center;
	padding-left: 12px;
}

.footer_column_list li {
	background: url("http://www.marinfood.co.jp/images/arrow/footer_arrow.gif") no-repeat left 7px;
	padding-left: 12px;
}

.footer_column_list li a {
	font-size: 11px;
	line-height: 2;
	list-style: none;
	color: #555;
}

#footer_inner .footer_sns {
	width: 20%;
	float: left;
	text-align: center;
	margin: 0 auto;
	padding: 50px 0;
}

#footer_inner .footer_sns>p {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 30px;
}

.footer_sns .sns_bar>p {
	font-size: 15px;
	font-weight: 600;
	color: #777;
}

.footer_sns .sns_bar>p:before, .footer_sns .sns_bar>p:after {
	width: 30px;
	position: relative;
	top: -5px;
	content: " ";
	display: inline-block;
	border-top: 1px solid #999;
}

.footer_sns .sns_bar>p:before {
	margin-right: 10px;
}

.footer_sns .sns_bar>p:after {
	margin-left: 10px;
}

.footer_sns .sns_bar ul {
	width: 126px;
	margin: 0 auto;
	padding: 15px 0;
}

.footer_sns .sns_bar li {
	width: 32px;
	float: left;
	padding-right: 15px;
}

.footer_sns .sns_bar li:last-child {
	padding-right: 0px;
}

/*------------------------------
	5.2 footer_bottom
------------------------------*/

#footer_bottom {
	background: #999;
	color: #fff;
	height: 60px;
}

#footer_bottom_inner {
	max-width: 1140px;
	width: 100%;
	margin: 0px auto;
	position: relative;
	font-size: 12px;
}

.footer_static_page {
	position: absolute;
	left: 0;
	top: 20px;
}

.footer_static_page li {
	display: inline-block;
	list-style: none;
	padding: 0 10px;
	border-right: 1px solid #FFFFFF;
}

.footer_static_page li:last-child {
	border-right: none;
}

.footer_static_page li a {
	color: #FFFFFF;
}

.footer_copyright {
	position: absolute;
	right: 0px;
	top: 20px;
	font-size: 12px;
}