@charset "UTF-8";
@import url("style.css");
/*================================================
 *
 *  for鳥海やわた/ゆりんこ/ヨーグルト/自然公園/牧場
 *  1カラムサイト用
 *
 ================================================*/
.contents {
	width: 1200px;
	margin: 0 auto;
}
/*================================================
 *  メイン
 ================================================*/
.news h2 {
	background: rgba(204,255,204, 0.8);
}
/*** ビルダー・ミニスライダー　***/
.hpb-photomotion {
	max-width: 850px;
	margin: 5em auto;
}

/*================================================
 *  フッター
 ================================================*/
footer.yawata {
	background-color: #008000;
	color: #fff;
}
footer.yurinko {
	background-color: #9f1125;
	color: #fff;
}
footer.kouen {
	background-color: #34495E;
	color: #fff;
}
footer.yogurt {
	background-color: #364F6B;
	color: #fff;
}
footer.farm {
	background-color: #009933;
	color: #fff;
}
.footer-map {
	width: 350px;
	float: right;
}
/*================================================
 *
 *  for　やわた
 *
 ================================================*/
#yawata .bannerFlex {
	display: flex;
	justify-content: space-between;
	padding: 2em 0;
	flex-wrap: wrap;
}
/*****　index　各施設　*****/
.kakusisetu {
	background-image: url(../honten/images/kakusisetsu.png);
	background-repeat: no-repeat;
	height: 240px;
	width: 1200px;
	margin: 10em auto 2em ;
	padding-top: 25px;
}
.kakusisetu h2 {
	text-align: center;
	clear: both;
	font-size: 220%;
	line-height: 2em;
	font-weight: bolder;
	text-shadow: 3px 3px 0px #FFF;
	letter-spacing: 0.4em;
}
/*****　会社概要　*****/
.wrap-profile{
width: 80%;
margin: auto;
}
.profile h2{
	background: rgba(204,255,204, 0.8);	
	font-weight: bolder;
}
.profile h3{
	position:relative;
	padding-left:30px;
	font-weight: bold;
	line-height: 38px;
	margin-left: 2em;
}
 
.profile h3:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:14px; 
	left:7px; 
	background-color:#01D701;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	opacity:0.50;
	z-index: 1;
}
 
.profile h3:after{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:15px; 
	width:15px; 
	display:block; 
	position:absolute; 
	top:7px; 
	left:2px; 
	background-color:#008000;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
dl.list {
    line-height: 2.5em;
margin: 2em auto 5em;
    width: 90%;
}
dl.list dt {
    width: 11em;
    float: left;
    padding-bottom: 1px;
    padding-left: 0px;
    margin-left: 2em;
	font-weight: bold;	
}
dl.list dd {
    padding-left: 13em;
    border-bottom: 1px solid #ccc;
}
p.ichiban{
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	font-weight: bold;
	color: #FFF;
	background-color: #00BA00;
	text-align: center;
	font-size: 1.5em;
	padding: 0.5em;
	text-shadow:2px 2px 0px #008000;
	border-radius: 10px;  
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px; 
}
.profile td,.profile th{
	border: 1px solid #008000;	
}
.profile th{
	background-color: #6F6;	
}

/*================================================
 *
 *  for　ゆりんこ
 *
 ================================================*/
#yurinko {
	margin-top: 0em;
	margin-bottom: 2em;
}

