/*===============================================
画面の横幅が750px以上（パソコン用）
===============================================*/
@media print, screen and (min-width:750px) {

*{	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
 }


body{	text-align:center;
	background:#ede4cd;}
div{	margin-right: auto;
	margin-left: auto;}

a{ text-decoration:none; }
.box{	width:760px;
	display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
	display: -webkit-flex;  /* Chrome 21-27 */
	display: -moz-box;      /* Firefox 2-21 */
	display: -ms-flexbox;   /* IE9 */
	display:flex;
	-webkit-flex-direction: row;
	justify-content:center;
	margin:0em auto;
	padding:0px;
 }
/*ここから折りたたみ用*/
.clickbox{
	margin: 0px;
	padding: 0px;
}
.clickbox label{
	cursor :pointer;
	border-bottom-style:dashed;
	border-width:1px;
}
.clickbox input {
	display: none; 
}
.clickbox div {
	height: 0;
	overflow-y: hidden;
	opacity: 0;
}
.clickbox input:checked + label + div {
    height: auto;
    opacity: 1;
}
/*ここまで折りたたみ用*/
/*ここからヘッダー用*/
#top{	width:760px;
	text-align:center;
	background:#fbfaf5;
	margin:0em auto;
	padding:15px 10px 0px;
}
.title2{
	font-size:180%; 
	font-family: serif;
	color:#090909;
 }
.title3{font-size:70%;
	color:#FFFEAD;}

/*コンテンツメニュー*/
#menu1{	width:760px;
	background:#fbfaf5;
	margin: 0em auto;
	padding:10px 5px 2px;
	color:#000000;
	font-size:90%;
 }
ul.menu1 li{
	margin:0em;
 }
ul.menu1 a{
	margin:0px 0px 2px;
	display:inline-block;
	padding:2px 6px;}
#menu2{	width:760px;
	background:#fbfaf5;
	border-bottom: 2px solid;
	border-color:rgba(255, 255, 255, 0.9);
	margin: 0em auto;
	padding:10px 5px 2px;
	color:#000000;
	font-size:90%;
 }
ul.menu2{
	display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
	display: -webkit-flex;  /* Chrome 21-27 */
	display: -moz-box;      /* Firefox 2-21 */
	display: -ms-flexbox;   /* IE9 */
	display:flex;
	justify-content:flex-end;
	list-style-type:none;
	margin: 0em auto;
	padding:0px 10px;
}
ul.menu2 li{
	margin:0em;
 }
ul.menu2 a{
	margin:0px 0px 2px;
	display:inline-block;
	padding:2px 6px;}
/*ここまでヘッダー用*/
/*ここからフッター用*/
#tori{
	width:760px;
	text-align:left;
	background:#fbfaf5;
	margin:0em auto;
	padding:5px 10px 10px;
	font-size:70%;
}
/*ここまでフッター用*/

#about{
	width:760px;
	text-align:left;
	background:#fbfaf5;
	margin:0em auto;
	padding:20px 10px;
	font-size:90%;
}
hr.about{
	width:500px;
	margin: 0em 0em 0.5em;
	text-align: left;
	height: 2px;
	background-color: #699997;
	border: 0;
	border-top: 2px dashed rgba(251, 250, 245, 1);
}
.title4{
	font-size:120%;
	margin:1em 0.5em 0;
}
h1{
	font-size:14pt;
	color:#58ACFA;
	margin: 1em 0 0;
}
h2{	font-size:10pt;
	margin:0em;}
h3{	font-size:12pt;
	color:#;
	margin: 5px 0 0;
}


/*ここからmemo*/
.memo{	width:95%;
	text-align:left;
	background:#ffffff;
	font-size:90%;
	padding:10px 10px;
	line-height:160%;
 }
.memo2{	width:95%;
	text-align:left;
	background:#fbfaf5;
	font-size:90%;
	padding:10px 10px;
	line-height:160%;
	border: 2px dashed #bab3c9;
 }
.memo-main{
	width:100%;
	padding:10px 0px 5px;
 }
/*ここまでmemo*/
.menu1-left{/*作品メニュー*/
	flex-basis: 380px;
	text-align:left;
	margin:0em;
	background:#fbfaf5;

	font-size:90%;
	padding:10px 10px 10px 20px;
 }
