
html{
    margin-left: 0;         /* 余白の削除 */
    margin-right: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
    
    font-size:1em;
}

body{
	
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-weight: normal;
background:#F9F9F9;
}

.whole{
    width:100%;
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}
.title{
    margin-top:3%;
    margin-bottom:3%;
    text-align:center;
    width:100%;
	font-size:0.7rem;
	
	font-family: 'Noto Sans JP', sans-serif;
}
.logo-area{
    width:100%;
    text-align:center;
}
.img-logo{
     width:15%;
}

.slide{
    width:100%;
    text-align:center;
    
    margin-top:15%;
    margin-bottom:5%;
     
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.slide-line{
     width:40%;
     text-align:right;
}
.slide-times{
     width:10%;
     margin-top:5%;
     /*margin-bottom:5%;*/
}
.slide-logo{
     width:50%;
     text-align:left;
}
.img-line-slide{
     width:50%;
}
.img-logo-slide{
     width:50%;
}

.color-gray{
     color:#555555;
}

.title-top{
     background: linear-gradient(transparent 65%, #DD85A0 65%);
     font-size:1.0rem;
}

.balloon-whole{
    width:100%;
  
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.balloon-whole-cell-1{
    width:100%;
  
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}
.balloon-whole-cell-2{
    width:100%;
  
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
  padding-top: 6%;
  padding-left:6%;
  padding-bottom: 6%;
  padding-right:6%;
  /*min-width: 120px;
  max-width: 100%;*/
  color: #555;
  font-size:1.9rem;
  background: #fff;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  /*margin-left: -15px;*/
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

.balloon-title{
    width:90%;
  
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
    
    
     margin-top:10%;
}

.balloon-title-1{
    flex-basis:40%;
    text-align:right;
}
.balloon-title-2{
    flex-basis:60%;
    font-size:1.3rem;
    font-weight:bold;
    text-align:left;
    color:#555;
}

.select-box-whole{
    width:100%;
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.select-box-whole-buttons{
    width:80%;
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
    
    margin-top:10%;
    
}

.select-box-whole-button{
   flex-basis:60%;
   width:100%;
   display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
    
    font-weight:bold;
    /* background: #0B257F;  */
	background-image: linear-gradient(to right, #2a5298 0%, #1e3c72 99%, #1e3c72 100%);
    color:#fff;
    padding-top:7%;    
    padding-bottom:7%;
    
    margin-top:0.5%;
    margin-bottom:0.5%;
    
}

.border-top-left-radius{

    border-top-left-radius:20px;
    border-top-right-radius:20px;
    
}
.border-bottom-right-radius{

    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    
}

.title-sentence{
    width:80%;
    font-size:1.0rem;
    
    margin-top:2%;
    margin-bottom:5%;
}

.title-sentence-line{
    width:80%;
    font-size:0.9rem;
    
    margin-top:4%;
    margin-bottom:5%;
}

.title-sentence-img{
    width:70%;
    text-align:center;
    padding-top:3%;
    padding-bottom:3%;
}

.img-sentence{
     width:100%;
}

.color-green{
    font-weight:bold;
    color:#2BAC38;
}

.font-small{
    font-size:1.3rem;
}

.online-booking-whole{
    width:90%;
    background: #fff;
    border-radius:20px;
    
    margin-top:3%;
    margin-bottom:5%;
    padding-bottom:3%;
    
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.online-booking-whole-sentence{

    width:90%;
    text-align:center;
    font-size:0.9rem;
    color:#555;
    
    padding-top:4%;
    padding-bottom:3%;

}

.online-booking-whole-icon{
width:90%;
    text-align:center;
    
    color:#555;
    
    padding-top:4%;
    padding-bottom:3%;

}



.new-acount{
    width:90%;
    background: #fff;
    border-radius:20px;
    
    margin-top:15%;
    /* margin-bottom:5%;
    padding-bottom:3%; */
    
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.new-acount-title{

    width:100%;
    text-align:center;
    font-size:1.2rem;
    
    color:#fff;
    background:#555;
    /*
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    */
    
    
    padding-top:3%;
    padding-bottom:3%;

}

.new-acount-sentence{

    width:100%;
    text-align:center;
    font-weight:bold;
    font-size:1.0rem;
    color:#555;
    
    padding-top:5%;
    padding-bottom:3%;

}
.new-acount-sentence-line{

    width:80%;
    text-align:center;
    font-weight:bold;
    font-size:1.2rem;
    
    color:#fff;
    background:#2BAC38;
    
    padding-top:2%;
    padding-bottom:2%;
    
    
    border-radius:10px;

    margin-top: 10%;

}

.new-acount-sentence-line-2{

    width:80%;
    text-align:center;
    font-weight:bold;
    font-size:1.2rem;
    
    color:#fff;
    background:#99CC66;
    
    padding-top:2%;
    padding-bottom:2%;
    
    
    border-radius:10px;


}

.new-acount-attention-line{

    width:85%;
    text-align:left;
    font-weight:bold;
    font-size:0.9rem;
    
    color:#fff;
    background:#DD85A0;
    
    padding-top:3%;
    padding-bottom:3%;
    padding-left:4%;
    padding-right:2%;
    
    
    border-radius:10px;

    margin-top: 10%;

    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;


}

.new-acount-attention-line-left{
    flex-basis: 10%;
}
.new-acount-attention-line-right{
    flex-basis: 90%;
}

.new-acount-3-whole{
    width:100%;
    
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
    
}

.new-acount-whole{
    width:90%;
    
    background: #F9F9F9;
    border-radius:20px;
    
    margin-top:5%;
    margin-bottom:5%;
    padding-bottom:3%;
    
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.new-acount-whole-title{
    width:100%;
    text-align:center;
    
    color:#fff;
    background:#333;    
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    
    
    padding-top:3%;
    padding-bottom:3%;
}

.new-acount-whole-sentence{

    width:90%;
    text-align:center;
    font-size:0.9rem;
    color:#555;
    
    padding-top:4%;
    padding-bottom:3%;

}

.new-acount-whole-icon{
width:90%;
    text-align:center;
    
    color:#555;
    
    padding-top:4%;
    padding-bottom:3%;

}
.new-acount-whole-img{
 width:95%;
 

}
.new-acount-whole-qr-img{
    width:70%;
 
     display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
    
}
.img-new-acount{
    width:100%;

}

.img-new-acount-qr-img{
    width:80%;
}

.new-acount-whole-parts{
    width:100%;
    font-size:1.3rem;
    font-weight:bold;
    text-align:center;
    color:#555;
    padding-top:10%;
     padding-bottom:10%;
}

.add-friend-img{
    width:50%;
    height: 100%;
    object-fit: cover;
}

.new-acount-line-download{
    width:70%;
 
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
    
    
    margin-top:3%;
    margin-bottom:3%;
}

.new-acount-line-download-whole{
    width:100%;
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.new-acount-line-download-whole-cell{
   width:100%;
   display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}
.new-acount-line-download-whole-cell-apple{
   width:80%;
   display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.img-new-acount-line-download-whole-cell{
    width:60%;
}

.img-new-acount-line-download-whole-cell-2{
    width:60%;
}

.lightbox-img{
    width:100%;
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: column;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.new-separator{
height:1px;
}
