/* catalog */
.contact_catalog_bg{
background-color: #4e8fcd;
}
.catalog_ttl{
color: #fff;
font-size: 14px;
font-weight: normal;
}
.catalog_ttl .catalog_ttl_en{
font-size: clamp(50px,7.5vw,76px);
}
.catalog_ttl .catalog_ttl_ja{
font-size: clamp(15px,1.875vw,17px);
}
.contact_catalog_flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.contact_catalog_flex > div{
width: 48.5%;
}
.catalog_btn > .btn_inc_catalog{
display: inline-block;
border: solid 1px #fff;
position: relative;
width: 100%;
max-width: 340px;
text-align: center;
transition: all 0.4s;
}
.catalog_btn > .btn_inc_catalog .btn_text{
font-size: clamp(18px,2.5vw,24px);
color: #fff;
background-color: transparent;
border: none;
padding: 20px 10px 20px 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.catalog_btn > .btn_inc_catalog:hover .btn_text{
color: #000;
}
.catalog_btn > .btn_inc_catalog::after{
content: "";
background-color: #fff;
clip-path: polygon(0 5%, 9% 0, 100% 50%, 9% 100%, 0 95%, 83% 50%);
width: 14px;
aspect-ratio: 14/25;
display: inline-block;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
transition: all 0.4s;
}
.catalog_btn > .btn_inc_catalog:hover{
color: #000;
border: solid 1px #000;
background-color: #fff;
}
.catalog_btn > .btn_inc_catalog:hover::after{
background-color: #000;
}
@media screen and (max-width: 599px) {
.contact_catalog_flex{
flex-direction: column;
row-gap: 30px;
}
.contact_catalog_flex > div{
width: 100%;
}
}
.contact_tel_ttl01,
.contact_tel_ttl02{
font-size: clamp(19px,3.125vw,29px);
font-weight: bold;
}
.contact_tel_ttl01{
color: #000;
}
.contact_tel_ttl02{
color: #c70000;
}
.contact_tel_ttl_under01{
border-bottom: solid 1px #000;
}
.contact_tel_ttl_under02{
border-bottom: solid 1px #c70000;
}
.contact_tel_flex{
display: flex;
justify-content: space-between;
}
.contact_tel_flex > div{
width: 50%;
padding: 0 15px;
}
.contact_tel_flex > div:first-of-type{
border-right: 1px solid #000;
}
.centact_tel_btn img{
max-width: calc(792px / 2);
}
@media screen and (max-width: 599px) {
.contact_tel_flex{
flex-direction: column;
}
.contact_tel_flex > div{
width: 100%;
padding-left: 0;
padding-right: 0;
}
.contact_tel_flex > div:first-of-type{
border-right: none;
border-bottom: 1px solid #000;
padding-bottom: 30px;
}
.contact_tel_flex > div:last-of-type{
padding-top: 30px;
}
}
.contact_form_btn{
background-color: #fff;
border: 1px solid #fff;
width: 100%;
max-width: 400px;
text-align: center;
display: inline-block;
padding: 20px 0;
position: relative;
font-size: clamp(18px,2.5vw,24px);
transition: all 0.4s;
}
.contact_form_btn::after,
.contact_form_btn::before{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.contact_form_btn::after{
-webkit-mask:url( 'data:image/svg+xml;utf-8,' );
mask: url( 'data:image/svg+xml;utf-8,' );
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: all 0.4s;
background-color: #000;
left: 15px;
width: 24px;
height: 19px;
}
.contact_form_btn[data-contact_form_btn_type="reservation"]::after{
mask: url( 'data:image/svg+xml;utf-8,' );
width: 25px;
height: auto;
aspect-ratio: 1/1;
}
.contact_form_btn::before{
content: "";
background-color: #000;
clip-path: polygon(0 5%, 9% 0, 100% 50%, 9% 100%, 0 95%, 83% 50%);
width: 14px;
aspect-ratio: 14/25;
display: inline-block;
position: absolute;
right: 15px;
transition: all 0.4s;
}
.contact_form_btn:hover{
background-color: #000;
color: #fff;
}
.contact_form_btn:hover::after,
.contact_form_btn:hover::before{
background-color: #fff;
}
/* footer */
.foot_logo img{
max-width: calc(348px / 2);
}
.copyright{
font-size: 14px;
color: #fff;
}
.foot_link_box a,
.foot_link_under a{
color: #fff;
font-size: clamp(14px,1.875vw,16px);
font-family:'游明朝体','Yu Mincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝','Sawarabi Mincho',serif;
display: inline-block;
padding: 5px 0;
}
.foot_link_box::after{
content: "";
width: 100vw;
height: 1px;
background-color: #488ba7;
position: absolute;
bottom: 0;
}
@media screen and (min-width: 1080px) {
.foot_link_box::after{
left: calc(0% - (50vw - 520px));
}
}
@media screen and (max-width: 1079px) {
.foot_link_box::after{
left: -3%;
}
}
@media screen and (max-width: 599px) {
.foot_link_box::after{
left: -6%;
}
}
.foot_link_box{
display: flex;
justify-content: space-between;
position: relative;
}
.foot_link_under ul{
display: flex;
flex-wrap: wrap;
column-gap: 3.4%;
}
@media screen and (max-width: 599px) {
.foot_link_box,
.foot_link_under ul{
column-count: 2;
display: block;
}
.foot_link_box ul,
.foot_link_box li{
display: contents;
}
.foot_link_box a{
width: 100%;
}
}
.foot_sns ul{
display: flex;
column-gap: 3%;
}
.other-lineup ul li.logo_bino .inn::before {
content: "";
display: block;
width: 45%;
max-width: 100px;
height: 30px;
background: url(/asset/img/bino-logo-svg.svg) center no-repeat;
margin-bottom: 5px;
background-size: 100%;
position: relative;
left: 50%;
transform: translate(-50% ,0);
opacity: 0.7;
}
/* grid,flex */
.grid_two,
.grid_three,
.grid_four{
display: grid;
column-gap: 3.5%;
row-gap: 30px;
}
.grid_two{
grid-template-columns: repeat(2,1fr);
}
.grid_three{
grid-template-columns: repeat(3,1fr);
}
.grid_four{
grid-template-columns: repeat(4,1fr);
}
@media screen and (max-width: 599px) {
.grid_two,
.grid_three{
grid-template-columns: repeat(1,1fr);
}
.grid_four{
grid-template-columns: repeat(2,1fr);
}
}
.flex_two{
display: flex;
justify-content: space-between;
}
.flex_two.reverse{
flex-direction: row-reverse;
}
.flex_two.al_center{
align-items: center;
}
.flex_two > div{
width: 48.5%;
}
@media screen and (max-width: 599px) {
.flex_two,
.flex_two.reverse{
flex-direction: column;
row-gap: 30px;
}
.flex_two > div{
width: 100%;
}
.sp_dis_contents{
display: contents;
}
}
.sp_archive_link_layout{
display: flex;
flex-direction: column-reverse;
position: relative;
}
@media screen and (max-width: 599px) {
.sp_archive_link_layout{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.sp_archive_link_layout_text{
width: 55%;
}
.sp_archive_link_layout_img{
width: 42%;
}
}
.max750{
max-width: 750px;
}
.inc_contact_box{
justify-content: center;
column-gap: 1em;
}
.inc_contact_box .contact_form_btn{
background-color: #004f94;
padding: 0;
}
.inc_contact_box .contact_form_btn::after,
.inc_contact_box .contact_form_btn::before{
background-color: #fff;
}
.inc_contact_box input{
font-size: clamp(18px, 2.5vw, 24px);
background-color: transparent;
border: none;
color: #fff;
display: block;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
cursor: pointer;;
}
.inc_contact_box .contact_form_btn:hover{
background-color: #fff;
border: 1px solid #fff;
}
.inc_contact_box .contact_form_btn:hover::after,
.inc_contact_box .contact_form_btn:hover::before{
background-color: #004f94;
}
.inc_contact_box .contact_form_btn:hover input{
color: #004f94;
}
.inc_contact_ttl{
font-size: clamp(50px,7.5vw,76px);
}
.inc_contact_frame{
margin-top: 80px;
padding: 5% 3.5%;
background-color: #f1f1f1;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.inc_contact_frame p{
line-height: 1;
}