@charset "utf-8";

/* ======================================================
 * parts_pc.css
 * ------------------------------------------------------
 * @keyframes
 * @media print, screen and (min-width: 768px)
 * - Common
 * - Elements >>> Text
 * - Elements >>> List
 * - Elements >>> Link
 * - Conditional Elements >>> Heading
 * - Layout >>> Table
 * - Layout >>> Grid
 * - Layout >>> Column
 * - Layout >>> Other
====================================================== */
@keyframes pattern05 {50%{left: 4px;}}

@media print, screen and (min-width: 768px) {
	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */
	a:link img {
		-webkit-backface-visibility:hidden;
		backface-visibility: hidden;
	}
	
	/* ----- icon ----- */
	.a-blank,
	.link-text > li > .a-blank > .link_label {
		position: relative;
	}
	.a-blank::after,
	.link-text > li > .a-blank > .link_label::after {
		content: "";
		display: inline-block;
		margin-left: 8px;
		border: none !important;
		-webkit-transform: rotate(0) !important;
		transform: rotate(0) !important;
		vertical-align: -1px;
	}
	.a-blank::after,
	.link-text > li > .a-blank > .link_label::after {
		width: 10px !important;
		height: 10px !important;
		background: url(/products-search/common/images/com_ic01.png) no-repeat 0 0;
		vertical-align: 1px;
	}
	.link-text > li > .a-blank > .link_label::after {
		margin-top: -6px !important;
	}
	
	/* ----- Micro-interactions ----- */
	/* pattern05 */
	.link-text > li > a::before {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 20px;
		width: calc(100% - 20px);
		height: 1px;
		background-color: #369;
		transform: scaleX(0);
		transform-origin: bottom left;
		transition: transform .2s;
	}
	.link-text > li > a::after {
		content: "";
		position: absolute;
		top: .4em;
		left: 0;
		width: 8px !important;
		height: 8px !important;
		margin-left: 0;
		background: none;
		border-top: 1px solid #969696 !important;
		border-right: 1px solid #969696 !important;
		-webkit-transform: rotate(45deg) !important;
		transform: rotate(45deg) !important;
	}
	.link-text > li > a:hover::before {
		transform: scaleX(1);
	}
	.link-text > li > a:hover::after {
		animation: pattern05 .4s;
	}
	.link-text > li > a.a-blank::before {
		width: calc(100% - 38px);
	}
	/* pattern09 */
	.accordion-layout > .accordion_trigger:hover > .accordion_label::before {
		opacity: 1;
	}
	.accordion-layout > .accordion_trigger:hover > .accordion_label::after {
		margin-top: -18px;
	}
	.accordion-layout > .accordion_trigger.is-active > .accordion_label::after {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	
	/* ----- plugin colorbox setting ----- */
	#cboxOverlay {
		opacity: .4 !important;
	}
	#cboxContent {
		margin-top: 0 !important;
		padding: 50px 75px;
		background-color: #fff !important;
		border: none !important;
	}
	#cboxLoadedContent {
		overflow: visible !important;
		margin: 0 auto;
		border: none !important;
	}
	#cboxCurrent {
		display: none !important;
	}
	#cboxClose {
		top: 30px !important;
		right: 30px !important;
		width: 27px !important;
		height: 27px !important;
		background: url(/products-search/common/images/com_ic04.png) no-repeat 0 0  !important;
		transition-property: top;
		transition-duration: .2s;
	}
	#cboxClose:hover {
		top: 20px !important;
	}
	#cboxClose::before {
		content: "閉じる";
		position: absolute;
		bottom: -1.5em;
		left: 0;
		display: inline-block;
		width: 60px;
		margin-left: -16px;
		text-indent: 0;
		opacity: 0;
		transition-property: opacity;
		transition-duration: .2s;
		text-align: center;
	}
	#cboxClose:hover::before {
		opacity: 1;
	}
	#cboxClose::after {
		content: "";
		display: block;
		position: absolute;
		top: -12px !important;
		right: -12px !important;
		width: 50px !important;
		height: 50px !important;
	}
	.js-modal-content {
		display: none;
	}
	.modal-title {
		position: static !important;
		margin-top: -10px;
		font-size: 2.4rem;
		line-height: 1.4;
		color: #333 !important;
	}
	.modal-image {
		margin-top: 15px !important;
		margin-right: auto;
		margin-left: auto;
	}
	.modal-text {
		margin-top: 10px;
	}
	.modal-image.video-layout {
		width: 426px;
		height: 250px;
	}
	
	/* ------------------------------------------------------
	 * Elements >>> Text
	------------------------------------------------------ */
	/* ----- text-paragraph ----- */
	.text-paragraph {
		margin-top: 1em;
	}
	
	/* ------------------------------------------------------
	 * Elements >>> List
	------------------------------------------------------ */
	[class*="list-note"] {
		margin-top: 1em;
	}
	[class*="list-note"] > li {
		margin-top: .5em;
	}
	[class*="list-note"] > li:first-child {
		margin-top: 0;
	}
	
	/* ----- list-note ----- */
	.list-note > li {
		position: relative;
		padding-left: 1.5em;
		color: #666;
		line-height: 1.4;
	}
	.list-note .list_mark {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		line-height: 1.4;
	}
	
	/* ------------------------------------------------------
	 * Elements >>> Link
	------------------------------------------------------ */
	[class*="link-text"] {
		margin-top: 1em;
	}
	[class*="link-text"] > li {
		margin-top: .5em;
	}
	[class*="link-text"] > li:first-child {
		margin-top: 0;
	}
	
	/* ----- link-text ----- */
	.link-text > li {
		line-height: 1.4;
	}
	.link-text > li > a {
		position: relative;
		display: inline-block;
		padding-left: 20px;
		text-decoration: none;
		color: #369;
	}
	
	/* ------------------------------------------------------
	 * Conditional Elements >>> Heading
	------------------------------------------------------ */
	
	/* ----- heading-lv1 ----- */
	.heading-lv1 {
		position: relative;
	}
	.heading-lv1 + * {
		margin-top: 30px !important;
	}
	.heading-lv1 + section > .heading-lv2:first-child {
		margin-top: 0 !important;
	}
	.heading-lv1 .heading_subtitle {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 2rem;
		line-height: 1.2;
	}
	.heading-lv1 .heading_title {
		display: table;
		width: 100%;
		font-size: 4.2rem;
		line-height: 1.2;
	}
	.heading-lv1 .heading_title > .heading_label {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
	}
	
	/* ----- heading-lv2 ----- */
	.heading-lv2 {
		margin-top: 70px;
	}
	.heading-lv2 + *:not(section) {
		margin-top: 30px !important;
	}
	.heading-lv2 .heading_title {
		font-size: 3.6rem;
		line-height: 1.2;
		color: #00ada9;
	}
	.heading-lv2 .heading_subtitle + .heading_title {
		margin-top: 5px;
	}
	.heading-lv2 div.block {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-items: center;
		align-items: center;
	}
	.heading-lv2 .heading_title > sup {
		top: -1.5em;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Table
	------------------------------------------------------ */
	/* ----- table-layout ----- */
	.table-layout {
		margin-top: 30px;
	}
	.table-layout > *:first-child {
		margin-top: 0;
	}
	.table_inner {
		margin-top: 10px;
	}
	.table_unit {
		table-layout: fixed;
		width: 100%;
		border-top: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
		border-left: 1px solid #d9d9d9;
	}
	.table_unit th,
	.table_unit td {
		padding: 15px 25px;
		border-bottom: 1px solid #d9d9d9;
		border-left: 1px solid #d9d9d9;
		text-align: left;
		vertical-align: top;
		line-height: 1.6;
	}
	.table_unit th > *:first-child,
	.table_unit td > *:first-child {
		margin-top: 0 !important;
	}
	.table_unit tr > th:first-child,
	.table_unit tr > td:first-child,
	.table_unit tr > th + td {
	}
	.table_unit td > .column-layout {
		margin-top: 10px;
	}
	.table_unit td > ul,
	.table_unit td > ol {
		margin-top: .3em;
		padding-bottom: .3em;
	}
	.table_unit td > ul > li,
	.table_unit td > ol > li {
		margin-top: .1em;
	}
	.table_title {
		font-weight: 700;
		font-size: 2rem;
		line-height: 1.4;
	}
	.cell-style1 {
		background-color: #767676;
		color: #fff;
		font-weight: 400;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Grid
	------------------------------------------------------ */
	[data-row-pc] {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	[data-row-pc="1"] > * {
		margin: 0 auto;
	}
	[data-row-pc="1"] > .gp-al-left {
		margin-left: 0;
	}
	[data-row-pc="2"] > * {
		width: calc((100% - 36px) / 2);
		margin-left: 36px;
	}
	[data-row-pc="3"] > * {
		width: calc((100% - 72px) / 3);
		margin-left: 36px;
	}
	[data-row-pc="4"] > * {
		width: calc((100% - 108px) / 4);
		margin-left: 36px;
	}
	[data-row-pc="5"] > * {
		width: calc((100% - 140px) / 5);
		margin-left: 35px;
	}
	[data-row-pc="6"] > * {
		width: calc((100% - 180px) / 6);
		margin-left: 36px;
	}
	[data-row-pc="1"] > *:first-child,
	[data-row-pc="2"] > *:nth-child(-n+2),
	[data-row-pc="3"] > *:nth-child(-n+3),
	[data-row-pc="4"] > *:nth-child(-n+4),
	[data-row-pc="5"] > *:nth-child(-n+5),
	[data-row-pc="6"] > *:nth-child(-n+6) {
		margin-top: 0 !important;
	}
	[data-row-pc="2"] > *:nth-child(2n+1),
	[data-row-pc="3"] > *:nth-child(3n+1),
	[data-row-pc="4"] > *:nth-child(4n+1),
	[data-row-pc="5"] > *:nth-child(5n+1),
	[data-row-pc="6"] > *:nth-child(6n+1) {
		margin-left: 0 !important;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Column
	------------------------------------------------------ */
	/* ----- column-layout ----- */
	.column-layout {
		margin-top: 30px;
	}
	.column-layout > .column_item {
		margin-top: 30px;
	}
	.column-layout > .column_item > *:first-child {
		margin-top: 0;
	}
	.column-layout > .column_item > section:first-child > *:first-child {
		margin-top: 0;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Other
	------------------------------------------------------ */
	/* ----- accordion-layout ----- */
	.accordion-layout > .accordion_detail {
		display: none;
	}
	.accordion-layout.is-default-open > .accordion_detail {
		display: block;
	}
	.accordion-layout {
		margin-top: 60px;
		border-top: 1px solid #ddd;
	}
	.accordion-layout + .accordion-layout {
		margin-top: 0;
		border-top: none;
	}
	.accordion-layout > .accordion_trigger {
		padding: 20px 35px 20px 30px;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		transition-property: background-color;
		transition-duration: .2s;
	}
	.accordion-layout > .accordion_trigger.is-active,
	.accordion-layout > .accordion_trigger:hover {
		background-color: #f4f4f4;
		cursor: pointer;
	}
	.accordion-layout > .accordion_trigger > .accordion_label {
		position: relative;
		display: block;
		padding-right: 40px;
	}
	.accordion-layout > .accordion_trigger > .accordion_label::before {
		content: "開く";
		position: absolute;
		top: 50%;
		right: -21px;
		display: inline-block;
		width: 60px;
		margin-top: 3px;
		font-size: 1.4rem;
		text-align: center;
		opacity: 0;
		transition-property: opacity;
		transition-duration: .4s;
	}
	.accordion-layout > .accordion_trigger.is-active > .accordion_label::before {
		content: "閉じる";
	}
	.accordion-layout > .accordion_trigger > .accordion_label:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		background: url(/products-search/common/images/com_ic02.png) no-repeat 0 0;
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		transition-property: margin-top, transform;
		transition-duration: .2s;
	}
	.accordion-layout > .accordion_trigger.is-active > .accordion_label:after {
		background: url(/products-search/common/images/com_ic03.png) no-repeat 0 0;
	}
	.accordion-layout > .accordion_detail {
		padding: 20px 70px 30px 30px;
		border-bottom: 1px solid #ddd;
	}
	.accordion-layout > .accordion_detail [data-row-pc="2"] > * {
		width: calc((100% - 36px) / 2);
		margin-left: 36px;
	}
	.accordion-layout > .accordion_detail [data-row-pc="3"] > * {
		width: calc((100% - 71px) / 3);
		margin-left: 35px;
	}
	.accordion-layout > .accordion_detail [data-row-pc="4"] > * {
		width: calc((100% - 108px) / 4);
		margin-left: 36px;
	}
	.accordion-layout > .accordion_detail > *:first-child {
		margin-top: 0;
	}
}