@charset "utf-8";
body{
  background-color: #Eeddbb;
  font-family: 'Noto Sans Japanese',sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
  color: #222;
}

a {
	text-decoration: none;
	color: #0F52BC;
	outline: none;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

a:hover{
	color: tomato;
}

button,input[type="button"],input[type="submit"]{
  cursor: pointer;
  font-family: 'Noto Sans Japanese',sans-serif;
  -webkit-appearance: none;
}

/* buttonクリック時に点線が出ないようにする処理 */
button::-moz-focus-inner,input[type="submit"]::-moz-focus-inner{
 	border :0px;
}

.float-clear{
	clear: both;
}
img {
	border:none;
}
/* 画像の透過アニメーション */
.img_alpha{
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.img_alpha:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
}

/* 画像のトリミング用(IE.egg対策) */
.object-fit-img {
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

/* ラベル */
.radio_area input,.check_area input{
	display: none;
}

.radio_area label,.check_area label{
  	display: inline-block;
    font-size: 90%;
  	cursor: pointer;
    	min-width: 40px;
    	margin: 0 5px 5px 0;
    	padding: 8px 5px;
    	background: #aaa;
    	color: #fff;
    	text-align: center;
    	line-height: 1;
    	transition: .2s;
    	border-radius: 3px;
}


.radio_area label:hover,.check_area label:hover{
	opacity: 0.8;
}
.radio_area input[type="radio"]:checked + label {
	background-color: #22C350;
	color: #fff;
}

.check_area input[type="checkbox"]:checked + label{
	background-color: #0F52BC;
	color: #fff;
}


/* 選択エリア */
select{
    padding: 4px 6px;
    border:1px solid #ddd;
    color:#333;
    background: #fff;
    width:100%;
    border-radius:3px;
}
/* アンダーバーのアニメーション */
.underbar_anim{
  position: relative;
  display: inline-block;
}
.underbar_anim:before,.underbar_anim:after{
  position: absolute;
  top: 1.5em;
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: #E54500;
  transition: 0.5s;
}
.underbar_anim:before{
  left: 50%;
}.underbar_anim:after{
  right: 50%;
}
.underbar_anim:hover:before,.underbar_anim:hover:after{
  width: 50%;
}

/* メニュー */
#side_menu,#top_menu{
    position:fixed;
    top:0;
    left:0;
}
#side_menu{
  width: 220px;
  height: 100%;
  background:#f0f0f0;
  z-index:100;
}
.side_box,#logo_box{
  margin: 0 auto;
}
.side_box{
  width: 220px;
  padding: 30px 0;
  background-image: url("../item/side_hr.png");
  background-repeat: no-repeat;
  background-position: top center;
}
.side_box li{
  padding: 10px 20px 10px 0;
  font-size: 95%;
  text-align: right;
  font-weight: bold;
}

.side_box li a{
  color: #555;
}
.side_box li a:hover{
	color: #E54500;
}
.side_box h2{
  font-size: 130%;
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 2px;
}
.side_h2{
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  padding: 5px 0;
}
.side_box li span{
  margin-left: 5px;
  color: #E54500;
}
/* サイドメニュー下層 */
.side_box li ul{
  display: none;
  position:fixed;
  left: 220px;
  top: 0;
  background: rgba(0,0,0,0.8);
  z-index: 10;
  height: 100%;
  width: 200px;
  padding: 100px 10px 10px 20px;
  font-weight: normal;
}
.side_box li ul div{
  width: 100%;
  text-align: left;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  background-color: :#fff;
}
.side_box li ul p{
  margin: 8px 0;
  font-weight: normal;
}

.side_box input[type="text"]{
    padding: 4px 6px;
    border:1px solid #ddd;
    color:#333;
    background: #fff;
    width:100%;
    border-radius:3px;
    margin-bottom:15px;
}
.side_box li ul li a{
  color: #fff;
}

.side_box li ul select{
  margin-bottom: 15px;
}

