@charset "Shift_JIS";

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

body.topbody{
color: #444;
text-align: center;
padding: 0 0 0 0;
margin: 0;
}


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-top:60px;
position: relative;
}

/* ---------- header（上部分） ---------- */
#header {
height: 220px;
background-image: url(../img/title.jpg);
background-size:100% auto;
background-repeat: no-repeat;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
margin-bottom: 10px;
position:relative;
}

#header_top {
width: 100%;
font-size: 18px;
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{
width: 80%;
margin:16px auto;
font-size: 30px;
font-weight: bold;
letter-spacing: 2px;
color:#000;
line-height:150%;
}

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

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

#menuhead img{
	width:70%;
	margin:0 15%;
	vertical-align:middle;
}

#menuhead .left , #menuhead .right{
	width:7%;
	padding:0 1%;
}

#menuhead .center{
	width:84%;
}

#menuhead .center img{
	width:190px;
	vertical-align:middle;
}


/* ---------- main（メイン部分） ---------- */
#main , #shoplist , #news , #inq{
width: 70%;
margin:0 auto;
text-align:left;
}

/* --- 大見出し --- */
#main h2 , #shoplist h2 , #news h2 , #inq h2 {
width:100%;
font-size: 16px;
letter-spacing: 2px;
background-image: url(..img/sub-bg.gif);
background-color: #eee;
border: 1px solid #ccc;
padding: 8px;
margin:0 auto 16px auto;
}

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

/* --- 新着情報 --- */

#main .newlist {
font-size: 14px;
}

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

#main .explain {
width:100%;
margin:12px 0;
display: grid;
display: -ms-grid;
grid-template-columns: [col1] 49% [col2] 49% ;
-ms-grid-columns: 450px 450px ;
grid-template-rows: [row1] 180px [row2] 180px ;
-ms-grid-rows: [row1] 50% [row2] 50% ;
grid-gap: 20px 2%;
text-align: left;
font-size:16px;
line-height:150%;
}

#main .explain .ex01{
grid-column: 1/2 ;
-ms-grid-column: 1;
grid-row: 1/2 ;
-ms-grid-row: 1 ;
}

#main .explain .ex02{
grid-column: 2/3 ;
-ms-grid-column: 2;
grid-row: 1/2 ;
-ms-grid-row: 1 ;
}

#main .explain .ex03{
grid-column: 1/2 ;
-ms-grid-column: 1;
grid-row: 2/3 ;
-ms-grid-row: 2 ;
}

#main .explain .ex04{
grid-column: 2/3 ;
-ms-grid-column: 2;
grid-row: 2/3 ;
-ms-grid-row: 2 ;
}

#main .explain .ex05{
grid-column: 1/2 ;
-ms-grid-column: 1;
grid-row: 3/4 ;
-ms-grid-row: 3 ;
}

#main .explain .ex06{
grid-column: 2/3 ;
-ms-grid-column: 2;
grid-row: 3/4 ;
-ms-grid-row: 3 ;
}

#main .explain .ex07{
grid-column: 1/2 ;
-ms-grid-column: 1;
grid-row: 4/5 ;
-ms-grid-row: 4 ;
}

#main .explain .ex08{
grid-column: 2/3 ;
-ms-grid-column: 2;
grid-row: 4/5 ;
-ms-grid-row: 4 ;
}

#main .explain .ex09{
grid-column: 1/2 ;
-ms-grid-column: 1;
grid-row: 5/6 ;
-ms-grid-row: 5 ;
}

/* IE10以降 */
@media all and (-ms-high-contrast:none){
#main .explain section{
    margin-right:10px;
  }
}

#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;
}

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

#main .explain .excnt p{
	width:300px;
}


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

.infobox{
display: grid;
display: -ms-grid;
grid-template-columns: [col1] 49% [col2] 49% ;
-ms-grid-columns: 50% 50% ;
grid-gap: 20px 2%;
grid-template-rows: [row1] 50% [row2] 50% ;
-ms-grid-rows: [row1] 50% [row2] 50% ;
}

.infobox .newlist{
-ms-grid-column:1;
-ms-grid-row:1;
}

.infobox .gree{
-ms-grid-column:2;
-ms-grid-row:1;
}


/* IE10以降 */
@media all and (-ms-high-contrast:none){
.infobox .newlist{
    margin-right:10px;
  }
}


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

.top_arealist{
	margin-bottom:18px;
}

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

/*タブのスタイル*/
.tab_item {
  width: 50%;
  height: 50px;
  border-bottom: 3px solid #aaaaaa;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  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: 10px 10px 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{
font-size: 18px;
letter-spacing: 2px;
border-bottom: 1px solid #bbb;
padding: 4px 0 4px 0;
margin: 0px 4px 4px 0;
}

#news 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;
}

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

