@charset "UTF-8";

body {
    font-family: "Helvetica Neue", "Helvetica", "Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 500!important;
}

a {
    text-decoration: none;
}

.anchorlink a{
    color: #000!important;
    text-decoration: none!important;
    opacity: 1!important;
}

li {
    line-height: 1.8;
}

.cparts-header-block__logo {
    font-weight: 600;
}

.siteblock-main {
    padding-top:10px;
}

.siteblock-bottom a {
    text-decoration: none!important;
}

h1 {
    font-weight: 700;
}

.topicsList h1{
    margin-top: 50px;
}

h2 {
    font-size:2rem;
    font-weight: 600;
}

h2.title-en{
    font-size: 5rem!important;
    color: #F08200;
    margin-bottom:-500px!important;
}

h2.cparts-id615__ttl .parts_h_type16_ja {
    color: #fff;
    font-weight:800;
}

h2.intro-title {
    text-align: center!important;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px!important;
    width: auto!important;
}

h2.case-title {
    text-align: center!important;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px!important;
    width: auto!important;
}

h2.title-back {
    width: 100%;
    background:#ffecd6;
    border-radius: 7px;
    text-align: center;
    font-size: 1.5rem;
    padding: 20px;
}

h2.case-ttl{
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0px!important;
}

.siteblock-main h2::before {
    background: 0px!important; 
}

.siteblock-main h2::after {
    background: 0px!important;
}

.br-lg-sm{
    display: none;
}

.siteblock-header {
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (min-width: 1200px) {
    .siteblock-header > div > *.sitedesign-headerparts__nofull + .sitedesign-headernav, .siteblock-header > div > *.sitedesign-headerparts__nofull + [id*="EDIT-navigation"] {
        margin-bottom: 0;
        width: calc(60% - 40px);
    }
}


@media (min-width: 1200px) {
    .siteblock-header > div > *.sitedesign-headerparts__nofull {
        width: 35%;
    }
}


#logo.cparts-header-block__logo a {
    font-size: 2.1rem;
    color:#F08200;
}

.prefix{
    font-size: 1rem;
    margin-bottom: 5px!important;
}

.ruby-en{
    font-size: 0.9rem;
    margin-top: 5px;
}

.bluetxt {
    color: #F08200;
}

.aomidoritxt {
    color: #58bfbf;
}

.intro-title-txt {
    font-weight: 600;
}

.title-back-space {
    margin-bottom: 30px!important;
}


.siteblock-main h3::before, 
.siteblock-opt1 h3::before {
    background-color: transparent;
}

.cparts-header-block__logo{
    margin: 10px 0 10px 40px;
}

.siteblock-upper{
    margin-top: -25px;
    background: linear-gradient(180deg, #fff 0%, #fff 50%, #fff 50%, #fff 100%);
}

.main-slider {
    position: relative;
    margin-right: calc(50% - 50vw);
    margin-left: 100px;
    width: 100vw;
    border-radius:30px 0 0 0;
}

#slick-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px 0 0 0;
}

.main-slider-txt h1 {
    color:#fff!important;
    font-size: 3rem!important;
    font-weight: 800;
    text-shadow: 0px 0px 10px rgba(240,130,0, 0.8)!important;
}

.main-slider-txt p {
    color:#fff!important;
    font-weight: bold;
    font-size: 20px!important;
    text-shadow: 0px 0px 10px rgba(240,130,0, 0.8)!important;
}

.main-slider-txt {
    position: absolute;
    right: 8%;
    bottom: 70px;
    left: 8%;
    z-index: 3;
    width: 100%;
    max-width: 850px;
}

.main-slider-txt-wh {
    position: absolute;
    right: 8%;
    bottom: 0px;
    right: revert-layer;
    left: 0px;
    z-index: 3;
    width: 100%;
    max-width: 680px;
    background: #fff;
    border-radius: 0 40px 0px 0px;
    padding: 50px 0px 40px;
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.main-slider-txt-wh h1 {
    color:#F08200!important;
    font-size: 2.3rem!important;
    margin-bottom: 10px!important;
    font-weight: 800;
    line-height: 1.5!important;
}

.main-slider-txt-wh p {
    font-weight: bold;
    font-size: 20px!important;
    margin-bottom: 2px!important;
}

.main-slider .slick-slide img {
    max-width: 100%;
    width: 100%;
    height: 80vh;/*92vh 769px*/
    object-fit: cover;
    border-radius:30px 0 0 0;
}

.main-pr {
    display: flex;
    justify-content: space-between;
}

.main-pr-list {
    width: 23%;
    border-radius: 10px;
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #F08200;
    background:linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      white 50%,
      white 100%
    ),
    url("https://koshc.a-tool.jp/koshc/images/top/back-dot.png");
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 5px 5px; 
    background-position: top left, top left;
}

