@charset "utf-8";

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--text-color: #333;				/*テキストカラー*/

	--primary-color: #0693e3;		/*テンプレートのメインとなる色*/
	--primary-text-color: #fff;		/*メインカラーの上で使うテキスト色*/
	
	--global-space: 5vw;			/*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}

img.aligncenter {
    margin: 0 auto 0px;
}


div .br50{
  margin-bottom:50px;
}

div .br100{
  margin-bottom:100px;
}

/* haderとmainエリアの境目 */
#st-headerbox .st-header-content {
    padding: 0;
}


/*h2内の小文字部分*/
main h2 .hosoku {
	display: block;font-weight: normal;
	font-size: 0.3em;	/*親要素の40%のサイズに*/
}

.entry-title {
	margin-bottom: 0 !important;
}

.single .entry-content {
    padding-top: 0;
}

.entry-content > div {
    margin-bottom: 10px;
}

.colum1 main {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}


/* パソコン／スマホの実装切り替え */
.AREA_PC {
    display: inline;
}

.AREA_SP {
    display: none;
}

#st-header{
	max-width: none;
}

#mainimg p {
	font-size: 2vw !important;
	line-height: 1.7;
}

select {
    border: 1px solid #ccc;
}

#content {
	max-width: none !important;
}


#s-navi dt.trigger .op.active{
	z-index: 999999;
	color: #fff;
	position: relative;
	margin-right: 15px;
}


/*section
---------------------------------------------------------------------------*/
section {
	max-width: 1060px;
    	margin: 0 auto;
	margin-bottom: 50px;
}

section p {
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	margin-bottom: 50px;
}

section h2{
    font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
    font-size: 3rem;
    letter-spacing: 0.1em;
    color: var(--primary-color);
}

section h2 .hosoku {
	display: block;
	font-weight: normal;
	font-size: 0.7em;
}





/*ITソリューション事業のメイン画像
---------------------------------------------------------------------------*/
#top_mv {
    margin-top: -18px;
    margin-bottom: 1px;
    width: 100%;
    height: 600px;
    display: flex;
}

#top_mv .top_title {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#top_mv .top_title .top_title_inner {
    width: 470px;
    margin: 0 auto;
}

#top_mv .top_title_inner .prodact_title p {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 35px;
}

#top_mv .top_title_inner .prodact_name p {
	font-size: 60px;
	margin-bottom: 40px;
}

#top_mv .top_title_inner p {
    font-size: 17px;
    font-weight: 600;
    color: #2561BB;
}

#top_mv .mv_image {
    width: 60%;
    display: flex;
    flex-direction: column;
}

#top_mv .mv_image .mv_copy {
    height: 85%;
    background: url(../images/service_01_top.jpg) no-repeat top center;
    background-size: cover;
}

#top_mv .mv_image .mv_copy .catch_phrase{
	font-size: 2.7vmax;
	color: #FF007F;
	font-weight: bold;
	margin-top: 10%;
	margin-left: 5%;
	font-family: "Noto Serif JP", serif;
}

#top_mv .mv_image .mv_copy .catch_prodact{
	margin-top: 15px;
	font-size: 2.7vmax;
	color: #00A3D8;
	font-weight: bold;
	padding-left: 8%;
}

#top_mv .mv_image .mv_copy .catch_prodact p{
	line-height: 1;
	font-size: 2.7vmax;
	font-family: "Noto Serif JP", serif;
}

#top_mv .mv_image .prodact_msg {
	font-size: min(3.3vmax, 4rem);
	line-height: normal;
	font-weight: bold;
	color: #fff;
	background-color: #FF8000;
	padding-left: 6%;
	height: 11%;
	font-family: "Noto Serif JP", serif;
}








.st-mybtn.st-reflection {
	margin-top: 10px;
}







.contents {
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
	padding: 20px 0px;
    background: linear-gradient(90deg, #f28df7 0%, #b951ab 41.44%, #c32564 102%);
    margin-bottom: 30px;
}

.contents .title {
    font-size: 2.5rem;
    line-height: 100%;
    letter-spacing: .07em;
    font-weight: normal;
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    color: #fff;
    border: none;
}

.contents .title:after {
    content: "";
    display: block;
    width: 270px;
    background-color: #fff;
    height: 2px;
    margin: 18px auto;
}

.contents .subtitle {
    font-size: 1.4rem;
    letter-spacing: 0.98px;
    font-weight: 500;
}





.contents_p {
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
	padding: 20px 0px;
    background: linear-gradient(90deg, #f3577d 0%, #f1688a 41.44%, #f78da7 102%);
    margin-bottom: 30px;
}

.contents_p .title {
    font-size: 2rem;
    line-height: 100%;
    letter-spacing: .07em;
    font-weight: normal;
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    color: #fff;
    border: none;
}

.contents_p .title:after {
    content: "";
    display: block;
    width: 300px;
    background-color: #fff;
    height: 2px;
    margin: 18px auto;
}

.contents_p .subtitle {
    font-size: 1.8rem;
    letter-spacing: 0.98px;
    font-weight: 500;
}



h1.entry-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    text-align: center;
    padding: 20px 0px;
    background: linear-gradient(90deg, #5b65e1 0%, #204bb7 41.44%, #0c53a1 102%);
    line-height: 2.5em !important;
}





/*お問合せエリア
---------------------------------------------------------------------------*/
#contact-text{
float:left;
}

#contact-list{
float: left;
display: block;
}

