@charset "UTF-8";
@charset "UTF-8";


@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");   ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.font-white{
color:#fff;
}
body {
font-size: 15px;
line-height: 1.5;
font-family: "Noto Sans JP", "メイリオ", sans-serif; background-color: #fff;
color: #333;
}
p {
font-weight: normal;
font-size: 16px;
line-height: 1.75em;
}
strong {
font-weight: bold;
}
.flex {
display: flex;
justify-content: space-around;
}
.flex-center {
align-items: center;
}
.bg-white {
background-color: #fff;
}
.bg-blue {
background-color: #5BB7D1;
} .hide{
display: none !important;
} h1 {
font-size: 30px;
color: #333;
font-weight: normal;
text-align: center;
line-height: 1.2;
}
h2 {
font-size: 30px;
color: #333;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
h2.h2-border {
display: flex;
align-items: center;
}
@media screen and (max-width: 375px) {
h2.h2-border {
display: block;
}
}
h2.h2-border:before,
h2.h2-border:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #5BB7D1;
}
h2.h2-border:before {
margin-right: 3rem;
}
h2.h2-border:after {
margin-left: 3rem;
}
a { text-decoration: none;
}
a:hover {
opacity: 0.8;
}
img {
width: 100%;
}
.sub-ttl {
font-size: 20px;
color: #333;
line-height: 1.7;
}
section {
margin-top: 20px;
}
.ttl-border {
width: 30px;
}
ul {
list-style: disc; }
ol {
list-style-type: decimal;
font-size: 16px;
font-weight: normal;
padding-left: 30px;
}
figcaption {
text-align: right;
}
.float-l {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.icon {
width: 15px;
height: auto;
}
.wp-block-embed iframe {
width: 100%;
height: 600px;
}
.wsp-container {
margin-bottom: 30px;
}
.wsp-container h2 {
text-align: left;
font-size: 20px;
}
.wp-block-image img {
height: auto;
}
.img60 {
width: 60%;
margin: 0 auto;
}
.wp-block-button__link.close {
background-color: #aaa;
pointer-events: none;
} .link-button{
text-align:center;
margin-bottom:20px;
}
.link-button a {
display:inline-block;
text-align:center;
background:#59B7D2;
padding:15px 35px;
color:#fff!important;
border-radius: 25px;
font-size:16px;
position:relative;
text-decoration:none;
}
@media screen and (min-width: 768px) {
.link-button a {
width: 220px;
}
}
.link-button a.bg-green{
background:#7AC181;
}
.link-button a:after{
border:5px solid transparent;
border-left:5px solid #fff;
content:"";
display:inline-block;
position:absolute;
right:10px;
top:50%;
margin-top:-5px;
}
.link-button a.icon-pdf:after{
display:none;
}
.link-button a.icon-pdf:before{
background:url(https://image.jimcdn.com/app/cms/image/transf/none/path/sa9121bcf719440ab/image/i82d9eb62feb4e37f/version/1594202418/image.png) center no-repeat;
background-size:contain;
width:12px;
height:16px;
content:"";
position:absolute;
left:15px;
top:50%;
margin-top:-8px;
}
.wp-block-buttons {
text-align: center;
display: block;
}
.wp-block-button__link {
background-color: #59B7D2;
padding: 15px 35px;
} #pagetop{
width: 50px;
height: 50px;
position: fixed;
right: 15px;
bottom: 15px;
background: #aaa;
opacity: 0.7;
border-radius: 50%;
z-index: 10000;
}
#pagetop a{
position: relative;
display: block;
width: 50px;
height: 50px;
line-height: 1.0;
text-decoration: none;
text-align: center;
}
#pagetop a::before{
font-family: "Font Awesome 5 Free";
content: '\f106';
font-weight: 900;
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: 10px;
bottom: 10px;
right: 0;
left: 0;
margin: auto;
} .breadcrumbs, .breadcrumbs-blog {
max-width: 1000px;
margin: 10px auto;
}
@media screen and (max-width: 767px) {
.breadcrumbs, .breadcrumbs-blog {
width: 92%;
}
}
.breadcrumbs, .breadcrumbs a, .breadcrumbs-blog, .breadcrumbs-blog a {
color: #777;
font-size: 0.8rem;
font-weight: 400;
}
.breadcrumbs .fa-angle-right, .breadcrumbs-blog .fa-angle-right {
padding: 0 10px;
color: #bbb;
} #top .kv {
min-height: 100vh; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
position: relative;
}
#top .kv .flex__main {
padding-top: 130px;
margin: 0 auto;
align-items: end;
}
#top .kv .mvMessage {
width: 53%;
margin-right: 2%;
}
#top .kv .mvForm {
width: 48%;
}
@media screen and (min-width: 1026px) {
#top .kv .mvForm {
width: 40%;
}
}
#top .kv .mvMessage h1 {
color: #fff;
font-size: 48px;
font-weight: bold;
margin-bottom: 15px;
}
#top .kv .mvMessage h1 span {
text-shadow: 0px 0px 20px #22438D;
}
#top .kv .mvMessage h2 {
line-height: 1.8;
font-size: 26px;
margin-bottom: 10px;
}
#top .kv .mvMessage h2 span {
background-color: #FFF500;
padding: 0px 3px;
}
#top .kv .mvMessage .achiveBox { padding:0 15px;
box-sizing: border-box; }
#top .kv .mvMessage .achiveBox .flex {
align-items: center;
}
#top .kv .mvMessage .achiveBox .flex p.lh-fix {
line-height: 1.5;
}
#top .kv .mvMessage .achiveBox__1 {
margin-right: 4%;
}
#top .kv .mvMessage .achiveBox__1,
#top .kv .mvMessage .achiveBox__2 {
width: 48%;
}
#top .kv .mvMessage .achiveBox .achiveTxt {
font-size: 20px;
font-feature-settings: "palt";
line-height: 1.2;
}
#top .kv .mvMessage .achiveBox span {
color: #CB4649;
font-weight: bold;
}
#top .kv .mvMessage .achiveBox span.no-clr {
color: #333;
}
#top .kv .mvMessage .achiveBox span.learger {
font-size: 150%;
}
#top .kv .mvMessage .mvBtn a {
background-color: #0B2C36;
border-radius: 50px;
padding: 20px 30px;
color: #fff;
font-size: 18px;
box-shadow: 0px 0px 10px rgb(17 39 65 / 50%);
border: 5px solid #fff;
} .top-ft-wrap {
width: 100%; padding: 10px;
margin-bottom: 16px;
}
ul.top-ft-list { padding-left: 0;
position: relative;
width: 554px;
height: 466px;
}
ul.top-ft-list li {
width: 308px;
height: 308px;
line-height: 200px;
background-color: #fff;
border-radius: 50%;
color: #333;
text-align: center;
list-style: none;
}
ul.top-ft-list li .top-ft-list-1 {
position: absolute;
top: 0;
}
ul.top-ft-list li .top-ft-list-2 {
position: absolute;
bottom: 0;
left: 0;
}
ul.top-ft-list li .top-ft-list-3 {
position: absolute;
bottom: 0;
right: 0;
}
ul.top-ft-list li:last-child {
border-bottom:  none!important;
}
img.ft-number {
width: 77px!important;
height: 65px!important;
}
p.ft-txt {
font-family: "Noto Sans JP", "メイリオ", sans-serif;
font-weight: bold;
color:#333;
text-align: center;
padding-left: 20px;
}
.ft-txt-s {
display: inline-block;
font-size: 1.19rem;
}
.ft-txt-l {
font-size: 2rem; } @media screen and (max-width: 767px) {
.top-ft-wrap {
width: auto;
margin: 0 4px 16px 4px;
}
img.ft-number {
margin-right: 0!important;
}
.ft-txt-s {
font-size: 1.08rem;
}
.ft-txt-l {
font-size: 2rem;
}
}
@media screen and (max-width: 400px) {
ul.top-ft-list li { padding: 25px 0px;
}
p.ft-txt {
padding: 10px 0 0 2px;
text-align: left;
}
.ft-txt-s {
font-size: 1rem;
}
.ft-txt-l {
font-size: 1.5rem;
}
img.ft-number {
width: 48px!important;
height: 39px!important;
}
} .top-3feature_01 {
background-color: #fff;
}
.top-3feature_02 {
background-color: #fbf9fd;
}
.top-3feature_inner {
padding: 70px 0;
display: flex;
align-items: center;
} .top-3ft-illust-pc img, .top-3ft-illust-sp img {
width: 400px;
}
.top-3feature_01 .top-3ft-illust-pc {
padding-right: 80px;
}
.top-3feature_02 .top-3ft-illust-pc {
padding-left: 45px;
} .top-3ft-ttl-wrap {
display: flex;
align-items: center;
padding-bottom: 20px;
} .top-3ft-ttl-wrap img {
height: 91px;
width: auto;
padding-right: 40px;
} h2.top-3ft-ttl {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 0!important;
text-align: left!important;
color: #2d474f;
-webkit-font-smoothing: antialiased;
}
.top-3ft-ttl-yellow {
background: linear-gradient(transparent 60%, #fff82e 60%);
} ul.top-3ft-list {
padding-left: 0;
}
ul.top-3ft-list li {
padding: 20px 0;
border-bottom: 2px dotted #d9def5;
font-size: 16px;
color: #2d474f;
line-height: 1.5;
list-style: none;
padding-left: 2.9rem;
text-indent: -2.9rem;
-webkit-font-smoothing: antialiased;
}
ul.top-3ft-list li:last-child {
padding-bottom: 0;
border-bottom: none;
}
ul.top-3ft-list li p {
font-weight: 500;
}
ul.top-3ft-list li p::before{
font-family: "Font Awesome 5 Free";
content: '\f058';
font-weight: 900;
margin-right: 1.3rem;
color:#acb9f7;
background: -webkit-linear-gradient(0deg, #a7e0f1, #7ecbe1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 25px;
vertical-align: bottom;
}
@media only screen and (max-width: 1000px) {
.top-3ft-ttl-wrap img {
height: 80px;
width: auto;
padding-right: 30px;
}
h2.top-3ft-ttl {
font-size: 1.3rem;
}
span.top-3ft-br {
display: none;
}
}
@media only screen and (min-width: 787px) and (max-width: 1000px) {
.top-3feature_01, .top-3feature_02 {
padding: 0 20px
}
}
@media only screen and (max-width: 786px) {
.top-3ft-illust-pc {
display: none;
}
.top-3ft-illust-sp {
text-align: center;
padding-top: 50px;
}
}
@media only screen and (min-width: 787px) {
.top-3ft-illust-sp {
display: none;
}
}
@media only screen and (max-width: 500px) {
.top-3ft-ttl-wrap img {
height: 60px; 
}
.top-3ft-illust-sp img {
width: 100%;
}
.top-3feature_inner {
padding: 50px 0;
}
.top-3ft-illust-sp {
text-align: center;
padding-top: 40px;
}
}  .animation{
opacity : 0;
visibility: hidden;
transition: 1s;
transform: translateY(30px);
} .active{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#top .fa-comments:before {
font-size: 25px;
margin-right: 10px;
}
#top .kv .mvForm .formTtl {
background: linear-gradient(to right, #5bc5d1, #52b1cc);
color: #fff;
border-radius: 20px 20px 0 0;
padding: 14px 0px;
}
#top .kv .mvForm .formTtl p {
font-size: 26px;
line-height: 1.4;
font-family: "Noto Sans JP", メイリオ, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 1px 1px 3px #3b9db6;
font-feature-settings: "palt";
}
#top .kv .mvForm .formTtl p span {
font-size: 15px;
}
#top .kv .mvForm .form-inner-wrapper iframe {
border-radius: 0 0 20px 20px; background: #f4f4f4;
}
#top .kv .mvForm .form-inner-wrapper iframe body {
background-color: transparent!important;
}
#top #simu {
margin-bottom: 60px;
padding: 60px 0;
}
#top #simu h2 {
font-size: 30px;
margin-top: 0;
}
@media only screen and (max-width: 768px) {
h2.h2-border {
font-size:1.5rem;
font-weight: bold;
}
h2.h2-border:before {
margin-right: 1rem;
}
h2.h2-border:after {
margin-left: 1rem;
}
#top .kv { } #top .kv { }
#top .kv .flex__main {
padding-top: 40px;
}
#top .kv .mvMessage {
width: 100%;
margin-right: 0;
}
#top .kv .mvMessage h1 {
font-size: 32px;
}
#top .kv .mvMessage h2 {
font-size: 22px;
}
#top .kv .mvMessage .flex {
display: flex;
}
#top .kv .mvMessage .achiveBox__1 {
margin-right: 1%;
}
#top .kv img {
width: 90%;
margin-right: 10%;
}
#top .kv .mvMessage .mvBtn a {
font-size: 16px;
padding: 15px 25px;
}
#top .kv .mvForm {
width: 100%;
margin-top: 60px;
}
#top .kv .mvForm .formTtl p {
font-size: 22px;
}
}
#top .concern {
background-color: #eee;
padding: 100px 0;
}
#top .concern h2.h2-border::before,#top .concern h2.h2-border::after{
height: 0;
}
#top .concern .ppl-sec{
display: flex;
justify-content: flex-start;
}
#top .concern .ppl-sec img {
width: 90px;
background-color:#b6e7f4;
border-radius: 100%;
}
#top .concern .ppl-sec p {
font-size: 14px;
font-weight: bold;
line-height: 1.5;
font-feature-settings: "palt";
display:flex;
align-items: center;
padding-left: 30px;
}
#top .concern .flex__balloon{
flex-direction: column;
margin-bottom: 48px;
}
#top .concern .mt_high{
margin-top: 39px;
}
#top .concern .max_height300{
max-height: 330px;
}
#top .concern .max_height400{
max-height: 410px;
}
#top .concern .balloon1-left {
background-color: #fff;
padding: 57px 34px 57px 34px;
border-radius: 25px 25px 25px 0;
margin: 0 0 20px 0;
max-width: 424px;
height: max-content;
}
#top .concern .balloon1-left.mr-fix {
margin-right: 63px;
}
#top .concern .balloon1-left:before {
width: 46px;
height: 41px;
top: -21px;
left: 13px;
background: url(//www.comitx.jp/wp-content/themes/comitx/css/images/top/dialog-top_.png) no-repeat;
background-size: 45px auto;
}
#top .concern ul {
list-style: none;
padding: 0;
margin: 0;
}
#top .concern ul li {
position: relative;
font-size: 16px;
line-height: 1.8;
margin-bottom: 15px;
padding: 0 34px 0 34px;
}
#top .concern ul li:last-child {
margin-bottom: 0;
}
#top .concern span.text-line{
background:linear-gradient(transparent 60%, #b6e7f4 60%); 
}
@media screen and (max-width: 767px) {
#top .concern {
padding: 50px 0;
}
#top .concern .flex.mb-40 {
display: block;
margin-bottom: 0!important;
}
#top .concern .flex.flex__balloon {
display: flex;
}
#top .concern .balloon1-left:before {
content: "";
position: absolute;
top: -21px;
left: 28px;
margin-top: -15px; }
#top .concern .balloon1-left.mr-fix {
margin-right: 0;
}
#top .concern .ppl-sec img {
width: 70px;
}
#top .concern .ppl-sec p {
font-size: 1rem;
}
}
#top .ToConsultation ,#blog .ToConsultation {
background-image: url(//www.comitx.jp/wp-content/themes/comitx/css/images/ToConsultation.png);
background-position: center;
}
#top .ToConsultation {
min-height: 450px;
}
#blog .ToConsultation {
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
#blog .ToConsultation {
padding: 40px 20px 70px 20px;
}
}
#top .ToConsultation .inr-wrapper {
text-align: center;
padding: 100px;
}
#blog .ToConsultation .inr-wrapper {
text-align: center;
}
#top .ToConsultation p {
font-size: 24px;
color: #fff;
}
#blog .ToConsultation p {
font-size: 18px;
color: #fff;
}
#top .ToConsultation h2, #blog .ToConsultation h2  {
color: #fff;
font-weight: bold;
text-shadow: #072629 0px 0px 40px;
}
#top .ToConsultation h2 {
font-size: 60px;
margin-bottom: 60px;
}
#blog .ToConsultation h2 {
font-size: 30px;
margin: 30px 0 50px 0;
text-align: center;
}
#top .ToConsultation a,#blog .ToConsultation a {
background-color: #fff;
border: 4px solid #2A5658;
border-radius: 50px;
font-weight: bold;
color: #333333;
cursor: pointer;
}
#top .ToConsultation a {
font-size: 25px;
padding: 20px 80px;
}
#blog .ToConsultation a {
font-size: 18px;
padding: 20px 40px;
}
@media screen and (max-width: 767px) {
#top .ToConsultation,#blog .ToConsultation {
background: url(//www.comitx.jp/wp-content/themes/comitx/css/images/consultation_kv_sp.png) center / cover;
}
#top .ToConsultation {
min-height: 450px;
min-height: 60vh;
}
#blog .ToConsultation {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding-bottom: 30px
}
#top .ToConsultation .inr-wrapper,#blog .ToConsultation .inr-wrapper  {
padding: 40px 0;
}
#top .ToConsultation p,#blog .ToConsultation p {
font-size: 18px;
margin-bottom: 20px;
}
#top .ToConsultation h2,#blog .ToConsultation h2 {
font-size: 40px;
margin-bottom: 60px;
}
#top .ToConsultation a, #blog .ToConsultation a {
background-color: #fff;
border: 4px solid #2A5658;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
color: #333333;
cursor: pointer;
}
#top .ToConsultation a {
padding: 20px 40px;
}
#blog .ToConsultation a {
padding: 20px;
white-space: nowrap
}
}
@media screen and (max-width: 340px) {
#blog .ToConsultation a {
font-size: 13px;
}
} .mainTxt-sec {
background-color: #fff;
padding: 100px 0 80px 0;
}
.mainTxt-sec p img {
width: auto;
}
.logo-1 img {
height: 27px;
}
.logo-2 img {
height: 42px;
}
.logo-3 img {
height: 32px;
}
@media only screen and (max-width: 768px) {
.mainTxt-sec {
padding: 50px 0 25px 0;
}
#top .mainTxt-sec .flex {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.mainTxt-sec p img {
width: auto;
margin-bottom: 20px;
}
} #top-3merit p {
text-align: center;
}
#top-3merit p img {
width: 90%;
}
#top-copy {
line-height: 2.0;
}
#top-copy h2 {
margin-bottom: 0;
}
#top-copy img {
width: 250px;
}
@media screen and (max-width: 767px) {
#top-infobox {
padding: 20px 20px;
}
#top-copy {
line-height: 1.5;
}
}
#newtop-start .inner{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-justify-content: space-between;
justify-content:         space-between;
max-width:880px;
margin:0 auto 30px auto;
}
#newtop-start .group{
width:258px;
position:relative;
}
#newtop-start .group:before{
border:15px solid transparent;
border-left:15px solid #5BB8D1;
content:"";
display:inline-block;
position:absolute;
right:-50px;
top:80px;
}
#newtop-start .group:last-child:before{
display:none;
}
#newtop-start .img{
text-align:center;
margin-bottom:5px;
}
#newtop-start .img img{
max-width:100%;
}
#top .top-feature {
padding: 60px 0;
}
#top .top-feature ul li {
margin-bottom: 10px;
line-height: 1.8;
}
#top .top-feature__02 ul li {
color: #fff;
}
#top .top-feature__02 .flex {
justify-content: center;
}
#top .top-feature__02 .feature-item {
text-align: center;
color: #fff;
margin-right: 30px;
}
#top .top-feature__02 .feature-item:last-child {
margin-right: 0;
}
#top .top-feature__02 .feature-item img {
height: 190px;
width: auto;
margin-bottom: 10px;
}
#top .top-feature__02 .feature-item p {
font-size: 15px;
}
#top .top-feature__03 img {
vertical-align: bottom;
}
#top .top-feature h3 {
font-size: 24px;
font-weight: normal;
margin-bottom: 30px;
}
#top .top-feature .img-sec {
margin-right: 20px;
}
#top .top-feature__02 h3 {
color: #fff;
}
#top .case-exmple {
padding: 60px 0;
}
#top .case-exmple table {
font-size: 18px;
}
#top .case-exmple table th {
font-weight: bold;
padding: 30px;
background-color: #FDEFD2;
width: 20%;
text-align: center;
}
#top .case-exmple table td {
padding: 0 20px;
background-color: #fff;
}
#top .case-exmple .balloon1-left__orange {
background-color: #eee;
}
#top .case-exmple .balloon1-left__orange:before {
border-right: 15px solid #eee;
}
#top .case-exmple table td,
#top .case-exmple table th {
border: 1px solid #aaa;
}
#top .case-exmple ol li {
margin-bottom: 10px;
}
#top .voice-box p {
line-height: 1.5;
}
#top .voice-box .icon {
margin-right: 20px;
}
@media screen and (max-width: 767px) {
#top .top-feature {
padding: 40px 0;
}
#top .top-feature h3 {
font-size: 18px;
margin-bottom: 20px;
}
#top .top-feature .img-sec {
margin: 0 0 10px 0;
}
#top .top-feature__02 .feature-item {
margin: 0 0 20px 0;
}
#top .top-feature__02 .feature-item img {
margin-bottom: 0;
}
#top .case-exmple {
padding: 40px 0;
}
#top .case-exmple table th {
padding: 10px;
width: 30%;
font-size: 16px;
}
#top .case-exmple table td {
font-size: 16px;
padding: 10px;
}
#top .case-exmple .sp-on {
padding: 10px;
background-color: #fff;
box-sizing: border-box;
}
#top .case-exmple .fs20 {
font-size: 16px;
}
#top .case-exmple .flex {
margin-top: 20px;
}
#top .case-exmple .balloon1-left__orange:before {
top: -15px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-bottom: 15px solid #eee;
}
#top .voice-box .icon {
margin-right: 0;
}
} #words .flex {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
#words .flex p {
margin-right: 30px;
} .card {
background-color: #fff;
box-shadow: 0 2px 5px #ccc;
border-radius: 5px;
display: block;
position: relative;
z-index: 1;
min-height: 380px;
}
.card a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2;
}
.card:hover {
opacity: 0.8;
}
.card h3 {
color: #107c9a;
}
.card .card-img {
width: 100%;
border-radius: 5px 5px 0 0;
}
.card .pd-20 {
padding: 10px 20px 20px 20px;
}
.card .date {
font-size: 12px;
} #dictionary table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
#dictionary table tr th,
#dictionary table tr td {
border: 1px solid #ccc;
padding: 5px 10px;
}
#dictionary table tr th {
background-color: #eee;
white-space: nowrap;
}
#dictionary .dictionary-caption {
word-break: break-all;
font-size: 12px;
}
@media only screen and (max-width: 768px) {
#dictionary table {
border-collapse: collapse;
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
font-size: 12px;
}
#dictionary table tr th {
text-align: left;
}
}  .mb-40 {margin-bottom: 40px!important;}
.mb-50{margin-bottom:50px!important;}
.mb-60{margin-bottom:60px!important;}
.mb-80{margin-bottom:80px!important;}
.mb-30{margin-bottom:30px!important;}
.mb-20{margin-bottom:20px!important;}
.mb-10{margin-bottom:10px!important;}
.mt-20{margin-top: 20px!important;}
.mt-40{margin-top: 40px!important;}
.mt-80{margin-top: 80px!important;}
.mt-140{margin-top: 140px!important;}
.text-center {text-align:center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.wt-box {
background-color: #fff;
border: 1px solid #59B7D2;
padding: 20px;
}
.small {font-size: 12px;}
.red {color: #CB4649;}
.bold {font-weight: bold;}
@media screen and (max-width: 767px) {
body {font-size: 15px; }
.pc-on {display: none;}
.sp-on {display: block;}
.sp-on-f {display: flex !important;}
.mb-30,.mb-40 {margin-bottom: 20px!important;}
.mb-50{margin-bottom:30px!important;}
.mb-60{margin-bottom: 30px!important;}
.mb-80{margin-bottom:40px!important;}
.mb-100{margin-bottom:40px!important;}
.mt-140{margin-top: unset!important;}
h1 {
font-size: 30px;
}
h2 {
font-size: 24px;
}
.dummy {
height: 70px;
}
header {
height: 70px;
position: fixed;
z-index: 9999;
}
#top-3merit .flex {
display: block;
}
#newtop-start .group {
position: initial;
margin: 0 auto;
}
#newtop-start .group:before {
display: none;
}
#words .flex {
display: flex;
}
.card {
min-height: 0!important;
}
.wp-block-embed iframe {
height: 250px;
}
footer {
padding: 20px 0px;
}
footer .inr-wrapper table td {
display: block;
}
footer .inr-wrapper table td p {
padding: 0px;
}
footer .inr-wrapper table td img {
width: 200px;
}
.img60 {
width: 100%;
}
}    .fixed-contact{
position:fixed;
right:15px;
bottom:15px;
z-index:10;
}
.fixed-contact a{
text-indent:-9000px;
background:url(//www.comitx.jp/wp-content/themes/comitx/css/images/contact-btn.png) center no-repeat;
background-size:contain;
display:block;
width:120px;
height:120px;
}
.fixed-contact a:hover{
background-image:url(//www.comitx.jp/wp-content/themes/comitx/css/images/contact-btn-hover.png);
} #home-mainimg .next{
position:absolute;
left:22%;
bottom:0px;
}
#home-mainimg .next a{
display:inline-block;
padding:20px;
position:relative;
}
#home-mainimg .next a:before{
border:6px solid transparent;
border-top:8px solid #fff;
content:"";
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
} .top-movie-sec {
padding-top: 80px;
}
.top-movie-sec  .top-movie-sec__logo {
width: 300px;
}
.top-movie-sec .top-movie-sec__movie {
max-width: 650px;
width: 100%;
margin: 0 auto;
}
.top-movie-sec .top-movie-sec__movie iframe {
width: 100%;
height: 350px;
}
.top-movie-sec .top-movie-sec__movie .bg-dark {
background-color: #333;
color: #fff;
padding: 15px;
font-size: 20px;
} .top-point-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.top-point-box {
padding-right: 50px;
}
.top-point-box:last-child {
padding-right: 0;
}
.top-point-box img {
width: 216px;
height: 160px;
display: block;
padding-bottom: 26px;
}
.top-point-box h3 {
display: inline;
font-size: 1.5rem;
color: #199fba;
line-height: 2.9rem;
border-bottom: solid 2px #199fba;
padding-bottom: 5px;
}
@media only screen and (max-width: 768px) {
.top-movie-sec .top-movie-sec__logo {
width: 200px;
}
.top-movie-sec .top-movie-sec__movie .bg-dark {
background-color: #333;
color: #fff;
padding: 15px;
font-size: 16px;
}
.top-movie-sec .top-movie-sec__movie {
max-width: 100%;
}
.top-movie-sec .top-movie-sec__movie iframe {
width: 100%;
height: 230px;
}
.top-movie-sec .top-movie-sec__movie .bg-dark {
line-height: 1.5;
padding: 10px;
}
.top-point-wrap {
justify-content: space-around;
flex-wrap: wrap;
}
.top-point-box {
padding-right: 0;
}
}
@media only screen and (max-width: 704px) {
.top-point-box {
padding-bottom: 50px;
}
.top-point-box:last-child {
padding-bottom: 0;
}
.top-movie-sec h2 {
font-size: 1.5rem;
}
.top-point-box h3 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 469px) {
.top-point-box:first-child {
margin-top: -20px;
}
.top-point-box img {
padding-bottom: 15px;
margin: 0 auto;
}
.top-point-box h3 br {
display: none;
}
} #newtop-contact{
margin-bottom:50px;
}
#newtop-contact .contact-box{
padding:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#newtop-contact .contact-box .group .head{
font-size:20px;
}
#newtop-contact .contact-box .link-button{
margin-bottom:0;
}
#newtop-contact .contact-box .num{
font-size:24px;
}
#newtop-contact .contact-box .uketsuke{
font-size:16px;
}
@media print, screen and (min-width: 769px) {
#newtop-contact p{
width:550px;
margin:0 auto 35px auto;
}
#newtop-contact .contact-box{
width:880px;
margin-left:auto;
margin-right:auto;
padding-left:75px;
}
#newtop-contact .contact-box .group{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
margin-bottom:20px;
-webkit-align-items: center;
align-items:         center;
}
#newtop-contact .contact-box .group:last-child{
margin-bottom:0;
}
#newtop-contact .contact-box .group .head{
width:250px;
}
}
@media only screen and (max-width: 768px) {
#newtop-contact{
margin-bottom:30px;
}
#newtop-contact p{
margin-bottom:35px;
}
#newtop-contact .contact-box{
padding:15px;
}
#newtop-contact .contact-box .group{
margin-bottom:20px;
}
#newtop-contact .contact-box .group:last-child{
margin-bottom:0;
}
#newtop-contact .contact-box .group .head{
margin-bottom:15px;
}
#newtop-contact .contact-box .group .body{
text-align:center;
}
} #newtop-merit{
margin-bottom:40px;
}
#newtop-merit .newtop-subtitle{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-justify-content: center;
justify-content:         center;
}
#newtop-merit .newtop-subtitle .mark{
color:#fff;
}
@media print, screen and (min-width: 769px) {
#newtop-merit .img{
text-align:center;
}
#newtop-merit .img img{
max-width:880px;
}
}
@media only screen and (max-width: 768px) {
#newtop-merit{
margin-bottom:20px;
}
}
.newtop-border{
height:1px;
background:#7da9b6;
margin-bottom:50px;
}
@media only screen and (max-width: 768px) {
.newtop-border{
margin-bottom:30px;
}
} #newtop-kaihatsu{
margin-bottom:50px;
}
#newtop-kaihatsu .img{
margin-bottom:15px;
}
#newtop-kaihatsu .img2{
margin-bottom:15px;
margin-top:30px;
}
@media print, screen and (min-width: 769px) {
#newtop-kaihatsu .img,
#newtop-kaihatsu .img2{
text-align:center;
}
#newtop-kaihatsu .img img,
#newtop-kaihatsu .img2 img{
width:900px;
}
#newtop-kaihatsu p{
width:860px;
margin-left:auto;
margin-right:auto;
}
} #newtop-norikae{
margin-bottom:50px;
}
#newtop-norikae .img{
margin-bottom:20px;
text-align:center;
}
@media print, screen and (min-width: 769px) {
#newtop-norikae .img img {
max-width:880px;
}
#newtop-norikae p{
width:860px;
margin-left:auto;
margin-right:auto;
}
}
@media only screen and (max-width: 768px) {
#newtop-norikae{
margin-bottom:30px;
}
}
@media only screen and (max-width: 768px) {
#newtop-kaihatsu{
margin-bottom:30px;
}
} .keizoku .flex p {
margin-right: 30px;
}
@media only screen and (max-width: 768px) {
.keizoku .flex {
display: block;
}
} #simu {
text-align: center;
width: 1000px;
margin: 0px auto;
}
#simu h1 {
margin-bottom: 6px;
font-weight: normal;
font-size: 30px;
}
#simu p {
margin: 6px 0px;
}
#simu h2 {
font-size: 25px;
font-weight: normal;
text-align: left;
margin-top: 50px;
}
#simu hr {
margin-bottom: 30px;
}
#simu table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
}
#simu tr {
border-top: 1px solid #a2b6be;
border-bottom: 1px solid #a2b6be;
}
#simu th {
font-weight: normal;
background-color: #d1ecf4;
padding: 30px 50px;
width: 130px;
}
#simu td {
background-color: #e9f1f4;
padding: 10px 20px;
text-align: left;
}
#simu td p {
padding: 10px;
}
#simu td input[type=number] {
width: 75px;
height: 25px;
margin: 0px 5px;
}
#simu td input[type=checkbox] {
width: 15px;
height: 15px;
}
#simu td input[type=text] {
height: 25px;
width: 350px;
margin-bottom: 5px;
}
#simu div#calc {
display: inline-block;
background-color: #37a7c6;
color: #f7f8f8;
font-size: 15px;
border: 1px solid #37a7c6;
border-radius: 50px;
padding: 10px 50px;
margin-top: 50px;
cursor: pointer;
}
#simu div#arrow-down {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-top: 40px solid #c4e4ed;
margin: 1px auto;
}
#simu div.result {
background-color: #e9f1f4;
border: 3px solid #37a7c6;
padding: 30px;
font-size: 20px;
}
#simu span.total {
color: #2592b1;
font-size: 35px;
font-weight: bold;
}
#simu span.total-unit {
color: #2592b1;
}
#simu .required-field {
color: #f00;
font-size: 12px;
display: inline-block;
margin-top: 6px;
}
#simu .employee-cnt-same-btn {
margin-left: 5px;
}
#simu #number-of-products {
float: right;
margin-right: 100px;
}
@media only screen and (max-width: 768px) {
#simu {
width: auto;
}
#simu h1 {
font-size: 24px!important;
}
#simu h2 {
font-size: 20px!important;
margin-top: 30px;
}
#simu table *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#simu table,
#simu tbody,
#simu tr,
#simu th,
#simu td{
display:block;
width:100%;
}
#simu th{
padding:10px 20px;
}
#simu td input[type=text] {
width: 80%;
}
#simu #number-of-products{
float: none;
margin-right: 0;
margin-top: 10px;
text-align: right;
}
#simu form input {
font-size: 16px;
}
} #costsimulator .inr-wrapper {
max-width: 1000px!important;
}
#costsimulator .main-lead {
margin: 50px 0;
}
#costsimulator .wrapper {
background-color: #D1ECF4;
padding: 80px 0;
margin-bottom: -40px;
}
#costsimulator .wrapper h2 {
font-size: 30px;
font-weight: bold;
text-align: left;
border-left: 10px solid #5BB7D1;
border-bottom: 1px solid #5BB7D1;
padding-left: 10px;
}
#costsimulator .wrapper .white-bg {
background-color: #fff;
border-radius: 10px;
width: 50%;
padding: 60px;
box-sizing: border-box;
margin: 0 auto;
}
#costsimulator input {
width: 25px;
height: 25px;
border: 1px solid #aaa;
cursor: pointer;
}
#costsimulator .wrapper .white-bg form span {
vertical-align: top;
line-height: 2.0;
}
#costsimulator .wrapper p.triangle {
width: 80%;
margin: 0 auto;
}
#costsimulator .wrapper .plus-sec {
font-size: 50px;
color: #666;
text-align: center;
}
#costsimulator .wrapper .btn-sec {
text-align: center;
}
#costsimulator .wrapper .btn-sec button {
font-size: 26px;
font-weight: bold;
border: none;
background-color: #5BB7D1;
border-radius: 100px;
width: 480px;
height: 100px;
box-sizing: border-box;
white-space: nowrap;
color: #fff;
cursor: pointer;
}
#costsimulator .wrapper .btn-sec button:hover {
opacity: 0.8;
}
#costsimulator .wrapper .white-bg form .notes {
font-size: 12px;
}
#costsimulator .wrapper .white-bg form .flex {
justify-content: left;
align-items: center;
width: 100%;
}
#costsimulator .wrapper .white-bg form .input-field .flex-column{
flex-direction: column;
align-items: start;
}
#costsimulator .wrapper .white-bg form .input-field {
background-color: #F7F7F7;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-sizing: border-box;
}
#costsimulator .wrapper .white-bg form .input-field .f-left {
width: 180px;
margin-right: 35px;
}
#costsimulator .wrapper .white-bg form .input-field .f-left input {
vertical-align: -0.5em;
}
#costsimulator .wrapper .white-bg form .input-field .f-left2 input {
vertical-align: -0.5em;
}
#costsimulator .wrapper .white-bg form .input-field .f-left.mr-0 {
margin-right: 0;
}
#costsimulator .wrapper .white-bg form .input-field .f-right p {
margin-right: 5px;
text-align: right;
width: 80px;
font-weight: inherit;
font-size: 15px;
}
#costsimulator .wrapper .white-bg form .input-field .f-right .field {
margin-right: 20px;
}
#costsimulator .wrapper .white-bg form .input-field .f-right .field input {
height: 40px;
border-radius: 3px;
border: 1px solid #aaa;
text-indent: 1em;
width: 80px;
}
#costsimulator .wrapper .white-bg form .input-field .f-right .field input.smallBox {
width: 60px;
}
#costsimulator .wrapper .white-bg form .input-field .form-item{
width:575px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #cccccc;
}
#costsimulator .wrapper .white-bg form .input-field .form-item label{
width:100%;
display:block;
font-weight: 700;
}
#costsimulator .wrapper .white-bg form .input-field .form-item span{
width: auto;
display: inline-block;
margin-left: 0.25em;
padding: 4px 8px;
line-height: 1;
font-size: 0.75em;
color: #fff;
background-color: #c73b3b;
border-radius: 4px;
}
#costsimulator .wrapper .white-bg form .input-field .form-item input,#costsimulator .wrapper .white-bg form .input-field .form-item select{
width:570px;
height: 40px;
border-radius: 5px;
border: 1px solid #aaa;
}
#costsimulator .wrapper .white-bg form .input-field .form-item fieldset{
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
#costsimulator .wrapper .white-bg form .input-field .form-item fieldset label{
padding: 0 5px;
}
#costsimulator .wrapper .white-bg form .input-field .form-item fieldset input[type=checkbox]{
width:auto;
height:auto;
}
#costsimulator .wrapper .white-bg form .input-field .form-item a{
color: #a59aca;
}
#costsimulator .wrapper .white-bg form .input-field .form-item a:hover{
color: #23527c;
text-decoration: underline;
}
#costsimulator .wrapper .white-bg form .input-field__second {
padding: 0;
}
#costsimulator .wrapper .white-bg form .input-field__second .flex.pd-fix {
padding: 20px;
border-radius: 0;
box-sizing: border-box;
}
#costsimulator .wrapper .white-bg form .input-field__third .f-left {
width: 100px;
margin-right: 0;
}
#costsimulator .wrapper .input-field__third .plus-sec {
font-size: 25px;
color: #999;
text-align: left;
margin-left: 30px;
}
@media only screen and (max-width: 768px) {
#costsimulator .inr-wrapper {
width: 92%;
margin: 0 auto;
}
#costsimulator .flex {
display: block;
}
#costsimulator .wrapper h2 {
font-size: 20px;
}
#costsimulator .wrapper p.triangle {
width: 92%;
}
#costsimulator .wrapper .white-bg {
width: 92%;
padding: 20px;
}
#costsimulator .wrapper .btn-sec button {
width: 92%;
margin: 0 auto;
font-size: 16px;
height: 70px;
}
#costsimulator .wrapper .white-bg form .notes {
margin-top: 10px;
}
#costsimulator .wrapper .white-bg form .input-field .f-right p {
text-align: left;
width: 50%;
display: inline;
}
#costsimulator .wrapper .white-bg form .input-field .f-right .field {
width: 50%;
display: inline;
}
#costsimulator .wrapper .white-bg form .input-field .f-right .field input {
width: 80px;
}
#costsimulator .wrapper .white-bg form .input-field .f-left {
margin-bottom: 10px;
}
} #feature .flex {
justify-content: space-around;
}
#feature .flex-item {
max-width: 220px;
}
#feature .circle {
border: 5px solid #5FBAD2;
height: 70px;
width: 70px;
font-size: 20px;
border-radius: 100px;
}
#feature #top-infobox {
padding: 20px;
max-width: 400px;
}
#feature #top-infobox img.pc-on {
width: 400px;
}
#feature #top-infobox img.sp-on {
width: 200px;
margin: 0 auto;
}
#feature .sys_intro {
text-align: center;
padding: 10px 0px;
margin-bottom: 10px;
background-color: #fff;
border: 3px solid #007CFF;
font-size: 20px;
font-weight: bold;
}
#feature .sys_intro__2 {
border: 3px solid #FAEE4A;
}
#feature .sys_intro__3 {
border: 3px solid #4A9F49;
}
#feature .sys_intro__4 {
border: 3px solid #54C5CC;
}
#feature .saas_exp {
border-collapse: collapse;
}
#feature .saas_exp tr td {
padding: 5px 20px;
border: 1px solid #aaa;
}
#feature .saas_exp tr .bg-gr {
background-color: #777;
color: #fff;
}
#feature .saas_exp tr .bg-mclr {
background-color: #5FBAD2;
border: 10px solid #5FBAD2;
color: #fff;
}
#feature .saas_exp tr .border_lr {
border-right: 10px solid #5FBAD2;
border-left: 10px solid #5FBAD2;
}
#feature .saas_exp tr td.border_b {
border-bottom: 10px solid #5FBAD2;
}
#feature #cc-m-imagesubtitle-image-7071084418 {
display: none!important;
}
#feature .feature_ttl {
display: block;
border-bottom: 1px solid #333;
}
#feature .img-rev {
width: 800px;
}
@media only screen and (max-width: 768px) {
#feature .saas_exp {
border-collapse: collapse;
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
#feature .saas_exp tr td {
padding: 2px 5px;
font-size: 14px;
}
#feature #cc-m-imagesubtitle-image-7070498418 {
display: none!important;
}
#feature #cc-m-imagesubtitle-image-7071084418 {
display: block!important;
}
#feature .flex {
display: block;
}
#feature .flex-item {
max-width: 100%;
margin-bottom: 10px;
}
} .voice-box{
background:#fff;
border:1px solid #59B7D2;
border-radius: 5px;
padding:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:30px;
text-align:left;
}
.voice-headline .voice-box{
padding:15px;
height:100%;
position:relative;
}
.voice-headline .voice-box .cover{
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
@media print, screen and (min-width: 769px) {
.voice-box{
max-width:880px;
margin-left:auto;
margin-right:auto;
}
}
@media only screen and (max-width: 768px) {
.voice-box{
padding:15px;
}
}
.voice-box .head{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-align-items: center;
align-items:         center;
margin-bottom:15px;
}
.voice-headline .voice-box .head{
margin-bottom:0;
height:100%;
}
.voice-box .icon{
width:100px;
}
.voice-box h4{
font-size:20px;
width:calc(100% - 120px);
}
.voice-box h4 .name{
font-weight:normal;
font-size:16px;
margin-top:5px;
display:inline-block;
}
.voice-box p{
margin-bottom:1em;
}
.voice-box p:last-child{
margin-bottom:0em;
}
@media only screen and (max-width: 768px) {
.voice-box .icon{
width:80px;
}
.voice-box .icon img{
width:60px;
}
.voice-box h4{
font-size:18px;
width:calc(100% - 80px);
}
}  .service-contents_pc, .service-contents_sp {
padding-bottom: 15px;
}
@media only screen and (max-width: 768px) {
.service-contents_pc {
display: none;
}
}
@media only screen and (min-width: 769px) {
.service-contents_sp {
display: none;
}
}
.fs20 {font-size: 20px;}
.fs30 {font-size: 30px;}
.fs50 {font-size: 50px;}
.fw-bold {font-weight: bold;}
.f-atte {color: #CB4649;}
.serv-cont {
background-color: #fff;
padding: 40px;
}
.serv-cont td {
padding: 10px 15px 10px 20px;
}
.wrap-cancel {
white-space: nowrap!important;
}
.bpo-duty-list-bg {
background-color: #4eaac4;
}
#bpo-duty-list { padding: 20px 0px;
}
#bpo-duty-list .inr-wrapper {
max-width: 1000px;
margin: 0 auto;
}
#bpo-duty-list .inr-wrapper h3 {
font-size: 20px;
border-left: 10px solid #59B7D2;
padding-left: 10px;
}
#bpo-duty-list .inr-wrapper table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
#bpo-duty-list .inr-wrapper table th {
text-align: center;
}
#bpo-duty-list .inr-wrapper table th,
#bpo-duty-list .inr-wrapper table td {
border: 1px solid #ccc;
padding: 3px;
text-align: center;
}
#bpo-duty-list .inr-wrapper table td:first-child,
#bpo-duty-list .inr-wrapper table td:nth-child(2) {
width: 40px;
}
#bpo-duty-list .inr-wrapper table td:nth-child(3),
#bpo-duty-list .inr-wrapper table td:nth-child(4)  {
width: 120px;
}
#bpo-duty-list .inr-wrapper table td:nth-child(5) {
width: auto;
}
#bpo-duty-list .inr-wrapper table td:nth-child(6),
#bpo-duty-list .inr-wrapper table td:nth-child(7)  {
width: 100px;
}
#bpo-duty-list .inr-wrapper table .bg-blue {
background-color: #F4FCFF;
}
#bpo-duty-list .inr-wrapper .service-qa {
background-color: #fff;
padding: 15px;
width:100%;
}
.text-left {
text-align: left!important;
}
.r-space {
display: none;
} h3.h3-blue {
font-size: 20px;
text-align: center;
padding: 50px 0 30px 0;
color: #34a6c6;
border: none!important;
}
h3.h3-white {
font-size: 20px;
text-align: center;
padding: 50px 0 30px 0;
color: #fff;
border: none!important;
}
.job-list-wrap {
padding-bottom: 35px;
}
.job-list-wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 0;
}
.job-list-wrap ul li {
list-style: none;
background: #fff;
border-radius: 10px;
transition: all 0.3s ease;
text-align: center;
border: 2px solid transparent;
box-shadow: 0 0 8px #ededed;
position: relative;
} .job-list-wrap-top ul li {
box-shadow: 0 0 5px #3b95ae;
}
.job-list-wrap ul li a {
border-radius: 10px;
transition: all 0.3s ease;
}
.job-list-wrap ul li a:hover {
opacity: 1;
}
.job-list-wrap ul li:hover {
border: 2px solid #5BB7D1;
opacity: 1;
}
.job-icon {
padding: 25px 0;
}
.job-icon img {
width: 150px;
height: auto;
}
h4.job-ttl {
color: #2da5c7;
padding-top: 7px;
font-feature-settings: "palt";
}
p.job-txt {
padding: 0 30px;
font-size: 15px;
color: #333333;
text-align: left;
}
.job-list-arrow {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
width: 56px;
height: 56px;
border-radius: 100% 0 8px 0;
background: #5cb8d2;
}
.job-list-arrow i.fa-arrow-right {
color: #fff;
position: absolute;
top: 23px;
}
@media only screen and (min-width: 601px){
.job-list-wrap ul li {
padding: 35px 0 55px 0;
}
h4.job-ttl {
font-size: 21px;
letter-spacing: 0.1rem;
}
.job-list-wrap ul::after {
width: 316px;
content:"";
display: block; 
}
}
@media only screen and (min-width: 1001px) {
.job-list-wrap ul li {
width: 316px;
margin-bottom: 20px;
}
h3.h3-blue {
font-size: 27px!important;
}
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
.job-list-wrap ul li {
width: 31%;
margin-bottom: 3%;
}
.job-list-wrap ul::after {
width: 31%;
}
h3.h3-blue {
font-size: 22px!important;
}
}
@media only screen and (max-width: 600px) {
.job-list-wrap ul li {
width: 47%;
margin-bottom: 4%;
padding: 35px 0 45px 0;
}
h4.job-ttl {
font-size: 19px;
}
#bpo-duty-list .inr-wrapper h3.h3-blue {
font-size: 20x;
}
}
@media only screen and (max-width: 500px) {
.job-list-wrap ul li {
width: 100%;
}
} .job-wrap {
background-color: #fff;
padding: 15px;
max-width: 1000px;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.fw-bold {text-align: center;}
.serv-cont {
width: 100%;
}
table.serv-cont.mb-40 {
margin-bottom: 0!important;
}
.serv-cont td {
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
padding: 5px 0;
}
.serv-cont td.fs20 {
font-size: 16px;
}
.serv-cont td img {
width: 70px;
}
.serv-cont .td-third {
width: 100%;
display: inline-block;
border-bottom: 1px solid #aaa;
padding-bottom: 15px;
margin-bottom: 10px;
}
.serv-cont .bord-cancel {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
#bpo-duty-list {
font-size: 13px;
}
#bpo-duty-list .inr-wrapper {
width: 92%;
}
#bpo-duty-list .inr-wrapper .table-scroll {
overflow: auto;
white-space: nowrap;
}
#bpo-duty-list .inr-wrapper table td {
-webkit-text-size-adjust: 100%;
font-size: 12px!important;
}
.r-space {
display: table-cell;
visibility: hidden;
}
.job-wrap {
padding: 15px 0;
}
} #company table td {
padding: 10px 20px;
}
#company h2 {
padding-bottom: 10px;
border-bottom: 1px solid #aaa;
}
@media only screen and (max-width: 768px) {
#company table td:first-child {
width: 70px!important;
}
} #words .flex {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
#words .flex p {
margin-right: 30px;
}
@media screen and (max-width: 768px) {
#words .flex {
display: flex;
}
} #words-article p {
margin-bottom: 10px;
}
#words-article .wp-block-table table {
border: 1px solid #aaa;
width: 100%;
}
#words-article .wp-block-table table tr th,
#words-article .wp-block-table table tr td {
border: 1px solid #aaa;
padding: 10px;
white-space: nowrap;
}
#words-article .wp-block-table table tr th {
background-color: #eee;
font-weight: bold;
}
#words-article .flex__center {
justify-content: center;
}
#words-article .inr-wrapper .mb-40 h2 {
font-size: 22px;
text-align: left;
margin: 40px 0 10px 0;
border-left: 8px solid #aaa;
padding-left: 10px;
}
#words-article .inr-wrapper .mb-40 .h2-default {
font-size: 30px;
text-align: center;
margin-top: 10px;
border: none;
padding: 0;
}
#words-article ul li {
font-weight: normal;
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
#words-article .flex__center {
display: block;
}
#words-article {
word-break: break-all;
}
} #webinar-list *{
text-transform:none!important;
}
#webinar-list h2 {
font-size: 20px;
color: #107c9a;
text-align: left;
}
#webinar-list .card .flex .thumb img {
width: 217px!important;
height: auto;
margin-right: 20px;
vertical-align: bottom;
}
#webinar-list .card {
min-height: auto;
}
#webinar-list .card .pd-20 {
padding: 20px;
}
#webinar-list .card__txt {
text-align: left;
width: 100%;
}
#webinar-list .next-webinar {
border: 1px solid #aaa;
padding: 10px 20px;
background-color: #FDEFD2;
margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
#webinar-list .flex {
display: block;
}
#webinar-list .card .flex .thumb img {
width: 100%!important;
margin: 0px 0px 10px 0px;
}
} #webinar-article h2 {
border-bottom: 1px solid #aaa;
padding-bottom: 20px;
line-height: 1.4;
}
#webinar-article img {
height: auto;
}
#webinar-article table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-feature-settings: "palt";
}
#webinar-article table td {
padding: 10px 5px;
}
#webinar-article table td:first-child {
font-weight: bold;
text-align: center;
white-space: nowrap;
}
#webinar-article table td p {
font-size: 18px;
}
#webinar-article table tr:nth-child(odd) {
background-color: #e8ffe8;
}
#webinar-article table tr:nth-child(even) {
background-color: #eeeeee;
}
#webinar-article table ul {
padding-left: 25px;
} #blog-list .card {
background-color: #fff;
box-shadow: 0 2px 5px #ccc;
border-radius: 5px;
display: block;
position: relative;
z-index: 1;
min-height: 380px;
width: 320px;
margin-right: 12px;
}
#blog-list .card a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2;
}
#blog-list .card:hover {
opacity: 0.8;
}
#blog-list .card h2 {
color: #107c9a;
font-size: 20px;
text-align: left;
margin-bottom: 0px;
}
#blog-list .card .card-img {
width: 100%;
border-radius: 5px 5px 0 0;
}
#blog-list .card .date {
font-size: 14px;
}
#blog-list .card .icon {
vertical-align: middle;
margin-bottom: 4px;
}
#blog-list .card .thumb img {
width: 320px;
height: auto;
border-radius: 5px 5px 0 0;
} .fa-solid {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
#blog-list-wrap {
background-color: #fff;
margin: 0 calc(50% - 50vw);
width: 100vw;
padding-bottom: 60px;
}
#blog-list-wrap h3.h3-blue {
padding: 60px 0 50px 0;
font-weight: normal;
}
@media only screen and (max-width: 768px) {
#blog-list-wrap h3.h3-blue {
font-size: 1.5rem;
font-weight: bold;
}
}
#blog-list-wrap h3.h3-blue .fa-pen {
padding-left: 10px;
}
#blog-list-wrap ul#blog-list {
display: flex;
max-width: 1000px;
margin: 0 auto;
padding-left: 0!important;
}
#blog-list-wrap #blog-list .card {
background-color: #fff;
display: block;
position: relative;
z-index: 1;
box-shadow: none;
border-radius: 0;
}
#blog-list-wrap #blog-list .card h2 {
font-size: 17px;
}
#blog-list-wrap #blog-list .card .thumb {
padding-bottom: 10px;
}
#blog-list-wrap #blog-list .card .thumb img {
border-radius: 0;
width: 100%;
}
#blog-list-wrap #blog-list .card .date {
padding-bottom: 8px;
}
a.blog-list-all {
color: #fff;
padding: 10px 25px 10px 38px;
background: #49afc5;
display: inline-block;
border-radius: 50px;
margin-top: 40px;
}
a.blog-list-all .fa-caret-right {
padding-left: 20px;
}
.blog-list-bottom {
height: 60px;
}
@media screen and (max-width: 820px) {
#costsimulator .wrapper .white-bg form .input-field .form-item{
width:100%;
}
#costsimulator .wrapper .white-bg form .input-field .form-item input, #costsimulator .wrapper .white-bg form .input-field .form-item select{
width:100%;
}
}
@media screen and (min-width: 769px) {
#blog-list-wrap #blog-list .card {
padding: 0 8px 0 20px;
min-height: 330px;
width: 32%;  
}
#blog-list-wrap ul#blog-list li {
border-left: solid 1px #eaeded;
}
#blog-list-wrap ul#blog-list li:last-child {
border-right: solid 1px #eaeded;
padding-right: 20px;
}
#blog-list-wrap #blog-list .card h2 {
font-size: 15px;
}
#costsimulator .wrapper .white-bg form .input-field .form-item{
width:100%;
}
#costsimulator .wrapper .white-bg form .input-field .form-item input, #costsimulator .wrapper .white-bg form .input-field .form-item select{
width:100%;
}
}
@media screen and (max-width: 768px) {
#blog-list-wrap {
box-sizing: border-box;
padding: 0 1rem 60px 1rem;
}
#blog-list-wrap #blog-list {
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
#blog-list .card {
min-height: 0!important;
width: 100%;
}
#blog-list-wrap #blog-list .card {
width: 45%;
margin-bottom: 30px;
}
#blog-list .card .thumb img {
width: 100%;
}
#blog-list .card h2 {
margin-bottom: 20px;
}
#blog-list-wrap #blog-list .card h2 {
margin-bottom: 40px;
}
#costsimulator .wrapper .white-bg form .input-field .form-item{
width:100%;
}
#costsimulator .wrapper .white-bg form .input-field .form-item input, #costsimulator .wrapper .white-bg form .input-field .form-item select{
width:100%;
}
}
@media screen and (max-width: 500px) {
#blog-list-wrap #blog-list .card {
width: 100%;
margin-right: 0;
border-bottom: 1px solid #eaeded;
}
#costsimulator .wrapper .white-bg form .input-field .form-item{
width:100%;
}
#costsimulator .wrapper .white-bg form .input-field .form-item input, #costsimulator .wrapper .white-bg form .input-field .form-item select{
width:100%;
}
} .blog-category {
font-size: 13px;
color: #777;
position: absolute;
bottom: 10px;
right: 15px;
}
.fa-tag {
padding-right: 5px;
} #blog-article .wp-block-spacer {
height: 20px!important;
}
#blog-article h1 {
font-size: 40px;
font-weight: bold;
}
#blog-article h2 {
margin-top: 60px;
text-align: left;
line-height: 1.2;
}
#blog-article h3 {
font-size: 20px;
margin-bottom: 10px;
margin-top: 30px;
line-height: 1.2;
border-left: 5px solid #37a7c6;
padding: 0px 0px 3px 5px;
}
#blog-article p {
margin-bottom: 10px;
}
#blog-article ul li {
margin-bottom: 10px;
font-weight: normal;
}
#blog-article .wp-block-table {
border: 1px solid #aaa;
width: 100%;
}
#blog-article .wp-block-table tr th,
#blog-article .wp-block-table tr td {
border: 1px solid #aaa;
padding: 10px;
}
#blog-article .wp-block-table tr th {
background-color: #eee;
font-weight: bold;
}
#blog-article .blog-table {
width: 100%;
}
#blog-article .blog-table,.blog-table td,.blog-table th {
border-collapse: collapse;
border: 1px solid #aaa;
padding: 5px 10px;
}
#blog-article .blog-table td:first-child {
text-align: right;
}
#blog-article .blog-table th {
background-color: #b4d9f3;
}
#blog-article #toc_container ul li {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
#blog-article h1 {
font-size: 24px;
}
#blog-article .blog-table td,.blog-table th {
font-size: 12px!important;
}
#blog-article a {
word-break: break-all;
}
#blog-article .wp-block-image {
width: 100%;
}
#blog-article .wp-block-table tr th,
#blog-article .wp-block-table tr td {
white-space: nowrap;
font-size: 12px;
}
} .quo {
padding: 30px;
background-color: #fff;
}
.quo .blog-table {
width: 100%;
}
.quo .blog-table,.blog-table td,.blog-table th {
border-collapse: collapse;
border: 1px solid #aaa;
padding: 5px 10px;
}
.quo .blog-table th {
background-color: #b4d9f3;
}
.quo .blog-table ul {
list-style: none;
}
.quo .blog-table ul li {
text-align: left;
}
@media screen and (max-width: 767px) {
.quo .blog-table td, .blog-table th {
font-size: 12px!important;
}
.quo ul {
padding-left: 15px;
}
} .flex__balloon .flex-img {
max-width: 200px;
width: 200px;
margin: 30px 20px 0 0;
}
.balloon1-left {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #e0edff;
}
.balloon1-left__orange {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #ffefd2;
}
.balloon1-left:before {
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent; }
.balloon1-left__orange:before {
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #ffefd2;
}
.balloon1-left__m-auto {
margin: auto;
width: 94%;
}
.balloon1-left p {
margin: 0;
padding: 0;
}
@media screen and (max-width: 767px) {
.flex__balloon {
display: block;
}
.flex__balloon .flex-img {
width: 150px;
margin: 0 auto;
text-align: center;
}
.balloon1-left {
margin-left: 0px;
margin-bottom: 20px;
}
.balloon1-left:before {
top: -15px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent; }
.balloon1-left__orange {
margin-bottom: 20px;
}
.balloon1-left__orange:before {
top: -15px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-bottom: 15px solid #ffefd2;
}
} .credit-wrap {
background-color: #fff; 
padding: 1px 25px 20px 25px;
}
@media screen and (min-width: 500px) {
.credit-inner {
display: flex;
}
}
.credit-inner img {
padding-right: 10px; 
max-width: 95px;
height: 100%;
}
.credit-name {
font-size: 20px;
} @media screen and (min-width: 768px) {
.blog-wrap {
display: flex;
}
main {
flex: 1
}
.blog-side {
width: 276px;
padding: 40px 0 0 48px;
}
} .blog-bnr {
width: 276px;
} h3.blog-side-h3 {
border-left: none!important;
padding: 0px 0px 10px 0!important;
margin-bottom: 20px!important;
border-bottom: solid 2px #555;
}
ul.blog-side-list {
list-style: none;
padding-left: 0!important;
}
ul.blog-side-list li {
padding-bottom: 20px;
margin-bottom: 20px!important;
}
ul.blog-side-list li:last-child {
border-bottom: none;
}
@media screen and (min-width: 768px) {
ul.blog-side-list li {
border-bottom: solid 1px #d2d2d2;
}
}
@media screen and (max-width: 399px) {
ul.blog-side-list li {
border-bottom: solid 1px #d2d2d2;
}
}
@media screen and (min-width: 400px) and (max-width: 767px) {
ul.blog-side-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul.blog-side-list li {
width: 48%;
}
}
.blog-thum img {
height: auto;
}
.blog-date {
color: #777;
font-size: 0.85rem;
padding: 4px 0 ;
}
.blog-ttl {
color: #333!important;
} .socialbtn {
padding-top: 30px;
} .socialbtn img {
width: 142px;
} .socialbtn p {
font-size: 14px;
color: #333;
} #request .small {
font-size: 12px;
}
#request .bold {
font-weight: bold;
}
#request .form-wrapper {
background-color: #eee;
padding: 40px 0px;
}
#request .form-wrapper .form-inner-wrapper {
width: 100%;
margin: 0 auto;
max-width: 500px;
}
#request .form-wrapper .form-inner-wrapper form > div {
margin-bottom: 20px;
}
#request .form-wrapper .form-inner-wrapper form div > div {
color: red;
}
#request .form-wrapper .form-inner-wrapper form .has-danger {
background-color: #FFE3E3;
}
#request .form-wrapper .form-inner-wrapper form input,
#request .form-wrapper .form-inner-wrapper form textarea {
height: 40px;
border-radius: 3px;
border: 1px solid #aaa;
margin-top: 3px;
text-indent: 1em;
box-sizing: border-box;
}
#request .form-wrapper .form-inner-wrapper form textarea {
height: 80px;
padding: 5px;
text-indent: 0;
}
#request .form-wrapper .form-inner-wrapper form .name,
#request .form-wrapper .form-inner-wrapper form .ip-company {
width: 70%;
}
#request .form-wrapper .form-inner-wrapper form .tel {
width: 30%;
}
#request .form-wrapper .form-inner-wrapper form .email,
#request .form-wrapper .form-inner-wrapper form .inquiry{
width: 100%;
}
#request .form-wrapper .form-inner-wrapper form button {
background-color: #37a7c6;
border-radius: 30px;
border: 0px;
padding: 10px 40px;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
}
#request .form-wrapper .form-inner-wrapper label span {
font-size: 12px;
font-weight: bold;
background-color: #d04652;
color: #fff;
padding: 0px 5px;
margin-left: 5px;
}
#request .form-wrapper .form-inner-wrapper label .optional {
background-color: #aaa;
}
@media screen and (max-width: 767px) {
#request .form-wrapper .form-inner-wrapper {
max-width: 100%;
width: 92%;
}
#request input[type=text],
#request input[type=tel],
#request textarea {
font-size: 16px;
}
#request .form-wrapper .form-inner-wrapper form .name,
#request .form-wrapper .form-inner-wrapper form .ip-company {
width: 100%;
}
#request .form-wrapper .form-inner-wrapper form .tel {
width: 50%;
}
#request .form-wrapper .form-inner-wrapper form .email,
#request .form-wrapper .form-inner-wrapper form .inquiry{
width: 100%;
}
} #consultation {
margin-top: -50px;
}
#consultation .yellow {
color: #EBFF00;
}
#consultation .reservBtn {
background-color: #fff;
border: 4px solid #2A5658;
border-radius: 50px;
padding: 20px;
width: 70%;
font-size: 25px;
font-weight: bold;
color: #333333;
cursor: pointer;
}
#consultation .reservBtn__grn {
background-color: #92C591;
color: #fff;
border: none;
padding: 10px;
width: 100%;
font-size: 16px;
}
#consultation .reservBtn:hover {
opacity: 0.7;
}
#consultation .reservBtn__grn:hover {
opacity: 0.7;
}
#consultation .kv {
min-height: 80vh;
background: url(//www.comitx.jp/wp-content/themes/comitx/css/images/consultation_kv.png) center / cover;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
padding-top: 120px;
}
#consultation .kv h1 {
color: #fff;
font-size: 65px;
font-weight: bold;
text-shadow: #072629 0px 0px 40px;
}
#consultation .kv .kv_exp {
background: #07282B;
padding: 40px;
background: rgba(7,40,43,0.7);
box-sizing: border-box;
border-radius: 15px;
text-align: left;
color: #fff;
margin-bottom: 30px;
}
#consultation .kv .kv_exp h2 {
text-align: left;
color: #fff;
border-bottom: 1px solid #fff;
padding-bottom: 15px;
}
#consultation .kv .kv_exp p {
font-size: 25px;
}
#consultation .howToUse {
background-color: #5BB7D1;
padding: 60px 0;
}
#consultation .howToUse h2 {
color: #fff;
font-size: 40px;
}
#consultation .howToUse .whiteBox {
background-color: #fff;
margin-bottom: 20px;
}
#consultation .howToUse .triangle {
width: 0px;
height: 0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
margin: 0 auto 20px auto;
}
#consultation .howToUse .whiteBox h3 {
font-size: 20px;
background-color: #D6EBF0;
}
#consultation .howToUse .whiteBox h3 span {
font-size: 30px;
line-height: 1.8;
text-align: center;
color: #fff;
display: inline-block;
width: 60px;
height: 60px;
background-color: #2A565A;
margin-right: 20px;
}
#consultation .howToUse .whiteBox .pd-around {
padding: 25px;
}
#consultation .howToUse .whiteBox .flex .left-sec {
margin-right: 30px;
width: 60%;
}
#consultation .howToUse .whiteBox .flex button {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
#consultation .reservBtn {
border: 2px solid #2A5658;
}
#consultation .reservBtn__grn {
border: none;
}
#consultation .kv {
min-height: 65vh;
padding-top: 60px;
background: url(//www.comitx.jp/wp-content/themes/comitx/css/images/consultation_kv_sp.png) center / cover;
}
#consultation .kv h1 {
font-size: 30px;
}
#consultation .kv .kv_exp {
padding: 20px;
margin-bottom: 20px;
}
#consultation .kv .kv_exp h2 {
font-size: 20px;
padding-bottom: 10px;
}
#consultation .kv .kv_exp p {
font-size: 15px;
}
#consultation .reservBtn {
padding: 10px;
width: 70%;
font-size: 16px;
}
#consultation .howToUse h2 {
color: #fff;
font-size: 24px;
}
#consultation .howToUse .whiteBox h3 {
font-size: 16px;
}
#consultation .howToUse .whiteBox h3 span {
font-size: 20px;
line-height: 1.8;
width: 40px;
height: 40px;
margin-right: 15px;
}
#consultation .howToUse .whiteBox .flex {
display: block;
}
#consultation .howToUse .whiteBox .pd-around {
padding: 15px;
}
#consultation .howToUse .whiteBox .flex .left-sec {
margin-right: 0;
width: 100%;
}
#consultation .howToUse .whiteBox .flex .text-center {
margin-bottom: 20px;
}
} #contact table {
width: 100%;
}
#contact table td {
width: 60%;
padding-bottom: 40px;
vertical-align: top;
}
#contact table td:first-child {
width: 40%;
}
#contact table h2 {
font-size: 24px;
text-align: left;
}
.lp-adv{
text-align: center;
margin-top: 30px;
overflow: hidden;
}
.lp-adv h4{
margin-bottom: 30px;
font-weight: normal;
}
.lp-adv img{
width: 50%;
border-radius: 20px;
}
@media screen and (max-width: 767px) {
#contact table td {
display: block;
width: 100%;
padding-bottom: 10px;
}
#contact table td:first-child {
width: 100%;
}
#contact table td:nth-child(2) {
padding-bottom: 40px;
}
#contact table h2 {
font-size: 24px;
margin-bottom: 0px;
}
.lp-adv img{
width:100%;
}
} @media screen and (max-width: 320px) {
#top .kv .mvMessage .mvBtn a {
font-size: 14px;
padding: 15px 20px;
}
.lp-adv img{
width:100%;
}
}
.emph {
background:linear-gradient(transparent 60%, #ffffb5 60%);
}
#youtube-01 {
aspect-ratio: 16/9;
width: 100%;
height: 100%;
}

