@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Noto+Serif+JP:wght@400;500;600&display=swap');
@import url('icon/style.css');
@font-face {
  font-family: 'Univers LT std';
  src:
    url('UniversLTStd-ThinUltraCn.otf') format('truetype'),
    url('UniversLTStd-ThinUltraCn.woff') format('woff'),
    url('niversLTStd-ThinUltraCn.svg') format('svg'),
    url('niversLTStd-ThinUltraCn.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/
body,html{
  width:100%;
  height: 100%;
}
:root{
  --mainColor:#863927;
  --subColor:#6EB0E9;
  --darkColor:#043361;
  --spHeaderHeight:70px;
  --pcHeaderHeight:75px;
}

.en{font-family: 'Univers LT std', sans-serif;}
.red{color:var(--mainColor);}
.inner{
  max-width: 1300px;
  margin:auto;
  padding:0 2rem;
}
#main{
background:white;
position: relative;
/* overflow: hidden; */
}

.contents{
  position: relative;
  margin:auto;
  z-index: 10;
  background:white;
  overflow: hidden;
  padding:5% 0;
}



/*====================================================================
   header
/*==================================================================*/
header{
  position: sticky;
  display: block;
  top:0;
  left:0;
  width:100%;
  height: auto;
  z-index: 888;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, .16) ;
  background: white;
}
#header{
  width:100%;
  max-width: 1900px;
  margin:auto;
  height: var(--pcHeaderHeight);
  padding:0 2em ;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#header .siteName{
  background:black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  left:2em;
  width:150px;
  height: 150px;
  max-height: none;
  z-index: 70;
}

/*---------- globalmenu ----------*/
#nav-drawer{
  display: none;
}
#globalmenu{
  width:65%;
  max-width: 870px;
}

#menu ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width:100%;
  margin:auto;
  list-style: none;
  padding:.5em;
}
#menu ul li a {
	display: block;
  font-size:clamp(14px,1.3vw,18px);
  position: relative;
  color:#000;
  position: relative;
  padding:.5em 1.3em;
}
#menu ul li a:hover{
  color:var(--mainColor);
}
#menu ul li{
  position: relative;
}
#menu ul li:after{
  content:"";
  height: 1.5em;
  width:1px;
  background:black;
  display: inline-block;
  position: absolute;
  right:0;
  top:50%;
  transform: translate(0,-50%);
}
#menu ul li:nth-last-child(1):after{
  display: none;
}
/* Toggle Button */

#nav-drawer {
  width:var(--spHeaderHeight);
	height:var(--spHeaderHeight);
  text-align: center;
  margin:0 0 0 auto;
}
.toggle_btn{
  position: relative;
  height: 100%;
  width: 100%;
  cursor:pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  justify-content: center;

}
.toggle_btn .in{
  position: relative;
  height: 34.3%;
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  align-content:space-around;
  justify-content: center;
}

.hanbargar{
  display: block;
  height: 3px;
  background-color:black;
  width:100%;
	margin:0px auto;
  position: relative;
	transition:.3s all ease;
}

#header.mopen .hanbargar.h02{
  display: none;
}
#header.mopen .hanbargar.h01{
  transform:translate(-0px,6px) rotate(45deg) ;
}
#header.mopen .hanbargar.h03{
  transform:translate(-0px,-6px) rotate(-45deg) ;
}

/*/// title //////*/
.title{
  position: relative;
  text-align: center;
  width:fit-content;
  margin:3em auto;
  padding-bottom: .1em;
}
.title h3{
  font-weight: 500;
  font-size:clamp(1.4em,3.8vw,2.15em);
}
.title .en{
  font-weight: normal;
  font-size:clamp(40px,6vw,94px);
  letter-spacing: .1em;
  line-height: 1;
  display: block;
  margin-bottom: 1em;
}
.title span.txt{
  display: block;
  margin:2em 0;
  line-height: 1.5;
}

