@charset "UTF-8";
/* CSS Document */
/*画面全体の設定*/
body,html {
  height: 100%;
  margin: 0 auto;
  font-size: 18px;
font-family: fot-udkakugoc70-pro, sans-serif;
font-weight: 400;
font-style: normal;
}
a {
  text-decoration: none;
	color: rgba(255,255,255,1.00);
}
a:link{
	color: rgba(255,255,255,1.00);
}
a:visited{
	color: rgba(255,255,255,1.00);
}

.fstbg{
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
	background:#666666 url("../img/1.jpg");
    background-blend-mode:multiply;
	background-position: 75% center;
    background-size: cover;
    background-repeat: no-repeat;
	z-index: -10;
}

/*トップ*/
.topview {
	width:100%;
    height:100svh;
	background-color:#af0d16;
	color: rgba(255,255,255,1.00);
	display: flex;
	align-items: center;
}
.topview div{
	width:90%;
	margin: 0 auto;
}
.topview h3{
	width:100%;
	margin: 0;
	font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-style: italic;
	font-size: 0.98rem;
}
.topview h1{
	width:100%;
	margin: 0;
	font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-style: italic;
}
.topview p{
	width:100%;
	margin: 0;
	font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-style: italic;
}

/*固定する背景*/
article {
  color: #FFF;
  padding: 0 0 0 0;
}
h2 {
  font-size: 2.2rem;
	padding: 0.5em 0.1em;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	margin: 0;
	top:0;
	left: 0;
	height: 100svh;
	font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-style: italic;
}
/*画面上部で固定する*/
.sticky {
  position: -webkit-sticky; /* safari対応 */
  position: sticky;
  top: 0; /*上端から?pxのところで固定 */
}

.second {
	margin-top: 0 !important;
}
.textbox {
  width: 70%;
	padding: 0 0 0 0;
	margin-top: -70vh;
	margin-left: 25%;
}

.textbox p {
  font-size: 1.1rem;
  line-height: 1.8;
	text-align: justify;
	font-family: fot-udkakugoc70-pro, sans-serif;
font-weight: 400;
font-style: normal;
	padding-bottom:2em;
	margin: 0;
	
}
.textbox p:last-child {
	padding-bottom:3em;
	
}
.scene1{
  /*background-color: rgba(0,162,154,0.85);*/
  background-image: linear-gradient(0deg, rgba(57, 210, 248, 0.0), rgba(38, 87, 86, 0.85) 40%);
}
.scene2{
  /*background-color: rgba(162,0,154,0.85);*/
	background-image: linear-gradient(0deg, rgba(247, 209, 55, 0.0), rgba(29, 163, 137, 0.85) 40%);
	
}
.scene3{
	background-image: linear-gradient(0deg, rgba(254, 220, 64, 0), rgba(247, 93, 139, 0.85) 40%);
}
.scene4{
  background-image: linear-gradient(0deg, rgba(248, 57, 168, 0), rgba(81, 48, 97, 0.85) 40%);
	
}
.scene5{
  background-image: linear-gradient(180deg, rgba(36, 55, 111, 0.85) 10%, rgba(101, 90, 167, 0.85) 43%, rgba(133, 76, 185, 0.85) 60%, rgba(56, 144, 170, 0.85) 77%, rgba(219, 154, 105, 0));
	
}
.scene6{
  background-image: linear-gradient(0deg, rgba(115, 248, 224, 0), rgba(114, 134, 221, 0.85) 40%);
	
}
.scene7{
  background-image: linear-gradient(180deg, rgba(65, 164, 253, 0.85), rgba(14, 244, 255, 0));
	
}
.scene8{
  background-image: linear-gradient(180deg, rgba(36, 55, 111, 0.85) 10%, rgba(101, 90, 167, 0.85) 43%, rgba(133, 76, 185, 0.85) 60%, rgba(56, 144, 170, 0.85) 77%, rgba(219, 154, 105, 0));
	
}


.photobox {
	width: 100%;
	max-width: 620px;
	padding: 0 0 3em 0;
	margin-top: 0;
}
.photobox figure{
	width: 70%;
	padding-bottom: 2em
}
.photobox figure img{
	width: 100%;
	overflow: hidden;
}
.photobox figure figcaption{
	line-height: 1.4;
}
.photobox figure:nth-child(odd){
	border-radius: 10px;
	margin-left: 25%;
}
.photobox figure:nth-child(even){
	border-radius: 10px;
	margin-left:17%;
}
.photobox figure img{
	border-radius: 10px ;
}
.photobox figure figcaption{
	padding-left: 1em;
}



/* 画面外にいる状態 */
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1000ms ease-out;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	transition-delay: 0.1s;
	}

/*フッター*/
footer {
	width:100%;
    height:100svh;
	background-color:#af0d16;
	color: rgba(255,255,255,1.00);
	display: flex;
	align-items: center;
	text-align: center;
}
footer div{
	width:90%;
	margin: 0 auto;
}
footer h3{
	width:100%;
	margin: 0;
	font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-style: italic;
	font-size: 0.98rem;
}
footer p{
	width:100%;
	margin: 0;
}
.logo{
	width: 10em;
	display: block;
	padding:0;
	margin: 6em auto 0 auto;
}
.btn{
	width:80%;
	display: block;
	padding: 0.5em 0;
	margin: 2em auto 2em auto;
	text-align: center;
	background: rgba(255,255,255,1.00);
	color:#af0d16 !important;
	/* box-shadow */
box-shadow: 0px 20px 16px -6px rgba(0,0,0,0.6);
	border-radius: 3px;
}

@media screen and (min-width: 641px) {
.photobox {
	width: 70%;
	margin-left:25%;
}
.photobox figure{
	width: 70%;
	padding-bottom: 2em
}
.photobox figure img{
	width: 100%;
	overflow: hidden;
}
.photobox figure:nth-child(odd){
	border-radius: 10px;
	margin-left: 25%;
}
.photobox figure:nth-child(even){
	border-radius: 10px;
	margin-left:0;
}
.photobox figure img{
	border-radius: 10px ;
}
.photobox figure figcaption{
	padding-left: 1em;
}
}