.main-pr-list-box {
    max-width: 100px;
    width: 100%;
    height: 100px;
    margin: 0 auto;
}

.main-pr-list img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0rem!important;
}

.main-pr-list-txt {
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 0;
    font-weight: 700;
    background: #F08200;
    color: #fff;
    border-radius: 5px;
    line-height: 1.2rem;
}


.main-pr-list-txt-aomidori{
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 0;
    font-weight: 700;
    background: #58bfbf;
    color: #fff;
    border-radius: 5px;
    line-height: 1.2rem;
}

.main-pr-list-txt-ao{
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 0;
    font-weight: 700;
    background: #288DD8;
    color: #fff;
    border-radius: 5px;
    line-height: 1.2rem;
}

.main-pr-list-txt-kimidori{
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 0;
    font-weight: 700;
    background: #64ae64;
    color: #fff;
    border-radius: 5px;
    line-height: 1.2rem;
}

.main-pr-list-txt-pink{
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 0;
    font-weight: 700;
    background: #ec7085;
    color: #fff;
    border-radius: 5px;
    line-height: 1.2rem;
}

.sodan-pr {
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    padding-right: calc((50% - 50vw) * -1) !important;
    padding-left: calc((50% - 50vw) * -1) !important;
    width: auto !important;
    max-width: none !important;
    background: #f5f2f0;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    margin-top: 20px;
    padding: .9em 2em;
    border: 2px solid #F08200;
    border-radius: 25px;
    background-color: #F08200;
    color: #fff!important;
    font-size: 1em;
    letter-spacing: 0.05rem;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(240, 130, 0, 0.2) !important;
}

.button-1::after {
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.button-1:hover{
   border: 2px solid #F08200!important;
   color:#F08200!important;
   background: #fff!important;
}

.button-1:hover::after {
    border-top: 2px solid #F08200;
    border-right: 2px solid #F08200;
}

.button-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1em 2em;
    border-radius: 35px;
    background-color: #fff;
    color: #58bfbf;
    font-size: 1.4em;
    letter-spacing: 0.05rem;
    font-weight: 600;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(80, 171, 171, 0.8) !important;
}

.button-2::after {
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    margin-left: 10px;
    border-top: 2px solid #58bfbf;
    border-right: 2px solid #58bfbf;
    content: '';
}

.button-2:hover{
   border: 2px solid #58bfbf!important;
   color:#58bfbf!important;
   background: #fff!important;
   transform: scale(1.03);
}

.button-2:active {
  transform: scale(0.98);
}

.siteblock-upper a {
    text-decoration: none;
}

.casetable-inner td{
    border-radius: 30px important;
}

.siteblock-main .casetable-inner table td {
    border-radius: 30px important;
}

.casetable-space {
    background: #ffecd6 important;
}

.casetable table {
    display:none important;
    overflow-x: auto!important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: unset !important;
    max-width: 100% !important; 
    width: 100% !important;
    border-collapse: separate !important;
}

.casetable .cparts-table-block {
    display: block!important;
    overflow-x: auto!important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: unset !important;
    width: 100% !important;
    display:block!important;
}

.casetable .cparts-table-block tbody {
    flex-direction: column;
    min-width: unset !important;
    max-width: 600px !important; 
    width: 100% !important;
}


.casetable table tr{
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: unset !important;
    max-width: 600px !important; 
}


.casetable table tb{
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: unset !important;
    max-width: 600px !important; 
    border-color: #58bfbf!important;
}

.casetable .siteblock-main table td{
    border-color: #58bfbf!important;
}

.casetable .lay-col12-xs-12{
    padding-right: 0px!important;
}

@media (min-width: 768px) {
.casetable .lay-col12-md-3{
    flex: 0 0 37%;
    max-width: 35%;
}

.casetable .lay-col12-md-9 {
    -ms-flex: 0 0 63%;
    flex: 0 0 63%;
    max-width: 63%;
}
}

