@charset "utf-8";


/* ==================================================
    レイアウト
================================================== */

@media screen and (min-width: 768px) and (max-width: 1279px) {
    .hpj-page-2column .techdevice-responsivegrid>div {
        max-width: 832px;
    }
}

/* ==================================================
    l-article
================================================== */

.l-article {
    color: var(--Text-Default);
}

/* ==================================================
    common
================================================== */

/* ----------------------------------------
    a テキストリンク
---------------------------------------- */

.l-article section:not([class]) a:not([class]):link,
.l-article section[data-section] a:not([class]):link {
    text-decoration: underline #333 2px;
    text-underline-offset: 2px;
}
.l-article section:not([class]) a:not([class]):visited,
.l-article section[data-section] a:not([class]):visited {
    text-decoration-color: #808080;
}
.l-article section:not([class]) a:not([class]):hover,
.l-article section[data-section] a:not([class]):hover {
    text-decoration-thickness: 3px;
}
.l-article section:not([class]) a:not([class]):focus,
.l-article section[data-section] a:not([class]):focus {
    box-shadow: 0 0 0 3px rgb(0 123 255 / .25);
}



/* ----------------------------------------
    テキスト
---------------------------------------- */
.fs00 {
    font-size: 0;
}



/* ----------------------------------------
    margin
---------------------------------------- */
.mt08 { margin-top: 8px !important; }
.mt16 { margin-top: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mt32 { margin-top: 32px !important; }
.mt48 { margin-top: 48px !important; }
.mt56 { margin-top: 56px !important; }
.mt64 { margin-top: 64px !important; }

/* ----------------------------------------
    width
---------------------------------------- */
.u-mw100 {
    max-width: 100% !important;
}

/* ----------------------------------------
    flex
---------------------------------------- */
@media screen and (min-width: 1280px) {
    .d_flex_xl { display: flex !important; }
}

/* ----------------------------------------
    table
---------------------------------------- */
.table_basic {
    table-layout: fixed;
}
* + .table_basic {
    margin-top: 16px;
}

.table_basic th {
    background: #e6e6e6;
    text-align: center;
}
.table_basic td {
    text-align: left;
}
.table_basic th, .table_basic td {
    border: 1px solid #000;
    padding: 10px;
    font-size: 14px;
}



/* ----------------------------------------
    hr
---------------------------------------- */

.l-article hr {
    margin: 16px 0;
    border-top: 1px solid #000;
}




/* ==================================================
    リード文
================================================== */

.l-article section.logo + section > p:first-child {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .l-article section.logo + section:not([data-section]) {
        padding-top: 24px;
    }
}





/* ==================================================
    h2
================================================== */

.l-article h2.heading {
    display: block;
}
.l-article h2.heading::after {
    display: block;
    position: static;
    margin-top: .7px;
}

@media screen and (max-width: 767px) {
    .l-article h2.heading {
        /*margin-left: 90px;*/
        padding: 11.2px 0 0 0;
        line-height: 26.2px;
    }
}

@media screen and (min-width: 768px) {
    .l-article h2.heading {
        padding-top: 14.1px;
        line-height: 30.1px;
    }
}

@media screen and (min-width: 1280px) {
    .l-article h2.heading {
        padding-top: 16px;
        line-height: 29.2px;
    }
}



/* ----------------------------------------
	h2がない場合
---------------------------------------- */

@media screen and (max-width: 767px) {
    .squares + p {
        overflow: hidden;
        margin-top: 18px;
    }
    .squares + p::before {
        display: block;
        content: "";
        float: left;
        width: 74px;
        height: 48px;
        margin: 0 16px 8px 0;
    }
}

@media screen and (min-width: 768px) {
    .squares + p {
        margin-top: 14.1px;
    }
}





/* ==================================================
    backquote
================================================== */

.backquote p::before {
    content: "\201C";
}
.backquote p::after {
    content: "\201D";
}





/* ==================================================
    リスト（黒丸）
================================================== */

.l-article .ul li::before {
    top: auto;
}





/* ==================================================
    サブタイトル
================================================== */

.subtitle {
    margin-top: 16px;
    padding-bottom: 5px;
    font-size: 18px;
    font-weight: normal;
    border-bottom: 1px solid #000;
}


/* ==================================================
    第3タイトル
================================================== */
.tertiary_title {
    margin-top: 16px;
    padding-bottom: 5px;
    font-size: 18px;
    font-weight: normal;
    border-bottom: 2px solid #000;
    display: inline-block;
}





/* ==================================================
    画像＋説明文
================================================== */

.l-article * + figure {
    margin-top: 16px;
}
.l-article .squares + figure {
    margin-top: 0;
}
.l-article figcaption {
    margin-top: 12px;
    color: #000;
    font-size: 13px;
    line-height: 1.6;
}





/* ==================================================
    画像回り込み
================================================== */

.float-r,
.float-l {
    margin-top: 16px;
}

@media screen and (min-width: 768px) {
    .float-r,
    .float-l {
        width: 300px;
        margin-bottom: 16px;
        margin-top: 0;
    }
    .float-r {
        float: right;
        margin-left: 16px;
    }
    .float-l {
        float: left;
        margin-right: 16px;
    }
}





/* ==================================================
    クリックして拡大表示
================================================== */

.l-article * + .modal-image {
    margin-top: 16px;
}

/* ==================================================
    動画
================================================== */

.l-article * + .video {
    margin-top: 16px;
}

/* ==================================================
    CTAボタン
================================================== */

.cta_button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.cta_button .button-outline {
    justify-content: space-between;
    color: #fff;
    font-size: 18px;
    letter-spacing: normal;
    background: #000;
}
.cta_button .button-outline:hover {
    color: #000;
    background: #fff;
    text-decoration: none;
}
.cta_button .button-outline::after {
    content: "";
    height: 24px;
    width: 24px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2223%22%20viewBox%3D%220%200%2022%2023%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.5325%2011.5125C13.622%2011.423%2013.622%2011.2779%2013.5325%2011.1884L8.25019%205.90606C7.98171%205.63757%207.98171%205.20227%208.25019%204.93379C8.51868%204.6653%208.95398%204.6653%209.22246%204.93379L15.315%2011.0264C15.494%2011.2054%2015.494%2011.4956%2015.315%2011.6745L9.22246%2017.7671C8.95398%2018.0356%208.51868%2018.0356%208.25019%2017.7671C7.98171%2017.4986%207.98171%2017.0633%208.25019%2016.7948L13.5325%2011.5125Z%22%20fill%3D%22white%22/%3E%3C/svg%3E") no-repeat center/cover;
}
.cta_button .button-outline:hover::after {
    filter: invert(1);
}

@media screen and (min-width: 1280px) {
    .cta_button {
        flex-wrap: nowrap;
    }
    .cta_button .button-outline {
        min-width: 330px;
        font-size: 20px;
    }
}

/* ==================================================
    pager
================================================== */

.wp-pagenavi>span,
.wp-pagenavi>a {
    margin: 0;
}
.wp-pagenavi a:hover {
    opacity: 1;
}

/* ==================================================
    product
================================================== */

.l-article .product_img img {
    width: auto;
    max-width: 100%;
}
.l-article .product_btn a:hover {
    text-decoration: none!important;
}
@media screen and (min-width: 768px) {
    .l-article .product_img {
        width: 270px;
    }
}




/* ==================================================
    HPは、ビジネスに Windows 11 Pro をお勧めします
================================================== */

* + .win11_about {
    margin-top: 48px;
}
.win11_about {
    padding: 16px;
    border: 1px solid #000;
}
.win11_about h3 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}

