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

html,body{overflow-x:hidden;}

#container{
	font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    margin: 0;
	font-size: 16px;
	color: #171717;
	line-height: 1.5;	
}
*{box-sizing: border-box;}
th{font-family: 'Noto Sans JP', sans-serif;}
.w1000{
	width: 1300px;
	margin: 0 auto;
}
#container img {
	margin:0;
	padding:0;
	vertical-align:bottom;
	
/*	width: 100%;
	max-width: 100%;*/
}
a, a:link{background:none; text-decoration:none;}
a:hover{opacity: .7;}
th {	font-family: 'Noto Sans JP', sans-serif;}
#container:after, .content:after, .inner:after, dl:after,.clearfix:after{display: none;}


.sp{display: none;}
.flex_box{	display: flex;}
.hina{font-family: 'Hina Mincho', serif;}
.min{font-family: 'Noto Serif JP', serif;}


/*-----------------------pagetop*/

#pagetop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index:50;
	width:4em;
	height:4em;
	border-radius:50%;
	overflow:hidden;
	text-align: center;
}
#pagetop a {
	position: relative;
	display:block;
	width:100%;
	height:100%;
	padding:0;
	background-image: none;
	background-color:rgba(9,107,0,0.50);
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;	
}
#pagetop a:before{
	content: "▲";
	display: block;
	position: absolute;
	color: #FFF;
	font-size: 2em;
    text-indent: 0;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}
#pagetop a:hover {
	text-decoration: none;
	background-color: #a5a5a5;
}
/*--------------------パンくず */
#pankuzu{
	margin: 15px auto;
	width: 1000px;
	font-size: .85em;
}

#pankuzu ul{
    padding: 0 0 5px;
    _zoom: 1;
}
#pankuzu li{
    float: left;
    list-style: none;
}
#pankuzu li + li:before{
    margin: 0 8px;
    content: '>';
}

/*-------------------------------------------------------------------------------- main */
#main img{width: 100%;}
#main{ position: relative;}

/*h1.sitettl{
	position: absolute;
	bottom:0;
/*	left:0;
	right:0;*/
/*	margin:auto ;*/	
/*	z-index: 100;*/
/*	text-align: center;	
	*/
/*	max-width: 585px;
	width: 50%;

	padding: 15% 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	background: url(../img/title.png) no-repeat left bottom;
	background-size:contain;
}*/
h1.sitettl{
	position: absolute;
	bottom:0;
	z-index: 100;

	height: 500px;
	width: 585px;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	background: url(../img/title.png) no-repeat left bottom;
	background-size:contain;
}

/*--------------------------------------------------- slideshow */
#slideshow .cover img{
	object-fit:cover;
    width:100%;
    height:100%;
	object-position:right;
}
#slideshow .cover{
	position: absolute;
/*	left:-30%;
	bottom: 0;*/
	width: 50%;
	z-index: 97;
	height: 500px;
/*	left:-30%;*/
	bottom: 0;

}
#slideshow {
	margin: 0 auto;
	width:100%;
	text-align: left;
	position: relative;
}
/*#slideshow div {
	width:100%;
	padding: 0 0 32%;

	overflow: hidden;
	position: relative;
	z-index: 5;		
}*/
#slideshow div {
/*	width:100%;*/
/*	padding: 0 0 32%;*/
	width:100%;
	height: 500px;
	overflow: hidden;
	position: relative;
	z-index: 5;		
}
#slideshow div div {
	top: 0;
	left: 0;
	position: absolute;
}
#slideshow div div img {
	width:100%;
}
#slideshow ul {
/*	display: flex;*/
	display: none;	
	width:30%;
	position: absolute;
	bottom: 60px;
	left:80%;
	z-index: 101;
	padding: 1em 0;
}
#slideshow ul.no_text{
	bottom: -15px;
	right: 10px;
}

#slideshow ul li {
	float: left;
	margin-right:5px;
	border:4px solid #25B000;
	display: inline;
}
#slideshow ul li img{
	display: none;
/*	width:59px;
	height:29px;
*/}



#slideshow .active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

#slideshow ul {
	display: inline-block;
	overflow: hidden;
}


/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

