@charset "UTF-8";
/* Scss Document */

/*---------------------------------
全ページ共通
---------------------------------*/

:root {
  --custom-text-color: #433c44;
  --custom-main-color: #88aafc;
  --custom-main-01: rgba(202, 184, 217, 0.1);
  --custom-main-02: rgba(202, 184, 217, 0.2);
  --custom-main-03: rgba(202, 184, 217, 0.3);
  --custom-main-05: rgba(202, 184, 217, 0.5);
  --custom-main-07: rgba(202, 184, 217, 0.7);
  --custom-second-color: #82fcc8;
  --custom-second-01: rgba(224, 181, 211, 0.1);
  --custom-second-02: rgba(224, 181, 211, 0.2);
  --custom-second-03: rgba(224, 181, 211, 0.3);
  --custom-second-05: rgba(224, 181, 211, 0.5);
  --custom-second-07: rgba(224, 181, 211, 0.7);
  --custom-accent-color: #E77491;
  --custom-accent-01: rgba(231, 116, 145, 0.1);
  --custom-accent2-color: #3374D4;
  --custom-accent2-01: rgba(51, 116, 212, 0.1);
  --custom-main-grad: linear-gradient(90deg, rgba(31, 45, 117, 1) 0%, rgba(69, 251, 192, 1) 100%);
  --custom-30-grad: linear-gradient(90deg, rgba(31, 45, 117, 0.3) 0%, rgba(69, 251, 192, 0.3) 100%);
  --custom-80-grad: linear-gradient(90deg, rgba(31, 45, 117, 0.8) 0%, rgba(69, 251, 192, 0.8) 100%);
  --custom-white: rgba(255, 255, 255, 1);
  --custom-white-09: rgba(255, 255, 255, 0.9);
  --custom-white-08: rgba(255, 255, 255, 0.8);
  --custom-white-07: rgba(255, 255, 255, 0.7);
  --custom-white-06: rgba(255, 255, 255, 0.6);
  --custom-white-05: rgba(255, 255, 255, 0.5);
  --custom-white-04: rgba(255, 255, 255, 0.4);
  --custom-white-01: rgba(255, 255, 255, 0.1);
  --custom-gray: #C0C6C9;
  --custom-img-border: #E2E2E2;
  --custom-border: #f0f0f0;
  --custom-font-jp:Zen Kaku Gothic Antique, sans-serif;
  --custom-font-po:Poiret One, Zen Kaku Gothic Antique, sans-serif;
}



/*文字関連*/
p {
  margin: 0px 0; }



em {
  text-decoration: underline;
  font-style: normal; }

ul, ol, dl {
  margin: 24px 0; }



/*テキストエリア*/
textarea {
  padding: 4px;
  background-color: rgba(36, 19, 13, 0.05);
  border: 0; }



/*角丸のボックス*/
.box {
  background-color: #fffffc;
  border-radius: 16px; }

.box3 {
    background-color: #474747;
    border-radius: 16px;
   }

/*グリッドのリスト*/
.gridlist {
  display: grid;
  grid-template-columns: auto 1fr; }
  .gridlist dt {
    position: relative;
    padding-right: 8px;
    margin-bottom: 8px; }
    .gridlist dt::after {
      content: "";
      display: block;
      position: absolute;
      right: -16px;
      top: 6px;
      width: 0;
      height: 0;
      border: 6px solid #4e4449;
      border-color: transparent transparent transparent #4e4449; }
  .gridlist dd {
    padding-left: 32px; }



/*---------------------------------
ヘッダー
---------------------------------*/



/*---------------------------------
メイン
---------------------------------*/




/*更新内容*/
  main .news ul {
    list-style: none;
    padding: 0;
    height: 90px;
    overflow-y: auto; }
    main .news ul li {
      padding: 4px;
      border-bottom: 1px solid #4e4449; }

/*COMIC*/
  main #comic ul {
    list-style: none;
    padding: 0; }
    main #comic ul li {
 }

