@charset "utf-8";
/* CSS Document */
@media screen and (max-width:768px) {
  html {
    font-size: 62.5%;
  }
  body {
    font-size: 1.5em;
    font-family: YakuHanJP_Noto, 'Lato', "Noto Sans JP", -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1.7em;
    letter-spacing: 0.5px;
  }
p {
    color: #000;
}

a {
    color: #000;
    text-decoration: underline; /* デフォルトで下線を表示 */
}

a:hover {
    text-decoration: none; /* hover時に下線を消す */
}  
.wrap {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 45px 20px 80px;
    color: #000000;
  }
#intro {
    padding: 40px 20px 40px; /* introセクションのみに適用 */
}
hr {
   margin: 0 20px; /* 左右に20pxの余白を設定 */
   border: none;   /* デフォルトの枠線を無効化 */
   height: 1px;    /* 線の高さを指定 */
   background-color: #ddd; /* 線の色を設定 */
}
  /*================================================
 *  SPヘッダー
 ================================================*/
  .inner {
    width: 100%;
    margin: 0 auto;
  }
  .inner:after {
    content: "";
    clear: both;
    display: block;
  }
  /* header */
  #top-head {
    font-size: 0.9em;
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 30px 0 0;
    line-height: 1;
    z-index: 999;
  }
  #top-head a, #top-head {
    color: #fff;
    text-decoration: none;
  }
  #top-head .inner {
    position: relative;
  }
  #top-head .logo {
    float: left;
  }
  #global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.9em;
  }
  #global-nav ul li {
    float: left;
    position: relative;
  }
  #global-nav ul li a {
    padding: 0 30px;
  }
  /* Btn Hover */
  #global-nav ul li:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    bottom: -20px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
  }
  #global-nav ul li:hover:after {
    background: #fff;
    bottom: -30px;
  }
  /* Fixed */
  #top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 55px;
    background: #fff;
    background: rgba(255, 255, 255, .7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
  }
  #top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
  }
  /* Fixed Btn Hover */
  #top-head.fixed #global-nav ul li:after {
    bottom: -10px;
  }
  #top-head.fixed #global-nav ul li:hover:after {
    background: #0062B8;
    bottom: -20px;
  }

/* Toggle Button */
  #nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 16px;
    width: 40px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
  }
  #nav-toggle div {
    position: relative;
  }
  #nav-toggle span {
    display: block;
    position: absolute;
    height: 3px; /* 元は4px */
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
  #nav-toggle span:nth-child(1) {
    top: 0;
  }
  #nav-toggle span:nth-child(2) {
    top: 11px;
  }
  #nav-toggle span:nth-child(3) {
    top: 22px;
  }
  @media screen and (max-width: 980px) {
    wrap {
      padding: 0 30px;
    }
    .inner {
      width: 100%;
      padding: 0 20px;
    }
    #global-nav ul li a {
      padding: 0 20px;
    }
    #top-head.fixed #global-nav ul li a {
      padding: 0 15px;
    }
  }
  @media screen and (max-width: 640px) {
    #main-visual {
      height: 300px;
    }
    #top-head, .inner {
      width: 100%;
      padding: 0;
    }
    #top-head {
      top: 0;
      position: fixed;
      margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
      padding-top: 0;
      background: transparent;
    }
    #mobile-head {
      background: #fff;
      border-bottom: 1px solid #eee;
      width: 100%;
      height: 56px;
      z-index: 999;
      position: relative;
    }
    #top-head.fixed .header_logo a, #top-head .header_logo a {
      text-indent: -9999px;
      position: absolute;
      left: 6px;
      top: 2px;
      width: 200px;
      height: 50px;
      background: url("../img/common/logo.svg") no-repeat center center;
      background-size: contain;
      float: left;
    }
    #global-nav {
      position: absolute;
      /* 開いてないときは画面外に配置 */
      top: -500px;
      background: rgba(35, 35, 35, 0.9);
      width: 100%;
      text-align: center;
      padding: 0px 0;
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
    }
    #global-nav ul {
      list-style: none;
      position: static;
      right: 0;
      bottom: 0;
      font-family: "nimbus-sans";
      font-weight: 700;
      font-size: 1.2em;
    }
    #global-nav ul li {
      float: none;
      position: static;
      border-top: 1px solid #666;
    }
    #global-nav ul li:after {
      display: none;
    }
    #top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a {
      width: 100%;
      display: block;
      color: #fff;
      padding: 16px 0;
    }
    #nav-toggle {
      display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
      top: 11px;
      -webkit-transform: rotate(315deg);
      -moz-transform: rotate(315deg);
      transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
      width: 0;
      left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
      top: 11px;
      -webkit-transform: rotate(-315deg);
      -moz-transform: rotate(-315deg);
      transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
      /* #global-nav top + #mobile-head height */
      -moz-transform: translateY(556px);
      -webkit-transform: translateY(556px);
      transform: translateY(556px);
    }
  }
  /*================================================
 *  見出し回り
 ================================================*/
