@charset "utf-8";

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

.clearfix {
	display: block;
}

.sp {
	display:none;
}

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

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

ul#gnavi.menu6 li{width:15%;}

.attention{
	color:red;
	font-weight:bold;
}

.textmin{
	font-family: "Crimson Text", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

img {
	-webkit-backface-visibility: hidden;
}

.textyuu {
    font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
    font-weight: 600;
}

.l-wrapper{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;}

#footer_link {
    min-width: auto;
}


/*-----------------------------------------------------*/
/* パンくずエリアのスタイル
/*-----------------------------------------------------*/

div#breadSns{
	width:980px;
	margin:5px auto 0;
	padding:0;
	height:32px;
}

/*     パンくず
------------------------------------------*/

div#bread{
	float:left;
	margin:6px 0 0 5px;
}

div#bread p.crumbs{
	font-size:10px;
}

/*    IE用　　*/
div#bread{
	margin/*\**/: 0 0 0 5px\9;
}

/*     SNSボタン用
------------------------------------------*/

#snsBox{
/*	width:400px;*/
	float:right;
	margin: 5px 0px 0px 0;
	vertical-align: top;
}

/*    IE用　　*/
#snsBox{
	margin/*\**/: 0 0 7px 0\9;
}

#snsBox ul li{
	float: left;
	padding: 0px;
	display: inline;
}

#snsBox ul li.fb{
	margin: 0px 10px 5px 0px;
}

#snsBox ul li.fb div{
	width:110px!important;
}

#snsBox ul li.gg{
	margin: 0px 10px 5px -10px;
}

#snsBox ul li.tw{
	margin: 0px 10px 5px -10px;
}

/*-----------------------------------------------------*/
/* フォントサイズ
/*-----------------------------------------------------*/
:root {
    --fz14: calc(14 / 16 * 1rem);
    --fz15: calc(15 / 16 * 1rem);
    --fz17: calc(17 / 16 * 1rem);
	--fz19: calc(19 / 16 * 1rem);
    --fz20: calc(20 / 16 * 1rem);
    --fz23: calc(23 / 16 * 1rem);
    --fz25: calc(25 / 16 * 1rem);
    --fz30: calc(30 / 16 * 1rem);
    --fz35: calc(35 / 16 * 1rem);
    --fz40: calc(40 / 16 * 1rem);
    --fz50: calc(50 / 16 * 1rem);
    --fz60: calc(60 / 16 * 1rem);
    --fz80: calc(80 / 16 * 1rem);
}

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

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

