/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */
.pt-privacy {background-image: url(../img/pagetitle/privacy.webp);}
.pt-contact {background-image: url(../img/pagetitle/contact.webp);}
.pt-company {background-image: url(../img/pagetitle/company.webp);}
.pt-stock {background-image: url(../img/pagetitle/stock.webp);}
.pt-blog {background-image: url(../img/pagetitle/blog.webp);}
.pt-about {background-image: url(../img/pagetitle/aboutus.webp);}

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

/* Pagetitle */
.pagetitle {
  width:100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  display: block;
  position: relative;
}
.ptcov {
  width:100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index:10;
  background-image: url(../img/pagetitle/ptcov.webp);
  background-repeat: no-repeat;
  background-position: right 90%;
  background-size: 70% 70%;
}
.ptbg {
width:70%;
height: auto;
display: block;
aspect-ratio: 5 / 2.5;
position: absolute;
top: 0;
right:0;
z-index: 1;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 30% 100%);
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}

.ptcc {
  width:100%;
  height: auto;
  aspect-ratio: 5 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding:0 0 0 5%;
  position: absolute;
  top:29%;
  right:0;
  z-index: 110;
}
.ptcc h2 {
font-size: clamp(14px, 1.25vw, 28px);
font-weight: 500;
line-height: 1.5em;
letter-spacing: 0em;
color:var(--color-black);
margin:0 0 1em 0;
order:2;
}
.ptcc p {
  font-size: clamp(40px, 4vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  margin:0 0 0.1em 0;
  order:1;
}
    
.ptcc p.maintenance-blog {
  font-size: clamp(36px, 3vw, 180px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  margin:0 0 0.1em 0;
  order:1;
}       
    
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  order:3;
}
.ptcc ul li {
  font-size:14px;
  line-height: 1.5em;
  margin:0;
  color:var(--color-black);
}
.ptcc ul li:after {
  content:" > ";
  margin-right:0.5em;
}
.ptcc ul li:last-child:after {
content:"";
margin-right:0;
}

/* Common */
main {
  width:100%;
  height: auto;
  display: block;
  padding:0px 0 15%;
}

/* Access */
.accessmm {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:50px 5% 15%;
}
.acm01 {
  width:60%;
}
.acm01 iframe {
  width: 100%;
  height: 500px;
  display: block;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.acm02 {
  width:35%;
}
.acmtitle {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding:0 5% 20px;
}
.acmtitle h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  text-align: center;
  color: var(--color-1st);
  margin:0;
  order:2;
}
.acmtitle p {
  font-size: 60px;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1em;
  text-align: center;
  color: var(--color-black);
  margin:0 0.2em 0 0;
  order:1;
}
.accap-car {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/header/ic-acc_car.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 30px;
  padding:0 0 0 40px;
  font-size:16px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}
.accap-train {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/header/ic-acc_train.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 30px;
  padding:0 0 0 40px;
  font-size:16px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}
.acm_com {
  font-size:14px;
  line-height: 2em;
}

/* Stock */
.stockmm ul {
  width:100%;
  max-width:1920px;
  height: auto;
  display: flex!important;
  flex-wrap: wrap;
  margin:0 auto;
  padding:50px 5%;
}
.stockmm ul li {
  width:29.3333333333%;
  height: auto;
  display: block;
  margin:0 2% 30px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}

/* News */
.newsdata {
  width:100%;
  max-width:1920px;
  height: auto;
  display: block!important;
  margin:0 auto;
  padding:50px 5%;
}
.newslist {
  width:100%;
  height: auto;
  display: flex!important;
  flex-wrap: wrap;
  margin:30px auto 0;
}
.newslist li {
  width:29.3333333333%;
  height: auto;
  display: block;
  margin:0 2% 30px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}


/* About service icons */
ul.int_servicelist {
  width:100%;
  max-width: 1600px;
  height: auto;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:0 auto;
}
ul.int_servicelist li {
  width:23%;
  height: auto;
  display: block;
  font-size:20px;
  letter-spacing: 0px;
  font-weight: 700;
  line-height: 1.25em;
  color: var(--color-white);
  text-align: center;
  padding:105px 0 30px 0;
  border:1px solid rgba(255,255,255,0.4);
  border-radius: 5px;
  background-color: rgba(0,0,0,0.8);
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: auto 115px;
  margin:0 1% 2%;
}
ul.int_servicelist li span {
  display: block;
  font-size:11px;
  line-height: 1.25em;
  font-weight: 400;
  font-family: var(--font-en);
  color:var(--color-1st);
  padding:0.5em 0 0 0;
  margin:0;
}

/* About image line */
.abimgline01 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.abimgline01 figure {
width: 98%;
height: auto;
display: block;
margin:1%;
box-shadow:0px 5px 15px rgba(0,0,0,0.25);
}

.abimgline02 {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.abimgline02 figure {
  width:32.3333333333%;
  height: auto;
  display: block;
  margin:0.5%;
  box-shadow:0px 5px 15px rgba(0,0,0,0.25);
}

}

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

/* Pagetitle */
.pagetitle {
  width:100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  display: block;
  position: relative;
}
.ptcov {
  width:100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index:10;
  background-image: url(../img/pagetitle/ptcov.webp);
  background-repeat: no-repeat;
  background-position: right 100%;
  background-size: 60% 70%;
}
.ptbg {
width:65%;
height: auto;
display: block;
aspect-ratio: 5 / 2.7;
position: absolute;
top: 0;
right:0;
z-index: 1;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 30% 100%);
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}

