/*
Theme Name:original
*/
@charset "UTF-8";

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

*{
  border: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 16px;
  color: #464036;
  letter-spacing: 0.2em;
  line-height: 2em;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

footer{
  background-color: #000000;
}

h2{
  font-family: 'Lato', sans-serif;
  text-align: center;
  font-size: 50px;
  font-weight: 100;
  padding: 80px 0 50px 0;
}

h3{
  font-family: 'Lato', sans-serif;
}

img{
  display: block;
  width: 100%;
}

ul,ol{
  list-style: none;
}

a{
  text-decoration: none;
  color: #0e7ed4;
}

/* パソコン時、電話のリンクを許可しない */
a[href^="tel:"] {
    pointer-events: none;
}


/* --------------------------------------------------------------------------- */
/* 共通クラス ここから↓                                                       */
/* --------------------------------------------------------------------------- */
.header,
.footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ロゴ */
.logo{
  width: 40%;
  max-width: 140px;
}

/* グローバルナビゲーション */
.h-nav,
.f-nav{
  display: flex;
  padding: 30px 0;
}
.h-nav li a,
.f-nav li a{
  display: block;
  padding: 10px 30px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000;
}
.f-nav li a{
  color: #fff;
}

/* breadcrumb */
.breadcrumb{
  display: flex;
  padding: 10px 0;
  margin-bottom: 50px;
}
.breadcrumb li a{
  text-decoration: underline;
}
.breadcrumb li:after{
  content: ">";
  padding: 0 5px;
}
.breadcrumb li:last-child:after{
  content: "";
}
/* 外枠 */
.container{
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}

/* Copyright */
.copyright{
  text-align: center;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  background-color: #ecece7;
  padding: 5px 0;
}
/* 表示切替 */
.showPc{
  display: block;
}
.showSp{
  display: none;
}

/* Google Icons */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .header{
    padding: 20px 0;
  }

  /* ロゴ */
  .logo{
    width: 100px;
    max-width: 100px;
  }

  /* グローバルナビゲーション */
  .h-nav{
    display: none;
  }

  /* グローバルナビゲーション */
  .f-nav{
    display: flex;
    padding: 30px 0;
  flex-direction: column;
  }
  .f-nav li a{
    display: block;
    padding: 10px 30px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 18px;
  }
  .f-nav li a{
    color: #fff;
  }

  /* 外枠 */
  .container{
    width: 96%;
    margin: 0 auto;
    max-width: 760px;
  }

  /* 表示切替 */
  .showPc{
    display: none;
  }
  .showSp{
    display: block;
  }
}
/* --------------------------------------------------------------------------- */
/* 共通クラス ここまで↑                                                       */
/* --------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------- */
/* トップページ ここから↓                                                     */
/* --------------------------------------------------------------------------- */

/* Service ここから↓ -------------------------------------------------------- */
.top-service-outer{
  padding: 0 0 80px 0;
}
.top-service-outer ul{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.top-service-outer ul li{
  width: 30%;
}
.top-service-outer ul li section{
  display: flex;
  flex-direction: column;
}
.top-service-outer ul li section h3{
  order: 1;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}
.top-service-outer ul li section img{
  order: 2;
  padding: 20px 0;
}
.top-service-outer ul li section p{
  order: 3;
}

/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .top-service-outer ul{
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
  .top-service-outer ul li{
    width: 100%;
    margin-bottom: 50px;
  }
}
/* Service ここまで↑ -------------------------------------------------------- */


/* Works ここから↓ ---------------------------------------------------------- */
.top-works-container{
  padding: 0 0 80px 0;
  background-color: #ecece7;
}
.top-works-container ul{
  display: flex;
  flex-wrap: wrap;
}
.top-works-container ul li{
  width: 33.333%;
}
/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .top-works-container ul li{
    width: 50%;
    margin-bottom: 50px;
  }
}
/* Works ここまで↑ ---------------------------------------------------------- */


/* Blog ここから↓ ----------------------------------------------------------- */
.top-blog-container{
  padding: 0 0 80px 0;
}
.top-blog-container ul{
  display: flex;
  flex-wrap: wrap;
}
.top-blog-container ul li{
  width: 33.333%;
}
.top-blog-container ul li section{
  display: flex;
  flex-direction: column;
  padding: 0 30px 60px 30px;
}
.top-blog-container ul li section img{
  order: 1;
}
.top-blog-container ul li section h3{
  order: 2;
  padding: 10px 0;
}
.top-blog-container ul li section p{
  order: 3;
}
.top-blog-container ul li section a{
  order: 4;
  display: block;
  width: 100px;
  text-align: center;
  color: #fff;
  background-color: #000;
  margin: 20px 0 0 auto;
}

/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .top-blog-container ul li{
    width: 50%;
  }
  .top-blog-container ul li section{
    padding: 0 10px 60px 10px;
  }
}
/* Blog ここまで↑ ----------------------------------------------------------- */

