@charset "utf-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

BabySpoon CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

/* Content
----------------------------------------------- */
body {
	background: #FFF;
}

#container img {
	display: block;
	width: inherit;
	margin: 0 auto;
}
#container p {
	text-align: center;
	font-size: 16px;
	line-height: 2.2;
	color: #3A5F91;
}
#container p span {
	display: block;
}
#container .mm {
	margin-bottom: 32px;
}
#container .mm2 {
	margin-bottom: 77px;
}
.slide_selector_outer {
	width: 80%;
	height: auto;
	margin: 0 auto;
}
.slick-slide img {
	padding: 5px;
	box-sizing: border-box;
}
#container .icon {
	width: 55px;
	height: auto;
	margin: 19px auto 32px;
}
#container .sp {
	display: block;
}
p.txt {
	width: 650px;
	margin: 50px auto;
}

#wrapper .main_img {
	position: relative;
	background-size: cover;
	z-index: 2;
	margin: 0 0 50px;
}

#wrapper .main_img .img_slider {
	width: 100%;
	height: auto;
}
#wrapper .main_img .img_slider li img {
	width: 100%;
	height: auto;
}

.toptxt {
	margin: 0 0 70px;
}
.toptxt span {
	font-weight: bold;
}

h2 {
	margin: 0 auto 50px;
}
#container h2 img {
	width:248px;
}


/*
top ringlist
*/
.ringWrap,
.stoneWrap {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.stoneWrap {
	margin-bottom: 40px;
}
.ringWrap .ringBox {
	width: 33.3%;
	box-sizing: border-box;
	float: left;
	margin: 0 0 70px;
}
#container .ringWrap .ringBox img {
	width: 100%;
	margin: 0 0 32px;
}
#container .ringWrap .ringBox h3 {
	text-align: center;
}
#container .ringWrap .ringBox h3 img {
	width: inherit;
	margin: 0 auto;
}
#container .ringWrap .ringBox p {
	margin: 3px 0 21px;
	padding: 0 20px;
    font-size: 14px;
    line-height: 2;
}
#container .ringWrap .ringBox a img {
	width: 151px;
	margin: 0 auto;
}

/*
top stonelist
*/
.stoneWrap .stoneBirth,
#container .stoneWrap .stoneImg {
	width: 50%;
	float: right;
}
.stoneWrap .stoneBirth {
	padding: 8% 0 0;
	display: table;
}
.stoneWrap .stoneBirth table {
	width: 424px;
	font-size: 16px;
	line-height: 2.2;
	color: #3A5F91;
}
.stoneWrap tr:last-child td.month,
.stoneWrap tr:last-child td.stonename,
.stoneWrap tr:last-child td.stonetxt {
	border-bottom: none;
}
.stoneWrap td.month,
.stoneWrap td.stonename,
.stoneWrap td.stonetxt {
	border-bottom: solid 1px #E1E7EE;
}

.stoneWrap td.month {
	padding: 8px 30px 8px 0;
}
.stoneWrap td.stonename {
	padding: 8px 30px 8px 0;
}
.stoneWrap td.stonetxt {
	padding: 8px 0;
}


/*
design
*/
.design #container h2 img {
	width: 300px;
}
.design .outer_box1 {
	width: 200px;
	margin: 0 auto 40px;
	padding: 0 80px 0 0;
	background: url(../../baby-ring/shr/img/design/backimg_1.gif) no-repeat right;
}
.design .outer_box1_2 {
	width: 200px;
	margin: 0 auto 40px;
	padding: 0 80px 0 0;
	background: url(../../baby-ring/shr/img/design/backimg_2.gif) no-repeat 208px;
}
.design p.box {
	border: #2B5387 solid 2px;
	padding: 5px 10px;
	font-size: 20px !important;
}
.design .outer_box2 {
	width: 400px;
	margin: 0 auto 40px;
	padding: 0 80px 0 0;
	background: url(../../baby-ring/shr/img/design/backimg_1.gif) no-repeat right;
}
.design .outer_box2_1 {
	width: 400px;
	margin: 0 auto 40px;
	padding: 0 80px 0 0;
	background: url(../../baby-ring/shr/img/design/backimg_2.gif) no-repeat 408px;
}