h2.content_h2{
	width: 100%;
    margin: 0 auto;
    line-height: 1.6em;
    padding: 60px 0px;
    background-color: #134a74;
    color: #fff;
    font-size: var(--fz40);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.lead_box{position: relative;}

.lead_box::after {
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -35px;
    border: 35px solid transparent;
    border-top-color: #134a74;
    content: '';
}

/*-----------------------------------------------------*/
/* section_about
/*-----------------------------------------------------*/

/*共通*/
.section_about{
	background-color: #3e83b7;
	padding-bottom: 100px;
}

.section_1260{
	max-width: 1260px;
	margin: 0 auto;
	box-sizing: border-box;
}

h3.content_h3{
	font-size: var(--fz30);
	color: #FFF;
	padding: 100px 2%;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.about_item{
	background-color: #fff;
	border-radius: 20px;
	margin-bottom: 130px;
}

/*金額*/
.about_item_1{
	padding: 50px 20px 30px;
}

.about_item1_ex{
	font-size: var(--fz30);
	font-weight: 800;
	background-color: #134a74;
	color: #fff;
	padding: 10px 60px;
	border-radius: 50px;
	display: inline-block;
	margin-bottom: 30px;}

.about_item1_imgbox{
	margin-top: 50px;
	display: flex;
	justify-content: space-evenly;
	max-width: 90%;
	margin: 0 auto;
}

.about_item1_lead{
	font-size: var(--fz20);
	font-weight: 800;
	padding-top: 30px;
}

.about_item1_imgbox {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 40px;
	width: 100%;
	margin: 0 auto;}

.about_item1_imgbox img {
	max-width: 100%;
	height: auto;
	ex-shrink: 1;
	min-width: 0;}

.about_img_sp{
	display: none;
}

.btn_area {
	margin: 60px auto 20px;
	max-width: 980px;
	text-align: center;
	font-size: 26px;
	transition: .5s all;
}

.btn_area .booking {
	width: 90%;
	margin: 0 auto;
}

.btn_area a.btn_booking{
	background-color: #ff7700;
}

.btn_area ul li {
	padding: 20px;
	transition: .5s all;
}

.btn_area ul li .pc {
	display: inline-block;
	width: 100%;
	position: relative;
}

.btn_area ul li a {
	font-weight: bold;
	border-radius: 7px;
	color: #fff;
	border: 3px solid #fff;
	box-shadow: 5px 6px 0px -2px rgba(0, 0, 0, 0.3);
    padding: 0.5em 1.2em 0.6em 0.5em;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	transition: .5s;
	font-size: var(--fz35);
	letter-spacing: 0.1em;
}

.btn_area ul li a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: .4em;
	height: .4em;
	border-top: 3px solid #fff;
    border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background: none;
	right: 1em;
}

a.btn_booking.sp {display: none;}

/*PGMロイヤルティプログラム*/
.about_item2_ttl{
	font-size: var(--fz30);
	font-weight: 800;
	color: #fff;
	background-color: #134a74;
	border-top-left-radius: 20px;
    border-top-right-radius: 20px;
	line-height: 1.5;
	padding: 40px 60px;
	letter-spacing: 0.05em;
}

.about_item2_imgbox{padding: 30px;}
.about_item2_txt{font-size: var(--fz25); color: #134a74;}

.loyalty_flex_container {
	display: flex;
	justify-content: center;
	max-width: 90%;
	margin: 40px auto;
	align-items: stretch;
}

.loyalty_column {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10px;
}

.loyalty_column:first-child {
	border-right: 1px dashed #ccc;
}

.loyalty_image {
	min-height: 255px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.loyalty_image img {
	max-width: 100%;
	height: auto;}

.loyalty_txt {
	color: #134a74;
	font-size: var(--fz25);
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	margin-top: 0;}

.ptprogram_btn {
	font-size: var(--fz25);
	text-decoration: none;
	color: #fff;
	background-color: #134a74;
	padding: 10px 60px;
	display: inline-block;
    position: relative;
}

.ptprogram{
	margin-bottom: 50px;
	display: inline-block;
	margin: 30px 0px 80px;
	position: relative;}

.ptprogram a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .4em;
    height: .4em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 1em;
}

.ptprogram a:hover{
	color: #fff;
}


/*最安値保障とは*/
.about_item_3{
	position: relative;
    padding: 0px 20px;
}

.item3_bestrate{
	position: absolute;
    top: -100%;
    left: 35%;
    margin: auto;
    max-width: 1260px;
    right: 0;
    bottom: 0;
    left: 0;
}

.item3_ttlbox{padding-top: 130px;}

.item3_ttl{
	margin: 10px 0px 30px;
    font-size: var(--fz40);
    letter-spacing: 0.05em;
    padding: 15px 100px;
    border: solid 5px #134a74;
    display: inline-block;
    border-radius: 50px;
    color: #134a74;
}

.item3_txt{
	font-size: var(--fz25);
    color: #134a74;
    line-height: 1.4;
    margin-bottom: 50px;
}

.item3_imgbox{
	display: flex;
    justify-content: space-around;
    justify-content: center;
    gap: 60px;
    width: 100%;
    margin: 0 auto;
}

.item3_imgbox img {
    max-width: 100%;
    height: auto;
    min-width: 0;
}

.item3_ex{
	font-size: var(--fz30);
    padding: 50px 0px 80px;
    line-height: 1.4;
    color: #e8412b;
    letter-spacing: 0.05em;
}

.item3_imgbox {
    display: flex;
    justify-content: center;
    /* 【追加】折り返しを許可する */
    flex-wrap: wrap; 
    /* 【調整】PC時の隙間（適宜調整してください） */
    gap: 30px; 
    width: 100%;
    margin: 0 auto;
}

.item3_imgbox img {
    /* PC時は4枚並びなので、自動計算に任せるか、widthを指定 */
    max-width: 100%;
    height: auto;
}


/*プレーのご予約はこちらから*/
.section_booking{
    background: url(images/bg_booking.png) no-repeat;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    padding: 100px 0px 150px;
	margin-top: -2px;
}

.booking_ttlbox {
    text-align: center;
    padding: 40px 0px 80px;
    width: 95%;
    margin: 0 auto;
}

.booking_ttl {
    display: inline-block;
    position: relative;
    font-size: var(--fz50);
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;  
   
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding: 5% 0%;
	width: 95%;}

.area-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    max-width: 1000px;
	gap: 30px !important;
    width: 95% !important;
    margin: 0 auto !important;
}

.area-buttons .btn {
	
    display: flex !important;
    align-items: center; 
    justify-content: center;
    position: relative;
    
    width: 100% !important;
    max-width: none !important;
    height: 70px;
    padding: 0 40px;
    box-sizing: border-box;
	
    background-color: #ff7700;
    color: #fff;
    font-weight: bold;
    border-radius: 7px;
	box-shadow: 5px 6px 0px 0px #d0752a;
    text-decoration: none;
    font-size: var(--fz30);
    transition: .5s;
	cursor: pointer;
	box-sizing: border-box !important;
	padding: 50px 0px;
}

.area-buttons span {
    font-size: var(--fz40);
    margin-right: 0.2em;
    display: inline-block;
}

.area-buttons .btn::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 15%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
	
	bottom: 0;
    margin: auto;
    background: none;
}

