@charset "UTF-8";

.pane-contents,
.edit-format {
    background: #505050;
}

/* .pane-contents--container {
    width: 1200px;
} */
/* .pane-main {
    
} */

@media screen and (max-width: 768px) {}


/* ==================================================
Page Head Custom
================================================== */
#page-head {}

@media screen and (max-width: 768px) {

    #page-head {}

}

/* ==================================================
Page Body
================================================== */
#page-body {
    overflow-x:hidden;
    max-width: 800px;
    position: relative;
}
.pane-main {
  margin: 0px;
}

.archivebg {
  background: #fff; 
  width: 100vw;
  margin-left: calc(50% - 50vw); 
  height:200px;
}

.none {
    display: none;
}

.flex {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	align-items: flex-start;
}


#head-title {
    margin-top: 60px;
}


    
.seasons {
  font-family: "the-seasons", sans-serif;
  letter-spacing: 1.3px;
    }

.grp1 {
position:relative;
margin:0 auto;
}

.grp1 a{
display:block;
}
.grp1 a img {
display:block;
}
.grp1 a:hover img {
opacity:1;
filter:none;
transition:none;
}

.firstimg {
width:100%;
margin:0 auto;
}

.logo {
position:absolute;
width:75%;
top:5%;
left:50%;
transform:translate(-50%,-10%);
opacity:0;
animation: fadeIn 1.5s ease-out forwards;
}

@keyframes fadeIn{
from {
opacity:0;
transform:translate(-50%,20%);
}
to{
opacity:1;
transform:translate(-50%,-10%);
}
}

.grp2 {
position:relative;
margin:0 auto;
}
.grp2-1 {
position:relative;
margin:0 auto;
}

.img2 {
margin:0 auto;
width:55%;
}

.text1 {
position:absolute;
top:60%;
left:12%;
font-size:22px;
color:#fff;
}

.text2 {
position:absolute;
top:70%;
left:0;
font-size:40px;
color:#fff;
}

.text3 {
position:absolute;
top:63%;
left:71%;
font-size:27px;
color:#fff;
}

.itemcredit {
text-align: left;
color: #fff;
font-size: 12px;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}


.grp3 {
margin:0 auto;
width:75%;
}


.grp4 {
position:relative;
margin:0 auto;
}

.grp4 img{
width:55%;
}

.text4 {
position:absolute;
top:68%;
left:12%;
font-size:25px;
color:#fff;
}

.itemcredit2 {
position:absolute;
top:80%;
left:2%;
color:#fff;
text-align:left;
font-size: 12px;
}

.grp5 {
  background: #fff; 
  width: 100vw;
  margin-left: calc(50% - 50vw); 
}


.grp5 .inner {
max-width: 800px;
  margin: 0 auto;
  padding: 40px;

}

.grp5 img {
  width: 100%;
  max-width: 800px;
}


.grp6 {
position:relative;
margin:0 auto;
}

.grp6 img{
width:55%;
}

.text5 {
position:absolute;
top: 84%;
left: 55%;
font-size:25px;
color:#fff;
}

.itemcredit3 {
position:absolute;
top: 94%;
left: 55%;
color:#fff;
text-align:left;
font-size: 12px;
}

.img9 {
width:80%;
}

.img10 {
width:100%;
max-width:800px;
}

.grp7 {
position:relative;
margin:0 auto;
}

.grp7 img{
width:55%;
}

.text6 {
position:absolute;
top: 90%;
left:50%;
transform:translate(-50%,-50%);
font-size:25px;
color:#fff;
text-align:center;
}

.creditsec {
position:relative;
margin:0 auto;
}

.itemcredit4 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
text-align:left;
font-size: 12px;
}

.grp8 {
  display: flex;
  justify-content: flex-start;
  width: 700px;
}

.grp8 a {
  display:block;
}
.grp8 a img {
  display:block;
  width: 100%;
  height: auto;
  
}


.checkallbtn a {
	background-color:transparent;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-size:17px;
	padding:15px 76px;
	text-decoration:none;
}
.checkallbtn a:visited{
	color:#fff;
}
.checkallbtn a {
	color:#fff;
	-webkit-text-fill-color: #fff;
}

.checkallbtn:hover {
	background-color:transparent;
}
.checkallbtn:active {
	position:relative;
	top:1px;
}



/* タブレット用 */
@media screen and (max-width: 768px) {


}

/* SP用 */
@media screen and (max-width: 480px) {
.archivebg {
  height:100px;
}
.img2 {
width:48%;
}
.text1 {
  left: 13%;
  font-size: 11px;
}
.text2 {
  left: 2%;
  font-size: 18px;
}
.text3 {
  left: 71%;
  font-size: 15px;
}

.itemcredit {
font-size: 9px;
width: 60%;
}
.text4 {
  top: 60%;
  font-size: 15px;
}
.itemcredit2 {
  top: 76%;
  left: 4%;
  font-size: 9px;
}

.grp5 .inner {
  padding: 15px;
}

.text5 {
top: 82%;
left: 53%;
font-size: 12px;
}

.itemcredit3 {
top: 92%;
left: 53%;
font-size: 9px;
}

.text6 {
  top: 87%;
  font-size: 14px;
}

.itemcredit4 {
  font-size: 9px;
  white-space: nowrap;
}

.grp4 img, .grp6 img, .grp7 img{
width:48%;
}
.grp8 {
width:90%;
}
.grp8 a img {
display:block;
  } 

}




/* Fade in */
.inView {
    opacity: 0;
}

.imgFade {
    opacity: 0;
}

.imgAnim {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes imgAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.imgFade.fadeT {
    opacity: 0;
    transform: translateY(50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeT {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgFade.fadeR {
    opacity: 0;
    transform: translateX(50px);
    position: relative;
    z-index: 5;
}

.imgFade.fadeL {
    opacity: 0;
    transform: translateX(-50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeR {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgAnim.fadeL {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}