/*
THEME NAME: eheartsim Theme
THEME URI: http://www.eheartsim.com/
DESCRIPTION: 
VERSION: 1.0
AUTHOR: <a href="http://www.eheartsim.com/">AUTHOR</a>
AUTHOR URI: http://www.eheartsim.com/
*/
@import url("css/base.css");
@import url("css/template.css");
@import url("css/animate.min.css");


a {
  color: #1122cc;
  text-decoration: underline;
}

a:hover {
  color: #1122cc;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ------------------------------------------------
  color
------------------------------------------------ */
/* theme */
.color-theme { 
  color: rgba(143, 113, 166, 1)!important;
}
.border-theme { 
  border-color: rgba(143, 113, 166, 1)!important;
}
.bg-theme { 
  background-color: rgba(143, 113, 166, 1)!important;
  color: #fff;
}
.bg-theme a { 
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------
  table
  ------------------------------------------------*/
#container table th,
#container table td {
  padding: 0.5em;
}

/* ------------------------------------------------
  table.striped
------------------------------------------------ */
#container table.striped tr:nth-child(2n) th,
#container table.striped tr:nth-child(2n) td {
  background: #ededed;
}

/* ------------------------------------------------
  common
------------------------------------------------ */
#wrapper  {
  background: #363636;
  min-height: 100vh;
}

#container  {
  background: #fff;
}

#container .res-flex {
  display: flex;
}

@media screen and (max-width:640px){
  
#container .res-flex {
  display: block;
}

}

/* ------------------------------------------------
  .main-visual
  ------------------------------------------------*/
#container .main-visual {
  min-height: 500px;
  background: url(image/bg_main_visual.jpg) no-repeat center center;
  background-size: cover;
}

#container .main-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

#container .main-visual > div.w980 > div.tcenter {
  width: 70%;
  margin: 0 auto;
}

/* ------------------------------------------------
  header navi
  ------------------------------------------------*/
#container #header {
  background: #fff;
  padding: 30px 0;
}

#container #header ul ul {
  width: 100%;
  text-align: right;
}

#container #header ul ul li {
  display: inline-block;
  margin-left: 1em;
}

#container #header ul ul>li:first-child {
  margin-left: 0;
}

#container #header ul ul a {
  display: block;
  height: 100%;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

#container #header ul ul a:hover {
  color: inherit;
  text-decoration: none;
}

#container #header ul ul li a:hover {
  background: linear-gradient(transparent 70%, rgba(143, 113, 166, 0.5) 70%);
}

.page-template-page_en_home #container #header .home a,
.home #container #header .home a,
.downloads #container #header .downloads a,
.faq #container #header .faq a,
.symposium #container #header .symposium,
.symposium-child #container #header .symposium,
.contact #container #header .contact a {
  /*font-weight: bold;*/
  background: linear-gradient(transparent 70%, rgba(143, 113, 166, 0.5) 70%);
}

#container #sp-menu-toggle { /* mobile trigger button */
  display: none;
}

#container #sp-menu {
  display: none;
  height: 0;
  visibirity: hidden;
}


@media screen and (max-width:800px){
  #container #header > div > .res-row > .col {
    display: flex;
    text-align: center;
  }

  #container #header > div > .res-row ul {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    text-align: center;
  }

  #container #header .logo{
    padding: 10px;
  }
}

@media screen and (max-width:767px){
  #container #header {
    padding: 10px 0;
  }

  #container #header .logo{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  #container #header > div > .res-row ul {
    display: none;
  }

  #container #sp-menu-toggle { /* mobile trigger button */
    display: inline-block;
    padding: 0.5em !important;
    border: 1px solid #662d8b;
    color: #662d8b;
    text-decoration: none;
  }

  #container #sp-menu  {
    display: block;
    height: auto;
    visibirity: visible;
    padding: 1em;
    text-align: center;
  }

  #container #sp-menu ul {
    min-height: calc(100vh - 2em);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
  }

  #container #sp-menu li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html.ja #container #sp-menu li {
    min-height: calc(12.5vh - 2em);
  }

  html.en #container #sp-menu li {
    min-height: calc(14.285vh - 2em);
  }

  #container #sp-menu li:first-child {
    border: 1px solid #fff;
    font-weight: bold;
    font-size: larger;
    color: #fff;
  }

  #container #sp-menu li:last-child {
    background: #fff;
    font-weight: bold;
    color: #662d8b;
  }

  #container #sp-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5em;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
  }

  .page-template-page_en_home #container #sp-menu .home a,
  .home #container #sp-menu .home a,
  .downloads #container #sp-menu .downloads a,
  .faq #container #sp-menu .faq a,
  .symposium #container #sp-menu .symposium,
  .symposium-child #container #sp-menu .symposium,
  .contact #container #sp-menu .contact a {
    font-weight: bold;
    background: rgba(143, 113, 166, 0.5) !important;
    border-radius: 2em !important;
  }
}

/* ------------------------------------------------
  category
  ------------------------------------------------*/
#container .category {
  background: rgba(143, 113, 166, 0.25);
  background: repeating-linear-gradient(-45deg, rgba(143, 113, 166, 0.2), rgba(143, 113, 166, 0.2) 3px,rgba(143, 113, 166, 0.1) 3px, rgba(143, 113, 166, 0.1) 7px);
  padding: 1em 0 1em 1em;
  border-top: 0.1em solid #662d8b; 
  outline: none;
}

