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



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

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
html {
font-size: 1.3px;
line-height: 1.3px;
overflow-y: scroll;
}
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 14rem;
line-height: 22rem;
letter-spacing: 0.4rem;
font-weight: 500;
color:#222;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
a{
text-decoration: none;
transition: 0.2s ease-out;
}
a:hover{
opacity: 0.8;
}



/* ==============================================
body
============================================== */

body{
overflow-x: hidden;
}



/* ==============================================
header
============================================== */

header{
position: relative;
z-index: 100;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
header{
width: 480px;
}
}
@media screen and (min-width:1000px) {
header{
position: fixed;
top:0;
left: 0;
width: calc(50% - 240px);
}
}
header p:nth-child(1){
position: absolute;
top:0;
right : 0;
padding: 10rem 30rem 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:1000px) {
header p:nth-child(1){
padding: 30px 30px 0 0;
}
}
header p:nth-child(1) a img{
width: 63rem;
}
header p:nth-child(2){
position: absolute;
top:0;
left: 0;
padding: 10rem 0 0 30rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:1000px) {
header p:nth-child(2){
padding: 30px 0 0 30px;
}
}
header p:nth-child(2) a img{
width: 43rem;
}



/* ==============================================
main
============================================== */

main{
}



main #left{
position: fixed;
top:0;
left: 0;
width: calc(50% - 240px);
height: 100%;
display: none;
transition: 0.2s ease-out;
}
@media screen and (min-width:1000px) {
main #left{
display: table;
}
}
main #left .inner{
display: table-cell;
text-align: center;
vertical-align: middle;
}
main #left .inner p{
padding: 0 0 10px 0;
}
main #left .inner p img{
width: 180px;
transition: 0.2s ease-out;
}
@media screen and (min-width:1200px) {
main #left .inner p img{
width: 244px;
}
}
@media screen and (max-height:600px) {
main #left .inner p img{
width: 180px;
}
}



main #right{
position: fixed;
top:0;
right: 0;
height: 100%;
display: none;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
main #right{
display: table;
width: calc(100% - 480px);
}
}
@media screen and (min-width:1000px) {
main #right{
width: calc(50% - 240px);
}
}
main #right figure{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
main #right figure img{
width: 100%;
height: 100%;
object-fit: cover;
}
main #right .inner{
display: table-cell;
vertical-align: middle;
background: url("../images/snsn_rcm_bg.png") center;
}
main #right .inner h2{
font-size: 20px;
line-height: 24px;
letter-spacing: 1.6px;
font-weight: 700;
color: #fff;
width: 240px;
margin: auto;
position: relative;
}
main #right .inner h2 img{
width: auto;
height: 96px;
position: absolute;
top:-44px;
right: -20px;
}
main #right .inner ul:nth-child(2){
width: 240px;
margin: auto;
position: relative;
}
main #right .inner ul:nth-child(2) li{
padding: 16px 0 0 0;
}
main #right .inner ul:nth-child(2) li a{
display: block;
position: relative;
}
main #right .inner ul:nth-child(2) li a::after{
content: "";
width: 20px;
height: 20px;
border-radius: 10px;
background: #d70c18 url("../images/snsn_cmn_arw_white.svg") top 6px left 8px no-repeat;
background-size: auto 8px;
position: absolute;
bottom: 8px;
right: 8px;
}
main #right .inner ul:nth-child(2) li a img{
border-radius: 12px;
filter: drop-shadow(0 8px 0 #aacf45);
}
main #right .inner ul:nth-child(2) li:nth-child(2) a img{
filter: drop-shadow(0 8px 0 #ffdb3f);
}
main #right .inner ul:nth-child(2) li:nth-child(3) a img{
filter: drop-shadow(0 8px 0 #7ecef4);
}
main #right .inner ul:nth-child(3){
width: 240px;
margin: auto;
padding: 20px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-height:600px) {
main #right .inner ul:nth-child(3){
display: none;
}
}
main #right .inner ul:nth-child(3) li{
padding: 8px 0 0 0;
}
main #right .inner ul:nth-child(3) li a{
font-size: 13px;
line-height: 20px;
letter-spacing: 0.4px;
color: #fff;
display: block;
height: 40px;
border-radius: 20px;
border: solid 2px #fff;
padding: 8px 0 0 14px;
position: relative;
}
main #right .inner ul:nth-child(3) li a::after{
content: "";
width: 10px;
height: 10px;
background: url("../images/snsn_cmn_arw_white.svg")no-repeat;
background-size: auto 10px;
position: absolute;
top: 12px;
right: 12px;
}
main #right .inner ul:nth-child(3) li:nth-child(1) a::after,
main #right .inner ul:nth-child(3) li:nth-child(2) a::after,
main #right .inner ul:nth-child(3) li:nth-child(3) a::after{
transform: rotate(90deg);
top: 13px;
right: 14px;
}