body * {
box-sizing: border-box;
font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 767px) {
.pc {
display: none;
}
}
@media screen and (min-width: 768px) {
.sp {
display: none;
}
}
.container {
max-width: 100%;
padding: 0;
}
.cases-template-default .page-header {
padding: 0 15px;
}
.cases-template-default .entry-header {
display: none;
}
.cases-template-default .siteContent {
padding: 2rem 0 0 0 !important;
}
.cases-template-default .ai-data-flow-wrap {
padding: 80px 0 0 0;
}
.cases-template-default .firstview-btn-wraps a:hover {
color: white;
opacity: 0.7;
}
.breadSection .breadcrumb {
margin-left: 15px;
}
.page-header_pageTitle {
border-left: none;
}
.page-header .container {
border-left: 3px solid #71A1CE;
max-width: 1200px;
margin: 0 auto;
}
.breadSection .container {
max-width: 1200px;
margin: 0 auto;
}
.vk_posts, .postNextPrev {
display: none;
}
footer {
padding: 0 15px;
}
@media screen and (max-width: 767px) {
footer {
padding: 20px 15px;
}
}
.mainSection a {
text-indent: 0em;
}
.flow-box p:empty {
display: none;
}
img {
width: 100%;
height: auto;
}
ul, li {
padding: 0;
list-style: none;
}
h1, h2, h3, a, p, ul, li {
color: #333333;
margin: 0;
}
h1, h2, h3, p, th, td {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
transition: all 0.5s ease 0s;
}
a:hover {
opacity: 0.6;
}
a, span {
display: inline-block;
}
.fa-solid {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.fa-brands {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}
i {
font-style: normal;
}
.case-ttl-1 {
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/case/case-thum-1.jpg);
background-position: center center;
background-size: cover;
}
.case-ttl-2 {
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/case/case-thum-2.jpg);
background-position: center center;
background-size: cover;
}
.case-ttl-3 {
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/case/case-thum-3.jpg);
background-position: center center;
background-size: cover;
}
.case-ttl-4 {
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/case/case-thum-4.jpg);
background-position: center center;
background-size: cover;
}
.case-ttl-5 {
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/case/case-thum-5.jpg);
background-position: center center;
background-size: cover;
}
.case-ttl-inner {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
}
.case-wrap {
overflow: hidden;
}
.case-wrap .case-ttl {
height: 234px;
margin-bottom: 80px;
}
.case-wrap .case-ttl h1, .case-wrap .case-ttl p {
color: #036eb7;
text-align: center;
font-weight: bold;
font-size: clamp(1.2rem, 2vw, 1.6rem);
line-height: 1.6;
padding: 0 20px;
}
.case-wrap .case-inner {
max-width: 880px;
width: calc(100% - 40px);
margin: 0 auto;
}
.case-wrap .case-info-wrap {
gap: 20px;
}
@media screen and (min-width: 768px) {
.case-wrap .case-info-wrap {
display: flex;
}
}
.case-wrap .case-info-wrap .info-left {
background: #036eb7;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.case-wrap .case-info-wrap .info-left {
width: 210px;
height: auto;
}
}
@media screen and (max-width: 767px) {
.case-wrap .case-info-wrap .info-left {
padding: 30px 0;
}
}
.case-wrap .case-info-wrap .info-left p {
color: white;
font-weight: bold;
}
@media screen and (min-width: 501px) {
.case-wrap .case-info-wrap .info-right {
flex: 1;
}
}
.case-wrap .case-info-wrap .info-right table {
border: none;
}
@media screen and (min-width: 501px) {
.case-wrap .case-info-wrap .info-right table tr.tr-center {
display: flex;
align-items: center;
}
}
.case-wrap .case-info-wrap .info-right table tr {
border-bottom: solid 1px #e6e6e6;
padding: 15px 0;
}
@media screen and (min-width: 501px) {
.case-wrap .case-info-wrap .info-right table tr {
display: flex;
}
}
@media screen and (max-width: 500px) {
.case-wrap .case-info-wrap .info-right table tr {
display: block;
width: 100%;
}
}
.case-wrap .case-info-wrap .info-right table tr th {
border-bottom: none;
padding: 0;
}
@media screen and (min-width: 501px) {
.case-wrap .case-info-wrap .info-right table tr th {
width: 120px;
}
}
@media screen and (max-width: 500px) {
.case-wrap .case-info-wrap .info-right table tr th {
display: block;
width: 100%;
padding-bottom: 5px;
}
}
.case-wrap .case-info-wrap .info-right table tr td {
padding: 0;
font-weight: bold;
font-size: 1rem;
flex: 1;
border-bottom: none;
}
@media screen and (max-width: 500px) {
.case-wrap .case-info-wrap .info-right table tr td {
display: block;
width: 100%;
}
}
.case-wrap .case-info-wrap .info-right table tr td p {
font-size: 1rem;
}
.case-wrap .case-info-wrap .info-right table tr td .info-right-job-wrap p.info-right-job-ttl {
color: #036eb7;
padding-bottom: 10px;
font-weight: bold;
}
.case-wrap .case-info-wrap .info-right table tr td .info-right-job-wrap p.info-right-job-txt {
font-size: 0.95rem;
font-weight: normal;
}
.case-wrap .case-info-wrap .info-right table tr td .info-right-service {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.case-wrap .case-info-wrap .info-right table tr td .info-right-service p {
padding: 3px 10px;
color: #036eb7;
background: #e9eff5;
border-radius: 5px;
font-size: 0.95rem;
font-weight: bold;
}
.case-wrap .case-info-wrap .info-right table tr td span.info-right-period {
font-weight: normal;
color: #626262;
display: block;
font-size: 0.95rem;
padding-top: 5px;
}
.case-wrap .case-content-wrap {
padding-top: 70px;
}
@media screen and (max-width: 500px) {
.case-wrap .case-content-wrap {
padding: 70px 20px 0 20px;
}
}
.case-wrap .case-content-wrap h2 {
text-align: center;
font-size: 2rem;
padding-bottom: 35px;
}
.case-wrap .case-content-wrap h2 i {
padding-right: 10px;
color: #036eb7;
}
.case-wrap .case-content-wrap .case-content-inner {
border-radius: 5px;
}
@media screen and (min-width: 501px) {
.case-wrap .case-content-wrap .case-content-inner {
padding: 30px 60px;
}
}
@media screen and (max-width: 500px) {
.case-wrap .case-content-wrap .case-content-inner {
margin: 0 -20px;
padding: 5px 30px;
}
}
.case-wrap .case-content-wrap .case-content-inner ul li {
border-bottom: solid 1px #d9d9d9;
padding: 30px 0;
}
.case-wrap .case-content-wrap .case-content-inner ul li h3 {
font-weight: bold;
font-size: 1.2rem;
padding-bottom: 15px;
text-indent: -1.6em;
padding-left: 1.6em;
}
.case-wrap .case-content-wrap .case-content-inner ul li h3::before {
content: "●";
color: #036eb7;
padding-right: 10px;
}
.case-wrap .case-content-wrap .case-content-inner ul li p {
text-indent: -1.6em;
padding-left: 1.6em;
}
.case-wrap .case-content-wrap .case-content-inner ul li p::before {
content: "・";
color: #036eb7;
padding-right: 10px;
}
.case-wrap .case-content-wrap .case-content-inner ul li:last-child {
border-bottom: none;
}
.case-wrap .problem-wrap .problem-inner {
background: #f6f6f6;
}
.case-wrap .problem-wrap .problem-inner ul li p {
text-indent: 0;
padding-left: 0;
}
.case-wrap .problem-wrap .problem-inner ul li p::before {
content: none;
}
.case-wrap .propose-wrap .propose-inner {
background: #f4f8fc;
}
.case-wrap .propose-wrap .propose-inner ul.propose-content li {
border-bottom: solid 1px #d3e0e8;
}
.case-wrap .propose-wrap .propose-inner ul.propose-content li p span {
font-weight: bold;
display: inline;
text-indent: 0;
}
.case-wrap .propose-wrap .propose-inner ul.propose-content li p::before {
content: "●";
color: #036eb7;
padding-right: 10px;
}
.case-wrap .propose-wrap .propose-inner ul.propose-content li:last-child {
border-bottom: none;
}
.case-wrap .introduce-wrap .introduce-inner {
background: #f4f8fc;
}
.case-wrap .result-wrap h2 i {
color: #db5761;
}
.case-wrap .result-wrap .result-inner {
background: #fdf6f6;
}
.case-wrap .result-wrap .result-inner ul.result-content li {
border-bottom: solid 1px #f0d7d7;
}
.case-wrap .result-wrap .result-inner ul.result-content li h3::before {
content: "●";
color: #db5761;
padding-right: 10px;
}
.case-wrap .result-wrap .result-inner ul.result-content li p {
text-indent: 0;
padding-left: 0;
}
.case-wrap .result-wrap .result-inner ul.result-content li p::before {
content: none;
}
.case-wrap .result-wrap .result-inner ul.result-content li:last-child {
border-bottom: none;
}
.case-wrap .reviews-wrap {
margin-top: 70px;
background: #036eb7;
padding-bottom: 100px;
}
@media screen and (max-width: 900px) {
.case-wrap .reviews-wrap {
padding-bottom: 120px;
}
}
.case-wrap .reviews-wrap h2 {
color: white;
}
.case-wrap .reviews-wrap h2 i {
color: white;
}
.case-wrap .reviews-wrap .reviews-inner {
max-width: 880px;
width: calc(100% - 40px);
margin: 0 auto;
background: white;
position: relative;
}
.case-wrap .reviews-wrap .reviews-inner .result-illust {
position: absolute;
}
.case-wrap .reviews-wrap .reviews-inner .result-illust img {
width: 198px;
}
@media screen and (max-width: 500px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust img {
width: 140px;
}
}
@media screen and (min-width: 901px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust-1 {
left: -100px;
bottom: -80px;
}
}
@media screen and (max-width: 900px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust-1 {
left: -30px;
bottom: -120px;
}
}
@media screen and (max-width: 500px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust-1 {
bottom: -110px;
}
}
@media screen and (min-width: 901px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust-2 {
right: -80px;
bottom: -80px;
}
}
@media screen and (max-width: 900px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust-2 {
right: -10px;
bottom: -120px;
}
}
@media screen and (max-width: 500px) {
.case-wrap .reviews-wrap .reviews-inner .result-illust-2 {
bottom: -110px;
}
}
.case-wrap .reviews-wrap .reviews-inner ul.reviews-content li p {
text-indent: 0;
padding-left: 0;
}
.case-wrap .reviews-wrap .reviews-inner ul.reviews-content li p::before {
content: none;
}
.case-list-wrap {
background: #e1e8f2;
padding: 40px 0 100px 0;
}
.case-list-wrap .firstview-section-title h1 {
font-weight: bold;
text-align: center;
}
.case-list-wrap .case-list-inner {
max-width: 1100px;
width: calc(100% - 40px);
margin: 0 auto;
}
.case-list-content-wrap {
display: grid;
gap: 30px 20px;
}
@media screen and (min-width: 901px) {
.case-list-content-wrap {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 900px) {
.case-list-content-wrap {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 500px) {
.case-list-content-wrap {
grid-template-columns: 1fr;
}
}
.case-list-content-wrap .case-list-content {
border-radius: 10px;
background: white;
display: grid;
grid-template-rows: subgrid;
grid-row: span 6;
gap: 0;
}
.case-list-content-wrap .case-list-content .case-list-thum {
position: relative;
}
.case-list-content-wrap .case-list-content .case-list-thum img {
border-radius: 10px 10px 0 0;
width: 100%;
height: auto;
vertical-align: top;
}
.case-list-content-wrap .case-list-content .case-list-thum p.case-list-industry {
position: absolute;
top: 0;
left: 0;
padding: 4px 10px 5px 10px;
color: white;
background: #3b81e0;
border-radius: 10px 0 10px 0;
font-size: 0.95rem;
}
.case-list-content-wrap .case-list-content .case-list-job {
padding: 20px 20px 0 20px;
}
.case-list-content-wrap .case-list-content .case-list-job p {
font-size: 0.9rem;
padding: 3px 10px;
background: #ececec;
border-radius: 5px;
display: inline-block;
}
.case-list-content-wrap .case-list-content .case-list-title {
padding: 15px 20px 0 20px;
}
.case-list-content-wrap .case-list-content .case-list-title h2 {
text-align: left;
font-size: 1.1rem;
line-height: 1.7rem;
color: #036eb7;
}
.case-list-content-wrap .case-list-content .case-list-info-1-1, .case-list-content-wrap .case-list-content .case-list-info-1-2 {
display: flex;
gap: 30px;
border-bottom: solid 1px #e6e6e6;
padding: 15px 0;
}
.case-list-content-wrap .case-list-content .case-list-info-1-1 h3, .case-list-content-wrap .case-list-content .case-list-info-1-2 h3 {
font-size: 0.95rem;
font-weight: bold;
white-space: nowrap;
}
.case-list-content-wrap .case-list-content .case-list-info-1-1 p, .case-list-content-wrap .case-list-content .case-list-info-1-2 p {
font-size: 0.9rem;
}
.case-list-content-wrap .case-list-content .case-list-info-1-1 {
margin: 15px 20px 0 20px;
border-top: solid 1px #e6e6e6;
}
.case-list-content-wrap .case-list-content .case-list-info-1-2 {
margin: 0 20px 0 20px;
}
.case-list-content-wrap .case-list-content .case-list-info-2 {
padding: 15px 20px 22px 20px;
}
.case-list-content-wrap .case-list-content .case-list-info-2 h3 {
font-size: 0.95rem;
font-weight: bold;
padding-bottom: 15px;
}
.case-list-content-wrap .case-list-content .case-list-info-2 .case-list-info-2-txt {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.case-list-content-wrap .case-list-content .case-list-info-2 .case-list-info-2-txt p {
font-size: 0.85rem;
border-radius: 5px;
color: #036eb7;
background: #e9eff5;
padding: 3px 10px;
}