@charset "UTF-8";
/*
Theme Name: Kiss My Earth
Theme URL: https://kissmyearth.jp
Description: Kiss My Earthサイトのテーマファイル
Author: Norioto Yamaguchi
Version: 0.1
*/
@import url("https://fonts.googleapis.com/css?family=Special+Elite&display=swap");
* {
  box-sizing: border-box; }

body {
  font-size: 16px;
  font-family: "MacHirakaku", "源ノ角ゴシック", "WindowsYuGothic", "YuGothic", "Meiryo", "HGゴシックE", "MS PGothic", "MS Gothic", sans-serif;
  line-height: 1.5em; }

@media screen and (max-width: 768px) {
  .iframe-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%; }
  .iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; } }

.wrapper {
  overflow: hidden; }

/**
 * common.css
 *
 * 1.0 - Setting
 *   1.1 - Reset
 *   1.2 - Fonts
 *   1.3 - Base
 *
 * 2.0 - Modules
 *
 * 3.0 - Layout
 *
 * 9.0 - Vendor
 *
 */
/* 1.0 - Setting
========================================================== */
/* 1.1 - Reset
  ======================================================== */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  line-height: 1.4em;
  color: #333; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }
  a:hover {
    opacity: .7; }

img {
  vertical-align: middle;
  max-width: 100%; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100; }

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200; }

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; }

@media all and (-ms-high-contrast: none) {
  html {
    font-family: Verdana, Meiryo, sans-serif; } }

@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif; } }

* {
  box-sizing: border-box; }
  *:before, *:after {
    box-sizing: border-box; }

/* 3.0 - Layout
========================================================== */
#header nav {
  width: 270px;
  top: 66px;
  right: -217px;
  display: flex;
  position: fixed;
  transition: .5s;
  z-index: 9999; }
  #header nav ul {
    width: 217px;
    background: #000;
    border: 1px solid #ccc; }
    #header nav ul li a {
      color: #fff;
      display: block;
      padding: 14px 18px;
      font-family: 'Special Elite', cursive; }
  #header nav.open {
    right: 0;
    transition: .5s; }
    #header nav.open span:nth-child(1) {
      top: 7px;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg); }
    #header nav.open span:nth-child(2) {
      opacity: 0; }
    #header nav.open span:nth-child(3) {
      top: 7px;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg); }

.toggle-box {
  background-color: #000;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 6px 0 0 10px;
  font-size: 10px;
  height: 60px;
  padding: 12px 0 0;
  text-align: center;
  width: 53px;
  font-family: 'Special Elite', cursive; }
  .toggle-box span {
    background-color: #fff;
    display: block;
    height: 3px;
    position: absolute;
    width: 18px;
    left: 17px; }
    .toggle-box span:nth-child(1) {
      top: 0; }
    .toggle-box span:nth-child(2) {
      top: 7px; }
    .toggle-box span:nth-child(3) {
      top: 14px; }

.toggle-inner {
  position: relative;
  padding-top: 22px;
  color: #fff; }

.subpage_sitetitle {
  width: 226px;
  height: auto;
  padding: 16px 0; }
  @media screen and (max-width: 768px) {
    .subpage_sitetitle {
      width: 150px;
      padding: 5px 0 7px; } }

.subpage #header {
  width: 1040px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .subpage #header {
      width: 100%;
      padding: 0 3%; } }

#footer {
  padding-top: 20px; }
  @media screen and (max-width: 420px) {
    #footer {
      padding-top: 0; } }

.footer-img {
  width: 100%; }

.top-button {
  background-color: #504732;
  bottom: 57px;
  display: block;
  height: 52px;
  line-height: 52px;
  position: fixed;
  right: 0;
  text-align: center;
  width: 52px;
  z-index: 1; }

.footer-copy {
  background-color: #504732;
  color: #fff;
  padding: 12px;
  font-size: 12px;
  text-align: center; }

.keyvisual-area {
  background: url(images/bg_main.jpg) center top no-repeat;
  background-size: cover;
  padding: 65px 0 49px; }
  @media screen and (max-width: 768px) {
    .keyvisual-area {
      background: none;
      position: relative; } }
  @media screen and (max-width: 768px) {
    .keyvisual-area:after {
      content: "";
      display: block;
      position: fixed;
      height: 100vh;
      width: 100vw;
      background-image: url(images/bg_main_sp.jpg);
      background-size: 100%;
      top: 0;
      left: 0;
      z-index: -1; } }
  .keyvisual-area h1 {
    text-align: center;
    margin-bottom: 22px; }
    @media screen and (max-width: 420px) {
      .keyvisual-area h1 img {
        width: 90%; } }

