/*----------------------------------------
  全体のの設定
----------------------------------------*/
* {
    box-sizing: border-box;
}
body, html {
    overflow-x: hidden;
    max-width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:rgb(95,96,97);
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 75px;
}
.page-main {
  flex: 1;  /* メイン部分が残りの高さを取る */
  margin-top: 40px; /* ヘッダーの高さ分だけ下げる */
  margin-bottom: 100px;
}
main{
    font-family: 'Yusei Magic', sans-serif;
}
main#edit-main{
    font-family: "Noto Sans JP", sans-serif;
}
article.user-agreement,
article.privacy-policy,
.updates-article{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
/*----------------------------------------
  ヘッダーの設定
----------------------------------------*/
.page-header{
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: fixed;  /* 固定位置 */
    top: 0;           /* 画面上部に配置 */
    left: 0;          /* 左端に配置 */
    width: 100%;      /* 横幅を画面いっぱいに */
    z-index: 1000; 
}
.header-logo a{
    text-decoration: none;
    color: #000000;
    font-size: 1.5rem;
}
.logo-image{
  height: 40px; /* 高さは自動調整 */
  width: auto; /* ロゴの幅を調整 */
}
.header-wrapper{
    width:95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
.img-404{
  width: 100%;
  height: auto;
}
.header-buttons{
  display: flex;
  align-items: center;

  gap: 10px;
}
/*----------------------------------------
  固定フッター
----------------------------------------*/
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  padding-bottom: 15px;
  background-color: #fff; /* 背景色を必要に応じて変更 */
  border-top: 1px solid #ccc;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.footer-nav-ul {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav-li{
  flex: 1; 
  padding-top: 5px;
} 
.footer-nav-a{
  text-decoration: none;
  color: rgb(120, 120, 120);;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer-nav-a i{
  font-size: 25px;
}
.footer-nav-a div{
  font-size: 12px;
}
.footer-nav-li-select{
  border-top: 5px solid rgb(175, 41, 187);

}
.footer-nav-li-select .footer-nav-a{
  color: rgb(175, 41, 187);
}

.karidome{
  margin-top:500px;
  margin-bottom: 500px;

}
/*----------------------------------------
  ハンバーガーメニュー
----------------------------------------*/
.btn-trigger {
    position: relative;
    width: 30px;
    height: 29px;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    padding: 4px;     /* 内側に余白を追加 */
    margin: 5px 10px;
  }
.btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgb(95,96,97);;
    border-radius: 4px;
    transition: all .5s;
    box-sizing: border-box;
  }
.btn-trigger span:nth-of-type(1) {
    top: 0;
  }
.btn-trigger span:nth-of-type(2) {
    top: 12px;
  }
.btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }
/* バツ印 */
#btn08.active span:nth-of-type(1) {
    transform: translateY(13px) rotate(-315deg);
  }
#btn08.active span:nth-of-type(2) {
    opacity: 0;
  }
#btn08.active span:nth-of-type(3) {
    transform: translateY(-13px) rotate(315deg);
  }
  
/* メニュー本体（初期状態） */
.header-nav-wrapper {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255);
    /*backdrop-filter: blur(8px);*/
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: all 0.4s ease;
    padding: 1rem;
    border-bottom: 1px solid #ccc;
    z-index: 50;
    justify-content: center;
  }
  
/* メニュー表示時 */
.header-nav-item {
  position: relative;
  padding: 0;
}

.header-nav-wrapper.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .header-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    list-style: none;
    align-items: flex-start; /* 左寄せに変更 */
    width: 100%;
}

.header-nav-item {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px dashed #999; /* 点線の区切り */
}

.header-nav-item:last-child {
    border-bottom: none; /* 最後のアイテムは区切りを消す */
}

.header-nav-item a {
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    display: block;
    width: 100%;
    padding-left: 8px;
}

/*----------------------------------------
  フッターの設定
----------------------------------------*/
  /*フッターのスタイル*/
footer {
    background-color: #000000;
    color: #ffffff;
    padding: 15px 10px;
    text-align: center;
    font-size: 14px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;   /* スマホは縦並び */
    gap: 12px;
    align-items: center;
}

