@charset "UTF-8";

/* form/form.css
     - ファイル: フォームページ用スタイル
     - 説明: 入力フォームのレイアウト、バリデーション表示など
*/

/* ==================================================
   FORM PAGE BASE：問い合わせページ全体の基本設定
   ================================================== */
html {
    scroll-behavior: smooth;
}

/* フォント定義 */
@font-face {
        font-family: "Quicksand";
        src: url("../font/Quicksand-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
}

@font-face {
        font-family: "NotoSansJP";
        src: url("../font/NotoSansJP-Medium.ttf") format("truetype");
        font-weight: 500;
        font-style: normal;
}

/* 最低サイズ一旦360で */
body {
    min-width: 360px;
    margin: 0;
}
/* フッターとの間に余白取る */
main {
    margin: 0;
    padding-bottom: 100px;
}
/* 基本文字サイズ */
html {
    font-size: 0.95rem;
}
/* コンテンツの基本位置 */
.page {
    max-width: 1200px;
    margin: 0 auto;
}


/* --------title-------- */
.main_title {
    position: relative;
    width: 80%;
    margin: 80px auto;

    /* 上からスライドインするアニメーション */
    /* ease-outは、CSSのアニメーションにおけるタイミング関数
    このタイミング関数を使用することで、アニメーションが自然なフェードアウトや滑らかな移動など、
    開始時には速く終了時にはゆっくりとした効果を持つことができる */
    /* forwardsはアニメーションが終了した後、最終状態を保持するための指定 */
    animation: slide-in 1s ease-out forwards;
}


@keyframes slide-in {
    0% {
        /* opacityは、CSSのプロパティの一つで、要素の不透明度（透明度）を指定するために使用 */
        opacity: 0; /* 最初は非表示 */

        /* transformは、CSSのプロパティの一つで、要素の変形（トランスフォーム）を指定するために使用 */
        /* translate()で要素を平行移動 */
        /* Xは横方向、Yは縦方向、-つけると左から右か上から下 */
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 英語タイトル */
.main_title_en {
    /* webkit-text-strokeプロパティは、現時点でWebkitベースの一部のブラウザでしかサポートされていないため、
    どのブラウザでも正常に表示するためには代替手段を使用する必要がある */
    -webkit-text-stroke: 3px #026d6813; /* テキストの輪郭線の太さと色 */
    color: rgba(255,255,255,0); /* 色なし */

    /* テキストの行間（行の上下のスペース）を制御 */
    /* line-height: 1;の場合、行の高さは現在のフォントサイズと同じ高さに設定され、テキストが詰まって表示される */
    line-height: 1;
    font-size: 130px;
    margin: 0;
}

/* 日本語タイトル */
.main_title_jp {
    width: auto;
    font-family: "NotoSansJP";
    font-size: 40px;
    margin-top: -50px; /* 英語タイトルと重ねて表示する */
    position: relative;
    z-index: 2; /* 英語タイトルより前 */ 
    font-weight: 500;
    line-height: 1;
    padding: 0.3em;
}

/* ストライプ線 */
.main_title_jp:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;

    /* repeating-linear-gradientで繰り返しのリニアグラデーション（直線上で色が変化する効果）を作成 */
    /* カッコ( )の中は、（ストライプの角度、開始色、開始色＋開始色の終了地点、２色目の色＋２色目の開始地点、２色目の終了地点） */
    /* 開始色の終了地点と２色目の開始地点に開きがあると、その部分がグラデーションになってしまう */
    /* ストライプにしたい場合は開始色の終了地点と２色目の開始地点を同じにする */
    background: repeating-linear-gradient(-45deg, #0ba29af2, #0ba29af2 2px, white 2px, white 4px);
}



/* 一番上のテキスト全体 */
.form_text {
    width: 80%;
    margin: 0 auto;
}

/* テキスト内容 */
.form_text p {
   padding-left: 10px;
}

/* ==================================================
   CONTACT FORM：入力欄・送信ボタン・プライバシー文
   ================================================== */
/* 入力フォーム全体 */
.form {
    width: 90%;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 30px 10px rgba(114, 140, 132, .06);
    margin: 30px auto;
    padding: 1rem 0;
}

/* 入力フォーム全体の文字 */
.form p {
    margin: 30px 20px;
}

/* 入力フォームの入力部分 */
.form_input {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 必須の文字 */
.red {
    color: red;
}

/* 入力フォームの各項目の上部空白 */
.input_area {
    width: 90%;
    padding-top: 20px;
}

/* 入力フォームの各項目 */
.input_area p {
    margin: 0;
}

/* 入力フォームの必須文字横の空白 */
.input_area span {
    margin-left: 1rem;
}

/* 入力フォームの各項目のboxの整形 */
input[type=text],
input[type=tel],
input[type=email] {
    line-height: 2;
    padding: 5px;
    width: 95%;
    font-family: 'NotoSansJP';
}
/* 入力フォームの電話番号と郵便番号は桁数少ないのでbox小さめ */
#tel,
#postid {
    width: 95%;
    max-width: 300px;
}
/* 入力フォームの内容項目のbox */
textarea {
    padding: 5px;
    width: 95%;
    height: 10rem;
    font-family: 'NotoSansJP';
}

/* privacyの見出し */
.privacy h2 {
    text-align: center;
    margin: 30px 0 0 0;
}

/* privacyの中身 */
.privacy p {
    margin: 15px;
}

/* privacyのスクロール部分 */
.scroll {
    width: 70%;
    /* 横幅を700pxに指定 */
    height: 350px;
    /* 横幅を350pxに指定 */
    border: 1px solid #000;
    /* わかりやすくボーダーを引く */
    overflow-y: scroll;
    /* 縦方向にスクロール可能にする */
    margin: 0 auto;
    padding: 10px;
    padding-left: 20px;
    font-size: 0.8rem;
    line-height: 1.5rem;
}
/* スクロールバーの幅 */
.scroll::-webkit-scrollbar {
    width: 15px;
}
/* スクロールバーの背景 */
.scroll::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 10px;
}
/* スクロールバーのバー設定 */
.scroll::-webkit-scrollbar-thumb {
    background-image: linear-gradient(-135deg, #0ba29a 0%, #696ac5 100%);
    border-radius: 10px;
}
/* スクロールの中の左の余白 */
.scroll ul {
    padding-left: 20px;
}
/* 送信ボタンの位置 */
#submit-btn {
    width: 100%;
    margin: 30px 0;
    text-align: center;
}

/* 送信ボタン */
.sousin-btn1 {
    width: 150px;
    font-weight: 600;
    font-size: 15px;
    font-family: 'NotoSansJP';
    color: #fff;
    display: inline-block;
    padding: 15px 0px;
    text-align: center;
    background-image: linear-gradient(-135deg, #0ba29a 0%, #696ac5 100%);
    border: 1px solid #0ba29aac;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
}

/* 送信確認ページの送信ボタンと戻るボタン */
.sousin-btn2,.back-btn {
    width: 150px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'NotoSansJP';
    color: #fff;
    display: inline-block;
    padding: 15px 0px;
    text-align: center;
    background-image: linear-gradient(-135deg, #0ba29a 0%, #696ac5 100%);
    border: 1px solid #0ba29aac;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
}

/* トップへ戻るボタン */
.top-back-btn {
    width: 180px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'NotoSansJP';
    color: #fff;
    display: inline-block;
    padding: 15px 0px;
    text-align: center;
    background-image: linear-gradient(-135deg, #0ba29a 0%, #696ac5 100%);
    border: 1px solid #0ba29aac;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
}

/* ボタンホバー時 */
.sousin-btn1:hover,.sousin-btn2:hover,.back-btn:hover,.top-back-btn:hover {
    color: #0ba29a;
    background-image: none;
    background-color: #ffffff;
    border: 1px solid #0ba29aac;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
}


/* ==================================================
   CONFIRM / ERROR：送信前確認画面・エラー表示
   ================================================== */
/* 確認画面 */
#formWrap {
	width:90%;
	margin:0 auto;
}

/* 確認画面のテーブル整形 */
table.formTable{
	width:90%;
	margin:0 auto;
	border-collapse:collapse;
    margin-top: 30px;
}
table.formTable td,table.formTable th{
    border:1px solid #ccc;
    padding:10px;
    width:100%;
}
table.formTable th{
    width:40%;
    font-weight:normal;
    background:#efefef;
    text-align:left;
}

/* 確認画面のエラーメッセージ */
p.error_messe{
    margin:5px 0;
    color:red;
}
/* エラーメッセージの見出し */
.form h4 {
    margin-top: 30px;
}




/* 見切れるからサイズ変更 */
@media screen and (max-width: 1200px) {
    .form {
        width: 85%;
    }
}

/* 見切れるからサイズ変更 */
@media screen and (max-width: 700px) {
    /* 英語タイトル */
    .main_title_en {
        font-size: 110px;
    }

    /* 日本語タイトル */
    .main_title_jp {
        font-size: 35px;
    }
}


/* 見切れるからサイズ変更 */
@media screen and (max-width: 700px) {
    /* 英語タイトル */
    .main_title_en {
        font-size: 90px;
    }

    /* 日本語タイトル */
    .main_title_jp {
        font-size: 35px;
    }
}


/* 見切れるからサイズ変更 */
/* スクリーンが600px以下でテーブルが縦に表示 */
@media screen and (max-width:600px) {
	#formWrap {
		width:95%;
	    margin:0 auto;
    }
    table.formTable th, table.formTable td {
        width:auto;
        display:block;
    }
    table.formTable th {
        margin-top:5px;
        border-bottom:0;
    }

    /* 英語タイトル */
    .main_title_en {
        font-size: 75px;
    }

    /* 日本語タイトル */
    .main_title_jp {
        font-size: 30px;
        margin-top: -8%;
    }
}

/* 見切れるからサイズ変更 */
/* スクリーンが500px以下でボタンが少し小さくなる */
@media screen and (max-width:500px) {
    .sousin-btn1,.sousin-btn2,.back-btn {
        font-size: 12px;
        width: 100px;
    }

    .top-back-btn {
        width: 150px;
        font-size: 12px;
    }
   /* 英語タイトル */
    .main_title_en {
        font-size: 60px;
    }
    /* 日本語タイトル */
    .main_title_jp {
        font-size: 30px;
    }

    /* フォントサイズ変更 */
    .policy_content p {
        font-size: 12px;
    }

    /* フォントサイズ変更 */
    html {
        font-size: 0.9rem;
    }
}


/* 見切れるからサイズ変更 */
@media screen and (max-width: 400px) {
    .main_title {
        margin: 70px 30px 50px;
    }
    /* 英語タイトル */
    .main_title_en {
        font-size: 55px;
    }

    /* 日本語タイトル */
    .main_title_jp {
        font-size: 25px;
    }
}
/* ==================================================
   PAGE TOP：右下のページトップボタン
   ================================================== */
.fixed_top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: rgb(255, 255, 255); /* ← 見やすく赤に */
    color: rgb(0, 0, 0);
    border-radius: 50%;
    text-decoration: none;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 2px solid rgb(0, 0, 0);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fixed_top.show {
    opacity: 1;
    pointer-events: auto;
}
.fixed_top:hover {
    transform: translateY(-4px);
    background: #0ba29a;
    color: white;
}

/* ==================================================
   MOBILE POLISH：スマホでフォームを入力しやすくする調整
   ================================================== */
@media screen and (max-width: 650px) {
    .form_text,
    .form,
    .form_input,
    .input_area,
    .scroll {
        width: 100%;
        box-sizing: border-box;
    }

    .page {
        padding: 0 16px;
        box-sizing: border-box;
    }

    .form_text p {
        padding-left: 0;
        line-height: 1.9;
    }

    .form {
        padding: 16px 0 22px;
        border-radius: 8px;
    }

    input[type=text],
    input[type=tel],
    input[type=email],
    textarea,
    #tel,
    #postid {
        width: 100%;
        max-width: none;
        min-height: 44px;
        font-size: 16px;
        box-sizing: border-box;
    }

    textarea {
        min-height: 180px;
    }

    .scroll {
        height: 280px;
        padding: 14px 16px;
    }

    .sousin-btn1 {
        width: min(260px, 90%);
        font-size: 15px;
    }
}