@charset "UTF-8";
/* カラー設定 */
/*  */
/* 透ける背景用設定 */
/* 基本テキスト色 */
/* font関係 */
/**/
/* 角丸 */
/*
$border-radius:10px;

/* margin-bottom 


$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* screenサイズ */
/* ブレイクポイント */
/* カラー設定 */
/*  */
/* 透ける背景用設定 */
/* 基本テキスト色 */
/* font関係 */
/**/
/* 角丸 */
/*
$border-radius:10px;

/* margin-bottom 


$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* screenサイズ */
/* ブレイクポイント */
/* CSS Transition Easing */
#common-contents {
  width: 100%;
}
#common-contents h2 img {
  transform: skewY(-5deg) !important;
}
#common-contents #contents-thm {
  overflow: hidden;
  line-height: 0;
}
#common-contents #contents-thm::after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
#common-contents #contents-thm ul {
  width: 101.5vw;
  margin-left: -0.5vw;
  overflow: hidden;
}
#common-contents #contents-thm ul li {
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#common-contents #contents-thm ul li a {
  line-height: 0;
}
#common-contents #contents-thm ul li a:hover img {
  transform: scale(1.5);
}
#common-contents #contents-thm ul li img {
  margin: 0;
  padding: 0;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: calc(100vw / 15) !important;
}
#common-contents .teamSet {
  position: relative;
}
#common-contents .charaBase {
  position: relative;
  opacity: 0;
}
#common-contents .charaBase.active {
  animation: fadeIn 0.7s ease-out 1;
  opacity: 1;
}
#common-contents .charaBase h3, #common-contents .charaBase div {
  position: absolute;
}
#common-contents .charaBase h3 {
  z-index: 10;
}
#common-contents .charaBase .carTxt {
  z-index: 9;
}
#common-contents .charaBase .carPic {
  z-index: 8;
}
#common-contents .charaBase .charaPic {
  z-index: 7;
}
#common-contents .charaBase .charaPic img {
  opacity: 0;
}
#common-contents .charaBase .charaPic img.active {
  animation: jump01 0.3s ease-out 1;
  opacity: 1;
}
#common-contents .charaBase .carPara {
  z-index: 6;
}
#common-contents .charaBase .charaType {
  z-index: 5;
}
#common-contents .layoutLeft {
  background: url("common-contents/layoutLeft.png") no-repeat;
}
#common-contents .layoutLeft h3 img {
  opacity: 0;
}
#common-contents .layoutLeft h3 img.active {
  animation: slideLeft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents .layoutLeft .carTxt img {
  opacity: 0;
}
#common-contents .layoutLeft .carTxt img.active {
  animation: slideLeft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents .layoutLeft .carPic img {
  opacity: 0;
}
#common-contents .layoutLeft .carPic img.active {
  animation: slideLeft 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents .layoutLeft .carPara img {
  opacity: 0;
}
#common-contents .layoutLeft .carPara img.active {
  animation: slideLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents .layoutLeft .charaType img {
  opacity: 0;
}
#common-contents .layoutLeft .charaType img.active {
  animation: slideLeft 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents .layoutRight {
  background: url("common-contents/layoutRight.png") no-repeat;
}
#common-contents .layoutRight h3 img {
  opacity: 0;
}
#common-contents .layoutRight h3 img.active {
  animation: slideRight 0.6s ease-out 1;
  opacity: 1;
}
#common-contents .layoutRight .carTxt img {
  opacity: 0;
}
#common-contents .layoutRight .carTxt img.active {
  animation: slideRight 0.6s ease-out 1;
  opacity: 1;
}
#common-contents .layoutRight .carPic img {
  opacity: 0;
}
#common-contents .layoutRight .carPic img.active {
  animation: slideRight 0.65s ease-out 1;
  opacity: 1;
}
#common-contents .layoutRight .carPara img {
  opacity: 0;
}
#common-contents .layoutRight .carPara img.active {
  animation: slideRight 0.5s ease-out 1;
  opacity: 1;
}
#common-contents .layoutRight .charaType img {
  opacity: 0;
}
#common-contents .layoutRight .charaType img.active {
  animation: slideRight 0.7s ease-out 1;
  opacity: 1;
}

