/*
Theme Name: Sydney
Theme URI: https://athemes.com/theme/sydney
Author: aThemes
Author URI: https://athemes.com
Description: Sydney is a powerful business theme that provides a fast way for companies or freelancers to create an awesome online presence. As well as being fully compatible with Elementor, Sydney brings plenty of customization possibilities like access to all Google Fonts, full color control, layout control, logo upload, full screen slider, header image, sticky navigation and much more. Also, Sydney provides all the construction blocks you need to rapidly create an engaging front page. Looking for a quick start with Sydney? With just a few clicks, you can import one of our existing demos (https://athemes.com/sydney-demos/)
Version: 2.29
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tested up to: 6.3
Requires PHP: 5.6
Text Domain: sydney
Tags: two-columns, right-sidebar, block-styles, custom-colors, custom-background, custom-header, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Sydney is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/

/*----------------------------

共通

----------------------------*/
body,h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
html, body {
	width: 100%;
	overflow-x: hidden;
}
#masthead {
	width: 20vw;
    padding: 6% 20px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}
#masthead .container {
	width: 100%;
}
#masthead .container .row {
	display: block;
}
#masthead #mainnav li {
	padding: 0;
	width: 100%;
}
body .content-area .post-wrap {
	padding-right: 0;
}
body .panel-grid {
	max-width: none;
}
.page-wrap {
	margin-left: 20vw;
	padding-top: 263px;
}
.page-wrap .container {
	width: 100%;
}
.sp {
	display:none;
}
.preloader .pre-bounce1, .preloader .pre-bounce2{
    background-color: #ddd !important;
}

@media(max-width: 600px) {
	.sp {
		display:block;
	}
	.pc {
		display: none;
	}
}



/*----------------------------

ヘッダー

----------------------------*/
#primary-menu {
	padding-top: 130px !important;
}
#primary-menu li {
	margin-bottom: 10px;
}
#primary-menu li a {
	display: grid !important;
    grid-template-columns: 110px 1fr;
	align-items: center;
	column-gap: 12px;
	font-weight: 400 !important;
}
#primary-menu li a span {
	white-space: nowrap;
}
.main-header.sticky-active {
	box-shadow: none !important;
}
.menu-works,
.menu-layers {
	display: none !important;
	margin-top: 10vh;
}
.menu-works a,
.menu-layers a {
	color: #777 !important;
}
.single-dressed_in_metal .menu-works {
	display: block !important;
}
.single-future_layers .menu-layers {
	display: block !important;
}

@media(max-width:1024px){
	.menu-works,
	.menu-layers {
        margin-top: 0;
        position: absolute !important;
        bottom: 80px;
	}
}
@media(max-width:1024px) {
	.sydney-offcanvas-menu {
		z-index: 999999;
	}
}



/*----------------------------

フッター

----------------------------*/
footer {
	z-index: 999;
    position: relative;
}
.ftr-top {
	position: relative;
	padding: 26px 40px 45px;
}
footer ul {
	padding: 0;
}
footer ul {
	list-style: none;
}
footer .footer-nav {
	margin-bottom: 40px;
}
footer .footer-nav a {
	font-size: 2.3em;
    color: #4d4d4d;
}
.footer-sns {
	display: flex;
	gap: 16px;
}
.footer-sns a {
	color: #4d4d4d;
    font-size: 1.6em;
}
.footer-sns a:hover {
	opacity: 0.7;
}
.footer-right {
    position: absolute;
    right: 25px;
    bottom: 70px;
}
.footer-right img {
    width: 200px;
}
.ftr-bottom {
	text-align: center;
	background: #fff;
	padding: 65px 40px;
}
.ftr-bottom p {
	color: #333;
}
.ftr-bottom .footer-logo img {
	width: 100px;
    margin-bottom: 10px;
}
.ftr-bottom .footer-logo p {
	font-size: 0.8em;
}
.ftr-bottom .copy {
	font-size: 0.8em;
}
footer .ftr-policy {
	margin-top: 33px;
}
footer .ftr-policy a {
	font-size: 1em !important;
    color: #676666;
}



