@charset "utf-8";
/* CSS Document */

html{
	font-size:62.5%;
}

body{
	margin: 0;
}

h1,h2,h3,h4,h5{
	padding: 0;
	margin: 0;
}

h2,h3,h4,h5{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
	transform: rotate(0.05deg);
}
main ul,li{
	list-style: none;
	margin: 0;
	padding: 0;
}


.conts{/*グロナビ以外に適用*/
	font-size:1.6rem;
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-feature-settings: "palt";
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	letter-spacing: 0.05em;
	margin: 0;
}
.conts img{ /*グロナビ以外に適用*/
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

a{
	color: #333333;
	text-decoration: none;
}

a:hover{
	color: #333333;
	opacity: 0.8;
	text-decoration: none;
}

.tour h5{
	font-size: 2.5rem;
	font-weight: bold;
	display: block;
	text-align: center;
}

/*-------------------------

　uiパーツ用

---------------------------*/
.button{
	font-size: 2.3rem;
	max-width:50%;
}
.button--color-light {
    color: #232228;
    border-color: #ffe73e;
    background-color: #ffe73e;
}

.heading--iconLeft,.heading--md{
	font-size: 2.2rem;

}
.mb-md{
	font-size: 2rem;
}
.telNumber--small{
	font-size: 3rem;
}
/*-------------------------

　パンくず　調整

---------------------------*/
.breadcrumb__item, .breadcrumb__item a {
  font-size:11.2px;	
}
.breadcrumb__itemInner{
	font-size:11.2px;
}
/*-------------------------

　全ページ　共通

---------------------------*/
.inner1200{
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.inner960{
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}

.sp-on{
	display: none;
}

.section-title{
	text-align:center;
	padding-top:50px;
	margin-bottom:40px;
}

.section-title h2{
	font-size:4rem;
	color: #59493f;
	/*line-height: 3.5rem;*/
}

.section-title h3{
	font-size:4rem;
	color: #ffffff;
	/*line-height: 3.5rem;*/
}

.tour_title{
	border-bottom: 3px solid #f3faff;
	border-top: 3px solid #f3faff;
	display: inline-block;
}

.section-title img{
	margin-bottom: 15px;
}

.img-caption {
	text-align:left;
	font-size: 1.3rem;
	color: #808080;
	padding-top: 1%;
}

#tour .img-caption{
	text-align: right;
    font-size: 1.2rem;
    color: #ffffff;
    padding-top: 1%;
}

/*-------------------------

　全ページ　共通 fadein

---------------------------*/

.fadein {
	opacity: 0;
	transform : translate(0,45px);
	transition : all 1s;
}

.fadein.effect-scrollin{
	opacity:1;
	transform :translate(0,0);
}


/*-------------------------

　info box

---------------------------*/
.info-box{
	display: flex;
	padding-bottom: 90px;
	/*align-items: center;*/
}

.info-box-text {
    flex: 1;
    font-weight: 500;
    margin-left: 3%;
    margin-top: 1%;
}
#tour .info-box-text {
	color: #ffffff;
}

/*.tour .info-box-text{
	margin-left: 15px;
}
*/
.info-box .info-box-img{
	max-width: 600px;
	width: 50%;
}

#tour .info-box:last-child{
	padding-bottom: 3%;
}

#voice .info-box{
	padding-bottom: 15px;
}

#voice .img-caption {
    text-align: right;
    padding-bottom: 15px;
}

/*.flyover .spot-info .info-box .info-box-img {
    width: 50%;
    margin-left: -120px;
}*/



.bx-wrapper .bx-caption{
	background: none;
	text-align: right;
}
.bx-wrapper .bx-caption span{
	color: #3e3e3e;
	font-weight: bold;
	text-shadow: 
		1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff,
		2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px -2px 2px #fff;
}

.info-box h4{
	font-size: 3.0rem;
	font-weight: bold;
	display: block;
	margin-bottom: 20px;
	padding-top: 30px;
	/*padding-left: 15px;*/
}
.info-box h4:first-of-type{
	padding-top: 0;
}
/*-------------------------

　point

---------------------------*/

.point{
	background-size:cover;
	overflow:hidden;
}

.point h3{
	color: #fff;
}

.point-3col,.point-2col{
	display: flex;
	margin-bottom: 160px;
}


.point-3col li,.point-2col li{
	margin-right:25px;
	padding: 25px;
	background-color: #fff;
	text-align: center;
	border-radius: 10px;
	
}
.point-3col li{
	width:33.33%;
}

.point-2col li{
	width:50%;
}

.point-2col li img{
	margin-bottom:20px;
}

.point-3col li:nth-of-type(3){
	margin-right:0;
}

.point-2col li:nth-of-type(2){
	margin-right:0;
}

.point-3col h4,.point-2col h4{
	font-size:2.4rem;
	margin-bottom:20px;
}
.point .info{
	font-size: 1.4rem;
	text-align: left;
	margin-bottom: 20px;
}

.point .tourlink{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
	transform: rotate(0.05deg);
	width: 80%;
	margin: 0 auto;
}

