@charset "utf-8";

/* --------------------------------------------
TOP
--------------------------------------------- */
.top_img{
	position : relative;
	width : 100%;
	height : auto;
	overflow : hidden;
}

/*--------------------------------------------
campaign
---------------------------------------------*/
.campaign{
  .campaign_box {
    display: flex;
    align-items: stretch;
    gap: 20px;
    border: 3px solid #ff81a9;
    padding: 20px;
  }
  .campaign_txt {
    width: 70%;
  }
  .campaign_img {
    width: 30%;
    height: auto;
  }
  .campaign_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .campaign_title {
    text-align: center;
    font-size: min(1.8vw, 40px);
    margin-bottom: 20px;
  }
  .campaign_title span {
    font-size: min(2.8vw, 36px);
    font-weight: 600;
    color: #ff81a9;
  }
  .campaign_countdown span {
    color: red;
    font-weight: 600;
  }
  #countdown {
    display: flex;
    gap: 5px;
    margin: 10px 0;
  }
  #countdown > div {
    width: 25%;
  }
  .time-box {
    background-color: #ff81a9;
    color: #FFF;
    text-align: center;
    padding: 20px 0;
  }
  .number {
    line-height: 1;
    font-size: min(5vw, 72px);
  }
  .campaign_box ul {
    margin-top: 20px;
  }
  .campaign_box ul li {
    font-size: 12px;
  }
  .campaign_box ul li span {
    font-weight: 600;
    text-decoration: underline;
  }
  @media screen and (max-width: 768px) {
    .campaign_box {
      padding: 5%;
    }
    .campaign_title {
      text-align: left;
      font-size: min(3.8vw, 40px);
      position: relative;
    }
    .campaign_title::before {
      position: absolute;
      content: "";
      right: 0;
      bottom: -5vw;
      margin: auto;
      width: 30vw;
      height: 40vw;
      background-image: url("../images/top/campaign/img.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .campaign_title span {
      font-size: min(5.8vw, 36px);
    }
    .campaign_txt {
      width: 100%;
    }
    .campaign_img {
      display: none;
    }
    .time-box {
      padding: 10px 0 5px 0;
    }
    .number {
      font-size: min(7vw, 72px);
    }
  }
}


/* --------------------------------------------
topics
--------------------------------------------- */
.topicsWrap{
	position : relative;
	padding : 80px 0;
	.topicsInner{
		max-width : 1000px;
		margin : 0 auto;
		h3.topicsTitle{
			margin-bottom : 26px;
			font-family : Raleway , sans-serif;
			font-size : 44px;
			font-style : normal;
			font-weight : 700;
			line-height : 1;
			color : var( --primary );
			text-align : center;
			letter-spacing : .04em;
		}
	}
	@media screen and ( width >= 1025px ){
		padding : 130px 0 144px;
		.topicsInner h3.topicsTitle{
			font-size : 72px;
			color : var( --primary );
			text-align : left;
		}
    .ctaTitle_en{
      margin-bottom: 28px;
      margin-left: 0;
      font-size: 50px;
      color: var(--primary);
    }
	}
}

/*--------------------------------------------
POINT
---------------------------------------------*/
#point{
  .inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
  }
  .point_list dl {
    margin-bottom: 15px;
  }
  .point_list dt {
    font-size: 5.4vw 61.776px;
    font-weight: 800;
    position: relative;
    padding-left: 20%;
    border-bottom: 2px solid #969696;
    line-height: 1.4;
    height: 60px;
    height: 15.5vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
  }
  .point {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 17.4%;
  }
  .point_list dt:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: url("../images/top/point/arrow.webp") no-repeat;
    background-size: contain;
  }
  .point_dl dd {
    display: none;
  }
  .fc_red.u_line {
    text-decoration: underline;
  }
  .fc_red {
    color: #b60000;
  }
  .point_list dd {
    padding: 28px 15px;
  }
  @media screen and (min-width: 1024px) {
    .point_list dt {
      font-size: 34px;
      height: 100px;
      padding-left: 130px;
    }
    .point {
      width: 94px;
    }
    .point_list dt:after {
      width: 40px;
      height: 40px;
    }
    .point_list dd {
      padding: 28px 0;
    }
  }
}

