@charset "UTF-8";
/* ==================================================
お問い合わせページ用CSS
================================================== */
.contact-container {
  text-align: left;
  font-weight: 400;

  width: min(94%, 1100px);
  margin-inline: auto;
  padding: 32px 3% 48px;

  border-radius: var(--radius-def);
  background-color: #fff;
  box-shadow: var(--box-shadow-def);
}

.contact-container input {
  font-size: max(1.6rem, 16px);
}


/* ==================================================
補足情報
================================================== */
/*
当サイトでは、下記のWEBフォントを利用できます。

───
[ LINE Seed JP ※当サイトの基本フォント]
https://seed.line.me/index_jp.html

使用例（サイト内でフォント指定を何もしていない場合のデフォルト値相当）：
.classname {
  font-family: "LINE Seed JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}

※使用可能 font-weight
font-weight: 400; //Regular
font-weight: 700; //Bold
font-weight: 800; //ExtraBold


───
[ Google Fonts ※フォーマル様式の記述が必要な場合に利用 ]
・Lato
・Noto Sans Japanese
https://fonts.google.com/share?selection.family=Lato:wght@400;700|Noto+Sans+JP:wght@100..900

使用例：
.classname {
  font-family: "Lato", "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

※使用可能 font-weight
font-weight: 300; //Light
font-weight: 400; //Regular
font-weight: 600; //SemiBold
font-weight: 700; //Bold
*/



.form-wrap {
		width:80%;
		margin:0 auto;
    --input-txtcolor: #000;
    --input-bgcolor: #fff;
    --input-bgcolor-wrote: #dcd4cc;
    --input-border: 1px solid #c4c4c4;
    --input-border-radius: 6px;
    --input-boxshadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.04) inset;
    --input-boxshadow-focus: 4px 4px 6px 0px rgba(0, 0, 0, 0.12) inset;
    --input-transition: box-shadow 0.3s ease-out 0s, background-color 0.3s ease-out 0s;
    --input-fz: 16px;
    --input-letter-spacing: 0.05em;
    --input-line-height: 1.4;
    --input-padding: 0.2em 0.4em 0.2em;
    --textarea-caution: #000;
    --checked-bgcolor: #000
}

.form-wrap input[type=text],.form-wrap input[type=password],.form-wrap input[type=email],.form-wrap input[type=tel],.form-wrap textarea {
    width: 100%;
    color: var(--input-txtcolor);
    background-color: var(--input-bgcolor);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    -webkit-box-shadow: var(--input-boxshadow);
    box-shadow: var(--input-boxshadow);
    -webkit-transition: var(--input-transition);
    transition: var(--input-transition);
    font-size: var(--input-fz);
    letter-spacing: var(--input-letter-spacing);
    line-height: var(--input-line-height);
    padding: var(--input-padding)
}

.form-wrap input[type=text]:focus,.form-wrap input[type=password]:focus,.form-wrap input[type=email]:focus,.form-wrap input[type=tel]:focus,.form-wrap textarea:focus {
    -webkit-box-shadow: var(--input-boxshadow-focus);
    box-shadow: var(--input-boxshadow-focus)
}

.form-wrap input.wrote,.form-wrap textarea.wrote {
    background-color: var(--input-bgcolor-wrote)
}

.form-wrap input {
    width: 100%
}

.form-wrap textarea.size-full,.form-wrap input.size-full {
    width: 100%
}

.form-wrap input.size-l {
    width: min(100%,480px)
}

.form-wrap input.size-m {
    width: min(100%,320px)
}

.form-wrap input.size-s {
    width: min(100%,240px)
}

.form-wrap input.size-xs {
    width: min(100%,60px);
    text-align: center
}

.form-wrap textarea {
    height: 8em;
    min-height: 2em;
    white-space: pre-wrap
}

.form-wrap textarea.rows-l {
    height: 8em
}

.form-wrap textarea.rows-m {
    height: 6em
}

.form-wrap textarea.rows-s {
    height: 4em
}

.form-wrap dl {
		margin-bottom:30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .3em
}

.form-wrap dl+dl {
    margin-top: .6em
}

.form-wrap dl dt,.form-wrap dl dd {
    width: 100%;
    text-align: left
}

.form-wrap dl dd.type-age {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: .5em
}

.form-wrap dl dd.radio-set,.form-wrap dl dd.check-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
    row-gap: 8px
}

.form-wrap select {
    text-align: left;
    width: min(100%, 320px);
    color: var(--input-txtcolor);
    background-color: var(--input-bgcolor);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    -webkit-box-shadow: var(--input-boxshadow);
    box-shadow: var(--input-boxshadow);
    -webkit-transition: var(--input-transition);
    transition: var(--input-transition);
    font-size: var(--input-fz);
    letter-spacing: var(--input-letter-spacing);
    line-height: var(--input-line-height);
    padding: var(--input-padding);
    position: relative;
}

.form-wrap select.size-l {
    width: min(100%,560px)
}

.form-wrap select:focus {
    -webkit-box-shadow: var(--input-boxshadow-focus);
    box-shadow: var(--input-boxshadow-focus)
}

