@charset "UTF-8";
@import url("grid.css");

:root { 
    --base-color: #000;
    --link-color: #898983;
    --linkhover-color: #999;
    --back-color: #f7f7f7;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}

body{
  min-height: 100vh;
  position: relative;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.person{
  margin-top:4%;
  margin-bottom: 5%;
}



/*ヘッダー
-------------------------------------*/

.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}
.contact-button {
	padding: 1rem;
	border: 2px solid var(--base-color);
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a {
    padding: 0.5rem;
}
/*メインコンテンツ
-------------------------------------*/


main {
    margin: 5rem 0 0 0;
}
section {
	margin: 0;
	padding: 0;
}
.gray-back {
	background-color: var(--back-color);
}
.catch {
    text-align: center;
}
.catch h2 {
    padding-bottom: 1rem;
}
.under {
    border-bottom: 0.4rem solid var(--base-color);
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
}
.flow.row {
	margin-bottom: 3rem;
}
.contact-box {
	border: 1px solid var(--border-color);
	text-align: center;
	padding: 2rem 0;
}
@media screen and (max-width: 768px){
.header-box {
	display: none;
}	
} 
.icon_size {
    width: 16px;
    color: #898983;
}
.icon_right {
    float: right;
}
.header h1 {
    text-align: center;
}
.brand {
    font-weight: bold;
    font-size: 20px; 
}
  .site-header {
    background-color: #ffffff;
    max-width: 438px;
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    height: 70px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
 }
  .site-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem; 
    }
    .site-header__wrapper_returun {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    }
    .site-heade_center {
       display: flex;
       justify-content: center;
    }
      .site-header__wrapper {
        padding-top: 10px;
        padding-bottom: 10px; }
        .site-header__wrapper > * {
          flex: 1; } 
    .site-header__start {
      text-align: center; 
    } 
    .site-header__middle {
      order: -1; 
    } 
    .site-header__end {
      display: flex;
      justify-content: flex-end;
      padding-right: 1rem; 
      } 
      .site-header__left {
        justify-content:flex-start;
      }
  @media (max-width: 659px) {
    .nav__wrapper {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: -1;
      background-color: #d9f0f7;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-100%);
      transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
      .nav__wrapper.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0); 
    }}
  .nav__item:not(:last-child) {
    margin-right: 1.5rem; 
    }  
  .nav__item a {
    display: block;
    padding: 1.5rem 1rem; }
    @media (min-width: 660px) {
      .nav__item a {
        padding-left: 0;
        padding-right: 0; } }
  .nav__toggle {
    display: none; }
    @media (max-width: 659px) {
      .nav__toggle {
        display: block;
        position: absolute;
        right: 1rem;
        top: 1rem;
     }}
        .search_group h2 {
            font-size: 16px;
            color: #211908;
            margin-top: 2px;
        }
        .search_group span {
            font-size: 13px;
            margin-right: 5px;
        }
        .search_group p {
        margin-bottom: 2rem;
        }
        .status {
            width: 21px;
            position: relative;
            top: 5px;
        }
        .profile_img {
            border-radius: 5px;
            max-width: 100%;
            /* height: 197px; */
            display: block;
            margin: auto;
        }
        /* .profile_img {
          border-radius: 5px;
        } */
        .memu_icon {
            width: 25px;
        }
        #navi ul li p {
       font-size: 8px;
       text-align: center;
        }
        .community_icon {
            width: 35px;
        }
        .hide {
        display: none;
        }
        .return_group {
        padding-left: 1rem;
        }
        .returun_icon {
            width: 14px;
            position: absolute;
            top: 50%;
            left: 5%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
        .returun_icon_white {
          margin-top: 5px;
        }
        .flex_start {
            justify-content: flex-start;
        }
        .position_left {
            position: absolute;
            left: 28rem;
        }
        .menu_title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
        /* 趣味選択ボタン */
        .tagbtn label {
            margin: 8px 8px 8px 0;
        }
        .tagbtn label input {
            display: none!important; /* デフォルトのinputは非表示にする */
        }
        .tagbtn label span {
            color: #211908; /* 文字色を黒に */
            font-size: 16px; /* 文字サイズを14pxに */
            border-radius: 5px; /* 角丸を入れて、左右が丸いボタンにする */
            padding: 5px 8px; /* 上下左右に余白をトル */
            background: #F2F2F0; 
        }
        .tagbtn label input:checked + span {
            background: #606060; /* 背景色を薄い赤に */
        }
        .tagbtn  {
            display: flex;
            flex-wrap: wrap;             
        }
        select{
            position: relative;
            width: 100%;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-size: 13px;
          }
          .select-wrap {
              position: relative;
          }
          .select-wrap:after {
              content: "";
              position: absolute;
              right: 13px;
              top: 27px;
              width: 6px;
              height: 6px;
              border-top: 1px solid #898983;
              border-left: 1px solid #898983;
              transform: translateY(-50%) rotate(
          -135deg
          );
            font-size: 20px;
            pointer-events: none;
          }
          .tag_space {
            margin: 1rem 0;
            padding-left: 10px;
          }
          .select_right {
            text-align: right;
            margin-left: -18px;

          }
          .header_right {
            display: flex;
            position: absolute;
            top: 50%;
            left: 93%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
          } 
          .header_right_terms {
            left: 82%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-8%, -51%);
          }
          .header_right a h2 {
            color: #898983;
            font-size: 15px;
          }
          .terms_text {
            padding: 2rem;
          }
          .terms_text h3,
          .terms_text h4 {
            margin-bottom: 1rem;
            font-size: 13px;
          }
        .terms_text p {
            margin-bottom: 2rem;
            font-size: 11px;
        }
        .boder_bottom {
            border-bottom: 1px solid #F2F2F0; 
        }    
        .sub_header {
            background: #F2F2F0;
            max-width: 438px;
            margin: 0 auto;
            padding: 10px;
        }
        .sub_header h2 {
            font-size: 13px;
        }
        .table_search td {
            float: right;
        }
        .table_search hr {
            border-bottom: 1px solid #F2F2F0; 
        }
        .textarea {
            width: 93%;
            border: 1px solid #676767;
            height: 200px; 
        }
        .container_space {
            padding: 0 20px;
        }
        .reaction_mark {
            display: flex;
            position: absolute;
            bottom: -18px;
            right: 15px;
        }
        .iine_mark {
            width: 62px;
            height: 62px;
            position: relative;
            top: 5px;
            background: #FFB5BC;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
        }
        .iine_mark img {
            width: 45%;
        }
        .favorite_mark {
            width: 62px;
            height: 62px;
            position: relative;
            top: 5px;
            background: #FFB5BC;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 5px;
        }
        .favorite_mark img {
            width: 50%;
        }
        .profile_group {
            position: relative;
        }
        .hidden_header {
            max-width: 438px;
            position: fixed;
            top: 3%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            width: 100%;
        }
        .margin_bottom {
            margin-bottom: 1rem;
        }
        .padding_top {
            padding-top: 1rem;
        }
        .file input{
           display:none; 
        }
        .file div { 
           cursor:pointer; 
           border: 2px solid #F2F2F0;
           text-align:center; 
           height: 100px;
           margin: 10px;
           width: 100px;
        }
        .file div:hover {            
            color:#fff; 
        }
        .mB20 {
            margin-bottom: 20px;
          }          
          .icon {
            position: relative;
            width: 45px;
            height: 46px;
            border: 2px solid #F2F2F0;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);

          }          
          .icon::before, .icon--plus::after {
            position: absolute;
            top: 21px;
            left: 50%;
            content: '';
            display: inline-block;
            width: 26px;
            height: 26px;
            border-top: 2px solid #F2F2F0;
            transform: translateX(-50%);
          }          
          .icon--plus:after {
            top: 8px;
            left: -5px;
            transform: rotate(90deg);
          }
          .side_space {
            padding: 0 10px;
          }
          .arrow_position {
            position: relative;
          }
          .image_arrow {
            position: absolute;
            top: 34%;
          }
          .identification img {
            width: 18px;
            margin-right: 6px;
          }
          .identification {
            color: #73D3B8;
            font-size: 13px;
           display: flex;
           align-items: center;
           margin-top: 1rem;
          }
