/* 繝輔Ο繝ｳ繝医�繝ｼ繧ｸ逕ｨ */
/*繧ｳ繝ｳ繝�Φ繝�ｧｻ蜍輔�繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ逕ｨ笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏*/
#front-page .wrapper{
overflow: hidden;
}
.anim{
--transform:50px;
opacity: 0;
transition: opacity 1s,transform 1s;
}
.anim_bottom{
--transform:40px;
transform: translateY(var(--transform));
}
.anim_left{
transform: translateX(calc(var(--transform) * -1));
}
.anim_right{
transform: translateX(var(--transform));
}
.anim.active{
transform: translate(0);
opacity: 1;
}
/*笏笏笏笏笏蛟九��笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏*/
#front-page .concept,
#front-page .our_office,
#front-page .bank_account,
#front-page .wrapper .carmake {
--front-margin: 150px;
margin-top: var(--front-margin);
margin-bottom: var(--front-margin);
}
/*荳逡ｪ荳翫�繝槭�繧ｸ繝ｳ*/
#front-page .contents>*:nth-child(1){
margin-top: 0;
padding-top: calc(var(--front-margin) * 1.3);
}
.our_office .title,
#front-page .carmake {
padding-left: var(--page_margin);
padding-right: var(--page_margin);
}
@media screen and (max-width:680px){
#front-page .contents>*:nth-child(1){
padding-top: var(--page_margin);
}
#front-page .concept, #front-page .our_office, #front-page .bank_account, #front-page .wrapper .carmake{
--front-margin: 40px;
}
}
/*繧ｹ繝ｩ繧､繝峨す繝ｧ繝ｼ逕ｨ笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏*/
.top_img {
position: relative;
/*border-bottom: 1px solid #f1f1f1;
box-sizing: content-box;*/
}
@keyframes topimg_zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.08);
}
}
.top_img .slide-active img {
animation: topimg_zoom 10s 0s linear;
}
.top_slideShow .slick-list,
.top_slideShow .slick-track {
height: 100%;
}
.top_movie,
.top_slideShow,
.top_text,
.top_img {
width: 100%;
height: 100vh;
}
.top_movie,
.top_slideShow,
.top_text,
.top_loading{
position: fixed !important;
}
.top_movie,
.top_slideShow {
z-index: 10;
overflow: hidden;
}
.top_movie video,
.top_slideShow img {
pointer-events: none;
height: 100%;
object-fit: cover;
}
.top_movie video {
object-position: 65%;
}
/*繧阪�縺｢繧薙＄笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏*/
@keyframes top_loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(365deg);
}
}
.top_loading {
--t_l_size: 80px;
background-image: url("../images/top_loading.svg");
width: var(--t_l_size);
height: var(--t_l_size);
position: absolute;
top: calc(50% - var(--t_l_size) / 2);
left: calc(50% - var(--t_l_size) / 2);
z-index: 11;
animation: top_loading 2s linear infinite;
}
.top_loading.hide {
opacity: 0;
pointer-events: none;
transition: opacity .5s;
}
@media screen and (max-width:960px) {
.top_loading {
--t_l_size: 55px;
}
}
.top_text {
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 11;
}
.top_text_1 {
margin-left: 14%;
margin-top: -20px;
gap: 50px;
max-width: 60em;
font-weight: bold;
}
.top_text_jp {
font-size: 42px;
max-width: 690px;
}
.top_text_en {
font-size: 120px;
}
@media screen and (max-height:835px) and (min-width:950px){
.top_text_1{
margin-top: 70px;
max-width: 50em;
gap:20px;
}
.top_text_jp {
font-size: 35px;
}
.top_text_en {
font-size: 100px;
}
}
@media screen and (max-height:560px) and (min-width:950px){
.top_text_1{
margin-top: 40px;
}
.top_text_jp {
font-size: 30px;
}
.top_text_en {
font-size: 80px;
}
}
@media screen and (max-width:960px) {
.top_text_1 {
gap: 20px;
margin-left: var(--page_margin);
margin-right: var(--page_margin);
max-width: none;
}
.top_text_jp {
font-size: 30px;
max-width: unset;
}
.top_text_en {
font-size: 80px;
}
}
@media screen and (max-width:680px) {
.top_text_jp {
font-size: var(--text_default);
}
.top_text_en {
font-size: 50px;
}
}
/* Concept笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏 */
.concept{
display: flex;
}
.concept1{
display: flex;
width: 53%;
}
/* business縺九ｉ繧ｳ繝斐� */
.concept_lineart{
flex: 1;
position: relative;
}
.concept_lineart2{
height: 180%;
width: 1400px;
top: 50%;
position: absolute;
transform: translateY(-50%);
right: 0;
}
.concept_lineart2 img{
height: 100%;
}
.concept_text{
width: 70%;
min-width: 670px;
padding: var(--page_margin) 75px;
}
.concept_h{
margin: 70px 0;
}
.concept_p{
font-size: 18px;
}
.concept_img{
flex: 1;
z-index: 1;
}
.concept_img img{
height: 100%;
object-fit: cover;
}
@media screen and (max-width:1450px){
.concept{
flex-direction: column;
}
.concept1{
width: unset;
margin-bottom: var(--page_margin2x);
}
.concept_text{
min-width: unset;
width: 82%;
padding-right: var(--page_margin) ;
padding-left: var(--page_margin2x);
}
.concept_img img{
max-height: 500px;
}
}
@media screen and (max-width:960px) {
}
@media screen and (max-width: 680px){
.concept_h{
margin: 25px 0;
}
.concept_p{
font-size: var(--text_respon);
}
.concept_lineart2{
width: 600px;
}
.concept1{
margin-bottom: var(--page_margin);
}
}
@media screen and (max-width: 300px){
.concept_lineart{
display: none;
}
.concept_text{
width: unset;
padding: var(--page_margin);
}
}
/* our office笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏 */
.our_office .title,
#front-page .carmake {
max-width: var(--pagetop_line);
margin: auto;
}
.our_office .title {
margin-bottom: var(--page_margin);
flex-wrap: wrap;
gap: 0.5em 0;
}
.oo_button {
white-space: nowrap;
border: 1px solid black;
padding: var(--page_margin) var(--page_margin3x);
margin-left: 150px;
margin-right: 75px;
position: relative;
overflow: visible;
}
.oo_button::after {
--oob: 30px;
content: "";
position: absolute;
width: calc(var(--oob) * 1.3);
height: var(--oob);
background-image: url(../images/button_bar.svg);
background-repeat: no-repeat;
right: calc(var(--oob) / 2 * -1);
background-position: center;
top: calc(50% - var(--oob) / 2 - 6%);
transition: transform .25s;
}
.oo_button:active::after,
.oo_button:hover::after {
transform: translateX(20%);
}
/*oo_slideshow3譖ｸ縺咲峩縺�*/
.oo_slideshow_bg{
--osb_width:1930px;
--osb_height:calc(var(--osb_width) / 4.825);
height: var(--osb_height);
background-position: center left;
background-size: var(--osb_width) var(--osb_height);
animation: ooAnimBG 43s linear infinite;
}
@keyframes ooAnimBG {
0% {
background-position: 0px 0px;
}
100% {
background-position: calc(var(--osb_width) * -1) 0px;
}
}
@media screen and (max-width:960px) {
.oo_button_span{
display: flex;
flex: 1;
justify-content: flex-end;
}
.our_office .pt_jp{
flex: 8em;
}
.oo_button {
margin-left: var(--page_margin2x);
margin-right: var(--page_margin);
}
#front-page .carmake{
padding-left: var(--page_margin3x);
padding-right: var(--page_margin3x);
}
.oo_slideshow_bg{
--osb_width:1254.5px;
}
}
@media screen and (max-width:680px) {
.oo_button {
font-size: var(--text_respon);
padding: 8px 20px;
margin-left: var(--page_margin);
}
.oo_button::after {
--oob: 23px;
}
}
@media screen and (max-width:300px) {
.our_office .pt_jp{
flex: unset;
}
.our_office .title{
gap:0;
}
.oo_button {
margin-left: 0;
margin-top: var(--page_margin);
}
}
/* bank account笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏笏 */
.bank_account {
background: linear-gradient(90deg, #EEE 0%, #EEE 50%, transparent 50%, transparent 100%);
}
.bank_account2 {
display: flex;
gap: var(--page_margin);
max-width: var(--single_max);
margin: auto;
background: #EEE;
padding: var(--page_margin2x);
justify-content: space-between;
}
.bank_account .title{
margin-top: 40px;
margin-bottom: 40px;
}
.bank_account_text {
font-size: 18px;
}
.bank_account_table {
font-size: 22px;
padding: var(--page_margin);
background: white;
text-align: left;
max-width: 530px;
}
.bank_account_table th {
white-space: nowrap;
}
.bank_account_table th,
.bank_account_table td {
padding: var(--page_margin);
vertical-align: middle;
}
@media screen and (max-width:960px) {
.bank_account2 {
flex-direction: column;
}
.bank_account_table {
max-width: unset;
}
}
@media screen and (max-width:680px) {
.bank_account .title{
margin-top: 20px;
margin-bottom: 20px;
}
.bank_account_text,
.bank_account_table {
font-size: var(--text_respon);
}
.bank_account_table th,
.bank_account_table td {
padding: calc(var(--page_margin) / 3);
}
.bank_account2 {
padding: var(--page_margin);
}
}
@media screen and (max-width:300px) {
.bank_account_table tr {
display: grid;
}
.bank_account_table td {
padding-left: var(--page_margin2x);
}
}