// スタイルシート common

@charset "utf-8";

@import "mixin";

body{
	@include root;
	position: relative;
}

img, video{
	max-width: 100%;
	height: auto;
}

a:hover {
	opacity: .75;
}


$smartphone_gnav: 1100;

div#header {
	div.container {
		@include container(1052, 10);
		padding-bottom:20px;
		div#headerSiteInfo {
			display:flex;
			align-items: center;
			justify-content: flex-end;;
			height:53px;;
			div.description {
				@include f_all(14, "", 18);
				margin-right: auto;
			}
			div.webmenu {
				@include f_all(14);
				ul {
					display:inline-flex;
					padding:0 1em;;
					li {
						margin-right: 1em;
						&:last-child {
							margin-right:0;
						}
						a {
						}
					}
				}
			}
			div.contact {
				align-self: stretch;
				color:$themetextcolor;
				background: url(../images/icon-smartphone-white.png) 22px center / 25px 29px no-repeat $themecolor;
				padding: 10px 16px 10px 63px;
				display:flex;
				flex-direction: column;
				justify-content:space-between;
				div.tel {
					@include ff_en();
					@include f_all(20, 60, "");
					margin-bottom:3px;
				}
				div.teltime {
					@include f_all(10);
				}
			}
			@include maxwidth($smartphone_gnav){
				display:block;
				padding-top: 70px;
				height:auto;
				div.description {
					margin-bottom: 10px;
					@include f_all(12, "", 16);
				}
				div.webmenu{
					//display:none;
					transform: translateX(-100%);
					//display:block;
					position:fixed;
					z-index:2;
					background-color:$themetextcolor;
					color:$themecolor;
					bottom:0;
					left:0;
					width: 75%;
					height: 25%;
					max-width: 300px;
					ul {
						display:flex;
						flex-direction: column;
						padding:20px 0;
						justify-content:space-between;
						height:100%;
						overflow-y:auto;
						box-sizing:border-box;
						li {
							margin:0;
							a {
								display:block;
								padding: 7px 0;
								text-align:center;
							}
						}
					}
					body.menu_open & {
						transition: .25s;
						transform: translateX(0);
					}
				}
				div.contact {
					position:absolute;
					top:0;
					left:-10px;
					right:-10px;
				}
			}
			@media screen and (max-width: $smartphone_gnav*1px) and (max-height: 640px) {
				div.webmenu{
					ul {
						padding: 10px 0;
					}
				}
			}


		}
		div#headerLogotype {
			h1 {
				img {
					width: 454px;
				}
			}
		}
	}
}

div#gnav {
	background-color:$themecolor;
	color:$themetextcolor;
	div.container {
		@include container(1052, 0);
		@include f_all(14);
		ul {
			display:flex;
			height:42px;
			align-items: center;
			li {
				margin-right: 34px;
				&:last-child {
					margin-right:0;
				}
				a {
					img {
						width: 22px;
						margin-right: 6px;
						&[alt="HOME"] {
							margin-right:0;
						}
					}
				}
			}
		}
	}
	@include maxwidth($smartphone_gnav){
		//display:none;
		position:fixed;
		top:0;
		@include fixed_top_adminbar_exists(0);
		right:0;
		bottom:0;
		left:0;
		background-color:rgba(#000, .8);
		z-index:1;
		margin:0;
		width:auto;
		transform: scale(0);
		div.container {
			transition: .25s;
			transform: translateX(-100%);
			position:absolute;
			top: 0;
			bottom: 0;
			width: 75%;
			max-width: 300px;
			height: 75%;
			ul {
				flex-direction: column;
				height:100%;
				background-color:$themecolor;
				align-items: stretch;
				//justify-content:flex-start;
				justify-content:space-between;
				overflow-y: auto;
//&::-webkit-scrollbar-thumb{background-color:$themetextcolor;}
				padding: 60px 0;
				box-sizing:border-box;
				li {
					//flex: 0 1 100%;
					margin: 0;
					//outline: 1px solid red;
					a {
						background-color:$themecolor;
						color:$themetextcolor;
						display:block;
						padding: 12px 0;
						text-align:center;
					}
				}
				li:first-child {
					a {
						padding: 8px 0;
					}
				}
			}
		}
		body.menu_open & {
			transform: scale(1);
			//display:block;
			div.container {
				transform: translateX(0px);
			}
		}
	}
	@media screen and (max-width: $smartphone_gnav*1px) and (max-height: 640px) {
		div.container {
			ul {
				padding: 20px 0;
			}
		}
	}
}

