/*
Theme Name: Id PHYSIO
Theme URI: https://id-physio.com.my
Description: Id PHYSIO Exclusive Theme
Version: 1.0
Author: 
Author URI: 
*/

/* wordpress blog */
img.alignright { display: block; margin: 0 0 0 auto; }

img.alignleft { display: block; margin: 0 auto 0 0; }

img.aligncenter { display: block; margin: 0 auto; }

.mt-10px{margin-top:10px !important;}

.mt-20px{margin-top:20px !important;}

.mt-30px{margin-top:30px !important;}

.mt-40px{margin-top:40px !important;}

.mt-50px{margin-top:50px !important;}

.mt-60px{margin-top:60px !important;}

.mt-70px{margin-top:70px !important;}

.mt-80px{margin-top:80px !important;}

.mt-90px{margin-top:90px !important;}

.mt-100px{margin-top:100px !important;}

.mb-10px{margin-bottom:10px !important;}

.mb-20px{margin-bottom:20px !important;}

.mb-30px{margin-bottom:30px !important;}

.mb-40px{margin-bottom:40px !important;}

.mb-50px{margin-bottom:50px !important;}

.mb-60px{margin-bottom:60px !important;}

.mb-70px{margin-bottom:70px !important;}

.mb-80px{margin-bottom:80px !important;}

.mb-90px{margin-bottom:90px !important;}

.mb-100px{margin-bottom:100px !important;}

.mb-120px{margin-bottom:120px !important;}

.img-80per{width:80%; margin-inline:auto; display:block;}

a{color:inherit; text-decoration:underline;}

a:hover{color:inherit; text-decoration:none;}

a:hover img.hoverImg{opacity:0.6;}

