@charset "UTF-8";



/*

Theme Name: masuya

Theme URI: https://wordpress.org/themes/twentytwentyone/

Author: the WordPress team

Author URI: https://wordpress.org/

Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.

Requires at least: 5.3

Tested up to: 6.5

Requires PHP: 5.6.2

Version: 2024.1008.002

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: twentytwentyone

Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio



Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org

Twenty Twenty-One is distributed under the terms of the GNU GPL.

*/





@import url('./layout.css?1');



/* Variables */

:root {



	--header--height: 10rem;

	--header--height--sp: 6rem;

	--header--logo--height: 8rem;

	--header--logo--height--sp: 4rem;



	--footer--copyright--height: 7rem;





	--color--red: #cc0000;

	--color--white: #ffffff;

	--color--lightgray: #cccccc;

	--color--green: #2B7471;

	--color--black: #111111;



}



html,body{

	font-family: "Noto Serif JP", serif;

	font-optical-sizing: auto;

	font-weight: 700;

	font-style: normal;

}



.eng, .eng *{

	font-family: "Oswald", sans-serif;

	font-optical-sizing: auto;

	font-weight: 400;

	font-style: normal;

}





.inner{

	max-width: 118rem;

	margin: 0 auto;

	padding: 0 1rem;

}





.inner-mini{

	max-width: 80rem;

	margin: 0 auto;

	padding: 0 1rem;

}





.under{

	padding-bottom: 15rem;

}







.midashi01{

	text-align: center;

	font-size: 3rem;

	margin-bottom: 3rem;

}

.midashi01 span{

	display: block;

}













.dl-list dl{

	display: flex;

	align-items: center;

	position: relative;

	border-top: var(--color--lightgray) 1px solid;

}

.dl-list dl::before{

	content: "";

	position: absolute;

	top: -.1rem;

	left: 0;

	width: 20rem;

	height: .1rem;

	background-color: var(--color--green);

	z-index: 1;

}

.dl-list dl:last-of-type{

	border-bottom: var(--color--lightgray) 1px solid;

}

.dl-list dl:last-of-type::after{

	content: "";

	position: absolute;

	bottom: -.1rem;

	left: 0;

	width: 20rem;

	height: .1rem;

	background-color: var(--color--green);

	z-index: 1;

}





.dl-list dl{

	width: 100%;

}

.dl-list dl dt{

	width: 20rem;

	padding: 2rem 0;

	text-align: center;

}

.dl-list dl dd{

	width: calc(100% - 25rem);

	padding: 2rem 2rem 2rem 3rem;

}







/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



header



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



header{

	height: var(--header--height);

	position: fixed;

	top: 0;

	left: 0;

	background-color: rgba(255, 255, 255, .8);

	z-index: 100;

	width: 100%;

}



header .header-inner{

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 0 2rem;

}



header .header-inner .logo,

header .header-inner .logo a{

	display: flex;

	align-items: center;

	height: var(--header--height);

}



header .header-inner .logo img{

	height: var(--header--logo--height);

}



header .header-inner .menu{

	display: flex;

}

header .header-inner .menu li a{

	display: flex;

	align-items: center;

	justify-content: center;

	height: var(--header--height);

	font-size: 2rem;

	padding: 0 1rem;

}

header .header-inner .menu li a:hover{

	color: var(--color--green);

}

header .header-inner .menu li a i{

	font-size: 3rem;

}



img{

	max-width: 100%;

}



main{

	padding-top: var(--header--height);

}





/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



footer



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



footer{

	border-top: var(--color--lightgray) 1px solid;

}





footer .copyright{

	text-align: center;

	display: flex;

	align-items: center;

	justify-content: center;

	height: var(--footer--copyright--height);

}

footer .copyright small{

	line-height: 1;

	font-size: 1.4rem;

}









/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



section.main



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



.front{

	margin-bottom: 10rem;

	margin-top: var(--header--height);

}





section.main{
	margin-bottom: 5rem;
}

section.main .sliders-wrapper{ position: relative; }
section.main .sliders-wrapper .logos{ position: absolute;
    top: 15rem;
    width: 15rem;
    left: calc(50% - 7.5rem); }
	section.main .sliders-wrapper .logos img{ width: 100% !important; height: auto !important; }




