@charset "UTF-8";
html, body {
	height:100%;
	touch-action:manipulation !important;
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 959px) {
  .pc {
    display: none;
  }
}

body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, button, figure, figcaption {
  margin: 0;
  padding: 0;
}

input, textarea {
  margin: 0;
  font-size: 100%;
}

input, textarea, select {
  outline: none;
}

textarea {
  resize: none;
}
input:hover,textarea:hover,select:hover,input:focus,textarea:focus,select:focus{
  background-color: #fffbf3;
}
input[type=radio]:not(:checked) + label,input[type=checkbox]:not(:checked) + label {
	color: #BBBBBB;
	line-height:1.2;
}
input[type=radio]:checked + label, input[type=radio]:hover + label, input[type=radio]:focus + label
,input[type=checkbox]:checked + label, input[type=checkbox]:hover + label, input[type=checkbox]:focus + label{
  font-weight: bold;
  color: #4c4c4c;
	line-height:1.2;
}
.inline-radio {
	display:flex;
}

.inline-radio > div {
	display: inline-flex;
    align-items: center;
    gap: 15px;
    width:100%;
}
.inline-radio > div > input[type=radio] {
	width: 20px !important;
}
@media screen and (max-width: 768px) {
  .inline-radio {
		display:block;
		width:100%;
	}
	.inline-radio > div > input[type=radio] {
		width: 13px !important;
	}
}
select {
  border:solid 2px #ebebeb;
  background:#fff;
  min-width:30px;
}
select::-ms-expand {
  display: none;
}
select.no-select {
	color:#BBBBBB;
}
select option:first-child {
	color:#BBBBBB;
}
select option {
	border:solid 1px gray;
	color:#4c4c4c;
}
*::placeholder {
	font-size:1.4rem;
	color:#BBBBBB;
}

button {
  overflow: visible;
  background: none;
  vertical-align: top;
  font-size: 100%;
  color: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  line-height: 1.75;
}

label {
  cursor: pointer;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#main_contents {	
	display: flex;
    flex-direction: column;
    height: 100%;
    /*position: relative;*/
}
#loading_dialog {
	z-index:9999 !important;
}
#loading_dialog .exec_img {
	text-align:center;
	padding-right:20px;
	padding-left:20px;
	padding-top:5px;
	padding-bottom:5px;
}
[name=err_common_msg_area] {
	text-align:center !important;
}
.form_error {
	border-color:#ff0000 !important;
}
.addclear_wrapper {
	position:relative;
	width: 100%;
}
.error_message {
    color: #ff0000;
    font-size: 1.3rem;
    margin-left: 10px;
    text-align:left;
    font-weight:normal;
}
.common_msg_area {
	display:none;
}
.display-flex {
	display:inline-flex;
}
.text-left {
	text-align:left;
}
.jquery-back-to-top {
	display:none !important;
}
:focus {
	outline:none;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    text-align:center;
    padding:30px;
}
input:-webkit-autofill
{
  -webkit-transition: background-color 9999s;
  transition: background-color 9999s;
}
.add-clear-x {
	top:8px !important;
	right:5px !important;
}
/*スクロールバー*/
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
*::-webkit-scrollbar-thumb{
  background: #999;
  border-radius: 5px;
}
*::-webkit-scrollbar-track-piece {
  background: #efefef;
}
/* ヘッダー
---------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  min-width: 320px;
  background: #000;
}
.header section {
   position: fixed;
   top: 5px;
   left: 20px;
   z-index: 1;
   height:30px;
}
.header-in {
  position: relative;
  width: 100%;
  background-color: #000;
  border-bottom: solid 2px #fff;
  overflow:hidden;
}
.header-in .atrium {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    width: 450px;
    height: 450px;
    top: 50px;
    left: 50%;
    margin-left: 130px;
    transform: translateX(-50%);
}
@media screen and (max-width: 950px) {
	.header-in .atrium {
	    display:none;
	}
}
.header-in::after {
  display: block;
  clear: both;
  content: "";
}

  .header-in {
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /*justify-content: center;*/
    
  }

.header-logo {
  display: block;
  position: relative;
  line-height: 0;
  margin-left:30px;
  padding:5px 0;
}

@media all and (max-width: 950px) {
	.header section {
	   top: 10px;
	}
	.header-logo {
  		margin: 0 auto;
	}
}

@media all and (min-width: 768px) {
  .header-logo-link:hover {
    opacity: 0.75;
    -webkit-transition: opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}
#main_contents.menu-on #btn01 span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
#main_contents.menu-on #btn01 span:nth-of-type(2) {
  opacity: 0;
}
#main_contents.menu-on #btn01 span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(0px) rotate(45deg);
}
.menu-btn {
	width: 230px;
    height: 50px;
    background: #000;
    border-radius: 10px;
    margin-top: 120px;
    transition:all 0.4s ease;
    position: fixed;
    left:0;
    color:#fff;
    z-index:1;
}
.preview .menu-btn {
	display:none;
}
.menu-btn:hover,.menu-btn:focus {
	background:rgba(0,0,0,0.7);
}
#main_contents:not(.menu-on) .menu-btn {
	left:-200px;
}
.menu-btn:before {
	content:"◀";
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-size:15px;
}
#main_contents:not(.menu-on) .menu-btn:before {
	content:"▶";
}

/* フッター大枠
---------------------------------------------------------- */
.footer {
  /* margin-top: 63px; */
  position: relative;
  width: 100%;
  padding: 0;
  background-color: #000;
  color: #fff;
  text-align: center;
}

@media all and (min-width: 960px) {
  .footer {
    /*margin-top: 86px;*/
    border-width: 70px;
  }
}
html {
  font-size: 10px;
}

body {
  background-color: #fff;
  font-size: 12px;
  font-family: "Noto Sans JP", "Roboto", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
  line-height: 1.75;
  color: #4c4c4c;
  -webkit-text-size-adjust: 100%;
}

@media all and (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }
}

.on-print {
  	display:none;
}
#print-logo {
	display:none;
}

/* ==========================================================
 wrapper
========================================================== */
#wrap {
	background:#F3F0E7;
}
.wrapInner {
    max-width: 650px;
    margin: 120px auto;
    padding:15px;
}
.wrapper {
  position: relative;
  width: 100%;
  min-width: 320px;
}

