/*------------------------------------------------------------------------------

CSS Information

 File name:	style.css

 Style Info: ランディング CSS


------------------------------------------------------------------------------*/

/* /////////////////////////////////////////////////////////////////////////////

 全体 style

///////////////////////////////////////////////////////////////////////////// */

.lp_wrapper {
	font-size: 62.5%;
	line-height: 1.15;
	position: relative;
	left: 0;
	overflow: hidden;
	word-wrap: break-word;
	background-attachment: fixed;
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

}

.lp_wrapper *:where(:not(.lp_content :is(.fig_block .fig, .price_block :is(.fig, .text)))) {
  box-sizing: unset;
}

@media screen and (max-width: 1240px) {
  html {
    font-size: calc((10 * (100vw / 1240)));
  }
}

.lp_wrapper a {
	color: #333;
	text-decoration: underline;
}

.lp_wrapper a:hover {
	color: #999;
	text-decoration: none;
}

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.lp_wrapper video, object {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
}

.lp_wrapper img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
}

.lp_wrapper h1, h2, h3, h4, h5, h6 {
	font-weight: inherit;
}

/* font-family: HKGrotesk-Bold; */
@font-face {
	font-family: 'HKGrotesk-Bold';
	src: url('../font/HKGrotesk-Bold.woff2') format('woff2'),
	url('../font/HKGrotesk-Bold.woff') format('woff'),
	url('../font/HKGrotesk-Bold.ttf') format('truetype');
}



/* /////////////////////////////////////////////////////////////////////////////

 メインコンテンツ

///////////////////////////////////////////////////////////////////////////// */

/*------------------------------------------------------------------------------

 LP

------------------------------------------------------------------------------*/

.lp_wrapper {
	clear: both;
	font-size: 3.6rem;
}

.lp_wrapper.lp01 hr {
	width: 500px;
	max-width: 65%;
	margin: 0 auto;
	height: 14px;
	border: none;
	background-color: #fff;
	background-image: radial-gradient(#999 30%, transparent 30%);
	background-size: 3.5px 3.5px;
}

.lp_wrapper .btn-top{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	background-color: #333;
	text-decoration: none;
	color: #fff;
	transition: all 0.3s ease;
}

.lp_wrapper .btn-top:hover{
	color: #fff;
}


/* main image
------------------------------------------------------------- */


.lp_main_img .inner {
	max-width: 1200px;
	margin: 0 auto;
}

.lp_main_img img {
	width: 100%;
}

.lp_main_img .text_block {
	margin: 40px 0;
	text-align: center;
	line-height: 2;
}

.lp_main_img .text_block h1 {
	margin-bottom: 20px;
	font-size: 6rem;
}

.lp_main_img .text_block p {
	margin-bottom: 1em;
}

.lp_main_img .text_block p span {
	font-size: 90%;
}

/* 汎用
-----------------------------------------------------------*/

.lp_content {
	margin: 40px 0;
}

.lp_content .lp_inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}


/* bg
------------------------------------------------------------- */

.lp_content .lp_bg {
	position: relative;
}

.lp_content .lp_bg.lp_bg01::before ,
.lp_content .lp_bg.lp_bg03::before {
	position: absolute;
	content: '';
	top: 10%;
	width: 90%;
	height: 100%;
	background: #EEE;
	z-index: -1;
}
.lp_content .lp_bg.lp_bg01::before {
	left: 0;
}
.lp_content .lp_bg.lp_bg03::before {
	right: 0;
}

/* white */
.lp_content .lp_bg.lp_bg01.wh::before ,
.lp_content .lp_bg.lp_bg02.wh::before ,
.lp_content.white .price_block .fig::before {
	background: #f4f2ec;
}

/* orange */
.lp_content .lp_bg.lp_bg03.or::before ,
.lp_content .lp_bg.lp_bg04.or::before ,
.lp_content.orange .price_block .fig::before {
	background: #f6ece4;
}

/* pink */
.lp_content .lp_bg.lp_bg01.pk::before ,
.lp_content .lp_bg.lp_bg02.pk::before ,
.lp_content.pink .price_block .fig::before {
	background: #f4ecec;
}

/* brown */
.lp_content .lp_bg.lp_bg03.br::before ,
.lp_content .lp_bg.lp_bg04.br::before ,
.lp_content.brown .price_block .fig::before {
	background: #dbd0cb;
}


/* title
------------------------------------------------------------- */

.lp_content .title_block {
	margin-bottom: 30px;
}

.lp_content .title_block h1 {
	font-size: 8rem;
	font-family: 'HKGrotesk-Bold';
	letter-spacing: .2rem;
	text-align: center;
}

.lp_content .title_block h1 .min {
	font-size: 5rem;
}


/* fig
------------------------------------------------------------- */

.lp_content .fig_block {
	display: -webkit-flex;
	display: flex;
	margin: 0 -2.5px 70px;
}
.lp_content .fig_block.reverse {
	flex-direction: row-reverse;
}

