@charset "utf-8";

.pc_view { display: none; }

.lp-contents {
    color: #040606;
    font-family:'Noto Sans JP','HGMaruGothicMPRO','HG丸ｺﾞｼｯｸM-PRO';
    text-align: center;
    overflow-x: hidden;
}

.campaign-number span,
.info-number span {
    margin-left: -2px;
    margin-right: -4px;
}

.logo_image img {
    vertical-align: bottom!important;
}

/*メインページ*/
.logo_image {
    width: 19.95%!important;
    height: auto;
    margin: 2.7% 0 2.7% 6.14%
}

.MV {
    width: 100vw;
}

.MV img {
    width: 100%;
    height: auto;
}



/*アコーディオンメニュー*/
.accordion-btn {
    position: relative;
    width: 100%;
    background-color: #c8d736;
    border: 0;
    font-size: 4.27vw;
    font-weight: bold;
    line-height: 1;
    padding: 3.5% 0;
    margin: 0 auto;
}

.accordion-btn::after {
    position: absolute;
    border-left: 2.4vw solid transparent;
    border-right: 2.4vw solid transparent;
    border-top: 3.2vw solid black;
    content: "";
    top: 50%;
    right: 5%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transition: transform .3s ease-in-out, top .3s ease-in-out;
}

.accordion-btn.close::after {
    transform: rotate(180deg);
    top: 35%;
}

/*inoa-black*/
.inoa-black {
    background-color: #040606;
    padding: 11% 0 5.1%;
}

.black-contents {
    width: 88%;
    margin: 0 auto;
}

.inoa-system {
    position: relative;
}

.inoa-system h3 {
    position: relative;
    color: #fff;
    font-size: 6.6vw;
    font-weight: bold;
    line-height: 1;
    margin: 0 auto 3.4%;
    z-index: 999;
    white-space: nowrap;
}

.inoa-system h3 span {
    font-size: 3.2vw;
    vertical-align: top;
}

.system-txt {
    position: relative;
    color: #fff;
    font-size: 3.74vw;
    letter-spacing: 0.35px;
    line-height: 1.43;
    text-align: justify;
    margin: 0 auto;
    z-index: 999;
}

.system-explain {
    margin: 5.2% auto 6.1%;
}

.balloon {
    position: relative;
    width: 45.9%;
    background: #c8d736;
    padding: 1.2% 0 0.8%;
}
  
.balloon:before {
    content: "";
    position: absolute;
    top: 95%;
    left: 50%;
    margin-left: -0.3vw;
    border: 1vw solid transparent;
    border-top: 2.7vw solid #c8d736;
}