/* 見出しのスタイル */
h2.scroll-up, h2.load-fade {
    position: relative; /* 画像や他の要素との重なりを避けるために相対配置 */
    font-size: 5rem; /* 見出しのフォントサイズを調整 */
    text-align: center; /* 見出しテキストを中央揃え */
    margin: 30px 0; /* 上下の余白を調整 */
}

/* 英語の見出し部分 */
h2.scroll-up .mid_heading_eng, h2.load-fade .mid_heading_eng {
    display: block; /* 英語のテキスト部分をブロック要素として表示 */
    font-family: "nimbus-sans";
	font-size: 2.8rem;
	letter-spacing: 2px;
	margin-bottom: 20px; /* 画像との間隔を調整 */
    font-weight: bold; /* 英語テキストを太字に */
    text-transform: uppercase; /* 英字は大文字に */
}

/* 日本語の見出し部分 */
h2.scroll-up .mid_heading_jpn, h2.load-fade .mid_heading_jpn {
    display: block; /* 日本語テキストもブロック要素 */
    font-weight: 700; /* 日本語テキストは普通の太さに */
    font-size: 1.6rem; /* 日本語フォントサイズを調整 */
	margin: 10px 0 50px;
}

/* ドットボーダー画像 */
h2.scroll-up img, h2.load-fade img {
    display: block; /* 画像をブロック要素として表示 */
    margin: 10px auto; /* 画像を中央に配置 */
}
  /* 見出し h3*/
  h3 .sub_heading_eng {
    display: block;
    font-family: "nimbus-sans";
    font-size: 1.45em;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
    margin-bottom: -10px;
    text-align: center;
  }
  h3 .sub_heading_jpn {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    font-feature-settings: "palt";
    color: #000;
    margin: 10px 0 10px;
    text-align: center;
  }
  /* 見出し h4*/
  h4 {
    font-size: 1.1em;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
  }
  /*================================================
   *  スライドショー（HOMEのみ）
  ================================================*/
  /* --- 全体のBOX定義 ---------------------------------------- */
  .bg-slider {
    position   : relative;
    max-width: 100%;
    height     : 515px;
    margin     : auto;
    margin-top: 55px;
    overflow   : hidden;
    background-image : url(../img/home/cover_home.jpg);   /* 背景の画像を指定 */
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:280% auto;
  }
  .boxString {
    position   : absolute;
    display    : inline-block;
    width: 100%;
    color      : #fff;
    top        : 380px;                               /* 中央寄せ */
    left       : 50%;
    transform  : translate(-50%,-70%);
    z-index    : 11;
  }
/* スライダー上のタイトル */
p .title {
  color: #fff;
  font-family: "nimbus-sans-extended", sans-serif;
  margin: 0 auto;
  padding: 40px 0 10px;
  font-feature-settings: "palt";
  font-weight: 100;
  font-size: 4.2rem;
	line-height: 4.0rem;
  text-align: center;
  box-sizing: border-box;
  display: block; /* ブロック要素として指定 */
  width: fit-content; /* 親要素に依存せず、必要な幅だけを使用 */
}
  /* スライダー上のiMac */
  .boxString img {
    max-width: 100%;
    height: auto;
    margin-top: 30px;
  }
  /*================================================
  *  ページトップ背景画像（下層ページ）
  ================================================*/
/* ページタイトル全体のスタイル */
#page-title {
    position: relative;
    max-width: 100%;
    height: 330px;               /* 背景画像エリアの高さ */
    margin: 40px auto 40px;      /* 上下の余白 */
    overflow: hidden;
    text-align: center;
}

/* 英文画像と日本語タイトルの親要素 */
.heading {
    position: absolute;
    display: flex;               /* Flexboxで子要素を配置 */
    flex-direction: column;      /* 子要素を縦に並べる */
    justify-content: center;     /* 親要素内で上下中央揃え */
    align-items: center;         /* 親要素内で左右中央揃え */
    width: 100%;
    color: #fff;
    top: 58%;                    /* 背景エリアの中央より若干下に配置 */
    left: 50%;                   /* 幅の中央に配置 */
    transform: translate(-50%, -50%);
    z-index: 11;
    text-align: center;
}

