@charset "utf-8";
/*
@import url("https://use.typekit.net/xxxxxxx.css");
*/


/*共通部分
-------------------------------------------------*/
html{
font-size: 100%;
margin-bottom:1px;
height:100%;
width: 100%;
}
body{
margin-bottom:1px;
height:100%;
width: 100%;
overflow-x: hidden;
background-color: #fefbf3;
font-family: zen-maru-gothic, sans-serif;
font-style: normal;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 700;
font-weight: 900;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
/*ホーム全体
------------------------------------------------------*/
.content{
height: 9020px;
width: 1500px;
max-width: 100%;
}

/*HEADER
--------------------------------------------------*/
.home-container{
position: relative;
width: 1500px;
max-width: 100%;
height: 100vh;
z-index: 10;
text-align: center;
}
.ribon {
max-width: 100vw;
display: flex;
position: absolute;
z-index: 1000;
bottom:0;
left: 50%;
transform: translateX(-50%)
}
.main-ttl > h2{
font-size: 36px;
}
/*スクロールバー
-----------------------------------------*/
/* 矢印が動いてスクロールを促す*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置*/
    z-index: 10000;
	position:absolute;
	bottom:3%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }
/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:20px;
    /*テキストの形状*/
	color: #000000;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 10px;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #000000;
    transform: skewX(-31deg);
}
.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:10px;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#000000;
}
/*Swiperを使用した全画面表示
----------------------------------------------------*/
.swiper-wrapper .swiper-slide{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 1500px;
max-width: 100%;
}
/*Swiperで動きを付ける各背景画像（各スライド）の読み込み*/
.swiper-container .main01{
    background-image: url("../home/images/main-1.jpeg");
}
.swiper-container .main02{
    background-image: url("../home/images/main-2.jpeg");
}
.swiper-container .main03{
    background-image: url("../home/images/main-3.jpeg");
}
.swiper-container .main04{
    background-image: url("../home/images/main-4.jpeg")
}
.home-container{
width: 100%;
}
header > .header{
width: 100%;
}
/*ハンバーガーメニュー
----------------------------------------------------*/
.header > a{
text-decoration: none;
color: #FFFFFF;
}
/*ナビのスタイル*/
.header > nav.NavMenu{
position: absolute;
z-index: 12;
top: 0;
right: 0;
background: #FF9284;
opacity: 0.9;
text-align: center;
width: 100vw;
height: 715px;
display: none;
}

.header > nav.NavMenu ul{
width: 100%;
margin: 0 auto;
padding: 0;
position: absolute;
top: 48%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

.header > nav.NavMenu ul li{
font-size: 20px;
list-style-type: none;
width: 100%;
padding-bottom: 0px;
}
.header > nav.NavMenu ul li:last-child{
padding-bottom: 0;
}

.header > nav.NavMenu ul li a{
display: block;
color: #fff;
padding: 14px 0;
font-weight: 700;
font-size: 20px;
transition: all .3s ease 0s;
}
.header > nav.NavMenu ul li a > h3{
display: block;
color: #fff;
padding: 1px 0;
font-weight: 300;
font-size: 12px;
}
.header > nav.NavMenu ul li a:hover{
color: #65191B;
}
/*ボタンのスタイル*/
.Toggle {
position: absolute;
right:25px;
top: 3px;
width: 45px;
height: 45px;
cursor: pointer;
z-index: 13;
display: block;
}

.Toggle span {
display: block;
position: absolute;
width: 35px;
border-bottom: solid 4px #fff;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 6px;
}

.Toggle span:nth-child(1) {
top: 9px;
}

.Toggle span:nth-child(2) {
top: 20px;
}

.Toggle span:nth-child(3) {
top: 31px;
}

.Toggle.active span:nth-child(1) {
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
border-bottom: solid 3px #fff;
}
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
border-bottom: solid 3px #fff;
}
/*フッター
-----------------------------------------------------*/
.footer-bg{
position: relative;
background-image: url("../home/images/footer.jpeg");
min-height: 100vh;
background-size: cover;
background-position: center top;
max-width: 100%;
object-fit: cover;
}
.footer-nav{
position:absolute;
display: flex;
text-transform: uppercase;
list-style: none;
margin-top: 90px;
right:10px;
text-align: center;
width: 840px;
height: 39px;
justify-content: center;
}
.footer-nav li{
margin: 0 20px;
}
.footer-nav a{
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 5px;
transition: all .3s ease 0s;
}
.footer-nav a:hover{
color: #000000;
}
.footer-nav h3{
font-weight: 300;
font-size: 12px;
letter-spacing: 0;
padding-right: 11px;
}
.copyright{
color: #fff;
text-align: center;
position:absolute;
margin: 0 auto;
bottom:20px;
left:750px;
}

/*home
----------------------------------------------------*/
.home-catch{
display: flex;
justify-content: center;
text-align: center;
align-items: center;
margin: 200px auto;
height: 230px;
width: 100%;
}

.bonjour-box{
position: relative;
left: 10px;
width: 200px;
height: 210px;
display: block;
}
.cat-img_a{
position: absolute;
right: 5px;
bottom: 5px;
}
.catch{
width: 340px;
height: 200px;
}
.catch p{
padding: 15px;
margin: 0 50px;
font-size: 16px;
font-weight: 500;
}
.effeltower{
width: 140px;
height: 230px;
}
.effeltower,.cat-img.a{
vertical-align: bottom;
}

/*メインバナー
--------------------------------------------------*/
.main-bnr{
height: 2400px;
width: 1500px;
max-width: 100%;
}
.mv-box{
display: flex;
justify-content: center;
height: 510px;
width: 1500px;
max-width: 100%;
align-items: center;
}
.mv-img_a{
width: 480px;
height: 480px;
}
.mv-ttl{
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
width: 560px;
height: 450px;
}
.nekowaku-ttl {
background-image: url("../home/images/nekowaku.png");
width: 377px;
height: 230px;
margin-left: 90px;
}
.nekowaku-ttl h2{
font-size: 30px;
font-weight: 700;
margin: 80px 0 0 10px;
}
.nekowaku-ttl h3{
font-size: 16px;
font-weight: 500;
margin: 10px 0px 0 10px;
}
.mv-info{
margin-left: 25px;
text-align: center;
}
.mv-info p{
font-size: 16px;
font-weight: 500;
}
/*ボタン
--------------------------*/
.button {
font-size: 16px;
font-weight: 500;
background: #ff9284;
border-radius: 35px;
padding: 18px;
margin-left: 200px;
width: 180px;
text-align: center;
cursor: pointer;
}
.button > a > p{
color: #000;
}
.button:hover {
 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
 border-color: transparent;
}
/*メインバナー　box_b
--------------------------------*/
.mv-box_b{
display: flex;
justify-content: center;
flex-direction: row-reverse;
height: 1000px;
width: 100%;
align-items: center;
}
.mv-img_b{
width: 600px;
height: 547px;
margin-left: 30px;
}
.mv-info_b{
text-align: center;
}
.mv-info_b p{
font-size: 16px;
font-weight: 500;
}

/*猫が歩く動画
-----------------------------------*/
.catwalk-mov{
width: 100%;
height: 1159px;
}
.catwalk-mov video{
width: 100%;
height: auto;
}
.catwalk-mov_b{
width: 100%;
height: 850px;
}
.catwalk-mov_b video{
width: 100%;
height: 850px;
}
/*猫の足跡画像（縦）
----------------------------------------*/

.catwalk-img_b {
background-image: url("../home/images/cat-walk-2.png");
background-position: bottom;
height: 458px;
}

.catwalk-img_d {
background-image: url("../home/images/cat-walk-2.png");
background-position: center;
height: 765px;
margin-top: 80px;
margin-left: 281px;
}
/*猫枠タイトル　中央配置組
----------------------------*/
.nekowaku-ttl_box{
width: 100vw;
height: 220px;
text-align: center;
background-image: url("../home/images/nekowaku.png");
background-position: center;
flex-direction: column;
display: flex;
position: relative;
margin-bottom: 150px;
}
.nekowaku-ttl_box h2{
font-size: 30px;
font-weight: 700;
margin-top: 75px;
}
.nekowaku-ttl_box h3{
font-size: 16px;
font-weight: 500;
padding-top: 10px;
}
.cat-img_b {
position: absolute;
bottom:0;
right: 32%;
}
.cat-img_c{
position: absolute;
bottom:0;
left: 32%;
}
/*NEWS
-----------------------------------*/
.news{
width: 100%;
height: 100vh;
max-height: 1000px;
display: flex;
justify-content: center;
}
.news-box{
width: 100%;
}
.white-sircle{
background:#fff;
border-radius: 50%;
width:100vw;
max-width: 620px;
height: 100vw;
max-height: 620px;
display: flex;
margin: 0 15px;
}
.news-lead{
width: 100vw;
max-width: 600px;
height: 450px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 60px;
margin-left: 30px;
}
.news-day{
background-image: url("../home/images/nikukyu.png");
background-position: bottom;
height: 100vw;
max-height: 150px;
width: 100vw;
max-width: 100px;
margin-left:25px;
position: relative;
}
.news-day p{
font-size: 24px;
font-weight: 500;
margin-left: 34px;
position: absolute;
margin-top: 105px;
}
.news-ttl{
margin-left: 60px;
margin-top:70px;
font-size: 28px;
font-weight: 500;
letter-spacing: 1px;
position:relative;
}
.news-content{
width: 340px;
height: 310px;
}
.news-content p{
font-size: 16px;
font-weight: 400;
line-height: 3rem;
padding-left: 34px;
padding-top: 23px;
}
.news-img{
width: 100vw;
max-width: 200px;
height: 310px;
}
.news-img img{
margin-top: 30px;
}
/*猫紹介
-----------------------------------*/
.home-catlist{
height: 750px;
width: 100vw;
text-align: center;
}
#catlist-button{
margin: 50px 350px;
}
.button-catwalk{
background-image: url("../home/images/catwalk-1.png");
background-position: left;
height: 765px;
margin-left: 300px;
}

