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

@media screen and (min-width: 768px) {/* 768px以上のスタイル */}
@media screen and (max-width: 767px) {/* 767px以下のスタイル */}
@media screen and (orientation:portrait) {/*縦持ち用のスタイル*/}
@media screen and (orientation:landscape) {/*横持ち用のスタイル*/}

#wineCommonHeader .contents {
	width: 1164px;
}

@media screen and (max-width: 767px) { /*SP*/
	.container {
		width: 100%;
	}
}

@media print, screen and (min-width: 768px) { /*PC*/
	.onlySp {
		display: none !important;
	}
}

@media screen and (max-width: 767px) { /*SP*/
	.onlyPc {
		display: none !important;
	}
}

html { -webkit-text-size-adjust: 100%; }


/* 中身設定 */
.myspan {
	position: absolute;
	top: -999em;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#back_wrapper {
	margin: auto;
	margin-top: 0px;
	position: relative;
	overflow: hidden;
	text-align:center
}
#top_wrapper {
	margin: auto;
	width: 1164px;
	height: 3400px;
/*	max-height: 3400px;*/
	position: relative;
	overflow: hidden;
	text-align:center
}


#top_wrapper #art_anime_logo,
#top_wrapper #top_before_wine,
#top_wrapper #top_after_wine,
#top_wrapper #top_after_wine_sp,
#top_wrapper #art_anime_back,
#top_wrapper #art_anime_text1,
#top_wrapper #art_anime_text2,
#top_wrapper #art_anime_text3,
#top_wrapper #art_anime_text4 {
  position: absolute;
  left: 0;
  top: 0;
}

#top_wrapper #top_before_wine {
  z-index: 0;
}
#top_wrapper #top_after_wine,
#top_wrapper #top_after_wine_sp {
  z-index: 1;
}
#top_wrapper #art_anime_back {
  z-index: 2;
}
#top_wrapper #art_anime_logo,
#top_wrapper #art_anime_text1,
#top_wrapper #art_anime_text2,
#top_wrapper #art_anime_text3,
#top_wrapper #art_anime_text4 {
  z-index: 3;
}

/* トップアニメ部分共通処理 */
@media screen and (min-width: 768px) { /*PC*/
	#top_after_wine { display: block !important; }
	#top_after_wine_sp { display: none !important; }
	
	#art_anime_logo,
	#top_before_wine,
	#mateus_base,
	#art_anime_back,
	#art_anime_text1,
	#art_anime_text2,
	#art_anime_text3,
	#art_anime_text4 {
		width: 1164px;	height: 670px;	background-repeat: no-repeat;	background-position: center;
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#top_after_wine { display: none !important; }
	#top_after_wine_sp { display: block !important; }
	
	#art_anime_logo,
	#top_before_wine,
	#mateus_base,
	#top_after_wine_sp,
	#art_anime_back,
	#art_anime_text1,
	#art_anime_text2,
	#art_anime_text3,
	#art_anime_text4 {
		width: 100vw;	height: 100vw;	background-repeat: no-repeat;
	}
}

/* アニメスタート　背景　フェードイン*/
@keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ヘッダー部分 */
#browsercheck {
	display:none;
	position: relative;
	z-index: 0;
}
@media all and (-ms-high-contrast: none) {/* IE限定処理 */
	/* IE専用おまじない、これがないと一瞬ちらつきます */
	#back_wrapper{
		margin-top: 0px;
	}
}
.mateus_top_anime {
	display:block !important; 
	animation-name: animeStartHeaderMargin;
	animation-fill-mode: both;
	animation-duration: 1.2s;
	animation-delay: 6.8s;
}

.mateus_top_anime_ie {
	display:block !important; 
	animation-name: animeStartHeaderMarginIE;
	animation-fill-mode: both;
	animation-duration: 1.2s;
	animation-delay: 6.8s;
}
@keyframes animeStartHeaderMarginIE{
	0% {
		z-index: 0;
		height: 0px;
	}
	99% {
		z-index: 0;
		height: 130px;
	}
	100% {
		z-index: 5;
		height: 130px;
	}
}

