@charset "utf-8";

/* ============================================================================
 *
 * 共通スタイル
 *
 * ============================================================================ */

.maigoList{
  width: 960px;
  font-size: 14px;
  letter-spacing: .5px;
  line-height: 26px;
}

.maigoAttenWrap{
  background: #fff;
}

#maigoAttenBox p{
  margin-bottom: 1rem;
  color: #444;
}

.maigoList.maigoRule h2{
  width: 940px;
  font-size: 1.1rem;
  padding: 7px 10px;
  margin: 30px 0 0 0;
  background: #ff9b3e;
  color: #fff;
  font-weight: bold;
  border: none;
}

#maigoAttenBox h3{
  font-size: 1.2rem;
  margin: 0 0 15px 0;
  padding: 15px 10px 3px 5px;
  border-bottom: 2px solid #f1a84a;
  color: #800;
  font-weight: bold;
}

#maigoAttenBox h3:before {
  font-family: FontAwesome;
  content: "\f1b0";
  margin-right: 8px;
}

#maigoAttenBox h4{
  margin: 15px 10px 15px 35px;
  color: #642200;
  padding: .25em 0 .25em .6em;
  border-left: 6px solid #6f9de0;
  /*border-bottom: 2px solid #ccc;*/
  font-size: 17px;
  font-weight: bold;
}

#maigoAttenBox .top h4{
  margin: 0 0 15px 0;
  background: #F2F2F2;
  padding: 11px 12px 10px;
  border-top-left-radius: 5px;
  -webkit-top-left-border-radius: 5px;
  -moz-top-left-border-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-top-right-border-radius: 5px;
  -moz-top-right-border-radius: 5px;
  color: #642200;
  border-bottom: none;
  font-size: 1.05rem;
  font-weight: bold;
  border-left: none;
}

#maigoAttenBox .memoArea{
  background: #eee;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0 15px;
  padding: 10px !important;
  font-size: 85%;
  line-height: 140%;
}

#maigoAttenBox .memoHead{
  border-bottom: 1px dotted #333;
  font-size: 105%;
  display: block;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}

#maigoAttenBox .sampleImg {
  width: 70%;
  margin: 0 auto 50px auto;
}

#maigoAttenBox .sampleImg img{
  width: 48%;
}

/*##################### フォントサイズ・色指定 #####################*/
#maigoAttenBox .font-M{
  font-size: 15px;
}

#maigoAttenBox .font-L{
  font-size: 16px;
}

#maigoAttenBox .fa{
  margin-right: 0.5rem;
}

#maigoAttenBox i.fa-heart{
  color: #ee8899;
  margin-right: 8px;
}

#maigoAttenBox .or{
  color: #ec6941 !important;
}

#maigoAttenBox .rd{
  color: #d50000 !important;
}

/*
#maigoAttenBox .bl{
  color: #286bcc !important;
}

#maigoAttenBox .gn{
  color: #0b987f !important;
}
*/


/*##################### コラム一番最初のページ #####################*/
#maigoAttenTopBox .maigoAttenWrap{
  background: transparent;
}
#maigoAttenTopBox .topTxt.contentArea{
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 20px;
}

#maigoAttenTopBox .linkArea{
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 10px 15px;
}

#maigoAttenTopBox .maigoAttenContent.top{
  background: #fff;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
#maigoAttenTopBox .maigoAttenContent.top h4{
  border-bottom: 3px solid #ec6941;
  margin: 0 10px ;
  padding: 10px 10px 5px;
  color: #800;
  font-size: 1rem;
  font-weight: bold;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
}
#maigoAttenTopBox .maigoAttenContent.top .attention{
  padding: 10px 15px 20px;
}
#maigoAttenTopBox .maigoAttenContent.top li{
  padding: 10px 20px;
}
#maigoAttenTopBox .maigoAttenContent.top .imgArea{
  width: 160px;
  height: 160px;
}
#maigoAttenTopBox .maigoAttenContent.top .imgArea img{
  width: 100%;
  height: auto;
  border-radius: 8px;
  -weblit-border-radius: 8px;
  -moz-border-radius: 8px;
}

#maigoAttenTopBox .maigoAttenContent.top .imgArea img:hover{
  opacity: 0.7;
  transition: all 0.3s ease 0s;
}