/*猫紹介　スライダー
---------------------*/
.smooth img ,.smooth_b img{
width: 231px;
padding: 20px 10px;
cursor: pointer;
}
/*猫動画
-----------------------*/
.movie{
text-align: center;
position: relative;
height: 600px;
width: 100vw;
outline: none;
border: none;
background-image: url("../home/images/movie-flame3.jpg");
background-position: center;
}
.movie > video{
margin-top: 75px;
}
.movie > .cat-img_d{
position: absolute;
margin-left: 15%;
}

/*バナー
----------------------------------*/
.home-bnr {
height: 375px;
width: 100%;
display: flex;
justify-content: center;
margin-top: 760px;
text-align: center;
}
.company-bnr > a > h4, .contact-bnr > a > h4{
font-weight: 700;
font-size: 30px;
display: block;
margin: 138px 126px;
color: #000;
position:absolute;
}
.sns-bnr > a > h4{
font-weight: 700;
font-size: 30px;
display: block;
margin: 138px 159px;
color: #000;
position:absolute;
}
.sns-bnr{
position: relative;
width: 376px;
height: 376px;
margin: 0 50px;
cursor: pointer;
}
.company-bnr{
position: relative;
width: 376px;
height: 376px;
margin: 0 50px;
cursor: pointer;
}
.contact-bnr{
position: relative;
width: 376px;
height: 376px;
margin: 0 50px;
cursor: pointer;
}
.contact-bnr > a > h4:visited{
    color: #000;
}
.sns-bnr > a > h4:visited{
    color: #000;
}
.company-bnr > a > h4:visited{
    color: #000;
}
.contact-bnr > a > h4:hover{
    color: #FE6A58;
}
.sns-bnr > a > h4:hover{
    color: #FE6A58;
}
.company-bnr > a > h4:hover{
    color: #FE6A58;
}
.sns-bnr:hover,.company-bnr:hover,.contact-bnr:hover{
opacity: 0.9;
}

/*ページトップボタン
------------------------------------------*/
#pagetop {
    position: fixed;
    right: 33px;
    bottom: 10px;
    margin: 0; 
}
#pagetop a{
    position: relative;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    background: #000000;
    transition: opacity .6s ease;
    color: #FFFFFF;
    align-items: center;
    text-decoration: none;
    font-size: 30px;
    border-radius: 100%;
}
#pagetop a:hover {
    opacity: .3;
}
@media screen and (max-width:767px) {
#pagetop a {
    width: 50px;
    height: 50px;}}

/*-----------------------------------------------
---------------/*CONCEPT*//*---------------------
-----------------------------------------------*/

/*conceptトップページ
--------------------------------------*/
.main-bg{
background-image: url("../concept/images/concept-main.jpeg");
background-size: cover;
width: 100vw;
height: 600px;
object-fit: contain;
z-index: 10;
display: flex;
position: relative;
}
.main-ttl{
text-transform: uppercase;
background-color:rgba(255,255,255,0.45);
background-position: right;
font-size: 15pt;
font-weight: 400;
line-height: 50pt;
position: absolute;
right: 20px;
bottom:90px;
padding: 4px 30px;
letter-spacing: 4px;
}

/*conceptキャッチ
-------------------------------*/
.concept-catch{
width: 100vw;
max-width: 1500px;
min-width: 1344px;
height: 550px;
}
.concept-catch img{
width: 100vw;
height: 292px;
text-align: start;
}

/*concept内容全体
--------------------------------*/
.concept-content{
max-width: 1500px;
margin: 0 auto;
height: 5600px;
display: block;
}
/*concept内容
---------------------------------*/
.concept-box_a, .concept-box_b{
height: 700px;
display: flex;
justify-content: space-around;
}
.concept-box_b{
flex-direction: row-reverse;
}
.concept-img > img{
border-radius: 20%;
}
/*文字や背景、装飾の箱
-----------------------------------*/
.concept-info{
 width:350px;
 height: 400px;
}
.concept-infobox{
display: flex;
}
/*背景白丸
---------------------------------------*/
.white-sircle_a, .white-sircle_d{
width: 252px;
height: 252px;
background-color: #FFFFFF;
border-radius: 50%;
margin-top: 40px;
margin-left: 80px;
}
.white-sircle_c{
width: 252px;
height: 252px;
background-color: #FFFFFF;
border-radius: 50%;
margin-top:70px;
margin-left: 100px;
}
.white-sircle_b, .white-sircle_e{
width: 252px;
    height: 252px;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin-left: 65px;
}
.white-sircle_d{
width: 284px;
height: 284px;
background-color: #FFFFFF;
border-radius: 50%;
margin-top: 76px;
margin-left: 64px;

}
/*文章
----------------------------------------*/
.concept-p_a{
padding-left: 30px;
margin-top: 66px;
position: absolute;
}
.concept-p_a > p,.concept-p_b > p, .concept-p_c > p, .concept-p_d > p, .concept-p_e > p{
font-size: 16px;
font-weight: 400;
line-height: 35px;
}
.concept-p_b{
padding-top: 58px;
padding-left: 30px;
}
.concept-p_c{
padding-left: 28px;
padding-top: 85px;
}
.concept-p_d{
padding-left: 40px;
padding-top: 51px;
}
.concept-p_e{
padding-left: 41px;
padding-top: 91px;
}
/*mouの文字大きさ*/
.concept-p > p > span{
font-size: 17pt;
}
.pink{
color: #FF9284;
}

/*/装飾飾り
----------------------------------------------------*/
.circle-img_a {
margin-left: 0px;
margin-top: 180px;
}
.circle-img_b{
margin-top: 41px;
margin-left: 100px;
}
.circle-img_c{
margin-left: 0px;
margin-top: 40px;
}
.circle-img_d{
margin-left: 110px;
}
.circle-img_e{
margin-top: 50px;
}
/*ビギナーバナー
-----------------------------------*/
.bnr{
text-align: center;
height: 510px;
display: flex;
justify-content: center;
}
.biginner-bnr{
width: 376px;
height: 376px;
cursor: pointer;
position: relative;
}
.biginner-bnr > a > h5{
font-size: 30px;
font-weight: 700;
margin-left: 126px;
margin-right: 70px;
margin-top: 148px;
position: absolute;
}
.biginner-bnr > a > h6{
font-size: 13px;
font-weight: 500;
position: absolute;
margin-left: 126px;
    margin-right: 70px;
    margin-top: 188px;
}
.biginner-bnr > a > h5:hover{
    color: #FE6A58;
}
.biginner-bnr > a{
color: #000;
}
.biginner-bnr:hover {
opacity: 0.9;
}

/*--------------------------------------------------*/
/*contact
----------------------------------------------------*/
#contact{
background-image: url("../contact/images/contactーmain.jpeg");
background-size: cover;
}
.contact-content{
width: 100vw;
max-width: 1500px;
margin: 0 auto;
height: 1450px;
}
.form-lead p{
text-align: center;
font-size: 16px;
font-weight: 500;
margin: 80px auto;
}
.form{
margin-left: 30%;
margin-bottom: 200px;
}
.contact-content p {
font-size: 22px;
text-align: center;
font-weight: 500;
margin-bottom: 50px;
}
.bg-bnr_lead > p{
font-size: 16px;
text-align: center;
font-weight: 400;
margin-bottom: 50px;
}
/*form内容
----------------------------------*/
.bnr{
height: 400px;
}
form div {
  margin-bottom: 26px;
  width:100vw;
}
label{
    font-size: 10pt;
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
}
input[type="text"],
input[type="email"],
textarea{
    background: #ffffff;
    border: 1px #000 solid;
    border-radius: 5px; 
    padding: 10px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
 width: 100%;
 max-width: 240px;
}
textarea{
    width: 100%;
    max-width: 480px;
    height: 6rem;
}
input[type="submit"]{
width: 120px;
cursor: pointer;
line-height: 1;
background-color:#ff9284;
color: #000;
border-radius: 40px;
padding: 10px;
margin-top:20px;
font-size: 16px;
font-weight: 500;
border: none;
}
input[type="submit"]:hover {
 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
 border-color: transparent;
}

