/*GOOGLEフォント(Kiwi MaruStatic)*/
.kiwi-maru-regular {
font-family: "Kiwi Maru", serif;
font-weight: 400;
font-style: normal;
color: #3F3F3F;
}


/*GOOGLEフォント*/
.benne-regular {
  font-family: "Benne", serif;
  font-weight: 400;
  font-style: normal;
}



/*GOOGLEフォント*/
.cormorant-garamond {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight:normal;
  font-style: normal;
}

/*GOOGLEフォント*/
.passions-conflict-regular {
  font-family: "Passions Conflict", cursive;
  font-weight: 400;
  font-style: normal;
}


/*----------カルーセルスクロール用----------*/
  .carousel-container {
  overflow-x: scroll;
  scroll-behavior: auto;
  white-space: nowrap;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  }

  .carousel-container::-webkit-scrollbar {
  display: none;
  }

  .carousel-track {
  display: flex;
  font-size: 0.8rem;
  color:#a2a2a2;
  }

  .carousel-item {
  flex: 0 0 33.33%;
  min-width: 33.33%;
  box-sizing: border-box;
  padding: 10px;
  /* border: 5px solid #fafafa; */
  background: #fff;
  text-align: center;
  }
  .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  }
/*----------カルーセルスクロール用 ここまで----------*/



/*----------カルーセルスクロールサムネ用---------*/
.carousel-thumbs {
	margin: 10px auto 0;
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	gap: 20px;
  max-width: 900px;   /* ← 全体サイズ調整 */
}

.carousel-thumbs img {
	width: 100%;
	height: auto;   /* ← 念のため明示 */
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
	display: block;
}

.carousel-thumbs img:hover {
	opacity: 1;
}

/*----------カルーセルスクロールサムネ用 ここまで----------*/











/*----------固定申し込みボタン----------*/
.sticky-btn {
  position: fixed;
  left: 50%;
  bottom: 16px;              /* 下から少し浮かせる */
  transform: translateX(-50%);
  
  background: rgba(225, 195, 165, 0.9); 
  color: #fff;
  
  padding: 14px 24px;
  font-size: 1rem;
  border-radius: 999px;      /* 丸 pill 型 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 浮いてる影 */
  
  z-index: 9999;
  border: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sticky-btn.hide {
  opacity: 0;
  pointer-events: none; /* 消えてるときはタップできない */
  transform: translateX(-50%) translateY(12px);  /* ちょい下に下がって消える感じ */
}
/*----------固定申し込みボタン ここまで----------*/






/*----------WD用メニューボタン----------*/
  /* ▼ ポップアップの背景（初期は非表示） */
  .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 10000;
  }

  /* ▼ 中の小さいカード */
  .popup-inner {
    background: rgba(225, 195, 165, 0.9); 
    padding: 24px;
    border-radius: 16px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transform: translateY(20px);
    transition: transform .3s ease;
    text-align: center;
  }

  .WDmenu-title{
    color: #ffffff; 
    font-size: 4rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .popup-inner ul { 
    padding: 0; 
  }
  .popup-inner ul li {
    border-bottom: solid 0px #fff;
    list-style: none;
    font-size: 1rem; 
    line-height: 2rem;
  }
  .WDmenu-list{
    text-decoration: none; /* アンダーラインを消す */
  }
  .WDmenu-list:link { color: #ffffff; }
  .WDmenu-list:visited { color: #ffffff; }
  .WDmenu-list:hover { color:rgba(227, 225, 221, 0.9);  }
  .WDmenu-list:active { color: #ffffff; }


  /* ▼ 表示状態 */
  .popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  .popup-overlay.show .popup-inner {
    transform: translateY(0);
  }

  /* 閉じるボタン等 */
  .close-btn {
    margin-top: 16px;
    background: #ffffff;
    color: rgba(225, 195, 165, 0.9); ;
    padding: 10px 14px;
    border-radius: 30px;
    border: none;
    font-size: 1.0rem;
  }
  /* ▼ メニューボタン：左下固定 */
  .WDmenu-btn {
    position: fixed;
    left: 16px;       /* 左寄せ */
    bottom: 16px;     /* 申し込みボタンと同じ高さ */
    
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(225, 195, 165, 0.9); 
    border: 0px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-direction: column;
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .WDmenu-btn:hover {
    background: rgba(222, 212, 202, 0.9);
  }

  /* 三本線の見た目 */
  .WDmenu-btn span {
    display: block;
    width: 22px;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
  }

/*----------WD用メニューボタンここまで----------*/
















  

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  /*  background: #fafafa; */
  color: #3F3F3F;
  /* background-image: url("../products/007_ouchi_animal/images/backglound.png"); */
  background-repeat: repeat-y;          /* ← 縦にリピート */
  background-size: 100% auto;           /* ← 横幅100%、縦は自動（元の比率） */
  background-position: top center;      /* ← 真ん中揃え */
  background-attachment: fixed;        /* ← 固定 */
}

.topImg{
  position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden; /* はみ出た部分を隠す */
}

.topImg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像のアスペクト比を維持して表示 */
}

.topImg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  width: 400px; /* ロゴ画像の表示サイズ（調整OK） */
}

.topImg-logo img {
  width: 100%;
  height: auto;
  display: block;
}



.topImg-comments {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  font-size: 0.7rem;
  color: #ffffffc7;
  width: 90%;
}


.topText{
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0rem;
  line-height: 2rem;
  margin-top: 5rem;
  margin-bottom: 0rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 690px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 2rem;
  font-weight:lighter;
  margin-bottom: 2rem;
  text-align: center;
  line-height: 3rem;
}

.section {
  margin-top: 10rem;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}

.section h2 {
  font-size: 1.4rem;
  font-weight: lighter;
  margin-top: 0.5rem;
  margin-bottom: 5.0rem;
  border-bottom: 0px dotted #626262;
  padding-left: 00px;
  text-align: center;
  font-family:'Times New Roman', Times, serif
}

h3{
  font-size: 9.5rem;
  text-align: center;
  padding-top: 2.5rem;
  margin-bottom: 0em;
  /* color: rgb(132, 187, 218); */
  line-height: 1;
}

.title-line{
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #d4d4d4;
}
.section p {
  margin-bottom: 1rem;
  letter-spacing: 0rem;
  line-height: 2rem;
  font-size: 1rem;
}

.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 1rem;
}

.image-box {
  flex: 1 1 calc(33.333% - 16px);
  background: #fafafa;
  border: 0px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: small;
  color: #a2a2a2;
}

.image-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}