section.under-contents{

	display: flex;

	justify-content: space-between;

}

section.under-contents a{

	width: 32%;

	display: block;

}



section.under-contents dl img{

-webkit-filter: grayscale(1); /* Webkit */

	filter: gray; /* IE6-9 */

	filter: grayscale(1); /* W3C */

	transition: .5s all;

}

section.under-contents a:hover dl img{

	filter: none;

	-webkit-filter: none;

}

section.under-contents h2{

	font-size: 2rem;

	font-weight: 700;

}

section.under-contents dd{

	margin-top: .7rem;

}











.page-title{

	text-align: center;

	margin-bottom: 5rem;

}

.page-title p{

	font-size: 4rem;

}

















.works-list .remarks{

	text-align: right;

	margin-bottom: 3rem;

	font-size: 1.4rem;

	margin-right: .5rem;

}





.works-list ul{

	display: flex;

	flex-wrap: wrap;

	justify-content: flex-start;

}

.works-list ul li{

	width: calc(25% - 4px);

	aspect-ratio: 1 / 1;

	border: #ffffff 2px solid;

}

.works-list ul li a{

	display: block;

	aspect-ratio: 1 / 1;

	overflow: hidden;

	position: relative;

}

.works-list ul li img{

	width: 100%;

	height: 100%;

	object-fit: cover;

	transition: .5s all;

}

.works-list ul li span{

	opacity: 0;

	transition: .5s all;

	position: absolute;

	width: calc(100% - 4rem);

	height: calc(100% - 4rem);

	padding: 2rem;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	word-break: break-all;

	top: 0;

	left: 0;

	background-color: rgba(255, 255, 255, .8);

	z-index: 1;

	transform: scale(0, 0);

}

.works-list ul li:hover img{

	transform: scale(1.2, 1.2);

}

.works-list ul li:hover span{

	opacity: 1;

	transform: scale(1, 1);

}



.works-list ul li span strong{

	font-size: 1.4rem;

	margin-top: 1rem;

}







.box{

	margin-bottom: 10rem;

}







.pager{

	margin-top: 5rem;

}





.pager .wp-pagenavi{

	display: flex;

	justify-content: center;

}

.pager span,

.pager a{

	display: flex;

	width: 3rem;

	height: 5rem;

	align-items: center;

	justify-content: center;

	font-size: 2rem;

	margin: 0 .5rem;

	border-bottom: var(--color--white) 2px solid;

}



.pager span,

.pager a:hover{

	color: var(--color--green);

	border-bottom: var(--color--green) 2px solid;

}







/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



page-about



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



/* message */

.page-about .message{

	text-align: center;

}

.page-about .message h1{

	color: var(--color--green);

	font-size: 6rem;

	display: block;

	margin: 2rem;

}

.page-about .message h1 span{

	font-size: 6rem;

	color: var(--color--black);



}





/* philosophy */

.page-about .philosophy p{

	margin-top: 3rem;

}

.page-about .philosophy ul{

	display: table;

	margin: 0 auto;

}

.page-about .philosophy ul li::before{

	content: "";

	background: url('./assets/images/common/logo.png') no-repeat 50% calc(50% + 3px) / 24px auto;

	padding-right: 1rem;

	width: 30px;

	height: 40px;

	display: flex;

}

.page-about .philosophy ul li{

	font-size: 2.4rem;

	display: flex;

}

.page-about .logo_name{ max-width: 30rem; margin: 0 auto; }















/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



page-access



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



.page-access .map{

	margin: 0 1rem;

}

.page-access .map iframe{

	width: 100%;

	height: auto;

	aspect-ratio: 1 / .5;

}









.form-box dl{

	display: flex;

}





.form-box .form-message{

	text-align: center;

	margin-bottom: 5rem;

}



.form-box input:not([type="checkbox"]),

.form-box textarea{

	width: 100%;

	border: var(--color--lightgray) 1px solid;

	padding: 1rem 2rem;

	font-family: "Noto Serif JP", serif;

	font-weight: 700;

}



