@charset "UTF-8";


/* ------------------------------
	main-visual
------------------------------ */
#logo_red {
	fill: none;
	stroke: #e83428; /*線の色を指定する*/
	stroke-dasharray: 2000;/*線の間隔を指定する*/
	stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 1;/*線の太さを指定する*/
	-webkit-animation: hello 3s ease-in forwards;
	animation: logo_red 3s ease-in forwards;
	position: relative;
	z-index: 2;
}

#logo_blue {
	fill: none;
	stroke: #182d50; /*線の色を指定する*/
	stroke-dasharray: 2000;/*線の間隔を指定する*/
	stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 1;/*線の太さを指定する*/
	-webkit-animation: hello 3s ease-in forwards;
	animation: logo_blue 3s ease-in forwards;
	z-index: 1;
}

#logo_yellow {
	fill: none;
	stroke: #be9245; /*線の色を指定する*/
	stroke-dasharray: 2000;/*線の間隔を指定する*/
	stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 1;/*線の太さを指定する*/
	-webkit-animation: hello 3s ease-in forwards;
	animation: logo_yellow 3s ease-in forwards;
	z-index: 1;
}

#logo_black {
	fill: none;
	stroke: #0f0f0f; /*線の色を指定する*/
	stroke-dasharray: 2000;/*線の間隔を指定する*/
	stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 1;/*線の太さを指定する*/
	-webkit-animation: hello 3s ease-in forwards;
	animation: logo_black 3s ease-in forwards;
	z-index: 1;
}

#logo_katsu {
	fill: #e83428;
	animation: logo_katsu 3s ease-in forwards;
	position: relative;
	z-index: 2;
}

@keyframes logo_red {
	0% {
		stroke-dashoffset: 2000;
		fill:transparent; /*透過*/
	}
	
	50% {
		fill:transparent; /*透過*/
	}
	
	90% {
		stroke-dashoffset: 0;
		fill:#e83428;
		stroke-width: 0;/*線の太さを指定する*/
	}
	
	100% {
		stroke-dashoffset: 0;
		fill:#e83428;
		stroke-width: 0;/*線の太さを指定する*/
	}
}

@keyframes logo_blue {
	0% {
		stroke-dashoffset: 2000;
		fill:transparent; /*透過*/
	}
	
	50% {
		fill:transparent; /*透過*/
	}
	
	90% {
		stroke-dashoffset: 0;
		fill:#182d50;
		stroke-width: 0;/*線の太さを指定する*/
	}
	
	100% {
		stroke-dashoffset: 0;
		fill:#182d50;
		stroke-width: 0;/*線の太さを指定する*/
	}
}

@keyframes logo_yellow {
	0% {
		stroke-dashoffset: 2000;
		fill:transparent; /*透過*/
	}
	
	50% {
		fill:transparent; /*透過*/
	}
	
	90% {
		stroke-dashoffset: 0;
		fill:#be9245;
		stroke-width: 0;/*線の太さを指定する*/
	}
	
	100% {
		stroke-dashoffset: 0;
		fill:#be9245;
		stroke-width: 0;/*線の太さを指定する*/
	}
}

@keyframes logo_black {
	0% {
		stroke-dashoffset: 2000;
		fill:transparent; /*透過*/
	}
	
	50% {
		fill:transparent; /*透過*/
	}
	
	90% {
		stroke-dashoffset: 0;
		fill:#0f0f0f;
		stroke-width: 0;/*線の太さを指定する*/
	}
	
	100% {
		stroke-dashoffset: 0;
		fill:#0f0f0f;
		stroke-width: 0;/*線の太さを指定する*/
	}
}


@keyframes logo_katsu {
	0% {
		transform: scale(1.2);
		opacity: 0;
	}
		
	95% {
		transform: scale(4);
		opacity: 0;
	}
	
	100% {
		transform: scale(1);
		opacity: 1;
	}
	
}


