@charset "utf-8";
#familySlide img {
width: 100%;
}
#familySlide {
background-image: url("../img/family/main_bg.jpg");
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: 2.8em;
background-size: 5px auto;
margin-bottom: 5em;
}
.slick-dots {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
padding-top: 2.4em;
}
.slick-dots button {
border: none;
background-color: #c8c8c8;
border-radius:100%;
overflow: hidden;
width: 15px;
height: 0px;
line-height: 2;
padding-top: 15px;
outline: none;
margin:0 1.5vw;
}

.slick-dots .slick-active button {
background-color:#000;
}

/*familyTop*/

.inner {
max-width: 1200px;
margin: 0 auto;
}
#recom {
background-color:#ff0000;
padding: 3em 0 6em;
}
#recom h2,
#familyLowerHader h2 {
height: 0;
overflow: hidden;
line-height: 2;
background-repeat: no-repeat;
background-size: 100% auto;
margin: 0 auto;
overflow: hidden;
}
#recom h2 {
background-image: url("../img/family/pickup.png");
width: 37.91%;
padding-top: 8.5%;
margin-bottom: 2em;
}
#recom .recomWrap,
#recom .recomWrap2 {
position: relative;
width:100%;
height: 0;
background-image: url("../img/family/pickup_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
box-sizing: border-box;
overflow: hidden;
padding: 48.69% 3.9% 0 0;
}

#recom dl {
position: absolute;
left: 2.5%;
top: 5.3%;
width: 97.5%;
height: 100%;
background-image: url("../img/family/pickup_left.jpg");
background-repeat: no-repeat;
background-position: left top;
background-size:42.94%;
padding:4.8% 10% 0 47.5%;
box-sizing: border-box;
}
#recom .recomWrap2 dl {
  background-image: url("../img/family/pickup_left2.jpg");

}

.familyTop .page_link_btn {
width:100%;
}

#recom dt {
font-size:2.16vw;
letter-spacing: 0.1em;
font-weight: 900;
color: #ff0000;
line-height: 1.5;
margin-bottom: 0.8em;
}
#recom dd p:first-child,
#recom .recomWrap2 dd p:nth-child(2) {
font-size: 1.5vw;
line-height: 2;
margin-bottom: 2em;
}
#recom .recomWrap2 dd p:nth-child(2) {
  margin-bottom: 4em;
}
#recom .recomWrap2 dt {
  padding-top: 1em;
}


#recom dd p.page_link_btn a {
font-size: 1.66vw;
}
#familyContent {
background-image: url("../img/family/family_lower_indexbg.png");
background-repeat: repeat-x;
background-position: center top;

}

#familyContent ul {
max-width: 1200px;
margin: 0 auto;
position: relative;
display:flex;
flex-wrap: wrap;
justify-content:space-between;
 align-items: flex-start;
padding: 15vw 6% 8.6vw;
box-sizing: border-box;
}
#familyContent ul li {
/*position: absolute;*/
width: 40.2%;
box-sizing: border-box;
background-color: #fff;
box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.20);
-moz-box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
#familyContent ul li figure img {
width: 100%;
}
#familyContent ul li:nth-child(even) {
margin-top: 11.8vw;
}

#familyContent ul li dl {
padding:2.2em;
}
#familyContent ul li dt {
color: #ff0000;
font-weight: 900;
font-size:2.16vw;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
margin-right: -1em;
}
#familyContent ul li.cs dt {
text-align: center;
}

#familyContent ul li dd p {
font-size:1.66vw;
font-weight: 700;
}
#familyContent ul li dd p.page_link_btn {
margin-top:1.4em;
}

@media screen and (min-width:1201px) {

#recom dt {
	font-size:2.6rem;
}
#recom dd p:first-child,
#recom .recomWrap2 dd p:nth-child(2) {
	font-size:1.7rem;
}

#recom dd p.page_link_btn a {
font-size:2rem;
}
#familyContent ul {
padding: 11em 8% 9.8em;
}
#familyContent ul li:nth-child(even) {
margin-top: 11em;
}
#familyContent ul li dt {
font-size: 2.6rem;
}
#familyContent ul li dd p {
font-size:2rem;
}
}


