@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&family=Zen+Old+Mincho&display=swap');

body{ 
margin:0px;
font-size:16.5px;
background-color:white;
color:white;
text-align:left;
background-color:black;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Zen Old Mincho', serif;
         }

.header{
 border-bottom:1px solid #DAA520;
 height:50px;
 background-color:black;
 position:fixed;
 z-index:2;
 top:0px;
 width:100%;
         }

.header img{
position:fixed;
top:0px;
left:0px;
z-index:2;
         }

.margin{
 margin-top:30px;
 margin-bottom:30px;
         }

@media screen and (max-width:1024px){
#pcline{
 display:none;
      }
} 

.black{
 color:black;
    }

#menutitle{
 color:black;
 font-weight:normal;
      }

a img:hover{
 opacity:0.7;
    }

.ycolor{
 color:#DAA520;
   }

@media screen and (max-width:428px){
 #sphoto{
 width:70%;
     }
}
 
#clip{
 width:200px;
 height:200px;
 border-radius:50%;
 object-fit:cover;
 object-position:-5% 0%;
 }

#top{
 color:#C0C0C0;
 font-size:0.9em;
 text-decoration:none;
 text-align:center;
 margin-right:auto;
 margin-left:auto;
   }

.top{
 color:#C0C0C0;
 font-size:1.4em;
 text-decoration:none;
 width:350px;
 position:relative;
 text-align:center;
 margin-right:auto;
 margin-left:auto;
   }

.top:hover{
 color:#FF0066;
 text-decoration:none;
 position:relative;
 text-align:center;
 margin-right:auto;
 margin-left:auto;
   }

.top:active{
 color:#FF0066;
 text-decoration:none;
 position:relative;
 text-align:center;
 margin-right:auto;
 margin-left:auto;
   }

.top::before{
 content:"";
 width:50%;
 height:2px;
 background-color:#C0C0C0;
 position:absolute;
 bottom:-5px;
 left:0%;
    }

.top::after{
 content:"";
 width:50%;
 height:2px;
 background-color:#808080;
 position:absolute;
 bottom:-5px;
 left:50%;
    }

#linknone{
 text-decoration:none;
 }

#menusns{
 margin-right:15px;
 color:black;
    }

#menusns:hover{
 color:#FF0066;
 transition-duration:2s;
 margin-right:15px;
    }

#menusns:active{
 color:#FF0066;
 margin-right:15px;
    }


.sns-text{
 margin-left:10px;
     }

.sg{
 margin-left:10px;
 color:black;
    }

#hummenu{
 display:block;
 color:black;
 text-decoration:none;
 margin-left:15px;
 font-weight:normal;
 position:relative;
                 }

#hummenu:hover{
 color:#FF0066;
                 }

#hummenu:active{
 color:#FF0066;
                 }

#hummenu1{
 font-weight:normal;
 color:black;
 text-decoration:none;
 margin-left:30px;
 display:block;
 position:relative;
     }

#hummenu1:hover{
 color:#FF0066;
     }

#hummenu1:active{
 color:#FF0066;
     }

#hummenu #houkou{
 position:absolute;
 right:15%;
   }

#hummenu1 #houkou{
 position:absolute;
 right:15%;
   }

#cap{
 font-size:0.9em;
    }

.koushin{
 text-align:right;
        }

#wh{
 color:white;
 text-decoration:none;
 border-bottom:1px solid white;
  }

#wh:hover{
 color:#FF0066;
 text-decoration:none;
 border-bottom:1px solid white;
  }

#wh:active{
 color:#FF0066;
 text-decoration:none;
 border-bottom:1px solid white;
  }

.snscolor{
 font-size:1.6em;
 color:#DAA520;
 margin-right:15px;
 }

.snscolor:hover{
 transition-duration:2s;
 font-size:1.6em;
 color:#FF0066;
 margin-right:15px;
 }

.snscolor:active{
 font-size:1.6em;
 color:#FF0066;
 margin-right:15px;
 }

.snscolor2{
 color:black;
 font-size:1.4em;
    }

.snscolor2:hover{
 color:#FF0066;
 transition-duration:2s;
 font-size:1.4em;
    }

.snscolor2:active{
 color:#FF0066;
 font-size:1.4em;
    }

#linkt{
  position: relative;
}

#linkt::before,
#linkt::after {
  content: '';
  position: absolute;
  bottom: -3px;
  display: block;
  width: 0;
  height: 1px;
  background-color:crimson;
  transition: width 0.3s;
}
#linkt::before {
  right: 50%;
}
#linkt::after {
  left: 50%;
}
#linkt:hover::before,
#linkt:hover::after {
  width: 50%;
}


#linkt{
margin-right:200px;
color:#DAA520;
text-decoration:none;
      }

#linkt:hover{
color:#FF0066;
text-decoration:none;
      }