/* 英文タイトルのスタイル */
.page-title-en {
    display: inline-block;       /* 行内ブロックでレイアウト調整 */
    height: 40px;                /* 高さを40pxに固定 */
    line-height: 40px;           /* テキストが中央に来るよう調整 */
}

/* 英文画像 */
.page-title-en img {
    height: 40px;                /* 高さを40pxに固定 */
    width: auto;                 /* アスペクト比を保持して幅を自動調整 */
    display: block;              /* 画像をブロック要素に設定 */
    margin: 0 auto;              /* 完全な中央揃え */
}

/* 日本語タイトルのスタイル */
.page-title-jp {
    color: #fff;
    font-size: 1.2em;
    background-color: #000;
    padding: 2px 8px;
    font-feature-settings: "palt";
    font-weight: 700;            /* 日本語タイトルに太字を適用 */
    margin-top: 10px;            /* 英文タイトルとの間隔を調整 */
    display: inline-block;
}

/* 背景画像の設定 */
.about-title-bg {
    background-image: url("../img/about/cover_about.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size: 280% auto;
}

  .service-title-bg {
    background-image: url("../img/service/cover_service.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:280% auto;
    }
  .price-title-bg {
    background-image: url("../img/price/cover_price.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:280% auto;
    }
  .works-title-bg {
    background-image: url("../img/works/cover_works2.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:400% auto;
    }
  .sample-title-bg {
    background-image: url("../img/works/cover_sample.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:280% auto;
    }
.print_media-title-bg {
      background-image: url("../img/works/cover_sample2.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
      background-size:280% auto;
    }
  .contact-title-bg {
    background-image: url("../img/contact/cover_contact.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:280% auto;
    }
  .thanks-title-bg {
    background-image: url("../img/contact/cover_thanks.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
    background-size:280% auto;
    }

  /*================================================
  *  intro, vision
  ================================================*/

  #intro h3, #vision h3 {
    font-size: 1.2em;
    font-weight: 700;
    font-feature-settings: "palt";
    margin: -40px 0 20px;
    text-align: center;
  }
  #intro p {
    text-align: left;
  }
  #intro img {
    padding-top: 40px;
    max-width: 100%;
    height: auto;
  }
  /*================================================
 *  3カラム（HOME, SERVICE，ABOUT）
 ================================================*/
  /* 3カラム*/
  .f-container {
    display: flex;
    flex-direction: column;
    margin: 50px 0 0;
  }
  .f-item {
    text-align: center; /* 親要素内でインライン要素を中央揃え */
	margin: 30px 0px 30px;
}

.f-item img {
    display: inline-block; /* インラインブロック要素として扱うことで中央揃えが適用 */
    margin: 0 auto; /* 中央揃え */
    margin-bottom: 20px;
  }
  .f-item p {
    text-align: left;
  }
.f-container .f-item:first-child {
  margin-top: 0; /* 1つ目の要素のmargin-topを0に設定 */
}

.f-container .f-item:last-child {
  margin-bottom: 0; /* 最後の要素のmargin-bottomを0に設定 */
}
  /* 営業品目リスト*/
  #menu {
    margin-top: 25px;
    padding: 20px 0;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
  }
  .list_01 ul {
  padding: 0.3em 0;
  list-style-type: none;
  border: none;
  text-align: left;
}
.list_01 ul li {
  position:relative;
  padding: 0.3em 0 0.3em 1.6em;
  line-height: 1.5;
}
.list_01 ul li:before{
  content: '';
  position: absolute;
  background-color: #999;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 10px;
  top: 12px;
}
  /*================================================
  *  SERVICE
  ================================================*/
  /* 3カラム　details */
  .details {
    box-sizing: border-box;
    width: 100%;
    margin: -20px auto 0;
    padding: 10px 20px 30px;
  }
  /* flow */
  #flow-table .table04 {
    width: 100%;
    border-bottom: solid 1px #ccc;
  }
  #flow-table .table04 th {
    padding: 20px 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;
    border-top: solid 1px #ccc;
    font-weight: 700;
    font-feature-settings: "palt";
  }
  #flow-table .table04 td {
    padding: 0 0 20px;
    display: block;
    text-align: left;
  }
  #flow-table .step {
    background: #333;
    color: #fff;
    padding: 1px 7px;
    font-size: 1em;
    font-family: "nimbus-sans";
    font-weight: 700;
    text-align: center;
    border-radius: 3px;
    float: left;
    margin-right: 15px;
  }
  /*================================================
 *  ニュース（HOME）
 ================================================*/
  #news ul li {
    padding: 30px 0;
    border-bottom: 1px dotted #ccc;
  }
  #news ul li:first-child {
    border-top: 1px solid #ccc;
  }
  #news dl dt {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }
  #news dl dd {
    display: block;
  }
  .headline {
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: 700;
    padding-bottom: 10px;
    font-feature-settings: "palt";
  }

