@chaarset "UTF-8";

/*kyoutuu---------*/

html{font-size: 100%;
}


body{
    font-family:"hiragana Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",sans-serif ;
    line-height: 1.7;
    color:white;
    padding-top: 0px;

    a {text-decoration: none;}
  
}

header{
    
    background: rgba(0,0,0, 100);
    width: 100%;
}


.wrapper{
    max-width: auto;
    margin: auto;
}

/*outline*/
.align-center{
    text-align: center;
}

/*midasi*/
.font-english{
    font-family: 'Philosopher',sans-serif;
    font-weight: normal;
    color: white;
}

.page-title{
    font-size: 5vw;
    
    /*position: absolute;*/ 
    text-align: center;
    line-height: 2.5rem;
    z-index: 1; /* 背景画像よりも手前に表示 */
    padding-top: 200px;
    
      
}
.heading-large{
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;

}

.heading-medium{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;

}

/*header-----------------------*/
.page-header{
    
    background-color: rgba(0,0,0, 0.2); /* ヘッダーの背景色を指定 */
    transition: 0.3s ease;
    height: 5rem;

  }

.page-header.scrolled {
    background-color: rgba(0,0,0, 1); 
  }


.logo{
    width: 150px;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99; /* 他の要素よりも上に表示 */

    
}
.main-nav{
    
    display: flex;
    justify-content: right;
    gap: 40px;
    font-size: 1rem;
    list-style: none;
    font-size: 20px;

}
.main-nav a {
    color: white;
}
.main-nav a :haver{
    color: #0bd;
}

.cover{
    background-size: cover;
    background-position: center bottom;
    height: 600px; 
}

.cover-home{
    background-image: url(../images/yuuhi.JPG);
}

.about{
    max-width: 736px;
    padding: 0 1.5rem;
    margin: 3rem auto 4rem;
}
.about p {
    margin-bottom: 3rem;
    text-align: center;
}

.btn{
    display: inline-block;
    font-size: 1.5;
    background-color: rgb(47, 47, 47);
    color: white;
    border-radius: 8px;
    padding: .75rem 1.5rem;
    transition: 0.5s;
}

.btn:hover{
    background-color: rgb(184, 184, 184);
}

.info{
    width: 100%;
    max-width: 544px;
    margin: auto;
    padding: 0 1.5rem;
    border-spacing: 0;
}
.info th,.info td{
    border-bottom: 1px solid white;
}
.info th{
    text-align: left;
    font-weight: normal;
    padding: 1rem;
}
.info td{
    padding:  1rem 0;
}

.backcolor{
    background-color: black;
}

.copyright{
    text-align:center;
    padding: auto;
    color: white;
}

.hyou{
    
    display: inline-block;
    border-right: 1px solid white;
    padding: 5px;
    padding-right: 10px;
    background-color: transparent;
    color: white;
    transition: 0.5s;
    
}
.hyou:hover{
    background-color: rgba(51, 51, 51, 0.5);
}

.mask{
    display: block;
    line-height: 0;
    overflow: hidden;
}

.zoomIn img{
    transform: scale(1);
    transition: .3s ease-in-out;
}

.zoomIn a:hover img{
    transform: scale(1.2);
}


@media {
    .page-header{
        display: flex;
        justify-content: space-between;
        padding-top:  auto;
    }
    
}


/* photo */

.post{
    margin-bottom: 3rem;
}

.post-title{
    font-weight: normal;
    margin-bottom: 1.5rem;
    margin-left: 2rem;
}

.post-date{
    font-size: 0.75rem;
}

