@charset "utf-8";

/* ==================================================================================
/
/  moomin  CSS
/
================================================================================== */

.index .moominLpWp {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.babyring .moominLpWp {
	width: 100%;
	max-width: 480px;
	margin: 50px auto 0;
}
/* index
------------------------------------------------------------------------------------*/
.index .moominLpWp p {
	margin: 50px auto;
}
.index .moominLpWp p img {
	width: 100%;
	height: auto;
}
.index .moominLpWp p.banner01 {
	width: 40%;
}
.index .moominLpWp p.banner02 {
	width: 70%;
}
.index .moominLpWp p.banner03{
	width: 43%;
}
.index .moominLpWp p.banner04 {
	width: 55%;
}
.index .moominLpWp p.banner05 {
	width: 48%;
	font-size: 24px;
	line-height: 2;
	color: #6E9BC5;
}
.index .moominLpWp p.banner06 {
	width: 8%;
}
.index .moominLpWp p.banner07 {
	width: 45%;
}
.index .moominLpWp p.banner08 {
	width: 45%;
}
.index .moominLpWp p.banner08_1 {
	width: 400px;
}
.index .moominLpWp p.banner09 {
	width: 25%;
}
.index .moominLpWp p.banner10 {
	width: 50%;
}
.index .moominLpWp p.banner11 {
	width: 35%;
}
.index .moominLpWp p.banner12 {
	width: 27%;
}
.index .moominLpWp p.banner13 {
	width: 37%;
}
.index .moominLpWp p.banner14 {
	width: 50%;
}
.index .moominLpWp p.banner15 {
	width: 60%;
}
.index .moominLpWp p.banner16 {
	width: 40%;
}
.index .moominLpWp p.banner17 {
	width: 40%;
}

.index .moominLpWp .imgWp {
	width: 400px;
	margin: 50px auto;
}
a.btn {
	width: 170px;
	padding: 20px 0;
	display: block;
	margin: 0 auto 50px;
	border-radius: 40px;
	text-align: center;
	background: #F7C9DD;
	font-size: 24px;
	color: #FFF !important;
}

/* babyring
------------------------------------------------------------------------------------*/

.babyring .block img {
	width: 100%;
	height: auto;
	margin: 0 0 50px;
	display: block;
}
.babyring .block img.main {
	width: 120% !important;
	margin-left: -10%;
}
.babyring .block img.ttlImg {
	width: 105%;
	margin-left: -25px;
}
img.ttl {
	width: 40% !important;
	margin: 0 auto 50px !important;
}
.babyring .block img.ttl_man {
	width: 45%;
	margin: 0 auto 50px;
}
.babyring .block.num1 img {
	width: 100%;
}
.babyring .block p {
	width: 100%;
	margin: 0 0 50px;
	font-size: 24px;
	line-height: 2;
	color: #6E9BC5;
}
.moominLpWp .block a {
	width: 170px;
	padding: 20px 0;
	display: block;
	margin: 0 auto 50px;
	border-radius: 40px;
	text-align: center;
	background: #F7C9DD;
	font-size: 24px;
	color: #FFF !important;
}
.babyring .block.num3 table {
	width: 424px;
	margin: 0 auto 50px;
	font-size: 16px;
	line-height: 2.2;
	color: #3A5F91;
	border-top: solid 1px #E1E7EE;
}
.babyring .block.num3 td.month,
.babyring .block.num3 td.stonename,
.babyring .block.num3 td.stonetxt {
	border-bottom: solid 1px #E1E7EE;
}
.babyring .block.num3 td.month {
	padding: 8px 30px 8px 0;
}
.babyring .block.num3 td.stonename {
	padding: 8px 30px 8px 0;
}
.babyring .block.num3 td.stonetxt {
	padding: 8px 0;
}

.babyring .block.num4 img {
	width: 23%;
}
.babyring.detail .inner {
	width: 80%;
	margin: 0 auto;
}

.babyring.detail img.ttlSmall.left {
	width: 110%;
	margin-left: -60px;
}
.babyring.detail .block.num2 .inner img.ttlSmall.left {
		margin-left: -45px;
}
.babyring.detail img.ttlSmall.right {
	width: 110%;
}

.babyring .block.num1 img.ttlSmall.right {
	width: 105%;
}

.price {
	width: 400px;
	margin: 50px auto 0;
}
.price h2 span {
	margin-top: 30px;
	padding: 15px 0 0;
	display: block;
	text-align: center;
	font-size: 21px;
	color: #8fb0d1;
}
.price table {
	width: 400px;
	border: #8fb0d1 solid 1px;
	border-left: none;
	border-right: none;
	border-collapse: collapse;
	border-spacing: 0;
	color: #666;
}
.price table.one {
	margin-bottom: 20px;
}
.price table tr th,
.price table tr td {
	vertical-align: middle;
	padding: 10px 0;
	margin: 0;
	font-weight: normal;
	line-height: 1.4;
	font-size: 14px;
}
.price table tr th {
	width: 250px;
	padding-left: 10px;
	border: #8fb0d1 solid 1px;
	border-left: none;
}
.price table tr td {
	border-bottom: #8fb0d1 solid 1px;
	text-align: right;
}
.price table.one tr:first-child th,
.price table.one tr:first-child td {
	text-align: center;
}
.price table.two {
	border-top: none;
}
.price table.two tr:first-child th {
	border: none;
}
.babyring .block .priceChanger {
    color: #FF0004;
    font-weight: bold;
    margin: 20px auto;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
}
.sns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	max-width: 800px;
	margin: 50px auto;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;
}
.sns li {
	width: 16%;
	padding: 0 20px;
}
.sns li span {
	color: #35518E;
	display: block;
	margin-top: 5px;
	text-align: center;
}



