/* General Styles */

*{
	box-sizing: border-box;
	letter-spacing:0.1em;
	font-size:0.96rem;
	line-height:1.6rem;
}

html, body{
	margin:0;
	padding:0;
}

body {
  margin: 0;
  padding: 52px 0 0 0;
  font-family: sans-serif;
  font-size: 1.0rem;
  background-image: url('hero.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media(max-width:768px){
	body {
		padding-top:72px;
	}
}

a{
	text-decoration:none;
}

form{
	display:inline;
}

section{
	margin:2.0rem 0;
}

section h1{
	padding:0.8rem 0;
}

.hidden{
	display:none;
}

.mini{
	font-size:0.5rem;
}

.small{
	font-size:0.8rem;
}

.large{
	font-size:1.2rem;
}

.big{
	font-size:1.6rem;
}

.bold{
	font-weight:bold;
}

.main{
	color:#039fab;
}

.white{
	color:#fff;
}

.bg_white{
	background-color:#fff;
}

.op_25{
	opacity:0.25;
}

.op_50{
	opacity:0.5;
}

.op_75{
	opacity:0.75;
}


.bgop_25{
	background-color: rgba(255, 255, 255, 0.25);
}

.bgop_50{
	background-color: rgba(255, 255, 255, 0.5);
}

.bgop_75{
	background-color: rgba(255, 255, 255, 0.75);
}

.bgop_85{
	background-color: rgba(255, 255, 255, 0.85);
}


.block{
	display:block;
}

.inline-block{
	display:inline-block;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
@media(max-width:768px){
	.container {
		padding: 0 8px;
	}
}

/* Header Styles */

.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:64px;
	display:inline-block;
  background-color: #039fab;
  color: #fff;
  font-size:0.9rem;
  line-height:1.0rem;
  padding: 6px 0;
  z-index:150;
  border-bottom:1px solid #01858F;
  box-sizing:border-box;
}

.header img{
	position: relative;
    display: inline;
    height: 28px;
    transform: translateX(-50%);
    left: 50%;
}

.header a{
	text-align:center;
}

.header .header_text{
	font-size:1.2vh;
}

/* Hero Styles */

.hero {
  
  height: 600px;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-text {
  text-align: center;
  color: #fff;
}

.hero-text h1 {
	color:#fff;
  font-size: 3.6rem;
  margin: 0;
  text-shadow:0 0 12px #000;
}

.hero-text p {
  font-size: 1.25rem;
  font-weight:bold;
  margin: 20px 0;
  text-shadow:0 0 12px #000;
  width: 100%;
  line-height: initial;
}

.button {
  display: inline-block;
  background-color: #fff;
  color: #039fab;
  padding: 12px 24px;
  border-radius: 4px;
  border:1px solid #039FAB;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  background-color: #039fab;
  color: #fff;
  border:1px solid #FFF;
}

h1{
	text-align:center;
	color:#039fab;
	font-size: 2.2rem;
	margin: 0;
	text-shadow:none;
}

h2, h3{
	text-align:center;
	color:#039fab;
}

p {
  font-size: 1.0rem;
  line-height: 2.0;
  margin: 20px auto;
  text-align:center;
  width:70%;
}
@media(max-width:768px){
	p {
		width:94%;
	}
}

.contact_form{
	max-width:640px;
	margin:auto;
	line-height:2.2rem;
}

form label{
	font-size:1.0rem;
	color:#4a3e53;
	font-weight:bold;
	padding:0.6rem 0;
}

input[type=text],input[type=email],input[type=password],textarea{
	border:2px solid #039fab;
	border-radius:4px;
	padding:0.5rem 0.7rem;
	font-size:1.0rem;
	line-height:24px;
	width:92%;
	margin-left:4%;
	margin-bottom:0.8rem;
}

select{
	border:2px solid #039fab;
	border-radius:4px;
	padding:0.5rem 0.7rem;
	font-size:1.0rem;
	line-height:24px;
	width:auto;
	margin-left:4%;
	margin-bottom:0.8rem;
}

button{
  display: inline-block;
  background-color: #fff;
  color: #039fab;
  font-size:1.1rem;
  padding: 8px 24px;
  border:2px solid #039fab;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  cursor:pointer;
}
button:hover{
	color:#fff;
	background:#039fab;
}

.center{
	margin-left:50%;
	transform:translateX(-50%);
}

.pointer{
	cursor:pointer;
}

/* About Section Styles */

.about {
  padding: 40px 20px;
}

.about h2 {
  font-size: 2.0rem;
  margin: 0;
}

.about p {
  font-size: 1.0rem;
  line-height: 1.8;
  margin: 20px auto;
  text-align:center;
  width:70%;
}
@media(max-width:768px){
	.about p {
		width:94%;
	}
}

.about b{
	line-height:3.0rem;
	color:#4a3e53;
}

b{
	line-height:3.0rem;
}

/* Features Section Styles */

.features {
  padding: 2.0rem 0;
}

.features h2 {
  font-size: 2.0rem;
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0;
}

.col {
  flex: 1;
  margin: 0 20px;
  text-align: center;
}

.col img {
  max-width: 100%;
  margin-bottom: 20px;
}

.col h3 {
  font-size: 1.8rem;
  margin: 0;
}

.col p {
  font-size: 1.0rem;
  margin: 20px 0;
}

/* Popular Communities Section Styles */

#popular-communities {
  padding: 80px 0;
}

#popular-communities h2 {
  font-size: 2.0rem;
  margin: 0;
}

