@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body{
margin:0 auto;
padding:0;
font-family: source-han-serif-japanese, serif; 
font-size:17px;
text-align:left;
color:#333;
min-width:1200px;
}
#wrapper{ background: url("../images/bg.jpg") center bottom no-repeat; height: 100vh; min-height: 640px; position: relative; overflow: hidden;}
@media screen and (min-width:1568px){
#wrapper{ background-size: cover;}
}
@media screen and (max-width:640px){
html,body{ font-size:3.5vw; min-width:240px; max-width:640px;}
#wrapper{ background-size: cover; height: auto; min-height: 100vh;}
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{ margin:0 auto; text-align:center;}

p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:640px){
p{ line-height:1.5em;}
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

/*フッター*/
#footer{ position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; margin: auto;}
.copyright{ text-align:center;}
@media screen and (max-width:640px){
#footer{ position:static; margin:3vw auto;}
#footer .copyright img{ width: 66.6666%;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width: 100%;}
@media screen and (max-width:640px){
}

/*nav*/
#nav{ position: absolute; left: 60px; bottom: 80px;}
#nav ul li{ margin-top: 30px;}
#nav ul li a{ display: inline-block; padding: 10px 30px; background: rgba(255,255,255,0.5); transition: 0.3s;}
#nav ul li a:hover{ background: rgba(255,255,255,0.8);}
@media screen and (max-width:640px){
#nav{ position: static; margin-top: 6vw;}
#nav ul{ letter-spacing: -1em; text-align: center;}
#nav ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin: 0 1vw;}
#nav ul li img{ height: 4.2vw;}
#nav ul li a{ display:block; padding:1vw 1.5vw;}
}

h1{ position: absolute; left: 60px; top: 40px;}
h1 span{ display: inline-block; padding: 12px 15px 15px; background: rgba(255,255,255,0.5); margin-bottom: 20px; transition: 0.3s;}
h1:hover span{ background: rgba(255,255,255,0.8);}
@media screen and (max-width:640px){
h1{ position:static; padding: 6vw 3vw 3vw;}
h1 span{ padding:1vw 1.5vw 1.5vw; margin-bottom:3vw;}
h1 span img{ height: 4.5vw;}
}

/*top*/
#top h2{ position: absolute; right: 60px; top: 40px;}
#top h2 span{ display: inline-block; padding: 15px 15px; background: rgba(255,255,255,0.5);}
@media screen and (max-width:640px){
#top h2{ position:static; text-align: right; padding: 3vw 3vw 66.6666vw;}
#top h2 span{ padding: 1.5vw;}
#top h2 span img{ width: 4.5vw}
}

/*profile*/
#profile #profile_cont{ position: absolute; right: 60px; top: 40px; width: calc(100% - 420px); max-width: 880px; height: calc(100vh - 120px); min-height: 520px; padding:40px 30px 40px 40px; background: rgba(255,255,255,0.5);}
@media screen and (max-width:640px){
#profile #profile_cont{ position:static; width:94%; max-width:94%; height:auto; min-height:1px; padding:6vw 3vw; margin: 3vw auto;}
}
#profile #profile_cont dl{ display:flex; width: 100%;}
#profile #profile_cont dl dt{ width: 280px;}
#profile #profile_cont dl dt p{ text-align: center; margin-top: 0.5em;}
#profile #profile_cont dl dt p a{ text-decoration: underline;}
#profile #profile_cont dl dd{ flex: 1; padding: 0 20px 0 30px; position: relative; overflow-y: scroll; height: calc(100vh - 200px); min-height: 440px;}
#profile #profile_cont dl dd ul{ position: absolute; right: 30px; top: 0; letter-spacing: -1em;}
#profile #profile_cont dl dd ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin-left: 10px;}
#profile #profile_cont dl dd p.personal_date{ font-size: 16px; letter-spacing: 0.1em; line-height: 2em;}
#profile #profile_cont dl dd h3{ font-size: 15px; font-weight: normal; margin-bottom: 0.5em;}
#profile #profile_cont dl dd p{ font-size: 13px; line-height: 1.5em;}
@media screen and (max-width:640px){
#profile #profile_cont dl{ display:block;}
#profile #profile_cont dl dt{ width:100%; text-align: center;}
#profile #profile_cont dl dt img{ width: 66.6666%;}
#profile #profile_cont dl dd{ padding:3%; height:auto; min-height:1px;}
#profile #profile_cont dl dd ul{ position:static; text-align: center;}
#profile #profile_cont dl dd ul li{ margin:1.5%;}
#profile #profile_cont dl dd ul li img{ width: 9vw;}
#profile #profile_cont dl dd p.personal_date{ font-size:4vw;}
#profile #profile_cont dl dd h3{ font-size:3.5vw;}
#profile #profile_cont dl dd p{ font-size:3vw;}
}

/*news*/
#news #news_cont{ position: absolute; right: 60px; top: 40px; width: calc(100% - 420px); max-width: 880px; height: calc(100vh - 120px); min-height: 520px; padding:40px 30px 40px 40px; background: rgba(255,255,255,0.5);}
#news #news_cont .maincontent{ position: relative; overflow-y: scroll; height: calc(100vh - 200px); min-height: 440px;}
#news #news_cont .maincontent h3{ font-weight: normal; margin-bottom: 1em;}
#news #news_cont .maincontent a{ text-decoration: underline;}
#news #news_cont .maincontent a:hover{ text-decoration: none;}
@media screen and (max-width:640px){
#news #news_cont{ position:static; width:94%; max-width:94%; height:auto; min-height:1px; padding:6vw 3vw; margin: 3vw auto;}
#news #news_cont .maincontent{ height:auto; min-height:1px;}
}

/*gallery*/
#gallery #gallery_cont{ padding:40px 50px 0 380px; width: 100%;}
#gallery #gallery_cont .maincontent{ position: relative; overflow-x: hidden; overflow-y: scroll; width: 100%; height: calc(100vh - 120px); min-height: 440px; padding: 0 20px;}
#gallery #gallery_cont ul{ letter-spacing: -1em;}
#gallery #gallery_cont ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; width: 33.3333%; padding: 10px; transition: 0.3s; cursor: pointer;}
#gallery #gallery_cont ul li:hover{ opacity: 0.7;}
@media screen and (max-width:640px){
#gallery #gallery_cont{ padding:3%;}
#gallery #gallery_cont .maincontent{ height:auto; min-height:1px; padding:3vw;}
#gallery #gallery_cont ul li{ width: 33.3333%; padding:1.5vw;}
}



@media print, screen and (min-width:641px){
.smp{ display:none !important;}
}
@media screen and (max-width:640px){
.pc{ display:none !important;}
}