@charset "UTF-8";
/*
@media screen and (max-width: 769px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 768px) and (max-width: 1240px){
}*/


/*
html:lang(en)

【英語】en
【繁体字】zh-TW
【簡体字】zh-CN
【韓国語】ko

*/


/*-----------------------------------------------------*/
/*------------------------変数--------------------------*/
/*-----------------------------------------------------*/
/*例 font-family: var(--font-gothic);*/
:root {
  /*フォント*/
  --font-gothic: "Noto Sans JP", sans-serif;
  --font-en: "Barlow", sans-serif;
--font-gothic-en: "Barlow", "Noto Sans JP", sans-serif;/* 日本語 */
--font-lang-en: "Barlow", sans-serif;/* 英語 */
--font-lang-zh-TW: "PingFang TC","Arial","Microsoft JhengHei",sans-serif;/* 繁体字 */
--font-lang-zh-CN: "PingFang SC","Arial","Microsoft YaHei",sans-serif;/* 簡体字 */
--font-lang-ko: "Noto Sans KR", sans-serif;/* 韓国語 */



  /*カラー*/
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #4c4c4c;
  --color-gray-light: #929292;
  --color-gray-verythin: #f1f1f1;
  --color-group: #ed745b;
  --color-ski: #298da9;
  --color-golf: #6ebe9c;
  --color-hotel: #b06f79;
  --color-winkel: #588650;
  --color-gar: #e2ab4c;
  --color-retreat: #6b929b;
  --color-seseragi: #c8834f;
  --color-hanaya: #a13535;
  --color-red: #c81700;


  /*フォントサイズ*/
  --s10: calc(10 / 16 * 1rem);
  --s12: calc(12 / 16 * 1rem);
  --s14: calc(14 / 16 * 1rem);
  --s15: calc(15 / 16 * 1rem);
  --s16: calc(16 / 16 * 1rem);
  --s17: calc(17 / 16 * 1rem);
  --s18: calc(18 / 16 * 1rem);
  --s19: calc(19 / 16 * 1rem);
  --s20: calc(20 / 16 * 1rem);
  --s21: calc(21 / 16 * 1rem);
  --s22: calc(22 / 16 * 1rem);
  --s23: calc(23 / 16 * 1rem);
  --s24: calc(24 / 16 * 1rem);
  --s25: calc(25 / 16 * 1rem);
  --s26: calc(26 / 16 * 1rem);
  --s27: calc(27 / 16 * 1rem);
  --s28: calc(28 / 16 * 1rem);
  --s29: calc(29 / 16 * 1rem);
  --s30: calc(30 / 16 * 1rem);
  --s31: calc(31 / 16 * 1rem);
  --s32: calc(32 / 16 * 1rem);
  --s33: calc(33 / 16 * 1rem);
  --s34: calc(34 / 16 * 1rem);
  --s35: calc(35 / 16 * 1rem);
  --s36: calc(36 / 16 * 1rem);
  --s37: calc(37 / 16 * 1rem);
  --s38: calc(38 / 16 * 1rem);
  --s39: calc(39 / 16 * 1rem);
  --s40: calc(40 / 16 * 1rem);
  --s41: calc(41 / 16 * 1rem);
  --s42: calc(42 / 16 * 1rem);
  --s43: calc(43 / 16 * 1rem);
  --s44: calc(44 / 16 * 1rem);
  --s45: calc(45 / 16 * 1rem);
  --s46: calc(46 / 16 * 1rem);
  --s47: calc(47 / 16 * 1rem);
  --s48: calc(48 / 16 * 1rem);
  --s49: calc(49 / 16 * 1rem);
  --s50: calc(50 / 16 * 1rem);
  --s51: calc(51 / 16 * 1rem);
  --s52: calc(52 / 16 * 1rem);
  --s53: calc(53 / 16 * 1rem);
  --s54: calc(54 / 16 * 1rem);
  --s55: calc(55 / 16 * 1rem);
  --s56: calc(56 / 16 * 1rem);
  --s57: calc(57 / 16 * 1rem);
  --s58: calc(58 / 16 * 1rem);
  --s59: calc(59 / 16 * 1rem);
  --s60: calc(60 / 16 * 1rem);
  --s90: calc(90 / 16 * 1rem);
--s100: calc(100 / 16 * 1rem);
--s120: calc(120 / 16 * 1rem);
}




