@charset "UTF-8";
/*
Theme Name: mynomadism2020
Version: 1.0
Author: Megumi Matoba
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techcanvas202
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

    1.  Document Setup
    2.  Element Base
    3.  Helper Classes
    4.  Site Header
    5.  Menu Modal
    6.  Search Modal
    7.  Page Templates
        a.  Template: Cover Template
        c.  Template: Full Width
    8.  Post: Archive
    9.  Post: Single
    10. Blocks
    11. Entry Content
    12. Comments
    13. Site Pagination
    14. Error 404
    15. Widgets
    16. Site Footer
    17. Media Queries

/*--------------------------------------------------------------
>>> 1.Document Setup
----------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Damion&display=swap");
/*--------------------------------------------------------------
>>> 2.Element Base
----------------------------------------------------------------*/
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic Pro N", Meiryo, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #222A38; }

p {
  line-height: 2;
  font-weight: 400;
  color: #3C4656; }

a {
  color: #F7A500; }
  a:hover, a:active {
    background: -webkit-linear-gradient(0deg, #FCE300, #F79400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

/* Reset input[type="search"] */
input[type="search"] {
  -webkit-appearance: textfield; }

input[type="search"]:focus {
  outline-offset: -2px; }

input[type="search"]::-webkit-search-decoration {
  display: none; }

/*--------------------------------------------------------------
>>> Layout
----------------------------------------------------------------*/
.l-container {
  margin: 0 auto;
  max-width: 1280px; }
  @media screen and (min-width: 1024px) {
    .l-container {
      padding: 0 24px; } }

@media screen and (min-width: 1024px) {
  .l-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -16px; } }

.l-flex.wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.l-flex.index > *[class*="l-col-"]:first-child {
  width: 100%; }

.l-col-3 {
  margin-bottom: 40px; }
  @media screen and (min-width: 1024px) {
    .l-col-3 {
      padding: 0 16px;
      width: 33.33%; } }

@media screen and (min-width: 1024px) {
  .l-col-main {
    padding: 0 16px;
    width: calc(100% - 300px); } }

@media screen and (min-width: 1024px) {
  .l-col-side {
    padding: 0 16px;
    width: 332px; } }

/*--------------------------------------------------------------
>>> 4.Site Header
----------------------------------------------------------------*/
.m-header {
  text-align: center;
  padding: 24px 0 18px; }
  @media screen and (min-width: 1024px) {
    .m-header {
      padding: 32px 0 0 0; } }

/*--------------------------------------------------------------
>>> 4.Site Footer
----------------------------------------------------------------*/
.m-footer {
  text-align: center;
  border-top: 1px solid #eee;
  margin-top: 24px;
  padding-top: 24px; }
  @media screen and (min-width: 1024px) {
    .m-footer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-top: 40px;
      padding-top: 0; } }

/*--------------------------------------------------------------
>>> 4.Site Navigation
----------------------------------------------------------------*/
.m-headerNav {
  z-index: 3;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  background: #E6F0F7;
  padding-top: 100px;
  width: 280px;
  -webkit-transform: translateX(280px);
          transform: translateX(280px);
  -webkit-transition: -webkit-transform ease .3s;
  transition: -webkit-transform ease .3s;
  transition: transform ease .3s;
  transition: transform ease .3s, -webkit-transform ease .3s; }
  .m-headerNav.is-active {
    -webkit-transform: none;
            transform: none; }
  .m-headerNav ul a {
    display: block;
    padding: 20px;
    color: #222A38;
    text-decoration: none;
    font-size: 1.7rem; }
    .m-headerNav ul a:hover, .m-headerNav ul a:active {
      background: -webkit-linear-gradient(0deg, #FCE300, #F79400);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
  @media screen and (min-width: 1024px) {
    .m-headerNav {
      position: static;
      margin: 12px 0;
      padding-top: 0;
      background: transparent;
      -webkit-transform: none;
              transform: none;
      width: auto;
      height: auto; }
      .m-headerNav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }

.m-footerNav {
  margin: 12px 0; }
  .m-footerNav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .m-footerNav ul a {
      font-size: 1.2rem;
      display: block;
      padding: 20px;
      color: #222A38;
      text-decoration: none; }
      .m-footerNav ul a:hover {
        color: #7A818C; }

.m-index-aside {
  padding: 48px 0; }

.m-Blogside {
  padding: 0 16px 24px 16px; }
  .m-Blogside li {
    list-style: none;
    margin-bottom: 12px; }
  @media screen and (min-width: 1024px) {
    .m-Blogside {
      padding: 0 0 24px 0; } }

.m-searchForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .m-searchForm_control {
    min-width: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
    .m-searchForm_control input {
      width: 100%;
      height: 44px;
      padding: 0 8px;
      font-size: 1.6rem;
      border: 1px solid #eee;
      border-right: none; }
  .m-searchForm_btn {
    width: 44px;
    margin-right: auto;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none; }
    .m-searchForm_btn button {
      border: 1px solid #F7A500;
      background: #F7A500;
      font-size: 2rem;
      color: #fff;
      width: 44px;
      height: 44px; }

.m-comment {
  padding: 32px; }
  .m-comment_list {
    list-style: none; }
    .m-comment_list li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .m-comment_avatar {
    width: 68px;
    margin-right: auto;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none; }
    .m-comment_avatar img {
      border-radius: 50%; }
  .m-comment_body {
    min-width: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .m-comment_form {
    margin-bottom: 16px; }
    .m-comment_form label {
      font-family: 'Damion', cursive;
      font-size: 2.1rem;
      display: block; }
    .m-comment_form textarea {
      width: 100%; }
    .m-comment_form input {
      height: 44px;
      width: 100%; }
  .m-comment .comment-reply-title {
    font-family: 'Damion', cursive;
    font-size: 3rem; }
  .m-comment .form-submit .button {
    height: 44px; }

/*--------------------------------------------------------------
>>> 10.Blocks
----------------------------------------------------------------*/
.c-logo {
  display: inline-block;
  font-family: 'Damion', cursive;
  font-size: 3.2rem;
  color: #000;
  text-decoration: none; }
  .c-logo span {
    color: #F7A500; }
  .c-logo:hover, .c-logo:active {
    background: -webkit-linear-gradient(0deg, #FCE300, #F79400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  @media screen and (min-width: 768px) {
    .c-logo {
      font-size: 4rem; } }
  @media screen and (min-width: 1024px) {
    .c-logo {
      font-size: 4.8rem; } }

.c-lead {
  font-size: 1.1rem; }
  @media screen and (min-width: 1024px) {
    .c-lead {
      font-size: 1.3rem; } }

.c-menuTrigger {
  z-index: 4;
  position: absolute;
  right: 9px;
  top: 29px;
  width: 44px;
  height: 44px; }
  .c-menuTrigger,
  .c-menuTrigger span {
    display: inline-block;
    -webkit-transition: all .4s;
    transition: all .4s;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .c-menuTrigger span {
    position: absolute;
    left: 6px;
    width: 30px;
    height: 4px;
    background-color: #000;
    border-radius: 4px; }
    .c-menuTrigger span:nth-of-type(1) {
      top: 9px; }
    .c-menuTrigger span:nth-of-type(2) {
      top: 20px; }
    .c-menuTrigger span:nth-of-type(3) {
      bottom: 9px; }
  .c-menuTrigger.is-active {
    position: fixed; }
    .c-menuTrigger.is-active span:nth-of-type(1), .c-menuTrigger.is-active span:nth-of-type(3) {
      width: 20px; }
    .c-menuTrigger.is-active span:nth-of-type(1) {
      -webkit-transform: translate(-3px, 5px) rotate(-45deg);
              transform: translate(-3px, 5px) rotate(-45deg); }
    .c-menuTrigger.is-active span:nth-of-type(3) {
      -webkit-transform: translate(-3px, -5px) rotate(45deg);
              transform: translate(-3px, -5px) rotate(45deg); }
  @media screen and (min-width: 768px) {
    .c-menuTrigger {
      right: 32px;
      top: 32px; } }
  @media screen and (min-width: 1024px) {
    .c-menuTrigger {
      display: none; } }

.c-copyright {
  font-family: 'Damion', cursive;
  color: #000; }
  .c-copyright span {
    color: #F7A500; }

.c-ad {
  width: 300px;
  height: 250px;
  background: #ccc; }

.c-page {
  border-top: 1px solid #eee;
  padding: 48px 16px; }
  .c-page_hdg {
    margin-bottom: 20px;
    font-size: 3rem;
    text-decoration: none;
    color: #000; }
  .c-page_body img {
    max-width: 100%; }
  @media screen and (min-width: 1024px) {
    .c-page {
      padding: 48px 0; } }

.c-post .wp-block-image {
  padding-bottom: 24px; }
  .c-post .wp-block-image figcaption {
    font-weight: 400; }

.c-post_img {
  margin-bottom: 20px; }
  .c-post_img img {
    width: 100%;
    height: auto; }

.c-post_btm {
  padding: 0 16px; }

.c-post_meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 24px; }

.c-post_cat {
  font-weight: 400;
  font-size: 1.3rem;
  color: #7A818C;
  /*コメント
        複数量
        っd*/ }
  .c-post_cat:before {
    content: "・"; }

.c-post_dat {
  font-size: 1.3rem;
  color: #7A818C; }

.c-post_hdg {
  margin-bottom: 40px;
  text-decoration: none;
  color: #000; }
  .c-post_hdg h1 {
    font-size: 2.8rem;
    line-height: 1.3; }

.c-post_body img {
  width: 100%;
  height: auto; }

@media screen and (min-width: 1024px) {
  .c-post_btm {
    padding: 0; }
  .c-post_hdg {
    font-size: 3.2rem; } }

.c-post_links span {
  display: block;
  position: relative; }
  .c-post_links span:before, .c-post_links span:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 3px;
    background: #F7A500;
    border-radius: 1px; }
  .c-post_links span:before {
    top: 17px; }
  .c-post_links span:after {
    top: 27px; }

.c-post_links a {
  display: block;
  padding: 16px 24px; }

.c-post_links .prev:before, .c-post_links .prev:after {
  left: 0; }

.c-post_links .prev:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg); }

.c-post_links .prev:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }

.c-post_links .prev:hover {
  left: -4px; }

.c-post_links .next {
  text-align: right; }
  .c-post_links .next:before, .c-post_links .next:after {
    right: 0; }
  .c-post_links .next:before {
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg); }
  .c-post_links .next:after {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg); }
  .c-post_links .next:hover {
    right: -4px; }

@media screen and (min-width: 1024px) {
  .c-post_links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; } }

.c-page h1,
.c-page h2,
.c-page h3,
.c-page h4, .c-post h1,
.c-post h2,
.c-post h3,
.c-post h4 {
  line-height: 1.3; }

.c-page h2, .c-post h2 {
  margin: 32px 0;
  border-top: 1px solid #eee;
  font-size: 2.4rem;
  padding: 32px 0 0; }

.c-page h3, .c-post h3 {
  margin: 32px 0;
  font-size: 2rem;
  padding: 4px 0 4px 12px;
  border-left: 3px solid #F7A500; }

.c-page h4, .c-post h4 {
  font-size: 1.8rem;
  font-weight: 400;
  margin: 32px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid #F7A500; }

.c-page p, .c-post p {
  margin-bottom: 24px; }

.c-page ul li, .c-post ul li {
  list-style: none;
  line-height: 1.2;
  margin-bottom: 16px;
  padding-left: 16px;
  position: relative; }
  .c-page ul li:before, .c-post ul li:before {
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background: #222A38;
    position: absolute;
    left: 0;
    top: 7px; }

@media screen and (min-width: 1024px) {
  .c-page h2, .c-post h2 {
    font-size: 2.8rem; }
  .c-page h3, .c-post h3 {
    font-size: 2.4rem; }
  .c-page p, .c-post p {
    font-size: 1.6rem; } }

.c-postCard_img {
  display: block;
  margin-bottom: 24px; }
  .c-postCard_img img {
    width: 100%;
    height: auto; }

.c-postCard_btm {
  padding: 0 16px; }

.c-postCard_meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px; }

.c-postCard_cat {
  font-weight: 400;
  font-size: 1.3rem;
  color: #7A818C;
  /*コメント
        複数量
        っd*/ }
  .c-postCard_cat:before {
    content: "・"; }

.c-postCard_dat {
  font-size: 1.3rem;
  color: #7A818C; }

.c-postCard_hdg {
  display: block;
  margin-bottom: 14px;
  font-size: 2.4rem;
  text-decoration: none;
  color: #000; }

.c-postCard_exp {
  margin-bottom: 20px; }

@media screen and (min-width: 1024px) {
  .c-postCard_btm {
    padding: 0; } }

.c-postList li {
  list-style: none;
  margin-bottom: 12px; }

.c-postList article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.c-postList_img {
  display: block;
  width: 100px;
  height: 100px;
  margin-right: auto;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; }
  .c-postList_img img {
    width: 100%;
    height: auto; }

.c-postList_hdg {
  display: block;
  padding-left: 10px;
  text-decoration: none;
  overflow: hidden;
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 97px; }
  .c-postList_hdg h3 {
    font-weight: 400;
    line-height: 1.3; }

.c-heading-section {
  font-family: 'Damion', cursive;
  font-size: 3.2rem;
  text-align: center;
  margin-bottom: 40px; }

.c-heading-side {
  font-size: 2.4rem;
  font-family: 'Damion', cursive;
  margin-bottom: 20px; }

.c-more {
  font-family: 'Damion', cursive; }

.c-shopinfo {
  padding-bottom: 24px; }
  .c-shopinfo a {
    color: #0091FF; }
  .c-shopinfo_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fff4de; }
  .c-shopinfo_photo {
    display: none;
    width: 150px;
    height: 150px;
    margin-right: auto;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none; }
  .c-shopinfo_detail {
    min-width: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 16px; }
  .c-shopinfo_title {
    font-family: 'Damion', cursive;
    font-size: 2.4rem;
    margin-bottom: 8px; }
  .c-shopinfo_name h2 {
    border-top: none;
    margin: 0;
    padding: 0 0 16px;
    font-size: 2.2rem; }
  .c-shopinfo_address {
    font-weight: 400;
    margin-bottom: 8px;
    color: #7A818C; }
  .c-shopinfo_url {
    color: #7A818C;
    font-weight: 400; }
  .c-shopinfo i {
    margin-right: 6px; }
  @media screen and (min-width: 1024px) {
    .c-shopinfo_photo {
      display: block; } }

/*--------------------------------------------------------------
>>> unique
----------------------------------------------------------------*/
#aboutme {
  padding: 48px 16px;
  background: #ebf6ff;
  text-align: center; }
  #aboutme h4 {
    font-size: 2.4rem;
    margin: 10px 0 12px 0; }
  #aboutme p {
    font-size: 1.3rem; }
  #aboutme img {
    border-radius: 50%; }

/*--------------------------------------------------------------
>>> test
----------------------------------------------------------------*/
.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.box-1,
.box-2,
.box-3 {
  background: #ccc;
  border: 1px solid #000;
  width: 50%;
  padding: 15px; }