/* 
    Document   : style
    Created on : Apr 26, 2017, 6:50:49 PM
    Author     : Kiyoto Yamada Hokosha inc.
    Description:
*/

@media (max-width: 767px) {
    /*xs*/
    header{
        width:100%;
        height:250px!important;
    }
    .sm{
        display:none;
    }
    #contents .switch{
        font-size:1.0em!important;
    }
    #contents .price a:hover{
        margin-top:15px!important;
        border-bottom:4px solid rgba(0,0,0,0.3)!important;
    }
}
@media (min-width: 768px) {
    #explanation .box{
        min-height:410px;
    }
}

/*NAV*/
nav{
    width:100%;
    padding:1.0em;
}
nav #logo{
    height: 53px;
}

/*HEADER*/
header{
    width:100%;
    height:480px;
    position:relative;
    background-image:url("../img/header_2.png");
    background-size: cover;
    background-position: center center;
}

header .row,
header .container{
    height:100%;
}
header .col{
    height:100%;
    background-image:url("../img/header_title.png");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/*EXPLANATION*/
#explanation{
    background-image:url("../img/bg2.png");
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    padding:2.0em 0;
    position:relative;
}
#explanation .cover_bg{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    box-shadow:inset 0  0  1.0em rgba(0,0,0,0.9);
    z-index: 0;
}
#explanation .col{
    padding:1.0em;
}
#explanation .box{
    background: #fff;
    border-radius: 1.0em;
    padding: 1.0em;
    position: relative;
}
#explanation .icon{
    position:absolute;
    width:100%;
    top:-3.0em;
    left:0em;
    text-align:center;
    z-index: 0;
}
#explanation .icon i{
    font-size:4.0em;
    color: #ff9408;
    background:#fff;
    border-radius:5.0em;
}
#explanation .box h2{
    font-size:1.3em;
    padding:0.5em;
    color:#fff;
    border-top: 1px solid rgba(0,0,0,0.2);
    background-color: #455fd6;
    margin-bottom:0!important;
    position:relative;
    z-index: 1;
}
#explanation .feature_img{
    margin-top:0;
}
#explanation .box img{
    padding: 3px;
    background-color: #607dff;
    width:100%;
}
#explanation .box p{
    font-size:1.2em;
}

/*CONTENTS*/

#contents .switch_wrap{
    background-color:#ddd;
    background-image:url("/lp/lib/common/img/overlays_inv/01.png");
}

#contents .switch{
    display:block;
    text-decoration:none;
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    font-weight:bold;
    font-size:1.8em;
    cursor:pointer;
    color:#fff;
    border-radius:0.5em;
    border:2px solid rgba(0,0,0,0.3);
    opacity:0.7;
    padding:1.0em 0;
    margin:1.0em 0;
}

#contents .switch:hover{
    opacity:1.0!important;
}

#contents .active{
    opacity:1.0!important;
}

#contents .active {
	position: relative;
        border: 2px solid rgba(0,0,0,0.3);
}
#contents .active:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#contents .deffense:after {
        border-top-color: #4456a5;
}
#contents .offence:after {
        border-top-color: #e4860b;
}

#contents .active:after {
	border-width: 40px;
	margin-left: -40px;
}
#contents .active:before {
        border: 2px solid rgba(0,0,0,0.3);
	border-width:46px;
	margin-left: -46px;
}

#contents .offence{
    background-color:#e4860b;
    background-image:url("../img/switch_bg_offence.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#contents .deffense{
    background-color:#4456a5;
    background-image:url("../img/switch_bg_deffense.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/***/
#contents {
    position:relative;
}
#contents .lv_2{
    padding:1.0em;
    font-size:1.3em;
}

.off{
}

.def{
}

.zone{
    background-color: #f53737;
}

.mantoman{
    background-color: #209f8e;
}

#contents h3{
    text-shadow: 0 -2px 0 rgba(0,0,0,0.5);
    font-size:2.0em;
    padding:0.5em 1.0em;
    margin:1.0em 0;
    border-bottom:3px solid rgba(0,0,0,0.5);
    color: #fff;
    /*background-image:url("/lp/lib/common/img/overlays/05.png");*/
}

#contents h4{
    display:inline-block;
    border-radius:5.0em;
    padding:0.5em 1.0em;
    margin:1.0em 0;
    background-color: #f7e84a;
    border-bottom:3px solid rgba(0,0,0,0.5);
    position:relative;
    z-index: 1;
    left:1.0em;
}

#contents .index_exp{
    border-radius: 0.5em;
    padding:1.0em;
    padding-top:2.0em;
    background-color: #fff7a2;
    border:2px solid rgba(0,0,0,0.2);
    position:relative;
    top:-3.0em;
    z-index: 0;
}

#contents .single_cont{
    background-color:#eee;
    margin-bottom:1.0em;
}

#contents .ttl p{
    margin:0;
    padding:1.0em;
    font-weight:bold;
    background-color: #607dff;
    color: #fff;
}

#contents .ttl p .minutes{
    display:inline-block;
    font-weight: lighter;
    padding:0.1em 0.5em;
    border-radius:5.0em;
    background-color: #fff7a2;
    color:#333;
    margin:0 1.0em;
}
#contents .thumbnail{
}
#contents .thumbnail img{
    width:100%;
    padding:0.5em;
    background-color:#ddd;
}
#contents .ttl_exp ol{
    padding: 2em;
    padding-right: 1.0em;
    list-style-type: disc;
}
#contents .ttl_exp ol list{
}
#contents .price a{
    position:relative;
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    text-decoration: none;
    display:block;
    width:80%;
    padding:1.0em 0;
    border-bottom:4px solid rgba(0,0,0,0.3);
    margin:1.0em auto;
    margin-top:15px;
    border-radius:0.5em;
    background-color: #39af9f;
    color:#fff;
}
#contents .price a:hover{
    margin-top:18px;
    border-bottom:1px solid rgba(0,0,0,0.3);
}
#contents .price .sample_movie{
    margin:1.0em auto;
    border-radius: 0.5em;
    width:96%;
    position:relative;
    display:block;
    background-color: #e8bc23;
    padding:2%;
    padding-top:0;
}
#contents .price .sample_movie iframe{
    width:100%;
    min-height:300px;
    display:block;
}
#contents .price .sample_movie span{
    display:inline-block;
    padding:0 1.0em;
    border-radius:5.0em;
    background-color:#fff;
    margin: 0.5em 0;
}
#contents .price a span{
    display:inline-block;
    padding:0.1em 1.1em;
    border-radius:5.0em;
    background-color: rgba(0,0,0,0.2);
    color:#fff;
    margin:0 1.0em;
}

/*FOOTER*/

footer {
        background: #ff5f01;
        background-image:url("../img/bg1.png");
        background-size:cover;
	color: #000;
	padding: 40px;
}

footer p {
	font-size: 1.0em;
	text-align: center;
}

footer ul {
	width: 100%;
	text-align: center;
	display: inline-block;
	font-size: 12px;
}

footer ul li {
	display: inline;
	padding: 0 10px;
	border-left: 1px solid #fff;
}

footer ul li:first-child {
	border-left: none;
}

footer ul li a {
	color: #fff;
	text-decoration: none;
}

footer ul li a:hover {
	text-decoration: underline;
}


/*New 2016.04.01*/

.emphasize{
    display:inline-block;
    padding:2px 4px;
    background-color:#FFEA01;
    color:#000;
}

.commentary{
    font-size:0.8em;
    background-color:#ddd;
    padding:5px;
    text-align:left;
}

.commentary span{
    display:block;
}