/************ preview ************/
@page {
	size: A4 portrait; /* A4サイズ、縦向き */
	margin: 5mm; /* 余白を10mmに設定 */
}
@print {
	body {
		width: 210mm; /* A4横幅 */
		height: 297mm; /* A4縦幅 */
		padding: 10mm; /* 内側の余白 */
		box-sizing: border-box;
		page-break-after: auto;
	}
	.no-print {
		display:none !important;
	}
}
#print-area {
	display:none;
}
#print-title {
	width:100%;
	background:gray;
	color:#fff;
	text-align:center;
	padding:5px;
}
#print-footer {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background:#000;
	color:#fff;
	text-align:center;
	padding:5px;
}
#print-info {
	display:flex !important;
	gap:10px;
}
#print-info > #kakejiku-info {
	width:calc(100% - 300px);
	height:100%;
	position:relative;
}
#print-info > #kakejiku-info > .type {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	zoom:85%;
}
#print-info > #kakejiku-info > #sandan_y, #print-info > #kakejiku-info > #fukuro_y {
	margin-top:150px;
}
#print-info > #kakejiku-info > #sandan_t, #print-info > #kakejiku-info > #fukuro_t {
	margin-top:120px;
}
#print-info > #select-info {
	position:absolute;
	top:150px;
	right:0;
	width:300px;
	padding:10px;
	margin:auto;
	text-align:center;
}

#print-info > #select-info table {
	border-collapse:collapse;
	width:100%;
	margin-top:10px;
	margin-bottom:30px;
}
#print-info > #select-info table th, #print-info > #select-info table td {
	border:solid 1px gray;
	font-size:1rem;
	padding:5px;
	text-align:center;
}
#print-info > #select-info table th {
	background:lightgray;
	width:80px;
}
#print-info > #select-info table td {
	width:calc(100% - 80px);
}

.no-hero {
  display:block;
  flex: 1;
}
.no-hero:not(.preview) .contents {
  	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	width:100%;
}

.contents__in {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 15px;
}

/* アンケート画面設定
---------------------------------------------------------- */
.inquiry-title {
	margin-bottom:40px;
}
.inquiry-title h1 {
	font-size: 2rem;
	font-weight: bold;
	text-align:center;
}
.inquiry-title h3 {
    font-size: 1.5rem;
    text-align:left;
    padding-top:40px;
    font-weight:normal;
}
.nav_area {
	width:100%;
	margin-bottom: 40px;
}
.nav_area .nav-info{
	display:inline-flex;
	position:relative;
	width:100%;
}
.nav_area h3{
    position: relative;
    font-size: 2rem;
    border-bottom: #CDD6DD 2px solid;
    padding: .4em 0;
    margin-bottom: 1em;
}
.nav_area h3::before {
    content: "";
    width: 70px;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: #00a0e6;
}
.nav-info {
	justify-content: center;
}
@media (max-width :765px) {
.nav-info {
	display:block !important;
    margin-bottom: 30px !important;
}
.nav-info .nav {
	/* width:100% !important; */
	/* height: 0; */
	background: white !important;
	/* margin-bottom: 10px; */
	padding: 0 !important;
	/* padding-bottom: 20px; */
}
.nav-info .nav .info {
	width:100% !important;
	height:100% !important;
	border: solid 1px lightgray !important;
	position:relative;
	margin-top:17px;
}
.nav-info .nav.active .info {
	width:100% !important;
	height:100% !important;
	background: #fffbf3 !important;
	/* padding: 10px 0; */
}
.nav-info .nav br {
	display:none;
}
.nav-info .nav .info{
	/* padding: 5px; */
	padding: 10px 0;
}
.nav-info .nav.active :not(:last-child):after {
	content: ' ';
	position: absolute;
	border-top: 17px solid #fffbf3;
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
	left: 50%;
	transform: translate(-50%);
	bottom: -8px;
}
.nav-info .nav .mail-caption {
	text-align: center !important;
	margin-top:10px;
	margin-right: 0 !important;
}
}
.nav-info .nav {
	width: 100%;
	text-align:center;
	position: relative;
	padding: 10px;
}
.nav-info .nav.active {
	background: #fffbf3;
	position: relative;
}
@media (min-width :766px) {
	.nav-info .nav {
		border:solid 1px lightgray;
	}
	.nav-info .nav:not(:last-child):before {
		content:"";
		position: absolute;
		width: 30px;
		height: 30px;
		right: -16.5px;
		top: 6px;
		background: lightgray;
		transform: rotate(45deg);
		z-index: 1;
	}
	.nav-info .nav:not(:last-child):after {
		content:"";
		position: absolute;
		width: 30px;
		height: 30px;
		right: -15px;
		top: 6px;
		background: #fff;
		transform: rotate(45deg);
		z-index: 2;
	}
	.nav-info .nav:not(:last-child).active:after {
		content:"";
		position: absolute;
		width: 30px;
		height: 30px;
		right: -15.5px;
		top: 6px;
		background: #fffbf3;
		transform: rotate(45deg);
	}
}
@media (max-width :765px) {
	.nav-info .nav:not(:last-child):before {
		content:"";
		position: absolute;
		width: 15px;
		height: 15px;
		bottom: -12.5px;
		left:50%;
		background: lightgray;
		transform: rotate(45deg) translateX(-50%);
		z-index: 1;
	}
	.nav-info .nav:not(:last-child):after {
		content:"";
		position: absolute;
		width: 15px;
		height: 15px;
		bottom: -11px;
		left:50%;
		background: #fff;
		transform: rotate(45deg) translateX(-50%);
		z-index: 2;
	}
	.nav-info .nav:not(:last-child).active:after {
		content:"";
		position: absolute;
		width: 15px;
		height: 15px;
		bottom: -11px;
		left:50%;
		background: #fffbf3;
		transform: rotate(45deg) translateX(-50%);
	}
}
.nav-info .nav .info {
	color:#4c4c4c;
	font-weight:bold;
	font-size: 1.3rem;
	text-align:center;
	margin: auto;
	letter-spacing: 15px;
	text-indent: 15px;
	/* padding: 10px 0; */
}
.nav-info .nav .info .caption{
	font-size:1.3rem;
	margin: auto;
}
.nav-info .nav .mail-caption {
	color:#4c4c4c;
	font-weight:bold;
	font-size:1.1rem;
	text-align: right;
	margin-right: 30px;
}
.nav-info .nav.active .info {
	color: #FFCC66;
}
.input_form {
	width:100%;
}
.account-info h3{
    position: relative;
    font-size: 2rem;
    border-bottom: #CDD6DD 2px solid;
    padding: .4em 0;
    margin-bottom: 1em;
}
.account-info h3::before, .survey-info h3::before {
    content: "";
    width: 70px;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: #00a0e6;
}