.post-info{
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.post-cat{
    display: flex;
    gap: .5rem;
    list-style: none;
}

.post-cat a{
    color: white;
    background-color: darkgray;
    border-radius: 8px;
    font-size: .873rem;
    padding: .5rem .75rem;
}

.post-cat a:hover{
    background-color: antiquewhite;
} 
.post-date{
    font-size: .875rem;
}

.post-thumbnail{
    border-radius:16px ;
    margin-bottom: 1.5rem; ;
    width: 500px;
}

.post p {
    margin-bottom: 1.5rem;
    line-height: 2;
}

.Record{
    list-style: none;
    text-align: center;
    margin-bottom: 4rem;
    font-size: large;
}

.Record li {
    border-bottom: 1px solid white;
    background-color: transparent;
    color: white;
    transition: 0.5s;

}

.Record li:hover{
    background-color: rgba(7, 7, 128, 0.5);
}


.Record a{
    color: white;
    display: block;
    padding: 1rem;
}

.Record a:hover {
    color: rgb(0, 181, 194);
}

.sidederection{
    display: flex;
    justify-content: space-between;

}

.post{
    width: 60%;
}

.sidebar{
    width: 22%;
}

.aside .heading-medium{
    line-height: 1;
    margin-bottom: 2rem;
}

.grid{
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: repeat(3,1fr);
    text-align: center;
    margin-left: 2rem;
    justify-content: left;
    width: 60%;
    
}

.item img{
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    width: 280px;
    height: 280px;
}

.item p{
    font-size: .875rem;
}

.emailtome{
    
    /*width: 1200px;*/
    
    border-radius:  48px;
    padding: 1.5rem 2.5rem 2.5rem;
    margin-top: 3rem;
    text-align: center;
}

.emailtome p{
    margin-top: 1rem;
    text-align: center;
}

.emailtome a{
    margin-top: 1rem;
    text-align: center;
}

.sns{
    text-align: center;
    display: flex;
    align-items: flex-start;
    gap: 7rem;
    margin-bottom: 0;
    margin-left: 3rem;
}

.sns-item{
    flex: 1;
}


.flow-button {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    background-color: transparent; /* ボタンの色 */
    /*border: 1px solid #333333; /* ボタンの線の太さと色 */
    padding: 5px; /* ボタンの大きさ */
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
    /*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);*/
    
}

.flow-button span {
    position: relative;
    z-index: 3;
    color: white; /* 文字の色 */
    font-weight: normal;
    /*font-size: 1.2em; /* 文字の大きさ */
    transition: color 0.3s ease;
}

.flow-button:hover span {
    color: white; /* マウスを重ねたときの文字の色 */
}

.flow-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(194, 194, 194, 0.2); /* マウスを重ねたときの背景の色 */
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}

.flow-button:hover:before {
    transform-origin: right top;
    transform: scale(1, 1);
    transition: transform 0.4s ease;
}


.hyou{
    
    display: inline-block;
    border-right: 1px solid white;
    padding: 5px;
    padding-right: 10px;
    background-color: transparent;
    color: white;
    transition: 0.5s;
}
.hyou:hover{
    background-color: rgba(0,0,0, 0.2);
}

.letter1, .letter2,.letter3, .letter4,.letter5, .letter6,.letter7, .letter8,.letter9, .letter10, .letter11,.letter12,.letter13
 {
    opacity: 0;
    transition: opacity 3s ease-in-out, transform 3s ease-in-out;
    position: relative;
    
  }


.object-fit-img {
    object-fit: cover;
    object-position: bottom;
    font-family: 'object-fit: cover; object-position: bottom;'
}
.top {
    position: relative;
}
.bg_container {
    position: relative;
    width:100%;
    max-width: 100%;
    height: 100vh; 
}
.bg_container .image {
    position: absolute;
    width: 100%;
    height: 100vh; 
    opacity: 0;
    
    animation: change-img-anim 35s infinite;
}
.bg_container .image:nth-of-type(1) {
    animation-delay: 0s;
}
.bg_container .image:nth-of-type(2) {
    animation-delay:5s;
}
.bg_container .image:nth-of-type(3) {
    animation-delay: 10s;
}

.bg_container .image:nth-of-type(4) {
    animation-delay: 15s;
}
.bg_container .image:nth-of-type(5) {
    animation-delay:20s;
}
.bg_container .image:nth-of-type(6) {
    animation-delay: 25s;
}    

.bg_container .image:nth-of-type(7) {
    animation-delay: 30s;
}    



