@charset "UTF-8";

p {
    color: #3D3D3D;
    font-family: "Zen Maru Gothic";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 4.8px;
}
/* TB→SP */
@media screen and (max-width: 768px){
   
    p {
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 1.4px;
    }
    h2 {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    h3 {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }  
}

/* main ↓↓ */
.temple_yoga_inside_box {
    display: flex;
    padding: 70px 0% 0px 0%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}
.section_temple_yoga {
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 130px;
    align-self: stretch;
}
.temple_yoga_top_img {
    opacity: 0;               /* 初期状態では画像を見えなくする */
    transform: translateY(100px); /* 下から100pxに位置をずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を設定 */
}
.temple_yoga_top_img.visible {
    opacity: 1;               /* 可視化 */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_yoga_txt_box1 {
    display: flex;
    width: 36%;
    padding: 80px 0%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    align-self: stretch;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.temple_yoga_txt_box1.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_yoga_title_txt_box {
    display: flex;
    padding: 20px 0%;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: rgba(195, 218, 183, 0.20);
}
.temple_yoga_title_txt {
    color: #3D3D3D;
    text-align: center;
    font-family: "Yuji Syuku";
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 9px;
    text-shadow: 0px 4px 4px rgba(51, 51, 51, 0.15);
}
.temple_yoga_txt_box_1_1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.temple_yoga_txt_1 {
    color: #3D3D3D;
    text-align: center;
    font-family: "Yuji Syuku";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.7;
    letter-spacing: 5.4px;
    white-space: nowrap;
}
.temple_yoga_txt_box2 {
    display: flex;
    width: 40%;
    padding: 30px 0%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.temple_yoga_txt_box_2_1 {
    display: flex;
    padding: 50px 5%;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    align-self: stretch;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.temple_yoga_txt_box_2_1.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_yoga_img1 {
    opacity: 0;               /* 初期状態では画像を見えなくする */
    transform: translateY(100px); /* 下から100pxに位置をずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を設定 */
}
.temple_yoga_img1.visible  {
    opacity: 1;               /* 可視化 */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_yoga_txt_2 {
    color: #3D3D3D;
    font-family: "Yuji Syuku";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3;
    text-align: left;
    white-space: nowrap;
}
.sns_link {
    position: relative;
    display: inline-block; /* インラインブロックに変更 */
    transition: transform 0.3s ease;  /* 変化の速度やタイミングを設定 */
    transform: scale(1);  /* 初期状態でのスケール１倍 */
}
.sns_link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 線が伸びる最大幅 */
    height: 2px; /* 線の太さ */
    background-color: #333; /* 線の色 */
    transform: scaleX(0); /* 最初は線を隠す */
    transform-origin: left; /* 左から伸ばす */
    transition: transform 0.3s ease; /* 線の伸び方 */
}
.sns_link:hover::after {
    transform: scaleX(1); /* 線を100%の長さにする */
}
.sns_link:hover {
    color: #7E7F7E; /* ホバー時にテキストの色を変更 */
    transform: scale(1.2); /* マウスオーバー時に1.2倍に拡大 */
}
.temple_yoga_img2 {
    opacity: 0;               /* 初期状態では画像を見えなくする */
    transform: translateY(100px); /* 下から100pxに位置をずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を設定 */
}
.temple_yoga_img2.visible {
    opacity: 1;               /* 可視化 */
    transform: translateY(0);  /* 元の位置に戻す */
}
.section_access {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}
.access_title_box {
    display: flex;
    width: 100%;
    padding: 20px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(195, 218, 183, 0.20);

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.access_title_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_yoga_title_txt_2 {
    color: #3D3D3D;
    text-align: center;
    font-family: "Zen Old Mincho";
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 9px; 
}
.temple_yoga_img3 {
    opacity: 0;               /* 初期状態では画像を見えなくする */
    transform: translateY(100px); /* 下から100pxに位置をずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を設定 */
}
.temple_yoga_img3.visible {
    opacity: 1;               /* 可視化 */
    transform: translateY(0);  /* 元の位置に戻す */
}
.access_box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    align-self: stretch;
}
.temple_access_txt_box {
    display: flex;
    padding: 0px 10%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.temple_access_txt_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_access_txt {
    font-size: 1.5rem;
    white-space: nowrap;
    
}
.map-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.map-container.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.temple_url {
    color: #3D3D3D;
    text-align: center;
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 4px;
    text-decoration-line: underline;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.temple_url.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.access_box2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.station_box {
    display: flex;
    padding: 50px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
}
.station_txt_box {
    display: flex;
    padding: 10px 30px;
    justify-content: center;
    align-items: center;
    border: 1px solid #0C5306;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.station_txt_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.station_txt_pc {
    white-space: nowrap;
}
.station_txt_sp {
    display: none;
}
.bus_txt {
    color: #3D3D3D;
    font-family: "Zen Maru Gothic";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 5px;
}
.bus_no3_4 {
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    white-space: nowrap;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.bus_no3_4.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.bus_txt_pc {
    text-align: left;
    line-height: 3;
    white-space: nowrap;
}
.bus_txt_sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .temple_yoga_txt_2 {
        font-size: 1.4rem;
        line-height: 3;
        letter-spacing: 2px;
    }
}

/* TB→SP */
@media screen and (max-width: 768px) {
.temple_yoga_inside_box {
    padding: 60px 2% 0px 2%;
    gap: 50px;
}
.section_temple_yoga {
    flex-direction: column;
    gap: 50px;
}
.temple_yoga_txt_box1 {
    width: 100%;
    gap: 50px;
    padding: 10px 0%;
}
.temple_yoga_title_txt_box {
    padding: 10px 0px;
}
.temple_yoga_title_txt {
    font-size: 1.8rem;
    letter-spacing: 4px;
}
.temple_yoga_txt_box_1_1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.temple_yoga_txt_1 {
    line-height: 2.7;
    font-size: 1.4rem;
    letter-spacing: 5.4px;
} 
.temple_yoga_txt_box2 {
    width: 100%;
    align-items: flex-start;
    gap: 30px;
    padding: 0px;
}
.temple_yoga_txt_box_2_1 {
    align-items: flex-start;
    align-items: center;
    gap: 20px;
    padding: 0px;
}
.temple_yoga_txt_2 {
    font-size: 1.4rem;
    line-height: 3;
    letter-spacing: 2px;
}
.section_access {
    gap: 50px;
    overflow: hidden;
}
.access_title_box {
    padding: 10px 0px;
}
.temple_yoga_title_txt_2 {
    font-size: 1.8rem;
    letter-spacing: 4px;
}
.map-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.googlemap {
    flex: 1 0 0;
    align-self: stretch;
}
.access_box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.temple_access_txt_box {
    display: flex;
    padding: 0px 10%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
.temple_access_txt {
    font-size: 1.4rem;
}
.temple_url {
    font-size: 15px;
    letter-spacing: 2.25px;
}
.access_box2 {
    display: flex;
    padding: 0px 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.station_box {
    display: flex;
    width: 100%;
    padding: 0px 0%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
}
.station_txt_box {
    display: flex;
    padding: 10px 0%;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.station_txt_pc {
    display: none;
}

.station_txt_sp {
    display: inline;
    color: #3D3D3D;
    letter-spacing: 2.25px;
    text-align: left;
    line-height: 2.5;
}
.bus_no3_4 {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    align-self: stretch;
}
.bus_txt_pc {
    display: none;
}
.bus_txt {
    font-size: 1.6rem;
}
.bus_txt_sp {
    display: inline;
    text-align: left;
    line-height: 3;
    letter-spacing: 3px;
}
}

.temple_yoga_img4 {
    opacity: 0;               /* 初期状態では画像を見えなくする */
    transform: translateY(100px); /* 下から100pxに位置をずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を設定 */
}
.temple_yoga_img4.visible {
    opacity: 1;               /* 可視化 */
    transform: translateY(0);  /* 元の位置に戻す */
}
/* main ↑↑ */