@charset "utf-8";

/*==================================================================================================

       アコーディオン

===================================================================================================*/

.inline-p { display: inline-block; padding:.5em 0 .5em 1em;}
.acordion {}
        .trigger {
                position: relative;
                display:block;
                cursor:pointer;
                color:#FFF;
                padding: 0 .25rem 0 35px;
                height: 56px;
                line-height: 56px;
                box-sizing: border-box;
                background: url("../images/parts/virus.jpg") left center / cover;
                border-radius:4px;
                overflow: hidden;
                margin-bottom: 1rem;
                -webkit-box-shadow: 0px 3px 8px rgba(0,0,0,.2);
                -moz-box-shadow:	0px 3px 8px rgba(0,0,0,.2);
                -ms-box-shadow:		0px 3px 8px rgba(0,0,0,.2);
                -o-box-shadow:		0px 3px 8px rgba(0,0,0,.2);
                box-shadow:	        0px 3px 8px rgba(0,0,0,.2);
                }
                .trigger h2 { line-height: 56px; color:#FFF; }
                .trigger-icon {
                position: relative;
                box-sizing: border-box;
                }
                .trigger-icon::after {
                content: '';
                display: block;
                position: absolute;
                top: 50%;
                right: 14px;
                width: 7px;
                height: 7px;
                border: 0;
                border-bottom: solid 2px #FFF;
                border-right: solid 2px #FFF;
                margin-top: -6px;
                transform: rotate(45deg);
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }
                .active-aco-content .trigger-icon:after {
                top:60%;
                transform: rotate(-135deg);
                }

                @media screen and (max-width:1024px) {
                .trigger-icon:before { width:28px; height:28px; }
                }
                @media screen and (max-width:767px) {
                .trigger {background:#393735;}
                .trigger-icon:before { width:21px; height:21px; }
                }
                
        .aco-content {
                padding: 2em 0;
                box-sizing: border-box;
                border-radius: 8px;
                }
        @media screen and (max-width:767px) {

        }