@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap');
/*
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M PLUS Rounded 1c&display=swap');
*/

/************************************
** 全ページ共通
************************************/

body {
	font-family: "Noto Serif JP", serif !important;
}
a {
  text-decoration:underline;
  color:#0400d1;
}
a:hover {
  text-decoration: none;
  opacity: 0.8;
}
a:hover img {
  text-decoration: none;
  opacity: 0.8;
}
img {
  max-width: 100%;
  height: auto;
}
h1 {
  margin: 0;
  padding: 0;	
}
h2,h3 {
  font-size: 2.2rem;
}

/* main テキスト設定 */
main {
	font-size:1rem;
	text-align: justify;
	line-height: 2rem;
}
.page-en {
	text-align:inherit;
    font-family: 'Noto serif JP', sans-serif;
}
.link_black a {
	color: #000;
	text-decoration: none;
}

/* ハンバーガーメニュー */
.ham_menu {
  margin-bottom: 9rem;
  z-index: 1;
}

.kaigyo p br {
	display: none;
}



.phone {
	display: none;
}
.back_chara {
	text-align: right;
}
.back_chara img {
	max-width: 100%;
}



/* PAGE TOPへ移動 */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 80%;
}
#page-top a {
  background: #666;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 25px 0;
  text-align: center;
  display: block;
  border-radius: 10px;
  opacity: 0.5;
}
#page-top a:hover {
  text-decoration: none;
  background: #999;
}



/*YOUTUBE 動画*/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  contain: strict;
  display: inline-block;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}




/* HEADER */

header {
	color:#FFF;
}

header .top-page {
  /*height: 100vh;*/
  overflow: hidden;
  padding-right: 0;
  padding-left: 0;
}


header .navbar-dark .navbar-nav .nav-link {
	color:#FFF !important;
}
header a {
	color: #FFF;
	text-decoration:underline;
}
header a:hover{
	color: #FFF;
}
header ul {
	list-style-type: none;
	line-height: 1rem;
}
header ul li a{
	font-size: 1.4rem;
}
header .navbar-brand .logo {
    width: 100%;
}
.bg-brand-color {
	background-color: #000 !important;
	opacity: 0.8;
}
.navbar {
	padding: 0 1rem!important;
}
.navbar-brand {
    padding-top: 0!important;
    padding-bottom: 0!important;
}
header .navbar-brand .logo {
    max-width: 80%!important;
}

/*　タブボタン変化 */
.nav-pills .nav-link.active{
	background-color:black;
}
.nav-pills .nav-link{
	color:black;
}

/* FOOTER */
footer {
	font-size: 0.8rem;
	color: #FFF;
	background-color:#000;
}
footer img {
	padding: 0.5rem 0;
}
footer span {
	font-size: 1rem;
}
footer a {
	color: #FFF;
}



/*スクロールでふわっとアニメーション
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}
.fade-in-down {
  transform: translate(0, -50px);
}
.fade-in-left {
  transform: translate(-50px, 0);
}
.fade-in-right {
  transform: translate(50px, 0);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
*/






/************************************
** SWIPER
************************************/



/*ズームフェードアウト_SWIPER（トップページ使用-スライダー）*/
@-webkit-keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
}

@keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
-webkit-animation: zoomUp 12s linear 0s;
animation: zoomUp 12s linear 0s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.swiper-slide {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slide-img {
background-size: cover;
background-position: center center;
height: 100vh;
}




/* 左右交互カルーセル */
.role-slider{
    width:100%;
}
.role-slider img{
    width: 100%;
    height: 100%;
    padding:0.1rem;
}
.role-slider .swiper-wrapper{
    transition-timing-function: linear;
}



/************************************
** ツアー一覧
************************************/

.logomark {
  position:absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	text-align: center;
    color:#FFFFFF;
    font-size: 50px;
    font-weight: bold;
	line-height: 60px;
    text-shadow:3px 3px 3px #000;
	z-index: 9999;
}
.logomark span {
	display: block;
	font-size: 22px;
	font-weight: normal;
	line-height: 40px;
}



/************************************
** タブボタン変化＜ツアー3種＞
************************************/

.tab__area{
    color: #fff;
    margin: 30px 0 0;
    width: auto;
    font-size: 1rem;
    line-height: 2rem!important;
}
.tab__list{
    display: table;
    margin: 0 auto;
	padding:0;
    width: 90%;
    zoom: 1;
    table-layout: fixed;
    border-spacing: 0;
}
.tab__item{
    display: table-cell;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.tab__item a{
    display: block;
    padding: 5px;
    margin: 0 2px;
    overflow: hidden;
    position: relative;
    color: #fff;
    background-color: #fff;
    /*border: 1px solid #ccc;*/
    border-radius: 3px 3px 0 0;
    font-size: 20px;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	height: 85px;
}

.tab__item a:hover{
    text-decoration-line: none;
}

/* タブ選択時の文字色の指定 */
.tab__item a.selected{
  color: #fff;
}
	
	
	
	
/* タブ01（ブルー）の背景色と文字色の指定 */
.tab__item:first-child a.selected{
    background-color: #006688;
}
.tab__item:first-child a:hover{
    background-color: #006688;
	color:#FFF;
}
.tab__item:first-child a{
    background-color: #006688;
}	
	
/* タブ02（ムラサキ）の背景色と文字色の指定 */
.tab__item:nth-child(2) a.selected{
    background-color: #600040;
}
.tab__item:nth-child(2) a:hover{
    background-color: #600040;
	color:#FFF;	
}	
.tab__item:nth-child(2) a{
    background-color: #600040;
}	
	
	
/* タブ03（グリーン）の背景色と文字色の指定 */
.tab__item:nth-child(3) a.selected{
    background-color: #335544;
}
.tab__item:nth-child(3) a:hover{
    background-color: #335544;
	color:#FFF;	
}	
.tab__item:nth-child(3) a{
    background-color: #335544;
}		



	
.tab__inner{
    /*border: 1px solid #ccc;*/
    margin-top: -1px;
	color: #000;
}
/* タブ01（ブルー）選択時のコンテンツ内の背景色の指定 */
.tab__inner .blue{
    padding: 20px 10px 0 10px;
    background-color: #dfeff5;
}
/* タブ02（ムラサキ）選択時のコンテンツ内の背景色の指定 */
.tab__inner .red{
    padding: 20px 10px 0 10px;
    background-color: #f2dfec;
}
/* タブ03（グリーン）選択時のコンテンツ内の背景色の指定 */
.tab__inner .green{
    padding: 20px 10px 0 10px;
    background-color: #ccf0de;
}

ul{
    padding-inline-start: 0px;		
}	







/************************************
** TOPページ
***********************************

/*各ページ説明行1rem padding*/
.text-pl h4{
	padding: 0.5rem 0;
}
.text-pl p{
	padding-left: 1rem;
}




/* お問合せボタン */
.button001 {
	margin-bottom: 8rem;	
}

.button001 a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    padding: 20px 25px;
    color:#3E93D3;
	text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.button001 a:hover {
    background: #313131;
    color: #FFF;
}


/*お問合せボタン*/
.inquiry{
    display: flex;
	justify-content: center;
    max-width: 450px;
    padding: 25px 0 10px 0;
    margin: auto;
    background: #fff;
    color: #6c757d;
	border:0.05rem solid #6c757d;
	border-radius: 0.35rem;
    text-decoration: none;
    text-align: center;
}
.inquiry:hover{
	color: #fff;
    background: #6c757d;
    text-decoration-line: none;
}
.inquiry span {
	font-size: 2rem;
}







/* =============================================
メディアクエリ
============================================= */

/* 大デバイス（デスクトップ, 1200px 未満）
==============================================*/
@media screen and (max-width: 1199.98px) {
	
	
	
	
	
	
	
	
	
	

}

/* 中デバイス（タブレット, 992px 未満）
==============================================*/
@media screen and (max-width: 991.98px) {

.tab__item a{
    font-size: 20px;
	height: 100px;
}		
	
	
	
	
	
}

/* END */
/* 小デバイス（横向きモバイル, 768px 未満）
==============================================*/
@media screen and (max-width: 767.98px) {

header .navbar-brand {
    width: 70%;
  }
header .navbar-brand .logo {
    width: 100%;
  }
header ul li a{
	font-size: 1.0rem;
}

.kaigyo p br{
	display: inline-block;
}	
	
h2,h3 {
  font-size: 1.2rem!important;
}

	
/*　jp/en　の位置 */	
.menu_start {
	padding-left: 0rem;
	padding-top: 0rem;
}	
.collapse:not(.show) {
		display: inherit;
	}	
.tab__area{
    line-height: 1.5rem!important;
}
.tab__item a{
    font-size: 17px;
	height: 100px;
}
	
	
	
	
/* スマホ画面ON */	
.box .text {
	padding: 2rem 1.5rem;
}
.box .text h2 {
	font-size: 1.5rem;
}	

.back_chara img {
	max-width: 50%;
}	
footer img {
	margin-right: 50px;
}		
footer span {
	font-size: 1.4rem;	
}	
main {
	font-size:0.8rem!important;
	text-align: justify;
	line-height: 1.5rem!important;
}
main img {
	padding: 0.5rem 0;		
}
main .back_chara img {
	padding:0;		
}	

/*picture{
	position:relative;
}*/
.inquiry span {
	font-size: 1.5rem;
}	

	
	
/*　タブのフレックス解除　*/
.nav {
	display: inherit!important;
}	
/*　タブの下線無　*/
.nav-tabs {
	border-bottom: none!important;
}	

.pcview {
	display: none;
}

	
	
.phoneview {
	display: none;
}	
.phoneview ul{
	text-align: center;
	}	
.phoneview li {
	font-size: 0.5rem;
	padding: 0 0.3rem;
}	
	
/* ナビゲーションメニュー */	
.gloval-nav {
	position: absolute;
    left: 0px;
    top: 0px;
    /*z-index: 999;*/
	height: 100vh;
}

/*　footer　	
footer .text {
	font-size:0.8rem;
    margin: 8px 0;	
}		
*/
	
/************************************
** トップページ
************************************/		

/* トップページ紹介文 */	
.introduce {
    font-size: 1rem;
    line-height: 1.5rem;
    /*text-align: justify;*/
}	
	
/* SWIPER 	*/
   .slider .slider-for{
        float: left;
        width: 79.1666%;
    }
    .slider .slider-nav-wrap{
        position: absolute;
        top: 50%;
        right: 0;
        width: 16.6666%;
        padding: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .slider .slider-nav-wrap .slider-nav .slick-list{
        padding: 0 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-track{
        left: 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-slide{
        padding: 5px 0;
    }
    .slider .slider-nav-wrap .slick-arrow{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .slider .slider-nav-wrap .slick-prev{
        top: auto;
        bottom: -1.5em;
        border-width: 18px 9px 0 9px;
        border-color: #444444 transparent transparent transparent;
    }
    .slider .slider-nav-wrap .slick-next{
        top: -1.5em;
        border-width: 0 9px 18px 9px;
        border-color: transparent transparent #444444 transparent;
    }
	.slide-img {
		background-size: cover;
		background-position: center center;
		height: 500px;
}

/************************************
** ツアー一覧
************************************/

.logomark {
    color:#FFFFFF;
    font-size: 30px;
	line-height: 35px;

}
.logomark span {
	font-size: 15px;
	line-height: 25px;
}
	
	
/* END */
/* 小デバイス（縦向きモバイル, 576px 未満）
==============================================*/
@media screen and (max-width: 575.98px) {

.tab__area .tab__list{
    line-height: 1rem!important;
}	
.tab__item a{
    font-size: 12px;
	height: 85px;
}	
.tab__inner{
    font-size: 0.8rem!important;
}	

	
	
	
	
	
}


/* END */