@charset "UTF-8";
/*--------------------------------------------

----------------------------------------------*/
@media screen and (min-width: 1000px) {
.sp{
display: none;
}
.pc{
display: block;
}
span.pc,
img.pc{
display: inline;
}
}
@media screen and (max-width: 1000px) {
.pc{
display: none;
}
.sp{
display: block;
}
span.sp,
img.sp{
display: inline;
}
}

/*--------------------------------------------

----------------------------------------------*/

.fadeIn {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadeIn {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}


/*--------------------------------------------

----------------------------------------------*/
#index-main{
  position: relative;
  z-index: 0;
  width: 100%;
  background: none;
  text-align: right;
  padding: 100px 0 0;
  background: url("https://www.re-set.ne.jp/masuzen/img202210/body_head.gif") repeat-x center top;
}
#index-main img{
position: relative;
  z-index: 10;
width: 86%;
}

@media screen and (max-width: 800px) {
#index-main{
  padding: 120px 0 0;
}
#index-main img{

}
}

#index-main a{
  color: #fff;
}
#index-main .nav{
  position: absolute;
  left: 5%;
  top: 6%;
  overflow: hidden;
}
#index-main .nav li{
  margin: 0 0 1em;
  text-shadow: 0 2px 4px #000,0 1px 7px rgba(0,0,0, 0.4);
}
#index-main .nav li:before{
content: "-";
margin: 0 3px 0 0;
}

/*
----------------------------------------------*/
#index-main .head-tel{
  position: absolute;
  left: 5%;
  bottom: 84px;
  font-size: 14px;
  width: 50%;
  max-width: 286px;
  letter-spacing: 0.02em;
  text-align: left;
  text-shadow: 0 2px 4px #000;
}

@media screen and (max-width: 800px) {
#index-main .head-tel{
  bottom: 150px;
  width: 70%;
  max-width: 70%;
  font-size: 14px;
  text-align: center;
}
}
/*
----------------------------------------------*/
#index-main .scroll{
  position: absolute;
  left: 50%;
  bottom: 0;
  max-width: 44px;
  letter-spacing: 0.02em;
  text-align: left;
}




/*--------------------------------------------

----------------------------------------------*/
#about{
clear: both;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
}
#about .container{
clear: both;
width: 68%;
max-width: 1300px;
margin: 0 auto;
padding: 100px 0 500px;
position: relative;
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 800px) {
#about{
z-index: 1;
}
#about .container{
padding: 2em 0 27em;
}
}
#about h2{
position: absolute;
left: 0;
top: 110px;
width: 13%;
max-width: 160px;
margin: 0;
padding: 0 0 45px;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.2em;
display: flex;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
align-items: center;
background: url("https://www.re-set.ne.jp/masuzen/img202210/top_title_line.gif") no-repeat center bottom;
}
@media screen and (max-width: 800px) {
#about h2{
position: relative;
left: auto;
top: 2em;
margin: 0 18% 0 auto;
font-size: 16px;
}
}
/*
----------------------------------------------*/

#about .text{
  width: 70%;
  margin-left: 18%;
  padding-top: 50px;
  line-height: 2;
}
#about .text h3{
font-size: 28px;
font-weight: normal;
}

@media screen and (max-width: 800px) {
#about .text{
  width: 100%;
  margin-left: 0;
  padding-top: 2em;
  z-index: 1;
}
#about .text h3{
font-size: 18px;
}
}
/*
----------------------------------------------*/
#about .text202212{
clear: both;
max-width: 560px;
margin: 100px 0 0;
padding: 1em;
border: 1px solid #c0b6a7;
}
#about .text202212 h4{
font-size: 20px;
margin: 0 0 0.3em;
font-weight: normal;
}
@media screen and (max-width: 1750px) {
#about .text202212{
max-width: 100%;
}
}
@media screen and (max-width: 1366px) {
#about .text202212{
margin: 50px 0 0;
}
}
@media screen and (max-width: 1000px) {
#about .text202212{
margin: 2em 0 0;
}
#about .text202212 h4{
font-size: 16px;
}
}
/*
----------------------------------------------*/
#about .img1{
position: absolute;
top: 0;
left: 0;
width: 14%;
max-width: 273px;
margin: 0;
padding: 0;
z-index: 1;
}
#about .img2{
position: absolute;
top: 210px;
right: 17.8%;
width: 20.8%;
max-width: 399px;
margin: 0;
padding: 0;
z-index: 1;
}
#about .img3{
position: absolute;
right: 0;
bottom: 0;
width: 7.7%;
max-width: 148px;
margin: 0;
padding: 0;
z-index: 1;
}
@media screen and (max-width: 1700px) {
#about .img2{
right: 10%;
}
}
@media screen and (max-width: 1380px) {
#about .img2{
right: 8%;
}
}
@media screen and (max-width: 1280px) {
#about .img2{
right: 5%;
}
}
@media screen and (max-width: 800px) {
#about .img1{
top: 2em;
width: 26%;
}
#about .img2{
top: auto;
bottom: 5em;
right: 2%;
width: 52%;
}
#about .img3{
right: auto;
left: 8%;
width: 23%;
}
}