/*Profile*/
  main .prof-left {
    min-width: 294px;
    text-align: center; }
    main .prof-left img {
      margin: 24px auto;
      border-radius: 50%; }
  main .prof-right .sns {
    display: flex;
    justify-content: flex-start;
    margin: 32px 0; }
    main .prof-right .sns a img {
      transition: 0.2s; }
      main .prof-right .sns a img:hover {
        opacity: 0.6;
        transition: 0.2s; }
    main .prof-right .sns i {
      font-size: 30px;
      margin-left: 16px; }
    main .prof-right .sns .pixiv img {
      border-radius: 0;
      margin: 0; }
    main .prof-right .sns .twitter i {
      color: #55acee; }
    main .prof-right .sns .facebook i {
      color: #315096; }
    main .prof-right .sns .instagram i {
      color: #e1306c; }



/*CONTACT*/
  main textarea {
    width: 100%;
    height: 100px; }

/*---------------------------------
フッター
---------------------------------*/


main {
margin-top: -33px;
}

/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
  margin-top:2em;
  margin-bottom:2em;
  position:relative;
margin-left: -35px;
}

.talking:before , .talking:after {
  clear:both;
  content:"";
  display:block;
}

/* 吹き出し 全体*/
.vali {
  margin-top:2em;
  margin-bottom:2em;
  position:relative;
    display: flex;
  flex-wrap:  wrap; 
}

/*アイコン*/
.talking figure {
  width:96px;     /*アイコンの横幅*/
  height:96px;    /*アイコンの縦幅*/
}

/*アイコン*/
.vali figure {
  width:96px;     /*アイコンの横幅*/
  height:96px;    /*アイコンの縦幅*/
margin-right: 10px;
}

.vali figure img {
  width:100%;
  height:100%;
  margin:0;
  border:2px solid #fff;
  border-radius:0%;    /*アイコンの角丸*/

}

/*アイコンの下の名前*/
.vali_icon figcaption {
  padding:0;
  font-size:13px;
  text-align:center;
  font-weight: bold;
  text-shadow: 1px 0 0 #fff, 
                0 1px 0 #fff, 
                -1px 0 0 #fff, 
                0 -1px 0 #fff;
}

.talking-left_icon {
  float:left;
  /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
  float:right;
 /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
  width:100%;
  height:100%;
  margin:0;
  border:2px solid #fff;
  border-radius:0%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
  padding:0;
  font-size:11px;
  text-align:center;
  font-weight: bold;
  text-shadow: 1px 0 0 #fff, 
                0 1px 0 #fff, 
                -1px 0 0 #fff, 
                0 -1px 0 #fff;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
  position:relative;
  padding:10px;
  border-style:solid;    /*枠線の線種*/
  border-radius:10px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 250px); /*100%-(アイコンサイズ+アイコンmargin)px*/
  display: inline-block; 
}

.talking-left_b , .talking-right_b {
  position:relative;
  padding:10px;
  color:white;
  border-style:solid;    /*枠線の線種*/
  border-radius:10px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 100px); /*100%-(アイコンサイズ+アイコンmargin)px*/
  display: inline-block; 
}

.talking-left2  {
  position:relative;
  padding:10px;
  border-style:solid;    /*枠線の線種*/
  border-radius:30px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 140px); /*100%-(アイコンサイズ+アイコンmargin)px*/
  display: inline-block; 
}

.talking-left_b2, .talking-right_b2 {
  position:relative;
  padding:10px;
  color:white;
  border-style:solid;    /*枠線の線種*/
  border-radius:10px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 100px); /*100%-(アイコンサイズ+アイコンmargin)px*/
  display: inline-block; 
}

.talking p {
  margin:0;
}

.talking p :last-child {
  margin:0;
}

/*---左の吹き出し---*/
.talking-left {
  float:left;
  border-width:2px;         /*枠線の太さ*/
  border-color:#fff;   /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-left:-5px; 
  margin-top:18px; 
}
.talking-left2 {
  float:left;
  border-width:2px;         /*枠線の太さ*/
  border-color:#fff;   /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-left:20px; 
}

.talking-left_b {
  float:left;
  border-width:2px;         /*枠線の太さ*/
  border-color:#fff;   /*枠線の色*/
  background:#000;    /*背景色*/
  margin-left:20px; 
}

.talking-left_b2 {
  float:left;
  border-width:2px;      /*枠線の太さ*/
  border-color:#fff;    /*枠線の色*/
  background:#000;    /*背景色*/
  margin-left:10px; 
}

