/*
@mixin tabMpc { 
	@media screen and (min-width: 768px) and (max-width: 1280px){
		@content;
	}	
}
@mixin tabwMpc { 
	@media screen and (min-width: 961px) and (max-width: 1280px){
		@content;
	}	
}
*/
/* ----------------------------------------
	#case
---------------------------------------- */
#case {
  /******************common*******************/
  /******************index*******************/
  /*******#sidebarArea*****/
  /*******single*****/ }
  #case #case_ol.inner {
    padding-top: 0px; }
    @media screen and (min-width: 961px) {
      #case #case_ol.inner {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; } }
    @media screen and (min-width: 961px) {
      #case #case_ol.inner #listArea_ol {
        width: 72%; } }
    @media screen and (min-width: 961px) {
      #case #case_ol.inner #sidebarArea {
        width: 25%;
        padding-top: 80px; } }
    @media screen and (min-width: 1281px) {
      #case #case_ol.inner #sidebarArea {
        padding-top: 120px; } }
    #case #case_ol.inner #sidebarArea .archivetitle {
      font-weight: bold;
      font-size: 1.8rem;
      padding: 15px 10px;
      background: #5c5651;
      color: #ffffff;
      border-radius: 5px;
      margin-bottom: 10px; }
  #case .category span {
    border-radius: 5px;
    line-height: 1.0;
    color: #ffffff;
    display: inline-block;
    padding: 3px 7px 5px 7px;
    margin-right: 5px;
    background: #006934; }
  #case .category .casehouse {
    background: #79A84C; }
  #case .category .casepetit {
    background: #F18900; }
  #case ul.caseList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px; }
    @media screen and (min-width: 768px) {
      #case ul.caseList {
        margin-bottom: 40px; } }
    #case ul.caseList li {
      width: 100%;
      margin-bottom: 20px;
      border: 2px solid #cccccc;
      border-radius: 10px; }
      @media screen and (min-width: 768px) {
        #case ul.caseList li {
          width: 48%; } }
      @media screen and (min-width: 961px) {
        #case ul.caseList li {
          margin-bottom: 30px; } }
      #case ul.caseList li:hover {
        border: 2px solid #006934; }
      #case ul.caseList li a {
        display: block;
        padding: 10px; }
        @media screen and (min-width: 768px) {
          #case ul.caseList li a {
            padding: 20px; } }
      #case ul.caseList li .imgArea {
        position: relative;
        width: 100%;
        margin: 0px auto;
        margin-bottom: 7px; }
        #case ul.caseList li .imgArea img {
          border-radius: 10px; }
      #case ul.caseList li .about_ol {
        position: relative;
        padding-right: 12px; }
        #case ul.caseList li .about_ol .date {
          font-size: 1.2rem; }
          @media screen and (min-width: 768px) {
            #case ul.caseList li .about_ol .date {
              position: absolute;
              right: 0px;
              top: 5px; } }
        #case ul.caseList li .about_ol .category {
          margin-bottom: 3px; }
          #case ul.caseList li .about_ol .category span {
            font-size: 1.4rem;
            font-weight: bold;
            padding: 3px 10px 5px 10px; }
        #case ul.caseList li .about_ol h3.TitleName {
          font-size: 1.4rem; }
        #case ul.caseList li .about_ol h4.TitleNaiyou {
          font-weight: bold;
          margin-bottom: 3px; }
          @media screen and (max-width: 480px) {
            #case ul.caseList li .about_ol h4.TitleNaiyou {
              font-size: 1.4rem; } }
        #case ul.caseList li .about_ol::after {
          content: url("../images/common/arrow_brown.svg");
          display: inline-block;
          width: 5px;
          background-size: contain;
          vertical-align: middle;
          position: absolute;
          bottom: 0px;
          right: 0px; }
        #case ul.caseList li .about_ol dl.overview {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; }
          #case ul.caseList li .about_ol dl.overview dt, #case ul.caseList li .about_ol dl.overview dd {
            font-size: 1.3rem;
            line-height: 1.4; }
          #case ul.caseList li .about_ol dl.overview dt {
            width: 70px; }
          #case ul.caseList li .about_ol dl.overview dd {
            width: -webkit-calc(100% - 70px);
            width: calc(100% - 70px); }
    #case ul.caseList .empty {
      display: none; }
  @media screen and (min-width: 768px) {
    #case ul.caseList::after {
      content: "";
      display: block;
      width: 32%; } }
  #case .linkBtn {
    text-align: center;
    width: 300px;
    margin: 0px auto;
    border: 1px solid #999;
    border-radius: 5px; }
    #case .linkBtn a {
      display: block;
      padding: 15px 10px;
      color: #006934;
      font-weight: bold;
      font-size: 1.4rem;
      position: relative; }
      #case .linkBtn a::after {
        content: url("../images/common/arrow_green2.svg");
        display: inline-block;
        width: 5px;
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: 29%;
        right: 10px; }
    #case .linkBtn:hover {
      border: 1px solid #79A84C; }
  #case #sidebarArea ul.catList {
    margin-bottom: 30px; }
    #case #sidebarArea ul.catList li a {
      padding: 15px 0px 15px 0px;
      display: block;
      font-weight: bold;
      border-bottom: 1px solid #ebebeb;
      position: relative; }
      #case #sidebarArea ul.catList li a::after {
        content: url("../images/common/arrow_green2.svg");
        display: inline-block;
        width: 5px;
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: 28%;
        right: 0px; }
    #case #sidebarArea ul.catList li a.casehouse {
      color: #006934; }
    #case #sidebarArea ul.catList li a.casepetit {
      color: #F18900; }
  #case #sidebarArea ul.areaList {
    margin-bottom: 30px; }
    #case #sidebarArea ul.areaList li {
      display: inline-block;
      margin-right: 5px;
      margin-bottom: 5px; }
      #case #sidebarArea ul.areaList li a {
        padding: 2px 5px 2px 5px;
        display: block;
        font-weight: bold;
        border-radius: 5px;
        font-size: 1.2rem; }
    #case #sidebarArea ul.areaList li.parent a {
      background: #333333;
      color: #ffffff; }
    #case #sidebarArea ul.areaList li.child a {
      background: #ebebeb; }
  #case #sidebarArea ul.side_newList {
    margin-bottom: 30px; }
    #case #sidebarArea ul.side_newList li a {
      padding: 15px 15px 15px 0px;
      display: block;
      border-bottom: 1px solid #ebebeb;
      position: relative;
      display: flex;
      justify-content: space-between; }
      #case #sidebarArea ul.side_newList li a::after {
        content: url("../images/common/arrow_green2.svg");
        display: inline-block;
        width: 5px;
        background-size: contain;
        vertical-align: middle;
        position: absolute;
        top: 30%;
        right: 0px; }
      #case #sidebarArea ul.side_newList li a .photoArea {
        width: 100px; }
        #case #sidebarArea ul.side_newList li a .photoArea img {
          border-radius: 5px; }
      #case #sidebarArea ul.side_newList li a .textArea {
        width: -webkit-calc(100% - 110px);
        width: calc(100% - 110px); }
        #case #sidebarArea ul.side_newList li a .textArea .category span {
          font-size: 1.2rem; }
        #case #sidebarArea ul.side_newList li a .textArea .title {
          font-size: 1.2rem; }
        #case #sidebarArea ul.side_newList li a .textArea .about {
          font-size: 1.2rem;
          font-weight: bold; }
  #case #single_ol {
    /*#beforeafter{
        .inner{
            padding-top:0px;
            @include minTabw{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            #photoArea{
                @include minTabw{
                    width: 60%;
                }
                #before{
                
                }
                #after{
                    
                }
            }
            #overview{
               padding-top: 50px;
                @include minTabw{
                    width: 35%;
                }
                dl{
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    margin-bottom: 30px;
                    dt{
                        width: 100px;
                    }
                    dd{
                        width: -webkit-calc(100% - 100px);
                        width: calc(100% - 100px);
                    }
                }
                .soudan{
                    margin-bottom: 30px;
                }
                .staffmessage{
                    background:#f7edde;
                    padding:20px;
                    border-radius: 10px;
                }
            }
        }
    }//#photoArea
    */
    /*
    .beforeList{
        max-width: 900px;
        margin:0px auto;
        @include minTabw{
            display: flex;
            flex-wrap: wrap;
        }
        .imgAd{
           width: 30%;
            img{
                width: 100%;
                border-radius: 5px;
            }
        }
    }
    */
    /*
    .slick-prev{
        width: 40px;
        height: 40px;
    }
    .slick-next{
        width: 40px;
        height:40px;
    }
*/
    /*#about{
        .about_ol{
            margin-bottom: 40px;
            background:#f7edde;
            padding:20px 20px;
            border-radius: 10px;
            @include minTab{
                margin-bottom: 50px;
                padding:30px 50px;
            }
        }
    }*/ }
    #case #single_ol header .ol {
      background: #E2DCD3;
      color: #5c5651;
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 10px; }
      @media screen and (min-width: 768px) {
        #case #single_ol header .ol {
          margin-bottom: 50px;
          padding: 20px; } }
      #case #single_ol header .ol .category {
        display: inline-block;
        margin-right: 10px; }
        #case #single_ol header .ol .category span {
          font-weight: bold; }
          @media screen and (min-width: 768px) {
            #case #single_ol header .ol .category span {
              font-size: 2.0rem; } }
      #case #single_ol header .ol h2.areaName {
        font-weight: bold;
        text-align: center;
        display: inline-block; }
        @media screen and (min-width: 768px) {
          #case #single_ol header .ol h2.areaName {
            font-size: 2.0rem; } }
      #case #single_ol header .ol h3.about {
        font-weight: bold;
        text-align: center;
        font-size: 2.0rem; }
        @media screen and (min-width: 768px) {
          #case #single_ol header .ol h3.about {
            font-size: 3.0rem; } }
    #case #single_ol h3.Tit {
      font-weight: bold;
      font-size: 2.4rem;
      margin-bottom: 25px;
      text-align: center;
      line-height: 0.8; }
      @media screen and (min-width: 768px) {
        #case #single_ol h3.Tit {
          font-size: 3.0rem;
          margin-bottom: 40px; } }
      #case #single_ol h3.Tit span.en {
        display: inline-block;
        width: 100%; }
    #case #single_ol #imgArea {
      margin-bottom: 50px; }
      @media screen and (min-width: 768px) {
        #case #single_ol #imgArea {
          margin-bottom: 80px; } }
    #case #single_ol #detail {
      margin-bottom: 60px; }
      @media screen and (min-width: 768px) {
        #case #single_ol #detail {
          margin-bottom: 80px; } }
      #case #single_ol #detail dl.detail {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 30px;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc; }
        #case #single_ol #detail dl.detail dt {
          width: 85px;
          border-right: 1px solid #ccc;
          background: #5c5651;
          color: #ffffff;
          text-align: center; }
          @media screen and (min-width: 768px) {
            #case #single_ol #detail dl.detail dt {
              width: 105px; } }
        #case #single_ol #detail dl.detail dd {
          width: -webkit-calc(100% - 85px);
          width: calc(100% - 85px); }
          @media screen and (min-width: 768px) {
            #case #single_ol #detail dl.detail dd {
              width: -webkit-calc(100% - 105px);
              width: calc(100% - 105px); } }
        #case #single_ol #detail dl.detail dt, #case #single_ol #detail dl.detail dd {
          border-top: 1px solid #ccc;
          padding: 10px 5px;
          font-size: 1.4rem; }
          @media screen and (min-width: 768px) {
            #case #single_ol #detail dl.detail dt, #case #single_ol #detail dl.detail dd {
              padding: 15px 10px;
              font-size: 1.6rem; } }
      #case #single_ol #detail .category {
        margin-right: 5px;
        display: inline-block; }
        @media screen and (max-width: 767px) {
          #case #single_ol #detail .category {
            width: 100%; } }
        @media screen and (max-width: 960px) {
          #case #single_ol #detail .category span {
            font-size: 1.4rem; } }
    #case #single_ol #messageArea {
      background: #f7edde;
      border-radius: 10px;
      padding: 40px 15px 30px 15px;
      position: relative; }
      @media screen and (min-width: 768px) {
        #case #single_ol #messageArea {
          padding: 50px 50px; } }
      #case #single_ol #messageArea img.customer {
        position: absolute;
        width: 180px;
        right: 10px;
        top: -30px; }
        @media screen and (min-width: 768px) {
          #case #single_ol #messageArea img.customer {
            width: 300px;
            right: 10px;
            top: -50px; } }
    #case #single_ol #archiveArea {
      background: #f7edde; }
      #case #single_ol #archiveArea h3.archivetitle {
        font-weight: bold;
        margin-bottom: 7px; }
        #case #single_ol #archiveArea h3.archivetitle span {
          font-size: 2.0rem; }
      @media screen and (min-width: 768px) {
        #case #single_ol #archiveArea .inner {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; } }
      @media screen and (min-width: 768px) {
        #case #single_ol #archiveArea .inner .new_List {
          width: 78%; } }
      #case #single_ol #archiveArea .inner .new_List ul {
        border-top: 1px solid #000000;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; }
        @media screen and (min-width: 768px) {
          #case #single_ol #archiveArea .inner .new_List ul li {
            width: 48%; } }
        #case #single_ol #archiveArea .inner .new_List ul li a {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #000000;
          padding-bottom: 10px;
          margin-bottom: 10px; }
          @media screen and (min-width: 961px) {
            #case #single_ol #archiveArea .inner .new_List ul li a {
              padding-bottom: 15px;
              margin-bottom: 15px; } }
          #case #single_ol #archiveArea .inner .new_List ul li a .imgArea {
            width: 150px; }
          #case #single_ol #archiveArea .inner .new_List ul li a .textArea {
            width: -webkit-calc(100% - 160px);
            width: calc(100% - 160px); }
          #case #single_ol #archiveArea .inner .new_List ul li a .date {
            font-size: 1.2rem; }
          #case #single_ol #archiveArea .inner .new_List ul li a strong {
            font-size: 1.4rem; }
      @media screen and (min-width: 768px) {
        #case #single_ol #archiveArea .inner .cat_List {
          width: 20%; } }
      #case #single_ol #archiveArea .inner .cat_List ul {
        border-top: 1px solid #000000; }
        #case #single_ol #archiveArea .inner .cat_List ul li a {
          display: block;
          padding: 10px 0px;
          border-bottom: 1px solid #000;
          font-weight: bold;
          font-size: 1.4rem; }
  #case select {
    margin-top: 15px;
    border: 1px solid #999999;
    border-radius: 0px;
    padding: 15px 15px;
    background: #ffffff;
    display: inline-block;
    min-width: 300px;
    font-size: 1.4rem; }