@charset "utf-8";

.about .contentBorderBox h3 {
	color: #ba6e86;
	font-size: 3.2rem;
	text-align: center;
}
.about .contentBorderBox h3 + p {
	margin-top: 5.2rem;
	font-size: 1.2rem;
	color: #000;
}

.flow .content p {
	line-height: 2.0;
	text-align: center;
}

.flow .content ul.steps {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4.8rem;
}
.flow .content ul.steps li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.flow .content ul.steps li p {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 13.6rem;
	height: 28rem;
	background: #ba6e86;
	color: #fff;
	font-size: 2rem;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.flow .content ul.steps li:nth-child(2n) p {
	background: #68233b;
}
.flow .content ul.steps li + li::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.6rem 0 1.6rem 1.6rem;
	border-color: transparent transparent transparent #d8adbb;
	margin: 0 3.2rem;
}
.flow .content .notice {
	color: #ba6e86;
	margin-top: 4.8rem;
}
.flow .content .googleMeet h3 {
	text-align: center;
	margin: 3.2rem 0;
}
.flow .content .googleMeet h3 img {
	width: 22.6rem;
}
.flow .content .googleMeet .stores {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 72.8rem;
	margin: 4.8rem auto 0;
}
.flow .content .googleMeet .stores li img {
	width: 32.4rem;
}

.merit {
	background: #fff;
}
.merit .contentBorderBox ul.list li h3 {
	background: url('../img/step_01.png') right 6rem bottom / 12rem auto no-repeat;
}
.merit .contentBorderBox ul.list li:nth-child(2) h3 {
	background-image: url('../img/step_02.png');
}
.merit .contentBorderBox ul.list li:nth-child(3) h3 {
	background-image: url('../img/step_03.png');
}
.merit .contentBorderBox ul.list li:nth-child(4) h3 {
	background-image: url('../img/step_04.png');
}

.flow2 {
	/*background: #fff url(../img/tile_bg_small.jpg) center top / 100% auto no-repeat;*/
 background-color:#F3EEF2;
 background-image: linear-gradient(#DDD 1px, transparent 0),
                    linear-gradient(90deg, #DDD 1px, transparent 0);
 background-size: 20px 20px; 
}
/*IE11*/
_:-ms-lang(x), .flow2 {
  background: #fff url(../img/tile_bg_small.jpg) center top / 100% auto repeat;
}

.flow2 .steps {
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.flow2 .steps > li {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	width: 33.33%;
	padding: 3.2rem;
	color: #fff;
}
/*IE11*/
_:-ms-lang(x), .flow2 .steps > li {
  display: block;
}
.flow2 .steps > li:nth-child(1) {
	background: #68233B;
}
.flow2 .steps > li:nth-child(2) {
	background: #C88B9E;
}
.flow2 .steps > li:nth-child(3) {
	background: #D3A2B1;
}
.flow2 .steps > li:nth-child(1)::after,
.flow2 .steps > li:nth-child(2)::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -1.6rem;
	margin: auto;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3.2rem 0 3.2rem 1.6rem;
	border-color: transparent transparent transparent #68233B;
	z-index: 5;
}
.flow2 .steps > li:nth-child(2)::after {
	border-color: transparent transparent transparent #C88B9E;
}
.flow2 .steps > li h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.2rem;
	text-align: center;
	line-height: 1.5;
	height: 9.6rem;
	margin-bottom: 3.2rem;
}
.flow2 .steps > li {
	line-height: 2.0;
}
.flow2 .steps > li .appLinks {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	flex-direction: column;
	margin-top: auto;
}
/*IE11*/
_:-ms-lang(x), .flow2 .steps > li .appLinks {
  display: block;
}
.flow2 .steps > li .appLinks li + li {
	margin-top: 5.2rem;
}
.flow2 .steps > li .content {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: auto;
	padding: 3.2rem 0;
}
.flow2 .steps > li .content img {
	height: 12rem;
}

.cloudsign .cloudsignAbout {
	margin-bottom: 6.4rem;
}
.cloudsign .cloudsignAbout p {
	margin-bottom: 4.8rem;
	line-height: 2.0;
	text-align: center;
}
.cloudsign .cloudsignFlow h3 {
	color: #ba6e86;
	font-size: 3.2rem;
	text-align: center;
	margin-bottom: 4.8rem;
}

.cloudsign ul.steps > li + li {
	margin-top: 6.4rem;
	padding-top: 6.4rem;
	border-top: 1px solid #D8ADBB;
}
.cloudsign ul.steps > li .stepTitle {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 3.2rem;
	line-height: 1.5;
}
.cloudsign ul.steps > li .stepTitle::before {
	content: "";
	display: block;
	width: 4.4rem;
	height: 9.2rem;
	background: url('../img/cloudsign_num_1.png') center center / contain no-repeat;
	margin-right: 1.6rem;
}
.cloudsign ul.steps > li:nth-child(2) .stepTitle::before {
	background-image: url('../img/cloudsign_num_2.png');
}
.cloudsign ul.steps > li:nth-child(3) .stepTitle::before {
	background-image: url('../img/cloudsign_num_3.png');
}
.cloudsign ul.steps > li:nth-child(4) .stepTitle::before {
	background-image: url('../img/cloudsign_num_4.png');
}
.cloudsign ul.steps > li:nth-child(5) .stepTitle::before {
	background-image: url('../img/cloudsign_num_5.png');
}
.cloudsign ul.steps > li .content {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 2rem;
	padding-left: 6rem;
}
.cloudsign ul.steps > li .content .text {
	margin-right: 6.4rem;
	line-height: 2.0;
}
.cloudsign ul.steps > li .content .text .strong {
	color: #ba6e86;
}
.cloudsign ul.steps > li .content .img {
	width: 40.4rem;
	flex-shrink: 0;
}
.cloudsign ul.steps > li .content .img img {
	display: none;
	margin: 0 auto;
}
.cloudsign ul.steps > li .content .img img.sp {
	width: 23.4rem;
}

input[name="toggle"] {
	display: none;
}
.labels {
	display: flex;
	justify-content: center;
	align-items: center;
}
.labels label + label {
	margin-left: 6.2rem;
}
.toggleLabel {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 21.6rem;
	height: 21.6rem;
	background: #d8adbb;
	color: #fff;
	border-radius: 21.6rem;
	cursor: pointer;
}
#pcCheck:checked ~ .labels label[for="pcCheck"] .toggleLabel,
#spCheck:checked ~ .labels label[for="spCheck"]  .toggleLabel {
	background: #68233b;
}
#pcCheck:checked ~ .contentBorderBox ul.steps > li .img img.pc {
	display: block;
}
#spCheck:checked ~ .contentBorderBox ul.steps > li .img img.sp {
	display: block;
}