div#mainVisual {
	background-color:#222;
	div.container {
		//@include container(1366, 0);
		position: relative;
		div.slides {
			body.subpage.modern & {
				background-color: #EAE3C2;
			}
			p {
				body.subpage.modern & {
					// @include container(1440, 0);
					max-height: 270px;				
					text-align: center;
					@include maxwidth(1440){
						height: auto;
					}
				}
				img {
					body.toppage.modern & {
						width: 100%;
						min-height: 380px;
						max-height: 682px;
						height: auto;
						object-fit: cover;
						@include maxwidth(580){
							min-height: initial;
							height: auto;
						}
					}
					body.subpage.modern & {
						width: 100%;
						max-width: 1440px;
						height: auto;
						object-fit: contain;
						@include maxwidth(580){
							object-position: top;
						}
					}
				}
			}
		}
		div.overlayTitle {
			position:absolute;
			left:0;
			top:50%;
			transform: translate(0,-50%);
			// bottom:0;
			margin:auto;
			width: 468px;
			height: 270px;
			box-sizing: border-box;
			padding: 35px 30px;
			background-color: rgba($themecolor, .75);
			@include maxwidth(900) {
				width: 294px;
				height: 170px;
				padding: 24px 20px;
			}
			@include maxwidth(580){
				width: auto;
				height: auto;
				padding: 0;
				position:static;
				transform: translate(0,0);
				top:0;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				background-color: $themecolor;//追加
			}			
			span.image, a.image {
				// background-color:$themecolor;
				background-color: transparent!important;
				color:$themetextcolor;
				display:block;
				text-align:center;
				display: flex;
				justify-content:center;
				align-items: center;
				height: 100%;
				width: 100%;
				// padding: 47px 67px;
				// margin-top: -140px;
				@include maxwidth(580){
					width: auto;
					margin-top:0;
					padding:30px;
				}
				img {
					height: 100%;
					width: 100%;
					object-fit: contain;
					@include maxwidth(580){
						// width: auto !important;
						width: 100% !important;
						height: auto !important;
						max-height: 150px;
						max-width: 100%;
					}
				}
				&.honnokimochi_omuta {
					// background-color: rgba($themecolor, .75);
					// padding: 47px 0px;
					// @include maxwidth(900) { padding: 23px 0px; }
					@include maxwidth(580) { padding: 30px 0px; }
					img {
						// height: 260px;
						// @include maxwidth(900) { height: 180px; }
					}
				}
			}
			a.image:hover { opacity: .9; }
			@include maxwidth(900){
				span.image, a.image {
					// margin-top: -90px;
					// padding: 23px 34px;
					img {
						// height: 100px;
					}
				}
			}
			@include maxwidth(580){
				// position:static;
				// transform: translate(0,0);
				// top:0;
				// bottom: 0;
				// right: 0;
				// left: 0;
				// margin: auto;
				// background-color: $themecolor;//追加
				span.image, a.image {
					// margin-top:0;
					// padding:30px;
					img{
						// width: auto !important;
						// width: auto;
						// height: 100px;
						// height: auto !important;
						// max-width: 100%;
					}
				}
			}
		}
		div.overlayNews {
			position:absolute;
			bottom:0;
			left:0;
			right:0;
			background-color:rgba(#000, .2);
			color:#fff;
			@include f_all(12, "", 17);
			display:inline-flex;
			align-items: center;
			justify-content: center;
			height:57px;
			body.subpage.modern & {
				height: 2.5vw;
				max-height: 35px;
				@include maxwidth(900){
					height: 2vw;
				}
				@include maxwidth(580){
					height: 1.5vw;
				}
			}
			div.label {
				border: 1px solid currentColor;
				padding: 6px 18px;
				body.subpage.modern & {
					display: none;
				}
			}
			div.text {
				body.subpage.modern & {
					display: none;
				}
				a {
					display:inline-block;
					span.date {
						margin-left: 20px;
					}
					span.title {
						margin-left: 12px;
					}
				}
			}
			@include maxwidth(580){
				body.toppage.modern & {
					position: static;
					padding:13px 12px;
				}
				box-sizing: border-box;
				display:block;
				text-align:center;
				height:auto;				
				div.label {
					width: 80px;
					margin:0 auto 10px;
				}
				div.text {
					span {
						display:block;
					}
					a{
						span.date {margin-bottom:5px;}
						span.date, span.title {
							margin-left:0;
						}
					}
				}
			}				
		}
	}
}

