@charset "utf-8";
.pc{
	display: block;
}
.tab{
	display: none;
}
.sp{
	display: none;
}

#bg_baloon {
	font-family: "Noto Serif JP", serif;
	text-align: center;
	margin-top: 134px;
	color: #604419;
	background: 
		url(../images/anniversary/bg_baloon_left.svg) top 5px left calc(50% - 550px) no-repeat,
		url(../images/anniversary/bg_baloon_right.svg) top 20px right calc(50% - 850px) no-repeat;
	background-attachment: fixed, fixed;
	background-size: 100% auto, 50% auto;
}
#bg_baloon a{
	transition: 0.3s;
}
#bg_baloon a:hover{
	text-decoration: none;
	opacity: 0.85;
}
.bg_01{
	background: linear-gradient( to bottom , #F5DFCA 0px, #F1ECD2 250px, #FEF8F2 1400px, #FEFCF2 100%)
}
.bg_02{
	background: url(../images/anniversary/bg_02.png) top 1190px center no-repeat;
}
/*main*/
#main {
	padding-top: 80px
}
#main h2 {
	margin-bottom: 50px
}
#main h2 img{
	display: block;
	margin: 0 auto;
}
#main h2 img.logo{
	width: 30%;
	max-width: 260px;
	margin-bottom: 50px
}
#main h2 img.txt{
	width: 80%;
	max-width: 700px;
	filter: drop-shadow(1px 1px 0px white);
}
#main .ph{
	margin-bottom: 50px;
}
#main .ph img{
	width: 100%;
	height: auto;
}
#main p{
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 2.0;
}
#main p b{
	color: #E61E58;
}
/*plan*/
#plan{
	padding: 200px 0 100px 0;
}
#plan .nav{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1060px;
	margin: 0 auto 5% auto;
}
#plan .nav.col_3 li{
	width: 31%;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}
#plan .nav.col_4 li{
	width: 24%;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}
#plan .nav li a{
	display: block;
	background-color: white;
	border: solid #D4D4D4 1px;
	border-radius: 6px;
	padding: 13px 0;
	position: relative;
}
#plan .nav li a:hover{
	opacity: 0.7;
}
#plan .nav li a::after{
	display: block;
	content: '';
	width: 20px;
	height: 10px;
	background: url(../images/anniversary/arrow.svg) top center no-repeat;
	background-size: contain;
	position: absolute;
	top: calc(50% - 5px);
	right: 20px;
}
#plan .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#plan .flex .w_100{
	width: 100%;
}
#plan .flex .w_50{
	width: 48%;
}
#plan .flex .w_50 .slide{
	max-width: 450px;
	margin: 0 auto 80px auto;
}
#plan .flex .w_100.noslide .slide{
	max-width: 450px;
	margin: 0 auto 80px auto;
}
#plan h3{
	border-bottom: solid #704F1D 1px;
	padding: 0 0 20px 0;
	margin: 0 0 20px 0;
}
#plan h3 img{
	display: block;
	width: auto;
	height: auto;
	margin: 0 auto 5px auto;
}
#plan h3::before{
	display: inline-block;
	content: '';
	width: 31px;
	height: 22px;
	background: url(../images/anniversary/ico_crown.svg) top center no-repeat;
	margin-bottom: 10px;
}
#plan .slide{
	margin-bottom: 80px;
}
#plan .slide li.slick-slide {
	border-radius: 5px;
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
	margin-top: 5px;
	margin-bottom: 5px;
	overflow: hidden;
}
#plan .slide img{
	width: 100%;
	height: auto;
}
#plan .slide .txt{
	background-color: white;
	padding: 25px;
}
#plan .slide .txt h4{
	color: #AE7C30;
	font-size: 2.2rem;
	line-height: 1.5;
	margin-bottom: 15px;
}
#plan .slide .txt p{
	text-align: left;
}
#plan .slide .txt p b{
	color:#E61E58;
}
#plan .slide .txt p.more{
	color: #AE7C30;
	text-align: right;
}
.slick-list {
  margin: 0 -15px !important;
}
.slick-slide {
  margin: 0 15px;
} 
.slick-prev:before, .slick-next:before{
	opacity: 1 !important;
}
.slick-dots li button:before{
	font-size: 34px !important;
	color: #F6C7B8 !important;
}
.slick-dots li.slick-active button:before{
	color: #E61E58 !important;
}
.slick-dots li:only-child {
	display: none;
}

