@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

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




/*hmenu*/
.hmenu{
    height: 30px;
    position: absolute;
    position: fixed;
    right: 20px;
    top: 70px;
    width: 55px;
    z-index: 999999;
    cursor: pointer;
}
.hmenu__line{
    background: #222;
    display: block;
    height: 3px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.hmenu__line--center{
    top: 14px;
    height:3px;
    width:70%;
}
.hmenu__line--bottom{
    bottom: 0;
    height: 3px;
}


.hmenu__line--top.active{
    top: 15px;
    transform: rotate(45deg);
}


.hmenu__line--center.active{
    transform:scaleX(0);
}
.hmenu__line--bottom.active{
    bottom: 12px;
    transform: rotate(135deg);
}




/*hgnav*/
.hgnav{
    background-color: rgba(230,230,230,0.95);
    background-image:url(../img/wagara.png);
    background-repeat:no-repeat;
    backrgound-position:left top;
    background-size:20%;
    display:none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
}
@media screen and (max-width: 768px){
.hgnav{
   background-size:40%;
}}


.hgnav__wrap{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items:flex-start;
    position: absolute;
    width: 100%;
    margin-top:11%;
}
.hgnav__menu__item{
    margin: 13px 0;
    line-height:2.8;
}
.hgnav__menu__item a{
    color: #111;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.1em;
    font-weight:500;
    line-height:2.0;
    padding: 4px;
    text-decoration: none;
    transition: .5s;
}



@media screen and (max-width: 768px){
.hgnav__wrap{
     margin-top:22%;
}

.hgnav__menu__item a{
    line-height:1.4;
}}





.hgnav__menu__item a:hover{
    color: #666;
}


.box1 {
    padding: .3em;
    margin-top: 1em;
    margin-left:-40px;
    padding-left:40px;
    font-weight: 100;
    border: solid 2px #ccc;
}



.boxh {
    padding: .3em;
    margin-top: 1em;
    margin-left:-40px;
    padding-left:40px;
    font-weight: 100;
    background:none;
    border: solid 0px #ccc;
}















.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}
















/*左から右にフェードイン*/
.left-to-right {
  opacity: 0.1;
  transform: translateX(-70px);
  transition: all 1s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}


/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(20px);
  transition: all 1s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}





.inbound{
	position:absolute;
	left:2%;
	top:10%;
	color: #111;
	font-size:12px;
	z-index:999;
}
.inbound a {
	color:#111;
}