@charset "UTF-8";

/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
html, body {
	height: 100%;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
input, button, textarea, select {
	font: inherit;
	font-family: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	font-family: inherit;
}
#root, #__next {
	isolation: isolate;
}

/*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/

/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){
	all: unset;
	display: revert;
}

/* box-sizingの優先値 */
*,
*::before,
*::after{
	box-sizing: border-box;
}

/* リストのスタイル（箇条書き・番号）を削除します */
ol, ul {
	list-style: none;
}

/* 画像がコンテナを超えないようにするため */
img {
	max-width: 100%;
}

/* テーブルのセル間のスペースを削除します */
table{
	border-collapse: collapse;
}

html {
	font-size: 62.5%;
}
body {
	font-family: Noto Sans JP;
	font-weight: 400;
	font-size: 1.6rem;
}
header {
	/*padding-top: 10px; 齋藤さんに確認*/ 
}
a {
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    color: #196ab9;
    text-decoration: underline;
    font-weight: bold;
}
main {
	width: 100%;
	padding: 4em 0;
}
.container {
	/*max-width: 640px;*/
	max-width: 800px; /*BBは幅800pxに*/
	margin: 0 auto;
}
.container section.container-wrapper {
	text-align: left;
}
.container section.container-wrapper section {
	margin-top: 0;
	margin-bottom: 3rem;
}
body.pt-question .container section.container-wrapper section {
	margin-bottom: 0;
}
.content-title {
	font-family: Montserrat, Noto Sans JP;
	font-weight: 400;
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}
.page-title {
	font-family: Montserrat, Noto Sans JP;
	font-weight: 400;
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
	text-align: center;
}
.question-title {
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
	text-align: center;
}
.pt-question .question-title {
	font-size: 2.4rem;
	font-weight: bold;
	display: block;
	width: 100%;
	margin: 1em auto;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
}
.pt-form .question-title {
	display: inline-block;
	font-weight: bold;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.4rem;
	text-align: left;
	display: flex;
	align-items: center;
	flex-direction: row;
}
.pt-form .question-title:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-bottom: -.1em;
  line-height: 1em;
  vertical-align:baseline;
  background-color: var(--theme-primary-color);
  margin-right: 0.5em;
}
/*BBは質問全てに必須・任意アイコンを表示する*/
.question-title span.rewuired-icon {
	background: #eddbd2;
	color: #ff0000;
	font-size: 1rem;
	font-weight: 300;
	padding: 0.5em 1em;
	border-radius: 3px;
	line-height: 1;
	vertical-align: baseline;
	margin-left: 5px;
	display: inline-block;
}
.question-title span.optional-icon {
    background: #e5eff5;
    color: #1d4a68;
	font-size: 1rem;
	font-weight: 300;
	padding: 0.5em 1em;
	border-radius: 3px;
	line-height: 1;
	vertical-align: baseline;
	margin-left: 5px;
	display: inline-block;
}

p.q-count {
	display: none; /*BBは非表示をデフォルトとする*/
	font-family: Montserrat;
	font-weight: 400;
	font-size: 2rem;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}
figure.main-img,
.form-group.image {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2rem;
}
figure.main-img img,
.form-group.image img {
    width: 50%;
}



