@charset "utf-8";
/* =============================================================================
メッセージ・理念
   ========================================================================== */
/* あいさつ */
#greetingSec {
   padding-top: 200px;
   background-color: #f0f0f0;
   margin-top: -27px;
   }

#greetingSec h3 {
   font-size: 35px;
   text-align: left;
   font-weight: bold;
}
#greetingSec h3 .emphasis {
   color: #2442a2;
   font-size: 40px;
}
#greetingSec .txt p {
   line-height: 2em;
}

#greetingSec .box .txt p {
   background:rgba(255,255,255,0.8);
    padding: 40px;
    box-shadow: 0px 0px 15px -3px #c9c9c9;
}
@media screen and (min-width: 768px) {
   #greetingSec .wrap {
      max-width: 1460px;
   }
   #greetingSec .box {
      position: relative;
      height: 1000px;
   }
   #greetingSec .box .img {
      position: absolute;
       top: 0;
       left: 0;
   }
   #greetingSec .box .txt {
      position: absolute;
       top: 60px;
       right: 0px;
       /*max-width: 840px;*/
	   max-width: 640px;
       width: 100%;
   }
  
   
}
@media screen and (max-width: 767px) {
   #greetingSec {
      padding-top: 80px;
   }
   #greetingSec h3 {
      font-size: 20px;
   }
   #greetingSec h3 .emphasis {
      color: #2442a2;
      font-size: 30px;
   }
   #greetingSec .box .img {
      margin-bottom: 20px;
   }
   #greetingSec .txt p {
      line-height: 1.6em;
   }
   #greetingSec .box .txt p {
      padding: 20px;
   }
   
}

/* プロフィール */
#profileSec h3 {
   text-align: left;
}
#profileSec .profile {
   line-height: 2em;
}
#profileSec .profile th {
  font-weight: normal;
  width: 20%;
  text-align: left;
}
#profileSec .profile {
   
}
#profileSec .txt p {
   padding-top: 30px;
   margin-top: 30px;
   border-top: 1px solid #37c0ff;
   line-height: 2em;
}
@media screen and (min-width: 768px) {
   #profileSec .wrap {
      max-width: 1460px;
   }
   #profileSec .flex {
      display: flex;
      justify-content: space-around;
   }
   #profileSec .txt {
      width: 46%;
   }
   #profileSec .img {
      
   }
}
@media screen and (max-width: 767px) {
   #profileSec .profile th {
      width: 27%;
   }
   #profileSec .txt p {
      padding-bottom: 30px;
   }
}

/* 事務所理念 */
#purposeSec {
   background: url(../images/message/bgMessage.png);
    background-size: cover;
    background-position: top;
    padding-top: 160px;
}
#purposeSec h3 {
   font-size: 35px;
   font-weight: bold;
   margin-bottom: 60px;
}
#purposeSec h3 .emphasis {
   color: #2442a2;
   font-size: 40px;
}
#purposeSec .purposeInner {
   background: #fff;
   padding: 80px 120px;
}
#purposeSec .purposeInner h4 {
   text-align: center;
   font-size: 33px;
   position: relative;
   font-weight: bold;
   margin-bottom: 100px;
}
#purposeSec .purposeInner h4:after {
   position: absolute;
   content: "";
   bottom: -50px;
   left: 50%;
   transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
   width: 222px;
   height: 27px;
   background: url(../images/message/nami.png);
   background-repeat: no-repeat;
}
#purposeSec .purposeInner dt {
   font-size: 25px;
   font-weight: bold;
   line-height: 1.6em;
}
#purposeSec .purposeInner dt .ttl {
   font-size: 40px;
   color: #37c0ff;
   padding-right: 8px;
   vertical-align: middle;
}
#purposeSec .purposeInner dd {
   padding-bottom: 40px;
}
@media screen and (min-width: 768px) {
   
}
@media screen and (max-width: 767px) {
   #purposeSec h3 {
      font-size: 20px;
   }
   #purposeSec h3 .emphasis {
      font-size: 26px;
   }
   #purposeSec .purposeInner {
      padding: 20px;
   }
   #purposeSec .purposeInner h4  {
      font-size: 24px;
   }
   #purposeSec .purposeInner dt {
      font-size: 20px;
   }
   #purposeSec .purposeInner dt .ttl {
      font-size: 30px;
   }
   #purposeSec .purposeInner dd {
      padding-bottom: 30px;
   }
}

/* 行動指針 */
#credoSec ul li {
   padding: 30px 85px;
   background: url(../images/message/img-credo01.png);
   background-repeat: no-repeat;
   height: 300px;
   width: 522px;
   letter-spacing: 0.05em;
   line-height: 1.8em;
}
#credoSec ul li h4 {
   font-size: 25px;
   font-weight: bold;
   position: relative;
   padding-bottom: 20px;
}
#credoSec ul li h4 span {
   position: absolute;
   color: #37c0ff;
   font-size: 40px;
   top: 2px;
    left: -37px;
}
@media screen and (min-width: 768px) {
   #credoSec .flex {
      display: flex;
      justify-content: space-between;
   }

}
@media screen and (max-width: 767px) {
   #credoSec ul li {
      padding: 30px;
      background: url(../images/message/img-credo01.png);
      background-repeat: no-repeat;
      background-size: contain;
      height: auto;
      width: 100%;
      letter-spacing: 0.05em;
      line-height: 1.8em;
  }
  #credoSec ul li:first-child {
     margin-bottom: 30px;
  }
  #credoSec ul li h4 {
   font-size: 20px;
   padding-bottom: 10px;
}
#credoSec ul li h4 span {
   font-size: 33px;
   top: 0px;
   left: -31px;
}
}

/* 事務所概要 */
#outlineSec {
   background: #f0f0f0;
}
#outlineSec .map iframe {
   border: 4px solid #37c0ff;
   height: 455px;
}
#outlineSec .overview th,#outlineSec .overview tr {
   padding: 25px 0;
}
#outlineSec .overview th {
   padding-left: 20px;
}
#outlineSec .overview th,#outlineSec .overview th {
   width: 24%;
    text-align: justify;
    letter-spacing: 0.2em;
}
#outlineSec .overview th,#outlineSec .overview td {
   border-bottom: 1px solid #cccccc;
}
@media screen and (min-width: 768px) {
   #outlineSec .flex {
      display: flex;
      justify-content: space-between;
   }
   #outlineSec .overview {
      width: 60%;
   }
   #outlineSec .map {
      width: 30%;
   }
}
@media screen and (max-width: 767px) {
   #outlineSec .map iframe {
     height: 300px;
   }
   #outlineSec .overview th {
      padding-left: 0;
      letter-spacing: 0;
   }
   #outlineSec .overview td {
      padding: 20px 0;
   }
}

/* =============================================================================

   ========================================================================== */

@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}
/* =============================================================================

   ========================================================================== */
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}