.side_textarea{
   width: 100%;
   margin-bottom: 15px;
   text-align: center;
}
/* ロゴエリア */
#logo_box{
  width: 180px;
  padding: 30px 0 20px 0;
  text-align: center;
}
#logo_box img{
  width: 140px;
}
#logo_box h1{
  font-size: 80%;
	letter-spacing: 0px;
  margin-top: 5px;
  color: #6E362A;
}
#logo_box p{
  margin-top: 15px;
  font-weight: bold;
  font-size: 90%;
}

#top_menu{
  width: 100%;
  background-color: #f0f0f0;
  z-index: 50;
  height: 38px;
  box-shadow: 0px 0px 5px #aaa;
}
#head_text{
  display: inline-block;
  float: left;
  margin-left: 230px;
}
#head_text h2{
  font-size: 80%;
  color: #6E362A;
  margin-top: 10px;
}

#head_menu_area{
  display: inline-block;
  float:right;
}
#head_menu,.head_icon_menu{
  float: left;
  margin-right: 10px;
}
#head_menu{
  margin: 5px 10px 5px 0;
}
#head_menu span{
  margin-left:5px;
  padding: 5px 10px;
  background: #7C5335;
  font-size: 70%;
}
#head_menu a{
  color: #fff;
}
#head_menu a:hover{
  opacity: 0.5;
}
.head_icon_menu{
  position:static;
}
.head_icon_menu button{
  position: relative;
  width: 80px;
  top:-2px;
  padding: 5px;
  text-align: center;
  background-color:#3F262D;
  border:2px solid #3F262D;
  color: #fff;
  outline:none;
  font-size: 60%;
  border-radius: 0 0 16px 16px;
  cursor: pointer;
  	-webkit-transition: 0.3s ease-in-out;
  	-moz-transition: 0.3s ease-in-out;
  	-o-transition: 0.3s ease-in-out;
  	transition: 0.3s ease-in-out;
}
.head_icon_menu button:hover{
  background:#ffffff;
  border-color: #E54500;
  color:#E54500;
}

.head_icon_menu i{
  margin-bottom: 5px;
}
.head_icon_menu span{
  display: block;
}
.bt_red,.bt_blue,.bt_green,.bt_orange,.bt_gray{
  box-shadow: 0px 0px 3px #888;
  text-shadow: 1px 1px 3px #333;
}
.bt_red {
  background: #c00;
}
.bt_blue{
  background: #0F52BC;
}
.bt_green{
  background: #22C350;
}
.bt_orange{
  background: #E54500;
}
.bt_gray{
  background: #888;
}

/* フッター */
#footer{
  margin-top: 40px;
  background: #3F262D;
  color: #aaa;
  text-align: center;
  width: 100%;
  font-size: 80%;
  padding: 10px 0;
}

/* メインコンテンツ */
#main{
  width: width: calc(100% - 230px);
  min-width: 880px;
  margin: 5px 0 0 225px;
}
#main_left{
width: calc(100% - 330px);
min-width: 600px;
display: inline-block;
}
#main_right{
  display: inline-block;
  vertical-align: top;
}

/* ページのトップタイトル部分 */
#page_head{
  margin: 38px 0 0 220px;
  width: calc(100% - 220px);
  padding: 10px 20px 10px 20px;
  background: #F0aa55;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
}
#page_head h2{
  font-size: 130%;
  margin-bottom: 5px;
  letter-spacing: 2px;
  display: inline-block;
}
/* パンくずリスト */
#head_root{
  font-size: 80%;
}
#head_root li{
  display: inline;
}
#head_root li::before{
  content: " \003e  ";
}
#head_root li:first-child::before{
  content: "";
}
#head_root li a{
  color: #fff;
  text-decoration: underline;
}
#head_root li a:hover{
  color: #aef;
}
/* 検索条件表示部分 */
#head_search{
  display: inline-block;
  margin-left: 20px;
}
#head_search h3{
  font-size: 80%;
  display: inline-block;
}
#head_search ul{
  display: inline-block;
}
#head_search li{
  font-size: 70%;
  font-weight: bold;
  padding: 2px 8px;
  background: #aaa;
  display: inline-block;
}