.ptcc {
  width:100%;
  height: auto;
  aspect-ratio: 5 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding:0 0 0 5%;
  position: absolute;
  top:35%;
  right:0;
  z-index: 110;
}
.ptcc h2 {
font-size: clamp(14px, 1.25vw, 28px);
font-weight: 500;
line-height: 1.5em;
letter-spacing: 0em;
color:var(--color-black);
margin:0 0 1em 0;
order:2;
}
.ptcc p {
  font-size: clamp(40px, 4vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  margin:0 0 0.1em 0;
  order:1;
}
    
.ptcc p.maintenance-blog {
font-size: clamp(36px, 3vw, 180px);
font-family: var(--font-en);
font-weight: 700;
line-height: 1em;
letter-spacing: -0.03em;
color:var(--color-black);
margin:0 0 0.1em 0;
order:1;
}       
    
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  order:3;
}
.ptcc ul li {
  font-size:14px;
  line-height: 1.5em;
  margin:0;
  color:var(--color-black);
}
.ptcc ul li:after {
  content:" > ";
  margin-right:0.5em;
}
.ptcc ul li:last-child:after {
content:"";
margin-right:0;
}

/* Common */
main {
  width:100%;
  height: auto;
  display: block;
  padding:0px 0 15%;
}


/* Access */
.accessmm {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:50px 5% 15%;
}
.acm01 {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 50px;
}
.acm01 iframe {
  width: 100%;
  height: 500px;
  display: block;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.acm02 {
  width:100%;
}
.acmtitle {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding:0 5% 20px;
}
.acmtitle h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  text-align: center;
  color: var(--color-1st);
  margin:0;
  order:2;
}
.acmtitle p {
  font-size: 60px;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1em;
  text-align: center;
  color: var(--color-black);
  margin:0 0.2em 0 0;
  order:1;
}
.accap-car {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/header/ic-acc_car.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 30px;
  padding:0 0 0 40px;
  font-size:16px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}
.accap-train {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/header/ic-acc_train.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 30px;
  padding:0 0 0 40px;
  font-size:16px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}
.acm_com {
  font-size:14px;
  line-height: 2em;
}

/* Stock */
.stockmm ul {
  width:100%;
  height: auto;
  display: flex!important;
  flex-wrap: wrap;
  margin:0 auto;
  padding:50px 5%;
}
.stockmm ul li {
  width:46%;
  height: auto;
  display: block;
  margin:0 2% 30px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}


/* News */
.newsdata {
  width:100%;
  max-width:1920px;
  height: auto;
  display: block!important;
  margin:0 auto;
  padding:50px 5%;
}
.newslist {
  width:100%;
  height: auto;
  display: flex!important;
  flex-wrap: wrap;
  margin:30px auto 0;
}
.newslist li {
  width:46%;
  height: auto;
  display: block;
  margin:0 2% 30px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}


/* About service icons */
ul.int_servicelist {
  width:100%;
  height: auto;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:0 auto;
}
ul.int_servicelist li {
  width:31.3333333333%;
  height: auto;
  display: block;
  font-size:16px;
  letter-spacing: 0px;
  font-weight: 700;
  line-height: 1em;
  color: var(--color-white);
  text-align: center;
  padding:120px 0 30px 0;
  border:1px solid rgba(255,255,255,0.4);
  border-radius: 5px;
  background-color: rgba(0,0,0,0.8);
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: auto 115px;
  margin:0 1% 2%;
}
ul.int_servicelist li span {
  display: block;
  font-size:10px;
  font-weight: 400;
  font-family: var(--font-en);
  color:var(--color-1st);
  padding:0.8em 0 0 0;
  margin:0;
}

/* About image line */
.abimgline01 {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}
.abimgline01 figure {
width: 98%;
height: auto;
display: block;
margin:1%;box-shadow:0px 5px 15px rgba(0,0,0,0.25);
}

.abimgline02 {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.abimgline02 figure {
  width:49%;
  height: auto;
  display: block;
  margin:0.5%;box-shadow:0px 5px 15px rgba(0,0,0,0.25);
}

}


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

  /* Pagetitle */
