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


#campaign_xmas2020 .inner{
max-width: 1000px;
margin: 10px auto;
}

#campaign_xmas2020 a{
text-decoration: none;
color: #000;
}

#wrapper{
padding-top: 100px;
}
#headerIn{
background: #000000;
text-align: center;
padding: 20px 0 20px;
}
#headerIn h1 a{
position: relative;
display: inline-block;
}
#headerIn h1 a:before{
background:url(/campaign_xmas2020/img/icon_no1.jpg) no-repeat top left;
content:"";
display: block;
width: 99px;
height: 70px;
position: absolute;
z-index: 10;
margin-left: -120px;
}
#main_visual{
text-align: center;
background: rgb(7,164,234);
background: linear-gradient(0deg, rgba(7,164,234,1) 0%, rgba(65,189,240,1) 100%);
}
#main_visual img{
text-align: center;
margin: 0 auto;
}

h2.main{
    background: #000000;
    color: #ffffff;
    padding: 20px 0px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.05em;
    font-weight: bold;
    line-height: 1.6;
}
h2.main span{
color:#00b0ec;
font-size: 26px;
}
h2.main span o{
    font-size: 80%;
}

.flbox{
display: flex;
justify-content: space-between;
}

.flbox.w100{
width: 100% !important;
display: block !important;
}

.fbox{
display: inline-flex;
flex-direction: column;
padding: 0 0 10px;

}

.fbox.w100{
width: 100% !important;
display: block !important;
}

.item_box .fbox{
border:5px solid #fff;
background: #fff;
}
.item_box{
margin: 0px auto 0px;
background-size: 1800px auto;
padding: 10px 0 30px;

}
.subItem{
background: #fff;
}

.item_box h3{
margin:30px auto 30px;
color: #d7260d;
font-weight: bold;
font-size: 24px;
}

.item_box .ttl{
font-size: 15px;
font-weight: bold;
line-height: 1.5em;
margin: 20px auto 10px;
}
.item_box .btn{
display:inline-block;
margin: 20px auto 0px;
padding: 10px 40px;
background: #00a2ea;

color: #fff;
transition-duration:0.5s;
}
.item_box .btn:hover{
background: #cfcfcf;
opacity: 0.9;
}
#sentenceArea{
background: #000;
padding: 60px 0 60px;
}

#sentenceArea .flbox{
background: #fff;
height: 500px;
overflow: hidden;
margin-bottom: 30px;
}

#sentenceArea .flbox.red{
    background: rgb(7,164,234);
    background: linear-gradient(0deg, rgba(7,164,234,1) 0%, rgba(65,189,240,1) 100%);
color: #fff;
}

#sentenceArea .flbox.w100{
background: #fff;
height: auto;
overflow: hidden;
margin-bottom: 30px;
}



#sentenceArea .fbox{
flex-basis: 50%;
text-align: left;
}
#sentenceArea .txtArea.fbox{
align-items: center;
align-self: center;
font-size: 20px;
line-height: 2em;
}

#sentenceArea .txtArea.w100{
padding: 20px 40px 40px;
}




.f_reverse{
flex-direction: row-reverse;
/*background: #c5111c !important; 
background: linear-gradient(to bottom,  #c5111c 0%,#970313 78%) !important; */
color: #fff !important;
}
#sodalifeArea{
padding: 60px 0;
max-width: 1100px;
margin: 0 auto;
}
#sodalifeArea .flbox{
flex-wrap: wrap;
justify-content: space-between;
}
#sodalifeArea .flbox .fbox{
flex-basis: 33%;
margin:20px 0;
}
#sodalifeArea h3{
text-align: center;
display: block;
margin-bottom: 30px;
}
#sodalifeArea h3 span,
#sodalifeArea h3 img{
font-size:20px;
display: block;
margin: 0 auto 10px;
}
#sodalifeArea .flbox .fbox .ttl{
font-weight: bold;
color: #009eff;
font-size: 22px;
margin:20px 0 20px;
}
#sodalifeArea .flbox .fbox .txt{
text-align: left;
line-height: 1.6em;
padding:0 60px 20px;
}
#uservoiceArea{
padding: 0px 0px 60px;
background: #f0f0f0;
}
#uservoiceArea .inner{
box-shadow:0px 0px 6px 3px rgba(0,0,0,0.05);
margin: 40px auto;
}
#uservoiceArea h3{
background: #000;
color: #fff;
padding: 16px;
margin-bottom: 60px;
font-size: 26px;
letter-spacing: 0.05em;
font-weight: bold;
text-align: center;
}
#uservoiceArea h3 span{
color: #ca121d;
font-size: 18px;
display: block;
margin-bottom: 10px;
}
#uservoiceArea .inner .flbox{
padding: 30px 40px 20px;
background: #fff;
border-bottom: 3px solid #f5f5f5;
}

#uservoiceArea .inner .flbox.nobo{
border: none !important;
}

