@charset "UTF-8";
/*-----------共通デザイン----------*/
html {
  font-size: 100%;
  width:100%;

}
body {
	margin:0;
	width:100%;
  	color: #333333;
  	font-size: 1rem;
  	font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  	background-color:#f0f8ff;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  width: 100%;
}
li {
  list-style: none;
}
/*
コンテンツ幅を設定するための共通クラス
*/
.wrapper {
  width:100%;
  padding: 0 0;
  margin: 0 auto;
}

/*
疑似要素で下線を設定するために、「position: relative;」を設定
*/

/*
「position: absolute;」を設定し、left、bottomで下線の位置を調整
widthとheightで線の長さと高さを設定
疑似要素で線を表示させるためには、「content: '';」を設定すること
「transition: all 200ms ease;」でホバー時の速度などを設定
*/

/*
ホバー時の下線の設定
「opacity: 0;」下線を非表示
「transform: translateY(3px);」下に3px移動
→下に3px移動しながら下線を非表示にする
*/


/*-------------------------------------------
header
-------------------------------------------*/
/*
「position: fixed;」でヘッダーを固定し、「z-index: 10;」で前面に表示
※他のコンテンツでpositionをrelative、absolute、fixedのいずれかに
設定している場合は、z-indexの数値が大きい方が前面に表示される
*/
#header {
  width: 100%;
  position: fixed;
  z-index: 10;
}
#header  img{
	vertical-align: bottom;
	max-width:auto;
	height:auto;

}
/*
「display: inline-block;」でリンクを親要素の範囲に広げる
※blockを指定すると横幅いっぱいまで広がってしまうため、
inline-blockを設定している
*/

#navi {
  background-color: #3ebaae;
}
#navi a {
  color: #fff;
}

#navi li {
  font-size: 0.875rem;
  padding: 10px 60px 10px 0;
}
.header_top{
	width:100%;
}


/*-------------------------------------------
container
-------------------------------------------*/
#container {
	padding-top:300px;
  	display: flex;
	justify-content: center;  margin-bottom: 60px;
  	width:100%;
}
main {
  width: 65%;
}
.article {
	width:100%;
  margin-bottom: 80px;
}
main .article-title {
  font-size: 1.5rem;
  margin: 10px 0 15px 0;
}
main ul {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  width:100%;
}
main li {
  font-size: 0.875rem;
  margin-right: 20px;
}
main .text {
  padding: 10px 40px 30px 40px;
}

/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar {
  width: 100%;
  padding: 20px;
}
#sidebar .side-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 30px;
  width:100%;
}
.ranking {
  text-align: center;
  margin-bottom: 60px;
}
.ranking article {
  margin-bottom: 30px;
}
.ranking .article-title {
  font-size: 0.875rem;
  font-weight: normal;
  text-align: left;
}



/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
width:100%;
  font-size: 0.875rem;
  background-color: #3ebaae;
}
#footer .content {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  padding-bottom: 50px;
}

#footer .footer-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 30px;
}
#footer ul.about-list {
  margin: 20px 0;
}
#footer ul.about-list li {
  margin-bottom: 5px;
}
#footer ul.about-list .arrow {
  position: relative;
  display: inline-block;
  padding-left: 12px;
  color: #3ebaae;
}
/*
疑似要素で三角矢印を表示
border～プロパティで三角を作り、positionで位置調整
*/
#footer ul.about-list .arrow::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #3ebaae;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -6px;
}

#footer .copyright {
  font-size: 0.750rem;
  text-align: center;
  margin:0;
  padding: 0;
  color:#fff;
}


.pushimg{
	box-shadow: 0 0 8px 4px #ccc;
}
.pushimg:hover{
		box-shadow: 0 0 8px 4px #4d4d4d;
}
.pushimg:active{
		box-shadow: 0 0 8px 4px #3ebaae;
}
.imgbutton {
    max-width: 280px;
    border: solid 2px #4C67DA;
    border-radius: 15px;
}


