/* common */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
	font-family: 'Noto Sans JP', sans-serif;
	background: #fff;
}
section {
	overflow: hidden;
}

/* header */
.header {
	width: 100%;
	height: 80px;
	position: relative;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0px 80px 0px 54px;
	box-sizing: border-box;
	gap: 10px;
	text-align: left;
	font-size: 16px;
	color: #232529;
}
.logo {
	width: 266px;
	max-height: 100%;
	object-fit: cover;
}
.header-contents {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.contact-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
}
.contact {
	position: relative;
}
.icon-contact {
	height: 24px;
	width: 24px;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}
/* FV */
.top {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	text-align: center;
	color: #232529;
}
.bg-diagonal {
    width: 100%;
    margin: 0;
    position: absolute;
    overflow: hidden;
	bottom: 0;
	height: 38%;
}
.bg-diagonal::before {
	display: block;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #43AD9C;
    transform: skewY(-5deg) translateY(90px);
    z-index: -1;
}
.top-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
	gap: 80px;
}
.copy-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.copy-first {
	align-self: stretch;
	position: relative;
	line-height: 160%;
	font-size: 4rem;
}
.span {
	letter-spacing: -0.03em;
}
.span2 {
	letter-spacing: -0.31em;
}
.copy-second {
	position: relative;
	font-size: 5.6rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 160%;
	margin-top: -8px;
}
.top-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	align-items: center;
}
.btn-group {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	justify-content: center;
}
.btn-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.btn-text {
	align-self: stretch;
	position: relative;
}
.btn-download {
	align-self: stretch;
	height: 64px;
	border-radius: 40px;
	background-color: #109781;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
	gap: 8px;
	text-align: left;
	font-size: 18px;
	color: #fff;
}
.btn-label {
	position: relative;
	font-weight: 500;
}
.icon {
	width: 24px;
	position: relative;
	max-height: 100%;
}
.btn-reservation {
	align-self: stretch;
	height: 64px;
	border-radius: 40px;
	background-color: #f0b334;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
	gap: 8px;
	text-align: left;
	font-size: 18px;
	color: #fff;
}
.point-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 80px;
}

.bottom-pyramid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.point-container {
	height: 180px;
	width: 180px;
	display:flex;
	position: relative;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}
