:root {
	--content-width: 72vw;
}
html{
	scrollbar-width: none;
}
body::-webkit-scrollbar{
	display: none;
}

.fill{width: 100%; height: 100%;}
.centered{left: 50%; transform: translate(-50%,0); text-align: center;}
.no-margin{margin: 0;}

.sans{
	font-size: var(--font-base);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.serif{
	font-size: var(--font-base);
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
}
.kaisei{
	font-family: "Kaisei Opti", serif;
	font-weight: 400;
	font-style: normal;
}
.title{font-size: calc(var(--font-base) * 1.8);}
.subtitle{font-size: calc(var(--font-base) * 1.5);}
.course{font-size: calc(var(--font-base) * 1.2);}
.paragraph{font-size: calc(var(--font-base) * 0.9);}
.sign{font-size: calc(var(--font-base) * 0.8);}
.heading{
	font-size: calc(var(--font-base) * 1.6);
	border-left: calc(var(--font-base) * 0.5) solid rgb(255, 203, 107); padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 0.6);
	margin-top: calc(var(--content-width) * 0.1);
}
.heading2{
	font-size: calc(var(--font-base) * 1.6);
	border-left: calc(var(--font-base) * 0.5) solid rgb(255, 203, 107); padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 0.6);
	margin-top: calc(var(--content-width) * 0.06);
}
.heading3{
	font-size: calc(var(--font-base) * 1.6);
	border-left: calc(var(--font-base) * 0.5) solid rgb(255, 203, 107); padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 0.6);
	margin-top: calc(var(--content-width) * 0.06);
}
.orange{color: rgb(255, 203, 107);}
.golden{color: goldenrod;}
.skyblue{color: steelblue;}
.blue{color: royalblue;}
.vermilion{color: orangered;}
.seagreen{color: seagreen;}
.pink{color: pink;}

.main{display: none;}

.header{
	position: relative; display: flex; flex-wrap: wrap;
	width: var(--content-width); left: var(--content-left); height: calc(var(--content-width) * 0.14); top: 0;
	text-align: center;
}
.header-logo{width: calc(var(--content-width) * 0.24);}
.header-logo .image{
	width: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 0.07);
	transform: translate(0, -50%);
	user-select: none;
}
.header-blank{width: calc(var(--content-width) * 0.02);}
.header button{
	display: block; position: relative;
	height: calc(var(--content-width) * 0.04);
	top: calc(var(--content-width) * 0.07);
	transform: translate(0, -50%);
	margin: 0 calc(var(--font-base) * 0.1);
	font-size: calc(var(--font-base) * 0.7);
	border-radius: calc(var(--font-base) * 0.2);
	background-color: white;
	transition: background-color 0.4s, color 0.4s;
}
.header button:hover{color: white; background-color: dimgray;}
.header .selected{color: white; background-color: rgb(255, 196, 0);}
#header-link-button1{width: calc(var(--font-base) * (0.7 * 3 + 2));}
#header-link-button2{width: calc(var(--font-base) * (0.7 * 9 + 2));}
#header-link-button3{width: calc(var(--font-base) * (0.7 * 6 + 2));}
#header-link-button4{width: calc(var(--font-base) * (0.7 * 6 + 2));}
#header-link-button5{width: calc(var(--font-base) * (0.7 * 4 + 2));}
#header-link-button6{width: calc(var(--font-base) * (0.7 * 6 + 2));}

ul{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}
.carousel-area{
	width: var(--content-width);
	height: calc(var(--content-width) * 0.49);
	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;}
#carousel-paragraph1{
	top: calc(var(--content-width) * 0.145);
	left: calc(var(--content-width) * 0.325);
	margin: 0;
	font-size: calc(var(--font-base) * 3.2);
	line-height: calc(var(--font-base) * 3.8);
	color: rgb(255, 196, 0);
}
#carousel-paragraph2{
	top: calc(var(--content-width) * 0.24);
	left: calc(var(--content-width) * 1.1);
	margin: 0;
	font-size: calc(var(--font-base) * 2.6);
	line-height: calc(var(--font-base) * 3.2);
	color: coral;
}

