@charset "Shift_JIS";

/* ---------- all（基礎設定） ---------- */
body {
color: #444;
text-align: center;
padding: 0;
margin: 0px;
}

ul,li,img,form,p,h1,h2,h3,h4,h5 {
padding: 0;
margin: 0;
border-width: 0;
}

a:link {color: #583;}
a:visited {color: #275;}
a:hover {color: #e00;}

.center {text-align: center;}
.clear {clear: both;}

*{
  box-sizing: border-box;
}

img[src$=".svg"] {
    width: 100%;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* ---------- container（全体枠） ---------- */
#container {
width: 100%;
text-align: left;
background-color: #fff;
margin: 0 auto;
padding-bottom:40px;
position: relative;
}


/* ---------- header（上部分） ---------- */
#header {
width: 100%;
height: 80px;
background-image: url(../img/title.jpg);
background-size:120% 100%;
background-repeat: no-repeat;
margin-bottom: 10px;
position:relative;
}

#header_top{
width: 100%;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
padding: 5px 0px 5px 1%;
color:#fff;
background-color:rgba(0,0,0,0.5);
position:absolute; top:0px; left:0px;
line-height:150%;
}

#header_main , #shop_header_top{
width: 100%;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
padding: 8px 2%;
color:#000;
line-height:150%;
}

/* ---------- menuhead（メニュー） ---------- */
#menuhead {
	background-color: #fff;
	height:44px;
	max-height:44px;
	width:100%;
	position: fixed;
	bottom: 0;
	left:0;
	z-index:2;
	display: table;
	border-top:1px solid #ddd;
}

#menuhead .left , #menuhead .center , #menuhead .right{
	display: table-cell;
	height:44px;
	vertical-align:middle;
}

#menuhead img{
	width:90%;
	margin:0 5%;
	vertical-align:middle;
	max-height:40px;
}

#menuhead .left , #menuhead .right{
	width:13%;
	padding:0 2%;
}

#menuhead .center{
	width:70%;
}

#menuhead .center img{
	width:50%;
	vertical-align:middle;
	max-height:40px;
}


/* ---------- main（メイン部分） ---------- */
#main , #shoplist{
width: 100%;
text-align:left;
}


/* --- 大見出し --- */
#main h2 , #shoplist h2 , #news h2 , #inq h2 {
width:96%;
font-size: 12px;
letter-spacing: 2px;
background-color: #eee;
border: 1px solid #ccc;
padding: 8px 2%;
margin:0 auto 12px auto;
}


/* --- 見出し --- */
#main h3 {
font-size: 14px;
letter-spacing: 2px;
border-bottom: 1px solid #bbb;
padding: 6px 4px 8px 4px;
margin: 0px 0px 6px 0px;
}

/* --- トップ解説 --- */

#main .explain {
width:96%;
margin:12px 2%;
text-align: left;
font-size:14px;
line-height:150%;
}

#main .explain h3{
letter-spacing: 2px;
border-bottom: 1px solid #bbb;
padding: 4px 0;
margin: 0px 4px 4px 0;
}

#main .explain h3:before{
content: '';
display: inline-block;
width: 25px;
height: 25px;
background-image: url(https://www.seikanmassa.org/img/pen.svg);
background-size: contain;
vertical-align: middle;
}

#main .explain a{
display:block;
text-align:right;
}

#main .explain a:before{
content:">>";
}

#main .explain .excnt{
	display:flex;
	height:110px;
}

#main .explain .excnt img{
	width:100px;
	height:100px;
	display:block;
	margin-right:8px;
}

#main .explain .excnt p{
	width:100%;
}



/* --- トップ情報まとめ --- */

.infobox{
}

.newlist .log-text{
	width:90%;
	margin:0 auto 12px;
	font-size:80%;
	height:100px;
	overflow-y: scroll;
}


/*タブ切り替え全体のスタイル*/

.top_arealist{
	margin-bottom:18px;
}

.tabs {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 96%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: 50%;
  height: 40px;
  border-bottom: 2px solid #aaaaaa;
  background-color: #d9d9d9;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}


/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  padding: 8px 8px 0;
  clear: both;
  overflow: hidden;
  display: none;
}

/*選択されているタブのコンテンツのみを表示*/
#womanlist:checked ~ #woman_content,
#manlist:checked ~ #man_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_woman {
  background-color: #F97EFD;
  color: #fff;
}

.tabs input:checked + .tab_man {
  background-color: #68D676;
  color: #fff;
}

/* --- 特集記事 --- */

