@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&display=swap');


/* basic
------------------------------------------------------------------------- */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size:16px;
	color:#404040;
}
	@media(max-width:980px) {
		body {
			-webkit-text-size-adjust:none;
		}
	}

	@media(max-width:767px) {
		body {
			font-size:14px;
		}
	}

.cf:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.cf {
  min-height: 1px;
}

* html .cf {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* link default */
a:link		{ color:#222222; text-decoration:none; }
a:visited	{ color:#222222; text-decoration:none; }
a:hover		{ color:#777777; text-decoration:none; }
a:active	{ color:#777777; text-decoration:none; }

::selection {
    background:#FFFF00; /* Safari */
}
::-moz-selection {
    background:#FFFF00; /* Firefox */
}

	@media(min-width:767px) {
		a[href^="tel:"] {
			pointer-events:none;
		}
	}

	@media(max-width:767px) {
		.pcOnly {
			display:none;
		}
	}



/* common
---------------------------------------------- */

.wrap {
	width:calc(100% - 30px);
	padding:0 15px;
	margin:0 auto;
}

/* header
------------------------------------------------------------------------- */
#r_gHeader {
	width:100%;
	position:fixed;
	z-index:99;
}
	@media(max-width:767px) {
		#r_gHeader {
			height:60px;
		}
	}

#r_gHeader > h1, #r_gHeader > a {
	float:left;
	width:863px;
	margin:17px 0 0 25px;
}
	@media(max-width:1919px) {
		#r_gHeader > h1, #r_gHeader > a {
			width:648px;
			margin:15px 0 0 20px;
		}
	}
	@media(max-width:1439px) {
		#r_gHeader > h1, #r_gHeader > a {
			width:558px;
			margin:12px 0 0 15px;
		}
	}
	@media(max-width:1239px) {
		#r_gHeader > h1, #r_gHeader > a {
			width:432px;
			margin:16px 0 0 15px;
		}
	}
	@media(max-width:959px) {
		#r_gHeader > h1, #r_gHeader > a {
			width:345px;
			margin:12px 0 0 15px;
		}
	}
	@media(max-width:767px) {
		#r_gHeader > h1, #r_gHeader > a {
			width:310px;
			margin:18px 0 0 10px;
		}
	}
	@media(max-width:389px) {
		#r_gHeader > h1, #r_gHeader > a {
			width:260px;
			margin:20px 0 0 8px;
		}
	}

#r_gHeader > h1 > img, #r_gHeader > a > img {
	width:100%;
}

#r_gHeader > #r_menu {
}
	@media(max-width:767px) {
		#r_menu {
			display:none;
			position:fixed;
			width:100%;
			overflow-y:auto;
			overflow-x:hidden;
			background-color:rgba(255,255,255,1);
			z-index:100;
			top:0;
			left:0;
			bottom:0;
			text-align:center;
		}
	}

#r_gHeader > #r_menu > ul {
	text-align:right;
}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul {
			font-size:20px;
			margin:0 10%;
			width:80%;
			position:absolute;
			top:50%;
			transform: translateY(-50%);
			text-align:center;
		}
	}

#r_gHeader > #r_menu > ul > li {
	display:inline-block;
}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul > li {
			display:block;
		}
	}

#r_gHeader > #r_menu > ul > li#facility {
	position:relative;
}
#r_gHeader > #r_menu > ul > li#facility > ul {
	z-index:99;
	display:none;
	position:absolute;
	border-top:4px solid #681E1A;
	background-color:rgba(104,30,26,0.8);
	width:6em;
	text-align:center;
	margin-left:-1em;
}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul > li#facility > ul {
			display:block;
			position:static;
			background-color:transparent;
			margin-left:0;
			border-top:0;
			width:auto;
			margin-top:-1em;
			margin-bottom:1em;
		}
		#r_gHeader > #r_menu > ul > li#facility > ul > li {
			display:inline-block;
			margin:0 1em;
		}
	}
#r_gHeader > #r_menu > ul > li#facility > ul a {
	color:#FFF;
	display:block;
	line-height:2.5em;
}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul > li#facility > ul a {
			color:#707070;
		}
	}

#r_gHeader > #r_menu > ul > li#facility > ul a:hover {
	opacity:0.8;
}

#r_gHeader > #r_menu > ul > li > a, #facility {
	display:block;
	line-height:3.0em;
	font-size:20px;
	padding:0 1.2em;
	color:#707070;
}
	@media(max-width:1919px) {
		#r_gHeader > #r_menu > ul > li > a, #facility {
			font-size:calc(20px * 0.8);
		}
	}
	@media(max-width:1439px) {
		#r_gHeader > #r_menu > ul > li > a, #facility {
			font-size:calc(20px * 0.65);
			padding:0 1em;
		}
	}
	@media(max-width:1239px) {
		#r_gHeader > #r_menu > ul > li > a, #facility {
			padding:0 0.6em;
		}
	}
	@media(max-width:959px) {
		#r_gHeader > #r_menu > ul > li > a, #facility {
			font-size:calc(20px * 0.5);
		}
	}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul > li > a, #facility {
			font-size:20px;
		}
	}
	@media(max-width:479px) {
		#r_gHeader > #r_menu > ul > li > a, #facility {
			font-size:18px;
		}
	}

