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

BaseLayout CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
:root {
	font-size: 10px;
}


/* Header
----------------------------------------------- */
#header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #FFF;
	z-index: 10;
	
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	
	-webkit-transition: -webkit-transform 300ms ease-in-out;
	-moz-transition: -moz-transform 300ms ease-in-out;
	-ms-transition: -ms-transform 300ms ease-in-out;
	-o-transition: -o-transform 300ms ease-in-out;
	transition: -webkit-transform 300ms ease-in-out, -moz-transform 200ms ease-in-out, -o-transform 200ms ease-in-out, transform 200ms ease-in-out;
}
#header.pinned {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}

#header .sp_logo,
#header .g_nav_trigger {
	display: none;
}

#header .g_nav {
	width: 100%;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: .1em;
}


/* BabyRing */

#header .baby-ring {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border-bottom: #EEE 1px solid;
	position: relative;
	text-align: center;
	background-color: #F6F8FA;
}
#header .baby-ring li {
	display: inline-block;
	width: 120px;
}
#header .baby-ring li:first-child {
	width: 104px;
	display: block;
	position: absolute;
	top: 12px;
	left: 50%;
	margin: 0 0 0 5px;
}
#header .baby-ring li:first-child + li {
	width: 70px;
}
#header .baby-ring li:last-child {
	display: none;
}
#header .baby-ring li:first-child + li + li {
	margin-right: 0px;
}
#header .baby-ring li:first-child + li + li + li + li {
	margin: 0 0 0 160px;
}
#header .baby-ring li:first-child + li + li + li + li {
	width: 100px;
}
#header .baby-ring li:first-child + li + li + li + li + li + li {
	width: 120px;
}
#header .baby-ring li + li a {
	display: block;
	line-height: 96px;
	color: #3B5F91;
}


/* Wrapper
----------------------------------------------- */
#wrapper {
	position: relative;
}

/* Corporate */

.corporate #wrapper {
	padding: 55px 0 0;
}

/* BabyRing */

.baby-ring #wrapper {
	padding: 118px 0 0;
}


/* Container
----------------------------------------------- */
#container {
	width: 100%;
	position: relative;
}

/* Main Image */
.container .mainImg {
	max-width: 300px;
	display: block;
	height: auto;
	margin: 40px auto;
}

/* PageTopNav
----------------------------------------------- */
#wrapper .pagetop_btn {
	position: fixed;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, .63);
	width: 73px;
	height: 73px;
	display: block;
	z-index: 10;
}
#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);
}

.weddingBanner,.crownBanner,.moominparkBanner {
	max-width: 760px;
	width: calc(100% - 40px);
	height: auto;
	display: block;
	margin: 0 auto;
	border: 1px solid #b6cde2;
	border-radius: 10px;
	overflow: hidden;
}
.weddingBanner,.crownBanner {
	margin: 30px auto;
}
.weddingBanner img,
.crownBanner img,
.moominparkBanner img {
	margin: 0 !important;
}
@media (max-width: 414px) {
	.weddingBanner,.crownBanner,.moominparkBanner {
		margin: 0 20px;
	}
}

/* Footer
----------------------------------------------- */
#footer {
	margin: 60px 0 0;
	padding: 0;
	background: #EEE;
}
#footer .inner {
	max-width: 1140px;
	width: 100%;
	padding: 26px 20px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
#footer .inner .f_nav {
	width: 26%;
	float: left;
	margin: 0 0 40px 0;
	padding: 0 20px 0 0;
	border-left: #CCC 1px solid;
}
#footer .inner .f_nav .ttl {
	margin: 0 0 7px;
}
#footer .inner .f_nav .ttl,
#footer .inner .f_nav li a {
	display: block;
	padding: 2px 15px;
	font-size: 12px;
}
#footer .inner .credit {
	position: absolute;
	bottom: 26px;
	right: 20px;
}
#footer .inner .credit p {
	font-size: 10px;
	float: left;
	margin: 0 0 0 30px;
	font-weight: bold;
	letter-spacing: .1em;
}
#footer .inner .credit p:first-child {
	margin: 18px 0 0;
}
#footer .inner .credit p img {
	width: 76px;
}
.line {
	display: block;
    width: 100%;
    max-width: 644px;
    padding: 0 20px;
    margin: 60px auto;
	box-sizing: border-box;
}
.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: 130px;
	padding: 0 20px;
	text-align: center;
}
.sns li a {
	display: block;
}
.sns li img {
	width: 100%;
	margin: 0 auto;
}
.sns li span {
	color: #35518E;
	display: block;
	margin-top: 5px;
	text-align: center;
}