.casetable-inner table td {
    border-radius: 30px !important;
    background: #F5F2F0!important;
    border-color: #fff!important;
    padding-left: 30px!important;
}

.case {
    border-radius: 7px!important;
    margin-bottom: 20px!important;
}

.case .lay-margin-t--1 {
    margin-top: 0!important;
    margin-bottom: 0!important;
    padding: 20px!important;
    border-radius: 7px!important;
    border: 1px solid #F08200!important;
    font-weight: 600!important;
}

.case .cparts-editsite--txt {
    padding: 20px;
    border-radius: 7px;
    border: 1px solid #F08200;
    font-weight: 600;
}

.case-contact {
    color: #fff;
    background: #58bfbf;
    padding: 40px;
    border-radius: 10px;
}

.case-contact-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.case-contact-flex a{
    text-decoration: none;
}

.case-contact-list-txt {
    font-size:1.3rem;
    font-weight: 600;
    margin-bottom: 0px;
    text-align: justify;
}

.case-contact-list {
    width: 48%;
    border-right:1px solid #fff;
}

.case-contact-link {
    width: 48%;
    color: #58bfbf;
}

.link-underline a{
    text-decoration: none!important;
    color: #000!important;
}

.en-subtitle-center{
    color: #F08200;
}

.en-subtitle{
    color: #F08200;
}

.en-subtitle::before{
    content: "";
    display: inline-block; 
    vertical-align: middle;
    width: 30px;
    height: 1px;
    background: #F08200;
    margin-right: 12px;
}

.en-subtitle-center-space{
    margin-bottom: 20px!important;
}



.img-dot-right{
    position: relative!important;
}

.img-dot-right:before{
    content: "";
    position: absolute;
    top:-75px;
    left: -30px;
    width: 150px!important;
    height: 150px!important;
    background: url("https://koshc.a-tool.jp/koshc/images/top/dot.png") no-repeat;
    background-size: 100%;
}


.img-dot-right:after{
    content: "";
    position: absolute;
    bottom:-80px;
    right: -30px;
    width: 150px!important;
    height: 150px!important;
    background: url("https://koshc.a-tool.jp/koshc/images/top/dot.png") no-repeat;
    background-size: 100%;
}



.img-dot-left{
    position: relative!important;
}

.img-dot-left:before{
    content: "";
    position: absolute;
    top:-50px;
    right: -30px;
    width: 150px!important;
    height: 150px!important;
    background: url("https://koshc.a-tool.jp/koshc/images/top/dot.png") no-repeat;
    background-size: 100%;
}

.img-dot-left:after{
    content: "";
    position: absolute;
    bottom:-50px;
    left: -30px;
    width: 150px!important;
    height: 150px!important;
    background: url("https://koshc.a-tool.jp/koshc/images/top/dot.png") no-repeat;
    background-size: 100%;
}



.contact{
    background: #fff;
    padding-bottom: 20px;
    border-radius: 30px;
}

.contact-head{
    color: #fff;
    background:#58bfbf;
    padding: 40px 30px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 30px 30px 0 0;
    text-align: justify!important;
}

.contact-txt{
    padding: 20px 20px 5px 20px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
}

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

.contact-tel{
    width: 50%;
    text-align: center;
    margin: 0 auto;
}

.contact-mail{
    width: 50%;
    text-align: center;
    padding-bottom:20px;
}

.slider-tel-number{
    font-size: 2.7rem;
    font-weight: 800;
}

.slider-tel-number::before{
  content: "";      
  display: inline-block;   
  width: 40px;      
  height: 40px;          
  background-image: url('https://koshc.a-tool.jp/koshc/images/top/tel.png');
  background-size: contain;     
  background-repeat: no-repeat;  
  background-position: center; 
  margin-right: 8px;
  margin-bottom: 5px;
  vertical-align: middle;    
}
    

.tel-number{
    font-size: 2.7rem;
    font-weight: 800;
}

.tel-number::before{
  content: "";      
  display: inline-block;   
  width: 40px;      
  height: 40px;          
  background-image: url('https://koshc.a-tool.jp/koshc/images/top/tel.png');
  background-size: contain;     
  background-repeat: no-repeat;  
  background-position: center; 
  margin-right: 8px;
  margin-bottom: 5px;
  vertical-align: middle;    
}
    