.title:after{
  content:"";
  display: block;
  background:#D4D5DF;
  width:3em;
  height: 5px;
  position: absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%,0);
}
h4.ti {
  text-align: left;
}
h4.ti .en{
  font-size:clamp(2.6em,5.5vw,5em);
  color:#01B53D;
  letter-spacing: .1em;
  line-height: 1;
  font-weight: normal;
}
p.read{
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}

.shadowbox{
  background:white;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  padding:2.5rem;
}
.btn a{
  display: inline-block;
  width:fit-content;
  background:var(--mainColor);
  padding:.7em 1.7em;
  position: relative;
  color:white;
  font-weight: 700;
  text-align: center;
  font-size:clamp(16px,3vw,1.2rem);
  margin:1.5rem auto;
}
.btn a:hover{
  background:var(--subColor);
}
.next_btn a{
  padding-right:40px;
  border-radius: 50px;
}
.next_btn a:after{
  content:"\e913";
  font-family: 'icomoon';
  font-size:1rem;
  position: absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
}

.addimage{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 50vh;
  position: relative;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
}

.addimage.bg01{
  background-image:url(../../img/bg01.jpg);
}

.addimage.bg02{
  background-image:url(../../img/bg02.jpg);
  height: auto;
}
/* .addimage {
    background-attachment: scroll ;
} */

.addimage.bg01 .text{
  position: relative;
  z-index: 2;
}
.addimage.bg02 .text{
  background:rgba(0,0,0,.5);
  padding:3em 4em;
  max-width: 600px;
  color:white;
  text-align: left;
  position: relative;
  z-index: 2;
}

.addimage.bg02 .text .imgs{
  width: 80%;
  margin:0 auto 2em;
}
.addimage.bg02 .text h3{
  font-size:clamp(1.3em,3.3vw,2em);
  line-height: 1.6;
  font-weight: 500;
}

/*====================================================================
    02 Top
/*==================================================================*/
p{
  margin:1em 0;
}
p.mini{
  font-size:.8em;
  line-height: 1.3;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-**/
.keyvisual_img{
  width:100%;
  height: 100%;
  position:fixed;
  top:0;
  left:0;
  z-index: 0;
}
.keyvisual_img .imgs{
  width:100%;
  height: 100%;
}
.keyvisual_img .imgs img{
  width:100%;
  height: 100%;
  object-fit:cover;
}
.keyvisual_img .cont{
  width:100%;
  max-width: 1300px;
  position: absolute;
  top:0;
  left:50%;
  z-index: 99;
  padding-top:100%;
  transform:translate(-50%,0);
}

.keyvisual_img .cont .parts01{
  position: absolute;
  left:0;
  top:0;
  width:clamp(170px,14vw,250px);
}
.keyvisual_img .cont .parts02{
  position: absolute;
  right:0;
  top:15%;
  width:clamp(450px,30vw,600px);
  height: fit-content;
}
#keyvisual{
  width:100%;
  height:clamp(850px,100%,2000px);
  position: relative;
  overflow: hidden;
}
#keyvisual .obi{
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
}
#keyvisual .access{
  width:100%;
  background:rgba(0,0,0,.70);
  padding:2em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#top_data .data ul li{
  display: flex;
  margin:4em 0;
  list-style: none;
}
#top_data .data ul li .imgs{
  width:50%;
  padding:1em 2em;
}
#top_data .data ul li dl{
  width:50%;
}
#top_data .data ul li dl dt{
  text-align: left;
  font-size:clamp(1.3em,3vw,2em);
  color:var(--mainColor);
  line-height: 1.4;
  margin-bottom: .5em;
}
#top_data .data ul li.data04{
  flex-wrap: wrap;
}
#top_data .data ul li.data04 .imgs,
#top_data .data ul li.data04 dl{
  width:100%;
}
#top_data .data ul li.data06 .imgs{
  position: relative;
  height: auto;
}
#top_data .data ul li.data06 .imgs .img01{
  position: absolute;
  top:0;
  left:2em;
  width:50%;
  z-index: 2;
}
#top_data .data ul li.data06 .imgs .img02{
  position: absolute;
  top:0;
  right:2em;
  width:65%;
  padding-top: clamp(50px,14vw,150px);
  z-index: 1;
}
#top_access{
  background:url(../../img/bg03.jpg) no-repeat right -10%;
  background-size:70%;
}
#top_access .accessmap{
  margin:5em 0;
}
#top_access h4{
  border-bottom:1px solid var(--mainColor);
  padding-bottom: .5em;
  margin:1em auto;
  font-size:1.5em;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
}
ul.access_detail{
  display: flex;
  justify-content: space-around;
  margin:3em auto;
  list-style: none;
}
ul.access_detail li{
  width:28%;
  margin: 0 2%;
}
#top_feature .feature .elem{
  position: relative;
  margin: 5em auto;
  display: flex;
  justify-content: space-between;
}
#top_feature .feature .elem .imgs{
  width:85%;
}
#top_feature .feature .elem .textarea{
  width:50%;
  margin-left:-45%;
  padding-top:20%;
  text-align: left;
}
#top_feature .feature .elem .textarea .ti{
  mix-blend-mode: screen;
}
#top_feature .feature .elem .textarea .box{
  background:rgba(255,255,255,.9);
  padding:2em;
}
#top_feature .feature .elem .textarea h4{
  font-size:clamp(1.25em,3vw,2em);
  line-height: 1.5;
  font-weight: 500;
}
/*====================================================================
   subpage
/*==================================================================*/
#keyvisual.sub{
  height: clamp(380px,30vh,800px);
  position: relative;
}
#keyvisual.sub .imgs{
  width:100%;
  height: 100%;
}
#keyvisual.sub .imgs img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
#keyvisual.sub .pagetitle {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  /* background:black; */
  display: flex;

}
#keyvisual.sub h2{
  color:white;

  font-weight: normal;
  letter-spacing: .2em;
  font-size:clamp(25px,4vw,56px);
  padding: 0 2em;
  line-height: 1.1;
  padding-top:.3em;
  padding-bottom:.3em;
  position: relative;
  z-index: 33;
  display: flex;
}

