@charset "utf-8";

/* =================== layout =================== */
html {
  scroll-behavior: smooth;
}
.orangefont{ color: var(--orange-color); }
.whitefont{ color: #fff; }
.whitebg{ background:#fff; }
.numberfont{ color:#FCE14D; }
	
/* =================== header =================== */

header{ height: 100px; padding: 0; /*margin-bottom: 75px;*/ position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; }
header .container{ max-width: 3500px; padding: 0; }
header .flex-box{ height: 100px; padding: 0 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
/*header .left{ position: fixed; width: 330px; top: -30px; }*/
header .left { width: 22%; }
header .top_center { width: 52%; max-width: 770px; }
header .right { width: 23%; }
/*header .right{ position: fixed; top: 20px; margin-right:35px; right: 0; width: 100%; display: flex; justify-content: flex-end; align-items: center; color:#fff; }*/
header .left img{ max-width: 300px; }
header h1{ line-height: 0rem; }
header ul{}
header li{}
header .nav-list{}
header .headrightleft{ margin-right:8px; }
header .headrightright{}
header .headrightphone{ color:#fff; }
header .font43{ }
header .headerrightphonedet{ 
  color:#fff;
  text-align: right;
  margin-top: 5px;
 }
header .font16{}
header.change-color {
  background-color: #207bc8;
  transition: 0.3s;
}
.headerrightphonedet.font16{ font-size: 1.45rem; }
  
/* =================== footer =================== */


footer{ overflow: hidden; position: relative; padding: 80px 0; }
footer .right{ max-width: 515px; }
footer nav ul{ gap: 45px 100px; }
footer nav ul li{ width: calc( 100% / 2 - ( 50px ) ); }
footer small{ font-family: var(--ja-font); font-weight: bold; max-width: 515px; margin: 0 auto; width: 100%; color: #fff; font-size: 1.3rem; }
footer a{ font-family: var(--ja-font); font-weight: bold; color: #fff; text-decoration: underline; font-size: 1.3rem; }
footer a:after{ content: ""; background: url(../images/top/footer-icon.svg) no-repeat; position: absolute; margin: auto; right: -15px; top: 0; bottom: 0; width: 10px; height: 10px; z-index: 1; }
footer p{ font-family: var(--ja-font); font-weight: bold; color: #fff; font-size: 1.3rem; }

footer #page-top{ position: fixed; z-index: 999; right: 50px; bottom: 50px; cursor: pointer; display: inline-block; width: 65px; height: 70px; border-radius: 65px;  }

/* =================== common =================== */

.swiper.swiper_bar .swiper-wrapper{ transition-timing-function: linear; }

.swiper.swiper_dots{ padding-bottom: 80px; }
.swiper.swiper_dots .swiper-pagination-bullets,
.swiper.swiper_dots .swiper-pagination-bullets.swiper-pagination-horizontal{ bottom: 0; }
.swiper.swiper_dots .swiper-pagination-bullet{ opacity: 1; width: 10px; height: 10px; background: var(--main-color); border: 2px solid #fff; }
.swiper.swiper_dots .swiper-pagination-bullet-active{ background: #fff; }

.swiper-slide.aspect img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 20px; /*object-fit: cover;*/ object-position: center; height: 100%; width: 100%; }
.swiper-slide.aspect.aspect3{ padding-top: 30%; }
/*.swiper-slide.aspect.aspect25{ padding-top: 25%; }*/
.swiper-slide .text-box{ background: #fff; border-radius: 20px; height: 100%; width: 100%; padding: 30px; }
.swiper-slide .text-box::after{ content: ""; background: url(../images/top/swiper-textbox-arrow.svg) no-repeat; position: absolute; margin: auto; right: 0; left: 0; bottom: -15px; width: 27px; height: 17px; z-index: 1; }
.swiper-slide .text-box p.text01{ font-size: 2.4rem; color: var(--orange-color); font-family: var(--midashi-font); margin-bottom: 20px; }
.swiper-slide .text-box p.text02{ margin-bottom: 30px; line-height: 1.9; font-weight: 100; font-family: var(--ja-font); }
.swiper-slide .text-box .text-bottom{ display: flex; align-items: center; justify-content: center; gap: 25px; background: #E9F1F3; border-radius: 5px; padding: 10px 20px; }
.swiper-slide .text-box .text-bottom p:not(:last-child){ border-right: 2px solid #19738b38; padding-right: 20px; }
.swiper-slide .text-box .text-bottom p{ font-family: var(--ja-font); font-weight: bold; font-size: 1.4rem; }
.mt100{ margin-top: 60px; }

.note{ display: table; font-size: 80%; opacity: 0.5; line-height: 1.5em; }
.note:before{ content: "※"; display: inline-block; display: table-cell; }
.note:not(:last-child){ margin-bottom: 3px; }


/* =================== top =================== */

.container835{ max-width: 835px; }

section p{ font-family: var(--ja-font); }
section p span{ font-family: var(--midashi-font); }

.fv{ position: relative; }
@media screen and (min-width: 820.98px) {
  .fv .fv-img{ min-height: 700px; max-height:810px; object-fit: cover; }
}
.fv .fvheaderbox{ padding: 0 15px; width: 100%; max-width: 970px; position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); }
.fv .headerbtn img{ width:25px; margin-top:-7px; margin-right:8px; vertical-align:middle; }


.fv{}
.fv .container{}
.fv .fvheaderbox{}
.fv .fvheaderbox img{}
.fv .headerbutton{ margin-top:30px; text-align:center; }
.fv .headerbtn{ max-width:470px; padding:25px; font-weight: 900; }
.fv .font25{}
.fv .fvlistbox{ position:absolute; width:100%; bottom:50px; left:0; background:#fff; padding:17px 10px; }
.fv ul{}
.fv .fvlist{ align-items:center; justify-content:center; }
.fv li{ margin:0 30px; }

#top section{ padding: 130px 0; }
#top1 section h3{ margin-bottom: 50px; text-align: center; font-size: 4rem; }
#top1 section h3 span{ margin-bottom: 15px; line-height: 1em; }
#top1 section .sec-box:not(:last-child){ margin-bottom: 70px; }

#top .sec1{}
#top .sec-box{}
#top .container{}
#top .textinbox{ }
#top .textbox{ padding:12px 30px; border:1px solid var( --text-color ); display:inline-block; border-radius:7px; font-family: var(--en-font); font-weight: bold; }
#top .font28{}
#top h2{ margin-top:15px; }
#top .font52{ font-family: var(--ja-font);}
#top .metatext{ margin-top:30px; line-height:1.7em; font-weight: 700; }
#top .font26{}

.support_a { display: block; width: fit-content; margin: 15px auto 0; text-align: center; }
.support_a img { width: 95%; max-width: 600px; }

#top .sec2{ background:url(../images/top_sec2bg.jpg) top center no-repeat; background-size: cover; }
#top section.sec2{ padding-top:105px; padding-bottom:120px; }
#top .sec2 .sec-box{}
#top .sec2 .container{}
#top .sec2 h2{ color:#fff; line-height:1.7em; }
#top .sec2 .font42{}
#top .sec2 .font56{ color:#fff; }
#top .sec2 ul{ max-width:750px; margin:40px auto 0; justify-content:space-between; }
#top .sec2 .listround{}
#top .sec2 li{ font-weight: bold; }
#top .sec2 .round{ background:#fff; width:210px; height:210px; padding-top:55px; line-height:1.3em; border-radius:105px; }
#top .sec2 .font26{ color: #4D4D4D; }
#top .sec2 .metatext{ margin-top:45px; color:#fff; font-weight:700; }
#top .sec2 .font42{ color:#fff; }
#top .sec2 .font60{ color:#fff; position: relative; }
#top .sec2 .font60:before{ position: absolute; content:""; background: url(../images/dots.svg) no-repeat; width: 69px; height: 11px; top: -2px; left: 50%; transform: translateX(-50%); }
#top .sec2 .arrowdown{ margin-top:45px; text-align:center; }
#top .sec2 .arrowdown img{ width:80px; }
		 
#top .sec3{ background:url(../images/top_sec3bg.jpg) top center no-repeat; background-size: cover; }
#top section.sec3{ padding-top:130px; padding-bottom:215px; }
#top .sec3 .sec-box{}
#top .sec3 .container{ max-width:1280px; }
#top .sec3 .subtext{ color:#fff; }
#top .sec3 .font38{ font-weight: bold; }
#top .sec3 h2{ margin-top:40px; color:#fff; }
#top .sec3 .font52{}
#top .sec3 .font100{ font-size:130px; padding: 0 15px; }
#top .sec3 .numberfont{ vertical-align:middle; }
#top .sec3 ul{}
#top .sec3 .listbox{ margin-top:75px; justify-content:space-between; }
#top .sec3 li{ width:32%; background:#fff; padding:35px 30px; border-radius:10px; }
#top .sec3 .listbox1{}
#top .sec3 .listboxinbox{ text-align:center; }
#top .sec3 .listboxbox{ padding: 12px 22px; border: 2px solid var( --text-color ); display: inline-block; border-radius: 7px; font-weight:700; }
#top .sec3 .font28{}
#top .sec3 h3{ margin-top:30px; line-height:1.4em; }
#top .sec3 .font29{}
#top .sec3 p{ margin-top:30px; }
#top .sec3 .font19{ line-height: 1.6em; }

#top .sec3 .whitebox{ margin-top:45px; background:#fff; padding:55px 50px 50px 50px; border-radius:10px; }
#top .sec3 .whitebox .textinbox{ text-align:center;}
#top .sec3 .whitebox .textbox{ padding: 12px 22px; border: 2px solid var( --text-color ); display: inline-block; border-radius: 7px; font-weight:700; }
#top .sec3 .whitebox .font29{}
#top .sec3 .whitebox h2{ margin-top:30px; text-align:center; color: var( --text-color); }
#top .sec3 .whitebox .font90{ font-size:9rem; }
#top .sec3 .whitebox ul{}
#top .sec3 .whitebox .listbox{ margin-top:40px; justify-content:space-between; }
#top .sec3 .whitebox .listbox1{}
#top .sec3 .whitebox li{}
#top .sec3 .whitebox .listinbox{ width:32%; background:#F5FBFC; padding:30px 30px 15px; border-radius:10px; }
#top .sec3 .whitebox .metain{ text-align:center; }
#top .sec3 .whitebox .meta{ width:80%; text-align:center; padding: 15px 15px; background:var( --text-color ); color:#fff; display: inline-block; border-radius: 30px; }
#top .sec3 .whitebox .font23{}
#top .sec3 .whitebox .imgbox{ margin-top:35px; text-align:center; }
#top .sec3 .whitebox .imgbox img{ height:65px; width:auto; }
#top .sec3 .whitebox p{ min-height:135px; margin:35px 0; line-height: 1.6em; }
#top .sec3 .whitebox .font18{}
#top .sec3 .whitebox h4{}
#top .sec3 .whitebox .font26{ font-weight: bold; }
#top .sec3 .whitebox .font50{ font-size:5rem; font-weight:700; }	
#top .sec3 .whitebox .box{ margin-top:0px; align-items:baseline; justify-content:center; }
#top .sec3 .whitebox .font26{}
#top .sec3 .whitebox .font80{}
#top .sec3 .whitebox .box img{ width:32px; margin-left:15px; } 
#top .sec3 .whitebox .whitebox1{ padding:20px 20px; }
#top .sec3 .whitebox .text{ font-weight: bold; margin-bottom: 10px; }
#top .sec3 .whitebox .font26{}
#top .sec3 .whitebox .imgbox1{}
#top .sec3 .whitebox .imgbox1 img{ height:45px; }

#top .banner{ margin-top:-90px; }
#top .banner1{ background-image: linear-gradient(180deg, transparent 40%, #F3F5F6 60%); }
#top .banner .container{ max-width:1110px; }
#top .banner .bannerbox{ background:url(../images/bannerbg.png) top center no-repeat; background-size:cover; border-radius:20px; padding:40px 60px 30px 60px; box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); }
#top .banner .bannerboxleft{ width:65%; }
#top .banner .bannertext{ color:#fff; font-family: var(--midashi-font); }
#top .banner .bannertext1{ margin-top:25px; color:#fff; font-family: var(--midashi-font); }
#top .banner .bannerimage{ margin-top:20px; margin-right:40px; }
#top .banner .bannerboxright{ width:35%; }
#top .banner .bannerbtn{ font-size:1.7rem; padding:10px; font-weight: 700; }
#top .banner .bannerbtn img{ width:22.5px; margin-top:-5px; margin-right:10px; vertical-align:middle; }
#top .banner .bannertext2{ color:#fff; font-weight: bold; text-align: center; }
#top .banner .bannertext3{ margin-top:10px; color:#fff; text-align: center; }
#top .banner .bannertext3 img{ width:25px; vertical-align:middle; margin-top:-5px; margin-right:0px; }
#top .banner .bannerphone{ color:#fff; }
#top .banner .bannertext4{ margin-top:0px; color:#fff; text-align: center; font-weight: 500; }
#top .banner .bannertext1.font46{ font-weight: bold; }

#top .sec4{ background:#F3F5F6; }
#top section.sec4{ padding-top:125px; padding-bottom:120px; }
#top .sec4 .sec-box{}
#top .sec4 .container{ max-width:1280px; }
#top .sec4 .titlelistbox{ text-align:center; }
#top .sec4 .titlelist{ position:relative; text-align:center; display:inline-block; font-weight:700; margin-bottom:20px; }
#top .sec4 .titlelist:before{ content: ""; position: absolute; border-radius: 10px; height: 95%; width: 4px; bottom: 0; left: -25px; transform: rotate(-20deg); background: var( --text-color); }
#top .sec4 .titlelist:after{ content: ""; position: absolute; border-radius: 10px; height: 95%; width: 4px; bottom: 0; right: -25px; transform: rotate(20deg); background: var( --text-color);	} 	
#top .sec4 .font26{}
#top .sec4 .font54{}
#top .sec4 h2{ margin-top:-10px; }
#top .sec4 ul{}
#top .sec4 .list{ margin-top:55px; justify-content:space-between; }
#top .sec4 .list li{ width:46.3%; position:relative; }
#top .sec4 .listli{ position:relative; }
#top .sec4 .listli:after{ content: ""; background: url(../images/top_sec4arrowright.svg) no-repeat; position: absolute; margin: auto; right: -72px; top: 45%; width: 49px; height: 77px; z-index: 10; }
#top .sec4 .listbox{ background:#fff; padding:55px 30px 30px 30px; border-radius:10px; }
#top .sec4 .listbox1{ background: var( --orange-color); padding:55px 30px 30px 30px; border-radius:10px; }	
#top .sec4 .titleicon{}
#top .sec4 .titleicon img{ height:40px; }
#top .sec4 h3{ margin-top:10px; }
#top .sec4 .font32{}
#top .sec4 ul{}
#top .sec4 .listin{ margin-top:40px; }
#top .sec4 .listin li{ font-weight: bold; background:#F3F5F6; height:85px; padding-top:30px; margin-bottom:20px; width:100%; border-radius:5px; text-align:center; border-radius:6px; }
#top .sec4 .listin li.whitebg{ background:#fff; }
#top .sec4 .listin li.doublelines{ padding-top:20px; }
#top .sec4 .font21{}
#top .sec4 .arrowdown{ margin-top:45px; }
#top .sec4 .arrowdown img{ width:80px; }
#top .sec4 .absbaloon{ position:absolute; top:-100px; right:-35px; }

#top .sec4 .orangebox{ background:var( --orange-color );  margin-top:45px; padding:90px 70px 100px 70px; border-radius:10px; }
#top .sec4 .orangebox h3{}
#top .sec4 .orangebox .font35{}
#top .sec4 .orangebox .font100{ font-size:12rem; }
#top .sec4 .orangebox .numberfont{ vertical-align:middle; color: #fff; }
#top .sec4 .orangebox .textroundin{ margin-top:60px; text-align:center;}
#top .sec4 .orangebox .textaround{ padding:35px 20px; line-height:1.3em; border:3px solid #fff; border-radius:100px; font-weight:600; text-align:center; }
#top .sec4 .orangebox .font41{}
#top .sec4 .orangebox ul{}
#top .sec4 .orangebox .list1{ margin-top:45px; justify-content:space-between; }
#top .sec4 .orangebox .list1 li{ background:#fff; width:32%; padding:50px 30px 40px 30px; border-radius:10px; }
#top .sec4 .orangebox .imgbox{ text-align:center; }
#top .sec4 .orangebox .imgbox img{ height:80px; }
#top .sec4 .orangebox .meta{ margin-top:35px; }
#top .sec4 .orangebox .font28{ font-weight: bold; }
#top .sec4 .orangebox h4{ margin-top:20px; }
#top .sec4 .orangebox .font35{}
#top .sec4 .orangebox p{ margin-top:30px; }
#top .sec4 .orangebox .font19{ line-height: 1.6;}
#top .sec4 .orangebox .font41{}
#top .sec4 .orangebox .textbottom{ margin-top:90px; line-height:1.3em; font-weight: bold; }
#top .sec4 .orangebox .orangeboxh2{}
#top .sec4 ul li{ color:#4D4D4D; }

#top .sec5{ background:#F3F5F6; }
#top section.sec5{ padding-top:70px; padding-bottom:190px; }
#top .sec5 .sec-box{}
#top .sec5 .container{ max-width:1120px; }
#top .sec5 .whitebox{ background:#fff; padding:85px 85px 80px 85px; border-radius:16px; position:relative; }
#top .sec5 .meta{ font-weight:600; }
#top .sec5 .font21{}
#top .sec5 h2{}
#top .sec5 .font65{}
#top .sec5 .font43{}
#top .sec5 ul{}
#top .sec5 .list{ max-width:730px; margin-top:55px; justify-content:space-between; }
#top .sec5 .list li{}
#top .sec5 .listboxinbox{ text-align:center; }	
#top .sec5 .listboxbox{ padding: 7px 22px; border: 2px solid var( --text-color ); font-weight:600; display: inline-block; border-radius: 7px; }
#top .sec5 .font28{}
#top .sec5 .box{ margin-top:55px; align-items:baseline; justify-content:center; font-weight:600; }
#top .sec5 .font85{}
#top .sec5 .bigfont{}
#top .sec5 .smallfont{}
#top .sec5 ul{}
#top .sec5 .list1{ margin-top:75px; justify-content:space-between; }
#top .sec5 .list1 li{ width:20%; }
#top .sec5 .imgbox{}
#top .sec5 .imgbox img{ width:68%; }
#top .sec5 .list1text{ margin-top:15px; font-weight:700; }
#top .sec5 .font19{}
#top .sec5 .metatext{ margin-top:110px; font-weight:600; }
#top .sec5 .font35{}
#top .sec5 .absimage{ position:absolute; top:-70px; right:-30px; }

#rakuten_amazon {
  margin-top: 30px;
}
.support_text {
  margin-bottom: 30px;
  font-size: 2.8rem;
  text-align: center;
  color: rgb(33, 43, 188);
}
#rakuten_amazon img,
#rakuten_amazon p {
  margin: 0 auto 20px;
  font-size: 2.2rem;
  text-align: center;
}
/* contact form */
.sec09{ background: #fff; }
.sec09 h3{ margin-top: -20px; margin-bottom: 45px; }
.sec09 .t_bold{ text-align: center; }
.sec09 .pt100{ padding-top: 0; }
.sec09 .step{ display: none; }
.sec09 .check-inner h2{ font-size: 2.5rem; text-align: center; margin: 50px 0; }
.sec09 .check-inner{ padding-top: 0; }
.sec09 .check-inner .btn-box{ text-align: center; }
.sec09 .check-inner .btn-box .btn{ border: none; background: var(--orange-color); max-width: 290px; font-size: 1.8rem; font-weight: bold; padding: 15px;}
.sec09 #contact_form .formsubmit{ background: var(--orange-color); border-radius: 100px; font-family: var(--ja-font); max-width: 265px; width: 100%; padding: 20px 75px; }
.sec09 .box .left{ width: 40%; }
.sec09 .box .right{ width: 60%; }
.sec09 #top2 .box{ justify-content: center; }
.sec09 #top2 .left{ font-size: 1.8rem; font-family: var(--ja-font); font-weight: bold; }
.sec09 #top2 .req{ margin-left: 5px; font-size: 12px; color: #fff; display: inline-block; font-weight: 700; background-color: var(--orange-color); padding: 0; border-radius: 100px; display: inline-flex; width: 49px; align-items: center; justify-content: center; }
.sec09 input[type='radio']{ font-family: var(--ja-font); margin-bottom: 0; padding: 0; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 1px solid #151C4A; }
.sec09 input[type='radio']:checked{ accent-color: #151C4A; }
.sec09 #top2 .textbox2{ width: 100%; }
.sec09 #top2 .textbox3{ max-width: 100%; }
.sec09 #top2 .textbox{ padding-left: 20px; border-radius: 0; background: #F4F6F8; }
.sec09 .space{ margin-top: 15px; }
.sec09 label.mr-2.ml-2.my-auto{ font-weight: bold; font-size: 1.8rem; font-family: var(--ja-font); }
.sec09 ::placeholder{ color: #DEDEDE; }
.sec09 .formbox .box .right1{ flex-direction: unset!important; }

#top .sec09 .textbox{ border:none; }

.copyright.font13.align-c{ font-weight: bold;}


.plan-area .sec-box > p{ font-size: 2rem; margin-bottom: 65px; }
.plan-area .pop{ margin-bottom: 25px; }
.plan-area .pop span{ position: relative; font-size: 2rem; padding: 0 16px; }
.plan-area .pop span:before,
.plan-area .pop span:after{ content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 2px; background: #000; transform: rotate(-30deg); }
.plan-area .pop span:after{ left: auto; right: 0; transform: rotate(30deg); }
.plan-area .plan{ position: relative; overflow: hidden; width: 100%; background: #fff; border-radius: 10px; }
.plan-area .plan .middle{ padding: 0 45px 45px; }
.plan-area .plan .middle h4{ position: relative; z-index: 2; margin: -10% 0 25px; background: var(--tag-bg); font-size: 1.7rem; border-radius: 100px; padding: 12px; }
.plan-area .plan .middle p{ margin-bottom: 40px; }
.plan-area .plan .middle p span{ font-size: 5.2rem; font-weight: 600; line-height: 1em; }
.plan-area .plan .middle ul li{ line-height: 1.4em; font-size: 1.4rem; padding-left: 30px; position: relative; }
.plan-area .plan .middle ul li:before{ content: ""; position: absolute; top: 0; left: 0; width: 17px; height: 17px; border-radius: 17px; background: #fff; border: 1px solid #000; }
.plan-area .plan .middle ul li:after{ content: ""; position: absolute; top: 5.5px; left: 5.5px; width: 7px; height: 4px; border-left: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(-45deg); }
.plan-area .plan .middle ul li:not(:last-child){ margin-bottom: 20px; }
.plan-area .plan .bottom a{ position: relative; display: block; background: #000; padding: 25px; color: #fff; font-size: 1.7rem; }

.voice-area .sec-box > .flex{ gap: 40px 25px; padding-top: 20px; }
.voice-area .inner{ position: relative; padding: 28px; background: #fff; border-radius: 10px; }
.voice-area .inner .img-box{ position: absolute; right: 0; bottom: 0px; width: 100px; height: 100px; border-radius: 100%; overflow: hidden; }
.voice-area .inner .img-box img{ height: 100%; object-fit: cover; object-position: center; }
.voice-area .inner .top{ position: relative; margin-bottom: 13px; }
.voice-area .inner .top .left{ width: calc( 100% - 110px ); }
.voice-area .inner .top .left h4{ line-height: 1.2em; font-size: 2.2rem; }
.voice-area .inner .top .left .meta{ font-size: 1.4rem; margin-top: 13px; }
.voice-area .inner .bottom p{ font-size: 1.4rem; }

.artist-area h3{ margin-bottom: 60px!important; }
.artist-area .swiper-box .box img{ border-radius: 100%; }
.artist-area .swiper-box .box p{ margin-top: 20px; font-size: 1.4rem; }
.artist-area .inner .box{ padding: 35px 15px; border: 1px solid #fff; border-radius: 9px; }
.artist-area .inner .box1{ padding: 75px 15px 35px; }
.artist-area .inner .three-column{ gap: 15px; margin-bottom: 50px; }
.artist-area .inner .box1{ position: relative; }
.artist-area .inner .box1:before{ content: ""; position: absolute; top: 35px; left: 0; right: 0; margin: auto; width: 27px; height: 27px; border-radius: 27px; border: 1px solid #fff; }
.artist-area .inner .box1:after{ content: ""; position: absolute; top: 44.5px; left:0; right: 0; margin: auto; width: 11px; height: 5px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); }
.artist-area .inner .box1 p{ position: relative; font-size: 1.9rem; }
.artist-area .inner .box2 h4{ font-size: 1.9rem; margin-top: -49px; margin-bottom: 35px; }
.artist-area .inner .box2 h4 span{ display: inline-block; padding: 0 20px; background: var(--blue-color); }

.qa-area h4{ font-size: 1.9rem; color: var(--gold-color); margin-bottom: 25px; }

.aboutus-area{ overflow: hidden; }
.aboutus-area .sec-box{ position: relative; }
.aboutus-area .sec-box:before{ content: ""; position: absolute; z-index: 0; width: 120%; height: 120%; left: -10%; top: -10%; bottom: 0; right: 0; margin: auto; background: url(../images/top/aboutus-bg.svg) center/contain no-repeat; }
.aboutus-area .sec-box > *{ position: relative; z-index: 1; }
.aboutus-area img{ margin-bottom: 75px; }
.aboutus-area .two-column{ gap: 25px; }
.aboutus-area .two-column p{ line-height: 2em; font-size: 1.5rem; }

.tags{ gap: 10px 8px; }
.tag span{ display: table; background: var(--tag-bg); padding: 5px 25px; text-align: center; border-radius: 100px; font-size: 1.3rem; }
.tag span:before{ content: "#"; display: table-cell; font-size: 1.4rem; }
/*.tag a:hover{ background: var(--text-color); color: #fff; }*/
/* =================== page layout =================== */



.step { width: 670px; max-width: 80%; margin: 103px auto 50px; }
.step__inner{ display: flex; flex-flow: row nowrap; align-items: center; }
.step__circle { display: flex; justify-content: center; align-items: center; font-family: 'Heebo', sans-serif; font-size: 19px; font-weight: bold; line-height: 1; width: 45px; min-width: 45px; height: 5px; background: #E8E8E8; position: relative; }
.step__circleSup { display: block; font-size: 12px; white-space: nowrap; color: #000000; letter-spacing: .2em; position: absolute; left: 50%; bottom: -15px; transform: translate(-50%, 100%); }
.step__border { width: calc(100% - 135px); height: 5px; background: #E8E8E8; position: relative; }
.mainColor { color: #273960; }
.mainBgColor { background: #000; color: #fff; }
.mainBorderColor::after { content: ""; display: block;  width: 0%; height: 100%; background: #000; animation: borderAnim .5s ease-out forwards; position: absolute; top: 0; left: 0; }
.form-error { border: 1px solid red !important; border-radius: 5px !important; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"]{ -moz-appearance: textfield; }
input::-ms-clear { visibility: hidden }
.invalid-message { display: none; color: red; font-size: 15px; }

    @keyframes borderAnim {
      0% {
        width: 0;
      }

      100% {
        width: 100%;
      }

    }

    @media screen and (max-width:768px) {
      .step__circle {
        font-size: 15px;
        width: 35px;
        min-width: 35px;
      }

      .step__circleSup {
        font-size: 9px;
        bottom: -12px;
        transform: translate(-50%, 100%);
      }

      .step__border {
        width: calc(100% - 105px);
      }
    }



@media screen and (max-width: 820px) {
  aside,main{ width: 100%; }
}

.no_push {
  pointer-events: none;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 9);
  max-height: 200px;
}
.scroll-infinity__item>img {
  width: 100%;
}