@charset "utf-8";


html {
  font-size: 62.5%;
}

body {
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  background-color:#fff;
}

header h1,
header nav a,
footer h2 {
  font-family: 'Noto Serif JP', serif;
}

h2,
h3,
.global,
th,
dt {
  font-family: 'Noto Sans JP', sans-serif;
}


/* header */

header {
  background-color: #fff;
}

div.header_wrap {
  margin: 0 auto;
  width: 1136px;
  height: 43px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;

}


header .global {
  width: 1200px;
  margin: 0 auto;

}


div.visual_img {
  margin: 0 auto;
}




/*  header
------------------------------------------- */


div.header_wrap {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  background-color: #fff;

}

div.header_wrap h1 {
  width: 250px;
  height: auto;
  font-size: 2.8rem;
  color:#876238;
  line-height: 43px;
  font-weight: 900;
  background-repeat: no-repeat;
  background-size: 38px;
  background-position: 0 5px;
  padding-left: 45px;
}

div.header_wrap h1 a {
  color: #876238;
  text-decoration: none;
}

/*  nav.global
------------------------------------------- */
div.header_wrap .global {
  width: 902px;
  height: auto;
  line-height: 26px;
  margin-top: 10px;

}

div.header_wrap .global ul {
  display: flex;
  justify-content: flex-end;
}

div.header_wrap .global li a {
  display: block;
  color: #000;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0 20px;
  border-right: 1px solid #921a04;
}

div.header_wrap .global li:last-child a {
  border-right: none;
  padding-right: 0;
}

div.header_wrap .global li a:hover span {
  color: #921a04;
  border-bottom: 2px solid #921a04;
}

  /* 現在閲覧しているページをナビするための仕組み */
  /* bodyに付けられたclass名によって強調表示される箇所が変わる */
.index .global li:nth-child(1) a span,
.tool .global li:nth-child(2) a span,
.introduce .global li:nth-child(3) a span,
.step .global li:nth-child(4) a span,
.contact .global li:nth-child(5) a span {
  color: #921a04;
  border-bottom: 2px solid #921a04;
}



/*  div.visual_img
------------------------------------------- */

.visual_img {
  /* background-color: #bda366c2; */
  background-color: #c8b072;
  /* width: 1200px; */
  height: 307px;
  /* background-image: url(./images/low/room_1.jpg); */
  background-size: cover;
  height: 307px;
  
}

.tool .visual_img {
  height: 307px;
}

.tool main h2 {
  margin-top: 87px;
}

.introduce .visual_img {
  height: 307px;
}

.introduce main h2 {
  margin-top: 87px;
}

.step .visual_img {
  height: 307px;
}

.step div.content h2 {
  margin-top: 87px;
}


.contact .visual_img {
  height: 307px;
}

.contact main h2 {
  margin-top: 87px;
}



div.visual_wrapper {
  width: 1200px;
  height: 350px;
  position: relative;
  margin: 0 auto;
}

.visual_img img {
  margin: 0 auto;
  position: absolute;
  top: 0px;
  right: 10px;

}

.visual_img p {
  margin: 0 auto;
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 66px;
  left: 69px;

 
}

.visual_img strong {
  font-size: 50px;
}


/*  div.wrapper
------------------------------------------- */
.wrapper {
  width: 1200px;
  background-color: #fff;
  margin: 0 auto;
}


.fix_box {
  color: #fff;
  background-color: #303f60;
  font-size: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 28px;
  text-shadow: 2px 2px 2px #000;
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* border: 2px solid #fff; */
  width: 262px;
  text-align: center;
  padding-top: 4px;
}

.fix_box em {
  color: #c8b072;
  text-shadow: none;
}

.fix_box [ご相談は] {
  text-shadow: none;
}

/* div.visual_img .ribbon {
  position:absolute;
  bottom:8px;
  right: 27px;
  width: 400px;
  height: auto;
 
} */

.fix_box span {
  /* background-image: url(../images/free_dd.png); */
  /* background-repeat: no-repeat; */
  /* background-position: 1px 17px; */
  padding-left: 0;
  font-size: 2.3rem;
  color: #fff;
}

.fix_box .free {
  width: 24px;
  margin-right: 3px;
  padding-right: 10px;
 
  padding-right: 0;
  
  
}



/* div .visual_img .free {
  width: 28px;
  height: auto;
  position: absolute;
  top: 37px;
  left:5px;
} */

.fix_box strong {
  color: #f5ea9b;
  font-size: 2.2rem;
  text-shadow: 2px 2px 2px rgb(22, 18, 48);
}

header {
  position: sticky;
  top: 0;
  z-index: 2;
}


div .visual_img {
 z-index: 1;
}