/* トップページ用 */
.top_title{
  font-size: 80%;
  margin-left: 10px;
}
.top_title h2{
  color: ##3F262D;
  font-size: 120%;
  font-family: 'Satisfy', cursive;
  margin: 50px 0 5px 0;
}
/* スライダー */
#top_slider{
  margin: 38px 0 0 220px;
  width: calc(100% - 220px);
  height: 450px;
}
#top_slider_logo{
  position:absolute;
  z-index: 5;
  height: 450px;
  width: calc(100% - 220px);
  text-align: center;
  display: table;
}
#top_slider_logo ul{
  vertical-align: middle;
  width: auto;
  z-index: 20;
  display: table-cell;
}
#top_slider_logo li{
  display: inline-block;
  background: rgba(255,255,255,0.5);
  padding: 40px 60px;
  text-align: center;
}
#top_slider_logo img{
  width: 250px;
}
#top_slider_logo h2{
  font-size: 110%;
  margin-top: 10px;
  color: #000;
  text-shadow: 1px 1px 3px #fff;
}
/* HOMEスライダーの画像設定 */
.bxslider img{
  width: 100%;
  height: 450px;
    z-index: 10;
  object-fit: cover;
  background: #fff;
  margin: 0;
}

/* ホーム関連 */
.home_area,.home_area2{
  padding: 30px 0;
  margin: 5px 0 0 220px;
}

.home_area2{
  background: #fbf4e1;
}

.home_area .select_area,.home_area2 .select_area{
  margin-left: 5px;
}

.home_bt_area{
  text-align: center;
  margin-bottom:40px;
  font-size: 140%;
}
.home_bt_area a{
  color: #4F392F;
  padding: 10px 20px;
  border: 2px solid #4F392F;
  font-weight: bold;
  border-radius: 4px;
}
.home_bt_area a:hover{
  background: #fff;
  color: #0F52BC;
}
.home_bt_area i{
  margin-left: 10px;
}


/* 選択エリア */
.select_area{
  box-sizing:inherit;
  font-size: 90%;
  margin-bottom: 30px;
}
.select_area ul{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
}
.select_area li{
  background: #fff;
  display: block;
  width: calc(20% - 5px);
  padding: 5px;
  padding-bottom: 40px;
  margin-right:5px;
  margin-bottom: 5px;
  box-sizing: border-box;
  position: relative;
}
.select_area img,.right_select_box img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #fff;
  margin: 0;
}
.select_box h3{
  font-size: 100%;
}
.select_area ul li ul{
  display : block;
  padding: 5px;
}
.select_area ul li ul li{
  width: 100%;
  display: block;
  padding: 0;
  padding: 2px 0;
}

/* レスポンシブ定義 */
@media screen and ( max-width:1400px ) {
  .select_area li{
    width: calc(25% - 5px);
  }
  .select_bt input[type="submit"]{
    width: calc(50% - 5px);
  }
  .resp_1400_hiden{
    display: none!important;
  }
}
.select_bt{
  width: 100%;
  position: absolute;
  bottom: 5px;
}

.select_bt .bt_anim{
  padding: 7px 0;
  width: calc(100% - 10px);
  background-color: #7C5335;
  color: #fff;
}
.select_bt .bt_anim:hover {
  background-color: #FF4F19;
  color: #fff;
}
#search_none_area{
  width: calc(100% - 100px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  font-size: 120%;
  background: #eee;
}

/* ボタンのエリア */
.bt_area{
  width: 100%;
  text-align: center;
}
.bt_area a{
  padding: 5px 10px;
  margin: 0 10px;
  text-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #888;
  border-radius: 3px;
  color: #fff;
}
.bt_area a:hover{
  opacity: 0.8;
}