/*--------------------------------------------------------
access--------------------------------------------------*/
/*---------------------------------------------------------*/
#access{
background-image: url("../access/images/access-main.jpeg");
background-size: cover;
}
.access-content{
width: 100vw;
max-width: 1500px;
height: 1900px;
margin: 0 auto;
}
.access-info{
height: 350px;
text-align: center;
}
.access-box{
height: 350px;
align-items: center;
justify-content: center;
position: relative;
margin-top: 100px;
}
.access{
background-image: url("../access/images/keito.png");
background-position: bottom 0 left 110px;
width: 617px;
height: 250px;
margin: 0 auto;
}
.access-item_a{
position: absolute;
margin-left:111px;
}
.access-item_b{
position: absolute;
margin-left: 180px;
}
.access-item_a span{
border-bottom: none;
font-size: 16px;
font-weight: 700;
line-height: 60px;
margin-right: 230px;
}
.access-item_b span {
border-bottom: none;
font-size: 16px;
font-weight: 700;
line-height: 60px;
padding-right: 35px;
}
.access-item_b p {
padding-left: 50px;
}
.access p{
font-size: 16px;
font-weight: 700;
text-align: left;
line-height: 60px;
border-bottom: solid 3.5px #FEA296;
width: 300px;
}
/*地図
-----------------------------------------------*/
.access-map{
height: 750px;
}
.map-box{
height: 400px;
text-align: center;
}
iframe{
width: 100%;
}
.shop-map{
width: 45%;
margin:0 auto;
}
.access-map > .cat-img_d{
height: 90px;
background-image: url("../access/images/nekokage-4.png");
background-position: bottom 0 left 23%;
}
/*電車、車の方へ
--------------------------------------------------*/
.train-car_access{
height: 500px;
display: flex;
justify-content: center;
}
.tc-access_box_a{
background-color: #fdcdc3;
width: 650px;
height: 400px;
}
.tc-access_box_b{
background: #fba197;
width: 650px;
height: 400px;
}
.tc-access_info{
margin-top: 60px;
}
.tc-access_info p{
font-size: 16px;
font-weight: 500;
padding-left: 140px;
line-height: 48pt;
}
.tc-access_info span{
font-size: 16px;
font-weight: 700;
padding-left: 140px;
line-height: 48pt;
}
.keito-cat{
background-image: url("../access/images/keitoneko.png");
margin: 0 auto;
width: 590px;
height: 120px;
}

/*--------------------------------------------------------------------*/
/*company&recruit
------------------------------------------------------------------*/
#recruit{
background-image: url("../recruit/images/recruit-main.jpeg");
background-size: cover;
}
.company-content{
width: 100vw;
max-width: 1500px;
margin: 0 auto;
height: 10350px;
}
/*会社情報
----------------------------------------*/
.company{
height: 850px;
margin-top: 200px;
}
.company-box{
display: flex;
justify-content: center;
position: relative;
}
.company-list{
position: absolute;
width: 1100px;
height: 450px;
display: flex;
}
.company-list_a{
position: absolute;
margin-right: 70px;
}
.company-list_b{
position: absolute;
margin-left: 10px;
}
.company-list_a p{
font-size: 20px;
font-weight: 500;
line-height: 45pt;
border-bottom: solid 3px #FEA296;
width: 180px;
}
.company-list_b p{
font-size: 20px;
font-weight: 500;
line-height: 45pt;
margin-left: 170px;
border-bottom: solid 3px #FEA296;
}
.map > iframe{
text-align: center;
}
.map{
width: 475px;
margin-left: 55%;
}
/*採用情報
--------------------------------------*/
.recruit-info{
height: 2100px;
}
.sub-ttl{
text-align: center;
}
.recruit-info_box_a {
display: flex;
justify-content: flex-end;
margin-bottom: 400px;
position: relative;
}
.recruit-info_box_a p{
width: 400px;
font-size: 16px;
font-weight: 500;
padding-top: 20px;
letter-spacing: 1pt;
line-height: 40px;
}
.recruit-info_box_a span{
font-size: 24px;
font-weight: 700;
letter-spacing: 2pt;
}
.recruit-info_catch_a{
margin: 170px 210px;
}
.recruit-back_a{
background-color: #fab3b4;
opacity: 45%;
width: 865px;
height: 568px;
position: absolute;
margin-top: 60px;
}
.recruit-info_img{
z-index: 1000;
}
.recruit-info_box_b{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin-bottom: 200px;
}
.recruit-info_box_b p{
width: 450px;
font-size: 16px;
font-weight: 500;
padding-top: 20px;
letter-spacing: 1pt;
padding-left: 70px;
line-height: 40px;
}
.recruit-info_box_b span{
font-size: 22px;
letter-spacing: 1pt;
}
.recruit-info_catch_b{
margin: 110px 200px;
}
.recruit-back_b{
background-color: #5e97d0;
opacity: 35%;
width: 770px;
height: 530px;
position: absolute;
margin-top: 60px;
margin-left: 80px;
}
/*スタッフスケジュール
----------------------------------------*/
.schedule{
height: 1200px;
}
.fukidasi-b{
text-align: center;
font-size: 16px;
font-weight: 400;
background-image: url("../recruit/images/hukidasi-qa.png");
background-position: center;
height: 118px;
}
.fukidasi-b p{
padding-top: 32px;
}
.schedule-box p{
font-weight: 400;
font-size: 16px;
text-align: center;
}
.ttl > h2{
font-size: 50px;
font-weight: 700;
color: #5b3600;
text-align: center;
margin: 30px 0 20px 0;
}
.ttl_a > h2{
font-size: 40pt;
font-weight: 700;
color: #5b3600;
text-align: center;
}
.ttl_a > h2 >span{
font-size: 50pt;
font-weight: 500;
}
.schedule-info{
font-size: 13px;
font-weight: 400;
text-align: right;
margin-right: 490px;
margin-top: 30px;
}
/*円グラフ
---------------------------------------*/
#piechart{
margin-top: 110px;
text-align: center;
height: 500px;
}
#piechart > img{
margin: 0 auto;
}

