@charset "utf-8";
/* CSS Document */
@media screen and (min-width:769px) {
  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.8;
    letter-spacing: 0.5px;
  }
 p {
    color: #000;
}

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

a:hover {
    text-decoration: none; /* hover時に下線を消す */
}
  .wrap {
    clear: both;
    box-sizing: border-box;
    width: 1000px;
    margin: 0 auto;
    padding: 30px 0 90px;
    color: #000000;
  }
#intro {
    padding: 0px 0 100px; /* introセクションのみに適用 */
}
hr {
    clear: both;               /* 他の要素と重ならないようにする */
    width: 100%;                /* 幅を100%に設定して親要素に合わせる */
    max-width: 1000px;          /* 最大幅を1000pxに制限 */
    margin: 20px auto;          /* 上下にスペースを確保、中央寄せ */
    height: 1px;                /* 高さを1pxに設定 */
    border: none;               /* デフォルトの枠線を無効にする */
    background-color: #ddd;     /* 色を#cccに設定 */
}
  /*================================================
 *  ヘッダー
 ================================================*/
  /* グローバルメニュー初期表示 */
  .inner {
    width: 1000px;
    margin: 0 auto;
  }
  .inner:after {
    content: "";
    clear: both;
    display: block;
  }
  /* header */
  #top-head {
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 5px 0 0;
    z-index: 999;
  }
  #top-head a, #top-head {
    font-family: "nimbus-sans";
    color: #fff;
    text-decoration: none;
  }
  #top-head .inner {
    position: relative;
  }
  #top-head .header_logo_wht a {
    text-indent: -9999px;
    display: block;
    width: 261px;
    height: 53px;
    background: url("../img/common/logo_wht.svg") no-repeat 0 0;
    background-size: contain;
    float: left;
    margin-top: 2px;
  }
  #top-head .header_logo_wht a:hover {
    opacity: 0.7;
  }
  #global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1em;
    font-weight: 700;
  }
  #global-nav ul li {
    float: left;
  }
  #global-nav ul li a {
    margin-left: 30px;
  }
  /* Fixed スクロールで出現するグローバルメニュー */
  #top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.8);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
  }
  #top-head.fixed .header_logo a {
    text-indent: -9999px;
    display: block;
    width: 261px;
    height: 53px;
    background: url("../img/common/logo.svg") no-repeat 0 0;
    background-size: contain;
    float: left;
  }
  #top-head.fixed #global-nav ul li a {
    color: #333;
    margin-left: 30px;
  }
  #top-head.fixed .header_logo a:hover, #global-nav ul li a:hover {
    opacity: 0.7;
  }

#top-head .inner {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: space-between; /* ロゴとメニューの間隔を調整 */
  height: 80px; /* グローバルメニューの高さに合わせる */
}

#top-head .header_logo_wht a,
#top-head.fixed .header_logo a {
  margin-top: 0; /* margin-topの調整をリセット */
  align-self: flex-start; /* 必要に応じて微調整可能 */
}

#global-nav ul {
  margin: 0;
  padding: 0;
  display: flex; /* 横並び配置 */
  align-items: center; /* 縦方向の中央揃え */
  height: 80px; /* グローバルメニューの高さに合わせる */
}

 
  /*================================================
 *  見出し回り
 ================================================*/
/* 見出しのスタイル */
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";
    margin-bottom: 10px; /* 画像との間隔を調整 */
    font-weight: 700; /* 英語テキストを太字に */
    text-transform: uppercase; /* 英字は大文字に */
    letter-spacing: 2px;
}

/* 日本語の見出し部分 */
h2.scroll-up .mid_heading_jpn, h2.load-fade .mid_heading_jpn {
    display: block; /* 日本語テキストもブロック要素 */
    font-weight: 700; /* 日本語テキストは普通の太さに */
    font-size: 2rem; /* 日本語フォントサイズを調整 */
    margin: 20px 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.6em;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
    margin-bottom: -10px;
    text-align: center;
  }
h3 .sub_heading_jpn {
    display: block;
    font-feature-settings: "palt";
    font-size: 0.9em;
    font-weight: 500;
    color: #000;
    margin-bottom: 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     : auto;
  margin     : auto;
  overflow   : hidden;
  background-image: url("../img/home/cover_home.jpg");
  background-position: 50% 0px;
  background-repeat: no-repeat;
}

