@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  outline: none;
  font-family: "a-otf-ud-reimin-pr6n",sans-serif;
}

img {
  user-select: none;
}

h1 {
  padding: 30px 0;
  font-weight: normal;
  font-size: 19.61px;
  letter-spacing: 3px;
  color: "#000";
}

#contents {
  position: relative;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 950px;
  margin: 0 auto;
}

#osae {
  width: 950px;
  margin-top: 50px;
  text-align: center;
}

#osae img {
  display: block;
  margin: auto;
}

.osae_main_text {
  margin: 20px 0;
  font-size: 30px;
  letter-spacing: 5px;
  line-height: 53.61px;
}

.osae_sub_text {
  margin: 50px 0 100px;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 38.61px;
}

.cont_title {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.cont_title p {
  margin-left: 10px;
  font-size: 24px !important;
  letter-spacing: 5px;
}

#area {
  position: relative;
  width: 776px;
  margin: auto;
  text-align: center;
}

.selectbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 50px auto;
}

.selectbox::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #d4cab9;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
  pointer-events: none;
}

.selectbox select {
  appearance: none;
  min-width: 300px;
  height: 2.8em;
  padding: .4em calc(.8em + 30px) .4em .8em;
  border: 1px solid #d4cab9;
  border-radius: 3px;
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  cursor: pointer;
}


#job {
  position: relative;
  width: 776px;
  margin: auto;
}

.job_back {
  margin-top: 30px;
}

.job_btn01,.job_btn02,.job_btn03,.job_btn04,.job_btn05,.job_btn06,.job_btn06.job_btn06,.job_btn07,.job_btn08 {
  position: absolute;
  width: 284px;
  height: 45px;
  background: #fff;
  opacity: 0;
  transition: all 0.3s;
  z-index: 30;
}

.job_btn01 {top: 118px;left: 55px;}
.job_btn02 {top: 118px;left: 435px;}
.job_btn03 {top: 252px;left: 55px;}
.job_btn04 {top: 252px;left: 435px;}
.job_btn05 {top: 386px;left: 55px;}
.job_btn06 {top: 386px;left: 435px;}
.job_btn07 {top: 519px;left: 55px;}
.job_btn08 {top: 519px;left: 435px;}

.job_btn01:hover,.job_btn02:hover,.job_btn03:hover,.job_btn04:hover,.job_btn05:hover,.job_btn06:hover,.job_btn07:hover,.job_btn08:hover {
  opacity: 0.7;
}

.job_btn_text1,.job_btn_text2,.job_btn_text3,.job_btn_text4,.job_btn_text5,.job_btn_text6,.job_btn_text7,.job_btn_text8 {
  position: absolute;
  font-size: 18px;
  letter-spacing: 5px;
  z-index: 20;
}

.job_btn_text1 {top:126px;left:177px;}
.job_btn_text2 {top:126px;left:559px;}
.job_btn_text3 {top:259px;left:177px;}
.job_btn_text4 {top:259px;left:484px;}
.job_btn_text5 {top:394px;left:142px;}
.job_btn_text6 {top:394px;left:488px;}
.job_btn_text7 {top:527px;left:130px;}
.job_btn_text8 {top:527px;left:511px;}

.job_sub_text1,.job_sub_text2,.job_sub_text3,.job_sub_text4,.job_sub_text5,.job_sub_text6,.job_sub_text7,.job_sub_text8 {
  position: absolute;
  font-size: 13px;
  letter-spacing: 3px;
}

.job_sub_text1 {top:185px;left:46px;}
.job_sub_text2 {top:185px;left:452px;}
.job_sub_text3 {top:320px;left:55px;}
.job_sub_text4 {top:320px;left:454px;}
.job_sub_text5 {top:455px;left:91px;}
.job_sub_text6 {top:455px;left:452px;}
.job_sub_text7 {top:590px;left:160px;}
.job_sub_text8 {top:590px;left:539px;}

#job_tab {
  position: relative;
  width: 776px;
  margin: 50px auto 0;
  z-index: 20;
}

#bland {
  position: relative;
  width: 776px;
  margin: 100px auto 0;
  z-index: 20;
  }

.bland_box:first-child {
    margin-top: 30px;
  }

