@charset "UTF-8";

body {
  font-family: 'Noto Sans JP', 'Noto Serif JP', sans-serif;
  font-size: 16px;
  letter-spacing:0.1em;
  color: #333333;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
}
/*ヘッダー*/
header {
    display: flex;
    height: 81px;
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1100;
}
.mainMenu {
    margin: 0 auto;
    display: flex;
    width: 1366px;
}
/* ロゴ用 */
.logo {
  text-align: center;
  padding: 24px 0 24px 24px;
  width: auto;
  background: #FFFFFF;
}
.pcMenu {
    width: 100%;
}
.pcMenu > ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}
.pcMenu > ul > li {
  text-align: center;
  font-family: 'Noto Serif JP';
  font-size: 16px;  
  margin: 0 20px;
}
.pcMenu > ul > li > a {
  display: block;
  line-height: 81px;
  text-decoration: none;
  color: #333333;
  position: relative;
}
.pcMenu > ul > li > a::after {
    position: absolute; /*親要素であるaタグを基準に位置を指定*/
    left: 0;            /*アンダーラインを各メニュー（aタグ）の左端に指定*/
    content: '';        /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
    width: 100%;        /*アンダーラインを各aタグの幅に合わせる*/
    height: 1px;        /*アンダーラインの高さ（太さ）*/
    background: rgba(51,51,51,0.5);/*アンダーラインの色*/
    bottom: 26px;               /*アンダーラインがaタグの下端から現れる*/
    transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: transform 0.3s; /*変形の時間*/
}
.pcMenu > ul > li > a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}
/* ハンバーガーメニューのボタン */
.spMenuBox {
  position: fixed;  /* 位置を固定 */
  top: 0;           /* 最上部 */
  right: 0;         /* 右端 */
  display: flex;    /* 中の要素を上下中央寄せ */
  justify-content: center;
  align-items: center;
   height: 52px;    /* サイズ指定 */
  width: 52px;
  z-index: 1000;     /* 最前面にする */
  background-color: rgba(255, 255, 255, 0.9);
}
/* メニューの白線を疑似要素を使って3本作成 */
.spMenuBox span,         /* 真ん中の線 */
.spMenuBox span:before,  /* 上の線 */
.spMenuBox span:after {  /* 下の線 */
  content: "";             /* contentの値を指定しないと疑似要素が生成されない */
  /* ３本線のサイズと色を指定 */
  display: block;
  height: 2px;
  width: 31px;
  background-color: #B71B26;
  position: absolute;      /* 3本線の位置は絶対位置で指定 */
}
.spMenuBox span:before {  /* 上の線の位置 */
  bottom: 10px;             /* 真ん中の線と離す距離 */
}
.spMenuBox span:after {   /* 下の線の位置 */
  top: 10px;                /* 真ん中の線と離す距離 */
}
#spMenuCheck {            /* チェックボックスは常に非表示 */
  display: none;
}
/* チェックボックスのチェックがON（スマホ用メニューを開いた状態） */
/* 真ん中の線 */
#spMenuCheck:checked ~ .spMenuBox span {
  background: rgba(255, 255, 255, 0);       /* 透明にして見えなくする */
}
/* 上の線 */
#spMenuCheck:checked ~ .spMenuBox span::before {
  bottom: 0;                  /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
  transform: rotate(35deg);   /* 右に45度傾けてバツの片側の線にする */
}
/* 下の線 */
#spMenuCheck:checked ~ .spMenuBox span::after {
  top: 0;                     /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
  transform: rotate(-35deg);  /* 左に45度傾けてバツの片側の線にする */
}
#spMenuCheck:checked ~ .hamburgerContent {
  left: 0;
}
/* スマホ用メニュー */
.spMenuContent {
  position: fixed;   /* 絶対位置で指定   */
  width: 100%;       /* 画面全体に表示 */
  height: 100%;
  top: 0;            /* 開始位置は左上隅 */
  left: 0;
  z-index: 900;      /* 前面に表示するがハンバーガーボタンよりは背後 */
  background-color: rgba(255, 255, 255, 0.9);
}
/* スマホ用メニューのリスト */
.spMenuList {
    text-align: center;
  padding-top: 80px;
}
/* スマホ用メニュー項目 */
.spMenuItem {
  list-style: none;
  margin-bottom: 48px;
}
/* スマホ用メニュー項目のリンク */
.spMenuLink {
  display: block;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  color: #333333;
  text-decoration: none;
  padding: 9px 15px 10px 0;
}
/* ハンバーガーボタンを押してチェックがONの時だけ
   スマホ用メニューを画面左端に移動する */
