@charset "utf-8";
/*------------------------------nav*/

.header_smt {
  display: none;
}
.global {
  margin-top: 1em;
}

/* logo */
p.logo {
  background-image: url(../img/logo.png);
  width: 150px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 0.5vh;
}
.global ul {
  padding: 0;
  text-align: right;
}

.global li {
  display: inline;
  color: #252525;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 0.1em;
  margin: 5px 17px;
  vertical-align: bottom;
  transform: skewX(-150deg);
}
.button-orange {
  text-align: center;
  padding: 0.8em 1.5em;
  color: #fff;
  font-weight: 600;
  font-size: 1.2em;
}

.header_pc .button-orange {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/*------------------------------TOP*/
.top_image_smt {
  display: none;
}
.top_image_pc {
  height: 50vh;
  background-position: center;
  background-image: url(../img/top-image.jpg);
  background-size: cover;
  z-index: 1;
  padding: 0;
}
.copytop {
  height: 50vh;
  background-color: rgba(184, 228, 187, 0.86);
  text-align: center;
  padding: 20px;
  /* float: right;
  margin: 500px 10px 0 0; */
}
.copytop h1 {
  font-size: 2em;
  line-height: 1.5;
}

#about,
#feature,
#contentslist,
#sample,
#contact {
  margin: 3em auto;
}

.feature li::before {
  content: "◆ ";
}
/*------------------------------content-list*/
/*--------------------クリック前から表示されている部分*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

.accordion {
  width: 100%;
  max-width: 900px;
}

/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
/* チェックボックスは非表示 */
.accordion-hidden {
  display: none;
}

/* Question部分 */
.accordion-open {
  display: block;
  padding: 5px;
  background: rgba(5, 5, 5, 1);
  cursor: pointer;
  position: relative;
  /* 変更部分 */
}

/* 開閉状態を示すアイコン+の作成 */
.accordion-open::before,
.accordion-open::after {
  content: "";
  width: 20px;
  height: 3px;
  background: #252525;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* 一本は縦にして+を作る */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: 0.5s;
}

/* アコーディオンが開いたら縦棒を横棒にして-にする */
.accordion-hidden:checked + .accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* Answer部分 */
.accordion-close {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
}

/* チェックボックスにチェックが入ったらAnswer部分を表示する */
.accordion-hidden:checked + .accordion-open + .accordion-close {
  height: auto;
  opacity: 1;
  background: #fff;
}
/*--------------------ここまでがコピペ*/

/* section.contentslist {
  width: 80%;
  max-width: 900px;
  min-width: 320px;
  margin: 0 auto;
} */

div.contentindex {
  /* width: 80%;
  max-width: 900px;
  min-width: 320px; */
  height: 50px;
  background-color: blue;
  color: white;
  vertical-align: middle;
}

/*--------------------クリックして出てくる中身*/

table {
  /*
  max-width: 900px;
  min-width: 320px; */
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto 20px;
}

td,
th {
  padding: 10px;
  text-align: center;
}

th {
  color: #fff;
  background: #005ab3;
}

table tr:nth-child(odd) {
  background: #e6f2ff;
}

.indexlayout {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
}
.indexlayout img {
  width: 100%;
  max-width: 100px;
  padding: 0;
  margin-left: 1em;
}
.indexlayout h4 {
  font-size: 26px;
  margin-bottom: 0;
  font-weight: 400;
}

.indexlayout p {
  font-size: 18px;
}

/* --------個別カラー設定_bs */
.accordion-open_bs {
  background: rgba(253, 218, 95, 1);
}

.table_bs {
  background: rgba(253, 218, 95, 0.5);
}

.table_bs th {
  color: #111;
  background: rgba(253, 218, 95, 1);
}

table.table_bs tr:nth-child(odd) {
  background: rgba(253, 218, 95, 0.7);
}

/* --------個別カラー設定_ms */
.accordion-open_ms {
  background: rgba(227, 167, 47, 1);
}

