@charset "Shift_JIS";

/* **************************************************

Name: everflex_lp.css

Description: LP CSS

Create: 2023.07.01

***************************************************** */


/*キーカラー
#2B3D79
#5171C5
*/

@import url("everflex_nav.css") all;



/* **************************************************
Common
***************************************************** */

body{
background-color: #fff!important;
}

.inner{
max-width: 960px;
width: 100%;
margin: auto;
}

.inner-w{
max-width: 1100px;
width: 100%;
margin: auto;
}

.ef_contents-wrap{
padding: 30px 10px 50px 10px;
}

sub{
font-size: 70%!important;
}


.Section{
padding: 20px 10px;
}


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

body{
font-size: 14px;
}

.ef_contents-wrap{
padding: 50px 10px;
}

#contact #Inqury .TextStyle1,
#contact #Inqury .LinkListStyle1{
font-size: 100%;
}
#contact #Inqury h2{
font-size: 110%;
}

}/****************/


/* **************************************************
BrandingArea
***************************************************** */
.ef_branding{
height: 400px!important;
width: 100%;
background-image: url("/products/it/everflex/lp/img/bg_branding.jpg");
background-size: cover;
}

.ef_branding .contents-wrap{
height: 400px!important;
display: flex;
align-items: center;
justify-content: space-between;
}


.ef_brand-ttlset{
width: 100%;
margin-top: 50px;
}



.ef_brand-ttlset .ef_ttl-txt{
border-bottom: 10px solid #fff;
width: 100%;
margin-bottom: 20px;
}

.ef_brand-ttlset .ef_ttl-txt span{
display: inline-block;
background-color: #fff;
color: #2B3D79;
border-radius: 10px 10px 0 0;
padding: 10px 10px 0 10px;
box-sizing: border-box;
}

.ef_brand-ttlset h1{
color: #fff;
font-size: 2.8em;
line-height: 1em;
font-weight: 700;
text-shadow: 1px 2px 10px #000;
}

.ef_brand-ttlset h1 span{
display: block;
font-size: 0.5em;
}

.ef_branding-img{
display: inline-block;
}


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


.ef_branding{
height: 400px!important;
width: 100%;
background-image: url("/products/it/everflex/lp/img/bg_branding.jpg");
background-size: auto 100%;
background-position: center center;
}

.ef_brand-ttlset{
width: 100%;
margin-top: 0px;
padding-top: 50px;
text-align: center;
}

.ef_branding .contents-wrap{
height: 400px!important;
display: block;
}

.ef_branding-img{
max-width: 320px;
margin: auto auto;
display: block;
}



.ef_brand-ttlset h1{
color: #fff;
font-size: 6.5vw;
text-shadow: 1px 2px 5px #000;
background-color: rgba(0,0,0,0.7);
padding-top: 10px;
margin-bottom: 10px;
}

.ef_brand-ttlset .ef_ttl-txt{
margin-bottom: 0px;
}

.ef_brand-ttlset .ef_ttl-txt{
font-size: 3vw;
}

}/****************/



/* **************************************************
sec01
***************************************************** */

#ef_sec01{
background-image: url("/products/it/everflex/lp/img/sec01_bg.jpg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100%;
}


#ef_sec01 .ef_figure-txt{
display: flex;
justify-content: space-between;
align-items: center;
}

#ef_sec01 .ef_figure-txt h3{
font-size: 1.5em;
text-align: center;
}

#ef_sec01 .ef_figure-txt h3 span{
display: block;
font-size: 0.7em;
}

#ef_sec01 .ef_txt-area{
background-color: #5171C5;
color: #fff;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
margin: 50px 0;
}

#ef_sec01 .ef_feature ul{
display: flex;
justify-content: space-between;
}

#ef_sec01 .ef_feature ul li img{
max-width: 260px;
width: 100%;
height: auto;
margin-bottom: 1em;
}


#ef_sec01 .ef_feature ul li {
text-align: center;
}

#ef_sec01 .ef_feature ul li p span{
display: inline;
font-weight: 600;
border-bottom: 2px solid #5171C5;
}

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

