@charset "utf-8";

/*
375の時に何pxで見せたいか？
calc(250 / 375 * 100vw);
*/

/*
----------------------*/
/*
----------------------------------------*/

/*--------------------------------------------------------------------------
全体の設定
---------------------------------------------------------------------------*/
html{
  font-size: calc(100vw / 37.5);
}
body {
  font-size :1.5rem;
  min-width: initial;
  min-width: auto;
}
/*フォント設定
---------------------------------------------------------------------------*/
/*見出し設定
---------------------------------------------------------------------------*/
.secTtl{
  font-size: 2rem;
  margin-bottom: 3rem;
}

/*共通部品
---------------------------------------------------------------------------*/

/*ボタン設定
--------------------------------------*/
button,
input[type="submit"],
input[type="button"]{
  border-radius: 0;
}
/*アラート設定
---------------------------------------------------------------------------*/
.alertArea{
  padding: 0 2%;
}
/*テーブル設定
--------------------------------------*/

/*カラム設定
---------------------------------------------------------------------------*/
.flexDcr{
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
/*Layout
---------------------------------------------------------------------------*/
.wrapper.no-hdr{
  padding: 4rem 4%;
}
/*共通コンテンツ
--------------------------------------*/
.innerWrap{
  width: 100%;
}
/*Header
---------------------------------------------------------------------------*/
header{
  padding: 1.5rem 4%;
}
.logo{
  font-size: 1.6rem;
}
.gNavi ul li{
  margin-right: 1rem;
}
.gNavi ul li a{
  font-size: 1.3rem;
}
/*FOOTER
---------------------------------------------------------------------------*/
/*モーダルウィンドウ用スタイル
---------------------------------------------------------------------------*/
.modal-open-btn {
  font-size: 1.5rem;
}
/*ページネーション
---------------------------------------------------------------------------*/
.pagination {
  flex-direction: row;
  justify-content: center;
}
.page-link {
  padding: 6px 10px;
  margin: 3px;
}
.page-info {
  width: 100%;
  text-align: center;
  margin: 10px 0 0 0;
}


/*--------------------------------------------------------------------------
□下層共通 lowerLayer
---------------------------------------------------------------------------*/
/*mainVisual
--------------------------------------*/
/*breadcrumb
--------------------------------------*/
/*Main
---------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------
□TOPページ home
---------------------------------------------------------------------------*/
.secTopBase{
  padding: 2rem 4%;
}
.secTopBase h3{
  font-size: 1.6rem;
  margin: 2rem 0 1rem;
}
/* 目次
----------------------------------------*/
.topToc{
  width: 100%;
}
/*secTopAct
----------------------------------------*/
.sta_btnWrap a{
  width: 40%;
}
/*--------------------------------------------------------------------------
□下層ページ
---------------------------------------------------------------------------*/

/*login
---------------------------------------------------------------------------*/
.auth-box {
  padding: 20px;
}
/*マイページ
---------------------------------------------------------------------------*/
.mypageInr{
  padding: 2rem 4%;
}
.user-info_id {
  max-width: 10rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.user-info_name {
  max-width: 16rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mypage_menu{
  margin-top: 3rem;
}
.mypage_menu_box{
  width: 10rem;
  height: 10rem;
  padding: 0.8rem;
}
.mypage_menu_box span{
  font-size: 1rem;
}
.welcome-section,
.my-threads-section,
.commented-threads-section,
.app-description{
  padding: 0 2%;
}
/*退会処理
---------------------------------------------------------------------------*/
.unsubscribe-section{
  padding: 0 2%;
}
/*スレッド一覧
---------------------------------------------------------------------------*/
.thread-search{
  padding: 0 2%;
}
.search-btn{
  font-size: 1.4rem;
}
.thread-list{
  padding: 0 2%;
  margin: 3rem 0 0;
}
.tab-btn{
  padding: 1rem;
}
.thread-info p{
  width: 100%;
  margin-bottom: 0;
}
.thread-info p:not(:first-child){
  margin-left: 0;
}
/*スレッド内容
---------------------------------------------------------------------------*/
.thread-messageArea{
  padding: 0 2%;
}
.thread-content{
  padding: 0 2%;
}
.thread-contentInr{
  padding: 2rem 4%;
}
.thread-info{
  flex-direction: column;
  align-items: flex-start;
}
.thread-info_name{
  max-width: 100%;
}
.thread-admin-actions {
  margin-left: 0;
  margin-top: 1rem;
}
.comment-list{
  padding: 0 2%;
}
.comment-list h2{
  font-size: 1.6rem;
}
/* ソート順切り替え
----------------------------------------*/
.comment-sorting-info {
  flex-direction: column;
  margin-bottom: 1rem;
}
.comment-pagination-info,
.sort-controls {
  width: 100%;
  margin: 5px 0;
  padding: 0.8rem 0;
}
/* コメント一覧
----------------------------------------*/
.comment-info {
  flex-direction: column;
  align-items: flex-start;
}
.comment-info p:not(:first-child){
  margin-left: 0;
}
.comment-info_name{
  max-width: 100%;
}
/* コメント返信表示のスタイル
----------------------------------------*/
.reply-user{max-width: 180px;}
/*ect
---------------------------------------------------------------------------*/
.spAlignL {text-align: left;}
.spAlignR {text-align: right;}
.spAlignCR {text-align: center;}

.sp-mt-0{margin-top: 0;}
.sp-mt-1{margin-top: 1rem;}
.sp-mt-1-5{margin-top: 1.5rem;}
.sp-mt-2{margin-top: 2rem;}
.sp-mt-2-5{margin-top: 2.5rem;}
.sp-mt-3{margin-top: 3rem;}
.sp-mt-4{margin-top: 4rem;}
.sp-mt-5{margin-top: 5rem;}
.sp-mt-6{margin-top: 6rem;}

.pcNone{display: block!important;}
.pcNone-inl{display: inline!important;}
.spNone{display: none!important;}
.spNone-inl{display: none!important;}

@media screen and (max-width: 480px){
/*--------------------------------------------------------------------------
全体の設定
---------------------------------------------------------------------------*/

/*フォント設定
---------------------------------------------------------------------------*/
/*見出し設定
---------------------------------------------------------------------------*/
/*共通コンテンツ・部品
---------------------------------------------------------------------------*/
/*カラム設定
---------------------------------------------------------------------------*/
/*Header
---------------------------------------------------------------------------*/
/*FOOTER
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
下層共通 lowerLayer
---------------------------------------------------------------------------*/
/*mainVisual
--------------------------------------*/
/*breadcrumb
--------------------------------------*/
/*Main
--------------------------------------*/

/*--------------------------------------------------------------------------
TOPページ home
---------------------------------------------------------------------------*/
/*homeMainVisual
--------------------------------------*/
/*Main
--------------------------------------*/

/*--------------------------------------------------------------------------
下層ページ
---------------------------------------------------------------------------*/

/*ABOUT
---------------------------------------------------------------------------*/
/*mainVisual
--------------------------------------*/
/*Main
--------------------------------------*/

/*--------------------------------------------------------------------------
ect
---------------------------------------------------------------------------*/


}

@media screen and (max-width: 360px){

}

@media screen and (max-width: 320px){

}