/* 
 *　小谷村移住なび
 */
html {
	background-color: #B8D5C1;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 62.5%;
}
body {
	background-image: url(../img/common/background.jpg);
	background-position: center top;
	background-size: 100% auto;
}

/* nav */
header {
	position: relative;
	z-index: 2;
}
nav {
	z-index: 1;
}
body:not(.experience) nav:not(.top) {
	margin-top: -58px;
}
nav ul,
nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav a {
	color: #5F6439;
	font-size: 0;
}
nav a span {
	display: none;
}
nav ul#top_menu {
	font-size: 0;
	height: 156px;
	margin: 0 auto;
	position: relative;
	width: 1346px;
	z-index: 1;
}
body:not(.top) nav ul#top_menu {
	width: 1346px;
}
li.home {
	display: inline-block;
	height: 156px;
}
li.home a {
	display: block;
}
li.with_sub {
	display: inline-block;
	height: 156px;
	position: relative;
}
li.with_sub a {
	cursor: pointer;
	position: absolute;
	z-index: 10;
}
body:not(.top) li.with_sub a.active.down {
	top: 70px;
}
li.with_sub ol {
	height: 100%;
	transform: scale(0);
	transform-origin: center;
	transition: all 0.4s ease-out;
	width: 100%;
}
li.with_sub ol.active {
	transform: scale(1);
}
body:not(.top) li.with_sub ol.active.down {
	margin-top: 70px;
}
li.with_sub ol li {
	height: 275px;
	position: absolute;
	top: -198px;
	transform-origin: center bottom;
	width: 184px;
}
li.with_sub ol li a {
	top: 0;
}