@media (max-width :768px) {
	.account-info .input, .account-info .output {
		width:100%;
		display:block !important;
	}
	.account-info .input .col, .account-info .output .col {
		width:100% !important;
	}
	.account-info .input .val, .account-info .output .val {
		width:100% !important;
		padding-left:0 !important;
		padding:8px;
	}
	.account-info .input .val .zip-code, .account-info .input .val .zip-container {
		width:100% !important;
	}
	.account-info .input .val .zip{
		display:block !important;
	}
	.account-info .input .val .pref{
		margin-left:0 !important;
		margin-top:20px !important;
		width:100% !important;
	}
	.account-info .input .val .addr{
		padding-left:0 !important;
	}
	.button_area .submit {
		font-size: 1.1rem !important;
	}
}
#button_area_top, #button_area_bottom {
	position:fixed;
}
#button_area_top button #data-cnt {
	font-size: 1.3rem;
}
#button_area_top {
	bottom: 15px;
	margin:0;
}
#button_area_bottom {
	bottom:30px;
}
.button_area {
	text-align:center;
	margin: 50px 0;
	gap: 30px;
	display:flex;
	justify-content:center;
}
#button_area_top.button_area, #button_area_bottom.button_area {
	position:fixed;
	display:block;
	z-index:99;
	right:150px;
}
#button_area_top .price {
	border-top:solid 1px gray;
	border-bottom:solid 1px gray;
	padding:10px;
	font-size:1.3rem;
	overflow:hidden;
}

#button_area_top .price .border {
	border-top:dotted 2px gray;
	margin-top: 10px;
    margin-bottom: 10px;
    margin-left:-100px;
    margin-right:-100px;
}
.button_area .submit {
	background: #239015;
	color: #fff;
	border: none;
	padding: 8px;
	width: 100%;
	font-size: 1.3rem;
	font-weight: bold;
	position:relative;
	transition-duration: .3s;
	max-width: 150px;
	min-width: 30px;
	letter-spacing: px;
	border: solid 1px #239015;
	margin: 15px 0;
	border-radius: 4px;
}
.button_area .submit:after {
	content: "\f054";
    position: absolute;
    right: 5px;
    font-family: "Font Awesome 5 Free";
}
.button_area .submit.disabled {
	pointer-events:none;
	opacity:0.5;
}

.button_area .rtn {
    background: #fff;
    border: solid 1px #239015;
    color: #239015;
}
.button_area .rtn:after {
	content: "\f053";
	position: absolute;
	left: 5px;
	right: unset;
	font-family: "Font Awesome 5 Free";
}
.button_area .action {
	background: #fff;
	color: rgba(36, 147, 21, 1);
	width: 80px;
	height: 70px;
	font-size: 1.2rem;
	font-weight: bold;
	position:relative;
	transition-duration: .3s;
	max-width: 100px;
	min-width: 30px;
	letter-spacing: px;
	border: dotted 2px rgba(36, 147, 21, 1);
	margin: 20px auto;
	border-radius: 35px;
	display: block;
	line-height:1.5;
}
.button_area .button_wrapper {
	display:flex;
	gap:10px;
}
@media (max-width :500px) {
	#button_area_top .price {
		right:10px !important;
		bottom:30px !important;
		font-size: 1.2rem  !important;
		text-shadow: 1px 3px 10px rgba(0, 0, 0, 0.3);
	}
}
@media (max-width :950px) {
	#button_area_top .button_wrapper {
		display:block !important;
		padding-left:50px;
	}
}
.button_area .submit:hover, .button_area .submit:focus, .button_area .action:hover, .button_area .action:focus  {
	color: #fff;
	background: #FFCC66;
	cursor: pointer;
	border: solid 1px #FFCC66;
}
#button_area_left, #button_area_right {
	display:none;
}
.preview #button_area_left {
	display:flex;
	gap:30px;
	position: fixed;
	left: 50%;
	bottom: 30px;
	50px: 10001;
	z-index: 10001;
	transform: translateX(-50%);
}
.preview #button_area_right {
	display:flex;
	gap:30px;
	position: fixed;
	right: 250px;
	top: 50px;
	z-index:10001;
}
@media screen and (max-width: 950px) {
	.preview #button_area_right {
		right: 20px;
	}
}
.preview #button_area_top, .preview .side-menu, .preview .side-menu2 {
	transiton:all 0.3s ease;
	display:none !important;
}
#button_area_left button, #button_area_right button {
	border:solid 1px gray;
	border-radius:50%;
	width:35px;
	height:35px;
}
#button_area_left button.disabled {
	pointer-events:none;
	color:silver;
}

#button_area_right button:hover, #button_area_left button:not(.disabled):hover {
	opacity:0.7;
}

.end_info  {
	text-align:center;
}
.end_info .msg1 {
	font-size: 1.5rem;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: bold;
}
.end_info .msg2 {
	font-size: 18x;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}
.account-info p{
	font-size:1.7rem;
	font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.account-info h3, .survey-info h3 {
    position: relative;
    font-size: 1.8rem;
    border-bottom: #CDD6DD 2px solid;
    padding: .4em 0;
    margin-bottom: 1em;
}
.account-info input, .account-info select {
	padding: 0 0 0 5px;
}
.account-info textarea {
	padding: 10px 0 0 5px;
}
.account-info select:invalid {
	color: lightgray;
}
.account-info .input, .account-info .output {
	justify-content: center;
	width:100%;
	padding: 15px 0;
}
.account-info .input .col, .account-info .output .col{
	text-align: left;
	padding: 4px;
	font-size:1.5rem;
	font-weight: 600;
}
.survey-info .input .col, .survey-info .output .col{
	text-align: left;
	padding: 4px;
	padding-left:8px;
	font-size:1.6rem;
	font-weight: 500;
}
.account-info .input .val, .account-info .output .val {
	width:100%;
	font-size: 1.6rem;
	margin: auto;
	font-weight: 400;
}
.account-info .input .val .msg {
    font-size: 1.1rem;
}
.account-info .input .val .msg2 {
    font-size: 1.1rem;
    color: #ff0000;
}
.account-info .input .val input,.account-info .input .val select,.account-info .input .val textarea {
	width:100%;
	border-radius:4px;
	border: solid 2px #d4d7da;
	height: 200px;
}
.account-info .input .val input[type=file] {
	padding:1px;;
	background:#fff;
}
.survey-info .input .val textarea {
	padding-top:10px;
}
.account-info .input .val .zip {
	display:inline-flex;
	width:100%;
}
.account-info .output .val .zip {
	display:inline-flex;
	width:100%;
}
.account-info .input .val .zip div {
	margin-top:auto;
	margin-bottom:auto;

}
.account-info .input .val .zip-code {
	display:inline-flex;
	width:60%;
}
.account-info .input .val .zip-container {
	width: 40%;
}
.account-info .input .val .zip input{
	padding-left: 10px;
	width:100%;
}
.account-info .zip-icon{
	width: 10%;
	max-width:20px;
    text-align: center;
}
.account-info .input .val .pref{
	width: 40%;
}
.account-info .input .val .addr{
	padding-top: 20px;
}
.account-info .input .val input, .account-info .input .val select{
	height: 35px;
	font-size: 16px;
}
@media (min-width: 768px) {
	.account-info .input .val input, .account-info .input .val select{
	    font-size: 1.6rem;
	}
}
.account-info .input .val select option{
	font-size:15px;
}
.survey-info {
	margin-top:40px;
}
.survey-info .input, .survey-info .output {
	justify-content: center;
	width:100%;
	padding: 20px 0;
}
.survey-info .val {
	display:inline-flex;
	width:100%;
	margin-top: 15px;
	font-weight: 400;
}
.survey-info .val input {
	width: 15px;
}
.survey-info .val label {
	font-size: 15px;
}
.tag {
	letter-spacing:1px;
	padding: 2px 3px;
	text-align: center;
	font-size:1rem;
	margin-left:10px;
	border-radius:4px;
}
.tag.require {
	background:#ff0000;
    color: #fff;
}
.tag:before {
    color: #fff;
    padding: 3px;
    font-size:1.1rem;
}


/**************************\
  Basic Modal Styles
\**************************/
  
.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}
  
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:999;
}
  