/*----------------------------

HOME

----------------------------*/
.home #primary {
	padding-right: 0;
	padding-left: 0;
}
.home .page-wrap {
	padding: 0 !important;
}
.home .container {
	width: 100%;
}
.home .panel-grid {
	max-width: none;	
}

/* スライダー */
.top-fv {
	padding: 0 !important;
}
#fv-slider {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.splide__slide {
	overflow: hidden;
	opacity: 1;
	transition: opacity 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.splide__slide.is-prev {
	opacity: 0;
}
.splide__slide.is-active {
	z-index: 2;
}
.splide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.15);
	transition: transform 6s linear;
	overflow: visible;
}
/* 各方向 */
.slide-up.is-active img {
	transform: scale(1.15) translateY(-40px);
}
.slide-left.is-active img {
	transform: scale(1.15) translateX(40px);
}
.slide-right.is-active img {
	transform: scale(1.15) translateX(-40px);
}
/* fade時の余白・ズレ対策 */
.splide__track {
	height: 100%;
	overflow: hidden;
}
.splide__list {
	height: 100%;
}
.splide__slide {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}
@keyframes slideUp {
	from {
		opacity: 1;
		transform: scale(1.15) translateY(40px);
	}
	to {
		opacity: 1;
		transform: scale(1.15) translateY(-40px);
	}
}
@keyframes slideLeft {
	from {
		opacity: 1;
		transform: scale(1.15) translateX(-40px);
	}
	to {
		opacity: 1;
		transform: scale(1.15) translateX(40px);
	}
}
@keyframes slideRight {
	from {
		opacity: 1;
		transform: scale(1.15) translateX(40px);
	}
	to {
		opacity: 1;
		transform: scale(1.15) translateX(-40px);
	}
}
@media (max-width: 768px) {
	.splide__slide img {
		transform: scale(1.25);
	}
	.slide-left.is-active img {
		transform: scale(1.25) translateX(4vw);
	}
	.slide-right.is-active img {
		transform: scale(1.25) translateX(-4vw);
	}
}


