@charset "utf-8";

/***************************************************************************
Media Queries
****************************************************************************/

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

/***************************************************************************
main a
****************************************************************************/

.main a {
    text-decoration: none;
}

/***************************************************************************
top_img
****************************************************************************/

#top_img {
    position: relative;
    padding-top: 40%;
    overflow: hidden;
}
#top_img .top_img_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#top_img .top_img_inner:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_top_img_dot.png);
}
#top_movie video {
    width: 100%;
}
#top_movie_logo {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    z-index: 1;
}
#top_movie_logo img {
    height: 150px;
    padding: 5px 0px 5px 0px;

}
#top_movie_logo img path {
  fill: red !important;

}

/***************************************************************************
youtube_popup
****************************************************************************/

ul.pop_up {
	display: flex;
    margin-bottom: 15px;
}
ul.pop_up li {
    margin-right: 10px;
}
ul.pop_up li span {
	width: 50px;
    height: 50px;
    background-color: #EB788E;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 12px;
}

/***********************************************************************
original_js
***********************************************************************/

#movie_outline {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000;
    display: none;
    z-index: 9999999;
}
#movie_outline .close_btn {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    color: #FFFFFF;
    cursor: pointer;
}
#movie_js {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 80%;
    padding-top: 45%;  /*アクセプト比 56.25% × ワイド80%*/
}
#movie_js iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/***************************************************************************
Youtube_tab_menu
****************************************************************************/

ul#youtube_tab {
	display: flex;
}
#youtube_tab li {
	flex: 1;
	margin: 0px 0.5% 10px 0.5%;
}
#youtube_tab li a {
	display: block;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
	padding-top: 45%;
	transition: 0s;
}
#youtube_tab li img {
	width: 100%;
}
#youtube_tab li .movie_01 a {
	background-image: url(../img/bg-tab_01.png);
}
#youtube_tab li.select .movie_01 a {
	background-image: url(../img/bg-tab_01_select.png);
}
#youtube_tab li .movie_02 a {
	background-image: url(../img/bg-tab_02.png);
}
#youtube_tab li.select .movie_02 a {
	background-image: url(../img/bg-tab_02_select.png);
}

/***********************************************************************
youtube再生部分
***********************************************************************/

.movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom: 40px;
}
.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 99;
}

/***************************************************************************
sp_auto_play
****************************************************************************/

.sp_auto_play {
	padding-top: 56.25%;		/* youtubeのアクセプト比 */
	height: 0;
	position: relative;
	margin-bottom: 40px;
}
.sp_auto_play video,.sp_auto_play iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/***************************************************************************
inview_youtube
****************************************************************************/

.inview_youtube {							/* PC版でレスポンシブにするとスクロール自動再生が機能しない */
	height: 500px;
}
.inview_youtube iframe {
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 890px) {	/* 890pxはyoutubeの再生時に上下黒帯が出る椎閾値。768でもよいかも。ここからレスポンシブ化*/
.inview_youtube {
	padding-top: 56.25%;					/* youtubeのアクセプト比 */
	height: 0;
	position: relative;
}
.inview_youtube iframe {
	position: absolute;
	left: 0;
	top: 0;
}
}