/* ------------------------- */
/* ヘッダ */

#header {
padding:0;
margin: 0;
width: 100%;
}
.lp2-header {
  overflow: hidden;
  width: 100%;
}
.lp2-header .lp2-container {
  overflow: hidden;
  background: linear-gradient(45deg, #fff9f9 0%, #fef2f2 100%);
  padding: 0 0 0 0;
  margin: 0;
  width: 100%;
}
.lp2-header .lp2-container .top {
  box-shadow: rgba(212, 212, 255, 0.2) 0 7px 29px 0;
  background: #ffffff;
}
.lp2-header .lp2-container .top .inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: 1920px;
  margin: 0 auto 0;
  padding: 0 0 0 2%;
}
.lp2-header .lp2-container .top .inner .left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 25px 0 25px 0;
}
.lp2-header .lp2-container .top .inner .left .logo a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 250px;
}
.lp2-header .lp2-container .top .inner .left .logo a img {
  width: 100%;
  height: auto;
}
.lp2-header .lp2-container .top .inner .left h1 {
  color: #222222;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 2px;
  font-size: 14px;
  padding: 3px 0 3px 30px;
}
.lp2-header .lp2-container .top .inner .right a.contact {
  background: #d10b17;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  height: 100%;
  padding: 0 20px 0 20px;
}
.lp2-header .lp2-container .top .inner .right a.contact .icon {
  line-height: 0;
  width: 30px;
  height: auto;
}
.lp2-header .lp2-container .top .inner .right a.contact span {
  font-size: 20px;
  padding: 0 0 0 10px;
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .lp2-header .lp2-container {
    padding: 0 0 0 0;
  }
  .lp2-header .lp2-container .top .inner {
    max-width: 1920px;
    margin: 0 auto 0;
    padding: 0 0 0 2%;
  }
  .lp2-header .lp2-container .top .inner .left {
    padding: 25px 0 25px 0;
  }
  .lp2-header .lp2-container .top .inner .left .logo a {
    width: 250px;
  }
  .lp2-header .lp2-container .top .inner .left h1 {
    line-height: 1.3;
    letter-spacing: 2px;
    font-size: 14px;
    padding: 3px 0 3px 30px;
  }
  .lp2-header .lp2-container .top .inner .right .contact {
    height: 100%;
  }
  .lp2-header .lp2-container .top .inner .right .contact a.contact {
    height: 100%;
    padding: 0 20px 0 20px;
  }
  .lp2-header .lp2-container .top .inner .right .contact a.contact .icon {
    width: 30px;
    height: auto;
  }
  .lp2-header .lp2-container .top .inner .right .contact a.contact span {
    font-size: 20px;
    padding: 0 0 0 10px;
  }

}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .lp2-header .lp2-container {
    padding: 0 0 0 0;
  }
  .lp2-header .lp2-container .top .inner {
    max-width: 1920px;
    margin: 0 auto 0;
    padding: 0 0 0 2%;
  }
  .lp2-header .lp2-container .top .inner .left {
    padding: 20px 0 20px 0;
  }
  .lp2-header .lp2-container .top .inner .left .logo a {
    width: 225px;
  }
  .lp2-header .lp2-container .top .inner .left h1 {
    line-height: 1.3;
    letter-spacing: 2px;
    font-size: 14px;
    padding: 3px 0 3px 15px;
  }
  .lp2-header .lp2-container .top .inner .right a.contact {
    height: 100%;
    padding: 0 20px 0 20px;
  }
  .lp2-header .lp2-container .top .inner .right a.contact .icon {
    width: 25px;
    height: auto;
  }
  .lp2-header .lp2-container .top .inner .right a.contact span {
    font-size: 18px;
    padding: 0 0 0 10px;
  }
}
@media screen and (max-width: 767px) {
  .lp2-header .lp2-container {
    padding: 0 0 0 0;
  }
  .lp2-header .lp2-container .top .inner {
    max-width: 1920px;
    margin: 0 auto 0;
    padding: 0 0 0 2%;
  }
  .lp2-header .lp2-container .top .inner .left {
    display: block;
    padding: 10px 0 10px 0;
  }
  .lp2-header .lp2-container .top .inner .left .logo a {
    width: 45vw;
  }
  .lp2-header .lp2-container .top .inner .left h1 {
    line-height: 1.1;
    letter-spacing: 2px;
    font-size: 2vw;
    padding: 3px 0 3px 5px;
  }
  .lp2-header .lp2-container .top .inner .right a.contact {
    height: 100%;
    padding: 0 12px 0 12px;
  }
  .lp2-header .lp2-container .top .inner .right a.contact .icon {
    width: 3.25vw;
    height: auto;
  }
  .lp2-header .lp2-container .top .inner .right a.contact span {
    font-size: 3.25vw;
    padding: 0 0 0 10px;
  }
}