/* タイトル部分 */
.title_area{
  padding: 20px 0;
  text-align: center;
}
.title_area h2{
  color: #4F392F;
  font-size: 160%;
}
.title_area span{
  background: linear-gradient(transparent 50%, #FFB74C 50%);
  padding: 0 10px;
}
.title_area h3{
  font-size: 90%;
  font-weight: normal;
  display: inline-block;
}


/* ページ上部で検索する部分 */
#head_form{
  margin-left: 220px;
  width: calc(100% - 220px);
  padding: 20px 20px 10px 20px;
  background: #ccc;
  box-sizing: border-box;
}
#head_form li{
  display: inline-block;
  margin-right: 10px;
}
#head_form select{
  padding: 3px 4px 5px 4px;
  border: 1px #aaa solid;
}
#head_form input[type="text"]{
  padding: 4px;
  margin: 0;
  border: 1px #aaa solid;
}
#head_form .radio_area label,#head_form .check_area label{
  min-width: 30px;
  margin: 0;
  padding: 6px 5px;
  line-height: 1;
}
#head_form input[type="submit"],#sp_head_form input[type="submit"]{
  border: none;
  background: orange;
  color: #fff;
  cursor: pointer;
  text-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #777;
  padding: 3px 10px;
}
/* 一般文章 */
.text_area,.countion_area{
  width: calc(100% - 200px);
  max-width: 800px;
  margin: 0 auto;
}
.text_area p{
  margin: 15px 0;
}
.text_area h3{
  text-align: center;
}
#concept_writer{
  text-align: right;
  margin-bottom: 20px;
}
.concept_table p{
  font-size: 90%;
}
.list_box li{
  list-style: disc;
  margin: 0px 0px 10px 20px;
}

/* 注意事項 */
.countion_area h3{
  text-align: center;
}
.countion_area h3 span{
  background: linear-gradient(transparent 60%, #faa 60%);
}
/* ページトップへのボタン */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 30px;
	padding: 0px 10px 5px 10px;
	text-align: center;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: #777;
	cursor: pointer;
}
#page-top a {
	text-decoration: none;
	text-shadow: 0px 0px 2px #000;
	color: #fff;
	display: block;
}
#page-top:hover {
	background: #aaa;
}

#page_title{
  text-align: center;
  padding: 10px 0;
  background: #FFB74C;
  text-shadow: 1px 1px 3px #fff;
}
#page_title_box{
  width: calc(100% - 600px);
  margin-left: 225px;
}
#page_title h2{
  font-size: 120%;
}

/* ページャー */
.page_link_area{
	width: 100%;
	text-align: center;
}

.page_link_area button{
	font-size: 16px;
	padding: 5px 0;
	border: 1px solid #ccc;
	margin-right: 5px;
	width: 40px;
	color: #444;
	text-align: center;
	background: #fff;
	border-radius: 3px;/* CSS3草案 */
	-webkit-border-radius: 3px;/* Safari,Google Chrome用 */
	-moz-border-radius: 3px; /* Firefox用 */
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.page_link_area button.now{
	background: #4387E9;
	color:#fff;
	text-shadow: 1px 1px 3px #000;
}
.page_link_area button.on:hover{
	cursor: pointer;
	background: #4387E9;
	color:#fff;
	text-shadow: 1px 1px 3px #000;
}
.page_link_area form{
  display: inline;
}

/* 里親募集ページなどの詳細ページ定型 */

/* 基礎 */
.left_box {
  box-sizing: border-box;
  padding: 10px;
  background: #eee;
  margin-bottom: 5px;
}
/* 画像表示部分 */
#img_area{
  width: 100%;
  text-align:center;
}
#img_area img{
}

#img_sub_area{
  width: 100%;
  text-align: center;
}
#img_sub_area img{
  margin: 10px 5px;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
/* ページコンテンツ */
.page_content_area,.q_a_area,.kiyaku_area{
  width: 100%;
  max-width: 800px;
  margin: 20px auto 40px auto;
  font-size: 110%;
}
.page_content_area h3,.q_a_area h3,.kiyaku_area h3{
  position: relative;
  padding-bottom: .1em;
  border-bottom: 4px solid #ccc;
  margin-bottom: 10px;
}
.page_content_area h3::after,.q_a_area h3::after,.kiyaku_area h3::after{
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #E54500;
}
.page_content_text p{
  margin-bottom: 1em;
  line-height: 1.7em;
}
.page_content_area table{
  width: 100%;
}
.page_content_area tr{
  border-bottom: 1px solid #ccc;
}
.page_content_area th,.page_content_area td{
  padding: 10px 0;
  vertical-align: top;
  word-break: break-all;
}
.page_content_area th{
  width: 130px;
  font-weight: bold;
}