/*================================================
 * 2カラム（ABOUT） - <p>直下のみ間隔調整版
 ================================================*/
#professional .f-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 各 f-item の間隔を統一 */
}

#professional .f-item {
  text-align: center;
  padding: 0; /* すべての上下の余白を削除 */
  margin: 0; /* 外部マージンも削除 */
}

#professional img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* 左右中央揃え */
}

/* 赤で塗られたスペースの削除（h3とimgの間） */
#professional img + h3 {
  margin-top: 0; /* 画像直下の見出しの余白を削除 */
}

/* 画像とp要素の間のスペースを広げる */
#professional img + p {
  margin-top: 20px;  /* 画像直下の段落との間隔を広げます */
}

/* 緑で塗られたスペースの削除（セクション間隔） */
#professional {
  margin-bottom: 0; /* セクション全体の下部マージンを削除 */
}

/* <p>タグの直下にある次の要素に100pxの間隔を適用 */
#professional p + * {
  margin-top: 100px !important; /* 重要度を高めて確実に適用 */
}

/* h3とpの間隔調整（必要であれば微調整） */
#professional h3 {
  font-size: 1.1em;
  font-weight: 700;
  font-feature-settings: "palt";
  color: #000;
  margin: 5px 0; /* 見出し上下の余白をさらに狭く調整 */
}

#professional p {
  text-align: left;
  margin: 10px 0; /* 段落上下の余白を統一 */
  padding: 0; /* 内部の余白を削除 */
}

  /*================================================
 *  SNSボタン（ABOUT）
 ================================================*/
  #profile .sns-btn {
    padding: 40px 0;
    text-align: center;
  }
  #profile .facebook {
    display: inline-block;
    background: #1877F2;
    margin-right: 20px;
    padding: 7px 20px 0px 10px;
    border-radius: 25px;
  }
  #profile .twitter {
    display: inline-block;
    background: #000;
    padding: 10px 2px 7px 15px;
    border-radius: 25px;
  }
  #profile .sns-btn a {
    text-decoration: none;
    cursor: pointer;
    font-family: "nimbus-sans";
    font-size: 1.1em;
    color: #fff;
  }
  #profile .sns-btn a:hover {
    opacity: 0.7;
  }
  #profile .fab {
    float: left;
    padding: 4px 10px 10px;
    font-size: 1.2em;
    color: #fff;
  }
  /*================================================
 *  代表プロフィール（ABOUT）
 ================================================*/
/* プロフィールボックスの親要素をflexで配置 */
#profile .prof-box-l {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;     /* 垂直方向の中央揃え */
    padding-bottom: 20px;
}

/* その他のプロファイルボックスの設定 */
#profile .prof-box {
    text-align: left;
}
  /* テーブル */
  #prof-table .table04 {
    width: 100%;
      border-bottom: solid 1px #ccc;
  }
  #prof-table .table04 th {
    padding: 3px 20px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background-color: #f2f2f2;
    border-top: solid 1px #ccc;
  }
  .table04 td {
    padding: 12px 20px;
    display: block;
    text-align: left;
  }
  /*================================================
 *  ボタン
 ================================================*/
  /* グラデーションボタン　中*/
  #intro .btn, .btn_sml, #contact .btn, #id_pw .btn {
    display: block;
    width: 184px;
    height: 46px;
    border-radius: 23px; /*角を丸くする*/
    background-image: url(../img/common/btn_sml_bg.png);
    background-repeat: no-repeat;
    text-align: center;
    margin: 30px auto 30px;
  }
#intro .btn a, .btn_sml a, #contact .btn a, #id_pw .btn a {
    display: block;
    color: #fff; /*文字を白に*/
    font-size: 0.9em;
    font-weight: 700;
    line-height: 46px;
    text-decoration: none; /*下線消す*/
  }