@media screen and (min-width: 1024px) {
    .win11_about {
        padding: 32px;
    }
    .win11_about h3 {
        font-size: 20px;
    }
}





/* ==================================================
    subbox
================================================== */

.subbox {
    border: 1px solid #000;
    margin-top: 16px;
    padding: 16px;
}
.subbox h4 {
    font-weight: normal;
}
.subbox h3 {
    font-weight: normal;
    font-size: 18px;
}
.subbox * + h3,
.subbox * + h4 {
    margin-top: 16px;
}

@media screen and (min-width: 1024px) {
    .subbox {
        padding: 32px;
    }
    .subbox h3 {
        font-size: 20px;
    }
}





/* ==================================================
    youtube
================================================== */

* + .youtube {
    margin-top: 16px;
}
.youtube_title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
    font-weight: normal;
}
.youtube_play {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.youtube_play iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtube > .cta_button {
    margin-top: 30px;
}

@media screen and (min-width: 1024px) {
    .youtube_title {
        font-size: 25px;
    }
}





/* ==================================================
    caption
================================================== */

.l-article .caption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
}





/* ==================================================
    注釈
================================================== */

.l-article .disclaimer {
    padding-left: 1em;
    font-size: 12px;
    line-height: 1.33;
    text-indent: -1em;
}



