@charset "UTF-8";
/* -------------------------------------------------- */
/* !!! スマホ・タブレット用（下層ページ）
   header.php からだけ読み込む。トップページ（header1.php / style1.css）には効かない。
   PCの見た目を変えないよう、959px以下で効く指定だけをここに書く。 */
/* -------------------------------------------------- */

/* スマホ用ヘッダーとメニューはPCでは出さない */
.sp-header,
.sp-nav-check,
.sp-menu-btn,
.sp-nav-close,
.sp-drawer {
  display: none; }

@media (max-width: 959px) {

  /* !! 全体 */
  html {
    -webkit-text-size-adjust: 100%; }
  body {
    font-size: 15px;
    line-height: 1.8; }
  img {
    max-width: 100%;
    height: auto; }

  /* 924px固定の幅をやめて画面幅に合わせる */
  .wrap,
  .l-full,
  .breadcrumb,
  .breadcrumb-inner,
  .l-content-inner,
  .l-content-inner.middle,
  .l-footer,
  .footer-global-inner {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%; }
  .wrap {
    height: auto !important;
    min-height: 0; }
  .l-content-inner {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 40px;
    box-sizing: border-box; }
  .l-full .l-content-inner {
    padding-top: 32px;
    padding-bottom: 32px; }
  section,
  .section {
    margin-bottom: 32px; }

  /* 段組みは1列に並べる */
  .grid > [class*="grid-"],
  .grid-step-2 > *,
  .grid-step-3 > * {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-bottom: 0; }
  .grid {
    margin-bottom: 24px; }
  .grid-empty {
    display: none !important; }

  /* !! ヘッダー：PC用のメニューを隠し、ロゴとMENUボタンにする */
  .l-header,
  .l-header-arrow {
    display: none; }
  .l-header-wrap {
    height: auto;
    padding-bottom: 0; }
  .sp-header {
    display: block;
    position: relative;
    height: 64px;
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .sp-header-logo {
    position: absolute;
    top: 0;
    left: 16px;
    width: 110px;
    height: 64px;
    background-image: url(common/image/logo.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 110px auto;
    text-indent: -9999px;
    overflow: hidden; }
  .sp-header-tel {
    position: absolute;
    top: 12px;
    right: 76px;
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
    border-radius: 20px;
    background-color: #0087cc;
    color: white;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-decoration: none; }
  .sp-header-tel:hover {
    color: white;
    text-decoration: none; }

  /* MENUボタン（押せる範囲は48px角） */
  .sp-menu-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 20; }
  .sp-bar {
    position: absolute;
    left: 10px;
    width: 28px;
    height: 2px;
    background-color: #444444;
    transition: all .3s; }
  .sp-bar-top { top: 10px; }
  .sp-bar-middle { top: 18px; }
  .sp-bar-bottom { top: 26px; }
  .sp-menu-btn-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    color: #444444; }
  .sp-nav-check:checked ~ .sp-menu-btn {
    position: fixed; }
  .sp-nav-check:checked ~ .sp-menu-btn .sp-bar { background-color: white; }
  .sp-nav-check:checked ~ .sp-menu-btn .sp-bar-top { top: 18px; transform: rotate(45deg); }
  .sp-nav-check:checked ~ .sp-menu-btn .sp-bar-middle { opacity: 0; }
  .sp-nav-check:checked ~ .sp-menu-btn .sp-bar-bottom { top: 18px; transform: rotate(-45deg); }
  .sp-nav-check:checked ~ .sp-menu-btn .sp-menu-btn-text { color: white; }

  /* メニュー本体（右から出る） */
  .sp-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85%;
    height: 100%;
    padding: 72px 0 24px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: #222;
    transform: translateX(100%);
    transition: transform .3s;
    z-index: 15; }
  .sp-drawer li a {
    display: block;
    padding: 0 24px;
    line-height: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    text-decoration: none; }
  .sp-nav-check:checked ~ .sp-drawer {
    transform: none; }
  .sp-nav-close {
    display: none; }
  .sp-nav-check:checked ~ .sp-nav-close {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 14; }

  /* !! パンくず・見出し */
  .breadcrumb-inner {
    padding: 10px 16px;
    font-size: 12px;
    line-height: 1.6; }
  .h1 {
    font-size: 20px;
    line-height: 1.5;
    padding: 28px 16px; }
  .h1.h1-simple {
    padding: 0;
    margin-bottom: 16px; }
  .h2 {
    font-size: 17px;
    line-height: 1.6; }
  .hr {
    margin: 0; }

  /* !! 本文の文字 */
  .l-content p,
  .l-content li {
    font-size: 15px;
    line-height: 1.8; }
  .txtBig {
    font-size: 16px !important; }
  .txtMini {
    font-size: 12px; }
  .list-dash > li {
    padding-left: 0.75em; }

  /* !! ボタン（押しやすい高さにする） */
  .l-content .button {
    min-height: 48px;
    line-height: 48px;
    font-size: 15px;
    margin-bottom: 12px; }

  /* !! タブ（取り扱い品目／持込の流れ／引取の流れ） */
  .tab-list-item {
    line-height: 1.4;
    font-size: 13px; }
  .tab-list-item a,
  .tab-list-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 4px; }

  /* !! フッター（PCは画面下に固定。スマホは本文の後ろに並べる） */
  .l-content {
    padding-bottom: 0; }
  .l-footer {
    position: static;
    height: auto; }
  .footer-info {
    padding: 16px 16px 8px;
    font-size: 13px; }
  .footer-global {
    height: auto;
    line-height: 48px; }

  /* !! 会社概要 */
  #company .l-content-inner p,
  #company .l-content-inner li,
  #company .l-content-inner div {
    font-size: 15px !important; }
  #company .grid > .grid-3 {
    font-weight: bold;
    color: #0087cc;
    font-size: 14px !important;
    margin-bottom: 4px; }
  #company .grid {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

  /* !! よくあるご質問 */
  #faq .faq-q-num {
    font-size: 20px;
    color: #0087cc;
    margin-bottom: 4px; }

  /* !! 年間カレンダー（1か月ずつ縦に並べる） */
  #calender .calender-item {
    margin-bottom: 32px; }
  #calender .calender-item .calender li {
    padding: 8px 0;
    font-size: 14px; }
  #calender .calender-item .calender li.holiday {
    background-size: 34px 34px; }

  /* !! お知らせ（日付の下に本文） */
  #news .list-date-item {
    display: block !important;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  #news .list-date-item-date {
    width: auto !important;
    font-size: 13px !important;
    color: #0087cc; }
  #news .list-date-item-text {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 15px !important;
    line-height: 1.8 !important; }

  /* !! 前田金属の目指すもの */
  .common-visual {
    height: 220px; }
  .common-visual + .l-content-inner {
    margin-top: 0; }
  #policy .grid-6 {
    margin-bottom: 16px !important; }
  /* 写真と文章が左右に並ぶ段は、見出しと文章を先に、写真を後に並べる */
  #policy .grid.grid-step-2 {
    display: flex;
    flex-direction: column; }
  #policy .grid.grid-step-2 > [class*="grid-"]:has(img) {
    order: 2; }

  /* !! 取り扱い品目 */
  #service.list .serviceList-mainVis .serviceList-mainVis-item {
    width: 33.333%;
    height: 120px; }
  #service.list .serviceList-mainVis .serviceList-mainVis-item:nth-child(n+4) {
    width: 50%; }
  #service.list .serviceList-mainVis .serviceList-mainVis-item .serviceList-mainVis-item-wrap .eng {
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 4px; }

  /* !! 持込・引取の流れ、マニフェスト */
  .step-item {
    padding-top: 16px;
    padding-bottom: 32px; }
  .p-caution {
    text-align: left; }
}