#news h3{
width:96%;
margin:0 2% 4px 2%;
letter-spacing: 2px;
border-bottom: 1px solid #bbb;
padding: 4px 0;
font-size:14px;
}

#news h3:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-image: url(https://www.seikanmassa.org/img/pen.svg);
background-size: contain;
vertical-align: middle;
}

#news .news_img{
width:90%;
margin:8px auto;
}

#news .news_img img{
width:100%;
}


/* --- 文章内の強調文字 --- */
#main strong {
color: #e00;
font-weight: bold;
margin: 0px 3px;
}

#main em {
color: #000;
font-style: normal;
background-color: #ff8;
padding: 2px;
margin: 0px 3px;
}


/* --- 基本文章設定 --- */
.main-text {
width:96%;
font-size:14px;
line-height: 160%;
letter-spacing: 1px;
padding: 0;
margin:0 auto 12px auto;
}


/* --- パンクズ --- */
.pan {
width:96%;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
margin:0 auto 12px auto;
line-height:150%;
}
div.pan span {
color: #d00;
}

/* --- トップに戻るボタン --- */
#page-top {
    position: fixed;
    bottom: 48px;
    right: 4px;
    font-size: 77%;
}
#page-top a {
    background: #999;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 15px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}


/* ---------- ショップデータ（新共通） ---------- */

.n_shop{
width:100%;
margin-bottom:12px;
padding-bottom:8px;
border-bottom:1px solid #eee;
}

.n_shop h3{
padding: 4px;
font-size:16px;
margin-bottom:10px;
}

.n_shop h3:before{
content: '';
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
margin-right:4px;
}

.n_shop h3 a{
color:#000;
text-decoration:none;
}

.n_shop h3 a:visited{
color:#000;
}

.n_shop .shopimg{
width:90%;
margin:8px 5%;
}

.n_shop .shopimg img{
display:block;
width:100%;
}

.n_shop .shopdata{
width:94%;
padding:0;
margin:8px 3%;
display:flex;
flex-wrap:wrap;
}

.n_shop .shopdata dl{
width:48%;
padding:0;
margin: 0 1% 4px 1%;
}

.n_shop .shopdata dl:last-child{
width:98%;
padding:0;
margin: 0 1% 4px 1%;
}

.n_shop .shopdata dt{
font-weight:bold;
font-size:14px;
margin-bottom:4px;
padding:0;
}

.n_shop .shopdata dt:before{
content: '';
display: inline-block;
width: 16px;
height: 16px;
vertical-align: top;
margin-right:4px;
}

.n_shop .shopdata dd{
font-size:12px;
margin:0 0 4px 0;
padding:0;
line-height:180%;
}

.n_shop .intoro_h{
width:96%;
margin:0 2%;
font-size:13px;
}

.n_shop .intoro_h .masse{
display:block;
padding:3px 5px;
font-weight:bold;
margin-bottom:10px;
font-size:14px;
}

.n_shop .intoro_h .point{
display:block;
font-size:16px;
font-weight:bold;
margin-bottom:5px;
}

.n_shop .official{
width:98%;
margin:8px 1%;
text-align:center;
font-size:12px;
padding:8px;
border-radius:8px;
}

.n_shop .official a{
text-decoration:none;
font-weight:bold;
display:block;
}

.n_shop .official a:before{
content:">>";
margin-right:4px;
}




/* ---------- ショップデータ（新女性のみ適用） ---------- */

