@charset "UTF-8";
.circle{
   width:200px;
   height:200px;
   border-radius:50%;
   background:palegreen;

   /*display:flexで中央配置*/
   display:flex;
   align-items:center;
   justify-content:center;
}


.dli-chevron-down {
  display: inline-block;
  vertical-align: middle;
  color: palegreen;
  line-height: 3;
  width: 2em;
  height: 2em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}



dialog {
	padding: 1.5rem;
	border: none;
	border-radius: 0.5rem;
	text-align: center;
}
button {
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	cursor: pointer;
}

.stepbar {
  margin: 0 auto;
  width: 80%;
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 3em;
  height: 3em;
  content: "";
  border-radius: 50%;
  background-color: #f5a4e9;
  color: #fff;
  text-align: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
  display: inline-block;
  line-height: 1.2em;
  font-size: 0.8em;
  font-weight: bold;
  position: relative;
  top: 0.9em;
}

.stepbar .stepbarwrap .steptitle .title {
  margin: 0.5em;
  font-weight: bold;
  font-size: 1.2em;
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 3.5em;
}

.stepbar .stepbarwrap .steptxt .txt {
  font-size: 0.9em;
}

.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% + 1em);
  background-color: #f5a4e9;
  position: absolute;
  top: 1em;
  left: 1.5em;
  z-index: -1;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}

@media screen and (max-width: 960px) {
  .stepbar {
    width: 90%;
  }
}

.border_btn01 {
  display: inline-block;
  width: 100%;
  max-width: 200px; /* ボタン幅 */
  max-width: 200px; /* ボタン幅 */
  border: 2px solid #4D9BC1; /* 線幅・種類・色 */
  background: #fff; /* 背景色 */
  padding: 1em 2em;
  font-weight: bold; /* 文字の太さ */
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
}

/* マウスオーバーした際のデザイン */
.border_btn01:hover {
  color: #fff; /* 文字色 */
  background: #4D9BC1; /* 背景色 */
}

.border_btn02 {
  display: inline-block;
  color: #ffa500; /* 文字色 */
  width: 100%;
  max-width: 200px; /* ボタン幅 */
  max-width: 200px; /* ボタン幅 */
  border: 2px solid #ffa500; /* 線幅・種類・色 */
  background: #fff; /* 背景色 */
  padding: 1em 2em;
  font-weight: bold; /* 文字の太さ */
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
}

/* マウスオーバーした際のデザイン */
.border_btn02:hover {
  color: #fff; /* 文字色 */
  background: #ffa500; /* 背景色 */
  }
  
  .border_btn03 {
  display: inline-block;
  color: #000000; /* 文字色 */
  width: 100%;
  max-width: 200px; /* ボタン幅 */
  max-width: 200px; /* ボタン幅 */
  border: 2px solid #add8e6; /* 線幅・種類・色 */
  background: #fff; /* 背景色 */
  padding: 1em 2em;
  font-weight: bold; /* 文字の太さ */
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
}

/* マウスオーバーした際のデザイン */
.border_btn03:hover {
  color: #fff; /* 文字色 */
  background: #add8e6; /* 背景色 */
  }