@charset "UTF-8";

/* =========================================================
l-wrap style
========================================================= */
.l-wrap.__mainWrap01 {
    width: 100%;
    max-width: var(--max-width-big);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
	.l-wrap.__mainWrap01 {
        padding: var(--gap05)!important;
	}
}

@media (max-width: 640px) {
	.l-wrap.__mainWrap01 {
        padding: var(--gap05)!important;
	}
}

@media (max-width: 480px) {
	.l-wrap.__mainWrap01 {
        padding: var(--gap05) var(--gap04) var(--gap04)!important;
	}
}

.l-wrap {
	/* //header {
	&.__header01 {
		position: relative;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
		max-width: var(--max-width-big);
	}
	
	@media (max-width: 1200px) {
		&.__header01 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 768px) {
		&.__header01 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}

	//footer {
	&.__footer01 {
		position: relative;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
	}
	
	@media (max-width: 1200px) {
		&.__footer01 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 768px) {
		&.__footer01 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}

	//全体で使用されるレイアウト幅
	&.__main01 {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
		max-width: var(--max-width-big);
	}
	
	@media (max-width: 1200px) {
		&.__main01 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 768px) {
		&.__main01 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}

	//全体で使用されるレイアウト幅 + レスポンシブで箸にピッタリつく
	&.__main02 {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
		max-width: var(--max-width-big);
	}
	
	@media (max-width: 1200px) {
		&.__main02 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 1024px) {
		&.__main02 {
			padding-left: 0;
			padding-right: 0;
		}
	}
	
	//ヘッダーなど、全体とは異なる部分
	&.__sub01 {
		padding-left: var(--gap03);
		padding-right: 0;
	}
	
	@media (max-width: 1200px) {
		&.__sub01 {
			padding-left: var(--gap01);
		}
	}
	
	@media (max-width: 992px) {
		&.__sub01 {
			padding-left: 1.5rem;
		}
	}

	//記事で使用
	&.__post01 {
		margin-left: auto;
		margin-right: auto;
		padding-left: 90px;
		padding-right: 90px;
	}
	
	@media (max-width: 1400px) {
		&.__post01 {
			padding-left: 56px;
			padding-right: 56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__post01 {
			padding-left: var(--gap01);
			padding-right: var(--gap01);
		}
	}
	
	&.__negative01 {
		margin-left: -90px;
		margin-right: -90px;
	}
	
	@media (max-width: 1400px) {
		&.__negative01 {
			margin-left: -56px;
			margin-right: -56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__negative01 {
			margin-left: calc(-1 * var(--gap01));
			margin-right: calc(-1 * var(--gap01));
		}
	}
	
	&.__bg01 {
		border-radius: 12px;
		background-color: var(--base-color02);
		box-shadow: var(--shadow01);
	}
	
	//白背景のコンテンツラップ
	&.__whiteCont01 {
		border-radius: var(--radius02);
		padding: var(--gap02);
		background-color: var(--base-color02);
	}
	
	@media (max-width: 768px) {
		&.__whiteCont01 {
			padding: var(--gap01);
		}
	}

	//フォームで使用
	&.__form01 {
		position: relative;
		max-width: 90rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 90px;
		padding-right: 90px;
	}
	
	@media (max-width: 1400px) {
		&.__form01 {
			padding-left: 56px;
			padding-right: 56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__form01 {
			padding-left: var(--gap01);
			padding-right: var(--gap01);
		}
	}
	
	@media (max-width: 576px) {
		&.__form01 {
			padding-left: var(--gap00);
			padding-right: var(--gap00);
		}
	}

	//フォームで使用
	&.__form02 {
		position: relative;
		max-width: 1340px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 90px;
		padding-right: 90px;
	}
	
	@media (max-width: 1400px) {
		&.__form02 {
			padding-left: 56px;
			padding-right: 56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__form02 {
			padding-left: var(--gap01);
			padding-right: var(--gap01);
		}
	}*/
}

/* =========================================================
l-wrap var
========================================================= */

.l-wrap.__tinyprl { padding-left: var(--ptb-tiny); padding-right: var(--ptb-tiny); }
.l-wrap.__minprl { padding-left: var(--ptb-min); padding-right: var(--ptb-min); }
.l-wrap.__midprl { padding-left: var(--ptb-mid); padding-right: var(--ptb-mid); }
.l-wrap.__largeprl { padding-left: var(--ptb-large); padding-right: var(--ptb-large); }
.l-wrap.__bigprl { padding-left: var(--ptb-big); padding-right: var(--ptb-big); }
.l-wrap.__hugeprl { padding-left: var(--ptb-huge); padding-right: var(--ptb-huge); }

/* padding top/bottom */
.l-wrap.__tinyptb { padding-top: var(--ptb-tiny); padding-bottom: var(--ptb-tiny); }
.l-wrap.__minptb { padding-top: var(--ptb-min); padding-bottom: var(--ptb-min); }
.l-wrap.__midptb { padding-top: var(--ptb-mid); padding-bottom: var(--ptb-mid); }
.l-wrap.__largeptb { padding-top: var(--ptb-large); padding-bottom: var(--ptb-large); }
.l-wrap.__bigptb { padding-top: var(--ptb-big); padding-bottom: var(--ptb-big); }
.l-wrap.__hugeptb { 
	padding-top: var(--ptb-huge); padding-bottom: var(--ptb-huge);
	
	@media (max-width: 768px) {
		padding-top: var(--ptb-large); 
		padding-bottom: var(--ptb-big);
	} 
}

/* .l-wrap {
	&.__difference01 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap02);
		overflow: hidden;
	}
	
	@media (max-width: 1024px) {
		&.__difference01 {
			gap: 0;
			flex-direction: column;
		}
	}

	&.__noposition {
		position: inherit;
	}
} */