@charset "utf-8";
/*******************************************/
/*       HOME CSS						   */
/*******************************************/

/*高さ調整*/
html,body,div.container {
	height: 100% ! important;
}

/*スライダー*/
div.slider-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	z-index: 0;
}
#myslider {
    position: relative;
    width: 100%;
    height: 100%;
}
#myslider [class^="slide"] {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
#myslider .slide1 {
	background-position: 45% 20%;
}
#myslider .slide2 {
	background-position: 40% 20%;
}
#myslider .slide3 {
	background-position: 40% 20%;
}
#myslider .slide4 {
	background-position: 0 25%;
}
#myslider .slide5 {
	background-position: 38% 20%;
}
#myslider .slide7 {
	background-position: 10% 50%;
}
#myslider .slide8 {
	background-position: 40% 30%;
}
#myslider .slide9 {
	background-position: 48% 30%;
}
#myslider .slide10 {
	background-position: 48% 30%;
}
#myslider .slide11 {
	background-position: 5% 30%;
}
#myslider .slide12 {
	background-position: 58% 100%;
}
#myslider .slide13 {
	background-position: 50% 30%;
}
#myslider .slide14 {
	background-position: 50% 10%;
}
#myslider .slide15 {
	background-position: 50% 48%;
}
#myslider .slide16 {
	background-position: 57% 45%;
}
#myslider .slide18 {
	background-position: 57% 45%;
}
#myslider .slide19 {
	background-position: 50% 65%;
}
#myslider .slide20 {
	background-position: 50% 25%;
}
#myslider .slide21 {
	background-position: 50% 30%;
}
#myslider .slide22 {
	background-position: 80% 20%;
}
#myslider .slide23 {
	background-position: 82% 60%;
}
div.slider-outer .mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/mask.png);
	background-repeat: repeat;
	z-index: 1;
}

/*フッターを非表示に*/
footer {
	display: none;
	margin: 0;
	padding: 0;
	bottom: 0;
}
/*HOME用コピーライト表示*/
p.home-copyright {
	position: relative;
	margin: 0 auto;
	padding: 0;
	color: #000;
}

/*SNSリンク*/
div.sns-links-home {
	position: absolute;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
div.sns-links-home a {
	width: 36px;
	height: 36px;
	margin: 0 3px;
}
div.sns-links-home a img {
	width: 100%;
}
div.sns-links-home a.tiktok {
	background-color: rgba(0 , 0 , 0 , 1);
	border-radius: 2px;
}
p.golgi-link-home {
	position: absolute;
}
p.golgi-link-home a {
	display: block;
	color: #000;
	line-height: 180%;
	font-size: 15px;
	font-weight: bold;
	font-family: "Zen Antique", serif;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
}
p.golgi-link-home a img {
	border-radius: 5px;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .75));
}
p.golgi-link-home a:link img,
p.golgi-link-home a:active img {
	opacity: 1;
}
p.golgi-link-home a:hover img {
	opacity: .95;
	filter: drop-shadow(2px 2px 2px rgba(175, 148, 69, .75));
}


