/* --------------------------------------------------------------------------------------------------- 　.block_home_mv_noSlider --------------------------------------------------------------------------------------------------- */ .block_home_mv_noSlider { margin: 70px 0 0; padding: 30px 2.5% 60px; position: relative; z-index: 2; color: #c8c6c3; background: #1F1F1D;} @media only screen and (max-width: 960px) { .block_home_mv_noSlider { margin: 60px 0 0; padding: 25px 2.5% 60px; } } @media only screen and (max-width: 738px) { .block_home_mv_noSlider {margin: 60px 0 0; padding: 2.5vw 2.5% 35px; } } @media only screen and (max-width: 560px) { .block_home_mv_noSlider { margin: 50px 0 0; } } /* .mv_area */ .block_home_mv_noSlider .mv_area { } .block_home_mv_noSlider .mv_area a{ display: block;} .block_home_mv_noSlider .mv_item {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; z-index: 0;} /* .img_area */ .block_home_mv_noSlider .img_area { width: 67.5%; position: relative; z-index: 0; overflow: hidden; order: 1;} .block_home_mv_noSlider .img_area:after {background: transparent;transform: scale(1);} .block_home_mv_noSlider .img_area img {height: auto;border-radius:3px;width: 100%;} /* .txt_area */ .block_home_mv_noSlider .txt_area { margin: 20px 0 0; color: #fafafa; position: relative; z-index: 0; order: 3; } .block_home_mv_noSlider .txt_area .t_copy {font-size:min(1.85vw, 24px); font-family: 'Noto Sans JP', sans-serif; font-weight: 450; line-height: 1.75; letter-spacing: .075em;font-feature-settings: "palt";} .block_home_mv_noSlider .txt_area .t_copy .t_en {letter-spacing: 0;} /* .info_area */ .block_home_mv_noSlider .info_area { width: 29%; order: 2;} .block_home_mv_noSlider .t_date {margin: 10px 0 0;font-size: 14px; font-weight: 400; line-height: 1.75; letter-spacing: .025em;} .block_home_mv_noSlider .t_ttl { margin: 15px 0 0; font-size: 14px; font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: .025em;} /* .link_area */ .block_home_mv_noSlider .link_area {position: absolute; bottom: 5px;right: 1%;z-index: 0; margin: 0; line-height: 0; } .block_home_mv_noSlider .btn_dummy { display:flex; align-items: center; color: #c8c6c3; border: none; /*border-bottom:#c8c6c3 1px solid;*/font-size: 14px; font-weight: 450; line-height: 20px; letter-spacing: 0.015em; } .block_home_mv_noSlider .btn_dummy:after {margin-left: 10px; display: inline-block;width: 30px; height: 30px; background: #ccc; color: #111; font-size: .9em; font-family:themify;content:"\e649"; font-weight:normal; line-height: 30px; text-align: center; -webkit-border-radius: 100%; border-radius: 100%;} @media only screen and (min-width: 961px) { .block_home_mv_noSlider .img_area a:hover, .block_home_mv_noSlider .btn_dummy:hover{opacity: .7 } } @media only screen and (max-width: 960px) { .block_home_mv_noSlider .img_area { width: 100%; order: 1;} .block_home_mv_noSlider .txt_area { margin: 20px 0 0; order: 2; } .block_home_mv_noSlider .txt_area .t_copy { font-size: 19px;font-weight: 450; line-height: 1.75; letter-spacing: .075em;} .block_home_mv_noSlider .info_area { width: 100%; order: 3;} .block_home_mv_noSlider .t_date {margin: 15px 0 0;font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .025em;} .block_home_mv_noSlider .t_ttl { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .025em;} .block_home_mv_noSlider .info_area br {display: none;} .block_home_mv_noSlider .link_area { bottom: 0;right: 0; } .block_home_mv_noSlider .btn_dummy {font-size: 13px;} .block_home_mv_noSlider .btn_dummy:after {margin-left: 10px; width: 26px; height: 26px;font-size: .9em;line-height: 26px;} } @media only screen and (max-width: 738px) { .block_home_mv_noSlider .txt_area { margin: 20px 0 0; padding: 0 2.5%; } .block_home_mv_noSlider .txt_area .t_copy { font-size: 17px;font-weight: 450; line-height: 1.75;} .block_home_mv_noSlider .info_area { padding: 0 2.5%; } .block_home_mv_noSlider .t_date {margin: 15px 0 0;font-size: 13px; font-weight: 400; line-height: 1.5;} .block_home_mv_noSlider .t_ttl { margin: 5px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5;} .block_home_mv_noSlider .txt_area .t_copy br{display: none;} .block_home_mv_noSlider .info_area br {display: none;} .block_home_mv_noSlider .link_area {margin: 15px 0 0; padding-right: 1.5%; position: static; order: 4;margin-left: auto;} .block_home_mv_noSlider .btn_dummy {font-size: 12px;} .block_home_mv_noSlider .btn_dummy:after {margin-left: 10px; width: 22px; height: 22px;font-size: .9em;line-height: 22px;} } /* --------------------------------------------------------------------------------------------------- 　.block_home_about --------------------------------------------------------------------------------------------------- */ .block_home_about{ padding: 90px 7.5% 90px; position: relative; z-index: 0;} @media only screen and (max-width: 960px) { .block_home_about{ padding: 70px 6.5%; } } @media only screen and (max-width: 738px) { .block_home_about{ padding: 60px 5%;} } @media only screen and (max-width: 560px) { .block_home_about{ padding: 45px 5% 55px;} } /* ------- .about_area ------- */ .block_home_about .about_area { margin: 0; position: relative; z-index: 0;} /* .headline */ .block_home_about .headline { position: absolute; top: 0; left: 0;} /* .txt_area */ .block_home_about .about_area .txt_area { margin: 0 0 0 35%; padding-right: 2.5%;} .block_home_about .about_area .txt_area p { letter-spacing: .05em; line-height: 2.2} .block_home_about .about_area .txt_area p+p {margin: 1.25em 0 0;} /* .link_area */ .block_home_about .about_area .link_area { margin: 40px 0 0; text-align: left;} @media only screen and (max-width: 960px) { .block_home_about .about_area { margin: 0; position: relative; z-index: 0;} .block_home_about .headline { position: static; } .block_home_about .about_area .txt_area { float: none; margin: 30px 0 0; width:100%;} .block_home_about .about_area .txt_area p { line-height: 2} } @media only screen and (max-width: 738px) { .block_home_about .about_area .txt_area { float: none; margin: 25px 0 0;} .block_home_about .about_area .txt_area p { line-height: 1.9} } @media only screen and (max-width: 560px) { .block_home_about .about_area .txt_area { margin: 20px 0 0;} .block_home_about .about_area .txt_area p { line-height: 1.85} } /* ------- .nav_area ------- */ .block_home_about .nav_area { margin: 70px 0 0 35%; } /* .list_overview */ .block_home_about .list_overview { list-style: none;} .block_home_about .list_overview li {display: block;margin: -1px 0 0; border-top: #aaa 1px solid;border-bottom: #aaa 1px solid;} .block_home_about .list_overview li a {display: block; padding: 20px 80px 20px 0; position: relative; z-index: 0;} .block_home_about .list_overview li a:before { position:absolute; top:50%; width: 45px; height: 45px; background: #1F1F1D; color: #EDEBE9; right:0; font-size:16px; font-family:themify;content:"\e649"; font-weight:normal; text-align: center; line-height: 45px; z-index:0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); -webkit-border-radius: 100%; border-radius: 100%;} .block_home_about .list_overview li .inner { position: relative; z-index: 0; } .block_home_about .list_overview li .img_area {float: left; width: 150px; width: 25%;} .block_home_about .list_overview li .img_area img {border-radius:3px;} .block_home_about .list_overview li .ttl_area {position: absolute; top: 50%;left: 31.5%; right: 0;-webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0;} .block_home_about .list_overview li .t_date { display: block; font-size: 14px; font-weight: 400; line-height: 1.55;} .block_home_about .list_overview li .t_ttl_event { display: block; margin: 2px 0 0; font-size: 16px;font-weight: 500; line-height: 1.5;} @media only screen and (max-width: 1300px) { /*.block_home_overview_nav .list_overview li .img_area { width: 95px;} .block_home_overview_nav .list_overview li .txt_area { left: 130px;}*/ } @media only screen and (min-width: 961px) { .block_home_about .list_overview li a:hover {opacity: .7} } @media only screen and (max-width: 960px) { .block_home_about .nav_area { float: none; margin: 50px 0 0; width: 100%;} .block_home_about .list_overview li a:before { width: 40px; height: 40px;font-size:14px;line-height: 40px;} .block_home_about .list_overview li .img_area { width: 27.5%;} .block_home_about .list_overview li .ttl_area { left: 33.5%;} .block_home_about .list_overview li .t_date { font-size: 14px; line-height: 1.5;} .block_home_about .list_overview li .t_ttl_event {margin: 5px 0 0; line-height: 1.5;} } @media only screen and (max-width: 738px) { .block_home_about .nav_area {margin: 45px 0 0; } .block_home_about .list_overview li a { padding: 15px 50px 15px 0;} .block_home_about .list_overview li a:before {width: 20px; font-size:18px;background: none; color: #1F1F1D; } } @media only screen and (max-width: 560px) { .block_home_about .list_overview li a { padding: 15px 30px 15px 0;} .block_home_about .list_overview li a:before { font-size:16px;} .block_home_about .list_overview li .img_area { width: 85px;} .block_home_about .list_overview li .ttl_area { left: 105px;} .block_home_about .list_overview li .t_date { font-size: 13px; line-height: 1.45;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; max-width:16em;} .block_home_about .list_overview li .t_ttl_event {font-size: 14px; margin: 1px 0 0; line-height: 1.4;} } @media only screen and (max-width: 320px) { .block_home_about .list_overview li .t_date { font-size: 12px;} .block_home_about .list_overview li .t_ttl_event {font-size: 13px;} } /* .instagram_area */ .block_home_about .instagram_area { position: absolute; bottom: 0; left: 0; width: 22.5%;background: #f8f7f5;border-radius:5px; overflow: hidden;} .block_home_about .instagram_area a { display: block;} .block_home_about .instagram_area .img_area img {-webkit-transition: all 0.3s ease; transition: all 0.3s ease; } /* .ttl_area */ .block_home_about .instagram_area .ttl_area {padding: 20px 15px 13px; font-size: 0; line-height: 0; text-align: center;} .block_home_about .instagram_area .t_ttl_sns { padding: 0 0 0 17px; display: inline-block;font-size:15px; font-family: 'Inter';font-weight: 500; line-height: 1; text-align: center;letter-spacing: .05em; position: relative; z-index: 0;} .block_home_about .instagram_area .t_ttl_sns:before { position: absolute; top: 0; left: -5px; bottom: 0; width: 16px; height: 16px; margin: auto 0; content: ""; background: url("../images/beach/Instagram_Glyph_Gradient.png") center left no-repeat; background-size: cover; z-index: -1;} .block_home_about .instagram_area .t_detail { margin: 8px 0 0; font-size: 12px; line-height: 1.7; letter-spacing: .025em; text-align: left;} /* .account_area */ .block_home_about .instagram_area .account_area { padding: 10px 12px; position: relative; z-index: 0;} .block_home_about .instagram_area .account_area .icon { float: left; width: 30px; height: 30px; border-radius:100%; overflow: hidden;} .block_home_about .instagram_area .account_area .name { position: absolute; top: 50%; left: 50px; font-size: 13px; font-family: 'Inter';font-weight: 400;letter-spacing: .025em;z-index: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);} .block_home_about .instagram_area .account_area .name:after { position: absolute; top: 2px; right: -15px; bottom: 0; width: 10px; content: ""; background: url("../images/beach/arrow_right_blue.png") center right no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .block_home_about .instagram_area .account_area_sp { display: none;} @media only screen and (min-width: 961px) { .block_home_about .instagram_area a:hover .img_area img {opacity: .7 } .block_home_about .instagram_area a:hover .account_area .name:after { right: -18px; } } @media only screen and (max-width: 960px) { .block_home_about .instagram_area { margin: 50px 0 0; position: static; width: 100%;overflow: hidden;} .block_home_about .instagram_area a { display: block; padding: 35px 5.5% 35px 4.5%; overflow: hidden; position: relative; z-index: 1;} .block_home_about .instagram_area .img_area { float: left; width: 25%;} .block_home_about .instagram_area .img_area img {border-radius:3px; } .block_home_about .instagram_area .ttl_area {position: absolute; top: 50%; right: 3.5%; width: 62.5%; padding: 0; text-align: left;-webkit-transform: translate(0, -50%); transform: translate(0, -50%);} .block_home_about .instagram_area .t_ttl_sns { padding: 0 0 0 30px; display: block;font-size:20px; text-align: left;font-feature-settings: "palt" 1;letter-spacing: 0.025em;} .block_home_about .instagram_area .t_ttl_sns:before { left: 0; width: 20px; height: 20px;} .block_home_about .instagram_area .t_detail { margin: 15px 0 0; font-size: 14px; line-height: 1.7; letter-spacing: .05em; text-align: left;} .block_home_about .instagram_area .account_area { display: none;} .block_home_about .instagram_area .account_area_sp { display: block; margin: 12px 0 0; padding: 0; } .block_home_about .instagram_area .account_area .icon { width: 30px; height: 30px; } .block_home_about .instagram_area .account_area .name { position: absolute; top: 50%; left: 40px;} .block_home_about .instagram_area .account_area .name:after { top: 1px; right: -20px; bottom: 0; width: 14px; height: 14px; margin: auto 0;} } @media only screen and (max-width: 738px) { .block_home_about .instagram_area { margin: 45px 0 0;} .block_home_about .instagram_area a { padding: 25px 5% 25px 4.5%; } .block_home_about .instagram_area .img_area { float: left; width: 26.5%;} .block_home_about .instagram_area .ttl_area {position: absolute; top: 50%; right: 3.5%; width: 62.5%; padding: 0; text-align: left;-webkit-transform: translate(0, -50%); transform: translate(0, -50%);} .block_home_about .instagram_area .t_ttl_sns { padding: 0 0 0 25px;display: block;font-size:18px;} .block_home_about .instagram_area .t_ttl_sns:before { width: 18px; height: 18px;} .block_home_about .instagram_area .t_detail { margin: 10px 0 0; font-size: 14px; line-height: 1.7;} .block_home_about .instagram_area .account_area_sp { margin: 10px 0 0;} .block_home_about .instagram_area .account_area .icon { width: 26px; height: 26px; } .block_home_about .instagram_area .account_area .name { left: 35px;} } @media only screen and (max-width: 560px) { .block_home_about .instagram_area { margin: 45px 0 0;} .block_home_about .instagram_area a { padding: 20px 5% 20px 5%; font-size: 0; } .block_home_about .instagram_area .img_area { float: none; display: inline-block;width: 30%; vertical-align: middle;} .block_home_about .instagram_area .ttl_area {position: static; display: inline-block;width: 65%; padding: 0; margin: 0 5% 0 0; -webkit-transform: translate(0,0); transform: translate(0, 0); vertical-align: middle} .block_home_about .instagram_area .t_ttl_sns { padding: 0 0 0 25px;font-size:15px;} .block_home_about .instagram_area .t_ttl_sns:before { width: 17px; height: 17px;} .block_home_about .instagram_area .t_detail { margin: 10px 0 0; font-size: 13px; line-height: 1.55;} .block_home_about .instagram_area .account_area_sp { margin: 8px 0 0;} .block_home_about .instagram_area .account_area .icon { width: 26px; height: 26px; } .block_home_about .instagram_area .account_area .name { left: 32px;} } @media only screen and (max-width: 414px) { .block_home_about .instagram_area a { padding: 20px 5% 15px 5%; } .block_home_about .instagram_area .img_area { vertical-align: top;} .block_home_about .instagram_area .ttl_area {vertical-align: top} .block_home_about .instagram_area .t_detail { line-height: 1.5; letter-spacing: .015em} } /* --------------------------------------------------------------------------------------------------- 　.block_archive --------------------------------------------------------------------------------------------------- */ .block_archive{ padding: 90px 7.5%; background: #1f1f1d; color: #edebe9;position: relative; z-index: 0;} .block_archive:before { position: absolute; top: 0; left:0%; right: 0%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} @media only screen and (max-width: 960px) { .block_archive{ padding: 70px 6.5%; } .block_archive:before { left:2.5%; right: 2.5%; } } @media only screen and (max-width: 738px) { .block_archive{ padding: 60px 5%;} } @media only screen and (max-width: 560px) { .block_archive{ padding: 50px 5%;} } /* .headline */ .block_archive .headline { position: absolute; top: 0; left: 0;} /* ------- .access_area ------- */ .block_archive .archive_area { margin: 0 -5% 0 22.5%; padding: 5px 0 0; font-size: 0; position: relative; z-index: 0;} .block_archive .archive_area .archive_item { display: inline-block; width: 28.333%; width: 45%; margin: 35px 5% 0 0; position: relative;z-index: 0;} .block_archive .archive_area .archive_item:first-child, .block_archive .archive_area .archive_item:nth-child(2) {margin-top: 0;} .block_archive .archive_area .archive_item .img_area {float:left; width: 43.5%; } .block_archive .archive_area .archive_item img { border-radius:3px;} .block_archive .archive_area .archive_item .txt_area {position: absolute; top: 50%; right: 0; width: 47.5%;-webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0;} .block_archive .archive_area .archive_item .txt_area .t_ttl_acid{ font-size: 20px;font-family: 'Inter';font-weight: 400; line-height: 1.6; letter-spacing: .01em;} .block_archive .archive_area .archive_item .txt_area .t_ttl_beach {line-height: 1.4;} .block_archive .archive_area .archive_item .txt_area p {font-size: 14px;line-height: 1.6; font-weight: 300;letter-spacing: .025em;} .block_archive .archive_area .archive_item .txt_area .t_date {margin: 3px 0 0;} .block_archive .archive_area .archive_item .txt_area .t_venue { font-size: 15px;font-family: 'Inter';font-weight: 400;} .block_archive .archive_area .archive_item .txt_area .t_artist { margin: 3px 0 0; line-height: 1.5;} .block_archive .archive_area .archive_item .txt_area .t_artist b {font-size: 15px; font-weight: 400;} @media only screen and (min-width: 961px) { .block_archive .archive_area .archive_item a:hover{ opacity: .7 } } @media only screen and (max-width: 960px) { .block_archive .headline { position: static;} .block_archive .archive_area { margin: 45px -2.5% 0; padding: 0; } .block_archive .archive_area .archive_item { width: 45%; margin: 45px 2.5% 0; } .block_archive .archive_area .archive_item:first-child, .block_archive .archive_area .archive_item:nth-child(2) {margin-top: 0;} .block_archive .archive_area .archive_item .txt_area .t_ttl_acid{ font-size: 18px;} .block_archive .archive_area .archive_item .txt_area p {font-size: 13px;line-height: 1.6;} .block_archive .archive_area .archive_item .txt_area .t_venue { font-size: 14px;} .block_archive .archive_area .archive_item .txt_area .t_artist b {font-size: 14px;} } @media only screen and (max-width: 738px) { .block_archive .archive_area { margin: 0;} .block_archive .archive_area .archive_item, .block_archive .archive_area .archive_item:first-child, .block_archive .archive_area .archive_item:nth-child(2) { display: block; width: 100%; margin: 35px 0 0; } .block_archive .archive_area .archive_item .img_area {width: 42.5%; } .block_archive .archive_area .archive_item .txt_area {width: 47.5%;} }