.table_ms {
  background: rgba(227, 167, 47, 0.5);
}

.table_ms th {
  color: #111;
  background: rgba(227, 167, 47, 1);
}

table.table_ms tr:nth-child(odd) {
  background: rgba(227, 167, 47, 0.7);
}

/* --------個別カラー設定_kiso */
.accordion-open_kiso {
  background: rgba(247, 124, 91, 1);
}

.table_kiso {
  background: rgba(247, 124, 91, 0.5);
}

.table_kiso th {
  color: #111;
  background: rgba(247, 124, 91, 1);
}

table.table_kiso tr:nth-child(odd) {
  background: rgba(247, 124, 91, 0.7);
}

/* --------個別カラー設定_prg */
.accordion-open_prg {
  background: rgba(255, 158, 135, 1);
}

.table_prg {
  background: rgba(255, 158, 135, 0.5);
}

.table_prg th {
  color: #111;
  background: rgba(255, 158, 135, 1);
}

table.table_prg tr:nth-child(odd) {
  background: rgba(255, 158, 135, 0.7);
}

/* --------個別カラー設定_sys */
.accordion-open_sys {
  background: rgba(179, 167, 253, 1);
}

.table_sys {
  background: rgba(179, 167, 253, 0.5);
}

.table_sys th {
  color: #111;
  background: rgba(179, 167, 253, 1);
}

table.table_sys tr:nth-child(odd) {
  background: rgba(179, 167, 253, 0.7);
}

/* --------個別カラー設定_adobe */
.accordion-open_adobe {
  background: rgba(134, 123, 217, 1);
}

.table_adobe {
  background: rgba(134, 123, 217, 0.5);
}

.table_adobe th {
  color: #111;
  background: rgba(134, 123, 217, 1);
}

table.table_adobe tr:nth-child(odd) {
  background: rgba(134, 123, 217, 0.7);
}

/* --------個別カラー設定_dtp */
.accordion-open_dtp {
  background: rgba(123, 209, 223, 1);
}

.table_dtp {
  background: rgba(123, 209, 223, 0.5);
}

.table_dtp th {
  color: #111;
  background: rgba(123, 209, 223, 1);
}

table.table_dtp tr:nth-child(odd) {
  background: rgba(123, 209, 223, 0.7);
}

/* --------個別カラー設定_mac */
.accordion-open_mac {
  background: rgba(91, 180, 181, 1);
}

.table_mac {
  background: rgba(91, 180, 181, 0.5);
}

.table_mac th {
  color: #111;
  background: rgba(91, 180, 181, 1);
}

table.table_mac tr:nth-child(odd) {
  background: rgba(91, 180, 181, 0.7);
}

/* --------個別カラー設定_cad */
.accordion-open_cad {
  background: rgba(144, 234, 196, 1);
}

.table_cad {
  background: rgba(144, 234, 196 0.5);
}

.table_cad th {
  color: #111;
  background: rgba(144, 234, 196, 1);
}

table.table_cad tr:nth-child(odd) {
  background: rgba(144, 234, 196, 0.7);
}

/* --------個別カラー設定_other */
.accordion-open_other {
  background: rgba(224, 224, 224, 1);
}

.table_other {
  background: rgba(224, 224, 224 0.5);
}

.table_other th {
  color: #111;
  background: rgba(224, 224, 224, 1);
}

table.table_other tr:nth-child(odd) {
  background: rgba(224, 224, 224, 0.7);
}
#youtube1,
#youtube2,
#youtube3,
#youtube4 {
  margin: 10px auto;
  /* display: block; */
  width: 100%;
  max-width: 560px;
  height: 315px;
}

#campaign {
  background-color: #ea9772;
  padding: 2em;
}
#campaign h3 {
  text-align: center;
  font-weight: 600;
  margin: 1em auto;
}

#contact article {
  padding: 1em;
  border: 2px solid #033871;
}