/*header*/
header .app.pc{
   display: none;
}
header{
   transition: .5s;
   background: unset;
   background-color: rgba(255, 255, 255, .85);
   box-shadow: none;
}
.header-nav-wrapper.guest.pc{
   display: flex;
   align-items: center;
}
header.scrolled{
   top: 0;
}
.header-nav-wrapper.guest.pc>ul{
   margin-right: 10px;
   display: flex;
   gap: 7px;
   padding: 0;
}
.header-nav-wrapper.guest.pc>ul.about-account{
   transform: translateY(-1px);
}
.top-h2{
   text-align: center;
   font-size: 41px;
   line-height: 57px;
   margin: 0 0 70px 0;
}
h2>span{
   position: relative;
}
.top-h2>span::before{
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   content: '';
   width: 70%;
   height: 1px;
   background-color: #a1a1a1;
}
.top-h2>span::after{
   position: absolute;
   bottom: -21px;
   left: 32%;
   transform: translateX(-50%);
   content: '';
   width: 25%;
   height: 3px;
   background-color: #508bcb;
}
.top-h2{
   font-family:'roboto','Noto Sans JP','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', sans-serif;
}
.start{
   background: linear-gradient(90deg, #1b809e 0%, #298d94 50%, #3ead86 100%);
   text-align: center!important;
}
.to-login-at-header{
   background-color: #464646;
   text-align: center!important;
}
.spMenuBtn-container .bar {
   background-color: #777;
}
.spMenuBtn-container span:last-child {
   color: #000;
}
.spMenu-opened .spMenuBtn-container span:last-child {
   color: #fff;
}
.spMenu-list li {
   border-bottom: none;
   width: 100%;
}
.spMenu-list .menu a,
.spMenu-list .menu button{
   color: #fff!important;
   position: relative;
   text-align: left;
   height: 52px;
   display: flex;
   padding-left: 15px;
   align-items: center;
}
.drop-down{
   color: #545454 !important;
   display: block;
   padding: 10px 36px 12px 15px;
}
.drop-down li{
   line-height: 37px;
}
.drop-down::before,
.drop-down::after{
   content: '';
   position: absolute;
   top: calc(50% - 2px);
   width: 7px;
   height: 1px;
   background-color: #545454;
}
.drop-down::before{
   right: 20px;
   transform: rotate(45deg);
}
.drop-down::after{
   right: 15px;
   transform: rotate(-45deg);
}
.drop-down>div{
   position: absolute;
   display: flex;
   justify-content: center;
   padding: 15px 5px;
   width: 298px;
   top: 53px;
   right: 5px;
   background: linear-gradient(90deg, #171951, #224e5f, #39625d);
   border: 1px solid #799390;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transform: scaleY(0);
   transform-origin: center top;
   transition: .5s;
}
.header-nav-wrapper .drop-down>div{
   right: -72px;
}
.drop-down:hover > div {
   visibility: visible;
   transform: scaleY(1);
   opacity: 1;
   pointer-events: auto;
   transition: .5s;
}
.drop-down ul {
   padding: 0;
}
.drop-down a {
   color: #fff;
   text-decoration: none;
   display: block;
}
.spMenu-list .start,
.spMenu-list .to-login-at-header{
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.spMenu-list .accordionBtn::before,
.spMenu-list .accordionBtn::after{
   content: '';
   width: 7px;
   height: 1px;
   background-color: #fff;
   position: absolute;
   top: calc(50% + 2px);
   transition: .5s;
}
.spMenu-list .accordionBtn::before{
   transform: translateY(-50%) rotate(45deg);
   right: 15px;
}
.spMenu-list .accordionBtn::after{
   transform: translateY(-50%) rotate(-45deg);
   right: 10px;
}
.spMenu-list .active .accordionBtn::before{
   transform: translateY(-50%) rotate(-45deg);
}
.spMenu-list .active .accordionBtn::after{
   transform: translateY(-50%) rotate(45deg);
}
.spMenu-list .menu button{
   width: 100%;
}
.spMenu-list .menu a,
.spMenu-list .menu button{
   border-bottom: 1px solid #5e65b7;
}
.spMenu-list .accordion a{
   border-bottom: 1px dotted #5e65b7;
   margin-left: 10px;
}

.header-nav-wrapper.pc a:first-of-type::after {
   content: none;
}

header .pc button,
header .pc.header-nav-wrapper a:not(.drop-down a, .about-account a){
   padding: 10px 15px;
}
.pc.header-nav-wrapper .about-account a{
    padding: 5px 15px;
}
.header-nav-wrapper a.menu,
.header-nav-wrapper .drop-down{
   color: #000!important;
   position: relative;
}
.header-nav-wrapper .drop-down::before,
.header-nav-wrapper .drop-down::after{
   top: calc(50% - 1px);
}
.header-nav-wrapper li{
   position: relative;
}
.header-nav-wrapper.guest.pc ul:first-of-type 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;
}
.spMenu-container .accordionBtn{
   background-color: transparent;
}
.spMenu-container .logo-link {
   padding: 0 0 0 5px;
}

.sp .overlay {
   left: -100vw;
}
.spMenu-list.guest {
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 282px;
}
.btns .spMenu-list.guest {
   gap: 15px;
}
.sp.active .spMenu-container .btns{
   padding: 0 20px;
}
.sp.active .spMenu-container .menus{
   padding: 20px 20px;
}
.sp.active .spMenu-container .br-logo-link-wrapper{
   align-items: flex-start;
   padding-bottom: 15px;
   display: flex;
   flex-direction: column;
}
/*headerここまで*/
.f-h{
   min-height: calc(100vh - 55px);
   padding: 170px 15px 150px;
   display: flex;
   justify-content: center;
   position: relative;
   margin-top: 0;
}
.f-h.no-side-nav{
   min-height: 100vh;
}
.transactions-law table.simple,
.about table.simple{
   border-top: none;
}
.transactions-law th{
   width: 186px;
   position: relative;
   vertical-align: middle;
}
.about th{
   width: 160px;
   position: relative;
   vertical-align: middle;
}
.transactions-law td,
.about th{
   vertical-align: middle;
}
.transactions-law table.simple td {
   padding: 15px 10px;
}
.transactions-law th::after,
.about th::after{
   content: '';
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, rgb(53 59 126), rgb(57 180 155));
}
.send-reset-email, .reset{
   text-align: center;
}
.send-reset-email>section{
   min-width: 500px;
   max-width: 500px;
}
.send-reset-email input,
.reset input{
   width: 250px;
}
.send-reset-email .label-wrapper>label,
.reset .label-wrapper>label{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 300px;
   margin: 30px auto 20px;
}
.verify-email .label-wrapper>label{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 300px;
   margin: 20px auto 10px;
}
.send-reset-email input,
.reset input,
.verify-email input{
   width: 300px;
}
.send-reset-email .btn-wrapper,
.resetBtn-wrapper{
   margin: 50px 0;
   display: flex;
   justify-content: center;
}
p.sent{
   margin-bottom: 30px;
   color: #0460ff;
   font-weight: bold;
}
#loading {
   display: none;
}
.hubspot-contact-log{
   margin: 100px 0 0 50px;
}
.consent-wrapper .err-msg{
   text-align: center;
}
.privacy-policy ul.std,
.privacy-policy ol.std{
   padding: .1em 0 .1em 1.5em;
}
.guest .f-h.ai-overview-statistics {
   max-width: 860px;
   padding: 80px 15px 130px;
   margin: 55px auto 0;
   display: flex;
   align-items: center;
   justify-content: center;
}
.f-h.ai-overview-statistics>section{
   transform: translateX(-141px);
}
.ai-overview-statistics h1{
   font-size: 25px;
}
.ai-overview-statistics h2{
   font-size: 18px;
   text-align: center;
}
.ai-overview-statistics .desc-aio h2{
   text-align: left;
   margin: 0 0 8px 0;
   padding: 0 0 3px 0;
   font-size: 18px;
   color: #2f272a;
   border-bottom: 1px dotted #b394a0;
}
.ai-overview-statistics .graphs-container p{
   margin: 30px 10px 10px 28px;
   font-size: 16px;
}
.ai-overview-statistics .num{
   font-weight: bold;
   font-size: 18px;
   margin: 0 3px;
}
.ai-overview-statistics>section,
.ai-overview-statistics-inner,
.graphs-container,
.graph-wrapper{
   width: 100%;
}
.ai-overview-statistics-inner{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.desc-aio{
   position: absolute;
   top: 100px;
   right: -330px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.desc-aio>div{
   width: 314px;
   font-size: 14px;
   background-color: #f1f1f1;
   padding: 10px 20px;
}
.desc-aio .ref{
   display: block;
}
.desc-aio .ref:nth-of-type(1){
   margin-top: 10px;
}
.desc-aio .ref:not(:nth-of-type(1)){
   margin-top: 3px;
}
/*------------------------------------------------------------------
faq
------------------------------------------------------------------*/
body.faq .top-h2{
   font-family:'roboto', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', sans-serif;
   font-size: 30px;
   display: none;
}
.faq dl {
   font-size: 18px;
}
body.faq section.faq{
   padding: 0 50px 40px;
}
.faq dl>div{
   display: none;
}
main.faq .faq dl>div,
.home .faq dl>div{
   display: block;
}
.rank-checker-home .faq dl>div.rank{
   display: block;
}
.image-generation-home .faq dl>div.image{
   display: block;
}
section.faq{
   padding: 70px 50px 110px;
   background-color: #fff;
   z-index: 1;
}
.faq dt{
   padding: 20px 70px 20px 65px;
   font-weight: bold;
   background-color: #eef5fd;
   position: relative;
   border-radius: 5px 5px 0 0;
}
.faq dt::before,
.faq dt::after{
   content: '';
   position: absolute;
   width: 15px;
   height: 2px;
   background-color: #7aa1b2;
   transform: translateY(-50%);
   top: 50%;
   transition: .3s;
}
body.faq .faq dt::before,
body.faq .faq dt::after{
   width: 11px;
}
.faq dt::before{
   right: 40px;
   transform: rotate(40deg);
}
body.faq .faq dt::before{
   right: 37px;
}
.faq dt::after{
   right: 30px;
   transform: rotate(-40deg);
}
.faq .active dt::before{
   transform: rotate(-40deg);
}
.faq .active dt::after{
   transform: rotate(40deg);
}
.faq dd{
   background-color: #eef5fd;
   position: relative;
   border-radius: 0 0 5px 5px;
}
.faq .question{
   font-size: 29px;
   color: #47b3e4;
   position: absolute;
   top: calc(50% - 2px);
   left: 23px;
   transform: translateY(-50%);
}
.faq dd::before{
   content: '';
   position: absolute;
   top: 0;
   width: calc(100% - 40px);
   height: 1px;
   border-bottom: 1px dotted #cecfde;
   left: 50%;
   transform: translateX(-50%);
}
body.faq .faq dl {
   font-size: 18px;
   max-width: 860px;
}
.faq dl{
   display: flex;
   flex-direction: column;
   gap: 25px;
   font-size: 20px;
   max-width: 1000px;
   margin: 0 auto;
}
.faq .accordionPanel>div {
   padding: 22px 20px 30px 35px;
}
ul.std.about-plan{
   padding-left: 13px;
   margin-bottom: 0;
}
.about-plan .note{
   padding-left: 2.5em;
   text-indent: -1.8em;
   line-height: 1.8em;
   margin: 5px 0 20px;
}
.about-plan.std li{
   line-height: 1.7;
}
.about-plan.std li::before{
   left: -9px;
}
.faq header,
.faq footer{
   display: none;
}

/*------------------------------------------------------
 change-plan-info
-------------------------------------------------------*/
.change-plan-info thead th:first-of-type{
   width: 200px;
}
.change-plan-info thead th:not(first-of-type){
   width: 20%;
}
.change-plan-info .cycle-change{
   width: 60%;
   margin: 0;
}
.change-plan-info .cycle-change thead th:not(first-of-type){
   width: 30%;
}
/*------------------------------------------------------
 text-ai-models
-------------------------------------------------------*/
.date>dl>div{
   color: #4f4f4f;
}
.invited-email-desc{
   margin: -15px 0 0 40px;
}
.processing-invited-email{
   margin: 5px 0 0 52px;
}
.processing-invited-email>div{
   display: flex;
}
/*********************************************************************************
1260px
**********************************************************************************/
@media screen and (max-width: 1260px){
   .header-nav-wrapper.pc.guest {
      display: none;
   }
    .header-nav-wrapper.sp {
        display: block;
    }
}
/*********************************************************************************
1160px
**********************************************************************************/
@media screen and (max-width: 1160px){
   .f-h.ai-overview-statistics>section {
      transform: unset;
   }
   .desc-aio{
      width: auto;
      top: unset;
      right: unset;
      max-width: 490px;
      position: relative;
   }
   .ai-overview-statistics-inner{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
   }
}
/******************************************************
678px
*******************************************************/
@media screen and (max-width: 678px){
   .pre-login .horizontal-scroll{
      overflow-x: scroll;
   }
   .ai-overview-statistics h1 {
       font-size: 22px;
   }
}

/******************************************************
 599px
*******************************************************/
@media screen and (max-width: 599px){
    .guest .f-h.ai-overview-statistics {
        padding-top: 0px;
    }
   .ai-overview-statistics h1 {
       font-size: 20px;
   }
   .guest .f-h {
      padding: 100px 15px 120px;
   }
   .send-reset-email>section {
      min-width: unset;
      max-width: unset;
   }
   .about table.rsp th,
   .transactions-law table.rsp th{
      margin-top: 15px;
   }
   .about table.rsp tr,
   .transactions-law table.rsp tr{
      border-bottom: none;
   }
   .about th{
      width: 136px;
   }
   .pre-login h1{
      font-size: 22px;
   }
   .desc-aio {
      font-size: 12px;
   }
   section.faq {
      padding: 70px 20px 110px;
   }
   .faq dl {
      font-size: 16px;
   }
   .faq dt::before, .faq dt::after {
      width: 10px;
   }
   .faq dt::after{
       right: 21px;
   }
   .faq dt::before{
       right: 27px;
   }
   .faq .question{
      left: 20px;
   }
   .faq .question {
      font-size: 25px;
   }
   .faq dt {
      padding: 20px 50px 20px 60px;
   }
   .faq h2{
      font-size: 25px;
   }
   body.faq section.faq{
      padding: 0 0 40px;
   }
   body.faq .faq dl {
      font-size: 16px;
   }
   body.faq .faq dt::before{
      right: 28px;
   }
}