@charset "utf-8";

/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/

.clearfix {display: block;}

#container{
	font-family: "Noto Sans JP", sans-serif;
	font-feature-settings: "palt";
	background-color: #f4fede;
	color: #000;
}

#footer_link {
    min-width: auto;}


/*-----------------------------------------------------*/
/* 改行
/*-----------------------------------------------------*/

.br880 {
	display: block;
}

@media screen and (max-width:880px) {

	.br880 {
		display: none;
	}

} 

/*-----------------------------------------------------*/
/* アニメーション
/*-----------------------------------------------------*/

/* illust_1は位置がずれないように動かさない */
.illust_1 {
  animation: none;
}

/* ゆっくり上下 */
.illust_3,
.illust_4 {
  animation: float-small 4s ease-in-out infinite;
}

/* 上下＋少し傾く */
.illust_2,
.illust_6 {
  animation: sway-small 5s ease-in-out infinite;
}

/* 車はGSAPで動かす */
.illust_5 {
  animation: none;
}

/* タイミングをずらす */
.illust_3 {
  animation-delay: -2s;
}

.illust_4 {
  animation-delay: -1s;
}

.illust_6 {
  animation-delay: -2.5s;
}

@keyframes float-small {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes sway-small {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-5px) rotate(1.5deg);
  }
}

@media (max-width: 640px) {
	.illust_2,
	.illust_3,
	.illust_4,
	.illust_6 {
		animation: none;
	}
}

/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/

.mainvisual {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 794;
  overflow: hidden;
  background-image: url(images/mv_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}

.mainvisual img {
  height: auto;
}

/* ==============================
   上部mv全体
============================== */

.mv_lead {
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 5;
  width: fit-content;
  transform: translateX(-50%);
}

.mv_lead p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 2vw, 36px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 2px 5px rgba(54, 114, 224, 0.25);
  opacity: 0;
  transform: translateX(-30px);
  clip-path: inset(0 100% 0 0);
  animation: leadTextIn 0.6s ease-out 0.25s both;
}

/* mv装飾イラスト共通 */

.mv_illust_1,
.mv_illust_2 {
  position: absolute;
  z-index: 3;
  display: block;
  width: clamp(60px, 10vw, 190px);
  opacity: 0;
}

/* pの左上のイラスト */

.mv_illust_1 {
  right: 95%;
  top: -95%;
  animation: leadIn 0.3s ease-out 0.3s both;
}

/* pの右下のイラスト */

.mv_illust_2 {
  left: 80%;
  top: 55%;
  animation: leadIn 0.5s ease-out 0.4s both;
}

/* ==============================
   メインタイトル全体
============================== */

.mv_title {
  position: absolute;
  right: -3%;
  bottom: 10%;
  z-index: 3;
  width: min(42vw, 700px);
  aspect-ratio: 700 / 500;
}

/* タイトル画像共通 */

.mv_title img {
  position: absolute;
  height: auto;
  opacity: 0;
  transform: scale(0.7);
  animation-name: titlePopIn;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  animation-delay: var(--delay);
  animation-fill-mode: both;
}

/* 後ろの茨城県 */

.mv_title .ibaraki {
  animation-name: bgPopIn;
  animation-duration: 0.45s;
  width: 82%;
  right: 12%;
  bottom: -12%;
  z-index: 1;
  --delay: 1.0s;
}

/* 「冬ゴルフは」 */

.title_1 {
  width: 38%;
  top: 14%;
  left: 4%;
  z-index: 3;
  --delay: 1.4s;
}

/* 「茨城」 */

.title_2 {
  width: 52%;
  top: 30%;
  left: 8%;
  z-index: 2;
  --delay: 1.8s;
}

/* 「まで」 */

.title_3 {
  width: 24%;
  top: 32%;
  left: 60%;
  z-index: 2;
  --delay: 2.1s;
}

/* 「ひとっ飛び」 */

.title_4 {
  width: 76%;
  top: 67%;
  left: 9%;
  z-index: 2;
  --delay: 2.5s;
}

/* ==============================
   上部タイトルアニメーション
============================== */

