@charset "utf-8";

.maintenance_title {
	font-size: 2.0rem;
	color: red;
}

.maintenance_text {
	font-size: 1.0rem;
}

.kami_pkg {
	color: #fff;
	background: #1ea839;
	height: 100px;
	padding: 25px 15px 0;
	font-size: 16px;
}
/*
.btn {
	width: 142px;
	padding: 0;
	border: solid 2px #fff;
}
*/

.pointer:hover {
	cursor: pointer
}

.pc {
	display: block !important;
	max-width: 100%;
}
.sp {
	display: none !important;
}

.card-body p {
	font-size: 15px;
	text-align: left;
}

/* ログインボタン、編集ボタンの位置 */
.sticky {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1;
}
.sticky2 {
	position: fixed;
	top: 145px;
	right: 20px;
	z-index: 1;			
}
.sticky3 {
	position: fixed;
	top: 270px;
	right: 20px;
	z-index: 1;
}
.sticky4 {
	position: fixed;
	top: 345px;
	right: 20px;
	z-index: 1;
}

/*****************************************/
/* ハンバーガーメニュー                  */
/*****************************************/
/*
#nav-drawer {
	position: fixed;
	top: 15px;
	right: 15px;
	z-index: 50;
}
*/

/*チェックボックス等は非表示に*/
/*
.nav-unshown {
	display:none;
}
*/

/*アイコンのスペース*/
/*
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
}
*/

/*ハンバーガーアイコンをCSSだけで表現*/
/*
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;
	width: 42px;
	border-radius: 3px;
	background: #d2bdbc;
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
*/
#nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10000; /* メニューよりも上に表示 */
	width: 50px;    /* 必要に応じて調整 */
	height: 50px;   /* 必要に応じて調整 */
	background: none; /* 必要なら削除 */
	padding: 0;       /* 必要なら削除 */
	/* box-shadow: 0 2px 8px rgba(0,0,0,0.1); 影をつけたい場合 */
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