/*-------------------------------------------------------------------------------- main */
#main .w1000 {	padding: 0;}
#main img{width: 100%;}
#main{ position: relative;}
h1.sitettl{
	position: absolute;
	bottom:0;
	z-index: 100;
	padding: 50% 0;
	height: auto;
	width:100%;
	
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	background: url(../img/title_sp.png) no-repeat left bottom;
	background-size:contain;
}
/*--------------------------------------------------- slideshow */
#slideshow .cover{	display: none;}
/*#slideshow div div img {
	width:135%;
}*/
/*#slideshow div {	padding: 0 0 40%;}
#slideshow div div img {	width:100%;}	
}*/


/*h1.sitettl{
	position: absolute;
	bottom:0;
/*	left:0;
	right:0;*/
/*	margin:auto ;*/	
/*	z-index: 100;*/
/*	text-align: center;	
	*/
/*	max-width: 585px;
	width: 50%;

	padding: 15% 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	background: url(../img/title.png) no-repeat left bottom;
	background-size:contain;
}*/


/*--------------------------------------------------- slideshow */
/*#slideshow .cover img{
	object-fit:cover;
    width:100%;
    height:100%;
	object-position:right;
}
#slideshow .cover{
	position: absolute;
	width: 50%;
	z-index: 97;
	height: 500px;
	bottom: 0;

}*/
#slideshow {
	margin: -10% auto 0;
	width:100%;
	text-align: left;
	position: relative;
}
/*#slideshow div {
	width:100%;
	padding: 0 0 32%;

	overflow: hidden;
	position: relative;
	z-index: 5;		
}*/
#slideshow div {
/*	width:100%;*/
	padding: 50% 0;
	width:100%;
	height: 200%;
/*	overflow: hidden;
	position: relative;
	z-index: 5;	*/	
}
#slideshow div div {
	top: -41%;
	left: 0;
	position: absolute;
}
#slideshow div div img {
	width:100%;
}
	
	
	
	
	
	
	
}

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

h2{
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 800;
	font-size:min(6vw,25px);
	text-align: center;
	color: #009345;
}
h2 small{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: .6em;
	display: block;
	color: #3ab54a;
	padding-top: 2em;
	padding-right: 1.5em;
}
h2 small::before{
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 2em;/*画像の幅*/
	height: 2em;/*画像の高さ*/
	background: url(../img/h2_left.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-top: -2em;
}
/*-------------------------------------------------------------------------------------- intro */
#intro{
	text-align: center;
	padding: 5em 0;
}
#intro h2{
	position: relative;
	margin-bottom: 3em;
	padding-top: 1em;
}
#intro h2::before{
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 2em;/*画像の幅*/
	height: 2em;/*画像の高さ*/
	background: url(../img/h2_left.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-top: -2em;
}
#intro h2::after{
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 3.5em;/*画像の幅*/
	height: 3.5em;/*画像の高さ*/
	background: url(../img/h2_intro.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: -2em;	
}

#intro strong{
	background:linear-gradient(transparent 60%, #ff6 60%);
}
#intro p{
	margin-bottom: 3em;
}
#intro p:last-of-type{
	color: #3ab54a;
	font-weight: 700;
}
/*-------------------------------------------------------------------------------------- navi */
/*.navi {
	margin:1em auto 5em;
	justify-content: center;
}
.navi li strong{
	font-family: 'Hina Mincho', serif;
	font-size: 1.1em;
	color: #444;
}
.navi li strong.top{line-height: 4;}
.navi li strong.indigo{line-height: 2;}
.navi li{		
	flex: 1;
	max-width: 15.5em;
}*/
.navi {
  position: fixed;
  top: 70%;
  right: 10px;
  z-index: 999;
}
.navi li a {
	max-width: 7em;
	background: rgba(58,181,74,0.90);
	text-align: center;
	border-radius: 30px;
	margin: 1.5em;
	font-size: 1.2em;
	font-weight: 800;	
	position: relative;
	z-index: 1;

	line-height: 0.8;
	user-select: none;
	transition: transform 0.3s;
	padding: .1em 1.4em 0.1em;
	display: block;
	color: #FFFFFF;
}
.navi li a small{
	color: #ffff00;
	display: block;

	margin-bottom: 1em;
	margin-top: 1em;
	font-size: .7em;
}
.navi li a:before {
	position: absolute;
	z-index: -1;
	top: 100%;
	left: 5%;
	width: 90%;
	height: 10px;
	content: '';
	transition:transform 0.3s,opacity 0.3s;
	pointer-events: none;
	opacity: 0;
	background: -webkit-radial-gradient(center, ellipse, rgba(0,192,65,0.35) 0%, rgba(46,125,50, 0) 80%);
	background: radial-gradient(ellipse at center, rgba(0,192,65,0.35) 0%, rgba(46,125,50, 0) 80%);
}
.navi li a:hover {
	transform: translateY(-6px);
	animation: 1.5s linear infinite alternate 0.3s;
}
.navi li a:hover:before {
	transform: translateY(6px);
	animation:1.5s linear infinite alternate 0.3s;
	opacity: 0.7;
}
.navi li a:focus {
	color: #2e7d32;
}

