/**** common start ****/

@charset "UTF-8";

*{
  box-sizing: border-box;
  word-wrap: break-word;
}

/*font-size set*/
html{
  font-size: 62.5%;
}
body{
  font-size:1.6rem;/* 16px*/
  line-height: 1.7;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}
p{
  font-size:1.6rem;/* 16px*/
}
li{
  font-size: 1.6rem
}
li a{
  font-size: 1.6rem
}
h1 {
  font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
  line-height: 1.3;
}
h2 {
  font-size: 2.4rem;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
/*font-size set*/

/*scroll point*/
a.anchor{
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}
/*scroll point*/

a{
  text-decoration: none;
  text-decoration: underline;
  color: rgba(141, 141, 224, 0.808);
}
a:hover{
  text-decoration: underline;
  color: rgba(209, 46, 67, 0.767);
}
img{
  max-width: 100%;
  height: auto;
}
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

header{
  width: 100%;
  height: auto;
  padding: 0 5px;
  background: #FFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 0;
  z-index: 30;
}

/*Google Map*/
.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  }
  .gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  }




.logo{
  line-height: 20px; /*行間*/
  float: left;
  overflow: hidden;
}

.logo a{
  font-weight: bold;
}

.navigation{
  float: right;
  line-height: 20px; /*行間*/
}
.navigation a{
  float: left;
  padding-left: 15px;
  font-size: 1.6rem;
  color: #6d6f7a;
}
.navigation a:hover{
  text-decoration-style: solid;
  color: rgb(67, 108, 185);
}