.balloon p {
    font-size: 4.54vw;
    font-weight: bold;
    letter-spacing: 0.43px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.balloon p span {
    font-size: 2.3vw;
    vertical-align: top;
}

.system-explain h4 {
    position: relative;
    color: #fff;
    font-size: 6.6vw;
    font-weight: bold;
    line-height: 1.48;
    text-align: left;
    z-index: 998;
    white-space: nowrap;
}

.system-explain h4 span {
    color: #c8d736;
    font-family: futura-pt, sans-serif;
    font-size: 24vw;
    font-weight: 500;
    line-height: 0.3;
    letter-spacing: -1.8px;
}

.system-explain img {
    position: absolute;
    width: 29.16%;
    height: auto;
    top: 0;
    right: -20px;
}

.system-note1 {
    color: #fff;
    font-size: 3.2vw;
    line-height: 1;
    margin: 3% auto 0;
    text-align: left;
}

.system-note2 {
    color: #fff;
    font-size: 3.2vw;
    line-height: 1;
    text-align: left;
    margin: 1.54% auto 6.1%;
}

.inoa-campaign {
    background-color: #fff;
    padding: 7.6% 0 6.1%;
}

.campaign-contents {
    width: 91.22%;
    margin: 0 auto;
}

.campaign-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.campaign-title img {
    width: 5.6%;
    height: auto;
}

.campaign-title h4 {
    font-size: 4.8vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.45px;
    color: #ad2f5b;
    white-space: nowrap;
}

.campaign-title h4 span {
    font-family: futura-pt, sans-serif;
    font-size: 8vw;
    font-weight: 500;
    letter-spacing: -2.1px;
    line-height: 0.57;
    margin-right: 1%;
    vertical-align: bottom;
}

.campaign-add {
    color: #636363;
    font-feature-settings: "palt";
	font-size: 3.74vw;
    font-weight: bold;
	letter-spacing: 0.7px;
	line-height: 1.56;
    margin: 3% auto 1%;
	text-align: center;
    white-space: nowrap;
}

.campaign-add::before,
.campaign-add::after {
	content: '';
	width: 13.1%;
	height: 2px;
	background-color: #040606;
}

.inoa-campaign h2 {
    color: #c8d736;
    /*font-size: 35px;*/
    font-size: 9.34vw;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.4;
}

.inoa-campaign h2 span {
    /*font-size: 40px*/
    font-size: 10.67vw;
}

.inoa-campaign h5 {
    font-size: 5.6vw;
    font-weight: bold;
    line-height: 1.43;
    letter-spacing: 0.75px;
    margin: 4.66% auto 5%;
    color: #ad2f5b;
}

.inoa-campaign h5 span {
    white-space: nowrap;
}

.inoa-campaign p {
    font-size: 3.74vw;
    line-height: 1.43;
    letter-spacing: 0.35px;
}

.inoa-campaign p span {
    font-size: 3.2vw;
    line-height: 1.43;
    letter-spacing: 0.35px;
}

.campaign-hpb {
    /*
    border: solid 4px rgb(174, 47, 92, 0.2);
    padding: 5.7% 0 5.7%;
    */
    margin-top: 3.33%;
}

.hpb-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hpb-logo img {
    width: 40%;
    height: auto;
}

.hpb-logo h4 {
    font-size: 16px;
    line-height: 1.88;
    letter-spacing: 0.4px;
    margin-left: 3px;
    font-weight: bold;
}

.campaign-point {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ae2f5b;
    margin: 5.5% auto 5%;
}

.campaign-max {
    display: flex;
    flex-direction: column;
    font-size: 5.8vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.55px;
}

.campaign-number {
    font-family: futura-pt, sans-serif;
    font-size: 16.2vw;
    font-weight: 500;
    letter-spacing: -1.14px;
    line-height: 0.43;
    margin-left: 1.7%;
}

.campaign-hpb h3 {
    font-size: 6.2vw;
    font-weight: bold;
    letter-spacing: 0.58px;
    line-height: 1;
}

.campaign-limit {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3.5%;
}

.limit-item {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: left;
    margin-right: -16%;
}

.limit-box {
    width: 34.6%;
    background-color: #040606;
    border-radius: 2px;
    box-sizing: border-box;
    color: #fff;
    font-size: 3.2vw;
    font-weight: normal;
    line-height: 1;
    padding: 1.4% 0 1.8%;
    margin-right: 1.74%;
}

.limit-date {
    font-size: 3.2vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.6px;
}

.M10 {
    width: 100%;
    height: 2.14vw;
}

.campaign-button {
    display: block;
    width: 100%;
    background-color: #ae2f5b;
    color: #fff!important;
    font-family: "ヒラギノ角ゴ ProN W6",'Hiragino Kaku Gothic ProN W6', sans-serif;
    font-size: 4.27vw;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 1.6;
    text-decoration: none;
    margin: 6.1% auto 0;
    padding: 4% 0 3%;
}

.campaign-button span {
    font-size: 5.34vw;
}

.inoa-point {
    width: 88%;
    margin: 5.3% auto 6.6%;
}

.inoa-point h3 {
    /*font-size: 25px;*/
    font-size: 6.67vw;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.84;
    margin-bottom: 3%;
    white-space: nowrap;
}

.inoa-point h3 .point-top {
    /*font-size: 25px;*/
    font-size: 6.67vw;
    font-weight: bold;
    letter-spacing: -0.5px;
    line-height: 1.84;
    margin-bottom: 3%;
    white-space: nowrap;
}

.inoa-point h3 .number {
    font-family: futura-pt, sans-serif;
    font-size: 9.34vw;
    font-weight: 500;
    line-height: 1;
    margin-left: -1.3vw;
    margin-right: 0.4vw;
}

.title-border {
    width: 82%;
    height: 2.14vw;
    background-color: #040606;
    margin: 0 auto;
}

.point-flex {
    margin: 5.4% auto 0;
}

.point-item {
    width: 100%;
}

.point-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #c8d736;
    box-sizing: border-box;
    font-size: 5.3vw;
    font-weight: bold;
    line-height: 1.75;
    letter-spacing: 1px;
    padding: 3% 0 3% 8%;
}