.menu1-right{/*作品メニュー*/
	flex-basis: 380px;
	text-align:left;
	margin:0em;
	background:#fbfaf5;

	font-size:90%;
	padding:10px 20px 10px 10px;
 }
.menu1-left a{
	margin:0.15em 0em;
	padding:1px 0px;
}
.menu1-right a{
	margin:0.15em 0em;
	padding:1px 0px;
}


a:link { color: #003366; }/*通常リンク*/
a:visited { color: #a9a9a9; }/*クリック済*/
a:active { color: #165e83; }/*クリックされた時*/
a:hover{ color:#165e83;
	border-bottom-style:dashed;
	border-width:1px;}/*マウスを乗せた時*/


/*ここから小説用*/

#main1{/*小説用メイン*/
	width:760px;
	background:#fbfaf5;
	margin:auto;
	padding:20px 20px;
	text-align:left;
	line-height:170%;
	font-size:90%;
 }
.main1{
	width:100%;
	display: block;
	height: 2px;
	background-color: #699997;
	border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
 }

hr.ss-log{
	width:100%;
	display: block;
	height: 2px;
	background-color: #699997;
	border: 0;
	border-top: 2px dashed rgba(251, 250, 245, 1);
 }
.m1{ margin:2em 0em 4em; }
p.title1{/*小説タイトル*/
	text-align:center;
	font-weight:550;
	margin:0.5em 0em;
 }
#menu3{
	width:100%;
	text-align:left;
	padding:0px 10px;
 }

.title5{/*タイトル*/
	font-size:13pt;
	margin:1em 0em 0em;
 }
.title6{/*小タイトル*/
	font-size:100%;
	margin:0.5em 0em 0em;
 }
.daydata{
	text-align:right;
	font-size:80%;
	margin:0em;
	padding:0px;
}
.new{
	font-size:80%;
	color:#ff3333;
	}

/*ここまで小説用*/


/*タブ切り替え全体のスタイル*/
.tabs,
.tabs2 {
  background-color: #fbfaf5;
  width: 760px;
  border-left: 10px solid #fbfaf5;
  border-right: 10px solid #fbfaf5;
}
/*****************************************************************/
/* 花宮bot　反応語句タブ */
/*タブのスタイル*/
.tab_item {
  width: calc(100%/4);
  height: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 3px solid #49967B;
  background-color: #dddcd6;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tabs input:checked + .tab_item {
  background-color: #49967B;
  color: #f7f7f7;
}
/*****************************************************************/
/* 桜井bot　反応語句タブ */
.tab_item2 {
  width: calc(100%/3);
  height: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 3px solid #ec815f;
  background-color: #dddcd6;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tabs2 input:checked + .tab_item2 {/*選択されているタブのスタイルを変える*/
  background-color: #ec815f;
  color: #f7f7f7;
}
.tab_item:hover,
.tab_item2:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"],
input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 20px 10px 0px 20px;
  font-size:90%;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#reply_01:checked ~ #reply_01_word,
#reply_02:checked ~ #reply_02_word,
#reply_03:checked ~ #reply_03_word,
#reply_04:checked ~ #reply_04_word,
#reply_05:checked ~ #reply_05_word,
#reply_06:checked ~ #reply_06_word,
#reply_07:checked ~ #reply_07_word,
#reply_08:checked ~ #reply_08_word {

/*  background:rgba(255, 255, 255, 0.7);*/
  background-color: #fbfaf5;
  text-align: left;
  padding-bottom: 20px;
  display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
  display: -webkit-flex;  /* Chrome 21-27 */
  display: -moz-box;      /* Firefox 2-21 */
  display: -ms-flexbox;   /* IE9 */
  display:flex;
  -webkit-flex-direction: row;
  justify-content:flex-start;
  list-style-type:none;
}
.res-word,
.res-word2,
.res-word3,
.res-word4{
/*
  border-radius: 10px; 
*/
  border:3px solid #d2d7cd;
  background-color: rgba(255, 255, 255, 0.5);
  display:inline-block;
  margin:0px 3px 5px;
  padding:5px 2px;
}
.res-word{
/*  text-align: center;*/
  width: 170px;
}
.res-word2{
  width: 346px;
}
.res-word3{
  width: 522px;
}
.res-word4{
  width: 698px;
}

 }

