@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Wix+Madefor+Text:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&family=Zen+Old+Mincho:wght@700&display=swap');
html,body,h1,h2,h3,h4,h5,h6,p,span,div,object,iframe,em,ul,ol,li,label,dl,dt,dd,form,label,table,tbody,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-family:inherit; list-style-type:none; list-style-image:none; } html { font-size:62.5%; overflow-y:scroll; } img { border:none; vertical-align:bottom; line-height:0; font-size:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; } body { background: #fff; margin:0 !important; font-family:'Wix Madefor Text','Zen Maru Gothic',serif; font-size: 1.6rem; line-height:1.6; font-weight: 400; color: #000; letter-spacing:0; } .clearfix { zoom:1; min-height: 1px; } .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0.1em; line-height: 0; } .clearboth { clear: both; height: 1px; } *html .clearfix{ height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

body { background: center/40px 40px repeat url(../img/base.png); }
.nopc { display: none; }
.nosp { display: inline-block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
sup { font-size: 60%; vertical-align: text-top; line-height: 1.0; }
.kome { font-size: 87.5%; padding-left: 1.0em; text-indent: -1.0em; line-height: 1.6; }
* { box-sizing: border-box; }
* img { width: 100%; }

@media screen and (max-width:768px) {
	.nosp { display: none; }
	.nopc { display: inline-block; }
	.kome { font-size: 90%; }
}

/* --------------------------------------------------------------------------
   header / footer
-------------------------------------------------------------------------- */

header {
	position: fixed; top: 36px; left: 50%; display: flex; padding-left: 30px;
	justify-content: space-between; align-items: center; width: 90%; height: 80px;
	background: #fff; border-radius: 999px; box-shadow: 0 0 10px rgba(0,0,0,.1);
	transform: translateX(-50%); z-index: 999;
}
header h1 { width: auto; height: 80%; }
header h1 a {
	display: block; width: auto; height: 100%; aspect-ratio: 2 / 1;
	background: 0 100%/auto 200% no-repeat url(../img/logo.svg);
	text-indent: 200%; white-space: nowrap; overflow: hidden;
}

@media screen and (min-width:901px) {
	header nav { display: flex; align-items: center; height: 100%; }
	header nav a {
		position: relative; display: flex; align-items: center; padding: 0 12px; height: 100%;
		font-size: 1.6rem; color: #aa4c8f; text-align: center; font-weight: 500;
	}
	header nav a::after {
		content: ''; position: absolute; bottom: 16px; left: 50%; display: block;
		width: 0%; border-bottom: solid 2px #aa4c8f; transition: width .3s ease-in-out;
		transform: translateX(-50%);
	}
	header nav a:last-child {
		margin-left: 12px; padding: 0 24px; background: #aa4c8f;
		border: solid 2px #aa4c8f; border-radius: 999px; color: #fff; text-align: center; 
	}
	header nav a:last-child::after { content: none; }
	header nav a:last-child::before {
		content: ''; display: inline-block; width: 24px; min-width: 24px; height: 24px;
		margin-right: 10px; background: 0 0/600% auto no-repeat url(../img/ico.svg);
		vertical-align: middle;
	}
	header nav a:hover::after { width: 30%; }
	header nav a:last-child:hover { border: solid 2px #aa4c8f; background: #fff; color: #aa4c8f; }
	header nav a:last-child:hover::before { background-position: 20% 0; }
	header .menubtn { display: none; }
}
@media screen and (max-width:900px) {
	header { top: 10px; height: 60px; padding-left: 5vw; }
	header h1 { height: 92%; }
	header .menubtn {
		position: relative; width: 60px; height: 60px; background: #aa4c8f; border-radius: 100px;
	}
	header .menubtn i, header .menubtn::before, header .menubtn::after {
		content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 3px;
		background: #fff; border-radius: 2px; transform: translate(-50%,-50%);
		transition: all .5s ease; text-indent: 200%; white-space: nowrap; overflow: hidden;
	}
	header .menubtn::before { margin-top: -10px; }
	header .menubtn::after { margin-top: 10px; }
	header nav {
		display: none; position: fixed; top: 70px; left: 50%; width: 100%; padding: 0 2vw;
		background: #fff; border-radius: 30px; transform: translateX(-50%); z-index: 99;
	}
	header nav a {
		display: block; margin: 2vw 0; font-size: 1.6rem; color: #aa4c8f;
		line-height: 2.6; text-align: center; font-weight: 500;
	}
	header nav a:last-child { background: #aa4c8f; color: #fff; border-radius: 100px; }
	header nav a:last-child::before {
		content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 10px;
		background: 0 0/600% auto no-repeat url(../img/ico.svg); vertical-align: middle;
	}
	.overlay {
		opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
		background: #000; z-index: -1;
	}
	.opened header .menubtn i { opacity: 0; }
	.opened header .menubtn::before { margin: 0; transform: translate(-50%,-50%) rotate(45deg); }
	.opened header .menubtn::after { margin: 0; transform: translate(-50%,-50%) rotate(-45deg); }
	.opened .overlay {
		display: block;
		opacity: .5; transition: opacity 1s cubic-bezier(.215,.61,.355,1) 0s; z-index: 996;
	}
}

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

section { position: relative; width: 100%; min-width: 1200px; padding: 100px 0; }
section:focus,article:focus { outline: solid 1px #fff1f6; }
section h2.rbn { text-align: center; }
section h2.rbn span {
	position: relative; display: inline-block; background: #ec79a0; padding: 0 60px;
	font-size: 3.6rem; font-weight: 700; color: #fff; line-height: 2.6; letter-spacing: -.08em;
}
section h2.rbn span i {
	position: absolute; top: -0.2em; left: -80px; font: 7.0rem/1.0 'Mrs Saint Delafield';
	color: #aa4c8f; font-weight: 400; letter-spacing: 0;
	transform-origin: bottom left; transform: rotate(-18deg); 
}
section h2.rbn span::before {
	content: ''; position: absolute; top: 22px; left: -48px; width: 66px; 
	background: 0 0/200% auto no-repeat url(../img/h2.svg); aspect-ratio: 1 / 1.44;
}
section h2.rbn span::after {
	content: ''; position: absolute; top: 22px; right: -48px; width: 66px; 
	background: 100% 0/200% auto no-repeat url(../img/h2.svg); aspect-ratio: 1 / 1.44;
}
article { width: 1200px; margin: 0 auto; }
section a.out {
	display: block; width: 340px; margin: 20px 0 5px; background: #aa4c8f; border-radius: 99px;
	box-shadow: 0 4px #a60e7a; color: #fff; line-height: 3.5; text-align: center;
	transition: .5s cubic-bezier(.215,.61,.355,1);
}
section a.out::after {
	content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 10px;
	background: 0 100%/600% auto no-repeat url(../img/ico.svg); vertical-align: baseline;
}
section a.out:hover { transform: translateY(4px); box-shadow: none; }

@media screen and (max-width:768px) {
	section { min-width: 100%; padding: 64px 0; }
	section h2.rbn span { padding: 0 6vw; font-size: 2.4rem; }
	section h2.rbn span i {
		top: -0.4em; left: -2.0rem; font-size: 5.0rem; transform: rotate(-12deg);
	}
	section h2.rbn span::before { top: 1.9rem; left: -2.8rem; width: 40px; }
	section h2.rbn span::after { top: 1.9rem; right: -2.8rem; width: 40px; }
	article { width: 90%; }
	section a.out { width: 100%; }
}

/* --------------------------------------------------------------------------
   main
-------------------------------------------------------------------------- */

.main {
	background-image: url(../img/base2.png),url(../img/base1.jpg);
	background-position: center top; background-size: 120% auto,cover;
	background-repeat: no-repeat; 
}
.main .logo { width: 300px; margin: 0 auto 54px; }
.main .logo i {
	display: block; width: 100%; height: 0; padding: 0 0 58%; 
	background: center/cover no-repeat url(../img/nic.svg); aspect-ratio: 1 / .58;
	text-indent: 200%; white-space: nowrap; overflow: hidden;
}
.main .title { position: relative; padding: 130px 0 140px; text-align: center; }
.main .title h3 { font-size: 3.8rem; color: #f096be; font-weight: 700; }
.main #about { text-align: center; }
#about .about {
	position: relative; width: 780px; height: 780px; margin: 0 auto; padding: 140px 0 0; 
	background: #fff; border-radius: 999px; font-size: 2.0rem; line-height: 2.0;
}
#about .about::before,#about .about::after {
	content: ''; position: absolute; width: 350px; height: 350px;
	background: 0 0/200% auto no-repeat url(../img/d_main.png);
}
#about .about::before { top: 0; left: -200px; }
#about .about::after { bottom: 36px; right: -150px; background-position: 100% 0; }
#about h2 {
	position: relative; margin: 0 auto 48px; font-size: 4.0rem; color: #f096be; font-weight: 700;
}
#about h2 .logo { display: block; width: 200px; margin: 0 auto; }

@media screen and (max-width:768px) {
	.main {
		background-image: url(../img/base2_s.png),url(../img/base1_s.jpg);
		background-size: 100% auto,cover; position: relative;
	}
	.main .logo { width: 60%; margin: 0 auto 24px; }
	.main .title { padding: 64px 0; }
	.main .title::before {
		content: ''; position: absolute; top: 50%; left: 50%; width: 80vw; height: 80vw;
		background: rgba(255,255,255,.9); border-radius: 50%; filter: blur(50px);
		transform: translate(-50%,-50%); z-index: -1;
	}
	.main .title h3 { font-size: 2.0rem; }
	.main #about { padding: 0 0 24px; }
	#about .about { width: 90vw; height: auto; padding: 10vw; border-radius: 40px; }
	#about h2 { margin: 0 auto 24px; font-size: 2.0rem; }
	#about h2 .logo { width: 50%; }
	#about p { font-size: 1.6rem; text-align: left; }
	#about .about::before,#about .about::after { width: 30vw; height: 30vw; }
	#about .about::before { top: 5vw; left: -4vw; }
	#about .about::after { bottom: -36px; right: -5vw; }
}

/* --------------------------------------------------------------------------
   identity
-------------------------------------------------------------------------- */

#identity h2 { margin: 0 auto 120px; }
#identity article { display: flex; justify-content: space-between; margin: 0 auto 120px; }
#identity article:last-of-type { margin: 0 auto; }
#identity h3 { margin: 0 0 24px; font-size: 3.0rem; font-weight: 700; }
#identity h3 span { display: block; font: 2.4rem/1.6 'Zen Old Mincho'; color: #aa4c8f; }
#identity .photo {
	position: relative; width: 560px; padding: 15px;
	border: solid 2px #dea8cf; border-radius: 100% 100% 30px 30px;
}
#identity .photo::before {
	content: ''; position: absolute; top: -24px; left: 50%; width: 80%; aspect-ratio: 1 / .1625;
	background: center/cover no-repeat url(../img/border1.svg); transform: translateX(-50%);
	z-index: 5;
}
#identity .photo::after {
	content: ''; position: absolute;
	background: 0 0/200% auto no-repeat url(../img/d_identity.png);
}
#identity .photo.cre::after { bottom: -20px; left: -50px; width: 110px; height: 110px; }
#identity .photo.qua::after {
	bottom: -50px; right: -50px; width: 180px; height: 180px; background-position: 100% 0;
}
#identity .photo.del::after {
	bottom: -36px; left: -50px; width: 160px; height: 160px; background-position: 0 100%;
}
#identity .photo.net::after {
	bottom: -50px; right: -50px; width: 150px; height: 150px; background-position: 100% 100%;
}
#identity .photo img { border-radius: 100% 100% 30px 30px; }
#identity .text { position: relative; width: 600px; padding: 8.0rem 0 0 80px; }
#identity .text .num {
	position: absolute; top: 0; left: 0; font: 8.0rem/1.0 'Zen Old Mincho'; color: #f8c7d6;
}
#identity .text .num::after {
	content: ''; position: absolute; top: 0.3em; left: 0.4em; width: 100px; height: 100px;
	clip-path: polygon(96% 0,100% 0,4% 100%,0 100%); background: #f8c7d6;
}
#identity .text p { font-size: 1.8rem; line-height: 1.8; }

