@charset "utf-8";

/*********************
* お得な会員登録について
*********************/

/* PC */
@media print,screen and (min-width: 1001px) {
#membership .page_header {
	background-image: url(../images/membership/main.jpg);
}

#membership .s1 {
  margin: 120px 0 110px;
}

#membership .s1 .contents_inner {
  background: url(../images/membership/img01.png) no-repeat right bottom;
  padding-bottom: 70px;
}

#membership .s1 h2 {
  font-size: 4.286em;
  font-weight: 900;
  margin-bottom: 50px;
}

#membership .s1 p {
  font-size: 1.714em;
  font-weight: 900;
}

#membership .s2 {
  padding: 140px 0 80px;
  position: relative;
  z-index: 0;
}

#membership .s2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	width: 96.25vw;
	height: 100%;
	background-color: #fac000;
	border-radius: 20px;
}

#membership .s2 .s2_box .list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-auto-columns: 1fr 1fr;
	grid-auto-rows: 1fr 1fr 1fr;
	gap: 60px 15px;
	grid-auto-flow: row;
	grid-template-areas:
		"item1 item2 item5"
		"item3 item4 item5";
  padding-top: 160px;
}

#membership .s2 .s2_box .list li {
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	padding: 40px;
  position: relative;
}

#membership .s2 .s2_box .list li.item1 { grid-area: item1; }
#membership .s2 .s2_box .list li.item2 {
	grid-area: item2;
	position: relative;
	top: -50px;
}
#membership .s2 .s2_box .list li.item3 {
  grid-area: item3;
  height: 400px;
}
#membership .s2 .s2_box .list li.item4 {
	grid-area: item4;
  height: 400px;
	position: relative;
	top: -50px;
}
#membership .s2 .s2_box .list li.item5 { 
	grid-area: item5;
  height: 800px;
	position: relative;
	top: -100px; 
	padding-top: 100px;
}

#membership .s2 .s2_box .list li > p:first-of-type {
	font-size: 2.571em;
  font-weight: 700;
  line-height: 1.3;
	margin-top: 20px;
}

#membership .s2 .s2_box .list li > p:first-of-type span {
  display: block;
}

#membership .s2 .s2_box .list li > p:last-of-type {
  font-size: 1.286em;
  text-align: left;
}

#membership .s2 .s2_box .list li > .f_en {
  position: absolute;
  top: -35px;
  left: 20px;
  font-size: 5.143em;
  color: #425744;
  line-height: 1;
  letter-spacing: 0;
}

#membership .s2 .s2_box .list li .example_box {
  margin-top: 20px;
  position: relative;
}

#membership .s2 .s2_box .list li .example_box::before {
  content: "例";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  font-size: 1.286em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 30px;
  background-color: #dc000c;
  border-radius: 50%;
}

#membership .s2 .s2_box .list li .example_box > p {
  width: 100%;
  font-size: 1.286em;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 25px 0 10px;
}

#membership .s2 .s2_box .list li .example_box > p > span {
  display: block;
}

#membership .s2 .s2_box .list li .example_box dl {
  width: 49%;
  background-color: #f8f8f8;
  border-radius: 10px;
  padding: 10px;
}

#membership .s2 .s2_box .list li .example_box dl dt {
  font-size: 1.286em;
  font-weight: 700;
  line-height: 1.3;
}

#membership .s2 .s2_box .list li .example_box dl dd {
  font-size: 1.143em;
  text-align: center;
  line-height: 1.3;
}

#membership .s2 .s2_box .list li .example_box dl dd img {
  width: 13px;
  vertical-align: middle;
}

#membership .s2 .s2_box .list li .example_box dl dd span:not([class]) {
  display: block;
  font-size: .923em;
  text-align: left;
  margin-top: 5px;
}

#membership .s3 {
  margin: -130px 0 70px;
  position: relative;
}

#membership .s3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 22.875vw;
  height: 100%;
  background: #f8f8f8;
  border-radius: 0 0 10px 0;
}

