@charset "UTF-8";
/*====================================================

名探偵コナン映画2026LP

=====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Cardo:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Sawarabi+Mincho&family=Shippori+Mincho&display=swap');
* {
    margin: 0;
    padding: 0;
}
#ContentsArea_conan2026 {
	font-family: "Noto Sans JP", serif;
    font-size: 62.5%;
	font-weight: 500;
    line-height: 1;
	overflow: hidden;
    text-align: center;
}
#ContentsArea_conan2026 img {
    vertical-align: middle;
	transition: all .3s;
}
#ContentsArea_conan2026 a:hover img {
    opacity: 0.8;
}
#ContentsArea_conan2026 a {
    outline: 0;
    text-decoration: none;
}

#ContentsArea_conan2026 h2,
#ContentsArea_conan2026 h3 {/*初期化*/
	background: initial;
    border: none;
	margin: 0 auto;
}
#ContentsArea_conan2026 .inner {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 5% 30px;
	position: relative;
	text-align: center;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	.pane-contents {
		padding-bottom: 0;
	}
	#ContentsArea_conan2026 .inner {
		padding: 0 2% 30px;
	}
}
ul{
	list-style:none;	
}
/*------------------------------------------------------------------
MV
-------------------------------------------------------------------*/
#area_mv {
	
    background: #d1e6ed;
	position: relative;
	z-index: 1;
}
#area_mv h1 {
    margin: 0;
	padding: 0;
}
.httl img {
	height: 155px;
	width: auto;
}
.wrap-goods-list .httl {
	margin: 30px auto !important;
	position: relative;
}
@media screen and (max-width: 640px) {
	.httl img {
		height: 80px;
	}
}
.sub{
	font-size: 1.3rem;
}
.sp {
	display: none;
}
@media screen and (max-width: 640px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}

/*------------------------------------------------------------------
PICK UP
-------------------------------------------------------------------*/