.mateus_top_anime_ie_sp {
	display:block !important; 
	animation-name: animeStartHeaderMarginIESP;
	animation-fill-mode: both;
	animation-duration: 1.2s;
	animation-delay: 6.8s;
}
@keyframes animeStartHeaderMarginIESP{
	0% {
		z-index: 0;
		height: 0px;
	}
	99% {
		/*height: 175px;*/
		z-index: 0;
		height: 220px;
	}
	100% {
		/*height: 175px;*/
		z-index: 5;
		height: 220px;
	}
}

.mateus_top_anime_ie header div,
.mateus_top_anime_ie header div div,
.mateus_top_anime_ie header div img,
.mateus_top_anime_ie header div div img,
.mateus_top_anime_ie_sp header div,
.mateus_top_anime_ie_sp header div div,
.mateus_top_anime_ie_sp header div img,
.mateus_top_anime_ie_sp header div div img {
	animation-name: fadeIn;
	animation-fill-mode: both;
	animation-duration: 1.2s;
	animation-delay: 6.8s;
	z-index: 0;
}

@media screen and (min-width: 768px) { /*PC*/
	@keyframes animeStartHeaderMargin{
		0% {
			z-index: 0;
			opacity: 0;
			height: 0px;
		}
		99% {
			z-index: 0;
			opacity: 0;
			height: 130px;
		}
		100% {
			z-index: 5;
			opacity: 1;
			height: 130px;
		}
	}
}
@media screen and (max-width: 767px) { /*SP*/
	@keyframes animeStartHeaderMargin{
		0% {
			z-index: 0;
			opacity: 0;
			height: 0px;
		}
		99% {
			z-index: 0;
			opacity: 0;
			/*height: 175px;*/
			height: 220px;
/*			height: 10vh; */
		}
		100% {
			z-index: 5;
			opacity: 1;
			/*height: 175px;*/
			height: 220px;
/*			height: 10vh; */
		}
	}
}

header {
  animation-name: animeStartHeaderOpacity;
  animation-fill-mode: both;
  animation-duration: 7s;
  animation-delay: 1s;
}
@keyframes animeStartHeaderOpacity{
  0% {
	opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) { /*PC*/
	#art_anime_logo {
		background-image: url("../img/art_anime_logo.png");
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#art_anime_logo {
		background-image: url("../img/sp_art_anime_logo.png");
		background-position: top 10px left 10px;
		background-size: 40% auto;
	}
}
#top_wrapper #art_anime_logo {
  animation-name: animeStartLogoOpaciy;
  animation-fill-mode: both;
  animation-duration: 7s;
  animation-delay: 1s;
}
@keyframes animeStartLogoOpaciy{
  0% {
	opacity: 0;
  }
  12% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ワイン　フェードインから拡大 */
@media screen and (min-width: 768px) { /*PC*/
	#top_before_wine {
		background-image: url("../img/art.png");
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#top_before_wine {
		background-image: url("../img/sp_art.png");
		background-position: top 0px center;
		background-size: 100% auto;
	}
}
#top_before_wine {
	animation-name: animeStart;
	animation-fill-mode: both;
	animation-duration: 4s;
	animation-delay: 1s;
}
@keyframes animeStart{
  0% {
	opacity: 0;
  }
  16% {
    opacity: 1;
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* edgeのみ */
@supports (-ms-ime-align:auto) {
#top_before_wine {
	animation-name: animeStart2;
	animation-fill-mode: both;
	animation-duration: 4s;
	animation-delay: 1s;
}
@keyframes animeStart2{
  0% {
	opacity: 0;
  }
  16% {
    opacity: 1;
  }
  45% {
    opacity: 1;
    transform: scale(1) !important;
  }
  100% {
    opacity: 0;
    transform: scale(1) !important;
  }
}
}

/* ワイン 切り替え */
@media screen and (max-width: 767px) { /*SP*/
	#top_after_wine_sp {
		background-image: url("../img/sp_art_anime_wine.png");
		background-position: top 0px center;
		background-size: 41% auto;
	}
}
#top_after_wine,
#top_after_wine_sp {
  animation-name: fadeInWine;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-delay: 3s;
}
@keyframes fadeInWine {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* edgeのみ */
@supports (-ms-ime-align:auto) {
#top_after_wine_sp {
  animation-name: fadeInWine;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-delay: 3s;
}
@keyframes fadeInWine {
  0% {
    opacity: 0;
    transform: scale(1) !important;
  }
  100% {
    opacity: 1;
    transform: scale(1) !important;
  }
}
}

