@charset "UTF-8";
/*
Theme Name: 日本データ医療事務LP
Author: 株式会社メックコミュニケーションズ
Author URI: https://www.mec-com.co.jp
Date: 2025-06-23
*/


/*color
-----------------------------------------------------------------------------------------*/
body{
/*カラー*/
	--color_sora:#abdbf3;/*空色*/
	--color_hada:#FDF5E6;/*肌色*/
	--color_ao:#036eb7;/*青色*/
	--color_mizu:#eef8fd;/*水色*/
	--color_hai:#f7f7f7;/*灰色*/
	--color_ki:#FFF000;/*黄色*/
	--color_or:#f7c066;/*オレンジ*/
	--color_or2:#f29600;/*濃オレンジ*/
/*em*/
	--color_notice:var(--color_ki);
/*テキストリンク*/
	--color_link:#035bdb;
}



/*base
-----------------------------------------------------------------------------------------*/
/*-------------------------btn*/
.btn{
	max-width:520px;
	height:80px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:10px;
	background:var(--color_ao);
	border:1px solid var(--color_ao);
	color:#FFF;
	transition:all 0.3s;
}
.btn.bg_w{
	color:var(--color_ao);
}
.btn:hover{
	filter: saturate(200%);
}
.btn.bg_w:hover{
	background:var(--color_ki);
}
@media screen and (max-width: 767px) {
	.btn{height:60px;}
}
/*-------------------------entry_block*/
.entry_block{
	position:relative;
	z-index:20;
}
.entry_block ul{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:min(3vw , 40px);
	padding:0 min(4vw , 50px);
}
.entry_block li{
	width:520px;
}
@media screen and (max-width: 767px) {
	.entry_block ul{flex-direction:column;gap:10px;}
	.entry_block li{width:340px;}
}
/*-------------------------dot*/
.dot li{
	font-size:inherit;
	margin-left:1em;
	font-weight:400;
}
.dot li:before{ 
	margin-left:-1em;
	display:inline-block; 
	content:'';
	width:1em;
	height:1em;
	background:rgba(0,0,0,1);
	border-radius:50%;
	transform:scale(0.3) translateY(0.7em);
}
.tx_w li:before{ 
	background:#FFF;
}
/*-------------------------nami*/
.nami{
	margin-top:-2px;
}
.nami_sora::before{background-image:url("images/nami_sora.svg");}
.nami_ao::before{background-image:url("images/nami_ao.svg");}
.nami_hai::before{background-image:url("images/nami_hai.svg");}
.nami_mizu::before{background-image:url("images/nami_mizu.svg");}
.nami::before{
	content:"";
	display:block;
	width:100%;
	aspect-ratio:20 / 1;
	background-size:cover;
	margin-bottom:calc(80px - min(2vw , 80px));
}
@media screen and (max-width: 767px) {
.nami::before{
	aspect-ratio:8 / 1;
	background-size: 100% 100%;
	margin-bottom:0;
}
}
/*-------------------------kumo*/
.kumo{
}
@media screen and (max-width:1200px) {
.kumo{display:none;}
}
.kumo1{top:calc(50% - 950px);}
.kumo2{top:calc(50% - 250px);}
.kumo3{top:calc(50% - 1100px);}
.kumo4{top:calc(50% - 500px);}
.kumo5{top:calc(50% + 400px);}
/*-------------------------tx_check*/
.tx_check{
	font-size:min(3.6vw , 4rem);
	text-align:center;
	position:relative;
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin-bottom:min(4vw , 50px);
}
.tx_check::before{
	content:"";
	display:block;
	height:min(12vw , 180px);
	aspect-ratio:1 / 1;
	background:url("images/check.svg") center no-repeat;;
	background-size:contain;
	position:absolute;
	left:0;
}
@media screen and (max-width: 767px) {
.tx_check{font-size:min(5.2vw , 2.8rem);margin-bottom:min(2.5vw , 30px);}
.tx_check::before{
	aspect-ratio:auto;
	width:100%;
	height:90px;
	position:relative;
	margin-bottom:5px;
}
}
/*-------------------------list_box*/
.list_box{
	gap:min(3vw , 50px);
}
.list_box > li{
	padding:min(2.4vw , 30px);
	border-radius:10px;
}
.list_box .img{
	background:#FFF;
	text-align:center;
	padding:15px;
	width:100%;
	aspect-ratio:5 / 3;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:15px;
}
.list_box .img img{
	max-width: auto;
	max-height: 100%;
}
@media screen and (max-width: 767px) {
.list_box{
	gap:max(3vw , 10px);
}
.list_box > li{
	padding:max(3vw , 20px);
	border-radius:6px;
}
.list_box .img{
	padding:10px;
	aspect-ratio:auto;
	height:180px;
}
}