.modal__container {
  background-color:#F3F0E7;
  padding: 10px;
  max-width: 800px;
  max-height: 100vh;
  border-radius: 0;
  overflow-y: auto;
  box-sizing: border-box;
  min-width: 400px;
}
@media screen and (max-width: 950px) {
    .modal__container {
          max-height: 540px !important;
    }
}
.modal__container > .inner {
	position:relative;
	background:#fff;
	padding: 20px;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  }

#kakejiku-save-modal .modal__title {
    margin: 30px auto;
}
.modal__title {
  text-align: center;
  margin:auto;
  box-sizing: border-box;
}
.modal__title p {
	color:rgba(36, 147, 21, 1);
	font-size:1.2rem;
}
.modal__title h2 {
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  font-size: 1.5rem;
}
.modal__title h2.border {
  border-bottom:solid 1px;
}
  
.modal__close {
  background: transparent;
  border: 0;
}
  
.modal__header .modal__close:before { content: "\2715"; }
 
.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}
  
.modal__btn {
display: block;
    margin-left: auto;
    width: 120px;
    padding: 7px;
    color: #333;
    border: 1px solid #cccccd;
    border-radius: 20px;
    background-color: transparent;
    text-align:center;
}
  
.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
  
.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}
  
  
  
/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  
@keyframes mmfadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
  
@keyframes mmslideIn {
  from { transform: translateY(15%); }
  to { transform: translateY(0); }
}
  
@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}
  
.micromodal-slide {
  display: none;
}
  
.micromodal-slide.is-open {
  display: block;
}
  
.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
  
.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
  position:relative;
}
  
.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
  
.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container .close-btn {
  position:absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background:#879C8C;
    border-radius:50%;
    font-size:18px;
    width: 30px;
    height: 30px;
    text-align: center;
    transition:all 0.3s ease;
}
.micromodal-slide[aria-hidden="false"] .modal__container .close-btn:hover {
  opacity:0.7;
}
  
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.kakejiku_area {
	position:relative;
	touch-action:manipulation !important;
}
.kakejiku_area .price{
	position: absolute;
    bottom: 0;
    right: 200px;
    font-size: 1.5rem;
    z-index: 1;
    padding: 5px;
    background: rgba(255, 255, 255, 0.6);
    text-shadow: 1px 3px 10px rgba(0, 0, 0, 0.3);
    border-top:solid 1px gray;
    border-bottom:solid 1px gray;
}
.kakejiku_outer_area .inner {
	position:relative;
	width:100%;
	height:100%;
	margin-top:80px;
	touch-action:manipulation !important;
}
.account-info .kakejiku_outer_area .inner{
	margin-top:0;
}
.preview .kakejiku_outer_area {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: rgba(0, 0, 0, 0.7);
	z-index:10000;
	padding: 0 !important;
	overflow:auto;
	margin-top:initial !important;
}
.preview .kakejiku_outer_area .inner {
	margin-top:0 !important;
}
.preview .kakejiku_area {
	position:absolute;
	overflow-y:initial !important;
	overflow-x: hidden !important;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.preview .kakejiku_area .price {
	display:none;
}
.jyoge, .kire {
	background: #808080;
	width: 100%;
	margin: auto;
	position:relative;
	box-shadow: 2px 2px 30px darkgray;
	background-position: center;
	background-size: 200px;
	max-width: 200px;
}

.preview .kakejiku_area .jyoge, .preview .kakejiku_area .kire {
	box-shadow:none;
}
.hasso {
    height: 10px;
    position: relative;
    width: 100%;
    background-position: center;
    background-size: 200px;
}
.hasso > .hasso_inner {
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
}
.hasso > .hasso_inner:after {
	position:absolute;
	content:"";
	top:0;
	left:-100px;
	height: 15px;
	width: 500px;
	z-index:2;
}
.hasso.shadow-b > .hasso_inner:after {
	box-shadow: 0 -4px 3px 0px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.8) inset;
}
.hasso.shadow-w > .hasso_inner:after {
	box-shadow:0 5px 5px -2px rgba(255, 255, 255, 0.3) inset;
}
 #sandan_t, #fukuro_t {
	zoom: 60%;
}
 #sandan_y, #fukuro_y {
	zoom: 90%;
}
@media screen and (max-width: 767px) {
  #sandan_t, #fukuro_t {
  	zoom: 55%;
  }
	#sandan_y, #fukuro_y {
		zoom: 83%;
	}
}
.preview #sandan_t, .preview #fukuro_t {
	zoom:150%;
	padding:30px 0;
}
.preview #sandan_y, .preview #fukuro_y {
	zoom:130%;
	padding:30px 0;
}

@media (min-width :765px) {
	.preview #sandan_t, .preview #fukuro_t {
		zoom:250%;
	}
	.preview #sandan_y, .preview #fukuro_y {
		zoom:230%;
	}
}

