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

/*
*ナビゲーション設定
*/
nav ul{
	list-style:none;
}
/*----------------------------------------------------------------------

	Common 共通項目
	
----------------------------------------------------------------------*/

body{
	line-height: 1.5;
	/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family:"Karbon-Bold",Poppins","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif;
	font-size:12px;
	color: #242424;
	margin:0 auto; 
	background-color:#FFFFFF; /*#F5F5F5F*/
}

a:link,
a:visited {
	color:#698392;
	text-decoration: none;
}

a:active,a:hover{
	outline:0;
}


html{
	font-size:13px;
	line-height:1.53846em;
}

html,body{
	height:100%;
}

a:visited,a:active{
	color:inherit;
}

a:hover,a:focus{
	color:gray;
}


/*TOP　フルスクリーン画面
---------------------------------------------------------------------------*/
#banner{
	background-image: url("../images/top_page/azuminophoto/azumino01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height:490px;
	width:100%;
} 

#warapper{
	margin: 0 auto;
	position: relative;/*相対配置*/
    overflow:hidden;/*iphone上でコンテンツが画面いっぱいに表示されず、右側に変な余白が出た時*/
}
#warapper p{
	color:white;
	text-decolration: none;
	font-weight:normal;
	font-size:28px;
	text-align: center;
	padding-top:280px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}


#warapper #marque img{
	position: absolute;
	margin-top:-10px;
}
#menu_wrapper2{ /*ナビの位置*/
	position:absolute;
	left:830px;
	top:2px;
    width: 600px;
	
}

nav ul li {
	float: left;
	position:relative;
	/*margin-top:10px;*/
	border-top: medium none;
	padding: 0.38462em 0px 0.30769em;
	margin-right: 2px/*1.53846em*/;/*ナビの幅*/
	font-size: 14px;
	letter-spacing: 1.5px;
    color:#222;
}
nav ul li .center{
	margin-left:20px;
	margin-right:16px;
}

/*FontAwesome
---------------------------------------------------------------------------*/
@font-face {
  font-family: 'FontAwesome';
  src: url('http://www.fs.savencia-fromagedairyjapon.com/fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('http://www.fs.savencia-fromagedairyjapon.com/fonts/fontawesome-webfont.eot#iefix&v=4.4.0') format('embedded-opentype'), url('http://www.fs.savencia-fromagedairyjapon.com/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('http://www.fs.savencia-fromagedairyjapon.com/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('http://www.fs.savencia-fromagedairyjapon.com/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('http://www.fs.savencia-fromagedairyjapon.com/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*英字に切り替わるナビ
---------------------------------------------------------------------------*/

    #menu_wrapper2 li a span.en {
        display: inline;
    }
    #menu_wrapper2 li a:hover span.en {
        display: none;
    }
    #menu_wrapper2 li a span.jp {
        display: none;
    }
    #menu_wrapper2 li a:hover span.jp {
        display: inline;
    }
    #menu_wrapper2 li a span.en {
	color:white;
	font-size:12px;
	margin-right:26px;
}
    #menu_wrapper2 li a span.jp {
	color:white;
	font-size:13px;
	margin-right:26px;
	letter-spacing: inherit;
}

/*ドロップダウンメニュー用
---------------------------------------------------------------------------*/
ul.ddmenu {
	position:absolute;
	/*left:20px;
	top:20px;*/
/*	width: 136px;*/					/*ドロップダウンメニューボックスの幅*/
/*	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-top: 1px solid #999;*/
	visibility: hidden;
    z-index: 100;
	top:28px;
	left:-54px;
}
ul.ddmenu li {
	/*border-bottom: 1px solid #999;*/	/*ドロップダウンメニュー１個ごとの下線の幅、線種、色*/
	font-size:8px;
	background: #0c4863;			/*ドロップダウンメニューの背景色*/
	color: #fff;
}
ul.ddmenu li a {
	display: block;
	text-align: center;	/*文字をセンタリング*/
	line-height: 20px;
	width: 160px;		/*ドロップダウンメニューの幅*/
	text-decoration: none;
	color:#fff;
	font-size:8px;

}
ul.ddmenu li a:hover {
	background: #0c4863;	/*マウスオン時のドロップダウンメニューの背景色*/
	color: lightgrey;			/*マウスオン時のドロップダウンメニューの文字色*/
}

/*ハンバーガーメニュー用
---------------------------------------------------------------------------*/
header {
  background: tranparent;
}

#nav-drawer {
  position: relative;
  
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
@media screen and (max-width: 479px) {
	
#nav-open {
  display: inline-block;
  width: 30px;
  height: 10px;
  vertical-align: middle;
  margin-left:300px; /*位置*/
}
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
#nav-open {
  display: inline-block;
  width: 30px;
  height: 10px;
  vertical-align: middle;
  margin-left:480px; /*位置*/
  margin-top:20px;
}
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 1px;/*線の太さ*/
  width: 18px;/*長さ*/
  border-radius: 2px;
  background: #ffffff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 300px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content ul li {
	font-size:20px;
	margin-left:30px;
	margin-top:20px;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

@media screen and (min-width:480px) and (min-width:768px){
  #nav-open {
    display:none;
  }
}
/*---------------------
div container2
-----------------------*/
#container2{
	margin-top:100px;
	
}


/*---------------------
col_4
-----------------------*/

*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
    margin-left:10px;
}
.col_4 h1 {
	margin-top:16px;
	font-size:20px;
	margin-left: 10px;
	color:#698392;
}
.col_4 h1 a:hover{
	color:#0c4863;
}
.col_4 .nm {
	margin-top:3px;
	margin-left: 10px;
	color:#698392;
}
.col_4 p {
	margin-top:15px;
	margin-left: 10px;
	margin-bottom: 50px;
}
.col_4 img {
	margin-botom:-10px;
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 767px) {
	.col_4 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 60%;
		margin:auto;
		margin-bottom: -10px;
		text-align: center;
	}
	
}

/*---------------------
マウスオーバー時拡大
-----------------------*/
.imgWrap {
    width: 340px;
    height: 240px;
    overflow: hidden;
}
.imgWrap img {
    -webkit-transition: -webkit-transform 0.3s linear;
    -moz-transition: -moz-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
.imgWrap img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
/*---------------------
Footer
-----------------------*/
footer{
	font-style:normal;
	color:#222;
	font-size:12px;
	background-color:#ffffff;
	background-repeat: no-repeat;
	background-size: cover;
	height:20px;
	width:relative;
}

footer p ul li{
	font-size:17px;
	font-style:normal;
	color:#222;
	margin-left:98px;
	background: #ffffff;
}

footer p#copyright {
	text-align:center;
	font-size: 11px;
	background:#ffffff;
	
}