@charset "UTF-8";
/* CSS Document */






main{
margin-bottom: 300px;
width: 60%;
margin: 0 auto;
    max-width: 100%;
letter-spacing : 0.1em;
font-family: 'Kiwi Maru', serif!important;
}




.individual img{
border: 1px solid #000;
display: block;
width: 70%;
margin: 0 auto;

}




.top{
position: relative;
}

.top p{
font-size: 1.2em;
margin-top: 100px;
text-align: center;
line-height: 2em;

}


.top img{
width: 100%;
margin-top: 10px;
border: none;
}



.page{
display: flex;
width: 70%;
vertical-align: middle!important;
margin: 0 auto;

margin-top: 200px;

}







.page h1{
font-size: 3em!important;
padding: 0;
margin: 0;
}


.page p{
font-size:  1.5em!important;
padding-left: 10px;
}






.display{
display:block;
margin: 0 auto;
border: 1px solid #ccc;
    width: 70%;
}

.display table {
border-collapse: collapse;
text-align: left;
width: 100%;

}








.display>table th, table td {
padding: 10px;

}

.display tr {
border-bottom: solid 1px #ccc;
}










/*枠線が伸びて出現*/

.lineTrigger{
position: relative; /* 枠線が書かれる基点*/
opacity:0;
width: auto;
height:auto;
margin: 0 auto;
}

.lineTrigger.lineanime{
animation-name:lineAnimeBase;
animation-fill-mode:forwards;
}




.lineTrigger.lineanime img{
animation-name:fadein-one;
animation-duration:1s;
animation-fill-mode:forwards;
}



.top_page {
animation-name:fadein-one;
animation-duration:1.5s;
animation-fill-mode:forwards;

}



.top_page2 {

height: 70px;
animation-name:fadein-one;
animation-duration:1.5s;
animation-fill-mode:forwards;

}



@keyframes fadein-one {
0% {
opacity: 0;
}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}





@keyframes lineAnimeBase{
from {
opacity:0;
}

to {
opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
position: absolute;
content:"";
width:0;
height:1px;
background:#808080;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
position: absolute;
content:"";
width: 1px;
height:0;
background:#808080;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
top:0;
left:0;
}

.lineTrigger.lineanime::before {
animation: lineAnime .4s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
top:0;
right:0;
}

.lineTrigger.lineanime .line2::before {
animation: lineAnime2 .2s linear .4s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
bottom:0;
right:0;
}

.lineTrigger.lineanime::after {
animation: lineAnime .4s linear 0s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
bottom:0;
left:0;
}

.lineTrigger.lineanime .line2::after {
animation: lineAnime2 .2s linear .4s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
0% {width:0%;}
100%{width:100%;}
}

@keyframes lineAnime2 {
0% {height:0%;}
100%{height:100%;}
}

/*枠線内側の要素*/





.scrolldown4{
/*描画位置※位置は適宜調整してください*/
position:absolute;
top: 0;
right:50%;
/*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 1s ease-in-out infinite;

}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
0%{bottom:1%;}
50%{bottom:3%;}
100%{bottom:1%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
/*描画位置*/
position: absolute;
left:-20px;
bottom:10px;
/*テキストの形状*/
color: 000;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;

}

/* 矢印の描写 */
.scrolldown4:before {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
right: -6px;
/*矢印の形状*/
width: 1px;
height: 20px;
background:#000;
transform: skewX(-31deg);
}

.scrolldown4:after{
content:"";
/*描画位置*/
position: absolute;
bottom:0;
right:0;
/*矢印の形状*/
width:1px;
height: 50px;
background:#602b35;
}




.sa {
opacity: 0;
transition: all .4s ease;
}

.sa.show {
opacity: 1;
transform: none;
}

.footer{
margin-top: 200px;
padding-bottom: 200px;
}

.footer p{	color:  #06233E;
border-radius: 5px;
box-shadow: 0.5px 1px 3px #B1BFC8;
padding: 15px 10px;
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
margin-top: 2em;

}

.footer{
margin-top: 200px;
padding-bottom: 100px;
}

.footer a{
text-decoration: none;
}

.footer p:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}






@media (max-width: 1500px){

.page{
display: block;
height: auto;
width: 100%;
}




.page p{
padding:0;
margin: 0;
}

.individual img{

border: 1px solid #000;
width: 100%;

}



.display{
display: block;
margin: 0 auto;
width: 100%;
margin-bottom: 100px;
    border: none;
}

.display table {
border-collapse: collapse;
width: 100%;
}


.display>table th{
background-color:  #aaa;
color: #fff;
padding: 10px 20px;
}


.display td{
display: block;
width: 100%;
}

.display table tr td:first-child{
width: 100%;
border-bottom: 1px #B1BFC8 solid;
padding: 0;/*上下3pxで左右10px*/
margin-top: 30px;
}
.display table td {/*table内のtdに対して*/
font-size: 0.9em;
padding: 10px;/*上下3pxで左右10px*/
}




.display table td:first-of-type::before {
content: " ▶︎";
font-size: 0.6em;
margin-right: 5px;
}





}


@media (max-width: 600px){




main{
width: 90%;

}

    
    .top p{
font-size: 1em;

}



.page h1{
font-size: 1em!important;
}

    
    
.page p{
font-size: 1em!important;
}




}