footer ul li a.footer-content {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

footer ul li a.footer-content:hover {
    color:rgb(211,134,146); /* ホバー時アクセントカラー */
}

footer ul li a.footer-content i.fas.fa-external-link-alt {
    margin-left: 5px;
    font-size: 0.8em;
    vertical-align: middle;
}

footer small {
    display: block;
    margin-top: 8px;
    color: #cccccc;
}

/*----------------------------------------
  content全体の設定
----------------------------------------*/
.content-main{
    width: 100%;
    margin: 0; /* 外側の余白（上下と中央配置） */
    background-image: repeating-linear-gradient(
        -45deg,           /* ストライプの角度 */
        #f2f3f7 0,        /* ストライプの色（薄いグレー） */
        #f2f3f7 3px,      /* ストライプの太さ（3pxの間隔） */
        transparent 3px,  /* 透明部分 */
        transparent 6px   /* 透明部分（3pxから6pxまで） */
    );
}
.main-wrapper{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    margin-bottom: auto;
    min-height: calc(100vh - 170px);
}
.title-visual{
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    position: relative; /* 相対位置指定 */
    background-color: #fff;
}
.title-visual:before{
    border-bottom: 30px solid transparent; /* 上側に透明の三角形 */
    border-left: 30px solid #aba7b0; /* 左側の三角形（色は#c6d4c6） */
    content: ''; /* 擬似要素にコンテンツなし */
    display: block; /* ブロック要素として表示 */
    position: absolute; /* 絶対位置指定 */
    top: 0px; /* 上から0px */
    left: 0px; /* 左から0px */
}
.title-visual:after{
    border-left: 30px solid transparent; /* 右側に透明の三角形 */
    border-bottom: 30px solid #aba7b0; /* 下側の三角形（色は#c6d4c6） */
    content: ''; /* 擬似要素にコンテンツなし */
    display: block; /* ブロック要素として表示 */
    position: absolute; /* 絶対位置指定 */
    bottom: 0px; /* 下から0px */
    right: 0px; /* 右から0px */
}
.siori-title{
    font-family: 'Yusei Magic', sans-serif;
    text-align: center;
    font-size: 40px;
    margin:0;
    padding:0;
    margin-top: 30px;
}
.siori-sub-title{
    font-family: 'Yusei Magic', sans-serif;
    text-align: center;
    font-size: 20px;
    margin-top: -10px;
}
.siori-title-date{
    font-family: 'Yusei Magic', sans-serif;
    text-align: center;
    font-size: 14px;
    margin-top: 30px;
    padding-bottom: 10px;
}

/* セロテープ風 */
.box5-6 {
    position: relative; /* タイトルをボックス内の左上に配置するための基準 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    background-color: #ffffff; /* ボックス背景色 */
}

.box5-6 .box-title {
    background-color: rgb(255 255 255 / .1); /* テープ背景色と透過 */
    border-left: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ左 */
    border-right: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ右 */
    box-shadow: 0 0 5px rgb(0 0 0 / .12); /* テープ影 */
    transform: rotate(-2deg); /* テープの傾き */
    color: #666; /* タイトル文字色 */
    padding: 10px 20px; /* タイトルの余白 */
    line-height: 1; /* タイトルの行の高さ */
    position: absolute; /* 親要素の左上に固定 */
    top: -1em; /* 上端に配置 */
    left: 1em; /* 左端に配置 */
    display: inline-block; /* タイトルの幅を内容に合わせる */
    font-size: 0.9em; /* タイトルのフォントサイズ */
    width: auto; /* タイトル幅を内容に応じて可変にする */
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-6 .box-content {
    padding: 2.5em 1em 1em; /* コンテンツ内の余白 */
}

.list-ul{
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.list-li{
    font-size:18px;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px dotted #818181;
}
.list-li:last-child{
    border-bottom:none;
}
.list-description {
    margin-left: 20px;
    font-weight: 400;
}

.precaution{
    padding-left: 0;
    margin-left: 15px;
}

.precaution li{
    margin-bottom: 10px;
}

.balloon1-top {
  position: relative;
  display: inline-block;
  width: 90%;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 10%;
  margin-right: 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #656565;
  font-size: 14px;
  background: #f6f6f6;
}
input{
    height: 100%;
    width: auto;
}

.list-li-wrapper{
    display: flex;
    align-items: center;
    gap:6px;
}

/*----------------------------------------
  日付部分のデザイン
----------------------------------------*/
.tab-navigation{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#current-date-label{
    font-size: 30px;
}
#prev-date,
#next-date{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgb(95,96,97);
    color:#fff;
    font-size: 18px;
    margin: 0;
    padding: 0;
}
.plan-title{
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #c6c6c6;
}

.timeline-entry-wrapper{
    display: flex;
    flex-direction: row;
    gap:10px;
}

.timeline-details{
    width: 90%;
    display: flex;
    flex-direction: column;
}
.timeline-title{
    font-size: 20px;
    font-weight: bold;
}
.location-url{
    text-decoration: none;
    color:rgb(95,96,97);
}
.timeline-location{
    text-align: left;
    margin-left: 20px;
}
.timeline-description{
    width: 90%;
    margin-left: 20px;
    padding:5px;
    background-color: #ededed;
}
.timeline-time-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-time {
  width: 70px;
  height: 30px;
  font-size: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(95,96,97);
  color: #fff;
  z-index: 1;
}


.timeline-blank {
  flex: 1; /* 残りのスペースを埋める */
  width: 2px;
  position: relative;
}

.timeline-blank::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-left: 2px dotted #888;
}

.blank{
    height: 30px;
}

.about-tabisync-btn{
  width: 90%;
  height: 50px;
  background-color: rgb(0, 0, 0);
  border-radius: 20px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  color:rgb(255, 255, 255);
  padding-top: 8px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.box-content-demo{
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-wrapper-demo{
    margin-bottom: 400px;
}

.box-demo{
    margin-top: 250px;
}


.next-highlight {
  background-color: #fffae6;
  padding-top: 5px;
  padding-right: 5px;
  margin-left: -5px;
  padding-left: 5px;
}


.next-label {
    color:orange
}

.list-li-wrapper{
    margin-bottom: 5px;
}

#share-button{
    all: unset;  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    margin-top: 5px;
    margin-right: 5%;
    width: 30px;
}
#share-button i{
    font-size: 25px;
}

.header-nav-pc-wrapper{
  display: none;

}

/*-----------------------------------------
  入力フォームのデザイン
-----------------------------------------*/
.create-title-wrapper{
  width: 100%;
  height: 400px;
  background-image: url("../img/create-body.72f912f32cdf.webp");
  background-size: cover;
  background-position: center;
}
.create-title-wrapper-sub{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.create-form{
  width: 100%;
}
/*フォーム全体の装飾*/
.input-first-wrapper{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
/*作成画面全体の装飾*/
.create-title{
  text-align: center;
  padding-top: 60px;
  margin-bottom: 50px;
  font-size: 30px;
  color:#ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
/*タイトルの入力欄*/
.input-title{ 
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom:10px;
}
h3.input-item-title-first{
  border: none;
}
/*詳細の入力がめん*/
.input-description{
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ccc;
  field-sizing: content;
}
/*時間(開始時間や終了時間)*/
.input-start-end-time{
  display: flex;
  margin-bottom: 5px;
}
.input-time-label{
  white-space: nowrap;
}
.time-input{
  flex: 1; 
  height: auto;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #ccc;
}
/*日付*/
.input-date{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: cneter;
  padding: 5px;
}
.input-date-label{
  white-space: nowrap;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
}
.date-input-in{
  flex: 1; 
  height: auto;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #ccc;
}
/*DAy1とかの部分*/
.input-day-number{
  text-align: center;
  font-size: 20px;
  color: #ffffff;
}
.input-date-flex{
  display:flex;
}
/*グラデーション*/
.date-block{
  margin-bottom:5px;
  margin-top: 5px;
  padding: 2px;
  border-radius: 8px;
  background-color: #000000;
}
.schedules-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding:5px;
}
.schedules-container-wrapper{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #000000;
  padding:10px;
}
/*位置情報*/
.location-input{
  width: 100%;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
/*予定の追加ボタン*/
.add-schedule-btn{
  width: 95%;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: #000000;
  border: none;
  color:white;
}
.input-item-title{
  text-align: center;
  padding-top: 40px;
  margin-bottom: 10px;
  font-size: 25px;
  border-top: 1px dotted rgb(111, 112, 112);
}
.input-item-description{
  text-align: left;
  margin-bottom: 10px;
  font-size: 14px;
}
/*jsで追加されるブロック*/
.schedule-block-next{
  width: 100%;
}
.next-arrow{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  text-align: center;
}
/*日付追加ボタン*/
#add-date-btn,
#add-item-btn,
#add-memo-btn{
  width: 100%;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
  border-radius: 20px;
  background-color: #000000;
  border: none;
  color:white;
}
/*jsで表示される部分*/
.input-date-delete{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 5px;
}
.input-date-delete-number{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
.input-date-delete-btn{
  margin-left: auto;
}

/*メモとリストのタイトル*/
.memo-block,
.item-block{
  width: 100%;
  border:2px solid black;
  border-radius: 13px;
  margin-bottom: 10px;
}
.memo-title-next{
  width: 100%;
  color:white;
  text-align: center;
  font-size: 20px;
  background-color: #000000;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.memo-bloc-wrapper{
  padding:10px;
}
/*削除ボタン*/
.delete-btn-under{
  width:100%;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  color:black;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
}

/*作成ボタン*/
.enter-input-btn{
  width: 100%;
  height: 50px;
  background-color: rgb(175, 41, 187);
  border-radius: 20px;
  font-size: 20px;
  color:rgb(255, 255, 255);
}
/*利用規約に同意して〜の部分*/
.input-user-agreement-check{
  margin-top:10px;
  margin-bottom: 10px;
  text-align: center;
}

.cf-turnstile{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:10px;
}
/*利用規約*/
.user-agreement-sub-title{
  margin-top: 20px;
}
.user-agreement-title{
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}
.mt-4{
  margin-top: 100px;
  text-align: right;
}

/*パスワード*/
.input-password{
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom:5px;
}
.input-password-last{
  margin-bottom: 40px;
}

.input-description-under{
  margin-bottom:50px;
}
/*注意事項*/
.precautions-area{
  width: 90%;
  margin-left: 0;
  margin-right: auto;
  margin-top: 20px;

}
.precautions-area ul li{
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.password-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top:200px;
  margin-bottom: 500px;
  gap:10px
}
.password-btn {
  display: flex;
  flex-direction: row;
}


.contact-form-content{
  display: flex;
  flex-direction: column;
  justify-content: left;
}
.contact-form-wrapper{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.contact-btn{
  margin-top: 20px;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
}

.contact-thanks-wrapper{
  margin-top: 150px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: left;
}
.contact-thnks-btn{
  width: 100%;
  margin-top: 20px;
  margin-bottom: 500px;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#copy-url-box{
  width: 95%;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border: 2px solid #cecece;
  border-radius: 10px;
  display: flex;
  align-items: center;
  white-space: nowrap;       /* テキストを1行に固定 */
  overflow: hidden;          /* はみ出た部分を隠す */
  text-overflow: ellipsis;   /* 末尾に「…」を表示（省略記号）*/
  padding: 5px 10px;         /* 内側の余白（必要に応じて）*/
  box-sizing: border-box; 
  gap:5px;
}

url-content a{
  color: rgb(144, 1, 146);
  text-decoration: underline;
}

@media screen and (min-width: 960px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 960px;
  }
  .page-main {
  flex: 1;  /* メイン部分が残りの高さを取る */
  margin-top: 80px; /* ヘッダーの高さ分だけ下げる */
  margin-bottom: 100px;
}
.main-wrapper{
    width: 70%;
    padding-top: 30px;

}
  .notable-point-pc-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap:50px;
  }
  .notable-point-pc-wrapper-btn,
  .main-visual-btn,
  .demo-btn {
    width: 650px;
  }
  .header-nav-pc-wrapper{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .notable-point-wrapper{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
  }
  .header-nav-pc{
    display: flex;
    flex-direction: row;
    list-style: none;
    gap:40px;
  }
  .header-nav-pc li{
    display: flex;
    align-items: flex-end;
  }
    .header-nav-pc li:hover a{
    color:rgb(211,134,146);
  }
  
  .header-nav-pc li a{
    font-style: none;
    text-decoration: none;
    font-size: 18px;
    color:rgb(95,96,97);
  }
  .btn-trigger{
    display: none;
  }
  .header-wrapper{
    display: flex;
    align-items: flex-end;
  }
  .section3-wrapper{
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
  }
  .update-wrapper{
    flex:1;
    height: 100%;
  }
  .contact-wrapper{
    display: flex;
    flex-direction: column;
    align-content: space-between;
  }
  .page-header{
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    position: fixed;  /* 固定位置 */
    top: 0;           /* 画面上部に配置 */
    left: 0;          /* 左端に配置 */
    width: 100%;      /* 横幅を画面いっぱいに */
    z-index: 1000; 
  }
  .logo-image{
    margin-top: 10px;
    height: 60px; /* 高さは自動調整 */
    width: auto; /* ロゴの幅を調整 */
  }
     .create-title-wrapper-sub,
   .input-first-wrapper{
    width: 70%;
 }
 .contact-form-wrapper{
  width: 70%;
 }

}