@font-face {
font-family: "analogue";
src: url("analogue-webfont.woff") format('woff');
}



* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


ul, li{
  list-style:none;
}



img{
  width:100%;
  height:auto;
}

a{
	display: block;
	color: #000000;
	text-decoration:none;
}


video{
	display:block;
  width:100%;
  height:auto;
}

::selection {
  background-color: #000;
  color:#fff;
}


.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 999999;
  opacity: 1;
  background: #fff;
}


.loader
{
  position: absolute;
  display: inline-block;
  top:50%;
  left:50%;
  margin-left:-17px;
  margin-top:-30px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid #ccc;
  border-right-color: transparent;
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
}


@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
50%  { -webkit-transform: rotate(180deg); opacity: 1; }
100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); opacity: 0.4; }
50%  { -moz-transform: rotate(180deg); opacity: 1; }
100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}








.font_bold{
  font-weight:bold;
}

.text_left{
	text-align:left;
}

.text_right{
	text-align:right;
}












html{
	overflow-x: hidden;
}


body {
	line-height: 180%;
	font-family: "a-otf-ryumin-pr6n", serif;
	color:#000;
	overflow-x: hidden;
}


.space{
	height:130px;
}

/* 共通ページ */



#footer{
	margin-top:200px;
	position:relative;
	padding: 25% 0 200px;
	text-align:center;
}

#footer:before{
	content: "";
	position: absolute;
	z-index:-99;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/footer_bk.webp);
	background-size: 100%;
	background-repeat: no-repeat;
}


#footer:after{
	content: "";
	background: #131f31;
	position: absolute;
	z-index: -999;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
}


	
.footer_link{
	margin-top:100px;
}

.footer_main .footer_date p{
	color:#fff;
}

.footer_main .footer_note p{
	color:#fff;
}

.footer_main h4{
	color:#fff;
	font-size: 50px;
	letter-spacing: 1px;
	line-height: 150%;
    font-weight: normal;
}


.footer_date{
	margin-top: 50px;
}

.footer_date p{
	font-size: 32px;
	letter-spacing: 1px;
}

.footer_note{
	margin-top: 80px;
}

.footer_note p{
	font-size: 22px;
	letter-spacing: 1px;
}



.footer_yoko{
	margin-top:50px;
}


.footer_yoko > div{
	margin-bottom:30px;
}

.footer_yoko > div:last-child{
	margin-bottom:0px;
}

.footer_yoko_box p{
	color:#fff;
}

.footer_yoko_box .y_title p{
	font-size:18px;
	font-weight:bold;
}

.footer_yoko_box a{
	color:#fff;
	display:inline;
}

.footer_yoko_box .y_title p:after{
	content:"";
	display:inline-block;
	width:60px;
	height:1px;
	background:#fff;
	vertical-align: super;
	margin-left:15px;
}

.footer_yoko_box .y_title p:before{
	content:"";
	display:inline-block;
	width:60px;
	height:1px;
	background:#fff;
	vertical-align: super;
	margin-right:15px;
}

.footer_insta{
	margin-top:60px;
}

.gocheckit p{
	display:inline-block;
	width:300px;
}

.icon_insta img{
	width:30px;
}

.icon_insta a{
	position:relative;
}

.icon_insta a p{
	color:#66b5e5;
}

.icon_insta a span{
	position:absolute;
	width:180px;
	height:180px;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.icon_insta a span:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:2px solid #fff;
	background:rgba(255,255,255,.2);
	border-radius: 333px;
	-webkit-border-radius: 333px;
	-moz-border-radius: 333px;
	animation: zoomIn 4s cubic-bezier(0.25, 1, 0.5, 1) forwards infinite;
}


.footer_accodion{
	margin-top: 100px;
}

.footer_accodion_wrap{
	width: 600px;
	background:#66b5e5;
	display:inline-block;
		border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
}

.footer_accodion_title{
	color:#fff;
	padding:20px;
	cursor: pointer;
	position:relative;
}