@media screen and (min-width:769px) {
	#identity article:nth-of-type(even) { flex-direction: row-reverse; }
}
@media screen and (max-width:768px) {
	#identity h2 { margin: 0 auto 64px; }
	#identity article { display: block; margin: 0 auto 64px; }
	#identity h3 { margin: 0 0 16px; font-size: 2.2rem; }
	#identity h3 span { margin: 0 0 0.5em; padding-left: 3.4em; font-size: 1.8rem; }
	#identity .photo { width: 100%; }
	#identity .photo.cre::after { bottom: -4vw; left: -4vw; width: 20vw; height: 20vw; }
	#identity .photo.qua::after { bottom: -6vw; right: -4vw; width: 30vw; height: 30vw; }
	#identity .photo.del::after { bottom: -3vw; left: -4vw; width: 30vw; height: 30vw; }
	#identity .photo.net::after { bottom: -10vw; right: -4vw; width: 25vw; height: 25vw; }
	#identity .text { width: 100%; margin: 24px 0 0; padding: 4.0rem 0 0 0; }
	#identity .text .num { font-size: 5.0rem; }
	#identity .text .num::after { width: 60px; height: 60px; }
	#identity .text p { font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   brand
-------------------------------------------------------------------------- */

#brand {
	padding: 80px 0 120px;
	background-image: url(../img/base3.png),linear-gradient(transparent 60%,#f9cedb 60%);
	background-position: top center; background-size: 100% auto; background-repeat: no-repeat;
}
#brand h2 { margin: 0 auto 96px; }
#brand article {
	padding: 20px; border-radius: 20px;
	background: top left/80px 80px repeat linear-gradient(135deg,#f4afc6 25%,transparent 25%,transparent 50%,#f4afc6 50%,#f4afc6 75%,transparent 75%,transparent) #ec79a0;
}
#brand .item {
	display: flex; justify-content: space-between; padding: 100px 40px; background: #fff;
	border-radius: 20px;
}
#brand .item .image { width: 360px; }
#brand .item .goods { width: 700px; }
#brand .item h3 { font-size: 3.0rem; font-weight: 500; }
#brand .item .goods ul { display: flex; justify-content: space-between; margin: 24px 0 0; }
#brand .item .goods li { width: 160px; }