#sandan_t .jyoge, #fukuro_t .kire{
	height: 800px;
}
#sandan_y .jyoge,#fukuro_y .kire  {
	height: 480px;
	min-width: 250px;
}
.fuutai {
	background: #c0c0c0;
	width: 8px;
	margin: auto;
	position: absolute;
	top: 0;
	transform: translateX(-20%);
	background-position: center;
	background-size: 200px;
	z-index: 1;
	box-shadow: 1px 1px 3px #000;
}
#sandan_t .fuutai {
	height: 203px;
}
#sandan_y .fuutai {
	height: 182px;
}
.fuutai.left {
	left: 33%;
}
.fuutai.right {
	right: 33%;
}
.ichimonji {
	background: #c0c0c0;
	width: 100%;
	margin: auto;
	position: absolute;
	left:50%;
	transform: translateX(-50%);
	background-position: center;
	background-size: 200px;
}
.ichimonji.top {
	top: -10px;
	height: 10px;
}
.ichimonji.bottom {
	bottom: -5px;
	height: 5px;
}
.suji {
	margin: auto;
	left:50%;
	background-position: center;
	background-size: 100px !important;
	background: #c0c0c0;
	padding: 3px;
}
#fukuro_t .suji {
	width: 154px;
}
#fukuro_y .suji {
	width: 184px;
}
.chuberi {
	background: #d3d3d3;
	width: 100%;
	margin: auto;
	position: relative;
	background-position: center;
	background-size: 200px;
}
.chuberi2 {
	background: transparent;
	width: 100%;
	margin: auto;
	position: relative;
}
#sandan_t .chuberi {
	height: 500px;
	margin-top: 190px;
}
#sandan_y .chuberi {
	height: 200px;
	margin-top: 170px;
}
#fukuro_y .chuberi2  {
	height: 200px;
	margin-top: 170px;
}
#fukuro_t .chuberi2 {
	height: 500px;
	margin-top: 180px;
}
.hashira {
	background: transparent;
	height: fit-content;
	width: 100%;
	margin: auto;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -65%);
	background-position: center;
	background-size: contain;
	padding-top: 30px;
	padding-bottom: 30px;
}

.honshibg {
	background: #fff;
	width: 100%;
	margin: auto;
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#sandan_t .honshibg, #fukuro_t .honshibg {
	height: 400px;
	max-height:400px;
	max-width: 150px;
}
#sandan_y .honshibg, #fukuro_y .honshibg {
	height: 125px;
	max-height:125px;
	max-width: 180px;
}
.honshibg.img {
	height: fit-content !important;
}
.honshi {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	top: 0;
	height: 100%;
	width: 100%;
	margin:auto;
}
.honshi > img {
	display:block;
	margin:auto;
}
.jiku {
	background: #808080;
	height: 15px;
	width: 100%;
	margin: auto;
	position: absolute;
	bottom: 0;
	background-size: 200px;
}
.jiku > .jiku_inner {
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
}
.jiku > .jiku_inner:after {
	position:absolute;
	content:"";
	top:0;
	left:-100px;
	height: 15px;
	width: 500px;
	z-index:1;
}
.jiku.shadow-b > .jiku_inner:after {
	box-shadow: 0 -4px 3px 0px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.4) inset, 0 -4px 5px -2px rgba(0, 0, 0, 0.8) inset;
}
.jiku.shadow-w > .jiku_inner:after {
	box-shadow:0 5px 5px -2px rgba(255, 255, 255, 0.3) inset;
}
.jikusaki {
	background: slategray;
	height: 15px;
	width: 20px;
	margin: auto;
	position: absolute;
	top: 0;
	background-size: 100px;
	background-position-x: 10px;
    background-position-y: 60px;
    z-index:1;
    overflow:hidden;
}
.jikusaki.left {
	left:-20px;
}
.jikusaki.right {
	right:-20px;
}
.jikusaki.left:after, .jikusaki.right:after {
	position:absolute;
	content:"";
	top:0;
	height: 15px;
	width: 100px;
	z-index:1;
}
.jikusaki.left:after {
	left:-5px;
}
.jikusaki.right:after {
	right:-5px;
}
.jikusaki.left.shadow-b:after {
	box-shadow:0 2px 4px rgba(0,0,0,0.1),0 -2px 4px rgba(0,0,0,0.1), -2px 2px 5px rgba(0,0,0,0.6) inset, 0 -4px 5px -2px rgba(0, 0, 0, 0.6) inset;
}
.jikusaki.right.shadow-b:after {
	box-shadow:0 2px 4px rgba(0,0,0,0.1),0 -1px 4px rgba(0,0,0,0.1), 2px 2px 5px rgba(0,0,0,0.6) inset, 0 -4px 5px -2px rgba(0, 0, 0, 0.6) inset
}
.jikusaki.left.shadow-w:after {
	box-shadow:0 5px 5px -2px rgba(255, 255, 255, 0.3) inset;
}
.jikusaki.right.shadow-w:after {
	box-shadow:0 5px 5px -2px rgba(255, 255, 255, 0.3) inset;
}
.jikusaki.left.shadow-w2:after {
	box-shadow:0 2px 4px rgba(255,255,255,0.1),0 -2px 4px rgba(255,255,255,0.1), -2px 2px 5px rgba(255,255,255,0.2) inset, 0 -4px 5px -2px rgba(255, 255, 255, 0.2) inset;
}
.jikusaki.right.shadow-w2:after {
	box-shadow:0 2px 4px rgba(255,255,255,0.1),0 -1px 4px rgba(255,255,255,255.1), 2px 2px 5px rgba(255,255,255,0.2) inset, 0 -4px 5px -2px rgba(255, 255, 255, 0.2) inset
}
.blink {
   border:solid 3px orange;
}