/* --------------------------------------------
SERVICE
--------------------------------------------- */
.serviceWrap{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : right;
	width : 100%;
	padding : 60px 0 250px;
	&::after{
		position : absolute;
		top : 0;
		right : 0;
		z-index : -2;
		display : block;
		width : 57vw;
		height : 100%;
		content : "";
		background : #fffcf5;
	}
	.innerBox{
		width : 94%;
		margin-bottom : 10px;
	}
	.serviceTitle{
		position : relative;
		top : 0;
		left : 0;

		/* transform: rotate(90deg); */
		z-index : -1;
		margin-bottom : 34px;
		font-family : Raleway , sans-serif;
		font-size : 44px;
		font-style : normal;
		font-weight : 700;
		line-height : 1;
		color : var( --primary );
		letter-spacing : .04em;
		transform-origin : 0 0;
	}
	.serviceText{
		left : 155px;
		padding-right : 0;
		margin : 0;
		font-size : 15px;
		line-height : 1.9;
		color : #363636;
		text-align : left;
	}
	.serviceTextrow p{
		margin-bottom : 20px;
		font-size : 15px;
		color : #363636;
	}
	.serviceImage{
		max-width : 100%;
		padding : 0;
		overflow-x : scroll;
		scrollbar-width : none;
	}
	.btnBox{
		margin-top : 35px;
	}
	@media screen and ( width >= 415px ){
		&::after{
			width : 35vw;
		}
		.innerBox{
			width : 100%;
			padding : 0 3%;
		}
		.serviceTitle{
			margin-bottom : 47px;
			font-size : 72px;
		}
		.serviceImage{
			z-index : 10;
			max-width : 100%;
			padding : 0;
			overflow : hidden;
		}
	}
	@media screen and ( width >= 767px ){
		.innerBox{
			width : 100%;
			padding : 0 3%;
		}
		.serviceText{
			left : 155px;
			margin : 0 0 5px;
			font-size : 20px;
			line-height : 1.9;
			color : #363636;
			text-align : left;
		}
		.serviceImage{
			max-width : 100%;
		}
	}
	@media print , screen and ( width > 768px ){
		padding : 100px 0 270px;
		.btnBox{
			margin-top : 75px;
		}
	}
	@media screen and ( width >= 1200px ){
		.serviceImage{
			max-width : 50%;
		}
	}
	@media screen and ( width >= 1201px ){
		.innerBox{
			box-sizing : border-box;
			width : 46%;
			max-width : 650px;
			padding : 0 73px 0 0;
			padding-top : 36px;
			margin : 0;
			color : #363636;
		}
	}
}

