html {
  color: #2d0508;
}
.mincho{
  font-family: 'Shippori Mincho', serif;
}
a{
    text-decoration: none;
}
h1{
    font-family: 'Shippori Mincho', serif;
    color: #FFFFFF;
    font-size: 64px;
    font-weight: 700;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
    h1{
        font-size: 42px;
    }
}
h1 img{
    width:90%;
    max-width: 650px;
}
h2{
    font-family: 'Shippori Mincho', serif;
    margin: 0 0 16px;
}
.area_yellow h2{
    color:#2d0508;
}
.area_red h2, .area_wall h2{
    color:#f5d682;
}
.btn{
    background-image: url(img/btn.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 58px;
    justify-content: center;
    margin: -28px 0px 0px 0px;
    transform: scale(1, 1);
    width: 280px;
    text-decoration: none;
    color: #f5d682;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Shippori Mincho', serif;
    z-index: 2;
}

#title_back {
    background: #5e1711;
    background-image: url(img/background.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    padding: 70px 0px 40px 0px;
    max-width: 780px;
    width: 100%;
}
.title_tag{
    background-color: rgb(245 214 130 / 0.65);
    border-radius: 8px;
    margin: 20px 0px 0px 0px;
    padding: 14px;
    font-weight: 700;
    line-height: 1.6;
    width: 280px;
    text-align: center;
}
.area_wall{
    background: #5e1711;
    background-image: url(img/back.webp);
    margin: 0 auto;
    max-width: 780px;
    width: 100%;
    text-align: left;
}
.area_wall p{
    color: #f5d682;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 40px;
}
.area_yellow{
    background: #f5d682;
}
.area_red{
    background: #5e1711;
}
section{
    margin: 0 auto;
    max-width: 780px;
    width: 100%;
    text-align: center;
    padding: 40px 0;    
}
article{
    margin: 0 auto;
    max-width: 780px;
    width: 100%;
    text-align: center;
    padding: 40px 0 16px;    
}
.line{
    flex: none;
    height: 1px;
    margin: 12px 0px 14px;
    width: 60px;
    max-width: 100%;
}
.area_yellow .line{
    background: #2d0508;
}
.area_red .line,.area_wall .line{
    background: #f5d682;
}
.letter{
    padding: 40px 60px;
}
@media screen and (max-width: 767px) {
    .letter{
        padding: 40px 20px;
    }
}

.letter img{
    width: 100%;
}
.uranai{
    background-image: url(img/letter2.webp);
    background-position: center top;
    background-repeat: repeat-y;
    background-size: contain;
    width: 100%;
}
.uranai p{
    font-size: 14px;
    line-height: 1.7;
    padding: 8px 38px 12px 38px;
    text-align: left;
}
.subtitle{
    margin:16px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:12px;
}
.subtitle h3{
    font-family: 'Dancing Script', cursive;
    color: #5e1711;
    font-size: 20px;
    margin: 0;
    padding: 0;
}
.subtitle h3.jp{
    font-family: 'Shippori Mincho', serif;
    color: #5e1711;
    font-size: 16px;
    margin: 0;
    padding: 0px;
}
.sub_line{
    background: #5e1711;
    flex: none;
    height: 1px;
    margin: 8px 0px;
    width: 40px;
}

.cont1 .swiper-slide {  
  background-image: url(img/frame_samaya.webp);
}
.cont1 img {
  width: 160px;
  height: auto;
  padding: 48px;
}

.cont2 .swiper-slide {  
  background-image: url(img/frame_lenormand.webp);
}
.cont2 img {
  width: 160px;
  height: auto;
  padding: 48px;
}

.cont3 .swiper-slide {  
  background-image: url(img/frame_thoth.webp);
}
.cont3 img {
  width: 180px;
  height: auto;
  padding: 36px;
}

.cont4 .swiper-slide {  
  background-image: url(img/frame_blue.webp);
}
.cont4 img {
  width: 170px;
  height: auto;
  padding: 36px;
}

.cont5 img {
  width: 210px;
  height: auto;
  padding: 0;
}