.footer_accodion_title p{
	font-size:28px;
	letter-spacing:3px;
}



.footer_accodion_title p .arrow{
  position:absolute;
  right:30px;
  top:34px;
}


.footer_accodion_title p .arrow:after{
 content:"";
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  margin-top:-2px;
}


.footer_accodion_title p .arrow:before{
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
  -o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
  transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
}



.footer_accodion_title.active p .arrow:before{
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
  -o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
  transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
}

.footer_accodion_note{
	padding:0 20px 20px;
	text-align:left;
}

.footer_accodion_note p{
	color:#fff;
	font-size:14px;
	line-height:150%;
}

.footer_accodion_note a{
	color:#fff;
	font-size:14px;
	line-height:150%;
	display:inline;
}





.footer_box {
	text-align: center;
	margin-bottom:80px;
}

.footer_box:last-child {
	margin-bottom:0px;
}


.footer_box > div{
	text-align:center;
	font-size: 22px;
}

.sns_icon{
	font-family: "Oranienbaum", serif;	
	color:#fff;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.sns_icon span{
	display:inline-block;
	width:26px;
}


.masion_logo span{
	width:200px;
	display: inline-block;
}

.footer_box a{
	font-family: "Oranienbaum", serif;	
	font-size:26px;
	color:#fff;
	min-width:200px;
	display:inline-block;
	border:1px solid #fff;
	padding:10px 20px;
	margin-top: 20px;
}


.footer_box a span{
	font-family: "Oranienbaum", serif;	
}



