@charset "utf-8";
/*--基本--*/
:root{
	--font-size:15px;
	--max-width:1200px;
	--color: #333333;/*文字色*/
	--color-hover: #df548d;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --sub-color:#57a4ad;
  --lang-active: #df548d;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn:#df548d;/*ボタンの色*/
  --btn-hover:#fff;/*ボタンの色:hover*/
  --btn-color:#fff;/*ボタンの文字色*/
  --btn-color-hover:#df548d;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:100px;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
}

/* @media screen and (max-width: 1200px){
	:root{
        --font-size:12px;
    }
}
 */
@media screen and (max-width: 768px){
	:root{
      --font-size:15px;
      --btn-max-w:100%;/*ボタンの最大幅*/
    }
}



.swiper-slide{border-radius: 10px; line-height: 0;overflow: hidden;}
.swiper-slide a{line-height: 0;}
/*---------
　Font
---------*/
/*Noto Sans Japanese・Noto Serif Japanese以外はここに記載。**/
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

-----------*/
.cnt{width: 95%; max-width: 1700px; margin: 300px auto;}
a.btn{border-color:var(--btn);padding: 1.2em 2.5em; }
a.btn::after {content: "";position: absolute;top: calc(50% - .3em);right: 1.5em;width: .5em;height: .5em;background: none;border: 1px solid var(--btn-color);border-width: 2px 2px 0 0; clip-path:none;transform: rotate(45deg);
}
a.btn:hover::after{background: none; border-color: var(--btn);}

a.btn .small{display: none;}