.side-menu {
	padding-top: 80px;
	padding-bottom:100px;
	position:absolute;
	top:0px;
	width:230px;
	height:100vh;
	left:-230px;
	background:#000;
	color:#fff;
	z-index: 4;
	overflow-y:auto;
	font-size: 1.3rem;
	transition:all 0.4s ease;
	box-shadow: 1px 2px 5px lightgray;
}
.side-menu2 {
	padding-top: 115px;
	padding-left: 220px;
	padding-right: 10px;
	position: absolute;
	left: -520px;
	top: 0;
	width: 460px;
	height: 100vh;
	display:none;
	background: #F3F0E7;
	transition: all 1s ease;
	z-index:1;
	overflow-y:auto;
}
.side-menu2 > div {
	display:none;
	position:relative;
	transition:all 0.5s ease;
}
.side-menu2 > div.active {
	display:block;
}
.side-menu2 > div > p {
	color:#000;
	text-align:left;
	font-size:1.3rem;
	padding-left: 30px;
	line-height:1.5;
	background:#F3F0E7;
}
.side-menu2 .ptn-list:not(.two-clm) {
	display: block;
	padding: 0 20px;
	padding-bottom:50px;
}
.side-menu2 .ptn-list.two {
	//display: flex;
    //flex-wrap: wrap;
    gap:15px;
}
.side-menu2 .ptn-list:not(.two-clm) li {
	list-style:none;
	width: 100%;
    padding: 0 4px;
    font-size: 1.3rem;
    background:#fff;
    margin:10px;
    box-shadow:2px 2px 3px gray;
}
.ptn-list.two-clm {
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	gap: 15px;
}
.side-menu .ptn-list.two-clm {
	gap:5px;
}
.ptn-list.two-clm li {
	width:40% !important;
	aspect-ratio:1;
}
.side-menu .ptn-list.two-clm li {
	width: 48% !important;
}
.side-menu2 .ptn-list li a{
	display:block;
	width:100%;
}
.side-menu2 .title {
	display:block;
	color:#fff;
	padding:10px;
	position: relative;
}
.side-menu2 .title:hover {
	color:#FFCC66;
}
#main_contents.menu-on .side-menu {
	left:0;
}
#main_contents .contents > .kakejiku_outer_area {
	transition: all 0.3s ease;	
	padding-top:20px;
	padding-bottom:20px;
	overflow-y:auto;
}
.side-menu .title {
    display: flex;
	padding: 10px;
	position: relative;
	transition: all 0.3s ease;
	height:50px;
    vertical-align: middle;
    align-items: center;
   background: #F3F0E7;
    color: #000;
}
.side-menu .title.active {
	color:#239015;
	font-weight:600;
}
.side-menu .title > span {
	display:inline-flex;
	align-items:center;
	line-height:1.2;
	font0weight:500;
}
.side-menu .title .iroha {
	background:#fff;
	padding:8px 12px;
	border-radius:20px;
	color:#879C8C;
	display:block;
    text-align: center;
    font-weight:600;
    font-size:1.3rem;
    border:solid 2px lightgray;
}
.side-menu .title.active .iroha {
	background:#239015;
	color:#fff;
	border-color:#fff;
}
.side-menu .title:not(.active):hover {
	color:#FFCC66;
}
.side-menu > .tab {
	overflow-y:auto;
	max-height:350px;
}

.side-menu > .tab::first-child {
	border-top: solid 1px #fff;
}
.side-menu > .tab:not(:first-child) {
	border-top: solid 2px lightgray;
	width: 100%;
}
.side-menu > .tab:not(:first-child).active {
	border-top: solid 2px #879C8C;
}
.side-menu > .tab.active + .tab:not(:last-child) {
	border-top: solid 2px #879C8C;
}
.side-menu > .tab.active + .tab[style*="display: none"] + .tab:not(:last-child) {
	border-top: solid 2px #879C8C;
}
.side-menu .title:not(.selected) + .ptn-list {
	display:none;
}
.side-menu .title.selected + .ptn-list {
	max-height: 400px;
	height: 100%;
	width: 100%;
}
.side-menu div:not(#type) .ptn-list li a{
	padding:20px;
}
.side-menu .button-area {
	display:bolck;
}
.side-menu .button-area button {
	background: gray;
	line-height:1.5;
	margin-bottom: 15px;
}
.side-menu button {
    padding: 6px 5px;
    width: 95%;
    max-width:200px;
    transition:all 0.5s ease;
    border: none;
    border-radius:30px;
    border:solid 2px #D2DAD4;
}
.side-menu button.btn1 {
	background:#879C8C;
}
.side-menu button.btn2 {
	background:#239015;
}

.side-menu button:hover, .side-menu button:focus {
	color: #fff !important;
	background: #FFCC66;
	cursor: pointer;
	border: solid 2px #FFCC66 !important;
}
.side-menu .button-area button br {
	display:none;
}
@media screen and (max-width: 950px) {
	.side-menu .button-area {
		display: flex;
	}
	.side-menu .button-area button {
		width: 45%;
		margin: 10px auto;
		height: 45px;
	}
	.side-menu .button-area button br {
		display:block;
	}
	.side-menu button {
	    padding: 5px;
	}
}
.side-menu .title:before {
	font-size:1rem;
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}
.side-menu .title:not(.selected):before {
	content:"▼";
}
.side-menu .title.selected:before {
	content:"▲";
}
.side-menu .title.ok:after {
	content:"OK";
	background:#239015;
	color:#fff;
	padding: 2px 6px;
	border-radius: 20px;
	border:solid 2px #fff;
	font-size:11px;
	position: absolute;
	right:0;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 2px;
}
@media screen and (min-width: 951px) {
	.side-menu > div .ptn-list{
		display:none !important;
	}
	#main_contents.menu-on main:not(.preview) .kakejiku_outer_area {
		padding-left:250px;
		overflow-x:hidden;
	}
	.side-menu .title:before {
		display:none;
	}
	.side-menu .title.active {
		pointer-events:none;
	}
	#main_contents.menu-on .side-menu2 {
		display:block;
		left:0;
	}
	.side-menu .title {
		padding: 10px 12px;
	}
}
@media screen and (max-width: 950px) {
	#main_contents.menu-on .contents > .kakejiku_outer_area {
		padding-left:180px;
		overflow-x:hidden;
	}
	#main_contents.menu-on .price {
		opacity:0;
		transition:all 0.3s ease;
	}
	#button_area_top.button_area {
		right:20px;
	}
	.button_area .action {
		width: 60px;
		height: 50px;
		font-size: 1rem;
	}
	.side-menu {
		width: 190px;
		left: -190px;
		font-size: 1.1rem;
	}
	.side-menu .title.active {
		position:sticky;
		top:0;
		z-index:3;
	}
	.side-menu .title > span {
		padding: 0 15px;
		padding-right:20px;
		padding-left:8px;
	}
	#sandan_y, #fukuro_y {
		zoom:70%;
	}
	.ptn-list li {
		border-bottom:solid 2px #fff;
	}

}
.ptn-list li {
	transition:all 0.3s ease;
	height: 100%;
	width: 100%;
	list-style:none;
	letter-spacing:2px;
	overflow:hidden;
	transition:all 0.3s ease;
}
.ptn-list li.active {
	font-weight:bold;
	border-left:solid 20px rgba(36, 147, 21, 1);
	padding-left:0 !important;
	transition: all 0.5s ease;
}
.ptn-list li:nth-child(2n - 1) {
	background:#EEEEEE;
}
.ptn-list li:nth-child(2n) {
	background:#fff;
}
.ptn-list li a {
	position:relative;
	color:#000;
	display: block;
	width:100%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 10px;
	height: 100%;
	min-height: 35px;
    transition:all 0.3s ease;
    line-height:1.5;
}
div:not(#type) > .ptn-list li a {
	opacity:0.3;
	transition:all 1s ease;
	bakground:lightgray;
}
div:not(#type) > .ptn-list li a:not(.loaded) {
	pointer-events:none;
}
div:not(#type) > .ptn-list li a.loaded {
	background-size: 600px;	
	opacity:1;
}
.ptn-list li.active a:before, .ptn-list li:hover a:before {
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	left:0;
	top:0;
	background: lightgray;
	opacity: 0.1;
}
div:not(#type) > .ptn-list li a:not(.loaded):after{
	position:absolute;
	content:"";
	width:30px;
	height:30px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background-image:url(../images/loading.gif);
	z-index:2;
	transition:all 0.5s ease;
	opacity:1;
}
div:not(#type) > .ptn-list li a:after{
	opacity:0;
}
.ptn-list li a span {
	position:absolute;
	top: 50%;
	left: -150px;
	z-index: 2;
	display:block;
	letter-spacing:2px;
	transform: translateY(-50%);
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
	transition:all 0.5s ease;
	font-weight:600;
}
.ptn-list li.active a span, .ptn-list li:hover a span {
	display:block;
	left: 10px;
}
.ptn-list li a img {
	width:100%;
}
.drop-area {
	border: solid 1px #C8C8C8 !important;
	background-color: #F0F0F0 !important;
	position: relative;
	margin: 5px 2px;
	padding: 5px;
	text-align: center;
	transition:all 0.5s ease;
}