.footer_box a {
  background-image: linear-gradient(
    to right,
    #66b5e5,
    #66b5e5 50%,
    #fff 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
	padding: 10px 20px;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

.footer_box a:before{
  content: '';
  background: #66b5e5;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

.footer_box a:hover {
 background-position: 0;
}

.footer_box a:hover::before{
  width: 100%;
}


.f_campaign{
	margin-top:60px;
}

.f_campaign span{
	display:inline-block;
	width:600px;
}





.main_content{
  padding-left:30%;
  padding-right:70px;
}


.inner{
  max-width:1180px;
  position: relative;
  margin:0 auto;
  padding: 0px 60px;
}



	.main_p{
	position:relative;
	line-height: 0;
	}

	.top_logo{
	width: 22%;
	position:absolute;
	bottom:18%;
	left:10%;
	padding:50px;
}

	.top_logo img{
	position:relative;
	z-index:99;
}


	.top_logo:after {
	content:"";
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background:rgba(228,0,127,.23);
	transform: translate(-10px, 10px);
	-webkit-transform: translate(-10px, 10px);
	-moz-transform:translate(-10px, 10px);
	-o-transform: translate(-10px, 10px);
	-ms-transform: translate(-10px, 10px);
	animation: yura01 4s linear infinite;
}

	.top_logo:before {
	content:"";
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,.23);
	transform: translate(10px, -10px);
	-webkit-transform: translate(10px, -10px);
	-moz-transform:translate(10px, -10px);
	-o-transform: translate(10px, -10px);
	-ms-transform:translate(10px, -10px);
	animation: yura02 4s linear infinite;
	
}


.main_detail{

}




.main_note{
}

.main_note p{
	text-align:center;
	line-height:180%;
	font-size: 12pt;
	color:#fff;
	text-shadow: 1px 2px 3px #000;
}




.insta_link {
	text-align:center;
	margin-top:80px;
}


.insta_link > p{
	font-size:11pt;
	line-height:100%;
}

.insta_link > a{
	display:inline-block;
	width:300px;
}



.st_sec{
		position:relative;;
}


.wrap{
	display: flex;
	justify-content: space-between;
	margin:0 auto;
}

.wrap_w{
	display: flex;
	justify-content: space-between;
	padding:0 60px;
}



.link_btn{
	margin-top: 40px;
	text-align:center;
}

.link_btn_wrap{
	position: relative;
	display:inline-block;
}

.link_btn a{
	position: relative;
    display: block;
    font-family: "Oranienbaum", serif;
    font-weight: 500;
    font-size: 58px;
    padding: 55px 140px;
    color: #e4b0cf;
}



.link_btn a:after{
	content:"";
	position:absolute;
	z-index: -9;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url(../img/btn_bk01.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	animation: yura01 6s linear infinite;
}


.link_btn a:before{
	content:"";
	position:absolute;
	z-index: -9;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url(../img/btn_bk02.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	animation: yura02 6s linear infinite;
}




.main_detail_wrap{
	position:relative;
	padding:150px 0;
	background-image: url(../img/main_detail_bk.webp);
	background-size: cover;
	width: 100%;
	height: 100%;
}


	

.contents_link{
	margin-top: 150px;
	display:flex;
	justify-content: center;
	gap: 40px;
	}

.contents_link_title{
	margin-top:10px;
}

.contents_link_title p{
	font-family: "Oranienbaum", serif;
	line-height:100%;
	font-size:58px;
	color:#fff;
	text-shadow: 1px 2px 3px #000;
}

.contents_link_title p span{
	display:inline-block;
	width:70px;
	vertical-align: middle;
}



.contents_link_list {
}

.contents_link_list a{
    font-size: 40px;
	font-family: "Oranienbaum", serif;
    color: #fff;
	display: block;
	line-height:150%;
	margin-bottom: 15px;
	text-shadow: 1px 2px 3px #000;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}

	.contents_link_list a:last-child{
	margin-bottom:0px;
	}

	
	.contents_link_list a:hover{
	color: #fff;
	text-shadow: -1px 1px 5px #fff, 1px -1px 5px #fff;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	}
	
	.contents_link_list a span{
	font-family: "a-otf-ryumin-pr6n", serif;
	display:block;
	font-size:14px;
	line-height: 100%;
	margin-left:60px;
	}
	
	
	
	/*アニメーション*/
	
	.zoomin{
	animation: zoomIn 4s cubic-bezier(0.25, 1, 0.5, 1) forwards infinite;
	}
	
	@keyframes zoomIn {
	0% {
		transform: scale(0.4);
		opacity: 0;
	}
	60% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
	}
	
	
	/*アニメーション*/
	
	.ani_yura01{
	animation: yura01 6s linear infinite;
	scale: 1;
	}
	
	.ani_yura01_02{
	animation: yura01 12s linear infinite;
	scale: 1;
	}
	
	.ani_yura02{
	animation: yura02 6s linear infinite;
	scale: 1;
	}
	
	.ani_yura02_02{
	animation: yura02 12s linear infinite;
	scale: 1;
	}
	
	
	
	@keyframes yura01{
	0%  {transform:rotate(0deg);}
	25% {transform:rotate(-3deg);}
	50% {transform:rotate(0deg);}
	75% {transform:rotate(3deg);}
	100% {transform:rotate(0deg);}
	}
	
	@keyframes yura02{
	0%  {transform:rotate(0deg);}
	25% {transform:rotate(3deg);}
	50% {transform:rotate(0deg);}
	75% {transform:rotate(-3deg);}
	100% {transform:rotate(0deg);}
	}
	
	
	.active .ani_kuru01{
	animation: kuru01 2s linear;;
	}
	
	@keyframes kuru01{
	0% { -webkit-transform: rotate(0deg); }
	50%  { -webkit-transform: rotate(180deg); }
	100%   { -webkit-transform: rotate(360deg);}
	}
	
	
	
	
	.active .ani_kuru02{
	animation: kuru02 2s linear;;
	}
	
	@keyframes kuru02{
	0% { -webkit-transform: rotate(0deg); }
	50%  { -webkit-transform: rotate(-180deg); }
	100%   { -webkit-transform: rotate(-360deg);}
	}
	
	
	
	.scroll_ani .ani_text02 span{
	opacity: 0;
	}
	
	.scroll_ani.active .ani_text02 span {
	opacity: 0;
	display: inline-block;
	animation: fadeIn02 1s forwards;
	}
	
	
	@keyframes fadeIn02 {
	to {
		opacity: 1;
	}
	}






	
	.svg_ani {
	position: relative;
	z-index: 99;
	}















.slider{
	position:relative;
	width:65%;
}

.img_color{
	width:200px;
	position: absolute;
}


.check{
	margin-top:40px;
	text-align:center;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.check .caption a{
	font-size:16px;
	font-weight:bold;
}

.check .btn{
	display:inline-block;
	border:2px solid #c9641e;
	margin-top:20px;
}

.check .btn a{
	color:#c9641e;
	font-size:16px;
	font-weight:bold;
	padding:5px 15px;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}

.check .btn a:hover{
	color:#fff;
	background:#c9641e;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}


#sec01{
	padding:250px 0;
	background-image:url(../img/sec01_bk.webp);
	background-size: cover;
	background-position: center center;
}


.sec01_wrap{
	position: relative;
	max-width:1000px;
	padding:0 100px;
	margin:0 auto;
}


.main_title01{
	position:absolute;
	z-index:9;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.main_title01 p{
	font-family: "Oranienbaum", serif;
	font-size:120px;
	line-height:100%;
	display: block;
	color:#6f819b;
}

#sec01 .main_title01{
	top:10%;
	right:-250px;
}


.circle_yel{
	position:absolute;
	width:300px;
	top:-200px;
	right:-90px;
}



#sec02 .circle_yel{
	left:-50px;
	right:auto;
}





.sec01_01 .img_color{
	right:-120px;
	bottom:80px;
}


.sec01_02{
	margin-top: 120px;
	display: flex;
	justify-content: flex-end;
}

.sec01_02 .img_color{
	left:-120px;
	bottom:80px;
}









#sec02{
	padding:250px 0;
	background-image:url(../img/sec02_bk.webp);
	background-size: cover;
	background-position: center center;
}

#sec02 .main_title01{
	top:10%;
	left:-250px;
}




.sec02_wrap{
	position: relative;
	max-width:1000px;
	padding:0 100px;
	margin:0 auto;
}



.sec02_01{
	display: flex;
	justify-content: flex-end;
}



.sec02_01 .img_color{
	left:-120px;
	bottom:-30px;
}


.sec02_02{
	margin-top: 120px;
	display: flex;
    justify-content: flex-start;
}

.sec02_02 .img_color{
	right:-120px;
	bottom:-30px;
}




.wave{
	position: absolute;
	top: -200px;
	left: 0;
	width: 100%;
	height: auto;
}

.wave {
  height: 200px; /* お好みで調整可能 */
  overflow: hidden;
}


#sec03{
	background:#e4daf2;
	padding:200px 0;
	position: relative;
}




.sec03_title{
	text-align:center;
	position: relative;
}


.sec03_title_wrap{
	position:relative;
	display:inline-block;
	width:450px;
}



.sec03_title_wrap .howto {
	width: 200px;
	position:absolute;
	bottom:-70px;
	right:-110px;
}


.sec03_title_wrap .howto #mask path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 48px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sec03_title_wrap .howto path {
    fill: #e979aa;
}


.sub_title{
	position: relative;
	max-width: 1000px;
    margin: 200px auto 0;
	text-align:center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:20px;
}


.sub_title p{
	font-family: "Zen Maru Gothic", serif;
	font-size:36px;
	color:#452f7f;
	opacity:0;
}

.active .sub_title p{
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.5s;
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.5s;
}


.sub_title span{
	display:flex;
	justify-content: space-between;
	align-items: center;
	width:0px;
	height:1px;
	background:#452f7f;
}

.active .sub_title span{
	width:240px;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
}

.sub_title span:after{
	content:"";
	width:5px;
	height:5px;
	background:#452f7f;
	border-radius: 333px;
	-webkit-border-radius: 333px;
	-moz-border-radius: 333px;
}

.sub_title span:before{
	content:"";
	width:5px;
	height:5px;
	background:#452f7f;
	border-radius: 333px;
	-webkit-border-radius: 333px;
	-moz-border-radius: 333px;
}



.item_list{
	position: relative;
	max-width: 1000px;
	margin: 100px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 40px;
	grid-row-gap: 80px;
}


.item_box{
		opacity:0;
}

.item_box:nth-child(1).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
}

.item_box:nth-child(2).active {
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
}

.item_box:nth-child(3).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 4s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 4s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 4s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 4s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 4s;
}


