@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;

	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

a:hover {
	opacity: .7;
}

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

#wrapper {
	min-width: 600px;
}

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;
}

input[type=submit] {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

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

/*共通
----------------------------------------------------------------------------------------------------*/
.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;
}

/* 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 {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	padding: 4em 1em 2em;
	display: flex;
	flex-direction: column;
	gap: 4em;
}

.content--hero {
	padding: 0;
}

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

.fix-contact {
	position: fixed;
	bottom: 0;
	width: fit-content;
	left: calc(50% - (min(1200px, 100vw)/2 - 8em));
	z-index: 99;
	padding: 0 2em;
}

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

.cta {}

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

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

.issue {}

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

.issue__image {
	width: min(280px, 20vw);
}

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

/* 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;
}

/* step ============================== */

.step {
	background: url(./../img/index/node.png) no-repeat 5% center;
	background-size: auto 50%;
}



/*フッター
----------------------------------------------------------------------------------------------------*/
.pagetop {
	position: fixed;
	bottom: 20px;
	/*適宜変更*/
	right: calc(50% - 600px);
	/*適宜変更 これはコンテンツ幅の右に合わせる場合の指定です*/
	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;
}