#yurinko .news-box h2 {
	margin: 0 auto 2em;
}
#yurinko h2 {
	font-size: 150%;
	border: solid 2px #9f1125;
	padding: 0.5em 0 1em;
	width: 40%;
	margin: 3.5em auto 2em;
}
#yurinko h2:before {
	content: url(../yurinko/images/yu.png);
	margin: 1em;
	position: relative;
	top: 15px;
}
#yurinko h3 {
	background-color: #fec2c2;
	padding: 0.5em;
	margin-bottom: 2em;
	display: inline-block;
	width: 50%;
}
#yurinko .imgL p {
	margin-left: 4em;
}
.yuri-topp {
	text-align: center;
	background-image: url(../yurinko/images/yurinko_bac.jpg);
	background-repeat: no-repeat;
	font-size: 120%;
	width: 100%;
	height: 270px;
	background-position: center;
}
.yuri-topp span {
	font-size: 180%;
	font-weight: bold;
	color: #9f1125;
	line-height: 3em;
	display: block;
}
.news-box.yuri .news {
	border: none;
}
.news-box.yuri .news span.day {
	color: #9f1125;
	font-weight: bold;
}
.centertop {
	width: 100%;
	background-color: #fff;
}
/***** トップページ　曜日・月特典　赤囲みバナー*****/
#yurinko .banner {
	display: flex;
	justify-content: center;
}
.banner button {
	position: relative;
	margin: 3em 10px;
	display: inline-block;
	padding: 10px;
	border: 2px solid #9f1125;
	background: none;
	font-weight: 800;
	width: 200px;
	justify-content: center;
}
.banner button:first-line {
	font-size: 120%;
	color: #9f1125;
}
.banner button:after {
	position: absolute;
	top: 4px;
	left: -7px;
	content: "";
	height: 100%;
	width: 100%;
	z-index: -999;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(0deg);
}
.banner button.pink:after {
	background: #fec2c2;
}
.yuri-pinkbox-inner {
	position: relative;
	margin: 2em auto;
	display: block;
	padding: 2em;
	border: 2px solid #9f1125;
	background: none;
	font-weight: 800;
	width: 80%;
	font-size: 120%;
	text-align: center;
}
.yuri-pinkbox-inner:after {
	position: absolute;
	top: 4px;
	left: -7px;
	content: "";
	height: 100%;
	width: 100%;
	z-index: -999;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(0deg);
	background: #fec2c2;
}
table.spa-table {
	border-collapse: collapse;
	width: 80%;
	margin: auto;
}
table.spa-table th, table.spa-table td {
	padding: 10px;
	border: 1px solid #9f1125;
}
table.spa-table th {
	background-color: #fec2c2;
	text-align: center;
	width: 30%;
}
#yurinko .imgL ul {
	width: 50%;
	margin-left: 40%;
}
#yurinko .imgL ul li {
	margin-bottom: 1.5em;
}
.info table,.w80 {
	width: 70%;
	margin: 0 auto 2em;
}
.info table th {
	width: 30%;
}
.info table.closed th {
	width: 15%;
}
tr.border-double {
	border-bottom: double 4px #9f1125;
}
/***** アンカーポイント ページ位置の調整*****/
#yu-event {
	margin-top: -52px;
	padding-top: 52px;
}

/*================================================
 *
 *  for　自然公園
 *
 ================================================*/
.kouen-topp {
	text-align: center;
	padding: 2em;
}
.kouen-topp p:first-child {
	color: #3498DB;
	font-size: 200%;
}
#kouen h2 {
	background: linear-gradient(transparent 40%, #F1C40F 40%);
	font-weight: bold;
	width: 70%;
	margin: 2em auto;
	font-size: 1.6em;
	color: #333;
}
#kouen h2.firstLetter {
	background: linear-gradient(transparent 20%, #F1C40F 25%);
	font-weight: bold;
	width: 70%;
	margin: 2em auto;
	font-size: 1.6em;
	color: #333;
	line-height: 2em;
}
#kouen h2.firstLetter:first-letter {
	font-size: 2.5em;
	color: #E8309F;
}
#kouen h2.firstLetter span {
	font-size: 0.9em;
}
.table2 {
	width: 50%;
}
#kouen h3 {
	background-repeat: no-repeat;
	background-position: left center;
	display: inline-block;
	height: 80px;
	padding-left: 100px;
	line-height: 80px;
	width: 50%;
}
h3#parkGolf {
	background-image: url(../shizenkouen/images/golf1.png);
}
h3#grounndGolf {
	background-image: url(../shizenkouen/images/groundgolf.png);
}
h3#tennis {
	background-image: url(../shizenkouen/images/tennis.png);
}
h3#baseball {
	background-image: url(../shizenkouen/images/baseball.png);
}
h3#soccer {
	background-image: url(../shizenkouen/images/soccer.png);
}
h3#drivingRange {
	background-image: url(../shizenkouen/images/golf3.png);
}
h3#hut {
	background-image: url(../shizenkouen/images/bbq.png);
}
h3#camp {
	background-image: url(../shizenkouen/images/camp3.png);
}
h3#hachimorisou {
	background-image: url(../shizenkouen/images/soba.png);
}
#kouen .imgL p {
	margin-left: 80px;
	display: inline-block;
}
.table2 th {
	border: 2px solid #bbb;
	background: rgba(52,152,219,0.2);
	width: 30%;
}
.table2 td {
	border: 2px solid #bbb;
}
#kouen .threeCol-sizen h3 {
    display: inline-block;
    height: 2em;
    padding-left: 0;
    line-height: 2em;
    width: 100%;
    color: #008000;
}
.threeCol-sizen img{
	max-width: 80%;
        height: auto;
}
.threeCol-sizen span {
	display: block;
}

