@charset "utf8  ";


html {
    font-size: 16px;
    font-family: "Mplus 1p", sans-serif;
}
html, body {
    height: 100%;
    font-family: "Mplus 1p", sans-serif;
}
body *, ::before, ::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-weight: 300;
    color: black;
    background-color: #fafafa;
    font-family: "Mplus 1p", sans-serif;
}
p{
    margin-top: 0px;
    margin-bottom: 0px;
}
body a{
  text-decoration: none;
  font-family: "Mplus 1p", sans-serif;
}
img{
    object-fit: cover;
}
.mainbox{
    max-width: 1250px;
    margin: 0 auto;
}

main{
    margin: 0 auto;
    width: 96%;
}
.mainflex{
    display: flex;
}
.mainbox{
    width: 70%;
}
.asidebox{
    width: 28%;
}
@media(max-width:750px){
    .mainflex{
        display: block;
    }
    .mainbox{
        width: 100%;
    }
    .asidebox{
        width: 100%;
    }  
}
/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info{
	display: none;
}
#mypage{
	display: none;
}
#signup,#write{
	display: none;
}
/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
/* モーダル終了 */
/* ヘッダー */
.headerbox{
    width: 100%;
    background-color: white;
    box-shadow: 0px 6px 6px -5px rgba(0,0,0,0.5);
}
.hedaericon{
    padding: 10px 10px 10px 10px;
    text-align: left;
}
.hedaericon img{
    width: 60%;
    max-width: 260px;
    height: auto;
}
/* ヘッダー終了 */
/* フッター */
.footercontent{
    background-color: white;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
}
/* フッター終了 */
/* インスタボックストップ */
.instaboxtop{
    margin-top: 40px;
    margin-bottom: 20px;
}
.instaboximgde{
    display: flex;
    flex-wrap: wrap;
    width: 96%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}
.intaboximg{
    width: 25%;
}
@media(max-width:800px){
    .intaboximg{
        width: 33%;
    }
}
@media(max-width:560px){
    .intaboximg{
        width: 50%;
    }
}
.intaboximg img{
    width: 100%;
    height: auto;
}
/* インスタボックス終了 */
/* detailボックス */
.detailrec{
    margin-top: 60px;
    margin-bottom: 20px;
}
.detailrectitle{
    margin: 10px;
    text-align: center;
}
.detailrectitle p{
    font-size: 24px;
    font-weight: 600;
    border-bottom: 4px solid #F420A5;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}
.detailrecde{
    display: flex;
    flex-wrap: wrap;
}
.detailrecbox{
    width: 31%;
    min-width: 250px;
    margin: 10px auto;
}
.recimg{
    width: 100%;
    height: auto;
}
.recimg img{
    width: 100%;
    border-radius: 12px;
}
.rectitle{
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.rectitle p{
    font-size: 15px;
}
/* detailボックス終了 */
/* シェアボックス */
.sharebox{
    display: flex;
    width: 350px;
    margin-right: auto;
    margin-left: auto;
}
.shareboxde{
    display: flex;
    width: 174px;
    border: 1px solid black;
    margin-right: auto;
    margin-left: auto;
    padding: 4px;
}
.shareimg img{
    width: 40px;
    height: auto;
    margin-top: 3px;
    margin-right: 10px;
}
.sharetext {
    width: 130px;
}
.sharetext p{
    font-size: 15px;
}
/* シェアボックス終了 */
/* aside */
.asidetitle{
    width: 98%;
    margin-right: auto;
    margin-left: auto;
    background-color: gray;
    padding: 10px;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.asidetitle p{
    font-size: 18px;
    font-weight: 600;
    color: white;
}
.gakubulist{
    margin: 20px 10px;
}
.gakubulistp{
    margin-top: 10px;
}
.gakubulistp a{
    font-size: 16px;
    color: rgb(0, 119, 255);
    border-bottom: 1px solid rgb(0, 119, 255);
}
/* 管理者 */
.loginnow{
    width: 96%;
    margin-right: auto;
    margin-left: auto;
    background-color: rgb(0, 119, 255);
    margin-top: 30px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}
.loginnow p{
    color: white;
}
.loginname p{
    font-size: 20px;
    font-weight: 600;
}
/* aside終了 */

/* ログイン情報 */
.newuserbox{
    width: 100%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
}
.newusersubmit{
    width: 96%;
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}
.categorytitle{
    display: flex;
}
.categorytitle p{
    margin: 0px 6px;
}
.categoryname{
    font-size: 15px;
    color: #323232;
}
.category1 {
    font-size: 13px;
    background-color: rgb(0, 119, 255);
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
}
.category2 {
    font-size: 13px;
    background-color: #df3232;
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
}
/* input */
.cp_iptxt {
	width: 90%;
    max-width: 400px;
    margin-top: 8px;
    margin-bottom: 20px;
    margin-right: 6px;
    margin-left: 6px;
}
.cp_iptxt input[type='text'],.cp_iptxt input[type='password'],.cp_iptxt input[type='email'] {
	font: 16px/24px sans-serif;
	width: 100%;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: black;
	border: 1px solid #1b2538;
	border-radius: 4px;
}
.ef input[type='text']:focus,.ef input[type='password']:focus ,.ef input[type='email']:focus {
	border: 1px solid #da3c41;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}
/* input終了 */
/* textarea */
.cp_iptxt2 {
	width: 100%;
    max-width: 600px;
    margin-top: 8px;
    margin-bottom: 20px;
    margin-right: 6px;
    margin-left: 6px;
}
.cp_iptxt2 textarea {
	font: 16px/24px sans-serif;
	width: 100%;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: black;
	border: 1px solid #1b2538;
	border-radius: 4px;
}
.ef textarea:focus {
	border: 1px solid #da3c41;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}
/* textarea終了 */
.submitbutton{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}
.submitbutton input{
    background-color: rgb(0, 119, 255);
    color: white;
    border: 2px solid rgb(0, 119, 255);
    border-radius: 6px;
    font-size: 16px;
    padding: 8px 12px;
}
.submitbutton input:hover{
    background-color: white;
    color: rgb(0, 119, 255);
    border: 2px solid rgb(0, 119, 255);
    border-radius: 6px;
    font-size: 16px;
    padding: 8px 12px;
}
/* チェックボックス */

/* チェックボックス終了 */
.riyoukiyaku{
    margin-right: 6px;
    margin-left: 6px;
}
.listriyou{
    margin-top: 10px;
}
.listriyou a{
    color: rgb(0, 119, 255);
    font-size: 15px;
}
.newusertitle{
    text-align: center;
    font-size: 20px;
}
.newusertitle h2{
    margin-top: 20px;
    margin-bottom: 0px;
}
.submittext{
    font-size: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid gray;
}
.kakunintext{
    margin-right: 6px;
    margin-left: 6px;
    color: rgb(0, 119, 255);
}
.textbox2{
    font-size:16px;
}