.free{
    display: inline-block;
    width: 195px;
    color: #F08200;
    border:#F08200 2px solid ;
    border-radius: 17px;
    padding: 7px 15px;
    margin: 10px 0;
    font-weight: 700;
}

.button-mail-link{
    color: #fff!important;
    background: #58bfbf;
    padding: 30px;
    border: 2px solid #58bfbf!important;
    border-radius: 40px;
    font-size: 1.3rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(80, 171, 171, 0.5) !important;
}

.button-mail-link:hover{
   border: 2px solid #58bfbf!important;
   color:#58bfbf!important;
   background: #fff!important;
}


.button-mail:before{
  content: "";      
  display: inline-block;   
  width: 20px;      
  height: 20px;          
  background-image: url('https://koshc.a-tool.jp/koshc/images/top/mail.png');
  background-size: contain;     
  background-repeat: no-repeat;  
  background-position: center; 
  margin-right: 8px;  
  margin-bottom: 5px;
  vertical-align: middle;    
}

.button-mail:hover::before{
   background-image: url('https://koshc.a-tool.jp/koshc/images/top/mail-color.png');
}



.bh{
    font-size: 1.2rem;
    font-weight: bold;
}

.txt-center p{
    text-align: left!important;
}

.cta-contact{
    position: relative;
    background: #e6f5f5;
    padding: 30px 50px;
    border-radius: 30px;
}

.cta-contact-flex{
    display:flex ;
    align-items: start;
    justify-content: space-between;
}

.contact-list{
    width: 49%;
    border-right: 1px solid #58bfbf;
}

.contact-list:last-child{
    border-right: 0px;
}

.contact-list dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.contact-list dt{
    width: 15%;
    text-align: center;
    color: #fff;
    padding: 5px;
    font-weight: bold;
}

.contact-list dt span{
    display: block;
    background: #58bfbf;
    padding: 5px 0;
    border-radius: 5px;
}

.contact-list dd{
    width: 83%;
}

.contact-subtitle{
    color: #58bfbf;
    text-align: center;
    margin: 10px 0;
}

.cta-contact h3{
    color: #58bfbf;
    text-align: center!important;
    margin-top: 0px!important;
    padding-left:0px!important;
}

.cta-contact h3::before {
    background-color: transparent;
}

.cta-contact h3::after {
    background-color: transparent;
}

.contact-list-txt p{
    margin-bottom: 0px;
}

.contact-mail-txt{
    margin-bottom: 60px;
}

.cta-contact-mail{
    text-align: center;
}

.cta-button-mail{
    color: #fff;
    background: #58bfbf;
    padding: 30px;
    border-radius: 15px;
    font-size: 1.3rem;
    font-weight: bold;
}

.cta-contact-mail span::before{
  content: "";      
  display: inline-block;   
  width: 30px;      
  height: 30px;          
  background-image: url('https://koshc.a-tool.jp/koshc/images/top/mail.png');
  background-size: contain;     
  background-repeat: no-repeat;  
  background-position: center; 
  margin-right: 8px;      
  vertical-align: middle;    
}

.cta-subtitle {
    color: #58bfbf;
    font-weight: bold;
}

.cta-subtitle::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 1px;
    background: #58bfbf;
    margin-right: 12px;
}

.topicsList {
    margin-top: 50px;
}

.mailForm h1 {
    margin-top: 50px;
}


@media (min-width: 768px) {
    
    .br-pc {
        display: none;
    }
    
    .siteblock-upper {
        padding-top: 0px;
    }
    
    h1 {
        font-size: min(2.4em, 8vw)!important;
    }
}


@media (max-width: 1600px) {
#logo.cparts-header-block__logo a {
    font-size: 1.5rem!important;
}

.sitedesign-headernav-group li.menu-level-0 > a, .sitedesign-headernav-group li.menu-level-0 > div {
    font-size: 15px;
}
}


@media (max-width: 1400px) {
#logo.cparts-header-block__logo a {
    font-size: 1.3rem!important;
}
.sitedesign-headernav-group li.menu-level-0 > a, .sitedesign-headernav-group li.menu-level-0 > div {
    padding: 8px;
}
}


