@charset "utf-8";
/* CSS Document */

/*body*/
body {
	overflow-x: hidden;
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*main*/
main {
	width: calc(100% - 40px);
	max-width: 1100px;
	margin: auto;
	padding: 0 20px;
    position: relative;
    z-index: 1;
}

/*section*/
.section {
	margin-bottom: 200px;
}

/*font*/
	/* font-family :20240314 font-family全て変更*/
	body,h1,h2,h3,h4,p,a,.h0,.h1,.h2,.h3,.h4,.p,.caption { font-family: all-round-gothic, yu-gothic-pr6n, hiragino-kaku-gothic-pron, sans-serif; }
	h1,.h1 { font-size: 25px; font-weight:600; color: rgba(0,0,0,1); display: block; } @media screen and (min-width: 750px) { h1,.h1 { font-size: 35px; } }
	h2,.h2 { font-size: 18px; font-weight:600; color: rgba(0,0,0,1); display: block; } @media screen and (min-width: 750px) { h2,.h2 { font-size: 25px; } }
	h3,.h3 { font-size: 16px; font-weight:600; color: rgba(0,0,0,1); display: block; } @media screen and (min-width: 750px) { h3,.h3 { font-size: 18px; } }
	h4,.h4 { font-size: 15px; font-weight:600; color: rgba(0,0,0,1); display: block; } @media screen and (min-width: 750px) { h4,.h4 { font-size: 17px; } }
	p,.p { font-size: 12px; font-weight:400; color: rgba(0,0,0,.8); display: block; } @media screen and (min-width: 750px) { p,.p { font-size: 15px; } }
	.caption { font-size: 10px; font-weight:400; color: rgba(0,0,0,.5); display: block; margin: -10px 0 0 0; } @media screen and (min-width: 750px) { .caption { font-size: 12px; } }
	a { font-size: inherit; font-weight:inherit; color: inherit;}
	/*font span inline-block*/
	body span,h1 span,h2 span,h3 span,h4 span,p span,a span,.h0 span,.h1 span,.h2 span,.h3 span,.h4 span,.p span,.caption span { display: inline-block; }
	.no-decoration { text-decoration: none; }
/*end font*/

/* scroll */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
.animation-fade-in {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 2s ease ,transform 1s ease;
}
.animation-fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/*align*/
.center {
	display: flex;
	justify-content: center;
    align-items: center;
    flex-direction: column;
}
.text-center {
	text-align: center;
}
.left {
	display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
.img,
.icon {
	display: block;
}

/*PC or MOBILE*/
.mobile-only {
	display: none;
}
.desktop-only {
	display: flex;
}

/*button*/
.button {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255,255,255,1);
    text-decoration: none;
    font-size: 15px;
    min-width: 10em;
    padding: 10px 30px;
    border-radius: 40px;
    display: flex !important;
	flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}




/*header*/
#header {
	height: 70px;
	width: 100%;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 99999999;
}
#logo {
	max-width:50%;
	display:block;
}
#header-logo {
	height: 15px;
	width: auto;
	opacity: 0;
	transition: opacity 0.5s ease;
	display: none;
	pointer-events: none;
}
nav{
	width: 100%;
	height: 70px;
	position: relative;
}
.drawer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: 70px;
	padding: 0 30px;
}

/*ナビゲーション部分*/
.menu{
	position: relative;
	text-align: left;
	transition: .5s ease;/*滑らかに表示*/
	-webkit-transform: translateX(105%);
	transform: translateX(105%);/*左に隠しておく*/
}
.menu ul {
	list-style: none;
}
.menu ul li a {
	display:block;
	font-weight:500;
	padding: 20px;
	text-decoration:none;
	color: rgba(0,0,0,.8);
}
.menu ul li a:hover {
	color: rgba(0,0,0,1);
}
.menu ul li:last-child a:hover {
	color: rgba(255,255,255,1);
}
/*OPEN時の動き*/
.menu.open {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
}

