/* CSS Document */


/*- menu -*

fv, news, anchor_links, can_do, other, smartphone, movie

* filetop *
------------------------------------------------------------------------------------------------------------------------------------------*/

/*- File name [ index.css ] -*/

/*----------------------------------------------------------------------------------------------------------------------------------------*

* fv

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.fv .fv_box{
	position: relative;
}

.fv .fv_box .fv_txt img{
    margin-right: auto;
    margin-left: auto;
}

.fv .fv_box #fv_btm{
	display: grid;
	/*row-gap: clamp(32px, 5vw, 64px);*/
	row-gap: clamp(32px, 3vw, 64px);
	padding: clamp(32px, 5vw, 64px) 0;
	position: absolute;
	transform: translateX(-50%);
	max-width: 1040px;
	width: 100%;
	bottom: 0;
	left: 50%;
}

.fv .fv_box #fv_btm .list_btn{
	display: flex;
	column-gap: clamp(24px, 2.5vw, 32px);
	position: relative;
	padding: 0 16px;
}

.fv .fv_box #fv_btm .list_btn::before{
	content: "";
	display: block;
	background: url("../img/index/hukidashi.png") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 0.322;
	width: clamp(183px, 19.140625vw, 245px);
	transform: translate(50%, calc(-100% + (clamp(14px, 1.40625vw, 18px) * -1)));
	position: absolute;
	right: 50%;
	top: 0;
	animation: fluffy_sp 3s infinite;
}

.fv .fv_box #fv_btm .list_btn > *{
	width: calc((100% - (clamp(24px, 2.5vw, 32px) * 1)) / 2);
}

.fv .fv_box #fv_btm .list_btn > *:nth-of-type(odd) img{
	margin-left: auto;
}

.fv .fv_box #fv_btm .list_btn a img{
	height: clamp(42px, 4.53125vw, 58px);
}

.fv .fv_box #fv_btm p,
.fv .fv_box #fv_btm p a{
	font-size: clamp(1.2rem, 1.25vw, 1.6rem);
	font-weight: 500;
	color: #90939c;
}

.fv .fv_box #fv_btm p{
	text-align: center;
}

.fv .fv_box #fv_btm p a{
	text-decoration: underline;
}

.fv .fv_box #fv_btm p a:hover{
	text-decoration: none;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	.fv .fv_box{
		background: url("../img/index/fv/pc_bg.png") no-repeat center;
		background-size: auto 100%;
	}
	
	.fv .fv_box #fv_btm{
		grid-template-columns: calc(50% + clamp(6px, 0.9375vw, 12px)) calc(50% - clamp(6px, 0.9375vw, 12px));
        row-gap: 20px;
        padding: 24px 0;
	}
	
	.fv .fv_box #fv_btm .list_btn{
		justify-content: flex-end;
		padding: 0;
	}
	
	.fv .fv_box #fv_btm .list_btn::before{
		transform: translate(50%, calc(-100% + (clamp(14px, 1.40625vw, 18px) * -1)));
		right: calc((clamp(42px, 4.53125vw, 58px) * 3.333) + (clamp(24px, 2.5vw, 32px) / 2));
		animation: fluffy_pc 3s infinite;
	}
	
	.fv .fv_box #fv_btm .list_btn > *{
		width: auto;
	}
	
	.fv .fv_box #fv_btm p{
		grid-column: 1 / 3;
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}

@keyframes fluffy_sp {
  	0%, 100% {
    	transform: translate(50%, calc(-100% + (clamp(14px, 1.40625vw, 18px) * -1)));
  	}
  	50% {
    	transform: translate(50%, calc(-100% + -10px + (clamp(14px, 1.40625vw, 18px) * -1)));
  	}
}

@keyframes fluffy_pc {
  	0%, 100% {
    	transform: translate(50%, calc(-100% + (clamp(14px, 1.40625vw, 18px) * -1)));
  	}
  	50% {
    	transform: translate(50%, calc(-100% + -20px + (clamp(14px, 1.40625vw, 18px) * -1)));
  	}
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* news

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#news{
	background-position: center clamp(8px, 1.25vw, 16px);
	background-repeat: repeat-x;
	background-size: auto clamp(16px, 2.5vw, 32px);
	background-color: #f2f4f0;
	background-image: url("../img/index/bg_line_white.png");
	padding-bottom: clamp(50px, 7.8125vw, 100px);
	padding-top: clamp(50px, 7.8125vw, 100px);
}

#news > * > * + *{
	margin-top: clamp(50px, 7.8125vw, 100px);
}

