/* Main section */
html {
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar {
display: none;
}
body {
background: #F4FEFE;
font-family: 'Noto Sans JP', sans-serif !important;
margin: unset !important;
}
.flash-message {
background-color: #4ca4af; /* 緑色の背景 */
color: white; /* 白色の文字 */
padding: 15px; /* 内側の余白 */
margin: 15px 0; /* 上下の余白 */
border-radius: 5px; /* 角を丸くする */
text-align: center; /* 中央揃え */
font-size: 16px; /* フォントサイズ */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
}
nav.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 18px 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 0px 0px 10px 10px;
position: sticky;
top: 0px;
z-index: 99;
/* transform: translateY(-100%); */
opacity: 0;
}
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
nav.category-navbar {
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
padding: 17px 30px;
height: fit-content;
background: transparent;
border-radius: 0px 0px 10px 10px;
position: sticky;
top: 0px;
z-index: 99;
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
nav.category-navbar *{
pointer-events: auto;
}
nav.later-background{
background: rgba(255, 255, 255, 0.8) !important;
z-index: 9999999;
}
nav.later-background-imp{
background: rgba(255, 255, 255, 0.8) !important;
z-index: 99;
}
.nav-logo-section {
height: fit-content;
position: relative;
}
.new-post-header{
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
color: #333333;
}
.nav-logo-body{
position: relative;
}
.category-image{
max-width: unset;
}
.nav-logo-label{
position: absolute;
left: 29.5%;
bottom: -77%;
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 14px;
color: #555555;
}
.category-nav-logo-label{
position: absolute;
left: 29.5%;
bottom: -253%;
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 14px;
color: #555555;
}
.nav-profile-section {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 20px;
height: 42px;
}
.nav-profile-section .user-icon{
width: 42px;
height: 42px;
transition: opacity 0.3s ease;
}
.nav-profile-section .user-icon:hover {
opacity: 0.6;
}
.category-container{
position: relative;
}
footer.footer {
text-align: center;
width: 100%;
position: absolute;
}
.main-content-body{
min-height: 80vh;
}
.footer-bottom footer.footer, .footer-bottom-login footer.footer, .footer-bottom-forget footer.footer, .footer-bottom-post-confirm footer.footer{
bottom: 0;
}
.footer-bottom-post-list footer.footer, .footer-bottom-login footer.footer{
bottom: -30px;
}
footer.footer span.footer-label{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 17px;
color: #333333;
}
footer.footer-new span.footer-label-new{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 17px;
color: #333333;
display: flex;
justify-content: center;
gap: 4px;
}
footer.footer-new .footer-image{
display: flex;
justify-self: center;
align-items: center;
cursor: pointer;
}
.breadcrumb-section{
position: relative;
width: 100%;
margin-top: 12px;
margin-bottom: 20px;
}
.crumb-group{
margin-bottom: 2.5%;
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
margin-right: 41%;
margin-top: 2%;
}
.post-list-crumb{
margin-bottom: -1%;
display: flex;
gap: 12px;
justify-content: start;
align-items: start;
margin-left: 12.5%;
margin-top: 2%;
}
.register-crumb{
margin-bottom: 2.5%;
display: flex;
gap: 12px;
justify-content: start;
align-items: start;
margin-left: 25.5%;
margin-top: 2%;
}
.post-submit-list-crumb{
margin-bottom: 2.5%;
display: flex;
gap: 12px;
justify-content: center;
align-items: start;
margin-right: 36%;
margin-top: 2%;
}
.crumb-logo{
display: flex;
align-items: end;
font-style: normal;
font-weight: 500;
font-size: 12px;
color: #333333;
}
.crumb-logo a{
align-items: center;
display: flex;
gap: 5px;
}
.ns-interceptor-div {
display: none !important;
height: 0 !important;
}
.crumb-arrow{
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
color: #333333;
}
.crumb-home{
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
color: #333333;
white-space: nowrap;
text-decoration: underline;
}
.crumb-page{
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
color: #333333;
max-width: 1090px;
word-wrap: break-word;
}
.crumb-page-back{
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
white-space: nowrap;
cursor: pointer;
color: #333333;
}
.fixed-buttons{
position: fixed;
bottom: 4%;
left:69%;
display: flex;
justify-content: end;
gap: 15px;
/* width: 195px; */
}
.add-post{
background-color: #F07700;
border-radius: 50%;
height: 90px;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
text-decoration: none;
}
.add-post-top{
background-color: #F07700;
border-radius: 50%;
height: 90px;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
text-decoration: none;
}
.hideen-for-pc-screen{
display: none;
}
.scroll-to-top-btn{
background-color: #555555;
border-radius: 50%;
height: 90px;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.scroll-to-top-btn-top{
background-color: #555555;
border-radius: 50%;
height: 90px;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.scroll-to-top-btn-register{
position: fixed;
bottom: 4%;
left: 65%;
background-color: #555555;
border-radius: 50%;
height: 90px;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
.scroll-to-top-btn:hover, .scroll-to-top-btn-top:hover, .scroll-to-top-btn-register:hover{
opacity: 0.9;
}
.scroll-to-top-btn span, .scroll-to-top-btn-top span, .scroll-to-top-btn-register span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 22px;
/* identical to box height, or 157% */
color: #FFFFFF;
}
.add-post:hover{
opacity: 0.9;
}
.add-post span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 22px;
color: #FFFFFF;
}
.add-post-top:hover{
opacity: 0.9;
}
.add-post-top span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 22px;
color: #FFFFFF;
}
/* login-section */
.login-container{
width: 100%;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.login-bottom-container{
animation: fadeIn 1s ease-out forwards;
margin-top: 30px;
width: 100%;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
margin-bottom: 110px;
}
.absolute-return{
position: absolute;
bottom: -70px;
left: 0px;
}
.blank-breadcrumb-space{
height: 80px;
}
.login-head, .new-post-head, .confirm-new-post-head{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 24px;
width: 100%;
height: 20px;
flex: none;
align-self: stretch;
flex-grow: 0;
}
.login-header{
width: 80px;
height: 20px;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #454545;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.login-body{
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;
width: 358px;
flex: none;
flex-grow: 0;
}
.field-section {
/* input_field */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 7px;
position: relative;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.field-section label span{
color: #DF4444;
}
.field-section label{
/* ラベルテキスト */
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
display: flex;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #555555;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.input-field{
/* Frame 243139 */
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 358px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.input-field::placeholder{
/* インプットテキスト */
width: 326px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #DDDDDD;
flex: none;
flex-grow: 1;
}
.password-field-relative{
position: relative;
}
.icon-eye {
position: absolute;
right: 4.17%;
top: 20%;
transform: scale(0.7);
width: 30px;
height: 26px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-repeat: no-repeat;
}
.icon-eye-reset {
position: absolute;
right: 4.17%;
top: 50%;
transform: scale(0.7);
width: 30px;
height: 26px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-repeat: no-repeat;
}
.icon-eye-edit {
position: absolute;
right: 4.17%;;
top: 52%;
transform: scale(0.7);
width: 30px;
height: 26px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-repeat: no-repeat;
}
.login-foot {
/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 30px;
flex: none;
align-self: stretch;
flex-grow: 0;
}
.submit-form{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
cursor: pointer;
width: 340px;
height: 48px;
background: #6DAD19;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
flex: none;
align-self: stretch;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.submit-form2{
/* button_01 */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
cursor: pointer;
width: 340px;
height: 48px;
background: #F07700;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
flex: none;
align-self: stretch;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.submit-form3{
/* button_01 */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
cursor: pointer;
width: 340px;
height: 48px;
background: #00ACD9;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
flex: none;
align-self: stretch;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.submit-form:hover{
opacity: 0.8;
}
.submit-form2:hover{
opacity: 0.8;
}
.submit-form3:hover{
opacity: 0.8;
}
.bigger-submit-form{
width: 358px !important;
}
.button-text{
/* テキスト */
width: fit-content;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
text-align: center;
color: #FFFFFF;
/* Inside auto layout */
flex: none;
flex-grow: 1;
}
.foot-second-content{
/* Frame 243950 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 10px;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.register-redirect-link{
/* 会員登録がまだの方はこちら */
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
text-decoration-line: underline;
color: #333333;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.login-bottom-note{
/* ※会員登録をすると投稿やコメントが出来ます。 */
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #FA7184;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
.reset-password-redirect-link{
/* パスワードを忘れた方はこちら */
width: 165px;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
text-decoration-line: underline;
color: #333333;
/* Inside auto layout */
flex: none;
flex-grow: 0;
}
/* reset-password-section */
.reset-password-container{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 48px;
margin-bottom: 10px;
}
.reset-head{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 24px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.reset-body{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;
flex: none;
order: 1;
flex-grow: 0;
}
.reset-foot{
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
gap: 20px;
flex: none;
order: 2;
align-self: stretch;
flex-grow: 0;
}
.reset-head-header{
/* パスワード再設定 */
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
/* identical to box height, or 100% */
text-align: center;
letter-spacing: -0.24px;
/* Employee/Text/Main */
color: #454545;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
/* registration-section*/
.registration-container{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 32px;
/* margin-bottom: 200px; */
}
.input-field-big{
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 700px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
flex: none;
order: 1;
flex-grow: 0;
}
.input-field-big::placeholder{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #DDDDDD;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;
}
.registration-head{
width: 100%;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
color: #333333;
}
.registration-body{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 24px;
flex: none;
order: 0;
flex-grow: 0;
}
.arrow-icon{
width: 24px;
height: 24px;
display: flex;
flex: none;
flex-grow: 0;
justify-content: center;
align-items: center;
}
.dropdown-container{
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 700px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
position: relative;
flex: none;
order: 1;
flex-grow: 0;
}
.dropdown-select{
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2;
}
.dropdown-placeholder{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #DDDDDD;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;
}
.registration-foot{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 30px 0px 0px;
}
.cancel-form{
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
text-decoration: none;
width: 340px;
height: 48px;
background: #FFFFFF;
border: 1px solid #333333;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
flex: none;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.cancel-form:hover{
opacity: 0.8;
}
.cancel-button-text{
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
display: flex;
align-items: center;
text-align: center;
color: #333333;
/* Inside auto layout */
flex: none;
align-self: stretch;
}
.image-container{
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16px 24px;
gap: 8px;
width: 700px;
background: #EEEEEE;
border: 1px solid #DDDDDD;
border-radius: 4px;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
cursor: pointer;
}
.image-logo{
/* icon / image */
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.background-div{
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0px 30px 0px;
gap: 30px;
width: 418px;
background: #FFFFFF;
border-radius: 20px;
position: relative;
}
.background-div .bottom-head h1{
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #454545;
}
.description-foot{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 8px;
}
.description-foot .black-desc{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #333333;
}
.description-foot .red-desc{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #FA7184;
}
.image-placeholder{
/* 画像を登録する */
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #000000;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
display: flex;
flex-wrap: wrap;
max-width: fit-content;
word-break: break-all;
}
.image-field {
display: none;
}
/* confirm-registration-section */
.confirm-registration-container{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 32px;
margin-bottom: 160px;
}
.confirm-registration-head{
width: 100%;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
/* identical to box height, or 100% */
text-align: center;
color: #333333;
}
.confirm-registration-body{
display: flex;
flex-direction: column;
align-items: center;
padding: 32px;
background: #FFFFFF;
border-radius: 16px;
width: fit-content;
flex: none;
order: 0;
flex-grow: 0;
}
.confirm-registration-foot{
width: 100%;
display: flex;
justify-content: center;
gap: 37px;
padding: 30px 0px 0px;
flex-wrap: wrap;
}
.confirm-field-section{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px;
gap: 5px;
border-bottom: 1px dashed #DDDDDD;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.confirm-field-section label{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #999999;
/* Inside auto layout */
flex: none;
align-self: stretch;
flex-grow: 0;
}
.input-field-confirm{
/* 山田 太郎 */
width: 636px;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
background: transparent;
color: #333333;
background-color: transparent;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.input-field-confirm-image{
width: 40px;
height: 40px;
flex: none;
flex-grow: 0;
border-radius: 50%;
}
/* public-profile-section */
.public-profile-container{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
margin-bottom: 100px;
gap: 20px;
margin-top: 45px;
}
.public-progile-header{
display: flex;
flex-direction: row;
align-items: start;
padding: 0px;
gap: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
width: 702px;
}
.public-profile-image-section{
flex: none;
order: 0;
flex-grow: 0;
}
.public-profile-image-section .bio-image{
width: 80px;
height: 80px;
border-radius: 50%;
}
.public-profile-bio-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
gap: 8px;
margin-bottom: 15px;
flex: none;
flex-grow: 1;
}
.bio-tag-section{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px;
gap: 8px;
background: #F4FEFE;
border: 1px solid #00ACD9;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
}
.bio-tag-section span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.24px;
color: #333333;
flex: none;
order: 0;
flex-grow: 0;
}
.bio-name-section{
display: flex;
align-items: center;
gap: 8px;
}
.bio-name-section span{
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #333333;
flex: none;
flex-grow: 0;
}
.public-profile-body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
flex: none;
align-self: stretch;
flex-grow: 0;
}
.profile-body-bio{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 16px;
flex: none;
order: 0;
flex-grow: 0;
}
.profile-body-header{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 6px;
width: 636px;
height: 20px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.profile-body-header-icon{
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.profile-body-header-title{
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 20px;
color: #333333;
}
.profile-body-content{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px;
gap: 12px;
width: 636px;
border-bottom: 1px dashed #DDDDDD;
flex: none;
flex-grow: 0;
}
.profile-body-content-bottom{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px;
gap: 12px;
width: 636px;
flex: none;
flex-grow: 0;
}
.profile-body-content-label{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #999999;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.profile-body-content-data{
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #333333;
flex: none;
align-self: stretch;
flex-grow: 0;
}
/* single-article-section */
.allign-center{
display: flex;
align-items: center;
flex-direction: column;
position: relative;
visibility: hidden;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
.article-description-section{
margin-top: 13px;
position: relative;
width: fit-content;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px 30px 42px;
background: #FFFFFF;
border: 5px solid #4C9F2E;
border-radius: 60px 5px 50px;
margin-bottom: 25px;
transition: 0.3s ease-in-out;
}
.fade-in-animation{
visibility: hidden;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
.article-description-title *, .article-description-head *, .login-bottom-container *, .article-description-body *, .article-description-section, .login-container *, .reset-password-container *, .registration-container *, .confirm-registration-container *, .form-section *, .edit-profile-section *, .new-post-container *, .new-post-container *, .main-content *{
transition: all 0.4s ease;
}
.new-article{
position: absolute;
right: 3%;
top: -23px;
}
.article-description-title{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
padding: 30px 0px 0px;
gap: 16px 231px;
width: 100%;
}
.article-title-container{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 0px 16px;
gap: 16px;
width: 100%;
}
.article-title-container *{
transition: unset !important;
}
.article-image-href{
display: block;
width: 50px;
height: 50px;
}
img.article-image{
width: 100%;
height: 100%;
flex: none;
order: 0;
flex-grow: 0;
border-radius: 50%;
max-width: 100%;
}
.article-user-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 100%;
}
.article-user-section-inner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
.article-name-tag-section{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
flex-wrap: wrap;
gap: 8px;
}
.article-tag-section{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px;
width: fit-content;
gap: 8px;
/* width: 36px; */
background: #F4FEFE;
border: 1px solid #00ACD9;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
}
.article-tag-section span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.24px;
color: #333333;
white-space: nowrap;
}
.article-name-section{
font-style: normal;
font-weight: 560;
font-size: 16px;
line-height: 26px;
color: #333333;
}
.category-slug-container{
border-radius: 50%;
}
.category-name-section{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 8px;
background: #00ACD9;
border-radius: 32px;
transition: opacity 0.3s ease;
}
.category-name-section:hover{
opacity: 0.8;
}
.category-name-section span{
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 24px;
color: #FFFFFF;
max-width: 400px;
word-wrap: break-word;
}
.article-description-head{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 100%;
border-bottom: 1px solid #EEEEEE;
}
.article-description-content{
width: 1030px;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 32px;
color: #4C9F2E;
word-break: break-all;
}
.similar-article-block-title-name a, .card-title-heading, .value{
word-break: break-all;
}
.article-description-reaction{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
gap: 8px;
flex-wrap: wrap;
width: 100%;
}
.article-upload-date{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 12px;
color: #333333;
}
.single-article-like-comment-count-section{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
transition: none;
gap: 8px;
}
.single-article-comment-count-section, .single-article-like-count-section{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 4px;
}
.like-button{
all: unset;
display: inline-block;
cursor: pointer;
}
.single-article-inner-comment-count-section{
transition: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 4px;
height: 32px;
background: #4C9F2E;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
}
.single-article-inner-comment-count-section span, .single-article-inner-like-count-section span{
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 12px;
text-align: right;
white-space: nowrap;
color: #FFFFFF;
}
.single-article-inner-like-count-section{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 4px;
width: 106px;
height: 32px;
border-radius: 4px;
flex: none;
flex-grow: 0;
}
.article-description-tag{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 12px 0px 16px;
gap: 4px;
max-width: 1000px;
}
.article-tag{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 16px;
gap: 8px;
background: #F7F7F7;
border: 1px solid #999999;
border-radius: 18px;
transition: opacity 0.3s ease;
}
.article-tag:hover{
opacity: 0.5;
}
.article-tag span{
font-style: normal;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.24px;
color: #333333;
max-width: 188px;
word-wrap: break-word;
}
.article-description-body{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 16px 0px 0px;
gap: 25px;
}
.summary-section{
display: flex;
flex-direction: row;
justify-content: center;
flex-direction: column;
align-items: center;
padding-bottom: 24px;
gap: 8px;
}
.comment-item{
display: none;
}
.summary-section span{
width: 650px;
}
.summary-section span p{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #333333;
flex: none;
word-break: break-all;
}
.no-posts{
/* position: absolute; */
width: 100%;
display: flex;
justify-content: center;
margin-top: 160px;
}
.no-posts p{
/* 該当する検索結果はありません。 */
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #333333;
}
.profile-with-text{
display: flex;
align-items: center;
gap: 5px;
}
.profile-with-text span{
/* ログイン・会員登録 */
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: #333333;
flex: none;
order: 1;
flex-grow: 0;
}
.article-textarea-section{
transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out;
border-radius: 8px;
height: 295px;
}
.summary-section img {
margin: 20px 0px 20px 0px !important;
width: 650px;
border-radius: 4px;
}
.comment-section{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 20px;
isolation: isolate;
width: 100%;
}
.JCA-comment-section{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 16px;
width: 650px;
background: #F4FEFE;
border-radius: 6px;
}
.JCA-tag{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 11px;
flex: none;
order: 0;
flex-grow: 0;
}
.JCA-title{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
}
.JCA-title span{
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 26px;
color: #333333;
flex: none;
order: 0;
flex-grow: 0;
}
.user-details{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
gap: 11px;
width: 100%;
flex-wrap: wrap;
}
.user-comment{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #333333;
word-wrap: break-word;
}
.comment-section .JCA-comment-section .user-comment-margin{
margin-bottom: 15px !important;
}
.user-profile{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
}
.user-image{
width: 100%;
height: 100%;
border-radius: 50%;
}
.user-name{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 26px;
text-decoration-line: underline;
color: #333333;
transition: opacity 0.3s ease;
}
.user-name:hover{
opacity: 0.8;
}
.arsticle-name-section{
transition: opacity 0.3s ease;
}
.arsticle-name-section:hover{
opacity: 0.8;
}
.user-tag{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px;
gap: 8px;
background: #F4FEFE;
border: 1px solid #00ACD9;
border-radius: 4px;
}
.user-tag span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.24px;
color: #333333;
white-space: nowrap;
}
.comment-uploaded-date{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 26px;
text-align: right;
color: #333333;
}
.normal-comment-section{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 16px;
background: #FFF8F2;
border-radius: 6px;
}
.comments-header{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
}
.comments-header span{
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 16px;
color: #333333;
}
.add-new-comment-section{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px 0px 30px;
gap: 20px;
width: 100%;
}
.add-new-comment-section form, .add-reply-section form{
display: flex;
flex-direction: column;
gap: 20px;
width: 602px;
}
.article-tag-name{
display: flex;
flex-direction: row;
gap: 10px;
}
.add-new-comment-section2 form, .add-reply-section form{
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.new-comment-title{
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 16px;
color: #555555;
}
.new-comment-field{
box-sizing: border-box;
min-width: 100%;
max-width: 100%;
min-height: 100px;
max-height: 100px;
background: #FFFFFF;
border: 3px solid #F07700;
border-radius: 14px;
resize: none;
padding: 3px 10px 3px 10px;
}
.comment-field-button{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 16px;
gap: 8px;
width: 100%;
background: #4C9F2E;
border-radius: 4px;
}
.comment-field-button span{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #FFFFFF;
}
.comment-reply-field-button{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 16px;
gap: 8px;
width: 100%;
background: #00ACD9;
border-radius: 4px;
}
.comment-reply-field-button span{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #FFFFFF;
}
.redirect-login-register-section{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 8px;
transition: opacity 0.3s ease;
}
.redirect-login-register-section:hover{
opacity: 0.8;
}
.new-registration-field{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
text-decoration-line: underline;
color: #3E83EB;
flex: none;
order: 1;
flex-grow: 0;
}
.article-description-body * {
margin: unset !important;
}
.important-text{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
width: 602px;
height: 9px;
margin-bottom: 20px !important;
}
.important-blue-text a span{
display: flex;
flex-direction: row;
justify-content: center;
color: #3E83EB;
align-items: center;
padding: 0px;
gap: 8px;
height: 9px;
margin-top: 20px !important;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
letter-spacing: -0.24px;
text-decoration-line: underline;
color: #3E83EB;
}
.important-text span{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #FA7184;
}
.comment-container{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 12px;
width: fit-content;
border-bottom: 1px dashed #DDDDDD;
}
.comment-user-container{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 0px;
gap: 11px;
width: 602px;
}
.show-more-container{
display: flex;
flex-direction: row;
justify-content: end;
align-items: flex-start;
padding: 0px;
gap: 12px;
width: 100%;
height: 37px;
}
.show-more-section{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-start;
cursor: pointer;
transition: opacity 0.3s ease;
}
.show-more-section:hover{
opacity: 0.8;
}
.show-more-section span{
height: 22px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #555555;
}
.show-more-section span.underline{
text-decoration-line: underline;
}
.display-none{
display: none !important;
}
.display-block{
display: block !important;
}
.reply-comments-container{
display: flex;
justify-content: space-around;
width: 602px;
margin-bottom: 12px !important;
}
.add-reply-container{
display: flex;
justify-content: end;
width: 100%;
margin-bottom: 12px;
}
.reply-section{
width: 502px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.add-reply-section{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 502px;
}
.left-border-container{
margin-left: 40px !important;
border-left: 4px solid #DDDDDD;
}
.reply{
width: 100%;
padding: 12px 0px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
border-top: 1px dashed #DDDDDD;
display: flex;
flex-direction: column;
gap: 12px;
}
.similar-article-section{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 18px;
position: relative;
}
.similar-article-body{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 18px;
}
.scroll-left, .scroll-right {
position: absolute;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #555555;
opacity: 0.8;
/* transform: rotate(-180deg); */
border-radius: 50%;
display: none;
}
.scroll-left {
padding-right: 3px;
left: -3.5%;
top: 50%;
}
.scroll-right {
padding-left: 3px;
right: -3.5%;
top: 50%;
}
.similar-article-title{
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 118px;
}
.similar-article-title-logo{
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.similar-article-title-text{
width: 80px;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 26px;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
}
.similar-article-block{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 350px;
background: #F4FFE5;
border-radius: 60px 5px 50px;
flex: none;
flex-grow: 0;
}
.similar-article-block-title{
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 28px 24px 8px;
gap: 24px;
width: 351px;
}
.similar-article-block-title-section{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
}
.similar-article-block-title-category{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 8px;
background: #00ACD9;
border-radius: 16px;
transition: opacity 0.3s ease;
}
.similar-article-block-title-category:hover{
opacity: 0.8;
}
.similar-article-block-title-category h3{
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
max-width: 175px;
word-wrap: break-word;
}
.similar-article-block-title-name{
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 26px;
color: #4C9F2E;
}
.similar-article-block-date{
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 24px 8px;
gap: 8px;
}
.similar-article-block-date-section{
width: 63px;
}
.similar-article-block-date-section span{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 12px;
text-align: right;
color: #333333;
}
.similar-article-block-tag{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 0px 24px 8px;
gap: 4px;
}
.similar-article-block-summary{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 24px 12px;
gap: 8px;
width: 350px;
}
.similar-article-block-summary p{
width: 302px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #333333;
word-break: break-all;
}
/* add-new-post-section */
.new-post-container{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 32px;
margin-bottom: 10px;
width: 100%;
}
.new-post-body{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;
flex: none;
flex-grow: 0;
}
.required-dim{
color: #FA7184 !important;
}
.tag-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 0px;
width: 700px;
gap: 12px;
}
.unselected-tag{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 24px;
gap: 8px;
background: #F7F7F7;
border: 1px solid #999999;
border-radius: 18px;
cursor: pointer;
max-width: 350px;
}
.selected-tag{
border: 1px solid #F07700 !important;
background: #F07700;
}
.unselected-tag span{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 18px;
letter-spacing: -0.24px;
color: #000000;
word-break: break-word;
}
.selected-tag span{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
letter-spacing: -0.24px;
}
.ck.ck-reset.ck-editor.ck-rounded-corners{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
isolation: isolate;
width: 700px;
}
.ck.ck-editor__top.ck-reset_all{
width: 701px;
height: 40px;
box-sizing: border-box;
background: #EEEEEE;
border: 1px solid #DDDDDD;
border-radius: 6px 6px 0px 0px;
position: relative;
}
.add-link-container{
position: absolute;
width: 20px;
height: 20px;
left: 16px;
top: 10px;
cursor: pointer;
}
.add-image-container{
/* Vector */
position: absolute;
width: 20px;
height: 18.46px;
left: 68px;
top: 10px;
cursor: pointer;
}
.editor-divider-container{
position: absolute;
width: 20px;
height: 0px;
left: 41px;
top: 19px;
border: 1px solid #DDDDDD;
transform: rotate(90deg);
}
.tox.tox-tinymce{
border-radius: 6px;
isolation: isolate;
width: 700px;
height: 295px !important;
background: #FFFFFF;
border: 1px solid #DDDDDD !important;
resize: none;
}
.tox-editor-header{
box-sizing: border-box;
height: 40px !important;
background: #EEEEEE !important;
border: 1px solid #DDDDDD !important;
border-radius: 6px 6px 0px 0px !important;
box-shadow: unset !important;
}
.tox .tox-toolbar__group{
padding: 0px 0px 0 6px !important;
}
.tox-toolbar.tox-toolbar--scrolling, .tox-toolbar-overlord, .tox-toolbar__primary{
background: #EEEEEE !important;
}
.ck.ck-editor__main div p{
padding: 0px 10px !important;
}
#tinymce.mce-content-body::before{
padding: 2px 10px 2px 10px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #999999;
}
.new-post-foot, .confirm-new-post-foot{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 20px;
}
.extra-green{
background: #4C9F2E !important;
}
.new-post-cancel{
width: 358px;
}
/* confirm-new-post-section */
.confirm-new-post-body{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 30px;
gap: 30px;
background: #FFFFFF;
border-radius: 16px;
}
.confirm-post-field-section{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px 16px;
gap: 12px;
width: 640px;
}
.border-bottom-dashed{
border-bottom: 1px dashed #DDDDDD;
}
.confirm-title{
width: 640px;
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 28px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #4C9F2E;
background-color: transparent;
word-wrap: break-word;
}
.category-section{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 8px;
width: fit-content;
height: 24px;
background: #00ACD9;
border-radius: 16px;
}
.moving-clone {
position: absolute;
z-index: 999999 !important;
overflow: visible !important;
max-width: none !important;
transition: transform 1s ease-in-out, opacity 0.8s ease-in-out, width 1s ease-in-out, height 1s ease-in-out;
will-change: transform, opacity, width, height;
transform: translate3d(0, 0, 0);
pointer-events: none;
}
.overlay-container{
background: #F4FEFE;
position: fixed;
top: 0px;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99;
transition: all 1s ease;
}
.search-icon{
border-radius: 50%;
cursor: pointer;
overflow: hidden;
transition: opacity 0.3s ease;
}
.search-icon:hover{
opacity: 0.8;
}
.category-section .confirm-category{
text-align: center;
width: fit-content;
height: 16px;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
background-color: transparent;
}
.no-padding{
padding: 0 !important;
}
.tags-section{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 0px;
gap: 4px;
width: 640px;
}
.confirm-tag{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 16px;
gap: 8px;
background: #F7F7F7;
border: 1px solid #999999;
border-radius: 18px;
height: 26px;
}
.confirm-article-section{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 20px;
width: 640px;
}
.tox-promotion, .tox-menubar{
display: none;
}
.confirm-article-text{
width: 640px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
leading-trim: both;
text-edge: cap;
color: #333333;
background-color: transparent;
word-wrap: break-word;
}
.confirm-article-text a, .summary-section a{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-decoration-line: underline;
color: #4C9F2E;
}
.confirm-article-image{
width: 640px;
height: 381px;
}
/**----------------------------show-profile-----------**/
.form-section{
margin-bottom: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 32px;
margin-bottom: 10px;
}
.form-header{
/* Frame 243905 */
/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 16px;
height: 80px;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.profile-main-image-profile{
/* photo */
/* position: absolute; */
width: 80px;
height: 80px;
left: 0px;
top: 0px;
border-radius: 40px;
background: #C4C4C4;
}
.text-form-header{
/* Frame 243938 */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
gap: 8px;
height: 80px;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 1;
}
.form-icon{
/* Frame 243947 */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
gap: 8px;
width: 100%;
height: 18px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 1;
}
.form-icon .heaven{
display: flex;
gap: 8px;
}
.form-icon .heaven span{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
text-decoration-line: underline;
color: #999999;
}
.sign-up-confirm-2{
/* signUpConfirm */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
height: 60px;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.icon-profile .user-icon{
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
}
.icon-profile .user-icon span{
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 20px;
color: #333333;
}
.form-content{
/* contents */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
height: 428px;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.form-content .fields{
/* Component 1 */
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px;
height: 428px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.attribute-field{
/* signUpConfirm */
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px;
gap: 12px;
height: 74px;
border-bottom: 1px dashed #DDDDDD;
/* Inside auto layout */
flex: none;
order: 2;
align-self: stretch;
flex-grow: 0;
}
.attribute-field-last{
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px;
gap: 12px;
height: 74px;
/* Inside auto layout */
flex: none;
order: 2;
align-self: stretch;
flex-grow: 0;
}
.attribute{
/* ユーザー名 */
height: 10px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.24px;
color: #999999;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.value{
/* 山田 太郎 */
height: 12px;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.24px;
color: #333333;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.edit-button {
/* button_01 */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 636px;
height: 48px;
background: #555555;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
cursor: pointer;
flex: none;
order: 9;
align-self: stretch;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.edit-button:hover{
opacity: 0.8;
}
.edit-button span{
/* テキスト */
/* width: 620px;
height: 32px; */
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
/* Inside auto layout */
flex: none;
/* order: 0; */
align-self: stretch;
/* flex-grow: 1; */
}
.main-content{
background-color: #F4FEFE;
}
/* article-blog-section */
.gap{
gap: 30px;
}
.blog-header{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 8px;
}
.blog-header-block-category{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 20px;
gap: 8px;
background: #00ACD9;
border-radius: 16px;
}
.blog-header-block-tag{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 20px;
gap: 8px;
background: #F7F7F7;
border: 1px solid #999999;
border-radius: 16px;
}
.blog-header-block-search{
height: 38px;
}
.blog-header-block-category span{
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #FFFFFF;
max-width: 260px;
word-wrap: break-word;
}
.blog-header-block-tag span{
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #454545;
max-width: 260px;
word-wrap: break-word;
}
.blog-body{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
align-items: center;
align-content: flex-start;
padding: 0px;
gap: 20px;
width: 1090px;
margin-bottom: 50px;
transition: all 0.4s ease;
}
.article-blog-card{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
isolation: isolate;
width: 350px;
background: #FFFFFF;
border: 5px solid #4C9F2E;
border-radius: 60px 5px 50px;
position: relative;
transition: all 0.4s ease;
}
.card-title, .card-tag, .card-summary, .card-reactions, .card-button{
transition: all 0.4s ease;
}
.new-card{
position: absolute;
right: -5%;
top: -5%;
}
.new-card-category{
position: absolute;
right: 2%;
top: 4%;
}
.new-circle-background{
width: 57.56px;
height: 57.56px;
background: #DF4444;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.new-circle-background span{
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
}
.card-title{
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 28px 24px 8px;
gap: 16px;
/* width: 340px; */
}
.card-image{
width: 100%;
height: 100%;
border-radius: 50%;
}
.card-title-head{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 237px;
}
.card-title-tag-category{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 0px;
gap: 8px;
width: 237px;
}
.card-title-tag{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px;
gap: 8px;
background: #F4FEFE;
border: 1px solid #00ACD9;
border-radius: 4px;
}
.card-title-tag span{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.24px;
color: #333333;
word-wrap: break-word;
max-width: 150px;
}
.card-title-category{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 8px;
background: #00ACD9;
border-radius: 16px;
transition: opacity 0.3s ease;
}
.card-title-category:hover{
opacity: 0.8;
}
.card-title-category h3{
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
word-wrap: break-word;
max-width: 150px;
}
.card-title-heading{
width: 237px;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 26px;
color: #4C9F2E;
}
.card-tag{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 0px 24px 8px;
gap: 4px;
/* width: 340px; */
}
.card-body-tag{
text-decoration: none;
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 16px;
gap: 8px;
/* height: 26px; */
background: #F7F7F7;
border: 1px solid #999999;
border-radius: 18px;
transition: opacity 0.3s ease;
}
.card-body-tag:hover{
opacity: 0.6;
}
.card-body-tag span{
/* height: 14px; */
font-style: normal;
font-weight: 560;
font-size: 14px;
/* line-height: 14px; */
letter-spacing: -0.24px;
max-width: 240px;
word-wrap: break-word;
color: #333333;
}
.card-summary{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px 12px;
gap: 8px;
/* width: 340px; */
}
.card-summary p{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #333333;
width: 302px;
word-wrap: break-word;
}
.card-reactions{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 0px 24px 8px;
gap: 8px;
flex-wrap: wrap;
/* width: 340px; */
/* height: 44px; */
}
.card-date{
/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 0px;
gap: 8px;
width: 120px;
height: 28px;
}
.card-date span{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 12px;
text-align: right;
color: #333333;
}
.card-jca-like-comments{
display: flex;
justify-content: end;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
/* margin: 0 auto; */
/* width: 152px; */
/* height: 36px; */
flex-wrap: wrap;
}
/* jca */
.jcs{
width: 40px;
height: 36px;
}
.card-comments{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 4px;
/* width: 48px; */
height: 32px;
}
.card-comments-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 4px;
/* width: 48px; */
height: 32px;
background: #4C9F2E;
border-radius: 4px;
}
.card-comments-container span{
/* width: 7px; */
height: 12px;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 12px;
text-align: right;
color: #FFFFFF;
}
.card-likes{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 4px;
/* width: 48px; */
height: 32px;
}
.card-likes-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 4px;
/* width: 48px; */
height: 32px;
border-radius: 4px;
}
.unliked{
background: #999999;
transition: opacity 0.3s ease;
}
.unliked:hover{
opacity: 0.8;
}
.liked{
background: #FA7184;
transition: opacity 0.3s ease;
}
.liked:hover{
opacity: 0.8;
}
.card-null-like-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 4px;
width: 48px;
height: 32px;
background: #999999;
border-radius: 4px;
}
.card-likes-container span, .card-null-like-container span{
/* width: 7px; */
height: 12px;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 12px;
text-align: right;
color: #FFFFFF;
}
.card-button{
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
width: 344px;
height: 50px;
background: #4C9F2E;
margin: -1px;
border: 5px solid #4C9F2E;
border-radius: 0px 0px 45px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
transition: opacity 0.3s ease;
}
.card-button:hover{
opacity: 0.9;
}
.card-button-text{
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
}
.card-button-logo{
width: 24px;
height: 24px;
}
.article-blog-pagination{
height: 40px;
display: flex;
gap: 13px;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.pagination-content-container{
text-decoration: none;
width: 40px;
height: 40px;
background: #DDDDDD;
border-radius: 8px 2px;
display: flex;
align-items: center;
justify-content: center;
}
.pagination-content-container-selected{
width: 40px;
height: 40px;
background: #4C9F2E;
border-radius: 8px 2px;
display: flex;
align-items: center;
justify-content: center;
}
.pagination-content-container span, .pagination-content-container a, .pagination-content-container-selected span{
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/*-----------------------------edit profile------------------------------*/
#edit-profile-section{
/* Frame 243142 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 32px;
}
.edit-profile-form{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 160px;
}
.edit-profile-container{
/* Frame 243141 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 24px;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.photo-section{
/* Frame 243904 */
width: 50px;
height: 66px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.photo-section span{
/* 編集する */
/* position: absolute; */
width: 48px;
height: 9px;
left: calc(50% - 48px/2);
top: 57px;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
letter-spacing: -0.24px;
text-decoration-line: underline;
color: #333333;
}
.profile-photo-2{
/* image */
position: relative;
left: 0%;
right: -5%;
top: 0%;
bottom: -5%;
background: url(.jpg);
}
.profile-main-image{
/* photo */
/* position: absolute; */
width: 50px;
height: 50px;
left: 0px;
top: 0px;
border-radius: 40px;
background: #C4C4C4;
object-fit: cover;
}
.profile-main-image, .profile-main-image-profile, .card-image, .bio-image, .user-image, .article-image{
object-fit: cover;
}
.input-field-edit-profile{
/* input_field */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 7px;
position: relative;
height: 67px;
margin-bottom: 24px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.input-field-edit-profile select.select-age{
/* Frame 243139 */
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 700px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
position: relative;
}
.input-field-edit-profile label.field-name{
/* ユーザー名 必須 */
/* ユーザー名 必須 */
/* width: 102px;
height: 10px; */
/* ユーザー名 必須 */
height: 15px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.24px;
color: #333333;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.input-field-edit-profile label.field-name span{
color: #DF4444;
}
.input-field-edit-profile input{
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 700px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.custom-select {
position: relative;
display: inline-block;
width: 100%;
}
.custom-select select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.custom-select select option{
/* 男性 */
width: 636px;
height: 12px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.24px;
color: #333333;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;
}
.custom-select::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 16px;
height: 16px;
background: url('../images/image.png') no-repeat center center;
background-size: contain;
transform: translateY(-50%);
pointer-events: none;
}
form .buttons{
/* Frame 243900 */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding: 30px 0px 0px;
gap: 37px;
flex-wrap: wrap;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.buttons .update-button{
/* Frame 243880 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 20px;
width: 340px;
height: 48px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.buttons .update-button:hover{
opacity: 0.8;
}
.solo-class-circle{
left: 74% !important;
}
.buttons .update-button button{
/* button_01 */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 340px;
height: 48px;
background: #4C9F2E;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
border: none;
}
.buttons .update-button button span.update-text{
/* テキスト */
width: 324px;
height: 32px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 1;
}
.buttons .cancel-button {
/* button_02 */
box-sizing: border-box;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 340px;
height: 48px;
background: #FFFFFF;
border: 1px solid #333333;
/* large_shadow */
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
transition: opacity 0.3s ease;
}
.buttons .cancel-button:hover{
opacity: 0.8;
}
.buttons .cancel-button .cancel-text{
/* テキスト */
width: 324px;
height: 32px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #333333;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 1;
}
/*-------------------------post tree*/
.main-content{
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 32px;
margin-bottom: 200px;
}
.main-content .container-1{
/* Frame 243879 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 24px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.main-content .container-1 span.head{
/* 投稿完了いたしました */
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #454545;
flex: none;
order: 0;
flex-grow: 0;
}
.main-content .container-2{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 32px;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.main-content .container-2 span.tree-text{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
letter-spacing: -0.24px;
color: #333333;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.main-content .container-2 .tree{
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.main-content .container-3{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 20px;
height: 48px;
flex: none;
order: 2;
align-self: stretch;
flex-grow: 0;
}
.main-content .container-3 .tree-btn{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 358px;
height: 48px;
background: #FFFFFF;
border: 1px solid #333333;
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
cursor: pointer;
flex: none;
order: 0;
flex-grow: 0;
}
.main-content .container-3 .tree-btn .tree-btn-text{
/* テキスト */
width: 342px;
height: 32px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #333333;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 1;
}
.breadcum{
position: absolute;
width: 116px;
height: 16px;
left: 406px;
top: 98px;
}
@media (max-width: 1399px){
.article-description-tag{
max-width: 650px;
}
.article-description-content{
width: 650px;
}
.article-description-body{
flex-direction: column;
}
.similar-article-section{
width: 650px;
}
.similar-article-body{
flex-direction: row;
overflow-x: auto;
width: 100%;
}
.scroll-left, .scroll-right{
display: flex;
}
.blog-body{
width: 724px;
}
.crumb-page{
max-width: 724px;
}
}
@media (max-width: 889px){
.crumb-page{
max-width: 351px;
}
}
@media (max-width: 820px){
.blog-body{
width: 351px;
}
}
@media (max-width: 765px){
.article-description-tag{
max-width: 450px;
}
.edit-button{
width: 426px;
}
.article-description-content, .similar-article-section, .summary-section span, .JCA-comment-section, .comment-user-container, .reply-comments-container{
width: 492px;
}
.comment-user-container, .reply-comments-container, .important-text{
width: 443px;
}
.summary-section img{
width: 492px;
/* height: 263.76px; */
}
.add-reply-section{
width: 244px;
}
.left-border-container {
margin-left: 0px !important;
}
.reply-section{
width: 375px;
}
.add-new-comment-section form{
width: 444px;
}
}
@media (max-width: 716px){
.input-field-big, .dropdown-container, .image-container, .tag-container, .ck.ck-reset.ck-editor.ck-rounded-corners, .ck.ck-editor__top.ck-reset_all{
width: 358px;
}
.tox.tox-tinymce{
width: 357.5px;
}
.confirm-post-field-section, .confirm-title, .confirm-article-section, .confirm-article-text, .tags-section{
width: 298px;
}
.confirm-article-image{
width: 298px;
height: 177px;
}
.input-field-edit-profile select.select-age, .input-field-edit-profile input, .main-content .container-2 span.tree-text {
width: 358px;
}
.profile-body-header, .profile-body-content-bottom, .profile-body-content{
width: 326px;
}
.public-progile-header{
width: 360px;
gap: 8px;
}
.input-field-confirm{
width: 298px;
}
}
@media (max-width: 699px){
form .buttons, .confirm-registration-foot{
gap: 20px;
}
.scroll-to-top-btn-register{
left: 60%;
}
}
@media (max-width: 580px){
.scroll-to-top-btn-register{
left: 49%;
}
.article-description-tag{
max-width: 378px;
}
.normal-comment-section, .JCA-comment-section{
padding: 11px 14px;
gap: 16px;
}
.article-description-content, .similar-article-section, .summary-section span, .JCA-comment-section, .comment-user-container, .reply-comments-container{
width: 375px;
}
.comment-user-container, .reply-comments-container, .important-text{
width: 350px;
}
.summary-section img{
width: 375px;
/* height: 215px; */
}
.reply-section{
width: 275px;
}
.article-description-section{
padding: 0px 19px 42px;
}
.add-new-comment-section form{
width: 350px;
}
}
@media (max-width: 522px){
nav.navbar {
padding: 12px 12px;
}
.edit-button{
width: 326px;
}
.profile-main-image-profile{
width: 52.5px;
height: 52.5px;
}
.form-header, .text-form-header{
height: fit-content;
gap: 8px;
}
.input-field-edit-profile select.select-age, .input-field-edit-profile input, .main-content .container-2 span.tree-text{
width: 358px;
}
.profile-body-bio{
padding: 16px;
}
.public-profile-image-section .bio-image {
width: 50px;
height: 50px;
}
.blog-body{
width: unset;
justify-content: center;
}
.crumb-page{
max-width: 351px;
}
.blog-body * {
transform: unset !important;
}
.scroll-to-top-btn-register{
left: 45%;
}
}
@media (max-width: 450px){
.article-description-tag{
max-width: 327px;
}
.normal-comment-section, .JCA-comment-section{
padding: 11px 17px;
gap: 16px;
}
.reply-section{
width: 250px;
}
.article-description-section{
padding: 0px 19px 42px;
}
}
@media (max-width: 425px){
.article-user-section-inner{
flex-direction: column;
align-items: start;
}
.article-description-content, .similar-article-section, .summary-section span, .JCA-comment-section{
width: 327px;
}
.comment-user-container, .reply-comments-container, .important-text, .summary-section img{
width: 299px;
}
.add-new-comment-section form{
width: 299px;
}
}
.error {
border: 2px solid red !important;
}
.error-input-container{
margin-bottom: 50px;
}
.error-message {
color: red;
font-size: 12px;
min-height: 16px; /* Reserve space to prevent shifting */
display: block;
}
.overlay {
position: fixed;
top: 0px;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999999;
transition: all 0.3s ease;
}
#search-pannel {
position: fixed;
right: -300px;
top: 0px;
z-index: 9999999;
transition: right 0.5s ease-in-out;
}
#search-pannel.show {
right: 0;
}
.search-container{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 16px;
gap: 24px;
width: 300px;
height: 100vh;
position: relative;
background: linear-gradient(0deg, #FFF8F2, #FFF8F2), #F4FDFD;
border-radius: 0px;
}
.close-search-container{
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
order: 0;
}
.search-category-dropdown-container{
height: 86px;
order: 1;
}
.search-text-select-container{
order: 2;
}
.search-tag-select-container{
order: 3;
}
.search-category-label, .search-tag-label, .search-text-label{
height: 20px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.24px;
color: #333333;
}
.search-input-field{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 15px 0px 0px 0px;
gap: 7px;
width: 268px;
height: 50px;
position: relative;
}
/* Custom CSS to change the button color to green in the link modal */
.search-input-field .search-dropdown{
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 268px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: none;
padding-right: 10px;
}
.search-arrow-icon{
position: absolute;
right: 20px;
top: 40%;
}
.search-text{
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 8px;
width: 268px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px;
}
.search-text::placeholder{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
letter-spacing: -0.24px;
color: #DDDDDD;
}
.search-tag-input-field{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding: 0px;
gap: 12px;
width: 268px;
margin: 15px 0px 0px 0px;
overflow: auto;
max-height: 450px;
}
.search-submit-button-container{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 30px 0px 0px;
gap: 20px;
order: 4;
position: fixed;
bottom: 20px;
}
.search-submit-button-container .submit-search{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 268px;
height: 48px;
background: #4C9F2E;
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
cursor: pointer;
}
.search-submit-button-container .submit-search span{
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
.category-list{
display: flex;
flex-direction: column;
align-items: center;
scrollbar-width: none;
min-height: 80vh;
margin-bottom: 60px;
transition: padding 0.5s ease;
overflow: visible;
}
.break-line-condition-start{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
gap: 100px;
position: relative;
}
.break-line-condition-end{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
gap: 100px;
position: relative;
}
.break-line-condition{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
gap: 100px;
position: relative;
margin-bottom: 120px;
}
.first-break-line{
position: relative;
height: 302px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.treeList{
opacity: 0;
/* animation: fadeInUp 0.5s ease forwards; */
}
.first-break-line .treeList.break-line{
position: absolute;
top: -34px;
}
.break-line-condition-between{
position: relative;
height: 272px;
display: flex;
justify-content: center;
}
.break-line-condition-between .treeList.same-line{
position: relative;
right: 300px;
}
.break-line-condition-between .treeList.break-line{
position: relative;
left: 300px;
}
.break-line-condition-between .treeList.same-line .category-image-container{
position: absolute;
right: 0;
top: -64px;
}
.break-line-condition-between .treeList.break-line .category-image-container{
position: absolute;
left: 0;
top: -64px;
}
.brek-line{
width: fit-content;
}
.category-list::-webkit-scrollbar {
width: 0;
}
.background-logo{
position: absolute;
top: -75px;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.background-color{
width: 110vh;
height: 110vh;
background: #FFF8F2;
border-radius: 50%;
position: fixed;
}
.background-color-sp{
display: none;
width: 1000px;
height: 1000px;
background: #FFF8F2;
border-radius: 50%;
position: fixed;
z-index: -99999;
}
.scroll-track {
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
height: 165px;
width: 0.9px;
background: #333333;
display: flex;
align-items: center;
flex-direction: column;
position: fixed;
}
.scroll-thumb {
width: 6px;
height: 6px;
background: #333333;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.scroll-text {
position: absolute;
top: -55px;
left: -5px;
writing-mode: vertical-rl;
text-orientation: mixed;
color: #333333;
font-weight: 400;
font-size: 11px;
line-height: 13px;
letter-spacing: 0.08em;
}
.category-image-container {
width: 384px;
height: 316px;
position: relative;
display: flex;
align-items: end;
justify-content: center;
margin: 10px;
}
.category-image{
height: 315.04px;
position: absolute;
z-index: -1;
}
.category-button{
margin-bottom: 25px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 5.77px;
background: linear-gradient(90deg, #00ACD9 0%, #00ACD9 100%);
border-radius: 22px;
transition: opacity 0.3s ease;
}
.category-button:hover{
opacity: 0.8;
}
.category-button span{
font-style: normal;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #FFFFFF;
word-wrap: break-word;
max-width: 250px;
}
.background-tree{
position: fixed;
height: 862px;
width: 100%;
top: 108px;
opacity: 0.3;
z-index: -1;
display: flex;
justify-content: center;
transition: width 0s;
}
.background-tree-animation{
position: absolute;
height: 862px;
width: 100%;
top: 85px;
display: flex;
justify-content: center;
z-index: -1;
}
.category-background-image{
height: 862px;
max-width: unset;
}
.overlay-container footer.footer {
bottom: 39px;
z-index: 9999;
}
#tanimation{
position: relative;
background-color: #F4FEFE;
width: 100%;
height: 100%;
z-index: 98;
display: flex;
justify-content: center;
}
.basic-background{
background-color: #F4FEFE;
}
.category-breadcrumb{
margin-top: 110px;
z-index: 99;
}
#illustrations-post{
position: relative;
}
.no-margin-bottom{
margin-bottom: 0px !important;
}
.landingIllustrations, .landingIllustrationsSp {
opacity: 0;
animation-fill-mode: both;
}
.postIllustrations {
z-index: 9999;
opacity: 0;
transition: opacity 0.5s ease-out;
will-change: opacity, transform;
animation-fill-mode: both;
}
.centralIllustrationContainer{
width: unset;
position: absolute;
z-index: -1;
left: 10%;
top: 0px;
}
.postIllustration0{
position: fixed;
height: 152px;
/* left: 70px; */
left: calc(20% + 20px);
top: 230px;
}
.postIllustration1{
position: fixed;
height: 154px;
/* right: 10px; */
right: calc(18% + 20px);
top: 210px;
}
.postIllustration2{
position: fixed;
height: 146px;
/* left: 15px; */
left: calc(18% + 20px);
top: 485px;
}
.postIllustration3{
position: fixed;
height: 154px;
/* right: 50px; */
right: calc(21% + 20px);
top: 475px;
}
.postIllustration4{
position: fixed;
height: 127px;
/* left: 10px; */
left: calc(19% + 20px);
top: 770px;
}
.postIllustration5{
position: fixed;
height: 146px;
/* right: 100px; */
right: calc(21% + 20px);
top: 730px;
}
.landingIllustration0{
position: relative;
height: 130px;
left: 50px;
top: 105px;
}
.landingIllustrationsSp{
position: absolute;
display: none;
}
.landingIllustrationSp0{
height: 145px;
left: 125px;
top: 400px;
}
.landingIllustration1{
position: relative;
height: 180px;
right: -730px;
top: -40;
}
.landingIllustrationSp1{
height: 198px;
top: 20px;
left: 115px;
}
.landingIllustration2{
position: relative;
height: 136px;
right: -840px;
top: 185px;
}
.landingIllustrationSp2{
height: 140px;
left: 171px;
top: 400px;
}
.landingIllustration3{
position: relative;
height: 127px;
left: 0px;
top: 170px;
}
.landingIllustrationSp3{
height: 127px;
left: 121px;
top: 65px;
}
.tox .tox-dialog__title{
font-family: 'Noto Sans JP' !important;
font-style: normal !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 19px !important;
color: #333333 !important;
}
.tox .tox-label{
font-family: 'Noto Sans JP' !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 14px !important;
color: #333333 !important;
}
.mce-content-body img {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
.landingIllustration4{
position: relative;
height: 146px;
left: 600px;
top: 0px;
}
.landingIllustrationSp4{
height: 146px;
left: 180px;
top: 400px;
}
.landingIllustration5{
position: relative;
height: 154px;
right: -1051px;
top: -140px;
}
.landingIllustrationSp5{
height: 154px;
left: 130px;
top: 20px;
}
.treeList, .category-image-container, .category-image {
transition: all 0.3s ease;
box-sizing: border-box;
}
.landingIllustrationStartCenter{
position: relative;
height: 127px;
left: 260px;
top: 65px;
}
.zero-opacity{
opacity: 0;
visibility: hidden;
}
.landingIllustrationCenterEnd{
position: relative;
height: 154px;
right: -700px;
top: -80px;
}
.landingIllustrationHeight1{
right: -650px;
}
.landingIllustrationStart{
position: relative;
height: 127px;
left: 100px;
/* changed */
/* top: 110px; */
top: 110px;
}
@media (min-width: 1217px){
.landingIllustrationStart{
left: 50px;
top: 180px;
}
}
@media (min-height: 1300px) and (min-width: 1216px){
.landingIllustrationStart {
left: -50px;
top: 220px;
}
}
.landingIllustrationCenter{
position: relative;
height: 127px;
left: 590px;
top: 80px;
}
.landingIllustrationStart1{
position: absolute;
height: 127px;
left: 300px;
top: 180px;
}
.landingIllustrationEnd{
position: relative;
height: 154px;
right: -1040px;
top: -70px;
}
.margin-up {
padding-top: 215px;
}
.landingIllustrationHeight0{
height: 130px ;
}
.landingIllustrationHeight1{
height: 160px ;
}
.landingIllustrationHeight2{
height: 140px ;
}
.landingIllustrationHeight3{
height: 127px ;
}
.landingIllustrationHeight4{
height: 132px ;
}
.landingIllustrationHeight5{
height: 134px ;
}
.landingIllustrationStartCenter.landingIllustrations.landingIllustrationHeight2, .landingIllustrationStartCenter.landingIllustrations.landingIllustrationHeight4{
left: 350px;
}
#animation-footer{
text-align: center;
width: 100%;
position: fixed;
bottom: 37px;
z-index: 999;
}
#animation-footer .footer-label{
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 17px;
color: #333333;
}
.footer-label a{
text-decoration: underline;
}
.footer-label-new a{
text-decoration: underline;
cursor: pointer;
}
.footer-label-new .bigC{
padding-bottom: 1px;
font-size: 18px;
line-height: 15px;
display: flex;
align-items: end;
}
.footer-label{
margin-bottom: 10px;
}
footer.footer-new{
margin-top: auto;
margin-bottom: 40px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
}
@media (min-height: 1000px){
.scroll-to-top-btn span, .scroll-to-top-btn-top span, .scroll-to-top-btn-register span{
margin-top: 8px;
}
}
@media (max-height: 1000px){
.background-color{
height: 983px;
width: 983px;
}
.main-content-body{
min-height: 69vh;
}
}
@media (max-height: 889px){
.background-color{
height: 888px;
width: 888px;
}
}
@media (max-height: 875px){
.search-tag-input-field {
max-height: 300px;
}
}
@media (max-height: 799px){
.postIllustration0{
top: 170px;
}
.postIllustration1{
top: 115px;
}
.postIllustration2{
top: 386px;
}
.postIllustration3{
top: 335px;
}
.postIllustration4{
top: 600px;
}
.postIllustration5{
top: 580px;
}
}
@media (max-height: 768px){
.padding-sp{
bottom: 0%;
}
.margin-bottom-sp{
margin-bottom: 100px;
}
}
@media (max-height: 725px){
.search-tag-input-field {
max-height: 190px;
}
}
@media (max-height: 615px){
.search-tag-input-field {
max-height: 140px;
}
}
@media (max-width: 2311px){
.postIllustration0{
/* left: 70px; */
left: calc(12% + 20px);
}
.postIllustration1{
/* right: 10px; */
right: calc(10% + 20px);
}
.postIllustration2{
/* left: 15px; */
left: calc(10% + 20px);
}
.postIllustration3{
/* right: 50px; */
right: calc(13% + 20px);
}
.postIllustration4{
/* left: 10px; */
left: calc(11% + 20px);
}
.postIllustration5{
/* right: 100px; */
right: calc(13% + 20px);
}
}
@media (max-width: 1863px){
.postIllustration0{
left: 80px;
}
.postIllustration1{
right: 60px;
}
.postIllustration2{
left: 65px;
}
.postIllustration3{
right: 100px;
}
.postIllustration4{
left: 60px;
}
.postIllustration5{
right: 150px;
}
}
@media (max-width: 1545px){
.postIllustration0{
left: 70px;
}
.postIllustration1{
right: 0px;
}
.postIllustration2{
left: 15px;
}
.postIllustration3{
right: 50px;
}
.postIllustration4{
left: 10px;
}
.postIllustration5{
right: 80px;
}
}
@media (max-width: 1345px){
.break-line-condition{
flex-wrap: wrap;
}
}
@media (max-width: 1088px){
.postIllustrations, .centralIllustrationContainer{
display: none;
}
.category-container{
margin-bottom: 100px;
}
.background-color{
top: 0px;
}
.category-button span {
max-width: 150px;
}
}
@media (max-width: 1088px){
.last-even .illustrations{
display: none;
}
.landingIllustrationsSp{
display: block;
}
.tree{
margin-bottom: unset;
}
#last-content:not(.margin-up) {
padding-top: 90px;
}
#last-content:not(.margin-up) img.landingIllustrationsSp{
top: -85px;
}
.background-logo {
width: 100%;
height: 100%;
overflow: hidden;
}
.background-color-sp{
display: block;
}
.treeList{
position: relative;
}
.background-logo{
top: 0px;
}
.break-line-condition-between{
gap: 0px;
}
.category-list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 0px 80px 0px 80px;
}
.treeList.break-line.firstElement{
padding-bottom: 95px;
}
}
@media (max-width: 1000px){
.blank-breadcrumb-space{
height: 40px;
}
.category-list{
padding: 0px 70px 0px 70px;
}
}
@media (max-width: 950px){
.category-list{
padding: 0px 30px 0px 30px;
}
}
@media (max-width: 875px){
.landingIllustrationSp0{
height: 115px;
left: 78px;
top: 300px;
}
.landingIllustrationSp1{
height: 195px;
top: 20px;
left: 56px;
}
.landingIllustrationSp2{
height: 122px;
left: 115px;
top: 300px;
}
.landingIllustrationSp3{
height: 97px;
left: 90px;
top: 75px;
}
.landingIllustrationSp4{
height: 116px;
left: 115px;
top: 300px;
}
.landingIllustrationSp5{
height: 124px;
left: 100px;
top: 40px;
}
.category-image{
height: 260px;
}
.category-image-container{
width: 260px;
height: 260px;
}
.category-list{
padding: 0px 70px 0px 70px;
}
}
.search_and_close{
display: flex;
justify-content: space-between;
width: 100%;
}
.search_and_close img{
display: none;
}
.tox .tox-form__group{
margin-bottom: 20px !important;
}
.tox .tox-label{
margin-bottom: 5px !important;
}
.tox .tox-button{
background-color: #4D9F2E !important;
border-color: #4D9F2E !important;
}
.tox .tox-button--secondary {
background-color: #f0f0f0 !important;
border-color: #f0f0f0 !important;
}
.tox .tox-button--naked {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: unset !important;
color: #222f3e !important;
}
@media (max-width: 768px){
.tox-dialog{
align-self: center !important;
position: fixed !important;
top: 0;
}
.tox-dialog-wrap {
position: relative !important;
transform: none !important;
overflow: visible !important;
}
.tox-dialog-wrap__backdrop{
position: fixed !important;
}
.fixed-buttons{
left:59%;
}
.back-button{
margin-bottom: 14% !important;
}
.absolute-return-none{
display: none;
}
.absolute-return-login{
display: block;
}
.top-button-poof{
display: none;
}
.hideen-for-pc-screen{
display: block;
}
.profile-with-text span {
display: none;
}
.profile-with-text {
display: flex;
align-items: center;
}
.article-description-section{
margin-top: 0px;
}
.landingIllustrationSp1{
top: 0px;
}
.background-tree{
top: 172px;
}
.search_and_close img{
display: flex;
}
.category-background-image{
height: 535px;
}
#search-pannel {
right: -400px;
}
.break-line-condition-between .treeList.same-line{
right: unset;
}
.break-line-condition-between .treeList.break-line{
left: unset;
}
.break-line-condition-between{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
position: relative;
height: 272px;
gap: 0px;
}
.background-tree{
height: 535px;
}
#animationImg{
height: 535px;
}
.new-card-category{
right: 0%;
top: 2%;
}
.new-circle-background{
width: 40px;
height: 40px;
background: #DF4444;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.new-circle-background span{
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 15px;
color: #FFFFFF;
}
.crumb-group{
justify-content: start;
margin-right: 0;
margin-left: 33px;
}
.crumb-logo{
transition: opacity 0.3s ease;
color: #9f2e6e;
}
.crumb-logo:hover{
opacity: 0.8;
}
.category-button{
margin-bottom: 11px;
bottom: 5px;
left: 23%;
}
.treeList{
display: flex;
justify-content: center;
}
/* .treeList:nth-child(2n) {
margin-top: 115px;
} */
.scroll-track{
left: unset;
right: 20px;
height: 70px;
}
.search-container{
width: 375px;
}
.search-input-field .search-dropdown, .search-input-field, .search-text, .search-tag-input-field, .search-submit-button-container .submit-search{
width: 340px;
}
.search-tag-select-container{
order: 2;
}
.search-text-select-container{
order: 3;
}
.form-content .fields{
padding: 16px;
height: fit-content;
}
.confirm-registration-body{
padding: 0px 30px 30px 30px;
border: 1px solid #DDDDDD;
}
.category-list{
padding: 0px 40px 0px 40px;
}
}
@media (max-width: 665px){
#last-content:not(.margin-up) {
padding-top: 60px;
}
#last-content:not(.margin-up) img.landingIllustrationsSp{
top: -55px;
}
.article-blog-pagination{
margin-bottom: 150px;
}
.margin-up{
padding-top: 130px;
}
.landingIllustrationSp0{
height: 85px;
left: 60px;
top: 230px;
}
.landingIllustrationOverallSp1{
height: 130px;
top: -153px;
left: 44px;
}
.landingIllustrationSp1{
height: 130px;
top: 8px;
left: 44px;
}
.landingIllustrationSp2{
height: 92px;
left: 90px;
top: 220px;
}
.landingIllustrationSp3{
height: 78px;
left: 60px;
top: 20px;
}
.landingIllustrationSp4{
height: 100px;
left: 90px;
top: 215px;
}
.landingIllustrationSp5{
height: 94px;
left: 70px;
top: 10px;
}
.category-image{
height: 190px;
}
.category-image-container {
width: 190px;
height: 190px;
}
.category-list{
padding: 0px 75px 0px 75px;
}
}
@media (max-width: 585px){
.category-name-section span{
max-width: 130px;
}
.landingIllustrationSp0{
left: 50px;
}
.landingIllustrationSp2{
left: 75px;
}
.landingIllustrationSp4{
left: 75px;
}
.landingIllustrationSp5{
height: 94px;
left: 70px;
}
.category-image{
height: 165px;
}
.category-image-container {
width: 165px;
height: 165px;
}
.category-list{
padding: 0px 60px 0px 60px;
}
}
@media (max-width: 568px){
.post-section-crumb{
display: none;
}
.new-post-container, .main-content{
margin-top: 40px;
}
.footer-bottom-increased{
min-height: 93vh;
}
}
@media (max-width: 525px){
.category-list{
padding: 0px 35px 0px 35px;
}
.fixed-buttons{
left:49%;
}
}
@media (max-width: 465px){
.splash-screen-container
{
gap: unset !important;
}
.orange-circle {
animation: grow-fade-in 10s ease-out forwards,
grow-fade-out 10s ease-out forwards !important;
animation-delay: 2s !important;
}
.animate-logo {
width: 240px;
}
.leaves{
/* left: -36px !important; */
/* top: -85px !important; */
margin-bottom: -195px !important;
width: 272px;
animation-delay: 1.2s !important;
}
.trunk{
/* left: 17px !important; */
width: 171px !important;
animation: reveal-trunk 0.8s ease-in-out forwards !important;
}
.trees {
/* animation: hide-tree 1.2s forwards !important; */
animation-delay: 2.2s !important;
}
/* .trees{
margin-top: 287px !important;
} */
.logo-image {
/* margin-top: 480px !important; */
animation-delay: 2.2s !important;
}
}
@media (max-width: 445px){
.fixed-buttons{
left:44%;
}
.content {
width: 336px;
}
.input-field, .submit-form, .cancel-form, #forget-password-form .error-message{
width: 300px;
}
.submit-form2, .submit-form3 {
width: 300px;
}
.new-post-cancel {
width: 358px;
}
.background-div{
width: 323px;
}
.login-body{
align-items: center;
}
.modal-content{
width: 280px !important;
height: 320px !important;
}
.modal-content-reply{
width: 287px !important;
height: 292px !important;
}
.modal-content-reply .message_box{
width: 239px;
left: calc(50% - 239px / 2);
}
.modal-content .message_box{
width: 235px !important;
height: 170px !important;
left: calc(50% - 234px / 2) !important;
}
.modal-content-register{
width: 355px !important;
}
.close, .closeReply{
width: 235px !important;
}
.similar-article-block, .similar-article-block-title, .similar-article-block-summary{
width: 300px;
}
.category-list{
padding: 0px 15px 0px 15px;
}
}
@media (max-width: 425px){
#search-pannel, .search-container{
width: 100%;
}
.search-container{
align-items: center;
}
.category-image{
max-width: unset;
}
.crumb-page {
max-width: 216px;
}
}
@media (max-width: 402px){
.category-list{
padding: 0px 5px 0px 5px;
}
}
@media (max-width: 385px){
.category-list{
padding: 0px;
}
}
@media (max-width: 371px){
.category-list {
padding: 0px 20px 0px 20px;
}
}
@media (max-width: 350px){
.category-list {
padding: 0px;
}
}
.nav-logo-section .nav-logo img, .nav-logo-section .nav-logo img{
max-width: 190px;
}
@media (max-width: 390px){
.article-name-section{
text-decoration: underline;
margin-top: -5px;
}
.article-user-section-inner{
align-items: flex-start;
}
}
@media (max-width: 371px){
.fixed-buttons {
left: 44%;
}
.fixed-buttons {
gap: 11px;
}
.scroll-to-top-btn-register{
left: 40%;
}
.article-description-tag{
max-width: 275px;
}
.margin-up {
padding-top: 95px;
}
.treeList.break-line.firstElement a{
padding-bottom: 7px;
}
.landingIllustrationSp0{
height: 78px;
left: 39px;
top: 210px;
}
.landingIllustrationSp1{
height: 115px;
top: 9px;
left: 30px;
}
.landingIllustrationSp2{
height: 85px;
left: 57px;
top: 190px;
}
.landingIllustrationSp3{
height: 78px;
left: 30px;
top: 10px;
}
.landingIllustrationSp4{
height: 90px;
left: 63px;
top: 200px;
}
.landingIllustrationSp5{
height: 94px;
left: 37px;
top: 7px;
}
.category-image{
height: 145px;
}
.category-image-container{
width: 130px;
}
.category-button span{
font-size: 14px;
}
.nav-profile-section{
gap: 7px;
}
nav.category-navbar{
padding: 9px;
}
.article-description-content, .similar-article-section, .summary-section span, .JCA-comment-section, .comment-user-container, .reply-comments-container, .summary-section img{
width: 275px;
}
.add-new-comment-section form {
width: 241px;
}
.article-description-section{
width: 90%;
}
.input-field-big, .dropdown-container, .image-container, .tag-container, .ck.ck-reset.ck-editor.ck-rounded-corners, .ck.ck-editor__top.ck-reset_all, .input-field-edit-profile select.select-age, .input-field-edit-profile input, .main-content .container-2 span.tree-text {
width: 285px;
}
.tox.tox-tinymce{
width: 284px;
}
.bigger-submit-form, .new-post-cancel{
width: 285px !important;
}
.confirm-new-post-body{
padding: 20px;
}
.confirm-post-field-section, .confirm-title, .confirm-article-section, .confirm-article-text, .tags-section, .main-content .container-3 .tree-btn {
width: 270px;
}
.add-reply-section{
width: 200px;
}
.new-card{
right: -3%;
top: -7%;
}
.normal-comment-section .comment-user-container,.normal-comment-section .reply-comments-container{
width: 241px;
}
.reply-section {
width: 200px;
}
.profile-body-header, .profile-body-content-bottom, .profile-body-content{
width: 266px;
}
.public-progile-header{
width: 300px;
gap: 8px;
}
.edit-button, .buttons .update-button, .buttons .update-button button, .buttons .update-button button span.update-text, .buttons .cancel-button, .buttons .cancel-button .cancel-text{
width: 256px;
}
.search-input-field .search-dropdown, .search-input-field, .search-text, .search-tag-input-field, .search-submit-button-container .submit-search {
width: 285px;
}
.input-field-confirm {
width: 240px;
}
.comment-user-container, .reply-comments-container, .important-text{
width: 241px;
}
#last-content:not(.margin-up) img.landingIllustrationsSp{
top: -20px ;
}
}
@media (max-width: 330px){
.blog-body {
justify-content: start;
width: 311px;
}
.login-body{
width: unset;
}
}
#up {
display: none;
}
/* Add more nth-child for more cards */
.article-blog-card {
opacity: 0;
transform: translateY(50px);
}
/*----------=========nav bar animation=====---------------------*/
#later-category-navbar,.navbar{
transition: top 0.3s ease-in-out;
}
.author-image-link{
border-radius: 50%;
width: 50px;
height: 50px;
}
.author-image-link-comment{
border-radius: 50%;
width: 30px;
height: 30px;
}
/* Modal Background */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-spinner{
display: none;
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.modal-content {
animation: fadeIn 0.3s ease-in-out;
position: absolute;
width: 418px;
height: 290px;
top: 118px;
background: #FFFFFF;
border-radius: 20px;
}
/* Overlay covers the entire page */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.1s ease-in-out, visibility 0.5s;
}
/* Spinner in the center */
.overlay.show {
opacity: 0.4;
display: block;
}
.fixed-news, .news-mb, .fixed-news-mb, .fixed-news-mb , .fixed-buttons{
transition: bottom 0.5s ease-in-out;
}
/* Spinner styles */
.spinner {
width: 30px;
height: 30px;
margin-left: 8px;
margin-top: 3px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* Spinner animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.modal-content-reply {
animation: fadeIn 0.3s ease-in-out;
position: absolute;
width: 418px;
height: 238px;
top: 118px;
background: #FFFFFF;
border-radius: 20px;
}
.modal-content-register {
animation: fadeIn 0.3s ease-in-out;
position: absolute;
width: 418px;
height: 165px;
top: 118px;
background: #FFFFFF;
border-radius: 20px;
}
.message_box .message_head .comment_head{
/* コメント申請を受け付けました。 */
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #454545;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.message_box{
/* Frame 243143 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 30px;
position: absolute;
width: 358px;
left: calc(50% - 358px/2);
top: 37px;
}
.message_box .message_head{
/* Frame 243879 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 24px;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.message_box .message_head .comment_body{
/* 事務局にてコメント内容を確認後、承認となりますとコメントが公開されます。 */
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #333333;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.close_button{
display: flex;
justify-content: center;
padding: 0px;
gap: 30px;
height: 48px;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
.close {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 358px;
height: 48px;
background: #6DAD19;
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.closeReply {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 8px;
width: 358px;
height: 48px;
background: #6DAD19;
box-shadow: 0px 1.5px 8.5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.close span,.closeReply span{
/* テキスト */
height: 32px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
leading-trim: both;
text-edge: cap;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 1;
justify-content: center;
}
.centered-text{
margin: 50px 0px 32px 0px;
padding: 0px 20px;
display: flex;
width: 100%;
justify-content: center;
}
.centered-text span{
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 20px;
text-align: center;
letter-spacing: -0.24px;
color: #454545;
}
.back-button{
display: flex;
justify-content: center;
margin-bottom: 100px !important;
}
.fixed-news{
margin: 0;
position: fixed;
bottom: 4%;
left: 3%;
width: 422px;
height: 120px;
border-radius: 20px 0px;
padding: 13px 24px;
overflow: hidden;
background: #FFFFFF;
border: 3px solid #4C9F2E;
opacity: 0;
visibility: hidden;
transition: opacity 1.5s ease, visibility 1.5s ease;
}
.scroll-content {
height: 100%;
overflow-y: auto !important;
padding-right: 25px;
scrollbar-width: auto !important;
-ms-overflow-style: auto !important;
transition: scrollbar-color 0.5s ease-in-out;
}
.fixed-news ul li{
font-size: 14px;
}
.close-with-text{
display: flex;
gap: 5px;
align-items: center;
margin-bottom: 8px;
}
.fixed-news .news, .news{
padding: 0;
color: #333333;
font-size: 16px;
font-weight: 500;
margin-top: -2px;
}
.fixed-news span{
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
.fixed-news a:hover, .fixed-news-mb a:hover {
color: #4C9F2E;
}
.fixed-news a, .fixed-news-mb a {
color: #4C9F2E;
text-decoration: none;
line-height: 18px;
font-weight: 400;
font-size: 14px;
text-decoration: underline;
}
.fixed-news ul, .fixed-news-mb ul {
list-style-type: none;
padding-left: 20px !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #333333 !important;
margin-left: -17px;
}
.fixed-news ul li, .fixed-news-mb ul li{
margin-bottom: 24px;
}
.news-closed{
display: flex;
gap: 5px;
}
.fixed-news-mb {
margin: 0;
position: fixed;
bottom: 4%;
height: 35px;
width: 140px;
padding: 10px;
opacity: 0;
visibility: hidden;
transition: opacity 1.5s ease, visibility 1.5s ease;
}
.toggle-button {
text-align: center;
cursor: pointer;
display: flex;
width: 115px;
margin-bottom: 8px;
justify-content: space-between;
transition: all 0.5s ease-in-out;
}
#toggle-button.open430{
width: 368px;
}
#toggle-button.open390{
width: 328px;
}
#toggle-button.open360{
width: 300px;
}
.news-mb{
margin: 0;
position: fixed;
bottom: 4%;
max-height: 52px;
width: 142px;
padding: 12px 10px;
overflow: hidden;
border-radius: 20px 0px;
/* overflow-y: auto; */
/* position: relative; */
background: #FFFFFF;
border: 3px solid #4C9F2E;
transition: all 0.5s ease-in-out;
}
#toggleBtn2 {
font-size: 24px;
cursor: pointer;
position: absolute;
transition: transform 0.3s;
margin-top: -31px;
width: 50px;
background: #FFFFFF;
border: 2px solid green;
border-radius: 10px 10px 0 0;
}
.toggleBtn{
font-size: 24px;
color: #555555;
transition: transform 1s ease-in-out;
}
.toggleBtn3{
font-size: 24px;
color: #555555;
transition: transform 0.5s ease-in-out;
}
.one-news{
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
}
.hide-btn{
display: none;
}
.close-with-arrow{
display: flex;
justify-content: space-between;
cursor: pointer;
}
.content {
width: 285px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
overflow-y: hidden;
transition: all 0.5s ease-in-out;
}
#fixed-news-mb{
display: none;
}
.news-mb.open {
width: 340px;
padding: 10px;
}
.content.open{
display: block;
}
.toggle-button.open{
display: block;
}
#toggleBtn.open {
transform: rotate(180deg);
}
#toggleBtn3.open {
transform: rotate(180deg);
}
#fixed-news.open{
height: 400px;
}
#non-needed.non-needed{
overflow-y: auto !important;
height: 100%;
overflow-x: hidden;
max-height: 272px;
padding-right: 18px;
}
#non-needed.non-needed360{
overflow-y: auto !important;
height: 100%;
overflow-x: hidden;
max-height: 290px;
padding-right: 18px;
}
#non-needed.non-needed430{
overflow-y: auto !important;
height: 100%;
overflow-x: hidden;
max-height: 272px;
padding-right: 18px;
}
#news-mb.open {
max-height: 305px;
overflow-y: auto !important;
padding: 15px 0px 0px 20px;
-ms-overflow-style: auto !important;
}
#news-mb.openf {
width: 410px;
max-height: 292px;
padding: 15px 0px 0px 20px;
-ms-overflow-style: auto !important;
}
#news-mb.open390 {
width: 370px;
max-height: 292px;
padding: 15px 0px 0px 20px;
-ms-overflow-style: auto !important;
}
.content.open390{
width: 305px;
}
.content.openf{
width: 342px;
}
.content.open360{
width: 280px;
}
#news-mb::-webkit-scrollbar {
width: 8px !important;
height: 5px !important;
}
#news-mb::-webkit-scrollbar-thumb {
background: #888 !important;
border-radius: 4px !important;
min-height: 300px !important;
}
#news-mb::-webkit-scrollbar-track {
background: #f1f1f1 !important;
}
#fixed-news {
max-height: 295px;
overflow-y: auto !important;
padding: 15px 0px 10px 20px;
scrollbar-width: auto !important;
-ms-overflow-style: auto !important;
transition: all 0.5s ease-in-out;
}
#fixed-news.show {
opacity: 1;
visibility: visible;
}
#fixed-news-mb.show {
opacity: 1;
visibility: visible;
}
#fixed-news::-webkit-scrollbar {
width: 1px !important;
}
#fixed-news::-webkit-scrollbar-thumb {
background: #4C9F2E !important;
transition: background 0.5s ease-in-out;
min-height: 3px !important;
}
/* Firefox (Alternative method) */
#fixed-news, #news-mb {
scrollbar-color: #888 transparent !important;
}
@media (min-height: 1000px) and (min-width : 1500px) {
.landingIllustrationEnd {
right: -1206px;
}
}
@media screen and (min-width: 1550px) {
.centralIllustrationContainer{left: 23%;}
}
@media screen and (min-width: 1650px) {
.centralIllustrationContainer{left: 33%;}
.landingIllustrationStart{
left: -100px;
}
}
@media screen and (min-width: 1800px) {
.centralIllustrationContainer{left: 40%;}
.landingIllustrationCenterEnd{
right: -960px;
}
.landingIllustrationEnd{
right: -1150px;
}
}
@media screen and (min-width: 2100px) {
.landingIllustrationEnd{
right: -1300px;
}
.landingIllustrationCenterEnd, .landingIllustrationHeight1.twoRowTree{
right: -1200px;
}
.landingIllustration5{
right: -1251px;
}
}
@media screen and (max-width: 2150px) {
.landingIllustration2 {
right: -950px;
}
}
@media screen and (min-width: 2300px) {
.centralIllustrationContainer{
left: 44%;
}
.landingIllustration0 {
left: -380px;
}
}
@media screen and (min-width: 2400px) {
.centralIllustrationContainer{
left: 46%;
}
.landingIllustration2{
right: -1050px;
}
.landingIllustrationEnd {
right: -1500px;
}
}
@media screen and(min-width:1650px) and(min-height: 1800px) {
.centralIllustrationContainer{
left: 0;
}
}
@media screen and(min-width: 1600px) and(min-height: 1050px){
.container-first .tree:nth-child(3) {
padding-left: 380px;
}
.container-first .tree:nth-child(3) .new-card-category {
right: -20%;
}
}
@media (max-width: 1216px){
.centralIllustrationContainer{
left: 0%;
}
.landingIllustrationStartCenter {
left: 320px;
}
.landingIllustrationHeight1.landingIllustrationStartCenter{
left: 270px;
}
.landingIllustration0{
left: 160px;
}
}
@media (max-width: 1250px) {
.landingIllustration2 {
right: -850px;
}
}
@media (max-width: 1169px) {
.landingIllustration2 {
right: -800px;
}
}
@media (max-width: 1129px){
.landingIllustration2 {
right: -780px;
}
.landingIllustrationEnd {
right: -940px;
}
}
@media screen and (min-height: 1100px) {
.centralIllustrationContainer{
top: 16%;
}
.landingIllustration1{
top: -66px;
}
.landingIllustration4 {
top: 50px;
}
.landingIllustration5 {
top: -70px;
}
.landingIllustrationStartCenter{
top: 105px;
}
.landingIllustrationCenterEnd{
top: 0px;
}
}
@media screen and (min-height: 1400px) {
.landingIllustration0 {
top: 225px;
}
.landingIllustration1 {
top: 70px;
}
.landingIllustration4 {
top: 70px;
}
.landingIllustration5 {
top: 0px;
}
.landingIllustrationStartCenter {
top: 109px;
}
.landingIllustrationCenterEnd {
top: -50px;
}
}
@media (min-width: 1217px) {
.landingIllustration2 {
right: -785px;
}
.landingIllustrationStartCenter{
left: 270px;
top: 185px;
}
.landingIllustrationCenterEnd {
right: -730px;
/* changed */
/* top: -70px; */
top: 20px;
}
}
@media (min-width: 1272px) {
.landingIllustration2 {
right: -840px;
}
.landingIllustrationStartCenter {
left: 350px;
}
.landingIllustrationCenterEnd {
right: -800px;
}
}
@media (min-width: 1358px) {
.centralIllustrationContainer{
left: 15%;
}
}
@media (min-width: 1436px) {
.landingIllustration2 {
right: -900px;
}
.landingIllustrationCenterEnd {
right: -900px;
}
}
@media (min-width: 1558px) {
.centralIllustrationContainer{
left: 25%;
}
.landingIllustrationStart{
left: -30px;
}
}
@media (min-width: 1627px) {
.landingIllustrationEnd {
right: -1200px;
}
}
@media (min-width: 1733px) {
.centralIllustrationContainer{
left: 28%;
}
.landingIllustration5 {
right: -1151px;
}
}
@media (min-width: 1827px) {
.landingIllustration0 {
left: -80px;
}
.landingIllustration2 {
right: -950px;
}
.landingIllustrationCenterEnd {
right: -1100px;
}
.landingIllustrationEnd {
right: -1400px;
}
.landingIllustration5 {
right: -1300px;
}
}
@media (min-width: 2000px) {
.centralIllustrationContainer {
left: 35%;
}
.landingIllustration1 {
right: -630px;
}
}
@media (min-width: 2230px) {
.centralIllustrationContainer {
left: 40%;
}
.landingIllustration0 {
left: -100px;
}
}
@media (min-width: 2400px) {
.centralIllustrationContainer {
left: 45%;
}
.landingIllustration0 {
left: -300px;
}
.landingIllustrationStart {
left: -250px;
}
}
/* NEW TOP STYLES */
.container-first {
display: flex;
flex-wrap: wrap;
/* justify-content: center; */
margin-top: -67px;
width: 100vw;
height: 100vh;
}
.container-scroll {
display: flex;
flex-wrap: wrap;
margin-top: 25px;
}
.TopBackgroundImg{
width: 340px;
height: auto;
}
.tree {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
margin-bottom: 95px;
flex-wrap: wrap;
}
.category-image{
width: auto;
height: 315.04px;
}
/* Row 1: First item takes full width */
.container-first .tree:nth-child(1) {
flex-basis: 100%;
text-align: center;
margin-bottom: unset;
z-index: 9;
}
.container-first .tree:nth-child(2),
.container-first .tree:nth-child(3){
overflow: visible;
margin-top: -64px;
margin-bottom: 25px;
}
.container-first .tree:nth-child(2),
.container-first .tree:nth-child(3){
flex-basis: calc(50% - 5px);
}
.container-first .tree:nth-child(4),
.container-first .tree:nth-child(5) {
flex-basis: calc(50% - 5px);
}
.container-first .tree:nth-child(2) {
padding-right: 180px;
}
.container-first .tree:nth-child(4){
padding-right: 150px;
}
.container-first .tree:nth-child(3){
padding-left: 180px;
}
.container-first .tree:nth-child(5){
padding-left: 150px;
}
.container-first .tree:nth-child(2),
.container-first .tree:nth-child(3){
justify-content: center;
}
.container-first .tree:nth-child(4){
justify-content: end;
}
.container-first .tree:nth-child(5){
justify-content: start;
}
.container-scroll .tree:nth-child(1),
.container-scroll .tree:nth-child(2),
.container-scroll .tree:nth-child(3) {
flex-basis: calc(33.33% - 7px);
}
.container-scroll .tree:nth-child(4),
.container-scroll .tree:nth-child(5) {
flex-basis: calc(50% - 5px);
}
.container-scroll .tree:nth-child(5n + 6),
.container-scroll .tree:nth-child(5n + 7),
.container-scroll .tree:nth-child(5n + 8) {
flex-basis: calc(33.33% - 7px);
}
.container-scroll .tree:nth-child(5n + 9) .category-image-container, .container-scroll .tree:nth-child(4) .category-image-container{
margin-left: 200px;
}
.container-scroll .tree:nth-child(5n + 10) .category-image-container, .container-scroll .tree:nth-child(5) .category-image-container{
margin-right: 200px;
}
.container-scroll .tree:nth-child(5n + 9),
.container-scroll .tree:nth-child(5n + 10) {
flex-basis: calc(50% - 5px);
}
.first-view {
overflow: hidden;
background-color: #e8f5fa;
}
.scroll-section {
background-color: #ffffff;
overflow-y: auto;
height: 100vh;
}
/* h1 {
text-align: center;
} */
.user-icon svg, .search-icon svg{
width: 40px;
height: 40px;
}
@media screen and (min-height: 1100px) {
.new-circle-background {
width: 65px;
height: 65px;
}
.scroll-to-top-btn-top,
.add-post-top {
width: 100px;
height: 100px;
}
.nav-logo-section .nav-logo img {
max-width: 220px;
}
.nav-profile-section .user-icon {
width: 46px;
height: 46px;
}
.user-icon svg,
.search-icon svg {
width: 44px;
height: 44px;
}
.category-image-container {
min-width: 350px;
min-height: 350px;
}
.category-image{
min-height: 350px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span {
font-size: 18px;
}
}
@media screen and (min-height: 1300px) {
.new-circle-background {
width: 72px;
height: 72px;
}
.scroll-to-top-btn-top,
.add-post-top {
width: 120px;
height: 120px;
}
.scroll-to-top-btn-top svg,
.add-post-top svg{
width: 40px;
height: 40px;
}
.nav-logo-section .nav-logo img {
max-width: 240px;
}
.nav-profile-section .user-icon {
width: 50px;
height: 50px;
}
.user-icon svg,
.search-icon svg {
width: 48px;
height: 48px;
}
.category-image-container {
min-width: 400px;
min-height: 400px;
}
.category-image{
min-height: 400px;
}
.TopBackgroundImg {
width: 428px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span {
font-size: 20px;
}
.scroll-to-top-btn-top span, .scroll-to-top-btn-top-register span{
margin-top: unset;
}
nav.category-navbar {
padding: 30px 30px;
}
}
@media screen and (min-height: 1500px) {
.new-circle-background {
width: 80px;
height: 80px;
}
.scroll-to-top-btn-top,
.add-post-top {
width: 130px;
height: 130px;
gap: 10px;
}
.nav-logo-section .nav-logo img {
max-width: 260px;
}
.nav-profile-section .user-icon {
width: 55px;
height: 55px;
}
.user-icon svg,
.search-icon svg {
width: 52px;
height: 52px;
}
.category-image-container {
min-width: 450px;
min-height: 450px;
}
.category-image{
min-height: 450px;
}
.TopBackgroundImg {
width: 476px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span {
font-size: 22px;
}
}
@media screen and (min-height: 1700px) and (min-width: 1288px) {
.new-circle-background {
width: 88px;
height: 88px;
}
}
@media screen and (min-height: 1700px) {
.scroll-to-top-btn-top,
.add-post-top {
width: 140px;
height: 140px;
}
.nav-logo-section .nav-logo img {
max-width: 280px;
}
.nav-profile-section .user-icon {
width: 60px;
height: 60px;
}
.user-icon svg,
.search-icon svg {
width: 56px;
height: 56px;
}
.category-image-container {
min-width: 500px;
min-height: 500px;
}
.category-image{
min-height: 500px;
}
.TopBackgroundImg {
width: 516px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span {
font-size: 24px;
}
}
@media screen and (min-width: 1500px) and (min-height: 1500px) {
.tree {
margin-bottom: 125px;
}
}
@media screen and (min-height: 1834px) and (min-width: 1650px) {
.new-circle-background {
width: 95px;
height: 95px;
}
}
@media screen and (min-height: 1834px) {
.scroll-to-top-btn-top,
.add-post-top {
width: 150px;
height: 150px;
}
.nav-logo-section .nav-logo img {
max-width: 300px;
}
.nav-profile-section .user-icon {
width: 65px;
height: 65px;
}
.user-icon svg,
.search-icon svg {
width: 60px;
height: 60px;
}
.TopBackgroundImg {
width: 556px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span {
font-size: 26px;
}
}
@media screen and (max-height: 1000px) {
.new-circle-background {
width: 50px;
height: 50px;
}
.scroll-to-top-btn-top,
.add-post-top {
width: 80px;
height: 80px;
}
.scroll-to-top-btn-top{
gap: 5px;
}
.category-image-container {
min-width: 290px;
max-height: 290px;
}
.category-image{
max-height: 290px;
}
.TopBackgroundImg {
width: 316px;
}
.category-button span, .new-circle-background span, .scroll-to-top-btn-top span{
font-size: 15px;
}
.add-post-top span {
font-size: 11px;
}
}
@media screen and (max-height: 925px) {
.new-circle-background {
width: 45px;
height: 45px;
}
.category-image-container {
min-width: 270px;
max-height: 270px;
}
.category-image{
max-height: 270px;
}
.TopBackgroundImg {
width: 296px;
}
.category-button span, .new-circle-background span, .scroll-to-top-btn-top span {
font-size: 14px;
}
}
@media screen and (max-height: 865px) {
.new-circle-background {
width: 42px;
height: 42px;
}
.category-image-container {
min-width: 250px;
max-height: 250px;
}
.category-image{
max-height: 250px;
}
.TopBackgroundImg {
width: 276px;
}
.category-button span, .new-circle-background span, .scroll-to-top-btn-top span {
font-size: 13px;
}
.add-post-top{
gap: unset;
}
}
@media screen and (max-height: 805px) {
.new-circle-background {
width: 38px;
height: 38px;
}
.category-image-container {
min-width: 230px;
max-height: 230px;
}
.category-image{
max-height: 230px;
}
.TopBackgroundImg {
width: 256px;
}
.category-button span, .new-circle-background span, .scroll-to-top-btn-top span {
font-size: 12px;
}
}
@media screen and (max-height: 745px) {
.new-circle-background {
width: 35px;
height: 35px;
}
.category-image-container {
min-width: 210px;
max-height: 210px;
}
.category-image{
max-height: 210px;
}
.TopBackgroundImg {
width: 236px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span {
font-size: 11px;
}
}
@media screen and (max-height: 685px) {
.new-circle-background {
width: 32px;
height: 32px;
}
.category-image-container {
min-width: 190px;
max-height: 190px;
}
.category-image{
max-height: 190px;
}
.TopBackgroundImg {
width: 216px;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span {
font-size: 10px;
}
}
@media (min-width: 1089px) and (max-width: 1288px){
.landingIllustrationEnd {
right: -1000px;
}
}
@media (min-width: 1089px) and (max-width: 1217px){
.new-card-category{
right: -34%;
top: -2%;
}
}
@media (min-width: 1080px) and (max-width: 1217px){
.landingIllustration1 {
height: 177px;
}
.landingIllustration3 {
height: 127px;
left: 50px;
top: 170px;
}
.landingIllustration4 {
height: 127px;
left: 560px;
top: 0px;
}
.landingIllustration5 {
height: 135px;
right: -900px;
top: -140px;
}
.landingIllustrationend {
top: -80px;
right: -900px;
}
.landingIllustrationHeight2 {
height: 125px;
}.landingIllustrationHeight3 {
height: 107px;
}
.landingIllustrationHeight1 {
height: 150px;
}
.category-image{
max-height: 210px;
min-height: 210px !important;
height: 210px;
}
.category-image-container{
max-width: 210px;
max-height: 210px;
min-width: 210px;
min-height: 210px;
}
}
@media (min-width: 1500px) and (max-width: 1600px){
.landingIllustrationHeight1 {
height: 160px;
}
}
@media(max-width: 1600px){
.landingIllustrationHeight0 {
height: 120px;
}
.landingIllustrationHeight3{
height: 127px;
}
.landingIllustrationHeight3 {
height: 97px;
}
.landingIllustrationCenter {
top: 40px;
}
}
@media screen and (min-height: 1400px) {
.landingIllustration5 {
top: -40px;
}
}
@media (min-width: 1080px) and (max-width: 1217px) and (min-height:1200px){
.category-image{
max-height: 310px;
min-height: 310px !important;
height: 310px;
}
.category-image-container{
max-width: 310px;
max-height: 310px;
min-width: 310px;
min-height: 310px;
}
.TopBackgroundImg {
width: 382px;
}
}
@media (max-width: 1088px){
.category-image{
max-height: 350px;
min-height: 350px !important;
height: 350px;
}
.category-image-container{
max-width: 350px;
max-height: 350px;
min-width: 350px;
min-height: 350px;
}
.nav-logo-section .nav-logo img, .nav-logo-section .nav-logo img{
max-width: 174px;
height: 49px;
}
}
@media (max-width: 1088px){
.tree{
margin-bottom: unset;
}
.tree:nth-child(1){
padding-bottom: 95px;
}
}
@media (max-width: 1088px){
.category-image{
max-height: 350px !important;
min-height: 350px !important;
height: 350px !important;
}
.category-image-container{
max-width: 350px !important;
max-height: 350px !important;
min-width: 350px !important;
min-height: 350px !important;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span{
font-size: 14px;
}
.user-icon svg, .search-icon svg{
width: unset;
height: unset;
}
.new-circle-background{
width: 40px;
height: 40px;
}
.add-post-top, .scroll-to-top-btn-top{
height: 90px;
width: 90px;
}
}
@media (max-width: 875px){
.category-image{
max-height: 260px !important;
min-height: 260px !important;
height: 260px !important;
}
.category-image-container{
max-width: 260px !important;
max-height: 260px !important;
min-width: 260px !important;
min-height: 260px !important;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span{
font-size: 14px;
}
.user-icon svg, .search-icon svg{
width: unset;
height: unset;
}
}
@media (max-width: 665px){
.fixed-news{
display: none;
}
#fixed-news-mb{
display: block;
}
.category-image{
max-height: 190px !important;
min-height: 190px !important;
height: 190px !important;
}
.category-image-container {
max-width: 190px !important;
max-height: 190px !important;
min-width: 190px !important;
min-height: 190px !important;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span{
font-size: 14px;
}
.user-icon svg, .search-icon svg{
width: unset;
height: unset;
}
.nav-profile-section{
gap: 5px;
}
}
@media (max-width: 585px){
.category-image{
max-height: 165px !important;
min-height: 165px !important;
height: 165px !important;
}
.category-image-container {
max-width: 165px !important;
max-height: 165px !important;
min-width: 165px !important;
min-height: 165px !important;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span{
font-size: 14px;
}
.user-icon svg, .search-icon svg{
width: unset;
height: unset;
}
}
@media (max-width: 425px){
.category-image{
max-width: unset !important;
min-width: unset !important;
width: unset !important;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span{
font-size: 14px;
}
.user-icon svg, .search-icon svg{
width: unset !important;
height: unset !important;
}
}
@media (max-width: 371px){
.category-image{
max-height: 145px !important;
min-height: 145px !important;
height: 145px !important;
}
.category-image-container{
max-width: 130px !important;
min-width: 130px !important;
}
.category-button span, .new-circle-background span, .add-post-top span, .scroll-to-top-btn-top span, .profile-with-text span{
font-size: 14px;
}
.user-icon svg, .search-icon svg{
width: unset;
height: unset;
}
}
@media (min-width: 1088px) and (min-height: 1295px) and (max-height: 1834px) and (max-width: 1288px){
.TopBackgroundImg {
width: 296px;
}
.category-image-container{
min-width: 250px;
min-height: 250px;
}
.category-image{
min-height: 250px;
}
}
@media (min-width: 1288px) and (min-height: 1295px) and (max-height: 1834px) and (max-width: 1500px){
.TopBackgroundImg {
width: 316px;
}
.category-image-container{
min-width: 400px;
min-height: 400px;
}
.category-image{
min-height: 400px;
}
}
@media (min-width: 1285px) and (min-height: 1100px) and (max-height: 1295px) and (max-width: 1359px){
.landingIllustration1 {
right: -790px;
}
}
@media (min-width: 1455px) and (min-height: 1100px) and (max-height: 1295px) and (max-width: 1558px){
.landingIllustration1 {
right: -800px;
}
}
@media (min-width: 1088px) and (min-height: 1200px) and (max-height: 1834px) and (max-width: 1400px){
.container-first .tree:nth-child(3) {
padding-left: 180px;
}
}
@media (min-width: 1400px) and (min-height: 1200px) and (max-height: 1834px) and (max-width: 2150px){
.container-first .tree:nth-child(3) {
padding-left: 280px;
}
}
@media (min-width: 1288px) and (min-height: 1295px) and (max-height: 1500px) and (max-width: 1560px){
.landingIllustration1 {
right: -830px;
}
}
@media (min-width: 1217px) and (min-height: 1295px) and (max-height: 1834px) and (max-width: 2150px){
.container-first .tree:nth-child(3) .new-card-category {
right: -12%;
}
}
@media (min-width: 1501px) and (min-height: 1295px) and (max-height: 1834px) and (max-width: 1850px){
.TopBackgroundImg {
width: 340px;
}
.category-image-container{
min-width: 450px;
min-height: 450px;
}
.category-image{
min-height: 450px;
}
}
@media(min-height:1000px) and (max-height: 1500px) and (min-width: 2100px){
.landingIllustration2 {
right: -1050px;
}
.landingIllustrationEnd {
right: -1500px;
}
}
@media (min-width: 1701px) and (min-height: 1600px) and (max-height: 1834px) and (max-width: 1800px){
.landingIllustration0 {
/* height: 170px; */
left: 0px;
}
.landingIllustration1 {
/* height: 280px; */
right: -830px;
top: -80px;
}
.landingIllustration2 {
/* height: 192px; */
top: 220px;
right: -950px;
}
.landingIllustration3 {
/* height: 157px; */
left: -60px;
top: 300px;
}
.landingIllustration4 {
/* height: 200px; */
}
.landingIllustration5 {
/* height: 200px; */
right: -1151px;
top: -100px;
}
.landingIllustrationStartCenter {
/* height: 200px; */
left: 290px;
top: 200px;
}
.landingIllustrationCenterEnd {
/* height: 200px; */
right: -850px;
top: -80px;
}
.landingIllustrationStart {
/* height: 200px; */
left: -100px;
top: 200px;
}
.landingIllustrationCenter {
height: 160px;
top: 90px;
}
.landingIllustrationEnd {
/* height: 200px; */
right: -1140px;
top: 0px;
}
.landingIllustrationHeight1 {
/* height: 250px; */
}
}
@media (max-width: 1600px) and (min-height: 1000px) {
.landingIllustrationStartCenter {
left: 300px;
top: 250px;
}
.landingIllustrationHeight3 {
height: 125px;
}
.landingIllustrationCenterEnd {
/* changed */
/* right: -680px; */
right: -700px;
top: 50px;
}
}
@media (min-width: 1218px) and (min-height: 1100px) and (max-height: 1200px) and (max-width: 1600px){
.landingIllustrationStartCenter {
left: 270px;
top: 220px;
}
.landingIllustrationCenterEnd {
right: -770px;
top: 80px;
}
.landingIllustrationStart {
left: -50px;
}
}
@media (min-width: 1088px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1126px){
.landingIllustration2 {
right: -800px;
}
.landingIllustration1 {
right: -800px;
}
.landingIllustration5 {
right: -1000px;
}
.landingIllustrationCenterEnd {
right: -650px;
top: 40px;
}
.landingIllustrationHeight1 {
height: 180px;
}
.landingIllustrationend {
top: 20px;
right: -940px;
}
}
@media (min-width: 1126px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1212px){
.landingIllustration2 {
right: -840px;
}
.landingIllustration1 {
right: -800px;
}
.landingIllustration5 {
right: -1000px;
}
.landingIllustrationCenterEnd {
top: 40px;
right: -685px;
}
.landingIllustrationHeight1 {
height: 180px;
}
.landingIllustrationend {
top: 20px;
right: -970px;
}
}
@media (min-width: 1213px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1216px){
.landingIllustration1 {
right: -800px;
}
.landingIllustration5 {
right: -1000px;
}
.landingIllustrationHeight1 {
height: 180px;
}
.landingIllustrationCenterEnd {
top: 40px;
}
.landingIllustrationend {
top: 20px;
right: -1030px;
}
}
@media (min-width: 1217px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1254px){
.landingIllustrationCenterEnd {
top: 40px;
}
.landingIllustrationStartCenter {
left: 250px;
top: 170px;
}
}
@media (min-width: 1255px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1416px){
.landingIllustrationCenterEnd {
right: -730px;
top: 40px;
}
.landingIllustrationHeight1 {
height: 180px;
}
.landingIllustrationStartCenter {
left: 250px;
top: 170px;
}
.landingIllustrationStart {
left: -25px;
}
}
@media (min-width: 1416px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1700px){
.landingIllustrationCenterEnd {
right: -830px;
top: 40px;
}
.landingIllustrationEnd {
right: -1160px;
}
.landingIllustrationStart {
left: -25px;
}
}
@media (min-width: 1416px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 1829px){
.landingIllustration5 {
right: -1151px;
}
}
@media (min-width: 1700px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 2200px){
.landingIllustrationCenterEnd {
right: -1000px;
top: 80px;
}
.landingIllustrationEnd {
right: -1400px;
}
}
@media (min-width: 1900px) and (min-height: 1300px) and (max-height: 1500px) and (max-width: 2000px){
.landingIllustration2 {
right: -1050px;
}
.landingIllustrationStart {
left: -25px;
}
}
@media (min-width: 1850px) and (min-height: 1295px) and (max-height: 1834px){
.landingIllustration2 {
right: -1050px;
}
}
@media (min-width: 1900px){
.landingIllustration4 {
left: 700px;
}
}
@media (max-width: 1350px){
.landingIllustrationCenter{
display: none;
}
}
@media (min-width: 1300px) and (min-height: 1300px) and (max-height: 1500px) and (max-width: 1500px){
.landingIllustration3 {
left: -30px;
}
}
@media (min-width: 1500px) and (min-height: 1300px) and (max-height: 1500px) and (max-width: 1800px){
.landingIllustration3 {
left: -80px;
}
}
@media (min-width: 2075px) and (min-height: 1200px) and (max-height: 1700px) and (max-width: 2500px){
.landingIllustrationEnd {
right: -1450px;
}
}
@media (min-width: 2500px) and (min-height: 1200px) and (max-height: 1700px){
.landingIllustrationEnd {
right: -1600px;
}
}
@media (min-width: 2201px) and (min-height: 1200px) and (max-height: 1700px){
.landingIllustrationCenterEnd {
right: -1120px;
}
}
@media (min-width: 1800px) and (min-height: 1700px) and (max-height: 1834px) and (max-width: 2000px){
.landingIllustration1 {
height: 280px;
right: -830px;
top: -10px;
}
.landingIllustration2 {
height: 192px;
top: 220px;
right: -1000px;
}
.landingIllustration3 {
height: 157px;
left: -60px;
top: 300px;
}
.landingIllustration4 {
height: 200px;
}
.landingIllustration5 {
height: 200px;
right: -1151px;
top: -100px;
}
.landingIllustrationStartCenter {
height: 200px;
left: 290px;
top: 280px;
}
.landingIllustrationCenterEnd {
height: 200px;
right: -950px;
top: 90px;
}
.landingIllustrationStart {
height: 200px;
left: -200px;
top: 200px;
}
.landingIllustrationCenter {
height: 180px;
top: 10px;
}
.landingIllustrationEnd {
height: 200px;
right: -1315px;
top: 0px;
}
.landingIllustrationHeight1 {
height: 250px;
}
}
@media (min-width: 1100px) and (min-height: 1700px){
.landingIllustration1 {
right: -800px;
}
.landingIllustration5 {
right: -950px;
}
.landingIllustrationCenterEnd {
right: -700px;
top: 30px;
}
}
@media (min-width: 1280px) and (min-height: 1700px){
.landingIllustration5 {
right: -1050px;
}
.landingIllustrationCenterEnd {
right: -770px;
top: 30px;
}
}
@media (min-width: 1400px) and (min-height: 1700px){
.landingIllustration5 {
right: -1150px;
}
.landingIllustrationCenterEnd {
right: -800px;
top: 30px;
}
}
@media (min-width: 1500px) and (min-height: 1700px){
.landingIllustrationCenterEnd {
right: -870px;
top: 30px;
}
}
@media (min-width: 1900px) and (min-height: 1700px){
.landingIllustration2 {
right: -1060px;
}
.landingIllustration5 {
right: -1200px;
}
}
@media (min-width: 1288px) and (min-height: 1500px) and (max-width: 1560px){
.landingIllustration1 {
right: -830px;
}
}
@media (min-width: 2000px) and (min-height: 1700px){
.landingIllustration0 {
height: 170px;
left: -400px;
}
.landingIllustration1 {
height: 280px;
right: -830px;
top: -30px;
}
.landingIllustration2 {
height: 192px;
top: 220px;
right: -1050px;
}
.landingIllustration3 {
height: 157px;
left: -160px;
top: 300px;
}
.landingIllustration4 {
height: 200px;
left: 650px;
}
.landingIllustration5 {
height: 200px;
right: -1351px;
top: -100px;
}
.landingIllustrationStartCenter {
height: 200px;
left: 290px;
top: 180px;
}
.landingIllustrationCenterEnd {
height: 200px;
right: -1200px;
top: 0px;
}
.landingIllustrationStart {
height: 200px;
left: -350px;
top: 200px;
}
.landingIllustrationCenter {
height: 200px;
top: 10px;
}
.landingIllustrationEnd {
height: 200px;
right: -1350px;
/* changed */
/* top: 0px; */
top: -200px;
}
.landingIllustrationHeight1 {
height: 300px;
}
}
@media (min-width: 2300px) and (min-height: 1500px) and (max-height: 1834px) and (max-width: 2700px){
.landingIllustrationEnd {
right: -1630px;
top: -200px;
}
}
@media (min-width: 1088px) and (max-height: 930px){
.new-card-category {
right: 15%;
}
}
/* Splash screen layout remains same */
#splash-screen {
position: fixed;
width: 100%;
height: 100%;
background-color: white;
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
flex-direction: column;
overflow: hidden;
gap: 135px;
animation: background-to-red 0.1s linear forwards ;
animation-delay: 2.2s;
}
.orange-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #E57511;
border-radius: 50%;
width: 0;
height: 0;
opacity: 0;
/* animation: fade-in-grow 2s ease-out forwards; */
animation: grow-fade-in 4.4s ease-out forwards,
grow-fade-out 4.4s ease-out forwards;;
/* animation: ripple 3.8s ease-out infinite; */
animation-delay: 2s;
z-index: 10;
}
.after-splash {
opacity: 0;
animation: fadeInContainer 0.8s ease-in forwards;
animation-delay: 2.7s;
}
@keyframes fadeInContainer {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInContent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.logo-image{
/*position: absolute; */
/* margin-top: 294px; */
/* margin-left: 20px; */
animation: hide-tree 0.8s forwards;
animation-delay: 2s;
display: flex;
justify-content: center;
}
.leaves {
/* width: 181%; */
/* position: absolute; */
max-width: none;
margin-bottom: -179px;
/* left: 0px; */
/* top: -99px; */
opacity: 0;
/* transform: translateY(20px); */
/* animation: fade-in-leaves 1s ease-out forwards, fade-out-leaves 1s ease-out forwards; */
animation: fade-in-leaves 0.9s ease forwards;
animation-delay: 1.1s;
z-index: 5;
}
.zero-opacity1{
opacity: 0;
visibility: hidden;
animation: fadeInContainer 1.6s ease-in forwards;
}
.trunk {
clip-path: inset(100% 0 0 0);
animation: reveal-trunk 0.6s ease-out forwards;
width: 100%;
/* position: absolute; */
/* left: 0; */
/* top: 0; */
z-index: 4;
animation-delay: 0.1s;
}
.splash-screen-container{
/* position: absolute; */
/* top: 41vh; */
display: flex;
flex-direction: column;
justify-content: center;
gap: 50px;
}
.trees {
position: relative;
/* width: 200px; */
animation: hide-tree 0.8s forwards;
animation-delay: 2s;
/* margin-top: 255px; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@keyframes background-to-red {
to {
background-color: #FFF8F2;
}
}
@keyframes hide-tree {
to {
/* display: none;
visibility: hidden; */
opacity: 0;
}
}
@keyframes reveal-trunk {
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes fade-in-leaves {
to {
opacity: 1;
/* transform: translateY(0); */
}
}
@keyframes fade-out-leaves {
to {
opacity: 0;
/* transform: translateY(0); */
}
}
@keyframes grow-fade-in {
0% {
width: 0;
height: 0;
opacity: 0;
}
100% {
width: 10000px;
height: 10000px;
opacity: 1;
}
}
@keyframes grow-fade-out {
0% {
width: 0;
height: 0;
opacity: 1;
}
/* 20%{
opacity: 0;
} */
30%{
opacity: 0;
}
60%{
opacity: 0;
}
100% {
width: 10000px;
height: 10000px;
opacity: 0;
}
}
@keyframes fade-in-grow {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
width: 10000px;
height: 10000px;
opacity: 1;
}
}
@keyframes fadeInScale {
to {
opacity: 1;
/* transform: scale(1); */
}
}