@charset "utf-8";
/* CSS Document */



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: section分別設定                                                                                                                                                           ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*:: sectionの背景 ::*/
section.pageServiceCon { }
section.pageServiceCon.wrapper { background: linear-gradient(-225deg, #CCCCFF 0%, #EEE 56%, #99CCFF 100%); padding: 100px 0;}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: サービスヒアリング構成案作成ページ        　                                                                                                                                   ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: フレーム枠 ::*/
.PageServiceCon-Frame { display: block; padding: 5% 5%; margin-bottom: 30px; background-color: #FFF; overflow: hidden;/* 高さ認識の為 */}
.PageServiceCon-FrameTrans { display: block; padding: 5% 5%; margin-bottom: 30px; background-color: rgba(255,255,255,0.40); overflow: hidden;/* 高さ認識の為 */}
.PageServiceCon-FrameNoSetting { display: block; padding: 5% 0; margin-bottom: 30px; overflow: hidden;/* 高さ認識の為 */ }/* 枠フレームなし */
@media only screen and (max-width : 768px ){ .PageServiceCon-Frame, .PageServiceCon-FrameTrans { padding: 5% 5%; } }
@media only screen and (max-width : 768px ){ .PageServiceCon-FrameNoSetting { padding: 5% 0; } }
/*:: フレーム枠の中のコンテナ ::*/
.PageServiceConFrame-container { display: block; overflow: hidden;/* 高さ認識の為 */}
.PageServiceConFrame-container .ItemLang { width: 100%; margin-bottom: 30px; display: block; }
/* フレーム枠の中のコンテナお最後のコンテナはマージン0 */
.PageServiceCon-FrameTrans .PageServiceConFrame-container:last-child { margin-bottom: 0px;}


/*:: サービスページ内容の設定 ::*/
.PageServiceCon-contentsBox { display: block; height: 100%; width: 100%; margin-bottom: 30px; }
.PageServiceCon-contentsBox { display: block; height: 100%; width: 100%; margin-bottom: 30px; }
/* コンテナボックスの中のボックス設定 */
.PageServiceCon-contentsBox ul.inBox { display: block; height: 100%; width: 100%; position: relative;}
.PageServiceCon-contentsBox ul.inBox li.boxTile { display: block; height: 100%; width: 100%; padding: 7px 10px 4px 10px; margin-bottom: 10px; }
.PageServiceCon-contentsBox ul.inBox li.boxTile { color: #4E4E4E; position: relative; border-left: 5px solid #2F4DFF; }
.PageServiceCon-contentsBox ul.inBox li.boxDetails { display: block; padding: 15px 0 30px 0; }
/*:: リスト化の設定 ::*/
.PageServiceCon-contentsBox li.boxDetails ul.listBox { width: 100%; padding: 0 0 0 0; position: relative; }
.PageServiceCon-contentsBox li.boxDetails ul.listBox li { width: 100%; margin: 10px auto; display: block; position: relative; }
.PageServiceCon-contentsBox li.boxDetails ul.listBox li:first-of-type { margin-top: 0px; }
.PageServiceCon-contentsBox li.boxDetails ul.listBox li span.none_line { display: block; padding: 0 0 0 22px;}
.PageServiceCon-contentsBox li.boxDetails ul.listBox li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; }

/* 2colの設定 */
.PageServiceCon-contentsBox ul.inBox li.col2Tile { display: block; width: 160px; padding: 15px 0; clear: both; float: left; border-top: 1px dotted #ccc; }
.PageServiceCon-contentsBox ul.inBox li.col2Details { width: -webkit-calc(100% - 160px); width: calc(100% - 160px); }
.PageServiceCon-contentsBox ul.inBox li.col2Details { display: block; float: left; padding: 15px 0 15px 25px; border-top: 1px dotted #ccc;}
.PageServiceCon-contentsBox ul.inBox li.col2Tile:first-child { border-top: 0px;}
.PageServiceCon-contentsBox ul.inBox li.col2Details:nth-child(2) { border-top: 0px;}
/*:: 2colのリスト化の設定 ::*/
.PageServiceCon-contentsBox li.col2Details ul.listBox { width: 100%; padding: 0 0 0 0; position: relative; }
.PageServiceCon-contentsBox li.col2Details ul.listBox li { width: 100%; margin: 10px auto; display: block; position: relative; }
.PageServiceCon-contentsBox li.col2Details ul.listBox li:first-of-type { margin-top: 0px; }
.PageServiceCon-contentsBox li.col2Details ul.listBox li span.none_line { display: block; padding: 0 0 0 22px;}
.PageServiceCon-contentsBox li.col2Details ul.listBox li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; }
@media only screen and (max-width : 768px ){
.PageServiceCon-contentsBox { }
.PageServiceCon-contentsBox ul.inBox li.col2Tile { width: 100%; float: left; padding: 20px 10px 5px 10px; font-weight: bold; font-size: 1.8rem; }
.PageServiceCon-contentsBox ul.inBox li.col2Details { width: 100%; padding: 0px 10px 20px 10px; color: #555; }
.PageServiceCon-contentsBox ul.inBox li.col2Details { border-top: 0px;}
.PageServiceCon-contentsBox ul.inBox li.col2Tile:first-child { padding-top: 0;}
.PageServiceCon-contentsBox ul.inBox li.col2Details:last-child { padding-bottom: 0px;}
}

/* 挿入画像 */
.PageServiceCon-contentsBox ul.inBox li.ImgBox { display: flex; flex-direction: row !important;; margin: 0 0 0 0; padding: 1%;}
.PageServiceCon-contentsBox ul.inBox li.ImgBox .RoughImg { width: 32.6666%; padding: 0; margin: 0 0 1% 1%; min-height: 50px; border: none; border-radius: 3px; }
.PageServiceCon-contentsBox ul.inBox li.ImgBox .RoughImg { border: 1px dotted #ccc;}
.PageServiceCon-contentsBox ul.inBox li.ImgBox .RoughImg img { width: 100%; height: auto; object-fit: cover; display: block;}
.PageServiceCon-contentsBox ul.inBox li.ImgBox .RoughImg:nth-child(3n+1) { margin-left: 0;}/*3の倍数+1に適用*//*打消し用*/



/*:: 制作の流れのナンバー付きタイトルデザイン ::*/
.PageServiceConFrame-container .fadeMoreTitleNumber { padding: 8px 0 0 78px; margin-bottom: 40px; position: relative; }
.PageServiceConFrame-container .fadeMoreTitleNumber:after { width: 99.8%; height: 3px; position: absolute; bottom: -8px; right: 0; content: ''; background-color: #2F4DFF; }
.PageServiceConFrame-container .fadeMoreTitleNumber span { padding: 8px 8px; position: absolute; top: -0; left: 0; color: #fff; background-color: #2F4DFF; border-radius: 3px }
.PageServiceConFrame-container .fadeMoreTitleNumber span:after { position: absolute; top: calc(50% - 7px); right: -11px; width: 0; height: 0; content: ''; }
.PageServiceConFrame-container .fadeMoreTitleNumber span:after { border-width: 7px 0 7px 12px; border-style: solid; border-color: transparent transparent transparent #2F4DFF; }
@media only screen and (max-width : 768px ){ .PageServiceConFrame-container .fadeMoreTitleNumber { padding: 8px 0 0 60px; } }
@media only screen and (max-width : 568px ){ .PageServiceConFrame-container .fadeMoreTitleNumber { padding: 8px 0 0 60px; } }