@media screen and (max-width:768px) {
	#brand {
		padding: 24px 0 64px;
		background-image: url(../img/base3.png),linear-gradient(transparent 15vw,#f9cedb 15vw);
	}
	#brand h2 { margin: 0 auto 36px; }
	#brand h2.rbn span i { left: -4.0rem; }
	#brand article { padding: 4vw; }
	#brand .item { display: block; padding: 24px 4vw; }
	#brand .item .image { width: 100%; margin: 0 auto 16px; }
	#brand .item .goods { width: 100%; }
	#brand .item h3 { font-size: 2.2rem; }
	#brand .item .goods ul { flex-wrap: wrap; margin: 16px 0 0; }
	#brand .item .goods li { width: 48%; margin: 10px 0 0; }
}

/* --------------------------------------------------------------------------
   sns
-------------------------------------------------------------------------- */

#sns {
	background: center/auto 100% repeat-x url(../img/base5.png),#f1d9ea;
}
#sns h2 { margin: 0 auto 96px; }
#sns article { display: flex; justify-content: space-evenly; }
#sns a {
	position: relative; display: block; width: 480px; background: #fff; border: solid 1px #aa4c8f;
	border-radius: 999px; box-shadow: 0 4px #a60e7a; color: #aa4c8f; font-size: 2.0rem;
	line-height: 3.5; text-align: center; transition: .5s cubic-bezier(.215,.61,.355,1);
}
#sns a:hover { transform: translateY(4px); box-shadow: none; }
#sns a::before {
	content: ''; position: absolute; top: 50%; left: 30px; width: 40px; height: 40px;
	background: 40% 100%/600% auto no-repeat url(../img/ico.svg); transform: translateY(-50%);
}
#sns a.tw::before { background-position: 60% 100%; }
#sns a::after {
	content: ''; position: absolute; top: 50%; right: 30px; width: 14px; height: 14px;
	background: 20% 100%/600% auto no-repeat url(../img/ico.svg); transform: translateY(-50%);
}

