@charset "utf-8";

/* 共通　*/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #000;
  	border-radius: 0px;
  	background-color: white;
}

.clear{
    clear:both;
  }

body {
    text-align: center;
    font-family:Arial, sans-serif;
	//font-weight: bold;/* ←追加　*/
    max-width: 1024px;
    font-family: "游ゴシック","游ゴシック体", YuGothic,sans-serif;;
	max-width: 700px;
    margin: 0 auto;/* ←変更　*/
    font-size: 80%;
    font-size: 100%;
    background-color: #F1844B;
    text-align: justify;
  }

  p{
    margin: 20px 0;
  }

a{
    color: #000000;
    text-decoration: none;
  }

.nav ul {/* ←追加　*/
    list-style-type: none;
	padding-left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
  	list-style: none;
}

.nav li{
	list-style: none;
}

.main{/* ←変更　*/
	clear: both;
	margin: 20px 20px 50px 20px;
    padding: 30px 15px 100px;
    background-color: #FFFFFF;
    border-radius: 15px;
}

.main .minna_post ul{
    clear:both;
    list-style-type: none;
	padding-left: 0;
    display: -webkit-flex;
    display: flex;
	flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
  	list-style: none;
	max-width: 100%;
  }

.main .minna_post ul li{
    position:relative;
    list-style: none;
	width: 40%;
    padding: 10px;
  }

.main .minna_post main ul li img{
    display:inline;
  }

.category{
    position:absolute;
    top:10px;
    left:10px;
	  
  }

.thum img{
    width: 100%;
    hight: 100%;
    object-fit: cover;
	  
  }

.post_title{
    color: #000000;
    text-align: left;
    line-height: 1.2em;
    margin: 5px;
  }

.copy{
    margin-top:100px;
    font-size:50%;
	text-align:center;
}

footer{
	margin: 0 0px 40px 0px;
	padding: 15px 0 15px 0;
    background-color: #F1844B;
	position: -webkit-sticky;
	position: sticky;
    bottom: -1px;
    z-index: 10000;
    width: 100%;
}

.fnav ul{
    list-style-type: none;
	padding-left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
  	list-style: none;
}

.inline {
	text-align: center;
}
.inline li {
	display: inline;
}

.fnav ul li{
	
}

.red{
		color: red;
	}

.star {
	font-size:200%;
	color: #F9344C;
	padding:20px;		
}

input select {
 -webkit-appearance: none;
  appearance: none;
  //border: 1px solid #000;
  border-radius: 0px;
}

/* index */
.index header {/* ←変更　*/
	margin: 30px 20px;/* ←変更　*/
	/*//position: relative;
    //top:20px;*/
    background-color:#ffffff;
    border-radius: 15px;
    padding: 10px;
    /*padding-bottom: 6px;*//* ←変更　*/
}

#calendar{
	/*clear:both;
    float: left;
    width: 340px;*/
    margin: 0 20px 20px;/* ←追加　*/
    padding: 15px;
	height: 671px;
    background-color: #FFFFFF;
    border-radius: 15px;/* ←変更　*/
  }

#calendar.fc-view-harness{
	width: 100%;
}

.support {
	margin-top: 30px;
}

.support h3{
	margin: 20px 0 20px 0;
}


.sousaku a{
	background-color: #EF9091;
	padding: 0.2em 0.8em;
	color: #ffffff;
	font-size: 70%;
}

.taiken a{
	background-color: #C1DA80;
	padding: 0.2em 0.7em;
	color: #ffffff;
	font-size: 70%;
}

.yuugaku a{
	background-color: #5FC0C6;
	padding: 0.2em 0.7em;
	color: #ffffff;
	font-size: 70%;
}

.taikan a{
	background-color: #F8C284;
	padding: 0.2em 0.7em;
	color: #ffffff;
	font-size: 70%;
}

.kisetsu a{
	background-color: #BA8CBD;
	padding: 0.2em 0.7em;
	color: #ffffff;
	font-size: 70%;
}

.fc .fc-toolbar-title {
	font-size: 100%;
}


/* contents */
.contents header{
	margin: 20px 20px 15px 20px;
	padding: 15px 0 15px 0;
    background-color: #F1844B;
	position: -webkit-sticky;
	position: sticky;
}

img.recipe_img{
	width: 100%
}

.contents main {
	clear: both;
	background-color: #ffffff;
	//margin: 20px 20px 0 20px;
	//padding: 30px;
	text-align: left;
}

.contents h1{
	font-size:180%;
  	margin:10px;
  	margin-top:30px;
}

.contents a{
	color: #000000;
    text-decoration: none;
}

.contents table{
  	width:100%;
  }

.contents table tr {
  	height:4em;
  }

.contents table td {
	background: #eee;
	padding:20px;
	}

.contents table tr:nth-child(even) td {
	background: #fff;
	}