@media screen and (min-width: 751px), print  {
	#main-visual {
		height: 894px;
		box-sizing: border-box;
		position: relative;
    background: #fff;
    z-index: 20;
	}

	#main-visual:before,
	#main-visual:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
	}

	#main-visual:before {
		width: 604px;
		height: 385px;
		background: url(../images/mainvisual-left.png) no-repeat;
		background-size: contain;
		left: 0;
	}
		
	#main-visual:after {
		width: 251px;
		height: 383px;
		background: url(../images/mainvisual-right.png) no-repeat;
		background-size: contain;
		right: 0;
	}
	
	#main-visual .site-logo svg {
		width: 390px;
		height: 390px;
		position: absolute;
		top: 150px;
		left: 50%;
		margin-left: -190px;
	}
		
	.main-visual-lead {
		width: 459px;
		height: 129px;
		text-indent: -9999px;
		background: url(../images/mainvisual-brand.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 607px;
		left: 50%;
		margin-left: -230px;
	}
	.main-visual-btn {		
		position: absolute;
		bottom: 60px;
		right: 20px;
	}
	.main-visual-btn a.archive-link {
		width: 380px;		
	}
	#news_area {
		width: 100%;
		padding: 0 15px;
		color: #ffffff;
		background: rgba(17, 17, 17, .8);
		position: absolute;
		bottom: 0;
		z-index: 99;
		box-sizing: border-box;
	}
	
	#news_area #news_title,
	#news_contents {
		display: block;
		height: 38px;
		margin: 0;
		line-height: 38px;
		box-sizing: border-box;
	}
	
	#news_area #news_title {	
		overflow: hidden;
		min-width: 165px;
		font-size: 18px;
		color: #111111;
		letter-spacing: 2px;
		text-align: center;
		background: #be9245;
	}
	
	#news_contents_wrap {
		height: 38px;
		line-height: 38px;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	#news_title_sp {
		display: none;
	}
	
	#news_contents ul {
		margin: 0;
		position: relative;
	}
	
	#news_contents ul:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#news_contents ul li {
		width: 100%;
		display: none;
	}
	#news_contents ul li a {
		color: #fff;
	}
	#news_contents ul li a:hover {
		color: #999;
	}
	
	#news_contents li span {
		width: 100px;
		margin-right: 15px;
		margin-left: 7px;
	}
		
} @media screen and (max-width: 750px) {
/* スマホ用animation */
	#main-visual {
		padding-top: 126.67vw;
		box-sizing: border-box;
		position: relative;
    background: #fff;
    z-index: 20;
	}

	#main-visual:before,
	#main-visual:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
	}

	#main-visual:before {
		width: 80.53vw;
		height: 51.33vw;
		background: url(../images/mainvisual-left.png) no-repeat top left;
		background-size: contain;
		left: 0;
	}
		
	#main-visual:after {
		width: 33.467vw;
		height: 51.067vw;
		background: url(../images/mainvisual-right.png) no-repeat top right;
		background-size: contain;
		right: 0;
	}

	#main-visual .site-logo svg {
		width: 52vw;
		height: 52vw;
		position: absolute;
		top: 30.8vw;
		left: 24vw;
	}
	
	
	.main-visual-lead {
		width: 73.6vw;
		height: 20.67vw;
		text-indent: -9999px;
		background: url(../images/mainvisual-brand.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 87.47vw;
		left: 13.2vw;
	}
	.main-visual-btn {		
		position: absolute;
		bottom: -12vw;
		left: 50%;
		margin-left: -170px;
		
	}
	.main-visual-btn a.archive-link {
		width: 340px;		
	}
		


	/* slider */
	#news_area {
		min-height: 105px;
		padding: 15px 15px 8px;
		background: #414141;
		box-sizing: border-box;
		overflow: hidden;
		margin-bottom: 80px;
	}

	#news_title_sp {
		display: inline-block;
		padding: 0 12px;
		font-size: 16px;
		letter-spacing: 3px;
		background: #be9245;
	}
	
	#news_contents {
		padding-bottom: 13px;
	}
	
	#news_contents > ul:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#news_contents > ul li {
		display: none;
		padding: 9px 15px 0;
		color: #fff;
		font-size: 14px;
	}
	
	#news_contents ul li a {
		color: #fff;
	}
	#news_contents ul li a:hover {
		color: #999;
	}
	
	#news_contents > ul li span {
		display: block;
		margin-left: 94px;
		margin-top: -0.5em;
		margin-bottom: 5px;
		line-height: 1.75;
	}
	
}

/* ------------------------------
	section-introduction
------------------------------ */
.brandstandard {
	border: 1px solid #ccc;
	padding: 30px 0 40px 0;
	width: 75%;
	margin: 0 auto;
}
.brandstandard ul li {
	margin-bottom: 0.3em;
}

@media screen and (min-width: 751px), print  {
	#section-introduction {
		padding-top: 78px;
		padding-bottom: 74px;
	}

	.bg-ougi {
		position:relative;
	}
	
	.bg-ougi:before,
	.bg-ougi:after {
		content: "";
		width: 327px;
		min-height: 116px;
		height: 100%;
		background: url(../images/ougi-bg.png) repeat;
		background-size: contain;
		position: fixed;
		top: 0;
	}
	
	.bg-ougi:before {
		left: 0;
	}

	.bg-ougi:after {
		right: 0;
		transform: scale(-1, 1);
	}

} @media screen and (max-width: 750px) {
	#section-introduction {
		padding-top: 48px;
		padding-bottom: 54px;
	}

	.bg-ougi {
		position:relative;
	}
	
	.bg-ougi:before,
	.bg-ougi:after {
		content: "";
		width: 100px;
		min-height: 116px;
		height: 100%;
		background: url(../images/ougi-bg.png) repeat;
		background-size: contain;
		position: absolute;
		top: 0;
	}
	
	.bg-ougi:before {
		left: 0;
	}

	.bg-ougi:after {
		right: 0;
		transform: scale(-1, 1);
	}
	
	.brandstandard {
		width: 100%;
		padding: 30px 0 40px 0;
	}

}

