/*
style.css
palmsprings CSS
*/

/*=======================================
リセット
=======================================*/

html,body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td,iframe,figure {
  border: 0;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

article,
header,
footer,
aside,
figure,
figcaption,
nav,
section {
  display: block;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.5;
  min-width: 1080px;
  overflow-x: hidden;
  position: relative;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.1;
}

ol,
ul {
  list-style: none;
  list-style-type: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

main {
  display:block; /* for IE11 */
}

header a:hover,
header a:hover img,
main a:hover img,
#groupBnr a:hover img,
#top03 a:hover,
footer a:hover {
  outline: 0;
  opacity: 0.7;
  transition: all 0.8s ease 0s;
}

.ov {
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

em {
  font-style: normal;
}

/*=======================================
テンプレート用
=======================================*/

/* フロート */
.flL { 
  display: inline; float: left;
}
.flR {
  display: inline; float: right;
}
.flImgL{
  display: inline; float: left; margin-right: 20px;
}
.flImgR {
  display: inline; float: right; margin-left: 20px;
}
.flImgC {
  display: block; margin: 0 auto;
}

/* 行ぞろえ */
.taL {
  text-align: left;
}
.taC {
  text-align: center;
}
.taR {
  text-align: right;
}

/* フォントサイズ */
.fzS {
  font-size:  86%; /* base 14px -> 12px */
}
.fzM {
  font-size: 121%; /* base 14px -> 17px */
}
.fzMl {
  font-size: 172%; /* base 14px -> 24px */
}
.fzL {
  font-size: 257%; /* base 14px -> 36px */
}

/* フォントウエイト */
.fwN {
  font-weight: normal;
}
.fwB {
  font-weight: bold;
}

/* フォントカラー */
.red {
  color:#ff0000;
}
.blue {
  color:#2c4a8f;
}
.brown {
  color:#996600;
}
.purple {
  color:#cc3399;
}
.green {
  color:#009966;
}

.yellow {
  color:#fed136;
}
.orange {
  color:#ff6600;
}
.white {
  color:#fff;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

/*=======================================
共通部分
=======================================*/

/* clearfix */
.clearfix:after {
  clear: both;
  content: "";
  display: block;
}

/* button */
.btn, a.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #333;
  font-size: 1.0rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.btn:link, a.btn:link, a.btn:visited {
  color: #333;
}

.btn:hover, a.btn:hover {
  color: #fff;
}

.btn::before,
a.btn::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #333;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.btn:hover::before,
a.btn:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.btn i, a.btn i {
  padding-right: 0.5em;
}

/* pc or sp switch */
.pc {
  display:block !important;
}
.sp {
  display: none !important;
}
.pc_inline {
  display:inline !important;
}
.sp_inline {
  display:none !important;
}

/* google inline frame */
.gglif {
  position: relative;
  padding-bottom: 90%;
  padding-top: 20px;
  height: 0;
  overflow: hidden;
}

.gglif iframe,
.gglif object,
.gglif embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* レスポンシブテーブル */
.rwdTbl th {
  width: 30%;
  background-color: rgba(49, 66, 78, 0.7);
  color: #fff;
  text-align: left;
}

.rwdTbl td {
  background-color: rgba(255, 255, 255, 0.5);
}

/* サイト全体共通 */
body {
  background: #ffffff;
  font-family: "游ゴシック", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
  color: #070504;
  letter-spacing: 0.03em;
}

/* ヘッダー */
header .inner,
main .inner,
#groupBnr .inner,
footer .inner {
  margin: 0 auto;
  width: 1080px;
}

header {
  position: relative;
  height: 142px;
  margin-bottom: 0;
}

header .inner {
  display: flex;
  justify-content: space-between;
  position: relative;
}

header #siteId {
  margin-top: 30px;
}

header #siteId h1 {
}

/* グローバルメニュー */
nav.gNavi {
  display: block;
  position: relative;
  z-index: 100;
}
nav.gNavi ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  margin-top: 50px;
}

nav.gNavi ul li {
  position: relative;
  height: 100%;
}

nav.gNavi ul li:last-child {
}

nav.gNavi ul li a {
  position: relative;
  display: inline-block;
  margin: 12px 25px;
  text-decoration: none;
  letter-spacing: 0.15em;
}

nav.gNavi ul li a span {
  display: inline-block;
  color: #333;
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  letter-spacing: .05em;
  text-align: center;
}

nav.gNavi ul li a:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}