#character-bg {
  position: absolute !important;
  z-index: 0;
  display: block;
}
#character-bg > div > div {
  display: block;
  width: 98%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media only screen and (max-width: 750px) {
  #common-contents {
    height: calc((((750 * 3.2) + 900)*5) / 750 * 100vw);
  }
  #common-contents h2 {
    padding: calc(20 / 750 * 100vw) 0 calc(20 / 750 * 100vw) calc(20 / 750 * 100vw);
  }
  #common-contents h2 img {
    width: calc(720 / 750 * 100vw);
  }
  #common-contents #contents-thm {
    margin-bottom: calc(50 / 750 * 100vw);
  }
  #common-contents .teamSet {
    padding-top: calc(900 / 750 * 100vw);
    position: relative;
  }
  #common-contents .teamSet > .maskBG {
    position: absolute;
    top: 0;
    z-index: 0;
  }
  #common-contents .teamSet > .maskBG svg {
    width: 100vw;
    height: calc(900 / 750 * 100vw) !important;
  }
  #common-contents .charaBase {
    height: calc( 750 / 750 * 100vw);
    width: calc(710 / 750 * 100vw);
    background-size: calc(499 / 750 * 100vw);
    position: relative;
    z-index: 10;
  }
  #common-contents .charaBase .carTxt {
    bottom: calc(50 / 750 * 100vw);
  }
  #common-contents .charaBase .charaType {
    top: calc(90 / 750 * 100vw);
    width: calc(710 / 750 * 100vw);
  }
  #common-contents .charaBase .charaType img {
    width: 100%;
    height: auto;
  }
  #common-contents .charaBase .carPara {
    top: calc(150 / 750 * 100vw);
    width: calc(441 / 750 * 100vw);
  }
  #common-contents .charaBase .carPara img {
    width: 100%;
    height: auto;
  }
  #common-contents .charaBase.layoutRight {
    background-position: top right;
  }
  #common-contents .charaBase.layoutRight h3 {
    right: calc(50 / 750 * 100vw);
    top: calc(3 / 750 * 100vw);
  }
  #common-contents .charaBase.layoutRight .carTxt {
    left: calc(40 / 750 * 100vw);
  }
  #common-contents .charaBase.layoutRight .carPara {
    left: 0;
  }
  #common-contents .charaBase.layoutLeft {
    background-position: top left;
    margin: 0 0 0 auto;
  }
  #common-contents .charaBase.layoutLeft h3 {
    left: calc(20 / 750 * 100vw);
    top: calc(30 / 750 * 100vw);
  }
  #common-contents .charaBase.layoutLeft .carTxt {
    right: calc(40 / 750 * 100vw);
  }
  #common-contents .charaBase.layoutLeft .carPara {
    right: 0;
  }
  #common-contents #character-01 h3 img {
    width: calc(258 / 750 * 100vw);
  }
  #common-contents #character-01 .carTxt img {
    width: calc(173 / 750 * 100vw);
  }
  #common-contents #character-01 .carPic {
    left: calc(60 / 750 * 100vw);
    top: calc(360 / 750 * 100vw);
  }
  #common-contents #character-01 .carPic img {
    width: calc(639 / 750 * 100vw);
  }
  #common-contents #character-01 .charaPic {
    left: calc(450 / 750 * 100vw);
    top: calc(162 / 750 * 100vw);
  }
  #common-contents #character-01 .charaPic img {
    width: calc(210 / 750 * 100vw);
  }
  #common-contents #character-02 h3 img {
    width: calc(258 / 750 * 100vw);
  }
  #common-contents #character-02 .carTxt img {
    width: calc(259 / 750 * 100vw);
  }
  #common-contents #character-02 .carPic {
    left: calc(40 / 750 * 100vw);
    top: calc(385 / 750 * 100vw);
  }
  #common-contents #character-02 .carPic img {
    width: calc(629 / 750 * 100vw);
  }
  #common-contents #character-02 .charaPic {
    left: calc(80 / 750 * 100vw);
    top: calc(240 / 750 * 100vw);
  }
  #common-contents #character-02 .charaPic img {
    width: calc(212 / 750 * 100vw);
  }
  #common-contents #character-03 h3 img {
    width: calc(331 / 750 * 100vw);
  }
  #common-contents #character-03 .carTxt img {
    width: calc(211 / 750 * 100vw);
  }
  #common-contents #character-03 .carPic {
    left: calc(23 / 750 * 100vw);
    top: calc(324 / 750 * 100vw);
  }
  #common-contents #character-03 .carPic img {
    width: calc(714 / 750 * 100vw);
  }
  #common-contents #character-03 .charaPic {
    left: calc(485 / 750 * 100vw);
    top: calc(173 / 750 * 100vw);
  }
  #common-contents #character-03 .charaPic img {
    width: calc(242 / 750 * 100vw);
  }
  #common-contents #character-04 h3 img {
    width: calc(267 / 750 * 100vw);
  }
  #common-contents #character-04 .carTxt img {
    width: calc(192 / 750 * 100vw);
  }
  #common-contents #character-04 .carPic {
    left: calc(10/ 750 * 100vw);
    top: calc(385 / 750 * 100vw);
  }
  #common-contents #character-04 .carPic img {
    width: calc(709 / 750 * 100vw);
  }
  #common-contents #character-04 .charaPic {
    left: calc(460 / 750 * 100vw);
    top: calc(167 / 750 * 100vw);
  }
  #common-contents #character-04 .charaPic img {
    width: calc(219 / 750 * 100vw);
  }
  #common-contents #character-05 h3 img {
    width: calc(268 / 750 * 100vw);
  }
  #common-contents #character-05 .carTxt img {
    width: calc(171 / 750 * 100vw);
  }
  #common-contents #character-05 .carPic {
    left: calc(45 / 750 * 100vw);
    top: calc(384 / 750 * 100vw);
  }
  #common-contents #character-05 .carPic img {
    width: calc(670 / 750 * 100vw);
  }
  #common-contents #character-05 .charaPic {
    left: calc(60 / 750 * 100vw);
    top: calc(167 / 750 * 100vw);
  }
  #common-contents #character-05 .charaPic img {
    width: calc(209 / 750 * 100vw);
  }
  #common-contents #character-06 h3 img {
    width: calc(225 / 750 * 100vw);
  }
  #common-contents #character-06 .carTxt img {
    width: calc(186 / 750 * 100vw);
  }
  #common-contents #character-06 .carPic {
    left: calc(0 / 750 * 100vw);
    top: calc(418 / 750 * 100vw);
  }
  #common-contents #character-06 .carPic img {
    width: calc(765 / 750 * 100vw);
  }
  #common-contents #character-06 .charaPic {
    left: calc(290 / 750 * 100vw);
    top: calc(140 / 750 * 100vw);
  }
  #common-contents #character-06 .charaPic img {
    width: calc(543 / 750 * 100vw);
  }
  #common-contents #character-07 h3 img {
    width: calc(215 / 750 * 100vw);
  }
  #common-contents #character-07 .carTxt img {
    width: calc(232 / 750 * 100vw);
  }
  #common-contents #character-07 .carPic {
    left: calc(62 / 750 * 100vw);
    top: calc(373 / 750 * 100vw);
  }
  #common-contents #character-07 .carPic img {
    width: calc(612 / 750 * 100vw);
  }
  #common-contents #character-07 .charaPic {
    left: calc(450 / 750 * 100vw);
    top: calc(160 / 750 * 100vw);
  }
  #common-contents #character-07 .charaPic img {
    width: calc(220 / 750 * 100vw);
  }
  #common-contents #character-08 h3 img {
    width: calc(502 / 750 * 100vw);
  }
  #common-contents #character-08 .carTxt img {
    width: calc(143 / 750 * 100vw);
  }
  #common-contents #character-08 .carPic {
    left: calc(43 / 750 * 100vw);
    top: calc(321 / 750 * 100vw);
  }
  #common-contents #character-08 .carPic img {
    width: calc(673 / 750 * 100vw);
  }
  #common-contents #character-08 .charaPic {
    left: calc(0 / 750 * 100vw);
    top: calc(130 / 750 * 100vw);
  }
  #common-contents #character-08 .charaPic img {
    width: calc(349 / 750 * 100vw);
  }
  #common-contents #character-09 h3 img {
    width: calc(203 / 750 * 100vw);
  }
  #common-contents #character-09 .carTxt img {
    width: calc(207 / 750 * 100vw);
  }
  #common-contents #character-09 .carPic {
    left: calc(52 / 750 * 100vw);
    top: calc(283 / 750 * 100vw);
  }
  #common-contents #character-09 .carPic img {
    width: calc(683 / 750 * 100vw);
  }
  #common-contents #character-09 .charaPic {
    left: calc(300 / 750 * 100vw);
    top: calc(140 / 750 * 100vw);
  }
  #common-contents #character-09 .charaPic img {
    width: calc(467 / 750 * 100vw);
  }
  #common-contents #character-10 h3 img {
    width: calc(283 / 750 * 100vw);
  }
  #common-contents #character-10 .carTxt img {
    width: calc(220 / 750 * 100vw);
  }
  #common-contents #character-10 .carPic {
    left: calc(77 / 750 * 100vw);
    top: calc(388 / 750 * 100vw);
  }
  #common-contents #character-10 .carPic img {
    width: calc(572 / 750 * 100vw);
  }
  #common-contents #character-10 .charaPic {
    left: calc(460 / 750 * 100vw);
    top: calc(145 / 750 * 100vw);
  }
  #common-contents #character-10 .charaPic img {
    width: calc(203 / 750 * 100vw);
  }
  #common-contents #character-11 h3 img {
    width: calc(266 / 750 * 100vw);
  }
  #common-contents #character-11 .carTxt img {
    width: calc(142 / 750 * 100vw);
  }
  #common-contents #character-11 .carPic {
    left: calc(93 / 750 * 100vw);
    top: calc(377 / 750 * 100vw);
  }
  #common-contents #character-11 .carPic img {
    width: calc(625 / 750 * 100vw);
  }
  #common-contents #character-11 .charaPic {
    left: calc(40 / 750 * 100vw);
    top: calc(141 / 750 * 100vw);
  }
  #common-contents #character-11 .charaPic img {
    width: calc(237 / 750 * 100vw);
  }
  #common-contents #character-12 h3 img {
    width: calc(269 / 750 * 100vw);
  }
  #common-contents #character-12 .carTxt img {
    width: calc(213 / 750 * 100vw);
  }
  #common-contents #character-12 .carPic {
    left: calc(20 / 750 * 100vw);
    top: calc(391 / 750 * 100vw);
  }
  #common-contents #character-12 .carPic img {
    width: calc(701 / 750 * 100vw);
  }
  #common-contents #character-12 .charaPic {
    left: calc(446 / 750 * 100vw);
    top: calc(126 / 750 * 100vw);
  }
  #common-contents #character-12 .charaPic img {
    width: calc(285 / 750 * 100vw);
  }
  #common-contents #character-13 h3 img {
    width: calc(440 / 750 * 100vw);
  }
  #common-contents #character-13 .carTxt img {
    width: calc(190 / 750 * 100vw);
  }
  #common-contents #character-13 .carPic {
    left: calc(19 / 750 * 100vw);
    top: calc(290 / 750 * 100vw);
  }
  #common-contents #character-13 .carPic img {
    width: calc(712 / 750 * 100vw);
  }
  #common-contents #character-13 .charaPic {
    left: calc(270 / 750 * 100vw);
    top: calc(150 / 750 * 100vw);
  }
  #common-contents #character-13 .charaPic img {
    width: calc(485 / 750 * 100vw);
  }
  #common-contents #character-14 h3 img {
    width: calc(458 / 750 * 100vw);
  }
  #common-contents #character-14 .carTxt img {
    width: calc(166 / 750 * 100vw);
  }
  #common-contents #character-14 .carPic {
    left: calc(67 / 750 * 100vw);
    top: calc(360 / 750 * 100vw);
  }
  #common-contents #character-14 .carPic img {
    width: calc(658 / 750 * 100vw);
  }
  #common-contents #character-14 .charaPic {
    left: calc(67 / 750 * 100vw);
    top: calc(187 / 750 * 100vw);
  }
  #common-contents #character-14 .charaPic img {
    width: calc(211 / 750 * 100vw);
  }
  #common-contents #character-15 h3 img {
    width: calc(269 / 750 * 100vw);
  }
  #common-contents #character-15 .carTxt img {
    width: calc(225 / 750 * 100vw);
  }
  #common-contents #character-15 .carPic {
    left: calc(38 / 750 * 100vw);
    top: calc(306 / 750 * 100vw);
  }
  #common-contents #character-15 .carPic img {
    width: calc(683 / 750 * 100vw);
  }
  #common-contents #character-15 .charaPic {
    left: calc(292 / 750 * 100vw);
    top: calc(72 / 750 * 100vw);
  }
  #common-contents #character-15 .charaPic img {
    width: calc(548 / 750 * 100vw);
  }

  #character-bg {
    /*
    開始位置
    header  40
    nav ul  82
    h2   padding20*2  img > h225
    tham 250  margin-bottom:200
    */
    top: calc(  (40 + 82 + 225 + 40 + 250 + 200 + 60) / 750 * 100vw);
    height: calc((((750 * 2.5) + 900) *5) / 750 * 100vw);
  }
  #character-bg > div {
    height: calc(((750 * 3) + 900)  / 750 * 100vw);
  }
  #character-bg > div > div {
    height: calc(450 / 750 * 100vw) !important;
    top: calc(50 / 750 * 100vw);
  }
  #character-bg > div > div svg {
    width: 97vw;
    height: calc(450 / 750 * 100vw) !important;
  }
}
@media only screen and (min-width: 751px) {
  #common-contents {
    height: calc((((750 * 2.5) + 900) *5) / 1440 * 100vw);
  }
  #common-contents h2 {
    padding: calc(20 / 1440 * 100vw) 0 calc(20 / 1440 * 100vw) calc(20 / 1440 * 100vw);
  }
  #common-contents h2 img {
    width: calc(720 / 1440 * 100vw);
  }
  #common-contents #contents-thm {
    margin-bottom: calc(200 / 1440 * 100vw);
  }
  #common-contents #contents-thm li {
    height: calc( 290 / 1440 * 100vw);
  }
  #common-contents .teamSet {
    height: calc( (750*3.5) / 1440 * 100vw);
    padding-top: calc(900 / 1440 * 100vw);
    position: relative;
  }
  #common-contents .teamSet > .charaBase:nth-child(2) {
    position: absolute;
    top: calc(1250 / 1440 * 100vw);
    right: 0;
  }
  #common-contents .teamSet > .maskBG {
    			/*
    			position: absolute;
    			top:0;
    			z-index: 0;
    //			background-color: rgba(0,0,255,0);
    			*/
  }
  #common-contents .teamSet > .maskBG svg {
    width: 100vw;
    height: calc(900 / 1440 * 100vw) !important;
  }
  #common-contents .charaBase {
    height: calc( 750 / 1440 * 100vw);
    width: calc(710 / 1440 * 100vw);
    background-size: calc(499 / 1440 * 100vw);
    position: relative;
    z-index: 10;
  }
  #common-contents .charaBase .carTxt {
    bottom: calc(50 / 1440 * 100vw);
  }
  #common-contents .charaBase .charaType {
    top: calc(90 / 1440 * 100vw);
    width: calc(710 / 1440 * 100vw);
  }
  #common-contents .charaBase .charaType img {
    width: 100%;
    height: auto;
  }
  #common-contents .charaBase .carPara {
    top: calc(150 / 1440 * 100vw);
    width: calc(441 / 1440 * 100vw);
  }
  #common-contents .charaBase .carPara img {
    width: 100%;
    height: auto;
  }
  #common-contents .charaBase.layoutRight {
    background-position: top right;
  }
  #common-contents .charaBase.layoutRight h3 {
    right: calc(50 / 1440 * 100vw);
    top: calc(3 / 1440 * 100vw);
  }
  #common-contents .charaBase.layoutRight .carTxt {
    left: calc(40 / 1440 * 100vw);
  }
  #common-contents .charaBase.layoutRight .carPara {
    left: 0;
  }
  #common-contents .charaBase.layoutLeft {
    background-position: top left;
  }
  #common-contents .charaBase.layoutLeft h3 {
    left: calc(20 / 1440 * 100vw);
    top: calc(30 / 1440 * 100vw);
  }
  #common-contents .charaBase.layoutLeft .carTxt {
    right: calc(40 / 1440 * 100vw);
  }
  #common-contents .charaBase.layoutLeft .carPara {
    right: 0;
  }
  #common-contents #character-01 h3 img {
    width: calc(258 / 1440 * 100vw);
  }
  #common-contents #character-01 .carTxt img {
    width: calc(173 / 1440 * 100vw);
  }
  #common-contents #character-01 .carPic {
    left: calc(60 / 1440 * 100vw);
    top: calc(360 / 1440 * 100vw);
  }
  #common-contents #character-01 .carPic img {
    width: calc(639 / 1440 * 100vw);
  }
  #common-contents #character-01 .charaPic {
    left: calc(450 / 1440 * 100vw);
    top: calc(162 / 1440 * 100vw);
  }
  #common-contents #character-01 .charaPic img {
    width: calc(210 / 1440 * 100vw);
  }
  #common-contents #character-02 h3 img {
    width: calc(258 / 1440 * 100vw);
  }
  #common-contents #character-02 .carTxt img {
    width: calc(259 / 1440 * 100vw);
  }
  #common-contents #character-02 .carPic {
    left: calc(40 / 1440 * 100vw);
    top: calc(385 / 1440 * 100vw);
  }
  #common-contents #character-02 .carPic img {
    width: calc(629 / 1440 * 100vw);
  }
  #common-contents #character-02 .charaPic {
    left: calc(80 / 1440 * 100vw);
    top: calc(240 / 1440 * 100vw);
  }
  #common-contents #character-02 .charaPic img {
    width: calc(212 / 1440 * 100vw);
  }
  #common-contents #character-03 h3 img {
    width: calc(331 / 1440 * 100vw);
  }
  #common-contents #character-03 .carTxt img {
    width: calc(211 / 1440 * 100vw);
  }
  #common-contents #character-03 .carPic {
    left: calc(23 / 1440 * 100vw);
    top: calc(324 / 1440 * 100vw);
  }
  #common-contents #character-03 .carPic img {
    width: calc(714 / 1440 * 100vw);
  }
  #common-contents #character-03 .charaPic {
    left: calc(485 / 1440 * 100vw);
    top: calc(173 / 1440 * 100vw);
  }
  #common-contents #character-03 .charaPic img {
    width: calc(242 / 1440 * 100vw);
  }
  #common-contents #character-04 h3 img {
    width: calc(267 / 1440 * 100vw);
  }
  #common-contents #character-04 .carTxt img {
    width: calc(192 / 1440 * 100vw);
  }
  #common-contents #character-04 .carPic {
    left: calc(10/ 1440 * 100vw);
    top: calc(385 / 1440 * 100vw);
  }
  #common-contents #character-04 .carPic img {
    width: calc(709 / 1440 * 100vw);
  }
  #common-contents #character-04 .charaPic {
    left: calc(460 / 1440 * 100vw);
    top: calc(167 / 1440 * 100vw);
  }
  #common-contents #character-04 .charaPic img {
    width: calc(219 / 1440 * 100vw);
  }
  #common-contents #character-05 h3 img {
    width: calc(268 / 1440 * 100vw);
  }
  #common-contents #character-05 .carTxt img {
    width: calc(171 / 1440 * 100vw);
  }
  #common-contents #character-05 .carPic {
    left: calc(45 / 1440 * 100vw);
    top: calc(384 / 1440 * 100vw);
  }
  #common-contents #character-05 .carPic img {
    width: calc(670 / 1440 * 100vw);
  }
  #common-contents #character-05 .charaPic {
    left: calc(60 / 1440 * 100vw);
    top: calc(167 / 1440 * 100vw);
  }
  #common-contents #character-05 .charaPic img {
    width: calc(209 / 1440 * 100vw);
  }
  #common-contents #character-06 h3 img {
    width: calc(225 / 1440 * 100vw);
  }
  #common-contents #character-06 .carTxt img {
    width: calc(186 / 1440 * 100vw);
  }
  #common-contents #character-06 .carPic {
    left: calc(0 / 1440 * 100vw);
    top: calc(418 / 1440 * 100vw);
  }
  #common-contents #character-06 .carPic img {
    width: calc(765 / 1440 * 100vw);
  }
  #common-contents #character-06 .charaPic {
    left: calc(290 / 1440 * 100vw);
    top: calc(140 / 1440 * 100vw);
  }
  #common-contents #character-06 .charaPic img {
    width: calc(543 / 1440 * 100vw);
  }
  #common-contents #character-07 h3 img {
    width: calc(215 / 1440 * 100vw);
  }
  #common-contents #character-07 .carTxt img {
    width: calc(232 / 1440 * 100vw);
  }
  #common-contents #character-07 .carPic {
    left: calc(62 / 1440 * 100vw);
    top: calc(373 / 1440 * 100vw);
  }
  #common-contents #character-07 .carPic img {
    width: calc(612 / 1440 * 100vw);
  }
  #common-contents #character-07 .charaPic {
    left: calc(450 / 1440 * 100vw);
    top: calc(160 / 1440 * 100vw);
  }
  #common-contents #character-07 .charaPic img {
    width: calc(220 / 1440 * 100vw);
  }
  #common-contents #character-08 h3 img {
    width: calc(502 / 1440 * 100vw);
  }
  #common-contents #character-08 .carTxt img {
    width: calc(143 / 1440 * 100vw);
  }
  #common-contents #character-08 .carPic {
    left: calc(43 / 1440 * 100vw);
    top: calc(321 / 1440 * 100vw);
  }
  #common-contents #character-08 .carPic img {
    width: calc(673 / 1440 * 100vw);
  }
  #common-contents #character-08 .charaPic {
    left: calc(0 / 1440 * 100vw);
    top: calc(130 / 1440 * 100vw);
  }
  #common-contents #character-08 .charaPic img {
    width: calc(349 / 1440 * 100vw);
  }
  #common-contents #character-09 h3 img {
    width: calc(203 / 1440 * 100vw);
  }
  #common-contents #character-09 .carTxt img {
    width: calc(207 / 1440 * 100vw);
  }
  #common-contents #character-09 .carPic {
    left: calc(52 / 1440 * 100vw);
    top: calc(283 / 1440 * 100vw);
  }
  #common-contents #character-09 .carPic img {
    width: calc(683 / 1440 * 100vw);
  }
  #common-contents #character-09 .charaPic {
    left: calc(300 / 1440 * 100vw);
    top: calc(140 / 1440 * 100vw);
  }
  #common-contents #character-09 .charaPic img {
    width: calc(467 / 1440 * 100vw);
  }
  #common-contents #character-10 h3 img {
    width: calc(283 / 1440 * 100vw);
  }
  #common-contents #character-10 .carTxt img {
    width: calc(220 / 1440 * 100vw);
  }
  #common-contents #character-10 .carPic {
    left: calc(77 / 1440 * 100vw);
    top: calc(388 / 1440 * 100vw);
  }
  #common-contents #character-10 .carPic img {
    width: calc(572 / 1440 * 100vw);
  }
  #common-contents #character-10 .charaPic {
    left: calc(460 / 1440 * 100vw);
    top: calc(145 / 1440 * 100vw);
  }
  #common-contents #character-10 .charaPic img {
    width: calc(203 / 1440 * 100vw);
  }
  #common-contents #character-11 h3 img {
    width: calc(266 / 1440 * 100vw);
  }
  #common-contents #character-11 .carTxt img {
    width: calc(142 / 1440 * 100vw);
  }
  #common-contents #character-11 .carPic {
    left: calc(93 / 1440 * 100vw);
    top: calc(377 / 1440 * 100vw);
  }
  #common-contents #character-11 .carPic img {
    width: calc(625 / 1440 * 100vw);
  }
  #common-contents #character-11 .charaPic {
    left: calc(40 / 1440 * 100vw);
    top: calc(141 / 1440 * 100vw);
  }
  #common-contents #character-11 .charaPic img {
    width: calc(237 / 1440 * 100vw);
  }
  #common-contents #character-12 h3 img {
    width: calc(269 / 1440 * 100vw);
  }
  #common-contents #character-12 .carTxt img {
    width: calc(213 / 1440 * 100vw);
  }
  #common-contents #character-12 .carPic {
    left: calc(20 / 1440 * 100vw);
    top: calc(391 / 1440 * 100vw);
  }
  #common-contents #character-12 .carPic img {
    width: calc(701 / 1440 * 100vw);
  }
  #common-contents #character-12 .charaPic {
    left: calc(446 / 1440 * 100vw);
    top: calc(126 / 1440 * 100vw);
  }
  #common-contents #character-12 .charaPic img {
    width: calc(285 / 1440 * 100vw);
  }
  #common-contents #character-13 h3 img {
    width: calc(440 / 1440 * 100vw);
  }
  #common-contents #character-13 .carTxt img {
    width: calc(190 / 1440 * 100vw);
  }
  #common-contents #character-13 .carPic {
    left: calc(19 / 1440 * 100vw);
    top: calc(290 / 1440 * 100vw);
  }
  #common-contents #character-13 .carPic img {
    width: calc(712 / 1440 * 100vw);
  }
  #common-contents #character-13 .charaPic {
    left: calc(270 / 1440 * 100vw);
    top: calc(150 / 1440 * 100vw);
  }
  #common-contents #character-13 .charaPic img {
    width: calc(485 / 1440 * 100vw);
  }
  #common-contents #character-14 h3 img {
    width: calc(458 / 1440 * 100vw);
  }
  #common-contents #character-14 .carTxt img {
    width: calc(166 / 1440 * 100vw);
  }
  #common-contents #character-14 .carPic {
    left: calc(67 / 1440 * 100vw);
    top: calc(360 / 1440 * 100vw);
  }
  #common-contents #character-14 .carPic img {
    width: calc(658 / 1440 * 100vw);
  }
  #common-contents #character-14 .charaPic {
    left: calc(67 / 1440 * 100vw);
    top: calc(187 / 1440 * 100vw);
  }
  #common-contents #character-14 .charaPic img {
    width: calc(211 / 1440 * 100vw);
  }
  #common-contents #character-15 h3 img {
    width: calc(269 / 1440 * 100vw);
  }
  #common-contents #character-15 .carTxt img {
    width: calc(225 / 1440 * 100vw);
  }
  #common-contents #character-15 .carPic {
    left: calc(38 / 1440 * 100vw);
    top: calc(306 / 1440 * 100vw);
  }
  #common-contents #character-15 .carPic img {
    width: calc(683 / 1440 * 100vw);
  }
  #common-contents #character-15 .charaPic {
    left: calc(292 / 1440 * 100vw);
    top: calc(72 / 1440 * 100vw);
  }
  #common-contents #character-15 .charaPic img {
    width: calc(548 / 1440 * 100vw);
  }

  #character-bg {
    /*
    開始位置
    header  40
    nav ul  82
    h2   padding20*2  img > h225
    tham 250  margin-bottom:200
    */
    top: calc(  (40 + 82 + 225 + 40 + 250 + 200 + 60) / 1440 * 100vw);
    height: calc((((750 * 2.5) + 900) *5) / 1440 * 100vw);
  }
  #character-bg > div {
    height: calc(((750 * 2.3) + 900)  / 1440 * 100vw);
  }
  #character-bg > div > div {
    height: calc(900 / 1440 * 100vw) !important;
  }
  #character-bg > div > div svg {
    width: 98vw;
    height: calc(900 / 1440 * 100vw) !important;
  }
}