.point-box .number {
    color: #fff;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 10.7vw;
    letter-spacing: -0.8px;
    line-height: 1;
    vertical-align: sub;
}

.point-box .text {
    width: 100%;
    text-align: center;
}

.inoa-point .space {
    height: 2.7vw;
}

.point-logo-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6% auto 4.5%;
}

.product-img {
    width: 17.3%;
    height: auto;
}

.point-logo {
    width: 66.56%;
    margin-left: 4.25%;
}

.point-logo img {
    width: 100%;
    height: auto;
}

.point-logo p {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.5px;
    line-height: 1.56;
    margin-top: 9.1%;
}

.point-logo h6 {
    display: inline-block;
    border: solid 1px #040606;
    box-sizing: border-box;
    font-size: 3.2vw;
    font-weight: 600;
    line-height: 1;
    padding: 2.1% 2.52%;
    margin-top: 4.5%;
}

.inoa-point .note {
    font-size: 3.2vw;
    line-height: 1.25;
    text-align: justify;
}

.inoa-what h3 {
    font-size: 8vw;
    font-weight: bold;
    letter-spacing: 1.5px;
    line-height: 1.3;
    margin-bottom: 6.5px;
}

.inoa-what h3 span {
    font-size: 9.06vw;
    font-family: futura-pt, sans-serif;
    letter-spacing: 1.7px;
    line-height: 1.44;
}

.inoa-what h4 {
    font-family: futura-pt, sans-serif;
    font-size: 6.66vw;
    font-weight: 700;
    line-height: 1.4;
    margin: 2% auto 4%;
}

.what-back {
    width: 100%;
    background-color: rgb(200, 215, 54, 0.3);
    padding: 6.67% 0;
}

.what-contents {
    width: 87.74%;
    background-color: #fff;
    margin: 0 auto;
    padding: 4.5% 0 5.3%;
}

.what-contents h5 {
    font-size: 6.66vw;
    font-weight: bold;
    letter-spacing: 0.63px;
    line-height: 1;
}

.what-contents h6 {
    font-size: 5.3vw;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 1.4% auto 2.74%;
}

.what-contents .what-pop {
    width: 33.44%;
    margin: 0 auto;
}

.what-contents img {
    width: 47.12%;
    height: auto;
}

.what-contents p {
    width: 89.7%;
    font-size: 3.73vw;
    line-height: 1.43;
    text-align: justify;
    margin: 1.83% auto 0;
}

.inoa-slider {
    margin: 8.2% auto 8.27%;
}

.inoa-slider h3 {
    font-size: 4.54vw;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: nowrap;
}

.inoa-slider .sub-title {
    font-size: 5.34vw;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: nowrap;
}

.inoa-slider .contents {
    width: 88%;
    margin: 0 auto;
}

.slider {
    margin: 3.6% auto 12.2%;
}

.slider img {
    width: 100%;
    height: auto;
}

.slider-img img {
    height: auto;
    width: 100%
}

.slide-arrow {
    bottom: 0;
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    width: 30px;
}