@media screen and (max-width:768px) {
	#sns h2 { margin: 0 auto 36px; }
	#sns article { display: block; }
	#sns a { width: 100%; font-size: 1.8rem; }
	#sns a.tw { margin: 20px auto 0; }
	#sns a::before { left: 5vw; width: 30px; height: 30px; }
	#sns a::after { right: 5vw; }
}

/* --------------------------------------------------------------------------
   catalog
-------------------------------------------------------------------------- */

#catalog { padding: 180px 0 120px; }
#catalog article {
	position: relative; padding: 80px 40px 40px; background: #f9cedb; border-radius: 30px;
}
#catalog h2 { position: absolute; top: -68px; left: 50%; transform: translateX(-50%); }
#catalog h3 {
	display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px;
	font-size: 3.0rem; color: #000; text-align: center; font-weight: 700;
}
#catalog h3::before, #catalog h3::after {
	content: ''; display: block; width: 370px; height: auto; aspect-ratio: 1 / 0.078125;
	background: center/cover no-repeat url(../img/border2.svg);
}
#catalog .current {
	display: flex; justify-content: space-between; margin: 0 auto 40px; padding: 40px;
	background: #fff; border-radius: 30px;
}
#catalog .current .page { width: 460px; }
#catalog .current .detail { width: 540px; }
#catalog .current .detail dl { display: flex; justify-content: space-between; margin: 0 0 36px; }
#catalog .current .detail dt {
	width: 30%; border: solid 1px #aa4c8f; line-height: 2.6; color: #aa4c8f; text-align: center;
	display: flex; flex-direction: column; justify-content: center;
}
#catalog .current .detail dd { width: 65%; }
#catalog .current .detail .note { margin-left: 1.0em; text-indent: -1.0em; font-size: 90%; }
#catalog .current a { width: 360px; margin: 0 auto; font-size: 1.8rem; }
#catalog .archive { width: 1080px; margin: 0 auto; }
#catalog .archive .list { display: flex; flex-wrap: wrap; }
#catalog .archive a { margin: 0 20px 20px 0; }
#catalog .archive .note { margin: 24px 0 0 1.0em; text-indent: -1.0em; }

