@charset "UTF-8";
/* sp(320px) */

/* headline */
#pageOnescubo #headline {
	background-image: url(../img/onescubo/bg_head.jpg);
}

#pageOnescubo section{
	padding:1em 0.5em 2em;
	position: relative;
}

#pageOnescubo #safety,
#pageOnescubo #material{
	background-color:#f5efed;
}

#pageOnescubo #design,
#pageOnescubo #sustainability{
background: url(../img/share/bg_grid.png) repeat;
}

#pageOnescubo #design{
	padding-bottom:2em;
}

#pageOnescubo .sp{
	display: block;
}

#pageOnescubo .pc{
	display: none;
}

#pageOnescubo .pt{
	font-size: 35px;
	font-family: 'Satisfy', cursive;
	margin-bottom: 10px;
	text-align: center;
	transform: rotate(-5deg);
}


/*concept*/

.images{
	display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.img1,.img4{
	display: block;
	width:100%;
}

.img2{
	display: flex;
	flex-wrap: wrap;
	width: 36.4185%
}

.img3{
	width: 59.4287%
}

.img1 img,.img2 img,.img3 img,.img4 img{
	display: block;
	margin:auto;
	width: 100%;
	margin-bottom: 0.9em;
}




/*title*/
#pageOnescubo .title{
	padding:0 0 1em;
}

#pageOnescubo .title p{
	text-align: center;
}

#pageOnescubo section:before{
	content: "";
display: block;
width: 1px;
height: 40px;
background-color: #333333;
position: absolute;
top: -20px;
left: 50%;
}

#pageOnescubo .name{
	font-family: 'Oswald', sans-serif;
	font-size: 35px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0;
	color:#333;
}

/*article*/
#pageOnescubo .article1,
#pageOnescubo .article2{
	display: block;
}

#pageOnescubo .article1{
	flex-direction: row-reverse;
}

#pageOnescubo .article1 .article_text,
#pageOnescubo .article2 .article_text{
	width: 100%;
	margin-top: 1em;
}

#pageOnescubo .article1 .picture,
#pageOnescubo .article2 .picture{
	display: block;
	width: 100%;
}

#pageOnescubo .article1 .subtitle,
#pageOnescubo .article2 .subtitle,
#pageOnescubo .shizen{
	position: relative;
	text-align: center;
	font-size:18px;
}

#pageOnescubo .article1 .subtitle,
#pageOnescubo .article2 .subtitle{
	font-size:22px;
}

#pageOnescubo .shizen:before,
#pageOnescubo .shizen:after{
	content: "";
    display: block;
    position: absolute;
    top: calc((100% - 30px)/2);
}

#pageOnescubo .shizen:before{
	content: url(../img/onescubo/fukidashi_left.png);
	background-repeat: no-repeat;
	left: -30px;
}

#pageOnescubo .shizen:after{
	content: url(../img/onescubo/fukidashi_right.png);
	background-repeat: no-repeat;
	right: -30px;
}

#pageOnescubo .shizen-wrapper{
	text-align: center;
	padding: 0 30px;
}

#pageOnescubo .shizen{
	text-align: center;
	display: inline-block;
	font-size:16px;
}


/* Concept */
#pageOnescubo #concept #concept_top {
	background-color: #f5efed;
	padding-top: 40px;
	padding-bottom: 0px;
}
#pageOnescubo #concept #concept_top .hl_concept {
	width:126px;
	margin-left: auto;
	margin-right: auto;
}
#pageOnescubo #concept #concept_top .msg_top {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	line-height: 2;
}

#pageOnescubo #material .list_material li {
	margin-bottom: 30px;
	flex-basis: calc(100%/2 - 3%);
	max-width: calc(100%/2 - 3%);
}
#pageOnescubo #material .list_material li .enc {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
#pageOnescubo #material .list_material li figcaption {
	padding-top: 7px;
	text-align: left;
}
#pageOnescubo #material .list_material li .bal {
	width:165px;
	margin-left: 5%;
}
#pageOnescubo #material .list_material li .name,
#pageOnescubo #material .list_material li p {
	padding-left: 10%;
}
#pageOnescubo #material .list_material li p {
	max-width: 360px;
}


/*sustainability*/

#pageOnescubo .pt2{
	position: absolute;
	top: -25px;
	left: 20px;
	font-size: 35px;
  color: #5d5a5a;
  font-family: 'Satisfy', cursive;
  margin-bottom: 0;
  transform: rotate(-5deg);
  text-align: left;
}

#pageOnescubo .point{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}

#pageOnescubo #sustainability .point > div{
	width: calc((100% - 2em)/2 - 1em);
	padding: 1em 0.5em;
	background: #f2f2f2;
	text-align: center;
	margin: 1em auto;
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.25));
}