/*インタビュー
--------------------------------------------------*/
.interview-box{
margin-top:90px;
height: 1100px;
display: flex;
}
.interview-box_b{
height: 1100px;
display: flex;
flex-direction: row-reverse;
}
.interview-back{
width: 892px;
height: 435px;
background-color: #fff;
opacity: 70%;
z-index: 10000;
position: relative;
}
.interview-lead{
margin-top: 60px;
margin-left: 130px;
line-height: 31pt;
}
.interview-lead > h2{
color: #ff9284;
font-size: 24px;
font-weight: 500;
letter-spacing: 2px;
}
.interview-lead > h3{
font-size: 18px;
font-weight: 700;
letter-spacing: 1pt;
padding: 20px 0;
}
.interview-lead p{
font-size: 16px;
font-weight: 500;
letter-spacing: 1pt;
}
.interview-img_a {
position: absolute;
    height: 751px;
    width: 100%;
    background-image: url(../recruit/images/recruit-3.jpeg);
    margin: 110px 0;
    max-width: 1500px;
    background-position: right;
}
.interview-img_b{
background-image: url("../recruit/images/recruit-4.jpeg");
width: 100%;
height: 553px;
position: absolute;
margin: 110px 0;
    max-width: 1500px;
    background-position: left;
}
.interview-img_c{
background-image: url("../recruit/images/recruit-5.jpeg");
width: 100%;
height: 553px;
position: absolute;
margin: 110px 0;
    max-width: 1500px;
    background-position: right;
}
/*募集要項
-------------------------------------*/
.oubo{
height: 2000px;
}
.sub-ttl > h3{
font-size: 27px;
margin-bottom: 20px;
}
.oubo-a_group{
display: flex;
}
.oubo-b_group{
display: flex;
}
.oubo-box{
height: 800px;
}
.oubo-item_lead_a, .oubo-item_lead_b, .oubo-item_lead_c, .oubo-item_lead_d, .oubo-item_lead_e, .oubo-item_lead_f, .oubo-item_lead_g, .oubo-item_lead_h{
margin-left: 100px;
margin-top: 70px;
}
.oubo-item_lead_a h3, .oubo-item_lead_b h3, .oubo-item_lead_c h3, .oubo-item_lead_d h3, .oubo-item_lead_e h3, .oubo-item_lead_f h3, .oubo-item_lead_g h3, .oubo-item_lead_h h3{
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
padding-bottom: 20px;
}
.oubo-item_lead_a p, .oubo-item_lead_b p, .oubo-item_lead_c p, .oubo-item_lead_d p, .oubo-item_lead_e p, .oubo-item_lead_f p, .oubo-item_lead_g p, .oubo-item_lead_h p{
font-size: 16px;
font-weight: 500;
letter-spacing: 2px;
line-height: 25pt;
}
.oubo-item_a{
width: 750px;
height: 351px;
background-color: rgba(250,179,180,0.6);
}
.oubo-item_b{
background-image: url("../recruit/images/saiyou1.png");
width: 750px;
height: 351px;
right: 0;
}
.oubo-item_c{
width: 750px;
height: 281px;
background-color: #feaba1;
}
.oubo-item_d{
width: 750px;
height: 281px;
background-color: rgba(250,179,180,0.3);
}
.oubo-item_e{
width: 750px;
height: 351px;
background-color:rgba(94,151,208,0.6)
}
.oubo-item_f{
width: 750px;
height: 351px;
background-image: url("../recruit/images/saiyou2.png");
right: 0
}
.oubo-item_g{
width: 750px;
height: 281px;
background-color: #5e97d0;
}
.oubo-item_h{
width: 750px;
height: 281px;
background-color: rgba(94,151,208,0.3);
}
/*応募方法*/
.oubo-rule{
height: 180px;
text-align: center;
}
.oubo-lead {
height: 250px;
}
.oubo-lead p{
font-size: 16px;
font-weight: 500;
line-height: 2;
}
/*---------------------------------------------------*/
/*猫ちゃん紹介
-------------------------------------------------*/
#catlist{
background-image: url("../catslist/images/catlist-main.jpeg");
background-size: cover;
}
.catlist-content{
height: 2193px;
max-width: 1500px;
margin: 0 auto;
}
.catlist-catch{
text-align: center;
margin: 150px 0;
}
.catlist-box{
display: flex;
justify-content: center;
margin: 50px 100px;
}
.catlist-wrapper_star{
display: block;
background-image: url("../catslist/images/star.jpg");
background-position: bottom right 20px;
}
.catlist-wrapper_crown{
display: block;
background-image: url("../catslist/images/crown.jpg");
background-position: bottom right 20px;
}
.catlist-wrapper_heart{
display: block;
background-image: url("../catslist/images/heart.jpg");
background-position: bottom right 45px;
}
.catlist-wrapper_kirakira{
display: block;
background-image: url("../catslist/images/kirakira.jpg");
background-position: bottom right 30px;
}
.catlist-wrapper_eat{
display: block;
background-image: url("../catslist/images/eat.jpg");
background-position: bottom right 50px;
}
.catlist-wrapper_flower{
display: block;
background-image: url("../catslist/images/flower.jpg");
background-position: bottom right 20px;
}
.catlist-wrapper_bibiri{
display: block;
background-image: url("../catslist/images/bibiri.jpg");
background-position: bottom right 30px;
}
.catlist-wrapper_ribon{
display: block;
background-image: url("../catslist/images/ribon.jpg");
background-position: bottom right 40px;
}
.catlist-wrapper_tulip{
display: block;
background-image: url("../catslist/images/tulip.jpg");
background-position: bottom right 50px;
}
.catlist-wrapper_uruuru{
display: block;
background-image: url("../catslist/images/uruuru.jpg");
background-position: bottom right 25px;
}
.catlist-card_a{
display: block;
background-color: #fff;
border: 1px solid #fba197;
border-radius: 20px;
width: 273px;
height: 380px;
margin: 0 30px;
}
.catlist-card_b{
display: block;
background-color: #fff;
border: 1px solid #5e97d0;
border-radius: 20px;
width: 273px;
height: 380px;
margin: 0 30px;
}
.catlist-img{
width: 202px;
height: 205px;
margin-left: 35px;
margin-top: 30px;
}
.female{
background-image: url("../catslist/images/girl.jpg");
width: 23px;
height: 35px;
position: absolute;
margin-left: 50px;
margin-top: 20px;
}
.male{
background-image: url("../catslist/images/boy.jpg");
width: 29px;
height: 30px;
position: absolute;
margin-left: 50px;
margin-top: 20px;
}
.name-box{
position: relative;
display: flex;
text-align: center;
width: 202px;
height: 52px;
}
.name h2 , .name h3{
padding-left: 79px;
}
.name h2{
font-size: 24px;
font-weight: 400;
margin-top: 15px;
font-family: ab-kokoro-no3, sans-serif;
font-style: normal;
}
.name h3{
font-size: 13px;
font-weight: 400;
font-family: ab-kokoro-no3, sans-serif;
font-style: normal;
padding-top: 10px;
}
.prof p{
text-align: center;
font-size: 16px;
margin-top: 35px;
font-family: ab-kokoro-no3, sans-serif;
font-weight: 400;
font-style: normal;
}
/*------------------------------------------------------------*/
/*SNS
--------------------------------------------------------*/
#sns{
background-image: url("../sns/images/sns-main.jpeg");
background-size: cover;
}
.sns-content{
width: 100vw;
max-width: 1500px;
margin: 0 auto;
height: 3800px;
}
.timeline-catch{
text-align: center;
margin-top:200px;
margin-bottom: 150px;
}
.timeline-catch > h2{
font-size: 24px;
letter-spacing: 2px;
font-weight: 500;
}
.timeline-catch > h3{
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
margin-top:10px;
}
.timeline-box{
display: flex;
justify-content: space-around;
margin-bottom: 200px;
background-image: url("../sns/images/nekokage-1.png"),url("../sns/images/nekokage-4.png");
background-position: 39% 100%, 61% 100%;
}
.info-catch{
text-align: center;
margin: 90px 0;
}
.sns-infottl_box{
display: flex;
justify-content: space-around;
height: 70px;
background-image: url("../sns/images/twi-rogo.png"),url("../sns/images/instagram-rogo.png");
background-position: 17% 0%, 83% 0%
}
.sns-infottl_a{
font-size: 30px;
font-family: segoe print;
}
.sns-infottl_b{
font-size: 30px;
font-family: segoe print;
}
.sns-info{
display: flex;
justify-content: space-around;
}
.twitter-infobox{
display: block;
background-color:rgba(94,151,208,0.2);
width: 596px;
height: 2257px;
}
.insta-infobox{
display: block;
background-color:rgba(250,179,180,0.2);
width: 596px;
height: 2257px;
}
.twi-img{
text-align: center;
}
.insta-img{
text-align: center;
margin-bottom: 10px;
}
.sns-lead{
margin-left: 90px;
margin-top: 85px;
margin-bottom: 100px;
}
.sns-lead > h5{
font-size: 24px;
letter-spacing: 2pt;
margin-bottom: 25px;
}
.sns-lead > p{
font-size: 16px;
letter-spacing: 2pt;
line-height: 25pt;
font-weight: 500;
}
.sns-lead_b{
margin-left: 90px;
margin-top: 85px;
margin-bottom: 100px;
}
.sns-lead_b > h5{
font-size: 24px;
letter-spacing: 2pt;
margin-bottom: 25px;
}
.sns-lead_b > p{
font-size: 16px;
letter-spacing: 2pt;
line-height: 25pt;
font-weight: 500;
}
.sns-lead_c{
margin-left: 90px;
margin-top: 55px;
margin-bottom: 101px;
}
.sns-lead_c > h5{
font-size: 18pt;
letter-spacing: 2pt;
margin-bottom: 25px;
}
.sns-lead_c > p{
font-size: 16px;
letter-spacing: 2pt;
line-height: 25pt;
font-weight: 500;
}
.qr-wrapper{
display: flex;
margin-top: 280px;
margin-left: 50px;
}
.qr-wrapper_b{
display: flex;
margin-top: 146px;
margin-right: 50px;
justify-content: right;
flex-direction: row-reverse;
}
.account-name > p{
font-size: 16px;
letter-spacing: 1pt;
margin: 0 10px;
}
.account-name > h6{
font-size: 24px;
letter-spacing: 1pt;
margin-left: 5px;
font-weight: 700;
margin: 0 10px;
}
/*---------------------------------------------------------------*/
/*biginner
-----------------------------------------------------------------*/
#biginner{
background-image: url("../beginner/images/bg-main.jpg");
background-size: cover;
}
.biginner-content{
margin-top: 100px;
width: 100vw;
max-width: 1500px;
margin: 0 auto;
height: 12800px;
}
.bg-flow{
margin-top: 80px;
}
.flow{
width: 100vw;
height: 200px;
margin: 0 300px 0 240px;
z-index: 1000000;
}
.flow-wrapper{
position: relative;
display: flex;
margin-bottom: 100px;
}
.number-back{
background-color: #ff9284;
background-position: left 20% bottom 10%;
border-radius: 50%;
width: 83px;
height: 83px;
margin-left: 210px;
position: absolute;
}
.number{
font-size: 25pt;
color: #fff;
z-index: 10000;
}
.table-ttl{
font-size: 18pt;
font-weight: 500;
letter-spacing: 1pt;
}
.table-lead{
font-size: 12pt;
font-weight: 500;
letter-spacing: 1pt;
line-height: 30px;
}
table{
margin-left: 2px;
height: 160px;
}
.flow-table_b{
height: 195px;
}
/*過ごし方
----------------------------------------*/
.life-grid{
display: grid;
grid-template-columns: 750px 750px;
grid-template-rows: 600px 600px;
margin-top: 150px;
margin-bottom: 350px;
}
.grid-item{
width: 750px;
height: 600px;
}
.grid-item_a{
width: 750px;
height: 600px;
background-color: #f9d0c6;
}
.grid-item_b{
width: 750px;
height: 600px;
background-color: rgba(94,151,208,0.7);
color: #fff;
}
.grid-item_a > h1 , .grid-item_b > h1{
font-size: 18pt;
font-weight: 500;
letter-spacing: 1pt;
padding-bottom: 45px;
margin: 180px 200px 0 200px;
}
.grid-item_a > p , .grid-item_b > p{
font-size: 12pt;
font-weight: 500;
letter-spacing: 1pt;
line-height: 35px;
margin: 0 200px;
}
/*料金案内
------------------------------------------*/
.fukidasi{
background-image: url("../beginner/images/fukidasi.png");
background-position: right;
width: 1040px;
height: 130px;
}
.fukidasi > p{
text-align: right;
padding-right: 25px;
padding-top: 50px;
}
.price-list{
margin-top: 60px;
}
.price > h4 , .price > h5 , .price > h6 {
font-size: 18pt;
font-weight: 700;
letter-spacing: 2pt;
width: 750px;
height: 100px;
text-align: center;
padding-top: 30px;
}
.price > h4{
background-color: #f9d0c6;
}
.price > h5{
background-color: #fff;
}
.price > h6{
background-color: rgba(94,151,208,0.6);
}
.lead{
width: 1500px;
height: 150px;
background-color:rgba(255,146,132,0.6);
}
.lead > p{
font-size: 18pt;
font-weight: 700;
text-align: center;
letter-spacing: 2pt;
padding-top: 50px;
}
.drinkbar{
background-image: url("../beginner/images/bg-drink.png");
width: 750px;
height: 300px;
}
.price-wrapper{
display: flex;
}
.drinkbar-price > h3{
font-size: 18pt;
font-weight: 700;
text-align: center;
padding-top: 100px;
letter-spacing: 2pt;
}
.drinkbar-price > p{
font-size: 10pt;
font-weight: 400;
text-align: center;
padding-top: 70px;
padding-left: 165px;
letter-spacing: 1pt;
}
/*mou会員
----------------------------------------------*/
.mouclub{
margin-top: 300px;
}
.mouclub-catch_img{
text-align: center;
}
.mouclub-lead{
text-align: center;
margin-bottom: 50px;
}
.mouclub-lead > p{
font-size: 12pt;
font-weight: 700;
letter-spacing: 1pt;
line-height: 45px;
}
.mouclub-lead > p > span{
font-size: 9pt;
}
.sub-ttl > p{
font-size: 20pt;
font-weight: 500;
text-align:center;
}
.mouclub-list > h4, .mouclub-list > h5,.mouclub-list > h6{
font-size: 12pt;
font-weight: 700;
height: 125px;
letter-spacing: 1pt;
padding-top: 50px;
padding-left: 560px;
}
.mouclub-list{
text-align: left;
}
.mouclub-list > h4{
background-color: #f9d0c6;
}
.mouclub-list > h5{
background-color: #fff;
}
.mouclub-list > h6{
background-color: rgba(94,151,208,0.6);
}
.mouclub-img{
margin-top: 150px;
margin-bottom: 200px;
text-align: center;
}
/*質問
------------------------------------------*/
.cat-qa{
margin-bottom: 400px;
}
.qa-fukidasi{
text-align: center;
background-image: url("../beginner/images/hukidasi-q&a.png");
background-position: center;
height: 118px;
}
.qa-fukidasi > p{
font-size: 15pt;
padding-top: 33px;
font-weight: 500;
}
.cat-qa_memo{
display: flex;
justify-content: space-around;
margin-bottom: 200px;
margin-top: 90px;
}
.qa-img_a{
background-image: url("../beginner/images/memo-1.png");
width: 310px;
height: 333px;
position: relative;
cursor: pointer;
}
.qa > p{
letter-spacing: 2pt;
font-size: 12pt;
font-weight: 500;
text-align: center;
position: absolute;
margin: 160px 33px;
}
.qa-img_b{
background-image: url("../beginner/images/memo2.png");
width: 290px;
height: 297px;
position: relative;
cursor: pointer;
}
.shop-qa_memo{
display: flex;
justify-content: space-around;
margin-bottom: 200px;
margin-top: 90px;
}
.qa_b > p {
letter-spacing: 2pt;
font-size: 12pt;
font-weight: 500;
text-align: center;
position: absolute;
margin: 119px 33px;
}
.qa-end{
text-align: center;
margin-bottom: 100px;
}
.qa-end > p{
font-size: 12pt;
font-weight: 500;
line-height: 40px;
letter-spacing: 2pt;
}

