@charset "utf-8";
/* ------------------------------
JAL user0004_ar_LP 202405 sz
------------------------------ */


/* .ar_LP */
.ar_LP{ margin: 0 0 1.5em;}
html[data-browse-mode="P"] .ar_LP{ margin: 0 0;}



/* common */
.ar_LP .type_desc{ padding: 5px 5px;}
html[data-browse-mode="P"] .ar_LP .type_desc{ padding: 20px 10px;}


.ar_LP h1,
.ar_LP h2,
.ar_LP h3,
.ar_LP h4{ color: #222; font-family: "HG明朝E", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro W6", "ＭＳ Ｐ明朝", "MS PMincho", serif;}


html[data-browse-mode="S"] .ar_LP h2{ font-size: 18px; margin: 20px 0;}
html[data-browse-mode="S"] .ar_LP h3,
html[data-browse-mode="S"] .ar_LP h4,
html[data-browse-mode="S"] .ar_LP h5,
html[data-browse-mode="S"] .ar_LP h6{ font-size: 16px;}
html[data-browse-mode="P"] .ar_LP h2{ font-size: 34px; margin: 40px 0;}
html[data-browse-mode="P"] .ar_LP h3{ font-size: 23px;}
html[data-browse-mode="P"] .ar_LP h4{ font-size: 20px;}
html[data-browse-mode="P"] .ar_LP h5{ font-size: 18px;}
html[data-browse-mode="P"] .ar_LP h6{ font-size: 16px;}

.ar_LP .box_com{ margin-bottom: 5px; line-height: 1.3em;}

.ar_LP .sec_box{ margin-bottom: 2em;}

/*colors*/
html[data-browse-mode="P"] .ar_LP .f_purple_pc,
.ar_LP .f_purple{ color: #830053;}
.ar_LP .f_red{ color: #800;}

.ar_LP .half_under_purple{
	font-weight: normal;
	background: linear-gradient(0deg, rgba(131, 0, 83, 0.2) 0%, rgba(131, 0, 83, 0.2) 30%, rgba(131, 0, 83, 0) 30%, rgba(131, 0, 83, 0) 100%);
}


/***********/
/*list_LR 左右リスト*/
	/*sp*/
html[data-browse-mode="S"]  .ar_LP .list_LR{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 25vw minmax(10vw, auto) auto;
	gap: 5px;
}
html[data-browse-mode="S"] .ar_LP .list_LR .line{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 2px;
}
html[data-browse-mode="S"] .ar_LP .list_LR .line .title{ margin-bottom: unset;}

	/*PC*/
html[data-browse-mode="P"] .ar_LP .list_LR .line{
	margin-bottom: 1em;
	display: grid;
	grid-template-rows: 280px;
	grid-template-columns: 500px minmax(0, 1fr) ;
	gap: 5px;
	grid: "PHOTO PHOTO PHOTO TITLE TITLE"
		"PHOTO PHOTO PHOTO TEXT TEXT";
}
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(even){
	grid-template-columns: minmax(0, 1fr) 500px ;
	grid: "TITLE TITLE PHOTO PHOTO PHOTO "
		"TEXT TEXT PHOTO PHOTO PHOTO";
}
html[data-browse-mode="P"] .ar_LP .list_LR .line .photo{ grid-area: PHOTO;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .title{ grid-area: TITLE;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .text{ grid-area: TEXT;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .photo img{ max-width: 493px;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .title{ margin: unset; padding-top: 20px; text-align: center;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .text{ padding-bottom: 20px;}
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(odd) .title,
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(odd) .text{ padding-left: 20px; padding-right: 35px;}
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(even) .title,
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(even) .text{ padding-left: 35px; padding-right: 20px;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .title{ position: relative;}
html[data-browse-mode="P"] .ar_LP .list_LR .line .title::before{
	content: "";
	position: absolute; width: 70px; height: 70px;
	background: url( /img/0004/img/content_image/950227_detail01_pc.webp ) center center / cover no-repeat;
}
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(odd) .title::before{ top: 0; right: 8px; transform: scaleX(-1);}
html[data-browse-mode="P"] .ar_LP .list_LR .line:nth-of-type(even) .title::before{ top: 0; left: 8px;}

/***********/
/*deco_wave_purple 見出し用波線飾(紫)*/

.ar_LP .deco_wave_purple{ text-align: center;}
.ar_LP .deco_wave_purple::before,
.ar_LP .deco_wave_purple::after{
	content: "";
	display: inline-block; margin: 0.2em 0; height: 0.7em; width: 2.5em; vertical-align: middle;
	background: url(/img/0004/img/content_image/950227_deco_wave.png) center center / auto 100% no-repeat;
}
.ar_LP .deco_wave_purple::after{ transform: scaleX( -1 );}
html[data-browse-mode="P"] .ar_LP .deco_wave_purple::before,
html[data-browse-mode="P"] .ar_LP .deco_wave_purple::after{ height: 1em; width: 3.5em;}

/***********/
/*popup ポップアップ*/
.ar_LP .popup_flag{ display: none;}
.ar_LP .popup_open{
	position: absolute; display: block; width: 5.5em; padding: 1px 6px; line-height: 1.1em;
	text-align: center; color: #fff; border-radius: 50px; cursor: pointer;
}
.ar_LP .popup_overlay{
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999;
	display: none; width: 100%; height: 200vh; background: rgba( 0,0,0,0.72)
}
.ar_LP .popup_window{
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: block;margin: 0 auto; padding: 10px;
	width: 86%; max-width: 680px; height: auto; 
	color: #000; background-color: rgba(255, 255, 255, 0.88); border-radius: 5px;
}
html[data-browse-mode="P"] .ar_LP .popup_window{ padding: 20px 10px; min-height: 140px;}
html[data-browse-mode="P"] .ar_LP .popup_window .text{ font-size: 20px;}

.ar_LP .popup-close{
	position: absolute; top: -1.5em; right: 0;
	font-size: 3em; color: #fff; cursor: pointer;
}

/*▼オールドビンテージ紹介*************************/
.ar_LP .old_vintage{ position: relative;}
html[data-browse-mode="S"] .ar_LP .old_vintage{ padding-bottom: 20vw;}


.ar_LP .old_vintage .sec_hd{ margin-bottom: 10px; padding: 5px 20%;}
html[data-browse-mode="P"] .ar_LP .old_vintage .sec_hd{ padding: 5px 29%;}

.ar_LP .old_vintage::before,
.ar_LP .old_vintage::after{
	content: ""; position: absolute; display: block; width: 90px; height: 90px;
	background: url( /img/0004/img/content_image/950227_top36_pc.webp ) center center / 100% auto no-repeat;
}
.ar_LP .old_vintage::after{ background-image: url( /img/0004/img/content_image/950227_top37_pc.webp );}

html[data-browse-mode="S"] .ar_LP .old_vintage::before,
html[data-browse-mode="S"] .ar_LP .old_vintage::after{ top: 65vw; transform: translateX( -50% );}
html[data-browse-mode="P"] .ar_LP .old_vintage::before,
html[data-browse-mode="P"] .ar_LP .old_vintage::after{
	top: 50%; transform: translateX( -50% );
	width: 167px; height: 167px;
}

html[data-browse-mode="S"] .ar_LP .old_vintage::before{ left: 40%; }
html[data-browse-mode="S"] .ar_LP .old_vintage::after{ left: 60%; }

html[data-browse-mode="P"] .ar_LP .old_vintage::before{ left: 15%; }
html[data-browse-mode="P"] .ar_LP .old_vintage::after{ left: 85%; }

.ar_LP .old_vintage .sec_box .text{ line-height: 1.5em !important; text-align: center;}
html[data-browse-mode="P"] .ar_LP .old_vintage .sec_box .text{ font-size: 20px;}


/*▼選ばれる理由*************************/

.ar_LP .reason .reason_box{ position: relative;}

html[data-browse-mode="S"] .ar_LP .reason .reason_box .desc .title{
	position: absolute; top: 16vw; left: 50%; transform: translateX(-50%);
	padding: 20px 10px; width: 80%;
	font-size: 20px; text-align: center; line-height: 1.5em;
	background: rgb(255 255 255 / 65%); text-shadow: 2px 2px 2px white;
}

html[data-browse-mode="P"] .ar_LP .reason .reason_box:nth-of-type(even){ flex-direction: row-reverse;}
html[data-browse-mode="P"] .ar_LP .reason .reason_box .title{ padding-top: 15px;}
html[data-browse-mode="P"] .ar_LP .reason .reason_box:nth-of-type(even) .title{ text-align: right;}

/*▼よくある質問*************************/

html[data-browse-mode="P"] .ar_LP .faq .qa{ padding: 5px 8%;}
.ar_LP .faq .qa .question{ padding: 10px; font-size: 110%; color: #fff; background: #5b023a;}
html[data-browse-mode="P"] .ar_LP .faq .qa .question{ font-size: 22px; text-align: center;}
.ar_LP .faq .qa .question:nth-of-type(n+2){ margin-top: 16px;}
html[data-browse-mode="P"] .ar_LP .faq .qa .answer{ padding: 15px 10px;}


/*▼カルーセルスライダー*************************/

/* css_carousel_slider5 */
.ar_LP .css_carousel_slider5 { position: relative; width: 100%; overflow: hidden;}
.ar_LP .css_carousel_slider5 img { vertical-align: top;}
	/*figcaption 透け防止*/
.ar_LP .css_carousel_slider5 figcaption.text{ background: #fff;}

	/* スライド設定 */
.ar_LP .css_carousel_slider5 .slide_wrap {
	width: 500%; /* 画像の合計数*100% */
	position: absolute; top: 0; left: 0; z-index: 0;
	display: flex;
}
.ar_LP .css_carousel_slider5 .slide_wrap_main { width: 100%; z-index: 1;}
.ar_LP .css_carousel_slider5 .slide_wrap { width: 500%; }


	/* アニメ設定 */
.ar_LP .css_carousel_slider5 .slide_wrap,
.ar_LP .css_carousel_slider5 .slide_wrap_main{ animation-delay: 1.5s;}
.ar_LP .css_carousel_slider5 .slide_wrap{
	animation: KEY_slider5 20s ease-in-out infinite;
}
.ar_LP .css_carousel_slider5 .slide_wrap_main{
	animation: KEY_slider5_main 20s ease-in-out infinite;
}
.ar_LP .css_carousel_slider5 .slide { width: 100%;}

	/* アニメーションKEY設定 */
@keyframes KEY_slider5 {
	  0% { transform: translateX(0); }
	 16% { transform: translateX(calc( 1 / 5 * -100%)); }
	 20% { transform: translateX(calc( 1 / 5 * -100%)); }
	 36% { transform: translateX(calc( 2 / 5 * -100%)); }
	 40% { transform: translateX(calc( 2 / 5 * -100%)); }
	 56% { transform: translateX(calc( 3 / 5 * -100%)); }
	 60% { transform: translateX(calc( 3 / 5 * -100%)); }
	 76% { transform: translateX(calc( 4 / 5 * -100%)); }
	 80% { transform: translateX(calc( 4 / 5 * -100%)); }
	 96% { transform: translateX(calc( 5 / 5 * -100%)); }
	100% { transform: translateX(calc( 5 / 5 * -100%)); }
}
@keyframes KEY_slider5_main {
	0% { transform: translateX(100%); }
	80% { transform: translateX(100%); }
	96% { transform: translateX(0%);}
}