#intro .btn a:hover, .btn_sml a:hover, #contact .btn a:hover, #id_pw .btn a:hover {
    background-image: url(../img/common/btn_sml_hover.png);
    background-repeat: no-repeat;
  }
/*================================================
*  制作料金（PRICE）
================================================*/
/* 価格表 */
.table {
    width: 100%;
}

.price-list {
    width: 100%;
    border-top: solid 1px #000;
    margin-bottom: 0; /* 価格表の下の余白をリセット */
}

.price-list th {
    padding: 10px 0 0 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.price-list td {
    padding: 0 0 10px 0;
    display: block;
    text-align: right;
    border-bottom: solid 1px #ccc;
}

.caution {
    list-style-type: none; /* デフォルトのリストスタイルを無効化 */
    padding: 0;           /* 左の余白をなくす */
    margin: 10px 0;       /* 上下に余白を設定 */
}

.caution li {
    position: relative;
    padding-left: 1.5em;  /* テキストの左余白を設定 */
    font-size: 0.8em;     /* 小さい文字サイズを適用 */
    line-height: 1.5em;   /* 行間を調整 */
}

.caution li::before {
    content: "※";         /* 行頭に「※」を追加 */
    position: absolute;
    left: 0;              /* リストアイテムの先頭に配置 */
    color: #000;          /* 「※」の色（必要に応じて変更） */
}

/* テーブル直下の注釈のみに余白を追加 */
.price-list + .caution:last-of-type {
    margin-bottom: 80px; /* テーブル下の注釈に80pxの余白 */
}

  /*================================================
  *  制作実績（WORKS）
  ================================================*/
  .works-left {
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
   }
.works-left img {
     max-width: 100%;
     height: auto;
  }
  .works-right {
    width: 100%;
    padding-bottom: 20px;
   }
.works-right img {
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
    }
  .works-right h3 {
    text-align: center;
    font-size: 1.1em;
    font-weight: 700;
    color: #000;
    font-feature-settings: "palt";
    margin: 10px 0 10px;
  }
  .btn_amazon {
    display: block;
    text-align: center;
    width:100%;
    height:50px;
    border-radius:25px;
    background-color: #e2e2e2;
    margin: 20px 0 10px 0;
    text-decoration: none;
    font-family: "nimbus-sans", 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  }
  .btn_amazon a {
    display: block;
    width:100%;
    height:50px;
    border-radius:25px;
    text-decoration: none;
    line-height: 50px;
  }
  .btn_amazon a:hover {
    opacity: 0.5;
    background-color:#f2f2f2;
  }
  .fa-amazon {
    display: inline-block;
  }
  #id_pw {
    text-align: center;
    clear: both;
  }
  #id_pw h3 {
  font-size: 1.1em;
  font-weight: 700;
  font-feature-settings: "palt";
  color: #000;
  margin-bottom: 10px;
 }
 /* SAMPLE ページ内リンク */
 .works-nav {
 	margin-top: 30px;
 }
 .works-nav ul {
 	text-align: center;
 	margin-left: -10px;
 	font-size: 0.9em; /* タグ改行時の空白防止 */
  font-feature-settings: "palt";
 }
 .works-nav ul li{
 	display: inline-block;
 	margin: 10px 7px 0 7px;
 	background-color: #e2e2e2;
 	height: 44px;
 	border-radius: 22px;
 }
 .menu a {
 	display: block;
 	text-decoration: none;
 	color: #000;
 	padding: 0 20px;
 	line-height: 44px;
  }
 .menu :hover {
   opacity: 0.5;
 	background: #f2f2f2;
 	border: #e2e2e2;
   border-radius: 22px;
 }
 /* SAMPLE ページ移動リンク */
 .page-nav {
   display: inline-block;
 	text-align: center;
 	font-size: 0.9em; /* タグ改行時の空白防止 */
   font-feature-settings: "palt";
 	margin: 10px 7px 0 7px;
 	background-color: #cddfea;
 	height: 44px;
 	border-radius: 22px;
 }
 .page-nav a {
 	display: block;
 	text-decoration: none;
 	color: #000;
 	padding: 0 20px;
 	line-height: 44px;
  }
 .page-nav :hover {
   opacity: 0.5;
   background-color: #e3eef4;
   border-radius: 22px;
 }
    /*================================================
   *  コンタクトフォーム（CONTACT）
   ================================================*/
