@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	
	Update Description :
	[2018/4/16] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Global Redefinition
	2. margin / padding
	3. Box Setting
		- Box Layout
	4. Form Setting
	5. Common Items Setting
		- Basic Link
		- Font Style
		- Title Items
	6. Section [News] Setting
	7. Table Style
	8. Vimeo Style

====================================== */



/*===== ■1. Global Redefinition =====*/

#article .products_sa img.origin3 {
    width: 100%;
}

#column_center {
    min-width: 60%;
    margin: 0 30px;
}

.flex_box_start.sa .slick-dots li button:before { background: #DDB900; }
.flex_box_start.sm .slick-dots li button:before { background: #395daa; }
.flex_box_start.su .slick-dots li button:before { background: #B8183F; }

/*===== ■2. margin / padding =====*/

.mauto {
	margin-left:auto;
	margin-right:auto;
}

article img.icon.w25,
#article img.icon.w25 {
	width: 25%; 
}

@media only screen and (max-width: 750px){ }

li.dotlist {
    text-indent: -1.4em;
}

/*===== ■3. Box Setting =====*/

/* Box Layout */
.flex_box_between {
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex_box_around {
	flex-wrap: wrap;
	justify-content: space-around;
}
.flex_box_center {
	flex-wrap: wrap;
	justify-content: center;
}
.flex_box_start {
	flex-wrap: wrap;
	justify-content: flex-start;
}
.flex_box_end {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mediabox2 {
	display:flex;
    /* align-items: center; */
}
.mediabox2 .mediabox2_top {
	display: flex;
	flex: 1 0 auto;
}
.mediabox2_top {
	width: calc(50% - 20px);
	padding: 10px 0 10px 10px;
	margin-bottom: 5px;
}
.mediabox2_top.pd30 {
	padding: 10px 0 10px 30px;
}
.mediabox2 .mediabox2_next {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.mediabox2_next {
	width: 100%;
}
.mediabox2 .mediabox2_next .auto_size {
	margin-top: auto;
	margin-bottom: 0;
	text-align: center;
}
.mediabox2 .mediabox2_next .auto_size.left_posi {
	text-align: left;
}
.mediabox2 .mediabox2_next > * {
    flex-shrink: 0;
}
.mediabox2 a{
	display: inline-block;
	/*width: calc(50% - 20px);*/
	padding: 10px 0 10px 10px;
	margin-bottom: 5px;
	text-align: center;
	text-decoration: none;
}
.mediabox2 .left a{
	text-align: left;
	padding: 5px 0px;
	width: auto;
}
.mediabox2 .select_item a{
	white-space: nowrap;
    max-width: 160px;
}
/* .mediabox2 div{
	display: inline-block;
	width: calc(50% - 20px);
	padding: 10px 0 10px 10px;
	margin-bottom: 5px;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
} */

table.lineupbox {
	width: 100%;
	table-layout: fixed;
}

table.lineupbox th {
	padding: 10px 20px;
	font-weight: bold;
	font-size: 2.4rem;
	vertical-align: bottom;
	text-align: left;
}

table.lineupbox td {
	padding: 10px 20px;
	font-weight: bold;
	vertical-align: bottom;
	text-align: center;
}
table.lineupbox td p {
	margin: 0px auto;
}

.products_box {
	display:flex;
}
.products_box .products_box_top {
	display: flex;
	flex: 1 0 auto;
}
.products_box_top {
	width: 50%;
	padding: 0px;
	margin-bottom: 0px;
}
.products_box .products_box_sub {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.products_box_sub {
	width: 100%;
}
.products_box .products_box_sub .auto_size {
	margin-top: auto;
	margin-bottom: 0;
}
.products_box .products_box_sub > * {
    flex-shrink: 0;
}
.products_box a{
	display: inline-block;
	padding: 10px 0 10px 10px;
	margin-bottom: 5px;
	text-align: center;
	text-decoration: none;
}
.products_box a.pad00{
	padding: 0px;
}
.flex_box_start a{
	display: block;
	margin-bottom: 0px;
}
.products_box .core_product a {
	padding: 0px 0px 0px 5.5%;
}
.products_box .core_product a[target="_blank"][href$=".pdf"]::after {
	background: transparent;
}
article .products_box .core_product a img,
#article .products_box .core_product a img {
	width: 100%;
}
.tree_button {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.blockbox4, 
.blockbox6 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
}

.blockbox4 div, 
.blockbox6 div {
	margin: 0px;
	text-align: center;
	vertical-align: middle;
}

.blockbox4 div {
	width: 25%;
	padding: 5px 0 5px 20px;
}
.blockbox6 div {
	width: 16%;
	padding: 5px 0 5px 5px;
}

.products_list div {
    display: inline-block;
    /* height: 80%; */
    margin: 0px 5px 10px 5px;
}
article .products_list img, #article .products_list img {
	width: unset;
    height: 100%;
}
#main_wrapper .flex3.products_list {
    justify-content: left;
}
#main_wrapper .flex3.products_list > * {
    width: unset;
}

@media only screen and (max-width: 1023px) {
	/* .blockbox4 div, 
	   .blockbox6 div{ width: 25%;} */
}
@media only screen and (max-width: 750px){
	.mediabox2 a{ width: calc(100% - 20px); }
	.mediabox2 div{ width: calc(100% - 20px); }
	.mediabox2_top.pd30 { padding: 10px 0 10px 10px; }
	.blockbox4 div, 
	.blockbox6 div { width: 50%; }

	.products_box a{ width: 100%; }
	.products_box div{ width: 100%; }
	.products_box div.w30sp{ width: 30%; margin: 0px auto; }
	.products_box div.w40sp{ width: 40%; margin: 0px auto; }
	.products_box div.w50sp{ width: 50%; margin: 0px auto; }
	.products_box div.w60sp{ width: 60%; margin: 0px auto; }
	.products_box div.w70sp{ width: 70%; margin: 0px auto; }
	.products_box div.w80sp{ width: 80%; margin: 0px auto; }
	.products_box div.w90sp{ width: 90%; margin: 0px auto; }

	.border_b{ border-bottom: none; }
	
	.product_lineup p.border_b.sp_b {
	    border-bottom: 1px solid #999;
	}
	
	.product_lineup ul li.border_b {
	    border-bottom: 1px solid #999;
	}
		
	.mediabox2 {
		display:block;
	}

	.products_box {
		display:block;
	}

	.tree_button {
		display:block;
	}
}


/*===== ■4. Form Setting =====*/

.win_banner {
    display: block;
}
.sp_banner {
    display: none;
}

.jump_id {
    margin-bottom: 15px;
    padding: 0 5px 15px;
    line-height: 1.3;
}
.jump_id > a {
    display: inline-block;
    position: relative;
    padding: 0px 20px 0px 12px;
    margin: 0px 40px 20px 10px;
}
.jump_id a::before {
	position: absolute;
    top: 15%;
    left: 0;
    border: 5px solid transparent;
    border-left: 6px solid #636262;
    content: '';
}

.display_table {
	display: table;
    width: 100%;
}
.display_table-cell {
	display: table-cell;
}
.product_img {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.tc_img {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
.banner_visual{
    position: relative;
}
.banner_visual img{
    width: 100%;
}
.banner_visual_text {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 5%;
    margin-top: -110px;
    color: #fff;
    text-align: left;
}
.banner_visual_title {
    font-size: 1.8em;
    line-height: 1.2;
    margin:0px;
    padding: 0;
}
.banner_visual_description {
    font-size: 1.4rem;
    margin: 4% 0px;
    padding: 0;
}
.banner_visual_botton.sa_coler {
    border: 2px solid #ddb900;
    background: #ddb900;
}
.banner_visual_botton.sm_coler {
    border: 2px solid #395daa;
    background: #ddb900;
}
.banner_visual_botton.su_coler {
    border: 2px solid #b8183f;
    background: #ddb900;
}
.banner_visual_botton {
    display: inline-block;
    width: auto;
    padding: 10px 20px;
    font-size: 1.8rem;
    position: relative;
    min-width: 250px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .05em;
    text-align: center;
    transition: all .2s ease-out;
}

.product_lineup ul li,
.lineupbox ul li {
    position: relative;
    padding: 5px 20px 5px 0px;
    margin: 0 10px 0 0;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
.product_lineup ul li.non_pb,
.product_lineup ul li.non_pb a {
    padding-bottom: 0px;
}
.product_lineup ul li.border_b {
    border-bottom: 1px solid #999;
}
.product_lineup ul li.non_border {
    border-bottom: none;
}
.product_lineup ul li a,
.lineupbox ul li a {
    display: block;
    padding: 0 5px;
}    
.product_lineup.sa > ul > li > a::before,
.lineupbox.sa td > ul > li > a::before {
    border-color: #ddb900;
}
.product_lineup.sm > ul > li > a::before,
.lineupbox.sm td > ul > li > a::before {
    border-color: #395daa;
}
.product_lineup.su > ul > li > a::before,
.lineupbox.su td > ul > li > a::before {
    border-color: #b8183f;
}
.product_lineup > ul > li > a::before,
.lineupbox td > ul > li > a::before {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -6px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #636262;
    border-right: 2px solid #636262;
    opacity: 1;
    transform: rotate(45deg);
    content: '';
}
.product_lineup > ul > li.non_top > a::before {
    margin-top: 0px;
}
.product_lineup > ul.select_item a::before{
    left: 150px;
}

.products_sa div.category_top {
    position: relative;
    padding: 10px 20px 10px 0px;
    margin: 0 10px 0 0;
    font-weight: bold;
}
.products_sa div.category_btm {
    border-bottom: 2px solid #ddb900;
}
.products_sa div.collapse {
    padding: 10px 20px 10px 5px;
    margin: 0px auto;
    line-height: 0;
}
.collapsing {
	width: 100%;
    padding: 10px 20px 0px 5px;
    margin: 0px auto;
    line-height: 0;
}
.products_sa div.category_top a {
    display: block;
    padding: 0 10px;
}
.products_sa > div.category_top > a::before, 
.products_sa > div.category_top > a::after {
    position: absolute;
    left: inherit;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 2px;
    border: none;
    background: #636262;
    transform: translate(0,-50%);
    content: '';
}
.products_sa > div.category_top > a::after {
    right: 19px;
    width: 2px;
    height: 20px;
}

.products_sa > div.category_top > a[aria-expanded="true"]::after {
    right: 10px;
    width: 20px;
    height: 2px;
}

.youtube_Play {
	width: 100%;
    padding-bottom: 74%;
    height: 0px;
    position: relative;
}

.youtube_Play iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.video_play {
    position: relative;
    height: 0;
    padding: 0 0 40%;
    overflow: hidden;
}

.video_play iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px 20px;
}

.lineup_pc { display: block; }
.lineup_sp { display: none; }

@media only screen and (max-width: 950px){
	.lineup_pc { display: none; }
	.lineup_sp { display: block; }
}

@media only screen and (max-width: 750px){
	.win_banner {
	    display: none;
	}

	.sp_banner {
	    display: block;
	}

	.product_img.displaynonsp {
	    display: none;
	}
	.tc_img {
	    display: none;
	}

	.products_sa > div.category_top > a::before,
	.products_sa > div.category_top > a::after {
	    position: absolute;
	    top: 50%;
	    right: 10px;
	    left: inherit;
	    margin-top: -6px;
	    width: 10px;
	    height: 10px;
	    border-top: 2px solid #636262;
	    border-right: 2px solid #636262;
		background: unset;
	    opacity: 1;
	    transform: rotate(45deg);
	    content: '';
	}

	.video_play { padding: 0 0 70%; }

	.lineup_pc { display: none; }
	.lineup_sp { display: block; }

}



/*===== ■5. Common Items Setting =====*/

/* Basic Link */

.blockbox2.list_set div {
	padding: 10px 0px;
}
.blockbox2.list_set div ul {
	text-align: left;
}

.blockbox4 a.button, 
.blockbox6 a.button {
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
	margin: 0px;
	padding: 5px 5px;
	height: 100%;
	color: white;
}
.blockbox4 a.button { min-width: 25%; }
.blockbox6 a.button { min-width: 16%; }

.auto_size a.button {
	display: inline-block;
	width: auto;
	padding: 10px 20px;
	font-size: 1.6rem;
}

.tree_button a.button {
	display: inline-block;
	width: auto;
	padding: 10px 40px;
	font-size: 1.6rem;
}

.full_size a.button {
	padding: 10px 20px;
	font-size: 2.0rem;
	line-height: 1.8;
}

.blockbox4 a.button:hover,
.blockbox6 a.button:hover,
.full_size a.button:hover,
.auto_size a.button:hover,
.tree_button a.button:hover {
	background: #fff;
	color: #333;
	text-decoration: none;
	transition: all .2s ease-out;
}
a.button.sa_coler {
	border: 2px solid #ddb900;
	background: #ddb900;
}
a.button.sa_coler:hover { color: #ddb900; }
a.button.su_coler {
 	border: 2px solid #b8183f;
	background: #b8183f;
}
a.button.su_coler:hover { color: #b8183f; }
a.button.sm_coler {
 	border: 2px solid #395daa;
	background: #395daa;
}
a.button.sm_coler:hover { color: #395daa; }

.flex4.bodor div {
	border-bottom: 2px solid #636262;
}
.flex4.bodor.sa_coler div {
	border-color: #ddb900;
}
.flex4.bodor.su_coler div {
 	border-color: #b8183f;
}
.flex4.bodor.sm_coler div {
 	border-color: #395daa;
}
.flex4.bodor a {
	display: block;
	padding-bottom: 10px;
}

/* Font Style */
.float_clear { clear: both;}

.text_center { text-align: center;}
.button_center { text-align: center;}

.lineup1 p  {
	display: inline-block;
	vertical-align: middle;
	font-size: 2.4rem;
}
.lineup4 p  {
	display: block;
	margin: 0 auto;
	font-size: 2.4rem;
    padding: 0px 0px 0px 5px;
}

.title_box {
	position: relative;
}
.title_box_txt_left {
	position: absolute;
    left: 0;
}
.title_box_txt_right {
	position: absolute;
    right: 0;
}

.def_icon .produt_name {
	display: block;
	padding-left: 45px;
	font-size: 2.4rem;
	position: relative;
	text-indent: -45px;
}
article .def_icon .produt_name img,
#article .def_icon .produt_name img {
    margin-right: 10px;
    width: 30px;
    vertical-align: middle;
}

/* Title Items */
h3.menu_title {
	margin: 0 20px 25px;
	font-weight: bold;
	font-size: 3rem;
	line-height: 1.3;
	text-align: center;
}

h4.menu_title {
    position: relative;
    margin-bottom: 30px;
    padding: 15px 25px;
    border-bottom: 2px solid #395daa;
    font-weight: bold;
    font-size: 2.8rem;
    line-height: 1.2;
}
h4.menu_title::before {
    position: absolute;
    top: 0;
    left: 0;
    margin: -25px 0 0 -25px;
    border: 25px solid transparent;
    border-bottom: 25px solid #395daa;
    content: '';
    transform: rotate(-45deg);
}
h4.media_title {
    position: relative;
    height: 40px;
    margin: 0 0 20px 0;
    padding: 5px 0 0 52px;
    background: url(/america/img/mark-top-title.gif) no-repeat left top;
    border-bottom: 1px solid #333333;
}
#article h4.media_title img {
	width: unset;
}
.sa h4.media_title:after {
    content: url(/america/img/mark-sanace.gif);
}
.su h4.media_title:after {
    content: url(/america/img/mark-sanups.gif);
}
.sm h4.media_title:after {
    content: url(/america/img/mark-sanmotion.gif);
}
h4.media_title:after {
    position: absolute;
    top: 20%;
    right: 10px;
}                                  
h5.media_title {
	margin: 0 20px 25px;
	font-size: 2.0rem;
	line-height: 1.3;
	text-align: center;
}

.p_mainvisual{
    position: relative;
}
.p_mainvisual img{
    width: 100%;
}
.p_main_titile{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0%;
    margin-top: -50px;
    color: #fff;
    text-align: center;
}
.p_main_titile.sm{
    width: 56%;
    top: 0%;
    left: 2%;
    margin-top: 0px;
    color: #395daa;
    text-align: left;
}
.p_brandname {
    font-size: 3.8rem;
    line-height: 1.8;
    margin: 0;
    padding: 0;
}
.p_description {
    font-size: 2.4rem;
    margin: 0 auto;
    padding: 0;
    width: 70%;
}
.p_description.sm {
    width: 100%;
}

.menu_title_bar {
    color: #fff;
    border: 2px solid #636262;
    background: #636262;
    padding: 10px 20px;
    line-height: 1.8;
    letter-spacing: .05em;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
	/* .blockbox4 a.button, 
	   .blockbox6 a.button { min-width: 25%; } */
}

@media only screen and (max-width: 959px) {
	.blockbox4 a.button, 
	.blockbox6 a.button { font-size: 1.4rem; }
}

@media only screen and (max-width: 859px) {
	.blockbox4 a.button, 
	.blockbox6 a.button { font-size: 1.2rem; }
}

@media only screen and (max-width: 750px){

	.lineup1 p.w20  {
		width: 25%;
	}
	.lineup4 p.w40  {
		width: 50%;
	}
	
	h3.menu_title {
		margin: 0 20px 10px;
	}
	
    .p_brandname { font-size: 3rem; }
    .p_description { font-size: 1.8rem; }
    
	.blockbox4 a.button,
	.blockbox6 a.button {
		min-width: 50%;
		padding: 10px 10px;
		font-size: unset;
	}
		
	.blockbox2.list_set div.top {
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	.blockbox2.list_set div.next {
		margin-bottom: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.product_top a.button.text_size {
	    font-size: 1.6rem;
	}
	.auto_size a.button {
		/* font-size: 1.6rem; */
	}
	.tree_button a.button {
		/* font-size: 1.6rem; */
	}
	.full_size a.button {
		/* font-size: 1.6rem; */
	}
}

/* Background Items */
.bgsanups { background: #B8183F;}
.bgsanmotion { background: #395DAA;}

/*===== ■6. Section [News] Setting =====*/

#top_news ul { margin: 0 5px 20px;}

#top_news li {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted rgba(99,98,98,1);
}
#top_news li:last-child {
	margin: 0;
	/* border: none; */
}

#top_news li a {
	display: block;
	position: relative;
	padding: 5px 0 5px 35px;
	font-weight: 600;
	font-size: 1.4rem;
}
#top_news li a.new::before {
	position: absolute;
	top: 8px;
	left: 0;
	margin-left: 0;
	background: none;
	border: 0 solid transparent;
	border-right: 32px solid transparent;
	border-top: 40px solid #c00;
	content: '';
}
#top_news li a::after { display: none;}
#top_news li a.new::after {
	display: block;
	position: absolute;
	top: 8px;
	left: 2px;
	margin-left: 0;
    background: none;
	color:#fff;
	font-weight: normal;
	font-size: 1.0rem;
	font-family: 'Arial Narrow', Arial, Helvetica, "sans-serif";
	content: 'NEW';
}

#top_news li a:hover {
	background: rgba(99,98,98,.25);
	color: inherit;
	text-decoration: none;
	opacity: 1;
}

#top_news li a time {
	display: block;
	margin-bottom: 3px;
	font-weight: normal;
}

#top_news li a time span {
	display: inline-block;
	position: relative;
	top: -1px;
	width: 90px;
	margin-left: 5px;
	padding: 3px 0 2px;
	background: #ebebeb;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
}
#top_news li a time span.sanups { background: #b8183f; color:#fff;}
#top_news li a time span.sanace { background: #ddb900; color:#fff;}
#top_news li a time span.sanmotion { background: #395daa; color:#fff;}
#top_news li a time span.info { background: #636262; color:#fff;}

#top_news li a p {
	position: relative;
	line-height: 1.4;
}
#top_news li a[target="_blank"] p::after {
    margin-left: 5px;
    font-family: 'icon';
    content: "\e900";
}
#top_news li a[href$=".pdf"] p::after {
	position: absolute;
	bottom: 2px;
	width: 16px;
	height: 14px;
	margin-left: 5px;
	background: url(/img/common/ico-pdf.png) no-repeat right center / 16px auto;
	content:'';
}

#top_news > a {
	max-width: 300px;
	margin: 0 auto;
}


@media only screen and (max-width: 750px){
	#top_news li a:hover {
		background: inherit;
	}
}

/*===== ■7. Table Style =====*/

#main_wrapper table.tc {
	width: 100%;
	border: none !;
}

#main_wrapper table.tc th {
	padding: 15px 5px;
	box-sizing: border-box;
	vertical-align: top;
	border-bottom: 1px solid #ddb900;
	font-weight: bold;
	font-size: 2.0rem;
}

#main_wrapper table.tc td {
	padding: 15px 5px;
	vertical-align: top !important;
	border: none !important;
}

@media only screen and (max-width: 750px){
	#main_wrapper table.tc th {
		display: block;
		width: auto;
		padding: 5px;
	}

	#main_wrapper table.tc td {
		display: block;
		padding: 5px;

	}
}

/*===== ■8. Vimeo Style =====*/
.vimeo_style {
	position: relative;
	height: 0;
	padding: 0 0 360px;
	overflow: hidden;
	max-width: 640px;
	margin: 0 auto 30px;
}

.vimeo_style iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 750px){
	.vimeo_style {
		padding: 0 0 56.25%;
		max-width: initial;
	}
}