#keyvisual.sub .pagetitle:after{
  content:"";
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  background:rgba(0,0,0,.7);
  mix-blend-mode: overlay;
}

.flex{
  display: flex;
  list-style: none;
}
.flex.block2,
.flex.block3{
  flex-wrap: wrap;
}
.flex.block2 > .elem,
ul.flex.block2 > li{
  width:50%;
}
.flex.block3 > .elem,
ul.flex.block3 > li{
  width:33.333%;
}
.plesuers .elem{
  display: flex;
  margin:4% auto;
}
.plesuers .elem .textarea{
  width:37%;
  padding:0 4% 0 0;
}
.plesuers .elem ul{
  width:63%;
}
.plesuers .area-name{
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  padding:4%;
  position: relative;
}
.plesuers .area-name:after{
  content:"";
  display: block;
  background:#F3F3F3;
  width:clamp(200px,18vw,250px);
  height:clamp(200px,18vw,250px);
  border-radius:200px;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index: 10;
}
.plesuers .area-name .mini,
.plesuers .area-name .name,
.plesuers .area-name .sub{
  display: block;
  letter-spacing: 0.15em;
  line-height: 1.3;

}
.plesuers .area-name .mini,
.plesuers .area-name .name,
.plesuers .area-name .sub,
.plesuers h4,
.plesuers p{
  position: relative;
  z-index: 11;
}
.plesuers .area-name .name{
  font-size:clamp(30px,5vw,70px);
  color:var(--subColor);
}
.plesuers .area-name .sub{
  font-size:clamp(1.2em,2.8vw,1.5em);
}
.plesuers .area-name .mini{
  font-size:1.2em;
}
.plesuers h4{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size:clamp(18px,3.5vw,20px);
  line-height: 1.5;
  text-align: left;
  margin:1em 0 ;
  letter-spacing: 0.25em;
}
.plesuers ul.flex{
  justify-content: space-between;
}
.plesuers ul.block2 li{
  width:48%;
}
dl.place-info{
  text-align: left;
  margin:1em auto;
}
dl.place-info dt{
  line-height: 1.5;
  font-size: clamp(.9em,1vw,1em);
}
dl.place-info dt .sub{
  display: block;
}
dl.place-info dt .name{
  display: inline-block;
  font-size:1.45em;
  color:var(--mainColor);
}
dl.place-info dt .distance{
  display: inline-block;
}
.kakomi{
  border:1px solid #CCCCCC;
  }
