/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/


/* Common */

body{
    font-size: 14px;
    padding:0;
    font-family:-apple-system,
                BlinkMacSystemFont,
                Helvetica Neue,
                Segoe UI,
                Hiragino Kaku Gothic ProN,
                Hiragino Sans,
                ヒラギノ角ゴ ProN W3,
                Arial,
                メイリオ,
                Meiryo,
                sans-serif
}
a{
  text-decoration: none;
  padding: 0;
  margin:0;
}
a:hover {
  text-decoration: none;
}

p {
    padding-bottom: 18px;
    font-size:18px;
    margin: 0;
    line-height: 36px;
    color:#444444;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
}

ul {
  padding: 0;
  margin: 0;
}

span{
  padding: 0;
  margin: 0;
}

h1#single__title{
  font-weight: bold;
  font-size:32px;
}

h2 {
  font-size:24px;
  line-height: 42px;
  color:#444444;
}

::selection {
    background: #2CB696;
    color: #fff;
}

.container{
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

.clearfix{
  clear:both;
}

/* link color */

a.link { /* default text color*/
    color: #222222;
    text-decoration: none;
    cursor: pointer;
}

a.green {
    color: #2CB696;
    text-decoration: none;
    cursor: pointer;
}

/* header */

header{
  border-bottom:1px solid #E6E6E6;
  padding:24px 0;
}

    header .brand-container a{
      padding:0;
      margin:0;
    }
    header h1 a.brand-title{
      padding:0;
      margin:0;
      color:#2CB696;
      font-size:36px;
    }
    header.searchform{
    }
      header form.searchform input{
        font-size: 14px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        background: #fff;
      }

    nav {
      list-style: none;
    }

    nav li{
      display: inline-block;
      padding-right:8px;
      font-size:14px;
      list-style: none;
    }
    nav ul li a{
      color:#707070;
      text-decoration: none;
    }

      @media (max-width:768px) {
        header{
          padding:0;
        }
        .navbar-container{
          padding-top:8px;
        }
        nav li{
          display: inline-block;
          padding-right:8px;
          font-size:12px;
          list-style: none;
        }


      }

    nav li a {
      text-decoration: none;
      font-weight: bold;
      color:#787c7b;
    }

  div.brand-container a img.brand-image{
    width:360px;
    height:auto;
    max-width:100%;
    max-height:100%;
  }

  header div#single-header{
      margin-bottom: 20px;
    }


/* main */

main{
  background-color: #F7F9F9 ;
  padding-bottom: 36px;
}

@media (max-width:768px) {
  div.wrap {
    padding: 0;
  }
}

/* posts*/
#index{
  background-color:#fff;
}
#posts {
    float: left;
    width:435px;
}

    .post {
      border-bottom: 1px solid rgba(0,0,0,0.15);
      background-color: #fff;
      clear:both;
      margin-top:40px;
    }

    .single-post { /*single.php用*/
      background-color: #fff;
      clear:both;
      margin-top:40px;
    }

      .post-header{
          font-size: 16px;
          font-weight:bold;
      }

        .post-header__summary span{
            display: block;
            overflow: hidden;
            padding:0 20px 20px;
        }

        .category a{
          color:#2CB696;
          text-decoration: none;
        }

        .post-header__summary img{
            width: 36px;
            height: 36px;
            border-radius: 36px;
            display: inline;
        }


        div.post-header img {
          width: 100%;
          height: auto;
          max-width:100%;
          max-height:100%;
          text-align: center;
        }

        @media (max-width:768px){
          div.post-header{
            padding:20px 0;
          }
        }

        img#single-image{
          width: auto;
          height: auto;
          max-width:100%;
          max-height:100%;
          text-align: center;
        }

        .post-content{
            overflow: hidden;
            margin-top:20px;
        }

        @media (max-width:768px){
          .post-content#single {
            margin: 16px;
          }
        }


          main#index h3.post-content__title{ /* index.php / category.php etcの場合*/
            font-size: 22px;
            font-weight: bold;
          }
          main#index h3.post-content__title a{ /* index.php / category.php etcの場合*/
            color:#222222;
            font-weight:bold;
          }
          main#single h1.post-content__title{ /* single.php */
              font-size: 32px;
              font-weight: bold;
          }
          @media (max-width:768px){
            main#single h1.post-content__title{
              font-size:25px;
            }
          }
          main#single h1.post-content__title a{ /* index.php / category.php etcの場合*/
            color:#222222;
            font-weight:bold;
          }

            .post-content__info {
                background-color: #f7f9f9;
                padding: 20px;
            }

              .post-content__info a{
                  color:#2CB696;
              }

            .post-content__time{
              display:inline;
              margin-bottom:8px;
              color:#787C7B;

            }

            /* 投稿内のCSS*/
            div.post-content__text{
              color:#444444;
              line-height: 1.7;
            }

              div.post-content__text h1{
                font-size:32px;
              }

              div.post-content__text h3, div.post-content__text h2{
                  margin:36px 0;
                  font-family: inherit;
                  font-weight: 500;
                  line-height: 1.2;
                  font-size:20px;
                  color: inherit;
                  font-weight: bold;
              }

              .post-content__text{
                 font-size: 16px;
                 padding-top:16px;
                 color:#707070;
               }

               .post-content__text img{
                 width:100%;
                 height:auto;
                 max-width:auto;
                 min-width:auto;
                 margin:36px 0;
               }

               .post-content__text ul, .post-content__text ol{
                 background-color:#f7f9f9;
                 font-size:16px;
                 padding-top:16px;
                 padding-bottom:16px;
                }

                .post-content__text blockquote{
                background-color:#f7f9f9;
                font-size:16px;
                padding:16px;
               }

               .post-content__text ul li{
                padding-left: 16px;
				     list-style:none;
             }

               .post-content__text ul li:before{
                  content:url("https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_official_account-fd018817c4c03a41d5c6e3f3bc3ddf523febe0749281bde9c07052f8ef27c5b5.svg");
                  margin-right: 8px;
               }

               .post-content__text a{
                 color:#2CB696;
                 text-decoration: none;
               }
               .post-content__text a:hover{
                 text-decoration: none;
               }

               main#index .post-content__text p{ /* index.php / category.php etcの場合*/
                 line-height: 1.7;
                 color:#707070;
                 font-size:14px;
               }
               main#single .post-content__text p{ /* single.phpの場合*/
                line-height: 1.7;
                color:#707070;
                font-size:18px;
              }



            .post-content__category a{
              border:#2CB696;
            }

            .post-body{
                margin-left:115px;
            }

        .post-footer{
          overflow: hidden;
          margin-bottom:26px;
        }
          .post-footer .readmore{
            color:#249f80;
          }