div#topicPath {
	border-bottom: 1px solid #A7A7A7;
	div.container {
		@include container(1052, 20);
		@include f_all(14);
		padding: 1em 0;
		@include maxwidth(800){
			@include f_all(12);
			padding: .5em 0;
		}
		ul {
			display:flex;
			flex-wrap:wrap;
			li {
				//outline: 1px solid green;
				&:before {
					content: '　>　';
				}
					padding: .25em 0;
				&:first-child:before {display:none;}
				a {
					//outline: 1px solid red;
					display:inline-block;
				}
			}
		}
	}
}

div#toppageConcept {
	div.container {
		@include container(948, 10);
		padding: 85px 0 50px;
		div.heading {
			margin-bottom:70px;
			h2 {
				text-align:center;
				img {
					width: 553px;
				}
			}
			@include maxwidth(960){
				margin-bottom: 40px;
			}
		}
		div.body {
			display:flex;
			justify-content:space-between;
			& > div {
				margin-bottom:50px;
			}
			div.image {
				flex: 0 1 452px;
				img {
				}
			}
			div.text {
				flex: 0 1 459px;
				@include f_all(14, "", 27);
				p {
				}
			}
			@include maxwidth(960){
				display:block;
				div.image {
					text-align:center;
				}
				div.text {
					width: 459px;
					max-width: 100%;
					margin:0 auto 40px;
				}
			}
		}
		div.more {
			text-align:center;
			a {
				@include f_all(14);
				background-color:$themecolor;
				color:$themetextcolor;
				display:inline-block;
				width: 217px;
				padding: 13px 0;
				text-align:center;
				border-radius: 217px;
			}
		}
	} 
}

div.toppage_common_heading {
	@include f_all(24);
	width: 411px;
	@include maxwidth(431){
		width:auto;
		margin: 0 10px 45px;
	}
	position:relative;
	margin:auto;
	text-align:center;
	border-bottom: 1px solid $themecolor;
	padding-bottom:20px;
	margin-bottom:75px;
	&:after {
		width:142px;
		height: 5px;
		background-color:$themecolor;
		content:'';
		display:block;
		position:absolute;
		bottom:-3px;
		left:0;
		right:0;
		margin:auto;
	}
	h2 {
	}
}

