@charset "UTF-8";

html{
  scroll-behavior: smooth;
  	-webkit-text-size-adjust: 100%;
}
*{
	margin: 0;
	box-sizing: border-box;
}
.jamp {
    display: block;
    padding-top: 15vw;
    margin-top: -15vw;
}
img{
	border: none;
    vertical-align: bottom;
}
body{
	margin: 0;
}

.header-5 {
  box-sizing: border-box;
  width: 100%;
  z-index: 99;	
}

.header-inner {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: 9vw;
  padding: 0 2vw;
  margin: 0 auto;
  background-color: #000;
}

.header-nav-list {
  margin-top: .5vw;
  margin-left: 8vw;	
  padding: 0;
	
}

.header-nav-item {
  display:inline-block;
  padding: 1.2vw 2vw;
  font-size: 1.5vw;
  font-weight: bold;
  color: #E6E6E6;
 
}
#log{
	color: #67c5ff;
}
#reg{
	color: #2AD0F2;
}

.header-nav-list a {
  text-decoration: none;
}

.select {
  color: #444;
}

.header-nav-item:hover {
  background: #eee;
}

.logo img {
  width: 10vw;
  margin-left: 1.5vw;	
}
.header-ham{
  position: absolute;
  top: 5vw;
  left: 80%;
}
.menu2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 12vw;
  height: 1vw;
  background-color: #E6E6E6;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;	
}
#l1{
	top:2vw;
}
#l2{
	top:5vw;
}
#l3{
	top:8vw;
}


.open{
	display: none;
}
input[type="checkbox"]{
	position: absolute;
	left: -50vw;
}
@media screen and (max-width: 600px) {
	
	.header-nav-item:hover {
  background: none;
}
	
	.header-nav-item {
      display:block;
		font-size: 6vw;
		margin: 7vw 0 5vw 10vw;
		color: #fff;
	}
	
	.open{
	    display: block;
	}
	
	.header-inner{
	 height: 20vw;
	}
  .header-nav-list {
      position: absolute;
	  right: -100vw;
	  height: 100%;
	  transition: all 0.4s;
	  background-color: rgba(0, 0, 0, 0.6);
  }
	#spmenu:checked ~ .header-nav-list{
		right: 0;
		top:19.5vw;
		height:200vw;
		width: 70vw;
	}
	#spmenu:checked ~ .back{
		position: absolute;
		left:0;
		top:19.5vw;
		width: 100%;
		height: 200vw;
		background: rgba(0, 0, 0, 0.4);
	}
	
	#spmenu:checked ~ .open #l1{
	top: 5vw;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
    #spmenu:checked ~ .open #l2 {
  opacity: 0;
}
	#spmenu:checked ~ .open #l3{
	top: 5vw;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
	
  .header-nav {
    margin: 0 0 0 auto;
  }

	.header-5{
		position: fixed;
	}
	
	.logo img {
     width: 22vw;
     margin-left: 3vw;	
}
  main img:first-child{
		margin-top: 30vw;
	    margin-bottom: 9vw;
	}
}


#line1{
	width:100%;
	height:1px;
	background-color:black;
	margin-top:1vw;
}
#dlily{
	clear: both;
	width: 90%;
	height: 28vw;
    margin:5vw auto;
}
#aaa h2{
	font-size: 4vw;
	padding-left: 5vw;
	margin-bottom: 4vw;
}
#aaa{
	width: 48%;
	float: left;
	font-size: 1.8vw;
}
#br1{
	display:none;
}
#aaa h2{
	margin-top:0;
}
#img2 img{
	float: right;
	width:48%;
}

@media screen and (max-width: 600px) {
	#dlily{
	clear:both;	
	width: 100%;
	height:auto;
}
	#aaa{
	width: 85%;
    float:none;
	margin-left: auto;
	margin-right: auto;	
	font-size: 4vw;	
	}
    #aaa h2{
	margin-top:0;
	padding: 0;	
	text-align:center;
	font-size: 8vw;
}
    #img2 img{
	width:80%;
    margin-top:5vw;
	margin-left: 10%;
	margin-right: 10%;
	float: none;
}

}	

#line2{
	width:100%;
	height:1px;
	background-color:black;
}	

#img3{
	display: block;
	margin: 3vw auto;
}
@media screen and (max-width: 600px){
	#img3{
		width: 100%;
	}
}