#pageOnescubo #sustainability .point > div img{
	width: 65%;
	margin: 0.75em auto;
}

#pageOnescubo #sustainability .point > div .midashi{
	font-weight:bold;
	font-size:18px;
	margin-bottom: 0;
	line-height: 1.25;
}

#pageOnescubo #sustainability .point > div .sub-midashi{
	font-weight:bold;
	font-size:14px;
	margin-top: 0px;
margin-bottom: 5px;
}

#pageOnescubo #sustainability .point > div .maru {
	border: 2px solid #333333;
	border-radius: 30px;
	font-size: 12px;
	margin: auto 0.8em;
	font-weight: 600;
	background-color: #333333;
	color: #fff;
}

#pageOnescubo #sustainability .point > div .fukidashi{
	font-size:12px;
	color: #e2b550;
	position: relative;
	display: inline-block;
	margin-bottom: 0;
}

#pageOnescubo #sustainability .point > div .fukidashi span:before,
#pageOnescubo #sustainability .point > div .fukidashi span:after{
	content:"";
	display:block;
	width:1px;
	height:15px;
	background-color:#e2b550;
	position:absolute;
	top:20%;
}

#pageOnescubo #sustainability .point .fukidashi span:before{
		transform: rotate(-25deg);
		left:-10px;
}

#pageOnescubo #sustainability .point .fukidashi span:after{
		transform: rotate(25deg);
		right:-10px;
}

#pageOnescubo #sustainability .point .star{
	font-size: 28px;
	color: #e2b550;
	margin: -13px 0 0;
}

/*material*/



#pageOnescubo #material .point > div{
	width: 45%;
	text-align: left;
}

#pageOnescubo #material .point > div img{
	margin-bottom: 1em;
	border-radius: 50%;
}

#pageOnescubo #material .point > div p{
	font-size:12px;
}

#pageOnescubo .tleft{
	text-align: left !important;
	font-size: 12px;
}

/*design*/
#pageOnescubo #design .article{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}

#pageOnescubo #design .article > div{
	width: 100%;
	background-color: #fff;
	padding:1em 2em;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.25));
	margin-bottom:2em;
}

#pageOnescubo #design h4{
	font-size: 18px;
}

#pageOnescubo #design .article > div img{
	display: block;
	margin: auto;
}

@media handheld, print, screen and (min-width: 374px) {
/* iphone6 */

#pageOnescubo .map .link_inquiry a span br {
	display:  none;
}

/* end of media query(iphone6) */
}



@media handheld, print, screen and (min-width: 413px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */
}



@media handheld, print, screen and (min-width: 481px) {
/* tablet */

/* headline */
#pageOnescubo #headline {
	background-image: url(../img/onescubo/bg_head.jpg);
}


/* Concept */
#pageOnescubo #concept #concept_top {
	padding-top: 50px;
	padding-bottom: 10px;
}
#pageOnescubo #concept #concept_top .hl_concept {
	width:144px;
}

#pageOnescubo #concept #kids {
	padding-top: 60px;
	padding-bottom: 30px;
}

#pageOnescubo #material .list_material li .bal {
	width:165px;
}


	@media (-webkit-min-device-pixel-ratio: 2){

		#pageOnescubo #headline {
			background-image: url(../img/onescubo/bg_head@2x.jpg);
		}

	/* end of media query(retina) */
	}

/* end of media query(tablet) */
}



@media handheld, print, screen and (min-width: 621px) {
/* iPad */


/* end of media query(iPad) */
}



@media handheld, print, screen and (min-width: 801px) {
/* pc */

#pageOnescubo section{
	padding:2em 4em 4em;
	position: relative;
}

#pageOnescubo .sp{
	display: none;
}

#pageOnescubo .pc{
	display: block;
}

#pageOnescubo .pt{
	font-size: 30px;
	font-family: 'Satisfy', cursive;
	margin-bottom: 10px;
	text-align: left;
}


/* Concept */
#pageOnescubo #concept #concept_top {
	padding-top: 60px;
	padding-bottom: 20px;
}

/*concept*/

.images{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.img1,.img2,.img3,.img4{
	display: block;
}


.img1 img,.img2 img,.img3 img,.img4 img{
	display: block;
	margin:auto;
	width: 100%;
	margin-bottom: 2em;
}


.img1 {
	width: 73.52%;
}

.img2{
	width: 23.547%;
}


.img3{
	width:32.659%;
}

.img4{
	width:63.6%;
}


/*title*/
#pageOnescubo .title{
	padding:0 0 3em;
}

#pageOnescubo .title p{
	text-align: center;
}

#pageOnescubo section:before{
	content: "";
display: block;
width: 1px;
height: 50px;
background-color: #333333;
position: absolute;
top: -25px;
left: 50%;
}

