@charset "UTF-8";
/* ######################################################################################

	共通設定

###################################################################################### */

.contents p { }

@media print, screen and (min-width: 768px) { /**/
.contents + .contents { margin-top: 40px; }
.contents p { font-size: 16px; }
}

@media screen and (max-width: 767px) { /**/
.contents + .contents { margin-top: 30px; }
.contents p { font-size: 13px; }
.contents .link {text-align:center;}
}
.youtubeBox {
    position: relative;
    width: 100%;
    margin-bottom: 0.5em;
    padding-top: 56.25%;
}
.youtubeBox iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.contents .supple { text-align: left; }
.contents p.supple,
.contents .supple li {
    margin-bottom: 0.5em !important;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.5;
    text-align: left !important;
}
.contents.able p.supple {
    margin-top:0.75em;
 }
@media print, screen and (min-width: 768px) { /**/
    .contents .supple {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) { /**/
    .contents .supple {
        font-size: 12px;
    }
}


/* ######################################################################################

	概要

###################################################################################### */
.contents.outline { text-align: center; }
.contents.outline .image img {
    max-width: 559px;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}
.contents.outline .text {
    border-top: 3px solid #DDDDDD;
    border-bottom: 3px solid #DDDDDD;
    max-width: 760px;
    margin: 0 auto;
    padding: 1em;
}

@media print, screen and (min-width: 768px) { /**/
.contents.outline .text { text-align: center; }
}

@media screen and (max-width: 767px) { /**/
.contents.outline .text { text-align: left; }
}
/* ######################################################################################

	メニュー

###################################################################################### */
.contents.menu .row { margin-bottom: 30px; }
.contents.menu li a {
    position: relative;
    overflow: visible;
    display: block;
    border: 2px solid #232323;
    border-radius: 4px;
    background: #ffffff;
    text-decoration: none;
    color: #000000;
}
.contents.menu li a:before {
    content: "";
    display: inline-block;
    background-size: contain;
}
.contents.menu li:nth-of-type(1) a:before { background-image: url(/products/pixpro/about-sp360/img/ico-01.png); }
.contents.menu li:nth-of-type(2) a:before { background-image: url(/products/pixpro/about-sp360/img/ico-02.png); }
.contents.menu li:nth-of-type(3) a:before { background-image: url(/products/pixpro/about-sp360/img/ico-03.png); }
.contents.menu li:nth-of-type(4) a:before { background-image: url(/products/pixpro/about-sp360/img/ico-04.png); }
.contents.menu li a:after {
    content: "\f107";
    font-weight: bold;
    font-family: FontAwesome;
}
.contents.menu .link a { text-decoration: underline; }

@media print, screen and (min-width: 768px) { /**/
.contents.menu .row {
    margin-right: -0.6382%;
    margin-left: -0.6382%;
}
.contents.menu li {
    padding-right: 0.6382%;
    padding-left: 0.6382%;
}
.contents.menu li a {
    padding: 2em 0.5em 0.5em;
    text-align: center;
    font-size: 21px;
}
.contents.menu li a:before {
    position: absolute;
    top: -15px;
    left: 50%;
    transform:translate(-50%, 0);
    width:40px;
    height: 40px;
}
.contents.menu li a:after {
    content: "\f107";
    display: block;
    margin-top: 0.5em;
    font-size: 24px;
}
}

@media screen and (max-width: 767px) { /**/
.contents.menu .link {
    text-indent:-4.5em;
}
.contents.menu .link:before {
    text-indent:0;
}


.contents.menu li { margin-bottom: 15px; }
.contents.menu a {
    position: relative;
    padding: 0.5em;
    text-align: left;
    font-size: 14px;
}
.contents.menu a:before {
    position: relative;
    margin-right: 0.5em;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    top: -1px;
}
.contents.menu a:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%)
}
}
/* ######################################################################################

	○○でできること

###################################################################################### */
.contents.able { }
.contents.able .text {
    line-height: 1.75;
    margin-bottom: 2em;
}
.contents.able .image img {
    width: 100%;
    height: auto;
}
.contents.able li img {
    width: 100%;
    height: auto;
}
.contents.able .supple { margin-top: 40px; }
#Contents03 .supple span.iblock {text-indent:0;}

@media print, screen and (min-width: 768px) { /**/
.contents.able .text {
    text-align: center;
    font-size: 15px;
}
.contents.able li { text-align: center; }
.contents.able li .link.sp {display:none;}

#Contents01 .supple {text-align:center !important;}

#Contents03 .supple {
	margin-top:15px;
	font-size: 16px;
}
}

@media screen and (max-width: 767px) { /**/
.contents.able li + li { margin-top: 20px; }
.contents.able .image img { max-width: 553px; }
.contents.able li .link.sp {text-align:center;}
#Contents03 .supple {margin-top:15px;}
}
/* ######################################################################################

	アプリケーションについて

###################################################################################### */
.contents.app { }
.contents.app .text { margin-bottom: 1.5em; }
.contents.app .image { text-align: center; }
.contents.app .image img {
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) { /**/
.contents.app { text-align: center; }
.contents.app .image { margin-bottom: 20px; }
.contents.app .link { font-size: 14px; }
.contents.app .text li:nth-of-type(1) { text-align: right; }
.contents.app .text li:nth-of-type(2) { text-align: left; }
.contents.app .image01 img { max-width: 310px; }
.contents.app .image02 img { max-width: 361px; }
.contents.app .image03 img { max-width: 175px; }
}

@media screen and (max-width: 767px) { /**/
.contents.app { }
.contents.app .link {
    text-align: center;
    font-size: 12px;
}
.contents.app .image01 img { max-width: 155px; }
.contents.app .image02 img { max-width: 180px; }
.contents.app .image03 img { max-width: 87px; }
}
/* ######################################################################################

	詳しい情報はこちら

###################################################################################### */
.contents.more { }
.contents.more img {
    width: 100%;
    height: auto;
}
.contents.more .banna li {display:none;}

@media print, screen and (min-width: 768px) { /**/
.contents.more { font-size: 14px; }
.contents.more .text { margin-top: 50px; }
.contents.more .text li:nth-of-type(1) { text-align: right; }
.contents.more .text li:nth-of-type(2) { text-align: left; }
.contents.more img { max-width: 540px; }
.contents.more .banna li.pc {display:block;}
}

@media screen and (max-width: 767px) { /**/
.contents.more { text-align: center; }
.contents.more .text { margin-top: 30px; }
.contents.more .text li { margin-top: 20px; }
.contents.more img { max-width: 250px; }
.contents.more .banna li.sp {display:block;}
}