/*
Theme Name: chikitoki_pre
Version: 1.4
*/
 
/* Reset & Base
-------------------------------------------------------------- */
* { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; box-sizing: border-box; word-break: break-all; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
a { display: inline-block; }
input[type="submit"] { -webkit-appearance: none; }

p { text-align: left; margin-bottom: 1em; }
strong { font-weight: bold; }
em { font-style: italic; }
blockquote { display: block; padding: 2em; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
iframe { max-width: 100%; }

/* 
* WP NativeStyle
-------------------------------------------------------------- */
/* img */
.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img[class*="wp-image-"],
img[class*="attachment-"] {
  height: auto;
  max-width: 100%;
}

/* 
 * common
-------------------------------------------------------------- */
a { text-decoration: underline; }
a:link, a:visited { color: inherit; }
a:hover { opacity: .4; }

.t_left { text-align: left !important; }
.t_right { text-align: right !important; }
.t_center { text-align: center !important; }
.sp { display: none !important; }

:root {
  --main-color: #8aa780;
}
html {
  -webkit-text-size-adjust:100%;
  text-align: center;
  line-height: 1.5;
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .1em;
  color: #17130e;
}
@media screen and (max-width: 1600px) {
  html {
    font-size: 1vw;
  }
}

.container_o {
  width: 89.33%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.container_i {
  width: 89.33%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.mb80 {
  margin-bottom: 5rem;
}
.mb160 {
  margin-bottom: 10rem;
}

blockquote {
  background: #EEEEEE;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #bbb;
  font-size: 0.9em;
}

/* 
 * header
-------------------------------------------------------------- */
.header_content {
  padding: 3.13rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  max-width: 16.25%;
}

.g_navi ul {
  display: flex;
  justify-content: flex-end;
  color: var(--main-color);
}
.g_navi li:not(:last-of-type) {
  margin-right: 3rem;
}
.g_navi a {
  text-decoration: none;
}
.g_navi a:hover {
  text-decoration: underline;
}



/* 
 * breadcrumb
-------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: .88rem;
  padding: 2em 0;
}
.breadcrumb li:not(:last-child)::after {
  content: '>';
  margin: 0 1em;
}


/* 
 * top
-------------------------------------------------------------- */
.mv {
  background: url(images/mv01.jpg) no-repeat center center/cover;  
  min-height: 31.25vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mv .img {
  max-width: 37.05%;
}

.concept {
  padding: 12.5rem 0 21.5rem;
}
.concept .ttl01 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 6.25rem;
  color: var(--main-color);
  letter-spacing: .1em;
}
.concept .ttl02 {
  font-size: 2.25rem;
  margin-bottom: 3.63rem;
  letter-spacing: .05em;
}
.concept .txt01 {
  font-size: 1.13rem;
  text-align: center;
  line-height: 2;
}

.sec_top01 {
  position: relative;
  background: var(--main-color);
  color: #FFF;
}
.sec_top01 > div {
  min-height: 38.54vw;
/*
  max-height: 740px;
*/
  padding: 7.08vw 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.sec_top01.even > div {
  justify-content: flex-start;
}
.sec_top01 .content {
  width: 30%;
  text-align: left;
}
.sec_top01 .ttl01 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .2em;
  margin-bottom: 1em;
}
.sec_top01 .ttl01 span {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #81511f;
}
.sec_top01 .ttl02 {
  font-size: 1.13rem;
  font-weight: 600;
  border-bottom: 1px solid;
  margin-bottom: .8em;
  padding-bottom: .3em;
}
.sec_top01 .txt01 {
  margin-bottom: 2em;
}
.sec_top01 .img01 {
  position: absolute;
  left: 0;
  top: -6.61vw;
  width: 58.33vw;
}
.sec_top01.even .img01 {
  left: auto;
  right: 0;
}
.sec_top01.even .link01 {
  width: 50%;
  border-top: 1px solid;
  text-align: right;
  margin: auto;
  padding-top: 1em;
}


.products {
  padding: 12.5rem 0 0;
}
.products .ttl_main01 {
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: .1em;
  color: var(--main-color);
  margin-bottom: 17.56rem;
}
.products .sec_top01:not(:last-of-type) {
  margin-bottom: 22.5rem;
}


.contact {
  padding: 12.5rem 0;
}
.contact .ttl01 {
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: .1em;
  color: var(--main-color);
  margin-bottom: 7.81rem;
}

.tbl_contact {
  width: 65.63%;
  margin: auto;
}
.tbl_contact tr:not(:last-of-type) > * {
  padding-bottom: 3.75rem;
}
.tbl_contact th {
  font-size: 1.25rem;
  text-align: left;
  padding-right: 3.31rem;
  white-space: nowrap;
}
.tbl_contact .require {
  background: var(--main-color);
  color: #FFF;
  padding: .2em;
  margin-right: 5rem;
  white-space: nowrap;
}
.tbl_contact input,
.tbl_contact textarea {
  border: 1px solid #211d1d;
  padding: 1em 1.5em;
  font-size: 1.13rem;
  width: 100%;
}
.tbl_contact input[type="submit"] {
  width: 38.1%;
  color: #FFF;
  background: var(--main-color);
  padding: .6em;
  font-size: 1.25rem;
  font-weight: bold;
  border: 0;
  border-radius: 10rem;
  margin-top: 3rem;
  cursor: pointer;
}


/* 
 * sub
-------------------------------------------------------------- */
.sub01 {
  padding-bottom: 12.5rem;
}
.sub_title_main {
  background: url(images/sub/bg_.jpg) no-repeat center center/cover;
  height: 20.83vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 7.5rem;
}
.sub_web-media .sub_title_main {
  background-image: url(images/sub/bg_web-media.jpg);
}
.sub_website-design .sub_title_main {
  background-image: url(images/sub/bg_website-design.jpg);
}
.sub_printed-matter .sub_title_main {
  background-image: url(images/sub/bg_printed-matter.jpg);
}
.sub_system-development .sub_title_main {
  background-image: url(images/sub/bg_system-development.jpg);
}
.sub_it-consulting .sub_title_main {
  background-image: url(images/sub/bg_it-consulting.jpg);
}
.sub_it-sales .sub_title_main {
  background-image: url(images/sub/bg_it-sales.jpg);
}
.sub_programming-teaching-materials .sub_title_main {
  background-image: url(images/sub/bg_programming-teaching-materials.jpg);
}
.sub_title_main .ttl01 {
  font-size: 3.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0px 1px 1px rgba(39, 40, 40, 0.33);
}

.sub_ttl01 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .2em;
  margin-bottom: 5rem;
  text-align: left;
}
.sub_ttl02 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .2em;
  margin-bottom: 2rem;
  text-align: left;
}

.sub_main_txt01 {
  margin-bottom: 12.5rem;  
}

.sub_tbl01 {
  width: 100%;
  text-align: left;
}
.sub_tbl01 th {
  color: #81511f;
  font-weight: 600;
  width: 11.61%;
}
.sub_tbl01 tr > * {
  padding: 2.5rem 0;
  border-top: 1px solid #81511f;
}
.sub_tbl01 tr:last-of-type > * {
  border-bottom: 1px solid #81511f;
}
.sub_tbl01 .gmap {
  padding-top: 0;
  height: 400px;
  border-top: 0;
}

.list_printed {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list_printed > * {
  width: 46.43%;
}
.list_printed .ttl01 {
  font-size: 1.13rem;
  font-weight: 600;
  border-bottom: 1px solid;
  padding-bottom: .2em;
  text-align: left;
}
.list_printed .img {
  margin-bottom: 2.5rem;
}

.sub01 .list_top_navi {
  padding: 0;
  margin: 0;
}




/* 
 * posts
-------------------------------------------------------------- */
.archive .list_news {
  font-size: 1.88rem;
  width: 100%;
}
.archive .list_news .date {
  font-size: 1.25rem;
}
.post .date {
  text-align: left;
  margin-bottom: 1.5rem;
}
.post .thum {
  margin-bottom: 3rem;
}
.post .body {
  margin-bottom: 10rem;
  line-height: 1.8;
}
.post .body p {
  margin-bottom: 2rem;
}
.post .body h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 5.4rem 0 1.8rem;
  text-align: left;
  border-left: 3px solid;
  padding-left: .5em;
}
.post .body h5 {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 3.9rem 0 1.3rem;
  text-align: left;
}


.pagenation {
  display: flex;
  justify-content: center;
}
.pagenation > * {
  margin: 0 1rem;
}
.pagenation > * > a,
.pagenation > * > span {
  padding: .67rem 1.06rem;
  border: 2px solid #81511f;
  background: #81511f;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #FFF;
}
.pagenation > * a:hover,
.pagenation .current span {
  background-color: #FFF;
  color: #81511f;
}


/* 
 * footer
-------------------------------------------------------------- */
.parts-contact {
  
}
.bnr_contact {
  height: 15.63vw;
  background: url(images/common/bg_contact.jpg) no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
}
.bnr_contact:hover {
  opacity: .6;
  text-decoration: none;
}
.bnr_contact span {
  color: #FFF;
}
.bnr_contact .en {
  font-size: 3.75rem;
  font-weight: 600;
}
.bnr_contact .jp {
  font-size: 1.88rem;
  font-weight: 600;
  letter-spacing: .2em;
}

.list_footer_bnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 3.75rem;
}
.list_footer_bnr.center {
  justify-content: center;
}
.list_footer_bnr > * {
  width: 28.13%;
  margin-bottom: 2.5rem;
}

.footer_content {
  background: url(images/common/bg_footer.jpg) no-repeat center center/cover;
  padding: 5.94vw 0 1.98vw;
}
.footer_content > div {
  position: relative;
}
.footer_content .ttl01 {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 3rem;
  font-weight: 600;
  color: #81511f;
}
.list_footer_sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 63.48%;
  margin: auto;
}
.list_footer_sns > * {
  margin-bottom: 2.5rem;
}
.copy {
  text-align: center;
  margin: 0;
  font-size: .88rem;
  padding: 2.13rem 0;
  background: var(--main-color);
  color: #FFF;
}