.item_box:nth-child(4).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 5s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 5s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 5s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 5s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 5s;
}

.item_box:nth-child(5).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 6s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 6s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 6s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 6s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 6s;
}

.item_box:nth-child(6).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 7s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 7s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 7s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 7s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 7s;
	}





.item_box .note{
	margin-top:20px;
}


.item_box .note p{
	font-size:16px;
	color:#452f7f;
}


.step {
	width: 80%;
	height: 135px;
	margin: 0 auto;
}


#sec03 .step #mask path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 66px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#sec04 .step #mask path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 66px;
    stroke-linecap: round;
    stroke-linejoin: round;
}


#sec03 .step path {
	fill: #e979aa;
}

#sec04 .step path {
	fill: #66b5e5;
}







#sec04{
	background:#daeeef;
	padding:200px 0;
	position:relative;
}





#sec04 .sub_title {
    margin-top: 0px;
}

#sec04 .sub_title p {
	color: #1e2b5a;
}


#sec04 .sub_title span{
	background:#1e2b5a;
}

#sec04 .sub_title span:after{
	background:#452f7f;
}

#sec04 .sub_title span:before{
	background:#452f7f;
}



#sec05{
	padding:200px 0;
	position:relative;
}


.sec05_bk01{
	position:absolute;
	width:40%;
	top:20%;
	left:20%;
}




