@charset "UTF-8";

/* ブロック */
.block_1col {
	width    : 100%;
	padding  : .5em;
	overflow : hidden;
}


.block_2col {
	width           : 100%;
	display         : flex;
	flex-wrap       : wrap;
	justify-content : space-between;
	overflow        : hidden;
}

.block_2col .block_column {
	width    : 50%;
	padding  : .5em;
	overflow : hidden;
}


@media all and (max-width : 768px) {
	.block_2col .block_column {
		width    : 100%;
		padding  : .5em;
		overflow : hidden;
	}
}


.block_3col {
	width           : 100%;
	display         : flex;
	flex-wrap       : wrap;
	justify-content : space-between;
	overflow        : hidden;
}

.block_3col .block_column {
	width    : 33.33%;
	padding  : .5em;
	overflow : hidden;
}


@media all and (max-width : 768px) {
	.block_3col .block_column {
		width    : 100%;
		padding  : .5em;
		overflow : hidden;
	}
}


h3.ttl_section {
	padding       : 0 0 10px;
	border-bottom : 1px solid #CCC;
	margin        : 0 0 10px;
}


h4 {
	color   : #54a9b5;
	padding : 30px 0 10px;
}


input, button, textarea, select {
	margin             : 0;
	padding            : 0;
	background         : none;
	border             : none;
	border-radius      : 0;
	outline            : none;
	-webkit-appearance : none;
	-moz-appearance    : none;
	appearance         : none;
	transition         : all .3s ease;
}


input[type="radio"], input[type="checkbox"] {
	-webkit-appearance : initial;
	-moz-appearance    : initial;
	appearance         : auto;
}

input[type="text"]:focus, textarea:focus, select:focus {
	/*background-color : #ffe6e7 !important;*/
}

#page_entry input[type="radio"] {
	-moz-appearance    : radio;
	appearance         : radio;
  -webkit-appearance : radio;
}
#page_entry input[type="checkbox"] {
	-moz-appearance    : checkbox;
	appearance         : checkbox;
  -webkit-appearance : checkbox;
}
#page_entry .ec-radio input[type=radio] {
  display: none;
}
#page_entry .ec-radio label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 30px;
  position: relative;
  width: auto;
}
#page_entry .ec-radio label::before {
  background: #fff;
  border: 1px solid #999;
  border-radius: 50%;
  content: '';
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 16px;
}
#page_entry .ec-radio label::after {
  background: #4EADD1;
  border-radius: 50%;
  content: '';
  display: block;
  height: 10px;
  left: 8px;
  margin-top: -5px;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 10px;
}
#page_entry .ec-radio input[type=radio]:checked + label::after {
  opacity: 1;
}

/* チェックボックス */
#page_mypage_login .form-check input[type="checkbox"],
#page_shopping_login .form-check input[type="checkbox"],
#page_entry .ec-checkbox input[type="checkbox"] {
  display: none;
}
#page_mypage_login .form-check label,
#page_shopping_login .form-check label,
#page_entry .ec-checkbox label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 0 5px 30px;
  position: relative;
  width: auto;
}
#page_mypage_login .form-check label::before ,
#page_shopping_login .form-check label::before ,
#page_entry .ec-checkbox label::before {
  background: #fff;
  border: 1px solid #231815;
  content: '';
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 16px;
}
#page_mypage_login .form-check label::after ,
#page_shopping_login .form-check label::after ,
#page_entry .ec-checkbox label::after {
  border-right: 3px solid #4EADD1;
  border-bottom: 3px solid #4EADD1;
  content: '';
  display: block;
  height: 11px;
  left: 10px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 6px;
}
#page_mypage_login .form-check input[type=checkbox]:checked + label::after ,
#page_shopping_login .form-check input[type=checkbox]:checked + label::after ,
#page_entry .ec-checkbox input[type=checkbox]:checked + label::after {
  opacity: 1;
}

span.required {
	color       : crimson;
	font-weight : bold;
}