#contact-form-intro h3 {
     font-size: 1.2em;
     font-weight: 700;
     font-feature-settings: "palt";
     margin: 0 0 20px;
     text-align: center;
  }
 #contact-form-intro {
	padding-top: 10px;
    text-align: left;
  }
   #contact-form {
     margin-top: -30px;
     padding: 0 20px 70px;
   }
  #contact-form dl dt {
    display:block;
    padding: 20px 0 10px;
  }
  #contact-form dl dd {
    display:block;
    padding-bottom: 20px 0 10px;
  }
  #contact-form .form-control {
    padding: 13px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    width: 93%;
    font-size: 1em;
  }
  #contact-form h4 {
    text-align: center;
	padding-top: 50px
  }
   /* コンタクトフォーム用グラデーションボタン */
   .btn_submit {
     display: block;
     width: 184px;
     height: 46px;
     background-image: url(../img/common/btn_sml_bg.png);
     background-repeat: no-repeat;
     border-radius: 23px;
     border-style: none;
     text-align: center;
     margin: 40px auto 0px;
     color: #fff; /*文字を白に*/
     font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
     font-size: 1.1em;
     font-weight: 700;
     line-height: 46px;
     text-decoration: none; /*下線消す*/
   }
  .btn_submit:hover {
     background-image: url(../img/common/btn_sml_hover.png);
     background-repeat: no-repeat;
   }

/*================================================
 *  ページ末尾のお問い合わせエリア
 ================================================*/
/* お問い合わせエリア */
#contact {
    width: 100%;
    background-image: url(../img/common/contact_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 50px 0;
    height: 500px; /* 固定高さ */
}

/* お問い合わせ全体を中央に配置 */
#contact .wrap {
    position: absolute;
    top: calc(50% + 30px); /* 全体を15px下に移動 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 必要に応じて調整可能 */
}

/* 見出し（h2）のスタイル */
#contact h2 {
    color: #fff; /* 白い文字色 */
    text-align: center;
    font-weight: bold; /* 太字 */
    margin-bottom: 30px; /* 下に余白 */
    position: relative;
}

/* 英文部分のスタイル */
#contact h2 .mid_heading_eng {
    display: block;
    font-family: "nimbus-sans";
    font-size: 2.8rem;
    letter-spacing: 2px;
    margin-bottom: 20px; /* 画像との間隔を調整 */
    font-weight: bold; /* 英語テキストを太字に */
    text-transform: uppercase; /* 英字は大文字に */
}

/* 日本語部分のスタイル */
#contact h2 .mid_heading_jpn {
    color: #fff;
    font-feature-settings: "palt";
    font-size: 1.2em; /* 必要に応じてフォントサイズ調整 */
    margin: 10px 0 50px;
}

/* 飾り画像（dot_border.png）のスタイル */
#contact h2 img {
    display: block;
    margin: 10px auto; /* 中央揃え */
}

/* 説明文の段落（p）のスタイル */
#contact p {
    color: #fff;
    text-align: center;
    margin: 50px 0 30px;
}

  /*================================================
 *  フッター
 ================================================*/
  #footer {
    padding: 0 0 50px 0;
    background: #e5ecf1;
    margin: -1px 0 0;
  }
  #footer p {
    clear: both;
    text-align: center;
    font-family: "nimbus-sans";
    font-size: 0.7em;
  }
  .foot-inner {
    width: 100%;
    margin: auto;
  }
  .footer-nav ul {
    list-style: none;
    font-family: "nimbus-sans";
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
    line-height: 50px;
  }
  .footer-nav ul li {
    float: none;
    padding: 0;
    border-bottom: 1px solid #bdd0de;
    text-align: center;
  }
  .footer-nav a {
    display: block;
    text-decoration: none;
  }
  .footer-nav a:hover {
    background: #999;
    color: #fff;
  }
  #sns {
	margin-top: 40px
	}
  #sns .fab {
    float: none;
    color: #333;
    padding: 25px 15px;
  }
  #sns.fab:hover {
    opacity: 0.7;
  }

  /*================================================
 *  SNSアイコン
 ================================================*/
/* フッターSNSアイコン */
#sns {
    text-align: center;
    padding: 0 13px 20px;
	font-size: 1.5em;
}

#sns a {
    font-size: 1.5em;
    text-align: center;
    padding: 0 13px 20px;
    margin-right: 20px; /* ボタン同士の間隔を20pxに設定 */
}

#sns a:last-child {
    margin-right: 0; /* 最後のリンクにはマージンを付けない */
}

#sns .fa-color {
    color: #333;
}