/* よくある質問関連 */
.q_a_area{
  margin-bottom: 10px;
}
.q_a_box{
  margin: 10px 0;
}
.q_a_box dt,.q_a_box dd{
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #aaa;
}
.q_a_box dt{
  background: #ddd;
  border-bottom: none;
}
.q_a_box dt::before,.q_a_box dd::before{
  font-family: 'Prosto One', cursive;
}
.q_a_box dt::before{
  content: "Q.";
  margin-right: 8px;
  color: #F92500;
  font-weight: bold;
}
.q_a_box dd a{
  display:inline-block;
  width: auto;
  padding: 5px 10px;
  background: #FF5E19;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #555;
  border-radius: 3px;
}
.q_a_box dd a:hover{
  opacity: 0.8;
}

.q_a_box p{
  text-align: center;
}
.q_a_box dd::before{
  content: "A.";
  margin-right: 8px;
  color: #0F52BC;
  font-weight: bold;
}
/* 利用規約・プライバシーポリシー関連 */
.kiyaku_area{
  width: calc(100% - 100px);
  margin: 20px auto;
}


/* 右側の追従メニュー */
#scroll_menu{
  width: 320px;
  background:#eee;
  margin-right: 4px;
}
#scroll_menu a{
  display: block;
  color: #2860A3;
  padding: 10px 10px;
  box-sizing: border-box;
}
#scroll_menu a:hover{
  color: #FF2819;
  background: #cde;
}
#scroll_menu ul{
  border: 1px solid #ccc;
}
#scroll_menu li{
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
#scroll_menu li:last-child{
  border-bottom:none;
}
/* 詳細ページ内メールフォーム */
.form_area{
}
.form_area li{
  padding: 30px 0;
  border-bottom: 1px solid #aaa;
}
.form_area input[type="text"],.form_area input[type="number"],.form_area textarea,.form_area select{
  display: block;
  font-size: 90%;
  box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.1);
  background: rgba(255,255,100,0.3);
  border: 1px solid #888;
  letter-spacing: 1px;
  padding: 10px 10px;
  box-sizing: border-box;
  width: 100%;
}
.form_area input[type="text"]:focus,.form_area input[type="number"]:focus,.form_area textarea:focus,.form_area select:focus{
  background:  rgba(0,0,0,0);
  border: 1px solid #5ad;
}
.form_area textarea{
  height: 100px;
}
.form_area select{
  width: auto;
  padding: 10px;
  border: 1px solid #888;
  margin-bottom: 10px;
  display: block;
}
.form_area p{
  margin: 10px 0 0 10px;
  font-size: 90%;
}
.form_area .radio_area label,.form_area .check_area label{
  margin-top: 10px;
  font-size: 110%;
  background: #777;
  padding: 10px 20px;
  text-shadow: 1px 1px 3px #000;
}
.form_bt{
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
.form_bt input[type="submit"]{
  padding: 8px 20px;
  cursor: pointer;
  font-size: 100%;
  border: none;
  box-shadow: 1px 1px 4px #aaa;
  color: #fff;
  background: #d00;
  text-shadow: 0px 0px 2px #000;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.form_bt input[type="submit"]:hover{
  opacity: 0.7;
}

/* モーダルウインドウ設定 */
.modal_area{
  width: calc(100% - 100px);
  margin: 0 auto;
}
.modal_title{
  margin-bottom: 20px;
}
.modal_title h2{
  background: linear-gradient(transparent 50%, #FFB74C 50%);
  display: inline;
}
.modal_text_box{
  padding: 20px 0;
  border-top: 1px dashed #aaa;
}
.modal_text_box h3{
  margin-bottom: 5px;
}
.modal_text_box p{
  margin-bottom: 5px;
}
/* メール送信の通知モーダル */
.form_modal{
  background:#fff;
  padding: 20px 30px;
  box-sizing: border-box;
  width: 900px;
  margin: 0 auto;
  text-align: left;
  font-size: 110%;
}
.form_modal h2{
  text-align: center;
}
.form_modal h2 span{
    background: linear-gradient(transparent 50%, #FFB74C 50%);
    display: inlin;
}
.form_modal p{
  margin: 20px 0;
}
.btn_close{
  width: 100%;
  text-align: center;
}
.btn_close a{
  display: inline-block;
  padding: 6px 20px;
  background: #666;
  color: #fff;
  text-shadow: 0px 0px 3px #000;
}
.btn_close a:hover{
  opacity: 0.8;
}

/* ログイン・ユーザー登録紹介ページ関連 */
.login_area,.login_error{
  text-align: center;
}
.login_area h3{
  margin-bottom: 10px;
}
.login_area h3 span{
  background: linear-gradient(transparent 60%, #acf 60%);
  padding: 0 10px;
}
.login_box{
  margin: 20px auto;
  width: 600px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #aaa;
}
.login_area li{
  margin: 20px 0;
}
.login_area input[type="text"],.login_area input[type="password"]{
  border: 1px solid #aaa;
  padding: 5px 10px;
  margin: 0 auto;
}
.login_area input[type="submit"],.login_area button{
  padding: 5px 10px;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  border: none;
  border-radius: 3px;
  box-shadow: 1px 1px 3px #000;
  cursor: pointer;
}
.login_area input[type="submit"]:hover,.login_area button:hover{
  opacity: 0.8;
}
.login_error h3{
  text-align: center;
  padding: 0 10px;
  color: #a00;
}
.login_error ion-icon{
  margin-right: 5px;
}

/* ユーザー登録関連*/
.pictext_area{
  width: calc(100% - 200px);
  max-width: 800px;
  margin: 0 auto;
}
.pictext_area h3{
  text-align: center;
  font-size: 140%;
  margin-bottom: 10px;
}
.pictext_area h3 span{
  padding: 0 10px;
  background: linear-gradient(transparent 50%, #FFB74C 50%);
}
.pictext_area p{
  margin-bottom: 7px;
}
.pictext_area img{
  float:left;
  width: 30%;
  border-radius: 3px;
}
.pictext_area div{
  float:right;
  width: calc(70% - 20px);
}
#rule_box {
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding: 20px;
    margin: 0 auto;
    border: 1px solid #aaa;
    box-shadow: -1px 1px 3px #ddd inset;
    overflow: scroll;
    height: 300px;
    margin-bottom: 40px;
}
#rule_box h3{
  text-align: center;
  font-size: 140%;
  margin-bottom: 10px;
}
#rule_box h3 span{
  padding: 0 10px;
  background: linear-gradient(transparent 50%, #99ccff 50%);
}
.rule_text{
  margin: 15px 0;
  padding: 15px;
  border-top: 1px dashed #aaa;
}
.rule_text h4{
  font-size: 100%;
  margin-bottom: 10px;
}
.rule_text h4 span{
  padding: 0 10px;
  background: linear-gradient(transparent 50%, #FFEF85 50%);
}
/* コンテンツ右側のボックス */
.right_box{
  background: #eee;
  padding: 10px;
  width: 320px;
  box-sizing: border-box;
  margin: 0 5px 5px 0;
}
.right_box h2{
  position: relative;
  padding-bottom: .1em;
  border-bottom: 4px solid #ccc;
  margin-bottom: 10px;
  font-size: 120%;
}
.right_box h2::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 40%;
  height: 4px;
  background-color: #22C350;
}
.right_box h3{
  display: inline;
  font-size: 120%;
}
.right_box form{
  width: 100%;
  text-align: center;
}
.right_box input[type="text"],.right_box input[type="password"]{
  border: 1px solid #aaa;
  padding: 5px 10px;
}
.right_box input[type="submit"]{
  cursor: pointer;
  border: 0;
  padding: 5px 20px;
  margin-top: 10px;
  color: #fff;
  border-radius: 3px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.right_box input[type="submit"]:hover{
  opacity: 0.8;
}
.right_box ul{
}
.right_box li{
  margin-bottom: 10px;
}
.right_box li:last-child{
  margin-bottom: 0;
}

#right_satooya{
  text-align: center;
}
#right_satooya span{
  margin: 0 10px;
  border-bottom: 1px solid #aaa;
}
#right_event_img{
  box-sizing: border-box;
  float: left;
  width: 90px;
}
#right_event_img img{
  width: 100%;
}
#right_event_info{
  width: 200px;
  float: right;
  font-size:80%;
}
#right_event_info h3{
  font-size: 110%;
}
#right_event_info ul{
  display: block;
  margin-top: 5px;
}
#right_event_info li{
  margin: 2px 0;
}
/* 里親詳細ページ 右エリアの保護者紹介欄 */
.right_owner_pic{
  float: left;
  width: 100px;
}
.right_owner_pic img{
  width: 100px;
}
.right_owner_info {
  width: 190px;
  float: right;
  font-size: 90%;
}
.right_owner_info h3{
  font-size: 110%;
}
.right_owner_info p{
  margin: 5px 0;
}
/* 右エリアのシェアサポート */
.right_tab_bt_area button{
  border: none;
  margin: 0;
  width: 100px;
  vertical-align: bottom;
  background: #bbb;
  margin-right: 2px;
  cursor: pointer;
  padding: 5px;
  outline: none;
  border-top: 2px #555 solid;
}
.right_tab_bt_area .is-active{
  background: #bde !important;
  cursor: auto;
  border-top: 2px #4387E9 solid;
  position: relative;
  display: inline-block;
}
.is-active:before{
  content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 10px solid #bde;
}

