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

	layout.css

==================================================================================================== */

/* ----------------------------------------------------------------------------------------------------
	header
---------------------------------------------------------------------------------------------------- */
header {
	position:absolute;
    top:0;
	width:100%;
	}
    header .inner {
        position:relative;
        }
		header .inner h1 {
            position:absolute;
            top:30px;
            left:30px;
			}
			header .inner h1 a {
                display:block;
				}
				header .inner h1 a picture {
					width:96px;
					height:114px;
					}
				    header .inner h1 a picture img,
				    header .inner h1 a picture source {
                        display:block;
                        width:100% !important;
                        height:auto;
				    	}

@media screen and (max-width:1200px) {
header {
	width:100%;
    min-width:320px;
	height:70px;
    background:#ffffff;
	}
	header .inner {
        padding:20px;
		}
		header .inner h1 {
            position:static;
            inset:0;
			width:108px !important;
			height:30px !important;
			margin:0 auto 20px auto;
			}
			header .inner h1 a {
			    width:108px !important;
			    height:30px !important;
				}
				header .inner h1 a picture {
                    display:block;
                    width:108px !important;
			        height:30px !important;
					}
				    header .inner h1 a picture img {
					    }
}


/* ----------------------------------------------------------------------------------------------------
	navigation
---------------------------------------------------------------------------------------------------- */
nav {
        display:none;
    position:fixed;
    top:30px;
    right:30px;
	width:60px;
	height:60px;
	}

/* --------------------------------------------------
toggle_navigation button */
    nav .toggle_navigation {
        position:absolute;
        display:flex;
        justify-content:center;
        align-items:end;
        width:60px;
        height:60px;
        background:#f5f7f6;
        padding:10px;
        cursor:pointer;
        transition:none;
        z-index:999;
        }
        nav .toggle_navigation span:nth-child(-n+3) {
            position:absolute;
            display:block;
            width:30px;
            height:2px;
            background:var(--black);
            transition:none;
            }
        nav .toggle_navigation span:nth-child(1) {
            top:13px;
            transition:all .2s ease;
            }
        nav.active .toggle_navigation span:nth-child(1) {
            top:25px;
            transform:rotate(45deg);
            }
        nav .toggle_navigation span:nth-child(2) {
            top:22px;
            transition:opacity .2s ease;
            }
        nav.active .toggle_navigation span:nth-child(2) {
            opacity:0;
            }
        nav .toggle_navigation span:nth-child(3) {
            top:31px;
            transition:all .2s ease;
            }
        nav.active .toggle_navigation span:nth-child(3) {
            top:25px;
            transform:rotate(-45deg);
            }
        nav .toggle_navigation span:nth-child(4) {
            position:absolute;
            bottom:5px;
            color:var(--black);
            font-size:10px;
            }

/* --------------------------------------------------
dropdown navigation */
    nav > .dropdown_navigation {
        position:fixed;
        top:30px;
        right:30px;
        display:block;
        padding:20px 0 0 0;
        opacity:0;
        z-index:311;
        transition:all 0.2s ease-in-out;
        }
    nav:hover > .dropdown_navigation {
        filter:drop-shadow(0px 0px 15px 0px rgba(0,0,0,0.1));
        opacity:1;
        }
        nav > .dropdown_navigation > ul {
            position:relative;
            display:flex;
            flex-direction:column;
            width:calc(100% + 80px);
            background:#ffffff;
            box-shadow:0px 0px 15px 0px rgba(0,0,0,0.1);
            filter:drop-shadow(0px 0px 15px 0px rgba(0,0,0,0.1));
            margin:0 -40px;
            padding:5px 20px;
            list-style:none;
            }
        nav > .dropdown_navigation > ul::before {
            content:"";
            position:absolute;
            top:calc(tan(-60deg) * 15px / 2);
            right:0;
            left:0;
            width:30px;
            height:calc(tan(60deg) * 15px / 2);
            background:#ffffff;
            box-shadow:0px 0px 15px 0px rgba(0,0,0,0.1);
            clip-path:polygon(50% 0,100% 100%,0 100%);
            margin:auto;
            }
            nav > .dropdown_navigation > ul > li {
                }
                nav > .dropdown_navigation > ul > li > a {
                    position:relative;
                    display:block;
                    font-size:15px;
                    font-weight:normal;
                    text-align:left;
                    border-top:1px solid #cbe1ef;
                    padding:15px 0;
                    }
                nav > .dropdown_navigation > ul > li:nth-of-type(1) > a {
                    border-top:none;
                    }
                nav > .dropdown_navigation > ul > li > a:hover {
                    color:#0165b0;
                    }
                nav > .dropdown_navigation > ul > li > a::after {
                    content:'';
                    position:absolute;
                    top:calc(50% - 4px);
                    right:10px;
                    width:9px;
                    height:9px;
                    border:0;
                    border-top:2.5px solid #0166b1;
                    border-right:2.5px solid #0166b1;
                    border-radius:1px;
                    transform:rotate(45deg);
                    transition:all 0.4s ease-in-out;
                    }
                nav > .dropdown_navigation > ul > li > a:hover::after {
                    right:2px;
                    }

