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


/*ページ共通*/
#header-wrap {background: url(http://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: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
}
#header table img {	vertical-align: middle;}

.hotel_link{
font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1;
    text-align: center;
    background-color: #fff;
	padding: 80px 0 70px;
}

#footer {
    background: #fff url(http://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;
}


.hotel_link>li{
    padding: 0 10px;
    border-left: solid 1px #000;
	
    border-right: solid 1px #000;
}
.hotel_link>li+li{
    border-right: solid 1px #000;
}
.hotel_link>li a{
    color: #000;
    text-decoration: none;
}
.hotel_link>li a:hover{
    text-decoration: underline;
}



#gototop{position: fixed; right: 10px; bottom: 10px;  }
#gototop a{font-size: 25px; background:rgba(184,161,119,.6); color: #fff; display: block; padding: 10px 15px; text-decoration: none;}


/*画像コーディング用*/
area{border: none; outline: none;}
.splite {
	overflow: hidden;
	height: 0;
}


/**/

.st0
{
  background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 86, 120, 1) 0.18%,rgba(255, 172, 104, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(255, 86, 120, 1) 0.18%, rgba(255, 172, 104, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0.0018,rgba(255, 86, 120, 1) ),color-stop(1,rgba(255, 172, 104, 1) ));
  background : -o-linear-gradient(0deg, rgba(255, 86, 120, 1) 0.18%, rgba(255, 172, 104, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(255, 86, 120, 1) 0.18%, rgba(255, 172, 104, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5678', endColorstr='#FFAC68' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(255, 86, 120, 1) 0.18%, rgba(255, 172, 104, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5678',endColorstr='#FFAC68' , GradientType=1);
}

/*メニュー*/

.btnlink a:hover,
header a:hover{opacity: 0.6;}

header {width: 1200px; height: 100px; margin: auto; background: #fff;}
header .abc{
position: relative;
top: 0; left: 0;
width: 100%;
height: 100px;
background: #fff;
}
header .in {
position: fixed;
top: 0px;
left: 0px;
z-index: 50;
width: 100%;
height: 100px;}

header .menubtn{display: none;}
header #pcmenu{display: block;}
header ul{display: flex; justify-content:center; align-items: center; font-size: 20px; }
header ul li a{/*color: #fff; padding: 0 15px; background: #000; border-radius: 100vh;*/}
header #pcmenu a{ }
header #pcmenu img{height: 100px;}
header .tell,
header .mail{width: 196px; margin-right: 10px; padding-top: 10px;}
header .hotelbtn{width: 205px; padding-top: 10px;}


main {}

.mincho{font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}

#hero{ margin: 100px auto 0;}
#hero h1{width: 560px; margin: 35px auto 145px;}
#hero #lead h2{width: 740px; margin: auto;}
#hero #lead p{font-size: 1.9em; line-height: 2.37; margin: 66px auto 85px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}




#promises{padding: 66px 0 85px;}
#promises h2{width: 175px; margin: 0 auto 40px;}

#promises .box1 .numb{width: 88px; margin: 0 auto 30px;}
#promises .box2 .numb{width: 75px; margin: auto;} 
#promises .box3 .numb{width: 75px; margin: auto;}

#promises .box1{width: 960px; margin: 0 auto 35px; padding: 35px 0 50px;}
#promises .box1{
  background : #FFFFFF;
  background : rgba(255, 255, 255, 1);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;}

#promises h3{font-size: 2.2em; margin: 0 0 30px;}
#promises h3 span{/*font-size: 0.8em;*/}
#promises h3 b{color: #FF3678; font-size: 1.2em;}
#promises h3 .super{vertical-align: super; font-size: 0.6em; margin-left: -0.6em;}

#promises .box2 h3 .super{vertical-align: super; font-size: 0.6em; margin-left: 0em;}

#promises .box1 ul.pict{display: flex; justify-content:flex-start; width: 840px; margin: 0 auto 20px;  text-align: left;}
#promises .box1 ul.pict li{width: 428px; letter-spacing: -0.1em;}
#promises .box1 ul.pict li:last-child{margin-left: 30px; width: calc(100% - 458px); font-size: 1.7em; line-height: 1.8em;}
#promises .box1 ul.pict li .cap{font-size: 1.2em; line-height: 29px;}

#promises .box1 ul.htl{display: flex; justify-content: space-between; flex-wrap: wrap; width: 840px; margin: auto;}
#promises .box1 ul.htl li{width: 257px; text-align: center; font-size: 1.2em; font-weight: 600; margin: 15px 0 0;}

#promises .box1 .arrw{width: 30px; margin: 10px auto;}

#promises .box2 .icon,
#promises .box3 .icon{width: 220px; margin: auto;}


#promises .box2{display: flex; justify-content:space-between; width: 700px; margin: 0 auto 30px;}
#promises .box2 li{width: 337px; padding: 35px 0 45px;}
#promises .box2 li{
  background : #FFFFFF;
  background : rgba(255, 255, 255, 1);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;}

#promises .box3{display: flex; justify-content: space-between; width: 1065px; margin: auto;}
#promises .box3 li{width: 337px; padding: 35px 0 45px;}
#promises .box3 li{
  background : #FFFFFF;
  background : rgba(255, 255, 255, 1);
  border-radius : 20px;
  -moz-border-radius : 20px;
  -webkit-border-radius : 20px;}