/*--------------------------------------------

----------------------------------------------*/
#menu{
clear: both;
width: 100%;
overflow: hidden;
position: relative;
margin-top: -260px;
background: url("https://www.re-set.ne.jp/masuzen/img202210/top_menu_body.gif") repeat-x center center;
}
@media screen and (max-width: 800px) {
#menu{
margin-top: -2em;
background-size: 100% 90%;
background-position: center top;
z-index: 0;
}
}
#menu .container{
clear: both;
width: 68%;
max-width: 1300px;
margin: 0 auto;
padding: 330px 0 400px;
position: relative;
}
@media screen and (max-width: 800px) {
#menu .container{
width: 80%;
padding: 5em 0 42em;
}
}

#menu h2{
position: absolute;
left: 51.5%;
top: 260px;
width: 13%;
max-width: 160px;
margin: 0;
padding: 0 0 45px;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.2em;
display: flex;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
align-items: center;
background: url("https://www.re-set.ne.jp/masuzen/img202210/top_title_line.gif") no-repeat center bottom;
}
@media screen and (max-width: 800px) {
#menu h2{
position: absolute;
left: 47%;
top: 5em;
font-size: 16px;
}
}
@media screen and (max-width: 480px) {
#menu h2{
position: relative;
left: auto;
top: 0;
margin: 0 18% 0 auto;
font-size: 16px;
}
}
/*
----------------------------------------------*/
#menu .text{
width: 36%;
max-width: 472px;
margin: 0 0 0 auto;
}
#menu .text h3{
font-size: 28px;
font-weight: normal;
}

@media screen and (max-width: 800px) {
#menu .text{
width: 42%;
}
#menu .text h3{
font-size: 18px;
}
}

@media screen and (max-width: 480px) {
#menu .text{
clear: both;
width: 100%;
margin: 0 auto;
}
}



/*
----------------------------------------------*/
#menu .link{
width: 36%;
margin:70px 0 0;
}
#menu .link a{
max-width: 170px;
display: block;
padding: 0.5em;
position: relative;
box-sizing: border-box;
background: url("https://www.re-set.ne.jp/masuzen/img202210/link1.svg") no-repeat right center;
}
#menu .link a:hover{
opacity: 1;
color: #8b8887;
}
@media screen and (max-width: 1366px) {
#menu .link a{
background-size: auto 1em;
}
}
@media screen and (max-width: 1000px) {
#menu .link{
width: 36%;
margin:3em 0 0;
}
#menu .link a{
background-size: auto 1em;
}
}
@media screen and (max-width: 800px) {
#menu .link{
margin:2em 0 0;
}
#menu .link a{
}
}
/*
----------------------------------------------*/
#menu .img1{
position: absolute;
top: 0;
left: 0;
width: 48%;
max-width: 919px;
margin: 0;
padding: 0;
z-index: 1;
}
#menu .img2{
position: absolute;
right: 15%;
bottom: 0;
width: 13%;
max-width: 251px;
margin: 0;
padding: 0;
z-index: 1;
}
#menu .img3{
position: absolute;
right: 0;
bottom: 5em;
width: 13%;
max-width: 251px;
margin: 0;
padding: 0;
z-index: 1;
}

@media screen and (max-width: 800px) {
#menu .img1{
width: 92%;
top: auto;
bottom: 15em;
}
#menu .img2{
width: 50%;
right: 0;
bottom: 0;
}
#menu .img3{
width: 50%;
right: auto;
left: 0;
bottom: 0;
}
}
@media screen and (max-width: 480px) {
#menu .img2{
}
}

/*--------------------------------------------

----------------------------------------------*/
#access{
clear: both;
width: 100%;
overflow: hidden;
position: relative;
margin-top: -100px;
padding: 70px 0 100px;
}
@media screen and (max-width: 800px) {
#access{
margin-top: -100px;
padding: 150px 0 55px;
}
}
#access .container{
clear: both;
width: 68%;
max-width: 550px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 800px) {
#access .container{
clear: both;
width: 80%;
max-width: 550px;
margin: 0 auto;
position: relative;
}
}
#access h2{
font-size: 26px;
font-weight: normal;
text-align: center;
}
@media screen and (max-width: 800px) {
#access h2{
font-size: 16px;
}
}

