@charset "UTF-8";
/* ----------------------------------------
   index.css
---------------------------------------- */
html, body {
	font-size: 10px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
body {
	margin: 0;
	padding: 0;
	background: #fff;
	line-height: 1.5;
	text-align: center;
}
body * {
	box-sizing: border-box;
}

#header-wrap {
	background: url(https://www.princehotels.co.jp/common/imgs/module_parts/parts_header/bg02.gif) repeat-x;
}
#header {
	width: 100%;
	max-width: 1100px;
	height: 62px;
	text-align: left;
	margin: 0 auto;
}

#header table,
#copyright {
	width: 20%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
}

#header table img {
	vertical-align: middle;
}

#container {
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
}
main {
	display: block;
	/*max-width: 1100px;*/
	margin: 0 auto;
}

footer .copy {
    color: #231815;
    font-size: 15px;
    margin-top: -2px;
    padding: 3rem 0;
}

@media screen and (max-width: 768px) {
    footer .copy {
        font-size: 12px;
    }    
}

/*予約ボタン*/
.abc{
position: absolute;
top: 63px; right: 0;
width: 100%;
height: 100px;
}
.in {
position: fixed;
top: 0px;
right: 0px;
z-index: 50;
width: 100%;}

#btnlink{width: 66px; }

/* main section div{width: 1000px; margin: auto;} */


#hero{background: #fff;}
#hero div{width: 100%;}

#model{
    background: url(../img/img_bk2.png);
    background-size: contain;
}


.table1{width: 92%; overflow: auto;}
.table1 div{width: 800px;}

.table2{width: 92%; overflow: auto;}
.table2 div{width: 800px;}


#footer {
    background: #fff  url(https://www.princehotels.co.jp/common/imgs/module_parts/parts_footer/bg01.gif) repeat-x;
    padding: 25px 0px 15px 0px;
}

#copyright {
    text-align: right;
    margin: 0 auto;
}

#lead{
    background-image: url(../img/bk01.png);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center;
    background-position-x: -830px;
}

.plan_list {
    width: 92%;
    overflow: auto;
    margin: 10px auto;
}

.plan_list img {
    width: 800px;
}

.bk-col01{
    background-color: #FDF8E5;
    margin-bottom: 20px;
}
.bk-col02{
    background-color: #EAF5F5;
    margin-bottom: 20px;
}

#modelplan {
    background-image: url(../img/bk02.png);
    background-size: 100%;
    background-position: top;
}

.w900 {
    max-width: 900px;
    padding: 30px 0 100px;
}

#safety{
    width: 100%;
    background-color: #e8e8e8;
}

.mobile-scroll{
    width: 100%;
    overflow-x: scroll;
}

.notice{font-size: 0.9em;}

.splite {
	overflow: hidden;
	height: 0;
}

area{border: none; outline: none;}

#gototop{position: fixed; right: 20px; bottom: 20px;  }
#gototop a{font-size: 20px; background:rgba(198,55,36,0.7); color: #fff; display: block; padding: 15px 20px; text-decoration: none; border-radius: 50%;}

/* @media : PC */
@media screen and (min-width: 769px) {
    .sp { display: none; }
}/* /@media */

/* @media : SP */
@media screen and (max-width: 768px) {
    .pc { display: none; }
	#header table,
	#copyright {
		width: 96%;
	}
	
#btnlink{width: 100px;}
	
}/* /@media */

#links {
    padding: 1.5em;
    font-size: 1.5rem;
}
#links ul {
    letter-spacing: -0.38em;
}
#links ul li {
    display: inline-block;
    padding: 0 1em;
    border-left: 1px solid #555;
    letter-spacing: normal;
}
#links ul li:last-child {
    border-right: 1px solid #555;
}
#links ul li a {
    color: #555;
}

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

#links ul li,
#links ul li:last-child{border-left:none; border-right:none;}
}


/**/

.fade {
    animation-name: fadein;
    animation-duration: 4s;
    
}
@keyframes fadein {
from {
    opacity: 0;
  /*  transform: translateY(20px);*/
	filter: blur(5px);
	transform: scale(0.95) ;
}
to {
    opacity: 1;
    /*transform: translateY(0);*/
	filter: blur(0px);
}
}

