@charset "utf-8";
#select{
	.wrap{
		.contents{
			h2{
				margin-bottom:40px;
				span{
					display: block;
					font-size: 0.6em;
				}
			}
			.contents_inner{
				display: grid;
				grid-template-columns: 44% 50%;
				grid-column-gap: 6%;
				align-items: center;
				.detail{
					display: grid;
					grid-row-gap: 15px;
				}
			}
		}
	}
}
#plan{
	.wrap{
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(5, auto);
				grid-column-gap: 15px;
				justify-content: center;
				margin-top: 30px;
				dl{
					border: 1px solid #53A3B7;
					padding: 10px 15px 15px;
					border-radius: 0 20px 0 20px;
					dt{
						font-weight: 600;
						line-height: 1.5;
						margin: 0.6em 0 0.8em;
						font-size: 1.5rem;
					}
					dd{
						line-height: 1.6;
						font-size: 1.3rem;
						&.step{
							display: grid;
							grid-template-columns: auto auto;
							grid-column-gap: 0.7em;
							justify-content: center;
							align-items: center;
							color: #53A3B7;
							font-size: 2.4rem;
							line-height: 1;
							span{
								font-size: 1.7em;
							}
						}
					}
				}
				&.color{
					grid-template-columns: 1fr;
					grid-row-gap: 40px;
					border: solid 1px #53A3B7;
					padding: 50px;
					border-radius: 0 20px 0 20px;
					.text{
						display: grid;
						grid-template-columns: auto 1fr;
						grid-column-gap: 20px;
						align-items: center;
						margin-bottom: 20px;
						h3{
							color: #53A3B7;
							font-size: 3.4rem;
							font-weight: 500;
						}
					}
					.color_inner{
						display: grid;
						grid-template-columns: repeat(3, auto);
						grid-column-gap: 40px;
					}
				}
			}
		}
	}
}
#image{
	.wrap{
		.contents{
			.tabmenu{
				display: grid;
				grid-template-columns: repeat(6, auto);
				justify-content: stretch;
				align-items: end;
				margin-bottom: 50px;
				li{
					font-size: 2.2rem;
					padding:0 1.5em 1em;
					border-bottom:solid #EFEFEF 5px;
					text-align: center;
					&.active{
						color: #53A3B7;
						border-bottom: 5px solid #53A3B7;
					}
				}
			}
			.tab_box{
				.tabin{
					&:not(.active){
						display: none;
					}
					.contents_inner{
						display: grid;
						grid-column-gap: 2.5%;
						&.type1{
							grid-template-columns: 47.8% 49.7%;
							margin-bottom: 30px;
						}
						&.type2{
							grid-column-gap: 2.5%;
							grid-template-columns: 17.5% 17.5% 17.5% 17.5% 20%;
						}	
					}
				}
			}
		}
	}
}
@media screen and (max-width:1200px) {
	#select{
		.wrap{
			.contents{
				h2{
					margin-bottom: 30px;
				}
				.contents_inner{
					grid-template-columns: 40% 57%;
					grid-column-gap: 3%;
					.detail{
						grid-row-gap: 10px;
					}
				}
			}
		}
	}
	#image{
		.wrap{
			.contents{
				.tabmenu{
					margin-bottom: 30px;
					li{
						font-size: 2.0rem;
						padding:0 1em 1em;
					}
				}
			}
		}
	}
}

@media screen and (max-width:1024px) {
	#select{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 1fr;
					grid-column-gap: inherit;
					grid-row-gap: 30px;
					.img{
						text-align: center;
						img{
							width: 80%;
							max-width: 550px;
						}
					}
				}
			}
		}
	}
	#plan{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: repeat(3, auto);
					grid-column-gap: 15px;
					grid-row-gap: 15px;
					dl{
						dd{
							&.step{
								font-size: 2.2rem;
							}
						}
					}
					&.color{
						grid-row-gap: 30px;
						padding: 30px;
						.text{
							h3{
								font-size: 2.4rem;
							}
							p{
								font-size: 1.5rem;
							}
						}
						.color_inner{
							grid-column-gap: 30px;
						}
					}
				}
			}
		}
	}
	#image{
		.wrap{
			.contents{
				.tabmenu{
					li{
						font-size: 2.0rem;
						border-bottom:solid #EFEFEF 4px;
						&.active{
							border-bottom: 4px solid #53A3B7;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:768px) {
	#select{
		.wrap{
			.contents{
				h2{
					margin-bottom: 20px;
				}
				.contents_inner{
					grid-row-gap: 20px;
					.img{
						img{
							width: 100%;
							max-width: 100%;
						}
					}
					.detail {
                    	grid-row-gap: 5px;
                	}
				}
			}
		}
	}
	#plan{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: repeat(1, auto);
					grid-column-gap: inherit;
					grid-row-gap: 20px;
					margin-top:20px;
					dl{
						padding: 5px 10px 15px;
						dt{
							font-size: 1.4rem;
						}
						dd{
							&.step{
								font-size: 1.8rem;
							}
						}
					}
					&.color{
						grid-row-gap: 30px;
						padding: 20px;
						.text{
							grid-template-columns: 1fr;
							grid-row-gap: 10px;
							margin-bottom: 15px;
							h3{
								font-size: 2.0rem;
							}
							p{
								font-size: 1.4rem;
							}
						}
						.color_inner{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 20px;
						}
					}
				}
			}
		}
	}
	#image{
		.wrap{
			.contents{
				.tabmenu{
					grid-template-columns: repeat(3, auto);
					grid-row-gap: 15px;
					margin-bottom: 20px;
					li{
						font-size: 1.8rem;
						border-bottom:solid #EFEFEF 3px;
						&.active{
							border-bottom: 3px solid #53A3B7;
						}
					}
				}
				.tab_box{
					.tabin{
						.contents_inner{
							display: grid;
							grid-column-gap: 2.5%;
							&.type1{
								grid-template-columns: 1fr;
								grid-row-gap: 20px;
								margin-bottom: 20px;
							}
							&.type2{
								grid-column-gap: 15px;
								grid-row-gap: 20px;
								grid-template-columns: repeat(2, auto);
							}	
						}
					}
				}		
			}
		}
	}
}