.right_tab_panel_area{
  margin-top: 10px;
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
.right_tab_area h3{
  font-size: 90%;
  margin-top: 20px;
}
.right_tab_area textarea{
  width: 100%;
  height: 40px;
  border: 1px #bbb solid;
  padding: 4px;
  box-sizing: border-box;
  word-break: break-all;
}
.right_tab_area p{
  text-align: left;
}
.copy_bt{
  border: none;
  padding: 4px;
  color: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}
/* 右側BOXのSNSボタンのエリア */
#right_sns{
  text-align: center;
  font-size: 90%;
  margin-top: 5px;
}
#right_sns a{
  display: inline-block;
  padding: 2px;
  margin-top: 5px;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
	border-radius: 3px;/* CSS3草案 */
	-webkit-border-radius: 3px;/* Safari,Google Chrome用 */
	-moz-border-radius: 3px; /* Firefox用 */
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#right_sns a:hover{
  opacity: 0.8;
}

#loader {
    width: 290px;
    height: 80px;
    display: none;
    position: fixed;
    text-align:center;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    font-family: sans-serif;
    margin-top: -10px; /* heightの半分のマイナス値 */
    margin-left: -145px; /* widthの半分のマイナス値 */
    z-index: 9999;
}
#loader img{
  margin-bottom: 20px;
}

