* {
  font-size: 62.5%;
  font-weight: lighter;
}

body {
  box-sizing: border-box;
  color: #696969;
  font-family: 'Josefin Sans', 'Gill Sans', sans-serif ;
  min-height: 100vh;
  position: relative;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

ul {
  list-style: none;
}

 #header a {
  display: block;
  text-decoration: none;
  color: #696969;
  transition: all, .5s;
}

#header a:hover {
  opacity: 0.5;
}

dt, dd {
  font-size: 1.4rem;
  letter-spacing: 0.2rem;
}

.site_title a {
  display: block;
  line-height: 1;
  width: 100px;
}

.wrapper {
  /* border: 1px solid blue; */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}





/* ----------------
-------HEADER------
------------------- */

/*
「position: fixed;」でヘッダーを固定し、「z-index: 10;」で前面に表示
※他のコンテンツでpositionをrelative、absolute、fixedのいずれかに
設定している場合は、z-indexの数値が大きい方が前面に表示される
*/

#header {
  /* border: 1px solid pink; */
  width: 100%;
  height: 80px;
  display: flex;
  padding: 0 3%;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
}

.back {
  width: 100%;
  height: 80px;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  opacity: 0.5;
}

#navi {
  display: flex;
  align-items: center;
}

#navi .ec_link  {
  padding: 10px;
  border: 1px solid #696969;
  border-radius: 30px;
  margin-right: 10px;
}

.navi_menu {
  display: flex;
  align-items: center;
}

.navi_menu .word {
  padding-right: 20px;
}

.navi_menu .word a {
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
}

.site_title,
.navi_menu,
.ec_link {
  z-index: 5;
}

.section-visual img{
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.section-visual {
  margin: 50px 0 50px 0;
}



/* -------------------
-----メイン ---------
------------------- */


/* ----メイン 共通----- */

.inner {
  display: flex;
  align-items: center;
  padding: 15px 2%;
}

.section-title {
  font-size: clamp(3rem, 4vw, 5rem);
  letter-spacing: 0.4rem;
}

.line {
  background-color: #292929;
  width: 100%;
  height: 1px;
  margin-left: 10px;
}


.hotels img,
.others img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.others .sherie img {
  object-position: 66% 34%;
}

.hotels .france img {
  object-position: 52% 48%;
}

.category {
  grid-area: titl;
  border: 1px solid #292929;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category_title_1 {
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  letter-spacing: 0.4rem;
  padding-top: 10px;
}


.category_title_2 {
  font-size: clamp(1.7rem, 4vw, 4rem);
  letter-spacing: 0.1rem;
  padding-top: 5px;
}



.caption {
 font-size: 2.5rem;
 /* font-weight: normal; */
 text-align: center;
 letter-spacing: 0.3rem;
 color: #fff;
 border: 0.5px solid #fff;
 border-radius: 5px;
 padding: 8px 15px 5px 15px;
}

.mask {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 background-color: rgba(0, 0, 0, .6);
 transition: all .8s ease;
}

.mask:hover {
 opacity: 1;
}


/* ----- WORK ----- */


#works {
  padding: 150px 5px 0 5px;
}


.hotels {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(8, 160px);
  gap: 5px;
  grid-template-areas: 
  "titl titl fran fran fran fran"
  "repl repl fran fran fran fran"
  "repl repl fran fran fran fran"
  "repl repl ayun ayun ayun ayun"
  "repl repl ayun ayun ayun ayun"
  "repl repl ayun ayun ayun ayun"
  "row row row fanf fanf fanf"
  "row row row fanf fanf fanf"
  ;
}


.france {
  grid-area: fran;
  position: relative;
}

.replace {
  grid-area: repl;
  position: relative;
}

.ayung {
  grid-area: ayun;
  position: relative;
}

.row {
  grid-area: row;
  position: relative;
}

.fanfa {
  grid-area: fanf;
  position: relative;
}

/* ----- WORK ショップ/レストラン ----- */

.others {
  padding-top: 75px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 180px);
  gap: 5px;
  grid-template-areas: 
  "fore fore fore titl titl titl"
  "fore fore fore sodo sodo sodo"
  "fore fore fore sodo sodo sodo"
  "burg burg burg sodo sodo sodo"
  "wine wine sher sher sher sher"
  "wine wine sher sher sher sher"
  "darl darl darl ikari ikari ikari"
  "darl darl darl ikari ikari ikari"
  "darl darl darl ikari ikari ikari"
  ;
}

.foresta {
  grid-area: fore;
  position: relative;
}

.sodos {
  grid-area: sodo;
  position: relative;
}

.burgers {
  grid-area: burg;
  position: relative;
}

.wine {
  grid-area: wine;
  position: relative;
}

.sherie {
  grid-area: sher;
  position: relative;
}

.darling {
  grid-area: darl;
  position: relative;
}

.ikari {
  grid-area: ikari;
  position: relative;
}


/* ------------
-----WORK Flow----
--------------- */

#work-flow {
  padding-top: 150px;
}





#work-flow .flow .step {
  padding: 0 5px;
  display: flex;
  align-items: center;
}