.lp_content .fig_block .fig {
	display: block;
	width: 50%;
	padding: 0 2.5px;
	box-sizing: border-box;
}



/* price
------------------------------------------------------------- */

.lp_content .price_block .fig {
	width: 85%;
	margin: 0 auto;
}

.lp_content .price_block .text_inner {
	text-align: center;
}

.lp_content .price_block .text h2 {
	margin: 1.5em 0 3em;
	font-size: 5rem;
	line-height: 2;
}

.lp_content .price_block .item {
	position: relative;
	width: 36%;
	margin: 3em auto 0;
}


/* price_list */

.lp_content .price_list {
	font-size: 5rem;
}

.lp_content .price_list li {
	margin-bottom: .8em;
}

.lp_content .price_list a {
	text-decoration: none;
}

.lp_content .price_list a .btn {
	display: inline-block;
	margin-left: .5em;
	padding: .4em .5em;
	background: #333;
	color: #FFF;
	font-size: 85%;
	font-weight: normal;
}

/*------------------------------------------------------------------------------

 Animation

------------------------------------------------------------------------------*/

/* main image
------------------------------------------------------------- */

.lp_main_img {
	animation: main_img .8s both;
}
.lp_main_img .text_block {
	animation: main_img_txt .8s both;
}

@keyframes main_img {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes main_img_txt {
	0% {
		transform: translate(0, 60px);
	}
	100% {
		transform: translate(0, 0);
	}
}


/* bg
------------------------------------------------------------- */

.lp_content .lp_bg.lp_bg01::before ,
.lp_content .lp_bg.lp_bg03::before {
	width: 0;
	transition: .5s ease .5s;
}
.lp_content .lp_bg.scrollin.lp_bg01::before ,
.lp_content .lp_bg.scrollin.lp_bg03::before {
	width: 90%;
}


/* fig / price
------------------------------------------------------------- */

.lp_bg .fig_block .fig:nth-child(1) ,
.lp_bg .fig_block .fig:nth-child(2) {
	opacity: 0;
	transform: translate(0, 80px);
}
.lp_bg .fig_block .fig:nth-child(1) {
	transition: 800ms;
}
.lp_bg .fig_block .fig:nth-child(2) {
	transition: 800ms 400ms;
}
.lp_bg.scrollin .fig_block .fig:nth-child(1) ,
.lp_bg.scrollin .fig_block .fig:nth-child(2) {
	opacity: 1;
	transform: translate(0, 0);
}

.lp_bg .price_block .text {
	opacity: 0;
	transition: 400ms;
}
.lp_bg.scrollin .price_block .text {
	opacity: 1;
}

.lp_bg .price_block .fig {
	opacity: 0;
	transform: translate(0, 80px);
	transition: 800ms;
}
.lp_bg.scrollin .price_block .fig {
	opacity: 1;
	transform: translate(0, 0);
}


.lp_content .price_block .item img {
	transform-origin: center bottom;
	animation: katakata 3s linear infinite;
}
@keyframes katakata {
	0% , 100%{ transform: rotate(0); }
	60%{ transform: rotate(0); }
	64%{ transform: rotate(10deg); }
	68%{ transform: rotate(-10deg); }
	72%{ transform: rotate(8deg); }
	76%{ transform: rotate(-8deg); }
	80%{ transform: rotate(0); }
}



/* /////////////////////////////////////////////////////////////////////////////

 汎用CSS

///////////////////////////////////////////////////////////////////////////// */

/* テキスト位置設定 ---------------- */

.lp_wrapper .center {
	margin: auto;
	text-align: center;
}

.lp_wrapper .left {
	text-align: left;
}

.lp_wrapper .right {
	text-align: right;
}

/* フロート関係 ------------------- */

.lp_wrapper .floatLeft {
	float: left;
}

.lp_wrapper .floatRight {
	float: right;
}

.lp_wrapper .clear,
.lp_wrapper .clearBoth {
	clear: both;
}

.lp_wrapper .clearfix {
	zoom: 1; /* IE6-7 */
}

.lp_wrapper .clearfix:after { /* modern */
	content: '';
	display: block;
	clear: both;
	height: 0;
}



/* /////////////////////////////////////////////////////////////////////////////

 デバイス別

///////////////////////////////////////////////////////////////////////////// */

/*media Queries スマホ
-----------------------------------------------------------*/

@media only screen and (max-width: 768px) {
	.lp_wrapper .sp_hide {
		display: none;
	}
	.lp_wrapper .btn-top{
		margin-block: calc(142 * (100vw / 750)) calc(225 * (100vw / 750));
		width: calc(520 * (100vw / 750));
		height: calc(92 * (100vw / 750));
		font-size: calc(26 * (100vw / 750));
		letter-spacing: 0.05em;
		line-height: 1;
	}
	/* main ////////////////////////// sp */
	/* bg */
	.lp_content .price_block .fig {
		position: relative;
		margin-bottom: 40px;
	}
	.lp_content .price_block .fig::before {
		position: absolute;
		content: '';
		right: -20px;
		bottom: -20px;
		width: 100%;
		height: 100%;
		z-index: -1;
		transition: 0.4s;
	}
	.lp_content .price_block .fig::before {
		width: 0;
		height: 0;
		transition: .25s ease .5s;
	}
	.lp_content .scrollin .price_block .fig::before {
		width: 100%;
		height: 100%;
	}
}



/*media Queries タブレット 〜 PCサイズ
-----------------------------------------------------------*/

@media only screen and (min-width: 769px) {
	.breadcrumb__list{
    padding-bottom: 1.6rem;
  }
	.lp_wrapper .pc_hide {
		display: none;
	}
	.lp_wrapper .btn-top{
		margin-block: 16rem 18.2rem;
		width: 36rem;
		height: 6.2rem;
		font-size: 1.5rem;
		letter-spacing: 0.06em;
		line-height: 1;
	}
	/* main ////////////////////////// pc */
	.lp_wrapper {
		font-size: 2.222rem;
		font-size: 1.75rem;
	}
	.lp_wrapper.lp01 hr {
		max-width: 80%;
	}
	/* main img */
	.lp_main_img .text_block {
		margin: 90px 0;
	}
	.lp_main_img .text_block h1 {
		margin-bottom: 30px;
		font-size: 3rem;
		font-size: 2.5rem;
	}
	/* 汎用 */
	.lp_content {
		margin: 90px 0;
	}
	.lp_content .lp_inner {
		padding: 0 7.62%;
	}
	/* title */
	.lp_content .title_block {
		margin-bottom: 50px;
	}
	.lp_content .title_block h1 {
		font-size: 5rem;
	}
	.lp_content .title_block h1 .min {
		font-size: 3.333rem;
	}
	/* bg */
	.lp_content .lp_bg.lp_bg01::before ,
	.lp_content .lp_bg.lp_bg03::before {
		top: 12.16%;
		width: 55%;
		height: 78.64%;
	}
	.lp_content .lp_bg.lp_bg02 ,
	.lp_content .lp_bg.lp_bg04 {
		margin-bottom: 10%;
	}
	
	.lp_content .lp_bg.lp_bg02::before ,
	.lp_content .lp_bg.lp_bg04::before {
		position: absolute;
		content: '';
		bottom: -8%;
		width: 45%;
		height: 100%;
		background: #EEE;
		z-index: -1;
		transition: 0.4s;
	}
	.lp_content .lp_bg.lp_bg02::before {
		right: 0;
	}
	.lp_content .lp_bg.lp_bg04::before {
		left: 0;
	}
	/* pink */
	.lp_content .lp_bg.lp_bg02.pk {
		margin-top: 8%;
		margin-bottom: auto;
	}
	.lp_content .lp_bg.lp_bg02.pk::before {
		top: -8%;
		bottom: auto;
	}
	.lp_content .lp_bg.lp_bg02.pk .text {
		margin-top: -8%;
	}
	
	/* price */
	.lp_content .price_block {
		display: -webkit-flex;
		display: flex;
		margin: 0 -2.5px;
	}
	.lp_content .price_block.reverse {
		flex-direction: row-reverse;
	}
	.lp_content .price_block .fig ,
	.lp_content .price_block .text {
		display: block;
		width: 50%;
		padding: 0 2.5px;
		box-sizing: border-box;
	}
	.lp_content .price_block .text_inner {
		width: 120%;
		margin-right: -20%;
		padding-top: 20%;
		text-align: center;
	}
	.lp_content .price_block.reverse .text_inner {
		margin-right: 0;
		margin-left: -20%;
	}
	.lp_content .price_block .text h2 {
		font-size: 2rem;
	}
	.lp_content .price_list {
		font-size: 2.5rem;
		font-size: 1.8rem;
	}
	.lp_content .price_block .item img {
		position: absolute;
		width: 100%;
		left: 0;
	}
	
	/* Animation */
	.lp_content .lp_bg.lp_bg01::before ,
	.lp_content .lp_bg.lp_bg03::before {
		width: 0;
		transition: .5s ease-in .5s;
	}
	.lp_content .lp_bg.scrollin.lp_bg01::before ,
	.lp_content .lp_bg.scrollin.lp_bg03::before {
		width: 55%;
	}
	.lp_content .lp_bg.lp_bg02::before ,
	.lp_content .lp_bg.lp_bg04::before {
		width: 0;
		transition: .5s ease-in .5s;
	}
	.lp_content .lp_bg.scrollin.lp_bg02::before ,
	.lp_content .lp_bg.scrollin.lp_bg04::before {
		width: 45%;
	}
	
	/* common //////////////////////// pc */
	.lp_wrapper .figLeft {
		float: left;
		margin-right: 30px;
		margin-bottom: 10px;
	}
	.lp_wrapper 	.figRight {
		float: right;
		margin-left: 20px;
		margin-bottom: 10px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 800px) {
	.lp_wrapper .side {
		width: 200px;
	}
}