@charset "UTF-8";

/* ▼1280px以上の場合に適用
--------------------------------------------------------------------- */
@media only screen and (min-width: 1281px) {

	#Sp_Navi {
		display: none;
	}

}

/* ▼1280px以下の場合に適用（ラップトップ以下）
---------------------------------------------------------------------- */
@media only screen and (max-width: 1281px) {

	.row {
		width:90%;
		margin: 0 auto;
	}

	/* !フルスクリーンナビ設定
	---------------------------------------------------------- */
	#Sp_Navi {
		height:100px;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		backdrop-filter: blur(6px);
	}

	#g-nav_Logo {
		position:fixed;
		z-index: 998;
		top:29px;
		left:30px;
		display: block;
		width: 200px;
	}

	.openbtn{
		position:fixed;
		z-index: 9999;
		top:35px;
		right:12px;
		cursor: pointer;
		width: 72px;
		height:30px;
		background: #000;
		border-radius: 100vh;
	}

	.openbtn:hover{
		cursor: pointer;
		display: block;
		-webkit-transition: all .3s;
		transition: all .3s;
		background: #e32723;
	}

	.openbtn span{
		display: inline-block;
		transition: all .3s;
		position: absolute;
		right: 12px;
		height: 1px;
		border-radius: 2px;
		background: #fff;
		width: 9px;
	}

	.openbtn span:nth-of-type(1) {
		top:12px;
	}

	.openbtn span:nth-of-type(2) {
		top:16px;
	}

	.openbtn.active span:nth-of-type(1) {
		top: 8px;
		right: 12px;
		transform: translateY(6px) rotate(-45deg);
		width: 10px;
		height: 2px;
	}

	.openbtn.active span:nth-of-type(2){
		top: 20px;
		right: 12px;
		transform: translateY(-6px) rotate(45deg);
		width: 10px;
		height: 2px;
	}

	.openbtn .txt{
		position: absolute;
		top: 2px;
		left: 14px;
		font-size: 11px;
		font-weight: 500;
		font-optical-sizing: auto;
		color: #fff;
	}

	/*---ナビ オーバーレイ画面---*/
	#g-nav{
		position:fixed;
		z-index: 999;
		top:0;
		right: -120%;
		width:100%;
		height: 100vh;
		opacity: 1;
		transition: all 0.3s;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#g-nav.panelactive{
		right: 0;
	}

	#g-nav .Cont {
		width: 100%;
		height: 100%;
		padding: 40px;
		position: relative;
		left: 0;
		overflow-y: scroll;
		background: #4e8ee4;
	}

	#g-nav .Cont a {
		color:#fff;
		text-decoration: none;
	}

	#g-nav .Cont a:hover {
		color: #fff;
	}

	#g-nav li {
		list-style-type:none;
		position: relative;
		font-size:28px;
		color: #fff;
		line-height: 1em;
		letter-spacing: 0.06em;
		padding:14px 0 10px;
		border-bottom: 1px solid #6b9fea;
	}

	#g-nav li .sub_tit {
		position: relative;
		top: -6px;
		right: 0;
		font-size:12px;
		color: #fff;
		letter-spacing: 0.04em;
		margin-left: 6px;
	}

	/*--- リンク下線 ---*/
	#g-nav .Cont .link_ul {
		display: inline-block;
		position: relative;
	}

	#g-nav .Cont .link_ul::after {
		background: #fff;
		content: '';
		display: block;
		height: 1px;
		position: absolute;
		bottom: -5px;
		left: 0;
		transition: .3s all;
		width: 0;
	}

	#g-nav .Cont .link_ul:hover::after {
		width: 100%;
	}

	/* !Header
	---------------------------------------------------------- */
	.header {
		display: none;
	}

	/*--- TEL ---*/
	.tel {
		display: none;
	}

	/*--- ボタン（お問い合わせ） ---*/
	.btn_contact {
		display: none;
	}

	/*--- sp用ボタン（お問い合わせ） ---*/
	.btn_contact_sp {
		position: fixed;
		z-index: 100;
		top: 35px;
		right: 90px;
		width: 102px;
		height: 30px;
		line-height:30px;
		font-size:11px !important;
		color: #fff !important;
		text-decoration: none;
		text-align: center;
		transition: all .2s;
		background: #e32723;
		border-radius: 100vh;
	
	}
	
	.btn_contact_sp:hover {
		color: #fff;
		background: #c62835;
		text-decoration: none;
	}
	
	/*--- sp用アイコン（メール） ---*/
	.icon_mail_sp {
		font-size:13px !important;
		display: inline-block;
		vertical-align: middle;
		color: #fff;
		line-height: 1;
		position: relative;
		width: 1.06667em;
		height: 0.8em;
		border: 0.1em solid currentColor;
		border-radius: 0.1em;
		box-sizing: content-box;
		overflow: hidden;
		margin-top:-3px;
		margin-right:3px;
	}
	
	.icon_mail_sp::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		width: 0.75425em;
		height: 0.75425em;
		border: 0.1em solid currentColor;
		border-top-color: transparent;
		border-right-color: transparent;
		border-radius: 0 0 0 0.1em;
		box-sizing: content-box;
		transform: translate(-50%, -50%) rotate(-45deg) skew(10deg, 10deg);
	}

	/* !汎用コンテンツ
	---------------------------------------------------------- */
	/*--- ぱんくず ---*/
	#Sitepath {
		width: 90%;
		margin: 10px auto 0;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		list-style: none;
		font-size: 14px;
	}

	/* !Inline Align ------------------------------------------------------------ */
	.taR_spL { text-align: left !important;}

	/* ==========================================================
	トップページ
	========================================================== */
	/*--- まずはご相談ください（円形） ---*/
	.support_w90per {
		width: 100% !important;
	}

	/*--- 背景色（あなたの夢を、全力サポート） ---*/
	#Area_Support {
		background: #e8f0fe;
		padding: 20px 0 30px;
	}

	#Area_Support .ContL {
		width: 100%;
		background: #8eb5fd;
		padding: 20px 30px 40px;
		margin-top:20px;
	}

	#Area_Support .ContR {
		width: 100%;
	}

	#Area_Support .ContR img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	/*--- タイトル ---*/
	#Area_Support .Title {
		color: #0071bc;
	}

	/*--- 白枠 ---*/
	.frame_white {
		border: 5px solid #fff;
	}

	/* ==========================================================
	企業情報
	========================================================== */
	/*--- エリア分け ---*/
	#Message_Area {
		width: 100%;
		height: auto;
		background:url(../../common/img/company/president.jpg) no-repeat right bottom;
		background-size: contain;
	}

	#Message_Area .comment {
		width: 100%;
		float: left;
		padding: 40px 0 480px;
		font-size: 16px;
	}

}