/* モーダル */
#modalWrap {
	display: none;
	background: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	overflow: hidden;
}
.modalBox {
	position: fixed;
	width: 85%;
	max-width: 200px;
	height: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
	opacity: 1;
	display: none;
	border-radius: 3px;
	z-index: 1000;
  box-shadow: 2px 3px 3px rgba(0,0,0,0.1);
}
.modalInner {
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
	background: #fff;
	color: #211908;

}
.modalInner .iine_mark ,
.modalInner .favorite_mark {
    margin: 0 auto;
    width:40px;
    height: 40px;
    margin-bottom: 2rem;
}
.person_text p {
    margin-bottom: 0.5rem;
    font-size: 13px;
}
.person_text a {
margin: 2rem 0;
}
/* 注意喚起モーダル */
/* モーダル */
.modal_btn {
    cursor: pointer;
  }
  /********背景黒**********/
.modal_wrap{
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: none;
  }
  /**モーダル**/
  .modal_inner{
    max-width: 438px;
    background:#fff;
    width: 90%;
    height: 140px;
    margin:0 auto;
    text-align: center;
    padding: 20px 0;
    border-radius: 5px;
    position: absolute;
    top: 435px;
    left: 50%;
    transform: translateY(-50%);
    transform:translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    cursor: pointer;
  }
  .modal_inner_cancel {
    max-width: 438px;
    background:#fff;
    width: 90%;
    height: 70px;
    margin:0 auto;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    position: absolute;
    top: 550px;
    left: 50%;
    transform: translateY(-50%);
    transform:translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    cursor: pointer;
  }
  .modal_inner_deletion {
    max-width: 438px;
    background:#fff;
    width: 90%;
    height: 70px;
    margin:0 auto;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    position: absolute;
    top: 470px;
    left: 50%;
    transform: translateY(-50%);
    transform:translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    cursor: pointer;
  }
  .modal_inner_privacy {
    max-width: 438px;
    background:#fff;
    width: 90%;
    height: 206px;
    margin:0 auto;
    text-align: center;
    padding: 20px 0;
    border-radius: 5px;
    position: absolute;
    top: 475px;
    left: 50%;
    transform: translateY(-50%);
    transform:translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    cursor: pointer;
  }
  .modal_select {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .block {
    border-bottom: 0.3px solid #707070;
    padding-bottom: 2.4rem;
    color: #FF5252;
    font-size: 15px;
  }
  .block3 {
    border-bottom: 0.3px solid #707070;
    padding-bottom: 2.4rem;
  }
  .block2 {
    color: #FF5252;
    font-size: 15px;
  }
  .notice {
    color: #2E76FF;
    font-size: 15px;
  }
  .close_icon {
    color: #2E76FF;
    font-weight: bold;
    font-size: 15px;
  }
  .profile_icon_img {
    border-radius: 50%;
  }

  .icon_img{
    width: 5%;
    
  }
  .favorite_mark_smail {
    width: 25px;
    height: 25px;
    margin-left: -11px;
  }
  .community_group h2 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .community_group p {
    font-size: 13px;
  }
  #navi ul li {
    width: 20%;
  }
  /* 投稿モーダル */
  .modal_wrap_post {
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: none;
    overflow: scroll;
  }
  .modal_inner_post {
    max-width: 438px;
    background:#fff;
    width: 90%;
    margin:0 auto;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    /* top: 36rem; */
    left: 50%;
    transform: translateY(-50%);
    transform:translateX(-50%);
    /* -webkit-transform: translateY(-35%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%); */
    
  }
  .fl_left {
    text-align: left;
    padding-left: 1rem;
  }
  .icon_camera {
    margin-right: 20px;
  }
  .post_form td {
    float: left;
    font-size: 11px;
  }
  .post_form td input::placeholder,
  .post_form td textarea::placeholder {
    font-size: 11px;
  }
  .post_form th label {
    line-height: 30px;
    font-size: 11px;
  }
  .post_tag p {
    text-align: left;
    font-size: 11px;
    margin: 5px 0;
  }
  .post_form_textarea th {
    vertical-align:top;
    line-height: 48px;
  }
  .boder_top {
  border-top: 1px solid #F2F2F0;
  }
  .textarea_post {
    width: 95%;
    border: 1px solid #000;
  }
  .community_group .span-12 {
    margin: 15px 0;
  }
  .main_post {
    text-align: center;
  }
  .main_post h2 {
    color: #211908;
    font-weight: bold;
    font-size: 15px;
  }
  .community_group .span-2 small {
    padding-left: 10px;
  }
  .heart_mark {
    width: 8%;
  }
  .post_text_margin p {
    margin-bottom: 0rem;
  }
  .post_text_margin small {
    position: relative;
    top: -5px;
    left: 3px;
  }
  /* チャット送信部分 */
  #bms_send {
    background-color:#c6c6c6;
    height: 65px;
    display: flex;
    align-items: center;
    padding: 4px;
    max-width: 438px;
    margin: 0 auto;
  }
  #bms_send_message{
    width: 80%;
    line-height: 16px;
    height: 40px;
    padding: 14px 6px 0px 6px;
    border-radius: 5px;
    text-align: left;
    box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1) inset;
    box-sizing: border-box;
}
#bms_send_btn {
    width: 72px;
    height: 40px;
    font-size: 15px;
    line-height: 2.6em;
    color: #fff;
    font-weight: bold;
    background: #606060;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
    min-height: 10px;
    margin-right: 1rem;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.1);
}
.id_ng_img {
    width: 40%;
    margin: 0 auto;
    margin-bottom: 2rem;
}
.chat_height {
    /* height: 41rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #FFFEFC;
}
.chat_height h2 {
    color: #898983;
    margin-bottom: 15px;
}
.chat_height h4 {
   font-size: 16px;
}
/*/////////////////////////////////////////////////
//LINE風チャット画面(会話方式)を記事に表示する方法
/////////////////////////////////////////////////*/
.line__container {
    padding:0;
    overflow: hidden;
    font-size: 80%;
  }
  /* 1 タイトル部分 */
  .line__container .line__title {
    background: #273246;
    padding: 10px;
    text-align: center;
    font-size: 150%;
    color: #ffffff;
  }
  /* 2 会話部分 */
  .line__container .line__contents {
    padding: 10px 0;
    overflow: hidden;
    line-height: 135%;
  }
  .line__container .scroll {
    height: 500px;
    overflow-y: scroll;
  }
  /* 4 スタンプ画像最大幅 */
  .line__container .stamp img {
    max-width:120px;
  }
  /* 5 相手の会話 */
  .line__container .line__left {
      /*width: 100%;*/ display: inline-block;
      position: relative;
      display: block;
      margin-bottom: 25px;
      max-width: 85%;
      clear: both;
      line-height: 22px;
      float: left;
  }
  /* 6 アイコン画像 */
  .line__container .line__left figure {
      width: 50px;
      position: absolute;
      top: 15px;
      left: 0;
      padding: 0;
      margin: 0;
  }
  /* 7 正方形を用意 */
  .line__container .line__left figure img{
      border-radius: 50%;
      width: 50px;
      height: 50px;
  }
  .line__container .line__left .line__left-text {
    margin-left: 60px;      /* 70px */
  }
  .line__container .line__left .line__left-text .name {
    font-size: 80%;
    color: #ffffff;
  }
  /* 10 コメントエリア */
  .line__container .line__left .text {
    margin: 0; display: inline-block;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    background-color: #EDF1EE;  /* 吹き出し背景色 相手 */
    color: #000000;   /* トーク文字色 相手 */
    font-size: 13px;  /* トーク文字サイズ 相手 */
    text-align: left;
    margin-top: 20px;
  }
  /* 11 吹き出し */
  .line__container .line__left .text::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -10px;
    top: 3px;
    border-right: 20px solid #EDF1EE;  /* 吹き出し枠線色 相手 */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    transform: rotate(35deg); -webkit-transform: rotate(35deg);
  }
  /* 12 自分の会話 */
  .line__container .line__right {
      position: relative;
      display: block;
      margin-bottom: 25px;
      max-width: 85%;
      float: right;
      margin-right: 5px;   /* 15px */
      clear: both;
  }
  /* 13 コメントエリア */
  .line__container .line__right .text {
    padding: 10px;
    border-radius: 10px;
    margin: 0;
    margin-left: 80px;
    background-color: #606060;  /* 吹き出し背景色 自分 */
    color: #fff;   /* トーク文字色 自分 */
    font-size: 13px;  /* トーク文字サイズ 自分 */
    text-align: left;
    line-height: 22px;
  }
  /* 14 吹き出し */
  .line__container .line__right .text::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: -10px;
    top: 3px;
    border-left: 20px solid #606060;  /* 吹き出し枠線色 自分 */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: rotate(-35deg); -webkit-transform: rotate(-35deg);
    text-align: left;
  }
  /* 15 自分がスタンプを送る時 */
  .line__container .line__right .stamp {
    position: relative;
    margin-left: 80px;
  }