@media screen and (min-width: 750px) { 
	header::after {
		display:none;
	} 
	nav {
		display: flex;
	}
	.Toggle {
		display: none;
	}
	.menu {
		width: 100%;
		background-color: transparent;
		margin-top:0;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		position: absolute;
		top: 35px;
		right: 0;
		transform: translate(0, -50%);
	}
	.menu ul {
		margin: 0;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}
	.menu ul li a {
		padding: 0 1em;
		border-bottom: none;
	}
	.menu ul li:last-child a {
        padding: 10px 30px;
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,.8);
        border-radius: 40px;
        margin: 0 40px 0 20px;
	}
}
.header-overlay {
	width: 100%;
	height: 70px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999998;
	content: '';
	background-color: rgba(255,255,255,.5);
	-webkit-backdrop-filter: blur(10px) brightness(100%);
	backdrop-filter: blur(10px) brightness(100%);
}
.header-hr {
	width: 100%;
	height: 70px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999997;
	content: '';
	background-color: transparent;
	border-bottom: solid .5px rgba(0,0,0,.05)
}



/*fv*/
.section-fv {
	height: 100vh;
	width: 100%;
	margin-bottom: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#fv-logo-container {
	position: relative;
	display: inline-block;
	height: auto;
	width: auto;
}
#animated-logo {
	position: relative;
	height: 70px;
	width: 350px;
	background: linear-gradient(90deg, #B71C1C, #880E4F, #6A1B9A, #4A148C, #1A237E, #0D47A1);
	background-size: 400% 400%;
	mask-image: url("/img/Yumeoi_logotype_without_inc.svg");
	-webkit-mask-image: url("/img/Yumeoi_logotype_without_inc.svg");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	animation: color-animation 10s infinite ease-in-out;
}
/* 色のアニメーション */
@keyframes color-animation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}




/*about*/
#section-about p {
	line-height: 2.5;
}



/*company & business*/
.table {
	width: 100%;
	max-width: 900px;
	margin: 50px auto;
    display: flex;
	flex-direction: column;
}
.table-child {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: calc(70px - 30px);
    padding: 15px 20px;
    border-bottom: solid .5px rgba(0, 0, 0, .15);
}
.table-grandchild p {
	margin: 0;
}
.width-10 {
	flex: 1;
    display: flex;
    justify-content: flex-end;
}
.width-30 {
	flex: 3;
}
.width-60 {
	flex: 6;
}
.width-70 {
	flex: 7;
}
.business-img {
	height: 30px;
	width: auto;
    max-width: 130px;
}
.icon {
	height: 20px;
	width: 20px;
}
a:has(.icon) {
    display: block;
	height: fit-content;
	width: fit-content;
    margin: auto 10px auto auto ;
}



/*group-company*/
#section-group-company {
	margin-bottom: 100px;
}
#section-group-company .table {
    flex-direction: row;
    justify-content: space-evenly;
	margin: 50px auto 0;
}
#section-group-company .table-child {
    flex-direction: column;
    gap: 15px;
	border: none;
}
#section-group-company .business-img {
    height: 50px;
    width: auto;
    max-width: 130px;
}
#section-group-company p.caption {
	font-size: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}



/*contact*/
#section-contact {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 100px;
	margin: 0 calc((100% - 100vw) / 2);
}
.section-contact-inner {
    margin: 50px auto;
	padding: 30px;
    width: calc(100% - 60px);
    max-width: 900px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.section-contact-inner-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}
.section-contact-inner-child.contact-border {
    flex: unset;
    border-left: solid .5px rgba(0, 0, 0, .15);
}



/*footer*/
footer {
	width: calc(100% - 40px);
	padding: 50px 20px 20px;
	background-color: rgba(0,0,0,1);
}
#footer a {
	color: rgba(255,255,255,1.00)
}
.footer-wrapper {
    width: calc(100% - 40px);
    height: auto;
	min-height: 100px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: end;
    gap: 40px;
}
.logo {
	margin-right: auto;
}
#footer-logo {
	height: 30px;
	width: auto;
}
.footer-menu-content {
    display: block;
    text-decoration: none;
    font-weight: 400;
}

footer .caption {
	color: rgba(255,255,255,.5);
}