/* ------------------------- */
/* FirstView */

.firstview {
  background: #33ff33;
  background: linear-gradient(#e66465, #9198e5);
  background:
    linear-gradient(217deg, rgba(0, 55, 155, 0.3), rgba(255, 0, 0, 0) 100%),
    linear-gradient(127deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 0, 0) 100%),
    linear-gradient(336deg, rgba(0, 255, 55, 0.3), rgba(0, 0, 255, 0) 20%);
}
.firstview h1 {
  font-size: 4em;
  font-weight: 700;
}
.firstview h1 i {
  margin-left: 10px;
  margin-right: 5px;
}
.firstview .conservative {
  font-size: 0.8em;
}
.firstview h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
  background: none;
  color: #222;
  border: none;
}
.firstview h3.fares {
  font-size: 3.0em !important;
  font-weight: 700;
  font-style: italic;
  text-align: left;
  margin: 0;
  padding: 0;
  background: none;
  color: #222;
  border: none;
}


/* FirstView 左側 */
.firstview-left {
/*
  background: 
  radial-gradient(circle at 0% 100%, #ffffff, #ffffff, #bcefac, transparent 70%);
  radial-gradient(circle at 0% 0%, #bcefac, #ffffff, #ffffff, #ffffff, transparent 70%),

  background: linear-gradient(335deg, #fff, #fff, #fff, #fff, #bcefac);
*/
background: linear-gradient(335deg, #fff 0 70%, #bcefac 100%);
}
.firstview-left-header {
  font-size: 2.4em !important;
}
@media screen and (min-width: 782px) and (max-width: 991px) {
  .firstview-left-header {
    font-size: 2.2em !important;
  }
}
@media screen and (min-width: 500px) and (max-width: 782px) {
  .firstview-left-header {
    font-size: 1.5em !important;
  }
}


/* ------------------------- */
/* FirstView 左側 タイトル */

.firstview-main-title {
  margin: 40px 0 10px 0 !important;
  padding: 0 !important;
}
.firstview-main-title h2 {
  font-size: 2.2em !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #111 !important;
}
.firstview-main-title p {
  font-size: 1.4em !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 5px 0 0 0 !important;
  padding: 0 !important;
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .firstview-main-title h2 {
    font-size: 2.0em !important;
  }
  .firstview-main-title p {
    font-size: 1.3em !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .firstview-main-title h2 {
    font-size: 1.8em !important;
  }
  .firstview-main-title p {
    font-size: 1.2em !important;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
  .firstview-main-title h2 {
    font-size: 1.8em !important;
  }
  .firstview-main-title p {
    font-size: 1.2em !important;
  }
}
@media screen and (max-width: 400px) {
  .firstview-main-title h2 {
    font-size: 1.6em !important;
  }
  .firstview-main-title p {
    font-size: 1.0em !important;
  }
}


/* ------------------------- */
/* FirstView 左側 実績など */

.award-outer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 95%;
  margin: 0 auto;
}
.award-item {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  /*border: 1px solid #ff00ff;*/
  justify-content: space-between;
}
.award-item .award-message {
  display: flex;
  flex-direction: row;
  /*border: 1px solid #0000ff;*/
}
.award-item .award-message-title {
  display: flex;
  flex-direction: column;
  /*border: 1px solid #00ffff;*/
  justify-content: center;
  align-items: center;
  margin-left: -15px;
  margin-right: -15px;
  color: #d96d00;
}
.award-item .award-message-title .award-message-title-main {
  font-size: 24px;
  line-height: 1em;
  text-align: center;
  padding: 0;
  margin: 0 0 5px 0;
}
.award-item .award-message-title .award-message-title-main span {
  font-size: 0.7em;
}
.award-item .award-message-title .award-message-title-sub {
  font-size: 32px;
  line-height: 1em;
  text-align: center;
  padding: 0;
  margin: 5px 0 10px 0;
}
.award-item .award-message-bottom {
  z-index: 2;
  text-shadow: 0px 0px 1px #a57c00;
  background-image: linear-gradient(
                      135deg, 
                      rgba(247,213,110,1) 2.3%, 
                      rgba(217,157,38,1) 36.8%, 
                      rgba(217,124,10,1) 76.8%,
                      rgba(247,213,110,1) 100.0% 
                    ); 
  padding: 4px 15px;
  margin-top: -15px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
@media screen and (max-width: 1299px) {
  .award-item .award-message-title .award-message-title-main {
    font-size: 24px;
    font-size: 18px;
    line-height: 1em;
    text-align: center;
    padding: 0;
    margin: 0 0 5px 0;
  }
  .award-item .award-message-title .award-message-title-main span {
    font-size: 0.7em;
  }
  .award-item .award-message-title .award-message-title-sub {
    font-size: 32px;
    font-size: 26px;
    line-height: 1em;
    text-align: center;
    padding: 0;
    margin: 5px 0 10px 0;
  }
  .award-item .award-message-bottom {
    font-size: 16px;
  }
}


/* ------------------------- */
/* 実績など一覧（繰り返し） */

.text-rotate-outer {
  /*background: linear-gradient(307deg, #bcefac, #fff) !important;*/
  background: linear-gradient(135deg, #fff, #fff, #bcefac) !important;
}
.text-rotate {
  overflow: hidden;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
.text-rotate ul {
  position: relative;
  display: flex;
  list-style: none;
  white-space: nowrap;
  margin: 10px 0 !important;
  padding: 0 !important;
  will-change: transform, opacity;
  gap: 1rem;
}
.text-rotate ul li {
  position: relative;
  color: #d10b17;
  color: #222;
  transform: skew(-15deg);
/*  box-shadow: rgba(62, 109, 48, 0.4) 0 7px 29px 0; */
  background: #ffffff;
  letter-spacing: 0px;
  font-size: 16px;
  padding: 5px 15px 5px 15px;
  margin: 0;
}
.text-rotate ul li:before {
  position: absolute;
  z-index: 2;
  opacity: 0.9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-width: 3px;
  border-style: solid;
  /*border-image: linear-gradient(90deg, #e73742 0%, #f5c4c8 45%, #ed7a4d 70%, #f5c4c8 85%, #e73742 90% 100%);*/
  /*-o-border-image: linear-gradient(90deg, #e73742 0%, #f5c4c8 45%, #ed7a4d 70%, #f5c4c8 85%, #e73742 90% 100%);*/
  border-image: linear-gradient(90deg, #609151 0%, #76c45c 45%, #76c45c 70%, #76c45c 85%, #609151 90% 100%);
  -o-border-image: linear-gradient(90deg, #609151 0%, #76c45c 45%, #76c45c 70%, #76c45c 85%, #609151 90% 100%);
  border-image-slice: 1;
  content: "";
  width: calc(100% - 0px);
  height: calc(100% - 0px);
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .text-rotate {
    width: 100%;
    padding: 0 !important;
  }
  .text-rotate ul {
    margin: 5px 0 !important;
    gap: 1rem;
  }
  .text-rotate ul li {
    font-size: 14px;
    padding: 3px 10px 3px 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .text-rotate {
    width: 100%;
    padding: 0 !important;
  }
  .text-rotate ul {
    margin: 3px 0 !important;
    gap: 0.8rem;
  }
  .text-rotate ul li {
    font-size: 13px;
    padding: 4px 10px 4px 10px;
  }
}
@media screen and (max-width: 767px) {
  .text-rotate {
    width: 100%;
    padding: 0 !important;
  }
  .text-rotate ul {
    margin: 3px 0 !important;
    gap: 0.8rem;
  }
  .text-rotate ul li {
    font-size: 12px;
    padding: 4px 7px 4px 7px;
  }
}


/* ------------------------- */
/* 共通 */

/* 文字列をブロックとして扱いたいときに使用 */
.stringblock {
  display: inline-block;
}

/* 単位、税込、注釈などの金額以外を縮小表示したいときに使用 */
.otherfare {
  font-size: 0.7em !important;
}


/* ------------------------- */
/* FirstView 右側 */
/* 料金参考例 */
/* 成田定額：A〜Dゾーンの料金例 */
/* ゴルフ：主要ゴルフ場の料金例 */

/* 地域・ゾーンラベル */
.example-area-zone-label {
    margin: 20px 10px;
    font-size: 1.1em;
    color: #fff;
    font-weight: 400;
    text-align: left;
}
.example-area-zone-label .area-zone {
    display: inline-block;
    text-align: center;
    padding: 6px 15px;
    background: #000;
    border: 1px solid #555;
    border-radius: 5px;
}
.example-area-zone-label .area-zone.zone-a {
    background: #1e40af;
    border: 1px solid #555;
}
.example-area-zone-label .area-zone.zone-b {
    background: #065F46;
    border: 1px solid #555;
}
.example-area-zone-label .area-zone.zone-c {
    background: #A50E8A;
    border: 1px solid #555;
}
.example-area-zone-label .area-zone.zone-d {
    background: #7F1D1D;
    border: 1px solid #555;
}

/* 地域・ゾーンへの送迎例の本体 */
.example-area-zone {
  color: #fff;
  font-weight: 400;
  text-align: center;
  margin: 0 0 20px 0;
}
.example-area-zone-destination {
  font-size: 1.5em;
  font-style: italic;
}
.example-area-zone-destination .fromto {
  display: inline-block;
}
.example-area-zone-address {
  font-size: 1.1em;
}
.example-area-zone-totalfare {
  font-size: 1.5em;
  color: #fff;
  font-weight: 400;
  text-align: center;
}
.example-area-zone-totalfare-split {
    color: #fff;
    text-align: center;
    font-size: 1.1em;
}



/* 深夜早朝割増 */
/*
.example-area-zone-totalfare-midnight {
    color: #fff;
    font-weight: 400;
    text-align: center;
    padding: 8px 10px 8px 10px;
    background: #000;
    margin-top: 10px;
}
.example-area-zone-totalfare-midnight-totalfare {
    color: #fff;
    text-align: center;
    font-size: 1.1em;
}
.example-area-zone-totalfare-midnight-split {
    margin-top: 5px;
    color: #fff;
    text-align: center;
    font-size: 0.9em;
}
.example-area-zone-totalfare-midnight .midnight-label {
    display: inline-block;
    background: #fff;
    color: #000;
    font-size: 0.8em;
    font-weight: 400;
    text-align: center;
    padding: 1px 8px;
    margin: 0 10px 0 0;
    border-radius: 3px;
}
.example-area-zone-totalfare-midnight .midnight-fare {
    display: inline-block;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
}
*/
.midnight-fare-label {
    background: #fff;
    color: #000;
    text-align: center;
    padding: 1px 5px;
    margin: 0 0 0 0;
    border-radius: 3px;
}
.midnight-fare-label-main, 
.midnight-fare-label-sub {
    font-size: 0.8em;
    font-weight: 400;
}
.midnight-fare-label-sub {
    font-size: 0.6em;
}

.example-area-zone-time-required {
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 1250px) {
    .example-area-zone-destination {
        font-size: 1.3em;
    }
    .example-area-zone-address {
        font-size: 1.0em;
    }
/*
    .example-area-zone-totalfare-midnight .midnight-label {
        margin-bottom: 5px;
    }
*/
}
@media screen and (max-width: 900px) {
    .example-area-zone-destination {
        font-size: 1.1em;
    }
    .example-area-zone-address {
        font-size: 0.9em;
    }
/*
    .example-area-zone-totalfare-midnight .midnight-label {
        margin-bottom: 5px;
    }
*/
}
@media screen and (max-width: 350px) {
    .example-area-zone-destination {
        font-size: 1.0em;
    }
    .example-area-zone-address {
        font-size: 0.8em;
    }
/*
    .example-area-zone-totalfare-midnight .midnight-label {
        margin-bottom: 5px;
    }
*/
}


/* ------------------------- */
/* ポップアップ画面 */

/* ボタン */
.pop-up-open {
	cursor:pointer;
  background-color: #3188E5;
	color:white;
  padding:5px 15px;
  border-radius:50px;
  font-size: .9em;
	display: flex;
	justify-content: center;
	align-items: center;
	width:200px;
	margin:10px auto 15px auto;
}
.pop-up-open:hover {
  background-color: rgba(49, 136, 229, 0.7);
  transition: .1s;
}
@media screen and (max-width: 800px) {
  .pop-up-open {
  	/*margin:20px auto 30px auto;*/
  }
}
.pop-up-sub {
  font-size: .8em;
  background-color: #3188E5;
}

/* ポップアップ種類 */
#detail-open-golf-1,
#detail-open-golf-2,
#detail-open-golf-3,
#detail-open-golf-4,
#fare-splitbill-golf-1,
#fare-splitbill-golf-2,
#fare-splitbill-golf-3,
#fare-splitbill-golf-4 {
	display: none;
}
.overlay {
	display: none;
}
#detail-open-golf-1:checked + .overlay,
#detail-open-golf-2:checked + .overlay,
#detail-open-golf-3:checked + .overlay,
#detail-open-golf-4:checked + .overlay,
#fare-splitbill-golf-1:checked + .overlay,
#fare-splitbill-golf-2:checked + .overlay,
#fare-splitbill-golf-3:checked + .overlay,
#fare-splitbill-golf-4:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000080;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
    animation: fade-in 0.2s ease;
}
@keyframes fade-in {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
}

/* ポップアップ */
.pop-up-window {
	width: 450px;
	background-color: #ffffff;
	border-radius: 0px;
	display: flex;
	align-items: stretch;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  padding:30px;
	box-shadow: 0px 0px 20px #000;
	overflow-y: auto;
}
.close-button {
	cursor:pointer;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 64px;
  line-height:32px;
}
@media screen and (max-width: 519px) {
  .pop-up-window {
    width: 90vw;
  }
  .pop-up-window table {
    max-width: 100%;
  }
}
@media screen and (max-height: 600px) {
  .pop-up-window {
	  max-height: 90vh;
  }
}
.contents-text p {
	font-size: .9em;
	text-align:left;
	font-weight:300;
	line-height:1.5em;
}

/* 料金の内訳 */
.contents-text .fare-detail-title {
	text-align:center;
	font-size:1.4em;
	margin: 5px 30px;
	padding: 3px;
}
.contents-text .fare-detail-title-destination {
	font-size: 1em;
	text-align: center;
	margin-top: 0;
}

.fare-detail-list table td {
  padding: 8px 8px;
}
.fare-detail-list table {
  width: 80%;
  margin: 0 auto 10px auto;
}
.fare-detail-list table tr:nth-of-type(4) td {
  background: #f5f5f5;
	font-weight: 900;
}
@media screen and (max-width: 430px) {
  .fare-detail-list table {
    width: 100%;
    padding: 8px 0;
  }
}

/* 1人あたりの料金 */
.contents-text .fare-splitbill-title {
	text-align:center;
	font-size:1.4em;
	margin: 5px 30px;
	padding: 3px;
}
.contents-text .fare-splitbill-title-destination {
	font-size: 1em;
	text-align: center;
	margin-top: 0;
}
.contents-text .information-title {
	font-weight: 700;
}
.fare-splitbill-list table th {
  padding: 2px 8px;
  background: #f5f5f5;
	font-weight: 900;
}
.fare-splitbill-list table td {
  padding: 8px 8px;
}
.fare-detail-list table {
  width: 80%;
  margin: 0 auto 10px auto;
}
@media screen and (max-width: 430px) {
  .fare-splitbill-list table {
    width: 100%;
    padding: 8px 0;
  }
}