.top-subtitle {
	font-family: "Marcellus", serif;	
	margin-bottom: 50px;
}
.top-subtitle span {
	font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
.top-contents {
/* 	max-width: 1030px; */
    margin: 0px auto;
	padding-right: 20px !important;
}
.home .dressed-title {
	font-size: 1em;
}
.top-posts-dressed {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.top-posts-dressed article {
	width: 30%;
	margin-bottom: 60px;
}
.dressed-thumb {
	text-align: center;
}
.top-posts-dressed article img {
	height: 30vw;
	width: 100%;
    object-fit: cover;
    box-shadow: 3px 2px 6px #aaa;
}
.top-posts-future {
/* 	max-width: 1045px; */
    margin: 0 auto;
}
.top-posts-btn {
	margin: 50px 5px 250px;
}
.top-posts-btn a {
	background: #cdcdcd;
    color: #333;
    padding: 20px 78px;
    font-weight: 500;
	border: 1px solid #999;
}
.top-posts-future {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.top-posts-future article {
	width: 46%;
	margin-bottom: 60px;
}
@media (max-width: 600px) {
	.top-posts-dressed article img {
		height: 380px;
	}
}


/*----------------------------

Dressed in Metal 

----------------------------*/
.dressed-top-area {
	padding-top: 0 !important;
}
.post-top-txt-box {
	padding: 0 15px;
}
.post-type-archive .page-wrap {
	padding-top: 269px;
/* 	max-width: 1400px; */
    width: 100%;
    margin: 0 auto;
    padding-left: 20vw;
}
.post-top-txt {
	border: 1px solid #ddd;
	text-align: center;
    padding: 55px 5px;
    margin-bottom: 115px;
}
.post-top-txt .title {
    font-weight: 400;
    font-size: 1.6em;
    margin-bottom: 30px;
}
.post-top-txt .txt {
    font-weight: 500;
    line-height: 1.6;
}
.post-type-archive .layout3 .row {
	justify-content: center;
}
.post-type-archive article {
	padding: 0 30px;
	margin-bottom: 100px;
}
.post-type-archive-dressed_in_metal article img {
	height: 30vw;
	width: 100%;
    object-fit: cover;
    box-shadow: 3px 2px 6px #aaa;
}
.archive .dressed-title {
	font-size: 1em;
}
.dressed-title {
	margin-top: 20px;
    color: #333;
}

/* 個別記事 */
.single #primary {
	width: 100%;
}
.single .dressed-title {
    display: flex;
    justify-content: center;
	margin-bottom: 0;
}
.single .dressed-title:before {
	content: "-";
	padding-right: 10px;
}
.single .dressed-title:after {
	content: "-";
	padding-left: 10px;
}
.dressed-top-img {
	margin-bottom: 150px;
}
.single-dressed_in_metal .dressed-top-img {
    margin-bottom: 114px;
}
.dressed-top-img img {
	width: 100%;
	max-height: 626px;
	object-fit: cover;
}
.dressed-title {
	font-weight: 400;
    font-size: 1.4em;
    margin-bottom: 40px;
}
.dressed-info ul {
	display: flex;
	justify-content: center;
}
.dressed-info ul li {
	list-style: none;
}
.dressed-info li + li::before {
	content: "|";
	margin: 0 12px;
	color: #999;
}
.dressed-imgs {
	padding-top: 25px !important;
}
/* モーダル */
.image-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,.85);
	/* 初期状態 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity .75s ease, visibility .75s ease;
}
.image-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.image-modal img {
	max-width: 90vw;
	max-height: 90vh;
	transform: scale(.96);
	transition: transform .5s ease;
}
.image-modal.is-open img {
	transform: scale(1);
}
/* × ボタン */
.image-modal-close {
	position: fixed;
	top: 20px;
	right: 30px;
	font-size: 32px;
	color: #fff;
	cursor: pointer;
	z-index: 10000;
}
/* 投稿ナビゲーション */
.custom-post-nav {
	display:flex;
	align-items:center;
	justify-content:space-between;
	width: 82%;
	margin: 0 auto 126px;
}
.custom-post-nav .nav-next{
	margin-left:auto;
}
.nav-item {
    display:flex;
    align-items:center;
	gap: 26%;
    width:45%;
    text-decoration:none;
}
.nav-prev {
    justify-content:flex-start;
}
.nav-next {
    justify-content:flex-end;
}
.nav-thumb img {
    width:180px;
    height:auto;
    object-fit:contain;
}
.nav-label {
    font-size:14px;
    letter-spacing:.05em;
    white-space:nowrap;
	color: #333;
    font-weight: 400;
}
.nav-sep {
    width:1px;
    height:60px;
    background:#ccc;
    flex-shrink:0;
}
.nav-thumb {
	border: none !important;
}

@media(max-width:600px) {
	.custom-post-nav .nav-prev {
		margin-right: auto;
	}
	.post-type-archive article {
		padding: 0;
		width: 90%;
        margin: 0 auto;
	}
	.post-type-archive-dressed_in_metal article img {
		height: 380px;
	}
}



/*----------------------------

Future Layers

----------------------------*/
.future-top-area {
	padding-top: 0 !important;
}
.post-type-archive-future_layers article {
	width: 50%;
    padding: 0 32px;
}
.future-top-img {
    margin-bottom: 109px;
}
.future-title {
    border: 1px solid #ddd;
    padding: 10px;
    color: #333;
    text-align: center;
	border: 1px solid #ccc;
	padding: 16px 5px;
	font-family: "Marcellus", serif;
	font-weight: 600;
	line-height: 1.4;
}
.future-title span {
	display: block;
	font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
	font-weight: 400;
}
.future-title p {
	margin-bottom: 0;
}
.future-2-column {
	padding-top: 10px !important;
}
.future-2-column p {
    line-height: 1.8;
    font-size: 0.9em;
}
.future-cv-area {
	border: 1px solid #eee;
	margin-bottom: 100px;
}
.future-cv-area .title {
	font-weight: 500;
    margin-bottom: 70px;
}
.future-cv-area .btn img {
	max-width: 200px;
}
.future-cv-area .txt {
    font-size: 0.9em;
    line-height: 1.4;
}
.single-future_layers .custom-post-nav {
	width: 100%;
}
.single-future_layers .future-title span {
    display: inline;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
}
.single-future_layers .future-title {
    padding: 33px 5px;
}

@media(max-width:600px) {
	.future-top-img {
		margin-bottom: 10px;
	}
	.post-type-archive-future_layers article {
		padding: 0;
		width: 90%;
		margin: 0 auto;
	}
}



/*----------------------------

CONTACT お問い合わせ

----------------------------*/
.con-form-area {
	padding-top: 0 !important;
}
.con-form-area .title {
	font-size: 1.4em;
    margin-bottom: 40px;
}
.con-form {
	text-align: center !important;
}
.con-form-area form {
	font-size: 14px;
	display: inline-block;
    text-align: left;
	margin-top: 50px;
}
.con-form-area form,
.con-form-area form p,
.con-form-area form input {
	width: 100%;
	max-width: 490px;
}
.con-form .submit {
	text-align: center;
}
.con-form .wpcf7-spinner {
	position: absolute;
}
.con-form .submit input {
    background: #cdcdcd;
    color: #333;
    padding: 20px 78px;
    font-weight: 500;
    border: 1px solid #999;
    width: auto;
}
.con-form .submit input:hover {
	color: #333;
	background: #ddd;
}
.con-comp-area {
	padding-top: 0 !important;
}
.con-comp-area .title {
	font-size: 1.4em;
    margin-bottom: 40px;
}

/*レスポンシブ*/
.br-sp {
	display: none;
}
@media screen and (min-width:768px) and (max-width:1024px){
	#masthead-mobile >div>div>div {
		width: 100%;
	}
}
	