.image-box4 {
  flex: 1 1 calc(25% - 16px);
  background: #fff;
  border: 0px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: small;
  color: #a2a2a2;
}
.image-box4 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}


.image-box2 {
  flex: 1 1 calc(25% - 16px);
  background: #fff;
  border: 0px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: small;
  color: #a2a2a2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-box2 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
  object-fit: cover;
}
.image-box2:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}




ol li {
border-bottom: dashed 1px #CCCCCC;
padding: 0.5em;
}
ul li {
border-bottom: dashed 1px #CCCCCC;
padding: 0.5em;
}

.breadcrumb_area ul li {
border-bottom:none;
}




#miniText {
  font-size: 0.8rem;
  line-height: 1.3rem;
}





/*----------テキスト+画像並びボックスDesign2----------*/

.D2content-wrapper {
  display: grid;
  grid-template-areas:
  /* "title image" */
    "text  image";
  grid-template-columns: 50% 50%;
  gap: 20px 80px;
  align-items: start;
}
.D2content-wrapper h2{
    text-align: left;
  }

/* グリッドエリアの割当 */
.D2title-box {
  grid-area: title;
  align-self: end;
}
.D2text-box {
  grid-area: text;
  align-self: start;
}
.D2image-box {
  grid-area: image;
}
.D2image-box img {
    width: 100%;
    height: 300px; 
    object-fit: cover;
    border:none;
    border-radius: 0px;
}



/*----------納品形式用----------*/
 #file_format{
    width: 690px;
    margin-left: auto;
    margin-right: auto;
  }



/*----------制作料金用----------*/
.fee-table {
  width: 100%;
  border-collapse: collapse;
}

.fee-table th,
.fee-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.fee-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}
/*----------制作料金用ここまで----------*/