.flex-box {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-height {display: flex; align-items: center;}

.btn{white-space:normal; padding-left:1.75rem; padding-right:1.75rem;}

@media screen and (max-width: 767px){
 .btn{padding-left:1.75rem; padding-right:1.75rem;}
}

.container {max-width: 1530px;}

@media screen and (max-width: 1540px){
.container {max-width: 1430px;}
}

@media screen and (max-width: 1440px){
.container {max-width: 95%; padding-left:2.5%; padding-right:2.5%;}
}

@media screen and (max-width: 767px){
.container {max-width: 100%;}
}

.img-center{display:block; margin-left:auto; margin-right:auto;}

html{font-size:17.5px;}

body{font-family: "IBM Plex Sans", sans-serif; line-height:1.6rem;}

@media screen and (max-width:1199px){
 html{font-size:1.3vw;}
}

@media screen and (max-width:991px){
 html{font-size:1.75vw;}
}

@media screen and (max-width:767px){
 html{font-size:3.5vw;}
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family: "IBM Plex Sans", sans-serif; font-weight:700;}

h1,.h1{line-height:3.5rem;}

h2,.h2{line-height:3rem;}

h3,.h3{line-height:2.75rem;}

h4,.h4{line-height:2.5rem;}

h5,.h5{line-height:2rem;}

h6,.h6{line-height:1.75rem;}

@media screen and (max-width:767px){
 h1,.h1{line-height:2.7rem;}

 h2,.h2{line-height:2.45rem;}

 h3,.h3{line-height:2.25rem;}

 h4,.h4{line-height:2rem;}

 h5,.h5{line-height:1.8rem;}

 h6,.h6{line-height:1.6rem;}
}

.text-warning{color:#e5b53e !important;}

.text-warning-darker{color:#d5a223 !important;}

.text-primary{color:#17184B !important;}

.bg-beige{background-color:#fff8e7 !important;}

.bg-beige-darker{background-color:#fff2d2 !important;}

.bg-primary{background-color:#17184B !important;}

.bg-warning{background-color:#dbae48 !important;}

.anchor-absolute{position:absolute; margin-top:-140px;}

/* header */
#header-top{padding-top:5px; padding-bottom:5px;}

#logo-header{width:280px; -webkit-transition: ease .25s; transition: ease .25s;}

.small-header{box-shadow: 0 0 4px grey; background-color:rgba(255, 255, 255, 0.85);}

.small-header #logo-header{width:200px; -webkit-transition: ease .25s; transition: ease .25s;}

.navbar-expand-lg .navbar-nav .nav-link{padding-left:1rem; padding-right:1rem;}

.social-icn a{font-size:1.25rem;}



@media screen and (max-width:991px){
 .navbar-nav{text-align:center;}
}

@media screen and (max-width:767px){
 #logo-header, .small-header #logo-header{width:200px;}
}

/* Fixed Navigation */
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9000;
    box-shadow: 0 0 4px grey;
    -webkit-transition: ease .25s; transition: ease .25s;
}

/* footer */
footer{padding-top:35px; padding-bottom:35px;}

footer ul{list-style:none; padding-left:0; display: flex; justify-content: center; align-items: center; list-style: none; margin-bottom:30px;}

footer ul li{float:left; border-right:1px solid #212529; padding-right:15px; margin-right:15px;}

footer ul li:last-child{border:none; margin-right:0;}

@media screen and (max-width:991px){
footer ul{text-align:center; display:block;}
	
footer ul li{float:none; border:none; padding-right:0; margin-right:0; margin-bottom:13px;}
}

/* footer sticky */
.footer-sticky{display:none;}

@media screen and (max-width:991px){
.footer-sticky {
  display:block;
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  background: rgba(255, 255, 255, 0.85);
  z-index:500;
  border-top: 1px solid #cacaca;
  text-align:center;
  padding-top:.85rem;
  padding-bottom:.85rem;
}

.footer-sticky i{font-size:1.75rem; color:#d5a223;}
 
.footer-sticky .row .col-8{border-right:1px solid #cacaca;}
 
.footer-sticky .row .col-8:last-child{border:none;}
}

/* mutual */
.sec-padding-45px{padding-top:45px; padding-bottom:45px;}

.sec-padding-90px{padding-top:90px; padding-bottom:90px;}

.sec-padding-120px{padding-top:120px; padding-bottom:120px;}

.sec-ttl{font-size:4rem; line-height:4.25rem;}

.sec-ttl-sm{font-size:3.5rem; line-height:3.75rem;}

@media screen and (max-width:767px){
 .sec-padding-120px, .sec-padding-90px{padding-top:45px; padding-bottom:45px;}

 .sec-ttl{font-size:3rem; line-height:3.25rem;}

 .sec-ttl-sm{font-size:2.5rem; line-height:2.75rem;}
}

@media screen and (max-width:1549px){
 .footer-ttl{font-size:2.75rem;}
}

@media screen and (max-width:1399px){
 .footer-ttl{font-size:3.25rem;}
}

.footer-info-box{min-height:300px;}

@media screen and (max-width:1199px){
 .footer-info-box{min-height:auto;}
}

/* home */
#hero-img{padding-top:140px; padding-bottom:140px; background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/themes/id-physio/images/hero-img.webp') center center no-repeat; background-size:cover;}

#hero-img h2{font-size:5rem; line-height:5.25rem;}

#hero-img .fs-3{line-height:2.25rem;}

.hero-img-page-services{background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/themes/id-physio/images/hero-img-page-services.webp') center center no-repeat !important; background-size:cover !important;}

.hero-img-page-about{background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/themes/id-physio/images/hero-img-page-about.webp') center center no-repeat !important; background-size:cover !important;}

#sec-home-services{background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/wp-content/themes/id-physio/images/bg-section-home-services.webp') center center no-repeat; background-size:cover;}

@media screen and (max-width:767px){
 #hero-img{padding-top:90px; padding-bottom:90px; background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/themes/id-physio/images/hero-img-mobile.webp') center center no-repeat; background-size:cover;}
 
 .hero-img-page-services{background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/themes/id-physio/images/hero-img-mobile-page-services.webp') center center no-repeat !important; background-size:cover !important;}

 .hero-img-page-about{background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/themes/id-physio/images/hero-img-mobile-page-about.webp') center center no-repeat !important; background-size:cover !important;}

 #hero-img h2{font-size:3.5rem; line-height:4rem;}
}

/* page */
:root{
  /*--gap: clamp(10px, 2vw, 16px);*/
  --flag-padding: clamp(18px, 2.6vw, 28px) clamp(38px, 4.8vw, 55px);
  --radius: 18px;
}

.steps-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.steps{
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap) var(--gap);
  align-items: start;
  width: 1250px; /* ← ここで“PC版の見た目”を固定 */
}

.step{ display: grid; gap: 14px; width:25%;}

.flag {
  position: relative;
  background: var(--c, #222);
  color: #f8f9fa;
  border-radius: 0 24px 24px 0; /* 右だけ丸みを残す */
  padding: var(--flag-padding);
  font-weight: 700;
  line-height: 1.1;
  clip-path: polygon(
    0 0,
    calc(100% - 35px) 0,
    100% 50%,
    calc(100% - 35px) 100%,
    0 100%,
    35px 50%
  );
}

/* 説明文 */
.desc{
  margin:0;
  padding:0 15px 0 5px;
  text-align: center;
  font-size:1.1rem;
}

@media (max-width: 1439px){
 .steps{width:1150px;}
}

/* レスポンシブ（タブレット以下は2列、モバイルは1列） */
@media (max-width: 767px){
 .steps{width:1000px;}
}

#page-faq p{position:relative; padding-left:45px;}

#page-faq ul{padding-left:50px;}

.faqs-symbol{font-weight:700; font-size:1.3rem; position:absolute; left:0; top:-3px; padding:3px 6px 6px; border-radius:4px; color:#f8f9fa;}

ul.checked{list-style:none; padding-left:2px; padding-right:20px; margin-bottom:0;}

ul.checked li{padding-left: 1.5rem; margin-bottom:8px;}

ul.checked li:before{content: '\f00c'; /* FontAwesome Unicode */
  font-family: 'Font Awesome 7 Pro';
  display: inline-block;
  margin-left: -1.5rem; /* same as padding-left set on li */
  width: 1.5rem; /* same as padding-left set on li */
  color:#d57b29;
  }

ul.checked li:last-child{margin-bottom:0;}

ul.checked{list-style:none; margin-top:.5rem; padding-left:0;}

.anchor-absolute{position:absolute; margin-top:-225px; top:unset;}

/* Back to Top */
#return-to-top {
    z-index:1000;
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: rgba(248, 201, 84, 0.75);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    z-index:1200;
    color: #fff;
    margin: 0;
    position: relative;
    left: 13px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}