#linkt:active{
color:#FF0066;
text-decoration:none;
      }


#linkt0{
  position: relative;
}

#linkt0::before,
#linkt0::after {
  content: '';
  position: absolute;
  bottom: -3px;
  display: block;
  width: 0;
  height: 1px;
  background-color:crimson;
  transition: width 0.3s;
}
#linkt0::before {
  right: 50%;
}
#linkt0::after {
  left: 50%;
}
#linkt0:hover::before,
#linkt0:hover::after {
  width: 50%;
}


#linkt0{
color:#DAA520;
text-decoration:none;
      }

#linkt0:hover{
color:#FF0066;
text-decoration:none;
      }

#linkt0:active{
color:#FF0066;
text-decoration:none;
      }


#opa{
 opacity:0.9;
 }

@media screen and (max-width:415px){
 #pcbr{
 display:none;
     }
}


#ylink0{
 color:#DAA520;
 background-color:black;
 text-decoration:none;
 text-align:center;
 border-radius:20px;
 padding:10px 20px;
 border:1px solid #DAA520;
 width:80%;
 }

#ylink0:hover{
 color:#DAA520;
 text-decoration:none;
 background-color:white;
 text-align:center;
 border-radius:20px;
 padding:10px 20px;
 border:1px solid #DAA520;
 width:80%;
 }

#ylink0:active{
 color:#DAA520;
 text-decoration:none;
 background-color:white;
 text-align:center;
 border-radius:20px;
 padding:10px 20px;
 border:1px solid #DAA520;
 width:80%;
 }

#ylink3{
 color:black;
 text-decoration:none;
 border-bottom:1px solid black;
          }

#ylink3:hover{
 color:#FF0066;
 text-decoration:none;
          }

#ylink3:active{
 color:#FF0066;
 text-decoration:none;
          }


#bold{
 font-weight:bold;
     }

#menu-btn-check:checked ~ .menu-content {
    left:10%;/*メニューを画面内へ*/
}
.menu-content {
    font-size:18px;
    opacity:0.9;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color:#DAA520;
    transition: all 0.5s;/*アニメーション設定*/
}

.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px black;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 5px 5px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px black;
    border-right: solid 2px black;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
.menu-btn {
    position: fixed;
    top: 0px;
    right: 10px;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color:black;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #DAA520;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}

#pdf{
 margin-top:20px;
       }

#linkred{
 color:red;
 text-decoration:none;
             }

#center{
text-align:center;
       }

#doitu{
color:white;
background:#DAA520; 
}

#doitu2{
 color:white;
 background:#DAA520; 
}

#topsamu{
 text-align:left;
 margin-top:30px;
       }

#lastmail{
 font-weight:bold;
 font-size:0.8em;
 color:#C0C0C0;
 background-color:black;
 padding:3px 6px;
 border-radius:5px;
 box-shadow:3px 3px #C0C0C0;
 text-decoration:none;
 margin-right:5px;
 border:1px solid #C0C0C0;
 }

#lastmail:hover{
 color:black;
 background-color:#C0C0C0;
 }

#lastmail:active{
 color:black;
 background-color:#C0C0C0;
 }

h2{
font-size:22px;
 }

.bannerbox-title{
 text-align:center;
 color:white;
           }

.last-menu{
color:darkslategray;
text-align:center;
margin-right:auto;
margin-left:auto;
           }

.last-text{
  text-align:center;
}


#link{
color:gray;
text-decoration:none;
}

#link:hover{
color:#FF0066;
text-decoration:none;
}

#link:active{
color:#FF0066;
text-decoration:none;
}

.container{
          width:100%;
                   }

#link3{
  color:darkslategray;
}

#gazou{
 margin-top:10px;
      }

#title{
  text-align:center;
       }

.text-wrapper{
line-height:2em;
text-align:left;
margin-right:auto;
margin-left:auto;
    }

.text2-wrapper{
margin-bottom:150px;
     }

.menu-wrapper{
text-align:center;
margin-top:0px;
margin-left:0px;
font-size:1.1em;
        }

.gallary-wrapper{
  text-align:center;
}

.sns-wrapper{
 width:100%;
 text-align:center;
 bottom:0px;      
 margin-top:10px;   
  z-index:1;
                 }

.sns2-wrapper{
 width:100%;
 text-align:center;
 bottom:0px;      
 margin-top:10px;   
  z-index:1;
                 }

.modoru-wrapper{
 text-align:center;
 margin-top:10px;
 margin-bottom:30px;
           }
 
.window-wrapper{
 text-align:center;
      }

#radi{
 border-radius:50%;
       }

.samurai-wrapper{
 background-color:black;
 margin-bottom:80px;
 margin-top:60px;
 text-align:center;
       }