.fadeIn {
    transition: 2s;
	transform: translateY(20px);
    opacity: 0;
}

.fadeIn.animated {
    opacity: 1;
    transform: translateY(0);
}



.fadeIn0 {
    transition: 3s;
	transform: translateY(40px);
    opacity: 0;
}

.fadeIn0.animated {
    opacity: 1;
    transform: translateY(0);
}



/*パララックス*/

.parallax-bg {
  background-image: url('../img/img11.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 408px;
  
}



@media screen and (max-width: 768px) {
.parallax-bg {  height: 140px; background-size: 100%; background-attachment:scroll; background-position: center;}
}



/*テキスト部分*/

#notice {padding: 0 0 120px;}
#notice ul{width: 880px; margin: auto ; }
#notice ul li{font-feature-settings: "palt"; letter-spacing: 0.01em;
font-family : YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-size : 15px;
  line-height : 23px;
  position : relative;
  top : 0.54px;
  color : #3C3C3C;
  text-align: left;
  padding-left: 1.2em;}
  
#notice ul li::before{content: '※'; margin-left: -1.2em; padding-right: 5px;}




article#safety {
    max-width: 100%;
    padding: 100px 0px 90px;
    background: #DCDCDC;
    color: #000;
    text-align: center;
}
article#safety ul{
    display: block;
}
article#safety ul li{
    width: 100%;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
article#safety h2 {
  font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: #000;
}
article#safety h3 {
    margin-bottom: 20px;
}
article#safety p img {
    margin-bottom: 30px;
}
article#safety p {
    margin-bottom: 30px;
}
#safety h3.inview {
  position: relative;
  top: 30px;
}
#safety h3.inview.on {
  top: 0;
  opacity: 1.0;
}
#safety p {
color: #000;
}
#safety p a::before{
    display: none;
    
}

#safety section{
    padding: 0;
margin: -50px 0 0 0;
}
.w_str{
	display: inline-block; padding: 20px; border: #000 1px solid;background: #DCDCDC;
}
.w_cont{
border: #000 1px solid;
    max-width: 900px;
    margin: -24px auto 40px auto;
    padding: 62px 10px 30px 10px;
    display: block;
}
.nrm{
    margin-bottom: 0!important;
}
.nrm img{
    margin-bottom: 0!important;
}
.w_add{
	width: 100%; margin: 50px 0 0 0; 
        padding: 0 10px;
}
.w_add ul{
	font-size: 0.9em;text-align: left;
}
.w_add li{
	list-style: none;
	position: relative;
	padding-left: 15px;
}
.w_add li::before{
	content: "●";
	position: absolute;
	left: 0;
}
.w_add ul.main_sub{
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
	margin-left: 2em!important;
}
.w_add ul.main_sub li{
	position: relative;
}
.w_add ul.main_sub li::before{
 content: counter(my-counter);
  counter-increment: my-counter;
  color: #000;
  display: block;
  float: left;
  line-height: 14px;
margin-left: -10px;
  text-align: center;
  height: 14px;
  width: 14px;
  border-radius: 50%;
	border: #000 .5px solid;
	font-size: 0.8em;
}
.w_add li ul.sub_list{
    list-style: disc;
    counter-reset: my-counter;
}

.w_add li .sub_list li{
    /* margin-left: 1em; */
    list-style: disc!important;
    padding-left: 1em;
    font-size: 1.2em;
}
.w_add li .sub_list li::before{
	content: "●";
    border: none;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;left: 0;
}


.w_add > p{text-align: left;}
.mv_waku{
	max-width: 900px; margin: auto;
}

.ats{
	display:inline-block;
	border: #000 1px solid;
	background: #fff;
	color: #000;
	padding: 5px 20px;
	margin-bottom: 5px;
}
.nst{
	text-align: center; margin-bottom: 30px;
}
.spt{
	display: block;
}
#map{
    max-width: 100%;
    margin: auto;
}
#map iframe{
    max-width: 100%;
    height: 400px;
    width: 100%;
}


