@charset "UTF-8";

/*----------------------------------------------------
	☆TOP PC
----------------------------------------------------*/
/*--------------------------------------------------------------------- mv */

#new-logo #mv {
    position: relative;
	padding-bottom: 135px;
    padding-top: 100px;
}

#new-logo #mv .mvInr {
    width: 90%;
    margin: 0 auto;
}

#new-logo #mv .mvInr .mvTitle {
    text-align: center;
	color: #e60012;
	font-size: clamp(24px, 4vw, 48px);
	margin-bottom: 7%;
	margin-top: 35px;
	font-weight: 600;
	position: relative;
    z-index: 1;
}

#new-logo #mv .mvInr .mvLogo{
    width: 26%;
	max-width: 334px;
	margin: 0 auto;
	position: relative;
    z-index: 1;
}

#new-logo img {
    width: 100%;
    height: auto;
    display: block;
}

#new-logo #mv .square {
    position: absolute;
	background: #f2efe3;
	z-index: 0;
}

#new-logo #mv .square.no1 {
	bottom: 0;
    left: 0;
	width: 15%;
    height: 77%;
}

#new-logo #mv .square.no2 {
	top: 0;
    right: 0;
	width: 45%;
    height: 30%;
}

#new-logo #mv .square.no3 {
	bottom: 0;
    left: 0;
	width: calc(30% + 8px);
    height: 20%;
}

#new-logo #mv .square.no4 {
	top: 0;
    right: 0;
	width: 12%;
    height: 60%;
}

#new-logo #mv .square.red {
	background: #e60012;
}

#new-logo #mv .square.red::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 4px;
  height: 100%;
  background-color: #fff;
}

/*#new-logo #mv .square.red::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  background-color: #e60012;
}*/

#new-logo #mv .square.red.no4::before {
  right: 4px;
  left: 4px;
}

#new-logo #mv .c-scroll {
    position: absolute;
    bottom: 11%;
    right: 5%;
}

#new-logo #mv .c-scroll_link {
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    color: #e60012;
    -ms-writing-mode: tb-rl;
    letter-spacing: 0.2em;
    font-size: 13px;
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
    -webkit-box-align: center;
    align-items: center;
    writing-mode: vertical-rl;
	position: relative;
}

#new-logo #mv .c-scroll_link img {
    width: 4.5px;
    position: relative;
    left: 1px;
    top: 30px;
	animation: scrollbtn 1.5s linear infinite;
}

/*--------------------------------------------------------------------- movie*/

#new-logo #movie {
    position: relative;
	padding: 120px 0;
    background: #e60012;
}

#new-logo #movie .movieInr {
    width: 85%;
    max-width: 960px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#new-logo .conTit {
    text-align: center;
	margin-bottom: 50px;
}

#new-logo .conTit .main {
    font-size: 60px;
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	color: #e60012;
}

#new-logo .conTit .sub {
	font-weight: 600;
}

#new-logo #movie .conTit .main {
	color: #fff;
}

#new-logo #movie .conTit .sub {
	color: #fff;
}

#new-logo #movie .backLogo {
   position: absolute;
   top: 5%;
   right: -3%;
   width: 37%;
   pointer-events: none;
}

.video-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/*--------------------------------------------------------------------- about*/

#new-logo #about {
    position: relative;
	padding: 120px 0;
}

#new-logo #about .aboutInr {
    width: 85%;
    max-width: 750px;
	margin: 0 auto;
}

#new-logo #about .aboutInr .txt {
    text-align: justify;
	line-height: 2;
	letter-spacing: 0.05em;
}


/*--------------------------------------------------------------------- logo*/

#new-logo #logo {
    position: relative;
	padding: 120px 0;
	background: #f5f3ea;
}

#new-logo #logo .logoInr {
    width: 85%;
    max-width: 750px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#new-logo #logo .logoInr .txt {
    text-align: justify;
	line-height: 2;
	letter-spacing: 0.05em;
}

#new-logo #logo .logoInr .logoBox {
    width: 100%;
	margin: 0 auto;
	background: #fff;
	padding: 12%;
}

#new-logo #logo .logoInr .logoBox .logoImg {
    width: 47%;
	max-width: 280px;
	margin: 0 auto;
}

#new-logo #logo .logoInr .caption {
    color: #e60012;
	font-size: 24px;
	font-weight: 700;
	margin: 60px 0 40px;
	text-indent: -1.1em;
    padding-left: 1.1em;
}

/*#new-logo #logo .logoInr .caption .red {
    font-size: 80%;
}*/

#new-logo #logo .logoInr .iconList {
	position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	width: 100%;
    margin: 80px auto 0;
}

#new-logo #logo .logoInr .iconList li {
	width: 33%;
}

#new-logo #logo .logoInr .iconList li .icon {
	width: 73%;
    margin: 0 auto 20px;
}

#new-logo #logo .logoInr .iconList li .iconTxt {
	font-size:  13px;
	text-align: center;
	letter-spacing: 0.1em;
}

#new-logo #logo .backLogo {
   position: absolute;
   top: 45%;
   left: -10%;
   width: 37%;
   pointer-events: none;
}

/*--------------------------------------------------------------------- identity*/

#new-logo #identity {
    position: relative;
	padding: 120px 0 50px;
}