.wrap-goods-pickup {
	background: #01285f;
	background: linear-gradient(0deg, #002665 0%, #01285f 60%, #012a60 100%);
    background-size: 100%;
    padding: 100px 0 0;
	position: relative;
	z-index: 1;
}
.wrap-goods-pickup::before {
	background: url(../../../../img/3010/lp_conan2026/ttlbg-pickup.webp) no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 480px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}
.update {
	background: url(../../../../img/3010/lp_conan2026/update-bg.png) no-repeat center;
	background-size: contain;
	color: #660010;
	font-family: "Noto Serif JP", "Hiragino Kaku Gothic ProN", Meiryo, Serif-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto;
    padding: 40px 0 65px;
	position: relative;
    text-align: center;
    width: 40%;
}
.update span {
	font-size: 1.5em;
}
.wrap-goods-pickup a {
	align-items: center;
    background: url(../../../../img/3010/lp_conan2026/pickup-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
	flex-wrap: wrap;
	font-size: 1.4rem;
	justify-content: space-between;
	line-height: 1.2;
    margin: 0 0 30px;
	padding: 40px;
    position: relative;
    transition: all .5s;
}
.wrap-goods-pickup a:hover {
	text-decoration: none;
}
.wrap-goods-pickup .goods-image {
    padding: 0 5% 0 2%;
    width: 50%;
}
.pickup {
	text-align: left;
    width: 50%;
}
.pickup p {
	font-family: "Noto Sans JP", serif;
    font-size: 62.5%;
	font-weight: 400;
    font-size: 0.7em;
	line-height: 1.5;
    margin: 10px auto;
	/*min-height: 50px;*/
}
.tag {
	background: url(../../../../img/3010/lp_conan2026/tag.png) no-repeat;
	background-size: cover;
	color: #fff;
	font-size: 22px;
	margin-left: -5px;
	padding: 15px 0 20px 46px;
	max-width: 258px;
}
.goods-name {
	border-bottom: 1px solid #a3a8ae;
	color: #173768;
	font-family: "Noto Serif JP", "Hiragino Kaku Gothic ProN", Meiryo, Serif-serif;
	font-size: 1.59rem;
	font-weight: 600;
	line-height: 1.4;
	padding-bottom: 10px;
}
.goods-name span {
	display: block;
	font-size: 0.6em;
	padding-top: 20px;
}
.pickup .txt-price {
	font-family: "Noto Serif JP", "Hiragino Kaku Gothic ProN", Meiryo, Serif-serif;
	font-weight: 700;
	font-size: 1.7rem;
	padding: 20px 0 0;
}
.pickup .txt-price span {
    font-size: 0.8em;
}
.wrap-goods-pickup a .btn {
    background: url(../../../../img/3010/lp_conan2026/btn-pickup.png) no-repeat;
	background-size: cover;
    color: #fff;
	display: block;
	font-size: 20px;
	font-weight: 500;
	line-height:2;
	margin: 15px 0;
	padding: 12px 0 20px 80px;
	position: relative;
	text-align: left;
	width: 300px;
}
.wrap-goods-pickup a .btn::before {
	border-style: solid;
	border-width:  8px 8px 8px;
	border-color: transparent transparent transparent #fff;
	content: " ";
	height: 0;
	position: absolute;
	right: 50px;
	top: 35%;
	width: 0;
}
.wrap-goods-pickup a:hover {
    backdrop-filter: hue-rotate(180deg);
}

@media screen and (max-width: 640px) {
	.wrap-goods-pickup {
		padding: 40px 0 20px;
	}
	.wrap-goods-pickup .goods-image {
		padding: 0 3% 0 4%;
	}
	.update {
        font-size: 1.2rem;
		margin-top: -10px;
        padding: 15px 0 25px;
        text-align: center;
        width: 58%;
	}
	.wrap-goods-pickup a {
		font-size: 1.5rem;
		line-height: 1.2;
		margin: 0 0 10px;
		padding: 4vw 4vw 4vw 0;
	}
	.tag {
		font-size: 13px;
		margin: 11px 0 7px -5px;
		padding: 12px 0 7px 32px;
		width: 94%;
	}
	.pickup {
		font-size: 11px;
	}
	.pickup p {
		font-size: 11px;
		margin: 0 auto 8px;
		min-height: 7vw;
	}
	.goods-name {
		font-size: 14px;
	}
	.goods-name span {
		font-size: 10px;
		padding-top: 5px;
	}
	.pickup .txt-price {
		font-size: 1rem;
		padding: 1vw 0 2vw;
	}
	.wrap-goods-pickup a .btn {
		background: url(../../../../img/3010/lp_conan2026/btn-pickup.png) no-repeat;
    	background-size: contain;
        font-size: 0.7rem;
        margin: 0;
        padding: 10px 0 12px 45px;
        width: 96%;
	}
	.wrap-goods-pickup a .btn::before {
		border-width: 5px 5px 5px;
		right: 35px;
		top: 33%;
	}
}

@media screen and (max-width: 375px) {
	.tag {
        padding: 9px 0 7px 28px;
    }
	.wrap-goods-pickup a .btn {
        padding: 5px 0 10px 35px;
        width: 90%;
	}
	.wrap-goods-pickup a .btn::before {
        right: 25px;
        top: 30%;
    }
}
/*------------------------------------------------------------------
GOODS LIST
-------------------------------------------------------------------*/
.wrap-goods-list {
	background: linear-gradient(rgba(0, 46, 95, 1), rgba(0, 25, 30, 1));
    padding: 100px 0;
    position: relative;
	z-index: 1;
}
.wrap-goods-list::before,
.wrap-goods-list::after {
	background: url(../../../../img/3010/lp_conan2026/bg-goods.webp) no-repeat;
	background-size: contain;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: -58px;
	width: 100%;
	z-index: 0;
}
.wrap-goods-list::after {
	background: url(../../../../img/3010/lp_conan2026/bg-ftr.webp) no-repeat;
	background-size: contain;
top: initial;
    height: 700px;
    bottom: -150px;
}
.wrap-goods-list h3 {
	margin-bottom: 50px !important;
}
.wrap-goods-list h3 {
	margin-bottom: 50px !important;
}
.wrap-goods-list h3#anchor {
	position: relative;
	z-index: 2;
}
.wrap-goods-list h3#anchor:before {
    content: "";
    display: block;
    visibility: hidden;
}
.List__item {
    display: flex;
    flex-wrap: wrap;
	padding-top: 100px;
    margin-top:-100px;
}

