@charset "utf-8";
/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/

#container{
    width:100%;
    margin:0 auto;
	text-align: center;
}

.sp {
    display:none;
}

.inner{
	width: 100%;
	margin: 0 auto;
}

.advantagebox{
	width: 80%;
}
#breadcrumb{
	width: 980px;
	margin: 15px auto;
    text-align: center;
}

#snsBox ul li{padding-top:2px;}

#footer_link {
    min-width: auto;}

#container{font-family: "a-otf-ryumin-pr6n", serif;
font-weight: 400;
font-style: normal;}

.section {
    background-image: url(images/back_img1.png);
	background-size: contain;
	background-repeat: repeat;
	padding-bottom: 200px;
}

@media (max-width: 640px) {
	.section {background-image: none;}
    .sp_back{background-image: url(images/back_img2.png); background-size: contain;}
	.sp_back2{background-image: url(images/back_img3.png); padding-bottom: 150px;}
	.section {padding-bottom: 0px;}
}

#footer {
    margin-top: 0px;
}

.mb30 {
    margin-bottom: 0px!important;
}

.fade-in{
    opacity: 1;
    visibility: inherit;
}
/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/

.mainvisual{
	background:url(images/bg_mainvisual.jpg) no-repeat;
	padding: 0;
	margin: 0 auto;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
}

.mainvisual h1{
	width: 980px;
	margin: 0 auto;
	padding: 25px 0;
	text-align: center;
}

.mv_lead{
	padding: 100px 0 30px 0;
    text-align: center;
	font-size: clamp(26px, 1.8vw, 34px);
	font-weight: 800;
	color: #006b8a;
}

.mv_lead2{
	font-size: 2em;
	color: #313131;
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: 150px;
	font-size: clamp(20px, 1.4vw, 30px);
	padding: 0% 5%;
}

.mt30 {
     margin-top: 0 !important; 
}

.br_980,.br_470{display: none;}
.br_670_none{display: block;}
@media (max-width: 980px) {.br_980{display: block;}}
@media (max-width: 670px) {.br_670_none{display: none;}}
@media (max-width: 460px) {.br_980{display: none;}}
@media (max-width: 470px) {.br_470{display: block;}}

h2 {
	font-size: clamp(25px, 2vw, 35px);
	font-weight: bold;
	color: #006a89;
	padding: 0% 3%;
}

h2 img{
	display: block;
	margin: 0 auto;
	padding: 30px 0px;
	max-width:100%;
}

@media (max-width: 640px) {.h2_2{padding-top: 50px;} .mv_lead2{margin-bottom: 100px;}}

@media (max-width: 470px) {
	h2 img{padding: 20px 0px;} 
	h2 {font-size: 7vw;}
}


/*h2.h2_1 , h2.h2_2{
	position: relative;
}*/

/*.back_img1{
	position: absolute;
	left: 0;
	top: -150px;
	width: 20vw;
}

.back_img2{
	position: absolute;
    right: 0;
    top: -100px;
    width: 20vw;
}*/

/*-----------------------------------------------------*/
/* ポイント
/*-----------------------------------------------------*/

.advantagebox {
	width: 45%;
}

.advantagebox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 30px 0;
}


.advantage {
    width: calc(100% / 2 - 30px);
    margin-bottom: 30px;
}

.adv_img{padding-right: 5%;}
.adv_img img{width: 100%; height: auto;}

.text p {
  font-size: 18px;
  color: #555;
  padding: 10px;
  text-align: left;
  width: 80%;
  margin: 0 auto;
}

.advantagebox {
	max-width: 1500px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 50px 0px 100px 0px;
}

.advantage {
	width: calc(100% / 3 - 30px);
	text-align: center;
}

@media (max-width: 1100px) { .advantage {width: calc(100% / 2 - 30px);}}

.advantage img {
	max-width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 1100px) { .advantage img {max-width: 100%;}}

.text-wrapper {
	max-width: 430px;
    margin: 5% 0px 0px 22%;
    font-size: 14px;
    line-height: 1.7;
	text-align: left;
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: 800;
	color: #313131;
}

.p-gc-lists__list a:hover {
  opacity: 0.7;
}

@media (max-width: 850px) {.advantagebox {width: 100%;}}

@media (max-width: 640px) {
	.advantagebox {flex-direction: column; align-items: center; gap: 0px; padding: 20px 0px;}

	.advantage {width:90%;}
}

@media (max-width: 400px) {.advantage {width:100%;}.advantagebox {width: 95%;}}

/* ページTOPへ戻るボタン */
#pagetop_btn {width: 100%;box-sizing: border-box;overflow: hidden;}
#pagetop {position: fixed;z-index: 20;opacity: 0;transform: translateX(100px);display: block;cursor: pointer;right: 1%;bottom: 2%;font-size:0.9vw;}
#pagetop a{display: inline-block;transition:all 0.3s;color: #fff;width: 60px;height:60px;box-sizing:border-box;text-decoration: none;position:relative;text-align: center;background-color:#555555;border-radius: 4px;}
#pagetop a span{position: absolute;top: 43%;left: 50%;width: 32%;height: 32%;margin-left: -15%;border-left: 2px solid #fff;border-bottom: 2px solid #fff;-webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;opacity: 0;box-sizing: border-box;}
#pagetop a:hover {text-decoration: none;background: #929292;}
/*　左の動き　*/
#pagetop.LeftMove{animation: LeftAnime 0.5s forwards;}
  @keyframes LeftAnime{from {opacity: 0;transform: translateX(130px);}
	to {opacity: 1;transform: translateX(0);}} 
