@charset "UTF-8";
/* CSS Document */
html {
  visibility: hidden;
	opacity:0;
	transition: .3s;
}
html.wf-active, html.loading-delay {
  visibility: visible;
	opacity: 1;
}

*{word-break: break-all;}
body {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-style: normal;
  font-size: 14px;
  color: #45403f;
  line-height: 1.6;
}
#wrapper {
	overflow: hidden;
}
a,a:link,a:visited,a:hover,a:active{
color: #4A5053;
text-decoration: underline;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
a:hover{
text-decoration: none;
}
.inner {
  width: 100%;
}

/* font */
/* G_font */
.sm {
	font-family: "Sawarabi Mincho";
}
/* A_font */
.ajf {
	font-family: annabelle-jf, sans-serif;
	font-weight: 400;
	font-style: normal;
}
.din {
	font-family: din-condensed, sans-serif;
	font-weight: 400;
	font-style: normal;
    margin-bottom: 50px;
}
.bdp {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 400;
font-style: normal;
}
.ns {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-style: normal;
}
.urwl {
	font-family: urw-din, sans-serif;
	font-display: swap;
	font-weight: 300;
	font-style: normal;
}
.urw {
	font-family: urw-din, sans-serif;
	font-display: swap;
	font-weight: 600;
	font-style: normal;
}


/*ルビ*/
[data-ruby] {
	position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
}



/* header */
header {
	height: 100vh;
	background-image: url(../img/top/main.jpg);
	background-position: top center;
	background-size: cover;
    background-attachment: fixed;
    position: relative;
}
header .inner {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}

header h1 { /*スーパーミヤジマンヒーローズ ロゴ*/
	padding-top: 10vh;
}
header h1 a {
	width: 16%;
	display: inline-block;
}
header h1 a:hover {
	opacity: .7;
}
header h1 a img {
	width: 150px;
    
}
header h2 { /*胡蝶の手紙ロゴ*/
	padding-top: 1vh;
}
header h2 img {
	width: 480px;
    padding-top: 100px;
    
}


/* footer */
footer .f_img {
	height: 20%;
	background-image: url(../img/top/footer.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: cover;
}
footer .f_img .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 5% 5% 10% 5%;
	display: flex;
	justify-content: space-between;
}
footer .f_img .inner .left .f_logo a {
	width: 40%;
	display: inline-block;
}
footer .f_img .inner .left .f_logo a img {
	width: 100%;
}
footer .f_img .inner .right {
	text-align: right;
	padding-top: 100px;
}
/*
footer .f_img .inner .right .copy {
	color: #fff;
}
footer .f_txt {
	text-align: center;
	padding: 10px 0;
}
*/
.pagetop {
	width: 62px;
	height: 62px;
	position: fixed;
	z-index: 100;
	bottom: 10px;
	right: 2%;
	display: none;
}
.pagetop a {
	width: 62px;
	height: 62px;
	display: block;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	cursor: pointer;
}
.pagetop a img {
	display: block;
}



.timeline {
/*  max-width: 40%;
  border: 1px solid #333;
  padding: 10px;
*/
    margin-bottom: 50px;
}



/*タブレット*/

@media screen and (max-width: 900px) and (orientation: landscape) {
header {
	height: 100vh;
	background-image: url("../img/top/main_sp.jpg");
	background-position: top center;
	background-size: cover;
}
header .inner {
/*	max-width: 390px;*/
	margin: 0 auto;
	text-align: center;
}
header .inner h1 {
	padding-top: 100px;
}
header .inner h1 a {
	width: 40%;
	display: inline-block;
}

header .inner h1 a img {
	width: 40%;
}



	footer .f_img {
		height: inherit;
		background-image: url(../img/top/footer_sp.jpg);
	}
	footer .f_img .inner {
		width: 100%;
		padding: 25px 5%;
		display: block;
	}
	footer .f_img .inner .left .f_logo {
		padding-top: 25px;
        
	}
	footer .f_img .inner .left .f_logo a {
		width: 100px;
    	display:block;
	}
	footer .f_img .inner .right {
		padding-top: 120px;
	}


	.pagetop {
		width: 40px;
		height: 40px;
		bottom: 10px;
		right: 2%;
	}
	.pagetop a {
		width: 40px;
		height: 40px;
	}

}


/*スマートフォン*/

@media only screen and (max-width: 431px){
header {
	height: 100vh;
	background-image: url("../img/top/main_sp.jpg");
	background-position: top center;
	background-size: cover;
}
header .inner {
/*	max-width: 390px;*/
	margin: 0 auto;
	text-align: center;
}
header .inner h1 {
	padding-top: 70px;
}
header .inner h1 a {
	width: 50%;
	display: inline-block;
}
header .inner h1 a:hover {
	opacity: .7;
}
header .inner h1 a img {
	width: 75%;
}
header .inner .ttl {
padding-top: 40%;
font-size: 60px;
line-height: 0.7;
}
header .inner .ttl .lg {
font-size: 50%;
}

	footer .f_img {
		height: inherit;
		background-image: url(../img/top/footer_sp.jpg);
	}
	footer .f_img .inner {
		width: 100%;
		padding: 25px 5%;
		display: block;
	}
	footer .f_img .inner .left .f_logo {
		padding-top: 5%;
        
	}
	footer .f_img .inner .left .f_logo a {
		width: 100px;
	}
	footer .f_img .inner .right {
		padding-top: 80px;
	}





}