.area-buttons .hokkaido_off{
	background-color: #ccc;
	box-shadow: 5px 6px 0px 0px #a4a4a4;
}

.area-buttons .hokkaido_off::after{
	display: none;
}

.btn_area_acco ul li a {
	border: none;
	background-color: #009933!important;
	color: #fff;
	box-shadow: 5px 6px 0px 0px #326b45;
	transition: .3s!important;
}

.br_acco{display: none; }

/* PCでのhoverアニメーション */
@media (hover: hover) and (pointer: fine) {

	/* ボタンのhoverアニメーション */
	.area-buttons .pc:hover {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}

	.area-buttons .pc:hover::after , .info_btnbox .info_btn:hover::after , .ptprogram .ptprogram_btn:hover::after{
		animation: arrowyoko infinite .7s ease-in;
	}
}

/* タッチディバイスでのactiveアニメーション */
@media (hover: none) and (pointer: none) {
	a.sp:active {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}
}

/* IE11でのアニメーションのカクツキ対応 */
@media (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	a.btn:hover {
		box-shadow: 8px 8px 5px 0 rgb(224, 222, 222);
		transform: scale(1.05, 1.05) translate(0, -2px);
	}

	a.btn:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
}
@keyframes arrowyoko {
	0% {
		right: 25px;
	}
	100% {
		right: 10px;
		opacity: 0;
	}
}

/*アニメーション無効*/
.area-buttons .hokkaido_off{
	animation: none!important;
	transition: none!important;
	pointer-events: none;
}

/*PGMWebより安価な料金プランを見つけた場合*/

.section_info{
	padding: 130px 0px 100px;
}

.info_ttlbox{
	margin-bottom: 60px;
}

.info_ttl{
	font-size: var(--fz30);
    padding: 15px 60px;
    background-color: #ececeb;
    display: inline-block;
    border-radius: 50px;
}

.info_lead{
	font-size: var(--fz19);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.info_lead span{
	color: #d23939;
}

.info_btnbox{
	margin: 50px 0px;
}

.info_btnbox .info_btn{
	font-size: var(--fz25);
    display: inline-block;
    background-color: #134a74;
    color: #fff;
	position: relative;
	padding: 15px 200px;
}

.info_btnbox .info_btn , .ptprogram .ptprogram_btn{
	color: #fff!important;
	text-decoration: none!important;
}
.info_btnbox .info_btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .4em;
    height: .4em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 1em;
}