@keyframes leadIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes leadTextIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}



/* ==============================
   ポンッと表示するタイトルアニメーション
============================== */

@keyframes titlePopIn {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  65% {
    opacity: 1;
    transform: scale(1.08);
  }

  85% {
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes bgPopIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }

  65% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==============================
   文章が左から流れるアニメーション
============================== */

@keyframes textFlowIn {
  0% {
    opacity: 0;
    transform: translateX(-30px);
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

/* ==============================
   PC・SP切り替え
   すでに共通CSSにある場合は不要
============================== */

@media screen and (max-width: 640px) {

  .mainvisual {
    aspect-ratio: auto;
    background-image: none;
  }

  .mainvisual > .sp {
    width: 100%;
  }
}

/* ==============================
   アニメーション軽減設定
============================== */

@media (prefers-reduced-motion: reduce) {
  .mv_illust_1,
  .mv_illust_2,
  .mv_lead p,
  .mv_title img {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
  }
}

/*-----------------------------------------------------*/
/* h3 スタイル
/*-----------------------------------------------------*/

h3 {
	font-size: clamp(1.85rem, 1.65rem + 0.82vw, 2.8rem);
	margin: 0 0 0.7em;
	line-height: 1.4;
	letter-spacing: 0.2rem;
}

h3 span {
	display: block;
	width: fit-content;
	margin: 10px auto 50px;
	font-size: 0.6em;
	background-color: #86b1e2;
	color: #fff;
	font-family: "sunbeat", sans-serif;
	letter-spacing: 0.2rem;
	padding: 0.15rem 1.5rem;
	font-weight: lighter;
	border-radius: 9999px;
}

@media screen and (max-width:880px) {

	h3 span {
    	margin-bottom: 25px;
	}

} 

/*-----------------------------------------------------*/
/* リード文
/*-----------------------------------------------------*/

.design_clip {
	width: 100%;
    overflow-x: clip;
}

h2 {
	font-weight: bold;
	text-align: left;
	letter-spacing: 0.15rem;
	line-height: 1.4;
	font-size: clamp(1.65rem, 1.35rem + 1.4vw, 3.6rem);
}

h2 span {
	font-size: clamp(1.25rem, 1rem + 1vw, 2.8rem);
}

.lead{
	max-width: 1000px;
	width: calc(100% - 100px);
	margin: 0 auto;
	position: relative;
	padding-block: 6vw 12vw;
}

.lead_wrapper {
	position: relative;
	z-index: 2;
}

.map_wrapper {
	max-width: 920px;
	width: 70%;
	position: absolute;
	top: 80px;
	right: -3vw;
	z-index: 1;
}

.map {
	display: block;
	width: 100%;
	height: auto;
}

.map_pc {
  display: block;
}

.map_sp {
  display: none;
}

.airplane_animation {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.lead .text {
	font-size: clamp(1rem, calc(0.9107rem + 0.4464vw), 1.25rem);
	margin: 2rem auto;
	line-height: 1.9;
	text-align: left;
	letter-spacing: 0.05rem;
	font-weight: 400;
}

.lead .text:last-child {
	font-weight: 700;
}

.heading_wrapper {
    position: relative;
    width: fit-content;
}

.illust_1 {
    position: absolute;
    width: max(55px, 4.5vw);
    right: clamp(-100px, -8vw, -80px);
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width:1024px) {

	.lead {
		padding-bottom: 15vw;
	}

	.map_wrapper {
		right: -4%;
	}

	.map_wrapper {
		width: 70vw;
		right: -10vw;
	}

} 

@media screen and (max-width:880px) {

	.lead .text {
    	width: clamp(400px, calc(-80px + 75vw), 580px);
		line-height: 1.8;
		text-align: justify;
		margin-inline: 0;
	}

} 

@media screen and (max-width:640px) {

	.map_pc {
		display: none;
	}

	.map_sp {
		display: block;
	}

	.airplane_animation {
		display: none;
	}

	.lead {
		width: calc(100% - 50px);
		padding-bottom: 18vw;
	}

	.heading_wrapper {
        width: fit-content;
        margin-inline: auto;
    }
	
	h2 {
		text-align: center;
		letter-spacing: 0.1rem;
	}

	.illust_1 {
		width: max(40px, 8vw);
		left: -22px;
		right: auto;
		top: -7px;
		transform: scaleX(-1) rotate(25deg);
	}

	.lead .text {
		width: 100%;
		line-height: 1.7;
		margin-block: 1.5rem;
		letter-spacing: 0;
	}

	.lead .text:nth-of-type(2),.lead .text:nth-of-type(3) {
		width: 75%;
	}

    .map_wrapper {
		width: 85%;
		right: -12vw;
		top: 190px;
	}

} 

@media screen and (max-width:540px) {


    .map_wrapper {
		top: 240px;
		width: 100%;
		right: -16vw;
	}

} 

@media screen and (max-width:500px) {
	.lead .text:nth-of-type(2),.lead .text:nth-of-type(3) {
		width: 70%;
	}

} 

/*-----------------------------------------------------*/
/* プランの特徴 エリア*/
/*-----------------------------------------------------*/

.plan {
	background-color: #fff;
	border-radius: 60px;
	padding: 5rem 2rem;
	max-width: 1500px;
	width: calc(100% - 100px);
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	box-shadow: 0 0 20px 10px rgba(182, 212, 117, 0.5);
	z-index: 10;
}

.introduction {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	gap: 15px;
}

.introduction li {
	background-color: #ecf5d7;
	padding: 1rem ;
	border-radius: 20px;
	-ms-flex:0 1 auto;
	flex: 1 1 calc((100% - 45px) / 4);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

h4 {
	 font-size: clamp(2rem, 2.2vw, 2.3rem);
	font-family: "sunbeat", sans-serif;
	color: #86b1e2;
	letter-spacing: 0.25rem;
}

h4 span {
	font-size: clamp(3.1rem, 3.4vw, 3.5rem);
	font-weight: lighter;
	padding-left: 0.25rem;
}

.introduction p {
	font-size: clamp(17.5px, 1.5vw, 19.5px);
	line-height: 1.7;
	flex: 1;
}

.introduction img {
	width: 100%;
}

.plan .illust {
	position: absolute;
	display: block;
	height: auto;
	z-index: 20;
	pointer-events: none;
}

.tape_pc {
	width: clamp(90px, 25vw, 300px);
	position: absolute;
	top: -3vw;
	left: 50%;
  	transform: translateX(-50%);
	/* filter: saturate(1.3) contrast(1.3) brightness(0.95); */
}

.illust_2 {
	width: clamp(100px, 20vw, 220px);
	height: auto;
	top: -8vw;
	left: 7%;
}

.illust_3 {
	width: clamp(25px, 4.5vw, 50px);
	height: auto;
	top: -6vw;
	right: 15%;
}


@media (max-width: 1100px) {

  	.introduction li {
    	flex-basis: calc((100% - 20px) / 2);
  	}

}

@media screen and (max-width:640px) {

	.plan {
		width: calc(100% - 50px);
		padding: 3rem 1.25rem;
	}

	.introduction {
		width: auto;
	}

	.introduction li {
    	flex-basis: 100%;
		padding-inline: 0.5rem;
 	}

	.tape_pc {
		width: clamp(90px, 25vw, 150px);
		transform: translateX(-50%) rotate(-10deg);
	}

} 

@media (max-width: 500px) {

	.illust_2 {
		left: 3%;
		top: -60px;
	}

	.illust_3 {
		top: -50px;
	}

	.tape_pc {
		transform: translateX(-50%) rotate(-20deg);
	}

}

/*-----------------------------------------------------*/
/* 対象ゴルフ場 エリア*/
/*-----------------------------------------------------*/

.course {
	width: 100%;
	background-image: url(images/course_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
	padding: 2em 0 2em;
	box-sizing: border-box;
	margin-top: -3rem;
	position: relative;
}

.course_inner {
	max-width: 1200px;
	width: calc(100% - 100px);
	margin: 0 auto;
	padding-top: 21rem;
} 

.course_grand{
	display: flex;
	margin: 0 auto;
	margin-bottom: 50px;
	gap: 30px;
}

.course_grand img {
	width: 100%;
	box-shadow: 3px 3px 8px 3px rgba(166, 196, 103, 0.5);
}

.course_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 0 auto;
}

.course_grid div {
	min-width: 0;
	margin-bottom: 1rem;
}

.course_grid img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 3px 3px 8px 3px rgba(166, 196, 103, 0.5);
}

.course_grid img:hover,.course_grand img:hover{
	transform: translateY(-5px);
	transition-duration: 0.5s;
}

.course_grid p,.course_grand p {
	margin-top: 0.8rem;
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: 500;
	letter-spacing: 0.05rem;
}

.course .illust {
	position: absolute;
	display: block;
	height: auto;
	z-index: 50;
	pointer-events: none;
}

.illust_4 {
	width: clamp(80px, 13vw, 180px);
	height: auto;
	top: 200px;
	left: 15%;
}

.illust_5 {
	width: clamp(80px, 13vw, 160px);
	height: auto;
	top: 220px;
	right: 10%;
	animation: none;
}

.illust_6 {
	width: clamp(160px, 15vw, 300px);
	height: auto;
	bottom: 5vw;
	right: 7vw;
}

@media (max-width: 1100px) {

	.course {
		background-size: 1700px auto;
	}

	.course_inner {
		padding-top: 21rem;
	}

}

@media (max-width: 640px) {

	h3 {
		letter-spacing: 0.1rem;
	}

	.course {
		background-size: 1050px auto;
		margin-top: 1rem;
	}

	.course_grand {
		display: block;
	}

	.course_grand div:first-child {
		margin: 30px 0;
	}

	.course_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.course_inner {
		width: calc(100% - 50px);
		padding-top: 11rem;
	}

	.illust_4 {
		top: 100px;
	}

	.illust_5 {
		top: -50px;
    	right: 25vw;
		transform: translateX(-50%) rotate(-16deg);
	}
	
}

@media (max-width: 500px) {

	.illust_5 {
		top: -50px;
    	right: 15vw;
		transform: translateX(-50%) rotate(-16deg);
	}

	.course_grid {
		gap: 10px;
	}

}

/*-----------------------------------------------------*/
/* text-area スタイル
/*-----------------------------------------------------*/

.text-area {
	background-color: #fff;
	padding: 50px;
	font-size: clamp(0.875rem, 1vw, 1rem);
    margin: 0 auto;
}

.text-area p {
	line-height: 1.7;
}

#footer {
	margin-top: 0;
}

@media (max-width: 640px) {

	.text-area {
		padding-inline: 20px;
	}

}

/*-----------------------------------------------------*/
/* ボタン スタイル
/*-----------------------------------------------------*/
ul.btn-area a {
	color: #fff;
	text-decoration: none;
	transition:.5s all;
	display: inline-block;
	margin: 2rem auto;
	padding: 1rem 4rem;
	position: relative;
	font-weight: 600;
	font-size: clamp(1rem, 1.2vw, 1.25rem);
	line-height: 1.6;
	box-sizing: border-box;
}

ul.btn-area li.btn a {
	background-color: #15ace4;
	border-radius: 20em;
}
ul.btn-area li.btn_bk a {
	width: 10em;
	background-color: #8e8e8e;
	border-radius: 20em;
}
ul.btn-area li.btn a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .7em;
    height: .7em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 1.3em;
}

/*　終了対応　*/
.end_text {
    display: block;
    font-size: 40px;
    background-color: #e2e2e2;
    padding: 0.3em 0;
    margin: 0.2em auto 0.8em;
    text-align: center;
	font-weight: bold;
	font-family: "游ゴシック", "Yu Gothic";
}


@media (max-width: 640px) {

	ul.btn-area a {
		padding-inline: 3rem;
	}

	.end_text {
		display: block;
		font-size: 30px;
	}

}


/*-----------------------------------------------------*/
/* ページ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(300px);
	}
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}