input[type="text"], input[type="password"], textarea {
	display          : inline-block;
	width            : 100%;
	height           : 38px;
	padding          : 6px 12px;
	font-size        : 16px;
	line-height      : 1.5;
	color            : #495057;
	background-color : #fff;
	background-clip  : padding-box;
	border           : 1px solid #ced4da;
	border-radius    : 4px;
	transition       : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.box_search input[type="text"] {
	width  : calc(100% - 25px) !important;
	border : none !important;
}


/* placeholderの色設定 */
/* Chrome */
::-webkit-input-placeholder {
	color : #adadad;
}

/* Firefox */
::-moz-placeholder {
	color : #adadad;
}

/* IE */
:-ms-input-placeholder {
	color : #adadad;
}


.letter5 {width : 5em !important;}

.letter10 {width : 10em !important;}

.letter15 {width : 15em !important;}

.letter20 {width : 20em !important;}

.letter30 {width : 30em !important;}


/* 入力補助テキスト */
.additional_txt {
	font-size : 12px;
}


/* プルダウン01 */
.select-wrap {
	display  : inline-block;
	position : relative;
	margin   : 0 0 20px;
}

.select-wrap:before {
	position       : absolute;
	right          : 15px;
	top            : 0;
	content        : "▼";
	line-height    : 43px;
	color          : #7F878C;
	pointer-events : none;
	z-index        : 20;
}

select {
	outline            : none;
	-moz-appearance    : none;
	text-indent        : 0.01px;
	text-overflow      : '';
	background         : #fff;
	vertical-align     : middle;
	font-size          : inherit;
	-webkit-appearance : button;
	-moz-appearance    : button;
	appearance         : button;
	-webkit-appearance : none;
	-moz-appearance    : none;
	appearance         : none;
	height             : 40px;
	padding            : 8px 12px;
	border             : 1px solid #ddd;
	color              : #828c9a;
	width              : 100%;
	border-radius      : 3px;
}

select option {
	background-color : #fff;
	color            : #333;
}

select::-ms-expand {
	display : none;
}

select:-moz-focusring {
	color       : transparent;
	text-shadow : 0 0 0 #828c9a;
}

.select-wrap.select-primary:before {
	color : #666;
}

.select-wrap.select-primary > select {
	background   : #e8eeee;
	color        : #666666;
	border-color : #e8eeee;
}

.select-wrap.select-primary > select:-moz-focusring {
	color       : transparent;
	text-shadow : 0 0 0 #fff;
}


/*プルダウン02*/
.selectWrap {
	position : relative;
	display  : inline-block;
}

.selectWrap::after {
	content           : '';
	width             : 8px;
	height            : 8px;
	border            : 0px;
	border-bottom     : solid 2px #ced4da;
	border-right      : solid 2px #ced4da;
	-ms-transform     : rotate(45deg);
	-webkit-transform : rotate(45deg);
	transform         : rotate(45deg);
	position          : absolute;
	top               : 50%;
	right             : 15px;
	margin-top        : -6px;
	z-index           : 20;
}

.select01 {
	-webkit-appearance : none;
	-moz-appearance    : none;
	appearance         : none;
	width              : 100%;
	height             : 40px;
	background         : #FFF;
	position           : relative;
	z-index            : 1;
	padding            : 0 40px 0 10px;
	border             : 1px solid #ced4da;
	border-radius      : 2px;
}

select::-ms-expand {
	display : none;
}


/* チェックボックス */
ul.list_check {
	overflow   : hidden;
	list-style : none;
}


li.list_item {
	display : inline-block;
	margin  : 0;
	padding : 0 30px 0 0;
}

li.list_item label {
	display     : block;
	line-height : 135%;
	position    : relative;
	margin      : 8px;
	cursor      : pointer;
	padding     : .5em 0;
}

li.list_item .option-input05 {
	display  : inline;
	position : relative;
	margin   : 0 24px 0 0;
	cursor   : pointer;
}

li.list_item .option-input05:before {
	position           : absolute;
	z-index            : 1;
	top                : 2px;
	left               : 3px;
	width              : 12px;
	height             : 6px;
	content            : '';
	-webkit-transition : -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	transition         : transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform  : rotate(-45deg) scale(0, 0);
	transform          : rotate(-45deg) scale(0, 0);
	border             : 2px solid #da3c41;
	border-top-style   : none;
	border-right-style : none;
}

li.list_item .option-input05:checked:before {
	-webkit-transform : rotate(-45deg) scale(1, 1);
	transform         : rotate(-45deg) scale(1, 1);
}

li.list_item .option-input05:after {
	position   : absolute;
	top        : -2px;
	left       : 0;
	width      : 16px;
	height     : 16px;
	content    : '';
	cursor     : pointer;
	border     : 1px solid #CCC;
	background : #ffffff;
}


/* ブロック式チェックボックス */
ul.ks-cboxtags {
	list-style : none;
	padding    : 0;
	background : #f1f2f2;
}

ul.ks-cboxtags li {
	display : inline;
	padding : 0 !important;
}

ul.ks-cboxtags li label {
	display                     : inline-block;
	background-color            : rgba(255, 255, 255, .9);
	border                      : 1px solid rgba(139, 139, 139, .3);
	color                       : #adadad;
	border-radius               : 5px;
	white-space                 : nowrap;
	margin                      : 3px 0px;
	-webkit-touch-callout       : none;
	-webkit-user-select         : none;
	-moz-user-select            : none;
	-ms-user-select             : none;
	user-select                 : none;
	-webkit-tap-highlight-color : transparent;
	transition                  : all .2s;
}

ul.ks-cboxtags li label {
	padding : 8px 12px;
	cursor  : pointer;
}

ul.ks-cboxtags li label::before {
	display                : inline-block;
	font-style             : normal;
	font-variant           : normal;
	text-rendering         : auto;
	-webkit-font-smoothing : antialiased;
	font-family            : "Font Awesome 5 Free";
	font-weight            : 900;
	font-size              : 12px;
	padding                : 2px 6px 2px 2px;
	content                : "\f067";
	transition             : transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
	content    : "\f00c";
	transform  : rotate(-360deg);
	transition : transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
	border           : 1px solid #1bdbf8;
	background-color : #12bbd4;
	color            : #fff;
	transition       : all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
	display : absolute;
}

ul.ks-cboxtags li input[type="checkbox"] {
	position : absolute;
	opacity  : 0;
}


/* ブロック式チェックボックス2 */
ul.box_style_check {
	list-style : none;
	padding    : 0;
}

ul.box_style_check li {
	display : inline;
	padding : 0 !important;
	margin  : 0;
}


ul.box_style_check input[type=checkbox] {
	display : none;
}

ul.box_style_check input[type="checkbox"]:checked + label {
	background : #12bbd4;
	color      : #ffffff;
}

ul.box_style_check .check_label:hover {
	background-color : #e4fffe;
}

ul.box_style_check .check_label {
	display          : inline-block;
	float            : left;
	margin           : 0;
	text-align       : center;
	line-height      : 35px;
	padding-left     : 10px;
	padding-right    : 10px;
	cursor           : pointer;
	color            : #adadad;
	transition       : all .3s ease;
	border-top       : 1px solid rgba(139, 139, 139, .3);
	border-bottom    : 1px solid rgba(139, 139, 139, .3);
	border-right     : 1px solid rgba(139, 139, 139, .3);
	background-color : rgba(255, 255, 255, .9);
}

ul.box_style_check .check_label.first_label {
	border-left               : 1px solid rgba(139, 139, 139, .3);
	border-top-left-radius    : 5px;
	border-bottom-left-radius : 5px;
}

ul.box_style_check .check_label.last_label {
	border-top-right-radius    : 5px;
	border-bottom-right-radius : 5px;
}

ul.box_style_check .check_label.single_label {
	border-radius : 5px;
}


/* ラジオボタン */
ul.list_radio {
	overflow   : hidden;
	list-style : none;
}


ul.list_radio li {
	display : inline-block;
	margin  : 0;
	padding : 0 30px 0 0;
}

.radio-input {
	display : none;
}

.radio-input + label {
	padding      : 0 20px 0 30px;
	position     : relative;
	margin-right : 20px;
}

.radio-input + label::before {
	content       : "";
	display       : block;
	position      : absolute;
	top           : 0;
	left          : 10px;
	width         : 17px;
	height        : 17px;
	border        : 1px solid #999;
	border-radius : 50%;
}

.radio-input:checked + label {
	color : #009a9a;
}

.radio-input:checked + label::after {
	content       : "";
	display       : block;
	position      : absolute;
	top           : 3px;
	left          : 13px;
	width         : 11px;
	height        : 11px;
	background    : #009a9a;
	border-radius : 50%;
}


/* ブロック式ラジオボタン */
ul.box_style_radio {
	list-style : none;
	padding    : 0;
}

ul.box_style_radio li {
	display : inline;
	padding : 0 !important;
	margin  : 0;
}


ul.box_style_radio input[type="radio"] {
	display : none;
}

ul.box_style_radio input[type="radio"]:checked + label {
	background : #12bbd4;
	color      : #ffffff;
}

ul.box_style_radio .radio_label:hover {
	background-color : #e4fffe;
}

ul.box_style_radio .radio_label {
	display          : inline-block;
	float            : left;
	margin           : 0;
	text-align       : center;
	line-height      : 35px;
	padding-left     : 10px;
	padding-right    : 10px;
	cursor           : pointer;
	color            : #adadad;
	transition       : all .3s ease;
	border-top       : 1px solid rgba(139, 139, 139, .3);
	border-bottom    : 1px solid rgba(139, 139, 139, .3);
	border-right     : 1px solid rgba(139, 139, 139, .3);
	background-color : rgba(255, 255, 255, .9);
}

ul.box_style_radio .radio_label.first_label {
	border-left               : 1px solid rgba(139, 139, 139, .3);
	border-top-left-radius    : 5px;
	border-bottom-left-radius : 5px;
}

ul.box_style_radio .radio_label.last_label {
	border-top-right-radius    : 5px;
	border-bottom-right-radius : 5px;
}


/* テキストエリア */
.row10 {
	height : 10em;
}

.row15 {
	height : 15em;
}

.row20 {
	height : 20em;
}

.row30 {
	height : 30em;
}

.row50 {
	height : 50em;
}


/* ボタンエリア */
.block_buttons {
	width      : 100%;
	padding    : 2em 0;
	text-align : center;
	margin     : 0 auto;
	background : #54687A;
}


.block_buttons2 {
	display    : inline-block;
	padding    : 0;
	text-align : center;
	margin     : 0 auto;
}

.block_buttons3 {
	display    : inline-block;
	text-align : left;
	padding    : 0;
	margin     : 0 auto;
}

.block_buttons input[type="button"],
.block_buttons input[type="submit"],
a.open_modal {
	display       : inline-block;
	min-width     : 20%;
	border-radius : 5px;
	padding       : .8em 1em;
	margin        : 0 1.5%;
	font-size     : 16px;
	transition    : all .3s ease;
	box-shadow    : 0px 1px 3px rgba(0, 0, 0, .3);
}


.block_buttons2 input[type="button"],
.block_buttons2 input[type="submit"] {
	display       : inline-block;
	min-width     : 20%;
	border-radius : 5px;
	padding       : .6em 1em;
	margin        : 0 1.5%;
	font-size     : 14px;
	transition    : all .3s ease;
	background    : #54687A;
	color         : #FFF;
	opacity       : 1;
}


.block_buttons2 input[type="button"]:hover,
.block_buttons2 input[type="submit"]:hover {
	opacity : .8;
}


input.back {
	background : #FFF;
	border     : 1px solid #666;
	color      : #666;
}


input.back:hover {
	background : #F1F2F2;
}


input.next {
	background : #54a9b5;
	color      : #FFF;
}

input.next:hover {
	background : #04cbbd;
	border     : 1px solid #000;
}

input.btn_add {
	display       : inline-block;
	background    : #83898a;
	color         : #FFF;

	min-width     : 20%;
	border-radius : 5px;
	padding       : .6em 1em;
	margin        : 0 1.5%;
	font-size     : 12px;
	transition    : all .3s ease;
	box-shadow    : 0px 1px 3px rgba(0, 0, 0, .3);
}

input.btn_add:hover {
	background : #aab1b1;
	border     : 1px solid #000;
}

input.btn_setting {
	display       : inline-block;
	background    : #2C3E50;
	color         : #FFF;
	min-width     : 20%;
	border-radius : 5px;
	padding       : .8em 1em;
	margin        : 0 0 20px 0;
	font-size     : 16px;
	transition    : all .3s ease;
	box-shadow    : 0px 1px 3px rgba(0, 0, 0, .3);
}

input.btn_setting:hover {
	background : #3f5772;
	border     : 1px solid #000;
}

input.enquete {
	background : #0c95be;
	color      : #FFF;
}

input.enquete:hover {
	background : #0a87ac;
}


a.open_modal {
	background : #54a9b5;
	color      : #FFF;
}

a.open_modal:hover {
	background : #04cbbd;
}


/* ファイルアップロード */
.block_photo_upload {
	padding : 5px 0;
	margin  : 0 0 10px;
}


label.upload > input {
	display : none;
}


label.upload {
	color         : #FFF;
	background    : #006DD9;
	padding       : 10px;
	border-radius : 5px;
	line-height   : 3em;
}


/* グループサイト新規登録後のモーダル設定 */
#inline_content {
	display : none;
}