#spMenuCheck:checked ~ .spMenuContent {
  left: 0;
}
/* 変更箇所はコメントの項目のみ */
.spMenuContent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;                 /* 普段は画面外にするために左端を画面右端の位置にする */
  left: 100%;
  z-index: 900;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.5s;   /* 右端からゆっくり移動するように表示 */
}
/*トップ画像*/
main p.mainImg img {
    width: 100%;
    height: 40vw; /*vwを指定したい画像の高さ(545px)÷vewportの幅(1366px)×100*/
    object-fit: cover;
    margin-bottom: 160px;
}
/*見出し関連*/
h1 {
    text-align: center;
    font-family: 'Noto Serif JP';
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 16px;
}
h2 {
    font-family: 'Noto Serif JP';
    color: #223E69;
    margin-bottom: 48px;
    display: block;
}
.titleLine {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.titleLine::before,
.titleLine::after {
    content: '';
    width: 60px;
    height: 1px;
    background-color: #223E69;
}
.titleLine::before {
    margin-right: 8px;
}
.titleLine::after {
    margin-left: 8px;
}
h3 {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px;
}
/*コンセプト*/
.conceptText{
    font-size: 16px;
    line-height: 2;
    max-width: 1020px;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: auto;
    margin-right: auto;
}
#conceptSec {
    margin-bottom: 160px;
}
/*サービス*/
li p.serviceImg img {
    width: 300px;
    height: 221px;
    margin-bottom: 15px;
}
h4 {
    font-size: 24px;
    font-family: 'Noto Serif JP';
    text-align: center;
    margin-bottom: 16px;
}
.serviceTextArrow {
    margin-left: 4px;
    display: inline-block;
    border-style: solid;
    border-width: 0.5em 0.5em 0.5em 0.5em;
    border-color: transparent transparent transparent #333333;
    transform: translateY(0.1em) scale(0.6);
}
.arrow {
    text-align: right;
}
.arrow > a {
  position: relative;
}
.arrow > a::after {
    position: absolute; /*親要素であるaタグを基準に位置を指定*/
    left: 0;            /*アンダーラインを各メニュー（aタグ）の左端に指定*/
    content: '';        /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
    width: 91%;        /*アンダーラインを各aタグの幅に合わせる*/
    height: 1px;        /*アンダーラインの高さ（太さ）*/
    background: rgba(51,51,51,0.5);/*アンダーラインの色*/
    bottom: 1px;               /*アンダーラインがaタグの下端から現れる*/
    transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: transform 0.3s; /*変形の時間*/
}
.arrow > a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}
.serviceText {
    width: 300px;
    line-height: 1.6;
}
.serviceContents {
    display: flex;
    width: 1020px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
}
#serviceSec {
    margin-bottom: 160px;
}
/*フロー*/
.titleLine2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.titleLine2::before,
.titleLine2::after {
    content: '';
    width: 60px;
    height: 1px;
    background-color: #B71B26;
}
.titleLine2::before {
    margin-right: 8px;
}
.titleLine2::after {
    margin-left: 8px;
}
span.h2Red {
    color: #B71B26;
    font-family: 'Noto Serif JP';
    display: block;
}
.innerFlow {
    width: 1366px;  
    background-color: rgba(34, 62, 105, 0.05);
    padding: 48px 223px;
}
ol.flowImg {
    font-size: 28px;
    writing-mode: vertical-lr;
    text-align: center;
    width: 920px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
ol.flowImg li {
    background-color: #333333;
    color: #FFFFFF;
    width: 60px;
    height: 280px;
    border-radius: 60px;
    line-height: 60px;
}
.flowTriangle1 {
    width: 0;
    height: 0;
    border-left: 30px solid rgba(183,27,38,0.6);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    margin-top: auto;
    margin-bottom: auto;
}
.flowTriangle2 {
    width: 0;
    height: 0;
    border-left: 30px solid rgba(183,27,38,0.7);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    margin-top: auto;
    margin-bottom: auto;
}
.flowTriangle3 {
    width: 0;
    height: 0;
    border-left: 30px solid rgba(183,27,38,0.8);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    margin-top: auto;
    margin-bottom: auto;
}
.flowTriangle4 {
    width: 0;
    height: 0;
    border-left: 30px solid rgba(183,27,38,0.9);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    margin-top: auto;
    margin-bottom: auto;
}
.flowTriangle5 {
    width: 0;
    height: 0;
    border-left: 30px solid rgba(183,27,38,1);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    margin-top: auto;
    margin-bottom: auto;
}
#flowSec {
    margin-bottom: 160px;
}
/*Q＆A*/
#qaSec {
    margin-bottom: 160px;
}
.qaContents {
    width: 1020px;
    margin-left: auto;
    margin-right: auto;
}
.qaContents .QA dt,
.qaContents .QA dd {
    display: flex;
    align-items: baseline;
    margin: 16px 0;
}
.qaContents .QA dt p,
.qaContents .QA dd p {
    margin: 0;
    padding-left: 8px;
    font-weight: normal;
    font-size: 20px;
    width: 960px;
}
.qaContents .QA dt::before {
    content: "Q.";
    display: flex;
    justify-content: center;
    background-color: #333333;
    color: #FFFFFF;
    font-size: 34px;
    font-family: 'Noto Serif JP';
    font-weight: bold;
    width: 52px;
    height: 52px;
    border-radius: 50px;
    padding-left: 5px;
}
.qaContents .QA dd::before {
    content: "A.";
    display: flex;
    justify-content: center;
    /*
    align-items: center;
    */
    background-color: #B71B26;
    color: #FFFFFF;
    font-size: 34px;
    font-family: 'Noto Serif JP';
    font-weight: bold;
    width: 52px;
    height: 52px;
    border-radius: 50px;
    padding-left: 5px;
}
/*問い合わせ*/
.innerContact {
    width: 1366px;  
    background-color: rgba(34, 62, 105, 0.15);
    font-size: 20px;
    padding: 48px 0;
    margin-bottom: 280px;
    margin-left: auto;
    margin-right: auto;
}
form {
    width: 1020px;
    margin: 0 auto;
    padding: 48px 16px;
    background-color: rgba(255, 255, 255, 0.5);
}
input[type="text"],
input[type="email"],
textarea {
    border: 0;
    background-color: #FFFFFF;
    margin-left: 12px;
    vertical-align: middle;
    width: 664px;
    height: 208px;
}
/*ラジオボタンのデザイン変更など*/
.visuallyHidden {
  position: absolute; /* コンテンツの流れから切り離す */
  white-space: nowrap; /* 誤ったコードに対処するための回避策 */
  /* 可能な限り文字サイズを小さくするための処理(スクリーンリーダー中には height と width が 0 のものを無視するため)*/
  width: 1px;
  height: 1px;
  overflow: hidden;   /* オーバーフローしているコンテンツを隠す */
  /* 要素サイズを変更しうるプロパティのリセット */
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);         /* 要素のどの部分が表示されるかを定義するもの。古いブラウザでは使用できない */
  clip-path: inset(50%);       /* 最近のブラウザ用。コンテンツを非表示にする設定 */
  margin: -1px;
  /* 今現在なぜ-1pxがここで設定されるかは分かっていないそうです。それに加えていくつか問題もあるそうです。
   * (参考: https://github.com/h5bp/html5-boilerplate/issues/1985) */
}
.radioLabel {
    position: relative;
    cursor: pointer;
    padding-left: 35px;
}
.radioLabel::before,
.radioLabel::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
.radioLabel::before {
  background-color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  left: 5px;
}
.radioLabel::after {
  background-color: rgba(183,27,38,0.7);
  border-radius: 50%;
  opacity: 0;
  width: 16px;
  height: 16px;
  left: 9px
}
input:checked + .radioLabel::after {
  opacity: 1;
}
.radioText {
    font-size: 20px;
    margin-right: 40px;
}
.required {
    color:#FFFFFF;
    background-color: #B71B26;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 8px 3px;
    margin-left: 8px;
}
.contactList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 980px;
}
.contactList dt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 304px;
}
.contactList dt.contactListText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 304px;
}
.contactList dd {
  display: flex;
  align-items: center;
  width: 664px;
  margin-left: 0;
  padding: 10px;
}
input.inputText01 {
    width: 332px;
    height: 52px;
}
input.inputText02 {
    width: 222px;
    height: 52px;
}
input.inputText03 {
    width: 664px;
    height: 52px;
}
input[type="submit"] {
    background-color: #333333;
    color: #FFFFFF;
    width: 300px;
    height: 68px;
    padding-left: 55px;
    margin-top: 46px;
}
.submitBtnDiv {
    display:inline-block;
    position:relative;
}
.submitBtnDiv::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 27px;
    top: 65px;
    border-style: solid;
    border-width: 0.8em 0.8em 0.8em 0.8em;
    border-color: transparent transparent transparent #ffffff;
    transform: scale(0.6);
}
input[type="submit"]:hover {
    background-color: #B71B26;
    transition-property: background-color;
    transition-duration: 100ms;
    transition-delay: 0ms;
}
/*フッター*/
footer {
    background-color: #333333;
    color: #FFFFFF;
    height: 62px;
    font-family: 'Noto Serif JP';
    font-size: 14px;
    margin: 0 auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*トップへ戻るボタン*/
.pageTop {
    position: sticky;
    bottom: 20px;
    margin-left: auto;
    margin-right: 24px;
    height: 60px;
    width: 60px;
    background: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pageTopArrow {
    height: 30px;
    width: 30px;
    border-top: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    transform: translateY(30%) rotate(-45deg);
}
.pageTop:hover {
    background: rgba(51,51,51,0.8);
}
section::before {
  content:'';
  display: block;
  padding-top: 100px;
  margin-top: -100px;
}
/*768px以下レスポンシブデザインここから*/
@media screen and (max-width: 768px) {
body {
  font-family: 'Noto Sans JP', 'Noto Serif JP', sans-serif;
  font-size: 16px;
  color: #333333;
  width: 375px;
  margin-left: auto;
  margin-right: auto;
}
/*ヘッダー*/
header {
    display: flex;
    height: 52px;
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
}
.mainMenu {
    margin: 0 auto;
    display: flex;
    width: 375px;
}
/* ロゴ用 */
.logo {
  text-align: center;
  padding: 16px 0 16px 12px;
  width: 252px;
  background: #FFFFFF;
}
.logo p img {
    width: 240px;
}
/*PC版を無効に*/
header nav ul {
    font-family: 'Noto Serif JP';
    display: flex;
    justify-content: flex-end;
}
header nav ul li {
    margin: 0px 0px;
}
header nav {
    margin-left: 0;
}
/*トップ画像*/
main p.mainImg img {
    width: 375px;
    height: 480px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 48px;
}
/*見出し関連*/
h1 {
    text-align: center;
    font-family: 'Noto Serif JP';
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 8px;
}
h2 {
    font-family: 'Noto Serif JP';
    color: #223E69;
    font-size: 12px;
    margin-bottom: 24px;
    display: block;
}
.titleLine {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
h3 {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 16px;
}
/*コンセプト*/
.conceptText{
    font-size: 14px;
    line-height: 2;
    width: 351px;
    margin-left: auto;
    margin-right: auto;
}
#conceptSec {
    margin-bottom: 80px;
}
*フッター*/
footer {
    background-color: #333333;
    color: #FFFFFF;
    height: 45px;
    font-family: 'Noto Serif JP';
    font-size: 12px;
    margin: 0 auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*トップへ戻るボタン*/
.pageTop {
    position: sticky;
    bottom: 20px;
    margin-left: auto;
    margin-right: 12px;
    height: 46px;
    width: 46px;
    background: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pageTopArrow {
    height: 24px;
    width: 24px;
    border-top: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    transform: translateY(30%) rotate(-45deg);
}
section::before {
  content:'';
  display: block;
  padding-top: 60px;
  margin-top: -60px;
}

}
/*メニューのレスポンシブデザインここから*/
/* 画面サイズが1123px以下の時はPC用メニューは非表示 */
@media screen and (max-width: 1123px) {
  .pcMenu {
    display: none;
  }
}
/* 画面サイズが1124px以上の時はスマホ用メニューは非表示 */
@media screen and (min-width: 1124px) {
  .spMenu {
    display: none;
  }
}
/*サービスのレスポンシブデザインここから*/
@media screen and (max-width: 1040px) {
/*サービス*/
li p.serviceImg img {
    width: 351px;
    height: 246px;
    margin-bottom: 8px;
}
h4 {
    font-size: 20px;
    font-family: 'Noto Serif JP';
    text-align: center;
    margin-bottom: 8px;
}
.arrow {
    text-align: right;
    font-size: 14px;
    margin-bottom: 48px;
}
.serviceText {
    width: 351px;
    line-height: 1.6;
    font-size: 14px;
}
.serviceContents {
    display: block;
    width: 351px;
    margin-left: auto;
    margin-right: auto;
}
#serviceSec {
    margin-bottom: 80px;
}
}
/*フローとQ&Aと問い合わせのレスポンシブデザインここから*/
@media screen and (max-width: 1200px) {
span.h2Red {
    color: #B71B26;
    font-family: 'Noto Serif JP';
    display: block;
    font-size: 12px;
}
.innerFlow {
    width: 375px;  
    background-color: rgba(34, 62, 105, 0.05);
    padding: 16px 38px;
    margin-left: auto;
    margin-right: auto;
}
ol.flowImg {
    font-size: 16px;
    writing-mode: horizontal-tb;
    text-align: center;
    height: 352px;
    width: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
ol.flowImg li {
    background-color: #333333;
    color: #FFFFFF;
    width: 300px;
    height: 32px;
    border-radius: 60px;
    line-height: 32px;
}
.flowTriangle1 {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid rgba(183,27,38,0.6);
    border-right: 16px solid transparent;
    border-bottom: 0px;
    margin: 8px auto;
}
.flowTriangle2 {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid rgba(183,27,38,0.7);
    border-right: 16px solid transparent;
    border-bottom: 0px;
    margin: 8px auto;
}
.flowTriangle3 {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid rgba(183,27,38,0.8);
    border-right: 16px solid transparent;
    border-bottom: 0px;
    margin: 8px auto;
}
.flowTriangle4 {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid rgba(183,27,38,0.8);
    border-right: 16px solid transparent;
    border-bottom: 0px;
    margin: 8px auto;
}
.flowTriangle5 {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-top: 16px solid rgba(183,27,38,0.8);
    border-right: 16px solid transparent;
    border-bottom: 0px;
    margin: 8px auto;
}
#flowSec {
    margin-bottom: 80px;
}
/*Q＆A*/
#qaSec {
    margin-bottom: 80px;
}
.qaContents {
    width: 351px;
    margin-left: auto;
    margin-right: auto;
}
.qaContents .QA dt,
.qaContents .QA dd {
    display: flex;
    align-items: baseline;
    margin: 16px 0;
}
.qaContents .QA dt p,
.qaContents .QA dd p {
    margin: 0;
    padding-left: 8px;
    font-weight: normal;
    font-size: 16px;
    width: 308px;
}
.qaContents .QA dt::before {
    content: "Q.";
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    color: #FFFFFF;
    font-size: 20px;
    font-family: 'Noto Serif JP';
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50px;
}
.qaContents .QA dd::before {
    content: "A.";
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #B71B26;
    color: #FFFFFF;
    font-size: 20px;
    font-family: 'Noto Serif JP';
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50px;
}
/*問い合わせ*/
.innerContact {
    width: 375px;  
    background-color: rgba(34, 62, 105, 0.15);
    font-size: 16px;
    padding: 16px 0;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
}
form {
    width: 351px;
    margin: 0 auto;
    padding: 0;
    background-color: rgba(255, 255, 255, 0);
}
input[type="text"],
input[type="email"],
textarea {
    border: 0;
    background-color: #FFFFFF;
    margin-left: 0px;
    vertical-align: middle;
    width: 351px;
    height: 120px;
}
.radioLabel {
    position: relative;
    cursor: pointer;
    padding-left: 25px;
}
.radioLabel::before {
  background-color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  left: 5px;
}
.radioLabel::after {
  background-color: rgba(183,27,38,0.7);
  border-radius: 50%;
  opacity: 0;
  width: 10px;
  height: 10px;
  left: 8px
}
.radioText {
    font-size: 14px;
    margin-right: 40px;
}
.required {
    color:#FFFFFF;
    background-color: #B71B26;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px 3px;
    margin-left: 4px;
}
.contactList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    width: 351px;
    margin-left: auto;
    margin-right: auto;
}
.contactList dt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 351px;
    margin-bottom: 8px;
    margin-top: 24px;
}
.contactList dt.addDt {
    margin-top: 0px;
}
.contactList dd {
  display: flex;
  align-items: center;
  width: 351px;
  margin-left: 0;
  padding: 0px;
}
.contactList dd.contactRadioSP {
    margin-left: 73px;
}
input.inputText01 {
    width: 351px;
    height: 30px;
}
input.inputText02 {
    width: 125px;
    height: 30px;
}
input.inputText03 {
    width: 351px;
    height: 30px;
}
input[type="submit"] {
    background-color: #333333;
    color: #FFFFFF;
    width: 200px;
    height: 48px;
    padding-left: 20px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
}
.submitBtnDiv {
    display:inline-block;
    position:relative;
}
.submitBtnDiv::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 11px;
    top: 30px;
    border-style: solid;
    border-width: 0.8em 0.8em 0.8em 0.8em;
    border-color: transparent transparent transparent #ffffff;
    transform: scale(0.6);
}
input[type="submit"]:hover {
    background-color: #B71B26;
    transition-property: background-color;
    transition-duration: 100ms;
    transition-delay: 0ms;
}
}