@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');



/* ==============================================
setting
============================================== */

#sansan h1,#sansan h2,#sansan h3,#sansan h4,#sansan h5,#sansan p,#sansan li {
font-family: 'Roboto','Noto Sans JP', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 30px;
letter-spacing: 0.5px;
margin:0;
padding:0;
color:#231815;
}
#sansan h1,#sansan h2,#sansan h3,#sansan h4,#sansan h5,#sansan div,#sansan ul,#sansan li,#sansan p,#sansan a,#sansan strong,#sansan span {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#sansan img {
border:none;
vertical-align:middle;
}
#sansan table {
border-collapse:collapse;
border-spacing:0;
}
#sansan ul {
list-style:none;
}
#sansan ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #sansan ul { display:inline-block; }
*:first-child+html #sansan ul { display:inline-block; }

.sp{
display:none!important;
}
.red{
color: #dc0000;
}


/* ==============================================
#sansan
============================================== */

#sansan #sansan-title{
margin: 5px 0 0 0;
}
#sansan #sansan-title .inner{
background: url("../images/ssm_ttl_bg.png");
border: none;
width: auto;
margin: 0;
padding: 0;
}
#sansan #sansan-title h1{
width: 100%;
height: 480px;
margin: 0;
padding: 0;
}
#sansan #sansan-title h1 img{
width: 100%;
height: 480px;
object-fit: cover;
}
#sansan #sansan-title p{
font-size: 16px;
line-height: 32px;
font-weight: 500;
width: 960px;
margin: auto;
padding: 35px 0 40px 0;
position: relative;
}
#sansan #sansan-title p::after{
content: "";
background: url("../images/ssm_ttl_img.png");
background-size: 136px 246px;
width: 136px;
height: 246px;
position: absolute;
bottom:20px;
right: -70px;
}



#sansan #sansan-present{
background: url("../images/ssm_prs1_bg.png") top 104px center no-repeat;
}
#sansan #sansan-present .inner{
background: none;
border: none;
width: 960px;
margin: auto;
padding: 0;
}



#sansan #present-01{
margin: 65px 0 0 0;
padding: 0 0 0 440px;
position: relative;
}
#sansan #present-01 h2{
font-size: 30px;
line-height: 40px;
font-weight: 700;
color: #231815;
background: none;
margin: 0;
padding: 0!important;
position: relative;
}
#sansan #present-01 h2 span{
color: #54c3f1;
}
#sansan #present-01 h2 span strong{
font-size: 120px;
line-height: 120px;
font-weight: 700;
}
#sansan #present-01 .date{
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: #b0cf00;
border-bottom: solid 5px #b0cf00;
display: inline-block;
padding: 0;
margin: -2px 0 0 0;
}
#sansan #present-01 .date span{
font-weight: 700;
}
#sansan #present-01 .number{
font-size: 18px;
line-height: 20px;
font-weight: 700;
color: #036eb8;
position: absolute;
top:12px;
right: 0;
width: 132px;
height: 132px;
background: #fff100;
border-radius: 66px;
text-align: center;
padding: 28px 0 0 0;
border: solid 4px #036eb8;
}
#sansan #present-01 .number span{
display: block;
}
#sansan #present-01 .number span strong{
font-size: 60px;
line-height: 110px;
font-weight: 700;
margin: -28px -5px 0 0;
vertical-align: middle;
display: inline-block;
}
#sansan #present-01 .image{
position: absolute;
top:31px;
left: 0;
padding: 0;
}
#sansan #present-01 .image img{
}
#sansan #present-01 h3{
font-size: 40px;
line-height: 50px;
font-weight: 700;
color: #231815;
margin: 0;
padding: 30px 0 0 0;
}
#sansan #present-01 h3 span{
font-size: 14px;
line-height: 28px;
font-weight: 700;
display: block;
}
#sansan #present-01 p{
font-size: 16px;
line-height: 32px;
color: #231815;
margin: 0;
padding: 25px 0 0 0;
}



#sansan #present-02{
position: relative;
margin: 70px 0 0 0;
border: solid 4px #b0cf00;
border-radius: 12px;
background: linear-gradient(90deg, rgba(255,243,195,1) 0%, rgba(255,224,102,1) 100%);
background: #fffabe;
}
#sansan #present-02 h2{
font-size: 24px;
line-height: 36px;
font-weight: 700;
text-align: center;
color: #ffffff;
background: #b0cf00;
margin: 0;
padding: 20px 0 25px 0!important;
position: relative;
}
#sansan #present-02 h2::before{
content: "";
background: url("../images/ssm_prs2_icn.png");
width: 180px;
height: 116px;
position: absolute;
top:-4px;
left: -4px;
}
#sansan #present-02 h2::after{
content: "";
background: url("../images/ssm_prs2_icn.png");
width: 180px;
height: 116px;
position: absolute;
top:-4px;
right: -4px;
transform: scale(-1, 1);
}
#sansan #present-02 h3{
font-size: 30px;
line-height: 40px;
font-weight: 700;
color: #231815;
margin: 0;
padding: 55px 0 0 260px;
position: relative;
}
#sansan #present-02 h3 img{
position: absolute;
top:30px;
left: 90px;
}
#sansan #present-02 h3 span{
font-size: 14px;
line-height: 28px;
font-weight: 500;
display: block;
}
#sansan #present-02 .number{
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #036eb8;
padding: 22px 0 0 0;
position: absolute;
top:115px;
right: 40px;
width: 120px;
height: 120px;
border-radius: 60px;
background: #FFF;
text-align: center;
border: solid 4px #036eb8;
}
#sansan #present-02 .number span{
display: block;
padding: 0 0 0 4px;
}
#sansan #present-02 .number strong{
font-size: 50px;
line-height: 50px;
font-weight: 700;
}
#sansan #present-02 p{
font-size: 16px;
line-height: 32px;
color: #231815;
margin: 0;
padding: 15px 60px 60px 260px;
}