@media (max-width: 1280px) {
.br{
    display: none;
}       

.br-lg-sm{
    display: none;
}      
    
.main-slider {
    margin-left: 80px;
}

.main-slider-txt-wh {
    max-width: 450px;
    padding-top: 35px;
    display: block!important;
}

.main-slider-txt-wh h1 {
    color: #F08200 !important;
    font-size: 1.8rem !important;
    font-weight: 800;
    margin-bottom: 15px!important;
    padding: 0px 10px!important;
}

.main-slider-txt-wh p {
    font-weight: bold;
    font-size: 1rem !important;
    margin-bottom: 0px!important;
    padding-left: 15px;
}

.button-1{
    margin-left: 15px;
}
}

@media (max-width: 1000px) {


.sitedesign-headernav-group {
    margin-bottom: 30px;
}
.contact-flex{
   flex-direction: column;
}

.contact-list {
    width: 100%;
    border-right:0px;
    border-bottom:1px solid #58bfbf;
    margin-bottom: 30px;
}   

.contact-list:last-child {
    border-bottom:0px;
}  

.cta-contact {
    padding: 30px;
} 

.contact-txt {
    padding: 20px 30px 5px 30px;
    text-align: left;
} 

.contact-mail {
    padding: 20px 0 60px 0;
}
} 

@media (max-width: 768px) {

.br-sp{
    display: none;
}   

    
.cparts-header-block__logo {
    margin: 12px 0 13px 20px!important;
}

.ruby-en {
    font-size: 0.6rem;
}

.prefix {
    font-size: 0.7rem;
}

.sitedesign-headernav-button {
    margin-right: 12px;
    margin-top: 5px;
    border-radius: 4px;
}

.siteblock-header.sitedesign-fixed {
    margin-right: -16px;
    margin-top: -5px;
}

.siteblock-upper {
    margin-top: -55px;
}

.main-slider {
    margin-left: 40px;
}

.main-slider .slick-slide img {
    height: 400px;
     object-fit: cover;
}

.main-slider-txt {
    max-width: 350px;
}

.main-slider-txt-wh {
    position:static;
    max-width: 100%;
    display: block;
    padding-top: 0px!important;
    padding-right: 100px;
}

.main-slider-txt h1{
    font-size: 2rem !important;
    margin-bottom: 20px !important;
}

.main-slider-txt-wh h1 {
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
}


.main-slider-txt p{
    font-size: 1rem !important;
}

.main-slider-txt-wh p {
    font-size: 0.8rem !important;
    margin-bottom: 0px!important;
}

.slider-tel-number{
    font-size: 2rem;
}

.slider-tel-number::before {
    width: 30px;
    height: 30px;
    margin-left: 0px;
    margin-bottom: 5px;
}

.button-1 {
    margin-left: 0px!important;
}

.main-pr{
    padding: 20px;
    flex-wrap: wrap;
}

.main-pr-list {
    width: 47%;
    margin-bottom: 20px;
    padding: 20px;
}

.main-pr-list-box{
    max-width: 80px;
    height: 80px;
}

.button-1 {
    width: 100%;
    font-size: 0.8em;
}

.intro-title-txt {
    margin-bottom: 0px!important;
}

.under-space{
    margin-bottom: 5px!important;
}

.case {
    margin-top: 0px!important;
}

.case-contact-flex {
    flex-direction: column;
}

.case-contact-list {
    width: 100%;
    border-right: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
    text-align: justify;
}

.case-contact-link {
    width: 100%;
}

h2.intro-title{
     font-size: 1.4rem!important;
     line-height: 2.2rem;
     margin-bottom: 10px!important;
}

.intro-title-txt{
     text-align: left!important;
     margin-top: 10px!important;;
     padding: 0 30px;
}

h2.case-title{
     text-align: left!important;
     font-size: 1.2rem!important;
}   

.title-back-space{
    margin-top: 20px;
    margin-bottom: 20px!important;
}   

h2.title-back {
    font-size: 1.2rem;
}  

.case-contact-list-txt {
    font-size: 1rem;
}

.button-2 {
    font-size: 1rem;
}

.contact-inner{
    padding: 50px 30px!important;
}
.contact-inner .dec-btn--light{
    padding: 30px 30px!important;
    margin-top: 30px!important;
}

.cta-contact-flex{
    flex-direction: column;
}

.contact-tel,
.contact-mail{
    width: 100%;
}

.contact-list dl{
    flex-direction: column;
}
.contact-list dt {
    width: 100%;
}

.contact-list dt {
    margin-bottom: 10px;
}

.contact-list dd {
    width: 100%;
    margin-bottom: 20px;
}

.contact-mail-txt {
    margin-bottom: 35px;
}

.button-mail-link {
    padding: 20px;
    font-size: 1rem;
}

.button-mail-link:before {
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
}

.casetable-space {
    padding-left: 0px!important;
    margin-bottom: -70px!important;
}

.cparts-id260 .cparts-txt-block a[class*="dec-btn"] {
    font-size: 0.8rem;
}

div[col-flex*="1"] .lay-row > .lay-col12-xs-12:not(:first-child){
    margin-top: 1rem!important;
}

.img-dot-right:before,
.img-dot-left:before{
    top: -55px;
    width: 100px !important;
    height: 100px !important;
}

.img-dot-right:after,
.img-dot-left:after {
    bottom: -20px;
    width: 100px !important;
    height: 100px !important;
}



}