div#toppageService {
	$cwidth: 1123;
	$iwidth: 321;
	$imargin: 40;
	background-color:#E9E9E9;
	color:inherit;
	padding:46px 0 80px;
	@include maxwidth(600){
		padding:0 0 80px;
	}
	div.container {
		padding-top: 70px;
		@include container($cwidth + $imargin * 2, 0);
		div.heading {
		}
		div.body {
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			div.item {
				flex: 0 1 $iwidth * 1px;
				height: $iwidth * 1px;
				margin: $imargin * 1px;
				@include maxwidth(($iwidth + $imargin * 2) * 2 - 1){
					margin-top: 0;
				}
				@include maxwidth($iwidth + $imargin * 2){
					margin: $imargin / 4 * 1px 0;
				}
				a {
					//background-image: url(../images/toppage-services-01.jpg);
					background-color:rgba(#000, .58);
					transition: .2s;
					&:hover {
						background-color:rgba(#000, 0);
						opacity:1;
						text-shadow: 0 0 10px #000;
					}
					color:#fff;
					display:block;
					height: 100%;
					padding-top:45%;
					box-sizing:border-box;
					span {
						display:block;
						margin:auto;
					}
					span.title {
						@include f_all(14);
						background-color:$themecolor;
						color:$themetextcolor;
						margin: 0 ($iwidth - 217) / 2 * 1px;
						// padding: 11px 0 13px;
						// border-radius:217px;
						padding: 11px 10px 13px;
						text-align:center;						
						margin-bottom:28px;
					}
					span.text {
						@include f_all(14, "", 21);
						margin: 0 ($iwidth - 249) / 2 * 1px;
					}
				}
//				&.item2 {background: url(../images/toppage-services-02.jpg);}
//				&.item3 {background: url(../images/toppage-services-03.jpg);}
//				&.item4 {background: url(../images/toppage-services-04.jpg);}
//				&.item5 {background: url(../images/toppage-services-05.jpg);}
//				&.item6 {background: url(../images/toppage-services-06.jpg);}
//				&.item7 {background: url(../images/toppage-services-07.jpg);}
//				&.item8 {background: url(../images/toppage-services-08.jpg);}
//				&.item9 {background: url(../images/toppage-services-09.jpg);}
			}
		}
	}
}

div.worksHeadline {
	div.container {
		@include container(1027);
		div.heading {
		}
		div.nav {
			ul {
				display:flex;
				@include f_all(12);
				margin-bottom: 10px;
				li {
					flex: 0 1 100%;
					margin: 0 13px 13px 0;
					a {
						display:block;
						padding: (29 - 10) / 2px 0;
						box-sizing:border-box;
						border: 1px solid currentColor;
						border-radius: 100px;
						text-align:center;
						&.current {
							border-color:$themecolor;
							background-color:$themecolor;
							color:$themetextcolor;
						}
					}
				}
				@include maxwidth(980){
					flex-wrap:wrap;
					li {
						flex: 0 1 19%;
						margin: 0 1% 1% 0;
					}
				}
				@include maxwidth(580){
					@include f_all(11);
					flex-wrap:wrap;
					li {
						flex: 0 1 32.3%;
						margin: 0 1% 1% 0;
					}
				}
			}
		}
		div.body {
			div.message {
				margin-top:40px;
				border: 1px solid #ccc;
				padding:40px 0;
			}
			ul {
				display:flex;
				flex-wrap:wrap;
				//justify-content:space-between;
				li {
					flex: 0 1 25%;
					@include maxwidth(500){
						flex: 0 1 50%;
					}
					position:relative;
					a {
						display:block;
						&:after {
							content:'';
							background-color:rgba(#000, .3);
							position:absolute;
							top:0;right:0;bottom:0;left:0;
							border: 1px solid white;
							border-width: 0 1px 1px 0;
							box-sizing:border-box;
							pointer-events: none;
							transition: .25s;
						}
						span.title {
							@include absolute_centering;
							@include flex_centering;
							@include fw_b;
							@include f_all(14, "", 18);
							@include maxwidth(640){
								@include f_all(11, "", 15);
							}
							opacity:0;
							transition: .5s;
							span.l {
								display:inline-block;
								background-color:rgba(255,255,255,.5);
								padding: .5em .75em;
							}
						}
						&:hover {opacity:1;}
						&:hover:after {opacity:0;}
						&:hover span.title {opacity:1;}
						img {
						}
					}
				}
			}
		}
		div.pager {
			margin-top: 40px;
		}
		div.past {
			margin-top: 60px;
/*
			text-align:center;
			@include f_all(13);
			a {
					text-decoration:underline;
			}
*/
			text-align:center;
			a {
				@include f_all(14);
				background-color:$themecolor;
				color:$themetextcolor;
				display:inline-block;
				//width: 217px;
				padding: 13px 0;
				text-align:center;
				border-radius: 217px;

				min-width: 217px;
				padding: 13px 1.25em;
				box-sizing:border-box;

			}
		}
	}
}


div#toppageWorks {
	padding:116px 0 80px;
	@include maxwidth(600){
		padding:70px 0 80px;
	}
	div.container {
		div.heading {
		}
		div.nav {
		}
		div.body {
		}
	}
}

div#archiveWorks {
	padding:58px 0 0;
	@include maxwidth(600){
		padding:35px 0 40px;
	}
	div.container {
		div.heading {
		}
		div.nav {
		}
		div.body {
		}
	}
}


