@charset "UTF-8";
/*
* Theme Name: labottega
*/

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');

/* Yahoo! YUI 3 CSS Reset – Minified */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*** WordPress style ***/
/* image
-------------------------------------------------------------- */
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto;
}
embed,
iframe,
object,
video {
	max-width: 100%;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	max-width: 100%;
	padding: 4px;
}
.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	font-style: italic;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #757575;
}

/* widget
-------------------------------------------------------------- */
#wp-calendar {
	width:100%;
}
.widget_calendar caption {
	margin-bottom:5px;
}
.widget_calendar td {
	text-align:center;
	padding:2px;
}

/* font
-------------------------------------------------------------- */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
  font-display: swap;
}
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
  font-display: swap;
}
:root {
  --serif: 'Shippori Mincho B1', serif;
  --serif-en: 'Times','Times New Roman',sans-serif;
  --sans_serif: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  }

.entry p,
.widget p { margin-bottom:2em;}
strong { font-weight:700;}
em { font-style:italic;}
ol { list-style-type:decimal;}
.entry ul,
.entry ol,
.widget ul,
.widget ol {
	list-style-position:inside;
	margin:20px 0 20px 20px;
}

/*** la-bottega style ***/
*{ box-sizing: border-box;}
a {
  color:#6a603d;
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  transition: .5s;
}
a:hover { text-decoration: none;}

table {
	border-collapse: collapse;
	border-spacing : 0;
}
.image figure { display:inline;}
.image img { display: block; width: 100%;}

html {
  font-size: 16px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-y: scroll;
}
body{
  background-color: #f7f7ef;
  color: #333;
  font-family: var(--sans_serif);
  line-height: 1.75;
  overflow-x: hidden;
  -ms-overflow-style: scrollbar;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;/*Chrome,Safari*/
  -ms-text-size-adjust : 100%;/*EgdeMobile*/
  -moz-text-size-adjust: 100%;/*firefox*/
  text-size-adjust: 100%;
  margin: 0;
  }
@media screen and (max-width: 480px) { html, body {min-width: 320px;}}
@media screen and (max-width: 768px) { html { font-size: 14px;}}   

p {
  overflow-wrap: break-word;
  word-break: keep-all;
  margin-bottom: 1.875rem;/*30*/
}

/* show efect –––––––––––––––––––––––––––– */
.show { transform: translateY(30px);}
.show-left {transform: translateX(20px);}
.show-right {transform: translateX(-20px); }
.show,
.show-left,
.show-right{
  opacity: 0;
  visibility: hidden;
  transition: transform 3s, opacity 3s, visibility 3s;
}
.is-show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* main visual –––––––––––––––––––––––––––– */
.mv {
    position: relative;
    width: 100% ;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background : #bba460/*#b9a978*/;
}
.mv:after {
	content:'';
	display:block;
	position: static;
}
  .mv .content {
    width: 25%;
    display: flex;
    align-self: self-start;
    border-top: 4rem solid #fff; 
    padding: 5rem 5rem 3rem 5rem;
  }
    .copy {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-family: var(--serif);
    line-height: 2;
    margin-left: auto;
    animation: showin 5s ease-out forwards;
  }
  @keyframes showin {
    0% { opacity: 0;}
    100% { opacity: 1;}
  }
  .logo {
    position: absolute;
    left : 10%;
    bottom: 4rem;
    max-width: 360px;
    width: 30%;
    z-index: 2;
  }
  .mv .image {
    position: relative;
    display: inline-block;
    width : 75%;
    height: 100vh;
  }
  .mv .image img{
   width : 100%;
   height: 100%;
   object-fit: cover;
}
/* content –––––––––––––––––––––––––––– */
.home .wp-block-columns {margin-bottom:0;}
.lead {
  font-family: var(--serif);
  line-height: 2.5;
  padding: 6.25rem 5rem 4rem 5rem;
}
.page-sec {
	width : 48rem;
	padding: 6.25rem 5rem 4rem 5rem;
	margin:auto;
}
.page-sec h2 {/* contact, story */
	font-family: var(--serif-en);
	font-size : 2em/*32*/;
	line-height: 1.5;
	letter-spacing: .02em;
}
.privacy-policy .page-sec h2 {
	font-family: var(--sans_serif);
	font-size : 1em;
}
.title {
  font-family: var(--serif-en);
  font-size : 2.375em/*38*/;
  line-height: 1.3;
  letter-spacing: .02em;
  margin-bottom : .776em;/*45*/
}
  .title span {
    display: block;
    font-family: var(--serif);
    font-size : .45em;
  }