/*  div.content
------------------------------------------- */
.content {
  margin: 40px;
}

/*  main
------------------------------------------- */


main section {
  margin-bottom: 50px;
}



main h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 30px;
  color: #c8b072;
  padding-bottom: 20px;
  margin-bottom: 70px;
  text-decoration: none;
  padding-top: 20px;
  margin-top: 87px;
}

main h3 {
  font-size: 4rem;
  margin-bottom: 3rem;
  border-bottom:2px solid #c8b072;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 30px;
  color: #876238;
  text-align: center;
 font-weight: normal;



}


main h3 em {
  font-style: italic;
  color: #c8b072;
}

div .content p {
  font-size: 17px;
  color: #876238;
}


main .tea_images {
  margin-left: 50px;
  letter-spacing: -6px;
  height: 150px;
  margin-bottom: 10px;
}

main p {

  margin-bottom: 10px;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: justify;
}

div .content aside h2 {
  font-size: 3rem;
  text-align: left;
  padding-left: 20px
}
 


/*  footer
------------------------------------------- */


.footer_wrap {
 margin: 0 auto;
  width: 1200px;
  height: 137px;
  position: relative;
}

footer .section {
  width: 600px;
  margin: 0;
}


footer {
  background-color: #e6e6e7;
  color: #000;
  padding: 20px 40px;
  color: #606060;
}



footer .local {
  width: 1200px;
  margin: 0 auto;

}

footer .local ul {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 42px;
  
}







footer h4 {
  font-size: 2.2rem;
  line-height: 33px;
  background-repeat: no-repeat;
  background-position: 0 3px;
  padding-left: 38px;
  margin-bottom: 20px;
  background-color: #e6e6e7;

}



address {
  margin-left: 40px;
  font-size: 1.4rem;
  
}

address img {
  /* background-image: url(../images/free_dial.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 28px; */
  padding-bottom: 3px;
}

/*  nav.local
------------------------------------------- */
.local {
  margin-top: 5px;
}

.local ul li {
  display: inline-block;
  text-align: right;
}

.local ul li a {
  color: #606060;
  font-size: 1.6rem;
  text-decoration: none;
  margin-left: 30px;
}

.local ul li a:hover {
  border-bottom: 1px solid #fff;
}

hr {
  height: 1px;
  background-color: #fff;
  border: none;
  margin-top: 20px;
}



small {
  display: block;
  text-align: center;
  font-size: 1.6rem;
  line-height: 40px;
  background-color: #b8a376;
  /* background-color: #887d56; */
  color: #fff;
}










dl.info {
  font-size: 1.6rem;
  border: 1px solid #978047;
  padding: 10px 20px;
  margin-left: 50px;
  height: 100px;
  overflow-y: auto;
  margin-top: 30px;
}

.info div {
  display: flex;
  justify-content: flex-start;
  border-bottom: 2px dotted #ccc;
  line-height: 24px;
  margin-bottom: 5px;
  padding: 10px 0;
}


.info dt {
  width: 9em;
  color: #876238;
}

.info dd {
  width: calc(100% - 9em);
  text-align: justify;
}

div.content h2 {
  font-size: 4rem;
  border-bottom: 4px dotted #c8b072;

  color: #c8b072;
  font-weight: normal;

  text-align: center;
  
}

.tool .visual_img p {

    font-size: 25px;
    color: #fff;
    position: absolute;
    top: 190px;
    left: 69px;
  
   
  }



.tool h3 {
  border-bottom: none;
  background-color: #978047;
  color: #fff;
  font-weight: normal;
  padding-left: 50px;
  text-align: left;
  height: 25px;
  line-height: 30px;
  font-size: 30px;
}

.tool .img_t {
  float: left;
}





.tool section li {
  font-size: 20px;
  list-style-type: none;


}

.colum p img {
  float: left;
  margin-right: 20px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);

}

.colum ul {
  margin-top: 50px;
  margin-left: 100px;
  background-color: #f3eddf;
  line-height: 34px;
  padding-top: 32px;
  height: 260px;
  padding-left: 381px;
  
}

.colum ul li {
  list-style-type: square;
  color: #876238;
}


/* table
-----------------------------------------*/
table {
  width: 800px;
  height: 500px;
  margin-left: 150px;
  border: 1px solid #bda366;
}

table th {
  width: 175px;
    font-size: 20px;
    background-color: rgb(189, 163, 102);
    color: rgb(255, 255, 255);
    text-align: right;
    border-bottom: 1px solid rgb(255, 255, 255);
    padding-right: 10px;
}

table tr:nth-child(5) th {
  border-bottom: 1px solid #bda366;
}

table td {
  font-size: 20px;
  padding: 10px 20px;
  border: 1px solid #bda366;
}