div#toppageLamp {
	background-color:$themecolor;
	color:$themetextcolor;
	div.container {
		@include container(1014, 10);
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		padding:77px 0 55px;
		@include maxwidth(1000){
			display:block;
			text-align:center;
			div.image {
				margin-bottom:40px;
			}
		}
		div.image {
			flex: 0 1 419px;
			img {
			}
		}
		div.doc {
			flex: 0 1 543px;
			div.heading {
				margin-bottom:30px;
				img {
					width:221px;
				}
			}
			div.text {
				@include f_all(16, "", 30);
				@include maxwidth(500){
					@include f_all(13);
				}
				max-width: 543px;
				margin:auto;
			}
		}
		div.more {
			margin-top: 57px;
			flex: 1 0 100%;
			a {
				@include f_all(14);
				margin: auto;
				width: 217px;
				padding:13px 0;
				display:block;
				border-radius: 217px;
				background-color:$basecolor;
				color:$basetextcolor;
				text-align:center;
			}
		}
	}
}

div#content div.default.page-services_child{
	h2{
		@include maxwidth(450){
			@include f_all(18);
		}
	}
}
div.default.page-services_child {
	ul{
		border:1px solid #aaa;
		padding:1.6em 1.5em 1.5em;
		background-color: #fafafa;
		box-sizing:border-box;
		columns:3;
		@include maxwidth(900){
			columns:2;
		}
		@include maxwidth(450){
			columns:1;
		}
	}
	p{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		@include maxwidth(780){
			justify-content: center;
		}
		img{
			flex: 0 1 48%;
			margin: 0 0.5% 20px;
		}
	}
}

div#contentFooter {
	div.container {
		@include container(1028, 35);
		padding: 103px 0 89px;
		@include maxwidth(450){
			padding: 50px 0;
		}
		div.banner {
			ul {
				li {
					margin-bottom:35px;
					a {
						display:block;
						border: 1px solid $themecolor;
						background: url(../images/icon-arrow-right-color.png) right 40px center / 12px 11px no-repeat $themetextcolor;
						color:$themecolor;
						position:relative;
						padding: 35px 51px 32px 71px;
						&:before {
							content:'';
							display:block;
							position:absolute;
							top:35px;
							bottom: 37px;
							left:51px;
							width: 5px;
							background-color:currentColor;
						}
						span {
							display:block;
						}
						span.ja {
							@include f_all(18);
							margin-bottom:5px;
						}
						span.en {
							@include f_all(35);
							font-family: "YuGOthic", "Yu Gothic", sans-serif;
							font-weight: 300;
						}
						@include maxwidth(450){
							padding: 20px 20px;
							background-position: right 20px center;
							span.ja {
								@include f_all(13);
							}
							span.en {
								@include f_all(25);
							}
							&:before {display:none;}
						}
					}
					&:last-child {
						a {
							background: url(../images/icon-arrow-right-white.png) right 40px center / 12px 11px no-repeat $themecolor;
							color:$themetextcolor;
						}
					}
				}
			}
		}
	}
}

#content {
	padding: 55px 0 120px;
	div.container {
	}
	div.default {
		@include contentdefault;
		margin-bottom: 40px;
	}
}

div#totop {
	a {
		background-color:$themecolor;
		width: 145px;
		padding: (42 - 11) / 2 * 1px 0;
		display:block;
		margin:auto;
		text-align:center;
		img {
			width: 12px;
		}
	}
}

