/*
  Theme Name: blankslate-toyotaellie
  Template: blankslate
  Version: 1.01
*/

@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300..900&display=swap');
.post-edit-link{
  display: none;
}
html{
  font-size: 16px;
  min-height: 100%;
  position: relative;
}
body *{
  box-sizing:border-box;
}
body{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  padding-top: 70px;
  letter-spacing: 0.3em;
  color: #7F6D65;
  background: #C9D0F1;
  background: linear-gradient(180deg,rgba(201, 208, 241, 0.6) 0%, rgba(236, 208, 216, 0.6) 100%);
  background-size: cover;
  position: relative;
  min-height: 100vh;
}
@media(max-width:700px){
  body{
  }
}

main{
  position: relative;
  z-index: 50;
  opacity: 0;
  animation: fadeIn ;
  animation: 2s ease 0s forwards fadeIn;
  overflow: hidden;
  min-height: 100vh;
}
@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}


img{
  max-width: 100%;
}
a{
  color: #7F6D65;
  text-decoration: underline;
}

h1,h2,h3,h4,h5{
  margin: 0px;
  padding: 0px;
  font-size: inherit;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.4em;
}
p{
  font-weight: 300;
}
img{
  max-width: 100%;
  height: auto;
}
ul,li{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
li{
  margin: 0 0 15px;
  line-height: 1.2;
}
ul.disc{
  padding-left: 20px;
}

ul.disc li{
  list-style-type: disc;
}
p{
  line-height: 1.8;
}
hr,.wp-block-separator{
  border-top: 1px solid rgba(0,0,0,0.35);
  border-bottom: 0px;
}
@media(min-width:781px){
  .sp{
    display: none;
  }
}
@media(max-width:780px){
  .pc{
    display: none;
  }
}
.clearfix:before{
  clear: both;
  content: "";
  display: block;
}
.mt40{
  margin-top: 40px !important;
}
.mt20{
  margin-top: 20px !important;
}
.mt10{
  margin-top: 10px !important;
}
.mb0{
  margin-bottom: 0px !important;
}
.mb10{
  margin-bottom: 10px !important;
}
.mb20{
  margin-bottom: 20px !important;
}
.mb40{
  margin-bottom: 40px !important;
}
.mb60{
  margin-bottom: 60px !important;
}
.my40{
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.my20{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.my10{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.mxauto{
  margin-right: auto !important;
  margin-left: auto !important;
}
.mx20{
  margin-right: 20px !important;
  margin-left: 20px !important;
}
.p10{
  padding:10px !important;
}
.p20{
  padding:20px !important;
}
.p40{
  padding:40px !important;
}
@media (max-width:780px){
  .p20{
    padding: 10px !important;
  }
  .p40{
    padding: 10px !important;
  }
}
.en{
  font-family: "Zalando Sans", sans-serif;
}
.ja{
  font-family: "Noto Sans JP", sans-serif;
}
.bold{
  font-weight: bold;
}
.normal{
  font-weight: normal;
  font-weight: 300;
}
.center{
  text-align: center;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}

.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.nowrap{
  white-space: nowrap;
}
.bgwhite{
  background-color: #FFF;
}
.bggray{
  background-color: #F3F3F3;
}
.bgred{
  background-color: #E60020;
}




.f-xsmall{
  font-size: 11px;
}
.f-small{
  font-size: 12px;
}
.f-regular{
  font-size: 14px;
}
.f-medium{
  font-size: 16px;
}
.f-large{
  font-size: 18px;
}
.f-xlarge{
  font-size: 21px;
}
.f-xxlarge{
  font-size: 24px;
}
.f-xxxlarge{
  font-size: 40px;
}
.f-larger{
  font-size: 1.5em;
}
.t-red{
  color: #E60020;
}
.t-white{
  color: #FFF;
}
@media(max-width: 600px){
  .f-regular{
    font-size: 12px;
  }
  .f-large{
    font-size: 18px;
  }
  .f-xlarge{
    font-size: 18px;
  }
  .f-xxlarge{
    font-size: 16px;
  }
  .f-xxxlarge{
    font-size: 26px;
  }
}
@media (min-width: 781px){
  .flex{
    display: flex;
    gap:20px;
  }
  .flex.div4 > div{
    flex:0 0 calc((100% - 60px) / 4);
  }
}
@media(max-width: 780px){
  .flex.sp{
    display: flex;
    gap:10px;
  }
}

.flex-none{
  flex:0 0 auto;
}
.flex.wrap{
  flex-wrap:wrap;
}
.justify-between{
  justify-content:space-between !important;
}
.justify-evenly{
  justify-content:space-evenly !important;
}
.justify-center{
  justify-content:center !important;
}
.justify-start{
  justify-content:flex-start !important;
}
.justify-end{
  justify-content:flex-end !important;
}
.items-center{
  align-items:center !important;
}
.items-start{
  align-items:flex-start !important;
}
.items-end{
  align-items:flex-end !important;
}
.flex-reverse{
  flex-direction:row-reverse !important;
}
.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.overgray{
  position: relative;
  color: #FFF;
}
.overgray:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000042;
  z-index: 0;
}
.overgray .inner{
  position: relative;
  z-index: 1;
}
.max-width{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


header#header{
  z-index: 100;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  font-family: "Zalando Sans", sans-serif;
  font-size: 15px;
}
header#header > span, header#header > span:before{
  content: "";
  display: block;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: -1;
}
header#header > span:before{
  background: #C9D0F1;
  background: linear-gradient(130deg,rgba(201, 208, 241, 0.5) 0%, rgba(236, 208, 216, 0.5) 100%);
  z-index: 1;
}


#header .inner{
  max-width: 1260px;
  margin: auto;
  height: 70px;
}
#header .flex{
  justify-content:space-between;
  align-items: center;
  display: flex;
}