/* 親要素の中央揃えと下部余白 */
.boxString {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  margin-top: 100px;
  align-items: center; /* 水平方向の中央揃え */
  text-align: center; /* 中央揃え */
}

/* スライダー上のタイトル */
p .title {
  color: #fff;
  font-family: "nimbus-sans-extended", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 4.5em;  /* 文字サイズを大きく調整 */
	line-height: 1.5em;
  font-feature-settings: "palt";
  text-align: center;  /* 中央揃え */
  display: inline-block;  /* インラインブロックにする */
  box-sizing: border-box;  /* パディングの影響を含めて幅を計算 */
	padding: 40px 0;
}
	
/* スライダー上のカード */
.boxString img {
padding-top: 30px;
  width: 700px;
  height: auto;
}

/*================================================
*  ページトップ　タイトル部（下層ページ）
================================================*/
#page-title {
    overflow: visible;
    width: 100%;
    height: 610px;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: 70px;
}
 .about-title-bg {
    background-image: url("../img/about/cover_about.jpg");
    background-position: 50% 0px;
    background-repeat: no-repeat;
  }
  .service-title-bg {
      background-image: url("../img/service/cover_service.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
    }
  .price-title-bg {
      background-image: url("../img/price/cover_price.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
    }
  .works-title-bg {
      background-image: url("../img/works/cover_works2.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
    }
  .sample-title-bg {
      background-image: url("../img/works/cover_sample.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
      }
  .print_media-title-bg {
      background-image: url("../img/works/cover_sample2.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
      }
.contact-title-bg {
      background-image: url("../img/contact/cover_contact.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
    }
.thanks-title-bg {
      background-image: url("../img/contact/cover_thanks.jpg");
      background-position: 50% 0px;
      background-repeat: no-repeat;
    }
/* 親要素 .heading の設定 */
.heading {
    position: relative;
    display: flex;
    flex-direction: column; /* 英文画像と日本語タイトルを縦に並べる */
    justify-content: center; /* 縦方向中央揃え */
    align-items: center; /* 横方向中央揃え */
    text-align: center;
}

/* 英文字画像の設定 */
.page-title-en {
    width: auto; /* 画像の幅をそのまま */
    height: auto; /* 画像の高さを自動調整 */
    display: block; /* 画像をブロック要素として表示 */
}

/* 日本語タイトルのスタイル */
.page-title-jp {
    color: #fff;
    font-size: 1.8em; /* 文字を1.5倍に変更 */
    background-color: #000;
    padding: 0 8px;  /* 左右の余白を10pxに設定して帯に適度なゆとりを持たせる */
    font-feature-settings: "palt";
    font-weight: 700; /* 日本語タイトルに太字を適用 */
    margin-top: 10px; /* 英文タイトルとの間隔を調整 */
    display: inline-block;
    white-space: nowrap; /* 文字が折り返されないようにする */
    line-height: 1.4; /* 行の高さを少し増やして帯にゆとりを持たせる */
}


  /*================================================
 *  intro, vision
 ================================================*/
  #intro h3, #vision h3 {
    font-size: 1.9em;
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.4em;
    padding: 0 0 50px;
    text-align: center;
  }

 #intro img {
    padding-top: 50px;
display: block;
  margin: 0 auto;
  }
  /*================================================
 *  vision
 ================================================*/
#vision {
    clear: both;
    box-sizing: border-box;
    width: 1000px;
    margin: 0 auto;
    padding: 0px 0 100px;
    color: #000000;
  }
  /*================================================
 *  3カラム（HOME, SERVICE）
 ================================================*/
  /* 3カラム*/
  .f-container {
    display: flex;
    justify-content: space-between;
  }
  .f-item {
    flex-basis: 30%;
    text-align: center;
  }
.f-item img {
    display: inline-block; /* インラインブロック要素として扱うことで中央揃えが適用 */
    margin: 0 auto; /* 中央揃え */
    margin-bottom: 15px;
  }
  .f-item h3{
    line-height: 2.5em;
  }
  .f-item p {
    text-align: left
  }
  /* 営業品目リスト*/
  #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: 1000px;
  margin: 0 auto 0;
  padding-bottom: 100px;
}
.f-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}
/* Flow */
#flow-table table {
    width: 100%;
  }
