@charset "utf-8";

/*
===== universal reset =================================
*/
*:not(ul):not(ol) {
	margin:0;
	padding:0;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*
===== body and base setting ===========================
*/

body {
	margin:0;
	padding:0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/* general params
--------------------*/

img {
	border:none;
	vertical-align:bottom;
}

h2.entry-title {
	padding:18px;
	text-align:center;
	font-size:2rem;
	font-family: "ta-kakugo-gf-02", sans-serif;
	font-weight: 400;
	font-style: normal;
	background:#ff0;
	border-bottom:solid 6px #2ea7e0;
}

#content {
		h2,h3,h4 {
		font-family: "ta-kakugo-gf-02", sans-serif;
		font-weight: 400;
		font-style: normal;
		margin-bottom: 1.2em;
	}
}

#content .inn {
	font-size:120%;
	line-height:1.8em;

}

#content h2 {
	font-size:180%;
		line-height:1.2em;
}

@media screen and (max-width: 768px) {
	#content h2 br {
		display:none;
	}

	#content .inn {
		font-size:100%;
	}
}

#content p {
	margin-bottom:1.8em;
}

#content {
	p:last-child,
	ul:last-child{
		margin-bottom:0;
	}
}
/*
===== header ===========================
*/

header {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:64px;
}

header .inn {
	margin:8px;
	display:flex;
	justify-content:space-between;
}

h1 a {
	display:block;
	width: min(30vw, 240px);
	aspect-ratio: 50 / 9;
	background:url(images/d_logo.png)  no-repeat;
	background-size:contain;
	text-indent:-9999px;
}

/*
===== cover ===========================
*/
.cover {
	width:100%;
	background:url(images/cover.jpg) center top no-repeat;
	border-bottom:solid 6px #2ea7e0
}

@media screen and (min-width: 769px) {
	.cover {
		height:1000px;
		background-size:auto 1000px;
	}
}

@media screen and (max-width: 768px) {
	.cover {
		aspect-ratio: 100 / 128;
		background-size:auto 100%;
	}
}

/*
===== link setting ===========================
*/

a:hover img {
	opacity:0.8;
}

a.contact {
	display:block;
	padding:6px 20px;
	text-decoration:none;
	color:#fff;
	font-size:min(2.8vw,20px);
	background:#000;
	border-radius:24px;
	font-family: "ta-kakugo-gf-02", sans-serif;
	font-weight: 400;
	font-style: normal;
}

a.contact:hover {
	color:#000;
	background:#fdff02;
}

header .inn a.contact {
	padding:6px 20px;
	text-decoration:none;
	font-size:min(2.8vw,20px);
}

#content .inn  a.contact {
	margin:64px auto 32px;
	padding:14px 8px;
	width:24%;
	text-decoration:none;
	text-align:center;
	font-size:100%;
	border-radius:44px;
}

a.contact.detail {
	background:#39a7e0;
}

#content .inn  a.contact.detail {
	margin:64px auto 32px;
	padding:16px 20px;
	width:40%;
	text-decoration:none;
	text-align:center;
	font-size:120%;
	border-radius:44px;
}

a.contact.detail:hover {
	background:#fdff02;
}

@media screen and (max-width: 768px) {
	#content .inn  a.contact {
		margin:64px auto 32px;
		padding:16px 20px;
		width:100%;
		font-size:120%;
		border-radius:44px;
	}

	#content .inn  a.contact.detail {
		padding:12px;
		width:100%;
		font-size:120%;
	}
}

/*botup*/
#botup {
	position:fixed;
	bottom:120px;
	right:10px;
	z-index: 998;
}

#botup a {
	display:
	table-cell;
	width:45px;
	height:45px;
	font-size:16px;
	text-align:
	center;
	color: #ffffff;
	text-decoration:
	none;
	vertical-align: middle;
	border-radius:50%;
	background: #000000;
}

#botup a:hover {
	background: #df7978;
}

/*
===== layout setting ===========================
*/
#page {
	position:absolute;
	top:0;
	left:0;
	width:100%;
}

.wrapper {
	margin-top:80px;
}

.home .wrapper {
	margin-top:40px;
}

#content .inn {
	padding:80px 16px;
	border-bottom:solid 6px #2ea7e0
}

#content .inn > section {
	position:relative;
	margin:0 auto;
	max-width:800px;
}

#content .inn.about {
	background:#eeeff0;
}

#content #contact.inn {
	padding-top:30px;
	background:#ff0;
	h2 {
		text-align:center;
	}
}

body:not(.home) #content > div > div:nth-child(odd).inn {
	background:#eeeff0;
}

@media screen and (min-width: 769px) {
	/*.about*/
	#content .inn.about section {
		background: url(images/person01.png) right 80px no-repeat;
		background-size:38%;
	}
	
	#content .inn.about .description {
		width:60%;
	}

	/*.person*/
	#content .inn.person section {
		background: url(images/person02.png) left no-repeat;
		background-size:32%;
	}
	
	#content .inn.person .description {
		margin-left:40%;
	}

	/*detail*/
	body:not(.home) #content > div > div:nth-child(1).inn section {
		background: url(images/person03.png) right top no-repeat;
		background-size:30%;
	}

	body:not(.home) #content > div > div:nth-child(1).inn section .description {
		width:55%;
	}

	body:not(.home) #content > div > div:nth-child(2).inn section {
		background: url(images/person04.png) left top no-repeat;
		background-size:30%;
	}

	body:not(.home) #content > div > div:nth-child(2).inn section .description {
		margin-left:40%;
		width:60%;
	}

	body:not(.home) #content > div > div:nth-child(3).inn section {
		background: url(images/person05.png) right top no-repeat;
		background-size:26%;
	}

	body:not(.home) #content > div > div:nth-child(3).inn section .description {
		width:65%;
	}

	body:not(.home) #content > div > div:nth-child(6).inn section {
		background: url(images/person07.png) left top no-repeat;
		background-size:20%;
	}

	body:not(.home) #content > div > div:nth-child(6).inn section .description {
		margin-left:30%;
		width:70%;
	}

	body:not(.home) #content > div > div:nth-child(7).inn section {
		background: url(images/person06.png) right top no-repeat;
		background-size:26%;
	}

	body:not(.home) #content > div > div:nth-child(7).inn section .description {
		width:65%;
	}
}