/* category*/

#category-container{
  margin:40px 0;
}
#category-container h3.category__name{
    color:#222222;
    font-weight: bold;
  }

/* recommend*/
p#recommend-message{
  font-size:16px;
  color:#222222;
  font-weight: bold;
}

div.recommend-container{
  padding:20px 0;
  margin:80px 0;
}

  a.recommend-post__link{
    display: block;
    text-decoration: none;
  }

  a.recommend-post__link:hover {
    text-decoration: none;
  }
  div.recommend-post{
    background-color: #fff;
    border-top:1px solid rgba(0,0,0,0.15);
    padding: 15px 0;
  }

  div.recommend-post:hover{
    background-color: #f7f9f9;
  }

  div.recommend-post__title span{
    font-size:16px;
    font-weight: bold;
    color:#222222;
  }

  div.recommend-post__description p{
    font-size:12px;
    line-height: 1.5;
  }
  div.recommend-post__permalink p{
    font-size:10px;
  }

  span.recommend-post-time__created{
    color:#222222;
  }

  img.recommend-post__permalink__image{
    width:auto;
    height:72px;
    max-width: 100%;
    max-height: 100%;
  }



/* pagination */

div#pagenation{
  padding-top:24px;
}
    div#pagenation div.pagenation__button{
      border:1px solid #707070;
      padding:8px 24px;
      background-color: #fff;
    }

/* navigation*/

.navigation {
    overflow: hidden;
    padding: 10px 0;
    font-size: 12px;
    margin-bottom: 15px;
}

    .prev{
        float: left;
        width: 200px;

    }

    .next{
        float: right;
        width: 200px;
    }



/* sidebar */

.sidebar-widget{
  background-color: #fff;
  clear:both;
  margin:40px 0;
}

@media (max-width:768px) {

  div.sidebar-widget{
    clear:both;
    margin: 40px 16px 0 16px;
  }
}

    .widget-title{
        margin-bottom: 25px;
        color:#222222;
        font-weight:bold
      }

        .widget h3{
            font-weight:bold;
            padding-bottom: 7px;
        }

        .widget li{
            line-height: 1.8;
        }

        .sidebar-widget ul li{
          border-bottom: 1px solid #eee;
          padding:16px 0;
          list-style: none;
        }

        .sidebar-widget ul li a{
          color:#707070;
        }


/* profile */
.profile{

}
  .profile__img{
      width: 130px;
      border-radius: 50%;
      height: auto;
      max-width: 100%;
      max-height: 100%;
  }

  .profile__name{
    margin:24px 0;
  }

  .profile__description{
    margin:16px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #707070;
  }
  .profile__cta{
      background-color: rgb(44, 182, 150);
      font-weight: bold;
      display: block;
      text-align: center;
      padding: 12px;
      display:block;
      border-radius: 10px;
      color: #ffffff !important;
  }

  .profile__cta:hover {
    opacity: 0.5;
    transition: 0.5s;
  }

