@charset "UTF-8";

/* --- 基本設定 --- */
html { font-size: 100%; }
body { color: #333333; font-family: 'Times New Roman', Times, serif; overflow-x: hidden; }
img  { max-width: 90%; vertical-align: bottom; border: 0; }
li   { list-style: none; }
a    { color: #707070; text-decoration: none; transition: 0.3s; }
a:hover { opacity: 0.7; }

.wrapper { text-align: center; max-width: 1000px; margin: 0 auto; }
.align-left { text-align: left !important; }

/* --- 共通コンポーネント --- */
.shadow-effect { border-radius: 8px; box-shadow: 4px 4px 8px rgba(0,0,0,0.4); transition: 0.3s; }
.shadow-effect:hover { box-shadow: 6px 6px 12px rgba(0,0,0,0.6); }

.animated-link { position: relative; padding-bottom: 2px; }
.animated-link::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background-color: #333; transform: scaleX(0); transition: 0.3s;
}
.animated-link:hover::after { transform: scaleX(1); }

/* --- ヘッダー（PC用デフォルト） --- */
#header { display: flex; align-items: center; justify-content: space-between; padding: 20px 15px; }
#header .logo { max-width: 200px; line-height: 0; }
#header .navi { display: flex; align-items: center; }
#header .navi li { font-size: 15px; margin-left: 30px; }

/* PCではスイッチとボタンを隠す */
#menu-btn-check { display: none !important; }
.menu-btn { display: none; }

/* --- スライドショー --- */
.slide-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; margin-top: 50px; }
.slide { width: 500% !important; height: 100%; display: flex !important; transition: all 0.3s; }
.slide div { width: 20% !important; height: 100%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.slide div img { width: auto; height: auto; object-fit: cover; }

/* --- JSで追加されるクラスに対応する移動距離 --- */
.slide.slide1 { transform: translateX(0); }
.slide.slide2 { transform: translateX(-20%); }
.slide.slide3 { transform: translateX(-40%); }
.slide.slide4 { transform: translateX(-60%); }
.slide.slide5 { transform: translateX(-80%); }

.next, .prev {
    position: absolute; width: 20px; height: 20px; bottom: 50%; z-index: 10; cursor: pointer;
    border-top: solid 3px #999; border-right: solid 3px #999;
}
.next { right: 20px; transform: rotate(45deg); }
.prev { left: 20px; transform: rotate(-135deg); }

.indicator { width: 100%; position: absolute; bottom: 20px; display: flex; column-gap: 18px; z-index: 9; justify-content: center; }
.indicator li { width: 14px; height: 14px; border-radius: 50%; background-color: #fff; border: 2px #000 solid; cursor: pointer; }

/* --- メインコンテンツ --- */
.text-free { font-size: 60px; margin-top: 20px; }
.text { font-size: 20px; margin: 20px 0; line-height: 1.6; }
#profile { display: flex; margin-top: 10px; }
#profile .img { width: 50%; }
#profile .detail { width: 50%; padding-left: 20px; text-align: left; }

/* --- 文章のみのページ専用設定（PC・スマホ共通） --- */
.company-concept {
    display: block !important; /* flex（横並び）を強制的に解除 */
}

.company-concept .detail {
    width: 100% !important;    /* 50%を100%に上書き */
    padding-left: 0 !important; /* 左の余白をリセット */
    margin: 0 auto;
}

/* 読みやすさの調整（PCで文字が横に広がりすぎないようにする） */
.company-concept .text, 
.company-concept .text-title {
    max-width: 800px;         /* 読みやすい横幅に制限 */
    margin-left: auto;
    margin-right: auto;
}

/* --- フッター --- */
footer { background: #111; color: #fff; padding: 40px 20px; border-radius: 20px; margin: 20px; text-align: left; }
.footer-content-wrapper { display: flex; justify-content: space-between; gap: 50px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.footer-nav ul { padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 10px; font-size: 0.9em; }
.footer-nav a { color: #fff; }
.copyright { border-top: 1px solid #555; margin-top: 40px; padding-top: 20px; text-align: center; font-size: 0.8em; }

/* --- スマホ用 (768px以下) --- */
@media screen and (max-width: 768px) {
    #header { padding: 10px 15px; position: relative; }
    
    /* 三本線ボタン表示 */
    .menu-btn {
        display: flex; width: 44px; height: 44px; justify-content: center; align-items: center;
        z-index: 9999 !important; position: relative; cursor: pointer;
    }
    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
        content: ""; display: block; height: 3px; width: 25px; border-radius: 3px;
        background: #333; position: absolute; transition: 0.4s;
    }
    .menu-btn span:before { top: -8px; }
    .menu-btn span:after { top: 8px; }

    /* ×アニメーション */
    #menu-btn-check:checked ~ .menu-btn span { background: transparent; }
    #menu-btn-check:checked ~ .menu-btn span:before { top: 0; transform: rotate(45deg); }
    #menu-btn-check:checked ~ .menu-btn span:after { top: 0; transform: rotate(-45deg); }

    /* 全画面メニュー */
    .navi {
        display: flex !important; position: fixed; top: 0; left: 100%;
        width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.98);
        flex-direction: column; justify-content: center; align-items: center;
        z-index: 9998; transition: 0.5s; margin: 0 !important;
    }
    #menu-btn-check:checked ~ .navi { left: 0; }
    .navi li { margin: 20px 0 !important; margin-left: 0 !important; font-size: 20px; }

    /* レイアウト調整 */
    .slide-wrapper { height: 250px !important; margin-top: 20px; }
    .text-free { font-size: 32px; }
    .text { font-size: 16px; padding: 0 10px; }
    #profile { flex-direction: column; text-align: center; }
    #profile .img, #profile .detail { width: 100%; }
    #profile .detail { 
        width: 100%; 
        text-align: left; /* 中央寄せより左寄せの方が見やすい場合が多いです */
        padding: 0 50px;  /* ★ここで左右に20pxの余白を作ります */
        box-sizing: border-box; /* 余白を含めて100%の幅に収める設定 */
    }
    .footer-content-wrapper { flex-direction: column; gap: 30px; text-align: center; }

    .content-container { width: 92%;/* 画面幅の92%にする */
                         margin: 0 auto;  /* 中央に寄せる（これで左右に4%ずつの余白ができる） */}

/* 文章のみのページ（スマホ用：768px以下） */
@media screen and (max-width: 768px) {
    .company-concept .detail {
        width: 100% !important;    /* 幅いっぱいに広げる */
        padding: 0 50px !important; /* 左右に50pxの空白を作る */
        box-sizing: border-box;    /* パディングを幅に含める（はみ出し防止） */
        text-align: center !important; /* 中身のテキストを中央寄せにする */
    }

    /* もしHTML内のインラインスタイルが邪魔な場合のためのリセット */
    .company-concept .detail div {
        display: inline-block;     /* 中のdivを中央に寄せやすくする */
        text-align: center;
        width: 100%;
    }
}

}