@media (min-width: 1025px) {		/* PC */

	html,body,div.container {
		min-height: 680px ! important;
	}

	/*スライダー調整*/
	#myslider .slide4 {
		background-position: 0 22%;
	}
	#myslider .slide7 {
		background-position: 50% 50%;
	}
	#myslider .slide8 {
		background-position: 50% 50%;
	}
	#myslider .slide13 {
		background-position: 100% 20%;
	}
	#myslider .slide14 {
		background-position: 50% 0;
	}
	#myslider .slide17 {
		background-position: 50% 0;
	}

	/*新着表示*/
	section.recently {
		position: absolute;
		bottom: 116px;
		right: 16px;
		z-index: 1;
		width: 200px;
		height: 50%;
		overflow: hidden;
		background-color: rgba(255 , 255 , 255 , .6);
		font-size: 0.86em;
		margin: 0;
		padding: 0;
		border-radius: 5px;						/* CSS3草案 */
	    -webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
	    -moz-border-radius: 5px;			/* Firefox用 */
		box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
		-moz-box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
		-o-box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
		-ms-box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
	}
	section.recently h1.recently-title {
		font-weight: bold;
		font-size: 1.06em;
		padding: 6px 0 4px 0;
		color: #000;
		background-color: rgba(47 , 79 , 79 , .4);
	}
	ul#home-recently {
		position: relative;
		text-align: left;
		line-height: 120%;
		color: #000;
		overflow: hidden;
		width: 96%;
		height: 88%;
		margin: 4px 2%;
	}
	#home-recently li {
		padding: 6px 6px 6px 4px;
		text-align: left;
		line-height: 120%;
		border-top: 1px dotted #666;
	}
	#home-recently li:first-child {
		border: none;
	}
	#home-recently li a {
		text-decoration: underline;
	}
	#home-recently li a:link,
	#home-recently li a:visited,
	#home-recently li a:active {
		color: #2F4F4F;
	}
	#home-recently li p.old-thumbnail {
		width: 50px;
		height: 50px;
		background-position: 50% 50%;
		background-size: cover;
		float: right;
		margin: 2px 0 2px 4px;
		border-radius: 5px;						/* CSS3草案 */
	    -webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
	    -moz-border-radius: 5px;			/* Firefox用 */
	}
	#home-recently li p.thumbnail {
		width: 50px;
		height: 50px;
		float: right;
		margin: 2px 0 2px 4px;
	}
	#home-recently li p.thumbnail img {
		width: 100%;
		height: 100%;
		border-radius: 5px;						/* CSS3草案 */
	    -webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
	    -moz-border-radius: 5px;			/* Firefox用 */
	}
	#home-recently .ps-scrollbar-y {
		background-color: rgba(47 , 79 , 79 , .8);
	}

	/*SNSリンク*/
	div.sns-links-home {
		bottom: 114px;
		left: 12px;
	}
	
	/*ゴルジリンク*/
	p.golgi-link-home {
		bottom: 160px;
		left: 16px;
	}
	p.golgi-link-home a {
		width: 160px;
	}

	/*バナー*/
	section.content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	div.bn-list {
		position: absolute;
		bottom: 26px;
		left: 16px;
	}
	div.bn-list ul li {
		position: relative;
		display: inline-block;
		height: 22px;
		line-height: 22px;
		margin: 0;
		padding: 0 12px 0 16px;
		border-left: 1px solid #fff;
	}
	div.bn-list ul li:first-child {
		border: none;
	}
	div.bn-list ul li a {
		text-decoration: none;
		color: #fff;
		font-weight: bold;
	}

	/*HOME用コピーライト*/
	p.home-copyright {
		position: absolute;
		width: 100%;
		bottom: 1px;
		right: 4px;
		text-align: right;
	}

}

@media (max-width: 1024px) and (min-width: 768px) {		/* 小さめモニターのPCとタブレット */

	html,body,div.container {
		min-height: 680px ! important;
	}

	/*スライド調整*/
	#myslider .slide5 {
		background-position: 38% 0%;
	}
	#myslider .slide7 {
		background-position: 20% 50%;
	}
	#myslider .slide8 {
		background-position: 50% 0;
	}
	#myslider .slide12 {
		background-position: 77% 100%;
	}
	#myslider .slide13 {
		background-position: 100% 10%;
	}
	#myslider .slide14 {
		background-position: 50% 0;
	}

	/*新着表示*/
	section.recently {
		position: absolute;
		bottom: 160px;
		right: 16px;
		z-index: 1;
		width: 200px;
		height: 40%;
		overflow: hidden;
		background-color: rgba(255 , 255 , 255 , .6);
		font-size: 0.86em;
		margin: 0;
		padding: 0;
		border-radius: 5px;						/* CSS3草案 */
	    -webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
	    -moz-border-radius: 5px;			/* Firefox用 */
		box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
		-moz-box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
		-o-box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
		-ms-box-shadow: 0 0 5px rgba(0 , 0 , 0 , .2);
	}
	section.recently h1.recently-title {
		font-weight: bold;
		font-size: 1.06em;
		padding: 6px 0 4px 0;
		color: #000;
		background-color: rgba(47 , 79 , 79 , .4);
	}
	ul#home-recently {
		position: relative;
		text-align: left;
		line-height: 120%;
		color: #000;
		overflow: hidden;
		width: 96%;
		height: 88%;
		margin: 4px 2%;
	}
	#home-recently li {
		padding: 6px 6px 6px 4px;
		text-align: left;
		line-height: 120%;
		border-top: 1px dotted #666;
	}
	#home-recently li:first-child {
		border: none;
	}
	#home-recently li a {
		text-decoration: underline;
	}
	#home-recently li a:link,
	#home-recently li a:visited,
	#home-recently li a:active {
		color: #2F4F4F;
	}
	#home-recently li p.old-thumbnail {
		width: 50px;
		height: 50px;
		background-position: 50% 50%;
		background-size: cover;
		float: right;
		margin: 2px 0 2px 4px;
		border-radius: 5px;						/* CSS3草案 */
	    -webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
	    -moz-border-radius: 5px;			/* Firefox用 */
	}
	#home-recently li p.thumbnail {
		width: 50px;
		height: 50px;
		float: right;
		margin: 2px 0 2px 4px;
	}
	#home-recently li p.thumbnail img {
		width: 100%;
		height: 100%;
		border-radius: 5px;						/* CSS3草案 */
	    -webkit-border-radius: 5px;		/* Safari,Google Chrome用 */
	    -moz-border-radius: 5px;			/* Firefox用 */
	}
	#home-recently .ps-scrollbar-y {
		background-color: rgba(47 , 79 , 79 , .8);
	}

	/*SNSリンク*/
	div.sns-links-home {
		bottom: 117px;
		right: 16px;
	}

	/*ゴルジリンク*/
	p.golgi-link-home {
		bottom: 115px;
		left: 18px;
	}
	p.golgi-link-home a {
		width: 160px;
	}

	/*バナー*/
	section.content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	div.bn-list {
		position: absolute;
		width: 100%;
		bottom: 30px;
		text-align: center;
	}
	div.bn-list ul {
		width: 100%;
		display: table;
		table-layout: fixed;
	}
	div.bn-list ul li {
		display: table-cell;
		height: 22px;
		line-height: 22px;
		border-left: 1px solid #fff;
	}
	div.bn-list ul li:first-child {
		border: none;
	}
	div.bn-list ul li a {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		color: #fff;
		font-size: 0.80em;
		font-weight: bold;
		text-align: center;
	}

	/*HOME用コピーライト*/
	p.home-copyright {
		position: absolute;
		width: 100%;
		bottom: 1px;
	}
}

