@charset "utf-8";

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #fff;
   letter-spacing: 0.2em;
}

header {
   font-family: 'Zen Maru Gothic', sans-serif;
   padding: 20px 4% 20px;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #F5F5F5;
   display: flex;
   align-items: center;
}

h1 img {
   margin: 0;
   padding: 0;
   height: 25px;
   max-height: 25px;
}


a {
   text-decoration: none;
   color: #121212;
}

nav {
   margin: 0 0 0 auto;
}

ul {
   list-style: none;
   margin: 0;
   display: flex;
}

li {
   margin: 0 0 0 25px;
   font-size: 13px;
}

.services ul {
   max-width: 800px;
   display: flex;
   justify-content: center;
   margin: 0 auto;
   padding: 0;
   text-align: center;
}

.services li {
   margin: 0 auto 50px auto;
   list-style: none;
   font-size: 12px;   
   
}

.services li img {
   display: block; 
   object-fit: cover;
   width: 70%;
   height: auto;
   margin: 0 auto 10px auto;
   
}


.contact {
   padding: 0 0 60px;
   margin: 0px auto;
   text-align: center;
   color: #fff;
}

.item {
   margin: 0 auto 20px;
   padding: 10px;
   width: 32%;
}



/*************ボタン***********/

.btntextchange{
   /*テキストの基点とするためrelativeを指定*/
   position: relative;
   /*ボタンの形状*/
   border: 2px solid #121212;
   border-radius: 40px;
   min-width: 225px;
   padding: 20px;
   margin:  30px auto;
   text-align: center;
   display: inline-block;
   text-decoration: none;
   outline: none;
   /*アニメーションの指定*/
   transition: all .2s;
   justify-content: center;
   align-items: center;
}

.btntextchange a{
   color: #121212;
   position: relative;
}
 /* 矢印 */
 .btntextchange::after {
   content: "";
   margin: auto;
   position: absolute;
   top: 0;
   right: 20px;
   bottom: 0;
   width: 9px;
   height: 9px;
   border-top: 2px solid #121212;
   border-right: 2px solid #121212;
   transform: rotate(45deg);
  }


/*hoverした際の変化*/
.btntextchange:hover {
   background: #ddd;
}


.btntextchange span {
   /*絶対配置でテキストの位置を決める*/
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   /*アニメーションの指定*/
   transition: all .5s;
   /*ブロック要素にしてテキスト折り返しなし*/
   display: block;
   white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2) {
   opacity: 0;
   /*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1) {
   opacity: 0;
   /*透過0に*/
}

.btntextchange:hover span:nth-child(2) {
   opacity: 1;
   /*不透明に*/
}


/*************CONTACTボタン***********/
.btntextchange_contact{
   /*テキストの基点とするためrelativeを指定*/
   position: relative;
   /*ボタンの形状*/
   border: 2px solid #fff;
   border-radius: 40px;
   min-width: 225px;
   padding: 20px;
   margin:  30px auto;
   text-align: center;
   display: inline-block;
   text-decoration: none;
   outline: none;
   /*アニメーションの指定*/
   transition: all .2s;
   

}

.btntextchange_contact a{
   color: #fff;
   position: relative;
}
 /* 矢印 */
 .btntextchange_contact::after {
   content: "";
   margin: auto;
   position: absolute;
   top: 0;
   right: 20px;
   bottom: 0;
   width: 9px;
   height: 9px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: rotate(45deg);
  }


/*hoverした際の変化*/
.btntextchange_contact:hover {
   background: #121212;
}


.btntextchange_contact span {
   /*絶対配置でテキストの位置を決める*/
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   /*アニメーションの指定*/
   transition: all .5s;
   /*ブロック要素にしてテキスト折り返しなし*/
   display: block;
   white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange_contact span:nth-child(2) {
   opacity: 0;
   /*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange_contact:hover span:nth-child(1) {
   opacity: 0;
   /*透過0に*/
}

.btntextchange_contact:hover span:nth-child(2) {
   opacity: 1;
   /*不透明に*/
}




@media not all and (min-width: 768px) {
   .item {
      width: 100%;
      
   }

   .item:not(:last-child) {
      margin-bottom: 30px;
   }
}

.wrap {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding: 0 0 60px;
   margin: 0px 110px;
}

.br-sp {display: none; }


.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 80vh;
   background: url('https://monocotodesign.com/images/top_mv.jpg') top center / cover no-repeat;
}

.main-visual h2 img{
   margin-left: auto;
   margin-right: auto;
   width: 9em;
}

.works {
   justify-content: center;
   align-items: center;
   width: 100%;
   background: url('https://monocotodesign.com/images//squares.png') top center / cover no-repeat;
}

.about {
   justify-content: center;
   align-items: center;
   width: 100%;
   background: url('https://monocotodesign.com/images/about_bg.jpg') top center / cover no-repeat;
}

.contact {
   justify-content: center;
   align-items: center;
   width: 100%;
   background: url('https://monocotodesign.com/images/contact_bg.jpg') top center / cover no-repeat;
}

.contact h2{
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   padding: 60px 0 15px 0;
   font-size: 30px;
   font-weight: normal;
   color: #fff;
}

.contact h3{
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   margin: 0 0 40px 0;
   font-size: 12px;
   font-weight: 700;
   color: #fff;
}

.contact p {
   text-align: center;
   padding: 0 0 10px 0;
   font-size: 14px;
   font-weight: normal;
   color: #fff;
}
  