/*
----------------------------------------------*/
#access .outline{
  width: 100%;
  text-align: left;
}
#access .outline table{
  border-collapse:collapse; 
  border-spacing:0; 
}
#access .outline table th,
#access .outline table td{
padding: 0.8em 0;
border-bottom: 1px solid #c0b6a7;
font-weight: 400;
vertical-align: top;
}
#access .outline table th{
width: 22%;
min-width: 4.5em;
max-width: 110px;
}
#access .outline table td .small{
  font-size: 87%;
}
@media screen and (max-width: 1280px) {
#access .outline table{
  margin: 0 auto;
}
}
@media screen and (max-width: 800px) {
#access .outline{
  float: none;
  width: 100%;
  margin-top: 1em;
}
}
@media screen and (max-width: 480px) {
#access .outline table th,
#access .outline table td{
font-size: 15px;
}
}
@media screen and (max-width: 380px) {
#access .outline table th,
#access .outline table td{
font-size: 14px;
}
}
/*
----------------------------------------------*/
#access .img{
position: absolute;
top: 144px;
left: 14%;
width: 14%;
max-width: 268px;
margin: 0;
padding: 0;
z-index: 1;
}

@media screen and (max-width: 1280px) {
#access .img{
width: 12%;
}
}

@media screen and (max-width: 800px) {
#access .img{
position:relative;
top: 0;
left: auto;
width: 50%;
margin: 0 auto;
display: none;
}
}

/*--------------------------------------------

----------------------------------------------*/
#accessmap{
clear: both;
overflow: hidden;
}
#accessmap .map{
float: left;
width: 50%;
}
#accessmap .img{
float: left;
width: 50%;
}
#accessmap iframe{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
@media screen and (max-width: 1800px) {
#accessmap .map,
#accessmap .img{
max-height: 423px;
}
}
@media screen and (max-width: 1750px) {
#accessmap .map,
#accessmap .img{
max-height: 410px;
}
}
@media screen and (max-width: 1740px) {
#accessmap .map,
#accessmap .img{
max-height: 407px;
}
}
@media screen and (max-width: 1720px) {
#accessmap .map,
#accessmap .img{
max-height: 403px;
}
}
@media screen and (max-width: 1700px) {
#accessmap .map,
#accessmap .img{
max-height: 400px;
}
}
@media screen and (max-width: 1690px) {
#accessmap .map,
#accessmap .img{
max-height: 397px;
}
}
@media screen and (max-width: 1660px) {
#accessmap .map,
#accessmap .img{
max-height: 390px;
}
}
@media screen and (max-width: 1640px) {
#accessmap .map,
#accessmap .img{
max-height: 384px;
}
}
@media screen and (max-width: 1620px) {
#accessmap .map,
#accessmap .img{
max-height: 380px;
}
}
@media screen and (max-width: 1610px) {
#accessmap .map,
#accessmap .img{
max-height: 376px;
}
}
@media screen and (max-width: 1600px) {
#accessmap .map,
#accessmap .img{
max-height: 375px;
}
}
@media screen and (max-width: 1590px) {
#accessmap .map,
#accessmap .img{
max-height: 374px;
}
}
@media screen and (max-width: 1580px) {
#accessmap .map,
#accessmap .img{
max-height: 370px;
}
}
@media screen and (max-width: 1570px) {
#accessmap .map,
#accessmap .img{
max-height: 367px;
}
}
@media screen and (max-width: 1550px) {
#accessmap .map,
#accessmap .img{
max-height: 364px;
}
}
@media screen and (max-width: 1536px) {
#accessmap .map,
#accessmap .img{
max-height: 360px;
}
}
@media screen and (max-width: 1520px) {
#accessmap .map,
#accessmap .img{
max-height: 355px;
}
}
@media screen and (max-width: 1510px) {
#accessmap .map,
#accessmap .img{
max-height: 352px;
}
}
@media screen and (max-width: 1490px) {
#accessmap .map,
#accessmap .img{
max-height: 350px;
}
}
@media screen and (max-width: 1480px) {
#accessmap .map,
#accessmap .img{
max-height: 347px;
}
}
@media screen and (max-width: 1470px) {
#accessmap .map,
#accessmap .img{
max-height: 345px;
}
}
@media screen and (max-width: 1460px) {
#accessmap .map,
#accessmap .img{
max-height: 340px;
}
}
@media screen and (max-width: 1430px) {
#accessmap .map,
#accessmap .img{
max-height: 336px;
}
}
@media screen and (max-width: 1420px) {
#accessmap .map,
#accessmap .img{
max-height: 334px;
}
}
@media screen and (max-width: 1410px) {
#accessmap .map,
#accessmap .img{
max-height: 330px;
}
}
@media screen and (max-width: 1390px) {
#accessmap .map,
#accessmap .img{
max-height: 327px;
}
}
@media screen and (max-width: 1380px) {
#accessmap .map,
#accessmap .img{
max-height: 323px;
}
}
@media screen and (max-width: 1366px) {
#accessmap .map,
#accessmap .img{
max-height: 320px;
}
}
@media screen and (max-width: 1350px) {
#accessmap .map,
#accessmap .img{
max-height: 316px;
}
}
@media screen and (max-width: 1340px) {
#accessmap .map,
#accessmap .img{
max-height: 312px;
}
}
@media screen and (max-width: 1310px) {
#accessmap .map,
#accessmap .img{
max-height: 308px;
}
}
@media screen and (max-width: 1300px) {
#accessmap .map,
#accessmap .img{
max-height: 303px;
}
}
@media screen and (max-width: 1280px) {
#accessmap .map,
#accessmap .img{
max-height: 297px;
}
}

