@charset "utf-8";

html {height:100vh;
 overflow-y:scroll;}
body {
	height:100vh;
	margin: 0;
	padding: 0;
      background-color: #fffeee;
  background-image:
    radial-gradient(#fff3d3 13%, transparent 1%),
    radial-gradient(#fff3d3 13%, transparent 1%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;

background-attachment: fixed;
	color:#72472E;
	font-family:tbchibirgothicplusk-pro, sans-serif;
	font-size:14px;
	line-height:1.8em;
	-webkit-text-size-adjust: 100%;
   -moz-box-sizing: border-box;
    box-sizing: border-box;}

@media screen and (max-width: 500px) { 
	body {
	font-size: 12px;
	line-height: 1.6em;
}}


header{position:relative;}
nav {
  position:relative;
  height: 20px;
  overflow: hidden;
}

label {
  width: 30px;
  height: 30px;
  //border: 1px solid black;
  position: fixed;
  right: 10px;
  top: 20px;
  z-index: 1000;
}

label.open::before{font-family: "Font Awesome 5 Free";
	font-size:40px;
	font-weight: 900;content:  "\f3cd";
transition: 3s;}

#check:checked ~ label.open::before {
	font-family: "Font Awesome 5 Free";
	font-size:40px;
	font-weight: 900;
	color:#72472E;
 content:  "\f35a";
}

#check {
  display: none;
}

div.phone{width:350px;position: fixed;}

div.phone {
  width: 250px;
  height: auto;
  background-color:#FFE49F;
  margin: 0;
  padding: 20px;
  text-align: center;
  list-style: none;
  position: fixed;
  top: 0;
  right: -100%;
  transition: 1s;
  z-index: 10;
border-radius: 40px;
}
.phone-in{width:auto;
margin: auto auto 20px;
padding: 10px;
background-color: #FFFEEE;
border-radius: 20px;}

table.navi
{
width: 100%;
font-size: 1em;
  font-family: tbudrgothic-std, sans-serif;
font-weight: 900;
text-align: center;
line-height: 1.2em;
border-collapse: separate;
border-spacing: 8px 10px;}

table.navi tr td{
	width:25% ; 
	height: 50px; border-radius: 20px; padding: 5px;}