#ef_sec01 .ef_figure-txt{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

#ef_sec01 .ef_figure-txt h3{
font-size: 5vw;
text-align: center;
width: 100%;
order: 3;
}


#ef_sec01 .ef_figure-txt .bubble:first-child{
order: 1;
width: 45%;
font-size: 3vw;
}

#ef_sec01 .ef_figure-txt .bubble:last-child{
order: 2;
width: 52%;
font-size: 3vw;
white-space: nowrap;
}


#ef_sec01 .ef_feature ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#ef_sec01 .ef_feature ul li:nth-child(1),
#ef_sec01 .ef_feature ul li:nth-child(2){
width: 50%;
margin-bottom: 1em;
}

#ef_sec01 .ef_feature ul li:nth-child(3) {
width: 100%;
}

#ef_sec01 .ef_feature ul li img{
max-width: 100px;

}

}/****************/



/* **************************************************
sec02
***************************************************** */

#ef_sec02-1{
background-color: #eee;
padding-bottom: 0!important;
}



#ef_sec02{
background-image: url("/products/it/everflex/lp/img/sec02_bg.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100%;
background-color: #eee;
}


#ef_sec02-1 .ef_figure{
background-image: url("/products/it/everflex/lp/img/sec02_bg_01.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto;
min-height: 365px;
}


#ef_sec02-1 .ef_figure ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
margin: auto;
}

#ef_sec02-1 .ef_figure ul li{
width: 50%;
}

#ef_sec02-1 .ef_figure ul li:nth-child(2n){
display: flex;
justify-content: flex-end;
}


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

#ef_sec02-1 .ef_figure{
background-image: url("/products/it/everflex/lp/img/sec02_bg_01.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto;
min-height: 365px;
height: 700px;

}


#ef_sec02-1 .ef_figure ul{
display: block;
width: 100%;
margin: auto;
}

#ef_sec02-1 .ef_figure ul li{
width: 100%;
margin-bottom: 10px;
}


}/****************/


/*#ef_sec02-2 */

#ef_sec02-2 {
padding: 50px 10px !important;
background-color: #fff;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.5)!important;
position: relative;
z-index: 10;
}


#ef_sec02-2 .Container .ef_txt-L:nth-child(1){
margin-bottom: 1em;
}



#ef_sec02-2 .ef_txt-L {
font-size: 1.3em;
text-align: center;
}

#ef_sec02-2 .ef_figure {
margin-top: 30px!important;
}

#ef_sec02-2 .ef_figure ul{
display: flex;
}


#ef_sec02-2 .ef_figure ul li{
flex: 1;
margin: 0 15px;
box-sizing: border-box;
}


#ef_sec02-2 .ef_figure ul li img{
width: 100%;
height: auto;
}


#ef_sec02-2 .ef_figure ul li span{
width: 90%;
display: block;
margin: 10px auto;
}

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

#ef_sec02-2 .ef_txt-L {
font-size: 1em;
text-align: left;
}

#ef_sec02-2 .ef_figure ul{
display: block;
}

#ef_sec02-2 .ef_figure ul li{
max-width:320px;
margin: 0 auto 20px auto;
}


}/****************/


/*#ef_sec02-3 */

#ef_sec02-3 {
background-color: #eee;
background-image: url("/products/it/everflex/lp/img/sec02_bg.png");
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto;
padding: 0px 10px 50px 10px!important;
}

#ef_sec02-3 .ef_figure {
text-align: center;
background-image: url("/products/it/everflex/lp/img/sec02_bg_02.png");
background-position: bottom;
background-repeat: no-repeat;
background-size: auto auto;
padding-bottom: 100px;
padding-top: 50px;
}


#ef_sec02-3 .ef_txt-L {
font-size: 1.3em;
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 10px 50px;
display: inline-block;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.5)!important;
}

#ef_sec02-3 .ef_figure img{
width: 100%;
height: auto;
margin: 50px 0;
}


/* **************************************************
sec03
***************************************************** */