/* --- 文章内の強調文字 --- */
#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 , .log-text {
font-size: 16px;
width:100%;
line-height: 160%;
letter-spacing: 1px;
padding: 0;
margin:0 auto 12px auto;
}

/* --- パンクズ --- */
.pan {
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
margin-left: 5px;
margin-bottom: 15px;
line-height:150%;
}
.pan span {
color: #d00;
}

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

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

.n_shop{
width:100%;
margin-bottom:20px;
display: grid;
display: -ms-grid;
grid-template-columns: 300px auto;
-ms-grid-columns: 300px auto ;
grid-template-rows: 60px 200px auto auto;
-ms-grid-rows: 60px auto auto auto ;
}

.n_shop h3{
padding: 8px;
font-size:22px;
margin-bottom:10px;
grid-column: 1/3 ;
-ms-grid-column-span: 3;
grid-row: 1/2 ;
-ms-grid-row: 1 ;
}

.n_shop h3:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
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{
grid-column: 1/2 ;
-ms-grid-column: 1 ;
grid-row: 2/3 ;
-ms-grid-row: 2 ;
width:300px;
height:auto;
}

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

.n_shop .shopdata{
width:100%;
padding:0;
margin-top:16px ;
line-height:180%;
grid-column: 1/3 ;
-ms-grid-column-span: 3;
grid-row: 4/5 ;
-ms-grid-row: 4 ;
display:flex;
flex-wrap:wrap;
}

.n_shop .shopdata dl{
width:31%;
padding:0;
margin:0 2% 0 0;
min-height:100px;
}

.n_shop .shopdata dl:last-child{
width:65%;
}


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

.n_shop .shopdata dt:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
margin-right:8px;
}

.n_shop .shopdata dd{
font-size:14px;
margin:0 0 8px 0;
padding:0;
}

.n_shop .intoro_h{
width:97%;
margin:0 0 0 3%;
grid-column: 2/3 ;
-ms-grid-column: 2 ;
grid-row: 2/4 ;
-ms-grid-row: 2 ;
}

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

.n_shop .intoro_h .point{
display:block;
font-size:18px;
font-weight:bold;
margin-bottom:5px;
line-height:170%;
}

.n_shop .official{
width:98%;
height:40px;
margin:8px 1%;
grid-column: 1/2 ;
-ms-grid-column: 1 ;
grid-row: 3/4 ;
-ms-grid-row: 3 ;
text-align:center;
padding:8px;
border-radius:8px;
}

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

.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;
}

/* ---------- ショップデータ（ヘッダー） ---------- */

#shop_header_top {
width: 80%;
font-size: 30px;
font-weight: bold;
letter-spacing: 2px;
margin:16px 10% 8px 10%;
color:#000;
line-height:150%;
}

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

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

#shoplist .shopnav_title{
	font-size:18px;
	margin:0 0 8px 0;
}

#shoplist .shopnav_list{
	display:flex;
	flex-wrap:wrap;
	padding:0 2%;
}

#shoplist .shopnav_list li{
	width:50%;
	list-style-type:none;
	margin-bottom:4px;
	padding:4px;
	font-size:14px;
}

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

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

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

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


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

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

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

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

.arealist{
	float:left;
	width:18%;
	margin-right:2%;
	height:280px;
}

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

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

/* ---------- メニューのIE対処用 ---------- */

/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast:none){
#my-menu ul{
    margin-top:20px;
  }
}
 
/*IE11だけに適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .css_selector {
#my-menu ul{
    margin-top:20px;
        }
  }
}

/* --- サイトマップ --- */
div.sitemap {
font-size: 80%;
letter-spacing: 1px;
margin-bottom: 10px;
}

div.sitemap dt {
font-size: 100%;
font-weight: bold;
margin-bottom: 4px;
}
div.sitemap dd {
line-height: 130%;
}

div.sitemap table {
margin: 0px auto;
}

/* ---------- 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;
}

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

.spad{
	position:fixed;
	bottom: 0;
	left:0;
	width:100%;
	height:70px;
	background-color:rgba(0,0,0,0.5);
}

.spad a{
	display:block;
	width:300px;
	margin:5px auto;
	position: relative;
}

.spad a img{
	width:100%;
}

.spad a:before{
	color:#fff;
	content:"【PR】";
	position: absolute;
	font-size:16px;
	font-weight:bold;
	bottom: 2px;
	left: -48px;
}

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


/* for table */
#form-tbl {
	margin-left: 0;
	font-size:90%;
}
#form {
	border-collapse: collapse;
	margin: 1em 0;
}
#form th, #form td {
	border: 1px solid #666;
	padding: 8px;
}
#form th {
	white-space: nowrap;
	background: #e8e8e8;
}
#form td {
	width:100%;
	background: #fff;
}

p.btn input {
	width: 110px;
	height: 32px;
	margin:0 230px 16px 230px;
}

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

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

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