nav.gNavi ul li a:hover:after {
  transform: scale(1, 1);
}

nav.gNavi ul li span {

}

/* 上下メニュー共通 */
nav ul li {
  display: inline-block;
}

/* フッター */
footer {
  position: relative;
  padding: 0 0 30px;
  background: #000;
}

footer .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer #footerInfo p,
footer #footerCta p,
footer .copyright {
  color: #fff;
}

footer #footerCta  .footerTel {
  font-family: 'pronpt', sans-serif;
  font-weight: bold;
  letter-spacing: 0.05em;
}

footer #footerCta .footerTel i {
  padding-right: 0.5em;
}

footer .copyright {
  margin-top: 20px;
  font-size: 12px;
  text-align: center;
}


/* メインコンテンツ共通 */
main {
  display:block; /* for IE11 */
}

#container {
  position: relative;
}

main p {
  margin-bottom: 30px;
}

main section p:last-child {
  margin-bottom: 0;
}

main a:link {
  color: #1d297f;
}

main li {
}

main p,
main li,
main dl,
main table {
  line-height: 1.5;
}

/* topページ以外のH2 */


/* headlines */

.notosans400 {
  font-family: 'Noto Sans JP',  sans-serif;
  font-weight: 400;
  line-height: 1.1;
}
.notosans500 {
  font-family: 'Noto Sans JP',  sans-serif;
  line-height: 1.1;
}
.prompt500 {
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  line-height: 1.1;
}
.prompt700 {
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  line-height: 1.1;
}
.prompt800 {
  font-family: 'Prompt', sans-serif;
  font-weight: 800;
  line-height: 1.1;
}

.ttl01 {
  font-size: 62px;
}

.ttl02 {
  font-size: 44px;
}
.ttl03 {
  font-size: 66px;
}
/* テキスト両端にライン */
.ttl04 {
  position: relative;
  padding: 0 65px;
  text-align: center;
}

.ttl04:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #eee;
}

.ttl04 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}

.ttl05 {
  position: relative;
  margin-left: 36px;
  font-size: 28px;
  font-weight: bold;
}
.ttl05:before {
  position: absolute;
  top: -8px;
  margin-left: -36px;
}
.ttl05.takeout:before {
  content: url(../images/top/icon_takeout.png);
}

.ttl05.delivery:before {
  content: url(../images/top/icon_delivery.png);
}

/* DL */
.line_tbl {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #ccc;
  background-color: transparent;
}
.line_tbl dt {
  float: left;
  clear: left;
  width: 110px;
  padding: 10px;
  text-align: center;
  border-top-width: 1px;
  border-top-style: dotted;
  border-top-color: #ccc;
}
.line_tbl dd {
  padding: 10px;
  margin-left: 120px;
  border-top-width: 1px;
  border-top-style: dotted;
  border-top-color: #ccc;
}
.line_tbl dt:first-child,
.line_tbl dt:first-child + dd {
  padding-top: 0;
  border-top: none;
}

