@charset "UTF-8";
@import url("/css/initialize.css");
@import url("/css/general.css");
@import url("/css/parts.css");
@import url("/css/margin.css");

.line section {
	border: 1px solid #ccc;
	padding: 20px;
	margin-bottom: 30px;
}
.line_btn--area {
	padding-bottom: 10px;
}
.marker-yallow {
	background-color: #FFFE04;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-weight: 700;
}
.f-strong {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-weight: 700;
}

/* タイトル */
.line_flow-title {
	font-size: 168.71%;
	background-color: #0f489c;
	color: #fff;
	text-align: center;
	padding: 20px;
	margin-top: 10px;
	margin-bottom: 30px;
}
/* SMARTPHONES SIZE */
@media screen and (max-width: 980px){
	.line_flow-title {
		font-size: 1.2555em;
	}
}
.add_select--area,
.talk--area {
	padding: 20px 0;
	gap: 20px;
}
/* PC SIZE */
@media screen and (min-width: 980px){
	.add_select--area > div,
	.talk--area > div,
	.talk--area div.cap-message {
		width: 50%;
	}
}
.add_select--area span,
.talk--area span {
	font-size: 16px;
	line-height: 1.5;
}
.cap-message p {
	line-height: 1.5 !important;
}
.cap-message .desc {
	list-style-position: outside;
	list-style-type: disc;
	font-size: 16px;
	padding-left: 20px;
	line-height: 1.5;
}
.cap-message .input-deta {
	background-color: #eee;
	padding: 16px;
	margin: 20px 0;
}
.cap-message .input-deta p {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-weight: 700;
	border-bottom: 1px dotted #999;
	margin-bottom: 10px;
	padding-bottom: 5px;
}
.add_select--area h5,
.talk--area h5 {
	font-size: 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-weight: 700;
	padding-bottom: 10px;
	margin-bottom: 16px;
	border-bottom: 2px solid #999;
}
/* SMARTPHONES SIZE */
@media screen and (max-width: 980px){
	.add_select--area h5,
	.talk--area h5 {
		font-size: 16px;
	}
}
.add_select--area .sp_add-btn {
	padding-bottom: 10px;
}
.add_select--area .sp_add-btn a {
	background-color: #00BA00;
	padding: 10px 20px;
	color: #fff;
	font-size: 17px;
	display: inline-block;
}
.add_select--area .cap-qr {
	padding-bottom: 10px;
}
.add_select--area .cap-top img {
	width: 360px;
}
.talk--area .cap-talk img {
	width: 90%;
}
/* SMARTPHONES SIZE */
@media screen and (max-width: 980px){
	.talk--area .cap-talk img {
		padding-bottom: 10px;
	}
}
.step1-add-talk {
	background-color: #eee;
	padding: 20px;
}



/* 選択エリア */
#select-block {
	margin: 30px 0 40px;
}
#select-block img { margin-bottom: 20px; }
.select-btn {
	border: 3px solid #0f489c;
	text-align: center;
}
.select-btn a {
	font-size: 168.71%;
	padding: 40px 10px;
	display: block;
}
.select-btn a:hover {
	background-color: #0f489c;
	color: #fff;
}

/* PC SIZE */
@media screen and (min-width: 980px){
	#select-block li {
		width: 320px;
		margin-left: 10px;
		float: left;
	}
	#select-block li:first-child { margin-left: 0; }
}

/* SMARTPHONES SIZE */
@media screen and (max-width: 980px){
	.select-btn {
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 480px){
	.line_flow-title {
		font-size: 1.1888em;
	}
	#select-block {
		margin: 20px 0 20px;
	}
	.select-btn a {
		font-size: 138.71%;
		padding: 20px 10px;
		line-height: 1.4;
	}
}



.step-area {
    width: 100%;
    font-size: 17px;
}
@media screen and (max-width: 980px){ /* sp size */
    .step-area {
        font-size: 1.0em;
    }
}
.flow {
  width: calc(100% - 0px);                   /* ステップフロー全体の横幅を指定 */
  display: flex;                            /* flexboxで横並びにする */
  justify-content: space-between;           /* 横並びにしたものを等間隔で並べる */
}

.flow li {
  width: calc(100% / 3.02);                 /* 横幅を三等分した1つの大きさに指定 */
  background: #efefef;                      /* 背景色をグレーに指定 */
  line-height: 70px;                        /* 行間(高さの代わり)を指定 */
  text-align: center;                       /* 文字を中央寄せにする */
  font-weight: bold;
  position: relative;                       /* 基準位置とする */
}

.flow li:not(:first-child):not(:last-child) { 
  padding: 0 0 0 20px;                      /* 最初と最後以外には左に適度な余白を指定 */
}

.flow li::before,
.flow li::after {
  content: "";                              /* 疑似要素では必須 */
  width: 0;                                 /* 横幅を0に指定 */
  height: 0;                                /* 高さを0に指定 */
  display: block;                           /* ブロック要素にする */
  position: absolute;                       /* 相対位置に指定 */
}

.flow li::before {
  border: solid 42px transparent;           /* 32pxのborderを指定 */
  border-right: solid 23px transparent;     /* 幅を合わせるため右線は13pxにする */
  border-left: solid 23px #FFF;             /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: -7px;                                /* 重ねる位置(縦軸)を調整 */
  left: 0;                                  /* 重ねる位置(横軸)を調整 */
  z-index: 1;                               /* 重なり順を指定 */
}

.flow li::after {
  border: solid 35px transparent;           /* 25pxのborderを指定 */
  border-left: solid 20px #efefef;          /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 10px transparent;     /* 幅を合わせるために右線は10pxにする */
  top: 0;                                   /* 重ねる位置(縦軸)を調整 */
  right: -30px;                             /* 重ねる位置(横軸)を調整 */
  z-index: 2;                               /* 重なり順の優先度を他よりも上げる */
}

.flow li:first-child::before,
.flow li:last-child::after {
  content: none;                            /* 最初のliの左と最後のliの右は作らない */
}

/* 以下.currentだけ色を変えるCSS */

.flow li.current {
  color: #FFF;
  background: #00BA00;
}
.flow li.current::after {
  border-left: solid 20px #00BA00;
}