/*-----------------------------------------------------*/
/*-------------------ベース・リセット---------------------*/
/*-----------------------------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

html {
  font-size: 16px;
  font-weight: 300;
/* ヘッダーのアンカーズレ調整
scroll-padding-top: calc((var(--headerHeight, 40px)) + 10px);*/
}

body {
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  /* Safari*/
  text-size-adjust: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  font-family:var(--font-gothic-en);
/* anime */
	animation: bgcolor 100s infinite;
}
@keyframes bgcolor{
0% {background-color:var(--color-group);}
10% {background-color:var(--color-gar);}
20% {background-color:var(--color-seseragi);}
30% {background-color:var(--color-hanaya);}
40% {background-color:var(--color-hotel);}
50% {background-color:var(--color-retreat);}
60% {background-color:var(--color-ski);}
70% {background-color:var(--color-winkel);}
80% {background-color:var(--color-golf);}
90% {background-color:var(--color-gar);}
100% {background-color:var(--color-group);}/* 最後は最初 */
}
/*各国のフォント*/
html:lang(en) body{font-family:var(--font-lang-en);}
html:lang(zh-TW) body{font-family:var(--font-lang-zh-TW);}
html:lang(zh-CN) body{font-family:var(--font-lang-zh-CN);}
html:lang(ko) body{font-family:var(--font-lang-ko);}








/*テクスト選択反転カラー*/
::selection {
  color: var(--color-black);
  background: #ffff00;
}

/*Firefox*/
::-moz-selection {
  color: var(--color-black);
  background: #ffff00;
}

:where(:any-link, button, [type="button"], [type="reset"], [type="submit"], label[for], select, summary, [role="tab"], [role="button"]) {
  cursor: pointer;
}