#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FFFFFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9998;
}

/* ユーザー募集ページ */
#lp_main{
  width: calc(100% - 220px);
  min-width: 800px;
  margin-left: 220px;
  margin-top: 38px;
}

#user_head,#concept_head{
  width: 100%;
  background-color: #f4f4f4;
  background-position: right bottom;
  background-size: contain;
  min-height:550px;
  background-repeat: no-repeat;
}

#user_head{
  background-image: url(../item/user_top.jpg);
}
#concept_head{
  background-image: url(../item/concept_top.jpg);
}
#user_head_text,#concept_head_text{
  width: 1000px;
  margin: 0 auto;
  font-size: 16px;
}
#user_head_text div,#user_concept_text div,#concept_head_text div{
  width: 420px;
  margin-left:10px;
}
#user_head_text h2,#user_concept_text h2,#concept_head_text h2,#user_tuto_text h2{
  font-weight: normal;
  padding-top: 50px;
  font-size: 190%;
}
#user_head_text h2{
  color: #22C350;
}
#concept_head_text h2{
  color: #EB7988;
}
#user_head_text p,#user_concept_text p,#concept_head_text p,#main_concept p,#user_tuto_text p{
  margin: 15px 0;
}
#user_head_text button,#user_concept_text button,#user_tuto_text button,#concept_head_text button{
  width: 400px;
  border-radius: 5px;
  color: #fff;
  margin-top: 20px;
  padding: 10px 0;
  font-size: 110%;
  border: none;
}
#user_head_text button{
  background: #22C350;
}
#user_tutorial_area{
  width: 100%;
  padding: 50px 0;
  background: #ddd;
}
#user_tutorial{
  width: 1000px;
  margin: 0 auto;
}
#user_tuto_text,#user_tuto_video{
  display: inline-block;
  vertical-align: middle;
}
#user_tuto_text h2{
  padding-top: 0;
  color: #FF0037;
}
#user_tuto_text{
  width: 400px;
}
#user_tuto_text p{
  font-size: 16px;
}

