@import url(https://fonts.googleapis.com/css?family=Comfortaa:300);

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

h1 { font-weight: 900; text-transform: uppercase; }
h1 small { text-transform: lowercase }
h2 { line-height: 24px;}
h2 strong {color:#aa964a;}
a { color: inherit; transition: all 0.5s; }

a:hover,
a:focus { text-decoration: none; color: #aa964a; }

.highlight { color: #aa964a }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block }
* html .clearfix { height: 1% }
.clearfix { display: block }

/* common */
.none{display:none;}

.pt0{padding-top:0;}
.pb0{padding-bottom:0;}

.mt0{margin-top:0;}
.mb0{margin-bottom:0;}

/* Navigation */
#tf-menu {
	margin-bottom: 0;
	background:rgba(255,255,255,1);
	height: auto;
	}
.navbar-brand { padding:0;height:auto;}
.navbar-nav > li > a {
	font-size: 13px;
	font-weight: 700;
	border-bottom: 2px solid transparent;
	padding: 5px 5px;
	margin: 8px 10px;
	text-transform: uppercase;
	transition: all 0.5s;
	background-color:#fff !important;
	}
.navbar-nav > li > a {
	font-size: 13px;
	font-weight: 700;
	border-bottom: 2px solid transparent;
	padding: 5px 5px;
	margin: 8px 10px;
	text-transform: uppercase;
	transition: all 0.5s;
	background-color:#fff !important;
	}
	
	@media (max-width: 768px){
	/* ※ディスプレイサイズ768px以下　*/
		.navbar-nav > li > a {
		display:block;
		font-size: 15px;
		font-weight: 700;
		border-bottom: 2px solid transparent;
		padding: 25px 25px;
		margin: 12px 10px;
		text-transform: uppercase;
		transition: all 0.5s;
		background-color:#fff !important;
		}
	
	/* ▲ディスプレイサイズ768px以下　*/
	}
	
.navbar-sns{float:right;}
.navbar-sns ul li{
	float:left;
	list-style-type: none;
	}
.navbar-default .navbar-nav > li > a.active,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: #333; border-bottom: 4px solid #e1944a;}
.navbar-default .navbar-toggle { border-color: transparent }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: transparent }
.navbar-default .navbar-toggle:hover>.navbar-default .navbar-toggle .icon-bar,
.navbar-default .navbar-toggle:focus>.navbar-default .navbar-toggle .icon-bar { color: #aa964a }

.headernav{
	padding-bottom:10px;
	}

.footer-snsnav{display:none;}

@media (max-width: 768px) {
    h5 { font-size:inherit;}
	.navbar-brand img {height:50px;width:auto;}
	}
@media (min-width: 769px){
	/* ※ディスプレイサイズ768px↑以上　*/
    h5 { font-size: 16px;}
    .headernav{
		width:100%;
		}
    
	.headernav li{
		width:100%;
		float:left;
		}
    .navbar-nav {margin-top:1em;}
	.navbar-nav li{width:15%;}
	.navbar-nav li:nth-child(1){width:12%;}
	.navbar-nav li:nth-child(2){width:27%;}
	.navbar-nav li:nth-child(6){width:16%;}
	
	.navbar-nav .dropdown li{
		float:none;
		display:block;
		padding:10px 0 ;
		}

	/* ※ディスプレイサイズ768px↑以上　*/
	}

@media (max-width: 768px){
	/* ※ディスプレイサイズ768px↓以下　*/

    .navbar-nav {margin-top:1em;}
   	.navbar-nav li{width:100%; border-bottom:1px solid #dddddd;}
	.navbar-nav li:nth-child(1){width:100%;}
	.navbar-nav li:nth-child(2){width:100%;}
	.navbar-nav li:nth-child(6){width:100%;}
    .navbar-sns {
    	display:block;
    	background:#fff;
    	float:none;
    	width:100%;
    	margin:0 auto;
    	}
    .gnavbar-sns{
    	display:none;
    	}

	.navbar-nav .dropdown.pc{
		display:none;
		}
	.navbar-nav .dropdown.sp{
		display:block;
		}


    .footer-snsnav{
    	/*
    	background:#aaa;
    	*/
    	display:block;
    	text-align:center;
    	width:330px;
    	height:100px;
    	margin:0 auto;
    	}
    .footer-snsnav ul{
    	padding:0;
    	
    	}
	/* ※ディスプレイサイズ768px↓以下　*/
	}

/* Home Style */
#tf-home { background:rgba(205, 92, 92, 0) url("../images/youtube_demo2.jpg") no-repeat scroll center center / cover; color: #fff; }
#tf-home .overlay { background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.8)), color-stop(17%, rgba(0,0,0,0.73)), color-stop(35%, rgba(0,0,0,0.66)), color-stop(62%, rgba(0,0,0,0.55)), color-stop(100%, rgba(0,0,0,0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* W3C */ padding: 20% 0; background-attachment: fixed; }

#tf-home h1 { color: #dbedff; }
.content-heading p.lead { margin-top: 2em;}
a.goto-btn { font-size: 18px; font-weight: 700; border-bottom: 2px solid transparent; padding: 10px 0; transition: all 0.5s; }
a.goto-btn:hover { color: #ffffff; border-bottom: 2px solid #aa964a; }




/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/

#mainvisual{
	margin-top:128px;
	position:relative;
	}

.mainvisual-box{
	/*
	position:absolute;
	
	*/
	}

.mainvisual-copy{
	position:absolute;
	top:30%;
	width:100%;
	}

.mainvisual-copy h1{
	font-size:1.5em;
	background:rgba(255,255,255,0.5);
	padding:10px 0;
	margin:0;
	}

.mainvisual-copy p{
	font-size:1.1em;
	background:rgba(255,255,255,0.5);
	padding:10px 0;
	}


.mainimg {
	position: relative;
}

.slick-slide img{width:100%;}
	
	@media (max-width: 768px){
	/* ▼ディスプレイサイズ768px以下　*/
		#mainvisual{margin-top:72px;}
		.mainvisual-copy h1{font-size:1.3em;}
		.mainvisual-copy p{font-size:0.9em;}
	/* ▲ディスプレイサイズ768px以下　*/
	}
	
	@media (max-width: 425px){
	/* ▼ディスプレイサイズ425px以下　*/
		.mainvisual-copy{top:23%;}
		.mainvisual-copy h1{font-size:1.2em;}
		.mainvisual-copy p{font-size:0.8em;}
		.slick-slide img{width:150%;}
	/* ▲ディスプレイサイズ425px以下　*/
	}

/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 10px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #fff;		/*背景色。白。*/	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
	background: #ff9c00;	/*色*/
}


/* YOUTUBE背景 */

.youtube_bg{
	position:absolute;
	top:80px;
	width:100%;
	border:0px solid #ffffff;
	z-index:10;
	}

.youtube_bg img{
	width:100%;
		}

.content-heading{
	position:relative;
	z-index:20;
	
		}


/* Intro Section */
/*#tf-intro { background-color: #aa964a; padding: 5% 0; color: #fff;} */
#tf-intro { background-color: #ffefe0; padding: 5% 0; color: #000;}
#tf-intro img.intro-logo { margin: 0 auto; margin-bottom: 30px; }
#tf-intro p {color:#000;}


/*	Section */
.section-header { padding: 40px 0px 40px 0;text-align:center;}
.section-header h2 { text-transform: uppercase;}
@media (max-width: 767px) {
	section {padding-bottom:3em;}
    .section-header h5 {padding:0 15px;}
}
@media (min-width: 768px){
    #tf-intro p {text-align:center;}
    section {padding-bottom:4em;}
    .section-header h5 {letter-spacing: 1px;}
}



/* staff */
#tf-team { padding: 60px 0 }
#team .item { padding: 30px 0px; margin: 5px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.item .hover-bg { position: relative; overflow: hidden; }
.hover-bg .hover-text { position: absolute; display:block; bottom: 0; width: 100%; height: 100%; padding: 10px; color: #ffffff; transition: all 0.8s; -webkit-transition: all 08s; -moz-transition: all 0.8s; -o-transition: all 0.8s; }
.hover-bg .hover-text p {text-align:left;}
.hover-bg .hover-text.on { opacity: 1 }
.hover-bg .hover-text.off { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transform: translateX(100%) translateY(0%); transform: translateX(100%) translateY(0%); opacity: 1; background: rgba(0, 0, 0, 0.85); }
.hover-bg:hover .hover-text.off { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1;}
.team-detail h3 small {display:block;font-size:11px;}

.owl-theme .owl-controls .owl-page span { width: 15px; height: 15px; margin: 5px; background: #bababa; }
@media (max-width: 767px){
	.item .hover-bg img {width:80%;margin:0 auto;}
    .hover-bg .hover-text {height:50%;}
    .hover-bg .hover-text.off {-webkit-transform: translateX(400%) translateY(-10%); transform: translateX(400%) translateY(-10%);}
    .hover-bg:hover .hover-text.off {-webkit-transform: translateX(0%) translateY(-10%); transform: translateX(0%) translateY(-10%);}
}


/* ～～～～～～～～～～
	お知らせ　news
～～～～～～～～～～ */
.colortest-bg {padding:30px 0;background:#ffdab9;}
.peachpuff-bg {padding:30px 0;background:#ffdab9;}
.gray-bg {padding:30px 0;background:#f3f3f3;}
.floralwhite-bg {padding:30px 0;background:#fffaf0;}
#tf-news dl dt {float:left;margin:0;padding:0 10px 20px 0;}
#tf-news dl dd {overflow:hidden;margin:0;padding:0 0 20px;}
#tf-news dl dd small {font-size:11px;line-height:1;}
#tf-news dl dd h5 {font-weight:bold;margin:0 0 .4em;padding:0;border-bottom:1px solid #333;line-height:1.4;}
#tf-news dl dd h5 .label {margin-right:.2em;padding-bottom:0;}

@media (max-width: 767px) {
	#tf-news dl dt {width:65px;}
    #tf-news dl dd {min-height:65px;}
    #tf-news dl dd h5 {font-size:14px;}
}
@media (min-width: 768px){
    #tf-news dl dt {width:125px;}
    #tf-news dl dd {min-height:125px;}
}


/* Portfolio or works blocks */
#tf-works { padding: 60px 0 }

ul.cat { margin: 30px 0 }

ul.cat li a { background: inherit; border: 1px solid; padding: 5px 10px; border-radius: 3px; }

ul.cat li a:hover,
ul.cat li a:focus,
ul.cat li a.active { background: #f1f1f1; border: 1px solid; padding: 5px 10px; border-radius: 3px; color: inherit; }
.nopadding { padding: 0 }
.box a { margin: 2px }
.box .hover-bg { position: relative; overflow: hidden; }
.box .hover-bg .hover-text { height: 100%; bottom: 0; -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); background: transparent; }
.box:hover .hover-bg .hover-text { background-color: rgba(1, 1, 1, 0.5) }
.box .hover-bg:hover .hover-text.off { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; }
.box .hover-text i.fa { font-size: 20px; background: #aa964a; padding: 13px; position: relative; top: 30%; border-radius: 50%; width: 45px; height: 45px; transition: all 0.5s; }
.box .hover-text i.fa:hover { background: #333333 }
.box .hover-text i.fa.fa-expand { /*border-top-right-radius: 0; */-webkit-transform: translateX(0%) translateY(-200%); transform: translateX(0%) translateY(-200%); opacity: 0; transition: all 0.5s; }
.box:hover .hover-text i.fa.fa-expand { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; }
.box .hover-text i.fa.fa-chain { border-top-left-radius: 0; -webkit-transform: translateX(400%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 0; transition: all 0.5s; }
.box:hover .hover-text i.fa.fa-chain { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; }


/* Portfolio Style #3 */
#itemsWorkThree .box h5 {padding: 10px 0; margin: 0;}
#itemsWorkThree .box h5 small {display:block;}
#itemsWorkThree .box .img-thumbnail {border-radius:0;}


/* Isotope Filter */
.isotope-item { z-index: 2 }
.isotope-hidden.isotope-item { z-index: 1 }
.isotope,
.isotope .isotope-item { /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }

.isotope-item { margin-right: -1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }

.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }

.nivo-lightbox-theme-default .nivo-lightbox-title { font-size: 14px; background: #f1f1f1; border: 1px solid #333; letter-spacing: 2px; color: #333; text-transform: uppercase; letter-spacing: 2px; padding: 10px 35px; border-radius: 2px; }

.nivo-lightbox-theme-default.nivo-lightbox-overlay { background: #000 !important; background: rgba(0, 0, 0, 0.6) !important; }

.nivo-lightbox-theme-default .nivo-lightbox-nav,
.nivo-lightbox-theme-default .nivo-lightbox-close { opacity: 1 }

.nivo-lightbox-error { color: #C59A6D !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important; }

.nivo-lightbox-theme-default .nivo-lightbox-image img { background: #fff; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); box-shadow: 0px 1px 1px rgba(0,0,0,0.4); border-top: 4px solid #aa964a; }

/* Single Portfolio Detail */
#work-detail-one,
#work-detail-two,
#work-detail-three { padding: 60px 0 }

.work-detail .dl-horizontal dt { text-align: left; margin-bottom: 10px; }

.work-related-thumb { margin-bottom: 30px }

.work-related-thumb .img-thumbnail { display: inline-block; max-width: 100%; height: auto; padding: 0; line-height: 1.42857143; background-color: transparent; border: 1px solid transparent; border-radius: 0; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

.work-related-thumb .img-thumbnail:hover { opacity: 0.8 }

/* Process Section */
#tf-process { padding: 60px 0 }

.process i.fa { text-align: center; font-size: 30px; background-color: #aa964a; color: #ffffff; padding: 25px 0; border: 4px solid #ffffff; border-radius: 50px; border-top-left-radius: 0; margin: 0 10px; margin-right: 20px; width: 92px; height: 90px; transition: background-color 0.5s; }

#tf-process .gray-bg { position: relative }

.gray-bg .vline { position: absolute; height: 100%; padding: 5px; border-left: 3px solid #ffffff; left: 20%; }

#process { padding: 60px 0 20px 0 }

.process { margin-bottom: 40px }


.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus { outline: 0; outline: 0; outline-offset: 0; }

.btn:active,
.btn.active { background-image: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; }

.tf-btn { font-size: 12px; word-spacing: 2px; font-weight: 700; padding: 10px 20px; background-color: #333333; text-transform: uppercase; border-color: #333333; transition: all 0.5s; }

.tf-btn:focus,
.tf-btn:hover { background-color: #333333; border-color: #aa964a; }

.color { background-color: #aa964a; border-color: #aa964a; }

.color:focus,
.color:hover { border-color: #333333; background-color: #aa964a; }


/* ～～～～～～～～～～
	伊香保フィッシュファームとは
	about us
～～～～～～～～～～ */

#about{
	margin-top:128px;
	}

@media (min-width: 768px) {

	#about{margin-top:148px;}

	#about .content{
		/*
		border:1px solid #f00;
		background:#aaaaaa;
		*/
		width:960px;
		margin:40px auto;
		
		}
	}

@media (max-width: 768px) {
	#about{margin-top:128px;}
	#about .content{
		/*
		border:1px solid #00f;
		background:#aaaaaa;
		*/
		width:100%;
		padding:1%;
		
		}
	}

.about_pic{
	width:30%;
	}

.about_pic img{
	width:100%;}

.about_comment{
	width:68%;
	font-size:0.9em;
	}

.about_comment h4{
	font-weight:600;
	font-size:20px;}

.about01,
.about02,
.about03{
	margin:10px 0;
	}

.about01 .about_pic,
.about03 .about_pic{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
	float:left;
	}
.about01 .about_comment,
.about03 .about_comment{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
	float:right;
	}

.about02 .about_pic{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
	float:right;
	}
.about02 .about_comment{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
	float:left;
	}


@media (max-width: 425px) {
	/* ※ディスプレイサイズ425px以下　*/
	#about{margin-top:64px;}
	
	#about .content{
		/*
		background:#aaaaaa;
		border:1px solid #0f0;
		*/
		width:100%;
		padding:1%;
		
		}
	
	.about_pic{
		width:100%;
		}

	.about_comment{
		width:100%;		
		font-size:1.3em;
		}
	
	.about01 .about_pic,
	.about03 .about_pic{
		float:none;
		}
	.about01 .about_comment,
	.about03 .about_comment{
		float:none;
		}

	.about02 .about_pic{
		float:none;
		}
	.about02 .about_comment{
		float:none;
		}

	
	/* ※ディスプレイサイズ425px以下　*/
	}


/* ～～～～～～～～～～
	品種の情報
	vatriety
～～～～～～～～～～ */


#vatriety{margin-top:128px;}

#vatriety h3{font-size:16px;}

@media (min-width: 960px) {
	#vatriety .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		
		}
	}

@media (max-width: 959px) {
	#vatriety .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:1%;
		
		}
	}

.vatriety_list{
	width:100%;
	}

.vatriety_item{
		/*
	border:1px solid #333;
		*/
	float:left;
	width:48%;
	min-height:100px;
	margin-left:8px;
	margin-right:8px;
	margin-bottom:20px;
	}

.vatriety_item h3{
	font-size:11pt;
	line-height:1.5em;
	}


.gb-medaka{
	background:url(../images/vatriety_medaka100a.png) no-repeat right center #ffffff;
	}

.gb-kingyo{
	background:url(../images/vatriety_kingyo100.png) no-repeat right center #ffffff;
	}

.gb-sonota{
	background:url(../images/vatriety_sonota100.png) no-repeat right center #f4f4f6;
	}

.gb-nishikigoi{
	background:url(../images/vatriety_nishikigoi100.png) no-repeat right center #f4f4f6;
	display:none;/*　錦鯉が掲載される場合は削除　*/
	}

.vatriety_item a{
	position:relative;
	display:block;
	border:1px solid #dcdcdc;
	width:100%;
	height:100px;
	}

.vatriety_list h4{
	position:absolute;
	top:30%;
	left:80px;
	display:block;
	}

@media (min-width: 768px) {
	/* ▲ディスプレイサイズ768px以上　*/
	.vatriety_list{
		width:100%;
	    padding: 1em;
		}
	.vatriety_item{
		width:31.6%;
		width:47.6%;/*　錦鯉が掲載される場合は削除　*/
		}
	}
@media (max-width: 768px) {
	/* ▲ディスプレイサイズ768px以下　*/
	#vatriety .content{
		width:100%;
		padding:0px;
		
		}

	#vatriety{
		margin-top:60px;
		}

	.vatriety_list{
		width:97%;
	    padding: 1em;
		}
	.vatriety_item{
		width:100%;
		}
	.vatriety_item h4{
		left:0;
		width:100%;
		text-align:center;
		color:#333333;
		font-size:21px;
		font-weight: 500;
		}
	
	/* ※ディスプレイサイズ768px以下　*/
	}

/* ～～～～～～～～～～
	品種の情報一覧
	vatriety-list
～～～～～～～～～～ */

.vatriety-list-nav{
	margin:0;
	}

.vatriety-list h4{
    margin-bottom: 35px;
    padding:0 0 10px 0;
    font-size: 24px;
    text-align: center;
    vertical-align: middle;
    position: relative;
	}

.vatriety-list h4 img{
	margin:0 10px 0 0;
	}

.vatriety-list h4:before{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    content: "";
    width: 145px;
    height: 2px;
    margin: auto;
    background: #333;
	}
	
.vatriety-list h4:after{
    bottom: -11px;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-width: 5px;
    border-top-color: #333;
    
    position: absolute;
    display: block;
    content: "";
    }

.vatriety-box{
	width:960px;
	margin:0 auto;
	padding:0 0 0 1.5%;
	text-align:center;
	overflow:hidden;
	}

.vatriety-box .vatriety-item{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
	float:left;
	width:23%;
	height:280px;
	list-style:none;
	margin:0 2% 2% 0;
	padding:0;
	}

.vatriety-box .vatriety-item img{
	width:100%;
	}

.vatriety-box .vatriety-item h5{
	font-size:1em;
	padding:10px;
	}

@media (max-width: 768px) {
	/* ※ディスプレイサイズ768px以下　*/
	.vatriety-box{
		width:100%;
		padding:0px 0 0 2%;
		
		}

	.vatriety-box .vatriety-item{
			/*
			border:1px solid #333;
			background:#aaaaaa;
			*/
		width:23%;
		}


	/* ※ディスプレイサイズ768px以下　*/
	}

@media (max-width: 425px) {
	/* ※ディスプレイサイズ425px以下　*/
	.vatriety-box{
		width:100%;
		padding:0px 0 0 2%;
		
		}

	.vatriety-box .vatriety-item{
			/*
			border:1px solid #333;
			background:#aaaaaa;
			*/
		width:47.7%;
		}


	/* ※ディスプレイサイズ768px以下　*/
	}

/* ～～～～～～～～～～
	品種の情報詳細
	vatriety-list
～～～～～～～～～～ */

.vatriety-detail-box{
			/*
			border:1px solid #333333;
			border:1px solid #ff0000;
			border:1px solid #00ff00;
			border:1px solid #0000ff;
			background:#aaaaaa;
			*/
	width:90%;
	max-width:960px;
	margin:0 auto;
	}

.vatriety-detail-box .vatriety-pic{
	float:left;
	width:45%;
	border:1px solid #333;
	}

.vatriety-detail-box .vatriety-pic img{width:100%;}

.vatriety-detail-box .vatriety-description{
	float:right;
	width:50%;
	font-size:16px;
	}

.vatriety-detail-box .vatriety-description h4{
	font-size:16px;
	text-align:center;
	}
.vatriety-detail-box .vatriety-description h5{
	font-size:25px;
	text-align:center;
    margin-bottom: 35px;
    padding:0 0 10px 0;
    text-align: center;
    position: relative;
	}

.vatriety-detail-box .vatriety-description h5:before{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    content: "";
    width: 145px;
    height: 2px;
    margin: auto;
    background: #333;
	}
	
.vatriety-detail-box .vatriety-description h5:after{
    bottom: -11px;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-width: 5px;
    border-top-color: #333;
    position: absolute;
    display: block;
    content: "";
    }


.vatriety-detail-box .vatriety-description h5 span{
	display:block;
	font-size:12px;
	text-align:center;
	padding:0 0 10px;
	}


@media (max-width: 425px) {
	/* ※ディスプレイサイズ425px以下　*/

	.vatriety-detail-box{
		/*
		border:1px solid #333333;
		border:1px solid #ff0000;
		border:1px solid #00ff00;
		border:1px solid #0000ff;
		background:#aaaaaa;
		*/
		width:90%;
		max-width:400px;
		margin:0 auto;
		}

	.vatriety-detail-box .vatriety-pic{
		float:none;
		width:100%;
		border:1px solid #333;
		}

	.vatriety-detail-box .vatriety-description{
		float:none;
		width:100%;
		}



	}

/* ～～～～～～～～～～
	通信販売　buy
～～～～～～～～～～ */

#buy{
	margin-top:128px;
	}

@media (min-width: 960px) {
	#buy .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		
		}
	}

@media (max-width: 959px) {
	#buy .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:1em;
		
		}
	}


.buy_list{
	width:100%;
    
    
	}

.buy_item{
	/*
	border:1px solid #333;
	background:#aaaaaa;
	*/
	float:left;
	display:block;
    position: relative;
	width:21%;
    height: 248px;
	margin-left:2%;
	margin-right:2%;
	margin-bottom:20px;
    transition-property: transform, -webkit-transform;
    overflow:hidden;
	}

.buy_item .ttl{
	font-size:10pt;
	line-height:1.6em;
	}

.buy_item2cel{
 border:1px solid #dcdcdc;
 float:left;
 display:block;
    position: relative;
 width:47.8%;
    height: 100px;
 margin-left:1%;
 margin-right:1%;
 margin-bottom:2%;
    transition-property: transform, -webkit-transform;
    overflow:hidden;
 }

.buy_item2cel h4{
    position: absolute;
    width:100%;
    top: 30%;
    text-align:center;
    display: block;
    }

@media (max-width: 767px) {
 .buy_item2cel{
  width:97.6%;
  }
 }

@media (max-width: 767px) {
	#buy .buy_item{
		width:43%;
		
		}
	}

.buy_list img{
	width:100%;
	}

.buy_item　h4.ttl{
	font-size: 14px;
	color:#f00 !important;
	}

.buy_item p{
	font-size: 14px;
	color:#f00 !important;
    overflow: hidden;
	text-overflow: ellipsis;
	}

.buyitem_imgbox{
	position:relative;
	}

.buyitem_imgbox ul.shop_icon{
	position:absolute;
	bottom:0px;
	right:0px;
	padding:0px;
	}

.buyitem_imgbox .shop_icon li{
	width:30px;
	margin:10px 10px 0 0;
	list-style:none;
	background:rgba(255,255,255,0.7);
	border-radius:5px;
	float:right;
	}

@media (max-width: 425px) {
	/* ※ディスプレイサイズ425px以下　*/
	#buy .buy_item{
		width:46%;
		
		}
	/* ※ディスプレイサイズ425px以下　*/
	}

/* ～～～～～～～～～～
	通信販売詳細　buydetail
～～～～～～～～～～ */


.buy_detail_img{
	display:block;
	position: relative;
	border:1px solid #333;
	float:left;
	width:40%;
	}

.buy_detail_img img{
	width:100%;
	}

.buy_detail_info{
	/*
	border:1px solid #333;
	background:#aaaaaa;
	*/
	position:relative;
	float:right;
	width:56%;
	padding:0 0 158px;
	}

.buy_detail_title{
	width: 100%; 
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25em;
	margin: 10px 0 10px;
	}

.buy_detail_price{
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
	font-family: Roboto, sans-serif;
	margin: 10px 0 10px;
	}

.buy_detail_price span{
	font-size: 0.6em;
	padding:0 5px;
	}

.buy_detail_time{
	font-size: 1.0em;
	margin: 10px 0 10px;
	}

.buy_detail_code{
	font-size: 1.0em;
	margin: 10px 0 10px;
	}

.buy_detail_size{
	font-size: 1.0em;
	margin: 10px 0 10px;
	}

.buy_detail_birthday{
	font-size: 1.0em;
	margin: 10px 0 10px;
	}

.buy_detail_description{
	font-size: 0.8em;
	margin: 10px 0 10px;
	}

.buy_detail_store{
	position:absolute;
	right:0;
	bottom:0;
	width:256px;
	padding:10px;
	background:#eeeeee;
	border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
	}

.buy_detail_store a{
	display:block;
	width:100%;
	border:1px solid #aaa;
	color:#eeeeee;
	font-weight:bold;
	background:#c21f25;
	padding:10px;
	margin:5px 0px;
	text-align:center;
	}

.buy_detail_store img{
	width:20px;
	margin-right:10px;
	}

@media (max-width: 768px) {
	/* ※ディスプレイサイズ768px以下　*/
		/*
		border:1px solid #333;
		background:#aaaaaa;
		background:#aaaaaa;
		background:#aaaaaa;
		*/
	#buy{
		margin-top:60px;
		}
	
	.buy_detail_img{
		float:none;
		width:100%;
		}
	.buy_detail_info{
		float:none;
		width:100%;
		padding:20px 0 150px;
		}


	.buy_detail_store{
		width:100%;
		}

	.buy_detail_store a{
		width:100%;
		margin:10px 0px;
		text-align:center;
		}


	/*　※Windowsサイズ768以下ここまで　*/
	}


/* ～～～～～～～～～～
	Youtube
～～～～～～～～～～ */

#youtube{
	margin-top:128px;
	}

.youtubebox{
	display:block;
	width:540px;
	margin:0 auto;
	}

/* ～～～～～～～～～～
	会社情報
～～～～～～～～～～ */

#tf-company {background:#aa964a;}
#tf-company h2 strong {color:#fff;}
#tf-company table,#tf-company tr,#tf-company th,#tf-company td {border-color:#444;}


#company{
	margin-top:128px;
	}

@media (min-width: 960px) {
	#company .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		
		}
	}

@media (max-width: 959px) {
	#company .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:2em;
		
		}
	}


.company_list{
	width:100%;
	}

.company_list th{
    width: 32%;
    border-top: 1px solid #ebebeb;
	margin-top: 1em;
	padding:1em;
	}

.company_list td{
	width: 60%;
    border-top: 1px solid #ebebeb;
    border-left: 1px dashed #ebebeb;
	padding:1em;
	}

@media (max-width: 768px) {
	/* ※ディスプレイサイズ768px以下　*/
	.company_list th {
		width: 100%;
		display:block;
		font-size:18px;
 	 	border: none;
		}
	.company_list td {
		width: 100%;
		display:block;
		font-size:18px;
 	 	border: none;
		border-bottom: 1px solid #ebebeb;
		border-left: none;
		}
	#company{
		margin-top:60px;
		}
	}



/* ～～～～～～～～～～
	お問い合わせ　contact
～～～～～～～～～～ */


#contact{
	margin-top:128px;
	margin-bottom:100px;
	}

@media (min-width: 960px) {
	#contact .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		
		}
	}

@media (max-width: 959px) {
	#contact .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:2em;
		
		}
	}