@media screen and (max-width:640px) {
    nav .toggle_navigation {
        right:20px;
        }
}

@media screen and (max-width:560px) {
    nav .toggle_navigation {
        top:20px;
        width:40px;
        height:40px;
        padding:4px;
        }
        nav .toggle_navigation span:nth-child(-n+3) {
            width:20px;
            height:2px;
            }
        nav .toggle_navigation span:nth-child(1) {
            top:10px;
            }
        nav.active .toggle_navigation span:nth-child(1) {
            top:15px;
            }
        nav .toggle_navigation span:nth-child(2) {
            top:16px;
            }
        nav.active .toggle_navigation span:nth-child(2) {
            opacity:0;
            }
        nav .toggle_navigation span:nth-child(3) {
            top:22px;
            }
        nav.active .toggle_navigation span:nth-child(3) {
            top:15px;
            }
        nav .toggle_navigation span:nth-child(4) {
            font-size:8px;
            }
}

/* --------------------------------------------------
toggle_navigation */
						nav .toggle_navigation_contents {
							position:fixed;
							top:0;
							right:-120%;
							display:block;
							width:100%;
							height:100%;
							background:#ffffff;
							opacity:0.95;
							overflow:auto;
							overscroll-behavior-y:contain;
							transition:all 0.6s;
							z-index:998;
							}
						nav.active .toggle_navigation_contents {
							right:0;
							}
							nav .toggle_navigation_contents .toggle_navigation_inner {
								position:relative;
								display:block;
								width:100%;
								height:calc(100% + 1px);
								overflow:auto;
								overscroll-behavior-y:contain;
								z-index:998;
								}
								nav .toggle_navigation_contents .toggle_navigation_inner .toggle_logo {
									position:absolute;
									top:35px;
									left:20px;
									display:block;
									max-width:440px;
									max-height:47px;
									}
									nav .toggle_navigation_contents .toggle_navigation_inner .toggle_logo img {
										width:min(100%,440px);
										height:min(100%,47px);
										}
								nav .toggle_navigation_contents .toggle_navigation_inner > ul {
									display:flex;
									flex-direction:column;
									width:100%;
									border-top:2px solid #0166b1;
									margin:108px 0 0 0;
									}
									nav .toggle_navigation_contents .toggle_navigation_inner > ul > li {
										width:100%;
										list-style:none;
										}
										nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > a {
											position:relative;
											display:block;
											width:100%;
											font-size:17px;
											font-weight:bold;
											text-align:center;
											border-bottom:2px solid #0166b1;
											padding:20px;
											}
										nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > a::after,
										nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li > a::after {
											content:'';
											position:absolute;
											top:calc(50% - 5px);
											right:20px;
											width:11px;
											height:11px;
											border:0;
											border-top:2.5px solid #0166b1;
											border-right:2.5px solid #0166b1;
											border-radius:1px;
											transform:rotate(45deg);
											}
										nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li > a::after {
											top:calc(50% - 4px);
											width:8px;
											height:8px;
											border-top:2px solid #0166b1;
											border-right:2px solid #0166b1;
											}
										nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > span {
											position:relative;
											display:block;
											width:100%;
											font-size:17px;
											font-weight:bold;
											text-align:center;
											border-bottom:2px solid #0166b1;
											padding:15px 20px;
											}
											nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul {
												display:flex;
												list-style:none;
												}
												nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li {
													width:calc(100% / 3);
													}
													nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li > a {
														position:relative;
														display:block;
														width:100%;
														text-align:center;
														border-bottom:2px solid #0166b1;
														padding:15px 15px 15px 0;
														}
													nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li:nth-of-type(1) > a,
													nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li:nth-of-type(2) > a {
														border-right:1px solid #0166b1;
														}
								nav .toggle_navigation_contents .toggle_navigation_inner .toggle_tel_text {
									text-align:center;
									margin:30px 0 0 0;
									padding:0 20px;
									}
									nav .toggle_navigation_contents .toggle_navigation_inner .toggle_tel_text a {
										display:inline-block;
										color:#0166b1;
										font-size:30px;
										font-family:Montserrat;
										font-weight:bold;
										letter-spacing:2.5px;
										background:transparent url('../image/layout/icon_tel_blue.png') left top 2px / 24px 24px no-repeat;
										margin:0 0 0 15px;
										padding:0 0 0 32px;
										transition:none;
										}
								nav .toggle_navigation_contents .toggle_navigation_inner .toggle_headline_text {
									display:block;
									text-align:center;
									line-height:1.6;
									white-space:pre-wrap;
									word-break:keep-all;
									margin:15px auto 20px auto;
									padding:0 20px;
									}

