@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

body{
margin:0;
padding:0;
font-family: 'Noto Sans JP', sans-serif;
font-size:15px;
color:#6b6b6b;
line-height:170%;
letter-spacing:0.1em;
}
a:hover{
opacity:0.7;
}
header{
overflow:hidden;
border-bottom:1px solid #cccccc;
}
header h1{
font-weight:500;
width:70%;
float:left;
}
header ul{
width:30%;
text-align:right;
float:right;
}
header ul a{
display:inline-block;
color:#6b6b6b;
text-decoration:none;
}
header ul a:hover{
text-decoration:underline;
}
main{
padding:20px 0 50px;
}
main h1{
font-weight:400;
margin-bottom:30px;
padding:0 0 10px;
border-bottom:4px solid #4aa5d6;
}
main p{
margin-bottom:30px;
}
footer{
margin-top: auto;
text-align:center;
padding:20px 0;
border-top:1px solid #cccccc;
}
.wrap{
}
input[type="text"],
input[type="password"]{
box-sizing:border-box;
padding:3px;
border:1px solid #cccccc;
}
button{
display:block;
margin:20px auto;
background:#4aa5d6;
color:#ffffff;
border:0;
border-radius:5px;
padding:10px 30px;
letter-spacing:0.1em;
}
button:hover{
cursor:pointer;
}
button.back{
background:#999;
}
button.alert{
background:#ff0000;
}
select{
padding:3px;
color: #000;
border:1px solid #cccccc;
}
input[type="checkbox"],
input[type="radio"]{
margin-right:4px;
}
label{
margin-right:10px;
}


ul,li{
margin:0;
padding:0;
list-style:none;
}
dl,dt,dd{
margin:0;
box-sizing:border-box;
}
#flashMessage{
text-align:center;
color:#ffffff;
font-weight:500;
margin-bottom:20px;
padding:20px 10px;
background:#ff0000;
}
#flashMessage.change{
background:#4aa5d6;
margin-bottom:40px;
padding:20px 0;
color:#fff;
text-align:center;
}
.red{
color:#ff0000;
font-style:normal;
font-weight:400;
}


/* login */
#login dl{
background:#f2f2f2;
margin:60px auto 40px;
display: flex;
flex-wrap: wrap;
}
#login dt{
width:40%;
}
#login dd{
width:60%;
}
#login dl > dt:nth-child(1),
#login dl > dd:nth-child(2){
margin-bottom:15px;
}
#login input{
box-sizing:border-box;
width:160px;
}

/* list*/
div#userlink{
margin:30px 0 50px;
}
div#userlink a {
display: block;
padding: 10px 0;
margin: 0 auto;
color: #ffffff;
background: #4aa5d6;
border-radius: 6px;
text-align: center;
text-decoration: none;
}


div.list{
margin-bottom:50px;
}
.list dl{
display: flex;
flex-wrap: wrap;
width: 100%;
margin:10px 0;
}
.list dt,
.list dd{
padding: 0 0 10px;
border-bottom:1px solid #cccccc;
}
.list dt{
width: 25%;
}
.list dt span{
border-left:5px solid #4aa5d6;
padding:0 15px;
font-weight:500;
}
.list.hoketsu dt span{
border-left:5px solid #cccccc;
}
.list dd{
width: 50%;
overflow:hidden;
}
.list dl dd:nth-child(3){
width:25%;
text-align:right;
}
.list dd p{
margin:0;
}
.list dd a{
display:block;
padding:5px 0;
margin: 0 0 0 auto;
color:#ffffff;
background:#4aa5d6;
border-radius:6px;
text-align:center;
text-decoration:none;
}

/* detail */
div#bread{
margin-bottom:40px;
}
div#bread a{
color:#4aa5d6;
}

.detail dl{
display: flex;
flex-wrap: wrap;
width: 100%;
margin:20px 0;
}
.detail dt,
.detail dd{
padding: 0 0 15px;
border-bottom:1px solid #cccccc;
}
.detail dt{
width: 25%;
}
.detail.user dt{
width:30%;
}
.detail dt span{
border-left:5px solid #4aa5d6;
padding:0 15px;
font-weight:500;
}
.detail.user dt span{
font-size:16px;
}
.detail dd{
width: 75%;
overflow:hidden;
}
.detail.user dd{
width:70%;
}
.detail dd #typeform{
margin:12px 0;
}
.detail dd p{
margin:10px 0 0;
}
.detail dd strong,
#privacy strong
{
display:block;
margin:6px 0 0;
color:#ff0000;
}
#privacy{
text-align:center;
}
#privacy p{
text-align:left;
}

#submit{
text-align:center;
margin:40px 0 30px;
}
#submit2{
}
/* delete */
p#deleteConfirm{
text-align:center;
font-weight:500;
font-size:16px;
color:#ff0000;
margin:50px 0 70px;
}
/* sortList */

ul#sortList{
}

ul#sortList li{
border:1px solid #cccccc;
padding:10px 10px;
margin-bottom:3px;
background:#ffffff;
}
ul#sortList li:hover{
cursor:grab;
}
ul#sortList li span{

}
ul#sortList li span i{
font-style:normal;
}




/*
   PC -----------------------------------
 */
@media screen and (min-width: 429px){

.sp{
display:none;
}
.wrap{
width:1000px;
margin:0 auto;
}
header{
padding:10px 0;
}
header h1{
font-size:25px;
}
main .wrap{
}
header ul a{
margin-top:20px;
font-size:14px;
}
main h1{
font-size:22px;
}

#login dl{
width:480px;
padding:30px;
}
#login button{
width:200px;
}

div#userlink a{
width:300px;
}


.list dt .red,
.detail dt .red {
font-size:13px;
}
.list dd p{
width:50%;
}
.list dd a{
width:120px;
}

.list dt,
.list dd p {
font-size:18px;
margin-top:5px;
}
.detail dt{
font-size:18px;
}
input.middle{
width:300px;
}
input.long{
width:500px;
}
#privacy p{
width:900px;
margin:50px auto 30px;
font-size:14px;
}

#submit button,
#submit2 button
{
padding:20px 0;
width:300px;
}


} /* END:PC */

/*
   MOBILE -----------------------------------
 */
@media screen and (max-width:428px){

.sp{
}

.wrap{
margin:0 10px;
}
header h1{
font-size:15px;
}
main .wrap{
}
header ul a{
margin-top:20px;
font-size:12px;
}
main h1{
font-size:16px;
}

#login dl{
padding:30px;
}
#login button{
width:200px;
}

div#userlink a{
width:80%;
}

.list dt{
width: 45%;
}
.list dd{
width: 25%;
}
.list dl dd:nth-child(3){
width:30%;
}

.list dt span{
padding:0 10px;
}
.list dd a{
width:80px;
padding:2px 0;
}
.detail dt,
.detail dd,
.detail.user dt,
.detail.user dd
{
width:100%;
}
.detail dt{
border-bottom:none;
}
input.middle{
width:80%;
}
input.long{
width:90%;
}
#privacy p{
margin:20px 10px 30px;
font-size:12px;
}
#submit button,
#submit2 button
{
padding:20px 0;
width:80%;
}



} /* END:MOBILE */