label { 
	display: block;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input.radiobutton::before {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.6rem;
	color: var(--q-list-icon-color);
	content: '\f192';
}
input.radiobutton:checked::before {
	color: var(--q-list-select-icon-color);
}



.container section.container-wrapper {
	display: flex;
	flex-direction: column;
	margin: 0 6% 6rem;
}
body.pt-question .container section.container-wrapper .section-inner {
	background: var(--theme-secondary-color);
	padding: 2em 6% 0;
}
body.pt-question .container section.container-wrapper section:last-of-type .section-inner {
	padding-bottom: 4em;
}
body.pt-contents.top .container section.container-wrapper {
	margin: 0;
}
/*
body.pt-question .container section.container-wrapper section:first-of-type .section-inner {
}
body.pt-question .container section.container-wrapper:has(> :nth-child(-n+1):last-child) section:first-of-type .section-inner {

}
*/




/* 選択肢デフォルトUI */
ul.q-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
ul.q-list li {
	padding: 0;
	width: 47%;
	margin: 1rem 0;
	font-weight: 500;
	display: flex;
}
ul.q-list li input {
	/*display: none; バリデーションエラー表示のためdisplay:none;はNG */
	visibility: hidden;
	cursor: pointer;
/* 必須エラートリガーのためinputの大きさを残す
	width: 0;
	height: 0;
*/
	/*margin: 0 -5px;*/
	margin: 0 -8px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ul.q-list li label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	background: var(--q-list-bg-color);
	border: solid 2px var(--theme-accent-color);
	padding: 1em;
	border-radius: 6px;
	font-size: 1.6rem;
	width: 100%;
	cursor: pointer;
}


body.pt-form ul.q-list li label {
	/*background: var(--theme-accent-color);*/
	background: var(--light-gray);
	border: solid 2px var(--gray);
}




/*カラム指定あり*/
ul.q-list.column3 {
}
ul.q-list.column1 li {
    width: 100%;
}
ul.q-list.column2 li {
    width: 47%;
}
ul.q-list.column3 li {
    width: 32%;
}

ul.q-list.column3::after{
  content: "";
  display: block;
  width: 32%;
}
ul.q-list.column3 li label {
	justify-content: center;
}


/*ラジオボタン*/
ul.q-list li input.radiobutton:checked + label {
	background: var(--q-list-select-bg-color);
	box-shadow: 0px 0px 6px #cccccc;
	color: var(--q-list-select-text-color);
}
ul.q-list li input.radiobutton + label::before {
/*	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.6rem;
	color: var(--q-list-icon-color);
	content: '\f192';
	margin-right: 8px;
*/
	content: "";
    border: 2px solid var(--theme-accent-color);
    box-sizing: border-box;
    width: 1.6em;
    height: 1.6em;
    border-radius: 2em;
    background: #ffffff;
    vertical-align: middle;
    margin-right: 8px;
}
ul.q-list li input.radiobutton:checked + label::before {
	border: 5px solid var(--q-list-select-icon-color);
}
ul.q-list li input.radiobutton:checked + label {
    box-shadow: none;
    border: 2px solid var(--q-list-select-icon-color);
}
ul.q-list.column3 li input.radiobutton + label::before {
	display: none;
}

/*チェックボタン*/
ul.q-list li input.checkbutton + label::before {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.6rem;
	color: var(--q-list-icon-color);
	content: '\f111';
	margin-right: 8px;
}
ul.q-list li input.checkbutton:checked + label::before {
  content: '\f058';
	color: var(--q-list-select-icon-color);
}

ul.q-list.column3 li input.checkbutton + label::before {
	display: none;
}


/* 画像あり選択肢(input-cards) */
ul.q-list li.q-input-cards label {
	justify-content: center;
	flex-direction: column;
	font-size: 1.6rem;
	justify-content: space-between;
}
ul.q-list li.q-input-cards label::before {
    display: none;
}


ul.q-list li.q-input-cards label span {
    width: 64%;
    display: block;
    font-weight: bold;
}

ul.q-list li.q-input-cards label img {
    width: 32%;
    display: block;
}

ul.q-list li.q-input-cards label {
    flex-direction: row-reverse;
    box-sizing: border-box;
    padding: 1em;
}


/* テキストボックス */
.text-container input[type="text"],
.text-container input[type="password"] {
	border: solid 1px var(--theme-accent-color);
	background: var(--theme-secondary-color);
	border-radius: 6px;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 0.75em 1em;
	width: 100%;
	/*margin: 1em;*/
}
body.pt-question .text-container input[type="text"],
body.pt-question .text-container input[type="password"] {
	border: solid 1px var(--theme-accent-color);
	background: var(--white);
	width: 100%;
}
/* セレクトボックス */
.form-group.select {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.select-container {
	width: 100%;
	position: relative;
}
.select-container select {
	border: solid 1px var(--theme-accent-color);
	background: var(--theme-secondary-color);
	border-radius: 6px;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 0.75em 1em;
	width: 100%;
	cursor: pointer;
}
body.pt-question .select-container select {
	border: solid 1px var(--theme-accent-color);
	background: var(--white);

}
.select-container::after {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 2rem;
	content: '\f0dd';
	margin-right: 8px;
	position: absolute;
	top: 7px;
	right: 8px;
	pointer-events: none;
}
/* 日付 */
.date-container input.txt {
	background: var(--q-list-bg-color);
	border-radius: 6px;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 0.75em 1em;
	width: 60%;
	/*margin: 1em;*/
}
/* テキストエリア */
.text-container textarea {
	border: 2px solid var(--theme-accent-color);
	background: var(--q-list-bg-color);
	border-radius: 6px;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 0.75em 1em;
	width: 100%;
	resize: vertical;
	text-align: left;
}









/* 単一選択タイプ(form-group9) */


/* 複数選択タイプ(form-group1) */
/* 複数選択[画像あり]タイプ(form-group1) */
.form-group1 ul.q-list.input-checks li input,
.form-group11 ul.q-list.input-checks li input {
    margin: 0;
}
.form-group1 ul.q-list.input-checks input:checked + label,
.form-group11 ul.q-list.input-checks input:checked + label {
	background: var(--q-list-select-bg-color);
	outline: solid 2px var(--theme-primary-color);
	outline-offset: -2px;
	color: var(--q-list-select-text-color);
}


/* 段階選択 - テキストタイプ(form-group14) ※カラム幅は自動調節、折り返しアリ */
.form-group14 ul.q-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	/*margin: 0 7.5%;*/
}
.form-group14 ul.q-list li {
	width: auto;
	margin: 1%;
	flex: 1; /*BBテーマでは均等幅に設定*/
	align-items: center;
	text-align: center;
}
.form-group14 ul.q-list li label {
	justify-content: center;
	font-size: 1.4rem;
}
.form-group14 ul.q-list-3cols li .radiobutton::before {
	display: none;
}
.form-group14 ul.q-list li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/*padding: 0.75em 1.25em;*/
	padding: 0.75em;
	background: var(--q-list-bg-color);
	border-radius: 6px;
}
.form-group14 ul.q-list li input.radiobutton:checked + label span{
	color: var(--q-list-select-text-color);
	background: var(--q-list-select-bg-color);
}
.form-group14 ul.q-list li input.radiobutton + label {
	box-shadow: none;
	background: none;
	padding: 0;
}
.form-group14 ul.q-list li input.radiobutton + label::before {
	display: none;
}
@media screen and (max-width:768px){
	.form-group14 ul.q-list {
	    flex-direction: column;
	}
}