.woman h3{
background: linear-gradient(to top , #fed1ff, #fff ); 
}

.woman h3:before{
background-image: url(https://www.seikanmassa.org/img/woman.svg);
background-size: contain;
}

.woman .intoro_h .masse{
border-left:4px #f97efd solid;
}

.woman .intoro_h .point{
color:#f97efd;
}

.n_shop .ofw{
border:1px solid #f97efd;
}

.n_shop .ofw a{
color:#f97efd;
}

/* ---------- ショップデータ（新男性のみ適用） ---------- */

.man h3{
background: linear-gradient(to top , #dfffd1, #fff ); 
}

.man h3:before{
background-image: url(https://www.seikanmassa.org/img/man.svg);
background-size: contain;
}

.man .intoro_h .masse{
border-left:4px #3aa82b solid;
}

.man .intoro_h .point{
color:#3aa82b;
}

.n_shop .ofm{
border:1px solid #3aa82b;
}

.n_shop .ofm a{
color:#3aa82b;
}

/* ---------- ショップデータ（店データアイコン） ---------- */

.n_shop .shopdata .tel:before{
background-image: url(https://www.seikanmassa.org/img/tel.svg);
background-size: contain;
}

.n_shop .shopdata .gyosyu:before{
background-image: url(https://www.seikanmassa.org/img/gyosyu.svg);
background-size: contain;
}

.n_shop .shopdata .area:before{
background-image: url(https://www.seikanmassa.org/img/area.svg);
background-size: contain;
}
.n_shop .shopdata .time:before{
background-image: url(https://www.seikanmassa.org/img/time.svg);
background-size: contain;
}
.n_shop .shopdata .price:before{
background-image: url(https://www.seikanmassa.org/img/price.svg);
background-size: contain;
}


/* ---------- ショップページのナビ ---------- */

#shoplist .shopnav_top{
	margin:12px 2%;
	padding:12px;
	border:1px solid #ddd;
	border-radius:4px;
	display:inline-block;
}

#shoplist .shopnav_title{
	font-size:14px;
	margin-bottom:4px;
}

#shoplist .shopnav_list{
	display:flex;
	flex-wrap:wrap;
}

#shoplist .shopnav_list li{
	box-sizing: border-box;
	list-style-type:none;
	margin-top:8px;
}

#shoplist .nav_open{
	padding:6px;
	margin-left:4px;
	border:1px solid #ddd;
	border-radius:4px;
}

/* ---------- ショップページの関連エリア ---------- */

.sub_area{
	width:94%;
	margin:0 auto;
	text-align:left;
}

.sub_area h3{
	font-size:16px;
	margin-bottom:8px;
	padding-bottom:4px;
	border-bottom:2px solid #eee;
}


/* ---------- 異性ページへのリンク ---------- */

.linkmens{
display:block;
text-align:right;
margin:0 8px 8px 0;
font-size:12px;
}

.linkmens:before{
content:"⇒";
}

/* ---------- エリア一覧 ---------- */

.arealist{
	width:94%;
	margin:0 auto 16px auto;
}

.arealist dt{
	font-size:16px;
	margin:0 0 8px 0;
	border-bottom:1px solid #ddd;
}

.arealist dd{
	font-size:14px;
	margin:0 0 8px 0;
}


/* ---------- トップタブ切り替えエリア一覧 ---------- */

.tab_content_description .arealist{
	width:100%;
	margin:0 0 8px 0;
}

.tab_content_description{
	display: grid;
	display: -ms-grid;
	grid-template-columns: [col1] 48% [col2] 48% ;
	grid-template-rows: [row1] 220px [row2] 220px ;
	grid-gap: 10px 3%;
}


.tab_content_description .arealist dt{
	font-size:14px;
	margin:0 0 8px 0;
	border-bottom:1px solid #ddd;
}

.tab_content_description .arealist dd{
	font-size:12px;
	margin:0 0 8px 0;
}



/* ---------- footer（下部分） ---------- */
#footer {
padding: 0;
}

.foodad{
width:98%;
margin:5px auto;
}

.foodad img{
width:100%;
}


/* ---------- copyright（著作権表示） ---------- */
#copyright {
color: #020;
font-size: 13px;
letter-spacing: 2px;
text-align: center;
background-image: url(../img/bg.gif);
padding: 10px;
margin: 0px;
}


/* ---------- 異性ページへのリンク ---------- */

.linkmens{
text-align:right;
margin:0 5px 10px 0;
font-size:12px;
}

/* ---------- ランダムバナーリンク ---------- */

div.spad{
text-align:center;
margin:5px auto;
position: relative;
padding:20px 0 0 0;
}

div.spad img{
width:90%;
}

div.spad:before{
content:"【PR】";
position: absolute;
font-size:16px;
font-weight:bold;
top: -5px;
left: 0px;
}

/* ---------- 問合せフォーム ---------- */


/* for table */
#form-tbl {
	margin: 0 auto;
	text-align: center;
	width:96%;
}

#form {
	width: 100%;
	margin: 10px auto;
}

#form th, #form td {
    	text-align: left;
	width: 100%;
        display: block;
        padding: 6px 3px;
}

#form th {
	background: #e8e8e8;
	border: 1px solid #666;
}

#form td {
	background: #fff;
	border: 1px solid #666;
	border-top: none;
}

#form input[type="text"] , #form textarea {
	width: 100%;
}

p.btn input {
	width: 10em;
	height: 32px;
	margin:0 30px 16px 30px;
}

p.btn input:nth-child(even) {
	margin:0;
}

/* for message */
p.msg {
	color: #dd0000;
	margin: 1em auto;
}
span.msg {
	color: #dd0000;
}

/* for back-button */
form.back {
	margin-top: 2em;
}