/*================================================
 *
 *  for　ヨーグルト直売店・工房
 *
 ================================================*/
/* ヨーグルトindex　*/
header#yo-index-header {
    height: auto;/* 変更　*/
}
header#yo-header {
    height: 404px;
}
/* safari5.17以前用　*/
/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, header#yo-index-header {
    height: 100vh;
  }
  ::i-block-chrome, .yo-topimg p {
	margin-top: -80vh;
  }
}
/** 
 * iPad with portrait orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
  header#yo-index-header {
    height: 1024px;
  }
.yo-topimg p {
	margin-top: -819px;
}
}

/** 
 * iPad with landscape orientation.
 */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
  header#yo-index-header{
    height: 768px;
  }
.yo-topimg p {
	margin-top: -768px;
}
}

/**
 * iPhone 5
 * You can also target devices with aspect ratio.
 */
@media screen and (device-aspect-ratio: 40/71) {
  header#yo-index-header {
    height: 500px;
  }
.yo-topimg p {
	margin-top: -384px;
}
}
/* ↑Safariハックここまで　*/

/* ↓index　「朝が似合う～」　*/
.yo-topimg p {
	font-size: 3vw;
	z-index: 100;
	color: rgba(63,193,201, 0.9);
	display: block;
	clear: both;
	position: absolute;
	top: 10%;
	left: 10%;
}

.yo-topimg{
	position: relative;
	clear: both;
	z-index: -1;
	width: inherit;
}

.yo-topimg p span {
	font-size: 120%;
}
.yogurt-topp p.yo-topp1 {
	font-size: 180%;
	font-weight: bold;
	color: #fc5185;
	line-height: 3em;
	margin: 1em 0 0;
}
.yo-topimg img {
	margin: auto;
	width: 100%;
}
div#tawawa1, div#recipe {
	margin-top: -20px;
	padding-top: 20px;
}
.yogurt-topp {
	text-align: center;
	font-size: 120%;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
}
.author{
	margin-right: 250px;
}

#yogurt .news-box {
	margin-top: 4em;
}
#yogurt .news-box .news {
	float: right;
	width: 700px;
	border: none;
        margin-right: 0;
}

#yogurt .osusume {
	border: thin solid #9CF;
	padding-top: 1em;
	text-align: center;
}
#yogurt .osusume img {
	margin: auto;
	display: block;
}
/* index　産直たわわ */
.tawawa p{
        margin-bottom: 3em;
}
#yogurt .map-right{
	width: 45%;
	float: right;
}
/*　工房便り */
.kouboutdayori .archive {
	width: 750px;
	border: none;
        margin-left: 400px;
}
.kouboutdayori .archive ul li {
    padding: 10px;
    float: left;
margin-left: 0;
list-style: none;
}
/*　googleマップ */
.imgL div.map-left {
	width: 500px;
	float: left;
	margin: 0 4em 0.5em 0;
}
/***** 製品一覧ボタン*****/
.hvr-icon-spin:before {
	content: url("../yogurt/images/kodomo.png");
	position: absolute;
	left: 1em;
}
.hvr-icon-spin {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	padding-right: 2.5em;
	font-size: 150%;
	font-weight: bold;
	border-radius: 3em;
	-webkit-border-radius: 3em;
	-moz-border-radius: 3em;
}
[class^="hvr-"] {
 padding: 1em 4em;
 cursor: pointer;
 background: #fc5185;
 text-decoration: none;
 color: #fff;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.hvr-icon-spin:after {
	content: url("../yogurt/images/spoon.png");
	position: absolute;
	right: 2em;
	padding: 0 1px;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.hvr-icon-spin:hover:after, .hvr-icon-spin:focus:after, .hvr-icon-spin:active:after {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
/*　ここまで 製品一覧ボタン　*/


.flex {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
}
#yogurt .kouboutdayori .osusume {
	border: none;
}
.news-box.kouboutdayori img {
	height: auto;
	width: 60%;
	border: thin solid #9CF;
}
#yogurt h2 {
	background: #fc5185;
	background: -moz-linear-gradient(top, rgba(252,81,133,0.7) 0%, rgba(252,81,133,1));
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(252,81,133,0.7)), to(rgba(252,81,133,1)));
	border: 1px solid #fc5185;
	border-radius: 3em;
	-moz-border-radius: 3em;
	-webkit-border-radius: 3em;
	color: #fff;
	padding: 0.2em 0;
	margin-bottom: 2em;
}
#yogurt h2:before {
	content: url("../yogurt/images/dot.png");
	margin-right: 1em;
}
#yogurt h2:after {
	content: url("../yogurt/images/dot.png");
	margin-left: 1em;
}
table.yOrder{
        width: 80%;
        margin: 1em auto;
}
table.yOrder th{
        width: 20%;
        text-align: left;
}
table#carriage th{
        width: 11.1%;
        text-align: left;
} 
table#carriage caption{
        text-align: left;
        font-weight: bold;
        font-size: 120%;
}
table.yOrder th,table.yOrder td{
    border: 1px solid #bbb;
}
table.yOrder li{
	margin-bottom: 2em;
}
#yogurt .archive li a {
	text-decoration: none;
	width: 10em;
	border: 1px solid #FC5185;
	display: block;
	text-align: center;
	color: #333;
	margin-bottom: 1em;
	padding: 0.5em;
}
#yogurt .archive li a:hover {
	background-color: #FC5185;
	color: #fff;
}
.size3 {
	width: 25%;
	margin: 4%;
}
ul.yogurt-set li {
	background-image: url(../yogurt/images/listmark_17_p.png);
	background-repeat: no-repeat;
	background-position: left 0.2em;
	list-style-type: none;
	margin-left: 0px;
        padding-left: 1.5em;
}
.yogurtBox img {
	margin: auto;
	display: block;
	width: 100%;
}

