@charset "utf-8";

div#contents {
	margin-top:0;
}


/* topMv
------------------------------------------------------------------------------------ */
section#topMv {
}
section#topMv ul#topMvSlider {
	width: 100%;
	height: 780px;
}
section#topMv ul#topMvSlider li {
	height: 780px;
}
section#topMv ul#topMvSlider li#topMvSlider01 {
	background: url(/wp-content/themes/maison-delico/images/top_mv_01.webp) 50% 50% no-repeat;
	background-size: cover;
}
section#topMv ul#topMvSlider li#topMvSlider02 {
	background: url(/wp-content/themes/maison-delico/images/top_mv_02.webp) 50% 50% no-repeat;
	background-size: cover;
}
section#topMv ul#topMvSlider li#topMvSlider03 {
	background: url(/wp-content/themes/maison-delico/images/top_mv_03.webp) 50% 50% no-repeat;
	background-size: cover;
}



/* topStory
------------------------------------------------------------------------------------ */
section#topStory {
	padding:150px 0;
	background: url("/wp-content/themes/maison-delico/images/top_story_bg.webp") 50% 0 no-repeat;
	background-size: cover;
}
section#topStory div.sectionInner h2#topStoryLogo {
	width: auto;
	max-width: 204px;
	margin: 0 auto 100px auto;
}



/* topQuality
------------------------------------------------------------------------------------ */
section#topQuality {
}
section#topQuality div.wideImage {
	background: url(/wp-content/themes/maison-delico/images/top_quality_bg.webp) 50% 50% no-repeat;
	background-size: cover;
}



/* topProducts
------------------------------------------------------------------------------------ */
section#topProducts {
	margin-top:150px;
}
section#topProducts div.sectionInner {
	position:relative;
}
section#topProducts div.sectionInner p#topProductsTitleBg {
	position: absolute;
	left: 30px;
	top: 10px;
	width:112px;
	height:146px;
}

section#topProducts div#wideImageSoycookie {
	background: url(/wp-content/themes/maison-delico/images/top_products_bg_soycookie.webp) 50% 50% no-repeat;
	background-size: cover;
}
section#topProducts div.sectionInner p#topProductsSoycookieTitleBg {
	position: absolute;
	left: -120px;
	top: -5px;
	width:92px;
	height:128px;
}

section#topProducts div#wideImageChocolatecream {
	background: url(/wp-content/themes/maison-delico/images/top_products_bg_chocolatecream.webp) 50% 50% no-repeat;
	background-size: cover;
}
section#topProducts div.sectionInner p#topProductsChocolatecreamTitleBg {
	position: absolute;
	right: -140px;
	top: -20px;
	width:102px;
	height:141px;
}



/* topLineup
------------------------------------------------------------------------------------ */
section#topLineup {
	margin-top:150px;
}
section#topLineup div.wideImage {
	background: url(/wp-content/themes/maison-delico/images/top_lineup_bg.webp) 50% 50% no-repeat;
	background-size: cover;
}
ul.lineupList {
	margin-top:30px;
}
ul.lineupList li {
	margin-top:40px;
}
ul.lineupList li:first-child {
	margin-top:0;
}
ul.lineupList li h3.lineupListTitle {
	position: relative;
	width: auto;
	max-width: 690px;
	color: #3D3D3D;
	font-size:1.5em;
	line-height:100%;
	text-align:center;
	margin:0 auto;
	padding:50px 30px;
	background-color:#FFF;
	border-radius:100px;
	cursor: pointer;
	box-sizing: border-box;
	transition: all 0.3s ease;
}
ul.lineupList li div.lineupListBody {
	width: auto;
	max-width: calc(100% + 350px);
	margin:80px -175px 0 -175px;
	padding-bottom:60px;
}
ul.lineupList li div.lineupListBody ul {
	display: flex;
	flex-wrap: wrap;
}
ul.lineupList li div.lineupListBody ul li {
	width: calc((100% - 50px) / 3);
	margin:0 25px 0 0;
}
ul.lineupList li div.lineupListBody ul li:nth-child(3n) {
	margin-right:0;
}
ul.lineupList li div.lineupListBody ul li p {
}
ul.lineupList li div.lineupListBody ul li p img {
	filter: drop-shadow(2px 2px 4px rgb(0,0,0,0.2));
}
ul.lineupList li div.lineupListBody ul li h4 {
	font-size:1.5em;
	line-height:165%;
	text-align:center;
	margin-top:20px;
}