.sec05_bk02{
	position:absolute;
	width:50%;
	top:40%;
	right:-20%;
}

.sec05_bk03{
	position:absolute;
	width:50%;
	bottom:10%;
	left:0%;
}



.en_title {
	text-align:center;
	
}

	
	
	
	.en_title > div{
	display:inline-block;
	position:relative;
	}


	.en_title > div span.sub{
	position:absolute;
	font-size:32px;
	font-family: "Zen Maru Gothic", serif;
	transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
}

.en_title > div span.sub{
	position:absolute;
	font-size:32px;
	font-family: "Zen Maru Gothic", serif;
	transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	opacity:0;
}


.active .en_title > div span.sub{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
}




	
	
	.en_title > div p{
	font-family: "Oranienbaum", serif;
	font-size: 120px;
	line-height: 100%;
	}

	
	#sec05 .en_title > div p{
	color:#8ba7d7;
}
	
	#sec05 .en_title > div span.sub{
	color:#8ba7d7;
	left: 100px;
	top: -50px;	
		}
	

.sec05_index{
	position: relative;
	max-width: 1000px;
	padding: 0 100px;
	margin: 50px auto 0;
}


.sec05_item{
	
}

.sec05_item .note{
	text-align:center;
	display: inline-block;
	margin-top:10px;
}

.sec05_item .note {
	padding: 0 10px;
	overflow: hidden;
	color: transparent;
	font-size: 60px;
	background-size: 100% 200%;
	}



.sec05_item > div{
	position: relative;
	z-index: 99;
	display:inline-block;
	width:52%;
}


.look_btn{
	position: relative;
	z-index:99;
	text-align:center;
	margin-top:50px;
}

.look_btn a{
	font-family: "Oranienbaum", serif;
	font-size:40px;
	display:inline-block;
	width:380px;
	padding:15px 0;
	color:#fff;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}

#sec05 .look_btn a:hover{
	background:#3750a1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}


.sec05_01{
	text-align:right;
	display: flex;
    justify-content: flex-end;
}


.sec05_02{
	text-align:center;
	display: flex;
	margin-top:-250px;
}

.sec05_03{
	text-align:right;
	display: flex;
	justify-content: flex-end;
	margin-top:-250px;
}


#sec05 .look_btn a{
background:#8ba7d7;
}



