/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
:root{
	--color1: #0a26ea;
	--color5: #36f1ff;
	--white: #fff;
	/*--color4: #f5f2e9;*/
	--font-jp: 'M PLUS 1p', 'Noto Sans JP', "游ゴシック Medium", sans-serif;
}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color5, .hvr_txt_color5:hover{color: var(--color5);}

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}

/* header */
#header {background: none;}
#header .header_menu li a {color: #000;}
.g-menu {
    background: rgba(10,38,234,0.97);
}

/* footer */
footer .entry.more a{color: var(--color1);}
footer .entry.more a:after {background-color: var(--color1);}


/* top ----------------------------------------------------------------*/
.back_color {background: var(--white);}
.top_cms_box {background-color: #efefef;}

/* main img */
#video{pointer-events: none;}
#main .entry{
    width: 20%;
    max-width: 450px;
    bottom: 25px;
    right: 25px;
}
#main::before{
    content: "";
    background-color: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#main .more a {width: 100%;}
#main .logo{
    top: 25px;
    left: 25px;
}
#main .main_box{
    max-width: 900px;
    width: 60%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
#main .main_box .main_txt{
    display: inline-flex;
    background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--white);
    font-size: 8.65rem;
    padding: 0 10px;
    line-height: 1.5;
    font-family: var(--font-jp);
}
#main .main_box .main_txt2{
    display: inline-flex;
    background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--white);
    font-size: 2.2rem;
    padding: 0 10px;
    font-family: var(--font-jp);
}
#main .main_box.animStart .main_txt2 {
    animation: heroText 600ms 1000ms both;
    animation-delay: 1500ms;
}
#main .main_box.animStart .main_txt2:nth-child(2) {
    animation-delay: 1200ms;
}

/* main */

/* intro */
.intro__top.speed::before, .intro__top.cost::before{
    content: "";
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
}
.intro__top.speed::before{
    background-image: url('./Dup/img/speed.png');
    background-position: top right;
    top: 0;
    right: 0;
}
.intro__top.cost::before{
    background-image: url('./Dup/img/cost.png');
    background-position: bottom left;
    bottom: 0;
    left: 0;
}
.catch_txt {
    background: none;
    color: #0a26ea !important;
    width: 65% !important;
    max-width: 1130px;
    border-top: solid 1px #0a26ea;
    border-bottom: solid 1px #0a26ea;
}