.property {
	background: #fff;
}

@media screen and (max-width: 768px) {
	.about .contentBorderBox h3 {
		font-size: 2.8rem;
	}
	.about .contentBorderBox h3 + p {
		margin-top: 3.2rem;
	}
	.flow .content ul.steps {
		flex-direction: column;
	}
	.flow .content ul.steps li {
		flex-direction: column;
		width: 100%;
	}
	.flow .content ul.steps li + li::before {
		border-width: 1.6rem 1.6rem 0 1.6rem;
    border-color: #d8adbb transparent transparent transparent;
    margin: 3.2rem auto;
	}
	.flow .content ul.steps li p {
		width: 100%;
		height: 8rem;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
	}
	.flow .content .googleMeet .stores {
		width: 100%;
		flex-direction: column;
	}
	.contentBorderBox ul li + li {
		margin-top: 2.4rem;
	}
	.merit .contentBorderBox ul.list li h3 {
		background: url(../img/step_01.png) right bottom / 8rem auto no-repeat;
		font-size: 2.4rem;
	}
	.flow2 .steps {
		flex-direction: column;
	}
	.flow2 .steps > li {
		width: 100%;
	}
	.flow2 .steps > li .appLinks {
		margin-top: 3.2rem;
	}
	.flow2 .steps > li:nth-child(1)::after,
	.flow2 .steps > li:nth-child(2)::after {
		top: 99.9%;
		bottom: auto;
		left: 0;
		right: 0;
		border-width: 1.6rem 3.2rem 0 3.2rem;
    border-color: #68233B transparent transparent transparent;
	}
	.flow2 .steps > li:nth-child(2)::after {
    border-color: #C88B9E transparent transparent transparent;
	}
	.contentBorderBox ul.list li .text {
		width: 100%;
	}
	.cloudsign .cloudsignFlow h3 {
		font-size: 2.4rem;
		line-height: 1.5;
	}
	.cloudsign ul.steps > li .stepTitle {
		font-size: 2.4rem;
	}
	.cloudsign ul.steps > li .stepTitle::before {
		width: 2.2rem;
		height: 4.6rem;
		margin-bottom: 1.6rem;
	}
	.cloudsign ul.steps > li .stepTitle {
		flex-direction: column;
	}
	.cloudsign ul.steps > li .content {
		flex-direction: column;
		padding: 0;
	}
	.cloudsign ul.steps > li .content .text {
		width: 100%;
		margin: 0 0 3.2rem;
	}
	.cloudsign ul.steps > li .content .img {
		width: 100%
	}

	.toggleLabel {
		width: 15rem;
		height: 15rem;
		border-radius: 15rem;
	}
	.labels label + label {
		margin-left: 2.4rem;
	}
}