#ef_sec03 .ef_figure {
text-align: center;
}

#ef_sec03 .ef_txt-L {
font-size: 1.1em;
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 10px 30px;
display: block;
box-sizing: border-box!important;
}

#ef_sec03 .ef_txt-L span{
display: block;
font-size: 130%;
}


#ef_sec03 .ef_txt-L strong{
border-bottom: 3px solid #5171C5;
margin: 0 5px;
}


#ef_sec03 .ef_figure img{
width: 100%;
height: auto;
}


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

#ef_sec03 .ef_txt-L {
font-size: 1.2em;
text-align: left;
background-color: #fff;
border-radius: 10px;
padding: 10px 30px;
display: block;
box-sizing: border-box!important;
}

#ef_sec03 .ef_txt-L span{
display: inline;
font-size: 120%;
}

}/****************/


/* **************************************************
sec04
***************************************************** */


#ef_sec04 {
background-color: #2D4075;
background-image: url("/products/it/everflex/lp/img/sec04_bg.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto;
}

#ef_sec04 .ef_txt-L {
color: #fff;
font-size: 1.1em;
}

#ef_sec04 .ef_txt-N {
color: #fff;
font-size: 1.0em;
}



#ef_sec04 .ef_figure .mgt80 {
margin-top: 80px;
}


#ef_sec04 .feature1,
#ef_sec04 .feature2{
background-color: #fff;
border-radius: 10px;
padding: 70px 10px 30px 10px;
margin-bottom: 50px;
position: relative;
}

#ef_sec04 .feature2{
margin-bottom: 80px;
}


#ef_sec04 .feature1 h3,
#ef_sec04 .feature2 h3{
background-color: #A4C104;
border: solid #fff 3px;
border-radius: 10px;
min-width: 250px;
font-size: 1.2em;
line-height: 1.2em!important;
font-weight: 600;
color: #fff;
text-align: center;
display: inline-block;
margin: auto;
padding: 15px 20px 15px 20px;
position: absolute;
top: -30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#ef_sec04 .feature2 h3{
top: -40px;
}

#ef_sec04 .feature1 h3 span,
#ef_sec04 .feature2 h3 span{
text-shadow: 1px 2px 3px #808080;
}

#ef_sec04 .feature1 dl{
display: flex;
box-sizing: border-box;
}

#ef_sec04 .feature1 dl dt {
max-width: 320px;
padding: 0 20px;
box-sizing: border-box;
margin: auto;
margin-bottom: 1em;
}

#ef_sec04 .feature1 dl dt img,
#ef_sec04 .feature2 dl dt img {
width: 100%;
}


#ef_sec04 .feature1 dl dd{
flex: 1;
}

#ef_sec04 .feature-list li{
position: relative;
padding-left: 1.5em;
margin-bottom: 1em;
}

#ef_sec04 .feature-list li::before{
content: '';
display: block;
width: 10px;
height: 10px;
background-color: #A4C104;
border-radius: 100px;
position: absolute;
margin-left: -1.5em;
top: 0.5em;
}


#ef_sec04 .feature2 dl{
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
}

#ef_sec04 .feature2 dl dd{
width: 100%;
order: 1;
}

#ef_sec04 .feature2 dl dt {
width: 100%;
order: 2;
}

#ef_sec04 .feature2 dl dt {
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
}


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

#ef_sec04 .feature1 dl{
display: block;
}

#ef_sec04 .feature1 h3,
#ef_sec04 .feature2 h3{
font-size: 1.1em;
}


}/****************/


/* **************************************************
sec05
***************************************************** */


#ef_sec05 .usecase{
margin-bottom: 50px;
}

#ef_sec05 .usecase h3{
background-color: #2D4075;
color: #fff;
text-align: center;
padding: 10px;
border-radius: 100px;
margin-bottom: 2em;
}

#ef_sec05 .txt1{
background-image: url("/products/it/everflex/lp/img/sec05_img_01.png");
background-repeat: no-repeat;
background-position: left center;