#promises .btnlink{width: 571px; margin: 25px auto 0;}
#promises .note{color: #fff; margin: 20px auto;}
#promises .note1{font-size: 0.8em;}
#promises .note2{font-size: 0.7em; }

#promises .box2 h3,
#promises .box3 h3{font-size: 2.1em; margin: 25px 0 25px;}

#promises .box2 p,
#promises .box3 p{font-size: 1.6em; line-height: 1.58em;}


#voices{padding: 120px 0 150px;}
#voices h2{width: 154px; margin: 25px auto;}
#voices ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 1044px; margin: auto;}
#voices ul li{width: 478px; padding: 34px 0; border-top: 1px solid #F35F80;}
#voices ul li:nth-child(3),#voices ul li:nth-child(4){border-bottom:  1px solid #F35F80;}
#voices dl{display: flex; justify-content: flex-start; align-items: center; margin:  0 0 35px;}
#voices dt{width: 67px; margin-right: 5px;}
#voices dd{font-size: 1.6em; text-align: left; }
#voices div{font-size: 1.7em; text-align: left;}

#privileges{padding:  0 0 150px;}
#privileges h2{width: 203px; margin: 0 auto 38px;}
#privileges .lead{text-align: center; font-size: 2em; line-height: 2em; margin: 0 auto 55px;}
#privileges h3{width: 908px; margin: auto;}
#privileges ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 907px; margin: auto;}
#privileges ul li{width: 418px; padding: 34px 0;}
#privileges ul li dl{display: flex; justify-content: flex-start; margin: 25px 0 0;}
#privileges ul li dt{width: 30px;}
#privileges ul li dd{width: calc(100% - 45px); font-size: 1.5em; line-height: 1.7em; margin-left: 15px; text-align: left;}

#hotels{background: #F1EDDB; padding: 110px 0 100px;}
#hotels h2{width: 135px; margin: auto;}
#hotels ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 1063px; margin: auto;}
#hotels ul li{width: 337px; padding: 34px 0; text-align: left;}
#hotels ul li:last-child{margin-right: 33%;}

#hotels ul li .city{color: #fff; font-size: 1.3em; background: #F35F80; padding: 5px; display: inline-block; margin: 10px 0 0;}
#hotels ul li .htlname{font-size: 1.8em; font-weight: 600; margin: 10px 0 ;}
#hotels ul li .adds{font-size: 1.4em;}
#hotels .note{font-size: 0.8em;}

#best{padding: 133px 0 150px;}
#best h2{width: 292px; margin: 0 auto 45px;}
#best .lead{font-size: 2em; line-height: 2em; margin: 0 0 60px;}
#best ul{display: flex; justify-content:center; text-align: left; font-size: 1.3em; line-height: 1.8em;}
#best ul li:first-child{width: 225px;}
#best ul li:last-child{}
#best ul li h3{font-size: 1.5em; margin: 10px 0 20px; line-height: 1.8em;}

#info h2{width: 247px; margin: 0 auto 45px;}
#info div.tell{width: 592px; margin: auto;}
#info div.data{font-size: 1.8em; margin: 22px 0 0;}
#info .btnlink{width: 490px; margin: 50px auto 0;}


#ymv{padding: 0px 0 140px;}

#ymv div.mvwrap{max-width: 760px; margin: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
#ymv div.mv{
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    height: 0;
    overflow: hidden;
	}
#ymv div.mv iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 0;}



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

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

.hotel_link{
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        /*max-width: 320px;*/
	padding: 40px 0 30px;
	display: inline-block;
    }
.hotel_link>li{
        width: 100%;
    }
.hotel_link>li+li{
        margin-top: 15px;
    }


header {width: 100%; height: 50px;}
header .menubtn{display: block; width: 30%; padding-top: 10px;}
header .abc{
height: 50px;
background: rgba(255,255,255,.80);
}
header .in {
height: 50px;}

header #pcmenu{display: none;}
header #spmenu{display: block; z-index: 99; position: absolute; top: 50px; left: 0; width: 100%; height: 60px;}
header #spmenu ul{display: block;}