/*質問モーダルウィンドウ
--------------------------------------------*/
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.question_a{
margin: 0 auto;
padding: 150px 36px;
}
.question_b{
margin: 0 auto;
padding: 120px 30px;
}
.modal{
height: 100vh;
position: fixed;
top: 0;
width: 100%;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
display: none;
}
.modal__bg{
background: rgba(255,255,255,0.3);
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content_a{
background: #f9d0c6;
left: 50%;
padding: 75px 50px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 45%;
height: 40%;
text-align: center;
}
.modal__content_b{
background: #97c3ee;
left: 50%;
padding: 75px 50px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 45%;
height: 40%;
text-align: center;
}
.modal__content_a > p , .modal__content_b > p{
letter-spacing: 2pt;
font-size: 12pt;
font-weight: 400;
color: #000;
line-height: 40px;
}
.js-modal-close > p{
padding-top: 40px;
display: block;
color: #fff;
font-weight: 500;
font-size: 16pt;
}
.js-modal-open > p{
color: #000;
letter-spacing: 2px;
font-weight: 500;
}


/*モバイル版
-------------------------------------------------------*/
@media screen and (min-width: 375px)and ( max-width:415px) {
/*　画面サイズが375pxから414pxまではここを読み込む　*/

/*HEADER
--------------------------*/
.header{
width: 100%;
}

/*Swiperで動きを付ける各背景画像（各スライド）の読み込み*/
.swiper-container .main01{
background-image: url("../home/images/main-1.jpeg");
 background-size: cover;
}
.swiper-container .main02{
display: none;
}
.swiper-container .main03{
background-image: url("../home/images/main-3.jpeg");
 background-size: cover;
}
.swiper-container .main04{
display: none;
}
.swiper-wrapper .swiper-slide{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}
.home-container{
position: relative;
width: 100%;
height: 100vh;
z-index: 10;
text-align: center;
}
.ribon {
max-width: 100vw;
display: flex;
position: absolute;
z-index: 1000;
bottom:0;
left: 50%;
transform: translateX(-50%)
}
/*home
---------------------------------*/
.home-container{
width: 100%;
}
header > .header{
width: 100%;
}
.content{
height: 6280px;
width: 100%;
}
.home-container{
width: 100%;
}
.home-catch{
text-align: center;
margin-top: 100px;
width: 100%;
flex-direction: column;
display: flex;
}
.bonjour-box{
display: none;
}
.cat-img_a{
display: none;
}
.catch{
width: 340px;
height: 200px;
margin-top: 5px;
}
.catch p{
padding: 15px;
margin: 0 50px;
font-size: 16px;
font-weight: 500;
}
.effeltower{
width: 140px;
height: 230px;
}
.effeltower > img{
width: 50%;
margin-left: 160px;
}
/*メインバナー
--------------------------------------------------*/
.main-bnr{
height: 1700px;
width: 100%;
flex-direction: column;
}
.mv-box{
display: flex;
height: 510px;
width: 100%;
align-items: center;
}
.mv-img_a{
display: none;
width: 480px;
height: 480px;
}
.mv-ttl{
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
width: 560px;
height: 360px;
}
.nekowaku-ttl {
background-image: url("../home/images/nekowaku.png");
background-repeat: no-repeat;
width: 100%;
height: 230px;
text-align: center;
background-position: center;
background-size: 80%;
margin-left: 0;
}
.nekowaku-ttl h2{
font-size: 23px;
font-weight: 700;
margin: 89px 0 0 10px;
}
.nekowaku-ttl h3{
font-size: 13px;
font-weight: 500;
}
.mv-info{
text-align: center;
margin-left: 0;
}
.mv-info p{
font-size: 16px;
font-weight: 500;
}
/*ボタン
--------------------------*/
.button {
font-size: 16px;
    font-weight: 500;
    background: #ff9284;
    border-radius: 35px;
    padding: 10px;
    margin-left: 30%;
    margin-top: 24px;
    width: 152px;
    text-align: center;
    cursor: pointer;
}
.button > a > p{
color: #000;
}
.button:hover {
 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
 border-color: transparent;
}
/*メインバナー　box_b
--------------------------------*/
.mv-box_b{
display: flex;
justify-content: center;
flex-direction: row-reverse;
height: 700px;
width: 100%;
align-items: center;
}
.mv-img_b{
display: none;
}
.mv-info_b{
text-align: center;
}
.mv-info_b p{
font-size: 16px;
font-weight: 500;
}
/*ボタンのスタイル*/
.Toggle {
position: absolute;
right:3px;
top: 3px;
width: 45px;
height: 45px;
cursor: pointer;
z-index: 13;
display: block;
}
/*猫が歩く動画
-----------------------------------*/
.catwalk-mov{
width: 100%;
height: 630px;
}
.catwalk-mov > img{
width: 50%;
height: 50%;
margin-top: 0;
}
.catwalk-mov video{
width: 100%;
height: 210px;
}
/*猫の足跡画像（縦）
----------------------------------------*/
.catwalk-mov img{
max-height: 765px;
width: 30%;
margin-top: 0;
}
.catwalk-img_b {
background-image: url("../home/images/cat-walk-2.png");
background-repeat: no-repeat;
background-position: right;
background-size: 30%;
height: 423px;
}
.catwalk-img_d {
background-image: url("../home/images/cat-walk-2.png");
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
height: 765px;
margin-top: 80px;
margin-left: 290px;
}
/*猫枠タイトル　中央配置組
----------------------------*/
.nekowaku-ttl_box{
width: 100%;
height: 230px;
text-align: center;
background-image: url("../home/images/nekowaku.png");
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
flex-direction: column;
display: flex;
position: relative;
margin-bottom: 75px;
}
.nekowaku-ttl_box h2{
font-size: 23px;
font-weight: 700;
margin-top: 88px;
}
.nekowaku-ttl_box h3{
font-size: 13px;
font-weight: 500;
padding-top: 10px;
}
.cat-img_b {
position: absolute;
bottom:0;
right: 3%;
width: 15%;
}
.cat-img_c{
position: absolute;
bottom:0;
left: 2%;
width: 12%;
}
/*NEWS
-----------------------------------*/
.news{
display: flex;
    justify-content: unset;
    flex-direction: column;
    width: 375px;
    height: 1521px;
    max-height: 1519px;
}
.news-box{
width: 375px;
    height: 567px;
}
.white-sircle{
background: #fff;
height: 550PX;
display: flex;
margin: 0;
border-radius: 0;
width: max-content;
}
.news-lead{
width: 100vw;
max-width: 600px;
height: 450px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 0px;
margin-left: 0px;
}
.news-day{
background-image: url(../home/images/nikukyu.png);
background-repeat: no-repeat;
    background-position: bottom 4px left 7px;
    height: 128px;
    max-height: 150px;
    width: 43%;
    position: relative;
    margin-left: 25px;
}
.news-day p{
font-size: 20px;
    font-weight: 500;
    margin-left: 40px;
    position: absolute;
    margin-top: 84px;
}
.news-ttl{
margin-left: 12px;
    margin-top: 88px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    position: relative;
}
.news-content{
width: 375px;
    height: 200px;
}
.news-content p{
font-size: 16px;
    font-weight: 400;
    line-height: 33PX;
    padding-left: 58px;
}
.news-img{
width: 375px;
    max-width: 375px;
    height: 190px;
    text-align: center;
}
.news-img img{
margin-top: 0px;
width: 50%;
}
/*猫紹介
-----------------------------------*/
.home-catlist{
height: 250px;
    width: 100vw;
    text-align: center;
    margin-top: 0px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-height: 1322px;
}
#catlist-button{
margin: 63px 111px;
}
.button-catwalk{
background-image: url(../home/images/catwalk-1.png);
background-repeat: no-repeat;
    background-position: left;
    height: 434px;
    margin-left: 0px;
    background-size: 30%;
}
/*猫紹介　スライダー
---------------------*/
.smooth img ,.smooth_b img{
width: 271px;
padding: 20px 10px;
cursor: pointer;
}
/*猫動画
-----------------------*/
.movie {
    text-align: center;
    position: relative;
    height: 290px;
    width: 375px;
    outline: none;
    border: none;
    background-image: url(../home/images/movie-flame3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 375px 260px;
}
.movie > video{
margin-top: 41px;
width: 375px;
    height: 205px;
}
.movie > .cat-img_d{
position: absolute;
margin-top: 6%;
margin-left: 0%;
}
/*バナー
----------------------------------*/
.home-bnr {
height: 140px;
display: flex;
    margin-top: 160px;
    text-align: center;
    justify-content: space-evenly;
}
.company-bnr > a > h4, .contact-bnr > a > h4{
font-weight: 700;
    font-size: 10px;
    display: block;
    margin: 49px 0 0 37px;
    color: #000;
}
.sns-bnr > a > h4{
font-weight: 700;
    font-size: 10px;
    display: block;
    margin: 49px 0 0 49px;
    color: #000;
}
.sns-bnr{

width: 30%;
height: 0;
    margin: 0 0 21px 0;
    cursor: pointer;
    
}
.company-bnr{

width: 30%;
  height: 0;
    margin: 0 0 21px 0;
    cursor: pointer;
    
}
.contact-bnr{

width: 30%;
height: 0;
margin: 0px;
cursor: pointer;

}
.contact-bnr > a > h4:visited{
    color: #000;
}
.sns-bnr > a > h4:visited{
    color: #000;
}
.company-bnr > a > h4:visited{
    color: #000;
}

/*フッター
-----------------------------------------------------*/
.footer-bg {
    position: relative;
    background-repeat: no-repeat;
    background-size: none;
    background-size: 439px 197px;
    min-height: 0;
    background-position: bottom;
    height: 199px;
    }
.footer-nav{
position:absolute;
display: flex;
text-transform: uppercase;
list-style: none;
margin-top: 90px;
right:10px;
text-align: center;
width: 840px;
height: 39px;
justify-content: center;
}
.footer-nav li{
margin: 0 20px;
}
.footer-nav a{
display: none;
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 5px;
transition: all .3s ease 0s;
}
nav{
height: 15px;
}
.footer-nav h3{
display: none;
}
.copyright{
color: #fff;
text-align: center;
position:absolute;
margin: 0 auto;
bottom:17px;
left:152px;
}
small{
font-size: 50%;
}
#pagetop a {
    width: 50px;
    height: 50px;
}
#pagetop {
 position: fixed;
 right: 0;
    left: 321px;
    bottom: 43px;
    margin: 0;
}
/*conceptトップページ
--------------------------------------*/
.main-bg{
background-image: url("../concept/images/concept-main.jpeg");
background-size: cover;
background-position: center;
width: 100%;
}
.main-ttl{
right: 0px;
bottom: 35px;
}
/*conceptキャッチ
-------------------------------*/
.concept-catch{
display: none;
}
/*concept内容全体
--------------------------------*/
.concept-content{
width: 100%;
height: 4100px;
display: block;
}
/*concept内容
---------------------------------*/
.concept-box_a, .concept-box_b{
width: 100%;
height: 700px;
display: block;
}
.concept-box_b{
flex-direction: row-reverse;
}
.concept-img > img{
border-radius: 20%;
width: 250px;
margin-left: 80px;
}
/*文字や背景、装飾の箱
-----------------------------------*/
.concept-info{
 width:100%;
 height: 450px;
}
.concept-infobox{
display: flex;
}
.catwalk-img_d {
display: none;
}
.catwalk-mov_b {
    width: 100%;
    height: auto;
}
.catwalk-mov_b video {
    width: 100%;
    height: 231px;
}
.biginner-bnr{
    width: 50%;
    height: auto;
    cursor: pointer;
    position: relative;
    background-image: url("../concept/images/concept-bgicon.png");
    background-size: 100%;
}
.biginner-bnr > a > h6 {
    font-size: 10px;
    font-weight: 500;
    position: absolute;
    margin-left: 44px;
    margin-right: 0px;
    margin-top: 102px;
    color: #fff;
}
.biginner-bnr > a > h5 {
    font-size: 20px;
    font-weight: 700;
    margin-left: 52px;
    margin-right: 70px;
    margin-top: 74px;
    position: absolute;
     color: #fff;
}
.bnr{
height: auto;
margin-top:50px;
}
/*contact*/
.contact-content {
    height: 1170px;
}
.form {
    margin-left: 0%;
    margin-bottom: 120px;
}
/*BIGINNER*/
.ttl > h2 {
    font-size: 20px;
    padding-bottom: 0px;
}
.flow-wrapper {
    position: relative;
    display: grid;
    margin-bottom: 0px;
}
.flow {
    width: 353px;
    height: 240px;
    margin: 2px 0 0 22px;
    z-index: 1000000;
}
.number-back {
    width: 50px;
    height: 50px;
    margin-left: 3px;
}
.number {
    font-size: 16pt;
    color: #fff;
    z-index: 10000;
    width: 40px;
    height: 37px;
}
table {
    width: 352px;
    height: 160px;
}
.table-ttl {
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: 1pt;
}
.table-lead {
    font-size: 8pt;
    font-weight: 500;
    letter-spacing: 1pt;
    line-height: 20px;
    margin-top: 10px;
    padding-top: 0;
}
.number {
    width: 40px;
    height: 37px;
    font-size: 16pt;
}
.ttl_a > h2 {
    font-size: 14pt;
    }