.form-box.dl-list dl dt{

	width: 18rem;

	padding: 2rem 1rem;

	text-align: left;

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.form-box.dl-list dl dt span{

	color: var(--color--red);

	font-size: 1.2rem;

}

.form-box .button{

	margin: 5rem 0 0;

}

.form-box .button ul{

	display: flex;

	justify-content: center;

}

.form-box .button li{

	margin: 0 2rem;

	width: calc(50%);



}

.form-box .button li input,

.form-box .button li a{

	border: none;

	display: flex;

	height: 8rem;

	justify-content: center;

	align-items: center;

	cursor: pointer;

}

.form-box .button li.s input,

.form-box .button li.s a{

	background-color: var(--color--green);

	color: var(--color--white);

}



.form-box-confirm .privacy-box{

	display: none;

}





.form-box-input .button li.b{

	display: none;

}



.agreement-box{

	text-align: center;

}

.agreement-box *{

	font-weight: 700;

}



.privacy_box{

	border: 1px solid var(--color--lightgray);

	background: var(--color--white);

	padding: 1em;

	height: 200px;

	overflow-y:scroll;

	margin-bottom: 1em;

  }

  .privacy_box p{

	font-size:.9rem;

  }

  .privacy_box h4{

	text-align: center;

	margin-bottom: 1em;

  }

  .privacy_box h5{

	margin: 2rem 0 .5rem 0;

  }

  



.privacy_box{

	margin-top: 5rem;

  }

  

   .privacy_textbox{

	background-color: var(--color--white);

  }

  

  

   .privacy_textbox h3{

	font-size: 14px;

	margin-top: 1.5rem;

  }

  

   .privacy_textbox h3:first-of-type{

	margin-top: 0;

  }

  

   .privacy_textbox p{

	font-size: 14px;

  }







.form-box-completion h3{

	text-align: center;

	font-size: 2rem;

	margin-bottom: 4rem;

}



.form-box-completion p{

	line-height: 2;

}

.form-box-completion .caution{

	color: var(--color--red);

	margin-top: 2rem;

}







.works-detail h1{

	margin-bottom: 3rem;

	display: flex;

	justify-content: space-between;

	font-size: 3.2rem;

	align-items: flex-end;

}

.works-detail h1 span{

	padding-left: 3rem;

	font-size: 1.4rem;

}

.works-detail .text{

	margin-top: 3rem;

}

.works-detail .text p{

	line-height: 2;

}





.button-list{

	border-top: var(--color--lightgray) 1px solid;

	border-bottom: var(--color--lightgray) 1px solid;

	margin-top: 7rem;

}



.button-list ul{

	display: flex;

}

.button-list ul li{

	width: 33%;

}



.button-list ul li:not(:last-child){

	border-right: var(--color--lightgray) 1px solid;

}

.button-list ul li a{

	display: block;

	padding: 2.5rem 0;

	line-height: 1;

	text-align: center;

	font-size: 2.4rem;

}

.button-list ul li a:hover{

	background-color: var(--color--green);

	color: var(--color--white);

}









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



	MenuIcon



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



.menu_icon{

	z-index: 1002 !important;

	padding: 0;

	height: var(--header--height--sp);

	width: 4rem;

	position: fixed;

	top: 0;

	right: 0;

	background: url('./assets/images/common/menu.svg') no-repeat 50% 50%;

}

.menu_icon .menu-trigger,

.menu_icon .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; }

.menu_icon .menu-trigger{ position: relative; width: 4rem; height: var(--header--height--sp); }

