@charset "utf-8";
/* 浜田の夜神楽公演 top css */

/*-------------------------------------------------
loading
-------------------------------------------------*/

/*TOPページ用loader*/
.loader_top {
position: fixed;
z-index: 7;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: black;
}
.is-loaded .loader_top {
animation-name: loader_fadeOut;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
.is-loaded .loader_logo {
animation: loader_fadeIn 1.5s cubic-bezier(0.42, 0, 1, 1) forwards 0.5s,
reset_zindex 0s cubic-bezier(0.42, 0, 1, 1) forwards 4.5s;
}

@keyframes loader_fadeIn {
from {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
to {
opacity: 1;
filter: none;
visibility: visible;
} 
}

@keyframes loader_fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}

@keyframes reset_zindex {
from { 
}
to {
z-index: 1;
} 
}


/*-------------------------------------------------
PV
-------------------------------------------------*/

.header_top {
transition: 1.3s;
position: relative;
height: 100vh; 
}

@media all and (max-width : 767px ){
.header_top {
height: 100dvh; 
}
}

.pv_digest {
position: fixed;
z-index: -1;
top: 0;
left: -1000%;
right: -1000%;
bottom: 0;
margin: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transition: 1.3s;
}
.video_box {
position: relative;
}
/*.video_box::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/common/bg_grid_40.png");
background-repeat: repeat;
background-position: left top;
z-index: 1;
}*/


/*-------------------------------------------------
pv タイトルロゴ
-------------------------------------------------*/

.header_title {
position: absolute;
top: 45%;
left: 50%;
z-index: 7;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0; 
}
.header_title {
width: 570px;
height: auto;
} 

@media all and (max-width : 820px ){
.header_title {
width: 430px;
height: auto;
}
}

@media screen and (max-width: 767px) {
.header_title {
width: 280px;
top: 40%;
}
}

.header_title_svg {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
height: 100%;
}



/*------------------------------------------------- 
scroll bar
------------------------------------------------- */

.scroll_bar a {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 4;
padding: 10px 10px 110px;
color: #ddd;
}
.scroll_bar a::after {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
width: 1px;
height: 200px;
background: #ddd;
}
.scroll_bar a::before {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
width: 1px;
height: 200px;
background-color: rgba(131, 131, 127, 0.4);
}
.scroll_bar a::after {
animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}

@media all and (max-width : 767px ){
.scroll_bar a::after {
bottom: -30px;
height: 60px;
}
.scroll_bar a::before {
bottom: -30px;
height: 60px;
}
}


/*-------------------------------------------------
グローバルナビ TOP 設定
-------------------------------------------------*/

.is-loaded #header {
opacity: 0;
animation-name: navi_fadein;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.openbtn {
opacity: 0;
}
.is-loaded .openbtn {
opacity: 0;
animation-name: navi_fadein;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}

@keyframes navi_fadein {
0% {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
100% {
opacity: 1;
filter: none;
visibility: visible;
} 
}

@media all and (max-width : 767px ){
.is-loaded .sp_cart {
opacity: 0;
animation-name: navi_fadein;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
}


/*-------------------------------------------------
sec_concept
-------------------------------------------------*/

.header_bottom {
transition: 1.3s;
position: relative;
z-index: 4;
padding-bottom: 130px;
}
.txt_box_inner {
width: 100%;
color: #fff;
display: flex;
flex-direction: row-reverse;
justify-content: center;
margin: auto;
box-sizing: border-box;
}

@media all and (max-width : 767px ){
.header_bottom {
padding-bottom: 80px;
}
.txt_box_inner {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
}
}

.concept_copy_wrap {
display: flex;
flex-direction: row-reverse;
}
.concept_intro {
font-family: "EB Garamond", serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 100%;
letter-spacing: 0.05em;
writing-mode: vertical-rl;
padding-top: 4px;
padding-left: 10px;
color: #B29132;
}
.concept_copy {
writing-mode: vertical-rl;
font-size: 3.0rem;
letter-spacing: 0.5em;
font-weight: 400;
}
.concept_txt {
writing-mode: vertical-rl;
font-size: 1.6rem;
font-weight: 400;
line-height: 240%;
letter-spacing: 0.2em;
padding-top: 20px;
margin-right: 9%;
text-shadow: 1px 2px 1px rgba(0,0,0,0.4);
}

@media all and (max-width : 1260px ){
.concept_intro {
font-size: 1.3rem;
}
.concept_copy {
font-size: 2.6rem;
letter-spacing: 0.4em;
padding-left: 0px;
}
}

@media all and (max-width : 900px ){
.concept_txt {
line-height: 200%;
margin-right: 7%;
}
}

@media all and (max-width : 768px ){
.concept_txt {
padding-top: 80px;
margin-right: 6%;
}
}

@media all and (max-width : 767px ){
.concept_copy_wrap {
display: flex;
flex-direction: column;
}
.concept_intro {
font-size: 1.2rem;
letter-spacing: 0.08em;
writing-mode: horizontal-tb;
padding-top: 0px;
padding-left: 0px;
margin-bottom: 5px;
}
.concept_copy {
writing-mode: horizontal-tb;
font-size: 2.0rem;
font-weight: 400;
letter-spacing: 0.4em;
margin-bottom: 20px;
}
.concept_txt {
writing-mode: horizontal-tb;
font-size: 1.4rem;
font-weight: 400;
height: auto;
line-height: 180%;
letter-spacing: 0.05em;
padding-top: 0px;
margin-right: 0;
}
}


/*-------------------------------------------------
モジュール
-------------------------------------------------*/

#page_home main {
background-image: url("../img/top/bg_gry01.jpg");
background-repeat: repeat;
background-position: left top;
position: relative;
z-index: 4;
color: #222;
}
#page_home .content {
padding: 80px 0 0px;
}
.sec_titlebox {
display:flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
}
.sec_title_jp {
font-size: 3.0rem;
font-weight: 500;
letter-spacing: 0.3em;
margin-bottom: 10px;
}
.sec_title_en {
font-family: "EB Garamond", serif;
font-weight: 500;
font-size: 1.4rem;
letter-spacing: 0.2em;
color: #8E7742;
}

@media all and (max-width : 1024px ){
.sec_title_jp {
font-size: 2.4rem;
}
.sec_title_en {
font-size: 1.2rem;
}
}

@media all and (max-width : 820px ){
.sec_title_jp {
font-size: 2.2rem;
}
}

@media all and (max-width : 767px ){
#page_home .content {
padding: 40px 0 0px;
}
.sec_titlebox {
margin-bottom: 30px;
}
.sec_title_jp {
font-size: 1.8rem;
margin-bottom: 6px;
letter-spacing: 0.2em;
}
.sec_title_en {
font-size: 1.0rem;
}
}


