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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho&display=swap');

body{
	margin: 0;
	padding: 0;
	background-color: white;
	}

body:before{
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-image: url("../images/tanmoshi/background.webp");
	background-position: top 15vh right -5vw;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	}

img{max-width: 100%;}
a{outline: none; text-decoration: none;}


/*animation*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 2.25s;
	
	&.fadein-left{transform: translate(-30px,0);}
	&.fadein-right{transform: translate(30px,0);}
	&.fadein-up{transform: translate(0,-30px);}
	&.fadein-bottom{transform: translate(0,30px);}
	&.scrollin{opacity: 1 !important; transform: translate(0, 0) !important;}
	}

.anime_02{animation-delay: 2s;}
.anime_04{animation-delay: 4s;}
.anime_06{animation-delay: 6s;}
.anime_08{animation-delay: 8s;}


:hover{transition: all  0.5s ease;}

@media only screen and (max-width: 900px) {body:before{background-position: top 5vh center;}}



/*-----main-----*/
main{padding-bottom: 20%;}

main section{padding: 1.5%;}
main p, main li, main dt, main dd{
	font-size: 1em;
	line-height: 1.6em;
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	}

@media only screen and (max-width: 900px) {main section{padding: 3.5%;}}
@media only screen and (max-width: 650px) {
	main{padding-bottom: 40%;}
	main section{padding: 0;}
	main section:last-child{padding: 5%;}
	main p, main li, main dt, main dd{font-size: 0.9em;	line-height: 1.5em;}
	}



/*mainVisual*/
#mainVisual{padding-bottom: 15%; display: flex; flex-wrap: wrap; align-items: center; position: relative;}

#mainVisual > div{flex: 0 1 50%;}
#mainVisual > div article{padding: 0 10% 0 0;}
#mainVisual > div:last-child p{margin: 0; padding: 1.5%; text-align: center;}

.platform{
	max-width: 90px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.5%;
	left: 1.5%;
	}

.tanmoshi_5th{
	max-width: 100px;
    margin: 0 auto;
	height: 0;
	padding-top: 20%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/tanmoshi/tanmoshi5th.webp");
	background-position: top center;
    }

#mainVisual h1{
	width: 100%;
    margin: 1em 0 2em;
	height: 0;
	padding-top: 28%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/tanmoshi/tanmoshi_logo.webp");
	background-position: top center;
    }