/*左の吹き出し しっぽ*/
.talking-left:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  left: -22px;/*左端からの距離*/
  top: -8px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 18px 0 6px 18px/18px 0 1px 18px;/*角丸*/
  box-shadow: -8px -14px 0 -8px white inset;/*影*/
}
.talking-left_b:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  left: -22px;/*左端からの距離*/
  top: -8px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 18px 0 6px 18px/18px 0 1px 18px;/*角丸*/
  box-shadow: -8px -14px 0 -8px black inset;/*影*/
}

.talking-left2:after {
  content: "";
  position: absolute;
  top: 15px;
  left: -12px;
  width: 14px;
  height: 13px;
  bottom: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow: -8px -14px 0 -8px white inset;/*影*/
}

.talking-left2:before {
  content: "";
  position: absolute;
  top: 30px;
  left: -18px;
  width: 8px;
  height: 7px;
  bottom: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow: -8px -14px 0 -8px white inset;/*影*/
}

/*---右の吹き出し---*/
.talking-right {
  float:right;
  border-width:2px;      /*枠線の太さ*/
  border-color:#fff;    /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-right:20px; 
}
.talking-right2 {
  float:right;
  border-width:2px;      /*枠線の太さ*/
  border-color:#fff;    /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-right:20px; 
}
.talking-right_b {
  float:right;
  border-width:2px;      /*枠線の太さ*/
  border-color:#fff;    /*枠線の色*/
  background:#000;    /*背景色*/
  margin-right:20px; 
}

.talking-right_b2 {
  float:right;
  border-width:2px;      /*枠線の太さ*/
  border-color:#fff;    /*枠線の色*/
  background:#000;    /*背景色*/
  margin-right:10px; 
}

/*右の吹き出し しっぽ*/
.talking-right:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  right: -22px;/*左端からの距離*/
  top: -8px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 0 0px 16px 10px; /*角丸*/
  box-shadow: 8px -14px 0 -8px white inset;/*影*/
}
.talking-right_b:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  right: -22px;/*左端からの距離*/
  top: -8px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 0 0px 16px 10px; /*角丸*/
  box-shadow: 8px -14px 0 -8px black inset;/*影*/
}



/*地の文*/
.plane {
  margin-top:3.5em;
  margin-bottom:3.5em;
  text-align: center;
}


/*-- 文字縁取り
.plane p {
  position: relative;
 color: #fff;
 -webkit-text-stroke: 5px #fff;
}

.plane p::before {
 content: attr(data-text);
 position: absolute;
 color: #000;
 -webkit-text-stroke: 0px #000;
}
--*/
.text {
  position: relative;
 color: #fff;
 -webkit-text-stroke: 5px #fff;
}

.text::before {
 content: attr(data-text);
 position: absolute;
 color: #000;
 -webkit-text-stroke: 0px #000;
}



.plane2 {
  margin-top:3.5em;
  margin-bottom:3.5em;

}

.plane-title {
  text-align: center;
}

.plane-title2 {

  font-weight: bold;
  font-size:1.5em;
}

.plane-blk {
  padding:1.0em;
  text-align: center;
  color:#fff;   /*文字の色*/
  border-width:2px;         /*枠線の太さ*/
  border-color:#000;   /*枠線の色*/
  background:#000;    /*背景色*/
  border-radius: 10px; /*角丸*/
}

#plane-blk{
  background: rgba(0,0,0,0.6);
}

/*------------------------------
  画像付き吹き出し(会話)sp
------------------------------*/
@media only screen and (max-width: 480px) {
/* 吹き出し 全体*/
.talking {
  margin-top:0.5em;
  margin-bottom:1.5em;
  position:relative;
}

.talking:before , .talking:after {
  clear:both;
  content:"";
  display:block;
}

/*アイコン*/
.talking figure {
  width:63px;     /*アイコンの横幅*/
  height:63px;    /*アイコンの縦幅*/
}

.talking-left_icon {
  float:left;
}

.talking-right_icon {
  float:right;
}

.talking figure img {
  width:100%;
  height:100%;
  margin:0;
  border:1px solid #fff;
  border-radius:0%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
  padding: 0;
  font-size:10px;
  text-align:center;
  font-weight: bold;
  text-shadow: 1px 0 0 #fff, 
                0 1px 0 #fff, 
                -1px 0 0 #fff, 
                0 -1px 0 #fff;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
  position:relative;
  padding:10px;
  border-style:solid;    /*枠線の線種*/
  border-radius:10px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 80px);
  font-size:14px;
  display: inline-block; 
}