.navi li.on a{
	background: #FFF;
	transform: translateY(-10px);
}
.navi li.on a:before {
	transform: translateY(6px);
	opacity: 0.4;
}


/*---------------------------------------------------------------------- tour */
/*#tour img{	overflow: hidden;}*/
#tour img{
/*	object-fit:cover;
    width:100%;
    height:100%;*/
}
#tour{
	padding: 4em 0 5em;
	background-image: repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(243, 252, 229, 1) 7px, rgba(243, 252, 229, 1) 14px );
	border-top: #3ab54a solid 5px;
	border-bottom: #3ab54a solid 5px;
}
#tour h2{
	text-align: center;
	padding-bottom: 2.5em;
	padding: 3em;
}
#tour h2::after{
	position: absolute;
	left:62%;
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 6em;/*画像の幅*/
	height: 6em;/*画像の高さ*/
	background: url(../img/h2_tour.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: -2em;	
}
#tour ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center; 
}
#tour ul li{
	width: calc(100% / 3 - 1em);
	margin-right: 1em;
	background: #fff;
	margin-bottom: 1em;
}
#tour ul li:nth-child(3n) {
  margin-right: 0;
}
#tour ul li p img{
		object-fit:cover;
    width:100%;
    height:17em;
}
#tour ul li p{
	position: relative;
}
#tour ul li p span{
	position: absolute;
	top:0;
	left:0;
	background: rgba(255,241,0,0.80);
	color: #009345;
	font-weight: 700;
	padding: .2em .5em;
}
#tour ul li dl{
	padding: .5em;
}
#tour ul li dt{
	padding-bottom: .5em;
	font-weight: 600;
	border-bottom: #3ab54a dashed 2px;
	margin-bottom: .5em;
}
#tour ul li dt .new{
	background: red; 
	padding: 1px .2em; 
	color: #fff; 
	margin-right: .3em;
}
#tour ul li dd span{
	border: #3ab54a 1px solid;
	color: #017A11;
	background: #EDFCC9;
	font-size: .85em;
	font-weight: 600;
	
	padding: 0 3px;
	margin-right: .5em;
}
#tour ul li dd.link{
	margin-top: .5em;
	display: flex;
/*	flex-direction: column;*/
/*	align-items: flex-end;*/
/*	align-items: center;*/
	flex-wrap: wrap;
	justify-content: space-around; 
}
#tour ul li dd a{
	width: 49%;
	position: relative;
	display: block;
/*	min-width: 14em;*/
	padding: 10px 1em 10px .5em;
	margin-bottom: .2em;
	background-color: #009345;
	border-radius: 8px;
	font-size: min(1.25vw,16px);
	color: #fff;
	text-align: center;
}
#tour ul li dd a.genchi{background-color: #8cc63f;}
#tour ul li dd a.soon{background-color: #9D9D9D;}
#tour ul li dd a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: .4em;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}

/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {
#container{	font-size: 14px;}
	
#intro,#tour{	padding: 2em 0 2em;}	
#intro p{
	text-align: left;
	margin-bottom: 1em;
}
#intro p img{display: block;}
.navi li a {	max-width: 20em; font-size: 95%;}
.navi li a br{	display: none;}


#tour h2{	padding: 0 25% 1.5em;}	
#tour h2::after{
	width: 4.5em;
	height: 4.5em;
}
#tour ul{	display: block;}
#tour ul li{
	width: 100%;
	margin-right: 0;
	display: flex;
}
#tour ul li p{	width: 38%;	}
#tour ul li p img{    height:100%;}
#tour ul li dl{	width: 60%;	}
/*#tour ul li dd a{
	width: 100%;
	min-width: initial;
	max-width: 14em;
	padding: 3px 2.5em 3px 1em;
}*/

