@charset "UTF-8";
/* CSS Document */

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

コンテンツ

----------------------------------*/
.title-page {
	background: linear-gradient(0deg, #00437F 0, #111111 100%);
	margin-bottom: calc(50px + 2.5vw);
	position: relative;
}
.col-2,
.col-2-re,
.col-4,
.col-2-1,
.col-2-2,
.col-2-2-re,
.col-3{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.col-2-re,
.col-2-2-re {
	flex-direction: row-reverse;
}
.col-scroll {
	overflow-x: auto;
}
.col-2-2 > div {
	width: calc(50% - .75em);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10・11に指定するスタイル */
.bt-inquiry {
	top: calc(100vh - 30px);
  margin-top: -110px !important;
}
}
@media only screen and (min-width: 768px) {
.col-2 > div:not(.col-2-1),
.col-2 > section,
.col-2 > figure,
.col-2-re > div,
.col-2-re > dl,
.col-2-re > figure,
.col-2-1 > dl,
.col-2-1 > div {
	width: calc(50% - 1em);
}
.col-3 > div,
.col-3 > section,
.col-3 > figure {
	width: calc(33% - 1em);
}
.col-4 > div,
.col-4 > section,
.col-4 > figure {
	width: calc(25% - 1em);
}
}
@media only screen and (max-width: 767px) {
/*
	main .pc-only {
		display: none;
	}
*/
	.title-page {
		margin-bottom: 40px;
	}
	#main > .container {
		padding-bottom: 130px!important;
	}
/*
	#main > .container:last-child {
		padding-bottom: 130px;
	}
*/
	.col-2,
	.col-2-re,
  .col-3,
	.col-4 {
		flex-direction: column;
	}
	.col-2.sp-re,
	.col-2-re {
		flex-direction: column-reverse;
	}
	.col-2 > div,
	.col-2 > figure,
	.col-2-re > dl,
	.col-2-re > figure,
	.col-3 > div,
	.col-3 > section,
	.col-3 > figure,
  .col-4 > div,
	.col-4 > section,
	.col-4 > figure{
		width: 100%;
		margin-bottom: 1em;
	}
}

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

用途から探す

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

/*共通*/
.use-link .use-link-col-2 a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.use-link .use-link-col-2 a:hover img {
  opacity: 1;
}
.use-link .use-link-col-2 a div {
    width: 100%;
    max-width: 8em;
    min-width: calc(100% - 220px);
    text-align: center;
    padding: 0 .5em;
}
.use-link .use-link-col-2 a p{
  margin-bottom: 0;
}
.use-link .use-link-col-2 a figure{
  width: calc(100% - 8em);
  max-width: 220px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
.col-3.use-link {
    justify-content: center;
}
.col-3.use-link .use-link-col-2 {
    width: calc(100%/3 - .67em);
    margin-right: 1em;
}
.col-3.use-link .use-link-col-2:last-child {
    margin-right: 0;
}
.use-link .use-link-col-2 a:hover{
  background: #005bac;
}
.use-link .use-link-col-2 a:hover img {
    transform: scale(1.2,1.2);
}
}
@media only screen and (max-width: 767px){
.circle01:before,
.circle02:before,
.circle03:before,
.circle04:before,
.circle05:before {
    content: "";
    font-size: 1.4rem;
    color: #545454;
    background-color: #fff;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: inline-block;
    margin-right: .5em;
}
.circle01:before {
    content: "1";
}
.circle02:before {
    content: "2";
}
.circle03:before {
    content: "3";
}
.circle04:before {
    content: "4";
}
.circle05:before {
    content: "5";
}
.col-3.use-link {
  flex-direction: row;
  flex-wrap: wrap;
}
.use-link .use-link-col-2 a div {
    width: 50%;
    text-align: center;
    padding: 0 .5em;
    max-width: 100%;
}
.use-link .use-link-col-2 a figure{
  width: 50%;
}
}

/*フォント可変*/
.use-heading {
  font-size: 1.6rem;
  font-weight: bold;
}
.mobility .link-arrow-w,
.display .link-arrow-w {
	font-size: 12px;
}
@media only screen and (min-width: 768px) {
.use-heading {
	/*768～1200pxで18px～16pxのフォント可変*/
    font-size: calc(16px + ((1vw - (768 / 100 * 0.1rem)) * 100 * (18 - 16) / (1200 - 768)));
}
.mobility .link-arrow-w,
.display .link-arrow-w {
	/*768～1200pxで16px～14pxのフォント可変*/
    font-size: calc(14px + ((1vw - (768 / 100 * 0.1rem)) * 100 * (16 - 14) / (1200 - 768)));
}
}
@media only screen and (min-width: 1200px) {
	/*1200px以上*/
.use-heading {
  font-size: 1.8rem;
  font-weight: bold;
}
.mobility .link-arrow-w,
.display .link-arrow-w {
    font-size: 1.6rem;
}
}
@media only screen and (max-width: 767px) {
.use-heading {
  font-size: 1.6rem;
}
.mobility .link-arrow-w,
.display .link-arrow-w {
	font-size: 1.4rem;
}
}
/*モビリティ*/
@media only screen and (min-width: 768px){
  .mobility .mobility-wrap {
	position: relative;
  padding: 100px 0;
}
.mobility .mobility-text p.use-heading{
	margin-bottom: .25em;
}

.mobility .mobility-wrap .mobility-box {
}
.mobility .mobility-image {
  position: relative;
}
.mobility .mobility-image img:last-child {
    display: inline-block;
    margin:  0 10%;
    max-width: 80%;
  }
  .mobility .mobility_line {
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin: auto;
}
.mobility .mobility-text01,
.mobility .mobility-text02,
.mobility .mobility-text03,
.mobility .mobility-text04  {
	background: #000;
	color: #fff;
	padding: 1em;
}
.mobility p.use-heading{
	margin-bottom: .5em;
}
.mobility .mobility-text01 {
  position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
}
.mobility .mobility-text02 {
  position: absolute;
	top: 0;
	right: 0;
  margin-bottom: 220px;
	z-index: 50;
}
.mobility .mobility-text03 {
  position: absolute;
	bottom: 0;
	left: 0;
	z-index: 50;
}
.mobility .mobility-text04{
  position: absolute;
	bottom: 0;
	right: 0;
	z-index: 50;
}
.mobility .mobility_circle {
  display: none;
}
}
@media only screen and (max-width: 767px){
.mobility .mobility-image {
  position: relative;
  margin-bottom: 1em;
}
.mobility .mobility-image img:last-child {
  margin:  0;
  max-width: 100%;
}

.mobility .mobility_line {
  display: none;
}
.mobility .mobility-text01,
.mobility .mobility-text02,
.mobility .mobility-text03,
.mobility .mobility-text04{
	width: 100%;
	background: #000;
	color: #fff;
	padding: 1.5em;
  margin-bottom: 1em;
}
.mobility .mobility-text04{
  margin-bottom: 0;
}
.mobility p.use-heading{
	margin-bottom: .25em;
}
.mobility .mobility_circle {
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin: auto;
}
}
/*ディスプレイモバイル*/
.display-info01 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.display-info01 figure {
  width: 100px;
}
.display-info01 p {
  padding: 1.5em 2em;
  border-radius: 10px;
  border: 1px solid #ccc;
  position: relative;
  margin-left: 24px;
}
.display-info01 p:after, .display-info01 p:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:50%;
}
.display-info01 p:after{
  margin-top: -11px;
  border: 11px solid transparent;
  border-right: 19px solid #f05b5b;
  border-right-color:#fff;
}
.display-info01 p:before{
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 20px solid #f05b5b;
  border-right-color:#ccc;
}