#sansan #sansan-monthly{
}
#sansan #sansan-monthly .inner{
background: none;
border: none;
width: 960px;
margin: auto;
padding: 0;
}
#sansan #sansan-monthly h2{
font-size: 30px;
line-height: 40px;
font-weight: 700;
color: #54c3f1;
background: none;
margin: 0;
padding: 75px 0 0 0!important;
text-align: center;
}
#sansan #sansan-monthly h2::before{
content: "";
width: 6px;
height: 40px;
background: #54c3f1;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
margin: -4px 15px 0 0;
transform:rotate(-30deg);
}
#sansan #sansan-monthly h2::after{
content: "";
width: 6px;
height: 40px;
background: #6ec8f2;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 15px;
transform:rotate(30deg);
}
#sansan #sansan-monthly ul{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-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;
margin: 0 -40px 0 0;
}
#sansan #sansan-monthly ul li{
font-size: 12px;
line-height: 16px;
width: 20%;
float: left;
color: #231815;
background: url("../images/ssm_mnt_bg.png") top left no-repeat;
position: relative;
padding: 120px 0 0 0;
margin: 60px 0 0 0;
}
#sansan #sansan-monthly ul li:nth-child(6){
margin: 60px 0 0 10%;
}
#sansan #sansan-monthly ul li img{
position: absolute;
top:20px;
right: 20px;
width: auto;
height: 150px;
}
#sansan #sansan-monthly ul li strong{
font-size: 15px;
line-height: 22px;
font-weight: 700;
display: block;
}
#sansan #sansan-monthly ul li span{
font-size: 20px;
line-height: 30px;
font-weight: 700;
color: #b0cf00;
display: block;
}
#sansan #sansan-monthly ul li span strong{
font-size: 60px;
line-height: 60px;
display: inline-block;
margin: 0 0 5px 0;
}
#sansan #sansan-monthly ul li:nth-child(7) span strong,
#sansan #sansan-monthly ul li:nth-child(8) span strong,
#sansan #sansan-monthly ul li:nth-child(9) span strong{
font-family: "Roboto Condensed";
letter-spacing: -8px;
margin: 0 8px 5px 0;
}
#sansan #sansan-monthly ul li.on{
background: url("../images/ssm_mnt_bg_on.png") top left no-repeat;
color: #54c3f1;
}
#sansan #sansan-monthly ul li.on span{
color: #54c3f1;
}
#sansan #sansan-monthly ul li.off{
filter: grayscale(100%);
opacity: 0.2;
}


#sansan #cmpn-quiz h2.col01,
#sansan #cmpn-quiz h2.col02{
font-size: 24px;
line-height: 36px;
font-weight: 700;
background: url("../images/ssm_qz_ttl.png") center top no-repeat;
padding: 65px 0 0 0!important;
margin: 50px 0 0 0;
}



#sansan #sansan-link{
}
#sansan #sansan-link .inner{
background: none;
border: none;
width: 960px;
margin: auto;
padding: 0;
}
#sansan #sansan-link h2{
font-size: 30px;
line-height: 40px;
font-weight: 700;
text-align: center;
color: #54c3f1;
background: none;
margin: 0;
padding: 75px 0 0 0!important;
}
#sansan #sansan-link h2 span{
color: #b0cf00;
display: table;
border-bottom: 5px solid #b0cf00;
margin: auto;
}
#sansan #sansan-link ul{
padding: 30px 0 30px 0;
text-align: center;
font-size: 0;
line-height: 0;
}
#sansan #sansan-link ul li{
display: inline-block;
margin: 0 7px 0 0;
}
#sansan #sansan-link ul li:last-child{
margin: 0;
}
#sansan #sansan-link ul li a{
}
#sansan #sansan-link ul li img{
border: solid 1px #dcdcdc;
border-radius: 4px;
width: 313px;
height: auto;
}




#campaign #cmpn-quiz ul li.a01{
    background: #FFF url(../images/cp_qz_a_A.svg) left no-repeat;
    background-size: 90px 438px;
}
#campaign #cmpn-quiz ul li.a02{
    background: #FFF url(../images/cp_qz_a_B.svg) left no-repeat;
    background-size: 90px 438px;
}
#campaign #cmpn-quiz ul li.a03{
    background: #FFF url(../images/cp_qz_a_C.svg) left no-repeat;
    background-size: 90px 438px;
}


/*終了対応*/
#sansan #sansan-title.fin{
  position: relative;
}
#sansan #sansan-title.fin .inner{
  position: relative;
}
#sansan #sansan-title.fin:before{
  content: "";
	width: 100%;
	height: 100%;
	z-index: 999;
	/*filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;*/
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 0;
  left: 0;
}
#sansan #sansan-title.fin .fin_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	background:#fff;
  border: 5px solid #0071BE;
	padding:40px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	z-index: 999999;
	text-align:center;
	font-size:220%;
	font-weight:bold;
	color:#0071BE;
  width: 70%;
  line-height: 1.4;
  box-sizing: border-box;
}
#sansan #sansan-title.fin .fin_txt span {
	font-size:80%;
	font-weight:normal;
}
#campaign p.button.fin a {
  pointer-events: none;
  position: relative;
}
#campaign p.button.fin a::before {
  content: '終了しました';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  line-height: 75px;
}