/*----------利用規約用----------*/
  #terms{
    width: 690px;
    margin-left: auto;
    margin-right: auto;
  }
  .terms-line {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    border-bottom: 1px solid #3F3F3F;
    padding-bottom: 12px;
  }

  .terms-dashedline {
    border-bottom: 1px dashed #CCCCCC;
  }

  .terms-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .term-item {
    /*border-bottom: 1px dashed #CCCCCC;*/
    padding-bottom: 12px;
  }

  .term-header {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
  }

  .term-num {
    font-weight: 700;
    font-size: 16px;
    margin-right: 8px;
  }

  .term-label {
    font-weight: 700;
    font-size: 16px;
  }

  .term-text p {
    font-size: 0.9em;
    line-height: 1.6em;
  }

  .term-text ul li {
    font-size: 0.9em;
    line-height: 1.0em;
    border-bottom: none;
    padding: 0.5em;
  }
/*----------利用規約用ここまで----------*/

#trading h2{
  margin-bottom: 150px;
}



/*----------申し込み用----------*/
  #contact{
    width: 690px;
    margin-left: auto;
    margin-right: auto;
  }

  .check-list {
    padding: 0;
  }
  .check-list ul li {
  border-bottom: none;
  list-style: none;
  font-size: 0.8rem;    
  }

  .check-list li::before {
    content: "✔︎"; /* ← 記号をここで指定 */
    margin-right: 8px;
    color: #2c2c2c;
    font-size: 1em;
  }


  .button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
  }

  .order-button {
    background-color: rgba(225, 195, 165, 0.9);         /* ボタンの背景色 */
    color: #fff;                       /* 文字色 */
    font-size: 1.6rem;                 /* 大きめの文字 */
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 35px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
  }

  .order-button::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 2px solid rgba(255, 255, 255, 0.9); /* 内側の装飾線 */
    border-radius: 30px;
    pointer-events: none;
  }
  .order-button:hover {
    background-color:rgba(231, 208, 185, 0.9);
  }
/*----------申し込み用ここまで----------*/


/*----------特商法表記用----------*/
   #trading {
    font-size: 0.8rem;
    text-align: center;
  }




@media (max-width: 768px) {

  body {
    background-size: 200% auto;
  }
  
  .topImg-logo {
    width: 250px;
  }

  .topText{
    padding: 25px;
    font-size: 0.8rem;
  }

  h1 {
  font-size: 1.4rem;
  }

  .section h2 {
    font-size: 1.2rem;
  }

  .section h3 {
    font-size: 6.8rem;
  }

  .section p{
    font-size: 0.9rem;
  }

  ol li {
    font-size: 0.9rem;
  }
  ul li {
    font-size: 0.9rem;
  }



  

  /* ----------カルーセル (1枚表示）---------- */
  .carousel-item {
    flex: 0 0 100%;
    min-width: 100%;
  }

  /*----------カルーセルサムネ用---------*/
  /* スマホ：5枚×3行 */
  .carousel-thumbs {
    grid-template-columns: repeat(5, 1fr);
    max-width: 320px;
  }



  .image-box {
    flex: 1 1 30%;
    padding: 0px;
  }
  .image-box4 {
    flex: 1 1 40%;
  }


  .topImg{
  height: 80vh;
  }  

  .topImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* 真ん中トリミング */
  }

  .topImg-comments {
    font-size: 0.6rem;
  }

  
  #miniText {
    font-size: 0.7rem;
    line-height: 1.3rem;
  }

/*----------テキスト+画像並びボックス----------*/
  .D2content-wrapper {
    grid-template-areas:
      "title"
      "image"
      "text";
    grid-template-columns: 100%;
    gap: 0px; /* スマホの縦余白 */
  }

    .D2content-wrapper h2{
      text-align: center;
    }

    .D2image-box img {
      height: 200px;
    }


/*----------納品形式用----------*/
 #file_format{
    width: auto;
  }

/*----------制作料金用----------*/
.fee-table {
  width: 100%;
  border-collapse: collapse;
}

.fee-table th,
.fee-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
  .fee-table {
   font-size: 0.8rem;
  } 


  /*----------利用規約用----------*/
  #terms{
      width: auto;
   }
  .terms-list p{
    font-size: 0.8em;
  }
  .term-text ul li {
    font-size: 0.8em;
    line-height: 1.0em;
  }


  .terms-list {
    gap: 20px;
  }

  .term-item {
    padding-bottom: 8px;
  }




/*----------申し込み用----------*/
  #contact{
    width: auto;
  }
  .check-list ul {
    padding-inline-start: 20px;  
  }
  .order-button {
    font-size: 1.3rem;
  }


/*----------特商法表記用----------*/
   #trading {
    font-size: 0.7rem;
    text-align: center;
  }
}