.otherBannerList {
  max-width: 800px;
  padding: 0 20px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.otherBannerList li {
	width: 30%;
	padding: 20px 0;
}
.otherBannerList li:nth-child(2) {
	width: 35%;
}
.otherBannerList li:nth-child(3) {
	width: 25%;
}
.otherBannerList li:nth-child(4) {
	width: 20%;
}
.otherBannerList li:nth-child(5) {
	width: 25%;
}
@media (max-width: 414px) {
	.otherBannerList li:nth-child(1) {
		margin-top: -10%;
	}
	.otherBannerList li:nth-child(2) {
		width: 40%;
	}
	.otherBannerList li:nth-child(3) {
		margin: -20% 0 0;
		width: 50%;
	} 
	.otherBannerList li:nth-child(4) {
		margin: -5% 0 0 10%;
		width: 38%;
	}
	.otherBannerList li:nth-child(5) {
		margin: -13% 0 0 10%;
		width: 30%;
	}
	.otherBannerList li:nth-child(6) {
		width: 40%;
		margin: -2% 5% 0 0;
	}
	.otherBannerList li {
		margin: 0 0 0;
		width: 50%;
	}
}

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

@media screen and (max-width: 950px) {

	/* Header
	----------------------------------------------- */
	#header {
		border-bottom: #EEE 1px solid;
		box-sizing: border-box;
	}

	#header .sp_logo {
		display: block;
		height: 80px;
		padding: 15px 20px;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		font-size: 0;
		position: relative;
	}
	#header .sp_logo a {
		display: inline-block;
	}
	#header .sp_logo img {
		width: auto;
		height: 50px;
		margin: 0 auto;
		display: block;
	}

	#header .g_nav_trigger {
		display: block;
		width: 44px;
		height: 40px;
		position: absolute;
		top: 50%;
		right: 10px;
		margin: -20px 0 0;
		z-index: 2;
		cursor: pointer;
		box-sizing: border-box;
	}
	#header .g_nav_trigger span {
		display: block;
		width: 24px;
		height: 4px;
		background: #666;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	#header .g_nav_trigger:before {
		content: "";
		position: absolute;
		top: 18px;
		left: 10px;
		background: #666;
		display: block;
		width: 24px;
		height: 4px;
	}
	#header .g_nav_trigger:after {
		content: "";
		position: absolute;
		top: 26px;
		left: 10px;
		background: #666;
		display: block;
		width: 24px;
		height: 4px;
	}

	#header .g_nav {
		width: 250px;
		height: 1500px;
		font-size: .9rem;
		position: absolute;
		top: 0;
		right: -250px;
		z-index: 15;
		background: #EEE;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#header .baby-ring li:first-child + li + li + li + li + li + li {
		width: 100%;
	}
	#header .baby-ring li:first-child + li + li + li + li + li + li + li {
		width: 100%;
	}
	#header .baby-ring li:first-child + li + li + li + li + li + li + li + li {
		width: 100%;
	}

	/* BabyRing */

	.baby-ring #header .corporate {
		display: none;
	}

	#header .baby-ring {
		width: 100%;
		padding: 0;
		border-bottom: none;
		text-align: left;
	}
	#header .baby-ring li {
		display: block;
		width: 100%;
		position: relative;
	}
	#header .baby-ring li:first-child {
		display: none;
	}
	#header .baby-ring li:last-child {
		display: block;
	}
	#header .baby-ring li:first-child + li {
		display: block;
	}
	#header .baby-ring li:first-child + li + li {
		margin-left:0;
	}
	#header .baby-ring li:first-child + li + li + li + li {
		margin: 0;
	}
	#header .baby-ring li + li a {
		line-height: 1;
		padding: 15px;
		border-bottom: #FFF 1px solid;
		width:100%;
		height:100%;
	}
	#header .baby-ring li:first-child + li a {
		position: relative;
	}
	#header .baby-ring li:last-child a:before,
	#header .baby-ring li:last-child a:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		width: 3px;
		height: 13px;
		background: #3B5F91;
		margin: -4px 0 0;

		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#header .baby-ring li:last-child a:after {
		margin: -11px 0 0;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}


	/* Wrapper
	----------------------------------------------- */

	/* Corporate */

	.corporate #wrapper {
		padding: 81px 0 0;
	}

	/* BabySpoon */

	.baby-spoon #wrapper {
		padding: 81px 0 0;
	}

	/* BabyRing */

	.baby-ring #wrapper {
		padding: 81px 0 0;
	}


	/* Footer
	----------------------------------------------- */
	#footer {
		padding: 0;
	}

	#footer .inner .f_nav {
		width: 33%;
		box-sizing: border-box;
	}
	#footer .inner .f_nav .ttl {
		margin: 0 0 7px;
	}
	#footer .inner .f_nav .ttl,
	#footer .inner .f_nav li a {
		display: block;
		padding: 2px 15px;
		font-size: 12px;
	}
	#footer .inner .credit {
		position: static;
		clear: both;
		padding: 30px 0 0;
		margin: 0;
	}
	#footer .inner .credit p {
		float: none;
		margin: 0;
	}
	#footer .inner .credit p:first-child {
		margin: 0 0 15px;
	}

}


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