/*===============================================
画面の横幅が749pxまで（PC以外用）
===============================================*/
@media print, screen and (max-width: 749px) {

*{	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }

  body{	text-align:center;
	background:#ede4cd;
  }
div{	margin-right: auto;
	margin-left: auto;}

a{	text-decoration:none; }
*/
.box{	width:100%px;
	-webkit-flex-direction: row;
	justify-content:center;
	margin:0em auto;
	padding:0px;
 }

/*ここから折りたたみ用*/
.clickbox{
	margin: 0px;
	padding: 0px;
}
.clickbox label{
	cursor :pointer;
	border-bottom-style:dashed;
	border-width:1px;
}
.clickbox input {
	display: none; 
}
.clickbox div {
	height: 0;
	overflow-y: hidden;
	opacity: 0;
}
.clickbox input:checked + label + div {
    height: auto;
    opacity: 1;
}
/*ここまで折りたたみ用*/
/*ここからヘッダー用*/
#top{	width:100%x;
	text-align:center;
	background:#fbfaf5;
	margin:0em auto;
	padding:15px 10px 0px;
}
.title2{
	font-size:180%; 
	font-family: serif;
	color:#090909;
 }
.title3{font-size:70%;
	color:#FFFEAD;}

/*コンテンツメニュー*/
#menu1{	width:100%;
	background:#fbfaf5;
	margin: 0em auto;
	padding:10px 10px 2px;
	color:#000000;
	font-size:90%;
 }
ul.menu1 li{
	margin:0em;
 }
ul.menu1 a{
	margin:0px 0px 2px;
	display:inline-block;
	padding:2px 6px;}

#menu2{	width:100%;
	background:#fbfaf5;
	border-bottom: 2px solid;
	border-color:rgba(255, 255, 255, 0.9);
	margin: 0em auto;
	padding:10px 10px 2px;
	color:#000000;
	font-size:90%;
 }
ul.menu2{
	display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
	display: -webkit-flex;  /* Chrome 21-27 */
	display: -moz-box;      /* Firefox 2-21 */
	display: -ms-flexbox;   /* IE9 */
	display:flex;
	justify-content:flex-end;
	list-style-type:none;
	margin: 0em auto;
	padding:0px 10px;
}
ul.menu2 li{
	margin:0em;
 }
ul.menu2 a{
	margin:0px 0px 2px;
	display:inline-block;
	padding:2px 6px;}
/*ここまでヘッダー用*/
/*ここからフッター用*/
#tori{
	width:100%;
	text-align:left;
	background:#fbfaf5;
	margin:0em auto;
	padding:5px 10px 10px;
	font-size:70%;
}
/*ここまでフッター用*/


#about{
	width:100%;
	text-align:left;
	background:#fbfaf5;
	margin:0em auto;
	padding:20px 10px;
	font-size:90%;
	line-height:185%;
}
hr.about{
	width:70%;
	margin: 0em 0em 0.5em;
	text-align: left;
	height: 2px;
	background-color: #699997;
	border: 0;
	border-top: 2px dashed rgba(251, 250, 245, 1);
}
.title4{
	font-size:120%;
	margin:1em 0.5em 0;
}
h1{
	font-size:14pt;
	color:#58ACFA;
	margin: 1em 0 0;
}
h2{	font-size:10pt;
	margin:0em;}
h3{	font-size:12pt;
	color:#;
	margin: 5px 0 0;
}


/*ここからmemo*/
.memo{	width:98%;
	text-align:left;
	background:#ffffff;
	font-size:90%;
	padding:10px 10px;
 }
.memo2{	width:98%;
	text-align:left;
	background:#fbfaf5;
	font-size:90%;
	padding:10px 10px;
	line-height:180%;
	border: 2px dashed #bab3c9;
 }
.memo-main{
	width:100%;
	padding:10px 0px 5px;
 }
/*ここまでmemo*/
/*ここから作品メニュー*/
.menu1-left{/*作品メニュー*/
	flex-basis: 100%;
	text-align:left;
	margin:0em;
	background:#fbfaf5;

	font-size:90%;
	padding:10px 10px 10px 10px;
 }
