﻿@charset "utf-8";

.page-concept4 *{
	transition:all .4s;
}

.page-concept4{
	background-image:url(../img/concept/4/kids.png);
	background-repeat:no-repeat;
	background-position:right 80px;
	background-size:50%;
}

.page-concept4 .main{
	position:relative;
}

.page-concept4 .main .inner{
	max-width:1200px;
	margin:0 auto;
	padding-bottom:2em;
}

.page-concept4 .main .concept-number{
	position:absolute;
	top:15%;
	left:47%;
}

.page-concept4 .main .concept-number img{
	width:143px;
	height:200px;
}


.page-concept4 .block{
	background:#E84552 url(../img/common/bg-red.png);
	border-radius:2em;
}

.page-concept4 .creator{
	max-width:1200px;
	margin:0 auto;
	padding:2em;
	background:#F39B3B url(../img/common/bg-red.png);
	border-radius:2em;
	color:#fff;
}

.page-concept4 .creator .left{
	float:left;
	width:52%;
}

.page-concept4 .creator .right{
	float:right;
	width:43%;
	padding:1em;
	border:2px solid #fff;
	border-radius:1em;
}

.page-concept4 .creator .left p{
	margin-top:.5em;
}

.page-concept4 .creator .right .in-left{
	float:left;
	width:25%;
}

.page-concept4 .creator .right .in-right{
	float:right;
	width:70%;
}

.page-concept4 .creator .left h3{
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size:20px;
	font-size:2rem;
	font-weight:700;
}

.page-concept4 .box3 p{
	font-weight:700;
}

@media screen and (max-width:768px) {

.page-concept4 .creator .right .in-left,
.page-concept4 .creator .right .in-right{
	float:none;
	width:100%;
}

.page-concept4 .creator .right .in-right{
	margin-top:1em;
}

.page-concept4 .creator .left h3{
	font-size:18px;
	font-size:1.8rem;
}

}

.page-concept4 .creator .right .in-left span,
.page-concept4 .creator .right .in-right p{
	font-size:11px;
	font-size:1.1rem;
}

.page-concept4 .creator .right .in-right p{
	margin-bottom:1em;
}


.page-concept4 .creator a{
	margin-top:1em;
	padding:.5em;
	background:#E84552;
	border:1px solid #fff;
	border-radius:.4em;
	color:#fff;
	transition:all .3s;
}

.page-concept4 .creator a:hover{
	background:#fff;
	color:#E84552;
}

@media screen and (max-width:768px) {
}

.page-concept4 .enjoy-wrap{
	padding:4em 0;
	margin-top:4em;
	background:#F39B3B url(../img/common/bg-red.png);
}


.page-concept4 .enjoy-wrap .box{
	padding:2em 0;
	border-radius:2em;
	background:#fff;
}

.page-concept4 .enjoy-wrap .box .box3 .left{
	float:left;
	width:50%;
}

.page-concept4 .enjoy-wrap .box .box3 .right{
	float:right;
	width:50%;
	background:url(../img/concept/4/line-dot-vertical.png) repeat-y left top;
}

.page-concept4 .enjoy-wrap .box .block-w{
	margin:2em;
}

.page-concept4 .enjoy-wrap .box .block-w h3,
.page-concept4 .enjoy-wrap .box .block h3{
	display:inline-block;
	margin-bottom:.5em;
	padding:.3em;
	font-size:22px;
	font-size:2.2rem;
	font-weight:700;
	background:#E84552;
	border-radius:10px;
	color:#fff;
	line-height:1.4;
	transform:rotate(-1deg);
	-moz-transform:rotate(-1deg);
	-webkit-transform:rotate(-1deg);
}

@media screen and (max-width:768px) {


.page-concept4 .enjoy-wrap .box .block.block3 h3 br:first-child,
.page-concept4 .enjoy-wrap .box .block.block4 h3 br:first-child{
	display:none;
}

}

.page-concept4 .enjoy-wrap .box .block-w h4,
.page-concept4 .enjoy-wrap .box .block h4{
	position:relative;
	color:#E84552;
	font-size:18px;
	font-size:1.8rem;
	font-weight:700;
	padding-bottom:.2em;
}

.page-concept4 .enjoy-wrap .box .block-w h4 span,
.page-concept4 .enjoy-wrap .box .block h4 span{
	position:relative;
	margin-left:1em;
	padding:0 .5em;
	border:1px solid #E84552;
	color:#E84552;
	font-size:12px;
	font-size:1.2rem;
	font-weight:normal;
}

.page-concept4 .enjoy-wrap .box .block h4 em,
.page-concept4 .enjoy-wrap .box .block-w h4 em{
	position:absolute;
	top:-20px;
	right:0;
}

.page-concept4 .enjoy-wrap .box .block-w.block2 h4 em{
	right:-30px;
}

@media screen and (max-width:768px) {

.page-concept4 .enjoy-wrap .box .block-w.block2 h4 em{
	right:0;
}

}