/* 16 時間エリア 相手 */
  .line__container .line__left .time {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0px;
    text-align: left;
    right: -11px;
    bottom: 0px;
    font-size: 80%;
    color: #81807C;
  }
  /* 17 既読／時間エリア 自分 */
  .line__container .line__right .date {
    content: '';
    position: absolute;
    display: block;
    width: 100px;
    text-align: right;
    left: -25px;
    bottom: 0px;
    font-size: 80%;
    color: #81807C;
  }
  /* メッセージ５通までモーダル */
.modal_btn2 {
    cursor: pointer;
  }
  /********背景黒**********/
.modal_wrap2{
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 100;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
  }
  /**モーダル**/
  .modal_inner2{
    background:#fff;
    width: 340px;
    height: 340px;
    margin:0 auto;
    text-align: center;
    padding:20px;
    border-radius: 5px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateY(-50%);
    transform:translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
  }
  .submit_btn_no {
    width: 60%;
    background: #CECDCB;
    margin:0 auto;
    color: #FFFEFC;
    padding: 10px 0;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
  }
  .submit_btn_yes {
    width: 60%;
    background:#606060;
    margin:0 auto;
    color: #898983;
    padding: 10px 0;
    border-radius: 5px;
    cursor: pointer; 
    font-weight: bold;
    margin-bottom: 1.5rem;
    font-size: 13px;
  }
  .modal_wrap a {
    font-size: 15px;
  }
  .icon_color {
    color: #670C69;
  }
  .btn_space_modal {
    margin-bottom: 3rem;
  }
  .signup_form h5 {
    font-size: 14px;
    font-weight: bold;
    color: #211908;
    margin: 2rem 0 1rem 0;
  }
  .signup_form h6 {
    font-size: 16px;
    font-weight: bold;
    color: #211908;
  }
  .signup_form {
    margin: 1rem 0 3rem 0;
  }
  .mark_center {
    margin: 0 auto;
  }
  .notification_group .span-12 {
    margin: 15px 0;
  }
  .profile_icon {
    margin-left: 10px;
  }
  .table_setting th {
    font-size: 16px;
  }
  .table_setting th,
  .table_setting td {
    padding: 1.6rem 20px;
  }
  .table_setting td img {
    width: 10px;
  }
  .long_title {
    width: 70%;
    display: flex;
    justify-content: center;
  }
  .list_group span {
    font-size: 11px;
  }
  .list_group .span-12 {
    margin: 17px 0;
  }
    /**アカウント削除2個目モーダル**/
    .modal_inner_account_delete{
      max-width: 438px;
      background:#fff;
      width: 90%;
      height: 280px;
      margin:0 auto;
      text-align: center;
      padding: 20px 0;
      border-radius: 5px;
      position: absolute;
      top: 400px;
      left: 50%;
      transform: translateY(-50%);
      transform:translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
      cursor: pointer;
    }
    .account_delete {
      border-bottom: 0.3px solid #707070;
      padding: 3.2rem 0;
      color: #211908;
    }
    .account_delete p {
      font-size: 11px;
    }
    .top_space {
      margin: 6rem 0 1rem 0;
    }
    .terms_text h5 {
      font-size: 13px;
      margin: 15px 0 3px 0;
    }
    .trading_text p {
      margin-bottom: 1rem;
    }
