@charset "utf-8";
/*
Theme Name: yamanoue-ver7
Theme URI: https://yamanoue-design.jp
Version: 7.0
*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

::-moz-selection{ background: #dedede; color:#333; }
::selection { background: #dedede; color:#333; }
.clearfix { display: block; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }
body.pc .sp_view { display: none !important; }
body.sp .pc_view { display: none !important; }

/* common
---------------------------------------------------------------------------*/
body {
	color: #000000;
	font-size: 14px;
	font-family: 'Gill Sans', 'Lato', 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
	line-height: 1;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

p { font-size: 14px; line-height: 1.8; }
address { font-style: normal; }
img { max-width: none; }

/* loading
------------------------------------*/
.loading {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	background: #FFFFFF;
	width: 100%;
	height: 100%;
	z-index: 999999;
}

.loading .inner {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 136px;
	height: 200px;
	margin: -100px 0 0 -68px;
	text-align: center;
}

.loading .inner figure { position: relative; width: 136px; height: 133px; margin: 0 auto 15px; }
.loading .inner figure img { position: absolute; top: 0; left: 0; }
.loading .inner figure img:first-child { z-index: 2; }
.loading .inner figure img:last-child { z-index: 1; }
.loading .inner p { letter-spacing: 0.2em; }

/* txt
-----------------------------------*/
.txt-gothic { font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif; }
.txt-num { font-family: 'Droid Serif', serif; }
.txt-sans { font-family: 'Lato', serif; }
.txt-lead p { margin: 0 0 20px; font-size: 20px; font-weight: 500; line-height: 1.7; letter-spacing: 0.03em; }

/* rollhover
------------------------------------*/
a { color: #000000; text-decoration: none; transition: .15s ease-out; }
a:hover { opacity: 0.5; text-decoration: none; }
a img { transition: opacity .15s ease-out; }
a:hover img { opacity: 0.5; }

/* .list-arrow
------------------------------------*/
.list-arrow i {
	display: block;
	content: '';
	background: #000;
	width: 10px;
	height: 1px;
}

.list-arrow i:after {
	position: absolute;
	top: -3px;
	right: -3px;
	display: block;
	content: '';
	width: 6px;
  height: 6px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  transform: rotate(45deg);
}

/* .btn
------------------------------------*/
.btn-link a {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #666666;
	padding: 22px 30px 20px 50px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.03em;
}

.btn-link a span { position: relative; display: inline-block; }
.btn-link a span i { position: absolute; left: -25px; top: 50%; margin: -1px 0 0; }

/* .category-list
------------------------------------*/
ul.category-list {
	font-size: 14px;
	letter-spacing: 0.05em;
}

ul.category-list li {
	position: relative;
	border-bottom: 1px dashed #888888;
	margin: 0 0 25px;
	list-style: none;
}

ul.category-list li i {
	position: absolute;
	top: 7px;
	right: 8px;
}

ul.category-list li a {
	display: block;
	padding: 0 0 8px 5px;
}

/* .page-nav
------------------------------------*/
.page-nav {
	overflow: hidden;
}

.page-nav li {
	float: left;
	position: relative;
	font-size: 12px;
	letter-spacing: 0.2em;
}

.page-nav li:nth-child(1) { padding: 0 0 0 20px; }
.page-nav li:nth-child(2) { margin: 0px 17px 0 15px; }

.page-nav li:nth-child(2) a {
	display: block;
	background-repeat: repeat-y;
	background-image: linear-gradient(#000, #000, transparent 50%, transparent 100%);
	background-size: 12px 3px;
	width: 12px;
	height: 12px;
	padding: 0;
}

.page-nav li:nth-child(2) a:hover { opacity: 0.3; }
.page-nav li:nth-child(3) { padding: 0 14px 0 0; }

.page-nav li i {
	display: block;
	content: '';
	background: #000;
	width: 10px;
	height: 1px;
}

.page-nav li:nth-child(1) i { position: absolute; top: 5px; left: 4px; }
.page-nav li:nth-child(3) i { position: absolute; top: 5px; right: 0; }

.page-nav li:nth-child(1) i:before,
.page-nav li:nth-child(3) i:after {
	position: absolute;
	display: block;
	content: '';
	width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.page-nav li:nth-child(1) i:before { top: -3px; left: -3px; border-bottom: 1px solid #000000; border-left: 1px solid #000000; }
.page-nav li:nth-child(3) i:after { top: -3px; right: -3px; border-top: 1px solid #000000; border-right: 1px solid #000000; }

/* .page-nav-fixed
------------------------------------*/
.page-nav-fixed {
	position: absolute;
	top: 300px;
	right: 0;
}

.page-nav-fixed li a {
	display: block;
	border-top: 1px solid #666666;
	padding: 16px 28px 40px 0;
	font-size: 14px;
	letter-spacing: 0.1em;
}

/* .wp-pagenavi
------------------------------------*/
.wp-pagenavi {
	text-align: center;
	font-size: 17px;
	letter-spacing: 0.1em;
}

.wp-pagenavi a {
	margin: 0 5px;
	padding: 5px;
}

.wp-pagenavi .current {
	display: inline-block;
	border-bottom: 1px solid #666666;
	margin: 0 10px;
	padding: 5px 0 2px;
}

.wp-pagenavi a.first,
.wp-pagenavi a.last,
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink {
	font-size: 15px;
	font-weight: 500;
}

.wp-pagenavi a.first { margin: 0 30px 0 0; }
.wp-pagenavi a.last { margin: 0 0 0 30px; }
.wp-pagenavi a.previouspostslink { position: relative; margin: 0 60px 0 0; }
.wp-pagenavi a.nextpostslink { position: relative; margin: 0 0 0 60px; }

.wp-pagenavi a.previouspostslink:before,
.wp-pagenavi a.nextpostslink:after {
	position: absolute;
	top: 10px;
	display: block;
	content: '';
	width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.wp-pagenavi a.previouspostslink:before { left: -12px; border-bottom: 1px solid #000000; border-left: 1px solid #000000; }
.wp-pagenavi a.nextpostslink:after { right: -12px; border-top: 1px solid #000000; border-right: 1px solid #000000; }


/* header
---------------------------------------------------------------------------*/
header {
	overflow: hidden;
	position: relative;
	width: 100%;
	min-width: 1100px;
	margin: 0 auto 160px;
	padding: 0;
}

header .inner { padding: 64px 0 0 61px; }
header .logo { float: left; width: 172px; margin-right: 35px; }
header .logo img { width: 100%; height: auto; }

/* header .gnav
-----------------------------------*/
header .gnav { float: left; margin-top: -5px; }
header .gnav ul { overflow: hidden; }
header .gnav ul li { float: left; }
header .gnav ul li:first-of-type { display: none; }

header .gnav ul li a {
	display: inline-block;
	padding: 12px 12px 12px 11px;
	color: #222222 !important;
	font-size: 15px;
	white-space: nowrap;
}

header .gnav ul li a:hover { opacity: 0.5; }

/* .header-mark
-----------------------------------*/
.header-mark { position: absolute; top: 52px; right: 50px; }

/* media query
-----------------------------------*/
@media (max-width: 1280px) {
	header .logo { width: 170px; margin-right: 30px; }
	header .gnav ul li a { padding-right: 10px; padding-left: 10px; font-size: 14px; }
	.header-mark { right: 15px; }
	.header-mark img { width: 145px; }
}


/* footer
---------------------------------------------------------------------------*/
footer {
	position: relative;
	width: 100%;
	min-width: 1100px;
	min-height: 400px;
	margin: 0;
	padding: 0;
}

/* .footer-contact
-----------------------------------*/
.footer-contact {
	position: absolute;
	top: 260px;
	left: 435px;
}

.footer-contact .logo { width: 180px; margin-bottom: 28px; }
.footer-contact .logo img { width: 100%; height: auto; }

.footer-contact dl {
	font-size: 18px;
	color: #555555;
	letter-spacing: 0.08em;
}

.footer-contact dt {
	float: left;
	width: 35px;
	margin-bottom: 5px;
}

.footer-contact dd {
	margin-bottom: 5px;
	padding: 0 0 0 35px;
}

.footer-contact dt:nth-child(3),
.footer-contact dd:nth-child(4) {
	margin: 0;
}

/* footer .gnav
-----------------------------------*/
footer .gnav {
	overflow: hidden;
	position: absolute;
	top: 260px;
	left: 655px;
}

footer .gnav ul {
	float: left;
	margin-right: 15px;
}

footer .gnav ul li {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 28px;
}

footer .gnav ul li i {
	position: absolute;
	top: 8px;
	left: 0;
}

footer .gnav ul li a {
	display: block;
	padding: 1px 10px 6px 0;
	font-size: 15.5px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
	white-space: nowrap;
}

header .gnav ul li.let-s a,
footer .gnav ul li.let-s a,
.enter-nav li.let-s a { letter-spacing: 0em; }

header .gnav ul li.let-m a,
footer .gnav ul li.let-m a,
.enter-nav li.let-m a { letter-spacing: 0.04em; }

header .gnav ul li.let-l a,
footer .gnav ul li.let-l a,
.enter-nav li.let-l a { letter-spacing: 0.1em; }

/* .footer-illust
-----------------------------------*/
.footer-illust {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 400px;
	height: 240px;
}

.footer-illust .saruR { position: absolute; bottom: 25px; left: 110px; z-index: 3; }
.footer-illust .saruR #saruR { position: absolute; bottom: 0; left: 0; z-index: 3; }
.footer-illust .saruR #scope1 { position: absolute; bottom: 83px; left: 0; z-index: 4; opacity: 0; }
.footer-illust .saruR #scope2 { position: absolute; bottom: 77px; left: 0; z-index: 5; opacity: 0; }
.footer-illust #saruL { position: absolute; bottom: 40px; left: 50px; z-index: 2; }
.footer-illust #saruL1 { position: absolute; bottom: 40px; left: 50px; z-index: 2; }
.footer-illust #saruL2 { position: absolute; bottom: 40px; left: 50px; z-index: 2; opacity: 0; }
.footer-illust #saruL3 { position: absolute; bottom: 45px; left: 35px; z-index: 2; opacity: 0; }
.footer-illust #saruL4 { position: absolute; bottom: 45px; left: 35px; z-index: 2; opacity: 0; }
.footer-illust #saru-body { position: absolute; bottom: 0; left: 0; z-index: 4; }
.footer-illust #saru-hand { position: absolute; bottom: 36px; left: 1px; z-index: 3; }
.footer-illust #saruL3.active, .footer-illust #saruL4.active { opacity: 1; }
.footer-illust #fruit { position: absolute; top: 67px; left: 27px; z-index: 1; opacity: 1; }
.footer-illust #fruit.none { opacity: 0; }
.footer-illust #tree { position: absolute; top: 0; left: -55px; z-index: 0; }
.footer-illust #ground { position: absolute; bottom: -20px; left: -50px; z-index: 0; }

/* .pagetop
-----------------------------------*/
.pagetop {
	position: absolute;
	bottom: 0;
	right: 30px;
	width: 250px;
	height: 385px;
	cursor: pointer;
	transform-origin: right bottom;
}

.pagetop .inner {
	overflow: hidden;
	position: relative;
	width: 250px;
	height: 385px;
}

.pagetop #word { position: absolute; top: 120px; left: 90px; z-index: 1; opacity: 0; }
.pagetop #man1 { position: absolute; bottom: -40px; right: 0; z-index: 2; opacity: 0; }
.pagetop #man2 { position: absolute; bottom: -40px; left: 0; z-index: 2; opacity: 0; }
.pagetop #man3 { position: absolute; bottom: -300px; right: 0; z-index: 2; opacity: 0; }
.pagetop #man1.active, .pagetop #man2.active { opacity: 1; }

/* media query
-----------------------------------*/
@media (max-width: 1360px) {
	.footer-contact { left: 400px; }
	footer .gnav { left: 620px; }
	.footer-illust { bottom: 0; left: -20px; }
	.pagetop { bottom: 0; right: 20px; transform: scale(0.9); }
}
@media (max-width: 1280px) {
	.footer-contact { left: 295px; }
	footer .gnav { left: 510px; }
	footer .gnav ul li a { font-size: 14.5px; }
	.footer-illust { bottom: 0; left: -125px; }
	.pagetop { bottom: 0; right: 10px; transform: scale(0.8); }
}


/* contents
---------------------------------------------------------------------------*/
#mainContents {
	width: 100%;
	min-width: 1100px;
	margin: 0;
	padding: 0;
	text-align: left;
}

#mainContents h1 {
	margin: 0 0 65px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

#mainContents h1 em {
	padding: 0 0 0 30px;
	font-size: 16px;
	letter-spacing: 0.1em;
	font-weight: 500;
}


/* headContents, innerContents
---------------------------------------------------------------------------*/
#headContents {
	box-sizing: border-box;
	width: 100%;
	padding: 0 120px 0 60px;
}

#headContents:has(p) {
	margin-bottom: 80px;
}

#headContents h1:has(+p) {
	margin-bottom: 32px;
}

#worksContents #headContents h1:has(+p) {
	display: inline-block;
	margin: 0 20px 0 0;
}

#headContents h1 + p {
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.06em;
}

#worksContents #headContents h1 + p {
	display: inline-block;
}

.innerContents {
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	min-height: 440px;
	padding: 0 120px 0 60px;
}

.innerContents .copyright {
	position: absolute;
	top: -18px;
	right: 60px;
}

.copyright small {
	display: block;
	transform : rotate(90deg);
	margin: 100px -100px 0 0;
	font-size: 14px;
	letter-spacing: 0.12em;
}

.copyright small span {
	padding: 0 5px 0 0;
}

/* .sec-title
------------------------------------*/
.sec-title {
	overflow: hidden;
	margin: 0 0 50px;
	letter-spacing: 0.05em;
}

.sec-title h2 {
	float: left;
	margin: 0 25px 0 0;
	min-height: 36px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.sec-title a {
	display: block;
	float: left;
	margin: 8px 0 0;
	font-size: 13px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* .works-list
------------------------------------*/
.works-list {
	width: 100%;
	max-width: 1334px;
}

.works-list ul {
	overflow: hidden;
	width: 100%;
	margin: 0 0 60px;
}

.works-list li {
	float: left;
	width: 30%;
	margin: 0 3% 55px 0;
	transition: all 0.3s ease;
}

.works-list li a:hover {
	opacity: 0.8;
}

.works-list li figure {
	width: 100%;
	margin: 0 0 15px;
}

.works-list li figure img {
	backface-visibility: hidden;
	width: 100%;
	height: auto;
	-webkit-transform: translateZ(0);
}

.works-list li h3 em {
	display: inline;
	border-bottom: 2px solid #fcc800;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.08em;
	color: #333333;
}

.works-list li h4 {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  padding-top: 8px;
}

.works-list li h4 strong {
	padding-right: 10px;
}

.works-list li .update {
	display: none;
	font-size: 11px;
}

.works-list li .update i {
	font-size: 10px;
}

.works-list li:first-of-type .update {
	display: inline-block;
}

/* .other-list
------------------------------------*/
.other-list {
	margin: 100px 0 0;
}

.other-list .sec-title {
	margin: 0 0 40px;
	padding: 0 1px 0 2px;
}

.other-list .sec-title a {
	float: right;
	font-size: 13px;
	margin: 8px 0 0;
}

#illustrationContents .other-list .works-list li {
	width: 125px;
	margin: 0 10px 10px 0;
}

#illustrationContents .other-list .works-list li:nth-child(6n) {
	margin: 0 0 10px;
}

#illustrationContents .other-list .works-list li h3,
#illustrationContents .other-list .works-list li h4 { display: none; }
.other-list .wp-pagenavi { display: none; }

/* .other-list - media query
-----------------------------------*/
@media (max-width: 1180px) {
	#illustrationContents .other-list .works-list li { width: 15.5%; margin: 0 1.4% 1.4% 0; }	
	#illustrationContents .other-list .works-list li:nth-child(6n) { margin: 0 0 1.4%; }
}

/* .recent-list
------------------------------------*/
.recent-list li {
	position: relative;
	margin: 0 0 40px;
}

.recent-list li .recent-num {
	display: block;
	position: absolute;
	top: -8px;
	left: -8px;
	z-index: 2;
}

.recent-list li figure:before {
	position: absolute;
	top: -17px;
	left: -18px;
	display: block;
	content: '';
	background: #ffffff;
	border-right: 1px solid #000000;
	width: 30px;
	height: 30px;
	transform: rotate(45deg);
	z-index: 1;
}

.recent-list li figure {
	margin: 0 0 16px;	
}

.recent-list li figure .noimg {
	width: 100%;
	height: auto;
}

.recent-list li h2 {
	margin: 0 0 6px;
	font-size: 14px;
/* 	font-weight: 600; */
	line-height: 1.65;
	letter-spacing: 0.05em;
}

.recent-list li p {
	color: #888888;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.recent-list li p time {
	padding-right: 3px;
}

.recent-list li p .category {
	font-size: 12px;
}

/* .concept-illust
------------------------------------*/
.concept-illust {
	position: relative;
	width: 723px;
	height: 605px;
}

.concept-illust span, .concept-illust img { display: block; position: absolute; }
.concept-illust img { opacity: 0; }
.concept-illust .bg1 { bottom: 4px; left: 0; width: 337px; height: 320px; z-index: 1; transform-origin: right bottom; }
.concept-illust .bg2 { bottom: 0; right: 35px; width: 327px; height: 337px; z-index: 1; transform-origin: center bottom; }
.concept-illust .office { top: 0; right: 0; width: 477px; height: 312px; z-index: 1; transform-origin: center bottom; }
.concept-illust .walk1 { bottom: 51px; left: 284px; width: 89px; height: 97px; z-index: 2; transform-origin: left bottom; }
.concept-illust .walk2 { top: 216px; right: 64px; width: 89px; height: 56px; z-index: 2; transform-origin: right center; }
.concept-illust .bike-set { top: 246px; left: 335px; z-index: 2; opacity: 0; }
.concept-illust .bike { top: 0; left: 0; width: 63px; height: 48px; z-index: 1; opacity: 1; }
.concept-illust .post2 { top: -21px; left: 22px; width: 36px; height: 60px; z-index: 2; opacity: 1; }
.concept-illust .post { top: -60px; left: 56px; width: 32px; height: 67px; z-index: 2; }
.concept-illust .tree-set { top: 45px; left: 6px; width: 276px; height: 271px; z-index: 3; transform-origin: left bottom; opacity: 0; }
.concept-illust .tree { top: 0; left: 0; width: 276px; height: 271px; z-index: 1; opacity: 1; }
.concept-illust .leaf { top: -35px; left: -5px; width: 258px; height: 319px; z-index: 2; opacity: 1; }
.concept-illust .bird { top: 6px; left: 115px; width: 119px; height: 122px; z-index: 4; }
.concept-illust .leaf-set { top: 315px; left: 374px; z-index: 6; }
.concept-illust .leaf1 { top: 0; left: 0; width: 104px; height: 47px; transform-origin: left center; }
.concept-illust .leaf2 { top: 109px; left: 68px; width: 89px; height: 67px; transform-origin: left center; }
.concept-illust .leaf3 { top: 89px; left: 190px; width: 91px; height: 28px; transform-origin: left center; }

/* .grecaptcha-badge
------------------------------------*/
.grecaptcha-badge {
	pointer-events: none;
	z-index: -999;
	opacity: 0;
}

body#contact .grecaptcha-badge {
	pointer-events: auto;
	z-index: 999;
	opacity: 1;
}