.talking p {
  margin:0;
}

.talking p :last-child {
  margin:0;
}

/*---左の吹き出し---*/
.talking-left {
  float:left;
  border-width:2px;         /*枠線の太さ*/
  border-color:#fff;   /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-left:15px; /*吹き出し左の余白*/
}

/*左の吹き出し しっぽ*/
.talking-left:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  left: -18px;/*左端からの距離*/
  top: -10px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 0 0px 10px 16px; /*角丸*/
  box-shadow: -8px -14px 0 -8px white inset;/*影*/
}

/*---右の吹き出し---*/
.talking-right {
  float:right;
  border-width:2px;      /*枠線の太さ*/
  border-color:#fff;    /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-right:15px; /*吹き出し右の余白*/
}

/*右の吹き出し しっぽ*/
.talking-right:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  right: -19px;/*左端からの距離*/
  top: -10px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 0 0px 16px 10px; /*角丸*/
  box-shadow: 8px -14px 0 -8px white inset;/*影*/}

/*地の文*/
.plane {
  margin-top:3.5em;
  margin-bottom:3.5em;
  text-align: center;
}

.plane-title {
  margin-bottom:1.0em;
  text-align: center;
}

.plane-blk {
  font-size: 0.95em;
  margin-top:2em;
  margin-bottom:1.5em;
}

}

/*---------------------------------
  前へ　次へボタンの配置
---------------------------------*/
  .comic-right .wrapper {
    justify-content: space-around; }
    @media screen and (max-width: 1023px) {
      .comic-right .wrapper {
        display: flex; } }

/*---------------------------------
文字装飾
---------------------------------*/
.bold{	
  font-weight: bold;}

.flll{
  font-size:1.9em;}

.fll{
  font-size:1.5em;}
.fl{
  font-size:1.2em;}
.fs{
  font-size:0.87em;}
.fss{
    font-size:0.75em;}
.red{
  color:#dc143c;}
.mizu{
  color:#3682bd;}
.w{
    color:#fff;}
.niji {
    background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  font-size:2.8em;
    font-weight: bold;
    display: inline-block;
}

.naname { font-style: italic }

.ten{
  -webkit-text-emphasis: sesame ;
}

.dot{
  -webkit-text-emphasis: filled dot ;
}

.btm_space_100 {
    margin-bottom: 100em;
}

.btm_space_75 {
  margin-bottom: 75em;
}

.btm_space_50 {
  margin-bottom: 50em;
}

.btm_space_40 {
  margin-bottom: 50em;
}

.btm_space_30 {
    margin-bottom: 30em;
}

.btm_space_15 {
  margin-bottom: 15em;
}

.btm_space_10 {
  margin-bottom: 10em;
}




/*キャラプロフ*/
div.cprof_group	{
	display: flex;
	flex-flow: row wrap;
}

div.c_prof img	{
	margin: 0 auto;
	width: 65%;
	height: auto;
	border-radius: 5%;
  border: solid 2px #485590;
}

div.c_prof	{overflow: hidden;
		margin: 0 -20px 40px;
		width: 33%;
		text-align: center;
}

div.c_prof dl	{
	margin: -10px auto 8px;
	width: 65%;
}

div.c_prof dt	{
	display: inline-block;
	color: #FFF;
	background: #485590;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.2;
	border: solid 2px #f2f6ff;
	font-family: 'Yusei Magic', sans-serif;
	padding: 6px 10px 4px 10px;
	margin-bottom: 6px;
	border-radius: 1vh ;
	position: relative;
	word-break: keep-all;
}

div.c_prof dd	{
	margin: 0;
	margin-top: 2px;
	text-align: left;
	padding: 4px 0;
}

@media screen and (max-width:650px) {
	div.c_prof	{width: 50%;}
	div.c_prof img	{width: 65%;}
	div.c_prof dt	{font-size: 13px;}
  div.c_prof dd	{font-size: 12px;}
}