#news .news_list{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: clamp(24px, 3.125vw, 40px) clamp(16px, 3.125vw, 32px);
	border-radius: clamp(8px, 0.9375vw, 12px);
	background-color: #FFFFFF;
	padding: clamp(24px, 3.125vw, 40px) clamp(16px, 3.125vw, 40px);
}

#news .news_list > *{
	font-size: clamp(1.6rem, 1.5625vw, 2rem);
}

#news .news_list > dd{
	border-left: 2px solid #eb6153;
	padding-left: clamp(16px, 3.125vw, 32px);
}

#news .news_list > dd a:hover{
	text-decoration: underline;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#news .news_list{
		flex-direction: row;
	}
	
	#news .news_list > dt{
		width: calc(clamp(1.6rem, 1.5625vw, 2rem) * 5);
	}
	
	#news .news_list > dd{
		width: calc(100% - ((clamp(1.6rem, 1.5625vw, 2rem) * 5) + clamp(16px, 3.125vw, 32px)));
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* anchor_links

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#anchor_links .inner:not(.scroll){
	padding: clamp(50px, 7.8125vw, 100px) clamp(32px, 5vw, 64px);
}

#anchor_links .inner:not(.scroll) > *{
	flex-wrap: wrap;
}

#anchor_links .inner:not(.scroll) h2{
	display: none;
}

#anchor_links .inner:not(.scroll) .list_btn{
	gap: clamp(12px, 3.125vw, 24px) clamp(28px, 4.375vw, 56px);
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

#anchor_links .inner:not(.scroll) .list_btn > li{
	max-width: none;
	width: 100%;
}

#anchor_links .inner.scroll .list_btn > li:first-of-type{
	display: none;
}

#anchor_links .inner:not(.scroll) .list_btn a[class*="al_btn"]{
	font-size: clamp(1.6rem, 1.5625vw, 2rem);
	height: clamp(55px, 5.625vw, 72px);
}

#anchor_links .inner:not(.scroll) .list_btn a[class*="al_btn"]::after{
	width: clamp(10px, 0.9375vw, 12px);
	right: clamp(18px, 4.6875vw, 36px);
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#anchor_links .inner:not(.scroll) .list_btn{
		flex-direction: row;
	}
	
	#anchor_links .inner:not(.scroll) .list_btn > li{
		max-width: 270px;
		width: calc((100% - (clamp(28px, 4.375vw, 56px) * 2)) / 3);
	}
	
	#anchor_links .inner:not(.scroll) .list_btn a[class*="al_btn"]::after{
		right: clamp(8px, 1.25vw, 16px);
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* can_do

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#can_do > *{
	background-color: #f2f4f0;
	padding-top: clamp(50px, 7.8125vw, 100px);
}

#can_do > * h3 + *{
	margin-top: clamp(50px, 7.8125vw, 100px);
}

/* section_box */
#can_do .section_box{
	counter-increment: num;
	padding: clamp(38px, 5.9375vw, 76px) 16px clamp(50px, 7.8125vw, 100px);
}

#can_do .section_box > * > * + *{
	margin-top: clamp(32px, 5vw, 64px);
}

#can_do .section_box > * > h4.title{
	margin-right: auto;
	margin-left: auto;
	max-width: 1040px;
}

#can_do .section_box > * > h4.title::before{
	content: "0"counter(num);
}

#can_do .section_box .column_box{
	display: grid;
	row-gap: clamp(50px, 7.8125vw, 100px);
	margin-right: auto;
	margin-left: auto;
	max-width: 1280px;
}

#can_do .section_box .column_box .left h5 + *{
	margin-top: clamp(32px, 5vw, 64px);
}

#can_do .section_box .column_box .left p strong{
	font-weight: 600;
	font-size: clamp(1.8rem, 2.34375vw, 3rem);
}

#can_do .section_box .column_box .left * + .caveat{
	margin-top: clamp(24px, 3.125vw, 40px);
}

#can_do .section_box .column_box .left .caveat li{
	text-indent: calc(clamp(1.2rem, 1.25vw, 1.6rem) * -1);
	padding-left: clamp(1.2rem, 1.25vw, 1.6rem);
	font-size: clamp(1.2rem, 1.25vw, 1.6rem);
	font-weight: 500;
	color: #90939c;
}

/* .bg_ */
#can_do *[class*="bg_"]{
	background-position: center clamp(8px, 1.25vw, 16px);
	background-repeat: repeat-x;
	background-size: auto clamp(16px, 2.5vw, 32px);
}

#can_do .bg_ffffff{
	background-color: #FFFFFF;
	background-image: url("../img/index/bg_line_gray.png");
}