min-height: 90px;
padding-left: 120px;
color: #2D4075;
position: relative;
margin-bottom: 20px;
}

#ef_sec05 .txt1 span{
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#ef_sec05 .txt2{
background-color: #eee;
border-radius: 10px;
padding: 10px;
display: block;
margin-bottom: 20px;
font-weight: 600;

}

#ef_sec05 .txt3{
background-color: #2D4075;
color: #fff;
border-radius: 0 0 10px 10px;
padding: 20px;
text-align: center;
font-size: 1.2em;
}


#ef_sec05 .txt2 span{
font-size: 90%;
}


#ef_sec05 .usecase-figure{
text-align: center;
}

#ef_sec05 .usecase-figure img{
max-width: 600px;
width: 100%;
}

#ef_sec05 .usecase ul{
background-color: #ECEFF8;
padding: 20px;
display: flex;
}

#ef_sec05 .usecase ul li{
width: 25%;
position: relative;
padding-bottom: 30px;
}

#ef_sec05 .usecase ul li p{
background-color: #fff;
display: block;
margin: 10px;
padding: 10px;
font-size: 90%;
}


#ef_sec05 .usecase ul li b{
text-align: center;
display: block;
border-radius: 100px;
border: solid thin #4F6FC8;
margin: 0 10px;
color: #4F6FC8;
position: absolute;
bottom: 0;
width: 90%;
}


#ef_sec05 .usecase ul li b.cost{
background-color: #C7E5E1;
}

#ef_sec05 .usecase ul li b.agility{
background-color: #FBD8A9;
}

#ef_sec05 .usecase ul li b.security{
background-color: #E2D1E6;
}

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

#ef_sec05 .usecase ul{
background-color: #ECEFF8;
padding: 20px;
display: flex;
flex-wrap: wrap;
}

#ef_sec05 .usecase ul li{
width: 50%;
position: relative;
padding-bottom: 30px;
}


}/****************/





/* **************************************************
sec06
***************************************************** */

#ef_sec06 {
background-color: #4D6CCB;
}

#ef_sec06 .ef_txt-L {
color: #fff;
font-size: 1.1em;
margin-bottom: 1em;
}

#ef_sec06 .menu .ef_txt-N {
color: #333;
margin-bottom: 1em;
}


#ef_sec06 img{
max-width: 1100px;
width: 100%;
}


#ef_sec06 .menu {
background-color: #fff;
border-radius: 10px;
padding: 50px 30px 30px 30px;
margin-bottom: 50px;
position: relative;
}

#ef_sec06 .menu h3 {
background-color: #A4C104;
border: solid #fff 3px;
border-radius: 10px;
min-width: 250px;
font-size: 1.2em;
color: #fff;
text-align: center;
font-weight: 600;
display: inline-block;
margin: auto;
padding: 15px 20px 15px 20px;
line-height: 1.2em;
position: absolute;
top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#ef_sec06 .menu h3 span,
#ef_sec06 .menu h3 span{
text-shadow: 1px 2px 3px #808080;
}

#ef_sec06 .menu > dl{
display: flex;
margin-bottom: 2em;
}

#ef_sec06 .menu > dl dt{
text-align: center;
width: 150px;
padding: 10px;
color: #fff;
margin: auto;
}

#ef_sec06 .menu > dl dd{
flex: 1;
font-size: 90%;
padding: 0 20px;
}

#ef_sec06 .figure-description1 dt {
background-color: #822D6A;
}

#ef_sec06 .figure-description2 dt {
background-color: #B50000;
}

#ef_sec06 .figure-description3 dt {
background-color: #57AB85;
}

#ef_sec06 .figure-description4 dt {
background-color: #9ACFEA;
color: #333!important;
}


#ef_sec06 .menu-figure{
margin-bottom: 1em;
}

#ef_sec06 .AdditionalNotesStyle2{
color: #fff;
}

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

#ef_sec06 .menu > dl{
display: block;
margin-bottom: 2em;
}

#ef_sec06 .menu > dl dt{
margin-bottom: 1em;
}


}/****************/