.form_wak{
	margin:0 auto;
	border:solid 2px #235195;
     	border-radius: 15px;
	background-color:#e0ffff;
	width:300px;
}
.form_area{
	width:150px;
	background-color:#fff;
}
.aka{
	color:red;

}
.tenmetu{
	animation: blink 1s ease-in-out infinite alternate;
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.ao{
	color:#191970;
}
.ao:hover{
	 background-color: rgba(25,25,112,0.5);
}
.back_link{
	width:100%;
	text-align:center;
}
#wrap{
	margin:10px auto 10px auto;
	border:solid 1px;
	border-radius: 10px;
	max-width:400px;
	padding:0 auto;
	text-align:center;
    	background-color: rgba(255,255,255,0.8);
}
.wrap{
	margin:10px auto 10px auto;
	border:solid 1px;
	border-radius: 10px;
	max-width:400px;
	padding:0 auto;
	text-align:center;
    	background-color: rgba(255,255,255,0.8);
}
.join{
margin:0 auto;
}
.form_ao{
	background-color: rgba(65,105,255,0.2);

}
.mail_list{
	display:flex;
	height:auto;
	padding:15px 0;
}
.mail_list a:hover{
	background-color: rgba(65,105,255,0.2);
}
.list_1{
	width:25%;
	height:80px;

	border-right: dashed 0.5px;
}
.list_2 {
	display:block;
	width:50%;
	height:80px;
	margin:0 5px 0 5px;
	border-right: dashed 0.5px;
	 text-align: center;
}
.list_3 {
	height:80px;
}
.l2a{
	height:100%;
}

.mail_waku{
	padding:0 5px;
}
.mail_waku h2 span{
	border-bottom:solid 1px;
}
.mail_waku h3{
	text-align:left;
}
.page_num{
	display:flex;
	justify-content: space-around;
}
.page_num a{
	display:block;
	padding:1% 3%;
	border-radius: 10px;
	box-shadow: 0 0 8px 4px #ccc;

}
.page_num a :hover{
		box-shadow: 0 0 8px 4px #3ebaae;
}
.prev{
	background-color:#ff6347;
}
.next{
	background-color:#47e3ff;
}
.mail_view_time_del{
	display:flex;
	padding:0 3%;
	justify-content: space-between;
}
.lower_title{
	text-align:center;
}
.reply_form{
	width:300px;
	margin:0 auto;
}
.reply_form table{
	width:100%;
}
.form_title{
	width:100%;
}
.form_honbun{
	width:100%;
}
.user_icon_name{
	display:flex;
	width:100%;
	margin:0 auto;
}
.user_icon_name img{
	display:block;
	margin:auto 0;
	width:50px;
	height:50px;
	border-radius: 45px;
	}
.user_icon_name h3{
	marign:0 auto;
}
.reception_honbun{
	font-size: 80%;
	margin:3%;
	padding:3%;
	border:solid 1px;
	border-radius: 15px;
	box-shadow: 0 0 8px 4px #ccc;
	text-align:left;
}
.click:hover{
	 background-color: rgba(25,25,112,0.5);
}
.list_1_prof{
	width:70%;
	text-align:center;
	padding-top: 15px;
	border-right: dashed 0.5px;

}

.list_2_prof{
	font-size: 80%;
	width:30%;
	margin:0 5px;
	paddin:auto 0;

}
.pay_waku{
	margin:10px auto 10px auto;
	border:solid 1px;
	border-radius: 10px;
	max-width:600px;
	padding:0 auto;
	text-align:center;
    	background-color: rgba(255,255,255,0.8);
}
.prf{
	width:70%;
	text-align:left;
	margin:5px 10%;
}
.article_pay{
	width:100%;
	margin-bottom: 40px;
}
.j_gr_img{
	margin-right:15px;
	height:100px;
        display: grid;
        align-items: center;
}
.j_gr_img a {
}
.j_gr_img a img{
	width:80px;
	height:auto;
	border-radius: 45px;
	

}
.s_gr{
	padding:20px 15px 20px 0px ;
	min-height:50px;
	display:flex;
 	justify-content: flex-end;
 }