/* ▼810px以上の場合に適用
--------------------------------------------------------------------- */
@media only screen and (min-width: 811px) {

	.Sp_Cont {
		display: none;
	}

}

/* ▼810px以下の場合に適用（ipad以下）
---------------------------------------------------------------------- */
@media only screen and (max-width: 811px) {
	
	body {
		font-size: 16px;
		line-height: 1.6em;
	}

	p {
		margin-top: 10px;
	}

	.Sp_None {
		display: none;
	}

	.row {
		width:90%;
		margin: 0 auto;
	}

	/* !フルスクリーンナビ設定
	---------------------------------------------------------- */
	#Sp_Navi {
		height:70px;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		backdrop-filter: blur(6px);
	}

	#g-nav_Logo {
		position:fixed;
		z-index: 998;
		top:18px;
		left:20px;
		display: block;
		width: 154px;
	}

	.openbtn{
		position:fixed;
		z-index: 9999;
		top:18px;
		right:12px;
		cursor: pointer;
		width: 72px;
		height:30px;
		background: #000;
		border-radius: 100vh;
	}

	/* !Header
	---------------------------------------------------------- */
	/*--- sp用ボタン（お問い合わせ） ---*/
	.btn_contact_sp {
		position: fixed;
		z-index: 100;
		top: 18px;
		right: 90px;
		width: 102px;
		height: 30px;
		line-height:30px;
		font-size:11px !important;
		color: #fff !important;
		text-decoration: none;
		text-align: center;
		transition: all .2s;
		background: #e32723;
		border-radius: 100vh;
	}

	/* !汎用コンテンツ
	---------------------------------------------------------- */
	/*--- ぱんくず ---*/
	#Sitepath {
		width: 90%;
		margin: 10px auto 0;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		list-style: none;
		font-size: 12px;
	}

	/*--- 見出し（サブタイトル付き） ---*/
	h2 .title {
		font-size:26px;
		font-weight:bold;
		color: #0071bc;
		position: relative;
		display: inline-block;
		line-height: 1em;
		letter-spacing: 0.1em;
	}

	h2 .title .sub_tit {
		font-size:14px;
		color: #000;
		letter-spacing: 0.06em;
	}

	h3 .title {
		font-size:22px;
		font-weight:bold;
		color: #000;
		position: relative;
		display: inline-block;
		line-height: 1em;
		letter-spacing: 0.1em;
	}

	h3 .title .sub_tit {
		font-size:12px;
		color: #000;
		font-weight:normal;
		letter-spacing: 0.06em;
	}

	/*--- 吹き出し ---*/
	.txt_bubble {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 26px;
		font-weight: bold;
	}

	.txt_bubble::before,
	.txt_bubble::after {
		content: '';
		width: 3px;
		height: 28px;
		background-color: #0071bc;
	}

	.txt_bubble::before {
		margin-right: 20px;
		transform: rotate(-35deg)
	}
	.txt_bubble::after {
		margin-left: 20px;
		transform: rotate(35deg)
	}

	/*--- ボタン（青色） ---*/
	.btn_blue {
		width: 100%;
		max-width: 200px;
		display: block;
		position: relative;
		z-index: 2;
		font-size: 16px;
		color: #fff;
		line-height: 1.5em;
		text-align: center;
		text-decoration: none;
		padding: 12px 0;
		background: #0071bc;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
		border-radius: 50px;
	}

	/* !Footer
	---------------------------------------------------------- */
	footer {
		font-size: 12px;
		text-align: center;
		padding-top: 40px;
	}

	#LogoFtr {
		display: block;
		width: 200px;
		margin:0 auto;
	}

	/*--- テキスト位置 ---*/
	#Area_Text {
		margin-top: 40px;
		font-size: 12px;
		color: #fff;
		background: #8eb5fd;
		padding: 20px 0;
	}

	#Area_Text .txtL {
		float: none;
		text-align: center;
		padding-left: 0;
	}

	#Area_Text .txtR {
		float: none;
		text-align: center;
		padding-right: 0;
		padding-bottom: 10px;
	}

	/* !Fonts -------------------------------------------------------------- */
	.fz20 { font-size: 18px; line-height: 1.6em;}
	.fz24 { font-size: 20px; line-height: 1.6em;}
	.fz32 { font-size: 24px; line-height: 1.6em;}
	.fz40 { font-size: 28px; line-height: 1.6em;}

	/* !Margin ------------------------------------------------------------------ */
	.mt10 { margin-top:10px !important;}
	.mt20 { margin-top:20px !important;}
	.mt30 { margin-top:20px !important;}
	.mt40 { margin-top:24px !important;}
	.mt50 { margin-top:28px !important;}
	.mt60 { margin-top:32px !important;}
	.mt80 { margin-top:36px !important;}
	.mt100 { margin-top:40px !important;}

	/* !Inline Align ------------------------------------------------------------ */
	.taC_spL { text-align: left !important;}
	.taL_spC { text-align: center !important;}

	/* ==========================================================
	トップページ
	========================================================== */
	/*--- カバー画像 ---*/
	#Cover_Main {
		position: relative;
		width: 100%;
		height: 420px;
		background:url(../../common/img/main.jpg) no-repeat center bottom;
		background-size: cover;
	}

	#Cover_Main img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: right bottom;
	}

	/*--- 背景（白色） ---*/
	.Bg_White {
		background: #fff;
		padding: 20px 0 30px;
	}

	/*--- 背景（灰色） ---*/
	.Bg_Gray {
		background: #f9f9f9;
		padding: 20px 0;
	}

	/*--- まずはご相談ください（円形） ---*/
	.support_w90per {
		width: 90% !important;
	}

	/*--- 開業事例（幅） ---*/
	.case_w80per {
		width: 70% !important;
	}

	/* !ニュース
	----------------------------------------------------------- */
	.Area_News {
		width: 100%;
		position: relative;
		border-bottom:1px solid #ccc;
		padding:24px 0;
		line-height: 1em;
		cursor: pointer;
	}

	.Area_News .contL {
		float: left;
		width: 100%;
		padding-left: 6px;
		margin-bottom:10px;
	}

	.Area_News .contR {
		float: left;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 6px;
	}

	/* ==========================================================
	第二階層共通
	========================================================== */
	/*--- カバー画像 ---*/
	#Cover_Common {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../../common/img/cmn_cover.jpg) no-repeat center bottom;
		background-size: cover;
	}

	/*--- エリア設定 ---*/
	#Common_Area {
		background: #fff;
		padding: 20px 0 0;
	}

	/*--- カバータイトル ---*/
	#Cover_Title {
		position: absolute;
		top: 70px;
		left: 0;
		width: 260px;
		height: auto;
	}

	#Cover_Title div {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		color: #fff;
		font-weight: bold;
		background:#0071bc;
		text-align:center;
		letter-spacing: 0.1em;
		border-bottom-right-radius : 16px;
		-webkit-border-bottom-right-radius: 16px;
		-moz-border-radius-bottomright: 16px;
	}

	#Cover_Title div:before {
		content: '';
		display: block;
		padding-top: 28%;
	}

	#Cover_Title .fz20 {
		font-size: 18px;
	}

	/* ==========================================================
	開業支援
	========================================================== */
	/*--- カバー画像 ---*/
	#Cover_Support {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../../common/img/support/cover.jpg) no-repeat center bottom;
		background-size: cover;
	}

	/*--- 特徴 ---*/
	#Features_Area {
		background: #8eb5fd;
		padding: 30px 0 40px;
	}

	#Features_Area .Cont {
		background: #fff;
		padding: 0 30px 40px 30px;
		border-radius: 10px;
	}

	/*--- エリア分け（開業までの流れ） ---*/
	.frame_flow .contL {
		width: 100%;
		margin-top: 20px;
	}

	.frame_flow .contR {
		width: 100%;
	}

	.frame_flow .tit {
		font-size: 22px;
		font-weight: bold;
		line-height: 1.5em;
	}

	.frame_flow .number {
		width: 34px;
		margin-right: 4px;
	}

	.ico_triangle {
		display: block;
		margin: 26px auto;
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid #8eb5fd;
	}

	/*--- エリア分け（スタッフの声） ---*/
	.frame_staff {
		width: 100%;
		margin-top: 100px !important;
	}

	.frame_staff .contL {
		width: 100%;
		height: 240px;
		background:url(../../common/img/support/staff.jpg) no-repeat center top;
		background-size: cover;
	}

	.frame_staff .contR {
		width: 100%;
		background:#f2f2f2;
		padding: 10px 30px 30px 30px;
	}

	/* ==========================================================
	医療機器販売
	========================================================== */
	/*--- カバー画像 ---*/
	#Cover_Product {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../../common/img/product/cover.jpg) no-repeat center bottom;
		background-size: cover;
	}

	/*--- エリア設定 ---*/
	#Product_Area {
		background: #fff;
		padding: 20px 0 0;
	}

	/*--- 見出し ---*/
	#Product_Area h2 {
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
		font-size: 20px;
		color: #fff;
		text-align: center;
		background: #0071bc;
		padding: 14px 0;
		border-radius: 50px;
	}

	/* !カテゴリ一覧
	----------------------------------------------------------- */
	#Category_Box {
		display: none;
	}

	/* !リンク画像
	----------------------------------------------------------- */
	/*--- リンク（下線） ---*/
	.ul_product {
		position: static;
		display: block;
	}
	
	.ul_product::after {
		content: none;
		position: static;
		width: 0;
		height: 0;
		background: none;
		transform: none;
		transition: none;
	}
	
	.link-box:hover .ul_product::after {
		transform: none;
	}

	/* !ポップアップ（医療従事者の方）
	----------------------------------------------------------- */
	body.open_popup {
		overflow: hidden;
	}

	.bg_onetime_popup {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 9999;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		opacity: 0;
		visibility: hidden;
		transition: 0.5s;
	}

	body.open_popup .bg_onetime_popup {
		opacity: 1;
		visibility: visible;
	}

	.onetime_popup {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 90% !important;
		min-width: 340px;
		background: #fff;
	}

	.onetime_popup_title {
		position: relative;
		padding: 1em 0;
		margin: 0px;
		background: #0071bc;
		color: #fff;
		font-size: 20px;
		text-align: center;
		line-height: 1.5;
	}

	.onetime_popup_content {
		padding: 20px 10px !important;
		text-align: center;
	}

	.onetime_popup_content .w70per {
		width: 100% !important;
	}

	.onetime_popup_close {
		cursor: pointer;
	}

	/*--- ボタン ---*/
	.btn_yes {
		width: 100%;
		max-width: 160px;
		display: block;
		z-index: 2;
		font-size: 16px;
		color: #fff;
		line-height: 1.5em;
		text-align: center;
		text-decoration: none;
		padding: 8px 0;
		background: #0071bc;
		margin-left: auto;
		margin-right: auto;
		border-radius: 50px;
		cursor: pointer;
	}

	.btn_no a {
		width: 100%;
		max-width: 160px;
		display: block;
		z-index: 2;
		font-size: 16px;
		color: #fff;
		line-height: 1.5em;
		text-align: center;
		text-decoration: none;
		padding: 8px 0;
		background: #ccc;
		margin-left: auto;
		margin-right: auto;
		border-radius: 50px;
		cursor: pointer;
	}

	/* ==========================================================
	医療機器販売（製品詳細 / 投稿ページ）
	========================================================== */
	#Product_Detail {
		width:100%;
		background: #fff;
		padding: 20px 0 0;
	}

	/*--- 見出し ---*/
	#Product_Detail h2 {
		font-size: 24px;
		color: #000;
		font-weight: bold;
		line-height: 1.4em;
		border-left: 6px solid #e32723;
		padding: 2px 0 4px 0.6em;
	}

	#Product_Detail h3 {
		font-size: 20px;
		color: #000;
		font-weight: bold;
		line-height: 1.4em;
		position: relative;
		overflow: hidden;
		padding-bottom: 1em;
		margin: 60px 0 20px;
	}

	#Product_Detail h4 {
		font-size: 18px;
		color: #000;
		line-height: 1.4em;
		background: #f5f5f5;
		border-bottom: 1px solid #c0c0c0;
		padding: 14px 0 14px 1em;
		margin: 20px 0;
	}

	#Product_Detail h5 {
		color: #0071bc;
		margin: 10px 0 0;
	}

	#Product_Detail .Img_w50per {
		width: 100% !important;
	}

	#Product_Detail .Img_w30per {
		width: 100% !important;
	}

	/* ==========================================================
	開業事例
	========================================================== */
	/*--- カバー画像 ---*/
	#Cover_Case {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../../common/img/case/cover.jpg) no-repeat center bottom;
		background-size: cover;
	}

	/*--- エリア分け ---*/
	.Case_Area .contL30 {
		width: 100%;
	}

	.Case_Area .contL30 img {
		display: block;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

	.Case_Area .contR70 {
		width: 100%;
	}

	.Case_Area .contL70 {
		width: 100%;
	}

	.Case_Area .contR30 {
		width: 100%;
	}

	.Case_Area .contR30 img {
		display: block;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

	/*--- 区切り線（青色） ---*/
	.line_blue {
		border-top: 1px solid #0071bc;
		margin: 30px 0 40px;
	}

	/* ==========================================================
	企業情報
	========================================================== */
	/*--- カバー画像 ---*/
	#Cover_Company {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../../common/img/company/cover.jpg) no-repeat center bottom;
		background-size: cover;
	}

	/*--- エリア分け ---*/
	#Message_Area {
		width: 100%;
		height: auto;
		background:url(../../common/img/company/president.jpg) no-repeat right bottom;
		background-size: contain;
	}

	#Message_Area .comment {
		width: 100%;
		float: left;
		padding: 40px 0 220px;
		font-size: 16px;
	}

	.map {
		height: 400px;
	}

	/* ==========================================================
	お知らせ
	========================================================== */
	#Cont_News {
		width: 100%;
		padding:0 0 10px;
	}

	#Cont_News .date {
		text-align: right;
		font-size: 14px;
		line-height: 1em;
	}

	#Cont_News .tit {
		font-size: 18px;
		margin: 10px 0 12px;
		padding-bottom: 6px;
		border-bottom:1px solid #ccc;
	}

	#Post p {
		margin: 10px 0;
	}

	/*--- ページの先頭へ ---*/
	#back-top {
		display: none !important;
	}

}

/* ▼440px以上の場合に適用
--------------------------------------------------------------------- */
@media only screen and (min-width: 441px) {

	/* ==========================================================
	お問い合わせ
	========================================================== */
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}

}

/* ▼440px以下の場合に適用（iphone以下）
---------------------------------------------------------------------- */
@media only screen and (max-width: 441px) {

	/* ==========================================================
	トップページ
	========================================================== */
	/*--- まずはご相談ください（円形） ---*/
	.support_w90per {
		width: 90% !important;
	}

	/* ==========================================================
	お問い合わせ
	========================================================== */
	.phone {
		text-align: center;
	}

	.phone a {
		font-size: 42px;
		font-weight: bold;
		color: #e32723;
		line-height: 1.6em;
		text-decoration: underline;
	}

}