/* **************************************************
sec07
***************************************************** */

#ef_sec07 .ef_txt-N {
  font-weight: bold;
}

#ef_sec07_everflex {
  margin-bottom: 60px;
}

#ef_sec07 .ef_figure > ul{
display: flex;
justify-content: space-around;
flex-wrap:wrap;
}

#ef_sec07 .ef_figure > ul li{
text-align: center;
margin: 30px 10px 0 0;
padding:10px 10px 0;
box-sizing:border-box;
}
ul#ef_sec07_everflex_list li:nth-child(1),
ul#ef_sec07_everflex_list li:nth-child(2),
ul#ef_sec07_everflex_list li:nth-child(3),
ul#ef_sec07_everflex_list li:nth-child(4),
ul#ef_sec07_everflex_list li:nth-child(5),
ul#ef_sec07_everflex_list li:nth-child(6),
ul#ef_sec07_hybridcloud_list li:nth-child(1),
ul#ef_sec07_hybridcloud_list li:nth-child(2),
ul#ef_sec07_hybridcloud_list li:nth-child(3),
ul#ef_sec07_hybridcloud_list li:nth-child(4){
	margin-right:0;
	width:calc((100% - 22px)/2);
	border-right:2px dotted #cdcdcd;
}
ul#ef_sec07_everflex_list li:nth-child(2),
ul#ef_sec07_everflex_list li:nth-child(4),
ul#ef_sec07_everflex_list li:nth-child(6),
ul#ef_sec07_hybridcloud_list li:nth-child(2),
ul#ef_sec07_hybridcloud_list li:nth-child(4){
	border-right:none;
}
#ef_sec07 .ef_figure > ul li p{
	margin-bottom: 1em;
}
#ef_sec07 .ef_figure > ul li p{
	font-weight:bold;
}
ul#ef_sec07_everflex_list li:nth-child(1) p.ButtonStyle1,
ul#ef_sec07_everflex_list li:nth-child(2) p.ButtonStyle1,
ul#ef_sec07_everflex_list li:nth-child(5) p.ButtonStyle1,
ul#ef_sec07_everflex_list li:nth-child(6) p.ButtonStyle1,
ul#ef_sec07_hybridcloud_list li:nth-child(4) p.ButtonStyle1{
	margin-bottom:0;
}

.ButtonStyle1 li{
margin: auto!important;
}

#ef_sec07 .column {
text-align: center;
}


#ef_sec07 .relation {
text-align: center;
}

#ef_sec07 .relation img{
width: 100%;
margin-bottom: 1em;
}


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

  #ef_sec07 .ef_figure ul{
  display: block;
  }

  #ef_sec07 .ef_figure > ul > li {
    width:100%;
    border-right:0;
    border-bottom:2px dotted #cdcdcd;
    padding:0;
  }
  #ef_sec07 .ef_figure > ul li p.TextStyle1{
    font-size:110%;
  }

  #ef_sec07 .column ul li a .column-Thumbnail{
  width: 100%;
  max-width: 150px;
  padding: 10px;
  }


}/****************/


/* **************************************************
module
***************************************************** */

/*余白*/
.mgt80 {
margin-top: 80px;
}

.mgb50{
margin-bottom: 50px;
}


/*改行*/
.br-sp{
display: none;
}

.br-pc{
display: block;
}

@media screen and (max-width: 767px) {
.br-sp{
display: block;
}
.br-pc{
display: none;
}
}/****************/


/*タイトル*/

.ef_ttl-style01,
.ef_ttl-style01-2{
text-align: center;
font-size: 1.8em;
font-weight: 600;
line-height: 1em;
display: flex;
justify-content: center;
align-items: center;
}


.ef_ttl-style01::before,
.ef_ttl-style01::after{
content: '';
display: inline-block;
width: 50px;
height: 10px;
background-color: #5171C5;
}

.ef_ttl-style01-2::before,
.ef_ttl-style01-2::after{
content: '';
display: inline-block;
width: 50px;
height: 10px;
background-color: #fff;
}