.inner{max-width: 1500px; width: 100%; margin: 0 auto; position: relative;}
/*-----------
body
-----------*/
body{background: #fff; background-size: 2000px auto; background-position: center top;}
/* .font_notosans-jp{font-weight: 400;} */

.bg{background-image: url("../images/bg.jpg");
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat
}

/*-----------
mv
-----------*/
#mv{padding-top: 50px;}
#mv .inner{max-width: 2000px; margin: 0 auto; width: 100%;}
#mv .text_wrap{width: 43%;position: absolute; left: 5%;top: 25%;}
#mv .mv_img {width: 50%; margin-left: 45%;}
#mv h1{line-height: 1;}
#mv .btn{margin-top: 2em;}


/*-----------
header
-----------*/
header .inner{align-items:flex-start;margin: 0 auto; max-width: 2000px; width: 100%;}
header .language{padding: .7em 1.5em .6em; background: var(--color); border-radius: 100px; color: #fff; margin-left: auto;font-size: 12px; }
header .language li{line-height: 1; padding: .25em 0;}
header .language li:first-of-type{margin-right: .5em;}
header .language li a{display: block; border-right:1px solid #fff; color: #fff; padding:0 .5em;}
header .language li a:hover{text-decoration: none;}
header .language li:last-of-type a{border: none; padding-right: 0;}

.menu_sp{display: none;}

.fabs {top: 0;margin:0 0 1em .5em;right: 0;z-index: 100;}
.fab {display: block;width: 36px; height: 36px;border-radius: 50%;text-align: center;color: white;margin: 0 auto 15px;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.fab > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.fab.share {background: var(--color);}
.fab:active,
.fab:focus,
.fab:hover {box-shadow: 0 0 4px rgba(255, 255, 255, .14), 0 4px 8px rgba(255, 255, 255, .28);}
.fab:not(:first-child) {width: 2em; height: 2em;margin: 10px auto 0;opacity: 0;}
.fab:not(:first-child) > i {font-size: 18px;line-height: 40px;transition: all .3s ease-in-out;}
.fabs:hover .fab:not(:first-child) {opacity: 1;width: 2em; height: 2em;margin: 10px auto 0;}
.fab:nth-last-child(1) {-webkit-transition-delay: 25ms;transition-delay: 25ms;}
.fab:not(:last-child):nth-last-child(2) {-webkit-transition-delay: 20ms;transition-delay: 20ms;}
.fab:not(:last-child):nth-last-child(3) {-webkit-transition-delay: 40ms;transition-delay: 40ms;}
.fab:not(:last-child):nth-last-child(4) {-webkit-transition-delay: 60ms;transition-delay: 60ms;}
.fab:not(:last-child):nth-last-child(5) {-webkit-transition-delay: 80ms;transition-delay: 80ms;}

/*-----------
lead
-----------*/
#lead .inner{width: 90%;}
#lead p{text-align: center; margin: 5em 0 0; font-size: 1.2em;text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;}
#lead ul.flex{justify-content: space-between; margin-top:10em;}
#lead li{position: relative;}
#lead li.evolution01{width:23.83%;}
#lead li.evolution02{width:25%;}
#lead li.evolution03{width:27.33%;}
#lead li.evolution02::after,
#lead li.evolution03::after{content: "";display: block;  height: 7em; position: absolute; top: -7em;}
#lead li.evolution02::after{background: url(../images/evolution_icon02.png) no-repeat;background-size: 100% auto;width: 25.33%;background-position: center bottom;left: 35%;}
#lead li.evolution03::after{background: url(../images/evolution_icon03.png) no-repeat;width: 28.96%;background-position: center bottom;background-size: 100% auto; left: 35%;}

#lead li.evolution01::before,
#lead li.evolution02::before{content: ""; display: block; position: absolute; right: -45%; top: 45%; width: 42%; height: 1px; border: 3px dotted #df548d; border-width: 10px 0 0 0;opacity: 0;}

#lead li h3{line-height: 1;margin: 0 auto;}
#lead li.evolution01 h3{width: 52.79%;}
#lead li.evolution02 h3{width: 67%;}
#lead li.evolution03 h3{width: 63.41%;}

#evolution li.window-scroll.up:nth-child(1){transition-delay: 0s;}
#evolution li.window-scroll.up:nth-child(2){transition-delay: 0.5s;}
#evolution li.window-scroll.up:nth-child(3){transition-delay: 1s;}

#lead li.evolution01.window-scroll.up::before{transition-delay: 0.25s;opacity: 1;}
#lead li.evolution02.window-scroll.up::before{transition-delay: 0.75s;opacity: 1;}

/*----------
point
-----------*/
#point h2{width: 65.33%; max-width: 980px; margin: 300px auto 0;}
#point h2.en{width: 95%; max-width: 1197px;}
#point h2.zh{width: 66%; max-width: 794px;}
#point .box_wrap{width: 50%; margin-left: 50%;position: relative; z-index: 50; margin-top: 5%;}
#point .box a{line-height: 0; border-radius: 25px; border: 5px solid #6eb8cf; overflow: hidden;}
#point .box p{margin-top: 1em; text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;}
#point .box p span{font-size: .8em;}

#point h2 {position: relative;}
#point h2.up::before {content: '';position: absolute;top: -107%;left: 51%;width: 15%;height: 100%;background: url("../images/point_ttl_icon.png") no-repeat;background-size: contain;background-position: center bottom;animation: fan-wipe 1s ease-out forwards;
}
#point h2.en.up::before{left: 84%;}
#point h2.zh.up::before{left: 50%;}
.container{position: relative;}
.illust_bg {background: url(../images/point_img_illust.png) no-repeat;   position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: 23% 10px;}
.illust_bg.fixd{position: fixed !important;height: 100vh}
.illust_bg.bottom{background-position: 23% bottom; top: auto; bottom: 0;}
/*----------
characters
-----------*/
#characters{position: relative; z-index: 10;}
#characters h2{width: 57.6%; max-width: 864px; margin: 200px auto 0;}
#characters h2.en{width: 64%; max-width: 744px;}
#characters h2.zh{width: 55%; max-width: 735px;}
#iaprocharacters_img{width: 79.46%; margin: 50px auto 0; position: relative;}
#iaprocharacters_img.en{margin-top: 25px;}
#iaprocharacters_img .img_a,
#iaprocharacters_img .img_b{position: absolute; left: 0; top: 0;animation: change1 15s infinite; background-position: center bottom; opacity: 1;}
#iaprocharacters_img .img_b{animation: change2 15s infinite; opacity: 0;}

@keyframes change1 {
  0%{ opacity: 1;}
  50%{ opacity: 1;}
  75%{ opacity: 0;}
  100%{ opacity: 1;}
}

@keyframes change2 {
  0%{ opacity: 0;}
  50%{ opacity: 0;}
  75%{ opacity: 1;}
  100%{ opacity: 0;}
}


#characters p{text-align: center;}
#characters p.lead{font-size: 1.2em; margin-top: 31%;}
#characters p.lead span{font-weight: 600; font-size: 1.5em;}
#characters .content p{text-align: left;}
#characters .content p.otoku{width:70%; margin: 3em auto 2em;}
#characters .content p.otoku.en{max-width:756px;}
#characters .content p.otoku.zh{max-width:100%; color: var(--sub-color); font-size: 2em; font-weight: 700; text-align: center;}
#characters .content h4{font-size: 1.5em; position: relative; color: var(--sub-color);}
#characters .content h4:last-of-type {align-items:center; margin-top: 2em;}
#characters .content h4:first-of-type img{width: 1.8em;}
#characters .content h4:last-of-type img{width: 1.3em; margin-top: -.5em;}
#characters .content h4 span{margin-left: .5em;}
#characters .content h4 + p{margin-top: 1em; font-size: 1.3em;}
#characters .content ul {margin:2em 0 0 -25px;}
#characters .content ul li{width: calc((100% / 3) - 25px); margin-left: 25px;position: relative; font-size: 1.2em;}
#characters .content ul li.bonus:after{content: ""; display: block; width: 5em; height: 5em; background: url(../images/icon_boxbonus.png) no-repeat; top: -2em; right: -1em; position: absolute;background-size: 100% auto;}
#characters .content ul li.bonus.zh:after{content: ""; display: block; width: 5em; height: 5em; background: url(../images/icon_boxbonus_zh.png) no-repeat; top: -2em; right: -1em; position: absolute;background-size: 100% auto;}
#characters .content ul li.bonus.en:after{content: ""; display: block; width: 5em; height: 5em; background: url(../images/icon_boxbonus_en.png) no-repeat; top: -2em; right: -1em; position: absolute;background-size: 100% auto;}
#characters .content ul li img{border-radius: 20px;}

#characters .content{background: #fff; border-radius: 50px; padding: 50px; position: relative; max-width: 1200px; width: 90%; margin: 5em auto;}
#characters .content::before{content: ""; position: absolute; top: 0; left: 0;border-radius: 50px; display: block;width: 100%; height: 100%; box-sizing: 0 10px 10px rgba(0, 0, 0, 0.16); z-index: -1;}

@supports (-webkit-filter: blur(20px)) {
  #characters .content::before {
    background-image: linear-gradient(135deg, #667fff 0,#ff7373 25%, #26b0b0 50%, #ffe400 75%, #f693ff 100%);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    box-shadow: none;
  }
}

#characters h2 {position: relative;}
#characters h2.up::before {content: '';position: absolute;top: -105%;left: 23%;width: 15%;height: 100%;background: url("../images/point_ttl_icon.png") no-repeat;background-size: contain;background-position: center bottom;animation: fan-wipe 1s ease-out forwards;
}
#characters h2.en.up::before{left: 81%;}
#characters h2.zh.up::before{left: 50%;}
#characters li.window-scroll.up:nth-child(1){transition-delay: 0s;}
#characters li.window-scroll.up:nth-child(2){transition-delay: 0.5s;}
#characters li.window-scroll.up:nth-child(3){transition-delay: 1s;}

/*----------
basic
-----------*/
#basic{background: url(../images/basic_bg.jpg)  #ffd8e8; padding: 100px 0; margin-top: 200px;}
#basic .inner{max-width: 1200px; width: 90%; margin: 0 auto;}
#basic h2{width: 67.86%; margin: 0 auto;}
#basic h2.en{width: 90%; max-width: 1222px;}
#basic h2.zh{width: 88%; max-width: 709px;}
#basic h3{font-size: 3em; font-weight: 900; line-height: 1.4;}
#basic h3 br.small{display: none;}
#basic .product{margin-top: 2em;}
#basic .product img{width: 41.66%; border-radius: 30px; border: 5px solid #fff;}
#basic .product .text_warap{width: calc((100% - 41.66%) - 2em); margin-left: 2em;}
#basic .product .text_warap a.btn{margin: 2em 0 0 0;}
#basic .product .text_warap ul{font-size: 1.5em; margin-top: 1em; font-weight: 500;}
#basic .aboutbasic{background: #fff; border-radius: 30px; margin: 3em auto 0; padding: 50px;}
#basic .aboutbasic .flex{align-self: center;}
#basic .aboutbasic img{width: 20%;}
#basic .aboutbasic h4{font-size: 1.5em; font-weight: 700;}
#basic .aboutbasic .text_wrap{width: calc(80% - 2em); margin-left: 2em;}
#basic .aboutbasic .btn{background: #f39801;border-color: #f39801; margin-top: 3em;}
#basic .aboutbasic .btn:hover{color: #f39801; background: #fff;}
#basic .aboutbasic .btn:hover::after{border-color: #f39801;}

/*-----------
product
-----------*/
#product{background: #fff; padding: 5em 0;}
.product_list{width: 90%; max-width: 1200px; margin: 0 auto; }
.product_list .inner{width: 100%; align-items: stretch; gap: 60px 40px;}
.product_list .inner .box{width: calc((100% - 80px) / 3); line-height: 1; display: flex; flex-direction: column;}
.product_list .inner .box figure{padding-bottom: 2.5em;}
.product_list .inner .box figcaption{font-size: 1.2em; font-weight: 500; margin-top: 1em; line-height: 1.4;}
.product_list .inner .box img{border-radius: 20px; border: 3px solid #57a4ad;}
.product_list .inner .box a.btn{width: 100%; margin-top: auto; background: #57a4ad; border-color: #57a4ad;}
.product_list .inner .box a.btn.cs{position: relative; }
.product_list .inner .box a.btn:hover{background: #fff;}
.product_list .inner .box a.btn:hover{color: #57a4ad;}
.product_list .inner .box a.btn:hover::after{border-color: #57a4ad;}
.product_list .inner .box a.btn.cs::before{content: "＼近日予約開始／";position: absolute;top: -1.5em; left: 0; width: 100%; color: var(--btn);font-size: 1.2em; font-weight: 500;}
.product_list .inner .box a.btn.cs.en::before{content: "＼Preorders Coming Soon／";}
.product_list .inner .box a.btn.cs.zh::before{content: "＼預定近期開放預購／";}

.product_list .box.window-scroll.up:nth-child(1),
.product_list .box.window-scroll.up:nth-child(4),
.product_list .box.window-scroll.up:nth-child(7){transition-delay: 0s;}
.product_list .box.window-scroll.up:nth-child(2),
.product_list .box.window-scroll.up:nth-child(5),
.product_list .box.window-scroll.up:nth-child(8){transition-delay: 0.5s;}
.product_list .box.window-scroll.up:nth-child(3),
.product_list .box.window-scroll.up:nth-child(6),
.product_list .box.window-scroll.up:nth-child(9){transition-delay: 1s;}

/*-----------
aside
-----------*/
aside,footer{background: #333333; color: #fff;padding: 2em 0 0 0;}
aside .social{justify-content: center; max-width: 500px; margin: 3em auto 0;}
aside .social li{width: 40px; margin: .5em .25em 0;}
aside .social .text{width: 100%;text-align: center;}

/*-----------
footer
-----------*/
footer{border: none; padding: 3em 0 5em; }
footer .logo_wrap{margin: 0 auto 1.5em; justify-content: center;}
footer .copyright{text-align: center;}

/*-----------
共通アニメーション
-----------*/
@keyframes fan-wipe {
  from {
    clip-path: circle(0% at 0% 50%);
  }
  to {
    clip-path: circle(150% at 0% 50%);
  }
}


/*-----------
scroll
-----------*/


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

  /*-----------
  mv
  -----------*/
  #mv{padding-top: 60px;}
  #mv .inner{max-width:100%;width: 100%; overflow: hidden;}
  #mv .text_wrap{ width: 45%;}
  #mv .mv_img { width: 60%; margin-left: 42%;}
  #mv .btn{width: 100%;}


  /*----------
  point
  -----------*/
  #point h2{margin-top: 5em;}
  #point .illust_bg{background-position: 9% 0;}
  #point .illust_b.bottom{background-position: 9% bottom;}


  /*----------
  characters
  -----------*/
  #iaprocharacters_img{margin-top: 3%;}
  #iaprocharacters_img.en{margin-top: 1.5%;}
  #characters .content p.otoku{width: 80%;}
  #characters .content h4{font-size: 1.2em;}
  #characters .content h4 + p,
  #characters .content ul li{font-size: 1.1em;}

}

@media screen and (max-width: 1024px){
  a.btn .small{display: block;}
  #point .illust_bg{background-position: 13% 10%;}
  #point .illust_bg.illust_bg.bottom{background-position: 13% bottom;}

  .product_list .inner .box a.btn.cs.en::before{font-size: .9em;}

}

@media screen and (max-width: 820px)and (device-width: 820px) 
  and (device-height: 1180px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) 
  and (hover: none) 
  and (pointer: coarse) {
  #point .illust_bg{background-position: -50% 10%;}
  #point .illust_bg.illust_bg.bottom{background-position: -50% 0;}
}

@media screen and (max-width: 768px){
  .bg{background-size: 100% auto; background-image: url(../images/bg_sp.jpg);}
  a.btn{font-size: 1em; padding: 1.2em 2.5em 1.2em 2em;}
  /*-----------
  header
  -----------*/
  header.flex{padding-right: 1%;}
  header.absolute{padding: 0;}
  header .inner{padding: 10px;}
  .btn_nav{display: flex; background: #57a4ad;width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center;}
  .btn_nav.active{background: #fff;}
  .btn_nav:hover{cursor: pointer;}
  .btn_nav span{width: 80%; height: 2px; background: #fff; display: flex; position: relative; align-items: center;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background: #fff;position: absolute;transition: all 0.2s linear;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: 261951all 0.2s linear; background: #57a4ad;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear; background: #57a4ad;}
  .btn_nav.active span{background: #ffffff00;}

  .menu_sp{background: #57a4ad; width: 100%; height:100vh; position: absolute; top: 0; left: 0; transition: all 0.2s linear; display: flex; opacity: 0; z-index: -1;pointer-events: none; flex-direction: column; justify-content: center;}
  .menu_sp.active{top: 0;transition: all 0.2s linear; opacity: 1; z-index: 100;pointer-events: auto;}

  .menu_sp .language_sp{text-align: center; flex-wrap: wrap;justify-content: center;}
  .menu_sp .language_sp li{padding: 0 2em; border: 1px var(--color) solid; border-width: 0 1px 0 0;line-height: 1;}
  .menu_sp .language_sp li a{color: var(--color);}
  .menu_sp .language_sp li:first-child{width: 100%; margin-bottom: 1em;border: none; color: var(--color);}
  .menu_sp .language_sp li:last-child{border-right: none;}
  .menu_sp .language_sp li.active a{color: #e3007f;}

  .fabs_sp{margin-top: 2em; justify-content: center;}
  .fabs_sp p{width: 100%; text-align: center;color: var(--color); margin-bottom: 1em;}
  .fabs_sp a{width: 40px; margin: .5em .5em 0; line-height: 1;}
  .fabs_sp .fab{opacity: 1; margin: 0 .5em;}
  .language,.fabs{display: none;}

  /*-----------
  mv
  -----------*/
  #mv .text_wrap{width: 80%;position: relative; margin: -5% auto 0; top: auto; left: auto;}
  #mv .mv_img {width: 110%; margin-left: -5%;}

  /*-----------
  lead
  -----------*/
  #lead p{text-align: center; margin-top: 5em; font-size: 1em;}
  #lead ul.flex{flex-direction: column; justify-content: center; align-items: center; margin-top:2em;}
  #lead li{position: relative; margin-bottom: 250px;}
  #lead li.evolution01{width:80%; max-width: 286px;}
  #lead li.evolution02{width:82%; max-width: 300px;}
  #lead li.evolution03{width:84%; max-width: 328px; margin-bottom: 0;}
  #lead li.evolution02::after,
  #lead li.evolution03::after{height: 10em;top: -10em;}
  #lead li.evolution02::after{left: 36%;}
  #lead li.evolution01::before,
  #lead li.evolution02::before{content: ""; display: block; position: absolute; right: calc(50% - 5px); top: auto; bottom: -120px; width: 1px; height: 100px; border: 3px dotted #df548d; border-width: 0 10px 0 0;opacity: 0;}
  #lead li.evolution01::before{bottom: -145px; height: 130px;}

  #evolution li.window-scroll.up:nth-child(1),
  #evolution li.window-scroll.up:nth-child(2),
  #evolution li.window-scroll.up:nth-child(3),
  #lead li.evolution01.window-scroll.up::before,
  #lead li.evolution02.window-scroll.up::before{transition-delay: inherit;opacity: 1;}

  /*----------
  point
  -----------*/
  #point h2{width: 90%;}
  /* #point .illust_bg{background-position: -15% 10px;}
  #point .illust_bg.illust_bg.bottom{background-position: -15% bottom;} */

  /*-----------
  product
  -----------*/
  .product_list .inner{gap:40px 20px;}
  .product_list .inner .box{width: calc((100% - 20px) / 2); }
  .product_list .inner .box a.btn.cs.en::before{font-size: 1em;}

  .product_list .box.window-scroll.up:nth-child(1),
  .product_list .box.window-scroll.up:nth-child(3),
  .product_list .box.window-scroll.up:nth-child(5),
  .product_list .box.window-scroll.up:nth-child(7),
  .product_list .box.window-scroll.up:nth-child(9){transition-delay: 0s;}
  .product_list .box.window-scroll.up:nth-child(2),
  .product_list .box.window-scroll.up:nth-child(4),
  .product_list .box.window-scroll.up:nth-child(6),
  .product_list .box.window-scroll.up:nth-child(8),
  .product_list .box.window-scroll.up:nth-child(10){transition-delay: 0.5s;}

  /*----------
  characters
  -----------*/
  #characters h2{width: 90%;}
  #characters h2.en{width: 90%;}
  #characters h2.en.up::before {left: 76%;}
  #characters p.lead{width: 90%; margin: 40% auto 0; font-size: 1em;}
  #iaprocharacters_img{width: 95%;}
  #characters .content ul li{width: calc((100% / 2) - 25px);}
  #characters .content ul li:nth-child(3){ margin-top: 3em;}
  #characters .content p.otoku{width: 100%;}
  #characters .content a.btn{width: 100%;}
  #characters .content{padding: 30px 25px; margin-top: 2.5em;}

  /*----------
  basic
  -----------*/
  #basic h2{width: 100%; margin: 0 auto;}
  #basic h3{font-size: 2.5em;}
  
  #basic .product{flex-direction: column;justify-content: center; align-items: center;}
  #basic .product img{width: 80%; max-width: 500px;}
  #basic .product .text_warap{width: 100%; margin-left: 0;}
  #basic .product .text_warap h3{text-align: center; margin-top: .5em;}
  #basic .product .text_warap ul{display: flex; justify-content: center;}
  #basic .product .text_warap ul li:first-child{margin-right: 1em;}
  #basic .aboutbasic .flex{flex-direction: column; justify-content: center; align-items: center;}
  #basic .aboutbasic{padding: 30px 25px;}
  #basic .aboutbasic h4{font-size: 1.2em;}
  #basic .aboutbasic .logo_basic{width: 60%; max-width: 285px;}
  #basic .aboutbasic .text_wrap{ margin-left: 0; margin-top: 2em; width: 100%;}
  #basic .product .text_warap a.btn{width: 100%; max-width: 100%; margin: 2em auto 0;}
  #basic .aboutbasic .btn{width: 100%;}
  

}

@media screen and (max-width: 600px){
  a.btn{font-size: .9em;}

  /*----------
  lead
  -----------*/
  #lead p{text-align: left;}
  #lead p br{display: none;}

  /*----------
  basic
  -----------*/
  #basic{margin-top: 50px; padding: 50px 0;}
  #basic h2.zh{width: 100%; max-width: 709px;}
  #basic h3{font-size: 2.2em;font-weight: 700;}
  #basic h3 br.small,
  #basic .btn br.small{display: block;}
  #basic .product .text_warap ul{font-size: 1.1em;}
  #basic .aboutbasic .btn{margin-top: 1em;}
  
  /*----------
  point
  -----------*/
  #point .illust_bg{background-image: none;}
  #point .box_wrap{width: 80%; margin: 0 auto;}
  #point .box{margin-left: 0;}
  #point h2.up::before {left: 70%;width: 25%;}
  #point h2.en.up::before {left: 75%; top:-70%; width: 25%;}
  #point h2.zh.up::before{left: 74%;}


  /*-----------
  characters
  -----------*/
  #characters p.lead{text-align: left;}
  #characters p.lead br,
  #characters p.lead br.dmall{display: none;}
  #characters .content ul{flex-direction: column; margin-left: 0; margin-top: .5em;}
  #characters .content ul li{width: 100%; margin-left: 0; margin-top: 2em;}
  #characters .content ul li:first-of-type{margin-top: 0;}
  #characters .content h4 + p,
  #characters .content ul li{font-size: 1em;}
  #characters h2.zh{width: 60%; }
  #characters h2.up::before {left: 38%;width: 25%}
  #characters h2.zh.up::before {left: 38%;}

  #characters li.window-scroll.up:nth-child(1),
  #characters li.window-scroll.up:nth-child(2),
  #characters li.window-scroll.up:nth-child(3){transition-delay: 0s;}

  /*-----------
  product
  -----------*/

  .product_list{width: 80%;}
  .product_list .inner{margin-left: 0;}
  .product_list .inner .box{width:100%; margin: 2em auto 0;}
  .product_list .inner .box figure{padding-bottom: 0;}
  .product_list .inner .box a.btn{margin-top: 1em;}
  .product_list .inner .box a.btn.cs{margin-top: 2.5em;}

  .product_list .box.window-scroll.up:nth-child(1),
  .product_list .box.window-scroll.up:nth-child(2),
  .product_list .box.window-scroll.up:nth-child(3),
  .product_list .box.window-scroll.up:nth-child(4),
  .product_list .box.window-scroll.up:nth-child(5),
  .product_list .box.window-scroll.up:nth-child(6),
  .product_list .box.window-scroll.up:nth-child(7),
  .product_list .box.window-scroll.up:nth-child(8),
  .product_list .box.window-scroll.up:nth-child(9),
  .product_list .box.window-scroll.up:nth-child(10){transition-delay: 0s;}

}

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

}