@charset "UTF-8";

/*フォントメモ====================
しっぽり明朝（基本）
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

筑紫Aオールド明朝（基本）
font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
font-weight: 300;
font-style: normal;

ひな明朝（英語表記部分）
.hina-mincho-regular {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

zen角ゴシック（©など）
.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
====================フォントメモend*/


/*==========基本設定==========*/
/*----------全体設定----------*/
html{
    height:100%;

}

body{
    margin:0;
    padding:0;
    background-color:#f0fff0;
    font-family:serif;
    color:#888888;

}

/*----------フォント基本設定----------*/
h1,h3,h4{
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
    margin:0;
    padding:0;

}

h2{
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size:4vw;
    margin:0;
    padding:3vh 0;

}

p{
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 200;
    font-style: normal;
    line-height:1.5;
    margin:0;
    padding:0;

}

.hina{
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
    
}

@media(max-width:600px){
    h2{
        font-size:8vw;

    }
}

/*----------リスト・リンク基本設定----------*/
li{
    list-style-type: none;
}

a{
    margin:0;
    padding:0;
    color:#888888;
    text-decoration:underline;

}

a:visited{
    color:#888888;
}


/*----------ボックス基本設定----------*/
header,footer{
    margin:0;
    padding:0;
    
}

section{
    margin:0 5vw;
    padding:10vh 10vw;
    height:100vh;
    display:block;

}

ul{
    margin:0;
    padding:0;

}

/*@media(max-width:1000px){
    section{
        height:60vh;

    }

}*/

@media(max-width:600px){
    section{
        padding:5vh 10vw;
        height:70vh;

    }

}


/*===========ボックスごとの設定===========*/
/*----------ヘッダー----------*/
header{
    position:fixed;
    width:100vw;
    height:0;
    z-index:100;
    display:block;
    text-align:right;
    animation-name:fadeinanime;
	animation-duration:5s;
	animation-fill-mode:forwards;
	opacity:0;
	
	}

@keyframes fadeinanime{
	from{
		opacity:0;
		
		}
	
	to{
		opacity:1;
		
		}
	
}

nav ul{
    margin:0;
    padding:2vh 5vw 0 0;
    box-sizing: border-box;
    width:100vw;
    text-align:right;

}

nav li{
    display:inline;
    list-style-type:none;
    padding-left:1vw;
    font-size:1.5vw;

}

nav li a{
    text-decoration:none;

}

@media(max-width:600px){
    nav li{
        font-size:3.5vw;

    }
}

/*----------ヒーロー----------*/
.hero{
    position:relative;
    margin:0;
    padding:10vh 0 0 0;
    height:100vh;
    animation-name:fadeinanime;
	animation-duration:4s;
	animation-fill-mode:forwards;
	opacity:0;
	
	}

@keyframes fadeinanime{
	from{
		opacity:0;
		
		}
	
	to{
		opacity:1;
		
		}
	
}

.hero-img{
    position:left;
    width:55vw;
    height:500px;

}

.futari{
    object-fit:contain;
    width:100%;
    height:100%;

}


.hero-name{
    position:absolute;
    right:5vw;
    top:50vh;

}

.hero-name .position{
    font-size:1.4vw;
    color:#ffffff;
    text-shadow:
    0.03em 0.03em 0.6em #a5df6b,
    -0.03em 0.03em 0.6em #a5df6b,
    0.03em -0.03em 0.6em #a5df6b,
    -0.03em -0.03em 0.6em #a5df6b;
    letter-spacing:0.1em;
    line-height:1.3;
    text-align:left;

}

.hero-name h1{
    font-size:3.3vw;
    color:#ffffff;
    text-shadow:
    0.03em 0.03em 0.5em #a5df6b,
    -0.03em 0.03em 0.5em #a5df6b,
    0.03em -0.03em 0.5em #a5df6b,
    -0.03em -0.03em 0.5em #a5df6b;
    letter-spacing:0.2em;
    line-height:1.5;
    text-align:left;

}

