@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@800&display=swap');
/*header*/
header .br-logo-wrapper img{
   margin: 0 0 0 17px;
   width: 241px;
}
header{
   top: -60px;
   transition: .5s;
   background: unset;
   background-color: rgba(255, 255, 255, .85);
   box-shadow: none;
}
.ai-models-wrapper{
   position: absolute;
   top: calc(50% + 3px);
   color: #777;
   transform: translateY(-50%);
   left: calc(100% + 15px);
   width: calc(100% * 2);
   display: flex;
   flex-direction: column;
   gap: 2px;
}
.image-generation-home .text.ai-models{
   display: none;
}
.ai-models {
   display: flex;
   flex-wrap: wrap;
   font-size: 12px;
   gap: 0 10px;
   padding: 0;
}
.ai-models li{
   line-height: 15px;
}
.ai-models li:not(:last-of-type)::after{
   content: '/';
   position: absolute;
   top: 50%;
   right: -8px;
   transform: translateY(-50%);
}
.crowns ul.note li {
   line-height: 16px;
}
mark{
   background: none;
}
.logo-menus .br-logo-wrapper img{
   margin: 12px 0 0 24px;
   height: 48px;
}
.atgp-01{
   position: relative;
   opacity: 0;
   overflow: hidden;
}
.atgp-01.displayed{
   animation: bg-extend 1s forwards;
}
.atgp-01.displayed::before {
   background: linear-gradient(90deg, rgba(253, 228, 5, 0.3) 0%, rgba(201, 127, 21, 0.5) 40%, rgba(207, 23, 17, 0.2) 70%, rgb(246 251 252 / 10%) 100%);
   animation: bg-extend-2 1s forwards;
   content: '';
   position: absolute;
   top: -10px;
   width: 100%;
   height: calc(100% + 20px);
   z-index: 2;
}
.atgp-02{
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 0 40px;
}
.atgp-02{
   position: relative;
   z-index: 1;
   opacity: 0;
}
.atgp-02.displayed{
   animation: bg-extend 1s forwards;
   animation-delay: .5s;
}
.ai-tools-grand-prix-wrapper{
   margin: 3px auto 5px;
   display: flex;
   justify-content: center;
}
.ai-tools-grand-prix-logo{
   width: 110px;
   object-fit: contain;
}
.ai-tools-grand-prix-wrapper p{
   font-size: 25px;
   margin: 0;
   font-weight: bold;
   font-family: 'roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', sans-serif;
   background: linear-gradient(-40deg, #a05513 0%, #c77c0c 46%, #f5ca67 60%, #c77c0c 76%, #a05513 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-align: center;
}
.promo-box{
   position: relative;
}
.tv-w{
   width: 21px;
   transform: translateY(-1px);
}
.grand-prize{
   font-size: 1.5em;
}
.ai-tools-grand-prix-wrapper .exclamation-mark {
   font-size: 1.3em;
   font-style: italic;
   margin-left: -6px;
}
.top-msg2 .exclamation-mark {
    font-size: 1.1em;
    font-style: italic;
    margin-left: -1px;
}
.news-wrapper{
   display: flex;
   justify-content: center;
   align-items: flex-end;
}
.news{
   margin: 3px 15px 12px 70px;
   color: #fff;
   font-weight: bold;
   font-size: 21px;
   position: relative;
}
.news::before{
   content: url(../images/top/news.svg);
   position: absolute;
   top: calc(50% + 1px);
   transform: translateY(-50%) rotate(-12deg);
   left: -54px;
   width: 40px;
}
.news span{
   font-size: 1.6em;
   color: #fcff95;
   margin: 0 7px;
}
#news{
   display: flex;
   align-items: center;
   justify-content: center;
   display: none; /*表示の際は外す*/
   position: absolute;
   top: 18px;
   font-size: 16px;
   background-color: #000;
   color: #fcff8b;
   z-index: 10;
   left: 18px;
   border-radius: 7px;
   height: 95px;
}
.about-users>span{
   color: #feffd5;
}
#news>p{
   margin: 0;
   padding: 0 20px;
}
.about-users{
   text-align: center;
   font-size: 35px;
   font-weight: bold;
    margin: 120px 0 80px;
}
.about-users>span{
   font-size: 1.2em;
}

html{
   overflow-x: hidden;
}
ul, ol{
   list-style-type:none;
}
#spMenuBtn-at1stV{
   display: none;
}
.emp{
   font-size: 25px;
   margin: 0 3px;
   display: inline-block;
}
.desc-01 .emp{
   color: #409e95;
}
.desc-02 .emp{
   color: #2aa160;
}
.desc-03 .emp{
   color: #f78c31;
}
.exclamation{
   font-style: italic;
   margin-left: 5px;
}
.functions .emp{
   color: #f8ffc0;
   font-size: 1em;
   font-weight: bold;
   display: inline;
}
.functions li::before{
   content: '';
   position: absolute;
   background-color: #e3f35f;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: -14px;
}
.image-sub-title-models{
   font-size: 18px;
}
.about-image-ai-models{
   padding-bottom: 100px;
}
.about-image-ai-models table{
   margin: 15px 0 0 0;
}
.about-image-ai-models th{
   font-weight: normal;
   text-align: left;
   min-width: 190px;
}
.about-image-ai-models tr{
   display: block;
   padding: 10px 15px;
   border-bottom: 1px dotted #57605f;
}
.about-image-ai-models
.view-more-wrapper a[target="_blank"]:not(.no-icon)::after{
   position: absolute;
   right: -26px;
   top: calc(50% - 3px);
   transform: translateY(-50%);
}
h3{
   font-family:'roboto','Noto Sans JP','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', sans-serif;
}

/*------------------------------------------------------------------
header
------------------------------------------------------------------*/
.header-nav-wrapper.app{
   margin-right: 10px;
   display: flex;
   gap: 7px;
}

/*------------------------------------------------------------------
top-entry
------------------------------------------------------------------*/
.top section{
   position: relative;
}
.to-login{
   position: relative;
}
.to-login::before{
   content: '';
   position: absolute;
   display: block;
   height: 16px;
   width: 1px;
   top: 50%;
   transform: translateY(-50%);
   left: -9px;
   background-color: #246ab1;
}
.to-login::after{
   content: '';
   position: absolute;
   display: block;
   height: 7px;
   width: 1px;
   top: calc(50% + 4px);
   left: -11px;
   transform: translateY(-50%) rotate(-24deg);
   background-color: #246ab1;
}
.announcement{
   background-color: rgba(0, 0, 0, .7);
   color: #fff;
   padding: 20px 50px;
   z-index: 10;
   font-size: 20px;
   font-weight: bold;
   position: fixed;
   top: 46%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0,0,0, .3);
}
.bg{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-image: url(../images/mv-03.webp);
   background-repeat: no-repeat;
   background-size: cover;
   animation: top-bg 7s ease-in-out infinite;
}
@keyframes top-bg{
   0%{ transform: scale(1.5); filter: brightness(1);}
 50%{ transform: scale(1); filter: brightness(1.05);}
 100%{ transform: scale(1.5); filter: brightness(1);}
}
.bg::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, .1);
   backdrop-filter: blur(3px) brightness(105%);
   filter: blur(20px);
}
.top-entry{
   display: flex;
   align-items: center;
   overflow-x: hidden;
   gap: 130px;
   min-height: 100vh;
   padding: 0 30px;
}
.logo-menus{
   position: absolute;
   top: 10px;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 2;
   width: 100%;
}
.logo-menus .menus ul:not(.drop-down ul){
   display: flex;
   gap: 7px;
   padding: 3px 0;
}
.logo-menus .menus a.menu {
   color: #545454 !important;
   position: relative;
   text-decoration: none;
   display: block;
   padding: 10px 15px;
}
.logo-menus .menus li{
   position: relative;
}
.logo-menus .menus li:not(:last-of-type, .drop-down li)::after{
   content: '';
   display: block;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: -3px;
   background-color: #c7c7c7;
   height: 40%;
   width: 0.5px;
}
.tool-title h1{
   font-weight: bold;
   text-align: center;
   font-size: 22px;
   margin-bottom: 0;
   line-height: 1.5em;
}
.rank-checker-home .tool-title h1 {
   font-size: 33px;
}
.signup, .mainVisual{
   position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 10px;
   align-items: center;
   justify-content: center;
   z-index: 1;
}
.signup{
   align-items: flex-end;
   padding: 60px 0 150px; /*下の余白を小さくすると縦幅が小さいときにはみ出る*/
   margin-top: 30px;
}
.mainVisual{
   align-items: flex-start;
   padding: 48px 0 0;
   margin-top: 10px;
}
.rank-checker-home .mainVisual,
.image-generation-home .mainVisual {
    margin-top: 40px;
}