#access h2{width: 1100px; margin: auto;}

#access{


font-family : YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-size : 17px;
  line-height : 23.33px;
  position : relative;
  top : 0.84px;
  color : #3C3C3C;
  text-align: center;}
  
  #access a{color : #3C3C3C; text-decoration: none; margin: 20px 0 0; display: block;}
  
  
  
  @media screen and (max-width: 768px) {
  
  #hero div,
  main section div,
  #access h2{width: 100%;}
  
  #notice ul{width: 80%; }
#notice ul li{font-size: 11px; line-height: 1.4em;}

article#safety{padding: 50px 0 40px;}

article#safety h2{font-size: 1.2em;}

article#safety ul li{font-size: 11px; line-height: 1.4em;}

article#safety p {font-size: 12px; width: 90%; margin: 0 auto 30px;}
article#safety p:last-child{width: 60%; margin: auto;}
  
  }
  
  
  /*PCでは電話番号リンクなし*/
@media (min-width: 751px) {
.sp_tell{pointer-events: none;}
}

.btn_pran {
    width: 60px;
    position: sticky;
    right: 0;
}

.data-area {
    background: url(../img/bg.webp);
    background-size: 100%;
    background-repeat: repeat-y;
}

.data-area ul {
    max-width: 82%;
    margin: 0 auto;
    padding-top: 3rem;
    display: flex;
    justify-content: space-between;
}
.data-area ul li {
    width: 48%;
    cursor: pointer;
}
/* .data-area ul li.active {
    opacity: 1;
} */

.data-area .data {
    max-width: 82%;
    margin: 0 auto;
    padding-top: 3rem;
}
.data-area .data .img01,
.data-area .data .img02 {
    display: none;
}
.data-area .data .img01.active,
.data-area .data .img02.active {
    display: block;
}

.data-area .note {
    max-width: 100%;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 10rem;
}
.data-area .note ul {
    display: block;
    text-align: left;
}
.data-area .note ul li {
    width: 100%;
    font-size: 1.3em;
    cursor: auto;
    color: #3E3A39;
    padding-left:1em;
    text-indent:-1em;
}
.data-area .note ul li a {
    color: #3E3A39;
}

.box {
    position: relative;
}

/* ボタンの初期スタイル */
.reserve-btn {
    position: sticky;
    top: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.reserve-btn .abs {
    width: 5%;
    height: auto;
    position: absolute;
    top: 240px;
    right: 0;
}

/* ボタンが固定された状態のスタイル */
.fixed {
    position: fixed;
    top: 340px;
    z-index: 100;
}

.accordion_one .accordion_header {
    display: none;
}
.accordion_one .accordion_inner .box_one {
    display: none;
}

.bg-sp {
    background: none;
}

@media screen and (max-width: 768px) {
    .stay {
        padding-top: 70px;
        margin-top: -70px;
    }
    .data-area ul {
        display: none;
    }
    .data-area .data {
        display: none;
    }    
    .reserve-btn {
        display: none;
    }
    .reserveButton_sp {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .accordion_one .accordion_header {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .accordion_one .accordion_header.pt10 {
        padding-top: 10px;
    }
    .accordion_one .accordion_inner {
        display: none;
        width: 90%;
        margin: 0 auto;
    }
    .accordion_one .accordion_inner .box_one {
        display: block;
        width: 100%;
        overflow-x: scroll;
    }
    .accordion_one .accordion_inner .box_one img {
        width: 600px;
    }
    .data-area .note {
        max-width: 90%;
        padding-top: 4rem;
        padding-bottom: 7rem;
    }
    .bg-sp {
        background: url(../img/bg_calendar.webp);
        background-size: 100%;
        background-repeat: repeat-y;
    }
    .bg-sp .note {
        width: 90%;
        margin: 0 auto;
        padding-top: 3rem;
        padding-bottom: 6rem;
    }
    .data-area .note ul {
        max-width: 100%;
        padding-top: 0;
    }
}