@media (max-width: 768px) {
	#contact{
		margin-top:60px;
		margin-bottom:10px;
		}
	}



/* ～～～～～～～～～～
	プライバシポリシー
～～～～～～～～～～ */

#privacy{
	margin-top:128px;
	}

@media (min-width: 960px) {
	#privacy .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		padding:20px;
		
		}
	}

@media (max-width: 959px) {
	#privacy .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:2em;
		
		}
	}


/* ～～～～～～～～～～
	特定取引表示
～～～～～～～～～～ */

#law{
	margin-top:128px;
	}

@media (min-width: 960px) {
	#law .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		padding:20px;
		
		}
	}

@media (max-width: 959px) {
	#law .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:2em;
		
		}
	}


.law_list{
	width:100%;
    
	}

.law_list th{
    width: 32%;
    border-top: 1px solid #ebebeb;
	margin-top: 1em;
	padding:1em;
	}

.law_list td{
	width: 60%;
    border-top: 1px solid #ebebeb;
    border-left: 1px dashed #ebebeb;
	padding:1em;
	}

@media (max-width: 768px) {
	.law_list th {
		width: 100%;
		display:block;
		font-size:18px;
 	 	border: none;
		}
	.law_list td {
		width: 100%;
		display:block;
		font-size:18px;
 	 	border: none;
		border-bottom: 1px solid #ebebeb;
		border-left: none;
		}
	}