/* ==============================================
article
============================================== */

article{
position: relative;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
article{
width: 480px;
}
}
@media screen and (min-width:1000px) {
article{
width: 480px;
margin-left: calc(50% - 240px);
transition: 0.2s ease-out;
}
article::before{
content: "";
width: 40px;
height: 100%;
position: absolute;
top:0;
left: -40px;
background: linear-gradient(90deg, rgba(0,78,152,0.0) 0%, rgba(0,78,152,0.1) 100%);
}
article::after{
content: "";
width: 40px;
height: 100%;
position: absolute;
top:0;
right: -40px;
background: linear-gradient(90deg, rgba(0,78,152,0.4) 0%, rgba(0,78,152,0.0) 100%);
}
}



#hero{
transition: 0.2s ease-out;
}
@media screen and (min-width:1000px) {
#hero{
margin: -60px 0 0 0;
}
}
#hero .inner p{
font-size: 14rem;
line-height: 22rem;
letter-spacing: 0.4rem;
text-align: justify;
margin: 16rem 32rem 0 32rem;
}
#hero .inner h1 + p{
margin: 28rem 32rem 0 32rem;
}
#hero .inner p:last-child{
background: url("../images/snsn_cmn_ln_01.png") center top no-repeat;
background-size: 100% auto;
text-align: center;
margin: 28rem 0 0 0;
padding: 52rem 32rem 0 32rem;
}



#campaign{
}
#campaign .inner{
background: #b7d100 url("../images/snsn_cmp_bg.png") top no-repeat;
background-size: 100% auto;
}
#campaign .inner h2{
font-size: 30rem;
line-height: 38rem;
letter-spacing: 1.6rem;
font-weight: 900;
color: #222;
margin: 0 32rem;
padding: 106rem 0 0 0;
}
#campaign .inner .campaign{
margin: 16rem 16rem 0 16rem;
padding: 0 24rem 32rem 24rem;
background: #fff;
border-radius: 16rem;
}
#campaign .inner h2+.campaign{
margin: 104rem 16rem 0 16rem;
}
#campaign .inner .campaign.fin {
position: relative;
}
#campaign .inner .campaign.fin:before {
content: "";
width: 100%;
height: 100%;
z-index: 999;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 0;
left: 0;
}
#campaign .inner .campaign.fin .fin_txt {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border: 5px solid #3695d6;
padding: 20px;
-webkit-border-radius: 8px;
z-index: 999999;
text-align: center;
font-size: 120%;
font-weight: bold;
color: #3695d6;
width: 80%;
line-height: 1.4;
box-sizing: border-box;
}
#campaign .inner .campaign.fin .button a {
color: #666;
background: #ccc;
pointer-events: none;
}
#campaign .inner .campaign h3{
font-size: 20rem;
line-height: 30rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #004e98;
}
#campaign .inner .campaign h3 img{
width: calc(100% + 48rem);
margin: 0 -24rem 20rem -24rem;;
border-radius: 16rem 16rem 0 0;
}
#campaign .inner .campaign p{
font-size: 14rem;
line-height: 22rem;
letter-spacing: 0.4rem;
text-align: justify;
margin: 8rem 0 0 0;
}
#campaign .inner .campaign .button{
margin: 16rem 0 0 0;
}
#campaign .inner .campaign .button a{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 0.8rem;
font-weight: 500;
color: #fff;
text-align: center;
display: block;
height: 60rem;
border-radius: 30rem;
background: #d70c18;
padding: 19rem 0 0 0;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.2));
}
#campaign .inner .campaign .button a::after{
content: "";
display: inline-block;
background: url("../images/snsn_cmn_arw_white.svg") no-repeat;
background-size: auto 14rem;
width: 11rem;
height: 14rem;
vertical-align: middle;
margin: -4rem 0 0 8rem;
}