.prev-arrow {
    width: 12.2%!important;
    height: auto;
    left: 2.5%;
    z-index: 998;
}

.next-arrow {
    width: 12.2%!important;
    height: auto;
    right: 2.5%;
}

/*ドットの見た目*/
.slick-dots li button:before {
    content: '〇'!important;
    opacity: 1!important;
}

.slick-dots li.slick-active button:before {
    content: '•'!important;
    margin-top: 1px;
}

/*ドットの大きさ*/
.slick-dots li button:before{
	font-size: 8px!important;
}

/*ドットの間隔*/
.slick-dots li{
	width: 5px!important;
}

/*ドットの位置*/
.slick-dots{
	bottom: -24px!important;
}

.inoa-slider p {
    font-size: 3.74vw;
    font-weight: 600;
    line-height: 1.43;
    letter-spacing: 0.35px;
    text-align: justify;
    margin: 3% auto 0;
}

.campaign-info {
    width: 100%;
    background-color: #040606;
    padding: 6.7% 0;
}

.info-contents {
    width: 87.74%;
    background-color: #fff;
    margin: 0 auto;
    padding: 3.3% 0;
}

.info-contents h3 {
    font-size: 8vw;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.75px;
    margin-bottom: 3.5px;
}

.info-border {
    width: 73.6%;
    height: 2.14vw;
    background-color: #040606;
    margin: 0 auto;
}

.info-contents h4 {
    font-size: 4.27vw;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.4px;
    /*line-height分margin調整*/
    margin: 4.56% auto;
}

.info-contents h4 span {
    color: #ae2f5b;
}

.info-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-title img {
    width: 10.9%;
    height: auto;
}

.info-title .left {
    margin-right: -3%;
}

.info-title .right {
    margin-left: -3%;
}

.info-title h5 {
    font-size: 4.27vw;
    font-weight: 600;
    line-height: 1.56;
    letter-spacing: 0.45px;
}

.info-title h5 span {
    color: #ae2f5b;
}

.info-flex {
    /*
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    */
    margin: 4.56% auto 8.6%;
}

.info-box {
    width: 36.48%;
    background-color: #040606;
    border-radius: 2px;
    box-sizing: border-box;
    color: #fff;
    font-size: 3.73vw;
    font-weight: bold;
    line-height: 1;
    padding: 1.8% 0;
    margin-right: 1.5%;
}

.info-date {
    font-size: 4vw;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1;
}

.info-flag {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 34.7%;
}

.info-hpb {
    position: relative;
    width: 87.84%;
    border: solid 4px rgb(174, 47, 92, 0.2);
    margin: 0 auto;
    padding: 16.7% 0 10.3%;
}

.info-hpb-sp {
    position: relative;
    width: 87.84%;
    border: solid 4px #eef3c2;
    margin: 0 auto;
    padding: 48px 0 20px;
}

.info-contents .info-sp-title h4 {
    color: #000000;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 5.34vw;
}

.info-contents .info-sp-title h4 span {
    color: #000000;
    font-size: 6.4vw;
}

.info-contents .info-sp-title p {
    font-size: 3.47vw;
  font-weight: 500;
  line-height: 1.63;
}

.info-flag-sp {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 39.45%;
    max-width: 158px;
}

.info-sp-product {
    width: 76.5%;
    margin: 0 auto;
    margin-top: 15px;
}

.info-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-logo img {
    width: 40%;
    height: auto;
}

.info-logo h4 {
    font-size: 4.27vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.4px;
    margin: 0 0 0 1.2%;
}

.info-number {
    color: #ae2f5b;
    font-family: futura-pt, sans-serif;
    font-size: 14.67vw;
    font-weight: 500;
    letter-spacing: -1.14px;
    line-height: 1;
}

.number-large {
    color: #ae2f5b;
    font-family: futura-pt, sans-serif;
    font-size: 15.2vw;
    font-weight: 500;
    letter-spacing: -1.14px;
    line-height: 1;
}