.modaal-content-container h4 {
	color : #54a9b5 !important;
}


/**/
.link_url, .pdf_upload {
	padding : 5px 0 0;
	display : none;
}


/* ON/OFFスイッチ切り替え */
/* === ボタンを表示するエリア ============================== */
.switchArea {
	line-height    : 30px; /* 1行の高さ          */
	letter-spacing : 0; /* 文字間             */
	text-align     : center; /* 文字位置は中央     */
	font-size      : 14px; /* 文字サイズ         */
	position       : relative; /* 親要素が基点       */
	margin         : auto; /* 中央寄せ           */
	width          : 70px; /* ボタンの横幅       */
	background     : #fff; /* デフォルト背景色   */
}

/* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
	display : none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
	display       : block; /* ボックス要素に変更 */
	box-sizing    : border-box; /* 枠線を含んだサイズ */
	height        : 30px; /* ボタンの高さ       */
	border        : 1px solid #999999; /* 未選択タブのの枠線 */
	border-radius : 15px; /* 角丸               */
}

/* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked + label {
	border-color : #54a9b5; /* 選択タブの枠線     */
}

/* === 表示する文字（標準） ================================ */
.switchArea label span:after {
	content : "OFF"; /* 表示する文字       */
	padding : 0 0 0 25px; /* 表示する位置       */
	color   : #999999; /* 文字色             */
}