.keyvisual-news {
  background-color: rgba(0, 0, 0, 0.6);
  width: 620px;
  padding: 20px 30px;
  margin: 0 auto 65px; }
  @media screen and (max-width: 420px) {
    .keyvisual-news {
      width: 95%;
      padding: 3.5%; } }
  .keyvisual-news ul li {
    margin-bottom: 8px; }
    .keyvisual-news ul li:last-child {
      margin-bottom: 0; }
    .keyvisual-news ul li a {
      align-items: center;
      color: #fff;
      display: flex; }
      @media screen and (max-width: 420px) {
        .keyvisual-news ul li a {
          display: block; } }
      .keyvisual-news ul li a span {
        color: #999;
        display: block;
        font-size: 12px;
        width: 80px; }

.keyvisual-teamreport {
  display: flex;
  justify-content: space-between;
  width: 1280px;
  margin: 0 auto; }
  @media screen and (max-width: 1280px) {
    .keyvisual-teamreport {
      width: 95%; } }
  @media screen and (max-width: 768px) {
    .keyvisual-teamreport {
      flex-wrap: wrap; } }
  @media screen and (max-width: 420px) {
    .keyvisual-teamreport {
      display: block; } }
  .keyvisual-teamreport-contents {
    background: url(images/bg_wood.jpg) 0 0 no-repeat;
    padding-bottom: 23px;
    width: 300px;
    display: block; }
    @media screen and (max-width: 1280px) {
      .keyvisual-teamreport-contents {
        width: 24%; } }
    @media screen and (max-width: 768px) {
      .keyvisual-teamreport-contents {
        width: 48.5%;
        margin-bottom: 3%; } }
    @media screen and (max-width: 420px) {
      .keyvisual-teamreport-contents {
        width: 100%;
        clear: both;
        overflow: hidden;
        padding: 0 2% 2%;
        margin-bottom: 8px; } }
    .keyvisual-teamreport-contents:before {
      background: url(images/img_ribon01.png) center bottom no-repeat;
      content: "";
      display: block;
      width: 100%;
      height: 25px; }
    .keyvisual-teamreport-contents.sanc:before {
      background-image: url(images/img_ribon02.png); }
    .keyvisual-teamreport-contents.mohikan:before {
      background-image: url(images/img_ribon03.png); }
    .keyvisual-teamreport-contents.syachihoko:before {
      background-image: url(images/img_ribon04.png); }
    .keyvisual-teamreport-contents h2 {
      color: #f7eeee;
      font-size: 18px;
      margin-bottom: 8px;
      text-align: center;
      text-shadow: 1px 1px 0 #000;
      padding: 12px 12px 0; }
      @media screen and (max-width: 420px) {
        .keyvisual-teamreport-contents h2 {
          margin-top: 5px; } }
    .keyvisual-teamreport-contents img {
      display: block;
      margin: 0 auto 20px; }
      @media screen and (max-width: 420px) {
        .keyvisual-teamreport-contents img {
          float: left;
          width: 35%;
          margin-right: 4%; } }
    .keyvisual-teamreport-contents p {
      padding: 0 25px;
      line-height: 2em; }
      @media screen and (max-width: 420px) {
        .keyvisual-teamreport-contents p {
          float: left;
          width: 61%;
          padding: 0;
          line-height: 1.5em; } }
      .keyvisual-teamreport-contents p.date {
        color: #999;
        font-size: 12px; }
      .keyvisual-teamreport-contents p.lead {
        color: #fff;
        font-size: 14px; }