/* 背景 切り替え */
@media screen and (min-width: 768px) { /*PC*/
	#back_background_img_sp {
		display: none;
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#back_background_img {
		display: none;
	}
}

#back_background_img img,
#back_background_img_sp img {
/*	width: 100vw;  *//* 旧safariでは効かなかった */
	width: 100%;
	height: 1514px;
}

#back_background_img,
#back_background_img_sp {
	background-color: #FED5DB;
	text-align:center
	width: 100%;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 0;
}

#back_wrapper {
	animation-name: animeBackground;
	animation-fill-mode: both;
	animation-duration: 3.2s;
	animation-delay: 3s;
}
@keyframes animeBackground {
	0% {
		background-color: #FFFFFF; 
	}
	50% {
		background-color: #A43545;
	}
	100% {
		/* IE と chrome で動作をわけるために処理書かない */
	}
}

@media screen and (min-width: 768px) { /*PC*/
	#mateus_base {
		background-image: url("../img/mateus_base.png");
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#mateus_base {
		background-image: url("../img/sp_mateus_base.png");
		background-position: top 20px right 20px;
		background-size: 35% auto;
	}
}
#mateus_base {
	animation-name: animeStartbase;
	animation-fill-mode: both;
	animation-duration: 4s;
	animation-delay: 1s;
}
@keyframes animeStartbase{
  0% {
	opacity: 0;
  }
  16% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (min-width: 768px) { /*PC*/
	#art_anime_back {
		background-image: url("../img/art_anime_right.png");
		background-position: top;
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#art_anime_back {
		background-image: url("../img/sp_art_anime_right.png");
		background-position: top 20px right 20px;
		background-size: 35% auto;
	}
}
#art_anime_back {
	animation-name: fadeIn;
	animation-fill-mode: both;
	animation-duration: 2s;
	animation-delay: 3.2s;
}

/* ４つの説明 導入 */
@media screen and (min-width: 768px) { /*PC*/
	#art_anime_text1 {	background-image: url("../img/art_anime_text1.png"); }
	#art_anime_text2 {	background-image: url("../img/art_anime_text2.png"); }
	#art_anime_text3 {	background-image: url("../img/art_anime_text3.png"); }
	#art_anime_text4 {	background-image: url("../img/art_anime_text4.png"); }
}
@media screen and (max-width: 767px) { /*SP*/
	#art_anime_text1,
	#art_anime_text2,
	#art_anime_text3,
	#art_anime_text4 {
		background-position: top 80px left 20px;
		background-size: auto 230px;
	}
	#art_anime_text1 {
		background-image: url("../img/sp_art_anime_text1.png");
	}
	#art_anime_text2 {
		background-image: url("../img/sp_art_anime_text2.png");
	}
	#art_anime_text3 {
		background-image: url("../img/sp_art_anime_text3.png");
	}
	#art_anime_text4 {
		background-image: url("../img/sp_art_anime_text4.png");
	}
}
@media (orientation: landscape) and (max-width: 767px){/* ランドスケープ */
	#art_anime_text1,
	#art_anime_text2,
	#art_anime_text3,
	#art_anime_text4 {
		background-size: auto 300px;
	}
}

#top_wrapper #art_anime_text1 {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-delay: 4s;
}
#top_wrapper #art_anime_text2 {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-delay: 4.5s;
}
#top_wrapper #art_anime_text3 {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-delay: 5.0s;
}
#top_wrapper #art_anime_text4 {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-delay: 5.5s;
}


