/* 調整用スタイル */
html{
	scroll-behavior: smooth;
}

body{
	font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
	color: #631108;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

a {
	text-decoration: none;
	color: #631108;
}
.pink{
	font-weight: 600;
	color: #DD6F7C;
	font-size: 20px;
}
.pink img{
	margin: 0 5px;
}
ul,
li {
	list-style: none;
}
.breadcrumb {
  margin: 0;
  padding: 0 0 0 5%;
  list-style: none;
	text-align: left;
	font-size: 14px;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li:after {/* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 0.2em;
  color: #DD6F7C;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #631108;
}

.breadcrumb li:first-child a:before {
  /*家アイコン*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #DD6F7C;
}

.breadcrumb li a:hover {
	color: #fff;
}
/*トップに表示されるロゴ*/
.start {
	background: #FCE3E2;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}



main {
	margin: 0;
	background: linear-gradient(to bottom, #FCE3E2, #FDF5E3, #FCE3E2);
	text-align: center;
	padding-top: 10px;
}

.mainimg{
	width: 300px;
	margin-top: 50%;
}
.movie{
	padding-top: 50px;
}
.top{
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.top h1{
	font-family: "しっぽり明朝 Regular", "ヒラギノ明朝 ProN W3", "Yu Mincho", "Hiragino Mincho ProN","serif";
	font-size: 24px;
}
.section{
	margin-top: 50px;
}
.container{
	position: relative;
    height: 800px; /* 画像の高さに合わせて調整 */
    justify-content: center;
    align-items: center;
}
.center-image{
	position: absolute;
	bottom: 25%; transform: translate(-50%, 50%)
}
.first1{
	position: absolute;
	top: 20%; left: 40%; transform: translate(-50%, -50%);
}
.first2{
	position: absolute;
	top: 20%; right: 40%; transform: translate(50%, -50%);
}
.second1{
	position: absolute;
	top: 40%; left: 25%; transform: translate(-50%, -50%);
}
.second2{
	position: absolute;
	top: 40%; right: 25%; transform: translate(50%, -50%);
}
.third1{
	position: absolute;
	bottom: 30%; left: 20%; transform: translate(-50%, 50%);
}
.third2{
	position: absolute;
	bottom: 30%; right: 20%; transform: translate(50%, 50%); 
}
h1{
	font-family: "しっぽり明朝 Regular", "ヒラギノ明朝 ProN W3", "Yu Mincho", "Hiragino Mincho ProN","serif";
	font-size: 20px;
}
h2 {
	font-size: 24px;
	font-family: "しっぽり明朝 Regular", "ヒラギノ明朝 ProN W3", "Yu Mincho", "Hiragino Mincho ProN","serif";
	margin: 50px auto;
  position: relative;
  padding: 0.5rem;
  text-align: center;
  display: inline-block; /* 中央揃えを確実にするため */
}

h2:after {
  position: absolute;
  bottom: -10px; /* テキストの下に配置 */
  left: 50%;
  transform: translateX(-50%); /* 中央揃え */
  width: 40px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #DF707D;
}

h3{
	margin: 20px 0;
	background: #FFFFFF;
	display: inline-block;
	line-height: 1.4em;
	padding: 10px 20px;
	border-radius: 50px;
}
.flex{
	display: flex;
	justify-content: center;
}
.flex ul{
	text-align: left;
	padding-left: 40px;
}


.center{
	margin: 50px;
}
.circle {	
	margin: 80px 50px;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:#FFFCFC;
}

.circle span {
	font-weight: 600;
	color: #DD6F7C;
  position: absolute;
  display: inline-block;
  left: 13%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :150px;
  text-align:center;
}
.process{
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.en{
	width: 300px;
	border-radius: 20px;
	margin: 50px;
}
.flow{
	width: 220px;
}
/*　矢印　*/
/*矢印の縦線*/
.cp_arrows [class*='cp_arrow'] {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  width: 5px;
  height: 27px;
  background: #DD6F7C;
  border-radius: 10px;
  margin: 70px 20px 0 20px;
}
/*矢印の＜の部分*/
.cp_arrows [class*='cp_arrow']:before,
.cp_arrows [class*='cp_arrow']:after {
  position: absolute;
  content: '';
  top: -3px;
  width: 5px;
  height: 17px;
  background: #DD6F7C;
  border-radius: 10px;
}
.cp_arrows [class*='cp_arrow']:before {
  left: 5px;
  transform: rotate(-50deg);
}
.cp_arrows [class*='cp_arrow']:after {
  right: 5px;
  transform: rotate(50deg);
}
.cp_arrows .cp_arrow_right {
  transform: rotate(90deg);
}
/*　↑ここまで　*/

.pricing{
	max-width: 1200px;
	margin: auto;
}
.table-scroll {
	overflow: scroll;
	margin: 0 20px;
}
table {
    width: 1200px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th {
    background-color: #DD6F7C;
	color: #FFFFFF;
}
td{
	background-color: #FFFFFF;
	color: #DD6F7C;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
.left{
	margin: auto;
	width: 90%;
	text-align: left;
	color: #DD6F7C;
}
.news{
	padding: 50px 0;
}
.notice-list {
	width: 50%;
	margin: auto;
    list-style-type: none;
	padding: 50px 0;
}
.notice {
	border-bottom: solid 1px #DD6F7C;
}
time{
	padding-right: 20px;
}
.area{
	background-color: #fff;
	padding-bottom: 30px;
}
.map{
	width: 500px;
}
.link{
	padding: 50px 30px;
}
.link img{
	width: 400px;
}
footer{
	background-color: #FFF6F6;
	padding: 50px 0;
	font-size: 16px;
}
.footer {
	display: flex;
	justify-content: center;
}
.footer img{
	margin: 0 20px;
	width: 200px;
}

small{
	text-align: center;
	display: block;
	margin: 50px 0 0 0;
	font-size: 14px;
}

/* 画面幅959px以下の場合 */

@media(max-width:959px){
	main{
		width: 100%;
		padding-top: 50px;
	}
	main p{
		font-size: 16px;
		padding: 20px 10px;
	}
	.top h1{
		font-size: 20px;
	}
	.mainimg{
	width: 200px;
	}
	.movie{
		width: 100%;
	}
	h1{
		font-size: 18px;
	}
	h2 {
		font-size: 20px;
	}
	.section{
		padding: 10px 0 50px 0;
	}
	.container{
		height: 800px; /* 画像の高さに合わせて調整 */
	}
	.center-image{
		width: 170px;
		bottom: 7%; transform: translate(-50%, 50%)}
	.first1{
		width: 170px;
		top: 20%; left: 30%; transform: translate(-50%, -50%);
	}
	.first2{
		width: 150px;
		top: 20%; right: 30%; transform: translate(50%, -50%);
	}
	.second1{
		width: 170px;
		top: 43%; left: 30%; transform: translate(-50%, -50%);
	}
	.second2{
		width: 150px;
		top: 45%; right: 30%; transform: translate(50%, -50%);
	}
	.third1{
		width: 170px;
		bottom: 13%; left: 30%; transform: translate(-50%, -50%);
	}
	.third2{
		width: 150px;
		bottom: 8%; right: 30%; transform: translate(50%, -50%);
	}
	
	.flex{
		display: block;
		margin: auto;
		font-size: 16px;
	}
	.flex ul{
		text-align: left;
		padding: 0;
	}
	.center{
		padding: 0;
		margin: 0;
	}
	.ul{
		display: inline-block;
		margin: auto;
		padding: 0;
	}
	.circle {	
		margin: 20px;
	}
	.en{
		margin: 10px;
	}
	
	.process{
		display: block;
	}
	table{
		font-size: 16px;
	}
	.left{
		font-size: 14px;
	}
	.flow{
		width: 150px;
	}
	.cp_arrows .cp_arrow_right {
		transform: rotate(180deg);
	}
	.cp_arrows [class*='cp_arrow'] {
		margin: 20px;
	}
	.notice-list {
		font-size: 16px;
		width: 90%;
		margin: auto;
		list-style-type: none;
		padding: 0;
	}
	.notice {
		padding: 5px;
	}
	.map{
		width: 300px;
	}
	.link{
		padding: 20px 0;
	}
	.link img{
		width: 300px;
		margin: auto;
	}
	.footer{
		display: block;
		justify-content: center;
		text-align: center
	}
	
	small{
		font-size: 12px;
	}
	
}

/* ヘッダー */

header{
	background: #FCE3E2;
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
@media screen and (min-width: 960px) {
	header{
		position: inherit;
	}
}
.header__inner {
	background-color: #FFF6F6;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: inherit;
  position: relative;
}

.header__top {
	display: none;
}

.header__logo {
    display: flex;
    align-items: center;
}

.header__logo img {
    height: 80px;
    margin-right: 10px;
}

.header__contact {
    text-align: left;
}

.header__contact p {
    font-size: 14px;
}

/* ヘッダーのロゴ部分 */
.header__title {
  width: 80px;
}


@media screen and (min-width: 960px) {
  .header__title {
    width: 120px;
  }
	.header__top {
	padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
}

.header__title img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ヘッダーのナビ部分 */

.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #FFF6F6;
  transition: ease .4s;
}


@media screen and (min-width: 960px) {
  .header__nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 70%;
  }
	.header__inner {
  padding: 10px 20px;
}
}


@media screen and (min-width: 960px) {
  .nav__items {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }
}

.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}



@media screen and (min-width: 960px) {
  .nav-items {
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(0, 0);

  }
}


/* ナビのリンク */
.nav-items__item a {
  color: #631108;
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 24px;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
  .nav-items__item a {
    margin-bottom: 0;
  }
}


/* ハンバーガーメニュー */

.header__hamburger {
	width: 50px;
	height: 100%;
	position: absolute;
	top: 50%;
	right: 20px; /* 右側に固定 */
	transform: translateY(-50%);
	z-index: 9999;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

@media screen and (min-width: 960px) {
  .hamburger {
    display: none;
  }
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 3px;
  background-color: #E97281;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(1) {
	top: 0;
	border-radius: 50px;
}

.hamburger span:nth-child(2) {
	margin: 6px 0;
	border-radius: 50px;
}

.hamburger span:nth-child(3) {
	top: 0;
	border-radius: 50px;
}


/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
	transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 4px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -14px;
  transform: rotate(-45deg);
}

/* アイコンのスタイル */
.header__icon {
	position: absolute;
	display: flex; 
	top: 15%;
	right: 60px;
}
.header__icon i {
	font-size: 27px;
	margin-right: 20px;
}
@media screen and (min-width: 960px) {
  .header__icon {
	  display: none; 
  }
}

/* ボタン全体 */
#page_top {
width: 100px;
height: 100px;
position: fixed;
right: 10px;
bottom: 10px;
background: #fff;
border-radius: 50%;
opacity: 0.8;
z-index: 999;
}

/* Font Awesome */
#page_top::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f0d8';
font-size: 50px;
color: #DD6F7C;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
@media(max-width:959px){
	#page_top {
		width: 50px;
		height: 50px;
	}
	#page_top::before {
		font-size: 30px;
		}
}

/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}


/*-----------------------------------
sakura_block
-----------------------------------*/
#sakura_block{
  width: 100%;
}
#sakura_block .sakura_parts_box{
  position: relative;
}
#sakura_block .sakura_parts_box img{
  position: absolute;
}
#sakura_block .sakura_parts_box img:nth-child(2n+1){
  width: 13px;/*花びらのサイズ*/
}
#sakura_block .sakura_parts_box img:nth-child(2n){
  width: 50px;/*花びらのサイズ*/
}

/*-----------------------------------
桜の花びらパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 0; left: 43%;}
img.parts_10{top: 0; left: 50%;}
img.parts_11{top: 0; left: 55%;}
img.parts_12{top: 0; left: 60%;}
img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 22%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 90%;}
img.parts_19{top: 0; left: 93%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,50px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,70px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,120px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,200px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,300px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,370px);
      opacity: 0;
    }
}

.sakura_parts_box img {
    animation: sakura linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_13,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05,img.parts_16{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18,img.parts_11{
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

@media(max-width:959px){
	#sakura_block{
		width: 90%;
	}
}