header #spmenu .menubtn{position: absolute; top: 18px; left: 30px; width: 30px;}



header ul{justify-content: space-between; padding: 0 5%;}
header ul li a{/*color: #fff; padding: 0 15px; background: #000; border-radius: 100vh;*/}
header #spmenu ul{background: rgba(255,255,255,.80);}
header #spmenu li{text-align: left; }
header #spmenu a{}
header #spmenu img{height: 100px;}
header .tell,
header .mail{width: 10%; margin-right: 10px; padding-top: 10px;}
header .hotelbtn{width: 44%; padding-top: 10px;}




#hero{ margin: 50px auto 0;}
#hero h1{width: 74%; margin: 35px auto ;}
#hero #lead h2{width: 57%; margin: auto;}
#hero #lead p{width: 95%; margin: 33px auto 42px; font-size: 1.6em; line-height: 2;}


#ymv{padding: 0px 0 50px;}
#ymv div.mvwrap{max-width: 74%; margin: auto;}



#promises{padding: 66px 0 85px;}
#promises h2{width: 175px; margin: 0 auto 40px; }
#promises .box1{width: 85%; margin: 0 auto 30px; padding: 30px 3%;}
#promises .btnlink{width: 85%; margin: 25px auto 0;}

#promises .box1 ul.pict{flex-direction: column-reverse; flex-wrap: wrap; width: 100%;}
#promises .box1 ul.pict li{width: 100%;}
#promises .box1 ul.pict li:last-child{margin-left: 0; width:100%; }


#promises .box1 ul.htl{width: 100%;}
#promises .box1 ul.htl li{width:48%;}
#promises .box1 ul.htl li p{ letter-spacing: -0.1em;}

#promises .box2,
#promises .box3{flex-wrap: wrap; width: 100%;}
#promises .box2 li,
#promises .box3 li{width: 85%; margin: 0 auto 30px; padding: 30px 5%;}

#promises .box2 li:last-child,
#promises .box3 li:last-child{margin: 0 auto 0;}

#promises .box1 ul.pict li .cap{line-height: 1.2em; margin: 5px 0;}


#voices{padding: 60px 0 75px;}
#voices h2{width: 154px; margin: 25px auto;}
#voices ul{display: block; width: 85%; margin: auto;}
#voices ul li{width: 100%; padding: 34px 0; border-top: 1px solid #F35F80;}
#voices ul li:nth-child(3){border-bottom:  none;}
#voices dl{margin: 0 0 20px;}

#privileges{padding:  0 0 75px;}
#privileges h2{width: 203px; margin: 0 auto 38px;}
#privileges .lead{width: 95%; margin: 0 auto 25px; font-size: 1.6em;}
#privileges h3{width: 54%; margin: auto;}

#privileges ul{width: 80%; margin: auto;}
#privileges ul li{width: 100%; padding: 34px 0;}


#hotels{background: #F1EDDB; padding: 50px 0 45px;}
#hotels h2{width: 135px; margin: auto;}
#hotels ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 95%; margin: auto;}
#hotels ul li{width: 49%; padding: 10px 0;}
#hotels ul li:last-child{margin-right: 45%;}
#hotels ul li .htlname{font-size: 1.5em; /*letter-spacing: -0.1em;*/ margin: 5px 0 2px;}

#best{padding: 50px 0 60px;}
#best h2{width: 60%; margin: 0 auto 25px;}
#best .lead{font-size: 1.6em; letter-spacing: -0.08em; margin: 0 0 30px;}
#best ul{flex-wrap: wrap;}
#best ul li:first-child{width: 32%;}
#best ul li h3{font-size: 1.2em; text-align: center;}
#best ul li p{font-size: .9em; text-align: center; font-feature-settings:"palt";}

#info h2{width: 60%; margin: 0 auto 45px;}
#info div{width: 95%; margin: auto;}
#info .btnlink{width: 60%; margin: 50px auto 0;}
#info div.tell{width: 90%;; margin: auto;}
#info div.data{font-size: 1.5em;}

.tume1{letter-spacing: -0.1em;}
.tume05{letter-spacing: -0.05em;}
.tume13{letter-spacing: -0.13em;}

}/* /@media */


.fadein {
  opacity : 0;
  transform: translateY(50px);
  transition: all 2s;
}

.fadeinsl {
  opacity : 0;
  transform: translateY(60px);
  transition: all 2s;
}


/*ページ表示時*/

.fadein1,.fadein2,.fadein3,.fadein4{opacity: 0;}


.fadein1 {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}
.fadein2 {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}
.fadein3 {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}

.fadein4 {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}