/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */
.pt-privacy {background-image: url(../img/pagetitle/pt-privacy.jpg);}
.pt-work {background-image: url(../img/pagetitle/pt-work.jpg);}
.pt-contact {background-image: url(../img/pagetitle/pt-contact.jpg);}
.pt-news {background-image: url(../img/pagetitle/pt-news.jpg);}
.pt-faq {background-image: url(../img/pagetitle/pt-faq.jpg);}
.pt-common {background-image: url(../img/pagetitle/pt-common.jpg);}

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

/* Pagetitle */
.pagetitle {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 1;
  position: relative;
  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:100%;
  height: 100%;
  display: block;
  aspect-ratio: 3 / 1;
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top:0;
  left:0;
  z-index:100;
}
.ptbase {
  width:100%;
  height: 100%;
  display: block;
  aspect-ratio: 3 / 1;
  background-image: url(../img/index/border01_up.png);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
  position: absolute;
  top:0;
  left:0;
  z-index:101;
}
.ptcc {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 3 / 1;
  padding:5% 0 0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index:102;
}
.ptcc h2 {
  font-size:28px;
  font-weight: 700;
  line-height:1em;
  color:var(--color-white);
  margin:0 0 0.5em 0;
}
.ptcc p {
  font-size:16px;
  font-family: var(--font-en);
  font-weight: 400;
  line-height:1em;
  color:var(--color-white);
  margin:0 0 0.8em 0;
}
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  margin:0;
}
.ptcc ul li {
  font-size:12px;
  line-height: 1.25em;
  margin:0;
  color:var(--color-white);
}
.ptcc ul li:after {
  content:" > ";
  margin-right:0.5em;
}
.ptcc ul li:last-child:after {
  content:"";
  margin-right:0em;
}
.ptcc ul li a {
  color:var(--color-white);
  text-decoration: underline;
}
.ptcc ul li a:hover {
  color:var(--color-4th);
  text-decoration: none;
}


}

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

  /* Pagetitle */
.pagetitle {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 2.5 / 1;
  position: relative;
  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:100%;
  height: 100%;
  display: block;
  aspect-ratio: 2.5 / 1;
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top:0;
  left:0;
  z-index:100;
}
.ptbase {
  width:100%;
  height: 100%;
  display: block;
  aspect-ratio: 2.5 / 1;
  background-image: url(../img/index/border01_up.png);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
  position: absolute;
  top:0;
  left:0;
  z-index:101;
}
.ptcc {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 2.5 / 1;
  padding:5% 0 0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index:102;
}
.ptcc h2 {
  font-size:28px;
  font-weight: 700;
  line-height:1em;
  color:var(--color-white);
  margin:0 0 0.5em 0;
}
.ptcc p {
  font-size:16px;
  font-family: var(--font-en);
  font-weight: 400;
  line-height:1em;
  color:var(--color-white);
  margin:0 0 0.8em 0;
}
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  margin:0;
}
.ptcc ul li {
  font-size:12px;
  line-height: 1.25em;
  margin:0;
  color:var(--color-white);
}
.ptcc ul li:after {
  content:" > ";
  margin-right:0.5em;
}
.ptcc ul li:last-child:after {
  content:"";
  margin-right:0em;
}
.ptcc ul li a {
  color:var(--color-white);
  text-decoration: underline;
}
.ptcc ul li a:hover {
  color:var(--color-4th);
  text-decoration: none;
}

}


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

  /* Pagetitle */
  .pagetitle {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  position: relative;
  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:100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top:0;
  left:0;
  z-index:100;
}
.ptbase {
  width:100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  background-image: url(../img/index/border01_up.png);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
  position: absolute;
  top:0;
  left:0;
  z-index:101;
}
.ptcc {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 1 / 1;
  padding:8% 0 0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index:102;
}
.ptcc h2 {
  font-size:24px;
  font-weight: 700;
  line-height:1em;
  color:var(--color-white);
  margin:0 0 0.5em 0;
}
.ptcc p {
  font-size:14px;
  font-family: var(--font-en);
  font-weight: 400;
  line-height:1em;
  color:var(--color-white);
  margin:0 0 0.8em 0;
}
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  margin:0;
}
.ptcc ul li {
  font-size:12px;
  line-height: 1.25em;
  margin:0;
  color:var(--color-white);
}
.ptcc ul li:after {
  content:" > ";
  margin-right:0.5em;
}
.ptcc ul li:last-child:after {
  content:"";
  margin-right:0em;
}
.ptcc ul li a {
  color:var(--color-white);
  text-decoration: underline;
}
.ptcc ul li a:hover {
  color:var(--color-4th);
  text-decoration: none;
}

}