@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@800&display=swap');
:root {
  --bg-dark-link: #9df6f2;
  --red-txt: #dd2a2a; /*ca0000*/
  --header-height: 55px; /* 通常時ヘッダー高さ */
  --header-height-min: 44px; /* 検索順位でスクロール時のヘッダー高さ */
}
li[data-model-code-name="gpt_5_2_fast"],
li[data-model-code-name="gpt_5_2"],
li[data-model-code-name="gpt_5_2_thinking"]{
   display: none!important;
}
/*
.none-for-admin{
   display: none!important;
}
*/
span.slash{
   font-size: .77em;
   transform: skewX(2deg);
   margin: 0 2px;
   display: inline-block;
}
.italic{
   font-style: italic;
}
.llmo-compass-prefix{
   display: inline-block;
   transform: skewX(-10deg);
   margin-right: 3px;
}
.asterisk{
   color: #3e3e3e;
}
.no-margin{
   margin: 0!important;
}
span.plus {
   transform: translate(.05em, -.7em);
   display: inline-block;
   padding: 0 .2em 0 .1em;
   font-size: .8em;
}
.notice-modal.help{
   position: absolute;
   top: -193px;
   width: 276px;
   left: calc(50% - 15px);
   transform: translateX(-50%);
   font-size: 13px;
   background-color: #1a5152;
   color: #fff;
   padding: 13px 15px 10px;
   border-radius: 5px;
   box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
   transition: .2s;
   z-index: 999;
}
.notice-modal.help>div{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.notice-modal.help::before{
   content: '';
   position: absolute;
   background-color: #1a5152;
   width: 20px;
   height: 25px;
   clip-path: polygon(0 0, 100% 0%, 50% 100%);
   top: -17px;
   left: calc(50% - 38px);
   transform: translateX(-50%) rotate(-170deg);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
}
.notice-modal.help .checkbox-wrapper {
   margin-top: 10px;
}
.notice-modal.help .btn-wrapper{
   margin: 10px 0 5px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.notice-modal.help .close-notice{
   background-color: #000!important;
   color: #fff!important;
   padding: 0 10px!important;
   height: 30px!important;
   border-radius: 2px!important;
   font-size: 13px!important;
   margin: 0!important;
}

.notice-modal.help p{
   margin: 0;
   font-size: 13px;
}
.notice-modal.help a{
   color: var(--bg-dark-link);
   display: block;
   margin: 3px 0 0 18px;
   line-height: 19px;
   font-size: 13px;
}
.notice-modal.help a.ref:before{
   content:url(../images/icons/right-arrow-simple-light-blue.svg);
   width: 7px;
   transform: translateY(-2px);
   position: absolute;
   left: -13px;
}
.notice-modal.help button {
   min-width: unset!important;
   max-height: unset!important;

}
.red-txt{
   color: var(--red-txt)!important;
}
mark{
   background-color: transparent !important;
   background: linear-gradient(transparent 60%, #d0f5f9 0%);
}
.modal-bg.notice-modal{
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
}
.notice-modal .modal-wrapper{
   padding: 46px 15px 40px;
   overflow-y: auto;
   overflow-x: hidden;
}
.modal-bg.notice-modal input[type="checkbox"]+span::after {
   top: calc(50% - 2px);
}
.notice-modal .modal-wrapper h2:first-of-type {
   margin: 0 0 30px 0;
}
.notice-modal .checkbox-wrapper{
   margin: 25px 0 5px;
}
@keyframes hue-rotate-1 {
   0% {filter: hue-rotate(360deg);}
 100% {filter: hue-rotate(0deg);}
}
@keyframes hue-rotate-2 {
   0% {filter: hue-rotate(0deg);}
 100% {filter: hue-rotate(360deg);}
}
.non-text-decoration{
   text-decoration: none;
}
a:focus-visible,
button:focus-visible,
span:focus-visible,
div:focus-visible:not(.mdf),
dt:focus-visible,
li:focus-visible,
input[type="radio"].visible-none:focus-visible+span{
   outline: 2px solid #00b5c2;
}
input[type="radio"]:focus+span::before{
   outline: 1px solid #00b5c2;
}

input[type=checkbox]:focus+span::before{
   outline: 1px solid #8eafaf;
}
.br-logo-link-wrapper.small{
   display: none;
}
.preparation>a,
.preparation>input,
.preparation>label{
   pointer-events: none;
   color: #ccc!important;
}
.preparation{
   position: relative;
}
.preparation::after {
   position: absolute;
   right: -45px;
   top: 50%;
   transform: translateY(-50%);
   content: '\6e96\5099\4e2d';
   background-color: #e0e0e0;
   color: #959595;
   font-size: 12px;
   padding: 0px 7px;
   height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
}
br.for-420{
   display: none;
}
img{
   max-width: 100%;
   display: block;
}
h1, h2, h3, h4, h5, h6{
   position: relative;
}
h1.line{
   text-align: left;
}
.h1-line-wrapper {
    width: 100%;
}
h1.line>span{
   display: inline-block;
   background-color: #fff;
   z-index: 1;
   position: relative;
   padding-right: 20px;
}
h1.line::after{
   content: '';
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
   width: 100%;
   border-bottom: 1px dashed #b1c2d0;
   z-index: 0;
}
.text-center{
   text-align: center!important;
}
.text-left{
   text-align: left!important;
}
.text-right{
   text-align: right!important;
}
.vertical-middle{
   vertical-align: middle!important;
}
.flex-box{
   display: flex;
}
.flex-box.align-center{
   align-items: center;
}
.flex-box.align-start{
   align-items: start;
}
.flex-box.align-end{
   align-items: end;
}
.flex-box.justify-center{
   justify-content: center;
}
.flex-box.justify-start{
   justify-content: start;
}
.flex-box.justify-end{
   justify-content: end;
}
.flex-box.direction-column{
   flex-direction: column;
}


.inline-block{
   display: inline-block;
}
.relative{
   position: relative;
}
.absolute{
   position: absolute;
}

/*------------------------------------------------------------------
reset
------------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,button,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,
b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,
hgroup,menu,nav,section,summary,time,mark,audio,video,main,
textarea, input{
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background-color: transparent;
   box-sizing: border-box;
}
table{
   border-spacing:0;
   border-collapse:collapse;
}
legend{
   display: contents;
}
address{font-style: normal;}
cite {font-style: normal;}
ul{
   list-style-type: none;
}
@font-face{
   font-family:'icons';
   src:url('../resources/fonts/icons.ttf') format('truetype'),
      url('../resources/fonts/icons.woff') format('woff'),
      url('../resources/fonts/icons.svg') format('svg');
   font-weight:400;
   font-style:normal;
   font-display: swap;
}
[class^="fa-"],[class*=" fa-"]{
   font-family:'icons'!important;
   font-style:normal;
   font-weight:400;
   font-variant:normal;
   text-transform:none;
   line-height:1;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
}
a[target="_blank"]:not(.no-icon){
   text-decoration:none;
}
a[target="_blank"]:not(.no-icon, .tooltip)::after{
   font-family:"icons";
   content:'\e922';
   font-size:90%;
   margin:0 .3em 0 .3em;
   display: inline-block;
   text-indent: 0;
}
.visually-hidden{
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}
.scrollbar-customize{
   scrollbar-width: thin;
   scrollbar-color: #d2dce6 transparent;
}
.scrollbar-customize.color{
   scrollbar-color: #677078 transparent;
}
html.scrollbar-customize {
    scrollbar-color: #c0cdda transparent;
}
.scrollbar-customize::-webkit-scrollbar{
   width: 7px;
   height: 7px;
}
.scrollbar-customize::-webkit-scrollbar-track{
   background-color: transparent;
}
.scrollbar-customize::-webkit-scrollbar-thumb{
   background-color: #d2dce6;
   border-radius: 5px;
}
.scrollbar-customize.color::-webkit-scrollbar-track{
   background-color: #527292;
}
.scrollbar-customize.sq::-webkit-scrollbar-thumb{
   border-radius: 0;
}
.radio-wrapper{
   position :relative;
}
.tabs{
   display: flex;
   flex-wrap: wrap;
}
/*-----------------------------------------------------------------------
エラーページ（404、419）
-------------------------------------------------------------------------*/
.page-error{
   text-align: center;
   justify-content: center;
}
.page-error p{
   margin: 1em auto;
}
.page-error .toTop{
   font-size: 20px;
}
/*-----------------------------------------------------------------------
ul, ol
-------------------------------------------------------------------------*/
ul, ol{
   padding:.1em 0 .1em 1.8em;
}
ul.std, ol.std{
   list-style-type:none;
}
ul.std, ol.std{
   padding:.1em 0 .1em 2em;
   list-style-type: none!important;
   margin: 11px 0;
   line-height: 2em;
}
ul.std li>ul,ol.std li>ul{
   padding:0 0 .1em 1em;
}
ul.std li{
   position:relative;
   text-indent:-.3em;
   line-height: 26px;
}
ul.note li{
   line-height: 17px;
}
ul.std li:not(last-of-type){
   margin-bottom: 9px;
}
ul.note li:not(last-of-type){
   margin-bottom: 3px;
}
table ul.std li{
   text-indent:0em;
}
ul.std li:not(:nth-of-type(1)){
   margin-top:.4em;
}
ul.std li::before{
   content: "";
   display: inline-block;
   position: relative;
   top: -0.25em;
   left: -7px;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background-color: #30a1bf;
}
ul.note li::before {
   content: "\203b";
   display: inline-block;
   position: relative;
   top: -0.2em;
   left: -10px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: #0e0d3a;
}
ul.std li li::before{
   content: "";
   position: absolute;
   top: calc(50% + -2px);
   transform: translate(-50%);
   left: -17px;
   width: 6px;
   height: 2px;
   border-radius: 0;
   background-color:#0e0d3a;
}
ol.std ol{
   padding:.5em 0em .5em 1.5em;
}
ol.std li{
   position:relative;
   counter-increment:FirstNode;
   padding-inline-start:.8em;
}
ol.std li li{
   counter-increment:SecondNode;
   padding-inline-start:1em;
}
ol.std li:not(ul>li):nth-of-type(-n + 9)::before{
   position:absolute;
   content:counter(FirstNode);
   color:#0e0d3a;
   left:-16px;
   top:-1px;
}
ol.std li:not(ul>li):nth-of-type(n + 10)::before{
   position:absolute;
   content:counter(FirstNode);
   color:#0e0d3a;
   left:-27px;
   top:-1px;
}
ol.std li:not(ul>li)::after{
   content: '.';
   color:#0e0d3a;
   position:absolute;
   left: -3px;
   top: -2px;
   font-size: 1.5em;
}
ol.std li li:not(ul>li)::before{
   content:counter(FirstNode) '. ' counter(SecondNode);
   position:absolute;
   left:-40px!important;
}
ul.note li::before{
   content: '*';
   top:0;
   width:0;
   height:0;
   border-radius:0;
   background-color:transparent;
}
ul.note li{
   text-indent:0em;
}
/*-----------------------------------------------------------------------
table
-------------------------------------------------------------------------*/
table.simple{
   margin:0 auto;
   width:100%;
}
table.simple tr{
   border-bottom:1px solid #afafaf;
}
table.simple tr.dividing{
   border-bottom: 1px solid #6d6d6d;
}
table.simple th{
   text-align:left;
   font-weight:700;
   padding: 15px 20px;
}
table.simple td{
   width:auto;
   padding:.8em 25px;
   line-height:1.6;
}
table.simple{
   border-top:1px solid #afafaf;
}
main table.simple ul{
   margin:0;
   padding:7px 0 7px 20px;
}

/*-----------------------------------------------------------------------
input
-------------------------------------------------------------------------*/
input,textarea,button{
   font-family: '游ゴシック体 Medium', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', sans-serif;
   font-size:1rem;
   -webkit-appearance:none;
   appearance:none;
   border-radius:0;
}
button,
select{
   color: #000;
}
select{
   font-family: '游ゴシック体 Medium', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', sans-serif;
   font-size: 14px;
   border-radius:0;
}
html.spMenu-opened{
   overflow-y: hidden;
}
body{
   font-size: 16px;
   width:100%;
   overflow-x: hidden;
   background-repeat:no-repeat;
   font-family: '游ゴシック体 Medium', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', sans-serif;
   -webkit-font-smoothing:antialiased;
   -webkit-text-size-adjust:100%;
   -webkit-appearance:none;
   position: relative;
}
input:disabled,
textarea:disabled,
select:disabled,
input[readonly],
textarea[readonly]{
   background-color: #e3e3e3!important;
   border: 1px solid #e3e3e3!important;
   color: #afafaf!important;
}
button:disabled,
a.disabled{
   background: #e3e3e3!important;
   color: #afafaf!important;
}
label .note{
   font-weight: normal;
}
input:disabled+span,
input:disabled+span span{
   color: #afafaf!important;
}
input[type="radio"]:disabled+span::before{
   background-color: #ececec !important;
   border: 1px solid #e3e3e3 !important;
}
.select-wrapper+.note,
textarea+.note{
   margin: 5px 0 .5em;
}
.InputContainer .InputElement {
   background-color: #e3e3e3;
   border: none;
}
.checkbox-wrapper,
.radio-wrapper{
   display: flex;
   align-items: center;
}
.checkboxes-wrapper{
   display: flex;
   flex-direction: column;
   gap: 4px;
}
input[type=checkbox],
input[type=radio] {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  border: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
input[type="radio"]+span{
   position:relative;
   padding-left:29px;
   line-height: 1.5em;
}
input[type="checkbox"]+span{
   position:relative;
   padding-left: 29px;
   display: inline-block;
}
input[type="radio"]+span::before,
input[type="radio"]+span::after{
   position:absolute;
   content:'';
   display:block;
   left: 0;
   border-radius:50%;
   top: calc(50% - 1px);
   transform: translateY(-50%);
   transition:.3s;
}
input[type="radio"]+span::before{
   width:15px;
   height:15px;
   background:#fff;
   border:1px solid #bfbfbf;
}

input[type="radio"]+span::after{
   width:9px;
   height:9px;
   background:#20c3ac;
   left: 4px;
   opacity:0;
}
.br+span{
   margin-left: 2px;
}

input[type="radio"]:disabled+span::after{
   background:#dedede;
}
input[type="radio"]:checked+span::after{
   opacity:1;
}
.radios-wrapper{
   display: flex;
   flex-wrap: wrap;
   gap: 7px 11px;
   margin: 0 0 0 25px;
}
.radios-wrapper>.radio-wrapper:not(:last-of-type){
   margin-right: 15px;
}
input[type="checkbox"]+span::before {
   position: absolute;
   content: '';
   display: block;
   width: 20px;
   height: 20px;
   background-color: #fff;
   border: 1px solid #bfbfbf;
   left: -2px;
   top: 50%;
   transform: translateY(-50%);
}
input[type="checkbox"]:disabled+span::before {
   background-color: #e3e3e3;
   border: 1px solid #dbdbdb;
}
input[type="checkbox"]+span::after {
   position: absolute;
   content: url(../images/icons/check.svg);
   display: block;
   left: 1px;
   top: calc(50% + 0px);
   transform: translateY(-50%);
   opacity: 0;
   transition: .3s;
   width: 16px;
   height: 16px;
}
input[type="checkbox"]:disabled+span::after {
   content: url(../images/icons/check-disabled.svg);
}
input[type="checkbox"]:checked+span::after{
   opacity:1;
}
.checkbox:hover,
.radio:hover,
select:hover{
   cursor:pointer;
}
input:not([type="range"]):focus,
textarea:focus,
select:focus{
   outline:none;
   box-shadow:inset 1px 1px 1px #8eafaf,inset -1px -1px 1px #8eafaf;
}
input[readonly]:focus{
   box-shadow: none;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select{
   border:1px solid #e0eef2;
   background-color:#ecf3f5;
   padding: 8px 12px;
   width: 100%;
}
input[type="file"]{
   display: none;
}
dd.attachment{
   display: flex;
   align-items: center;
}
label.attachment{
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 5px 12px;
   background-color: #eaeaea;
   border: 1px solid #ccc;
   color: #000000;
   font-size:15px;
   cursor: pointer;
   transition: .3s;
}
label.attachment:hover{
   opacity: .7;
}
.file-name-display{
   font-size:15px;
   margin-left: 12px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
#card-name{
   border: none;
}
select{
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
   padding-right: 2em!important;
}
select::-ms-expand {
   display: none;
}
.select-wrapper{
   position: relative;
   width: fit-content;
}
.select-trigger{
   position: relative;
   display: flex;
   align-items: center;
}
.select-wrapper::after{
   content: '';
	position: absolute;
	top: calc(50% - 1px);
   transform: translateY(-50%);
   right: 10px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #4b727d;
	pointer-events: none;
   transition: .5s;
}
.select-wrapper.disabled::after{
	border-top: 4px solid #afafaf;
}
.select-wrapper.opened::after{
   content: '';
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: unset;
   border-bottom: 4px solid #4b727d;
}
input::placeholder,
textarea::placeholder{
   color: #c0c0c0;
}
input.search-data::placeholder{
   color: #bcc8ca;
   font-size: 14px;
}
textarea{
   display: block;
   overflow:auto;
   resize:vertical;
}
button{
   border: none;
}
button:not(:disabled){
   cursor: pointer;
}
a{
   cursor: pointer;
   transition: .3s;
}
a:hover{
   opacity: .7;
   transition: .3s;
}
input[type="range"]{
   background-color:#d8e2e3;
   border: none;
}
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
}
input[type="range"]::-moz-range-thumb {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
   border: none;
}
input[type="range"]::-webkit-slider-thumb {
   background-color: #20c3ac;
}
input[type="range"]::-moz-range-thumb {
   background-color: #20c3ac;
}

/*-----------------------------------------------------------------------
textLink
-------------------------------------------------------------------------*/
a ,a:visited ,p a:visited ,figcaption a:visited{
   color: #246ab1;
   word-break: break-all;
}
.textLink,
.ref{
   text-decoration:none;
   position: relative;
}
.textLink::before,
.ref::before{
   content: url(../images/icons/right-arrow-simple-b.svg);
   transition: .3s;
   margin-right: 5px;
   transform: translateY(-1px);
   display: inline-block;
}
/*-----------------------------------------------------------------------
multiline-placeholder
-------------------------------------------------------------------------*/
.multiline-placeholder-wrapper {
   position: relative;
   width: 100%;
}
.placeholder {
   position: absolute;
   top: 10px;
   left: 13px;
   color: #C0C0C0;
   pointer-events: none;
   white-space: pre-wrap;
   text-align: left;
   font-family: inherit;
   font-size: 16px;
}
.multiline-placeholder-wrapper.textarea-focused .placeholder,
.multiline-placeholder-wrapper.textarea-notempty .placeholder {
   display: none;
}

/*------------------------------------------------------------------
common
------------------------------------------------------------------*/
@font-face{
   font-family:'Oleo Script';
   src:url(../resources/fonts/OleoScript-Regular.woff2) format('woff2');
   src:url(../resources/fonts/OleoScript-Regular.woff) format('woff');
   font-weight:400;
   font-style:normal;
   font-display:swap;
}
.bf,
.br{
   font-family: 'Oleo Script';
   font-weight:400;
   font-size: 1.2em;
}
span.divide{
   position:relative;
   margin: 0 5px 0 8px;
}
span.divide::before{
   content: '\ff5c'
}
p{
   margin:.5em 0;
}
body.ua-android,.ua-android input, .ua-android textarea, .ua-android button, .ua-android select{
   font-family: "yu-gothic-pr6n", sans-serif;
}
html{
   scroll-behavior:smooth;
}
.yu-m{
   font-family: '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;
}
.bf{
   font-family: 'Oleo Script', cursive;
   font-weight:400;
}
li{
   line-height: 2em;
   position: relative;
}
.signup-failed .btns-wrapper{
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 50px;
}
.signup-failed .change-plan{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 46px;
   padding: 5px 0px 5px 17px;
   width: 170px;
   margin: 30px auto 50px;
}
.btn, a.btn{
   padding: 10px 25px;
   background-color: #333;
   color: #fff;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
}
.btn.mini, a.btn.mini{
   font-size: 14px;
   padding: 7px 16px;
}
a.disabled{
   pointer-events: none;
   cursor: not-allowed;
}
button:not(:disabled):hover{
   opacity: .7;
   transition: .3s;
}
#cancelBtn, .cancelBtn, #no, .no, .back, .modal-wrapper button.logout{
   background-color: #717171;
   color: #fff;
}
.err-msg{
   color: var(--red-txt);
   font-size: 15px;
   margin: 5px 0 0.5em 2px;
   text-align: left;
}
.application-form-item .note {
   font-size: 14px;
   padding-left:0;
   margin-left: 15px;
}
.required, .optional {
   display: inline-block;
   font-size: 12px;
   width: 45px;
   min-width: 45px;
   height: 25px;
   line-height: 25px;
   text-align: center;
   color: #fff;
   margin-right: 10px;
   transform: translateY(-2px);
   font-weight: normal;
}
.required{
   background-color: #521f13;
}

.optional {
   background-color: #778e95;
}
.emphasis{
   color: var(--red-txt);
   font-weight: bold;
}
.required>span{
   width: 100%;
}
input.err, textarea.err, .err button, button.err{
   background-color: #ffebeb!important;
   border: 1px solid #eb7f7f!important;
}
h1{
   font-size: 30px;
   margin-bottom: 30px;
}
h2{
   font-size: 18px;
   margin: 30px 0 10px;
}
.doc{
   max-width: 1000px;
   margin: 0 auto;
   padding: 95px 25px 205px;
}
.doc.compact{
   max-width: 800px;
}
.align-change{
   text-align: center;
}
.rc-checkboxes-wrapper{
   display: flex;
   flex-direction: column;
   margin: 5px 0 30px 25px;
   gap: 5px;
}
input[type="email"]{
   min-width: 300px;
}
.btn-wrapper{
   margin: 20px 0;
}
#free-desc{
   width: 100%;
   margin-top: 5px;
}
.bold-w{font-weight:700;}
.normal-w{font-weight:400;}
.underline{
   position: relative;
}
.underline::after{
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 1px;
   background-color: #333;
}
.negative-amount,
.charge-breakdown .discount{
   color: var(--red-txt);
}
.f-size_12px{font-size:12px}
.f-size_13px{font-size:13px}
.f-size_14px{font-size:14px}
.f-size_15px{font-size:15px}
.f-size_16px{font-size:16px}
.f-size_18px{font-size:18px}
.f-size0_5{font-size:.5em;}
.f-size0_6{font-size:.6em;}
.f-size0_7{font-size:.7em;}
.f-size0_8{font-size:.8em;}
.f-size0_9{font-size:.9em;}
.f-size1_0{font-size:1em;}
.f-size1_1{font-size:1.1em;}
.f-size1_2{font-size:1.2em;}
.f-size1_3{font-size:1.3em;}
.f-size1_4{font-size:1.4em;}
.f-size1_5{font-size:1.5em;}
.f-size1_6{font-size:1.6em;}
.f-size1_7{font-size:1.7em;}
.f-size1_8{font-size:1.8em;}
.f-size1_9{font-size:1.9em;}
.f-size2_0{font-size:2em;}
.line-h1_5{line-height:1.5em;}
.line-h1_6{line-height:1.6em;}
.line-h1_7{line-height:1.7em;}
.line-h1_8{line-height:1.8em;}
.line-h1_9{line-height:1.9em;}
.line-h2_0{line-height:2em;}
.line-h2_5{line-height:2.5em;}
.line-h5_0{line-height:5em;}

.note{
   color: #3e3e3e;
   font-size: .8em;
   padding-left: 1.2em;
   text-indent: -0.75em;
   display: inline-block;
   text-align: left;
   width: 100%;
   line-height: 1.6em!important;
}
.accordionBtn{
   cursor: pointer;
}
.accordionPanel{
  height: 0;
  overflow: hidden;
  transition: .5s;
  margin: 0;
  padding: 0;
}
a.change-plan,
#change-plan,
a.ritera-add,
a.to-signup{
   display: block;
   text-decoration: none;
   background: linear-gradient(90deg,#353b7e,#35537e, #517ba6);
   /*background: linear-gradient(90deg, #1c917f, #31b6a2);*/
   /*background: linear-gradient(90deg, #285a6f, #358b9d)*/;
   color: #fff;
   text-align: center;
   position: relative;
   padding: 5px 15px;
}
#change-plan{
   width: 106px;
   padding: 5px 3px 5px 18px;
}
a.to-signup{
   width: 192px;
   padding: 10px 3px 10px 22px;
   margin: 25px auto;
}

a.change-plan::before,
#change-plan::before,
a.ritera-add:not(:disabled)::before,
a.to-signup::before{
   content: url(../images/icons/right-arrow-simple-w.svg);
   position: absolute;
   top: calc(50% - 1px);
   transform: translateY(-50%);
}
a.change-plan::before,
a.ritera-add::before,
a.to-signup::before{
   left: 20px;
}
#change-plan::before{
   left: 13px;
}
.plan-change:hover::before{
   transform: translateY(-50%) rotate(360deg);
   transition: .5s cubic-bezier(0.82, 0.27, 0.43, 1.01);
}

/*-----------------------------------------------------------------------
responsive
-------------------------------------------------------------------------*/
@media screen and (max-width:1024px){
   .f-size1_5-tb{
      font-size:1.5rem!important;
   }
   .f-size1_4-tb{
      font-size:1.4rem!important;
   }
   .f-size1_3-tb{
      font-size:1.3rem!important;
   }
   .f-size1_2-tb{
      font-size:1.2rem!important;
   }
   .f-size1_1-tb{
      font-size:1.1rem!important;
   }
   .f-size1_0-tb{
      font-size:1.0rem!important;
   }
}
@media screen and (max-width:599px){
   .f-size1_5-sp{
      font-size:1.5rem!important;
   }
   .f-size1_4-sp{
      font-size:1.4rem!important;
   }
   .f-size1_3-sp{
      font-size:1.3rem!important;
   }
   .f-size1_2-sp{
      font-size:1.2rem!important;
   }
   .f-size1_1-sp{
      font-size:1.1rem!important;
   }
   .f-size1_0-sp{
      font-size:1.0rem!important;
   }
}
@media screen and (max-width:1024px){
   .del-tb{
      display:none!important;
   }
}
@media screen and (max-width:767px){
   .del-767{
      display:none!important;
   }
}
@media screen and (max-width:599px){
   .del-sp{
      display:none!important;
   }
}
@media screen and (max-width:375px){
   .del-spMini{
      display:none!important;
   }
}
@media screen and (min-width:376px){
   .for-spMini{
      display:none!important;
   }
}
@media screen and (min-width:600px){
   .for-sp{
      display: none!important;
   }
}
@media screen and (min-width:768px){
   .for-768{
      display: none!important;
   }
}
@media screen and (min-width:1000px){
   .for-1000{
      display: none!important;
   }
}
@media screen and (min-width:1025px){
   .for-tb{
      display: none!important;
   }
}
@keyframes fade{
   0%{ opacity: 0;}
 100%{ opacity: 1;}
}
/*------------------------------------------------------------------
header
------------------------------------------------------------------*/
header{
   height: var(--header-height);
   display: flex;
   align-items: center;
   background: linear-gradient(90deg,#353b7e,#35537e, #517ba6);
   box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
   position: fixed;
   justify-content: space-between;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100002;
}
.br-logo-wrapper{
   max-height: 55px;
   display: flex;
   gap: 12px;
   align-items: center;
}
nav.app.pc{
   position :relative;
}
header .logo{
   height: 32px;
   margin: 0 0 0 10px;
}
.header-nav-wrapper.sp{
   display: none;
}
.header-nav-wrapper a{
   position: relative;
   color: #fff!important;
   text-decoration: none;
   display: block;
}
.nav-bottom{
   display: flex;
   flex-direction: column;
   gap: 7px;
}
.br-logo-wrapper .br-logo{
   position: relative;
   min-width: 80px;
   height: 100px;
   transform: scale(.7);
}
.logo-mark{
   position: absolute;
   transform: translate(-50%, -50%);
}
.logo-01{
   top: 50%;
   left: 50%;
   z-index: 2;
   width :30px;
}
.logo-02{
   top: 70%;
   left: 70%;
   z-index: 1;
   animation: logo-02 3s forwards;
   width :40px;
}
.logo-03{
   top: 70%;
   left: 23%;
   z-index: 1;
   animation: logo-03 3s forwards;
   width :40px;
}
.logo-04{
   top: 30%;
   left: 35%;
   z-index: 1;
   animation: logo-04 3s forwards;
   width :40px;
}
.logo-05{
   top: 30%;
   left: 82%;
   z-index: 1;
   animation: logo-05 3s forwards;
   width :40px;
}
@keyframes logo-02{
   0%{ top: 77%; left: 73%; transform: rotate( 10deg) translate(-50%, -50%); }
 100%{ top: 70%; left: 70%; transform: rotate( 0deg) translate(-50%, -50%); }
}
@keyframes logo-03{
   0%{ top: 65%; left: 20%; transform: rotate( -30deg) translate(-50%, -50%); }
 100%{ top: 70%; left: 23%; transform: rotate( 0deg) translate(-50%, -50%); }
}
@keyframes logo-04{
   0%{ top: 17%; left: 13%; transform: rotate( 10deg) translate(-50%, -50%); }
 100%{ top: 30%; left: 35%; transform: rotate( 0deg) translate(-50%, -50%); }
}
@keyframes logo-05{
   0%{ top: 17%; left: 90%; transform: rotate( 20deg) translate(-50%, -50%); }
 100%{ top: 30%; left: 82%; transform: rotate( 0deg) translate(-50%, -50%); }
}
header>.br-logo-link-wrapper .br-logo,
.small .br-logo-wrapper .br-logo{
   position: relative;
   width: 80px;
   transform: scale(.4);
   margin-bottom: 14px;
   margin: 0 -22px 2px -12px;
}
header>.br-logo-link-wrapper .br-logo{
   height: 100px;
}
.small .br-logo-wrapper .br-logo{
   height: 60px;
}
.br-logo-wrapper>img {
   margin-top: 5px;
   height: 31px;
   width: auto;
}
/*------------------------------------------------------------------
main
------------------------------------------------------------------*/
main{
   margin-top: 55px;
}
.top main{
   margin-top: 0;
   position: relative;
}

/*------------------------------------------------------------------
footer
------------------------------------------------------------------*/
footer{
   width: 100%;
   margin-top: 20px;
}
.f-h + footer,
.f-h + script + footer{
   position: absolute;
   bottom: 0;
}
.footer-inner{
   font-size: 12px;
   padding: 0 15px 3px;
   margin: 0 auto 4px;
   text-align: center;
}
.footer-inner a{
   color: #333;
   text-decoration: none;
}
.copyright-wrapper{
   background-color: #dedede;
   color: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
}
.copyright-wrapper a{
   color: #000!important;
   text-decoration: none;
}
.gib{
   font-weight: bold;
}
p.recaptcha {
   margin-top: 30px;
   font-size: 12px;
   text-align: center;
   line-height: 1.4;
}
/*------------------------------------------------------------------
modal
------------------------------------------------------------------*/
.modal-wrapper h2:first-of-type {
   margin: 0 0 30px 0;
}
.modal-wrapper h3 {
   text-align: left;
   margin: 0 0 3px 2px;
   white-space: nowrap;
}
.modal-bg{
   position: fixed;
   margin-top: -55px;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.7);
   z-index: 100002;
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: hidden;
   pointer-events: none;
   opacity: 0;
   transition: .2s;
}
.modal-bg.active{
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
}
.modal-wrapper{
   position: relative;
   min-width: 300px;
   max-width: 1100px;
   max-height: 95vh;
   background-color: #fff;
   text-align: center;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   box-shadow: 0 0 25px rgba(0,0,0, .5);
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 46px 15px 43px;
   margin: 0 20px;
   transition: .3s;
}
.modal-content{
   padding: 2px 35px;
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
   gap: 50px;
   transition: .3s;
   overscroll-behavior-y: contain;
}
.select-model-desc{
   margin: 0 0 20px;
}
.close-modal-atTitleBar{
   position: absolute;
   top: 11px;
   right: 11px;
   width: 20px;
   height: 20px;
   background-color: transparent;
}
.close-modal-atTitleBar::before,
.close-modal-atTitleBar::after{
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height:1px;
   background-color: #000;
}
.close-modal-atTitleBar::before{
   transform: translate(-50%, -50%) rotate(45deg);
}
.close-modal-atTitleBar::after{
   transform: translate(-50%, -50%) rotate(-45deg);
}
.cancel .btns-wrapper{
   display: flex;
   margin-top: 20px;
   gap: 10px;
   justify-content: center;
}
.cancel #cancel{
   background-color: #333;
   color: #fff;
   padding: 10px 30px;
}
.modal-choice-wrapper{
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 35px;
   justify-content: center;
}
.notice-modal .modal-choice-wrapper{
   margin-top: 15px;
}