.menu_icon .menu-trigger span { position: absolute; left: calc(50% - 12px); width: 24px; height: 2px; background: #000000; }

.menu_icon .menu-trigger span:nth-of-type(1) { top: 40%; }

.menu_icon .menu-trigger span:nth-of-type(2) { top: 50%; }

.menu_icon .menu-trigger span:nth-of-type(3) { top: 60%; }

.menu_icon .menu-trigger.active span:nth-of-type(1) {

	-webkit-transform: translateY(8px) rotate(-45deg);

	transform: translateY(8px) rotate(-45deg);

	top: 33%;

}

.menu_icon .menu-trigger.active span:nth-of-type(2) {

	opacity: 0;

}

.menu_icon .menu-trigger.active span:nth-of-type(3) {

	-webkit-transform: translateY(-9px) rotate(45deg);

	transform: translateY(-6px) rotate(45deg);

	top: 57%;

}

.menu_icon .menu-trigger.active span{ width: 24px; }

.menu_icon .menu-trigger.active span:nth-of-type(1) { top: 34%; }

.menu_icon .menu-trigger.active span:nth-of-type(2) { top: 60%; }

.menu_icon .menu-trigger.active strong::before{ content: "close"; }





.home main{ padding-top: 0; }





header .header-inner{ padding-right: 0; }

.menu{ margin-right: 4rem; }



































.navigation{

	position: fixed;

	top: 0;

	height: calc(100vh); background-color: var(--color--white); display: none; z-index: 999; width: 100%; overflow-y: auto; left: 0; }

.navigation.open{ display: flex; align-items: center; }





.navigation .navigation__inner{  max-width: 350px; margin: 0 auto; }

.navigation .navigation__inner *{ color: #ffffff; }









.navigation .navigation__inner .tel{ border-top: #ffffff 1px solid; margin-top: 20px; padding-top: 20px; }





.navigation .navigation__inner ul li a{ padding: 15px 0; display: block; }





header .navigation.open .header-menu{

	padding: var(--sp-header-height) 2rem 0;

	height: calc(100vh);

	display: block;

}

header .navigation.open .header-menu ul{

	display: block;

}







.slider .slick-list span{

	justify-content: center;

	display: flex;

}



.thumbnail{

	margin-top: 2rem;

}



.thumbnail .slick-slide{

	padding: 0 1rem;

	aspect-ratio: 1 / 1;

	overflow: hidden;

}

.thumbnail .slick-slide img{

	width: 100%;

	height: 100%;

	object-fit: cover;

}









.works-message{ margin-bottom: 10rem; }



.works-message h3{ font-size: 3rem; text-align: center; margin-bottom: 3rem; }



.works-message strong{ font-size: 2.4rem; }



.works-message p{ text-align: center; line-height: 2; }



.works-message ol{

	display: table;

	margin: 5rem auto;

}

.works-message ol li{

	font-size: 2.4rem;

}



.slick-prev{ position: absolute; left: 0; top: calc(50% - 4rem); z-index: 1; background: none; border:none; width: 80px; height: 80px; text-indent: -999rem; background: url('./assets/images/common/arrow_left.svg') no-repeat 50% 50% / 80px auto; }

.slick-next{ position: absolute; right: 0; top: calc(50% - 4rem); z-index: 1; background: none; border:none; width: 80px; height: 80px; text-indent: -999rem; background: url('./assets/images/common/arrow_right.svg') no-repeat 50% 50% / 80px auto; }







@media screen and (min-width: 1061px){

	.tb{ display: none !important; }

}





@media screen and (min-width: 1001px){

	.tb2{ display: none !important; }

}







@media screen and (min-width: 769px){





	.thumbnail.thumbnail-stop-pc .slick-track {

		transform:unset!important;

	}



}





@media screen and (max-width: 768px){

	.tb2{ display: none !important; }

	.tb{ display: none !important; }


	section.main .sliders-wrapper .logos{ top: 25vw; width: 12rem; left: calc(50% - 6rem); }



	.page-about .logo_name{ max-width: 20rem; margin: 0 auto; }



	.works-message{ margin-bottom: 5rem; }

	.works-message h3{ font-size: 2.4rem; text-align: center; margin-bottom: 3rem; }



	.works-message strong{ font-size: 1.8rem; }

	

	.works-message p{ text-align: left; line-height: 1.6; }

	

	.works-message ol{

		display: table;

		margin: 3rem auto;

	}

	.works-message ol li{

		font-size: 1.8rem;

	}

	.main{

		height: 75vh;

		padding-top: var(--header--height--sp);

	}

	.main img{

		height: 75vh;

		width: 100%;

		object-fit: cover;

	}



	

	.thumbnail.thumbnail-stop-sp .slick-track {

		transform:unset!important;

	}





	.front{ margin-top: 0; }



	main{ padding-top: var(--header--height--sp); }



	.inner{ padding: 0 1rem; }



	.under{ padding-bottom: 5rem; }



		.page-title{

			margin-bottom: 2.5rem;

		}

		.page-title p{

			font-size: 2.2rem;

		}



		.box{ margin-bottom: 5rem; }



		.midashi01{ font-size: 2.4rem; }



		.page-about .message h1{ font-size: 3.2rem; margin: 1rem; }

		.page-about .message h1 span{ font-size: 3.2rem; }







		.dl-list dl{ display: block; border-top: none; }

		.dl-list dl::before{ display: none; }

		

		.dl-list dl dt{ padding: 0 0 1rem 1.5rem; text-align: left; border-bottom: var(--color--lightgray) 1px solid; position: relative; width: calc(100% - 1.5rem); }

		.dl-list dl dt::before{     content: "";

			position: absolute;

			bottom: -.1rem;

			left: 0;

			width: 15rem;

			height: .1rem;

			background-color: var(--color--green);

			z-index: 1; }

		.dl-list dl dd{ width: calc(100% - 3rem); padding: 1rem 1.5rem 2rem 1.5rem; font-size: 1.4rem; }



		.dl-list dl:last-of-type{ border-bottom: none !important; }

		.dl-list dl:last-of-type::after{ display: none; }







		.page-about .philosophy ul li{ font-size: 1.8rem; }

		.page-about .philosophy ul li::before{ height: 3rem; }



		/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



		page-access



		::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



		.page-access .map{

			margin: 0 1rem;

		}

		.page-access .map iframe{

			width: 100%;

			height: auto;

			aspect-ratio: 1 / 1.5;

		}

		footer .copyright{ height: 4rem; }

		footer .copyright small{

			font-size: 1rem;

		}



		.works-list .remarks{ font-size: 1.2rem; }

		.works-list ul li{ width: calc(50% - .4rem); }

		



				

		.pager span,

		.pager a{

			display: flex;

			width: 2rem;

			height: 3rem;

			align-items: center;

			justify-content: center;

			font-size: 1.4rem;

			margin: 0 .5rem;

			border-bottom: var(--color--white) 2px solid;

		}





		.works-detail h1{ display: block; font-size: 2.6rem; margin-bottom: 2rem; }

		.works-detail h1 span{ display: block; padding-left: 0; margin-top: 1rem; text-align: right; }

		.button-list{ margin-top: 4rem; }

		.button-list ul li a{ font-size: 1.6rem; padding: 2rem 0; }





		.form-box .form-message{ margin-bottom: 1.5rem; }



		.form-box.dl-list dl dt{ width: calc(100% - 2rem); }

		.dl-list dl dd{ width: calc(100% - 3rem); padding: 1rem 1.5rem 2rem 1.5rem; }





		.privacy_box{ margin-top: 0; }



		.form-box .button ul{ flex-direction: column-reverse; }

		.form-box .button ul li{ width: 100%; margin: 0; }

		.form-box .button ul li.b{ margin-top: 1rem; }



		.form-box-confirm dl dd{ padding-left: 2rem; }







		section.under-contents{ flex-direction: column; }

		section.under-contents a{ width: 100%; }

		section.under-contents a:not(:last-child){ margin-bottom: 3rem; }



		section.under-contents dd{ font-size: 1.4rem; }



		section.under-contents h2{ text-align: center; }









		

header,

header .header-inner .logo,

header .header-inner .logo a,

header .header-inner .menu li a{

	height: var(--header--height--sp);

}



header .header-inner .logo img{

	height: var(--header--logo--height--sp);

}

header .header-inner .menu li a i{

	font-size: 2.6rem;

}





.navigation ul li a{ display: block;

	text-align: center;

	font-size: 2.4rem;

padding: 1rem 0; }





.navigation-menu{ width: 100%; }

			



.slick-prev{ top: calc(50% - 2rem); width: 40px; height: 40px; text-indent: -999rem; background: url('./assets/images/common/arrow_left.svg') no-repeat 50% 50% / 40px auto; }

.slick-next{ top: calc(50% - 2rem); width: 40px; height: 40px; text-indent: -999rem; background: url('./assets/images/common/arrow_right.svg') no-repeat 50% 50% / 40px auto; }

}