.j_gr{
	padding:15px 0;
	width:100%;
	display:flex;
}
.s_gr_text{
	  position: relative;
	width:50%;
	min-height:50px;
	display:block;
	border-radius: 30px;
	background-color:rgba(204,143,143,0.5);
	font-size:80%;
	padding:10px;
}
.s_gr_text:after{
  content: "";
  position: absolute;
  top:50%;
  right: -5%;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color:  transparent transparent #E4C6C7 transparent;
  border-width: 0 15px 15px 0;
  }
.j_gr_text{
	  position: relative;

	width:50%;
	height:100%;
	display:block;
	border-radius: 30px;
	background-color:rgba(143,143,204,0.5);
	font-size:80%;
	padding:10px;

}
.j_gr_text:after{
  content: "";
  position: absolute;
  top:50%;
  left: -5%;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color:  transparent #C6C7E5 transparent  transparent;
  border-width: 0 15px 15px 0;
  }

.s_gr_text_sub{
	margin:0.5px;
	border-bottom: dashed 0.5px #cc0000;
}
.j_gr_text_sub{
	margin:0.5px;
	border-bottom: dashed 0.5px #0000cd;
}
.s_gr_text_honbun{
	text-align:left;
	height: fit-content;

}
.j_gr_text_honbun{
	text-align:left;

}
.s_gr_con{
	font-size:70%;
}
.j_gr_con{
	font-size:70%;
}
.mottoato {
	padding-top:30px;
}
.okini{
	text-align:right;
	font-size:70%;
}
.table_pro{
	padding:10px;
}
.table_pro th,td{
	padding:5px;
	text-align:left;
}
.table_pro textarea{
	width:100%;
}
.setumei{
	width:80%;
	text-align:left;
	margin:3%;
	font-size:80%;
}
.image_touroku img{
	width:80%;
	height:auto;
}
.home_top_right #wrap{
	padding:5px;
}
.home_top_right img{
	max-width:100px;
	 box-shadow: inset 0 0 10px 15px #FFF;
}
.menu-list p a{
	color:#fff;
}
.nenrei_list ul{
	width:100%;
	display:block;
	magin:0;
}
.nenrei_list li{
	width:100%;
 	 list-style: "・";
	font-size:70%;

}
.nenrei_list>ul>li{
  list-style: "〇";
}
.mongon{
	width:100%
}

/*----------PCデザイン----------*/
@media screen and (min-width: 768px) {
	#container {
		padding-top:300px;

	}


	#navi ul {
  		display: flex;
  		justify-content: flex-start;
  		align-items: center;
	}
	.hamburger{
		display:none;
	}
	.login{
 		display:none;
	}
	#footer .menu-list {
		display: block;
		flex-wrap: wrap;
		width:100%;
		margin:0;
		padding:0;
		text-align: center;
	}

	.mail_waku{
		max-width:600px;

		margin:10px auto 10px auto;
		border:solid 1px;
		border-radius: 10px;
		padding:0 auto;
		text-align:center;
	    	background-color: rgba(255,255,255,0.8);
		max-width:500px;
	}
	.home_top{
		display:flex;
		justify-content: space-around;
	}
	.home_top_left{
		width:auto;
	}
}

/*----------タブレットデザイン---------*/