#sec06{
	position:relative;
	padding-top: 100px;
}

.sec06_bk01{
	position: absolute;
	width: 40%;
	top: 20%;
	right: 20%;
}

.sec06_bk02{
	position: absolute;
	width: 40%;
	top: 50%;
	right: -10%;
}

.sec06_bk03{
	position: absolute;
	width: 55%;
	bottom: 10%;
	left: -10%;
}

.sec06_index{
	position: relative;
	max-width: 1200px;
	padding: 0 100px;
	margin: 50px auto 0;
}

	
	#sec06 .en_title > div p{
	color:#c678ae;
}
	
	#sec06 .en_title > div span.sub{
	color:#c678ae;
	left: -120px;
	top: -50px;
	}



#sec06 .look_btn a{
	background:#c678ae;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}

#sec06 .look_btn a:hover{
	background:#723243;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}



.sec06_flex{
	display:flex;
	gap:40px;
	flex-direction: row-reverse;
}

.sec06_flex02{
	
}

.sec06_item{
	width:50%;
	text-align: center;
}

.sec06_02{
	margin-top: 80px;
}

.sec06_item .note{
	text-align:center;
	margin-top:10px;
}

.sec06_04{
	margin-top:120px;
}


#sec06 .link_btn{
	margin-top: 80px;
}

#sec06 .link_btn a:before{
	background-image:url(../img/btn_bk03.webp);
}



.sec06_item .note {
	display: inline-block;
	padding: 0 10px;
	overflow: hidden;
	color: transparent;
	font-size: 60px;
}






.note .caption a{
	font-size:16px;
	font-family: sans-serif;
}

.note .check_text a{
	font-size:16px;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


#sec05 .note .check_text a{
	font-size: 16px;
    font-weight: bold;
    padding: 5px 15px;
	display: inline-block;
	color:#3750a1;
	border:2px solid #3750a1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}


#sec05 .note .check_text a:hover{
	color:#fff;
	background:#3750a1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}


#sec06 .note .check_text a{
	font-size: 16px;
    font-weight: bold;
    padding: 5px 15px;
	display: inline-block;
	color:#c678ae;
	border:2px solid #c678ae;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}

#sec06 .note .check_text a:hover{
	color:#fff;
	background:#c678ae;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
}

			
			
			
			
			
			
			
			
			.sp_img{
				display:none!important;
			}