/* --------------------------------------------------------------------------- */
/* トップページ ここまで↑                                                     */
/* --------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------- */
/* Aboutページ ここから↓                                                      */
/* --------------------------------------------------------------------------- */
.about-vi{
  width: 100%;
  height: 200px;
  background: url('./images/about/vi_about_pc.jfif') no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
}

.about-container{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.about-container img{
  width: 30%;
}
.about-container section{
  width: 65%;
}
.about-container section h2{
  text-align: left;
  font-weight: 400;
  padding: 30px 0;
}
.about-container section p{
  padding-bottom: 20px;
}


  /* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .about-vi{
    background: url('./images/about/vi_about_sp.jfif') no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .about-container{
    flex-direction: column;
  }
  .about-container img{
    width: 100%;
  }
  .about-container section{
    width: 100%;
  }
  .about-container section h2{
    font-size: 6vw;
    text-align: center;
  }
  .about-container section p{
    padding-bottom: 20px;
  }
}
/* --------------------------------------------------------------------------- */
/* Aboutページ ここまで↑                                                      */
/* --------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------- */
/* Worksページ ここから↓                                                      */
/* --------------------------------------------------------------------------- */
.works-vi{
  width: 100%;
  height: 200px;
  background: url('./images/works/vi_works_pc.jfif') no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
}

.works-lists{
  display: flex;
  flex-wrap: wrap;
}

.works-lists li{
  width: 33.333%;
}

.works-detail-container{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.works-detail-container img{
  width: 40%;
}
.works-detail-container section{
  width: 57%;
}
.works-detail-container section h2{
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  padding: 20px 0 10px 0;
}
.works-detail-container section p{
  padding-bottom: 20px;
}
.works-detail-container section a{
  display: flex;
  align-items: center;
  transition: 0.3s;
}
.works-detail-container section a:before{
  content: "\e89e";
  font-family: 'Material Icons';
  padding-right: 5px;
  font-size: 14px;
  color: #666;
}
.works-detail-container section a:hover{
  opacity: 0.7;
}

.skill-lists{
  display: flex;

}
.skill-lists li{
  font-size: 12px;
  margin-bottom: 20px;
}
.skill-lists li:after{
  content: "/";
  padding: 0 5px;
}
.skill-lists li:last-child:after{
  content: "";
}

/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .works-vi{
    background: url('./images/works/vi_works_sp.jfif') no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .works-lists{
    flex-direction: column;
  }

  .works-lists li{
    width: 100%;
    margin-bottom: 50px;
  }

  .works-detail-container{
    flex-direction: column;
  }
  .works-detail-container img{
    width: 100%;
  }
  .works-detail-container section{
    width: 100%;
  }
}
/* --------------------------------------------------------------------------- */
/* Worksページ ここまで↑                                                      */
/* --------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------- */
/* Blogページ ここから↓                                                       */
/* --------------------------------------------------------------------------- */
.blog-vi{
  width: 100%;
  height: 200px;
  background: url('./images/blog/vi_blog_pc.jfif') no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
}

.blog-container{
  display: flex;
}
/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .blog-vi{
    background: url('./images/blog/vi_blog_sp.jfif') no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
/* --------------------------------------------------------------------------- */
/* Blogページ ここまで↑                                                       */
/* --------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------- */
/* Contactページ ここから↓                                                    */
/* --------------------------------------------------------------------------- */
.contact-vi{
  width: 100%;
  height: 200px;
  background: url('./images/contact/vi_contact_pc.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
}

.contact-form{
  border: 5px solid #eee;
  margin: 50px auto;
  padding: 5vw 10vw;
}
.contact-form form{}
.contact-form label{
  display: block;
  margin-bottom: 30px;
}
.contact-form label .require:after{
  content: "必須";
  border: 1px solid #dc3232;
  padding: 5px 10px 3px 10px;
  color: #dc3232;
  font-size: 12px;
  display: inline-block;
  line-height: 1em;
  margin: 0 0 10px 10px;
}
.contact-form label input,
.contact-form label textarea{
  background-color: #f7f7f7;
  padding: 10px;
}
.contact-form label textarea{
  width: 80%;
}

::placeholder{
  color: #c8c8c8;
}

input[type="submit"] ,
.wpcf7cp-cfm-submit-btn,
.wpcf7cp-cfm-edit-btn{
  padding: 5px 20px;
  background-color: #000;
  color: #fff;
}
.wpcf7cp-cfm-edit-btn{
  background-color: orange;
}
input[type="submit"]:hover,
.wpcf7cp-cfm-submit-btn:hover,
.wpcf7cp-cfm-edit-btn:hover
{
  cursor : pointer;
}

/* 確認画面 */
#wpcf7cpcnf table tr th,
#wpcf7cpcnf table tr td{
  padding: 20px;
}
#wpcf7cpcnf table tr th{
  text-align: left;
}


/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  .contact-vi{
    background: url('./images/contact/vi_contact_sp.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
/* --------------------------------------------------------------------------- */
/* Contactページ ここまで↑                                                    */
/* --------------------------------------------------------------------------- */