.ttl_a > h2 >span {
    font-size: 21pt;
    }
.life-grid {
    grid-template-columns: 0;
    grid-template-rows: 0;
    margin-top: 60px;
    margin-bottom: 0;
    display: block;
}
.grid-item {
    display: none;
}
.grid-item_a {
    width: 100%;
    height: 249px;
}
.grid-item_b {
    width: 100%;
    height: 249px;
}
.grid-item_a > h1, .grid-item_b > h1 {
    font-size: 16pt;
    font-weight: 500;
    padding: 38px 0px 0 35px;
    margin: 0;
}
.grid-item_a > p, .grid-item_b > p {
    font-size: 10pt;
    line-height: 29px;
    padding: 10px 39px;
    margin: 0;
}
.fukidasi > p {
    text-align: right;
    padding-right: 8px;
    padding-top: 32px;
    font-size: 9pt;
}
.fukidasi {
    background-position: right;
    width: 332px;
    height: 87px;
    background-size: 37%;
}
.price-ttlbox{
margin-top: 100px;
}
.price-wrapper {
    display: block;
}
.price > h4, .price > h5, .price > h6 {
    font-size: 16pt;
    width: 100%;
    height: 85px;
    padding-top: 23px;
}
.lead > p {
    font-size: 11pt;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2pt;
    padding-top: 38px;
}
.lead {
    width: 100%;
    height: 111px;
}
.price-list {
    margin-top: 20px;
}
.drinkbar-price > h3 {
    font-size: 16pt;
   padding-top: 100px;
}
.drinkbar {
    width: 100%;
    height: 287px;
}
.mouclub {
    margin-top: 100px;
}
.mouclub-lead > p {
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 1pt;
    line-height: 35px;
}
.mouclub-lead > p > span {
    font-size: 5px;
}
.sub-ttl > p {
    font-size: 16pt;
}
.mouclub-list > h4, .mouclub-list > h5, .mouclub-list > h6 {
    font-size: 9pt;
    width: 100%;
    height: 86px;
    padding-top: 29px;
    padding-left: 0px;
}
.mouclub-img {
    margin-top: 100px;
    margin-bottom: 200px;
}
.qa-end > p {
    font-size: 7pt;
    line-height: 19px;
    margin-top: 50px;
}
.qa-end {
margin-bottom: 30px;
}
.qa-fukidasi > p {
    font-size: 12pt;
    padding-top: 35px;
    font-weight: 500;
}
.qa-fukidasi {
    height: 106px;
    background-size: 50%;
}
.cat-qa_memo,.shop-qa_memo {
    display: block;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 10%;
}
.cat-qa_memo,.shop-qa_memo {
    display: block;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0%;
}
.qa-img_a{
    background-image: none;
    width: 100%;
    height: 123px;
    position: relative;
}
.qa-img_b {
    background-image: none;
    width: 100%;
    height: 100px;
    position: relative;
}