/*　右の動き　*/
#pagetop.RightMove{animation: RightAnime 0.5s forwards;}
  @keyframes RightAnime{from {opacity: 1;transform: translateX(0);}
	to {opacity: 1;transform: translateX(130px);}}
  @-webkit-keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
  @keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}

/*--------------------------------------------------------------------*/
/* コース一覧
/*--------------------------------------------------------------------*/
h2 span{font-size: clamp(20px, 1.3vw, 25px);}
.h2_2{color: #008967;}

#area_list {
    display: block;
    margin: 0 auto;
	width: 80%;
	padding: 50px 0px;
}

.area_ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	gap: 10px;
}

.area_ul li a {
    display: block;
    color: #008967;
    text-decoration: none;
    text-align: center;
    padding: clamp(20px, 1.3vw, 25px);
    font-size: clamp(25px, 1.8vw, 30px);
    position: relative;
    padding: 0.2em 1.5em 0.2em 1em;
	background: #fff;
    border: 2px solid #008967;
	font-weight: 800;
}

.area_ul li a:after {
    display: block;
    content: "";
    position: absolute;
    top: 0.6em;
    right: 0.5em;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6em .35em 0 .35em;
    border-color: #008967 transparent transparent transparent;
    transition: .3s all;
}

.area_ul li a:hover{
	color: #fff;
	background-color: #008967;
}

.area_ul li a:hover::after{
	border-color: #fff transparent transparent transparent;
}

#hokkaido, #kanto, #kansai, #kyusyu{
    padding-top: 120px;
    margin-top: -120px;
	padding-bottom: 70px;
}

h3.area_ttl {
	max-width: 1330px;
	color: #008967;
	font-size: clamp(25px, 1.8vw, 30px);
	display: flex;
    align-items: center;
    margin-top: 60px;
    position: relative;
	margin: 0 auto;
	padding-bottom: 50px;
}

.area_ttl::before, .area_ttl::after {
    content: "";
    height: 2px;
    background: #008967;
    z-index: 0;
}

.area_ttl::before {
    flex: 0 0 14%;
    margin-right: 10px;
}

.area_ttl::after {
    flex: 1;
    margin-left: 10px;
}

@media screen and (max-width: 380px) {h3.ttl_kansai{font-size: clamp(21px, 1.8vw, 30px);}}

@media screen and (max-width: 980px) {
#area_list {width: 90%; padding: 20px 0px 60px 0px;}
#footer_link { display: block!important;}

}

@media screen and (max-width: 640px) {
    .area_ttl {justify-content: center;}
	.area_ttl::before, .area_ttl::after {flex: 1; margin: 0 10px;}
	#hokkaido, #kanto, #kansai, #kyusyu{padding-top: 50px;margin-top: -50px;}
	.area_ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;}
}

.p-gc-lists.-mb-none {
    margin-bottom: 0;
}

