﻿@charset "UTF-8";
/* ===========================================================
  全体設定とグリッドの設定
=========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { font-size: 62.5%; }
:root {
--black: #2e2e2e; /* Font */
--lightBlack: #707070;
--darkGrey: #a0a0a0;
--gray: #d9d9d9; /* Line */
--lightGray3: #e6e6e6;
--lightGray2: #f0f0f0;
--tabGray: #f8f7f7;
--lightGray: #fafafa;

--linkColor:#0E8072;
--linkColorHover:#00A08E;
/* MY Color */
--myGreenDisabled: #7fd0c7;
--myGreen: #00a08e;
--myGreenHover: #00927f;
--myGreenActive: #008370;
--myGreenDark: #277772;
--deepGreen: #0e8072;/* Font Color */

--myYellowDisabled: #ffdf7f;
--myYellow: #f7be02;
--myYellowHover: #f8af00 ;
--myYellowActive: #f29f00 ; 
--myYellowDark: #de9200;

/* Primary Button Color */
--primaryBtn: linear-gradient(0deg, #FFD858, #FABF00);

/* Hover 時Overlay */
--primaryBtnHover: l#fff;/*#E6AD00;40%*/

--mainGray: #bac5be;
--mainGradation: linear-gradient(180deg, #e7f5e7, #f5f1e0);
--box-shadow:0px 3px 15px rgba(0,0,0,0.15);
--transition:;

--borderColor:#D9D9D9;

--errorTextColor:#951814;
--errorBGColor: #FFF6F6;
--errorBorderColor:#B7312C;

}
@supports (view-transition-name: none) {
@view-transition {
navigation: auto;
}
}
body { color:var(--black); font: normal 1.6rem/1.8 "メイリオ", Meiryo, 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Verdana, sans-serif; background-color:#fdfdfd; }
@media only screen and (max-width: 768px) { 
}
.row { width: 100%; max-width: 960px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 30px; margin: 0 auto; zoom: 1; }
.row.fullwidth { max-width: 100%; padding: 0; }
.row-reverse { flex-flow: row-reverse; }
.col1-12 { display: inline-block; width: calc(100% / 12); }
.col2-12 { display: inline-block; width: calc(100% / 12 * 2); }
.col3-12 { display: inline-block; width: calc(100% / 12 * 3); }
.col4-12 { display: inline-block; width: calc(100% / 12 * 4); }
.col5-12 { display: inline-block; width: calc(100% / 12 * 5); }
.col6-12 { display: inline-block; width: calc(100% / 12 * 6); }
.col7-12 { display: inline-block; width: calc(100% / 12 * 7); }
.col8-12 { display: inline-block; width: calc(100% / 12 * 8); }
.col9-12 { display: inline-block; width: calc(100% / 12 * 9); }
.col10-12 { display: inline-block; width: calc(100% / 12 * 10); }
.col11-12 { display: inline-block; width: calc(100% / 12 * 11); }
.col12-12 { display: inline-block; width: 100%; }
.pushCol1 { margin-left: calc(100% / 12); }
.pushCol2 { margin-left: calc(100% / 12 * 2); }
.pushCol3 { margin-left: calc(100% / 12 * 3); }
@media only screen and (max-width: 768px) {
.row { min-width: auto; max-width: none; padding:0 15px; }
.row-reverse { flex-flow: column; }
.col1-12,
.col2-12,
.col3-12,
.col4-12,
.col5-12,
.col6-12,
.col7-12,
.col8-12,
.col9-12,
.col10-12,
.col11-12,
.col12-12 { width: 100%; }
.col-tb1-4 { width: calc(100% / 4); }
.col-tb1-3 { width: calc(100% / 3); }
.col-tb1-2 { width: calc(100% / 2); }
.col-tb1-1 { width: 100%; }
.pushCol1,
.pushCol2,
.pushCol3 { margin-left: 0; }
}
@media only screen and (max-width: 480px) {
.col1-12,
.col2-12,
.col3-12,
.col4-12,
.col5-12,
.col6-12,
.col7-12,
.col8-12,
.col9-12,
.col10-12,
.col11-12,
.col12-12 { width: 100%; }
.col-sp1-4 { width: calc(100% / 4); }
.col-sp1-3 { width: calc(100% / 3); }
.col-sp1-2 { width: calc(100% / 2); }
.col-sp1-1 { width: 100%; }
}
section { position: relative; }
@media only screen and (max-width: 768px) {
section { }
}
@media only screen and (max-width: 480px) {
}
/* ===========================================================
  header
=========================================================== */
header { padding:38px 40px; border-bottom:1px solid var(--gray); background-color:#fff; }

/* ロゴ */
.logo { margin:0; }
.logo img { height:48px; }
@media only screen and (max-width: 768px) {
header { padding:12px 30px; }
.logo { text-align:center; }
.logo img { width:140px; height:auto; }
}
/* ===========================================================
  footer
=========================================================== */
footer {}

/* Copyright
----------------------------------------------------------- */
.copyright { font-size: 1.4rem; text-align:center; padding:30px; margin-bottom:0; }
/* ===========================================================
  main
=========================================================== */
main {  }
.headdingBlock { padding:30px 0; }

/* text, heading */
h1 { font-size: 3.2rem; font-weight: 600; line-height: 1.25; margin:1em 0; }
h2 { font-size: 2.4rem; font-weight: 600; line-height: 1.3; margin:0 0 1em 0; }
h3 { font-size: 2.0rem; font-weight: 600; line-height: 1.4; margin:1em 0; }
p { margin-bottom: 1em; }
@media only screen and (max-width: 768px) {

}
/* ul, ol, dl */
ul,
ol { padding-left: 2em; margin-bottom: 1em; }
ol ol,
ul ul,
ol ul,
ul ol { padding-left: 0; }
li { margin-bottom:.5rem; }
li::marker { color:var(--myGreen); }
dl { margin-bottom: 1.0em; }
dt { padding: 16px 0; }
dd { padding: 16px 0; }
dd>*:last-child { margin-bottom: 0; }

/* inline elements */
strong { color: var(--deepGreen); font-weight: 600; }
em { font-weight: 600; font-style: normal; }
b,
.bold { font-weight: 600; }

/* a (link) */
a { color: var(--linkColor); word-break:break-all; transition: all .2s 0s ease-in-out; }
a:link { text-decoration: underline; }
a:visited { text-decoration: none; }
a:hover,
a:focus,
a:active { color:var(--linkColorHover); text-decoration:none; }
/* target=_blank */
a[target="_blank"]::after { content:""; display:inline-block; width:15px; height:15px; background: url(../images/_blank_icon01.svg) top/100% 100% no-repeat; margin:0 .5em; vertical-align:middle; }
/* PDFファイル */
a[href$=".pdf"] .fileCapacity::before,
a[target="_blank"][href$=".pdf"] .fileCapacity::before { content:""; display:inline-block; width:14px; height:24px; background: url(../images/pdf_icon.svg) top/100% 100% no-repeat; background-size:contain; margin:0 .5em; vertical-align:middle; }
a[href$=".pdf"]::after,
a[target="_blank"][href$=".pdf"]::after { content:none; }
a.noIcon::after { content: none !important; }/* アイコンを付けたく無い時 */
/* 画像 */
figure { text-align: center; margin-bottom: 1.0em; }
figcaption { margin-top: 8px; }
img { vertical-align: top; }

/* 汎用クラス
----------------------------------------------------------- */
.pcDispInline { display: inline; }
.pcDispInlineBlock { display: inline-block; }
.pcDispBlock { display: block }
.pcDispFlex { display: flex; }
.pcDispNone { display: none; }
@media only screen and (max-width: 768px) {
.spDispInline { display: inline; }
.spDispInlineBlock { display: inline-block; }
.spDispBlock { display: block; }
.spDispFlex { display: flex; }
.spDispNone { display: none; }
}
.small { font-size: 85%; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.nobr { display: inline-block; }
.nowrap { white-space: nowrap; }
.mb0 { margin-bottom: 0; }

/* インデント */
.indent1em,
.indent2em { display: flex; gap: 0.5em; }
.indent1em .indentHead { width: 1em; }
.indent2em .indentHead { width: 2em; }
.indentBody {}
@media only screen and (max-width: 768px) {
}
/* ボタン */
.btn { color:#fff; justify-content: space-between; align-items: center; width: fit-content; padding:8px 24px; border-radius:2em; background-color: var(--myGreenDark); border: 2px solid var(--myGreenDark); outline: none; box-shadow:var(--box-shadow); transition:all .15s 0s ease-in; text-align: center; }
a:link.btn { text-decoration:none; }
.bigBtn { font-size:2.4rem; letter-spacing:.1em; padding-left:calc(24px + .1em); }
.btn.center { margin: 0 auto; }
.btn:hover,
.btn:focus-visible { color:var(--myGreenDark); background-color: #fff; }
@media only screen and (max-width: 480px) {
.btn { width:100%; }
.bigBtn {}
}
/* ステップバー
------------------------------------------------*/
.step-barBlock {}
.step-barOL { list-style:none; display:flex; column-gap:15px; padding:0; margin-top:30px; }
.step-barOL li { text-align:center; line-height:1; letter-spacing:.3em; width:calc(100% - 30px); padding:8px 0; border-top:8px solid var(--lightGray3); position:relative; background-color:#fff; }
.is-active::before,
.is-complete::before { content:""; display:block; width:0; height:8px; position:absolute; top:-8px; background-color:var(--myGreen); }
.is-active:first-child::before { animation:step-bar-anime 1s 0s ease-out forwards; }
.is-active:nth-child(2)::before { animation:step-bar-anime 1s 1.3s ease-out forwards; }
.is-active:nth-child(3)::before { animation:step-bar-anime 1s 2.6s ease-out forwards; }
.is-complete:first-child::before { animation:step-bar-anime 1s 0s ease-out forwards; }
.is-complete:nth-child(2)::before { animation:step-bar-anime 1s 1s ease-out forwards; }
@keyframes step-bar-anime {
0% { width:0; }
100% { width:100%; }
}
.is-complete::after,
.is-active:nth-child(3)::after { content:""; display:block; width:8px; height:16px; position:absolute; top:5px; left:calc(50% - 2.5em); border:3px solid var(--myGreen); border-width:0 3px 3px 0; transform:rotate(35deg); clip-path: inset(0 100% 0 0); }
.is-complete:first-child::after { animation:step-bar-complete .3s 1s ease-out forwards; }
.is-complete:nth-child(2)::after { animation:step-bar-complete .3s 2.3s ease-out forwards; }
.is-active:nth-child(3)::after { animation:step-bar-complete .3s 3.6s ease-out forwards; }
@keyframes step-bar-complete {
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0); }
}

/* フォーム
------------------------------------------------*/
/* レイアウト */
.fieldsetWrapper { padding:30px; background-color:#fff; border-radius:10px; box-shadow:var(--box-shadow); }
.fieldsetWrapper+.fieldsetWrapper { margin-top:60px; }
fieldset { padding:0; margin:0; border-top:3px solid var(--myGreen); }
legend { padding:0; margin-bottom:16px; }
legend h2 { padding:0 16px 0 0; margin:0; }
.formDL { margin-bottom:0; }
.formItemBox { display: flex; gap:16px; border-bottom:1px solid var(--borderColor); }
.formDL .formItemBox:last-child { border-bottom:none;}
.formItemBox dt { font-weight: normal; width: 14em; position: relative; padding: 12px 60px 12px 0; }
.formItemBox dd { width:calc(100% - 14em); border: none; word-break: break-word; }
@media only screen and (max-width: 768px) {
.fieldsetWrapper { padding:30px 15px;}
fieldset+fieldset { margin-top:30px; }
legend h2 { padding:4px 16px 4px 0;　}
.formItemBox { flex-flow:column; gap:0; }
.formItemBox dt { font-size:1.4rem; line-height:1.6; letter-spacing:.02em; width:100%; position: relative; padding: 16px 0 0 0; }
.formItemBox dd { width:100%; border: none; padding:8px 0 16px 0; }
}
/* フォーム項目 */
input[type=text],
input[type=email],
textarea,
select { color:var(--black); width:100%; padding:8px 16px; border:2px solid var(--gray); background-color:var(--lightGray2); border-radius:3px; transition:all .15s 0s ease-in; }
textarea { width:100%; height:8em; }
input[type=text]:focus,
input[type=text]:focus-visible,
input[type=email]:focus,
input[type=email]:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus { outline: none; background-color:#fff; border:2px solid var(--myGreen); }
input::placeholder,
textarea::placeholder { color:#a0a0a0; font-size:1.4rem; }
@media only screen and (max-width: 480px) {
select { font-size:1.4rem; padding:8px; }
}
/* 郵便番号 */
#postal1 { width:6em; }
#postal2 { width:7em; }
.searchAddressBtn { margin-left:16px; }
@media only screen and (max-width: 480px) {
.searchAddressBtn { margin:8px 0 0 0; }
}
/* 住所 */
#pref { width:11.5em; }
.addressInputBox+.addressInputBox { margin-top:8px; }
@media only screen and (max-width: 768px) {
.addressInputBox label { font-size:1.4rem; line-height:1.6; letter-spacing:.02em; }
}
/* 従業員数 */
#employees { width:10em; }
/* 法人番号 */
#corpNo { width:15em; }
@media only screen and (max-width: 480px) {
#corpNo { width:100%; }
}
/* 必須 */
.required { color: #fff; font-size: 1.4rem; line-height: 1; vertical-align:text-top; display: inline-block; background-color: #e80727; border-radius: 3px; padding: 3px 6px; margin-right:8px; }
.formDL .required { position: absolute; top: 16px; right: 8px; }
@media only screen and (max-width: 768px) {
.formDL .required { position:relative; top:auto; right:auto; margin-left:8px; }
}

/* ヒント
------------------------------------------------*/
.hintText { font-size:1.4rem; line-height:1.6; letter-spacing:.02em; margin:8px 0 0 0; }

/* エラーサマリー
------------------------------------------------*/
#errorSummary { color:var(--errorTextColor); padding:30px; margin-bottom:60px; background-color:var(--errorBGColor); box-shadow:var(--box-shadow); border-radius:10px; }
#errorSummary a { color:var(--errorTextColor); }
#errorList { margin-bottom:0; }
@media only screen and (max-width: 768px) {
.errorSummaryBlock .row { padding:0; }
}
/* 入力項目エラー */
input[type=text].error, input[type=email].error, textarea.error, select.error { background-color:var(--errorBGColor); border-color:var(--errorBorderColor); }
.errorBox { position:relative; padding:8px 12px 8px 40px; margin-top:8px; background-color:var(--errorBGColor); }
.errorBox::before { content:""; width:20px; height:20px; position:absolute; top:8px; left:12px; background:url(../images/note_icon02.svg); background-size:cover; }
.errorText { color:var(--errorTextColor); font-size:1.4rem; font-weight:600; letter-spacing:0.08em; line-height:1.5; margin:0; }
.errorBox:has(.errorTextColor.hidden) { display:none; }
.errorTextColor { color:var(--errorTextColor); }
/* 送信ボタン
------------------------------------------------*/
.submitBtnBlock { display:flex; justify-content:center;gap:30px; margin:60px 0; }
#confirmBtn,
#sendBtn { color:var(--black); background:var(--primaryBtn); border-color:#fabf00; }
#confirmBtn:hover,
#confirmBtn:focus,
#sendBtn:hover,
#sendBtn:focus { background:var(--primaryBtnHover); }
#backBtn {}
@media only screen and (max-width: 480px) {
.submitBtnBlock { flex-flow:column; }
}
/* ウィンドウを閉じる */
.closeBtn {}

/*　注意事項
------------------------------------------------*/
.noteBlock { padding:30px; margin:30px 0; background-color:var(--tabGray); border-radius:10px; }
.noteBlock section > *:last-child { margin-bottom:0; }