body.baby-ring.design div#selectEstimate {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
body.baby-ring.design div#selectEstimate h2 {
	text-align: center;
	font-size: 21px;
	color: #8fb0d1;
}

body.baby-ring.design div.price table {
	margin:0 auto 20px;
}
body.baby-ring.design div.price table.two {
	margin:0 auto 40px;
}
body.baby-ring.design div#selectEstimate table {
	width: 60%;
	margin: 0 auto;
	color: #3A5F91;
	font-size: 16px;
}
body.baby-ring.design div#selectEstimate table tr th {
	width: 35%;
	vertical-align: top;
}
body.baby-ring.design div#selectEstimate table tr th,
body.baby-ring.design div#selectEstimate table tr td {
	padding: 0 0 10px;
}
body.baby-ring.design div#selectEstimate table tr td {
	line-height:2;
}
body.baby-ring.design div#selectEstimate table tr td select {
	border: 1px solid #DDD;
}
body.baby-ring.design div#selectEstimate table span.required {
	color:#FF6600;
}

body.baby-ring.design div#selectEstimate .description {
	font-size:90%;
	color:#FF6600;
	line-height:1.4;
	margin-bottom:5px;
}
body.baby-ring.design .estimateField .checkbox {
	width:50%;
	float:left;
}
body.baby-ring.design p.att {
	font-size: 80% !important;
	width: 90%;
	margin: 0 auto 5px;
}

body.baby-ring.design div#selectEstimate #sidebar {
	text-align:center;
    margin-top: 30px;
}
body.baby-ring.design div#selectEstimate #sidebar h3 {
	font-size: 21px;
	color: #8fb0d1;
    margin-bottom: 10px;
}
body.baby-ring.design div#selectEstimate #sidebar dl {
	text-align:center;
}
body.baby-ring.design div#selectEstimate #sidebar dt,
body.baby-ring.design div#selectEstimate #sidebar dd {
	display:inline-block;
    font-size: 150%;
}



.flow h2.mainTtl {
	font-weight: bold;
	margin: 50px 0;
	color: #3A5F91;
	text-align: center;
	font-size: 16px;
}
.flow ul.flow {
	width: 800px;
	margin: 0 auto 50px;
	color: #3A5F91;
	text-indent: -1rem;
}
.flow ul.flow li {
	margin-left: 1rem;
	margin-bottom: 5px;
}
.flow ul.flow li.ttl {
	font-weight: bold;
	margin: 15px 0;
}