.mainVisual-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   position: relative;
}
.signup-inner{
   width: 552px;
}
.charactor-wrapper{
   position: relative;
}
.bf-charactor-bg{
   max-width: 300px;
   top: -102px;
   position: absolute;
   right: 0;
   z-index: -1;
}
.bf-charactor{
   max-width: 175px;
   position: absolute;
   right: 65px;
   z-index: -1;
   animation: fuwafuwa 2s infinite;
}
@keyframes fuwafuwa{
   0%{ top: -113px;}
 50%{ top: -106px;}
 100%{ top: -113px;}
}
.tool-title{
   position: relative;
   margin-bottom: 40px;
}
.sub-title-wrapper{
   margin-bottom: 32px;
   position: relative;
   display: inline-block;
}
.tool-title .seo,
.tool-title .ai{
   font-size: 2em;
}
.tool-title .croud{
   font-size: 18px;
   margin-right: 7px;
}
.tool-title .i-g{
   font-size: 39px;
}
.sub-title{
   display: inline-block;
   margin: 0;
}
.rank-checker-home .sub-title-wrapper {
   margin-bottom: 18px;
}
.sub-title-inner{
   position: relative;
   background-color: #000;
   color: #fff;
   padding: 8px 30px 8px 12px;
   clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);
}
.sub-title-inner>span{
   font-size: 1.2em;
   color: #fff6b3;
}
.tool-title img.txt {
   height: 60px;
}
.top .btns-wrapper{
   margin: 25px 0 0 0;
   display: flex;
   justify-content: center;
   gap: 25px;
}
.signup-btn-wrapper a,
.login-btn{
   display: flex;
   color: #fff!important;
   width: 240px;
   height: 70px;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   flex-direction: column;
   position: relative;
}
.signup-btn-wrapper a{
   background: linear-gradient(90deg, #1b809e 0%, #298d94 50%, #3ead86 100%);
   font-size: 20px;
   padding-right: 5px;
}
.introduced{
   display: flex;
   gap: 10px;
   background: linear-gradient(90deg, rgb(255, 56, 122) 0%, #ff6844 30%, #f89900 50%, rgba(251, 180, 62, 0.5) 70%, rgba(251, 180, 62, 0) 100%);
   /*background: linear-gradient(90deg, rgb(249 39 175 / 70%) 0%, rgb(255 53 79 / 70%) 30%, rgb(255 82 0 / 70%) 50%, rgb(255 179 0 / 50%) 70%, rgb(251 180 62 / 0%) 100%);*/
   /*background: linear-gradient(90deg, rgba(252, 240, 197, 0.5) 20%, rgba(236, 243, 210, 0.5) 50%, rgba(211, 193, 255, 0.1) 100%);*/
   /*color: #111111;*/
   color: #fff;
   font-size: 12px;
   font-weight: bold;
   padding: 3px 10px;
   position: absolute;
   left: 5px;
   transform: rotate(0deg);
   align-items: center;
   bottom: -30px;
   width: 100%;
}
.signup-inner .signup-btn-wrapper a{
   /*background: linear-gradient(90deg, #ff5200 0%, #ffa500 100%);*/
   background: linear-gradient(90deg, #1155e3 0%, #a011e3 100%);
   box-shadow: 3px 3px #000;
   /*animation: hue-rotate-1 2s linear infinite;*/
   position: relative;
   overflow:hidden;
}
/*
.signup-inner .signup-btn-wrapper a::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: 11;
   height: 100%;
   width: 10px;
   background-color: #ffffff;
   transform: rotate(45deg);
   transform-origin: center center;
   animation: pika-btn 3s ease-in-out infinite;
}
@keyframes pika-btn{
   0% { transform: scale(0) rotate(45deg); opacity: 0;}
  86% { transform: scale(0) rotate(45deg); opacity: 0.5;}
  87% { transform: scale(4) rotate(45deg); opacity: 1;}
 100% { transform: scale(50) rotate(45deg); opacity: 0;}
}
*/
.signup-btn-wrapper a:hover,
a.login-btn:hover{
   opacity: 1;
}
.signup-btn-wrapper a::before,
a.login-btn::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   background-color: rgba(255, 255, 255, .2);
   width: 100%;
   height: 100%;
   transition: transform .6s cubic-bezier(.8,0,.2,1) 0s;
   transform: scale(0, 1);
   transform-origin: right top;
}
.signup-btn-wrapper a:hover::before,
a.login-btn:hover::before{
   transform-origin: left top;
   transform: scale(1, 1);
}
.signup-btn-wrapper a::after {
   content: '';
   position: absolute;
   right: 15px;
   top: calc(50% + 3px);
   transform: translateY(-50%);
   width: 8px;
   height: 8px;
   background-color: #fff;
   clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
span.free {
    font-size: 1.3em;
    margin-right: 3px;
    font-weight: bold;
    color: #fffdd8;
}
.login-btn{
   width: 150px;
   height: 50px;
   margin-top: 12px;
   background-color: #5d5d5d;
}
.sup-wrapper{
   text-align: center;
   padding: 0 8px;
}
.sup-wrapper p{
   margin: 10px 0 0;
   font-size: 14px;
}
.top-msg{
   position: relative;
   z-index: 2;
   line-height: .5em;
   display: none;
}
.bg-extend{
   position: relative;
   opacity:0;
   overflow: hidden;
}
.bg-extend.displayed {
   animation:bg-extend 1s forwards;
   display: block;
}
@keyframes bg-extend{
   0% { opacity:0; }
 100% { opacity:1; }
}
.bg-txt{
   line-height: 1.5em;
}
.bg-txt.displayed {
   animation:bg-extend 1s forwards;
   animation-delay: 0.6s;
}
/*左から右*/
.bg-extend.displayed::before{
   animation: bg-extend-2 1s forwards;
   content: '';
   position: absolute;
   top: -10px;
   width: 100%;
   height: calc(100% + 20px);
}
.home .bg-extend.displayed::before{
   background-color: #36e5eb;
}
.rank-checker-home .bg-extend.displayed::before{
   background-color: #80fca5;
}
.image-generation-home .bg-extend.displayed::before{
   background-color: #faf8a4;
}
.bg-txt{
   padding: 15px 20px;
   position: relative;
   z-index:1;
   opacity: 0;
   display: block;
   font-weight: bold;
}
/*
.home .bg-txt{
   background: linear-gradient(90deg, rgba(172, 246, 250, 0.5) 20%, rgba(210, 240, 243, 0.5) 50%, rgb(246 251 252 / 10%) 100%);
}
*/
.top-msg2{
   margin: 7px auto 0;
   max-width: 490px;
   font-size: 18px;
}
.top-msg2 .bg-txt{
   padding-left: 30px;
}
.home .bg-txt,
.rank-checker-home .bg-txt {
   background: linear-gradient(90deg, rgba(252, 240, 197, 0.5) 20%, rgba(236, 243, 210, 0.5) 50%, rgba(211, 193, 255, 0.1) 100%);
}
.home .bg-extend.displayed::before,
.rank-checker-home .bg-extend.displayed::before {
   background: linear-gradient(90deg, rgba(253, 228, 5, 0.3) 0%, rgba(201, 127, 21, 0.5) 40%, rgba(207, 23, 17, 0.2) 70%, rgb(246 251 252 / 10%) 100%);
}

/*
.rank-checker-home .bg-txt{
   background: linear-gradient(90deg, rgba(172, 250, 207, 0.5) 20%, rgba(210, 243, 223, 0.5) 50%, rgb(246 252 249 / 10%) 100%);
}
*/
.image-generation-home .bg-txt{
   background: linear-gradient(90deg, rgb(248 250 172 / 30%) 20%, rgb(243 238 210 / 50%) 50%, rgb(252 251 246 / 10%) 100%);
}
@keyframes bg-extend-2{
   0% { transform-origin:left; transform:scaleX(0); opacity: 1; }
  50% { transform-origin:left; transform:scaleX(1); opacity: .9;}
  50.001% { transform-origin:right; opacity: .9; }
 100% { transform-origin:right; transform:scaleX(0); opacity: .2;}
}
.delay-06.displayed::before{animation-delay: 0.6s;}
.delay-12.displayed::before{animation-delay: 1.2s;}

.tool-title img.txt{
   margin-top: 14px;
}
/*------------------------------------------------------------------
 screens
------------------------------------------------------------------*/
.br-screens{
   position: relative;
   width: 100%;
   max-width: 500px;
   height: 500px;
}
.br-screens img{
   position: absolute;
   top: 0;
   left: 0;
   object-fit: cover;
}
.descs{
   position: relative;
   width: 500px;
   height: 100px;
}
.top-desc{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   left: calc(50% + 25px);
   transform: translateX(-50%);
   font-weight: bold;
   font-size: 18px;
}
.descs::before,
.descs::after{
   content: '';
   display: block;
   position: absolute;
   top: 50%;
   width: 40px;
   height: 1px;
   background-color: #a3a3a3;
}
.descs::before{
   left: 63px;
   transform: translateY(-50%) rotate(70deg);
}
.descs::after{
   right: 13px;
   transform: translateY(-50%) rotate(-70deg);
}
.prev, .next{
   position: absolute;
   top: calc(50% - 103px);
   transform: translateY(-50%);
   width: 18px;
   height: 35px;
   background-color: #bbc1c3;
   z-index: 1;
   border-radius: 5px;
}
.prev{
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
   left: 20px;
}
.next{
   clip-path: polygon(0 0, 100% 50%, 0 100%);
   right: -40px;
}
.home .anm-01 .desc-01,
.home .anm-01 .br-screen-01{
   animation: br-top-01 18s ease-in-out infinite;
}
.home .anm-01 .desc-02,
.home .anm-01 .br-screen-02{
   animation: br-top-02 18s ease-in-out infinite;
}
.home .anm-01 .desc-03,
.home .anm-01 .br-screen-03{
   animation: br-top-03 18s ease-in-out infinite;
}
.home .anm-02 .desc-01,
.home .anm-02 .br-screen-01{
   animation: br-top-03 18s ease-in-out infinite;
}
.home .anm-02 .desc-02,
.home .anm-02 .br-screen-02{
   animation: br-top-01 18s ease-in-out infinite;
}
.home .anm-02 .desc-03,
.home .anm-02 .br-screen-03{
   animation: br-top-02 18s ease-in-out infinite;
}
.home .anm-03 .desc-01,
.home .anm-03 .br-screen-01{
   animation: br-top-02 18s ease-in-out infinite;
}
.home .anm-03 .desc-02,
.home .anm-03 .br-screen-02{
   animation: br-top-03 18s ease-in-out infinite;
}
.home .anm-03 .desc-03,
.home .anm-03 .br-screen-03{
   animation: br-top-01 18s ease-in-out infinite;
}

@keyframes br-top-01{
   0%{opacity: 1; visibility: visible;}
  30%{opacity: 1; visibility: visible;}
  35%{opacity: 0; visibility: hidden;}
 95%{opacity: 0; visibility: hidden;}
 100%{opacity: 1; visibility: visible;}
}
@keyframes br-top-02{
 0%{opacity: 0; visibility: hidden;}
30%{opacity: 0; visibility: hidden;}
35%{opacity: 1; visibility: visible;}
65%{opacity: 1; visibility: visible;}
70%{opacity: 0; visibility: hidden;}
100%{opacity: 0; visibility: hidden;}
}
@keyframes br-top-03{
 0%{opacity: 0; visibility: hidden;}
65%{opacity: 0; visibility: hidden;}
70%{opacity: 1; visibility: visible;}
95%{opacity: 1; visibility: visible;}
100%{opacity: 0; visibility: hidden;}
}
/*スライドパターン
@keyframes br-screen-01{
     0%{opacity: 1; visibility: visible; transform: translateX(-500px);}
     10%{opacity: 1; visibility: visible; transform: translateX(0px);}
    40%{opacity: 1; visibility: visible; transform: translateX(0px);}
    50%{opacity: 0; visibility: hidden; transform: translateX(500px);}
   100%{opacity: 0; visibility: hidden; transform: translateX(-500px);}
}
@keyframes br-screen-02{
   0%{opacity: 0; visibility: hidden;transform: translateX(-500px);}
  40%{opacity: 0; visibility: hidden;transform: translateX(-500px);}
  50%{opacity: 1; visibility: visible;transform: translateX(0px);}
  90%{opacity: 1; visibility: visible; transform: translateX(0px);}
 100%{opacity: 0; visibility: hidden; transform: translateX(500px);}
}
*/
.crowns-img{
   width: 460px;
   margin-top: 10px;
}
.crowns{
   display: flex;
   align-items: center;
   justify-content: center;   
}
.crowns>div{
   display: flex;
   flex-direction: column;
}
.tool-title .crowns{
   display: none;
}
.crowns ul.std{
   margin: 5px 0 0 0;
}

.crowns li{
   color: #777;
   font-size: 12px;
   font-weight: bold;
   line-height: 17px;
}

/*------------------------------------------------------------------
 madia
------------------------------------------------------------------*/
.intro-of-company-wrapper{
   position: absolute;
   top: -100px;
   right: 12px;
   perspective: 300px;
   transform-style: preserve-3d;
   z-index: 3;
}
.intro-of-company{
   color: #fff;
   font-weight: bold;
   background: linear-gradient(90deg, #000000, #282828);
   font-size: 25px;
   padding: 2px 15px;
   border-radius: 3px;
   transform: rotateX(7deg) rotateY(-30deg) rotateZ(0deg);
   box-shadow: 3px 3px 1px rgba(0,0,0,.3);
   position: relative;
   overflow: hidden;
}
.intro-of-company::before{
   content: '';
   position: absolute;
   display: inline-block;
   top: 0;
   left: 0;
   z-index: 11;
   height: 100%;
   width: 10px;
   background-color: #ffffff;
   animation: pika 3s ease-in-out infinite;
}
@keyframes pika{
   0% { transform: scale(0) rotate(45deg); opacity: 0;}
  86% { transform: scale(0) rotate(45deg); opacity: 0.5;}
  87% { transform: scale(4) rotate(45deg); opacity: 1;}
 100% { transform: scale(50) rotate(45deg); opacity: 0;}
}
.intro-of-company>span{
   position:relative;
}
.intro-of-company>span::after{
   position:absolute;
   /*content: '';*/
   background: linear-gradient(90deg, #efabab, #f9a978, #f7c343);
   bottom: 3px;
   left: 0;
   width: 100%;
   height: 5px;
   z-index: -1;
}
.media{
   background-color: #fff;
   border-radius: 5px;
   height: 95px;
   margin: 8px -30px 0 -30px;
   display: flex;
   overflow: hidden;
   align-items: center;
}
.media-inner{
   display: flex;
   align-items: center;
   gap: 30px;
   animation: slide-flow 50s infinite linear 1s both;
   min-width: 3040px;
   width: 100%;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}
.media-inner img{
   width: 200px;
   object-fit: contain!important;
}
.toc-container{
   display: flex;
   margin-bottom: 45px;
   justify-content: center;
}
.toc-container>ul{
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
   justify-content: center;
   padding: 5px 0 0 0;
}
.toc-container a{
   display: block;
   padding: 2px 0;
   width: 135px;
   text-align: center;
   background-color: #fff;
   text-decoration: none;
   border-radius: 3px;
   color: #333!important;
   font-size:14px;
   font-weight: bold;
}
/*------------------------------------------------------------------
info
------------------------------------------------------------------*/
.intro .info-wrapper h2{
   font-size: 25px;
   margin: 60px 0 30px;
}
.info{
   max-width: 960px;
   margin: 0 auto;
}
.info .date{
   font-size: 14px;
   color: #eee9c5;
}
.info li{
   line-height: 1.5em;
   margin-bottom: 15px;
}

.info li{
   display: flex;
   flex-wrap: wrap;
   gap: 0 12px;
   font-size: 16px;
}
.info li::before,
.info li::after{
   content: '';
   display: block;
   width: 7px;
   height: 7px;
   top: 3px;
   position: absolute;
   transform: translateY(-50%);
}
.info li::before{
   background-color: rgba(149, 248, 255, 0.7);
   top: 10px;
   left: -22px;
}
.info li::after{
   background-color: rgba(252, 255, 149, .7);
   top: 15px;
   left: -26px;
}
/*------------------------------------------------------------------
survey
------------------------------------------------------------------*/
.survey-result-wrapper{
   position: relative;
}
.intro .survey-result-wrapper h2{
   text-align: center;
   font-size: 25px;
   line-height: 57px;
   margin: 140px 0 30px;
}
.survey-result-wrapper p{
   text-align: center;
   margin-bottom: 15px;
}
.survey-result{
   display: flex;
   justify-content: center;
}
.survey-result figcaption{
   margin-top: 15px;
   text-align: center;
   font-size: 17px;
}

/*------------------------------------------------------------------
cases
------------------------------------------------------------------*/
.cases-wrapper{
   margin-top: 140px;
}
#cases span,
#survey-result span{
   font-size: 3.5em;
   font-style: italic;
}
.cases{
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-content: center;
   gap: 40px;
   max-width: 1280px;
   margin: 0 auto;
}
.cases figcaption,
.foreign-language-case figcaption{
   font-size: 17px;
   margin-top: 7px;
   display: flex;
   justify-content: center;
   gap: 20px;
   align-items: flex-end;
}

.cases figcaption span,
.foreign-language-case figcaption span{
   font-weight: bold;
}
.cases figcaption a,
.foreign-language-case figcaption a{
   text-decoration: none;
   position: relative;
   font-size: 20px;
}
.cases figcaption a::before,
.cases figcaption a::after,
.foreign-language-case figcaption a::before,
.foreign-language-case figcaption a::after{
   content: '';
   position: absolute;
   width: 9px;
   height: 2px;
   background-color: #b3fff0;
   right: -16px;
   transition: .3s;
}
.cases figcaption a::before,
.foreign-language-case figcaption a::before{
   top: calc(50% - 2px);
   transform: translateY(-50%) rotate(30deg);
}
.cases figcaption a::after,
.foreign-language-case figcaption a::after{
   top: calc(50% + 2px);
   transform: translateY(-50%) rotate(-30deg);
}
.cases figcaption a:hover::before,
.cases figcaption a:hover::after,
.foreign-language-case figcaption a:hover::before,
.foreign-language-case figcaption a:hover::after{
   right: -18px;
}
.cases figure>div,
.foreign-language-case figure>div{
   max-width: 620px;
   margin: 0 auto;
}
.cases img,
.foreign-language-case img,
.access img{
   box-shadow: 0 0 2px rgba(0,0,0, .3),
               0 0 5px rgba(0,0,0, .3),
               0 0 10px rgba(0,0,0, .3)
}
.foreign-language-case,
.access{
   display: flex;
   justify-content: center;
   position: relative;
   padding-bottom: 30px;
}
#access{
   margin: 100px 0 30px;
   font-size: 40px;
}
#access span{
   font-size: 1.3em;
   color: #fff;
   margin-left: 4px;
}
.access-text-wrapper{
   display: flex;
   justify-content: center;
}
.access-text-wrapper>p{
   font-size: 18px;
   text-align: center;
   margin-bottom: 20px;
   position: relative;
   color: #feffd5;
}
.access-text-wrapper>p::before,
.access-text-wrapper>p::after,
.access-text-wrapper>p>span::before,
.access-text-wrapper>p>span::after{
   content: '';
   position: absolute;
   width: 15px;
   height: 2px;
   background-color: #feffd5;
   top: calc(50% - 1px);
}
.access-text-wrapper>p::before{
   left: -25px;
   transform: rotate(66deg);
}
.access-text-wrapper>p>span::before{
   left: -17px;
   transform: rotate(66deg);
}
.access-text-wrapper>p::after{
   right: -25px;
   transform: rotate(-66deg);
}
.access-text-wrapper>p>span::after{
   right: -17px;
   transform: rotate(-66deg);
}
#foreign-language-case{
   margin: 50px 0 20px;
}
#video{
   margin-top: 150px;
}
.title-06>div>video{
   width: 100%;
}

