@charset "UTF-8";
body{
  background-image: linear-gradient(90deg, rgba(251, 213, 251, 1), rgba(149, 233, 243, 1));
   /*background-repeat: no-repeat;*/
}

/*半透明の背景の枠*/
.body-bg{
	background: rgba(255,255,255,0.9); /*背景色*/
	border-radius: 12px; /*丸み*/
	box-shadow: 0 0 15px #ccc ; /*影*/
    margin: 40px auto;
    max-width:900px;
    padding: 50px;
    
}
/*使い方ページの半透明の背景の枠*/
.body-bg_use{
    background: rgba(255,255,255,0.9); /*背景色*/
	border-radius: 12px; /*丸み*/
	box-shadow: 0 0 15px #ccc ; /*影*/
    margin: 40px auto;
    width: auto;
    padding: 50px;
}

/**/
/*新規ルート投稿*/

.new_root{
    padding-left: 15px;
    padding-right: 15px;
}
/*カテゴリー*/
.new_root h5{
    margin-bottom: 10px;
}

.hashtag-icon {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}
.hashtag-icon span{
    font-size: 3em;
}
#icon-img img {
    width: 50px; /* 幅を調整 */
    height: auto; /* 高さは自動調整（アスペクト比を保つため） */
}

.hashtag-icon p{
    font-size: 15px;
    padding: 0;
    margin: 0;
}
.hashtag-icon.clicked {
   background-color: #dde5ee;
}

/*目的地　出発地 のテキストボックス*/
.textbox-form {
    display: flex; /* Flexコンテナを使用して横並びに配置 */
    flex-wrap: wrap; /* 複数行に折り返す設定 */
    align-items: flex-start; /* 垂直方向の配置を上寄せに設定 */
    justify-content: space-between; /* 要素間に均等なスペースを配置 */
}
.textbox-row {
    flex-basis: calc(50% - 5px); /* 幅を半分に調整し、余白を考慮 */
    display: flex; /* Flexコンテナを使用して縦並びに配置 */
    flex-direction: column; /* 子要素を縦方向に配置 */
    margin-bottom: 10px; /* 下方向の余白 */
}
.textbox-label {
    margin-bottom: 5px; /* 下方向の余白 */
    font-size: 15px; /* フォントサイズを指定 */
}

.textbox {
    width: 100%; /* 幅を100%に設定 */
    padding: 8px 10px; /* 内側の余白 */
    border: 1px solid #d2d2d2; /* 枠線を表示 */
    border-radius: 9px; /* 角丸の設定 */
    background: #ebf4ff; /* 背景色を設定 */
    font-size: 1em; /* フォントサイズを指定 */
    line-height: 1.5; /* 行の高さを指定 */
    outline-color: #aab7bf; /* フォーカス時のアウトラインの色 */
    box-sizing: border-box; /* paddingとborderを含めたボックスサイズに設定 */
}
/*あらかじめ入力されている文字*/
.textbox::placeholder { 
    font-size:15px;
    color: #999;
}
/* メディアクエリ（画面幅が800px以下の場合） */
@media (max-width: 800px) {
    .textbox-row {
        flex-basis: 100%; /* 縦並びにする */
        margin-bottom: 15px; /* ボタンとのスペースを調整 */
    }
}

/*経路を探索する,投稿のボタン*/
.button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;
	margin: auto;
    margin-bottom: 15px; /* 下方向の余白 */
	padding: 7px;
	font-weight: bold;
    font-size: 17px;
    border-radius: 9px;
	border: 2px solid #57b8cc;
	background: #57b8cc;
	color: #fff;
	transition: 0.5s;
    cursor: pointer;
    
}
.button:hover {
	color: #57b8cc;
	background: #fafafa;
}

/*ルート説明*/
.form-textarea {
 border: 1px solid #d2d2d2;
 border-radius: 9px;
 padding: 8px 10px;
 height: 100px;
 flex: 1;
 width: 98%;
 font-size: 12px;
 background: #ebf4ff;
 outline-color: #aab7bf; /*選択時のラインの色*/
}

/*写真のアップロード*/
#previewImages img {
    max-width: 60%; /* 幅は親要素に合わせる */
    height: auto; /* アスペクト比を保つ */
    margin: auto;
    display: block;
    border: 5px solid transparent; /* 枠線を追加 */
}

/* 写真を添付するラベルのスタイル */
#fileLabel,#resetButton{
  padding: 0.5rem 2rem;
  cursor: pointer;
  border-radius: 9px;
  border: none;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  transition: 0.5s;
}
#fileLabel {
  background-color: #cccccc;
  color: #313030;
}
#fileLabel:hover {
  background-color: #b4b4b4;
}