@media screen and (max-width: 1100px) {
	#container {
		padding-top:200px;
	}
	.menu-list{
		padding:0 auto;
	}
	.imgbutton {
    		max-width: 300px;
    	.home_top{
		display:block;
	}
}
}
/*----------SPデザイン---------*/
@media screen and (max-width: 767px) {

	#navi {
    		/* 横スクロールを表示 */
    		overflow-x: scroll;
  	}
	#container {
		padding-top:100px;
   	 	flex-direction: column;
  	}
  	main {
    		width: 100%;
  	}

  	#sidebar {
    		width: 100%;
    		padding: 0;
  	}
 	#footer {
 		text-align:center;
 	}
 	#footer .content {
    		flex-direction: column;
  	}
  	.login {
  		display : block;
  		position: fixed;
  		z-index : 3;
  		right : 10px;
  		top   : 12px;
  		width : 42px;
  		height: 42px;
  		cursor: pointer;
  		text-align: center;
  		-webkit-transition: 0.5s all;
  		-moz-transition   : 0.5s all;
  		transition        : 0.5s all;
 		background-color:rgba(255,255,255,1);
		border-radius: 10px;
		border: solid #d3d3d3 0.5px;
	}
  	.login img{
		width:50%;
  	}
    	.login div{
		width:100%;
  	}
   	.login p{
    		font-size:10px;
  	}
	.hamburger{
  		display : block;
  		position: fixed;
  		z-index : 3;
	  	left : 10px;
  		top   : 12px;
  		width : 42px;
  		height: 42px;
  		cursor: pointer;
  		text-align: center;
  		-webkit-transition: 0.5s all;
  		-moz-transition   : 0.5s all;
  		transition        : 0.5s all;
 		background-color:rgba(255,255,255,1);
		border-radius: 10px;
		border: solid 1px;
	}
	.hamburger span{
  		display : block;
  		position: absolute;
  		width   : 30px;
  		height  : 2px ;
  		left    : 6px;
  		background : #555;
	}
	.hamburger span:nth-child(1) {
  		top: 10px;
	}
	.hamburger span:nth-child(2) {
  		top: 20px;
	}
	.hamburger span:nth-child(3) {
  		top: 30px;
	}
/* ナビ開いてる時のボタン */
	.hamburger.active{
  		-webkit-transform: rotate(360deg);
  		transform: rotate(360deg);
   		background-color:rgba(255,255,255,0);
	}
	.hamburger.active span:nth-child(1){
  		top : 20px;
  		left: 6px;
  		background : #fff;
  		-webkit-transform: rotate(-45deg);
  		-moz-transform   : rotate(-45deg);
  		transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2){
  		top: 20px;
  		background : #fff;
  		-webkit-transform: rotate(45deg);
  		-moz-transform   : rotate(45deg);
  		transform        : rotate(45deg);
	}
	.hamburger.active span:nth-child(3) {
  		opacity: 0;
	}
	#navi{
  		position: fixed;
  		z-index : 2;
  		top  : 0;
  		left : 0;
  		color: #fff;
  		background: rgba(0,0,0,1);
  		text-align: center;
  		transform: translateY(-100%);
  		transition: all 0.6s;
  		width: 100%;
  	}	
	.wrapper{
  		margin: 0 auto;
  		padding: 0;
  		width: 100%;
	}
	.wrapper li{
  		list-style-type: none;
  		padding: 0;
  		width: 100%;
  		transition: .4s all;
	}
	.wrapper li:last-child{
  		padding-bottom: 0;
	}
	.wrapper li:hover{
  		background :#ddd;
	}
	.wrapper li a{
  		display: block;
  		color: #fff;
  		padding: 1em 0;
  		text-decoration :none;
	}
	.menu-list{
		text-align: center;
	}
	.form_wak{
		margin:0 auto;
	}
	.back_link{
		width:100%;
		text-align:center;
	}
	.mail_waku{
		margin:10px 10px 10px 10px;
		border:solid 1px;
		border-radius: 10px;
		max-width:300px;
		padding:0 auto;
		text-align:center;
	    	background-color: rgba(255,255,255,0.8);
		max-width:500px;
	}
	.menu-list{
		width:100%;
		padding:0 auto !important;
	}

	.nenrei_list li{
  	list-style: "・";
	}
/* このクラスを、jQueryで付与・削除する */
	nav#navi.active {
  	transform: translateY(0%);
	}
}