@charset "utf-8";
  header {
position: relative;
width:100%;
height:360px;
background:url(//www.cmp-members.com/images/top_head_bg.jpg) 50% 0 no-repeat;
background-size:cover;
color:#ffffff;
}
header .headInr {
padding:90px 0 0;
}
header .headInr h1 {
display:none;
}
header .headInr p {
margin:0 0 20px;
line-height:1.2;
text-align:center;
font-size:3.4rem;
}
header .headInr p small {
font-size: 0.6em;
}
header .headInr > div {
width:80%;
margin:0 auto;
text-align:center;
}
header .headInr > div dl {
float:left;
width:50%;
padding:1% 1% 2%;
box-sizing:border-box;
}
header .headInr > div dl:first-child {
border-right:1px solid #ffffff;
}
header .headInr > div dl dt {
margin:0 0 10px;
font-size:3.6rem;
}
header .headInr > div dl dd a {
display:inline-block;
padding:5px 10%;
background-color:#ffffff;
border-radius:16px;
color:#404040;
font-size:1.6rem;
} .topSlide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 360px;
}
.topSlide li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 360px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
animation-iteration-count:infinite;
animation-duration:24s;
} .topSlide li:nth-of-type(1){
animation-name:slider;
animation-delay:-1s;
}
.topSlide li:nth-of-type(2){
animation-name:slider;
animation-delay:3s;
opacity:0;
}
.topSlide li:nth-of-type(3){
animation-name:slider;
animation-delay:7s;
opacity:0;
}
.topSlide li:nth-of-type(4){
animation-name:slider;
animation-delay:11s;
opacity:0;
}
.topSlide li:nth-of-type(5){
animation-name:slider;
animation-delay:15s;
opacity:0;
}
.topSlide li:nth-of-type(6){
animation-name:slider;
animation-delay:19s;
opacity:0;
}
@keyframes slider{
0%{
opacity:0;
}
4.16%{
opacity:1;
}
16.66%{
opacity:1;
}
20.83%{
opacity:0;
}
100%{
opacity:0;
}
}
#container {
margin:0;
padding:40px 0 30px;
}
#content {
margin:0;
padding:0;
}
main {
width:100%;
max-width:none;
}
#courseInfo {
max-width:980px;
margin:0 auto 30px;
padding:0 4%;
}
#courseInfo table.pc {
border-left:1px solid #3a3a3a;
border-top:1px solid #3a3a3a;
}
#courseInfo table.pc tr th,
#courseInfo table.pc tr td {
border-right:1px solid #3a3a3a;
border-bottom:1px solid #3a3a3a;
padding:6px;
vertical-align:middle;
text-align:center;
line-height:1.3;
}
#courseInfo table.pc thead tr th {
}
#courseInfo table.pc tr td span {
font-size:1.2rem;
}
#courseInfo table.pc tbody tr.cell3a th {
background-color:#3e5a83;
color:#ffffff;
font-weight:bold;
}
#courseInfo table.pc tbody tr.cell3a td {
background-color:#e3e7ed;
}
#courseInfo table.pc tbody tr.cellMobile th {
background-color:#94465a;
color:#ffffff;
font-weight:bold;
}
#courseInfo table.pc tbody tr.cellMobile td {
background-color:#e7d6da;
}
#courseInfo ul {
width:100%;
padding:20px 0 0;
text-align:center;
font-size:0;
}
#courseInfo ul li {
display:inline-block;
margin:0 0.5em;
font-size:1.6rem;
}
#courseInfo ul li a{
display:inline-block;
width:15em;
padding:5px 10px;
background-color:#3e5a83;
border-radius:16px;
text-align:center;
color:#ffffff;
}
#courseInfo ul li:nth-of-type(2) a{
background-color:#93485b;
}
#newsWrap {
display:table;
width:100%;
max-width:980px;
margin:0 auto 12px;
padding:0 4%;
}
#newsWrap .newsTtl {
display:table-cell;
width:16em;
vertical-align:middle;
}
#newsWrap .newsTtl h2 {
font-size:1.6rem;
}
#newsWrap .newsTtl h2 span {
display:block;
color:#a3882b;
}
#newsWrap .newsTtl a {
color:#3e5a83;
}
#newsWrap .newsList {
display:table-cell;
width:auto;
padding:0 5%;
border-left:1px solid #404040;
}
#newsWrap .newsList ul li {
padding:1px 0 1px 11ex;
}
#newsWrap .newsList ul li span {
display:inline-block;
width:11ex;
margin:0 0 0 -11ex;
color:#929292;
}
#newsWrap .newsList ul li a {
color:#5f5d5d;
}
.topics {
max-width:980px;
margin:0 auto 30px;
padding:0 4%;
}
.topics p {
padding:3px 12px;
background-color:#fffac8;
}
.topics p a {
color:#333333;
}
#information ul.tab {
width:100%;
margin:0 0 20px;
border-bottom:1px solid #3a3a3a;
text-align:center;
font-size:0;
}
#information ul.tab li {
display:inline-block;
}
#information ul.tab li a {
display:inline-block;
vertical-align:bottom;
margin:0 0.5em;
border-radius:3px 3px 0 0;
border-top:1px solid #3a3a3a;
border-left:1px solid #3a3a3a;
border-right:1px solid #3a3a3a;
text-decoration:none;
font-size:1.6rem;
}
#information ul.tab li:nth-of-type(1) a {
margin-bottom:-1px;
background-color:#ffffff;
border-top:2px solid #4d80cb;
padding:5px 50px;
font-weight:bold;
font-size:1.8rem;
color:#4d80cb;
}
#information ul.tab li:nth-of-type(2) a {
background-color:#94465a;
padding:3px 30px;
color:#ffffff;
}
#information .artistList {
max-width:980px;
margin:0 auto;
}
#information .artistList > div {
float:left;
width:32%;
margin:0 2% 2% 0;
}
#information .artistList > div:nth-of-type(3n) {
margin-right:0;
}
#information .artistList > div:nth-of-type(3n+1) {
clear:left;
}
#information .artistList > div > strong {
display:block;
margin:0 0 5px;
padding:0 0 0 8px;
line-height:1.3;
font-size:1.6rem;
font-weight:bold;
border-left:6px solid #0caf00;
color:#0caf00;
}
#information .artistList > div dl {
width:100%;
}
#information .artistList > div dl dt {
position:relative;
width:100%;
margin:0 0 5px;
}
#information .artistList > div dl dt img {
width:100%;
}
#information .artistList > div dl dt span.iconNew {
position:absolute;
max-width:30%;
left:0;
top:0;
}
#information .artistList > div dl dt span.iconEnd {
position:absolute;
max-width:40%;
right:0;
bottom:0;
}
#information .artistList > div dl dt span.iconEnd img {
vertical-align:bottom;
}
#information .artistList > div dt + dd {
padding:0 0 1px 0;
line-height: 1.3;
font-size:1.4rem;
word-break: break-all;
}
.artistList > div dt + dd + dd {
line-height:1.5;
font-size:1.2rem;
word-break: break-all;
}
#information .otherList {
margin-top: 15px;
padding-top: 30px;
border-top: 1px solid #9c9c9c;
} .twitList {
max-width: 980px;
margin: 0 auto;
margin-top: 15px;
padding-top: 30px;
border-top: 1px solid #9c9c9c;
}
.twitList h3 {
margin: 0 0 5px;
padding: 0 0 0 8px;
line-height: 1.3;
font-size: 1.6rem;
font-weight: bold;
border-left: 6px solid #0a72c3;
color: #0a72c3;
}
.twitList table {
width: 100% !important;
height: auto !important;
}
.twitList table tbody {
display: block;
}
.twitList table tr {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.twitList table td {
width: 23.5%;
margin: 0 0 2% 0 !important;
padding: 0 !important;
}
.twitList table td a {
width: 100% !important;
height: auto !important;
border-radius: 0 !important;
}
.twitList ._fukugan_thumbnail {
margin: 0 !important;
width: 100% !important;
height: auto !important;
border-radius: 0 !important;
object-fit: initial !important;
}
.twitList table td > div {
width: auto !important;
height: auto !important;
}
.twitList table td a > span > span:nth-of-type(2) {
color: #999999 !important;
}
.twitList ._fukugan_cell:hover ._fukugan_thumbnail {
border: none !important;
opacity: 0.75;
transition: 0.5s;
}
.twitList ._fukugan_cell:hover ._fukugan_report_link {
display: none;
}
.twitList ._fukugan_cell:hover img.emoji {
border: none !important;
margin: 0 .07em !important;
}
.twitList ._fukugan_cell:hover span {
text-decoration: none !important;
}
.twitList ._fukugan_cell_empty {
display: none;
}
.twitList img.emoji {
font-size: 1em;
}
@media only screen and (max-width: 640px) {
header {
height: 260px;
}
header .headInr p {
margin:0 0 20px;
padding:0 2%;
text-align:center;
font-size:3.0rem;
}
header .headInr > div {
width:98%;
}
header .headInr > div dl {
float:left;
width:50%;
padding:1% 1% 2%;
box-sizing:border-box;
}
header .headInr > div dl:first-child {
border-right:1px solid #ffffff;
}
header .headInr > div dl dt {
margin:0 0 10px;
font-size:2.8rem;
}
header .headInr > div dl dd a {
display:inline-block;
width:94%;
padding:5px 10%;
background-color:#ffffff;
border-radius:16px;
box-sizing:border-box;
font-size:1.8rem;
} .topSlide {
height: 260px;
}
.topSlide li {
height: 260px;
}
#courseInfo {
width:96%;
padding:0;
}
#courseInfo table.sp {
border-left:1px solid #3a3a3a;
border-top:1px solid #3a3a3a;
}
#courseInfo table.sp tr th,
#courseInfo table.sp tr td {
border-right:1px solid #3a3a3a;
border-bottom:1px solid #3a3a3a;
padding:6px;
vertical-align:middle;
text-align:center;
line-height:1.3;
}
#courseInfo table.sp thead tr th:nth-of-type(2) {
width:32%;
background-color:#3e5a83;
color:#ffffff;
font-weight:bold;
}
#courseInfo table.sp thead tr th:nth-of-type(3) {
width:32%;
background-color:#94465a;
color:#ffffff;
font-weight:bold;
}
#courseInfo table.sp tr td span {
font-size:1.2rem;
}
#courseInfo table.sp tbody tr td:nth-of-type(1) {
background-color:#e3e7ed;
}
#courseInfo table.sp tbody tr td:nth-of-type(2) {
background-color:#e7d6da;
}
#courseInfo ul li {
margin: 0 0.7em 10px;
font-size:1.4rem;
}
#courseInfo ul li a{
width:11em;
}
#newsWrap {
width:96%;
display:block;
padding:0;
}
#newsWrap .newsTtl {
display:block;
position:relative;
width:100%;
margin:0 0 10px;
}
#newsWrap .newsTtl h2 {
display:inline-block;
font-size:1.6rem;
}
#newsWrap .newsTtl h2 span {
display:none;
}
#newsWrap .newsTtl a {
position:absolute;
right:0;
top:0;
}
#newsWrap .newsList {
display:block;
width:auto;
padding:0;
border-left:0;
}
#newsWrap .newsList ul li {
padding: 3px 0 3px 11ex;
}
.topics {
width:96%;
padding:0;
}
#courseInfo ul li a span {
display:inline-block;
}
#information ul.tab li:nth-of-type(1) a {
padding:5px 20px;
}
#information ul.tab li:nth-of-type(2) a {
padding:3px 20px;
}
#information .artistList {
width:96%;
}
#information .artistList > div {
float:left;
width:49%;
margin:0 2% 2% 0;
}
#information .artistList > div:nth-of-type(3n) {
margin-right:2%;
}
#information .artistList > div:nth-of-type(3n+1) {
clear:none;
}
#information .artistList > div:nth-of-type(2n) {
margin-right:0;
}
#information .artistList > div:nth-of-type(2n+1) {
clear:left;
}
#information .otherList {
} .twitList {
width: 96%;
}
.twitList table td {
width: 49%;
}
}
@media only screen and (max-width: 420px) {
header .headInr p {
font-size:2.6rem;
}
header .headInr > div dl dt {
font-size:2.2rem;
}
header .headInr > div dl dd a {
font-size:1.6rem;
}
}