@charset "UTF-8";
/*----------------------------------------
** 共通スマートフォン用スタイル
** 全ページで読み込む。agricultural_machinery_sp.css から
** ページに依存しないナビ／ヘッダー／フッター／汎用レスポンシブ
** ルールを抽出して集約したもの。
----------------------------------------*/

/* PC / SP の表示切替（max-width:828px をスマホ判定とする） */
.sp{ display: none !important;}
.pc{ display: block !important;}

@media screen and (max-width:828px) {
    .pc{ display: none !important;}
    .sp{ display: block !important;}

    /* 横スクロール抑制 */
    html, body{
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* base.css の各所に残る min-width を全面的に無効化 */
    header,
    footer,
    article,
    section,
    #top,
    #contact,
    #contact .inner,
    .inner_slider,
    .inner_slider h2,
    footer .inner,
    footer #copyright,
    footer.sp .inner,
    footer.sp #copyright,
    #development,
    #company,
    #works,
    #item,
    #news{
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* base.css の固定幅をすべてリセット */
    footer .inner,
    footer.sp .inner,
    footer.pc .inner,
    #contact .inner,
    .inner_slider,
    .main_slider,
    #top{
        width: 100% !important;
    }
    footer .boxL,
    footer .boxR,
    footer .boxR .listL,
    footer .boxR .listR{
        width: 100% !important;
        float: none !important;
    }
    /* box-sizing をSP全体で border-box に統一 */
    *, *::before, *::after{
        box-sizing: border-box;
    }
    /* 子要素が body padding を越えてはみ出ないように */
    article,
    article > section,
    article > section > div,
    article > h1,
    .main_slider,
    .main_slider #main_wrap{
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    img, iframe, table{
        max-width: 100% !important;
    }
}

/*----------------------------------------
** 汎用レスポンシブ（全ページ共通）
----------------------------------------*/
@media screen and (max-width:828px) {
    body{
        padding: 0 15px;
        box-sizing: border-box;
        min-width: 0 !important;
    }
    header,
    footer{
        min-width: 0 !important;
    }
    article #top{
        background: url(../img/common/bg_top.png) no-repeat center top;
        background-size: contain;
        width: 100%;
        min-width: 0;
        max-width: 828px;
        text-align: center;
        height: auto;
        font-size: 20px;
    }
    article #top #pageTitle{
        font-size: 20px;
        margin-bottom: 20px;
        padding-top: 20px;
    }
    article img{
        max-width: 100%;
        height: auto;
    }
    /* h1 タイトル（会社案内・プライバシー等） */
    article > h1#companyTitle,
    article > h1#productlistTitle{
        font-size: 22px;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
    }
    #develop .inner{
        width: 100%;
        margin: 0 auto;
        padding-top: 20px;
    }
    .innerBox{
        margin-top: 50px;
    }
    .innerBox .inner{
        width: 100%;
        margin: 0 auto;
    }
    /* 内部 2 カラム（boxL / boxR）を 1 カラム化 */
    .innerBox .boxL,
    .innerBox .boxR,
    .innerBox .boxC{
        width: 100% !important;
        float: none !important;
        margin: 0 auto 15px !important;
        box-sizing: border-box;
    }
    /* iframe / 動画ボックス */
    .movie,
    #boxYouTube{
        width: 100% !important;
        max-width: 640px;
        margin: 20px auto;
        text-align: center;
        padding-bottom: 30px;
        box-sizing: border-box;
    }
    .movie iframe,
    #boxYouTube iframe{
        width: 100% !important;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    /* youtube 2列横並びテーブル → 縦並び */
    .youtubeBox{ width: 100%;}
    .youtubeBox td{ display: block; width: 100% !important; padding: 5px 0;}
    .youtubeBox td iframe{ width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;}

    /* お問い合わせ section（PC のみ表示） */
    #contact{ min-width: 0 !important;}
    #contact .inner{ width: 100%; box-sizing: border-box; padding: 30px 15px;}

    /* スライダー section */
    .inner_slider{ min-width: 0 !important; width: 100%;}
}

/*----------------------------------------
** SP ヘッダー（ハンバーガーメニュー）
----------------------------------------*/
.sp .space{
    height: 90px;
}
.sp #headerBox{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.95);
    z-index: 9000;
    padding: 10px 15px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.sp #headerBox .head-logo{
    height: 60px;
    margin: 0;
}
.sp #headerBox .head-logo img{
    height: 60px;
    width: auto;
}

@media screen and (max-width:828px) {
    .nav {
        width: 100%;
        right: 0;
        overflow: hidden;
        position: absolute;
        top: 90px;
        height: 0;
        pointer-events: none;
    }
    .nav.open {
        height: 70vh;
        pointer-events: auto;
    }
    .menu-trigger {
        display: block;
        cursor: pointer;
        position: fixed;
        width: 30px;
        height: 27px;
        top: 30px;
        right: 20px;
        z-index: 9500;
        padding-right: 10px;
    }
    .menu-trigger,
    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #E83B1E;
    }
    .menu-trigger span:nth-of-type(1) { top: 0;}
    .menu-trigger span:nth-of-type(2) { top: 13px;}
    .menu-trigger span:nth-of-type(3) { bottom: 0;}
    .menu-trigger.active {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    .menu-trigger.active span {
        background-color: #E83B1E;
        box-shadow: none;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(13px) rotate(-45deg);
        transform: translateY(13px) rotate(-45deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
        -webkit-transform: translateY(0) rotate(45deg);
        transform: translateY(0) rotate(45deg);
    }
    .menu-trigger.active span:nth-of-type(3) {
        opacity: 0;
    }
    .nav .menu {
        width: 100%;
        height: 70vh;
        top: 0;
        right: 0;
        z-index: 800;
        transition: 0.3s linear;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 0;
        background-color: #ffffff;
        transform: translateX(100%);
        border-top: 1px solid #ccc;
    }
    .nav .menu ul li {
        letter-spacing: normal;
        font-size: 1.2rem;
        padding: 10px;
        margin: 0;
        text-align: left;
        transition: 0.2s linear;
        position: relative;
        display: block;
        float: none;
        border-bottom: 1px solid #ccc;
    }
    .nav .menu ul li a {
        padding: 10px;
        color: #333;
        display: block;
        text-decoration: none;
    }
    .nav .menu.open {
        transform: translateX(0);
        opacity: 1;
    }
}

/*----------------------------------------
** SP フッター
----------------------------------------*/
@media screen and (max-width:828px) {
    footer.sp{
        padding: 30px 15px;
        box-sizing: border-box;
        background-color: #f5f5f5;
        margin-top: 40px;
    }
    footer.sp h2 img{
        max-width: 240px;
        height: auto;
    }
    footer.sp p{
        font-size: 14px;
        line-height: 1.8;
        margin-top: 15px;
    }
    footer.sp p strong{
        font-size: 16px;
        font-weight: bold;
        display: block;
        margin-top: 10px;
    }
    footer.sp #copyright{
        margin-top: 20px;
        font-size: 12px;
        color: #808080;
        text-align: center;
    }
}