.top-banner ul {
  display: flex;
  margin: 0 auto 43px;
  justify-content: space-between;
  width: 960px; }
  @media screen and (max-width: 960px) {
    .top-banner ul {
      width: 95%; } }
  @media screen and (max-width: 768px) {
    .top-banner ul {
      display: block; } }
  @media screen and (max-width: 420px) {
    .top-banner ul {
      margin-bottom: 12px; } }
  .top-banner ul li img {
    width: 100%; }
  @media screen and (max-width: 960px) {
    .top-banner ul li {
      width: 32%; } }
  @media screen and (max-width: 768px) {
    .top-banner ul li {
      width: 65%;
      margin: 0 auto 12px; } }
  @media screen and (max-width: 420px) {
    .top-banner ul li {
      margin-bottom: 8px;
      width: 100%; }
      .top-banner ul li:last-child {
        margin-bottom: 0; } }
  .top-banner ul li a {
    display: block; }

.map-data {
  margin-top: 10px; }
  .map-data li {
    display: inline-block; }
    .map-data li:first-child {
      margin-right: 8px; }
    .map-data li a {
      display: block;
      padding: 8px 20px;
      font-size: 16px;
      background-color: #367182;
      color: #fff; }

@media screen and (max-width: 420px) {
  img {
    height: auto; } }

.contents-area:before {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
  background: url(images/img_border.png) center bottom repeat-x;
  background-color: #504732; }

.contents-area.subpage:before {
  display: none; }

.contents-inner {
  background: url(images/bg_nuno.jpg) 0 0 repeat;
  overflow: hidden;
  padding-top: 43px;
  position: relative;
  z-index: 0; }
  @media screen and (max-width: 420px) {
    .contents-inner {
      padding-top: 12px; } }
  .contents-inner:before, .contents-inner:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1; }
  .contents-inner:before {
    background: url(images/bg_nuno01.png) 0 0 no-repeat;
    left: 0;
    top: 0;
    width: 918px;
    height: 317px; }
  .contents-inner:after {
    background: url(images/bg_nuno02.png) 0 0 no-repeat;
    bottom: 0;
    right: 0;
    width: 735px;
    height: 488px; }
  .contents-inner.subpage {
    padding-top: 0; }

.contents-body {
  margin: 0 auto 58px;
  position: relative;
  width: 1280px;
  height: 630px; }
  @media screen and (max-width: 1280px) {
    .contents-body {
      width: 95%;
      height: 630px; } }
  @media screen and (max-width: 768px) {
    .contents-body {
      height: auto; } }
  .contents-body img {
    width: 100%; }

.contents-title {
  background-color: rgba(65, 51, 22, 0.9);
  color: #fff;
  display: inline-block;
  height: 42px;
  line-height: 42px;
  left: 0;
  padding: 0 26px;
  position: absolute;
  top: 0; }

.page-area {
  background-color: #fff;
  margin: 0 auto 50px;
  width: 1040px; }
  @media screen and (max-width: 768px) {
    .page-area {
      width: 94%; } }

.page-header {
  height: 349px;
  position: relative;
  background-position: top center;
  background-repeat: no-repeat; }
  .page-header.about {
    background: url(images/img_ph_about.jpg) top right no-repeat; }
  .page-header.huaraches {
    background: url(images/img_ph_huaraches.jpg) top center no-repeat; }
  .page-header.howto {
    background: url(images/img_ph_howto.jpg) top center no-repeat; }
  .page-header.running {
    background: url(images/img_ph_running.jpg) top center no-repeat; }
  .page-header.faq {
    background: url(images/img_ph_faq.jpg) top left no-repeat; }
  .page-header.movie {
    background: url(images/img_ph_movie.jpg) top right no-repeat; }
  .page-header.syachihoko {
    background: url(images/img_ph_syachihoko.jpg) top center no-repeat; }
  .page-header.contact {
    background: url(images/img_ph_faq.jpg) top left no-repeat; }
  .page-header.news {
    background-position: top right; }
  .page-header-inner {
    position: absolute;
    top: 50%;
    left: 10%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
    @media screen and (max-width: 420px) {
      .page-header-inner {
        top: auto;
        bottom: 10%;
        left: 5%;
        -webkit-transform: translateY(0);
                transform: translateY(0); } }

.page-title {
  color: #fff;
  font-family: 'Special Elite', cursive;
  font-size: 80px;
  font-weight: normal;
  line-height: .8em; }
  @media screen and (max-width: 420px) {
    .page-title {
      font-size: 50px; } }
  .page-title__noheader {
    font-size: 32px;
    font-family: "MacHiramin", "YuMincho", "HG明朝E", "MS PMincho", serif;
    line-height: 1.2 !important; }

.page-subtitle {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: inline-block;
  padding: 5px 8px; }

.page-body {
  width: 710px;
  margin: 0 auto;
  padding: 50px 0;
  letter-spacing: 0.1em;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1; }
  @media screen and (max-width: 768px) {
    .page-body {
      width: 100%;
      padding: 35px 5%; } }
  .page-body * {
    line-height: 1.7em; }
  .page-body h3 {
    font-family: "MacHiramin", "YuMincho", "HG明朝E", "MS PMincho", serif;
    font-size: 32px;
    margin: 55px 0 37px;
    letter-spacing: 0.12em; }
    .page-body h3:first-child {
      margin-top: 0; }
  .page-body h4 {
    font-family: "MacHiramin", "YuMincho", "HG明朝E", "MS PMincho", serif;
    font-weight: normal;
    font-size: 20px;
    margin: 37px 0 1em; }
  .page-body p {
    margin-bottom: 1.5em; }
  .page-body ul {
    margin-bottom: 1.5em; }
    .page-body ul li {
      padding-bottom: 0.5em;
      margin-bottom: 0.5em;
      border-bottom: 1px solid #333;
      line-height: 1.5em; }
      .page-body ul li:last-child {
        margin-bottom: 0; }

@media screen and (max-width: 420px) {
  .post-header-wrap {
    margin-bottom: 12px; } }

.post-header {
  top: auto;
  bottom: -48px;
  left: 3.5%;
  background: url(images/bg_wood.jpg) 0 0 no-repeat;
  width: 240px;
  padding: 15px 0;
  text-align: center; }
  @media screen and (max-width: 420px) {
    .post-header {
      width: 180px;
      bottom: -20px; } }
  .post-header h3 {
    color: #fff;
    font-size: 20px; }
    @media screen and (max-width: 420px) {
      .post-header h3 {
        font-size: 16px; } }

.post-title {
  margin-bottom: 1em; }

#page .list-title {
  background-color: #367281;
  color: #fff;
  margin: 0;
  padding: 7px 10px; }
  #page .list-title span {
    color: #fff;
    font-size: 0.7em; }