/* === 表示する文字（ONのとき） ============================ */
.switchArea input[type="checkbox"]:checked + label span:after {
	content : "ON"; /* 表示する文字       */
	padding : 0 25px 0 0; /* 表示する位置       */
	color   : #54a9b5; /* 文字色             */
}

/* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
	position      : absolute; /* 親要素からの相対位置*/
	width         : 22px; /* 丸の横幅           */
	height        : 22px; /* 丸の高さ           */
	background    : #999999; /* カーソルタブの背景 */
	top           : 4px; /* 親要素からの位置   */
	left          : 4px; /* 親要素からの位置   */
	border-radius : 26px; /* 角丸               */
	transition    : .2s; /* 滑らか変化         */
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
	transform  : translateX(40px); /* 丸も右へ移動       */
	background : #54a9b5; /* カーソルタブの背景 */
}


.area_reform {
	margin        : 0 0 10px;
	padding       : 0 0 40px;
	border-bottom : 1px dotted #CCC;
}

.c-form__fileUploadThumbnails {
	margin-bottom : 10px;
}


.c-form__fileUploadThumbnail {
	display             : inline-block;
	width               : 170px;
	height              : 170px;
	background-color    : #f5f6f8;
	background-image    : url('../../img/moc.png');
	background-position : center;
	background-repeat   : no-repeat;
	background-size     : contain;
	cursor              : pointer;
	position            : relative;
}


