@charset "utf-8";

@property --text-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #231815;
}

* {
	padding:0;
	margin:0px;
	outline:none;
	}
html {
	overflow: auto;
	}

body {
	overflow: hidden;
	text-align:center;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	line-height: 1.86;
	-webkit-text-size-adjust:100%;
	color: var(--text-color);
}
.serif {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  font-style: normal;
}
.forum {
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
}
img {
	vertical-align:top;
	border:0;
	width: 100%;
	height: auto;
	}
p {
	max-height: 100%;
}
li {
	list-style-type: none;
}
a {
	text-decoration: none;
	color: var(--text-color);
}

/* --- class and other set --- */
.shadow {
	filter:drop-shadow(0.35rem 0.35rem 0.25rem rgba(0, 0, 0, 0.75));
}
.just {
	text-align: justify;
}
@media screen and (min-width: 1384px) {
html { font-size: 20px;}
}
@media screen and (min-width: 769px) {
html { font-size: 1.43vw;}
.contents { min-width: 78%; margin-inline: auto; max-width: min(94%, 940px);}
.sp { display:none;}
}
@media screen and (max-width: 768px) {
html { font-size: 3.125vw;}
.pc { display:none;}
}


/*
#header
*/
#header {
	width: 100%;
}

@media screen and (min-width: 769px) {
#header {
	height: 5rem;
	color: #fff;
	background-color: rgba(255,255,255,0);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
#header .contents {height: 100%;  margin-inline: auto; display: flex; justify-content: space-between; align-items: center; }
#header .logo { width: 15%;}
#header #menu { width: 56%;}
#header #menu ul { width: 100%; display: flex; justify-content: space-between; align-items: center;}
#header #menu ul li a { font-size: .7rem; color: #fff;}
}
@media screen and (max-width: 768px) {
#header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	height: 7rem;
	transition: background-color ease .4s;
}
#header .logo { display: flex; align-items: center; justify-content: center; width: 34.2%; height: 7rem; position: fixed; top: 0; left: 6.5%; transition: opacity ease .4s;}
#header .logo.blk { opacity: 0;}
#header .menubtn {
	position: fixed;
	top: 0;
	right: 0;
	width: 17.5%;
	height: 7rem;
	display: grid;
	align-items: center;
	justify-content: center;
	user-select: none;
}
#header.float,
#header.open {background-color: rgba(255,255,255,1);}
#header.float .logo.blk,
#header.open .logo.blk { opacity: 1;}
#header.float  .logo.wht,
#header.open .logo.wht { opacity: 0;}
#header .menubtn img.open { width: 2.05rem;}
#header .menubtn img.open.blk { display: none;}
#header .menubtn img.close { width: 1.4rem; display: none;}

#header #menu {
	height: 100dvh;
	width: 100%;
	position: fixed;
	left: 100%;
	top: 7rem;
	background-color: #fff;
	transition: all .5s ease;
}
#header.open #menu {
	left: 0;
}
#header.float .menubtn img.open.wht { display: none;}
#header.float .menubtn img.open.blk { display: inline-block; }
#header.open .menubtn img.open,
#header.open.float .menubtn img.open { display: none;}
#header.open .menubtn img.close,
#header.open.float .menubtn img.close { display: inline-block; }
#menu ul {
	border-top: 1px solid #999;
}
#menu li a {
	display: block;
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 3.5;
	color: var(--text-color);
	border-bottom: 1px solid #999;
}
}


/*
#top
*/

#top { position: relative; background-size: cover; color: #fff;}
#top p.serif { position: absolute;}
@media screen and (min-width: 769px) {
#top { background-image: url(/special/aandsagete/images/main.jpg); height: min(53svw, 100dvh);}
#top p.serif { width: 100%; font-size: 2.05rem; line-height: 1.85; inset: 42% 0;}
}
@media screen and (max-width: 768px) {
#top { background-image: url(/special/aandsagete/images/main_sp.jpg); height: min(165svw, 100dvh);}
#top p.serif { font-size: 2.1rem; line-height: 1.55; text-align: left; inset: auto auto 8.6% 6%; text-indent: -0.4em;}
}