@keyframes change-img-anim {
  0%{ opacity: 0;}
  20%{ opacity: 1;}
  33%{ opacity: 1;}
  63%{ opacity: 0;}
  100%{ opacity: 0;}
}


.page-header2 {
    position: absolute; /* または fixed */
    z-index: 1; /* 背景画像よりも手前に表示 */
  }



.post2{
    margin: 1rem;
    margin-left: 5rem;
    padding: 1rem;
    width: 40%;
    height: 40%;
}

.aboutme{

    width: 35%;
    margin: 1rem;
    padding: 1rem;
    width: auto;
    font-family: "Noto Serif JP", serif;
}

html {
    scroll-behavior: smooth;
}

.cp_arrows {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
    position: absolute;
    width: 60px;
    animation: arrow-move09 2s infinite ease-in-out;
  }
  .cp_arrows .cp_arrow::before,
  .cp_arrows .cp_arrow::after {/*矢印全体の設定*/
    position: absolute;
    content: '';
    width: 30px;
    height: 3px;
    background: white;
    border-radius: 10px;

  }
  .cp_arrows .cp_arrow::before {/*矢印左の線の位置と傾斜*/
    left: 3px;
    transform: rotate(30deg);
  }
  .cp_arrows .cp_arrow::after {/*矢印左の線の位置と傾斜*/
    right: 3px;
    transform: rotate(-30deg);
  }
  @keyframes arrow-move09 {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0);}
    48% {transform: translateY(-20px);}
    60% {transform: translateY(-15px);}
}

.aboutlink{
    
    display: block;
    background-color: transparent;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 30px;
    margin: auto;
    
}

.cover2{
    position: fixed;/*fixedで固定*/

    
}
.mask{
    
    border-radius: 16px;
    line-height: 0;
    overflow: hidden;
}

.zoomout img{
    transform: scale(1.1);
    transition: .3s ease-in-out;
}

.zoomout a:hover img{
    transform: scale(1);
}


.right-sticky{
    align-self: flex-start;
    position: sticky;
    top: 100px;
    
    
  }

.contact{
    font-size: large;
}

.automargin{
    margin:auto;

}

.sns-btn{
    
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 5rem;
    
}

.x-btn{
    margin: 1.6rem;
        
}

.insta-btn{
    margin: 2rem;

}


.threads-btn{
    margin: 0.01rem;

}

.youtube-btn{

    width: 120px;
}

.tiktok-btn{

    margin: auto;
}

.facebook-btn{
    margin: auto;
}

.pat-btn{
    height: 200px;
    margin: auto;
}

.buy-btn{
    width:400px;
    margin: auto;
}

.mst-btn{
    margin: auto;
}


.object{
    width:100px;
    height:100px;
    object-fit:cover;
}


.object2{
    height:150px;
    width:auto;
    object-fit: cover;
}

.object3{
    width: 350px;
    object-fit: cover;
}


.object-mst{
    width: auto;
    height: auto;
    object-fit: cover;
}

.sns-flex{
    display: flex;
}


.sns-flex{
    display: flex;
}

.sub{
    display: none;
}

.sub-menu:hover .sub{
    display: grid;
    margin: center;
    padding: auto;
    color: white;
    transition: 0.5s;
    background-color: rgba(0,0,0, 0.2); 
    text-align: center;
    border-bottom: 1px solid white;
}

.sub-menu:hover .sub a:hover {
    color: white;
    transition: 0.5s;
    background-color: rgba(0,0,0, 0.4); 

}



@media (min-width:1200px){
    main#allpage{width:1280px;}
    div#allpage{width:1280px;} 
}


