@charset"UTF-8";
/* 全体を線で囲む SQ1 */

.charaSQ1 {
  border: solid 3px #2ea067;/*線色*/
  padding: 0.3em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}
/* リンク下部線消し+名前青 */
#chara {
  text-decoration: none;
}

.kyoutyo {
  background-color: #8ac0ff;
}
/* ギルド用アコーディオンメニュー SQ1 */
.accordion-SQ1 {
    max-width: 100vh;
    margin: auto 5vh auto;
    background-color: #ffffff;
}

.accordion-SQ1:not([open]) {
    margin-bottom: 7px;
}

.accordion-SQ1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0.3em;
    padding: 1em 2em;
    border-radius: 5px;
    background-color: #2ea067;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.accordion-SQ1 summary::-webkit-details-marker {
    display: none;
}

.accordion-SQ1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-SQ1[open] summary::after {
    transform: rotate(225deg);
}

.accordion-SQ1 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0.3em;
    padding: 1em 1em 1em 1em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-SQ1[open] p {
    margin: 1vh 2vh 1vh;
    transform: none;
    opacity: 1;
}
/** ここから下は本ページ用 **/
 p{
    padding: 0 2rem 0;
 }

p > a{
 color: #109196;
}

/* H2目次用 */
.mokuziwaku{
	margin: 0 10px;
	border-bottom: #a3a3a3 solid 2px;
	}

h2.mokuzi {
 display: inline-block;
 flex-direction: column;
    align-items: flex-start;
    margin: 5px 10px;
    font-size: 1.4em;
    text-align: left;
    text-transform: uppercase;
	}
h2.mokuzi::before {
    border-top: none;
}
.mokuzi img {
display: inline-block;
}


/* キャラ名全体 -青 */
h1[href="CharaName"] {
  color: #ffffff;/*文字色*/
  background: #079694;/*背景色*/
  padding: 1vh;/*文字周りの余白*/
  margin:0.5vh;
  width: 95%;
  height: auto;
  border-radius: 0.5em;/*背景角丸*/
}

/* キャラクタ詳細の囲み */
.CharaProfile {
    position: relative;
    max-width: 750px;
    margin: 40px auto;
    padding: 1em calc(1.5em + 9px);
    border-top: 1px solid #2589d0;
    border-bottom: 1px solid #2589d0;
    color: #333;
}

.CharaProfile::before,
.CharaProfile::after {
    position: absolute;
    width: 1px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #2589d0;
    content: '';
}

.CharaProfile::before {
    left: 9px;
}

.CharaProfile::after {
    right: 9px;
}
/*吹き出しボックス*/
.comment {
    position: relative;
    margin: 2.5rem;
    padding: 1.8em 1.5em 1em 1.5em;
    border: 2px solid #66e3bf;
}

.comment > div {
    position: absolute;
    top: -1.15em;
    left: -.5em;
    padding: .4em 3.5em;
    border-radius: 5px;
    background-color: #66e3bf;
    color: #fff;
}

.comment > div::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background-color: #66e3bf;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.comment p {
    margin: 0;
}


/* 取り消し線 */
.Torikeshi {
text-decoration: line-through;
}
/** キャラクター画像小さめ **/
.miniImg{
	width: 95%;
    height: auto;
    
}
/* キャラクター画像大きいサイズ */
.CharaIng{
	width: 90%;
    height: auto;
}
/* インフォメーション用レスポンシブ */
table.infolog {
  border-collapse: collapse;
  width: 95%;
}
.infolog th, .infolog td {
  border: 2px solid #fff;
  background-color: #e6f1f6;
  border-radius: 0 15px 15px 0;
  padding: 0.5em;
}
.infolog th {
  background-color: #079694;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 15px 0 0 15px;
  width: 20%;
  min-width: 4em;
  position: relative;
}
/* あらすじ解説用アコーディオン */
.accordion-006 {
    max-width: 750px;
    margin: 0 auto;
    margin-bottom: 7px;
    background-color: #e6edf3;
    border-radius: 5px;
}

.accordion-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-006 summary::-webkit-details-marker {
    display: none;
}

.accordion-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #b6bdc3;
    border-right: 3px solid #b6bdc3;
    content: '';
    transition: transform .3s;
}

.accordion-006[open] summary::after {
    transform: rotate(225deg);
}

.accordion-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
	
    transform: none;
    opacity: 1;
}
/* スマホ用 */
@media screen and (max-width: 900px){
h1[href="CharaName"] {
  color: #ffffff;/*文字色*/
  background: #079694;/*背景色*/
  width: 90%;
  margin-left: 2%;
  padding: 0.3em;/*文字周りの余白*/
  border-radius: 0.5em;/*背景角丸*/
}

 p{
    padding: 0.5em 1em;
 }


.menu-back{
 text-align: center;
}

/* キャラクタ詳細の囲み */
.CharaProfile {
    position: relative;
    max-width: 750px;
    margin-left: 2%;
    margin-right: 4%;
	padding: 1em calc(1.5em + 9px);
    border-top: 1px solid #2589d0;
    border-bottom: 1px solid #2589d0;
    color: #333;
}

.CharaProfile::before,
.CharaProfile::after {
    position: absolute;
    width: 1px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #2589d0;
    content: '';
}

.CharaProfile::before {
    left: 9px;
}

.CharaProfile::after {
    right: 9px;
}


/** キャラクター画像小さめ **/
.miniImg{
	width: 90%;
    height: auto;
    margin-left: 3%;
    margin-right: 2%;
}
/* キャラクター画像大きいサイズ */
.CharaIng{
	width: 90%;
    height: auto;
    margin-left: 3%;
    margin-right: 2%;
}
/* あらすじ解説用アコーディオン */
.accordion-006 {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 7px;
    background-color: #e6edf3;
    border-radius: 5px;
}

.accordion-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-006 summary::-webkit-details-marker {
    display: none;
}

.accordion-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #b6bdc3;
    border-right: 3px solid #b6bdc3;
    content: '';
    transition: transform .3s;
}

.accordion-006[open] summary::after {
    transform: rotate(225deg);
}

.accordion-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
    transform: none;
    opacity: 1;
 }
}