/* archive */

#archive{

}
    div.archive h3.archive__name{
      margin:24px 0;
    }

    ul#archive__dates li{
      border-top: 1px solid #eee;
      padding:16px;
      list-style: none;
    }


/* footer */
#footer{
    padding: 15px 0;
    font-size: 12px;
    color:#aaa;
    border-top: 1px solid #ccc;
}


/* Common */


/* single */

main#single{
  background-color: #fff;
  padding-bottom: 36px;
}

div.post-content#single{
  border-bottom:1px solid #eee;
}

footer{
  background-color:#fff;
  padding:8px 0;
  border-top:1px solid #eee;
}

  span.footer-pv__icon {
    font-size:24px;
  }

  span.footer-sns__button{
    padding-left: 32px;
  }

  a.footer-sns__button__link{
    color:#787c7b;
    font-size:24px;
  }

/* 404 */
div#page-404{
  margin:40px;
}

div#page-404 h3{
  margin-bottom:40px;
}

div#page-404 a{
  background-color:#2CB696;
  padding:8px 20px;
  border-radius:5px;
  color:#eee;
}

/* selection */

div.selection:hover{
}
  div.selection h3.selection__title a{
    color:#222222;
    font-size:18px;
    font-weight:bold;
  }

  div.selection__container{
    padding: 12px 0;
    border-bottom:1px solid #E6E6E6;
  }

  div.selection p.selection__description{
    font-size:14px;
    line-height:1.7;
    color:#707070;
  }
  div.selection div.selection__img{
    background-color:#707070;
  }
  div.selection a.readmore{
    color:#2CB696;
  }
  div.selection div.selection__img{
    position: relative;
  }
  div.selection p.selection__img__text{
    position: absolute;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
  }

  div.selection p.selection__img__text a{
    color: white;
    font-size:10px;
  }

  div.selection div.selection__img img{
    width: 100%;
  }

  @media (max-width:768px) {
    div.selection h3.selection__title a{
      font-size:18px;
      font-weight: bold;
    }
    div.selection p.selection__img__text a{
      color: white;
      font-size:20px;
    }

    div.selection div.selection__img img{
      width: 100%;
    }


  }


/* pr */

div.pr__container{
  padding:20px 0;
  border-bottom:1px solid #E6E6E6;
}


img.pr__image{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
div.pr time.pr__time{
  text-decoration:none;
  color:#707070;
  font-size:14px;
}
div.pr h3.pr__title{
  font-size:18px;
  padding:0px;
  font-weight:bold;
}

div.pr h3.pr__title a{
  text-decoration:none;
  color:#222222;
}

@media (max-width:768px){
  div.pr{
    margin-top:20px;
  }


}

/* cta */
a.cta {
    background-color: rgb(44, 182, 150);
    font-weight: bold;
    max-width: 100%;
    display: block;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    color: #ffffff !important;
    margin: 40px 20px;
}

a.cta:hover {
  opacity: 0.5;
  transition: 0.5s;
}

/* item-cta */

div.item-cta__container{
  padding:20px;
}

div.item-cta{
  border:1px solid rgb(230, 230, 230);
  padding:20px;
}

  div.item-cta__header{
    border-bottom:1px solid rgb(230, 230, 230);
  }

  div.item-cta__body{
    padding:20px;
  }
  div.item-cta__info{
    font-size: 16px;
    font-weight: bold;
    padding:8px;
  }

  div.item-cta__title{
    color:#2CB696;
    text-decoration:underline;
    font-size: 18px;
    font-weight: bold;
  }

  div.item-cta__img img{
    width:100%;
    height:auto;
    padding:0;
    margin:0;
  }

  a.item-cta__cta{
    background-color: rgb(44, 182, 150);
    font-weight: bold;
    max-width: 100%;
    display: block;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    color: #ffffff !important;
  }

  @media (max-width:768px){
    div.item-cta__container {
      padding: 0px;
    }

    div.item-cta{
      margin: 8px 0;
    }


    div.item-cta__title{
      font-size:14px;
    }
    a.item-cta__cta{
      background-color: rgb(44, 182, 150);
      font-weight: bold;
      max-width: 100%;
      display: block;
      text-align: center;
      padding: 8px;
      border-radius: 10px;
      color: #ffffff !important;
    }
  }

/* footer */
footer{
  background-color:#f7f9f9;
  border-top:1px solid rgba(0,0,0,0.15);
}

/* comment */
.comment img{
  float: left;
  margin:0 8px 0 0;
  width:80px;
  height:80px;
}

/*--------------------
 レスポンシブ対応
--------------------*/