ul.info_list{
	text-align: left;
}

ul.info_list li{
	font-size: var(--fz19);
	line-height: 1.5;
	text-indent: -1em;
	padding-left: 1em;
}

.info_listbox{
    margin: 0 auto;
    display: inline-block;
}
/*--------------------------------------------------------------------*/
/* レスポンシブル対応
/*--------------------------------------------------------------------*/

@font-face {
	font-family: 'WebSymbolsgfeditRegular';
	src: url('/css/font/websymbols_gf-edit-webfont.eot');
	src: url('/css/font/websymbols_gf-edit-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/css/font/websymbols_gf-edit-webfont.woff') format('woff'),
		 url('/css/font/websymbols_gf-edit-webfont.ttf') format('truetype'),
		 url('/css/font/websymbols_gf-edit-webfont.svg#WebSymbolsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@media screen and (max-width:1350px) {
	.section_1260{
		width: 95%;
	}
	.about_item1_imgbox img{
		max-width: 100%;
	}
}

@media (max-width: 1260px) {
    .area-buttons {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1100px) {
    .area-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
	    .area-buttons .btn {
        max-width: 325px;
    }
}


/* PC・タブレット画面の時 */
@media (min-width: 768px) {
    .area-buttons .btn.sp {
        display: none !important; /* SP用ボタンを確実に消す */
    }
}

/* スマホ画面の時 */
@media (max-width: 767px) {
    .area-buttons .btn.pc {
        display: none !important; /* PC用ボタンを確実に消す */
    }
    /* スマホで1列にしたい場合はここを 1fr に */
    .area-buttons {
        grid-template-columns: 1fr 1fr !important; 
    }
}

@media screen and (max-width: 1050px) {
    .item3_imgbox img {
        max-width: 100%;
    }
	
	.item3_imgbox {
		width: 100%;
	}
	
	.item3_imgbox {gap: 20px;}
	
}



@media screen and (max-width:980px) {
#container{
	margin: 18px auto 0;
}

div#breadSns{
	width:100%;
}

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

.mainvisual h1{
	width: 100%;
}

	.area-buttons {
    width: 90% !important;
	}
	
	.area-buttons .btn {
		font-size: var(--fz25);}
	
	.area-buttons span {
		font-size: var(--fz35);}
	
	.area-buttons {
		gap: 20px !important;}
	
/*金額*/
	.about_item1_imgbox{
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto 20px;
		max-width: none;
	}
	
	.about_item1_imgbox img {
		margin-bottom: 30px;
	}
	
	.about_item1_lead {
		padding-top: 0px;
}
	
	.btn_area {
    margin: 20px auto 20px;
	}
	
	.btn_area ul li a {
		letter-spacing: 0.02em;
	}
	
	.loyalty_flex_container {
		display: block;
	}
	
	.loyalty_column:first-child {
    border-right: none;
	}
	
	.item3_imgbox {
    display: grid;
    /* 常に2列固定 */
    grid-template-columns: repeat(2, 1fr); 
    /* 【追加】中身（画像）をそれぞれの枠の中央に寄せる */
    justify-items: center; 
    /* 【追加】上下左右の余白 */
    gap: 40px 0px; 
    
    width: 100%;
    /* コンテナ自体が広がりすぎないように制限 */
    max-width: 500px; 
    margin: 0 auto;
}

.item3_imgbox img {
    /* 【変更】100%にせず、画像本来のサイズを維持する */
    max-width: 100%; 
    width: auto; 
    height: auto;
    display: block;
}
	
	/* ボタン本体の拡大と影をリセット */
    a.btn_booking_acco:hover,
    a.btn_booking_acco:active {
        /* 拡大を等倍(1)にし、位置のズレ(translate)も戻す */
        -webkit-transform: none;
        transform: none;
        
        /* 影を元に戻す（もし元の影が別にあるならその数値を、なければnone） */
        -webkit-box-shadow: none;
        box-shadow: 5px 6px 0px 0px #326b45;;
        
        /* 動きをパッと止める */
        transition: none;
	}
}