/*-------------------------------------------------
夜神楽公演概要
-------------------------------------------------*/

.sec_outline {
padding-bottom: 100px;
}
.outline_box {
width: 100%;
display: flex;
align-items: center;
padding: 30px;
border-bottom: solid 1px #D2D2D2;
font-size: 1.5rem;
}
.outline_box:first-of-type {
border-top: solid 1px #d2d2d2;
}
.outline_box dt {
width: 20%;
letter-spacing: 0.2em;
}
.outline_box dd {
width: 80%;
line-height: 180%;
}

@media all and (max-width : 1024px ){
.outline_box dt {
width: 25%;
}
.outline_box dd {
width: 75%;
}
}

.outline_box dd span {
color: #C40A19;
}
.outline_box dd a {
text-decoration: underline;
color: #8E7742;
}
.outline_box dd a:hover {
text-decoration: none;
}
.outline_box dd p {
display: block;
}
.outline_box dd ul li {
padding-left: 20px;
background-image: url("../img/common/icon_nakaguro.svg");
background-repeat: no-repeat;
background-position: left 4px;
}
.outline_box dd .purpose {
padding-left: 25px;
padding-bottom: 10px;
}
.outline_box dd .purpose li { 
padding: 3px 30px 3px 5px;
display:list-item;
list-style-type: decimal;
}

@media all and (max-width : 767px ){
.sec_outline {
padding-bottom: 50px;
}
.outline_box {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 10px;
font-size: 1.3rem;
}
.outline_box dt {
width: 100%;
font-size: 1.4rem;
font-weight: 500;
margin-bottom: 10px;
}
.outline_box dd {
width: 100%;
}
}


