/* レスポンシブ対応のスタイル */
/* PC/SP表示切替用クラス */
.pc-only {
    display: block;
}
.sp-only {
    display: none;
}

/* スマホ版確認ボタンテキスト（デフォルトでは非表示） */
.confirm-btn-text {
    display: none;
}

/* メディアクエリによるスマホ表示切り替え */
@media screen and (max-width: 768px) {
    /* ====== 基本設定 ====== */
    html, body {
        width: 100% !important;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1.4;
    }
    
    /* PC/SP表示切替 */
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block !important;
    }
    
    /* 確認ボタン画像をスマホ版では非表示に */
    img#confirm_btn,
    img[src*="button_image/confirm_button.jpg"],
    img[src*="button_image/confirm_button_en.jpg"] {
        display: none !important;
    }
    
    /* スマホ版確認ボタンテキスト */
    .confirm-btn-text {
        display: block;
        width: 100%;
        height: auto;
        padding: 15px 0;
        background-color: #878787;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border-radius: 5px;
        border: none;
        box-shadow: 0 4px 0 #878787;
        transition: all 0.3s;
        text-decoration: none;
    }
    
    .confirm-btn-text:hover {
        background-color: #878787;
        box-shadow: 0 2px 0 #878787;
        transform: translateY(2px);
    }
    
    .confirm-btn-text:active {
        box-shadow: none;
        transform: translateY(4px);
    }
    
    /* ====== フロー ====== */
    .simple-flow {
        display: flex !important;
        justify-content: space-between;
        width: 100%;
        margin: 20px auto;
        padding: 10px 0;
    }
    
    .flow-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30%;
    }
    
    .flow-item:not(:last-child):after {
        content: "";
        position: absolute;
        top: 25px;
        right: -10%;
        width: 20%;
        height: 2px;
        background-color: #ddd;
    }
    
    .flow-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #eee;
        color: #666;
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .flow-text {
        font-size: 1em;
        color: #666;
    }
    
    .flow-item.active .flow-circle {
        background-color: #3498db;
        color: #fff;
    }
    
    .flow-item.active .flow-text {
        color: #3498db;
        font-weight: bold;
    }
    
    /* ====== コンテナ設定 ====== */
    #container, #container_in {
        width: 100% !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    #container_bottom {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    img {
        max-width: 100%;
        height: auto;
    }
    
    /* ====== ヘッダー ====== */
    #header {
        width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }

    div[style*="clear:both; overflow:hidden; width:800px;"] {
        width: 100% !important;
    }
    
    #header_logo {
        width: 100% !important;
        margin: 0;
        padding: 0;
        text-align: center;
        float: none;
    }
    
    #header_text {
        width: 100% !important;
        margin: 10px 0;
        padding: 0;
        font-size: 1.2em;
        line-height: 1.4;
        text-align: center;
        float: none;
    }
    
    /* PC表示用要素を非表示 */
    #content_of_page_bar {
        display: none;
    }
    
    /* スマホ版ヘッダー */
    #content_of_page_bar_sp {
        padding: 10px 15px;
        background-color: #878787;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px;
        display: block;
        border-radius: 5px;
        width: 100% ;
        box-sizing: border-box;
    }
    
    .sp-page-title {
        font-size: 2em;
        font-weight: bold;
        color: #ffffff;
    }
    
    #content_of_page_bar_sp .page-title {
        font-size: 1.4em;
        font-weight: bold;
        color: #ffffff;
        margin-right: 10px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
    
    .sp-language-switcher {
        font-size: 1.3em;
        text-align: right;
    }
    
    .sp-language-switcher .active {
        font-weight: bold;
        color: #ffffff;
        font-size: 0.7em;
    }
    
    .sp-language-switcher a {
        color: #dddddd;
        text-decoration: none;
        padding: 2px 5px;
        font-size: 0.7em;
    }
    
    /* ====== メインコンテンツ ====== */
    #middle {
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    
    #contents, #contents_in {
        width: 100%;
        padding: 10px;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* テキスト要素 */
    p {
        line-height: 1.4;
        margin: 0.8em 0;
        font-size: 1.2em;
        width: 100%;
        box-sizing: border-box;
    }
    
    p.subTxt {
        font-size: 1.2em;
        width: 100%;
    }
    
    div#noFileTxt {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        font-size: 1em;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* ====== タイトル ====== */
    div.pageTitleLeft, 
    div.pageTitleRight {
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
        box-sizing: border-box;
    }
    
    /* タイトル表示の共通スタイル */
    div.title, 
    div.pageTtl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: #ffffff;
        color: #474747;
        padding: 0px 10px;
        font-size: 0.9em;
        font-weight: bold;
        border-left: 3px solid #474747;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    
    /* タイトル画像を非表示 */
    div.title img, 
    div.pageTtl img {
        display: none;
    }
    
    /* 各タイトルの設定 */
    div.pageTtl:has(img[src*='mailsending.jpg'])::before {
        content: "メール送信";
        font-size: 1.8em;
    }

    div.pageTtl:has(img[src*='mailsending_en.png'])::before {
        content: "Send E-mail";
        font-size: 1.8em;
    }

    div.title:has(img[src*="file_reception_title4.jpg"])::before {
        content: "添付ファイル";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="file_reception_title4_en.jpg"])::before {
        content: "Attachment Files";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="mailsending_title1.jpg"])::before {
        content: "送信元情報";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="mailsending_title1_en.jpg"])::before {
        content: "Sender's Information";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="nyukou_title2.jpg"])::before {
        content: "宛先情報";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="mailsending_title2_en.jpg"])::before {
        content: "Recipient's Information";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="mailsending_title3.jpg"])::before {
        content: "メール送信内容";
        font-size: 1.8em;
    }
    
    div.title:has(img[src*="mailsending_title3_en.jpg"])::before {
        content: "Message & Attachment Files";
        font-size: 1.8em;
    }
    
    /* ====== 入力フィールド拡大 ====== */
    input[name="nameto"], 
    input[name="emailto"],
    input[name="companyto"],
    input[name="kanato"],
    input[name="mail_title"] {
        width: 100% !important;
        height: 30px;
        font-size: 1em;
        padding: 12px 8px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #ccc;
        height: auto;
    }
    
    /* テーブル内の入力フィールド */
    .naiyou table td input[type="text"],
    .naiyou table td input[type="email"],
    .naiyou table td input[type="password"] {
        width: 100%;
        min-width: 250px;
        font-size: 1em;
        box-sizing: border-box;
    }

    /* テキストエリアのスタイル */
    textarea, 
    textarea[name^="opt"] {
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 5px;
        font-size: 1em !important;
        border: 1px solid #ccc;
        border-radius: 3px;
        line-height: 1.5;
    }

    input[type="radio"] + span,
    input[type="checkbox"] + span,
    label {
        font-size: 1em !important;
        line-height: 1.5;
        display: inline-block;
        margin-bottom: 8px;
    }

    select,
    select[name^="opt"] {
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #fff;
        margin-bottom: 5px;
        height: auto;
    }

    
    
    /* 特定の入力フィールド */
    #nameto, #emailto, #companyto, #kanato {
        width: 100% !important;
        font-size: 1em;
        padding: 2px;
        box-sizing: border-box;
    }
    
    input[name="mail_title"] {
        width: 100% !important;
        font-size: 1em;
        padding: 2px;
        box-sizing: border-box;
    }

    textarea {
        width: 100%;
        min-height: 200px;
        font-size: 1em;
        padding: 12px 8px;
        box-sizing: border-box;
        margin-bottom: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        height: auto;
    }
    
    textarea.nyukou_honbun {
        min-height: 400px;
        height: auto;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* チェックボックスとラジオボタンのラベル */
    input[type="checkbox"],
    input[type="radio"] {
        transform: scale(1.5);
        margin-right: 10px;
    }
    
    label {
        font-size: 1.5em;
        display: inline-block;
        margin: 8px 0;
    }
    
    /* セレクトボックス */
    select {
        width: 100%;
        font-size: 1.6em;
        padding: 12px 8px;
        box-sizing: border-box;
        margin-bottom: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    
    /* ====== テーブル ====== */
    table {
        width: 100%;
    }
    
    th, td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    th {
        padding: 10px;
        border-bottom: none;
        text-align: left;
    }
    
    td {
        padding: 10px;
    }
    
    /* テーブルヘッダー（宛先名、本文などの見出し）のテキストサイズアップ */
    .naiyou table th {
        font-size: 1.2em;
        font-weight: bold;
        background-color: #f5f5f5;
        padding: 12px 15px;
        vertical-align: top;
        width: 100%;
        box-sizing: border-box;
    }

    .naiyou table td {
        font-size: 1.2em;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* ====== 確認ボタン ====== */
    #confirm_btn {
        width: 95%;
        max-width: 350px;
        height: auto;
        padding: 15px;
        margin: 30px auto;
        display: block;
        cursor: pointer;
        box-sizing: border-box;
    }
    
    /* 縦一列表示の共通スタイル */
    .naiyou table:not(.contact-table), 
    .naiyou table.columnUnder_table {
        width: 100%;
        display: block;
        border: 1px solid #ddd;
        margin-bottom: 15px;
        background-color: #ffffff;
        border-radius: 5px;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .naiyou table:not(.contact-table) tbody, 
    .naiyou table.columnUnder_table tbody {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
    
    .naiyou table:not(.contact-table) tr, 
    .naiyou table.columnUnder_table tr {
        width: 100%;
        display: block;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
    }
    
    .naiyou table:not(.contact-table) tr:last-child, 
    .naiyou table.columnUnder_table tr:last-child {
        border-bottom: none;
    }
    
    .naiyou table:not(.contact-table) th, 
    .naiyou table.columnUnder_table th {
        width: 100%;
        display: block;
        box-sizing: border-box;
        text-align: left;
        padding: 12px 15px;
        background-color: #f0f0f0;
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #eee;
    }
    
    .naiyou table:not(.contact-table) td, 
    .naiyou table.columnUnder_table td {
        width: 100% !important;
        display: block;
        box-sizing: border-box;
        text-align: left;
        padding: 12px 15px;
        font-size: 1.2em;
        word-break: break-all;
    }
    
    /* 横スクロール用 */
    .table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    
    /* ====== レイアウト ====== */
    #columnUnder {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
    }
    
    #columnUnder_left {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }
    
    #columnUnder_right {
        width: 100%;
        float: none;
        margin-top: 20px;
        box-sizing: border-box;
    }
    
    .koumokuLeft, 
    .koumokuRight {
        width: 100%;
        box-sizing: border-box;
    }
    
    .koumoku {
        margin-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* コンテンツ配置調整 */
    .naiyou.subTxt.subTxt2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* ドットバー */
    span[style*="margin:7px 0;"] {
        display: block;
        width: 100%;
        margin: 7px 0;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: center;
    }
    
    span[style*="margin:7px 0;"] img[src*="dot_bar.jpg"] {
        width: 100% !important;
        height: auto;
        margin: 0 auto;
        display: block !important;
    }
    
    /* ====== ファイルアップロード ====== */
    input[type="file"] {
        width: 100%;
        font-size: 1.5em;
        padding: 8px 0;
        margin: 10px 0;
        box-sizing: border-box;
    }
    
    #add_button {
        display: block;
        margin: 15px auto;
        text-align: center;
        width: 90% !important;
        box-sizing: border-box;
    }
    
    #add_button img {
        width: 200px;
        height: auto;
    }
    
    /* ドラッグ＆ドロップエリア */
    #dropbox {
        width: 100%;
        min-height: 150px;
        border: 3px dashed #ccc;
        border-radius: 5px;
        padding: 20px;
        text-align: center;
        font-size: 1.6em;
        margin: 15px 0;
        box-sizing: border-box;
        background-color: #f9f9f9;
    }
    
    .dropover {
        background-color: #f0f8ff;
        border-color: #007bff;
    }
    
    /* ファイルコンテナ */
    .file_container {
        border: 1px solid #ddd;
        padding: 10px;
        margin: 10px 0;
        border-radius: 4px;
        background-color: #f9f9f9;
        width: 100%;
        box-sizing: border-box;
    }
    
    .file_name {
        font-size: 0.8em;
        word-break: break-all;
        padding: 5px 0;
        width: 100%;
        box-sizing: border-box;
    }

     */
    /* ====== フッター ====== */
    #footer {
        width: 100%;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* お問い合わせ部分 */
    div[style*="width:540px; padding:0px;margin-left:95px; text-align:center;"],
    div[style*="clear:both; padding:0px;margin:0px; text-align:center;"],
    div[style*="clear:both; overflow:hidden; width:740px;"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px;
        box-sizing: border-box;
        overflow: visible;
    }
    
    /* お問い合わせテーブル */
    div[style*="width:540; padding:0px;margin-left:95px; text-align:center;"] table,
    div[style*="clear:both; padding:0px;margin:0px; text-align:center;"] table,
    div[style*="clear:both; overflow:hidden; width:740px;"] table,
    table[style*="border-collapse: collapse"] {
        width: 100% !important;
        margin: 10px 0;
        padding: 0;
        border: 1px solid #CCCCCC;
        border-collapse: collapse;
        box-sizing: border-box;
    }
    
    /* テーブル行とセル */
    div[style*="width:540; padding:0px;margin-left:95px; text-align:center;"] table tr,
    div[style*="clear:both; padding:0px;margin:0px; text-align:center;"] table tr,
    div[style*="clear:both; overflow:hidden; width:740px;"] table tr,
    table[style*="border-collapse"] tr td[align="center"],
    table[style*="border-collapse"] tr td[align="center"] + td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    div[style*="width:540; padding:0px;margin-left:95px; text-align:center;"] table td,
    div[style*="clear:both; padding:0px;margin:0px; text-align:center;"] table td,
    div[style*="clear:both; overflow:hidden; width:740px;"] table td,
    table[style*="border-collapse"] td {
        width: 100% !important;
        display: block;
        padding: 5px;
        text-align: center;
        font-size: 0.9em;
        line-height: 1.3;
        border: none;
        box-sizing: border-box;
    }
    
    /* リンクとテキスト */
    div[style*="width:540; padding:0px;margin-left:95px; text-align:center;"] a,
    div[style*="clear:both; padding:0px;margin:0px; text-align:center;"] a,
    div[style*="clear:both; overflow:hidden; width:740px;"] a,
    table[style*="border-collapse"] a {
        display: inline-block;
        padding: 5px 0;
        font-size: 0.9em;
        color: #000000;
        text-decoration: underline;
    }
    
    /* nobrタグの調整 */
    nobr {
        white-space: normal;
    }
    
    /* Error message container */
    #error_msg_container {
        width: 100%;
        padding: 10px;
        margin: 15px 0;
        box-sizing: border-box;
    }
    
    #error_msg_title {
        font-size: 1.2em;
        font-weight: bold;
        color: #ff0000;
    }
    
    #error_msg_text {
        font-size: 1em;
        line-height: 1.5;
    }
}

/* Default styles for PC display */
.sp-only {
    display: none;
}

.simple-flow {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
}