.col a {
  text-decoration: none;
  color: #333;
}

.col a:hover {
  text-decoration: underline;
}

/* Footer Styles */

footer {
	text-align:center;
  background-color: #039fab;
  color: #fff;
  padding: 20px 0.4rem;
  line-height:1.8rem;
  width:100%;
  margin-left:0;
}

footer .container {
	padding:0;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  //display: flex;
  //justify-content: center;
  //align-items: center;
}

footer ul li {
  margin: 0 0.4rem;
}

footer ul li a {
	display: inline-block;
  color: #fff;
  text-decoration: none
}

footer ul li a:hover {
  text-decoration: underline;
}

footer ul li {
  display: inline-block;
  margin-right: 20px;
}

footer ul li:last-child {
  margin-right: 0;
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: fixed;
  width: 50px;
  height: 44px;
  background: #039fab;
  border: none;
  appearance: none;
  cursor: pointer;
  top:0.4rem;
  right:0.4rem;
  z-index:600;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 20px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}


#menu01.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
#menu01.active span:nth-of-type(2) {
  opacity: 0;
}
#menu01.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}


.nav-menu{
	position:fixed;
	top:0;
	right:-100%;
	width:80%;
	height:100%;
	background:#039FAB;
	color:#fff;
	transition:0.5s;
}

.nav-menu ul{
	display:inline-block;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}

.nav-menu ul li{
	display:inline-block;
	width:100%;
	padding:0;
}

.nav-menu ul li a{
	display:inline-block;
	color:#fff;
	font-weight: bold;
	font-size:1.2rem;
	text-decoration:none;
	border-bottom:1px solid #fff;
	color:#fff;
	padding:0.6rem 0;
	box-sizing:border-box;
	height:2.4rem;
	width:100%;
	margin:0.6rem;
	transition:0.5s;
}

.nav-menu ul li a:hover{
	color:#039FAB;
	background:#fff;
}

hissu{
	position:relative;
	display:inline-block;
	font-size:0.9rem;
	line-height:1.6rem;
	color:#FFF;
	background:#039FAB;
	padding:0.0rem 0.4rem;
	border-radius:0.4rem;
	margin:0 0.4rem 0 0;
}

label.input {
    margin-right: 5px; /* ボタン同士の間隔 */
	margin-bottom:0.5rem;
}
label.input input {
    display: none; /* デフォルトのinputは非表示にする */
}
label.input span {
    color: #555; /* 文字色を黒に */
	background:#FFF;
    font-size: 1.0rem; /* 文字サイズを14pxに */
    border: 2px solid #039FAB; /* 淵の線を指定 */
    border-radius: 20px; /* 角丸を入れて、左右が丸いボタンにする */
    padding: 0.4rem 0.6rem; /* 上下左右に余白をトル */
	white-space:nowrap;
	transition-duration:0.5s;
}
label.input input:checked + span {
    color: #FFF; /* 文字色を白に */
    background: #039FAB; /* 背景色を薄い赤に */
    border: 2px solid #039FAB; /* 淵の線を薄い赤に */
}