#site-title{
  padding-top: 0px;
}
#header ul.menu{
  display: flex;
  gap: 50px;
  align-items: self-end;
  justify-content: center;
}
#header ul.menu ul{
  display: block;
}
#header .menu li{
  font-weight: 300;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#header .menu a{
  text-decoration: none;
  position: relative;
  color: #7F6D65;
}
#header .menu li.current-menu-item a,
.single-format-standard #header .menu li.menu-item-170 a,
.home #header .menu a{
  color: #7F6D65;
}

#header #sns i{
  font-size: 35px !important;  
}
#header #sns a{
  color: #7F6D65;
}
@media(min-width: 1261px){
  #header .menu li:hover a:after{
    width: 100%;
    background: #E60020;
  }
  #header .menu ul > li{
    height: 60px;
    display: flex;
    align-items:center;  
    position: relative;
  }
  #header .menu li a span{
    position: relative;
    z-index: 1;
  }  
  #header .menu li ul{
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    display: block;
    background-color: #ffffffd6;
    max-height: 0px;
    transition:max-height ease 0.5s;
    overflow: hidden;
    height: auto;
    text-align: left;
  }
  #header .menu li:hover ul{
    max-height: 200px;
    height: auto;
  }
  #header .menu li ul li a{
    padding: 10px 0
  }
}
@media(max-width: 1260px){
  #header .inner{
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media(max-width: 1050px){
  body{
    padding-top: 70px;
  }
  #header .inner{
    height: 70px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #header .menu a{
    color: #FFF !important;
  }
  .headnavi #site-title{
    margin-left: 10px;
  }
  .headnavi #site-title img{
  }
  .headnavi .spmenu{
    display: block !important;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 2;
    transform: translateY(-50%);
  }
  .headnavi .spmenu span{
    width: 30px;
    height: 1px;
    border-radius: 999px;
    display: block;
    background-color: #7F6D65;
    position: relative;
    top: 49%;
  }
  .headnavi .spmenu:before,
  .headnavi .spmenu:after,
  .headnavi .sp.close:before,
  .headnavi .sp.close:after{
    content:"";
    display: block;
    width: 30px;
    height: 1px;
    border-radius: 999px;
    background-color: #7F6D65;
    transition:;
  }
  .headnavi .spmenu:before{
    position: absolute;
    top: 4px;
    right: 0px;
  }
  .headnavi .spmenu:after{
    position: absolute;
    bottom: 4px;
    right: 0px;
  }
  .headnavi .spmenu.open span{
    display: none;
  }
  .headnavi .spmenu.open:before{
    transform:rotate(-45deg);
    transform-origin: top right;
    position: absolute;
    right: 5px;
    top: 4px;
    background-color: #FFF;
  }
  .headnavi .spmenu.open:after{
    transform:rotate(45deg);
    transform-origin: bottom right;
    position: absolute;
    right: 5px;
    bottom: 3px;
    background-color: #FFF;
  }
  nav#menu{
    display: block !important;
    position: fixed;
    width: 70%;
    height: 100%;
    top: 0%;
    right: -70%;
    transition:right ease 0.5s;
    padding: 60px 40px 20px;
    background: linear-gradient(0deg,rgba(201, 208, 241, 0.8) 0%, rgba(236, 208, 216, 0.8) 100%);
  }
  nav#menu.open{
    right: 0px;
  }
  #header ul.menu{
    display: block;
  }
  #header .menu li a:after{
    bottom:5px;
  }
  #header .menu li{
  }
  #header .menu li a{
    display: inline-block;
    padding: 15px 0;
  }
  #header .phone{
    display: none;
  }
  #header #sns i{
    font-size: 24px !important;  
  }
  #header #sns li{
    display: inline-block;
    margin-right: 20px;
  }
}



