@import url('reset.css');
body{background:#FBF9F7;text-align:center;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#554400;}
a{color:#554400;text-decoration:none;}
header {padding :10px;}
header h1{background:url(../img/common/icon_squirrel.png) no-repeat calc(50% - 4.5em) center / auto 100%;}
header div{text-align:center;position:relative;}
header button{position:absolute;top:0;width:2.3em;background:transparent;border:0;padding:0;cursor: pointer;}
header button:nth-child(2){right:2.5em;}
header button:nth-child(4){right:0;}
header button img{border:2px solid #554400;border-radius:50%;padding:3px;}
header p#copymsg{position:absolute;top:10px;right:4em;border:1px solid #bebab3;background:#fdf0c4;border-radius:5px;padding:5px;}
#menu {display:flex;justify-content: center;background: #f1efe4;text-align:center;padding:3px;}
#menu li{padding:5px 10px;margin:0;}
#menu li a{text-decoration:underline;}
#menu li a:hover{text-decoration:none;}
footer{padding :10px;}
#container{background:#fff;}
#container > .inbox{max-width:780px;margin:auto;}
input[type=text],input[type=date],input[type=password],select{font-size:100%;border-radius:5px;border: 1px solid #bebab3;padding:5px;background:#fff;}
input[type=text],select,input[type=password]{width:100%;max-width:300px;}
input[type=text]:disabled{background:#ddd;}
input[type=submit]:disabled{color: #bebab3;border: 2px solid #bebab3;background:#fff;}
input[type=submit],input[type=button]{font-size:100%;padding:5px;color: #ffffff;border: 2px solid #4b7472;background:#4b7472;max-width:500px;width:80%;margin:auto;display:block;border-radius:20px;cursor: pointer;}
table a{border-bottom:1px solid #554400;}
table a:hover{border-bottom:0;}

input[type=radio]{margin:0 5px 0 10px;}
div.error,p.error{color:#ff3333;font-size:80%;}
h2 + div.error,h2 + p,h2 + div.error + p{margin:10px 0;}
.flex{display:flex;flex-wrap:wrap;}
p.error{margin-top:10px;}
#copymsg{display:none;}/*右上アイコンのコピー*/

/*ネットワークエラー・ウィンドウ*/
#alert,#popwindow{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);padding-top:30vh;}
#alert div{max-width:90%;width:600px;background:#000;color:#fff;padding:20px;}
#alert h3{color:#ebf765;margin-bottom:20px;font-size:150%;}
#alert p{color:#666;margin-bottom:20px;}
#alert a.btn{background:#999;color:#fff;}
#popwindow div{max-width:90%;width:600px;background:#fff;padding:20px;}

/*トップページ用*/
#container h1{padding:20px 0;}
#group_form,#gamemake{padding:10px;}
#gamemake + h2 ,#group_form + h2,#searchform+ h2{margin:30px auto;}
dl.flex{align-items:flex-start;margin:10px 0;font-size:105%;align-items:center;}
dt{text-align:right;padding:10px 10px 10px 0;margin:0;}
dd{text-align:left;padding:10px 0;margin:0;}
dd > p{border-radius:5px;padding:5px;background:#f6f6f6;display:inline-block;}

p#place_name{font-size:120%;}
#gamelist{margin:10px auto 30px auto;}
ul#gamelist li a,#groupLink a,a.btn {font-size:120%;display:block;text-align:center;background: #e0edec; border-radius :8px;/*角の丸み*/ padding: 0.5em;margin-bottom:10px;}
ul#gamelist li a:hover,#groupLink a:hover,a.btn:hover,a.btn02:hover{background:#c8dddc;}
a.btn02{font-size:120%;display:block;text-align:center;border:1px solid #4b7472;color:#4b7472; border-radius :8px;/*角の丸み*/ padding: 0.5em;margin-bottom:10px;}
ul#gamelist li span{font-size:80%;background:#c8dddc;display:block;}


/*グループ作成*/
#container h1 a,#container h1 span{display:inline-block;font-size:70%;font-weight:normal;margin-bottom:5px;}
#container h1 span{border-bottom:1px solid #554400;}
#container h1 a:after{content:'コースマップを見る⇒';font-size:70%;display:block;background:#379e32;color:#fff;border-radius:5px;margin:5px 0;padding:5px;}
.newmember{display:none;}
#groupmember{width:100%;}/*overflow-x: scroll;white-space: nowrap;*/
#groupmember th,#groupmember td {padding: 10px 0;text-align:center;}
#groupmember th{background: #c8dddc;}
#groupmember td{background: #f6f6f6;}
#groupLink{margin:30px 0;}
.grouplit{margin:50px 0 30px;}

/*ポイント入力画面*/
#pointtable{min-width:100%;}
#pointtable th,#pointtable td {padding: 10px 0;max-width:50px;word-break: break-all;text-align:center;}
#pointtable th{background: #c8dddc;}
#pointtable tr:nth-child(even) td{background: #f6f6f6;}
#pointtable tr:nth-child(odd) td{  background: #e4e8e9;}
#pointtable input[type="text"]{border:0;width:3em !important;text-align:right;}
#pointtable input[type="text"]::placeholder { color:#eeeeee; }
.scroll-box{ overflow-x: auto; -webkit-overflow-scrolling: touch;margin-bottom:20px;}
#pointtable tr:nth-child(1) th{
  position: sticky;
  top: 0;
  background: #c8dddc;
}
#pointtable tr:nth-child(1) th:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
}
#pointtable td.hole_num a{border-bottom:0;line-height:1;}

h1 + .flex {margin-bottom:10px;}
h1 + .flex,h1 + .flex ul{display:flex;flex-wrap:wrap;}
h1 + .flex ul li{margin:0 5px;}
h1 + .flex ul li,h1 + .flex ul li a{min-width:2em;line-height:1.5;text-align:center;}
h1 + .flex ul li.now{background:#c8dddc;font-weight:bold;}
h1 + .flex ul li a{display:block;border:1px solid #e4e8e9;}
h1 + .flex ul li a:hover{background:#f6f6f6;}

/*検索画面*/
.accordion {margin-top: 20px;padding:20px;}
.accordion p {font-weight: bold;}
.accordion p::after {margin-left:10px;content: '＋';border:1px solid #554400;padding:5px;}
.accordion p.open::after {content: '－';}
.accordion div {padding: 10px 0;display: none;}

/*検索画面*/
input[type=button]{margin-top:10px;;border:1px solid #4b7472;color:#4b7472;background:#fff;}
input[type=button]:hover{background:#c8dddc;}
.searchtable,.usersearch,.sumtable{min-width:100%;}
.searchtable th,.searchtable td,.usersearch th,.usersearch td,.sumtable th,.sumtable td {padding: 10px 0;max-width:50px;word-break: break-all;text-align:center;}
.searchtable th,.usersearch th,.sumtable th{background: #c8dddc;}
.searchtable tr:nth-child(even) td,.usersearch tr td,.sumtable tr:nth-child(even) td{background: #f6f6f6;}
.searchtable tr:nth-child(odd) td,.usersearch tr:nth-child(4n+4) td,.usersearch tr:nth-child(4n+5) td,.sumtable tr:nth-child(odd) td{  background: #e4e8e9;}
.searchtable + div,.sumtable + div{margin-top:30px;}
.searchtable a:not(.copy){border:1px solid #4b7472;color:#4b7472;border-radius:5px;margin:5px;padding:0 5px;}
.searchtable a:not(.copy):hover{border:1px solid #4b7472;background:#fff;}
.usersearch a{color:#4b7472;border:0;}
.usersearch a:hover{color:#c8dddc;}
.searchtable td a.copy{display:block;width:1.5em;border:0;line-height:1;}
.usersearch tr td.bluegraysh{background:#d9e6e5;}
.usersearch td[rowspan] span.bluegraysh{background:#d9e6e5;display:inline-block;width:100%;text-align:center;}

ul#paging{display:flex;flex-wrap:wrap;}
ul#paging li{width:auto;margin:5px;}
ul#paging li.current{margin:5px;padding:5px 10px;background: #c8dddc;border-radius:5px;}
ul#paging li a{display:block;text-align:center;padding:5px 10px;border-radius:5px;}
ul#paging li a:hover{background:#e4e8e9;}
ul#paging li:last-child{border:0;padding:5px 10px;}

/*********** min-width:768px ************/
@media screen and (min-width:768px){
header h1{line-height:1.5;}
header #menu{padding:0 10px;}
#menu li{border-left:1px solid #fff;}
#menu li:last-child{border-right:1px solid #fff;}

#container{padding:20px 0 50px;}
.scroll-box {max-width: 95%;height:700px;}
ul#gamelist li a,#groupLink a,a.btn,a.btn02 {max-width: 500px;}
dt{width:35%;}
dd{width:65%;}
#pointtable td span:first-child{text-align:right !important;}
#pointtable td.hole_num a{display:inline-block;margin-right:5px;width:1.2em;}

}
/*********** max-width:640px ************/
@media screen and (max-width:768px){
h1 {font-size:160%;}
h2 {font-size:130%;margin-bottom:10px;}
header h1{line-height:1.2;}
header #menu{width:100%;}
#menu li:nth-child(n+2){border-left:1px solid #fff;}
#container{padding:10px 1% 20px 1%;}
.scroll-box {max-width: 90%;height:500px;}
ul#gamelist li a,#groupLink a,a.btn,a.btn02 {max-width: 80%;}
#pointtable td span,#pointtable th span,.sumtable td span{display:inline-block;width:100%;text-align:center;}
dt{width:30%;}
dd{width:65%;}
#pointtable td.hole_num div{display:flex;flex-direction:column-reverse;}
#pointtable td.hole_num a{display:block;width:1.2em;}

}