#flow-table .table04 {
    border-top: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
  }
#flow-table .table04 tr {
    border-bottom: 1px solid #ccc;
  }
#flow-table .table04 td {
    border: none;
    text-align: left;
    vertical-align: middle;
    padding: 25px 13px;
  }
#flow-table .table04 th {
    text-align: left;
    padding: 25px 13px;
    width: 25%;
    font-weight: normal;
    background-color: #fff;
    font-weight: 700;
    font-feature-settings: "palt";
  }
  #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: 50px 0;
    border-bottom: 1px dotted #ccc;
  }
  #news ul li:first-child {
    border-top: 1px solid #ccc;
  }
  #news dl {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  #news dl dt {
    display: table-cell;
    vertical-align: top;
    width: 160px;
  }
  #news dl dd {
    display: table-cell;
    vertical-align: top;
  }
  .headline {
    font-size: 1.1em;
    font-weight: 700;
    font-feature-settings: "palt";
    padding-bottom: 15px;
  }
  /*================================================
 *  2カラム（ABOUT）
 ================================================*/
  #professional .f-container {
    display: flex;
    justify-content: space-between;
  }
  #professional .f-item {
    flex-basis: 48%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
  }
  #professional h3 {
    text-align: left;
    font-size: 1.1em;
    font-weight: 700;
    font-feature-settings: "palt";
    color: #000;
    margin-bottom: 10px;
  }
  #professional .reverse {
    display: flex;
    flex-flow: row-reverse;
  }
  #professional img {
    margin-bottom: 0;
  }
  /*================================================
 *  ボタンSNS（ABOUT）
 ================================================*/
  #profile .sns-btn {
    padding: 40px 0;
  }
  #profile .facebook {
    display: inline-block;
    background: #1877F2;
    margin-right: 20px;
    padding: 7px 30px 0px 20px;
    border-radius: 25px;
  }
  #profile .twitter {
    display: inline-block;
    background: #000;
    padding: 7px 10px 5px 20px;
    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）
 ================================================*/
/* BOX */
.prof-box {
   display: flex;
   width: 100%;
    }
.prof-box-l {
   width: 25%;
    }
.prof-box-r {
     width: 75%;
    }
/* BOX テキストリンク*/
  #profile.prof-box-r a {
font-weight: 500;
text-decoration: underline;
color: #000;
}
  #profile.prof-box-r a:hover {
text-decoration: none;
color: #000;
}
/* テーブル */
  #prof-table {
    width: 100%;
  }
  .table04 {
    border-top: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
  }
  .table04 tr {
    border-bottom: 1px solid #ccc;
  }
  .table04 td {
    border: none;
    text-align: left;
    vertical-align: middle;
    padding: 13px 3%;
  }
  .table04 th {
    text-align: center;
    padding: 13px;
    width: 22%;
    font-weight: normal;
    background-color: #f2f2f2;
  }
 /*================================================
 *  ボタン
 ================================================*/
 /* グラデーションボタン　大*/
 .btn {
   display: block;
   width: 240px;
   height: 60px;
   border-radius: 30px; /*角を丸くする*/
   background-image: url(../img/common/btn_bg.png);
   background-repeat: no-repeat;
   text-align: center;
   margin: 30px auto 0;
 }
 .btn a {
   display: block;
   color: #fff; /*文字を白に*/
   font-size: 1.1em;
   font-weight: 700;
   line-height: 60px;
   text-decoration: none; /*下線消す*/
 }
 .btn a:hover {
   background-image: url(../img/common/btn_hover.png);
   background-repeat: no-repeat;
 }
 /* グラデーションボタン　中*/
 .btn_sml {
   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 0;
 }
 .btn_sml a {
   display: block;
   color: #fff; /*文字を白に*/
   font-size: 1em;
   font-weight: 700;
   line-height: 46px;
   text-decoration: none; /*下線消す*/
 }
 .btn_sml a:hover {
   background-image: url(../img/common/btn_sml_hover.png);
   background-repeat: no-repeat;
 }
/*================================================
*  制作料金（PRICE）
================================================*/
/* 価格表 */
.table {
   clear: both;
   width: 100%;
}

.table-left {
   width: 460px;
   float: left;
}