.drop-area:hover {
	opacity:0.7;
}
.drop-area label {
  width: 100%;
  display: inline-block;
  position: relative;
  height: 180px;
  margin-top:10px;
}
.drop-area:not(.active) .honshi-del-btn, .drop-area:not(.active) .filesize {
  display:none;
}
.drop-area.active .honshi-del-btn {
	position: absolute;
	height: 35px;
	width: 35px;
	display:block;
    z-index: 2;
    border: none;
    background: #fff;
    color:#000;
    border-radius: 50%;
    font-size: 20px;
    font-weight:bold;
    line-height:1;
    right:5px;
    top:5px;
    box-shadow: darkgray 1px 1px 10px;
}
.drop-area.active .honshi-del-btn:hover, .drop-area.active .honshi-del-btn:focus {
	opacity:0.7;
}
.drop-area.active .filesize {
	position: absolute;
	display:block;
	font-size:1.1rem;
	top:5px;
    z-index: 2;
    padding: 1px 10px;
    color:#000;
    background:rgba(255,255,255,0.9);
    border-radius:5px;
}
.drop-area.active .filesize.over {
	background:pink;
	color:red;
}
.drop-area label:hover {
  cursor: pointer;
}
.drop-area label input {
  display: none;
}
.drop-area label svg {
  position: absolute;
  width: 50px;
  fill: currentColor;
  color: #909090;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:0;
}
.drop-area label .msg {
	position: absolute;
    width: 100%;
    fill: currentColor;
    color: #909090;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    line-height:1.5;
}
.drop-area label:hover svg,.drop-area label:hover .msg {
	z-index:1;
}
.drop-area label span {
	color:gray;
	font-size:1rem;
}
.drop-area label .preview-area {
	margin:auto;
	width:170px;
	aspect-ratio: auto;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.drop-area label .preview-area img {
  position:relative;
  z-index:1;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#kakejiku-save-list  {
	height:100%;
    max-height: 350px;
}
#kakejiku-save-list li {
	padding:5px;
	list-style:none;
	font-size:1.3rem;
}	
#kakejiku-save-list li.active {
	background: #F3F0E7 !important;
    font-weight: bold;
    border-left: solid 10px rgba(36, 147, 21, 1);
}
#kakejiku-save-list li a {
	text-decoration:none;
}
#kakejiku-save-list li:nth-child(2n-1) {
	background:#f1f3f4;
}	
#kakejiku-save-list  .msg {
	text-align:center;
	color:red;
}
#kakejiku-save-list .button_area {
	margin: 20px 0;
}
#kakejiku-save-list .button_area a {
	border: solid 1px gray;
	font-size: 1.2rem;
	color:#000;
	width: 200px;
	display: block;
	border-radius: 30px;
	position:relative;
	text-align: center;
	padding: 5px;
	background: #fff;
	font-weight:600;
}
#kakejiku-save-list ul {
	border-top:solid 1px gray;
	border-bottom:solid 1px gray;
	padding:5px;
	max-height:300px;
	overflow-y:auto;
}
#kakejiku-save-list ul li {
	display: block;
	padding:10px;
	width:100%;
}
#kakejiku-save-list ul li .title {
	padding-bottom: 10px;
	padding: 5px;
	padding-bottom: 15px;
	font-size: 1.4rem;
    display: inline-flex;
    width: 100%;
}
#kakejiku-save-list ul li .title > span {
	width:60%;
}
#kakejiku-save-list ul li .title .updtime {
	width:40%;
    text-align: right;
    font-size: 1.1rem;
}
#kakejiku-save-list ul li .title .st {
	padding: 3px;
	margin-right:5px;
    color: #fff;
}
#kakejiku-save-list ul li .title .st.ok {
	background:rgba(36, 147, 21, 1);
}
#kakejiku-save-list ul li .title .st.ng {
	background:gray;
}
#kakejiku-save-list ul li .command {
	/* width:20%; */
	gap: 15px;
	display: flex;
}
#kakejiku-save-list ul li a {
	border: solid 1px rgba(36, 147, 21, 1);
	font-size: 1.2rem;
	color:rgba(36, 147, 21, 1);
	width: 120px;
	display: flex;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 30px;
	position:relative;
	text-align: center;
	padding:5px 3px;
	background: #fff;
	font-weight:normal;
	transition:all 0.3s ease;
}
#kakejiku-save-list #delete-all-btn, #save-btn, #triming-btn {
	background:rgba(36, 147, 21, 1);
	color:#fff;
	border: solid 1px rgba(36, 147, 21, 1) !important;
	padding:8px 3px;
	transition:all 0.3s ease;
}
#kakejiku-save-list ul li a:hover, #kakejiku-save-list #delete-all-btn:hover, #upd-save-btn:hover, #save-btn:hover, #triming-btn:hover
,#kakejiku-save-list ul li a:focus, #kakejiku-save-list #delete-all-btn:focus, #upd-save-btn:focus, #save-btn:focus, #triming-btn:focus
{
	color: #fff !important;
	background: #FFCC66;
	cursor: pointer;
	border: solid 1px #FFCC66 !important;
}
#kakejiku-save-list ul li a br {
	display:none;
}
@media screen and (max-width: 950px) {
	#kakejiku-save-list ul li a br {
		display:block;
	}
}
#kakejiku-save-list ul li a:hover {
	color:#FFCC66;
}
#kakejiku-save-list ul li a.disabled{
	color:#D2DAD4;
	border-color:#D2DAD4;
	pointer-events:none;
}
#kakejiku-save-list ul li a i {
	position:absolute;
	left: 10px;
	top: 8px;
}