/*トップメイン
-----------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {/*pc----------*/
.topmain .frame{
	max-width:1500px;
	padding:30px 50px;
}
.topmain h1{
	font-size:min(6.4vw, 7rem);
}
.topmain .mainimg{
	position:absolute;
	z-index:-1;
	right:-50px;
	bottom:50px;
	max-width:53vw;
}
.topmain h3{
	max-width:60vw;
}
/*
@media screen and (max-width: 1200px) {
	.topmain .mainimg{max-width:100%;padding-left:500px;right:-4vw;height:500px;display:flex;align-items:center;}
}
@media screen and (max-width: 1000px) {
	.topmain h2,
	.topmain h2 + p,
	.topmain h3{max-width:600px;}
	.topmain h3{margin-top:25px;}
	.topmain .mainimg{padding-left:430px;bottom:220px;}
}
*/
}
@media screen and (max-width: 767px) {/*sp----------*/
	.topmain .frame{padding:30px 15px;text-align:center;}
	.topmain h1{font-size:min(6.8vw, 4rem);text-align:center;margin:0 -15px;}
	.topmain .mainimg{margin:5vw auto;width:min(90vw , 500px);}
@media screen and (max-width: 480px) {
	.topmain .frame{text-align:left;}
}
}
/*-------------------------予告*/
.topmain .yokoku{
	padding:75px 0;
	padding-right:40%;
}
@media screen and (max-width: 767px) {
.topmain .yokoku{padding:30px 0 0 0;text-align:center;}
}
/*-------------------------リリースキャンペーン*/
.topmain .campaign{
	display:flex;
	text-align:left;
}
.topmain .campaign .block{
	background:#FFF;
	position:relative;
	top:0;
	left:0;
	max-width:100%;
	border-radius:10px;
	box-shadow: 8px 8px 0 rgba(0,0,0,0.1);
	transition:all 0.3s;
}
.topmain .campaign a:hover{
	box-shadow: unset;
	transform: translate(8px,8px);
}
.topmain .campaign a:hover .btn{
	filter: saturate(200%);
}
@media screen and (max-width: 767px) {
	.topmain .campaign{justify-content:center;}
}