@media screen and (max-width: 768px) {
	.sns li {
		width: 120px;
		padding: 0 20px;
		text-align: center;
	}
	/* PageTopNav
	----------------------------------------------- */
	#wrapper .pagetop_btn {
		display: none;
	}


	/* Footer
	----------------------------------------------- */
	#footer {
		margin: 20px 0 0;
	}

	#footer .inner .f_nav,
	#footer .inner .f_nav + .f_nav {
		width: 100%;
		margin: 0 0 15px;
		border-left: #CCC 1px solid;
		border-right: none;
	}

	#footer .inner .credit {
		padding: 15px 0 0;
	}

}

@media (max-width: 480px) {
	 .line {
		margin: 30px auto;
	}
	.sns {
	  margin: 30px auto;
	}
	.sns li {
		width: 33%;
		padding: 0;
	}
	.sns li a {
		display: block;
	}
	.sns li img {
		width: 50%;
		height: auto;
	}
}
/*
------------------------------------------------------------------------------------------------------------------ SmartPhone */

@media screen and (max-width: 414px) {

/* Header
----------------------------------------------- */
#header .sp_logo {
	height: 60px;
	padding: 10px 20px;
}
#header .sp_logo img {
	height: 40px;
}
#header .g_nav_trigger {
	display: block;
	width: 40px;
	height: 35px;
	margin: -17.5px 0 0;
}
#header .g_nav_trigger span {
	width: 20px;
	height: 3px;
}
#header .g_nav_trigger:before {
	top: 16px;
	width: 20px;
	height: 3px;
}
#header .g_nav_trigger:after {
	top: 22px;
	width: 20px;
	height: 3px;
}

#header .g_nav {
	font-size: .7rem;
	/*position: fixed;*/
	/*top: 0;*/
}


/* Wrapper
----------------------------------------------- */

/* Corporate */

.corporate #wrapper {
	padding: 61px 0 0;
}

/* BabySpoon */

.baby-spoon #wrapper {
	padding: 61px 0 0;
}

/* BabyRing */

.baby-ring #wrapper {
	padding: 61px 0 0;
}
	.weddingBanner,.crownBanner,.moominparkBanner {
		margin: 20px auto;
	}
}



#footer {
  margin: 60px 0 0;
  padding: 0 25px 60px;
  background: #EEE; }
  @media (max-width: 950px) {
    #footer {
      padding: 0 20px 60px; } }
  @media (max-width: 480px) {
    #footer {
      margin: 30px 0 0;
      padding: 0 10px 30px; } }

#footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0 0; }
  @media (max-width: 480px) {
    #footer .footer-inner {
      padding: 25px 0 0; } }

#footer .footer-logo {
  display: flex;
  align-items: center; }

#footer .footer-logo-img {
  width: 76px; }

#footer .footer-logo-title {
  color: #4d845c;
  font-size: 1.6rem;
  position: relative;
  padding-left: 60px; }

#footer .footer-logo-title::after {
  content: "";
  position: absolute;
  background-color: #4d845c;
  left: 20px;
  top: calc(50% - 1px);
  width: 40px;
  height: 1px; }

#footer .footer-logo-title span {
  display: block;
  padding-left: 20px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.2rem; }

#footer .f_nav-warp {
  width: 100%;
  padding: 20px 0 0 160px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-wrap: wrap; }
  @media (max-width: 480px) {
    #footer .f_nav-warp {
      padding: 20px 0 0 0; } }