div#footer {
	background-color:$themecolor;
	color:$themetextcolor;
	div.container {
		@include container(1037, 20);
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		padding:68px 0;
		div#footerAddress {
			flex: 0 1 302px;
			@include f_all(14, "", 27);
			div.excerpt {
			}
			div.logomark {
				margin-bottom:30px;
				img {
				}
			}
			div.address {
				margin-bottom: 10px;
			}
			div.banner {
				margin-bottom:20px;
				img {
					width: 67px;
				}
			}
			div.business {
				h3 {
					padding-bottom:5px;
					margin-bottom: 8px;
					border-bottom: 1px solid currentColor;
				}
				ul {
					li {
					}
				}
			}
		}

		div#footerMenu {
			flex: 0 1 297px;
			ul {
				border: 1px solid currentColor;
				border-width: 1px 0 0;
				padding: 18px 0 12px;
				&:last-child {
					border-width: 1px 0;;
				}
				li {
					@include f_all(14, "", 20);
					margin-bottom: 7px;
					padding-left: 55px;
					&:before {
						content:'-';
						margin-right:1em;
					}
					a {
					}
				}
			}
		}

		div#footerMap {
			flex: 0 1 340px;
			iframe {
				width: 340px;
				max-width: 100%;
				height:293px;
			}
		}
		@include maxwidth(1030){
			margin: 0 40px;
			div#footerAddress {
				flex-basis: 45%;
				margin-bottom: 30px;
			}
			div#footerMenu {
				flex-basis: 45%;
				margin-bottom: 30px;
			}
			div#footerMap {
				flex-basis: 100%;
			}
		}
		@include maxwidth(600){
			display: block;
			div#footerAddress {
				margin-bottom: 50px;
			}
			div#footerMenu {
				margin-bottom: 50px;
				ul {
					border: none;
					padding:0;
					&:after {
						content:"\2756";//'❖';
						//width: 5px;
						//height: 5px;
						//border-radius: 5px;
						display:block;
						//background-color:$themetextcolor;
						margin: 20px auto;
						text-align:center;
						@include f_all(20, "", 20);
						color: mix($themetextcolor, $themecolor, .5);
					}
					&:last-child:after {display:none;}
					li {
						padding: 0;
						&:before {display:none;}
						a {
							display:block;
							padding: 7px;
							background-color: mix($themetextcolor, $themecolor, .1);
							border-radius: 3px;
							text-align:center;
						}
					}
				}
			}
			div#footerMap {
				iframe {
					width:100%;
				}
			}
		}
	}
}

div#bottomBar {
	background-color:$themecolor;
	color:$themetextcolor;
	div.container {
		@include container(1037, 20);
		text-align:right;
		@include f_all(12);
		padding-bottom:33px;
	}
}

div#gnavToggle {
	display:none;
	width: 40px;
	height:40px;
	position:fixed;
	z-index: 10;
	top: 5px;
	@include fixed_top_adminbar_exists(5);
	right:10px;
	@include maxwidth($smartphone_gnav){
		display:block;
		body.menu_open & {
		}
	}
	a {
		display:block;
		width:100%;
		height:100%;
		background-color:rgba($themecolor, .9);
		position:relative;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		&:hover {opacity: 1;}
		span.b {
			content:'';
			display:block;
			width:70%;
			height: 2px;
			background-color:$themetextcolor;
			position:absolute;
			top:0;right:0;bottom:0;left:0;
			margin:auto;
			//transition: .5s;
			&.b1 {transition: .25s;transform: translateY(-8px);}
			&.b2 {transition: .35s;}
			&.b3 {transition: .45s;transform: translateY(8px);}
		}
		body.menu_open & {
			background-color:$accenttextcolor;
			span {
				background-color:$accentcolor;
				&.b1 {transform: rotateZ(45deg);}
				&.b2 {transform: rotateZ(135deg); filter: opacity(0);}
				&.b3 {transform: rotateZ(135deg);}
			}
		}
	}
}



div#archiveHeadline {
	margin-bottom:120px;
	div.container {
		@include container(700, 20);
		div.body {
			ul {
				margin-bottom: 40px;
				li {
					border-bottom: 1px solid #ccc;;
					a {
						display:flex;
						@include f_all(14, "", 20);
						span {
							padding: 1.5em 0;
							&.date {
								flex: 0 0 120px;
							}
							&.title {
							}
						}
						@include maxwidth(640){
							display:block;
							padding: 1.2em 0;
							span {
								display:block;
								padding:0;
								&.date {
									margin-bottom: 3px;;
								}
							}
						}
					}
				}
			}
		}
	}
}

div.pager {
	text-align: center;
	font-size: .875em;
	@media screen and (max-width: 540px) {
		font-size: .6875em;
	}
	a, span {
		display: inline-block;
		margin: 0 0.25em 0.75em;
		min-width: 3em;
		padding: 1em 1em;
		box-sizing: border-box;
		background-color: #ddd;
		&.current {
			background-color: #131d48;
			color: #fff;
		}
	}
}