.recipe1 {
	margin: auto;
	width: 70%;
}
#yogurt-footer .address1 {
	padding-bottom: 1em;
	border-bottom: 2px dotted #FFF;
	margin-bottom: 1em;
	width: 60%;
}
.yMapBox table {
	float: left;
}
.yMapBox table caption {
	font-size: 18px;
	font-weight: bold;
}
.imgL .yOrder img {
	width: inherit;
}
/***** 　Yahoo!ショッピングボタン　*****/
.shopping a {
	display: block;
	position: fixed;
	bottom: 160px;
	right: 10px;
	z-index: 10;
	text-align: center;
	box-sizing: border-box;
}
.shopping a:hover {
	opacity: 0.7;
}

/*================================================
 *
 *  for　鳥海高原牧場
 *
 ================================================*/
.yogurt-topp p.fa-topp1 {
	font-size: 180%;
	font-weight: bold;
	color: #a0c238;
	line-height: 3em;
	margin: 1em 0 0;
}
#farm h2 {
	background-image: url(../farm/images/b_simple_102_0L.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	font-size: 180%;
	padding: 0.5em;
	font-weight: bold;
	color: #333;
}
/*================================================
 *
 *  ◆タブレット・モバイル◆
 *
 ================================================*/
@media screen and (max-width:979px) {
.contents {
	box-sizing: border-box;
	width: 100%;
	padding: 0 10px;
}
.kakusisetu{
	width: 100%;
}
.news-box {
    clear: both;
    width: 90%;
    margin: 2em auto;
}
.news-box .banner {
	float: none;
	margin: auto;
}
.news-box .news  {
	width: 98%;
        margin-bottom: 2em;
	min-height: 0;
}
.bannerL button {
	width: 100%;
	font-size: 100%;
}
.bannerL button:first-line {
	color: #000;
	font-size: 100%;
}
.threeColInner div.treecl-fb {
	width: 50%;
	margin-left: 20%;
}
.table2 {
	width: 90%;
}


/*--ヨーグルト--*/

header#yo-header {
    height: auto;
}
.yogurt-topp#yo-topindex {
	margin-top: 50px;
}
.yogurt-topp {
	width: 100%;
	font-size: 100%;
}
.yogurt-topp p.yo-topp1 {
	line-height: 1.2em;
}

#yogurt .map-right{
    float: none;
    margin: auto;
}
ul.yogurt-set li {
	background-image: none;
	text-indent: -30px;
	list-style-type: circle;
    list-style-position: inside;
}
/*　工房便り */
.kouboutdayori .archive{
margin-left: auto;
}