#nav-open {
	display: inline-block;
	width: 40px;   /* 画像サイズに合わせて調整 */
	height: 40px;  /* 画像サイズに合わせて調整 */
	vertical-align: middle;
	cursor: pointer;
}
#nav-open img {
	width: 100%;
	height: auto;
	display: block;
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
	padding-top: 20px;
	padding-left: 20px;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 350px;/*最大幅（調整してください）*/
	height: 100%;
	background: #fff;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-205%);
	transform: translateX(-205%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*****************************************/
/* スマフォトカレンダー                  */
/*****************************************/
.neon_color_cal {
	background: linear-gradient(transparent 30%, #fff01b 85%);
}
.neon_color_bc_s {
	background: linear-gradient(transparent 30%, #fce1d8 85%);
}
.neon_color_bc_m {
	background: linear-gradient(transparent 30%, #fefcd6 85%);
}
/*****************************************/
/* このデザインでつくるボタン(topページ) */
/*****************************************/
.cal_sakusei {
	width: 400px;
	max-width: 100%;
	font-size:24px;
	font-weight:bold;
	font-family: 'Font Awesome 5 Free';
	display:block;
	text-align:center;
	padding:8px 0 10px;
	color:#fff;
	background-color:#22a839;
	border-radius:25px;
}
.cal_sakusei:hover {
	opacity: 0.7;
	text-decoration: none;
	color: #fff;
}
/*****************************************/
/* このデザインでつくるボタン(日曜日)    */
/*****************************************/
.cal_sakusei_s {
	width: 400px;
	max-width: 100%;
	font-size:24px;
	font-weight:bold;
	font-family: 'Font Awesome 5 Free';
	display:block;
	text-align:center;
	padding:8px 0 10px;
	color:#fff;
	background-color:#f15a24;
	border-radius:25px;
}
.cal_sakusei_s:hover {
	opacity: 0.7;
	text-decoration: none;
	color: #fff;
}
/*****************************************/
/* このデザインでつくるボタン(月曜日)    */
/*****************************************/
.cal_sakusei_m {
	width: 400px;
	max-width: 100%;
	font-size:24px;
	font-weight:bold;
	font-family: 'Font Awesome 5 Free';
	display:block;
	text-align:center;
	padding:8px 0 10px;
	color:#000;
	background-color:#fcee21;
	border-radius:25px;
}
.cal_sakusei_m:hover {
	opacity: 0.7;
	text-decoration: none;
	color: #000;
}

/*****************************************/
/* さらに詳しくボタン                    */
/*****************************************/
.howto {
	width: 500px;
	max-width: 100%;
	font-size:24px;
    font-weight:bold;
	font-family: 'Font Awesome 5 Free';
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#22a839;
    border-radius:25px;
}
.howto:hover {
	opacity: 0.7;
    text-decoration: none;
	color: #fff;

}
/*****************************************/
/* よくある質問ボタン                    */
/*****************************************/
.question {
	width: 500px;
	max-width: 100%;
	font-size:24px;
    font-weight:bold;
	font-family: 'Font Awesome 5 Free';
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#22a839;
    background-color:#fff;
    border-radius:25px;
	border: solid 2px #22a839;
}
.question:hover {
	opacity: 0.7;
    text-decoration: none;
	color: #fff;
	background-color: #22a839;

}

.news {
	font-size:20px;
    font-weight:bold;
	font-family: 'Font Awesome 5 Free';
    text-align:center;
    padding:8px 0 10px;
    color:#22a839;
}

.back {
	width: 500px;
	max-width: 100%;
	font-size:24px;
    font-weight:bold;
	font-family: 'Font Awesome 5 Free';
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#727071;
    border-radius:25px;
	border: solid 2px #727071;
}
.back:hover {
	opacity: 0.7;
    text-decoration: none;
	color: #fff;
	background-color: #727071;
}

.midashi1, .midashi2, .midashi3, .midashi4 {
	font-size: 1.2rem;
}

/*****************************************/
/* よくある質問                          */
/*****************************************/
#QandA {
	width: 100%;
	font-family: メイリオ;
	font-size: 12px; /*全体のフォントサイズ*/
}
#QandA h3 {
	font-size: 16px;
	margin-top: 32px;
}
#QandA dl {
	border: 1px solid #ccc;
}
#QandA dt {
font-weight: bold;
	color: #111;
	background: #f4f4f4; /* 「Q」タイトルの背景色 */
	padding: 8px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#QandA dt:first-child {
	border-top: none;
}
#QandA dt:before {
	content: "Q.";
	font-weight: bold;
	margin-right: 8px;
}
#QandA dd {
	padding: 16px 16px 24px 30px;
	margin: 0;
	line-height: 140%;
	color:#cc1512;
}
#QandA dd:first-line {
	color: #bf0000;
}
#QandA dd:before {
	content: "A.";
	font-weight: bold;
	margin-right: 8px;
	margin-left: -21px;
}