/*問題提起
-----------------------------------------------------------------------------------------*/
/*-------------------------更新トラブル*/
.trouble .list_box p{
	font-size:min(4.4vw , 1.8rem);
	text-align:center;
	margin:0 -10px;
}
@media print, screen and (min-width: 768px) {
.trouble .list_box p{
	font-size:min(2.1vw , 2.2rem);
	display:flex;
	justify-content:center;
	align-items:center;
	height:4.5em;
	margin-bottom:-0.2em;
}
}
/*-------------------------さらに*/
.sarani{
	margin-top:min(5vw , 80px);
}
.sarani .tx_check::before{
	left:auto;
	right:-20px;
}
/*リスク*/
.risk{
	position:relative;
	padding:min(3vw , 35px);
	padding-top:min(2vw , 25px);
	background:#c8c9ca;
	margin-top:40px;
}
.risk::before {
	content:"";
	position:absolute;
	top:-39px;
	left:50%;
	transform:translateX(-50%);
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	border-bottom:40px solid #c8c9ca;
}
.risk ul{
	display:flex;
	gap:min(1.5vw , 30px);
	margin-top:10px;
}
.risk li{
	background:#FFF;
	width:100%;
	padding:10px;
}
.risk li + li::before{
	content:"";
	display:block;
	width:min(4vw , 50px);
	aspect-ratio:5 / 3;
	background:url("images/next.svg") center no-repeat;
	background-size:contain;
	position:absolute;
	margin:min(2.5vw , 30px) 0 0 max(-4vw , -50px)
}
.risk li p{
	font-size:min(1.9vw , 2.2rem);
	height:4em;
	display:flex;
	justify-content:center;
	align-items:center;
}
@media screen and (max-width: 899px) {
	.risk li{padding:5px;}
	.risk li p br.none{display:block;}
	.risk li p{font-size:1.8rem;height:5em;}
}
@media screen and (max-width:600px) {
	.risk{padding:25px;padding-top:20px;margin-top:30px;}
	.risk::before {top:-30px;transform:translateX(-50%) scale(75%);}
	.risk ul{gap:30px;flex-wrap:wrap;}
	.risk li img{width:240px;}
	.risk li + li::before{width:40px;height:30px;transform:rotate(90deg);left:50%;margin:-30px 0 0 -20px;}
	.risk li p{font-size:18px;height:3.5em;}
	.risk li p br.none{display:none;}
}


/*解決方法
-----------------------------------------------------------------------------------------*/
/*-------------------------更新支援*/
.shien{
	padding-top:min(8vw , 120px);
	padding-bottom:100px;
}
.shien h2{
	font-size:min(2.6vw , 2.6rem);
}
.shien h3{
	font-size:min(4vw , 4rem);
	display:flex;
	justify-content:center;
	align-items:end;
	gap:1em;
}
.shien h3::before,
.shien h3::after{
  content: "";
  width:2px;
  height:3em;
  background:var(--color_ki);
}
.shien h3::before{
  transform: rotate(-34deg);
}
.shien h3::after{
  transform: rotate(34deg);
}
.shien .illust{
	position:absolute;
	left: 0;
	right: 0;
	top:80px;
	width:100%;
	margin:0 auto;
	max-width:1300px;
	display:flex;
	justify-content:space-between;
	align-items:start;
	z-index:11;
}
.shien .illust01{
	margin:0 0 0 -50px;
}
.shien .illust02{
	margin:220px -130px 0 0;
}
@media screen and (max-width:1200px) {
	.shien .illust{position:static;aspect-ratio:7 / 4;overflow:hidden;;justify-content:center;margin:0 0 -17vw 0;max-height:540px;}
	.shien .illust01{max-width:33vw;margin:3vw 0 0 5vw;}
	.shien .illust02{max-width:55vw;margin:8vw 0 0 0;}
}
@media screen and (max-width: 767px) {
	.shien{padding:max(30px , 5vw) 0;}
}
/*-------------------------自動更新*/
.jidou{
	padding-bottom:100px;
}
@media screen and (max-width: 767px) {
	.jidou{padding-bottom:max(30px , 5vw);}
	.jidou .tx_check{margin-right:-1em;margin-left:-0.5em;}
}
/*-------------------------Google対策*/
.taisaku{
	padding-bottom:100px;
}
.taisaku .illust03{
	position:absolute;
	right:-40px;
	top:-100px;
	margin-top:-1vw;
}
.taisaku h3{
	font-size:min(3vw , 3rem);
}
.taisaku li.row_l_c{
	gap:min(3vw , 40px);
	margin-top:60px;
}
@media screen and (max-width: 1300px) {
	.taisaku .illust03{right:10px;max-width:20vw;}
}
@media screen and (max-width: 767px) {
	.taisaku{padding-bottom:max(30px , 5vw);}
	.taisaku .tx_check{margin-right:-1em;margin-left:-0.5em;}
	.taisaku h3{font-size:2rem;text-align:center;}
	.taisaku li.row_l_c{max-width:600px;margin:0 auto;gap:20px;margin-top:30px;}
}