.ef_ttl-style01 span,
.ef_ttl-style01-2 span{
background-color: transparent;
}


.ef_ttl-style01-2 span{
color: #fff!important;
}


.ef_ttl-style02{
color: #666;
text-align: center;
font-size: 1.5em;
}


.ef_ttl-style03{
background-color: #5171C5;
border-radius: 100px;
color: #fff;
text-align: center;
font-size: 1.3em;
padding: 10px!important;
margin: 50px 0 30px 0;

}

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

.ef_ttl-style01,
.ef_ttl-style01-2{
font-size: 4vw;
}


.ef_ttl-style01::before,
.ef_ttl-style01::after{
content: '';
display: inline-block;
width: 25px;
height: 5px;
background-color: #5171C5;
}

.ef_ttl-style01-2::before,
.ef_ttl-style01-2::after{
content: '';
display: inline-block;
width: 25px;
height: 5px;
background-color: #fff;
}

.ef_ttl-style02{
font-size: 3vw;
}


.ef_ttl-style03{
background-color: #5171C5;
border-radius: 100px;
color: #fff;
text-align: center;
font-size: 1.2em;
padding: 10px!important;
margin: 50px 0 30px 0!important;

}



}/****************/

/*吹き出し　下*/
.bubble {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #5171C5;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #5171C5;
  box-sizing: border-box;
		border-radius: 10px;
		text-align: center;
		width: 300px;
}

.bubble:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.bubble:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #5171C5;
  z-index: 1;
}

.bubble p {
  margin: 0;
  padding: 0;
}

/*吹き出し　右*/

.bubble2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  border: solid 3px #555;
  box-sizing: border-box;
		border-radius: 10px;
		text-align: center;
		width: 300px;
		background: linear-gradient(to bottom, #5F5F5F, #848484);
	background: -webkit-linear-gradient(top, #5F5F5F, #848484);
	background: -moz-linear-gradient(top, #5F5F5F, #848484);
}

.bubble2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #333;
  z-index: 2;
}

.bubble2-right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}

.bubble2-right p {
  margin: 0;
  padding: 0;
}


/*吹き出し　左*/

.bubble2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
		border-radius: 10px;
		text-align: center;
		width: 300px;
		background: linear-gradient(to bottom, #5F5F5F, #848484);
	background: -webkit-linear-gradient(top, #5F5F5F, #848484);
	background: -moz-linear-gradient(top, #5F5F5F, #848484);
}

.bubble2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #333;
  z-index: 2;
}

.bubble2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.bubble2-left p {
  margin: 0;
  padding: 0;
}

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


.bubble2-right {
  position: relative;
  display: block;
  margin: 0!important;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  border: solid 3px #555;
  box-sizing: border-box;
		border-radius: 10px;
		text-align: center;
		width: 100%!important;
		background: linear-gradient(to bottom, #5F5F5F, #848484);
	background: -webkit-linear-gradient(top, #5F5F5F, #848484);
	background: -moz-linear-gradient(top, #5F5F5F, #848484);
}

.bubble2-right:before {
  display: none;
}

.bubble2-right:after {
  display: none;
}

.bubble2-right p {
  margin: 0;
  padding: 0;
}


/*吹き出し　左*/

.bubble2-left {
  position: relative;
  display: block;
  margin: 0!important;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
		border-radius: 10px;
		text-align: center;
		width: 100%!important;
		background: linear-gradient(to bottom, #5F5F5F, #848484);
	background: -webkit-linear-gradient(top, #5F5F5F, #848484);
	background: -moz-linear-gradient(top, #5F5F5F, #848484);
}

.bubble2-left:before {
  display: none;
}

.bubble2-left:after {
  display: none;
}



}/****************/








/* for - 1500px
=========================================================================================== */
@media screen and (max-width: 1500px) {
}

/* for - 994px
=========================================================================================== */
@media screen and (max-width: 994px) {
}

/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {
}

/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px) {
}

/* for - 399px
=========================================================================================== */
@media screen and (max-width: 399px) {
}