#contact-img{
    float: left;
    width: 35%;
    max-width: 300px;
    margin-left: 5%;
    margin-top: 25px;
}

#contact-tel{
	display: flex;
	height: 60px;
}

.contact_bun1 {
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "07￠3μ3AOaaI", meiryo, sans-serif !important;*/
    font-size: 1.6rem;
    line-height: 40px;
    margin-bottom: 10px;
}

.contact_bun2 {
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "07やさしさアンチック", meiryo, sans-serif !important;*/
    font-size: 2rem;
    color: #0058bf;
    margin-left: 10%;
    margin-bottom: 3%;
}
























/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/

/*table全般の設定*/
table {border-collapse:collapse;}

.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: #333;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #333;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 5rem;		/*テーブルの下に空けるスペース。5文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #333;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/

















/*list-grid1
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-grid {
	display: grid;
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
}

/*ボックス１個あたり*/
.list-grid .list {
    display: grid;
}

/*ボックス内のp要素*/
.list-grid .list p {
	font-size: 1.1rem;	/*文字サイズを85%に*/
}

	/*画面幅500px以上の追加指定---------------------------------------------------------------------------*/
	@media screen and (min-width:500px) {

	/*listブロック全体を囲むブロック*/
	.list-grid {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定---------------------------------------------------------------------------*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	.list-grid2 {
		grid-template-columns: repeat(2, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid .list {
	padding: 0.5rem;		/*ボックス内の余白*/
	background: #fff;		/*背景色*/
    	grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}


/*ボックス内のfigure画像*/
.list-grid .list figure img {
	margin-bottom: 1.0rem;	/*画像の下に空けるスペース*/
}

#two-block{
	grid-template-columns: repeat(2, 1fr);
}

figure {margin: 0;}

/*サービス画像専用*/
.list-grid .service {
	/*flex: 1;*/
	/*padding: 20px 25px;*/
	/*border: 1px solid #E5E5E5;*/
	margin-top: 2rem;
}

.list-grid .service figure {
	margin-bottom: 1rem;
}

.contents-h3 {
	padding-top: 0px !important;
	margin-top: 15px !important;
	padding-bottom: 15px !important;
	border-bottom: solid 1px #E5E5E5 !important;
}







/*ボタン（btnと、btn-border-radius）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn a,
.btn-border-radius a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color) !important;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-text-color) !important;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;
}

/*ボタン共通（マウスオン時に少し明るくする）*/
.btn a:hover,
.btn-border-radius a:hover {
	filter: brightness(1.2);
}

/*btn-border-radiusの上書き*/
.btn-border-radius a {
	display: inline-block;
	padding: 0.5rem 2rem !important;	/*ボタン内の余白*/
	border-radius: 100px;	/*角丸の指定。適当に大きければOK。*/
	background: #f53e72 !important;
}


/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-text-color);	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	padding-top: 5vw;		/*ボックス内の上に空ける余白。お好みで調整して下さい。*/
	padding-bottom: 5vw;	/*ボックス内の下に空ける余白。お好みで調整して下さい。*/
	margin-top: 10vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
	margin-bottom: 10vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
	
	/*以下は変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}
.bg1 a {
	color: inherit;
}

/*以下のheightの行が傾斜の角度です。vwという単位は画面幅に対してで、画面幅100%＝100vwになります。
つまり、画面幅に対して常に同じ傾斜具合になります。1pxの数字は時々隙間が発生するのでそれを防ぐ為の措置です。
傾斜（height）を変更したい場合は、下にある「.bg1::before」のtopと「.bg1::after」のbottomの数字も変更。*/
.bg1::before, .bg1::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}

.bg1::before {
	top: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 100%, 100% 0, 100% 100%);	/*三角形の形を作っています*/
}

.bg1::after {
	bottom: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
}


.service div{
	font-size: 2rem;
	font-weight:  bold;
}

