/*  API list  */
.List__item-parts {
	background: linear-gradient(100deg, #4d6196 0%, #013565 60%,#013565 70%,#4d6196 100%);
	margin: 0 0.6% 11px;
	padding: 5px;
    text-align: center;
	width: 32%;
}
.List__item-parts a {
	background: linear-gradient(130deg, #0e243b 0%, #1a3047 50%, #0e243b 100% );
	color: #fff;
    display: block;
	padding: 10px 20px;
    position: relative;
	z-index: 1;
}
.List__item-parts a:hover {
	background: linear-gradient(130deg, #374a7d 0%, #1a3047 80%, #0e243b 100% );
	color: #fff;
}

.List__item-parts .goods-img {
    margin: 0 0 10px;
    text-align: center;
}
.List__item-parts dl {
	line-height: 1.2;
	position: relative;
	text-align: left;
}
.List__item-parts dt {
    font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	height: 85px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* 行数 */
}
.List__item-parts dt::after {
	border-bottom: 1px solid #fff;
    content: "";
	display: block;
	position: absolute;
	height: 20px;
	top: 75px;
	width: 100%;
}
.List__item-parts dd {
    font-size: 1rem;
	font-weight: normal;
	height: 170px;
	line-height: 1.3;
	padding-top: 15px;
	position: relative;
}
.List__item-parts dd p {
    font-size: 14px;
	min-height: 55px;
	padding: 5px 0 0;
}
.List__item-parts .goods-price {
    font-size: 23px;
	font-weight: 700;
	display: inline-block;
	margin: 10px 0;
	position: relative;
}

.List__item-parts .goods-price::after {
	content: "（税込）";
	font-size: 0.8rem;
	display: inline-block;
}
.List__item-parts .btn {
    background: #fff;
	border-radius: 2px;
	border: 2px solid #660010;
    color: #660010;
    font-size: 17px;
	font-weight: 700;
    height: 40px;
    line-height: 0;
	margin: 10px auto;
	padding: 19px 0 0;
	position: relative;
	width: 100%;
}
.List__item-parts .btn::after {
	background: url(../../../../img/3010/lp_conan2026/arrow.png) no-repeat;
	background-size: contain;
	content: '';
	display: block;
	position: absolute;
	top: 35%;
	right: 40px;
    height: 20px;
    width: 8px;
}
.List__item-parts a:hover .btn {
	border: 2px solid #c9992b;
}

.bnr {
	line-height: 100px;
    margin: 30px auto;
    position: relative;
    text-align: center;
    width: 600px;
}
.bnr a {
    background: #fff;
	border-radius: 2px;
	border: 8px solid #660010;
    color: #660010;
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
    transition: all .5s;
}
.bnr a::before {
	border-style: solid;
	border-width:  8px 8px 8px;
	border-color: transparent transparent transparent #660010;
	content: " ";
	height: 0;
	position: absolute;
	right: 50px;
	top: 43%;
    transition: all .5s;
	width: 0;
}
.bnr a:hover  {
	border: 8px solid #c9992b;

}
@media screen and (max-width: 640px) {
	.wrap-goods-list {
		padding: 0;
	}
	.wrap-goods-list::after {
		top: 97%;
	}
	.wrap-goods-list .httl {
		margin: 0 !important;
	}
	.List__item {
		justify-content: space-between;
		padding-top: 50px;
	    margin-top: -50px;
	}

	.List__item-parts {
		width: 48%;
		margin: 0 1% 9px;
	}
	.List__item-parts a {
		padding: 10px;
	}
	.List__item-parts .goods-img {
		margin: 0 0 10px;
		text-align: center;
	}
	.List__item-parts dl {
		line-height: 1.2;
	}
	.List__item-parts dt {
		font-size: 14px;
		height: 55px;
	}
	.List__item-parts dt::after {
		top: 45px;
	}
	.List__item-parts dd {
		font-size: 11px;
		height: 30vw;
	}
	.List__item-parts dd p {
		font-size: 11px;
		min-height: initial;
		padding: 5px 0;
	}
	.List__item-parts .goods-price {
		font-size: 15px;
		margin: 7px 0;
		padding: 1px 2px 1px 5px;
	}
	.List__item-parts .goods-price::after {
		content: "（税込）";
		font-size: 0.8rem;
		display: inline-block;
	}
	.List__item-parts .btn {
		bottom: 0;
		font-size: 11px;
		height: 30px;
		margin: 10px auto 0;
		padding: 12px 0 0;
	}
	.List__item-parts .btn::after {
		top: 30%;
		right: 15%;
		height: 16px;
		width: 6px;
	}
	.bnr {
		height: 80px;
		line-height: 74px;
		margin: 30px auto 0;
		width: 98%;
	}
	.bnr a {
		font-size: 16px;
		padding-left: 12vw;
		text-align: left;
	}
	.bnr a::before {
        right: 25px;
        top: 46%;
	}
}

@media screen and (max-width: 390px) {
	.List__item-parts dd {
		height: 29vw;
	}
	.bnr a {
        padding-left: 12vw;
    }
}

/*------------------------------------------------------------------
MOVIE
-------------------------------------------------------------------*/
.movie {
	background: url(../../../../img/3010/lp_conan2026/bg-youtube.webp) no-repeat bottom;
	background-size: cover;
	margin-top: -50px;
	padding: 130px 0 100px;
    position: relative;
	z-index: 0;
}
.movie h3 {
	background: url(../../../../img/3010/lp_conan2026/ttlbg-movie.png) no-repeat center !important;
	background-size: contain !important;
	color: #fff;
	font-family:"Hiragino Mincho ProN", YuMincho, serif;
	font-size: 50px;
	letter-spacing: 2px;
	line-height: 1.5;
	padding: 30px 0;
	position: relative;
    text-shadow: #000 0 5px 8px;
	text-align: center;
}
.movie h3 span {
	font-size: 36px;
	display: block;
}
.movie h3 .sm {
	font-size: 40px;
	font-style: normal;
}
.movie .wrap-iframe {
	height:0;
	margin-top: 50px;
	padding-top: 56.25%; /* (16:9)56.25 */
	position: relative;
}
.movie .wrap-iframe iframe {
	height: 100%;
	left: 0;
	margin: 0 5%;
	position: absolute;
	top: 0;
	width: 90%;
}

@media screen and (max-width: 640px) {
	.movie {
		padding: 40vw 0 15vw;
	}
	.movie h3 {
		font-size: 20px !important;
	}
	.movie h3 span {
		font-size: 16px;
	}
	.movie h3 .sm {
		font-size: 17px;
	}
	.movie .wrap-iframe {
		margin-top: 30px;
	}
}

/*------------------------------------------------------------------
CHARACTER
-------------------------------------------------------------------*/
.character {
    background: url(../../../../img/3010/lp_conan2026/bg-character.webp) no-repeat;
    background-size: 100%;
    padding: 100px 0 0;
    position: relative;
	z-index: 1;
}
.character h3 {
    background: url(../../../../img/3010/lp_conan2026/ttlbg-character.png) no-repeat !important;
    background-size: cover !important;
	color: #fff;
	font-size: 50px;
	letter-spacing: 2px;
	padding: 30px 0;
	text-align: center;
    width: 100%;
}
.character h3 span {
	font-size: 20px;
	margin-bottom: 30px;
	display: block;
}
.character h3 span > span{
	color: #8abaeb;
	font-size: 20px;
	display: inline;
}
.character ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto ;
	width: 90%;
}
.character ul li {
    margin: 0 0 15px;
	position: relative;
    width: 49%;
}
@media screen and (max-width: 640px) {
	.character {
		background: url(../../../../img/3010/lp_conan2026/bg-character-sp.webp) no-repeat;
		background-size: cover;
		padding: 10vw 0 0;
	}
	.character h3 {
		font-size: 24px;
	}
	.character h3 span {
		font-size: 13px;
		margin-bottom: 20px;
	}
	.character h3 span > span {
		font-size: 13px;
	}
	.character ul {
		display: block;
		margin: 30px auto;
		width: 80%;
	}
	.character ul li {
		margin: 0 0 10px;
		width: 100%;
	}
}

/*------------------------------------------------------------------
PAGER
-------------------------------------------------------------------*/
.pagination-container {
	margin-top: 50px;
}
.pagination-container .pagination li {
	font-size: 1.2rem;
	height: 40px;
	line-height: 35px;
	margin: 0 10px;
	position: relative;
	transition: all .3s;
	width: 40px;
}
.pagination-container .pagination li a {
	background: #252628;
    border-radius: 50vw;
    border: 1px solid #fff;
	color: #fff;
    display: inline-block;
	font-size: 18px;
    height: 43px;
	line-height: 2.2;
    width: 43px;
}
.pagination-container .pagination li:hover a {
	opacity: 0.5;
}
.pagination > * {
	background: none;
	font-weight: 300;
}

.pagination-container .pagination li.prev a,
.pagination-container .pagination li.next a {
	background: none !important;
	border: none !important;
	width: 12px;
}
.pagination-container .pagination li.prev {
	margin-right: 40px;
}
.pagination-container .pagination li.next {
	margin-left: 40px;
}
.pagination-container .pagination li.navi-active a {
	background: #214786 !important;
}
.disabled {
	pointer-events: none; /* クリック無効 */
	opacity: 0 !important; /* 見た目を薄くする */
  }
@media screen and (max-width: 640px) {
	.pagination-container {
		margin-top: 30px;
	}
	.pagination-container .pagination li {
		font-size: 0.8rem;
		line-height: 1.4;
		height: 28px;
		margin: 0 5px;
		width: 28px;
	}
	.pagination-container .pagination li.prev,
	.pagination-container .pagination li.next {
		width: 15px;
	}
}
.copyright {
	color: #fff;
	font-size: 0.8rem;
	font-weight: 300;
	line-height: 1.5;
	padding: 60px 0 10px;
    text-shadow: 0 0 3px #000;
}
@media screen and (max-width: 640px) {
	.copyright {
		font-size: 0.8rem;
		padding: 0 0 20px;
	}
}