@charset "UTF-8";
body, html {
  margin: 0;
  padding: 0;
}
body {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #FFFDED;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.image-vw-logo {
  width: 10%;
  margin-top: 3%;
  margin-left: 3%;
}

.banner_green_pc{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
	top: 25%;
	right: 0%;
	height: 18vh;
	width: 3vw;
}

.banner_red_pc{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
	top: 45%;
	right: 0%;
	width: 3vw;
}

.banner_yellow_pc{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
	top: 65%;
	right: 0%;
	width: 3vw;
}
/*========プラン選択=======*/
.fixed_banner {
position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
top: 78%; /* 上から150pxのところにバナーを配置します */
right: 1%; /* 右から40pxのところにバナーを配置します */
}

.fixed_banner_pc {
width: 10vw; /* バナーの横幅を指定してあげます */
}

.back{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
top: 82%; /* 上から150pxのところにバナーを配置します */
left: 1%; /* 右から40pxのところにバナーを配置します */
}

.backbtn{
	width: 5vw;
}

.image-title01 {
  width: 25%;
  margin-left: 36%;
  margin-top: 3%;
}
.plan {
  position: relative;
  margin-top: 3%;
}

.sp-waku{
	display: none;
}
.waku {
  position: absolute;
  width: 80%;
  margin-left: 10%;
  z-index: -1;
}
.radio {
  position: relative;
  z-index: 4;
}
.A {
  position: absolute;
  width: 20%;
  margin-top: 7%;
  margin-left: 15%;
  z-index: 4;
}
.A:hover {
  top: -10px;
  transition: 0.5s;
}
.B {
  position: absolute;
  width: 22%;
  margin-top: 7%;
  margin-left: 38%;
  z-index: 4;
}
.B:hover {
  top: -10px;
  transition: 0.5s;
}
.C {
  position: absolute;
  width: 21.3%;
  margin-top: 7%;
  margin-left: 63%;
  z-index: 4;
}
.C:hover {
  top: -10px;
  transition: 0.5s;
}
/*---------チェックボックス--------*/

.sp-opwaku{
	display: none;
}
.option {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #48483A;
  position: relative;
  margin-top: 90vh;
  margin-left: 20vw;
  padding-top: 11vw;
  font-size: 1.5vmax;
  line-height: 1.2vw;
}
.opwaku {
  position: absolute;
  width: 75vw;
  margin-left: 13vw;
  z-index: -1;
}
input[type=checkbox] {
  transform: scale(2);
  margin: 0 6px 0 0;
}
.check {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0.2vh 8vw;
  line-height: 3.45vw;
  position: relative;
  width: auto;
  color: #48483A;
}
.check::before {
  background: transparent;
  border: 1px solid #48483A/*#231815*/;
  content: '';
  display: block;
  height: 1.2vw;
  width: 1.2vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  position: absolute;
  top: 50%;
}
.check::after {
  border-right: 3px solid #ed7a9c;
  border-bottom: 3px solid #ed7a9c;
  content: '';
  display: block;
  height: 0.9vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 1vw;
}
input[type=checkbox]:checked + .check::after {
  opacity: 1;
}
.calc .pricewaku img, .result {
  display: inline-block;
  vertical-align: top;
}
.pricewaku img {
  width: 80vw;
  margin-top: 12%;
  margin-left: 10%;
}
.result {
  margin-top: -13vw;
  margin-left: 13vw;
  margin-bottom: 5vh;
  text-align: center;
  font-size: 5vw;
}
.btn {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  width: 10%;
  height: 7%;
  background: #AFD7FF;
  border-radius: 30px;
  margin-left: 45.5%;
  font-size: 1.5vw;
  color: #48483A;
}

.sp-opwaku02{
	display: none;
}
.option02 {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #48483A;
  position: relative;
  margin-top: 6vmax;
  margin-left: 20vw;
  padding-top: 5vw;
  font-size: 1.5vmax;
}
.opwaku02 {
  position: absolute;
  width: 75vw;
  margin-left: 13vw;
  z-index: -1;
}
input[type=checkbox] {
  display: none;
}
.check02 {
 box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0.2vh 8vw;
  line-height: 3.6vw;
  position: relative;
  width: auto;
  color: #48483A;
}
.check02::before {
  background: transparent;
  border: 1px solid #48483A;
  content: '';
  display: block;
  height: 1.2vw;
  width: 1.2vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  position: absolute;
  top: 50%;
}
.check02::after {
  border-right: 3px solid #ed7a9c;
  border-bottom: 3px solid #ed7a9c;
  content: '';
  display: block;
   height: 0.9vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 1vw;
}
input[type=checkbox]:checked + .check02::after {
  opacity: 1;
}
.calc02 .pricewaku02 img, .result02 {
  display: inline-block;
  vertical-align: top;
}
.pricewaku02 img {
  width: 80vw;
  margin-top: 20%;
  margin-left: 10%;
}


.button {
  width: 35%;
  margin-left: 31%;
  margin-bottom: 20vh;
}
/*===========フッター============*/
/* copyright */
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #48483A;
  text-align: center;
  background: #FFEB3E;
}