/*ボックスエリア（上ライン）*/
.box_area{
  padding: 0.5em 0.75em;
  margin: 2em 0;
  color: #5d627b;
  background: white;
  border-top: solid 5px #5d627b;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

/*ボックスエリア（greenライン）*/
.box_area_green{
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #5d627b;
  background: white;
  border-top: solid 8px #3f8d2fe0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}








/*メインビジュアル*/
.main_visual{
  width: 100%;
  margin-bottom: 96px;
  margin-top: 75px;
}
.main_visual img{
  width: 100%;
  height: auto;
}
.wrapper{
  width: 1200px;
  margin: 0 auto;
  padding: 48px 0;
}



/***Contents***/
.content_area{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #FFF;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
.content_area p{
 /* color: black; */
  letter-spacing: 0.08em;
  line-height: 1.7;
  word-break: break-all;
}
.content_area ul{
  list-style: none;
  padding-left: 0;
  border-bottom: 1.3px solid #539a11;
}
.content_area h1{
  color: #0e436e;
  margin-top: 1.25em;
  margin-bottom: 0.3em;
  line-height: 1.6;
  text-align: center;
  border-bottom: 1.5px solid #DDD;
  padding-bottom: 0.5em;
}
.content_area h2{
  color: #539a11;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.2rem;
/*
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  border-bottom: 1.3px solid #539a11;
  padding-bottom: 0.0em;
  */
}

.content_area h5{
  font-size: 1.2rem;
  color: #9fa2b8fb;
  text-align: center;
}

.content_area figure {
  text-align: center;
  margin-bottom: 3em;
}
.content_area figure img {
  display: block;
  max-width: 100%;
  margin: auto;
}
.content_area figure figcaption {
  margin: 0.5em;
  font-size: 1.2rem;
  text-align: center;
}



/*serviceエリア*/
.service{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #FFF;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
.service p{
  letter-spacing: 0.08em;
  line-height: 1.7;
  word-break: break-all;
}
.service h2{
  color: #539a11;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.2rem;
/*
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  border-bottom: 1.3px solid #539a11;
  padding-bottom: 0.0em;
  */
}
.service h5{
  font-size: 1.2rem;
  color: #9fa2b8fb;
  text-align: center;
}


/**お知らせ**/
.notice{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #FFF;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
.notice h2{
  color: #539a11;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.2rem;

/*
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  border-bottom: 1.3px solid #539a11;
  padding-bottom: 0.0em;
  */
}
.notice h5{
  font-size: 1.2rem;
  color: #9fa2b8fb;
  text-align: center;
}

.notice dl, dt, dd {
  box-sizing: border-box;
}

.notice dt, dd {
  margin: 0;
  border: none; /* 共通のborderを定義 */
  padding: 10px;
}

.notice dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
}

.notice dt {
  width: 200px; /* 幅を指定 */
  border-bottom: 2px solid #b5c6e9;
  background: #FFF; /* dt要素のための背景色を指定 */
  border-top: none;
  border-left: none;
  border-right: none;
}

.notice dd {
  border-bottom: 2px solid #b5c6e9;
  width: calc(100% - 200px); /* 幅を指定 */
  /*border: none;  borderを消す */
  border-top: none;
  border-left: none;
  border-right: none;
}


/*
 * 最初ではないdt要素とdd要素で、上のborderを消す
 * 参考：http://kinomemo.info/create/579/
 */
.notice dt:not(:first-of-type),
dd:not(:first-of-type) {
  border-top: none;
}



/**業務実績**/
.performance{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #FFF;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
.performance h2{
  color: #539a11;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.2rem;

/*
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  border-bottom: 1.3px solid #539a11;
  padding-bottom: 0.0em;
  */
}
.performance h5{
  font-size: 1.2rem;
  color: #9fa2b8fb;
  text-align: center;
}


.performance dl, dt, dd {
  box-sizing: border-box;
}

.performance dt, dd {
  margin: 0;
  border: none; /* 共通のborderを定義 */
  padding: 10px;
}

.performance dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
}

.performance dt {
  width: 200px; /* 幅を指定 */
  background: #FFF; /* dt要素のための背景色を指定 */
  border-bottom: 2px solid #b5c6e9;
  border-top: none;
  border-left: none;
  border-right: none;

}

.performance dd {
  width: calc(100% - 200px); /* 幅を指定 */
  /*border: none;  borderを消す */
  border-bottom: 2px solid #b5c6e9;
  border-top: none;
  border-left: none;
  border-right: none;
}

/*
 * 最初ではないdt要素とdd要素で、上のborderを消す
 * 参考：http://kinomemo.info/create/579/
 */
.performance dt:not(:first-of-type),
dd:not(:first-of-type) {
  border-top: none;
}



/**オフィス**/
.office{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #FFF;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
.office h2{
  color: #539a11;
  text-align: center;
  font-size: 2.6rem;
  line-height: 1.2rem;

/*
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  border-bottom: 1.3px solid #539a11;
  padding-bottom: 0.0em;
  */
}
.office h5{
  font-size: 1.2rem;
  color: #9fa2b8fb;
  text-align: center;
}


.office dl, dt, dd {
  box-sizing: border-box;
}

.office dt, dd {
  margin: 0;
  border: none; /* 共通のborderを定義 */
  padding: 10px;
}

.office dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
}

.office dt {
  width: 200px; /* 幅を指定 */
  background: #FFF; /* dt要素のための背景色を指定 */
  border-bottom: 2px solid #b5c6e9;
  border-top: none;
  border-left: none;
  border-right: none;

}

.office dd {
  width: calc(100% - 200px); /* 幅を指定 */
  /*border: none;  borderを消す */
  border-bottom: 2px solid #b5c6e9;
  border-top: none;
  border-left: none;
  border-right: none;
}

/*
 * 最初ではないdt要素とdd要素で、上のborderを消す
 * 参考：http://kinomemo.info/create/579/
 */
.office dt:not(:first-of-type),
dd:not(:first-of-type) {
  border-top: none;
}

/**オフィス**/
.covid19{
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #FFF;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
.covid19 h2{
  color: #4966e6;
  text-align: center;
/*
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  border-bottom: 1.3px solid #539a11;
  padding-bottom: 0.0em;
  */
}
.covid19 p{
  text-align: center;
  font-size: 1.6rem;
}


.covid19 dl, dt, dd {
  box-sizing: border-box;
}

.covid19 dt, dd {
  margin: 0;
  border: none; /* 共通のborderを定義 */
  padding: 10px;
}

.covid19 dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
}

.covid19 dt {
  width: 250px; /* 幅を指定 */
  background: #FFF; /* dt要素のための背景色を指定 */
  border-bottom: 2px solid #b5c6e9;
  border-top: none;
  border-left: none;
  border-right: none;

}

.covid19 dd {
  width: calc(100% - 250px); /* 幅を指定 */
  /*border: none;  borderを消す */
  border-bottom: 2px solid #b5c6e9;
  border-top: none;
  border-left: none;
  border-right: none;
}

/*
 * 最初ではないdt要素とdd要素で、上のborderを消す
 * 参考：http://kinomemo.info/create/579/
 */
.covid19 dt:not(:first-of-type),
dd:not(:first-of-type) {
  border-top: none;
}


footer{
  width: 100%;
  background: #F6F6F6;
}
footer p{
  text-align: center;
}
/**** common end ****/



/***media query BreakPoint  smartPhone***/
@media screen and (max-width: 980px) {
  .wrapper{
  width: 100%;
  padding: 0 15px;
}
.drawer-hamburger{
  height: 60px;
  padding: 0 15px;
}
.drawer-hamburger-icon{
  margin-top: 0;
}
.drawer--right.drawer-open .drawer-hamburger{
  background: #FFF;
}
.navigation li a{
  line-height: 70px;
  float: none;
  font-size: 1.4rem;
}

.logo img{
  width: 70%;
  height: 70%;
}


.main_visual{
  width: 100%;
  margin-bottom: 96px;
  margin-top: 65px;
}

.content_area{
  width: 100%;
}
.content_area figure figcaption {
  font-size: 1.2rem;
}

.content_area img{
  width : auto;
  height : auto;
}

/*
body{
  line-height: 1.5;
}

h1{
  font-size: 2.0rem;
}
h2 {
  font-size: 2.2rem;
}
h3 {
  font-size: 1.4rem;
}
h5 {
  font-size: 1.0rem;
}

p{
  font-size: 1.3rem;
}
*/

.content_area h2{
  font-size: 2.4rem;
  line-height: 0.3rem;
}
.content_area h5{
  font-size: 0.9rem;
  line-height: 0.3rem;
}
.content_area p{
  font-size: 1.25rem;
}

.notice h2{
  font-size: 2.4rem;
  line-height: 0.3rem;
}
.notice h5{
  font-size: 0.9rem;
  line-height: 0.3rem;
}

.notice p{
  font-size: 1.25rem;
}

.service h2{
  font-size: 2.4rem;
  line-height: 0.3rem;
}
.service h5{
  font-size: 0.9rem;
  line-height: 0.3rem;
}
.service p{
  font-size: 1.25rem;
}

.performance h2{
  font-size: 2.4rem;
  line-height: 0.3rem;
}
.performance h5{
  font-size: 0.9rem;
  line-height: 0.3rem;
}

.office h2{
  font-size: 2.4rem;
  line-height: 0.3rem;
}
.office h5{
  font-size: 0.9rem;
  line-height: 0.3rem;
}

.covid19 p{
  font-size: 1.3rem;
}

/*box 縦並び*/
.content_area, .notice, .service, .performance, .office, .covid19 {
  width: 100%; /* 横幅をpxではなく、幅いっぱいに指定。 */
  border-left: none; /* テーブルの左の線を消す */
  display: block; /* 横並びにさせないようブロック要素にする */
}

.content_area dt,
dd {
  border-right: none; /* セルの右の線を消す */
  width: 100%; /* 横幅を幅いっぱいに指定 */
  padding: 10px 15px; /* 各セルに余白を取る */
}
.content_area dt {
  border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
  padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
  text-align: center;
  font-size: 1.3rem;
}
.content_area dd{
  text-align: left;
  font-size: 1.3rem;
  width: 100%;
}

.notice dt,
dd {
  border-right: none; /* セルの右の線を消す */
  width: 100%; /* 横幅を幅いっぱいに指定 */
  padding: 10px 15px; /* 各セルに余白を取る */
}
.notice dt {
  border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
  padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
  text-align: center;
  font-size: 1.3rem;
}
.notice dd{
  text-align: left;
  font-size: 1.3rem;
  width: 100%;
}

.service dt,
dd {
  border-right: none; /* セルの右の線を消す */
  width: 100%; /* 横幅を幅いっぱいに指定 */
  padding: 10px 15px; /* 各セルに余白を取る */
}
.service dt {
  border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
  padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
  text-align: center;
  font-size: 1.3rem;
}
.service dd{
  text-align: left;
  font-size: 1.3rem;
  width: 100%;
}

.performance dt,
dd {
  border-right: none; /* セルの右の線を消す */
  width: 100%; /* 横幅を幅いっぱいに指定 */
  padding: 10px 15px; /* 各セルに余白を取る */
}
.performance dt {
  border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
  padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
  text-align: center;
  font-size: 1.3rem;
}
.performance dd{
  text-align: left;
  font-size: 1.3rem;
  width: 100%;
}

.office dt,
dd {
  border-right: none; /* セルの右の線を消す */
  width: 100%; /* 横幅を幅いっぱいに指定 */
  padding: 10px 15px; /* 各セルに余白を取る */
}
.office dt {
  border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
  padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
  text-align: center;
  font-size: 1.3rem;
}
.office dd{
  text-align: center;
  font-size: 1.3rem;
  width: 100%;
}
.covid19 dt,
dd {
  border-right: none; /* セルの右の線を消す */
  width: 100%; /* 横幅を幅いっぱいに指定 */
  padding: 10px 15px; /* 各セルに余白を取る */
}
.covid19 dt {
  border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
  padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
  text-align: center;
  font-size: 1.3rem;
}
.covid19 dd{
  text-align: center;
  font-size: 1.3rem;
  width: 100%;
}
/*****/


footer p {
    font-size: 1.0rem;
    text-align: center;
    padding: 15px 0;
    margin-bottom: 0;
}

/*scroll point*/
a.anchor{
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}
}

/***media query BreakPoint  769px***/
@media screen and (min-width: 981px) {
  a[href^="tel:"]{
    pointer-events: none;
}


.drawer--right .drawer-nav{
  position: relative;
  top: 0;
  right: 0;
  overflow: visible;
  width: auto;
  height: auto;
}
.drawer-hamburger{
  display: none;
}
.navigation{
  float: right;
  line-height: 70px;
}
.navigation li{
  float: left;
  padding:0;
}
.navigation li a{
  padding:0 15px;
}
.drawer-menu li:first-child{
  display: none;
}

.flex{
  display:flex;
  flex-flow:row-reverse wrap;
  justify-content:space-between;
}
.item+.item{
  margin-left:1.0em;
}
}

/***media query BreakPoint  769p--1199pxx***/
@media screen and (min-width: 981px) and (max-width: 1199px) {
.wrapper{
  width: 100%;
  padding: 48px 15px;
}
}

/***media query BreakPoint  1200pxx***/
@media (min-width: 1200px) {/* 1200px以上*/
  h1 {
      font-size: 3.6rem;/* 36px*/
  }
  h2 {
      font-size: 2.4rem;/* 24px*/
}
}