@charset "UTF-8";

/*  ==================================================
util
==================================================  */
@media print, screen
{

/* =========================
picture
========================= */
picture
{
	display: block;
	width: 100%;
}
picture img
{
	display: block;
	width: 100%;	height: 100%;
	object-fit: cover;
}
picture.auto img{	width: auto;	}
picture.contain img{	object-fit: contain;	}
picture.center img{	margin: 0 auto;	}


/* =========================
spacer
========================= */
[class^="spacer"]
{
	background: none;
	border: none;
}

.spacer20{	height: 20px;	}
.spacer40{	height: 40px;	}
.spacer60{	height: 60px;	}
.spacer80{	height: 80px;	}
.spacer100{	height: 100px;	}


/* =========================
bgGray
========================= */
.bgGray
{
	position: relative;
	padding: 60px 0;
}
.bgGray:before
{
	z-index: -1;
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100vw;	height: 100%;

	margin: 0 calc(50% - 50vw);
	background: #f8f8f8;
}

}

/*  ==================================================
元々あったものに対して
==================================================  */
@media print, screen
{

.noBG::before{	content: unset;	}

.youtube
{
	display: block;
	width: min(100%,800px);	aspect-ratio: 800/450;
	margin: 0 auto;
}

.group-detail-section > h2
{
	margin: 0 0 60px;

	font-size: clamp(1.6rem, 1.56vw, 3rem);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1.45;
}

.group-detail-section.buttonOnly
{
	display: block !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
.group-detail-section.buttonOnly .group-detail{	display: none !important;	}
.group-detail-section.buttonOnly .button
{
	display: block !important;
	margin: 0 auto !important;
}
.button.noAfter a::after{	content: unset !important;	}

.group-detail-section video
{
/* width: 1080px; */
margin: 0 auto;
}
}


@media screen and (min-width: 1000px) and (max-width: 1200px)
{
    .group-detail-section video
    {
    /* width: 90vw; */
    margin: 0 auto;
    }

}

@media screen and (min-width: 1000px)
{

}
@media screen and (max-width: 999px)
{
    .group-detail-section video
    {
    /* width: 92vw; */
    margin: 0 auto;
    }

}

/*  ==================================================
mainVisual
==================================================  */
@media print, screen
{

#mainVisual{	margin: 0 auto;	}
#mainVisual > .inner{	margin: 0 auto;	}

#mainVisual .boxes{	position: relative;	}
#mainVisual .box02
{
position: absolute;
top: 5rem!important;
}
#mainVisual .box:nth-child(1)
{
	z-index: 2;
	position: absolute;
	top: 3rem; left: 0;

	width: calc(1200px - 720px + 2rem);
	padding: 4rem 0 4rem 4rem;

	background: rgb(255,255,255,0.8);
	backdrop-filter: blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
	box-shadow: 0 0 1rem rgb(51,51,51,0.15);
}

#mainVisual .boxes > .box:nth-child(2)
{
	width: 720px;
	margin: 0 0 0 auto;
}
#mainVisual picture{	aspect-ratio: 720/460;	}

#mainVisual .category
{
	width: fit-content;
	margin: 0 0 5px;
	padding: 13px 10px;
	background: #707F89;

	color: #fff;
	font-size: clamp(1.1rem, 0.73vw, 1.4rem);
	font-weight: 500;
}
#mainVisual h1
{
	margin: 0 0 1.5rem;

	font-size: clamp(2.3rem, 1.77vw, 3.4rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.45;
}
#mainVisual hr
{
	margin: 0 0 1.5rem;
	border: none;
	border-bottom: 2px solid #EEEEEE;
}
#mainVisual p
{
	padding: 0 4rem 0 0;
	font-size: clamp(1.6rem, 0.94vw, 1.8rem);
	line-height: 1.8;
}
#mainVisual p:has( + p){	margin-bottom: 1rem;	}

}
@media screen and (min-width: 1000px)
{

}
@media screen and (max-width: 999px)
{

#mainVisual{	margin: 0 auto -2rem;	}
#mainVisual .box:nth-child(1)
{
	position: relative;
	top: 0;	left: 0;

	width: 100%;
	padding: 0 0 5rem;
	box-shadow: unset;
}
#mainVisual .box02
{
top: 0rem!important;
}
#mainVisual .boxes > .box:nth-child(2)
{
	width: 100%;
	transform: translate(15px, -2rem);
}

#mainVisual p
{
	padding: 0 0 0 0;
}

}

/*  ==================================================
lead
==================================================  */
@media print, screen
{

#lead
{
	/* width: min(100%, 1030px); */
	margin: 0 auto;
}
#lead > .inner
{
	padding: 0 40px;
	margin: 0 auto;
}

#lead p
{
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	letter-spacing: 0.01em;
	line-height: 1.45;
}
#lead p:has( + p){	margin-bottom: 1rem;	}

}
@media screen and (min-width: 1000px)
{

}
@media screen and (max-width: 999px)
{

#lead > .inner
{
	width: 100%;
	padding: 0;
}

}

/*  ==================================================
business
==================================================  */
@media print, screen
{

#business
{
	/* width: min(100%, 1030px); */
	margin: 0 auto;
}
#business > .inner{	margin: 0 auto;	}
#business h2
{
	margin: 0 0 60px;

	font-size: clamp(1.6rem, 1.56vw, 3rem);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1.45;
}
#business .item
{
	padding: 40px 60px;
	margin: 0 auto;
	background: white;
}
#business .item:has( + .item){	margin-bottom: 40px;	}

#business .item [class^="boxes"]
{
	display: flex;
	gap: 20px;
}
#business .item .boxes:has(.box:nth-child(2)) .box{	width: calc((100% - 20px)/2);	}
#business .item .boxes:has(.box:nth-child(3)) .box{	width: calc((100% - 20px * 2)/3);	}
#business .item [class^="boxesA"] .box:nth-child(1){	width: calc((100% - 20px) * 0.7) !important;	}
#business .item [class^="boxesA"] .box:nth-child(2){	width: calc((100% - 20px) * 0.3) !important;	}
#business .item [class^="boxesB"] .box:nth-child(1){	width: calc((100% - 20px) * 0.3) !important;	}
#business .item [class^="boxesB"] .box:nth-child(2){	width: calc((100% - 20px) * 0.7) !important;	}

#business .item h3
{
	margin: 0 0 20px;

	font-size: clamp(1.8rem, 1.15vw, 2.2rem);
	font-weight: 700;
	line-height: 1.75;
}
#business .item p
{
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	letter-spacing: 0.01em;
	line-height: 1.45;
}
#business .item p:has( + p){	margin-bottom: 1rem;	}

#business .item p.annotation
{
	color: rgb(100,100,100);
	font-size: 0.8em;
}

#business table
{
	width: 100%;
	border-collapse: collapse;
}
#business table tr:nth-child(2n){	background: #f8f8f8;	}
#business table th, #business table td
{
	padding: 0.5em;
	border: 1px solid black;
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
}
#business table th
{
	background: black;
	color: white;
}

#business p > a
{
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


}
@media screen and (min-width: 1000px)
{

#business a:hover{	text-decoration: none;	}

}
@media screen and (max-width: 999px)
{

#business .item{	padding: 30px 15px;	}
#business .item [class^="boxes"]{	flex-direction: column-reverse;	}
#business .item .boxes:has(.box:nth-child(2)) .box{	width: 100%;	}
#business .item .boxes:has(.box:nth-child(3)) .box{	width: 100%;	}
#business .item [class^="boxesA"] .box:nth-child(1){	width: 100% !important;	}
#business .item [class^="boxesA"] .box:nth-child(2){	width: 100% !important;	}
#business .item [class^="boxesB"] .box:nth-child(1){	width: 100% !important;	}
#business .item [class^="boxesB"] .box:nth-child(2){	width: 100% !important;	}

}

/*  ==================================================
overview
==================================================  */
@media print, screen
{

#overview
{
	width: min(100%, 1030px);
	margin: 0 auto;
}
#overview h2
{
	margin: 0 0 60px;

	font-size: clamp(1.6rem, 1.56vw, 3rem);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1.45;
}

#overview ul
{
	border-top: 1px solid #EEEEEE;
}
#overview li
{
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
#overview dl{	display: flex;	}
#overview dt
{
	width: 260px;
	padding: 0 50px;
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
}
#overview dd
{
	flex: 1;
	-webkit-flex: 1;
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	line-height: 1.5;
}

}
@media screen and (min-width: 1000px)
{

}
@media screen and (max-width: 999px)
{

#overview li{	padding: 25px 0;	}
#overview dl{	flex-direction: column;	}
#overview dt
{
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
}
#overview dd{	width: 100%;	}

}

/*  ==================================================
history
==================================================  */
@media print, screen
{

#history
{
	width: min(100%, 1030px);
	margin: 0 auto;
}
#history > .inner
{
	width: 80%;
	padding: 60px;
	margin: 0 auto;
	background: #f8f8f8;
}

#history h2
{
	margin: 0 0 60px;

	font-size: clamp(1.6rem, 1.56vw, 3rem);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1.45;
}

#history ul
{
	display: flex;	flex-direction: column;
	gap: 0.5rem;
}
#history dl{	display: flex;	}
#history dt
{
	flex-shrink: 0;
	width: 8em;
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	line-height: 1.5;
}
#history dd
{
	width: calc(100% - 8em);
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	line-height: 1.5;
}

}
@media screen and (min-width: 1000px)
{

}
@media screen and (max-width: 999px)
{

#history > .inner
{
	width: 100%;
	padding: 60px 15px;
}

}


/*  ==================================================
product
==================================================  */
@media print, screen
{

#product{	margin: 0 auto;	}
#product > .inner{	margin: 0 auto;	}
#product h2
{
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
	margin: 0 0 60px;

	font-size: clamp(1.6rem, 1.56vw, 3rem);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1.45;
}

#product ul
{
	display: flex;	flex-wrap: wrap;	align-items: stretch;
	gap: 15px;
}
#product li
{
	width: calc((100% - 15px * 3)/4);
	border: 1px solid black;
}
#product li > .inner
{
	position: relative;
	display: block;
	height: 100%;
	padding: 2rem 2rem 60px;
}
#product li picture
{
	display: block;
	width: 100%;	aspect-ratio: 16/9;
}
#product li picture img
{
	display: block;
	width: 100%;	height: 100%;
	object-fit: cover;
}
#product li h3
{
	margin: 2rem 0 0;
	font-size: clamp(1.8rem, 1.15vw, 2.2rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.45;
}
#product li .sub
{
	margin: 0.75rem 0 0;
	color: #888;
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.45;
}
#product li .detail
{
	margin: 1.5rem 0 0;
	font-size: clamp(1.5rem, 0.83vw, 1.6rem);
	letter-spacing: 0.01em;
	line-height: 1.45;
}


#product li > a:after
{
	content: "";
	position: absolute;
	bottom: -1px;	right: -1px;
	width: 75px;	aspect-ratio: 75/60;
	background: url(../common/images/icon_more_business_solution.svg) center / contain no-repeat;
}

#product .nolink
{
    position: relative;
    display: block;
    height: 100%;
    padding: 2rem 2rem 60px;
    height: 400px;;
}

}
@media screen and (min-width: 1000px)
{

#product li > a:after{	opacity: 0;	transition: 0.5s ease;	}
#product li > a:hover:after{	opacity: 1;	}

}
@media screen and (min-width: 500px) and (max-width: 999px)
{

#product li{	width: calc((100% - 2rem)/2);	}

}
@media screen and (max-width: 499px)
{

#product li{	width: 100%;	}

}