.p-gc-lists {
	max-width: 1330px;
    /*margin-top: min(4.5vw, 30px);
	margin-bottom: min(7.5vw, 50px);*/
	margin: 0 auto;
	-o-animation-duration: 0s;
	animation-duration: 0s;
    padding-top: min(1.5vw, 10px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    justify-content: center;
	gap: min(7.5vw, 50px) min(3vw, 20px);
}

.p-gc-lists__list-btn a {
    display: block;
    text-decoration: none;
    transition: all 0.1s linear;
}

.p-gc-lists__list-btn {
    position: relative;
    text-align: left;
}

.p-gc-lists img{max-width: 100%; border-radius: 5px;}

.p-gc-lists__list-gc {
    color: #0086cd;
    margin: min(1.5vw, 5px) 0 min(1.5vw, 10px);
	font-size: clamp(21px, 1.8vw, 21px);
    line-height: 1.4;
}

.p-gc-lists__list-txt {
    margin-bottom: min(1.5vw, 10px);
    color: #313131;
    font-size: 16px;
	font-size: clamp(18px, 1.6vw, 16px);
    line-height: 1.6;
}

.p-gc-lists__list-area {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #4c8e00;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 70px;
    font-size: 16px;
    color: #fff;
    border-radius: 100%;
}

/*予約ボタン*/
@media (max-width: 1300px) {
  a.c-button-2 {
    padding: min(3vw, 20px) min(5.5vw, 50px)!important;
  }
}

@media (max-width: 955px) {
  a.c-button-2 {
    padding: min(3vw, 20px) min(1.5vw, 10px)!important;
  }
}

@media (max-width: 900px) {
  a.c-button-1 {
    padding: min(3vw, 20px) min(5.5vw, 50px)!important;
  }
}

a.c-button-1 {
  display: block;
  background: #ff8023;
  padding: min(3vw, 20px) min(1.5vw, 10px);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.1em;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  position: relative;
  transition: all 0.15s linear;
}
a.c-button-1:hover {
  background: #ff9143;
}
a.c-button-1::after {
  content: "";
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translateY(-50%) scale(1);
  transition: all 0.1s linear;
}
a.c-button-1:hover::after {
  border: 1px solid #fff;
  transform: translateY(-50%) scale(2.2);
}
a.c-button-1::before {
  opacity: 0;
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.1s linear;
}
a.c-button-1:hover::before {
  opacity: 1;
}

@media (max-width: 768px) {
  a.c-button-1 {
    padding: 2.2vw;
    font-size: 18px;
  }
  a.c-button-1:hover {
    background: #ff8023;
  }
  a.c-button-1:after {
    right: 3vw;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    transition: all 0s linear;
  }
  a.c-button-1:hover::after {
    border: 3px solid #fff;
    transform: translateY(-50%) scale(1);
  }
  a.c-button-1::before {
    display: none;
  }
}
@media (max-width: 576px) {
  a.c-button-1 {
    padding: 2.2vw 3vw 2.2vw 1vw;
    font-size: 15px;
  }
}

.p-gc-lists__list a {
    display: block;
    text-decoration: none;
    transition: all 0.1s linear;
	font-size: clamp(21px, 1.8vw, 21px);
}

.p-gc-lists__list {
    position: relative;
    text-align: left;
}

.p-gc-lists__list-catch{
	font-size: clamp(20px, 1.8vw, 18px);
	color: #313131;
	font-weight: 800;
}

.p-gc-lists__list-btn {
    padding: min(1.5vw, 10px);
}

.p-gc-lists__list-frame {
    padding: min(1.5vw, 10px);
}

.p-gc-lists__list-gc{height: 30px;}
.p-gc-lists__list-txt{height: 130px;}
@media (max-width: 1120px) {.p-gc-lists__list-txt{height: 150px;}}
@media (max-width: 1020px) {.p-gc-lists__list-txt{height: 110px;}}
@media (max-width: 910px) {.p-gc-lists__list-txt{height: 130px;}}
@media (max-width: 740px) {.p-gc-lists__list-txt{height: 150px;}}
@media (max-width: 680px) {
	.p-gc-lists__list-txt{height: auto;}
	
	.p-gc-lists__list-area {
    top: -25px;
    height: 100px;
    width: 100px;
	font-size: 20px;}
	
	.p-gc-lists {
	gap: min(9vw, 70px) min(4vw, 30px);}
	
	#hokkaido , #kanto, #kansai, #kyusyu{
	padding-bottom: 50px;}
	
	#hokkaido, #kanto, #kansai, #kyusyu{
    padding-top: 30px;
    margin-top: -30px;}
}

@media (max-width: 640px) {.p-gc-lists__list-gc{height: 0px;}}

/* カード全体を縦のflexコンテナにする */
.p-gc-lists__list {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上部と下部のスペースを自動調整 */
  height: 100%; /* 高さを揃えるために指定（親に依存） */
}

/* 内部リンクエリアもflexで伸縮に対応 */
.p-gc-lists__list > a {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* ボタン以外の部分を伸縮可能に */
}

/* テキストブロックも自然に高さをとれるように */
.p-gc-lists__list-frame {
  flex-grow: 1; /* テキスト部が可変に広がる */
  display: flex;
  flex-direction: column;
}

/* キャッチコピーと説明文のマージンなども必要に応じて調整 */
.p-gc-lists__list-catch {
  margin-bottom: 10px;
}
/*--------------------------------------------------------------------*/
/* レスポンシブル対応
/*--------------------------------------------------------------------*/

@media screen and (max-width:1400px) {
.p-gc{width: 95%; margin: 0 auto;}
}
@media screen and (max-width:1260px) {
	
	/* メインビジュアル */
	.mainvisual h1{
		width: auto;
		margin: 0 20px;
	}
	
	.inner{
		width: auto;
	}
	
	.advantagebox {
        padding: 0 10px;
    }

	#breadcrumb {
        width: 100%;
	}
}

@media screen and (max-width:960px) {
	br.lead_br1{display: none;}
}

@media screen and (max-width:640px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    #footer {
        display: none;
    }
    #breadSns {
        display: none;
    }
	
	h3{
        margin: 10px 0 40px 0 !important;
    }
	
	.mainvisual{
	padding: 0;
	margin: 0 auto;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
}
	
	.mainvisual h1{
		width: auto;
		padding: 0;
		margin:0;
	}
	
    header.common .logo {
        float: left;
        width: 275px;
    }
    header.common .navi li {
        float: right;
        padding-top: 15px;
	}

	.bnrArea {
        width: 98%;
        padding: 40px 0;
	}

	.text p {
    padding: 10px 0px 10px 10px;
	}
	
	.tab2_box{
		margin-top: 20px;
	}
	
}