@charset "utf-8";

/* サイドバーレイアウト */

main {
	position: fixed;
    width: 7%;
    height: 100vh;
    top: 0;
    left: 0;
	background-color: #FFFFFF;
	background-image: url("../../image/top-back.jpg");
	background-size: cover;
    box-shadow: 0px 0px 4px 0px #666;
	z-index: 100;
}
main img {
	width: 50px;
	margin-left: 5px;
	margin-top: 20px;
}

/*サイドバースマホ版*/
@media(max-width:640px){
	main, .sidebar {
		display: none;
	}
}

/*全体ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.firstprinting{
	display: block;
	position: relative;
	width: 93%;
	left:7%;
	right: 0;
}

/*スマホ版*/
@media(max-width:640px){
	.firstprinting{
		display: block;
		position: relative;
		width: 100%;
		left: 0px;
	}
}

/*タイトルｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.title h1{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 8vh;
	background-color: lightblue;
	font-size: 2.5vw;
	color: white;
	text-shadow: 1px 1px 1px #808080;
	text-align: center;
}



@media(max-width:640px){
	.title h1{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 4vh;
	font-size: .8rem;
	color: white;
	text-shadow: 1px 1px 1px #808080;
	text-align: center;
	}
}

.box {
	position: relative;
	margin-top: 2vh;
	margin-bottom: 3vh;
}

.box p{
	width: 89%;
	top: 2vh;
	margin: 0 auto;
	font-size: 1.5vw;
	text-align: center;
}

/*スマホ版*/
@media(max-width:640px){
	.box {
		position: relative;
		top: 5vh;
	}
	
	.box p {
		font-size: .7rem;
	}
}

/*見出し*/
.contents-title {
	position: relative;
/*	top: 5vh;*/
	width: 97.3%;
	margin-bottom: 0vh;
}

.contents-title h2{
	font-size: 2.5vw;
	background-color: #f39f86;
	background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
	/*  color: #fff;*/
	padding: .3em .3em .3em 3em;
}

.contents-title2 {
	position: relative;
	top: 3.5vh;
	width: 97.3%;
	margin-top: 5vh; /* ←これを追加 */
	margin-bottom: 1vh;
}

.contents-title2 h2{
	font-size: 2.5vw;
	background-color: #f39f86;
	background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
	/*  color: #fff;*/
	padding: .5em .5em .5em 3em;
}

.contents-title3 {
	position: relative;
	top: 3.5vh;
	width: 97.3%;
	margin-top: 5vh; /* ←これを追加 */
	margin-bottom: 4vh;
}

.contents-title3 h2{
	font-size: 2.5vw;
	background-color: #f39f86;
	background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
	/*  color: #fff;*/
	padding: .5em .5em .5em 3em;
}

/*表組*/
.contents {
	position: relative;
	margin-bottom: 5vh;
}
.contents h2{
	position: relative;
	width: 50%;
	margin-top: 15%;
	padding-left: 7%;
	border-top: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	font-size: 2.2vw;
}

.contents table{
	position: relative;
	width: 95%;
	margin: 0 auto 5vh auto; /* ← 下部に5vhのスペースを追加 */
	top: 3vh;
	border-spacing: 2px 0;
}
.contents th, td {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.contents th{
	border-bottom: 1px solid;
	background-color: aquamarine;

}

.contents td{
	border-bottom: 1px solid;
	background-color: #FFFFFF;
}

.contents td.name{
	width: 15%;
	height: 20vh;
	font-size: 1.5vw;
	text-align: center;
}

.contents td.feature{
	width: 55%;
	font-size: 1.5vw;
	padding: 2.5vw;
	text-align: justify;
}

.contents td.ex{
	width: 20%;
}

.ex {
	font-size: 1.5vw;
	padding-left: 2vw;
}

.ex-p {
	display: block;
	font-size: 1.4vw;
	margin-left: 1.8vw;
}

.contact{
	position: relative;
	bottom: 0;
	text-align: center;
	margin-top: 7vh;
}

.contact p{
	font-size: 2vw;
}


/*お問い合わせボタン*/
.contact-bt {
	position: relative;
	top: 3vh;
	margin-bottom: 10vh;
}
a.contact-btn {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 50vw;
	margin: auto;
	padding: 1vw 1vw;
	font-size: 2vw;
	font-weight: bold;
	color: #000000;
	background-color: #FFE700; 
	border-bottom: 2px solid #27acd9;
	border-radius: 100vh;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
	z-index: 101;
}
a.contact-btn:hover {
	color: #fff;
	background: #27acd9;
	border-bottom: 2px solid #fff;
	transform: translateY(3px);
}

/*スマホ版*/
@media(max-width:640px){
	.box {
		position: relative;
		margin-bottom: 10vh;
	}
	
	.contents-title {
		position: relative;
	}
	
	.contents-title h2 {
		font-size: .9rem;
	}
	.contents{
		top: 2%;
	}

	.contents p{
		width: 80%;
		margin: auto;
		font-size: 2vw;
	}

	.contents h2{
		font-size: 2.5vw;
	}
	.contents th.name{
		font-size: .8rem;
	}
	.contents td.name{
		font-size: .6rem;
	}
	.contents th.feature{
		font-size: .8rem;
	}
	.contents td.feature{
		font-size: .6rem;
	}
	.contents th.ex-1{
		font-size: .8rem;
	}
	.contents td.ex{
		font-size: .6rem;
	}
	
	.contents-title2,.contents-title3 h2 {
		font-size: .9rem;
	}
	
	.contact p{
		width: 80%;
		margin: auto;
		font-size: .8rem;
	}

	.contact h2{
		font-size: 4vw;
	}
	
	/*お問い合わせフォームボタンスマホ版*/
@media(max-width:640px){
	.contact-bt {
		position: relative;
		top: 0;
		margin-top: 2rem;
		margin-bottom: 5vh;
	}
	a.contact-btn {
		display: block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		width: 60vw;
		margin: auto;
		padding: 2vw 2vw;
		font-size: 1rem;
		font-weight: bold;
		color: #000000;
		background-color: #FFE700; 
		border-bottom: 2px solid #27acd9;
		border-radius: 100vh;
		box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
		transition: 0.5s;
		z-index: 101;
	}
	a.contact-btn:hover {
		color: #fff;
		background: #27acd9;
		border-bottom: 2px solid #fff;
		transform: translateY(3px);
	}
}

}