@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&display=swap');
:root{
	--black: rgba(1,1,1,1);
	--blue: #495e75;
	--red: rgba(150,5,0,1);
	--gray1: rgba(17,17,17,1);
	--gray2: rgba(34,34,34,1);
	--gray3: rgba(51,51,51,1);
	--gray4: rgba(68,68,68,1);
	--gray5: rgba(85,85,85,1);
	--gray6: rgba(102,102,102,1);
	--gray7: rgba(119,119,119,1);
	--gray8: rgba(136,136,136,1);
	--gray9: rgba(153,153,153,1);
	--agray: rgba(170,171,171,1);
	--bgray: rgba(187,187,187,1);
	--cgray: rgba(204,204,204,1);
	--dgray: rgba(221,221,221,1);
	--egray: rgba(238,238,238,1);
	--fgray: rgba(240,240,240,1);
    --yellow: #ffee00;
	--cyan: #00e2ff;
}
* {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	color: var(--black);
}
.en{
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.serif{
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	color: var(--black);
}
p,dt,dd,tr,th,td,li,a,b,em,span,strong,div,img,header,section,article,nav,footer,h1,h2,h3,h4,h5,h6{
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.6;
}
h1,h2,h3,h4,h5,h6{
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
}
small{
	font-size: clamp(12px, 1.1vw, 14px);
	line-height: 1.3;
}
li{
	line-height: 1.5;
}
p{
	line-height: 1.7;
	margin: 0 0 1.5em;
}
p:last-child{
	margin-bottom: 0;
}
.wrapper{
	width: 95% !important;
	margin-inline: auto !important;
}
.wrap{
	width: 95%;
	max-width: 1480px;
	margin-inline: auto !important;
}
.page-h2{
    font-size: clamp(34px, 6vw, 100px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.page-h2_jp{
    background: var(--black);
    color: #fff;
    line-height: 1;
    padding: 0.5em 2em;
    font-size: clamp(14px, 1.4vw, 21px);
    margin: 0.5em 0 0 1em;
}
.page-h3{
    font-weight: 900;
    font-size: clamp(24px, 2.1vw, 38px);
    line-height: 1.3;
}
.page-h3 br{
    display: none;
}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 780px) {

}
@media screen and (max-width: 680px) {

}

/*HEADER*/
.header{
	position: sticky;
	width: 100%;
	background: #000;
	top: 0;
	left: 0;
	z-index: 11;
	padding: 0.5em 1em 0.8em;
    display: flex;
    justify-content: space-between;
}
.header-h1 em{
	display: block;
	color: #fff;
	font-size: clamp(11px, 1.4vw, 14px);
	margin-bottom: 0.5em;
}
.header-h1 img{
    display: inline-block;
    width: clamp(240px, 22vw, 370px);
    filter: invert(100%);
}
.header-cv {
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1em;
    font-size: clamp(11px, 1.2vw, 16px);
    white-space: nowrap;
    line-height: 1.3;
    margin-left: 5px;
}
.header-cv b,
.header-cv span{
    color: #fff;
    font-size: clamp(11px, 1.2vw, 16px);
}
.header-cv br{
    display: none;
}
.header-cv:hover{
    background: var(--blue);
}
@media screen and (max-width: 680px) {
    .header {
        padding: 0.5em 0.5em 0.8em;
    }
	.header-h1 img{
		width: 50vw;
	}
    .header-cv b,
    .header span{
        display: none;
    }
    .header-cv {
        padding: 0 0.5em;
    }
    .header-cv br{
        display: block;
    }
}


/*MV*/
.mv{
	position: relative;
}
.mv-catch{
	z-index: 10;
	width: 100%;
	background: #fff;
    padding:2em 0 0;
}
.mv-future small,
.mv-future b{
	display: inline-block;
	color: var(--black);
	font-size: clamp(14px, 2.4vw, 28px);
	line-height: 1;
}
.mv-future small{
	border: 1px solid var(--black);
	padding: 0.5em 1.5em;
	border-radius: 3em;
}
.mv-future b{
	padding: 0 0.5em;
}
.mv-catch span{
	display: block;
	color: var(--black);
	padding: 0.3em 0;
	font-size: clamp(16px, 3.6vw, 32px);
    line-height: 1.4;
}
.mv-catch p br,
.mv-catch span br{
	display: none;
}
.mv-catch p{
	color: var(--black);
	font-size: 6vw;
	line-height: 1;
}
.mv-img{
	position: relative;
}
.mv-img img{
	object-fit: cover;
	aspect-ratio: 2.5 / 1;
}

@media screen and (max-width: 980px) {
	.mv-catch{
		top: 17vw;
	}
    .mv-catch p br,
	.mv-catch span br{
		display: block;
	}
    .mv-catch p {
        font-size: 9vw;
    }
	.mv-img img{
		aspect-ratio: 1.5 / 1;
	}
}
@media screen and (max-width: 480px) {
	.mv-catch{
		top: 25vw;
	}
	.mv-img img{
		object-fit: cover;
		aspect-ratio: 1 / 1;
	}
}

/*LEAD*/
.lead{
	display: flex;
	justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
	background: var(--black);
}
.lead-summary,
.lead-summary_wrap,
.lead-h2{
	font-size: clamp(24px, 2.6vw, 48px);
}
.lead-summary{
	width: 52%;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.lead-summary_wrap{
	width: 90%;
    max-width: 17em;
	margin: 0 auto;
}
.lead-summary *{
	color: #fff;
}
.lead-h2{
	line-height: 1.3;
	margin-bottom: 0.7em;
}
.lead-movie{
	flex: 1;
	position: relative;
}
.lead-movie video{
	width: 95%;
    margin: 0 0 0 auto;
	object-fit: cover;
	aspect-ratio: 1.6 / 1;
	line-height: 0;
	vertical-align: bottom;
}
.lead-p{
	color: #fff;
	padding: 1em 1em 0.5em;
    width: 100%;
    font-size: clamp(12px, 1.1vw, 14px);
    text-align: left !important;
}
.lead-p small{
    display: block;
    color: #fff;
    text-align: left !important;
    padding-left: 1em;
    text-indent: -1em;
}
@media screen and (max-width: 1280px) {
	.lead-movie video{
        width: 100%;
		aspect-ratio: 1.3 / 1;
	}
	.lead-effect{
		padding: 5em 4%;
	}
}
@media screen and (max-width: 980px) {
	.lead{
		display: block;
	}
	.lead-h2{
		font-size: 5vw;
	}
    .lead-summary {
        width: 100%;
		min-width: inherit;
        margin-bottom: 2em;
    }
    .lead-summary_wrap{
        max-width: 100%;
    }
	.lead-movie video{
		aspect-ratio: 1.7 / 1;
	}
}
@media screen and (max-width: 680px) {
    .lead-summary {
        margin-bottom: 1em;
    }
	.lead-h2 br{
		display: none;
	}
	.lead-movie video{
		aspect-ratio: 1.2 / 1;
	}
    .lead-keisan span,
    .lead-keisan b{
        text-align: center;
        display: block;
        margin-bottom: 0.2em;
    }
}


/*EVID*/
.evid{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.evid-summary,
.evid-summary_wrap,
.evid-h2{
	font-size: clamp(24px, 2.6vw, 48px);
}
.evid-summary{
	width: 52%;
	display: flex;
	justify-content: center;
	align-items: center;
    order: 1;
}
.evid-summary_wrap{
	width: 90%;
    max-width: 17em;
	margin: 0 auto;
}
.evid-h2{
	line-height: 1.3;
	margin-bottom: 0.7em;
}
.evid-img{
	flex: 1;
	position: relative;
    order: 0;
    background: url("../img/aska.webp") center / cover no-repeat;
}
.evid-keisan{
	border: 1px solid #ddd;
	background: rgba(0,0,0,0.1);
	padding: 1em;
}
.evid-h3{
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 700;
	text-align: center;
	background: #74d3f9;
	line-height: 1;
	padding: 0.5em;
}
.evid-att{
    display: block;
    line-height: 1.3;
    padding-left: 1em;
    text-indent: -1em;
}
@media screen and (max-width: 980px) {
	.evid{
		display: block;
	}
	.evid-h2{
		font-size: 5.5vw;
	}
    .evid-summary {
        width: 100%;
		min-width: inherit;
        margin-bottom: 0;
        padding: 2em 0 !important;
    }
    .evid-summary_wrap{
        max-width: 100%;
    }
    .evid-img{
        flex: initial;
        width: 100%;
        height: 50vw;
    }
}


/*EFFECT*/
.effect-h2,
.effect-h2 b{
    font-size: 6vw;
    text-align: center;
    font-weight: bold;
    color: var(--gray8);
    letter-spacing: -0.05em;
    line-height: 1.3;
}
.effect-h2 b{
    font-size: 6.4vw;
    color: var(--black);
}
.effect-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.effect-summary{
	width: 33.3%;
    padding: 0 0 0 5%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.effect-img{
    width: 33.3%;
}
.effect-h3{
	font-size: clamp(21px, 2vw, 28px);
	line-height: 1;
}
.effect-h3 b{
	font-size: 200%;
	vertical-align: -0.2em;
}
.effect-list{
    width: 33.3%;
    display: flex;
    align-items: center;
}
.effect-ul{
    width: 90%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
}
.effect-ul li{
	padding: 1em 0;
	text-align: center;
	border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e4e8ed;
}
@media screen and (max-width: 980px) {
    .effect-h2,
    .effect-h2 b{
        font-size: 9vw;
        letter-spacing: 0;
    }
    .effect-h2 b{
        display: block;
    }
    .effect-summary{
        width: 90%;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .effect-img{
        width: 100%;
        margin: 2em 0;
    }
    .effect-img img{
        max-width: 480px;
    }
    .effect-list{
        width: 100%;
    }
    .effect-ul{
        width: 95%;
        margin: 0 auto;
    }
}

/*FIT*/
.fit-h2{
    font-size: clamp(24px, 3vw, 48px);
}
.fit-h2 br{
    display: none;
}
.fit-ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
}

.fit-ul li p{
    line-height: 1.4;
    font-size: clamp(12px, 1.1vw, 14px);
    margin: 0.5em 0;
}
@media screen and (max-width: 1280px) {
    .fit-ul{
        gap: 1.5em;
    }
}
@media screen and (max-width: 980px) {
    .fit-h2 {
        line-height: 1.3;
        font-size: 5vw;
    }
    .fit-h2 br{
        display: block;
    }
    .fit-ul{
        grid-template-columns: repeat(3, 1fr);
    }
    .fit-ul li:last-child{
        display: block;
    }
}
@media screen and (max-width: 680px) {
    .fit-ul{
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
    .fit-ul li:last-child{
        display: none;
    }
}	

/*SPEC*/
.spec{
    background: var(--egray);
}
.spec-h3{
    text-align: center;
    font-size: clamp(28px, 5vw, 68px);
    line-height: 1.3;
}
.spec-h3 br{
    display: none;
}
.spec-ul{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap:1em;
}
.spec-ul li{
	padding: 2em 1em;
	text-align: center;
	background: var(--blue);
}
.spec-ul li *{
	color: #fff;
}
.spec-ul li h4{
	font-size: clamp(13px, 1.4vw, 24px);
	line-height: 1;
	margin-bottom: 0.5em;
}
.spec-ul li b{
	font-size: clamp(21px, 2.6vw, 68px);
	line-height: 1;
	font-weight: 700;
}
.spec-ul li small{
	font-size: clamp(13px, 1.4vw, 18px);
	font-weight: 700;
}
.spec-ul li:first-child small{
	font-size: clamp(10px, 1.4vw, 18px);
}
.spec-ul li p{
	margin: 0.7em 0 0;
	text-align: left;
	line-height: 1.5;
	font-size: clamp(12px, 1.4vw, 14px);
}
.spec-ul li p span{
    display: inline-block;
    font-size: clamp(12px, 1.4vw, 14px);
}
.spec-table {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.spec-table::-webkit-scrollbar {
  height: 6px; /* スクロールバーを細めに */
}
.spec-table table{
    margin: 0 auto;
    min-width: 640px;
    table-layout: fixed;
    border-collapse: collapse;
}
.spec-table th,
.spec-table td{
    padding: 1.5em 0.5em;
    border: 1px solid var(--agray);
    text-align: center;
    line-height: 1.3;
    font-size: clamp(13px, 1.2vw, 16px);
}
.spec-table th br{
    display: none;
}
.spec-table td{
    background: #fff;
}
.spec-table th small,
.spec-table td small{
    display: block;
    line-height: 1;
}
.spec-table td b{
    font-size: clamp(21px, 2vw, 28px);
}
.spec-table th:first-child{
    background: var(--gray7);
    color: #fff;
}
.spec-table tr:first-of-type th{
    background: var(--dgray);
}
.spec-table tr:first-of-type th:first-of-type{
    background: #fff;
}
.spec-table tr:first-of-type th:nth-of-type(2){
    background: var(--blue);
    color: #fff;
}
.spec-table th:nth-of-type(1),
.spec-table th:nth-of-type(3),
.spec-table th:nth-of-type(4),
.spec-table td:nth-of-type(2),
.spec-table td:nth-of-type(3) {
    width: 15em;
}
.spec-table th:nth-of-type(2),
.spec-table td:nth-of-type(1) {
    width: auto;
    padding: 1.5em 1em;
}
@media screen and (max-width: 980px) {
    .spec-ul{
        grid-template-columns: repeat(2, 1fr);
    }
    .spec-ul li b {
        font-size: 7vw;
    }
    .spec-ul li:first-child b{
        font-size: 5.4vw;
    }
    .spec-table table{
        width: 100%;
    }
    .spec-table th:nth-of-type(1),
    .spec-table th:nth-of-type(3),
    .spec-table th:nth-of-type(4),
    .spec-table td:nth-of-type(2),
    .spec-table td:nth-of-type(3) {
        width: 10em;
    }
}
@media screen and (max-width: 680px) {
    .spec-table table{
        min-width: 540px;
    }
    .spec-table th br{
        display: block;
    }
    .spec-table th:nth-of-type(1){
        width: 6em;
    }
}
@media screen and (max-width: 580px) {
    .spec-h3 br{
        display: block;
    }
    .spec-ul{
        gap:0.5em;
    }
    .spec-ul li:last-child p{
        text-align: center;
    }
    .spec-table th,
    .spec-table td{
        padding: 1em 0.5em !important;
    }
}



/*ELECT*/
.elect-h3{
	color: var(--blue);
	text-align: center;
	font-size: clamp(21px, 5vw, 68px);
	line-height: 1.3;
}

.elect-wrap{
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}
.elect-h4{
	text-align: center;
	font-size: clamp(24px, 2.1vw, 38px);
	margin: 1em 0;
    background: rgba(0,0,0,0.1);
}
.elect-h4 small{
    font-size: clamp(16px, 1.5vw, 24px);
}
.elect-item{
	padding: 0 2em;
	display: flex;
    justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
}
.elect-img{
	width: 100%;
	margin: 1em auto;
}
.elect-img01{
	width: 100%;
    max-width: 780px;
    margin: 0 auto 2em;
}
.elect-img02,
.elect-img03{
	width: 50%;
}
.elect-img02 .elect-img,
.elect-img03 .elect-img{
    max-width: 340px;
}
@media screen and (max-width: 980px) {
	.elect-wrap{
		flex-wrap: wrap;
		flex-direction: inherit;
	}
	.elect-img01{
		width: 100%;
	}
	.elect-img01{
		border: none;
		margin-bottom: 2em;
	}
	.elect-img02{
		width: 50%;
		border: none;
	}
	.elect-img03{
		width: 50%;
		border-left: 1px solid rgba(255,255,255,0.3);
	}
}
@media screen and (max-width: 780px) {
    .elect-h3{
        font-size: 7.4vw;
    }
    .elect-item{
        padding: 0;
    }
    .elect-img02,
    .elect-img03{
        width: 49%;
    }
}
@media screen and (max-width: 580px) {
    .elect-img02,
    .elect-img03{
        width: 100%;
    }
    .elect-img02 .elect-img,
    .elect-img03 .elect-img{
        max-width: 280px;
    }
}


/*CART*/
.cart{
    background: var(--black);
}
.cart-h3{
    font-size: clamp(16px, 4vw, 38px);
    line-height: 1.3;
    color: #fff;
}
.cart-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cart-item{
    width: 49%;
}
.cart-color{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.cart-img{
    width: calc(50% - 2.5px);
    padding: 1em;
    background: #fff;
}
.cart-h4{
    font-size: clamp(12px, 1.2vw, 16px);
}
.cart-price{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.cart-price dt{
    width: 5.5em;
    background: var(--blue);
    color: #fff;
    text-align: center;
    font-size: clamp(12px, 1.1vw, 13px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}
.cart-price dd{
    flex: 1;
    background: #fff;
    padding: 0.5em;
    text-align: right;
}
.cart-price dd b{
    font-size: clamp(16px, 1.4vw, 18px);  
}
.cart-price small{
    font-size: clamp(11px, 1.1vw, 14px);
}
.cart-price a{
    font-size: clamp(12px, 1.1vw, 13px);
    background: var(--red);
    color: #fff;
    padding: 0.5em;
    line-height: 1;
    width: 10em;
    text-align: center;
    display: inline-block;
    margin-left: 5px;
}
.cart-price a:hover{
    background: var(--black);
}
.cart-table{
    width: 100%;
    border-collapse: collapse;
}
.cart-table th,
.cart-table td{
    padding: 0.5em;
    font-size: clamp(12px, 1.1vw, 14px);
    text-align: left;
    border-bottom: 1px dotted #fff;
}
.cart-table tr:nth-child(even){
    background: #fff;
}
.cart-table tr:nth-child(odd){
    background: var(--fgray);
}
@media screen and (max-width: 880px) {
    .cart-item{
        width: 100%;
        margin-bottom: 3em;
    }
    .cart-img{
        padding: 1em 0;
    }
}


/*CASE*/
.case{
    background: var(--fgray);
}
.case-h2{
    font-size: clamp(24px, 3vw, 48px);
}
.case-h2 small{
    display: block;
}
.case-swiper .swiper-wrapper{	
	transition-timing-function: linear;
}
.case-swiper small{
    display: block;
}
.case-ul{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 2em;
}
.case-ul li{
    background: #fff;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
.case-list_summary{
    padding: 1em 2em;
}
.case-h4{
    font-size: clamp(16px, 1.4vw, 21px);
    margin-bottom: 0.5em;
}
.case-ul li p{
    font-size: clamp(12px, 1.1vw, 14px);
}
.case-c_ul{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 1em;
}
.case-c_ul li{
    padding: 2em;
    background: #fff;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
.case-c_ul li p:before{
    content: "“";
    display: inline-block;
    font-size: 500%;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    vertical-align: -0.5em;
    line-height: 0;
    color: var(--blue);
}
.case-c_ul li p{
    font-size: clamp(12px, 1.1vw, 14px);
}
.case-c_ul li p small{
    display: inline-block;
}
.case-cats{
    border-top: 1px solid var(--gray8);
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1em;
}
.case-h5{
    background: #fff;
    padding: 0.2em 0.5em;
    text-align: center;
    margin-bottom: 0.5em;
}
.case-cat ul{
    padding-left: 1.5em !important; 
}
.case-cat li{
    list-style: outside disc;
    font-size: clamp(12px, 1.1vw, 14px);
}
.case-cat li:last-child{
    list-style: none;
}
@media screen and (max-width: 1280px) {
    .case-cats{
        grid-template-columns: repeat(5,1fr);
    }
}
@media screen and (max-width: 980px) {
    .case-ul{
        grid-template-columns: repeat(2,1fr);
        gap: 1em;
    }
    .case-c_ul{
        grid-template-columns: repeat(3,1fr);
    }
    .case-cats{
        grid-template-columns: repeat(4,1fr);
    }
}
@media screen and (max-width: 680px) {
    .case-ul{
        grid-template-columns: repeat(1,1fr);
        gap: 1em;
    }
    .case-c_ul{
        grid-template-columns: repeat(2,1fr);
        gap: 0.5em;
    }
    .case-c_ul li p small{
        display: inline;
    }
    .case-cats{
        padding: 1em 0 !important;
        grid-template-columns: repeat(2,1fr);
    }
    .case-c_ul li,
    .case-list_summary{
        padding: 1em;
    }
}



/*GRAPH*/
.chart{
	padding: 8em 0;
	background: #777;
}
.chart-h2{
	width: 95%;
	margin: 0 auto 0.5em;
	text-align: center;
	color: #fff;
	font-size: clamp(24px, 2vw, 34px);
	line-height: 1.3;
}
.chart-h2 small{
    font-size: clamp(16px, 1.4vw, 18px);
    color: #fff;
}
.chart-h2 br{
	display: none;
}
.chart-lead{
    color: #fff;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.3;
    font-size: clamp(12px, 1.1vw, 14px);
}
.chart-wrap{
	width: 95%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 0 1em;
}
.chrat-graph{
	background: #fff
}
canvas {
	width: 100% !important;
	height: auto !important;
	display: block;
	aspect-ratio: 4 / 2;  
	padding: 0.5em;
}
.chart-h4{
	text-align: center;
	background: var(--gray2);
	line-height: 1;
	padding: 0.7em;
	color: #fff;
	font-size: clamp(16px, 1.4vw, 18px);
}
.chart-dl{
	padding: 1em;
}
.chart dl{
	display: flex;
	align-items: flex-start;
	margin-bottom: 5px !important;
}
.chart dt{
	width: 8em;
	background: #666;
	padding: 0.3em 0 0.5em;
	line-height: 1;
	text-align: center;
	color: #fff;
	font-size: clamp(12px, 1.1vw, 14px);
}
.chart dd{
	flex: 1;
	margin-left: 0.5em;
	font-size: clamp(12px, 1.1vw, 14px);
	line-height: 1.5;
}
@media screen and (max-width: 980px) {
	.chart-wrap{
		display: block;
	}
	.chrat-graph{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 1em;
	}
	.chart-h4{
		width: 100%;
	}
	.chart-canvas,
	.chart-dl{
		width: 50% !important;
	}
    .chart-lead{
        text-align: left !important;
    }
}
@media screen and (max-width: 680px) {
	.chart{
		padding: 3em 0;
	}
	.chart-h2 br{
		display: block;
	}
	.chrat-graph{
		display: block;
	}
	.chart-canvas,
	.chart-dl{
		width: 100% !important;
	}
}

/*FAQ*/
.faq-h3{
    font-size: clamp(28px, 3vw, 48px);
}
.faq-wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.faq-h4{
    width: 30%;
    font-size: clamp(21px, 2.1vw, 38px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 1em;
}
.faq-h4:after{
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background: var(--black);
}
.faq-list{
    flex: 1;
}
.faq dl{
    margin-bottom: 2em;
}
.faq dt{
    background: var(--egray);
    padding: 0.2em 1em;
}
.faq dd{
    padding: 1em 0 1em 1em;
    font-size: clamp(12px, 1.4vw, 14px);
}
.faq dd a{
    color: var(--red);
    text-decoration: underline;
}
.faq dd a:hover{
    color: var(--blue);
}
.faq-flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.faq-flex p{
    flex: 1;
    font-size: clamp(12px, 1.4vw, 14px);
}
.faq-flex video{
    width: 60%;
    margin-left: 1em;
}
@media screen and (max-width: 980px) {
    .faq-flex video{
        width: 100%;
        margin-left: 0;
    }
}
@media screen and (max-width: 680px) {
    .faq-h4{
        width: 100%;
        margin: 0 0 0.5em 0;
    }
    .faq-list{
        padding-left: 2em;
    }
}

/*FORM*/
.form{
    background: var(--fgray);
}
.form-h3{
    font-size: clamp(24px, 2.1vw, 38px);
    line-height: 1.3;
}
.form-h3 br{
    display: none;
}
.contact-form{
    max-width: 780px;
    margin: 0 auto;
}
.contact-btn{
    display: block;
    width: 15em;
    text-align: center;
    padding: 1em 2em;
    color: #fff;
    margin: 0 auto;
    background: var(--red);
    cursor: pointer;
    transition: 0.2s all ease;
}
.contact-btn:hover{
    background: var(--black);
}
.contact-btns{
    display: flex;
    justify-content: center;
}
.contact-btns .contact-btn{
    margin: 0 5px !important;
    color: #fff;
}
@media screen and (max-width: 680px) {
    .form-h3 br{
        display: block;
    }
    .contact-form p br{
        display: none;
    }
}

.privacy{
    width: 100%;
    height: 200px;
    overflow-y: scroll;
    padding: 1em;
    background: #fff;
}
.privacy h4{
    font-size: clamp(12px, 1.1vw, 14px);
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.privacy p,
.privacy li,
.privacy a{
    font-size: clamp(11px, 1.1vw, 12px);
    line-height: 1.3;
}
.privacy ul{
    padding-left: 2.5em !important;
    margin-bottom: 1.5em;
}
.privacy li{
    list-style: disc outside !important;
    padding: 0.2em 0;
}
.privacy p{
    padding-left: 2.5em !important;
}
.privacy a{
    color: var(--red);
}
.privacy a:hover{
    text-decoration: underline;
}

/*FOOTER*/
.footer{
	background: var(--black);
	padding: 3em 1em;
    color: #fff;
}
.footer-wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.footer-content{
    display: flex;
    justify-content: flex-start;
    flex: 1;
    flex-wrap: wrap;
}
.footer-h5{
    color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.footer-address{
    color: #fff;
    padding-left: 1em;
    text-indent: -0.5em;
}
.footer-address a{
    color: #fff;
}
.footer-copy{
    color: #fff;
    width: 11em;
    text-align: right;
}
@media screen and (max-width: 680px) {
    .footer-wrap,
    .footer-content,
    .footer-copy{
        width: 100%;
        flex: initial;
        display: block;
    }
}

/*TOTOP*/
#totop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
#totop.is-visible {
    opacity: 1;
    pointer-events: auto;
}
#totop a{
    font-size: 48px;
    color: var(--red);
    display: block;
    line-height: 1;

}
#totop:hover a{
	transform: scale(1.1,1.1);
    color: var(--blue);   
}
@media screen and (max-width: 680px) {
	#totop {
		bottom: 5px;
		right: 5px;
	}
}