@charset "utf-8";
/* CSS Document */

@import url("https://use.typekit.net/tvl7sxp.css");

:root {
  --main-color: #000000;
  --sub-color1: #BC9C76;
}

ul,ol {
	list-style: none;
	padding: 0;
}

p,dl,dd {
	margin: auto;
}


.flex_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sp_only {
	display: none;
}

#replex_page {
	/*font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";*/
	text-align: center;
	font-size: 14px;
	letter-spacing: normal;
}

#replex_page .w1000 {
	max-width: 1000px;
	margin: 0 auto;
}

#replex_page .w90 {
	width: 90%;
	margin: 0 auto;
}

#replex_page img {
	max-width: 100%;
}

#replex_page h2 {
	/*font-size: 85%;
	font-weight: normal;*/
	margin-bottom: 1.0em;
}

#replex_page h2 span {
	display: block;
	font-size: 20px;
}

#replex_page #intro {
	background: #000000;
	color: #FFFFFF;
	padding: 15.0em 0;
}

#replex_page #intro #box_1 p {
	color: var(--sub-color1);
	margin: 3.0em auto 2.0em;
	font-size: 24px;
}

#replex_page #intro #example {
	margin-top: 5.0em;
}

#replex_page #intro #example .ex_p {
	font-size: 24px;
}

#replex_page #intro #example h3 {
	color: var(--sub-color1);
	border: 1px solid;
	border-radius: 35px;
	display: inline-block;
	padding: 0.2em 2.0em;
	/*font-size: clamp(1.0rem, 0.6rem + 1.85vw, 1.5rem);*/
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 1.5em;
}

#replex_page #intro #example ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#replex_page #intro #example ul li {
	width: 23%;
}

#replex_page #intro #example .menu_ul li {
	width: 48%;
}

#replex_page #intro #example .box {
	margin-top: 6.0em;
}

#replex_page #intro #example ul .box_p {
  background-color: #EE6390;
  color: #fff;
  border-radius: 8px;
  margin-top: 1.5em;
  height: 4.0em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 95%;
  flex-wrap: wrap;
}

#replex_page #intro #example ul .box_p p {
  margin: 0;
  padding: 0 10px;
  line-height: 1.4;
  text-align: center;
  /*font-weight: bold;*/
}

#replex_page #intro #example .menu_ul .box_p {
	width: 48%;
	margin: 1.5em auto auto;
}

#replex_page #item_box {
	padding: 5.0em 0;
}

#replex_page #item_box h3 {
	font-weight: normal;
	background: #000000;
	color: #FFFFFF;
	font-size: 18px;
	padding: 0.2em 0;
	margin-bottom: 2.0em;
}

#replex_page #item_box .box {
	margin-bottom: 5.0em;
}

#replex_page #item_box .dl_1 dt {
	color: #6892B8;
	font-size: 24px;
}

#replex_page #item_box .dl_1 dd {
	margin: 2.0em auto 5.0em;
}



#replex_page #item_box .flex_box2 {
	align-items: flex-start;
	text-align: left;
}

#replex_page #item_box .flex_box2 .box_1 {
	width: 27%;
}

#replex_page #item_box .flex_box2 .box_1 img {
	width: 100%;
}

#replex_page #item_box .flex_box2 .box_2 {
	width: 70%;
}

#replex_page #item_box .dl_2 dt {
	font-size: 110%;
}

#replex_page #item_box .dl_2 dd {
	margin: 1.0em auto 2.0em;
}

#replex_page #item_box .dl_2 dd:last-child {
	margin-bottom: 1.0em;
}

#replex_page #item_box .box_3 {
	/*font-size: 67%;*/
	align-items: flex-end;
}

#replex_page #item_box table {
	font-size: 90%;
	margin-top: 3.0em;
	border-spacing: unset;
}

#replex_page #item_box table td {
	padding: 1.0em;
	border: solid 1px #FFFFFF;
	background: #EEEEEE;
	vertical-align: middle;
	text-align: left;
}

#replex_page #item_box table .title {
	background: #EDE5D0;
	text-align: center;
}

#replex_page #item_box .box_3_1 {
	width: 55%;
}

#replex_page #item_box .box_3_2 {
	width: 32%;
	text-align: center;
}

#replex_page #item_box .box_3_3 {
	background: #6892B8;
	height: auto;
	width: 12%;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	color: #FFFFFF;
	font-size: 85%;
	position: relative;
}

#replex_page #item_box .box_3_3 p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	text-align: center;
	letter-spacing: 0;
}

#replex_page #howtouse h3 {
	background: #000000;
	color: #FFFFFF;
	padding: 0.2em 0;
	margin-bottom: 2.0em;
	font-family: "oswald", sans-serif;
font-weight: 500;
font-style: normal;
	font-size: 24px;
	letter-spacing: 0.1em;
}


/* 縦線の基本設定 */
#replex_page #howtouse .step-list li {
  position: relative; /* 線の基準点 */
}