.kakomi p{
  margin:0;
  padding:.5em;
  }
#useful h4{
  text-align: left;
  font-size:clamp(1.2em,2.3vw,2em);
  font-weight: 500;
  line-height: 1.5;
  margin:1em 0;
}
#useful h4.en{
  letter-spacing: 0.3em;
  font-size:clamp(1.5em,4vw,2.8em);
  color:#767676;
}
.shopping-center{
  display: flex;
  margin-bottom: 4em;
}
.shopping-center .imgs{
  width:60%;
}
.shopping-center .textaera{
  width:40%;
  padding:0 0 0 2em ;
}
.shopping-center .textaera h4{
  position: relative;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.shopping-center .textaera h4:after{
  content:"";
  display: block;
  width:4em;
  height: 3px;
  position: absolute;
  bottom:0;
  left:0%;
  background:#D4D5DF;
}
#useful .flex{
  justify-content: space-between;
}
#useful .block2 > .elem{
  width:48%;
}
#useful .anyshop.flex{
  flex-wrap: wrap;
  margin:4em auto;
}
#useful .anyshop.flex > .elem{
  width:31%;
  margin:1%;
}
.lifeinfo{
  margin-bottom: 4em;
}
ul.type-list {
  justify-content: space-between;
}
ul.type-list.flex.block3 li{
  width:32%;
  margin:1% 0;
}
ul.type-list a{
  display: block;
  background:#F9F9F9;
  position: relative;
  padding:2em;
  width:100%;
  height: 100%;
}
ul.type-list a:hover{
    background:#eceff0;
}
ul.type-list a:after{
  content:"\e937";
  font-family: "icomoon";
  color:white;
  font-size:1.3em;
  display: inline-block;
  line-height: 1;
  padding:10px;
  background:black;
  position: absolute;
  right:0;
  top:0;
}
ul.type-list.flex.block3 li.j{
  width:40%;
}
ul.type-list.flex.block3 li.remarks{
  width:57%;
  padding:1em;
}
#plan h4{
  font-size:1.2em;
  margin-bottom: 1em;
  text-align: left;
  font-weight: 500;
}
#plan h4 .en{
  color:var(--subColor);
  font-size:clamp(1.2em,3vw,4em);
  letter-spacing: .3em;
  display: inline-block;
  margin-right:.3em;
  vertical-align: middle;
}
dl.equip-info {
  text-align: left;
  margin:.9em 0 ;
}
dl.equip-info dt,
.equip-list p.red{
  color:var(--mainColor);
  font-size:clamp(1.15em,2.3vw,1.4em);
  line-height: 1.5;
}
dl.equip-info dt{
  margin-bottom: .7em;
}
.equip-list{
  margin:2em auto;
}

.equip-list p.red{
  margin-top:.5em;
}
.equip-list .item{
  margin-bottom: 2em;
}
.equipment{
  margin:4em auto;
}