.samurai-wrapper{
animation:fadeIn 10s ease 0s 1 normal;
-webkit-animation:fadeIn 7s ease 0s 1 normal;
              }

@keyframes fadeIn{
0%{ opacity:0 }
100%{opacity:1}
              }
@-webkit-keyframes fadeIn{
0%{opacity: 0}
100%{opacity:1}
              }

.footer-span{
 border-bottom:2px solid #B8860B;
       }

footer{
 background-color:black;
 height:350px;
           }

.footer-text{
 text-align:center;
 color:#DAA520;
              }

.footer-logo{
 text-align:center;
font-size:1.2em;
font-style:normal;
padding-top:20px;
padding-left:20px;
color:#DAA520;
                   }

}

@media screen and (min-width:415px){

body{ 
font-size:18px;
         }

.menu-wrapper{
 margin-bottom:30px;
          }

.menu-content {
    font-size:20px;
             }

.main{
 margin-right:1%;
 margin-left:1%;
      }

}

@media screen and (min-width:431px){

body{ 
font-size:20px;
         }

.header{
 border-bottom:1px solid #DAA520;
 height:60px;
 background-color:black;
 position:fixed;
 z-index:2;
 top:0px;
 width:100%;
         }

.header img{
position:fixed;
top:0px;
left:0px;
z-index:2;
         }

#headlogo{
 width:150px;
  }

.menu-wrapper{
 margin-bottom:30px;
          }

.menu-content {
    font-size:20px;
             }

.main{
 margin-right:8%;
 margin-left:8%;
      }

h2{
font-size:23px;
 }

#clip{
 width:230px;
 height:230px;
 border-radius:50%;
 object-fit:cover;
 object-position:-5% 0%;
 }

}

@media screen and (min-width:1025px){

body{ 
 font-size:20px;
 font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
         }

.header{
 border-bottom:1px solid #DAA520;
 height:60px;
 background-color:black;
 position:fixed;
 z-index:2;
 top:0px;
 width:100%;
         }

.header img{
position:fixed;
top:0px;
left:0px;
z-index:2;
         }

#headlogo{
 width:160px;
  }

#hummenu{
 font-weight:bold;
                 }

#hummenu1{
 font-weight:bold;
                 }

#menutitle{
 color:black;
 font-weight:bold;
      }

.samurai-wrapper{
 background-color:black;
 margin-bottom:80px;
 margin-top:0px;
 text-align:center;
       }

#lastmail{
 font-size:0.9em;
 }

#clip{
 width:270px;
 height:270px;
 border-radius:50%;
 object-fit:cover;
 object-position:-5% 0%;
 }

#menu-btn-check:checked ~ .menu-content {
    left:30%;/*メニューを画面内へ*/
}

.menu-content {
    font-size:20px;
             }

.text-wrapper{
line-height:;
text-align:left;
margin-right:auto;
margin-left:auto;
    }

.menu-wrapper{
 margin-bottom:30px;
          }

#hummenu #houkou{
 position:absolute;
 right:33%;
   }

#hummenu1 #houkou{
 position:absolute;
 right:33%;
   }

.main{
 margin-right:15%;
 margin-left:15%;
      }

h2{
font-size:23px;
 }

#doitu{
 color:white;
 background:#DAA520; 
}

#doitu2{
 color:white;
 background:#DAA520; 
}


}

@media screen and (min-width:1200px){

body{ 
 font-size:20px;
 font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
         }

.header{
 border-bottom:1px solid #DAA520;
 height:60px;
 background-color:black;
 position:fixed;
 z-index:2;
 top:0px;
 width:100%;
         }

.header img{
position:fixed;
top:0px;
left:0px;
z-index:2;
         }

h2{
font-size:24px;
 }

#headlogo{
 width:160px;
  }

#hummenu{
 font-weight:bold;
                 }

#hummenu1{
 font-weight:bold;
                 }

#menutitle{
 color:black;
 font-weight:bold;
      }

.samurai-wrapper{
 background-color:black;
 margin-bottom:80px;
 margin-top:0px;
 text-align:center;
       }

#clip{
 width:270px;
 height:270px;
 border-radius:50%;
 object-fit:cover;
 object-position:-5% 0%;
 }

#menu-btn-check:checked ~ .menu-content {
    left:30%;/*メニューを画面内へ*/
}

.menu-content {
    font-size:21px;
             }

.text-wrapper{
line-height:;
text-align:left;
margin-right:auto;
margin-left:auto;
    }

.menu-wrapper{
 margin-bottom:30px;
          }

#hummenu #houkou{
 position:absolute;
 right:33%;
   }

#hummenu1 #houkou{
 position:absolute;
 right:33%;
   }

.main{
 margin-right:15%;
 margin-left:15%;
      }

#doitu{
 color:white;
 background:#DAA520; 
}

#doitu2{
 color:white;
 background:#DAA520; 
}


}