table tr:last-child td {
  text-align: center;
}


/* form
-----------------------------------------*/

.contant .visual_img {
  background-color: #bda366;
  width: 1200px;
  height: 350px;
  /* background-image: url(./images/low/room_1.jpg); */
  background-size: cover;
  position: relative;
}

.contact .visual_img img {
  position: absolute;
  top: 0px;
  right: 9.4px;

}

/* .contact .visual_img p {
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 44px;
  left: 50px;
  background-color: #2c522c;
  width: 300px;
height: 60px;
text-align: center;

 
} */




.contact .visual_img strong {
  font-size: 50px;
}




.contact h3 {
  border-bottom: 3px solid #876238;
  width: 500px;
  font-size: 30px;
  padding: 6px;
  
}




input {
  font-size: 30px;
  padding: 10px;
}

td label {
  margin-right: 20px;
  border: 1px solid #978047
}

input[type="text"] {
  width: 90%;
  border: 1px solid #978047
}

input#mail {
  margin-bottom: 12px;
  border: 1px solid #978047
}

select {
  font-size: 20px;
  padding: 5px;

}

textarea {
  font-size: 20px;
  width: 100%;
  height: 350px;
  padding: 5px;
  box-sizing: border-box;
  resize: none;
  vertical-align: bottom;
  border: 1px solid #978047;
}

.send input {
  width: 200px;
  background-color: #c8b072;
  border:1px solid #bda366;
  color: #fff;
}

/* .catalog .visual_img {
  width: 100%;
  height: 160px;
  background-image: url(../images/visual_img_03.png);
  background-size: cover;
} */

/* .showcase
-----------------------------------------*/
.introduce .visual_img p {
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 37px;
  left: 59px;

}

.showcase {
  height: 1900px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  align-items: stretch;
  /* margin-left: 30px; */

  margin-bottom: 10px;
}

.showcase section {
  width: calc((100% / 3) - 20px);
  text-align: center;
  margin-bottom: 40px;
}

.showcase::after {
  content: "";
  display: block;
  width: calc((100% / 3) - 20px);
}

.line {
  width: 1px;
  background-color: #b8a376;
}

.showcase h3 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 30px;
  background-color: #c8b072;
  color: #fff;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: none;
  margin-top: 20px;
}


.showcase h4 {
  font-size: 2rem;
  font-weight: normal;
  border-bottom: 2px solid #c8b072;
  color: #bda366;
  
}



.showcase p {
  margin: 20px;
}

.catalog p.refer {
  margin-top: 0;
  margin-bottom: 0;
}

/* step
-----------------------------------------*/






.step h3 {
  font-size: 3rem;
  margin-top:5rem;
  margin-bottom: 2rem;
  border-bottom: 3px solid #b8a376;
  border-left: 8px solid #b8a376;
  font-weight: normal;
  padding-left: 20px;
  padding-bottom: 5px;
  text-shadow:1px 1px 0.5px #ccc;
  color: #876238;
  

}

.step_1 {
  margin-bottom: 100px;
}

.step_1 p {
  margin-top: 3rem;

}

.step_1 p em {
  font-weight: bold;
} 

.step_1 strong {
  font-weight: bold;
  text-decoration: underline;
  font-size: 2rem;
}


div.box_01,
div.box_02,
div.box_03,
div.box_04,
div.box_05 {
  background-color:#f3eddf;
  color: #978047;
  padding: 20px 30px 10px 30px;
}

div.box_outer_odd,
div.box_outer_even 
{
  position: relative;
  height: 370px;
}

div.box_01 {
  position: absolute;
  right: 0;
  bottom: 20px;
  width: 600px;
  height: 230px;
  font-size: 14px;
}


div.box_02 {
  position: absolute;
  left: 0;
  bottom: 112px;
  width: 600px;
  height: 230px;
  font-size: 14px;
}

.img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 479px;
  height: 320px;
  font-size: 14px;
}

div.box_03
{
  position: absolute;
  right: 0;
  bottom: 71px;
  width: 600px;
  height: 230px;
  font-size: 14px;
}


.img_3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 479px;
  height: 320px;
  font-size: 14px;
}

div.box_04 {
  position: absolute;
  left: 0;
  bottom: 115px;
  width: 600px;
  height: 230px;
  font-size: 14px;
}

div.box_05
{
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 600px;
  height: 230px;
  font-size: 14px;
}



/* div.box_outer_odd {
  position: relative;

}

div.box_outer_even .img {
 padding: 10px;
 margin: 10px;
 background-color: red;
 width: 700px;
 text-align: right;
 
}

div.box_02,
div.box_04 {
  width: 600px;
  background-color: yellow;
  
} */