/* 写真削除ボタンのスタイル */
#resetButton {
  background-color: #e06d6d;
  color: white;
}
#resetButton:hover {
  background-color: #cc3c3c;
}

/**/
/*ルート一覧ページ*/
.rootlist{
    justify-content: center;
    padding: 50px;
    margin: 0 auto; 
    max-width: 1200px;  
}
.button_list{            /*ルート一覧のルートを投稿する、探索するのボタン*/
    display: inline;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 9px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
    font-size: 17px;
	background-color: #d2d2d2;
	color: #656464;
	transition: 0.5s;
}
.button_list:hover {
    background-color: #b4b4b4;
}
/*ルートを投稿するのボタンのみ*/
#bu{
    background: #57b8cc;
	color: #fff;
}
#bu:hover {
    background-color: #2298b1;
}

/*四角の配置*/
.square {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    justify-content: space-between; /* 要素間のスペースを均等に分配 */
    width: 100%;
    max-width: none;
}
.square > .body-bg{
    max-width: calc(33.33% - 20px); /* 各要素の幅を33.33%に設定し、少しのマージンを追加 */
    width: auto;
    height: auto;
    box-sizing: border-box;
    overflow: hidden; /* 要素がはみ出ないように設定 */
    position: relative; /* 子要素のpositionを相対的にするために必要 */
}
#list-page{            /*body-bg 背景の四角の背景*/
    display: inline-block;
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 0px;
    width: auto;
    height: auto;
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* 画面幅が800px未満の場合のメディアクエリ */
@media (max-width: 900px) {
    .square > .body-bg {
      max-width: calc(50% - 20px); /* 画面幅が800px未満の場合、各要素の幅を50%に設定し、少しのマージンを追加 */
    }
  }
  
  /* 画面幅が600px未満の場合のメディアクエリ */
  @media (max-width: 650px) {
    .square > .body-bg {
      max-width: calc(100% - 20px); /* 画面幅が600px未満の場合、各要素を100%幅に設定し、少しのマージンを追加 */
    }
  }

.square a{
    text-decoration: none;
    font-weight: bold;
    color:#4183c4;
}

/* 画像のスタイルを設定 */
.body-bg img {
    max-width: 100%; /* 画像は親要素内で最大幅に収まるように設定 */
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を水平中央に配置 */
    border-radius: 12px;
    padding-top: 10px;
    padding-bottom: 5px;
  }

/* いいねボタン*/
.like-button {
    display: inline-block;
    font-size: 25px;
    color: #888888;
    cursor: pointer;
    border: none;
    background: none;
    position: absolute; /* 要素を親要素に対して絶対位置に配置 */
    bottom: 10px; /* 下部に配置 */
    left: 10px; /* 左側に配置 */
    z-index: 1; /* カウントの上に表示するためにz-indexを追加 */
}
.like-button.liked {
    color: #F00000;
}
.like-count {
    font-size: 17px;
    position: absolute; /* 要素を親要素に対して絶対位置に配置 */
    bottom: 10px; /* 下部に配置 */
    left: 50px; /* 左側に配置 */
}




/**/
/*使い方のページ*/

.use_contents a{            /*目次　下線の削除など*/
    text-decoration: none;
    transition: color 0.3s;
    color: #313030;
    font-weight: bold;
    
}
.use_contents a:hover{      /*目次　カーソル時色変更*/
  color : #ff7043;
}
/*スマホ版の画面写真の大きさ*/
.use_main_mobile img{
    width: 35%;
    height: auto;
}
/*PC版の画像写真の大きさ*/
.use_main_pc img{
    width: 80%;
    height: auto;
}
.use_summary{
    text-align: center;     /*まとめの部分を真ん中へ*/
}

.use{                       /*使い方ページ全体の配置*/
    display: flex;
    margin: auto 0;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
}
@media screen and (max-width: 1100px){
    .use{
        display: block;
    }
}
.use_contents{
    min-width: 470px;
}
.use_main{
    margin-left: 10px;
    min-width: 450px;
}
/*ページトップへ戻るボタン*/
/* ページトップへ戻るボタンを実装*/
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #747373;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #6f6e6e;
  border-right: 3px solid #6f6e6e;
  transform: translateY(20%) rotate(-45deg);
    right: 500px;
}

@media (hover: hover) and (pointer: fine) {

  .pagetop:hover,
  .pagetop:hover .pagetop__arrow {
    border-color: #57b8cc;
  }
}