/* ～～～～～～～～～～
	footer
～～～～～～～～～～ */

#tf-footer { padding: 3% 0 2% 0; background-color: #382009; color: #ffffff; }
@media(max-width:768px) {
	/* ▼ディスプレイサイズ768px以下　*/
	#tf-footer { padding: 3% 0 15% 0; background-color: #382009; color: #ffffff; }
	/* ▼ディスプレイサイズ768px以下　*/
	}
ul.social li a i { font-size: 18px; width: 100%; height: 32px; padding: 7px 0; text-align: center;color: #ffffff; transition: all 0.5s;border-radius:50%;}
#tf-footer .pull-left {font-size:12px;}
#tf-footer .nav > li{display:inline; font-size:12px;}
#tf-footer .pull-center {font-size:12px;margin:0 auto; width:100%; text-align:center;}

ul.social li a i:hover { background-color: #666;}

@media (max-width: 768px) {

	#tf-footer .nav > li {
		display:block;
		}
	.footnav li a {
		display:block;
		border-top:1px solid #545454;
		text-align:center;
		background:#382009;
		}
	.footnav li:nth-of-type(6) a{
		border-bottom:1px solid #545454;
		}
	}

/* Blog Page */
.blog .media.post { background: #fff; padding: 10px; border: 1px solid #E9E9E9; border-bottom-color: transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.blog .post-meta { border-top: 1px solid #ebebeb; background-color: #ffffff; padding: 5px 10px; height: auto; position: relative; min-height: 35px; border: 1px solid #ebebeb; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.pagination > li > a,
.pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: 0; line-height: 1.42857143; color: #FFFFFF; text-decoration: none; background-color: #aa964a; border: 1px solid #aa964a; margin: 3px 3px; font-weight: 700; text-transform: uppercase; border-radius: 5px; }

.pagination > li > a.active,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus { color: #FFFFFF; background-color: #ddab15; border-color: #ddab15; }

/* Sidebar */
.widget { margin-bottom: 40px; padding: 0 20px; }

.comment h4,
.widget h4,
h4.text-uppercase { font-weight: 300; color: #aa964a; }

.comment h4 span.comments { color: #333333 }

/* Categories and Archive Widget */
ul.bullet-lists { margin-top: 20px }

ul.list-unstyled.bullet-lists li span.fa.fa-circle { font-size: 8px; vertical-align: middle; margin-right: 10px; color: #aa964a; }

ul.list-unstyled.bullet-lists li { padding: 5px 0 }

ul.list-unstyled.bullet-lists li:hover { color: #aa964a }

/* Post Tab */
.post-tab .nav-tabs > li > a { margin-right: -1px; line-height: 1.42857143; border: 1px solid #ddd; border-radius: 0px 0px 0 0; }

.post-tab .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }

.post-tab .nav-tabs > li > a:hover,
.post-tab .nav-tabs > li > a:focus { color: #FFF; background-color: #FC3; border: 1px solid #ddd; border-bottom-color: transparent; }

/* Tags */
ul.list-inline.bullet-lists li a { color: inherit }

ul.list-inline.bullet-lists li { background: #F8F8F8; padding: 5px 10px; margin-bottom: 5px; margin-right: 2px; border: 1px solid #F4F4F4; border-radius: 3px; transition: all 0.3s; }

ul.list-inline.bullet-lists li:hover { background: #aa964a }

/* Single Blog Post */
.blog-post .post-wrap img,
.work-detail img.featured { margin: 20px 0 }

ul.meta-tags li a { font-style: italic }

ul.meta-tags li:after { content: ',' }

ul.meta-tags li:last-child:after { content: ' ' }

/* Author Box */
.media.post-author { background: #aa964a; padding: 20px; margin-top: -1px; }

.media.post-author a { content: inherit }

.blog-post .post-wrap { padding: 20px; margin-bottom: 0; border: 1px solid #DDDDDD; border-top-right-radius: 4px; border-top-left-radius: 4px; }

/* Comment */
.media.comment-block { border: 1px solid #DDD; padding: 20px; }

.comment { margin-top: 40px }

.comment form { margin-top: -30px }

.comment input,
.comment textarea { margin-bottom: 15px }

.footnav{
	padding:10px 0; 30px}

body,
html { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; overflow-y: auto; overflow-x: hidden; font:16px/1.8 'Comfortaa', cursive,'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; color:#444; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; color: #000; }
::-webkit-scrollbar {
width: 2px;
}/* for vertical scrollbars */
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.5);
}
 @media (min-width: 1200px) {

.container { width: 1100px }
}
@media (max-width: 767px){
	body,html {font-size:12px;line-height:1.428;}
}

/* Youtube埋め込み */
.overlay, #yt_player {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}
 
.overlay{
    z-index: -1;
}
 
#yt_player{
    z-index: -2;
}





/* ～～～～～～～～～～
	Q&A
～～～～～～～～～～ */


#qa{
	margin-top:128px;
	}

@media (min-width: 960px) {
	#qa .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:960px;
		margin:0 auto;
		padding:20px;
		
		}
	}

@media (max-width: 959px) {
	#qa .content{
		/*
		border:1px solid #333;
		background:#aaaaaa;
		*/
		width:100%;
		padding:2em;
		
		}
	}



.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	}
.cp_qa {
	border-top: 1px solid #ebebeb;
	}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 1px;
	color: #1b2538;
	}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
	}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 1em;
	cursor: pointer;
	border-bottom: 1px solid #ebebeb;
	}
.cp_qa .cp_actab label:hover {
	color: #00838F;
	}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s ease;
	        transition: max-height 0.5s ease;
	color: #333333;
	background: #ffdab9;
	}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em;
	}
/* 質問を開いた時の仕様 */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
	color: #00838F;
	}
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
	}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
	line-height: 1.6;
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 3em;
	margin-top: -12.5px;
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	text-align: center;
	}
