@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
	color:#333;
	font-size:16px;
	line-height:1.7em;
	letter-spacing:0.06em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:300;
	box-sizing:border-box;
}
img{
	max-width:100%;
	border:none;
}
ul, li{
	margin:0;
	padding:0;
}

#all{
	width:100%;
	margin:0 auto 80px;
	padding:0
}

.ttl{
	margin:30px auto;
	text-align:center;
}
h2.ttl_txt{
	display:inline-block;
	margin:30px auto;
	padding:1em;
	font-size:22px;
	line-height:1.7em;
	color:#333;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.1em;
	border-top:1px #333 solid;
	border-bottom:1px #333 solid;
}
.txt{
	width:90%;
	margin:0 auto 20px;
	text-align:left;
}
.mds{
	width:90%;
	margin:80px auto 20px;
	padding:0.5em 0;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	border-top:1px #333 dashed;
	border-bottom:1px #333 dashed;
	box-sizing:border-box;
}
/* メッセージ例文リスト */
ul.lst_sample{
	list-style:none;
	display:flex;
	flex-flow:column wrap;
	width:90%;
	margin:0 auto;
}
ul.lst_sample::before{
	order:1;
}
ul.lst_sample li{
	flex-grow:1;
	width:100%;
	margin:0 0 20px;
	padding:1.5em;
	list-style:none;
	background:#f7f7f7;
	border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
	box-sizing:border-box;
	line-height:1.8em;
	text-align:left;
}
ul.lst_sample li p.message_ttl{
	margin:0 0 0.7em;
	text-align:center;
}
ul.lst_sample li p.from{
	margin:0.7em 0 0;
	text-align:center;
}
ul.lst_sample li p.count{
	margin:1.5em 0 0;
	text-align:right;
}
ul.lst_sample li p.count::before{
	content:"（";
}
ul.lst_sample li p.count::after{
	content:"文字）";
}
/* メッセージ画像リスト */
ul.message_img{
	list-style:none;
	display:flex;
	flex-flow:column wrap;
	width:90%;
	margin:0 auto;
}
ul.message_img::before{
	order:1;
}
ul.message_img li{
	flex-grow:1;
	width:100%;
	margin:0 0 20px;
	padding:0;
	list-style:none;
	box-sizing:border-box;
	font-size:16px;
	line-height:1.8em;
	text-align:center;
}
/* 定型文メッセージ画像リスト */
ul.message_img_fixed{
	list-style:none;
	display:flex;
	flex-flow:column wrap;
	width:90%;
	margin:0 auto;
}
ul.message_img_fixed::before{
	order:1;
}
ul.message_img_fixed li{
	flex-grow:1;
	width:100%;
	margin:0 0 20px;
	padding:0;
	list-style:none;
	box-sizing:border-box;
	font-size:16px;
	line-height:1.8em;
	text-align:center;
}
/* 注意書き */
ul.att{
	width:90%;
	margin:30px auto;
}
ul.att li{
	margin:0.8em 0 0 1.5em;
	list-style:disc;
}
table.inji{
	width:100%;
	margin:10px 0 0;
	padding:0;
	border-collapse:collapse;
}
table.inji th, table.inji tr, table.inji td{
	padding:0.6em;
	border:1px #ccc solid;
}
table.inji th{
	background:#eee;
	text-align:center;
	font-weight:bold;
}
/* 戻るボタン */
.back{
	margin:100px auto 0;
	text-align:right;
}
.backbtn{
	position:relative;
	width:90%;
	height:100%;
	margin:0 auto;
}
.backbtn a{
	position:absolute;
	top:0;
    left:0;
    width:100%;
    height:100%;
}
.back .back_txt{
	padding:0.5em 2.5em 0.5em 0.5em;
	border-top:#333 1px dashed;
	border-bottom:#333 1px dashed;
	font-size:16px;
}
.back .back_txt:before{
	position:absolute;
	content:'';
	width:7px;
	height:7px;
	border:none;
	border-top:solid 1px #333;
	border-right:solid 1px #333;
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	top:50%;
	right:15px;
	margin-top:-4px;
	margin-left:auto;
}
.backbtn a:hover{
	background:none;
}


/******************************************
PC表示
******************************************/
@media screen and (min-width:768px){
#all{
	width:1000px;
}
.ttl_img img{
	width:100%;
	height:250px;
	object-fit:cover;
}
h2.ttl_txt{
	margin:50px auto;
	font-size:25px;
	font-weight:normal;
}
.txt{
	width:70%;
	margin:0 auto 30px;
}
.mds{
	width:100%;
	margin:80px auto 30px;
	font-size:19px;
	font-weight:normal;
}
/* メッセージ例文リスト */
ul.lst_sample{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-content:flex-start;
	width:100%;
}
ul.lst_sample::before, ul.lst_sample::after{
	content:"";
	display:block;
	width:calc( (100% - 60px) / 3 );
}
ul.lst_sample li{
	max-width:calc( (100% - 60px) / 3 );
	margin:0 0 30px;
	padding:2em;
	font-size:15px;
}
/* メッセージ画像リスト */
ul.message_img{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-content:flex-start;
	width:100%;
}
ul.message_img::before, ul.message_img::after{
	content:"";
	display:block;
	width:calc( (100% - 60px) / 3 );
}
ul.message_img li{
	max-width:calc( (100% - 60px) / 3 );
	margin:0 0 20px;
	padding:0;
}
/* 定型文メッセージ画像リスト */
ul.message_img_fixed{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-content:flex-start;
	width:100%;
}
ul.message_img_fixed::before, ul.message_img_fixed::after{
	content:"";
	display:block;
	width:calc( (100% - 60px) / 3 );
}
ul.message_img_fixed li{
	max-width:calc( (100% - 60px) / 3 );
	margin:0 0 20px;
	padding:0;
}
/* 注意書き */
ul.att{
	width:70%;
	margin:30px auto 80px;
}
table.inji td{
	padding-left:20px;
}

/* 戻るボタン */
.backbtn{
	display:inline-block;
	width:auto;
}
.back .back_txt{
	padding:0.5em 2.5em 0.5em 1.5em;
	border:#333 1px solid;
	border-radius:25px;
	font-size:15px;
}
.backbtn a:hover{
	background:#ddd;
	border-radius:1em;
	filter:alpha(opacity=10); /* IE 6,7*/
	-ms-filter: "alpha(opacity=10)"; /* IE 8,9 */
	-moz-opacity:0.1; /* FF , Netscape */
	-khtml-opacity: 0.1; /* Safari 1.x */
	opacity:0.1;
	zoom:1; /*IE*/
}
.Center{
	text-align:center;
}
}




/******************************************
PC・SPの表示・非表示
******************************************/
/*------------------------------------- SPで非表示・PCで表示 */
.pc{display:none;}
@media screen and (min-width:768px){
.pc{display:block;}
}
/*------------------------------------- SPで表示・PCで非表示 */
.sp{display:block;}
@media screen and (min-width:768px){
.sp{display:none;}
}