@charset "utf-8";
/* CSS Document */


/*--------------------------------------
　Category
---------------------------------------*/


/*------------
481px--Category
------------*/

#category {
  margin: 0;
  padding: 25px;
}

#category .headArea {
  margin: 0 0 25px;
}

#category .headArea h2 {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 10px;
}

#category ul.indexList {
}

#category .indexList li {
  margin: 0 0 25px;
  padding: 25px;
  border: 1px solid #D5D5D5;
}

#category .indexList h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 15px;
}

#category .indexList h2 a {
  text-decoration: none;
  color: #444444;
}

#category .indexList p.lead {
  margin: 0 0 20px;
  font-size: 13px;
}

#category .indexList .botLink {
  background: #B5B5B5;
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0 0 45%;
  padding: 8px 0 10px;
  text-align: center;
  text-decoration: none;
  width: 55%;
}


/*------------
481px--Category1
------------*/
#cat1Head{
position: relative;
}

#cat1Head #header{
position: relative;
z-index: 10;
overflow: hidden;
margin: 20px 20px 60px;
padding: 0 0 50px;
height: auto;
background: url(./img/cat1_bg.png) 50% 0 no-repeat #fee4e5;
background-size: cover;
border-radius:20px;
}
#cat1Head #header::before{
width: 0;
height: 0;
background: none;
border: none;
}
#cat1Head #header::before{
content: "";
position: absolute;
top: 67px;
left: calc(50% - 980px);
width: 620px;
height: 374px;
background: url("./img/cat1_ph1.jpg") 0 0 no-repeat;
background-size: 620px auto;
border-radius:40px;
}
#cat1Head #header::after{
content: "";
position: absolute;
top: 67px;
left: calc(50% + 360px);
width: 620px;
height: 374px;
background: url("./img/cat1_ph2.jpg") 0 0 no-repeat;
background-size: 620px auto;
border-radius:40px;
}



#cat1Head #header .logo{
position: absolute;
top: 15px;
left: 15px;
width: 234px;
height: 72px;
margin: 0;
padding: 10px 0 0;
background: #fff;
border-radius:10px;
}
#cat1Head #header .logoImg{
width: 200px;
margin: 0 auto;
}


#cat1Head .areaInner{
width: 620px;
}
#cat1Head .mainArea{
margin: 30px 0 15px;
padding: 20px 0 30px;
background: #fff;
border-radius:40px;
text-align: center;
}
#cat1Head .mainArea .catch .fuki{
position: absolute;
top:-35px;
left: -85px;
width: 80px;
height: 80px;
padding: 20px 0 0;
background: url("./img/vis_fuki.png") 0 0 repeat-x;
background-size: auto 80px;
color: #fff;
font-size:2.0rem;
}
#cat1Head .mainArea .catch{
display: inline-block;
margin: 0 0 20px;
padding: 0 0 15px;
font-size:3.0rem;
color: #f3707d;
}
#cat1Head .mainArea .catch::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: url("./img/dot6_gr.png") 0 0 repeat-x;
background-size: auto 6px;
}
#cat1Head .mainArea h1{
font-size:3.6rem;
letter-spacing: 2px;
}
#cat1Head .mainArea h1 .fontS{
display: block;
margin: 0 0 10px;
font-size:2.8rem;
}
#cat1Head .mainArea h1 .fontCol{
color: #f3707d;
}
#cat1Head .areaInner p{
padding: 0 30px 30px;
}
#cat1Head .btn-internal{
position: absolute;
z-index: 100;
bottom: -50px;
left: calc(50% - 200px);
margin: 0px auto!important;
}
#cat1Head .btn-internal a{
width: 400px;
padding: 14px 50px 16px;
font-size:1.8rem;
}
#cat1Head .btn-internal a::before{
background: url("./img/arrow_down.svg") 99% calc(50% - 0px) no-repeat;
background-size: 20px auto;
}
#cat1Head .btn-internal a::after{
content: "";
position: absolute;
top: 0;
left: 18px;
width: 55px;
height: 100%;
background: url("./img/vis_heart.png") 0 50% no-repeat;
background-size: 55px auto;
}


/*  End_PC */




@media screen and (max-width: 480px) {

/*------------
Category--480px
------------*/

/*------------
Category1--480px
------------*/

#cat1Head #header{
position: relative;
z-index: 10;
overflow: hidden;
margin: 0 0 50px;
padding: 0 3% 30px;
height: auto;
background: #fee4e5;
border-radius:0;
}
#cat1Head #header::before{
width: 0;
height: 0;
background: none;
border: none;
}
#cat1Head #header::after{
width: 0;
height: 0;
background: none;
border: none;
}


#cat1Head #header .logo{
position: static;
width: 164px;
height: 50px;
margin: 10px auto 20px;
padding: 8px 0 0;
background: #fff;
border-radius: 10px;
}
#cat1Head #header .logoImg{
width: 140px;
margin: 0 auto;
}


#cat1Head .areaInner{
width: auto;
padding: 0 2%;
}
#cat1Head .mainArea{
margin: 30px 0 15px;
padding: 15px 0 20px;
background: #fff;
border-radius:25px;
text-align: center;
}
#cat1Head .mainArea .catch .fuki{
position: absolute;
top:-35px;
left: -50px;
width: 61px;
height: 61px;
padding: 18px 0 0;
background: url("./img/vis_fuki.png") 0 0 repeat-x;
background-size: auto 61px;
color: #fff;
font-size:1.6rem;
}
#cat1Head .mainArea .catch .fuki .fontS{
font-size:1.3rem;
}
#cat1Head .mainArea .catch{
display: inline-block;
margin: 0 0 10px;
padding: 0 0 15px;
line-height: 1.3;
font-size:2.3rem;
color: #f3707d;
}
#cat1Head .mainArea .catch .fontS{
font-size:2.0rem;
}
#cat1Head .mainArea .catch::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: url("./img/dot6_gr.png") 0 0 repeat-x;
background-size: auto 6px;
}
#cat1Head .mainArea h1{
padding: 0 5%;
font-size:3.3rem;
letter-spacing: 2px;
}
#cat1Head .mainArea h1 .fontS{
display: block;
margin: 0 0 5px;
font-size:2.5rem;
}
#cat1Head .areaInner p{
padding: 0 0 30px;
}
#cat1Head .btn-internal{
position: absolute;
z-index: 100;
bottom: -30px;
left: 7%;
width: 86%;
margin: 0px auto!important;
}
#cat1Head .btn-internal a{
width: auto;
padding: .5em 12% .6em;
font-size:1.6rem;
}
#cat1Head .btn-internal a::before{
background: url("./img/arrow_down.svg") 99% calc(50% - 0px) no-repeat;
background-size: 18px auto;
}
#cat1Head .btn-internal a::after{
content: "";
position: absolute;
top: 0;
left: 14px;
width: 40px;
height: 100%;
background: url("./img/vis_heart.png") 0 50% no-repeat;
background-size: 40px auto;
}

}
/* End_SP */