#user_tuto_video{
  width: 500px;
  margin-left: 95px;
}
#user_tuto_text button{
  background: #FF0037;
}

#concept_head_text button{
  background: #EB7988;
}
#user_head_text button:hover,#user_concept button:hover,#user_footer_bt button:hover,#concept_head_text button:hover,#user_tuto_text button:hover{
  opacity: 0.8;
}
#user_head_text button i{
  margin-left: 10px;
}
#user_list{
  width: 100%;
  padding: 60px 0;
  background: #e5e5e5;
}
#user_list h2{
  font-weight: normal;
  font-size: 210%;
  text-align: center;
  color: #E54500;
}
#user_list ul{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  width: calc(100% - 100px);
  max-width: 1200px;
  min-width: 900px;
  margin: 30px auto;
}
#user_list li{
  background: #fff;
  display: block;
  width: calc(33% - 10px);
  padding: 20px;
  margin:0 5px;
  box-sizing: border-box;
}
#user_list li h3{
  font-size: 150%;
  text-align: center;
  font-weight: normal;
  color: #FF5E19;
}
#user_list li h3 span{
  padding-bottom: 3px;
  border-bottom: 2px dashed #FF5E19;
}
#user_list button{
  width: 400px;
  background: #E54500;
  border-radius: 5px;
  color: #fff;
  margin: 30px auto 0 auto;
  padding: 12px 0;
  font-size: 130%;
  border: 0;
  display: block;
}
#user_list li img{
  display: block;
  margin: 30px auto;
  width: calc(100% - 50px);
}
#user_list button:hover{
  opacity: 0.8;
}
#user_list button i{
  margin-left: 10px;
}
#user_concept,#main_concept{
  width: 100%;
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
#user_concept{
  min-height:550px;
  background-color: #f8f8f8;
  background-image: url(../item/user_concept.jpg);
}
#main_concept{
  height:auto;
  background-color: #fafafa;
  background-image: url(../item/concept_main.jpg);
}
#user_concept_text,#main_concept_text{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 16px;
}
#user_concept_text{
  position: relative;
}
#main_concept_text{
}
#user_concept_text div{
  width: 420px;
  position: absolute;
  right: 0px;
}
#main_concept_text div{
  width: 550px;
  float:right;
  margin: 50px 0;
}
#user_concept_text h2{
  color: #1987E5;
}
#main_concept_text h2{
  color: #1987E5;
}
#user_concept_text button{
  background: #1987E5;
}
#user_footer_bt{
  padding: 50px 0 20px 0;
  width: 100%;
  text-align: center;
}
#user_footer_bt p{
  margin-bottom: 20px;
}
#user_footer_bt button{
  background: #22C350;
  color: #fff;
  font-size: 200%;
  padding: 20px 30px;
  border-radius: 8px;
  border: none;
}
#user_footer_bt i{
  margin-left: 12px;
}

/* コンセプトページ スタッフ紹介 テーブル */
#staff_table{
  width: calc(100% - 100px);
  max-width: 800px;
  min-width: 600px;
  margin: 30px auto;
}
#staff_table h3{
  font-size: 160%;
  text-align: center;
  margin: 20px 0;
  color: #AD491E;
}
#staff_table table{
  width: 100%;
  border:1px solid #aaa;
  border-bottom: none;
  background: #f0f0f0;
}
#staff_table th,#staff_table td{
  border-bottom: 1px solid #aaa;
  padding: 10px;
  box-sizing: border-box;
}
#staff_table th{
  width: 200px;
}
#staff_table td{
}

/* ビデオのレスポンシブ */
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  box-shadow: 2px 2px 3px #888;
}

/* メンテナンス告知 */
#mente_countion{
  width: calc(100% - 10px);
  text-align: center;
  margin:10px auto;
  padding: 5px;
  box-sizing: border-box;
  border: 1px #f00 solid;
  background: #fdd;
}
.grecaptcha-badge{
  display: none;
}