@media screen and (min-width:769px) {
	#catalog .current .detail dl:nth-of-type(odd) { align-items: center; }
	#catalog .archive a:nth-of-type(3n) { margin: 0 0 20px; }
}
@media screen and (max-width:768px) {
	#catalog { padding: 96px 0 64px; }
	#catalog article { padding: 64px 4vw 4vw; }
	#catalog h2 { top: -36px; }
	#catalog h2.rbn span i { left: -6.0rem; }
	#catalog h3 {
		flex-direction: column; justify-content: center; margin: 0 0 24px; font-size: 2.0rem;
	}
	#catalog h3::before,#catalog h3::after { width: 100%; }
	#catalog h3::before { margin: 0 0 10px; }
	#catalog .current { display: block; padding: 4vw 4vw 36px; border-radius: 16px; }
	#catalog .current .page { width: 100%; margin: 0 auto 20px; }
	#catalog .current .detail { width: 100%; }
	#catalog .current .detail dl { display: block; margin: 0 0 24px; }
	#catalog .current .detail dt { width: 50%; margin: 0 0 12px; line-height: 2.0; }
	#catalog .current .detail dd { width: 100%; }
	#catalog .current a { width: 100%; }
	#catalog .archive { width: 100%; }
	#catalog .archive .list { display: block; }
	#catalog .archive a { margin: 0 auto 14px; line-height: 2.4; }
}