/* 段階選択 - ドットタイプ(form-group2) ※カラム幅は固定、折り返しナシ */
.form-group2 ul.q-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	padding: 6% 6% 2%;
	background: var(--white);
	border: 2px solid var(--theme-accent-color);
}
.form-group2 ul.q-list::before {
	content: "";
	width: 100%;
	height: 4px;
	background: var(--gray);
}
.form-group2 ul.q-list li {
	display: flex;
	flex-direction: column;
	width: 1.6rem;
	margin-top: -14px;
	padding: 0;
}
.form-group2 ul.q-list li label {
	box-shadow: none;
	background: none;
	padding: 0;
	justify-content: center;
	font-size: 1.4rem;
	border: none;
}
.form-group2 ul.q-list li input {
	visibility: visible;
	width: auto;
	height: auto;
	margin-left: 0;
}
.form-group2 ul.q-list li input::before {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.6rem;
	color: var(--gray);
	content: '\f111';
}
.form-group2 ul.q-list li input:checked::before {
	color: var(--theme-primary-color);
}
.form-group2 ul.q-list li input:checked + label span {
	color: var(--q-list-text-color);
}
.form-group2 ul.q-list li input.radiobutton:checked + label {
	box-shadow: none;
	background: none;
	border: none;
}
.form-group2 ul.q-list li input.radiobutton + label::before {
	display: none;
}

/* 二択タイプ(form-group13) */
.form-group13 ul.q-list li label {
    background: var(--q-list-bg-color);
    flex-direction: column-reverse;
    align-items: center;
    padding: 1em;
}
.form-group13 ul.q-list li input.radiobutton + label::before {
    font-size: 2.4rem;
	content: '\f111';
	margin-right: 0;
	display: none; /*BBテーマでは使用しない*/
}
.form-group13 ul.q-list li input.radiobutton:checked + label::before {
	content: '\f058';
	color: var(--theme-primary-color);
}
.form-group13 ul.q-list li input.radiobutton:checked + label {
	/*background: none;*/
	box-shadow: none;
	color: var(--q-list-text-color);
}
@media screen and (max-width: 768px) {
	.form-group13 ul.q-list li {
	    width: 47%; /*二択なのでベースは横並び*/
	}
	.form-group13 ul.q-list.column1 li {
	    width: 100%;
	}
}



