@charset "utf-8";
/*各ページ共通
------------------------------------------------------------*/
/*メイン画像エリア*/
#main_area{
    display:flex;
    align-items: center;
  /* 135deg = 左上→右下。好みで角度変更可 */
    background: linear-gradient(135deg,#009a5a 0 45%,#005eae 45% 100% );
    height: 300px;
}
h1{width:95%;max-width: 1280px;margin:auto;color:#FFF;font-size:clamp(1.25rem, 0.606rem + 2.29vw, 2.438rem);/*最大39最小20*/}
/*パンくず*/
#pankuzu {display:flex;justify-content:  flex-end; max-width:1280px;margin:10px auto 30px; list-style: none;}
#pankuzu li:not(:last-child)::after{content:">";padding:0 5px;}

/*このページ単体のCSS------------------------------------------------------------*/
/*喜びの連鎖*/
.philo::before{display: block; content:"Corporate Philosophy";font-size: clamp(1.25rem, 0.369rem + 3.13vw, 2.875rem);}
.imgL {position: relative;}
.imgL img { display: block; width: clamp(18.75rem, -13.125rem + 66.41vw, 40rem); height: auto;}
.imgL > div {
    position: absolute;
    top: 60px;          /* 上に少しズラす */
    left: clamp(16.25rem, -15.625rem + 66.41vw, 37.5rem);        /* 画像より右に重ねる */
    width: clamp(31.75rem, 15.625rem + 33.59vw, 42.5rem);       /* テキストボックスの幅 */
    background: #fff;   /* 背景白でカード風に */
    padding: 40px 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-radius: 15px;
    z-index: 2;
}
.mb20{margin-bottom: 20px;}
.right span {display: inline-block;text-align: left; }

/*会社概要*/
.corp::before{display: block; content:"Company information";font-size: clamp(1.25rem, 0.369rem + 3.13vw, 2.875rem);}
table{width:100%;max-width:1000px; margin: auto;border-collapse: collapse;}
th,td{padding:clamp(0.625rem, 0.286rem + 1.2vw, 1.25rem);border:1px solid #CCC;}
th{width:10em;background:#f5f5f5;}
a.arrow::before{content: url("../images/arrow.webp"); display: inline-block;vertical-align: middle; margin-right: 10px;}
/*沿革*/
.w1000{width:100%;max-width:1000px; margin:auto;}
h3{
    font-size: clamp(1.125rem, 0.989rem + 0.48vw, 1.375rem); 
    background-image: linear-gradient(to right, #009a5a 0%, #009a5a 20%, #e6e6e6 20%, #e6e6e6 100%);
    background-size: 100% 3px; /* 下線の太さ */
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 3px; /* テキストと下線の距離 */
    margin-bottom:20px;
}
h3 span {display:block; padding: 0 0 15px 0;}
main ol{list-style: none;}
main ol li{display: flex; }
time{width:8em; }
main ol p{width:calc(100% - 8em); }
main ol li *{padding:10px 0;}

/*アクセス*/
.access::before{display: block; content:"Access";font-size: clamp(1.25rem, 0.369rem + 3.13vw, 2.875rem);}
.map iframe{width:100%;}
/* レスポンシブ-----------------------------------------------------------------------*/
/* 1024px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
      .imgL {
        width: 100%;
        margin: 0 auto;
      }
      .imgL img {
        width: 80%;
        max-width: 640px;
        margin: 0 auto;
      }

      .imgL > div {
        position: relative;   /* 絶対配置を解除 */
        width: 90%;
        margin: -40px auto 0; /* 画像に少し重ねる */
        padding: 25px 20px;
        top: 0;
        left: 0;
    }
}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*メイン画像*/
    #main_area{height: 200px !important;}

}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*会社概要*/
    th,td{display:block;width: 100%;}
    time{width:6em; }
    /*沿革*/
    main ol{padding:0;}
    main ol p{width:calc(100% - 6em); }
    main ol li{border-bottom: 1px dotted #ccc;}
    /*アクセス*/
    .map iframe{height:550px;}
}