/* --------------------------------------------
MESSAGE
--------------------------------------------- */
.s-message{
	position : relative;
	padding : 0 0 60px;
	margin : 0 0 80px;
	background : var( --primary );
	.l-inner.innerBox{
		position : relative;
	}
	.message_title{
		position : absolute;
		top : -15px;
		left : -12px;
		z-index : 2;
		font-family : Raleway , sans-serif;
		font-size : 44px;
		font-style : normal;
		font-weight : 700;
		color : #fff;
		letter-spacing : .04em;
	}
	.message_eria{
		position : absolute;
		top : -15%;
		left : 0;
		z-index : 0;
		width : 340px;
		box-shadow : 40px 40px 49px rgb( 255 255 255 / 0.09 );
	}
	.message_text_warp{
		position : relative;
		z-index : 2;
	}
	.message_lead01 , .message_lead02{
		position : relative;
		box-sizing : border-box;
		font-style : initial;
		font-weight : 700;
		color : #fff;
	}
	.message_lead01{
		width : 103%;
		padding : 70px 0 40px;
		font-size : 23px;
		line-height : 1.75;
	}
	.message_lead02{
		padding-left : 0;
		margin-top : 30px;
		font-size : 19.5px;
		font-style : normal ! important;
		line-height : 2;
	}
	.s-message__leadBorder{
		padding-bottom : 4px;
		text-shadow : 0 1px 20px #7a7a7a63;
		border-bottom : solid 1px #fff;
	}
	.message_text{
		margin-bottom : 1em;
		font-size : 14px;
		line-height : 1.8;
		color : #fff;
	}
	.message_lead01{
		width : 100%;
		padding : 70px 0 40px;
		font-size : 1.8rem;
		line-height : 1.75;
	}
	.message_decoimg01 , .message_decoimg-02{
		position : absolute;
		z-index : 2;
		display : block;
		display : none;
		width : 152px;
		box-shadow : 25px 25px 25px rgb( 0 0 0 / 0.1 );
	}
	.message_decoimg01{
		bottom : -260px;
		right : 374px;
	}
	.message_decoimg-02{
		bottom : -175px;
		right : 100px;
	}
	@media screen and ( width <= 415px ){
		.message_title{
			top : 18%;
			left : 4%;
		}
		.s-message .message_lead01 ,
		.s-message .message_lead02{
			padding : 10px 15px;
		}
		.message_lead01{
			margin-bottom : 20px;
		}
	}
	@media screen and ( width <= 768px ){
		.message_eria{
			top : -20%;
		}
		.message_text_warp{
			position : static;
			width : 100%;
			padding : 200px 0 0;
		}
		.message_title{
			top : 10%;
			left : auto;
			right : 4%;
			font-size : 15vw;
			line-height : 1;
			text-shadow : 0 1px 20px #7a7a7a63;
			mix-blend-mode : normal;
		}
		.message_lead01 ,
		.message_lead02{
			box-sizing : border-box;
			padding : 10px 15px;
			padding-left : 145px;
			font-size : 20px;
		}
		.message_lead02::before{
			left : 5px;
			content : unset;
		}
		.message_text{
			position : relative;
			max-width : 100%;
			padding : 0 15px;
			margin : 0 0 0 auto;
		}
		.message_decoimg01{
			display : none ! important;
		}
		.message_decoimg-02{
			display : none ! important;
		}
	}
	@media screen and ( width >= 415px ){
		.l-inner.innerBox{
			text-shadow : 0 0 20px #fff6e;
		}
		.message_title{
			top : -61px;
			left : 170px;
			font-size : 65px;
		}
		.message_eria{
			width : 380px;
		}
		.message_lead01{
			position : relative;
			z-index : 2;
			padding : 50px 0 50px 180px;
			font-size : 26px;
			line-height : 1.8;
		}
		.message_lead02{
			padding-left : 180px;
			margin-top : 50px;
			font-size : 22px;
		}
		.message_text{
			padding-left : 145px;
			margin-bottom : 0;
			font-size : 15px;
			line-height : 2;
		}
	}
	@media print , screen and ( width > 768px ){
		padding : 140px 0 140px;
		.l-inner.innerBox{
			margin-top : 0;
			text-shadow : 0 0 20px #00000073;
		}
		.message_title{
			left : 290px;
		}
		.message_eria{
			width : 450px;
			margin-top : -23vw;
		}
		#s-mv{
			width : 100%;
			height : 89.4vh;
			background : url( "img/img_mv_sp_ripped.webp" ) no-repeat center top/100%;
		}
		.message_lead01{
			padding : 50px 0 50px 300px;
		}
		.message_lead02{
			padding-left : 300px;
		}
		.s-message__leadBorder{
			padding-bottom : 6px;
		}
		.message_text{
			padding-left : 260px;
		}
	}
	@media print , screen and ( width >= 1024px ){
		padding : 140px 0 140px;
		margin : 0 0 150px;
		.message_eria{
			top : -15%;
		}
		.message_lead02::before{
			position : relative;
			top : -1px;
			right : 5px;
			content : "“";
		}
	}
	@media screen and ( width >= 1025px ){
		.message_title{
			top : -21px;
			left : 394px;
			font-size : 72px;
			mix-blend-mode : normal;
		}
		.message_eria{
			width : 520px;
			margin-top : -200px;
		}
		.message_text_warp{
			margin-left : 400px;
		}
		.message_lead01{
			padding : 94px 0 40px;
			font-size : 29px;
			line-height : 1.8;
		}
		.message_lead02{
			position : relative;
			padding-left : 0;
			font-size : 24px;
			font-style : normal ! important;
			line-height : 2.45;
		}
		.s-message__leadBorder{
			border-width : 2px;
		}
		.message_lead02 .text-space{
			padding-left : 11px;
		}
		.message_lead02 .s-message__leadBorder{
			padding : 0 11px 7px;
		}
		.message_text{
			padding-left : 0;
			margin-bottom : 0;
			font-size : 16px;
			letter-spacing : .14em;
		}
		.message_decoimg01 ,
		.message_decoimg-02{
			position : absolute;
			z-index : 1;
			display : block;
			width : 242px;
			box-shadow : 25px 25px 25p rgb( 0 0 0 / 0.1 );
		}
	}
	@media screen and ( width >= 1200px ){
		.l-inner.innerBox{
			text-shadow : unset;
		}
	}
	@media screen and ( width >= 1201px ){
		.message_title{
			left : 614px;
		}
		.message_text_warp{
			margin-left : 620px;
		}
	}
}

