﻿
body {
	min-width: initial;
}

article {
	background: url(/lalaport/shinmisato/campaign/misato-sns-information2026/common/image/2026/common_bg.png);
}

@media screen and (min-width: 769px){

	#header dl.header-inner dd img {
		width: 179px;
	}

}

@media screen and (max-width: 769px) {

	#header dl.header-inner dd img {
		width: 125px;
	}

	article.container {
		background-size: 56%;
	}

}



/*
#attention
///////////////////////////////////////////////////*/

@media screen and (min-width: 769px){

	#attention .secWrap {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	#attention ul {
		text-align: center;
	}

	#attention ul li {
		display: inline;
	}

}

@media screen and (max-width: 769px) {
}

/*
#sec01
///////////////////////////////////////////////////*/


@media screen and (min-width: 769px){

	.pagetop {
		background: url(/lalaport/shinmisato/campaign/misato-sns-information2026/common/image/2026/pagetop_o.png) top no-repeat;
		background-size: contain;
		position: fixed;
		line-height: 1.0;
		right: 1.5em;
		bottom: 1.5em;
		width: 75px;
		height: 75px;
		margin: 0;
	}

	.pagetop a img {
		opacity: 1;
		transition: .3s;
	}

	.pagetop a:hover img {
		opacity: 0;
	}

}

@media screen and (max-width: 769px){

	.pagetop {
		position: fixed;
		line-height: 1.0;
		right: 1.5em;
		bottom: 1.5em;
		width: 15%;
	}

}




/*
PC_layout
///////////////////////////////////////////////////*/


.area_center .secWrap > div {
	background: #fff;
	box-sizing: border-box;
}

.area_right dl {
	position: relative;
}

@media screen and (min-width: 769px){

	.title div {
		max-width: 800px;
		margin: 0 auto;
		padding: 50px 0 25px;
	}

	.contain {
		display: flex;
		justify-content: space-between;
		position: relative;
		max-width: 1000px;
		margin: 0 auto;
	}

	.area_left {
		order: 0;
		position: sticky;
		top: 0;
		left: 0;
		width: 450px;
		max-height: 1000px;
		transition: .3s;
	}

	.area_left div {
		height: 100%;
		width: 100%;
		max-width: 213px;
		transition: .3s;
	}

	.area_left div h1 {
		margin: 100px 0;
		width: 100%;
	}

	.area_center {
		order: 1;
		flex-grow: 2;
		margin: 0 50px;
	}

	.area_right {
		order: 2;
		width: 450px;
		position: sticky;
		top: 0;
		right: 0;
		max-height: 1000px;
	}

	.area_right .flex_menu {
		display: none;
	}

	.area_right > div {
		padding-top: 2.75vw;
	}

	.area_center .secWrap > div {
		padding: 25px;
		border-radius: 15px;
	}

}

@media screen and (max-width: 769px){

	.title div {
		max-width: 85%;
		margin: 0 auto;
		padding: 3em 0 0;
	}

	.area_left {
		display: none;
	}

	.area_center {
	}

	.flex_menu {
		position: fixed;
		right: 5%;
		top: 72px;
		transition: .3s;
		z-index: 11;
		width: 12.5%;
	}

	.flex_menu span {
		display: block;
	}

	.flex_menu .close,
	.flex_menu .open.slide {
		display: none;
	}

	.flex_menu.slide .close.slide {
		display: block;
	}


	.area_right dl {
		position: fixed;
		right: -80%;
		top: 60px;
		width: 80%;
		z-index: 10;
		transition: .3s;
	}


	.area_right dl.prev {
		right: 0%;
	}


	.area_center .secWrap > div {
		padding: 1em;
		border-radius: 0.5em;
	}
}

/*
shops
///////////////////////////////////////////////////*/

.area_center ul.shop_list {
}

.area_center ul.shop_list > li {
}

.area_center ul.shop_list > li dl {
	display: flex;
	align-items: center;
}

.area_center ul.shop_list > li dl dt {
	width: 40%;
}

.area_center ul.shop_list > li dl dd {
	width: 60%;
}

.area_center ul.shop_list > li dl dd ul.sns_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.area_center ul.shop_list > li dl dd ul.sns_list > li {
	width: calc( 100% / 3 );
}