.arrow-wrap{
	position: absolute;
	width: var(--content-width);
	height: calc(var(--content-width) * 0.49);
	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-relative{width: 96%; left: 2%; user-select: none;}

.content-line{
	display: flex; position: relative;
	width: 100%; height: calc(var(--content-width) * 0.48);
}
.content-box{width: 32%; margin-right: 2%; height: 100%;}
.content-image{width: 100%; height: calc(var(--content-width) * 0.36);}
.content-color1{width: 100%; height: calc(var(--content-width) * 0.12); top: calc(var(--content-width) * 0.36); background-color:rgb(255, 196, 0);}
.content-color2{width: 100%; height: calc(var(--content-width) * 0.12); top: calc(var(--content-width) * 0.36); background-color:rgb(167, 206, 27);}
.content-color3{width: 100%; height: calc(var(--content-width) * 0.12); top: calc(var(--content-width) * 0.36); 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.24);}
.footer-social-icons{top: calc(var(--content-width) * 0.06); height: calc(var(--content-width) * 0.07); left: calc(var(--content-width) * 0.24);}
.footer-social-icons img{width: calc(var(--content-width) * 0.07); height: calc(var(--content-width) * 0.07);}
#footer-social-icon1{left: 0;}
#footer-social-icon2{left: calc(var(--content-width) * 0.12);}
#footer-social-icon3{left: calc(var(--content-width) * 0.12 * 2);}
#footer-area p.sign{top: calc(var(--content-width) * 0.16); left: calc(var(--content-width) * 0.24);}
.footer-contact-link{
	width: calc(var(--content-width) * 0.12); height: calc(var(--content-width) * 0.12);
	top: calc(var(--content-width) * 0.06); left: calc(var(--content-width) * 0.65);
	background-color: lightgray;
	border-radius: calc(var(--font-base) * 0.2);
}
.footer-contact-link img{
	width: calc(var(--content-width) * 0.06); height: calc(var(--content-width) * 0.06);
	top: calc(var(--content-width) * 0.025); left: calc(var(--content-width) * 0.03);
}
#footer-area .footer-contact-link p.sign{
	top: calc(var(--content-width) * 0.08); left: calc(var(--content-width) * 0.06); transform: translate(-50%,0); white-space: nowrap;
}

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

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

#mental-detail-area .paper-block{
	width: 70%; left: 15%; 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: 70%; left: 15%;}

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: 70%; left: 15%;}
.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: 70%; left: 15%;}
.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.4);
	height: calc(var(--content-width) * 0.06);
	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.39);
	height: calc(var(--content-width) * 0.05);
	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.2);
	top: calc(var(--content-width) * 0.03);
	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: 8%;}
.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: 8%;}
.child-table{width: 70%; left: 15%;}
.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: 10%;}

#message-area .text-rectangle{
	width: 45%; left: 10%;
}
#message-area img{
	width: 30%;
	top: 0; left: 60%;
}

#contact-block{
	width: 80%; left: 10%;
	height: calc(var(--content-width) * 0.16);
	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: 30%; transform: translate(0%,-50%);}

body.side-open{overflow-y:hidden;}

.overlay {
	display: block; position: fixed; visibility: hidden;
	width: 100%; height: 100%; top: 0; left: 0;
	background: rgba(0,0,0,0);
	transition: all .5s ease;
	z-index: 20;
}
.side-open .overlay {
	visibility: visible; cursor: pointer;
	background: rgba(0,0,0,.2);
	transition: all .5s ease;
}

.side-menu{
	display: block; position: fixed;
	width: 30%; height: 100%; top: 0; right: -30%;
	text-align: left;
	background: rgb(226, 172, 56);
	z-index: 21;
	transition: all .5s ease;
}
.side-open .side-menu{
	right: 0;
	transition: all .5s ease;
}

.side-menu-ul{
	position: absolute;
	width: 100%;
	height: 70%;
	top: 15%;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.side-menu-ul::-webkit-scrollbar{
	display: none;
}
.side-menu-ul li{
	display: block; position: relative;
	height: 12%;
	padding: 0 calc(var(--font-base) * 2.4);
}
.side-menu-ul li p{display: block; position: absolute; top: 50%; transform: translate(0,-50%); padding: 0 calc(var(--font-base) * 2.4);}
.side-menu-ul li p.category{padding: 0 0;}
.side-menu-ul .decorated-link{color: white;}

.side-menu-btn {
	display: block; position: absolute;
	top: calc(var(--font-base) * 2);
	right: calc(var(--content-left) - var(--font-base) * 5);
	width: calc(var(--font-base) * 3);
	height: calc(var(--font-base) * 3);
	padding: 0;
	cursor: pointer;
	z-index: 24;
	background: rgba(255, 255, 255, 0.9);
}
.side-open .side-menu-btn{
	background: none;
	position: fixed;
	right: calc(var(--font-base) * 2);
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 50%;
	left: 25%;
	height: 50%;
	top: 25%;
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 4px;
	margin: auto;
	background: #333;
}

.ellipsis-v .point.top {
	top: 0;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 0;
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left top;
	transform: rotate(45deg);
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left bottom;
	transform: rotate(-45deg);
	}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: #ccc;
}