@charset "UTF-8";

/* index  ===============*/

.index01 {
text-align:center;
padding:35px 0 10px 0;
overflow:hidden;}
.index01 .logo {
margin:0 auto;
max-width:92%;}
.index01 h1 {
font-family:'Zen Maru Gothic';
margin:0.8em 0 0.4em 0;
font-size:243.75%;
font-weight:600;
line-height:1.4;
color:#e06;
letter-spacing:-0.025em;
white-space:nowrap;}
.index01 h1 br {
display:none;}
.index01 .txt {
font-size:106.25%;
font-weight:400;
line-height:1.65;
transform:translate(0.25em,0);}
.index01 .txt br {
display:none;}
/*
.index01 .bnr-index {
position:absolute;
width:34.5%;
max-width:240px;
top:50%;
right:-1.5%;
transform:translate(0,-40%);}
.index01 .bnr-index a {
display:block;}
.index01 .bnr-index a img {
width:100%;
border-radius:50%;
box-shadow:4px 4px 8px 0 rgba(0,0,0,0.15);
transition:transform 0.25s;}
#header .bnr-index a img:hover {
transform:scale(1.03);}
*/
@media only screen and (max-width:1023px) {

.index01 {
padding:3% 0 1% 0;}
.index01 h1 br {
display:block;}
.index01 .txt br {
display:block;}

}

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

.index01 {
padding:23px 0 8px 0;}
.index01 h1 {
font-size:6.9vw;}
.index01 .txt {
font-size:3.5vw;}

}

/* index campaign  ============*/