@media screen and (max-width: 850px) {
    .area-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
	.area-buttons .btn {
        font-size: 3vw;
    }
	.area-buttons span {
		font-size: 4vw;
	}

	
	.br_acco{display: block;}
}

@media screen and (max-width: 820px) {
.br_item2_ttl{
	display: none;
}
}

@media screen and (max-width:730px) {
	.btn_area .booking {
		width: 100%;}
	.btn_area_acco{
		padding: 10px 30px!important;
	}
}

@media screen and (max-width:700px) {
	h2.content_h2 {
		font-size: var(--fz30);
	}
	
	h3.content_h3 {
		font-size: var(--fz25);
	}
	.about_item2_ttl {
		font-size: var(--fz25);
	}
	.item3_ttl {
		font-size: var(--fz30);
	}
}


@media screen and (min-width: 641px) {
    .sp {
        display: none;
    }
}

@media screen and (max-width:640px) {
div.cp_btn img {
width: 100%;
}
.sp {
	display: block;
}
.pc {
	display: none;
}
#footer {
	display: none;
}
#breadSns {
	display: none;
}
header.common .logo {
	float: left;
	width: 275px;
}
header.common .navi li {
	float: right;
	padding-top: 15px;
}

#container{
	width:100% !important;
	position:relative;
	margin: 0;
}

#plan{
	border:none;
}		

	
/*メインビジュアル*/
	.mainvisual{
		background: none;
	}
	
	h2.content_h2 {
		padding: 40px 0px;
		font-size: var(--fz40);
        line-height: 1.3;
	}
	
	h3.content_h3 {
		padding: 70px 2% 50px;
	}
	
/*金額*/
	.about_img_sp{
		display: block;
	}
	
	.about_img_pc{
		display: none;
	}
	
	.about_item1_imgbox {
        max-width: 100%;
    }
	
	.about_item_1 {
		padding: 30px 10px 30px;
	}
	
	.about_item1_ex {
		font-size: var(--fz25);
		padding: 5px 40px;}

/*PGMロイヤルティプログラム*/
	.about_item2_ttl {
		padding: 40px 20px;
		letter-spacing: 0.02em;
	}
	
	.loyalty_flex_container {
		max-width: 95%;
	}
	
	.ptprogram_btn{
		padding: 10px 30px;
	}
	
	.ptprogram a::after {
		right: 0.5em;
	}
	
	.ptprogram a{
		font-size: 4.2vw;
	}
	
/*最安値保障とは*/
	.item3_bestrate {
		width: 50%;
	}
	
	.item3_ttl {
		padding: 15px 50px;
	}
	
	.item3_ttlbox {
    padding-top: 100px;
	}
	
	.item3_imgbox {
		max-width: 450px;
	}
	
	.item3_ex {
		font-size: var(--fz25);}
	
	.section_about {
		padding-bottom: 30px;
	}
	
/*エリアボタン*/
	.btn_area ul li a::after {
    right: 0.5em;
	}
	
	.btn_area ul li {
		padding: 10px;
	}
	
	.btn_area ul li .pc{display: none;}
	.btn_area ul li .sp{
		display: block;
	    position: relative;
	}
	
	.btn_area ul li .btn_booking_acco{
		display: block;
	}
	.btn_area_acco{
		padding: 10px 20px!important;
	}
	
	.area-buttons {
        grid-template-columns: 1fr!important;
        max-width: 500px!important; 
    }

    .area-buttons .btn {
        height: auto!important;
        padding: 25px 20px!important;
    }
	
	.area-buttons span {
        font-size: var(--fz35);
    }
	
	.area-buttons .btn{
	font-size: var(--fz30);
	}
	
	.area-buttons {
        gap: 30px !important;
    }
	
	.btn_area ul li .btn_booking_acco{
	    max-width: 500px;
		margin: 0 auto;
	}
	
	.btn_area ul li {
        padding: 0px;
    }
	
	.info_ttl {
		padding: 15px 50px;}
	
	.btn_area .btn_booking_acco{display: block!important;}
	
	