#playback{
}
#playback .inner{
background: #00418f url("../images/snsn_pb_bg.png") top no-repeat;
background-size: 100% auto;
padding: 0 32rem;
}
#playback .inner h2{
margin: 0 -32rem;
}
#playback .inner p{
font-size: 14rem;
line-height: 22rem;
letter-spacing: 0.4rem;
text-align: justify;
color: #fff;
margin: 28rem 0 0 0;
}
#playback .inner .list{
}
#playback .inner .list #top5{
}
#playback .inner .list #top5 h3{
font-size: 20rem;
line-height: 30rem;
letter-spacing: 1.6rem;
font-weight: 700;
text-align: center;
color: #fff;
background: url("../images/snsn_cmn_ln_02.png") no-repeat;
background-size: 100% auto;
margin: 28rem -32rem 0 -32rem;
padding: 48rem 0 0 0;
}
#playback .inner .list #top5 div{
border-radius: 16rem;
background: #fff;
margin: 20rem 0 0 0;
padding: 12rem 24rem 12rem 24rem;
}
#playback .inner .list #top5 table{
width: 100%;
}
#playback .inner .list #top5 table th{
font-size: 18rem;
line-height: 20rem;
letter-spacing: 0.4rem;
color: #d70c18;
text-align: left;
border-top: 1px solid rgba(0,78,152,0.2);
padding: 12rem 0 12rem 0;
}
#playback .inner .list #top5 table tr:first-child th{
border: none;
}
#playback .inner .list #top5 table td{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 0.4rem;
color: #004e98;
border-top: 1px solid rgba(0,78,152,0.2);
padding: 12rem 0 12rem 0;
}
#playback .inner .list #top5 table tr:first-child td{
border: none;
}
#playback .inner .list #top5 table td:last-child{
text-align: right;
}
#playback .inner .list #top3{
}
#playback .inner .list #top3 h3{
font-size: 20rem;
line-height: 30rem;
letter-spacing: 0.4rem;
font-weight: 700;
text-align: center;
color: #fff;
background: url("../images/snsn_cmn_ln_02.png") no-repeat;
background-size: 100% auto;
margin: 28rem -32rem 0 -32rem;
padding: 48rem 0 4rem 0;
}
#playback .inner .list #top3 div{
border-radius: 16rem;
background: #fff;
margin: 16rem 0 0 0;
padding: 0 24rem 20rem 24rem;
}
#playback .inner .list #top3 div h4{
font-size: 16rem;
line-height: 24rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #004e98;
padding: 20rem 0 4rem 0;
}
#playback .inner .list #top3 div table{
width: 100%;
}
#playback .inner .list #top3 div table th{
font-size: 16rem;
line-height: 26rem;
letter-spacing: 0.4rem;
color: #d70c18;
text-align: left;
}
#playback .inner .list #top3 div table td{
font-size: 14rem;
line-height: 26rem;
letter-spacing: 0.4rem;
}
#playback .inner .list #top3 div table td:last-child{
text-align: right;
}
#playback .inner .list #top3 .button{
margin: 32rem 0 0 0;
}
#playback .inner .list #top3 .button a{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 0.8rem;
font-weight: 500;
color: #fff;
text-align: center;
display: block;
height: 60rem;
border-radius: 30rem;
background: linear-gradient(45deg, #b7d100 0%, #6fb92c 100%);
padding: 19rem 0 0 0;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.2));
}
#playback .inner .list #top3 .button a::after{
content: "";
display: inline-block;
background: url("../images/snsn_cmn_arw_white.svg") no-repeat;
background-size: auto 14rem;
width: 11rem;
height: 14rem;
vertical-align: middle;
margin: -4rem 0 0 8rem;
}



#news{
background: #00418f;
}
#news .inner{
padding: 32rem 0 0 0;
position: relative;
}
#news .inner .image-01{
width: 100%;
height: 122rem;
background: url("../images/snsn_nws_img_01.png") repeat-x 0 0;
background-size: auto 122rem;
animation: image-01 40s linear 0s infinite normal forwards;
}
@keyframes image-01 {
from { background-position: 1260rem 0; }
to { background-position: 0 0; }
}
#news .inner .image-02{
width: 100%;
height: 122rem;
background: url("../images/snsn_nws_img_02.png") repeat-x 0 0;
background-size: auto 122rem;
margin: 20rem 0 0 0;
animation: image-02 40s linear 0s infinite normal forwards;
}
@keyframes image-02 {
from { background-position: -1260rem 0; }
to { background-position: 0 0; }
}
#news .inner .button{
position: absolute;
top:134rem;
left: 0;
width: 100%;
}
#news .inner .button a{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #004e98;
text-align: center;
display: block;
height: 60rem;
border-radius: 30rem;
background: linear-gradient(45deg, #fff 0%, #d2ecfa 100%);
padding: 19rem 0 0 0;
margin: 0 32rem;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.2));
}
#news .inner .button a::after{
content: "";
display: inline-block;
background: url("../images/snsn_cmn_arw_blue.svg") no-repeat;
background-size: auto 14rem;
width: 11rem;
height: 14rem;
vertical-align: middle;
margin: -4rem 0 0 0;
}