@media(max-width:1024px){
	.home #masthead-mobile {
		position: absolute;
		background: none;
	} 
	.mobile-header .header-elements {
		position: fixed;
		right: 0;
		top: auto;
		z-index: 99999;
	}
	.header-search{
		display: none;
	}
	.page-wrap{
		margin-left: 0;
	}
	.top-contents{
		width: 90%;
		margin: 0 auto;
	}
	.site-logo {
        max-height: 37px!important;
		margin-left: 10px;
    }
	.sydney-offcanvas-menu.toggled .mobile-header-item img{
		filter: brightness(0) invert(1);
	}
	.sydney-offcanvas-menu svg {
		filter: brightness(0) invert(1);
	}
	#mainnav .nav-menu > li > a {
		color: #fff!important;
	}
	#primary-menu li a {
		display: block!important;
	}
	.sydney-offcanvas-menu.toggled #primary-menu{
		padding-top: 20px !important;
	}
	.content-area .post-wrap {
		padding: 0!important;
	}
	.page-wrap {
		padding: 0!important;
	}
	.hentry .entry-content > div > div > div {
		padding: 10px 0 0!important;
	}
	.dressed-top-img {
		margin-bottom: 80px;
	}
	.custom-post-nav {
		width: 100%;
		margin: 0 auto 40px;
	}
	.top-subtitle {
		margin-top: 60px;
	}
	.top-posts-btn {
		margin: 50px 5px 120px;
	}
}
@media(max-width:780px){
	.top-fv > div {
		margin: 0!important;
		padding: 0!important;
	}
	.top-posts-dressed article {
		width: 48%;
	}
	.hentry .entry-content > div > div > div > div {
		padding: 0!important;
	}
	.dressed-info ul {
		flex-wrap: wrap;
		margin: 0!important;
		padding: 0!important;
	}
	.dressed-info ul li {
		font-size: 0.9em;
	}
	.posts-layout .hentry {
		margin-bottom: 30px;
	}
}
@media(max-width: 1024px){
	.mobile-header {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.top-posts-dressed article {
		width: 100%;
		margin-bottom: 20px;
	}
	#fv-slider {
		height: 100vh;
	}
	.top-posts-btn {
		margin: 50px 5px 120px;
	}
	.top-posts-future article {
		width: 100%;
		margin-bottom: 20px;
	}
	.br-sp {
		display: block;
	}
	.br-pc {
		display: none;
	}
	.site-logo {
        max-height: 30px !important;
		margin-left: 10px;
    }
	#masthead-mobile .sydney-svg-icon {
		height: 27px;
		width: 30px;
	}
	.menu-toggle .sydney-svg-icon svg {
		width:30px;
		height:auto;
		max-height: none;
	}
	.top-contents{
		padding: 100px 0 0!important;
	}
	footer .footer-nav a {
		font-size: 1.6em;
	}
	.footer-right {
		right: auto;
		bottom: 75px;
	}
	footer .footer-nav {
		margin-bottom: 100px;
	}
	.footer-right img {
		width: 120px;
	}
	.post-top-txt-box {
		padding: 0;
	}
	.post-top-txt-box .post-top-txt .txt{
		font-size: 0.9em;
	}
	.post-top-txt .title {
		font-size: 1.5em;
	}
	.con-form-area form {
		width: 90%;
		margin: 0 auto;
	}
	.single-dressed_in_metal .dressed-top-img {
        margin-bottom: 25px;
    }
	.single-dressed_in_metal .dressed-info {
		margin-bottom: 36px;
	}
	.single-dressed_in_metal .dressed-title {
		margin-bottom: 16px;
	}
	.single-dressed_in_metal .dressed-title p {
		margin-bottom: 10px;
	}
	.dressed-info li + li::before {
		display: none;
	}
	.dressed-info ul {
        margin: 0 0 15px !important;
    }
	.future-cv-area .title p {
		padding: 40px 10px 0;
		margin: 0!important;
	}
	.future-cv-area .title {
		margin-bottom: 40px;
	}
}



