:root {
	--content-width: 96vw;
}

.header{height: calc(var(--content-width) * 0.30);}
.header-logo .image{
	width: 60%; left: 10%; top: 50%;
	user-select: none;
}
.header-blank{display: none;}
.header button{display: none;}

ul{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}
.carousel-area{
	width: var(--content-width);
	height: calc(var(--content-width) * 1);
	left: var(--content-left);
	overflow: hidden;
	position: relative;
}
.carousel-rail{
	width: calc((var(--content-width) + 20px) * 2);
	height: 100%;
	display: flex;
	position: absolute;
}
.carousel-list{
	width: var(--content-width);
	height: 100%;
	margin-right: 20px;
}
.carousel-list img{object-fit: cover; user-select: none; object-position: 60% 0;}
#carousel-paragraph1{
	top: calc(var(--content-width) * 0.5);
	left: calc(var(--content-width) * 0.15);
	margin: 0;
	font-size: calc(var(--font-base) * 3.2);
	line-height: calc(var(--font-base) * 3.6);
	color: rgb(255, 196, 0);
}
#carousel-paragraph2{
	top: calc(var(--content-width) * 0.4);
	left: calc(var(--content-width) * 1.1);
	margin: 0;
	font-size: calc(var(--font-base) * 2);
	line-height: calc(var(--font-base) * 2.4);
	color: coral;
}

.arrow-wrap{
	position: absolute;
	width: var(--content-width);
	height: calc(var(--content-width) * 1);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.arrow-btn{
	width: calc(var(--font-base) * 4);
	height: calc(var(--font-base) * 4);
	background-color:transparent;
	border-radius: 50%;
	transition: .2s;
	z-index: 1;
}
/* ボタン左の中身（三角を擬似要素で表現） */
.arrow-left{position: relative;}
.arrow-left:before{
	content: "";
	width: calc(var(--font-base) * 2);
	height: calc(var(--font-base) * 2);
	border-top: 2px solid gray;
	border-left: 2px solid gray;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-30%, -50%)rotate(-45deg);
	pointer-events: none;
}
/* ボタン右の中身（三角を擬似要素で表現） */
.arrow-right{position: relative;}
.arrow-right:before{
	content: "";
	width: calc(var(--font-base) * 2);
	height: calc(var(--font-base) * 2);
	border-top: 2px solid gray;
	border-left: 2px solid gray;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-70%, -50%)rotate(135deg);
	pointer-events: none;
}

#concept-area .image{width: 116%; left: -8%; margin-top:calc(var(--content-width) * 0.20); user-select: none;}
#concept-area .title{width:100%; left: 50%; transform: translate(-50%, 0); text-align: center;}
#concept-area .paragraph{width: 70%; text-align: center;}

.content-line{
	display: flex; position: relative; flex-wrap: wrap;
	width: 100%; height: calc(var(--content-width) * 1.90);
}
.content-box{width: 100%; margin-right: 0%; height: calc(var(--content-width) * 0.60); margin-bottom: calc(var(--content-width) * 0.05);}
.content-image{width: 80%; left: 10%; height: calc(var(--content-width) * 0.48);}
.content-color1{width: 80%; left: 10%;  height: calc(var(--content-width) * 0.12); top: calc(var(--content-width) * 0.48); background-color:rgb(255, 196, 0);}
.content-color2{width: 80%; left: 10%;  height: calc(var(--content-width) * 0.12); top: calc(var(--content-width) * 0.48); background-color:rgb(167, 206, 27);}
.content-color3{width: 80%; left: 10%;  height: calc(var(--content-width) * 0.12); top: calc(var(--content-width) * 0.48); background-color: steelblue;}
.content-box p.centered{width: 100%; top: 50%; transform: translate(-50%,-50%); font-size: calc(var(--font-base) * 1.8);}

#footer-area{height: calc(var(--content-width) * 0.36);}
.footer-social-icons{top: calc(var(--content-width) * 0.08); height: calc(var(--content-width) * 0.12); left: calc(var(--content-width) * 0.12);}
.footer-social-icons img{width: calc(var(--content-width) * 0.12); height: calc(var(--content-width) * 0.12);}
#footer-social-icon1{left: 0;}
#footer-social-icon2{left: calc(var(--content-width) * 0.16);}
#footer-social-icon3{left: calc(var(--content-width) * 0.16 * 2);}
#footer-area p.sign{top: calc(var(--content-width) * 0.22); left: calc(var(--content-width) * 0.12);}
.footer-contact-link{
	width: calc(var(--content-width) * 0.18); height: calc(var(--content-width) * 0.18);
	top: calc(var(--content-width) * 0.08); left: calc(var(--content-width) * 0.70);
	background-color: lightgray;
	border-radius: calc(var(--font-base) * 0.2);
}
.footer-contact-link img{
	width: calc(var(--content-width) * 0.09); height: calc(var(--content-width) * 0.09);
	top: calc(var(--content-width) * 0.035); left: calc(var(--content-width) * 0.045);
}
#footer-area .footer-contact-link p.sign{
	top: calc(var(--content-width) * 0.125); left: calc(var(--content-width) * 0.09); transform: translate(-50%,0); white-space: nowrap;
}