#archive{
}
#archive .inner{
background: url("../images/snsn_acv_bg.png") top no-repeat;
background-size: 100% auto;
padding: 0 32rem;
}
#archive .inner h2{
font-size: 30rem;
line-height: 38rem;
letter-spacing: 1.6rem;
font-weight: 900;
color: #fff;
padding: 106rem 0 0 0;
}
#archive .inner ul{
padding: 108rem 0 0 0;
}
#archive .inner ul li{
margin: 16rem 0 0 0;
}
#archive .inner ul li a{
display: block;
position: relative;
}
#archive .inner ul li a::after{
content: "";
width: 24rem;
height: 24rem;
border-radius: 12rem;
background: #004e98 url("../images/snsn_cmn_arw_white.svg") top 8rem left 10rem no-repeat;
background-size: auto 8rem;
position: absolute;
bottom: 14rem;
right: 12rem;
}
#archive .inner ul li a img{
border-radius: 16rem;
}
#archive .inner ul + div{
border: solid 4rem #7ecef4;
border-radius: 16rem;
margin: 16rem 0 0 0;
padding: 0 20rem;
}
#archive .inner ul + div h3{
padding: 20rem 0 0 0;
}
#archive .inner ul + div p{
font-size: 13rem;
line-height: 21rem;
text-align: justify;
padding: 15rem 0 0 0;
}
#archive .inner ul + div .button{
padding: 20rem 0 0 0;
}
#archive .inner ul + div .button a{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 0.8rem;
font-weight: 500;
text-align: center;
color: #FFF;
background: #7ecef4;
display: block;
margin: 0 -20rem;
border-radius: 0 0 10rem 10rem;
padding: 12rem 0 8rem 0;
}
#archive .inner ul + div .button a::after{
content: "";
display: inline-block;
background: url("../images/snsn_cmn_arw_white.svg") no-repeat;
background-size: auto 14rem;
width: 11rem;
height: 14rem;
vertical-align: middle;
margin: -4rem 0 0 8rem;
}
#archive .inner div + div{
border: solid 4rem #004e98;
border-radius: 16rem;
margin: 16rem 0 0 0;
padding: 0 0 24rem 0;
}
#archive .inner div + div h3{
font-size: 16rem;
line-height: 24rem;
font-weight: 900;
color: #004e98;
text-align: center;
padding: 20rem 0 0 4rem;
}
#archive .inner div + div p{
font-size: 12rem;
line-height: 20rem;
letter-spacing: 0;
text-align: center;
color: #004e98;
font-weight: 700;
margin: 4rem 0 0 0;
}
#archive .inner div + div figure{
margin: 16rem 0 0 0;
text-align: center;
}
#archive .inner div + div figure img{
width: auto;
height: 172rem;
}



#sansan{
background: #f1f5f9;
margin: 64rem 0 0 0;
}
#sansan .inner{
padding: 0 32rem 64rem 32rem;
}
#sansan .inner h2{
text-align: center;
padding: 64rem 0 0 0;
}
#sansan .inner h2 img{
width: 107rem;
}
#sansan .inner h3{
font-size: 16rem;
line-height: 24rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #004e96;
text-align: center;
margin: 28rem 0 0 0;
}
#sansan .inner p{
color: #004e96;
text-align: justify;
margin: 16rem 0 0 0;
}
#sansan .inner .button{
margin: 20rem 0 0 0;
}
#sansan .inner .button a{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 0.8rem;
font-weight: 500;
color: #fff;
text-align: center;
display: block;
height: 60rem;
border-radius: 30rem;
background: linear-gradient(90deg, rgba(66,188,227,1) 0%, rgba(54,125,210,1) 100%);
padding: 19rem 0 0 0;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.2));
}
#sansan .inner .button a::after{
content: "";
display: inline-block;
background: url("../images/snsn_cmn_arw_white.svg") no-repeat;
background-size: auto 14rem;
width: 11rem;
height: 14rem;
vertical-align: middle;
margin: -4rem 0 0 8rem;
}



/* ==============================================
footer
============================================== */

footer{
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
footer{
width: 480px;
}
}
@media screen and (min-width:1000px) {
footer{
width: auto;
}
}
footer p{
font-size: 10rem;
line-height: 14rem;
text-align: center;
padding: 20rem 0 22rem 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:1000px) {
footer p{
position: fixed;
bottom: 0;
left: 0;
color: #004e98;
padding: 0 0 30px 30px;
}
}