/* img caption */
figure {
  position: relative;
  overflow: hidden;
}
figure img {
  vertical-align: bottom;
}
figcaption {
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 30px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover figcaption {
   bottom: 0;
}
figure figcaption p {
  padding-top: 2px;
  color: #fff;
  text-align: center;
}

/* border_box */
.border_box {
  padding: 1em;
  border: 1px solid #ff0000;
}

section {
  min-width: 1080px; /* 背景切れ対策 */
  padding: 80px 0;
}

.separater {
  width: 100vw;
  overflow: hidden;
}

.separater img {
  display: block;
  width: 100vw;
}

/*=======================================
カラムレイアウト
=======================================*/
.flexContainer {
  display: flex;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-flex-wrap: wrap!important;
  flex-wrap: wrap!important;
}

.flexContainer:after {
  content: "";
  display: block;
  height: 0;
}

.flexItem {
  position: relative;
/*  padding-bottom: 65px; 隣り合う高さ揃える時 */
}

.flexItem img {
  width: 100%;
}


/* 2col */
.flexContainer.col2 .flexItem {
  width: calc(50% - 16px);
  width: -ms-calc(50% - 16px);
  width: -webkit-calc(50% - 16px);
}
.flexContainer.col2:after {
  width: calc(50% - 16px);
}

/* 3col */
.flexContainer.col3 .flexItem {
  width: calc(33.3333% - 16px);
  width: -webkit-calc(33.3333% - 16px);
}
.flexContainer.col3:after {
  width: calc(33.3333% - 16px);
}

/* 4col */
.flexContainer.col4 .flexItem {
  width: calc(25% - 16px);
  width: -webkit-calc(25% - 16px);
}
.flexContainer.col4:after {
  width: calc(25% - 16px);
}



/* テキスト＋画像 */

.layoutRight .img {
  float: right;
  width: 380px;
}

.layoutRight .txt {
  float: left;
  width: 650px;
}

/* 画像＋テキスト */

.layoutLeft .img {
  float: left;
  width: 380px;
}

.layoutLeft .txt {
  float: right;
  width: 650px;
}

/* ページトップへ戻る */
#pageTop{
  position:fixed;
  bottom:20px;
  right:20px;
  cursor:pointer;
}

/*=======================================
top
=======================================*/

/* mainvisual */
#top #mainVisual {
  display: table;
  position: relative;
  width: 100%;
  height: 90vh;
  margin: 0;
  background-image: url(../images/top/bg_mainvisual.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-color: #0c61ab;
  color: #fff;
}

#top #mainVisual p {
  position: absolute;
  top: 70px;
  left: 170px;
}

/* ---------- top special ---------- */

#top #topSpecial {
  position: relative;
}


#top #topSpecial .notosans500 {
  margin-top: 15px;
}

/* 2列組時 */
/*
#top #topSpecial ul {
  display: flex;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-flex-wrap: wrap!important;
  flex-wrap: wrap!important;
  position: relative;
}

#top #topSpecial li {
  width: calc(50% - 16px);
  width: -ms-calc(50% - 16px);
  width: -webkit-calc(50% - 16px);
}
*/

/* 1列組時 */

#top #topSpecial .limited + .limited ul {
  display: block;
}

#top #topSpecial .limited:first-child li img {
  width: 49%;
}



#top #topSpecial .limited + .limited li {
  width: 100%;
  margin: 0 auto;
}


#top #topSpecial li img {
  width: 100%;
}

#top #topSpecial .btn,
#top #topSpecial a.btn {
  margin-top: 30px;
}

#top #topSpecial .limited:first-child li {
  text-align: center;
}

#top #topSpecial .limited:last-child {
  margin-top: 80px;
}




/* ---------- top about ---------- */

#top #topAbout {
  position: relative;
  padding: 0 0 80px 0 /* notice有りの時は削除 */
}

#top #topAbout:before,
#top #topSpecial:before,
#top #topAbout:after {
  content: '';
  position: absolute;
}

/* specialがないときは復活
#top #topAbout:before
*/

#top #topSpecial {
  padding-top: 0;
}

#top #topSpecial .inner {
  margin-top: 60px;
}

#top #topSpecial:before {
  top: 0;
  left: 0;
  width: 397px;
  height: 803px;
  background: url(../images/top/bg_palmtree_l.png) center/cover no-repeat;
  z-index: -1;
}

#top #topAbout:after {
  bottom: 0;
  right: 0;
  width: 412px;
  height: 838px;
  background: url(../images/top/bg_palmtree_r.png) center/cover no-repeat;
  z-index: -2;
}
#top #topSpecial .notice,
#top #topAbout .notice {
  padding: 2em;
  background-color: rgba(0,255,127,0.1);
  text-align: center;
}

#top #topSpecial .notice dt,
#top #topAbout .notice dt {
  display: inline-block;
  margin-bottom: 20px;
  font-weight: bold;
  border-bottom: 1px solid #000;
}

#top #topAbout .ttl01 {
  margin-top: 60px; /* notice有りの時は削除 */
}