#sns .fa-color:hover {
    color: #777;
}
  /*================================================
 *  ページトップへ戻る
 ================================================*/
  .totop {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
  .totop a {
    display: block;
    text-decoration: none;
  }
  .totop a:hover {
    opacity: 0.7;
  }
  .totop img {
    background: #000;
  }
  /*================================================
 *  jQuery
 ================================================*/
  /* コンテンツふわっと出す　*/
  .scroll-fade {
    opacity: 0;
    transition: all 2s /*処理にかかる時間*/ ;
  }
  .scroll-up {
    opacity: 0;
    transform: translateY(100px) /*スクロールアップする距離*/ ;
    transition: all 2s /*処理にかかる時間*/ ;
  }
  .scroll-up.done, .scroll-fade.done {
    opacity: 1;
    transform: translate(0, 0);
  }
  .load-fade {
    opacity: 0;
    transition: all 2s /*処理にかかる時間*/ ;
  }
  .load-up {
    opacity: 0;
    transform: translateY(100px) /*スクロールアップする距離*/ ;
    transition: all 2s /*処理にかかる時間*/ ;
  }
  .load-up.done, .load-fade.done {
    opacity: 1;
    transform: translate(0, 0);
  }
	
/*================================================
 *  Worksリニューアル（スマートフォン版）
================================================*/
#first-wrap {
    padding: 5px 20px 45px;
}

/* hrタグのスタイルを調整して均等な余白を設定 */
.works-page hr {
    border: none; /* デフォルトの線を消去 */
    margin: 0px 20px 0px; 
   height: 1px;    /* 線の高さを指定 */
   background-color: #ddd; /* 線の色を設定 */
}
	
/* ギャラリーのコンテナ */
.gallery {
    display: grid;
    grid-template-columns: 1fr; /* 1列に調整 */
    gap: 30px; /* スペースを調整 */
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px; /* パディングをスマホ向けに調整 */
    box-sizing: border-box;
}

/* グリッドアイテム */
.grid-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit;       /* テキスト色を継承 */
    transition: transform 0.3s ease; /* ホバー時の拡大 */
    margin-bottom: 30px; /* 下部のスペースを調整 */
}

.grid-item:hover {
    transform: scale(1.02); /* ホバー時に少し拡大 */
}

/* サムネイルエリア */
.thumbnail {
    position: relative;
    height: 180px; /* 高さをスマホ向けに調整 */
    overflow: hidden;
    border: 1px solid #ccc; /* 境界線の調整 */
    box-sizing: border-box;
	border-radius: 10px;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* ホバー時のオーバーレイ */
.thumbnail .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4); /* オーバーレイの透明度を少し調整 */
    color: #fff;
    font-size: 1.3rem; /* フォントサイズを小さめに調整 */
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-item:hover .thumbnail img {
    filter: grayscale(100%);
}

.grid-item:hover .hover-overlay {
    opacity: 1;
}
	
/* スマートフォン用のグラフィックサムネイルエリア */
.graphic-thumbnail {
    position: relative;
    height: auto; /* 高さを自動調整 */
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 10px; /* スマホ向けに角を少し丸める */
    display: flex;
    justify-content: center;
    align-items: center;
}

.graphic-thumbnail img {
    width: 100%;
    height: auto; /* スマホでは高さを自動で調整 */
    object-fit: contain; /* 全体が収まるように */
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* ホバー時のオーバーレイ */
.graphic-thumbnail .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4); /* 透明度を調整 */
    color: #fff;
    font-size: 1.3rem; /* フォントサイズをスマホ向けに小さく */
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ホバー時の効果 */
.graphic-thumbnail:hover img {
    filter: grayscale(100%);
    opacity: 0.9;
}

.graphic-thumbnail:hover .hover-overlay {
    opacity: 1;
}

/* メディアクエリでスマートフォン専用のスタイル */
@media screen and (max-width: 768px) {
    .graphic-thumbnail {
        height: 180px; /* スマホ向けの高さを指定 */
    }

    .graphic-thumbnail img {
        object-fit: cover; /* 必要に応じてフィット方法を変更 */
    }

    .graphic-thumbnail .hover-overlay {
        font-size: 1.3rem; /* より小さい画面に合わせて文字サイズを調整 */
    }
}

/* テキストエリア */
.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 左揃え */
    padding: 0; /* 左右の余白を削除 */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    transition: color 0.3s ease;
    text-align: left;
    width: 100%; /* 幅を全体に */
}

/* テキスト行 */
.text p {
    font-size: 1.2rem; /* フォントサイズを小さめに */
    font-weight: normal;
    text-decoration: none; /* 初期状態で下線なし */
}