@media screen and (max-width: 1500px){
	#bg_baloon {
		background: 
			url(../images/anniversary/bg_baloon_left.svg) top 5px left calc(50% - 400px) no-repeat,
			url(../images/anniversary/bg_baloon_right.svg) top 20px right calc(50% - 700px) no-repeat;
		background-attachment: fixed, fixed;
		background-size: auto auto, auto auto;
	}
}
@media screen and (max-width: 1200px){
	#bg_baloon {
		background: 
			url(../images/anniversary/bg_baloon_left.svg) top 5px left calc(50% - 350px) no-repeat,
			url(../images/anniversary/bg_baloon_right.svg) top 20px right calc(50% - 650px) no-repeat;
		background-attachment: fixed, fixed;
		background-size: auto auto, auto auto;
	}
	.bg_02{
		display: block;
		background: url(../images/anniversary/bg_02.png) top 1150px center no-repeat;
		background-size: auto auto;
	}
}
@media screen and (max-width: 1100px){
	.slide{
		margin: 0 50px 80px 50px;
	}
	.slick-list {
	  margin: 0 -15px !important;
	}
	.slick-slide {
	  margin: 0 15px;
	}
	.slick-prev, .slick-next{
		width: 45px !important;
		height: 45px !important;
		z-index: 2;
	}
	.slick-next:before{
		display: block;
		content: '' !important;
		width: 45px;
		height: 45px;
		background: url(../images/anniversary/arrow_right.svg) top right no-repeat;
		background-size: contain;
	}
	.slick-prev:before{
		display: block;
		content: '' !important;
		width: 45px;
		height: 45px;
		background: url(../images/anniversary/arrow_left.svg) top right no-repeat;
		background-size: contain;
	}
}
@media screen and (max-width: 1000px){
	#bg_baloon {
		background: none;
	}
	#main {
		background: 
			url(../images/anniversary/bg_main_bottom.svg) bottom -1px center no-repeat,
			url(../images/anniversary/bg_baloon_sp.svg) top -10px left 50% no-repeat;
		background-size: 100% auto, 190% auto;
		background-attachment:  scroll, fixed;
		padding-bottom: 15%;
	}
	.bg_01{
		background: linear-gradient( to bottom , #F5DFCA 0px, #F1ECD2 600px)
	}
	.bg_02{
		background: none;
	}
	#main .ph img.pc{
		display: none;
	}
	#main .ph img.sp{
		display: block;
		max-width: 700px;
		margin: 0 auto;
	}
	#plan{
		background: linear-gradient( to bottom , #FFE5CC 0px, #F1ECD2 50%, #FEFCF2 100%);
		padding-top: 50px
	}
	#plan .nav{
		max-width: 700px;
	}
	#plan .nav.col_3{
		justify-content: space-around;
	}
	#plan .nav.col_3 li{
		width: 47%;
	}
	#plan .nav.col_4 li{
		width: 49%;
	}
	#plan .nav.col_3 li{
		font-size: 1.7rem;
		margin-bottom: 15px
	}
}
@media screen and (max-width: 900px){
	.tab{
		display: block;
	}
}
@media screen and (max-width: 768px){
	#bg_baloon {
		margin-top: 51px;
		background: none;
	}
}
/***********************************
幅が768px以下の場合
***********************************/
@media screen and (max-width: 767px){
	/*main*/
	#main {
		padding-top: 50px;
	}
	#main h2 {
		margin-bottom: 40px
	}
	#main h2 img.logo{
		max-width: 200px;
		margin-bottom: 50px
	}
	#main .ph{
		margin-bottom: 50px;
	}
	#main p{
		font-size: clamp(16px, 2.6vw, 30px);
		filter: drop-shadow(1px 1px 0px white);
	}
	#main p:nth-of-type(1){
		margin-bottom: 20px
	}
	/*plan*/
	#plan .nav{
		margin: 0 auto 60px auto;
	}
	#plan .nav li{
		margin-bottom: 10px;
	}
	#plan .nav li a::after{
		width: 12px;
		height: 8px;
		top: calc(50% - 3px);
		right: 12px;
	}
	#plan h3 img{
		display: block;
		height: 60px;
		width: auto;
		margin: 0 auto 5px auto;
	}
	#plan .slide .txt{
		padding: 20px;
	}
	#plan .slide .txt h4{
		font-size: 2.0rem;
		line-height: 1.5;
	}
}

/***********************************
幅が680px以下の場合
***********************************/
@media screen and (max-width: 680px){
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	#bg_baloon {
		background:none;
	}
	.bg_01{
		background: linear-gradient( to bottom , #F5DFCA 0px, #F1ECD2 250px, #FEF8F2 1400px)
	}
	.bg_02{
		background: none;
	}
	/*main*/
	#main {
		padding-top: 50px
	}
	#main h2 {
		margin-bottom: 30px
	}
	#main h2 img.logo{
		max-width: 200px;
		margin-bottom: 30px
	}
	#main h2 img.txt{
		max-width: 240px;
	}
	#main .ph{
		margin-bottom: 50px;
	}
	#main p{
		font-size: clamp(16px, 3.4vw, 30px);
	}
	#main p:nth-of-type(1){
		margin-bottom: 20px
	}
	/*plan*/
	#plan .nav{
		margin: 0 auto 60px auto;
	}
	#plan .nav li{
		font-size: 1.5rem;
	}
	#plan .nav li a{
		padding: 8px 0;
	}
	#plan .flex .w_50{
		width: 100%;
	}
	#plan .flex .w_50 .slide{
		max-width: calc(100% - 30px);
		margin: 0 auto 40px auto;
	}
	#plan .flex .w_100.noslide .slide{
		max-width: calc(100% - 30px);
		margin: 0 auto 40px auto;
	}
	#plan h3{
		font-size: 1.4rem;;
		padding-top: 70px;
		margin-top: -70px;
		margin-bottom: 7px;
		padding-bottom: 4px;
	}
	#plan h3::before{
		margin-bottom: 0px;
	}
	#plan h3 img{
		margin-bottom: 0;
	}
	#plan h3 img.ttl_01,#plan h3 img.ttl_02,#plan h3 img.ttl_03{
		height: 40px;
		width: auto;
	}
	#plan h3 img.ttl_04{
		height: 34px;
		width: auto;
	}
	#plan .slide .txt h4{
		font-size: 1.8rem;
		line-height: 1.4;;
		margin-bottom: 10px;
	}
	#plan .slide .txt p.more{
		font-size: 1.2rem;
	}
	#plan .slide{
		margin: 0 20px 60px 20px;
	}
}