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

/* 共通部分
------------------------------- */
html {
    font-size: 62.5%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #333333;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

ul{
	list-style:none
}

p{
	letter-spacing: 0.05em;
	font-size: 1.6rem;
}



.wrapper{
	width: 1180px;
	margin: 0 auto;
	padding: 0 4%;
}

@media print, screen and (max-width: 767px){
	.wrapper{
		width: 100%;
	}
}






/* For Links
---------------------------------------------- */

a,a:active,a:visited,a:focus,a:hover{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

a {
	color: #333333;
	text-decoration:none;
	outline: none;
}

a:hover {
	text-decoration:none;
}

/*-----------------
Block span
------------------*/
.m-block{
	display: block;
	padding-top: 5px;
}

/*------sp only------*/
@media print, screen and (max-width: 767px){
.lead-text .m-block{
	display: inline;
	}
}


/* ヘッダー
------------------------------- */
.top-logo{
	margin-top: 7px;
}

.header{
	position:fixed;
	top:0;
	left:0;
	z-index:24;
	width:100%;
	height: 80px;
	background-color:rgba(255,255,255,0.8);
	}

.page-header{
	display: flex;
	justify-content: space-between;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 4%;
	}

@media print, screen and (max-width: 767px){
	
	.header{
		height: 40px;	
	}
	.sp-logo{
		padding: 5px;
	}
	
}


/* メインイメージ
------------------------------- */
.sp-slide{
	background-color: #000000;
}

.slide-img-area {
  	max-width: 100%;
  	display: block;
	opacity: 0.7;
}
.slide-text-area{
	opacity: 1.0;
}

.sp-slide{
	position: relative;
}



.slide-text{
	position: absolute;
	transform: translate(-50%,-50%);
	font-size: 5rem;
	color: #fff;
	top: 50%;
	left: 50%;
	line-height: 1.6;
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体';
	opacity: 1.0;
	font-weight: bold;
	text-align: center;
	background:rgba(46,113,167,0.8);
	padding: 20px;
}





@media screen and (max-width: 1179px) and (min-width: 768px){
	.slide-text{
		font-size: 4rem;
	}
}
	
@media print, screen and (max-width: 767px){
	.slide-text{
		font-size: 2rem;
		padding: 8px;
	}
		
	}
	

/* ナビゲーション
------------------------------- */
.nav-list{
	display: flex;
	font-size: 1.4rem;
	font-weight: bold;
	margin-top: 25px;
	}

.nav-list li{
  	border-left: 1px dotted #666666;
	padding-left: 20px;
	margin-left: 20px;
	}

.nav-list li:last-of-type{
	border-right: 1px dotted #666666;
	padding-right: 25px;
}

.nav-area .nav-list a {
 	position: relative;
	}

.nav-area .nav-list a::after {
	 position: absolute;
	 left: 0;
	 bottom: 10;
	 display: block;
	 content: "";
	 width: 0%;
	 height: 2px;
	 background: #028d03;
	 transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

.nav-area .nav-list a:hover::after {
	 width: 100%;
	}

.nav-area .nav-list a:hover{
 	color: #028d03; 
	}

.sp-nav{
	display: none;
}

.nav-sublist{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin-left: 30px;
	margin-top: 10px;
	font-size: 1.4rem;
}

.nav-sublist li{
	margin-right: 30px;
}


.nav-sublist a {
 	position: relative;
	}

.nav-sublist a::after {
	 position: absolute;
	top: 50%;
	left: -10px;
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	}

.nav-sublist a:hover::after {
	 border-top: 1px solid #028d03;
 	border-right: 1px solid #028d03;
	}

.nav-sublist a:hover{
 	color: #028d03; 
	}


@media print, screen and (max-width: 767px){
	.page-header{
		display: none;
	}
	.sp-nav{
		display: block;
	}
}


@media screen and (max-width: 1179px) and (min-width: 768px){
	.nav-list li{
		margin-left: 10px;
	}

	.nav-list li{
		border-left: 1px dotted #666666;
		padding-left: 5px;
	}

	.nav-list li:last-of-type{
		border-right: 1px dotted #666666;
		padding-right: 5px;
	}
	
	.nav-list{
		font-size: 1.2rem;
	}
	
	.top-logo{
		width: 20%;
		margin-top: 18px;
	}
	
	.nav-sublist{
		margin-left: 20px;
		font-size: 1.2rem;
	}
	
}


/*---ハンバーガーメニュー---*/
@media print, screen and (max-width: 767px) {
	.sp-nav {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
/*	  height: 40px;*/
	  z-index: 100;
	}
	.sp-nav-area {
	  position: fixed;
	  right: -320px; /* これで隠れる */
	  top: 0;
	  width: 300px; /* スマホに収まるくらい */
	  height: 100vh;
	  padding-top: 40px;
	  background-color: #fff;
	  transition: all .6s;
	  z-index: 200;
	  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	}
	
	.hamburger {
	  position: absolute;
	  right: 0;
	  top: 0;
	  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
	  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
	  cursor: pointer;
	  z-index: 300;
	}
	.sp-nav-list {
	  margin: 0 0 40px 0;
	  padding: 0;
	  list-style: none;
	}
	.sp-nav-list li {
	  text-align: left;
	  padding: 0 14px;
	}
	.sp-nav-list a {
	  display: block;
	  padding: 15px 0;
	  border-bottom: 1px solid #eee;
	  text-decoration: none;
	  color: #111;
	}
	.sp-nav-list a:hover {
	  background-color: #eee;
	}
	
	.hamburger__line {
	  position: absolute;
	  left: 11px;
	  width: 18px;
	  height: 1px;
	  background-color: #111;
	  transition: all .6s;
	}
	.hamburger__line--1 {
	  top: 14px;
	}
	.hamburger__line--2 {
	  top: 20px;
	}
	.hamburger__line--3 {
	  top: 26px;
	}
	.black-bg {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 100;
	  background-color: #000;
	  opacity: 0;
	  visibility: hidden;
	  transition: all .6s;
	  cursor: pointer;
	}
	/* 表示された時用のCSS */
	.nav-open .sp-nav-area {
	  right: 0;
	}
	.nav-open .black-bg {
	  opacity: .8;
	  visibility: visible;
	}
	.nav-open .hamburger__line--1 {
	  transform: rotate(45deg);
	  top: 20px;
	}
	.nav-open .hamburger__line--2 {
	  width: 0;
	  left: 50%;
	}
	.nav-open .hamburger__line--3 {
	  transform: rotate(-45deg);
	  top: 20px;
	}
	.sublist{
		padding-top: 8px;
	}
	
	.nav-close .sp-nav-area{
		right: 10;
	}
	
	.sp-nav-list .sp-sublist{
		position: relative;
		margin-left: 8px;
	}
	
	.sp-nav-list .sp-sublist a::after {
	 position: absolute;
		top: 50%;
		left: 7px;
		content: "";
		display: block;
		width: 6px;
		height: 6px;
		border-top: 1px solid #666666;
		border-right: 1px solid #666666;
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
		-ms-transform: translate(-50%, -50%) rotate(45deg);
		transform: translate(-50%, -50%) rotate(45deg);
		-webkit-transition: 0.4s;
		-o-transition: 0.4s;
		transition: 0.4s;
		}
	
	
}



/*---//ハンバーガーメニュー---*/


/* リード
------------------------------- */
.lead-area{
	background: #2E71A7;
	color:#333;
	position: relative;
	height: 600px;
	background-color: #f1f3f3;
	background-image: url('../images/pineapple-cut.png');
}

.lead-area .wrapper{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;                    /* 親要素の半分下にずらす */
   left: 50%;                   /* 親要素の半分右にずらす */
   transform: translateY(-50%) translateX(-50%);    /* 要素自体の半分、上と左にずらす */	
}

.lead-text{
	font-size: 2rem;
	line-height: 2;
	text-align: center;	
}

@media print, screen and (max-width: 767px) {
	.lead-text{
		font-size: 1.4rem;
		line-height: 2;
		text-align: left;
		margin: 30px 0;
	}
	
	.lead-area{
		height: 340px;
	}
}

/* 羊腸へのこだわり
------------------------------- */
.contents-area-a{
	text-align: center;
	padding: 100px 4% 150px;
	background: #63bf3f;
	background-image: url('../images/otis-redding.png');
}

.contents-area-a h2{
	color: #fff;
}

.commitment-bg{
	background-image: url('../images/list-2.jpg');
	background-size: cover;
	opacity: 0.3;
	position: absolute;
	width: 100%;
	height: 100%;
}

#commitment{
	position: relative;
	height: 800px;
	background-color: #63bf3f;
}

#commitment .wrapper{
	background-color: unset;
	position: absolute;
	text-align: center;
}

#commitment h2{
	color: #fff;
}