@media screen and (max-width:640px) {
/*
								nav .toggle_navigation_contents .toggle_navigation_inner > ul {
									margin:clamp(80px,25vw,108px) 0 0 0;
									}
*/
												nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li {
													width:calc(100% / 3);
													}
													nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li > a {
														font-size:clamp(12px,3.75vw,17px);
														}
													nav .toggle_navigation_contents .toggle_navigation_inner > ul > li a::after,
													nav .toggle_navigation_contents .toggle_navigation_inner > ul > li > ul > li a::after {
														right:clamp(15px,4.687vw,20px);
														}
}

@media screen and (max-width:560px) {
								nav .toggle_navigation_contents .toggle_navigation_inner .toggle_logo {
									position:absolute;
									top:28px;
									left:20px;
									display:block;
									/*width:calc(100% - clamp(100px,31.25vw,120px));*/
									width:220px;
									max-height:35px;
									}
									nav .toggle_navigation_contents .toggle_navigation_inner .toggle_logo img {
										width:100%;
										height:100%;
										}
								nav .toggle_navigation_contents .toggle_navigation_inner > ul {
									margin:80px 0 0 0;
									}
}


@media screen and (max-width:900px) {
	nav ul {
        padding:0 clamp(20px,3.125vw,30px);
		}
}


/* ----------------------------------------------------------------------------------------------------
	mainvisual
---------------------------------------------------------------------------------------------------- */
#mainvisual {
	width:100%;
	height:770px;
	min-height:initial;
	background:#ffffff url('../image/mainvisual/bg.jpg') center center / cover no-repeat;
	overflow:hidden;
	z-index:111;
	}
    #mainvisual .inner {
        position:relative;
        width:100%;
        max-width:1200px;
        height:770px;
        margin:0 auto;
        z-index:111;
        }
    #mainvisual .inner::before {
        content:"";
        position:absolute;
        top:0;
        right:0;
        left:0;
        display:block;
        width:994px;
        height:777px;
        aspect-ratio:142 / 111;
        background:transparent url('../image/mainvisual/baby.png') center top / cover no-repeat;
        margin:0 auto;
        z-index:121;
        }
        #mainvisual .inner p {
            position:absolute;
            margin:auto;
            }
        #mainvisual .inner p:nth-of-type(1),
        #mainvisual .inner p:nth-of-type(2),
        #mainvisual .inner p:nth-of-type(5) {
            color:#ffffff;
            font-weight:900;
            text-align:left;
            z-index:124;
            }
        #mainvisual .inner p:nth-of-type(1) {
            top:30px;
            right:230px;
            font-size:25px;
            writing-mode:vertical-rl;
            }
        #mainvisual .inner p:nth-of-type(2) {
            top:30px;
            left:230px;
            font-size:45px;
            writing-mode:vertical-rl;
            }
        #mainvisual .inner p:nth-of-type(3) {
            right:0;
            left:0;
            bottom:200px;
            mix-blend-mode:color-dodge;
            opacity:0.75;
            z-index:122;
            }
        #mainvisual .inner p:nth-of-type(4) {
            right:0;
            left:0;
            bottom:65px;
            z-index:123;
            }
        #mainvisual .inner p:nth-of-type(5) {
            right:0;
            left:0;
            bottom:20px;
            font-size:15px;
            text-align:center;
            margin:auto;
            }