/*-------------------------------------------------------
				タイトルアニメーション
-------------------------------------------------------*/
.intro__top {
    align-items: normal;
    width: 70%;
    max-width: 1130px;
    font-size: 14rem;
    margin: 0 auto;
    line-height: 0.8;
    font-family: 'Archivo Black', sans-serif;
}
.intro__top p {
    display: inline-block;
    transition: .3s;
    opacity: 0;
    letter-spacing: -10px;
    overflow: hidden;
}
.intro__top p > span {
    letter-spacing: -10px;
    top: 0;
    left: 0;
    overflow: hidden;
}
.intro__top.cost p > span {
    top: 0;
    right: 0;
}
.intro__top.flexible p > span {
    right: 0;
    transform: none;
}
.intro__top p.is-show2 {opacity: 1;}
p.is-show2:nth-of-type(1) {transition-delay: 0.2s;}
p.is-show2:nth-of-type(2) {transition-delay: 0.6s;}
/*p.is-show2:nth-of-type(3) {transition-delay: 0.6s;}*/
p > span > span{
     display: inline-block;
     transform: translateY(11rem);
     -webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     transition-delay: 0.8s;
     animation-delay: 0.8s;
}
p > span:nth-of-type(1) > span:nth-child(1){
-webkit-transition-delay: 300ms;transition-delay: 300ms;
-webkit-animation-delay: 300ms;animation-delay: 300ms;
}
p > span:nth-of-type(1) > span:nth-child(2){
-webkit-transition-delay: 350ms;transition-delay: 350ms;
-webkit-animation-delay: 350ms;animation-delay: 350ms;
}
p > span:nth-of-type(1) > span:nth-child(3){
-webkit-transition-delay: 400ms;transition-delay: 400ms;
-webkit-animation-delay: 400ms;animation-delay: 400ms;
}
p > span:nth-of-type(1) > span:nth-child(4){
-webkit-transition-delay: 450ms;transition-delay: 450ms;
-webkit-animation-delay: 450ms;animation-delay: 450ms;
}
p > span:nth-of-type(1) > span:nth-child(5){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
p > span:nth-of-type(1) > span:nth-child(6){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
p > span:nth-of-type(1) > span:nth-child(7){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
p > span:nth-of-type(1) > span:nth-child(8){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}

p > span:nth-of-type(2) > span:nth-child(1){
-webkit-transition-delay: 400ms;transition-delay: 400ms;
-webkit-animation-delay: 400ms;animation-delay: 400ms;
}
p > span:nth-of-type(2) > span:nth-child(2){
-webkit-transition-delay: 450ms;transition-delay: 450ms;
-webkit-animation-delay: 450ms;animation-delay: 450ms;
}
p > span:nth-of-type(2) > span:nth-child(3){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
p > span:nth-of-type(2) > span:nth-child(4){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
p > span:nth-of-type(2) > span:nth-child(5){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
p > span:nth-of-type(2) > span:nth-child(6){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
p > span:nth-of-type(2) > span:nth-child(7){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
p > span:nth-of-type(2) > span:nth-child(8){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
p.is-show2 > span > span{
     -webkit-animation-name: slide-bs;
     animation-name: slide-bs;
     opacity: 1;
}
@keyframes slide-bs{
     0%{-webkit-transform: translateY(11rem);transform: translateY(11rem);}
     100%{-webkit-transform: translateY(0);transform: translateY(0);}
}

/* contents */
#contents .box .box_item:after {background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #0a26ea 50.5%) no-repeat top left/100% 100%;}
#contents .box .box_item:before {background-color: rgba(10,38,234,0.6);}
#contents .box .box_item h2 br{display: none;}

/* topcms */
.shop_info .info, .shop_info .contact {
    background: var(--white);
    color: var(--color1);
    border: solid;
}
.shop_info.more a:before{display: none;}
.shop_info.more a.info_box:after{background-color: var(--color1);}


/* under page ----------------------------------------------------------------*/
.all_page main{background: var(--white);}
#page_title:before {background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%;}
.content_wrap {background-color: rgba(10,38,234,0.6);}
.content_wrap {background-color: #efefef;}

/* cms4 */
.flow_type2 .cate_title {
    border-bottom: solid 3px #ccc;
    position: relative;
}
.flow_type2 .cate_title::after {
    content: '';
    display: block;
    background: var(--color5);
    width: 30%;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: -3px;
}
.flow_type2 .box_wrap {
	border: 3px solid var(--color1);
}
.flow_type2 .cate_box {
	padding: 30px;
	width: 100%!important;
}
.flow_type2 .box_txt1 {
    background-color: #f7f7f7;
    color: var(--color1);
    text-align: center;
}
.flow_type2 .cate_box:not(:last-child) {
	border-bottom: 3px solid  var(--color1);
	position: relative;
}
.flow_type2 .cate_box:not(:last-child)::before,
.flow_type2 .cate_box:not(:last-child)::after {
	content: "";
	border: solid transparent;
	position: absolute;
	top: 100%;
	left: 17%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.flow_type2 .cate_box:not(:last-child)::before {
	border-width: 22px;
	border-top-color: var(--color1);
}
.flow_type2 .cate_box:not(:last-child)::after {
	border-width: 18px;
	border-top-color: #efefef;
}

.flow_type2 .cate{counter-reset: number 0;}

.flow_type2 .box_txt1::before {
    counter-increment: number 1;
    content: "step." counter(number);
    background-color: var(--color1);
    padding: 5px 10px;
    font-weight: 700;
    color: #ffffff;
    display: block;
    margin: 0px auto 10px;
    width: 50%;
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type2 .cate_box:first-child {
    padding: 20px 20px 30px 20px;
}
.flow_type2 .cate_box:not(:first-child) {
    padding: 40px 20px 20px 20px;
}
.flow_type2 .cate_box:not(:last-child)::before, .flow_type2 .cate_box:not(:last-child)::after {
    left: 50%;
}
}

/*-------- FireFox --------*/
@-moz-document url-prefix() {
.flow_type2 .cate_box:not(:last-child)::before, .flow_type2 .cate_box:not(:last-child)::after {top: 98.5% !important;}
.intro__top {font-size: 13.5rem;}
}


/* ---------- 1860px ---------- */
@media screen and (max-width: 1860px){
.catch_txt {width: 60% !important;}
}
/* ---------- 1628px ---------- */
@media screen and (max-width: 1628px){
.intro__top {width: 85%;}
}
/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){
#main .main_box .main_txt {font-size: 6.5rem;}
#main .main_box .main_txt2 {font-size: 1.6rem;}

}
/* ---------- 1282px ---------- */
@media screen and (max-width: 1282px){
.intro__top {max-width: 900px;font-size: 11.3rem;}
}
/* ---------- 1069px ---------- */
@media screen and (max-width: 1069px){
.intro__top {max-width: 770px;font-size: 9.3rem;}
#main .main_box {width: 90%;}
}
/* ---------- 866px ---------- */
@media screen and (max-width: 866px){
.intro__top {
    max-width: 600px;
    font-size: 7.85rem;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main .main_box .main_txt {font-size: 5.0rem;}
#main .entry {width: 30%;}
.intro__top {
    width: 90%;
    max-width: 600px;
    font-size: 7.35rem;
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main {height: 100svh;}
#main .main_box .main_txt {font-size: 2.8rem;}
#main .main_box .main_txt2 {font-size: 1.2rem;}
#main .entry {width: 45%;}
#video video{height: 100svh;transform: translateX(-200px);position: relative;z-index: -5;}
.intro__top {width: 95%;font-size: 4.05rem;}
.intro__top p > span {letter-spacing: -2px;}
#contents .box .box_item:after {background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #0a26ea 50.5%) no-repeat bottom left/100% 100%;}
.shop_info h2 {font-size: calc(1rem + 8px);letter-spacing: 1px;}
.cate_list li a:hover {transform: scale(1) translateY(0px);}
#page_title .page_title_box .wrap p:nth-of-type(1){
    font-size: calc(1rem + 7px);
    letter-spacing: 1px;
    padding-right: 0;
}
#contents .box .box_item h2 br{display: block;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 390px){
.intro__top {font-size: 3.95rem;}
.shop_info h2 {font-size: calc(1rem + 5px);}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 330px){
.intro__top {font-size: 3.75rem;width: 100%;}

}

/*20231129修正*/
#main .logo {max-width: 350px;}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main .logo {max-width: 220px;}
}