/*
Theme Name: 草刈設備
Theme URI: https://kusakarisetsubi.com//
Author: CPRC WORKS
Author URI: https://cprcworks.com
Description: 草刈設備 Original themes
Version: 1.0
*/

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
  
body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    color: #5F5955;
    background: #FFFCF8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a{
    color: #ffffff;
    text-decoration: none;
}

p{
    margin: 0;
    padding: 0;
}

ul,li,dt,dd{
    margin: 0;
    padding: 0;
}

li{
    list-style-type:none;
}

li a:hover{
    color: #312a23;
    transition: 0.3s ease-in-out;
}

nav li{
    font-weight: bold;
}

h1,h2,h3,h4,h5
{
    margin: 0;
}

.wrapper{
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
}


/*** adjust ***/
.m0{
    margin: 0;
}

.m10bt{
    margin-bottom: 10px;
}

.m20bt{
    margin-bottom: 20px;
}

.m30bt{
    margin-bottom: 30px;
}

.m40bt{
    margin-bottom: 40px;
}

.m50bt{
    margin-bottom: 50px;
}

.m60bt{
    margin-bottom: 60px;
}

.m10t{
    margin-top: 10px;
}

.m20t{
    margin-top: 20px;
}

.m30t{
    margin-top: 30px;
}

.m40t{
    margin-top: 40px;
}

.m50t{
    margin-top: 50px;
}

.m60t{
    margin-top: 60px;
}

/*** loading ***/
.loader-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }
  
  .loader {
    
  }

  /*** loading　typo ***/

.typo1{
    text-align: center;
    margin:0;
    line-height: 1;
    font-size:clamp(14rem, 6.273rem + 23.64vw, 27rem);
    color: #ffffff;
    font-family:'AurellySignatureSlantAlt';
  }

.typo2{
    text-align: center;
    margin: 0;
    font-size:clamp(2.5rem, 1.245rem + 1.27vw, 3.2rem);
    color: #ffffff;
    font-weight: bold;
}
  
  
  /*** loading　animation ***/
  
  .eachTextAnime span{opacity: 0;}
  .eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
  @keyframes text_anime_on {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  

/*** button ***/
.button__tel a {
    position: relative;
    margin: 0 auto;
    padding: 1em;
    color: #ffffff;
    transition: 0.3s ease-in-out;
    font-size: 2.4rem;
}

.button__tel a:hover {
    opacity: 0.8;
}

.button__contact a {
    border: solid 2px #ffffff;
    position: relative;
    margin: 0 auto;
    padding: 1em;
    color: #ffffff;
    transition: 0.3s ease-in-out;
}
.button__contact a:hover {
    background: #ffffff;
    color: #5F5955;
}

.button__link a {
    border: solid 2px #707070;
    background: rgba(255,255,255,0.5);
    position: relative;
    margin: 0 auto;
    padding: 1em;
    color: #5F5955;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.button__link a:hover {
    background: #BEBAB8;
    color: #ffffff;
}

.button__map a:hover{
    background: #BEBAB8;
    color: #ffffff;
}
    


/*header
--------------------------------------------------------------*/
header{
    width: 100%;
    position: fixed;
    z-index: 1000;
}

.header__inner{
    background: #5F5955;
    height: 140px;
    display: flex;
    align-items: center;
    padding: 0 40px;
}
.header__logo {
	width: 250px;
}
.header__logo a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.header__logo a img:nth-child(1) {
    width: 70px;
    height: auto;
    margin-right: 10px;
}
@media screen and (max-width: 480px) {
	header__logo a img:nth-child(1) {
    width: 40px;
	}
}


/* main 
--------------------------------------------------------------*/
.main__mvbox{
    position: relative;
	background: url(/wp-content/themes/wp_kusakari/images/main-bg.jpg) center top no-repeat;
    background-size: cover;
    height: 100vh;
}

.main__mvbox-inner{
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 36.9rem;
}

.main__busibox{
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%);
    background: url(/wp-content/themes/wp_kusakari/images/cp-bg.jpg) center top no-repeat;
    background-size: cover;
    padding: 10em 10em 20em 10em;
    display: flex;
    justify-content: end;
}

.main__cpbox{
    width: 100%;
    clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
    background: url(/wp-content/themes/wp_kusakari/images/busi-bg.jpg) center top no-repeat;
    background-size: cover;
    padding: 15em 10em 10em 10em;
    position: relative;
    top: -20vh;
}

.main__cpbox h2,
.main__busibox h2{
    font-family:'Anton';
    font-size:clamp(7rem, 3.455rem + 12.73vw, 14rem);
    font-weight: normal;
    color:transparent;
    -webkit-text-stroke: 2px #5F5955;
    letter-spacing:5px ;
    line-height: 1;
}

