abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}.clearfix::after {content: "";display: block;clear: both;}

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap');

body{
  font-family: 'Noto Sans JP', sans-serif;
  background:url(../images/common/bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  color: #5b5b5b;
  font-size: 1.0rem;
}
.bg{
  background:url(../images/common/bg.jpg);
  background-size: cover;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -1;
  top:0;
}

img{
	vertical-align:bottom;
	max-width: 100%;
}
li{list-style:none;}
.wrap{overflow:hidden;}
.relative{position:relative;}
.absolute{position:absolute;}
.inline{display:inline-block;}
.left{float:left;}
.right{float:right;}
.flex{display: flex;}
.in{padding:0 5%;}
.ft_size_16{font-size:1.6rem !important;}
.ft_size_14{font-size:1.4rem !important;}
.ft_size_12{font-size:1.2rem !important;}
.ft_size_10{font-size:1.0rem !important;}
.ft_size_8{font-size:0.8rem !important;}
.ft_size_6{font-size:0.6rem !important;}
.c_c{color: #fff;font-weight: 100;}
.gr{
  background: linear-gradient(0deg, #3499ce, #09afb9);
}
.g_text{
  color: #3499ce;
  background: linear-gradient(0deg, #3499ce, #09afb9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a{
  text-decoration: none;
  color: #5b5b5b;
}

input[type="text"], input[type="number"], input[type="email"]{
  width: 100%;
  padding: 3vw;
  box-sizing: border-box;
  background: none;
  border: 1px solid;
  border-radius: 5px;
  -webkit-appearance: none;
}
textarea{
  width: 100%;
  padding: 3vw;
  box-sizing: border-box;
  background: none;
  border: 1px solid #fff;
  border-radius: 5px;
  -webkit-appearance: none;
  height: 30vw;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder {
  color: #fff;
}
button.search_sbt{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  width: 5vw;
  position: absolute;
  right: 2vw;
  top: 2.5vw;
}


.user_icon{
  border-radius: 100px;
  background-size: cover;
  overflow: hidden;
  width: 40px;
  height: 40px;
}
.user_icon.w30{
  width: 30px;
  height: 30px;
}
.user_icon.w22{
  width: 22px;
  height: 22px;
}
.user_icon.w50{
  width: 50px;
  height: 50px;
}

.ttl_w_ln{
  display: table;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  font-weight: 100;
  margin-bottom: 5vw;
}
.ttl_w_ln:after{
  content: '';
  display: table-cell;
  width: 100%;
  background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px)));
  background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
  -webkit-background-clip: padding;
  background-clip: padding;
}
.ttl_w_ln:after{
  border-left: 1em solid transparent;
}

#app{
  margin-bottom: 100px;
}




header{
  padding: 15px 0;
}
header .flex{
  align-items: center;
  justify-content: space-between;
}
header .header_search{
  width: 25px;
}
header .h_logo{
  width: 30vw;
}


/*ONSEN Reset
.page__background{
  background: none;
}
.page{
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
}
ons-navigator, ons-tabbar, ons-splitter, ons-action-sheet, ons-dialog, ons-toast, ons-alert-dialog{
  position: relative;
}

.tabbar--top{
  position: absolute;
  background: none !important;
}
.tabbar__content{
  position: relative;
}
.page__content{
  position: relative;
}

.tabbar__button{
  color: #fff !important;
}
.tabbar__border{
  background: #fff;
  height: 2px;
}
.ons-swiper {
}
.tabbar__item.active .tabbar__label{
  font-weight: bold;
}
.scroller {
  display: block;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  -ms-scroll-snap-type: mandatory;
}
*/

.tab_btn{
  border-bottom: 1px solid #fff;
}
.tab_btn > .flex{
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}
.tab_btn > .flex:after{
  content: "";
  display:block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 3px;
  background-color: #fff;
  transition: width 225ms ease, left 225ms ease;
  will-change: width, left;
}
.tab_btn > .flex::-webkit-scrollbar {
  display:none;
}
.tab_btn ul li{
  padding: 3vw;
  margin-right: 1vw;
  color: #fff;
}
.tab_btn ul li:last-child{
  margin-right: 0vw;
}

.content_inner{
  background: rgba(255, 255, 255, 0.1);
  padding: 6vw;
  min-height: 100vh;
  box-sizing: border-box;
}
.w_i{
  padding:0 6vw;
}

/*一覧Style*/
.list_shadow{
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fff;
  border-radius: 10px;
  padding: 5vw;
}

.post_lis{
  margin-bottom: 5vw;
}

.post_lis .flex{
  align-items: center;
}

.post_lis .icon_area{
  padding: 3vw;
}
.post_lis .user_name{
  font-size: 1.0rem;
  margin-left: 5px;
}

.post_lis .thumb{
  position: relative;
}
.post_lis .thumb .date{
  position: absolute;
  right: 0;
  bottom:0;
  padding: 2vw;
  color: #fff;
  line-height: 1;
}

.post_lis .post_meta{
  padding: 5vw 5vw 3vw;
}
.post_lis .place{
  margin-bottom: 4vw;
}
.post_lis .place:before{
  content: "";
  display: block;
  background: url(../images/common/list_point_icon.png);
  width: 6.5vw;
  height: 9vw;
  background-size: cover;
  margin-right: 2.5vw;
}
.post_lis .place .prefectures{
  margin-bottom: 1vw;
}

.post_lis .f_meta{
  margin-bottom: 4vw;
}
.post_lis .f_meta .f_name{
  margin-right: 1.5vw;
}
.post_lis .description{
  color: #8f8f8f;
  line-height: 1.25;
}

.post_lis .actions{
  padding:3vw 5vw 5vw;
  border-top: 1px #f0efef solid;
}

.post_lis .actions .btns > div{
  margin-right: 3vw;
  filter: grayscale(100%);
}
.post_lis .actions .btns > div.active{
  filter: grayscale(0);
}
.post_lis .actions .btns > div span{
  margin-top: 1vw;
}

.post_lis .actions .btns > div:before{
  content: "";
  display: block;
  background-size: cover;
  margin-right: 2vw;
}
.post_lis .actions .btns .good:before{
  background-image: url(../images/common/list_good_icon.png);
  width: 5vw;
  height: 5vw;
}
.post_lis .actions .btns .comment:before{
  background-image: url(../images/common/list_comment_icon.png);
  width: 5.8vw;
  height: 5vw;
}
.post_lis .actions .btns .bookmark:before{
  background-image: url(../images/common/list_bm_icon.png);
  width: 4.5vw;
  height: 5vw;
}
.post_lis .actions .btns > div span{
  margin-top: 1vw;
}

button{
  background: none;
  border: none;
}
.sign_w{
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 120px);
}
.slide-tabs{
  border-bottom: 1px solid #ffffff80;
  color: #fff;
}
.slide-tabs .swiper-slide{
  width: 30vw;
  text-align: center;
  color: #fff;
  padding: 4vw 0;
  box-sizing: border-box;
}
.slide-tabs .swiper-slide-active {
  border-bottom: 2px solid #fff;
}
.index .slide-tabs .swiper-wrapper{
  transform: translate3d(0px, 0px, 0px) !important;
}
.slide_contents .swiper-wrapper .swiper-slide{
  min-height:calc(100vh - 200px);
  height: auto !important;
}

input,textarea,button{
  outline:none;
}
.form_wrapper{
  justify-content:center;
  align-items: center;
  min-height: 100vh;
}

h2.ttl_w_ln{
    color: #3499ce;
  }
  .list_shadow{
    padding: 8vw;
    margin-top: -75px;
  }
  input{
    width: 100%;
    margin-bottom: 5px;
    height: 50px;
    box-sizing: border-box;
    padding-left: 2vw;
  }
  button{
      width: 100%;
      display: block;
      margin-right: 2vw;
      color: #fff;
      padding: 1vw;
      border-radius: 100px;
      position: static;
      margin-top: 20px;
  }
  p{
    margin-top: 20px;
  }
  .currentUser {
    font-size: 80%;
    text-align: center;
  }

  .logo{
    padding: 10px 0;
    text-align: center;
  }
  .logo img{
    width: 50%;
    margin-left: -5%;
  }