/*challenge*/
#familyLowerHader {
background-image: url("../img/family/family_lower_h_bg.jpg");
background-repeat: repeat-x;
background-position: center top;
background-size:1200px 308px;
padding: 0.5em 0 4.37em;
}
#familyLowerHader h2 {
padding-top:94px;
width:469px;
background-image: url("../img/family/lower_ttl_pc.png");
}

#familyLowerHader dl {
background-color: #fff;
width: 37.33%;
max-width: 450px;
margin: 0 auto;
box-sizing: border-box;
text-align: center;
padding: 1.5em;
position: relative;
letter-spacing: 0.1em;
}
#familyLowerHader dl:before,
#familyLowerHader dl:after {
width: 8em;
height: 100%;
position: absolute;
left: -3.6em;
top:0;
background-color: #fff;
border-radius: 100%;
content: " ";
z-index: 0;
}
#familyLowerHader dl:after {
left: inherit;
right: -3.6em;
}

#familyLowerHader dt {
font-size: 3rem;
font-weight: 900;
color:#ff0000;
margin-bottom: 0.5em;
z-index: 5;
position: relative;
}
#familyLowerHader dd {
line-height: 1.8;
z-index: 5;
position: relative;
font-weight: 900;
}
#challengeWrap {
width: 71.66%;
max-width: 860px;
margin: 0 auto;
padding: 5em 0 0;
}

#challengeWrap dl {
position: relative;
padding-left: 53%;
padding-bottom: 6.25em;
}
#challengeWrap dl:last-child {
padding-bottom: 7.6em;
}
#challengeWrap dt {
font-size: 2.4rem;
font-weight: 900;
line-height: 1.5;
margin-bottom: 0.5em;
}
#challengeWrap dt span {
display: block;
font-size:1.4rem;
font-weight: 900;
}
#challengeWrap dd span.new,
#coloringWrap li figure span.new {
background-image: url(../img/top/new.png);
width: 54px;
padding-top: 54px;
height: 0;
position: absolute;
left: 1%;
top: 2%;
display: block;
background-size: 100% auto;
overflow: hidden;
z-index: 5;
}
#challengeWrap dd figure {
width: 48.25%;
position: absolute;
left: 0;
top: 0;
}
#challengeWrap dd figure img,
#coloringWrap li figure img {
width: 100%;
}
#challengeWrap dd p {
line-height: 1.8;
}
#challengeWrap dd p.movOpen {
line-height: 1.2;
padding-top: 1.5em;
}
#challengeWrap dd p.movOpen a:link,
#challengeWrap dd p.movOpen a:visited,
#coloringWrap p.pdf a:link,
#coloringWrap p.pdf a:visited {
border: solid 4px #ff0000;
display: block;
text-decoration: none;
color: #ff0000;
font-weight: 900;
text-align: center;
font-size: 2rem;
padding: 0.7em;
}
#challengeWrap dd p.movOpen a:hover,
#coloringWrap p.pdf a:hover,
.page_link_btn a:hover {
opacity: 0.5;
}
/*coloring*/
#coloringWrap {
width:92.5%;
max-width:1110px;
margin: 5em auto 1.25em;
}

#coloringWrap ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
/*justify-content:space-between;*/

}
#coloringWrap li {
width: 30.6%;
margin: 0 2em 6.25em;
}
#coloringWrap li figure {
position: relative;
vertical-align: bottom;
margin-bottom:1.3em;
}
#coloringWrap ul:after {
content: "";
display: block;
width: 30.6%;
height: 0;
}

.familyLower {
margin-bottom: 6.25em;
}