.in_h2{
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   padding: 120px 0 15px 0;
   font-size: 30px;
   font-weight: normal;
   color: #121212;
}

.blog_title{
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   margin: -100px auto 20px;
   padding: 20px 0 20px 0;
   font-size: 18px;
   font-weight: normal;
   color: #121212;
   border-top:dotted;/*下線を点線にする*/
   border-bottom:dotted;/*下線を点線にする*/
   border-color: #121212;
   border-width:1px;
}
.blog_article a{
   color: #065FD4;
   border-bottom: 1px solid;
}

h2 {
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   padding: 60px 0 15px 0;
   font-size: 30px;
   font-weight: normal;
   color: #121212;
}

h3 {
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   margin: 0 0 40px 0;
   font-size: 12px;
   font-weight: 700;
   color: #121212;
}

h4 {
   font-family: 'Zen Maru Gothic', sans-serif;
   text-align: center;
   margin: 15px 0 10px 0;
   font-size: 15px;
   letter-spacing: 0.08em;
   font-weight: 600;
   color: #121212;
}

p {
   text-align: center;
   padding: 0 0 100px 0;
   font-size: 14px;
   font-weight: normal;
   color: #121212;
}

.works p {
   text-align: center;
   padding: 0 0 40px 0;
   font-size: 14px;
   font-weight: normal;
   color: #121212;
}

.item p {
   text-align: center;
   padding: 0 0 10px 0;
   font-size: 10px;
   font-weight: normal;
   letter-spacing: 0.08em;
}

.text_link {
   text-align: center;
   letter-spacing: 0.08em;
   font-size: 11px;
   font-weight: bold;   
   color:#065FD4;
}

.blog_article{
   margin : 0px 20px ;
   text-align: center;
   line-height: 2.2em;
   font-size: 11px;
   letter-spacing: 0.08em;
}


.blog_article img{
   text-align: center;
   margin : -40px auto 0 ;
}
.item img {
   border-radius: 10px;
   border: 2px #121212 solid;
}

.about a img {
   margin-top: 40px;
   margin-left: auto;
   margin-right: auto;
   width: 2.5em
}


.sp-nav {
   display: none;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc-img {
   display: block !important;
   width: 100%;
}

.sp-img {
   display: none !important;
}


@media screen and (max-width: 640px) {
   .main-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background: url('https://monocotodesign.com/images/sp-top_mv.jpg') top center / cover no-repeat;
   }

   .main-visual h2 img{
      display: none;
   }

   .p {
      text-align: center;
      padding: 0 0 100px 0;
      font-size: 12px;
      line-height: 160%;
      font-weight: normal;
      color: #121212;
   }

   li {
      margin: 0 0 0 25px;
      font-size: 11px;
   }
   .services ul {
      max-width: 800px;
      display: flex;
      justify-content: center;
      margin: 0 6px;
      padding: 0;
      text-align: center;
   }

   .works {
      justify-content: center;
      align-items: center;
      height: 100%;
      background: url('https://monocotodesign.com/images/sp-squares.jpg') top center;
   }

   .wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 0 60px;
      margin: 0px 25px;
   }

   .contact {
      justify-content: center;
      align-items: center;
      background-size: cover;
      background: url('https://monocotodesign.com/images/sp-contact_bg.jpg') top center / auto;
   }

   .pc-img {
      display: none !important;
   }

   .sp-img {
      display: block !important;
      width: 100%;
   }

   .br-sp{
      display: block;
  }

   .pc-nav {
      display: none;
   }

   .sp-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
      z-index: -1;
   }

   .overlay{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .8);
      cursor: pointer;
    }

   .sp-nav_item{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      background-color: rgba(0, 0, 0, .8);
      transform: translate(-50%, -50%);
   }

    .sp-nav.show{
      opacity: 1;
      visibility: visible;
      z-index: 10000;
    }
    
   #hamburger {
      z-index: 10;
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }

   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #121212;
      transform: translateY(-50%);
   }

   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #121212;
   }

   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #121212;
   }

   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }

   .sp-nav li {
      margin: 0;
      padding: 0;
      font-size: 18px;
   }

   .sp-nav li a{
      color: #fff;
   }

   .sp-nav li span {
      font-size: 15px;
      color: #fff;
   }

   .sp-nav li a,
   .sp-nav li span {
      display: block;
      padding: 20px 0;
   }

   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }

   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 2px;
      background: #fff;
      transform: rotate(45deg);
   }

   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 2px;
      background: #fff;
      transform: rotate(-45deg);
   }

   .toggle {
      transform: translateY(0);
      opacity: 1;
   }
      
   .main-visual {
      padding: 0 4%;
   }

   h2 {
      line-height: 1.6;
      text-align: center;
   }
}


.tagline {
   margin: 40px 0 -60px 0;
   font-size: 20px;
   text-align: center;
}

.dot-bg {
   background-image: url('https://monocotodesign.com/images/dot_line.png');
}

.services {
   background-color: #ececee;
}

#footer {
   background: #121212;
   padding: 30px; 
}

#footer h1 img {
   margin-left: auto;
   margin-right: auto;
   width: 20em;
}

#footer p {
   font-size: 8px;
   color: #fff;
   padding: 10px 0px 0px;
}

#footer a {
   font-size: 9px;
   color: #fff;
   text-decoration:underline;
}