/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */
.pt-contact {background-image: url(../img/pagetitle/contact.jpg);}
.pt-event {background-image: url(../img/pagetitle/events.jpg);}
.pt-hotelrestaurant {background-image: url(../img/pagetitle/hotelrestaurant.jpg);}
.pt-rentallicense {background-image: url(../img/pagetitle/rentallicense.jpg);}
.pt-cruising {background-image: url(../img/pagetitle/cruising.jpg);}
.pt-marina {background-image: url(../img/pagetitle/marina.jpg);}

/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {

/* Header */
.hrlogo_nom {display: block;}
.hrlogo_act {display: none;}

header.up_act .hrlogo_nom {display: none;}
header.up_act .hrlogo_act {display: block;}

/* Menu color settings---------*/
nav.globalmenu ul li a {
color:var(--color-black);
}
nav.globalmenu.up_act ul li a {
color:var(--color-white);
}
nav.globalmenu ul li a:hover {
color:var(--color-4th);
}

/* Pagetitle */
.pagetitle {
  width:100%;
  height: 230px;
  display: block;
  overflow: hidden;
  position: relative;
  margin:150px 0 0 0;
}
.ptbg {
  width:70%;
  height: 200px;
  display: block;
  padding:0;
  margin:0 0 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}
.ptcov {
  width:70%;
  height: 230px;
  display: block;
  background-image: url(../img/pagetitle/ptcov.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 100%;
}
.ptcc {
  width:35%;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:0 0 0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}
.ptcc h2 {
  font-size: clamp(11px, 1vw, 16px);
  font-family: var(--font-en);
  font-weight:300;
  line-height: 1em;
  margin:0 0 1em;
  padding:0;
  color:var(--color-1st);
  order:2;
}
.ptcc p {
  font-size: clamp(24px, 2vw, 38px);
  font-family: var(--font-min);
  font-weight:500;
  letter-spacing: 0px;
  line-height: 1em;
  margin:0 0 0.6em;
  padding:0;
  color:var(--color-black);
  order:1;
}
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  order:3;
}
.ptcc li {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-black);
}
.ptcc li a {
  color: var(--color-black);
  text-decoration: underline;
}
.ptcc li a:hover {
  color: var(--color-1st);
  text-decoration: none;
}
.ptcc li:after {
  content:" > ";
  margin:0 0.5em 0 0;
}
.ptcc li:last-child:after {
  content:"";
  margin:0;
}


/* Section title */
.sectitle {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 50px;
}

.sectitle .stbase {
  position: relative; /* ← 追加 */
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 0 18em; /* ← 疑似要素が被らないよう左右に余白 */
}

/* 左の画像 */
.stbase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%; /* ← 必要に応じて調整 */
  height: 20px;
  background-image: url(../img/titlewave_l.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* 右の画像 */
.stbase::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%; /* ← 必要に応じて調整 */
  height: 20px;
  background-image: url(../img/titlewave_r.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.stbase h3 {
  font-size: clamp(22px, 1.5vw, 30px);
  font-weight: 500;
  font-family: var(--font-min);
  color: var(--color-black);
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: center;
  order: 2;
}

.stbase p {
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 400;
  font-family: var(--font-en);
  line-height: 1.25em;
  color: var(--color-1st);
  text-align: center;
  margin-bottom: 0.6em;
  order: 1;
}


}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

/* Header */
.hrlogo_nom {display: block;}
.hrlogo_act {display: none;}

header.up_act .hrlogo_nom {display: none;}
header.up_act .hrlogo_act {display: block;}

/* Menu color settings---------*/
.menubn span {
  background: var(--color-black);
}

/* Pagetitle */
.pagetitle {
  width:100%;
  height: 230px;
  display: block;
  overflow: hidden;
  position: relative;
  margin:150px 0 0 0;
}
.ptbg {
  width:75%;
  height: 200px;
  display: block;
  padding:0;
  margin:0 0 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}
.ptcov {
  width:75%;
  height: 230px;
  display: block;
  background-image: url(../img/pagetitle/ptcov.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 100%;
}
.ptcc {
  width:35%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:0 0 0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}
.ptcc h2 {
  font-size: clamp(11px, 1vw, 16px);
  font-family: var(--font-en);
  font-weight:300;
  line-height: 1em;
  margin:0 0 1em;
  padding:0;
  color:var(--color-1st);
  order:2;
}
.ptcc p {
  font-size: clamp(24px, 2vw, 38px);
  font-family: var(--font-min);
  font-weight:500;
  letter-spacing: 0px;
  line-height: 1em;
  margin:0 0 0.6em;
  padding:0;
  color:var(--color-black);
  order:1;
}
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  order:3;
}
.ptcc li {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-black);
}
.ptcc li a {
  color: var(--color-black);
  text-decoration: underline;
}
.ptcc li a:hover {
  color: var(--color-1st);
  text-decoration: none;
}
.ptcc li:after {
  content:" > ";
  margin:0 0.5em 0 0;
}
.ptcc li:last-child:after {
  content:"";
  margin:0;
}

