@charset "UTF-8";
/*!
* ress.css • v1.2.2
* MIT License
* github.com/filipelinhares/ress
* 全ての要素にbox-sizing: border-box;.
* 全ての背景画像にbackground-repeat: no-repeat.
*/html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
img{vertical-align: bottom;
max-width: 100%;
}

/*-------------------------------------------------*/
body{
color:#333;
}

header{
width:100%;
height:100vh;
background:url(../img/museum.jpg)no-repeat center center/cover;
position:relative;
}


h1{
font-size:60px;
padding:10px 20px;
background: #fff;
position: absolute;
top:180px;
left:300px;
font-family: 'Train One', cursive;
letter-spacing: 0.2em;
}
.sp-new-line{
display:none;
}
.header-p{
padding:10px 20px;
font-size:22px;
background: #fff;
position: absolute;
top:305px;
left:550px;
letter-spacing: 0.1em;
}
#nav-btn{
display:none;
}
#gnav{
 display:none;
}
.g-nav{
width:180px;
position: fixed;
top:0;
left:0;
background-color:rgba(0,0,0,0.2);
padding:20px 0;
}
.g-nav>ul{
padding-left:10px;
}
.g-nav li{
padding:20px 0;
font-weight: bold;
}
.g-nav a{
font-size:10px;
display:block;
color:#fff;
letter-spacing: 0.2em;
}
.g-nav a:hover{
color:#ffe203;
}
.g-nav li.current a{
color:#ffe203;
}
.prologue{
padding: 100px 0 50px;
background: #fff;
}
.pv{
width:960px;
margin: 0 auto 200px ;

}
.pv>h2{
text-align: center;
font-size: 30px;
margin-bottom: 100px;
letter-spacing: 0.2em;
font-family: 'Train One', cursive;

}
#video{
width:100%;
object-fit:cover;
object-position: center;
padding: 10px;
border:15px solid #ddd;

}
.pl-wrapper{
margin: 0 auto 100px;
max-width:960px;
display: flex;
justify-content: space-between;
}

.pl{
width:55%;
padding:10px;
border:15px solid #ddd;
}
.pl-txt{
width:45%;
padding:20px;
}
.pl-txt>h3{
text-align: center;
margin-bottom: 20px;
border-bottom:10px solid rgba(45, 85, 255, 0.57);
}
.pl-txt>p{
font-size:13px;
}
.name{
text-align: end;
font-family: 'M PLUS 1p', sans-serif;
}
.aos{
text-align: center;
margin: 10px 0 100px;
}
.aos>a{
color:#333;
display: inline-block; 
border-bottom: 3px solid rgba(45, 85, 255, 0.57);
transition:1s;
}
.aos>a:hover{
letter-spacing: 0.4em;
color:rgba(45, 85, 255, 0.57);
border-bottom: 0;
}
.bg{
width:100%;
height:100vh;
background: url(../img/wall.jpeg)center center /cover;
position: fixed;
top:0;
z-index: -1;
}
.sd{
text-align: center;
background-color:#fff;
font-family: 'Train One', cursive;
letter-spacing: 0.2em;
}
.down{
width:50px;
height:50px;
margin: 10px auto 150px;
background-color:#fff;
animation: scale 3s ease 0s infinite alternate;
}
@keyframes scale {
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.container{
width: 100%;
margin: 0 auto;
}
.effect>h2{
font-size:1.5vw;
border-top: 3px solid rgba(45, 85, 255, 0.57);
border-bottom: 5px solid rgba(45, 85, 255, 0.57);
text-align: center;
margin-bottom: 200px;
background-color:rgba(255, 255, 255, 0.62);
}
.box{
max-width: 960px;
margin:0 auto 600px;
position:relative;
}
.b2,.b8,.b14,.b16,.b20,.b27,.p34{
margin-bottom: 700px;
}
/* Side　横 ２、８、１４、１６、２０、２５、２６、２７、３４*/

.photo-box-v{
max-width:450px;
box-shadow:0 0 20px #ccc;
margin-left:70px
}
.photo-box-v>img,.photo-box-s>img{
background-color:#fff;
padding:10px;
}
.photo-box-s{
max-width:750px;
margin:0 auto;
box-shadow:0 0 10px #ccc;
}
.p1,.p20,.p30{
border: 10px solid #ffe86f;
}
.p2,.p15{
border:10px solid #808000;
}
.p3,.p13,.p22{
border: 10px solid #ff89a0;
}
.p4,.p17,.p33{
border: 10px solid #66cdaa;
}
.p5,.p12,.p18,.p24,.p32{
border: 10px solid #b8860b;
}
.p6,.p16,.p26{
border: 10px solid #ff8c00;
}
.p7,.p11,.p21,.p29{
border: 10px solid #c5adf7;
}
.p8,.p34{
border: 10px solid #b0c4de;
}
.p9,.p23,.p28{
border: 10px solid #ffeeee;
}
.p10,.p14,.p27{
border: 10px solid #fff8dc;
}
.p19,.p25,.p31{
border: 10px solid #db7093;
}


.txt-box{
width:420px;
padding: 15px;
background-color:#FFF;
box-shadow:0 0 10px #ccc;/*陰の付け方　最近の設定で多い*/
position:absolute;
right:0;
bottom:50px;
}
.b2>.txt-box,.b8>.txt-box,.b14>.txt-box,.b16>.txt-box,.b20>.txt-box,.b25>.txt-box,.b26>.txt-box,.b27>.txt-box,.b34>.txt-box{
width:750px;
position: static;
margin: 20px auto;
}
.yoko{
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.yoko h3{
padding-right: 30px;
font-size:25px;
}
.yoko>.title{
margin-bottom: 0;
}
.txt-box>h3{
font-size:24px;
text-align: center;
margin-bottom: 20px;
}
h3.marie{
font-size:20px;
}
.title{
font-size:20px;
margin-bottom: 20px;
text-align: center;
}
.title>span{
font-size:16px;
}
.museum{
margin-bottom: 20px;
text-align: center;
font-size:16px;
}
.imps{
font-size:14px;
line-height: 1.7;
}
.aos-site{
text-align: center;
}
.aos-site>a{
font-size:14px;
color:#333;
border-bottom:3px solid rgba(45, 85, 255, 0.57);
transition: 1s;
}
.aos-site>a:hover{
letter-spacing: 0.2em;

}
.thanks{
width:100%;
margin-bottom: 100px;
}
.thanks-inner{
max-width: 768px;
margin: 0 auto;
padding:20px;
background:rgba(255,255,255,0.95);
font-size:14px;
line-height: 2.8;
}
.thanks-inner>h2{
text-align: center;
font-family: 'Train One', cursive;
font-size: 32px;
padding: 20px 0 50px;
}
footer{
width:100%;
height:80px;
text-align: center;
line-height: 80px;
color:#fff;
background-color:rgba(0,0,0,0.4);
}

/*1200px以下
-------------------------------------*/
@media (max-width:1292px){
header{
background:url(../img/museum.jpg)no-repeat center bottom/cover;
}
h1{
font-size:50px;
padding:30px 20px 10px;
background: #fff;
text-align: center;
position:static;
font-family: 'Train One', cursive;
letter-spacing: 0.2em;
}
.header-p{
padding:20px;
font-size:16px;
background: #fff;
position:static;
 left:0;
letter-spacing: 0.1em;
text-align: center;
}
.bg{
height:100%;
}
.pv{
width:100%;
padding: 0 10px;
}
#video{
border: 5px solid #ddd;
padding:5px;
}
/*ハンバーガーメニュー
--------------------------------------*/
.g-nav{
width:100%;
height:100%;
background-color:#b1b1b1;
display: none;
 z-index: 1000000;
}
.g-nav>ul{
display: block;
}
.g-nav li{
text-align: center;
padding:20px;
}
.g-nav a{
font-size:20px;
}
#nav-btn{
width:50px;
height:50px;
background-color:rgba(255,255,255,0.9);
position:fixed;
top:20px;
 right: 20px;
cursor: pointer;
z-index: 10000000;
display: block;
}
#nav-btn>span{
width:30px;
height:3px;
background:#000;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
transition: 0.2s;
}
#nav-btn>span::before{
display: block;
content:"";
background:#000;
width:30px;
height:3px;
position:absolute;
top:-13px;
transition:0.3s;
}
#nav-btn>span::after{
display: block;
content:"";
background:#000;
width:30px;
height:3px;
position:absolute;
bottom:-13px;
transition:0.3s;
}
#nav-btn.click>span{
background:transparent;/*透明にする*/
}

