/* ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝
   横並びパターン
   ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ */

.machine_explanation {
  display: flex; 
  flex-wrap: wrap; 
  column-gap: 20px; 
  row-gap: 30px;    
  max-width: 820px; 
  margin: 0 auto;   
  box-sizing: border-box; 
}

.machine_item {
  width: 400px; 
}

.machine_item img {
  width: 400px;  
  height: 200px; 
  object-fit: cover; 
  object-position: center; 
}

.machine_item p {
  margin-top: 5px;  
}

/* ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝
   写真が左、テキストが右のパターン
   ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ ＝ */
.machine_item.is-horizontal {
  display: flex;
  width: 820px;         
  gap: 20px; 
  align-items: flex-start; 
}

.machine_item.is-horizontal img {
  width: 400px; 
  height: 250px;
  flex-shrink: 0; 
}

.machine_item.is-horizontal p {
  margin-top: 0; 
  flex: 1; 
}


/* スマホ表示用（画面幅が640px以下のとき） */
@media (max-width: 640px) {
	
  .machine_explanation {
    flex-direction: column; 
    align-items: center; 
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; 
    row-gap: 20px; 
  }

  .machine_item {
    width: 100%; 
  }
  .machine_item img {
    width: 100%; 
    height: 200px; 
  }

  .machine_item.is-horizontal {
    width: 100%;
    flex-direction: column; 
    gap: 0;
  }
  .machine_item.is-horizontal img {
    width: 100%;  
    height: 200px; 
  }
  .machine_item.is-horizontal p {
    margin-top: 5px; 
  }
}


/* ========================================================
   container
   ======================================================== */

.container_machine {
    min-width: 40%;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    max-width: 1000px;
}

@media (max-width: 640px) {
.container_machine {
    font-size: 12px;
}
}

/* ========================================================
   dcrp_area
   ======================================================== */

/* スマホ表示用（画面幅が640px以下のとき） */
@media (max-width: 640px) {
		
.dcrp_area ol {
    list-style-type: decimal;
    margin-left: 0em;
	padding: 10px;
}
}

/* ========================================================
   動画
   ======================================================== */

/* 全体の外枠（動画を画面の中央に配置する設定） */
.single-video-container {
  width: 100%;
  max-width: 500px; /* PCでは最大500pxでストップする */
  margin: 40px auto; /* 画面の中央に配置（上下に40pxの余白） */
  padding: 0 20px;   /* スマホ時の左右の画面端の余白 */
  box-sizing: border-box;
}

/* YouTube動画本体をレスポンシブ（16:9）にする指定 */
.single-video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 自動で16:9の比率をキープする魔法の指定 */
  display: block;
}

/* ========================================================
   テーブル
   ======================================================== */

@media (max-width: 1040px) {
.selection2 table {
    width: 95%;
	margin: 0px auto;
}
}