#maigoAttenTopBox .maigoAttenContent.top .txtArea{
  width: calc(100% - 160px);
}
#maigoAttenTopBox .maigoAttenContent.top .txtArea .ttl{
  font-size: 18px;
  font-weight: bold;
  padding: 0 10px 5px;
  display: inline-block;
}
#maigoAttenTopBox .maigoAttenContent.top .txtArea .txt{
  font-size: 14px;
  padding: 0 10px 5px;
  color: #888;
}

/*##################### 説明エリア #####################*/
#maigoAttenBox .columnImg img{
  width: 50%;
  margin: 20px 0 35px 0;
}

#maigoAttenBox .topTxt,
#maigoAttenBox .maigoAttenBlock{
  background: #fff;
  margin-bottom: 35px;
  padding: 15px 25px;
}

#maigoAttenBox .topTxt.contentArea{
  margin-bottom: 0;
}

#maigoAttenBox .topTxt.contentArea p{
  margin-bottom: 0;
}

#maigoAttenBox .maigoAttenBlock:last-child{
  padding-bottom: 15px;
}

#maigoAttenBox .maigoAttenBlock .txtArea{
  padding: 0 15px;
}



/*##################### 一番小さい見出しのテキスト #####################*/
#maigoAttenBox .nestArea p{
  margin-bottom: 1rem;
  padding: 0 20px 0 35px;
  color: #444;
}

#maigoAttenBox .txtArea.nestArea{
  margin-bottom: 50px;
}

#maigoAttenBox .txtArea.nestArea:last-child{
  margin-bottom: 0;
}

#maigoAttenBox .nestAreaBox {
  margin: 15px 35px!important;
}

/*##################### リスト関係 #####################*/

#maigoAttenBox .maigoAttenBlock .listArea{
  padding: 15px 20px;
  color: #555;
  font-size: 13px;
  border: 2px solid #ccc;
  margin: 15px 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background: #fbfbfb;
}

#maigoAttenBox .listArea p{
  margin-bottom: 1rem;
  padding-left: 20px;
  font-size: 13px;
}

#maigoAttenBox .listArea li{
  margin-bottom: 2rem;
}

#maigoAttenBox .listArea li:last-child{
  margin-bottom: 0
}

#maigoAttenBox .listArea li>span{
  color: #0b987f !important;
  font-weight: bold;
  font-size: 15px;
  display: block;
}

#maigoAttenBox .infoArea{
  font-size: 13px;
  border: 2px solid #ccc;
  margin: 15px 15px 25px 15px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 10px 15px ;
  list-style-type: disc;
  background: #fbfbfb;
}

#maigoAttenBox .infoArea li{
  line-height: 20px;
}

#maigoAttenBox .maigoAttenBlock div.infoArea p{
  padding: 0;
}

#maigoAttenBox div.infoArea .case span{
  display: block;
}

#maigoAttenBox div.infoArea{
  padding: 10px 15px !important;
}

#maigoAttenBox ul.infoArea{
  padding: 10px 15px 10px 35px;
}


/*##################### コラム下部ページ送り #####################*/
#maigoAttenBox .otherPage{
  background: #fff;
  height: 100px;
  overflow: hidden;
  border-radius: 3px;
}

#maigoAttenBox .otherPage>div{
  width: 480px;
  height: 100px;
}

#maigoAttenBox .otherPage div.back{
  width: 478px;
  border-right: 2px dotted #ccc;
}

#maigoAttenBox .otherPage div.back a:hover,
#maigoAttenBox .otherPage div.next a:hover{
  opacity: 0.7;
}

#maigoAttenBox .otherPage a{
  display: table;
  width: 480px;
}

#maigoAttenBox .otherPage .articleImg{
  float: left;
  width: 140px;
  height: 100px;
  overflow: hidden;
}

#maigoAttenBox .otherPage .articleArea{
  width: 450px;
  display: inline-block;
}

#maigoAttenBox .otherPage img{
  width: auto;
  height: 80px;
  margin: 10px;
}

#maigoAttenBox .otherPage .articleTxt{
  display: table;
  width: 300px;
  height: 100px;
  float: left;
}

#maigoAttenBox .otherPage .next .articleImg{
  float: right;
}

#maigoAttenBox .otherPage .next .articleTxt{
  margin-left: 10px;
}

#maigoAttenBox .otherPage .articleTxt span{
  display: table-cell;
  vertical-align: middle;
}

#maigoAttenBox .otherPage .btn{
  width: 30px;
  height: 100px;
  background: #f0ad4e;
  color: #fff;
  display: table;
}

#maigoAttenBox .otherPage .back .btn {
  float: left;
}

#maigoAttenBox .otherPage .next .btn {
  float: right;
}