/*-------------------------------------------------
公演スケジュール
-------------------------------------------------*/

.sec_schedule {
width: 100%;
background-image: url("../img/top/bg_gry02.jpg");
background-repeat: repeat;
background-position: left top;
padding: 80px 0 100px
}

@media all and (max-width : 767px ){
.sec_schedule {
padding: 40px 0 50px
}
}

/* アコーディオンメニュー
-------------------------------------------------- */

.accordion {
margin-bottom: 0px;
}
.accordion_container {
width: 100%;
border-bottom: solid 1px #DBDBDB;
}
.accordion_title {
font-size: 2.0rem;
font-weight: 600;
letter-spacing: 0.2em;
color: #222;
padding: 25px 10% 25px 10px;
position: relative;
z-index: +1;
cursor: pointer;
transition-duration: 0.5s;
}
.accordion_title:hover {
color: #B29458;
transition-duration: 0.5s;
}
.icon_wrap {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 3%;
width: 40px;
height: 40px;
margin-top: -20px;
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
}
.icon {
display: block;
width: 30px;
height: 30px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.accordion_title.open 
.icon_wrap {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.icon:before, 
.icon:after {
display: flex;
content: '';
background-color: #85723D;
width: 30px;
height: 1px;
position: absolute;
top: 15px;
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: center center;
}
.icon:before {
width: 1px;
height: 30px;
top: 0;
left: 15px;
}
.accordion_title.open 
.icon_wrap .icon:before {
content: none;
}
.accordion_title.open 
.icon_wrap .icon:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.accordion_inner {
display: none;
/*padding: 0px 0px 30px 0px;*/
box-sizing: border-box;
}
.ac_inner_wraper {
padding-top: 0px;
}
.ac_inner_txt {
width: 100%;
font-size: 1.5rem;
color: #222;
line-height: 180%;
}
.ac_inner_txt span {
color: #cc0000;
}
.ac_inner_txt a {
color: #8E7742;
text-decoration: underline;
}
.ac_inner_txt a:hover {
text-decoration: none;
}

@media all and (max-width : 820px ){
.ac_inner_txt {
width: 100%;
font-size: 1.4rem;
}
}

@media screen and (max-width: 767px) {
.accordion {
margin-bottom: 5px;
}
.accordion_inner {
padding: 0;
}
.ac_inner_wraper {
padding-top: 0px;
}
.accordion_title {
font-size: 1.5rem;
padding: 15px 45px 20px 5px;
}
.icon_wrap {
right: 1%;
}
.icon {
width: 20px;
height: 20px;
}
.icon:before, 
.icon:after {
width: 20px;
height: 1px;
position: absolute;
top: 10px;
left: 0;
}
.icon:before {
width: 1px;
height: 20px;
top: 0;
left: 10px;
}
.ac_inner_txt {
font-size: 1.2rem;
}
.feature_box dl:last-of-type {
padding: 15px 15px 0;
}
}


/*-------------------------------------------------
公演スケジュール表
-------------------------------------------------*/

.table_scroll_wrap {
width: 100%;
overflow: hidden;
}
.table_scroll_inner {
overflow-x: auto;
}
.schedule_table {
width: 100%;
border-top: solid 1px #DBDBDB;
border-left: solid 1px #DBDBDB;
border-collapse: collapse;
}
.schedule_table th {
background-image: url("../img/top/bg_gry03.jpg");
background-repeat: repeat-x;
background-position: left top;
padding: 25px 10px;
font-size: 1.8rem;
font-weight: 400;
color: #111;
line-height: 100%;
white-space: nowrap;
border-right: solid 1px #DBDBDB;
border-bottom: solid 1px #DBDBDB;
}
.schedule_table td {
text-align: center;
font-size: 1.6rem;
font-weight: 400;
color: #111;
letter-spacing: 0.2em;
padding: 20px 10px 15px 10px;
vertical-align: middle;
border-right: solid 1px #DBDBDB;
border-bottom: solid 1px #DBDBDB;
}

@media all and (max-width : 820px ){
.schedule_table th {
font-size: 1.6rem;
}
.schedule_table td {
font-size: 1.5rem;
}
}

.schedule_table tr:last-child td {
border-bottom: none;
}
.schedule_table td ul {
text-align: left;
display: inline-block;
}
.schedule_table td ul li {
margin-bottom: 5px;
}
.schedule_table td ul li a {
padding-left: 15px;
background-image: url("../img/common/icon_nakaguro_gold.svg");
background-repeat: no-repeat;
background-position: left center;
color: #8E7742;
text-decoration: underline;
}
.schedule_table td ul li a:hover {
text-decoration: none;
}
.schedule_table td .holiday {
color: #C40A19;
display: block;
padding: 18px 0;
}
.schedule_table .apply_btn {  
position: relative; 
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.15em;
text-decoration: none; 
display: inline-block;
background-color: #222;
border-radius: 3px;
color:#fff;
padding: 9px 25px;
text-align: center;
outline: none;
transition: ease .3s; 
}
.schedule_table .apply_btn:hover {
background: #8E7742;
transition: ease .3s;
}
.schedule_table .disable_btn {
position: relative; 
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.15em;
text-decoration: none; 
display: inline-block;
background-color: #aaa;
border-radius: 3px;
color:#777;
padding: 9px 25px;
text-align: center;
outline: none;
}
.schedule_table .btn_arrow::after{ 
content: '';
position: absolute;
top: 45%;
right: 10px;
width: 5px; 
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
transition: ease .3s;
}
.schedule_table .btn_arrow:hover::after { 
right: 7px;
transition: .3s;
}
.sec_schedule .link_btn_box {
margin-top: 50px;
}
.sec_schedule .link_btn_box .link_btn {  
position: relative;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.1em;
text-decoration: none; 
display: inline-block;
color:#fff;
padding: 15px 110px;
background-color: #222;
border: none;
border-radius: 3px;
text-align: center;
outline: none;
transition: ease .3s; 
}
.sec_schedule .link_btn_box .link_btn:hover {
background: #8E7742;
/*background: linear-gradient(90deg, rgba(178, 145, 50, 1), rgba(227, 194, 70, 1) 50%, rgba(178, 145, 50, 1));*/
border: none;
transition: ease .3s;
color:#fff;
}

@media all and (max-width : 767px ){
.schedule_table th {
padding: 15px 5px;
font-size: 1.4rem;
}
.schedule_table td {
font-size: 1.4rem;
letter-spacing: 0.1em;
padding: 10px 10px;
}
.schedule_table td ul li {
margin-bottom: 2px;
}
.schedule_table td ul li a {
font-size: 1.3rem;
}
.table_scroll_inner {
overflow-x: scroll;
}
.nowrap_box {
white-space: nowrap;
}
.component_box {
width: 550px;
}
.schedule_table td .holiday {
padding: 13px 0;
}
.schedule_table .apply_btn {  
font-size: 1.1rem;
padding: 8px 25px;
}
.sec_schedule .link_btn_box {
margin-top: 30px;
}
.sec_schedule .link_btn_box .link_btn {  
font-size: 1.2rem;
padding: 12px 50px;
}
}


/*-------------------------------------------------
代表的な演目
-------------------------------------------------*/

.sec_program {
padding: 80px 0 100px;
}
.program_box_wrap {
display: flex;
flex-wrap: wrap;
}
.program_box {
width: calc(33.33333333% - 60px / 3);
margin-right: 30px;
margin-bottom: 40px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.program_box:nth-child(3n) {
margin-right: 0;
}
.program_imgbox {
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.program_img {
position: relative;
z-index: 3;
}
.program_title {
display: block;
font-size: 2.0rem;
font-weight: 500;
letter-spacing: 0.2em;
text-align: center;
margin-bottom: 20px;
}
.program_title span {
font-size: 1.4rem;
}
.p_txt {
font-size: 1.4rem;
line-height: 200%;
margin-bottom: 25px;
flex-grow: 1;
}
.program_box .p_link_btn {
display: flex;
justify-content: space-between;
}
.program_box .p_link_btn li {
width: 48%;
}
.program_box .p_link_btn .link_btn {
width: 100%;
padding: 10px 0;
border-radius: 3px;
background-color: #222; 
font-size: 1.1rem;
border: none;
}
.program_box .p_link_btn .link_btn:hover {
background: #8E7742;
border: none;
transition: ease .3s;
}
.program_box .p_link_btn .btn_arrow::after{ 
content: '';
position: absolute;
top:44%;
right: 15px;
width: 5px; 
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
transition: ease .3s;
}
.program_box .p_link_btn .btn_arrow:hover::after { 
right: 10px;
transition: .3s;
}

/* モーダルボタン
-------------------------------------------------- */

.modal-video-body {
max-width: 1200px
}
.js-modal-video {
position: relative;
z-index: 10;
}
.modal-video {
background-color: rgba(0, 0, 0, 0.85);
}
.modal-video-close-btn {
transition: ease 0.5s;
}
.modal-video-close-btn:hover {
cursor: pointer;
opacity: 0.3;
transition: ease 0.5s;
}

@media all and (max-width : 820px ){
.program_box {
width: calc(50% - 25px / 2);
margin-right: 25px;
margin-bottom: 30px;
}
.program_box:nth-child(3n) {
margin-right: 25px;
}
.program_box:nth-child(2n) {
margin-right: 0px;
}
.program_title {
font-size: 1.8rem;
}
.program_title span {
font-size: 1.2rem;
}
}

@media all and (max-width : 767px ){
.sec_program {
padding: 40px 0 30px;
}
.program_box {
width:100%;
margin-right: 0px;
margin-bottom: 30px;
}
.program_box:nth-child(3n) {
margin-right: 0px;
}
.program_imgbox {
margin-bottom: 15px;
}
.program_title {
margin-bottom: 15px;
}
.p_txt {
font-size: 1.3rem;
line-height: 180%;
margin-bottom: 20px;
}
}


/*-------------------------------------------------
sec_hotel
-------------------------------------------------*/

.sec_hotel {
background-image: url("../img/top/bg_gry02.jpg");
background-repeat: repeat;
background-position: left top;
padding: 100px 0;
}

@media all and (max-width : 820px ){
.sec_hotel {
padding: 50px 0 20px;
}
}

@media all and (max-width : 767px ){
.sec_hotel {
padding: 30px 0 0px;
}
}

.hotel_kv {
position: relative;
overflow: hidden;
width: 67.74%;
}
.hotel_imgbox {
position: relative;
z-index: 3;
}
.hotel_imgbox img {
width: 100%;
}
.content_inner {
display: flex;
justify-content: space-between;
padding: 0 0 0 12.34%;
position: relative;
}
.inner_txtbox {
width: 27.67%;
position: relative;
margin-top: -40px;
}

@media all and (max-width : 1024px ){
.content_inner {
padding: 0 0 0 5.34%;
}
.inner_txtbox {
width: 36.67%;
margin-top: -60px;
margin-right: 30px;
}
}

.inner_txtbox::before {
display: block;
content: "";
width: 1px;
height: 120px;
background: #111;
margin: 0 0 1em .5em;
}

@media all and (max-width : 1260px ){
.inner_txtbox::before {
height: 80px;
}
}

@media all and (max-width : 1024px ){
.inner_txtbox::before {
height: 60px;
}
}

@media all and (max-width : 820px ){
.hotel_kv {
width: 95%;
}
.content_inner {
display: flex;
align-items: center;
flex-direction: column-reverse;
justify-content: space-between;
padding: 0px 30px 0 30px;
}
.inner_txtbox {
width: 90%;
margin-right: 0px;
}
.txt_wrap {
margin-bottom: 40px;
}
}

@media all and (max-width : 767px ){
.hotel_kv {
width: 100%;
}
.inner_txtbox {
width: 94%;
margin-right: 20px;
}
}

.hotel_copy_wrap {
display: flex;
}
.hotel_copy_wrap dt {
font-family: "EB Garamond", serif;
font-weight: 500;
color: #222;
font-size: 1.4rem;
line-height: 100%;
writing-mode: vertical-rl;
}
.content_copy {
font-size: 4.9rem;
font-weight: 500;
color: #222;
letter-spacing: 0.2em;
margin-left: 20px;
margin-bottom: 40px;
}

@media all and (max-width : 1536px ){
.content_copy {
font-size: 4.0rem;;
margin-left: 30px;
}
}

@media all and (max-width : 1260px ){
.content_copy {
font-size: 3.2rem;
margin-bottom: 30px;
}
}

@media all and (max-width : 1024px ){
.content_copy {
margin-bottom: 20px;
margin-left: 20px;
}
}

.content_txt {
font-size: 1.5rem;
color: #222;
letter-spacing: 0.2em;
line-height: 200%;
margin-bottom: 40px;
}

@media all and (max-width : 1260px ){
.content_txt {
line-height: 180%;
margin-bottom: 30px;
}
}

@media all and (max-width : 820px ){
.content_txt {
font-size: 1.4rem;
}
}

@media all and (max-width : 767px ){
.content_inner {
padding: 0px 0px 0 30px;
}
.hotel_copy_wrap {
display: flex;
flex-direction: column;
}
.hotel_copy_wrap dt {
font-size: 1.2rem;
writing-mode: horizontal-tb;
}
.content_copy {
font-size: 1.8rem;
padding-bottom: 0px;
margin: 10px 0 15px 0;
}
.content_copy::after {
width: 50px;
}
.content_txt {
font-size: 1.3rem;
line-height: 180%;
}
}

/* arrow btn
-------------------------------------------------- */

.arrow_btn a {
display:inline-block;
cursor:pointer;
position: relative;
text-decoration: none;
line-height: 100%;
transition: .5s;
}
.arrow_btn a::after {
content: "";
display: block;
position: absolute;
top: 20%;
left: 110%;
width: 50px;
height: 6px;
border: none;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: skew(45deg);
transition: .4s;
}
.arrow_btn a:hover::after {
position: absolute;
left: 110%;
width: 70px;
border-right: 1px solid #B29458;
border-bottom: 1px solid #B29458;
transition: .5s;
}
.arrow_btn a:hover {
color: #B29458;
transition: .5s;
}
.sec_news .arrow_btn {
text-align: right;
padding-right: 80px;
}

@media all and (max-width : 767px ){
.arrow_btn a {
font-size: 1.2rem;
}
.arrow_btn a::after {
top: 14%;
}
}


/*-------------------------------------------------
会場のご案内
-------------------------------------------------*/

.sec_access {
padding: 80px 0 50px;
}
.map_box .gmap {
width: 100%;
height: auto;
aspect-ratio: 16 / 3.83;
filter: grayscale(100%);
}
.access_box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.access_box dl dt {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 15px;
}
.access_box dl dd {
font-size: 1.4rem;
}
.access_box dl ul li {
padding-left: 20px;
background-image: url("../img/common/icon_nakaguro.svg");
background-repeat: no-repeat;
background-position: left center;
margin-bottom: 3px;
}

@media all and (max-width : 767px ){
.sec_access {
padding: 40px 0 10px;
}
.map_box .gmap {
width: 100%;
height: 200px;
aspect-ratio :unset;
}
.access_box {
margin-top: 10px;
padding: 0 20px;
}
.access_box dl {
margin-bottom: 20px;
}
.access_box dl dt {
font-size: 1.35rem;
margin-bottom: 10px;
}
.access_box dl dd {
font-size: 1.3rem;
}
.access_box dl ul li {
background-position: left top;
margin-bottom: 3px;
}
}

/*-------------------------------------------------
カルーセル
-------------------------------------------------*/

.sec_link_banner {
padding: 40px 0 60px;
background-image: url("../img/top/bg_gry03.jpg");
background-repeat: repeat;
}

@media all and (max-width : 820px ){
.sec_link_banner {
padding: 30px 0 50px;
}
}

@media all and (max-width : 767px ){
.sec_link_banner {
padding: 20px 0 40px;
}
}

.sec_link_banner .box_m {
position: relative;
}
.sec_link_banner .swiper-slide a {
transition: ease 0.5s;
}
.sec_link_banner .swiper-slide img {
width: 100%;
height: auto;
}
.sec_link_banner .swiper-slide a:hover {
opacity: 0.8;
transition: ease 0.5s;
}

/* ページネーション
-------------------------------------------------*/

.sec_link_banner .swiper-pagination-bullet {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2;
margin-right: 10px;
}
.sec_link_banner .swiper-pagination-bullet:last-child {
margin-right: 0px;
}
.sec_link_banner .swiper-pagination-bullet-active {
opacity: 1;
background: #005243;
}
.sec_link_banner .swiper-pagination {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.sec_link_banner .swiper-pagination-bullet:hover {
cursor: pointer;
}