/*------------------------------------------------------------------
youtube
------------------------------------------------------------------*/
.youtube-wrapper{
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 70px;
   width: 100%;
   aspect-ratio: 16 / 9;
   max-height: 620px;
}
.youtube-wrapper iframe{
   max-width: 1102px;
   max-height: 620px;
   width: 100%;
   height: 100%;
}

/*------------------------------------------------------------------
intro
------------------------------------------------------------------*/
.signup-btn-wrapper a{
   color: #fff!important;
}
.signup-btn-wrapper.middle a::after {
   right: 32px;
   width: 12px;
   height: 12px;
}
.signup-btn-wrapper.middle a{
   width: 50%;
   max-width: 600px;
   padding: 30px 0;
   font-size: 30px;
   font-weight: bold;
   border-radius: 5px;
   box-shadow:0 0 3px rgba(0,0,0,.3);
   height: 135px;
}
.comparing .signup-btn-wrapper.middle,
.plans .signup-btn-wrapper.middle{
   margin-top: 80px;
}
.intro{
   padding: 10px 50px 77px;
   /*
   background: linear-gradient(90deg,#353b7e,#35537e, #517ba6);
   background: linear-gradient(90deg,#171039,#224e5f, #41a197);
   background: linear-gradient(90deg,#171951,#224e5f, #4590a6);
   */
   background: linear-gradient(90deg,#171951,#224e5f, #41a197);
   color: #fff;
   margin: -131px 25px 0;
   border-radius: 5px;
   box-shadow: 0 0 3px rgba(0, 0, 0, .3);
   z-index: 1;
}
.intro .mainVisual{
   display: none;
}
.intro .mainVisual p{
   color: #000;
}
.functions{
   display: flex;
   flex-direction: column;
   gap: 100px;
}
.functions.title-01-wrapper{
   gap: 0;
}
.functions:not(.home .functions){
   margin-top: 20px;
}
.functions img:not(.sp-screen img, .br-screens img, .rank-checker img){
   box-shadow: 0 0 3px rgba(255, 255, 255, .5),
               0 0 7px rgba(255, 255, 255, .3),
               0 0 10px rgba(255, 255, 255, .3);
   margin-top: 10px;
}
.intro img{
   object-fit: contain;
}
.intro h2{
   text-align: center;
   font-size: 25px;
   line-height: 57px;
   margin: 90px 0 70px;
}
.intro h2.flow{
   font-size: 35px;
   margin: 20px 0 0;
}
.intro h2 span{
   font-size: 2em;
   color: #feffd5;
}
.intro h3{
   font-size: 25px;
   margin: 0 0 30px;
   color: #dcfffb;
}
.functions>div{
   display: flex;
   gap: 50px;
   position: relative;
   align-items: flex-start;
}
.signup-btn-wrapper.middle{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 0;
   margin: 0 0 80px;
}
.signup-btn-wrapper.middle.first{
   margin: 50px 0 100px;
}
.functions .img-wrapper{
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
}

.rank-checker-home .functions .title-02 .img-wrapper,
.rank-checker-home .functions .title-04 .img-wrapper{
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   flex: 1.5;
}
.functions .sp-screen .img-wrapper{
   flex-direction: row;
   gap: 15px;
}
.functions .sp-screen>div{
   max-width: 50%;
}
.image-generation-home .intro .sp-screen img{
   max-width: calc(50% - 10px);
   margin-left: 0;
}
.functions>div:nth-of-type(odd) .img-wrapper{
   justify-content: flex-end;
}
.functions>div:nth-of-type(even) .img-wrapper{
   justify-content: flex-start;
}
.rank-checker-home .functions>div:nth-of-type(odd) .img-wrapper{
   justify-content: flex-start;
}
.rank-checker-home .functions>div:nth-of-type(even) .img-wrapper{
   justify-content: flex-end;
}
.youtube-wrapper+div,
.functions{
   position: relative;
}
.survey-result-wrapper::after,
.info-wrapper:after,
.foreign-language-case::after,
.access::after,
.functions>div:not(:last-of-type, .title-01-wrapper>div)::after,
.youtube-wrapper+div::after{
   content: '';
   position: absolute;
   width: 100%;
   bottom: -50px;
   border-bottom: 1px dotted #8aa1aa;
}
.functions.title-01-wrapper::after{
   content: '';
   position: absolute;
   width: 100%;
   bottom: 30px;
   left: 0;
   border-bottom: 2px solid #8aa1aa;
}
h2.others{
   margin: 0;
   text-align: center;
   width: 100%;
}
.others-desc{
   font-size: 20px;
}
h2.others span{
   font-size: 40px;
   color: #fff;
}
.others .emp{
   font-weight: bold;
   color: #feffd5;
}
.intro .view-more{
   color: #fff !important;
   text-decoration: none;
   position: relative;
   background: linear-gradient(90deg, #174851, #196858, #41a197);
   padding: 10px 43px 10px 27px;
   border-radius: 50px;
}
.view-more-wrapper{
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
   margin-bottom: 10px;
}
.intro .functions .view-more-wrapper.upper-part{
   margin-top: 23px;
   margin-bottom: 0;
   justify-content: flex-start;
}
.intro .upper-part .view-more{
   background: linear-gradient(90deg, #000, #1e2523, #1f3431);
   background: linear-gradient(90deg, #8f0c0c, #8f410c, #90a013);
   background: #90a013;
}
.view-more::after{
   content: url(../images/icons/view-more-w.svg);
   position: absolute;
   top: calc(50% + 0px);
   transform: translateY(-50%);
   width: 15px;
   height: 15px;
   right: 17px;
   transition: .3s;
}
.view-more:hover::after{
   right: 13px;
}
.more-ai-seo-relationship{
   margin-top: 15px;
}
.functions>div>div{
   flex: 1;
}
.intro a,
.intro a:visited,
.intro p a:visited{
   color: #b3fff0;
}
.title-05 .img-wrapper{
   display: flex;
   justify-content: flex-end;
}
.intro .sp-screen img{
   max-width: 400px;
   margin-left: 50px;
}
.title-01 .note{
   color: #fff!important;
}
.intro+section{
   margin: -65px 0 0 0;
}
.others{
   flex-direction: column;
}
.others h3{
   margin: 0 auto;
}
.others-inner{
   display: grid;
   width: 100%;
   max-width: 1300px;
   margin: 0 auto;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   justify-items: center;
   gap: 35px 30px;
}
.intro .others-inner>div{
   background-color: #f7fefe;
   border-radius: 5px;
   color: #000;
   padding: 13px 20px 15px;
   max-width: 400px;
   position: relative;
   min-height: 225px;
   box-shadow: 0 0 5px rgba(15,93,93,.5),
               0 0 7px rgba(15,93,93,.5);
   font-size: 18px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 5px;
}

.others-inner h4{
   background-color: #409e95;
   color: #fff;
   text-align: center;
   font-size: 20px;
   margin-left: -28px;
   margin-right: -10px;
   margin-bottom: 10px;
   border-radius: 0 3px 3px 0;
   position: relative;
   box-shadow: 1px 1px 3px rgba(0, 0, 0,.9);
}
.others-inner h4::before{
   content: '';
   position: absolute;
   background-color: #011614;
   top: -5px;
   left: 0;
   width: 8px;
   height: 5px;
   clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.others-inner .note{
   padding-left: 1em;
}
/*------------------------------------------------------------------
reason
------------------------------------------------------------------*/
section.reason{
   padding: 70px 50px 110px;
   height: 510px;
}
.reason-content{
   max-width: 1200px;
   margin: 60px auto 0;
   color: #fff;
   position: relative;
}
.reason-content li{
   font-size: 18px;
   line-height: 2em;
}
.reason .top-h2>span::after{
   background-color:#cdf8ff;
}
.reason .top-h2>span::before {
   background-color: #fff;
}
.reason li{
   position: relative;
}
.reason li::before,
.reason li::after{
   content: '';
   display: block;
   position: absolute;
   height: 2px;
   background-color: #cdf8ff;
}
.reason li::before{
   left: -16px;
   top: calc(50% + 1px);
   width: 5px;
   transform: translateY(-50%) rotate(50deg);
}
.reason li::after{
   left: -14px;
   top: 50%;
   width: 10px;
   transform: translateY(-50%) rotate(125deg);
}
.reason-inner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0 0 round 5px 5px 0 0);
   display: flex;
   align-items: center;
   justify-content: center;
}
.reason-inner::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(15, 44, 58, 0.5);
}
.reason-bg{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 600px;
   background-image: url(../images/top/reason-bg.webp);
   background-size: cover;
   background-position: center;
   z-index: -1;
   box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.plans .sup{
   max-width: 500px;
   margin: 50px auto 20px;
}
/*------------------------------------------------------------------
voices
------------------------------------------------------------------*/
.voices{
   padding: 70px 50px 110px;
   background-color: #eaf0f9;
}
.voices p{
   font-size: 22px;
   background-color: #fff;
   border-radius: 10px;
   padding: 20px 30px;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px
}
.voices-inner div p::before{
   content: '';
   position: absolute;
   top: calc(50% + 0px);
   width: 15px;
   height: 15px;
   background-color: #fff;
   clip-path: polygon(0 50%, 100% 100%, 100% 0);
}
.voices-inner div:nth-of-type(odd) p::before{
   left: -15px;
   clip-path: polygon(0 50%, 100% 100%, 100% 0);
}
.voices-inner div:nth-of-type(even) p::before{
   right: -15px;
   clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.voices-inner{
   display: flex;
   flex-direction: column;
   gap: 50px;
}
.voices-inner>div{
   display: flex;
   gap: 50px;
}
.voices-inner>div:nth-of-type(even){
   flex-direction: row-reverse;
}
img.person{
   max-width: 70px;
}
img.stars{
   max-width: 100px;
}
/*------------------------------------------------------------------
comparing
------------------------------------------------------------------*/
.comparing{
   padding: 70px 50px 110px;
   background-color: #fff;
}
.comparing-inner{
   max-width: 1200px;
   margin: 100px auto 0;
}
.comparing table{
   min-width: 600px;
}
.comparing th{
   min-width: 48px;
}
.comparing th,
.comparing td{
   text-align: center!important;
   vertical-align: middle;
}
.comparing .br-cell{
   background-color: #effcf3;
   background: linear-gradient(90deg, rgb(223, 247, 243) 20%, rgba(239, 252, 243) 50%, rgb(246 251 252) 100%);
}
.comparing td:nth-of-type(1){
   font-weight: bold;
   font-size: 18px;
}
.comparing thead th{
   background-color: #cfcfcf;
}
.comparing thead th:first-of-type,
.comparing tbody th{
   position: sticky;
   top: 0;
   left: 0;
}
.comparing thead th.br{
   background: linear-gradient(90deg,#353b7e,#35537e, #517ba6);
   color: #fff;
   font-weight: 400;
}
.comparing tbody th{
   background-color: #f1f1f1;
}
.developers{
   max-width: 900px;
   margin: 0 auto;
}
mark{
   position :relative;
   font-weight: bold;
}
mark::after{
   content: '';
   position: absolute;
   bottom: 2px;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #000;
}
.developers h3{
   font-size: 28px;
   margin: 100px 0 30px;
   text-align: center;
}
/*------------------------------------------------------------------
plans
------------------------------------------------------------------*/
section.plans{
   padding: 120px 50px 65px;
   background-color: #eaf0f9;
}
section.plans h3{
   font-size: 25px;
   margin: 15px 0 0;
}
.plans .initial-price{
   display: flex;
   justify-content: center;
   align-items: flex-end;
}
.initial-price dt{
   margin: 0 10px 17px;
}
.lets-try{
   font-size: 20px;
   margin: 10px 0 0;
   display: flex;
   justify-content: center;
}
.lets-try>p{
   position: relative;
}
.lets-try>p::before,
.lets-try>p::after{
   content: '';
   position: absolute;
}
.lets-try>p::before{
   top: calc(50% - 11px);
   left: -20px;
   width: 7px;
   height: 15px;
   background-color: #508bcb;
}
.lets-try>p::after{
   top: calc(50% + 0px);
    left: -26px;
    width: 19px;
    height: 11px;
    background-color: #508bcb;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

.why-lets-try{
   display: flex;
   justify-content: center;
}
.why-lets-try ul{
    margin: 1px 0 20px;
}
.why-lets-try li{
   line-height: 1.7;
}
.about-plan-desc{
   font-size: 16px;
   margin: 0 0 20px;
}
.top .plans-wrapper{
   justify-content: center;
}
.top .plans-container>div {
   border: none;
   padding: 10px 25px 25px;
}
.top .plans-container ul.std li::before {
    left: -8px;
}
.top .plans-container ul.std {
    padding: 0 0 0 18px;
}
/*------------------------------------------------------------------
about-ai-writing
------------------------------------------------------------------*/
.about-ai-writing{
   padding: 70px 50px 110px;
   background-color: #eaf0f9;
   z-index: 1;
}
.about-ai-writing-inner{
   max-width: 1200px;
   display: flex;
   gap: 50px;
   margin: 0 auto;
}
.about-ai-writing h2{
   font-size: 30px;
   margin-bottom: 30px;
}
.about-ai-writing-inner .img-wrapper{
   flex: 1;
}
.about-ai-writing-inner .txt{
   flex: 2;
}
.about-ai-writing .img-wrapper{
   display: flex;
   align-items: center;
   justify-content: center;
}
/*------------------------------------------------------------------
articles
------------------------------------------------------------------*/
.articles{
   padding: 70px 50px 110px;
   background-color: #fff;
   box-shadow: 0 0 3px rgba(0, 0, 0, .3);
   background-color: #fff;
}
.articles h2{
   font-size: 30px;
   margin-bottom: 30px;
}
.articles-inner .txt{
   flex: 1.5;
}
.articles-inner .solution-step{
   flex: 1;
   z-index: 1;
}
.articles-inner{
   max-width: 1200px;
   display: flex;
   gap: 90px;
   margin: 0 auto;
}
.articles-inner .view-more-wrapper{
   justify-content: flex-start;
}
.articles-list{
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 20px 0 30px;
}
.articles li{
   border-bottom: 1px dotted #d1deeb;
}
.articles li a{
   display: block;
   text-indent: -6px;
   line-height: 1.5em;
}
.articles .view-more{
   display: inline-block;
}
.articles a:hover{
   transition: .3s;
   transform: translateY(-3px);
}
/*----------------------------------------------------------------------
solution step
-----------------------------------------------------------------------*/
.solution-step{
   font-family: 'noto sans jp';
}
.solution-step ol{
   padding: 20px 0 5px 0;
   position: relative;
   z-index: -1;
   font-size: 1.2em;
   font-weight: 700;
}
.solution-step figure{
   max-width: 440px;
   min-width: 335px;
   margin: 50px auto 0;
}
.solution-step figcaption{
   margin: 5px 0 0 0;
   text-align: center;
}
.solution-step ol .sup {
   color: #555;
   font-size: 12px;
}
.solution-step li:nth-child(1),
.solution-step li:nth-child(2),
.solution-step li:nth-child(3) {
   line-height: 0.9em;
   padding: 0.5em 1em 0.2em 2.5em;
   margin-top: 1em;
}
.solution-step li{
   position: relative;
   text-align: left;
   line-height: 1.5em;
   padding: 0.5em 1em 0.5em 2.5em;
   border-bottom: 1px solid #b3b3b3;
   background-color: #fff;
   margin: 0 auto 1em;
   width: 350px;
   border-radius: 5em;
   font-weight:bold;
}
.solution-step li:first-child{
   line-height: 0.9em;
   padding: 0.5em 1em 0.2em 2.5em;
}
.solution-step li>span:first-child{
   position: absolute;
   top: 50%;
   left: 0%;
   transform: translateY(-50%);
   display:inline-block;
   border-radius: 50%;
   color: #fff;
   text-align: center;
   width:1.8em;
   height:1.8em;
   line-height: 1.8em;
   background-color: #1a4468;
   z-index: 1;
}
.solution-step li::before{
   content: "";
   position: absolute;
   left: 0.87em;
   bottom: -1.6em;
   width: 2px;
   height: 2.5em;
   background-color: #1a4468;
   z-index: 1;
}
.solution-step li:not(li:last-of-type)::after {
   content: "";
   position: absolute;
   left: 15px;
   bottom: -30px;
   width: 2px;
   height: 10px;
   transform: rotate(-25deg);
   background-color: #1a4468;
   z-index: 1;
}
.solution-step li:nth-of-type(3)>span:nth-of-type(2)::after{
   content: url(../images/top/repeat-arrow.svg);
   position: absolute;
   left: -45px;
   bottom: 23px;
   z-index: -1;
   transform: scale(1.2);
}
.solution-step li:nth-last-child(1):before{
   content: none;
}
div.detail_step{
   text-align:right;
   margin: 5px 9px 0 0;
   margin-bottom:3em;
}
.detail_Step a{
   position:relative;
   padding-right:1em;
}
.detail_Step a::before{
   content: "";
   position: absolute;
   top: 0.35em;
   left: -1.5em;
   width: 0.8em;
   height: 0.25em;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
   transform: skew(45deg);
}

/*------------------------------------------------------------------
footer
------------------------------------------------------------------*/
.top footer {
   position: relative;
   bottom: unset;
}
.copyright-wrapper {
   background-color: transparent;
}
/*---------------------------------------------------
animation
----------------------------------------------------*/
.fade {
   opacity: 0;
  } 
.fade.displayed {
   animation: fade 1s ease-in-out forwards;
}
.parallax{
   transition: .7s;
}
.parallaxLeft, .parallaxRight{
   position: relative;
}
.parallaxLeft::before,
.parallaxRight::before{
   content: "";
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
}
.parallaxLeft.displayed::before{
   left: 0;
}
.parallaxRight.displayed::before{
   right: 0;
}
.parallaxLeft.displayed::before,
.parallaxRight.displayed::before{
   animation: parallax 1s ease-in-out forwards;
}
@keyframes parallax{
    0%{ opacity: 1; width: 100%;}
   30%{ opacity: 1;}
  100%{ opacity: 0; width: 0;}
}
.fadeInLeft {
   transform: translateX(-20px);
   opacity: 0;
}
.fadeInLeft.displayed {
   animation: fadeInLeft 2s cubic-bezier(0.1, 0.8, 0.2, 1.0) forwards;
}
@keyframes fadeInLeft{
   0%{ opacity: 0; transform: translateX(-20px);}
 100%{ opacity: 1; transform: translate(0);}
}
.fadeInRight {
   transform: translateX(20px);
   opacity: 0;
}
.fadeInRight.displayed {
   animation: fadeInRight 2s cubic-bezier(0.1, 0.8, 0.2, 1.0) forwards;
}
.fadeInRight.stopped {
   animation: fadeInRightStopped .5s forwards;
}
@keyframes fadeInRight{
   0%{ opacity: 0; transform: translateX(20px);}
 100%{ opacity: 1; transform: translate(0);}
}
@keyframes fadeInRightStopped{
   0%{ opacity: 0; transform: translateX(20px);}
 100%{ opacity: 1; transform: translate(0);}
}
.fadeUp{
  transform: translateY(30px);
  opacity: 0;
}
.fadeUp.displayed {
   animation: fadeUp 2s cubic-bezier(0.1, 0.8, 0.2, 1.0) forwards;
}
@keyframes fadeUp{
   0%{ opacity: 0; transform: translateY(30px);}
 100%{ opacity: 1; transform: translateY(0);}
}
.textAnima .char{
   opacity: 0;
}

.textAnima.displayed .char{
   display: inline-block;
   animation: textAnima 1s forwards;
}
@keyframes textAnima{
   0%{opacity: 0; transform:translateX(10px)}
  30%{opacity: 0; transform:translateX(10px)}
 100%{opacity: 1; transform:translateY(0)}
}

.textAnima.displayed span.sub{
   animation:fadeUpText 1s ease-out forwards;
}
@keyframes fadeUpText{
     0%{opacity:0;transform:translateY(10px)}
    30%{opacity:0;transform:translateY(10px)}
   100%{opacity:1;transform:translateY(0)}
}

.t-02,
.t-02 span{
   opacity: 0;
}
.t-02.displayed{
   opacity: 1;
}
.t-02.displayed span.char{
   animation: flash .1s ease-out forwards;
   display:inline-block;
}
.after-cloud-br{
   display: none;
}

@keyframes flash{
   0%{ opacity: 0}
 100%{ opacity: 1}
}
.delay-01.displayed{animation-delay: 0.1s;}
.delay-02.displayed{animation-delay: 0.2s;}
.delay-03.displayed{animation-delay: 0.3s;}
.delay-04.displayed{animation-delay: 0.4s;}
.delay-05.displayed{animation-delay: 0.5s;}
.delay-06.displayed{animation-delay: 0.6s;}
.delay-07.displayed{animation-delay: 0.7s;}
.delay-08.displayed{animation-delay: 0.8s;}
.delay-09.displayed{animation-delay: 0.9s;}
.delay-10.displayed{animation-delay: 1.0s;}
.delay-11.displayed{animation-delay: 1.1s;}
.delay-12.displayed{animation-delay: 1.2s;}
.delay-13.displayed{animation-delay: 1.3s;}
.delay-14.displayed{animation-delay: 1.4s;}
.delay-15.displayed{animation-delay: 1.5s;}
.delay-16.displayed{animation-delay: 1.6s;}
.delay-17.displayed{animation-delay: 1.7s;}
.delay-18.displayed{animation-delay: 1.8s;}
.delay-19.displayed{animation-delay: 1.9s;}
.delay-20.displayed{animation-delay: 1.0s;}

/*********************************************************************************
1500px
**********************************************************************************/
@media screen and (max-width: 1500px){
   .top .top-entry{
      gap: 100px;
   }
}

/*********************************************************************************
1400px
**********************************************************************************/
@media screen and (max-width: 1400px){
   .rank-checker-home .functions .title-02 .img-wrapper,
   .rank-checker-home .functions .title-04 .img-wrapper{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      flex: 0.7;
   }
}

/*********************************************************************************
1380px
**********************************************************************************/
@media screen and (max-width: 1380px){
   .top .top-entry{
      gap: 80px;
   }
}
/*********************************************************************************
1300px
**********************************************************************************/
@media screen and (max-width: 1300px){
   .news {
       font-size: 18px;
   }
}
/*********************************************************************************
1279px
**********************************************************************************/
@media screen and (max-width: 1279px){
   .top .top-entry{
      gap: 30px;
   }
   .media {
      margin: 10px -20px 0 -20px;
   }
   .cases{
      gap: 30px;
   }
   #news{
      top: 20px;
      left: 10px;
      height: 95px;
      border-radius: 4px;
   }
   .intro {
      margin: -140px 30px 0;
      padding: 10px 30px 65px;
   }
   .comparing {
      padding: 70px 30px 110px;
   }
}

/*********************************************************************************
1200px
**********************************************************************************/
@media screen and (max-width: 1200px){
.br-screens{
   width: 450px;
   height: 455px;
}
.descs, .br-screens img{
   width: 450px;
}
.descs::before{
   left: 43px;
}
.descs::after{
   right: -13px;
}
.prev {
   left: 14px;
}
}
/*********************************************************************************
1177px
**********************************************************************************/
@media screen and (max-width: 1177px){
.after-cloud-br{
   display: block;
}
.rank-checker-home .tool.yu-m{
   line-height: 1.2em;
}
.media {
   margin: 10px -7px 0 -7px;
}
#news{
   left: 13px;
}
.intro {
   margin: -140px 5px 0;
   padding: 10px 20px 65px;
}
.comparing {
   padding: 70px 15px 110px;
}
.br-screens{
   width: 400px;
   height: 430px;
}
.descs, .br-screens img{
   width: 400px;
}
.descs::before{
   left: 21px;
}
.descs::after{
   right: -32px;
}
.prev {
   left: 9px;
}
}
/*********************************************************************************
1120px
**********************************************************************************/
@media screen and (max-width: 1120px){
   .br-screens{
      width: 374px;
      height: 400px;
   }
   .mainVisual {
       padding: 0px 0 0;
   }

   .descs, .br-screens img{
      width: 370px;
   }
   .descs::before{
      left: -5px;
   }
   .descs::after{
      right: -55px;
   }
   .prev {
      left: -3px;
   }
   .cases{
      gap: 20px;
   }
   .signup-inner {
     width: 100%;
   }
   .mainVisual-inner {
      margin: 0 auto;
   }
   .emp {
      font-size: 22px;
  }
  .tool-title h1 {
    font-size: 18px;
   }
   .atgp-02{
      padding: 0 20px;
   }
}
/*********************************************************************************
1110px
**********************************************************************************/
@media screen and (max-width: 1110px){
   .logo-menus .br-logo-wrapper img {
       margin: 0 0 0 18px;
       width: 300px;
   }
   .atgp-02{
      padding: 0 10px;
   }
}
/*********************************************************************************
1020px
**********************************************************************************/
@media screen and (max-width: 1020px){
   .logo-menus .menus{
      display: none;
   }
   .logo-menus .br-logo-wrapper img {
      margin: 6px 0 0 16px;
      width: 300px;
   }
   #spMenuBtn-at1stV{
      display: block;
      top: 27px;
      right: 10px;
      z-index: 999;
   }
}
/*********************************************************************************
999px
**********************************************************************************/
@media screen and (max-width: 999px){
   .atgp-02{
     padding: 0 40px;
   }
   .signup {
      margin-top: 0;
   }
   .cases{
      grid-template-columns: 1fr;
      gap: 40px;
   }
   .functions>div {
      align-items: center
   }
   .functions .sp-screen>div{
      max-width: unset;
   }
   .top-msg {
      margin: 40px 0 0 0;
   }
   .tool-title .crowns{
      display: block;
   }
   .signup .descs{
      display: block;
      position: absolute;
      top: 93px;
      right: -69px;
   }
   .signup .intro-of-company-wrapper{
      display: block;
      top: unset;
      transform: rotateX(3deg) rotateY(-7deg) rotateZ(0deg);
   }
   .intro .intro-of-company-wrapper{
      display:none;
   }
   .crowns {
      position: relative;
      top: unset;
      left: unset;
   }
   .intro-of-company-wrapper {
      bottom: -35px;
      right: 0px;
      perspective: 300px;
   }
   .intro-of-company{
      font-size: 18px;
      padding: 6px 12px;
   }
   .top .top-entry {
      flex-direction: column;
   }
   .home .functions>div:first-of-type::after{
      content: '';
      position: absolute;
      width: 100%;
      top: -50px;
      border-bottom: 1px dotted #8aa1aa;
   }
   .intro .mainVisual{
      display: block;
      background-color: #fff;
      padding: 37px 0 20px;
      border-radius: 5px;
      margin-bottom: 110px;
   }
   .intro .mainVisual-inner {
      transform: translateX(-20px);
   }
   .br-screens{
      width: 500px;
      height: 470px;
   }
   .descs, .br-screens img{
      width: 500px;
   }
   .prev {
      left: 20px;
   }
   .descs::before{
      left: 63px;
   }
   .descs::after{
      right: 13px;
   }
   .top-desc {
      font-size: 18px;
   }
   .emp {
      font-size: 25px;
   }
  .tool-title h1 {
    font-size: 22px;
   }

   .intro h2 {
      margin-bottom: 55px;
   }
   .home .signup,
   .rank-checker-home .signup,
   .image-generation-home .signup{
      align-items: center;
      padding: 70px 0 40px;
   }
   .signup-inner{
      width: 100%;
   }
   .mainVisual{
      padding: 50px 0 30px;
      display: none;
   }
   .intro {
      margin: -30px 5px;
   }
   .sup-wrapper p {
      margin: 10px 0;
   }
   .tool-title img.txt {
      margin-top: 0px;
   }
   .functions>div:nth-of-type(odd) {
      flex-direction: column;
   }
   .functions.about-image-ai-models>div:nth-of-type(odd) {
      flex-direction: column-reverse;
   }
   .functions>div:nth-of-type(even):not(.others) {
      flex-direction: column-reverse;
   }
   .functions>div:nth-of-type(odd) .img-wrapper,
   .functions>div:nth-of-type(even) .img-wrapper{
      justify-content: center;
   }
   .sp-screen .img-wrapper{
      max-width: 500px;
      margin: 0 auto;
   }
   .functions img:not(.mainVisual img){
      max-width: 700px;
      width: 95%;
   }
   .intro .sp-screen img{
      margin-left: 0;
   }
   .title-05 .img-wrapper {
      justify-content: center;
   }
   .title-05 img {
      margin-right: initial;
   }
   .scroll-wrapper {
      overflow-x: scroll;
      overflow-y: hidden
   }
   .about-ai-writing-inner{
      flex-direction: column-reverse;
   }
   .articles-inner{
      flex-direction: column;
      gap: 10px;
   }
   .about-ai-writing {
      padding: 70px 50px 60px;
   }
   .functions>div {
      gap: 50px;
   }
   .solution-step ol {
      font-size: 1.1em;
   }
   .signup-btn-wrapper.middle a {
      padding: 20px 0;
      font-size: 25px;
      height: 120px;
   }
   .bg{
      background-position: 40% 50%;
   }
}

/*********************************************************************************
870px
**********************************************************************************/
@media screen and (max-width: 870px){
   .sub-title-wrapper{
      margin-bottom: 25px;
      position: relative;
      display: inline-block;
   }
   .logo-menus .menus{
      display: none;
   }
   .logo-menus .br-logo-wrapper img {
      margin: 6px 0 0 16px;
      width: 300px;
   }
   #spMenuBtn-at1stV{
      display: block;
      top: 27px;
      right: 10px;
      z-index: 100000;
   }
   .ai-models-wrapper{
      position: relative;
      top: unset;
      left: unset;
      transform: unset;
      width: 100%;
      margin: 19px 0 0 7px;
   }
}
/*********************************************************************************
767px
**********************************************************************************/
@media screen and (max-width: 767px){
   .about-users{
      font-size: 30px;
   }
   .articles {
      padding: 70px 30px 110px;
   }
   .solution-step figure {
      max-width: 440px;
      margin: 50px auto 0;
      padding: 0 10px 0 30px;
   }
   .solution-step ol {
      font-size: 1em;
   }
   .solution-step li {
      border-radius: 10px;
   }
   .solution-step li:not(li:last-of-type)::after {
      left: 12px;
      bottom: -25px;
   }
   .solution-step li:nth-of-type(3)>span:nth-of-type(2)::after{
      bottom: 12px;
      transform: scale(1.1);
   }
   .others-inner>div {
      font-size: 16px;
   }
   .signup-btn-wrapper.middle a {
      padding: 15px 0;
      font-size: 22px;
   }
}
/*********************************************************************************
699px
**********************************************************************************/
@media screen and (max-width: 699px){
   .signup .descs {
      top: 92px;
      right: -8px;
   }
   .top-desc {
      font-size: 16px;
   }
   .emp {
       font-size: 22px;
   }
   .descs{
      width: 420px;
   }
   .descs::before{
      left: 43px;
   }
   .descs::after{
      right: -13px;
   }
   .prev {
      left: 14px;
   }
   .signup-btn-wrapper.middle a {
      min-width: 280px;
      padding: 10px 0;
      font-size: 20px;
      height: 86px;

   }
   .signup-btn-wrapper.middle a::after {
      right: 25px;
      width: 10px;
      height: 10px;
}
}
/*********************************************************************************
599px
**********************************************************************************/
@media screen and (max-width: 599px){
   .voices .top-h2 {
      margin: 0 0 10px 0;
   }
   .intro .survey-result-wrapper h2 {
      margin: 110px 0 30px;
   }
   .comparing-inner {
      margin: 0px auto 0px;
   }
   .cases-wrapper {
       margin-top: 110px;
   }
   .scroll-wrapper {
      margin-top: 20px;
   }
   .signup-btn-wrapper.middle {
      margin: 0 0 20px;
   }
   .sub-title-wrapper{
      margin-bottom: 10px;
   }
   section.plans {
      padding: 70px 15px 65px;
   }
   .crowns-img {
      width: 330px;
      margin: 30px auto 0;
   }
   .introduced {
      background: linear-gradient(90deg, rgba(255, 57, 123) 0%, rgba(255, 104, 68, 1) 30%, rgba(248, 153, 0) 50%, rgba(2251, 180, 62, 0.8) 70%,rgba(251, 180, 62, 0.5) 80%, rgba(251, 180, 62, 0) 100%);
   }
   .tool-title {
      margin-bottom: 13px;
   }
   .atgp-02{
      padding: 0 20px;
   }

   .ai-tools-grand-prix-wrapper>div{
       gap: 13px;
   }
   .ai-tools-grand-prix-logo{
      width: 80px;
   }
   .ai-tools-grand-prix-wrapper p {
       font-size: 19px;
   }
   .news {
      margin: 20px 0 25px 35px;
      font-size: 14px;
   }
   .news::before {
      left: -33px;
      width: 26px;
   }
   .about-users{
      font-size: 22px;
   }
   #video{
     margin: 100px 0 40px;
   }
   .intro {
      padding: 10px 10px 65px;
   }
   .media {
        margin: 10px 0px 0 0px;
   }
   .logo-menus .br-logo-wrapper img {
      margin: 6px 0 0 16px;
      width: 241px;
   }
   .rank-checker-home .sub-title {
       margin-bottom: 15px;
   }
   .tool-title .i-g {
      font-size: 30px;
   }
   .media-inner {
      min-width: 2530px;
   }
   .login {
       padding: 70px 0 54px;
   }
   .signup .descs {
      top: 112px;
      right: 53px;
   }
   .descs{
      width: 281px;
   }
   .top-desc {
      font-size: 14px;
   }
   .emp{
      font-size: 18px;
   }
   .descs::before {
     left: -6px;
     top: calc(50% + -12px);
   }
   .descs::after{
     right: -64px;
     top: calc(50% + -12px);
   }
   .bf-charactor {
      max-width: 164px;
      right: 30px;
   }
   .bf-charactor-bg {
      max-width: 290px;
      top: -109px;
      right: -26px;
   }
   .comparing h2, .plans h2, .voices h2, .reason h2, h2#access{
      font-size: 25px;
   }
   .reason h2{
      margin-bottom: 50px;
   }
   .tool-title {
      line-height: 1em;
   }
   .tool-title .br-logo-wrapper {
       gap: 0;
   }
   .tool-title .seo,
   .tool-title .ai{
      font-size: 1.6em;
   }
   .top .btns-wrapper {
      gap: 17px;
   }
   .signup-btn-wrapper{
      margin-right: 5px;
   }
   .signup-btn-wrapper a{
      width: 100%;
      height: 50px;
      padding: 0 12px 0 0;
      font-size: 16px;
      min-width: 150px;
   }
   .login-btn{
      padding: 0 10px;
      max-width: 100px;
      margin: 0;
   }
   .for-sp.msg{
      margin: 0;
   }
   .announcement {
      padding: 5px 10px;
      font-size: 16px;
   }
   .bg-txt {
      padding: 10px 15px;
      font-size: 14px;
   }
   .top .top-entry {
      padding: 0 10px;
      gap: 0;
   }
   .tool-title>span:nth-of-type(1) {
      font-size: 16px;
   }
   .title-05 img {
      max-width: 300px;
   }
   .comparing th, .comparing td {
      font-size: 14px;
   }
   .comparing td:nth-of-type(1){
      font-size: 16px;
   }
   .intro h2 {
      font-size: 20px;
      margin-bottom: 50px;
   }
   .intro h2 span {
       font-size: 1.6em;
   }
   .intro h3 {
      font-size: 22px;
   }
   .functions {
      gap: 80px;
   }
   .functions>div:first-of-type::before {
      top: -40px;
   }
   .functions>div:not(:last-of-type)::after{
      bottom: -40px;
   }
   .about-ai-writing h2 {
      font-size: 25px;
   }
   .articles h2 {
      font-size: 25px;
   }
   .about-ai-writing img{
      max-width: 160px;
   }
   .about-ai-writing {
      padding: 40px 15px 60px;
   }
   .articles {
      padding: 30px 15px 110px;
   }
   .plan.delay-02,
   .plan.delay-04,
   .plan.delay-06,
   .plan.delay-08{
      animation-delay: unset;
   }
   .solution-step li{
      width: 286px;
   }
   .media{
      height: 77px;
   }
   .media-inner img {
      width: 150px;
   }
   .media-inner {
      gap: 20px;
   }
   .intro h2 {
      margin: 20px 0 100px;
   }
   #news{
      font-size: 10px;
      height: 77px;
      width: calc(100% - 25px);
   }
   #news>p {
    padding: 0 5px;
   }
   img.person {
      max-width: 40px;
   }
   img.stars {
      max-width: 70px;
   }
   .voices p {
     font-size: 16px;
   }
   .voices-inner>div {
      gap: 30px;
   }
   .voices {
      padding: 50px 20px 110px;
   }
   .others-inner h4{
      font-size: 18px;
   }
   .others-inner h4+p{
      font-size: 16px;
   }
}