#work-flow .flow .number {
  background-color: #dcdcdc;
  margin-right: 10px;
  /* border: 1px solid pink; */
  border-radius: 10px;
  width: 25%;
  height: 140px;
  text-align: center;
  position: relative;
}

#work-flow .flow .number h3 {
  width: 100%;
  position: absolute;
  font-size: clamp(1.5rem, 3.5vw, 4rem);
  font-weight: normal;
  letter-spacing: 0.2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#work-flow .flow .text {
  border: 1px solid #a9a9a9;
  border-radius: 10px;
  width: 75%;
  height: 140px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#work-flow .flow .text h4 {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.1rem;
  font-weight: bold;
}

#work-flow .flow .text p {
  font-size: clamp(0.8rem, 1.3vw, 1.3rem);
  line-height: clamp(1.5rem, 2vw, 2rem);
}

#work-flow .flow .arrow {
  margin: 10px auto 25px auto;
  /* display: inline-block; */
  width: 30px;
  height: 30px;
  border-bottom: 6px solid #a9a9a9;
  border-right: 6px solid #a9a9a9;
  transform: rotate(45deg);
}


/* ------------
-----ABOUT----
--------------- */

#about {
  padding-top: 150px;
}
#about .company  {
  display: flex;
  align-items: center;
  margin-top: 80px;
}

#about .company .logo {
  width: 50%;
  text-align: center;
}

#about .company .logo img {
  width: 250px;
}

#about .company .info {
  width: 50%;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
}

#about .company .info dt {
  width: 30%;
  margin-top: 8px;
  font-family: sans-serif ;
}

#about .company .info dt:first-of-type {
  margin-top: 0;
}

#about .company .info dd {
  width: 70%;
  margin-top: 8px;
  font-family: sans-serif ;
}

#about .company .info dd:first-of-type {
  margin-top: 0;
}

#about .company .info .add {
  margin-left: 30%;
  margin-top: 0;
}

#about .company .info .mail {
  line-height: 1;
}

/* ------------
-----FOOTER----
--------------- */


#footer .copyright {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  padding: 200px 0 20px 0;
  text-align: center;
}


/* ---------
-----SP-----
------------ */


@media screen and (max-width: 750px) {

  
  
  .navi_menu {
    flex-direction: column;
    width: 150px;
    margin-bottom: 15px;
  }
  
  .navi_menu .word {
    padding-right: 0;
  }
  
  .navi_menu li {
    margin-bottom: 25px;
  }
  
  .ec_link {
    width: 100px;
    background-color: #fff;
    text-align: center;
    opacity: 0.7;
  }

  .section-visual img{
    height: 250px;
  }
  
  /*
  ハンバーガーメニュー
  メニューが閉じている時は、「left: -300px;」で画面左に隠し、
  「opacity: 0;」で非表示にしている
  */

  #navi {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    top: 0;
    left: -300px;
    width: 200px;
    color: #fff;
    padding: 36px 100px;
    transition: all 0.5s;
    z-index: 20;
    opacity: 0;
  }

  #navi a {
    color: #fff;
  }

/*
ハンバーガーメニュー
メニューが開いている時は、「left: 0;」「opacity: 1;」で
画面左に表示する
*/
.open #navi {
  left: 0;
  opacity: 1;
}

.toggle_btn {
  width: 30px;
  height: 30px;
  position: relative;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 20;
}

/*
ハンバーガーメニューの線の設定（メニューが閉じている時）
*/
.toggle_btn span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all 0.5s;
}

/*
1本目の線の位置を設定
*/
.toggle_btn span:nth-child(1) {
  top: 10px;
}

/*
2本目の線の位置を設定
*/
.toggle_btn span:nth-child(2) {
  bottom: 10px;
}

/*
ハンバーガーメニューの線の設定（メニューが開いている時）
線の色を白に変更
*/
.open .toggle_btn span {
  background-color: #fff;
}

/*
1本目の線を-45度回転
*/
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}
/*
2本目の線を45度回転
*/
.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translateY(-4px) rotate(45deg);
  transform: translateY(-4px) rotate(45deg);
}

#mask {
  display: none;
  transition: all 0.5s;
}

/*
メニューを開いている時は、全体を黒背景にする
*/
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 10;
  cursor: pointer;
}


/* ----------------------------
-------メイン ホテル------
------------------------------- */

.caption {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 0.2rem;
  color: #fff;
}



/* ---------------
-------WORKFLOW------
------------------ */

#work-flow .flow .number {
  margin-right: 5px;
}


/* ---------------
-------ABOUT------
------------------ */


#about .company  {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}

#about .company .logo {
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
}

#about .company .logo img {
  width: 200px;
}


#about .company .info {
  width: min(95%, 300px);
}


#about .company .info dt,
#about .company .info dd {
  font-size: 1.2rem;
}

  
}


@media screen and (max-width: 500px) {
  .caption {
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 0.1rem;
    color: #fff;
    padding: 8px 8px 5px 8px;
  }

  #work-flow .flow .text {
    height: 150px;
  }

  #about .company .info dt,
  #about .company .info dd {
  font-size: 1rem;
  }

}