@charset "UTF-8";

/* ==========================================
   1. ペã?ジ全体ã?コントロール?ˆä¸?番外å?ã�®è¦ª??
   ========================================== */
.TopPage {
    display: flex;
    flex-direction: column;   /* ペã?ジ全体を上ã�‹ã‚‰ä¸‹ã�¸ç¸¦ä¸¦ã�³ã�«ã�™ã‚‹ */
    width: 100%;
}

/* ==========================================
   2. メメインビジュアル?ˆæž ã�Œã?タンã�«è¢«ã‚‰ã�ªã�?¨­å®šï¼?
   ========================================== */
.MainVisual {
    width: calc(100% - 8.6vw);
    /* â˜? 下ã?余白ã‚? 40px ã�‹ã‚‰ 15px ã�«ç¸®ã‚�ã�¦è·�離を接近ã�•ã�›ã�¾ã�? */
    margin: 0 0 15px 0; 
    border: 2px solid #333333;
    padding: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* タイトル枠?šæ–‡å­—ã�«å�ˆã‚�ã�›ã�Ÿé•·ã�•ã�§ä¸­å¤®ã�«ç½®ã�? */
.TitleBox {
    display: table;
    margin: 0 auto 20px auto;
    background-color: #00e667;
    padding: 15px 40px; /* 余白を少ã�—åº?�’ã�¦ã‚?�¨ã‚Šã‚’æŒ�ã�Ÿã�›ã�¾ã�—ã�Ÿ */
    border: 3px solid #333333; /* 枠線も少�太����ランスを調整 */
    max-width: 90%; /* スマã?ç”»é�¢ã�§æ¨ªå¹?�‹ã‚‰ã?ã�¿å‡ºã‚‹ã?を防ã�Žã�¾ã�? */
    box-sizing: border-box;
}

.MainTitle {
    font-size: 50px; /* 35px�ら50px�大��変更 */
    font-weight: bold;
    text-align: center;
    margin: 0;
    color: #ffffff;
    line-height: 1.2; /* æ–?­—ã�Œå¤§ã��ã��ã�ªã�£ã�Ÿéš›ã�®è¡Œé–“を最é�©åŒ? */
    /* æ–?­—ã?サイズã�«å�ˆã‚�ã�›ã�¦ã€?»’ã�„ç¸�å�–りをより太ã��クãƒ?‚­ãƒªã�¨ä¿®æ­£ */
    text-shadow: 
       2px  2px 2px #000000,
      -2px  2px 2px #000000,
       2px -2px 2px #000000,
      -2px -2px 2px #000000,
       2px  0px 2px #000000,
       0px  2px 2px #000000,
      -2px  0px 2px #000000,
       0px -2px 2px #000000;
}

/* スマã?用ã�®è¨­å®šï¼ˆç”»é�¢å¹?�Œ600px以下ã?å ´å�ˆã?�文字を少ã�—縮å°�ï¼? */
@media screen and (max-width: 600px) {
    .MainTitle {
        font-size: 32px; /* スマã?ã�§1è¡Œã�«å�Žã�¾ã‚Šã‚„ã�™ã�„サイズ */
    }
    .TitleBox {
        padding: 10px 20px;
    }
}

.Pictures {
    display: flex;
    gap: 15px;
    width: 100%;
}

.Pictures img {
    /* æž ç·?(2pxÃ?2)ã�¨éš™é–“(15px)ã‚’è???ã�—ã�¦è¨ˆç®? */
    width: calc(50% - 8px); 
    height: auto;
    border: 2px solid #333333;
    box-sizing: border-box;
}

/* ==========================================
   3. 会社案å? & 経営ç�?¿µ??C時ã?横並ã�³??
   ========================================== */
.CompanyGuide {
    display: flex;
    flex-direction: row;      /* PC時ã?横ã�«ä¸¦ã�¹ã‚? */
    gap: 30px;                /* ç®±ã�¨ç®±ã�®é–“ã?隙間 */
    width: auto;              /* 中身ã�®å�ˆè¨ˆå¹?�«å�ˆã‚�ã�›ã‚‹ */
    margin-left: 0;
    margin-right: auto;
    box-sizing: border-box;
    padding: 20px;
}

/* 両方ã�®ç®±ã�«å�Œã�˜è£?£¾ã�¨ã€Œç”»é�¢å¹??40%ã€�ã‚’é�©ç”¨ */
.CompanyProfile, .ManagementPhilosophy {
    width: 40vw;              
    min-height: 500px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 20px;
    color: #333333;
}

/* ==========================================
   4. æ–?­—ã?見å?ã�—ã?共通スタイル
   ========================================== */

/* 共通タイトルã�®è£?£¾?ˆç·‘背景?‹é»’ç¸?¼? */
.CompanyProfile > .SubTitle:first-child,
.ManagementPhilosophy > .SubTitle:first-child {
    font-size: 26px;
    margin: 10px auto 25px auto;
    width: 90%;
    padding: 8px 0;
    text-align: center; 
    background-color: #00e667;
    border: 2px solid #333333;
    color: #ffffff;
    text-shadow:
     2px  2px 2px #000000,
      -2px  2px 2px #000000,
       2px -2px 2px #000000,
      -2px -2px 2px #000000,
       2px  0px 2px #000000,
       0px  2px 2px #000000,
      -2px  0px 2px #000000,
       0px -2px 2px #000000;
}

/* グレーã�®è¦‹å?ã�—æž ?ˆå½¹å“¡æ°�å��ã€�未æ�¥åƒ�ã�ªã�©?? */
.CompanyProfile .SubTitle:not(:first-child),
.ManagementPhilosophy .SubTitle:not(:first-child) {
    border: 2px solid #333333;
    padding: 6px 12px;
    margin-top: 20px;
    background-color: #f5f5f5;
    font-size: 16px;
    font-weight: bold;
 margin-bottom: 0;
}

/* å†?®¹ã�®æž ç·šï¼ˆä¸­èº«ã‚’繋ã�’ã‚‹ï¼? */
.CompanyProfile .SubTitle:not(:first-child) ~ h3,
.CompanyProfile .SubTitle:not(:first-child) ~ p,
.ManagementPhilosophy .SubTitle:not(:first-child) ~ p {
    border: 2px solid #333333;
    border-top: none;
    padding: 8px 15px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
}

/* â˜?½¹è�·å��ï¼?3?‰ï¼šå°‘ã�—å�³ã�«ã�šã‚‰ã�—ã�¦æŽ§ã�ˆã‚�ã�«é…�ç½® */
h3 {
    font-size: 17px !important;
    color: #888888;
    font-weight: normal;
    margin-left: 15px;
    margin-bottom: -2px;
    padding: 5px 0 0 0 !important;
}

/* â˜?°�å��・本æ–?¼??‰ï¼šå·¦ç«¯ã�‹ã‚‰ãƒ�ッキリã�¨é…�ç½® */
p {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-left: 0;
}

/* 経営ç�?¿µã�ªã�©ã€�h3ã�Œã�ªã�? ´æ‰?ã�®ãƒ?‚­ã‚¹ãƒˆèª¿æ•´ */
.ManagementPhilosophy p {
 font-weight: normal;
}
.CompanyGuide p {
 font-weight: normal;
}

.CompanyGuide p span {
font-size: 13px;
}

/* ==========================================
   5. リンク移動ã?タン?ˆç”»é�¢å�³ç«¯ã�«å›ºå®šï¼?
   ========================================== */
.linkidou {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 6.6vw;       
    min-width: 60px;
    height: auto;
    z-index: 9999;
}

.link {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* �?タン共通設� */
.p4, .p5, .p6 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16vw; 
    min-height: 120px;
    font-weight: bold;
    color: #fff;
    border: 1px solid #094;
    box-shadow: -3px 3px #007032;
    transition: 0.5s ease-in-out;
    background-color: #00e667;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

/* 特別�レイアウト指� */
.p4 { flex-direction: column; }
.p5, .p6 { flex-direction: row; }

/* 回転�設� */
.kaiten {
    transform: rotate(90deg);
    white-space: nowrap;
}

.char {
    transform: rotate(270deg);
    display: inline-block;
    text-decoration: underline;
}

/* ホ�ー設� */
.p4:hover, .p5:hover, .p6:hover {
    box-shadow: none;
    color: #00e667;
    background-color: #094;
    transform: translateX(-5px); 
}

/* ==========================================
   6. マップコンãƒ?ƒŠ??oogleマップエリア??
   ========================================== */
.MapContainer {
    display: flex;
    flex-direction: column !important; 
    gap: 50px;             
    padding: 0 20px;       
    margin: 30px auto;     
}

.factory-set {
    width: 100%;
    display: flex;
    flex-direction: column !important; 
    gap: 15px;             
}

.factory-set iframe {
    width: 75% !important;         
    aspect-ratio: 1 / 1 !important; 
    height: auto !important;        
    margin: 0 auto 0 0 !important; 
    border-radius: 8px;
}

/* ä½�所ãƒ?‚­ã‚¹ãƒˆã?è£?£¾ */
.factory-item h3 {
    margin: 0 0 6px 0;
    font-size: 22px;
}
.factory-item p {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.5;
}
.common-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ccc;
}

/* ==========================================
   7. 📱 スマã?版ï¼?796px以下）：縦並ã�³ã�¸åˆ?‚Šæ›¿ã�?
   ========================================== */
@media screen and (max-width: 796px) {
    .Map {
        flex-direction: column;
        padding: 10px;
    }

    .Map iframe {
        height: 350px;
    }

    .image-container {
        flex-direction: column; 
        gap: 50px;
        padding: 0 20px;
        margin: 30px auto;
    }

    .image-container img {
        width: 100%;
        max-width: 400px;
    }
} /* 💡 ä¸�足ã�—ã�¦ã�?�Ÿé–‰ã�˜ã‚«ãƒ?‚³ã‚’補ã�„ã�¾ã�—ã�Ÿ */

/* ==========================================
   8. 📱 スマã?ç”»é�¢?ˆæ¨ªå¹?767px以下）最終統å�ˆç‰ˆ
   ========================================== */
@media screen and (max-width: 767px) {
    /* ペã?ジ全体ã?å·¦å¯?�› */
    .TopPage {
        align-items: flex-start !important;
    }
    
    .Map {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .Map iframe {
        width: 90% !important;
        height: 300px;
        border: 0;
    }
  
    /* メインビジュアル */
    .MainVisual {
        height: auto !important;
        width: calc(100% - 17vw) !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        margin-bottom: 10px !important;
        padding: 8px !important;
    }

    /* タイトル枠 */
    .TitleBox {
        width: 100% !important;
        height: 35px !important;
        margin-bottom: 10px !important;
        padding: 0 10px;
        box-sizing: border-box;
        display: block;
    }

    .MainTitle {
        font-size: 15px !important;
        white-space: nowrap;
        line-height: 35px !important;
    }

    /* 画�エリア */
    .Pictures {
        margin-top: 5px !important;
        height: auto !important; 
        flex-direction: column !important; 
        width: 100% !important;
    }

    .Pictures img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        margin-bottom: 5px !important;
        border: 2px solid #333333;
    } 

    /* 会社案å? & 経営ç�?¿µ */
    .CompanyGuide {
        flex-direction: column !important;
        width: calc(100% - 17vw) !important; 
        margin-left: 0 !important;
        margin-right: auto !important;
        gap: 20px !important;
        padding: 5px 0 !important;
    }

    .CompanyProfile, .ManagementPhilosophy {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 15px !important;
    }

    .CompanyProfile .SubTitle:not(:first-child),
    .ManagementPhilosophy .SubTitle:not(:first-child) {
        margin-top: 15px !important;
    }

    .CompanyProfile > .SubTitle:first-child,
    .ManagementPhilosophy > .SubTitle:first-child {
        width: 100%;
        font-size: 24px !important;
        text-align: center;
    }

  
    .linkidou {
        width: 15vw;
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-75%); 
        z-index: 9999;
    }
    
    /* 共通ã?スマã?ボタン調整?ˆã‚»ã‚¯ã‚·ãƒ§ãƒ³5ã�®é‡�è¤?‚’ã‚«ãƒ�ã??? */
    .p4, .p5, .p6 {
        height: 25vw;
        font-size: 11px;
    }
} /* 💡 ä¸?番æœ?後ã?ä¸�足ã�—ã�¦ã�?�Ÿé–‰ã�˜ã‚«ãƒ?‚³ã‚’補ã�„ã�¾ã�—ã�Ÿ */