/*  Typo
----------------------------------------------- */
a:link {
    color: #039;
}

a:visited {
    color: #800080;
}

a:link, a:visited
{
    text-decoration: underline;
}
a:active {  text-decoration: underline; }
a:hover { text-decoration:none; }

a img:hover { opacity: 0.8; }

h1 { font:bold  "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold  "Trebuchet MS", Verdana, sans-serif; }

p {font: 16px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

.hover { cursor: pointer; }

.text-center { text-align: center; }
.text-center img { margin: 0 auto; max-width: 100%; height:auto;}



/*reset
------------------------------------------------*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*  Layout
----------------------------------------------- */

body {
    background: #F6F2ED url(https://u.jimcdn.com/cms/o/sbe57e4fb2c5bb6ac/userlayout/img/bg.gif?t=1366898711);
    padding:0;
    margin:0;
    font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height: 1.6 !important;
}

#container
{
    margin:0 auto;
    width:990px;
    background:white;
}

#header
{
    padding:3px 20px 15px 20px;
    border-top:solid 4px #F2A9C1;
}

#header h1{
    width:382px;
    height:88px;
    margin:10px 0 0 0;
    padding:0;
    float:left;
}
#header p.tel{
    display:block;
    width:296px;
    height:62px;
    float:right;
    margin:0;
    padding:0;
    margin-top:33px;
}
#header p.description {
padding:2px 0 0 0;
margin:0;
font-size:100%;
color:#433;
font-weight: bold;
}

/*トップページのメインビジュアル*/
.cc-indexpage #mainimg {
    display:block;
    clear:both;
    margin-left:20px;
    height: 260px;
}
.cc-indexpage #mainimg ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
.cc-indexpage #mainimg ul li{
    margin:0;
    padding:0;
}

/*トップページ以外は非表示*/
#mainimg {display:none;}



.cc-indexpage #content {
    padding-top: 0;
}

#navigation
{
    float:left;
    width:220px;
    padding:20px 0px 16px 20px;

}
#sidebar
{
    padding-top:10px;
}
#sidebar .n {
padding: 0 !important;
}
#sidebar h2{
    color:#FFF;
    background:#8482B6;
margin-bottom: 12px;
    padding:3px 6px;
    border-left:solid 3px #322F85;
}



#content
{
    float:right;
    width:710px;
    padding:20px 15px 20px 0px;
}

#footer
{
    font-size:14px; 
    clear:both;
    margin-top:10px;
    height:65px;
    border-top:solid 1px #999;
    background:#fff;
    clear:both;
}

#footer .gutter 
{
    padding: 20px 20px 20px 20px;
    background-color: #fff;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
    width:220px;
}

ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0;  
    padding: 0;
    
}
ul.mainNav1  {
    background:url(https://u.jimcdn.com/cms/o/sbe57e4fb2c5bb6ac/userlayout/img/back.gif?t=1366906878) #ccc;
}
ul.mainNav2  {
    background:#fff;
}

ul.mainNav1 li a
{
    font:normal 16px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    display: block;
    color:#333;
    border:2px solid #ffffff;
    background:url(https://u.jimcdn.com/cms/o/sbe57e4fb2c5bb6ac/userlayout/img/nav-icon.gif?t=1366907296) no-repeat 7px 1.1em;
}

ul.mainNav1 li a { 
    padding:10px 4px 10px 20px; 
}
ul.mainNav2 li a { 
    padding:6px 4px 6px 30px; 
    border-bottom:1px dotted #ccc;
    background:url(https://u.jimcdn.com/cms/o/sbe57e4fb2c5bb6ac/userlayout/img/nav-icon2.gif?t=1367152862) no-repeat 14px 0.8em;
}

ul.mainNav1 a:hover
{
    background:#EEE;
    color:black;
}
ul.mainNav1 a.current { 
    font-weight:bold;
}

#navigation img{
    margin-bottom:10px;
}

/*  content style
----------------------------------------------- */
#content_area > h1 {
    margin-top: 26px;
    background: #F6F6FC;
    padding: 8px 10px;
    border-left: solid 4px #817EB9;
    margin-bottom: 0.6em;
}

#content_area p {
    margin: 0.5em 0 1em;
    line-height: 1.6;
}

#content_area ul li {
    list-style-type: none;
    background: url(list-icon.gif) no-repeat left 8px;
    padding-left: 15px;
    line-height: 1.6;
    margin: 0.5em 0;
}

#content_area table {
    margin: 1.8em 0;
    border: 1px solid #999;
    border-collapse: collapse;
    border-spacing: 0;
}

#content_area table th, table td {
    padding: 8px;
    border: 1px solid #999;
    font-size: 90%;
}
#content_area table th {
    background-color: #F6F6FC;
    white-space: nowrap;
}

#content_area table th, table td {
    padding: 8px;
    border: 1px solid #999;
    font-size: 90%;
}

/*headline style ---------*/

