@charset "utf-8";
body{
font-size: 14.5px;
font-family: maru-maru-gothic-blr-stdn, sans-serif;
font-weight: 400;
font-style: normal;
color: #6B5D4C;
text-align: center;
letter-spacing: 0.7;
margin: 0 auto;
}

/*=====================共通領域=======================*/
.sp-menu a{
}
.sp-menu a:hover{
opacity: 0.7;
}

.sp-menu img{
width: 330px;
}


/*=====================ヘッダー=======================*/
.header{
z-index:500;
width:100%;
background:url("../img/header-top.svg") top center repeat-x!important;
}

.header h1 a{
display: block;
}

.logo_illust{
width: 130px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}

.logo_sub{
width: 150px!important;
}

.menu-btn {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 50px;
  height: auto;
}

.navigation {
background: url("../img/bg_sp.svg") top center no-repeat;
background-size: 500px auto;
display: none;
position: absolute;
top: 0;
width: 100%;
height: 650px;
z-index: 1;
position: fixed;
}
 
.navigation a {
  display: block;
  text-decoration: none;
  padding: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.navigation a:hover {
 opacity: 0.7;
}

.navigation img{
margin-bottom: 10px;
width: 100%;
height: 10%;
}

.navigation.pc_off ul{
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 100%;
margin-bottom: 20px;
}

.navigation.pc_off ul li{
width: 46%;
height: 10%;
margin-left: auto;
margin-right: auto;
}

.sp_off{
display: none;
}
 
.logo_sub::after{
background: url("../img/close.svg");
}
/*=====================PC_body=======================*/
@media screen and (min-width:601px){

body{
font-size: 20px;
line-height: 1.8em;
letter-spacing: 0.2px;
}
}
/*=====================PC_body=======================*/
/*=====================PC_nav=======================*/
@media screen and (min-width:601px){
  
 .menu-btn{
display: none;
}    
    
.logo_illust{
display: none;
}
	
.menu_wrap{
width: 100%;
padding: 0 15px;
box-sizing: border-box;
}

.menu_wrap .sp_off {
 width: 100%;
 height: auto;
 max-width: 1080px;
 margin: 0 auto;
 -js-display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 align-items: center;
}

.menu_wrap ul li a{
display:block;
width: 100%;
}
	
.menu_wrap ul li a:hover{
opacity: 0.7;
}

.menu_wrap ul .n_menu{
box-sizing:border-box;
width: 20%;
}

.n_menu{
margin-top: 70px;
}
}
/*=====================PC_nav=======================*/

/*=====================ボタン=======================*/
.btn_1,.btn_2{
text-align: center;
}

.btn_1 a,.btn_2 a{
text-decoration: none;
color: #FFFEF6;
background: #DAAD98;
border-radius: 30px;
padding: 15px 20px!important;
margin-bottom: 15px;
font-size: 14px;
display: inline-block;
width: 250px;
margin-left: auto;
margin-right: auto;
}

.btn_1 a:hover,.btn_2 a:hover{
 opacity: 0.7;   
}

/*=====================PC_button=======================*/
@media screen and (min-width:601px){

.btn_1 a,.btn_2 a{
width: 230px; 
}
}
/*=====================PC_button=======================*/



/*=====================フッター=======================*/
.footer{
background: #F6F1E0;
}

.pagetop a{
display: block;
text-align: right!important;
margin-right: 10px;
}

.pagetop img{
width: 50px;
margin-bottom: 10px;
margin-top: 20px;
}

.kokoneko{
width: 134px;
margin-bottom: 20px;
padding: 0;
box-sizing: border-box;
}

.map{
width: 90%;
margin-bottom: 25px;
margin-right: auto;
margin-left: auto;
}

.tel{
font-size: 15px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 20px;
}

.fa-phone-alt{
padding-right: 5px;
}

.address{
font-size: 12px;
margin-bottom: 15px;
}

.sns{
margin-bottom: 10px;
display: flex;
justify-content: center;
}

.sns a{
font-size: 35px;
color: #6B5D4C;
margin-left: 10px;
}

.sns a:hover{
opacity: 0.7;
}

.copyright{
font-size: 10px;
}
    
/*=====================PC_footer=======================*/
@media screen and (min-width:601px){
.pagetop a{
margin-right: 20px;
}

.pagetop img{
width: 70px;
margin-bottom: 10px;
margin-top: 20px;
}
 
.kokoneko{
width: 160px;
}

.sns a{
font-size: 45px;
margin-left: 15px;
}

.flex_footer{
display: flex;
}

.flex{
width: 45%;
margin: 0 auto;
padding: 50px 0;
}
    
.map{
width: 100%;
height: 100%;
margin-bottom: 0;
}
}
/*=====================PC_footer=======================*/
/*==============共通領域==============================*/


/*=============トップページ==============================*/
/*main*/
.contents{
margin-bottom: 50px;
}

/*hero*/
.hero{
background: #F6F1E0;
position: relative;
}

.hero_img{
width: 100%;
height: auto;
background-size: cover;
}

/*about*/
.about,
.questions_bg{
background: #F6F1E0;
}

.about h3{
font-size: 16px;
font-weight: bold;
text-align: start;
clear: both;
margin-bottom: 20px;
margin-left: 40px;
line-height: 30px;
text-indent: 5px;
}

.about_p{
padding-left: 40px;
padding-right: 40px;
text-align: start;
}

.about_p p{
margin-bottom: 20px;
line-height: 1.5rem;
}

.about_img{
width: 90%;
float: right;
margin-bottom: 35px;
position: relative;
}

.about_last{
content: "";
display: inline-block;
width: 85%;
height: 200px;
background: url("../img/bg-ashiato.png") no-repeat;
background-size: contain;
background-position: right bottom;
}

.before_w{
font-size: 10px;
color: #fffef6;
letter-spacing: 0.7px;
}
.about .before_w{
padding-top: 40px;
}

.before_b{
font-size: 10px;
color: #F6F1E0;
padding-top: 40px;
letter-spacing: 0.7px;
}

.questions h2,
.news h2,
.rules h2,
.cats_top h2{
font-size:20px;
position: relative;
font-weight: bold;
margin-bottom: 30px;
}

.about h2{
font-size:20px;
position: relative;
font-weight: bold;
}

.about h2::before,
.questions h2::before{
content: "";
display: inline-block;
width: 35px;
height: 35px;
background: url(../img/ashiato-w.png) no-repeat;
background-size: contain;
vertical-align:middle;
}

.news h2::before,
.rules h2::before,
.cats_top h2::before{
content:"";
display: inline-block;
width: 35px;
height: 35px;
background: url(../img/ashiato-b.png) no-repeat;
background-size: contain;
position: relative;
vertical-align:middle;
}

/*=====================PC_見出し=======================*/
@media screen and (min-width:601px){

/*見出し　かざり*/
.before_w{
font-size: 13px;
letter-spacing: 0.9px;
}
    
.about .before_w{
padding-top: 60px;
}

.news .before_b,
.questions .before_b,
.cats .before_b{
font-size: 13px;
padding-top: 60px;
letter-spacing: 0.9px;
}

/*見出し*/
.about h2,
.questions h2,
.news h2,
.rules h2,
.cats_top h2{
font-size: 28px;
position: relative;
}

.about h2::before,
.questions h2::before{
width: 45px;
height: 45px;
}

.news h2::before,
.rules h2::before,
.cats_top h2::before{
width: 45px;
height: 45px;
background: url(../img/ashiato-b.png) no-repeat;
background-size: contain;
position: relative;
vertical-align:middle;
}
}
/*=====================PC_見出し=======================*/

/*=====================PC_about=======================*/
@media screen and (min-width:601px){
/*main*/
.contents{
margin-bottom: 50px;
}

/*about*/
.about{
overflow: hidden;
}
    
.about h2{
margin-bottom: 10px;
padding-top: 30px;
 }  
    
.about h3{
font-size: 22px;
clear: both;;
line-height: 30px;
text-indent: 10px;
margin-top: 50px;
margin-left: 50px;
}

.about_p p{
margin-bottom: 30px;
line-height: 1.5rem;
letter-spacing: 2px;
}

.about_img{
width: 55%;
float: right;
margin-top: 30px;
}

.left{
float: left;
width: 40%;
margin-bottom: 20px;
padding-left: 20px;
 }
 
.right{
float: right;
width: 40%;
margin-top: 60px;
clear: both;
padding-right: 20px;
}

.about_last{
width: 40%;
height: 400px;
background-position: center;
margin-bottom: 50px;
}
} 
/*=====================PC_about=======================*/

/*news*/
.news{
margin-bottom: 50px;
}
.news ul{
width: 100%;
}

.news ul li{
text-align: start;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #6B5D4C;
width: 90%;
margin-right: auto;
margin-left: auto;
}

.news_last{
float: right;
width: 100%;
}

.news ul li a,
.news_last a{
text-decoration: none;
color: #6B5D4C;
}

.news_last a{
display: inline-block;
width: 90%;
font-size: 13px;
text-align: end;
}

.news ul li a:hover,
.news_last a:hover{
color: #DAAD98;	
}

/*=====================PC_news=======================*/
@media screen and (min-width:601px){

.news ul li{
text-align: start;
margin-bottom: 10px;
padding-bottom: 10px;
width: 75%;
}

.news_last a{
font-size: 15px;
display: inline-block;
width: 75%;
}
 }
/*=====================PC_news=======================*/

/*rules*/
.rules{
margin-bottom: 50px;
}
.rules p{
margin-bottom: 10px;
}

.none_pc{
display: none;
}

/*=====================PC_rules=======================*/
@media screen and (min-width:601px){
.rules{
margin-bottom: 100px;
}
    
.none_pc{
display: block;
}

 .none_sp{
display: none;
}

.none_pc p{
display: flex;
justify-content: space-between;
width: 100%;
}
    
.none_pc img{
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
/*=====================PC_rules=======================*/
    
/*questions*/
.questions_p p{
width: 90%;
padding-left: 5px;
}

.questions_bg{
padding-bottom: 50px;
}

.acd-check{
    display: none;
}

.acd-label{
    background: #fffef6;
    padding: 20px 10px;
    border: 1px solid #6B5D4C;
    text-align: start;
    line-height: 1.5rem;
    width: 90%;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.acd-label:after{
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #6B5D4C;
    width: 5%;
    padding: 25px;
    position: absolute;
    right:0;
    top: 0;
}
.acd-content{
    border: 1px solid #DAAD98;
    background: #fffef6;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0;
    transition: .5s;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}

.acd-content p{
text-align: start;
line-height: 1.5rem;
width: 90%;
height: 100px;
margin: 0;
padding: 0 10px;
}

.acd-check:checked + .acd-label:after{
    content: '\f068';
    font-weight: 900;
}

.acd-check:checked + .acd-label + .acd-content{
    height: 150px;
    opacity: 1;
    padding: 20px 15px;
    margin-bottom: 10px;
    visibility: visible;
    width: 87%;
    margin-left: auto;
    margin-right: auto;
}

.questions_img{
margin: 0;
vertical-align: bottom;
}

/*=====================PC_questions=======================*/
@media screen and (min-width:601px){
.questions_bg{
padding-bottom: 100px;
}

.acd-label{
    padding: 20px 10px;
    line-height: 1.8rem;
    width: 90%;
    position: relative;
    display: inline-block;    
}

.acd-label:after{
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #6B5D4C;
    width: 5%;
    padding: 25px;
    position: absolute;
    right:0;
    top: 0;
}
.acd-content{
    border: 1px solid #DAAD98;
    background: #fffef6;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0;
    transition: .5s;
    width: 89%;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}

.acd-content p{
text-align: start;
line-height: 1.5rem;
width: 99%;
height: 100px;
margin: 0 auto;
padding: 0 10px;
}

.acd-check:checked + .acd-label + .acd-content{
    height: 100px;
    opacity: 1;
    padding: 20px 15px;
    margin-bottom: 15px;
    visibility: visible;
    width: 89%;
    margin-left: auto;
    margin-right: auto;
}
}
/*=====================PC_questions=======================*/
    
/*cats*/
.garland{
width: 100%;
padding-top: 30px;
}

.slide {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.slide a{
text-decoration: none;
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

/* スライドする要素 */
.content {
  width: 150px;
  height: 150px;
  color: #000;
  margin: 10px;
}
.content p{
font-size: 8px;
text-align: center;
padding-top: 10px;
}

.content:nth-child(1) {
  content: ""; background:url("../img/neko_1.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(2) {
  background:url("../img/neko_2.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(3) {
  background:url("../img/neko_3.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(4) {
  background:url("../img/neko_4.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(5) {
  background:url("../img/neko_5.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(6) {
  background:url("../img/neko_6.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(7) {
  background:url("../img/neko_7.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(8) {
  background:url("../img/neko_8.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(9) {
  background:url("../img/neko_9.jpg");
  background-position: center;
  background-size: contain;
}

.content:nth-child(10) {
  background:url("../img/neko_10.jpg");
  background-position: center;
  background-size: contain;
}

/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 150px;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 40s infinite linear 1s both;
  animation: loop-slide 40s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ホバー時に動きを止める（パターン2・3）*/
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/*=====================PC_cats=======================*/
@media screen and (min-width:601px){
    
/*cats*/
.garland{
width: 90%;
padding-top: 50px;
}

.slide {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

/* スライドする要素 */
.content {
  width: 200px;
  height: 200px;
}
.content p{
font-size: 8px;
text-align: center;
padding-top: 10px;
}

/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 200px;
}
}
/*=====================PC_cats=======================*/