.table-right {
   width: 460px;
   float: right;
}

.price-list {
   width: 100%;
   border-top: solid 1px #000;
}

.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: 100px; /* テーブル下の注釈に100pxの余白 */
}

 /*================================================
  *  制作実績（WORKS）
  ================================================*/
 .works-left {
   float: left;
   width: 45%;
   text-align: center;
   padding-bottom: 100px;
  }
  .works-left img {
    max-width: 100%;
    height: auto;
   }
 .works-right {
   float: right;
   width: 50%;
  }
.works-right img {
    max-width: 100%;
    padding-bottom: 20px;
   }

 .works-right h3 {
   text-align: left;
   font-size: 1.1em;
   font-weight: 700;
   color: #000;
   font-feature-settings: "palt";
   margin-bottom: 10px;
 }
 .btn_amazon {
   display: block;
   text-align: center;
   width:100%;
   height:50px;
   border-radius:25px;
   background-color: #e2e2e2;
   margin: 20px 0 0 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 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;
  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 {
   margin: -60px auto 50px;
   padding-bottom: 70px;
   width: 700px;
 }
#contact-form-intro h3 {
	margin: -70px 0 50px;
    font-size: 1.9em;
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.4em;
    text-align: center;
  }
 #contact-form-intro {
    width: 700px;
    text-align: left;
  }

 #contact-form ul li {
   padding:20px 0;
   border-bottom:1px
   dotted #ccc;
 }
 #contact-form ul li:first-child {
   border-top:1px
   dotted #ccc;
 }
 #contact-form dl {
   display:table;
   table-layout:fixed;
   width:100%;
 }
 #contact-form dl dt {
   display:table-cell;
   vertical-align:top;
   width:200px;
 }
 #contact-form dl dd {
   display:table-cell;
   vertical-align:top;
 }
 #contact-form .form-control {
   padding: 10px;
   background: #f9f9f9;
   border: 1px solid #ccc;
   width: 100%;
 }
 #contact-form .privacy {
   padding: 100 0 20px;
 }
 #contact-form h4 {
   text-align: center;
	padding-top: 40px
 }
 /* コンタクトフォーム用グラデーションボタン */
 .btn_submit {
   display: block;
   width: 240px;
   height: 60px;
   background-image: url(../img/common/btn_bg.png);
   background-repeat: no-repeat;
   border-style: none;
   text-align: center;
   margin: 30px auto 50px;
   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: 60px;
   text-decoration: none; /*下線消す*/
 }
.btn_submit:hover {
   background-image: url(../img/common/btn_hover.png);
   background-repeat: no-repeat;
 }

 /*================================================
 *  ページ末尾のお問い合わせエリア
 ================================================*/

/* お問い合わせエリア */
#contact {
  width: 100%;
  height: 500px;
  background-image: url(../img/common/contact_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  padding: 30px 0 0; 
  box-sizing: border-box;
  display: flex; /* フレックスボックスで配置 */
  align-items: center; /* 垂直方向のセンタリング */
  justify-content: center; /* 水平方向のセンタリング */
  text-align: center;
}

/* 英語の見出し (CONTACT) */
#contact h2 .mid_heading_eng {
  color: #fff; /* 白文字 */
  display: block;
  font-family: "nimbus-sans";
  font-size: 5rem;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 日本語の見出し (お問い合わせ) */
#contact h2 .mid_heading_jpn {
  color: #fff; /* 白文字 */
  display: block; /* 日本語テキストもブロック要素 */
  font-weight: 700; /* 日本語テキストは普通の太さに */
  font-size: 2rem; /* 日本語フォントサイズを調整 */
  margin: 20px 0 50px;
}

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

/* お問い合わせエリア内の段落 (p) */
#contact p {
  color: #fff; /* 白文字 */
  font-size: 1.1em;
  font-feature-settings: "palt";
}

