@charset "utf-8";
/* CSS Document */

        
 @media (min-width: 769px) {
        /* 全体コンテナ */
	 
.message {width:80%;margin:70px auto 0;}
.message-left {float:left;width:70%;text-align: right; position: relative;width:80%;height:16vh;}
.text {position: absolute;right: 10px; bottom: 20%; color: white;font-size: 16px;}
.message-right {float:right;width:17%;}

.container {
            width: 90%;
            margin: 0 auto; /* 中央寄せ */
            padding: 0 0 3%;
            box-sizing: 
			border-box;
			margin:0 auto;
        }
	 
	 
        .container {
            width: 90%;
            margin: 0 auto; /* 中央寄せ */
            padding: 0 0 2%;
            box-sizing: 
			border-box;
			margin:0 auto;
        }

        /* コンテンツエリア */
        .content {
            width: 75%; /* 全体の80% */
            box-sizing: border-box;
            padding: 3% 0 3%; margin: 5% auto 3% auto; 
			text-align: center;opacity: 1;
			color: #fff
}
   .content {
  position: relative;
  border: 1px solid #fff; /* 1本目の線 */
}

.content::after {
  content: "";
  position: absolute;
  top: -6px; /* 上方向へのオフセット (1px線 + 3px隙間) */
  left: -6px; /* 左方向へのオフセット */
  right: -6px; /* 右方向へのオフセット */
  bottom: -6px; /* 下方向へのオフセット */
  border: 1px solid #fff;  }


        .contact-info {
            text-align: right; /* 会社名と氏名を右揃え */
            padding: 0% 10% 20% 0%;
            box-sizing: border-box;
			
        }

        .company-name, .person-name {
            font-size: clamp(16px, 1.4vw, 24px); 
            font-weight: bold;
            margin: 40px 5px 10px ;
        }

        /* テキストの収縮対応 */
        .content p {
            font-size: clamp(13px, 1.4vw, 20px); line-height: 150%;
        }
	
	    /* 注意書き */
        .warning{
            font-size: clamp(13px, 1.3vw, 16px); line-height: 170%;margin: 0% auto 0%; 
        }
	}

        /* メディアクエリ：スマートフォン向け */
        @media (max-width: 768px) {
			 /* 全体コンテナ */
.message {width:90%;margin:30px auto 0;}
.message-left {float:left;width:50%;text-align: right; position: relative;height:200px;}
.text {position: absolute;right: 10px; bottom: 20%; color: white;font-size: 16px;}
.message-right {float:right;width:40%;padding-top:10%}
			
			
        .container {
            width: 100%;
            margin: 0 auto; /* 中央寄せ */
            padding: 0 0 3%;
            box-sizing: 
			border-box;
			margin:0 auto;
        }

        /* コンテンツエリア */
        .content {
            width: 100%; /* 全体の80% */
            box-sizing: border-box;
            padding: 3% 3%; margin: 5% auto 0% auto; 
			text-align: left;opacity: 1;
			color: #fff;line-height: 170%;
}
        .content {
  position: relative;
  border: 1px solid #fff; /* 1本目の線 */
}

.content::after {
  content: "";
  position: absolute;
  top: -6px; /* 上方向へのオフセット (1px線 + 3px隙間) */
  left: -6px; /* 左方向へのオフセット */
  right: -6px; /* 右方向へのオフセット */
  bottom: -6px; /* 下方向へのオフセット */
  border: 1px solid #fff;  }

.company-name, .person-name {
            font-size: clamp(16px, 1.4vw, 24px); 
            font-weight: bold;
            margin: 40px 5px 10px ;
        }

        /* テキストの収縮対応 */
        .content p {
            font-size: clamp(14px, 1.4vw, 20px); line-height: 170%;
        }
	
	.warning{
            font-size: clamp(12px, 1.4vw, 17px); line-height: 170%;margin: 5% auto 0%; 
        }
	}