.bland_box {
  width: 676px;
  margin: 0 auto;
  padding-top: 0;
}

.bland_box ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.bland_box ul {
  margin-top: 50px;
}

.bland_box ul li {
  position: relative;
  transition: all 0.3s;
  list-style: none;
}

.bland_box ul li:hover {
  box-shadow: 5px 6px
  6px rgba(0, 0, 0, 0.15);
	transform: translate3d( 0,-3px,0);
}
.bland_box ul li:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  font-size: 14px;
  text-align: center;
}
.bland_box ul .dummy {
  width: 212px;
}
.bland_box ul .dummy:hover {
  box-shadow: none;
  transform: translate3d( 0,0,0);
}

.bland1 li:nth-of-type(1):before {content: "うかい鳥山";}
.bland1 li:nth-of-type(2):before {content: "とうふ屋うかい";}
.bland1 li:nth-of-type(3):before {content: "kappou ukai";}

.bland2 li:nth-of-type(1):before {content: "うかい亭";}
.bland2 li:nth-of-type(2):before {content: "ル・プーレ ブラッスリーうかい";}
.bland2 li:nth-of-type(3):before {content: "グリルうかい 丸の内店";}

.bland3 li:nth-of-type(1):before {content: "アトリエうかい";}
.bland3 li:nth-of-type(2):before {content: "";}
.bland3 li:nth-of-type(3):before {content: "";}

#footer {
  width: 776px;
  margin: 100px auto;
  text-align: center;
}

#footer p {
  margin: 30px 0;
  font-size: 18px;
  line-height: 53.61px;
  letter-spacing: 3px;
}

.space_tm30 {margin-top: 30px;}
.space_tm50 {margin-top: 50px;}

.int1 {margin-left: 1.75em;}
.int2 {margin-left: 2.75em;}
.int3 {margin-left: 3.75em;}
.int4 {margin-left: 4.75em;}
.int5 {margin-left: 5.75em;}
.int6 {margin-left: 7em;}
.int7 {margin-left: 7.75em;}
.int8 {margin-left: 8.75em;}
.int9 {margin-left: 9.75em;}
.int10 {margin-left: 12.45em;}

/* tab menu */

#tabcontent{
}

#tab01,#tab02,#tab03,#tab04 {
  position: relative;
}

.tab_text_head1,.tab_text_head2,.tab_text_head3,.tab_text_head4 {
  position: absolute;
  top:100px;
  left:50px;
  font-size: 24px;
  line-height: 38.61px;
  letter-spacing: 0.25em;
}

.tab_text_body1,.tab_text_body2,.tab_text_body3,.tab_text_body4 {
  position: absolute;
  top:260px;
  left:50px;
  font-size: 18px;;
  line-height: 38.61px;
  letter-spacing: 3px;
}

.tab_link_btn {
  position: absolute;
  top: 540px;
  left: 243px;
  width: 289px;
  height: 22px;
  text-align: center;
  opacity: 1;
  transition: all 0.3s;
}

.tab_link_btn:hover {
  opacity: 0.5;
}

.tab_link_btn a {
  font-size: 17px;
  letter-spacing: 3px;
  text-decoration: none;
  color: #000;
}

.tabnav{
  margin: 30px auto 0;
  width: 100%;
  max-width: 570px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  list-style: none;
  opacity: 1;
}

.tabnav li a {
  transition: all 0.3s;
}

.tabnav li a:hover,
.tabnav li a.active{
  opacity: 0.3;
}
/* loading */
#loading{
position: absolute;
left: 50%;
top: 40%;
}
#loader-bg {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #FFF;
z-index: 1000;
}
#main-contents{
text-align: center;
margin-top: 20%;
}

/* page-top */
#page-top {
	position: fixed;
  width: 980px;
  margin: auto;
	bottom: 0px;
	right: 0;
  left: 0;
  z-index: 1;
  text-align: right;
}
#page-top a {
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0 0;
	text-align: center;
	display: block;
}
.ret_btn {
  cursor: pointer;
}

/* icon flash --------*/

.flash{
    animation: flash 1.5s infinite linear;
    -webkit-animation: flash 1.5s infinite linear;
    -moz-animation: flash 1.5s infinite linear;
}
@keyframes flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-webkit-keyframes flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-moz-keyframes flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}