@charset "UTF-8";

body {
font-family: "Noto Sans JP", "メイリオ", sans-serif;
}
@media screen and (max-width: 767px) {
.pc-min768 {
display: none;
}
}
@media screen and (min-width: 768px) {
.sp-max767 {
display: none;
}
}
.white-bg {
background: #ffffff;
padding: 90px 0 80px 0;
}
.gray-bg {
background: #f9f9f9;
padding: 90px 0 80px 0;
}
@media screen and (max-width: 767px) {
.gray-bg {
padding: 90px 0 2rem 0;
}
}
.sky-bg {
background: #0069ce;
padding: 80px 0;
}
@media screen and (max-width: 767px) {
.sky-bg {
padding: 60px 0;
}
}
.consultation-all .all-inner {
max-width: 1000px;
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
.consultation-all .all-inner {
padding: 0 1.5rem;
}
}
@media screen and (min-width: 768px) {
.consultation-all .cs-main-wrap {
background: #fff url(//www.comitx.jp/wp-content/themes/comitx/images/consultation/main-bg__.png) no-repeat center bottom;
}
}
@media screen and (max-width: 767px) {
.consultation-all .cs-main-wrap {
background: #fff url(//www.comitx.jp/wp-content/themes/comitx/images/consultation/main-bg_sp.png) no-repeat center top;
}
}
.consultation-all .cs-main-wrap .cs-main-inner {
padding: 50px 0 30px 0;
}
@media screen and (min-width: 768px) {
.consultation-all .cs-main-wrap .cs-main-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: distribute;
justify-content: center;
}
}
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap {
text-align: center;
margin:0 20px;
}
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap .main-ttl h1 {
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: clamp(2rem, 3.6vw, 4rem);
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
-webkit-font-smoothing: auto;
white-space: nowrap;
letter-spacing: 0.1rem;
text-align: center;
}
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap .main-ttl h1 span.h1-sub img {
width: 214px;
padding-bottom: 10px;
}
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap p.main-txt {
font-size: clamp(0.9rem, 2vw, 1.1rem);
line-height: clamp(1.7rem, 3vw, 2rem);
padding: 40px 0;
text-align: center;
}
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap a.main-btn {
display: inline-block;
font-size: clamp(1.1rem, 2vw, 1.3rem);
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 20px 0;
width: 100%;
border-radius: 50px;
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#5a9ad6), color-stop(50%, #5a9ad6), color-stop(50%, #2c7bc5), to(#2c7bc5));
background: linear-gradient(180deg, #5a9ad6 0%, #5a9ad6 50%, #2c7bc5 50%, #2c7bc5 100%);
text-shadow: 1px 2px 3px #235f97;
-webkit-filter: drop-shadow(0 3px 4px #a6ccef);
-moz-filter: drop-shadow(0 3px 4px #a6ccef);
-ms-filter: drop-shadow(0 3px 4px #a6ccef);
filter: drop-shadow(0 3px 4px #a6ccef);
}
@media screen and (max-width: 767px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap a.main-btn {
width: 400px;
}
}
@media screen and (max-width: 500px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap a.main-btn {
padding: 20px 0;
width: 100%;
}
}
.consultation-all .cs-main-wrap .cs-main-inner .main-txt-wrap a.main-btn:after {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
color: #fff;
padding-left: 15px;
}
@media screen and (max-width: 767px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-left {
margin-right: 20px;
}
}
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-left img {
width: 364px;
max-width: unset;
}
@media screen and (max-width: 500px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-left img {
width: 80%;
}
}
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-right img {
width: 463px;
max-width: unset;
}
@media screen and (max-width: 500px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-right img {
width: 80%;
}
}
@media screen and (max-width: 767px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-sp {
padding-top: 30px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: distribute;
justify-content: space-around;
}
}
.consultation-all .all-h2 {
color: #0069ce;
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: clamp(1.6rem, 3vw, 1.9rem);
line-height: clamp(2.3rem, 3.5vw, 3.4rem);
margin-left: -40px;
text-align: center;
}
@media screen and (max-width: 500px) {
.consultation-all .all-h2 {
margin-left: 0;
}
}
.consultation-all p.all-h2sub {
text-align: center;
font-size: clamp(0.9rem, 2vw, 1.1rem);
line-height: clamp(1.2rem, 2.6vw, 1.8rem);
padding: 5px 0 0 0;
}
.consultation-all .example-h2:before {
font-family: "Font Awesome 5 Free";
content: '\f086';
font-weight: 900;
padding: 0 20px 0 0;
}
@media screen and (max-width: 500px) {
.consultation-all .example-h2:before {
display: block;
padding: 0 0 10px 0;
font-size: 2.5rem;
}
}
.consultation-all .example-list-wrap {
width: 100%;
padding: 50px 0;
margin-top: 50px;
background: white;
border: solid 3px #2da5c7;
border-radius: 10px;
-webkit-filter: drop-shadow(1px 3px 10px rgba(45, 165, 199, 0.1));
-moz-filter: drop-shadow(1px 3px 10px rgba(45, 165, 199, 0.1));
-ms-filter: drop-shadow(1px 3px 10px rgba(45, 165, 199, 0.1));
filter: drop-shadow(1px 3px 10px rgba(45, 165, 199, 0.1));
}
@media screen and (max-width: 1000px) {
.consultation-all .example-list-wrap {
padding: 1.5rem 0;
}
}
.consultation-all .example-list-wrap ul.example-list {
max-width: 800px;
margin: 0 auto;
list-style: none;
padding: 0;
}
@media screen and (max-width: 1000px) {
.consultation-all .example-list-wrap ul.example-list {
padding: 0 2rem;
}
}
.consultation-all .example-list-wrap ul.example-list li {
padding: 20px 10px;
border-bottom: solid 1px #dadada;
font-size: clamp(0.9rem, 2vw, 1.1rem);
line-height: clamp(1.2rem, 2.6vw, 1.8rem);
padding-left: 1.9rem;
text-indent: -1.9rem;
}
.consultation-all .example-list-wrap ul.example-list li span.marker {
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #fffbb2));
background: linear-gradient(transparent 50%, #fffbb2 50%);
}
.consultation-all .example-list-wrap ul.example-list li::before {
font-family: "Font Awesome 5 Free";
content: '\f058';
font-weight: 900;
color: #2da5c7;
padding-right: 0.8rem;
font-size: clamp(1rem, 2vw, 1.2rem);
}
.consultation-all .example-list-wrap ul.example-list li:last-child {
border-bottom: none;
}
.consultation-all .sc-step-h2 {
padding-bottom: 40px;
}
.consultation-all .sc-step-h2:before {
font-family: "Font Awesome 5 Free";
content: '\f109';
font-weight: 900;
padding: 0 20px 0 0;
}
@media screen and (max-width: 500px) {
.consultation-all .sc-step-h2:before {
display: block;
padding: 0 0 10px 0;
font-size: 2.5rem;
}
}
.consultation-all .sc-step-box {
padding: 50px;
background: white;
border-radius: 10px;
}
@media screen and (min-width: 768px) {
.consultation-all .sc-step-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
@media screen and (max-width: 500px) {
.consultation-all .sc-step-box {
padding: 50px 2rem;
}
}
@media screen and (min-width: 768px) {
.consultation-all .sc-step-box .sc-step-txt {
padding-right: 80px;
}
}
@media screen and (max-width:1200px ) and (min-width: 768px) {
.consultation-all .sc-step-box .sc-step-txt {
padding-right: 0;
margin-right:5%;
width:50%;
}
.consultation-all .sc-step-box .sc-step-img{
width: 50%;
}
}
@media screen and (max-width: 767px) {
.consultation-all .sc-step-box .sc-step-txt {
padding-bottom: 50px;
}
}
.consultation-all .sc-step-box .sc-step-txt h3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: clamp(1.1rem, 3vw, 1.6rem);
line-height: clamp(1.7rem, 3.5vw, 2.3rem);
padding-bottom: 30px;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
.consultation-all .sc-step-box .sc-step-txt h3 img {
width: 84px;
padding-right: 20px;
}
.consultation-all .sc-step-box .sc-step-txt p {
font-weight: normal;
font-size: clamp(1rem, 2vw, 1.1rem);
line-height: clamp(1.7rem, 2.6vw, 1.8rem);
}
.consultation-all .sc-step-box .sc-step-txt a.sc-step-link {
color:#0069ce;
padding: 0 5px;
}
.consultation-all .sc-step-box .sc-step-txt a.sc-step-link::after {
font-family: "Font Awesome 5 Free";
content: '\f35d';
font-weight: 900;
padding-left: 10px;
}
.consultation-all .sc-step-box .sc-step-txt a.sc-step-link:hover{
color:#0069ce;
opacity:0.8;
}
.consultation-all .sc-step-box .sc-step-img img {
width: 358px;
max-width: unset;
}
@media screen and (max-width: 767px) {
.consultation-all .sc-step-box .sc-step-img img {
width: 100%;
}
}
.consultation-all .sc-step-box-arrow {
position: relative;
margin-bottom: 24px;
}
.consultation-all .sc-step-box-arrow::after {
position: absolute;
bottom: -38px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 10;
content: "";
display: inline-block;
width: 33px;
height: 45px;
background: url(//www.comitx.jp/wp-content/themes/comitx/images/consultation/step-arrow.png) no-repeat;
background-size: contain;
}
.consultation-all .reserve-wrap {
text-align: center;
}
.consultation-all .reserve-wrap h2.reserve-ttl {
font-size: clamp(1.1rem, 3vw, 1.4rem);
line-height: clamp(1.7rem, 3.5vw, 2rem);
padding-bottom: 10px;
color: white;
font-weight: bold;
-webkit-font-smoothing: antialiased;
text-align: center;
}
@media screen and (max-width: 767px) {
.consultation-all .reserve-wrap h2.reserve-ttl {
padding-bottom: 0;
}
}
.consultation-all .reserve-wrap h2.reserve-ttl::before {
content: '';
display: inline-block;
width: 14px;
height: 29px;
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/consultation/left-slash.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
margin-right: 20px;
}
.consultation-all .reserve-wrap h2.reserve-ttl::after {
content: '';
display: inline-block;
width: 14px;
height: 29px;
background-image: url(//www.comitx.jp/wp-content/themes/comitx/images/consultation/right-slash.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
margin-left: 20px;
}
.consultation-all .reserve-wrap a.reserve-btn {
display: inline-block;
font-size: clamp(1.2rem, 2.1vw, 1.5rem);
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.1rem;
padding: 26px 0;
width: 500px;
border-radius: 50px;
color: #0069ce;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #f2f2f2), to(#f2f2f2));
background: linear-gradient(180deg, white 0%, white 50%, #f2f2f2 50%, #f2f2f2 100%);
-webkit-filter: drop-shadow(0 6px 7px #2a7dcb);
-moz-filter: drop-shadow(0 6px 7px #2a7dcb);
-ms-filter: drop-shadow(0 6px 7px #2a7dcb);
filter: drop-shadow(0 6px 7px #2a7dcb);
}
@media screen and (max-width: 500px) {
.consultation-all .reserve-wrap a.reserve-btn {
width: 100%;
}
}
.consultation-all .reserve-wrap a.reserve-btn:after {
font-family: "Font Awesome 5 Free";
content: '\f073';
font-weight: 900;
font-size: clamp(1rem, 2.5vw, 1.6rem);
color: #0069ce;
padding-left: 40px;
}
@media screen and (max-width: 1200px) {
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-right img{
width:100%;
}
.consultation-all .cs-main-wrap .cs-main-inner .main-illust-left img{
width: 100%;;
}
}
@media screen and (max-width: 767px) {
.consultation-all .reserve-wrap a.reserve-btn:after {
padding-left: 10px;
}
}