@charset "utf-8";
/*************************************************
 makepage用(リフィルレイアウト以外の部分)
*************************************************/
@import url('https://fonts.googleapis.com/css?family=ABeeZee|Abril+Fatface|Alfa+Slab+One|Audiowide|Bad+Script|Bangers|Barriecito|Black+Ops+One|Bonbon|Chango|Comfortaa|Coming+Soon|Cormorant+Garamond|Crafty+Girls|Emilys+Candy|Fascinate+Inline|Freckle+Face|Fredoka+One|Fugaz+One|Gloria+Hallelujah|Gochi+Hand|Griffy|Hanalei|Henny+Penny|Hi+Melody|Homemade+Apple|Indie+Flower|Josefin+Sans|Kaushan+Script|Leckerli+One|Libre+Baskerville|Limelight|Liu+Jian+Mao+Cao|Lobster|Lobster+Two|Love+Ya+Like+A+Sister|Luckiest+Guy|M+PLUS+1p|Ma+Shan+Zheng|Mali|Mansalva|Marck+Script|Miltonian|Miniver|Monoton|Montserrat|Mr+Dafoe|Nanum+Gothic|Neucha|Notable|Noto+Sans+JP|Noto+Serif+JP|Noto+Serif+KR|Noto+Serif+SC|Noto+Serif+TC|Pacifico|Permanent+Marker|Press+Start+2P|Rajdhani|Raleway|Ribeye|Ribeye+Marrow|Sacramento|Satisfy|Sawarabi+Mincho|Schoolbell|Snowburst+One|Spirax|Turret+Road|Vibes|Vibur|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei|Zhi+Mang+Xing&display=swap');

/* -----------------------------------------------
 フォーム
------------------------------------------------ */
/* フォームデザイン
--------------------------- */
.select_layout {
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 30px 1% 5px;
}
.select_layout dt {
	overflow-wrap: normal;
	line-height: 30px;
	padding: 0 10px;
	margin: 10px 0 0;
	background: #e2f7f2;
}
.select_layout dd {
	height: auto;
	min-height: 40px;
	margin: 0;
	border-left: 5px dotted #e2f7f2;
	padding: 1%;
	background: #fff;
	font-size: 12px;
	line-height: 100%;
}
@media (min-width: 780px) {
	.select_layout dt {
		line-height: 125%;
		width: 6em;
		height: 40px;
		margin: 1px 0;
		float: left;
		clear: both;
		padding: 1%;
	}
	.select_layout dd {
		padding: 1% 1% 1% 9em;
		border-left: 0;
	}
}

/* セレクトボックス */
.select_layout select {
	height: 40px;
	padding: 0 10px;
	border: 1px solid #b6b6b6;
	border-radius: 3px;
	margin: 0 10px 0 0;
}

