@charset "UTF-8";
/* CSS Document */


img:hover{
    opacity: 1;
}

.slidein {
opacity: 0;
}



.slidein.show {
opacity: 1;
transform: none;
        animation: slideIn .7s forwards;
}


@keyframes slideIn {
  0% {
    transform: translateY(180px);
    opacity: 0;
    
  }
  100% {
    transform: translateY(0);
        transition: all 1, ease;
  }
  80%,100% {
    opacity: 1;
  }
}
 
.fadein {
opacity: 0;
}

.fadein.show {
opacity: 1;
     animation: fadeIn .7s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    
  }
    60%{
         opacity: 0;
    }
  100% {
    opacity: 1;
  }
}

.show{
    margin-bottom: 0;
   padding: 0;
}

html{
    scroll-behavior: smooth;
}


body{
    display: block;
  width: 100%!important;
	margin: 0 auto;
	padding: 0;  
color: #3D3938;
}


  

main{
    display: block;
    width:  1000px;
    margin: 0 auto;
     font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

p{
    font-size: 14px;
    line-height: 2em;
    letter-spacing: 0.05em;
}


.strong{
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    border-bottom: 4px dotted #CC7479;
    padding: 7px 20px;    
    letter-spacing: 0.1em;
}


#mainimage {
   margin-top: 30px;
/*animation: thumbernailIn 1s forwards;*/
}


/*
@keyframes thumbernailIn {
  0% {
    opacity: 0;
    
  }
 
       50%{
         opacity: 0.5;
    }
    
    
  100% {
    opacity: 1;
  }
}

*/



#mainimage p{
    text-align: right;
}


/* スクロールダウンの位置 */
.scroll {
  padding-top: 60px;
  position: relative;
  text-align: center;
}
/* 矢印のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  border-bottom: 1px solid #CC7479;
  border-left: 1px solid #CC7479;
  content: "";
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
.scroll span{
     color: #CC7479; 
}

/* 矢印のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}

    

.contents1{
position: relative;
    display: block;
    width: 100%;
    height: 400px;
    margin: 200px 0;
    padding:  200px;
}


.contents1 img{
    position: absolute;
top: 0;
  left: 50%; /* 横中央に */
  transform: translate(-50%, -50%);
width: 800px;
}

.contents1 p{
    position: absolute;
text-align: center;
      width: 100%;
      top: 50%;
  left: 50%; /* 横中央に */
  transform: translate(-50%, -50%);
     font-size: 16px;
    font-weight: 500;
}


.contents2_1 , .contents2_2{
    margin-bottom: 200px;
}


.contents2_1 p , .contents2_2 p{
    position: relative;
    display: block;
text-align: center;
    margin-top: 20px;
}



.contents2_img{
position: relative;
    display: block;
    height: 500px;
    margin-bottom: 40px;
}


.contents2_img img{
    position: absolute;
   
}

.contents2_img img:first-of-type{

 left: 50%; /* 横中央に */
  transform: translatex(-50%);
width: 700px;
}

.contents2_img img:nth-of-type(2){
    top:10px;
 left: 50%; /* 横中央に */
  transform: translatex(-50%);
width: 560px;
}

.contents2_img img:nth-of-type(3){
    bottom: 0;
  left: 50%; /* 横中央に */
  transform: translatex(-50%);
width: 550px;
}





.contents2_img2{
      display: block;
    width: 350px!important;
margin: 70px auto;
    
} 





.contents3{
    margin-top: 250px;
}

.contents3 p{
        position: relative;
    display: block;
/*    margin-top: 100px;*/
text-align: center;
}



.contents3 img{
    display: block;
    margin: 40px auto;
   width: 550px;
    
}


.contents4{
     margin-top: 250px;
}

.contents4 div{
position: relative;
    display: block;
    height: 460px;
    margin-top: 80px;
}



.contents4 p{
    text-align: center;
}
.contents4 p:nth-of-type(2){
  display: block;
    margin-bottom: 100px;
}

.contents4 div img{
    position: absolute;
}

.contents4 div img:first-of-type{
left: 50%; /* 横中央に */
  transform: translatex(-50%);
width: 700px;
}

.contents4 div img:nth-of-type(2){
    top:13px;
 left: 50%; /* 横中央に */
  transform: translatex(-50%);
width: 560px;
}

.contents4 div img:nth-of-type(3){
    top: -40px;
  left: 50%; /* 横中央に */
  transform: translatex(-50%);
width: 540px;
}

.contents4 p:last-child{
    margin-top: 70px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
   line-height: 2.5em;
}



.contents5{
position: relative;
    display: block;
    width: 100%;
    height: 40px;
    margin-top:  380px;
       margin-bottom:  380px;

}



.contents5 div:first-child  img{
    position: absolute;
   top: 0;
  left: 50%; /* 横中央に */
  transform: translate(-50%, -50%);
width: 800px;
}


.contents5 div  img{
    position: absolute;
   top: 2%;
  left: 49.6%; /* 横中央に */
  transform: translate(-50%, -50%);
width: 70px;
}


.contents5 p{
    position: absolute;
text-align: center;
      top: 50%;
  left: 51%; /* 横中央に */
  transform: translate(-50%, -50%);
    line-height: 2.3em;
}



.contents6{
    margin-top: 30px;
}


.contents6 div img:hover{
opacity: 0.7;
}


.contents6-1 {
  position: relative;
  width: 880px; /* 必要な横幅に調整 */
  height: 50px; /* 高さも調整可能 */
    margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}



.contents6-1 div {
  position: absolute;
  top: 50%; /* 中央に配置 */
  left: 0;
  width: 100%;
  height: 1px; /* 線の太さ */
  background-color: #CC7479; /* 線の色 */
  transform: translateY(-50%); /* 垂直中央に合わせる */
}

.contents6-1 p{
    position: relative;
    display: block;
    width: auto; 
    
    color: #CC7479;
    text-align: center;
    background-color: #fff;
    padding: 0px 20px;
}





.contents6-2{
    display: flex;
width: 880px;    
margin: 0 auto;
    justify-content:center;
     background-color: #FFD9DA;
    gap:20px;
   
}


.short{
width: 540px; 
}


.contents6-2 img{
width: 150px;
border: 6px solid #FFD9DA;
}

.contents6-3{
    display: flex;
width: 900px;    
margin: 0 auto;
    justify-content:center;
    gap:20px;
   
}


.contents6-3 a{
width: 150px;
color:  #3D3938;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    margin-top: 10px;
    font-weight: bold;
}



.contents6-3 span{

    font-size: 11px;
 
}