.question_a {
    margin: 0;
    padding: 35px 47px;
    background-color: #ff9284;
}
.question_b {
    margin: 0;
    padding: 35px 47px;
    background-color: rgba(94,151,208,0.6);
}


.cat-qa {
    margin-bottom: 100px;
}
.biginner-content {
    height: auto;
}
.modal__content_a {
padding: 100px 10px;
top: 50%;
width: 100%;
height: 53%;
}
.modal__content_a > p, .modal__content_b > p {
    line-height: 39px;
    font-size: 9pt;
}
.modal__content_b {
    padding: 100px 10px;
    top: 50%;
    width: 100%;
    height: 57%;
}
/*access*/
.access{
background-image: none;
width: 375px;
height: 250px;
margin: 0;
}
.access-item_a {
position: none;
margin-left: 0;
}
.access-item_b span {
    border-bottom: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 60px;
    padding-right: 78px;
}
.access-item_b p {
    padding-left: 32px;
}
.access-map > .cat-img_d {
    height: 0px;
    background-image: none;
    background-position:  0;
}
.access-map {
    height: 545px;
}
#access {
    background-position: right 18% top 10%;
}
.shop-map {
    width: 100%;
    margin: 0 auto;
}
.train-car_access {
    height: 515px;
    display: block;
}
.train-car_access {
    height: 500px;
    display: block;
}
.access-content {
    width: 100vw;
    height: 1680px;
}
.tc-access_box_a {
    background-color: #fdcdc3;
    width: 375px;
    height: 242px;
}
.tc-access_box_b {
    background: #fba197;
    width: 375px;
    height: 241px;
}
.keito-cat {
    background-image:none;
    margin: 0;
    width: 0;
    height: 0;
}
.tc-access_info span {
    font-size: 16px;
    font-weight: 700;
    padding-left: 23px;
    line-height: 0pt;
}
.tc-access_info p {
    font-size: 16px;
    font-weight: 500;
    padding-left: 23px;
    line-height: 48pt;
}
/*catlist*/
.catlist-box {
    display: block;
    justify-content: center;
    margin: 30px 23px;
}
.catlist-card_a {
    margin: 30px 30px;
}
.catlist-card_b {
    margin: 30px 30px;
}
.catlist-content {
    height: 6779px;
}
/*SNS*/
#sns{
background-position: right 10% top 10%;
}
.timeline-box {
    display: none;
}
.timeline-catch{
text-align: center;
    margin-top: 100px;
    margin-bottom: 150px;
}
.sns-infottl_box {
    display: none;
    justify-content: space-around;
    height: 0px;
    background-image: none;
    background-position: 0%;
}
.sns-info {
    display: block;
    justify-content: space-around;
}
.sns-lead {
    margin-left: 10px;
    margin-top: 85px;
    margin-bottom: 100px;
}
.qr-wrapper {
    display: flex;
    margin-top: 100px;
    margin-left: 50px;
}
.twitter-infobox {
    display: block;
    background-color: rgba(94,151,208,0.2);
    width: 375px;
    height: 2036px;
}
.sns-lead_b {
    margin-left: 10px;
    margin-top: 85px;
    margin-bottom: 100px;
}
.sns-lead_b > p {
    font-size: 13px;
    letter-spacing: 2pt;
    line-height: 25pt;
    font-weight: 500;
}
.insta-infobox {
    display: block;
    background-color: rgba(250,179,180,0.2);
    width: 375px;
    height: 2048px;
}
.sns-lead_c {
    margin-left: 0px;
    margin-top: 55px;
    margin-bottom: 101px;
}
.sns-lead > p {
    font-size: 13px;
    letter-spacing: 2pt;
    line-height: 25pt;
    font-weight: 500;
}
.insta-infobox {
    display: block;
    background-color: rgba(250,179,180,0.2);
    width: 375px;
    height: 1947px;
}
.sns-content {
    width: 100vw;
    height: 4555px;
}
.main-ttl > h2 {
    font-size: 20px;
}
#recruit{
background-position: left 30% top;
}
.timeline-catch > h2 {
    font-size: 23px;
    }
