@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*設定する場合→ font-family:'Noto sans japanese', sans-serif; を追加*/
/*同時に他のWEBフォントを使う場合はhtml側に記載すること*/

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: inherit;
}

body {
	font-size: clamp(14px, calc(100vw/24.375), 20px);
	background: var(--cream);
	color: var(--black);
	font-family: 'Noto sans japanese', sans-serif;
}

#wrapper {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
}

img {
	vertical-align: bottom;
	width: 100%;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=submit],
input[type=button] {
	-webkit-appearance: none;
	border: 1px solid #999999;
}

.for-pc {
	display: none !important;
}

.sp-br {
	display: block;
}

/*共通
----------------------------------------------------------------------------------------------------*/
.fot-r {
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.fot-b {
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 700;
	font-style: normal;
}

/* ================================== */

.fix-contact {
	position: fixed;
	bottom: 0;
	width: fit-content;
	left: 1em;
	z-index: 99;
	padding: 0 2em;
}

/* cta ============================== */

.cta-btn {}

.cta-btn__content {
	padding: 1em;
}

.cta-btn--orange .cta-btn__content {
	background: var(--orange);
	color: var(--white);
}

.cta-btn--blue .cta-btn__content {
	background: var(--blue);
	color: var(--white);
}

.cta-btn__icon {
	padding: 1em;
	background: var(--white);
}

/* st ============================== */

.st-box {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.st {
	font-size: 2em;
	text-align: center;
}

.copy {
	font-size: 1.25em;
	text-align: center;
	line-height: 1.7;
	font-weight: 200;
}

/* section ================================= */

.section {}

.section--orange {
	background: var(--orange);
	color: var(--white);
}



/*ヘッダー
----------------------------------------------------------------------------------------------------*/


/*メインコンテンツ
----------------------------------------------------------------------------------------------------*/
#main {}

.content {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
	padding: 2em 1em 2em;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.content--hero {
	padding: 0;
}

/* issue ============================== */

.cta {}

.cta .text-abs-box__text {
	transform: translateY(-10%);
}

/* issue ============================== */

.issue {}

.issue .text-abs-box__text {
	transform: translateY(-20%);
}

.issue__image {
	width: 50vw;
}

.issue-card {
	background: url(./../img/index/node_b.png) no-repeat, var(--navy);
	background-position-x: 0%;
	background-position-y: 260%;
}

/* design ============================== */

.design {}

.design .st {
	line-height: 2em;
}

.design .card {
	border-color: var(--orange)
}

.design__bg {
	background: url(./../img/index/wave.png) no-repeat center bottom;
	background-size: 100% auto;
}

.design__item {
	padding-bottom: 4em;
	background: rgba(248, 247, 242, 0.7);
}

/* plan ============================== */

.plan .badge--circle {
	width: 4em;
	height: 4em;
	line-height: 4em;
	font-size: 1.25em;
}




/*フッター
----------------------------------------------------------------------------------------------------*/
footer {
	padding-bottom: constant(safe-area-inset-bottom);
}

.pagetop {
	position: fixed;
	bottom: 20px;
	/*適宜変更*/
	right: 20px;
	/*適宜変更*/
	z-index: 99;
	/*適宜変更・削除*/

	display: inline-block;
	/*必要があれば適宜変更*/
}

.pagetop img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.footer {
	background: var(--black);
	color: var(--white);
}

.footer__logo {
	width: 240px;
}