h2{
	font-size: 4.2rem;
	color: #2E71A7;
}

#commitment .wrapper{
	top: 50%;                    
   left: 50%;                   
   transform: translateY(-50%) translateX(-50%); 
}

.commitment-list{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	background-color:rgba(255,255,255,0.5);
	padding: 10px;
	text-align: center;
	margin-top: 30px;
}

.commitment-text-area{
	box-sizing: border-box;
	border-right:1px dotted #ccc;
	margin: 0;
	padding: 10px;
	width: 33.33333333%;
}

.commitment-text-area:last-of-type{
	border-right: none;
}

.commitment-text-area dd{
	text-align: left;
}

#commitment dt{
	font-size: 1.8rem;
	font-weight: bold;
}

#commitment dd{
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 0.03em;
	padding: 0 10px;
	margin-top: 20px;
}

@media print, screen and (max-width: 1024px) and (min-width: 768px){
	.commitment-list{
		display: block;
	}
	
	.commitment-text-area{
		width: 100%;
	}
	
}



@media print, screen and (max-width: 767px) {
	.contents-area-a{
		padding: 50px 4%;
	}
	
	h2{
		font-size: 2.2rem;
	}
	
	.contents-area-a dt{
		font-size: 1.8rem;
		margin: 25px 0 10px;
	}	
	
	.contents-area-a dd{
		font-size: 1.4rem;
		line-height: 2.2;
		letter-spacing: 0.05em;
		text-align: left;
	}
	
	.commitment-text-area dd{
		width: 100%;
		padding: 10px;
	}
	
	.commitment-list{
		display: block;
		margin-top: 10px;
	}
	
	.commitment-text-area{
		width: 100%;
	}
	
	#commitment dt{
		font-size: 1.8rem;
		font-weight: bold;
	}
	
	#commitment dd{
		font-size: 1.4rem;
		line-height: 1.6;
		letter-spacing: 0.03em;
		padding: 0 10px;
		margin-top: 5px;
	}
}