.pagetitle {
  width:100%;
  height: auto;
  aspect-ratio: 4 / 2.8;
  display: block;
  position: relative;
  margin-top: 80px;
}
.ptcov {
  width:100%;
  height: auto;
  aspect-ratio: 4 / 2.8;
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index:10;
  background-image: url(../img/pagetitle/ptcov.webp);
  background-repeat: no-repeat;
  background-position: right 40%;
  background-size: 90% auto;
}
.ptbg {
width:100%;
height: auto;
display: block;
aspect-ratio: 5 / 2;
position: absolute;
top: 0;
right:0;
z-index: 1;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 30% 100%);
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}

.ptcc {
  width:100%;
  height: auto;
  aspect-ratio: 5 / 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding:0 0 0 5%;
  position: absolute;
  bottom:0;
  right:0;
  z-index: 110;
}
.ptcc h2 {
font-size: clamp(14px, 1.25vw, 28px);
font-weight: 500;
line-height: 1.5em;
letter-spacing: 0em;
color:var(--color-black);
margin:0 0 1em 0;
order:2;
}
.ptcc p {
  font-size: clamp(45px, 10vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  margin:0 0 0.1em 0;
  order:1;
}
    
.ptcc p.maintenance-blog {
  font-size: clamp(36px, 3vw, 180px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  margin:0 0 0.1em 0;
  order:1;
}        
    
.ptcc ul {
  width:100%;
  height: auto;
  display: flex;
  order:3;
}
.ptcc ul li {
  font-size:14px;
  line-height: 1.5em;
  margin:0;
  color:var(--color-black);
}
.ptcc ul li:after {
  content:" > ";
  margin-right:0.5em;
}
.ptcc ul li:last-child:after {
content:"";
margin-right:0;
}

/* Common */
main {
  width:100%;
  height: auto;
  display: block;
  padding:0px 0 15%;
}


/* Access */
.accessmm {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:50px 5% 35%;
}
.acm01 {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 50px;
}
.acm01 iframe {
  width: 100%;
  height: 500px;
  display: block;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.acm02 {
  width:100%;
}
.acmtitle {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding:0 5% 20px;
}
.acmtitle h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  text-align: center;
  color: var(--color-1st);
  margin:0;
  order:2;
}
.acmtitle p {
  font-size: 60px;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1em;
  text-align: center;
  color: var(--color-black);
  margin:0 0.2em 0 0;
  order:1;
}
.accap-car {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/header/ic-acc_car.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 30px;
  padding:0 0 0 40px;
  font-size:16px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}
.accap-train {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/header/ic-acc_train.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 30px;
  padding:0 0 0 40px;
  font-size:16px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}
.acm_com {
  font-size:14px;
  line-height: 2em;
}


/* Stock */
.stockmm ul {
  width:100%;
  height: auto;
  display: flex!important;
  flex-wrap: wrap;
  margin:0 auto;
  padding:50px 5%;
}
.stockmm ul li {
  width:100%;
  height: auto;
  display: block;
  margin:0 1% 30px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}

/* News */
.newsdata {
  width:100%;
  max-width:1920px;
  height: auto;
  display: block!important;
  margin:0 auto;
  padding:50px 5%;
}
.newslist {
  width:100%;
  height: auto;
  display: flex!important;
  flex-wrap: wrap;
  margin:30px auto 0;
}
.newslist li {
  width:98%;
  height: auto;
  display: block;
  margin:0 1% 30px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}


/* About service icons */
ul.int_servicelist {
  width:100%;
  height: auto;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:0 auto;
}
ul.int_servicelist li {
  width:46%;
  height: auto;
  display: block;
  font-size:14px;
  letter-spacing: 0px;
  font-weight: 700;
  line-height: 1.25em;
  color: var(--color-white);
  text-align: center;
  padding:110px 0 20px 0;
  border:1px solid rgba(255,255,255,0.4);
  border-radius: 5px;
  background-color: rgba(0,0,0,0.8);
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: auto 115px;
  margin:0 2% 4%;
}
ul.int_servicelist li span {
  display: block;
  font-size:9px;
  font-weight: 400;
  font-family: var(--font-en);
  color:var(--color-1st);
  padding:0.5em 0 0 0;
  margin:0;
}

/* About image line */
.abimgline01 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.abimgline01 figure {
width: 98%;
height: auto;
display: block;
margin:1%;
  box-shadow:0px 5px 15px rgba(0,0,0,0.25);
}

.abimgline02 {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.abimgline02 figure {
  width:98%;
  height: auto;
  display: block;
  margin:1%;
  box-shadow:0px 5px 15px rgba(0,0,0,0.25);
}

}