#new-logo #identity .identityInr {
    width: 85%;
    max-width: 750px;
	margin: 0 auto;
}

#new-logo #identity .list li {
    margin-bottom: 80px;
}

#new-logo #identity .list li .capBox {
    width: 100%;
	text-align: center;
	background: #f5f3ea;
	padding: 2.5%;
	margin-bottom: 40px;
}

#new-logo #identity .list li .capBox .capMain {
    font-size: 30px;
    font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #e60012;
}

#new-logo #identity .list li .capBox .capSub {
    font-size: 14px;
}

#new-logo #identity .list li .head {
	text-align: center;
	color: #e60012;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.8em;
	letter-spacing: 0.1em;
}

#new-logo #identity .list li .head.no2 {
	margin-bottom: 35px;
}

#new-logo #identity .list li .itemList {
	text-align: center;
}

#new-logo #identity .list li .itemList ul {
	display: inline-block; /* 中身だけを中央に持ってくる */
    text-align: left; 
}

#new-logo #identity .list li .itemList ul li {
    margin-bottom: 20px;
	letter-spacing: 0.1em;
}

#new-logo #identity .list li .itemList ul li .red {
    color: #e60012;
	font-size: 80%;
}

#new-logo #identity .list li .itemList ul li p {
    text-indent: -1.1em;
    padding-left: 1.1em;
}

#new-logo #identity dl {
    border-bottom: 2px dotted #000;
    padding: 30px 0;
}

#new-logo #identity dl:first-child {
    padding: 0 0 30px;
}

#new-logo #identity dl dt {
    font-size: 20px;
    font-weight: 600;
    color: #e60012;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
	letter-spacing: 0.1em;
}

#new-logo #identity dl dt .circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: #e60012;
    color: #fff;
    border-radius: 50%;
    margin-right: 8px;
    font-family: "Roboto", sans-serif;
	font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.circle .num {
  transform: translateX(1px);
}

#new-logo #identity dl dd {
    line-height: 1.8;
	letter-spacing: 0.05em;
}



/*----------------------------------------------------
	☆TOP UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {
	#new-logo #mv {
		padding-bottom: 115px;
	}
	
	#new-logo #mv .c-scroll_link {
		font-size: 1.3vw;
	}
	
	#new-logo #mv .mvInr .mvTitle {
		margin-bottom: 8%;
	}
	
	#new-logo #mv .mvInr .mvLogo {
		width: 28%;
	}
	
	#new-logo #identity dl dt {
		font-size: 18px;
	}
}


/*----------------------------------------------------
	☆TOP UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
	
	#new-logo #mv {
		padding-bottom: 170px;
	}
	
	#new-logo #mv .mvInr .mvTitle {
		font-size: clamp(18px, 6vw, 48px);
        margin-bottom: 16%;
        margin-top: 20%;
	}
	
	#new-logo #mv .mvInr .mvLogo {
        width: 58%;
    }
	
	#new-logo #mv .square.no1 {
		width: 25%;
		height: 52%;
	}

	#new-logo #mv .square.no2 {
		width: 25%;
		height: 52%;
	}
	
	#new-logo #mv .square.no3 {
		width: 55%;
		height: 11%;
	}
	
	#new-logo #mv .square.no4 {
		width: 55%;
		height: 21%;
	}
	
	#new-logo #mv .c-scroll_link {
        font-size: 2.8vw;
    }
	
	
	#new-logo .conTit {
		margin-bottom: 30px;
	}
	
	#new-logo #movie {
		padding: 90px 0;
	}
	
	#new-logo #movie .backLogo {
		top: 6%;
		right: -3%;
		width: 38%;
	}
	
	
	#new-logo #about {
		padding: 90px 0;
	}
	
	#new-logo .conTit .main {
		font-size: 42px;
	}
	
	#new-logo .conTit .sub {
		font-size: 14px;
	}
	
	#new-logo #about .aboutInr .txt {
		font-size: 14px;
	}
	
	
	#new-logo #logo {
		padding: 90px 0 50px;
	}
	
	#new-logo #logo .logoInr .caption {
		font-size: 20px;
		margin: 40px 0 25px;
	}
	
	#new-logo #logo .logoInr .txt {
		font-size: 14px;
	}
	
	#new-logo #logo .logoInr .iconList {
		align-items: center;
		flex-direction: column;
		margin: 60px auto 0;
	}
	
	#new-logo #logo .logoInr .iconList li {
		width: 50%;
		margin-bottom: 45px;
	}
	
	#new-logo #logo .backLogo {
		top: 1%;
		left: -11%;
		width: 38%;
	}
	
	
	#new-logo #identity {
		padding: 90px 0 30px;
	}
	
	#new-logo #identity .list li {
		margin-bottom: 60px;
	}
	
	#new-logo #identity .list li .capBox {
		margin-bottom: 30px;
	}
	
	#new-logo #identity .list li .head {
		font-size: 20px;
	}
	
	#new-logo #identity dl dd {
		font-size: 14px;
	}

}


/*----------------------------------------------------
	☆TOP UNDER 400
----------------------------------------------------*/
@media screen and (max-width: 400px) {
    #new-logo #logo .logoInr .iconList li {
        width: 80%;
    }
	
	#new-logo #logo .logoInr .iconList li .icon {
		width: 63%;
	}
}