/* 記事中断以下のフェードイン */
/* .kiji, */
.relative_anime,
.relative_anime_sp {
	animation-name: animeStartRelative;
	animation-fill-mode: both;
	animation-duration: 3s;
	animation-delay: 7.5s;
}
@keyframes animeStartRelative{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
}
@keyframes animeStartRelative{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
}


/*
@-moz-keyframes
@-webkit-keyframes
@-o-keyframes
@keyframes
*/








body{
	background: white;
}
.content{
	line-height: 1.6;
	margin: 0 auto;
	padding-top: 100px;
	width: 800px;
}
.content p{
	margin-bottom: 40px;
}
.site-footer{
	background: white;
	padding: 80px 0;
}
.copyright{
	color: #fff;
	font-size: 12px;
	text-align: center;
}

/* サイト用ヘッダ */
.site-header,
.mateus_menu_header {
	background-image: url("../img/logopcfull.png");
	margin: auto;
	width: 1164px;
/*	height: 125px;*/
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
/*	justify-content: center; */
	flex-wrap: wrap;
	z-index: 6;
}

@media screen and (min-width: 768px) { /*PC*/
	.mateus_menu_header {
		justify-content: flex-end;
	}
	.anchor_product,
	.anchor_history {
		width: 240px;
		height: 61px;
		margin-left: 13px;
		margin-right: 13px;
		margin-top: 44px;
	}
	.anchor_product{
		margin-left: 215px;
	}
	.anchor_history {
	    margin-right: 65px;
	}
	.header_product_link {
		width: 240px;
		height: 38px;
		margin-left: 13px;
		margin-right: 13px;
		margin-top: 67px;
	}
	.header_product_link img {
		height:auto;
		width:100%;
	}

	#line {
		display: none;
	}
}
@media screen and (max-width: 767px) { /*SP*/
	#line,
	#line img{
		position: absolute;
		vertical-align: top;
		height: 1px;
		z_index: 4;
		width: 100vw;
	}
	.mateus_menu_header #line {
		position: absolute;
		margin-left: 0;
		margin-top: 20px;
		width: 100vw;
		height: 1px;
		z_index: 4;
	}
	.mateus_menu_header {
		background-image: none;
		margin-top: 60px;
		width: 100vw;
	    padding: 27px 0px;
	    box-sizing: border-box;
	}

	.site-header {
		margin-top: 10px;
		background-image: url("../img/logo.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 140px;
		height: 62px;
	}

	.anchor_product,
	.anchor_history {
		width: 40vw;
	}
	.anchor_product img,
	.anchor_history img {
		width: 40vw;
		max-height: 50px;
	}

	.site-header {
	    margin-top: 0px;
	    background-image: url(../img/logo.png);
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: 140px;
	    width: 100%;
	    height: 44px;
	    border-bottom: 1px solid #e0e0e0;
	    padding-bottom: 40px;
	}
	.site-header,
	.mateus_menu_header {
	    margin: auto;
	    position: relative;
	    left: 0;
	    right: 0;
	    display: flex;
	    flex-wrap: wrap;
	    z-index: 6;
	    align-items: center;
	    justify-content: space-evenly;
	}
	header {
	    position: relative;
	}
	.header_product_link,
	.footer_product_link {
		width: 90%;
		margin-top: 2%;
		margin-left: 5%;
		margin-right: 5%;
	}
	.header_product_link img,
	.footer_product_link img {
	    width: 100%;
	    height:100%;
	}
}
/* edgeのみ */
@supports (-ms-ime-align:auto) {
@media screen and (max-width: 767px) { /*SP*/
	.anchor_product,
	.anchor_history {
		margin: auto;
	}
}
}


/* IE SP 専用処理 */
.anchor_product_iesp {
	margin-left: 7vw;
	margin-right: 3vw;
	width: 40vw;
}
.anchor_history_iesp {
	margin-left: 3vw;
	margin-right: 7vw;
	width: 40vw;
}
.anchor_product_iesp img,
.anchor_history_iesp img {
	width: 40vw;
}


