@charset "utf-8";

@media print, screen and (min-width : 769px){
	.anchor {
        height: 1px;
        display: block;
	}
	
    #top_content {
        margin: 0 auto 100px;
		/* padding-top: 35px; */
    }
    
    #top_content h2 {
        width: 880px;
        margin: 0 auto 50px;
        font-size: 38px;
        line-height: 1.368em;
        white-space: nowrap;
        text-align: center;
    }
	
	#top_content .head_title {
        width: 930px;
        margin: 0 auto 30px;
		font-size: 16px;
    }
    
    #top_content h2 .sup {
        font-size: 11px;
        top: 5px;
        right: 0;
    }
    
    #top_content .pic_full {
        margin: 0 0 50px;
    }
    
    #top_content .pic_full img {
        width: 100%;
        max-width: none;
        transition: all 1000ms ease-out;
        transition-delay: 500ms;
        opacity: 0;
        filter: blur(5px) brightness(120%);
        -webkit-filter: blur(5px) brightness(120%);
    }
    
    #top_content .pic_full.on img {
        opacity: 1;
        filter: blur(0) brightness(100%);
        -webkit-filter: blur(0) brightness(100%);
    }
	
	#top_content .pic {
		width: 930px;
        margin: 0 auto 20px;
    }
    
    #top_content .pic img {
        transition: all 1000ms ease-out;
        transition-delay: 500ms;
        opacity: 0;
        filter: blur(5px) brightness(120%);
        -webkit-filter: blur(5px) brightness(120%);
    }
    
    #top_content .pic.on img {
        opacity: 1;
        filter: blur(0) brightness(100%);
        -webkit-filter: blur(0) brightness(100%);
    }
	

    
    #top_content .section_inner {
        /* width: 880px; */
    }
    
    #top_content .section_desc {
        text-align: center;
		margin: 0 0 100px 0;
    }
    
    #top_content .icons {
		display:-webkit-box;
		display:-ms-flexbox;
		display: -webkit-flex;
		display:flex;
		-webkit-box-align:start;
		-ms-flex-align:start;
		-webkit-align-items:flex-start;
		align-items:flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack:center;
		-webkit-justify-content: center;
		justify-content: center;
    }
    
    #top_content .icons li {
        width: 200px;
        margin: 0 10px;
        text-align: center;
    }
    
    #top_content .icons li:first-child {
        margin-left: 0;
    }
    
    #top_content .icons li:last-child {
        margin-right: 0;
    }
    
    #top_content .icon {
        height: 65px;
    }
    
    #top_content .copy {
        width: 200px;
        font-size: 13px;
        line-height: 1.6em;
    }
    
    #section_movie,
    .section_movie {
            margin: 0 0 130px 0;
    }

    #section_movie .movie_wrap,
    .section_movie .movie_wrap {
        width: 880px;
        margin: 0 auto;
    }

    .modal_mov_open {
        position: relative;
        cursor: pointer;
        line-height: 0;
    }
    
    .modal_mov_open.covered::after {
        content:"";
        width: 100%;
        height: 100%;
        
        position: absolute;
        top: 0;
        left: 0;
        
        background: url(/auto-archive/clarity/phev/2019/webcatalog/image/pic_movie_play.png) center center no-repeat rgba(0, 0, 0, .5);
        background-size: 165px auto;
        transition: background .2s ease-out;
    }
    
    .modal_mov_open.covered.min::after {
        background-image: url(/auto-archive/clarity/phev/2019/webcatalog/image/pic_movie_play_min.png);
        background-size: 53px auto;
    }
    
    .modal_mov_open.covered:hover::after {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .modal_mov_open img {
        width: 100%;
        height: auto;
    }
    
    .img_slider.col04 .pic {
        padding: 0;
        width: auto;
    }
    
/*
    .section h4 .sup {
        font-size: 11px;
        top: 8px;
    }


    .section h3 .sup,
    .section h4 .sup {
        font-size: 11px;
        top: 5px;
        right: 0;
    }
*/

    .section.bg {
        padding: 100px 0 100px;
        background-color: #f8f8f8;
    }

    .col_left .img_slider .slick-list,
	.col_right .img_slider .slick-list{
        margin-bottom: 20px;
		padding-bottom: 10px;
    }
    
    .col_left .img_slider .arrow_prev,
    .col_left .img_slider .arrow_next,
	.col_right .img_slider .arrow_prev,
    .col_right .img_slider .arrow_next{
        margin-bottom: 10px;
        top: inherit !important;
    }
    
    .col_left .img_slider p.caption,
	.col_right .img_slider p.caption{
        margin-top: -10px;
        margin-bottom: 0;
        font-size: 12px;
    }
    
    .center {
        text-align: center;
    }
	
	sub {
    font-size:60%;
	}
    
}