/*トップイメージ
---------------------------------------------------------------------------*/
#mv {
    background: url(../images/top_img_pc.png) no-repeat center center;
    background-size: cover;
    padding: 80px 0 50px 0;
}

#mv .container {
    max-width: calc(1080px + 180px);
    padding: 0 40px;
    z-index: 1;
}

.container {
    max-width: calc(1080px + 40px);
    margin: 0 auto;
    width: 80%;
    padding: 0 20px;
    position: relative;
}

#mv .txt1 {
    font-size: clamp(14px, 3vw, 23px);
    font-weight: bold;
    color: #1959E1;
    background: #ffffff;
    display: inline-block;
    margin: 0 0 20px 0;
    padding: 4px 15px;
}

#mv .txt2 {
    font-size: clamp(40px, 6.6vw, 50px);
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 30px 0;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

.sp-only {
    display: none;
}

#mv .txt3 {
    font-size: clamp(14px, 2.9vw, 22px);
    font-weight: 300;
    color: #ffffff;
    margin: 0 0 70px 0;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

#mv .btn_area {
    display: flex;
    margin: 0 0 50px 0;
    align-items: flex-start;
}

#mv .btn_area .btn_contact {
    background: url(../images/arrow_white.svg) no-repeat center right 30px #E87539;
    color: #ffffff;
    position: relative;
    margin: 0 15px 0 0;
}
#mv .btn_area .btn_contact, #mv .btn_area .btn_request {
    border-radius: 2px;
    font-size: clamp(18px, 3.2vw, 24px);
    font-weight: bold;
    padding: 10px 70px 10px 30px;
}

#mv .btn_area .btn_request {
    background: url(../images/arrow_blue.svg) no-repeat center right 30px #ffffff;
    color: #1959E1;
}

#mv .emblem_area {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    display: inline-flex;
}




/*契約までのフロー
---------------------------------------------------------------------------*/
.flow_section {
    /*border-top: 5px solid #05a;*/
    background: url(images/flow_section_bg.png);
    /*padding: 60px 20px;*/
}

.flow_section .flow {
    margin: 40px 0;
    position: relative;
}

.flow_section .flow .badge {
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    border-radius: 50%;
    background-color: #05a;
    background: linear-gradient(90deg, #f78da7, #e92f3d);
    padding: 16px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: -1%;
    transform: translate3d(0, -50%, 0);
}

.flow_section .flow .badge div {
    display: block;
    font-size: 45px;
}

.flow_section .flow .step_no {
    width: 70px;
    /* height: 70px; */
    color: #fff;
    /* font-size: 20px; */
    font-weight: bold;
    text-align: center;
    /* line-height: 1.1; */
    /* border-radius: 50%; */
    /* background-color: #05a; */
    /* background: linear-gradient(90deg, #05a, #028); */
    padding: 16px;
    margin-top: -34px;
    position: absolute;
    top: 50%;
    left: -2%;
    /* transform: translate3d(0, -50%, 0); */
    /* display: block; */
    font-size: 35px;
}


.flow_section .flow .badge::after {
    position: absolute;
    top: 50%;
    right: -24px;
    content: "";
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-left: 20px solid #e92f3d;
    margin: -10px 0 0 0;
}

.flow_section ul, dl, ol {
    list-style: none;
}

.flow_section ul {
    display: flex;
    flex-flow: wrap;
    width: 85vw;
    max-width: 920px;
    border: 2px solid #f1688a;
    margin: 20px 0 20px 80px;
    display: flex;
    flex-flow: wrap;
    padding: 0;
}


.wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}


