@charset "utf-8";

.section {
 
    font-family: "游明朝体","Yu Mincho","YuMincho","ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho","Noto Serif JP",serif;
}



img {display: block;
width: 100%;}

    #container{
        background-color: #FFF;
    }

.al_center {
    text-align: center;
}

.section {
position: relative;
    background-color: #FFF;
}


.section__main__img {
    max-width: 1400px;
    margin: 0 auto 0;
}



.section__item__img {
    width: 40%;
    max-width: 480px;
    margin: 0 auto 40px;
}

.heading {
    font-size: 2.4rem;
    margin-bottom: 0.5em;
}

.txt.intro {
    margin: 0 auto;
    padding: 4em 0;
    line-height: 4;
}

.section__textarea.article {
    padding: 8rem;
}




.txt {
    font-size: 1.125rem;
    line-height: 2;
    margin-top: 2.1875rem;
    max-width: 800px;
    margin: auto;
}

.section.section--01 {
    margin-bottom: 150px;
}

.section--02 {
    background-color: #afa292;
    padding: 140px 0;
}

.section.section--03 {
    margin-top: 150px;
}

.section.section--04 {
    display: flex;
    margin: 100px auto;
    max-width: 1400px;
}

.section.section--04.section__textarea.article {
    padding: 6rem;
}

.section.section--06 {
    padding: 50px 0;
}


.section.section--07 {
    max-width: 960px;
    margin: 0 auto 0;
}


p.txt.right {
    max-width: 600px;
}

.tag {
    width: 40%;
    padding: 20px 0;
    font-size: 1.2rem;
    text-align: center;
    border: solid 1px;
    display: inline-block;
    margin: auto 30%;
}


p.price {
    text-align: center;
    font-size: 1.1rem;
    margin: 1em;
}
    
 .kokuchi-text {
    margin-bottom: 2rem;
}   
    
 .kokuchi-banner {
    width: 90%;
    max-width: 800px;
    margin: auto;
}   

  span.item-link {
    font-size: 0.4em;
}  

 .kokuchi-heading {
    border: solid 1px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
     line-height: 0.7;
     padding: 0.5em;
}   
    
    
    
    
    #intro{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
  width: 100%;
	height:100vh;
 	overflow: hidden;/*はみ出しているところを隠す*/
}

#intro-img{
  position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
  width: 100%;
	height:100vh;
	background: url("https://image.rakuten.co.jp/aranciato/cabinet/pick-2024/241030-m-01.jpg") no-repeat center center;/*背景画像の設定※/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}

#container,
footer{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

/*ロゴを中央に配置*/
#intro h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: 400px;
}  
    
    
             footer {
    margin-top: 0;
}     
     
  .fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}  
    
    
    
    
    
    
    
    
    
    
    
    
    @media (max-width:900px) {
        
        .heading {
    font-size: 2.1rem;
    margin-bottom: 0.5em;
}
      .section.section--04 {
    display: block;
    margin: 0;
}            
        
    }    
    
    
    
       @media (max-width:740px) {
        
        .section--02 {
    background-color: #e7e1da;
    padding: 140px 10%;
}
     .section__textarea.article {
    padding: 2rem;
}   
           
.txt {
    font-size: 1rem;
}
      
      .heading {
    font-size: 1.75rem;
    margin-bottom: 1em;
}     
                     .section__item__img {
    width: 80%;
    }    
     
 
           
           
           .section.section--06 {
    padding: 40px 20px;
    background-color: #ded8d0;
}
           
       
           
    }
     
          @media (max-width:540px) {
       .section--02 {
    padding: 100px 10%;
} 
    .section__textarea.article {
    padding: 4rem 2rem;
}   
    .hoshiitodeau br {
    display: none;
}          
        .heading {
    font-size: 1.65rem;
    margin-bottom: 1em;
}
              .section__item__img {
    width: 80%;

}
              .txt.intro {
    line-height: 4;
}
     
        .txt.intro {
    width: 80%;
    line-height: 2.5;
}      
     
            p.txt.al_center.intro br{
                display: none;
}           
       .section.section--06 {
    padding: 40px 20px;
    background-color: #ded8d0;
}   
              
.kokuchi-text {
    text-align: left;
    width: 90%;
}             
              .kokuchi-text br{
                  display: none;
              }             
    }     
	
	
	
	/* -------------------- behavior -------------------- */


@media (max-width:1023px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}

@media (min-width:1024px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }

    #pagetop--fixed {
        bottom: 3vh;
    }


}