.equipment h5{
  text-align: left;
  font-size:clamp(1.3em,3.5vw,1.8em);
  font-weight: 500;
  line-height: 1.5;
}
.equipment .sponsor{
  text-align: left;
  margin:1em auto;
}
.equipment li.equip-image .imgs{
  width:100%;
  height: 100%;
}
.equipment li.equip-image .imgs img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
.equipment .flex.block3 li{
  width:30%;
  margin: 0 1.6% 1.5%;
}
.security_map {
  margin:4em 0;
}
.camera{
  max-width: 1000px;
  margin:2em auto;
}
.camera .imgs{
  width:50%;
}
.camera dl{
  width:47%;
  margin-left:3%;
}
.security{
  margin:0em auto;
}
.security.flex.block2,
.security .flex.block2 {
  justify-content: space-between;
}
.security.flex.block2 > .elem,
.security .flex.block2 > .elem{
  width:48%;
}
.security .item{
  margin-bottom:4em;
}
.security .item dl.equip-info dd.flex .imgs{
  width:45%;
}
.security .item dl.equip-info dd.flex p{
  width:52%;
  margin-right:3%;
}
.security .item2{
  display: flex;
  margin: 0 0 2em 0;
}
.security .item2 .imgs{
  width:25%;
}
.security .item2 dl{
  width:75%;
  padding:0 0 0 1.5em;
}
.bathroom.flex.block3 > .flex{
  flex-wrap: wrap;
  justify-content: space-between;
  width:63%;
}
.bathroom.flex.block3 > .flex > .item{
  width:48%;
}
.bathroom.flex.block3 .flex .flex.long{
  width:100%;
  justify-content: space-between;
  margin-bottom: 0;
}
.bathroom.flex.block3 .flex .flex.long .imgs{
  width:50%;
}
.bathroom.flex.block3 .flex .flex.long dl{
  width:47%;
}
.toilet.flex.block4 li {
  width:25%;
  margin: 0 1.6% 1.5%;
}

#room{
  margin:0 auto 5%;
}
#room .room-list{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
#room .room-list li{
  flex:1 0 31%;
  margin:1%;
}
#room .room-list li .name{
  text-align: left;
}
#room .room-list li .name .en{
  font-size:clamp(1.5em,3.5vw,2.5em);
  letter-spacing: .1em;
}

#smartlife{
  background:url(../../img/equip/smartlife_bg.jpg?v1.0) center center no-repeat;
  background-size:cover;
}
#smartlife .flex{
  display: flex;
}
#smartlife .flex .elem{
  width:60%;
}
#smartlife h5 .small{
  font-size:.9em;
  display: block;
  margin:.5em 0;
}
dl.multilight{
  margin:2em 0;
}
dl.multilight dt{
  background:#5283E5;
  color:white;
  font-size:clamp(1.3em,2.5vw,1.5em);
  font-weight: 500;
  text-align: left;
  padding:.3em 1em;
  margin-bottom: .5em;
  line-height: 1.4;
}
dl.multilight dd.flex .imgs{
  width:32%;
  margin-top:1em;
}
dl.multilight dd.flex p{
  width:63%;
  margin-right:3%;
}
dl.multilight dd.diagram{
  background:white;
  margin:2em 0 ;
  max-width: 500px;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  padding:2em;
}
ul.smart-point{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  counter-reset: num;
  margin:4% auto;
}
ul.smart-point li{
  counter-increment: num;
  width:46%;
  margin:0 2%;
}
ul.smart-point li h6{
  position: relative;
  text-align: left;
  padding-top:calc(clamp(1.5em,4vw,2.5em) + 1em);
  font-size:clamp(1.4em,2.5vw,1.5em);
  margin: 1em 0;
  line-height: 1.4;
}
ul.smart-point li h6:before{
  content:counter(num) '.';
  font-size:clamp(2em,5vw,2.5em);
  color:#5283E5;
  font-weight: 600;
  position: absolute;
  top:0;
  left:0;
}
ul.smart-point li dl{
  width:60%;
}
ul.smart-point li .flex dl{
  width:55%;
  margin-right:3%;
}
ul.smart-point li .flex .diagram{
  width:42%;
}
ul.smart-point li dl dt{
  font-size:clamp(1.1em,2.5vw,1.2em);
  background:#EBEBEB;
  border-left:4px solid #5283E5;
  padding-left: 0.5em;
  text-align: left;
  line-height: 1.4;
}
.ai_speaker{
  max-width: 950px;
  margin:auto;
  background:#F1F8FF;
  padding:1.5em;
}
.ai_speaker .flex .imgs{
  width:40%;
}
.ai_speaker .flex .text{
  width:55%;
  margin-left:3%;
}
.ai_speaker h5{
  font-size:clamp(1.3em,2.8vw,1.5em);
  line-height: 1.5;
}
/*////////// shop information ///////*/
#store {
  max-width: 1200px;
  margin:auto;
}
.store-detail {
  display: flex;
}
.store-detail .imgs{
  width:48%;
}
.store-detail .textarea{
  width:48%;
  margin-left:4%;
}
.store-detail .textarea .telno,
.store-detail .textarea .faxno{
  font-size:clamp(1.5em,4vw,2em);
  color:#0263C4;
  font-weight: 600;
  position: relative;
  text-align: left;
  letter-spacing: .05em;
  margin:.1em 0;
}
.store-detail .textarea .faxno{
  color:inherit;
  font-size:clamp(1.25em,3.75vw,1.7em);
}
.store-detail .textarea .telno:before,
.store-detail .textarea .faxno:before{
  content:"TEL";
  background:#575757;
  color:white;
  font-weight: 500;
  padding:.3em .5em;
  line-height: 1;
  font-size:.8em;
  display: inline-block;
  margin-right:.5em;
}
.store-detail .textarea .faxno:before{
  content:"FAX";
}
.store-map {
  margin:4em auto;
}
.store-map .googlemap{
  margin:2em 0;
}