@media (max-width: 450px) {
    
    #logo.cparts-header-block__logo a {
        font-size: 1rem !important;
    }
    
    .cparts-header-block__logo {
        margin: 20px 0 8px 0px !important;
    }
    
    .sitedesign-headernav-button {
        margin-right: 0px; 
    }
    
    .main-slider {
        margin-left: 20px;
    }
    
    .main-slider-txt{
        max-width: 280px;
    }
    
    .main-slider-txt-wh{
        padding: 30px 60px 30px 0px
    }
    
    .main-slider-txt-wh p {
        padding-left: 0px;
    }
    
    .main-slider-txt-wh h1 {
        margin-bottom: 10px !important;
        padding: 0px !important;
    }
    
    .main-pr{
    padding: 10px;
    }
    
    .main-pr-list{
    padding: 15px;
    }
    
    .button-1 {
    width: 100%;
    letter-spacing: 0.1rem;
    }
    
    .siteblock-header.sitedesign-fixed {
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 3px!important;
    padding: 6px 5px 15px 5px!important;
    }
    
    #slick-1 .slick-dots {
    left: -20px!important;
    }
    
    .main-pr-list-txt,
    .main-pr-list-txt-aomidori,
    .main-pr-list-txt-pink,
    .main-pr-list-txt-kimidori{
     font-size: 0.8rem;   
    }
    
    .main-pr-list {
    justify-content:normal;
    }

    .main-pr-list-txt,
    .main-pr-list-txt-aomidori,
    .main-pr-list-txt-pink,
    .main-pr-list-txt-kimidori {
    margin-top: 20px;
}

.tel-number {
    font-size: 1.8rem;
    font-weight: 800;
}
.tel-number::before {
    width: 30px;
    height: 30px;
}

.contact-txt {
    text-align: left;
    font-size: 1rem;
}

.contact-head {
    text-align: left;
}

.button-mail {
    padding: 20px;
    font-size: 1rem;
}

.contact-mail span::before {
    width: 20px;
    height: 20px;
}
}

/* ナビゲーションの配置エリアをスライダーの「右横」に固定 */
#slick-1 .slick-dots {
    position: absolute;
    top: 100px;             /* 上から50%の位置へ */
    left: -30px;          /* 右端からの余白（左に置きたい場合は left: 20px; に変更） */
    bottom: auto;         /* デフォルトの下配置をリセット */
    transform: translateY(-50%); /* 縦方向の真ん中にぴったり合わせる */
    
    display: flex !important;
    flex-direction: column; /* 縦並びにする */
    width: auto;          /* 横幅を自動（中身の棒の幅）にする */
}

/* 各ドット（リスト項目）の設定：今度は「縦棒」にする */
#slick-1 .slick-dots li {
    width: 4px;    /* 棒の「太さ」 */
    height: 30px;  /* 棒の「長さ」 */
    margin: 5px 0; /* 棒と棒の間の「上下」の余白 */
    padding: 0;
}

/* デフォルトの丸文字（•）を非表示にする */
#slick-1 .slick-dots li button::before {
    display: none;
}

#slick-1 .slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #ccc; 
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* アクティブ（現在表示中）の棒のスタイル */
#slick-1 .slick-dots li.slick-active button {
    background: #F08200; /* アクティブな時の棒の色 */
}