/* よくある質問-アコーディオン */
.s_01 .accordion_one {
  margin: 0 auto;
}
.s_01 .accordion_one .accordion_header {
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
  letter-spacing: .1rem;
}
.s_01 .accordion_one .accordion_header:hover {
  opacity: .8;
}
.s_01 .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 72%;
  right: 5%;
  width: 13px;
  border: 1px solid #fff;
  margin-top: -20px;
  box-sizing: border-box;
  transform-origin: center center;
  transition-duration: 0.2s;
}
.s_01 .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before, .s_01 .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: #fff;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.s_01 .accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  box-sizing: border-box;
}
.s_01 .accordion_one .accordion_inner .box_one {
  height: 200px;
}
.s_01 .accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
  font-size: 11px;
}
  .s_01 .accordion_one .accordion_header {
    font-size: 13px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
  .question_icon {
    position: relative;
    top: 2px;
    margin-right: 4px;
  }
  .modal_inner_contact {
    height: 368px;
  }
  .modal_inner_contact h3 {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 2rem;
  } 
  .contact_textarea {
    height: 120px;
  }
  .contact_text {
    margin: 15px 0;
  }
  .contact_text p {
    margin-bottom: 25px;
  }
  .plan_block td {
    border: 1px solid #606060;
    width: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .plan_block th {
    background-color: #606060;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;  
    width: 50%;
  }
  .plan_block td,
  .plan_block th {
    padding: 10px 0;
    height: 100px;  
    text-align: center;
    color: #211908;
  }
  .campaign {
    background-color: #FFB5BC;
    color: #FFFEFC;
    font-size: 13px;
    text-align: center;
    width: 120px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 5px 10px;
  }
  .plan_block th h3,
  .plan_block td h4 {
    font-size: 30px;
    margin-bottom: 5px;
  }
  .plan_block th small {
    font-size: 11px;
  }
  .plan_block td h4 {
    padding: 3px 0;
  }
  .plan_block td p {
    border-top: 1px solid #606060;
    width: 60%;
    padding: 10px 0;
    margin: 0 auto;
  }
  .plan_block td {
  display: grid;
  place-items: center;
  }
  .table_plan {
    margin: 20px 0; 
  }
  .plan_block tr {
    margin-bottom: 20px;
  }
  .identification_text {
    padding: 25px 0;
    text-align: center;
    color: #898983;
  }
  .identification_text p {
    font-size: 11px;
  }
  .identification_category {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    background-color: #606060;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
  }
  .identification_category img {
    width: 70px;
    margin: 0 20px;
  }
  .identification_category h2 {
    font-size: 13px;
    color: #211908;
    text-align: center;
    margin-left: 50px;
  }
  .yellow_frame {
    border: 1px solid #606060;
    border-radius: 15px;
    padding: 15px;
    background-color: #fff;
    z-index: 100;
    margin-bottom: 20px;
  }
  .yellow_frame i {
    color: #211908;
    display: flex;
    justify-content: center;
  }
  .yellow_frame h2 {
    color: #211908;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
  }
  .insurance_certificate {
    text-align: left;
  }
  .insurance_certificate h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .identification_text h3 {
    font-size: 16px;
    margin: 20px 0;
  }
  .point_frame {
    border: 1px solid #606060;
    border-radius: 15px;
    background-color: #fff;
    margin: 20px 0;
  }
  .point_frame_title {
    background-color: #606060;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    width: 100%;
  }
  .point_frame_title h2 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
  }
  .point_frame img {
    width: 65%;
  }
  .point_frame i {
    color: #606060;
  }
  .point_frame .span-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0;
  }
  .point_get::after {
    font-family: "Sawarabi Gothic";
    font-weight: 900;
    content: "\f164";
    width: 30px;
    height: 30px;
    position: relative;
    top: -27px;
    left: -14px;
    background: #FE6D65;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .point_coin img {
    width: 20px;
    position: relative;
    top:5px;
  }
  .point_coin td {
    color: #FFB5BC;
  }
  /* トグルボタン */
  .toggle_input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }  
  .toggle_label {
    width: 50px;
    height: 30px;
    background: #ccc;
    position: relative;
    display: inline-block;
    border-radius: 40px;
    transition: 0.4s;
    box-sizing: border-box;
  }  
  .toggle_label:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
  }  
  .toggle_input:checked + .toggle_label {
    background-color: #606060;
  }
  .toggle_input:checked + .toggle_label:after {
    left: 20px;
  }
  .toggle_button {
    position: relative;
    width: 45px;
    height: 25px;
    margin: auto;
  }
  .header_yerrow {
    background-color: #606060;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  /* ログイン獲得ポイントモーダル */
  .overlay {
   position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
    }
    .btn_area {
    width: 280px;
    height: 300px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    text-align: center;
    z-index: 2;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.1);
    border-radius: 3px;
    padding: 10px;
    }
    .btn_area p {
    font-size: 16px;
    color: #211908;
    }
    .btn_area button {
    background: #211908;
    color: #fff;
    border: 1px solid #e7e7e5;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    float: right;
    position: relative;
    top: -20px;
    left: 20px;
    }
    .btn_area button i {
      position: relative;
      top: -13px;
      left: 1px;
    }
    .login_point_mark img {
      width: 18%;
      margin-bottom: 5px;
    }
    .btn_id_login {
      background-color: #FFB5BC;
      color: #fff;
    }
    .btn_email_login {
      border: 1px solid #FFB5BC;
      color: #FFB5BC;
      background-color: #fff;
    }
    .login_space {
      padding: 7rem 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .login_space button {
      width: 80%;
      margin-bottom: 2.5rem;   
    }
    .login_space a {
      color: #898983;
      text-decoration:underline;
    }
    .login_form label {
      display: block;
    }
    .login_form input {
      border: 0.5px solid #898983;
      border-radius: 5px;
      width: 93%;
    }
    .login_form {
      padding: 5rem 20px;
    }
    .login_form p {
      font-size: 13px;
      text-align: center;
    }
    .password_send_text {
      margin-bottom: 40px;
    }
    .code_from_group {
      display: flex;
    }
    .contact_form_p p {
      margin-bottom: 0;
    }
    .search_count {
      display: flex;
      justify-content: flex-end;
      font-size: 11px;
      margin-bottom: 5px;
    }
    .post_form th {
      width: 30% !important;    
    }
  .delete_slide::before {
    content:"削除";
    color: #FFFEFC;
    font-size: 16px;
    background-color: #FF5252;
    position: relative;
    left: 19px;
    padding: 16px;
    float: right;
  }
  .icon_size_middle {
    width: 24px;
    color: #898983;
  }
/* クリックすると色が変わる */
   .favorite_icon label{
      display: block;
      width: 25px;
      height: 25px;
      background: #e7e7e5;
      padding: 5px;
      margin-left: -11px;
      box-sizing: border-box;
      text-align: center;
      text-decoration: none;
      border-radius: 30px;
      cursor: pointer;
  }
  .favorite_icon input:checked+label{
      background: #73D3B8;
  }
  .favorite_icon input{
      display: none;
  }
  .iine_icon label{
    color: #e7e7e5;
    cursor: pointer;
}
.iine_icon input:checked+label{
    color: #FFB5BC;
}
.iine_icon input{
    display: none;
}
.iine_push {
  display: flex;
  align-items: center;
}
.iine_push span {
  margin-left: 8px;
}
.login_title h5 {
color: #FF5993;
font-size: 21px;
font-weight: bold;
position: relative;
top: -31px;
z-index: 20;
}
.login_title img {
  position: relative;
  top: -111px;
  z-index: 0;
}
.login_ribbon img {
  position: relative;
  top: -36px;
  z-index: -10;
  left: 5%;
  width: 85%;
}
.login_ribbon h4 {
  font-size: 13px;
}
/* アーチ文字 */
 .login_ribbon h4 span {
  height: 259px;
  position: absolute;
  color: #211908;
  font-size: 16px;
  width: 30px;
  left: 126px;
	top: -20px;
	transform-origin: bottom center;
	}
  .char1 { transform: rotate(-18deg); }
  .char2 { transform: rotate(-15deg); }
  .char3 { transform: rotate(-12deg); }
  .char4 { transform: rotate(-9deg); }
  .char5 { transform: rotate(-6deg); }
  .char6 { transform: rotate(-3deg); }
  .char7 { transform: rotate(0deg); }
  .char8 { transform: rotate(3deg); }
  .char9 { transform: rotate(6deg); }
  .char10 { transform: rotate(9deg); }
  .char11 { transform: rotate(12deg); }
  .char12 { transform: rotate(15deg); }
  .char13 { transform: rotate(18deg); }
  .login_container_space {
    position: relative;
    top: -107px;
  }
  .pink_frame {
    border: 2px solid #FF5993;
    border-radius: 10px;
    width: 60px;
    height: 60px;
  }
  .pink_title_space h6 {
    background: #FF5993;
    color: #fff;
    font-size: 10px;
    padding: 1px 0; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .gray_frame {
    border: 2px solid #C9CACA;
    background: #EFEFEF;
    border-radius: 10px;
    width: 60px;
    height: 60px;
  }
  .gray_title_space h6 {
    background: #C9CACA;
    color: #fff;
    font-size: 10px;
    padding: 1px 0; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .login_point_size {
    width: 36px;
  }
  .point_space {
    display: flex;
    justify-content: center;
    position: relative;
    top: 1px;
  }
  .login_container_space .span-3 {
    margin-bottom: 7px;
  }
  .complete h6 {
    color: #FFFF00;
  }
  .footer_space {
    position: relative;
    top: -103px;
  }
  .footer_space h5 {
    color: #FF5993;
    font-weight: bold;
    position: relative;
    top: -7px;
  }
  .login_title span {
    font-size: 30px;
  }
  .footer_space span {
    font-size: 25px;
  }
  .attention_btn_space {
    display: flex;
    justify-content: space-around;
  }
  .attention_btn_space button {
    border-radius: 30px;
    width: 150px;
    color: #fff;
    padding: 0;
    font-size: 15px;
  }
  .attention_btn_ok {
    background: #73D3B8;
  }
  .attention_btn_no {
    background: #B5B5AB;
  }
  .attention_space {
    color: #FF72A0;
  }
  .attention_space h2 {
    color: #FF72A0;
    margin-bottom:0
  }
  .attention_space h3 {
    font-size: 15px;
    margin-top: 10px;
  }
  .attention_space h4 {
    font-size: 19px;
    margin: 5rem 0;
    color: #727171;
  }
  .attention_img {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 2rem;
}

.disnone{
  display: none;
}

footer{
  width: 100%;
  background-color: #cfcfcf;
  text-align: center;
  padding: 10px 0;
  position: fixed;/*←絶対位置*/
  bottom: 0; /*下に固定*/
}


.top_title {
  text-align: center;
  margin: 5rem 0;
  /* font-family: 'コーポレート・ロゴ ver2'; */
}
.top_title h1 {
  /* font-weight: bold; */
  font-size: 35px;
  margin-bottom: 18px;
  color: #565656;
  font-family: 'Sawarabi Gothic';
}


.top_title .tomtitle {
  font-size: 18px;
  color: #565656;
  margin-bottom: 23px;
  font-family: 'Sawarabi Gothic';
}

.top_title .meses {
  font-size: 14px;
}

/* .top_title h2 {
  font-weight: bold;
  font-size: 18px;
} */
.tomimglogo{
  width: 20%;
  margin-top: 20%;
}

.new_registration {
  text-align: center;
  margin: 0 auto;
  /* border: 0.5px dotted #989898; */
  border-radius: 5px;
  width: 30rem;
  /* padding: 2rem 0; */
  position: relative;
  margin-bottom: 2.5rem;
}

.new_registration h3 {
  font-weight: bold;
  font-size: 21px;
  background: #fff;
  position: absolute;
  top: -6%;
  right: 0;
  left: 0;
  width: 32%;
  margin: 0 auto;
  color: #848484;
}
.kabu{
  text-align: center;
  margin: 5rem 0;
}

.ad{
  width: 100%;
  text-align: center;
}
.erorrr{
  font-size: 140px;
}
.protable{
  font-size: 13px;
}

.submit-btn {
  /* buttonタグのリセットCSS */
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;

  /* ボタン有効時のスタイル */
  color: #3d3d3d;
  padding: 8px 24px;
  background-color: #606060;
  cursor: pointer; /* ポインターカーソルを表示 */
}

/* ボタン無効時のスタイル */
.submit-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed; /* クリック不可のカーソルを表示 */
}

.form-select-box {
  display: flex;
  justify-content: space-between;
}
.form-select {
  position: relative;
}

.form-select::before {
  position: absolute;
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  top: 10px;
  right: 17px;
}

.dropdown-toggle {
  padding: 8px 23px 8px 14px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: white;
  border: 1px solid #a5a5a5;
  border-radius: 4px;
  font-size: 14px;
}
.imgboder{
  border: 1px solid #c4c4c1;
  border-radius: 5px;
}

/* #message {
  display: flex;
  flex-wrap: wrap;
} */



.topbutton{
  margin-bottom: 7px;
  line-height: 20px;
}

.topaclass{
  margin-bottom: 15px;
  margin-left: 10px;
  line-height: 10px;
  font-size: 12px;
}

.square {
  object-fit: cover;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.responsive-images {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}

.responsive-image img {
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 600px) {
  .responsive-images {
    /* flex-direction: column; */
  }

  .responsive-image {
    margin-bottom: 10px;
  }
}

#subimg .responsive-image img {
  width: 200px;
  height: 200px;
  object-fit: cover; /* 画像のアスペクト比を維持しつつ、指定した領域にフィットさせる */
}

/* .slide-show-container {
  position: relative;
  display: inline-block;
}

.slide-show-container img {
  height: auto;
  display: none;
} */

.tagu {
  display: inline-block;
  margin: 2px 2px;
  padding: 5px 10px;
  background-color: #606060 !important;
  color: #333;
  border-radius: 20px;
  font-size: 14px;
}

.page {
  /* width: 400px;
  height: 300px;
  margin: 10px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
}

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  transition: border .5s;
}

.main-img {
  /* height: 334px; */
  width: 100%;
}
.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  margin-top: 10px;
}
.sub-img li {
  margin-right: 2%;
  width: calc(96% / 3);
  list-style-type: none;
}
.sub-img li:nth-child(3n) {
  margin-right: 0;
}
.sub-img li img {
  border: 2px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}



.newsdubul {
  position: relative; /* 基準値とする */
}
.newsdubul::after {
  content: "！";
    position: absolute;
    top: 0px;
    right: 0px;
    color: #FFF;
    line-height: 11px;
    font-weight: bold;
    text-align: center;
    width: 12px;
    background: #F00;
    border-radius: 50%;
    font-size: 5px;
}

.inputwidt{
  width: 100%;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.modaltextareaeria{
  border: 1px solid #ccc;
  height: 5em; /* 3行程度の高さ */
}

.leftborder{
  border-left: 1px dashed #d1d1d1;
}

.leftpadding{
  padding-left: 15%;;
}
.footer_logo {
  width: 113px;
  height: 46px;
}
select[multiple] option {
  color: #333;
  padding: 5px 5px 5px 35px;
  position: relative;
}

select[multiple] option:checked {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url(./assets/check.svg) 10px center / 15px auto no-repeat!important;
}
.freeword{
  border: 1px solid #606060;
}
.madingtop{
  margin-top: 10px;
}