/* 縦線を描画（最後以外） */
#replex_page #howtouse .step-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.5em;      /* 数字ボックスの下からスタート */
  left: 1.2em;     /* 数字ボックス（40px）の中央 */
  bottom: -30px;  /* 次の要素との余白分まで伸ばす */
  width: 1px;
  background-color: #707070;
  z-index: -1;
}


#replex_page #howtouse .step-item {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

#replex_page #howtouse .step-header {
  display: flex;
  align-items: stretch;
}

#replex_page #howtouse .step-num {
  background-color: #000;
  color: #fff;
  width: 7%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
font-family: "oswald", sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 18px;
}

#replex_page #howtouse .step-title {
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /*font-size: 65%;*/
	font-weight: normal;
	padding: 0.2em;
}

#replex_page #howtouse .step-content {
  padding: 20px 0 10px 13%;
}

#replex_page #howtouse .step-content p {
  margin: 0;
  line-height: 1.6;
	text-align: left;
	/*font-size: 60%;*/
}

#replex_page #howtouse .step-green .step-title { background-color: #D7E9D3; }
#replex_page #howtouse .step-pink .step-title  { background-color: #FBD4E6; }
#replex_page #howtouse .step-gray .step-title  { background-color: #EEEEEE; }
#replex_page #howtouse .step-orange .step-title { background-color: #F9DCCE; }
#replex_page #howtouse .step-g_p .step-title { background: linear-gradient(
    175deg, 
    #FBD4E6 0%, 
    #FBD4E6 50%, 
    #D7E9D3 50%, 
    #D7E9D3 100%
  ); }
#replex_page #howtouse .step-p_g .step-title { background: linear-gradient(
    175deg, 
    #D7E9D3 0%, 
    #D7E9D3 50%, 
    #FBD4E6 50%, 
    #FBD4E6 100%
  ); }

#replex_page #howtouse .htu_box {
	flex-wrap: wrap;
	align-items: flex-start;
}

#replex_page #howtouse .htu_box .box {
	width: 48%;
	margin-bottom: 3.0em;
}

#replex_page #howtouse .htu_box .box dt {
	color: #6892B8;
	font-size: 20px;
	margin-bottom: 1.5em;
}

#replex_page #howtouse .step-title span {
	font-size: 80%;
	vertical-align: text-top;
}

#replex_page #howtouse .step-content span {
	font-size: 90%;
	display: block;
	margin-top: 1.5em;
}


@media only screen and (max-width: 798px) {
	#replex_page #intro #example ul li {
	width: 48%;
		margin-bottom: 2.0em;
}
	#replex_page #intro #example ul li img {
		width: 100%;
	}
	#replex_page #intro #example .menu_ul .box_p {
    width: 100%;
}
}


@media only screen and (max-width: 480px) {
	.sp_only {
		display: block;
	}
	.pc_only {
		display: none;
	}
	
	#replex_page .logo_img {
		width: 70%;
	}
	
	#replex_page #intro {
		padding: 8.0em 0 4.0em;
	}
	#replex_page #intro #example ul .box_p {
    border-radius: 3px;
		font-size: 80%;
}
	#replex_page #item_box .dl_1 dd {
    text-align: left;
	margin: 2.0em auto 3.0em;
}
	#replex_page #item_box .flex_box2 {
    flex-direction: column;
}
	#replex_page #item_box .flex_box2 .box_1,#replex_page #item_box .flex_box2 .box_2 {
    width: 100%;
}
	#replex_page #howtouse .htu_box .box {
    width: 100%;
}
	#replex_page #item_box dd {
    font-size: 100%;	
}
	#replex_page #intro #box_1 p {    
	margin: 3.0em auto;
	font-size: 14px;
		letter-spacing: -1.1px;
}
	#replex_page #intro #example {
    margin-top: 4.0em;
}
	#replex_page #item_box .dl_1 dt {
    font-size: 120%;
}
	#replex_page #item_box .dl_2 dt {
    font-size: 100%;	
	/*font-weight: 600;*/
}
	#replex_page #item_box .flex_box2 .box_1 {
    margin-bottom: 2.0em;
}
	#replex_page #item_box .box_3_2 {
    width: 18%;
}
	#replex_page #howtouse .htu_box .box dt {
    font-size: 100%;
}
	#replex_page #item_box table {
    font-size: 70%;
}
	#replex_page #howtouse .step-title {
  font-size: 95%;
}
#replex_page #howtouse .step-content p {
    font-size: 95%;
}
	#replex_page #intro #example .ex_p {
	font-size: 14px;
}
	#replex_page #intro #example h3 {
    font-size: 14px;
}
	#replex_page #intro #example .box {
    margin-top: 3.0em;
}
	#replex_page #item_box h3 {
    font-size: 15px;
}
	#replex_page #item_box .box_3_1 {
    width: 65%;
    font-size: 10px;
}
	#replex_page #item_box .box_3_3 {
    width: 15%;
    font-size: 8px;
}
	#replex_page #howtouse h3 {
    font-size: 18px;
}
	#replex_page #howtouse .step-num {
    width: 10%;
}
	#replex_page #howtouse .step-title span {
	font-size: 60%;
}
	
}