table.navi tr:nth-child(odd) td:nth-child(odd)
{background-color: #99D5F2;}
table.navi tr:nth-child(odd) td:nth-child(even)
{background-color:#FFE49F;}

table.navi tr:nth-child(even) td:nth-child(odd)
{background-color: #A8EABF;}
table.navi tr:nth-child(even) td:nth-child(even)
{background-color:#FFE49F;}

table.navi tr:nth-child(4) td:nth-child(3)
{background-color:#99D5F2;}

.mada{background-color:#FFFEEE!important; color:#E9E9E9!important; border:dashed 4px #FFE49F;}

.home{
width: 50px;
height: 50px;
margin: auto auto 20px;
border-radius:50%;
background-color: #FFFEEE;
vertical-align: middle;
display: table-cell;
}

ul.navi li {
  margin: 10px ;
  padding: 10px 0px;
  border-radius: 30px;
font-size: 1.2em;
  font-family: tbudrgothic-std, sans-serif;
font-weight: 900;
text-align: center;
list-style: none;
}

ul{margin: -5px auto; padding:0;}

@media screen and (max-width: 414px){
div.phone {
width: auto;
padding: 15px;
	}
	div.phone-in{margin: auto auto 10px;}
ul.navi li {
  margin: 10px 5px;
  padding: 10px 0px;
  border-radius: 30px;
}
	ul.navi li{font-size:1.2em;}
.home{font-size:1em;}
}

#check:checked ~ ul.navi {
  right: 0;
}
#check:checked ~ div.phone {
  right: 0;
}
/**/
header a{border-bottom: none;}



/*タイトル*/
div.title{
width:100%;
max-width: 500px;
margin: 0px auto;
padding: 80px 0 0;
text-align: center;
line-height: 1em;}

@media screen and (max-width: 500px) {
	div.title{
	padding: 60px 0 0;}
}

/**/
.thread{	/* main */
margin:30px auto 0px;
padding: 0;
width:100%;
max-width: 700px;
border-radius: 10px;
}
div.th {padding:5px;
background-color: #FFE49F;
text-align: center;
border-radius: 20px;}


div.th div:first-child{
	padding: 0px;}

.date_name{margin: -20px auto 10px;}

.date_last{
display:none;
}
.date_last:nth-last-child(1){
display: block;
text-align: center;
}



.th_icon{width: 50px;
height: 50px;
margin: auto;
border-radius:50%;
background-color: #FFFEEE;
vertical-align: middle;
display: table-cell;}

.th_content{margin: -40px auto 0px;}

@media screen and (max-width: 500px) {
	.date_name{
	margin: -10px auto 10px;
		line-height: 1.3em;}
}

@media screen and (max-width: 380px) {
	.th a{
	font-size:1em;}
   .th_content{margin-top:-30px;width:85%; margin-left:11%!important;}
.th_icon{width: 35px;
height: 35px;
}}

@media screen and (max-width: 325px) {
   .th_content{margin-top:-30px;width:80%; margin-left:15%!important;}
}


#footer{
width:100%; margin: 30px auto;
text-align: center;
}

/*form*/
.story{text-align: center;}

#detail{margin: 40px auto 0px;
text-align:left;
text-align:justify;
  -webkit-font-smoothing: subpixel-antialiased;}
.event{
margin:0px auto;
text-align: center;}

@media screen and (max-width: 500px) {
	.event{font-size:80%;}
}

table.data{
	margin: 0px auto 0px;
	border-collapse:collapse;
	border-spacing:0px;}
table.data tr td{vertical-align: top;}
 td.data1{text-align: center; }
 td.data2{padding: 7px 5px 0 0;
      text-align:center;}

div.data{
	width:100%;
	margin:40px auto 0px;
	}
	
div.data img{width:20px;}

@media screen and (max-width: 500px) {
	table.data tr td{font-size:11px!important;}
}



div.frame{
margin:20px auto 0px;
padding: 15px 0;
width:100%;
max-width: 800px;
//background-color:#FFE49F;
border-radius: 30px;
}

@media screen and (max-width: 500px) { 
	div.frame{
		width:100%;
		max-width: 500px;}
	}

div.content1,.content2 {
margin:20px auto 20px;
height:auto;
width: 90%;
border-radius: 30px;
//border-style:solid;border-width: 2px;
}

@media screen and (max-width: 500px) { 
	div.content1,.content2,.content3 {
	margin:10px auto;
	width: 95%;
	}
	}

div.content1{
border: solid 6px #FFE49F;}
div.content2{margin-bottom:  -40px;background-color: #99D5F2;}
div.content3{margin:10px auto -40px; border-radius: 30px;}

div.text{
padding:70 70 70;
height: auto;
}
@media screen and (max-width: 500px) {
div.text{
padding:8% 5% 5%;
}}

/**/



TABLE,TD,P{
	line-height : 18pt;
	font-size : 14px;
margin:auto;
}


#story{width:500px;
       margin:40px auto;
	   font-weight:bold;}
	   #story img{margin-bottom:20px;}
.maru_r{width:70px;
height: 70px;
margin-top: 1.5em;
background-color:#56D080;
border-radius: 50%;
position: relative;
   animation-name: flow;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.6s;}
.maru_t{width:70px;
height: 70px;
margin: 0 0 0 auto;
background-color:#6FBFF8;
border-radius: 50%;
position: relative;
   animation-name: flow;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.6s;
}
.maru_t::before{
position: absolute;
  left: 25%;
  top: 33%;
font-family: "Font Awesome 5 Free";
	font-size:35px;
	font-weight: 900;
    content:  "\f072"; /* 空の要素作成 */
	color:#fff;
}

.maru_r::before{
position: absolute;
  left: 23%;
  top: 30%;
font-family: "Font Awesome 5 Free";
	font-size:35px;
	font-weight: 900;
    content:  "\f06c"; /* 空の要素作成 */
	color:#fff;
}




.balloon1 ,.balloon2{
background-color: #FFFEEE;
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  width: 80%;
  box-sizing: border-box;
  border-radius: 30px;
  font-family: tbudrgothic-std, sans-serif;
  font-weight: 700;
}
.balloon1{
  margin: -80px auto 1.5em 80px;
 border: solid 3px #56D080;}
.balloon2{
  margin: -80px 80px 0 auto;
border: solid 3px #6fBFF8;}

.balloon1:before {
  content: "";
  position: absolute;
  top: 25%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFFEEE;
  z-index: 2;
}

.balloon1:after {
  content: "";
  position: absolute;
  top: 25%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #56D080;
  z-index: 1;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 25%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFFEEE;
  z-index: 2;
}

.balloon2:after {
  content: "";
  position: absolute;
  top: 25%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #6fBFF8;
  z-index: 1;
}

.balloon1 div,.balloon2 div {
  margin: 0;
  padding: 20 0;
}

@media screen and (max-width: 500px) {
	
	.balloon1{margin: -70px auto 1.5em 60px;}
	.balloon2{margin: -65px 65px 0 auto;}
	.maru_r,.maru_t{width:45px; height: 45px;}
	.maru_r::before,.maru_t::before{font-size: 25px;}
	.maru_r::before{top:28%; left: 20%;}
	.maru_t::before{top:30%; left: 20%;}
}

.middle{margin:auto auto 30px;
letter-spacing: 1.5em;}
@keyframes flow {
    0% {
        transform: translate(0,3px);
    }

    100% {
        transform: translate(0,-3px)
    }
}

/*フォーム*/

div#form {
width: 80%;
max-width:600px;
margin: 100px auto 40px;
padding: 40px;
background-color: #FFE49F;
box-sizing:border-box;
border-radius: 30px;}

@media screen and (max-width: 500px) {div#form {width: 100%!important;}}

/*アイコン*/

.pf_top
{
margin:30px auto -10px;

}

.icon{
margin: 0px auto;
width: 50%;
float: left;
text-align: center;
}

.icon_color{
width: 130px;
height: 130px;
margin:0px auto;
border-radius: 20px;
vertical-align: middle;}

.icon_color img{
margin:15px auto;
}

.pf_name{width: 50%;
text-align: left;
float: left;}

.name{
width: auto;
margin:50px auto 30px -200px;
padding: 0px;
font-family: tbudrgothic-std, sans-serif;
text-align: center;}
//.name span{
font-size: 1.8em;
font-weight: 900;}

@media screen and (max-width: 650px){
	.icon{width:40%;}
	.icon_color{margin-left:38px;}
	.pf_name{width: 60%;}
.name{
	margin: 50px auto 30px;
	}
}

@media screen and (max-width: 414px){
.pf_top
{margin: 30px auto -20px;}
	.icon{width: 100%; float: none;}
	.icon_color{margin: 15px auto;}
.pf_name{width: 100%; float: none;}
.name{
width: 100%;
margin: 20px auto!important;
	}
}

.pf_top::after{
  clear: both;
  content: '';
  display: block;
}

/*メッセージ*/

div.inner{
//padding:0 100 80;
height: auto;
text-align: center;
}
@media screen and (max-width: 500px) {
div.inner{
//padding: 0 10% 10%;
}}

.balloon{
width: 90%;
margin: 10px auto 20px;
padding: 10px 0px;
background-color: #FFFEEE;
border-radius: 30px;
position: relative;}

.msg{
width:auto;
height: auto;
margin:0px 30px;
text-align:left;
text-align:justify;
}

@media screen and (max-width: 414px){
.msg{margin:0px;}
}


/**/
.u{border-bottom:dotted 4px;}
.b{font-weight:bold;}
.l{font-size:130%;
　　font-family: tbudrgothic-std, sans-serif!important;
font-weight: 900;}
span.s{font-size:0.8em;}
.font{font-family: amatic-sc, sans-serif;
font-weight: 700;
font-size: 3.5em;
font-style: normal;} 
.fa-r{color:#F27B6C;}
.fa-b{color:#43A3FF;}
.fa-w{color:#fffeee;}
.fa-g{color:#56D080;}

.sh{background: linear-gradient(transparent 40%, #FFE49F 40%);}
.sh2{background: linear-gradient(transparent 40%, #A8EABF 40%);}
.sh3{background: linear-gradient(transparent 40%, #afeeff 40%);}

@media screen and (min-width: 501px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 500px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}
	
.clear-element {
  clear: both;
}
	
/*リンク*/
a{/*リンクされた文字*/
    color:#72472E;
    font-style:normal;
    text-decoration:none;
	border-bottom:2px solid;
}

#member a{border-bottom:none;}
#member a:hover{color: #72472E;}

a:hover {/*マウスをのせたとき*/
    color:rgba(255,255,255,0.00);
    font-style:normal;
    text-decoration:none;
}
a:active {/*クリック中*/
    text-decoration:none;
}

table tr td a{border-bottom:none;}
.title a{border-bottom:dotted;}


/*投稿フォーム*/
div.form1{margin: 5px auto 5;}
INPUT,select{
	font-family :;
}

.sub{width:90%;}

.tx{	/* */
	width: 100%;
	max-width: 600px;
	height: 20em;
	}
.tx,.pu{
	border : 1px solid #fff; 
	border-radius: 5px;}
.pu{height:2em;}
@media screen and (max-width: 375px){	
	select{width: 100px;}}
.bo{	/* ボタン */
	font-size : 13px;
	background-color:#72472E;
	border:solid 1px #72472E;
	color : #fff;
}

.bd{	/* res枠 */
	margin-bottom : 15px;
	width:550px;
	text-align:justify;
}
span.main{
 line-height: 18pt;
 }