@charset "utf-8";

/* ファーストビュー
------------------------------------------------------------*/
#first_view{
	position: relative;
	padding-bottom: 140px;
	background: url("../images/blur_circle_thin.webp") no-repeat 33% 230px / 470px;
}
#first_view::before{
	content: '';
	width: 100%;
	height: 25%;
	background-color: #f7f1f8;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

/* ヘッダー
------------------------------------------------------------*/
header{
	position: relative;
	z-index: 1;
}
header{
	height: 950px;
	padding: 50px 0 0 5%;
}
h1{margin-bottom: 20px;}
.logo_box{
	width: 36.8%;
	border-bottom: 1px #b484bc solid;
	padding-bottom: 35px;
	margin-bottom: 50px;
}
a.logo img{width: clamp(350px, 33vw, 450px);}
.ht_btn{
	position: absolute;
	top: 35px;
	right: 3.5%;
	z-index: 1;
}

/* ナビゲーション
------------------------------------------------------------*/
.pc-nav > ul > li > a,.pc-nav > ul > li > p{
	width: fit-content;
	font-size: clamp(20px, 1.7vw, 23px);
	display: flex;
	align-items: center;
	transition: all .3s ease;
}
.pc-nav > ul > li > a::before,.pc-nav > ul > li > p::before{
	content: '';
	width: 32px;
	height: 8px;
	background: url("../images/home/nav_before.webp") no-repeat left center / contain;
	margin-right: 13px;
}
.pc-nav > ul > li:not(:last-child){margin-bottom: 40px;}
.pc-nav,.pc-nav .drop_nav_box{width: fit-content;}

/* drop_nav_box */
.pc-nav .drop_nav_box div{
	top: 0;
	left: 105%;
}

/* ついてくるnav */
.clone-nav > ul{
	display: flex;
	justify-content: center;
}
.clone-nav > ul > li{margin-bottom: 0!important;}
.clone-nav > ul > li > a::before,.clone-nav > ul > li > p::before{content: none!important;}
.clone-nav .drop_nav_box div{
	top: inherit!important;
	left: 50%!important;
	transform: translateX(-50%)!important;
}
.clone-nav  > ul > li > a,.clone-nav  > ul > li > p{padding-bottom: 15px;}

/* メインエリア
------------------------------------------------------------*/
.main_img,.main_copy,.stork_illust{position: absolute;}
#main_area{width: 100%;}
.main_img{
	width: 60%;
	top: 0;
	right: 0;
}
.main_img,.main_img img{height: 950px;}
.main_img img{
	width: 100%;
	object-fit: cover;
}
.main_copy{
	top: 73%;
	left: 5%;
}
.main_copy img{
	display: block;
	width: clamp(580px, 60vw, 905px);
	height: fit-content;
}
.stork_illust{
	right: 65px;
	bottom: 30px;
	animation: stork 5s ease-in-out infinite;
	mix-blend-mode: multiply;
}
@keyframes stork{
	0%{transform: translateY(6%);}
	50%{transform: translateY(-6%);}
	100%{transform: translateY(6%);}
}