.main__cpbox span,
.main__busibox span{
    font-size:clamp(2.8rem, 2.607rem + 0.79vw, 3.2rem);
    font-weight: bold;
    color:#5F5955 ;
}

.main__cpbox p,
.main__busibox p{
    font-size:2.2rem ;
    font-weight: bold;
    color:#5F5955 ;
    margin: 3em 0;
}

.main__innerbox{
    width: 100%;
    padding: 25vh 40px;
    box-sizing: border-box;
}

.main__innerbox h2{
    font-family:'Anton';
    font-size:clamp(8rem, 7rem + 3.64vw, 10rem);
    font-weight: normal;
    color:transparent;
    -webkit-text-stroke: 2px #5F5955;
    letter-spacing:5px ;
    line-height: 1.2;
    margin-bottom: 30px;
}

.main__innerbox span{
    font-size:2.3rem ;
    font-weight: bold;
    color:#5F5955 ;
    line-height: 1;
}

.main__innerbox-lead{
    border-bottom: solid 1px #5F5955;
    padding-bottom: 1em;
}

.main__innerbox-content{
    width: 100%;
    display: flex;
    margin-top: 5em;
    margin-bottom: 10em;
    justify-content: space-between;
}

.main__innerbox-content_3c{
    width: 100%;
    display: flex;
    margin-top: 5em;
    margin-bottom: 10em;
    justify-content: space-around;
    box-sizing: border-box;
}

.main__innerbox-content-l{
    width: 50%;
}

.main__innerbox-content-r{
    width: 50%;
    padding: 0 0 0 5em;
}

.main__innerbox-content-r dl{
    width: 100%;
}

.main__innerbox-content-r dt{
    width: 20%;
    float: left;
    font-weight: bold;
}

.main__innerbox-content-r dd{
    width: 80%;
    padding-bottom: 2em;
}

.main__innerbox-item{
    flex: 1;
    padding: 0.5em;
}

.main__innerbox-item h3{
    font-size: 1.8rem;
    font-weight: bold;
    padding: 1em 0;
    text-align: center;
}

.main__innerbox-common{
    margin: 3em 0 10em;
}

.main__innerbox-common h3,
.main__innerbox-common p{
    margin-bottom: 2em ;
}

.main__innerbox-content_3c {
    width: 100%;
    display: flex;
    margin-top: 5em;
    margin-bottom: 10em;
    justify-content: space-around;
    box-sizing: border-box;
}

.main__inner-common { 
    margin-top: 5em;
    margin-bottom: 10em;
    text-align: center;
}

/**contact form7 customize**/

.contact__wrap {
    margin: 4em auto;
    text-align: left;
    max-width: 740px;
}

.contact__wrap dl,
.contact__wrap dt{
    margin: 2em 0;
}

.contact__wrap dt{
    font-weight: bold;
}

.contact__wrap-ex{
    margin: 3em auto;
    text-align: center;
    line-height: 2;
}

.contact__wrap-ex a{
    color: #5F5955;
    text-decoration: underline;
}

.contact__wrap-ex a:hover{
    color: #847e7b;
}

.wpcf7-validation-errors, .wpcf7-response-output {
    color: #db1818;
    background-color: #f7e5e5;
    border: 1px solid #EED3D7 !important;
    text-align: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: 1.75 !important;
    padding: 1em 1em !important;
  }
  
  input[type="text"] ,
  input[type="email"],
.wpcf7 input[type="tel"]{
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      box-sizing: border-box;
      border: none;
      padding: 32px 30px;
      width: 100%;
      border-radius: 0;
      font-size: 1.6rem;
      line-height: 1;
      margin: 0;
      height: 80px;
      vertical-align: central;
      border:solid 1px #666666;
  }
  
  textarea {
      box-sizing: border-box;
      width: 100%;
      height: 290px;
      padding: 30px;
      font-size: 1.6rem;
      border: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      line-height: 1.5;
    border:solid 1px #666666;
  }
  
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {	
      width: 100%;
      height: 70px;
      padding: 0;
      margin: 0;
      border: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      color: #FFFFFF;
      cursor: pointer;
      font-size: 14px;
      background: #666;
      transition: all .2s;
  }
  input[type="button"] {
      background: #a6a6a6;
  }
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
}


/* footer 
--------------------------------------------------------------*/
footer{
    background: #EDEBE8;
    padding: 3em 0;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.copyright{
    padding: 2em 0 0 0;
    font-size: 1.2rem;
}