/*問い合わせ*/
	.section_info {
    padding: 80px 0px 100px;
	}
	.info_btnbox .info_btn {
    padding: 4% 30%;
    font-size: 5vw;
	}
	
}


@media screen and (max-width: 530px) {
.btn_area_acco {
	font-size: 6vw;}
}

@media screen and (max-width: 500px) {
	.booking_ttl {
		font-size: 10vw;
	}
	
	.info_ttl{
		font-size: 6vw;
		padding: 5% 10%;
        border-radius: 100px;
	}
	
	.info_btnbox .info_btn {
    padding: 4% 25%;
    font-size: 6vw;
	}
	
	.btn_area ul li .btn_booking_acco{
	    font-size: 6.5vw;
	}
}

@media screen and (max-width: 450px) {
	
	h2.content_h2 {
			font-size: var(--fz30);}
			
    .ptprogram a {
        font-size: var(--fz25);
        display: inline-block;
        letter-spacing: 0.05em;
        line-height: 1.3;
    }
	
	.ptprogram {
		margin: 0px 0px 50px;}
	
	.item3_bestrate {
		width: 60%;
	}
	
}

@media screen and (max-width: 430px) {
    .item3_ttl {
        padding: 10px 20px;
    }
	
	.area-buttons .area{font-size: 5vw;}
}

@media screen and (max-width: 400px) {
	.area-buttons .area{
		padding: 25px 20px 25px 0px !important;
	}
	
	.info_btnbox .info_btn {
		padding: 4% 20%;
		font-size: 6vw;
	}
	
	.section_booking {
		padding: 50px 0px 80px;}
}

@media screen and (max-width: 350px) {
    .area-buttons span {
        font-size: var(--fz30);
    }
}

@media screen and (max-width: 330px) {
    .item3_ttl {
        padding: 10px 15px;
    }
}

/*-----------------------------------------------------*/
/* 改行のスタイル
/*-----------------------------------------------------*/

.br_lead , .br_lead2 , br.br_loyalty_btn , .br_bookingttl , .br_info_ttl{
	display: none;
}

@media screen and (max-width: 1350px) {
	.br_h3{
		display: none;
	}
}

@media screen and (max-width: 1200px) {
	.br_lead{
		display: block;
	}
}

@media screen and (max-width: 1030px) {
	.br_info_lead{
		display: none;
	}
}

@media screen and (max-width: 980px) {
	.br_bookingttl{
		display: block;
	}
}

@media screen and (max-width: 810px) {
	.br_info_ttl{
		display: block;
	}
}

@media screen and (max-width: 640px) {
	.br_lead2{
		display: block;
	}
}

@media screen and (max-width: 490px) {
	.br_item3_lead{
		display: none;
	}
}

@media screen and (max-width: 450px) {
	.br_loyalty_1{
		display: none;
	}
	.br_loyalty_btn{
		display: block!important;
	}
}

@media screen and (max-width: 420px) {
	.br_loyalty_2{
		display: none;
	}
}

/*-----------------------------------------------------*/
  /* 右下 TOPへの追従ボタン
/*-----------------------------------------------------*/
/* ページ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;}}

#reserve-btn {
  position: fixed;
  z-index: 20;
  opacity: 0;
  transform: translateX(100px);
  display: block;
  cursor: pointer;
  right: 1%;
  bottom: 110px;  /* ← Page top より少し上に配置 */
  font-size: 0.9vw;
}

#reserve-btn a {
  display: inline-block;
  transition: all 0.3s;
  color: #fff;
  padding: 13px 40px 10px 30px;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  text-align: center;
  background-color: #ff7700; 
  border-radius: 4px;
  font-size: 20px;
  font-weight: 600;
}

li.reserve_Animation a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .4em;
    height: .4em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 0.8em;
}

/* アニメーションは Page top と同じ動きに合わせる */
#reserve-btn.LeftMove { animation: LeftAnime 0.5s forwards; }
#reserve-btn.RightMove { animation: RightAnime 0.5s forwards; }