@charset "UTF-8";

 /* reset */
html{overflow-y:scroll;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}table{border-collapse:collapse;border-spacing:0;}caption,th{text-align:left;}q:before,q:after{content:'';}object,embed{vertical-align:top;}hr,legend{display:none;}h1,h2,h3,h4,h5,h6{font-size:100%;}img,abbr,acronym,fieldset{border:0;}ul li{list-style-type:none;}p{margin-bottom:;}a,label{cursor:pointer;}img{vertical-align:bottom;margin:0;padding:0;}



body {
    font-size: 12px;
	color:#444;
	line-height: 1.5em;
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "Verd"
}
html{
	scroll-behavior: smooth;
}
#contents {
	max-width: none;
	overflow: hidden;
	background-color: #fcf0ff;
	
}

#container{
	width: 1000px;
	margin: 0 auto;
	background-image: repeating-linear-gradient(90deg, #d1b5e2, #d1b5e2 10px, #d7bfe6 10px, #d7bfe6 20px);
	overflow: hidden;
}
.container_inner{
	background: url(../images/bg_deco.png) repeat left center / contain;
	background-repeat: repeat-y;
}

#container img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
#container .app_topArea .app_top{
	margin-top: 2.5vw;
	margin-bottom: 40px;
}
#container .app_topArea .app_link{
	margin-bottom: 6.17vw;
}

#container .btnArea{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 95%;
	margin: 30px auto 0;
	position: relative;
	left: 1vw;
}
#container .btnArea li{
	width: 33%;
}

#container .text,#container .cnt,#container .illust,#container .cnt_bottom{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#container .text{
	margin-top: 30px;
}
#container .illust._01{
	margin-top: -2vw;
}
#container .illust._02{
	margin-top: 35px;
}
#container .illust._03{
	margin-top: 55px;
}
#container .illust._04{
	margin-top: 20px;
}
#container .illust._05{
	margin-top: 110px;
	margin-bottom: 60px;
}
#container .cnt div:nth-of-type(2){
	max-width: 80%;
	margin: 0 auto;
}
#container .cnt_bottom{
	background-color: #f5d9fc;
}
#container .cnt_bottom .bnr_cnt{
	max-width: 90%;
	margin-top: 65px;
	box-shadow: 6px 6px 14px 2px rgba(144, 93, 160, 0.5);
}
#container .cnt_bottom .btn a{
	display: inline-block;
}
#cnt01{
	margin-top: -100px;
}
#container .app_link{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 3.17vw;
	text-align: center;
}
#container .app_link li:nth-of-type(2){
	margin-left: 50px;
}
#container .app_top{
	margin-top: 80px;
	margin-bottom: 40px;
}	
#container .app_bottom{
	margin: 0 20px 120px;
	font-size: 1.5vw;
	font-size: clamp(12px,1.5vw,18px);
	color: #333;
}
#container .app_bottom p{
	margin-top: 5px;
	text-indent: -1em;
    padding-left: 1em;
	font-weight: 500;
}

@media (max-width: 1000px) {
	#cnt01{
		margin-top: -30px;
	}
	#container .text{
		margin-top: 2.5vw;
	}
	#container .illust._01{
		margin-top: -10px;
	}
	#container .illust._02{
		margin-top: 2.92vw;
	}
	#container .illust._03{
		margin-top: 4.58vw;
	}
	#container .illust._04{
		margin-top: 1.67vw;
	}
	#container .illust._05{
		margin-top: 9.17vw;
		margin-bottom: 5vw;
	}
	#container .cnt_bottom .bnr_cnt{
		margin-top: 5.42vw;
	}
	#container .app_link{
		max-width: 70%;
		margin: 0 auto;
	}
	#container .app_link li{
		width: 42%;
	}
	#container .app_link li:nth-of-type(2){
		margin-left: 5.83vw;
		width: 45%;
	}
	#container .app_topArea .app_top,.app_top{
		margin-bottom: 4vw;
	}
	#container .app_top{
		margin-top: 6.67vw;
		margin-bottom: 4vw;
	}
	#container .app_link{
		margin-bottom: 5vw;
	}
	#container .btnArea{
		margin-top: 10vw;
	}
}





/* 装飾 */
#container .mt30{
	margin-top: 30px!important;
}
#container .mt55{
	margin-top: 55px!important;
}
#container .mt70{
	margin-top: 70px!important;
}
#container a.bnr img{
  transition: .3s ease-in-out;
}
#container a.bnr:hover img{
  filter: brightness(1.075);
}

#container .fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .5s ease, transform .5s ease;
}

#container .fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}


@media (min-width: 1000px) {
	.sp {
		display: none;
	}
}
@media (max-width: 1000px) {
	*{
		box-sizing: border-box;
	}
	.pc {
		display: none;
	}
	#container {
		width: 100%;
	}
}