#membership .s3_box {
  padding: 300px 0 170px;
  position: relative;
}

#membership .s3_box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5.84%;
  z-index: -1;
  width: 34px;
  height: 100%;
  background: url(../images/membership/bg_step.jpg) repeat-y left top;
}

#membership .s3_box .item + .item {
  margin-top: 70px;
}

#membership .s3_box .item .img {
  width: 53.34%;
}

#membership .s3_box .item .text {
  width: calc(100% - 53.34%);
  padding-left: 5.84%;
}

#membership .s3_box .item .text h3 {
  font-size: 2.143em;
  letter-spacing: .1em;
  margin-bottom: 30px;
}

#membership .s3_box .item .text p {
  font-size: 1.143em;
}

#membership .s3_box .item .text p small {
  font-size: .923em;
}

#membership .s3_box img.img1 {
  position: absolute;
  top: 215px;
  right: 0;
}

#membership .s4 {
  margin-bottom: 180px;
}

#membership .s4 .contents_inner {
  background: url(../images/membership/img11.png) no-repeat right top;
  padding-top: 100px;
}

#membership .s4 .caption {
  margin-bottom: 70px;
}

#membership .s4 .list {
  margin-bottom: 450px;
}

#membership .s4 .list li {
  font-size: 1.286em;
  background: no-repeat left center;
  background-size: 22px auto;
  padding-left: 35px;
}
#membership .s4 .list li.circuit1 {
  background-image: url(../images/membership/icon_map01.png);
}
#membership .s4 .list li.circuit2 {
  background-image: url(../images/membership/icon_map02.png);
}
#membership .s4 .list li.circuit3 {
  background-image: url(../images/membership/icon_map03.png);
}

#membership .s4 .list li + li {
  margin-top: 20px;
}

#membership .s4_box {
  background-color: #f8f8f8;
  border-radius: 20px;
  padding: 4.17% 6.67%;
}

#membership .s4_box + .s4_box {
  margin-top: 50px;
}

#membership .s4_box h3 {
  font-size: 2.143em;
  text-align: center;
  line-height: 1.5;
  letter-spacing: .1em;
  margin-bottom: 50px;
}

#membership .s4_box h3 .f_en {
  display: block;
  font-size: .534em;
  color: #dc000c;
}

#membership .s4_box dl + dl {
  margin-top: 10px;
}

#membership .s4_box dl dt {
  font-size: 1.571em;
  font-weight: 700;
  line-height: 1.3;
  background-color: #fff;
  border-radius: 10px;
  padding: 2.89% calc(3.85% + 12px) 2.89% 3.85%;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

#membership .s4_box dl dt::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 3.85%;
	transform: translateY(-50%);
	display: inline-block;
	width: 12px;
	height: 7px;
	background: url(../images/common/icon_arrow02_grn.png) no-repeat center;
	background-size: contain;
	transition: ease all .5s;
}

#membership .s4_box dl dt.active::before {
	transform: translateY(-50%) rotate(180deg);
}

#membership .s4_box dl dt span {
  font-size: .728em;
  font-weight: 400;
  margin-left: .5em;
}

#membership .s4_box dl dd {
  display: none;
  background-color: #e8ebe8;
  border-radius: 0 0 10px 10px;
  margin-top: -20px;
  padding: calc(2.89% + 20px) 3.85% 2.89%;
  position: relative;
  z-index: 0;
}

#membership .s4_box dl dd > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#membership .s4_box dl dd > div ul li {
  font-size: 1.143em;
  background: no-repeat left center;
  padding-left: 23px;
}

#membership .s4_box dl dd > div ul li.address {
  background-image: url(../images/membership/icon_map04.png);
  background-size: 12px auto;
}

#membership .s4_box dl dd > div ul li.tel {
  background-image: url(../images/membership/icon_tel.png);
  background-size: 13px auto;
}