/* --------------------------------------------
MOVIE
--------------------------------------------- */
.movieWrap{
	position : relative;
	padding-bottom : 95px;
	background : #fffcf5;
	&::after{
		position : absolute;
		top : -29px;
		left : 57px;
		z-index : -1;
		font-family : Raleway , sans-serif;
		font-size : 44px;
		font-style : normal;
		font-weight : 700;
		line-height : 1;
		color : var( --primary );
		letter-spacing : .04em;
		content : "MOVIE";
		transform : rotate( 90deg );
		transform-origin : 0 0;
	}
	.movieInner{
		width : 100%;
		padding-top : 77px;
		overflow : hidden;
	}
	.movieTitle{
		position : absolute;
		top : -29px;
		left : 57px;
		z-index : 0;
		font-family : Raleway , sans-serif;
		font-size : 44px;
		font-style : normal;
		font-weight : 700;
		line-height : 1;
		color : var( --primary );
		letter-spacing : .04em;
		transform : rotate( 90deg );
		transform-origin : 0 0;
	}
	.movieLead{
		position : relative;
		left : 14px;
		width : 230px;
		margin : 0 auto 50px;
		font-size : 13px;
		line-height : 2;
		color : var( --primary );
		text-align : center;
	}
	.movieListWrap{
		position : relative;
		width : 100%;
		max-width : 920px;
		margin : 0 auto;
		.swiper-container{
			width : 100%;
		}
	}
	.swiper-slide{
		z-index : 0;
		display : inline-block;
		width : 264px;
		margin : 0 -7.5px;
		border : 4px solid var( --primary );
		opacity : .6;
		transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		transform : scale( .72 );
		transform : scale( 1 );
		transform : scale( .8 );
	}
	.swiper-wrapper .swiper-slide-active{
		opacity : 1 ! important;
		transform : scale( 1 );
	}
	.swiper-button-next , .swiper-button-prev{
		position : absolute;
		top : 0;
		z-index : 10;
		display : flex;
		align-items : center;
		justify-content : center;
		width : calc( var( --swiper-navigation-size )/ 44 * 150 );
		height : 100%;
		margin-top : 0;
		color : color-mix( in sRGB , var( --primary ) 91% , transparent );
		cursor : pointer;
	}
	.swiper-button-prev , .swiper-rtl .swiper-button-next{
		left : 0;
		right : auto;
		justify-content : flex-end;
		width : 10vw;
	}
	.swiper-button-next , .swiper-rtl .swiper-button-prev{
		left : auto;
		right : 0;
		justify-content : flex-start;
		width : 10vw;
	}
	.swiper-button-next::after , .swiper-button-prev::after{
		font-size : 24px;
	}
	.movieListWrap .icon{
		position : relative;
		position : absolute;
		top : 50%;
		left : 50%;
		z-index : 2;
		display : flex;
		align-items : center;
		justify-content : center;
		width : 50px;
		height : 50px;
		border : solid 1px #fff;
		border-radius : 50%;
		opacity : 0;
		transition : all .3s cubic-bezier( .32 , .625 , .58 , 1 );
		transform : translateX( -50% ) translateY( -40% );
	}
	.movieListWrap .swiper-slide.swiper-slide-active .icon{
		opacity : 1;
		transition : all .3s cubic-bezier( .32 , .625 , .58 , 1 ) .5s;
		transform : translateX( -50% ) translateY( -50% );
	}
	.icon-play{
		position : relative;
		left : 3px;
		width : 0;
		height : 0;
		border-color : transparent transparent transparent #fff;
		border-style : solid;
		border-width : 10px 0 10px 15px;
	}
	.movieListWrap a:hover::after{
		opacity : 1;
	}
	.movieListWrap a::after{
		position : absolute;
		top : 0;
		left : 0;
		width : 100%;
		height : 100%;
		content : "";
		background : rgb( 0 0 0 / .6 );
		border : solid 1px rgb( 255 255 255 / .6 );
		opacity : 0;
		transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	@media screen and ( width >= 415px ){
		.swiper-slide{
			width : 400px;
		}
		.swiper-button-prev , .swiper-rtl .swiper-button-next{
			left : 0;
			justify-content : flex-start;
			width : 15vw;
		}
		.swiper-button-next , .swiper-rtl .swiper-button-prev{
			right : 0;
			justify-content : flex-end;
			width : 15vw;
		}
		.swiper-button-next::after , .swiper-button-prev::after{
			margin : 0 30px;
			font-size : 44px;
		}
	}
	@media screen and ( width >= 1025px ){
		width : calc( 100% - 30px * 2 );
		padding-bottom : 202px;
		margin : 0 auto;
		&::before{
			position : absolute;
			top : 0;
			left : -25%;
			width : 200vw;
			height : 100%;
			content : "";
			background : #fffcf5;
		}
		&::after{
			top : -47px;
			left : 63px;
			font-size : 72px;
		}
		.movieInner{
			padding-top : 130px;
		}
		.movieTitle{
			top : -47px;
			left : 63px;
			font-size : 72px;
		}
		.movieLead{
			left : 155px;
			width : 455px;
			margin : 0 0 57px;
			font-size : 20px;
			line-height : 1.9;
			text-align : left;
		}
		.swiper-slide{
			transform : scale( .8 );
		}
		.swiper-slide{
			width : 720px;
			margin : 0;
		}
		.swiper-button-prev , .swiper-rtl .swiper-button-next{
			left : -160px;
			width : calc( var( --swiper-navigation-size )/ 44 * 150 );
		}
		.swiper-button-next , .swiper-rtl .swiper-button-prev{
			right : -160px;
			width : calc( var( --swiper-navigation-size )/ 44 * 150 );
		}
		.movieListWrap .icon{
			width : 112px;
			height : 112px;
		}
		.icon-play{
			border-width : 15px 0 15px 20px;
		}
	}
	@media screen and ( width >= 1201px ){
		width : 1200px;
	}
	@media screen and ( width >= 1441px ){
		&::before{
			left : -60%;
			width : 300vw;
		}
		.swiper-slide{
			width : 920px;
			margin : 0;
		}
	}
}
#main .swiper-pagination{
	position : absolute;
	bottom : -30px;
	left : 0;
	display : flex;
	align-items : center;
	justify-content : center;
	width : 100%;
	span{
		width : 36px;
		height : 2px;
		margin : 0 .5rem;
		overflow : hidden;
		text-indent : 200%;
		white-space : nowrap;
		cursor : pointer;
		background : #e1e1e1;
		border-radius : unset;
		opacity : .9;
		transition : all .3s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	span.swiper-pagination-bullet-active{
		background : var( --primary );
		transition : all .3s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	@media screen and ( width >= 415px ){
		bottom : -40px;
	}
	@media print , screen and ( width > 768px ){
		span{
			width : 94px;
			height : 4px;
			margin : 0 8px;
		}
	}
	@media screen and ( width >= 1025px ){
		bottom : -50px;
	}
}

/*--------------------------------------------
ONGOINGPROJECTS
---------------------------------------------*/
.ongoing_projects {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 4.0em 0 6.0em 0;
  background-color: var(--primary);
  display: table;
  strong {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(40px, 5.0vw, 65px);
    font-weight: 900;
    text-align: center;
    line-height: 1.0em;
    letter-spacing: 0.05em;
    color: #fff;
    display: block;
  }
  section.cover {
    max-width: 1000px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 2.5em 1.5em 0 1.5em;
    display: table;
  }
  section.cover ul {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 3.0em 2.0em;
    background-color: #fff;
    display: block;
  }
  section.cover ul li {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 1.0em 0;
    border-bottom: 1px dotted var(--primary);
  }
  section.cover ul li:nth-child(1) {
    padding: 0;
    border: none;
  }
  section.cover ul li:nth-child(1) span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(12px, 2.8vw, 15px);
    font-weight: 300;
    text-align: right;
    line-height: 1.0em;
    color: #000000;
    display: block;
  }
  section.cover ul li p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(15px, 3.5vw, 18px);
    font-weight: 300;
    text-align: left;
    text-indent: -1.0em;
    line-height: 1.4em;
    margin-left: 1.0em;
    color: #000000;
  }
}
/* --------------------------------------------
CTA
--------------------------------------------- */
.ctaWrap{
	padding : 80px 0 100px;
	background : #fff;
	.titleWrap{
		display : flex;
		align-items : flex-end;
		justify-content : flex-start;
		width : calc( 100% - 18.5px * 2 );
		margin : 0 auto 60px;
	}
	.cta{
		max-width : 960px;
		margin : 0 auto 50px;
	}
	@media screen and ( width >= 1025px ){
		padding : 80px 0;
		.titleWrap{
			display : inline-block;
			text-align : center;
		}
	}
}