#r_gHeader > #r_menu > ul > li a.enviroment:hover {
	border-bottom:4px solid #A07BD4;
}
#r_gHeader > #r_menu > ul > li a.description:hover {
	border-bottom:4px solid #84C8E8;
}
#r_gHeader > #r_menu > ul > li a.voice:hover {
	border-bottom:4px solid #3C77DC;
}
#r_gHeader > #r_menu > ul > li a.company:hover {
	border-bottom:4px solid #9CD717;
}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul > li a:hover {
			border-bottom:0 !important;
		}
	}

#r_gHeader > #r_menu > ul > li > a.job {
	line-height:3.4em;
	background-color:#F2875B;
	color:#FFF;
	font-size:30px;
}
	@media(max-width:1919px) {
		#r_gHeader > #r_menu > ul > li > a.job {
			font-size:calc(30px * 0.8);
		}
	}
	@media(max-width:1439px) {
		#r_gHeader > #r_menu > ul > li > a.job {
			font-size:calc(30px * 0.65);
			line-height:3.4em;
		}
	}
	@media(max-width:959px) {
		#r_gHeader > #r_menu > ul > li > a.job {
			font-size:calc(30px * 0.5);
		}
	}
	@media(max-width:767px) {
		#r_gHeader > #r_menu > ul > li > a.job {
			font-size:20px;
		}
	}
	@media(max-width:479px) {
		#r_gHeader > #r_menu > ul > li > a.job {
			font-size:18px;
		}
	}

#r_gHeader > #r_menu > ul > li > a.job:hover {
	background-color:#D94407;
}

#menuTrigger {
	display:none;
}
	@media(max-width:767px) {
		#menuTrigger {
			display:block;
			position:fixed;
			z-index:101;
			top:10px;
			right:10px;
			width:40px;
			height:40px;
			background:url(https://notowarakunosato.com/wp-content/themes/notowarakunosato/shared/images/menu_trigger.png) top center no-repeat;
			background-size:40px 80px;
			cursor:pointer;
		}
	}

	#menuTrigger.on {
			background-position:bottom center;
	}



/* banner
------------------------------------------------------------------------- */
#banner > a.inquiry {
	position:fixed;
	top:120px;
	right:2%;
	z-index:9;
}
	@media(max-width:1439px) {
		#banner > a.inquiry {
			top:90px;
		}
	}
	@media(max-width:959px) {
		#banner > a.inquiry {
			top:70px;
		}
	}
	@media(max-width:767px) {
		#banner > a.inquiry {
		}
	}

#banner > a.inquiry > img {
	width:204px;
}
	@media(max-width:1919px) {
		#banner > a.inquiry > img {
			width:calc(204px * 0.8);
		}
	}
	@media(max-width:1439px) {
		#banner > a.inquiry > img {
			width:calc(204px * 0.65);
		}
	}
	@media(max-width:959px) {
		#banner > a.inquiry > img {
			width:calc(204px * 0.5);
		}
	}

#banner > a.miyamoto {
	position:fixed;
	bottom:30px;
	right:0px;
	z-index:9;
}
	@media(max-width:767px) {
		#banner > a.miyamoto {
		}
	}

#banner > a.miyamoto > img {
	width:260px;
}
	@media(max-width:1919px) {
		#banner > a.miyamoto > img {
			width:calc(260px * 0.8);
		}
	}
	@media(max-width:1439px) {
		#banner > a.miyamoto > img {
			width:calc(260px * 0.65);
		}
	}
	@media(max-width:959px) {
		#banner > a.miyamoto > img {
			width:calc(260px * 0.5);
		}
	}



/* footer
---------------------------------------------- */
#r_gFooter {
	background-color:#FFF;
	padding:25px 0 15px 0;
	text-align:center;
	line-height:1.3;
}
#r_gFooter > figure {
	margin-bottom:10px;
}
#r_gFooter > figure > img {
	width:238px;
}
#r_gFooter > span {
	font-size:30px;
	display:block;
	margin-bottom:12px;
}
	@media(max-width:767px) {
		#r_gFooter > span {
			font-size:22px
		}
	}

#r_gFooter > strong {
	margin-bottom:8px;
	display:inline-block;
	font-size:20px;
}
	@media(max-width:767px) {
		#r_gFooter > strong {
			font-size:16px;
		}
	}

#r_gFooter > p {
	margin-bottom:20px;
}
#r_gFooter > address {
	display:block;
	text-align:center;
	font-size:13px;
	font-style:normal;
}
	@media(max-width:767px) {
		#r_gFooter > address {
			font-size:12px;
		}
	}



/* under
---------------------------------------------- */
#title {
	background:url(../images/bg.jpg) center top;
	background-size:100% auto;
}
	@media(max-width:959px) {
		#title {
			background-size:200% auto;
		}
	}

}