#content_area div.j-header h1{
    background:#F6F6FC;
    padding: 8px 10px;
    border-left:solid 4px #817EB9;
    margin-bottom: 0.6em;   
}
#content_area div.j-header h2{
    background:url(https://u.jimcdn.com/cms/o/sbe57e4fb2c5bb6ac/userlayout/img/h1-icon.gif?t=1366960227) no-repeat 3px 3px #FAF8F5;
    padding:5px 0 5px 40px;
    border-bottom:solid 1px #B2A8C2;
    margin:1em 0 0.8em;
}

#content_area div.j-header h3{
    padding:5px 0 5px 10px;
   border-left:solid 5px #817EB9;
}

#content_area .contact_area ul {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
padding: 0;
}
#content_area .contact_area ul li {
width: 48%;
right: 0;
    padding: 0 !important;
    background: none;
}
#content_area .contact_area ul li img {
width: 100%;
height:auto;
}
/*blog style ---------*/
div.datetime.dt-style2 p, div.datetime.dt-style3 p, div.datetime.dt-style4 p {
font-size: 14px;
}
#content_area div.blogselection h1{
    font-size:16px;
    padding-top:6px;
}
#content_area div.j-blogarticle{
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dotted #ccc;
}
a.blogreadmore {
    text-align: right;
    display: block;
    margin-top:-10px;
}
span.comment {
    display:block; 
    margin-left: 600px;
}

.likebox {
    margin-top: 30px !important;
}

@media (min-width:500px) {
#cc-m-imagesubtitle-7096662015 { display:none; }
.hide-pc { display:none; }
}

@media (max-width:500px) {

}
#content_area {
  .exclude {
    background-color: #efeeeb;

    h2 {
      background-color: #cecee6;
      padding: 5px 15px;
      font-size: 18px;
    }

    h3 {
      color: #333;
      padding: 10px 15px;

      &:before {
        content: '■';
        color: #636398;
        font-size: 24px;
        vertical-align: middle;
      }
    }

    img {
      border: 1px solid #ddd;
      max-width: 100%;
      height: auto;
      box-sizing: border-box;
    }

    p {
      font-size: 14px;
    }

    ul {
      margin: 0 0 24px;
      padding: 0;
      list-style-type: none;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &.before {}

      &:after,
      &:before {
        display: block;
        content: '';
        width: calc(50% - 15px);
        order: 1;

        @media (min-width: 600px) {
          width: calc(25% - 15px);
        }

      }

      li {
        width: calc(50% - 15px);
        background: none;
        margin: 0;
        padding: 0;

        @media (min-width: 600px) {
          width: calc(25% - 15px);
        }

      }
    }

    .popularThings {
      margin-bottom: 24px;

      ul {
        margin: 0 10px;
        background-color: #e8e8f4;

        border: 2px solid #acaad6;
      }
    }
  }
}

#content_area {
  .planList {
    ul {
      list-style-type: none;
      padding: 0;

      @media (min-width: 600px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          width: calc(50% - 20px);
          right: 0;
          background: none;
        }
      }
    }

    li {
      margin-bottom: 24px;
      padding: 5px;

      &.small {
        background-color: #F5E1CB;
      }

      &.medium {
        background-color: #DCEDD0;
      }

      &.large {
        background-color: #DFE7F4;
      }
    }

    .outlineBox {
      padding: 15px 15px 20px;
      background-color: #fff;
      text-align: center;
    }

    h2 {
      margin: 0;
      text-align: center;
      font-size: 20px;

      span.label {
        font-size: 12px;
        border-radius: 20px;
        vertical-align: middle;
        color: #fff;
        margin-right: 8px;
        padding: 1px 8px;

        &.purple {
          background-color: #78568B;
        }

        &.green {
          background-color: #568B73;
        }

        &.blue {
          background-color: #516B8B;
        }
      }

      span.planName {
        font-size: 16px;
      }
    }

    p {
      margin: 0;
      font-weight: bold;

      &.memberPrice {
        margin-bottom: 6px;
        color: #B50000;
        font-size: 30px;

        span {
          font-size: 16px;
          color: #000;
        }

        &.nonMenberPrice,
        &.participants {
          font-size: 14px;
        }
      }

      &.toDetail {
        margin-top: 10px;

        a {
          display: inline-block;
          padding: 5px 20px;
          border-radius: 8px;
          color: #fff;
          background-color: #5759A6;
          text-decoration: none;

          &:hover {
            background-color: #7577c4;
          }
        }
      }
    }
  }
}
#content_area {
  .exclude {
    background-color: #efeeeb;

    h2 {
      background-color: #cecee6;
      padding: 5px 15px;
      font-size: 18px;
    }

    h3 {
      color: #333;
      padding: 10px 15px;

      &:before {
        content: '■';
        color: #636398;
        font-size: 24px;
        vertical-align: middle;
      }
    }

    img {
      border: 1px solid #ddd;
      max-width: 100%;
      height: auto;
      box-sizing: border-box;
    }

    p {
      font-size: 14px;
    }

    ul {
      margin: 0 0 24px;
      padding: 15px;
      list-style-type: none;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &.before {}

      &:after,
      &:before {
        display: block;
        content: '';
        width: calc(50% - 15px);
        order: 1;

        @media (min-width: 600px) {
          width: calc(25% - 15px);
        }

      }

      li {
        width: calc(50% - 15px);
        background: none;
        right: 0;
        margin: 0;
        padding: 0;

        @media (min-width: 600px) {
          width: calc(25% - 15px);
        }

      }
    }

    .popularThings {
      margin-bottom: 24px;

      ul {
        margin: 0 10px;
        background-color: #e8e8f4;

        border: 2px solid #acaad6;
      }
    }
  }
  .planList {
    ul {
      list-style-type: none;
      padding: 0;

      @media (min-width: 600px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          width: calc(50% - 20px);
          right: 0;
          background: none;
        }
      }
    }

    li {
      margin-bottom: 24px;
      padding: 5px;
      right: 0;

      &.small {
        background-color: #F5E1CB;
      }

      &.medium {
        background-color: #DCEDD0;
      }

      &.large {
        background-color: #DFE7F4;
      }
    }

    .outlineBox {
      padding: 15px 15px 20px;
      background-color: #fff;
      text-align: center;
    }

    h2 {
      margin: 0;
      text-align: center;
      font-size: 20px;

      span.label {
        font-size: 12px;
        border-radius: 20px;
        vertical-align: middle;
        color: #fff;
        margin-right: 8px;
        padding: 1px 8px;

        &.purple {
          background-color: #78568B;
        }

        &.green {
          background-color: #568B73;
        }

        &.blue {
          background-color: #516B8B;
        }
      }

      span.planName {
        font-size: 16px;
      }
    }

    p {
      margin: 0;
      font-weight: bold;

      &.memberPrice {
        margin-bottom: 6px;
        color: #B50000;
        font-size: 30px;

        span {
          font-size: 16px;
          color: #000;
        }

        &.nonMenberPrice,
        &.participants {
          font-size: 14px;
        }
      }

      &.toDetail {
        margin-top: 10px;

        a {
          display: inline-block;
          padding: 5px 20px;
          border-radius: 8px;
          color: #fff;
          background-color: #5759A6;
          text-decoration: none;

          &:hover {
            background-color: #7577c4;
          }
        }
      }
    }
  }
}