@media (max-width: 767px) {												/* スマホ */

	html,body {
	    height: 100%;
		min-height: 320px ! important;
	}
	/*ロゴ調整*/
	header.main {
	   position: absolute;
	   top: 0;
	   left: 0;
	}
	header.main div.left,
	header.main div.right {
		position: relative;
		width: auto;
		height: 80px;
	}
	header.main div.left img,
	header.main div.right img {
		height: 100%;
		width: auto;
	}
	/*コンテンツ調整*/
	section.content {
		position: absolute;
		top: calc(100% - 153px);
        top: -webkit-calc(100% - 153px);
	}
    .clearfix:after {
        content:none;
    }
	/*スライド調整*/
	div.slider-outer {
		height: calc(100% - 189px);
		height: calc(100% - 189px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		top: 36px;
	}
	#myslider .slide4 {
		background-position: 0 42%;
	}

	/*新着表示*/
	section.recently {
		width: 100%;
		margin: 0 auto 1px 0;
		padding: 0;
	}
	section.recently h1.recently-title {
		font-weight: bold;
		font-size: 1.1em;
		margin: 0;
		height: 33px;
		line-height: 33px;
		color: #fff;
		background-color: #8FBC8F;
	}
	ul#home-recently {
		display: none;
		text-align: left;
		line-height: 120%;
		color: #2F4F4F;
		overflow: hidden;
		width: 100%;
		background-color: rgba(255 , 255 , 255 , 1.0);
		margin: 0;
		padding: 0;
	}
	#home-recently li {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		padding: 6px;
		text-align: left;
		line-height: 130%;
		border-top: 1px dotted #666;
	}
	#home-recently li:first-child {
		border: none;
	}
	#home-recently li p.old-thumbnail {
		width: 60px;
		height: 60px;
		background-position: 50% 50%;
		background-size: cover;
		float: left;
		margin: 0px 6px 0px 0;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	 }
	#home-recently li p.thumbnail {
		width: 60px;
		height: 60px;
		float: left;
		margin: 0px 6px 0px 0;
	}
	#home-recently li p.thumbnail img {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	#home-recently li p.date {
		margin: 0;
		padding: 4px 0 0 0;
		font-size: 0.9em;
	}
	#home-recently li h2 {
		font-weight: bold;
		font-size: 0.96em;
		padding: 0px 4px 4px 0;
	}

	/*SNSリンク*/
	div.sns-links-home {
        top: -45px;
		left: 8px;
	}

	/*ゴルジリンク*/
	p.golgi-link-home {
		top: -190px;
		left: 12px;
	}
	p.golgi-link-home a {
		width: 160px;
	}

	/*バナー*/
	div.bn-list {
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	div.bn-list ul {
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	div.bn-list ul li {
		display: inline-block;
		height: 33px;
		width: 50%;
		font-size: 0.90em;
		letter-spacing: -.4em;
	}
	div.bn-list ul li a {
	    position: relative;
		display: block;
		width: calc(100% - 0.5px);
        width: -webkit-calc(100% - 0.5px);
		height: 32px;
		line-height: 32px;
        font-size: 12px;
		text-decoration: none;
		background-color: rgba(0 , 50 , 50 , 0.8);
        letter-spacing: normal;
        color: #fff ! important;
	}
   div.bn-list ul li:nth-child(odd) a {
        margin: 0 auto 1px 0;
    }
    div.bn-list ul li:nth-child(even) a {
       margin: 0 0 1px auto;
    }
    p.home-copyright {
        width: 100%;
		height: 20px;
	    height: calc(25px + env(safe-area-inset-bottom));
		line-height: 20px;
        line-height: calc(20px + env(safe-area-inset-bottom));
        background-color: #ccff33;
    }
}