@media only screen and (min-width: 768px){
.display .display-wrap{
	position: relative;
  	padding: 80px 0 100px;
}
.display .display-wrap .display-box {
}
.display .display-image {
  	position: relative;
}
.display .display-image img:last-child {
	min-width: 500px;
	display: inline-block;
	margin:  0 10%;
	max-width: 80%;
}
.display .display_line {
  	min-width: calc(500px + 20%);
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin: auto;
}
.display .display-text05 {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 50;
	width: 280px;
}
/*
.display .display-text01 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 50;
	width: 390px;
}
*/
.display .display-text01 {
	position: absolute;
	bottom: 9.5em;
	right: 0;
	z-index: 50;
	width: 280px;
}
/*
.display .display-text03 {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 50;
	width: 280px;
}
*/
.display .display-text02 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	width: 280px;
}
.display .display-text01 a,
.display .display-text02 a,
.display .display-text03 a,
.display .display-text04 a,
.display .display-text05 a {
    background: #000;
    color: #fff;
    padding: .75em 2.2em .75em .75em;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	font-size: 1.6rem;
	position: relative;
} 
.display .display-text01 a:after,
.display .display-text02 a:after,
.display .display-text03 a:after,
.display .display-text04 a:after,
.display .display-text05 a:after {
    content: "";
    width: 1em;
    height: 1em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: .75em;
	top: 0;
    bottom: 0;
    margin: auto;
}
.display .display-text01 a:hover,
.display .display-text02 a:hover,
.display .display-text03 a:hover,
.display .display-text04 a:hover,
.display .display-text05 a:hover {
    background: #005bac;
}
	    