#footer .f_nav-warp .f_nav {
  margin: 0;
  padding: 0 20px 0 0;
  border-left: #CCC 1px solid;
  flex: 1 1 auto; }
  @media (max-width: 480px) {
    #footer .f_nav-warp .f_nav {
      padding: 0; } }

#footer .f_nav-warp .f_nav.brand {
  border-left: none; }
  @media (max-width: 480px) {
    #footer .f_nav-warp .f_nav.brand {
      margin-bottom: 20px; } }

#footer .f_nav-warp .f_nav.brand li {
  position: relative;
  margin-bottom: clamp(5px, 1.5vw, 15px);
  padding: 0 0 0 23px; }
  @media (max-width: 480px) {
    #footer .f_nav-warp .f_nav.brand li {
      padding: 0 0 0 15px; } }

#footer .f_nav-warp .f_nav.brand li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: #a4c4ac; }

#footer .f_nav-warp .f_nav.brand li a {
  padding: 0;
  font-size: 1.4rem;
  font-weight: bold; }

#footer .f_nav-warp .f_nav li a {
  display: block;
  padding: 0 0 0 15px;
  font-size: 1.2rem; }

#footer .credit {
  font-size: 10px;
  margin: 50px 0 0;
  letter-spacing: .1em;
  text-align: right; }



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

Header CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
.logo {
  width: 88px; }

.logo a {
  display: block; }

#header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #FFF;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 13px 20px; }

#header .g_nav_trigger {
  display: none; }

#header .g_nav {
  width: 100%;
  font-weight: bold;
  line-height: 1;
  letter-spacing: .1em; }

#header .corporate {
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  @media (max-width: 950px) {
    #header .corporate {
      flex-direction: column; } }

#header .corporate li {
  margin-right: 40px;
  font-size: 1.2rem; }
  @media (max-width: 950px) {
    #header .corporate li {
      width: 100%;
      margin-right: 0;
      font-size: 1.4rem;
      border-bottom: #FFF 1px solid; } }
  #header .corporate li:last-child {
    border-bottom: none; }

#header .corporate li a {
  display: block; }
  @media (max-width: 950px) {
    #header .corporate li a {
      padding: 10px;
      text-align: left;
      line-height: 1.4; } }

#header .corporate li:last-child a {
  background: #54885f;
  color: #FFF;
  width: 140px;
  line-height: 3;
  text-align: center;
  border-radius: 5px;
  font-weight: normal; }
  @media (max-width: 950px) {
    #header .corporate li:last-child a {
      line-height: 1;
      width: calc(100% - 20px);
      margin: 10px auto 0;
      padding: 15px 10px; } }

/*
------------------------------------------------------------------------------------------------------------------ Tablet */
@media screen and (max-width: 950px) {
  /* Header
  ----------------------------------------------- */
  #header {
    width: 100%;
    border-bottom: #EEE 1px solid;
    box-sizing: border-box; }

  #header .g_nav_trigger {
    display: block;
    width: 44px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin: -20px 0 0;
    z-index: 2;
    cursor: pointer;
    box-sizing: border-box; }

  #header .g_nav_trigger span {
    display: block;
    width: 24px;
    height: 4px;
    background: #666;
    position: absolute;
    top: 10px;
    left: 10px; }

  #header .g_nav_trigger:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 10px;
    background: #666;
    display: block;
    width: 24px;
    height: 4px; }

  #header .g_nav_trigger:after {
    content: "";
    position: absolute;
    top: 26px;
    left: 10px;
    background: #666;
    display: block;
    width: 24px;
    height: 4px; }

  #header .g_nav {
    width: 250px;
    height: 1500px;
    position: absolute;
    top: 0;
    right: -250px;
    z-index: 15;
    background: #EEE;
    overflow: auto;
    -webkit-overflow-scrolling: touch; } }
@media screen and (max-width: 414px) {
  /* Header
  ----------------------------------------------- */
  #header .sp_logo {
    height: 60px;
    padding: 10px 20px; }

  #header .sp_logo img {
    height: 40px; }

  #header .g_nav_trigger {
    display: block;
    width: 40px;
    height: 35px;
    margin: -17.5px 0 0; }

  #header .g_nav_trigger span {
    width: 20px;
    height: 3px; }

  #header .g_nav_trigger:before {
    top: 16px;
    width: 20px;
    height: 3px; }

  #header .g_nav_trigger:after {
    top: 22px;
    width: 20px;
    height: 3px; }

  #header .g_nav {
    font-size: .7rem;
    /*position: fixed;*/
    /*top: 0;*/ } }