/*流れ
-----------------------------------------------------------------------------------------*/
@media screen and (max-width: 860px) {
.flow_list dl{
	margin-top:15px;
	padding:5px;
	width:100%;
	display:grid;grid-template-columns:auto 1fr;
}
.flow_list dt{
	border-right:1px solid var(--color_ao);
	font-size:1.6rem;
	padding:10px;
}
.flow_list dd{
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:10px;
}
}
@media print, screen and (min-width: 861px) {
.flow_list{
	display:flex;
	gap:20px;
}
.flow_list dl{
	padding:5px;
	width:12%;
}
.flow_list dl:nth-child(1){width:25%;}
.flow_list dl:nth-child(2){width:33%;}
.flow_list dd{
	border-top:1px solid var(--color_ao);
	padding:5px;
	height:160px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	margin-top:5px;
}
}

/*よくある質問
-----------------------------------------------------------------------------------------*/
.faq{
	background:url(images/bg_faq.svg) top no-repeat;
	background-size:125%;
}
@media print, screen and (min-width: 768px) {
.faq{background-size:1600px;}
}
.qa{
	padding:40px 20px;
	border-bottom:1px dashed #CCC;
}
.faq_q,
.faq_a{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:0.5em;
	padding-top:0.25em;
}
.faq_q::before,
.faq_a::before{
	font-weight:bold;
	font-size:2.4rem;
	color:#FFF;
	width:1.6em;
	aspect-ratio:1 / 1;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	border-radius:5px;
	color:#FFF;
	display:block;
	margin-top:-0.25em;
}
.faq_q::before{
	content:"Q";
	background:var(--color_an);
}
.faq_a::before{
	content:"A";
	background:var(--color_sin);
}
.faq_a{
	margin-top:1.5em;
}
@media print, screen and (min-width: 768px) {
.faq_q::before,
.faq_a::before{font-size:3rem;}
}


/*よくあるご質問
-----------------------------------------------------------------------------------------*/
/*-------------------------faq*/
.faq{
	display:flex;
	flex-direction:column;
	margin-top:20px;
	position:relative;
	font-size:1.8rem;
}
.faq:hover{
	filter:brightness(80%);
}
.faq dt,
.faq dd{
	display:flex;
	align-items:center;
	gap:1em;
	padding:0.75em 3em 0.75em 1.5em;
}
.faq h3{
	font-size:2.2rem;
}
.faq p{
	font-weight:400;
}
@media screen and (max-width: 767px) {
	.faq{font-size:1.6rem;margin-top:10px;}
	.faq dt,
	.faq dd{gap:0.5em;padding:1em 2em 1em 0.5em;}
	.faq h3{font-size:1.8rem;}
}
/*faq_type*/
.faq_type{
	font-size:190%;
	line-height:1.5em;
	width:1.7em;
	padding-bottom:0.2em;
	text-align:center;
	font-style:normal;
	font-weight:900;
	flex-shrink:0;
	color:#FFF;
	border-radius:100%;
	margin-bottom:auto;
}
@media screen and (max-width: 767px) {
	.faq_type{font-size:150%;}
}
/*acc_btn*/
.faq .acc_btn::after{
	position:absolute;
	content:"";
	width:2em;
	aspect-ratio:1 / 1;
	bottom:1.25em;
	right:1em;
	z-index:10;
	background:url(images/ya.svg) center center no-repeat;
}
.faq .acc_btn.open::after{
	transform:scaleY(-1);
}
@media screen and (max-width: 767px) {
	.faq .acc_btn::after{width:1.5em;right:0.5em;bottom:1.5em;}
}