/*アイコンの＋と×*/
.lineupListTitle span {
	display: block;
	position: absolute;
	right: 50px;
	top: 35px;
	width: 54px;
	height: 54px;
	background: url("/wp-content/themes/maison-delico/images/lineup-list_hover.png") 50% 50% no-repeat;
	background-size: 0 0;
	transition: all 0.3s ease;
}
.lineupListTitle span:before,
.lineupListTitle span:after {
	content:'';
	position: absolute;
	width: 24px;
	height: 1px;
	background-color: #3D3D3D;
	transition: all 0.3s ease;
}
.lineupListTitle span:before {
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(0deg);
}
.lineupListTitle span:after {
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(90deg);
}
/* closeというクラスがついたら形状変化 */
ul.lineupList li h3.lineupListTitle:hover span,
.lineupListTitle.close span {
	background-size: 54px 54px;
}
.lineupListTitle:hover span:before,
.lineupListTitle:hover span:after,
.lineupListTitle.close span:before,
.lineupListTitle.close span:after {
	opacity: 0;
}
/* アコーディオンで現れるエリア（はじめは非表示） */
ul.lineupList li div.lineupListBody {
	display: none;
}





/* スマホ用
------------------------------------------------------------------------------------ */
@media screen and (max-width:1279px) {
	/* topMv
	------------------------------------------------------------------------------------ */
	section#topMv ul#topMvSlider,
	section#topMv ul#topMvSlider li {
		height: 100vh;
	}
	section#topMv ul#topMvSlider li#topMvSlider01 {
		background: url(/wp-content/themes/maison-delico/images/top_mv_01_sp.webp) 50% 50% no-repeat;
		background-size: cover;
	}
	section#topMv ul#topMvSlider li#topMvSlider02 {
		background: url(/wp-content/themes/maison-delico/images/top_mv_02_sp.webp) 50% 50% no-repeat;
		background-size: cover;
	}
	section#topMv ul#topMvSlider li#topMvSlider03 {
		background: url(/wp-content/themes/maison-delico/images/top_mv_03_sp.webp) 50% 50% no-repeat;
		background-size: cover;
	}

	/* topStory
	------------------------------------------------------------------------------------ */
	section#topStory {
		padding-top:60px;
		padding-bottom:100px;
		background: url("/wp-content/themes/maison-delico/images/top_story_bg_sp.jpg") 50% 100% no-repeat;
		background-size: cover;
	}
	section#topStory div.sectionInner h2#topStoryLogo {
		max-width: 100px;
		margin-bottom: 40px;
	}

	/* topQuality
	------------------------------------------------------------------------------------ */

	/* topProducts
	------------------------------------------------------------------------------------ */
	section#topProducts {
		margin-top:60px;
	}
	section#topProducts div.sectionInner p#topProductsTitleBg {
		left: 10px;
		top: 10px;
		width:56px;
		height:73px;
	}
	section#topProducts div.sectionInner p#topProductsSoycookieTitleBg {
		left: 50%;
		top: 0px;
		width:46px;
		height:64px;
		transform: translateX(-50%);
	}
	section#topProducts div.sectionInner p#topProductsChocolatecreamTitleBg {
		left: 50%;
		top: 0px;
		right: auto;
		width:51px;
		height:71px;
		transform: translateX(-50%);
	}
	section#topProducts div.sectionInner h3.title02 {
		text-align:center;
		padding-top:90px;
	}

	/* topLineup
	------------------------------------------------------------------------------------ */
	section#topLineup {
		margin-top:60px;
	}
	ul.lineupList li h3.lineupListTitle {
		max-width:none;
		font-size:1em;
		line-height:100%;
		padding:25px 30px;
	}
	ul.lineupList li:nth-child(2) h3.lineupListTitle {
		padding:25px 40px 25px 20px;
	}
	ul.lineupList li div.lineupListBody {
		width:100%;
		max-width:none;
		margin-top:30px;
		margin:80px auto 0 auto;
		padding-bottom:0;
	}
	ul.lineupList li div.lineupListBody ul li {
		width: calc((100% - 20px) / 2);
		margin:30px 20px 0 0;
	}
	ul.lineupList li div.lineupListBody ul li:first-child,
	ul.lineupList li div.lineupListBody ul li:nth-child(2) {
		margin-top:0;
	}
	ul.lineupList li div.lineupListBody ul li:nth-child(3n) {
		margin-right:10px;
	}
	ul.lineupList li div.lineupListBody ul li:nth-child(even) {
		margin-right:0;
	}
	ul.lineupList li div.lineupListBody ul li h4 {
		font-size:1em;
		line-height:165%;
		margin-top:10px;
	}
	/*アイコンの＋と×*/
	.lineupListTitle span {
		right: 20px;
		top: 18px;
		width: 30px;
		height: 30px;
	}
	.lineupListTitle span:before,
	.lineupListTitle span:after {
		width: 16px;
	}
	/* closeというクラスがついたら形状変化 */
	ul.lineupList li h3.lineupListTitle:hover span,
	.lineupListTitle.close span {
		background-size: 30px 30px;
	}
}