.c-form__fileUploadThumbnail::before {
	display    : block;
	content    : "";
	width      : 100%;
	height     : 100%;
	background : transparent;
}

.c-form__fileUploadThumbnail .delete-image {
	display       : none;
	font-family   : FontAwesome;
	font-size     : 18px;
	line-height   : 1;
	color         : #54687A;
	padding       : 5px;
	background    : #fff;
	border-radius : 3px;
	position      : absolute;
	top           : 2px;
	right         : 2px;
}


.c-form__fileUploadThumbnail:hover .c-form__fileUploadThumbnail::before {
	background : rgba(0, 0, 0, 0.5);
}

.c-form__fileUploadThumbnail .delete-image {
	display       : inline-block;
	font-family   : FontAwesome;
	font-size     : 18px;
	line-height   : 1;
	color         : #54687A;
	padding       : 5px;
	background    : #fff;
	border-radius : 3px;
	position      : absolute;
	top           : 2px;
	right         : 2px;
}

.btn_edit_mini {
	display       : inline-block;
	background    : #c6cfcf;
	color         : #000000;
	font-size     : 10.5px;

	min-width     : 20%;
	border-radius : 5px;
	padding       : .4em .8em;
	margin        : 0 1.5%;
	transition    : all .3s ease;
	box-shadow    : 0px 1px 3px rgba(0, 0, 0, .3);
}

.btn_edit_mini:hover {
	background : #eff8f8;
	border     : 1px solid #000;
}

/* マイページ検索ボックス */
.block_2col .block_search {
	width    : 100%;
	padding  : .5em;
	overflow : hidden;
}

@media only screen and (min-width: 768px) {

	.ec-mypageRole .ec-headerSearch__category {
		width: 60%;
	}

	.ec-mypageRole .ec-headerSearch__keyword {
		width: 40%;
	}

	.ec-mypageRole select {
		max-width: none !important;
		padding-left: 20px !important;
	}

	.block_2col .block_search {
		width: 60%;
		padding: .5em;
		overflow: hidden;
	}
}