.index-campaign {
width:95%;
max-width:880px;
padding:0.5em;
margin:2.75em auto 0;
background:#f28faa url("../../images/bg02.png");
border-radius:1em;}
.index-campaign.bg-gray {
background:#ddd;}
.index-campaign-contents {
position:relative;
padding:1.5em;
background:rgba(255,255,255,0.8);
border-radius:0.65em;}
.index-campaign h2 {
margin:0 0 0.8em 0;
padding:0 0 0.3em 85px;
font-size:175%;
line-height:1.3;
color:#e06;
border-bottom:3px dotted #e06;}
.index-campaign .logo {
position:absolute;
left:-27px;
top:-27px;
width:120px;}
.index-campaign a {
display:block;
margin-top:0.5em;
color:#e06;
font-weight:600;
font-size:125%;
text-decoration:underline;}
.index-campaign.bg-gray {
background:#ddddd3;}
.index-campaign.bg-gray h2 {
padding:0 0 0.3em 0;
color:#000;
border-bottom:3px dotted #999;}

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

.index-campaign h2 {
padding:1.2em 0 0.3em 0;}
.index-campaign .logo {
left:50%;
top:0;
width:86px;
transform:translate(-50%,-50%);}

}

.index02 {
font-family:'Zen Maru Gothic';
text-align:center;
margin-top:100px;
letter-spacing:-0.025em;
white-space:nowrap;}
.index02 img {
width:100%;}
.index02 .col-matching {
position:relative;
padding:0 0 0 3%;
width:50%;
background:rgba(255,255,255,0.55);}
.index02 .col-matching::before {
content:"";
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
background:url("../../images/bg01.png") repeat center center / 350px;}
.index02 .col-event {
position:relative;
padding:0 3% 0 0;
width:50%;
background:rgba(255,255,255,0.55);}
.index02 .col-event::before {
content:"";
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
background:url("../../images/bg01_green.png") repeat center center / 350px;}
.index02 .col-inner {
position:relative;
padding-bottom:8%;
max-width:490px;}
.index02 .col-matching  .col-inner {
margin:0 4.0% 0 auto;}
.index02 .col-event  .col-inner {
margin:0 auto 0 4.0%;}
.index02 .ttl-img01 {
position:absolute;
z-index:1;
left:50%;
top:0;
width:48%;
transform:translate(-50%,-30%);}
.index02 .img01 {
pointer-events:none;
position:relative;
z-index:1;
margin:0 auto;
padding-top:20%;
width:56%;}
.index02 .ttl-img02 {
margin:5% auto 0;
width:85%;}
.index02 .txt01 {
margin-top:3.5%;
font-size:106.25%;
line-height:1.7;}
.index02 .result01 {
margin-top:4.5%}
.index02 .result01 .ttl-result {
margin:0 auto 1.5%;
width:18%;}
.index02 .result01 .txt-result {
position:relative;
display:inline-block;
font-size:400%;
line-height:1.15;
font-weight:600;}
.index02 .result01 .txt-result::before , .index02 .result01 .txt-result::after {
content:"";
position:absolute;
right:100%;
top:50%;
width:0.6em;
aspect-ratio:10 / 13;
transform:translate(-20%,-50%);}
.index02 .result01 .txt-result::after {
right:0%;
transform:translate(120%,-50%) scale(-1, 1);}
.index02 .col-matching .result01 .txt-result {
color:#e06;}
.index02 .col-matching .result01 .txt-result::before , .index02 .col-matching .result01 .txt-result::after {
background:url("../../images/index02_txt_result01_m.png") no-repeat center center / cover;}
.index02 .col-event .result01 .txt-result {
color:#1a3;}
.index02 .col-event .result01 .txt-result::before , .index02 .col-event .result01 .txt-result::after {
background:url("../../images/index02_txt_result01_e.png") no-repeat center center / cover;}
.index02 .result01 .txt-result span {
margin-left:0.25em;
font-size:24%;}
.index02 .txt02 {
margin-top:4%;
font-size:168.75%;
line-height:1.4;
font-weight:600;}
.index02 .step01 {
position:relative;
margin:0 auto;
width:92%;}
.index02 .step01 .btn-entry {
position:absolute;
right:0;
top:0;
width:22%;
transform:translate(15%,-80%);}
.index02 .step01 .btn-entry a img {
background:#e06;
border-radius:50%;
transition:background 0.25s;}
.index02 .step01 .btn-entry a img:hover {
background:#e82;}
.index02 .step01 ul {
text-align:left;
position:relative;
justify-content:space-between;
width:100%;}
.index02 .step01 ul li {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
margin-top:3.75%;
padding:0 1em 0.1em;;
width:100%;
white-space:nowrap;
background:#fff;
border-radius:0.7em;}
.index02 .step01 ul li .num-step {
padding:0 0 0.1em 0;
width:26.5%;
font-size:131.25%;
line-height:2.2em;
font-weight:600;}
.index02 .step01 ul li .txt-step {
padding:0 0 0.1em 0;
width:73.5%;
font-size:120%;
line-height:2.2em;
font-weight:300;}
.index02 .txt03 {
margin:4.5% 0 5% 0;
font-size:137.5%;
line-height:1.4;
font-weight:500;}
.index02 .col-matching .txt03 {
color:#e06;}
.index02 .col-event .txt03 {
color:#1a3;}
.index02 .btn01 {
margin:0 auto;
max-width:92%;}
.index02 .btn01 a {
position:relative;
display:block;
padding:0.65em 0 0.75em 0;
font-size:131.25%;
line-height:1.4;
color:#fff;
font-weight:500;
white-space:nowrap;
border-radius:0.8em;
transition:background 0.25s;}
.index02 .col-matching .btn01 a {
background:#e06;}
.index02 .col-event .btn01 a {
background:#1a3;}
.index02 .btn01 a::after {
content:"";
position:absolute;
right:7px;
top:50%;
width:5px;
aspect-ratio:1 / 1;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:translate(0%,-50%) rotate(45deg);}
.index02 .btn01 a:hover {
background:#e82 !important;}

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

.index02 {
margin-top:10%;
font-size:1.6vw;}

}

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

.index02 {
margin-top:18%;
font-size:3.7vw;}
.index02 .col-matching {
padding:0;
width:100%;}
.index02 .col-event {
padding:0;
width:100%;}
.index02 .col-inner {
padding-bottom:12%;
max-width:90%;}
.index02 .col-matching .col-inner {
margin:0 auto;
padding-bottom:20%;}
.index02 .col-event  .col-inner {
margin:0 auto;}
.index02 .img01 {
width:40%;}
.index02 .ttl-img02 {
width:100%;}
.index02 .step01 {
width:100%;}
.index02 .btn01 {
max-width:100%;}

}

.index03 {
position:relative;
background:rgba(255,255,255,0.85);}
.index03::before {
content:"";
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
background:url("../../images/bg01.png") repeat center center / 350px;}
.index03 .ttl-01 {
font-size:168.75%;}
.index03 .col-news {
float:left;
width:47.5%;}
.index03 .col-news ul {
margin:0 auto;
width:100%;}
.index03 .col-news ul li {
margin-bottom:0.8em;
padding:0.2em 0 0.6em 0;
border-bottom:1px dotted #e06;}
.index03 .col-news ul li a {
display:block;
font-size:93.75%;
line-height:1.4;
letter-spacing:-0.025em;}
.index03 .col-news ul li div {
margin-bottom:0.5em;
padding:0 0 1px 68px;
font-size:13px;
line-height:15px;
background:url("../../images/topics0201_18.png") no-repeat left top / 60px;}
.index03 .col-news ul li div.report {
background:url("../../images/topics0202_18.png") no-repeat left top / 60px;}
.index03 .col-news ul li div.message {
background:url("../../images/topics0203_18.png") no-repeat left top / 60px;}

.index03 .col-message {
float:right;
width:47.5%;}
.index03 .col-message ul {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
width:100%;}
.index03 .col-message ul li {
padding:1% 0;
width:32%;}
.index03 .col-message ul li a {
display:block;
padding:0.7em 0.7em 0.6em 0.7em;
background:#fff;
border:1px solid #fff;
box-shadow:2px 2px 8px 0 rgba(0,0,0,0.05);
border-radius:0.5em;
transition:border 0.25s;}
.index03 .col-message ul li a:hover {
border:1px solid #e82;}
.index03 .col-message ul li a .img {
margin:0 0 0.5em 0;
width:100%;
aspect-ratio:4 / 3;
border-radius:0.4em;
overflow:hidden;}
.index03 .col-message ul li a .img img {
object-fit:cover;
object-position:center;
width:100%;
height:100%;}
.index03 .col-message li a .date {
margin-bottom:0.4em;
font-size:12px;
line-height:1.2;
font-weight:500;
color:#e06;}
.index03 .col-message li a .ttl {
color:#333;
font-size:12px;
line-height:15px;
height:15px;
overflow:hidden;}

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

.index03 .col-message ul li {
padding:1.5% 0;
width:48.5%;}

}

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

.index03 .col-news {
float:none;
width:100%;}
.index03 .col-message {
float:none;
margin-top:45px;
width:100%;}

}