.wrap {
  width : 100% ;
  display: flex;
  align-items: stretch;
}
.content {
  width : 50%;
  align-self: center;
  padding: 5rem 5rem 3rem 5rem;
}
.image { width: 50%;}
/* Menu */
.menu .image img {/* menu Photo */
  display : inline-block;
  position: relative;
  width : 100%;
  height: 100%;
  object-fit: cover;
}

.menu li {
  overflow-wrap: break-word;
  word-break: keep-all;
  padding-left:1.3em;
  text-indent:-1.3em;
}
.menu li:before {content:'− ';display: inline;}
.menu li +li{ margin-bottom: 0.25em;}
/* About */
.about ul { margin-bottom:1.875rem;}
.about li{
  overflow-wrap: break-word;
  word-break: keep-all;
  padding-left: 3.8em;
  text-indent: -3.8em;
}
.about li +li {  margin-bottom:.25em;}
.about-img img { max-width:430px;}
.about-img,
.content-calendar {
  width: 50%;
  align-self: center;
  padding: 5%;
}
/* Story */
.bg-story {
  position: relative;
  background: url("https://labottega-fukushima.com/wp-content/uploads/2023/05/bg_story.jpg") center center/cover no-repeat;
  margin:0;
  z-index: 0;
}
.bg-story .title { line-height:1.75;}
.inner {
  max-width: 100%;
  width: 72rem;
  padding: 7rem 3.5rem 5rem 3.5rem ;
  margin : 0 auto;
}
.photo {
  max-width: 40rem;
  margin: 0 auto;
  }