.point .tourlink::after {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	font-weight: bold;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

/*-------------------------

　コース一覧

---------------------------*/
.tour h5{
	margin-bottom: 60px;
}

.course-area{
	padding-bottom: 80px;
}
.course-list{
	display: flex;
	justify-content: center;
	
}

.course-item-3col{
	width: 33.33%;
	margin-right:20px;
	border:solid #e3e3e3 1px;
	box-shadow: 0px 0px 2px #d5d2d2;
	background-color: #fff;
}

.course-item-3col:nth-of-type(3){
	margin-right:0;
}

.course-item-3col:hover{
	color: #333333;
	opacity: 0.8;
	text-decoration: none;
}


.course-item-3col-img{
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
}

.course-item-3col-text{
	padding: 25px 15px;
	
}

.item-title{
	display: block;
	font-size: 1.5rem;
	font-weight:bold;
	white-space: normal;
}

.item-price{
	display: block;
	text-align: right;
	font-size: 2.5rem;
	color: #da2b48;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
}
.item-price-yen{
	font-size: 1.8rem;
	width: 100%;
}
.item-info{
	font-size: 1.1rem;
	width: 100%;
	
}

.course-sp-Scroll{
	margin-bottom: 80px;
}

/*-------------------------

　問い合わせ・電話

---------------------------*/
.info-area{
	width: 90%;
	margin: 0 auto 80px auto;
}

.info-area dt{
	font-size: 2.3rem;
	color:#357d5a;
	font-weight: bold;
}
.info-area dd::before{
	font-family: "Font Awesome 5 Free";
	content: "\f058";
	padding-right:10px;
	font-weight: bold;
}
.info-area dd span.red{
	color:#D30407;
}

@media screen and (max-width: 1210px) {

	.inner1200{
		padding:20px;
	}
}

@media screen and (max-width: 1024px) {

	.breadcrumb {
		margin: 0 auto;
		width: 100%;
	}
	
	.inner960{
		padding:20px;
	}
}



@media screen and (max-width: 767px) {

	/*-------------------------

	 共通

	---------------------------*/
	
	.align-center {
       margin-top: -70px;
	}

	.inner1200,.inner960{
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	
	.innner960.effect-scrollin{
		width: 100%;
	}

	.pc-on{
		display: none;
	}
	.sp-on{
		display: block;
	}

	.section-title{
		padding-top: 80px;
	}

	.img-caption {
    	text-align: right;
    	font-size: 1.3rem;
    	color: #808080;
    }

    .section-title {
    	text-align: center;
   		padding-top: 40px;
   		margin-bottom: 17px;
	}


	.section-title{
	text-align:center;
	padding-top:50px;
	margin-bottom:50px;
}

	.section-title h3{
	font-size:4rem;
	color: #ffffff;
	line-height: 3.5rem;
	padding-bottom: 10px;
}
	/*-------------------------

	 uiパーツ　head用

	---------------------------*/

	.button{
		max-width: 100%
	}
	
	.js-headfoot-dropdown-button{
		font-size: 14px;
	}
	
	/*-------------------------
	
	 コース一覧
	
	---------------------------*/
	.course-sp-Scroll{
		overflow-x: scroll;
		margin: 0 7px;
		margin-bottom: 40px;
		-webkit-overflow-scrolling: touch;
	}
	.course-sp{
		margin-bottom: 20px;
		justify-content: flex-start;
	}
	/*.course-sp-Scroll .course-sp{
		white-space: nowrap;
	}*/
	.course-item-3col {
		min-width: 90%;
		margin-right: 10px;
	}
	
	/*-------------------------

	 info box

	---------------------------*/
	.info-box{
		/*display: block;*/
		font-size: 1.5rem;
		flex-direction:column;
	}
	
	.info-box .info-box-img{
		width: 100%;
		margin-bottom: 30px;
		order:2;
	}
	.info-box .info-box-text{
		margin-left: 0;
		order:1;
		margin-bottom: 20px;		
	}
	

	/*-------------------------

	 ツアーポイント

	---------------------------*/
	.point-3col, .point-2col {
		display: block;
	}
	.point-3col li{
		width: 100%;
		margin-right: 0;
		margin-bottom: 60px;
	}
	.point-2col li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	.point .tourlink{
		width: 100%;
	}
	
	/*アコーディオン*/
	.menu-ac-title{
		position: relative;
		padding: 10px;
		font-weight: bold;
	}
	
	.menu-ac-icon{
		position: absolute;
		right: 5px;
		top:15px;
		width: 40px;
		height:22px;
	}
	
	.menu-ac-icon span{
		position: absolute;
		display: block;
		width: 20px;
		height: 2px;
		transition: all 1s;
		background-color: #fff;
	}
	.menu-ac-icon span:first-of-type{
		top:5px;
		transform: rotate(0deg);
	}
	.menu-ac-icon span:nth-of-type(2){
		top: 5px;
		transform: rotate(90deg);
	}
	
	.active .menu-ac-icon span:first-of-type{
		top: 5px;
		transform: rotate(45deg);
	}
	.active .menu-ac-icon span:nth-of-type(2){
		top: 5px;
		transform: rotate(-45deg);
	}
	/*.menu-ac-conts{
		padding: 15px 0;
		border-top:2px dotted #59493f;
	}*/
	
	/*----------------------------
	
	　電話番号
	
	------------------------------*/
	#tel .section-title{
		margin-bottom: 20px;
	}
	
	#tel .lrPosition{
		display: block;
	}
	#tel .mb-md{
		font-size: 1.5rem;
	}
	#tel .heading--iconLeft, .heading--md {
		font-size: 1.6rem;
	}
	#tel .telNumber--small a{
		color: #FF4E00;
		display: block;
	}
}

@media only screen and (max-width: 320px){
	/*-------------------------

	 head用

	---------------------------*/
	.js-headfoot-dropdown-button{
		font-size: 12px;
	}
	
	/*----------------------------
	
	　電話番号
	
	------------------------------*/
	#tel .section-title h3{
		font-size: 2.5rem;
	}
}