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



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

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



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: サービスカードページ        　                                                                                                                                               ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: フレーム枠 ::*/
.PageService-Frame { display: block; padding: 5% 5%; margin-bottom: 30px; background-color: #FFF; overflow: hidden;/* 高さ認識の為 */}
.PageService-FrameTrans { display: block; padding: 5% 5%; margin-bottom: 30px; background-color: rgba(255,255,255,0.40); overflow: hidden;/* 高さ認識の為 */}
.PageService-FrameNoSetting { display: block; padding: 5% 0; margin-bottom: 30px; overflow: hidden;/* 高さ認識の為 */ }/* 枠フレームなし */
@media only screen and (max-width : 768px ){ .PageService-Frame, .PageService-FrameTrans { padding: 5% 5%; } }
@media only screen and (max-width : 768px ){ .PageService-FrameNoSetting { padding: 5% 0; } }
/*:: フレーム枠の中のコンテナ ::*/
.PageServiceFrame-container { display: block; overflow: hidden;/* 高さ認識の為 */}
.PageServiceFrame-container .ItemLang { width: 100%; margin-bottom: 30px; display: block; }


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


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: アコーディオンの設定｜続きを読むをセクションごとにわける                                                                                                                          ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*:: ボックス全体の設定 ::*/
.fadeMoreAccbox-container { width: 100%; padding: 0px; margin-bottom: 1px }
/*:: ラベル ::*/
.fadeMoreAccbox-container label { padding: 20px 20px; position: relative; display: block; color: #FFFFFF; background-color: #888; border-radius: 3px; cursor : pointer; }
.fadeMoreAccbox-container label { transition: all 0.5s; }
@media only screen and (max-width : 768px ){ .fadeMoreAccbox-container label { padding: 20px 20px; } }
/*:: アイコンを表示 ::*/
.fadeMoreAccbox-container label:before { font: var(--fa-font-solid);content: "\f067"; }
.fadeMoreAccbox-container label:before { width: 5em; height: 5em; position: absolute; top: 0; right: 0; display: block; text-align: center; line-height: 5; }
.fadeMoreAccbox-container label:hover { background-color: #AAA; color: #333; } /*ラベルホバー時*/
.fadeMoreAccbox-container input { display: none;} /*チェックは隠す*/
@media only screen and (max-width : 1280px ){ .fadeMoreAccbox-container label:before { width: 4.5em; height: 4.5em; line-height: 4.5; } }
/*:: 中身を非表示にしておく ::*/
.fadeMoreAccbox-container .fadeMoreContent { height: 0; overflow: hidden; opacity: 0; transition: 0.8s; }
/*:: クリックで中身表示* ::*/
.fadeMoreACC:checked + label + .fadeMoreContent { height: auto; width: 100%; padding-top: 10px; opacity: 1; }
.fadeMoreACC:checked + label + .fadeMoreContent { background-color: transparent; }/*開いた時の背景色*/
.fadeMoreACC:checked + label:before { content: '\f068';} /*アイコンを入れ替える*/
.fadeMoreAccbox-container .fadeMoreContent p { }
/*::::::::::::::::::::::::*/
/*:: オープン時のコンテンツ ::*/
/*::::::::::::::::::::::::*/
.page-fadeMoreCaption { display: block; padding: 5% 5%; margin-bottom: 10px; background-color: rgba(255,255,255,0.40); overflow: hidden;/* 高さ認識の為 */ }
@media only screen and (max-width : 768px ){ .page-fadeMoreCaption { padding: 5% 5%; } }
/*:: 各詳細ページ ::*/
ul.fadeMoreCaptionBox { display: block; overflow: hidden;/* 高さ認識の為 */}
ul.fadeMoreCaptionBox li.fadeMoreTitle { width: 100%; padding: 7px 10px 4px 10px; margin-bottom: 20px; display: block; color: #444; line-height: 1.3; border-left: 5px solid #4E4E4E; }
ul.fadeMoreCaptionBox li.fadeMoreLang {display: block; margin-bottom: 30px; text-align: left; }
ul.fadeMoreCaptionBox li.fadeMoreImg { width: 70%; display: block;  margin: 0 auto;}
ul.fadeMoreCaptionBox li.fadeMoreButton {display: block; margin-bottom: 30px; text-align: left;}
ul.fadeMoreCaptionBox li:last-child { margin-bottom: 0px!important;}
@media only screen and (max-width : 768px ){ ul.fadeMoreCaptionBox li.fadeMoreImg { width: 100%; } }
/*:: 制作の流れのナンバー付きタイトルデザイン ::*/
ul.fadeMoreCaptionBox li.fadeMoreTitleNumber { padding: 8px 0 0 68px; margin-bottom: 25px; position: relative; }
ul.fadeMoreCaptionBox li.fadeMoreTitleNumber span { padding: 8px 8px; position: absolute; top: -0; left: 0; color: #fff; background-color: #2F4DFF; border-radius: 50% }
ul.fadeMoreCaptionBox li.fadeMoreTitleNumber span:after { position: absolute; top: calc(50% - 7px); right: -11px; width: 0; height: 0; content: ''; }
ul.fadeMoreCaptionBox li.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 ){ ul.fadeMoreCaptionBox li.fadeMoreTitleNumber { padding: 8px 0 0 60px; } }
@media only screen and (max-width : 568px ){ ul.fadeMoreCaptionBox li.fadeMoreTitleNumber { padding: 8px 0 0 56px; } }
/*:: サブタイトル ::*/
ul.fadeMoreCaptionBox li.fadeMoresubTitle { position: relative; display: inline-block; height: 100%; margin-bottom: 30px; padding: 4px 3px 2px 3px; color: #4E4E4E; }
ul.fadeMoreCaptionBox li.fadeMoresubTitle::before, .fadeMoreCaptionBox li.fadeMoresubTitle::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 4px; }
ul.fadeMoreCaptionBox li.fadeMoresubTitle::before { z-index: 2; width: 15%; background-color: #4E4E4E; }
ul.fadeMoreCaptionBox li.fadeMoresubTitle::after { width: 100%; background: repeating-linear-gradient(45deg, #fff, #fff 2px, #CCC 2px, #CCC 4px); }

/*:: アコーディオンの枠途中のタイトルデザイン ::*/
.page-fadeMoreCaption ul.fadeMoreCaptionBox ul.listBox { width: 100%; padding: 0px 0 0 0; position: relative; }
.page-fadeMoreCaption ul.fadeMoreCaptionBox ul.listBox li { width: 100%; margin: 10px auto; display: block; position: relative; }
.page-fadeMoreCaption ul.fadeMoreCaptionBox ul.listBox li:first-of-type { margin-top: 0px; }
.page-fadeMoreCaption ul.fadeMoreCaptionBox ul.listBox li span.none_line { display: block; padding: 0 0 0 22px;}
.page-fadeMoreCaption ul.fadeMoreCaptionBox ul.listBox li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; }


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: サービスページのテーブル料金表                                                                                                                                                ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.pageService-tableBoxPrice { width: 100%; height: 100%; margin: 0 0 30px 0; display: block; overflow: hidden; }
.pageService-tableBoxPrice table { border-collapse: separate; /* 隙間をなくす */ margin-inline: auto; width: 100%; font-size: 1.4rem; border-spacing: 3px; }
.pageService-tableBoxPrice table th,table td { padding: 10px; text-align: center; /* 左右中央寄せ */ vertical-align: middle; /* 上下中央寄せ */ background-color: #FFF; border-radius: 3px; }
.pageService-tableBoxPrice table th { background-color: #6081FF!important; color: #fff; }
.pageService-tableBoxPrice table { table-layout: fixed; /* 列の幅を均等にする */ }
.pageService-tableBoxPrice table th:first-of-type { width: 80px; /* タイトル列の幅 */ }

.pageService-tableBoxPrice table thead th:not(:first-child) { background-color: #999!important; }
.pageService-tableBoxPrice table thead th:nth-child(1) { background-color: transparent!important; }








/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: サービスヒアリング構成案作成ページ        　                                                                                                                                   ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: フレーム枠 ::*/
.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; } }













/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:: トグルリストメニュー設定 CSSver                                                                                                                                              ::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.pageService-openAccList { width: 100%; margin: 0 auto; position: relative; overflow: hidden; }
.pageService-openAccList input { position: absolute; z-index: -1; opacity: 0; }
/*:: アコーディオンの開く前のボックス ::*/
.pageService-openAccList label { padding: 20px 20px; margin: 0 0 1px 0; position: relative; display: block; font-weight: bold; cursor: pointer; }
.pageService-openAccList label { color: #ffffff; background-color: #888; border-radius: 3px}/*ラベルの背景と色変更*/
@media only screen and (max-width : 768px ){ .pageService-openAccList label { padding: 20px 20px; } }
/*:: アコーディオンが閉じた状態の中身のボックス ::*/
.pageService-openAccList .openAccListContent { max-height: 0; background-color: transparent; overflow: hidden; }
.pageService-openAccList .openAccListContent { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
/*:: アコーディオンの開いた後のボックス ::*/
.pageService-openAccList input:checked ~ .openAccListContent { max-height: 100%;}
.pageService-openAccList .openAccListContent p { width: 100%; height: 100%; display: block; }
/*:: Icon ::*/
.pageService-openAccList label::after { width: 5em; height: 5em; position: absolute; top: 0; right: 0; display: block; text-align: center; line-height: 5; }
.pageService-openAccList label::after { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.pageService-openAccList input[type=checkbox] + label::after { content: '+'; }
.pageService-openAccList input[type=checkbox]:checked + label::after { transform: rotate(315deg); }
@media only screen and (max-width : 1280px ){ .pageService-openAccList label::after { width: 4.5em; height: 4.5em; line-height: 4.5; } }
/*:: クリックするした要素のスピード ::*/
.pageService-openAccList .openToggle:checked + .openToggleTitle + .openAccListContent { max-height: 1000px; transition: all 1.5s; }
/*::::::::::::::::::::*/
/*:: 開いた要素の装飾 ::*/
/*::::::::::::::::::::*/
.pageService-openAccList .openAccListContent ul.openAccBox { padding: 5% 5%; display: block; background-color: #fff; margin : 30px 0}
.pageService-openAccList .openAccListContent ul.openAccBox li.openAccTitle { width: 100%; padding: 7px 10px 4px 10px; margin-bottom: 30px; display: block; }
.pageService-openAccList .openAccListContent ul.openAccBox li.openAccTitle { color: #4E4E4E; line-height: 1.3; border-left: 5px solid #4E4E4E; }
.pageService-openAccList .openAccListContent ul.openAccBox li.openAcclang { display: block; padding: 0 10px; margin-bottom: 30px; text-align: left; }
@media only screen and (max-width : 768px ){ .pageService-openAccList .openAccListContent ul.openAccBox { padding: 6% 0px; } }
/*:: アコーディオンの枠途中のタイトルデザイン ::*/
.pageService-openAccList ul.openAccBox .listBox { width: 100%; padding: 0px 0 0 0; position: relative; }
.pageService-openAccList ul.openAccBox .listBox li { width: 100%; margin: 10px auto; display: block; position: relative; }
.pageService-openAccList ul.openAccBox .listBox li:first-of-type { margin-top: 00px; }
.pageService-openAccList ul.openAccBox .listBox li span.none_line { display: block; padding: 0 0 0 22px;}
.pageService-openAccList ul.openAccBox .listBox li span.none_line::before { position: absolute; left: 0%; font-family: FontAwesome; content: "\f00c"; color: #999999; }