.modal_button_area {
	margin:auto;
	margin-top: 30px;
	text-align:center;
	display: flex;
}
#design-title {
	width:100%;
	padding: 10px;
	outline: none;
	border-radius:5px;
	border: solid 2px #879C8C;
	transition:all 0.3s ease;
}
#design-title:focus,#design-title:hover {
	border-color: rgba(36, 147, 21, 1);
}
#upd-save-btn {
	background: #fff;
	color: #000;
	border: none;
	padding: 8px;
	width: 100%;
	font-size: 1.2rem;
	font-weight: bold;
	position: relative;
	transition-duration: .3s;
	max-width: 120px;
	margin: auto;
	min-width: 30px;
	letter-spacing: px;
	border: solid 1px #000;
	margin: 15px 0;
	border-radius: 30px;
	display: block;
}
#save-btn,#triming-btn {
	border: none;
	padding: 8px;
	width: 100%;
	font-size: 1.2rem;
	font-weight: bold;
	position: relative;
	transition-duration: .3s;
	max-width: 120px;
	margin: auto;
	min-width: 30px;
	letter-spacing: px;
	border: solid 1px #000;
	margin: 15px 0;
	border-radius: 30px;
	display: block;
}

.btn-trigger {
  position: relative;
  width: 33px;
  height: 14px;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
@media screen and (min-width: 951px) {
	.btn-trigger {
		display:none;
	}
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}
kakejiku-help-modal .modal__title h2 {
	border-bottom:solid 1px gray;
}
#kakejiku-help-modal .modal__content .help_wrapper{
	position:relative;
	height:100%;
	max-height:400px;
	overflow-y:auto;
	display:flex;
	gap:15px;
}
#kakejiku-help-modal .modal__content .img-area {
	width:30%;
	display: inline-flex;
	gap: 5px;
	padding-bottom: 30px;
	justify-content:center;
}
#kakejiku-help-modal .modal__content .img-area img {
	max-height: 350px;
}
#kakejiku-help-modal .modal__content .img-area .arrow {
	background-image:url(../images/arrow.png);
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 30px;
}
#kakejiku-help-modal .modal__content .img-area div div {
	font-weight: 600;
    border-radius: 20px;
    padding: 2px;
    font-size: 11px;
    text-align: center;
    margin: auto;
    margin-bottom: 10px;
    width: 50px;
}
#kakejiku-help-modal .modal__content .img-area div .before {
	background:#fff;
	color:#879C8C;
	border:solid 1px #879C8C;
}
#kakejiku-help-modal .modal__content .img-area div .after {
	background:#239015;
	color:#fff;
	border:solid 1px #239015;
}
#kakejiku-help-modal .modal__content .caption-area {
	width:60%;
}
#kakejiku-help-modal .modal__content .caption-area li span {
	display:block;
	color: #239015;
	font-weight:600;
	margin-top:5px;
	display: inline-flex;
	align-items: center;
}
#kakejiku-help-modal .modal__content .caption-area li .point {
	background: #239015;
	color: #fff;
	font-weight:600;
	 margin-right:5px;
	border-radius:20px;
	padding: 5px 8px;
	font-size: 11px;
}
#kakejiku-help-modal .modal__content .caption-area li {
	position:relative;
	list-style: none;
	font-size: 1.3rem;
	margin-bottom:10px;
	padding-left:20px;
}
#kakejiku-help-modal .modal__content .caption-area ol {
	 counter-reset: count 0;
}
#kakejiku-help-modal .modal__content .caption-area li:before {
	position:absolute;
	left:0;
	top:0;
	content: counter(count) ". ";
	counter-increment: count 1;
	font-size:1.5rem;
}
@media screen and (max-width: 950px) {
	#kakejiku-help-modal .modal__content .help_wrapper{
		display:block !important;
	}
	#kakejiku-help-modal .modal__content .img-area, #kakejiku-help-modal .modal__content .caption-area {
		width:100%;
	}
}
#honshi-triming-btn, #honshi-triming-btn-sm {
	border: solid 1px #239015;
	font-size: 1.2rem;
	color: #239015;
	width: 120px;
	display: block;
	border-radius: 10px;
	position:relative;
	text-align: center;
	padding: 3px 5px;
	background: #fff;
	font-weight:normal;
	margin: 15px auto;
	transition:all 0.3s ease;
}
#honshi-triming-btn:not(.active), #honshi-triming-btn-sm:not(.active) {
	opacity:0.3;
	pointer-events:none;
}
#honshi-triming-btn:hover, #honshi-triming-btn:focus, #honshi-triming-btn-sm:hover, #honshi-triming-btn-sm:focus {
	background:#ffcc66;
	border-color:#ffcc66;
	color:#fff;
}
#cropper-tgt {
	max-width: 500px !important;
    max-height:350px !important;
}

.input_form .error .msg {
	background:pink;
	color:red;
	padding:10px;
}
#preview-close,#plus-btn, #minus-btn {
	background: none;
    color: #fff;
    font-size: 35px;
    text-shadow: 1px 1px 5px gray;
    line-height: 1;
}

#reset-btn, #preview-print {
	color: #fff;
    background: transparent !important;
    border: none !important;
    font-size: 30px;
    text-shadow: 1px 1px 5px gray;
    line-height: 1;
}
.terms_area {
    font-family: "Noto Sans JP", sans-serif;
}
.privacy-info a {
	color:gray !important;
	text-decoration:underline !important;
	transition:all 0.3s ease;
	margin-right:10px;
}
.privacy-info a:hover {
	opacity:0.7;
}
.privacy-info .agree {
	display: inline-flex;
    gap: 5px;
    margin-top:30px;
    width:100%;
}
.privacy-info .agree .inner {	margin:auto;
	display: inline-flex;
	align-items:center;
}
.privacy-info .agree label {
	width:100%;
}
.privacy-info .agree input[type=checkbox] {
	width:25px;
}
input[type=checkbox] {
	accent-color:#239015;
}