@charset "utf-8";

/* 全体の設定 */

body {
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 0px;
    padding: 0px;
    border: 0px;
    color: #3A3A3A;
    letter-spacing: 1px;
    background-color: white;
    font-size: 20px;

    font-family: "uddigikyokasho-pro", sans-serif;/*ゴシック体*/
    font-weight: 400;
    font-style: normal;
}
html {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
a {
    text-decoration: none;
}
h1 {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

/* pc,sp 切り替え */
.pc { display: block !important; }
.sp { display: none !important; }


/*花の装飾*/
.background-hana-1 {
    position: relative;
}
.background-hana-1 img{
    position: absolute;
    top: -126px;
    right: 8%;
    width: 125px;
}
.background-hana-2 {
    position: relative;
}
.background-hana-2 img{
    position: absolute;
    top: -100px;
    left: 10%;
    width: 60px;
}

/* -------------------- */

/* 初期状態：非表示で下にずらす */
.fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

/* 表示されたとき */
.fadeup.show {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------- */

/* トップ画像 */
.top-picture {
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  width: 100%;
  height: 800px;
  z-index: -999;
}
.top-picture .picture-01 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('/img/top_picture_pc.png');
  background-position: center;
}
.top-picture .text {
    position: absolute;
    top: 50%;
    right: 5%;
    font-family: "tot-shizukardmin-stdn", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: right;
    }
.top-picture .text h1 {
  color: white;
  font-size: 85px;
  font-weight: normal;
  line-height: 1.4em;
  text-shadow: #A4A4A4 1px 1px 15px, #A4A4A4 -1px 1px 15px, #A4A4A4 1px -1px 15px, #A4A4A4 -1px -1px 15px;
}

/* -------------------- */



/* トップのサブタイトル */
.top-subtitle {
    text-align: center;
    color: #9A95C3;
    margin: 40px 0px;
    line-height: 2em;
}
.top-subtitle h2 {
    font-size: 36px;
    margin: 0px;
    letter-spacing: 0.5em;
}
/*横線*/
.top-subtitle-catch {
    display: flex;
    align-items: center; /* 垂直中心 */
    justify-content: center; /* 水平中心 */
    color: #9A95C3;
    margin-bottom: 30px;
}
.top-subtitle-catch h2 {
    font-weight: normal;
    font-size: 40px;
    letter-spacing: 10px;
}
.top-subtitle-catch:before, .top-subtitle-catch:after {
    border-top: 2px solid;
    content: "";
    width: 3em; /* 線の長さ */
}
.top-subtitle-catch:before {
    margin-right: 1.5em; /* 文字の右隣 */
}
.top-subtitle-catch:after {
    margin-left: 1.5em; /* 文字の左隣 */
}
/* -------------------- */



/* コンセプト */
.top-concept {
    text-align: center;
    background-color: #F3F3F3;
    padding: 200px 20% 100px 20%;
}
.top-concept .message {
    display: flex;
    justify-content: center;
    text-align: left;
    line-height: 2.5em;
}
.top-concept .message p {
    margin: 40px 0px;
}
.top-concept .message .strong {
    color: #5A5581;
    font-size: 24px;
}
.top-concept .image {
    margin: 40px 0px 80px 0px;
}
.top-concept .image img {
    width: 800px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
/* -------------------- */



/* 料金 */
.top-menu {
    text-align: center;
    background-color: #EBEBEB;
    padding: 100px 20%;
}
.top-menu .table {
    margin: 40px 0px 80px 0px;
}
.top-menu .table .tr {
    display: flex;
    justify-content: center;
}
.top-menu .table .tr div:first-child {
    text-align: left;
    padding: 20px 0;
    flex-basis: 400px;
    border-bottom: 1px solid lightgray;
}
.top-menu .table .tr div:nth-child(2) {
    text-align: right;
    padding: 20px 0px 20px 0px;
    flex-basis: 400px;
    border-bottom: 1px solid lightgray;
}
.top-menu .table .tr div:nth-child(3) {
    text-align: left;
    padding: 20px 0px;
    flex-basis: 40px;
    border-bottom: 1px solid lightgray;
}
.top-menu .image {
    margin: 40px 0px 80px 0px;
}
.top-menu .image img{
    width: 800px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
/* -------------------- */



/* 侑里子の部屋からのお手紙 */
.top-letter {
    padding: 100px 20px;
    text-align: center;
    background-color: #F3F3F3;
}
.note2{
  background-color: #fff;
  margin: 0 20%;
  border: solid 1px #e6e6e6;
  padding: 0.3em 1em 2em 1em;
  box-shadow:2px 2px 0 rgba(0,0,0,.1);
  border-radius: 10px;
}
.note2 p {
    margin: 0px;
    text-align: left;
}
.sen2{
  background-color: #fff;
  background-image:
  linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 98%, #989898 100%);
  background-size: 100% 2em;
  line-height: 2em;
  padding: 2em 1em 0.2em 1em;
}
.top-letter-hana {
    position: relative;
}
.top-letter-hana img{
    position: absolute;
    top: -100px;
    right: 22%;
}
/* -------------------- */



/* お客様からの声 */
.top-review {
    padding: 100px 20%;
    text-align: center;
    background-color: #EBEBEB;
}
.top-review-contents {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: center;
    margin-bottom: 50px; 
}
/* 最後の要素だけ余白を消す 
.top-review-contents:last-child {
    margin-bottom: 0;
}*/
.top-review-item1 img {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); 
}
.top-review-item1 p{
    margin: 0px;
}
.top-review-item2 {
    margin-left: 20px;
    text-align: left;
}
.top-review-item2 .title {
    font-size: 24px;
    color: #9A95C3;
    margin: 5px 0px;
    line-height: 2em;
}
.top-review-item2 p {
    line-height: 1.5em;
}
.balloon1-left {
  /*吹き出し*/
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 2px 2px 4px #D1D1D1;
}
.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #fff;
}
.balloon1-left p {
  margin: 0;
  padding: 0;
}


/* 店舗情報 */

.top-access {
    text-align: center;
    background-color: #F3F3F3;
    padding: 100px 20px;
}
.top-access .table {
    margin: 40px 0px 80px 150px;
}
.top-access .table .tr {
    display: flex;
    justify-content: center;
}
.top-access .table .tr div:first-child {
    flex: 0 0 25%;  /* 左25% */
    color: #5A5581;
    text-align: left;
    padding: 20px;
    /*flex-basis: 200px;
    padding-left: 200px;*/
}
.top-access .table .tr div:last-child {
    flex: 0 0 75%;  /* 右75% */
    text-align: left;
    padding: 20px;
    /*flex-basis: 400px;*/
}
.top-access .google-map {
    margin: 40px 0px 80px 0px;
}
.top-access .handwritten-map {
    margin: 40px 0px 80px 0px;
}
.top-access-contents {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.top-access-contents img{
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
/* アクセス情報内のリンク（住所・電話） */
.top-access .table .tr div a {
  color: inherit;           /* 親要素の文字色を継承（青→通常色に） */
  text-decoration: underline; /* 常に下線を表示 */
  text-decoration-thickness: 1px;  /* 下線の太さを細めに */
  text-underline-offset: 2px;      /* 文字と線の間隔を少し空けると見やすい */
}

/* -------------------- */

/* フッタ */

#footer {
    background-color: #F3F3F3;
}
#footer .info {
    display: flex;
    justify-content: center;
}
#footer .info div {
    flex-basis: 50%;
    padding: 0px 20px;
}
#footer .info .left {
    text-align: right;
}
#footer .info .left img{
    width: 250px;
}
#footer .info .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#footer .info .right div {
    flex-basis: auto;
}
#footer .menu {
    display: flex;
    justify-content: center;
    margin: 20px 0px;
}
#footer .menu div {
    margin: 0px 20px;
    font-size: 20px;
}
#footer .menu div a {
    color: #5A5581;
}
#footer .copyright {
    font-size: 14px;
    text-align: center;
    color: white;
    background-color: #9A95C3;
    padding: 10px 0px;
}




