/* =========================================================================================
  400MDL CAMPAIGN STYLE
  LAST UPDATE : 2024/02/09
  AUTHER : SHIMIZU HIYORI
========================================================================================= */
/*
[INDEX]
* CLEARING OLD STYLE
* COMMON
* BANNER
* INTRODUCTION
* RESULT
* PERIOD
* PRIZE
* SPECIAL
* REQUIREMENTS
* APPLY
* NOTES
* AREA
* APPLE
*/

/* CLEARING OLD STYLE */
div.contesnts_400mdl {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

div.contesnts_400mdl a {
	text-decoration: none;
}

.contesnts_400mdl h1 {
	padding: 0 0 0 0;
	margin: 0 auto 0 auto;
	background-image: none;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block;
}

/* COMMON */
:root {
	 --margin-s: 15px;
	 --margin-m: 30px;
	 --margin-l: 50px;
	--margin-ll: 70px;
	--font-size-s: 0.9em;
	--font-size-m: 1.2em;
	--font-size-l: 1.4em;
  }

.contesnts_400mdl {
	color: #333333;
	font-size: 14px;
	background-color: #f9f9f9;
	text-align: center;
}

.contesnts_400mdl .h1-style {
	width: 600px;
	color: #333333;
	font-size: var(--font-size-l);
	font-weight: bold;
	letter-spacing: 1px;
	margin-top: var(--margin-ll);
	margin-bottom: var(--margin-l);
}

.h1-style:after {
	content: "";
	display: block;
	width: 35px;
	height: 4px;
	background: linear-gradient(90deg, #efe211 0% 50%, #36a6f5 50%);	
	border-radius: 0.3em;
	margin: 18px auto 0;
  }

.text {
	width: 576px;
	margin: 0 auto;
	letter-spacing: 0.5px;
	line-height: 2em;
}

.text_red {
	width: 576px;
	margin: 0 auto;
	letter-spacing: 0.5px;
	line-height: 2em;
	color: #ff0000a3;
	font-weight: bold;
}

.text-520px {
	width: 520px;
	margin: 0 auto;
	letter-spacing: 1px;
	line-height: 2em;
}

.link {
	font-weight: bold;
	color: #36a0ef;
	margin: 0 5px;
  }

.link:hover {
	opacity: 0.5;
	transition: .3s;
  }

.white {
	background-color: #fefefe;
	width: 590px;
	margin: 25px auto;
	padding: 25px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
	position: relative;
}

.radius {
	font-size: var(--font-size-m);
	color: #fefefe;
	display: inline-block;
	padding: .3em 1.7em;
	border-radius: 30px;
}

.yellow_line {
	font-weight: bold;
	margin: 0 5px;
	padding: 0 2px;
	background:linear-gradient(transparent 60%, #f7e946 60%);
}

.rtl p,
.rtl .text,
.rtl span,
.rtl li,
.rtl .description,
.rtl h1,
.rtl small,
.rtl a {
	direction: rtl;
}

.rtl li,
.rtl small,
.rtl .requirements ul,
.rtl .notes ul li,
.rtl .area {
	text-align: right;
}

.rtl small ul li {
	padding-left: 0;
	padding-right: 15px;
}

.rtl small ul li:before {
	right: 0;
}

.rtl .requirements ul li {
	margin-left: 0;
	margin-right: 30px;
}

/* BANNER */
.banner {
	width: 100%;
	height: auto;
}

/* INTRODUCTION */
.ibispaint {
	margin-bottom: var(--margin-m);
    position: relative;
    z-index: 2;
}

.catch {
	font-size: var(--font-size-l);
	font-weight: bold;
    line-height: 2em;
    position: relative;
    z-index: 2;
}

.intro01-img,
.catch,
.scroll,
.btn {
	margin-bottom: var(--margin-l);
}

.introduction .text {
	margin-bottom: var(--margin-ll);
}

.introduction {
	background-color: #fefefe;
	position: relative;
}

.item_l {
	position: absolute;
	left: 40px;
	top: 170px;
}

.item_r {
	position: absolute;
	right: 40px;
	top: 170px;
}

@keyframes scroll_left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
	}
	.scroll_wrap {
		display: flex;
		overflow: hidden;
	}
	.scroll_list {
		display: flex;
		list-style: none;
		padding: 0;
	}
	.scroll_list_left {
		animation: scroll_left 80s infinite linear 0.3s both;
	}
	.scroll_item {
		cursor: pointer;
		overflow: hidden;
		width: 100%;
		padding: 30px 5px;
	  }
	  .scroll_item img {
		height: auto;
		transition: transform .5s ease;
	  }
	  .scroll_item:hover img {
		transform: scale(1.2);
	  }

.btn {
	display: inline-block;
	padding: 0.8em 2em;
	border: 2px solid #efe211;
	background-color: #efe211;
	border-radius: 5px;
	color: #232388;
	font-weight: bold;
	cursor: pointer;
}

.btn:hover {
	border: 2px solid #efe211;
	color: #f5d711;
	background-color: #ffffff;
	transition: .3s;
}

/* RESULT */

.result_date {
	margin: var(--margin-m) 0;
}

.result_date span {
	padding: 10px 50px;
	background-color: #ffffff;
	color:  #36a6f5;
	font-size: var(--font-size-l);
	font-weight: bold;
	border-radius: 10px;
}

.result small ul li {
	text-align: center;
}

.result small ul li:before {
	display: none;
}

.prize01_result {
	font-size: var(--font-size-l);
}

.result_L_first {
	width: 200px;
	float: left;
	margin-top: 30px;
}

.result_L {
	width: 270px;
	float: left;
}

.result_R {
	width: 270px;
	float: right;
}

.result_C {
	width: 270px;
	margin: 0 auto;
}

.result .clearfix {
	margin-top: var(--margin-m);
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.result .white {
	margin: 25px auto var(--margin-ll);
}

.result .radius {
	margin-top: var(--font-size-s);
}

.result .winning-works {
	margin-bottom: var(--margin-m);
}

.result .name {
	margin-top: var(--margin-m);
	font-size: 20px;
	font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result_L_first .name {
	margin-top:0;
}

.check_btn a {
	font-size: var(--font-size-s);
	display: inline-block;
	padding: .3em 1.7em;
	border-radius: 5px;
	border: solid 2px;
	cursor: pointer;
	margin-top: var(--margin-s);
	text-decoration: none;
}

.radius_1st a {
	color: #232388;
	font-weight: bold;
	background-color: #efe211;
	border-color: #efe211;
}

.radius_1st a:hover {
	color: #efe211;
	border-color: #efe211;
	background-color: transparent;
	transition: .3s;
}

.radius_2nd a {
	color: #CE9E42;
	border-color: #CE9E42;
}

.radius_2nd a:hover {
	color: #ffffff;
	background-color: #CE9E42;
	transition: .3s;
}

.radius_3rd a {
	color: #8E959C;
	border-color: #8E959C;
}

.radius_3rd a:hover {
	color: #ffffff;
	background-color: #8E959C;
	transition: .3s;
}

.radius_4th a {
	color: #BD796A;
	border-color: #BD796A;
}

.radius_4th a:hover {
	color: #ffffff;
	background-color: #BD796A;
	transition: .3s;
}

.radius_ibisAward a {
	color: #36a6f5;
	border-color: #36a6f5;
}

.radius_ibisAward a:hover {
	color: #ffffff;
	background-color: #36a6f5;
	transition: .3s;
}

.logo_400MDL {
	margin-bottom: var(--margin-s);
}

/* PERIOD */
.period span {
	font-size: var(--font-size-m);
}

.period p img {
	margin: var(--margin-s) 0;
}
  
/* PRIZE */
.prize img,
.description,
.white02 img,
.white02 .radius {
	margin-bottom: var(--margin-s);
}

.prize01,
.prize .text-520px,
.prize .people {
	margin-bottom: var(--margin-m);
}

.prize .text {
	margin-bottom: var(--margin-l);
}

.prize01 {
	background-color: #333333;
}

.prize-text {
	margin: 0 auto;
	display: table;
	justify-content: center;
}

.prize-text div {
	padding: var(--margin-s);
	display:table-cell;
	vertical-align:middle;
}

.prize-text2 {
	padding: var(--margin-s);
}

.bold {
	font-size: var(--font-size-l);
	font-weight: bold;
	padding: 0 5px;
	background-image: linear-gradient(70deg, #53b5f2, #f7e946);
	background-repeat: no-repeat;
	background-size: 100% 20%;
	background-position: bottom;
	line-height: 1.5em;
}

.white .people {
	font-size: var(--font-size-m);
	font-weight: bold;
}

small {
	color: #777777;
	text-align: left;
	line-height: 2em;
	font-size: var(--font-size-s);
}

small ul li {
	position: relative;
	padding-left: 15px;
}

small ul li:before {
	content: "";
	position: absolute;
	top: .4em;
	left: 0;
	width: 10px;
	height: 10px;
	border: 1px solid #777777;
	border-radius: 50%;
}

.white02 {
	width: 590px;
	margin: var(--margin-s) auto;
	display: flex;
	justify-content: space-between;
}

.white02 div {
	width: 31%;
	padding: var(--margin-s);
	background-color: #fefefe;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.prize02 {
	background-color: #ce9e42;
}

.prize03 {
	background-color: #8e959c;
}

.prize04 {
	background-color: #bd796a;
}

.description {
    line-height: 1.5em;
}

.people02 {
	font-weight: bold;
}

.small-576px ul {
	width: 576px;
	margin: 0 auto;
}

/* SPECIAL */
.special .text,
.prize05 {
	margin-bottom: var(--margin-m);
}

.special img {
	margin-bottom: var(--margin-s);
}

.prize05 {
	background-image: linear-gradient(70deg, #53b5f2, #f7e946);
	position: relative;
	z-index: 2;
}

figcaption {
	color: #555555;
	font-size: var(--font-size-s);
}

/* REQUIREMENTS */
.requirements ul {
	width: fit-content;
	margin: 0 auto;
	text-align: left;
	line-height: 2em;
	width: 576px;
}

.requirements ul li {
	list-style-type: disc;
	margin-left: 30px;
}
  
/* APPLY */
.step-sec p,
.step-sec img,
.step-sec div,
.apply .white .text-520px,
.btn-X {
	margin-bottom: var(--margin-m);
}

.step {
	color: #232388;
	background-color: #efe211;
}

.border {
	height: 2px;
	background-image: linear-gradient(to right, #c6c6c6, #c6c6c6 6px, transparent 6px);
	background-size: 10px 2px;
}

.btn-X {
	display: inline-block;
	padding: 0.8em 2em;
	border: 2px solid #000000;
	background-color: #000000;
	border-radius: 5px;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}

.btn-X:hover {
	border: 2px solid #000000;
	color: #000000;
	background-color: #ffffff;
	transition: .3s;
}

/* NOTES */
.notes ul {
	margin-left: 16px;
}

.notes ul li {
	list-style-type: disc;
	text-align: left;
}

.notes,
.notes .text {
	margin-bottom: var(--margin-l);
}

/* AREA */
.area {
	text-align: left;
	font-size: var(--font-size-s);
}

.area .text {
	margin-bottom: var(--margin-s);
}

.area div {
	text-align: justify;
}

/* APPLE */
.apple {
	padding-bottom: var(--margin-m);
}