@charset "UTF-8";
 .slider {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.slide_box {
position: relative;
z-index: 2;
display: flex;
align-items: center;
overflow: hidden;
}
.slider .slide_box .slide_box_in {
position: relative;
width: 100%;
height: calc(100vh - 60px);
}
.slider .slide_box .slide_box_in div {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.slider .slide_box .slide_box_in picture {
position: relative;
width: 100%;
height: 100%;
display: flex !important;
align-items: center;
justify-content: center;
}
.slider .slide_box .slide_box_in img {
height: 100%;
width: 100%;
object-fit: cover;
backface-visibility: inherit;
-webkit-backface-visibility: inherit;
-moz-backface-visibility: inherit;
-ms-backface-visibility: inherit;
}
.slider .slide_box a:hover ,
.slider .slide_box a:hover img {
opacity: 1.0;
zoom: 1;
}
.slider .slide_box .slide_box_in picture.slider_logo::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 415px;
height: 415px; background: url(//www.cafe-laterre.com/img/slider_logo.svg) no-repeat center center;
background-size: cover;
content: '';
}
.catch {
padding: 120px 0 60px;
}
.catch h3 {
width: 680px;
margin: 0 auto;
margin-bottom: 40px;
}
.catch .comment p {
font-size: 2.0rem;
text-align: center;
letter-spacing: .1em;
}
.catch .comment p:not(:last-of-type) {
margin-bottom: 1.5em;
}
.about_img ul {
display: flex;
flex-wrap: wrap;
}
.about_img ul li {
width: 50%;
}
.about {
padding-top: 80px;
padding-bottom: 80px;
font-size: 2.0rem;
}
.about p {
letter-spacing: .1em;
margin-bottom: 2.5em;
}
.about ul {
display: flex;
flex-wrap: wrap;
}
.about ul:first-of-type {
margin-bottom: 2.5em;
}
.about ul li {
width: 49%;
}
.about ul li:first-of-type {
margin-right: 2%;
}
.news_event h3 {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 70px;
}
.news_event h3 span {
position: relative;
display: block;
width: 250px;
}
.news_event h3 span::after {
position: absolute;
bottom: -20px;
left: -30px;
width: calc(100% + (30px * 2));
height: 1px;
background: #231815;
content: '';
}
.news_event .store {
margin-bottom: 50px;
}
.news_event .store h4 {
font-size: 2.0rem;
font-weight: 700;
text-align: center;
margin-bottom: .8em;
}
.news_event .store p {
text-align: center;
font-size: 1.6rem;
}
.news_event .store p:not(:last-of-type) {
margin-bottom: 1.2em;
}
.news_event .insta {
margin-bottom: 30px;
}
.news_event .insta #sb_instagram #sbi_images {
float: none !important;
padding: 0 !important;
}
.news_event .insta .bx-wrapper {
background: none;
padding: 0;
margin: 0;
box-shadow: none;
}
.news_event .insta #sb_instagram #sbi_images .sbi_item {
width: 260px !important;
height: 260px !important;
margin: 0 20px !important;
}
.news_event .insta #sb_instagram #sbi_images .sbi_item img {
height: 100%;
width: 100%;
object-fit: cover;
backface-visibility: inherit;
-webkit-backface-visibility: inherit;
-moz-backface-visibility: inherit;
-ms-backface-visibility: inherit;
}
.news_event .btn {
display: flex;
align-items: center;
justify-content: center;
}
.news_event .btn a {
display: block;
border: solid 1px #231815;
font-size: 1.6rem;
text-align: center;
text-decoration: none;
padding: .8em 5.5em .6em;
}
.news_event .btn a:hover {
background: #231815;
border: solid 1px #231815;
color: #FFF;
}
.access {
padding-top: 80px;
padding-bottom: 80px;
}
.access h3 {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 70px;
}
.access h3 span {
position: relative;
display: block;
width: 250px;
}
.access h3 span::after {
position: absolute;
bottom: -20px;
left: -30px;
width: calc(100% + (30px * 2));
height: 1px;
background: #231815;
content: '';
}
.access .gmap {
margin-bottom: 90px;
}
.access .gmap iframe {
width: 100%;
height: 400px;
}
.access .box {
display: flex;
}
.access .box .box_l {
margin-right: 20px;
}
.access .box .box_l dl {
font-size: 1.8rem;
margin-bottom: .6em;
display: flex;
align-items: flex-start;
}
.access .box .box_l dl:last-of-type {
margin-bottom: .3em;
}
.access .box .box_l dl dt {
width: 70px;
border: solid 1px #000000;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
padding: .3em .2em .2em;
margin-right: .6em;
}
.access .box .box_l dl dt span ,
.access .box .box_l dl dt em {
display: block;
font-weight: 500;
}
.access .box .box_l dl dt span::first-letter {
letter-spacing: .6em;
}
.access .box .box_l dl dd {
padding-top: .1em;
}
.access .box .box_l .caution {
position: relative;
padding-left: 1.5em;
margin-bottom: 1.2em;
font-size: 1.4rem;
}
.access .box .box_l .caution::before {
position: absolute;
top: 0;
left: 0;
content: '※';
}
.access .box .box_l .btn a {
display: block;
border: solid 1px #231815;
font-size: 1.4rem;
text-align: center;
text-decoration: none;
padding: 1.6em 2em 1.4em;
}
.access .box .box_l .btn a span {
position: relative;
display: inline-block;
padding: 0 .3em;
}
.access .box .box_l .btn a span::after {
position: absolute;
bottom: .3em;
left: .3em;
z-index: -1;
width: calc(100% - (.3em * 2));
height: 1px;
background: #666;
content: '';
}
.access .box .box_l .btn a:hover {
background: #231815;
border: solid 1px #231815;
color: #FFF;
}
.access .box .box_l .btn a:hover span::after {
background: #FFF;
}
.access .box .box_r {
background: #e8e8e8;
margin-left: auto;
padding: 30px;
}
.access .box .box_r h4 {
border-bottom: solid 1px #000000;
padding-bottom: .3em;
margin-bottom: .8em;
display: flex;
align-items: center;
}
.access .box .box_r h4 span ,
.access .box .box_r h4 em {
display: block;
}
.access .box .box_r h4 span {
font-size: 1.8rem;
margin-right: .4em;
}
.access .box .box_r h4 em {
font-size: 1.4rem;
}
.access .box .box_r .map {
display: flex;
}
.access .box .box_r .map .modal input {
display: none;
}
.modal_bg {
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}
.modal_trigger {
position: absolute;
width: 100%;
height: 100%;
}
.content {
width: 800px;
padding: 20px;
background: #fff;
transition: 0.5s;
}
.content .img {
width: 100%;
}
.close_button {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
font-size: 2.4rem;
cursor: pointer;
}
.access input:checked ~ .modal_bg {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}
.access input:checked ~ .modal_bg .content {
transform: translateY(20px);
}
.access .box .box_r .map_img {
display: block;
cursor: pointer;
width: 250px;
margin-right: 20px;
}
.access .box .box_r .map_r {
margin-left: auto;
width: 165px;
font-size: 1.4rem;
}
.access .box .box_r .map_r p:first-of-type {
margin-bottom: 1.2em;
}
.access .box .box_r .map_r p:last-of-type {
position: relative;
padding-left: 1.2em;
font-size: 1.2rem;
}
.access .box .box_r .map_r p:last-of-type::before {
position: absolute;
top: 0;
left: 0;
content: '◀';
}
.footer_img {
height: 550px;
overflow: hidden;
}
.footer_img p {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.footer_img p picture {
position: relative;
width: 100%;
height: 100%;
display: flex !important;
align-items: center;
justify-content: center;
}
.footer_img p img {
height: 100%;
width: 100%;
object-fit: cover;
backface-visibility: inherit;
-webkit-backface-visibility: inherit;
-moz-backface-visibility: inherit;
-ms-backface-visibility: inherit;
}
@media screen and (max-width: 920px) {
.access .box {
display: flex;
flex-direction: column;
}
.access .box .box_l {
position: relative;
margin-right: 0;
margin-bottom: 20px;
}
.access .box .box_l .btn {
position: absolute;
top: 0;
right: 0;
}
.access .box .box_l .btn a {
padding: 1.6em 2.5em 1.4em;
}
.content {
width: 60vw;
}  
.access .box .box_r {
margin-left: 0;
}
.access .box .box_r .map_r {
width: calc(100% - 250px);
}
}
@media screen and (max-width: 767px) {
.slider .slide_box .slide_box_in {
height: calc(100vh - 16vw);
}  
.slider .slide_box .slide_box_in picture.slider_logo::before {
width: 40vw;
height: 40vw;
}
.catch {
padding: 10vw 0 10vw;
}
.catch h3 {
width: 90%;
margin-bottom: 5vw;
}
.catch .comment p {
font-size: 1.8rem;
text-align: left;
}
.about {
padding-top: 10vw;
padding-bottom: 10vw;
font-size: 1.8rem;
}
.news_event h3 {
margin-bottom: 6vw;
}
.news_event h3 span {
width: 80%;
}
.news_event h3 span::after {
position: absolute;
bottom: -2vw;
left: -2vw;
width: calc(100% + (2vw * 2));
}
.news_event .store {
margin-bottom: 6vw;
}
.news_event .store h4 {
font-size: 2.0rem;
font-weight: 700;
text-align: center;
margin-bottom: .8em;
}
.news_event .store p {
text-align: left;
}
.news_event .store p:not(:last-of-type) {
margin-bottom: 1.2em;
}
.news_event .insta {
margin-bottom: 6vw;
}
.news_event .insta #sb_instagram #sbi_images .sbi_item {
width: 12vw !important;
height: 12vw !important;
margin: 0 3vw !important;
}
.news_event .btn a {
font-size: 1.6rem;
padding: .8em 3em .6em;
}
.access {
padding-top: 10vw;
padding-bottom: 10vw;
}
.access h3 {
margin-bottom: 6vw;
}
.access h3 span {
width: 80%;
}
.access h3 span::after {
position: absolute;
bottom: -2vw;
left: -2vw;
width: calc(100% + (2vw * 2));
}
.access .gmap {
margin-bottom: 6vw;
}
.access .gmap iframe {
width: 100%;
height: 60vh;
}
.access .box .box_l {
margin-bottom: 6vw;
}
.access .box .box_l dl {
font-size: 1.8rem;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.access .box .box_l dl dt {
width: 40vw;
padding: .3em .2em .2em;
margin-right: 0;
margin-bottom: .2em;
}
.access .box .box_l dl dt span ,
.access .box .box_l dl dt em {
display: block;
font-weight: 500;
}
.access .box .box_l .btn {
position: relative;
top: inherit;
right: inherit;
}
.access .box .box_l .btn a {
padding: 1.6em 1.5em 1.4em;
}
.access .box .box_r {
padding: 5vw 4vw;
}
.access .box .box_r h4 {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.access .box .box_r h4 span ,
.access .box .box_r h4 em {
display: block;
}
.access .box .box_r h4 span {
font-size: 1.8rem;
margin-right: 0;
margin-bottom: .2em;
}
.access .box .box_r h4 em {
font-size: 1.4rem;
}
.access .box .box_r .map {
display: flex;
flex-direction: column;
}
.modal_bg {
width: 100%;
height: 100vh;
}
.content {
width: 80vw;
padding: 4vw;
}
.close_button {
top: 2vw;
left: 2vw;
font-size: 2.4rem;
}
.access .box .box_r .map_img {
width: 100%;
margin-right: 0;
margin-bottom: 5vw;
}
.access .box .box_r .map_r {
margin-left: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.access .box .box_r .map_r p:first-of-type {
order: 2;
margin-bottom: 0;
}
.access .box .box_r .map_r p:last-of-type {
order: 1;
margin-bottom: 1.2em;
}  
.access .box .box_r .map_r p:last-of-type::before {
position: absolute;
top: 0;
left: 0;
content: '▲';
}
.footer_img {
height: auto;
overflow: inherit;
}
.footer_img p img {
height: auto;
object-fit: inherit;
}
}