.box{
	position:relative;
	display:block;
	width:98%;
	margin-left:1%;
	box-sizing:border-box;
	background:#FFF;
	border-radius:16px;
	border:2px solid #CCC;
	padding:0.4rem;
}

myicon{
	    display: inline-block;
    width: 4.8rem;
    height: 4.8rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 60%;
}

.prof_table{
	width:100%;
	font-size: 1.0rem;
    color: #4a3e53;
    font-weight: bold;
    padding: 0.6rem 0;
}

.prof_table td{
	text-align:left;
	padding:0.6rem 0;
}

.prof_table td.left{
	width:50%;
}

.prof_table td.bd{
	border-bottom:1px solid #AAA;
}

.prof_table p{
	width:98%;
	padding:0.4rem;
	margin: 0.2rem 0 0.2rem 1%;
    text-align: left;
	border-radius: 16px;
    border: 2px solid #CCC;
	background:#FFF;
	box-sizing:border-box;
}

body#comu_body{
	padding-top:148px;
}

#comu_ban{
	position:fixed;
	display:flex;
	align-items:flex-end;
	justify-content: space-evenly;
	top:64px;
	left:0;
	z-index:140;
	width:100%;
	height:42px;
	background:#01858F;
	color:#FFF;
	font-weight:bold;
	box-sizing:border-box;
	margin:0;
	padding:0;
	white-space:nowrap;
	overflow:hidden;
	border-bottom:1px solid #01858F;
	//box-shadow:0 0 6px rgba(0,0,0,0.5);
}

#comu_ban a{
	position:relative;
	box-sizing:border-box;
	display:inline-block;
	width:33%;
	height:42px;
	margin:0;
	padding:0;
	line-height:42px;
	text-align:center;
	cursor:pointer;
	transition:0.5s;
	background:#039FAB;
	color:#FFF;
	border-radius:0;
}
#comu_ban a:hover{
	background:#FFF;
	color:#039FAB;
}
#comu_ban a.active{
	background:#FFF;
	color:#039FAB;
	//border:2px solid #01858F;
}
#comu_ban a.sub{
	border-radius:6px 6px 0 0;
	height:32px;
	line-height:32px;
}

body#comu_body{
	padding-top:116px;
}

body#comu_body contents{
	display:block;
	padding:0;
	margin:0 auto;
	box-sizing:border-box;
	width:768px;
}
@media(max-width:768px){
	body#comu_body contents{
		width:100%;
		margin:0;
	}
}

body#comu_body h1{
	color:#FFF;
	font-size:1.8rem;
	margin:0.6rem;
}

#comu_src{
	display:block;
	width:100%;
	white-space:nowrap;
	padding:0;
}

#comu_src input[type="text"]{
	width:76%;
	margin-left:auto;
}
#comu_src .button{
	width:18%;
	max-width:6rem;
	padding:8px 18px;
}

body#comu_body .post_btn_area{
	position:relative;
	display:inline-block;
	width:100%;
	padding:0;
	margin:0;
	
}

body#comu_body .box, body#comu_body .box span{
	line-height:1.2rem;
}

.fixedWidget {
    position: fixed !important;
	display:inline-block !important;
    top: 114px !important;
    left: 50%;
    transform: translateX(-50%);
}

.close_btn{
	    position: fixed;
    font-size: 5rem;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
	color:#555;
	cursor:pointer;
	transition:0.5s;
	right:0.6rem;
}
.close_btn:hover{
	background:#EEE;
}


#post_box{
	position:fixed;
	display:inline-block;
	width:100%;
	left:0;
	height:80%;
	top:15%;
	margin:0;
	padding:0.6rem 0.3rem;
	box-sizing:border-box;
	border:#999 solid 1px;
	border-radius:6px;
	box-shadow:0px 6px 12px rgba(0,0,0,0.5);
	background:#FFF;
	z-index:140;
	overflow-y:scroll;
}
@media(min-width:512px){
	#post_box{
		width: 512px;
		margin-left: auto;
		margin-right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
}