/*-------------------------------------------*/
/*	768px 以下の画面幅で適用する CSS
/*-------------------------------------------*/
@media screen and (max-width: 768px) {
  /*768px 以下の画面幅で適用する CSS*/

  /*  基本設定
------------------------------------------------------------ */
  body {
    min-width: 320px; /* for sp */
  }

  /* div {
  } */

  /*  汎用クラス
------------------------------------------------------------ */
  img.pc {
    display: none;
  }
  img.sp {
    display: block;
  }
  table.line {
    border-top: none;
  }
  table.line th,
  table.line td {
    display: block;
    width: 100%;
    padding: 20px 0;
  }
  table.line th {
    border: none;
    padding-bottom: 0;
  }
  table.line td {
    padding-top: 5px;
  }
  table.dot {
    border-top: none;
  }
  table.dot th,
  table.dot td {
    display: block;
    width: 100%;
    padding-left: 0;
  }
  table.dot th {
    border: none;
    padding: 15px 0 0;
  }
  table.dot td {
    padding: 6px 0 15px;
  }
  table.dot.sm th {
    padding: 15px 0 0;
  }
  table.dot.sm td {
    padding: 6px 0 15px;
  }
  .colBox {
    display: block;
    margin-bottom: 0;
  }
  .colBox div {
    width: 100%;
  }
  .colBox div strong {
    display: block;
    margin-bottom: 8px;
  }
  .colBox div:first-child {
    margin-bottom: 16px;
  }
  .colList {
    display: block;
    margin-top: 3em;
  }
  .colList li,
  .colList li:nth-of-type(4),
  .colList li:nth-of-type(5) {
    width: 100%;
  }
  .colList li strong {
    font-size: 110%;
  }
  .colList li img {
  }

  .item ul.col-2 {
    display: block;
  }
  .item ul.col-2 li {
    width: 100%;
  }
  .item ul.col-2 li:nth-last-child(2) {
    margin-bottom: 2em;
  }
  .item ul.col-2 li strong {
    font-size: 110%;
  }

  /*  コンテンツフレーム
------------------------------------------------------------ */
  #mainContents {
  }
  #mainContents .container {
    padding-bottom: 90px;
  }
  #mainContents h3 {
    margin-bottom: 62px;
  }

  /*  ぱんくずリスト
------------------------------------------------------------ */
  #topicPath {
  }
  #topicPath p {
    padding: 0 5px;
  }

  /*  メニューページタイトル
------------------------------------------------------------ */
  #mainVisualArea {
  }
  #mainVisualArea div h2 {
    font-size: 28px;
    text-align: center;
  }

  /*  サブエリア ※サブエリアなし
------------------------------------------------------------ */
  #subArea {
    display: none;
  }

  /*  サブナビゲーション ※サブエリアなし
------------------------------------------------------------ */
  #sNav li a {
    font-size: 13px;
  }

  /*  コンテンツ
------------------------------------------------------------ */
  .item {
    padding-bottom: 24px;
  }
  .item dl {
  }

  /*  フッター
------------------------------------------------------------ */
  #footerWrapper .cont_inner {
    margin: 50px auto 10px;
  }

  /*  フッターサイトマップ
------------------------------------------------------------ */
  #footerSitemap {
    display: block;
  }
  #footerSitemap strong {
    display: block;
    margin-bottom: 0.3em;
  }
  #footerSitemap ul {
    display: block;
    overflow: hidden;
    margin-left: 0.5em;
    margin-bottom: 1em;
  }
  #footerSitemap li {
    margin-bottom: 0.3em;
  }

  #footerSitemap li:last-child {
    margin-bottom: 0;
  }

  /*  フッターリンク
------------------------------------------------------------ */
  #f_link {
    display: block;
    width: 100%;
    margin-bottom: 40px;
  }
  #f_link li {
    margin-bottom: 1em;
  }

  /*  フッターバナー
------------------------------------------------------------ */
  #f_banner {
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  #f_banner li {
    width: 48%;
    margin: 0 0 15px;
  }

  /*  コピーライト
------------------------------------------------------------ */
  #copyright {
    float: none;
    text-align: center;
  }

  /*  サイトマップ
------------------------------------------------------------ */
  #sitemap .item {
    padding: 0 0 32px;
  }
  #sitemap .item strong {
    font-size: 133%; /*20px*/
  }
  #sitemap .item li {
    float: none;
    width: 100%;
    margin-right: 0;
  }
  #sitemap .item li:last-child {
    margin-bottom: 0;
  }

  /*  メインビジュアル
------------------------------------------------------------ */
  #mv p {
    font-size: 2em;
  }

  /*  SPECIAL CONTENTS（TOPページ）
------------------------------------------------------------ */
  #specialContentsArea span.en {
    font-size: 20px;
  }
  #specialContentsArea a {
    max-width: 300px;
    padding: 0.8em;
    border-radius: 2em;
  }
  #specialContentsArea .bg_img img {
    object-position: center bottom;
  }

  /*  お知らせ（TOPページ）
------------------------------------------------------------ */
  #newsArea dl {
  }
  #newsArea dt {
    clear: both;
    width: 100%;
    padding: 16px 0 8px;
  }
  #newsArea dd {
    clear: both;
    float: left;
    width: 100%;
    padding: 0 0 16px 0;
  }

  /*  事業概要（TOPページ）
------------------------------------------------------------ */
  #businessArea .lcol {
    width: 100%;
    margin-bottom: 32px;
    padding-right: 0;
  }
  #businessArea .rcol {
    width: 100%;
  }

  /*  事業領域（TOPページ）
------------------------------------------------------------ */
  #menuArea ul {
    display: block;
  }
  #menuArea li {
    width: 100%;
    border: none !important;
  }
  #menuArea li:not(:first-child) {
    border-top: 1px solid #fff !important;
  }
  #menuArea li .txt {
    width: 85%;
  }
  #menuArea li p {
    padding-top: 3.5em;
  }
  #menuArea li:hover span {
    transform: translate(-50%, -3.5em);
  }

  /*  ジェムグループについて（TOPページ）
------------------------------------------------------------ */
  #aboutArea h3 {
    text-align: center;
    font-size: 180%;
  }
  #aboutArea h3 span {
    display: block;
  }
  #aboutArea a {
    margin: 0 auto;
  }
  #aboutArea .bgColBox .imgCol {
    position: relative;
    text-align: center;
    width: 100%;
    height: auto;
  }
  #aboutArea .bgColBox .imgCol img {
    object-fit: contain;
  }
  #aboutArea .txtCol {
    float: none;
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding: 0 15px 48px;
  }
  #aboutArea .txtCol p {
    max-width: 100%;
  }

  /*  ジェムグループの地域貢献活動（TOPページ）
------------------------------------------------------------ */
  #csrArea.item {
    background: none;
  }
  #mainContents #csrArea .container {
    padding: 0;
  }
  #csrArea .slider {
    width: 100%;
  }
  #csrArea .slick-slide {
    margin: 0;
  }
  #csrArea .slick-slide img {
    margin-bottom: 125px;
  }
  #csrArea .slick-slide p {
    width: 85%;
  }
  #csrArea .slick-prev,
  #csrArea .slick-next {
    top: 30%;
  }

  /*  ニュース一覧
------------------------------------------------------------ */
  #news #newsArea dl {
    width: 100%;
  }
  #newsMenu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  #newsMenu li {
    width: 48%;
  }

  /*  ニュース詳細
------------------------------------------------------------ */
  #newsArea.entry #newsMenu {
    display: none;
  }
  #newsArea .article {
    width: 100%;
  }
  #newsArea .photo {
    text-align: center;
  }
  #newsArea .photo img {
    max-width: 100%;
  }

  /*  会社概要
------------------------------------------------------------ */
  #about .item {
    padding-bottom: 0;
  }

  /*  経営理念・ビジョン
------------------------------------------------------------ */
  #cpArea .item {
    height: auto;
  }
  #cpArea .txt {
    width: 100%;
  }
  #cpArea img {
    position: relative;
    right: 0;
    width: 100%;
    margin-bottom: 32px;
  }

  /*  ジェムの歩み・沿革
------------------------------------------------------------ */
  #history {
  }
  #historyPhotoArea ul {
    flex-wrap: wrap;
  }
  #historyPhotoArea li {
    width: 48%;
    margin-right: 0em;
    margin-bottom: 1em;
  }
  #historyTlArea ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  #historyTlArea ul {
    width: auto;
    margin-bottom: 32px;
    font-size: 16px;
    text-decoration: underline;
  }
  #historyTlArea ul a {
    position: relative;
    width: auto;
    margin-top: 1em;
    font-size: 16px;
    text-decoration: underline;
  }
  #historyTlArea ul a::before {
    font-size: 8px;
    position: absolute;
    top: -20px;
    left: calc(50% - 4px);
    padding: 0;
  }
  #historyTlArea .colBox > div {
    width: 100%;
  }

  /*  CSR活動
------------------------------------------------------------ */
  #csr .colBox {
    margin-bottom: 48px;
  }
  #csr .colBox::after {
    display: none;
  }
  #csr .colBox .txt,
  #csr .colBox .img {
    width: 100%;
  }
  #csr #mainContents h4 {
    margin-bottom: 1em;
    font-size: 20px;
  }
  #csrKobeArea .item {
    padding-bottom: 48px;
  }
  #csrKobeArea .colBox {
    display: flex;
    margin-bottom: 0;
  }
  #csrKobeArea .colBox > div {
    width: 48%;
  }
  #csrKobeArea .photo {
    max-width: 100%;
  }

  /*  社長メッセージ
------------------------------------------------------------ */
  #greeting {
  }
  #mainContents #greetingMvArea.container {
    height: 460px;
  }
  #mainContents #greetingMvArea .cont_inner {
    padding-right: 15px;
    padding-left: 15px;
  }
  #greetingMvArea .txt {
    position: relative;
    top: 0;
    transform: none;
    margin-top: 56px;
  }
  #mainContents #greetingMvArea .contTit {
    font-size: 18px;
    margin: 0 0 1em;
    line-height: 1.6;
  }
  #mainContents #greetingMvArea .contTit:before,
  #mainContents #greetingMvArea .contTit:after {
    font-size: 30px;
  }
  #greetingMvArea .item p.signature {
    text-align: left;
  }
  #greetingMvArea .item p.signature img {
    display: block;
    width: 140px;
    margin: 0;
  }
  #greetingMvArea .president {
    width: 200px;
    bottom: 50px;
    right: 0;
  }
  #greetingTxtArea {
    margin-top: -50px;
    padding: 0 15px;
  }
  #mainContents #greetingTxtArea .cont_inner_wide {
    padding: 48px 15px;
  }

  /*  SDGs
------------------------------------------------------------ */
  #sdgs {
  }
  #sdgs .colBox {
    display: block;
  }
  #sdgs #mainContents h4 {
    margin-bottom: 1em;
    font-size: 20px;
  }
  #sdgs .colBox::after {
    display: none;
  }
  #sdgs .colBox .txt,
  #sdgs .colBox .img {
    width: 100%;
  }

  /*  事業領域一覧
------------------------------------------------------------ */
  #business {
  }
  #business #mainContents h3 {
    margin-top: 32px;
    margin-bottom: 24px;
  }
  #business .item ul {
    display: block;
  }
  #business .item li {
    width: 100% !important;
  }
  #business .item li a {
    height: 200px;
    font-size: 20px;
  }
  #business .item li p {
    font-size: 20px;
  }

  /*  事業領域コンテンツ共通
------------------------------------------------------------ */
  #summaryArea {
    padding: 56px 20px;
  }
  #summaryArea.item p {
    margin: 0;
  }
  #mainContents #summaryArea .contTit {
    text-align: left;
  }
  #mainContents #contentsArea h5 {
    font-size: 20px;
  }
  #contentsArea .item {
    margin-bottom: 72px;
    padding: 32px 20px;
  }
  #mainContents #contentsArea h4 {
    margin-bottom: 16px;
    font-size: 22px;
  }
  #contentsArea .colBox > div.img,
  #contentsArea .colBox > div.txt {
    width: 100%;
  }
  #contentsArea .item p {
    margin-bottom: 16px;
  }
  #contentsArea .info {
    padding: 20px;
  }
  #contentsArea .info p {
    margin-bottom: 0.5em;
  }
  #contentsArea .info a.btn {
    margin: 1em auto 0;
  }
  .page_link {
    display: block;
    margin: 0 15px 64px;
  }
  .page_link li {
    width: 100%;
    margin-bottom: 16px;
  }

  /*  不動産事業
------------------------------------------------------------ */
  #estate #txtArea {
    padding-bottom: 32px;
  }
  #estate .page_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  #estate .page_link li {
    width: 49%;
    margin-bottom: 2%;
  }

  /*  アイスストア事業
------------------------------------------------------------ */
  #ice #contentsArea .colBox > div.img {
    margin-top: 0;
  }

  /*  採用TOP、求人情報、スペシャルコンテンツ共通
------------------------------------------------------------ */
  #mainContents #menuTop.container {
    padding-top: calc(200px + ((100vw - 768px) * 0.25));
  }
  #mainContents #menuTop h3 {
    font-size: 24px;
    margin-bottom: calc(200px + ((100vw - 768px) * 0.25));
  }
  #mainContents #menuTop h3 span {
    font-size: 14px;
  }
  #menuTop .contents {
    padding: 50px 20px;
  }
  .jobInfo li {
    width: 100%;
  }

  /*  採用情報TOP
------------------------------------------------------------ */
  #recruit #menuTop {
    background-image: url(/wp/wp-content/themes/gem-co/assets/common/img/rec_top_sp.jpg);
  }
  #recruit #seminar li {
    width: 100%;
  }
  #recruit .jobInfo li {
    width: 100%;
    margin-right: 0;
    padding: 18px 19px;
  }
  #mainContents .jobInfo h4 {
    margin-bottom: 0;
  }
  #mainContents .jobInfo .contTit {
    margin-bottom: 24px;
  }
  #mainContents .jobInfo .contTit.c {
    text-align: left;
  }
  #recruit .slick-slide img,
  #voice .slick-slide img {
    margin-bottom: 0;
  }

  /*  求人情報
------------------------------------------------------------ */
  #detail .btnBox {
    padding: 30px 0 0;
  }

  /*  スタッフの声
------------------------------------------------------------ */
  #voice #voiceTop .staffBg {
    max-height: 418px;
    height: calc(100vw * 0.5442);
  }
  #voice #voiceTop .colBox {
    display: flex;
  }
  #voice #voiceTop .lcol {
    width: 55%;
    margin-bottom: 0;
  }
  #voice #voiceTop .rcol {
    width: 45%;
    margin-bottom: 0;
  }
  #voice #voiceTop .lcol .staffImg {
    max-height: 413px;
    height: calc(100vw * 0.5377);
    margin-bottom: 0;
  }
  #voice #voiceTop .rcol .staffInfo {
    margin-left: 20px;
    margin-bottom: 0;
    width: calc(100% - 20px);
  }
  #voice #voiceTop .rcol .staffInfo h4 {
    font-size: 16px;
  }
  #voice #voiceTop .rcol .staffInfo .dept {
    font-size: 14px;
  }
  /*  採用情報TOP、スタッフの声　共通
------------------------------------------------------------ */
  #recruit #staffVoice ul,
  #voice #staffVoice ul {
    padding: 0 15px;
  }
  #recruit #staffVoice ul li,
  #voice #staffVoice ul li {
    width: 49%;
    margin-bottom: 2%;
  }
  /*  スペシャルコンテンツTOP
------------------------------------------------------------ */
  #property #menuTop {
    background-image: url(/wp/wp-content/themes/gem-co/assets/common/img/pro_top_sp.jpg);
  }
  #proFlow .flowList {
    margin: 0;
    padding: 0;
  }
  #proFlow .flowList li {
    display: flex;
    margin: 0;
  }
  #proFlow .flowList li > img {
    width: 47px;
    height: auto;
  }
  #proFlow .flowList li.fl1 > img {
    background: #204467;
  }
  #proFlow .flowList li.fl2 > img {
    background: #0f549a;
  }
  #proFlow .flowList li.fl3 > img {
    background: #3b8cdc;
  }
  #proFlow .flowList li.fl4 > img {
  }
  #proFlow .colBox.inner {
    margin-left: 25px;
  }
  #proFlow .colBox.inner .rcol {
    width: 100%;
  }
  #proTenant .jobInfo .slick-slide {
    padding: 20px;
  }

  /*  物件紹介
------------------------------------------------------------ */
  #proDtl h3.tit-left {
    text-align: center;
  }
  #proTenaInfo .tenantList li {
    width: calc((100% - 18px) / 2);
  }
  #proTenaInfo .tenantList li:nth-of-type(2n) {
    margin-right: 0;
  }

  /*  FAQ
------------------------------------------------------------ */
  #mainContents .container.faq {
    padding-bottom: 12px;
  }
  #faq h3 {
    font-size: 24px;
    letter-spacing: 0.9px;
  }
  #faq h4 {
    margin-top: 70px;
  }
  #faqList dt {
    padding: 1.4em 3.4em 1.4em 2.5em;
  }
  #faqList dd {
    padding: 1.4em 3.4em 1.4em 2.5em;
  }
  #faqList dt > span,
  #faqList dd > span {
    top: 1.7em;
    left: 1.2em;
  }
  #mainContents #faqContact {
    margin-top: 10px;
  }

  /*  お問い合わせフォーム
------------------------------------------------------------ */
  #contact .conInfo {
    text-align: left;
  }
  #mainContents #contactIn.container {
    padding-bottom: 60px;
  }
  .item dl.mailform {
    margin-top: 60px;
    padding: 0 20px;
  }
  .item dl.mailform dt {
    width: 100%;
    padding: 0 0 1em;
    float: none;
  }
  .item dl.mailform dd {
    width: 100%;
    padding: 0 0 1em;
    float: none;
  }
  .item dl.mailform.conf dt {
    font-size: 12px;
    padding: 1rem 0 0;
  }
  .item dl.mailform.conf dd {
    padding: 0.7em 0 1em;
    border: none;
  }
  #confilmArea p {
    height: 275px;
    overflow-x: hidden;
    margin: 80px 0 1em;
  }
  #confilmArea .btnBox {
    flex-direction: column-reverse;
    align-items: center;
    margin-top: 40px;
  }
  #confilmArea .btnBox button {
    margin-bottom: 20px;
  }
  #confilmArea .btnBox button:first-child {
    margin-bottom: 0;
  }

  /* 240116 */
  table.line.bg_b td {
    padding: 5px 20px 20px;
  }

  table.line.bg_ th {
    padding-bottom: 20px;
  }

  /* 240117 */
  table.line.anchorlist {
    margin: 20% 0 15%;
  }

  table.line.anchorlist th {
    width: 100%;
  }

  .pc_none.about_only {
    display: block !important;
  }
  /*240820 inokuchi 追記ここから*/
  #mediaArea article {
    align-items:flex-start;
    gap: 16px;
}
  #mainContents #topPostArea h3 {
    margin-bottom: 40px;
  }
  #mainContents #topPostArea dt{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    margin-bottom: 5px;
  }
  #mainContents #topPostArea #mediaArea .date {
    display: block;
    width: 100%;
    line-height: 1.1;
  }
  #mainContents #topPostArea span {
    margin: 0;
  }
  /*240820 inokuchi 追記ここまで*/
  /*  メディア一覧 240820 inokuchi
------------------------------------------------------------ */
  #media #mediaArea #postArea {
    width: 100%;
    padding: 16px 0 8px;
}
  #media #mediaArea dl {
    width: 100%;
  }
  #media #mediaArea dl dt{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 5px;
    margin-bottom: 5px;
  }
  #media #mediaArea #postArea .date {
    display: block;
    width: 100%;
    line-height: 1.1;
  }
  #media #mediaArea #postArea span {
    margin: 0;
  }
  #mediaMenu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  #mediaMenu li {
    width: 48%;
  }

  /*  メディア詳細 240820 inokuchi
------------------------------------------------------------ */
  #mediaArea.entry #newsMenu {
    display: none;
  }
  #mediaArea .article {
    width: 100%;
  }
  #media #mediaArea .article span{
    margin-bottom:8px;
  }
  #mediaArea .photo {
    text-align: center;
  }
  #mediaArea .photo img {
    max-width: 100%;
    height: auto;
  }

}

@media screen and (max-width: 500px) {
  /* 240117 */
  table.line.anchorlist td {
    flex-wrap: wrap;
  }

  table.line.anchorlist td p {
    width: 100%;
    margin: 0 0 20px 0;
  }

  table.line.anchorlist td a {
    width: 50%;
    margin: auto;
  }

  table.line.anchorlist tr {
    border-bottom: 20px solid #fff;
  }

  a.anchor {
    display: block;
    padding-top: 120px;
    margin-top: -120px;
  }

}