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

:root{
}


body {
    background-color: #fffffc ;
}

h1,.custom-h1-header{
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    font-size: 3.5em;
    text-align: center;
    color: #45E6CB;
    line-height: 0;
}

h1,.custom-h1-md{
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    font-size: 2.5em;
    text-align: center;
    color: #45E6CB;
    line-height: 0;
}

.custom-h1-sm{
    font-weight: 800;
    font-family: 'Dancing Script', cursive;
    font-size: 2em;
    text-align: center;
    color: #45E6CB;
}




h2, h3,.custom-fontfamily-h {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 400;
    color: #162a41;
}

.custom-fontfamily-h2 {
    font-size: 1.3rem;
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 400;
    color: #162a41;
}



h3,.custom-fontfamily-h3-j{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

h4,.custom-h4{
    color: #45e6cb;
    font-size: 1.4rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans Display', sans-serif;
}
h4,.custom-h4-md{
    color: #45e6cb;
    font-size: 1.2rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans Display', sans-serif;
}
.privacy-policy h4{
    color:  #5f5f5f;
    
    
    
}
/*h4,.custom_h4{
    color: #25E1C2;
    font-size: 1.4rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans Display', sans-serif;
}*/

h5,.custom-h5{
    color: #45e6cb;
    font-size: 1.1rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}
h5,.custom-h5-md{
    color: #45e6cb;
    font-size: 1.0rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}




/*カルーセル*/

.carousel-item{
  position: relative;
} 

.carousel-caption{
  position: absolute;
  top: 50%;
  transform: translateY(-40%); 
}
.carousel-caption-text{
  font-size:  min(4vw, 35px);
  font-weight: 400;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
}



.text-white{
    color: white;
}
.pd-100{
    padding-top: 75px;
    font-weight: 400;
    font-size: 2.3rem;
}

.cap-pd-100{
    padding-top: 75px;
    font-weight: 400;
    font-size: 2rem;
    font-family: 'Noto Sans JP', sans-serif;
}

.pd-40{
    padding-top: 35px;
    font-weight: 400;
    font-size: 1.6rem;
}

.pd-50{
    padding-top: 65px;
    font-weight: 300;
    font-size: 2rem;
}
.text-basecolor{
    color:  #45E6CB;
}



/* text・space control*/

.letter-space-normal{
    letter-spacing: normal;
}

.letter-space-midle{
    letter-spacing: 0.1rem;
}

.letter-space-wide{
    letter-spacing: 0.2rem;
}

.letter-space-wider{
    letter-spacing: 0.4rem
}




/*-- toppage-menu --*/

/*.custom-navbar-light .custom-navbar-brand {
  color: rgba(0, 0, 25, 0.9);
}*/




/*-- ブランド名の属性変更--*/
.custom-navbar-brand {
  padding-top: 0.0125rem;
  padding-bottom: 0.1125rem;
  margin-right: 1rem;
  /*font-size: 1.5rem;*/
 text-decoration: none;
  white-space: nowrap;  
  font-weight: 800;
  font-family: 'Dancing Script', cursive;
  font-size: 2.25em;
  text-align: center;
  color:  #45E6CB;
}

.custom-navbar-brand:hover {
  color: #FCE5E2;
}




/*-- トグルアイコンの色変更--*/
/* メニューの文字間を調整*/
.nav-item{
	padding-left: 10px;
	padding-right: 10px;
}

/* nav-itemの文字色 */
.navbar .navbar-nav .nav-link{
    color: #6f6f6f;
	font-size: 1.2rem;
	font-weight: 300;
    font-family: 'Noto Sans Display', sans-serif;
}

.navbar .navbar-nav .nav-link:hover{
    color: #45E6CB;
    text-decoration: underline;   
}

/* ドロップダウンアイテムの文字色 */
.dropdown-item {
    color: #5f5f5f;
}

/* アクティブ文字色変更 */
.navbar-light .navbar-nav .nav-link.active {
    color:  #45E6CB;
    font-size: 1.2rem;
	font-weight: 300;
    text-decoration: underline;
    font-family: 'Noto Sans Display', sans-serif;
}




/*アンカー色設定*/
a:hover{
	text-decoration: none;
}
a,.h1:hover{
	text-decoration: none;
}


/*
.custom-h1:hover{
    color: #4dffe1;
}

a.active{
	color: #45E6CB;
}*/


.custum-a-viewmore:hover{
   color: #25E1C2;
}

.custum-a-viewmore{
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 300;
    color: #162a41;
    text-decoration:underline;}





/*--toppage-about area-- */
.about-text{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.about-text-mb{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.about-salon-text-mb{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}





/*--toppage-treatment area-- */
.treatment-text{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.treatment-text-md{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

/*--menu-treatment area-- */
.menu-text-main{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}
.menu-text-sub{
    color:  #5f5f5f;
    font-size: 0.9rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.menu-text-sub-mb{
    color:  #5f5f5f;
    font-size: 0.7rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}
.menu-text-mb{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.treatment-menu-text{
    color:  #5f5f5f;
    font-size: 0.9rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.treatment-menu-text-md{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}






/*--news area-- */
.news-text{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-text-md{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-text-date{
    color:  #5f5f5f;
    font-size: 0.9rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-text-date-md{
    color:  #5f5f5f;
    font-size: 0.7rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}






/*--threrapist info-- */
h5,.therapist-text-h5{
    color:  #5f5f5f;
    font-size: 1.2rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

h5,.therapist-text-h5-md{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

h6,.therapist-text-h6{
    color:  #6f6f6f;
    font-size: 1rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}
h6,.therapist-text-h6-md{
    color:  #6f6f6f;
    font-size: 0.9rem;
	font-weight: 400;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}





/*メニューフォト 割引*/

.stack{
  position: relative;
} 

.blur{
 filter: brightness(75%)
}

.stack-text{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size:  min(4vw,20px);
  font-weight: 500;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
  /*padding: 0;
  margin: 0;*/
}

.stack-text2{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size:  min(4vw,20px);
  font-weight: 500;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0;
  margin: 0;
}


.stack-text-md{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size:  min(4vw,15px);
  font-weight: 500;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
  /*padding: 0;
  margin: 0;*/
}

.stack-text-md2{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size:  min(4vw,15px);
  font-weight: 500;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0;
  margin: 0;
}



.stack-text-xs{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size:  min(4vw,10px);
  font-weight: 500;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
  /*padding: 0;
  margin: 0;*/
}

.stack-text-xs2{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size:  min(4vw,10px);
  font-weight: 400;
  text-decoration: none; 
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0;
  margin: 0;
}







.therapist-text {
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.therapist-text-mb {
    color:  #5f5f5f;
    font-size: 0.7rem;
	font-weight: 200;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}


/*--  menu-section --- */
.threatment-text{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.threatment-text-mb{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 300;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
}


ul {
  list-style: none;
  padding-left: 0;
}






.top-background-image01{
    background-image:url("../images/top-backgraund-green.jpg");
	max-width: 100%;
	height: auto;
}
.top-box1{
	height: 100px;	
}

.top-box2 h2{
	color: #c19969;
}

.top-box2 h3{
	color: #c19969;
}
.top-box2 {
	color: #c19969;
	background-color:white;
}
.top-box2 h4{
	color: #c19969;
}
.top-box2 h5{
	color: #c19969;
}



/*.card img{
        transition: 0.3s ease;
}*/

/*.card img:hover {*/
          /*box-shadow: 0 6px 12px rgba(0,0,0,0.20);
	      transform: tanslate(0,-2px);*/
	  	  /*opacity: 0.6;*/
	/*-webkit-filter: grayscale(100%);
	filter: grayscale(100%);*/
	      /*-webkit-filter: sepia(20%);
	      filter: sepia(20%);*/
	/*-webkit-filter: saturate(110%);
	filter: brightness(110%);*/
	/*-webkit-filter: saturate(1.05);
	filter: brightness(1.1);*/
	/*-webkit-filter: blur(50%);
	filter: blur(50%);*/
/*}	*/



/*-------- infomation　--------*/

.bg-infomation{
    background-color: #fbfafa;
}
.bg-offwhite{
background-color: #fffffd ;
}
.bg-offwihte-60{
    background-color:rgba(255,255,253,0.6);
}




/*-------- 先頭へ戻るボタン　--------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #fce1e7;
  opacity: 0.7;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  content: '\f106';
  font-size: 30px;
  color: #fff;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -15px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}





/*--------  ワークショプ　--------*/

.ws-1{
	color: #fff;
	/*background-color: #cf2087;*/
	font-size: 0.8rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}

.workshop-top hr{
height: 2px;
background-color: #777777;
border: none;
color: #ff0000;
}

.workshop-p2 {
height: 3px;
background-color: #0065b2;
border: none;
color: #ff0000;
}

.ws-h3 {
	 color: #333333;
	font-size: 1.3rem;
	font-weight: 500;
	font-family: 'Noto Sans JP', sans-serif;
}

.ws-h4 {
	font-size: 1.2rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}

.ws-p {
	 color: #5f5f5f;
	font-size: 0.9rem;
	font-weight: 300;
	font-family: 'Noto Sans JP', sans-serif;
}

.ws-h5 {
	 color: #5f5f5f;
	font-size: 1rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}

.ws-p1 {
	 color: #333333;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
}

.ws-p2 {
	 color: #333333;
	font-size: 0.9rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}

.company-p1 {
	 color: #333333;
	font-size: 1rem;
	font-weight: 400;
	font-family: 'Noto Sans Display', sans-serif;
}

.company-p2 {
	 color: #333333;
	font-size: 0.9rem;
	font-weight: 400;
	font-family: 'Noto Sans Display', sans-serif;
}

.ws-p3 {
	 color: #333333;
	font-size: 0.7rem;
	font-weight: 300;
	font-family: 'Noto Sans Display', sans-serif;
}

.ws-btn:hover {
	 color: #c19969;
	border: solid 1px #c19969;
	font-size: 0.9rem;
	font-weight: 400;
	font-family: 'Noto Sans Display', sans-serif;
}

.ws-btn {
	color: #fff;
	background-color: #c19969;
	border:  solid 1px #c19969;
	ont-size: 0.9rem;
	font-weight: 400;
	font-family: 'Noto Sans Display', sans-serif;
}







/*------ サロン紹介　-----*/

.salon-oursalon p{
	 color: #6f6f6f;
	font-size: 1rem;
	font-weight: 100;
	font-family: YuGothic,"Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.salon-oursalon2 {
	 color: #5f5f5f;
	font-size: 0.9rem;
	font-weight: 100;
	font-family: YuGothic,"Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}





/*------ メニュー紹介　-----*/

.menu-box1 h3{
	color: #c19969;
}

.custom-p-font300 {
	font-weight: 300;
	color: #5f5f5f;
} 


.custom-color-active{
	color: rgba(0,101,178,1);
}

.custom-color{
	color: #c19969;
}

.custom-bk-color1{
	background-color: #FCE5E2;
}

.custom-color-p1{
	color: #5f5f5f;
}
.custom-color-menu{
	color: #333333;
}

.custom-color-menu2 {
	color: #3f3f3f;
}

.custom-card-header{
	background-color: #fff;
}

.menu-list-a h4{ color: #c45e6cb; font-size:1.4rem; font-weight: 500;}


.menu-list-box1 h3{ color: #c19969; }
.menu-list-box2 h3{ color: #45e6cb; }
.menu-list-box3 h3{ color: #c19969; }
.menu-list-box4 h3{ color: #c19969; }
.menu-list-box5 h3{ color: #c19969; }
.menu-list-box6 h3{ color: #c19969; }
.menu-list-box7 h3{ color: #c19969; }



.menu-list-box2 h4{ color: #c45e6cb; font-size:1.4rem; font-weight: 500;}
.menu-list-box3 h4{ color: #c19969; font-size:1.4rem; font-weight: 500;}
.menu-list-box4 h4{ color: #c19969; font-size:1.4rem; font-weight: 500;}
.menu-list-box5 h4{ color: #c19969; font-size:1.4rem; font-weight: 500;}
.menu-list-box6 h4{ color: #c19969; font-size:1.4rem; font-weight: 500;}
.menu-list-box7 h4{ color: #c19969; font-size:1.4rem; font-weight: 500;}





/*------------ infomation area -------------*/
.info-text-li-title{
    color:  #5f5f5f;
    font-size: 0.9rem;
	font-weight: 300;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.info-text-li-title-l{
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 500;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.info-text-li-shosai{
    color:  #5f5f5f;
    font-size: 0.9rem;
	font-weight: 200;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}


.info-text-li-title-md{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 300;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.info-text-li-title-l-md{
    color:  #5f5f5f;
    font-size: 0.9rem;
	font-weight: 300;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}
.info-text-li-shosai-md{
    color:  #5f5f5f;
    font-size: 0.8rem;
	font-weight: 200;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}


.info-text-li-yoyaku{
    width: 200px;
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    background-color: #ffeae6;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}
.info-text-li-yoyaku:hover{
    color: #25E1C2;
    font-weight: 300;   
}

.access-text-li-q{
    width: 230px;
    color:  #5f5f5f;
    font-size: 1rem;
	font-weight: 300;
    background-color: #ffeae6;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
}

.access-text-li-q:hover{
    color: #25E1C2;
    font-size: 1rem;
	font-weight: 300;
}



/*---------- footer area ----------*/
.footer-background{
	background-color: #45e6cb;
	/* height: 180px;*/
}

h1,.custom-h1-footer{
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    font-size: 3rem;
    text-align: center;
    color: #fff;
    line-height: 1;
}

h1,.custom-h1-footer-mb{
    font-weight: 600;
    font-family: 'Dancing Script', cursive;
    font-size: 2.25rem;
    text-align: center;
    color: #fff;
    line-height: 0;
}

.footer-menu-text{
    color: white;
	font-size: 1rem;
	font-weight: 300;
    font-family: 'Noto Sans Display', sans-serif;
}

.footer-menu-text-mb{
    color: white;
	font-size: 0.9rem;
	font-weight: 300;
    font-family: 'Noto Sans Display', sans-serif;
}

small,.footer-text{
    color: white;
	font-size: 0.8rem;
	font-weight: 300;
    font-family: 'Noto Sans Display', sans-serif;
}

small,.footer-text-md{
    color: white;
	font-size: 0.7rem;
	font-weight: 300;
    font-family: 'Noto Sans Display', sans-serif;
}

.top-box4-2{
	font-size: 0.9rem;
	font-weigt: 200;
}

.custom-background-color1{
	background-color: #fdfdfb;
}

.custom-background-color2{
	background-color: #e5eaeb;
}

.custom-background-color3{
	background-color: #9999;
}

.custom-background-img1{
	background-image:url("../images/reservation-btn.png");
	width: 120px;
	height: 45px;
}

.custom-background-img2{
	background-image:url("../images/elmar-1.png");
	width: 100%;
	height: 500px;
	background-size:cover;
}


.salon-title-img{
	background-image:url("../images/ph-salon-title2.jpg");
	background-repeat: no-repeat;
	width: 100%;
    height: 200px;
	background-size: cover;
}

.salon-title-img-mb{
	background-image:url("../images/ph-salon-title2.jpg");
	background-repeat: no-repeat;
	width: 100%;
    height: 100px;
	background-size: cover;
}

.salon-bg-img{
    background-image:url("../images/ph-salon-bgimg-green.jpg");
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
}


.treatment-title-img{
	background-image:url("../images/ph-menu-title.jpg");
	background-repeat: no-repeat;
	max-width: 100%;
    height: 200px;
	background-size: cover;
}

.treatmnet-title-img-mb{
	background-image:url("../images/ph-menu-title-md.jpg");
	background-repeat: no-repeat;
	max-width: 100%;
    height: 100px;
	background-size: cover;
}

.treatment-bg-img{
    background-image:url("../images/ph-salon-bgimg-green.jpg");
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
}


/*----------workshop -----------*/
.workshop-title-img{
	background-image:url("../images/ph-workshop-title.jpg");
	background-repeat: no-repeat;
	max-width: 100%;
    height: 200px;
	background-size: cover;
}

.workshop-title-img-mb{
	background-image:url("../images/ph-workshop-title.jpg");
	background-repeat: no-repeat;
	max-width: 100%;
    height: 100px;
	background-size: cover;
}

.custom-background-img4{
	background-image:url("../images/menu-title.png");
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
}

.custom-background-img5{
	background-image:url("../images/wsroom2.png");
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
}




/*-----  ワークショップ イベントフォントスタイル設定　-----*/

.ws-box h2{
	color: #c19969;
}

.ws-box h3{
	color: #c19969;
}
.ws-box {
	color: #c19969;
	background-color:white;
}
.ws-box h4{
	color: #c19969;
	}
.ws-box h5{
	color: #5f5f5f;
}











/*------ salon-page-----*/

 
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 62.5%; /* = height ÷ width × 100 */
}
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}