#membership .s4_box dl dd > div .link .btn2 {
  font-size: 1.143em;
  font-weight: 400;
  letter-spacing: 0;
}

} /* @media print,screen and (min-width: 1001px) */



/* SP */
@media screen and (max-width: 1000px) {
#membership .page_header {
	background-image: url(../images/membership/main_sp.jpg);
}

#membership .s1 {
  margin: 6vw 0 15vw;
}

#membership .s1 .contents_inner {
  background: url(../images/membership/img01.png) no-repeat right 3vw top;
  background-size: 36.5625vw auto;
  padding-top: 7vw;
}

#membership .s1 h2 {
  font-size: 1.846em;
  font-weight: 900;
  margin-bottom: 7vw;
}

#membership .s1 h2 .alert > span {
  display: block;
}

#membership .s1 p {
  font-size: 1.231em;
  font-weight: 900;
}

#membership .s2 {
	position: relative;
	z-index: 0;
	padding: 7vw 0 5vw;
}

#membership .s2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	width: 93.75vw;
	height: 100%;
	background-color: #fac000;
	border-radius: 20px;
}

#membership .s2 .contents_inner {
	padding-left: 7vw;
	padding-right: 7vw;
}

#membership .s2 .s2_box .list {
  margin-top: 10vw;
  padding-top: 15px;
}

#membership .s2 .s2_box .list li {
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	padding: 0 3vw 5vw;
  position: relative;
}

#membership .s2 .s2_box .list li + li {
  margin-top: 5vw;
}

#membership .s2 .s2_box .list li img {
  transform: scale(.6);
}

#membership .s2 .s2_box .list li p:first-of-type {
	font-size: 1.231em;
  font-weight: 700;
  margin-top: -3vw;
}

#membership .s2 .s2_box .list li p:last-of-type {
	font-size: .923em;
  text-align: left;
  margin-top: 1.5vw;
}

#membership .s2 .s2_box .list li > .f_en {
  position: absolute;
  top: -15px;
  left: 3vw;
  font-size: 2.308em;
  color: #425744;
  line-height: 1;
  letter-spacing: 0;
}

#membership .s2 .s2_box .list li .example_box {
  margin-top: 3vw;
  position: relative;
}

#membership .s2 .s2_box .list li .example_box::before {
  content: "例";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  font-size: 1.077em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 30px;
  background-color: #dc000c;
  border-radius: 50%;
}

#membership .s2 .s2_box .list li .example_box > p {
  width: 100%;
  font-size: 1.077em;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 25px 0 1.5vw;
}

#membership .s2 .s2_box .list li .example_box dl {
  width: 49%;
  background-color: #f8f8f8;
  border-radius: 10px;
  padding: 1.5vw;
}

#membership .s2 .s2_box .list li .example_box dl dt {
  font-size: 1.077em;
  font-weight: 700;
  line-height: 1.3;
}

#membership .s2 .s2_box .list li .example_box dl dd {
  text-align: center;
  line-height: 1.3;
}

#membership .s2 .s2_box .list li .example_box dl dd img {
  vertical-align: middle;
}

#membership .s2 .s2_box .list li .example_box dl dd span:not([class]) {
  display: block;
  font-size: .923em;
  text-align: left;
  margin-top: 5px;
}

#membership .s3 {
  margin: -11.875vw 0 13vw;
  position: relative;
}

#membership .s3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 21.25vw;
  height: 100%;
  background: #f8f8f8;
  border-radius: 0 0 10px 0;
}

#membership .s3_box {
  padding: 25vw 0 13vw;
  position: relative;
}

#membership .s3_box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7.5vw;
  z-index: -1;
  width: 5.3125vw;
  height: 100%;
  background: url(../images/membership/bg_step.jpg) repeat-y left top;
  background-size: contain;
}

#membership .s3_box .item {
  width: 80.625vw;
  margin: 0 auto;
}

#membership .s3_box .item + .item {
  margin-top: 10vw;
}

#membership .s3_box .item .img {
  width: 100%;
}