/* 真ん中の行 */
.text p:nth-child(2) {
    font-size: 1.5rem; /* 少し大きめに設定 */
    text-decoration: underline; /* アンダーライン追加 */
    padding-bottom: 3px;
}

/* ホバー時もアンダーラインを維持 */
.grid-item:hover .text p:nth-child(2) {
    text-decoration: underline;
}

/*================================================
 *  Works 実績詳細ページ (スマホ用)
================================================*/
/* works-item専用の.wrapスタイル */
.works-item .wrap {
    padding: 10px 20px 20px; /* 必要に応じて独自の値を設定 */
}
	
/* パンくずリスト */
.breadcrumb {
  margin: 50px 0 0; /* ヘッダー分の余白を調整 (80px -> 30px) */
  font-size: 1.1rem;
}

/* ページタイトル */
.works-item h2 {
  text-align: center;
  margin: 20px 0 20px; /* パンくずリストとの間隔を狭める (20px -> -80px) */
  font-size: 2rem;
  font-weight: 700;
}

/* データ群ブロック */
.data-block {
  margin: 0px auto 0px; /* h2との間隔を狭める (0px -> -50px) */
  border-top: 1px solid #ccc; /* 一番上の罫線を追加 */
  padding-top: 15px; /* 罫線と最初のテキストの間隔を調整 */
}

/* データ項目 */
.data-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc; /* グレーの罫線 */
}

/* h3 と p の横幅設定 */
.data-item h3 {
  width: 25%;
  margin: 0;
  font-size: 1.5rem;
  font-family: "nimbus-sans";
  font-weight: 400;
  text-transform: uppercase;
  text-align: left; /* 左寄せ */
}

.data-item p,
.data-item ul {
  width: 75%;
  margin: 0;
  text-align: left; /* 左寄せ */
  word-wrap: break-word; /* 古いブラウザ用 */
  overflow-wrap: break-word; /* モダンブラウザ用 */
  word-break: break-all; /* 必要に応じて強制改行も追加 */
}

.link {
  text-decoration: underline;
  transition: text-decoration 0.3s;
}

.link:hover {
  text-decoration: none;
}

.link {
  text-decoration: underline;
  transition: text-decoration 0.3s;
}

.link:hover {
  text-decoration: none;
}

/* 画像ギャラリー エリア */
.image-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    background-color: #f6f6f6;
    margin: 0 auto;
    gap: 20px; /* アイテム間の余白 */
    /* paddingを削除 */
}

/* ギャラリーアイテム PC画像配置 */
.image-item-pc {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px; /* PC画像専用の余白を追加 */
}

/* ギャラリーアイテム SP画像配置 */
.image-item-sp {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0; /* SP画像専用の余白を追加 */
}

/* ギャラリー画像 PC画像 */
.image-item-pc img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ギャラリー画像 SP画像 */
.image-item-sp img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ギャラリーアイテム グラフィックデザイン配置 */
.image-item-graphic {
    flex: 1 1 100%; /* 横幅全体を使用 */
    max-width: 100%; /* 最大幅を制限 */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    overflow: hidden; /* エリア外を隠す */
    padding: 0; /* グラフィックデザイン専用で余白をなくす */
}

/* ギャラリー画像 グラフィックデザイン */
.image-item-graphic img {
    width: 100%; /* 横幅いっぱいに表示 */
    height: auto; /* アスペクト比を維持 */
    display: block;
}

	
/* 実績一覧に戻るボタン */
.button-container {
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 子要素を中央揃え */
    margin: 20px 0 50px; 
}

.return-button {
    display: inline-block; /* 内容に合わせたサイズ */
    padding: 10px 50px; /* ボタン内の余白 */
    text-align: center; /* テキストを中央揃え */
    background-color: #d0e2e9; /* 元の背景色 */
    color: #000; /* 元のテキスト色 */
    font-size: 16px; /* 適切なフォントサイズ */
    border-radius: 30px; /* 元の丸み */
    text-decoration: none; /* リンクの下線を削除 */
    white-space: nowrap; /* テキストが折り返されないようにする */
    transition: opacity 0.3s ease; /* 透明度の変化をスムーズに */
}

.return-button:hover {
    opacity: 0.7; /* ホバー時に少し透明になる */
}
	
/* ページ末尾のコンタクトエリアレイアウト崩れ修正 */
.works-item, #contact .wrap h2 {
	margin: 10px 0 0;
  font-size: 1.5rem;
}
	
}