sub,
sup {
  font-size: 0.6rem;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/*下付き*/
sub {
  bottom: 0;
}

/*上付き*/
sup {
  top: -0.25rem;
}
/*イタリック*/
.italic {
font-style: italic;
}

hr {
  height: 1px;
  background-color: var(--color-black);
  border: none;
  color: var(--color-black);
  margin: 10px 0;
}

a {
  text-decoration: none;
  cursor: pointer;
color: var(--color-black);
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

/* 画像 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  max-width: 100%;
  height: auto;
  border-style: none;
  image-rendering: -webkit-optimize-contrast;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: none;
  outline: 0;
}

input[type="submit"],
input[type="button"] {
  cursor: pointer;
  outline: none;
  border: none;
}

input,
input[type="text"],
button,
textarea,
select {
  font-size: 1rem;
  font: inherit;
}

/*-----------------------------------------------------*/
/*---------------------- フッター ----------------------*/
/*-----------------------------------------------------*/
/*下部に固定*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}



/*-----------------------------------------------------*/
/*------------------------flex-------------------------*/
/*-----------------------------------------------------*/

/*自動隙間　横並び　行替え　左寄せ*/
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /*折り返しても*/
}

.flex-between {
  justify-content: space-between;
}

.flex-left {
  justify-content: flex-start;
}

.flex-right {
  justify-content: flex-end;
}

.flex-center {
  justify-content: center;
}

/*-----------------------------------------------------*/
/*------------------------ 本文 -----------------------*/
/*-----------------------------------------------------*/

.txt {
  font-size: var(--s16);
  font-weight: 300;
  line-height: var(--s28);
}
html:lang(en) .txt{font-size: var(--s16); line-height: var(--s24);}




/*-----------------------------------------------------*/
/*---------------------- 小さい文字 ---------------------*/
/*-----------------------------------------------------*/

small {
  font-size: var(--s12);
  display: inline-block;
}

/*-----------------------------------------------------*/
/*---------------------- タイトル -----------------------*/
/*-----------------------------------------------------*/

/* 見出し */
h4.title01{
font-size: var(--s36);
line-height: var(--s54);
font-weight: 400;
margin-bottom: 15px;
padding-left: 20px;
position: relative;
opacity: 0;
transition: 0.5s ease-out;
}
h4.title01::before{
content: "";
position: absolute;
left: 0;
height: 0;
width: 2px;
background-color: var(--color-black);
transition:all 0.9s cubic-bezier(0, 0, 0.1, 1);
}
h4.title01.active{opacity: 1;}
h4.title01.active::before{
height: 100%;
}
@media screen and (max-width: 1100px) {
h4.title01{
font-size: var(--s29);
line-height: var(--s42);
}
}
@media screen and (max-width: 769px) {
h4.title01{
font-size: var(--s24);
line-height: var(--s34);
}
}
html:lang(en) h4.title01{font-size: var(--s32); line-height: var(--s44);}
html:lang(zh-TW) h4.title01{font-size: var(--s32); line-height: var(--s46);}
html:lang(zh-CN) h4.title01{font-size: var(--s32); line-height: var(--s46);}
html:lang(ko) h4.title01{font-size: var(--s30); line-height: var(--s44);}
@media screen and (max-width: 769px) {
html:lang(en) h4.title01{font-size: var(--s22); line-height: var(--s32);}
html:lang(zh-TW) h4.title01{font-size: var(--s22); line-height: var(--s32);}
html:lang(zh-CN) h4.title01{font-size: var(--s22); line-height: var(--s32);}
html:lang(ko) h4.title01{font-size: var(--s22); line-height: var(--s32);}
}





/* 項目タイトル */
h3.title02{
color: var(--color-white);
font-family: var(--font-en);
font-size: 10vw;
margin-left: 5vw;
font-weight: 200;
letter-spacing: -0.5vw;
}
@media screen and (max-width: 769px) {
h3.title02{
font-size: 12vw;
margin-left: 2vw;
}
}
html:lang(zh-TW) h3.title02{font-size: 9vw;}
html:lang(zh-CN) h3.title02{font-size: 9vw;}




/* ページタイトル */
.page_title{
position: relative;
width: 100%;
height: 300px;
background-size: cover;
margin: 55px 0 min(5vw,80px) 0;
}
.page_title .page_title_title{
position: absolute;
left:5vw;
top:240px;
color: var(--color-white);
z-index: 40;
font-weight: 200;
text-align: left;
font-size: min(10vw,9rem);
line-height: min(90%,9vw);
letter-spacing: -0.4vw;
}
.page_title .page_title_title .page_title-ja{
display: inline-block;
font-size: min(2vw,2rem);
letter-spacing: 0;
margin-left: 10px;
}
.page_title .page_title_title .page_title-en{display: inline-block;}

/* 半角スペース */
.page_title .page_title_title .space01,
.page_title .page_title_title .space02{display: inline-block; float: left;}
.page_title .page_title_title .space02{margin-left: 0.8vw; padding-left: 0.8vw;}

html:lang(en) .page_title .page_title_title .page_title-ja,
html:lang(ko) .page_title .page_title_title .page_title-ja{
display: none;
}
html:lang(zh-TW) .page_title .page_title_title .page_title-en,
html:lang(zh-CN) .page_title .page_title_title .page_title-en{
display: none;
}
html:lang(zh-TW) .page_title .page_title_title .page_title-ja,
html:lang(zh-CN) .page_title .page_title_title .page_title-ja{
font-size: min(8vw,7rem);
line-height: min(70%,7vw);
}





@media screen and (max-width: 1100px) {
.page_title{
margin: 0 0 min(2vw,30px) 0;
height: 270px;
}
.page_title .page_title_title{
top:210px;
}
}
@media screen and (max-width: 768px) {
.page_title{
margin: 0 0 4vw 0;
height: 170px;
}
.page_title .page_title_title{
font-size: 9vw;
top:140px;
}
.page_title .page_title_title .page_title-ja{
font-size: var(--s14);
}
}






/*-----------------------------------------------------*/
/*------------------------ボタン-------------------------*/
/*-----------------------------------------------------*/

/* 黒ベタ */
.bt01{
display: inline-block;
background-color: var(--color-black);
color: var(--color-white);
padding: 5px 40px 7px 40px;
border-radius: 50px;
line-height: 150%;
text-align: center;
transition: 0.3s ease-in-out;
}
.bt01:hover{
background-color: var(--color-gray);
}
/* 外部サイト */
.bt01.blank::after{
content:"";
display:inline-block;
background-image: url(../img/bt_icon_blank.svg);
background-size:contain;
width: 10px;
height: 10px;
margin-left: 5px;
}
/* pdf */
.bt01.pdf::after{
content:"";
display:inline-block;
background-image: url(../img/bt_icon_pdf.svg);
background-size:contain;
width: 13px;
height: 13px;
margin-left: 5px;
}
/* instagram */
.bt01.instagram::after{
content:"";
display:inline-block;
background-image: url(../img/icon_instagram.svg);
background-size:contain;
width: 13px;
height: 13px;
margin-left: 5px;
margin-bottom: -2px;
}
/* tel */
.bt01.tel::after{
content:"";
display:inline-block;
background-image: url(../img/icon_tel.svg);
background-size:contain;
width: 15px;
height: 15px;
margin-left: 5px;
margin-bottom: -2px;
}




/* 白線 白文字 */
.bt02{
display: inline-block;
border: 1px solid var(--color-white);
text-align: center;
color: var(--color-white);
padding: 25px 100px;
position: relative;
}
.bt02::after{
transition: 0.2s ease-out;
content: "";
display: block;
background-image: url(../img/icon_arrow_down-right.svg);
background-position: center;
background-size: cover;
width: 35px;
height:35px;
position: absolute;
bottom: 7px;
right: 7px;
}
.bt02:hover:after{
width: 20px;
height:20px;
}
@media screen and (max-width: 768px) {
.bt02{padding: 20px 60px;}
.bt02::after{
width: 25px;
height:25px;
}
.bt02:hover:after{
width: 20px;
height:20px;
}
}










/*-----------------------------------------------------*/
/*----------------- テーブル -----------------------*/
/*-----------------------------------------------------*/

/*基本テーブル */
.table01 {
display: inline-block;
margin-top: 30px;
border-collapse:collapse;/* 線を重ねる */
vertical-align:top;/*文字の垂直そろえを上揃えに*/
}
.table01 th {
padding:7px 10px;
border-bottom: 1px solid;
font-weight:normal;
text-align: left;
white-space: nowrap;
text-align:justify;
text-align-last:justify;
}
.table01 td {
padding:7px 10px;
border-bottom: 1px solid;
text-align:left;
}

html:lang(en) .table01 th,
html:lang(zh-TW) .table01 th,
html:lang(zh-CN) .table01 th,
html:lang(ko) .table01 th{
text-align:left;
text-align-last:left;
}










/*-----------------------------------------------------*/
/*---------------------BOX---------------------*/
/*-----------------------------------------------------*/







/*-----------------------------------------------------*/
/*--------------------アコーディオン-------------------*/
/*-----------------------------------------------------*/



/*-----------------------------------------------------*/
/*----------------- 言語選択ボタン -----------------------*/
/*-----------------------------------------------------*/



/*-----------------------------------------------------*/
/*----------------------- リスト ------------------------*/
/*-----------------------------------------------------*/

/* まる */
.list_maru {
  display: inline-block;
margin-left: 1rem;
}
.list_maru li{
  margin-bottom: 3px;
  font-size: var(--s16);
  line-height: var(--s26);
list-style:disc;
}


/*数字 */
.list_number {
  list-style: decimal;
  margin-left: 2rem;
}
.list_number li {
  margin-bottom: 3px;
  font-size: var(--s16);
  line-height: var(--s26);
}

/*アルファベット */
.list_alphabet {
  list-style: upper-alpha;
  margin-left: 1rem;
}
.list_alphabet li {
  margin-bottom: 3px;
  font-size: var(--s16);
  line-height: var(--s26);
}

/*こめじるし */
.list_kome {
  display: inline-block;
  padding-left: 0.3rem;
  text-indent: -0.3rem;
  margin-left: 0.3rem;
}

.list_kome li {
  margin-bottom: 3px;
  font-size: var(--s12);
  line-height: var(--s21);
}

.list_kome li::before {
  content: "※";
  display: inline-block;
}

/*-----------------------------------------------------*/
/*--------------------+-アイコン------------------------*/
/*-----------------------------------------------------*/
.change_icon {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.change_icon::before,
.change_icon::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14px;
  height: 1px;
  background: var(--color-green-dark);
  transition: transform 0.3s;
  will-change: transform;
}

.change_icon::before {
  transform: rotate(90deg);
}

/* メニュー展開後の「-」にする　それぞれに追加 */
.ac-box.active .ac-title .change_icon::before,
.drop-menu-ski.active .change_icon::before,
.drop-menu-summer.active .change_icon::before {
  transform: rotate(180deg);
  animation: close 0.3s ease;
}

/*safariのみアニメーション対策*/
@keyframes close {
  0% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(180deg);
  }
}