.page-concept4 .enjoy-wrap .box .block h4 em img,
.page-concept4 .enjoy-wrap .box .block-w h4 em img{
	width:50px;
	height:50px;
}

.page-concept4 .enjoy-wrap .box .block-w.block1,
.page-concept4 .enjoy-wrap .box .block-w.block2{
	margin-top:0;
}

.page-concept4 .enjoy-wrap .box .block-w.block1 p{
	margin-bottom:1em;
}

.page-concept4 .enjoy-wrap .box .block-w.block1 span{
	margin-top:.5em;
	font-size:11px;
	font-size:1.1rem;
}


.page-concept4 .enjoy-wrap .box .block-w.block2 .in-left{
	float:left;
	width:50%;
}

.page-concept4 .enjoy-wrap .box .block-w.block2 .in-right{
	float:right;
	width:50%;
}

.page-concept4 .enjoy-wrap .box .block.block3 span.sub,
.page-concept4 .enjoy-wrap .box .block.block4 span.sub{
	display:block;
	color:#E84552;
	font-size:11px;
	font-size:1.1rem;
}


.page-concept4 .enjoy-wrap .box .block3-4{
	padding:0 2em;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block3-4-inner{
	position:relative;
	padding-top:2em;
	background:url(../img/concept/4/line-dot-side.png) repeat-x left top;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block{
	background:none;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block.block3{
	float:left;
	width:47.5%;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block.block4{
	float:right;
	width:47.5%;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block.block3 h3,
.page-concept4 .enjoy-wrap .box .block3-4 .block.block4 h3{
	font-size:18px;
	font-size:1.8rem;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block.block3 p,
.page-concept4 .enjoy-wrap .box .block3-4 .block.block4 p{
	margin-bottom:1em;
}


@media screen and (max-width:1240px) {

.page-concept4{
	background-position:80% 180px;
	background-size:50%;
}

.page-concept4 .main .inner,
.page-concept4 .creator{
	max-width:94%;
}

.page-concept4 .main .inner > img {
    width:378px;
    height:200px;
}

.page-concept4 .main .concept-number{
	position:absolute;
	top:0;
	left:inherit;
	right:3%;
}

.page-concept4 .main .concept-number img{
	width:107px;
	height:150px;
}

}

@media screen and (max-width:768px) {

.page-concept4{
	background-position:80% 60px;
	background-size:50%;
}

.page-concept4 .main .inner{
	padding-bottom:1em;
}

.page-concept4 .main .inner > img{
	width:188px;
	height:100px;
}

.page-concept4 .main .concept-number img{
	width:42px;
	height:60px;
}

.page-concept4 .creator .left,
.page-concept4 .creator .right{
	float:none;
	width:100%;
}

.page-concept4 .creator .right{
	margin-top:1em;
}

.page-concept4 .creator{
	padding:1em;
	border-radius:1em;
}

.page-concept4 .creator .right .in-left img{
	width:200px;
	height:auto;
	margin:0 auto;
}

.page-concept4 .creator .right .in-right span,
.page-concept4 .creator .right .in-right h4{
	display:block;
	text-align:center;
}


.page-concept4 .enjoy-wrap{
	margin-top:2em;
	padding:1.5em 3%;
}

.page-concept4 .enjoy-wrap .box{
	max-width:100%;
	padding:1em 0;
	border-radius:1em;
}

.page-concept4 .enjoy-wrap .box .block-w.block2,
.page-concept4 .enjoy-wrap .box .block3-4 .block.block4{
	padding-top:2em;
	background:url(../img/concept/4/line-dot-side.png) repeat-x left top;
}

.page-concept4 .enjoy-wrap .box .block3-4 .block.block4{
	margin-top:2em;
}


.page-concept4 .enjoy-wrap .box .block-w.block2 .in-left,
.page-concept4 .enjoy-wrap .box .block-w.block2 .in-right,
.page-concept4 .enjoy-wrap .box .box3 .left,
.page-concept4 .enjoy-wrap .box .box3 .right,
.page-concept4 .enjoy-wrap .box .block3-4 .block.block3,
.page-concept4 .enjoy-wrap .box .block3-4 .block.block4{
	float:none;
	width:100%;
}

.page-concept4 .enjoy-wrap .box .box3 .right{
	background:none;
}



.page-concept4 .enjoy-wrap .box .block-w h3,
.page-concept4 .enjoy-wrap .box .block h3{
	font-size:18px;
	font-size:1.8rem;
	color:#fff;
}

.page-concept4 .enjoy-wrap .box .block-w h4,
.page-concept4 .enjoy-wrap .box .block h4{
	font-size:16px;
	font-size:1.6rem;
}

.page-concept4 .enjoy-wrap .box .block-w h4 span,
.page-concept4 .enjoy-wrap .box .block h4 span{
	position:relative;
	margin-left:1em;
	padding:0 .5em;
	border:1px solid #E84552;
	color:#E84552;
	font-size:13px;
	font-size:1.3rem;
	font-weight:normal;
}

}