/* --------------------------------------------------------------------------
   purchase
-------------------------------------------------------------------------- */

#purchase { background: center/cover no-repeat url(../img/base4.jpg); }
#purchase h2 { margin: 0 auto 120px; }
#purchase h3 {
	display: flex; justify-content: space-between; align-items: center; margin: 40px 0 24px; 
	font-size: 2.6rem; font-weight: 700; color: #000; 
}
#purchase h3::before,#purchase h3::after {
	content: ''; width: 90px; height: auto; aspect-ratio: 1 / 0.333;
	background: 0 0/200% auto no-repeat url(../img/border4.svg);
}
#purchase h3::after { background-position: 100% 0; }
#purchase article { display: flex; justify-content: space-around; }
#purchase .shop { width: 520px; text-align: center; }
#purchase .shop .photo { position: relative; display: block; }
#purchase .shop .photo::after {
	content: ''; position: absolute; top: -36px; left: 8%; width: 84%; height: auto;
	background: center/cover no-repeat url(../img/border3.svg); aspect-ratio: 1 / 0.1875;
}
#purchase .shop .photo img { border-radius: 150px; }
#purchase .shop dl { display: inline-block; text-align: left; }
#purchase .shop dd { margin: -1.6em 0 0 5.2em; }
#purchase .shop a.out { width: 70%; margin: 0 auto 4px; }

@media screen and (max-width:768px) {
	#purchase h2 { margin: 0 auto 64px; }
	#purchase h3 { font-size: 2.0rem; margin: 24px 0 16px; }
	#purchase h3::before,#purchase h3::after { width: 14vw; }
	#purchase article { display: block; }
	#purchase .shop { width: 100%; }
	#purchase .shop .photo::after { top: -24px; }
	#purchase .shop dl { display: block; margin: 0 auto 64px; }
	#purchase .shop dt { font-weight: 500; }
	#purchase .shop dd { margin: 0; }
	#purchase .shop a.out { width: 100%; }
}

/* --------------------------------------------------------------------------
   recruit
-------------------------------------------------------------------------- */

#recruit article { position: relative; padding: 80px 0 64px; text-align: center; }
#recruit article::before,#recruit article::after {
	content: ''; position: absolute; left: 13%; width: 74%; height: 10px;
	border: solid 1px #dea8cf; border-width: 1px 0 1px 0;
}
#recruit article::before { top: 6px; }
#recruit article::after { bottom: 6px; }
#recruit .frame { position: absolute; width: 100%; }
#recruit .frame.top { top: 0; left: 0; }
#recruit .frame.bottom { bottom: 0; left: 0; }
#recruit .frame::before,#recruit .frame::after {
	content: ''; position: absolute; width: 130px; aspect-ratio: 1 / 1;
	background: top left/cover no-repeat url(../img/border5.svg);
}
#recruit .frame.top::before { top: 0; left: 0; }
#recruit .frame.top::after { top: 0; right: 0; transform: rotate(90deg); }
#recruit .frame.bottom::before { bottom: 0; left: 0; transform: rotate(-90deg); }
#recruit .frame.bottom::after { bottom: 0; right: 0; transform: rotate(180deg); }
#recruit h2 {
	position: relative; width: 360px; margin: 0 auto 36px; font-size: 3.0rem; line-height: 4.5;
	color: #aa4c8f; font-weight: 500;
}
#recruit h2::before {
	content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: #f1d9ea; clip-path: polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); z-index: -1;
}
#recruit h2 span {
	position: absolute; top: -0.5em; left: 50%; font: 7.0rem/1.0 'Mrs Saint Delafield';
	color: #aa4c8f; transform: translateX(-50%);
}
#recruit p { line-height: 1.8; }
#recruit a.out { width: 260px; margin: 48px auto 0; }