/* ------------------------------
	section-katsumeshi
------------------------------ */
@media screen and (min-width: 751px), print  {
	#section-katsumeshi {
    position: relative;
    z-index: 3;
		padding-top: 83px;
		padding-bottom: 0;
		background: url(../images/item-bg_katsumeshi.png) repeat;
	}
} @media screen and (max-width: 750px) {
	#section-katsumeshi {
    position: relative;
    z-index: 3;
		padding-top: 48px;
		padding-bottom: 10px;
		background: url(../images/item-bg_katsumeshi.png) repeat;
		background-size: 58px 32.5px;
	}
}

/* ------------------------------
	section-item
------------------------------ */
@media screen and (min-width: 751px), print  {
	#section-item {
    position: relative;
    z-index: 3;
		padding-top: 83px;
		padding-bottom: 0;
		background: url(../images/item-bg.png) repeat;
	}

	#section-item .item_block {
		margin-bottom: 72px;
	}
	
	#section-item .item-name {
		margin-bottom: 18px;
		text-align: center;
		font-size: 26px;
	}

	#section-item .item-info {
		position: relative;
	}
	
	#section-item .item-info dt {
		width: 97px;
		margin-bottom: 6px;
		color: #fff;
		text-align: center;
		line-height: 26px;
		background: #182d50;
		position: absolute;
		left: 0;
	}
	
	#section-item .item-info dd {
		padding-left: 115px;
		line-height: 2;
	}
	
} @media screen and (max-width: 750px) {
	#section-item {
    position: relative;
    z-index: 3;
		padding-top: 48px;
		padding-bottom: 10px;
		background: url(../images/item-bg.png) repeat;
		background-size: 58px 32.5px;
	}

	#section-item .item_block {
		margin-bottom: 46px;
	}
	
	#section-item .item-name {
		margin-bottom: 18px;
		text-align: center;
		font-size: 20px;
	}

	#section-item .item-info {
		position: relative;
	}
	
	#section-item .item-info dt {
		width: 87px;
		margin-bottom: 6px;
		color: #fff;
		text-align: center;
		line-height: 20px;
		background: #182d50;
		position: absolute;
		left: 0;
	}
	
	#section-item .item-info dd {
		padding-left: 105px;
		margin-bottom: 6px;
		line-height: 20px;
	}
	
}

#section-item .img-area{
  position: relative;
  background: #fff;
  line-height: 1em;
}

#section-item .img-area img:hover{
  opacity: 0.8;
  transition: all 0.5s ease-out;
}

#section-item .img-area span{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #172d50;
  color: #fff;
  padding: 5px 10px;
}

/* ------------------------------
	section-sl
------------------------------ */
@media screen and (min-width: 751px), print  {
	#section-sl {
		padding-top: 73px;
		padding-bottom: 72px;
	}
	
} @media screen and (max-width: 750px) {
	#section-sl {
		padding-top: 48px;
		padding-bottom: 44px;
	}
}

/* ------------------------------
	section-rss
------------------------------ */

#section-rss {
	background-color: #fff;
	width: 100%;
	position: relative;
    z-index: 3;
	padding: 40px 0;
		
}
#section-rss .rss-box{
	padding: 20px 40px;
	z-index: 99999;
	background: #fff;
	overflow: hidden;
	width: 700px;
	margin: 0 auto;
	
}
#section-rss .rss-box ul {
	margin-bottom: 2em;
}
#section-rss .rss-box ul li {
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em; 
}
#section-rss .rss-box ul li a {
}
#section-rss .rss-box ul li a span.date {
	display: inline-block;
	margin: 0 1em 0 1em;
}

@media screen and (max-width: 750px) {
	#section-rss .rss-box {
		width: 90%;
		padding: 0;
	}
}
/* ------------------------------
	section-sns
------------------------------ */
  
@media screen and (min-width: 751px), print  {
	#section-sns {
		padding-top: 73px;
		padding-bottom: 72px;
	}
	
  #section-sns ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
  }
  
  #section-sns ul li{
    width: 400px;
    text-align: center;
  }
}

@media screen and (max-width: 750px) {
	#section-sns {
		padding-top: 48px;
		padding-bottom: 44px;
	}
  #section-sns ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  #section-sns ul li{
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
  }
  
  #section-sns ul li iframe{
    width: 100%!important;
    text-align: center;
  }
  
  .twitter-head{
    width: 100%;
  }
}

/* ------------------------------
	section-contact
------------------------------ */
@media screen and (min-width: 751px), print  {
	#section-contact {
		padding-top: 73px;
		padding-bottom: 72px;
	}
	
	.border-block {
		padding: 25px 5px 26px;
		border: 8px solid #dddddd;
		background: #fff;
	}
	
	
} @media screen and (max-width: 750px) {
	.border-block {
		padding: 25px 15px 26px;
		border: 4px solid #dddddd;
		background: #fff;
	}
	
	
}

.content-bnn a img:hover{
  opacity: 0.8;
  transition: all 0.5s ease-out;
}