#maigoAttenBox .otherPage .btn i{
  display: table-cell;
  vertical-align: middle;
}

#maigoAttenBox .otherPage .blank{
  background: #ececec;
}

#maigoAttenBox .otherPage .blank .btn{
  background: #dedede;
}

#maigoAttenBox .otherPage .btn .fa{
  margin: 0;
}


/*##################### コラム下部メニュー #####################*/
#maigoAttenBox .otherPageMenu{
  background-color: #fff;
  border: 1px solid #d1d1d1;
  margin: 25px 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 10px 10px 15px 10px;
}

#maigoAttenBox .otherPageMenu h3{
  font-size: 1rem;
  margin: 5px 0 15px 5px;
  padding: 0 0 3px 5px;
  border-bottom: 2px solid #800;
}

#maigoAttenBox .otherPageMenu .menuTxt{
  margin: 0 15px;
}

#maigoAttenBox .otherPageMenu .menuTxt ul{
  margin-left: 18px;
}


#maigoAttenBox .otherPageMenu .menuTxt a{
  color: #0f67b7;
}

#maigoAttenBox .otherPageMenu .menuTxt a:hover{
  color: #ff6c00;
}

#maigoAttenBox .otherPageMenu .menuTxt>div{
  width: 46%;
  float: left;
  margin-left: 18px;
}

#maigoAttenBox .otherPageMenu .title{
  margin-bottom: 5px;
  color: #2a9da3;
  font-weight: bold;
}

#maigoAttenBox .otherPageMenu .title:before{
  font-family: FontAwesome;
  content: "\f02e";
  margin-right: 8px;
}

/*##################### TOPページ迷い猫の探し方について #####################*/
.introduce-area{
  width: 636px;
  background-color: #fff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding-bottom: 10px;
}

.introduce-area h3{
  font-size: 15px;
  background-color: #6f9de0;
  padding: 5px 10px;
  color: #fff;
}

.introduce-inner{
  padding: 10px 10px 0 10px;
}

.introduce-inner h4 img{
  width: 100%;
}

.introduce-inner .harfBox h4 img{
  width: 300px;
}

.bottomArea h4.title{
  border-bottom: 2px solid #F5AD4B;
  padding: 5px 7px;
  font-size: 16px;
  font-weight: bold;
}

.bottomArea h4.title:before{
  content: "\f02e";
  font-family: FontAwesome;
  color: #F5AD4B;
  margin-right: 5px;
  font-size: 15px;
}

.introduce-area .harfBox>div{
  width: 48%;
}

.introduce-area .txtBox .txtArea{
  padding: 10px 3px;
}

.bottomArea .txtBox .txtArea{
  padding: 10px 3px 0 3px;
}

.introduce-area .txtBox .txtArea p,
.bottomArea .txtBox .txtArea p{
  padding: 0 0 5px 3px;
  font-size: 13px;
}

.introduce-area .txtBox .txtArea span.more{
  display: block;
}

.introduce-area .topTxt .txtArea{
  padding: 2.5% 0.5%;
  width: 75%;
}

.introduce-area .topTxt .imgArea{
  padding: 1.5% 0%;
  margin: 0 auto;
  width: calc(100% - 76%);
}

.introduce-area .topTxt .imgArea img{
  width: 100%;
}

.introduce-area .more a{
  color: #4cae4c !important;
  border: 1px solid #4cae4c;
  border-radius: 4px;
  display: inline-block;
  padding: 2px 5px;
  white-space: nowrap;
  text-align: center;
  margin: 5px auto 0;
  font-weight: bold;
}

.introduce-area .more a:hover{
  color: #ec6941 !important;
  border: 1px solid #ec6941;
}

.introduce-area .more a:before{
  content: "\f061";
  font-family: FontAwesome;
  margin-right: 5px;
}

.introduce-area .more a:hover{
  color: #ff6c00;
}

.introduce-area .miniTitle{
  font-size: 14px;
}

/*##################### ポスターの作成方法ページ #####################*/
#howtoPdfArea{
  font-size: 15px;
}

#howtoPdfArea>div{
  background: #fff;
  margin-top: 10px;
}

#howtoPdfArea h3{
  background: #5389d6;
  color: #fff;
  padding: 5px 10px;
}

#howtoPdfArea .txtArea{
  padding: 15px 10px;
}

#howtoPdfArea .imgArea{
  text-align: center;
  margin: 20px 0;
}

