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

/* --- common --- */
body {
 background: #eee;
 margin: 0 auto;
 font-family: "Noto Sans JP", sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 }
body a {
 transition: color 0.3s;
 text-decoration: none;
}
a:visited {color : #0cc;}
a:hover {
 font-weight: bold;
 color: #fff;
}

hr {
border: dotted 1px #666;
clear: both;
width: 99%;
}
#clear {clear:both }

/* --- Font --- */

.title {
 font-family: "Stick", sans-serif;
 font-weight: 400;
 font-style: normal;
}
/* --- Header --- */

header {
 text-align: center;
 border: solid 0px #000;
 margin-bottom: 40px;
 color: #fff;
 background: #333;
 padding: 40px 0px;
}

header h1 {
 font-family: "Stick", sans-serif;
 font-weight: 400;
 font-style: normal;
 font-size: 4em;
 margin: 0 auto;
}

/* --- Header menu --- */
header nav.menu ul {
 margin: 0 auto;
 width: 30%;
 border: solid 0px #fff;
 display: none;
 }
header nav.menu li {
 float: left;
 list-style-type: none;
 width: calc(50%/3);
 margin: 0 1px;
 background: #000;
 border-radius: 3px;
 font-size: 0.8em;
 }
header nav.menu li:hover {
 background: #0cc;
}
header nav.menu li:hover a {
 color: #fff;
}
 /* --- contents --- */
 
#contents {
 padding: 1%;
 border: solid 0px #cc0000;
 margin-bottom: 40px;
 }
button {
 font-size: 80%;
 }
button:hover {
 background: #0cc;
 border: solid 0px #fff;
 }
 
/* --- main container --- */

main {
 margin: 0 auto;
 padding: 1%;
 width: 75%;
 clear: both;
 border: solid 0px #00ccff;
 }
#container {
 width: 100%;
 margin: 0 auto;
 border: solid 0px #00ccff;
 margin-bottom: 40px;
 }
#container .item {
 width: calc(95%/3);
 float: left;
 border: solid 0px #ccc;
 border-radius: 0px 0px 20px 20px;
 margin: 8px;
 padding: 1px;
 background: #fff;
 }
#container .item h3 {
 clear: both;
 margin: 20px 0px 5px 0px;
 padding: 5px;
 border-bottom: 3px dotted #eee;
 font-size: 1em;
 }
#container .item img {
 width: 100%;
 border-bottom: solid 1px #eee;
 }
#container .item img:hover {
 opacity: 0.5;
 }
#container .item .article {
 margin: 20px;
 }
#container .item .article p {
 font-size: 70%;
 overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
}
#container dl {
 font-size: 80%;
 }
#container dl dt,dd {
 margin-left: 5px;
 padding: 3px 6px;
 float: left;
 background: #eee;
 }

/* --- profile --- */
#profile {
 margin: 0 auto;
 width: 65%;
 padding: 40px;
 clear: both;
 border-top: 2px dotted #fff;
 }
#profile img.photo {
 border: solid 3px #fff;
 float: left;
 width: 20%;
 border-radius: 200px;
 }
#profile .right {
 padding: 0 0 40px 0;
 border: solid 0px #ffcc00;
 width: 70%;
 font-size: 0.8em;
 float:right;
 }
#profile span {
 border-bottom: dotted 1px #000;
 }
 #profile span:hover {
 background: #0cc;
 }
table.profile {
 width: 100%;
 border-collapse: collapse;
 border-spacing: 1;
}
table.profile caption,th,td {
 font-weight: normal;
 text-align: left;
 border-bottom: solid 1px #eee;
}
table.profile tr:hover {
background: #fff;
}

.back {
width: 100%;
background: #333;
padding: 20px 0;
}
.back:hover {
background: #666;
}
/* --- Footer --- */
footer {
 margin-top: 40px;
 padding-bottom: 40px;
 border: solid 0px #000;
 text-align: center;
 color: #fff;
 background: #333;
 clear: both;
}
footer nav.menu ul {
margin: 0 auto;
 width: 40%;
}
footer nav.menu li {
 list-style-type: none;
 width: calc(90%/4);
 margin: 1px;
 border-radius: 3px;
 background: #000;
 font-size: 0.8em;
 float: left;
}
footer nav.menu li:hover { background: #0cc;}
footer nav.menu li:hover a { color: #fff;}

#coaching {
clear: both;
width: 70%;
margin: 0 auto;
padding: 1%;
}
#coaching img {
 border: solid 3px #fff;
 width: calc(90%/2);
 opacity: 0.5;
 margin-top: 1%;
 text-align: center;
 }
#coaching img:hover {opacity: 1;}

/* -------- SP -------- */
@media (max-width: 1200px) {
header {padding: 3%;}
header h1 {font-size: 1.5em;}
header p {font-size :0.8em;}
header nav.menu ul {width: 100%;}
#container .item {width: 100%;}
 
#profile {padding: 40px 0 40px 0;}
#profile img.photo { width: 95%; }
#profile .right { width: 100%; }
footer nav.menu ul {width: 80%;
padding: 0;
margin: 0 auto;}
footer nav.menu li {float: none;
width: 100%;}
#coaching img {width: 100%;}
}