/* コンテンツ
------------------------------------------------------------*/
/* お知らせ
----------------------------------------------*/
.news{
	padding: 150px 0 240px;
	background-image: url("../images/blur_circle.webp");
	background-repeat: no-repeat;
	background-position: -130px 180px;
	background-size: 675px;
}
.news_con > div{width: 480px;}
.news_con > ul{width: calc(100% - 480px);}
.news_con > ul > li{border-bottom: 1px #2d2924 solid;}
.news_con > ul > li:first-child{border-top: 1px #2d2924 solid;}
.news_con > ul > li a{
	display: flex;
	align-items: center;
	padding: 40px 70px 40px 0;
	background: url("../images/btn_icon_circle_b.webp") no-repeat 98.5% center / 35px;
}
@media (any-hover: hover){
	.news_con > ul > li a:hover{
		padding-left: 10px;
		background-position: 100% center;
	}
}
.news_con > ul > li a *{font-size: clamp(16px, 1.3vw, 20px);}
.news_con > ul > li a p{
	line-height: 1.2;
	width: 130px;
}
.news_con > ul > li a h3{width: calc(100% - 130px);}

/* はじめての不妊治療も安心
----------------------------------------------*/
.relief{padding-top: 150px;}
.relief > div{
	border: 2px #b484bc solid;
	padding-bottom: 110px;
}
.relief > div > *{
	max-width: 1220px;
	width: 90%;
	margin: 0 auto;
}
.relief h2::before{
	content: '';
	width: 337px;
	aspect-ratio: 337 / 145;
	background: url("../images/home/relief_ribbon.webp") no-repeat center / contain;
	display: block;
	margin: -60px auto 10px;
}
.relief ul li{width: 31.5%;}

/* 『おち夢』はこう考えます
----------------------------------------------*/
.thought{padding: 120px 0 100px;}
.thought > div{
	display: flex;
	align-items: center;
}
.thought h2{
	width: 620px;
	padding: 40px 70px 40px 70px;
}
.thought h2::before{
	content: '';
	width: 203px;
	aspect-ratio: 203 / 178;
	background: url("../images/home/logo_mark.svg") no-repeat center / contain;
	display: block;
	margin: 0 auto 40px;
}
.thought_li{width: calc(100% - 620px);}
.thought_li > li{
	background-color: #f7f3f2;
	background-image: url("../images/home/dq_left.webp"),url("../images/home/dq_right.webp");
	background-repeat: no-repeat,no-repeat;
	background-size: 44px;
	background-position: 3% 10%,97% 90%;
	padding: 50px 30px;
	border-radius: 8px;
	line-height: 1.6;
}
.thought_li > li:not(:last-child){margin-bottom: 15px;}

/* 『おち夢』からのお約束
----------------------------------------------*/
.promise_bg{
	background-image: url("../images/blur_circle_thin.webp"),url("../images/blur_circle_thin.webp");
	background-repeat: no-repeat,no-repeat;
	background-size: 580px;
	background-position: 95% top,left 80%;
}
.promise{
	position: relative;
	padding-bottom: 200px;
}
.promise_con{padding-top: 60px;}
.promise_li{width: 630px;}
.promise_li > li{margin: 0 2%;}
.promise_li > li:not(:first-child){width: 46%;}
.promise_con > div{
	width: calc(100% - 630px);
	padding-left: 70px;
}
.promise_title h2{margin-left: -18px;}
.promise figure{
	position: absolute;
	z-index: -1;
}
.promise_img01{
	top: 0;
	left: 0;
}
.promise_img02{
	right: 7%;
	bottom: 23%;
}
.promise_img03{
	right: 17%;
	bottom: 0;
	z-index: -2!important;
}
.ivf{padding-top: 120px;}
.ivf > div{padding: 80px 0;}
.ivf_title{width: 50%;}
.ivf_con{width: 48%;}

/* どんなご夫婦にも赤ちゃんを！
おち夢が誇る高度な技術
----------------------------------------------*/
.dct{padding-top: 150px; padding-bottom: 150px}
.dct > div{
	border: 2px #b484bc solid;
	padding-bottom: 110px;
}
.dct > div > *{
	max-width: 1220px;
	width: 90%;
	margin: 0 auto;
}
.dct h2::before{
	content: '';
	width: 337px;
	aspect-ratio: 337 / 145;
	background: url("../images/home/dct_ribbon.webp") no-repeat center / contain;
	display: block;
	margin: -60px auto 10px;
}

.dct ul{
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 50px;
}

.dct ul li{width: 31.5%;}

/* 永遠幸グループのご紹介
----------------------------------------------*/
.group_btn01 li,.group_btn02 li{margin: 0 0.5%;}
.group_btn01,.group_btn01 li:not(:nth-last-child(-n+3)){margin-bottom: 15px;}
.group_btn01 a,.group_btn02 a{
	display: block;
	padding: 20px 35px;
	border-radius: 80px;
	background: url("../images/btn_icon_p.webp") no-repeat 93% center / 7px;
}
.group_btn01 a{background-color: #eae3dc;}
.group_btn02 a{background-color: #fff;}
@media (any-hover: hover){
	.group_btn01 a:hover,.group_btn02 a:hover{
		background-color: #b484bc;
		background-image: url("../images/btn_icon_w.webp");
		color: #fff;
	}
}

/* 『おち夢クリニック名古屋』院長からのご挨拶
----------------------------------------------*/
.wave_top{position: relative;}
.wave_top::before{
	content: '';
	width: 100%;
	height: 738px;
	background: url("../images/home/wave_top.webp") no-repeat center top / 100% 100%;
	transform-origin: center top;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
.dia_after::after{
	content: '';
	width: 11px;
	aspect-ratio: 11 / 41;
	background: url("../images/home/dia_vert.webp") no-repeat center / contain;
	display: block;
	margin: 30px auto;
}
.gretting_box > img{
	max-width: 100%;
	width: 40%;
	height: 790px;
	flex-shrink: 0;
	object-fit: cover;
	position: absolute;
	left: 0;
	border-radius: 0 8px 8px 0;
}
.gretting_box > div{padding: 100px 0 0 44%;}
.gretting_box .bbp_dashed{
	padding-bottom: 60px;
	margin-bottom: 60px;
}
.name > p{margin-bottom: 15px;}

/* CTAエリア
----------------------------------------------*/
.cta_area{
	background: linear-gradient(1deg,rgba(197, 157, 206, 0) 0%, rgba(197, 157, 206, 0.4) 34%, rgba(249, 175, 186, 0.4) 68%, rgba(249, 175, 186, 0) 100%);
	padding: 280px 0;
	position: relative;
}
.cta_area::after{
	content: '';
	width: 100%;
	height: 222px;
	background: url("../images/home/slide_text.webp") repeat-x center / 1556px;
	position: absolute;
	bottom: 0;
	left: 0;
	mix-blend-mode: multiply;
	animation: slide_text 400s linear infinite;
	z-index: -1;
}
@keyframes slide_text{
	0%{background-position: 0 top;}
	100%{background-position: -30000px top;}
}
.cta_area > div{
	background: url("../images/home/stork_illust_w.webp") no-repeat right bottom / 43%;
	padding-bottom: 95px;
}
.cta_btn{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
}
.cta_btn > a:nth-child(2){
    grid-column-start: 1;
    grid-row-start: 2;
}
.cta_btn > a:nth-child(3){
    grid-column-start: 1;
    grid-row-start: 3;
}
.cta_btn > a:nth-child(4){
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
}
.cta_btn > a{
	display: block;
	background: #fff url("../images/btn_icon_circle_p.webp") no-repeat 95% center / 60px;
	border-radius: 8px;
	padding: 60px 120px 65px 40px;
}
.cta_btn > a .bbp_dashed{
	padding-bottom: 50px;
	margin-bottom: 50px;
}
.cta_btn > a h3{
	display: flex;
	align-items: center;
}
.cta_btn > a h3::before{
	content: '';
	width: 41px;
	aspect-ratio: 41 / 11;
	background: url("../images/home/dia_side.webp") no-repeat center / contain;
	margin-right: 10px;
}
.cta_btn > a ul{
	display: flex;
	flex-wrap: wrap;
}
.cta_btn > a ul li{
	width: fit-content;
	background-color: #f7f3f2;
	padding: 15px 35px 18px;
	border-radius: 3px;
	margin: 5px;
}
@media (any-hover: hover){.cta_btn > a:hover{background-position: 96% center;}}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* ヘッダー
	--------------------------------------*/
	header{
		width: 95%;
		height: inherit;
		margin: 0 auto;
		padding: 20px 0 30px;
	}
	.logo_box{
		width: 100%;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
	/* メインエリア
	--------------------------------------*/
	.main_img{
		position: static;
		width: 95%;
		margin: 0 auto;
	}
	.main_img,.main_img img{
		height: 560px;
		border-radius: 8px;
	}
	.main_img img{object-position: center 30%;}
	.main_copy{
		top: inherit;
		bottom: 30px;
	}
	.main_copy img{width: 470px;}
	.stork_illust{right: 0;}
	.stork_illust img{width: 300px;}
	
	/* コンテンツ
	--------------------------------------*/
	/* お知らせ
	-------------------------------*/
	.news{
		padding: 65px 0 160px;
		background-size: 400px;
	}
	.news_con > div{width: 290px;}
	.news_con > ul{width: calc(100% - 290px);}
	.news_con > ul > li a{
		padding: 30px 43px 30px 0;
		background-size: 23px;
		background-position: right center;
	}
	.news_con > ul > li a *{font-size: 14px;}
	.news_con > ul > li a p{width: 100px;}
	.news_con > ul > li a h3{width: calc(100% - 100px);}
	
	/* はじめての不妊治療も安心
	-------------------------------*/
	.relief{padding-top: 100px;}
	.relief > div{padding-bottom: 65px;}
	.relief h2::before{
		width: 230px;
		margin: -40px auto 8px;
	}

	/* 『おち夢』はこう考えます
	-------------------------------*/
	.thought{padding: 65px 0;}
	.thought h2{
		width: 400px;
		padding: 30px 70px 40px 70px;
	}
	.thought h2::before{
		width: 100px;
		margin-bottom: 15px;
	}
	.thought_li{width: calc(100% - 400px);}
	.thought_li > li{
		background-size: 27px;
		padding: 30px 20px;
	}
	
	/* 『おち夢』からのお約束
	-------------------------------*/
	.promise_bg{
		background-size: 300px;
		background-position: 95% top,left 60%;
	}
	.promise_li{width: 430px;}
	.promise_li > li img{width: 200px;}
	.promise_con > div{
		width: calc(100% - 430px);
		padding-left: 30px;
	}
	.promise_title img{width: 80px;}
	.promise_title h2{margin-left: -10px;}
	.promise_img02{right: 0;}
	.promise_img03{right: 10%;}
	.promise figure img{
		width: auto!important;
		height: 220px;
	}
	.ivf{padding-top: 70px;}
	.ivf > div{padding: 50px 0;}
	.ivf_title{width: 35%;}
	.ivf_con{width: 55%;}
    
	/* どんなご夫婦にも赤ちゃんを！
       おち夢が誇る高度な技術
	-------------------------------*/
	.dct{padding-top: 100px;}
	.dct > div{padding-bottom: 65px;}
	.dct h2::before{
		width: 230px;
		margin: -40px auto 8px;
	}
	
	/* 永遠幸グループのご紹介
	-------------------------------*/
	.group_btn01,.group_btn01 li:not(:nth-last-child(-n+3)){margin-bottom: 10px;}
	.group_btn01 a,.group_btn02 a{
		padding: 15px 30px;
		background-size: 5px;
	}
	
	/* 『おち夢クリニック名古屋』院長からのご挨拶
	-------------------------------*/
	.wave_top::before{height: 450px;}
	.dia_after::after{
		width: 7px;
		margin: 20px auto;
	}
	.gretting_box > img{
		height: 500px;
		border-radius: 0 5px 5px 0;
	}
	.gretting_box > div{padding-top: 30px;}
	.gretting_box .bbp_dashed{
		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	/* CTAエリア
	-------------------------------*/
	.cta_area{padding: 150px 0;}
	.cta_area::after{
		height: 130px;
		background-size: 912px;
	}
	.cta_area > div{
		background: transparent;
		padding-bottom: 0;
	}
	.cta_btn{
		display: flex;
		flex-wrap: wrap;
	}
	.cta_btn > a{
		width: 100%;
		background-size: 35px;
		background-position: 97% center;
		border-radius: 5px;
		padding: 40px 80px 45px 30px;
	}
	.cta_btn > a:first-child{order: 1;}
	.cta_btn > a:nth-child(2){order: 4;}
	.cta_btn > a:nth-child(3){order: 3;}
	.cta_btn > a:nth-child(4){order: 2;}
	.cta_btn > a .bbp_dashed{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	.cta_area .ffm.fs18{
		font-size: 12px!important;
		margin-bottom: 5px!important;
	}
	.cta_btn > a h3::before{
		width: 30px;
		margin-right: 7px;
	}
	.cta_btn > a ul li{padding: 10px 25px 13px;}

}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* ヘッダー
	--------------------------------------*/
	header{padding: 15px 13px 22px;}
	
	/* メインエリア
	--------------------------------------*/
	#first_view{
		padding-bottom: 120px;
		background-image: none;
	}
	.main_img,.main_img img{height: 400px;}
	.main_copy img{width: 380px;}
	.stork_illust img{width: 230px;}
	
	/* コンテンツ
	--------------------------------------*/
	/* お知らせ
	-------------------------------*/
	.news{
		background-image: url("../images/blur_circle_thin.webp");
		background-position: 110% top;
		background-size: 250px;
	}
	.news_con > div,.news_con > ul{width: 100%;}
	.news_con > div{margin-bottom: 40px;}

	
	/* はじめての不妊治療も安心
	-------------------------------*/
	.relief > div{
		width: 100%;
		border-right: none;
		border-left: none;
		border-radius: 0;
	}
	
	/* 『おち夢』はこう考えます
	-------------------------------*/
	.thought > div{flex-wrap: wrap;}
	.thought h2,.thought_li{width: 100%;}
	.thought h2{
		padding: 0;
		margin-bottom: 45px;
	}
	
	/* 『おち夢』からのお約束
	-------------------------------*/
	.promise_bg{
		background-size: 250px;
		background-position: right 15%,left 60%;
	}
	.promise_li,.promise_con > div{width: 100%;}
	.promise_con > div{
		order: 1;
		padding-left: 0;
		margin-bottom: 40px;
	}
	.promise_title.mb50{margin-bottom: 25px!important;}
	.promise_title .mb30{margin-bottom: 15px!important;}
	.promise_li{
		order: 2;
		justify-content: space-between;
	}
	.promise_li > li{
		width: 31.5%!important;
		margin: 0;
	}
	.promise_li > li img{width: auto;}
	.promise_img01{
		left: inherit;
		right: 0;
	}
	.promise_img02{
		right: inherit;
		left: 0;
		bottom: 5%;
	}
	.promise_img03{right: 0;}
	.ivf.inner_box02,.ivf_title,.ivf_con{width: 100%;}
	.ivf > div{padding-top: 35px;}
	.ivf_title{margin-bottom: 30px;}
	.ivf_title .bg_text span{margin: 0 auto;}
	.ivf_title .bg_text span:not(:last-child){margin-bottom: 8px;}
	.ivf_con img{
		display: block;
		max-width: 500px;
		width: 100%;
		margin: 0 auto;
	}
    
	/* どんなご夫婦にも赤ちゃんを！
       おち夢が誇る高度な技術
	-------------------------------*/
	.dct > div{
		width: 100%;
		border-right: none;
		border-left: none;
		border-radius: 0;
	}
	
	/* 永遠幸グループのご紹介
	-------------------------------*/
	.group_btn01 li:not(:last-child){margin-bottom: 10px;}
	.group_img{margin-top: 40px;}
	.group_btn02 li:not(:last-child){margin-bottom: 10px;}

	
	/* 『おち夢クリニック名古屋』院長からのご挨拶
	-------------------------------*/
	.wave_top .mb130{margin-bottom: 50px!important;}
	.gretting_box > img,.gretting_box > div{width: 100%;}
	.gretting_box > img{
		position: static;
		border-radius: 5px;
		margin-bottom: 30px;
	}
	.gretting_box > div{padding: 0;}
	
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
		
	/* メインエリア
	--------------------------------------*/
	#first_view{padding-bottom: 80px;}
	.main_img img{object-position: center bottom;}
	.main_copy{bottom: 0;}
	.main_copy img{width: 330px;}
	.stork_illust{bottom: 110px;}
	.stork_illust img{width: 180px;}
	
	/* コンテンツ
	--------------------------------------*/
	/* お知らせ
	-------------------------------*/
	.news{
		background-position: 150% 50px;
		padding-bottom: 130px;
	}
	.news_con > ul > li a{flex-wrap: wrap;}
	.news_con > ul > li a p,.news_con > ul > li a h3{width: 100%;}
	.news_con > ul > li a p{margin-bottom: 8px;}
	
	/* はじめての不妊治療も安心
	-------------------------------*/
	.relief ul li{width: 100%;}
	.relief > div > ul.mb50,.relief ul li:not(:last-child){margin-bottom: 25px!important;}
	.relief ul li img{
		display: block;
		margin: 0 auto;
		width: 250px;
	}
	
	/* 『おち夢』からのお約束
	-------------------------------*/
	.promise{padding-bottom: 180px;}
	.promise_con{padding-top: 45px;}
	.promise figure img{height: 130px;}
	.promise_li{justify-content: center;}
	.promise_li > li{
		width: 46%!important;
		margin: 0 1.8%!important;
	}
	.promise_img02{bottom: 8%;}
    
	/* どんなご夫婦にも赤ちゃんを！
       おち夢が誇る高度な技術
	-------------------------------*/
	.dct ul li{width: 100%;}
	.dct > div > ul.mb50,.dct ul li:not(:last-child){margin-bottom: 25px!important;}
	.dct ul li img{
		display: block;
		margin: 0 auto;
		width: 250px;
	}
    
    .dct ul{
	display: flex;
	justify-content: center;
    flex-direction: column;
	gap: 0px;
	}
	
	/* 永遠幸グループのご紹介
	-------------------------------*/
	.group_btn01 a,.group_btn02 a{
		background-position: 95% center;
		padding: 20px 35px 20px 25px;
	}
	.group_btn01 a br,.group_btn02 a br{display: none;}
	
	/* 『おち夢クリニック名古屋』院長からのご挨拶
	-------------------------------*/
	.wave_top::before{height: 250px;}
	.gretting_box > img{height: 400px;}
	
	/* CTAエリア
	-------------------------------*/
	.cta_area{padding: 130px 0;}
	.cta_area::after{
		height: 100px;
		background-size: 701px;
	}
	.cta_btn > a{
		padding: 30px 20px 50px;
		background-size: 25px;
		background-position: right 10px bottom 13px;
	}
	@media (any-hover: hover){.cta_btn > a:hover{background-position: right 10px bottom 13px;}}
	.cta_btn > a h2{
		line-height: 1.4;
		margin-bottom: 15px!important;
	}
	.cta_btn > a h3{
		justify-content: center;
		margin-bottom: 18px!important;
	}
	.cta_btn > a h3::after{
		content: '';
		width: 30px;
        height: 8px;
		background: url("../images/home/dia_side.webp") no-repeat center / contain;
		margin-left: 7px;
	}
	.cta_btn > a ul li{
		width: 100%;
		margin: 0;
		text-align: center;
	}
	.cta_btn > a ul li:not(:last-child){margin-bottom: 10px;}

}