@charset "UTF-8";



/* ----------------------------------------------- CSS Information

 Style Info:    入会案内

 Notes:          

--------------------------------------------------------------- */

.content {

	width: 60%;

	max-width: 950px;

	margin: 0 auto 5%;

}

.sec-top {

	margin: -10% 0 0;

	padding: 10% 0 0;

	background: #ffe6e6;

}

.sec-top .content {

	position: relative;

}

.sec-top h1.title {

	font-size: 2.3em;

	position: absolute;

	right: 5%;

	top: 15%;

	font-weight: normal;

	letter-spacing: 0.1em;

	text-indent: 0.1em;

}

.sec-top .image {

	width: 70%;

	padding: 10% 0;

}

.sec-top .txt {

	width: 45%;

	position: absolute;

	top: 55%;

	right: -5%;

	text-align: justify;

	z-index: 1;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

.sec-top .circle {

	width: 24vw;

	max-width: 380px;

	height: 24vw;

	max-height: 380px;

	position: absolute;

	top: 43%;

	right: 0;

	border-radius: 500px;

	background: #fff;

	z-index: 0;

}

.color01 {

	color: #fb5ba0;

}

h2.title {

	font-weight: normal;

}

section.sec01 h2.title {

	text-align: center;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

section.sec01 .date {

	margin: 0 auto 2%;

	text-align: center;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

section.sec01 .chart-wrap {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}

section.sec01 .chart {

	width: 100%;

	margin-bottom: 2%;

	padding: 2%;

	box-sizing: border-box;

	border: 1px solid #fb5ba0;

}

section.sec01 .chart:first-child {

	width: 49%;

}

section.sec01 .chart:nth-child(2) {

	width: 49%;

}

h2.headline {

	margin: 0 auto 2%;

	text-align: center;

	font-weight: normal;

	font-family: "メイリオ", Meiryo, sans-serif;

}

.member-area {

	width: 60%;

	margin: 5% auto 0;

}

.member-wrap {

	display: flex;

	justify-content: space-between;

}

.member-wrap .type {

	width: 40%;

}

.member-wrap .member {

	width: 60%;

	text-align: right;

}

.gender-wrap {

	display: flex;

	justify-content: space-around;

	align-items: center;

}

.gender-wrap .male {

	width: 17%;

	text-align: center;

}

.gender-wrap .female {

	width: 17%;

	text-align: center;

}

.gender-chart {

	width: 50%;

}

.chart .image {

	width: 90%;

	margin: 0 auto;

}

section.sec02 {

	padding: 5% 0;

	background: #ffe6e6;

    font-size: 1em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

section.sec02 h2.title {

	margin: 0 0 -3%;

	position: relative;

	z-index: 1;

}

.benefit-wrap {

	margin: 0 auto 2%;

	display: flex;

	justify-content: space-between;

}

.benefit-wrap .benefit {

	width: 18vw;

	max-width: 277px;

	height: 18vw;

	max-height: 277px;

	position: relative;

	text-align: center;

	background: #fff;

	border-radius: 500px;

}

.benefit .txt {

	width: 100%;

	position: absolute;

	top: 50%;

  left: 50%;

  transform: translateY(-50%) translateX(-50%);

  -webkit- transform: translateY(-50%) translateX(-50%);

  font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

.benefit-wrap .benefit .color01 {

	font-size: 1em;

}

.etc-wrap {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.etc-wrap .etc {

	white-space: 80%;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

.etc-wrap .newsletter {

	width: 15%;

	line-height: 0;

}

section.sec03 {

	padding: 5% 0;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

section.sec03 h2.title {

	margin: 0 0 3%;

	position: relative;

	z-index: 1;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

section.sec03 .btn {

	margin: 5% 0 10%;

  display: table;

}

section.sec03 .btn a {

	padding: 0.5em 2em;

  display: block;

  font-size: 1.2em;

  font-weight: bold;

  color: #fb5ba0;

  border: 3px solid #fb5ba0;

  background: #fff;

  border-radius: 100px;

}

section.sec03 .btn a:hover {

	display: block;

	color: #fff;

	background: #fb5ba0;

	opacity: 1;

}

section.sec03 .txt {

	margin: 0 0 3%;

}

.flow-wrap {

	display: flex;

}

.flow-wrap .number {

	width: 10%;

	position: relative;

	font-size: 1.2em;

}

.flow-wrap .border {

	padding: 0 0 10%;

}

.flow-wrap .border::before {

	content: '';

	width: 1px;

	height: 100%;

	position: absolute;

	left: 0.4em;

	font-size: 1.2em;

	background-color: #fb5ba0;

	z-index: -1;

}

.flow-wrap .flow01 {

	width: 70%;

}

.flow-wrap .flow02 {

	width: 20%;

}

.flow-wrap .flow03 {

	width: 90%;

}

section.sec03 h3.headline {

	margin: 0 auto 3%;

	line-height: 1.5;

}

.document01 {

	width: 60%;

	margin: 0 auto;

	padding: 0 0 10%;

}

.document02 {

	width: 90%;

	margin: 0 auto;

	padding: 0 0 10%;

}

svg {

  display: inline-block;

  width: 50%;

  height: auto;

  overflow: visible;

}

.foreground {

  fill: #505050;

}

.background {

  stroke: #fff;

  stroke-width: 8;

  stroke-linejoin: round;

}

.sec04 {

	padding: 5% 0;

	background: #ffe6e6;

    font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

section.sec04 h3.title {

	margin: 0 0 3% 5%;

	font-weight: normal;

}



section.sec04 h3.title2 {

	margin: 0 0 10% 5%;

	font-weight: normal;

}



section.sec04 h3.title2 a{

text-decoration: underline;

}



section.sec04 .txt {

	margin: 0 0 10% 5%;

}



section.sec04 .txt2 {

	margin: 0 0 3% 5%;

}



section.sec04 .txt3 {

	margin: 0 0 3% 0;

}



.ul-pink{

text-decoration: underline;

text-decoration-color:#fb5ba0;

}



.procedure-wrap {

	margin: 0 auto 5%;

	display: table;

	align-items: center;

	border: 0.2em solid #fb5ba0;

	border-radius: 2em;

	overflow: hidden;

}



.procedure-wrap2 {

width:100%;

background-color: #fff;

	margin: 0 auto 10%;

	display: table;

	align-items: center;

	border: 0.2em solid #fb5ba0;

	border-radius: 2em;

	overflow: hidden;

    padding: 3%;

}





.procedure-wrap .icon {

	width: 70%;

	margin: 0 auto;

}

.procedure-wrap .box01 {

	width: 25%;

	padding: 1em;

	box-sizing: border-box;

	display: table-cell;

	vertical-align: middle;

	background: #fb5ba0;

	border-radius: 1.8em 0 0 1.8em;

}

.procedure-wrap .box02 {

	width: 75%;

	padding: 1em;

	box-sizing: border-box;

	display: table-cell;

	vertical-align: middle;

	text-align: center;

	background: #fff;

	border-radius: 0 1.8em 1.8em 0;

}

.procedure-wrap h3.title {

	margin: 0 auto 2% !important;

	display: table;

	font-size: 1.3em;

	line-height: 1.5;

  border-bottom: 1px solid #a0a0a0;

}

.procedure-wrap .tel {

	font-size: 2em;

  letter-spacing: 0.1em;

  text-indent: 0.1em;

}

.procedure-wrap .form {

	font-size: 1.5em;

  letter-spacing: 0.1em;

  text-indent: 0.1em;

}

.procedure-wrap a {

	color: #fb5ba0;

}

section.sec04 .procedure-wrap .txt {

	margin: 0;

}

.sec04 .btn-wrap {

  margin: 0 auto 10%;

  display: flex;

}

.sec04 .btn-wrap .btn {

	margin: 0 1em;

	display: table;

	text-align: center;

}

.sec04 .btn-wrap .btn a {

	padding: 0.5em 2em;

	display: block;

	font-size: 1.2em;

	border: 1px solid #fb5ba0;

	background: #fff;

	border-radius: 100px;

}

.sec04 .btn-wrap .btn a:hover {

	display: block;

	color: #fff;

	background: #fb5ba0;

	opacity: 1;

}

.sec04 h2.title {

  margin: 0 0 5%;

  display: table;

  text-align: center;

  /*font-size: 1.5em;*/

  line-height: 1.5;

 /* font-family: 'A1 Mincho', serif;*/

  font-size: 1.5em;

    color:#000;

    font-family: 'Noto Sans JP', sans-serif;

}

.sec04 h2.headline {

  margin: 0 0 5%;

  display: table;

  text-align: center;

  font-size: 1.3em;

  line-height: 1.5;

  border-bottom: 0.1em solid #fb5ba0;

  font-family: 'A1 Mincho', serif;

}

.sec04 .txt .tr {

	display: flex;

}

.sec04 .txt .th  {

	width: 1em;

}

.sec04 .txt .td  {

}

.sec04 div.headline {

	margin: 0 auto 3%;

}

.sec04 table {

	width: 100%;

	margin: 0 auto 5%;

	border-top: 1px solid #000;

	border-left: 1px solid #000;

	text-align: center;

	border-collapse: collapse;

  border-spacing: 0;

	background: #fff;

}

.sec04 table th {

	width: 40%;

	padding: 1em 0;

  line-height: 1.5;

	border-right: 1px solid #000;

	border-bottom: 1px solid #000;

}

.sec04 table td {

	width: 20%;

	padding: 1em 0;

  line-height: 1.5;

	border-right: 1px solid #000;

	border-bottom: 1px solid #000;

}

.sec04 .btn {

	margin: 0 0 0 auto;

	display: table;

	text-align: center;

}

.sec04 .btn a {

	margin: 0 auto;

	padding: 0.5em 2em;

	display: block;

	font-size: 1.2em;

	border: 1px solid #fb5ba0;

	background: #fff;

	border-radius: 100px;

}

.sec04 .btn a:hover {

	display: block;

	color: #fff;

	background: #fb5ba0;

	opacity: 1;

}



.foot-area01 .link {

    width: 25%;

    font-size: 1.5em;

    color: #000;

}



.foot-area02 .txt {

    color: #000;

    font-size: 1.5em;

}

/* ================= smartphone ================= */

@media only screen and (max-width:699px) {

.content {

  width: 90%;

  display: block;

}

h1.title {

  font-size: 16px;

}

.sec-top .image {

  width: 70%;

	margin: 0 auto;

  padding: 10% 0 5%;

}

.sec-top h1.title {

	margin: 0 auto 5%;

	display: table;

  font-size: 20px;

  position: unset;

}

.sec-top .txt {

  width: 100%;

  margin: 0 auto;

	padding: 1em;

  position: relative;

	border-radius: 20px;

  background: #fff;

}

.sec-top .circle {

  display: none;

}

.sec-top .content {

	padding: 0 0 5%;

}

section.sec01 .chart-wrap {

  display: block;

}

section.sec01 .chart:first-child {

	width: 100%;

}

section.sec01 .chart:nth-child(2) {

	width: 100%;

}

.benefit-wrap {

  display: block;

}

section.sec02 h2.title {

  margin: 0 auto 3%;

}

.benefit-wrap .benefit {

  width: 100%;

  max-width: none;

	height: auto;

	max-height: none;

  margin: 0 0 5%;

  position: relative;

}

.benefit .txt {

  width: 100%;

  position: relative;

	top: 0;

  left: 0%;

	transform: translateY(0%) translateX(0%);

  -webkit- transform: translateY(0%) translateX(0%);

}

.etc-wrap {

	margin: 0 auto 5%;

  display: block;

}

.etc-wrap .newsletter {

  width: 50%;

  margin: 0 auto;

}

.flow-wrap .flow01 {

  width: 70%;

}

.flow-wrap .flow02 {

  width: 30%;

}

svg {

  width: 100%;

}

.sec04 .btn-wrap {

  margin: 0 auto 10%;

  display: block;

  justify-content: center;

}

.sec04 .btn {

  margin: 0 auto 10%;

}

.procedure-wrap {

  display: block;

}

.sec02 .area01 .select-wrap {

  display: block;

}

.procedure-wrap .box01 {

	width: 100%;

	padding: 0.5em;

  display: block;

}

.procedure-wrap .icon {

	width: 20%;

	margin: 0 auto;

}

.procedure-wrap .box02 {

  width: 65%;

  padding: 1em;

}

}