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

/*====================
共通
====================*/
#mainvisual {
	text-align: center;
}
#mainvisual h1 img {
	display: inline-block;
}
#concept{
	background: #4b2300;
}
#foot .sns {
	display: flex;
	justify-content: center;
}
.scroll_fb{
	position: fixed;
	right: 0;
	z-index: 99;
}

/*====================
LOADING
====================*/
#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: #4b2300;
}
#loading img{
	width: 250px;
	position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 125px);
	-webkit-animation:blink 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}

/* 点滅 */
@-webkit-keyframes blink{
    0% {opacity:0;}
	90% {opacity:1;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
	90% {opacity:1;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
	90% {opacity:1;}
    100% {opacity:1;}
}

/* ～640px For SP
====================================================*/

@media screen and (max-width: 640px), print {
#mainvisual {
	background: url(/sweets/hello-chocolate/images/mv_bg_sp.jpg) no-repeat center/ cover;
	height: 144vw;
	padding-top: 47vw;
}
#mainvisual h1 img {
	width: 90vw;
}
#map_hello {
	position: relative!important;
	width: 100%;
	height: 78vw;
	margin: 6.2vw 0;
}
#official_social{
	background: #4b2300;
	padding-bottom: calc(100%*68/640);
}
#official_social ul{
	display: flex;
}
#foot .sns_area {
	background: url(/sweets/hello-chocolate/images/bg_sns_sp.png) no-repeat top center /cover;
	padding-top: calc(100%*336/640);
	position: relative;
}
#foot .sns {
	position: absolute;
 top:  calc(100%*124/336);
	width: 100%;
}
#foot .sns li {
	width: 14vw;
}
#foot .sns li:not(:first-child) {
	margin-left: 6vw;
}
#foot .banner {
	background: url(/sweets/hello-chocolate/images/bg_foot_sp.png) no-repeat top center /100% auto;
	padding-top: calc(100%*422/640);
	position: relative;
}
#foot .banner a {
	position: absolute;
	top: calc(100%*70/422);
	left:  calc(100%*40/640);
	width:  calc(100%*560/640);
}
.scroll_fb {
	top: 110vw;
}
.scroll_fb img {
	width: 21vw;
}
.scroll_fb.scroll_cmp {
	top: 25vw;
}
.scroll_fb.scroll_cmp img {
	width: 37vw;
}
	
	
/*実機で見たときの隙間調整*/
.contents_wrap > *{
	margin-top: -1px;	
}
.contents_link li,
.access_txt,
.tour_photo{
	margin-top: -1px;	
}
}

/* 641px～ For PC
====================================================*/

@media screen and (min-width: 641px), print {
body,html{
	min-width:1000px;
}
#loading{
		background-size: 300px auto;
}
.contents_link a img,
.scroll_fb a img{
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.contents_link a:hover img,
.scroll_fb a:hover img{
	opacity: 0.7;
}
#mainvisual {
	height: 650px;
	background: url(/sweets/hello-chocolate/images/mv_bg.jpg) no-repeat center/ cover;
	padding-top: 198px;
}
#mainvisual img{
	width: 468px;
}
#concept {
	height: 412px;
	background: #4b2300 url(/sweets/hello-chocolate/images/bg_concept.png) no-repeat bottom center;
	position: relative;
}
#concept h2 {
	position: absolute;
	top: 174px;
	right: calc( 50% + 85px);
}
#concept p {
	position: absolute;
	top: 60px;
	left: calc( 50% + 40px)
}
#contents {
	height: 1358px;
	position: relative;
	background: #fff url(/sweets/hello-chocolate/images/bg_contents.png) no-repeat top center;
}
#contents h2 {
    position: absolute;
    top: 91px;
    left: calc( 50% - 152px);
}
#contents .contents_link {
	position: absolute;
	top: 355px;
	width: 846px;
	display: flex;
	justify-content: space-between;
	left: calc( 50% - 423px)
}
#contents .access_txt {
	position: absolute;
    bottom: 115px;
    right: calc( 50% + 137px);
}
#map_hello {
	position: absolute !important;
	left: calc(50% + 17px);
	bottom: 78px;
	width: 437px;
	height: 319px;
}
#official_social {
	background: #4b2300 url(/sweets/hello-chocolate/images/bg_official_social.png) no-repeat top center;
	height: 235px;
	padding-top: 32px;
	text-align: center;
}
#official_social h2{
	margin-bottom: 32px;	
}
#official_social img {
	display: inline-block;
}
#official_social ul{
	display: flex;
	justify-content: center;
}
#official_social ul li:first-child{
	margin-right: 50px;
}
#foot {
	height: 473px;
	background: #fff url(/sweets/hello-chocolate/images/bg_foot.png) no-repeat top center;
	padding-top: 92px;
}
#foot .sns {
	margin-bottom: 123px;
}
#foot .sns li {
	width: 50px;
}
#foot .sns li:not(:first-child) {
	margin-left: 27px;
}
#foot .banner {
	text-align: center;
}
#foot .banner img {
	display: inline-block;
	width: 323px;
}
.scroll_fb {
	top: 65%;
}
.scroll_fb img {
	width: 94px;
}
.scroll_fb.scroll_cmp {
	top: 40%;
}
.scroll_fb.scroll_cmp img {
	width: auto;
}
}