@media screen and (max-width:768px) {
	#recruit article { padding: 64px 0; }
	#recruit article::before,#recruit article::after { left:25%; width: 50%; height: 6px; }
	#recruit .frame::before,#recruit .frame::after { width: 20%; }
	#recruit h2 { width: 60%; font-size: 2.2rem; }
	#recruit h2 span { font-size: 4.8rem; }
	#recruit a.out { width: 70%; }
}

/* --------------------------------------------------------------------------
   footer
-------------------------------------------------------------------------- */

footer {
	position: relative; display: flex; align-items: center; width: 100%;
	padding: 48px 0 24px; background: #fff;
}
footer .rights { width: 48%; margin-left: 50%; padding: 0 40px; text-align: right; }
footer .links { margin: 0 auto 16px; color: #aa4c8f; }
footer .links a { padding: 0 16px }
footer .copy { font-size: 1.4rem; color: #555; }
footer .corp {
	position: fixed; bottom: 24px; left: 0; width: 600px; padding: 10px 0 10px 40px; 
	background: linear-gradient(80deg,#86abce 30%,#eefcfc 50%,#e2f4fc 70%,#eef9f0 100%);
	border-radius: 0 999px 999px 0; transition: transform .2s ease;
}
footer .corp::before {
	content: ''; position: absolute; top: 50%; right: 40px; width: 40px; height: 40px;
	background: 100% 0/300% auto no-repeat url(../img/ico.svg); aspect-ratio: 1/1;
	transform: translateY(-50%);
}
footer .corp:hover::before {
	animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both infinite alternate;
}
footer .corp p { display: flex; align-items: center; font-size: 2.0rem; color: #1f4873; }
footer .corp p::before {
	content: ''; display: block; width: 120px; margin-right: 10px; aspect-ratio: 1/.5;
	background: 0 0/auto 200% no-repeat url(../img/logo.svg);
}
footer .totop {
	display: block; position: fixed; bottom: 24px; right: 5%; width: 50px; height: 50px;
	margin: 0; padding: 0; background: 40% 0/600% auto no-repeat url(../img/ico.svg);
	text-indent: 200%; white-space: nowrap; overflow: hidden; z-index: 99;
}
footer .totop.stop { position: absolute; top: -25px; }

@media screen and (max-width:768px) {
	footer { display: block; padding: 24px 5% 80px; }
	footer .rights { width: 100%; margin: 0 auto 24px; padding: 0; text-align: center; }
	footer .links a { display: block; margin: 0 0 16px; }
	footer .corp { display: block; bottom: 20px; width: 76%; padding: 10px 50px 10px 5%; }
	footer .corp::before { right: 10px; width: 30px; height: 30px; }
	footer .corp p { font-size: 1.6rem; line-height: 1.2; }
	footer .corp p::before { width: 80px; }
	footer .totop { bottom: 22px; }
}

/* --------------------------------------------------------------------------
   animations
-------------------------------------------------------------------------- */

.di { opacity: 0; transform: translateY(-30px); }
.di.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateY(0);
}
@keyframes shake {
	0% { transform: translate(0,-50%); }
	100% { transform: translate(5px,-50%); }
}