#content_area .exclude { margin-top: 24px; background-color: #efeeeb; }
#content_area .exclude h2 { background-color: #cecee6; padding: 5px 15px; font-size: 18px; }
#content_area .exclude h3 { color: #333; padding: 10px 15px; }
#content_area .exclude h3:before { content: '■'; color: #636398; font-size: 24px; vertical-align: middle; }
#content_area .exclude img { border: 1px solid #ddd; max-width: 100%; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; }
#content_area .exclude p { font-size: 13px;}
#content_area .exclude ul { margin: 0 0 24px; padding: 15px; list-style-type: none; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#content_area .exclude ul:after, #content_area .exclude ul:before { display: block; content: ''; width: calc(50% - 15px); -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
@media (min-width: 600px) { #content_area .exclude ul:after, #content_area .exclude ul:before { width: calc(25% - 15px); } }
#content_area .exclude ul li { width: calc(50% - 15px); background: none !important; right: 0; margin: 0; padding: 0; }
#content_area .exclude ul li br { display: none;}
@media (min-width: 600px) { #content_area .exclude ul li { width: calc(25% - 15px); } }
#content_area .exclude .popularThings ul { margin: 0 10px; background-color: #e8e8f4; border: 2px solid #acaad6; }
#content_area .planList ul { list-style-type: none; padding: 0; }
@media (min-width: 480px) { #content_area .planList ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #content_area .planList ul li { width: calc(50% - 20px); right: 0; background: none; } }
#content_area .planList li { background-image: none; margin-bottom: 24px; padding: 5px; right: 0; }
#content_area .planList li.small { background-color: #F5E1CB; }
#content_area .planList li.medium { background-color: #DCEDD0; }
#content_area .planList li.large { background-color: #DFE7F4; }
#content_area .planList .outlineBox { padding: 15px 15px 20px; background-color: #fff; text-align: center; }
#content_area .planList h2 { margin: 0; text-align: center; font-size: 20px; }
#content_area .planList h2 span.label { font-size: 12px; border-radius: 20px; vertical-align: middle; color: #fff; margin-right: 8px; padding: 1px 8px; }
#content_area .planList h2 span.label.purple { background-color: #78568B; }
#content_area .planList h2 span.label.green { background-color: #568B73; }
#content_area .planList h2 span.label.blue { background-color: #516B8B; }
#content_area .planList h2 span.planName { font-size: 16px; }
#content_area .planList p { margin: 0; font-weight: bold; }
#content_area .planList p.memberPrice { margin-bottom: 6px; color: #B50000; font-size: 30px; }
#content_area .planList p.memberPrice span { font-size: 16px; color: #000; }
#content_area .planList p.memberPrice.nonMenberPrice, #content_area .planList p.memberPrice.participants { font-size: 14px; }
#content_area .planList p.toDetail { margin-top: 10px; }
#content_area .planList p.toDetail a { display: inline-block; padding: 5px 20px; border-radius: 8px; color: #fff; background-color: #5759A6; text-decoration: none; }
#content_area .planList p.toDetail a:hover { background-color: #7577c4; }