/*--自然公園--*/
#kouen h3 {
padding-left: 80px;
}
#kouen .imgL img{
margin: 1em;
}
#kouen .imgL p {
margin-left: 1em;
}
#kouen .table2 {
    margin: auto;
}
}
@media screen and (max-width: 767px) {
/*--お知らせ--*/
.news-box {
	margin-top: 1em;
}
.news-box .news,#yogurt .news-box .news {
	float: none;
	width: 98%;
}
.cm img {
	width: 100%;
	height: auto;
}
/*--やわた各施設紹介--*/
.kakusisetu {
	height: 23%;
	max-width: 100%;
	margin-bottom: 1em;
	padding-top: 3%;
	padding-bottom: 3%;
}
.kakusisetu h2 {
	font-size: 120%;
	line-height: 2em;
}
/*--ゆりんこ--*/
.yuri-topp {
	text-align: left;
	height: 160px;
	padding: 5%;
        width: 90%;
}
.yuri-topp span {
	font-size: 150%;
	line-height: 1.2em;
}
#yurinko .imgL p {
	display: inline;
}
#yurinko .threeCol {
	text-align: center;
}
#yurinko .imgL img {
	margin-right: 1em;
}
#yurinko h2 {
	font-size: 120%;
	padding: 0;
	text-align: left;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 65px;
}
#yurinko h2:before{
	top: 5px;
}
#yurinko h3 {
	width: 60%;
	margin-bottom: 0.5em;
}
#yurinko .imgL p {
    margin-left: 0;
}
/*--自然公園--*/
.kouen-topp {
text-align: left;
}
#kouen h3 {
width: inherit;
}
#kouen h2.firstLetter {
width: 90%;
}
.wrap-photoBox {
	display: block;
	flex-wrap: nowrap;
}
.photoBox {
	width: calc(70%);
	margin: 1em auto;
}
/*--ヨーグルト--*/
.yo-topimg p {
	font-weight: bold;
}
.yogurt-topp p.yo-topp1 {
margin: 2em 3em;
}
.yo-topimg p span {
	font-weight: bold;
}

.flex {
	display: block;
	display: -webkit-block;
}
.size3 {
	width: 40%;
	margin: 4%;
}
.yogurtBox {
	float: left;
}
.yogurtBox:nth-child(2n+1) {
	clear: both;
}
/*工房便り*/
.kouboutdayori .archive {
    width: 90%;
}
@media screen and (max-width: 414px) {
.news-box,.news-box .banner {
    width: 100%;
}
#yawata .bannerFlex {
    display: block;
}
/*--やわた会社概要--*/
dl.list dt {
float: none;
margin-left: 0;
}
dl.list dd {
    padding-left: 0;
}

/*--ゆりんこ--*/
.yuri-topp {
	font-size: 100%;
	text-align: left;
	width: 96%;
        padding: 2%;
}
.yuri-topp span {
	font-size: 110%;
}
#yurinko h2 {
	width: 70%;
}
#yurinko h3 {
	margin-left: 0;
	width: initial;
	display: block;
	clear: both;
}
#yurinko .banner {
	display: block;
}
.banner button {
	margin: 1em 10px;
}
#yurinko .imgC {
	text-align: left;
}
#yurinko .imgL img, .yuri .imgL a img {
	width: 50%;
}
#yurinko .imgL p {
	margin-left: 1em;
}
#yurinko .imgL ul {
	width: 100%;
	margin-left: 0;
}
table.spa-table {
	border: 1px solid #9f1125;
	width: 90%;
}
table.spa-table td {
	display: table-cell;
	text-align: left;
}
table.spa-table th {
	display: table-cell;
	border-top: none;

}
.yuri-pinkbox-inner {
	text-align: left;
	font-size: 100%;
}
/*--ヨーグルト--*/
header {
height: auto;
}

header#yo-header {
    height: auto;
}
.yogurt-topp p.yo-topp1 {
    margin: 1em;
    font-size: 140%;
text-align: left;
}
.yogurt-topp p{
    margin: 1em;
text-align: left;
}
.recipe1 img,.yOrder img.yahoo{
width: 100px;
    height: auto;
}
#yogurt .map-right{
width: 80%;
}
.address_top {
	font-size: 120%;
}
.yo-topimg p {
	font-size: 1.2em;
}
.yogurtBox {
	float: none;
}
.size3 {
	width: 80%;
	margin: 4%;
}

#yogurt-footer .address1 {
	width: 100%;
	font-size: 90%;
}
#yogurt .imgC {
text-align: left;
}
table.yOrder th,table.yOrder td,table#carriage th,table#carriage td{
padding:0;
}
/**製品一覧へボタン**/
.hvr-icon-spin {
font-size: 120%;
}
/**Yahoo!ショッピングボタン**/
.shopping a img {
	width: 80%;
bottom: 80px;
    right: 0;
}
/**工房便り**/
#yogurt .archive li a{
width: 6em;
}
/*--自然公園--*/
.kouen-topp p:first-child{
font-size: 140%;
font-weight: bold;
}
#kouen .imgL h3{
line-height: 1.5em;
}
#kouen .imgL img,#kouen .imgL a img{
width: 100%;
}
#kouen h2.firstLetter span {
    font-size: 0.9em;
    display: block;
    line-height: 1.5em;
    font-size: 80%;
}
}