@media screen and (max-width: 768px) {
  
  
  
  img{
  width:100%;
  height:auto;
}

.sp_img{
  display:block!important;
}

.pc_img{
  display:none!important;
}

	
	
	
.inner {
  padding: 0px 30px;
	}
	
	
	
.top_logo {
    width: 30%;
    bottom: 10%;
    left: 10%;
    padding: 15px;
}
	
	
	
	
	.top_logo:after {
	transform: translate(-5px, 5px);
	-webkit-transform: translate(-5px, 5px);
	-moz-transform:translate(-5px, 5px);
	-o-transform:translate(-5px, 5px);
	-ms-transform: translate(-5px, 5px);
}

	.top_logo:before {
	transform: translate(5px, -5px);
	-webkit-transform: translate(5px, -5px);
	-moz-transform:translate(5px, -5px);
	-o-transform: translate(5px, -5px);
	-ms-transform:translate(5px, -5px);
	
}
	
	
	.wrap {
    padding: 0 20px;
}
	
	.wrap_w {
    padding: 0 20px;
	}
	
	
	.detail {
	   margin-top: 10px;
	}
	
	
	.detail p {
		font-size: 12pt;
		line-height: 180%;
	}
	
	.detail p a{
		font-size: 8pt;
		line-height:160%;
		margin-bottom:0px;
		margin-top: 5px;
		display:inline-block;
	}
	
	
	.main_detail_wrap {
		padding: 80px 0 150px;
		background-position: center center;
		background-image: url(../img/main_detail_bk_sp.webp);
	}
	
	
	
	.main_note {
		padding: 0 50px;
	}
	
	
	.main_note p {
		font-size: 15px;
		text-align: left;
	}
	
	
	.wrap {
		display: block;
		padding: 0 0px;
	}
	
	.wrap_w {
		display: block;
		padding: 0 0px;
	}
	
	
	.link_btn_wrap {
		width: 80%;
	}
	
	.link_btn a {
		font-size: 30px;
		line-height: 100%;
		padding: 30px 20px;
	}
	
	
	.link_btn a:before, .link_btn a:after {
	height: 85px;
	}
	
	.main_detail {
		
	}
	
	.contents_link {
		margin-top: 150px;
		display: block;
		text-align: center;
	}
	
	
	#footer {
		margin-top: 0px;
		padding: 180px 0 100px;
	}
	
	
	#footer:before{
		background-image: url(../img/footer_bk_sp.webp);
		background-size: contain;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: top center;
	}
	
	
	
	
	
	
	.footer_main h4 {
    font-size: 28px;
    line-height: 150%;
	}
	
	.footer_date p {
		font-size: 22px;
	}
	
	
	.footer_note p {
		font-size: 18px;
	}
	
	.footer_accodion {
    padding: 0 30px;
	}
	
	
	.footer_accodion_wrap {
		width: 100%;
		display: block;
	}
	
	.footer_accodion_title {
		width: 100%;
		padding: 15px 20px;
	}
	
	
	.footer_accodion_title p {
		font-size: 20px;
		letter-spacing: 2px;
	}
	
	.footer_accodion_title p .arrow {
    top: 30px;
	}
	
	.footer_accodion_title p .arrow:after{
		width: 15px;
	}
	
	
	.footer_accodion_title p .arrow:before{
		width: 15px;
	}
	
	
	
	
	.footer_box {
		display: block;
		text-align: center;
	}
	
	.footer_box > div{
		width: 100%;
		margin: 0 auto;
	}
	
	.footer_box a {
		font-size: 20px;
		margin-top: 10px;
	}
	
	.footer_main .footer_date p span{
		width: 1px;
		height: 12px;
		background: #fff;
		display: inline-block;
	}
	
	.f_campaign {
		margin-top: 10px;
	}
	
	.footer_insta {
		margin-top: 20px;
	}
	
	.f_campaign span{
		width:65%;
	}
	
	
	
	.contents_link_title p {
		font-size: 50px;
		text-align: center;
	}
	
	
	.contents_link_title p span {
		width: 48px;
	}
	
	
	.contents_link_list {
		display: inline-block;
		margin-top:40px;
		padding: 0 30px;
	}
	
	
	.contents_link_list a {
		display: block;
		margin-bottom: 30px;
		font-size: 23px;
		text-align: left;
	}
	
	.contents_link_list a:last-child {
		margin-bottom: 0px;
	}
	
	
	.contents_link_list a span {
		
		font-size: 13px;
		line-height: 100%;
		margin-top: 0px;
		margin-left: 32px;
	}
	
	
	
	
	
	.slider {
    width: 78%;
	}
	
	
	
	.img_color {
		width: 90px;
	}
	
	
	#sec01 {
		padding: 150px 0;
	}
	
	#sec01 .main_title01 {
		top: 20px;
		right: -65px;
	}
	
	
	.circle_yel {
		width: 100px;
		top: -120px;
		right: 10px;
	}
	
	#sec02 .circle_yel {
		left: 10px;
	}
	
	.main_title01 p {
		font-size: 48px;
	}
	
	
	.sec01_wrap {
		padding: 0 60px;
	}
	
	
	.sec01_01 .img_color {
		right: -50px;
		bottom: -40px;
	}
	
	
	.sec01_02 .img_color {
		left: -50px;
		bottom: 40px;
	}
	
	
	
		
	#sec02 {
		padding: 150px 0;
	}
	
	
	
	#sec02 .main_title01 {
		top: 50px;
		left: -85px;
	}
	
	
	.sec02_wrap {
		padding: 0 60px;
	}
	
	.sec02_01 {
		justify-content: flex-end;
	}
	
	
	.sec02_01 .img_color {
		left:-40px;
	}
		
	.sec02_02 .img_color {
		right: -40px;
		left:auto;
	}
	
	
	.sec02_02 {
		
	}
	
	
	#sec03 {
		padding: 30px 0 150px;
	}
	
	
	.step {
		height: 80px;
	}
	
	
	
	.wave {
		top: -120px;
	}
	
	.sec03_title_wrap {
		width: 220px;
	}
	
	.sub_title {
		margin: 80px auto 0;
		padding: 0 20px;
	}
	
	.sub_title span {
		width: 0%;
	}
	
	.active .sub_title span {
		width: 15%;
	}
	
	.sub_title p {
		font-size: 22px;
	}
	
	
	.item_list {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 60px;
		padding: 0 30px;
	}
	
	.sec03_title_wrap .howto {
		width: 100px;
		position: absolute;
		bottom: -28px;
		right: -40px;
	}
	
	
	#sec04 {
		padding: 30px 0 150px;
	}
	
		#sec05 {
		padding: 30px 0 150px;
	}
	
	
	
	.sec05_index {
		padding: 0 60px;
	}
	
	
	.sec05_item > div {
		width: 100%;
	}
	
	.sec05_index .thum{
		padding:0 20px;
	}
	
	
	.sec05_01 {
		text-align: center;
		display: block;
		
	}
	
	
	
	.sec05_02 {
		text-align: center;
		display: block;
		margin-top: 50px;
	}
	
	
	.sec05_03 {
		text-align: center;
		display: block;
		margin-top: 50px;
	}
	
	
	.look_btn a {
		font-size: 30px;
		width: 60%;
	}
	
	.en_title > div p {
		font-size: 55px;
		line-height: 100%;
	}
	
	
	.sec05_bk01 {
		width: 80%;
		top: 20%;
		left: -20%;
	}
	
	
	.sec05_bk02 {
		width: 90%;
		top: 40%;
		right: -20%;
	}
	
	
	.sec05_bk03 {
		width: 90%;
		bottom: 10%;
		left: -10%;
	}
	
	
	
	
	
	#sec05 .en_title > div span.sub {
		left: 10px;
		top: -40px;
		font-size: 24px;
	}
	
	
	.sec05_index {
		padding: 0 30px;
	}
	
	
	
	.sec06_bk01 {
		width: 80%;
		top: 5%;
		left: -10%;
	}
	
	
	.sec06_bk02 {
		width: 80%;
		top: 48%;
		right: -10%;
	}
	
	
	.sec06_bk03 {
		width: 80%;
	}
	
	
	.sec06_index {
		padding: 0 30px;
	}
	
	
	
	#sec06 .en_title > div span.sub {
		left: 30px;
		top: -40px;
		font-size: 24px;
	}
	
	
	.sec06_flex {
		display: block;
		
	}
	
	.sec06_item {
		width: 100%;
		margin-bottom: 50px;
	}
	
	.sec06_item .thum{
		padding:0 20px;
	}
	
	.sec06_02 {
		margin-top: 0px;
	}
	
	.sec06_flex02 {
		margin-top: 0px;
	}
	
	.sec06_04 {
		margin-top: 0px;
	}
	
	
	.item_box:nth-child(3).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
}


.item_box:nth-child(4).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
}

.item_box:nth-child(5).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 2s;
}

.item_box:nth-child(6).active{
	opacity:1;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) 3s;
	}
	
	
	
	
	
	
}




@media screen and (min-width: 1480px) {
	
	
	
	
	
}