h1,h2,h3,p {
    letter-spacing: 0.08em;
    transition: all .4s ease-in-out
}

.underTopWrap {
    position: relative;
    width: 100%;
    overflow: hidden
}

.satisfy-regular {
  font-family: "Satisfy", cursive;
  font-weight: 400;
  font-style: normal;
}

@media (min-width: 414px) {
    html .br414 {
        display:none
    }
}

@media (min-width: 768px) {
    html .br768 {
        display:none
    }
}

@media (min-width: 1024px) {
    html .br1024 {
        display:none
    }
}

@media (min-width: 1280px) {
    html .br1280 {
        display:none
    }
}

.br1280Block {
    display: none
}

@media (min-width: 1280px) {
    .br1280Block {
        display:block
    }
}

.commonImg {
    width: 100%;
    max-width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top;
    transition: all .4s ease-in-out
}

.h2TitX {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.h2TitX .filterTxtX {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
    -webkit-background-clip: text;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.h2TitX .filterTxt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
    -webkit-background-clip: text;
    font: normal 500 150px/196px "EB Garamond",serif;
    color: transparent
}

.h2TitX .enTit {
    position: relative;
    z-index: 2;
    letter-spacing: 0.05em;
    background: linear-gradient(180deg, #578099 0%, #578099 100%);
    -webkit-background-clip: text;
    font: normal 500 56px/73px "EB Garamond",serif;
    color: transparent
}

.h2TitX .jpTit {
    position: relative;
    z-index: 2;
    font: normal normal 18px/26px "Noto Serif JP",serif;
    color: #333
}

h3.underColorTit {
    width: fit-content;
    text-align: center;
    background: linear-gradient(transparent 60%, rgba(157,192,212,0.4) 90%, transparent 10%);
    font: normal 500 24px/35px "Noto Serif JP",serif;
    color: #333
}

h4.underColorTit {
    width: fit-content;
    background: linear-gradient(transparent 60%, rgba(157,192,212,0.4) 90%, transparent 10%);
    letter-spacing: 0.04em;
    font: normal 500 24px/35px "Noto Serif JP",serif;
    color: #333
}

.commLink {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 217px;
    height: 55px;
    overflow: hidden;
    border-radius: 100px;
    border: 1px solid #9DC0D4;
    background: linear-gradient(180deg, #FFF 0%, #FFF 100%);
    transition: all .4s ease-in-out
}

.commLink:hover:after {
    transform-origin: left top;
    transform: scale(1, 1)
}

.commLink:hover .commLinkTxt {
    color: #454545;
}

.commLink:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
    border-radius: 100px;
    background: linear-gradient(180deg, #9DC0D4 0%, #9DC0D4 100%);
}

.commLink .commLinkTxt {
    position: relative;
    z-index: 2;
    text-align: center;
    font: normal 700 16px/23px "Noto Serif JP",serif;
    color: #9DC0D4;
}

.underTopWrap {
    /* margin-top: 74px; */
    aspect-ratio: 1440 / 400;
    min-height: 400px
}

.underTopWrap>img {
    min-height: 400px;
    height: 100%
}

.underTopWrap .h1X {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px
}

.underTopWrap .h1X .jpTit {
    font: normal 700 28px/45px "Noto Serif JP",serif;
    color: #FFF
}

.underTopWrap .h1X .enTit {
    letter-spacing: 0.39em;
    font: normal 600 20px/26px "EB Garamond",serif;
    color: #FFF
}

.notoSerif{
    font-family: "Noto Serif JP",serif;
}


/*# sourceMappingURL=common.css.map */