/*********************************************************************************
520px
**********************************************************************************/
@media screen and (max-width: 520px){
   .tool-title .tool{
      font-weight: bold;
      line-height: 1.5em;
   }
   .intro .mainVisual {
      margin-bottom: 86px;
   }
   .br-screens{
      width: 300px;
      height: 303px;
   }
   .prev, .next {
      top: calc(50% - 66px);
  }
  .top-desc {
   font-size: 12px;
   }
   .emp{
      font-size: 16px;
   }
   .emp {
      margin: 0 2px;
   }
   .descs::after {
      transform: translateY(-50%) rotate(-77deg);
      width: 26px;
      right: -30px;
   }
   .descs::before {
      transform: translateY(-50%) rotate(77deg);
      width: 26px;
      left: 21px;
   }
   .signup .descs {
      right: 27px;
   }
   .about-image-ai-models th,
   .about-image-ai-models td{
      display: block;
      width: 100%;
   }
   .about-image-ai-models th{
      margin-bottom: 10px;
   }
   .home .signup, .rank-checker-home .signup, .image-generation-home .signup {
      align-items: center;
   }
   .crowns li {
      font-size: 10px;
   }
   /*
   .ios .signup{
      padding: 0px 0 40px;
   }
   */
}
/*********************************************************************************
460px
**********************************************************************************/
@media screen and (max-width: 460px){
   .rank-checker-home .tool-title h1 {
       font-size: 30px;
   }
   .tool-title {
      font-size: 15px;
   }
   .intro h2 {
      margin-bottom: 48px;
   }
   .tool-title .i-g {
      font-size: 25px;
   }
   .intro-of-company-wrapper {
      bottom: -17px;
   }
  .intro-of-company {
    font-size: 15px;
    right: -7px;
  }
  .top-msg {
     margin: 19px 0 0 0;
   }
   .crowns {
      margin-top: 5px;
   }
   .br-screens{
      width: 260px;
      height: 250px;
   }
   .prev, .next {
      top: calc(50% - 47px);
  }
   .descs {
      height: 78px;
  }
   .descs, .br-screens img{
      width: 260px;
   }
   .descs::before{
      left: 28px;
      top: calc(50% - 10px);
      transform: translateY(-50%) rotate(80deg);
   }
   .descs::after{
      right: -26px;
      top: calc(50% - 10px);
      transform: translateY(-50%) rotate(-80deg);
   }
   .top-desc {
      font-size: 12px;
   }
   .emp {
      font-size: 14px;
   }
   .signup .descs {
      top: 72px;
      right: 9px;
   }
   .sp.active .spMenu-container .menus {
       padding: 0;
   }
   .sp.active .spMenu-container .btns {
      padding: 0;
   }
   .spMenu-container>div:first-of-type {
        align-items: center;
   }
   .rank-checker-home .tool.yu-m .line-02{
      font-size: 28px;
   }
}
/*********************************************************************************
400px
**********************************************************************************/
@media screen and (max-width: 460px){
   .atgp-02{
      padding: 0 10px;
   }
    .ai-tools-grand-prix-wrapper p {
        font-size: 17px;
    }
   .tool-title .i-g {
      font-size: 23px;
   }
  .bg-txt {
     font-size: 12px;
  }
   .tool-title .seo, .tool-title .ai {
     font-size: 1.4em;
   }
   .tool-title .tool {
      font-size: 20px;
  }
}