.modal-wrapper input{
   width: 100%;
}
.modal-wrapper #yes,
.modal-wrapper .close-modal{
   width: 100px;
   padding: 10px;
}
.modal-wrapper #ok,
.modal-wrapper #cancelBtn, .cancelBtn,
#addRiteraBtn{
   width: 115px;
   padding: 10px;
}
.noticeMsg{
   margin: 40px 0 0;
   font-size: 13px;
   text-align: left;
   line-height: 1.6em !important;
}
.modal-content .goBack{
   width: 100px;
}

/*********************************************************************************
1260px
**********************************************************************************/
@media screen and (max-width: 1260px){
   .sp .overlay {
      position:fixed;
      top:0;
      background-color:#000;
      width:100%;
      height:100%;
      opacity:0;
      visibility: hidden;
      pointer-events: none;
   }
   .sp.active .overlay,
   .overlay.active{
     left:0;
     opacity:0.6;
     visibility: visible;
     pointer-events: auto;
     transition:0.5s;
   }
   .spMenu-container {
      position: fixed;
      top: 0px;
      right: -100vw;
      width: 87%;
      height: 100vh;
      background-color: #353b7e;
      transition: all .5s;
      opacity: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 1;
   }
   .spMenu-container>div:first-of-type {
      display: flex;
      flex-direction: column;
      gap: 50px;
      padding-top: 60px;
      height: 100%;
   }
   .sp.active .spMenu-container{
      right: 0;
      opacity: 1;
   }
   .spMenuBtn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 11px;
      width: 30px;
      height: 40px;
      color:#fff;
      font-size:7pt;
      border: none;
      background-color:transparent;
      transition: .5s;
      border-radius:2px;
      padding: 0;
      z-index: 1;
   }
   .active .spMenuBtn {
      position: absolute;
      z-index: 2;
      transition: .5s;
   }
   .spMenuBtn-container {
      position:relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
   }
   .spMenuBtn-container .bar {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      border-radius: 4px;
      background-color: #fff;
      transition:.5s;
   }
   .spMenu-opened .spMenuBtn-container .bar {
      height: 1px;
   }
   .spMenu-opened .spMenuBtn-container .bar{
      background-color:#fff;
   }
   .spMenuBtn-container .bar:nth-of-type(1) {
      top: 5px;
   }
   .spMenuBtn-container .bar:nth-of-type(2) {
      top: 15px;
      left: 0;
      width: 23px;
   }
   .spMenuBtn-container span:last-child {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -1px;
      color: #fff;
   }
   .spMenu-opened .spMenuBtn-container span:nth-of-type(1) {
      transform: rotate(-45deg);
      top: 12px;
   }
   .spMenu-opened .spMenuBtn-container span:nth-of-type(2) {
      transform: rotate(45deg);
      width: 30px;
      top: 12px;
   }
   .spMenu-list{
      padding: 110px 0 0 50px;
   }
   .spMenu-list #config,
   .spMenu-list #logout-atSP {
      padding: 10px 15px 8px;
      text-align: left;
      width: 100%;
      background-color: transparent;
   }
   .small .br-logo-link-wrapper{
      height: 86px;
   }
   .small .logo-01 {
      width: 20px;
   }
   .small .logo-02,
   .small .logo-03,
   .small .logo-04,
   .small .logo-05 {
      width: 26px;
   }
   .small .logo-02{
      animation: logo-02-small 3s forwards;
   }
   .small .logo-03{
      animation: logo-03-small 3s forwards;
   }
   .small .logo-04{
      animation: logo-04-small 3s forwards;
   }
   .small .logo-05{
      animation: logo-05-small 3s forwards;
   }
   @keyframes logo-02-small{
      0%{ top: 86%; left: 73%; transform: rotate( 10deg) translate(-50%, -50%); }
    100%{ top: 71%; left: 66%; transform: rotate( 0deg) translate(-50%, -50%); }
   }
   @keyframes logo-03-small{
      0%{ top: 86%; left: 20%; transform: rotate( -30deg) translate(-50%, -50%); }
    100%{ top: 71%; left: 30%; transform: rotate( 0deg) translate(-50%, -50%); }
   }
   @keyframes logo-04-small{
      0%{ top: 10%; left: 25%; transform: rotate( 10deg) translate(-50%, -50%); }
    100%{ top: 21%; left: 40%; transform: rotate( 0deg) translate(-50%, -50%); }
   }
   @keyframes logo-05-small{
      0%{ top: 10%; left: 80%; transform: rotate( 20deg) translate(-50%, -50%); }
    100%{ top: 20%; left: 74%; transform: rotate( 0deg) translate(-50%, -50%); }
   }
   .small .br-logo-wrapper {
      gap: 2px;
   }
   .small .br-logo-wrapper>img {
      width: 155px;
   }
}
/*********************************************************************************
599px
**********************************************************************************/
@media screen and (max-width: 599px){
   h1{
      font-size: 25px;
   }
   .align-change{
      text-align: left;
   }
   .doc{
      padding: 30px 15px 180px;
   }
   table.rsp th{
      display:block;
      width:100%;
      padding: 10px 0 0 7px;
   }
   table.rsp td{
      display:block;
      width:100%;
      padding: 10px 0 10px 7px;
   }
   .questionnaire {
      min-width: unset;
   }
   /*
   html{
     overflow-x: hidden;
   }
   */
}
/*********************************************************************************
540px
**********************************************************************************/
@media screen and (max-width: 540px){
   .notice-modal.help{
      left: calc(50% + 10px);
   }
}
/*********************************************************************************
485px
**********************************************************************************/
@media screen and (max-width: 485px){
   .notice-modal.help{
      left: calc(50% - 15px);
   }
   .notice-modal .modal-wrapper{
      padding: 30px 15px 20px;
   }
}
/*********************************************************************************
420px
**********************************************************************************/
@media screen and (max-width: 420px){
   br.for-420{
      display: block;
   }
}