.display .display-heading {
	font-size: 1.8rem;
	font-weight: bold;
}
.display .display-heading:not(:last-child) {
	margin-bottom: .5em;
}
.display .display_circle {
  display: none;
}
}
@media only screen and (max-width: 767px){
  .display-info01 p {
    padding: 1em;
    width: calc(100% - 60px);
  }
.display .display-text01,
.display .display-text02,
.display .display-text03,
.display .display-text04,
.display .display-text05 {
	width: 100%;
	background: #000;
	color: #fff;
  	margin-bottom: 1em;
}
.display .display-text01 a,
.display .display-text02 a,
.display .display-text03 a,
.display .display-text04 a,
.display .display-text05 a{
	display: block;
	padding: .75em 2em .75em .75em;
	position: relative;
	font-size: 1.4rem;
}
.display .display-text01 a:after,
.display .display-text02 a:after,
.display .display-text03 a:after,
.display .display-text04 a:after,
.display .display-text05 a:after {
    content: "";
    width: 1em;
    height: 1em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 1em;
	top: 0;
    bottom: 0;
    margin: auto;
}
.display .display-text01 a:hover,
.display .display-text02 a:hover,
.display .display-text03 a:hover,
.display .display-text04 a:hover,
.display .display-text05 a:hover {
    background: #005bac;
}
.display .display-heading {
	font-size: 1.6rem;
	font-weight: bold;
}
.display .display-heading:not(:last-child) {
	margin-bottom: .5em;
}
.display .display-text04{
	margin-bottom: 0;
}
.display .display-image {
	position: relative;
	margin-bottom: 1em;
}
.display .display-image img:last-child {
	margin:  0;
	max-width: 100%;
}

.display .display_line {
	display: none;
}
.display .display_circle {
    position: absolute;
    top: 50%;
    bottom: 50%;
    margin: auto;
}
}



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

ペースト

----------------------------------*/
.paste-wrap {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
.paste-sw {
    width: 100%;
    display: flex;
}
.paste-sw .sw-silver,
.paste-sw .sw-copper {
    width: 50%;
    text-align: center;
	font-size: 2rem;
	font-weight: bold;
}
.paste-sw .sw-silver a,
.paste-sw .sw-silver p {
	display: block;
	background: linear-gradient(#aaa, #e9e9e9);
	position: relative;
	padding: 1em 0;
	z-index: 0;
}
.paste-sw .sw-copper a,
.paste-sw .sw-copper p{
	display: block;
	background: linear-gradient(#C48F63, #E4D1BB);
	position: relative;
	padding: 1em 0;
	z-index: 0;
}
.paste-sw .sw-silver a:hover, 
.paste-sw .sw-copper a:hover {
	color: #fff;
}
.paste-sw .sw-copper a:after,
.paste-sw .sw-silver a:after {
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    transition-duration: 0.3s;
    transform-origin: bottom left;
    box-sizing: border-box;
    content: '';
    position: absolute;
    z-index: -1;
}
.paste-sw .sw-silver a:after {
    background-color: #aaa;
}
.paste-sw .sw-copper a:after {
    background-color: #BD8251;
}
.paste-sw .sw-copper a:hover::after,
.paste-sw .sw-silver a:hover::after {
    height: 100%;
    width: 100%;
}
.silver .paste-topix {
	width: 100%;
    background: linear-gradient(#e9e9e9, #aaa);
    padding: 2em;
}
.copper .paste-topix {
	width: 100%;
    background: linear-gradient(#E4D1BB, #BD8251);
    padding: 2em;
}
.paste-topix div {
    background: #fff;
    padding: 3em;
}
.heading-paste {
	font-size: 2.8rem;
	font-weight: bold;
}
.heading-paste span{
	color: blue;
}
.list-paste {
	width: 100%;
	margin: auto;
}
.list-paste th,
.list-paste td {
	text-align: center;
	padding: 0 1px;
}
.list-paste th:not(:last-child),
.list-paste td:not(:last-child) {
	border-right: 1px solid #bbb;
	text-align: center;
	padding: .5em 1px;
}
.list-paste th {
	background: #666;
	color: #fff;
}
.list-paste td {
	color: #545454;
}
.list-paste tr:nth-child(even) td {
	background: #f6f6f6;
}
.list-paste tr:nth-child(odd) td {
	background: #e3e3e3;
}
.list-paste tr:not(:last-child) th {
	border-bottom: 1px solid #f6f6f6;
}
.list-paste th:nth-child(1) {
	width: 40%;
}
.list-paste td:nth-child(2) {
	width: 15%;
}
.list-paste td:nth-child(3) {
	width: 45%;
}
.paste_feature {
	
}
.paste_feature .col-2 section:not(:last-child) {
	margin-bottom: 3em;
}
.heading-paste_feature {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1.5em;
    background: #f6f6f6;
    padding: 0.5em;
}

#main .paste_feature img{
	width: 80%;
	margin: auto;	
}
#main .paste_feature .paste_profile_silver img{
	width: 55%;
	margin: auto;	
}
.paste_profile_copper{
	width: 80%;
	margin: auto;
}
#main .paste_feature .paste_profile_copper img{
	width: 100%;
}
.paste_profile_copper div:first-child {
	margin-bottom: .5em;
}
.paste_profile_copper p {
	text-align: left;
	font-weight: bold;
}

.paste-btn a{
	width: 50%;
}
@media only screen and (max-width: 767px){
.silver .paste-topix,
.copper .paste-topix {
    padding: 1em;
}
.paste-topix div {
    padding: 1em;
}
.paste-sw .sw-silver,
.paste-sw .sw-copper {
	font-size: 1.6rem;
}
.heading-paste {
    font-size: 2.4rem;
}
.paste-btn a {
	max-width: 480px;
    width: 100%;
}
.paste_feature .col-2 section{
	width: 100%;
}
#main .paste_profile img{
	min-width: 200px;	
}

}