/* レスポンシヴ */
@media screen and (max-width: 1280px) {/*タブレット*/

    
    /* コンセプト */
    .top-concept .image img {
        width: 100%;
    }

    /* -------------------- */

    /* 料金 */
    .top-menu .image img {
        width: 100%;
    }
}

@media screen and (max-width: 869px) {

    /* 全体の設定 */

    /* pc,sp 切り替え */
    .pc { display: none !important; }
    .sp { display: block !important; }

    /* -------------------- */

    /* トップ画像 */

    .top-picture {
        height: 1000px;
    }
    .top-picture .picture-01 {
        background-image: url('/img/top_picture_sp.png');
    }
    .top-picture .text {
        left: 20px;
        top: 180px;
    }
    .top-picture .text h1 {
        font-size: 36px;
        line-height: 2em;
    }

    /* トップのサブタイトル */
    .top-subtitle h2 {
        font-size: 28px;
    }
    .top-subtitle .small {
        font-size: 18px;
    }
    /*花の装飾*/
    .background-hana-1 img {
        top: -87px;
        right: 7%;
        width: 90px;
    }
    .background-hana-2 img {
        left: 6%;
        width: 45px;
    }

    /* -------------------- */

    /* コンセプト */
    .top-concept .image img {
        width: 100%;
    }
    .top-concept {
        padding: 100px 10px 100px 10px;
    }
    .top-concept .message p {
        font-size: 18px;
        line-height: 1.5em;
    }
    .top-concept .message .strong {
        color: #5A5581;
        font-size: 18px;
    }

    /* -------------------- */

    /* 料金 */
    .top-menu {
        padding: 100px 10px;
    }
    .top-menu .image img {
        width: 100%;
    }
    .top-menu .table {
        font-size: 16px;
    }
    .top-menu .table .tr div:first-child {
        padding: 20px 0px 20px 10px;
        flex-basis: 300px;
    }
    .top-menu .table .tr div:nth-child(2) {
        padding: 20px 10px 20px 0px;
        flex-basis: 100%;
    }
    .top-menu .table .tr div:nth-child(3) {
        padding: 20px 0px;
        flex-basis: 20px;
    }

    /* -------------------- */

    /* 侑里子の部屋からのお手紙 */
    .top-subtitle-catch h2 {
        font-weight: normal;
        font-size: 26px;
        letter-spacing: 0px;
        line-height: 1.2em;
    }
    .top-subtitle-catch:before, .top-subtitle-catch:after {
        width: 1.5em; /* 線の長さ */
    }
    .top-letter {
        padding: 100px 10px;
    }
    .note2 {
        font-size:18px;
        margin: 0;
    }
    .top-letter-hana img {
        right: 0;        /* 右端にぴったり寄せる */
        top: -60px;      /* 必要なら縦位置を調整（例：小さめに上げる） */
        width: 120px;    /* スマホ用にサイズ調整したい場合 */
    }

    /* -------------------- */


    /* お客様からの声 */
    .top-review {
        font-size:18px;
        padding: 100px 10px;
    }
    .top-review-contents {
        justify-content: center; /* 中央揃え */
        flex-wrap: wrap;
    }
    .top-review-item2 {
        margin-left: 0;
    }
    .balloon1-left { /*吹き出し*/
        position: relative;
        display: inline-block;
        margin:  20px 0;
        padding: 7px 10px;
        min-width: 120px;
        max-width: 100%;
        background: #fff;
    }
    .balloon1-left:before {
        content: "";
        position: absolute;
        top: -14px;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-bottom: 15px solid #fff;
    }

    /* -------------------- */



    /* 店舗情報 */
    .sen2 img {
        width: 100%;
    }

    /* -------------------- */


    /* 店舗情報 */
    .top-access {
        padding-bottom: 50px;
    }
    .top-access .table {
        margin: 0px;
    }
    .top-access .google-map iframe {
        width: 100%;
    }
    .top-access .handwritten-map img {
        width: 100%;
    }
    .top-access .table .tr {
        justify-content: center;
    }
    .top-access .table .tr div:first-child {
        text-align: right;
        flex-basis: 30%;
        padding: 10px 10px 10px 0px;
    }
    .top-access .table .tr div:last-child {
        text-align: left;
        padding: 10px 0px 10px 10px;
        flex-basis: 70%;
    }
    .top-access-contents {
        font-size: 18px;
    }
    .top-access-contents img {
        width: 100%;
    }

    /* -------------------- */

    /* フッタ */

    #footer .info {
        display: block;
    }
    #footer .info .left {
        text-align: center;
    }
    #footer .info .left img {
        width: 80%;
        height: auto;
        margin-bottom: 30px;
    }
    #footer .info .right {
        display: flex;
        justify-content: center;
        gap: 10px; /* アイコン同士の余白 */
    }
    #footer .info .right img {
        display: block;
        margin: 0 auto;
        width: 50%;
        height: auto;
    }
    #footer .copyright {
        font-size: 10px;
    }