.form-wrap select.selected {
    background-color: var(--input-bgcolor-wrote)
}

.form-wrap .select-style {
    position: relative;
    display: inline-block;
    width: min(100%,320px)
}

.form-wrap .select-style.size-l {
    width: min(100%,560px)
}

.form-wrap label {
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: 15px;
    line-height: 1.1
}

.form-wrap input[type=radio] {
    display: none
}

.form-wrap label.type-radio {
    height: 28px;
    padding: 5px 0 0 35px
}

.form-wrap label.type-radio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: 1/1;
    min-width: 0;
    width: 28px;
    border-radius: 50%;
    border: var(--input-border);
    background-color: var(--input-bgcolor)
}

.form-wrap input[type=radio]:checked+.type-radio::before {
    background-color: var(--input-bgcolor-wrote)
}

.form-wrap input[type=radio]:checked+.type-radio::after {
    content: "";
    position: absolute;
    inset: 0;
    left: 8px;
    margin: auto 0;
    aspect-ratio: 1/1;
    width: 12px;
    min-width: 0;
    border-radius: 50%;
    background-color: var(--checked-bgcolor)
}

/*button {
    display: block;
    background-color: #0d9a99;
    border-radius: 40px;
		width:100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    position: relative;
		border:solid 2px #000;
		text-align: center !important;
}

span.icon-submit {
  color: #fff;
	font-weight:bold;
}*/

/* add 2025-10-21 */
.form-button-ul li.btn {
    width: clamp(260px, 80%, 420px);
    margin-inline: auto;
}

.form-button-ul li.btn button[type="submit"] {
    position: relative;
    z-index: 1;
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-button-ul li.btn button[type="submit"] > span {
    flex: 1;
    text-align: center;
    padding-inline: 8px 16px;
    font-weight: bold;
    line-height: 1;
}

.form-button-ul li.btn button[type="submit"]::before {
    content: "";
    display: block;
    width: clamp(60px, 30%, 100px);
    height: 54px;
    border: 2px solid #000;
    border-radius: 64px;
    background: #fff no-repeat center center / 32px auto;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCA1NyA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTQuNjU4NiAxLjMzMTk2QzU1LjMyMTUgMS44MTQwOSA1NS41OTI3IDIuNDU2OTMgNTUuNDcyMiAzLjI2MDQ5TDQ3Ljc1OCA0OS41NDUzQzQ3LjY1NzYgNTAuMTI3OSA0Ny4zMzYyIDUwLjU3OTkgNDYuNzkzOCA1MC45MDEzQzQ2LjUxMjUgNTEuMDYyIDQ2LjIwMTIgNTEuMTQyNCA0NS44NTk2IDUxLjE0MjRDNDUuNjM4NyA1MS4xNDI0IDQ1LjM5NzYgNTEuMDkyMiA0NS4xMzY0IDUwLjk5MTdMMzEuNDg2IDQ1LjQxNzFMMjQuMTkzOCA1NC4zMDY0QzIzLjgzMjIgNTQuNzY4NCAyMy4zNCA1NC45OTk1IDIyLjcxNzIgNTQuOTk5NUMyMi40NTYxIDU0Ljk5OTUgMjIuMjM1MSA1NC45NTkzIDIyLjA1NDMgNTQuODc4OUMyMS42NzI2IDU0LjczODMgMjEuMzY2MyA1NC41MDIzIDIxLjEzNTIgNTQuMTcwOEMyMC45MDQyIDUzLjgzOTMgMjAuNzg4NyA1My40NzI3IDIwLjc4ODcgNTMuMDcwOVY0Mi41NTQ0TDQ2LjgyMzkgMTAuNjQzMkwxNC42MTE0IDM4LjUxNjVMMi43MDg2OCAzMy42MzQ5QzEuOTY1MzkgMzMuMzUzNyAxLjU2MzYyIDMyLjgwMTIgMS41MDMzNSAzMS45Nzc2QzEuNDYzMTcgMzEuMTc0IDEuNzg0NTkgMzAuNTgxNCAyLjQ2NzYyIDMwLjE5OTdMNTIuNjA5NSAxLjI3MTY5QzUyLjkxMDggMS4wOTA4OSA1My4yMzIzIDEuMDAwNDkgNTMuNTczOCAxLjAwMDQ5QzUzLjk3NTYgMS4wMDA0OSA1NC4zMzcyIDEuMTEwOTggNTQuNjU4NiAxLjMzMTk2WiIgZmlsbD0iIzBEOUE5OSIvPjwvc3ZnPg==");
    transition: background-color 0.4s ease-out 0s;
}

.form-button-ul li.btn button[type="submit"]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 2px solid #000;
    border-radius: 64px;
    background-color: var(--color-emerald);
    transition: background-color 0.4s ease-out 0s;
}

.form-button-ul li.btn button[type="submit"]:hover {
    animation: hoverBound 0.4s ease-out 0s forwards;
}

.form-button-ul li.btn button[type="submit"]:hover::before {
    background-color: var(--color-yellow-light);
}