/* PageTopNav
----------------------------------------------- */
#wrapper .pagetop_btn {
	position: fixed;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, .63);
	width: 73px;
	height: 73px;
	display: block;
	z-index: 3;
}/*
#wrapper .pagetop_btn.fixed {
	position: fixed;
	top: 56px;
}*/
#wrapper .pagetop_btn:before,
#wrapper .pagetop_btn:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 17px;
	background: #FFF;
	margin: -9px 0 0 -7px;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#wrapper .pagetop_btn:after {
	margin: -9px 0 0 5px;
	
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
input[type=submit].send_btn,
input[type=button].send {
	display: block;
	border:solid 1px #ccc;
	padding:10px 40px;
	margin:0 auto 20px;
	font-family:Arial, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;
	color:#333;
	cursor:pointer;
	font-weight: normal;
}
input[type=button].send {
	margin: 5px auto 0;
}
/* Design
----------------------------------------------- */
.baby-ring.design #container .main {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 50px;
}
.baby-ring.design #container .main img.visual,
.baby-ring.design #container .main .leftBox {
	float: left;
}
.baby-ring.design #container .main img.visual {
	width: 50% !important;
}
.baby-ring.design #container .main .leftBox {
	width: 50%;
	padding: 0 5%;
	box-sizing: border-box;
}
.baby-ring.design #container .main .leftBox p.ttl span {
	display: block;
	font-size: 20px;
}
.baby-ring.design #container .main .leftBox img {
	width: 100% !important;
	height: auto;
}
.baby-ring.design #container .main .leftBox p.txt {
	width: 100%;
	margin: 30px 0 0;
	text-align: left;
}
.baby-ring.design h2.frist {
	margin: 80px auto;
}
.baby-ring.design .display {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 70px;
}
.baby-ring.design .display dl {
	width: 33.333%;
	float: left;
	padding: 0 1px;
  box-sizing: border-box;
}
.baby-ring.design .display dl dt {
	width: 100%;
}
.baby-ring.design .display dl dd {
	margin: 20px 0 0;
	background: url(../../baby-ring/shr/img/design/thor/flower_bg.gif) left top no-repeat;
	background-size: 40px;
	min-height: 105px;
}
.baby-ring.design .display dl dd p {
	text-align: left !important;
	padding: 0 20px 0 55px;
  box-sizing: border-box;
}
.baby-ring.design .price {
	margin: 50px 0 0;
}
.baby-ring.design .price h2 span {
	margin-top: 30px;
	padding: 15px 0 0;
	display: block;
	text-align: center;
	font-size: 21px;
	color: #8fb0d1;
}
.baby-ring.design .price table {
	width: 400px;
	border: #8fb0d1 solid 1px;
	border-left: none;
	border-right: none;
}
.baby-ring.design .price table tr th,
.baby-ring.design .price table tr td {
	vertical-align: middle;
	padding: 10px 0;
	margin: 0;
}
.baby-ring.design .price table tr th {
	width: 250px;
	padding-left: 10px;
	border: #8fb0d1 solid 1px;
	border-left: none;
}
.baby-ring.design .price table tr td {
	border-bottom: #8fb0d1 solid 1px;
	text-align: right;
	border-bottom: #8fb0d1 solid 1px;
}
.baby-ring.design .price table.one tr:first-child th,
.baby-ring.design .price table.one tr:first-child td {
	text-align: center;
}
.baby-ring.design .price table.two {
	border-top: none;
}
.baby-ring.design .price table.two tr:first-child th {
	border: none;
}
.design-list h2 {
	margin: 50px 0 40px;
}

.formBtnWp{
	border-radius: 30px;        /* CSS3草案 */  
    -webkit-border-radius: 30px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 30px;
		background:#97BEDD;
		width:400px;
		margin:50px auto 20px;
	}
	
.formBtnWp p{
	color:#FFF !important;
	text-align: center !important;
	padding:10px;
	}	
	
.formBtnWp a{
	display:block;
	}		


@media screen and (max-width: 1100px) {
.stoneWrap .stoneBirth table {
	margin: 0 0 0 20px;
}
}
@media screen and (max-width: 950px) {

/*
top stonelist
*/
	.stoneWrap .stoneBirth {
	    padding: 0;
	}
	.stoneWrap .stoneBirth table {
		width: 90%;
	}
	.stoneWrap td.month {
		padding: 8px 10px 8px 0;
	}
	.stoneWrap td.stonename {
		padding: 8px 10px 8px 0;
	}
	.baby-ring.design .display {
		width: 90%;
		margin: 0 auto 20px;
	}
	.baby-ring.design .display dl {
		width: 100%;
		float: none;
		padding: 0 1px;
		box-sizing: border-box;
	}
	.baby-ring.design h2 {
		margin: 0 auto 30px;
	}
	.flow ul.flow {
		width: 90%;
		margin: 0 auto 50px;
		color: #3A5F91;
		text-indent: -1rem;
	}
	
	body.baby-ring.design div#selectEstimate table {
		width: 90%;
	}
}

/*
------------------------------------------------------------------------------------------------------------------ Tablet */

@media screen and (max-width: 900px) {
	.toptxt {
		padding: 0;
	}
	h2 img {
		width:248px;
	}
	
	
	
	/*
	top stonelist
	*/
	
	#container .stoneWrap .stoneImg {
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}	
	.stoneWrap .stoneBirth {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.stoneWrap .stoneBirth table {
		width: 100%;
		margin: 0;
	}
	.stoneWrap td.month {
		width: 70px;
		padding: 8px 0 8px 0;
	}
	.stoneWrap td.stonename {
		padding: 8px 30px 8px 0;
	}
	.stoneWrap td.stonetxt {
		padding: 8px 0;
	}
	
	.formBtnWp{
		margin:50px auto 50px;
	}
	
}


/*
------------------------------------------------------------------------------------------------------------------ TabletPortrait */