/*border anime*/
	.stroke {padding: 1em 0; position: relative;}

	.stroke .border {content: ""; position: absolute; opacity: 0;}
	.stroke .border.top, .stroke .border.bottom {width: calc(100% - 25%);}
	.stroke .border.top {border-top: 1px solid #000; left: 0; top: 0;}
	.stroke .border.bottom {border-bottom: 1px solid #000; right: 0; bottom: 0;}

	.stroke.is-animated .border {opacity: 1;}
	.stroke.is-animated .border.top, .stroke.is-animated .border.bottom {animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);}

	@keyframes stroke-width { 0% {width: 0; opacity: 1;} 100% {width: calc(100% - 25%); opacity: 1;}}


@media only screen and (max-width: 900px) {.platform{max-width: 70px; top: 3.5%; left: 3.5%;}}

@media only screen and (max-width: 650px) {
	#mainVisual{padding-bottom: 30%;}
	#mainVisual > div{flex: 0 1 100%;}
	#mainVisual > div article{margin-top: -40%; padding: 0;}
	#mainVisual > div:last-child p{margin: 0; padding: 0;}
	
	.platform{max-width: 65px; top: 20px; left: 20px;}
	.tanmoshi_5th{position: absolute; top: 15px; right: 10px;}
	#mainVisual h1{width: 90%; margin: 1em 5% 3em;}
	
	.stroke {padding: 1.5em 0;}
	.stroke p{width: 94%; margin: auto;}
	
	.mv_01{order: 2;}
	.mv_02{order: 1;}
	}


/*Product*/
.Product{
	max-width: 750px;
	margin: auto;
	padding: 75px;
	border: 4px solid #333;
	outline: 2px solid #333;
	outline-offset: -8px;
	background-color: rgba(255,255,255,0.25);
	background:
		url("../images/tanmoshi/frame_01.webp") top 15px left 15px no-repeat,
		url("../images/tanmoshi/frame_02.webp") top 15px right 15px no-repeat,
		url("../images/tanmoshi/frame_03.webp") bottom 15px left 15px no-repeat,
		url("../images/tanmoshi/frame_04.webp") bottom 15px right 15px no-repeat;
	}


.Product h2{
	width: 100%;
    margin: 0 0 2em;
	height: 0;
	padding-top: 40px;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/tanmoshi/Info_h2.webp");
	background-position: top center;
	}


.Product dl{
	width: 80%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	}

.Product dt{flex: 0 1 20%; padding: 1em 2.5%; border-bottom: solid 1px #000; text-align: center;}
.Product dd{flex: 0 1 70%; margin: 0; padding: 1em 2.5%; border-bottom: solid 1px #000;}


@media only screen and (max-width: 650px) {
	.Product{padding: 75px 30px; background-size: 40px auto;}
	.Product h2{padding-top: 32px;}
	.Product dl{width: 100%; padding: 0 0 2em;}
	}


/*-----footer-----*/
footer{padding: 1.5% 3%; background: #3b3b3b;}
footer section{max-width: 1480px; margin: auto;}
footer p,footer li{color: white;}

.FooterContent{display: flex; flex-wrap: wrap;}
.FooterContent > div:first-child{flex: 0 1 70%;}
.FooterContent > div:last-child{flex: 0 1 30%; max-width: 240px; margin: 0 0 0 auto;}

.TAITO_Link{padding: 3em 0;}

.TAITO_Link article{display: flex; align-items: flex-end;}
.TAITO_Link article > p{flex: 0 1 180px; padding-right: 2em;}

.TAITO_Link ul{
	flex: 0 1 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	}

.TAITO_Link li{
	flex: 0 1 auto;
	padding: 0 1em 0.5em 25px;
	font-size: 0.9em;
	font-weight: 600;
	font-family: "Shippori Mincho", serif;
	position: relative;
	}
	
	.TAITO_Link li::before {content: "◆"; color: #ff007f; position: absolute; left: 0;}


.TAITO_Link a{color: white;}
.TAITO_Link p{font-size: 0.8em;}

.ShareLink{display: flex; padding: 3em 0;}
.ShareLink div{flex: 0 1 60px; height: 60px; margin: 0 1em;}
.ShareLink div a{
	height: 60px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
	}

	.ShareLink div.fbBtn a{background-image: url("../images/tanmoshi/sns_Facebook.png");}
	.ShareLink div.xBtn a{background-image: url("../images/tanmoshi/sns_X.png");}
	.ShareLink div.lineBtn a{background-image: url("../images/tanmoshi/sns_LINE.png");}

.copyright p{margin: 0; padding: 3em 0; font-size: 0.8em; text-align: center;}
.copyright p:first-child{border-bottom: solid 1px rgba(255,255,255,0.35);}



@media only screen and (max-width: 900px) {
	.FooterContent > div:first-child{flex: 0 1 100%;}
	.FooterContent > div:last-child{flex: 0 1 100%; margin: 0 auto;}
	.box_01{order: 2;}
	.box_02{order: 1;}
	
	.ShareLink{padding: 6em 0 3em;}
	}

@media only screen and (max-width: 650px) {
	.TAITO_Link{padding: 0 1em;}
	
	.TAITO_Link article{padding-bottom: 3em; align-items: stretch;}
	.TAITO_Link article > p{flex: 0 1 45%; padding-right: 5%; border-right: solid 1px rgba(255,255,255,0.25);}
	.TAITO_Link article > p img{max-width: 150px;}
	
	.TAITO_Link ul{display: block; margin: 2em 0 1em 1.5em;}
	.TAITO_Link li{margin-bottom: 1em; font-size: 0.8em;}
	
	.ShareLink{padding: 6em 0;}
	
	.copyright{padding: 3em 2em;}
	}