@charset "UTF-8";
body{
	width: 1000px;
	padding: 0px;
	margin: 0px auto;
	font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* header */
.header{
	width: 100%;
	height: 130px;
}
.header-logo{
	width: 400px;
	float: left;
}
.header-logo img{
	width: 400px;
	height: auto;
}
.navi{
	float: right;
}
.navi a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 122px;
	float: left;
	 color: #333;
	text-decoration: none;
	padding: 5px;
	margin: 5px;
	box-sizing: border-box;
	border-bottom:solid #333 1px;
	font-size: 0.8em;
}
.navi a:nth-last-child(-n+2){
	background: #06c755;
	color: #FFF;
	border: #06c755 1px solid;
}
.navi a:hover{
	color: #888;
	border-bottom:solid #888 1px;
	background: #eee;
}
.navi a:nth-last-child(-n+2):hover{
	color: #06c755;
	background: #FFF;
}
a[href^="http"]:after,
a[href^="//"]:after {
  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
}
a[href^="https://arasaki.org"]:after {
  margin: inherit;
  font-family: inherit;
  content: '';
  font-weight: inherit;
}
.nomark a[href^="http"]:after,
a.nomark[href^="//"]:after {
  margin: 0 0 0 3px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  content:'';
  font-weight: 900;
}
a.nomark[href^="https://arasaki.org"]:after {
  margin: inherit;
  font-family: inherit;
  content: '';
  font-weight: inherit;
}
/* CSS Document */
.grade_beginner ,.grade_standard, .grade_advanced{
    color: #FFF;
    padding: 1px;
    display: flex;
	align-items: center;
	justify-content: center;
	float: left;
    width: 300px;
	height: 70px;
    text-align: center;
    font-size: 1em;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.grade_beginner{
	background: #00AFCC;
}
.grade_standard{
	background: #00A17F;
}
.grade_advanced{
	background: #F6AB00;
}

.hide_button {
  display: block;
  margin-bottom: 10px;
	margin-top: 20px;
	border: 1px solid #ddd;
	padding: 5px;
	background: #e1e1e1;
	cursor: pointer;
	text-align: center;
	border-radius: 5px;
}
.hide_button:hover{
	background: #eee;
}
.hidden_block {
  display: none;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;
}



.hide {
  display: inline-block;  /*要素の表示*/
}

.content{
	border-bottom: 1px solid #ddd;
	min-height: 266px;
	box-sizing: border-box;
	padding: 20px 0 20px 0;
}
.ct-screen-shot{
	display: block;
	width: 300px;
	height: 226px;
	float: left;
	border: solid #ccc 1px;
	box-sizing: border-box;
	position: relative;
}
.ct-screen-shot img{
	width: 298px;
	height: auto;
	cursor: pointer;
}
.ct-info{
	width: 700px;
	float: left;
	box-sizing: border-box;
	padding-left: 20px;
}
.ct-name{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}
.ct-grade{
	float: left;
	width: 400px;
}
.ct-pages{
	float:left;
}
.ct-icon,.ct-icon2,.ct-icon3, .ct-pages{
	float: left;
	width: 70px;
	height: 70px;
}
.ct-icon img,.ct-icon2 img,.ct-icon3 img{
	width: 70px;
	height: 70px;
}
.ct-pages{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	background: #555;
	color: #FFF;
}
.ct-class{
	font-size: 0.9em;
	margin-bottom: 5px;
	padding-left: 130px;
    text-indent: -130px;
}
.ct-class-t{
	display: inline-block;
    width: 120px;
    font-size: 0.9em;
    text-align: center;
    margin: 0 10px 0 0;
    background: #eee;
	text-indent: 0px;
}
.threeclomn{
	float: left;
	display: block;
	width: 33%;
	box-sizing: border-box;
	text-align: center;
    padding: 10px;
    min-height: 330px;
}
/*モーダル*/

.modal {
  display: none;
  position: fixed;
  z-index: 2;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
text-align: center;
	box-sizing: border-box;
}

.modal-content {
  margin: 10px;
  width: 80%;
  max-width: 700px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
img .popup-image{
	cursor: pointer;
	
}
.rp_plus48 {
  position:absolute;
  left: 120px;
  top: 85px;
	pointer-events: none;
}


.c-both{
	clear: both;
}
footer{
	border-top: 1px solid #555;
	text-align: center;
	font-size: 0.8em;
	color: #555;
	padding: 50px;
	margin-top: 50px;
}
footer a{
	color: #555;
}
footer a:hover{
	background: #555;
	color: #fff;
}

form,.form{
	background: #f1f1f1;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 40px;
}
form h3{
	margin-top: 10px;
	margin-bottom: 5px;
}
label {
    margin-right: 5px; /* ボタン同士の間隔 */
}
label input {
    display: none; /* デフォルトのinputは非表示にする */
}
label span {
	background: #fafafa;
    color: #555; /* 文字色を黒に */
    font-size: 1em; /* 文字サイズを14pxに */
    border: 1px solid #555; /* 淵の線を指定 */
    border-radius: 20px; /* 角丸を入れて、左右が丸いボタンにする */
    padding: 2px 20px; /* 上下左右に余白をトル */
	white-space: nowrap;
	line-height: 2.3em;
}
label span:hover{
	cursor: pointer;
	background: #ddd;
}
label input:checked + span {
    color: #FFF; /* 文字色を白に */
    background: #555; 
    border: 1px solid #555; 
}
input[type=text],input[type=email],textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
color:#555;
	font-family: "M PLUS 1p", sans-serif;
}

.mb-10{
	margin-top: 30px;
    margin-bottom:30px;
     
}
 
.btn-mod,
a.btn-mod{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #fff;
    background: #D86A5D;
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
     
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
     
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod:hover,
.btn-mod:focus,
a.btn-mod:hover,
a.btn-mod:focus{
    font-weight: 400;
    color: #D86A5D;
    background: #F5BDB6;
    text-decoration: none;
    outline: none;
	border: #D86A5D;
}
.btn-mod:active{
    cursor: pointer !important;
}
/* ==============================
   ボタンサイズ
   ============================== */
.btn-mod.btn-small{
    padding: 6px 17px;
    font-size: 11px;
    letter-spacing: 1px;
} 
.btn-mod.btn-medium{
    padding: 8px 37px;
    font-size: 12px;
} 
.btn-mod.btn-large{
    padding: 12px 45px;
    font-size: 13px;
	width: 100%;
} 
/* ==============================
   border黒枠ボタン
   ============================== */
.btn-mod.btn-border{
    color: #151515;
    border: #D86A5D;
    background: transparent;
}
.btn-mod.btn-border:hover,
.btn-mod.btn-border:focus{
    color: #D86A5D;
    border-color: transparent;
    background: #F5BDB6;
	border: #D86A5D;
	cursor: pointer;
}
/* ==============================
   角丸ボタン
   ============================== */
.btn-mod.btn-circle{
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
	background: #D86A5D;
	color: #fff;
	font-size: 1.2em;
	border: #D86A5D;
}

/* ページジャンプ */
.space {
  height: 5000px;
}
.pagetop {
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .3s;
  color: #FFF;
  background: #00A17F;
  
/*   デフォルトは非表示 */
  opacity: 0;
}
.pagetop:hover {
    box-shadow: 0 0 10px #FFF;
}

.more_search {
  display: block;
  margin-bottom: 10px;
	margin-top: 20px;
	border: 1px solid #ddd;
	padding: 5px;
	background: #e1e1e1;
	cursor: pointer;
	text-align: center;
	border-radius: 5px;
}
.more_search:hover{
	background: #eee;
}

/* ここに横幅が767px以下の時に発動するスタイルを記述 */

@media screen and (max-width: 767px) {
	body{
	font-size: 1.2em;
	width: 100%;
	padding: 0px;
	margin: 0px auto;
	font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
	.header{
	width: 100%;
	height: 130px;
}
.header-logo{
	width: 100%;
	float: inherit;
	
}
.header-logo img{
	width: 90%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	display: block;
}
.navi{
	float: left;
	width: 100%;
}
.navi a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14.6%;
	height: auto;
	min-height: 80px;
	float: left;
	 color: #333;
	text-decoration: none;
	padding: 5px;
	margin: 5px 1% 15px 1%;
	box-sizing: border-box;
	border-bottom:solid #333 1px;
	font-size: 0.7em;
	line-height: 1em;
}
.navi a:hover{
	color: #888;
	border-bottom:solid #888 1px;
	background: #eee;
}
	.ct-screen-shot{
	display: block;
	width: 300px;
	height: 226px;
	float: inherit;
	border: solid #ccc 1px;
	box-sizing: border-box;
	margin: 10px auto 4px auto;
}
.ct-screen-shot img{
	width: 298px;
	height: auto;
	cursor: pointer;
}
.ct-info{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
}
.ct-name{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}
.ct-grade{
	float: left;
	width: 400px;
}
.ct-pages{
	float:left;
}
.ct-icon,.ct-icon2,.ct-icon3, .ct-pages{
	float: inherit;
	display: block;
	margin: 0px auto 10px auto;
	width: 70px;
	height: 70px;
}
.ct-icon img,.ct-icon2 img,.ct-icon3 img{
	width: 70px;
	height: 70px;
}
.ct-pages{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	background: #555;
	color: #FFF;
}
.ct-class{
	font-size: 0.9em;
	margin-bottom: 5px;
	padding-left:0px;
    text-indent: 0px;
}
.ct-class-t{
	display: inline-block;
    width: 100%;
    font-size: 0.9em;
    text-align: center;
    margin: 20px 0px 10px 0;
    background: #eee;
	text-indent: 0px;
}
.grade_beginner ,.grade_standard, .grade_advanced{
    color: #FFF;
    padding: 1px;
    display: flex;
	align-items: center;
	justify-content: center;
	float: left;
    width: 100%;
	height: 70px;
    text-align: center;
    font-size: 1em;
	box-sizing: border-box;
	margin-bottom: 0px;
}
	.threeclomn{
		width: 100%;
		float: inherit;
	}
}