@charset 'utf-8';

/* common
------------------------------------------------ */
#main { padding-top: 0; }
#solution { margin-top: 200px; }
#company { margin-top: 200px; }

@media only screen and (max-width: 768px) {
	#solution { margin-top: 100px; }
	#company { margin-top: 100px; }
}

/* top__visual
------------------------------------------------ */
.top__visual { position: relative; }
.top__visual__frame { position: relative; }
.top__visual__move { position: relative; }
.top__visual--item { position: relative; width: 100%; height: 100vh; min-height: 840px; background-position: center center; background-repeat: no-repeat; background-size: cover; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; font-weight: 400; color: #fff; }
.top__visual--item a { color: #fff; }
.top__visual--copy { position: absolute; right: 0; bottom: 304px; padding: 10px 110px 10px 24px; background: #000; font-size: 2rem; letter-spacing: .28em; }
.top__visual--copy:after { content: ' '; position: absolute; bottom: 25px; right: 44px; width: 60px; height: 1px; background: #fff; }
.top__visual--text { position: absolute; bottom: 240px; left: 0; width: 100%; text-align: center; font-size: 2rem; letter-spacing: .3em; line-height: 2.8; }
.top__visual--title { position: absolute; top: 66px; left: 50%; margin-left: -20%; text-align: right; font-size: 6.2rem; letter-spacing: .1em; line-height: 1.2; }
.top__visual--title:after { content: ' '; position: absolute; background-position: center center; background-repeat: no-repeat; background-size: 100%; }
.top__visual--next { position: absolute; bottom: 0; left: 50%; height: 210px; font-size: 2rem; letter-spacing: .115em; }
.top__visual--next:after { content: ' '; position: absolute; top: 0; left: 0; animation: next_down 2.6s ease-in-out infinite; width: 1px; height: 100%; background: #fff; }
.top__visual--next a { position: absolute; top: 50%; left: -60px; margin-top: -1em; }
.top__visual--next--title { position: absolute; bottom: 0; left: 50%; margin-left: 1em; font-size: 2rem; letter-spacing: .115em; }

.top__visual--first { height: var(--visual-first-height, calc(100vh - 76px)) !important; min-height: inherit; background-color: #000; background-image: url("/_wpassets/wp-content/themes/procare/_assets/img/top/visual1-3.jpg"); background-size: auto 100%; }
.top__visual--second { background-image: url("/_wpassets/wp-content/themes/procare/_assets/img/top/visual2.jpg"); }
.top__visual--second .top__visual--title:after { bottom: -1px; left: 76px; width: 62px; height: 76px; background-image: url("/_wpassets/wp-content/themes/procare/_assets/img/top/visual2_mark.png"); }
.top__visual--third { background-image: url("/_wpassets/wp-content/themes/procare/_assets/img/top/visual3.jpg"); background-position: center bottom; }
.top__visual--third .top__visual--title:after { bottom: -1px; left: -5px; width: 114px; height: 76px; background-image: url("/_wpassets/wp-content/themes/procare/_assets/img/top/visual3_mark.png"); }

.top__visual--second:before,
.top__visual--second:after,
.top__visual--third:before,
.top__visual--third:after { content: ' '; position: absolute; left: 50%; transform-origin: top left; height: 1px; background: #fff; }
.top__visual--second:before,
.top__visual--third:before { transform: rotate(20deg); width: 0; }
.top__visual--second.done:before,
.top__visual--third.done:before { animation: line_move1 1.4s ease-in-out forwards; }
.top__visual--second:after,
.top__visual--third:after { transform: rotate(154deg) translate(-251px,-261px); width: 0; }
.top__visual--second.done:after,
.top__visual--third.done:after { animation: 1.6s line_move2 1.4s ease-in-out forwards; }

@keyframes next_down {
	0% { height: 0; }
	25% { height: 100%; }
	50% { top: auto; bottom: 0; }
	75% { top: auto; bottom: 0; }
	100% { top: auto; bottom: 0; height: 0; }
}

@media only screen and (min-width: 769px) {
	@keyframes line_move1 {
		0% { width: 0; }
		100% { width: 362px; }
	}

	@keyframes line_move2 {
		0% { width: 0; }
		100% { width: 545px; }
	}
}

@media only screen and (max-width: 768px) {
	/* Let the visual reach the viewport edges without changing the inset text sections. */
	.top__visual { margin: 0 -16px; }
	.top__visual--item { min-height: 500px; }
	.top__visual--copy { bottom: 152px; padding: 6px 42px 6px 12px; font-size: 1.2rem; letter-spacing: .14em; }
	.top__visual--copy:after { bottom: 15px; right: 10px; width: 30px; }
	.top__visual--text { bottom: 240px; left: 0; width: 100%; text-align: center; font-size: 1.6rem; letter-spacing: .05em; line-height: 2.2; }
	.top__visual--title { top: 22px; margin-left: -40%; font-size: 2.8rem; letter-spacing: .05em; }
	.top__visual--next { height: 100px; font-size: 1.6rem; letter-spacing: .058em; }
	.top__visual--next a { display: flex; align-items: center; justify-content: center; left: -50px; margin-top: -22px; min-width: 44px; min-height: 44px; }
	.top__visual--next--title { font-size: 1.6rem; letter-spacing: .058em; }

	.top__visual--first { height: var(--visual-first-height, calc(100vh - 50px)) !important; min-height: inherit; background-position: right 30% center; background-size: 120%; }
	.top__visual--second .top__visual--title:after { bottom: -6px; left: 30px; width: 31px; height: 38px; }
	.top__visual--third .top__visual--title:after { bottom: -6px; left: -10px; width: 57px; height: 38px; }

	.top__visual--second:after,
	.top__visual--third:after { transform: rotate(154deg) translate(-97px,-101px); }

	@keyframes line_move1 {
		0% { width: 0; }
		100% { width: 140px; }
	}

	@keyframes line_move2 {
		0% { width: 0; }
		100% { width: 232px; }
	}
}

/* top__topics
------------------------------------------------ */
.top__topics { margin-top: 100px; }
.top__topics .title--1 { margin-bottom: 38px; }
.top__topics__instagram { margin-bottom: 48px; padding: 24px 26px; border-top: 1px solid #231815; border-bottom: 1px solid #231815; }
.top__topics__instagram h3 { font-family: 'Libre Baskerville', serif; font-size: 2.2rem; font-weight: 400; line-height: 1.5; }
.top__topics__instagram p { margin-top: 10px; font-size: 1.3rem; line-height: 1.9; }
.top__topics__instagram a { display: inline-block; margin-top: 12px; font-size: 1.2rem; text-decoration: underline; }

@media only screen and (max-width: 768px) {
	.top__topics { margin-top: 60px; }
	.top__topics__instagram { margin-bottom: 40px; padding: 20px 16px; }
	.top__topics__instagram h3 { font-size: 1.8rem; }
	.top__topics__instagram p { font-size: 1.5rem; line-height: 1.8; }
	.top__topics__instagram a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.4rem; }
}

/* top__about
------------------------------------------------ */
.top__about { margin: 100px auto 0; max-width: 626px; }
.top__about__links {}
.top__about--item {}
.top__about--title { text-align: center; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; font-size: 3rem; font-weight: 400; letter-spacing: .1em; line-height: 1.2; }
.top__about--title .ja { display: block; margin-top: 12px; font-size: 1.13rem; letter-spacing: .3em; color: #968c87; }
.top__about--photo { margin-top: 30px; width: 100%; height: 100%; overflow: hidden; }
.top__about--photo a { display: block; position: relative; }
.device_click .top__about--photo a img { transition: ease .3s; }
.device_click .top__about--photo a:hover img { transform: scale(1.1); }

@media only screen and (min-width: 769px) {
	.top__about--item { float: left; margin-top: 9.9041533546%; width: 45.0479233227%; }
	.top__about--item:nth-of-type(-n+2) { margin-top: 0; }
	.top__about--item:nth-of-type(2n) { float: right; }
	.top__about--item:nth-of-type(2n+1) { clear: both; }
}

@media only screen and (max-width: 768px) {
	.top__about { margin-top: 60px; }
	.top__about--item { margin-top: 40px; }
	.top__about--item:first-child { margin-top: 0; }
	.top__about--title { font-size: 1.6rem; letter-spacing: .05em; }
	.top__about--title .ja { margin-top: 8px; font-size: 1.3rem; letter-spacing: .15em; }
	.top__about--photo { margin-top: 16px; }
}

/* top__message
------------------------------------------------ */
.top__message { }
.top__message__head { padding: 106px 0 90px; background: url("/_wpassets/wp-content/themes/procare/_assets/img/top/message_photo.jpg") no-repeat center center; background-size: cover; }
.top__message--title { width: 408px; text-align: center; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; font-size: 3.2rem; font-weight: 400; letter-spacing: .1em; line-height: 1.2; color: #fff; }
.top__message--title .ja { display: block; margin-top: 14px; font-size: 1.13rem; letter-spacing: .3em; }
.top__message__info { padding: 70px 58px 40px; background: #f08d1d; }
.top__message--text { text-align: center; font-size: 1.6rem; line-height: 2.6; }
.top__message__sign { display: flex; justify-content: flex-end; align-items: center; margin-top: 90px; }
.top__message__sign--post { font-size: 1.6rem; }
.top__message__sign--name { margin-left: 1em; font-size: 2.8rem; }

@media only screen and (max-width: 768px) {
	.top__message { margin-top: 60px; }
	.top__message__head { padding: 120px 0 40px; background-position: right center; }
	.top__message--title { width: auto; font-size: 2.8rem; letter-spacing: .05em; }
	.top__message--title .ja { margin-top: 10px; font-size: 1.3rem; letter-spacing: .15em; }
	.top__message__info { padding: 40px 16px 30px; }
	.top__message--text { font-size: 1.5rem; line-height: 1.85; overflow-wrap: anywhere; }
	.top__message__sign { margin-top: 40px; }
	.top__message__sign--post { font-size: 1.4rem; }
	.top__message__sign--name { font-size: 2.2rem; }
}
/* top__solution
------------------------------------------------ */
.top__solution { margin-top: 100px; }
.top__solution__lists {}
.top__solution__lists--item { position: relative; margin-top: 66px; }
.top__solution__lists--item:first-child { margin-top: 0; }
.top__solution__lists--photo { position: relative; width: 100%; height: 100%; overflow: hidden; }
.top__solution__lists--photo a { display: block; position: relative; }
.device_click .top__solution__lists--photo a img { transition: ease .3s; }
.device_click .top__solution__lists--photo a:hover img { transform: scale(1.1); }
.top__solution__lists--title { margin: 30px 18px 0; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; font-weight: 400; line-height: 1.4; }
.top__solution__lists--title .en,
.top__solution__lists--title .ja { display: block; }
.top__solution__lists--title .en { font-size: 2rem; }
.top__solution__lists--title .ja { margin-top: 10px; font-size: 1.4rem; }

@media only screen and (max-width: 768px) {
	.top__solution { margin-top: 60px; }
	.top__solution__lists--item { margin-top: 40px; }
	.top__solution__lists--title { margin: 18px 8px 0; }
	.top__solution__lists--title .en,
	.top__solution__lists--title .ja { display: block; }
	.top__solution__lists--title .en { font-size: 1.8rem; }
	.top__solution__lists--title .ja { margin-top: 6px; font-size: 1.4rem; }
}

/* top__works
------------------------------------------------ */
.top__works { margin: 100px auto 0; max-width: 670px; }
.top__works__lists {}
.top__works__lists--item {}
.top__works__lists--item > a { display: block; position: relative; }
.top__works__lists--photo { position: relative; padding-bottom: 86.7924528302%; width: 100%; height: 0; overflow: hidden; }
.device_click .top__works__lists--photo img { transition: ease .3s; }
.device_click .top__works__lists--item a:hover .top__works__lists--photo img { transform: scale(1.1); }
.top__works__lists--name { margin-top: 16px; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; font-size: 1.2rem; font-weight: 400; letter-spacing: .1em;}

@media only screen and (min-width: 769px) {
	.top__works__lists--item { float: left; margin: 7.38007380074% 2.53731343284% 0 0; width: 31.6417910448%; }
	.top__works__lists--item:nth-of-type(6n),
	.top__works__lists--item:nth-of-type(6n-1) { margin-top: -10.3%; }
	.top__works__lists--item:nth-of-type(-n+3) { margin-top: 0; }
	.top__works__lists--item:nth-of-type(3n) { margin-right: 0; }
	.top__works__lists--item:nth-of-type(3n+1) { clear: both; }
	.top__works__lists--item:nth-of-type(6n) .top__works__lists--photo,
	.top__works__lists--item:nth-of-type(6n+1) .top__works__lists--photo,
	.top__works__lists--item:nth-of-type(6n-1) .top__works__lists--photo { padding-bottom: 142.452830189%; }
}

@media only screen and (max-width: 768px) {
	.top__works { margin-top: 60px; }
	.top__works__lists--item { float: left; margin-top: 4%; width: 48%; }
	.top__works__lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top__works__lists--item:nth-of-type(2n) { float: right; }
	.top__works__lists--item:nth-of-type(2n+1) { clear: both; }
	.top__works__lists--name { margin-top: 10px; font-size: 1.4rem; line-height: 1.5; letter-spacing: .05em; overflow-wrap: anywhere; }
}

/* top__member
------------------------------------------------ */
.top__member { margin-top: 100px; }
.top__member__lists {}
.top__member__lists--item {}
.top__member__lists--photo { position: relative; width: 100%; height: 100%; overflow: hidden; }
.top__member__lists--photo a { display: block; position: relative; }
.device_click .top__member__lists--photo a img { transition: ease .3s; }
.device_click .top__member__lists--photo a:hover img { transform: scale(1.1); }
.top__member__lists__info { position: relative; margin: 10px 18px 0; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; }
.top__member__lists--position { position: absolute; top: 0; left: 0; font-size: 1.2rem; letter-spacing: .1em; line-height: 1.2; color: #6d6f71; }
.top__member__lists--name {padding-top: 20px; font-size: 2rem; font-weight: 400; letter-spacing: .1em; line-height: 1.4; }

@media only screen and (min-width: 769px) {
	.top__member__lists--item { float: left; margin: 7.38007380074% 2.58302583026% 0 0; width: 31.6113161132%; }
	.top__member__lists--item:nth-of-type(-n+3) { margin-top: 0; }
	.top__member__lists--item:nth-of-type(3n) { margin-right: 0; }
	.top__member__lists--item:nth-of-type(3n+1) { clear: both; }
}

@media only screen and (max-width: 768px) {
	.top__member { margin-top: 60px; }
	.top__member__lists--item { float: left; margin-top: 4%; width: 48%; }
	.top__member__lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top__member__lists--item:nth-of-type(2n) { float: right; }
	.top__member__lists--item:nth-of-type(2n+1) { clear: both; }
	.top__member__lists__info { margin: 6px 10px 0; }
	.top__member__lists--position { font-size: 1.3rem; letter-spacing: .05em; }
	.top__member__lists--name { margin-top: 16px; font-size: 1.6rem; letter-spacing: .02em; overflow-wrap: anywhere; }
	.top__member__lists--name a { display: block; min-height: 44px; }
}