li.with_sub ol li.otari {
	transform: rotate(5deg);
}
li.with_sub ol li.otari a {
	transform: rotate(-5deg);
}
li.with_sub ol li.voice {
	transform: rotate(-49deg);
}
li.with_sub ol li.voice a {
	transform: rotate(49deg);
}
li.with_sub ol li.column {
	transform: rotate(-100deg);
}
li.with_sub ol li.column a {
	transform: rotate(100deg);
}
li.with_sub ol li.child_rearing {
	transform: rotate(-160deg);
}
li.with_sub ol li.child_rearing a {
	transform: rotate(160deg);
}
li.with_sub ol li.qa {
	transform: rotate(140deg);
}
li.with_sub ol li.qa a {
	transform: rotate(-140deg);
}
li.with_sub ol li.event {
	transform: rotate(-135deg);
}
li.with_sub ol li.event a {
	transform: rotate(135deg);
}
li.with_sub ol li.trial {
	transform: rotate(170deg);
}
li.with_sub ol li.trial a {
	transform: rotate(-170deg);
}
li.with_sub ol li.recruiting {
	transform: rotate(30deg);
}
li.with_sub ol li.recruiting a {
	transform: rotate(-30deg);
}
li.with_sub ol li.property {
	transform: rotate(-30deg);
}
li.with_sub ol li.property a {
	transform: rotate(30deg);
}
li.with_sub ol li.guide {
	transform: rotate(-140deg);
}
li.with_sub ol li.guide a {
	transform: rotate(140deg);
}
li.with_sub ol li.support {
	transform: rotate(135deg);
}
li.with_sub ol li.support a {
	transform: rotate(-135deg);
}
li.news {
	display: inline-block;
	height: 151px;
	position: relative;
	vertical-align: top;
	width: 230px;
	z-index: 0;
}
li.adviser {
	display: inline-block;
	height: 160px;
	position: relative;
	vertical-align: top;
	width: 230px;
}
li.pop,
li.experience,
li.step {
	display: inline-block;
	height: 151px;
	position: relative;
	vertical-align: top;
	width: 230px;
}
li.adviser a,
li.news a,
li.pop a,
li.experience a,
li.step a {
	cursor: pointer;
	position: absolute;
	z-index: 10;
}
li.pop img.pop_item {
	left: -14px;
	position: absolute;
	top: -248px;
	transform: scale(0);
	transition: all 0.4s ease-out;
	z-index: 11;
}
li.pop img.pop_item.sub {
	left: -145px;
	top: 119px;
	transform-origin: right top;
}
li.pop img.pop_item.active {
	transform: scale(1);
}
li.adviser a::after,
li.news a::after,
li.home a::after,
li.with_sub a::after,
li.pop a::after,
li.experience a::after,
li.step a::after {
	content: url(../img/common/icon_arrow.png);
	display: inline-block;
	margin-top: 70px;
	vertical-align: top;
}
li.with_sub:last-child a:after,
li.with_sub ol li a:after {
	display: none;
}
li.with_sub.know {
	width: 223px;
}
li.talk,
li.step {
	height: 151px;
	width: 231px;
}
li.with_sub.experience {
	width: 232px;
}
li.with_sub.decide {
	width: 240px;
}
li.with_sub.immigration {
	width: 191px;
}
a.main_menu img {
	opacity: 0;
}
a.main_menu img:hover,
body.adviser li.adviser a.main_menu img,
body.know li.know a.main_menu img,
body.experience li.experience a.main_menu img,
body.decide li.decide a.main_menu img,
body.immigration li.immigration a.main_menu img,
body.step li.step a img {
	opacity: 1;
}
ol li a img:hover {
	transform: scale(1.1);
}
#btn_menu {
	display: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8rem;
	font-weight: normal;
	list-style: none;
	padding: 0 17px 0 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
}
#btn_menu li {
	padding: 0.5em 1em;
}
#btn_open {
	background-color: #FFFEDF;
	color: #5F6439;
	cursor: pointer;
}
#btn_open span {
	background-color: #5F6439;
	display: inline-block;
	height: 4px;
	margin-left: 8px;
	position: relative;
	vertical-align: bottom;
	width: 24px;
}
#btn_open span:before {
	background-color: inherit;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: -9px;
	width: 100%;
}
#btn_open span:after {
	background-color: inherit;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: -18px;
	width: 100%;
}
#btn_open:hover {
	background-color: #4B2B2B;
	color: #FFFEDF;
}
#btn_open span:hover {
	background-color: #FFFEDF;
}
#btn_close {
	background-color: #FFFEDF;
	color: #5F6439;
	cursor: pointer;
	display: none;
}
#btn_close span {
	background-color: #5F6439;
	display: inline-block;
	height: 24px;
	margin-left: 14px;
	position: relative;
	transform: rotate(-45deg);
	vertical-align: bottom;
	width: 4px;
}
#btn_close span:before {
	background-color: inherit;
	content: "";
	height: 100%;
	left: calc(50% - 2px);
	position: absolute;
	transform: rotate(90deg);
	width: 4px;
}
#btn_close:hover {
	background-color: #4B2B2B;
	color: #FFFEDF;
}
#btn_close span:hover {
	background-color: #FFFEDF;
}

/* sns */
div#sns .container {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 104px);
	margin: auto;
	align-items: center;
	max-width: 760px;
}

div#sns .container .flex-item:first-child{
	width: 400px;
}

div#sns .container .flex-item:first-child img{
	width: 80%;
}

div#sns .container .flex-item {
	width: 170px;
}

div#sns .container .flex-item img {
	width: 60%;
}
div#sns .container .flex-item p {
	color: black;
	margin: 0;
	font-size: 2.2rem;
	font-weight: bold;
}



/* notice */
div#notice {
	background-color: white;
	border: 2px solid #F74040;
	border-radius: 12px;
	box-shadow: 3px 3px 6px #F74040;
	margin: 32px auto;
	max-width: 760px;
	padding: 24px;
	width: calc(100% - 104px);
}
div#notice dl dt {
	font-size: 1.8rem;
	color: red;
	margin: 0 0 1em;
	text-align: center;
}
div#notice dl dt span {
	color: inherit;
	display: block;
}
div#notice dl dd {
	color: black;
	font-size: 1.5rem;
	margin: 0;
}
div#notice dl dd ul {
	color: black;
	font-weight: bold;
	line-height: 2;
	list-style-position: inside;
	list-style-type: circle;
	margin-top: 0.5em;
	padding: 0 0 0 1em;
}
div#notice dl dd ul li {
	color: inherit;
}

