/* Balloon1 container styles */
.balloon {
  width: 50%; /* Adjustable width (50% of parent container) */
  max-width: 300px; /* Restrict maximum width */
  background-color: #59afff; /* Set the background color of the balloon */
  clip-path: polygon(
    15% 0%,   /* Top-left corner */
    85% 0%,   /* Top-right corner */
    85% 85%,  /* Bottom-right corner */
    55% 85%,  /* Upper-right point of the tail */
    50% 100%, /* Tip of the tail */
    45% 85%,  /* Upper-left point of the tail */
    15% 85%,  /* Bottom-left corner */
    15% 85%   /* Back to the bottom-left */
  );
  display: flex; 
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
/* Text inside the balloon */
.balloon-text {
  font-size: 1rem; /* Set the font size */
  color: white; /* Set text color */
  text-align: center; /* Center-align text within the box */
  width: 60%; /* Adjust the width of the text block */
  height: auto; 
  padding-top: 1rem; /* Add padding at the top*/
  padding-bottom: 2rem; /* Add padding at the bottom */
  box-sizing: border-box; 
}



/* Balloon2 container styles */
.balloon2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px; /* Width of the balloon */
  height: 100px; /* Height of the balloon */
  background-color: #59afff; /* Balloon background color */
  border-radius: 10px; /* Rounded corners for the rectangle */
  position: relative; 
  margin-bottom:20px;/* Adds space for the tail */
}
/* Text inside the balloon */
.balloon2-text {
      font-size: 1rem; /* Set the font size */
      color: pink; /* Set text color */
      text-align: center; /* Center-align text within the box */
      width: 90%; /* Adjust the width of the text block */
      height: auto; /* Allow height to adapt to content */
      word-break: break-word; /* Ensure long words break properly */
}
/* Triangle tail of the balloon */
.balloon2-tail {
  position: absolute; 
  bottom: -20px; /* Align triangle below the container */
  left: calc(50% - 15px); /* Center the triangle horizontally */
}
.balloon2-tail polygon {
  fill: #59afff; /* Match the balloon background color */
}


/* Balloon3 container styles */
.balloon3-container {
    display: flex; /* Align bubble content dynamically */
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* Responsive width */
    max-width: 300px; /* Set the bubble size */
}
/* Speech bubble styling */
.balloon3 {
    width: 100%; /* Fully responsive */
    height: auto; /* Maintain aspect ratio */
    filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.3));/* Shadow effect */
}
.balloon3-shape {
    fill: #59afff; /* Bubble color */
}
/* Text styling inside container */
.balloon3-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%; /* Ensure the text fits inside */
    height: auto;
    font-size: 16px;/* Set the font size */
    color: white;
    font-weight: bold;
    text-align: center;
    word-break: break-word; /* Break long words */
    overflow-wrap: break-word; /* Browser compatibility */
    padding: 0px;
    box-sizing: border-box; 
}




/* Balloon4 styles  */
.balloon4-arrow {
  position: relative; /* Sets the context for absolutely positioned child elements (like arrows). */
  background: yellow; /* Sets the background color of the bubble to yellow. */
  border: 7px solid blue; /* Adds a solid blue border of 7px around the bubble. */
  width: 300px; /* Sets the bubble's width to 300px. */
  max-width: 100%; /* Ensures the width adjusts responsively and doesn't exceed its container width. */
  border-radius: 5px; /* Adds rounded corners to the bubble for a smoother look. */
  margin-bottom:30px; /* Adds space below the content for the height of the arrow */
}
/* Pseudo-elements for creating the arrow shape (bottom center of the bubble) */
.balloon4-arrow:after, .balloon4-arrow:before {
  top: 100%; /* Positions the pseudo-elements below the bubble (at the bottom). */
  left: 50%; /* Centers the arrow horizontally relative to the bubble. */
  border: solid transparent; /* Creates a transparent base for the arrow shape. */
  content: ""; /* Makes the pseudo-element visible. */
  height: 0; /* Ensures it's treated as a triangular arrow and not as a block. */
  width: 0; /* Removes any block-level width, focusing only on borders. */
  position: absolute; /* Positions the arrow elements absolutely within the bubble container. */
  pointer-events: none; /* Prevents the arrow from interfering with user interactions. */
}
/* Inner arrow layer (smaller, matches the bubble background color) */
.balloon4-arrow:after {
  border-color: rgba(213, 0, 185, 0); /* Sets the base color of the arrow to transparent. */
  border-top-color: yellow; /* Colors the top portion of the arrow to match the bubble background. */
  border-width: 17px; /* Controls the size of the inner arrow. */
  margin-left: -17px; /* Centers the inner arrow horizontally by offsetting it by half its width. */
}
/* Outer arrow layer (larger, matches the bubble border color) */
.balloon4-arrow:before {
  border-color: rgba(24, 0, 245, 0); /* Sets the base color of the arrow to transparent. */
  border-top-color: blue; /* Colors the top portion of the arrow to match the bubble border. */
  border-width: 28px; /* Controls the size of the outer arrow. */
  margin-left: -28px; /* Centers the outer arrow horizontally by offsetting it by half its width. */
}
/* Styling for the text inside the bubble */
.balloon4-arrow p {
  word-wrap: break-word; /* Ensures long words wrap to the next line rather than overflowing. */
  overflow-wrap: break-word; /* Compatibility property to support text wrapping in older browsers. */
  font-weight: bold; /* Makes the text bold for better readability. */
  padding: 10px; /* Adds space inside the bubble for the text. */
  text-align: center; /* Centers the text horizontally within the bubble. */
}









a:visited {
  color: #75b8ff;
}

.makers {
  color: #ffeb3b; /* リンクを黄色に */
  text-decoration: none; /* 下線を削除 */
 }
 
 .makers:hover {
  text-decoration: underline; /* ホバー時に下線を追加 */
 }
 

/* 全体のLINKボックススタイル */
.recommended-section { 
  background-color: #004fa3; /* 背景青色 */
  border: 2px solid black; /* 黒いボーダー */ 
  padding: 20px; /* 内側の余白 */ 
  position: relative; /* 擬似要素用 */ 
  color: white; /* テキスト色を見やすく白に変更 */ 
  margin: 150px auto 0px auto; 
  width:50%;
  
 } 
 /* ドットの内側ボーダー */ 

  .recommended-section::before { 
     content: ""; 
     position: absolute; 
     inset: 10px; 
     border: 3px dotted white; /* 白いドットの線 */ 
     pointer-events: none; /* ユーザーの操作を無効化（装飾専用） */ 
 }
.recommended-section h3 {
 margin:0 1rem 2rem 0;
 font-size:1rem;
}
@media screen and (min-width: 769px) {
 .recommended-section h3 {
     font-size:1.2rem;
 }
}

.recommended-list {
 list-style-type: disc; /* リストのドット表示 */
 margin: 0;
 padding: 0 20px; /* 左余白を少し追加 */
}

.recommended-list li {
 margin-bottom: 5px; /* 各リストアイテム間の余白 */
 font-size:0.6rem;
}
@media screen and (min-width: 769px) {
 .recommended-list li {
     font-size:0.9rem;
 }
}


/* デスクトップ用スタイル */
@media screen and (min-width: 769px) {
 .recommended-section { 
     display:flex;  
     
    } 
    

    h1 { margin:0;
     padding:0;}
.centered {
  margin-left: 37.5%;
  transform: translateX(-50%);
  position: relative;
  display: inline-block;
}
   
 }