header {
	height: 0px;
}
main {
	display: block;
	background-color: #FED5DB;
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo','メイリオ','YuGothic','Yu Gothic','MS Pgothic','ＭＳ Ｐゴシック','Osaka','Helvetica','Helvetica Neue','Arial','Verdana',sans-serif;
}
@media screen\0 { /* IE8～11専用のフォント指定 */
	main {
	    font-family: 'Segoe UI', /* Windowsの欧文 */
	                 Meiryo,     /* メイリオ */
	                 sans-serif;
	}
}

/* スクロールで順番に出てくるやつ */
.list{
	list-style-type: none;
	overflow: hidden;
}
.list li{
	float: left;
	transition: 1s;
}

.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


@media screen and (min-width: 768px) { /*PC*/
	.relative_anime_sp {
		display: none;
	}
	.relative_anime {
	    position: relative;
		height: 750px;
		z-index: 4;
	}
	.absolute1 {	position: absolute;	left:82px;	top: 35px; }
	.absolute2 {	position: absolute;	left:590px;	top: 84px; }
	.absolute3 {	position: absolute;	left:220px;	top: 244px; }
	.absolute4 {	position: absolute;	left:609px;	top: 376px; }
}
@media screen and (max-width: 767px) { /*SP*/
	.relative_anime {
		display: none;
	}
	.relative_anime_sp {
	    position: relative;
		width: 100vw;
		z-index: 4;
	}
	.absolute1 ul li img,
	.absolute2 ul li img,
	.absolute3 ul li img,
	.absolute4 ul li img {
		width: 90%; 
	}
	.absolute1 {width: 80%;	position: absolute;	left:0px;	top: 0px; }
	.absolute2 {width: 75%;	position: absolute;	right:0px;	top: 100px; }
	.absolute3 {width: 95%;	position: absolute;	left:0px;	top: 300px; }
	.absolute4 {width: 95%;	position: absolute;	right:0px;	top: 500px; }
}