#top #topAbout .inner {
  display: -webkit-flex!important;
  display: flex!important;
  -webkit-flex-wrap: wrap!important;
  flex-wrap: wrap!important;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

#top #topAbout .prompt800 + .inner {
  margin-top: 60px;
}

#top #topAbout .row-revers {
  margin-top: 0;
}

#top #topAbout .inner > figure {
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: default;
}

#top #topAbout .inner > .txt {
  padding: 100px 100px 120px 100px;
}

#top #topAbout .inner > figure,
#top #topAbout .inner > .txt {
  width: 50%;
  box-sizing: border-box;
}

#top #topAbout .inner > .txt > h3 + p {
  margin-top: 1em;
}

#top #topAbout .inner > figure a {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
  text-indent: -9999px;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none !important;
}

#top #topAbout .inner > .topAbout01 a {
  background: url(../images/top/img_about_01.jpg) no-repeat;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

#top #topAbout .inner > .topAbout02 a {
  background: url(../images/top/img_about_02.jpg) no-repeat;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

#top #topAbout .inner > .topAbout03 a {
  background: url(../images/top/img_about_03.jpg) no-repeat;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

.row-revers {
  flex-direction: row-reverse;
}

/* ---------- top gallery ---------- */

#top #topGallery {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* 以下slick用 */
.slick-loading .slick-list {
  background: #fff url('../images/top/ajax-loader.gif') center center no-repeat;
}

.sliderArea {
  max-width: 100%;
  margin: 30px auto 0;
  padding: 0 25px;
  box-sizing: border-box;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: auto;
  height: 400px;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
/*  opacity: .2; */
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.full-screen .slick-list {
  overflow: visible;
}
.full-screen.slider {
  max-width: 300px;
  margin: 0 auto;
}


/* ---------- top sns ---------- */
#top #topSns h2 + .taC {
  margin-top: 15px;
}


/* ---------- top aceess ---------- */

#top #topAccess h2 + .taC,
#top #topInfo h2 + .taC {
  font-size: 24px;
  font-weight: bold;
}

#top #topAccess .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  position: relative;
  z-index: 1002;
}

#top #topAccess .content iframe {
  width: calc(100% - 50%);
  height: 530px;
  border: none;
}

#top #topAccess .content .topAccessImg {
  position: relative;
  width: 50%;
  height: auto;
  background: url(../images/top/bg_access.jpg) no-repeat;
  background-size: cover;
  text-align: center;
  color: #fff;
}

/* ---------- top catering ---------- */

#top #topCatering .flexContainer {
  margin-top: 30px;
}

#top #topCatering .flexItem h3 + .taC {
  margin-top: 30px;
}

#top #topCatering .fzL {
  font-family: pronpt, sans-serif;
  font-weight: bold; 
}

#top #topCatering .flexItem ul {
  display: flex;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-flex-wrap: wrap!important;
  flex-wrap: wrap!important;
}

#top #topCatering .flexItem li {
  width: calc(50% - 16px);
  width: -ms-calc(50% - 16px);
  width: -webkit-calc(50% - 16px);
}

#top #topCatering .flexItem li img {
  max-width: 100%;
  height: auto;
}

#top #topCatering .flexItem ul:after {
  content: "";
  display: block;
  width: calc(33.3333% - 16px);
  height: 0;
}

/* ---------- top info ---------- */

#top #topInfo {
  padding-top: 0;
}

#top #topInfo #brand {
  margin-top: 60px;
}

#top #topInfo #brand .ttl04 strong {
  font-size: 18px;
}

#top #topInfo #brand ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

#top #topInfo #brand li {
  flex: 0 0 210px;
  width: 210px;
  max-width: 210px;
  margin-right: 40px;
  margin-left: 40px;
  margin-bottom: 1em;
}

#top #topInfo #brand li:nth-child(4n-3) {
  margin-left: 0;
}

#top #topInfo #brand li:nth-child(4n) {
  margin-right: 0;
}

#top #topInfo #brand li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  text-align: center;
}

#top #topInfo #brand li a img {
  max-width: 100%;
  height: auto;
}