#use{
	font-size:4vw;
	text-align:center;
	margin: 8vw 0 4vw 0;
}
#use1{
	margin:0 auto;
    max-width: 100%;
    width: 95%;
	height:8vw;
	font-size:1.4vw;
	border-collapse: separate;
	border-spacing: 3vw 0;

}
#use1 th{
	width:25%;
	height:5vw;
	font-weight: bold;
	font-size: 2.5vw;
}
#use1 td{
	background-color:#fff;
	text-align: center;
	width:25%;
	height:5vw;
	border-right:solid 1px #ddd;
    border-left:solid 1px #ddd;
}
#use1 tr:nth-child(2) td{
	padding: 0;
}
#use1 tr:last-child td{
	border-bottom:solid 1px #ddd;
	font-size: 1.5vw;
	padding-bottom: 1.5vw;
}
#sp1{
	width: 25%;
	height: auto;
	display:inline-block;
}
#pc2{
	width: 30%;
	height: auto;
	display:inline-block;
}
#step22{
	width: 55%;
	height: auto;
}
#step33{
	width: 35%;
	height: auto;
}
#step44{
	width: 60%;
	height: auto;
}
.use2{
	font-size: 2vw;
	font-weight: bold;
	padding-left:0;
	padding-right:0;
}

#use1 th:nth-child(1){
  background-color:#dddddd;
}
#use1 th:nth-child(2){
  background-color:  #d9fffd;
}
#use1 th:nth-child(3){
  background-color:#6fe2ff;
}
#use1 th:nth-child(4){
  background-color:#005cd9;
  color: white;
}

@media screen and (max-width: 600px) {
	#use{
		font-size: 7vw;
	}
	#use1{
     width:100%;
     border-collapse: separate;
	}
	.use2{
		font-size: 3vw;
	}
	#use1 img{
		margin: 0;
	}
	#use1 th{
		font-size: 3.5vw;
	}
	#use1 tr:last-child td{
		font-size: 2.3vw;
		font-weight: bold;
	}
}
table{
	border-spacing: 0;
}
#menu{
	font-size:4.5vw;
	text-align:center;
	margin: 8vw 0 4vw 0;
}

#menu1{
	border:1px solid #ddd;
	margin:auto;
    max-width: 100%;
    width: 90%;	
	height:auto;
}
#menu1 th{
	width:30%;
	height:8vw;
	font-size: 2.7vw;
}
#menu1 td{
	background-color:#fff;
	text-align: center;
    padding: 1.5vw 0;
	width:30%;
	height:8vw;
	border-left:solid 1px #ddd;
	border-right:solid 1px #ddd;
}
.price{
	font-size: 4vw;
	font-weight:bold;
}

#menu1 th:nth-child(1){
  background-color:#dddddd;
  color: black;
}
#menu1 th:nth-child(2){
  background-color:  #0f7d13;
  color:white;
}
#menu1 th:nth-child(3){
  background-color:#f5b932;
  color: white;
}
#menu1 td a{
  background-color: #0f7d13;
  padding:1.4vw 6vw;
  border-radius: 3vw;
  font-weight: bold;
  font-size: 1.8vw; 	
  color:#fff;
  text-decoration:none;
}
#menu1 td a:hover{
	background-color: #00c669;
}
#menu1 tr:last-child{
	font-size: 1.9vw;
}

@media screen and (max-width: 600px) {
	#menu{
		font-size: 8vw;
	}
	#menu1{
     width:100%
    }
	.price{
		font-size: 6vw;
	}
	#menu1 tr:last-child{
		font-size: 4vw;
	}
	#menu1 td a{
  padding:2vw 8vw;
		font-size: 4vw;
}
	#menu1 th{
		font-size: 5vw;
	}
}

#op{
	font-size:4.5vw;
	text-align:center;
	margin: 8vw 0 4vw 0;
}
#option{
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  table-layout: fixed;
  color: #4CAF50;
}

#option tr {
  background-color: #fff;
  padding:0;
  border-bottom: 1px dotted #8BC34A;
}
#option tr:last-child{
   border-bottom: 2px solid #18521b;
}
#option tr:first-child{
	border-top: 2px solid #18521b;
}
#option th,
#option td {
  padding: 1vw 0;
}
#option th {
	text-align: left;
	padding-left:5vw;
    color: #0f7d13;
	font-size: 2vw;
}
.txt{
   text-align: left;
   font-size: 1.5vw;
}
.price1{
   text-align: center;
   font-size: 2.5vw;
   font-weight: bold;
}
#option tr:last-child th a{
	font-size:1.2vw;
	padding-left: 1vw;
	text-decoration:none;
}
@media screen and (max-width: 600px) {
	#op{
		font-size: 8vw;
	}
  #option{
    width:100%
  }
	.price1{
		font-size: 4vw;
	}
	#option th{
		font-size: 3.5vw;
	}
	.txt{
		font-size: 2.8vw;
	}
}

#save1{
	width:100%;
	margin-top:8vw;
	padding:5vw;
	font-size:2vw;
	background-color:#faf4de;
}
#save{
	display: block;
	margin: 0 auto;
}
#save1 h3{
	text-align:center;
	font-size:4vw;
	padding-top:3vw;
	margin:0 0 3vw 0;
}
#save1 div{
	margin-top:1vw;
	margin-bottom:3vw;
	display:block;
	text-align: center;
}
#save1 div ul{
	text-align: left;
	display: inline-block;
	margin: 1vw 0;
	font-size: 3vw;
	font-weight: bold;
}