.point-border {
	position: absolute;
	width: 100%;
	height: 180px;
	top: 0px;
	right: 0%;
	left: 0%;
	background: linear-gradient(135deg, #109781, #CFE9E5);
	border-radius: 50%;
	padding: 3px;
	box-sizing: border-box;
}
.point-border.migiue{
	background: linear-gradient(45deg, #109781, #CFE9E5);
}
.point-bg {
	border-radius: 50%;
	background-color: #fff;
	height: 174px;
}
.point-1 {
	position: absolute;
	line-height: 130%;
}
.point-2 {
	position: absolute;
	line-height: 130%;
}
.p {
	margin: 0;
}
.point-3 {
	position: absolute;
	line-height: 130%;
}
.top-img {
	margin-top: -32px;
	position: relative;
	width: 100%;
}
.mockup {
	height: 375px;
	position: relative;
}
.mockup-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 376.2px;
	height: 352.7px;
	object-fit: cover;
}
.mockup-right {
	position: absolute;
	top: 24px;
	left: 344px;
	width: 346px;
	height: 363px;
	object-fit: cover;
}

/* CV area */
.cv {
	width: 100%;
	position: relative;
	background-color: #43ad9c;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 80px;
	box-sizing: border-box;
	gap: 56px;
	color: #fff;
}
.cv-copy-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.cv-copy{
	font-size: 40px;
	text-align: center;
	position: relative;
	line-height: 130%;
	font-weight: 500;
	text-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.15);
}
.cv-copy-sub {
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 175%;
	text-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.15);
	text-align: center;
}
.cv-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 40px;
	font-size: 24px;
	color: #232529;
}
.cv-card {
	flex: 1;
	max-width: 370px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
	border-radius: 40px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 40px 0;
	gap: 52px;
}
.cv-text-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.cv-text-first-container {
	align-self: stretch;
	height: 58px;
	position: relative;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	align-items: center;
}
.cv-text-first {
	text-align: center;
	line-height: 1.2;
	margin: 0;
	font-weight: 500;
}
.cv-text-second {
	align-self: stretch;
	position: relative;
	font-size: 14px;
}
.cv-img {
	width: 280px;
	height: 187px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.cv-img-download.cv-img-reservation {
	align-self: stretch;
	flex: 1;
	position: relative;
	overflow: hidden;
}
.btn-reservation {
	align-self: stretch;
	height: 64px;
	border-radius: 40px;
	background-color: #f0b334;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
	gap: 8px;
	text-align: left;
	font-size: 18px;
	color: #fff;
}

/* 課題 */
.assignment {
	width: 100%;
	position: relative;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 0;
	box-sizing: border-box;
	gap: 80px;
	text-align: center;
}
.assignment-title-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.section-title-first {
	background:linear-gradient(transparent 65%,#C3E5DF 50%,#C3E5DF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	position: relative;
	font-size: 32px;
	font-weight: 700;
}

.assignment-copy {
	position: relative;
	font-size: 24px;
	font-weight: 500;
}
.assignment-contents {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	text-align: left;
	font-size: 20px;
}
.assignment-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
.assignment-card-wrapper {
	width: 380px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.assignment-second-title {
	align-self: stretch;
	position: relative;
	font-size: 24px;
	color: #109781;
	text-align: center;
	line-height: 130%;
	font-weight: 700;
}
.assignment-card {
	align-self: stretch;
	box-shadow: 0px 0.800000011920929px 2.5px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 24px;
	gap: 16px;
}
.assignment-subtitle-wrapper {
	align-self: stretch;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}
.assignment-subtitle {
	font-weight: 700;
	line-height: 130%;
}
.icon_worry {
	width: 36px;
	position: relative;
	max-height: 100%;
}
.assignment-text {
	align-self: stretch;
	position: relative;
	font-size: 16px;
	line-height: 160%;
}
.assignment1 {
	width: 246px;
	position: relative;
	max-height: 100%;
}
.assignment2 {
	width: 253px;
	position: relative;
	max-height: 100%;
}

/* 特徴 */
.features {
	width: 100%;
	position: relative;
	background-color: rgba(203, 233, 228, 0.91);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 0 160px;
	box-sizing: border-box;
	gap: 80px;
	text-align: left;
	font-size: 24px;
	color: #109781;
}
.features-title-wrapper {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: 32px;
	color: #232529;
}
.features-contents-right {
	align-self: stretch;
	display: flex;
	align-items: center;
	position: relative;
	gap: 80px;
	background-image: url("img/features_bg_right.png");
	background-size: cover;
	margin-left: 10%;
	padding-left: 100px;
}
.features-bg-right {
	width: 100%;
	position: absolute;
	margin: 0 !important;
	top: 0px;
	right: -8%;
	z-index: 0;
	flex-shrink: 0;
}
.features-right {
	flex: 1;
	padding: 16px 24px;
	padding-left: 36px;
}
.features-text-wrapper {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.features-text-main {
	align-self: stretch;
	position: relative;
	line-height: 160%;
	font-weight: 700;
}
.features-text-group {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	font-size: 16px;
	color: #232529;
}
.img-right {
	flex: 1;
}

.features-contents-left {
	align-self: stretch;
	display: flex;
	align-items: center;
	position: relative;
	gap: 80px;
	background-image: url("img/features_bg_left.png");
	background-size: cover;
	background-position: top right;
	margin-right: 10%;
	padding-right: 100px;
}
.img-left {
	height: 216px;
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
.features-bg-left {
	width: 100%;
	position: absolute;
	margin: 0 !important;
	top: 0px;
	left: -8%;
	object-fit: contain;
	z-index: 0;
	flex-shrink: 0;
}
.img-left-wrapper {
	align-self: stretch;
	height: 160px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	z-index: 1;
}

.img-features1 {
	width: 280px;
	margin-bottom: 20px;
}
.img-features2,
.img-features3 {
	width: 200px;
	margin-bottom: 20px;
}
.features-left {
	flex: 1;
	padding: 16px 24px;
}

/* cv2 */
.cv2 {
	width: 100%;
	background-color: #fff;
	padding: 56px 120px;
	color: #fff;
}
.cv2-container {
	border-radius: 40px;
	background-color: #43ad9c;
	display: flex;
	justify-content: center;
	padding: 40px;
	gap: 40px;
}
.cv2-img-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 234px;
	width: 403px;
	position: relative;
}
.img-android {
	position: absolute;
	height: 86.41%;
	top: 0%;
	bottom: 13.59%;
	left: calc(50% - 201.24px);
	max-height: 100%;
	width: 215.7px;
	object-fit: cover;
}
.img-iphone {
	position: absolute;
	height: 98.08%;
	top: 15.15%;
	bottom: -13.22%;
	left: calc(50% - 32.56px);
	max-height: 100%;
	width: 218.9px;
	object-fit: cover;
}
.cv2-text-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-bottom: 56px;
}
.cv2-copy {
	position: relative;
	line-height: 130%;
	font-size: 32px;
}
.cv2-subcopy {
	position: relative;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 175%;
}
.cv2-btn-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	text-align: center;
	font-size: 14px;
}

/* 開発の費用・期間／比較 */
.sample-plan {
	margin-top: 40px;
}

/* 開発の費用・期間 */
.cost {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0px 0px 120px;
	box-sizing: border-box;
	gap: 24px;
	text-align: center;
	font-size: 32px;
	color: #109781;
}
.cost-title {
	position: relative;
	font-weight: 600;
	align-self: stretch;
	z-index: 0;
}
.cost-container {
	border-radius: 20px;
	background-color: #43ad9c;
	border: 8px solid #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 56px;
}
.cost-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}
.reference-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.reference {
	align-self: stretch;
	border-radius: 30px;
	background-color: #fff;
	border: 1px solid #109781;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 32px;
	gap: 20px;
}
.reference-contents {
	max-width: 600px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.reference-text {
	align-self: stretch;
	border-radius: 30px 0px 0px 0px;
	border-bottom: 1px solid #909090;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px 0px 16px;
	gap: 16px;
}
.contents-title-wrapper {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 4px;
}
.contents-title {
	position: relative;
	line-height: 150%;
	font-weight: 700;
	text-align: left;
	font-size: 24px;
}
.contents-subtext {
	position: relative;
	font-size: 14px;
	line-height: 150%;
}
.contents-text {
	align-self: stretch;
	position: relative;
	font-size: 16px;
	line-height: 150%;
	color: #555;
}
.phase-group {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 12px;
	color: #909090;
}
.phase-wrapper {
	align-self: stretch;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 20px;
}
.phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.phase-text-wrapper {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.phase-subject {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.phase-number {
	position: relative;
	line-height: 130%;
	font-weight: 700;
}
.phase-title {
	position: relative;
	font-size: 18px;
	line-height: 130%;
	color: #555;
	font-weight: 700;
}
.phase-contents-wrapper {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 14px;
	color: #555;
}
.phase-fees {
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	font-size: 16px;
	color: #232529;
}
.phase3-fees {
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	color: #555;
}
.fees-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.annotations {
	align-self: stretch;
	position: relative;
	line-height: 130%;
}
.fees {
	font-size: 16px;
	line-height: 130%;
	color: #232529;
}
.total {
	align-self: stretch;
	border-radius: 0px 0px 0px 30px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: 14px;
	color: #232529;
}
.total-wrapper {
	align-self: stretch;
	height: 37px;
	border-top: 1px solid #909090;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0px 0px;
	gap: 20px;
}
.totalperiod {
	position: relative;
	line-height: 130%;
}
.total-fee {
	position: relative;
	font-size: 16px;
	line-height: 130%;
}
.reference-img-container {
	height: 373px;
	width: 180px;
	position: relative;
}
.reference-img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.reference-note {
	width: 100%;
	position: relative;
	font-size: 14px;
	line-height: 130%;
	color: #fff;
	display: inline-block;
}
.description {
	line-height: 130%;
}
/* こんな使い方ができます */
.forte-wrapper {
	width: 100%;
	position: relative;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 160px 120px;
	box-sizing: border-box;
	text-align: center;
	font-size: 32px;
	color: #232529;
}
.forte {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	max-width: 100%;
}
.section-title{
	position: relative;
	font-size: 32px;
	text-align: center;
	font-weight: 600;
}
.forte-container {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	font-size: 18px;
}
.forte-card {
	width: 340px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.forte-worry{
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.bubble {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.bubble-container {
	width: 340px;
	height: 100px;
	position: relative;
}
.bubble-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 340px;
	height: 100px;
}
.bubble-text-container {
	position: absolute;
	top: 15px;
	width: 100%;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bubble-text {
	position: relative;
	line-height: 150%;
	font-weight: 500;
}
.forte-img {
	width: 340px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.forte-img-a {
	align-self: stretch;
	width: 150px;
	position: relative;
	max-height: 100%;
}
.solution {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
	color: #232529;
	font-size: 18px;
}
.solution-text-wrapper {
	align-self: stretch;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #109781;
}
.solution-text-important {
	flex: 1;
	position: relative;
	line-height: 160%;
	font-weight: 600;
}
.solution-text-main {
	align-self: stretch;
	position: relative;
	font-size: 15px;
	line-height: 160%;
}
.solution-text-notes {
	align-self: stretch;
	position: relative;
	font-size: 12px;
	line-height: 160%;
}
.forte-img-b {
	align-self: stretch;
	width: 141.1px;
	position: relative;
	max-height: 100%;
}

/* 開発方式の比較 */
.comparison {
	background-color: rgba(203, 233, 228, 0.91);
	padding: 80px 160px 120px;
}

.comparison-content {
	background-color: #FFF;
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 120px;
}

.comparison-table-content {

}

.comparison-table-summary-container {
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;
	padding-left: 12%;
	padding-right: 12%;
}

.comparison-table-summary {
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	background-color: #4386E4;
	color: #FFF;
	z-index: 1;
}

.comparison-table-summary-container .nib {
	transform-origin: center;
	transform: rotate(45deg);
	top: -20px;
	left: -20px;
	width: 40px;
	height: 40px;
	background-color: #4386E4;
	margin-top: -30px;
	align-self: flex-start;
	margin-left: 18%;
}

.comparison-table-summary .bold {
	font-weight: bold;
}

/*テーブル（全体）のスタイル*/
.table-scroll {
	overflow: auto;
}

.comparison-table {
	border-collapse: collapse;
	min-width: 800px;
}

.comparison-table .caption{
	font-size: 1.2rem;
	line-height: 1;
	font-weight: normal;
}

.comparison-table th,
.comparison-table td{
	text-align: center;
	border: solid 1px #B9B9B9;
}

.comparison-table td {
	padding: 4px;
}

/*縦に積むセルの中に置くコンテナ*/
.comparison-table .column-cell {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/*縦に積むヘッダーの中に置くコンテナ*/
.comparison-table .column-header {
	display: inline-flex;
	flex-direction: column;
}

/*表強調表示*/
:root {
	--high-emphasis-border: solid 3px #4386E4;
}
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2){
	border-left: var(--high-emphasis-border);
	border-right: var(--high-emphasis-border);
	font-weight: bold;
}
.comparison-table thead tr:first-child th:nth-child(2) {
	border-top: var(--high-emphasis-border);
}
.comparison-table tbody tr:last-child td:nth-child(2) {
	border-bottom: var(--high-emphasis-border);
}



.emphasis-mark {
	position: absolute;
	transform-origin: center;
	transform: rotate(45deg);
	top: -20px;
	left: -20px;
	width: 40px;
	height: 40px;
	background-color: #4386E4;
}

/*ヘッダー列（一番左）の設定*/
.comparison-table .empty-header {
	width: 120px;
	border-top-color: transparent;
	border-left-color: transparent;
}

/*行のヘッダー*/
.comparison-table .col-header {
	background-color: #EDF6F5;
	height: 50px;
	font-weight: normal;
	position: relative;
	overflow: hidden;
}

.col-header .sub{
	font-size: 1.2rem;
	line-height: 1;
}

.col-header .caption {
	font-size: 1rem;
	line-height: 1;
}

/*列のヘッダー*/
.comparison-table .row-header {
	background-color: #EDF6F5;
	align-content: center;
	font-weight: normal;
}

.caption-detail {
	margin-top: 24px;
	font-size: 1.2rem;
	line-height: 1.2;
}

.comparison-chart-content {
	background-color: #EDF6F5;
	padding: 56px 24px;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	gap: 56px;
}

.comparison-chart-content .chart-container {
	display: block;
	flex: 1;
}

.chart-container img {
	width: 100%;
}

.comparison-chart-content .chart-description {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.chart-description-header {
	font-size: 2.4rem;
	color: #109781;
	font-weight: bold;
}

.chart-description-text {
	color: #232529;
}

.chart-description .btn-container {
	align-self: center;
}

/* 開発後のサポート */
.support {
	width: 100%;
	position: relative;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 160px 120px;
	box-sizing: border-box;
	text-align: center;
	font-size: 32px;
	color: #232529;
}
.support-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}
.support-group {
	align-self: stretch;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 40px;
	font-size: 20px;
	color: #109781;
}
.support-container {
	flex: 1;
	box-shadow: 0 5px 0 #6abeb1;
	border-radius: 10px;
	background-color: #f7fffe;
	border: 1px solid #109781;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px;
	gap: 16px;
}
.support-title-wrapper {
}
.support-title {
	position: relative;
	line-height: 125%;
	display: inline-block;
	flex-shrink: 0;
	font-weight: 600;
}
.support-text {
	align-self: stretch;
	position: relative;
	font-size: 15px;
	line-height: 160%;
	color: #232529;
	text-align: left;
}
/* よくある質問 */
.question {
    width: 100%;
    position: relative;
    background-color: #edf6f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 160px;
    box-sizing: border-box;
    text-align: center;
    font-size: 32px;
    color: #232529;
}
.question-wrapper {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.accordion-container {
	width: 100%;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    box-sizing: border-box;
    text-align: left;
    font-size: 16px;
    color: #0f172a;
}

.accordion {
	width: 100%;
    margin-bottom: 7px;
    border-bottom: 2px solid #e2e8f0;
}

.accordion summary {
    display: flex;
	gap: 8px;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
	user-select: none;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-bottom: 3px solid #0f172ab3;
    border-right: 3px solid #0f172ab3;
    content: '';
    transition: transform .3s;
}

.accordion[open] summary::after {
    transform: rotate(225deg);
}

.accordion p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #0f172a;
    transition: transform .5s, opacity .5s;
	white-space: pre-wrap;
}

.accordion[open] p {
    transform: none;
    opacity: 1;
}

/* フッター */
.footer {
	width: 100%;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 10px;
	color: #232529;
	padding-bottom: 24px;
}
.fotter-logo {
	width: 266px;
	position: relative;
	max-height: 100%;
	object-fit: cover;
}
.management {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.footer-text {
	position: relative;
}
.btn-contact {
    align-self: stretch;
    border-radius: 40px;
    background-color: #232529;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    box-sizing: border-box;
    gap: 8px;
    text-align: left;
    font-size: 18px;
    color: #fff;
}



@media screen and (max-width: 900px) {
	.header {
		padding: 12px 16px;

		.logo {
			width: 106px;
		}

		.contact {
			font-size: 1.2rem;
		}

		.icon-contact {
			width: 16px;
			height: 16px;
		}
	}

	.top {
		.top-frame {
			gap: 40px;
		}

		.copy-first {
			font-size: 2rem;
		}

		.copy-second {
			font-size: 2.6rem;
		}

		.btn-group {
			gap: 16px;
		}

		.btn-container {
			.btn-text {
				display: none;
			}

			.btn-label {
				font-size: 1.2rem;
			}

			.icon {
				width: 18px;
				height: 18px;
			}

			.btn-download {
				height: 42px;
			}

			.btn-reservation {
				height: 42px;
			}
		}

		.point-group {
			flex-wrap: wrap;
			margin-top: 40px;

			.point-container {
				width: 140px;
				height: 140px;
				font-size: 1.4rem;
			}

			.point-border {
				width: 140px;
				height: 140px;
			}

			.point-bg {
				height: 134px;
			}

			.top-pyramid {
				width: 100%;
				display: flex;
				justify-content: center;
			}
			.bottom-pyramid {
				margin-top: -24px;
				width: 100%;
				display: flex;
				justify-content: center;
			}

		}
		.top-img {
			display: flex;
			justify-content: center;

			.mockup {
				height: 200px;
				width: 375px;
			}
			.mockup-left {
				width: 216.2px;
				height: 202.69px;
				left:0;
			}
			.mockup-right {
				width: 186px;
				height: 195px;
				left: 180px;
			}
		}
	}

	.cv {
		.cv-copy-wrapper {
			padding-left: 16px;
			padding-right: 16px;
		}

		.cv-copy {
			font-size: 2.4rem;
		}

		.cv-copy-sub {
			width: 100%;
			font-size: 1.6rem;
		}

		.cv-container {
			padding: 16px;
			gap: 24px;
		}

		.cv-card {
			gap: 32px;
		}
	}

	.assignment {

		.section-title-first {
			font-size: 2rem;
		}

		.assignment-copy {
			font-size: 1.6rem;
		}

		.assignment-contents {
			flex-wrap: wrap;
			justify-content: center;
		}
	}

	.features {
		gap: 40px;

		.section-title-first {
			font-size: 2.4rem;
		}

		.features-contents-right {
			flex-direction: column;
			background-image: url("img/Rectangle_right.png");
			background-size: 100% 100%;
			padding-left: 0;
			margin-left: 16px;
			gap: 20px;
		}
		.features-contents-left {
			flex-direction: column-reverse;
			background-image: url("img/Rectangle_left.png");
			background-size: 100% 100%;
			padding-right: 0;
			margin-right: 16px;
			gap: 20px;
		}

		.img-right,
		.img-left {
			flex: inherit;
		}
	}

	.cv2 {
		padding: 16px;

		.cv2-container {
			flex-direction: column-reverse;
			align-items: center;
		}

		.cv2-copy {
			width: 100%;
			font-size: 2rem;
			font-weight: bold;
			text-align: center;
		}

		.cv2-text-wrapper {
			padding-bottom: 16px;
		}

		.cv2-btn-group {
			flex-direction: column;
		}

		.btn-container {
			width: 100%;
		}

		.btn-download {
			border: solid 1px rgba(255,255,255, 0.5);
		}

		.btn-reservation {
			border: solid 1px rgba(255,255,255, 0.5);
		}
	}

	.sample-plan {
		.cost-container {
			width: 100%;
			padding: 40px 8px;
			border-radius: 20px;
		}
		.reference {
			flex-direction: column;
			align-items: center;
		}

		.contents-title-wrapper {
			flex-direction: column;
			align-items: center;
		}

		.contents-title {
			font-size: 2.0rem;
		}

		.contents-subtext {
			font-size: 1.2rem;
		}

		.reference-img-container {
			width: 116px;
			height: 240px;
		}

		.phase-wrapper {
			flex-direction: column;
		}

		.phase-fees {
			align-self: flex-end;
		}

		.phase3-fees {
			justify-content: flex-end;
		}

		.reference-note {
			text-align: left;
		}
	}

	.comparison {
		padding: 16px;

		.comparison-content {
			padding: 8px;
		}

		.comparison-table-summary-container {
			padding-left: 0;
			padding-right: 0;
		}

		.comparison-table-summary-container .nib {
			margin-left: 40%;
		}

		.comparison-chart-content {
			flex-direction: column-reverse;
		}

		.btn-download {
			font-size: 1.6rem;
			height: initial;
		}

		.btn-text {
			font-size: 1.4rem;
		}
	}

	.forte-wrapper {
		padding-left: 16px;
		padding-right: 16px;

		.forte-container {
			flex-direction: column;
		}
	}

	.support {
		padding-left: 16px;
		padding-right: 16px;
		.support-group {
			flex-direction: column;
			align-items: center;
		}
	}

	.question {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 40px;

		.section-title {
			font-size: 2.4rem;
		}

		.accordion summary {
			padding: 1rem 0;
		}

		.accordion p {
			font-size: 1.4rem;
			padding: 4px 0 8px;
		}
	}

	.footer {

		.footer-logo {
			width: 160px;
		}

		.btn-contact {
			padding: 8px 24px;
			font-size: 1.4rem;
		}
	}
}