#nav-btn.click>span::before{
top:0;
transform: rotate(45deg);
}
#nav-btn.click>span::after{
bottom:0;
transform: rotate(-45deg);
}
#nav-btn.click{
background:transparent;/*透明にする*/
}

}
@media (max-width:1024px){
header{
height:60vh;
}
.txt-box{
right:10px;
}
}
@media (max-width:959px){
header{
height:80vh;
}
h1{
font-size:32px;
}
.header-p{
font-size:16px;
}
.effect>h2{
font-size:16px;
}
.photo-box-v{
margin:0 auto;
}
.txt-box{
position:static;
margin: 20px auto;
width:750px;
}
.box{
margin:0 auto 400px;
}
}
@media (max-width:767px){
header{
background:url(../img/museum.jpg)no-repeat left center/cover;
}
.g-nav a{
font-size:14px;
}
.pl-wrapper{
display: block;
margin: 0 10px 100px;
}
.pl{
width:100%;
margin: 0 auto;
}
.pl-txt{
width:100%;
padding:20px;
}
.name{
text-align: center;
}
.box{
margin:0 10px 200px;
}
.txt-box{
width:100%;
}
.b2>.txt-box,.b8>.txt-box,.b14>.txt-box,.b16>.txt-box,.b20>.txt-box,.b25>.txt-box,.b26>.txt-box,.b27>.txt-box,.b34>.txt-box{
width:100%;
}
.yoko{
display: block;
}
.yoko h3{
text-align: center;
padding: 0;
margin-bottom: 20px;
}
.thanks{
margin:0 auto 100px;
padding: 0 10px;
}
}
@media (max-width:500px){
h1{
font-size:24px;
padding:10px;
}
.sp-new-line{
display:block;
}
.header-p{
font-size:14px;
padding:10px;
}
.prologue{
padding: 80px 0 30px;
}
.pv{
margin: 0 auto 100px ;
}
.pv>h2{
font-size: 22px;
margin-bottom: 50px;
}
.thanks-inner>h2{
font-size: 22px;
}
}