/*//////////// privacy policy ///////////*/
#privacy {
  text-align: left;
  max-width: 1000px;
  margin:auto;
}
#privacy h4{
  font-weight: 500;
  font-size:clamp(1.3em,3vw,1.6em);
}
#privacy ol{
  margin:1em 2em;
}
#privacy p{
  text-indent:1em;
}
.nolist{
  list-style: none;
}

.modaal-wrapper .modaal-close{
  background:black !important;
}
/*====================================================================
   footer
/*==================================================================*/
.btminfo{
  position: relative;
  background: black;
  color:white;
  padding: 2%;
}
.btminfo:after{
  content:"";
  width:4em;
  height: 3px;
  background:#5D5D5D;
  position: absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,0%);
}
.btminfo .ti{
  font-size:clamp(1.3em,3vw,2em);
  text-align: center;
  margin:1em;
}
ul.info_btn {
  display: flex;
  justify-content: center;
  list-style: none;
  width:100%;
}
ul.info_btn li {
  max-width:350px;
  width:100%;
  margin:0 1em ;
}
ul.info_btn li a{
  display: block;
  width:100%;
  border-radius:50px;
  color:white;
  font-size:1.8em;
  text-align: center;
  padding:.5em 1.5em;
}
ul.info_btn li.blue_btn a{
  background-image:linear-gradient(to bottom,#009AD6,#004D6B);
  border:1px solid #D5D5D5;
}
ul.info_btn li.khaki_btn a{
  background-image:linear-gradient(to bottom,#A58B08,#453A00);
  border:1px solid #D5D5D5;
}
#footer{
  position: relative;
  color:white;
  z-index: 10;
  background: black;
  padding:1em;
}

.footer{
  position: relative;
  padding:2% 10px 60px;
  z-index: 3;
}
.footer dl dt{
  font-size:clamp(20px, 3.5vw, 28px);
  font-weight: 900;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5;
}
.footer dl dt .small{
  font-size:.8em;
  display: block;
}
.footer dl dd{
  font-size:.9rem;
}
#footer .telno{
  font-size:2em;
  letter-spacing: 0.05em;
  margin:5px 0;
}
.licence {
    text-align: center;
    margin: 0;
}
.copyright{
  font-size:.9em;
  line-height: 1.3;
  position: relative;
  z-index: 3;
  background:black;
}
.copyright p{
  text-align: center;
  letter-spacing: 0.08em;
}
.gototop{
  display: none;
  position: fixed;
  bottom:2em;
  right:2em;
  z-index: 887;
}
.gototop a{
  color:#8B8B8B;
  line-height: 1.5;
}
.gototop a span{
  display: block;
}
/*////// animation //////*/
/* .anime{
  animation-play-state: paused;
} */

.fd,.fdb,.fdl,.fdr,.fdu{
  opacity:0;
}
/* アニメーションクラス */
.fade-in {
	-webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.fade-in-up {
	-webkit-animation: fade-in-up 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-up 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    /* opacity: 0; */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/*////////////////////////////////////////*/