/* ======================================
   Company-specific CSS
   Extracted on 2025-06-23
   ====================================== */
@charset "utf-8";

.company {
	margin: 100px 300px;
}

.areamap_img {
    display: block;
    margin: 10px auto;
}

.main1 {
    margin-bottom: 10px;
    padding: 5%;
    border-radius: 10px;
}

.side1 {
    padding: 5%;
    border-radius: 10px;
}

.suiimg {
    margin: 20px;
}

.daihixyoaisatu {
  padding-bottom: 30px;
}

.daihixyoaisatu_img {
  max-width: 100%;
  height: auto;
}

.about {
    font-size: 30px;
    text-align: center;
    color: #231815;
    padding-top: 50px;
}

.subtitle {
    font-size: 15px;
    text-align: center;
    color: #EA5514;
    padding-bottom: 70px;
}

.subtitle2 {
    font-size: 15px;
    text-align: left;
    color: #EA5514;
    padding-bottom: 15px;
}

.midashi {
    font-size: 30px;
    color: #231815;
}

.midashi001 {
  font-size: 20px;
  color: #EA5514;
  font-weight: bold;
  padding: 10px;
}

.zigxyousixyoukai {
  text-align: center;
  margin: 20px;
}

.midashi02 {
  font-size: 25px;
  position: relative; /*positionをrelativeに指定*/
  margin: 0 auto;
  text-align: center;
  padding: 50px 0 10px 0;
  font-weight: bold;
}


.area {
  margin-bottom: 100px;
  margin-top: 20px;
  padding: 20px;
}

.areamap_img {
  max-width: 100%;
  height: auto;
}

.zigxyousixyoukai {
  background-image:url("https://orangeholdings.co.jp/images/zigxyousixyoukai.png");
  padding: 50px 200px;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background-repeat: no-repeat;        /* ← 追加！ */
  background-size: cover;              /* ← 追加！（または contain, 100% 100% など好みで） */
  background-position: center center;  /* ← 追加：中央揃え推奨 */
}


.corporate_Profile_back {
  background-image:url("https://orangeholdings.co.jp/images/coprorateprofilebackgraund.jpg");
  padding: 50px 50px;
  width: 100vw;
  margin: 0 calc(50% - 50vw);

}

.corporate_profile_txt {
  background-color: #FFFFFF;
  border: solid 2px #3E3A39;/*線*/
  border-radius: 12px;
  max-width:900px;      /* PC では 900 px を上限 */
  width:calc(100% - 40px); /* 左右20 px の余白 */
  margin:0 auto;        /* 中央寄せ */
  padding:40px 5%;
}