/* --------------------------------------------
SHOP
--------------------------------------------- */
.shopWrap{
	position : relative;
	padding-bottom : 95px;
	&::before{
		position : absolute;
		top : -29px;
		left : 57px;
		z-index : 0;
		font-family : Raleway , sans-serif;
		font-size : 44px;
		font-style : normal;
		font-weight : 700;
		line-height : 1;
		color : var( --primary );
		letter-spacing : .04em;
		content : "SHOP";
		background : unset;
		transform : rotate( 90deg );
		transform-origin : 0 0;
	}
	&::after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		width : 100%;
		height : 260px;
		content : "";
		background : var( --primary );
	}
	.shopInner{
		width : 100%;
		max-width : 1000px;
		padding-top : 55px;
		overflow : hidden;
	}
	.shopTitle{
		position : absolute;
		top : -29px;
		left : 57px;
		font-family : Raleway , sans-serif;
		font-size : 44px;
		font-style : normal;
		font-weight : 700;
		line-height : 1;
		letter-spacing : .04em;
		content : "";
		background : unset;
		transform : rotate( 90deg );
		transform-origin : 0 0;
	}
	.shopTitle{
		z-index : 1;
		color : #fff;
	}
	.shopLead{
		position : relative;
		left : 14px;
		width : calc( 100% - 110px );
		margin : 0 auto 40px;
		font-size : 13px;
		line-height : 2;
		color : #fff;
	}
	.shopListWrap{
		position : relative;
		width : 320px;
		margin : 0 auto 70px;
	}
	.shopListWrap .swiper-container{
		width : 100%;
	}
	@media screen and ( width >= 415px ){
		.shopListWrap{
			width : 100%;
			margin : 0 auto 120px;
		}
	}
	@media screen and ( width >= 1025px ){
		width : calc( 100% - 30px * 2 );
		padding-bottom : 202px;
		margin : 0 auto;
		&::before{
			position : absolute;
			top : -40px;
			left : 63px;
			width : 200vw;
			height : 50%;
			font-size : 72px;
		}
		&::after{
			left : -25%;
			width : 200vw;
			height : 580px;
		}
		.shopInner{
			padding-top : 130px;
		}
		.shopTitle{
			top : -40px;
			left : 63px;
			font-size : 72px;
		}
		.shopLead{
			left : 155px;
			width : 560px;
			margin : 0 0 57px;
			font-size : 20px;
			line-height : 1.9;
			text-align : left;
		}
		.shopListWrap{
			margin : 0 auto 135px;
		}
	}
	@media screen and ( width >= 1201px ){
		width : 1000px;
		.shopListWrap{
			left : -100px;
			width : 1200px;
		}
	}
	@media screen and ( width >= 1441px ){
		&::before{
			width : 300vw;
		}
		&::after{
			left : -80%;
			width : 300vw;
		}
	}
}