/*----------------------------

サイトポリシー

----------------------------*/
.policy .entry-content h2,
.dressed-in-metal-policy .entry-content h2 {
	margin-top: 0 !important;
	margin-bottom: 40px !important;
	font-weight: 300;
}
.policy article .content-inner .entry-content h3,
.dressed-in-metal-policy article .content-inner .entry-content h3 {
	margin-bottom: 40px;
    margin-top: 100px;
	font-weight: 300;
	font-size: 1.6em;
}
.policy article .content-inner .entry-content h3:before,
.dressed-in-metal-policy article .content-inner .entry-content h3:before {
	content: "";
    width: 30px;
    height: 1px;
    background: #B0B0B0;
    display: block;
    margin-top: -50px;
    margin-bottom: 50px;
}
.policy .page-wrap,
.dressed-in-metal-policy .page-wrap {
	padding-bottom: 200px;
}

@media(max-width: 600px) {
	.policy article .content-inner .entry-content h3,
	.dressed-in-metal-policy article .content-inner .entry-content h3 {
		margin-bottom: 20px;
		margin-top: 40px;
		font-size: 1.3em;
	}
	.policy article .content-inner .entry-content h3:before,
	.dressed-in-metal-policy article .content-inner .entry-content h3:before {
		margin-top: -10px;
		margin-bottom: 35px;
	}
}

.head-first {
	display: none!important;
}