@charset "utf-8";
@media screen and (min-width:300px) {
	.page-contents {
		font-size: 100%;
		font-size: 13px;
	}
}
@media screen and (min-width:736px) {
	.page-contents {
		font-size: 100%;
		font-size: 25.51px;
	}
}
.page-contents {
	padding: 0;
	margin: 0;
}
#main-container {
	width: 100%;
}
.main_visual {
	width: 100%;
	margin: 0 auto;

}
.main_visual h1 {
	width: 100%;
	text-align: center;
}
.link_btn_container {
	width: 96%;
	background-image: url("../images/bg_menu.png");
    background-size: contain;
	background-color: #fddecc;
	margin: 0 auto;
	border: solid 5px #e62f8b;
	padding: 3%;
	text-align: center;
}
.link_btn_container p {
	margin: 0 auto 2%;
}
.flex_container {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.flex_container li {
	width: 49%;
	margin-bottom: 2%;
}

.flex_container li:nth-child(odd) {
	margin-right: 2%;
}
.page-contents-inner {
	width: 100%;
	margin: 0 auto;
}
.page-contents-inner h2 {
	margin-bottom: 5%;
}
.page-contents-inner p {
	margin: 0 auto;
}
.page-contents-inner .contents {
	margin: 5% auto 10%;
	padding: 0 3% 3%;
	text-align: center;
}
.contents h2 {
	text-align: center;
	margin: 10% auto 0;
	width: 100%;
}
.contents h2 img {
	width: 100%;
}

.page-contents p {
	padding: 0;
}



.page-contents-inner h3.daikanshasai {
	text-align: center;
	background-color: #e60012;
	padding: 4%;
}

.page-contents-inner h3.daikanshasai img {
	/*width: 90%;*/
}

.news {
	background-color: #fdf9e8;
	padding: 6% 0 6%;
}

.news dl {
	width: 90%;
	border: 4px solid #e60012;
	margin: 0 auto;
	background-color: #ffffff;
}

.news dt {
	margin: -21px 0 0 21px;
}

.news dt img {
	width: 100px;
}

.news dl ul {
	width: 90%;
	margin: 20px auto;
}

.news dl li {
	border-bottom: 2px solid #e60012;
	margin-bottom: 10px;
}

.news dl li img {
	width: 90%;
}



.contents h4.tvcm {
	text-align: center;
	margin-bottom: 5%;
}

.contents h4.tvcm img {
	width: 80%;
}

.contents h4.daikanshasai3 {
	text-align: center;
	padding-top: 5%;
	margin-bottom: 2%;
}

.contents h4.daikanshasai3 img {
	width: 90%;
}

.contents h5.daikanshasai2 {
	margin-bottom: 15%;
}

.contents h5.daikanshasai2 img {
	width: 90%;
}


.contents .collaboration dl {
	/*padding-bottom: 20px;*/
	width: 90%;
}

.contents .collaboration dt {
	margin-bottom: 10px;
}

.contents .collaboration h6 {
	margin-bottom: 10px;
}

.contents .collaboration h6 img {
	width: 90%;
}

.contents .collaboration p.other {
	margin: 0 auto;
}

.contents .collaboration .other img {
	width: 640px;
}



.contents li {
	margin-bottom: 5%;
}


.contents .collaboration .bnr img {
	width: 90%;
}

.contents .collaboration .btn img {
	width: 90%;
}


.contents .stores ul {
	width: 80%;
	margin: 0 auto;
}

.contents .stores li {
	margin-bottom: 20px;
}

.contents .stores li img {
	width: 400px;
}


.page-contents-inner .contents .private-brand h3 {
	margin: 0 auto;
}

.page-contents-inner .contents .private-brand h3 img {
	width: 640px;
}

.page-contents-inner .contents .private-brand .brand-list {
	width: auto;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.page-contents-inner .contents .private-brand .brand-list dl {
	width: 48%;
	padding-bottom: 4%;
}

.page-contents-inner .contents .private-brand .brand-list dl:nth-child(odd) {
	margin-right: 4%;
}


.page-contents-inner .contents .private-brand .brand-list .text {
	text-align: left;
	font-size: 14px;
	height: 10em;
}

.page-contents-inner .contents .private-brand .brand-list .text2 {
	text-align: left;
	font-size: 14px;
	height: 13em;
}

.page-contents-inner .contents .private-brand .brand-list {
	text-align: center;
}

.page-contents-inner .contents .private-brand .brand-list .bnr img {
	width: 380px;
}



.page-contents .movie {
	width: 90%;
	margin: 5% auto 8%;
	aspect-ratio: 16 / 9;
}
.page-contents .movie iframe {
	width: 100%;
	height: 100%;
}
.page-contents .movie h2 {
	margin-bottom: 5%;
}
.contents dl {
	width: 100%;
	margin: 5% auto 0;
}
.contents dt {
	margin-bottom: 2%;
}
.contents dt img {
	width: 100%;
}
.contents dd {
	margin-bottom: 2%;
}

.contents li {
	margin-bottom: 5%;
}

.page-contents-inner .contents p {
	margin: 0 auto;
	text-align: center;
}
.btn_container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.btn_container p {
	margin: 0 auto 15px;
	padding: 0;
}

#brand_block {
	display: block;
	margin-top: -100px;
	padding-top: 100px;
}
#school_block {
	display: block;
	margin-top: -100px;
	padding-top: 100px;
}
#freshers_block {
	display: block;
	margin-top: -100px;
	padding-top: 100px;
}
#campaign_block {
	display: block;
	margin-top: -100px;
	padding-top: 100px;
}