/* Reserve */
.bg-color { background: #bba460/*#b39e63*/;}
.phone-no {
	font-family: var(--serif-en);
	font-size: 2em;
	line-height: 1;
} 
.btn {
	display: block;
	width: 100%;
	font-family: var(--serif-en);
	font-size: 1.25em;
	line-height: 3.125em;
	text-align: center;
	border-bottom: solid 1px #6a603d;
	border-right : solid 1px #6a603d;
	margin: 1.5rem 0 2rem;
}
.btn a {
	display: block;
	background-color: #404040;
	color: #f7f7ef;
}
.btn a:hover,
.btn:hover {
	background-color: #f7f7ef;
	color: #666;
}

/*--- Reserve > form ---*/
/* reserve header logo*/
.site-title img {
	width : 200px;
	margin: 3rem auto 0;
}
.reserve .u-small li {
  overflow-wrap: break-word;
  word-break: keep-all;
  padding-left :1em;
  text-indent : -1em; 
  margin-bottom:.25em;
}
.reserve .u-small li:before {
  content:'・';
  display:inline;
}
form { margin-top:1rem;}
.form__item:first-of-type,
.form__item:nth-of-type(2){
  float:left;
  width: calc(50% - 0.75rem);
  margin-bottom:2rem;
}
.form__item:first-of-type {
	margin-right:1.5rem;
}
.form__item {
  padding-top:1.5rem;
}

label {
  color : #666;
	display: block;
	font-size: .875rem;
	margin: 0 0 1rem 0;
}

input[type="text"],
input[type="email"],
textarea{
  width: 100%;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background-color: #fff;
	border-radius: 4px;
	border : solid 1px;
	border-color: rgba(0, 0, 0, 0.2);
	display: block;
	outline: 0;
	padding: 0 0.825rem;
	text-decoration: none;
}
input[type="text"],
input[type="email"]{ height: 2.75rem;}
textarea { padding: 0.75rem 1rem;}
input[type="submit"],
input[type="reset"],
input[type="button"]{
	appearance: none;
	background: #b39e63;
	border-top : 0;
	border-left: 0;
	border-bottom: solid 1px #6a603d;
  border-right : solid 1px #6a603d;
	color : #FFF;
	cursor: pointer;
	display: inline-block;
  font-size: .75rem;
	letter-spacing: .125em;
	text-align: center;
	text-decoration: none;
	text-transform : uppercase;
	max-width: 30rem;
	width : 15rem;
	line-height: 3.75em;
	text-overflow: ellipsis;
	overflow: hidden;
  padding : 0 2.5em;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
  margin : 0 1rem 2.5rem;
  white-space: nowrap;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus { border-color: #6a603d;}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background: #404040;
  color : #fff;
}
ul.form__btn {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 3em;
}
.mw_wp_form .error {
	display: block;
	color : #B70000;
	font-size: .75rem;
	margin-top: .5em;
}

/* footer */
footer {
  position: relative;
  background: url("https://labottega-fukushima.com/wp-content/uploads/2023/05/bg_footer.jpg") center center/cover no-repeat;
  }
footer::after,.bg-story::after {
  content: '';
  background-color: rgba(0,0,0,.4);
  position: absolute;
  top : 0;
  left: 0;
  right : 0;
  bottom: 0;
}
footer .wrap,
.bg-story .inner{
  position: relative;
  color: #fff;
  z-index: 1;
}
footer .content {
	display: grid;
	place-items: center;
	margin-left: auto;
	padding: 8rem 5rem 6rem 5rem;
}
footer .title {
	font-size: 2rem;
	margin: 0 auto 1em;
}
footer .title span { font-size:.45em;}
footer a { color: #fff;}
.map { overflow: hidden; width:100%; height:200px;}
.map iframe {
	width:100%;
	height:200px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.u-center{ text-align: center;}
.u-large { font-size: 1.25em;/*20*/ }
.u-small { font-size: .875em;/*14*/ }
.u-mt { margin-top: 1.5625em;/*25*/}
.u-serif { font-family: var(--serif); letter-spacing: .05em}
small { 
	display:block;
	font-size:.8em;
	text-align: center;
}

/**  custom **/
wp-block-columns {	margin-bottom:0;}
.xo-event-calendar table.xo-month > thead th{ font-weight: normal;}
.xo-event-calendar table.xo-month .month-dayname td div {
	text-align: center;
	line-height: 2.5;
	padding: 4px;
}
.xo-event-calendar table.xo-month > thead th,
.xo-event-calendar table { background: #404040;color: #404040;}
.xo-event-calendar table.xo-month > thead th { color: #fff;}
.xo-event-calendar table.xo-month{
	border: 1px solid #404040;
	border-right-width: 0;
}
.xo-event-calendar table.xo-month td, .xo-event-calendar table.xo-month th{
	background-color: #bba460/*#b39e63*/;
	border: 1px solid #404040;
}
.xo-event-calendar table.xo-month > thead th.sunday { color: #e8dac3;}
.xo-event-calendar table.xo-month > thead th.saturday { color: #94afcc;}
.xo-event-calendar table.xo-month .month-dayname td div.today { color: #6a603d;}
.holiday-titles { display: flex;}
.xo-event-calendar p.holiday-title { margin: 0 1em 0 0;}
.xo-event-calendar p.holiday-title span { border: 1px solid #404040;}

@media screen and (max-width: 1680px){
.mv .content,.content { padding: 5rem 5rem 3rem 5rem;}
.inner { padding: 5rem 2.5rem;}
footer .content { padding: 7rem 5rem 5rem 5rem;}
}
@media screen and (max-width: 1280px){
.mv .content,.content { padding: 4rem 4rem 2rem 4rem;}
footer .content { padding: 6rem 4rem 4rem 4rem;}
.lead,
.page-sec {
	width : 48rem;
	padding: 5rem 5rem 3rem 5rem;
	margin: auto;
}
.inner { padding: 4rem 4rem;}
}
@media screen and (max-width: 980px){
.mv .content,.content,
.lead,.page-sec { padding: 3.75rem 3rem 1.75rem 3rem;}
footer .content { padding: 5.75rem 3rem 3.75rem 3rem;}
.inner { padding: 3.75rem 3rem;}
.title { margin-bottom: .5em;}
}
@media screen and (orientation: portrait) { 
.mv { min-height : auto;}
.mv .image{ height: auto;}
}
@media only screen and (max-height: 768px) and (orientation: landscape){
.mv { min-height: 100vh;}
.mv .image{height: 100vh;}
.logo { bottom: 1.5rem;}
}
@media screen and (max-width: 768px) {
.mv .logo {bottom:.5rem;}
.mv .content { padding: 2.5rem 2rem 0.5rem 2rem;}
.content { padding: 3rem 2rem 0.5rem 2rem;}
.lead,.page-sec,.photo { width:100%;}
.inner{ padding: 3rem 2rem 2rem;}
}
@media screen and (max-width: 600px) {
.mv {
  flex-direction: column;
  align-items: center;
}
.mv .content {
  width: 100%;
  height: 40vh;
  border-top:0;
}
.mv .copy { margin: 3rem 1rem 0 auto;}
.mv .logo { width : 36% ; left: auto; bottom:auto;}
.mv .image{ width : 100%; height: 60vh;}
.show-left, 
.show-right {
  transform : translateY(50px); opacity: 0;
  visibility: hidden;
  transition: transform 3s, opacity 3s, visibility 3s;
}
.is-show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.wrap { flex-direction: column;}
.bg-color .wrap {flex-direction:column-reverse;}
.content-calendar { padding: 0 2rem 3.75rem;}
.content,.image,
.content-calendar,.map,.lead,
.page-sec ,.photo { width: 100%;}
.title { font-size: 2rem;}
.about-img {
  width : 70%;
  align-self: flex-start;
  padding: 0 2rem 3.75rem;
}
.form__item:first-of-type,
.form__item:nth-of-type(2){
  float: none;
  width: 100%;
  margin-bottom:0;
}
footer .content { padding: 4rem 2rem 1.5rem 2rem;}
}