#pageOnescubo .name{
	font-family: 'Oswald', sans-serif;
	font-size: 35px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0;
	color:#333;
}

/*article*/
#pageOnescubo .article1,
#pageOnescubo .article2{
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#pageOnescubo .article1{
	flex-direction: row-reverse;
}

#pageOnescubo .article1 .article_text,
#pageOnescubo .article2 .article_text{
	width: 40%;
	margin-top: 0;
}

#pageOnescubo .article1 .picture,
#pageOnescubo .article2 .picture{
	display: inline;
	width: 55%;
}

#pageOnescubo .article1 .subtitle,
#pageOnescubo .article2 .subtitle{
	text-align:left;
	font-size: 28px;
}



/* Concept */
#pageOnescubo #concept #concept_top {
	background-color: #f5efed;
	padding-top: 40px;
	padding-bottom: 0px;
}
#pageOnescubo #concept #concept_top .hl_concept {
	width:126px;
	margin-left: auto;
	margin-right: auto;
}
#pageOnescubo #concept #concept_top .msg_top {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	line-height: 2;
}

#pageOnescubo #material .list_material li {
	margin-bottom: 30px;
	flex-basis: calc(100%/2 - 3%);
	max-width: calc(100%/2 - 3%);
}
#pageOnescubo #material .list_material li .enc {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
#pageOnescubo #material .list_material li figcaption {
	padding-top: 7px;
	text-align: left;
}
#pageOnescubo #material .list_material li .bal {
	width:165px;
	margin-left: 5%;
}
#pageOnescubo #material .list_material li .name,
#pageOnescubo #material .list_material li p {
	padding-left: 10%;
}
#pageOnescubo #material .list_material li p {
	max-width: 360px;
}


/*sustainability*/

#pageOnescubo .point{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}

#pageOnescubo #sustainability .point > div{
	width: 20%;
	padding: 1em;
	background: #f2f2f2;
	text-align: center;
}

#pageOnescubo #sustainability .point > div .midashi{
	font-weight:bold;
	font-size:20px;
	margin-bottom: 5px;
}

#pageOnescubo #sustainability .point > div .sub-midashi{
	font-weight:bold;
	font-size:16px;
	margin-top: -5px;
margin-bottom: 5px;
}

#pageOnescubo #sustainability .point > div .maru {
	border: 2px solid #333333;
	border-radius: 30px;
	font-size: 15px;
	margin: auto 0.8em;
	font-weight: 600;
	background-color: #333333;
	color: #fff;
}

#pageOnescubo #sustainability .point > div .fukidashi{
	font-size:14px;
	color: #e2b550;
	position: relative;
	display: inline-block;
	margin-bottom: 0;
}

#pageOnescubo #sustainability .point > div .fukidashi span:before,
#pageOnescubo #sustainability .point > div .fukidashi span:after{
	content:"";
	display:block;
	width:1px;
	height:15px;
	background-color:#e2b550;
	position:absolute;
	top:20%;
}

#pageOnescubo #sustainability .point .fukidashi span:before{
		transform: rotate(-25deg);
		left:-10px;
}

#pageOnescubo #sustainability .point .fukidashi span:after{
		transform: rotate(25deg);
		right:-10px;
}

#pageOnescubo #sustainability .point .star{
	font-size: 36px;
	color: #e2b550;
	margin: -13px 0 0;
}

#pageOnescubo .pt2{
	position: absolute;
	top: -25px;
	left: 20px;
	font-size: 40px;
}

/*material*/



#pageOnescubo #material .point > div{
	width: calc(20% + 2em);
	text-align: left;
}

#pageOnescubo #material .point > div img{
	margin-bottom: 1em;
	border-radius: 50%;
}

#pageOnescubo #material .point > div p{
	font-size:14px;
}

#pageOnescubo .tleft{
	text-align: center!important;
	font-size: 1rem;
}

#pageOnescubo .shizen:before,
#pageOnescubo .shizen:after{
	content: "";
    display: block;
    position: absolute;
    top: 0px;
}

#pageOnescubo .shizen:before{
	content: url(../img/onescubo/fukidashi_left.png);
	background-repeat: no-repeat;
	left: -30px;
}

#pageOnescubo .shizen:after{
	content: url(../img/onescubo/fukidashi_right.png);
	background-repeat: no-repeat;
	right: -30px;
}

#pageOnescubo .shizen-wrapper{
	text-align: center;
	padding: 0 30px;
}

#pageOnescubo .shizen{
	text-align: center;
	display: inline-block;
	font-size:20px;
}

/*design*/

#pageOnescubo #design{
	padding-bottom:6em;
}

#pageOnescubo #design .article > div{
	width: calc((100% - 10em)/2);
}


/* end of media query(pc) */
}