/* ----------------------------------------
	notes
---------------------------------------- */

* + .notes {
    margin-top: 16px;
}
.notes {
    padding-left: 1em;
    font-size: 12px;
    line-height: 1.33;
    text-indent: -1em;
}
.notes > li:nth-child(n+2) {
    margin-top: .5em;
}
.notes a {
    text-decoration: underline;
}
.notes a:hover {
    background: rgb(0 0 0 / .1);
}



/* ----------------------------------------
	notes_num
---------------------------------------- */

* + .notes_num {
    margin-top: 16px;
}
.notes_num {
    counter-reset: notes_num;
    font-size: 12px;
    line-height: 1.33;
}
.notes_num > li {
    position: relative;
    padding-left: 3em;
}
.notes_num > li:nth-child(n+2) {
    margin-top: .5em;
}
.notes_num > li::before {
    counter-increment: notes_num;
    content: "\203B" counters(notes_num, "-") "";
    position: absolute;
    left: 0;
}
.notes_num a {
    text-decoration: underline;
}
.notes_num a:hover {
    background: rgb(0 0 0 / .1);
}


/* num_none -------------------- */

.notes_num > li.num_none {
    padding-left: 0;
}
.notes_num > li.num_none::before {
    opacity: 0;
}



/* ----------------------------------------
    footnote_num
---------------------------------------- */

* + .footnote_num {
    margin-top: 16px;
}

.footnote_num > li {
	padding-left: 1.75em;
	font-size: 12px;
	text-indent: -1.75em;
}
.footnote_num > li:nth-child(n+2) {
	margin-top: .5em;
}





/* ==================================================
    目次（ナビ）
================================================== */

.anchor-link_item .nolink_list:hover {
    background: none;
    cursor: default;
}
.anchor-link_item .link_h2 {
    padding-left: 1em;
}
.anchor-link_item .link_h3 {
    padding-left: 2em;
}
.anchor-link_item .link_h4 {
    padding-left: 3em;
}


/* ==================================================
    拡大画像
================================================== */
.remodal {
  background-color: #ECEBEB!important;
}

@media only screen and (min-width: 641px) {
	.remodal {
		max-width: 960px!important;
	}
}
@media only screen and (max-width: 767px) {
	.remodal-wrapper {
	    padding: 0 0 0;
	}
	.remodal {
	    padding: 10px;
	}
}

/* ------------------------------------------------------ 
 T&D download.css 
-------------------------------------------*/

.cmsns01 {
	display: none;
}


.molink {
  cursor: pointer;
}

.cmndlbtnwrap {
  padding-bottom: 5px;
}
.cmndlbtn {
  display: block;
  position: relative;
  width: 460px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 18px;
  line-height: 1;
  background-color: #FF4000;
  font-weight: bold;
  color: #fff;
}
.cmndlbtn::before {
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  border-top-width: 2px;
  border-right-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-top-color: #fff;
  border-right-color: #fff;
}
.cmndlbtn:hover {
  text-decoration: none;
  color: #fff;
}


.repo {
  position: fixed;
  padding-top: 20px;
  padding-right: 25px;
  padding-bottom: 20px;
  padding-left: 25px;
  background-color: #fff;
  text-align: center;
  right: -350px;
  bottom: 20px;
  z-index: 10;
  -webkit-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  width: 350px;
}
.repo.active {
  right: 0;
}
.repo.active.active02 {
  right: -350px;
}
.repo01 {
  font-weight: bold;
  margin-bottom: 10px;
}
.repobtn {
  display: block;
  position: relative;
  width: 300px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 1;
  background-color: #FF4000;
  font-weight: bold;
  color: #fff;
}
.repobtn::before {
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  border-top-width: 2px;
  border-right-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-top-color: #fff;
  border-right-color: #fff;
}
.repobtn:hover {
  text-decoration: none;
}