/* ケーシングがお客様に届くまで
------------------------------- */
.contents-area-b{
	padding: 100px 4%;
	text-align: center;
	position: relative;
	background: #f1f3f3;
	background-image: url('../images/pineapple-cut.png');
}

.flow-bg-inner{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;                    /* 親要素の半分下にずらす */
   left: 50%;                   /* 親要素の半分右にずらす */
   transform: translateY(-50%) translateX(-50%);    /* 要素自体の半分、上と左にずらす */	
}

h3{
	font-size: 3.4rem;
	color: #2E71A7;
}

h4{
	margin: 90px 0;
	font-size: 2.8rem;
	display:inline-block;
	position: relative;
  	padding-left: 1.4em;/*アイコン分のスペース*/
  	line-height: 1.4;
}


h4:after{
	content: '';
	 display: inline-block;
	 width: 28px;
	 height: 28px;
	 background-image: url(../images/check-icon.png);
	 background-size: contain;
	 vertical-align: middle;
	 background-repeat: no-repeat;
	 position: absolute;
	 top: 5px;
	 left: 0; 
}

.contents-group{
	display: -webkit-box; /*Android4.3*/
  	display: -moz-box;    /*Firefox21*/
  	display: -ms-flexbox; /*IE10*/
  	display: -webkit-flex; /*PC-Safari,iOS8.4*/
  	display: flex;
	justify-content: space-between;
	max-width: 1180px;
    margin: 0 auto;
	align-items: center;
}