/*.hero-name .brank{
    font-size:1.5vw;
    line-height:1.3;
}

.hero-name .furigana{
    font-size:2vw;
    color:#ffffff;
    text-shadow:
    0.03em 0.03em 0.3em #a1a1a1,
    -0.03em 0.03em 0.3em #a1a1a1,
    0.03em -0.03em 0.3em #a1a1a1,
    -0.03em -0.03em 0.3em #a1a1a1;
    letter-spacing:0.5em;
    line-height:1;
    text-align:left;
    
}*/

/*@media(max-width:1000px){
    .hero{
        padding:30vh 0 0 0;
        height:60vh;
        
    }
}*/

@media(max-width:600px){
    .hero{
        position:relative;
        margin:0;
        padding:30vh 0 0 0;
        height:60vh;
        
    }

    .hero-img{
        position:left;
        width:70vw;
        height:30vh;

    }

    .hero img{
        object-fit: cover;
        object-position: center right;

    }

    .hero-name{
        position:absolute;
        right:5vw;
        top:65vh;

    }

    .hero-name .position{
        font-size:2.5vw;
        text-align:right;


    }

    .hero-name h1{
        font-size:5.7vw;
        text-align:right;

    }

}


/*----------about----------*/
/*
.about{
    display:flex;
    align-items:center;
    text-align:right;

}

.about p{
    width:100vw;
    text-align:right;

}*/

/*----------news----------*/
.news-container{
    padding:7vh 5vw;

}


.news li{
    padding-bottom:4vh;

}

.news li time{
    font-size:1.3vw;

}

.news li h3{
    font-size:1.3vw;
    border-bottom:1px solid #a1a1a1;
}

.news li p{
    font-size:1.2vw;
    padding:2vh 3vw;
}

@media(max-height:500px){
    .news li time,.news li h3{
        font-size:1.8vh;

    }

    .news li p{
        font-size:1.5vh;

    }
}

@media(max-width:600px){
    .news li time,.news li h3{
        font-size:3vw;

    }

    .news li p{
        font-size:2vw;

    }

}

/*----------profile----------*/
.profile-container{
    padding:7vh 5vw;
    display:flex;
    /*height:70vh;*/

}

.profile-image{
    width:40%;
    text-align:center;
    /*display: flex;
    justify-content: center;
    align-items: center;*/

}

.profile-image img{
    width:10vw;
    height:auto;

}

.profile-text{
    width:60%;
    display:block;

}

.profile-text p{
    padding:2vh 2vw;

}

.profile-name{
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size:2vw;
    letter-spacing:0.2em;

}


.profile-introduction{
    font-size:1.2vw;
    line-height:1.5;

}

.profile-link-title{
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size:1.5vw;

}

.profile-link{
    font-size:1.2vw;

}

@media(max-width:600px){

    .profile-container{
        display:block;

    }

    .profile-image{
        width:100%;
        text-align:center;

    }

    .profile-image img{
        width:20vw;
        height:auto;

    }

    .profile-text{
        width:100%;

    }

    .profile-text p{
        padding:0 2vw 3vh 2vw;

    }

    .profile-name{
        font-size:5vw;
        letter-spacing:0.2em;
        text-align:center;

    }

    .profile-introduction{
        font-size:2vw;

    }

    .profile-link-title{
        font-size:1.5vw;

    }

    .profile-link{
        font-size:2vw;

    }

}

/*----------contact----------*/
.contact-container{
    height:60vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.contact p{
    text-align:center;
    padding:5vh 0;
    font-size:1.2vw;

}

@media(max-width:600px){
    .contact{
        height:30vh;
        padding-bottom:10vh;

    }

    .contact-container{
        height:20vh;
    }

    .contact p{
        font-size:2vw;
        padding:2vh 0;

    }

}


/*----------footer----------*/
footer{
    text-align:center;
    padding:2vh;

}
footer img{
    width:2.5vw;
    height:auto;

}

footer h4{
    font-size:1.5vw;
    letter-spacing:0.2em;

}

footer a{
    text-decoration: none;

}

footer p{
    font-size:0.8vw;

}

@media(max-width:600px){
    footer img{
        width:3vw;
        height:auto;

    }

    footer h4{
        font-size:2vw;

    }

    footer p{
        font-size:1.5vw;

    }

}