@charset "utf-8";

.forPc {
	display: block;
}

/* Topイメージ */
.topImg {
	text-align: center;
	padding-top: 210px;
	margin-bottom: 40px;
}

.topImg img {
	height: auto;
	width: 60%;
}

.fv {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-radius: 50%;
	margin-top: 220px;
}

.nm {
	width: 100%;
	border-radius: 8px;
}

/* #ID */
#concept,
#story,
#kodawari,
#news,
#sweets,
#shop,
#contact {
	padding-top: 180px;
}

/* CONCEPT */
.concept {
	background-image: url(../images/butterqueen_02.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	height: 689px;/*736px*/
	width: 880px;/*940px*/
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	padding-top: 200px;
}

.concept .comceTitle {
	font-family: 'Source Serif Pro', serif;
	font-size: 64px;
	line-height: 100%;
	margin-bottom: 40px;
}

.concept .comceTxt {
	font-size: 34px;
	line-height: 160%;
	text-align: center;
	font-weight: 700;
	  text-shadow    : 
       4px  4px 2px #ffffff,
      -4px  4px 2px #ffffff,
       4px -4px 2px #ffffff,
      -4px -4px 2px #ffffff,
       4px  0px 2px #ffffff,
       0px  4px 2px #ffffff,
      -4px  0px 2px #ffffff,
       0px -4px 2px #ffffff; 
}

.subTitle {
	font-family: 'Source Serif Pro', serif;
	font-size: 64px;
	line-height: 120%;
	margin-bottom: 50px;
	text-align: center;
	width: 100%;
}

.subTitle_jp {
	font-size: 64px;
	line-height: 120%;
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
	font-weight: 700;
}

/* STORY */
.story {
	display:flex;
	flex-diretion: row;
	flex-wrap:wrap;
	justify-content: center;
	width: 100%;
}

.story .storyLeft {
	width: 500px;
	padding-top: 80px;
	text-align: right;
}

.story h3 {
	width: 500px;
	font-size: 22px;
	line-height: 150%;
	font-weight: 700;
	text-align: center;
}

/* こだわり */
.kodawari {
}

.bgTxt {
	display:flex;
	flex-diretion: row;
	flex-wrap:wrap;
	justify-content: space-between;
	padding-top: 30px;
}


/* NEWS */
.newsArea {
	width: 60%;
	margin-right: auto;
	margin-bottom: 80px;
	margin-left: auto;
}

.newsTop {
	display: flex;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	margin-bottom: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	border-top-style: solid;
	border-top-color: #999;
	border-top-width: 1px;
}

.news {
	display: flex;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.news2 {
	padding-bottom: 1em;
}

.newsTop dt,
.news dt {
	font-size: 18px;
	line-height: 140%;
	width: 24%;
	text-indent: -1em;
	padding-left: 1em;
}

.newsTop dt br,
.news dt br {
	display: block;
}

.newsTop dd,
.news dd {
	font-size: 18px;
	line-height: 140%;
	width: 76%;
}

.newsTop dd a,
.news dd a,
.newsTop dd a:visited,
.news dd a:visited {
	font-size: 18px;
	line-height: 140%;
	width: 100%;/*76*/
	text-decoration: underline;
	color: inherit;
	background-image: url(../images/gaibulink.gif);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 5%;
	padding-right: 8%;
	display: inline-block;
}

.newsTop dd a:hover,
.news dd a:hover {
	color: #F00;
	text-decoration: underline;
}

/* バターダイアリー */
.diary {
	padding-bottom: 14px;
}

.diary .diaryTtl{
	font-size: 2vw;
	font-weight: bold;
	text-align: center;
}

/* 商品 */
.sweets {
	margin-bottom: 160px;
	width: 82%;/*88*/
	margin-right: auto;
	margin-left: auto;
}

.sweets img {
	height: auto;
	width: 100%;
}

h4 {
	font-size: 22px;
	line-height: 140%;
	padding-top: 0.4em;
	padding-bottom: 1.5em;
	font-weight: 500;
}

h4.indent {
	font-size: 22px;
	line-height: 140%;
	padding-top: 0.4em;
	padding-bottom: 1.5em;
	font-weight: 500;
	padding-left: 1em;
}

.h4br {
	display: block;
}

.sweets a:hover {
	opacity: 0.6;
}

/* SHOP */
.shop {
	margin-bottom: 80px;
}

/* コンタクト */
.contact {
	margin-bottom: 220px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.phone {
	font-size: 50px;
	font-family: 'Source Serif Pro', serif;
	line-height: 140%;
	font-weight: 900;
	padding-top: 20px;
	padding-bottom: 20px;
}

.small {
	font-size: 20px;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	padding-left: 10px;
	vertical-align: middle;
}

.phoBr {
	display: none;
}

.business {
	font-size: 18px;
	line-height: 150%;
}

/* For YouTube */
.moveArea {
	width: 100%;
	margin-top: 24vh;
}

.moveAreaNews {
	width: 100%;
}

/* YouTube */
.youtube-wrapper {
	max-width: 100%;
}

.youtube {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 56.25%;
	border-radius: 20px;
}

.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}


@media screen and (max-width: 767.98px){ /*768-992*/

.forPc {
	display: none;
}


/* Topイメージ */
.topImg {
	text-align: center;
	padding-top: 200px;
	margin-bottom: 20px;
}

.topImg img {
	height: auto;
	width: 90%;
}


.fv {
	width: 92%;
	margin-right: auto;
	margin-left: 4%;
	border-radius: 50%;
	margin-top: 200px;
}


/* #ID */
#concept {
	padding-top: 120px;/*138*/
}

#story,
#kodawari,
#news,
#sweets,
#shop,
#contact {
	padding-top: 148px;/*138*/
}

/* CONCEPT */
.concept {
	background-image: url(../images/butterqueen_02.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	height: 100%;/*736px*/
	width: 100%;/*940px*/
	margin-right: 0px;
	margin-left: 0px;
	text-align: center;
	padding-top: 50px;
	margin-top: 40px;
}

.concept .comceTitle {
	font-family: 'Source Serif Pro', serif;
	font-size: 26px;
	line-height: 100%;
	margin-bottom: 10px;
}

.concept .comceTxt {
	font-size: 17px;
	line-height: 160%;
	text-align: center;
	font-weight: 700;
	  text-shadow    : 
       4px  4px 2px #ffffff,
      -4px  4px 2px #ffffff,
       4px -4px 2px #ffffff,
      -4px -4px 2px #ffffff,
       4px  0px 2px #ffffff,
       0px  4px 2px #ffffff,
      -4px  0px 2px #ffffff,
       0px -4px 2px #ffffff; 
}

.subTitle {
	font-family: 'Source Serif Pro', serif;
	font-size: 26px;
	line-height: 120%;
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
}

.subTitle_jp {
	font-size: 26px;
	line-height: 120%;
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
	font-weight: 700;
}

/* STORY */
.story {
	display:flex;
	flex-diretion: row;
	flex-wrap:wrap;
	justify-content: center;
	width: 100%;
}

.story .storyLeft {
	width: 90%;
	padding-top: 0px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

.story .storyLeft img {
	height: auto;
	width: 90%;
}

.story h3 {
	width: 100%;
	font-size: 14px;
	line-height: 150%;
	font-weight: 700;
	text-align: center;
}

/* こだわり */
.kodawari {
}

.hokkaido img {
	height: auto;
	width: 100%;
}

.bgTxt {
	display:flex;
	flex-diretion: row;
	flex-wrap:wrap;
	justify-content: space-between;
	padding-top: 30px;
}


/* NEWS */
.newsArea {
	width: 80%;
	margin-right: auto;
	margin-bottom: 80px;/*6%*/
	margin-left: auto;
}

.newsTop {
	display: flex;
	flex-wrap:wrap;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	margin-bottom: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	border-top-style: solid;
	border-top-color: #999;
	border-top-width: 1px;
}

.news {
	display: flex;
	flex-wrap:wrap;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.newsTop dt,
.news dt {
	font-size: 14px;
	line-height: 140%;
	width: 100%;
	padding-bottom: 0.3em;
}

.newsTop dt br,
.news dt br {
	display: none;
}

.newsTop dd,
.news dd {
	font-size: 14px;
	line-height: 140%;
	width: 100%;
}

.newsTop dd a,
.news dd a,
.newsTop dd a:visited,
.news dd a:visited {
	font-size: 14px;
	line-height: 150%;
	width: 100%;/*76*/
	text-decoration: underline;
	color: inherit;
	background-image: url(../images/gaibulink.gif);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 7%;
	padding-right: 8%;
	display: inline-block;
}

.diary .diaryTtl{
	font-size: 4vw;
	font-weight: bold;
	text-align: center;
}

/* 商品 */
.sweets {
	margin-bottom: 40px;
	width: 94%;/*88*/
	margin-right: auto;
	margin-left: auto;
}

.sweets img {
	height: auto;
	width: 100%;
}

h4 {
	font-size: 12px;
	line-height: 140%;
	padding-top: 0.4em;
	padding-bottom: 1.5em;
	font-weight: 500;
}

h4.indent {
	font-size: 12px;
	line-height: 140%;
	padding-top: 0.4em;
	padding-bottom: 1.5em;
	font-weight: 500;
	padding-left: 0em;
}

.h4br {
	display: none;
}

.sweets a:hover {
	opacity: 0.6;
}

/* SHOP */
.shop {
	margin-bottom: 140px;
}

.shopFace {
	padding-top: 40px;
}

.shopFace img {
	height: auto;
	width: 88%;
	margin-right: auto;
	margin-left: auto;
}

/* コンタクト */
.contact {
	margin-bottom: 80px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.contImg {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.contImg img {
	height: auto;
	width: 100%;
}

.phone {
	font-size: 34px;
	font-family: 'Source Serif Pro', serif;
	line-height: 100%;
	font-weight: 900;
	padding-top: 20px;
	padding-bottom: 20px;
}

.small {
	font-size: 16px;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	padding-left: 0px;
	vertical-align: middle;
}

.phoBr {
	display: block;
}

.business {
	font-size: 14px;
	line-height: 150%;
}

/* For YouTube */
.moveArea {
	width: 100%;
	padding-bottom: 0px;
	margin-top: 30vh;
}

.moveAreaNews {
	width: 100%;
}


/* YouTube */  
.youtube-wrapper {
	width: 94%;
	margin-right: auto;
	margin-left: auto;
  }

.youtube {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 56.25%;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

}