@charset "UTF-8";

/*
  旧 responsive.css と旧 mobile.css を1つにまとめたファイル。
  以前は「UA判定でスマホと判定された時だけ読み込む(旧mobile.css)」
  「完全レスポンシブ設定が有効な時だけ読み込む(旧responsive.css)」
  という2つの別々の仕組みで出し分けていたが、
  画面幅だけで判定する@media方式に統一した。
*/

ul.snsbs li{
  padding-right:0;
}

@media screen and (max-width:999px){

  /* スマホ幅の時だけ改行させたい箇所に付けるクラス（PCでは非表示、スマホで表示） */
  br.br-sp{
    display: block;
  }

  #header, #header-in, #navi, #navi-in, #body-in, #footer-in{
    width:100% !important;
  }

  #header, #body, #footer{
    min-width:0 !important;
  }

  #main{
    width:auto;
    padding-left:0;
    padding-right:0;
    border-width:0;
    padding:10px;
  }

  #main,
  #sidebar{
    float:none !important;
  }

  /*マージンによる幅のズレ修正開始*/
  .article h2{
    margin-left:0;
    margin-right:0;
  }

  blockquote{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .navigation{
    margin-left:0;
    margin-right:0;
  }

  #sidebar{
    width:auto;
  }

  /* 下層ページ：見出しエリア（PCでは幅1000px固定＋position:fixed） */
  #main .article header{
    width:100%;
    position:static;
    top:auto;
  }

  /* 下層ページ：本文エリア（PCでは幅795px＋左マージン203px固定） */
  #page-content{
    width:auto;
    margin-top:0;
    margin-left:0;
    padding:20px 15px;
    border-left:0;
    box-sizing:border-box;
  }

  /* ページ内目次（PCでは絶対配置） */
  #main .article header #index{
    position:static;
    width:auto;
    margin:0;
    padding:0;
  }

  /************************************
  ** レイアウト
  ************************************/
  #header, #body, #footer {
    min-width: 0;
  }

  div#header-in, div#navi-in, div#body-in, div#footer-in {
    width: 100%;
  }

  /************************************
  ** NEWS一覧（画面幅に追従させる）
  ** スマホ幅だとタイトルが1行に収まらないので、
  ** 日付・カテゴリの下にタイトルを改行して表示し、
  ** その分エリアの高さも2行分に広げる
  ************************************/
  #news{
    display: flex;
    align-items: stretch;
    height: auto;
    min-height: 102px;
  }

  #news-head{
    flex: 0 0 72px;
    height: auto;
  }

  #news-list{
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0 8px 0 10px;
    overflow: hidden;
  }

  #to_news-list{
    flex: 0 0 102px;
    width: 102px;
    height: 36px;
    align-self: center;
  }

  #news-list li{
    height: 92px;
    top: 0;
    line-height: 1.4;
    padding-top: 8px;
  }

  #news-list .date{
    font-size: 13px;
  }

  #news-list .news-category{
    font-size: 10px;
    line-height: 16px;
    padding: 0 5px;
    text-shadow: none;
  }

  #news-list .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    width: auto;
    max-width: none;
    margin-top: 4px;
    font-size: 13px;
    white-space: normal;
    overflow: hidden;
    line-height: 1.4;
  }

  div#sidebar{
    clear:both;
    float:none;
    padding:15px;
    width:auto;
  }

  #h-top{
    height:auto;
    min-height:70px;
    width:auto;
    float:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  #mobile-menu{
    order:2;
    position:static;
  }

  #mobile-menu-toggle{
    position:static;
  }

  #header-in nav{
    float:none;
    width:auto;
    height:auto;
  }

  #navi, #navi-in, #navi-in > div{
    height:auto;
  }

  #site-title a{
    font-size:24px;
  }

  #site-description{
    font-size:14px;
  }

  #main,
  #sidebar {
    margin: 0 auto;
    max-width: 720px;
    box-sizing: border-box;
    float: none !important;
  }

  /************************************
  ** #header内
  ************************************/
  #h-top{
    background-image:none !important;
  }

  #header .alignright{
    display:none;
  }

  /************************************
  ** メインメニュー
  ************************************/
  #navi ul{
    display:none;
    border:0 none;
    background-color:#666;
    width:auto;
    height:auto;
  }

  #navi ul > li {
    float:none;
    border-top:0px;
    border:0;
    height:auto;
  }

  #navi ul  li a{
    border-bottom:solid 1px #444;
  }

  #navi ul li a:hover {
    text-decoration:none;
    background-color:#666;
  }

  #navi ul li a {
    font-size: medium;
    padding: 10px;
    color: #fff;
    background:#777;
    overflow:hidden;
  }

  #navi ul.sub-menu,
  #navi ul.children{
    position: relative;
    width:auto;
    background-color:#777;
    border-width:0;
  }

  #navi ul.sub-menu ul,
  #navi ul.children ul {
    left: 0;
    top: 0;
  }

  #navi .sub-menu li,
  #navi .children li{
    height:auto;
    padding-left:30px;
  }

  /************************************
  ** TOPページ
  ** 各セクションが個別画像＋background-size:coverに
  ** なったので、画面幅に合わせて自動で伸縮する。
  ** モバイル用の高さだけ小さめに調整する。
  ************************************/
  #top-page section a{
    text-indent: 0;
    font-size: 0;
    color: transparent;
    white-space: nowrap;
    overflow: hidden;
  }

  #top-page #catch{
    height: 180px;
  }

  #top-page #catch a:before{
    height: 152px;
  }

  #top-page #ad-agency,
  #top-page #banner{
    width: 100%;
    margin-right: 0;
    height: 160px;
  }

  #top-page #recruit,
  #top-page #business,
  #top-page #contact,
  #top-page #corp-info{
    width: 49.5%;
    margin-right: 1%;
    height: 80px;
  }

  #top-page #business,
  #top-page #corp-info{
    margin-right: 0;
  }

  /* catch・ad-agency：下からのグラデーションを濃く・広めに */
  #top-page #catch a:after,
  #top-page #ad-agency a:after{
    top: 0;
    height: auto;
    padding-top: 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  }

  /* banner・recruit・business：右寄せ文字＋右から左にグラデーション */
  #top-page #banner a:after,
  #top-page #recruit a:after,
  #top-page #business a:after{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }

  /* contact・corp-info：左寄せ文字＋左から右にグラデーション */
  #top-page #contact a:after,
  #top-page #corp-info a:after{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }

  /************************************
  ** #main内
  ************************************/
  .entry-read a,
  .related-entry-read a{
    display:block;
    width: auto;
    background-color:#eee;
    border:1px solid #ddd;
    border-radius:10px;
    text-align:center;
    padding:5px;
    text-decoration:none;
    color:#111;
    margin-top:18px;
  }

  .entry-card .entry-thumb {
    margin-top: 5px;
  }

  .entry-read a:hover,
  .related-entry-read a:hover{
    background-color:#ddd;
  }

  .entry h2 a {
    font-size: 18px;
  }

  .navigation{
    margin: 30px 0;
  }

  .article h2{
    margin:40px 0;
  }

  .article ol, .article ul, .article dl{
    line-height:165%;
  }

  .snsb li{
    padding-right:0;
  }

  /************************************
  ** 広告
  ************************************/
  .ad-top-mobile{
    margin-left:-10px;
    margin-right:-10px;
  }

  /************************************
  ** フッター
  ************************************/
  #footer-widget{
    display:none;
  }

  #mobile-menu{
    display: block;
  }

  /************************************
  ** TOPへ戻るボタン（Go to top）
  ************************************/
  #page-top{
    position:fixed;
    display:none;
  }

  #page-top a{
    font-size:12px;
  }

  /************************************
  ** ページ内目次（#index）
  ** PCでは絶対配置の縦リストだが、
  ** モバイルでは折り返して並べるタブに変更
  ************************************/
  #main .article header .entry-title.sample{
    background-size: cover;
    background-position: center;
    line-height: 60px;
    font-size: 16px;
    text-indent: 15px;
  }

  #main .article header #index{
    position: static;
    width: auto;
    margin: 8px 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #F7F7F7;
    border: 1px solid #EDEDED;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }

  /* 項目が1つしかないときは目次タブの意味がないので非表示 */
  #main .article header #index:has(> li:only-child){
    display: none;
  }

  #main .article header #index li{
    display: block;
    margin: 0;
    vertical-align: middle;
    position: relative;
  }

  /* 区切り線は上下いっぱいではなく、中央だけの短い線にする */
  #main .article header #index li + li:before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #EDEDED;
  }

  #main .article header #index li a{
    display: inline-block;
    padding: 10px 12px 8px;
    line-height: 1.4;
    white-space: nowrap;
    color: #666;
    border-bottom: 2px solid transparent;
  }

  #main .article header #index li a br{
    display: none;
  }

  #main .article header #index li a.on{
    color: #2b6fe0;
    font-weight: bold;
    border-bottom-color: #2b6fe0;
  }

  #main .article header #index li a:before{
    content: none;
  }

  #main .article header #index ul.child{
    display: none;
  }

  /************************************
  ** 事業所のご案内（#access）
  ** PCでは地図を右floatにし、住所とアクセスを
  ** position:absoluteで重ねて配置しているが、
  ** モバイルでは住所欄が縦に長くなり文字が重なるため、
  ** floatとabsoluteをやめて縦積みにする
  ************************************/
  #access .map-wrapper iframe{
    float: none !important;
    width: 100% !important;
  }

  #access .map-wrapper address{
    width: auto !important;
  }

  #access .map-wrapper .access{
    position: static !important;
    width: auto !important;
    margin-top: 15px;
  }

  /************************************
  ** 事業内容ページ
  ** PCでは表紙画像を小さく左floatにして
  ** 文章を回り込ませているが、モバイルでは
  ** 画像が小さすぎて見えづらいので、
  ** 大きくして文章の上に中央表示する
  ************************************/
  .page-slug-services #page-content img.alignleft,
  .page-slug-services #page-content img.alignright{
    float: none;
    display: block;
    width: 140px;
    height: auto;
    margin: 0 auto 15px;
  }

  /************************************
  ** お問い合わせフォーム（table要素自体に.formクラスが付いている）
  ** PCでは表形式（th/td）だが、モバイルでは
  ** 表が崩れるので縦積みのブロック表示にする
  ************************************/
  .form,
  .form thead,
  .form tbody,
  .form tr,
  .form th,
  .form td{
    display:block;
    width:auto !important;
  }

  /* テーブル全体を囲む枠線を消す（.article table の border を打ち消す） */
  .form{
    border:0 !important;
  }

  .form tr{
    margin-bottom:28px;
  }

  .form th{
    border:0;
    padding:5px 0;
  }

  /* .article td{border:solid 1px #ccc;} を打ち消す（入力欄自体の枠線は別なので消えない） */
  .form td,
  .form th{
    border:0 !important;
  }

  .form tbody td:first-child,
  .form tbody th{
    padding-bottom:4px;
    font-weight:bold;
  }

  .form td{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:4px 0 0;
    box-sizing:border-box;
  }

  .form .any,
  .form .required{
    width:auto !important;
  }

  .form select{
    flex:1 1 100%;
    width:100%;
  }

  .form textarea{
    flex:1 1 100%;
    width:100%;
    box-sizing:border-box;
  }

  /* 入力欄は基本的に1行1項目でカードの横幅いっぱいに */
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form input[type="number"]{
    flex:1 1 100%;
    width:auto;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* お名前（姓・名）だけは2つを横並びに（px基準で確実に折り返さないようにする） */
  .form input[name="お名前(姓)"],
  .form input[name="お名前(名)"]{
    flex:1 1 100px;
    max-width:none;
  }

  /* 電話番号：3つの入力欄を1つの枠に見えるようにまとめる */
  .form .mwform-tel-field{
    display:flex;
    flex:1 1 100%;
    width:100%;
    border:1px solid #ccc;
    border-radius:4px;
    background-color:#fff;
    overflow:hidden;
    font-size:0;
    box-sizing:border-box;
  }

  .form .mwform-tel-field input[type="text"]{
    flex:1 1 0;
    width:auto;
    min-width:0;
    max-width:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    text-align:center;
    font-size:16px;
  }

  /* (例)の説明文は入力欄の下に単独の行として表示 */
  .form .ex{
    flex:1 1 100%;
    margin-top:6px;
    display:block;
  }

  /* Contact Form 7 */
  .form tbody td:first-child{
    display:block;
  }
  .form .required:after{
    float:none;
    margin:0 0 0 8px;
  }
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  table.form select,
  .form textarea{
    width:80vw;
  }
  .form input[name="last-name"],
  .form input[name="first-name"],
  .form input[name="kana-last"],
  .form input[name="kana-first"],
  .form input[name="b-last-name"],
  .form input[name="b-first-name"],
  .form input[name="b-kana-last"],
  .form input[name="b-kana-first"]{
    width:32vw;
  }

  /* 広告お申込みフォーム：料金表 */
  .form tbody tr.plan,
  .form tbody tr.plan-sel{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:0;
  }
  .form tbody tr.plan > td:first-child{
    flex:1 1 100%;
    margin-bottom:12px;
  }
  .form tbody tr.plan > th,
  .form tbody tr.plan-sel > td{
    display:block;
    flex:1 1 0;
    min-width:0;
    padding:6px 4px;
    font-size:12px;
    font-weight:normal;
    text-align:center;
  }
  .form tbody tr.plan > th{
    background-color:#eee;
    font-weight:bold;
  }
  .form tbody tr.plan > th:nth-of-type(1),
  .form tbody tr.plan-sel > td.check{
    flex:1.6 1 0;
    text-align:left;
  }
  .form tbody tr.plan-sel > td.check label{
    display:flex;
    align-items:flex-start;
    margin:0;
  }
  .form tbody tr.plan-sel > td.check label > input[type="radio"]{
    flex:0 0 auto;
    margin-right:10px;
  }
  .form tbody tr.plan-sel{
    border-bottom:1px solid #ddd;
  }
  .form tbody tr.plan-sel:last-of-type{
    margin-bottom:28px;
  }

  /* 広告お申込みフォーム：掲載月 */
  table.form input[name="ad-year"],
  table.form select[name="ad-month"]{
    flex:0 0 auto;
    width:auto;
  }

  /* 広告ページ：料金表が幅に収まらず潰れるので横スクロールにする */
  .article table.ad-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #page-content .scroll-hint{
    margin: 0 0 4px;
    font-size: 12px;
    color: #555;
    text-align: right;
  }

  /* 広告ページ：掲載の流れ（PCは矢印画像1枚を横に並べる作りなので、
     スマホ幅では左の余白(298px)に文章が収まらずテキストが重なってしまう。
     矢印画像を各STEPごとに切り出して縦積みにする） */
  ul#adv-flow{
    padding-left: 0;
    background-image: none;
  }
  ul#adv-flow li{
    position: relative;
    height: auto;
    min-height: 91px;
    margin-bottom: 20px;
    padding-left: 160px;
  }
  /* 矢印アイコンは高さを固定した疑似要素にして、文章の長さで潰れないようにする */
  ul#adv-flow li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 91px;
    background-repeat: no-repeat;
    background-image: url(../images/adv-flow.jpg);
    background-size: 150px auto;
  }
  ul#adv-flow li:nth-child(1)::before{background-position: 0 0;}
  ul#adv-flow li:nth-child(2)::before{background-position: 0 -91px;}
  ul#adv-flow li:nth-child(3)::before{background-position: 0 -182px;}
  ul#adv-flow li:nth-child(4)::before{background-position: 0 -273px;}
  ul#adv-flow li:nth-child(5)::before{background-position: 0 -364px;}
  ul#adv-flow li:nth-child(6)::before{background-position: 0 -455px;}
  ul#adv-flow li:nth-child(7)::before{background-position: 0 -546px;}
  ul#adv-flow li:nth-child(8)::before{background-position: 0 -637px;}

  /* 文字は少し小さくしてアイコンとのバランスを取る */
  ul#adv-flow li h1{
    font-size: 19px;
  }
  ul#adv-flow li p{
    font-size: 13px;
    line-height: 150%;
  }
  ul#adv-flow .supplement{
    font-size: 12px;
  }

  /* 広告ページ：お問い合わせ（PCは電話欄40%・フォーム欄60%の横並びなので、
     スマホ幅では電話番号やボタンが折り返して崩れる。縦積みにする） */
  #adv-inquiry > *,
  #adv-inquiry > *:last-child{
    float: none;
    width: auto;
  }
  #adv-inquiry > div:first-child{
    margin-bottom: 20px;
  }
  #page-content #adv-inquiry h1{
    font-size: 15px;
  }
  #adv-inquiry #tel,
  #adv-inquiry > div:first-child p{
    text-align: left;
  }
  #adv-inquiry #tel{
    font-size: 22px;
  }
  #adv-inquiry p{
    font-size: 14px;
  }
  #to-adv-inquiry,
  #to-adv-apply{
    float: none;
    display: block;
    width: auto;
    height: auto;
    line-height: 1.4em;
    padding: 12px 10px;
    margin: 0 0 8px;
    text-align: center;
  }

  /* 事業内容：お問い合わせ（PCの横並びのまま縮小） */
  body.page-slug-services #adv-inquiry > *{
    float: left;
    width: 48%;
  }
  body.page-slug-services #adv-inquiry > *:last-child{
    width: 52%;
  }
  body.page-slug-services #adv-inquiry > div:first-child{
    margin-bottom: 0;
  }
  body.page-slug-services #page-content #adv-inquiry h1{
    font-size: 11px;
    margin: 10px 0;
  }
  body.page-slug-services #page-content #adv-inquiry h1:before{
    font-size: 13px;
  }
  body.page-slug-services #adv-inquiry #tel{
    font-size: 13px;
    white-space: nowrap;
  }
  body.page-slug-services #adv-inquiry p{
    font-size: 11px;
    line-height: 1.5;
  }
  body.page-slug-services #to-adv-inquiry{
    max-width: 223px;
    font-size: 13px;
    padding: 10px 5px;
    margin: 0;
  }

  /* 企業情報ページ：会社概要（PCは項目名(th)・内容(td)の横並び表なので、
     スマホ幅では項目名が縦書きのように折り返って読みにくい。
     項目名を上、内容を下に積む形にする） */
  #corp-info table,
  #corp-info table tbody,
  #corp-info table tr,
  #corp-info table th,
  #corp-info table td{
    display: block;
    width: auto;
  }
  #corp-info table{
    border: 0;
  }
  #corp-info table tr{
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
  }
  #corp-info table tr:last-child{
    border-bottom: 0;
  }
  #corp-info table th,
  #corp-info table td{
    border: 0;
    padding: 2px 0;
  }
  #corp-info table th{
    background-color: transparent;
    font-weight: bold;
    text-align: left;
  }

  /* 下層ページ：見出し画像（PC用の横長画像がそのまま縮むと写真も文字も
     小さくなりすぎるので、写真部分を拡大して見せて、ページタイトルの文字は
     画像の上に重ねて表示する） */
  body.page-slug-aboutus #main h1.entry-title,
  body.page-slug-adv #main h1.entry-title,
  body.page-slug-services #main h1.entry-title,
  body.page-slug-offices #main h1.entry-title,
  body.page-slug-recruit #main h1.entry-title,
  body.page-slug-contacct #main h1.entry-title,
  #single-header h1{
    position: relative;
    height: 80px;
    overflow: hidden;
    /* 左右：親のpaddingがいくつでも影響されないよう、画面幅基準で確実に横幅いっぱいにする */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* 上：headerのpadding-top(20px)＋#mainのpadding-top(10px)を打ち消してヘッダー直下にする */
    margin-top: -30px;
  }
  body.page-slug-aboutus #main h1.entry-title img,
  body.page-slug-adv #main h1.entry-title img,
  body.page-slug-services #main h1.entry-title img,
  body.page-slug-offices #main h1.entry-title img,
  body.page-slug-recruit #main h1.entry-title img,
  body.page-slug-contacct #main h1.entry-title img,
  #single-header h1 img{
    width: auto;
    max-width: none;
    height: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
  }
  body.page-slug-aboutus #main h1.entry-title:after,
  body.page-slug-adv #main h1.entry-title:after,
  body.page-slug-services #main h1.entry-title:after,
  body.page-slug-offices #main h1.entry-title:after,
  body.page-slug-recruit #main h1.entry-title:after,
  body.page-slug-contacct #main h1.entry-title:after,
  #single-header h1:after{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 16px;
    background-image: linear-gradient(to left, rgba(60, 60, 60, 0.85), rgba(60, 60, 60, 0));
    color: #fff;
    font-size: 22px;
    font-weight: bold;
  }

  /* ページごとに表示するタイトル文字だけ切り替える */
  body.page-slug-aboutus #main h1.entry-title:after{ content: "企業情報"; }
  body.page-slug-adv #main h1.entry-title:after{ content: "広告"; }
  body.page-slug-services #main h1.entry-title:after{ content: "事業内容"; }
  body.page-slug-offices #main h1.entry-title:after{ content: "事業所のご案内"; }
  body.page-slug-recruit #main h1.entry-title:after{ content: "採用情報"; }
  body.page-slug-contacct #main h1.entry-title:after{ content: "お問い合わせ"; }
  #single-header h1:after{ content: "お知らせ"; }

  /* お知らせ一覧 */
  #single-header h1{
    margin-top: -10px;
  }

  /* 広告ページの見出し：PCでは文字を画像化して表示しているが、
     画像の幅がPCサイズ固定のためスマホ幅だと右側が見切れてしまう。
     スマホでは画像をやめて通常の文字色でそのまま表示する。 */
  h1#ad-agency{
    color: #00158C;
    background-image: none;
    width: auto;
  }

  /* お知らせ一覧：右側のウィジェット */
  #single-header{
    position: static;
    height: auto;
    padding: 0 0 20px;
  }
  #single-header + *{
    margin-top: 0;
  }
  #main #widget-index-top{
    float: none;
    width: auto;
    padding: 0;
  }
  #main #widget-index-top #new-entries{
    display: none;
  }
  #main #list,
  #main .pager{
    float: none;
    width: auto;
  }
  #list .post-meta{
    float: none;
    width: auto;
  }

  /* お知らせ詳細 */
  #main .post #the-content,
  #main .post .entry-title,
  #main .post .post-meta,
  #under-entry-body,
  #under-entry-body .navigation,
  .footer-post-meta{
    float: none;
    width: auto;
  }

}