.info-hpb h6 {
    font-size: 6.14vw;
    font-weight: bold;
    letter-spacing: 0.58px;
    line-height: 1;
    margin-top: 3%;
}

.info-center {
    margin: 3.04% auto 0;
}

.step-contents h4 {
    font-size: 8vw;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.75px;
    margin-bottom: 1.5px;
}

.step-contents {
    padding-top: 1.4%;
}

.step-border {
    width: 36.15%;
    height: 2.14vw;
    background-color: #040606;
    margin: 0 auto;
}

.step01-limit {
    margin: 4% auto!important;
}

.step-balloon {
    position: relative;
    width: 88%;
    background: rgb(174, 47, 91, 0.2);
    font-size: 3.73vw;
    line-height: 1.43;
    letter-spacing: 0.35px;
    margin: 0 auto 5.63%;
    padding: 3% 0;
}
 
.step-balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 5px solid transparent;
    border-top: 9px solid rgb(174, 47, 91, 0.2);
}
  
.step-balloon p {
    margin: 0;
    padding: 0;
}

.step-balloon p span {
    font-weight: bold;
}

.entry-button {
    display: block;
    width: 88%;
    font-family:'Noto Sans JP','HGMaruGothicMPRO','HG丸ｺﾞｼｯｸM-PRO';
    background-image: linear-gradient(to bottom, #e82b6d, #880b37);
    color: #fff!important;
    font-size: 5.33vw;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 auto 3%!important;
    padding: 8% 0 8%;
    text-decoration: none!important;
}

.step-balloon2 {
    position: relative;
    width: 88%;
    background: rgb(174, 47, 91, 0.2);
    font-size: 3.73vw;
    line-height: 1.43;
    letter-spacing: 0.35px;
    margin: 0 auto 7.12%;
    padding: 6% 0;
}
 
.step-balloon2:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 5px solid transparent;
    border-top: 9px solid rgb(174, 47, 91, 0.2);
}
  
.step-balloon2 p {
    margin: 0;
    padding: 0;
}

.step-balloon2 p span {
    font-weight: bold;
}

.search-button {
    display: block;
    width: 88%;
    background-color: #040606;
    color: #fff!important;
    font-family: "ヒラギノ角ゴ ProN W6",'Hiragino Kaku Gothic ProN W6', sans-serif;
    font-size: 5.33vw;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 auto 3.56%!important;
    padding: 9% 0 8%;
    text-decoration: none!important;
}



/*float*/
.float {
    display: none;
	width: 44.7%;
	margin: 0 auto;
}

.float-btn {
	width: 60.53%;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
}

.float-btn img {
	width: 100%;
	height: auto;
	
}

.float-btn:hover {
	opacity: .8;
	transition: .3s;
	cursor: pointer;
}


/*modal*/
.menu-modal-btn {
	width: 93%;
    margin: 0 auto;
}

.menu-modal-btn .modal-button {
	margin-bottom: 80px;
}

.menu-modal-btn p {
	color: #fff;
	font-size: min(1.93vw,25px);
	line-height: 2.12;
	margin: auto 0 auto 20%;
	padding: 2.9% 0 2.9%;
}

.menu-modal-btn img {
	width: 100%;
	height: auto;
	
}

.menu-modal-btn:hover {
	opacity: .8;
	transition: .3s;
	cursor: pointer;
}

.menu-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}

.menu-modal .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	cursor: pointer;
	margin: 0 -500%;
	padding: 0 500%;
}

.menu-modal .wrap {
	position: fixed;
    top: 5%;
	bottom: 0;
    right: 0;
	left: 0;
    border-radius: 15px;
    overflow-y: auto;
	overflow-y: scroll;
}



.menu-modal .contents img {
	width: 93vw;
}

.menu-modal .close-btn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
}

.menu-modal .close-btn img {
	width: 3.55%;
	height: auto;
    margin-top: 4vw;
    margin-left: 81vw;
}

.menu-modal .close-btn2 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
}