#membership .s3_box .item .text {
  width: 100%;
  padding: 5vw 0 0 14.375vw;
}

#membership .s3_box .item .text h3 {
  font-size: 1.385em;
  line-height: 1.3;
  letter-spacing: .1em;
  margin-bottom: 3vw;
}

#membership .s3_box .item .text h3 span {
  display: block;
}

#membership .s3_box .item .text p small {
  font-size: .923em;
}

#membership .s4 {
  margin-bottom: 15vw;
}

#membership .s4 .contents_inner {
  background: url(../images/membership/img11.png) no-repeat center 15vw;
  background-size: 94.0625vw auto;
  padding: 0;
}

#membership .s4 .caption {
  margin-bottom: 7vw;
  padding-left: 10.9375vw;
}

#membership .s4 .caption span {
  display: block;
}

#membership .s4 .list {
  margin-bottom: 55vw;
  padding-left: 10.9375vw;
}

#membership .s4 .list li {
  font-size: 1.077em;
  background: no-repeat left center;
  background-size: 4.6875vw auto;
  padding-left: 7vw;
}
#membership .s4 .list li.circuit1 {
  background-image: url(../images/membership/icon_map01.png);
}
#membership .s4 .list li.circuit2 {
  background-image: url(../images/membership/icon_map02.png);
}
#membership .s4 .list li.circuit3 {
  background-image: url(../images/membership/icon_map03.png);
}

#membership .s4 .list li + li {
  margin-top: 1.5vw;
}

#membership .s4_box {
  background-color: #f8f8f8;
  border-radius: 20px;
  padding: 7vw 3vw;
}

#membership .s4_box + .s4_box {
  margin-top: 7vw;
}

#membership .s4_box h3 {
  font-size: 1.538em;
  text-align: center;
  line-height: 1.5;
  letter-spacing: .1em;
  margin-bottom: 7vw;
}

#membership .s4_box h3 .f_en {
  display: block;
  font-size: .65em;
  color: #dc000c;
}

#membership .s4_box dl + dl {
  margin-top: 2vw;
}

#membership .s4_box dl dt {
  font-size: 1.154em;
  font-weight: 700;
  line-height: 1.3;
  background-color: #fff;
  border-radius: 10px;
  padding: 2.89% calc(3.85% + 12px) 2.89% 3.85%;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

#membership .s4_box dl dt::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 3.85%;
	transform: translateY(-50%);
	display: inline-block;
	width: 12px;
	height: 7px;
	background: url(../images/common/icon_arrow02_grn.png) no-repeat center;
	background-size: contain;
	transition: ease all .5s;
}

#membership .s4_box dl dt.active::before {
	transform: translateY(-50%) rotate(180deg);
}

#membership .s4_box dl dt span {
  font-size: .8em;
  font-weight: 400;
  margin-left: .5em;
}

#membership .s4_box dl dd {
  display: none;
  background-color: #e8ebe8;
  border-radius: 0 0 10px 10px;
  margin-top: -5vw;
  padding: calc(2.89% + 5vw) 3.85% 2.89%;
  position: relative;
  z-index: 0;
}

#membership .s4_box dl dd > div ul li {
  min-height: 5.5vw;
  line-height: 1.3;
  background: no-repeat left center;
  padding-left: 6.5vw;
}

#membership .s4_box dl dd > div ul li + li {
  margin-top: 2vw;
}

#membership .s4_box dl dd > div ul li.address {
  background-image: url(../images/membership/icon_map04.png);
  background-size: 4.375vw auto;
}

#membership .s4_box dl dd > div ul li.tel {
  background-image: url(../images/membership/icon_tel.png);
  background-size: 4.6875vw auto;
}

#membership .s4_box dl dd > div .link {
  margin-top: 1vw;
}

#membership .s4_box dl dd > div .link .btn2 {
  font-weight: 400;
  letter-spacing: 0;
}

} /* @media screen and (max-width: 1000px) */