@media screen and (min-width: 769px){

	.sec01 .secWrap {
		padding-top: 0;
	}

	.secWrap > h2 {
		padding-top: 50px;
	}

	.area_center ul.shop_list > li {
		padding: 20px 0;
	}

	.area_center ul.shop_list > li dl dd ul.sns_list > li {
		margin: 10px 0;
	}

	.area_center ul.shop_list li a img {
		transition: .3s;
		border: none;
	}

	.area_center ul.shop_list li a:hover img {
		opacity: 0.5;
	}

}


@media screen and (max-width: 769px){

	.area_center ul.shop_list > li {
		padding: 1em 0;
	}

	.area_center ul.shop_list > li dl dd ul.sns_list > li {
		margin: 0.5em 0;
	}

	.sec01 h2,
	.sec02 h2,
	.sec03 h2,
	.sec04 h2,
	.sec05 h2,
	.sec06 h2 {
		padding-top: 1.5em;
	}


}

/*
navigation
///////////////////////////////////////////////////*/


.area_right {
}

.area_right div {
	position: relative;
}

.area_right p.flex_menu {
}

.area_right p.flex_menu .open {
}

.area_right p.flex_menu .close {
}

.area_right div dl {

}

.area_right div dl dd,
.area_right div dl dd ul,
.area_right div dl dd ul li {
	display: inline;
}

.area_right div dl dd ul li a {
	display: block;
	position: absolute;
	width: 80%;
	left: 11%;
	height: 11%;
}

.area_right div dl dd ul li a span {
	display: none;
}

.area_right div dl dd ul li:nth-child(1) a {
	top: 18%;
}

.area_right div dl dd ul li:nth-child(2) a {
	top: 30%;
}

.area_right div dl dd ul li:nth-child(3) a {
	top: 42%;
}

.area_right div dl dd ul li:nth-child(4) a {
	top: 54%;
}

.area_right div dl dd ul li:nth-child(5) a {
	top: 66.5%;
}

.area_right div dl dd ul li:nth-child(6) a {
	top: 79%;
}

@media screen and (min-width: 769px){

	.area_right div dl dd ul li a {
		transition: .3s;
	}

	.area_right div dl dd ul li a:hover {
		background: rgba( 255, 255, 255, 0.5 );
	}

}


@media screen and (max-width: 769px){

	.area_right div dl dd ul li a {
		height: 11%;
	}

}




/*
sections
///////////////////////////////////////////////////*/

.sec01 .secWrap > div {
	border: 2px solid #e5006e;
}

.sec01 .secWrap ul.shop_list > li {
	border-bottom: 2px solid #e5006e;

}

.sec02 .secWrap > div {
	border: 2px solid #7e318e;
}

.sec02 .secWrap ul.shop_list > li {
	border-bottom: 2px solid #7e318e;

}

.sec03 .secWrap > div {
	border: 2px solid #f08300;
}

.sec03 .secWrap ul.shop_list > li {
	border-bottom: 2px solid #f08300;

}

.sec04 .secWrap > div {
	border: 2px solid #00a73c;
}

.sec04 .secWrap ul.shop_list > li {
	border-bottom: 2px solid #00a73c;

}

.sec05 .secWrap > div {
	border: 2px solid #9dc814;
}

.sec05 .secWrap ul.shop_list > li {
	border-bottom: 2px solid #9dc814;

}

.sec06 .secWrap > div {
	border: 2px solid #ea5504;
}

.sec06 .secWrap ul.shop_list > li {
	border-bottom: 2px solid #ea5504;

}

.secWrap ul.shop_list > li:last-child {
	border-bottom: 0;
}

.secWrap > h2 {
	position: relative;
}

.secWrap > h2 > img {
	position: absolute;
	width: 92%;
	transform: translateY(-50%);
	left: 4%;
}

.attention {
}

.attention .secWrap {
	border-top: 2px solid #3d1a1e;
	color: #3d1a1e;
}

.attention .secWrap ul li {
	padding-left: 1em;
	text-indent: -1em;
}


@media screen and (min-width: 769px){

	.attention .secWrap {
		font-size: 14px;
		padding: 10px 0;
		margin-top: 50px;
	}

	.attention .secWrap ul {
		padding: 15px 0;
	}

}

@media screen and (max-width: 769px){

	section.attention {
		padding-bottom: 1em;
	}

	.attention .secWrap {
		margin-top: 1.5em;
		font-size: 12px;
	}

	.attention .secWrap ul {
		margin: 1em;
	}


}