#howtoPdfArea .imgArea img{
  width: 80%;
}
#howtoPdfArea .txtArea li:not(:first-child){
  margin-top: 20px;
}

#howtoPdfArea .txtArea li span{
  display: block;
  color: #b22222 !important;
  font-weight: bold;
}

#howtoPdfArea .block03 p:not(:last-child){
  margin-bottom: 10px;
}

/*##################### 迷い猫よくある質問 #####################*/
/*----------------------------------------
よくある質問
----------------------------------------*/
.contents.maigo h1.questionHead{
  display: block;
}

.contents.maigo h2.grnLine{
  width: 940px;
  background: #fff;
  border-top: 2px solid #0a725f;
  border-bottom: 2px solid #0a725f;
  padding: 10px;
  margin: 20px 0;
  border-left: none;
  font-size: 18px;
  font-weight: bold;
  box-shadow: none;
}

/*--TOP質問ボタン--*/
#ruleHeadBlock li{
  font-size: 15px;
  background: #0e8a74;
  display: inline-block;
  border: 2px solid #458f76;
  border-radius: 5px;
}

#ruleHeadBlock .collectArea li{
  border: 2px solid #e679a0;
  background: #ef85ab;
}
#ruleHeadBlock .commonArea li{
  border: 2px solid #469cca;
  background: #499fce;
}

#ruleHeadBlock li a{
  color: #fff;
  padding: 10px;
  position: relative;
  display: inline-block;
}

#ruleHeadBlock li:hover{
  background: #8ac3b0;
  transition: 0.3s;
}

#ruleHeadBlock .collectArea li:hover{
  background: #f1c2d2;
}
#ruleHeadBlock .commonArea li:hover{
  background: #a0d2ec;
}

/*--見出し関係--*/
#ruleBlock h3{
  font-size: 20px;
  color: #fff;
  background: #02735f;
  padding: 5px 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#collectBlock h3{
  background: #e679a0;
}

#commonBlock h3{
  background: #1b7db1;
}

#ruleBlock h4{
  font-size: 20px;
  color: #666;
  border-bottom: 3px solid #8ac3b0;
  margin: 20px 10px;
}

#collectBlock h4{
  border-bottom: 3px solid #f1b2c9;
}

#commonBlock h4{
  border-bottom: 3px solid #6cb5dc;
}

#ruleBlock h4 span{
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
#ruleBlock h4 span:before{
  content: "";
  width: 100%;
  height: 3px;
  display: inline-block;
  background: #02735f;
  position: absolute;
  bottom: -3px;
  left: 0;
}

#collectBlock h4 span:before{
  background: #de5d8b;
}

#commonBlock h4 span:before{
  background: #1b7db1;
}

/*--ブロックごと--*/
#ruleBlock>div{
  background: #fff;
  margin-top: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding-bottom: 20px;
}

/*--本文--*/
.questionTitle.faqOpen,
#ruleBlock dt{
  position: relative;
}

#ruleBlock dl{
  padding: 0 10px 0 10px;
}

#ruleBlock dt.faqOpen:after{
  position: absolute;
  right: 10px;
  content: "\f106";
  font-family: FontAwesome;
  font-size: 25px;
}

#ruleBlock dt:after{
  position: absolute;
  top: 5px;
  right: 10px;
  content: "\f107";
  font-family: FontAwesome;
  font-size: 25px;
}

#ruleBlock dt.questionTitle:before{
  content: "Q";
  border-radius: 50%;
  font-size: 18px;
  padding-left: 0.4em;
  padding-right: 0.45em;
  padding-bottom: 0.1em;
  margin-right: 10px;
  color: #fff;
  background: #148e78;
  position: absolute;
  top: 10px;
  left: 10px;
}

#collectBlock dt.questionTitle:before{
  background: #ef7ca5;
}

#commonBlock dt.questionTitle:before{
  background: #1b7db1;
}

#ruleBlock dt{
  background-color: #f1f1f1;
  font-size: 18px;
  color: #02735f;
  margin: 10px 0 0 0;
  padding: 10px 10px 10px 50px;
  border-radius: 5px;
}

#ruleBlock #collectBlock dt{
  color: #de5d8b;
}

#ruleBlock #commonBlock dt{
  color: #1b7db1;
}

#ruleBlock dt:hover{
  background-color: #e8f5e7;
  transition: 0.3s;
  cursor: pointer;
}

#subscribeBlock dt.questionTitle.faqOpen{
  background-color: #e8f5e7;
}

