@charset "UTF-8";

/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */

/* SP用CSSの記述 */


/* PC、Tablet用CSSの記述 */
@media (min-width:768px){
}
/* =======================================
	sticky banner
======================================= */
.sticky_header{
	padding: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
}
ul.sticky_banner {
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	margin: 0px auto 0px auto;
}
.sticky_banner li {
	padding: 0 4px;
}

.scroll_area{
    margin-top: 0px;
    height: auto;
    padding: 0px;
}
/* =======================================
	main
======================================= */
#bg01 {
	background: url("../images/bg01.jpg") center top no-repeat;
	width: 100%;
	height: 785px;
	margin: -72px 0 0 0;
	padding: 0;
}
.main {
	position: relative;
	width: 990px;
	margin: 0 auto;
}
h1 {
    position: absolute;
    z-index: 10;
    left: 181px;
    top: 92px;
}
.box_01 {
    position: absolute;
    z-index: 10;
    left: 16px;
    top: 93px;
}
.box_02 {
    position: absolute;
    z-index: 10;
    left: 676px;
    top: 322px;
}
.box_03 {
    position: absolute;
    z-index: 10;
    left: 686px;
    top: 590px;
}
.box_03-02 {
    position: absolute;
    z-index: 10;
    left: 777px;
    top: 541px;
}
.box_04 {
    position: absolute;
    z-index: 10;
    left: 762px;
    top: 152px;
}
.box_05 {
    position: absolute;
    z-index: 10;
    left: 500px;
    top: 625px;
}
.box_06 {
    position: absolute;
    z-index: 10;
    left: 10px;
    top: 336px;
}
.box_06-02 {
    position: absolute;
    z-index: 10;
    left: 44px;
    top: 616px;
}
/* =======================================
	那須の冬トク感謝祭開催中
======================================= */
#bg02 {
	background: url("../images/bg02.jpg") center top no-repeat;
	width: 100%;
	height: 800px;
	margin: 0;
	padding: 0;
}
.fuyutoku {
	position: relative;
	max-width: 990px;
	margin: 0 auto;
}
.box_07 {
    position: absolute;
    z-index: 10;
    left: 139px;
    top: -20px;
}
.box_08 {
    position: absolute;
    z-index: 10;
    left: 15px;
    top: 89px;
}
.box_09 {
    position: absolute;
    z-index: 10;
    left: 88px;
    top: 616px;
}
/* =======================================
	那須 ちびっ子ワールド2025
======================================= */
#bg03 {
	background: #FFF;
	width: 100%;
	height: 782px;
	margin: 0;
	padding: 0;
}
.chibbiko {
	position: relative;
	max-width: 990px;
	margin: 0 auto;
}
.box_10 {
    position: absolute;
    z-index: 10;
    left: 10px;
    top: 20px;
}
.box_11 {
    position: absolute;
    z-index: 10;
    left: 88px;
    top: 640px;
}
/* =======================================
	那須 遊び・体験
======================================= */
#bg04 {
	background: url("../images/bg03.jpg") center top no-repeat;
	width: 100%;
	height: 506px;
	margin: 0;
	padding: 0;
}
.asobi_taiken {
	position: relative;
	max-width: 990px;
	margin: 0 auto;
}
.box_12 {
    position: absolute;
    z-index: 10;
    left: 20px;
    top: 31px;
}
.box_13 {
    position: absolute;
    z-index: 10;
    left: 7px;
    top: 213px;
}
.box_14 {
    position: absolute;
    z-index: 10;
    left: 237px;
    top: 223px;
}
.box_15 {
    position: absolute;
    z-index: 10;
    left: 506px;
    top: 113px;
}
.box_16 {
    position: absolute;
    z-index: 10;
    left: 735px;
    top: 217px;
}
.box_17 {
    position: absolute;
    z-index: 10;
    left: 767px;
    top: 15px;
}
/* =======================================
	那須の冬グルメ　温泉
======================================= */
#bg05 {
	background: url("../images/bg04.jpg") center top no-repeat;
	width: 100%;
	height: 864px;
	margin: 0;
	padding: 0;
}
.gourmet_onsen {
	position: relative;
	max-width: 990px;
	margin: 0 auto;
}
.box_18 {
    position: absolute;
    z-index: 10;
    left: 162px;
    top: 13px;
}
.box_19 {
    position: absolute;
    z-index: 10;
    left: 22px;
    top: 79px;
}
.box_20 {
    position: absolute;
    z-index: 10;
    left: 516px;
    top: 79px;
}
.box_21 {
    position: absolute;
    z-index: 10;
    left: 22px;
    top: 186px;
}
.box_22 {
    position: absolute;
    z-index: 10;
    left: 22px;
    top: 320px;
}
.box_23 {
    position: absolute;
    z-index: 10;
    left: 4px;
    top: 536px;
}
.box_24 {
    position: absolute;
    z-index: 10;
    left: 256px;
    top: 491px;
}
.box_25 {
    position: absolute;
    z-index: 10;
    left: 514px;
    top: 195px;
}
/* =======================================
	2つのふるさとお得クーポンでおトク
======================================= */
#banner {
	background:#FFF;
	width: 100%;
	height: 864px;
	margin: 0;
	padding: 0;
}
.otoku {
	position: relative;
	max-width: 990px;
	margin: 0 auto;
}
.box_26 {
    position: absolute;
    z-index: 10;
    left: 51px;
    top: 2px;
}
.box_27 {
    position: absolute;
    z-index: 10;
    left: 198px;
    top: 479px;
}
.bnr_01-01 {
    position: absolute;
    z-index: 10;
    left: 89px;
    top: 119px;
}
.bnr_01-02 {
    position: absolute;
    z-index: 10;
    left: 510px;
    top: 119px;
}
.bnr_02 {
    position: absolute;
    z-index: 10;
    left: 90px;
    top: 292px;
}
.bnr_03 {
    position: absolute;
    z-index: 10;
    left: 90px;
    top: 514px;
}
.bnr_04 {
    position: absolute;
    z-index: 10;
    left: 510px;
    top: 513px;
}
.bnr_05 {
    position: absolute;
    z-index: 10;
    left: 90px;
    top: 703px;
}
/* リンク先の要素に余白を追加 */
:target::before {
  content: "";
  display: block;
  height: 80px; /* ヘッダーの高さ分 */
  margin-top: -80px;
}
/* =======================================
	link
======================================= */
a:hover img {
	filter: brightness(0.5); 
}