.menu1-right{/*作品メニュー*/
	flex-basis: 100%;
	text-align:left;
	margin:0em;
	background:#fbfaf5;

	font-size:90%;
	padding:10px 10px 10px 10px;
 }
.menu1-left a{
	margin:0.15em 0em;
	padding:1px 0px;
}
.menu1-right a{
	margin:0.15em 0em;
	padding:1px 0px;
}
a:link { color: #003366; }/*通常リンク*/
a:visited { color: #a9a9a9; }/*クリック済*/
a:active { color: #165e83; }/*クリックされた時*/
a:hover{ color:#165e83;}/*マウスを乗せた時*/
/*ここまで作品メニュー*/

/*ここから小説用*/
#main1{/*小説用メイン*/
	width:100%;
	background:#fbfaf5;
	margin:auto;
	padding:20px 10px;
	text-align:left;
	line-height:170%;
	font-size:95%;
 }
.main1{
	width:100%;
	display: block;
	height: 2px;
	background-color: #699997;
	border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
 }
hr.ss-log{
	width:100%;
	display: block;
	height: 2px;
	background-color: #699997;
	border: 0;
	border-top: 2px dashed rgba(251, 250, 245, 1);
 }
.m1{ margin:2em 0em 4em; }
p.title1{/*小説タイトル*/
	text-align:center;
	font-weight:550;
	margin:0.5em 0em;
 }
#menu3{
	width:100%;
	text-align:left;
	padding:0px 10px;
 }
.title5{/*タイトル*/
	font-size:13pt;
	margin:1em 0em 0em;
 }
.title6{/*小タイトル*/
	font-size:100%;
	margin:0.5em 0em 0em;
 }
.daydata{
	text-align:right;
	font-size:80%;
	margin:0em;
	padding:0px;
}
.new{
	font-size:80%;
	color:#ff3333;
	}

/*ここまで小説用*/

/*****************************************************************/
/* 花宮bot　反応語句タブ */
.tabs { /*タブ切り替え全体のスタイル*/
  background-color: #fbfaf5;
  border-top: 3px solid #49967B;
  width: 100%;
}
.tab_item { /*タブのスタイル*/
  width: calc(100%/3);
  height: 40px;
  border-bottom: 3px solid #49967B;
  background-color: #dddcd6;
  line-height: 40px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tabs input:checked + .tab_item {/*選択されているタブのスタイルを変える*/
  background-color: #49967B;
  color: #f7f7f7;
}
/*****************************************************************/
/* 桜井bot　反応語句タブ */
.tabs2 { /*タブ切り替え全体のスタイル*/
  background-color: #fbfaf5;
  border-top: 3px solid #ec815f;
  width: 100%;
}
.tab_item2 { /*タブのスタイル*/
  width: calc(100%/3);
  height: 40px;
  border-bottom: 3px solid #ec815f;
  background-color: #dddcd6;
  line-height: 40px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tabs2 input:checked + .tab_item2 { /*選択されているタブのスタイルを変える*/
  background-color: #ec815f;
  color: #f7f7f7;
}

.tab_item:hover,
.tab_item2:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"],
input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 5% 0% 0% 3%;
  clear: both;
  font-size:100%;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#reply_01:checked ~ #reply_01_word,
#reply_02:checked ~ #reply_02_word,
#reply_03:checked ~ #reply_03_word,
#reply_04:checked ~ #reply_04_word,
#reply_05:checked ~ #reply_05_word,
#reply_06:checked ~ #reply_06_word,
#reply_07:checked ~ #reply_07_word,
#reply_08:checked ~ #reply_08_word {
  display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
  display: -webkit-flex;  /* Chrome 21-27 */
  display: -moz-box;      /* Firefox 2-21 */
  display: -ms-flexbox;   /* IE9 */
  display:flex;
  background:rgba(255, 255, 255, 0.7);
  padding-bottom: 20px;

  text-align: left;
  -webkit-flex-direction: row;
  list-style-type:none;
  justify-content: flex-start;
}

.res-word,
.res-word2,
.res-word3,
.res-word4{
/*
  border-radius: 10px;
  border: 1px solid #49967B;
  background-color: #49967B;
*/
  text-align: left;
  display:inline-block;
  max-width: 93%;
  min-width: 45%;
  margin:0px 5px 5px;
  padding:5px;

}

 }