#collectBlock dt.questionTitle.faqOpen{
  background-color: #fff0f5;
}

#commonBlock dt.questionTitle.faqOpen{
  background-color: #ebf4f9;
}

#ruleBlock #collectBlock dt:hover{
  background-color: #fff0f5;
}

#ruleBlock #commonBlock dt:hover{
  background-color: #ebf4f9;
}

#ruleBlock dd{
  margin: 0;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
  padding-left: 40px;
}

#ruleBlock dd p{
  padding: 10px;
  font-size: 16px;
}

#ruleBlock dd.answerTxt{
  position: relative;
  display: none;
}

#ruleBlock dd.answerTxt:before{
  content: "A";
  border-radius: 50%;
  font-size: 18px;
  padding-left: 0.4em;
  padding-right: 0.4em;
  margin-right: 10px;
  color: #fff;
  background: #f79f46;
  position: absolute;
  top: 10px;
  left: 10px;
}

#ruleBlock .faq-howto{
  font-size: 14px;
  padding: 10px 0;
  background: transparent;
  border: none;
  margin-top: 0;
  text-align: right;
}

#faqArea .desctiptionArea {
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
#faqArea .innerLink ul li{
  display:inline-block;
  background:#fff;
  border-radius:3px;
}
#faqArea .innerLink ul li.subscribe{
  margin-right:20px;
  border:1px solid #02735f;
}

#faqArea .innerLink ul li.collect{
  margin-right:20px;
  border:1px solid #e679a0;
}
#faqArea .innerLink ul li.common{
  border:1px solid #1b7db1
}
#faqArea .innerLink ul li a {
  display:block;
  padding:5px 15px;
  font-size: 14px;
}

#faqArea .desctiptionArea img{
  border: 1px solid #ccc;
  margin-bottom: 30px;
}

/*##################### 利用規約 #####################*/
#ruleArea #ruleBlock{
  margin: 0 auto ;
  border: 1px solid #ccc;
  background: #fff;
  padding-top: 10px;
}

#ruleArea #ruleBlock ul span.important {
  font-weight: bold;
  color: #f00;
}

#ruleArea #ruleBlock h3{
  border-bottom: 2px solid #0a725f;
  margin: 0 10px;
  font-weight: bold;
  color: #672c10;
  font-size: 120%;
  height: 26px;
  background: transparent;
  padding: 7px 0 0 15px;
}

#ruleArea #ruleBlock ul{
  margin: 10px 20px 20px 20px;
  font-size: 105%;
}

#ruleArea #ruleBlock ul li{
  margin-bottom: 3px;
  text-indent: -1.2em;
  padding-left: 1.2em;
  margin-top: .3rem;
}

#ruleArea #ruleBlock ul li div{
  text-indent: 0;
}

#ruleArea #ruleBlock ul li span.number{
    font-weight: bold;
    color: #e36c1f;
    margin-right: 5px;
    font-size: 105%;
}

#ruleArea #ruleBlock h4{
  padding: 5px 10px;
  margin: 10px 15px 10px 10px;
  border-bottom: 1px solid #ff9d52;
  font-size: 105%;
  font-weight: bold;
  color: #672c10;
}

#ruleArea #ruleBlock ul.dotted{
  padding: 5px 10px 3px;
  margin: 10px 15px 10px 10px;
  border-bottom: 2px dotted #ff9d52;
}
#ruleArea #ruleBlock ul.dotted li{
  background:none;

}
#ruleArea #ruleBlock .description-box{
  margin: 5px 20px 20px 20px;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
}

#ruleArea #ruleBlock .btn{
  text-align: center;
  background: transparent;
  border: none;
  margin-top: 0;
  border-radius: 0;
  padding-bottom: 0;
}

#ruleArea #ruleBlock .btn a{
  display: inline-block;
  font-size: 115%;
  text-decoration: none;
  padding: 12px 25px;
  margin-bottom: 15px;
  border-radius: 10px;
  background: #469cca;
  color: #fff;
}

#ruleArea #ruleBlock .btn a:hover{
  opacity:0.7;
}

#ruleArea #ruleBlock>p{
  margin-bottom: 3px;
}

#ruleArea .dotted{
  border-bottom: 1px dotted #7f7f7f;
  padding-bottom: 8px;
}

#ruleArea .revisionArea{
  background: transparent;
  border: none;
  margin-top: 0;
  padding-bottom: 0;
}

#ruleArea .btm_img{
  display: block;
  margin: 0 auto 10px auto;
  text-align: center;
}