@media screen and (max-width: 768px) {
	/*.about*/
	#content .inn.about {
		position:relative;
		margin-top:200px;
	}

	#content .inn.about:before {
		position:absolute;
		top:-200px;
		left:0;
		content:'';
		width:100%;
		height:200px;
		background:url(images/person03.png) center -150px no-repeat #df7978;
		background-size:cover;
	}

	/*.person*/
	#content .inn.person {
		position:relative;
		margin-top:200px;
	}

	#content .inn.person:before {
		position:absolute;
		top:-200px;
		left:0;
		content:'';
		width:100%;
		height:200px;
		background:url(images/person02.png) center -100px no-repeat#ff0;
		background-size:cover;
	}

	/*detail*/
		body:not(.home) #content > div > div.inn {
		position:relative;
		margin-top:200px;
	}

	body:not(.home) #content > div > div.inn:before {
		position:absolute;
		top:-200px;
		left:0;
		content:'';
		width:100%;
		height:200px;
	}

	body:not(.home) #content > div > div:nth-child(1).inn:before,
	body:not(.home) #content > div > div:nth-child(6).inn:before {
		background:url(images/person03.png) center -100px no-repeat #df7978;
		background-size:cover;
	}

	body:not(.home) #content > div > div:nth-child(2).inn:before,
	body:not(.home) #content > div > div:nth-child(7).inn:before {
		background:url(images/person04.png) center -60px no-repeat #df7978;
		background-size:cover;
	}

	body:not(.home) #content > div > div:nth-child(3).inn:before,
	body:not(.home) #content > div > div:nth-child(8).inn:before {
		background:url(images/person05.png) center -80px no-repeat #df7978;
		background-size:cover;
	}

	body:not(.home) #content > div > div:nth-child(4).inn:before {
		background:url(images/person07.png) center -120px no-repeat #df7978;
		background-size:cover;
	}

	body:not(.home) #content > div > div:nth-child(5).inn:before {
		background:url(images/person06.png) center -120px no-repeat #df7978;
		background-size:cover;
	}

}

/*
===== form setting ===========================
*/
#contact table {
	width:100%;
}

#contact table th {
	padding:8px;
	color:#fff;
	font-weight:normal;
	background:#2ea7e0;
}

#contact table td {
	padding:8px;
	background:#fff;
}

@media screen and (min-width: 769px) {
	#contact table th {
		width:45%;
		font-size:75%;
	}
}

@media screen and (max-width: 768px) {
	#contact table th,
	#contact table td {
		display:block;
	}
}

.require {
	margin-left:6px;
	padding:4px 8px;
	font-size:65%;
	color:#fff;
	background:#c00;
	border-radius:8px;
}

input[type="text"],
input[type="email"],
textarea {
	font-size:110%;
	width:100%;
}

p:has(input[type="submit"]),
p:has(input[type="reset"]) {
	text-align:center;
}

input[type="submit"],
input[type="reset"] {
	font-family: "ta-kakugo-gf-02", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#fff;
	background:#000;
	border:none;
}

input[type="submit"] {
	margin:48px 0 0;
	padding:24px 120px;
	font-size:24px;
	border-radius:36px;
}

input[type="reset"] {
	margin:24px 0 0;
	padding:10px 24px;
	font-size:14px;
	border-radius:36px;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
	cursor:pointer;
	background:#df7978;
}

/*================== header ======================*/


/*================== footer ======================*/
footer {
	width:100%;
	height:160px;
	text-align:center;
	background:url(images/foot_city.png) bottom repeat-x;
	background-size:16%;
}

@media screen and (max-width: 769px) {
	footer {
		background-size:40%;
	}
}

footer .inn {
	position:absolute;
	bottom:0;
	padding:8px 0;
	width:100%;
	text-align:center;
	font-size:80%;
	color:#fff;
}

footer a {
	color:#fff;
}

footer a:hover {
	text-decoration:none;
}

/*========== other setting ===================*/

.area_caution {
	margin:16px 0;
	padding:8px;
	font-size:120%;
	background:#fff;
	border:solid 8px #df7978;
}

.area_caution dt {
	margin-bottom:0.8rem;
	font-size:1.8rem;
	font-weight:900;
}

.area_caution dd {
	margin-bottom:1.6rem;
	line-height:1.6;
}

.area_caution dd:last-child {
	margin-bottom:0;
}

/* --------------------------- contents ---------------------------- */

/*======================動画用　他とブレイクポイントを変えてる==========================*/

@media screen and (min-width: 1024px) {
	.mv-container {
		margin:1.0em 0;
		display:flex;
		justify-content:space-around;
		width:100%;
	}


	.mv iframe {
		width:560px;
		height:315px;
	}
}

@media screen and (max-width: 1023px) {
	.mv {
		margin:1.0em 0;
		position:relative;
		width:100%;
		padding-top:56.25%;
	}

	.mv iframe {
		position:absolute;
		top:0;
		right:0;
		width:100%;
		height:100%;
	}
}


.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}