.corporate_profile_txtlist {
  font-size: 15px;
  margin: 30px 0px;
    line-height: 2.3;
  background-image: linear-gradient(180deg, #ddd 1px, transparent 1px);
  background-size: 100% 2.3em;
}

.access_map {
  position: relative;
}

.access_map::before {
    content: "";
    display: block;
    padding-top: calc(50 /100 * 100%);
}

.access_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.midashi04{
  font-size: 25px;
  color: #EA5514;
  font-weight: bold;
  padding: 10px;
}


/*下線のスタイリング*/

.midashi02::after {
  position: absolute; /*positionをabsoluteに指定*/
  content: "";
  background-color: #EA5514; /*下線の色*/
  width: 80px; /*線の幅*/
  height: 5px; /*線の太さ*/
  bottom: -10px; /*線のタテ位置*/
  left: 50%;  /*線のヨコ位置*/
  transform: translateX(-50%);　/*線のヨコ位置*/
}

.midashi03 {
  font-size: 30px;
  margin: 20px 10px 10px 10px;
    font-weight: bold;
}

.eigo {
  font-size: 12px;
  color: #EA5514;
  margin: 0 auto;
  padding-left: 10px;
}

.txt01 {
  font-size: 13px;
}

.txt02 {
    font-size: 13px;
    padding: 5px;
    margin: 40px 0px 80px 0px;
    text-align: center;
}

.txt3 {
    font-size: 15px;
    padding-bottom: 20px;
}

.limidashi {
    font-size: 20px;
}

.midashi-txt02 {
  font-weight: bold;
}


/*見出しデザイン*/

.catchcopy {
    padding-bottom: 60px;
}

.cathcopynaiyo {
    position: relative;
    padding: 0.1em 0.5em;
    background: -webkit-linear-gradient(45deg, #EE87B4 0%, #7E318E 100%), transparent);
    background: linear-gradient(45deg, #EE87B4 0%, #7E318E 100%);
    color: #fff;
    font-size: 30px;
  }



  /*ボタンCSS */

  .btn-gradient-simple {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    color: #FFF;
    background-image: linear-gradient(45deg, #EE87B4 0%, #7E318E 100%);
    transition: .4s;
  }
  
  .btn-gradient-simple:hover {
    background-image: linear-gradient(45deg,#EE87B4 0%, #7E318E 100%);
  }
  
  /*相関図*/

  /*各要素のサイズは「em」単位で指定しています。
  「genealogy」クラスの「font-size」を変更することで、図全体のサイズ感を調整することができます*/

  .genealogy {
    display: table;
    position: relative;
    margin: 0px auto;
    font-size: 1.0vw;
}

.genealogy > dl {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 5em 0px 0px;
    margin: 0px;
}

/*集合線の描画*/

.genealogy > dl::after {
    position: absolute;
    top: 4em;
    left: 8em;
    right: 8em;
    height: 0.95em;
    background:
        linear-gradient(to right, #A6BF4E 0%, #A6BF4E 100%) top center / 0.2em 100% no-repeat,
        linear-gradient(to right, #A6BF4E 0%, #A6BF4E 100%) bottom  left / 100% 0.2em no-repeat;
    content: "";
    color: #A6BF4E;
}

.genealogy > dl > dt,
.genealogy > dl > dd {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    width: 14em;
    height: 4em;
    border: 0.2em solid currentColor;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
}

.genealogy > dl > dt {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.genealogy > dl > dd {
    position: relative;
    padding: 0px;
    margin: 2em 1em 0px;
}

/*矢印の描画*/

.genealogy > dl > dd::before {
    position: absolute;
    top: -2.4em;
    left: 0px;
    width: 100%;
    height: 2.3em;
    background:
        linear-gradient(to right, #A6BF4E 0%, #A6BF4E 100%) top center / 0.2em calc(100% - 0.3em) no-repeat,
        linear-gradient(to top right, transparent 50%, #A6BF4E 50%) bottom -0.1em left calc(50% - 0.2em + 1px) / 0.4em 1em no-repeat,
        linear-gradient(to top left, transparent 50%, #A6BF4E 50%) bottom -0.1em left calc(50% + 0.2em - 1px) / 0.4em 1em no-repeat;
    overflow: hidden;
    content: "";
}

.genealogy .genealogy {
    position: absolute;
    top: -0.2em;
    left: 50%;
    transform: translateX(-50%);
    margin: 0px;
}


/*企業情報*/
.group {
    min-height: 1px;
    margin: 5px;
}
.midashi3{
    color: #363636;
    font-size: 1.2rem;
    padding: 0 20px;
    border-left: 5px solid #F39700;
}

.groupbtn {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #f9a9ae;
  line-height: 50px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  margin-bottom: 20px;
}

/*リストタグ*/
.list1 {
    list-style-type: none;
  font-weight: bold;
  color: #EA5514;
}
.list1-title {
  position: relative;
  font-size: 1.3em;
  color: #EA5514;
  font-weight:bold;
  text-align: center;
}
.list1 ul,.list1 ol {
  position: relative;
  margin: 0;
  color: #363636;
  border: none;
  list-style-type: none;
}
.list1 ol {
  counter-reset: number;
}
.list1 ul li,.list1 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #ffc3c3;
}
.list1 ul li:before {
  position: absolute;
  font-family: FontAwesome;
  left : 0.5em;
  color: #ee8992;
}
.list1 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.list1 ul li:last-of-type,.list1 ol li:last-of-type{
  border-bottom: none;
}

.groupcompany_grid1{
  background-color: #FEEFD8;
  padding: 20px;
  max-width: 480px;
  margin:0 auto;
}

.suiiimg {
  background-color: #FEEFD8;
  border-radius: 16px;
  margin: 0 auto;
  padding: 20px;
}

li {
  List-style: none;
  padding: 10px;
}

.li_midashi01 {
  font-size: 20px;
  font-weight: bold;
  padding: 20px 10px;
}

.company_btn {
  display: block;
  padding: 0.8em 1em;
  text-decoration: none;
  border-radius: 15px;
  color: #ffffff !important;
  background: linear-gradient(-51deg, rgb(253, 236, 179) 0%, rgb(255, 212, 185)100%);
  box-shadow: 0px 5px 20px 0px rgba(220,209,194,0.4);
  border-bottom: solid 3px #fac5a7;
  text-align: center;
  margin: 20px;
}

.company_btn:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

.midashi-txt {
  font-weight: bold;
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.midashi-txt {
  position: relative;
  margin-left: 40px;
}

.midashi-txt::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -25px;

  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);

  /* アイコンのサイズを調整するプロパティ */
  width: 1.0em;
  height: 1.0em;

  /* 表示させるアイコンのパスを指定 */
  background-image: url(https://orangeholdings.co.jp/images/yazirushi.png);
}

.profile-txt {
  padding-left: 15px;
  font-size: 14px;
  padding-bottom: 10px;
  padding-top: 5px;
}

.profile-txt01 {
  padding-left: 15px;
}

/* ───────── 外側ラッパー ───────── */
.group-wrapper{
  max-width: 1200px;       /* PC での上限幅（お好みで 960〜1280px） */
  margin: 0 auto;          /* ← 中央寄せ */
}

/* 1. カードをハッキリさせる */
.company-card{
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 2. 見出しラベルを強調 */
.company-card .label{
  font-weight:700;
  display:inline-block;
  width:4em;               /* ラベル幅を揃えて読み順を安定 */
}

/* 3. テキストの行高と改行余力 */
.company-card p{
  margin:0;
  line-height:1.7;
  word-break:break-word;   /* 長い住所でも横スクロール回避 */
}

/* 4. 住所ブロックを2行化（視線を区切る）*/
.company-card .addr{ white-space:pre-line; }

/* 5. ロゴを上・テキストを下に統一 */
.company-card img{
  width:80px;height:80px;object-fit:contain;margin:0 auto 8px;
}

@media screen and (max-width: 767px){

  .company {
    margin: 100px 10px;
  }

.daihixyoaisatu_img {
  max-width:60%;
  height: auto;
}


.zigxyousixyoukai {
  background-image:url("https://orangeholdings.co.jp/images/zigxyousixyoukai_sp.png");
    width: 100vw;
    height: 100%;
    display: block;
}

.corporate_Profile_back {
  padding: 50px 10px;
  width: 100vw;
}

.corporate_profile_txt {
  margin: 0 10px;
  padding: 10px;
}

.corporate_profile_txtlist {
  font-size: 15px;
  margin: 30px 0px;
}

}
/* ===== ここから中央寄せユーティリティ ===== */
.wrapper--center{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem}

.row.centered{display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;}
.row.centered>.col{float:none}

.col img,.areamap_img,.suiiimg img{
  display:block;
  margin:0 auto;}

  /* ===== ここまで ===== */

/* ====== ★ グループ会社カード：2列×3行 固定 ★ ====== */
.grid-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
  margin-top: 30px;
}

.groupcompany_grid1{ max-width:none; width:100%; margin: 20px 0; }  /* 列幅に合わせて伸縮 */
.grid-wrapper{ justify-items:stretch; }             /* カードを列幅いっぱいに */

/* スマホは 1 列に落とす（任意） */
@media (max-width:900px){

  .company {
	margin: 120px 100px;
}

  .company {
    padding: 10px;
  }


    .corporate_profile_txt{
    width:90%;
    border-radius:15px;
}

.zigxyousixyoukai {
    padding: 20px 50px;
}

}

*,
*::before,
*::after{
  box-sizing:border-box;
}

@media (max-width:1400px){

  .company {
	margin: 100px 100px;
}

}

@media (max-width:450px){

  .company {
	margin: 100px 10px;
}

.suiiimg img {
        max-width: 100%;
        height: auto;
}

.zigxyousixyoukai {
    padding: 50px 10px;
}

    .txt02 {
      padding: 50px 10px;
      margin: 0 auto;
    }
    
    .txt01 {
      padding: 20px 10px 20px;
    }

    .area {
      margin-bottom: 10px;
    }
}