.gentei {
	background-color: #fddecc;
	width: 98%;
	border: 3px solid #dd0023;
	margin: 20vw auto 5%;
}

.gentei h4 {
	margin: -8vw auto 0;
	width: 70%;
}

.gentei dl {
	width: 92%;
}

#brand {
	background-color: #fddecc;
}

#school {
	background: #d7e9bf url("../images/bg_school.png?2") no-repeat left top;
	background-size: cover;
}

#school h3 {
	margin-bottom: 20px;
}


#school .link h3 {
	margin-bottom: 0;
}

#school .link {
	width: 98%;
	margin: 10% auto 5%; 
}

#school .link h4 img {
	width: 100%;
	border: 4px solid #ffffff;
}

#freshers {
	background: #cbe8fa url("../images/bg_freshers.png") no-repeat left top;
	background-size: cover;
}

#freshers h3 {
	margin-bottom: 20px;
}

#freshers h4 {
	margin-bottom: 40px;
}

#freshers .link h3 {
	margin-bottom: 0;
}

#freshers .link p {
	margin-top: 0;
}

#btn_container {
	text-align: center;
}


#btn_container h3 {
	color: #dc0821;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 0;
}

#btn_container p {
	margin-bottom: 20px;
}

#btn_container .note {
	margin: 8% auto 8%;
}

#btn_container ul li {

}

#campaign .contents {
	width: 100%;
	border-right: 4px solid #dc0024;
	border-bottom: 4px solid #dc0024;
	border-left: 4px solid #dc0024;
	margin-bottom: 20%;
	padding-top: 6%;
}

#campaign h2 {
	margin-bottom: 0;
}


#campaign h3 {
	color: #dc0821;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 5%;
}

#osusume .contents {
	width: 100%;
	border-right: 4px solid #e63085;
	border-bottom: 4px solid #e63085;
	border-left: 4px solid #e63085;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 0px;
}

#osusume h2 {
	margin-bottom: 0;
}

#osusume .contents dl {
	width: 100%;
}



#osusume .contents dt img {

}

#osusume .contents dd .text {

	font-size: 20px;
}


/* ヒストリー横スクロール */
body {
  overflow-x: clip;
}

article:not(.sticky) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background-color: whitesmoke;
}
article h2 {
  text-align: center;
}
.horizontal_scroll {
  --sticky-container-height: 100vh;
  height: var(--sticky-container-height);
  min-height: 100vh;
  box-sizing: border-box;
	margin-bottom: 80px;
}
.horizontal_scroll .sticky {
  position: sticky;
  top: 24vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*min-height: 100vh;*/
}
.horizontal_scroll .scroller {
  
  overflow: auto;
}
.horizontal_scroll .scroller.nobar {
  overflow: hidden;
}
.horizontal_scroll .scroller > * {
  flex-basis: 66%;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  
  justify-content: center;
  align-items: center;
  /*background-color: whitesmoke;*/
}
.horizontal_scroll .scroller > *:not(:first-child) {
  margin-left: 1%;
}



.scroll_img {
	position: relative;
}

.scroll_img img {
	max-width: none !important;
}

.scroll_img .btn_detail {
	position: absolute;
    left: 3431px;
	top: 339px;
}




/*==================================================
    ふわっとフェードイン
==================================================*/

.fadein {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 800ms;
}
.fadein.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(10deg);
  }
  50%{
      transform: rotate(-10deg);
  }
}


.slidein {
	opacity: 0;
	transform: translate(-50px, 0);
	transition: all 800ms;
}
.slidein.scrollinin {
	opacity: 1;
	transform: translate(0, 0);
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(10deg);
  }
  50%{
      transform: rotate(-10deg);
  }
}


/*==================================================
    うごかす
==================================================*/

#main-container .img-animation {
	animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
	overflow: hidden;
	position: relative;
}

#main-container .img-animation:before {
	animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
	background: #fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

@keyframes img-opacity {
	100% {
		opacity: 1;
  }
}

@keyframes img-animation {
	100% {
    transform: translateX(100%);
  }
}


#tvcm-block {
	margin-top: -120px;
	padding-top: 120px;
}

#stores-block {
	margin-top: -120px;
	padding-top: 120px;
}

#brand-block {
	margin-top: -120px;
	padding-top: 120px;
}

#top-block {
	margin-top: -120px;
	padding-top: 120px;
}

.back {
	width: 200px;
	margin: 0 auto;
}