/*導入までの流れ
-----------------------------------------------------------------------------------------*/
/*-------------------------nagare*/
.nagare h2{
	font-size:min(3.6vw , 4rem);
}
@media screen and (max-width: 767px) {
	.nagare h2{font-size:min(5.5vw , 2.8rem);}
}
.nagare ol{
	display:flex;
	font-size:min(1.5vw , 1.8rem);
	gap:2em;
}
.nagare ol li{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	background:#FFF;
	position:relative;
	padding:0 1.5em 1.5em 1.5em;
}
.nagare ol li + li::before{
	content:"";
	position:absolute;
	width:2em;
	aspect-ratio:1 / 1;
	top:calc(50% - 1em);
	left:-2em;
	z-index:10;
	background:url(images/ya.svg) center center no-repeat;
	transform:rotate(-90deg);
}
.nagare ol strong{
	font-weight:900;
	color:var(--color_ao);
	font-size:min(10vw , 10rem);
}
.nagare ol .img{
	width:100%;
	background:#cde9f8;
	text-align:center;
	padding:1em;
}
.nagare ol h3{
	font-size:min(2.6vw , 2.4rem);
	text-align:center;
	margin:0.75em 0 0.5em 0;
}
.nagare ol p{
	font-size:min(2.1vw , 2rem);
	font-weight:400;
	text-align:justify;
}
@media screen and (max-width: 767px) {
.nagare ol{
	flex-direction:column;
	font-size:1.6rem;
}
.nagare ol li{
	flex-direction:row;
	padding:10px 20px;
}
.nagare ol li + li::before{
	top:-2em;
	left:calc(50% - 1em);
	transform:none;
}
.nagare ol strong{
	font-size:5.5rem;
}
.nagare ol .img{
	width:120px;
	padding:10px 15px;
	margin:0 15px;
	flex-shrink:0;
}
.nagare ol h3{
	font-size:1.8rem;
	text-align:left;
	margin:0 0 0.2em 0;
}
.nagare ol p{
	font-size:1.6rem;
}

}
@media screen and (max-width: 479px) {
	.nagare ol li{padding:10px;}
	.nagare ol .img{width:80px;padding:20px 5px;margin:0 10px;}
}

/*-------------------------------------------------------------------------------------------------特色border_color*/
body .sen_sora{border-color:var(--color_sora);}
body .sen_hada{border-color:var(--color_hada);}
body .sen_ao{border-color:var(--color_ao);}
body .sen_mizu{border-color:var(--color_mizu);}
body .sen_hai{border-color:var(--color_hai);}
body .sen_ki{border-color:var(--color_ki);}
body .sen_or{border-color:var(--color_or);}
body .sen_or2{border-color:var(--color_or2);}

/*-------------------------------------------------------------------------------------------------特色bg*/
body .bg_sora{background-color:var(--color_sora);}
body .bg_hada{background-color:var(--color_hada);}
body .bg_ao{background-color:var(--color_ao);}
body .bg_mizu{background-color:var(--color_mizu);}
body .bg_hai{background-color:var(--color_hai);}
body .bg_ki{background-color:var(--color_ki);}
body .bg_or{background-color:var(--color_or);}
body .bg_or2{background-color:var(--color_or2);}


/*-------------------------------------------------------------------------------------------------特色text_color*/
body .tx_sora{color:var(--color_sora);}
body .tx_hada{color:var(--color_hada);}
body .tx_ao{color:var(--color_ao);}
body .tx_mizu{color:var(--color_mizu);}
body .tx_hai{color:var(--color_hai);}
body .tx_ki{color:var(--color_ki);}
body .tx_or{color:var(--color_or);}
body .tx_or2{color:var(--color_or2);}

/*-------------------------------------------------------------------------------------------------utility*/
body .mw1040{max-width:1040px;margin:0 auto;}
#wrapper .lm_yellow{display:inline;background:linear-gradient(transparent 60%, #fff000 60%)}
body .deg-3{transform:rotate(-3deg);}
body .fsp113{font-size:113%}