.contents-group .text-area{
	width: 50%;
	font-size: 1.8rem;
	text-align: left;
	line-height: 2;
}

.contents-group .image-area p{
	font-size: 1.6rem;
}

.note{
	font-size: 2.8rem;
	margin-top: 50px;
	line-height: 2;
	color:#447D2F;
}

.flow-ex1{
	width: 100%;
	height: 500px;
	position: relative;
	background: #f1f3f3;
	margin-top: 30px;
}

.bg-flow-ex1{
	width: 100%;
	height: 100%;
	position:absolute;
	top: 0;
 	left: 0;
	background-image: url('../images/sheep.jpg');
	background-size:cover;
	opacity: 0.3;
}
	
	
.flow-ex1-inner{
	width: 100%; /*absoluteで位置を設定するときに、幅と高さは必ず必要*/
	padding: 10px;
 	color: #fff;
 	font-weight: bold;
 	text-align: center;

	/*位置の設定 - 上下中央寄せ*/
	position: absolute;
	margin: auto;
	top: 50%;                    
    left: 50%;                   
    transform: translateY(-50%) translateX(-50%);
}


@media print, screen and (max-width: 1024px) and (min-width: 768px){
	.note{
		font-size: 1.8rem;
		margin-top: 40px;
		line-height: 2;
		color:#447D2F;
	}
	
	.flow-ex1{
		height: 300px;
	}
	
	h4{
		font-size: 2.2rem;
	}	
}

@media print, screen and (max-width: 767px) {
	.contents-group{
		display: block;
		width: 100%;
	}
	
	.contents-group .text-area{
		width: 100%;
		text-align: left;
		padding: 10px;
	}
	
	.contents-group .text-area p{
		font-size: 1.4rem;
		line-height: 1.6;
	}
	
	h3{
		font-size: 1.8rem;
	}
	
	h4{
		font-size: 1.6rem;
		margin: 25px 0 10px;
	}
	
	h4:after{
		 width: 20px;
		 height: 20px;
		 background-image: url(../images/check-icon.png);
		 top: 2px;
		 left: 0;

	}
	
	.note{
		font-size: 1.4rem;
		margin-top: 30px;
		text-align: left;
	}
	
	.contents-area-b{
		padding: 50px 4%;
	}
	
	.note{
		font-size: 1.4rem;
		margin-top: 40px;
		line-height: 2;
		color:#447d2f;
	}
	
	.flow-ex1{
		height: 300px;
	}	
}


.head-border {
	margin: 90px auto 35px;
}

@media print, screen and (max-width: 767px) {
	.head-border {
		margin: 50px auto 20px;
	}
}
	
.intro-text{
	margin: 36px 0;
	font-size: 1.8rem;
}

.flow .contents-group{
	margin-top: 50px;
	background-color: #ffffff;
}

.flow .contents-group:first-of-type{
	margin-top: 0;
}

@media print, screen and (max-width: 767px) {
	.intro-text{
		font-size: 1.4rem;
		margin: 18px 0 30px;
		text-align: left;
	}
}


@media screen and (max-width: 1179px) and (min-width: 768px){
	.contents-group .text-area{
		width: 60%;
		font-size: 1.4rem;
		text-align: left;
		line-height: 2;
		padding: 20px;
	}
	
	.contents-group .image-area{
		width: 40%;
	}
}


/* 工場案内
------------------------------- */
#factory-guide{
	text-align: center;
	padding: 100px 0;
	background: #2E71A7;
	background-image: url('../images/otis-redding.png');
}