/* media queries */
@media (max-width: 1400px) {
	nav ul#top_menu {
		width: 1100px;
	}
	body:not(.top) nav ul#top_menu {
		width: 1000px;
	}
	body:not(.top) li.with_sub a.active.down {
		top: 0px;
	}
	body:not(.top) li.with_sub ol.active.down {
		margin-top: 0px;
	}
	li.adviser a:after,
	li.news a:after,
	li.home a:after,
	li.with_sub a:after,
	li.pop a:after,
	li.experience a:after,
	li.step a:after {
		margin-top: 49px;
	}
	li.with_sub {
		vertical-align: top;
	}
	li.with_sub ol li {
		height: 188px;
		top: -134px;
		width: 129px;
	}
	li.with_sub ol li a img {
		height: auto;
		width: 90%;
	}
	li.home a {
		background-size: 134px 106px !important;
	}
	li.home a img {
		height: 106px;
		width: 134px;
	}
	li.know {
		height: 113px;
		width: 167px !important;
	}
	li.know a {
		background-size: 130px 113px !important;
	}
	li.know a img {
		height: 113px;
		width: 130px;
	}
	li.adviser {
		height: 110px;
		width: 178px;
	}
	li.adviser a {
		background-size: 140px 110px !important;
	}
	li.adviser a img {
		height: 110px;
		width: 140px;
	}
	li.talk,
	li.step {
		height: 106px;
		width: 172px !important;
	}
	li.talk a,
	li.step a {
		background-size: 135px 106px !important;
	}
	li.talk a img,
	li.step a img {
		height: 106px;
		width: 135px;
	}
	li.experience {
		height: 111px;
		width: 171px !important;
	}
	li.experience a {
		background-size: 134px 111px !important;
	}
	li.experience a img {
		height: 111px;
		width: 134px;
	}
	li.decide {
		height: 104px;
		width: 179px !important;
	}
	li.decide a {
		background-size: 142px 104px !important;
	}
	li.decide a img {
		height: 104px;
		width: 142px;
	}
	li.immigration {
		height: 106px;
		width: 134px !important;
	}
	li.immigration a {
		background-size: 134px 106px !important;
	}
	li.immigration a img {
		height: 106px;
		width: 134px;
	}
	li.news {
		height: 113px;
		width: 182px;
	}
	li.news a {
		background-size: 144px 113px !important;
	}
	li.news a img {
		height: 113px;
		width: 144px;
	}
}
@media (max-width: 1200px) {
	body:not(.top) nav ul#top_menu {
		width: inherit;
	}
	nav {
		background-color: #FFFEDF;
		box-shadow: 0 0 2px 2px rgba(178,178,178,0.68) inset;
		display: block;
		font-size: 4rem;
		margin-top: 0 !important;
		padding: 0.5em;
		position: absolute;
		right: 0;
		top: 72px;
		width: 6em;
	}
	nav a {
		background-image: none !important;
		font-size: 4rem;
		position: static;
	}
	nav a img {
		display: none;
	}
	nav ul#top_menu {
		height: inherit;
		position: static;
		width: inherit;
	}
	nav ol a {
		font-size: 3.5rem !important;
	}
	li.home {
		height: inherit;
		width: 100%;
	}
	li.home a {
		width: 100%;
	}
	li.with_sub {
		height: inherit;
		position: static;
		transform: scale(1);
		width: 100% !important
	}
	li.with_sub a {
		display: block;
		position: static;
		width: 100%;
	}
	li.with_sub ol {
		display: none;
		margin-top: 0 !important;
		transform: scaleY(0);
	}
	li.with_sub ol.active {
		display: block;
		transform: scaleY(1);
	}
	li.with_sub ol li {
		display: block;
		height: inherit;
		position: static;
		text-align: right;
		transform: rotate(0deg) !important;
		width: 100%;
	}
	li.with_sub ol li a {
		transform: rotate(0deg) !important;
	}
	li.adviser,
	li.news,
	li.pop,
	li.experience,
	li.step {
		height: inherit;
		width: 100% !important;
	}
	li.adviser a,
	li.news a,
	li.pop a,
	li.experience a,
	li.step a {
		display: block;
		position: relative;
		width: 100%;
	}
	li.pop img.pop_item.sub {
		left: inherit;
		right: 20px;
		top: 20px;
	}
	li.adviser a::after,
	li.home a::after,
	li.news a::after,
	li.with_sub a::after,
	li.pop a::after,
	li.experience a::after,
	li.step a::after {
		display: none;
	}
	nav a:hover,
	body.know li.know a.main_menu,
	body.experience li.experience a.main_menu,
	body.decide li.decide a.main_menu,
	body.immigration li.immigration a.main_menu {
		background-color: #4B2B2B !important;
		color: #FFFEDF !important;
	}
	nav a span {
		color: inherit;
		display: inline-block;
	}
	#btn_menu {
		display: block;
	}
}
@media (max-width: 420px) {
	body {
		background-image: none;
	}
	body:not(.top) #btn_menu {
		left: 20px;
		right: inherit;
		top: 95px;
	}
	body:not(.top) nav {
		top: 165px;
	}
}