/* お問い合わせエリア内のコンテンツ全体のコンテナ */
#contact .contact-container {
  max-width: 800px; /* 最大幅を指定してレイアウトを整える */
  margin: 0 auto;
}
	
  /*================================================
 *  フッター
 ================================================*/
  /* フッターエリア　*/
  #footer {
    width: 100%;
    background: #e5ecf1;
    margin: 0 auto;
    padding: 20px 0;
  }
  #footer p {
    clear: both;
    font-size: 0.8em;
    text-align: center;
  }
  /* フッターナビ　*/
  .footer-nav {
    font-family: "nimbus-sans";
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
  }
  .footer-nav ul {
    list-style-type: none;
    padding-left: 0;
  }
  .footer-nav li {
    display: inline-block;
    vertical-align: middle;
    padding: 15px;
  }
  .footer-nav li a {
    color: #000;
    text-decoration: none;
    text-align: center;
    display: table;
    width: 100%;
  }
  .footer-nav li a:hover {
    opacity: 0.6;
  }


/*================================================
 *  フッターSNSアイコン
 ================================================*/

/* フッターSNSアイコン */
#sns {
  text-align: center; /* アイコン全体を中央揃え */
}

#sns a {
  display: inline-block; /* アイコンをインラインブロック要素として扱う */
  margin: 0 10px 20px; /* 左右に20pxずつのマージンを設定（合計40pxの間隔） */
  font-size: 2.5em; /* アイコンのサイズ */
  color: #333; /* 通常時のアイコンカラー */
  text-decoration: none; /* リンクの下線を削除 */
}

#sns a:hover {
  color: #777; /* ホバー時のアイコンカラー */
}
	
/*================================================
 *  ページトップへ戻る
 ================================================*/

.totop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.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);
  }
  /*================================================
 *  ボタン
 ================================================*/
  /* グラデーションボタン　大*/
  .btn {
    display: block;
    width: 240px;
    height: 60px;
    border-radius: 30px; /*角を丸くする*/
    background-image: url(../img/common/btn_bg.png);
    background-repeat: no-repeat;
    text-align: center;
    margin: 30px auto 0;
  }
  .btn a {
    display: block;
    color: #fff; /*文字を白に*/
    font-size: 1.1em;
    font-weight: 700;
    line-height: 60px;
    text-decoration: none; /*下線消す*/
  }
  .btn a:hover {
    background-image: url(../img/common/btn_hover.png);
    background-repeat: no-repeat;
  }
  /* グラデーションボタン　中*/
  .btn_sml {
    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 0;
  }
  .btn_sml a {
    display: block;
    color: #fff; /*文字を白に*/
    font-size: 1em;
    font-weight: 700;
    line-height: 46px;
    text-decoration: none; /*下線消す*/
  }
  .btn_sml a:hover {
    background-image: url(../img/common/btn_sml_hover.png);
    background-repeat: no-repeat;
  }
	

  /*================================================
 *  ページトップへ戻る
 ================================================*/
  .totop {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
  .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: 0px 0px 90px;
}
	
.works-page .wrap > .scroll-up {
    margin-top: -20px; /* 上に20px移動 */
}
	
/* 「ウェブデザイン」セクションの下に余白を追加 */
.works-page .wrap:first-of-type {
    margin-bottom: 10px; /* 必要に応じて調整 */
}

/* hrタグのスタイルを調整して均等な余白を設定 */
hr {
    clear: both;               /* 他の要素と重ならないようにする */
    width: 100%;                /* 幅を100%に設定して親要素に合わせる */
    max-width: 1000px;          /* 最大幅を1000pxに制限 */
    height: 1px;                /* 高さを1pxに設定 */
    border: none;               /* デフォルトの枠線を無効にする */
    background-color: #ddd;     /* 色を#cccに設定 */
}

/* またはhrの上下に特定の余白を設定 */
.works-page hr {
    margin-top: 10px; /* 上の余白 */
    margin-bottom: 50px; /* 下の余白 */
}
	
/* ギャラリーのコンテナ */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0 0;
    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; /* ホバー時の拡大（任意） */
}

.grid-item:hover {
    transform: scale(1.02); /* グリッド全体を少し拡大（任意） */
}

/* ウェブサイト用のサムネイルエリア */
.thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
    border: 1px solid #ccc; /* 境界線を#F2F2F2に設定 */
    box-sizing: border-box; /* 境界線をエリアサイズに含む */
	border-radius: 7px;
}

.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.3);
    color: #fff;
	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: 200px;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

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

.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.3);
    color: #fff;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

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

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