/*contact*/
.contact-content p {
    font-size: 17px;
}
/*company*/
.company {
    height: 850px;
    margin-top: 55px;
}
.company-list {
    position: absolute;
    width: 100vw;
    height: 450px;
    display: flex;
}
.company-list_b {
    position: absolute;
    margin-left: 0px;
}
.company-list_a p {
    font-size: 16px;
    font-weight: 500;
    line-height: 45pt;
    border-bottom: solid 3px #FEA296;
    width: 173px;
}
.company-list_b p {
    font-size: 15px;
    font-weight: 500;
    line-height: 45pt;
    margin-left: 170px;
    border-bottom: solid 3px #FEA296;
}
.map {
    width: 375px;
    margin-left: 0%;
    margin-top: 413px;
}
.ttl > h2 {
    font-size: 20px;
    margin: 20px 0 50px 0;
    height: 30px;
}
.bg-flow {
    margin-top: 30px;
}
.recruit-info_catch_a, .recruit-info_catch_b {
    margin: 100px 34px;
}
.recruit-info_box_a p {
    width: 292px;
    font-size: 16px;
    font-weight: 500;
    padding-top: 20px;
    letter-spacing: 1pt;
    line-height: 40px;
}
.recruit-info_box_a {
    display: block;
    justify-content: flex-end;
    margin-bottom: 0px;
    position: relative;
}
.recruit-back_a {
    background: none;
}
.recruit-info_box_b {
    display: block;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: 200px;
}
.recruit-info_box_b p {
    width: 450px;
    font-size: 14px;
    font-weight: 500;
    padding-top: 20px;
    letter-spacing: 1pt;
    padding-left: 0px;
    line-height: 40px;
}
.recruit-info_box_a p {
    font-size: 14px;
}
.recruit-back_b {
    width: 0px;
    height: 0px; 
    position: absolute;
    margin-top: 0px;
margin-left: 0px;
}
.recruit-info_box_b span {
    font-size: 19px;
    letter-spacing: 1pt;
}
.recruit-info {
    height: 1535px;
}
.schedule-box p {
    font-weight: 400;
    font-size: 12px;
}
.fukidasi-b {
    font-size: 16px;
    font-weight: 400;
    background-position: center bottom -40%;
    height: 82px;
    background-size: 47%;
}
#piechart > img {
    margin: 0 auto;
    height: 334px;
    
}
#piechart {
    height: 0px;
    margin-top: 40px;
}
.schedule-info {
    font-size: 10px;
    font-weight: 400;
    text-align: right;
    margin-right: 0px;
    margin-top: 350px;
}
.schedule {
    height: 787px;
}
.interview-box {
    margin-top: 90px;
    height: 1100px;
    display: block;
}
.interview-lead {
    margin-top: 60px;
    margin-left: 0px;
    line-height: 27pt;
}
.interview-back {
    width: 375px;
    height: 289px;
    background-color: #fff;
    opacity: 70%;
    z-index: 10000;
    position: relative;
}
.interview-img_a {
    height: 279px;
    width: 375px;
    background-image: url(../recruit/images/recruit-3.jpeg);
     margin-top: 0px;
    right: 0;
    background-position: center;
    background-size: 375px;
}
.interview-box_b {
    height: 1100px;
    display: block;
    flex-direction: row-reverse;
}
.interview-img_b {
    width: 375px;
    height: 279px;
    margin-top: 0px;
    background-position: center;
    background-size: 375px;
}
.interview-img_c {
    background-image: url(../recruit/images/recruit-5.jpeg);
    width: 375px;
    height: 279px;
    position: absolute;
    right: 0;
    background-position: center;
    background-size: 375px;
    margin: 0;
}
.interview-box_b {
    height: 620px;
    display: block;
    flex-direction: row-reverse;
}
.interview-box {
    margin-top: 90px;
    height: 620px;
    display: block;
}
.interview-lead > h2 {
    color: #ff9284;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
}
.interview-lead > h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1pt;
    padding: 5px 0;
}
.interview-lead p {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1pt;
}
.sub-ttl > h3 {
    font-size: 16px;
    margin: 70px 0 5px 0;
    text-align: left;
}
.oubo-item_a {
    width: 375px;
    height: 248px;
    background-color: rgba(250,179,180,0.6);
}
.oubo-item_lead_a, .oubo-item_lead_b, .oubo-item_lead_c, .oubo-item_lead_d, .oubo-item_lead_e, .oubo-item_lead_f, .oubo-item_lead_g, .oubo-item_lead_h {
    margin-left: 0px;
    margin-top: 0px;
}
.oubo-item_lead_a h3, .oubo-item_lead_b h3, .oubo-item_lead_c h3, .oubo-item_lead_d h3, .oubo-item_lead_e h3, .oubo-item_lead_f h3, .oubo-item_lead_g h3, .oubo-item_lead_h h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-top: 5px;
}
.oubo-item_lead_a p, .oubo-item_lead_b p, .oubo-item_lead_c p, .oubo-item_lead_d p, .oubo-item_lead_e p, .oubo-item_lead_f p, .oubo-item_lead_g p, .oubo-item_lead_h p {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 22pt;
}
.oubo-item_b {
    background-image: url(../recruit/images/saiyou1.png);
    width: 375px;
    height: 248px;
    right: 0;
    background-position: center;
}
.oubo-b_group {
    display: block;
}
.oubo-item_c {
    width: 375px;
    height: 173px;
    background-color: #feaba1;
}
.oubo-item_d {
    width: 375px;
    height: 173px;
    background-color: rgba(250,179,180,0.3);
}
.oubo-item_e {
    width: 375px;
    height: 248px;
    background-color: rgba(94,151,208,0.6);
}
.oubo-item_f {
    width: 375px;
    height: 248px;
    background-image: url(../recruit/images/saiyou2.png);
    right: 0;
    background-position: bottom;
}
.oubo-item_g {
    width: 375px;
    height: 173px;
    background-color: #5e97d0;
}
.oubo-item_h {
    width: 375px;
    height: 173px;
    background-color: rgba(94,151,208,0.3);
}
.oubo-lead p {
    font-size: 13px;
    font-weight: 500;
    line-height: 2;
}
.oubo {
    height: 1952px;
}
.company-content {
    width: 100vw;
    height: 7700px;
}
.oubo-a_group {
    display: block;
}
.oubo-lead {
    height: 250px;
    margin-top: 39px;
}
}
/*Air pad版
-------------------------------------------------------*/
@media screen and (min-width: 700px) and ( max-width:1000px) {
 /*　画面サイズが700pxから900pxまではここを読み込む　*/

.white-sircle{
background: #fff;
    border-radius: 50%;
    max-width: 600px;
    height: 600px;
    display: flex;
    margin: 28px 88px;
    }
    .news{
    display: block;
    width: 100%;
    height: 2040px;
    justify-content: center;
    max-height: none;
    }
    .nekowaku-ttl {
    background-image: url(../home/images/nekowaku.png);
    width: 377px;
    height: 230px;
    margin-left: 19px;
}
    .nekowaku-ttl_box{
    margin-top: 0px;
    margin-bottom: 57px;
    }
    .button-catwalk{
    margin-left: 0;
    }
    .home-catlist{
    height: 664px;
    }
    #catlist-button {
    margin: 0px 320px;
    }
    .movie > .cat-img_d {
    position: absolute;
    margin-left: 2%;
}
.cat-img_d {
    margin-top: 8%;
}
.content {
    height: 9837px;
    width: 100%;
    max-width: 100%;
}
.home-bnr {
    height: auto;
    width: 100%;
    display: flex;
    margin-top: 787px;
    text-align: center;
}
.sns-bnr {
    background-size: contain;
    margin: 0 0px;
}
.contact-bnr{
background-size: contain;
    margin: 0 0px;
}
.company-bnr {
    background-size: contain;
    margin: 0 16px;
}
.sns-bnr > a > h4, .company-bnr > a > h4, .contact-bnr > a > h4 {
    font-weight: 700;
    font-size: 20px;
    display: block;
    margin: 111px 70px;
    color: #000;
}
.footer-bg {
    background-size: contain;
    height: 300px;
}
.footer-bg {
    position: relative;
    background-image: url(../home/images/footer.jpeg);
    min-height: 0;
    background-size: cover;
    background-position: center top;
    width: 100%;
}
.footer-nav{
display: none;
}
.footer{
height: 300px;
}
.copyright {
    color: #fff;
    text-align: center;
    position: absolute;
    margin: 0 auto;
    bottom: 20px;
    left: 390px;
}
.cat-img_c {
    position: absolute;
    bottom: 0;
    left: 19%;
}
.cat-img_b {
    position: absolute;
    bottom: 0;
    right: 19%;
}
.button {
    font-size: 16px;
    font-weight: 500;
    background: #ff9284;
    border-radius: 35px;
    padding: 18px;
    margin-left: 139px;
    width: 153px;
    text-align: center;
    cursor: pointer;
}
.swiper-container .main01{
    background-image: url("../home/images/main-1.jpeg");
}
.swiper-container .main02{
    background-image: url("../home/images/main-2.jpeg");
    background-position: right 25% bottom 20%;
}
.swiper-container .main03{
    background-image: url("../home/images/main-3.jpeg");
}
.swiper-container .main04{
    background-image: url("../home/images/main-4.jpeg");
    background-position: right 25% bottom 20%;
}
}