.flow{
	display:block;
	width: 100%;
	//margin: 10px;
	//padding: 5px;
}

.number{
	display:block;
	float: left;
	width: 4%;
	height: 1em;
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF;
	background-color: #F1844B;
	margin: 1%;
	font-size: 150%;
	padding: 0.6em;
}

.text{
	display:block;
	float: left;
	width: 38%;
	text-align: left;
	line-height: 1.3em;
	font-size: 120%;
	margin: 1%;
	word-wrap:break-all;
}

.image{
	display:block;
	float: left;
    width:  42%;
	margin-right: 0;
    object-fit: contain;
    margin: 1%;
}

.image img{
	width: 100%;
}

.btn,
a.btn,
button.btn {
	clear: both;
	font-size: 1.0rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 1rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	/*text-align: center;*/
	vertical-align: middle;
	text-decoration: none;
	/*letter-spacing: 0.1em;*/
	color: #212529;
	border-radius: 0.5rem;
	margin:20px;
}

.btn--orange,
.btn--orange a{
	color: #ffffff;
	background-color: #eb6100;
}

.btn--orange:hover,
.btn--orange a:hover {
	color: #ffffff;
	background: #f56500;
}

.right{
	text-align: right;
}

form.evaluation{
    text-align: left;
	margin-left: 20px;
}

form.comment{
    text-align: left;
    margin-left: 20px;
	margin-top: 20px;
}

input[type="submit"]{
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 8px;
  padding: 0.5em 2em;
  line-height: 1.5;
  color: #fff;
  font-weight: bold;
  border: 1px solid #f56500;
  background: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.5) 4px, rgba(255, 255, 255, 0.5) 4px), linear-gradient(#f56500, #f56500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  margin:5px;
}

input[type="text"]{
	box-sizing: border-box;
	display: inline-block;
	border-radius: 8px;
	padding: 0.5em 2em;
	line-height: 1.5;
	border: 1px solid #ccc;
}
select {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 8px;
	padding: 0.5em 2em;
	line-height: 1.5;
	//border: 1px solid #333;
}

/* week */
.week header {/* ←変更　*/
	margin: 30px 20px;/* ←変更　*/
	/*//position: relative;
    //top:20px;*/
    background-color:#ffffff;
    border-radius: 15px;
    padding: 10px;
    /*padding-bottom: 6px;*//* ←変更　*/
}

.week table{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	font-size: 150%;
}

.week table tr{
	border-bottom: solid 1px #eee;
	cursor: pointer;
}

.week table tr:hover{
  	background-color: #d4f0fd;
}

.week table th,.week table td{/* 変更 */
	padding: 15px 1.5%;
}


.week .date01{
  color:red;
}

.week .date07{
  color: blue;
}
.week .syuku{
  color: red;
}

.table_day{
  text-align: right;
}

.table_week{
	text-align: left;
}

.hr{
    border-bottom: 1px solid #eee;
  }

/* 共通 *//* add *//* add_self *//* edit_form *//* prof *//* post *//* day *//* contact */
.add .main,.add_self .main , .edit_form .main,
.prof .main, .post .main,
.day .main, .contact .main{
	//margin: 0 20px 50px 20px;
    //padding: 30px 15px 100px;
	text-align: center;
	background-color: #F1844B;
}

/* 共通 *//* index *//* contents *//* week *//* week *//* blog *//* list */
.index .main h2, .contents .main h2, 
.week .main h2, .blog .main h2, 
.list .main h2{
		color: #000000;
		font-size: 130%;
		margin: 40px 20px 20px 20px;
	}

/* 共通 *//* add *//* add_self *//* edit_form *//* post */
.add form, .add_self form, .edit_form form,
 .post form{
	width: 100%;
	font-size: 120%;

}

.add .input, .add_self .input, .edit_form .input,
.post .input{
		border:0;
		margin:0 0 20px;
		padding:20px;
		font-size:1.3em;
		color:#aaa;
		//border:solid 1px #ccc;
		width:100%;
	}

.add .main h2,.add_self .main h2, 
.contact .main h2{
	clear: both;
    font-size: 120%;
    color: #ffffff;
	margin: 30px 20px 20px 20px;
}
.add a,.post a{
    color: #000000;
    text-decoration: none;
  }


/* blog */
.blog_button {
	margin: 20px 30% 20px 30%;
}

.blog_button input{
	width: 100%;
	border: none;
}

.blog .main{
	margin: 20px 20px 50px 20px;
    padding: 30px 15px 100px;
	background-color: #FFFFFF;
}


/* prof */
.prof .button{
	margin: 20px 30% 20px 30%;
}

.prof .button input{
	width: 100%;
	border: none;
}

.reset{
	margin: 75px auto;
}

.reset p{
	margin: 50px 20px 20px 20px;
	font-size: 120%;
}

.reset input{
	font-size: 120%;
	border: none;
}

.reset_button{
	margin: 20px auto;
}

