@charset "UTF-8";
/* PC */
@media screen and (min-width: 768px),print {
.abc{position: relative;}

#con01{ width:100%; max-width:1920px; margin:0 auto; padding:123px 0 80px; background: url(../images/concept/con01-bg01.png) repeat-y center top; }
#con01 .ttl{ text-align:center; position:relative;}
#con01 .para-box{ width:100%; max-width:1920px; min-height: 1563px; margin:0 auto; background: url(../images/concept/con01-bg02.png) no-repeat center top; }
#con01 .para-box .txt-box{ width:1100px; margin:0px auto 0; padding-left:42px; position:relative; z-index:5; }
#con01 .para-box .txt-box .ttl1{ font-size:34px; font-weight:900; line-height:59px; letter-spacing:3.4px; margin-bottom:65px; }
#con01 .para-box .txt-box .ttl1 span{ background-color:#000; color:#fff; display:inline-block; padding:4px 14px; margin-bottom:20px; }
#con01 .para-box .txt-box .ttl2{ font-size:26px; font-weight:900; line-height:59px; letter-spacing:2.6px; margin-bottom:60px; }
#con01 .para-box .txt-box .ttl2 span{ background-color:#fff; display:inline-block; padding:4px 18px; }
#con01 .para-box .txt-box .txt{ font-size:20px; font-weight:700; line-height:40px; letter-spacing:2px; margin-bottom:40px; }
#con01 .para-box .txt-box .txt span{ background-color:#fff; display:inline-block; padding:4px 14px; margin-bottom:1px; }

#con01 .icon-box{ margin-top:-290px; }
#con01 .icon-box .list{ width: 1280px; margin:0 auto; display: flex; justify-content: space-between; }
#con01 .icon-box .poyooon {animation: poyooon 0.9s linear 0s 1;}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.05, 0.95) translate(0%, 2.5%); }
  40%  { transform: scale(1.1, 0.9) translate(0%, 7.5%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.95, 1.1) translate(0%, -50%); }
  75%  { transform: scale(0.95, 1.1) translate(0%, -10%); }
  85%  { transform: scale(1.1, 0.9) translate(0%, 7.5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

#con02{ width:100%; max-width:1920px; margin:0 auto -129px; padding:80px 0 0px; background: url(../images/concept/con01-bg01.png) repeat-y center top; }
#con02 .ttl{ text-align:center; font-size:20px; font-weight:700; line-height:40px; letter-spacing:2px; margin-bottom:55px; }
#con02 .pic{ width:860px; margin:0 auto; }
#con02 .inbox{ width:100%; max-width:1920px; margin:0 auto; background-color:#fff; padding:120px 0 120px; }
#con02 .inbox .ttl1{ text-align: center; font-size:30px; font-weight:700; line-height:50px; letter-spacing:1.5px; margin-bottom:70px; }
#con02 .inbox .list{ width:1060px; margin:0 auto; display: flex; justify-content: space-between; }

}


/* SP */
@media screen and (max-width: 767px) {
	.abc{position: relative;}

#con01{ max-margin:0 auto; padding:20vw 0 3vw; background: url(../images/concept/sp-con01-bg01.png) repeat-y center top; background-size: 100%; }
#con01 .ttl{ text-align:center; position:relative; margin:0 10vw; }
#con01 .para-box{ margin:0 auto 14vw; background: url(../images/concept/sp-con01-bg02.png) no-repeat center top; background-size: 100%; }
#con01 .para-box .txt-box{ margin:0vw auto 0; padding-left:3vw; position:relative; z-index:1; }
#con01 .para-box .txt-box .ttl1{ font-size:5.3vw; font-weight:900; line-height: 1.6; letter-spacing: 0.24vw; margin-bottom:5vw; }
#con01 .para-box .txt-box .ttl1 span{ background-color:#000; color:#fff; display:inline-block; padding:0.96vw 3.38vw; margin-bottom:2vw; }
#con01 .para-box .txt-box .ttl2{ font-size:4.2vw; font-weight:900; line-height: 1.6; letter-spacing: 0.24vw; margin-bottom:5vw; }
#con01 .para-box .txt-box .ttl2 span{ background-color:#fff; display:inline-block; padding:0.96vw 4.34vw; }
#con01 .para-box .txt-box .txt-area{ margin:0 3vw 0 0; padding: 5vw 4vw 5vw; background-color:#fff; }
#con01 .para-box .txt-box .txt{ font-size:3.8vw; font-weight:700; line-height: 1.6; letter-spacing: 0.24vw; margin-bottom:9.66vw; }
#con01 .para-box .txt-box .txt1{ font-size:3.8vw; font-weight:700; line-height: 1.6; letter-spacing: 0.24vw; }

#con01 .icon-box .list{ margin:0 4vw; display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center; }
#con01 .icon-box .list li{ width:32%; margin-right:2%; margin-bottom:12vw; }
#con01 .icon-box .list li:nth-child(2n){ margin-right:0; }
#con01 .icon-box .list li img{ width:100% }
#con01 .icon-box .poyooon {animation: poyooon 0.9s linear 0s 1;}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.05, 0.95) translate(0%, 2.5%); }
  40%  { transform: scale(1.1, 0.9) translate(0%, 7.5%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.95, 1.1) translate(0%, -50%); }
  75%  { transform: scale(0.95, 1.1) translate(0%, -10%); }
  85%  { transform: scale(1.1, 0.9) translate(0%, 7.5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

#con02{ margin:0 auto; padding:0vw 0 0vw; background: url(../images/concept/sp-con01-bg01.png) repeat-y center top; background-size: 100%; }
#con02 .ttl{ font-size:3.9vw; font-weight:700; line-height: 1.8; letter-spacing: 0.24vw; margin: 0 7vw 8vw; }
#con02 .pic{ margin:0 auto; }
#con02 .inbox{ margin:0 auto; background-color:#fff; padding:10vw 0 0vw; }
#con02 .inbox .ttl1{ text-align: center; font-size:4vw; font-weight:700; line-height: 1.8; letter-spacing: 0.24vw; margin-bottom:9vw; }
#con02 .inbox .list{ margin:0 12vw; }
#con02 .inbox .list li{ margin-bottom:9vw; }
#con02 .inbox .list li:last-child{ margin-bottom:0; }

}