@media (max-width:800px){

.grid{
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: repeat(2,1fr);
    text-align: center;
    margin-left: 2rem;
    justify-content: left;
    width: 20%;
    }


.sidederection{
   display: block;
}

.Record{
  
    list-style: none;
    margin:auto;
    justify-content: center;
    text-align: center;
    margin-bottom: 4rem;
    font-size: large;
}
  
.main-nav{
    
    display: flex;
    justify-content: left;
    gap: 10px;
    font-size: 1rem;
    list-style: none;
    font-size: 15px;

}


.sidebar{
    width: 100%;
}


.cover-home{
    background-image: url(../images/yuuhi.JPG);
    width:100%;
}



.right-sticky{
    align-self: flex-start;
    position: relative;
    top: 1px;
    
    
  }

.sns-btn{
    
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 2rem;
    
}


.x-btn{
    margin: auto;
}

.insta-btn{
    margin: auto;
    
}


.threads-btn{
    margin: auto;
    
}

.youtube-btn{
    margin: auto;
   
}


.tiktok-btn{
   
    margin: auto;
}


.facebook-btn{
    margin: auto;
}

.note-btn{
    margin: auto;
}

.pat-btn{
    margin:auto;
}


.buy-btn{
    margin:auto;
}
.object{
    width:100px;
    height:auto;
    object-fit:cover;
}


.object2{
    height:150px;
    width:auto;
    object-fit: cover;
}

.object3{
    width: 350px;
    object-fit: cover;
}


@media (max-width:500px){

.grid{
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: repeat(1,1fr);
    text-align: center;
    margin-left: 2rem;
    justify-content: left;
    width: 20%;
    }

.item img{
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    width: 400px;
    height: 280px;
}



.sidederection{
   display: block;
}

.Record{
  
    list-style:none;
    margin:auto;
    justify-content: center;
    text-align: center;
    margin-bottom: 4rem;
    font-size: large;
}
  
.main-nav{
    
    display:　flex;
    justify-content: left;
    gap: 0px;
    list-style: none;
    font-size: 20px; 
    width:20%;
}


.sidebar{
    width: 100%;
}


.cover-home{
    background-image: url(../images/yuuhi.JPG);
    width:100%;
}

.page-header{
    
    background-color: rgba(0,0,0, 0.2); /* ヘッダーの背景色を指定 */
    transition: 0.3s ease;
    height: 5rem;

  }



.hyou{
    
    display: inline-block;
    border-right: 1px solid white;
    background-color: transparent;
    color: white;
    transition: 0.5s;
}
}



@media (max-width:500px){



.post2{
    margin: 1rem;
    margin-left: 3rem;
    padding: 1rem;
    width: 80%;
    height: 80%;
}


.sns-btn{
    
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 2rem;
    
}


.x-btn{
    margin: auto;
}

.insta-btn{
    margin: auto;
    
}


.threads-btn{
    margin: auto;
    
}

.youtube-btn{
    margin: auto;
   
}


.tiktok-btn{
   
    margin: auto;
}


.facebook-btn{
    margin: auto;
}


.note-btn{
    margin: auto;
}



.note-btn{
    margin: auto;
}


.pat-btn{
    margin: auto;
    height: 150px;
}


.buy-btn{
    margin: auto;
    width: 150px;
}


.object{
    width: 100px;
    height: 100px;
    object-fit: cover;
}



.object2{
    height:150px;
    width:auto;
    object-fit: cover;
}

.object3{
    width: 350px;
    
    object-fit: cover;
}




.sns-flex{
    display: flex;
    flex-direction:column;
}

/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 20px;
  top   : 20px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #BBBBBB;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #000;
  background: rgba( 0,0,0,1);
  text-align: center;
  width: 100%;
  transform: translateX(100%);
  transition: all 0.6s;
  list-style: none;
}

.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
.globalMenuSp ul li:hover{
  background :#000;
}

.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateX(0%);
}
    


.right-sticky{
    align-self: flex-start;
    position: relative;
    top: 1px;
    
    
  }

}









@media (max-width:800px){


.sns{
    text-align: center;
    
    align-items: flex-start;
    gap: 7rem;
    margin-bottom: 0;
    margin-left: 3rem;
}

.sns-item{
    flex: 1;
}

.feature-wrapper{

  display: flex;
    flex-direction: column;
}




.feature{
@media (max-width:800px){
    order:1;
}
}


.feature-image{
@media (max-width:800px){
    order:2;
}
}

.frame{
@media (max-width:800px){
    width:400px;

}
}
}