.flow_section .step1 ul li:nth-child(1) {
    background: url(http://bcw.jp/wp-content/uploads/2023/05/shutterstock_1921198955-scaled.jpg) center center;
    background-size: cover;
}

.flow_section .step2 ul li:nth-child(1) {
    background: url(http://bcw.jp/wp-content/uploads/2023/08/4193263_s.jpg) center center;
    background-size: cover;
}

.flow_section .step3 ul li:nth-child(1) {
    background: url(http://bcw.jp/wp-content/uploads/2023/08/25401135_s.jpg) center center;
    background-size: cover;
}

.flow_section .step4 ul li:nth-child(1) {
    background: url(http://bcw.jp/wp-content/uploads/2023/08/27282599_s.jpg) center center;
    background-size: cover;
}

.flow_section .step5 ul li:nth-child(1) {
    background: url(http://bcw.jp/wp-content/uploads/2023/08/201255183846.jpg) center center;
    background-size: cover;
}


.flow_section ul li:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 26px 0;
}

.flow_section ul li:nth-child(3) {
    flex-grow: 2;
    font-size: 14px;
    background: #fff;
    padding: 20px;
}

.flow_section ul li {
    width: 20%;
    background: #f1688a;
}

h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2), .h2modoki {
    padding-right: 0;
    padding-left: 0;
}















/*PC画面の設定
-------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 960px) {

.colum1 main {
        margin: 0;
}

.ContentOver-box {
    margin: 0px calc(49% - 50.5vw);
    width: 100vw;
}

#top_mv .mv_image .mv_copy {
    height: 90%;
}

#top_mv .mv_image .prodact_msg {
    height: 10%;
}

#top_mv .mv_image .prodact_msg {
    font-size: min(2.9vmax, 3rem);
}


}


/*タブレット画面の設定
-------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

#top_mv {
        flex-direction: column-reverse;
        height: auto;
}

#top_mv .mv_image {
        height: 617px;
}

#top_mv .mv_image, #top_mv .top_title {
        width: 100%;
}

#top_mv .mv_image .prodact_msg {
    	font-size: 7.5vw;
        height: 13%;
}

#top_mv .mv_image .mv_copy .catch_phrase {
    	font-size: 8vw;
	margin-top: 10%;
	margin-left: 5%;
}

#top_mv .mv_image .mv_copy .catch_prodact {
    	font-size: 7vw;
	margin-left: 5%;
}

#top_mv .mv_image .mv_copy .catch_prodact p {
    line-height: 1.5;
    font-size: 4.7vmax;
}

#top_mv .top_title .top_title_inner {
    margin-top: 30px;
}


}



@media only screen and (max-width: 600px) {


/* パソコン／スマホの実装切り替え */
.AREA_PC {
    display: none;
}

.AREA_SP {
    display: inline;
}

header {
    text-align: left;
}


/*契約までのフロー
---------------------------------------------------------------------------*/
.flow_section {
    padding: 0px;
}

.flow_section .flow {
    margin: 40px 0;
    position: relative;
}

.flow_section .flow .badge {
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 12px;
    top: 17%;
    left: -3px;
}

.flow_section .flow .step_no {
    top: 14%;
    left: -3%;
}

.flow_section ul {
    display: flex;
    flex-flow: wrap;
    width: auto;
    border: 2px solid #f1688a;
    margin: 20px 0 20px 60px;
    display: flex;
    flex-flow: wrap;
}

.flow_section ul li:nth-child(1) {
    background: #fff;
    border-bottom: 2px solid #f1688a;
}

.flow_section ul li:nth-child(3) {
    flex-grow: 2;
    font-size: 14px;
    background: #fff;
    padding: 20px;
}

.flow_section ul li {
    width: 50%;
    line-height: 1.6;
}

















}




/*スマホ画面の設定
-------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:480px){


/*親要素を超えて表示したい子要素コンテンツ*/
.ContentOver-box {
	margin: 0px calc(48% - 50vw);
}

#mainimg {
	padding-top: 100% !important;
}

#mainimg h1 {
    font-size: 10vw !important;
}

#mainimg p {
    font-size: 4vw !important;
}

#mainimg div div {
    width: 78vw !important;
}


.contents .title {
    font-size: 1.5rem !important;
}

.contents .subtitle {
    font-size: 1rem !important;
}

#two-block{
    grid-template-columns: repeat(1, 1fr);
}





/* メインエリアの調整 */

#top_mv .top_title_inner p {
    font-size: 17px;
}

#top_mv .top_title .top_title_inner {
    width: 96%;
}

#top_mv .top_title_inner .prodact_title p {
	margin: 15px 0 15px 10px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5;
}

#top_mv .top_title_inner .prodact_name p {
	font-size: 55px;
}

.prodact_title {
    margin-bottom: 15px;
}

.prodact_title_img {
	margin: 10px;
}

#top_mv .mv_image {
        height: 460px;
}

#top_mv .mv_image .prodact_msg {
	padding-left: 5%;
	height: 12%;
}

#top_mv .mv_image .mv_copy .catch_phrase {
        font-size: 2.3rem;
        margin-top: 10%;
        margin-left: 1%;
}

#top_mv .mv_image .mv_copy .catch_prodact {
        font-size: 8vw;
        margin-top: 130px;
}

#top_mv .mv_image .mv_copy .catch_prodact p {
        line-height: 1;
        font-size: 2.3rem;
}



/* ボタン幅の調整 */
.st-mybtn.st-btn-default {
	min-width: 80%;
}

section {
	margin-right: 0.5rem;
	margin-left: 0.5rem;
}

.list-grid .service {
    margin-top: 0.5rem;
    margin-bottom: 3rem;
}

.list-grid .list {
        margin-top: 0.5rem;
        margin-bottom: 3rem;
}





}