/* --------------------------------------------
SEARCH
--------------------------------------------- */
#section-search{
	position : relative;
	z-index : 1;
	width : 75%;
	max-width : 116rem;
	padding : 7rem 0;
	margin : 0 auto;
	.ttl{
		position : relative;
		margin : 0 0 1.5rem;
		font-family : YuGothic , "Yu Gothic" , "游ゴシック体" , "游ゴシック" , "ヒラギノ角ゴ Pro W3";
		font-size : 1.4rem;
		text-align : left;
	}
	.ttl.line{
		&::before{
			position : absolute;
			top : 50%;
			left : 0;
			right : auto;
			display : block;
			width : 100%;
			height : 1px;
			content : "";
			background : #333;
			transform : translateY( -50% );
		}
		span{
			position : relative;
			background : #fff;
		}
	}
	.readtxt-wrap p{
		margin : 0 0 1.5rem;
		font-family : YuGothic , "Yu Gothic" , "游ゴシック体" , "游ゴシック" , "ヒラギノ角ゴ Pro W3";
		letter-spacing : .1px;
	}
	p a{
		color : #3368be;
		-webkit-text-decoration : underline;
		text-decoration : underline;
	}
	@media screen and ( width <= 768px ){
		width : 85%;
		&::before{
			left : auto;
			right : -40%;
			width : 100%;
			height : auto;
			padding : 67.12707% 0 0;
		}
		.ttl{
			font-size : 1.2rem;
		}
		.readtxt-wrap p{
			font-size : 13px;
		}
	}
	@media print , screen and ( width > 768px ){
		.areaWrap h2{
			font-size : 16px;
		}
		.areaWrap p img{
			object-position : center;
		}
		.contactBnr a.webBox{
			position : absolute;
			bottom : 2.5%;
			left : 50%;
			width : 100%;
			max-width : 65%;
			transform : translateX( -50% );
		}
		.areaWrap p img{
			width : 100%;
			height : 320px;
			object-fit : cover;
			object-position : center;
		}
	}
}