/* 記事 */
@media screen and (min-width: 768px) { /*PC*/
	.kiji {
		margin: auto;
		width: 1164px;
		position: absolute;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		z-index: 4;
	}

	.box_history_mark_sp,
	.box_history_bottle_sp,
	.box_sogrape_mark_sp,
	.box_sogrape_logoart_sp {
		display: none;
	}

	.box_product_mark,
	.box_history_mark,
	.box_sogrape_mark,
	.box_roseboom_mark {
		display: inline-block;/*旧safari用の記述*/
		width: 500px;
		text-align: center;
		float: left;  /* 回り込み */
	}
	.box_product,
	.box_history,
	.box_sogrape,
	.box_roseboom {
		margin-top: 19.920px;
		display: inline-block;/*旧safari用の記述*/
		width: 664px;
		text-align: left;
		clear: both;
	}
	/* 新safari限定処理 */
	_::-webkit-full-page-media, _:future, :root .box_history {
		height: 300px;/*旧safari用の記述*/
	}

	.box_product_text,
	.box_product_img,
	.box_history_text,
	.box_sogrape_text,
	.box_sogrape_imgs,
	.box_roseboom_text,
	.box_roseboom_imgs {
		display: inline-block;/*旧safari用の記述*/
		text-align: left;
		width: 85%;
	}
	.box_product_link {
		text-align: right;
		width: 87%;
	}

	#div-gpt-ad-1469518796001-0-1 {
		margin-left: 174px;	/* iframe右寄せ */
	}

	.box_product_img,
	.box_sogrape_imgs,
	.box_roseboom_imgs {
		margin-top: 20px;
	}

	.box_sogrape_img img {
		margin-left: 14px;
		margin-bottom: 15px;
		width: 273.9px;
	}

	.box_sogrape_img_left,
	.box_sogrape_img_left img {
		float: left;  /* 回り込み */
		width: 273.9px;
	}

	.box_roseboom_imgs img {
		margin-bottom: 10px;
		width: 273.9px;
	}

	.box_roseboom_imgs img:nth-child(even) {
		margin-left: 10px;
	}

	.footer_product_link{
		margin-top:50px;
	}



}
@media screen and (max-width: 767px) { /*SP*/
	.kiji {
		top: 850px;
		text-align: center;
	    position: relative;
		width: 100vw;
		z-index: 4;
	}

	.box_history_mark,
	.box_sogrape_mark {
		display: none;
	}

	.box_history_mark_sp img,
	.box_sogrape_mark_sp img,
	.box_sogrape_logoart_sp img {
		width: 200px;
	}

	.box_product_mark,
	.box_history_mark_sp,
	.box_history_bottle_sp,
	.box_sogrape_mark_sp,
	.box_roseboom_mark {
		width: 100%;
		text-align: center;
		float: left;  /* 回り込み */
	}

	.box_sogrape_logoart_sp {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}

	.box_product,
	.box_history,
	.box_sogrape,
	.box_roseboom {
		width: 100%;
		text-align: center;
		clear: both;
		z-index: 1;
	}

	.box_history_bottle_sp,
	.box_history_bottle_sp img{
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    max-width: 100%;
	    max-height: 100%;
	    margin: auto;
		z-index: 0;
		opacity: 0.7;
	}

	.box_history_text {
		background-image: url("../img/bottle.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.box_product_text,
	.box_product_img img,
	.box_history_text,
	.box_sogrape_text,
	.box_sogrape_imgs,
	.box_roseboom_text,
	.box_roseboom_imgs{
		position: relative;
		text-align: left;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 20px;
		z-index: 1;
	}

	.box_product_link {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	.box_product_link img {
		width: 100%;
	}

	/* iframe用対応 */
	#div-gpt-ad-1469518796001-0-2,
	#div-gpt-ad-1469518796001-0-4,
	#div-gpt-ad-1469518796001-0-6 {
	    width: 288px;
	    margin: auto;
	}

	.box_sogrape_imgs,
	.box_roseboom_imgs {
		margin-top: 20px;
	}

	.box_sogrape_img_left {
		float: left;  /* 回り込み */
		width: 43.2vw;
	}
	.box_sogrape_img_left img {
		width: 43.2vw;
	}
	.box_sogrape_img {
		float: left;  /* 回り込み */
		width: 43.2vw;
		margin-left: 2vw;
	}
	.box_sogrape_img img {
		width: 43.2vw;
	}

	.box_roseboom_imgs img{
		float: left;  /* 回り込み */
		margin-bottom: 10px;
		width: 43.2vw;
	}
	.box_roseboom_imgs img:nth-child(even) {
		margin-left: 10px;
	}

}

/* 泡 */
/* Essential CSS - Makes the effect work */
.individual-bubble {
	position: absolute;
	border-radius: 100%;
	top: 72%; /* 泡の下端を指定する */
	background-color: white;
	z-index: 1;
}
@media screen and (min-width: 768px) { /*PC*/
	.individual-bubble {
		top: 79%; /* 泡の下端を指定する */
	}
}




/* ローダー */
#loader{
    width: 80px;
    height: 80px;
    display: none;
    position: fixed;
    _position: absolute;     /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -40px;       /* heightの半分のマイナス値 */
    margin-left: -40px;      /* widthの半分のマイナス値 */
    z-index: 10;             /* #fadeより多い値を入れて下さい */
}
#fade{
    width: 100vw;
    height: auto;
    display: none;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;              /* #loaderより少ない値を入れて下さい */
}


/* ページトップ */
.pagetopset {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 7;
}
@media screen and (max-width: 767px) { /*SP*/
	.pagetopset {
	    position: fixed;
	    bottom: 20px;
	    right: 0px;
	    left: 0px;
	    z-index: 7;
	}
}

@media screen and (min-width: 768px) { /*PC*/
	.sograpetop {
		margin-bottom: 10px;
	    text-align: right;
	}
	.underspace {
		margin-bottom: 30px;
	}
}