@media screen and (max-width:1200px) {
    #mainvisual .inner::before {
        width:100%;
        max-width:994px;
        height:auto;
        margin:105px auto 0 auto;
        }
        #mainvisual .inner p:nth-of-type(1) {
            top:120px;
            right:25px;
            font-size:clamp(17px,2.65625vw,25px);
            }
        #mainvisual .inner p:nth-of-type(2) {
            top:120px;
            left:15px;
            font-size:clamp(30px,4.6875vw,45px);
            }
        #mainvisual .inner p:nth-of-type(3) {
            padding:0 20px;
            }
        #mainvisual .inner p:nth-of-type(4) {
            padding:0 40px;
            }
}

@media screen and (max-width:640px) {
#mainvisual {
	height:700px;
	background:#ffffff url('../image/mainvisual/bg.jpg') center top 50px / cover no-repeat;
	}
    #mainvisual .inner {
        height:700px;
        }
        #mainvisual .inner p:nth-of-type(1) {
            top:120px;
            right:clamp(10px,3.125vw,25px);
            font-size:clamp(12px,3.75vw,17px);
            }
        #mainvisual .inner p:nth-of-type(2) {
            top:120px;
            left:clamp(5px,1.5625vw,15px);
            font-size:clamp(17px,5.3125vw,30px);
            }
        #mainvisual .inner p:nth-of-type(3) {
            bottom:clamp(170px,35vw,200px);
            }
        #mainvisual .inner p:nth-of-type(4) {
            bottom:95px;
            }
}

@media screen and (max-width:500px) {
    #mainvisual .inner::before {
        right:50%;
        left:50%;
        width:100%;
        min-width:500px;
        height:auto;
        margin:105px auto 0 auto;
        transform:translateX(-50%);
        }
}

@media screen and (max-width:420px) {
        #mainvisual .inner p:nth-of-type(3) {
            bottom:clamp(140px,40vw,170px);
            }
}

/* ----------------------------------------------------------------------------------------------------
	contents
---------------------------------------------------------------------------------------------------- */
#contents {
	position:relative;
	width:100%;
	min-width:320px;
	background:#ffffff;
	padding:0;
	z-index:211;
    overflow-x:hidden;
	}
#top #contents {
	}
	#contents section {
		text-align:left;
		}
        #contents section h2 {
            display:flex;
            flex-direction:column-reverse;
            font-size:32px;
            font-weight:500;
            text-align:center;
            margin:0 auto 50px auto;
            }
        #contents section h2::before {
            content:'';
            width:50px;
            height:1px;
            background:#e0d7c4;
            margin:5px auto 0 auto;
            }
        #contents section h2 span {
            color:#e0d7c4;
            font-size:20px;
            font-family:'BIZ UDPMincho','小塚明朝 Pro','Kozuka Mincho Pro','Noto Serif JP',serif;
            font-weight:200;
            font-style:italic;
            }
    #contents section .inner {
        width:100%;
        max-width:1260px;
        margin:0 auto;
        padding-right:30px;
        padding-left:30px;
        }
    #contents section .inner_wide {
        width:100%;
        margin:0 auto;
        padding-right:30px;
        padding-left:30px;
        }

@media screen and (max-width:1260px) {
        #contents section h2 {
            font-size:clamp(25px,3.90625vw,32px);
            }
}

@media screen and (max-width:900px) {
    #contents section .inner {
        padding-right:clamp(20px,6.25vw,30px);
        padding-left:clamp(20px,6.25vw,30px);
        }
    #contents section .inner_wide {
        padding-right:clamp(20px,6.25vw,30px);
        padding-left:clamp(20px,6.25vw,30px);
        }
        #contents section h2 {
            margin:0 auto clamp(30px,4.6875vw,50px) auto;
            }
}


/* ----------------------------------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------------------------------- */
footer {
	}
	footer .copyright {
		display:block;
		width:100%;
		color:#ffffff;
		font-size:12px;
		text-align:center;
		line-height:30px;
		background:#757166;
		z-index:322;
		}

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

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

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


/* ----------------------------------------------------------------------------------------------------
	card
---------------------------------------------------------------------------------------------------- */
#fixed_card {
    position:fixed;
    right:0;
    bottom:0;
    z-index:999;
	}