#factory-guide .contents-group{
	margin-top: 70px;
/*	padding: 0 4%;*/
	display: block;
}

#factory-guide h2{
	color: #fff;
}

#factory-guide .text-area{
	color: #fff;
	width: 100%;
}

#factory-guide .image-area{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

#factory-guide .factory-image{
	margin: 0 10px;
}



@media screen and (max-width: 1179px) and (min-width: 768px){
#factory-guide .image-area{
		width: 100%;
	}
	}


@media print, screen and (max-width: 767px) {
	#factory-guide{
		padding: 50px 4%;
	}
	
	#factory-guide .contents-group{
	margin-top: 30px;
	}
	
	#factory-guide .image-area{
		display:block;
	}
	
	#factory-guide .text-area{
		padding:0;
	}
	
	#factory-guide .factory-image{
		margin: 10px 0 0;
	}

	
	
}


/* 取扱商品
------------------------------- */
.item-text{
	font-size: 1.6rem;
	text-align: left;
	margin-top: 30px;
}

.item-text a{
	text-decoration: underline; 
}

.contents-inner{
	width: 1180px;
	margin: 0 auto;
}

@media print, screen and (max-width: 767px) {
	.contents-inner{
		width: 100%;	
	}
	
	.item-text{
		font-size: 1.4rem;
		margin-top: 10px;
	}
}


/* 会社案内
------------------------------- */
#company-guide .contents-group{
	margin: 80px 0 40px;
}

#company-guide .contents-group .text-area{
	width: 60%;
	font-size: 1.6rem;
}

#company-guide a{
	text-decoration: underline;
}

.text-heading {
	font-size: 2.4rem;
    margin:  0;                 /* デフォルトCSS打ち消し */
    border-bottom: solid 3px #c0c0c0;   /* 線指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
}

.text-heading:before {
    content:  '';                   /* 空白の要素を作る */
    width: 50px;                    /* 幅指定 */
    height: 3px;                    /* 高さ指定 */
    background-color: #028d03;      /* 背景色指定 */
    display:  block;                /* ブロック要素にする */
    position:  absolute;            /* 位置調整 */
    left:  0;                       /* 位置調整 */
    bottom: -3px;                   /* 位置調整 */
}



@media print, screen and (max-width: 767px) {
	
	#company-guide .contents-group{
		margin-top: 30px;
	}
	
	#company-guide .contents-group .text-area{
		width: 100%;
		font-size: 1.4rem;
		margin-top: 10px;
}
	.text-heading{
		font-size: 1.6rem;
	}
	
}


@media screen and (max-width: 1179px) and (min-width: 768px){
	#company-guide .contents-group .text-area{
		font-size: 1.4rem;
	}
	
	#company-guide .contents-group{
		display: block;
		width: 100%;
		margin-top: 40px;
	}
	
	#company-guide .contents-group .text-area{
		width: 100%;
		margin-top: 20px;
	}
	#company-guide .contents-group .image-area{
		width: 100%;
	}
	

}

/* フッター
------------------------------- */
.footer{
	height: 80px;
	background-color: #323940;
	color: #ffffff;
	font-size: 1.5rem;
}

.footer .contents-inner{
	text-align: center;
	padding-top: 30px;
}


@media print, screen and (max-width: 767px) {
	.footer{
		height: 50px;
		font-size: 1.2rem;
	}
	
	.footer .contents-inner{
		width: 100%;
		text-align: center;
		padding-top: 10px;
}
		
}


@media print, screen and (max-width: 1024px) and (min-width: 768px) {
	.wrapper{
		width: 100%;
	}
	
	.contents-inner{
		width: 100%;
	}
	
	.contents-group{
		width: 100%;
	}
	
}




/*テーブル全体*/
.table{
	margin: 0 auto;
	text-align:left;
	border: 1px solid #e0e0e0;
	margin-top: 70px;
  	border-collapse: collapse;
  	border-spacing: 0;
	width: 100%;
} 