@media screen and (min-width: 601px){
#sponly{
	display: none;
}
}
@media screen and (max-width: 600px) {
	#save1{
		font-size: 4vw;
	}
  #save1 div ul{
	  font-size: 4vw;
}
	#save1 h3{
		font-size: 5vw;
	}
	
}






#faq{
	font-size:4vw;
	text-align:center;
	margin: 8vw 0 4vw 0;
}
.cp_qa{
	width:80%;
	margin:0 auto;
}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	
	overflow: hidden;
	margin: 0 auto 5vw auto;
	color: #1b2538;
	font-weight: bold;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	font-size: 2.3vw;
	line-height: 5vw;
	position: relative;
	display: block;
	margin: 0;
	padding: 1.5vw 1vw 1.5vw 3vw;
	cursor: pointer;
	text-indent: 1.5vw;
	border-radius: 0.6vw;
	background: #fff;
	border: solid .1vw #000;
}
.cp_qa .cp_actab label::before {
	font-family: serif;
	font-size: 2.3vw;
	margin-left: -3vw;
	padding-right: 1.3vw;
	content: 'Q';
	color: #000;
}
.cp_qa .cp_actab label:hover {
	transition: all 0.3s;
	color: #00838f;
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
	font-size: 4vw;
	font-weight: bold;
	line-height: 4vw;
	position: absolute;
	top: .8vw;
	right: 0.8vw;
	content: '+';
	display: inline-block;
	width: 5vw;
	height: 2em;
	-webkit-transition: transform 0.4s;
	        transition: transform 0.4s;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 4.4vw;
	-webkit-transition: max-height 0.2s;
	        transition: max-height 0.2s;
	border-radius: 0 0 0.6vw 0.6vw;
}
/*.cp_qa .cp_actab .cp_actab-content::before {
	font-family: serif;
	font-size: 1.5em;
	position: absolute;
	margin: 0.4em 0 0 -1em;
	padding: 0;
	content: '';
}*/
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1.5vw 1.5vw 1.5vw 0;
	color: #00838f;
	font-size: 2.3vw;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 30vw;
	border-left: .3vw solid #00838f;
	border-right: .3vw solid #00838f;
	border-bottom: .3vw solid #00838f;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
	/*border-radius: 0.5em 0.5em 0 0;*/
	border-left: .3vw solid #00838f;
	border-right: .3vw solid #00838f;
	border-top: .3vw solid #00838f;
	border-bottom: none;
	border-radius: 0.6vw 0.6vw 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
@media screen and (max-width: 600px) {
  .cp_qa{
    width:90%
  }

	#faq{
		font-size: 7vw;
	}
	.cp_qa .cp_actab label::before{
		font-size: 3.5vw;
	}
	.cp_qa .cp_actab label{
		font-size: 3.5vw;
		padding: 4vw 1vw 4vw 4vw;
	}		
	.cp_qa .cp_actab .cp_actab-content p{
		font-size: 3.5vw;
	}
}




#contact{
	background-color:#ecf4ff;
	width:100%;
	text-align:center;
}
#contact1{
	font-size:4vw;
	padding-top:5vw;
	margin-bottom: 3vw;
}	
#contact2{
	display:inline-block;
	font-size:1.8vw;
	margin-top:1vw;
	padding:1vw 4vw;
	background-color:#00838f;
	border-radius:3vw;
	color:#fff;
}
#contact2:hover{
	background-color:#00acc3;
}
#contact a:first-child{
	text-decoration:none;
}
#tell{
	display:inline-block;
	font-size:2.8vw;
	margin-top:3.5vw;
}
#tell span{
	font-size: 2.6vw;
}
#time{
	font-size:1.8vw;
	margin-top:1vw;
	padding-bottom:4vw;
}
@media screen and (max-width: 600px){
	#contact1{
		font-size: 6vw;
	}
	#contact2{
		font-size: 3.5vw;
		padding: 1vw 6vw;
		margin-top: 4vw;
	}
	#tell{
		font-size: 5.5vw;
		margin-top: 7vw;
		color: #000;
	}
	#tell span{
		font-size:4vw; 
	}
	#time{
		font-size: 3.5vw;
	}
}
@media(min-width: 600px){
  a[href^="tel:"]{
    pointer-events: none;
}
	#tell{
	color:#000;
}
}

#footer{
	background-color: #000;
	height: 18vw;
	font-size: 1.2vw;
}
#footer p{
	text-align: center;
	margin-top: 5vw;
	padding-bottom: 3vw;
	color: #fff;
}
#footer a{
	color: #fff;
	text-decoration: none;
	text-align: center;
	margin:0 3vw;
}
#sns{
	text-align: center;
	margin-top: 3.2vw;
}
@media screen and (max-width: 600px){
	#footer{
		height: 38vw;
		font-size: 3vw;
	}
	#footer a{
		display: block;
		margin-top: 4vw;
	}
	#sns{
		margin-top:0;
	}
	#footer p{
		margin-top: 0;
		margin-top: 4vw;
	}
}