@charset "UTF-8";
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 100%;
}
body {
    line-height: 1.7;
}
p{
    font-size: 0.9rem;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
}
li{
    font-family: sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
}

header{
    width: 100%;
    height: 80px;
    background-color: black;
    position: relative;
    position: fixed;
    z-index: 1000;
}
nav a{
    color: white;

}
.openbtn{
    display: none;
}
.sp-only{
    display: none;
}
.pc-only{
    display: block !important;
}
.area01{
    height: 100vh;
    background-image: url(../image/image01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
header h1 img {
    display: block;
}
header > div {
    width: 90%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5em;
    align-items: flex-end;
    position: absolute;
    bottom: 10px;
    padding-left: 5%;
}
nav{
    max-width: 600px;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    gap: 1em; 
}





/* -----------予約ボタン----------- */
.reservation {
    position: fixed;
    top: 80px;
    right: 50px;
    z-index: 10;
    color: #004997;
    font-weight: bold;
    padding: 2%;
    background-color: #E7DB32;
    width: 240px;
}
.btn-fix{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0px 8px 0px 0px;
    width: 195px;
    color: #004997;
    font-size: 1.2rem;
    background-color: #E7DB32;
    line-height: 1.6rem;

}
.btn-fix::before{
    content: '';
    position: absolute;
    top: 50%;
    right: -3px;
    transform: translateY(-50%);
    width: 14%;
    height: 55%;
    border: 2px solid #004997;
    border-radius: 20px;
}
.btn-fix::after{
    content: '';
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 4px solid #004997;
    border-right: 4px solid #004997;
}


/* -----------area01----------- */

.area01 .container{
    width: 75vw;
    display: grid;
    grid-template-columns: 60% 40%;
    padding: 5% 0;
    align-items: center;
    margin-top: 90px;
}
.area01 h2{
    font-size: 2.5rem;
}
.area01 p{
    font-size: 0.8rem;
    font-weight: bold;
    margin: 1.5rem 0;
}
.area01 .container > img {
    display: block;
    margin: 0 auto;
}
.area01 ul {
list-style-type: none; /* デフォルトのリストスタイルを削除 */
    padding-left: 0; /* デフォルトのパディングを削除 */
}

.area01 li {
    text-indent: -1em; /* テキスト全体を1em分左に移動 */
    padding-left: 1em; /* 左のパディングを1emに設定 */
    position: relative; /* これにより、:before疑似要素の位置を基準にする */
}

.area01 li:before {
    /* content: '・'; */
    position: absolute; /* 絶対位置を指定 */
    left: 0; /* 左端に配置 */
}

/* -----------コンタクトフォーム----------- */

.area01_contact{
    height: 50vh;
    background-image: url(../image/image01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}


.area01_contact .container{
    width: 75vw;
    display: grid;
    grid-template-columns: 60% 40%;
    padding: 5% 0;
    align-items: center;
    margin-top: 90px;
}
.area01_contact h2{
    font-size: 2.5rem;
}
.area01_contact p{
    font-size: 0.8rem;
    font-weight: bold;
    margin: 1.5rem 0;
}
.area01_contact .container > img {
    display: block;
    margin: 0 auto;
}
.area01_contact ul {
list-style-type: none; /* デフォルトのリストスタイルを削除 */
    padding-left: 0; /* デフォルトのパディングを削除 */
}

.area01_contact li {
    text-indent: -1em; /* テキスト全体を1em分左に移動 */
    padding-left: 1em; /* 左のパディングを1emに設定 */
    position: relative; /* これにより、:before疑似要素の位置を基準にする */
}

.area01_contact li:before {
    /* content: '・'; */
    position: absolute; /* 絶対位置を指定 */
    left: 0; /* 左端に配置 */
}
/* -----------area02----------- */

.area02 {
    width: 100vw;
    height: 22vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.area02 img {
    max-width: 100%; 
    max-height: 80%;
    display: block;
}


/* -----------area03----------- */
.area03 {
    position: relative;  /* これを追加 */
    /* 他のスタイルはそのまま */
}
.area03{
    width: 100vw;
    height: 70vh;
    display: grid;
    place-items: center;
    color: white;
    background-image: url(../image/image02.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 4%;
}
.area03 > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.area03 h3{
    font-size: 2rem;
    margin-top: 5rem;
    line-height: 2.5rem;
}
.lead{
    font-size: 1.2rem;
    font-weight: bold;
    margin: 1rem 0 2.2rem 0;
}
.area03 > div > div {
    color: black;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    margin: 0 auto;
}


/* -----------area04----------- */

.area04{
    padding: 0 4%;
}
.area04 h3{
    font-size: 1.3rem;
    text-align: center;
    margin: 2rem 0;
}
.area04 .step {
    width: 80vw;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.area04 .step > div:first-child {
    flex: 0 0 50%;
    padding-right: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.area04 .step > div:first-child > p {
    text-align: center;
    width: 100%;
    letter-spacing: 0.1rem;
}
.area04 .step > div:last-child {
    flex: 0 0 50%;
    padding-left: 4%;
}
.step ol li{
    font-weight: normal;
}
.tel-no{
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
}
.tel-container {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* 画像とテキストの間隔 */
    padding-bottom: 1rem;
}
.tel-container a{
    color: black;
}
.btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px 25px 15px 13px;
    width: 185px;
    color: #fff;
    font-size: 0.8rem;
    border: 1px solid #717070;
    background-color: #004BB0;
    border-radius: 20px;
    line-height: 1rem;
}
.btn::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 12%;
    height: 30%;
    border: 2px solid #fff;
    /* background-color: #cae6b7; */
    border-radius: 20px;
}
.btn::after{
    content: '';
    transform: rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}
.ap-fo{
    text-align: center; /* テキストを中央揃えに */
    display: flex; /* フレックスボックスを使う */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
}
.ap-fo a{
    text-align: left;
}
.btn03{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px 25px 15px 13px;
    width: 200px;
    color: #fff;
    font-size: 0.9rem;
    border: 1px solid #717070;
    background-color: #004BB0;
    border-radius: 20px;
    line-height: 1.1rem;
}
.btn03::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 12%;
    height: 30%;
    border: 2px solid #fff;
    /* background-color: #cae6b7; */
    border-radius: 20px;
}
.btn03::after{
    content: '';
    transform: rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}
.area04 iframe {
    display: block;
    margin: 0 auto;    
}
.responsive-iframe-container {
    position: relative;
    max-width: 1000px; /* 最大幅を1000pxに */
    width: 100%; /* 幅を100%に */
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    margin: 0 auto; /* 中央寄せ */
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* スクロールすると出る */
/* .fadeUpTrigger{
    opacity: 0;
}
.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
    from{
      opacity: 0;
      transform: translateY(100px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
} */
/* ----------------- */

/* PCデバイス向けのスタイル */
/* @media (min-width: 768px) {
    .fadeUpTrigger img {
        max-width: 800px; 
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .fadeUpTrigger {
        padding-left: 4%;
        padding-right: 4%;
    }
} */


/* -----------area05----------- */

.area05{
    width: 100vw;
    height: 60vh;
    display: grid;
    grid-template-columns: 60% 40%;
    padding-top: 3rem;
}

.image-cover{
    background-image: url(../image/image03.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.area05 > div:nth-child(2) { 
    display: flex;
    flex-direction: column;  /* これを追加して縦並びにします */
    justify-content: center; /* 左右中央揃え */
    align-items: center;     /* 上下中央揃え */
    text-align: center;      /* テキストを中央揃えにする */
    color: white;
    font-weight: bold;
    background-color: #040000;
}
.area05 p:first-child{
    font-size: 1.2rem;
    line-height: 1.5rem;
}
.area05 h3{
    padding-top: 1.5rem;
    font-size: 1.5rem;
}
.yellow{
    color: #E7DB32;
    padding: 3rem 0;
}
    
.btn02{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px 25px 15px 13px;
    width: 275px;
    color: #fff;
    font-size: 18px;
    border: 1px solid #717070;
    background-color: #004BB0;
    border-radius: 20px;
}
.btn02::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 8%;
    height: 36%;
    border: 2px solid #fff;
    /* background-color: #cae6b7; */
    border-radius: 20px;
}
.btn02::after{
    content: '';
    transform: rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

/* -----------area06----------- */

.area06 {
    width: 100vw;
    height: 22vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.area06 img {
    max-width: 100%; 
    max-height: 70%;
    display: block;
    margin-top: 1.5rem;
}


/* -----------area07----------- */
.area07 {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0  0  3rem 0;
}

.area07 h2 {
    font-size: 2rem;
    text-align: center; 
    margin: 2rem 0;
}
.iframe-blog{
    width: 80vw;
    margin: 0 auto;
}
.blog-area{
    width: 80vw;
    max-width: 1000px;
    margin: 0 auto;
}
#blog-ifrme-area{
    width: 80vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    margin: 0 auto;
}




/* -----------area08----------- */
.area08 {
    text-align: center;
    padding: 3rem 0 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.area08 > div{
    width: 80vw;
    max-width: 850px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto;
    gap: 1rem; 
    padding: 1rem 0;
}
.area08 > div > img {
    margin: auto;
    display: block;
}
.area08 h2{
    font-size: 2rem;
}
.area08 p:first-of-type {
    font-size: 1.1rem;
    font-weight: bold;
}
.area08 p:nth-of-type(2) {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 1rem 0 2rem 0;
}


/* -----------コンタクトフォームエリア----------- */

.con-form{
    padding-bottom: 5rem;
}


.Form {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  @media screen and (max-width: 480px) {
    .Form {
      margin-top: 40px;
    }
  }
  .Form-Item {
    border-top: 1px solid #ddd;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 480px) {
    .Form-Item {
      padding-left: 14px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
    }
  }
  .Form-Item:nth-child(5) {
    border-bottom: 1px solid #ddd;
  }
  .Form-Item-Label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
  }
  .Form-Item-Label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label.isMsg {
      margin-top: 0;
    }
  }
  .Form-Item-Label-Required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #004BB0;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
    }
  }
  .Form-Item-Input {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Item-Textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 1rem;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Btn {
    border-radius: 6px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
    display: block;
    letter-spacing: 0.05em;
    background: #004BB0;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
  }
  @media screen and (max-width: 480px) {
    .Form-Btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
    }

    .con-form02 h2{ 
        font-size: 2rem;

    }
    .container .con-form03 { 
        display: none !important;

    }

  }


  .toiwase-form{
    width: 80vw;
    text-align: center;
    margin:  0 auto;
    padding: 8% 4%;
  }

  .modorubtn a{
    color: black;
    margin-top: 3rem;
  }