/* 
 * for SP
-------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .pc { display: none !important; }
  .sp { display: initial !important; }
  
  html {
    font-size: 4.27vw; /* 32px */
  }
  
  .header_content {
    padding: 0;
    height: 18.67vw;
  }
  .logo {
    max-width: 47.33vw;
  }
  
  .hamburger {
    width: 18.67vw;
    height: 18.67vw;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--main-color);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hamburger span {
    display: block;
    width: 8vw;
    height: .27vw;
    background-color: #FFF;
    transition: .5s all;
  }
  .hamburger span:not(:last-child) {
    margin-bottom: 2.53vw;
  }
  .hamburger.open span:nth-child(1) {
    transform: translateY(2.8vw) rotate(45deg);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: translateY(-2.8vw) rotate(-45deg);
  }
  .g_navi {
    display: none;
    width: 100%;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .g_navi ul {
    flex-direction: column;
    justify-content: center;
    padding: 5rem 0;
  }
  .g_navi li:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 3rem;
  }

  .mv {
    min-height: 69.2vw;
    align-items: flex-start;
/*    margin-bottom: 21.33vw;*/
  }
  .mv .img {
    max-width: 42.27vw;
    margin-top: 13.33vw;
  }
  
  .concept {
    padding: 3.13rem 1.25rem;
  }
  .concept .ttl01 {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  .concept .ttl02 {
    font-size: 1.7rem;
    margin-bottom: 2rem;
  }
  .concept .txt01 {
    font-size: 1rem;
  }

  .sec_top01 > div {
    height: auto;
    max-height: none;
    padding: 38vw 0 5.6vw;
  }
  .sec_top01 .img01 {
    width: 100%;
    top: 0;
  }
  .sec_top01 .content {
    width: 100%;
    z-index: 2;
    background: rgba(255, 255, 255, .8);
    padding: 3.13rem 1.25rem;
    color: #211d1d;
  }
  .sec_top01 .ttl01 {
    font-size: 1.25rem;
  }
  
  .list_top_navi {
    padding-top: 21.33vw;
    margin-bottom: 3.53rem;
  }
  .list_top_navi > * {
    width: 100%;
  }
  .list_top_navi > *:not(:first-of-type) {
    margin-bottom: 1.25rem;
  }
  .list_top_navi .ttl {
    font-size: 1.5rem;
  }
  
  .sec_top01.even {
    margin-bottom: 3.53rem;
  }
  .sec_top01.even .link01 {
    width: 53.33vw;
  }
  
  
  .products {
    padding: 6rem 0 0;
  }
  .products .ttl_main01 {
    font-size: 2rem;
    margin-bottom: 6rem;
  }
  .products .sec_top01:not(:last-of-type) {
    margin-bottom: 3rem;
  }
  
  .contact {
    padding: 6rem 0;
  }
  .contact .ttl01 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  
  .tbl_contact {
    width: 100%;
  }
  .tbl_contact tr {
    display: block;
    text-align: left;
  }
  .tbl_contact tr:not(:last-of-type) {
    margin-bottom: 1.5rem;
  }
  .tbl_contact tr > * {
    display: inline-block;
  }
  .tbl_contact tr:not(:last-of-type) > * {
    padding-bottom: 0;
  }
  .tbl_contact th {
    padding-right: 1em;
    margin-bottom: .5em;
    font-size: 1rem;
  }
  .tbl_contact .require {
    margin: 0 0 .7em 0;
    font-size: .7rem;
    display: inline-block;
  }
  .tbl_contact tr:last-of-type > * {
    width: 100%;
    text-align: center;
  }
  .tbl_contact input[type="submit"] {
    width: 66%;
  }
  
  
  /* sub  */
  .sub01 {
    padding-bottom: 16vw;
  }
  .sub_title_main {
    height: 53.33vw;
    background-position: center right;
    margin-bottom: 10.67vw;
  }
  .sub_title_main .ttl01 {
    font-size: 1.88rem;
  }
  .sub_ttl01 {
    font-size: 1.25rem;
    margin-bottom: 10.67vw;
  }
  
  .sub_tbl01 tr > * {
    padding: 1.25rem 0;
  }
  .sub_tbl01 th {
    white-space: nowrap;
    padding-right: 2em;
  }
  .sub_tbl01 .gmap {
    height: 53.33vw;
  }
  
  .sub_main_txt01 {
    margin-bottom: 2.19rem;
  }
  
  .list_printed > * {
    width: 100%;
  }
  
  .post .body h4 {
    font-size: 1.2rem;
    margin: 3.6rem 0 1.2rem;
  }
  .post .body h5 {
    font-size: 1.1rem;
    margin: 3.3rem 0 1.1rem;
  }

  
  .bnr_contact {
    height: 36.67vw;
    padding: 1.25rem;
  }
  .bnr_contact .en {
    font-size: 1.88rem;
  }
  .bnr_contact .jp {
    font-size: .94rem;
  }
  
  .list_footer_bnr {
    margin-bottom: 10.67vw;
  }
  .list_footer_bnr > * {
    width: 42vw;
    margin-bottom: 4vw;
  }
  
  .list_footer_sns {
    width: 100%;
  }
  .footer_content .ttl01 {
    position: relative;
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 1.25rem;
  }
  .list_footer_sns > * {
    width: 42vw;
    margin-bottom: 2.67vw;
  }
  .copy {
    font-size: .75rem;
    letter-spacing: .2em;
    padding: 1rem;
  }
}