/* Section title */
.sectitle {
  width: 100%;
  height: auto;
  display: block;
  margin:0 auto 50px;
}

.sectitle .stbase {
  position: relative; /* ← 追加 */
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 0 10em; /* ← 疑似要素が被らないよう左右に余白 */
}

/* 左の画像 */
.stbase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%; /* ← 必要に応じて調整 */
  height: 10px;
  background-image: url(../img/titlewave_l.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* 右の画像 */
.stbase::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%; /* ← 必要に応じて調整 */
  height: 10px;
  background-image: url(../img/titlewave_r.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.stbase h3 {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-min);
  color: var(--color-black);
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: center;
  order: 2;
}

.stbase p {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-en);
  line-height: 1.25em;
  color: var(--color-1st);
  text-align: center;
  margin-bottom: 0.6em;
  order: 1;
}


}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Header */
.hrlogo_nom {display: block;}
.hrlogo_act {display: none;}

header.up_act .hrlogo_nom {display: none;}
header.up_act .hrlogo_act {display: block;}

/* Menu color settings---------*/
.menubn span {
  background: var(--color-black);
}

/* Pagetitle */
.pagetitle {
  width:100%;
  height: 230px;
  display: block;
  overflow: hidden;
  position: relative;
  margin:130px 0 0 0;
}
.ptbg {
  width:100%;
  height: 120px;
  display: block;
  padding:0;
  margin:80px 0 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}
.ptcov {
  width:70%;
  height: 150px;
  display: block;
  background-image: url(../img/pagetitle/ptcov.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 100%;
}
.ptcc {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding:0 5% 0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}
.ptcc h2 {
  font-size: clamp(11px, 1vw, 16px);
  font-family: var(--font-en);
  font-weight:300;
  line-height: 1em;
  margin:0 0 0.5em 0;
  padding:0;
  color:var(--color-1st);
  order:2;
}
.ptcc p {
  font-size: clamp(24px, 2vw, 38px);
  font-family: var(--font-min);
  font-weight:500;
  letter-spacing: 0px;
  line-height: 1em;
  margin:0 0 0.5em 0;
  padding:0;
  color:var(--color-black);
  order:1;
}
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  order:3;
}
.ptcc li {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-black);
}
.ptcc li a {
  color: var(--color-black);
  text-decoration: underline;
}
.ptcc li a:hover {
  color: var(--color-1st);
  text-decoration: none;
}
.ptcc li:after {
  content:" > ";
  margin:0 0.5em 0 0;
}
.ptcc li:last-child:after {
  content:"";
  margin:0;
}


/* Section title */
.sectitle {
  width: 100%;
  height: auto;
  display: block;
  margin:0 auto 50px;
}

.sectitle .stbase {
  position: relative; /* ← 追加 */
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 0 0em 1em; /* ← 疑似要素が被らないよう左右に余白 */
}

/* 左の画像 */
.stbase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0%;
  transform: translateY(0%);
  width: 100%; /* ← 必要に応じて調整 */
  height: 7px;
  background-image: url(../img/titlewave_l.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* 右の画像 */
.stbase::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0%;
  transform: translateY(0%);
  width: 100%; /* ← 必要に応じて調整 */
  height: 7px;
  background-image: url(../img/titlewave_r.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.stbase h3 {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-min);
  color: var(--color-black);
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: center;
  order: 2;
}

.stbase p {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-en);
  line-height: 1.25em;
  color: var(--color-1st);
  text-align: center;
  margin-bottom: 0.6em;
  order: 1;
}

}