@charset "UTF-8";
/** -----------------------------------
	会社概要ページ company
----------------------------------- **/
@media screen and (min-width:769px){
.sub-center-col {
  background-image: url(img/sub-eyecatch.jpg) ;
}

/*------ active page nav ---------*/
#page-company .gnav-company a,#page-company .snav-company a{
  color: var(--sub-text-color);
  border-bottom: 2px dotted #612e01;
}
/*------ main ---------*/
main{
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 200px;
  padding: 100px auto 0;
}
.main-inner{
  margin: 0 auto;
}

/*------------- pagetop title ---------------*/
.sec-title {
  width: 100%;
  text-align: center;
  padding: 50px 0;
  position: relative;
  z-index: 0;
}
.sec-title i {
  font-size: 3rem;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  color: var(--title-icon-color);
}
.sec-title h2 {
  width: 100%;
  font-size: 2.5rem;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
  color: #333;
}
/* back text */
.sec-title p {
  width: 100%;
  color: var(--accent-color);
  text-align: center;
  font-size: 8rem;
  opacity: 0.5;
  transform: rotate(-5deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  z-index: 1;
  pointer-events: none;
}
/*------------- profile -------------------*/
main section{
  width: 100%;
  padding: 100px 0 0;
}
#profile{
  width: 100%;
}
.profile-inner{
width: 100%;       /* 画面が狭いときは横幅いっぱい */
  max-width: 1200px; /* 1200px以上には広がらない */
  margin: 0 auto;
  margin: 0 auto;
}
/*------------ company-list --------------*/
.company-list-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
  font-size: 1.2rem;
  color: var(--main-text-color);
  display: flex;
  flex-wrap: wrap;
  background: var(--point-bg-color);
}
.company-list {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.2rem;
  color: var(--main-text-color);
  display: flex;
  flex-wrap: wrap;
}
.company-list dt {
  width: 25%; /* PCでは左に30% */
  padding: 30px 20px;
  border-bottom: 1px solid var(--sub-text-color);
  font-weight: bold;
}
.company-list dd {
  width: 75%; /* PCでは右に70% */
  padding: 30px 20px;
  border-bottom: 1px solid #d4b382;
}
/*------------ access --------------*/
#access {
    margin: 0 auto;
}
.access-map {
    max-width: 1200px; /* 「width」ではなく「max-width」にする */
    width: 100%;       /* 画面が1200px以下の時は横幅いっぱいになる */
    margin: 0 auto;
}
.map-inner {
    position: relative;
    width: 100%;
    /* 高さ ÷ 横幅 × 100 で比率を出します (500 ÷ 1200 × 100 = 41.66%) */
    padding-top: 41.66%; 
    height: 0;
    overflow: hidden;
}
.map-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

}  /*---- @media end min-width:769px----*/

/*----------------@media screen-------------------*/
 /* -------------------------------
 　　　769以上　-　1332以下
 ------------------------------- */
  @media screen and (min-width: 769px) and (max-width: 1332px){
    .profile-inner{
      width: 100%;
      padding: 0 60px;
    }
    .company-list-wrap {max-width: none;}
  }
 /* -------------------------------
 　　　769以上　-　1199以下
 ------------------------------- */
  @media screen and (min-width: 769px) and (max-width: 1199px){
    .profile-inner{padding: 0 40px;}
  }
 /* ----------------------------------------
 　　　タブレットサイズ　769以上　-　1024以下
 ---------------------------------------- */
  @media screen and (max-width:1023px){
/* お問い合わせページにいる時だけ、お問い合わせリンクの見た目を変える */
#page-company .nav-company a {
    color: var(--accent-color); /* お好みのアクセントカラーに */
    font-weight: bold;
}
#page-company .nav-company a i{
    color: var(--accent-color); /* お好みのアクセントカラーに */
    font-weight: bold;
}
  } /* @media screen and (max-width:1023px) */

/** -------------------------------------------------
　　　モバイル用ベースレイアウト
------------------------------------------------- **/
/* ------------------------------
　　　スマホ用　基本設定
------------------------------ */
@media screen and (max-width:768px){
  .sub-center-col {
    background-image: url(img/sub-eyecatch.jpg) ;
  }

  /*------- active page nav ------*/
  /* お問い合わせページにいる時だけ、お問い合わせリンクの見た目を変える */
  #page-company .nav-company a {
      color: var(--accent-color); /* お好みのアクセントカラーに */
      font-weight: bold;
  }
  #page-company .nav-company a i{
      color: var(--accent-color); /* お好みのアクセントカラーに */
      font-weight: bold;
  }
  /*------ main ---------*/
  main{
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .main-inner{
    padding: 0 15px;
    margin: 0 auto;
  }
  /*------------- pagetop title ---------------*/
  .sec-title {
    width: 100%;
    text-align: center;
    padding: 50px 0 30px;
    position: relative;
    z-index: 0;
  }
  .sec-title i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    color: var(--title-icon-color);
  }
  .sec-title h2 {
    width: 100%;
    font-size: 2rem;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
    color: #333;
  }
  /* back text */
  .sec-title p {
    width: 100%;
    color: var(--accent-color);
    text-align: center;
    font-size: 5rem;
    opacity: 0.5;
    transform: rotate(-5deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 1;
    pointer-events: none;
  }
  /*------------- profile -------------------*/
  main section{width: 100%;}
  #profile{width: 100%;}
  .profile-inner{margin: 0 auto;}
  /*------------ company-list --------------*/
  .company-list-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 20px 15px;
    font-size: 1.2rem;
    color: var(--main-text-color);
    display: flex;
    flex-wrap: wrap;
    background: var(--point-bg-color);
  }
  .company-list {
    width: 100%;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--main-text-color);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .company-list dt {
    width: 28%; /* PCでは左に30% */
    padding: 30px 0 30px 10px;
    border-bottom: 1px solid var(--sub-text-color);
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .company-list dd {
    width: 72%; /* PCでは右に70% */
    padding: 30px 20px;
    border-bottom: 1px solid #d4b382;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .company-list dd span.br-span {
      display: block;
      width: 100%;
  }
/*---------- map ----------*/
#access {
    margin: 0 auto 100px;
    padding: 30px 0; /* スマホ時に左右に少し余白を作る（お好みで） */
    overflow: hidden;
}
.access-map {
    max-width: 1200px; /* 「width」ではなく「max-width」にする */
    width: 100%;       /* 画面が1200px以下の時は横幅いっぱいになる */
    margin: 0 auto;
}
.map-inner {
    position: relative;
    width: 100%;
    /* 高さ ÷ 横幅 × 100 で比率を出します (500 ÷ 1200 × 100 = 41.66%) */
    padding-top: 41.66%; 
    height: 0;
    overflow: hidden;
}
.map-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

    .map-inner {
        padding-top: 75%; /* スマホ時は4:3くらいの比率にすると見やすいです */
    }

} /* @media screen and (max-width:768px) */