/* babyring detail
------------------------------------------------------------------------------------*/

.babyring.detail .price_att {
	font-size: 12px;
	color: #777;
}
.babyring.detail a.btnLinks {
    border-radius: 40px;
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px;
    background:#F7C9DD;
    width:400px;
    margin:50px auto 20px;
    display: block;
    padding: 20px 0;
    text-align: center;
    font-size: 20px;
    color: #FFF;
}
#campaign {
  max-width: 800px;
  margin: 40px auto;
  border: #6e9bc5 solid 2px;
  border-radius: 10px;
  padding: 20px;
}
#campaign img {
    display: block;
    max-width: 600px;
    width: 100%;
    margin: 0 auto 20px;
}
#campaign h2 {
    font-size: 1.2rem;
    padding: 10px 0;
    background: #6e9bc5;
    color: #FFF;
    text-align: center;
}
#campaign p {
    text-align: left;
    font-size: 1rem;
    color: #6e9bc5;
    margin: 25px 0 0 !important;
}
#campaign p span {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #34699b;
}

#campaign .brSp {
    display: none;
}
@media (max-width: 560px) {
    #campaign p span {
        margin-bottom: 10px;
    }
    #campaign .brSp {
        display: block;
    }
    #campaign p {
		font-size: 0.8rem !important;
        margin: 20px 0 0 !important;
    }
    #campaign h2 {
        padding: 5px 10px;
        font-size: 6.5vw;
    }
    #campaign {
        margin: 20px 0 40px;
        padding: 10px 10px 20px 10px;
        border: #6e9bc5 solid 1px;
    }
}
@media (max-width: 480px) {
	.sns li {
		width: 33%;
		padding: 0;
	}
	.sns li img {
		width: 80%;
		height: auto;
	}
	.index .moominLpWp p.banner16 {
		width: 60%;
	}
	.index .moominLpWp p.banner17 {
		width: 60%;
	} 
}
@media screen and (max-width: 414px) {
    .babyring .block .priceChanger {
        font-size: 0.8rem !important;
    }

    .index .moominLpWp,
    .babyring .moominLpWp {
        padding: 0 10px;
        box-sizing: border-box;
    }
	
	/* index
------------------------------------------------------------------------------------*/
	.index .moominLpWp {
		padding: 0 10px;
		box-sizing: border-box;
	}
	.index .moominLpWp p {
		margin: 50px auto;
	}
	.index .moominLpWp p img {
		width: 100%;
		height: auto;
	}
	.index .moominLpWp p.banner01 {
			width: 60%;
	}
	.index .moominLpWp p.banner02 {
		width: 100%;
	}
	.index .moominLpWp p.banner03 {
		width: 63%;
	}
	.index .moominLpWp p.banner04 {
		width: 75%;
	}
	.index .moominLpWp p.banner05 {
		width: 100%;
		font-size: 18px;
		line-height: 2;
		color: #6E9BC5;
	}
	.index .moominLpWp p.banner06 {
		width: 20%;
	}
	.index .moominLpWp p.banner07 {
		width: 80%;
	}
	.index .moominLpWp p.banner08 {
		width: 80%;
	}
	.index .moominLpWp p.banner08_1 {
		width: 90%;
		margin-bottom: 20px;
	}
	.index .moominLpWp p.banner09 {
		width: 55%;
	}
	.index .moominLpWp p.banner10 {
		width: 70%;
	}
	.index .moominLpWp p.banner11 {
		width: 55%;
	}
	.index .moominLpWp p.banner12 {
		width: 47%;
	}
	.index .moominLpWp p.banner13 {
		width: 57%;
	}
	.index .moominLpWp p.banner14 {
		width: 80%;
	}
	.index .moominLpWp p.banner15 {
		width: 100%;
	}
	.index .moominLpWp .imgWp {
		width: 90%;
		margin-bottom: 20px;
	}
	.babyring .block img.main {
		width: 100% !important;
		margin-left: 0;
	}
	.babyring .block img.ttlImg {
		width: 100%;
		margin-left: 0;
	}
    .babyring.detail .inner {
		width: 100%;
		margin: 0 auto;
	}
	.babyring.detail img.ttlSmall.left,
		.babyring.detail .block.num2 .inner img.ttlSmall.left {
		width: 100%;
		margin-left: 0px;
	}
	.babyring .block.num1 img.ttlSmall.right,
	.babyring.detail img.ttlSmall.right {
		width: 100%;
	}
	.moominLpWp p {
		width: 100%;
		font-size: 16px !important;
		line-height: 2;
		color: #6E9BC5;
		margin: 50px auto;
	}
	.babyring .moominLpWp a {
		width: 170px;
		padding: 20px 0;
		display: block;
		margin: 0 auto 50px;
		border-radius: 40px;
		text-align: center;
		background: #F7C9DD;
		font-size: 24px;
		color: #FFF;
	}
	.stoneBirth {
		width: 100%;
		padding: 0;
	}	
    .babyring .block.num3 table {
		width: 100%;
		font-size: 14px;
	}
	.babyring .block.num3 td.month {
		width: 50px;
		padding: 8px 0 8px 0;
	}
	.babyring .block.num3 td.stonename {
		padding: 8px 20px 8px 0;
	}
	.babyring .block.num3 td.stonetxt {
		padding: 8px 0;
	}
	.babyring .block.num4 img {
		width: 50%;
	}
	.price {
		width: 100%;
	}
	.price table {
		width: 100%;
	}
    .price table tr th {
        width: 70%;
    }
	.babyring.detail a.btnLinks {
        width:80%;
        margin: 0 auto;
        font-size: 18px;
    }
	.babyring.detail .price_att {
		font-size: 14px !important;
	}
	a.btn {
		width: 170px;
		padding: 5px 0;
		display: block;
		margin: 0 auto 50px;
		border-radius: 40px;
		text-align: center;
		background: #F7C9DD;
		font-size: 16px;
		color: #FFF !important;
	}
}