/* up & down */
div#updown a {
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	display: none;
	position: fixed;
	right: 70px;
	width: 107px;
	z-index: 3;
}
div#updown a img {
	display: block;
	height: auto;
	width: 100%;
}
a#up_button {
	top: 70px;
}
a#down_button {
	bottom: 70px;
}

/* h1 */
h1 {
	overflow: hidden;
}

/* footer */
footer {
	background-image: url(../img/common/background_footer.png);
	background-position: left bottom;
	background-repeat: repeat-x;
	height: 295px;
	overflow: hidden;
	width: 100%;
}
#footer_inner {
	height: 97px;
	margin: 198px auto 0;
	max-width: 1130px;
	position: relative;
	width: 90%;
}
#toiawase {
	float: left;
	margin-top: 17px;
}
#address1 {
	float: left;
	margin-left: 27px;
	margin-top: 17px;
}
#address2 {
	display: none;
	float: left;
	margin-left: 27px;
	margin-top: 17px;
}
#copyright {
	bottom: 10px;
	position: absolute;
	right: 0;
}

@media (max-width: 980px) {
	div#updown a {
		right: 20px;
		width: 54px;
	}
	a#up_button {
		top: 20px;
	}
	a#down_button {
		bottom: 20px;
	}
}
@media (max-width: 700px) {
	#footer_inner {
		height: 165px;
		margin-top: 131px;
	}
	#address1 {
		display: none;
	}
	#address2 {
		display: block;
	}
	div#notice dl {
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
	}
	div#notice dl dt {
		font-size: 2rem;
	}
}
@media (max-width: 460px) {
	#footer_inner {
		height: 204px; /*151px;*/
		margin-top: 91px; /*144px;*/
	}
	div#notice dl dd {
		font-size: 1.2rem;
	}
}
@media (max-width: 310px) {
	#footer_inner {
		height: 175px;
		margin-top: 122px;
	}
}

/* font */
@font-face {
	font-family: 'あんず';
	src: url(../font/APJapanesefont.ttf) format('truetype'),
		 url(../font/APJapanesefont.woff) format('woff');
}
@font-face {
	font-family: 'あんず';
	src: url(../font/APJapanesefont.eot);
}
.anzu {
	font-family: 'あんず';
}