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

body{
min-width: 1200px;
letter-spacing : 0.1em;
background-color:#fff;
font-family: 'Sawarabi Gothic', sans-serif;
margin: 0;
padding: 0;
}

.container {
background: linear-gradient(-135deg, #073151,#957597, #eb6162,#fad98e)!important;
z-index: 10;
}

.container .menu__single>a{
color: #fff!important;
}

.box1:after{
	content:"　toppics!";
	color: #fff;
	font-size: 1.2em;
	font-family: 'Staatliches', cursive;
}

.box2 a{
	display: inline-block;
	position: relative;
	color: #fff;
 	text-decoration: none;
}
.box2 a:before{
	content: "";
	position: absolute;
	 left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: #fff!important;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.2s;
}
.box2 a:hover:before {
	transform: scale(1);
}

.box3 a{
	color: #fff!important;
}

.box3 li{
border-left: solid 2px #fff!important;
}


body{
max-width: 100%;
letter-spacing : 0.1em;
font-family: 'Kiwi Maru', serif!important;
margin: 0;
padding: 0;

}

.scrolldown4 span{
color: #0a3254!important;
}

/* 矢印の描写 */
.scrolldown4:before {
background:#0a3254!important;
}

.scrolldown4:after{
background:#0a3254!important;
}





/*.shutter{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#1e1e1e;
z-index:9999;
animation: byeShutter 2.6s forwards; 
}*/

.shutter{
position:absolute;
top:0;
left:0;
bottom:0;
margin:auto;
background-color:#0a3254;
height:1px;
animation: shutterOpen 1.5s forwards;
}





/*@keyframes byeShutter{
70%{
opacity:1;
}
100%{
opacity:0;
display:none;
z-index:1;
}
}*/

@keyframes shutterOpen{
0%{
width:0;
height:1px;
}
50%{
width:100%;
height:1px;
}

100%{
width:100%;
height:30%;
opacity:  0.4;
}
}

/*@keyframes contentScale{
70%{
transform:perspective(800px) scale(0.9) rotateX(15deg);
}
100%{
transform:perspective(800px) scale(1) rotateX(0);
}
}
*/		


.monotop{
position: relative;
}

.fadeIn{
position: absolute;
top: 42%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
color: #fff;
z-index: 9999;
}

@keyframes fadeInAnime{
0% {
opacity: 0;
}
50% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.monotop{
z-index: -1;
}





/*========= レイアウトのためのCSS ===============*/


#header{
width:100%;
height: 100vh;
position: relative;
} 

#header:before{
content: '';
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
}

#container{

z-index:1;
background:#fff;
width: 1200px;
margin: 0 auto;
}

.a_1 {
position: relative;
width: 85%;
margin: 0 auto;
margin-top: 200px;
}






.a_1 p{
top: 350px;
left: 130px;
font-size: 2.2em;
line-height: 2em;
}


.flipLeftTrigger{
position: absolute;
z-index: 99;
}

.f-1{
top: 415px;
left: 130px;
}

.f-2{
    top: 485px;
left: 130px;
}




.a_2{
position: relative;
	display: block;
	width: 90%;
	margin: 0 auto;
	height:  auto;
}


.mart img{
	display: block;
	margin-top: 20px;
}


.a_3{
position: relative;
width: 90%;
margin: 0 auto;
margin-top: 200px;
}







.a_4{
position: relative;
width: 90%;
margin: 0 auto;
margin-top: 200px;
}




.a_5{
margin-top: 200px;
}

.a_5 img{
display: block;
width: 60%;
margin: 0 auto;
}


.a_6 {
display: flex;
width: 900px;
margin: 0 auto;
margin-top: 200px;
}

.a_6 div:nth-child(2){
display: block;
padding-left: 3em;
}

.a_6 p{
font-size: 1.4em;
padding-top: 7em;
}

.a_6 a{
width: 100px;
text-decoration: none;
color:  #06233E;
border-radius: 5px;
box-shadow: 0.5px 1px 3px #B1BFC8;
font-size: 0.8em;
padding: 6px 10px;
margin-left: 80%;
}

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


.a_7 img{
display: block;
margin: 0 auto;
text-align: center;
padding: 50px;
box-shadow: 0.5px 1px 3px #B1BFC8;
border-radius: 30px;
}


.a_7{
position: relative;
margin-top: 200px;

}



.a_7 h2{
font-size: 2.5em;
display: block;
width: 80%;
margin: 0 auto;
margin-top: 5em;
margin-bottom: 1em;
text-align: left;
border-bottom: solid 2px #000;
}

.a_7 a{

display: block;
width: 80%;
margin: 0 auto;
text-decoration: none;
}

.a_7 p{
font-size: 1.5em;
margin-top: 1em;
text-align: center;

color: #000;
}

.a_7 a:hover{
text-decoration: underline!important;
color: #000;

}


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

/*.a_7 img:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.7;
}*/

.f-3{	
top: 270px;	
left: 120px;
}

.f-4{
	top: 890px;	
	left: 120px;
	
}

.f-5{
	top: 1505px;	
	left: 120px;
	
}

.a_8 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;

}



.a_8 a{
text-decoration: none;
}

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


.a_1_1{
	width: 80%;
	display: block;
	margin: 0 auto;
}

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

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

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}



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

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

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

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

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

.line1::before{ 
	top:0;
	left:1.5em;
}

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


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


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

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


@media (max-width: 1200px){
	
	#header{
		width: 1200px;
		margin: 0 auto;
		display: block;
	}

.back{
	display: block;
	position:relative;
text-align: center;
width: 1200px;
margin: 0 auto;
z-index: -10;
}
	

}

@media (max-width: 767px){
	
	#mobile_header{
		display: none;
	}
	
	

.sidebar__item--fixed {
	display: inline;
position: sticky;
margin-bottom: 0;
top: 0px;
z-index: 10;
}

.container {
padding: 0px 10px;
background-color: #fff;
z-index: 10;
box-shadow: 0.5px 1px 3px #B1BFC8;
}

.box1{
display: block;
margin: 0px auto;
padding: 20px 0;
text-align: center;
}


.box2 {
display: flex;
justify-content:space-between;
margin: 0 auto;
padding: 0px;
width: 90%
}



.box3 {
position: absolute;
left: 85%;
top: 0px;
}

.box3 li{
list-style: none;
white-space: nowrap;
padding-left: 10px;
border-left: solid 2px #ccc;
}

.box3 ul{
padding: 0;
}

.box3 a{
color: #000;
text-decoration: none;
font-size: 0.8em;
}

footer{
height: auto;
margin: 0;
padding: 0;
margin-top: 100px;

}

.foot_icon{
padding-top: 50px;
text-align: center;
/*border-bottom: solid 1px #000;*/
}

.foot_icon img{
padding: 10px;
}

footer>div{
max-width: 1100px;
margin: 0 auto;
}

footer>div>div{
margin: 50px auto;
}

footer>div>div>img{
margin:100px 30px 0px 0px;
}



footer table td {
font-size:  0.8em;
padding: 5px 40px 5px 0px;
text-align: left;
border: none!important;
}
}