#tour ul li dd a{
	font-size:2vw;
}	
	
}
/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px)  {
#tour ul li dd a{
	width: 100%;
	min-width: initial;
	max-width: 14em;
	padding: 3px 2.5em 3px 1em;
	font-size:min(4.1vw,16px);
}
#tour ul li dd.link{
	margin-top: .5em;
	display: flex;
}
}


/*---------------------------------------------------------------------- guide*/
#guide img{
	object-fit:cover;
    width:100%;
    height:100%;
}
#guide{
	padding: 4em 0 5em;
}
#guide h2{
	text-align: center;
	padding-bottom: 2.5em;
}
#guide dl{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2em;
}
#guide dl:nth-of-type(even){
	flex-direction: row-reverse;
}
#guide dt{	width: 20%;}
#guide dd{	width: 78%;}
#guide dd span{
	display: block;
	border-bottom: #8cc63f dashed 3px;
	padding: .5em 0;
	margin-bottom: .5em;
}
#guide dd strong{ font-size: 1.3em;}

/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px)  {
#guide dt{	width: 40%; height: 12em;}
#guide dd{	width: 58%;}	
	
}


/*-------------------------------manners */

#manners{
	padding: 4em 0 5em;
	background: url(../img/manner_bg.png) no-repeat bottom -1px center /100% #f3fce6;
	border-top: #3ab54a solid 5px;
}
#manners h2{
	text-align: center;
	max-width: 25em;
	margin: 0 auto 3em;
	position: relative;
}
#manners h2::after{
	position: absolute;
	top:0;
	bottom:0;
	right:-2em;
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 5em;/*画像の幅*/
	height: 5em;/*画像の高さ*/
	background: url(../img/h2_manner.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: -2em;	
}
#manners h3{
	text-align: center;
	font-size: 1.3em;
	font-weight: 900;
	margin-bottom: 2em;
}
#manners h3 span,
#manners dl dt span{
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 800;
	background: #3ab54a;
	border-radius: 1em;
	padding: 1px .3em;
	margin: 5px;
	color: #fff700;
}
#manners h3 + p{
	text-align: center;
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 3em;
}
#manners h3 + p strong{background:linear-gradient(transparent 60%, #ff6 60%);}
#manners h3 + p small{
	display: block;
	text-align: right;
}
#manners h3 + p a{
	color: #009944;
	text-decoration: underline;
}

#manners dl{
	padding: 2em 4em;
}
#manners dl dt{
	font-weight: 800;
	font-size: 1.2em;
	border-bottom: #5cb547 dashed 2px;
	padding-bottom: .3em;
	margin-bottom: .3em;
}
#manners dl dt span{margin-right: .7em;}
#manners dl dd{
	padding-left: 3em;
	margin-bottom: 2em;
}
#manners .box{
	background: #fff;
	box-shadow: 3px 3px 3px 1px #000;
	margin: 2em auto;
	padding: 2em 4em;
}
#manners .box h4{
	font-size: 1.5em;
	font-weight: 900;
	padding-left:3em; 
	position: relative;
	align-items: center; /* 横線を上下中央 */
	display: flex; /* 文字と横線を横並び */
	margin-bottom: 1.5em;
}
#manners .box h4::before{
	position: absolute;
	top:-1em;
	left:-2em;
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 5em;/*画像の幅*/
	height: 5em;/*画像の高さ*/
	background: url(../img/h4_photography.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: -2em;	
}
#manners .box h4::after {
  background-color: #8cc63f; 
  content: "";
	flex-grow: 1; /* 横幅いっぱい */
  height: 3px; /* 横線の高さ */
	margin-left: 15px;
}

