@charset "utf-8";

/*keyvisual*/
.pageCommon .keyvisual{
margin-top: 235px;
}
@media screen and (max-width:767px){
.pageCommon .keyvisual{
margin-top: 70px;
}
}
.pageCommon .keyvisual .bg{
width: 74%;
height: 420px;
}
@media screen and (max-width:767px){
.pageCommon .keyvisual .bg{
width: 100%;
height: 220px;
}
}
#about.pageCommon .keyvisual .bg{
background: url("../images/page/key-about.jpg") center ,no-repeat;
background-size: cover;
}
#information.pageCommon .keyvisual .bg{
background: url("../images/page/key-information.jpg") center right ,no-repeat;
background-size: cover;
}
#photo.pageCommon .keyvisual .bg{
background: url("../images/page/key-photo.jpg") center right ,no-repeat;
background-size: cover;
}
.pageCommon .keyvisual .pageTtl{
top: -45px;
left: 85%;
transform: translate(-50%,0);
font-size: 5.0rem;
white-space: nowrap;
}
@media screen and (max-width:767px){
.pageCommon .keyvisual .pageTtl{
position: static;
transform: translate(5%,0);
font-size: 3.0rem;
margin: 50px auto 15px;
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
}
}
/*about*/
.historyblock{
width: calc(50% - 45px);
margin-left: 45px;
}
@media only screen and (max-width:980px){
.historyblock{
width: 100%;
margin-left: 0;
}
}
.historyblock .historybox .year{
padding: 0 30px;
}
@media only screen and (max-width:767px){
.historyblock .historybox .year{
padding: 0 15px 0 30px;
}
}
.historyblock .historybox .year:after{
content: "";
position: absolute;
top: 50%;
left: 11px;
transform: translate(0,-50%);
width: 6px;
height: 1px;
background: #aeaeae;
}
.historyblock .historybox .place{
margin-left: 30px;
}
@media only screen and (max-width:767px){
.historyblock .historybox .place{
margin-left: 15px;
}
}
.historyblock .afterNote{
padding-left: 30px;
}
@media only screen and (max-width:767px){
.historyblock .afterNote{
padding-left: 15px;
}
}
.profileBox {
width: 48%;
}
@media only screen and (max-width:980px){
.profileBox {
width: 100%;
margin-bottom: 50px;
}
}
.profileBox .profileBoxIn {
width: 100%;
padding: 75px 30px;
box-sizing: border-box;
box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 0px 0px 50px 1px rgba(10,10,10,0.1);
}
@media only screen and (max-width:980px){
.profileBox .profileBoxIn {
padding: 40px 20px;
}
}
.profileBox .profileBoxIn .txtBox{
max-width: 350px;
width: 100%;
margin: 0 auto;
}
.profileBox .profileBoxIn .blogBtn a{
top: 13px;
right: 0;
width: 66px;
height: 23px;
line-height: 23px;
border-radius: 15px;
border: 1px solid #000;
}
.profileBox .profileBoxIn .blogBtn a:hover{
background: #fff;
}
/*information*/
#information .infoTop .txtBox{
width: 37.5%;
}
@media only screen and (max-width:980px){
#information .infoTop .txtBox{
width: 100%;
margin-bottom: 30px;
}
}
#information .img{
width: 57%;
}
@media only screen and (max-width:980px){
#information .img{
width: 100%;
}
}
#information .map  .mappin{
width: 12px;
margin-right: 10px;
}
#information .address{
max-width: 870px;
}
@media only screen and (max-width:980px){
#information .address{
justify-content: space-around;
}
}
#information .addBox .ttl{
margin-right: 30px;
}
@media only screen and (max-width:980px){
#information .addBox .ttl{
width: 100%;
margin-right: 0;
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
margin-bottom: 15px;
}
}
#information .addBox .note{
padding-top: 20px;
}
@media only screen and (max-width:980px){
#information .addBox .note{
padding-top: 0;
width: 100%;
}
}
#information .addBox{
margin: 0;
}
@media only screen and (max-width:980px){
#information .addBox{
display: inline-block;
}
}
@media only screen and (max-width:767px){
#information .addBox{
width: 100%;
}
#information .addBox:first-child{
margin-bottom: 30px;
}
}
/*photo*/
#photo .imgBlock{
margin-bottom: 40px;
}
@media screen and (max-width:1088px){
#photo .imgBlock{
margin-bottom: 3.676470vw;
}
}
#photo .block01{
padding-top: 69.27083333%;
}
#photo .block02{
padding-top: 44.7916666%;
}
#photo .img{
width: 30.52083333%;
}
#photo .block01 .img01{
top: 0;
left: 0;
}
#photo .block01 .img02{
bottom: 0;
left: 0;
}
#photo .block01 .img03{
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block01 .img04{
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block01 .img05{
top: 0;
right: 0;
}
#photo .block01 .img06{
top: 50%;
transform: translate(0,-50%);
right: 0;
}
#photo .block01 .img07{
bottom: 0;
right: 0;
}
#photo .block02 .img08{
top: 0;
left: 0;
}
#photo .block02 .img09{
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block02 .img10{
top: 0;
right: 0;
}
#photo .block01 .img11{
top: 0;
left: 0;
}
#photo .block01 .img12{
bottom: 0;
left: 0;
}
#photo .block01 .img13{
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block01 .img14{
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block01 .img15{
top: 0;
right: 0;
}
#photo .block01 .img16{
top: 50%;
transform: translate(0,-50%);
right: 0;
}
#photo .block01 .img17{
bottom: 0;
right: 0;
}
#photo .block02 .img18{
top: 0;
left: 0;
}
#photo .block02 .img19{
bottom: 0;
left: 0;
}
#photo .block02 .img20{
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block02 .img21{
top: 0;
right: 0;
}
#photo .block02 .img11{
top: 0;
left: 0;
}
#photo .block02 .img12{
bottom: 0;
left: 0;
}
#photo .block02 .img13{
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block02 .img14{
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#photo .block02 .img15{
top: 0;
right: 0;
}
/*---------------------------------------*/
/* layout */
/*---------------------------------------*/
#container{
min-height:100vh;
}