#container .category h1 { 
  color: #662d8b;
}

#container .category + .w980 {
  min-height: 50vh;
}

.symposium-child #container h3,
.symposium #container h3,
.downloads #container h3,
.faq #container h3 {
  border-left: 0.5em solid rgba(143, 113, 166, 1);
  border-bottom: 1px solid rgba(143, 113, 166, 1);
  padding-left: 0.5em;
}

/* .downloads #container h4,*/
.symposium-child #container dt,
.symposium #container dt,
.downloads #container dt,
.symposium #faq dt {
  border-bottom: 0.1em solid rgba(143, 113, 166, 1);
  font-weight: bold;
}

.symposium-child #container th,
.symposium #container th {
  width: 10em;
}

.symposium-child #container i,
.symposium #container i {
  color: rgba(143, 113, 166, 1);
}

/* ------------------------------------------------
  hr
  ------------------------------------------------*/
#container hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  padding: 1em 0 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #ccc; 
}

/* ------------------------------------------------
  #forward
------------------------------------------------ */
#forward .section > .border-box {
  padding: 20px;
}

#forward .section > ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

#forward .section > ul.icons li {
  width: 20%;
  text-align: left;
}

#forward .section > ul.icons li div {
  width: 80%;
  margin: 0 auto 1em;
  background: #8f71a6;
  border-radius: 100%;
  text-align: center;
  overflow: hidden;
  line-height: 1;
}

#forward .section > ul.explain li:last-child {
  padding-left: 2em;
}

#forward .section > ul.explain {
  justify-content: space-around;
}

#forward .section > ul.cell-model > li,
#forward .section > ul.package > li  {
  width: 47%;
}

@media screen and (max-width:640px){
  
#forward .section > .border-box {
  padding: 10px;
}

#forward .section > ul {
  width: auto !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#forward .section > ul > li {
  display: flex;
  flex-direction: column;
}

#forward .section > ul.cell-model > li  {
}

#forward .section > ul.icons > li {
  width: 50% !important;
  align-items: center;
}

#forward .section > ul.icons > li div {
  width: 50%;
  margin: 0 0 1em 0;
}

#forward .section > ul.icons > li p {
  width: 90%;
}

#forward .section > ul.explain li:last-child {
  padding-left: 0;
}

#forward .section > ul.cell-model {
  flex-direction: column;
}

#forward .section > ul.cell-model > li {
  width: auto !important;
}

#forward .section > ul.package > li  {
  width: auto !important;
}

}

/* ------------------------------------------------
  #news
------------------------------------------------ */
#news .title-news {
  position: relative;
  border-bottom: 0.2em solid #ccc;
}

#news .title-news:after {
  content: ' ';
  display: block;
  width: 8em;
  position: absolute;
  border-bottom: 0.2em solid #662d8b;
}

#news .title-news h3 {
  padding-left: 0.5em;
}

#news dl {
  height: 15em;
  overflow-y: scroll;
  padding-left: 1em;
  padding-right: 1em;
}

#news dl dt {
  float: left;
  width: 7em;
}

#news dl dt+dd {
  padding-left: 7em;
  padding-bottom: 1em;
}

/* ------------------------------------------------
  #footer
------------------------------------------------ */
#footer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  background: #8f71a6;
  background: #363636;
  color: #fff;
}

/* ------------------------------------------------
  ボタン
------------------------------------------------ */
#container a.btn {
  display: inline-block;
  min-width: 10em;
  background: #333;
  padding: 0.4em 1em;
  border-radius: 0.2em;
  text-decoration: none;
}

@media screen and (max-width:768px){

#container a.btn {
  display: block;
}

}

#container .btn-learn {
  width: 95%;
  background: #8f71a6 !important;
  color: #fff;
}

#container .btn-download {
  width: 95%;
  background: #bb272d !important;
  color: #fff;
}

#container .btn-lang {
  background: #ccc !important;
  padding: 0.1em 1em;
  border-radius: 2em;
  text-decoration: none !important;
}

/* ------------------------------------------------
  error404
.error404 #container {
  min-height: 90vh;
  flex-direction: column;
}

.error404 .w980.contents {
  min-height: 20em;
  padding: 1em;
}
------------------------------------------------ */

/* ------------------------------------------------
  Contact Form 7
------------------------------------------------ */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
background: #efefef;
padding: 0.5em;
border: 1px solid #dedede;
border-radius: 0.2em;
}

textarea.wpcf7-form-control.wpcf7-textarea {
min-height: 10em;
background: #efefef;
border: 1px solid #dedede;
border-radius: 0.2em;
}

input.wpcf7-submit {
width: 100%;
height: 2em;
background: #bb272d;
color: #fff;
font-size: 20px;
font-weight: 600;
border-radius: 0.2em;
}
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: #c00;
font-weight: 600;
}

/* ------------------------------------------------
  wp-pagenavi
------------------------------------------------ */
.wp-pagenavi {
  clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
  text-decoration: none;
  border: 1px solid #BFBFBF;
  padding: 3px 5px;
  margin: 2px;
}

.wp-pagenavi span.current {
  background: #dedede;
  border-color: #999;
  border-bottom-color: #ccc;
  border-right-color: #ccc;
  font-weight: bold;
}

.wp-pagenavi a:hover {
  background: #efefef;
  border-color: #999;
  border-bottom-color: #ccc;
  border-right-color: #ccc;
}