/*見出しセル*/
.table th{
	background:#ccc;
	font-size:1.7rem;
	border-bottom:solid 1px #e0e0e0;
	padding:15px;
	width:30%;
	white-space:nowrap;
	text-align: center;
	color: #323232;
	font-weight: normal;
}

/*見出し以外のセル*/ 
.table td{
	padding:7px 14px;
	border-bottom:solid 1px #e0e0e0;
	font-size:1.5rem;
	background:#ffffff;
}



/*スマホ用テーブル*/
@media(max-width:767px){
	.table th,.table td{
		width:100%;
		display:block;
		border-top:none;
		text-align: left;
		font-size: 1.4rem;
	}
	
	.table th{
		padding: 5px;
	}
	
	.table tr:first-child th { 
		border-top:1px solid #e0e0e0;
	}
	
	.table{	
		margin-top: 30px;
	}
}


/*タブレット用テーブル*/
@media print, screen and (max-width: 1024px) and (min-width: 768px) {
	.table{	
		margin-top: 40px;
		}
	}

/*---電話番号---*/
.table .tel-sp{
	display: none;
}


@media print, screen and (max-width: 767px){
	.table .tel-pc{
		display: none;
	}
	.table .tel-sp{
		display: block;
	}
}


/*20190930 追加修正*/


.pic-area img{
	padding: 10px;
	margin: 0 auto;
	display: block;
}

.pic-area-title{
	font-size: 1.6rem;
	border-bottom: solid 1px #028d03;
	padding: 3px;
	display: inline-block;
}

.pic-area{
	padding: 20px;
	background-color: #ffffff;
}

.pic-area:first-of-type{
	padding-top: 100px;
}

.pic-area:last-of-type{
	padding-bottom: 100px;
}

@media print, screen and (max-width: 767px){
	.pic-area{
		text-align: center;
	}
	.pic-area-title{
		font-size: 1.2rem;
	}
	
	.pic-area:first-of-type{
		padding-top: 50px;
	}

	.pic-area:last-of-type{
		padding-bottom: 50px;
	}
}


/* サンクスページ
------------------------------- */

#thanks{
	margin-top: 100px;
	text-align: center;	
}

#thanks .wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#thanks .footer{
	margin-top: auto;
}

#thanks h2{
	margin-top: 100px;
}

.thanks-text{
	font-size: 1.6rem;
	margin: 80px 0 50px;
}

.btn a{
	color: #ffffff;
}

.btn a:hover {
  color: #ff0000;     /* 背景色     */
  background-color: #ffffff;     /* 文字色     */
}


@media print, screen and (max-width: 767px){
	#thanks{
		margin-top: 50px;
		}
	
	#thanks h2{
		margin-top: 50px;
		}
	
	.thanks-text{
		font-size: 1.4rem;
		margin: 40px 0 20px;
		text-align: left;
		}
}


@media print, screen and (max-width: 1024px) and (min-width: 768px) {
	#top.img{
		width: 90%;
	}

}

/* 樽の販売
------------------------------- */
.barrel-area{
	
	height: 500px;
	max-height: 100%;
	position: relative;
	z-index: 0;
	background: #013215;
}