/* --------------------------------------------
TOPICS
--------------------------------------------- */
.topicsListWrap{
	margin-bottom : 30px;
	li{
		border-bottom : 1px solid #ffccde;
	}
	.date , h4{
		transition : all .3s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	.date{
		display : block;
		width : fit-content;
		padding : 1.5px 4px;
		margin-bottom : 8px;
		font-family : Raleway , sans-serif;
		font-size : 12px;
		font-style : normal;
		font-weight : 300;
		color : #fff;
		background : var( --primary );
	}
	h4{
		color : #363636;
	}
	a{
		position : relative;
		display : block;
		padding : 20px 35px 17px 10px;
		-webkit-text-decoration : none;
		text-decoration : none;
	}
	a::before{
		position : absolute;
		top : 50%;
		right : 0;
		width : 0;
		height : 0;
		content : "";
		border-color : transparent transparent transparent var( --primary );
		border-style : solid;
		border-width : 5px 0 5px 7px;
		transform : translateY( -50% );
	}
	a::after{
		position : absolute;
		bottom : 0;
		left : 0;
		width : 0;
		height : 2px;
		content : "";
		background : var( --primary );
		transition : all .4s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	a:hover::after{
		position : absolute;
		bottom : 0;
		left : 0;
		width : 100%;
		height : 2px;
		content : "";
		background : var( --primary );
		transition : all .4s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	@media screen and ( width >= 1025px ){
		.date{
			padding : 5px 10px 6px;
			margin-right : 40px;
			font-size : 14px;
			letter-spacing : 1.1px;
		}
		a{
			display : flex;
			align-items : center;
			justify-content : flex-start;
			padding : 33px 60px 28px 30px;
		}
	}
}


/*--------------------------------------------
ALLIANCE
---------------------------------------------*/
.alliance{
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 5%;
  .section_title {
    margin-bottom: 2em;
    text-align: center;
  }
  .section_title h2 .sub {
    font-size: 42px;
    line-height: 1.2em;
    color: #ff81a9;
    display: block;
    position: relative;
    z-index: 1;
  }
  .section_title h2 .main {
    font-size: 60px;
    line-height: 1.2em;
    font-weight: 900;
    display: block;
    position: relative;
    z-index: 1;
  }
  .alliance_bloc .inner {
    align-items: stretch;
    justify-content: space-between;
  }
  .alliance_item {
    border: solid 1px #c2c2c2;
    border-radius: 6px;
    width: 49%;
    box-sizing: border-box;
    padding: 1em;
    background: #fff;
  }
  .alliance_item:nth-child(n+3) {
    margin-top: 1em;
  }
  .inner {
    max-width: 1080px;
    width: 100%;
  }
  .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  .alliance_item dl dt {
    text-align: left;
    color: #f85400;
    font-size: 18px;
    line-height: 1em;
    margin-bottom: 0.5em;
  }
  @media screen and (max-width: 768px) {
    .section_title {
      margin-bottom: 1em;
    }
    .section_title h2 .sub {
      font-size: 21px;
    }
    .section_title h2 .main {
      font-size: 24px;
    }
    .alliance_bloc {
      padding: 0 1em;
    }
    .alliance_item {
      width: 100%;
      padding: 0.5em;
    }
    .alliance_item dl dt {
      font-size: 16px;
    }
    .alliance_item dl dd.address {
      font-size: 13px;
    }
    .alliance_item dl dd.number {
      font-size: 13px;
    }
    .alliance_item+.alliance_item {
      margin-top: 0.5em;
    }
  }
}
/* --------------------------------------------
CONTACT
--------------------------------------------- */
.contactWrap{
	margin : 40px 0;
	.contactInner{
		max-width : 1000px;
		h3{
			color : var( --primary ) ! important;
		}
		h3{
			padding-bottom : 30px;
			margin-bottom : 10px;
			font-size : 36px;
			color : var( --primary );
			text-align : center;
		}
	}
	.contactbox{
		padding : 25px;
		border : 5px solid var( --primary );
	}
	.contactbox_top{
		display : flex;
		justify-content : space-between;
		h4{
			width : 44%;
			font-size : 25px;
			font-weight : 600;
			line-height : 1.6em;
			color : var( --primary );
		}
	}
	.contactbox_middle{
		width : 36%;
		p{
			margin-top : 10px;
			font-size : 12px;
		}
	}
	.contactbox_right{
		width : 16%;
	}
	.contactbox_tel{
		display : flex;
		align-items : center;
		div{
			width : 10%;
		}
		a{
			display : block;
			width : 90%;
			font-size : 30px;
			font-weight : 700;
			color : var( --primary );
			-webkit-text-decoration : none;
			text-decoration : none;
		}
	}
	.contactbox_right span{
		display : block;
		padding : 7px 0;
		margin-bottom : 10px;
		color : #fff;
		text-align : center;
		background-color : var( --primary );
		border-radius : 20px;
	}
	.contactbox_right span:last-child{
		margin-bottom : 0;
	}
	.contactbox_bottom{
		display : flex;
		align-items : center;
		justify-content : space-between;
		padding-top : 20px;
		margin-top : 12px;
		border-top : 1px dashed #ccc;
		a{
			width : 32%;
			padding : 15px 0;
			font-size : 16px;
			color : #fff;
			text-align : center;
			-webkit-text-decoration : none;
			text-decoration : none;
			border-radius : 5px;
			span{
				position : relative;
				margin-left : 25px;
				&::before{
					position : absolute;
					top : 0;
					bottom : 0;
					left : -25px;
					width : 15px;
					height : 15px;
					margin : auto;
					content : "";
					background-repeat : no-repeat;
					background-size : contain;
				}
			}
		}
	}
	.contact_btn{
		background-color : orange;
	}
	.contact_btn span::before{
		background-image : url( "../images/ui/icon/email.png" );
	}
	.line_btn{
		background-color : green;
	}
	.line_btn span::before{
		background-image : url( "../images/ui/icon/sns/line.png" );
	}
	.online_btn{
		background-color : blue;
	}
	.online_btn span::before{
		background-image : url( "../images/ui/icon/pc.png" );
	}
	@media screen and ( width <= 480px ){
		.contactInner h3{
			font-size : 26px;
		}
		.contactbox_top h4{
			font-size : 18px;
		}
		.contactbox_tel{
			width : 100%;
		}
		.contactbox_tel a{
			font-size : 25px;
		}
	}
	@media screen and ( width <= 750px ){
		.contactbox_bottom{
			flex-direction : column;
			gap : 15px;
		}
		.contactbox_bottom a{
			width : 100%;
		}
	}
	@media screen and ( width <= 985px ){
		.contactbox_top{
			flex-direction : column;
		}
		.contactbox_top h4 , .contactbox_middle , .contactbox_right{
			width : 100%;
			text-align : center;
		}
		.contactbox_tel{
			width : 330px;
			margin : 0 auto;
		}
		.contactbox_tel div{
			width : 15%;
		}
		.contactbox_tel a{
			width : 85%;
		}
		.contactbox_right span{
			width : 200px;
			margin-bottom : 0;
		}
		.contactbox_right{
			display : flex;
			gap : 15px;
			justify-content : center;
			order : 2;
			margin : 20px 0;
		}
		.contactbox_middle{
			order : 3;
		}
	}
}