.menu-modal .close-btn2 img {
	width: 11.9%;
	height: auto;
	margin-top: 286vw;
}


/*modal*/
/*
.menu-modal-btn p {
	color: #fff;
	font-size: 4.8vw;
	line-height: 1;
	margin: auto auto;
	padding: 4.5vw 0 4.5vw;
}


.menu-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.menu-modal .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	padding: 0 500%;
	margin: 0 -500%;
	cursor: pointer;
}

.menu-modal .wrap {
	position: absolute;
    top: 56%;
    left: 50%;
    border-radius: 15px;
    transform: translate(-50%, -50%);
}

.menu-modal .contents {
    height: 90vh;
	overflow-y: auto;
	overflow-y: scroll;
}

.menu-modal .contents img {
	width: 92vw;
	padding-bottom: 10vh;
}

.menu-modal .close-btn {
	position: absolute;
	top: 5%;
	right: 6%;
	cursor: pointer;
}

.menu-modal .close-btn img {
	width: 63%;
}

.menu-modal .close-btn2 {
	position: absolute;
	bottom: 17%;
	left: 50%;
    transform: translate(-50%, -50%);
	cursor: pointer;
}

.menu-modal .close-btn2 img {
	width: 93.8%;
}*/



/*エントリー完了ページ*/
.logo-img {
    text-align: center;
    margin: 5.34% auto 8%!important;
    padding: 2px 0!important;
}

.logo-img img {
    width: 29.4%;
    height: auto;
}

.entry-title {
    position: relative;
    width: 89.07%;
    margin: 0 auto;
}

.entry-title img {
    width: 97%;
    height: auto;
}

.entry-title p {
    width: max-content;
    position: absolute;
    color: #ffffff;
    font-size: 5.34vw;
    letter-spacing: 0.5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[class*="triangle"]{
    width:0;
    height:0;
}

.triangle {
    border-right: 2.27vw solid transparent;
    border-top: 4vw solid #040606;
    border-left: 2.27vw solid transparent;
    margin: 4% auto;
}

.step {
    width: 100%;
    background-color: rgb(174, 47, 91, 0.2);
    padding: 6.67% 0;
    text-align: center;
}

.step-contents {
    width: 90%;
    background-color: #fff;
    margin: 0 auto;
}

.step-title {
    display: inline-block;
    border: solid 4px #040606;
    box-sizing: border-box;
    color: #040606;
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-size: 6.67vw;
    letter-spacing: -0.5px;
    line-height: 1;
    padding: 0.9% 6.3%;
    margin: 7% auto 3%;
}

.entry-step {
    margin-top: 0!important;
}

.step h2 {
    font-size: 4.8vw;
    font-weight: bold;
    letter-spacing: 0.45px;
    line-height: 1.33;
}

.step-limit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3.6% auto 4.5%;
}

.step-limit p {
    font-size: 3.74vw;
    font-weight: bold;
    line-height: 1;
}

.step-box {
    background-color: #040606;
    border-radius: 2px;
    box-sizing: border-box;
    color: #fff;
    padding: 1.2% 3.26% 1.5%;
    margin-right: 1.5%;
}

.step-limit .step-date {
    font-size: 4vw;
    letter-spacing: 0.38px;
    color: #040606;
}

.step-button {
    display: inline-block;
    background-color: #ae2f5b;
    color: #fff;
    font-family: "ヒラギノ角ゴ ProN W6",'Hiragino Kaku Gothic ProN W6', sans-serif;
    font-size: 5.34vw;
    font-weight: bold;
    line-height: 1;
    padding: 8.89% 20.3%;
}

.step-example {
    width: 88%;
    margin: 0 auto 0;
    padding-bottom: 1.5%;
}

.step-example img {
    width: 100%;
    height: auto;
}

.example-item {
    padding-bottom: 9.8%;
}

.example-item h3 {
    color: #040606;
    font-size: 4.27vw;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 1;
    margin-bottom: 2%;
}