.bg-barrel{
	background-image:url('../images/taru-pic.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.3;
	position: absolute;
	width: 100%;
	height: 100%;

}

.barrel-title{
	font-size: 2.8rem;
	padding-top: 60px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.barrel-inner{
	width: 100%;
	position: absolute;
	top: 50%;                    
   left: 50%;                   
   transform: translateY(-50%) translateX(-50%);
}

.barrel-area .contents-inner{
	padding: 20px 0;
	color: #fff;
	text-align: left;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
}

.barrel-area .text-area{
	width: 50%;
}



.barrel-area .contents-inner p{
	font-size: 1.8rem;
	line-height: 2;
}




@media print, screen and (max-width: 767px){
	.barrel-area{
		height: 600px;
	}
	
	.barrel-title{
		font-size: 1.8rem;
		padding-top: 0;
		text-align: center;
		font-weight: bold;
		color: #fff;
	}
	
	.barrel-area .contents-inner p{
		font-size: 1.4rem;
		line-height: 1.6;
		text-align: left;
	}
	
	.barrel-area .contents-inner {
    	
	}
	
	.barrel-area .contents-inner{
		display: block;
		text-align: center;
		padding: 10px;
	}

	.barrel-area .text-area{
		width: 100%;
	}
	
	.barrel-area img{
		width: 200px;
	}
	
	


	
}

/* ソーセージができるまで
------------------------------- */
.flow2 {
    border: 1px solid #2E71A7;
	background: rgba(255, 255, 255,0.7);
	width: 1180px;
	margin: 0 auto;
	
}
.flow2 > li {
    padding: 30px;
	font-size: 1.6rem;
}
.flow2 > li:not(:last-child) {
    border-bottom: 1px solid #2E71A7;
    position: relative;
}
.flow2 > li:not(:last-child)::before,
.flow2 > li:not(:last-child)::after {
    content: "";
    border: solid transparent;
    position: absolute;
    top: 100%;
    left: 12%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.flow2 > li:not(:last-child)::before {
    border-width: 22px;
/*    border-top-color: rgb(0,117,193);*/
	border-top-color: #2E71A7;
}
.flow2 > li:not(:last-child)::after {
    border-width: 18px;
/*    border-top-color: #fff;*/
	border-top-color: #2E71A7;
}
.flow2 > li dl {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.flow2 > li dl dt {
    font-size: 20px;
    font-weight: 600;
    color: #2E71A7;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    margin-right: 1vw;
    text-align: center;
}
.flow2 > li dl dt .icon {
    font-size: 12px;
    color: #fff;
    background: #2E71A7;
    padding: 5px 10px;
    margin-bottom: 10px;
    display: block;
    border-radius: 20px;
}

.flow2 dd{
	text-align: left;
	padding-left: 20px;
}

.point-text{
	color: #ff0000;
	font-weight: bold;
}

.sausage-note{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	width: 1180px;
	margin: 0 auto;
	margin-top: 30px;
	align-items: center;
}

.sausage-img{
	paddinf-left: 30px;
}

.sausage-note img{
	width: 300px;
}

.sausage-note p{
	text-align: left;
	font-size: 2.2rem;
}


.flow2-area{
	width: 100%;
	height: 1000px;
	position: relative;
	background-color: #f1f3f3;
}

.flow2-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
    left: 0;
	background-image:url('../images/sausage.jpg');
	background-size:cover;
	background-position: top right;
	opacity: 0.3;
}

.flow2-inner{
	width: 100%; /*absoluteで位置を設定するときに、幅と高さは必ず必要*/
	 color: #333;
	 font-weight: bold;
	 text-align: center;

	 /*位置の設定 - 上下中央寄せ*/
	 position: absolute;
	 margin: auto;
	 top: 0;
	 bottom: 0;
	 padding: 0 4%;
	}

@media print, screen and (max-width: 1024px) and (min-width: 768px){
	.flow2{
		width: 100%;
	}
	
	.sausage-note{
		width: 100%;
	}
	
	.sausage-note p{
		text-align: left;
		font-size: 1.8rem;
	}
	
	.sausage-img{
	paddinf-left: 0;
	}
	
	
}

@media print, screen and (max-width: 767px){
	.flow2{
		width: 100%;
	}
	
	.flow2 li dl{
		display: block;
	}
	
	.flow2 > li:not(:last-child)::before,
	.flow2 > li:not(:last-child)::after {
		left: 50%;
	}
	
	.flow2 > li {
		padding: 15px 10px;
	}
	
	.flow2 > li dl dt .icon{
		margin-top: 10px;
	}
	
	.sausage-note{
		display: block;
		width: 100%;
	}
	
	.sausage-note p{
		font-size: 1.6rem;
	}
	
	.sausage-note img{
		margin-top: 10px;
	}
	
	.flow2-area{
		height: 1300px;
	}

}