@media screen and (max-width: 1250px) {
#accessmap .map,
#accessmap .img{
max-height: 294px;
}
}
@media screen and (max-width: 1230px) {
#accessmap .map,
#accessmap .img{
max-height: 285px;
}
}
@media screen and (max-width: 1220px) {
#accessmap .map,
#accessmap .img{
max-height: 283px;
}
}
@media screen and (max-width: 1200px) {
#accessmap .map,
#accessmap .img{
max-height: 280px;
}
}
@media screen and (max-width: 1180px) {
#accessmap .map,
#accessmap .img{
max-height: 277px;
}
}
@media screen and (max-width: 1170px) {
#accessmap .map,
#accessmap .img{
max-height: 273px;
}
}
@media screen and (max-width: 1150px) {
#accessmap .map,
#accessmap .img{
max-height: 270px;
}
}
@media screen and (max-width: 1140px) {
#accessmap .map,
#accessmap .img{
max-height: 267px;
}
}
@media screen and (max-width: 1130px) {
#accessmap .map,
#accessmap .img{
max-height: 265px;
}
}
@media screen and (max-width: 1120px) {
#accessmap .map,
#accessmap .img{
max-height: 260px;
}
}
@media screen and (max-width: 1100px) {
#accessmap .map,
#accessmap .img{
max-height: 258px;
}
}
@media screen and (max-width: 1090px) {
#accessmap .map,
#accessmap .img{
max-height: 254px;
}
}
@media screen and (max-width: 1070px) {
#accessmap .map,
#accessmap .img{
max-height: 250px;
}
}
@media screen and (max-width: 1050px) {
#accessmap .map,
#accessmap .img{
max-height: 247px;
}
}
@media screen and (max-width: 1030px) {
#accessmap .map,
#accessmap .img{
max-height: 240px;
}
}
@media screen and (max-width: 1000px) {
#accessmap .map,
#accessmap .img{
float: none;
width: 100%;
}
#accessmap iframe{
height: 280px;
}
}





/*--------------------------------------------

----------------------------------------------*/
#news-link{
clear: both;
overflow: hidden;
padding: 100px 0;
}
@media screen and (max-width: 800px) {
#news-link{
padding: 3em 0;
}
}

#news-link h2{
width: 13%;
max-width: 160px;
margin: 0 auto 3em;
padding: 0 0;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.2em;
display: flex;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
align-items: center;
}
@media screen and (max-width: 800px) {
#news-link h2{
font-size: 16px;
margin-bottom: 2em;
}
}

/*
----------------------------------------------*/
#news-link .link{
}
#news-link .link a{
width: 60%;
max-width: 436px;
margin: 0 auto;
display: block;
padding: 1.5em 1em;
color: #fff;
line-height: 2;
text-align: center;
background: #000;
}
#news-link .link a img{
max-height: 1.1em;
margin-right: 1em;
vertical-align: middle;
}




/*--------------------------------------------

----------------------------------------------*/
#shopping-link{
clear: both;
overflow: hidden;
}
@media screen and (max-width: 800px) {
#shopping-link{
}
}
/*
----------------------------------------------*/
#shopping-link .link{
background: #000;
background-size: 100% 100%;
}
#shopping-link .link a{
position: relative;
display: block;
color: #fff;
}
#shopping-link .link a img{
width: 100%;
}
#shopping-link .link a .en{
position: absolute;
top: 40%;
width: 100%;
text-align: center;
display: block;
font-size: 34px;
letter-spacing: 0.5em;
}
#shopping-link .link a .jp{
position: absolute;
top: 55%;
width: 100%;
text-align: center;
display: block;
font-size: 16px;
letter-spacing: 0.2em;
}
@media screen and (max-width: 800px) {
#shopping-link .link a .en{
top: 30%;
font-size: 20px;
}
#shopping-link .link a .jp{
top: 50%;
font-size: 14px;
}
}