#back-area{height: calc(var(--content-width) * 0.30);}
#back-area .image{width: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#mental-title-area{height: calc(var(--content-width) * 0.44);}

#mental-detail-area .paper-block{
	width: 90%; left: 5%; border-radius: calc(var(--font-base) * 0.5);
	background-color: lemonchiffon;
	filter: drop-shadow(calc(var(--content-width) * 0.005) calc(var(--content-width) * 0.005) 0 rgba(226, 226, 226, 0.6));}
#mental-detail-area .text-checklist{width: 70%; left: 15%;}
#mental-detail-area .table-caption{width: 90%; left: 5%;}

table{
	position: relative; table-layout: fixed;
	border-collapse: separate; border-spacing:  calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 0.9);
}
table th{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(57, 130, 175); color: white;
	border-radius: calc(var(--font-base) * 0.3);
}
table td{
	padding: calc(var(--font-base) * 0.8);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.3);
	text-align: center;
}

.mental-health-table{width: 90%; left: 5%;}
.mental-health-table tr{width: 100%;}
.mental-health-table th{background-color: rgb(96, 196, 139);}
.mental-health-table th.long{width: 40%;}
.mental-health-table td{background-color: rgb(232, 255, 242);}

.karada-table{width: 90%; left: 5%;}
.karada-table tr{width: 100%;}
.karada-table th{background-color: rgb(255, 203, 212);}
.karada-table th.long{width: 40%;}
.karada-table td{background-color: rgb(255, 236, 238);}

#mental-contact-button{
	position: relative;
	width: calc(var(--content-width) * 0.6);
	height: calc(var(--content-width) * 0.08);
	left: 50%; transform: translate(-50%, 0);
	background: linear-gradient(110deg, royalblue 0%, aliceblue 100%);
	background-size: cover;
	border-radius: calc(var(--font-base) * 0.3);
	margin-top: calc(var(--content-width) * 0.10);
}
#mental-contact-button div{
	width: calc(var(--content-width) * 0.59);
	height: calc(var(--content-width) * 0.07);
	left: calc(var(--content-width) * 0.005);
	top: calc(var(--content-width) * 0.005);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.3);
	opacity:1;
	transition: opacity 0.4s;
}
#mental-contact-button:hover div{opacity:0;}
#mental-contact-button p{
	left: calc(var(--content-width) * 0.3);
	top: calc(var(--content-width) * 0.04);
	transform: translate(-50%,-50%);
	white-space: nowrap;
	color: royalblue;
	transition: color 0.4s;
}
#mental-contact-button:hover p{color: white;}

#design-title-area{height: calc(var(--content-width) * 0.48);}
#design-title-area p{top: 60%; right: 15%;}

#design-detail-area .area-title{left: 4%;}
.design-detail-plan{
	border-radius: calc(var(--font-base) * 0.4);
	padding: calc(var(--content-width) * 0.04);
	background-color: moccasin;
	margin-bottom: calc(var(--content-width) * 0.04);
}

#child-title-area{height: calc(var(--content-width) * 0.48);}
#child-title-area p{top: 60%; left: 15%;}

#child-detail-area .area-title{left: 4%;}
#child-detail-area .subtitle{font-size:calc(var(--font-base) * 1.4);}
.child-table{width: 90%; left: 5%;}
.child-table tr{width: 100%;}
.child-table th{background-color: rgb(99, 160, 230);}
.child-table th.long{width: 40%;}
.child-table td{background-color: rgb(201, 225, 255);}

#message-name-area p{left: 5%;}

#message-area{overflow: visible;}
#message-area .text-rectangle{
	width: 80%; left: 5%; margin-top: calc(var(--content-width) * 0.30);
}
#message-area img{
	width: 40%;
	top: -5%; transform: translate(0,-100%); left: 50%;
}

#contact-block{
	width: 90%; left: 5%;
	height: calc(var(--content-width) * 0.28);
	background-color: moccasin;
	border-radius: calc(var(--font-base) * 0.2);
}
#contact-block img{height: 60%; top: 20%; left: 10%;}
#contact-block p{top: 50%; left: 36%; transform: translate(0%,-50%);}

.side-menu{
	background: rgb(226, 172, 56);
}