#can_do .bg_f2f4f0{
	background-color: #f2f4f0;
	background-image: url("../img/index/bg_line_white.png");
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	/* section_box */
	#can_do .section_box .column_box{
		grid-template-columns: calc(50% + clamp(40px, 6.25vw, 80px)) calc(50% - clamp(40px, 6.25vw, 80px));
	}
	
	#can_do .section_box .column_box .left > *{
		margin-right: clamp(20px, 3.125vw, 40px);
		margin-left: auto;
		max-width: calc((1040px / 2) + clamp(20px, 3.125vw, 40px));
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* can_do other

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/

/* #smart */
#can_do #smart .column_box{
	row-gap: clamp(24px, 3.125vw, 40px);
}

#can_do #smart .column_box .left * + .image_cards{
	margin-top: clamp(50px, 6.25vw, 80px);
}

#can_do #smart .column_box .right img.smartphone{
	margin: 0 auto;
	width: clamp(180px, 25vw, 310px);
}

/* #registration */
#can_do #registration .column_box{
	row-gap: clamp(24px, 3.125vw, 40px);
}

#can_do #registration .column_box .left * + .point_list{
	margin-top: clamp(50px, 6.25vw, 80px);
}

#can_do #registration .column_box .left .point_list{
	border-radius: clamp(12px, 1.5625vw, 20px);
	background-color: #FFFFFF;
	padding: clamp(32px, 3.28125vw, 42px) clamp(20px, 2.65625vw, 34px);
}

#can_do #registration .column_box .left .point_list > li{
	font-weight: 700;
	font-size: clamp(1.6rem, 2.1875vw, 2.8rem);
	color: #eb6153;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	/* #purchase */
	#can_do #purchase .column_box .left > *{
		margin-right: 0;
		max-width: calc((1040px / 2) + clamp(40px, 6.25vw, 80px));
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* smartphone

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#can_do div.smartphone{
	position: relative;
	margin: 0 auto;
	width: clamp(180px, 25vw, 310px);
}

#can_do div.smartphone::before{
	content: "";
	display: block;
	z-index: 99999;
	background: url("../img/index/slide_frame.svg") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 2.07;
	width: clamp(180px, 25vw, 310px);
	position: absolute;
	opacity: 0;
	left: 0;
	top: 0;
}

#can_do div.smartphone:has(.slick-slider)::before{
	opacity: 1;
}

#can_do div.smartphone .demoSlider > li{
	display: none;
}

/* slick */
#can_do div.smartphone .slick-slider{
	margin-bottom: 0;
}

#can_do div.smartphone .slick-slider .slick-list{
	border-radius: 50px;
}

#can_do div.smartphone .slick-slider .slick-dots{
	display: flex;
	gap: clamp(4px, 0.625vw, 8px); 
	justify-content: center;
	position: static;
	margin-top: clamp(10px, 1.40625vw, 18px);
	height: clamp(10px, 1.40625vw, 18px);
}

#can_do div.smartphone .slick-slider .slick-dots li,
#can_do div.smartphone .slick-slider .slick-dots li button{
	padding: 0;
	margin: 0;
	height: clamp(10px, 1.40625vw, 18px);
	width: clamp(10px, 1.40625vw, 18px);
}

#can_do div.smartphone .slick-slider .slick-dots li button{
	border-radius: 50%;
	background-color: #90939c;
}

#can_do div.smartphone .slick-slider .slick-dots li.slick-active button{
    background-color: #ff9296;
}

#can_do div.smartphone .slick-slider .slick-dots li button::before{
	display: none;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* movie

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#movie{
	background-position: center clamp(8px, 1.25vw, 16px);
	background-repeat: repeat-x;
	background-size: auto clamp(16px, 2.5vw, 32px);
	background-color: #fbf8d9;
	background-image: url("../img/index/bg_line_white.png");
	padding-bottom: clamp(50px, 7.8125vw, 100px);
	padding-top: clamp(48px, 10vw, 128px);
}

#movie > * h3.title{
	color: #eb6153;
}

#movie > * h3.title + *{
	margin-top: clamp(50px, 7.8125vw, 100px);
}

#movie > * .youtube iframe{
	aspect-ratio: 1 / 0.563;
	width: 100%;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* Add Sample Code

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}


/*------------------------------------------------------------------------------------------------------------------------------------------

* バージョン情報

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/

.versioninfo h3{
    text-align: center;
    color: #2C9B11;
    font-weight: bold;
}

.versioninfo ul{
    display: flex;
    justify-content: center;
}

.versioninfo li{
    text-align: center;
    margin: 0 0.7em;
}

/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
    .versioninfo {
        grid-column: 1/2;
        width: 420px;
        margin-left: auto;
        font-size: 1.2em;
    }
	
}