/*****************************************/
/* メディアクエリ                        */
/* 575.98px以下の時                      */
/*****************************************/
@media screen and (max-width: 575.98px) {
	.kami_pkg {
		display: none;
	}
	
	/*
	.btn {
		display: none;
	}
	*/
	
	.step {
		width: 50%;
	}
	.midashi1, .midashi2, .midashi3, .midashi4 {
		font-size: 1.2rem;
	}
	.card-body p {
		font-size: 10px;
	}
	.device-info p {
		font-size: 10px;
	}
	.howto_text {
		font-size: 10px;
	}
	
	/* ボタン */
	.cal_sakusei {
		width: 400px;
		max-width: 75%;
		font-size:20px;
		font-weight:bold;
		font-family: 'Font Awesome 5 Free';
		display:block;
		text-align:center;
		padding:8px 0 10px;
		color:#fff;
		background-color:#22a839;
		border-radius:25px;
	}
	.cal_sakusei:hover {
		opacity: 0.7;
		text-decoration: none;
		color: #fff;
	}

	.howto {
		width: 500px;
		max-width: 80%;
		font-size:24px;
		font-weight:bold;
		font-family: 'Font Awesome 5 Free';
		display:block;
		text-align:center;
		padding:8px 0 10px;
		color:#fff;
		background-color:#22a839;
		border-radius:25px;
	}
	.howto:hover {
		opacity: 0.7;
		text-decoration: none;
		color: #fff;

	}
	.question {
		width: 500px;
		max-width: 80%;
		font-size:24px;
		font-weight:bold;
		font-family: 'Font Awesome 5 Free';
		display:block;
		text-align:center;
		padding:8px 0 10px;
		color:#22a839;
		background-color:#fff;
		border-radius:25px;
		border: solid 2px #22a839;
	}
	.question:hover {
		opacity: 0.7;
		text-decoration: none;
		color: #fff;
		background-color: #22a839;

	}
	.back {
		width: 500px;
		max-width: 80%;
		font-size:24px;
		font-weight:bold;
		font-family: 'Font Awesome 5 Free';
		display:block;
		text-align:center;
		padding:8px 0 10px;
		color:#fff;
		background-color:#727071;
		border-radius:25px;
		border: solid 2px #727071;
	}
	.back:hover {
		opacity: 0.7;
		text-decoration: none;
		color: #fff;
		background-color: #727071;
	}
	.pc {
		display: none !important;
	}
    .sp {
		display: block !important;
	}
	.sticky, .sticky2, .sticky3, .sticky4 {
		display: none;
	}
	/*****************************************/
	/* このデザインでつくるボタン(日曜日)    */
	/*****************************************/
	.cal_sakusei_s {
		width: 400px;
		max-width: 80%;
		font-size:24px;
		font-weight:bold;
		font-family: 'Font Awesome 5 Free';
		display:block;
		text-align:center;
		padding:8px 0 10px;
		color:#fff;
		background-color:#f15a24;
		border-radius:25px;
	}
	.cal_sakusei_s:hover {
		opacity: 0.7;
		text-decoration: none;
		color: #fff;
	}
	/*****************************************/
	/* このデザインでつくるボタン(月曜日)    */
	/*****************************************/
	.cal_sakusei_m {
		width: 400px;
		max-width: 80%;
		font-size:24px;
		font-weight:bold;
		font-family: 'Font Awesome 5 Free';
		display:block;
		text-align:center;
		padding:8px 0 10px;
		color:#000;
		background-color:#fcee21;
		border-radius:25px;
	}
	.cal_sakusei_m:hover {
		opacity: 0.7;
		text-decoration: none;
		color: #000;
	}
	
	/* メンテナンスのお知らせ */
	.maintenance_title {
		font-size: 1.2rem;
	}
	.maintenance_text {
		font-size: 0.8rem;
	}

}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
	.kami_pkg {
		display: none;
	}
	
	/*
	.btn {
		display: none;
	}
	*/
	
	.midashi1, .midashi2, .midashi3, .midashi4 {
		font-size: 1.4rem;
	}
	.pc {
		display: none !important;
	}
    .sp {
		display: block !important;
	}
	#nav-drawer {
		display: none;
	}
	
	/* メンテナンスのお知らせ */
	.maintenance_title {
		font-size: 1.2rem;
	}
	.maintenance_text {
		font-size: 0.8rem;
	}

}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
	.kami_pkg {
		display: none;
	}
	/*
	.btn {
		display: none;
	}
	*/
	.midashi1, .midashi2, .midashi3, .midashi4 {
		font-size: 1.6rem;
	}
	#nav-drawer {
		display: none;
	}
	
	/* メンテナンスのお知らせ */
	.maintenance_title {
		font-size: 1.2rem;
	}
	.maintenance_text {
		font-size: 1.0rem;
	}

}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
	.midashi1, .midashi2, .midashi3, .midashi4 {
		font-size: 1.8rem;
	}
	#nav-drawer {
		display: none;
	}
	
	/* メンテナンスのお知らせ */
	.maintenance_title {
		font-size: 1.2rem;
	}
	.maintenance_text {
		font-size: 1.0rem;
	}

}
@media screen and (min-width: 1200px) {
	.midashi1, .midashi2, .midashi3, .midashi4 {
		font-size: 2.0rem;
	}
	.card-text {
		font-size: 20px;
	}
	#nav-drawer {
		display: none;
	}

}