@media screen and (max-width: 768px) {
.sp-only {
display: block;
}
#familySlide {
	background-image: url(../img/family/main_bg_sp.jpg);
    padding-bottom: 5.6vw;
    background-size: 0.6vw auto;
    margin-bottom: 5em;
}
.slick-dots button {
width: 3.3vw;
padding-top: 3.3vw;
margin: 0 4.66vw;

}
#recom {
padding: 6.26vw 0 20vw;

}
#recom h2 {
    background-image: url(../img/family/pickup_sp.png);
    width: 76.86%;
    padding-top: 16.4vw;
    margin-bottom: 2em;
}
#recom .recomWrap,
#recom .recomWrap2 {
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
	height: auto;
	box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.20);
	-moz-box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.20);
	-webkit-box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.20);
	width: 80%;
	margin: 0 auto;
	background-image: none;
	background-color: #fff;
}
#recom .recomWrap2 {
  margin-bottom: 3em;
}
#recom .recomWrap2 dt {
  padding-top: 0;
}
#recom .recomWrap2 dd p:nth-child(2) {
  margin-bottom: 2em;
}
#recom dl {
position: inherit;
left: inherit;
top: inherit;
padding: 86.6vw 7.66vw 10vw;
width: 100%;
background-image: url("../img/family/pickup_left.jpg");
background-size: 100% auto;
}
#recom dt {
font-size:5.33vw;
}
#recom dd p:first-child,
#recom .recomWrap2 dd p:nth-child(2) {
font-size:3.46vw;
}
#recom dd p.page_link_btn a {
font-size:5vw;
}
#familyContent {
background-image: url(../img/family/family_lower_indexbg_sp.png);
background-repeat: no-repeat;
background-size: 100% auto;
}
#familyContent ul {
width:80%;
display: block;
padding: 20vw 0 14.5vw;
}
#familyContent ul li {
width: 100%;
margin: 0 0 20.6vw;
}
#familyContent ul li dl {
padding: 6.3vw 7.6vw 8vw;
}
#familyContent ul li dt {
font-size:5.33vw;
margin-bottom: 0.8em;
margin-right: 0;
}
#familyContent ul li#fc3 dt {
letter-spacing:0;
}

#familyContent ul li dd p {
font-size: 4vw;
}
#familyContent ul li dd p.page_link_btn a {
background-position: right 0.7em center;
}

#familyLowerHader {
padding-bottom: 19vw;
}
#familyLowerHader h2 {
width: 91.73%;
padding-top: 15.86%;
background-image:url("../img/family/lower_ttl_sp.png");
margin-bottom: 1em;
}
#familyLowerHader dl:before, #familyLowerHader dl:after {
    width: 10em;
	left: -4.4em;
}
#familyLowerHader dl:after {
	left: inherit;
	right: -4.4em;
}
#familyLowerHader dl {
width: 57.33%;
padding: 7vw 0;
font-size: 3.2vw;
}
#familyLowerHader dt {
font-size: 5vw;
margin: 0 -2em 0.5em;
}
#familyLowerHader dd {
margin: 0 -2em;
}
#familyLowerHader {
    background-image: url(../img/family/family_lower_h_bg_sp.jpg);
	background-size: 100% auto;
}
#challengeWrap {
width: 85.33%;
}
#challengeWrap dl{
	padding: 52.66vw 0 20vw 0;
}
#challengeWrap dd figure {
width: 100%;
}
#challengeWrap dt {
font-size:4.8vw;
}
#challengeWrap dt span {
font-size: 2.8vw;
}
#challengeWrap dd p {
font-size: 3.2vw;
}
#challengeWrap dd p.movOpen a:link, #challengeWrap dd p.movOpen a:visited, #coloringWrap p.pdf a:link, #coloringWrap p.pdf a:visited {
font-size:5vw;
border-width: 0.8vw;
}
.page_link_btn {
line-height: 1.5;
}
p.page_link_btn a, p.page_link_btn span.cs {
font-size:5vw;
padding: 0.8em;
}
#coloringWrap {
width: 86.33%;
}
#coloringWrap ul {
display: block;
}
#coloringWrap ul:after {
display: none;
}
#coloringWrap li {
width: 100%;
margin-bottom: 19vw;
margin-left: 0;
margin-right: 0;
}
}