/*--------------------------------------------------------*/

/*  ページタイトルの背景写真　*/

/*--------------------------------------------------------*/

@media print, screen and (min-width: 768px){

.pagetitleBox .inner .titleBox{
	background:url("../img/main.jpg") top right no-repeat;
	height:100px;
}

}

@media screen and (max-width: 768px){

.pagetitleBox .inner .titleBox{
	background:url("../img/sp_main.jpg") top right no-repeat;
	height:100px;
}

}

/*--------------------------------------------------------*/

/*  動画一覧　*/

/*--------------------------------------------------------*/

@media print, screen and (min-width: 768px){

.movie_container{
	width:980px;
	margin:20px auto 0;
}

.movie_container p.movie_message{
	padding:30px 10px;
	font-size:14px;
	color:#333;
	font-weight:normal;
	line-height:1.8em;
	letter-spacing:0.5px;
	font-feature-settings : "palt";
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
}

.movie_container .movie_list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
}

.movie_container .movie_list .box{
	background: #FFF;
	border:1px solid #E5E5E5;
	border-radius: 6px;
	overflow: hidden;
	box-shadow:
	0 1px 2px rgba(0,0,0,0.06),
	0 4px 8px rgba(0,0,0,0.04);
 	cursor:pointer;
	transition: all  0.2s ease;
}

.movie_container .movie_list .box:hover{
	opacity: 0.7;
}

.movie_container .movie_list .box .movie_info{
	padding:30px 15px;
	text-align: center;
}

.movie_container .movie_list .box .movie_info .product_category{
	font-family: 'Roboto',"Noto Sans JP","游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	color:#005FAA;
	font-weight:500;
	line-height:1.5em;
	letter-spacing:0.05em;
	font-feature-settings : "palt";
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	margin-bottom: 6px;
}

.movie_container .movie_list .box .movie_info h2.product_name{
	font-family: 'Roboto', sans-serif;
	font-size:21px;
	color:#005FAA;
	font-weight:600;
	line-height:1.5em;
	letter-spacing:0.05em;
	font-feature-settings : "palt";
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
}

}

@media screen and (max-width: 768px){

.movie_container{
	padding:0 15px;
}

.movie_container p.movie_message{
	padding:20px 15px;
	font-size:13px;
	color:#333;
	font-weight:normal;
	line-height:1.8em;
	letter-spacing:0.3px;
	font-feature-settings : "palt";
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	text-align: justify;
}

.movie_container p.movie_message br{
	display:none;
}

.movie_container .movie_list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.movie_container .movie_list .box{
	background: #FFF;
	border:1px solid #E5E5E5;
	border-radius: 6px;
	overflow: hidden;
	box-shadow:
	0 1px 2px rgba(0,0,0,0.06),
	0 4px 8px rgba(0,0,0,0.04);
	cursor:pointer;
	transition: all  0.2s ease;
}

.movie_container .movie_list .box:hover{
	opacity: 0.7;
}

.movie_container .movie_list .box .movie_info{
	padding:30px 15px;
	text-align: center;
}

.movie_container .movie_list .box .movie_info .product_category{
	font-family: 'Roboto',"Noto Sans JP","游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
	color:#005FAA;
	font-weight:500;
	line-height:1.5em;
	letter-spacing:0.05em;
	font-feature-settings : "palt";
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	margin-bottom: 5px;
}

.movie_container .movie_list .box .movie_info h2.product_name{
	font-family: 'Roboto', sans-serif;
	font-size:15px;
	color:#005FAA;
	font-weight:600;
	line-height:1.5em;
	letter-spacing:0.05em;
	font-feature-settings : "palt";
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
}

}

/*--------------------------------------------------------*/

/*  モーダルウインドウ　*/

/*--------------------------------------------------------*/

@media print, screen and (min-width: 768px){

body.modal_open{
    overflow:hidden;
}

.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.8);
    z-index:9999;
}

.modal.active{
    display:flex;
}

.modal_inner{
    position:relative;
    width:90%;
    max-width:900px;
}

.modal video{
    width:100%;
	aspect-ratio:16 / 9;
    display:block;
    background:#000;
}

.modal_close{
    position:absolute;
    top:-40px;
    right:0;
    width:36px;
    height:36px;
    border:none;
    background:none;
    color:#fff;
    font-size:32px;
    cursor:pointer;
}

.box{
    cursor:pointer;
}

}

@media screen and (max-width: 768px){

body.modal_open{
    overflow:hidden;
}

.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.8);
    z-index:9999;
}

.modal.active{
    display:flex;
}

.modal_inner{
    position:relative;
    width:94%;
    max-width:900px;
}

.modal video{
    width:100%;
	aspect-ratio:16 / 9;
    display:block;
    background:#000;
}

.modal_close{
    position:absolute;
    top:-35px;
    right:0;
    width:36px;
    height:36px;
    border:none;
    background:none;
    color:#fff;
    font-size:34px;
    cursor:pointer;
}

.box{
    cursor:pointer;
}

}