/*
section
*/
.sns { margin-inline: auto;}
section p.al { text-align: left;}
section p.link a { display: inline-block; background-color: #fef6e8; font-weight: 600;}
.sns li a { user-select: none;}

@media screen and (min-width: 769px) {
section { padding: 3rem 0 3.5rem;}
section hgroup { margin-bottom: 1.75rem;}
section hgroup h2 { font-size: 3rem; line-height: 1; margin-bottom:.9rem;}
section p { font-size: 0.7rem;}
section hgroup p { font-size: 0.9rem;}
section p.sub { font-size: .95rem; font-weight: 600;}
.sns li { width: 1.4rem; margin: 0 .15rem; display: inline-block;}
section p.link a { font-size: 1.2rem; line-height: 3.4rem; border-radius: 1.7rem; width: 14.5rem; transition: background-color ease .4s;}
section p.link a:hover { background-color: #d2b594;}
}
@media screen and (max-width: 768px) {
section { padding: 4rem 6.5%; box-sizing: border-box;}
section hgroup { margin-bottom: 3rem;}
section hgroup h2 { font-size: 2.5rem; line-height: 1; margin-bottom:.9rem;}
section p { font-size: 1.1rem;}
section hgroup p { font-size: 1rem;}
section p.sub { font-size: 1.2rem; font-weight: 600;}
.sns li { width: 2.75rem; margin: 0 1rem; display: inline-block;}
section p.link a { font-size: 1.2rem; line-height: 3.4rem; border-radius: 1.7rem; width: 14.5rem;}
}


/*
#section recruit
*/
section#recruit p { font-weight: 500;}
@media screen and (min-width: 769px) {
}
@media screen and (max-width: 768px) {
}
/*

/*
#section about
*/
section#about { background-size: cover;}
@media screen and (min-width: 769px) {
section#about { background-image: url(/special/aandsagete/images/img1.jpg); box-sizing: border-box; padding: 5.5rem 0 0 0; aspect-ratio: 1394 / 704; }
section#about .contents .box { box-sizing: border-box; width: 35%; margin: 0 0 0 57%;}
section#about .contents .box p.al { line-height: 1.6; width: 100%; margin-left: 4%;}
section#about .contents .box p.sub { margin-bottom: 1em;}
section#about .contents .box .sns { margin: 1.25rem 0;}
}
@media screen and (max-width: 768px) {
section#about { background-image: url(/special/aandsagete/images/img1_sp.jpg); box-sizing: border-box; aspect-ratio: 640 / 975; }
section#about .contents .box p.sub { margin: 7.5rem 0 2rem;}
section#about .contents .box .sns { margin: 2rem 0 3rem;}
}

/*
#section people
*/
section#people .shelf .unit a,
section#people .shelf .unit a span { display: block; text-align: left;}
@media screen and (min-width: 769px) {
section#people hgroup { margin-bottom: 2.3rem;}
section#people .shelf { width: 100%; display: flex; justify-content: space-between;}
section#people .shelf .unit { width: 29.8%; }
section#people .shelf .unit a picture { display: block; aspect-ratio: 642 / 975; overflow: hidden;}
section#people .shelf .unit a img { transform: scale(1); transition: all ease .5s;}
section#people .shelf .unit a:hover img { transform: scale(1.1);}
section#people .shelf .unit span { font-size: .7rem;}
section#people .shelf .unit span.sub { font-size: 1.15rem; line-height: 1.6; margin: .5em 0;}
}
@media screen and (max-width: 768px) {
section#people .shelf div.unit:not(:last-of-type) { margin-bottom: 3.5rem;}
section#people .shelf .unit span { text-align: left; font-size: 1.1rem; }
section#people .shelf .unit span.sub { font-size: 1.2rem; font-weight: 600; margin: 1em 0 0.25em;}
}

/*
#section benefits
*/
section#benefits { background-color: #d2b594;}
section .unit.group { text-align: left;}
@media screen and (min-width: 769px) {
section .unit.group {margin: 0 13%;}
section .unit.group p.sub { font-size: 1.2rem; margin: 1.6em 0 .5em;}
}
@media screen and (max-width: 768px) {
section .unit.group p.sub { margin: 2em 0 .25em;}
}

/*
#section career
*/
section#career #chart { background-color: #f0e7db;}
section#career #chart p { display: grid; place-items: center;  font-weight: 500;}
section#career #chart p.ttl { font-weight: 600;}
section#career #chart p.plt { background-color: #fff;}
section#career #chart p.plt2 { background-color: #c1ad9e; margin-inline: auto;}
section#career #chart .shelf { width: 100%; display: flex; justify-content: space-between;}
section#career #chart .box { border: 2px solid #c1ad9e;}
section#career #chart .rel { position: relative;}
section#career #chart .rel::after { position: absolute; content: ""; display: block; background-color:#c1ad9e;} 
@media screen and (min-width: 769px) {
section#career #chart { margin: 1.5rem 5% 3rem; padding: 1.5rem 7% 2rem;}
section#career #chart p.plt { height: 4em; margin: 1.5rem 0 0;}
section#career #chart p.plt2 { height: 1.5rem; width: 7.7rem; margin-top: -0.75rem; margin-bottom: 1rem;}
section#career #chart p.plt.large { width: 22.6rem; margin-inline: auto;}
section#career #chart p.plt:nth-of-type(2){ margin-top: 1rem;}
section#career #chart .box.shop .unit p.plt:nth-of-type(2){ margin-top: .5rem;}
section#career #chart .box.office p.plt:nth-of-type(2){ height: 4.5rem; margin-top: 1.75rem;}
section#career #chart .box.office p.plt:nth-of-type(3){ margin-top: .75rem;}
section#career #chart p.plt.leader { margin-top: 2rem;}
section#career #chart p.plt.small { width: 7rem; line-height: 1.4;}
section#career #chart .shelf .box { width: 46%; margin: 3rem 0 0; padding: 0 1.5rem 1.2rem 1.5rem; box-sizing: border-box;}

section#career #chart .rel::after { width: 2px; height: 2px;}
section#career #chart p.plt.large.rel:nth-of-type(2)::after { height: 1rem; left: calc(50% - 1px); bottom:-1rem;}
section#career #chart p.plt.large.leader.rel::after { height: 1.5rem; left: calc(50% - 1px); bottom:-1.5rem;}
section#career #chart .shelf.rel::after { width: 54%; left: 23%; top: 1rem;}
section#career #chart p.plt2.rel::after { height: calc(1.3rem + 2px); left: calc(50% - 1px); top: calc(-1.25rem - 2px);}
section#career #chart p.plt.small.rel::after { height: 1.5rem; left: calc(50% - 1px); bottom: -1.5rem;}
section#career #chart .box.rel::after { height: 2rem; bottom: calc(-2rem - 2px);}
section#career #chart .box.shop.rel::after { right: 26%;}
section#career #chart .box.office.rel::after { left: 26%;}
}
@media screen and (max-width: 768px) {
section#career #chart { margin: 2.5rem -6.5dvw 3rem; padding: 2rem 6% 2rem;}
section#career #chart .box { border-width: 1px; width: 48%; margin: 3rem 0 0; padding: 0 .75rem 1.2rem; box-sizing: border-box;}
section#career #chart p.course { font-size: .85rem; letter-spacing: -0.05em;  line-height: 1.5;}
section#career #chart p.ttl { font-size: 1.1rem;}
section#career #chart p.plt { font-size: 1rem; height: 2.8rem; margin: 1.6rem 0 0;}
section#career #chart p.plt2 { font-size: 1rem; height: 2rem; width: 8.6rem; margin-top: -1rem; margin-bottom: 1rem;}
section#career #chart p.plt.large { width: 22.6rem; margin-inline: auto;}
section#career #chart p.plt.mid,
section#career #chart p.plt.small { height: 4.6rem; line-height: 1.6;}

section#career #chart .box.shop .unit:nth-of-type(1) { width: 44%;}
section#career #chart .box.shop .unit:nth-of-type(2) { width: 50%;}
section#career #chart .box.shop .unit p.plt:nth-of-type(2){ margin-top: .75rem;}
section#career #chart .box.shop .unit:nth-of-type(2) p.plt span { font-size: .9rem;display: inline-block;}
section#career #chart .box.shop .unit:nth-of-type(2) p.plt span > span {letter-spacing: -0.1em; }
section#career #chart .box.office p.plt:nth-of-type(2){ height: 6.8rem; margin-top: 2.1rem;}

section#career #chart .rel::after { width: 1px; height: 1px;}
section#career #chart p.plt.large.rel:nth-of-type(2)::after { height: 1rem; left: calc(50% - .5px); bottom:-1rem;}
section#career #chart p.plt.large.leader.rel::after { height: 1.5rem; left: calc(50% - .5px); bottom: -1.6rem;}
section#career #chart .shelf.rel::after { width: 52%; left: 24%; top: 1rem;}
section#career #chart p.plt2.rel::after { height: calc(1.3rem); left: calc(50% - .5px); top: calc(-1rem - 1px);}
section#career #chart p.plt.small.rel::after { height: 1.5rem; left: calc(50% - .5px); bottom: -1.6rem;}
section#career #chart .box.rel::after { height: 2rem; bottom: calc(-2rem - 1px);}
section#career #chart .box.shop.rel::after { right: 26%;}
section#career #chart .box.office.rel::after { left: 26%;}
}


/*
#section visions
*/


@media screen and (min-width: 769px) {
#ytmovie { width: 90%; margin-inline: auto;}
#ytmovie iframe { display: block; width; 100%; aspect-ratio: 16 / 9;}
}
@media screen and (max-width: 768px) {
#ytmovie { display: block; aspect-ratio: 16 / 9; overflow: hidden; position: relative;}
#ytmovie iframe { display: block; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0;}
}
/*
#section q&a
*/
section#q-and-a { background-color: #d2b594;}
section .qa { border-top: 2px solid #fff; text-align: left;}
section .qa:last-child { border-bottom: 2px solid #fff; }
section .qa .q { font-weight: 600; display: block; position: relative;}
section .qa .q::after { content:""; position: absolute; display: block; width: .9em; height:.66em; background-image: url(/special/aandsagete/images/arrow.svg); background-position: center; background-repeat: no-repeat;
transform: rotate(0deg); transition: all ease .5s; }
section .qa.open .q::after { transform: rotate(180deg);}
section .qa .cont { overflow: hidden; height: 0;}
section .qa.open .cont { height: auto;}
@media screen and (min-width: 769px) {
section .qa { width: 90%; margin-inline: auto; padding: 2rem 0;}
section .qa .q { margin: 0 2% 0 7%;}
section .qa .q span { display: inline-block; margin-right: .25em;}
section .qa .a { margin: 1em 7% 0 7%;}
section .qa.open .a { margin-top: 1em;}
section .qa .q::after { right: 0; top:0.59em;}
}
@media screen and (max-width: 768px) {
section .qa { padding: 2rem 0; border-width: 1px;}
section .qa:last-child { border-bottom: 1px solid #fff; }
section .qa .q {  border-width: 1px; font-size: 1.2rem; padding: 0 12% 0 0; margin-left: 1.2em;}
section .qa .q span { display: inline-block; width: 1.2em; margin-left: -1.2em;}
section .qa .q::after { width: 2rem; height: 100%; right: 2%; top:0;}
section .qa .a { margin: 1.25em 0 0 0;}
section .qa a.q { -webkit-tap-highlight-color: transparent;}
}
/*
#section lower-link
*/
section#lower-link { padding: 0; background-size: cover;}
@media screen and (min-width: 769px) {
section#lower-link { background-image: url(/special/aandsagete/images/img3.jpg); aspect-ratio: 1394 / 410; }
section#lower-link .box { display: inline-block; margin: 5.8rem 0 0 45%;}
section#lower-link .box .logo { width: 9.4rem; margin-inline: auto; margin-bottom: 2.5rem;}

}
@media screen and (max-width: 768px) {
section#lower-link { background-image: url(/special/aandsagete/images/img3_sp.jpg); aspect-ratio: 1279 / 817; }
section#lower-link .box .logo img { width: 9.4rem; margin-inline: auto; margin: 6.5rem 0 2.3rem;}
}

/*
#footer
*/
@media screen and (min-width: 769px) {
#footer { padding: 2.5rem 0 0;}
#footer .box * { display: inline-block; vertical-align: baseline;}
#footer .box .logo { width: 10.9rem;}
#footer .box p { font-size: .7rem; margin-left: 2rem; text-align: left;}
#footer .sns { margin: 1.25rem 0 1.25rem;}
#footer .copyright { width: 90%; margin-inline: auto; border-top: 2px solid #c1ad9e; font-size: .65rem; padding: .5rem 0 1rem;}
}
@media screen and (max-width: 768px) {
#footer { padding: 2.5rem 0 0;}
#footer .box .logo { width: 10.9rem; margin-inline: auto;}
#footer .box p { font-size: .85rem; display: inline-block; text-align: left; margin-inline: auto; margin-top: 2rem;}
#footer .sns { margin: 2rem 0 2.5rem;}
#footer .copyright { width: 90%; margin-inline: auto; border-top: 1px solid #c1ad9e; font-size: .9rem; padding: 1rem 0 1rem;}
}