#uservoiceArea .inner .flbox .img{
flex-direction: column;
justify-content: flex-end;
flex-basis: 150px;
}
#uservoiceArea .inner .flbox .img span{
display: block;
text-align: right;
padding-top: 10px;
}
#uservoiceArea .inner .flbox .txtArea{
flex-direction: column;
flex-basis: 700px;
padding: 0 0 0 20px;
text-align: left;
}
#uservoiceArea .inner .flbox .txtArea .ttl{
color: #c5111c;
font-size: 18px;
font-weight: bold;
padding-bottom: 20px;
}
#uservoiceArea .inner .flbox .txtArea .rating{
margin-bottom: 10px;
}
#uservoiceArea .inner .flbox .txtArea .txt{
line-height: 1.6em;
font-size: 14px;
}
footer#footer{
background: #000000;
}
#footerCopyWrap{
background: none;
}
#footerCopyWrap:after,
#footerCopy:after{
display: none;
}

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

    #campaign_xmas2020 .inner{
        padding: 0 10px;
        box-sizing: border-box;
    }

#gheader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
	background: #000000;
	height: 50px;
	overflow: hidden;
}
#gheader #head-bar {
    position: relative;
    padding: 10px 0 10px;
    width: 100%;
    text-align: center;
    background: #000000;
}
#wrapper{
padding-top: 0px !important;
}
#main_visual img{
width: 100%;
}

h2.main {
    font-size: 20px;
}
h2.main span {
    font-size: 22px;
}


.item_box h3{
	margin:10px auto 10px;
	font-size: 18px;
	text-align: center;
}
.item_box h3 img{
    width: 90%;
    height: auto;
}


.flbox {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
    padding: 8px 0;
    box-sizing: border-box;
}

.item_box a:visited {
    color: #000 !important;
}

.item_box .fbox{
flex-basis: 49%;
text-align: center;
margin-bottom: 20px;
border:2px solid #f5f5f5;
box-sizing: border-box;
/*background: none;*/
}

.item_box .fbox img{
width: 100%;
}


.subItem{
background:none !important;
}

.subItem .flbox {
	justify-content: center !important;
}

.subItem .fbox{
flex-basis: 33% !important;
}

.subItem .ttl {
    font-size: 12px !important;
    margin: 20px auto 0px !important;
}


#sentenceArea .flbox{
display: block !important;
width: 90% !important;
margin: 0 5% 20px !important;
height: auto;
padding:0px;
box-sizing: border-box;
}

#sentenceArea .fbox{
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}
#sentenceArea .txtArea{
padding: 20px 20px 30px;
font-size: 16px;
}

#sentenceArea .fbox img{
width: 100.5%;
height: auto;
}

#sodalifeArea {
    padding: 30px 0;
}

#sodalifeArea .flbox .fbox {
    flex-basis: 50%;
    margin: 10px 0;
	text-align: center;
}
#sodalifeArea .flbox .fbox img{
width: 90%;
}
#sodalifeArea .flbox .fbox .txt {
    padding: 0 10px 20px;
}
#sodalifeArea h3 img{
width: 260px;
margin: 0 auto;
}
#sodalifeArea .flbox .fbox .ttl {
    font-size: 16px;
    margin-bottom: 20px;
}

#uservoiceArea {
    padding: 0px 0px 10px;
}

#uservoiceArea h3 {
    margin-bottom: 30px;
}

#uservoiceArea .inner {
    padding: 0 10px;
    box-sizing: border-box;
}

#uservoiceArea .inner .flbox {
    padding: 16px 16px 16px;
	box-sizing: border-box;
	flex-wrap: wrap;
    background: #fff;
}

#uservoiceArea .inner .flbox .img {
    flex-basis: 34%;
	box-sizing: border-box;
	display: inline-flex;
	align-self: flex-start;
}
#uservoiceArea .inner .flbox .img img{
width: 90%;
}
#uservoiceArea .inner .flbox .txtArea {
    flex-basis: 64%;
    padding: 0 0 0 0px;
	box-sizing: border-box;
	display: inline-flex;
}
#uservoiceArea .inner .flbox .txtArea img{
width: 86%;
}

#uservoiceArea .inner .flbox .txtArea .ttl{
padding-bottom: 10px;
}
#uservoiceArea .inner .flbox .img span {
    text-align: left;
}
#uservoiceArea h3 span {
    margin-bottom: 0px;
}
#gfooter {
    background: #000000;
	color: #ffffff !important;
}
#gfooter {
    border:none;
}
#gfooter .gototop a {
    padding: 20px;
    display: block;
    line-height: 1em;
    text-align: center;
    background: #6b6b6b;
    color: #FFF;
}
h2.main{
padding: 10px 20px 20px;
}
h2.main span.limit {
    background: #d30b11;
    padding: 4px 10px;
    display: block;
    margin: 10px 0px 10px 0px;
    color: #ffffff;
}
.item_box {
    margin:0px auto 0px;
	padding-bottom: 20px;
}
#sentenceArea {
    padding: 30px 0 30px;
}

.fbox.w100 {
    display: block !important;
    width: 90 !important;
    margin: 0 5% 20px;
    height: auto;
    padding: 0px;
    box-sizing: border-box;
}
#sentenceArea .txtArea.w100 {
    padding: 10px 20px 10px 0;
}
#sentenceArea .txtArea.fbox{
font-size: 18px;
line-height: 2em;
}

}