/* ラジオボタン */
.inline-radio {
  overflow: hidden;
/*  border: 1px solid #b6b6b6; */

  display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.inline-radio li {
	list-style: none;
	position: relative;
	border: 1px solid #b6b6b6;
  border-radius: 5px;
  margin: 1px;
	width: 100px;
	height: 40px;
}
.inline-radio li.bg_type_10 {
	height: 200px;
	width: 100%;
}
.date_sheet_bg .inline-radio li {
	width: 100px;
	height: 100px;
	-ms-flex-positive: 0;
	-webkit-box-flex: 0;
	flex-grow: 0;
	overflow: hidden;
	text-align: center;
	position: relative;
}
.date_sheet_bg .inline-radio li img {
	border-radius: 5px;
	position: absolute;
	width: 100%;
}
.layout .inline-radio li {
	width: 150px;
}
.imgback_color .inline-radio li,
.font_color .inline-radio li {
	width: auto;
	flex-grow: 1;
}
@media (max-width: 500px) {
	.imgback_color .inline-radio li,
	.font_color .inline-radio li {
		width: 40px;
		flex-grow: 0;
	}
}
@media (min-width: 780px) {
	.inline-radio {
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
	}
	.inline-radio li {
		-ms-flex-positive: 1;
		 -webkit-box-flex: 1;
		        flex-grow: 1;
	}
}
@media (min-width: 900px) {
	.date_sheet_bg .inline-radio li {
		width: auto;
		-ms-flex-positive: 1;
		-webkit-box-flex: 1;
		flex-grow: 1;
	}
}

.inline-radio input {
  width: 100%;
	height: 100%;
  border-radius: 5px;
  opacity: 0;
}
.inline-radio label {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* transition: all 0.5s ease; ホバーで背景ふんわりにしたい時に*/
}
.layout .inline-radio label {
	width: 110px;
	padding: 0 0 0 40px;
}
@media (min-width: 780px) {
	.layout .inline-radio label {
		width: 85%;
		padding: 0 0 0 15%;
	}
}
.inline-radio label img {
	display: block;
	height: 28px;
	position: absolute;
	top: 6px;
	left: 3%;
	background: #fff;
	border-radius: 3px;
}
.inline-radio label span {
	font-size: 10px;
	display: block;
	position: absolute;
	bottom: 0;
}
.inline-radio input:hover + label,
.inline-radio input:checked + label {
  background: rgba(245,204,117,0.3);
}
.inline-radio input + label:after,
.inline-radio input + label:before {
	content: '';
	height: 28px;
	width: 6px;
	background: #ff98a3;
	display: block;
	position: absolute;
	top: 6px;
	left: 20px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	        transform: rotate(45deg) scale(0);
	-webkit-transform: rotate(45deg) scale(0);
	   -moz-transform: rotate(45deg) scale(0);
	     -o-transform: rotate(45deg) scale(0);
	    -ms-transform: rotate(45deg) scale(0);
	transition: all 1s ease;
	opacity: 0;
	transform: scale(0);
}
.inline-radio input + label:before {
	transition: all 0.3s ease;
	height: 0px;
	        transform: rotate(-45deg) scale(1);
	-webkit-transform: rotate(-45deg) scale(1);
	   -moz-transform: rotate(-45deg) scale(1);
	     -o-transform: rotate(-45deg) scale(1);
	    -ms-transform: rotate(-45deg) scale(1);
	top: 18px;
	left: 8px;
}
.inline-radio input:checked + label:after,
.inline-radio input:checked + label:before {
	z-index: 2;
	opacity: 1;
		        transform: rotate(45deg) scale(1);
	-webkit-transform: rotate(45deg) scale(1);
	   -moz-transform: rotate(45deg) scale(1);
	     -o-transform: rotate(45deg) scale(1);
	    -ms-transform: rotate(45deg) scale(1);
}
.inline-radio input:checked + label:before {
	height: 12px;
	        transform: rotate(-45deg) scale(1);
	-webkit-transform: rotate(-45deg) scale(1);
	   -moz-transform: rotate(-45deg) scale(1);
	     -o-transform: rotate(-45deg) scale(1);
	    -ms-transform: rotate(-45deg) scale(1);
}


/* 100リスト用テキストボックス */
.select_layout .text {
	line-height: 150%;
}
.select_layout .text input {
	height: 30px;
	width: 100%;
	max-width: 20em;
	font-size: 150%;
	border-radius: 5px;
	border: 1px solid #bfbfbf;
	margin: 0 0 0.3em;
}

/* 日付シート用margin選択 */
dd.margin .inline-radio li {
	width: 49%;
}



/* member日付シート用 フォントカラー */
dd.font_color .inline-radio input:hover + label,
dd.font_color .inline-radio input:checked + label {
	background: none;
	box-shadow: 0 0 10px #999;
}

li.font_color_00 { background: #ff003c; }
li.font_color_01 { background: #ffa600; }
li.font_color_02 { background: #ffe600; }
li.font_color_03 { background: #48ce00; }
li.font_color_04 { background: #00ffee; }
li.font_color_05 { background: #0bf; }
li.font_color_06 { background: #0062ff; }
li.font_color_07 { background: #9500ff; }
li.font_color_08 { background: #000; }
li.font_color_09 { background: #8e0300; }

li.font_color_10 { background: #ff80a6; }
li.font_color_11 { background: #ffbf60; }
li.font_color_12 { background: #ffef60; }
li.font_color_13 { background: #b0ff60; }
li.font_color_14 { background: #60ffcf; }
li.font_color_15 { background: #60cfff; }
li.font_color_16 { background: #808dff; }
li.font_color_17 { background: #c080ff; }
li.font_color_18 { background: #888; }
li.font_color_19 { background: #a66666; }

li.font_color_20 { background: #ffbfe5; }
li.font_color_21 { background: #ffd2bf; }
li.font_color_22 { background: #fff59f; }
li.font_color_23 { background: #e6ff80; }
li.font_color_24 { background: #bfffc6; }
li.font_color_25 { background: #bfffff; }
li.font_color_26 { background: #bfd9ff; }
li.font_color_27 { background: #dfbfff; }
li.font_color_28 { background: #fff; }
li.font_color_29 { background: #c6b2a7; }

li.font_color_30 { background: #c895b3; }
li.font_color_31 { background: #c8a495; }
li.font_color_32 { background: #c8c17e; }
li.font_color_33 { background: #afc895; }
li.font_color_34 { background: #95c8a9; }
li.font_color_35 { background: #95c8c8; }
li.font_color_36 { background: #95a9c8; }
li.font_color_37 { background: #af95c8; }
li.font_color_38 { background: #9c9aac; }
li.font_color_39 { background: #aa9d98; }

li.font_color_40 { background: #88506b; }
li.font_color_41 { background: #805300; }
li.font_color_42 { background: #807300; }
li.font_color_43 { background: #668000; }
li.font_color_44 { background: #1f7c71; }
li.font_color_45 { background: #1f637c; }
li.font_color_46 { background: #2e4b7a; }
li.font_color_47 { background: #644a77; }
li.font_color_48 { background: #76798c; }
li.font_color_49 { background: #7a7068; }

.font_color_00 { color: #ff003c; }
.font_color_01 { color: #ffa600; }
.font_color_02 { color: #ffe600; }
.font_color_03 { color: #48ce00; }
.font_color_04 { color: #00ffee; }
.font_color_05 { color: #0bf; }
.font_color_06 { color: #0062ff; }
.font_color_07 { color: #9500ff; }
.font_color_08 { color: #000; }
.font_color_09 { color: #8e0300; }

.font_color_10 { color: #ff80a6; }
.font_color_11 { color: #ffbf60; }
.font_color_12 { color: #ffef60; }
.font_color_13 { color: #b0ff60; }
.font_color_14 { color: #60ffcf; }
.font_color_15 { color: #60cfff; }
.font_color_16 { color: #808dff; }
.font_color_17 { color: #c080ff; }
.font_color_18 { color: #888; }
.font_color_19 { color: #a66666; }

.font_color_20 { color: #ffbfe5; }
.font_color_21 { color: #ffd2bf; }
.font_color_22 { color: #fff59f; }
.font_color_23 { color: #e6ff80; }
.font_color_24 { color: #bfffc6; }
.font_color_25 { color: #bfffff; }
.font_color_26 { color: #bfd9ff; }
.font_color_27 { color: #dfbfff; }
.font_color_28 { color: #fff; }
#member_date_sheet .print_contents .font_color_28 {
	text-shadow: 1px 1px 3px #000;
}
#member_date_sheet .print_contents .font_color_28 h2 {
	text-shadow: 2px 2px 5px #000;
}
.font_color_29 { color: #c6b2a7; }

.font_color_30 { color: #c895b3; }
.font_color_31 { color: #c8a495; }
.font_color_32 { color: #c8c17e; }
.font_color_33 { color: #afc895; }
.font_color_34 { color: #95c8a9; }
.font_color_35 { color: #95c8c8; }
.font_color_36 { color: #95a9c8; }
.font_color_37 { color: #af95c8; }
.font_color_38 { color: #9c9aac; }
.font_color_39 { color: #aa9d98; }

.font_color_40 { color: #88506b; }
.font_color_41 { color: #805300; }
.font_color_42 { color: #807300; }
.font_color_43 { color: #668000; }
.font_color_44 { color: #1f7c71; }
.font_color_45 { color: #1f637c; }
.font_color_46 { color: #2e4b7a; }
.font_color_47 { color: #644a77; }
.font_color_48 { color: #76798c; }
.font_color_49 { color: #7a7068; }


/* font選択 */
.select_card {
	border-right: 4px solid #fff;
	border-bottom: 4px solid #fff;
	box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
  border-radius: 3px;
	width: 100%;
	position: relative;
}
.select_card li {
  border-radius: 3px;
	list-style: none;
	height: 40px;
	margin: -40px auto 0;
	background: #fff;
  transition: all 0.5s ease;
}
.active li {
	margin-top: 0;
}
.select_card li.title {
	z-index: 2;
}
.select_card li.title:after,
.select_card input:checked + label:after {
	content: '';
	height: 0;
	width: 0;
	display: block;
	border: 14px transparent solid;
	border-bottom-width: 0;
	border-top-color: #ccc;
	position: absolute;
	top: 14px;
	right: 10px;
}
.select_card li:first-child {
	margin-top: 0;
}

.select_card input {
	display: block;
	width: 100%;
	height: 100%;
  opacity: 0;
}
.select_card label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
  pointer-events: none;
	/* color: #b6b6b6; */
	width: 98%;
	height: 20px;
	font-size: 18px;
	line-height: 20px;
	padding: 10px 0 10px 2%;
	border: 1px solid #b6b6b6;
	border-radius: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.select_card label span {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 10px;
	position: absolute;
	bottom: -4px;
	right: 2px;
}
.select_card li:hover,
.select_card input:hover + labe {
  background: #f6f6f6;
}
.select_card input:checked + label {
  background: #ddd;
	z-index: 3;
}
.select_card .title label {
	font-size: 12px;
}

/* 色設定フォーム */
.select_layout .showhide_toggle {
	position: relative;
}
.select_layout .showhide_toggle:before {
	content: '';
	display: block;
	height: 100%;
	width: 121%;
	position: absolute;
	top: 0;
	left: -22%;
	border: 0;
	transition: all 0.5s ease;
}
.select_layout .showhide_toggle:hover:before {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.select_color {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	padding: 2.5%;
}
.select_color li {
	width: 5.2%;
	height: 20px;
	line-height: 20px;
	border: 0;
	box-shadow: 0px 0px 0px;
}
.select_color li:hover {
	border: 3px solid #fff;
	margin: -3px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
	z-index: 2;
}
.select_color button {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	background: #fff;	/* 直にstyle使用 */
}

.button {
	display: block;
	background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);
	border: none;
	border-radius: 30px;
	box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.15);
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 60px;
	/* padding: 15px 0; */
	margin: 10px auto;
	height: 60px;
	width: 100%;
	max-width: 500px;
	text-align: center;
	position: relative;
}
.button img{
	width: 32px;
	margin-right: 10px;
	vertical-align: middle;
}
.button div.caution {
	position: absolute;
	width: 100%;
	height: 15px;
	font-size: 11px;
	font-weight: normal;
	bottom: 25px;
}
a.button {
	text-decoration: none;
}
a.button:visited {
	color: #fff;
}

.button:hover {
	box-shadow: 0px 0px 0px;
	opacity: 0.7;
}

/* -----------------------------------------------
 ページスライダー
------------------------------------------------ */
.slick-dotted.slick-slider {
    margin-bottom: 50px;
}
.print_img .slick-prev:before,
.print_img .slick-next:before {
	content:'';
	height: 0;
	width: 0;
	display: block;
	border: 10px transparent solid;
	border-left-width: 0;
	border-right-color: #7b6c6d;
	position: absolute;
	top: 10px;
	left: 13px;
}
.print_img .slick-next:before {
	border: 10px transparent solid;
	border-right-width: 0;
	border-left-color: #7b6c6d;
	left: 17px;
}
.print_img .slick-prev,
.print_img .slick-next {
	left: 15px;
	z-index: 10;
	display: block;
	height: 40px;
	width: 40px;
	border-radius: 30px;
	background: #f5f5f5;
	position: absolute;
	top: 50%;
	left: -5%;
}
.print_img .slick-next {
	left: auto;
	right: -5%;
}
.print_img .slick-disabled {
	opacity: 0.5;
}

/* ページ下のドット */
.slick-dots {
	bottom: -40px;
}
.slick-dots li {
	width: 30px;
	height: 30px;
}
.slick-dots li button {
	width: 30px;
	height: 30px;
}
.slick-dots li button:before {
	font-size: 30px;
	line-height: 30px;
	width: 30px;
	height: 30px;
}
.slick-dots li.slick-active button:before {
	color: white;
}

/* slick cssリセット */
.slick-slide {
	height: auto;
}


/* -----------------------------------------------
 プレビューボックス
------------------------------------------------ */
.preview_box {
	transition: all 0.3s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 11;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	padding: 5%;
	box-sizing: border-box;
	/* animation-name: box_open; *//* アニメーション名 */
	/* animation-duration: 1s; *//* アニメーション時間 */
}
/*
@keyframes box_open {
	0% {
		display: none;
		opacity: 0;
		height: 0%;
	}
	100% {
		display: block;
		opacity: 1;
		height: 100%;
	}
}
*/
.preview_box_back {
	content:'';
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.5;
}
.preview_hide {
	animation-name: box_hide ;/* アニメーション名 */
	animation-duration: 1s;/* アニメーション時間 */
}
/*
@keyframes box_hide {
	0% {
		display: block;
		opacity: 1;
		height: 100%;
	}
	99% {
		display: block;
	}
	100% {
		display: none;
		opacity: 0;
		height: 0%;
	}
}
*/
.preview_box p {
	color: #fff;
	margin: 10px 0;
	text-align: center;
}
.print_img {
	width: 90%;
	margin: auto;
}
.print_img li.img {
	width: 45%;
	margin: 0 15px;
	float: left;
}
.print_img li.img img {
	width: 100%;
}
.preview_box li.img p {
	background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);
	padding: 5px;
	border-radius: 20px;
}
.preview_box li.img p a {
	color: #fff;
	width: 100%;
	display: block;
	font-size: 11px;
	line-height: 150%;
}
@media (min-width: 780px) {
.preview_box p {
	margin: 20px;
	font-size: 100%;
}
}


.preview_box .bt_close {
	height:40px;
	width:40px;
	display:block;
	position: absolute;
	right: 1%;
	top: 50px;
	background:#666;
	font-size: 10px;
	color: #fff;
	line-height: 70px;
	text-align: center;
	vertical-align: bottom;
	cursor: pointer;
}
@media (min-width: 780px) {
	.preview_box .bt_close {
		right: 10px;
		top: 10px;
	}
}

.preview_box .bt_close:before,
.preview_box .bt_close:after{
	content:'';
	height: 6px;
	width: 28px;
	display: block;
	background: #fff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: absolute;
	top: 14px;
	left: 6px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

.preview_box .bt_close:after {
	transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	-o-transform:rotate(135deg);
	-ms-transform:rotate(135deg);
}

/* -----------------------------------------------
 ローディングアニメ
------------------------------------------------ */
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #fff;
	z-index: 999;
	opacity: 0.8;
}
#loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
    color: #fff;
    z-index: 2;
}
#contens{
    text-align: center;
    margin-top: 30%;
    font-size: 20px;
    color: white;
}

/* ---------------------------
 お知らせ用バナー
--------------------------- */
.top_contents img {
	width: 100%;
	margin: 0px 0 10px;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
	border: 1px solid #ddd;
	border-radius: 5px;
}