.cp_qa .cp_actab input[type=checkbox] + label::after {
	content: '▼';
	}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
	}


/* ～～～～～～～～～～
	追従ボタン
	scroll-contact
～～～～～～～～～～ */


@media(min-width:769px) {
	/* ▲ディスプレイサイズ768px以上　*/

	.flow-navi__wrapper{
	display:none;
		}
	.flow-navi{
		/*
		background:#eeeeee;
		border:1px solid #330000;
		border-radius:10px;
		*/
		position: fixed;
		bottom: 64px;
		right:10px;
		z-index: 3;
		padding:20px;
		
		}

	.flow-navi .pc{
		display:block;
		margin:0;
		}
	.flow-navi .sp{
		display:none;
		}
	/* ▲ディスプレイサイズ768px以上　*/
	}

@media(max-width:768px) {
	/* ▼ディスプレイサイズ768px以下　*/
		.flow-navi__wrapper {
		position: static;
		}
		.flow-navi {
		position: fixed;
		bottom: 0px;
		z-index: 3;
		width:100%;
		padding:0;
		}
		.flow-navi .pc{
		display:none;
		}
		.flow-navi .sp{
		display:block;
		background:#f26522;
		color:#fff;
		font-size:16pt;
		font-weight:700;
		margin:0;
		padding:30px;
		text-align:center;
		}
	/* ▼ディスプレイサイズ768px以下　*/
	}

.error{
		/*
		background:#eeeeee;
		border:1px solid #330000;
		border-radius:10px;
		border:1px solid #333;
		*/
	margin:0 auto;
	padding:22% 10% 0;
	width:70%;
	}

.error h1{
	font-size:1.5em;
	border-bottom:1px solid #333;
	}
.error h2{
	font-size:1.1em;
	margin:0;
	}
.error h3{
	font-size:1em;
	margin:0;
	}

.error-footer{
	position:absolute;
	bottom:0px;
	width:100%;
	}