footer#footer {
  padding: 50px 0;
  font-size: 14px;
}
@media(max-width:1300px){
  footer#footer {
    padding: 50px 20px;
  }
}
@media(max-width:600px){
  footer#footer {
    padding: 40px 20px;
  }
}
footer h2{
  margin-bottom: 20px;
  border-bottom: 3px solid #d91229;
  padding-bottom: 5px;
}
footer .left ul{
  padding-left: 20px !important;
  margin-bottom: 40px;
}
footer .left li{
  list-style-type: disc;
  margin-bottom: 10px;
}
footer *{
  line-height: 1.4;
}
footer a span.t-red{
  font-weight: bold;
  font-size: 12px;
}
.footer_logos > *{
  flex:1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer_logos img{
  max-width: 190px;
  max-height: 80px;
}


section > .inner{
  padding: 60px 20px;
  position: relative;
}
section h1.entry-title{
  font-family: "Zalando Sans", sans-serif;
  font-size: 45px;
  font-weight: 200;
  letter-spacing: 0.25em;
  line-height: 1.5;
  color: #A18B80;
}
section h2{
  font-size: 30px;
  line-height: 1.5;
}

.inner{
  max-width: 1300px;
  margin: auto;
}
@media(max-width:600px){
  section h1.entry-title{
    font-size: 30px;
  }
  section .inner{
    padding: 40px 30px 30px;
  }
  section h2{
    font-size: 21px;
  }
}




section p{
  margin-bottom: 20px;
}
section h2,section h3,section h4,section h5,section figure{
  margin-bottom: 20px;
}
section strong{
  font-weight: bold;
}
section ul,section ol{
  margin-bottom: 40px;
}
section ul li{
  list-style-type:disc;
  margin-left: 30px;
  line-height: 1.5;
}
section ol li{
  list-style-type: decimal;
  margin-left: 30px;
}

.post .wp-block-image{
  margin-top: 2em;
  margin-bottom: 2em;
}
.post .aligncenter{
  text-align: center;
}
.post .alignright{
  text-align: right;
}





.btn,.wp-block-button__link{
  display: inline-block;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: normal;
  border-radius: 9999px;
  text-decoration: none;
  background-color: #7F6D65;
  color: #FFF;
  line-height: 1;
  transition: ease all 0.3s;
}

.wp-block-button.disabled a{
  opacity: 0.5;
  pointer-events: none;
}
@media(min-width:801px){
  .wp-block-button__link:hover{
    transform:scale(1.1);
  }
}




.radius{
  padding: 30px;
  border-radius: 30px;
  background-color: #FFF;
}

.page article .header{
  flex:1 1 auto;
}
.page article .entry-content{
  flex: 0 1 850px;
}


@media(min-width: 1200px){
  .page article{
    display: flex;
    gap: 40px;
    justify-content: space-between;
  }
  .page article .entry-content{
    padding: 40px 60px;
  }
}
@media(max-width: 1200px){
  .page article .entry-content{
    padding: 30px;
  }
}












/**/