@media only screen and (max-width: 767px) {
	.cmndlbtn {
	  width: 100%;
	  padding-top: 18px;
	  padding-bottom: 16px;
	  vertical-align: bottom;
	  font-size: 14px;
	}
	.repo {
	  position: fixed;
	  padding-top: 12px;
	  padding-right: 3%;
	  padding-bottom: 12px;
	  padding-left: 3%;
	  background-color: #fff;
	  text-align: center;
	  right: 0;
	  bottom: -111px;
	  z-index: 10;
	  width: 100%;
	}
	.repo.active {
	  right: 0;
	  bottom: 0;
	}
	.repo.active.active02 {
	  right: 0;
	  bottom: -111px;
	}
	.dlpu02 {
	    position: absolute;
	    top: 4px;
	    right: 4px;
	    width: 30px;
	}
	.dlpu01 .downwrap {
	    margin-top: 3px;
	    margin-bottom: 10px;
	}
}

/*--------------------------------------------*/
.inqtlv01 {
	text-align:center;
	margin-bottom:60px;
}
.inqtlv01 a {
	display: inline-block;
	color: #fff;
	font-size: 26px;
	background-color: #ED7D31;
	padding-top: 12px;
	padding-right: 35px;
	padding-bottom: 12px;
	padding-left: 35px;
	text-decoration: none;
}
.inqtlv01 a span {
	font-size: 14px;
	display:block;
}

/*-------------------------------------------

右カラムフォームありレイアウト

------------------------------------------ */
/*
.download_article {
	display: flex;
	flex-wrap: wrap;
}
*/
.download_article > div {
	width: 100%;
}
/*
@media screen and (min-width: 768px) {
	.download_article > div:first-child {
		width: calc(60% - 15px);
		margin-right: 30px
	}
	.download_article > div:nth-child(2) {
		width: calc(40% - 15px);
	}
}
*/

.download_article a {
	color: #414653;
}


@media screen and (max-width: 767px) {
	.visid .download_article .mktoForm div:not(.mktoError) {
		width: 100% !important;
	}
	.visid .download_article .mktoForm .mktoError div {
		width: auto !important;
	}
	.visid .download_article .mktoForm .mktoError .mktoErrorArrowWrap,
	.visid .download_article .mktoForm .mktoError .mktoErrorArrow {
		width: 16px !important;
	}
}


.visid .download_article .mktoForm input[type=text],
.visid .download_article .mktoForm input[type=email],
.visid .download_article .mktoForm input[type=tel],
.visid .download_article .mktoForm select,
.visid .download_article .mktoForm textarea.mktoField {
	width: 100% !important;
}





.visid .download_article .mktoButtonRow .mktoButtonWrap {
	margin-left: 0px !important;
}


@media screen and (min-width: 768px) {
	.visid .download_article form{
		width: 650px!important;
		margin: 0 auto;
	}

	.visid .download_article .mktoForm .mktoAsterix {
		float: right !important;
	}

	.visid .download_article .mktoForm .mktoHtmlText.mktoHasWidth {
		width: 100% !important;
	}
	
	.visid .download_article .mktoForm .mktoFormCol {
		width: 100% !important;
	}
	.visid .download_article .mktoForm .mktoFieldWrap {
		display: flex;
	    justify-content: space-between;
	    width: 100%;
	}
	.visid .download_article .mktoForm .mktoLogicalField{
	    width: calc(100% + 40px)!important;
	}

}


/* ----------------------------------------- 
under_wrap 
--------------------------------------- */

.under_wrap {
	padding-top: 15px;
	position:relative;
}
.under_wrap.pt00 {
  padding: 32px 16px!important;
}
.login_main .under_wrap {
	padding-top: 0;
}

@media screen and (min-width: 768px) {
	.under_wrap {
		padding-top: 55px;
		position:relative;
	}
}


/* ----------------------------------------- 
cmnbox01 
--------------------------------------- */

.cmnbox01 {
	width: calc(100% - 2rem);
	margin: 0 auto;
    padding-top: 1rem;
}


@media screen and (min-width: 1024px) {
	.cmnbox01 {
		width: 950px;
	}
}

.visid .newblock01 h1,
.visid .newblock01 h2,
.visid .newblock01 h3,
.visid .newblock01 h4,
.visid .newblock01 h5,
.visid .newblock01 h6 {
	font-weight: bold;
}



/*------------------------------------------- 
	page_title_area_aem　: none
------------------------------------------ */
.page_title_area_aem {
	display: none;
}