/* テキストエリアのスタイル */
.text {
    display: flex;
    flex-direction: column; /* 縦並びに配置 */
    justify-content: center;
    align-items: flex-start; /* 左揃え */
    height: auto; /* 高さを自動調整 */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    transition: color 0.3s ease;
    text-align: left; /* 左揃え */
}

/* テキストの行を指定する */
.text p {
    font-size: 1.2rem;
    font-weight: normal; /* デフォルトの太さ */
    text-align: left; /* 左揃え */
}

/* 真ん中の行のスタイル */
.text p:nth-child(2) {
    font-size: 1.55rem;
    text-align: left; /* 左揃え */
    text-decoration: underline; /* アンダーラインを追加 */
    transition: text-decoration 0.3s ease; /* アンダーラインの変化を滑らかに */
    padding-bottom: 3px;
}

/* グリッドアイテムのホバー時に真ん中の行のアンダーラインを消す */
.grid-item:hover .text p:nth-child(2) {
    text-decoration: none; /* アンダーラインを消す */
}
	
/*================================================
 *  Works 実績詳細ページ
================================================*/
/* works-item専用のスタイル */
.works-item #global-nav ul li a {
  color: black;
}

.works-item #top-head .header_logo_wht a {
  background: url("../img/common/logo.svg") no-repeat 0 0; /* 差し替え画像 */
  background-size: contain;
}

.works-item #top-head {
  height: 80px;
  border-bottom: 1px solid #e0e0e0 !important;
}
	
/* works-item専用の.wrapスタイル */
.works-item .wrap {
    padding: 10px 0 20px; /* 必要に応じて独自の値を設定 */
}
	
/* パンくずリスト */
.breadcrumb {
  margin: 90px 0 0; /* ヘッダー分の余白を調整 (80px -> 30px) */
  font-size: 1.3rem;
}

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

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

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

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

.data-item p,
.data-item ul {
  width: 80%;
  margin: 0;
  text-align: left; /* 左寄せ */
}

.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: 1000px;
    background-color: #f6f6f6;
    margin: 0 auto 0;
    gap: 20px; /* 内容物同士の間隔を50px */
}

/* ギャラリーアイテム ウェブサイト PC画像配置*/
.image-item-pc {
    flex: 1 1 calc(50% - 50px); /* 50%幅に設定し、間隔を考慮 */
    max-width: calc(50% - 50px); /* 最大幅を50%から50pxの間隔を引いた値 */
    border-radius: 8px; /* 角を丸める */
    display: flex;
    align-items: flex-start; /* 上端揃え */
    justify-content: center;
    margin: 50px 0; /* 上下に100pxの空きを確保 */
}

/* ギャラリー画像 ウェブサイト PC画像*/
.image-item-pc img {
    width: 400px;
    height: auto;
    display: block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* 画像に影を追加 */
    border-radius: 4px; /* 画像の角も少し丸める */
}
	
/* ギャラリーアイテム ウェブサイト SP画像配置*/
.image-item-sp {
    flex: 1 1 calc(50% - 50px); /* 50%幅に設定し、間隔を考慮 */
    max-width: calc(50% - 50px); /* 最大幅を50%から50pxの間隔を引いた値 */
    border-radius: 8px; /* 角を丸める */
    display: flex;
    align-items: flex-start; /* 上端揃え */
    justify-content: center;
    margin: 50px 0; /* 上下に100pxの空きを確保 */
}

/* ギャラリー画像 ウェブサイト SP画像*/
.image-item-sp img {
    width: 300px;
    height: auto;
    display: block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* 画像に影を追加 */
    border-radius: 20px; /* 画像の角も少し丸める */
}
	
/* ギャラリーアイテム グラフィックデザイン配置 */
.image-item-graphic {
    flex: 1 1 100%; /* 横幅全体を使用する */
    max-width: 100%; /* 最大幅をコンテナ内で制限 */
    border-radius: 8px; /* 角を丸める */
    display: flex;
    align-items: center; /* 垂直方向で中央揃え */
    justify-content: center; /* 水平方向で中央揃え */
    margin: 0; /* 余白を削除 */
    overflow: hidden; /* エリアからはみ出す部分を隠す */
}

/* ギャラリー画像 グラフィックデザイン */
.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: 0px 0 0px;
}

.works-item, #contact .wrap p {
	margin: 0px 0 20px;
}
	
}