section.act_buttons {
	margin-top: 2rem;
	margin-bottom: 5rem;
}
section.act_buttons div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
	letter-spacing: 0.1em;
}
/* 斎藤さんに確認
section.act_buttons div.btn-double {
    display: block;
}
*/
section.act_buttons button {
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
section.act_buttons button.btn.start {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 60%;
	background: var(--button-color);
	color: var(--button-text-color);
	height: 48px;
	text-align: center;
}
section.act_buttons button.btn.start span {
	width: 75%;
}
section.act_buttons button.btn.back {
	width: 25%;
	text-align: left;
	/*margin-left: 6%;*/
	/* float: left; */
	height: 48px;
}
section.act_buttons button.btn.next {
	width: 45%;
	background: var(--button-color);
	color: var(--button-text-color);
	height: 48px;
	text-align: center;
	/*margin-right: 6%;*/
	/* float: right; */
}
section.act_buttons button.btn.back + button.btn.next {
	/*width: 60%;*/
	width: 50%;
}
section.act_buttons button.btn.next:disabled {
	background: #eee;
	color: #ccc;
}
section.act_buttons button.btn.start::after {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.6rem;
	content: '\f178';
	margin-right: 8px;
	width: 10%;
}
section.act_buttons button.btn.back::before {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.6rem;
	content: '\f177';
	margin-right: 8px;
}


/* プログレスバー */
progress {
    position: absolute;
    width: 100%;
    height: 8px;
	display: none;
	background: var(--progress-bg-color);
}
progress::-webkit-progress-bar {
	background: var(--progress-bg-color);
}
progress::-moz-progress-bar {
	background: var(--progress-color);
}

progress::-webkit-progress-value {
	background: var(--progress-color);
}
body.pt-question progress,
body.pt-form progress {
    display: block;
}


/* エラーぺージ */
body.pt-error main {
	display: flex;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}
body.pt-error main .container {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-error-box {
    display: flex;
    justify-content: center;
	margin-top: -6rem;
}
.page-error-box p {
    letter-spacing: 0.1em;
	text-align: center;
}



.step_info {
    margin-bottom: 1.5rem;
}




body.pt-loading main .circular .circle .bar .progress,
body.pt-loading main .circular .circle .dot span {
	background: var(--progress-color);

}

body.pt-loading .loading::before {
	background: var(--progress-color);
    color: #fff;
    font-family: Montserrat, Noto Sans JP;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}
body.pt-loading .circular .loading::before {
	background: #fff;
	background: var(--progress-color);
}



@media screen and (max-width:768px){
	body.pt-question .container section.container-wrapper {
		margin: 0 0 6rem;
	}

	ul.q-list li {
		width: 100%;
	}

	ul.q-list li.q-input-cards {
	/*width: 43%;*/
	}

	.text-container input[type="text"] {
		/*width: 85%;*/
	}
	.select-container {
		/*width: 85%;*/
	}
	figure.main-img img,
	.form-group.image img {
		width: 60%;
	}
	.date-container input.txt {
		width: 85%;
	}
	.text-container textarea {
		/*width: 85%;*/
	}
}

@media screen and (max-width:590px){
	 ul.q-list li.q-input-cards label {
	    flex-direction: column;
	}
	ul.q-list li.q-input-cards label span {
	    width: 100%;
	    text-align: center;
		margin-bottom: 1rem;
	}
	ul.q-list li.q-input-cards label img {
		width: 80%;
	}
}


/* アニメーション */

/*ズームイン*/
.anim-box.zoomin {
  animation: zoomin 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomin {
	0% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}
/*フラッシュ*/
.anim-box.flash{
  animation: flash 2.5s linear infinite;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/* calendar */
.modal {
/*	width: 100%;*/
	width: 100vw;
	height: calc(var(--vh, 1vh) * 100);
	position: fixed;
	top: 0;
/*	left: 0;*/
	left: 50%;
	background: #1c1b1b;
	opacity: 0.0;
	transition: 0.4s;
	z-index: 9;
	transform: translateX(-50%);
}

.d-none {display:none;}
/* 日付 */
.date-container,
.text-container {
	position: relative;
	width: 100%;
}

.date-container input[type="text"] {
	flex-grow: 1;
	padding: 0.7rem 0 0.7rem 0.8rem;
	border: 1px solid #333;
	border-radius: 1.5rem;
}

.date-container button {
	position: absolute;
	top: 0;
	right: 21%;
	cursor: pointer;
	padding: 1em;
	border-radius: 0;
	border: none;
	background: none;
	color: #333;
	font-size: 1rem;
	transition: 0.5s;
}

.fa {
	font-size: 2.5rem;
}

/*全体*/
div[class^="calendar_wrapper"] {
	width: 340px;
	color: #666;
	z-index: 10;
	padding: 10px;
	background: #ffffff;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
border-radius: 10px;
outline: solid 1px #efefef;
	box-shadow: 0 1px 24px 0 rgb(0 0 0 / 8%);
}

div[id^="calendar"] {
	text-align: center;
	width: 100%;
	background: #ffffff;
}

div[id^="calendar_header"] {
	font-family: "Lato", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: right;
	width: 100%;
/*	margin: 1rem 0 0;*/
	background: #ffffff;
	color: #222222;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.weekdays {
	width: 100%;
	height: 5rem;
	display: flex;
	align-items: center;
}
.weekdays div {
	font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1.4rem;
	font-weight: bold;
	color: #222222;
	width: calc(320px / 7);
	display: flex;
	justify-content: center;
	align-items: center;
}

.days {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.days div {
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	font-size: 1.4rem;
	width: calc(100% / 7);
	height: calc(320px / 7);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.2s;
}

/*日曜日*/
.days div:nth-of-type(7n+1) {
	color: red;
}
/*土曜日*/
.days div:nth-of-type(7n) {
	color: blue;
}
/*前後月の日付*/
.days div.disabled {
	color: #ccc;
}
/*本日*/
.days div.today {
	border-radius:50%;
	background-color: #fc6b03;
	color: #fff;
}

.days div:hover:not(.today):not(.no-pointer) {
	cursor: pointer;
}


button[id^="prev-month_"],
button[id^="next-month_"] {
	background-color: #ffffff;
	color: #222222;
	font-size: 3rem;
	line-height: 1;
	margin: 1rem;
	margin-top: 0.5rem;
}
button[id^="prev-month_"] {
}

button[id^="next-month_"] {
}

div.calendar_ok {
	text-align: right;
}

div.calendar_ok button {
	text-align: right;
	background-color: #fc6b03;
	color: #fff;
	padding: 0.7em 2.5em;
	margin: 1rem;
}

/*******************************************************************************
/* バリデーション
*******************************************************************************/
.raku2_validate_target {
    background-color: #ffffe7 !important;
}
.raku2_validate_error {
    background-color: #F0DFDF !important;
}
.raku2_validate_focus {
    background-color: #e7f7f6 !important;
    outline: none;
    border: 2px solid #1cbaa5 !important;
}
[class^="raku2_validate_bubble"] {
    color: white;
    position: absolute;
	background-color: #c61616;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0px 2px 3px #888;
    opacity: 0.9;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.2em;
    white-space: normal;
	max-width: 85%;
    z-index: 9999;
}
[class^="raku2_validate_bubble"]::before {
    position: absolute;
    bottom: -6px;
    width: 14px;
    height: 7px;
    background-color: #c61616;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.raku2_validate_box {
    position: fixed;
    top: 300px;
    right: 60px;
    min-width: 215px;
    background-color: #cd0a0a;
    border-radius: 20px;
}
.raku2_validate_box div {
	/* font-size: 1.5em; */
	padding: 10px 20px;
	margin: 2px 3px;
	text-align: center;
	border-radius: 20px 20px 0 0;
}
.raku2_validate_box .raku2_validate_message {
	background-color: white;
}
.raku2_validate_box .raku2_validate_count {
	background-color: #c61616;
	color: white;
	border-radius: 20px;
}

button.raku2_incomplete {
    line-height: 1.6em;
    border-radius: 4px;
    padding: 10px 20px;
    margin: 10px;
    font-size: 133%;
    min-width: 220px;
    background: #c61616;
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

button.raku2_incomplete span {
    margin-right: 5px;
    font-size: 133%;
}

table#entry_input span[class^="raku2_valid_circle"],
table#entry_input span[class^="raku2_valid_circle"] span.material-symbols-sharp,
table.delivname span[class^="raku2_valid_circle"],
table.delivname span[class^="raku2_valid_circle"] span.material-symbols-sharp {
    margin: 0;
}

span[class^="raku2_valid_circle"] {
    position: absolute;
    background-color: #4eb94e;
    border-radius: 50%;
    color: #fff;
}

span[class^="raku2_valid_circle"] span.material-symbols-sharp {
    font-size: 15px;
	display: block;
}

span[class^="raku2_valid_circle"] span.raku2_valid_check {
    content: '';
    width: 7px;
    height: 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

@media screen and (max-width:768px){
	.date-container button {
		right: 10%;
	}

	.modal {
		opacity: 0.5;
	}

	div[class^="calendar_wrapper"] {
		position: fixed;
		top: 15vh;
	}

	.raku2_validate_box {
		position: fixed;
		top: auto;
		right: auto;
		bottom: 0;
		min-width: unset;
		width: 100%;
		background-color: #cd0a0a;
		border-radius: 0;
	}
}