/* CSS Document */


/*- menu -*

変更領域, fv

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

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

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

* 変更領域

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

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

/*- body -*/
body, body *{
	/*font-family: "Noto Sans JP", sans-serif;*/
    color: #333;
}

/*- footer -*/
footer .inner{
    background: #64A0fA;
}

footer .inner p{
	color: #FFFFFF;
}

/*- main -*/
main{
	background: url("../img/index/bg02.png") repeat center top, url("../img/index/bg01.jpg") repeat center top;
}

main, main *{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/*- title -*/
h3.title img{
}

/*- Box -*/
.Box > *{
}

/*- top -*/
#top{
}

/*- btm -*/
#btm{
}

/* method */
#method + *{
	margin-top: clamp(50px, 6.25vw, 80px);
}

/* insta */
#insta .inner #insta_f_link {
    background-image: linear-gradient(to right, #f6416c, #b210ff);
}

/*- rule -*/
#rule{
	padding: clamp(40px, 6.25vw, 80px) clamp(10px, 1.5625vw, 20px) clamp(50px, 7.8125vw, 100px);
}

#rule > *{
	background: url("../img/index/rule/bg_top.png") no-repeat center top, url("../img/index/rule/bg_btm.png") no-repeat center bottom, #FFFFFF;
	padding: clamp(50px, 7.8125vw, 100px) clamp(20px, 3.125vw, 40px);
	max-width: 1040px;
}

/* ar_sp */
.ar_sp a{
}




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

@media (orientation: landscape) {
}




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

@media print,screen and (min-width: 768px) {
	
	/*- top -*/
	#top{
		background: url("../img/index/bg_top.png") no-repeat center top;
		min-height: 750px;
	}
	
	/* method */
	#method{
		padding-inline: clamp(10px, 1.5625vw, 20px);
	}
	
}




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

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




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

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







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

* fv

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

/* screen width 768px未満
---------------------------------------------------------------------*/
.fv .fv_box{
    background: url("../img/index/fv/fv_bg_pc.png") no-repeat center;
    background-size: auto 100%;
}

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




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

@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){
	
	
	
}







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

* contents

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

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

#contents{
	background: url("../img/index/contents/bg_sp.png") no-repeat center bottom;
	background-size: 100% auto;
	padding-inline: clamp(32px, 9.375vw, 72px);
}

#contents *{
	color: #4c6166;
}




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

@media (orientation: landscape) {
}




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

@media print,screen and (min-width: 768px) {
	
	#contents{
		background-image: url("../img/index/contents/bg_pc.png");
		background-size: auto;
		padding-inline: clamp(10px, 1.5625vw, 20px);
	}
	
}




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

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




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

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







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

* about

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

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

#about{
	display: flex;
	flex-direction: column;
	row-gap: clamp(20px, 3.125vw, 40px);
	margin-inline: auto;
	max-width: 1040px;
}

#about .text > * + *{
	margin-top: clamp(16px, 1.5625vw, 20px);
}

#about .text p{
	text-align: center;
	font-weight: 500;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
}

#about .text p a{
	font-weight: 500;
}

#about .text p a:hover{
	text-decoration: none;
}

#about .image img{
	margin-inline: auto;
	width: 70vw;
}




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

@media (orientation: landscape) {
}




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

@media print,screen and (min-width: 768px) {
	
	#about{
		flex-direction: row-reverse;
		column-gap: 10px;
	}
	
	#about > *{
		flex: 1;
	}
	
	#about .text{
		padding-top: clamp(16px, 2.5vw, 32px);
	}
	
	#about .text p{
		text-align: left;
	}
	
	#about .image img{
		margin-left: 0;
	}
	
}




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

@media print,screen and (min-width: 1024px) {
	
	#about .image img{
		width: 440px;
	}
	
}




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

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







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

* present

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

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

#present{
	display: flex;
	flex-direction: column;
	row-gap: clamp(20px, 5.2083vw, 40px);
	margin-inline: auto;
	max-width: 1040px;
}

* + #present{
	margin-top: clamp(40px, 6.25vw, 80px);
}

#present .text{
	position: relative;
}
	
#present .text::before{
	content: "";
	display: block;
	background: url("../img/index/contents/present/kasa.png") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 0.981;
	width: clamp(100px, 27.60416vw, 212px);
	transform: translate(24%, -40%);
	position: absolute;
	right: 0;
	top: 0;
}

#present .text > * + *{
	margin-top: clamp(16px, 2.5vw, 32px);
}

#present .text h3 span{
	display: block;
	position: relative;
	margin-inline: auto;
	width: clamp(120px, 33.3vw, 250px);
	background: url("../img/index/bg01.jpg") repeat center top, #0497ab;
	background-blend-mode: multiply;
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.8rem, 4.6875vw, 3.6rem);
	color: #FFFFFF;
	padding-block: clamp(5px, 1.302083vw, 10px);
}

#present .text h3 span::before{
	content: "";
	display: block;
	background: url("../img/index/contents/present/present.png") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 0.413;
	width: clamp(150px, 39.0625vw, 300px);
	transform: translate(-52%, -52%);
	position: absolute;
	left: 0;
	top: 0;
}

#present .text section > * + *{
	margin-top: clamp(16px, 2.5vw, 32px);
}

#present .text section > p + p{
	margin-top: clamp(16px, 1.875vw, 24px);
}

#present .text section h4{
	font-weight: 700;
	font-size: clamp(2.8rem, 3.125vw, 4rem);
	color: #0497ab;
	line-height: 1.4;
}

#present .text section h4 small{
	display: block;
	font-weight: 700;
	font-size: clamp(2.8rem, 2.5vw, 3.2rem);
	color: #0497ab;
}

#present .text section p{
	font-weight: 500;
	font-size: clamp(1.2rem, 1.25vw, 1.6rem);
	color: #4c6166;
}

#present .text section p a{
	color: #6478f0;
}

#present .text section p a:hover{
	text-decoration: none;
}




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

@media (orientation: landscape) {
}




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

@media print,screen and (min-width: 768px) {
	
	#present{
		flex-direction: row;
		justify-content: space-between;
	}
	
	#present .image{
		width: 40%;
	}
	
	#present .text{
		width: 60%;
	}
	
	#present .text::before{
		width: clamp(100px, 13.28125vw, 170px);
		transform: translate(-13px, -40%);
	}

	#present .text h3 span{
		width: clamp(120px, 13.28125vw, 170px);
		background: url("../img/index/bg01.jpg") repeat center top, #0497ab;
		background-blend-mode: multiply;
		font-size: clamp(1.8rem, 1.875vw, 2.4rem);
		padding-block: 5px;
	}
	
	#present .text h3 span::before{
		width: clamp(100px, 15.625vw, 200px);
	}
	
}




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

@media print,screen and (min-width: 1024px) {
	
	#present .image{
		width: 420px;
	}
	
	#present .text{
		padding-left: 40px;
		width: calc(100% - 420px);
	}
	
	#present .text h3 span{
		margin-left: 0;
	}
	
	#present .text h3 span::before{
		transform: translate(-36%, -64%);
	}
	
	#present .text section{
		padding-left: 32px;
	}
	
}




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

@media print,screen and (min-width: 1280px){
	
	#present .text h3 span::before{
		transform: translate(-52%, -52%);
	}
	
}







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

* 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){
	
	
	
}