@charset "utf-8";

/* ======================================================
 * parts_sp.css
 * ------------------------------------------------------
 * @media only screen and (max-width: 767px)
 * - Common
 * - Elements >>> Text
 * - Elements >>> List
 * - Elements >>> Link
 * - Conditional Elements >>> Heading
 * - Layout >>> Table
 * - Layout >>> Grid
 * - Layout >>> Column
 * - Layout >>> Other
====================================================== */

@media only screen and (max-width: 767px) {
	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */
	/* ----- 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: 5px;
		border: none !important;
		-webkit-transform: rotate(0) !important;
		transform: rotate(0) !important;
		vertical-align: -2px;
	}
	.a-blank::after,
	.link-text > li > .a-blank > .link_label::after {
		margin: 0 5px 0 8px;
		vertical-align: 0;
	}
	
	/* blank icon */
	.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_sp.png) no-repeat 0 0;
		background-size: 10px 10px;
	}
	
	/* .link-text .gp-al-right */
	.link-text.gp-al-right > li > a::after {
		display: none;
	}
	.link-text.gp-al-right > li > a > .link_label {
		position: relative;
	}
	.link-text.gp-al-right > li > a > .link_label::before {
		content: "";
		position: absolute;
		top: .6em;
		left: -15px;
		width: 8px !important;
		height: 8px !important;
		margin-top: -5px;
		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;
		transition-property: left;
		transition-duration: .2s;
	}
	
	/* ----- Micro-interactions ----- */
	/* pattern05 */
	.link-text > li > a::after {
		content: "";
		position: absolute;
		top: .7em;
		left: 0;
		width: 8px !important;
		height: 8px !important;
		margin-top: -5px;
		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;
		transition-property: left;
		transition-duration: .2s;
	}
	
	/* ----- plugin colorbox setting ----- */
	#colorbox #cboxLoadedContent {
		border: none;
	}
	#colorbox #cboxContent {
		background: #fff;
		margin-top: 0;
	}
	#colorbox #cboxClose {
		position: absolute;
		top: 10px;
		right: 15px;
		display: block;
		width: 14px;
		height: 14px;
		background: url(/products-search/common/images/com_ic04_sp.png) 0 0 no-repeat;
		background-size: 14px 14px;
		cursor: pointer;
	}
	#cboxOverlay {
		opacity: .4 !important;
	}
	.js-modal-content {
		display: none;
	}
	.modal-title {
		font-size: 1.7rem;
		line-height: 1.4;
	}
	.modal-image {
		margin-top: 10px;
	}
	.modal-text {
		margin-top: 10px;
	}
	
	/* ------------------------------------------------------
	 * 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;
	}
	
	/* ------------------------------------------------------
	 * Elements >>> Link
	------------------------------------------------------ */
	[class*="link-text"] {
		margin-top: 1em;
	}
	[class*="link-text"] > li {
		margin-top: 1em;
	}
	[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: block;
		padding-left: 15px;
		text-decoration: none;
		color: #369;
	}
	
	/* ------------------------------------------------------
	 * Conditional Elements >>> Heading
	------------------------------------------------------ */
	/* ----- heading-lv1 ----- */
	.heading-lv1 + * {
		margin-top: 25px !important;
	}
	.heading-lv1 + section > .heading-lv2:first-child {
		margin-top: 0 !important;
	}
	.heading-lv1 .heading_subtitle {
		font-size: 1.1rem;
		line-height: 1.2;
	}
	.heading-lv1 .heading_title {
		display: table;
		font-size: 2.3rem;
		line-height: 1.2;
	}
	.heading-lv1 .heading_subtitle + .heading_title {
		margin-top: 5px;
	}
	.heading-lv1 .heading_title > .heading_label {
		display: table-cell;
		width: 100%;
		text-align: left;
		vertical-align: top;
	}
	
	/* ----- heading-lv2 ----- */
	.heading-lv2 {
		margin-top: 30px;
	}
	.heading-lv2 + * {
		margin-top: 15px;
	}
	.heading-lv2 .heading_title {
		font-size: 2.1rem;
		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;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Table
	------------------------------------------------------ */
	/* ----- table-layout ----- */
	.table-layout {
		margin-top: 25px;
	}
	.table-layout > *:first-child {
		margin-top: 0;
	}
	.table_unit {
		width: 100%;
		margin-top: 10px;
		border-top: 1px solid #d9d9d9;
	}
	.table_unit th,
	.table_unit td {
		padding: 10px 15px;
		border-bottom: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
		border-left: 1px solid #d9d9d9;
		line-height: 1.4;
		text-align: left;
	}
	.table_unit th > *:first-child,
	.table_unit td > *:first-child {
		margin-top: 0;
	}
	.table_unit td {
		border-left: 1px solid #d9d9d9;
	}
	.table_title {
		font-weight: 700;
		font-size: 1.4rem;
	}
	.table_subtitle {
		margin-top: 5px;
		font-size: 1.2rem;
		line-height: 1.2;
		text-align: right;
	}
	.table_subtitle + .table_inner {
		margin-top: 5px;
	}
	.cell-style1 {
		background-color: #767676;
		border-left: 1px solid #f4f4f4;
		color: #fff;
		font-weight: 400;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Grid
	------------------------------------------------------ */
	[data-row-sp] {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}
	[data-row-sp="1"] > *:not(.column_item),
	[data-row-sp="1"] > .column_item {
		width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	[data-row-sp="1"] > .column_item {
		-webkit-justify-content: center;
		justify-content: center;
	}
	[data-row-sp="1"] > *:first-child {
		margin-top: 0 !important;
	}
	[data-row-sp="2"] > *,
	[data-row-sp="3"] > * {
		margin-left: 15px;
	}
	[data-row-sp="auto"] > * {
		margin-right: 15px;
	}
	[data-row-sp="2"] > *:nth-child(-n+2) ,
	[data-row-sp="3"] > *:nth-child(-n+3) {
		margin-top: 0 !important;
	}
	[data-row-sp="2"] > *:nth-child(2n+1),
	[data-row-sp="3"] > *:nth-child(3n+1) {
		margin-left: 0 !important;
	}
	[data-row-sp="2"] > * {
		width: calc((100% - 15px) / 2);
	}
	[data-row-sp="3"] > * {
		width: calc((100% - 30px) / 3);
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Column
	------------------------------------------------------ */
	/* ----- column-layout ----- */
	.column-layout {
		margin-top: 30px;
	}
	.column-layout > *:first-child {
		margin-top: 0 !important;
	}
	.column-layout > .column_item {
		margin-top: 20px;
	}
	.column-layout > .column_item > *:first-child,
	.column-layout > .column_item > section > *:first-child {
		margin-top: 0 !important;
	}
	
	/* ------------------------------------------------------
	 * Layout >>> Other
	------------------------------------------------------ */
	/* ----- accordion-layout ----- */
	.accordion-layout > .accordion_detail {
		display: none;
	}
	.accordion-layout.is-default-open > .accordion_detail {
		display: block;
	}
	.accordion-layout {
		margin-top: 30px;
		border-top: 1px solid #ddd;
	}
	.accordion-layout + .accordion-layout {
		margin-top: 0;
		border-top: none;
	}
	.accordion-layout > .accordion_trigger {
		padding: 15px 10px 15px 15px;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		transition-property: background-color;
		transition-duration: .2s;
		cursor: pointer;
	}
	.accordion-layout > .accordion_trigger.is-active {
		background-color: #f4f4f4;
	}
	.accordion-layout > .accordion_trigger > .accordion_label {
		position: relative;
		display: block;
		padding-right: 35px;
	}
	.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_sp.png) no-repeat 0 0;
		-webkit-background-size: 18px 18px;
		background-size: 18px 18px;
		transition-property: top;
		transition-duration: .2s;
	}
	.accordion-layout > .accordion_trigger.is-active > .accordion_label:after {
		background: url(/products-search/common/images/com_ic03_sp.png) no-repeat 0 0;
		-webkit-background-size: 18px 18px;
		background-size: 18px 18px;
	}
	.accordion-layout > .accordion_detail {
		padding: 15px 15px 15px 10px;
		border-bottom: 1px solid #ddd;
	}
	.accordion-layout > .accordion_detail > *:first-child {
		margin-top: 0;
	}
}