/*map*/
.map {
    background: url(../img/pc/map.png);
    background-size: 84%;
    background-repeat: no-repeat;
    background-position: center top;
    padding: 8% 0 10.08% 0;
    margin-top: 5.34%;
}

.map_area h4 {
    font-size: 4.8vw;
  font-weight: bold;
  line-height: 1.33;
  letter-spacing: 0.45px;
  margin-bottom: 2%;
}

.map_area .step-border {
    width: 61%;
    height: 8px;
}

.map-group {
    display: flex;
    justify-content: center;
    gap: 3%;
}

.map-group li {
    width: 42.38%;
    border-radius: 3px;
    opacity: 0.73;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #3b3b3b;
    /*padding: 1.5% 0 1.5% 0;*/
}

.map-group li a {
    color: #fff;
    text-decoration: none;
    font-size: 4.27vw;
    font-family:'Noto Sans JP','HGMaruGothicMPRO','HG丸ｺﾞｼｯｸM-PRO';
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.5px;
  display: block;
  padding: 8.3% 0 8.3% 0;
}

.map-group li:hover {
    opacity: .8;
    transition: .3s;
}

.map-space {
    height: 3.74vw;
}




/*共通部分*/
.detail-button {
    display: block;
    width: 79.20%;
    font-family:'Noto Sans JP','HGMaruGothicMPRO','HG丸ｺﾞｼｯｸM-PRO';
    background-image: linear-gradient(to bottom, #e5f548, #b9c92c);
    color: #040606;
    font-size: 5.34vw;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 1.6;
    margin: 8% auto 10.7%;
    padding: 1.8% 0 2.6%;
}

.entry-inoa {
    background-color: #040606;
    color: #fff;
}

.detail-button span {
    font-size: 4.27vw;
}

.discription {
    color: #040606;
}

.discription h2 {
    display: inline-block;
    border-bottom: solid 2.14vw #040606;
    font-size: 8vw;
    font-weight: bold;
    letter-spacing: 0.75px;
    line-height: 1.2;
    padding-bottom: 1.5px;
}

.discription-txt {
    width: 79.3%;
    margin: 8% auto 5.6%;
    text-align: justify;
}

.discription-item h3 {
    font-size: 3.2vw;
    font-weight: bold;
    line-height: 1.33;
    margin-bottom: 6.73%;
}

.discription-item p {
    font-size: 3.2vw;
    line-height: 1.83;
}

.discription-item p a {
    color: #82a6d9;
    text-decoration: none;
}

.discription-border {
    width: 100%;
    height: 1px;
    background-color: #040606;
    margin: 6.73% auto;
}

.M20 {
    margin-top: 4%;
}


/*お詫び*/
.campaign-apology {
    background-color: #fff;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-bottom: 20px;
    padding: 20px 0 20px 0;
    font-family: "Noto Serif JP", serif;
}

.campaign-apology h1 {
  font-size: 5.6vw;
  font-weight: 900;
  line-height: 1.43;
  letter-spacing: 1.05px;
  color: #d51818;
}

.campaign-apology h2 {
    font-size: 4.27vw;
    font-weight: 900;
    line-height: 1.44;
    letter-spacing: 0.8px;
    color: #d51818;
    margin-bottom: 11px;
}

.campaign-apology .apology-text {
    font-size: 3.2vw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.6px;
  color: #040606;
  margin-bottom: 11px;
}

.campaign-apology .campaign-help {
    font-size: 3.2vw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.6px;
  color: #040606;
}

.campaign-apology a {
    font-size: 3.2vw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.6px;
    color: #39f;
    font-family: "Noto Serif JP", serif;
}

.campaign-hpb img {
    width: 100%;
}

.info-flex img {
    width: 93.5%;
}

.step-grayout {
    width: 97%;
    margin-bottom: 20px;
}

.apology {
    color: #e10000;
    font-weight: 800;
}

.apology-bold {
    font-weight: bold;
}