@media screen and (max-width: 768px) {
	#container {
		padding: 20px 10px 0;
		box-sizing: border-box;
	}
	#container img {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	#container p span {
		width: 80%;
		margin: 0 auto 32px;
	}
	#wrapper .pagetop_btn {
		display: none;
	}
	
	/*
	top ringlist
	*/
	.ringWrap {
		margin: 0 0 50px;
	}
	.ringWrap .ringBox {
		width: 100%;
		box-sizing: border-box;
		float: left;
		margin: 0 0 50px;
	}
	#container .ringWrap .ringBox h3 {
		text-align: center;
	}
	#container .ringWrap .ringBox h3 img {
		width: 104px;
		margin: 0 auto;
	}
	#container .ringWrap .ringBox p {
		margin: 3px 0 21px;
		padding: 0 20px 30px;
		font-size: 14px;
		line-height: 2;
	}
	#container .ringWrap .ringBox a img {
		width: 70%;
		margin: 0 auto;
	}
	/*
	Design
	*/
	.baby-ring.design h2.frist {
		margin: 40px auto;
	}
	body.baby-ring.design div#selectEstimate table tr th {
		width: 45%;
	}
	body.baby-ring.design .estimateField .checkbox {
		width:100%;
		float:none;
	}
	
}


/*
------------------------------------------------------------------------------------------------------------------ SmartPhone */

@media screen and (max-width: 414px) {
	.slide_selector_outer {
		width: 100%;
	}
	#container p {
		text-align: left;
		line-height: 1.6;
		font-size: 16px;
	}
	.toptxt {
		margin: 0 0 30px;
		text-align: center;
	}
	.toptxt span {
	font-weight: bold;
			text-align: center;
}
	#container .sp {
		display: none;
	}
	.slick-arrow {
		display: none !important;
	}
	p.txt {
		width: 100%;
		margin: 30px auto;
	}
	p.txt.last {
		width: 100%;
		margin: 30px auto 0;
	}
	.stoneWrap .stoneBirth table {
		font-size: 14px;
	}
	.stoneWrap .stoneBirth {
		width: 100%;
		padding: 0;
	}
	.stoneWrap td.month {
		width: 50px;
		padding: 8px 0 8px 0;
	}
	.stoneWrap td.stonename {
		padding: 8px 20px 8px 0;
	}
	.stoneWrap td.stonetxt {
		padding: 8px 0;
	}
	/*
	design
	*/
	.design-list h2 {
		margin: 30px 0;
	}
	.design #container h2 img {
		width: 60%;
	}
	.baby-ring.design #container .main {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto 50px;
	}
	.baby-ring.design #container .main img.visual {
		margin: 0 0 30px;
	}
	.baby-ring.design #container .main img.visual,
	.baby-ring.design #container .main .leftBox {
		float: none;
	}
	.baby-ring.design #container .main img.visual {
		width: 100% !important;
	}
	.baby-ring.design #container .main .leftBox {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
	}
	.baby-ring.design #container .main .leftBox p.ttl span {
		width: 100%;
		padding: 10px 0 0;
		text-align: center;
		display: block;
		font-size: 20px;
	}
	.baby-ring.design #container .main .leftBox img {
		width: 100% !important;
		height: auto;
	}
	.baby-ring.design #container .main .leftBox p.txt {
		width: 100%;
		margin: 30px 0 0;
		text-align: left;
	}
	.baby-ring.design h2.frist {
		margin: 20px auto 30px;
	}
	.baby-ring.design .price table {
		width: 100%;
	}
	.baby-ring.design .price table tr th {
		width: 70%;
	}
	
	body.baby-ring.design div#selectEstimate table tr th,
	body.baby-ring.design div#selectEstimate table tr td {
    	width: 100%;
    	display:block;
    }
	
	.baby-ring.design p.formButton {
		text-align: center !important;
		margin-bottom:30px;
	}
	/*
	flow
	*/
	.flow ul.flow {
		width: 100%;
		margin: 0 auto 50px;
		color: #3A5F91;
		text-indent: inherit;
	}
	.flow ul.flow li {
		margin-left: 0;
		margin-bottom: 5px;
	}
	
	.formBtnWp{
	width:100%;
	}
	.weddingBanner,.crownBanner,.moominparkBanner {
		margin: 20px 0;
	}
}