.logout{
	margin: 50px auto;
}

/* post */
.post_form{
	margin: 20px 0 50px 0;
}

.post h2{
	margin: 30px 20px 20px 20px;
	color: #FFFFFF;
	font-size: 150%;
	font-weight: bold;
}

.post h3{
	margin: 30px 20px 20px 20px;
	color: #FFFFFF;
	font-size: 150%;
	font-weight: bold;
}

.post_form label{
	font-weight: bold;
}

.post_form select.input{
	font-size: 1.5em;
}

.post_form .input{
	font-size: 1.3em;
	margin: 0 40px 0 40px;
}

.post_button{
	margin: 20px 30% 20px 30%;
}

.post_button input{
	width: 100%;
	border: none;
}


/* list */
.list table{
	table-layout: fixed;
	border-collapse: separate;
	margin: 20px 0 20px 0;
	text-align: left;
	font-size: 100%;
}

.post_title{
	width: 50%;
	font-size: 100%;
	vertical-align: middle;
	padding-left: 20px;
}

.post_star{
	width: 30%;
	font-size: 100%;
	color: red;
}


.table_img img{
	width: 100%;
}

.list table td a{
   color:#000000;
   text-decoration: none;
} 


/* day */
.day h2{
	margin: 30px 20px 20px 20px;
	color: #FFFFFF;
	font-size: 225%;
	font-weight: bold;
}

.section{
	margin: 30px 20px 30px 20px;
	font-size: 150%;
}

.section .menu{
	margin: 20px 25% 20px 25%;
}

.section .menu img{
	width: 25%;
}

@media screen and (max-width: 780px) {
  	.section .menu img{ width: 50%; 
	}
}


@media screen and (max-width:  414px){
	.section .menu img{ width: 100%; 
	}
}

/* add_self */
.add_self .buttom{
	margin: 20px 30% 20px 30%;
}

.add_self .buttom input{
	width: 100%;
	border: none;
}


/* edit_form */
.edit_form .buttom{
	margin: 20px 30% 20px 30%;
}

.edit_form .buttom input{
	width: 100%;
	border: none;
}


/* contact */
.contact textarea{
	font-size: 130%;
}

.contact_button{
	margin: 20px 30% 20px 30%;
}

.contact_button input{
	width: 100%;
	border: none;
}

/* pp */
.pp table{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	font-size: 100%;
}

.pp table tr{
	border: solid 1px #eee;
}


.pp table th,.pp table td{
	border: solid 1px #eee;
	padding: 15px 1.5%;
}

/*.signup */
.signup{
		margin-top: 60px;
		text-align: left;
		//font-family:Arial, sans-serif;
		max-width: 700px;
	    padding: 30px 10px 100px;
		font-size: 100%;
	}

.signup .main{
	margin: 20px 20px 50px 20px;
	background-color: #FFFFFF;
}


.signup p input[type="text"],.signup p input[type="password"] {
	font-size: 100%;
	color: #aaa;
	//border: solid 1px #ccc;
	box-sizing: border-box;
    display: inline-block;
    border-radius: 8px;
	padding: 0.5em 1em;
	//margin: 0 20px;
	width: 100%;
	}
/*
.checkbox{
	margin: 30px auto;
	//color: #000000;
}
*/
.logo img{
	text-align: center;
	width: 100px;
}

.signup_button{
	clear: both;
	//margin: 20px 30% 20px 30%;
	border-color: none;

}

.signup_button input{
	width: 100%;
	//border: none;
}

.sign_up a{
	clear: both;
	margin: 0 auto;
}

.sign_up img{
	width: 100%;
}

/**/

.signup input[type="image"]{
	width: 250px;
	border: 0;
	marigin: 0;
	padding: 0;
}

input[type="date"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #000;
  	border-radius: 0px;
  	background-color: white;
  	width: 80%;
  	box-sizing: border-box;
}
.prof input[type="text"],.prof input[type="password"],.prof input[type="email"] {
	font-size: 100%;
	color: #aaa;
	//border: solid 1px #ccc;
	box-sizing: border-box;
    display: inline-block;
    border-radius: 8px;
	padding: 0.5em 1em;
	//margin: 0 20px;
	width: 100%;
	}


.cp{
	color: white;
	font-weight: 700;
	
}

.cp_txt a{
	color: blue;
	margin-bottom: 100px;
}

.white_block{
	margin: 20px;
	padding: 20px;
	background-color: white;
}
@media (max-width: 374px){
	body{
	    max-width: 700px;
	    margin: 0 auto;
	    //background-color: #f00;
	 }
	 .signup input[type="image"]{
	 	width: 50%;
	 }
	 .main{
	 	padding: 100px;
	 }
}

main{
	background-color: white;
	padding: 50px;

}

main img{
	width: 80%;
}

.contact a{
	color: blue;
}

.dl img{
	width: 60%;
}