.area.contents-container main{
   max-width: unset;
   margin: 0;
   padding: 0;
}
.area.contents-container{
   position: relative;
   margin: 0 0 70px 0;
   padding-bottom: 100px;
   max-width:initial;
   width: 100%;
   padding:0;
}
dt.update::before{
   content: none;
}
h2{
   font-size: 30px;
   text-align: center;
   margin-bottom: 40px;
}
table.prices{
   margin-bottom: 10px;
   max-width: 700px;
}
.parag-02{
   max-width: 700px;
}
span.genre.sub{
   font-size: .9em;
   color: #e85f49;
   margin-top: 11px;
}
.refer figure img{
   border: 1px solid #e3e3e3;
}
.mv-inner{
   display: flex;
   align-items: center;
   margin: 0 15px 0 50px;
   height: calc(100vh - 120px);
}
.area-title{
   position: relative;
   width: 1000px;
   white-space: nowrap;
   margin-right: -250px;
   z-index:2;
}

h1>span.sub {
   font-size: .55em;
   color: #6a6a6a;
   margin: 1em 0 .2em;
 }
 
 .area-title h1{
   text-align: center;
   font-size: 30px;
   line-height: 1.5em;
   margin: 0;
 }
 h1>span.sub{
   font-weight:bold;
 }

.box-02{
   display: flex;
   margin: 50px auto 25px;
   padding: 0 15px;
   gap: 50px;
   align-items: center;
   max-width: 1500px;
}
.samples-wrapper{
   flex:1;
   text-align: right;
   max-width: 700px;
}
.box-02-txt{
   flex:1;
}
.box-03{
   max-width: 1200px;
   margin: 50px auto 0;
   padding: 0 15px;
}
.area-hr{
   border: 1px solid #cccccc;
   margin: 50px calc(50% - 50vw);
   width: 100vw;
}

.this-area {
   max-width: 800px;
   margin: 0 auto;
   padding: 0 15px;
}

.please-wait{
   font-size: 30px;
   text-align: center;
   font-weight: bold;
}
#bf-header.initial {
  border-bottom: none;
}

#bf-header {
  background-color: rgba(255,255,255,0.8)!important;
}
.individual-container{
   max-width: 800px;
   margin: 0 auto;
   padding: 0 13px;
}
.individual-container img{
   margin:50px 0 10px;
   aspect-ratio: 1.8 / 1;
   object-fit: cover;
   
}
.area-name{
   border-top: none!important;
   font-size: 35px!important;
   background-color: #ebebeb!important;
   padding: 10px 10px 10px 15px!important;
   margin: 35px 0 20px -10px!important;
}


.this-area figure:not(:last-of-type)+p{
   padding-bottom:60px;
   border-bottom: 1px dotted #cccccc;
 }
.area h3{
   font-size: 25px;
   border-top: 2px solid;
   border-bottom: 1px solid;
   padding: 20px 0 15px;
   text-align: center;
   margin: 25px 0 10px;
 }
 .area h3 .rank{
   font-size: 50px;
   color: #e85f49;
   text-align: center;
 }

.refer .date dt {
   padding: 0;
}
.refer .date dd {
   margin: 0 0 0 3px;
}
.refer .date dl {
   justify-content: flex-start;
   gap: 5px;
}
.refer-container{
   margin: 50px 0;
}
.area h2.all-blogs{
   margin-top: 70px;
   font-size: 35px;
}
.content>div{
  padding-left: .5em;
}
.areaDate{
  display: flex;
}
.prices th {
  background-color: #f3efe1;
  text-align: center!important;
  vertical-align: middle;
  width: 300px!important;
  font-size:21px;
}
.price.l-text{
    font-size:40px;
    font-weight: bold;
}
.parag-03{
  margin-top: 0;
}
.contactBox{
  display: flex;
  gap: 30px;
  padding: 0 15px;
  margin-top:70px;
  justify-content: center;
}
div.tel{
  display: flex;
  flex-direction: column;
  align-items: center;
}
address.tel {
    margin-top: 39px;
    font-size: 34px;
}
#reception-time {
    margin-top: 13px;
    font-size: .9rem;
}
.contents-container a.form,
.contents-container a.online{
    position:relative;
    display: flex;
    justify-content:
    center; align-items: center;
    text-align:center;
    background:#000;
    color:#fff;
    font-weight: bold;
    width:16em;
    max-width:100%;
    height:70px;
    line-height:1.3em;
    box-shadow:1px 1px 1px rgba(0,0,0,0.5);
    z-index: 10;
  }

a.form:hover,
a.online:hover{
  box-shadow:none;
  border: 1px solid #000;
}
a.form::before,
a.online::before{
  border-radius:4px;
}
a.form{
  margin-right:0px;
}
@media screen and (max-width: 1280px){
   .box-02 {
      flex-direction: column;
      margin: 0;
   }
} 
/***********************************************************
960px
************************************************************/
@media screen and (max-width: 960px) {
.breadcrumbs {
  font-size: 12px;
}
.content{
  margin: 0 0 0 0;
  width: 100%;
  height: auto;
}
img.samples{
    margin: 0 auto;
}
}

/***********************************************************
767px
************************************************************/
@media screen and (max-width: 767px){
   .mv-inner{
      flex-direction: column-reverse;
      margin: 20px 15px 0;
      height: 100%;
   }
   .area-title {
      width: 100%;
      margin: 20px 0 0 0;
   }
   figcaption {
      font-size: 12px;
   }
   h2{
      font-size: 24px;
   }
}
/***********************************************************
599px
************************************************************/
@media screen and (max-width: 599px){
span.genre.sub {
   margin-top: 10px;
}
.area-title h1{
   font-size: 20px;
}
h1>span.sub {
   font-size: 12px;
   margin: 10px 0;
}
.area h3 .rank {
   font-size: 30px;
}
.area h3::before {
   height: 46px;
}
figcaption{
   font-size:10px;
   text-indent: -3em;
   padding-left: 3em;
   line-height:12px;
   margin-top: 7px;
}
.breadcrumbs>ul {
   justify-content: flex-start;
   padding: 0.4em 15px 0.4em;
}
.this-area .this-area-h2{
   font-size: 20px;
}
.this-area h3{
   font-size: 18px;
}
.area .announcement p{
   font-size:10px;
   line-height: 20px;
   line-height: 16px;
}
.strong {
   font-size: 13px;
}
.area p{
  font-size:14px;
}
.breadcrumbs {
    bottom: 203px;
    left: 2px;
}
.block-01, .grid-02 {
  padding: 0 15px 0 15px;
}
.contactBox {
  gap: 15px;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
}

.contents-container a.form, .contents-container a.online {
    height: 67px;
}

table td{
  text-align: center;
}
.area h2.all-blogs {
   margin-top: 70px;
   font-size: 30px;
   text-align: center;
}
.area .all-blogs-list{
   padding: 0 15px;
   padding-bottom: 50px;
}
span.genre{
   margin-top: 5px;
}


}