#manners .box h4 + p{
	font-size: 1.1em;
	font-weight: 800;
	text-align: center;
	margin-bottom: 1.5em;
}
#manners .box h5{
	font-size: 1.2em;
	font-weight: 800;
	color: #1A5238;
	margin-top: 1.5em;
	background: #DBE9CC;
	padding: 2px 1em;
}
#manners .box li span{
	color: #8cc63f;
	font-size: 1.4em;
	font-weight: 800;
	margin-right: 5px;
}
#manners .box li{
 	text-indent: -1.6em;
	padding-left: 1.6em;
}
#manners .box li strong{
	font-size: 1.1em;
	margin-right: .5em;
	background:linear-gradient(transparent 80%, #ff6 80%);
}
.link_bbw{text-align: right;}
.link_bbw a{	color: #009944;	text-decoration: underline;}
/*観測マナー*/
#manners .box.watch h4::before{
	background: url(../img/h4_watch.png) no-repeat;
	top:-.5em;	
}
#manners .box.watch h4::after {	background-color: #009345; }
#manners .box.watch li span{	color: #009345;}

/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {
#manners{	padding: 2em 0 2em;}
#manners h2{	margin-bottom: 1.5em;}
#manners h2::after{
	position: absolute;
	top:3em;
	bottom:0;
	right:0;
	content: '';/*何も入れない*/
 	display: inline-block;
	width: 20vw;/*画像の幅*/
	height: 20vw;/*画像の高さ*/
	background: url(../img/h2_manner.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: -2em;	
}
#manners h3{	margin-bottom: 1em;}
#manners dl,#manners .box{	padding: 1em 1em;}
#manners dl dd{	padding-left: 0;}	
#manners .box{width: 95%;}
#manners .box h4::before{
	top:-1em;
	left:-1.5em;
	max-width: 5em;
	width: 25vw;/*画像の幅*/
	height: 25vw;/*画像の高さ*/
	background-size: 100%;
}
/*観測マナー*/
#manners .box.watch h4::before{
	top:-1.5em;
	max-width: 5em;
	width: 25vw;/*画像の幅*/
	height: 25vw;/*画像の高さ*/
	background-size: 100%;
}
	
}

/*-------------------------------contact */
#contact{
	background: #009202;
	padding: 3em 0;
}
#contact .w1000{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3%;
}
#contact h3{
	background: #fff;
	padding: 1em;
	margin-right: 1em;
	color: #009202;
}
#contact dl{	color: #fff;}
#contact dt{	
	font-size: min(4.1vw,21px);
	font-weight: 700;
}
#contact dd a{ 
	font-size: min(6.4vw,27px);
	font-weight: 900;
	color: #fff;
	margin-right: 1em;
}
/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:640px)  {
#contact .w1000{	display: block;}
#contact dt{margin: .5em auto;}
	
}
/*------------------------------------------------------------------------------price-gadget*/
.fw-static-api-tour-price-list{    }
.fw-static-api-tour-price-list li{
	width: 100%!important;
	display: flex; 
	flex-direction: row;
	margin: 0;
}
.intphoto li .price .fw-static-api-tour-price-list-area{
	font-size: .7em;
	border: #d4145a 1px solid;
	padding: 0 3px;
	margin-right: .5em;
	width: 6em;
	text-align: center;
}
.fw-static-api-tour-price-list-price-range{
	width: calc(100% - 6.5em);
}

/*-------------------------------------------------------------　さらに表示*/
.readmore-wrap {  position: relative;}

/* チェックボックスを非表示にする */
.readmore-check {  display: none;}

/* コンテンツの初期状態（高さを制限して隠す） */
.readmore-content {
  max-height: 0; /* 表示する初期の高さ */
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* チェックが入った時の高さ（十分に大きな値） */
.readmore-check:checked ~ .readmore-content {
  max-height: 100%; /* コンテンツに合わせて調整 */
}

/* ボタン（ラベル）のデザイン */
.readmore-label {
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  color: #0066cc;
}

/* ラベルのテキスト切り替え */
.readmore-label::before {
	content: "さらに表示";
	font-weight: bold;
}

.readmore-check:checked ~ .readmore-label::before {
  content: "閉じる";
}

/************************************************************
					★min770px－max1300px
************************************************************/
@media screen /*and (min-width: 770px) */and (max-width: 1300px){

#container, .w1000 {
	min-width: 100%;  
	width: 100%;
	margin: 0;
	
	overflow: hidden;
}
.w1000 {	padding: 0 5px;}

/*---------------------------------------------コンテナ用★★★★★★★★-----*/


}

/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

.pc{display: none;}
.sp{display: block;}
	/*--------------------パンくず */
#pankuzu{display: none;}

}
	

/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px)  {
/*--------------------------------------------------------------------------------------  */


}