.howto-material-list {
  margin-bottom: 2%;
  border: 1px solid #367182; }
  .howto-material-list li {
    padding: 7px 0;
    margin: 0 10px;
    border-bottom: 1px dotted #bbb;
    line-height: 1.4em; }
    .howto-material-list li:last-child {
      border: none; }
    .howto-material-list li span {
      display: block;
      line-height: 1.3em;
      font-size: 0.8em;
      margin-bottom: 5px;
      color: #999; }
    .howto-material-list li img {
      padding: 7px 0 5px; }

.howto-card {
  width: 170px;
  margin: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.3em;
  padding: 8px;
  border: 1px solid #367182; }
  @media screen and (max-width: 420px) {
    .howto-card {
      width: 48.5%;
      margin-right: 3%; } }
  @media screen and (max-width: 420px) {
    .howto-card:nth-child(even) {
      margin-right: 0; } }
  .howto-card:nth-child(4n) {
    margin-right: 0; }
  .howto-card img {
    display: block;
    margin-bottom: 4px; }
  .howto-card-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }

.faq-body {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px dotted #367182; }
  .faq-body dt, .faq-body dd {
    text-indent: -1.45em;
    padding-left: 1.45em; }
    .faq-body dt:before, .faq-body dd:before {
      font-family: 'Special Elite', cursive;
      font-size: 30px;
      font-weight: bold;
      padding-right: 5px; }
  .faq-body dt {
    margin-bottom: 1.5em; }
    .faq-body dt:before {
      content: "Q";
      color: #823636; }
  .faq-body dd:before {
    content: "A";
    color: #364882; }

.center {
  text-align: center; }

.right {
  text-align: right; }

.alignright {
  display: block;
  float: right;
  margin: 0 0 1em 1em;
  width: 320px; }
  @media screen and (max-width: 768px) {
    .alignright {
      width: 45%; } }
  @media screen and (max-width: 420px) {
    .alignright {
      float: none;
      margin: 0 auto 1em;
      width: 100%; } }

.alignleft {
  display: block;
  float: left;
  margin: 0 1em 1em 0;
  width: 320px; }
  @media screen and (max-width: 768px) {
    .alignleft {
      width: 45%; } }
  @media screen and (max-width: 420px) {
    .alignleft {
      float: none;
      margin: 0 auto 1em;
      width: 100%; } }

.aligncenter {
  display: block;
  margin: 0 auto 1em; }

.column-wide {
  width: 950px;
  margin-left: -120px; }
  @media screen and (max-width: 420px) {
    .column-wide {
      width: 100%;
      margin-left: 0; } }

.list-3column, .list-2column {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.list-3column > li, .list-3column .list-item {
  width: 32%; }
  @media screen and (max-width: 420px) {
    .list-3column > li, .list-3column .list-item {
      width: 100%;
      margin-bottom: 15px; } }

.list-2column > li, .list-2column .list-item {
  width: 49%; }
  @media screen and (max-width: 420px) {
    .list-2column > li, .list-2column .list-item {
      width: 100%; } }

.movie-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  margin-bottom: 1em; }

.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.category-title {
  font-family: "MacHiramin", "YuMincho", "HG明朝E", "MS PMincho", serif;
  font-size: 32px;
  margin: 55px 0 37px;
  letter-spacing: 0.12em;
  text-align: center; }
  @media screen and (max-width: 420px) {
    .category-title {
      text-align: left;
      line-height: 1.3em; } }

.category-body {
  width: 710px;
  margin: 0 auto;
  padding: 50px 0;
  letter-spacing: 0.1em;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1; }
  @media screen and (max-width: 420px) {
    .category-body {
      width: 100%;
      padding: 0 5% 60px; } }

.post-list {
  border-bottom: 1px dotted #197284;
  margin-bottom: 28px;
  padding-bottom: 28px;
  clear: both; }
  .post-list-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 10px; }
    @media screen and (max-width: 420px) {
      .post-list-header {
        display: block; } }
  .post-list-title {
    font-size: 20px; }
  .post-list-date {
    margin-left: 2em;
    line-height: 34px; }
    @media screen and (max-width: 420px) {
      .post-list-date {
        margin-left: 0; } }
  .post-list-body {
    display: flex;
    position: relative; }
    @media screen and (max-width: 420px) {
      .post-list-body {
        display: block;
        overflow: hidden; } }
  .post-list-img {
    display: block;
    width: 280px;
    height: auto;
    margin-right: 28px; }
    @media screen and (max-width: 420px) {
      .post-list-img {
        width: 100%; } }
  .post-list-text {
    width: 402px; }
    @media screen and (max-width: 420px) {
      .post-list-text {
        width: 100%; } }
    .post-list-text p {
      line-height: 1.7em; }
  .post-list-link {
    display: block;
    position: absolute;
    bottom: 28px;
    right: 0;
    background-color: #197284;
    padding: 12px 20px;
    color: #fff; }
    @media screen and (max-width: 420px) {
      .post-list-link {
        position: static;
        display: inline-block;
        float: right;
        margin-top: 8px; } }

.page-numbers {
  display: flex;
  justify-content: center; }
  .page-numbers li {
    margin: 0 5px;
    height: 42px;
    width: 42px;
    color: #197284;
    border: 1px solid #197284; }
    .page-numbers li a, .page-numbers li span {
      display: block;
      text-align: center;
      height: 40px;
      line-height: 40px; }
    .page-numbers li .current, .page-numbers li a:hover {
      color: #fff;
      background-color: #197284;
      opacity: 1; }

.category-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media screen and (max-width: 420px) {
    .category-list {
      display: block; } }
  .category-list-item {
    width: 32%;
    text-align: center;
    margin-bottom: 20px; }
    @media screen and (max-width: 420px) {
      .category-list-item {
        width: 100%; } }
  .category-list-img {
    display: block;
    margin-bottom: 5px; }

.contact-form label {
  display: block; }
  .contact-form label input {
    border: 1px solid #333;
    height: 35px;
    padding: 5px; }
    @media screen and (max-width: 420px) {
      .contact-form label input {
        width: 100%; } }
  .contact-form label textarea {
    border: 1px solid #333; }
    @media screen and (max-width: 420px) {
      .contact-form label textarea {
        width: 100%; } }

.contact-email input, .contact-title input {
  width: 350px; }

.contact-body textarea {
  width: 350px; }

.contact-submit input {
  padding: 8px 20px;
  font-size: 16px;
  background-color: #367182;
  color: #fff;
  border-style: none; }