.footer-copyright a {
  text-decoration: none;
  color: #48483A;
}


@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
	.image-vw-logo {
  width: 20%;
  margin-top: 3%;
  margin-left: 3%;
}
	
.banner_green_pc{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
	top: 15%;
	right: 0%;
	height: 18vh;
	width: 7vw;
}

.banner_red_pc{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
	top: 35%;
	right: 0%;
	width: 7vw;
}

.banner_yellow_pc{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
	top: 55%;
	right: 0%;
	width: 7vw;
}

	.fixed_banner {
position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
top: 82%; /* 上から150pxのところにバナーを配置します */
right: 1%; /* 右から40pxのところにバナーを配置します */
}

.fixed_banner_pc {
width: 15vw; /* バナーの横幅を指定してあげます */
}

.back{
	position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
top: 82%; /* 上から150pxのところにバナーを配置します */
left: 1%; /* 右から40pxのところにバナーを配置します */
}

.backbtn{
	width: 10vw;
}

	
	.waku{
		display: none;
	}
	
	.image-title01 {
  width: 50%;
  margin-left: 25%;
  margin-top: 3%;
}
.plan {
  position: relative;
  margin-top: 3%;
}
.sp-waku{
		display: block;
		width: 60vw;
		margin-left: 20vw;
	position: absolute;
	z-index: -1;
	}

.radio {
  position: relative;
  z-index: 4;
}
.A {
  position: absolute;
  width: 50%;
  margin-top: 15%;
  margin-left: 25%;
  z-index: 4;
}
.A:hover {
  top: -10px;
  transition: 0.5s;
}
.B {
  position: absolute;
  width: 50%;
  margin-top: 50%;
  margin-left: 25%;
  z-index: 4;
}
.B:hover {
  top: -10px;
  transition: 0.5s;
}
.C {
  position: absolute;
  width: 50%;
  margin-top: 82%;
  margin-left: 25%;
  z-index: 4;
}
.C:hover {
  top: -10px;
  transition: 0.5s;
}
	
	/*---------チェックボックス--------*/
	.pc-opwaku{
		display: none;
	}	
	.sp-opwaku{
		display: block;
	}
.option {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #48483A;
  position: relative;
  margin-top: 90vh;
  margin-left: 20vw;
  padding-top: 17vw;
  font-size: 1.7vmax;
  line-height: 1.5vw;
}
.opwaku {
  position: absolute;
  width: 75vw;
  margin-left: 13vw;
  z-index: -1;
}
input[type=checkbox] {
  transform: scale(2);
  margin: 0 6px 0 0;
}
.check {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0.2vh 8vw;
  line-height: 7.8vw;
  position: relative;
  width: auto;
  color: #48483A;
}
.check::before {
  background: transparent;
  border: 1px solid #48483A/*#231815*/;
  content: '';
  display: block;
  height: 2vw;
  width: 2vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  position: absolute;
  top: 50%;
}
.check::after {
  border-right: 3px solid #ed7a9c;
  border-bottom: 3px solid #ed7a9c;
  content: '';
  display: block;
  height: 2vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 1.5vw;
}
input[type=checkbox]:checked + .check::after {
  opacity: 1;
}
.calc .pricewaku img, .result {
  display: inline-block;
  vertical-align: top;
}
.pricewaku img {
  width: 80vw;
  margin-top: 12%;
  margin-left: 10%;
}
.result {
font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top: -13vw;
  margin-left: -50vw;
  margin-bottom: 5vh;
  text-align: center;
  font-size: 7vw;
  color: #48483A;
}
.btn {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  width: 23%;
  height: 12%;
  background: #AFD7FF;
  border-radius: 30px;
  margin-left: 40%;
  font-size: 1.8vw;
  color: #48483A;
}
	
	
	.pc-opwaku02{
		display: none;
	}
	
	.sp-opwaku02{
		display: block;
	}

.option02 {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #48483A;
  position: relative;
  margin-top: 6vmax;
  margin-left: 19vw;
  padding-top: 9vw;
  font-size: 1.2vmax;
}
.opwaku02 {
  position: absolute;
  width: 75vw;
  margin-left: 13vw;
  z-index: -1;
}
input[type=checkbox] {
  display: none;
}
.check02 {
 box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0.2vh 8vw;
  line-height: 9.5vw;
  position: relative;
  width: auto;
  color: #48483A;
}
.check02::before {
  background: transparent;
  border: 1px solid #48483A;
  content: '';
  display: block;
  height: 2vw;
  width: 2vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  position: absolute;
  top: 50%;
}
.check02::after {
  border-right: 3px solid #ed7a9c;
  border-bottom: 3px solid #ed7a9c;
  content: '';
  display: block;
   height: 2vw;
  left: 1.7vw;
  margin-top: -0.7vw;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 1.5vw;
}
input[type=checkbox]:checked + .check02::after {
  opacity: 1;
}
.calc02 .pricewaku02 img, .result02 {
  display: inline-block;
  vertical-align: top;
}
.pricewaku02 img {
  width: 80vw;
  margin-top: 20%;
  margin-left: 10%;
}


.button {
  width: 60%;
  margin-left: 17%;
  margin-bottom: 20vh;
}
}